/* =========================== DoitUs - Main CSS =========================== */ /* 폰트는 각 HTML 의 preload 방식으로 로드 (렌더 블로킹 제거) */ /* @import 제거 → display=swap + media trick 으로 대체 */ /* CSS Variables */ :root { --navy: #1B3A6B; --navy-dark: #0f2347; --navy-light: #2a4f8f; --orange: #F57C20; --orange-dark: #d96a10; --orange-light: #ff9640; --bg-white: #FFFFFF; --bg-gray: #F5F7FA; --bg-navy-light: #EEF2FF; --text-dark: #1A1A2E; --text-sub: #6B7280; --text-muted: #9CA3AF; --border: #E5E7EB; --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --shadow-md: 0 4px 16px rgba(0,0,0,0.1); --shadow-lg: 0 8px 32px rgba(0,0,0,0.14); --shadow-xl: 0 16px 48px rgba(0,0,0,0.18); --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; --transition: 0.25s ease; } /* Reset & Base */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Noto Sans KR', sans-serif; font-size: 16px; color: var(--text-dark); background: var(--bg-white); line-height: 1.7; overflow-x: hidden; } a { text-decoration: none; color: inherit; } img { max-width: 100%; display: block; } ul { list-style: none; } button { cursor: pointer; border: none; background: none; font-family: inherit; } input, select, textarea { font-family: inherit; } /* =========================== TYPOGRAPHY =========================== */ .section-title { font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 800; color: var(--text-dark); line-height: 1.3; margin-bottom: 0.6rem; } .section-sub { font-size: clamp(0.95rem, 2vw, 1.05rem); color: var(--text-sub); line-height: 1.7; margin-bottom: 2.5rem; } .section-label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange); margin-bottom: 0.6rem; display: block; } /* =========================== LAYOUT =========================== */ .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .container-sm { max-width: 860px; margin: 0 auto; padding: 0 20px; } .section { padding: 80px 0; } .section-sm { padding: 56px 0; } .text-center { text-align: center; } .text-left { text-align: left; } /* =========================== BUTTONS =========================== */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: var(--radius-sm); font-size: 1rem; font-weight: 700; transition: all var(--transition); cursor: pointer; white-space: nowrap; } .btn-primary { background: var(--orange); color: #fff; box-shadow: 0 4px 16px rgba(245,124,32,0.35); } .btn-primary:hover { background: var(--orange-dark); transform: translateY(-2px); box-shadow: 0 6px 22px rgba(245,124,32,0.45); } .btn-outline-white { border: 2px solid rgba(255,255,255,0.7); color: #fff; background: transparent; } .btn-outline-white:hover { background: rgba(255,255,255,0.12); border-color: #fff; } .btn-outline-navy { border: 2px solid var(--navy); color: var(--navy); background: transparent; } .btn-outline-navy:hover { background: var(--navy); color: #fff; } .btn-lg { padding: 18px 36px; font-size: 1.1rem; } .btn-sm { padding: 9px 18px; font-size: 0.88rem; } .btn-arrow::after { content: '→'; transition: transform var(--transition); } .btn-arrow:hover::after { transform: translateX(4px); } /* =========================== NAVBAR =========================== */ #navbar { position: sticky; top: 0; z-index: 1000; background: var(--bg-white); box-shadow: var(--shadow-sm); transition: box-shadow var(--transition); } #navbar.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,0.13); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 70px; gap: 16px; } .nav-logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; } /* 투명 PNG 로고 — 배경 제거 완료, mix-blend-mode 불필요 */ .nav-logo-img { height: 44px; width: auto; display: block; object-fit: contain; } /* SVG 로고 (구버전 호환) */ .nav-logo-svg { display: none; } .nav-logo-wrap { display: flex; align-items: center; } /* 구버전 아이콘/텍스트 — 이미지 로고 사용 시 숨김 */ .nav-logo-icon { display: none; } .nav-logo-text { display: none; } .nav-menu { display: flex; align-items: center; gap: 4px; flex: 1; justify-content: center; } .nav-item { position: relative; } .nav-link { display: flex; align-items: center; gap: 4px; padding: 8px 14px; font-size: 0.92rem; font-weight: 600; color: var(--text-dark); border-radius: var(--radius-sm); transition: all var(--transition); white-space: nowrap; } .nav-link:hover, .nav-link.active { color: var(--navy); background: var(--bg-gray); } .nav-link .arrow { font-size: 0.65rem; transition: transform var(--transition); } .nav-item:hover .arrow { transform: rotate(180deg); } /* Dropdown */ .nav-dropdown { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 10px 6px; min-width: 220px; opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(-8px); transition: all 0.2s ease; border: 1px solid var(--border); } .nav-item:hover .nav-dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .nav-dropdown a { display: flex; align-items: center; gap: 10px; padding: 9px 14px; font-size: 0.88rem; font-weight: 500; color: var(--text-dark); border-radius: var(--radius-sm); transition: all var(--transition); } .nav-dropdown a:hover { background: var(--bg-gray); color: var(--navy); padding-left: 18px; } .nav-dropdown a .dd-icon { font-size: 1rem; width: 20px; text-align: center; } .nav-cta { flex-shrink: 0; } /* Hamburger */ .nav-hamburger { display: none; flex-direction: column; gap: 5px; padding: 8px; cursor: pointer; } .nav-hamburger span { display: block; width: 24px; height: 2.5px; background: var(--text-dark); border-radius: 2px; transition: all var(--transition); } .nav-hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5.3px, 5.3px); } .nav-hamburger.open span:nth-child(2) { opacity: 0; } .nav-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5.3px, -5.3px); } /* Mobile Menu */ .nav-mobile { display: none; position: fixed; top: 70px; /* PC 네브바 높이 (모바일은 JS로 동적 조정) */ left: 0; right: 0; bottom: 0; background: #fff; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; z-index: 999; /* 부드러운 슬라이드다운 */ transform: translateY(-8px); opacity: 0; transition: opacity 0.22s ease, transform 0.22s ease; pointer-events: none; } .nav-mobile.open { /* display는 JS에서 설정 (애니메이션을 위해 분리) */ transform: translateY(0); opacity: 1; pointer-events: auto; } /* 상단 패딩 */ .nav-mobile-inner { padding: 8px 0 40px; } /* 일반 메뉴 링크 */ .nav-mobile a { display: flex; align-items: center; gap: 12px; padding: 14px 24px; font-size: 0.95rem; font-weight: 600; color: var(--text-dark); border-bottom: 1px solid var(--border); transition: background var(--transition), color var(--transition); min-height: 52px; -webkit-tap-highlight-color: transparent; } .nav-mobile a:active { background: var(--bg-navy-light); color: var(--navy); } /* 섹션 레이블 */ .nav-mobile .mobile-sub-title { padding: 12px 24px 8px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange); background: var(--bg-gray); border-bottom: 1px solid var(--border); } /* 서비스 링크: 아이콘 크게 */ .nav-mobile .mobile-svc-link { padding: 12px 24px; font-size: 0.88rem; gap: 14px; color: var(--text-dark); font-weight: 500; } .nav-mobile .mobile-svc-icon { font-size: 1.2rem; width: 28px; text-align: center; flex-shrink: 0; } /* 상담 CTA 버튼 */ .nav-mobile .mobile-cta { margin: 20px 20px 0; display: flex !important; align-items: center; justify-content: center; gap: 8px; text-align: center; background: linear-gradient(135deg, var(--orange), #e06010) !important; color: #fff !important; border-radius: var(--radius-md) !important; padding: 16px 24px !important; font-weight: 700 !important; font-size: 1rem !important; min-height: 54px; box-shadow: 0 4px 16px rgba(245,124,32,0.35); border-bottom: none !important; } .nav-mobile .mobile-cta:active { background: linear-gradient(135deg, #e06010, #c85000) !important; transform: scale(0.98); } /* =========================== FLOATING BUTTON =========================== */ #floating-btn { position: fixed; bottom: 32px; right: 28px; z-index: 900; background: var(--orange); color: #fff; border-radius: 50px; padding: 14px 22px; font-weight: 700; font-size: 0.92rem; box-shadow: 0 6px 24px rgba(245,124,32,0.45); display: flex; align-items: center; gap: 8px; cursor: pointer; transition: all var(--transition); text-decoration: none; } #floating-btn:hover { background: var(--orange-dark); transform: translateY(-3px); box-shadow: 0 10px 32px rgba(245,124,32,0.5); } /* =========================== FOOTER =========================== */ #footer { background: #0d1b35; color: #a3b0c8; padding: 52px 0 28px; } .footer-inner { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; } .footer-brand {} .footer-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } /* 푸터 로고 — 흰색 전용 이미지 사용 (logo-white.png) */ .footer-logo-img { height: 40px; width: auto; display: block; object-fit: contain; } .footer-logo-icon { display: none; } .footer-logo-text { display: none; } .footer-desc { font-size: 0.88rem; line-height: 1.75; color: #7a8fa8; margin-bottom: 18px; } .footer-info { font-size: 0.82rem; line-height: 2; color: #6b7e98; } .footer-info span { display: block; } .footer-section h4 { font-size: 0.88rem; font-weight: 700; color: #fff; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.08); } .footer-section ul li { margin-bottom: 8px; } .footer-section ul li a { font-size: 0.85rem; color: #7a8fa8; transition: color var(--transition); } .footer-section ul li a:hover { color: var(--orange); } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 22px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; } .footer-bottom p { font-size: 0.82rem; color: #4e6180; } .footer-badge { display: flex; align-items: center; gap: 8px; } .footer-badge span { font-size: 0.78rem; padding: 4px 10px; border-radius: 20px; background: rgba(255,255,255,0.07); color: #7a8fa8; } /* =========================== HERO (shared) =========================== */ .hero { background: linear-gradient(125deg, #0a0f1e 0%, #0d1b3e 45%, #112254 75%, #1a1040 100%); color: #fff; padding: 100px 0 80px; position: relative; overflow: hidden; } /* 도트 패턴 레이어 */ .hero::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); z-index: 0; } /* 우측 배경 이미지 레이어 */ .hero::after { content: ''; position: absolute; top: 0; right: -2%; width: 62%; height: 100%; background: url('../images/hero-bg.jpg') center 30% / cover no-repeat; -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.15) 18%, rgba(0,0,0,0.5) 45%, rgba(0,0,0,0.72) 100%); mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.15) 18%, rgba(0,0,0,0.5) 45%, rgba(0,0,0,0.72) 100%); opacity: 0.52; z-index: 0; pointer-events: none; mix-blend-mode: luminosity; } /* 스타트업 글로우 포인트 */ .hero-glow-1 { position: absolute; width: 420px; height: 420px; background: radial-gradient(circle, rgba(245,124,32,0.18) 0%, transparent 70%); top: -80px; right: 30%; z-index: 0; pointer-events: none; animation: glowPulse 5s ease-in-out infinite alternate; } .hero-glow-2 { position: absolute; width: 320px; height: 320px; background: radial-gradient(circle, rgba(99,102,241,0.2) 0%, transparent 70%); bottom: -60px; right: 15%; z-index: 0; pointer-events: none; animation: glowPulse 7s ease-in-out infinite alternate-reverse; } @keyframes glowPulse { from { opacity: 0.6; transform: scale(1); } to { opacity: 1; transform: scale(1.15); } } .hero-content { position: relative; z-index: 1; } .hero-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(245,124,32,0.18); border: 1px solid rgba(245,124,32,0.4); color: #ffb366; padding: 6px 14px; border-radius: 50px; font-size: 0.82rem; font-weight: 700; margin-bottom: 22px; } .hero-badge span { color: var(--orange-light); } .hero h1 { font-size: clamp(1.85rem, 4.8vw, 3.4rem); font-weight: 900; line-height: 1.28; margin-bottom: 24px; letter-spacing: -0.025em; } /* 첫 줄: 질문 강조 */ .hero h1 .line-q { font-size: 0.62em; font-weight: 700; color: rgba(255,255,255,0.55); letter-spacing: 0.01em; display: block; margin-bottom: 6px; } /* 핵심 강조 단어 */ .hero h1 em { font-style: normal; background: linear-gradient(90deg, #ffd166 0%, #ff9f43 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* 마지막 결론 줄 */ .hero h1 .line-result { display: block; font-size: 0.72em; font-weight: 800; color: rgba(255,255,255,0.75); margin-top: 4px; letter-spacing: -0.01em; } .hero p { font-size: clamp(0.97rem, 2vw, 1.1rem); color: rgba(255,255,255,0.82); line-height: 1.8; margin-bottom: 34px; max-width: 600px; } .hero-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 36px; } .hero-badges { display: flex; flex-wrap: wrap; gap: 12px; } .hero-badge-item { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.9); padding: 8px 16px; border-radius: 50px; font-size: 0.85rem; font-weight: 600; } /* =========================== CARDS =========================== */ .card { background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-md); transition: all var(--transition); overflow: hidden; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .service-card { padding: 28px; border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; transition: all var(--transition); cursor: pointer; position: relative; } .service-card:hover { border-color: var(--navy); box-shadow: 0 8px 28px rgba(27,58,107,0.12); transform: translateY(-4px); } .service-card-icon { font-size: 2.2rem; margin-bottom: 14px; display: block; } .service-card-title { font-size: 1.05rem; font-weight: 700; color: var(--text-dark); margin-bottom: 8px; } .service-card-desc { font-size: 0.88rem; color: var(--text-sub); line-height: 1.7; margin-bottom: 16px; } .service-card-link { font-size: 0.88rem; font-weight: 700; color: var(--navy); display: inline-flex; align-items: center; gap: 4px; transition: gap var(--transition); } .service-card:hover .service-card-link { gap: 8px; color: var(--orange); } /* =========================== GRID SYSTEMS =========================== */ .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } /* =========================== COUNTER CARDS =========================== */ .counter-card { text-align: center; padding: 32px 20px; background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-md); border-top: 4px solid var(--orange); } .counter-num { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 900; color: var(--navy); line-height: 1.1; margin-bottom: 6px; display: block; } .counter-label { font-size: 0.88rem; color: var(--text-sub); font-weight: 500; } /* =========================== BENEFIT CARDS =========================== */ .benefit-card { padding: 26px; border-radius: var(--radius-md); background: #fff; border: 1px solid var(--border); transition: all var(--transition); } .benefit-card:hover { border-color: var(--orange); box-shadow: 0 6px 22px rgba(245,124,32,0.1); } .benefit-icon { width: 52px; height: 52px; background: var(--bg-navy-light); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 14px; } .benefit-title { font-size: 0.98rem; font-weight: 700; color: var(--text-dark); margin-bottom: 8px; } .benefit-desc { font-size: 0.85rem; color: var(--text-sub); line-height: 1.75; } /* =========================== STEP PROCESS =========================== */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; } .steps::before { content: ''; position: absolute; top: 44px; left: 12.5%; right: 12.5%; height: 3px; background: linear-gradient(90deg, var(--orange), var(--navy)); z-index: 0; } .step { position: relative; z-index: 1; text-align: center; padding: 0 16px; } .step-num { width: 52px; height: 52px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 1.2rem; font-weight: 900; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; border: 4px solid var(--bg-white); box-shadow: 0 0 0 3px var(--navy); } .step-tag { font-size: 0.75rem; font-weight: 700; color: var(--orange); letter-spacing: 0.05em; margin-bottom: 6px; } .step-title { font-size: 0.95rem; font-weight: 700; color: var(--text-dark); margin-bottom: 8px; } .step-desc { font-size: 0.82rem; color: var(--text-sub); line-height: 1.65; } /* =========================== REVIEW SLIDER =========================== */ .review-slider { position: relative; overflow: hidden; } .review-track { display: flex; gap: 20px; transition: transform 0.4s ease; } .review-card { flex: 0 0 calc(33.333% - 14px); background: #fff; border-radius: var(--radius-md); padding: 26px; box-shadow: var(--shadow-md); border: 1px solid var(--border); } .review-stars { color: #FFB800; font-size: 1rem; margin-bottom: 12px; } .review-text { font-size: 0.9rem; color: var(--text-dark); line-height: 1.75; margin-bottom: 16px; } .review-author { font-size: 0.82rem; color: var(--text-sub); font-weight: 600; border-top: 1px solid var(--border); padding-top: 12px; } .slider-controls { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 28px; } .slider-btn { width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--navy); color: var(--navy); background: #fff; font-size: 1rem; cursor: pointer; transition: all var(--transition); display: flex; align-items: center; justify-content: center; } .slider-btn:hover { background: var(--navy); color: #fff; } .slider-dots { display: flex; gap: 8px; } .slider-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); cursor: pointer; transition: all var(--transition); } .slider-dot.active { background: var(--orange); width: 22px; border-radius: 4px; } /* =========================== SUPPORT CARDS =========================== */ .support-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 20px; font-size: 0.76rem; font-weight: 700; margin-bottom: 10px; } .support-badge.urgent { background: #FEF2F2; color: #DC2626; } .support-badge.active { background: #F0FDF4; color: #16A34A; } .support-card { background: #fff; border-radius: var(--radius-md); padding: 22px; border: 1px solid var(--border); transition: all var(--transition); height: 100%; } .support-card:hover { border-color: var(--navy); box-shadow: var(--shadow-md); transform: translateY(-3px); } .support-card h4 { font-size: 0.98rem; font-weight: 700; margin-bottom: 8px; } .support-card-amount { font-size: 0.9rem; font-weight: 700; color: var(--orange); margin-bottom: 4px; } .support-card-org { font-size: 0.82rem; color: var(--text-sub); } /* =========================== CTA SECTION =========================== */ .cta-section { background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 100%); padding: 80px 0; text-align: center; } .cta-section h2 { font-size: clamp(1.5rem, 3.5vw, 2.2rem); font-weight: 800; color: #fff; margin-bottom: 12px; } .cta-section p { font-size: 1rem; color: rgba(255,255,255,0.75); margin-bottom: 40px; } /* Contact Form */ .contact-form-inline { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15); border-radius: var(--radius-lg); padding: 36px; max-width: 860px; margin: 0 auto 20px; } .contact-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 14px; } .form-group { display: flex; flex-direction: column; gap: 6px; } .form-group label { font-size: 0.82rem; font-weight: 600; color: rgba(255,255,255,0.75); } .form-control { padding: 12px 16px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radius-sm); color: #fff; font-size: 0.92rem; font-family: inherit; transition: all var(--transition); width: 100%; } .form-control::placeholder { color: rgba(255,255,255,0.4); } .form-control:focus { outline: none; border-color: var(--orange); background: rgba(255,255,255,0.15); } .form-control option { color: var(--text-dark); background: #fff; } .cta-note { font-size: 0.86rem; color: rgba(255,255,255,0.6); margin-top: 14px; } /* =========================== PAGE HERO (Service pages) =========================== */ .page-hero { background: linear-gradient(135deg, var(--navy-dark), var(--navy)); color: #fff; padding: 72px 0 60px; position: relative; overflow: hidden; } .page-hero::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='20' cy='20' r='1.5'/%3E%3C/g%3E%3C/svg%3E"); } .page-hero-content { position: relative; z-index: 1; } .page-hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .page-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 14px; border-radius: 50px; font-size: 0.78rem; font-weight: 700; } .page-badge-orange { background: var(--orange); color: #fff; } .page-badge-outline { border: 1px solid rgba(255,255,255,0.4); color: rgba(255,255,255,0.85); } .page-hero h1 { font-size: clamp(1.7rem, 4vw, 2.8rem); font-weight: 900; line-height: 1.25; margin-bottom: 14px; } .page-hero p { font-size: 1rem; color: rgba(255,255,255,0.8); margin-bottom: 26px; max-width: 580px; } .price-badge { display: inline-flex; align-items: center; gap: 16px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radius-md); padding: 14px 24px; flex-wrap: wrap; gap: 12px; } .price-item { display: flex; align-items: center; gap: 8px; font-size: 0.92rem; color: rgba(255,255,255,0.9); } .price-item strong { color: var(--orange-light); font-weight: 800; } .price-divider { width: 1px; height: 20px; background: rgba(255,255,255,0.25); } /* =========================== TABLE =========================== */ .table-wrap { overflow-x: auto; border-radius: var(--radius-md); box-shadow: var(--shadow-md); } table { width: 100%; border-collapse: collapse; font-size: 0.92rem; } thead th { background: var(--navy); color: #fff; padding: 14px 18px; text-align: left; font-weight: 700; white-space: nowrap; } thead th:first-child { border-radius: var(--radius-sm) 0 0 0; } thead th:last-child { border-radius: 0 var(--radius-sm) 0 0; } tbody tr { border-bottom: 1px solid var(--border); transition: background var(--transition); } tbody tr:hover { background: var(--bg-gray); } tbody td { padding: 14px 18px; color: var(--text-dark); vertical-align: middle; } tbody td.highlight { color: var(--orange); font-weight: 700; } /* =========================== ACCORDION / FAQ =========================== */ .accordion-item { border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 10px; overflow: hidden; transition: box-shadow var(--transition); } .accordion-item:hover { box-shadow: var(--shadow-sm); } .accordion-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; cursor: pointer; gap: 12px; background: #fff; transition: background var(--transition); } .accordion-header:hover { background: var(--bg-gray); } .accordion-q { font-size: 0.95rem; font-weight: 700; color: var(--text-dark); flex: 1; } .accordion-icon { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-gray); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; transition: all var(--transition); color: var(--navy); } .accordion-item.open .accordion-icon { transform: rotate(45deg); background: var(--navy); color: #fff; } .accordion-body { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; } .accordion-body-inner { padding: 0 22px 18px; font-size: 0.9rem; color: var(--text-sub); line-height: 1.75; border-top: 1px solid var(--border); padding-top: 16px; } /* =========================== BREADCRUMB =========================== */ .breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: rgba(255,255,255,0.6); margin-bottom: 16px; } .breadcrumb a { color: rgba(255,255,255,0.7); transition: color var(--transition); } .breadcrumb a:hover { color: #fff; } .breadcrumb span { color: rgba(255,255,255,0.5); } /* =========================== SECTION DIVIDER =========================== */ .section-divider { height: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent); margin: 20px 0; } /* =========================== TAGS =========================== */ .tag { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 20px; font-size: 0.78rem; font-weight: 700; } .tag-navy { background: var(--bg-navy-light); color: var(--navy); } .tag-orange { background: #FFF5ED; color: var(--orange); } .tag-green { background: #F0FDF4; color: #16A34A; } /* =========================== NOTICE BOX =========================== */ .notice-box { background: #FFF8ED; border: 1px solid #FDE8C7; border-left: 4px solid var(--orange); border-radius: var(--radius-sm); padding: 14px 18px; font-size: 0.88rem; color: #7c4a10; line-height: 1.7; } .info-box { background: var(--bg-navy-light); border: 1px solid #d0d8f0; border-left: 4px solid var(--navy); border-radius: var(--radius-sm); padding: 14px 18px; font-size: 0.88rem; color: var(--navy); line-height: 1.7; } /* =========================== CHECK LIST =========================== */ .check-list { display: flex; flex-direction: column; gap: 10px; } .check-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.92rem; color: var(--text-dark); line-height: 1.6; } .check-list li::before { content: '✓'; width: 22px; height: 22px; background: var(--orange); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 900; flex-shrink: 0; margin-top: 1px; } /* =========================== PACKAGE CARD =========================== */ .package-card { border: 2px solid var(--border); border-radius: var(--radius-lg); padding: 32px; transition: all var(--transition); background: #fff; position: relative; } .package-card:hover { border-color: var(--navy); box-shadow: var(--shadow-lg); } .package-card.featured { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(245,124,32,0.08); } .package-badge { position: absolute; top: -14px; left: 28px; background: var(--orange); color: #fff; padding: 4px 16px; border-radius: 20px; font-size: 0.78rem; font-weight: 700; } .package-title { font-size: 1.2rem; font-weight: 800; color: var(--text-dark); margin-bottom: 8px; } .package-target { font-size: 0.85rem; color: var(--text-sub); margin-bottom: 20px; display: flex; align-items: center; gap: 6px; } .package-items { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; } .package-item { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--text-dark); } .package-item::before { content: '+'; width: 20px; height: 20px; background: var(--navy); color: #fff; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; font-weight: 900; flex-shrink: 0; } /* =========================== PORTFOLIO =========================== */ .portfolio-card { background: #fff; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border); transition: all var(--transition); } .portfolio-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); } .portfolio-card-top { background: linear-gradient(135deg, var(--navy-dark), var(--navy)); padding: 24px; color: #fff; } .portfolio-card-body { padding: 20px; } .portfolio-stat { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 0.88rem; } .portfolio-stat:last-child { border-bottom: none; } .portfolio-stat-label { color: var(--text-sub); } .portfolio-stat-value { font-weight: 700; color: var(--text-dark); } /* =========================== ANIMATIONS =========================== */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes countUp { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } .fade-in-up { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } .fade-in-up.visible { opacity: 1; transform: translateY(0); } /* =========================== RESPONSIVE =========================== */ /* ── 터치 기기 전역 최적화 ─────────────────── */ @media (hover: none) and (pointer: coarse) { /* 빠른 탭 응답 */ * { -webkit-tap-highlight-color: transparent; } /* 버튼만 최소 터치 타깃 (a는 display 강제하지 않음 → nav 깨짐 방지) */ button { min-height: 44px; } } @media (max-width: 1024px) { .footer-inner { grid-template-columns: 1fr 1fr; gap: 30px; } .steps { grid-template-columns: repeat(2, 1fr); gap: 30px; } .steps::before { display: none; } } @media (max-width: 768px) { .section { padding: 56px 0; } /* 모바일: 히어로 우측 배경 이미지 축소 + 더 투명하게 */ .hero::after { width: 100%; opacity: 0.15; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.3) 40%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.3) 40%, transparent 100%); } /* ── 네비 PC 메뉴 완전 숨김 (important로 터치미디어쿼리 덮어쓰기 방지) ── */ .nav-menu { display: none !important; } .nav-cta { display: none !important; } .nav-hamburger { display: flex !important; min-width: 44px; min-height: 44px; justify-content: center; align-items: center; padding: 10px; } /* 모바일 메뉴 링크 터치 타깃 */ .nav-mobile a { min-height: 48px; display: flex !important; align-items: center; padding: 14px 24px; -webkit-tap-highlight-color: rgba(245,124,32,0.08); } .nav-mobile a:active { background: var(--bg-navy-light); color: var(--navy); } .nav-mobile .mobile-cta { min-height: 52px; justify-content: center; } .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .steps { grid-template-columns: 1fr; } .contact-form-grid { grid-template-columns: 1fr; } .review-card { flex: 0 0 calc(100% - 10px); } .footer-inner { grid-template-columns: 1fr; gap: 24px; } .footer-bottom { flex-direction: column; text-align: center; } .price-badge { flex-direction: column; align-items: flex-start; } .price-divider { display: none; } .hero h1 { font-size: 1.7rem; } /* ── 네비 로고: 모바일 크기 조정 ── */ .nav-logo-img { height: 32px; } .nav-inner { height: 60px; gap: 8px; } .hero-btns { flex-direction: column; } .hero-btns .btn { width: 100%; justify-content: center; min-height: 52px; font-size: 1rem; } /* 폼 입력 필드: 모바일 zoom 방지 (16px 이상) */ input, select, textarea { font-size: 16px !important; } /* 버튼 전반 터치 타깃 보강 */ .btn { min-height: 48px; } } @media (max-width: 480px) { .container { padding: 0 16px; } .hero { padding: 70px 0 56px; } #floating-btn .btn-text { display: none; } #floating-btn { width: 56px; height: 56px; padding: 0; justify-content: center; border-radius: 50%; font-size: 1.4rem; bottom: 20px; right: 16px; } .review-card { flex: 0 0 100%; } /* 섹션 타이틀 모바일 최적화 */ .section-title { font-size: 1.45rem; } .section-sub { font-size: 0.9rem; margin-bottom: 1.8rem; } /* 카드 패딩 축소 */ .card { padding: 20px 16px; } /* FAQ 등 아코디언 터치 영역 */ .faq-question { min-height: 52px; padding: 16px 20px; } }