@charset "UTF-8"; /* ===================================================================== NEURO MEISTER — Renewal Design System 목표: 신뢰도/전문성 강조, 전환율 개선, 비주얼 톤앤매너 전면 교체 ===================================================================== */ /* ---------- Design Tokens ---------- 기본(default)은 라이트 톤이며, [data-theme="dark"]를 에 붙이면 다크 모드로 전환됩니다. 시스템 다크 설정과 무관하게 기본은 항상 라이트입니다 (renewal.js의 테마 토글로만 전환 — 새로고침해도 마지막 선택이 유지됩니다). */ :root{ color-scheme: light; --nm-bg: #F7F9FC; --nm-bg-alt: #FFFFFF; --nm-surface: #FFFFFF; --nm-surface-2: #F1F4F9; --nm-border: rgba(15,23,42,0.08); --nm-border-strong: rgba(15,23,42,0.14); --nm-text: #0F172A; --nm-text-muted: #55606F; --nm-text-faint: #8A93A3; --nm-primary: #2458D6; /* 신뢰감 있는 메디컬 블루 (라이트용 진한 톤) */ --nm-primary-dark: #1B44AD; --nm-primary-tint: rgba(36,88,214,0.08); --nm-accent: #0C9C78; /* 데이터/수치 강조용 민트 (라이트용 진한 톤) */ --nm-accent-tint: rgba(12,156,120,0.10); --nm-warn: #B4740E; --nm-danger: #D8394B; --nm-radius-sm: 8px; --nm-radius-md: 14px; --nm-radius-lg: 22px; --nm-radius-pill: 999px; --nm-shadow-sm: 0 2px 10px rgba(15,23,42,0.08); --nm-shadow-md: 0 12px 40px rgba(15,23,42,0.12); --nm-shadow-glow: 0 0 0 1px rgba(36,88,214,0.28), 0 8px 30px rgba(36,88,214,0.14); --nm-header-bg: rgba(255,255,255,0.86); --nm-overlay-bg: rgba(15,23,42,0.32); --nm-chip-bg: rgba(15,23,42,0.035); --nm-hero-scrim: rgba(247,249,252,0.12); --nm-hero-video-opacity: 0.92; --nm-hero-text-glow: rgba(247,249,252,0.86); --nm-modal-bg: rgba(255,255,255,0.94); --nm-container: 1200px; --nm-gap: 24px; --nm-section-y: 120px; --nm-section-y-sm: 72px; --nm-ease: cubic-bezier(0.22, 1, 0.36, 1); } :root[data-theme="dark"]{ color-scheme: dark; --nm-bg: #0A0E13; --nm-bg-alt: #0D1319; --nm-surface: #121924; --nm-surface-2: #161F2C; --nm-border: rgba(255,255,255,0.08); --nm-border-strong: rgba(255,255,255,0.14); --nm-text: #F3F6FA; --nm-text-muted: #9AA7B8; --nm-text-faint: #6B7787; --nm-primary: #3E7BFA; --nm-primary-dark: #2E5FD1; --nm-primary-tint: rgba(62,123,250,0.12); --nm-accent: #22D3B4; --nm-accent-tint: rgba(34,211,180,0.12); --nm-warn: #F5A623; --nm-danger: #F45B69; --nm-shadow-sm: 0 2px 10px rgba(0,0,0,0.25); --nm-shadow-md: 0 12px 40px rgba(0,0,0,0.35); --nm-shadow-glow: 0 0 0 1px rgba(62,123,250,0.35), 0 8px 30px rgba(62,123,250,0.18); --nm-header-bg: rgba(10,14,19,0.86); --nm-overlay-bg: rgba(6,9,13,0.7); --nm-chip-bg: rgba(255,255,255,0.03); --nm-hero-scrim: rgba(10,14,19,0.22); --nm-hero-video-opacity: 0.62; --nm-hero-text-glow: rgba(6,9,13,0.72); --nm-modal-bg: rgba(4,6,9,0.9); } /* ---------- Reset ---------- */ *, *::before, *::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body, h1, h2, h3, h4, h5, h6, p, figure, ul, ol{ margin: 0; } ul, ol{ list-style: none; padding: 0; } img, video{ max-width: 100%; display: block; } a{ color: inherit; text-decoration: none; } button, input, select, textarea{ font: inherit; color: inherit; } button{ background: none; border: 0; cursor: pointer; } table{ border-collapse: collapse; width: 100%; } body{ background: var(--nm-bg); color: var(--nm-text); font-family: "Figtree", -apple-system, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; word-break: keep-all; overflow-wrap: break-word; transition: background-color .25s ease, color .25s ease; } body.no-scroll{ overflow: hidden; } /* 테마 전환 시 주요 표면 요소도 부드럽게 색이 바뀌도록 */ .nm-header, .nm-card, .nm-plan, .nm-testi, .nm-accordion-item, .nm-form, .nm-step, .nm-segment, .nm-spec-table, .nm-badge, .nm-stat-strip__item, .nm-trust__fact, .nm-package-list li, .nm-field input, .nm-field select, .nm-field textarea, .nm-report, .nm-tabbar button, .nm-top-btn, .nm-mobile-menu__panel{ transition: background-color .25s ease, color .25s ease, border-color .25s ease; } [id]{ scroll-margin-top: 96px; } .nm-container{ width: 100%; max-width: var(--nm-container); margin: 0 auto; padding: 0 24px; } .nm-container--wide{ max-width: 1360px; } .nm-section{ padding: var(--nm-section-y) 0; position: relative; } @media (max-width: 991px){ .nm-section{ padding: var(--nm-section-y-sm) 0; } } .nm-section--alt{ background: var(--nm-bg-alt); } .nm-section--border-t{ border-top: 1px solid var(--nm-border); } /* ---------- Typography ---------- */ .nm-eyebrow{ display: inline-flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--nm-primary); margin-bottom: 16px; } .nm-eyebrow::before{ content: ""; width: 18px; height: 1px; background: var(--nm-primary); } h1, h2, h3, h4, h5{ font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; } .nm-h1{ font-size: clamp(34px, 4.6vw, 58px); line-height: 1.18; letter-spacing: -0.03em; } .nm-h2{ font-size: clamp(28px, 3.4vw, 39px); letter-spacing: -0.025em; } .nm-h3{ font-size: clamp(20px, 2vw, 26px); } .nm-lead{ font-size: 18px; line-height: 1.7; color: var(--nm-text-muted); } .nm-text-muted{ color: var(--nm-text-muted); } .nm-text-faint{ color: var(--nm-text-faint); } .nm-text-primary{ color: var(--nm-primary); } .nm-text-accent{ color: var(--nm-accent); } .nm-section-head{ max-width: 640px; margin-bottom: 56px; } .nm-section-head.nm-center{ max-width: 680px; margin-left: auto; margin-right: auto; text-align: center; } .nm-section-head.nm-split{ max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; } /* ---------- Buttons ---------- */ .nm-btn{ display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 28px; border-radius: var(--nm-radius-pill); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; transition: transform .25s var(--nm-ease), box-shadow .25s var(--nm-ease), background .25s var(--nm-ease), border-color .25s var(--nm-ease); white-space: nowrap; } .nm-btn--primary{ background: var(--nm-primary); color: #fff; box-shadow: 0 10px 30px rgba(62,123,250,0.35); } .nm-btn--primary:hover{ background: var(--nm-primary-dark); transform: translateY(-2px); } .nm-btn--ghost{ background: transparent; color: var(--nm-text); border: 1px solid var(--nm-border-strong); } .nm-btn--ghost:hover{ border-color: var(--nm-primary); color: var(--nm-primary); } .nm-btn--sm{ padding: 11px 20px; font-size: 14px; } .nm-btn--block{ width: 100%; } .nm-btn[disabled]{ opacity: .5; cursor: not-allowed; } /* ---------- Header ---------- */ .nm-header{ position: sticky; top: 0; z-index: 200; padding: 20px 0; transition: background .3s var(--nm-ease), padding .3s var(--nm-ease), border-color .3s var(--nm-ease); border-bottom: 1px solid transparent; } .nm-header.is-scrolled{ background: var(--nm-header-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--nm-border); padding: 14px 0; } .nm-header__inner{ display: flex; align-items: center; justify-content: space-between; gap: 24px; } .nm-logo{ display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px; letter-spacing: -0.02em; } .nm-logo img{ height: 30px; width: auto; } .nm-logo__img--dark{ display: none; } :root[data-theme="dark"] .nm-logo__img--light{ display: none; } :root[data-theme="dark"] .nm-logo__img--dark{ display: block; } .nm-nav{ display: none; align-items: center; gap: 36px; } .nm-nav a{ font-size: 14.5px; font-weight: 500; color: var(--nm-text-muted); transition: color .2s; position: relative; } .nm-nav a:hover, .nm-nav a.is-active{ color: var(--nm-text); } .nm-nav__cms{ display: inline-flex !important; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--nm-radius-pill); border: 1px solid var(--nm-border-strong); font-size: 13px !important; } .nm-nav__cms:hover{ border-color: var(--nm-primary); } .nm-header__actions{ display: flex; align-items: center; gap: 12px; } .nm-header__phone{ display: none; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--nm-text-muted); } .nm-header__phone svg{ color: var(--nm-primary); } .nm-burger{ display: flex; flex-direction: column; gap: 5px; width: 26px; padding: 6px 0; } .nm-burger span{ height: 2px; width: 100%; background: var(--nm-text); border-radius: 2px; transition: transform .3s, opacity .3s; } /* ---------- Theme toggle ---------- */ .nm-theme-toggle{ display: inline-flex; align-items: center; justify-content: center; flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--nm-border-strong); background: var(--nm-surface); color: var(--nm-text-muted); transition: color .2s, border-color .2s, background .2s; } .nm-theme-toggle:hover{ color: var(--nm-primary); border-color: var(--nm-primary); } .nm-theme-toggle svg{ width: 17px; height: 17px; } .nm-theme-toggle .nm-icon-sun{ display: none; } .nm-theme-toggle .nm-icon-moon{ display: block; } :root[data-theme="dark"] .nm-theme-toggle .nm-icon-sun{ display: block; } :root[data-theme="dark"] .nm-theme-toggle .nm-icon-moon{ display: none; } .nm-mobile-menu__foot .nm-theme-toggle{ width: auto; height: auto; border-radius: var(--nm-radius-pill); padding: 13px 20px; gap: 8px; } .nm-mobile-menu__foot .nm-theme-toggle span{ font-size: 14px; font-weight: 600; } .nm-mobile-menu__foot .nm-theme-toggle .nm-theme-label-dark{ display: none; } :root[data-theme="dark"] .nm-mobile-menu__foot .nm-theme-toggle .nm-theme-label-dark{ display: inline; } :root[data-theme="dark"] .nm-mobile-menu__foot .nm-theme-toggle .nm-theme-label-light{ display: none; } @media (min-width: 992px){ .nm-nav{ display: flex; } .nm-header__phone{ display: flex; } .nm-burger{ display: none; } } /* ---------- Mobile Menu ---------- */ .nm-mobile-menu{ position: fixed; inset: 0; z-index: 999; background: var(--nm-overlay-bg); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity .3s var(--nm-ease); } .nm-mobile-menu.is-open{ opacity: 1; visibility: visible; } .nm-mobile-menu__panel{ position: absolute; top: 0; right: 0; height: 100%; width: min(360px, 88vw); background: var(--nm-surface); border-left: 1px solid var(--nm-border); padding: 28px 28px 32px; display: flex; flex-direction: column; gap: 28px; transform: translateX(24px); transition: transform .35s var(--nm-ease); } .nm-mobile-menu.is-open .nm-mobile-menu__panel{ transform: translateX(0); } .nm-mobile-menu__head{ display: flex; align-items: center; justify-content: space-between; } .nm-mobile-menu__close{ font-size: 22px; color: var(--nm-text-muted); } .nm-mobile-menu__list{ display: flex; flex-direction: column; gap: 4px; } .nm-mobile-menu__list a{ display: block; padding: 14px 4px; font-size: 20px; font-weight: 600; border-bottom: 1px solid var(--nm-border); } .nm-mobile-menu__foot{ margin-top: auto; display: flex; flex-direction: column; gap: 14px; } /* ---------- Hero ---------- */ .nm-hero{ position: relative; padding: 72px 0 110px; overflow: hidden; } .nm-hero__bg{ position: absolute; inset: 0; z-index: 0; } .nm-hero__bg video{ width: 100%; height: 100%; object-fit: cover; opacity: var(--nm-hero-video-opacity); } .nm-hero__bg::after{ content: ""; position: absolute; inset: 0; background: radial-gradient(62% 58% at 50% 38%, rgba(4,8,14,0.4), transparent 72%), linear-gradient(180deg, var(--nm-hero-scrim) 0%, transparent 22%, transparent 68%, var(--nm-bg) 94%); } .nm-hero__inner{ position: relative; z-index: 1; text-align: center; } .nm-hero__text-panel{ display: inline-block; max-width: 100%; margin-bottom: 44px; } /* 히어로 영상 위 문구는 카드 없이 흰색으로 올려 영상을 그대로 노출합니다. */ .nm-hero__badge{ display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--nm-radius-pill); border: 1px solid rgba(255,255,255,0.32); background: rgba(255,255,255,0.1); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: 13px; color: rgba(255,255,255,0.92); margin-bottom: 28px; } .nm-hero__badge b{ color: #7CF2CE; font-weight: 700; } .nm-hero h1{ max-width: 880px; margin: 0 auto 22px; color: #FFFFFF; } .nm-hero__lead{ max-width: 620px; margin: 0 auto 40px; color: rgba(255,255,255,0.86); } .nm-hero .nm-btn--ghost{ color: #FFFFFF; border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.06); } .nm-hero .nm-btn--ghost:hover{ border-color: #FFFFFF; color: #FFFFFF; background: rgba(255,255,255,0.14); } .nm-hero__cta{ display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 64px; } .nm-stat-strip{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--nm-border); border: 1px solid var(--nm-border); border-radius: var(--nm-radius-lg); overflow: hidden; max-width: 880px; margin: 0 auto; } .nm-stat-strip__item{ background: var(--nm-surface); padding: 24px 18px; text-align: center; } .nm-stat-strip__num{ font-size: clamp(24px, 3vw, 32px); font-weight: 700; letter-spacing: -0.02em; color: var(--nm-text); } .nm-stat-strip__num span{ color: var(--nm-primary); } .nm-stat-strip__label{ margin-top: 6px; font-size: 13px; color: var(--nm-text-faint); } @media (min-width: 700px){ .nm-stat-strip{ grid-template-columns: repeat(4, 1fr); } } /* ---------- Value Prop Grid ---------- */ .nm-grid{ display: grid; gap: var(--nm-gap); } .nm-grid--2{ grid-template-columns: repeat(2, 1fr); } .nm-grid--3{ grid-template-columns: repeat(3, 1fr); } .nm-grid--4{ grid-template-columns: repeat(4, 1fr); } @media (max-width: 991px){ .nm-grid--3, .nm-grid--4{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px){ .nm-grid--2, .nm-grid--3, .nm-grid--4{ grid-template-columns: 1fr; } } .nm-card{ background: var(--nm-surface); border: 1px solid var(--nm-border); border-radius: var(--nm-radius-md); padding: 32px; transition: border-color .25s, transform .25s; } .nm-card:hover{ border-color: var(--nm-border-strong); transform: translateY(-3px); } .nm-card__icon{ width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--nm-primary-tint); color: var(--nm-primary); font-size: 22px; margin-bottom: 20px; } .nm-card__title{ font-size: 18px; font-weight: 600; margin-bottom: 10px; letter-spacing: -0.01em; } .nm-card__desc{ color: var(--nm-text-muted); font-size: 14.5px; line-height: 1.65; } /* ---------- Product / Spec ---------- */ .nm-product{ display: grid; grid-template-columns: 1fr; gap: 56px; align-items: center; } @media (min-width: 992px){ .nm-product{ grid-template-columns: 1fr 1fr; } } .nm-product__media{ border-radius: var(--nm-radius-lg); overflow: hidden; border: 1px solid var(--nm-border); background: var(--nm-surface); } .nm-guide-video{ border-radius: var(--nm-radius-lg); overflow: hidden; border: 1px solid var(--nm-border); background: #000; box-shadow: var(--nm-shadow-md); } .nm-guide-video video{ display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; } .nm-guide-video__caption{ margin-top: 14px; text-align: center; font-size: 14px; color: var(--nm-text-muted); } .nm-badge-row{ display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 32px; } .nm-badge{ display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--nm-radius-pill); background: var(--nm-surface-2); border: 1px solid var(--nm-border); font-size: 12.5px; font-weight: 600; color: var(--nm-text-muted); } .nm-badge svg{ width: 14px; height: 14px; color: var(--nm-accent); } .nm-checklist{ display: grid; gap: 12px; margin: 28px 0; } .nm-checklist li{ display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--nm-text); } .nm-checklist li::before{ content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: var(--nm-accent-tint); border: 1px solid rgba(34,211,180,0.5); } .nm-spec-table{ border: 1px solid var(--nm-border); border-radius: var(--nm-radius-md); overflow: hidden; } .nm-spec-table table{ font-size: 14.5px; } .nm-spec-table tr{ border-bottom: 1px solid var(--nm-border); } .nm-spec-table tr:last-child{ border-bottom: none; } .nm-spec-table th{ width: 38%; text-align: left; padding: 14px 20px; background: var(--nm-surface-2); color: var(--nm-text-muted); font-weight: 500; } .nm-spec-table td{ padding: 14px 20px; color: var(--nm-text); } .nm-spec-note{ margin-top: 16px; font-size: 13px; color: var(--nm-text-faint); } .nm-package-list{ display: grid; gap: 14px; margin-top: 28px; } .nm-package-list li{ display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--nm-surface); border: 1px solid var(--nm-border); border-radius: var(--nm-radius-sm); font-size: 14.5px; } .nm-package-list .num{ flex: none; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--nm-primary-tint); color: var(--nm-primary); font-size: 12px; font-weight: 700; } /* ---------- Reports Tabs ---------- */ .nm-tabbar{ display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; } .nm-tabbar button{ padding: 12px 22px; border-radius: var(--nm-radius-pill); border: 1px solid var(--nm-border); background: var(--nm-surface); color: var(--nm-text-muted); font-size: 14px; font-weight: 600; transition: all .2s; } .nm-tabbar button.is-active{ background: var(--nm-primary); border-color: var(--nm-primary); color: #fff; } .nm-tabpanel{ display: none; } .nm-tabpanel.is-active{ display: block; } .nm-report{ display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; background: var(--nm-surface); border: 1px solid var(--nm-border); border-radius: var(--nm-radius-lg); padding: 40px; } @media (min-width: 900px){ .nm-report{ grid-template-columns: 340px 1fr; padding: 48px; } } .nm-report__media{ border-radius: var(--nm-radius-md); overflow: hidden; border: 1px solid var(--nm-border); } .nm-report__list{ display: grid; gap: 10px; margin-top: 22px; } .nm-report__list li{ font-size: 14.5px; color: var(--nm-text-muted); display: flex; gap: 8px; } .nm-report__list li::before{ content: "//"; color: var(--nm-primary); font-weight: 700; } /* ---------- Process Steps ---------- */ .nm-steps{ display: grid; gap: var(--nm-gap); grid-template-columns: 1fr; counter-reset: step; } @media (min-width: 900px){ .nm-steps{ grid-template-columns: repeat(3, 1fr); } } .nm-step{ position: relative; padding: 32px 28px; background: var(--nm-surface); border: 1px solid var(--nm-border); border-radius: var(--nm-radius-md); } .nm-step__index{ font-size: 13px; font-weight: 700; color: var(--nm-primary); letter-spacing: .1em; margin-bottom: 18px; } .nm-step__title{ font-size: 19px; font-weight: 600; margin-bottom: 10px; } .nm-step__desc{ font-size: 14.5px; color: var(--nm-text-muted); line-height: 1.7; } .nm-step:not(:last-child)::after{ content: ""; position: absolute; top: 50%; right: -13px; width: 24px; height: 1px; background: var(--nm-border-strong); display: none; } @media (min-width: 900px){ .nm-step:not(:last-child)::after{ display: block; } } /* ---------- Segments ---------- */ .nm-segment{ display: flex; flex-direction: column; gap: 16px; padding: 28px; border-radius: var(--nm-radius-md); border: 1px solid var(--nm-border); background: linear-gradient(180deg, var(--nm-surface), var(--nm-surface-2)); height: 100%; } .nm-segment__tag{ align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--nm-accent); background: var(--nm-accent-tint); padding: 5px 11px; border-radius: var(--nm-radius-pill); } /* ---------- Testimonials ---------- */ .nm-testi-row{ display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; margin: 0 -24px; padding-left: 24px; padding-right: 24px; } .nm-testi-row::-webkit-scrollbar{ height: 6px; } .nm-testi-row::-webkit-scrollbar-thumb{ background: var(--nm-border-strong); border-radius: 4px; } .nm-testi{ flex: 0 0 min(360px, 84vw); scroll-snap-align: start; background: var(--nm-surface); border: 1px solid var(--nm-border); border-radius: var(--nm-radius-md); padding: 28px; display: flex; flex-direction: column; gap: 18px; } .nm-testi__quote{ font-size: 15px; line-height: 1.75; color: var(--nm-text); } .nm-testi__who{ display: flex; align-items: center; gap: 12px; margin-top: auto; } .nm-testi__avatar{ width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex: none; background: var(--nm-surface-2); } .nm-testi__name{ font-size: 14px; font-weight: 600; } .nm-testi__role{ font-size: 12.5px; color: var(--nm-text-faint); } /* ---------- Trust / Quality ---------- */ .nm-trust{ display: grid; gap: 32px; grid-template-columns: 1fr; } @media (min-width: 992px){ .nm-trust{ grid-template-columns: 0.9fr 1.1fr; align-items: center; } } .nm-trust__facts{ display: grid; gap: 14px; margin-top: 8px; } .nm-trust__fact{ display: flex; justify-content: space-between; gap: 16px; padding: 16px 20px; background: var(--nm-surface); border: 1px solid var(--nm-border); border-radius: var(--nm-radius-sm); font-size: 14.5px; } .nm-trust__fact dt{ color: var(--nm-text-faint); } .nm-trust__fact dd{ margin: 0; color: var(--nm-text); font-weight: 600; text-align: right; } /* ---------- Pricing ---------- */ .nm-plan{ background: var(--nm-surface); border: 1px solid var(--nm-border); border-radius: var(--nm-radius-lg); padding: 32px; display: flex; flex-direction: column; height: 100%; } .nm-plan--highlight{ border-color: var(--nm-primary); box-shadow: var(--nm-shadow-glow); position: relative; } .nm-plan--highlight::before{ content: "추천"; position: absolute; top: -12px; right: 24px; background: var(--nm-primary); color: #fff; font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: var(--nm-radius-pill); } .nm-plan__name{ font-size: 14px; color: var(--nm-text-muted); font-weight: 600; margin-bottom: 10px; } .nm-plan__price{ font-size: 32px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 6px; } .nm-plan__price small{ font-size: 14px; font-weight: 500; color: var(--nm-text-faint); } .nm-plan__desc{ font-size: 14px; color: var(--nm-text-muted); margin-bottom: 24px; } .nm-plan__list{ display: grid; gap: 10px; margin: 24px 0 28px; flex: 1; } .nm-plan__list li{ font-size: 13.5px; color: var(--nm-text-muted); display: flex; gap: 8px; } .nm-plan__list li::before{ content: "//"; color: var(--nm-primary); font-weight: 700; } /* ---------- Accordion (FAQ / Guide) ---------- */ .nm-accordion{ display: grid; gap: 12px; } .nm-accordion-item{ border: 1px solid var(--nm-border); border-radius: var(--nm-radius-sm); background: var(--nm-surface); overflow: hidden; } .nm-accordion-btn{ width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; font-size: 15px; font-weight: 600; text-align: left; } .nm-accordion-btn .num{ color: var(--nm-primary); font-weight: 700; margin-right: 14px; } .nm-accordion-btn .plus{ flex: none; width: 22px; height: 22px; position: relative; } .nm-accordion-btn .plus::before, .nm-accordion-btn .plus::after{ content: ""; position: absolute; top: 50%; left: 50%; background: var(--nm-text-muted); transform: translate(-50%, -50%); } .nm-accordion-btn .plus::before{ width: 12px; height: 2px; } .nm-accordion-btn .plus::after{ width: 2px; height: 12px; transition: transform .25s; } .nm-accordion-item.is-open .plus::after{ transform: translate(-50%, -50%) rotate(90deg); opacity: 0; } .nm-accordion-panel{ max-height: 0; overflow: hidden; transition: max-height .35s var(--nm-ease); } .nm-accordion-panel__inner{ padding: 0 22px 22px; font-size: 14.5px; color: var(--nm-text-muted); line-height: 1.75; } /* ---------- Form ---------- */ .nm-form{ background: var(--nm-surface); border: 1px solid var(--nm-border); border-radius: var(--nm-radius-lg); padding: 40px; } .nm-field{ margin-bottom: 20px; } .nm-field label{ display: block; font-size: 13px; color: var(--nm-text-muted); margin-bottom: 8px; } .nm-field label .req{ color: var(--nm-primary); } .nm-field input, .nm-field select, .nm-field textarea{ width: 100%; background: var(--nm-bg-alt); border: 1px solid var(--nm-border); border-radius: var(--nm-radius-sm); padding: 14px 16px; font-size: 14.5px; color: var(--nm-text); transition: border-color .2s; } .nm-field input:focus, .nm-field select:focus, .nm-field textarea:focus{ outline: none; border-color: var(--nm-primary); } .nm-field textarea{ min-height: 110px; resize: vertical; } .nm-field-row{ display: grid; gap: 16px; grid-template-columns: 1fr; } @media (min-width: 620px){ .nm-field-row{ grid-template-columns: 1fr 1fr; } } .nm-form-note{ font-size: 12.5px; color: var(--nm-text-faint); margin-top: 14px; } .nm-form-status{ font-size: 13.5px; margin-top: 14px; display: none; } .nm-form-status.is-visible{ display: block; } .nm-form-status.is-success{ color: var(--nm-accent); } .nm-form-status.is-error{ color: var(--nm-danger); } /* ---------- CTA banner ---------- */ .nm-cta-banner{ border-radius: var(--nm-radius-lg); padding: 56px; background: linear-gradient(135deg, rgba(62,123,250,0.14), rgba(34,211,180,0.08)); border: 1px solid var(--nm-border); display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; } /* ---------- Footer ---------- */ .nm-footer{ padding: 72px 0 32px; border-top: 1px solid var(--nm-border); } .nm-footer__top{ display: grid; gap: 40px; grid-template-columns: 1fr; margin-bottom: 48px; } @media (min-width: 768px){ .nm-footer__top{ grid-template-columns: 1.3fr 1fr 1fr; } } .nm-footer__brand{ font-size: 20px; font-weight: 700; margin-bottom: 12px; } .nm-footer__desc{ font-size: 14px; color: var(--nm-text-muted); max-width: 320px; line-height: 1.7; } .nm-footer__heading{ font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--nm-text-faint); margin-bottom: 16px; } .nm-footer__list{ display: grid; gap: 10px; } .nm-footer__list a, .nm-footer__list span{ font-size: 14.5px; color: var(--nm-text-muted); } .nm-footer__list a:hover{ color: var(--nm-text); } .nm-footer__bottom{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 28px; border-top: 1px solid var(--nm-border); font-size: 13px; color: var(--nm-text-faint); } .nm-footer__bottom a{ display: inline-flex; align-items: center; gap: 6px; color: var(--nm-text-muted); } /* ---------- Back to top ---------- */ .nm-top-btn{ position: fixed; right: 22px; bottom: 22px; z-index: 150; width: 46px; height: 46px; border-radius: 50%; background: var(--nm-surface); border: 1px solid var(--nm-border-strong); color: var(--nm-text); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s, transform .25s, visibility .25s, border-color .2s; box-shadow: var(--nm-shadow-sm); } .nm-top-btn.is-visible{ opacity: 1; visibility: visible; transform: translateY(0); } .nm-top-btn:hover{ border-color: var(--nm-primary); color: var(--nm-primary); } /* ---------- Sample report modal ---------- */ .nm-modal{ position: fixed; inset: 0; z-index: 999; background: var(--nm-modal-bg); display: none; overflow-y: auto; -webkit-overflow-scrolling: touch; } .nm-modal.is-open{ display: block; } .nm-modal__inner{ max-width: 900px; margin: 70px auto 50px; padding: 0 16px; } .nm-modal__inner img{ border-radius: 14px; box-shadow: 0 24px 80px rgba(0,0,0,0.6); } .nm-modal__close{ position: fixed; top: 18px; right: 20px; width: 44px; height: 44px; border-radius: 50%; background: var(--nm-surface); border: 1px solid var(--nm-border-strong); display: flex; align-items: center; justify-content: center; font-size: 18px; z-index: 10; } .nm-modal__label{ position: fixed; top: 26px; left: 50%; transform: translateX(-50%); font-size: 12px; letter-spacing: .1em; color: var(--nm-text-faint); } /* ---------- Utilities ---------- */ .nm-mt-32{ margin-top: 32px; } .nm-mt-48{ margin-top: 48px; } .nm-hide-mobile{ display: none; } @media (min-width: 768px){ .nm-hide-mobile{ display: revert; } } .nm-reveal{ opacity: 0; transform: translateY(24px); transition: opacity .7s var(--nm-ease), transform .7s var(--nm-ease); } .nm-reveal.is-visible{ opacity: 1; transform: translateY(0); }