.cmpa985-official-poster { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; max-height: none !important; object-fit: contain !important; } /* The captured imweb frame and hover sibling both carry fixed 1310×1846 geometry. Server markers make their correction deterministic even after an administrator changes the served poster URL. */ [data-kia-official-poster-frame="responsive"].cmpa985-official-poster-frame { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; } [data-kia-official-poster-frame="responsive"] > [data-kia-official-poster="responsive"] { aspect-ratio: 3555 / 5008; } [data-kia-official-poster-frame="responsive"] > ._hover_image.hover_img { display: none !important; width: 0 !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; background-image: none !important; pointer-events: none !important; } [data-kia-briefing="/2025_page2"] .section_bg { background-position: left center !important; } /* AC-13 — administrator-backed FAQ, compatible with the existing accordion rhythm. */ .kia-faq { box-sizing: border-box; padding: 88px 24px; background: #fff; color: #07141e; } .kia-faq__inner { width: min(1120px, 100%); margin: 0 auto; } .kia-faq header { margin-bottom: 32px; text-align: center; } .kia-faq header p { margin: 0 0 8px; color: #66777f; font-size: 13px; font-weight: 800; letter-spacing: .14em; } .kia-faq header h2 { margin: 0; font-size: clamp(28px, 3vw, 42px); line-height: 1.25; } .kia-faq__item { border-top: 1px solid #d9dfe2; } .kia-faq__item:last-child { border-bottom: 1px solid #d9dfe2; } .kia-faq__item summary { box-sizing: border-box; min-height: 64px; padding: 18px 8px; display: flex; align-items: center; justify-content: space-between; gap: 18px; font-size: 17px; font-weight: 700; line-height: 1.5; cursor: pointer; } .kia-faq__item summary::-webkit-details-marker { display: none; } .kia-faq__item summary span:last-child { flex: 0 0 auto; font-size: 26px; font-weight: 300; transition: transform .2s ease; } .kia-faq__item[open] summary span:last-child { transform: rotate(45deg); } .kia-faq__answer { padding: 0 8px 24px; color: #3f4c53; font-size: 15px; line-height: 1.75; } .kia-faq__answer p { margin: 0; white-space: pre-wrap; } .kia-faq__answer p + p { margin-top: 8px; } .kia-faq--error { padding-block: 48px; text-align: center; } @media (max-width: 767px) { .kia-faq { padding: 60px 16px; } .kia-faq__item summary { min-height: 56px; padding: 16px 4px; font-size: 15px; } .kia-faq__answer { padding: 0 4px 20px; font-size: 14px; } } /* kia-home-faq-relocation-20260816 — 홈으로 모은 제5회 공모 개요 블록. 가로 스크롤이 나지 않도록 폭은 전부 min(px, 100%) 이고, 긴 유의사항 줄은 줄바꿈한다. */ .kia-contest-details { box-sizing: border-box; padding: 88px 24px 0; background: #fff; color: #07141e; } .kia-contest-details__inner { width: min(1120px, 100%); margin: 0 auto; } .kia-contest-details header { margin-bottom: 32px; text-align: center; } .kia-contest-details header p { margin: 0 0 8px; color: #66777f; font-size: 13px; font-weight: 800; letter-spacing: .14em; } .kia-contest-details header h2 { margin: 0; font-size: clamp(28px, 3vw, 42px); line-height: 1.25; } .kia-contest-details__block { padding: 24px 0; border-top: 1px solid #d9dfe2; } .kia-contest-details__block:last-child { border-bottom: 1px solid #d9dfe2; } .kia-contest-details__block h3 { margin: 0 0 12px; font-size: 20px; font-weight: 700; line-height: 1.4; } .kia-contest-details__lead { margin: 0; color: #3f4c53; font-size: 17px; line-height: 1.75; overflow-wrap: anywhere; } .kia-contest-details__divisions { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; } .kia-contest-details__divisions li { display: grid; gap: 4px; } .kia-contest-details__divisions strong { font-size: 17px; font-weight: 700; line-height: 1.6; } .kia-contest-details__divisions span { color: #3f4c53; font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; } .kia-contest-details__lines { margin: 0; padding: 0; list-style: none; color: #3f4c53; font-size: 15px; line-height: 1.75; } .kia-contest-details__lines li { overflow-wrap: anywhere; } .kia-contest-details__lines li + li { margin-top: 6px; } .kia-contest-details__nested { padding-left: 14px; } @media (max-width: 767px) { .kia-contest-details { padding: 60px 16px 0; } .kia-contest-details__block h3 { font-size: 18px; } .kia-contest-details__lead { font-size: 15px; } .kia-contest-details__divisions strong { font-size: 15px; } .kia-contest-details__divisions span, .kia-contest-details__lines { font-size: 14px; } } /* /event 는 제4회(2025) 기록이다. 본문 첫 화면에서 회차가 즉시 드러나야 한다. */ .cmpa1150-archive-banner { box-sizing: border-box; display: block; padding: 14px 20px; background: #07141e; color: #fff; font-family: Inter, "Apple SD Gothic Neo", sans-serif; text-align: center; } .cmpa1150-archive-banner strong { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 800; letter-spacing: .16em; } .cmpa1150-archive-banner span { display: block; font-size: 13px; font-weight: 600; line-height: 1.6; color: #c9d3d9; } .cmpa1150-archive-banner a { color: #fff; text-decoration: underline; } /* 확정된 공식 행사 2건만 렌더한다. 미확정 값은 "추후 안내"로 표기된다. */ .cmpa1150-official-events strong { letter-spacing: .06em; } .cmpa985-past-archive { position: relative !important; background: #edf0f1 !important; } .cmpa985-past-archive__heading { box-sizing: border-box; max-width: 1340px; margin: 0 auto; padding: 34px 12px 18px; text-align: left; font-family: Inter, "Apple SD Gothic Neo", sans-serif; } .cmpa985-past-archive__heading p { margin: 0 0 5px !important; color: #6b777c !important; font-size: 11px !important; font-weight: 800 !important; line-height: 1.2 !important; letter-spacing: .16em !important; } .cmpa985-past-archive__heading h2 { margin: 0 !important; color: #07141e !important; font-size: 28px !important; font-weight: 800 !important; line-height: 1.25 !important; letter-spacing: -.04em !important; } .cmpa985-past-archive__heading span { display: block; margin-top: 6px; color: #657177; font-size: 13px; font-weight: 600; } .cmpa985-archive-card { position: relative !important; } .cmpa985-archive-card__badge { position: absolute; top: 14px; left: 14px; z-index: 5; padding: 7px 9px; border-radius: 6px; background: #07141e; color: #fff; font: 800 10px/1 Inter, "Apple SD Gothic Neo", sans-serif; letter-spacing: .04em; pointer-events: none; } @media(max-width: 991px) { .cmpa985-past-archive__heading { padding: 26px 20px 14px; } .cmpa985-past-archive__heading h2 { font-size: 23px !important; } } /* CMPA-1158 F1: Hide old 2025 event ad banner (접수만 해도, 400명에게 행운이 / ~2025.10.31). Image text is baked into the asset — DOM string check passes but pixel is still exposed. */ #w202510201f4b765ea6b32, #s202510203ccaf1896c1a4 { display: none !important; } /* CMPA-1201: Hide standalone Contact/notice/event/contect from desktop snapshot nav viewport. public-upgrade.js injects 커뮤니티 dropdown that groups these three under one item. Also hide 회원 from all snapshot navs — 접수하기 CTA replaces the member flow. */ #w20241218287d69ad6bd19 .viewport-nav.desktop > li:has(> a[data-url="Contact"]), #w20241218287d69ad6bd19 .viewport-nav.desktop > li:has(> a[data-url="notice"]), #w20241218287d69ad6bd19 .viewport-nav.desktop > li:has(> a[data-url="event"]), #w20241218287d69ad6bd19 .viewport-nav.desktop > li:has(> a[data-url="contect"]), #w20241218287d69ad6bd19 .viewport-nav.desktop > li:has(> a[data-url="member"]), #w202412178335ecef0163d .viewport-nav.desktop > li:has(> a[data-url="Contact"]), #w202412178335ecef0163d .viewport-nav.desktop > li:has(> a[data-url="notice"]), #w202412178335ecef0163d .viewport-nav.desktop > li:has(> a[data-url="event"]), #w202412178335ecef0163d .viewport-nav.desktop > li:has(> a[data-url="contect"]), #w202412178335ecef0163d .viewport-nav.desktop > li:has(> a[data-url="member"]) { display: none !important; } /* CMPA-1201: `:has()`-free fallback for the hide rules above — public-upgrade.js tags the same items with this class, so a browser that drops the `:has()` rules still hides them. */ .cmpa1201-nav-hidden { display: none !important; } /* CMPA-1201: Hide 회원 from snapshot mobile slide menu and inline header button */ #mobile_slide_menu_wrap li:has(a[data-url="member"]) { display: none !important; } #inline_header_normal a[href="/member"], #inline_header_fixed a[href="/member"] { display: none !important; } /* /assets/phase9/runtime.js injects 회원 entries that carry no `data-url`, so the rules above miss them. Hide the anchor itself as well — public-upgrade.js retags the header button it converts to 접수하기 as `apply`, so only genuine 회원 entries stay hidden, and a JS failure fails closed. */ #mobile_slide_menu_wrap a[data-phase9-public-nav="member"], #inline_header_normal a[data-phase9-public-nav="member"], #inline_header_fixed a[data-phase9-public-nav="member"] { display: none !important; } /* CMPA-1201 BLOCK-1: snapshot header 3-zone — brand left / menu viewport-centre / CTA right. The imweb snapshot header is a display:table row whose RIGHT column holds both the nav and the CTA button widget, so the nav renders ~230px right of centre at 1440 and ~176px at 1280. globals.css `.desktop-nav{position:absolute;left:50%}` only styles React SiteShell and never reaches this HTML, so the snapshot side needs its own rule. `.inline-inside` is position:relative and spans the full viewport (x=0, w=100vw), so we neutralise the intermediate positioned ancestors to make it the nav's containing block and centre the nav against it. Scoped to >=992px: that is exactly where the captured imweb CSS swaps `#inline_header_mobile` (hamburger) for the horizontal nav, measured at 991 vs 992. */ @media (min-width: 992px) { #inline_header_normal .inline-section, #inline_header_normal .inline-col-group, #inline_header_normal .inline-col, #inline_header_fixed .inline-section, #inline_header_fixed .inline-col-group, #inline_header_fixed .inline-col { position: static !important; } #inline_header_normal .viewport-nav.desktop._main_menu, #inline_header_fixed .viewport-nav.desktop._main_menu { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; margin: 0 !important; } /* The nav leaves the table flow above, so pin the CTA column to the right edge. */ #inline_header_normal .inline-col-group-right, #inline_header_fixed .inline-col-group-right { text-align: right !important; } } /* CMPA-1201 BLOCK-3: make the snapshot mobile slide menu actually reach the screen. The captured markup parks the drawer off-viewport — the wrapper is `position:fixed; left:100%; width:0; overflow-x:hidden` and the panel inside it sits at `left:-300px` with a compensating `translateX(300px)`. imweb's own open animation (which clears that transform) is JS/CSS that the static snapshot never captured, so `/assets/phase9/runtime.js` toggles `.slide_open` and nothing moves: at 390 every item rendered at x=390..690, i.e. 5 부문 · 커뮤니티 3항목 · 접수하기 were all unreachable. Give the open drawer a real 300px box at the right edge and drop the offset. */ #mobile_slide_menu_wrap.slide_open { left: auto !important; right: 0 !important; width: 300px !important; max-width: 100% !important; } #mobile_slide_menu_wrap.slide_open #mobile_slide_menu { left: 0 !important; right: 0 !important; width: 100% !important; transform: none !important; } #mobile_slide_menu_wrap #mobile_slide_menu { transition: transform 0.25s ease; } .kia-mobile-menu-close { position: absolute; z-index: 10; top: 8px; right: 8px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: transparent; color: #111; font-size: 32px; line-height: 1; cursor: pointer; } #mobile_slide_menu_wrap .viewport-nav.mobile._menu_wrap { padding-top: 56px; } /* kia-shared-gnb-20260805 — 헤더 루트가 없는 스냅샷 라우트(/22·/27)에 계약에서 직접 렌더한 공유 GNB. 시각 처리는 `/` 기준과 같다: 흰 배경 + 어두운 잉크(#1a1e24) + 56px 높이, 가운데 정렬 메뉴, 우측 CTA 2개, 900px 이하에서 햄버거 + 오른쪽 드로어. lib/public-gnb.ts renderPublicGnbMarkup() 이 내보내는 마크업만 대상으로 한다. */ /* kia-gnb-exact-parity-20260806 — 높이/여백/배경/로고/메뉴 타이포/CTA 처리는 lib/public-gnb-visual.ts 계약이 소유한다(홈 실측값). 여기에 다시 적으면 사본이 두 벌이 된다. */ .kia-gnb { box-sizing: border-box; position: relative; z-index: 100000; display: flex; align-items: center; font-family: Inter, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; color: #1a1e24; } .kia-gnb * { box-sizing: border-box; } .kia-gnb a { text-decoration: none; } .kia-gnb-brand { display: flex; align-items: center; flex-shrink: 0; } .kia-gnb-brand img { display: block; } .kia-gnb-nav { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; font-weight: 700; } .kia-gnb-link { color: #1a1e24; font: inherit; font-weight: 700; white-space: nowrap; background: none; border: 0; padding: 0; cursor: pointer; transition: opacity .3s; } .kia-gnb-link:hover { opacity: .55; } .kia-gnb-link.is-active { opacity: 1; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; } .kia-gnb-community { position: relative; display: flex; align-items: center; } .kia-gnb-cta { margin-left: auto; display: flex; align-items: center; flex-shrink: 0; } /* 1차/2차 CTA 처리(채움/잉크/테두리/여백/타이포/높이)는 계약이 소유한다. 예전 판의 `border: 1px solid currentColor` 외곽선 1차 CTA 가 홈과 갈라진 지점이다. */ .kia-gnb .cta-apply, .kia-gnb .cta-pv5 { font-weight: 700; white-space: nowrap; } /* 햄버거 상자/글리프/정렬은 lib/public-gnb-visual.ts 계약이 소유한다(홈 실측: 44x44, padding 10, Black Tie Light U+F000, ink rgb(33,33,33), 오른쪽 inset 정렬). 여기에 40x40 + 2px 막대 사본을 다시 두면 그 순간 홈과 갈라진다. */ /* kia-gnb-exact-parity-20260806 (v3): 드로어 패널의 폭/여백/표면/세로 채움과 CTA 행 처리는 lib/public-gnb-visual.ts 계약이 소유한다(홈 실측: 300px, padding 0, 흰 표면, 행 41px). 여기 남은 것은 계약이 소유하지 않는 표시/전환/스택 순서뿐이다. 같은 값을 여기 다시 적으면 그 순간 사본이 두 벌이 되고 한쪽만 바뀔 수 있다. */ .kia-gnb-drawer { display: none; position: fixed; z-index: 100002; right: 0; color: #1a1e24; font-family: Inter, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; transform: translateX(105%); transition: transform .3s; overflow-y: auto; } .kia-gnb-drawer.is-open { transform: none; } .kia-gnb-drawer nav { display: flex; flex-direction: column; } /* kia-gnb-exact-parity-20260806 (v4): 드로어 **행 전체**(최상위·커뮤니티 라벨/자식·CTA)의 display·padding·테두리·타이포·잉크·active 처리·행 간격은 lib/public-gnb-visual.ts 계약이 소유한다. 예전에 여기 있던 `display:flex; justify-content:space-between` + 15px/700 + 1px 아래 테두리 + 밑줄 active 는 전부 홈 드로어에 없는 처리였고, 그 사본이 있는 한 계약이 무엇을 선언하든 이 파일과 갈라질 수 있었다. 닫기 `×`(.kia-gnb-drawer-close)는 요소 자체가 사라졌다 — 홈 패널에는 보이는 닫기 컨트롤이 0개다(실측). 닫기는 Escape · 트리거 · 드로어 안 링크가 담당한다. kia-gnb-remediation-v5 (A2): `.kia-gnb-backdrop` 규칙도 사라졌다. 요소 자체를 더 이상 그리지 않기 때문이다. v4 의 그 규칙은 `inset:0` 짜리 전체 화면 상호작용 대상을 만들었고, 색이 투명이라 "어둡게 칠하지 않음" 단언은 통과했지만 **바깥 탭이 드로어를 닫는** 동작이 홈과 달랐다. 홈에는 그런 히트 타깃이 없다. */ @media (max-width: 991px) { /* 높이/여백/햄버거는 계약이 준다(홈 모바일 헤더 = 60px / inset 20 / 버튼 44). 여기서는 계약이 소유하지 않는 표면(데스크톱 메뉴·CTA 묶음·드로어)의 표시 전환만 한다. */ .kia-gnb-nav, .kia-gnb-cta { display: none; } .kia-gnb-drawer { display: block; } } /* kia-shared-gnb-20260805: 계약 fail-closed. public-upgrade.js 가 실행됐는데 주입된 계약 payload 가 없거나 깨졌으면 메뉴를 그리지 않는다. 그 경우 스냅샷 원문의 낡은 nav 도 노출하지 않는다 — 틀린 메뉴보다 없는 메뉴가 낫다. (스크립트가 아예 실행되지 않으면 이 속성이 붙지 않아 기존 동작이 그대로 유지된다.) */ html[data-kia-gnb-source="missing"] .viewport-nav, html[data-kia-gnb-source="missing"] #mobile_slide_menu_wrap, html[data-kia-gnb-source="missing"] .kia-gnb-nav, html[data-kia-gnb-source="missing"] .kia-gnb-drawer { display: none !important; } /* CMPA-1201: 커뮤니티 dropdown positioning and interaction in snapshot desktop nav. */ .cmpa1201-community-item { position: relative !important; } .cmpa1201-community-menu { display: none !important; position: absolute !important; top: 100% !important; left: 50% !important; transform: translateX(-50%) !important; background: #fff !important; border: 1px solid #e5e7eb !important; box-shadow: 0 4px 20px rgba(0, 0, 0, .1) !important; min-width: 120px !important; z-index: 2001 !important; list-style: none !important; margin: 0 !important; padding: 4px 0 !important; white-space: nowrap !important; } .cmpa1201-community-item:hover .cmpa1201-community-menu, .cmpa1201-community-item:focus-within .cmpa1201-community-menu, .cmpa1201-community-item.cmpa1201-community-open .cmpa1201-community-menu { display: block !important; } .cmpa1201-community-menu li { display: block !important; } .cmpa1201-community-menu a { display: block !important; padding: 10px 16px !important; font-size: 14px !important; font-weight: 600 !important; transition: background .15s !important; } .cmpa1201-community-menu a:hover { background: #f8f8f8 !important; } /* kia-shared-gnb-20260805: 흰 헤더 위 어두운 메뉴 잉크 통일. 오버레이 라우트(/2025_page1~5, /Contact, /21, /old_guide, /old_index)는 스냅샷에 메뉴 잉크가 흰색으로 구워져 있어, body 의 new_header_overlay 를 떼어 배경을 흰색으로 되돌려도 글자가 흰색으로 남아 읽을 수 없었다. `/` 기준 잉크(#1a1e24)로 맞춘다. 자체 배경을 가진 CTA 버튼(PV5 보러가기 = navy 바탕 흰 글자)은 대상에서 제외한다. */ #inline_header_normal .viewport-nav.desktop a, #inline_header_normal .viewport-nav.desktop a .plain_name, #inline_header_fixed .viewport-nav.desktop a, #inline_header_fixed .viewport-nav.desktop a .plain_name, #inline_header_normal .cmpa1201-community-menu a, #inline_header_fixed .cmpa1201-community-menu a { color: #1a1e24 !important; } /* CMPA-1201: 커뮤니티 label and indented sub-items in snapshot mobile slide menu. */ .cmpa1201-community-label-item { border-bottom: none !important; padding: 0 !important; } .cmpa1201-community-label { box-sizing: border-box; display: flex !important; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; padding: 10px 20px !important; border: 0; background: transparent; font-size: 14px !important; font-weight: 400 !important; letter-spacing: normal !important; /* kia-shared-gnb-20260805: #828282 는 흰 배경 대비 3.84:1 로 같은 드로어의 다른 메뉴 항목(#1a1e24)보다 흐리고 WCAG AA(4.5:1)에도 못 미쳤다. React 셸의 커뮤니티 라벨과 같은 잉크로 맞춘다. 크기/자간 등 그룹 헤딩 성격은 그대로 둔다. */ color: #1a1e24 !important; text-transform: none !important; cursor: pointer; } .cmpa1201-community-arrow { font-size: 22px; transition: transform .2s ease; } .cmpa1201-community-label[aria-expanded="true"] .cmpa1201-community-arrow { transform: rotate(90deg); } .cmpa1201-community-sub[hidden] { display: none !important; } .cmpa1201-community-sub > a { padding-left: 16px !important; } /* CMPA-1158 F2: Fix phase9 snapshot header nav overflow at 1200–1440px desktop. CMPA-1201: Updated comment — 회원/접수하기 inline buttons removed. Now 7 visible items (5부문+설명회&네트워킹+커뮤니티). Tight padding still needed at narrow desktop. */ @media(min-width: 992px) and (max-width: 1500px) { #w20241218287d69ad6bd19 .viewport-nav > li.dropdown > a, #w20241218287d69ad6bd19 .viewport-nav > li.dropdown > .notranslate a, #w202412178335ecef0163d .viewport-nav > li.dropdown > a, #w202412178335ecef0163d .viewport-nav > li.dropdown > .notranslate a { padding-left: 10px !important; padding-right: 10px !important; font-size: 13px !important; letter-spacing: 0 !important; } #inline_header_normal [data-widget-type="inline_button"] .btn, #inline_header_fixed [data-widget-type="inline_button"] .btn { padding: 6px 10px !important; font-size: 12px !important; } } /* CMPA-1158 F3: Strengthen dark overlay on mobile briefing section to prevent poster-image text bleed-through at section bottom. section_bg (background-image) is hidden; the solid dark overlay becomes opaque enough that the poster's embedded text cannot overlap the EVENT 01/02 HTML text. */ #s202509107112073352271 > .section_bg { display: none !important; } #s202509107112073352271 > .section_bg_color { background-color: rgb(9, 20, 30) !important; opacity: 1 !important; -ms-filter: none !important; filter: none !important; } /* kia-phase1-20260805: 히어로 아래 공용 섹션 — 아카이브 롤링 갤러리 + 이벤트 영상 배너. 서버(lib/kiaphase1/sections.ts)가 심는 마크업 전용 스타일이다. imweb 위젯 CSS 가 상속으로 새어 들어오므로 폰트/여백은 여기서 명시적으로 다시 선언한다. */ .kia-below-hero { background: #fff; font-family: Inter, "Apple SD Gothic Neo", sans-serif; color: #07141e; } .kia-below-hero *, .kia-below-hero *::before, .kia-below-hero *::after { box-sizing: border-box; } /* AC-01 — one shared five-row division contract on home and every division route. */ .kia-divisions { /* 다음 설명회/네트워킹 섹션과 경계가 확실히 분리되도록 하단을 상단보다 넓게 둔다. */ padding: 80px 24px 112px; background: #fff; } /* Scope B-3 — 제목 두 줄이 없는 변형(다섯 부문 라우트). header 를 아예 렌더하지 않으므로 header 의 28px margin 은 애초에 생기지 않는다. 상단 여백만 조금 좁혀, 제목이 있던 자리가 빈 띠로 남지 않고 5행이 바로 시작하는 것으로 읽히게 한다. */ .kia-divisions[data-kia-division-heading="omitted"] { padding-top: 56px; } .kia-divisions__inner { width: min(1292px, 100%); margin: 0 auto; } .kia-divisions header { margin-bottom: 28px; text-align: center; } .kia-divisions header p { margin: 0 0 8px; color: #66777f; font-size: 12px; font-weight: 800; letter-spacing: .16em; } .kia-divisions header h2 { margin: 0; color: #07141e; font-size: clamp(28px, 3vw, 40px); line-height: 1.2; } .kia-divisions ol { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .kia-divisions__row a { min-height: 92px; display: grid; grid-template-columns: minmax(150px, .28fr) minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 20px 24px; border: 1px solid #d8dee2; color: #07141e; text-decoration: none; transition: background-color .2s ease, color .2s ease; } .kia-divisions__row a:hover { background: #f2f5f6; } .kia-divisions__row a:focus-visible { outline: 3px solid #07141e; outline-offset: 2px; } .kia-divisions__row strong { font-size: 22px; line-height: 1.3; } .kia-divisions__row span { min-width: 0; color: #52656f; font-size: 15px; line-height: 1.55; } .kia-divisions__row em { display: inline-flex; min-height: 44px; align-items: center; gap: 8px; padding: 0 16px; background: #07141e; color: #fff; font-size: 14px; font-style: normal; font-weight: 800; } .kia-divisions__row em span { color: inherit; } @media (max-width: 767px) { .kia-divisions { padding: 52px 16px 72px; } .kia-divisions[data-kia-division-heading="omitted"] { padding-top: 36px; } .kia-divisions__row a { grid-template-columns: 1fr; gap: 8px; padding: 20px; } .kia-divisions__row strong { font-size: 20px; } .kia-divisions__row em { width: 100%; justify-content: space-between; margin-top: 6px; } } /* AC-02 — division-specific winner image/PDF carousel. 추가수정 AC-03 — 이 캐러셀은 히어로 아래가 아니라 legacy 수상작 카드가 있던 imweb 섹션 **안**에 들어간다. 그래서 자체 배경(흰색)과 상단 여백을 갖지 않는다: 그 섹션의 배경과 제목/부제가 그대로 보이고, 우리는 카드 행만 대체한다. */ .kia-winners { --kia-winner-count: 1; --kia-winner-per-view: 1; --kia-winner-gap: 20px; --kia-winner-nav-size: 44px; --kia-winner-nav-gap: 14px; padding: 0 24px; background: transparent; } .kia-winners--empty { padding: 0; } .kia-winners__inner { position: relative; width: min(1292px, 100%); margin: 0 auto; } /* 원형 버튼은 이미지 위에 얹히지 않고 이미지 바깥 자리를 실제로 차지한다(추가수정 AC-01 규칙). */ .kia-winners__stage { display: flex; align-items: flex-start; gap: var(--kia-winner-nav-gap); } .kia-winners__viewport { flex: 1 1 auto; min-width: 0; overflow: hidden; } .kia-winners__track { display: flex; gap: var(--kia-winner-gap); margin: 0; padding: 0; list-style: none; will-change: transform; } .kia-winners__item { flex: 0 0 calc((100% - (var(--kia-winner-per-view) - 1) * var(--kia-winner-gap)) / var(--kia-winner-per-view)); min-width: 0; } .kia-winners__card { height: 100%; display: grid; grid-template-rows: auto auto 1fr; gap: 12px; } .kia-winners__card img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; background: #e7eaec; } .kia-winners__card h3 { margin: 0; color: #07141e; font-size: 18px; line-height: 1.45; } /* Scope A-5 — 카드 CTA 는 다른 공개 버튼과 같은 반전 규칙을 쓴다: 기본 어두운 배경 + 흰 글자, hover/focus 에서 흰 배경 + 어두운 글자. 테두리를 `border` 가 아니라 inset box-shadow 로 그린다. border 는 상자 크기에 들어가므로 상태에 따라 넣고 빼면 1px 씩 흔들리고(= layout shift), 항상 넣으면 지금 렌더 높이가 바뀐다. inset shadow 는 레이아웃에 전혀 참여하지 않아 어두운 상태에서는 보이지 않고(같은 색) 흰 상태에서만 테두리로 드러난다. 선택자에 `.kia-winners` 를 붙여 특이성을 한 단계 올린다. imweb 원본 CSS 에 `.doz_sys a, .doz_sys a:hover { color: #1a1e24 }`(0,1,1 / 0,2,1)가 있어서, 클래스+요소만으로는 hover 색이 그쪽과 동률이 되어 **로드 순서에 운명을 맡기게 된다**. 실제로 회차 CTA 는 그 동률에서 져 어두운 글자가 어두운 배경 위에 찍혔다. 특이성으로 이긴다. */ .kia-winners .kia-winners__card a { min-height: 44px; display: flex; align-self: end; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; background: #07141e; color: #fff; font-weight: 800; text-decoration: none; box-shadow: inset 0 0 0 1px #07141e; transition: background-color .2s ease, color .2s ease; } .kia-winners .kia-winners__card a:hover, .kia-winners .kia-winners__card a:focus-visible { background: #fff; color: #07141e; } .kia-winners .kia-winners__card a span { color: inherit; } .kia-winners .kia-winners__card a:focus-visible { outline: 3px solid #07141e; outline-offset: 3px; } .kia-winners__nav { flex: 0 0 var(--kia-winner-nav-size); width: var(--kia-winner-nav-size); height: var(--kia-winner-nav-size); /* 카드 전체가 아니라 **이미지 높이**(카드 폭 × 9/16)의 중앙에 선다. margin-top 의 백분율은 containing block 의 **폭** 으로 풀리므로 아래 식은 실제로 그려질 이미지 높이와 같은 값이다. */ margin-top: calc( ((100% - 2 * var(--kia-winner-nav-size) - 2 * var(--kia-winner-nav-gap) - (var(--kia-winner-per-view) - 1) * var(--kia-winner-gap)) / var(--kia-winner-per-view)) * 9 / 16 / 2 - var(--kia-winner-nav-size) / 2 ); padding: 0; border: 1px solid rgba(7,20,30,.18); border-radius: 50%; background: rgba(255,255,255,.96); color: #07141e; font-size: 24px; line-height: 1; cursor: pointer; } .kia-winners__nav:focus-visible { outline: 2px solid #07141e; outline-offset: 2px; } .kia-winners[data-kia-carousel-static="true"] .kia-winners__nav { display: none; } .kia-winners__state { padding: 24px 0; text-align: center; color: #66777f; } @media (min-width: 768px) { .kia-winners { --kia-winner-per-view: min(2, var(--kia-winner-count)); } } @media (min-width: 1200px) { .kia-winners { --kia-winner-per-view: min(2, var(--kia-winner-count)); } } @media (max-width: 767px) { .kia-winners { padding: 0 16px; --kia-winner-nav-size: 36px; --kia-winner-nav-gap: 8px; } .kia-winners__card h3 { font-size: 16px; } .kia-winners__nav { font-size: 20px; } } /* --- Scope A — 수상작 카드 아래 회차 CTA 그룹 ------------------------------- 스냅샷의 하드코딩 전역 CTA 한 개가 있던 자리를 그대로 이어받는다. 캐러셀과 같은 컨테이너 폭을 써서 카드 왼쪽 끝과 시각적으로 같은 열에 선다. */ .kia-winner-ctas { --kia-winner-cta-gap: 16px; box-sizing: border-box; /* Scope A-6 — 카드 CTA 행 바닥과 이 그룹 사이의 **명시적** 세로 간격. imweb 여백 위젯에만 기대지 않는다: 위젯 높이는 프로파일마다 다르고 언제든 바뀐다. 음수 margin 을 쓰지 않으므로 접촉/겹침이 구조적으로 불가능하다. */ margin-top: 40px; padding: 0 24px; background: transparent; } /* 0건/실패 상태는 자리를 차지하지 않는다 — 빈 여백 블록을 만들지 않기 위해서다. */ .kia-winner-ctas--empty { margin-top: 0; padding: 0; } .kia-winner-ctas__inner { width: min(1292px, 100%); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--kia-winner-cta-gap); } .kia-winner-ctas__inner[hidden] { display: none !important; } .kia-winner-ctas__toggle { box-sizing: border-box; /* 후속 정정 — 긴 고정 폭 대신 라벨 콘텐츠 폭만 사용한다. 좁은 화면에서는 max-width가 viewport gutter 안으로 접고, 가운데 정렬/터치 높이는 보존한다. */ width: fit-content; max-width: 100%; min-height: 52px; margin: 0 auto 16px; padding: 0 24px; border: 1px solid #07141e; background: #07141e; color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 16px; font: 800 15px/1.4 Inter, "Apple SD Gothic Neo", sans-serif; text-align: left; cursor: pointer; } .kia-winner-ctas__toggle span { font-size: 24px; transition: transform .2s ease; } .kia-winner-ctas__toggle[aria-expanded="true"] span { transform: rotate(90deg); } .kia-winner-ctas__toggle:focus-visible { outline: 3px solid #07141e; outline-offset: 3px; } /* 카드 CTA 와 같은 이유로 `.kia-winner-ctas` 를 앞에 붙여 특이성을 올린다 (imweb `.doz_sys a:hover` 0,2,1 을 이기려면 hover 규칙이 0,3,1 이어야 한다). */ .kia-winner-ctas a.kia-winner-ctas__link { box-sizing: border-box; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 24px; background: #07141e; color: #fff; font-size: 15px; font-weight: 800; line-height: 1.4; text-align: center; text-decoration: none; /* 카드 CTA 와 같은 이유로 inset shadow 다(흰 상태 테두리, layout shift 0). */ box-shadow: inset 0 0 0 1px #07141e; transition: background-color .2s ease, color .2s ease; } .kia-winner-ctas a.kia-winner-ctas__link:hover, .kia-winner-ctas a.kia-winner-ctas__link:focus-visible { background: #fff; color: #07141e; } .kia-winner-ctas a.kia-winner-ctas__link span { color: inherit; } .kia-winner-ctas a.kia-winner-ctas__link:focus-visible { outline: 3px solid #07141e; outline-offset: 3px; } .kia-winner-ctas__state { padding: 16px 0; text-align: center; color: #66777f; } @media (max-width: 767px) { /* 모바일 floor 는 16px 이다. 24px 로 두어 좁은 폭에서도 두 버튼이 카드 행에 붙지 않는다. */ .kia-winner-ctas { margin-top: 24px; padding: 0 16px; --kia-winner-cta-gap: 12px; } .kia-winner-ctas__toggle { padding: 0 12px; gap: 8px; font-size: 14px; white-space: nowrap; word-break: keep-all; } .kia-winner-ctas__toggle > span[aria-hidden="true"] { flex: 0 0 auto; } .kia-winner-ctas__inner { flex-direction: column; } .kia-winner-ctas a.kia-winner-ctas__link { width: 100%; justify-content: space-between; padding: 0 18px; font-size: 14px; } } @media (max-width: 339px) { /* 320px 같은 좁은 화면에서는 라벨/화살표를 그대로 둔 채 내부 여백만 줄여 흰 화살표까지 어두운 컨트롤 표면 안에 담는다. */ .kia-winner-ctas__toggle { padding-inline: 4px; gap: 2px; } } /* 추가수정 후속 — 캐러셀 일시정지 버튼 규칙은 지웠다. 마지막 사용처였던 수상작 캐러셀이 일시정지/시작 버튼을 더 이상 렌더하지 않아 죽은 선택자가 되었다. */ /* --- 아카이브 갤러리 ---------------------------------------------------- */ .kia-archive { --kia-archive-count: 1; --kia-archive-per-view: 1; --kia-archive-gap: 20px; /* 추가수정 AC-01 — 좌/우 원형 버튼이 이미지 바깥에 실제로 차지하는 자리. */ --kia-archive-nav-size: 44px; --kia-archive-nav-gap: 14px; position: relative; padding: 84px 0 0; } .kia-archive__inner { position: relative; margin: 0 auto; padding: 0 max(24px, 5vw); } .kia-archive__heading { margin: 0 0 30px; text-align: center; } .kia-archive__heading p { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.16em; color: #6b777c; } .kia-archive__heading h2 { margin: 0; font-size: 38px; line-height: 1.25; font-weight: 700; color: #07141e; } /* 버튼 → viewport → 버튼 의 flex 행. 버튼이 자리를 차지하므로 이미지와 겹칠 수 없고, 음수 오프셋이 없어 좁은 폭에서 문서 가로 overflow 도 만들지 않는다. */ .kia-archive__stage { display: flex; align-items: flex-start; gap: var(--kia-archive-nav-gap); } .kia-archive__viewport { flex: 1 1 auto; min-width: 0; overflow: hidden; } .kia-archive__track { display: flex; gap: var(--kia-archive-gap); margin: 0; padding: 0; list-style: none; will-change: transform; } .kia-archive__item { /* gap 을 뺀 나머지를 per-view 로 나눈다. 항목이 모자라도 clone 으로 채우지 않는다. */ flex: 0 0 calc( (100% - (var(--kia-archive-per-view) - 1) * var(--kia-archive-gap)) / var(--kia-archive-per-view) ); max-width: calc( (100% - (var(--kia-archive-per-view) - 1) * var(--kia-archive-gap)) / var(--kia-archive-per-view) ); min-width: 0; } .kia-archive__card { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; } .kia-archive__card--static { cursor: default; } .kia-archive__thumb { display: block; width: 100%; aspect-ratio: 16 / 9; background-color: #d8dcde; background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; } .kia-archive__title { display: block; margin-top: 14px; font-size: 16px; line-height: 1.5; font-weight: 500; color: #07141e; } .kia-archive__card:hover .kia-archive__title, .kia-archive__card:focus-visible .kia-archive__title { text-decoration: underline; } .kia-archive__card:focus-visible { outline: 2px solid #07141e; outline-offset: 3px; } /* 수직 위치는 카드 전체(이미지+캡션)가 아니라 **이미지 높이**의 중앙이다. 이미지 높이 = 카드 폭 × 9/16 이고, 카드 폭은 viewport 폭에서 계산된다. margin-top 의 백분율은 containing block 의 **폭** 으로 풀리므로(CSS 규격), 아래 식은 실제로 그려질 이미지 높이와 정확히 같은 값이다. */ .kia-archive__nav { flex: 0 0 var(--kia-archive-nav-size); width: var(--kia-archive-nav-size); height: var(--kia-archive-nav-size); margin-top: calc( ((100% - 2 * var(--kia-archive-nav-size) - 2 * var(--kia-archive-nav-gap) - (var(--kia-archive-per-view) - 1) * var(--kia-archive-gap)) / var(--kia-archive-per-view)) * 9 / 16 / 2 - var(--kia-archive-nav-size) / 2 ); padding: 0; border: 1px solid rgba(7, 20, 30, 0.18); border-radius: 50%; background: rgba(255, 255, 255, 0.94); color: #07141e; font-size: 24px; line-height: 1; cursor: pointer; } .kia-archive__nav:focus-visible { outline: 2px solid #07141e; outline-offset: 2px; } /* 항목이 per-view 이하라 굴릴 게 없으면 컨트롤을 숨긴다(가짜 조작 금지). */ .kia-archive[data-kia-archive-static="true"] .kia-archive__nav { display: none; } .kia-archive__state { padding: 40px 0 0; text-align: center; font-size: 15px; color: #6b777c; } @media (min-width: 768px) { .kia-archive { --kia-archive-per-view: min(2, var(--kia-archive-count)); } } @media (min-width: 1200px) { .kia-archive { --kia-archive-per-view: min(3, var(--kia-archive-count)); } } @media (max-width: 767px) { .kia-archive { padding-top: 52px; --kia-archive-nav-size: 36px; --kia-archive-nav-gap: 8px; } .kia-archive__inner { padding: 0 16px; } .kia-archive__heading { margin-bottom: 20px; } .kia-archive__heading h2 { font-size: 26px; } .kia-archive__title { font-size: 14px; margin-top: 10px; } .kia-archive__nav { font-size: 20px; } } /* --- 아카이브 → 이벤트 배너 사이 100px gap (AC-06.1) --------------------- 계약값 100px 은 "화면에 실제로 그려지는 px" 이다. 태블릿 프로파일에서는 외부 imweb 스타일시트가 에 `zoom: .85` 를 걸어 100px 선언이 85px 로 그려졌다. 히어로 높이와 똑같이 실측 배율(--kia-hero-scale, public-upgrade.js 가 :root 에 쓴다)로 나눠서 전 폭에서 실측 100px 이 되게 한다. 스크립트가 죽으면 배율 1 로 떨어질 뿐 값은 계약 그대로다. */ .kia-section-gap { height: calc(100px / var(--kia-hero-scale, 1)); /* margin collapse 로 실측값이 흔들리지 않도록 높이를 직접 차지한다. */ flex: none; } /* --- 이벤트 영상 배너 ---------------------------------------------------- */ .kia-event-banner { display: block; /* Full-width background — no max-width on the outer section. Keep only the horizontal gutter: the section's vertical bounds must match the rendered banner image instead of adding blank space underneath it. */ padding: 0 24px; /* background-color is set inline from DB; fallback default */ background-color: #EDEDED; } .kia-event-banner--empty, .kia-event-banner--error { padding-bottom: 0; } .kia-event-banner__inner { max-width: 1080px; margin: 0 auto; } .kia-event-banner__item { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; } .kia-event-banner__item + .kia-event-banner__item { margin-top: 16px; } .kia-event-banner__item picture, .kia-event-banner__item img { display: block; width: 100%; height: auto; } .kia-event-banner__item:focus-visible { outline: 2px solid #07141e; outline-offset: 3px; } .kia-event-banner__state { padding: 0 24px 84px; text-align: center; font-size: 15px; color: #6b777c; } @media (max-width: 767px) { .kia-event-banner { padding: 0 16px; } .kia-section-gap { height: calc(100px / var(--kia-hero-scale, 1)); } } /* --- 영상 모달 (AC-05.6 / AC-06.5) --------------------------------------- */ .kia-vmodal[hidden] { display: none !important; } .kia-vmodal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 24px; } .kia-vmodal__backdrop { position: absolute; inset: 0; background: #000; opacity: 0.88; border: 0; } .kia-vmodal__dialog { position: relative; width: min(1100px, 100%); } .kia-vmodal__frame { position: relative; width: 100%; /* wrapper 와 iframe 이 모두 16:9 — letterbox 왜곡/overflow 를 만들지 않는다. */ aspect-ratio: 16 / 9; background: #000; overflow: hidden; } .kia-vmodal__frame iframe { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 9; border: 0; } .kia-vmodal__close { position: absolute; top: -46px; right: 0; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.16); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; } .kia-vmodal__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } @media (max-width: 767px) { .kia-vmodal { padding: 16px; } .kia-vmodal__close { top: -42px; } } /* 모달이 열려 있는 동안 배경 스크롤을 잠근다. */ body.kia-vmodal-open { overflow: hidden !important; } /* AC-04 — snapshot footer uses normal document flow and fills short viewports. */ html, body { min-height: 100%; } body { min-height: 100vh !important; height: auto !important; display: flex !important; flex-direction: column; } #doz_wrap { flex: 1 0 auto; width: 100%; } #doz_footer_wrap { flex: 0 0 auto; width: 100%; } #hidden_frame { position: fixed !important; width: 1px !important; height: 1px !important; } /* imweb applies `zoom:.85` to at tablet widths. Chromium then reports the body's unscaled layout height as document.scrollHeight while every rendered box, including the footer, ends at 85% of that value. Move the same scale to the body's direct layout items: their visual size stays unchanged, but normal flow now consumes the scaled height. */ @media (min-width: 767px) and (max-width: 1024px) { body.doz_sys:not(.video_fullpage) { zoom: 1 !important; } body.doz_sys:not(.video_fullpage) > * { zoom: .85; } body.doz_sys:not(.video_fullpage) > #hidden_frame { zoom: 1; } } .kia-public-footer { min-height: 116px; display: grid; place-items: center; align-content: center; gap: 10px; padding: 24px; background: #07141e; color: #9aabb4; font-family: Inter, "Apple SD Gothic Neo", sans-serif; font-size: 13px; } .kia-public-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; } .kia-public-footer a, .kia-public-footer button { min-height: 44px; display: inline-flex; align-items: center; color: #fff; text-decoration: underline; } .kia-public-footer button { border: 0; padding: 0; background: transparent; font: inherit; cursor: pointer; } .kia-public-footer a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } #doz_footer .footer-section { display: none !important; } /* AC-11 — language control is contract-driven; unavailable locales are disabled, never linked. */ .kia-language { position: relative; display: flex; align-items: center; align-self: stretch; } .kia-language__trigger { min-width: 58px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; background: transparent; color: #07141e; font: inherit; font-size: 16px; font-weight: 400; cursor: pointer; } .kia-language__chevron { width: 10px; height: 6px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; transform-origin: center; transition: transform .16s ease; } .kia-language__chevron svg { display: block; width: 10px; height: 6px; } .kia-language.is-open .kia-language__chevron { transform: rotate(180deg); } .kia-language__menu { position: absolute; top: calc(100% - 6px); right: 0; z-index: 1001; width: 68px; min-width: 68px; display: none; margin: 0; padding: 0; overflow: hidden; border: 1px solid #d9dee1; border-radius: 8px; background: #fff; box-shadow: 0 2px 8px rgba(7,20,30,.14); list-style: none; } .kia-language.is-open .kia-language__menu { display: block; } .kia-language__menu a, .kia-language__menu span { width: 100%; height: 62px; min-height: 62px; display: flex; align-items: center; justify-content: center; padding: 0; background: #fff; color: #314b58; font-size: 16px; font-weight: 400; text-decoration: none; transition: background-color .12s ease, color .12s ease; } .kia-language__menu li:hover > a, .kia-language__menu li:hover > span, .kia-language__menu a:focus-visible { background: #000; color: #fff; outline: 0; } .kia-language__menu span[aria-disabled="true"] { color: #314b58; cursor: not-allowed; } .kia-language__menu li:hover > span[aria-disabled="true"] { color: #fff; } /* kia-public-locale-selector-20260831 — 이 행은 #mobile_slide_menu_wrap(z-index:9999) 의 자식으로 붙는다. legacy imweb 드로어 패널 #mobile_slide_menu 는 그 뒤에 만들어지며 position:absolute; z-index:1500 이라, 기본 배치의 이 행을 덮어 탭이 먹히지 않았다. 같은 스택 안에서 패널 위로 올린다. */ .kia-language__mobile { position: relative; z-index: 1600; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; padding: 8px; background: #e7ebed; } .kia-language__mobile ul { display: contents; margin: 0; padding: 0; list-style: none; } .kia-language__mobile-list { display: contents; margin: 0; padding: 0; list-style: none; } .kia-language__mobile a, .kia-language__mobile span { min-height: 44px; display: grid; place-items: center; background: #fff; color: #07141e; } #inline_header_normal .inline-col-group-right, #inline_header_fixed .inline-col-group-right { position: relative; padding-right: 52px !important; } #inline_header_normal .inline-col-group-right > .kia-language, #inline_header_fixed .inline-col-group-right > .kia-language { position: absolute; top: 50%; right: 4px; height: 100%; transform: translateY(-50%); z-index: 1000; } @media (max-width: 991px) { .kia-language[data-kia-language="desktop"] { display: none; } } @media (prefers-reduced-motion: reduce) { .kia-archive__track { transition: none !important; } } /* =========================================================================== kia-scroll-reveal-motion-20260818 — 히어로 아래 본문 섹션 스크롤 진입 리빌 =========================================================================== 표식(`data-kia-reveal`)은 서버(lib/kiaphase1/scroll-reveal.ts)가, 진행 상태 (`data-kia-reveal-state`)는 런타임(public-upgrade.js)이 심는다. 숨기는 규칙이 `[data-kia-reveal-state="pending"]` 에만 걸린다는 점이 이 블록의 핵심이다. 표식만 있는 상태(=스크립트가 없거나, 실패했거나, 아직 안 돌았을 때)의 계산값은 그냥 `opacity: 1` 이다. 그래서 JS 없이도 본문이 전부 보이고, 초기 뷰포트 안 섹션은 런타임이 pending 을 아예 걸지 않으므로 "보였다가 사라지는" 깜빡임도 생기지 않는다. translate 는 세로 한 축뿐이다. 가로로 움직이면 `body.doz_sys > *` 에 zoom 이 걸리는 767–1024px 구간에서 새 가로 overflow 를 만든다. */ [data-kia-reveal][data-kia-reveal-state="pending"] { opacity: 0; transform: translate3d(0, 24px, 0); } [data-kia-reveal][data-kia-reveal-state="shown"] { opacity: 1; /* `none` 으로 끝낸다. 리빌이 끝난 뒤에도 transform 이 남으면 그 섹션이 `position: fixed` 자손의 containing block 이 되어 모달/드로어가 섹션 기준으로 붙는다. */ transform: none; transition: opacity 700ms cubic-bezier(.22, 1, .36, 1), transform 700ms cubic-bezier(.22, 1, .36, 1); } /* 감속 모드에서는 즉시·정적이다. 런타임도 pending 을 걸지 않지만, 계약을 CSS 에서 한 번 더 못 박는다. 런타임이 이미 pending 을 건 뒤 사용자가 OS 설정을 바꾸는 경로가 있고, 그때 JS 를 다시 태울 방법이 없기 때문이다. 여기서 `!important` 를 쓰는 범위는 표식이 붙은 원소의 리빌 3속성뿐이라 다른 모션 계약을 건드리지 않는다. */ @media (prefers-reduced-motion: reduce) { [data-kia-reveal][data-kia-reveal-state="pending"], [data-kia-reveal][data-kia-reveal-state="shown"] { opacity: 1 !important; transform: none !important; transition: none !important; } } /* legacy 아카이브 갤러리 섹션과 하단 `/event` 이미지 배너 섹션은 CSS 로 감추지 않는다. lib/cmpa985/public-upgrade.ts 가 서버 응답에서 섹션째 제거한다 — 감추기만 하면 보이지 않는 YouTube iframe 과 404 로 가는 링크가 DOM 에 그대로 남기 때문이다. */ /* =========================================================================== kia-phase1-20260805 (AC-02) — 공지사항 / 문의하기 공용 게시판 조판 --------------------------------------------------------------------------- `/notice` 와 `/Contact` 는 원래 같은 imweb 게시판 위젯(.li_board)을 쓴다. 다른 것은 `/Contact` 상단이 영상 히어로용으로 흰 글자 · 가운데 정렬이었다는 점뿐이다. 영상 레이어는 서버가 제거했으므로, 남은 타이포그래피만 `/notice` 쪽으로 맞춘다. 두 라우트가 같은 마커(`[data-kia-board]`)를 쓰므로 규칙이 갈라질 수 없다. =========================================================================== */ /* 공용 셸 폭 — 두 게시판을 같은 컨테이너 폭으로 고정한다. */ [data-kia-board] .section_wrap > main > .inside { max-width: 1388px !important; margin-left: auto !important; margin-right: auto !important; } /* `/Contact` intro 를 `/notice` intro 와 같은 표기로 되돌린다. 원본 인라인 style(흰 글자 · 가운데 정렬)이 영상 배경 전용이었기 때문이다. */ [data-kia-board="contact"] .widget_text_wrap .text-table p { text-align: left !important; } [data-kia-board="contact"] .widget_text_wrap .text-table span, [data-kia-board="contact"] .widget_text_wrap .text-table strong { color: #07141e !important; } /* 영상이 사라진 자리의 어두운 배경도 함께 걷어낸다. */ [data-kia-board="contact"] .section_wrap.section_first, [data-kia-board="contact"] .section_wrap.section_first .section_bg, [data-kia-board="contact"] .section_wrap.section_first .section_bg_color { background-color: #fff !important; background-image: none !important; } /* 목록 상태 문구 — 실패와 0건은 서로 다른 마커를 쓰고 문구도 다르다. */ [data-kia-board] .kia-board__state { padding: 56px 16px; text-align: center; font-size: 15px; line-height: 1.6; color: #6b777c; } [data-kia-board] .kia-board__state--error { color: #b3261e; } /* 고정된 공식 안내글은 목록 최상단에서 구분되게 표시한다. */ [data-kia-board] [data-kia-inquiry-row="pinned"] .count { font-weight: 700; color: #07141e; } [data-kia-board] [data-kia-inquiry-row="pinned"] .list_text_title span { font-weight: 700; } /* --- kia-contact-board-20260806 (AC-03) — 비로그인 글쓰기 경고 레이어 --------- 트리거는 `` 가 아니라 `