/* ============================================================ 크루크루 — 위더스앤씨 | 공유 디자인 시스템 sonoimready.com 토큰 기반 / 브랜드: Navy #1a2e5a + Gold #c9a84c ============================================================ */ /* Google Fonts @import 제거 — 의 로 이동 (P0-2 렌더 블로킹 해소) */ /* ---- 1. 디자인 토큰 ---- */ :root { /* Brand */ --navy-900: #0d1c3a; --navy-800: #1a2e5a; /* Primary */ --navy-700: #253460; --navy-600: #364d8e; --navy-500: #3a66c9; --navy-400: #4980fb; --navy-300: #7aaff8; --navy-100: #e8eef8; --navy-50: #f4f7fd; --gold-600: #a8782a; --gold-500: #c9a84c; /* Accent */ --gold-400: #d9bc72; --gold-300: #e8c84a; /* Shimmer / price hint */ --gold-100: #fdf6e3; /* Neutral */ --gray-900: #1a1a2e; --gray-700: #444466; --gray-500: #7777aa; --gray-300: #bbbbcc; --gray-200: #e8e8f0; --gray-100: #f5f5fa; --white: #ffffff; /* Semantics */ --color-primary: var(--navy-800); --color-accent: var(--gold-500); --color-text: var(--gray-900); --color-text-sub: var(--gray-700); --color-text-muted: var(--gray-500); --color-border: var(--gray-200); --color-bg: var(--white); --color-bg-soft: var(--navy-50); /* Shadow */ --shadow-sm: 0 2px 8px rgba(26,46,90,0.08); --shadow-md: 0 6px 20px rgba(26,46,90,0.12); --shadow-lg: 0 12px 40px rgba(26,46,90,0.18); --shadow-hover: 0 12px 32px rgba(26,46,90,0.22); /* Radius */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* Transition */ --ease: 0.24s cubic-bezier(0.4, 0, 0.2, 1); /* Layout */ --nav-h: 64px; --container: 1120px; --section-pad: 104px; } /* ---- 2. Reset ---- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 62.5%; /* 1rem = 10px */ scroll-behavior: smooth; } body { font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 1.6rem; line-height: 1.6; color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; -webkit-user-select: none; user-select: none; /* 이미지 선택 방지 */ -webkit-user-drag: none; /* 이미지 드래그 방지 */ pointer-events: auto; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { cursor: pointer; border: none; background: none; font-family: inherit; } /* ---- 3. Layout Utilities ---- */ .container { max-width: var(--container); margin: 0 auto; padding: 0 20px; } .section { padding: var(--section-pad) 0; } .section-title { font-size: 2.8rem; font-weight: 700; color: var(--color-primary); line-height: 1.3; margin-bottom: 8px; } .section-sub { font-size: 1.5rem; color: var(--color-text-sub); margin-bottom: 48px; } .section-head { text-align: center; margin-bottom: 48px; } /* ---- 4. Navigation ---- */ .nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); background: transparent; border-bottom: 1px solid transparent; box-shadow: none; z-index: 1000; display: flex; align-items: center; transition: background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; } /* 투명 네비 위 텍스트 — 흰색 */ .nav:not(.nav--scrolled) .nav__tab { color: rgba(255,255,255,0.88); } .nav:not(.nav--scrolled) .nav__tab:hover, .nav:not(.nav--scrolled) .nav__tab.active { color: #fff; background: rgba(255,255,255,0.14); } /* 로고 흰색 반전 (투명 상태) */ .nav:not(.nav--scrolled) .nav__logo img { filter: brightness(0) invert(1); } /* 전화 상담 버튼 (투명 상태) */ .nav:not(.nav--scrolled) .btn-call { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.45); } /* 햄버거 바 흰색 (투명 상태, 모바일) */ .nav:not(.nav--scrolled) .nav__hamburger span { background: rgba(255,255,255,0.9); } /* 스크롤 후: 화이트 글래스 */ .nav--scrolled { background: rgba(255,255,255,0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 2px 24px rgba(26,46,90,0.10); border-bottom: 1px solid rgba(26,46,90,0.07); } .nav--scrolled .nav__tab { color: var(--color-text-sub); } .nav--scrolled .nav__tab:hover, .nav--scrolled .nav__tab.active { color: var(--color-primary); background: var(--navy-50); } /* 스크롤 후 로고 원래 색 복원 */ .nav--scrolled .nav__logo img { filter: none; } .nav__inner { max-width: var(--container); margin: 0 auto; padding: 0 20px; width: 100%; display: flex; align-items: center; gap: 32px; } .nav__logo img { height: 36px; width: auto; display: block; } .nav__tabs { display: flex; gap: 4px; flex: 1; } .nav__tab { padding: 8px 16px; font-size: 1.4rem; font-weight: 500; color: var(--color-text-sub); border-radius: var(--radius-md); transition: color var(--ease), background var(--ease); white-space: nowrap; } .nav__tab:hover, .nav__tab.active { color: var(--color-primary); background: var(--navy-50); font-weight: 600; } .nav__tab.active { color: var(--color-primary); } .nav__cta { display: flex; align-items: center; gap: 12px; margin-left: auto; } .btn-call { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; background: var(--color-primary); color: var(--white); font-size: 1.4rem; font-weight: 600; border-radius: var(--radius-md); transition: background var(--ease), transform var(--ease); white-space: nowrap; } .btn-call:hover { background: var(--navy-700); transform: translateY(-1px); } .btn-call img { width: 16px; height: 16px; filter: brightness(0) invert(1); } /* Hamburger */ .nav__hamburger { display: none; flex-direction: column; gap: 5px; padding: 8px; margin-left: auto; } .nav__hamburger span { display: block; width: 22px; height: 2px; background: var(--color-primary); border-radius: 2px; transition: transform var(--ease), opacity var(--ease); } /* Mobile drawer */ .nav__drawer { display: none; position: fixed; top: var(--nav-h); left: 0; right: 0; background: var(--white); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-md); z-index: 999; padding: 16px 20px 24px; flex-direction: column; gap: 4px; } .nav__drawer.open { display: flex; } /* 모바일에서 visibility/opacity transition (display: flex 유지) */ @media (max-width: 768px) { .nav__drawer { display: flex; visibility: hidden; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s; } .nav__drawer.open { visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto; transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s; } } .nav__drawer .nav__tab { padding: 14px 16px; font-size: 1.6rem; } /* ---- 5. Buttons ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; font-size: 1.5rem; font-weight: 600; border-radius: var(--radius-md); transition: all var(--ease); cursor: pointer; border: none; white-space: nowrap; } .btn-primary { background: var(--color-primary); color: var(--white); } .btn-primary:hover { background: var(--navy-700); transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn-gold { background: var(--color-primary); color: var(--white); border: 1px solid var(--gold-500); position: relative; overflow: hidden; } .btn-gold::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.18) 50%, transparent 62%); transform: translateX(-100%); transition: transform 0.5s ease; } .btn-gold:hover { background: var(--navy-700); transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn-gold:hover::after { transform: translateX(100%); } .btn-outline { background: transparent; color: var(--color-primary); border: 1.5px solid var(--color-primary); } .btn-outline:hover { background: var(--navy-50); transform: translateY(-2px); } .btn-ghost { background: transparent; color: var(--color-text-sub); } .btn-ghost:hover { background: var(--gray-100); } /* ---- 6. Cards ---- */ .card { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; transition: box-shadow var(--ease), transform var(--ease); } .card:hover { box-shadow: var(--shadow-hover); } .card__img { width: 100%; aspect-ratio: 16/10; object-fit: cover; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .card:hover .card__img { transform: scale(1.05); } .card__body { padding: 20px 24px 24px; } .card__badge { display: inline-block; padding: 4px 10px; background: var(--navy-50); color: var(--navy-600); font-size: 1.2rem; font-weight: 600; border-radius: var(--radius-full); margin-bottom: 10px; } .card__badge--gold { background: var(--gold-100); color: var(--gold-600); } .card__badge--urgent { background: #fff1f0; color: #cf1322; } .card__title { font-size: 1.8rem; font-weight: 700; color: var(--color-primary); margin-bottom: 6px; } .card__sub { font-size: 1.4rem; color: var(--color-text-sub); margin-bottom: 12px; } .card__desc { font-size: 1.4rem; color: var(--color-text-muted); line-height: 1.7; margin-bottom: 20px; } /* ---- 7. Grid ---- */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } /* ---- 8. Hero Slider ---- */ .hero { position: relative; width: 100%; height: 100svh; /* svh: 브라우저 주소창 포함 최소 뷰포트 */ height: 100vh; /* fallback for older browsers */ min-height: 620px; max-height: 1100px; /* 4K 모니터에서 너무 커지는 것 방지 */ margin-top: 0; overflow: hidden; } /* 네비 가독성용 상단 그라데이션 */ .hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 180px; background: linear-gradient(to bottom, rgba(13,28,58,0.78) 0%, transparent 100%); z-index: 3; pointer-events: none; } .hero__slides { display: flex; height: 100%; transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); } .hero__slide { min-width: 100%; height: 100%; position: relative; flex-shrink: 0; } .hero__slide img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; /* 하늘·수평선 살리기 */ transform-origin: center center; will-change: transform; } /* Ken Burns — 활성 슬라이드 이미지만 적용 */ .hero__slide.active img { animation: kenBurns 8s ease-out forwards; } @keyframes kenBurns { from { transform: scale(1.08) translate(-0.5%, 0); } to { transform: scale(1.0) translate(0, 0); } } .hero__overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(13,28,58,0.72) 0%, rgba(13,28,58,0.30) 50%, transparent 75%), linear-gradient(to top, rgba(13,28,58,0.65) 0%, transparent 50%); } .hero__content { position: absolute; bottom: clamp(64px, 9vh, 120px); /* 화면 높이 비례 여백 */ left: clamp(40px, 7vw, 120px); /* 화면 너비 비례 왼쪽 정렬 */ max-width: clamp(420px, 50vw, 680px); } .hero__badge { display: inline-block; padding: 0; background: none; border: none; color: var(--gold-400); font-size: 1.2rem; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 18px; } .hero__title { font-family: 'Cormorant Garamond', 'Noto Serif KR', 'Apple SD Gothic Neo', serif; font-size: clamp(4.0rem, 5.5vw, 7.2rem); /* 화면 너비 비례 */ font-weight: 300; color: var(--white); line-height: 1.12; letter-spacing: -0.01em; margin-bottom: 12px; text-shadow: 0 2px 8px rgba(0,0,0,0.6), 0 4px 32px rgba(13,28,58,0.7); } .hero__sub { font-size: 1.7rem; color: rgba(255,255,255,0.95); margin-bottom: 28px; line-height: 1.6; text-shadow: 0 1px 8px rgba(0,0,0,0.5); } .hero__actions { display: flex; gap: 12px; flex-wrap: wrap; } /* Slider controls */ .hero__dots { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; } .hero__dot { width: 8px; height: 8px; border-radius: 4px; background: rgba(255,255,255,0.5); cursor: pointer; transition: width var(--ease), background var(--ease); /* button reset */ border: none; padding: 0; appearance: none; } .hero__dot.active { width: 24px; background: var(--white); } .hero__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; background: rgba(255,255,255,0.2); backdrop-filter: blur(4px); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 2rem; cursor: pointer; transition: background var(--ease); border: 1px solid rgba(255,255,255,0.3); } .hero__arrow:hover { background: rgba(255,255,255,0.35); } .hero__arrow--prev { left: 20px; } .hero__arrow--next { right: 20px; } /* ---- 9. Trust Bar ---- */ .trust-bar { background: var(--color-primary); padding: 16px 0; } .trust-bar__inner { display: flex; justify-content: center; gap: 48px; flex-wrap: wrap; } .trust-item { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,0.9); } .trust-item__icon { width: 32px; height: 32px; background: rgba(255,255,255,0.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .trust-item__icon img { width: 18px; height: 18px; filter: brightness(0) invert(1); } .trust-item__label { font-size: 1.3rem; opacity: 0.9; } .trust-item__value { font-size: 1.5rem; font-weight: 700; color: var(--white); } /* ---- 10. Sections bg ---- */ .bg-soft { background: var(--color-bg-soft); } .bg-navy { background: var(--color-primary); } .bg-white { background: var(--white); } /* ---- 11. Feature points (3-col icons) ---- */ .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .feature-item { text-align: center; padding: 36px 24px; background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: box-shadow var(--ease), transform var(--ease); } .feature-item:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); } .feature-icon { width: 60px; height: 60px; background: var(--navy-100); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; } .feature-icon img { width: 28px; height: 28px; } .feature-title { font-size: 1.7rem; font-weight: 700; color: var(--color-primary); margin-bottom: 10px; } .feature-desc { font-size: 1.4rem; color: var(--color-text-sub); line-height: 1.7; } /* ---- 12. Review Section ---- */ .review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .review-img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; } .review-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .review-img:hover img { transform: scale(1.03); } /* ---- 13. Contact Section ---- */ .contact-card { background: var(--color-primary); border-radius: var(--radius-xl); padding: 56px 48px; color: var(--white); text-align: center; } .contact-card__title { font-size: 3.2rem; font-weight: 800; line-height: 1.35; margin-bottom: 12px; word-break: keep-all; } .contact-card__sub { font-size: 1.6rem; opacity: 0.85; margin-bottom: 32px; } .contact-card__phone { font-size: 3.6rem; font-weight: 800; color: var(--gold-400); letter-spacing: 0.02em; margin-bottom: 8px; } .contact-card__note { font-size: 1.3rem; opacity: 0.7; margin-bottom: 32px; } .contact-info { display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.2); } .contact-info__item { font-size: 1.4rem; opacity: 0.8; } /* ---- 14. FAQ ---- */ .faq-item { border-bottom: 1px solid var(--color-border); } .faq-q { display: flex; align-items: center; gap: 12px; padding: 20px 0; cursor: pointer; font-size: 1.6rem; font-weight: 600; color: var(--color-text); transition: color var(--ease); } .faq-q:hover { color: var(--color-primary); } .faq-q__icon { width: 28px; height: 28px; background: var(--navy-100); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--navy-600); font-size: 1.4rem; font-weight: 700; transition: background var(--ease), color var(--ease); } .faq-item.open .faq-q__icon { background: var(--color-primary); color: var(--white); } .faq-q__arrow { margin-left: auto; width: 20px; height: 20px; transition: transform var(--ease); flex-shrink: 0; } .faq-item.open .faq-q__arrow { transform: rotate(180deg); } .faq-a { overflow: hidden; max-height: 0; transition: max-height 0.35s ease, padding 0.35s ease; } .faq-item.open .faq-a { max-height: 300px; } .faq-a__inner { padding: 0 0 20px 40px; font-size: 1.5rem; color: var(--color-text-sub); line-height: 1.75; } /* ---- 15. Page Hero (inner pages) ---- */ .page-hero { margin-top: 0; /* 투명 네비가 올라타므로 margin 제거 */ background: linear-gradient(135deg, var(--navy-800) 0%, var(--navy-600) 100%); background-size: cover; background-position: center 35%; min-height: 220px; display: flex; align-items: center; padding: calc(var(--nav-h) + 48px) 0 56px; /* nav-h만큼 상단 공간 확보 */ text-align: center; color: var(--white); position: relative; overflow: hidden; } /* 이미지 없을 때 기본 navy gradient */ .page-hero:not([style]) { background: linear-gradient(135deg, var(--navy-800) 0%, var(--navy-600) 100%); } .page-hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(to right, transparent 0%, var(--gold-400, #d4af37) 30%, var(--gold-400, #d4af37) 70%, transparent 100%); } .page-hero .container { position: relative; z-index: 1; } .page-hero__title { font-size: 3.6rem; font-weight: 900; margin-bottom: 14px; text-shadow: 0 2px 12px rgba(0,0,0,0.4); letter-spacing: -0.02em; } .page-hero__sub { font-size: 1.6rem; opacity: 0.88; line-height: 1.65; word-break: keep-all; } /* ---- 16. Tag Filters ---- */ .tag-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; } .tag { padding: 8px 16px; border-radius: var(--radius-full); border: 1.5px solid var(--color-border); font-size: 1.4rem; font-weight: 500; color: var(--color-text-sub); cursor: pointer; transition: all var(--ease); } .tag:hover, .tag.active { border-color: var(--color-primary); background: var(--navy-50); color: var(--color-primary); font-weight: 600; } /* ---- 17. Search ---- */ .search-wrap { position: relative; margin-bottom: 24px; } .search-input { width: 100%; padding: 14px 48px 14px 20px; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); font-size: 1.5rem; font-family: inherit; color: var(--color-text); outline: none; transition: border-color var(--ease); } .search-input:focus { border-color: var(--color-primary); } .search-icon { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; opacity: 0.4; } /* ---- 18. Product list table style ---- */ .product-table { width: 100%; border-collapse: collapse; } .product-table th { padding: 12px 16px; background: var(--navy-50); font-size: 1.3rem; font-weight: 700; color: var(--color-primary); text-align: left; border-bottom: 2px solid var(--color-border); } .product-table td { padding: 14px 16px; font-size: 1.4rem; color: var(--color-text); border-bottom: 1px solid var(--color-border); } .product-table tr:hover td { background: var(--navy-50); } /* ---- 19. Footer ---- */ .footer { background: var(--gray-900); color: rgba(255,255,255,0.7); padding: 48px 0 32px; } .footer__inner { max-width: var(--container); margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; } .footer__logo img { height: 32px; width: auto; filter: brightness(0) invert(1) opacity(0.9); margin-bottom: 16px; } .footer__copy { font-size: 1.3rem; line-height: 1.8; } .footer__title { font-size: 1.4rem; font-weight: 700; color: var(--white); margin-bottom: 16px; } .footer__list li { font-size: 1.3rem; margin-bottom: 8px; } .footer__list a:hover { color: var(--white); } .footer__bottom { max-width: var(--container); margin: 32px auto 0; padding: 20px 20px 0; border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; align-items: center; font-size: 1.2rem; } /* ---- 20. Mobile Bottom CTA Bar ---- */ .mobile-cta-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; height: 56px; padding-bottom: env(safe-area-inset-bottom); background: var(--color-primary); z-index: 1100; } .mobile-cta-bar a { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 100%; color: var(--white); font-size: 1.6rem; font-weight: 700; letter-spacing: 0.02em; } .mobile-cta-bar img { width: 20px; height: 20px; filter: brightness(0) invert(1); } /* ---- 21. Floating PC CTAs ---- */ .float-ctas { position: fixed; right: 24px; bottom: 40px; display: flex; flex-direction: column; gap: 10px; z-index: 1000; } .float-btn { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg); transition: transform var(--ease), box-shadow var(--ease); cursor: pointer; } .float-btn:hover { transform: scale(1.1); box-shadow: var(--shadow-hover); } .float-btn--call { background: var(--color-primary); } .float-btn--top { background: var(--white); border: 1.5px solid var(--color-border); } .float-btn img { width: 24px; height: 24px; } .float-btn--call img { filter: brightness(0) invert(1); } .float-btn--top img { opacity: 0.6; } /* ---- 22. Divider ---- */ .divider { height: 1px; background: var(--color-border); margin: 0; } /* ---- 23. Stat Numbers ---- */ .stats-grid { display: flex; gap: 0; } .stat-item { flex: 1; text-align: center; padding: 32px 16px; border-right: 1px solid var(--color-border); } .stat-item:last-child { border-right: none; } .stat-num { font-size: 3.6rem; font-weight: 800; color: var(--color-primary); line-height: 1; margin-bottom: 6px; } .stat-unit { font-size: 2rem; font-weight: 800; color: var(--color-primary); } .stat-label { font-size: 1.3rem; color: var(--color-text-sub); } /* ---- 24. Detail page ---- */ .detail-layout { display: grid; grid-template-columns: 1fr 360px; gap: 32px; align-items: start; } .pdf-viewer { width: 100%; height: 700px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; } .detail-sidebar { position: sticky; top: calc(var(--nav-h) + 24px); } .detail-info-card { background: var(--white); border: 1.5px solid var(--color-border); border-radius: var(--radius-lg); padding: 28px 24px; margin-bottom: 16px; } .detail-info-card h3 { font-size: 1.6rem; font-weight: 700; color: var(--color-primary); margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--color-border); } .detail-info-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 1.4rem; border-bottom: 1px solid var(--gray-100); } .detail-info-row:last-child { border-bottom: none; } .detail-info-row .label { color: var(--color-text-muted); } .detail-info-row .value { font-weight: 600; color: var(--color-text); } /* ---- AOS-like scroll animations ---- */ [data-anim] { opacity: 0; transform: translateY(28px); transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1); } [data-anim].visible { opacity: 1; transform: translateY(0); } [data-anim-delay="1"] { transition-delay: 0.08s; } [data-anim-delay="2"] { transition-delay: 0.16s; } [data-anim-delay="3"] { transition-delay: 0.24s; } [data-anim-delay="4"] { transition-delay: 0.32s; } /* 모바일: 딜레이 줄이기 */ @media (max-width: 1024px) { [data-anim-delay="1"] { transition-delay: 0.06s; } [data-anim-delay="2"] { transition-delay: 0.12s; } [data-anim-delay="3"] { transition-delay: 0.18s; } [data-anim-delay="4"] { transition-delay: 0.24s; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PREMIUM ANIMATIONS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* 기본 키프레임 */ @keyframes premFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes premFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes premScaleIn { from { opacity: 0; transform: scale(0.96) translateY(12px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes goldPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(212,175,55,0); } 50% { box-shadow: 0 0 0 6px rgba(212,175,55,0.18); } } @keyframes shimmerSlide { from { background-position: -200% center; } to { background-position: 200% center; } } /* Hero 슬라이드 전환 애니메이션 (active 클래스 토글로 재시작) kenBurns(8s) + fadeIn(0.7s) 동시 재생 — 충돌 방지 */ .hero__slide.active img { animation: kenBurns 8s ease-out forwards, premFadeIn 0.7s ease-out both; } .hero__slide.active .hero__badge { animation: premFadeUp 0.5s cubic-bezier(0.22,1,0.36,1) 0.12s both; } .hero__slide.active .hero__title { animation: premFadeUp 0.55s cubic-bezier(0.22,1,0.36,1) 0.25s both; } .hero__slide.active .hero__sub { animation: premFadeUp 0.5s cubic-bezier(0.22,1,0.36,1) 0.38s both; } .hero__slide.active .hero__actions { animation: premFadeUp 0.5s cubic-bezier(0.22,1,0.36,1) 0.5s both; } /* 카드 호버: 이미지 scale만 (translateY 제거) */ .card { transition: box-shadow 0.3s ease; } .card:hover { box-shadow: 0 16px 48px rgba(13,28,58,0.16); } /* section-head 골드 라인 드로잉 애니메이션 (B-4) */ @keyframes drawGoldLine { from { width: 0; opacity: 0; } to { width: 48px; opacity: 1; } } .section-head::after { content: ''; display: block; width: 0; height: 3px; background: linear-gradient(to right, var(--gold-400, #d4af37), var(--gold-300, #e8c84a)); border-radius: 2px; margin: 16px auto 0; opacity: 0; } .section-head.visible::after { animation: drawGoldLine 0.55s cubic-bezier(0.22,1,0.36,1) 0.3s both; } /* JS 없을 때 폴백 */ .section-head:not([data-anim])::after { width: 48px; opacity: 1; } /* btn-gold shimmer: hover 시 1회만 실행 (infinite 제거) */ /* page-hero 타이틀 입장 */ .page-hero__title[data-anim].visible { animation: premFadeUp 0.6s cubic-bezier(0.22,1,0.36,1) both; } .page-hero__sub[data-anim].visible { animation: premFadeUp 0.6s cubic-bezier(0.22,1,0.36,1) 0.15s both; } /* float-ctas: 768px 이하에서 완전 숨김 */ @media(max-width:768px) { .float-ctas { display: none !important; } } /* 모션 민감 사용자 대응 */ @media (prefers-reduced-motion: reduce) { [data-anim] { opacity: 1; transform: none; transition: none; } .hero__slide img, .hero__slide.active img { animation: none !important; transform: scale(1) !important; } .hero__slides { transition: none !important; } .section-head.visible::after { animation: none; width: 48px; opacity: 1; } } /* ================================================================ Hero Price Hint (가격 앵커 배지) ================================================================ */ .hero__price-hint { display: inline-flex; align-items: center; gap: 6px; font-size: 1.2rem; font-weight: 500; color: var(--gold-300, #e8c84a); background: rgba(212,175,55,0.12); border: 1px solid rgba(212,175,55,0.3); border-radius: 20px; padding: 5px 14px; letter-spacing: 0.01em; margin-top: 4px; margin-bottom: 2px; } /* ================================================================ 버튼 :active 눌림 피드백 (B-3) ================================================================ */ .btn:active { transform: translateY(1px) scale(0.97) !important; box-shadow: none !important; transition: transform 0.08s ease, box-shadow 0.08s ease !important; } /* ================================================================ RESPONSIVE — 1024px breakpoint (sonoimready 방식) ================================================================ */ @media (max-width: 1024px) { :root { --section-pad: 56px; --container: 100%; } /* Nav */ .nav__tabs { display: none; } .nav__cta { display: none; } .nav__hamburger { display: flex; } /* Hero */ .hero { height: 480px; } .hero__title { font-size: 3.2rem; } .hero__content { padding: 0 24px; bottom: 60px; } /* Grid → 1 col */ .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .feature-grid { grid-template-columns: 1fr; } .review-grid { grid-template-columns: 1fr; } /* Trust bar */ .trust-bar__inner { gap: 24px; } /* Stats */ .stats-grid { flex-wrap: wrap; } .stat-item { min-width: 50%; border-right: none; border-bottom: 1px solid var(--color-border); } /* Footer */ .footer__inner { grid-template-columns: 1fr; gap: 24px; } .footer__bottom { flex-direction: column; gap: 8px; text-align: center; } /* Detail */ .detail-layout { grid-template-columns: 1fr; } .detail-sidebar { position: static; } /* Mobile CTA bar */ .mobile-cta-bar { display: block; } .float-ctas { display: none !important; } /* Body bottom padding for fixed bar */ body { padding-bottom: 56px; } .section-title { font-size: 2.4rem; } .contact-card { padding: 40px 24px; } .contact-card__title { font-size: 2.2rem; line-height: 1.4; } .contact-card__phone { font-size: 2.8rem; } /* page-hero 모바일: 투명 네비 높이 흡수 */ .page-hero { padding: calc(var(--nav-h) + 36px) 0 48px; min-height: 200px; } .page-hero__title { font-size: 2.8rem; } .page-hero__sub { font-size: 1.4rem; } } @media (max-width: 640px) { .hero { height: 420px; } .hero__title { font-size: 2.6rem; } .hero__sub { font-size: 1.5rem; } .hero__actions { flex-direction: column; } .feature-grid { grid-template-columns: 1fr; } .trust-bar__inner { gap: 16px; justify-content: flex-start; padding: 0 20px; overflow-x: auto; flex-wrap: nowrap; } /* 5060 가독성: 보조 텍스트 15px 보장 */ .card__desc, .card__sub, .feature-desc, .review-text, .trust-item__label, .section-sub { font-size: 1.5rem; } .footer__list li, .footer__copy { font-size: 1.4rem; } .faq-a__inner { font-size: 1.5rem; line-height: 1.7; } /* 터치 버튼 여유 */ .btn { padding: 15px 22px; } .faq-q { min-height: 56px; } /* ── 모바일 블럭감 ── */ /* 섹션 간격: 숨 쉬는 여백 */ .section { padding: 48px 0; } /* 카드: 풀 블럭처럼 꽉 차 보이게 */ .card { border-radius: 16px; } .card__body { padding: 20px 20px 24px; } .card__title { font-size: 1.8rem; font-weight: 700; } .card__desc { font-size: 1.45rem; line-height: 1.65; margin-top: 8px; } /* feature-item: 아이콘 → 제목 → 내용 세로 가운데 정렬 */ .feature-item { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 28px 20px; background: var(--white); border-radius: 16px; box-shadow: 0 2px 14px rgba(26,46,90,0.07); } .feature-icon { margin-bottom: 14px; } .feature-title { font-size: 1.7rem; font-weight: 700; margin-bottom: 10px; line-height: 1.4; } .feature-desc { font-size: 1.45rem; line-height: 1.65; color: var(--color-text-sub); } /* section-title 크게 */ .section-title { font-size: 2.4rem; } /* section-sub: 줄글 정돈 — 가운데 정렬, 줄 길이 제한 */ .section-sub { font-size: 1.45rem; margin-top: 10px; line-height: 1.7; word-break: keep-all; overflow-wrap: break-word; } /* 카드 desc도 줄글 정돈 */ .card__desc, .card__sub, .feature-desc { word-break: keep-all; overflow-wrap: break-word; } /* grid 간격 늘리기: 카드 사이 여백 */ .grid-2, .grid-3, .grid-4, .feature-grid { gap: 16px; } } /* ================================================================ 접근성 — :focus-visible (키보드 사용자 포커스 표시) ================================================================ */ :focus-visible { outline: 3px solid var(--navy-400); outline-offset: 3px; border-radius: 3px; } /* 버튼/링크는 기본 outline 제거 후 focus-visible만 사용 */ a:focus:not(:focus-visible), button:focus:not(:focus-visible) { outline: none; } /* ================================================================ 접근성 — Skip Navigation Link ================================================================ */ .skip-link { position: absolute; top: -100%; left: 0; z-index: 9999; background: var(--color-primary); color: var(--white); font-size: 1.4rem; font-weight: 700; padding: 12px 24px; border-radius: 0 0 var(--radius-md) 0; text-decoration: none; transition: top 0.2s ease; } .skip-link:focus { top: 0; } /* ================================================================ 접근성 — Hero Pause Button ================================================================ */ .hero__pause { position: absolute; bottom: 16px; right: 16px; z-index: 10; width: 36px; height: 36px; background: rgba(13,28,58,0.55); border: 1px solid rgba(255,255,255,0.3); border-radius: 50%; color: rgba(255,255,255,0.85); font-size: 1.4rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--ease); } .hero__pause:hover { background: rgba(13,28,58,0.8); }