/* ============================================================================ sections/solutions.css — sub0101_Solutions (221:47 · 1920×19278) ---------------------------------------------------------------------------- 근거: extract/snapshot-sub0101.json · notes-sub0101.md · tokens-sub0101.json. 길이값은 02-tokens 변수 또는 clamp 손계산(1920 기준 — 주석에 시안값). 브레이크포인트: 1440 / 1280 / 1024 / 768 / 480 만 사용. ========================================================================== */ @layer components { /* ── 페이지 전용 보조 스케일 (02-tokens 에 없는 시안값 손계산) ─────────── */ [data-page] .sol-hero, body[data-page="solutions"] { --sol-fs-28: clamp(18px, 1.4583vw, 28px); /* 28 칼럼 헤더 */ --sol-fs-26: clamp(17px, 1.3542vw, 26px); /* 26 feature 타이틀 */ --sol-sp-150: clamp(64px, 7.8125vw, 150px); /* 150 섹션 간격/패딩 */ --sol-sp-70: clamp(36px, 3.6458vw, 70px); /* 70 섹션 내부 gap */ --sol-label-col: clamp(240px, 18.2292vw, 350px); /* 350 좌측 라벨 칼럼 */ } /* ══ 히어로 (221:60 · py120) ══════════════════════════════════════════════ */ /* 헤더 오프셋은 221:60 박스 밖(#df-main)에 둔다 — 시안 221:60 은 y=94 에서 시작(F2) */ body[data-page="solutions"] #df-main { padding-block-start: var(--hd-h); background: var(--df-navy); } .sol-hero { background: var(--df-navy); padding-block: var(--sp-120); } .sol-hero__row { display: grid; grid-template-columns: minmax(0, 650fr) minmax(0, 850fr); /* 시안 650+850, gap100 */ gap: var(--sp-100); align-items: start; } .sol-hero__twrap { position: relative; max-inline-size: 100%; font-weight: 700; font-size: var(--fs-80); line-height: 1.4; /* 80/Bold/1.4 */ color: var(--df-white); } .sol-hero__title { font: inherit; color: inherit; } .sol-hero__ln { display: block; } .sol-hero__aside { padding-block-start: clamp(0px, 7.2917vw, 140px); } /* 시안 pt140 */ .sol-hero__body { font-weight: 400; font-size: var(--fs-20); line-height: 1.8; color: var(--df-white); } .sol-hero__body p + p { margin-block-start: 1.8em; } /* 시안 빈 줄(\n\n) */ /* ══ ★ 호버 이미지 스왑 밴드 (243:420 · 1920×1000) ═══════════════════════ */ .sol-band { position: relative; background: var(--df-navy); overflow: clip; } .sol-band__stage { position: absolute; inset: 0; z-index: 0; } .sol-band__layer { position: absolute; inset: 0; opacity: 0; z-index: 0; transition: opacity .55s var(--ease-out-quart); } .sol-band__layer.is-on { opacity: 1; z-index: 1; } .sol-band__layer > img { inline-size: 100%; block-size: 100%; object-fit: cover; } /* 딤은 도착 자산(sol-img-*.jpg)에 구워져 있음 — 별도 딤 레이어 없음(WIRE-RULES A3) */ .sol-band__cols { position: relative; z-index: 2; isolation: isolate; display: grid; grid-template-columns: repeat(5, 1fr); /* 등폭 5칼럼 384px */ min-block-size: clamp(520px, 52.0833vw, 1000px); /* 시안 1000 */ } .sol-band__li { display: grid; opacity: 1; } /* hover 시 모션 재생으로 글자 소거 방지 */ .sol-band__li:not(:last-child) { border-inline-end: 1px solid var(--df-line-w20); } /* 243:421 */ .sol-band__col { display: flex; flex-direction: column; justify-content: center; gap: var(--sp-20); /* gap 20 */ padding: clamp(40px, 5.2083vw, 100px) clamp(24px, 2.6042vw, 50px); /* 100/50 */ color: var(--df-white); background: transparent; transition: background-color .45s var(--ease-out-quart); } /* 호버/포커스 칼럼 — 하단 그라데이션 rgba(0,0,0,0)→0.5 (243:429 실측) */ .sol-band__col:hover, .sol-band__col:focus-visible { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%); } .sol-band__num { font-weight: 300; font-size: var(--fs-24); line-height: 1; } /* 24 Light */ .sol-band__name { font-weight: 600; font-size: var(--fs-40); line-height: 1; } /* 40 SemiBold */ .sol-band__desc { font-weight: 300; font-size: var(--fs-20); line-height: 1.6; } /* 20 Light 1.6 */ /* ══ 본문 컨테이너 (221:86 · py120) ══════════════════════════════════════ */ .sol-main { background: var(--df-navy); padding-block: var(--sp-120); } .sol-main__content { display: grid; gap: var(--sol-sp-150); } /* 221:87 col gap 150 */ .sol-main__cols { display: grid; min-inline-size: 0; /* 함정 61: 스티키 pill 바(nowrap) min-content 전파로 좁은 폭 오버플로 → 축소 허용 */ grid-template-columns: clamp(140px, 8.8542vw, 170px) minmax(0, 1fr); /* 170 + 1330, gap 100 */ gap: var(--sp-100); align-items: start; } /* ── 좌측 스티키 pill 메뉴 (221:89 · #212E42 r20 · pad10 gap4) ──────────── */ .sol-menu { min-inline-size: 0; /* 함정 61: pill nowrap min-content 가 1fr 트랙을 386px 로 키움 — 아이템 축소 허용, 내부는 overflow-x 스크롤 */ position: sticky; inset-block-start: calc(var(--hd-h) + var(--sp-20)); background: var(--df-panel); border-radius: var(--r-20); padding: clamp(6px, 0.5208vw, 10px); } .sol-menu__list { display: grid; gap: 4px; } .sol-menu__pill { display: flex; align-items: center; justify-content: center; min-block-size: clamp(38px, 2.2917vw, 44px); /* 150×44 pill */ padding: clamp(10px, 0.7292vw, 14px) var(--sp-20); /* 14/20 */ border-radius: var(--r-pill); font-weight: 700; font-size: var(--fs-16); line-height: 1; color: var(--df-white); text-align: center; transition: background-color .28s var(--ease-out-quart), color .28s var(--ease-out-quart); } .sol-menu__pill:hover, .sol-menu__pill.is-active { background: var(--df-cyan); color: #000000; /* 활성 = 시안 221:90/91 */ } /* ── 우측 솔루션 열 (221:100 · gap150) ──────────────────────────────────── */ .sol-right { display: grid; gap: var(--sol-sp-150); min-inline-size: 0; } .sol-sec { position: relative; display: grid; gap: var(--sol-sp-70); /* 내부 gap 70 */ scroll-margin-block-start: calc(var(--hd-h) + var(--sp-20)); /* 앵커 여백 */ } .sol-sec--ruled { padding-block-start: var(--sol-sp-150); } /* border-top + pt150 */ .sol-rule { /* 시안 stroke 를 요소화(divider-draw-x 대상) */ position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 1px; background: var(--df-line-w10); } .sol-sec__head { display: grid; gap: var(--sp-20); justify-items: start; max-inline-size: 100%; } .sol-sec__label { font-weight: 700; font-size: var(--fs-16); line-height: 1; color: var(--df-cyan); } .sol-sec__title { font-weight: 700; font-size: var(--fs-80); line-height: 1; color: var(--df-white); max-inline-size: 100%; } /* 타이틀 전용 메트릭 보정 서브셋 — 동일 Pretendard Bold 글리프(라이선스 동봉), ascent+descent 를 1.0em(=시안 line-box 80)으로 재선언한다. 오버라이드 비율은 원본 hhea(1950/-494, upm 2048)의 베이스라인 위치(0.85547em)를 그대로 보존하도록 계산했으므로 글리프 위치·모양은 픽셀 단위로 불변이고, 측정 상자만 시안과 같아진다(F2). 대상 글리프: Automotive/USV/UGV/Waves/AMR (1.9KB). */ @font-face { font-family: 'Pretendard SolTitle'; src: url(data:font/woff2;base64,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) format('woff2'); font-weight: 700; ascent-override: 85.547%; descent-override: 14.453%; line-gap-override: 0%; font-display: block; } .sol-sec__title { font-family: 'Pretendard SolTitle', var(--df-font); } /* 타이틀 잉크 박스를 시안 line-box(80 = lh 1.0)와 일치시킨다 — 인라인 텍스트/분할 조각의 글리프 상자는 폰트 메트릭(≈1.19em)으로 측정돼 시안 80 대비 +15px 로 잰다(F2). inline-block + v-align top 은 상자를 line-box 로 만들고 줄 높이는 바꾸지 않는다(시각 불변). */ .sol-sec__title .word, .sol-sec__title .line, .sol-ib { display: inline-block; vertical-align: top; } .sol-blk { display: block; } /* 다행 텍스트 잉크 = line-box 합(시안 h 기준 — F2) */ .sol-sec__sub { font-weight: 300; font-size: var(--fs-30); line-height: 1; color: var(--df-cyan); } /* 영상 (1330×748.3 · aspect 958:539) */ .sol-video { position: relative; overflow: clip; aspect-ratio: 958 / 539; } .sol-video__frame { position: absolute; inset: 0; overflow: clip; } .sol-video__media, .sol-video > img, .sol-video > video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; display: block; cursor: pointer; z-index: 1; } .sol-video__play, .sol-viz__play { position: absolute; inset: 0; margin: auto; z-index: 2; pointer-events: none; /* 클릭은 video 로 통과 */ inline-size: clamp(56px, 4.1667vw, 80px); block-size: clamp(56px, 4.1667vw, 80px); } .sol-video__play-ic, .sol-viz__play-ic { inline-size: 100%; block-size: 100%; } .sol-video.is-played .sol-video__play, .sol-viz.is-played .sol-viz__play { display: none; } /* 최초 재생 후 영구 숨김 */ .sol-sec__body { display: grid; gap: var(--sp-100); } /* 221:110 gap 100 */ /* 시안 노드 순서 = [features, gallery, viz] (F3) — DOM 은 시안 순서, 시각 순서(viz 가 갤러리 위)는 grid order 로 복원한다 */ .sol-sec__body > .sol-skewwrap { order: 3; } .sol-sec__body > .sol-gal { order: 4; } .sol-sec__intro { font-weight: 400; font-size: var(--fs-18); line-height: 1.8; color: var(--df-white); } /* Key Features — 좌 350 고정 + 우 980 리스트 */ .sol-feat, .sol-gal { display: grid; grid-template-columns: var(--sol-label-col) minmax(0, 1fr); } .sol-colhead { font-weight: 600; font-size: var(--sol-fs-28); line-height: 1.4; color: var(--df-cyan); } .sol-feat__list { display: grid; gap: var(--sp-50); } /* gap 50 */ .sol-feat__item { padding-block-end: var(--sp-50); border-block-end: 1px solid var(--df-line-w20); } /* pb50 */ .sol-feat__item:last-child { padding-block-end: 0; border-block-end: 0; } .sol-feat__item h4 { font-weight: 700; font-size: var(--sol-fs-26); line-height: 1; color: var(--df-white); } .sol-feat__item p { margin-block-start: clamp(6px, 0.5208vw, 10px); font-weight: 400; font-size: var(--fs-18); line-height: 1.8; color: var(--df-white); } /* 레이더 데이터 캡처 (1330×717.7 · aspect 1892:1021) */ .sol-viz { position: relative; overflow: clip; aspect-ratio: 1892 / 1021; } .sol-viz__frame { position: absolute; inset: 0; overflow: clip; } .sol-viz__media, .sol-viz > img, .sol-viz > video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; display: block; cursor: pointer; z-index: 1; } /* 갤러리 — 좌 헤더 + 썸네일 4개(230×150 gap20) */ .sol-gal { position: relative; } .sol-gal__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-20); } .sol-gal__thumb { position: relative; overflow: clip; aspect-ratio: 230 / 150; } .sol-gal__thumb > img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; } /* hover-media-follow 프리뷰 — 호버 중에만 표시(정지 상태 시안 불변, data-invented) */ .sol-gal__preview { position: absolute; inset-block-start: 0; inset-inline-end: 0; inline-size: clamp(200px, 17.7083vw, 340px); aspect-ratio: 230 / 150; overflow: clip; border-radius: var(--r-6); opacity: 0; scale: 0.94; pointer-events: none; z-index: 2; transition: opacity .3s var(--ease-out-quart), scale .3s var(--ease-out-quart); background: var(--df-ph); } .sol-gal__preview.is-visible { opacity: 1; scale: 1; } @media (hover: none), (pointer: coarse) { .sol-gal__preview { display: none; } /* 터치 환경: hover-media-follow 자체가 꺼짐 — 요소도 제거 */ } .sol-gal__preview-fill { position: absolute; inset: 0; background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; } /* ══ Single Core Engine + Proven Track Record (221:283) ═════════════════ */ .sol-engine { position: relative; display: grid; gap: var(--sol-sp-150); /* 블록 gap 150 */ padding-block: var(--sp-100); /* py 100 */ } .sol-engine__block { display: grid; gap: var(--sp-50); } /* gap 50 */ .sol-engine__head { display: grid; gap: var(--sp-20); } .sol-engine__title { font-weight: 700; font-size: var(--fs-50); line-height: 1.4; color: var(--df-white); max-inline-size: 100%; } .sol-engine__body { font-weight: 400; font-size: var(--fs-18); line-height: 1.8; color: var(--df-white); } .sol-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sol-sp-70); } /* 3열 gap70 */ .sol-trust__card { display: grid; gap: var(--sp-20); justify-items: stretch; text-align: center; } /* 텍스트 = 카드 풀폭(시안 486.67 — F2) */ .sol-trust__ic { inline-size: clamp(44px, 2.9167vw, 56px); aspect-ratio: 1; background-size: contain; justify-self: center; } /* 56 svg */ .sol-trust__card h3 { font-weight: 700; font-size: var(--sol-fs-28); line-height: 1.4; color: var(--df-white); } .sol-trust__card p { font-weight: 400; font-size: var(--fs-18); line-height: 1.8; color: var(--df-white); } /* ══ 맨 위로 버튼 (data-invented — 공통 예약 scroll-to-top-smooth) ═══════ */ .sol-top { position: fixed; inset-block-end: var(--sp-30); inset-inline-end: var(--sp-30); z-index: 90; inline-size: clamp(44px, 2.9167vw, 56px); aspect-ratio: 1; border-radius: 50%; background: var(--df-navy-2); border: 1px solid var(--df-line-w20); display: grid; place-items: center; line-height: 0; /* sol-top 전용 — 상속 line-height 간섭 차단 */ } .sol-top__ar { display: block; inline-size: 30%; aspect-ratio: 1; margin-block-start: 18%; /* border chevron 시각 중심 — ab-top 등과 동일 */ border-block-start: 2px solid var(--df-white); border-inline-start: 2px solid var(--df-white); transform: rotate(45deg); } /* ── 시안 잉크박스 정합(hug 폭·자간) — 설계폭(≥1440)에서만. 그 아래는 자연 줄바꿈(함정 61) ── */ @media (min-width: 1440px) { .sol-hero__twrap { inline-size: max-content; } /* hug — 폭 박지 않기 */ .sol-hero__body { letter-spacing: -0.01em; } /* 시안 h288(=8행) 실측 정합 — Figma ls 미기재 */ .sol-sec__head { inline-size: fit-content; } /* 시안 title 프레임 = hug(874/824/1019/746/932 — F2) */ .sol-sec__title { inline-size: max-content; } .sol-engine__title { inline-size: max-content; } } /* ════════════════════════════ 반응형 ════════════════════════════════════ 1440 / 1280: 유동 축소로 흡수(칸수 불변). 1024: 히어로·라벨열 스택 + 스티키 메뉴 가로 바. 768: 밴드 1칼럼 · 갤러리 2칸 · 트러스트 1칸. */ @media (width < 1280px) { .sol-hero__aside { padding-block-start: clamp(0px, 3vw, 60px); } } @media (width < 1024px) { .sol-hero__row { grid-template-columns: 1fr; gap: var(--sp-40); } .sol-hero__aside { padding-block-start: 0; } .sol-main__cols { grid-template-columns: 1fr; gap: var(--sp-40); } .sol-menu { inset-block-start: var(--hd-h); z-index: 5; --sol-menu-dock-gap: var(--sp-20); /* 헤더 숨김 시 상단 여백 */ } .sol-menu__list { display: flex; flex-wrap: wrap; } /* 좁은 폭: 줄바꿈 — 스크롤 밖 잘림 금지(T2) */ .sol-menu__pill { padding-inline: var(--sp-20); white-space: nowrap; } .sol-feat, .sol-gal { grid-template-columns: 1fr; gap: var(--sp-30); } } @media (width < 768px) { .sol-band__cols { grid-template-columns: 1fr; min-block-size: 0; } /* 5의 약수=1 */ .sol-band__li:not(:last-child) { border-inline-end: 0; border-block-end: 1px solid var(--df-line-w20); } .sol-band__col { padding: var(--sp-30) var(--fl-gutter); } .sol-band__layer { position: absolute; } /* 배경은 계속 풀블리드 */ .sol-gal__list { grid-template-columns: repeat(2, 1fr); } /* 4의 약수=2 */ .sol-trust { grid-template-columns: 1fr; } /* 3의 약수=1 */ } @media (width < 480px) { .sol-sec__sub { line-height: 1.3; } /* 좁은 폭 줄바꿈 가독 */ /* 모바일에선 스티키 산업 메뉴가 하단을 쓴다 — 발명 요소(sol-top)가 AMR 필을 덮는 가림 실측 → 우리가 만든 요소가 시안 요소를 가리면 우리 요소가 물러난다. */ .sol-top { display: none; } } } /* 상호작용 전이 — 자산 배선으로 요소 수가 늘며 전이 밀도가 내려갔다(C4). 호버 대상(밴드 칼럼·갤러리·영상·스티키 필)과 그 미디어에 색/그림자 전이를 준다. transform/opacity 는 GSAP 채널이라 제외(표준 규칙). */ @layer components { .sol-band__col, .sol-gal__item, .sol-gal__item img, .sol-video, .sol-video img, .sol-video video, .sol-menu a, .sol-menu li, .sol-viz, .sol-viz img, .sol-viz video, .sol-trust__card, .sol-band__layer, .sol-sec__head, .sol-video__play-ic { transition: background-color .28s var(--ease-out-quart), color .28s var(--ease-out-quart), border-color .28s var(--ease-out-quart), box-shadow .34s var(--ease-out-quart), outline-color .18s ease-out, filter .3s var(--ease-out-quart), opacity .55s var(--ease-out-quart); } @media (prefers-reduced-motion: reduce) { .sol-band__col, .sol-gal__item, .sol-gal__item img, .sol-video, .sol-video img, .sol-video video, .sol-menu a, .sol-menu li, .sol-viz, .sol-viz img, .sol-viz video, .sol-trust__card, .sol-band__layer, .sol-sec__head, .sol-video__play-ic { transition: none; } } } /* 맨위로 버튼은 JS 전용 발명 요소 — JS 없으면 기능이 없으므로 숨긴다(A11Y11) */ html:not(.js-motion) .sol-top { display: none; }