/* ========================================================================== ROAD BITE FOOD TRUCK 5개 페이지 공용 스타일시트 색·여백은 Home_Background.png 에서 뽑은 값에 맞춰져 있다. ========================================================================== */ :root { --black: #1a1a1a; --paper: #fff; /* 히어로 이미지 배경이 흰색이라 이음매가 없다 */ --paper-alt: #faf5f0; /* 구역을 나눌 때 쓰는 살짝 따뜻한 톤 */ --card: #fff; --ink: #1a1a1a; --muted: #7a736d; --muted-dark: #9a9a9a; /* 어두운 배경 위 보조 텍스트 (히어로) */ --line: #ebe0d4; --accent: #f26b21; /* tools/slice_assets.py 의 ACCENT 와 같은 값 유지 */ --accent-soft: #fdeee4; --container: 1160px; --gutter: clamp(20px, 5vw, 52px); --header-h: 84px; --font-brush: 'Permanent Marker', 'Pretendard', cursive; --font-display: 'Bebas Neue', 'Pretendard', sans-serif; --font-kr: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', system-ui, sans-serif; --ease: cubic-bezier(.22, .61, .36, 1); --hero-img: url('../assets/img/hero.png?v=2'); } /* ── 다크 모드 ──────────────────────────────────────────────────────── 기본은 화이트. html[data-theme="dark"] 일 때만 토큰을 갈아끼운다. 깜빡임을 막으려고 각 HTML 의 인라인 스크립트가 CSS 보다 먼저 data-theme 을 붙인다. */ [data-theme="dark"] { --paper: #000; /* hero-dark.png 배경이 순수 검정이라 맞춘다 */ --paper-alt: #0d0d0d; --card: #141414; --ink: #fff; --muted: #a29b94; --line: rgba(255, 255, 255, .14); --accent: #ff7c3f; /* 검정 위 대비를 위해 살짝 밝은 주황 */ --accent-soft: #2a1a11; --hero-img: url('../assets/img/hero-dark.png?v=2'); } /* 사진이 아직 없을 때 쓰는 플레이스홀더도 배경 톤을 따라간다 */ [data-theme="dark"] .feature__media { background: linear-gradient(135deg, #2b2b2b, #171717); } [data-theme="dark"] .logo__mark { filter: invert(1); } [data-theme="dark"] .client.is-empty { background: #f3f0ec; } /* 로고 칩은 다크에서도 흰색을 유지한다 — 대부분의 로고가 흰 배경 전용이라 어두운 칩에 올리면 글자가 사라진다 */ [data-theme="dark"] .client { border-color: rgba(255, 255, 255, .1); } /* ── 리셋 ────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; padding-top: var(--header-h); /* 고정 헤더가 본문을 가리지 않도록 */ background: var(--paper); color: var(--ink); font-family: var(--font-kr); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, p, figure, ul { margin: 0; padding: 0; } ul { list-style: none; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip-link { position: fixed; top: 8px; left: 8px; z-index: 200; padding: 10px 18px; background: var(--black); color: #fff; font-size: 14px; border-radius: 999px; transform: translateY(-200%); } .skip-link:focus { transform: none; } /* ── 진입 인트로 ────────────────────────────────────────────────────── 접속하면 도장이 찍히듯 나타났다 화면이 걷히며 본문이 드러난다. 세션당 한 번만 뜬다 — 판단은 각 HTML 인라인 스크립트가 한다. 기본이 display:none 이라 JS 가 꺼져 있으면 (html.intro 가 안 붙으면) 인트로가 아예 존재하지 않는다. */ .intro-screen { display: none; } .intro.js .intro-screen { display: grid; position: fixed; inset: 0; z-index: 500; /* 사이트 최대가 200(skip-link) 이라 그 위 */ place-content: center; justify-items: center; gap: 22px; /* 히어로 배경과 같은 색이라 걷힐 때 이음매가 보이지 않는다 */ background: var(--paper); /* 마지막 키프레임이 visibility:hidden 이고 forwards 라, JS 가 죽어도 CSS 만으로 끝까지 걷힌다. 제거를 JS 에 맡기면 스크립트 실패 시 화면이 영구히 가려진다. */ /* 대기 .85s + 걷힘 .4s = 1.25s. 폰트 CDN 때문에 첫 페인트가 늦는 편이라 여기서 더 끌면 본문까지 2.5초를 넘긴다. */ animation: intro-lift .4s var(--ease) .85s forwards; } .intro-screen__mark { width: clamp(112px, 16vw, 168px); height: auto; animation: intro-stamp .5s var(--ease) .05s both; } /* 도장이 검정 선화라 검은 배경에서는 안 보인다. 헤더 로고와 같은 처리. */ [data-theme="dark"] .intro-screen__mark { filter: invert(1); } .intro-screen__rule { width: 54px; height: 3px; border-radius: 2px; background: var(--accent); transform-origin: left center; animation: intro-rule .4s var(--ease) .35s both; } @keyframes intro-stamp { from { opacity: 0; transform: scale(1.12) rotate(-5deg); } to { opacity: 1; transform: none; } } @keyframes intro-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes intro-lift { to { transform: translateY(-101%); visibility: hidden; } } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } /* 채움용이 기본. 선으로 그린 아이콘(화살표 등)은 .icon--stroke 를 함께 준다. 예전에는 viewBox 로 stroke 를 껐는데, 그러면 선으로 그린 아이콘이 보이지 않으면서 자리만 차지해 버튼 폭이 어긋난다. */ .icon { width: 1em; height: 1em; fill: currentColor; stroke: none; flex: none; } .icon--stroke { fill: none; stroke: currentColor; } /* ── 로고 ────────────────────────────────────────────────────────────── */ /* 로고는 엠블럼 한 장이 전부다. 마크 안에 'No.1' 과 'KOREA No.1 Food Trucks' 가 이미 새겨져 있어 옆에 글자를 덧붙이면 같은 말이 두 번 나온다. */ .logo { display: inline-flex; align-items: center; line-height: 1; color: var(--ink); } /* 원본(_source/stamp.png)은 흰 바탕이 칠해져 있다. tools/prepare_logo.py 가 밝기를 알파로 옮겨 투명 검정 마크로 만든 것을 쓴다. */ .logo__mark { width: 58px; height: 58px; flex: none; } /* ── 버튼 ────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; /* 아이콘 유무와 무관하게 같은 높이 */ padding: 14px 28px; border-radius: 999px; border: 1px solid transparent; font-family: var(--font-kr); font-weight: 700; font-size: 15px; letter-spacing: -.01em; line-height: 1; white-space: nowrap; transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); } .btn:hover { transform: translateY(-2px); } .btn .icon { font-size: 16px; } .btn--light { background: var(--accent); color: #fff; } .btn--light:hover { background: var(--ink); color: #fff; } .btn--dark { background: var(--accent); color: #fff; } .btn--dark:hover { background: var(--ink); } .btn--ghost { background: var(--card); border-color: var(--line); color: var(--ink); } .btn--ghost:hover { border-color: var(--accent); color: var(--accent); } .btn--sm { min-height: 42px; padding: 12px 24px; font-size: 13px; } /* 영문 라벨 전용 — ORDER NOW / VIEW LOCATION */ .btn--en { font-family: var(--font-display); font-weight: 400; letter-spacing: .13em; } /* ── 헤더 ────────────────────────────────────────────────────────────── */ /* 시안처럼 항상 흰 바. 히어로의 주황 스플래시가 헤더 뒤로 올라오면 ORDER NOW 버튼이 주황 위 주황이 돼 읽히지 않는다. body 에 헤더 높이만큼 padding 을 줘서 본문이 헤더 아래에서 시작한다. */ .site-header { position: fixed; inset: 0 0 auto; z-index: 100; background: var(--card); border-bottom: 1px solid var(--line); transition: box-shadow .3s var(--ease); } .site-header.is-solid { box-shadow: 0 6px 24px rgba(26, 22, 18, .07); } .site-header__inner { display: flex; align-items: center; gap: 24px; width: 100%; max-width: var(--container); min-height: var(--header-h); margin-inline: auto; padding-inline: var(--gutter); } .nav { margin-inline: auto; } .nav__list { display: flex; gap: 34px; } .nav__link { position: relative; display: block; padding: 6px 0; font-size: 15px; font-weight: 500; letter-spacing: .02em; color: var(--muted); transition: color .2s var(--ease); } .nav__link:hover { color: var(--ink); } .nav__link.is-active { color: var(--accent); font-weight: 700; } .nav__link.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); } .site-header__actions { display: flex; align-items: center; gap: 18px; } /* 문의 팝오버 — 데스크톱에서 tel: 은 반응이 없는 경우가 많아 번호를 눈으로 보여주고 전화/문자/메일 중 고르게 한다 */ .contact-menu { position: relative; } .contact-pop { position: absolute; top: calc(100% + 12px); right: 0; z-index: 10; display: flex; flex-direction: column; min-width: 246px; padding: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 14px 40px rgba(26, 22, 18, .16); } .contact-pop[hidden] { display: none; } .contact-pop::before { content: ''; position: absolute; top: -7px; right: 26px; width: 12px; height: 12px; background: var(--card); border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); } .contact-pop a { position: relative; display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 9px; transition: background-color .18s var(--ease); } .contact-pop a:hover { background: var(--accent-soft); } .contact-pop svg { width: 19px; height: 19px; fill: var(--accent); flex: none; } .contact-pop span { display: flex; flex-direction: column; font-size: 12.5px; color: var(--muted); } .contact-pop strong { font-size: 13.5px; font-weight: 700; color: var(--ink); } .mobile-nav__contact { display: flex; flex-wrap: wrap; gap: 10px; } /* 화이트/다크 전환 버튼 — 현재 모드에 따라 아이콘 하나만 보인다 */ .theme-toggle { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); transition: border-color .22s var(--ease), color .22s var(--ease); } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); } .theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; } .theme-toggle .icon-sun { display: none; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* 시안에는 데스크톱에서도 ORDER NOW 옆에 햄버거가 있다 — 그대로 둔다 */ .hamburger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 34px; height: 34px; padding: 0; } .hamburger span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .28s var(--ease), opacity .2s var(--ease); } .hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mobile-nav { display: flex; flex-direction: column; gap: 26px; padding: 12px var(--gutter) 40px; background: var(--card); border-bottom: 1px solid var(--line); } .mobile-nav[hidden] { display: none; } .mobile-nav__list { display: flex; flex-direction: column; gap: 4px; } .mobile-nav__list a { display: block; padding: 12px 0; font-size: 18px; font-weight: 500; color: var(--muted); border-bottom: 1px solid var(--line); } .mobile-nav__list a[aria-current="page"] { color: var(--accent); } .mobile-nav .btn { align-self: flex-start; } /* ── 히어로 ──────────────────────────────────────────────────────────── */ /* hero.png 를 오른쪽에 붙여 높이에 맞추고 왼쪽 여백 위에 텍스트를 얹는다. */ .hero { --hero-h: clamp(480px, 46vw, 700px); /* hero.png 의 가로/세로. 사진을 `auto 100%` 로 깔기 때문에 화면에 찍히는 사진 폭은 언제나 (히어로 높이 x 이 값)이다. 아래 마스크를 사진에 정확히 맞추는 데 쓴다 — 사진을 갈아 끼우면 이 값도 같이 갈아야 한다. */ --hero-ratio: 1.283; position: relative; display: flex; align-items: center; min-height: var(--hero-h); background: var(--paper); } /* 사진은 배경이 아니라 별도 레이어로 깐다. .hero 에 직접 깔면 mask 가 그 위의 텍스트까지 같이 지워 버리기 때문이다. */ .hero::before { content: ''; position: absolute; inset: 0; background: var(--hero-img) right center / auto 100% no-repeat; /* 네 변 중 오른쪽만 화면 밖으로 나가고 나머지 셋은 잘린 자국이 남는다. 가로 마스크로 왼쪽을, 세로 마스크로 위아래를 풀고 교집합으로 겹친다. 중요한 건 mask-size 다. 마스크를 히어로 전체(100%)에 걸면 퍼센트가 화면 폭 기준이 되는데, 사진 왼쪽 끝은 화면 폭에 따라 40~53% 사이를 오간다. 그 지점의 마스크 값이 0 이 아니면 거기서 사진이 반투명인 채로 툭 시작해 결국 선이 보인다. 그래서 마스크 박스를 사진과 같은 크기로 잡아 0% 가 사진 왼쪽 끝에 정확히 오게 한다. 정지점을 촘촘히 둔 건 두 점짜리 램프는 꺾이는 자리가 선처럼 보여서다. */ -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .12) 16%, rgba(0, 0, 0, .42) 32%, rgba(0, 0, 0, .78) 48%, #000 64%), linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .3) 7%, rgba(0, 0, 0, .8) 16%, #000 26%, #000 74%, rgba(0, 0, 0, .8) 84%, rgba(0, 0, 0, .3) 93%, transparent 100%); -webkit-mask-size: calc(var(--hero-h) * var(--hero-ratio)) 100%, 100% 100%; -webkit-mask-position: right center, center; -webkit-mask-repeat: no-repeat, no-repeat; -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .12) 16%, rgba(0, 0, 0, .42) 32%, rgba(0, 0, 0, .78) 48%, #000 64%), linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .3) 7%, rgba(0, 0, 0, .8) 16%, #000 26%, #000 74%, rgba(0, 0, 0, .8) 84%, rgba(0, 0, 0, .3) 93%, transparent 100%); mask-size: calc(var(--hero-h) * var(--hero-ratio)) 100%, 100% 100%; mask-position: right center, center; mask-repeat: no-repeat, no-repeat; mask-composite: intersect; } .hero__inner { position: relative; width: 100%; max-width: var(--container); margin-inline: auto; padding: clamp(28px, 4vw, 56px) var(--gutter) clamp(28px, 4vw, 56px); } .hero__copy { max-width: 520px; } .hero__eyebrow { font-family: var(--font-brush); font-size: clamp(15px, 1.5vw, 18px); color: var(--accent); transform: skewX(-6deg); transform-origin: left center; } .hero__title { margin-top: 14px; font-size: clamp(30px, 4.2vw, 52px); font-weight: 800; letter-spacing: -.035em; line-height: 1.28; } .hero__title em { font-style: normal; color: var(--accent); } .hero__desc { margin-top: 20px; font-size: clamp(13.5px, 1.35vw, 15.5px); line-height: 1.85; color: var(--muted); } .hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; } /* 세 가지 강점 — 시안처럼 버튼 아래 한 줄로 */ .hero__points { display: flex; flex-wrap: wrap; gap: clamp(18px, 2.6vw, 34px); margin-top: clamp(34px, 4.5vw, 56px); } .hero__points li { display: flex; align-items: center; gap: 10px; } .hero__point-icon { width: 30px; height: 30px; flex: none; fill: none; stroke: var(--accent); } .hero__points span { display: flex; flex-direction: column; font-size: 11.5px; line-height: 1.45; color: var(--muted); } .hero__points strong { font-size: 13px; font-weight: 700; color: var(--ink); } /* ── 섹션 헤딩 ───────────────────────────────────────────────────────── */ .section-head { text-align: center; } .section-head__eyebrow { font-size: clamp(14px, 1.5vw, 16px); font-weight: 600; color: var(--accent); } .section-head__title { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: clamp(26px, 3.4vw, 42px); font-weight: 800; letter-spacing: -.03em; line-height: 1.25; } .section-head__title em { font-style: normal; color: var(--accent); } /* ── 강점 3가지 ──────────────────────────────────────────────────────── */ .features { padding: clamp(70px, 9vw, 118px) 0 clamp(50px, 6vw, 80px); } .features__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(26px, 4vw, 56px); margin-top: clamp(44px, 6vw, 72px); } .feature { display: flex; flex-direction: column; align-items: center; text-align: center; } .feature__num { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: #fff; font-family: var(--font-display); font-size: 15px; letter-spacing: .06em; } .feature__title { margin-top: 18px; font-size: clamp(15px, 1.6vw, 19px); font-weight: 700; letter-spacing: -.02em; } .feature__desc { margin-top: 12px; font-size: clamp(12.5px, 1.25vw, 14px); line-height: 1.85; color: var(--muted); } /* 원본 브러시 결로 만든 마스크 — tools/slice_assets.py 참고 */ .feature__media { position: relative; width: 100%; margin-top: clamp(22px, 3vw, 34px); aspect-ratio: 31 / 20; background: linear-gradient(135deg, #efe6dc, #d9ccbe); -webkit-mask-image: url('../assets/img/mask-brush-oval.png?v=2'); mask-image: url('../assets/img/mask-brush-oval.png?v=2'); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .feature__media img { width: 100%; height: 100%; object-fit: cover; } /* 사진이 아직 없을 때만 보이는 라벨 */ .media-ph { position: absolute; inset: 0; display: none; place-items: center; font-family: var(--font-display); font-size: 15px; letter-spacing: .2em; color: #fff; } [data-media].is-empty .media-ph { display: grid; } /* ── 함께한 곳들 (로고 컨베이어) ─────────────────────────────────────── */ .clients { padding: clamp(20px, 3vw, 40px) 0 clamp(50px, 6vw, 80px); } .clients__note { margin-top: 14px; font-size: clamp(12px, 1.2vw, 13.5px); letter-spacing: .02em; color: var(--muted); } .marquee { margin-top: clamp(28px, 4vw, 46px); overflow: hidden; /* 양끝을 흐리게 잘라 컨베이어가 화면 밖에서 이어지는 느낌을 준다 */ -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .marquee + .marquee { margin-top: clamp(12px, 1.6vw, 18px); } .marquee__inner { display: flex; width: max-content; } /* 사본을 붙이기 전에는 움직이지 않는다 (JS 꺼져 있으면 그냥 가로 스크롤) */ .marquee.is-ready .marquee__inner { animation: marquee-scroll 46s linear infinite; } .marquee--reverse.is-ready .marquee__inner { animation-direction: reverse; } .marquee.is-ready:hover .marquee__inner, .marquee.is-ready:focus-within .marquee__inner { animation-play-state: paused; } @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } /* 사본 1벌 폭 = 전체의 절반 */ } .marquee__group { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 18px); padding-right: clamp(12px, 1.6vw, 18px); } .client { display: grid; place-items: center; flex: none; width: clamp(132px, 14vw, 182px); height: clamp(64px, 6.4vw, 84px); padding: 14px 18px; background: #fff; border: 1px solid #e6e6e4; border-radius: 12px; transition: border-color .25s var(--ease), transform .25s var(--ease); } .client:hover { border-color: #c9c9c6; transform: translateY(-2px); } /* 평소엔 무채색으로 톤을 맞추고, 올리면 원래 색이 살아난다 */ .client img { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(1); opacity: .68; transition: filter .25s var(--ease), opacity .25s var(--ease); } .client:hover img { filter: none; opacity: 1; } /* 로고 파일이 아직 없을 때 대체 표시 */ .client__name { display: none; font-size: clamp(12px, 1.2vw, 14px); font-weight: 700; letter-spacing: -.02em; color: #8a8a88; text-align: center; } .client.is-empty { background: #eaeae7; border: 1px dashed #cfcfcb; } .client.is-empty .client__name { display: block; } /* ── 행사 진행 프로세스 ──────────────────────────────────────────────── */ /* 좌측 설명 + 우측 카드 3장. 카드는 소개·서비스에서 쓰는 .card 를 그대로 쓴다 */ .process { padding: clamp(56px, 7vw, 96px) 0; } .process__inner { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: clamp(32px, 5vw, 70px); align-items: start; } .process__title { margin-top: 10px; font-size: clamp(26px, 3.2vw, 38px); font-weight: 800; letter-spacing: -.035em; line-height: 1.25; } .process__title em { font-style: normal; color: var(--accent); } .process__lead { margin-top: 16px; font-size: clamp(14px, 1.5vw, 17px); font-weight: 700; } .process__desc { margin-top: 10px; font-size: clamp(12.5px, 1.25vw, 14px); line-height: 1.85; color: var(--muted); } .process__copy .btn { margin-top: 26px; } /* ── 푸터 ────────────────────────────────────────────────────────────── */ /* 위에 있던 주황 브러시 디바이더는 대표님 요청으로 제거했다. 구분선이 없어졌으므로 푸터 위쪽에 여백을 줘 본문과 붙지 않게 한다. */ .site-footer { padding-top: clamp(48px, 6vw, 72px); padding-bottom: 34px; background: var(--paper); color: var(--ink); } /* ── 푸터 ──────────────────────────────────────────────────────────── 대표님 요청으로 뉴스레터·소셜·메뉴 링크를 없애고 사업자 정보만 남겼다. 그 위에는 슬로건 한 줄과 야간 현장 사진을 가로로 길게 깐다. */ /* 시안대로 주황 짧은 선 → 헤드라인 → 사진 띠 순서 */ .footer-lead { padding: clamp(40px, 5.5vw, 72px) var(--gutter) clamp(26px, 3.4vw, 40px); text-align: center; background: var(--paper); } .footer-lead::before { content: ''; display: block; width: 44px; height: 3px; margin: 0 auto clamp(16px, 2vw, 22px); border-radius: 2px; background: var(--accent); } .footer-lead__title { font-size: clamp(21px, 3.2vw, 38px); font-weight: 800; letter-spacing: -.035em; line-height: 1.35; color: var(--ink); } .footer-lead__title em { font-style: normal; color: var(--accent); } /* 원본이 1834x186 파노라마라 비율을 그대로 살려 띠처럼 깐다. 화면이 아주 넓으면 세로가 얇아지므로 최소 높이를 둔다. */ .footer-strip { width: 100%; aspect-ratio: 1834 / 186; min-height: 96px; background: #0b0b0b url('../assets/img/line.png?v=2') center / cover no-repeat; } .site-footer { padding-top: clamp(34px, 4.5vw, 52px); padding-bottom: clamp(30px, 4vw, 44px); background: var(--paper); color: var(--ink); } .site-footer__biz { text-align: center; font-size: clamp(12.5px, 1.3vw, 14px); line-height: 2.1; color: var(--muted); } .site-footer__biz i { font-style: normal; margin: 0 6px; color: var(--line); } .site-footer__biz a { color: inherit; } .site-footer__biz a:hover { color: var(--accent); text-decoration: underline; } .site-footer__policy { display: flex; justify-content: center; gap: 22px; margin-top: clamp(14px, 2vw, 20px); font-size: clamp(13px, 1.35vw, 14.5px); } .site-footer__policy a { color: var(--ink); } .site-footer__policy b { font-weight: 700; } .site-footer__copy { margin-top: clamp(16px, 2.2vw, 24px); font-size: clamp(12px, 1.25vw, 13.5px); color: var(--muted); } /* ── 하위 페이지 "준비 중" ───────────────────────────────────────────── */ .page-stub { display: grid; place-content: center; justify-items: center; gap: 4px; min-height: clamp(420px, 60vh, 600px); padding: clamp(60px, 8vw, 100px) var(--gutter) clamp(70px, 9vw, 110px); text-align: center; } .page-stub__eyebrow { font-family: var(--font-display); font-size: 13px; letter-spacing: .3em; color: var(--muted); } .page-stub__title { position: relative; margin-top: 10px; font-size: clamp(34px, 5vw, 58px); font-weight: 800; letter-spacing: -.035em; } /* 브러시 결을 옅게 깔아 홈과 같은 톤을 유지한다 */ .page-stub__title::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; width: 320px; height: 86px; transform: translate(-50%, -50%); background: url('../assets/img/brush-stroke-white.png?v=2') center / contain no-repeat; filter: invert(1); opacity: .05; } .page-stub__desc { margin-top: 16px; font-size: clamp(13.5px, 1.4vw, 15px); line-height: 1.9; color: var(--muted); } .page-stub .btn { margin-top: 30px; } /* ── 스크롤 등장 ─────────────────────────────────────────────────────── */ /* JS 가 없거나 실패하면 섹션이 영영 안 보이므로, 숨기는 건 .js 일 때만 한다 */ .js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .js .reveal.is-in { opacity: 1; transform: none; } /* ── 반응형 ──────────────────────────────────────────────────────────── */ @media (max-width: 1023px) { :root { --header-h: 72px; } .nav { display: none; } .site-header__actions { margin-left: auto; } /* 3열은 이 폭에서 단이 좁아 설명문이 3줄로 깨진다 */ .features__grid { grid-template-columns: repeat(2, 1fr); } .process__inner { grid-template-columns: 1fr; } } @media (max-width: 900px) { /* 데스크톱처럼 오른쪽에 붙이면 트럭이 글자 위로 올라온다. 이미지를 폭 100% 로 아래에 깔고 그만큼 아래 여백을 준다. */ .hero { min-height: 0; } /* 사진이 아래로 내려가면 가로 페이드는 사진 한복판을 지운다. 끈다. (세로로 바꿔도 소용없다 — 마스크는 히어로 전체 높이 기준이라 사진이 시작되는 지점에선 이미 불투명이다.) */ .hero::before { background-size: 100% auto; background-position: center bottom; -webkit-mask-image: none; mask-image: none; } /* 사진을 폭 100% 로 깔았으니 사진 높이는 (히어로 폭 / 비율) 이다. 그만큼을 아래 여백으로 비워야 포인트 3개가 사진 위로 안 깔린다. 예전엔 61.7vw 로 박아 뒀는데, 그건 직전 사진 비율(1.621)이라 사진을 갈면 어긋난다. --hero-ratio 하나만 보도록 묶는다. */ .hero__inner { padding-bottom: calc(100% / var(--hero-ratio) + 28px); } .hero__copy { max-width: none; } .hero__points { gap: 16px 22px; } } @media (max-width: 767px) { } @media (max-width: 640px) { .features__grid { grid-template-columns: 1fr; gap: 44px; } .feature__media { max-width: 400px; } } /* 이전에는 헤더가 넘쳐 로고 부제를 접었지만, 컨트롤을 정리한 뒤로는 320px 에서도 자리가 남는다. 아래 '헤더 컨트롤 정리' 블록이 크기를 잡는다. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } /* 위 !important 는 animation-duration 만 줄인다. animation-delay 는 그대로라 인트로가 1.05초를 기다렸다 사라진다. 아예 띄우지 않는다. */ .intro.js .intro-screen { display: none !important; } /* 위 !important 규칙만 두면 컨베이어가 끝 지점으로 튄 채 멈춘다. 애니메이션을 끄고 손으로 가로 스크롤하도록 바꾼다. */ .marquee.is-ready .marquee__inner { animation: none !important; transform: none !important; } .marquee { overflow-x: auto; } } /* ========================================================================== 하위 페이지 공용 컴포넌트 (소개 / 서비스 / 운영사례 / 문의하기) ========================================================================== */ .page-hero { padding: clamp(56px, 7vw, 92px) 0 clamp(40px, 5vw, 64px); text-align: center; background: var(--paper-alt); border-bottom: 1px solid var(--line); } .page-hero__eyebrow { font-family: var(--font-brush); font-size: clamp(14px, 1.5vw, 17px); color: var(--accent); transform: skewX(-6deg); } .page-hero__title { margin-top: 12px; font-size: clamp(30px, 4vw, 48px); font-weight: 800; letter-spacing: -.035em; line-height: 1.25; } .page-hero__title em { font-style: normal; color: var(--accent); } .page-hero__desc { margin-top: 18px; font-size: clamp(13.5px, 1.35vw, 15.5px); line-height: 1.9; color: var(--muted); } .section { padding: clamp(56px, 7vw, 96px) 0; } .section--alt { background: var(--paper-alt); } .section__body { margin-top: clamp(36px, 5vw, 60px); } /* 숫자 지표 — 300회+ / 200회+ / 500대+ */ .stat-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 3vw, 40px); padding: clamp(26px, 4vw, 44px) clamp(20px, 4vw, 48px); background: var(--accent-soft); border-radius: 20px; } .stat { text-align: center; } .stat__num { font-size: clamp(28px, 4vw, 44px); font-weight: 800; letter-spacing: -.04em; color: var(--accent); line-height: 1.1; } .stat__label { margin-top: 6px; font-size: clamp(12.5px, 1.3vw, 14.5px); font-weight: 600; } /* 아이콘 + 제목 + 설명 카드 3열 */ .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.6vw, 30px); } .card { padding: clamp(24px, 3vw, 34px); background: var(--card); border: 1px solid var(--line); border-radius: 18px; transition: border-color .25s var(--ease), transform .25s var(--ease); } .card:hover { border-color: var(--accent); transform: translateY(-3px); } .card__num { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; font-family: var(--font-display); font-size: 15px; } .card__icon { width: 38px; height: 38px; fill: none; stroke: var(--accent); stroke-width: 1.6; } .card__title { margin-top: 16px; font-size: clamp(15px, 1.6vw, 18px); font-weight: 700; letter-spacing: -.02em; } .card__desc { margin-top: 10px; font-size: clamp(12.5px, 1.3vw, 14px); line-height: 1.85; color: var(--muted); } /* 행사 카테고리 — 사진 + 라벨 */ .cat-group + .cat-group { margin-top: clamp(36px, 5vw, 56px); } .cat-group__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; } .cat-group__en { font-family: var(--font-display); font-size: 12px; letter-spacing: .24em; color: var(--accent); } .cat-group__ko { font-size: clamp(19px, 2.2vw, 26px); font-weight: 800; letter-spacing: -.03em; } .cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 22px); } .cat-card { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 16px; border: 1px solid var(--line); background: var(--paper-alt); display: flex; align-items: flex-end; } .cat-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cat-card__label { position: relative; width: 100%; padding: 14px 16px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .78)); color: #fff; } .cat-card__label b { display: block; font-size: clamp(14px, 1.5vw, 17px); font-weight: 700; } .cat-card__label span { font-family: var(--font-display); font-size: 11px; letter-spacing: .18em; opacity: .8; } /* 메뉴·브랜드 태그 목록 */ .tags { display: flex; flex-wrap: wrap; gap: 9px; } .tags li { padding: 9px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; font-size: clamp(12.5px, 1.3vw, 14px); font-weight: 600; transition: border-color .2s var(--ease), color .2s var(--ease); } .tags li:hover { border-color: var(--accent); color: var(--accent); } /* 운영사례 로고 그리드 (홈은 컨베이어, 여기선 전체를 한눈에) */ .logo-wall + .logo-wall { margin-top: clamp(30px, 4vw, 46px); } .logo-wall__head { margin-bottom: 16px; font-size: clamp(14px, 1.5vw, 16px); font-weight: 700; color: var(--accent); text-align: center; } .logo-wall__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(10px, 1.4vw, 16px); } .logo-wall__grid .client { width: auto; height: clamp(62px, 6.6vw, 88px); } /* 문의 페이지 */ .contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 26px); } .contact-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: clamp(24px, 3vw, 32px); background: var(--card); border: 1px solid var(--line); border-radius: 18px; transition: border-color .25s var(--ease), transform .25s var(--ease); } .contact-card:hover { border-color: var(--accent); transform: translateY(-3px); } .contact-card svg { width: 30px; height: 30px; fill: var(--accent); } .contact-card b { font-size: clamp(15px, 1.6vw, 18px); font-weight: 700; } .contact-card span { font-size: clamp(13px, 1.35vw, 15px); color: var(--muted); } .contact-card em { font-style: normal; font-size: 12.5px; color: var(--muted); } .inquiry { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 760px; margin-inline: auto; } .inquiry__row--full { grid-column: 1 / -1; } .inquiry label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 600; } .inquiry input, .inquiry textarea, .inquiry select { width: 100%; padding: 13px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; color: var(--ink); font-family: inherit; font-size: 14px; } .inquiry textarea { min-height: 150px; resize: vertical; } .inquiry input:focus, .inquiry textarea:focus, .inquiry select:focus { outline: none; border-color: var(--accent); } .inquiry__note { font-size: 12.5px; line-height: 1.8; color: var(--muted); } .inquiry__msg { min-height: 20px; font-size: 13px; color: var(--accent); } @media (max-width: 900px) { .cards, .cat-grid, .contact-grid { grid-template-columns: repeat(2, 1fr); } .logo-wall__grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 640px) { .cards, .cat-grid, .contact-grid, .inquiry { grid-template-columns: 1fr; } .stat-bar { grid-template-columns: 1fr; gap: 20px; } .logo-wall__grid { grid-template-columns: repeat(3, 1fr); } .site-footer__biz ul { flex-direction: column; gap: 2px; } } /* ========================================================================== 다크 모드 = 원래 시안 복원 히어로 레터링이 이미지에 인쇄돼 있고, 위치 카드는 사진 위 흰 글씨였다. 포인트 컬러(주황)만 그대로 가져간다. ========================================================================== */ /* 'GOOD FOOD ANYWHERE' 가 이미지에 있으므로 HTML 제목은 화면에서만 숨긴다. DOM 에는 남아 검색·스크린리더에는 그대로 읽힌다. */ /* 원본 시안은 이미지가 화면을 꽉 채우고 레터링이 왼쪽 끝에 붙는다. 라이트처럼 오른쪽 정렬하면 레터링이 가운데로 밀려 들어온다. */ /* 다크는 레터링이 왼쪽 끝에 인쇄돼 있어 왼쪽을 흐리면 제목이 지워진다. 페이드는 라이트 전용이다. */ [data-theme="dark"] .hero::before { background-size: cover; background-position: center; -webkit-mask-image: none; mask-image: none; } [data-theme="dark"] .hero__eyebrow, [data-theme="dark"] .hero__title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* 인쇄된 레터링(원본 y 150~350 ≒ 높이의 24~55%) 아래에서 카피가 시작되도록 */ [data-theme="dark"] .hero__inner { padding-top: clamp(200px, 30vw, 420px); } [data-theme="dark"] .hero__desc { margin-top: 0; color: rgba(255, 255, 255, .74); } @media (max-width: 900px) { /* 모바일에선 이미지가 아래로 내려가므로 레터링 자리를 비울 필요가 없다 */ [data-theme="dark"] .hero__inner { padding-top: clamp(28px, 4vw, 56px); } [data-theme="dark"] .hero__eyebrow, [data-theme="dark"] .hero__title { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal; } [data-theme="dark"] .hero__desc { margin-top: 20px; } } /* ========================================================================== 헤더 컨트롤 정리 로고가 flex 로 눌려 'FOOD TRUCK' 이 사라지고, 햄버거는 선 3개라 오렌지 버튼 옆에서 버튼으로 안 읽혔다. 셋을 같은 크기로 맞춘다. ========================================================================== */ .logo { flex: none; } /* 눌려서 부제가 잘리는 것 방지 */ .site-header__actions { flex: none; margin-left: auto; } /* 테마 토글과 햄버거를 같은 원형 버튼으로 통일 */ .theme-toggle, .hamburger { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; flex: none; } .hamburger { align-items: center; gap: 4px; padding: 0; transition: border-color .22s var(--ease); } .hamburger span { width: 17px; } .hamburger:hover { border-color: var(--accent); } .hamburger:hover span { background: var(--accent); } @media (max-width: 900px) { :root { --header-h: 68px; } .site-header__inner { gap: 10px; } .site-header__actions { gap: 8px; } .logo__mark { width: 46px; height: 46px; } /* 터치 타깃은 40px 아래로 내리지 않는다 */ .theme-toggle, .hamburger { width: 40px; height: 40px; } .theme-toggle svg { width: 17px; height: 17px; } .hamburger span { width: 16px; } /* 문의 버튼은 두 원형 버튼과 같은 높이로 */ .site-header__actions .btn--sm { min-height: 40px; padding: 0 16px; height: 40px; font-size: 13px; } /* 팝오버가 화면 밖으로 나가지 않게 폭을 화면에 맞춘다 */ .contact-pop { min-width: 0; width: min(88vw, 280px); right: -46px; } .contact-pop::before { right: 72px; } } @media (max-width: 360px) { .site-header__inner { gap: 6px; } .site-header__actions { gap: 6px; } .logo__mark { width: 42px; height: 42px; } .site-header__actions .btn--sm { padding: 0 12px; font-size: 12px; } } /* ── 약관 문서 (개인정보처리방침 등) ─────────────────────────────────── */ .legal { max-width: 820px; margin-inline: auto; font-size: clamp(13.5px, 1.4vw, 15px); line-height: 1.95; color: var(--muted); } .legal h2 { margin-top: clamp(32px, 4vw, 44px); margin-bottom: 10px; font-size: clamp(16px, 1.7vw, 19px); font-weight: 700; color: var(--ink); } .legal h2:first-child { margin-top: 0; } .legal p + p { margin-top: 10px; } .legal b { font-weight: 700; color: var(--ink); } .legal a { color: var(--accent); } .legal a:hover { text-decoration: underline; } .legal ul { margin: 10px 0 0; padding-left: 2px; } .legal li { position: relative; padding-left: 15px; } .legal li + li { margin-top: 4px; } .legal li::before { content: ''; position: absolute; left: 0; top: .82em; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); } /* 사실관계를 짚어두는 보충 설명 — 본문과 구분되게 상자로 */ .legal__note { margin-top: 12px; padding: 16px 18px; background: var(--paper-alt); border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; font-size: clamp(12.5px, 1.3vw, 14px); } .legal__table { margin-top: 12px; border-collapse: collapse; } .legal__table th, .legal__table td { padding: 9px 18px 9px 0; text-align: left; vertical-align: top; } .legal__table th { width: 96px; font-weight: 700; color: var(--ink); } .legal__date { margin-top: clamp(34px, 4.5vw, 48px); padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; } /* ── whyus (소개) ─────────────────────────────────────────────────────── 대표님이 보내주신 기존 시안 형태. 아이콘만 원본에서 잘라 쓰고 글자는 HTML 이라 모바일에서 접히고 문구 수정도 자유롭다. */ .whyus { display: grid; grid-template-columns: repeat(3, 1fr); } .whyus__item { display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(20px, 3vw, 34px) clamp(14px, 2vw, 26px); } /* 시안의 세로 구분선 */ .whyus__item + .whyus__item { border-left: 1px solid var(--line); } .whyus__icon { width: clamp(96px, 11vw, 132px); height: clamp(96px, 11vw, 132px); object-fit: contain; } /* 아이콘 선이 검정이라 다크에서는 그대로 두면 배경에 묻힌다 */ [data-theme="dark"] .whyus__icon { filter: invert(1) hue-rotate(180deg); } .whyus__title { margin-top: clamp(20px, 2.6vw, 30px); font-size: clamp(17px, 1.9vw, 22px); font-weight: 800; letter-spacing: -.03em; } /* 제목 아래 주황 짧은 선 */ .whyus__title::after { content: ''; display: block; width: 30px; height: 3px; margin: clamp(12px, 1.6vw, 18px) auto 0; background: var(--accent); border-radius: 2px; } .whyus__desc { margin-top: clamp(12px, 1.6vw, 18px); font-size: clamp(13px, 1.4vw, 15px); line-height: 1.8; color: var(--muted); } @media (max-width: 720px) { /* 세로로 쌓이면 세로 구분선이 어색해 가로선으로 바꾼다 */ .whyus { grid-template-columns: 1fr; } .whyus__item + .whyus__item { border-left: 0; border-top: 1px solid var(--line); } } /* 인기메뉴는 시안대로 가운데 정렬 (행사 카테고리는 좌측 정렬 유지) */ .menu-groups .cat-group__head { justify-content: center; } .menu-groups .tags { justify-content: center; } /* 솔루션 카드는 번호 배지와 아이콘을 함께 쓴다. 그냥 두면 둘이 붙어 답답해 보이므로 간격을 주고 세로 가운데로 맞춘다. */ .card__num + .card__icon { margin-left: 12px; vertical-align: middle; width: 30px; height: 30px; } .card__num { vertical-align: middle; } /* 솔루션 카드는 번호를 빼고 아이콘만 쓴다 — 아이콘이 주인공이라 크게. 대표님 요청으로 46px → 92px. stroke-width 는 viewBox 단위라 그대로 두면 선까지 두 배로 굵어진다. 1.5 → 1.2 로 낮춰 선 굵기를 지금과 비슷하게 맞췄다. */ .card > .card__icon { width: clamp(64px, 8vw, 92px); height: clamp(64px, 8vw, 92px); stroke-width: 1.2; } /* 운영사례 상단 — 통계 바 대신 실제 행사 사진 한 장 */ .case-hero-photo { overflow: hidden; border-radius: 20px; border: 1px solid var(--line); background: var(--paper-alt); } .case-hero-photo img { width: 100%; height: auto; display: block; } /* ── 케이터링 현수막 설치 서비스 ────────────────────────────────────── 왼쪽은 시공 자리 도해, 오른쪽은 같은 시공을 마친 실제 현장 사진. 대표님 시안은 액자·장식·치수 글자가 한 장에 구워진 AI 렌더라 트럭만 잘라 쓰고 (tools/prepare_banner_truck.py) 번호·치수는 HTML 로 짰다. */ .banner-spec { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 2vw, 24px); } .banner-spec__item { display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; border: 1px solid var(--line); background: var(--paper-alt); } /* height:auto 를 빼면 안 된다. img 의 height 속성이 프리젠테이션 힌트로 height:711px 을 걸어버려 aspect-ratio 가 무시되고 세로로 늘어난다. */ .banner-spec__item > img { width: 100%; height: auto; flex: 1; aspect-ratio: 3 / 2; object-fit: cover; display: block; } .banner-spec__item figcaption { padding: 12px 16px; border-top: 1px solid var(--line); background: var(--paper); font-size: 13px; font-weight: 600; color: var(--muted); text-align: center; } /* 도해는 트럭이 가로로 길어(2:1) 오른쪽 사진 카드(3:2)와 비율이 다르다. 잘라 맞추면 날개 현수막이 날아가므로 위아래를 비우고, 그 빈 자리를 그림 자체의 크림색으로 칠해 이음매를 없앤다. (tools/prepare_banner_truck.py 가 이 값을 뽑아 준다 — 테마와 무관하게 고정) */ .banner-spec__item--diagram { background: #faf3e5; } .truck-spec { flex: 1; display: grid; place-items: center; aspect-ratio: 3 / 2; } .truck-spec__img { width: 100%; height: auto; display: block; } @media (max-width: 760px) { .banner-spec { grid-template-columns: 1fr; } } /* ── 현장 사진 ─────────────────────────────────────────────────────── 그룹(대학교 축제·기업행사·케이터링)마다 한 줄씩, 사진 위 라벨은 없다. 대표님 요청으로 로고 컨베이어와 같은 방식으로 저절로 흐른다. */ .shot { overflow: hidden; border-radius: 14px; border: 1px solid var(--line); background: var(--paper-alt); } .shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .35s var(--ease); } .shot:hover img { transform: scale(1.05); } /* 컨베이어 안에서는 칸이 늘어나면 안 된다 — 폭을 고정해야 사본이 이어 붙는다 */ .shots-track .shot { flex: none; width: clamp(208px, 24vw, 300px); } /* 그룹 제목은 본문 폭에 맞추고, 사진 줄만 화면 끝까지 흐르게 한다 */ .cat-group--flow + .cat-group--flow { margin-top: clamp(30px, 4vw, 48px); } .cat-group--flow .cat-group__head { margin-bottom: 14px; } .cat-group--flow .marquee { margin-top: 0; } /* 섹션 배경으로 LG전자 행사 사진을 깐다. 통계 박스 안이 아니라 그 바깥 흰 영역이 사진 자리다. */ .section--photo { position: relative; background: #1a1512 url('../assets/img/lg-truck.jpg?v=2') center / cover no-repeat; isolation: isolate; } .section--photo::before { content: ''; position: absolute; inset: 0; z-index: -1; /* 사진이 밝아 그대로 두면 위에 얹은 카드가 묻힌다 */ background: rgba(18, 13, 9, .45); } [data-theme="dark"] .section--photo::before { background: rgba(0, 0, 0, .62); } /* 사진 위에 떠 있는 카드라 살짝 띄워 준다 */ .section--photo .stat-bar { box-shadow: 0 18px 50px rgba(0, 0, 0, .28); } /* ── 프로세스 3단계 카드 ───────────────────────────────────────────── 대표님 시안(process.png)의 배치. 아이콘은 시안에서 잘라 쓴 3D 렌더다. */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 20px); } .step { display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(20px, 2.6vw, 30px) clamp(14px, 1.8vw, 22px) clamp(24px, 3vw, 34px); background: var(--card); border: 1px solid var(--line); border-radius: 18px; transition: border-color .25s var(--ease), transform .25s var(--ease); } .step:hover { border-color: var(--accent); transform: translateY(-3px); } /* 잘라낸 아이콘에 원본 그림자가 옅게 남아 있다. 어두운 배경 위에 바로 두면 흰 얼룩으로 보이므로, 시안처럼 밝은 칩 위에 올려 다크에서도 자연스럽게 한다. */ .step__icon { display: grid; place-items: center; width: clamp(104px, 12vw, 132px); height: clamp(104px, 12vw, 132px); border-radius: 22px; background: #f7f2ea; } .step__icon img { width: 82%; height: 82%; object-fit: contain; } .step__num { display: grid; place-items: center; width: 32px; height: 32px; margin-top: clamp(16px, 2vw, 22px); border-radius: 50%; background: var(--accent); color: #fff; font-family: var(--font-display); font-size: 14px; line-height: 1; } .step__title { margin-top: 12px; font-size: clamp(15px, 1.7vw, 19px); font-weight: 700; letter-spacing: -.02em; } .step__desc { margin-top: 10px; font-size: clamp(12.5px, 1.3vw, 14px); line-height: 1.8; color: var(--muted); } @media (max-width: 860px) { .process__inner { grid-template-columns: 1fr; } .steps { grid-template-columns: 1fr; } .step { flex-direction: row; align-items: center; text-align: left; gap: 16px; padding: 16px 18px; } .step__icon { width: 78px; height: 78px; border-radius: 16px; flex: none; } .step__num { position: absolute; opacity: 0; } /* 순서는 배치로 드러난다 */ .step__title { margin-top: 0; } .step__desc br { display: none; } }