/* ══════════════════════════════════════════════════════════════ 길 모빌리티 — 스타일시트 색상은 아래 :root 변수만 바꾸면 사이트 전체가 함께 바뀝니다. 현재: 밝은 테마 (배경 #f8f9f9 / 강조 로고 네이비) ══════════════════════════════════════════════════════════════ */ /* ── 라이트 모드(기본) ───────────────────────────────────── 테마는 로 전환합니다. 초기값은 index.html의 인라인 스크립트가 정합니다. */ :root { color-scheme: light; --bg: #f8f9f9; --bg-alt: #eef1f4; --surface: #ffffff; --line: #e2e6ea; --header-bg: rgba(248, 249, 249, .85); --card-fade: rgba(255, 255, 255, .92); --text: #12161b; --text-dim: #515b68; --text-mute: #7b8593; --accent: #1e2185; --accent-hover: #2a2ea8; --accent-soft: rgba(30, 33, 133, .07); --accent-line: rgba(30, 33, 133, .28); --accent-shadow: rgba(30, 33, 133, .30); --on-accent: #ffffff; --overlay: rgba(18, 22, 27, .035); --overlay-strong: rgba(18, 22, 27, .07); --warn: #b45309; /* 히어로는 사진 위 흰 글씨라 두 모드 모두 어두운 밴드를 유지합니다 */ --hero-bg: #0a0d12; --hero-em: #7dd3fc; --brand-navy: #1e2185; --brand-cream: #ededea; /* 수화기 아이콘 (data URI — 외부 요청 없음) */ --icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2z'/%3E%3C/svg%3E"); --wrap: 1180px; --radius: 14px; --ease: cubic-bezier(.22, 1, .36, 1); } /* ── 다크 모드 ───────────────────────────────────────────── 강조색은 로고 네이비를 어두운 배경에서 읽히도록 밝게 조정한 값입니다. */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0a0d12; --bg-alt: #0f141b; --surface: #151b24; --line: #232c39; --header-bg: rgba(10, 13, 18, .82); --card-fade: rgba(21, 27, 36, .92); --text: #e8edf4; --text-dim: #93a1b5; --text-mute: #7c8899; --accent: #8e93ee; --accent-hover: #a7abf6; --accent-soft: rgba(142, 147, 238, .12); --accent-line: rgba(142, 147, 238, .38); --accent-shadow: rgba(142, 147, 238, .35); --on-accent: #0a0d12; --overlay: rgba(255, 255, 255, .035); --overlay-strong: rgba(255, 255, 255, .075); --warn: #fbbf24; } /* ── 기본 ─────────────────────────────────────────────────── */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 80px; } body { font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', sans-serif; background: var(--bg); color: var(--text); line-height: 1.7; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; overflow-x: hidden; /* 한글이 단어 중간에서 끊기지 않도록 (예: "통미로59 / 번길") */ word-break: keep-all; overflow-wrap: break-word; } img, svg, video, iframe { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } ::selection { background: var(--accent); color: var(--on-accent); } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; } .skip-link { position: absolute; left: -9999px; background: var(--accent); color: var(--on-accent); padding: 12px 20px; z-index: 999; border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; top: 0; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* 미입력 표시 — 실제 내용 채운 뒤 class="todo"만 지우면 됩니다 */ .todo { color: var(--warn); border-bottom: 1px dashed currentColor; } /* ── 헤더 ─────────────────────────────────────────────────── */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; transition: background .35s var(--ease), backdrop-filter .35s, border-color .35s; border-bottom: 1px solid transparent; } .site-header.scrolled { background: var(--header-bg); backdrop-filter: blur(14px) saturate(160%); border-bottom-color: var(--line); } /* 스크롤 전 헤더는 어두운 히어로 위에 있으므로 글자를 밝게 */ .site-header:not(.scrolled) .logo-text { color: #fff; } .site-header:not(.scrolled) .logo-text small { color: rgba(255,255,255,.6); } .site-header:not(.scrolled) .nav a:not(.nav-cta) { color: rgba(255,255,255,.78); } .site-header:not(.scrolled) .nav a:not(.nav-cta):hover, .site-header:not(.scrolled) .nav a:not(.nav-cta).active { color: #fff; } .site-header:not(.scrolled) .nav a:not(.nav-cta)::after { background: var(--hero-em); } .site-header:not(.scrolled) .hamburger span { background: #fff; } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 74px; } .logo { display: flex; align-items: center; gap: 11px; } /* 로고 이미지 배경이 크림색이라, 어두운 헤더 위에서는 둥근 타일로 보여줍니다. 배경이 투명한 로고 파일이 생기면 background/border-radius 줄만 지우면 됩니다. */ .logo-mark { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; background: var(--brand-cream); object-fit: contain; transition: transform .3s var(--ease), box-shadow .3s; } .logo:hover .logo-mark { transform: translateY(-1px); box-shadow: 0 6px 18px -6px var(--accent-shadow); } .logo-text { display: flex; flex-direction: column; font-size: 1.06rem; font-weight: 700; line-height: 1.15; } .logo-text small { font-size: .58rem; font-weight: 500; letter-spacing: .18em; color: var(--text-mute); } .nav { display: flex; align-items: center; gap: 34px; } .nav a { font-size: .93rem; font-weight: 500; color: var(--text-dim); transition: color .2s; position: relative; } .nav a:hover, .nav a.active { color: var(--text); } .nav a:not(.nav-cta)::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 100%; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); } .nav a:not(.nav-cta):hover::after, .nav a:not(.nav-cta).active::after { transform: scaleX(1); } .nav-cta { padding: 9px 20px; border-radius: 100px; background: var(--accent); color: var(--on-accent) !important; font-weight: 700; } .nav-cta:hover { background: var(--accent-hover); } /* ── 라이트/다크 전환 버튼 ────────────────────────────────── */ .theme-toggle { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; margin-left: 20px; border-radius: 50%; cursor: pointer; color: var(--text-dim); background: var(--overlay); border: 1px solid var(--line); transition: color .25s, border-color .25s, background .25s, transform .25s var(--ease); } .theme-toggle:hover { color: var(--accent); border-color: var(--accent-line); transform: translateY(-1px); } .theme-toggle svg { width: 18px; height: 18px; } /* 스크롤 전(어두운 히어로 위)에는 밝게 */ .site-header:not(.scrolled) .theme-toggle { color: rgba(255,255,255,.8); border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.08); } .site-header:not(.scrolled) .theme-toggle:hover { color: #fff; border-color: #fff; } /* 현재 모드에 맞는 아이콘만 표시 */ .icon-moon { display: block; } .icon-sun { display: none; } :root[data-theme="dark"] .icon-moon { display: none; } :root[data-theme="dark"] .icon-sun { display: block; } .hamburger { display: none; width: 42px; height: 42px; background: none; border: 0; cursor: pointer; flex-direction: column; justify-content: center; gap: 6px; padding: 0 8px; } .hamburger span { display: block; height: 2px; width: 100%; background: var(--text); border-radius: 2px; transition: transform .32s var(--ease), opacity .2s; } .hamburger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; } .hamburger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* ── 히어로 ───────────────────────────────────────────────── */ .hero { position: relative; background: var(--hero-bg); min-height: 100svh; display: flex; align-items: center; overflow: hidden; } .hero-bg { position: absolute; inset: 0; z-index: 0; } /* 배경 사진 — 드론 촬영 영상으로 바꾸려면