@font-face {font-family: "Hanwha"; font-style: normal; font-weight: 700; src: url("fonts/Hanwha_B.woff2") format("woff2"), url("fonts/Hanwha_B.woff") format("woff");} @font-face {font-family: "Hanwha"; font-style: normal; font-weight: 400; src: url("fonts/Hanwha_R.woff2") format("woff2"), url("fonts/Hanwha_R.woff") format("woff");} @font-face {font-family: "Hanwha"; font-style: normal; font-weight: 200; src: url("fonts/Hanwha_L.woff2") format("woff2"), url("fonts/Hanwha_L.woff") format("woff");} @font-face {font-family: "Hanwha Gothic"; font-style: normal; font-weight: 700; src: url("fonts/HanwhaGothic_B.woff2") format("woff2"), url("fonts/HanwhaGothic_B.woff") format("woff");} @font-face {font-family: "Hanwha Gothic"; font-style: normal; font-weight: 400; src: url("fonts/HanwhaGothic_R.woff2") format("woff2"), url("fonts/HanwhaGothic_R.woff") format("woff");} @font-face {font-family: "Hanwha Gothic"; font-style: normal; font-weight: 300; src: url("fonts/HanwhaGothic_L.woff2") format("woff2"), url("fonts/HanwhaGothic_L.woff") format("woff");} @font-face {font-family: "Pretendard"; font-style: normal; font-weight: 900; src: url("fonts/Pretendard_Black.woff2") format("woff2"), url("fonts/Pretendard_Black.woff") format("woff");} @font-face {font-family: "Pretendard"; font-style: normal; font-weight: 700; src: url("fonts/Pretendard_Bold.woff2") format("woff2"), url("fonts/Pretendard_Bold.woff") format("woff");} @font-face {font-family: "Pretendard"; font-style: normal; font-weight: 600; src: url("fonts/Pretendard_SemiBold.woff2") format("woff2"), url("fonts/Pretendard_SemiBold.woff") format("woff");} @font-face {font-family: "Pretendard"; font-style: normal; font-weight: 400; src: url("fonts/Pretendard_Regular.woff2") format("woff2"), url("fonts/Pretendard_Regular.woff") format("woff");} @font-face {font-family: "Pretendard"; font-style: normal; font-weight: 300; src: url("fonts/Pretendard_Light.woff2") format("woff2"), url("fonts/Pretendard_Light.woff") format("woff");} :root {--main-color: #f37321;} #header {transition: background-color 0.3s ease-out, backdrop-filter 0.3s ease-out, opacity 0.3s ease-out;} /* 좌측 로고 / 우측 "모집분야" 버튼이 아래 콘텐츠 섹션들(.orbit, .securing 등)과 동일하게 좌우 8% 여백 기준에 맞춰지도록 하는 래퍼. position:absolute + left/right:8%로 폭 자체를 줄여서 h1/.header-cta의 절대좌표(left:20px, right:30px 등)가 이 안쪽 기준으로 다시 계산됨 — position:relative에 padding만 주면 절대배치 자식은 padding을 무시하고 바깥쪽 기준으로 붙어버려서(패딩 박스가 아니라 콘텐츠 박스 기준인 것과 반대) 반드시 left/right로 폭을 줄여야 함 */ #header .header-inner {position: absolute; left: 8%; right: 8%; top: 0; height: 100%;} @media (max-width: 1024px) { #header .header-inner { left: 3%; right: 3%; } } @media (max-width: 1024px) { #header { height:60px; } } /* network 섹션(사진이 헤더 바로 아래부터 여백 없이 시작해서 위성/타이틀이 헤더에 가릴 수 있음)을 지나는 동안만 헤더를 숨김 — new-page.js network 블록에서 스크롤에 따라 토글 */ html.header-hidden #header {opacity: 0; pointer-events: none;} /* 우측 고정 섹션 인디케이터 — 이 페이지에서는 숨김 */ .side-sticky-wrap .sticky .side-nav {display: none;} /* 헤더 우측 "모집분야" 버튼 — 클릭 시 onSideNavClick(common.js)로 #section-job까지 부드럽게 스크롤 (new-page.js에서 연결) */ #header .header-cta {position: absolute; right: 30px; top: 50%; transform: translateY(-50%); padding: 10px 22px; border-radius: 999px; background: var(--main-color); color: #fff; font-family: "Hanwha Gothic"; font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: opacity 0.2s ease-out;} #header .header-cta:hover {opacity: 0.85;} /* 채용마감일 경과 시 new-page.js가 hidden을 줌 — display 선언이 없어 [hidden] 기본 규칙으로 충분하지만, 같은 파일에서 이미 세 번 겪은 버그 유형이라 방어적으로 명시 */ #header .header-cta[hidden] {display: none;} @media (max-width: 767px) { #header .header-cta { right: 16px; padding: 8px 16px; font-size: 13px; } } /* .header-cta(top:50%+translateY)와 상하 중앙이 서로 맞도록, 기존 defult.css의 고정 top:14px 대신 동일한 방식으로 세로 중앙 정렬 */ #header h1 {left:20px; top: 50%; transform: translateY(-50%);} #header h1 a {padding:0;} #header h1 img {width:100%;} @media (max-width: 768px) { /* 원래(다른 페이지) 헤더는 모바일에서 로고를 중앙 정렬했지만, 이 페이지는 우측에 "모집분야" 버튼이 항상 있어서 로고를 중앙에 두면 버튼과 안 어울려 어색해 보임 — 로고는 좌측 유지, 크기만 모바일에 맞게 축소 */ #header h1 { width:120px; } } /* visual을 완전히 지나면 html에 붙는 클래스 (new-page.js) — 헤더에 반투명 검정 + 블러 배경 부여 */ html.header-solid #header {background-color: rgba(0,0,0,0.5); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); z-index: 100;} /* footer: 로고 3개 + 카피라이트만 남은 상태라 space-hub.css의 padding-top:302px/절대좌표 배치를 그대로 쓰면 여백만 크고 의미 없어져서, 낮은 높이의 flex 레이아웃으로 재정의 */ #footer {position: relative; padding: 24px 28px; background: #111; border-top: 1px solid #333; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;} #footer .family-sites {position: static; left: auto; top: auto;} #footer .copyright {width: auto; max-width: none; margin: 0; padding: 0; text-indent: 0;} @media (max-width: 767px) { #footer { flex-direction: column; align-items: flex-start; padding: 20px 20px; } #footer .copyright { text-align: left; } } main.new-page * {box-sizing: border-box; word-break: keep-all;} main.new-page section {position: relative;} main.new-page .sticky {overflow: hidden; position: sticky; top: 0; width: 100%; height: 100vh;} /* 2026-07-27: 모바일 주소창 접힘/펼침 대응 (.orbit에서 먼저 발견해 적용한 것과 동일한 처리). 모바일 브라우저는 스크롤 중 주소창이 자동으로 접혔다 펼쳐지면서 100vh가 실시간으로 변하는데, 섹션 높이(스크롤 runway)가 vh 기반이면 그때마다 섹션이 통째로 밀리면서 sticky pin이 어긋난 위치에서 걸리거나 풀림(844→760 실측 시 pin이 top:0 → top:-316으로 이탈). → 섹션 높이는 --stable-vh(new-page.js가 로드 시점에 px로 고정, 가로 폭이 바뀔 때만 갱신) 기준으로 잡아 흔들리지 않게 하고, .sticky 자체 높이는 100dvh로 둬서 주소창 상태와 무관하게 항상 화면을 정확히 꽉 채우게 함. 이 조합이라야 "고정 시점은 안 흔들리면서 여백도 안 생김". PC/태블릿은 주소창 개념이 없어 기존 vh 그대로 두고 767px 이하에서만 적용. 주의: .visual/.securing/.observe의 섹션 높이 override는 CSS 순서상 각 섹션의 원래 height 선언보다 뒤에 있어야 이기므로(미디어쿼리는 specificity를 올려주지 않음) 여기가 아니라 각 섹션 규칙 뒤쪽에 따로 배치돼 있음 */ @media (max-width: 767px) { main.new-page .sticky { height: 100dvh; } } /* px 고정 높이 대신 vh — 화면 높이 대비 스크롤 배율이 항상 동일해서 화면 크기와 무관하게 스크럽 속도가 일관되게 느껴짐 (px 고정이면 뷰포트 높이에 따라 체감 속도가 달라짐) */ main.new-page .visual {position: relative; height: 300vh;} main.new-page .visual .bg {position: absolute; top: -60px; left: -60px; width: calc(100% + 120px); height: calc(100% + 120px); overflow: hidden;} main.new-page .visual .bg img {position: absolute; top: -6%; left: -6%; width: 112%; height: 112%; object-fit: cover;} main.new-page .visual h2, main.new-page .visual h3 {top: calc(50% - 10px); height: 1.1em; font-family: "Hanwha Gothic";} /* page2의 슬로건과 동일한 폰트 처리: big=볼드, small=레귤러+작게, 한화=한화체(고딕 아님) */ main.new-page .visual h2 .big, main.new-page .visual h3 .big {font-weight: 700;} main.new-page .visual h2 .small, main.new-page .visual h3 .small {font-style: normal; font-weight: 300; font-size: 0.45em;} /* h2의 글자 단위 리빌은 translateY(100%)를 각 글자 span 자신의 높이 기준으로 계산하는데, .small은 .big보다 폰트 크기가 작아서 100%를 이동해도 h2 전체 라인 높이만큼은 못 내려가 애니메이션 전에 위쪽이 살짝 비쳐 보였음 → .big/.small 각자를 자기 크기에 맞는 마스크로 감싸서 해결 */ main.new-page .visual h2 .big, main.new-page .visual h2 .small {display: inline-block; overflow: hidden;} main.new-page .visual h3 .font-hanwha {font-family: "Hanwha"; font-style: normal; font-weight: 400;} main.new-page .visual h3 {top: calc(50% + 20px);} main.new-page .visual h2 {position: absolute; left: 50%; white-space: nowrap; overflow: hidden; transform: translate(-50%, -50%); font-size: 88px; font-weight: 300; line-height: 1.1;} main.new-page .visual h2 span {display: inline-block;} main.new-page .visual h2:not(.show) span {transform: translate3d(0, 100%, 0);} main.new-page .visual h2.show span {transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1);} main.new-page .visual h2.show span:nth-child(2) {transition-delay: 0.1s;} main.new-page .visual h2.show span:nth-child(3) {transition-delay: 0.15s;} main.new-page .visual h2.show span:nth-child(4) {transition-delay: 0.2s;} main.new-page .visual h2.show span:nth-child(5) {transition-delay: 0.25s;} main.new-page .visual h2.show span:nth-child(6) {transition-delay: 0.3s;} main.new-page .visual h2.show span:nth-child(7) {transition-delay: 0.35s;} main.new-page .visual h2.show span:nth-child(8) {transition-delay: 0.4s;} main.new-page .visual h2.show span:nth-child(9) {transition-delay: 0.45s;} main.new-page .visual h2.show span:nth-child(10) {transition-delay: 0.5s;} main.new-page .visual h2.show span:nth-child(11) {transition-delay: 0.55s;} main.new-page .visual h2.show span:nth-child(12) {transition-delay: 0.6s;} main.new-page .visual h2.show span:nth-child(13) {transition-delay: 0.65s;} main.new-page .visual h2.show span:nth-child(14) {transition-delay: 0.7s;} main.new-page .visual h3 {position: absolute; left: 50%; transform: translate(-50%, -50%); width: 100%; font-size: 72px; font-weight: 300; line-height: 1.1; overflow: hidden; text-align: center;} main.new-page .visual h3 span {display: inline-block;} @media (max-width: 1023px) { main.new-page .visual h2 { font-size: 64px; } main.new-page .visual h3 { font-size: 52px; } } @media (max-width: 767px) { /* 주소창 대응 — 위 공용 .sticky 블록 주석 참고 (300vh → 고정 px 기준) */ main.new-page .visual { height: calc(var(--stable-vh, 100vh) * 3); } main.new-page .visual h2 { font-size: 38px; } /* 2026-07-28: 원래 h3 안에
가 있어서 767px 이하에서 "사명,"/"MISSION" 두 줄로 나뉘었는데, 위 공용 규칙(90행)의 height:1.1em(한 줄분)+overflow:hidden 때문에 2번째 줄(MISSION)이 잘려서 안 보이는 버그가 있었음 — 두 줄을 유지하는 대신 마크업의
를 아예 제거하고(한 줄 텍스트로 변경) 폰트를 줄여서 한 줄에 들어오도록 수정. white-space:nowrap으로 좁은 화면에서도 줄바꿈 대신 항상 한 줄 유지 */ main.new-page .visual h3 { font-size: 30px; white-space: nowrap; } } @media (max-width: 359px) { /* 아주 좁은 화면(iPhone SE 1세대급 320px 등) 대비 여유 확보 */ main.new-page .visual h3 { font-size: 22px; } } main.new-page .mission {position: relative; height: 200vh;} main.new-page .mission .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;} main.new-page .mission .bg img {width: 100%; height: 100%; object-fit: cover;} /* top: calc(50% - (var(--header-height) / 2)); */ main.new-page .mission .texts p {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; font-family: "Hanwha Gothic"; font-size: 64px; font-weight: 300; line-height: 1.4; text-align: center; color: #fff;} main.new-page .mission .texts p .line {display: block; overflow: hidden;} main.new-page .mission .texts p .line span {display: block;} main.new-page .mission .texts p .line:nth-child(2) span {color: var(--main-color);} main.new-page .mission .apply-btn {display: none; position: absolute; left: 50%; bottom: 80px; transform: translateX(-50%); overflow: hidden; padding: 18px 48px; border-radius: 999px; background: var(--main-color); color: #fff; font-family: "Hanwha Gothic"; font-size: 18px; font-weight: 500; text-align: center; text-decoration: none; opacity: 0;} /* 버튼 표면을 가로지르며 반복적으로 스치는 광택 효과 (border-radius에 맞춰 overflow:hidden으로 클리핑) */ main.new-page .mission .apply-btn::before {content: ''; position: absolute; top: 0; left: -150%; width: 60%; height: 100%; background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.6), transparent); transform: skewX(-20deg); animation: apply-btn-shine 2.8s ease-in-out infinite;} @keyframes apply-btn-shine { 0% { left: -150%; } 45%, 100% { left: 150%; } } @media (max-width: 1440px) { main.new-page .mission .texts p { font-size: 52px; } } @media (max-width: 1023px) { main.new-page .mission .texts p { font-size: 32px; line-height: 1.5; } main.new-page .mission .apply-btn { bottom: 50px; padding: 14px 36px; font-size: 16px; } } @media (max-width: 767px) { main.new-page .mission .texts p { font-size: 30px; } } /* ===== securing (우주 주권 확보 — 좌측 큰 제목 + 우측 01/02/03 리스트) ===== */ main.new-page .securing {position: relative; height: 200vh;} main.new-page .securing .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;} main.new-page .securing .bg img {width: 100%; height: 100%; object-fit: cover;} /* sat: 우측 상단 장식 위성 이미지. .sticky(섹션 전체 폭) 기준 가운데(50%)에서 고정 px만큼 오프셋 — 뷰포트가 좁아져도 중앙 콘텐츠를 따라 같이 좁아드는 %가 아니라, 중앙선 기준 고정 거리라 어느 정도 폭까지는 잘리지 않고 그 자리에 그대로 보임 */ /* sat 등장은 scrub 타임라인이 아니라 별도 트리거(new-page.js)라, 트리거 전까지는 기본 CSS로 미리 숨겨둠 — 안 그러면 트리거 전까지 보이다가 갑자기 숨는 깜빡임이 생김 (.observe .label과 동일한 이유) */ /* 2026-07-27: 예전엔 center 기준 고정 px 오프셋(left: calc(50% + 450px))이라, 1024~1440px대 노트북 폭에서는 그 오프셋+이미지폭(438px 원본)이 화면 폭을 넘어서 .sticky의 overflow:hidden에 잘리는 버그가 있었음(1024px/1500px 실측 스크린샷으로 확인). right/width를 전부 뷰포트 비례 clamp()로 바꿔서 어떤 폭에서도 화면 안에 들어오도록 재설계 — 넓은 화면(1920px 기준)에서의 위치·크기는 기존과 거의 동일하게(우측 inset ~77px, 폭 ~422px) 나오도록 계수를 맞춤 */ main.new-page .securing .sat {position: absolute; right: clamp(20px, 4vw, 220px); top: 27%; z-index: 2; opacity: 0; width: clamp(160px, 22vw, 438px);} /* texts + list를 하나의 group으로 묶어서, 위치(가운데 정렬/세로 위치)는 group에서 한 번만 제어하고 texts/list는 group 안 일반 흐름(margin 기반 세로 배치)으로 둠 */ main.new-page .securing .group {position: absolute; left: 50%; top: 30%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center;} main.new-page .securing .texts {max-width: 640px; text-align: center;} /* font-size를 1920px 기준 고정 px 대신 clamp(최소, vw비율, 최대)로 바꿔서, 1024px까지 매끄럽게 줄어들게 함(예전엔 1440px에서 56→44px로 뚝 떨어진 뒤 1024px까지 고정이라 좁은 PC 화면에서 상대적으로 커 보였음). 최소값 36px은 1023px 브레이크포인트 값과 동일해서 그 경계에서 이어짐. 1023px/767px 브레이크포인트는 태블릿/모바일용으로 별도 튜닝된 값이라 그대로 유지. 2026-07-25 후속 1차: 노트북(실측 1707px, Windows 배율 적용 후 CSS 뷰포트)에서 "1920 비율 그대로"도 여전히 커 보인다는 피드백으로, 최대값 자체를 88%로 낮춤(56→49px, 비율도 그에 맞춰 2.5521vw로 재계산 — 단순 vw 계수만 줄이면 max(56px)에 절대 안 닿아 죽은 값이 되므로, max/vw를 같은 비율로 같이 낮춰야 함). 후속 2차: 그래도 크다는 피드백 + "1920 기준 자체도 더 작아졌으면 좋겠다"는 요청으로, 1차 결과(49px)에서 다시 88%(누적 1920 기준 약 77%)로 낮춤(49→43px, 2.5521→2.2396vw). 후속 3차: "조금 더 크고 굵게" 요청으로 최대값만 43→48px(2.2396→2.5vw)로 소폭 상향, font-weight도 500→700으로 굵게 변경(최소값 36px은 태블릿 값과 맞춰야 해서 그대로 유지) */ main.new-page .securing .texts h3 {margin: 0; font-family: "Hanwha Gothic"; font-size: clamp(36px, 2.5vw, 48px); font-weight: 700; line-height: 1.2; color: #fff;} main.new-page .securing .texts .line {display: block; overflow: hidden;} main.new-page .securing .texts .line span {display: block;} main.new-page .securing .list {display: flex; flex-direction: column; gap: 0; width: fit-content; margin: 70px 0 0; padding: 0; list-style: none; align-items: stretch;} /* margin-bottom/padding-bottom도 위 h3/num/label과 같은 이유로 clamp 전환(20px 기준 88%로 낮춘 18px을 최대값으로, 0.9375vw=18/1920) — 이 둘은 원래 태블릿/모바일 전용 오버라이드가 없어서(항상 고정 20px) 최소값이 자연스럽게 그 구간까지도 이어짐. 후속 2차 축소 때 h3/num/label과 동일하게 88% 추가 축소(18→16px, 0.9375→0.8333vw, 최소값도 10→9px로 비례 축소) */ main.new-page .securing .list li {display: flex; align-items: center; gap: 60px; margin-bottom: clamp(9px, 0.8333vw, 16px); padding-bottom: clamp(9px, 0.8333vw, 16px); border-bottom:1px solid rgba(255,255,255,0.3);} /* border-top: 1px solid rgba(255, 255, 255, 0.25); border-bottom: 1px solid rgba(255, 255, 255, 0.25); */ main.new-page .securing .list .num, main.new-page .securing .list .label {padding: 20px 0;} /* num/label도 h3와 동일하게 clamp로 전환 — 최소값은 1023px 브레이크포인트 값과 동일하게 맞춤. 단, num/label의 1023px 값은 애초에 1920 비율을 그대로 축소한 값이 아니라 태블릿 가독성을 위해 더 작게 별도로 잡아둔 값이라(예: label 46px→15px는 2.4%가 아니라 1.5%대), 1024px→1023px 경계에서 예전보다 더 크게 한 단계 줄어드는 것처럼 보일 수 있음 — 필요하면 그 경계값만 추가로 조정. 2026-07-25 후속: h3와 동일한 이유로 최대값을 88%로 낮춤(font 60→53px/3.125→2.7604vw, width 64→56px/3.3333→2.9167vw, line-height 40→35px/2.0833→1.8229vw, label font 46→40px/2.3958→2.0833vw — label line-height는 num과 항상 같은 값이라 동일하게 맞춤). 후속 2차: h3와 동일하게 1차 결과에서 다시 88% 추가 축소(font 53→47px/2.7604→2.4479vw, width 56→49px/2.9167→2.5521vw, line-height 35→31px/1.8229→1.6146vw, label font 40→35px/2.0833→1.8229vw) */ main.new-page .securing .list .num {flex-shrink: 0; width: clamp(44px, 2.5521vw, 49px); font-family: "Hanwha Gothic"; font-size: clamp(26px, 2.4479vw, 47px); font-weight: 700; line-height: clamp(26px, 1.6146vw, 31px); color: var(--main-color); text-align: center;} /* 2026-07-27: min을 15px→22px로 상향 — 태블릿(1023px 이하) 고정값을 15px→22px로 올리면서, 위 주석에서 우려했던 "1023→1024px 경계에서 오히려 작아지는" 역전이 실제로 생겨서(15→18.67px처럼 증가하던 게 22→18.67px로 감소) min을 새 태블릿 값과 맞춰 경계에서 다시 자연스럽게 이어지게 함 */ main.new-page .securing .list .label {flex: 1; font-family: "Pretendard"; font-size: clamp(22px, 1.8229vw, 35px); font-weight: 600; line-height: clamp(26px, 1.6146vw, 31px); color: #fff; padding-left:10px;} @media (max-width: 1023px) { main.new-page .securing .texts h3 { font-size: 36px; } /* .list의 gap은 0 유지(사용자 지정) — 항목 간 간격은 .list li의 margin-bottom으로만 제어 */ main.new-page .securing .list li { gap: 16px; } main.new-page .securing .list .num, main.new-page .securing .list .label { padding: 16px 0; } main.new-page .securing .list .num { font-size: 26px; width: 44px; line-height: 26px; } /* 2026-07-27: 태블릿(768~1023px) label이 15px로, 그보다 좁은 모바일(767px 이하, 20px)보다 오히려 더 작아서 화면을 넓힐수록 글자가 줄어드는 역전 현상이 있었음 — 22px로 올려서 모바일(20px) < 태블릿(22px) < num(26px) 순서가 자연스럽게 이어지도록 수정 */ main.new-page .securing .list .label { font-size: 22px; line-height: 26px; } } @media (max-width: 767px) { /* 주소창 대응 — 위 공용 .sticky 블록 주석 참고 (200vh → 고정 px 기준) */ main.new-page .securing { height: calc(var(--stable-vh, 100vh) * 2); } /* group만 static+padding으로 되돌리면 texts/list는 그 안 흐름을 그대로 따라가서 세로로 떨어지는 모바일 배치가 됨 (다른 값은 base와 동일하게 유지) */ /* 2026-07-27: 사용자 요청으로 중앙 정렬 → 좌측 정렬로 전환 — group의 align-items를 flex-start로, texts의 text-align을 left로, list li의 justify-content를 flex-start로 */ main.new-page .securing .group { position: static; transform: none; padding: 140px 24px 0; align-items: flex-start; } main.new-page .securing .texts { max-width: none; text-align: left; } /* 2026-07-27: top:6%가 모바일 헤더(--header-height:60px)와 겹쳐서 위성이 헤더 뒤에 반쯤 가려지던 문제 수정 — 헤더 높이 + 여백만큼 아래로 내림. 이어서 크기를 90→112px로 키우면서, 중앙 기준 고정 오프셋(calc(50% + 90px))은 화면이 좁은 기기(320px대)에서 오른쪽이 잘릴 여지가 있어 PC와 동일하게 right 기준으로 전환(화면 폭과 무관하게 항상 안전하게 들어옴) */ main.new-page .securing .sat { left: auto; right: 40px; top: calc(var(--header-height) + 24px); width: 112px; } /* 2026-07-27: 사용자 확인 값(num 24px/label 20px)으로 확대 — num/label 폭·line-height도 커진 글자에 맞춰 함께 조정. h3는 38px이 모바일에서 너무 커 보인다는 피드백으로 30px로 재조정 */ main.new-page .securing .texts h3 { font-size: 26px; } main.new-page .securing .list{margin-top:40px;} main.new-page .securing .list li { justify-content: flex-start; } /* 세로로 다시 쌓이니 위/아래 테두리를 다 두면 인접 항목끼리 선이 겹쳐 두 줄로 보임 — 원래 모바일 모습대로 항목 사이는 밑줄 하나만, 맨 위 항목만 윗줄 추가 */ main.new-page .securing .list .num, main.new-page .securing .list .label { padding: 10px 0; border-top: none; } /* border-top: 1px solid rgba(255, 255, 255, 0.25); */ main.new-page .securing .list li:first-child .num, main.new-page .securing .list li:first-child .label {} main.new-page .securing .list li:last-child{border-bottom:0; padding-bottom:0; margin-bottom:0;} main.new-page .securing .list .num { font-size: 24px; width: 40px; line-height: 22px; } main.new-page .securing .list .label { font-size: 18px; line-height: 22px; } } /* ===== 공통: observe/orbit/datacenter "번호+타이틀"(그리고 orbit/datacenter의 desc-list) 텍스트 스타일 통일 — 세 섹션 모두 큰 번호(.num) + 헤드라인(observe는 .label .text, orbit/datacenter는 .intro .title)을 같은 크기/폰트/색으로 맞춰서 통일감을 줌. 레이아웃 (정렬/여백/위치 방식)은 섹션마다 사정이 달라서(예: datacenter .content는 100vh 오버플로우 버그 방지를 위해 이미지 위에 absolute로 얹혀있음, 2026-07-24 로그 참고) 그대로 각 섹션 자체 규칙에 남겨두고, 여기서는 타이포그래피 값만 공통으로 관리함 ===== */ /* 2026-07-26: .securing과 동일한 이유로 고정 px+1440px 브레이크포인트 대신 clamp(최소, vw비율, 최대)로 전환 — 1920 기준값 자체도 88%로 낮추고(num 42→37px, title 45→40px, desc-list 24→21px), 그 값을 기준으로 vw 비율을 재계산해서 1024px까지 매끄럽게 줄어들게 함. 최소값은 기존 1023px 브레이크포인트 값과 동일하게 맞춰서 그 경계에서 자연스럽게 이어짐 — 1023px/767px 브레이크포인트는 그대로 유지 */ main.new-page .observe .label .num, main.new-page .orbit .label .num, main.new-page .datacenter .label .num {font-family: "Hanwha Gothic"; font-size: clamp(26px, 1.9271vw, 37px); font-weight: 700; color: var(--main-color);} main.new-page .observe .label .text, main.new-page .orbit .intro .title, main.new-page .datacenter .intro .title {margin: 0; font-family: "Hanwha Gothic"; font-size: clamp(22px, 2.0833vw, 40px); font-weight: 700; color: #fff;} /* 타이틀 안에서 강조할 부분만 주황 포인트로(숫자와 동일한 --main-color) — 세 섹션 공통 */ main.new-page .observe .label .text .accent, main.new-page .orbit .intro .title .accent, main.new-page .datacenter .intro .title .accent {color: var(--main-color);} main.new-page .orbit .intro .desc-list, main.new-page .datacenter .intro .desc-list {margin: 0; padding: 0; list-style: none;} main.new-page .orbit .intro .desc-list li, main.new-page .datacenter .intro .desc-list li {font-family: "Pretendard"; font-size: clamp(13px, 1.09375vw, 21px); font-weight: 500; line-height: 1.7; color: rgba(255, 255, 255, 0.85);} @media (max-width: 1023px) { main.new-page .observe .label .num, main.new-page .orbit .label .num, main.new-page .datacenter .label .num { font-size: 26px; } main.new-page .observe .label .text, main.new-page .orbit .intro .title, main.new-page .datacenter .intro .title { font-size: 26px; } main.new-page .orbit .intro .desc-list li, main.new-page .datacenter .intro .desc-list li { font-size: 13px; } } @media (max-width: 767px) { main.new-page .observe .label .num, main.new-page .orbit .label .num, main.new-page .datacenter .label .num { font-size: 22px; } main.new-page .observe .label .text, main.new-page .orbit .intro .title, main.new-page .datacenter .intro .title { font-size: 24px; } } /* ===== observe (세계 최고 수준의 관측위성 — .securing과 동일한 .sticky 핀 고정 + 스크롤 스크럽 구조. 원래는 "콘텐츠가 100vh보다 커질 수 있어서 핀 고정 구조를 안 씀"이라고 명시적으로 피했던 섹션인데(2026-07-20 로그 참고), 사용자가 명시적으로 pin 전환을 요청해서 적용함 — 다만 그 우려가 실제로 재발할 수 있으니(특히 모바일에서 콘텐츠가 100vh를 넘으면 하단이 잘릴 수 있음) 실제 화면으로 꼭 확인 필요. 콘텐츠(라벨/스탯) 안의 .stage-area에서 텍스트만 있는 1단계 → 2단계 → 숫자 카운트업이 있는 기존 .stats(3단계, 최종 상태)가 순서대로 크로스페이드되고, 하단 지구+위성 비주얼은 3단계와 함께 등장 ===== */ main.new-page .observe {position: relative; height: 300vh;} /* 2026-07-26: Option B — .sticky 핀+스크롤 스크럽 구조는 그대로 유지하되, 안의 콘텐츠(.canvas)만 orbit/datacenter/infra와 동일한 1920:1080 레터박스 박스로 통일(사용자 요청, "통일감"이 목적이라 .observe만의 문제 해결 목적은 아님). .sticky는 여전히 100vh를 통째로 차지하고, 그 안에서 .canvas를 flex로 가운데 정렬(다른 섹션들과 달리 .sticky가 100vh를 항상 다 차지하고 있어서 앞뒤 섹션이 여백에 비쳐 보이는 효과는 없음 — 사용자가 확인한 트레이드오프) */ main.new-page .observe .sticky {background: #000; display: flex; align-items: center; justify-content: center;} /* orbit/datacenter/infra와 동일한 레터박스 폭 공식 */ main.new-page .observe .canvas {position: relative; width: min(100%, calc((100vh - var(--header-height) - 40px) * 1920 / 1080)); aspect-ratio: 1920 / 1080; margin: 0 auto;} /* 2026-07-26: z-index 재정렬(사용자 요청) — bg(1) < 경계 그라데이션(2) < 비주얼 레이어(3~5, 아래 .layer.earth/line/sat 참고) < .content 텍스트(10) 순서 */ main.new-page .observe .bg {position: absolute; inset: 0; z-index: 1;} main.new-page .observe .bg picture {display: block; width: 100%; height: 100%;} main.new-page .observe .bg img {width: 100%; height: 100%; object-fit: cover;} /* 2026-07-26: 하단 경계 그라데이션 — 원래 .canvas 레벨 가상요소(::after)로 뒀었으나, .layer.earth가 이 영역을 꽉 채우는 큰 이미지다 보니 "캔버스 전체를 기준으로 한 z-index 숫자 싸움"에 계속 휘말려서(한 번은 그라데이션이 통째로 가려지는 버그로 이어짐), .visual-area 안 실제 요소 (.fade-bottom, 아래 참고)로 옮기고 여기서는 완전히 제거함 — 되살릴 필요 없음, 대체 완료 */ /* 2026-07-26: 좌우 그라데이션 — 5%로 넣었다가 2%로 줄였다가, 다시 ".infra만 남기고 숨겨달라"는 요청으로 display:none 처리(값 정의는 그대로 둬서 이 줄만 지우면 바로 되살아남). .visual-area(좌우 8%~92%)는 이 0~2%/98~100% 구간 밖에 있어서 하단 그라데이션 때 겪었던 "earth에 가려지는" 문제는 여기선 해당 없음(z-index는 bg(1)보다 위면 충분해서 기존 3 그대로 둠) */ main.new-page .observe .canvas::before {content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(to right, #000, rgba(0, 0, 0, 0)) left / 2% 100% no-repeat, linear-gradient(to left, #000, rgba(0, 0, 0, 0)) right / 2% 100% no-repeat; display: none;} /* 2026-07-26: 원래 .sticky의 flex(space-between)가 콘텐츠는 위/비주얼은 아래에 붙이던 것을, .canvas 좌표계 안 고정 % 위치로 치환 — 값은 실제 렌더링(1920x1080 기준) 측정치를 그대로 사용 (상단 패딩 120px ≈ 12%, 좌우 패딩 8%는 기존 .sticky padding과 동일) */ main.new-page .observe .content {position: absolute; top: 12%; left: 8%; right: 8%; z-index: 10;} /* JS 리빌 전까지는 기본 CSS로 미리 숨겨둠 — gsap fromTo가 트리거되는 순간에야 opacity:0을 걸면 그 전까지는 기본값(보임) 상태로 스크롤되며 보이다가 리빌 시작 때 갑자기 숨었다 나타나는 깜빡임이 생김 */ main.new-page .observe .label {display: flex; align-items: center; justify-content: space-between; margin: 0 0 30px; opacity: 0;} /* .num/.text 타이포그래피는 공통 규칙(위 "공통: observe/orbit/datacenter" 블록)에서 관리 */ /* stage-text 1/2단계와 .stage-3(타이틀+.stats, 3단계)가 전부 이 안에서 같은 자리에 겹쳐서 크로스페이드됨 — .stage-3는 일반 흐름으로 둬서 이 영역의 높이를 정하고, stage-text는 absolute로 그 위에 얹힘 */ main.new-page .observe .stage-area {position: relative;} /* .stage-3(타이틀+.stats)가 이 영역의 높이를 정하다 보니 1·2단계 텍스트가 그 높이의 맨 위에만 붙어 있었음 — inset:0 + flex 중앙정렬로 그 높이의 상하 가운데에 오게 함 */ main.new-page .observe .stage-text {position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; opacity: 0; text-align: center; font-family: "Hanwha Gothic"; font-size: 32px; font-weight: 500; line-height: 1.6; color: #fff;} /* 스크럽이 이 wrapper의 opacity를 0→1로 다루지만, 페이지 로드 직후(스크롤 전) 잠깐 브라우저 기본값(1)으로 보였다 숨는 깜빡임을 막기 위해 CSS 기본값도 미리 0으로 둠(다른 리빌 요소와 동일 컨벤션) */ main.new-page .observe .stage-3 {opacity: 0;} main.new-page .observe .stats-title {margin: 0 0 0; opacity: 0; text-align: center; font-family: "Hanwha Gothic"; font-size: 32px; font-weight: 700; color: #fff; line-height:1.3;} /* 바깥 opacity 숨김은 .stage-3(부모 wrapper, 스크럽 담당)로 옮겨감 — 여기 .stats 자체에 opacity:0을 남겨두면 그 무엇도 이걸 다시 1로 되돌려주지 않아서(스크럽은 .stage-3만, playStage3()는 li 각각만 다룸) 안의 li가 다 opacity:1이 돼도 부모가 0이라 전부 안 보이는 버그가 있었음 — 그래서 여기서는 제거하고 기본값(1)을 그대로 씀 */ main.new-page .observe .stats {display: flex; align-items: flex-start; gap: 80px; margin: 0; margin-top:20px; padding: 0; list-style: none; justify-content: center; text-align:center;} /* 위 .label과 동일한 이유로 미리 숨겨둠 */ main.new-page .observe .stats li {position: relative; opacity: 0;} main.new-page .observe .stats li:not(:first-child)::before {content: ''; position: absolute; left: -40px; top: 6px; bottom: 6px; width: 1px; background: rgba(255, 255, 255, 0.25);} main.new-page .observe .value {display: flex; align-items: baseline; margin: 0 0 14px; font-family: "Hanwha Gothic"; font-weight: 700; color: var(--main-color); line-height: 1; white-space: nowrap;} main.new-page .observe .value .num {font-family: "Hanwha Gothic"; font-size: 56px;} main.new-page .observe .value .unit {margin-left: 6px; font-size: 24px; font-weight: 700;} main.new-page .observe .desc {margin: 0; font-family: "Pretendard"; font-size: 15px; font-weight: 500; line-height: 1.5; color: rgba(255, 255, 255, 0.85);} /* 2026-07-22: observe_earth/line/sat 에셋을 1700x590 캔버스로 교체(기존 1350x541) — 비율 그대로 유지해야 이미지가 안 찌그러짐. 2026-07-26: .sticky의 flex(space-between)가 이 요소를 바닥에 붙이던 것을, .canvas 좌표계 안 절대 위치(left/right 8%, bottom:0 — 측정치 기준 .content와 동일한 좌우 여백, 바닥에 딱 붙음)로 치환 */ main.new-page .observe .visual-area {position: absolute; left: 8%; right: 8%; bottom: 0; aspect-ratio: 1700 / 590;} /* earth/line/sat 전부 JS 리빌 전까지는 opacity:0으로 미리 숨겨둠 (.label/.stats li와 동일한 이유 — 기본 CSS로 이미 보이는 상태였다가 리빌 트리거 시점에 gsap fromTo가 opacity:0을 걸면 그 사이엔 보이다가 트리거 순간 숨었다 다시 나타나는 깜빡임이 생김). line의 최종 opacity는 JS fromTo(0 → 1, 2026-07-22에 0.5에서 변경)가 담당하므로 여기선 0으로 시작 */ main.new-page .observe .visual-area .layer.earth, main.new-page .observe .visual-area .layer.sat, main.new-page .observe .visual-area .layer.line {opacity: 0;} main.new-page .observe .visual-area .layer {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} /* 2026-07-22: DOM 순서(line→sat→earth)대로면 마지막인 earth가 맨 위로 올라와 line/sat 일부를 가려서, z-index로 순서를 뒤집음 — earth를 가장 아래로, line/sat을 그 위로. 2026-07-26: earth는 bg(1) 바로 위(2)에 둬서, 이 구간을 꽉 채우는 큰 이미지인 earth가 다른 전경 요소를 가리지 않게 함. line/sat(작은 위성/궤도선 장식)은 계속 위(4~5)에 둬서 유지 */ main.new-page .observe .visual-area .layer.earth {z-index: 2;} main.new-page .observe .visual-area .layer.line {z-index: 4;} main.new-page .observe .visual-area .layer.sat {z-index: 5;} /* 2026-07-26: 하단 경계 그라데이션 — 예전엔 .canvas 레벨 가상요소였다가, earth가 이 구간을 꽉 채우는 큰 이미지라 "캔버스 전체 기준 z-index 숫자 싸움"에 계속 휘말려서(한 번은 그라데이션이 통째로 가려지는 버그로 이어짐), .visual-area 안의 실제 마지막 자식 요소로 옮김 — earth(2)/ line(4)/sat(5)보다 확실히 위(6)에 두면 되므로 더 이상 캔버스 전체 z-index와 얽힐 일이 없음. 높이(28%)는 예전 .canvas 기준 12%를 .visual-area 자체 높이 비율로 환산한 값(대략 12%*864/447) 에 여유를 더한 눈대중 값 — 실제로 보면서 조정 가능 */ main.new-page .observe .visual-area .fade-bottom {position: absolute; left: 0; right: 0; bottom: 0; height: 28%; background: linear-gradient(to top, #000, rgba(0, 0, 0, 0)); z-index: 6; pointer-events: none;} @media (max-width: 1440px) { main.new-page .observe .stage-text { font-size: 26px; } main.new-page .observe .stats-title { font-size: 26px; margin-bottom: 26px; } main.new-page .observe .value .num { font-size: 46px; } main.new-page .observe .value .unit { font-size: 20px; } main.new-page .observe .stats { gap: 44px; } main.new-page .observe .stats li:not(:first-child)::before { left: -22px; } } @media (max-width: 1023px) { main.new-page .observe .sticky { padding: 110px 6% 60px; } main.new-page .observe .label { margin-bottom: 40px; } main.new-page .observe .stage-text { font-size: 22px; } main.new-page .observe .stats-title { font-size: 22px; margin-bottom: 22px; } main.new-page .observe .value .num { font-size: 36px; } main.new-page .observe .value .unit { font-size: 17px; } main.new-page .observe .desc { font-size: 13px; } } @media (max-width: 767px) { /* 2026-07-27: 다시 pin(고정) 구조로 전환 — 예전엔 콘텐츠 양(라벨+3단계 텍스트+비주얼)이 100vh를 넘어서 .sticky의 overflow:hidden에 걸려 하단 visual이 잘리는 문제로 pin을 뺐었지만, .stats를 세로 스택 대신 PC처럼 가로 배치로 바꾸면 전체 높이가 크게 줄어들어 (375×667 기준 실측 551px, 100vh 667px 안에 116px 여유) pin을 유지해도 안 잘림. .sticky/.canvas 관련 override를 전부 지워서 base 규칙(position:sticky, 100vh, flex 중앙정렬, 1920:1080 레터박스 아님)... 대신 .canvas는 아래에서 모바일 전용 값으로 다시 지정 */ /* 위 공용 .sticky 블록의 주석 참고 — 주소창 변화로 pin이 어긋나지 않도록 vh 대신 고정 px 기준 */ main.new-page .observe { height: calc(var(--stable-vh, 100vh) * 1.5); } /* base .sticky는 flex align-items:center(세로 중앙정렬)인데, .canvas 자체 padding-top:90px (헤더 회피용)와 겹치면 위쪽에 불필요하게 큰 빈 공간이 생김(실측 시 라벨 위까지 270px) — 모바일은 stretch로 바꿔서 .canvas가 .sticky(100vh) 높이를 그대로 채우게 하고, 그 안에서 .content/.visual-area를 justify-content:space-between으로 위/아래에 붙임 */ /* 위 1023px 규칙의 padding:110px 6% 60px가 max-width 특성상 767px 이하에서도 그대로 상속돼서, .canvas 자체 padding과 이중으로 겹쳐 헤더 아래로 필요 이상 밀려나 있었음 — 0으로 리셋해서 .canvas의 padding 하나로만 여백을 관리하도록 정리 */ main.new-page .observe .sticky { align-items: stretch; padding: 0; } /* 2026-07-27: 좌우 padding을 0으로 — 이후 다른 섹션들도 동일하게 맞출 예정. justify-content:space-between으로 .content는 위, .visual-area는 아래에 붙고 남는 공간이 그 사이 여백이 됨(margin-top으로 억지로 띄우던 것 대신 자동 분배) */ /* 2026-07-27: 상단은 헤더 높이 + 최소 여백만 남기고(최대한 헤더 바로 아래로 붙임), 하단은 0 */ main.new-page .observe .canvas { position: relative; width: 100%; height: 100%; aspect-ratio: auto; margin: 0; display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--header-height) + 10px) 0 0; } /* 위 .canvas::before 참고(좌우 그라데이션) — 레터박스 박스가 아니게 되면서 기준점이 바뀌어 엉뚱한 위치에 걸리므로 모바일에서는 숨김. .fade-bottom(하단 그라데이션)은 .canvas가 아니라 .visual-area 안 요소라 이 영향을 안 받아서 모바일에서도 그대로 유지됨(별도 처리 불필요) */ main.new-page .observe .canvas::before { display: none; } /* PC/태블릿은 .content/.visual-area가 .canvas 좌표계 안 absolute 위치였지만, 모바일은 원래 디자인대로 일반 흐름 스택(.content 먼저, .visual-area 나중)으로 복귀 */ /* .canvas 좌우 padding을 0으로 비웠더니(지구 비주얼 풀블리드용) 텍스트도 같이 화면 끝에 붙어버려서(라벨 "01"이 왼쪽 끝에, 타이틀이 오른쪽 끝에서 잘림) .content에만 별도로 좌우 여백을 되돌림 — .visual-area는 이 규칙이 없어서 계속 풀블리드로 유지됨 */ /* 2026-07-27: .label은 항상 위 고정, .stage-area는 "라벨 아래 ~ visual-area 시작 지점" 남는 공간의 상하 정중앙에 오도록 — height:100%는 .visual-area가 absolute(flex 레이아웃에 안 잡힘)라서 .content가 캔버스 전체 높이(visual-area 뒤에 깔린 부분까지 포함)를 다 차지해버려 실제 "라벨~비주얼 시작 지점"보다 더 아래를 기준으로 중앙정렬되는 버그가 있었음(아래 .visual-area를 다시 flex 자식으로 되돌려서 height:100% 대신 flex:1로 수정 — 그러면 flexbox가 .visual-area의 실제 높이만큼을 자동으로 빼고 남은 공간만 .content에 줌) */ main.new-page .observe .content { position: relative; top: auto; left: auto; right: auto; padding: 0 24px; flex: 1; display: flex; flex-direction: column; min-height: 0; } main.new-page .observe .label { margin-bottom: 50px; flex: none; flex-direction: column; align-items: start; gap:10px;} main.new-page .observe .stage-area { flex: 1; display: flex; flex-direction: column; justify-content: start; align-items: start; margin-top:-40px;} /* PC/태블릿은 .stage-3 위에 absolute로 겹쳐서 크로스페이드되지만, 모바일은 겹치지 않고 1단계 텍스트 → 2단계 텍스트 → 3단계(타이틀+스탯) 순서로 세로로 전부 펼쳐서 보여줌 */ main.new-page .observe .stage-text { position: static; display: block; margin: 0 0; font-family:"Pretendard"; font-size: 13px; line-height: 1.7; font-weight:500; color:rgba(255, 255, 255, 0.85);} /* PC/태블릿은 스크럽으로 opacity 0→1을 다루지만, 모바일은 크로스페이드 없이 항상 그 자리에 있고 내부 타이틀/스탯만 playStage3()로 개별 리빌되므로 컨테이너 자체는 기본값(1)로 둠 */ main.new-page .observe .stage-3 { opacity: 1; width:100%;} main.new-page .observe .stats-title {font-family:"Pretendard"; font-size: 13px; line-height: 1.7; font-weight:500; color:rgba(255, 255, 255, 0.85); margin-bottom: 18px; text-align:left;} /* 2026-07-27: 세로 스택(column) → PC와 동일한 가로 배치(row)로 전환 — 이게 이번 pin 복귀를 가능하게 한 핵심 변경(세로 스택은 항목당 한 줄씩 차지해서 전체 높이가 훨씬 컸음). gap/폭은 모바일 화면에 맞게 축소, justify-content로 3칸에 고르게 분배 */ main.new-page .observe .stats { flex-direction: row; align-items: flex-start; gap: 2px; justify-content: space-between; text-align: center; } /* row 배치이므로 구분선도 PC처럼 항목 사이 세로선으로 복귀(gap 8px의 절반만큼 안쪽에 배치) */ main.new-page .observe .stats li:not(:first-child)::before {content: ''; position: absolute; left: -4px; top: 4px; bottom: 4px; width: 1px; height: auto; background: rgba(255, 255, 255, 0.25); transform: none; } /* 2026-07-27: 3칸 다 똑같은 폭으로 나눠 갖게(flex:1) + min-width:0으로 내용이 넘칠 땐 폭을 뚫고 나가는(overflow) 대신 줄바꿈되게 함 — "400km" 같은 폭 넓은 값이 한 칸을 비집고 나가서 .sticky의 overflow:hidden에 3번째 항목이 통째로 잘려 안 보이던 문제 수정 */ main.new-page .observe .stats li { flex: auto; min-width: 0; } main.new-page .observe .value { justify-content: center; flex-wrap: wrap; white-space: normal; } main.new-page .observe .value .num { font-size: 25px; } main.new-page .observe .value .unit { display:block; font-size: 12px; } main.new-page .observe .desc { font-size: 12px; } main.new-page .observe .desc br { display:none; } /* 2026-07-27: 100%→120%로 확대 + 가운데 정렬 요청 — 처음엔 position:absolute로 뺐었으나, 그러면 flex 레이아웃에서 빠져서(out of flow) .content의 flex:1 계산이 .visual-area의 실제 높이를 모르게 되는 부작용이 있었음(바로 위 .content 주석 참고) — position:relative를 유지해서 flex 아이템으로 남긴 채, left:50%+transform으로만 시각적으로 가운데 정렬/확대 (relative는 위치만 옮길 뿐 원래 자리의 높이는 그대로 레이아웃에 반영되므로 flex:1과 궁합이 맞음) */ /* z-index:3 추가 — absolute든 relative든 z-index:auto인 포지션 요소는 별도 스태킹 컨텍스트를 안 만들어서, 안의 .layer.earth/line/sat(z-index 2/4/5)이 형제인 .bg(z-index:1)보다 오히려 아래로 그려지는 버그가 있었음(지구가 배경에 통째로 가려져 안 보임). 명시적으로 값을 줘서 해결 */ main.new-page .observe .visual-area { position: relative; left: 50%; right: auto; bottom: auto; transform: translateX(-50%); width: 220%; z-index: 3; flex: none; } } @media (max-width: 640px) { main.new-page .observe .value .num { font-size:22px; } } /* ===== orbit (독자 저궤도 위성통신 — 2026-07-25 datacenter와 동일한 "bg-as-layer" 풀블리드 구조로 전환. 예전엔 .bg가 섹션 전체를 덮는 별도 cover 배경이고 .orbit-visual은 화면 중앙의 작은 박스(1745/855 트림 캔버스)였는데, 에셋을 전부 1920x1080 한 캔버스로 재작업하면서 datacenter처럼 .bg를 .orbit-visual 안 첫 번째 레이어로 넣고 폭 100%+원본 비율로 박스 크기를 결정하도록 바꿈. 그에 따라 .content(라벨/인트로)도 datacenter와 동일하게 이미지 위에 absolute로 얹음(스크롤 좌표를 이미지와 공유해야 .diagram-area 중심 스크롤 잠금 때 화면 밖으로 밀려나지 않음 — 상세 이유는 datacenter .content 주석 참고) ===== */ main.new-page .orbit {position: relative; padding: 0 0 0; overflow: hidden; background: #000;} /* 2026-07-26 전면 개편: "브라우저 폭 100% 꽉 채우기 + 크롭"에서 "항상 정확한 1920:1080 비율을 유지하는 레터박스 박스"로 전환(사용자 요청 — orbit/datacenter/infra 전부 동일 적용, 크롭 자체가 없어지므로 지난번 겪었던 정렬 어긋남류의 문제가 원천 차단됨). 폭을 100%와 "뷰포트 높이(헤더 높이 제외) 기준으로 16:9를 채우는 폭" 중 작은 쪽으로 제한 — 화면이 16:9보다 세로로 넉넉하면(폭 기준) 상하 여백, 가로로 넉넉하면(높이 기준) 좌우 여백이 생기고, 그 여백은 그냥 검은 배경(.orbit background:#000)이 그대로 보임. margin:0 auto로 좌우 여백 생길 때 수평 중앙 정렬. .diagram-area가 이제 이 박스 자체 — .content도 이 안으로 들어와서(위 HTML 참고) 같은 좌표계를 공유하므로 여백이 생겨도 이미지 밖으로 어긋나지 않음. .orbit은 .sticky pin을 안 쓰는 섹션이라, 상하 여백이 생기는 경우(=박스가 뷰포트보다 얕아지는 경우) 기존 중앙 스크롤 잠금(isPastCenter)이 걸릴 때 자연스럽게 앞뒤 섹션이 여백 위아래로 살짝 비쳐 보임(사용자가 원한 효과) */ main.new-page .orbit .diagram-area {position: relative; width: min(100%, calc((100vh - var(--header-height) - 40px) * 1920 / 1080)); aspect-ratio: 1920 / 1080; margin: 0 auto; overflow: hidden;} main.new-page .orbit .orbit-visual {position: absolute; inset: 0; width: 100%; height: 100%;} /* 박스 비율이 이미지 원본 비율과 항상 정확히 일치하므로 object-fit/object-position 없이 width:100%;height:100%만으로 크롭·왜곡 없이 1:1로 표시됨. 2026-07-26: z-index 재정렬(사용자 요청) — bg(1) < 상하 경계 그라데이션(2) < 위성/라인 등 전경 이미지(3~4) < .content 텍스트(10) 순서로, 그라데이션이 배경 바로 위에만 있고 이미지·텍스트는 전부 그 위에 오도록 정리 */ main.new-page .orbit .orbit-visual .layer.bg {position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; opacity: 1;} /* 리빌 전까지 미리 숨겨둠 (observe .layer와 동일한 이유 — 깜빡임 방지) */ main.new-page .orbit .orbit-visual .layer:not(.bg) {position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 50% 50%; z-index: 4; opacity: 0;} main.new-page .orbit .content {position: absolute; top: 5%; left: 0; right: 0; z-index: 10; padding: 0 8%; display: flex; align-items: flex-start; justify-content: space-between; gap: 40px;} /* .num 타이포그래피는 공통 규칙(위 "공통: observe/orbit/datacenter" 블록)에서 관리 */ main.new-page .orbit .label {margin: 0; opacity: 0;} main.new-page .orbit .intro {text-align: right; opacity: 0;} /* .title 타이포그래피는 공통 규칙에서 관리하고, 여기서는 desc-list와의 간격만 지정 */ main.new-page .orbit .intro .title {margin-bottom: 20px;} /* line은 opacity 페이드가 아니라 위(위성)→아래(자산) 클립 리빌로 "쏘는" 느낌을 내므로, 미리 숨기는 방식도 opacity 대신 clip-path(아래쪽을 100% 가림)로 대체. z-index도 다른 전경 레이어보다 아래, bg보다는 위로 낮춤(datacenter .layer.line과 동일) */ main.new-page .orbit .orbit-visual .layer.line {z-index: 3; opacity: 1; clip-path: inset(0% 0% 100% 0%);} /* 세로 공간이 부족해서 위쪽이 실제로 크롭될 때, 잘리는 경계가 뚝 끊기지 않고 검은 배경(섹션 background:#000)으로 자연스럽게 스며들도록 하는 페이드 — 크롭이 안 일어나는 화면에서도 원래 이미지 상단이 어차피 짙은 우주 배경이라 위화감 없이 자연스러운 비네트로 보임. z-index:2 — bg(1) 바로 위, 위성/라인(3~4) 및 .content(10)보다는 아래(사용자 요청). 2026-07-27: 좌측 경계 그라데이션 복원(5%, .infra .visual-area::before와 동일 원리) */ main.new-page .orbit .orbit-visual::before {content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to bottom, #000, rgba(0, 0, 0, 0)) top / 100% 15% no-repeat, linear-gradient(to right, #000, rgba(0, 0, 0, 0)) left / 5% 100% no-repeat;} /* 하단도 대칭으로 페이드 — .orbit이 크롭 없이 전체가 다 보이는 화면(세로 공간이 충분한 경우)에서 위쪽만 어두워지고 아래쪽은 뚝 끊긴 채 다음 섹션으로 넘어가면 위아래가 안 어울리므로, 다음 섹션으로 넘어가는 경계도 동일하게 검은 배경으로 스며들도록 처리. 2026-07-27: 우측 경계 그라데이션 복원(5%). .diagram-area 폭이 calc() 기반 소수점 값이라 background-position:right 앵커가 픽셀 반올림 오차로 1~2px 새 보이는 버그가 있어서, inset:0 대신 right:-2px로 실제 경계보다 살짝 오버스캔시키고 .diagram-area의 overflow:hidden이 그 여분을 잘라내게 함(왼쪽은 항상 정확히 0이라 문제 없어서 안 건드림) */ main.new-page .orbit .orbit-visual::after {content: ''; position: absolute; top: 0; right: -2px; bottom: 0; left: 0; z-index: 2; pointer-events: none; background: linear-gradient(to top, #000, rgba(0, 0, 0, 0)) bottom / 100% 15% no-repeat, linear-gradient(to left, #000, rgba(0, 0, 0, 0)) right / 5% 100% no-repeat;} @media (max-width: 1023px) { /* 2026-07-26: 레터박스 박스 폭 공식이 헤더 여백을 이미 계산해서 top:5%가 모든 화면에서 일관되게 동작하므로, 예전에 있던 top 고정값 오버라이드는 더 이상 필요 없어져서 제거 */ main.new-page .orbit .content { padding: 0 6%; } main.new-page .orbit .intro .title { margin-bottom: 16px; } } @media (min-width: 768px) { /* 모바일 전용 레이어(800:1730 세트)는 PC/태블릿에서 숨김. 2026-07-27: 셀렉터에서 .orbit-visual을 뺌 — bg-m이 .orbit-pin 직속으로 옮겨가면서 .orbit-visual 하위 조건에 더 이상 매칭되지 않아, PC에서 800x1730 원본 이미지가 통째로 페이지에 노출되고 .orbit 섹션 높이까지 부풀리던 버그가 있었음 */ main.new-page .orbit .bg-m, main.new-page .orbit .sat-m, main.new-page .orbit .arrow-m, main.new-page .orbit .line-m, main.new-page .orbit .group-m { display: none; } } @media (max-width: 767px) { /* 2026-07-27: 실기기 터치스크롤에서 scroller.disabled 기반 순간 잠금이 안 먹혀서(common.js가 isMobile일 때 wheel 리스너를 아예 안 닮 — PC 전용 메커니즘), .observe와 동일한 진짜 position:sticky pin으로 전환. .orbit 자체에 있던 overflow:hidden은 sticky의 기준이 되는 스크롤 컨테이너 계산을 방해할 수 있어서(자식이 절대 안 붙는 유명한 버그) visible로 풀고, 대신 스크롤 여유(핀 지속 시간)를 주기 위해 height를 150vh로 늘림 */ /* 2026-07-27: 섹션 높이(스크롤 runway)는 --stable-vh(new-page.js가 로드 시점에 px로 고정, 주소창 변화 무시)를 기준으로 잡아서 스크롤 중 섹션이 밀리지 않게 함. 반대로 pin 높이는 100dvh로 둬서 주소창이 접히든 펼쳐지든 항상 화면을 정확히 꽉 채움 — 이 조합이라야 "고정 시점은 안 흔들리면서 화면엔 여백도 안 생기는" 상태가 됨 */ main.new-page .orbit { height: calc(var(--stable-vh, 100vh) * 1.5); overflow: visible; } /* 2026-07-27 2차: 전경 에셋이 여백 없이 트림된 698x1012로 교체되면서, 예전처럼 letterbox 크기를 CSS 변수로 계산해 텍스트 위치를 역산할 필요가 없어짐 — pin을 세로 flex로 만들어 텍스트(고정 높이)를 위에, 이미지(남는 공간 전부)를 아래에 두는 .observe와 동일한 구조로 단순화. 이미지는 아래 object-fit:contain이 남은 공간에 맞춰 알아서 축소되므로 기기별 높이 계산이 아예 불필요해짐(375x667처럼 세로가 빠듯한 기기도 자동 대응) */ main.new-page .orbit-pin { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; } /* 배경: letterbox를 벗어나 화면 좌우를 꽉 채우고(100vw), 넘치는 세로분만 cover로 크롭. 전경(위성/차량/지상국)은 letterbox 안에 그대로 있어서 잘리지 않음. 2026-08월: webp 작업으로 가 되면서 bg-m이 .orbit-pin의 직계 자식이 아니게 됨 — 직계자식(>) 셀렉터를 하위(descendant) 셀렉터로 완화해서 래핑 여부와 무관하게 매칭되도록 수정(사용자가 실기기에서 발견) */ main.new-page .orbit .orbit-pin .layer.bg-m { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; z-index: 1; opacity: 1; } /* 상하 경계 그라데이션도 배경과 같은 영역(pin 전체)을 덮도록 이동 — letterbox 폭에만 걸려 있으면 넓어진 배경의 좌우 끝부분에 그라데이션이 안 걸려서 밝은 세로 띠가 생기고, 그 구간만 텍스트 가독성이 떨어짐 */ main.new-page .orbit .orbit-visual::before, main.new-page .orbit .orbit-visual::after { display: none; } main.new-page .orbit-pin::before, main.new-page .orbit-pin::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; } /* 좌우 경계 그라데이션 제거 요청(767px 이하) — 상하 페이드만 남김. .infra 모바일에 이미 적용된 것과 동일한 방식 */ main.new-page .orbit-pin::before { background: linear-gradient(to bottom, #000, rgba(0, 0, 0, 0)) top / 100% 22% no-repeat; } main.new-page .orbit-pin::after { background: linear-gradient(to top, #000, rgba(0, 0, 0, 0)) bottom / 100% 15% no-repeat; } /* 2026-07-27: 데스크톱 레이어(1920:1080, 위성 6개+라인 7개 개별) 숨기고 모바일 전용 합성 레이어(800:1730, orbit_m_*)만 노출 */ main.new-page .orbit .orbit-visual .bg, main.new-page .orbit .orbit-visual .sat, main.new-page .orbit .orbit-visual .arrow, main.new-page .orbit .orbit-visual .line, main.new-page .orbit .orbit-visual .group { display: none; } /* .content는 .diagram-area의 자식(형제 아님)이므로 세로 flex는 여기에 걸어야 함 — 텍스트(.content)를 order:-1로 위에, 이미지(.orbit-visual)를 남는 공간 전부(flex:1)로 아래에. 고정 aspect-ratio를 안 쓰고 안쪽 레이어의 object-fit:contain에 맡기므로, 세로가 빠듯한 기기에서는 이미지가 알아서 작아지고 넉넉한 기기에서는 폭 100%까지 커짐 — 기기별 분기 불필요 */ main.new-page .orbit .diagram-area { width: 100%; aspect-ratio: auto; height: 100%; overflow: visible; display: flex; flex-direction: column; padding-top: calc(var(--header-height) + 10px); } /* 2026-07-27: 이미지가 텍스트/화면 하단에 딱 붙어 답답해 보여서 상하 여백 추가. padding이 아니라 margin을 쓰는 이유 — 안쪽 레이어들이 position:absolute; inset:0이라 부모의 padding을 무시하고 박스 전체를 채워버려서 padding으로는 여백이 안 생김(실측 확인). margin은 flex 아이템 박스 자체를 줄이므로 레이어도 그만큼 작아지며 여백이 생김 */ main.new-page .orbit .orbit-visual { position: relative; inset: auto; width: 100%; height: auto; flex: 1; min-height: 0; margin: 20px 0; } /* 모든 전경 레이어가 같은 박스에서 같은 비율로 축소되므로 서로 간의 정합은 그대로 유지됨. bottom 정렬이라 이미지가 작아져도 항상 화면 아래쪽에 붙어 있음 */ main.new-page .orbit .orbit-visual .layer.sat-m, main.new-page .orbit .orbit-visual .layer.arrow-m, main.new-page .orbit .orbit-visual .layer.line-m, main.new-page .orbit .orbit-visual .layer.group-m { object-fit: contain; object-position: center bottom; } /* 2026-07-27: 선택자에 .layer를 포함시켜 specificity를 base 규칙(.layer:not(.bg), 클래스 4개 분량)과 동일하게 맞춤 — .line-m만 쓰면 클래스 3개라 나중에 나와도(source order) 밀려서 opacity:0/z-index:4가 계속 이겨버려 라인이 전혀 안 보이는 버그가 있었음 (bg-m은 letterbox 밖으로 빠져서 위 .orbit-pin > .layer.bg-m 규칙이 담당) */ main.new-page .orbit .orbit-visual .layer.line-m { z-index: 3; opacity: 1; clip-path: inset(0% 0% 100% 0%); } /* PC는 라벨(번호)과 타이틀이 좌/우 양 끝에 따로 있지만(디자인상 의도적 배치), 모바일은 observe .label과 동일한 형식(번호 위 / 타이틀 아래 세로 스택, gap:10px)으로 통일. 2026-07-27 2차: pin이 세로 flex가 되면서 absolute 배치가 불필요해짐 — 일반 흐름의 첫 자식으로 두면 pin의 padding-top(헤더+10px)이 그대로 .observe와 같은 시작 위치를 만듦 */ main.new-page .orbit .content { position: relative; top: auto; left: auto; right: auto; transform: none; width: 100%; flex: none; order: -1; flex-direction: column; align-items: start; gap: 10px; padding: 0 24px; z-index: 10; } main.new-page .orbit .intro { text-align: left; } main.new-page .orbit .intro .title { margin-bottom: 12px; } } /* ===== datacenter (우주 AI 데이터센터 — orbit과 동일한 구조/모션 원리 재사용. intro 하단 desc-list(국방 위성 데이터/수집·처리·분석/AI 기반 실시간 정보 제공)는 orbit과 동일 스타일. diagram-area의 bg-as-layer 풀블리드 구조(1920/1080 캔버스 공유)도 orbit과 동일) ===== */ main.new-page .datacenter {position: relative; padding: 0 0 0; overflow: hidden; background: #000;} /* 2026-07-26 전면 개편: orbit과 동일하게 "브라우저 폭 100% 꽉 채우기 + 크롭"에서 "항상 정확한 1920:1080 비율을 유지하는 레터박스 박스"로 전환 — 상세 이유는 orbit .diagram-area 주석 참고 */ main.new-page .datacenter .diagram-area {position: relative; width: min(100%, calc((100vh - var(--header-height) - 40px) * 1920 / 1080)); aspect-ratio: 1920 / 1080; margin: 0 auto; overflow: hidden;} main.new-page .datacenter .datacenter-visual {position: absolute; inset: 0; width: 100%; height: 100%;} /* 박스 비율이 이미지 원본 비율과 항상 정확히 일치하므로 object-fit/object-position 없이 width:100%;height:100%만으로 크롭·왜곡 없이 1:1로 표시됨. 리빌 대기 없이 처음부터 바로 보임 (observe/orbit 배경과 동일한 컨벤션 — 배경은 항상 즉시 보이고 전경만 리빌). 2026-07-26: z-index 재정렬(사용자 요청, orbit과 동일) — bg(1) < 경계 그라데이션(2) < 위성/라인 등 전경 이미지(3~4) < .content 텍스트(10) 순서 */ main.new-page .datacenter .datacenter-visual .layer.bg {position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; opacity: 1;} main.new-page .datacenter .datacenter-visual .layer:not(.bg) {position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 50% 50%; z-index: 4; opacity: 0;} main.new-page .datacenter .content {position: absolute; top: 5%; left: 0; right: 0; z-index: 10; padding: 0 8%; display: flex; align-items: flex-start; justify-content: space-between; gap: 40px;} /* .num 타이포그래피는 공통 규칙(위 "공통: observe/orbit/datacenter" 블록)에서 관리 */ main.new-page .datacenter .label {margin: 0; opacity: 0;} main.new-page .datacenter .intro {text-align: right; opacity: 0;} /* .title 타이포그래피는 공통 규칙에서 관리하고, 여기서는 desc-list와의 간격만 지정 */ main.new-page .datacenter .intro .title {margin-bottom: 20px;} /* line(위성/자산 사이 연결선)은 다른 전경 레이어보다 아래, bg보다는 위에 깔리게 z-index를 낮춤. orbit/network의 line과 동일하게 opacity 페이드가 아니라 위→아래 방향 clip-path 리빌로 "그어지는" 느낌을 냄 — 3개 다 소스(위성/날개)가 위쪽, 도착점(마커)이 아래쪽이라 top-down 리빌이 방향적으로 자연스러움 */ main.new-page .datacenter .datacenter-visual .layer.line {z-index: 3; opacity: 1; clip-path: inset(0% 0% 100% 0%);} /* 세로 공간이 부족해서 위쪽이 실제로 크롭될 때, 잘리는 경계가 뚝 끊기지 않고 검은 배경(섹션 background:#000)으로 자연스럽게 스며들도록 하는 페이드 — 크롭이 안 일어나는 화면에서도 원래 이미지 상단이 어차피 짙은 우주 배경이라 위화감 없이 자연스러운 비네트로 보임. z-index:2 — bg(1) 바로 위, 위성/라인(3~4) 및 .content(10)보다는 아래(사용자 요청). 2026-07-27: 좌측 경계 그라데이션 복원(5%, orbit과 동일) */ main.new-page .datacenter .datacenter-visual::before {content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to bottom, #000, rgba(0, 0, 0, 0)) top / 100% 15% no-repeat, linear-gradient(to right, #000, rgba(0, 0, 0, 0)) left / 5% 100% no-repeat;} /* 하단도 대칭으로 페이드(orbit과 동일한 이유) — .datacenter 다음 섹션(.infra)의 상단 페이드와 맞물려서 경계가 위아래로 자연스럽게 어우러지도록 함. 2026-07-27: 우측 경계 그라데이션 복원(5%). orbit .orbit-visual::after와 동일한 이유로 right:-2px 오버스캔 적용(.diagram-area의 overflow:hidden이 여분을 잘라냄) */ main.new-page .datacenter .datacenter-visual::after {content: ''; position: absolute; top: 0; right: -2px; bottom: 0; left: 0; z-index: 2; pointer-events: none; background: linear-gradient(to top, #000, rgba(0, 0, 0, 0)) bottom / 100% 15% no-repeat, linear-gradient(to left, #000, rgba(0, 0, 0, 0)) right / 5% 100% no-repeat;} /* line-circle(날개 위성들을 잇는 궤도 호, 2026-07-24 신규): 위 line과 달리 수렴선이 아니라 가로로 넓게 걸치는 곡선이라 top-down clip-path 리빌은 방향적으로 안 어울려서, 단순 opacity 페이드로 리빌(JS에서 처리). z-index/레이어 위치는 line과 동일하게 wing/sat보다 아래 */ main.new-page .datacenter .datacenter-visual .layer.line-circle {z-index: 3;} @media (min-width: 768px) { /* 모바일 전용 레이어(800:1000 세트)는 PC/태블릿에서 숨김 (.orbit과 동일한 패턴) */ main.new-page .datacenter .bg-m, main.new-page .datacenter .wing-m, main.new-page .datacenter .line-m, main.new-page .datacenter .line-circle-m, main.new-page .datacenter .marker-main-m { display: none; } } @media (max-width: 1023px) { main.new-page .datacenter { padding: 80px 0 120px; } /* 2026-07-26: 레터박스 박스 폭 공식이 헤더 여백을 이미 계산하므로 top 고정값 오버라이드 제거 */ main.new-page .datacenter .content { padding: 0 6%; } main.new-page .datacenter .intro .title { margin-bottom: 16px; } } @media (max-width: 767px) { /* 2026-07-27: .orbit과 동일한 이유로 진짜 position:sticky pin 사용(실기기 터치스크롤에서 scroller.disabled 잠금이 안 먹힘). .datacenter의 기존 padding(80px/60px)도 pin 구조와 안 맞아서 제거하고, --stable-vh 기반 고정 높이로 스크롤 여유(runway)를 만듦. overflow:hidden도 sticky 기준 컨테이너 계산을 방해하므로 visible로 풂 */ main.new-page .datacenter { padding: 0; height: calc(var(--stable-vh, 100vh) * 1.5); overflow: visible; } main.new-page .datacenter-pin { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; } main.new-page .datacenter .diagram-area { position: relative; width: 100%; height: 100%; aspect-ratio: auto; margin: 0; overflow: visible; } /* 2026-07-27: letterbox(1920:1080) 방식을 버리고, 이미지 묶음을 화면 하단에 항상 폭 100%(=100vw, .diagram-area가 이미 뷰포트 폭과 같음)로 고정 배치 — 새 800:1000 모바일 전용 에셋 비율. 텍스트(.content)는 아래에서 별도로 화면 상단에 절대배치되므로, 이 둘은 서로 완전히 독립적인 위치 계산이라 겹쳐도(사용자 확인) 레이아웃이 깨지지 않음 */ /* height:auto 명시 필요 — base 규칙의 height:100%가 미디어쿼리에서도 안 지워진 채 남아있으면 width/height가 둘 다 확정값이 되어 aspect-ratio가 무시되고 박스가 그냥 100vh로 늘어나버림 */ main.new-page .datacenter .datacenter-visual { position: absolute; inset: auto; left: 0; right: 0; bottom: 0; width: 100%; height: auto; aspect-ratio: 800 / 1000; } /* 데스크톱 레이어 숨김, 모바일 전용(-m) 레이어만 노출 */ main.new-page .datacenter .datacenter-visual .bg, main.new-page .datacenter .datacenter-visual .wing, main.new-page .datacenter .datacenter-visual .line-circle, main.new-page .datacenter .datacenter-visual .line, main.new-page .datacenter .datacenter-visual .marker-main { display: none; } /* specificity를 base 규칙(.layer:not(.bg), .layer.line 등, 클래스 2개)과 맞추기 위해 .layer 포함 (.orbit 작업 때 겪은 것과 동일한 함정) */ main.new-page .datacenter .datacenter-visual .layer.bg-m { z-index: 1; opacity: 1; } main.new-page .datacenter .datacenter-visual .layer.line-m { z-index: 3; opacity: 1; clip-path: inset(0% 0% 100% 0%); } main.new-page .datacenter .datacenter-visual .layer.line-circle-m { z-index: 3; } /* 상하 그라데이션(::before/::after)은 .datacenter-visual 기준(이미지 박스 자체)을 그대로 유지 — .orbit처럼 화면 전체(pin)로 옮길 필요 없음(사용자 확인). 이미지가 100vh를 다 안 채우고 화면 상단에 빈 공간이 남는 구조라, 그 빈 공간까지 어둡게 깔면 오히려 텍스트 배경과 안 맞을 수 있어 이미지 박스 안으로만 한정하는 게 맞음. 다만 좌우 경계 그라데이션은 제거 요청으로 빼서 상하 페이드만 남김(.orbit/.infra 모바일과 동일 처리) */ main.new-page .datacenter .datacenter-visual::before { background: linear-gradient(to bottom, #000, rgba(0, 0, 0, 0)) top / 100% 15% no-repeat; } main.new-page .datacenter .datacenter-visual::after { background: linear-gradient(to top, #000, rgba(0, 0, 0, 0)) bottom / 100% 15% no-repeat; } /* 텍스트: PC의 absolute 오버레이 배치를 유지하되, .observe/.orbit과 동일한 형식(번호 위/ 타이틀 아래 세로 스택)으로 통일. .diagram-area 기준 절대배치라 이미지와 독립적으로 화면 상단에 위치 */ main.new-page .datacenter .content { position: absolute; top: calc(var(--header-height) + 10px); left: 0; right: auto; width: 100%; z-index: 10; flex-direction: column; align-items: start; gap: 10px; padding: 0 24px; } main.new-page .datacenter .intro { text-align: left; } main.new-page .datacenter .intro .title { margin-bottom: 12px; } } /* ===== securing2 (우주 AI 데이터센터 — securing과 배경/모션은 동일하지만 별도 섹션이라 CSS를 공유하지 않고 그대로 복제해서 독립적으로 관리. 지금은 예시 텍스트로 구조만 잡은 상태) ===== */ main.new-page .securing2 {position: relative; height: 200vh;} main.new-page .securing2 .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;} main.new-page .securing2 .bg img {width: 100%; height: 100%; object-fit: cover;} main.new-page .securing2 .texts {position: absolute; left: 50%; top: 20%; max-width: 640px; transform: translateX(-50%); text-align: center;} main.new-page .securing2 .texts h3 {margin: 0; font-family: "Hanwha Gothic"; font-size: 56px; font-weight: 500; line-height: 1.2; color: #fff;} main.new-page .securing2 .texts .line {display: block; overflow: hidden;} main.new-page .securing2 .texts .line span {display: block;} /* absolute로 따로 안 띄우고 .texts(h3) 바로 아래에 일반 흐름으로 배치. 고정 width 대신 fit-content로 본인 콘텐츠 크기만큼만 차지하고, margin auto로 그 크기 그대로 가운데 정렬 */ main.new-page .securing2 .list {width: fit-content; margin: 40px auto 0; padding: 0; list-style: none;} main.new-page .securing2 .list li {display: flex; align-items: center; justify-content: center; gap: 24px;} main.new-page .securing2 .list .num, main.new-page .securing2 .list .label {padding: 20px 0;} main.new-page .securing2 .list .num {flex-shrink: 0; width: 64px; font-family: "Hanwha Gothic"; font-size: 40px; font-weight: 700; line-height: 40px; color: var(--main-color); text-align: left;} main.new-page .securing2 .list .label {flex: 1; font-family: "Pretendard"; font-size: 20px; font-weight: 600; line-height: 40px; color: #fff; text-align: left;} @media (max-width: 1440px) { main.new-page .securing2 .texts h3 { font-size: 44px; } main.new-page .securing2 .list .num { font-size: 32px; width: 52px; line-height: 32px; } main.new-page .securing2 .list .label { font-size: 17px; line-height: 32px; } } @media (max-width: 1023px) { main.new-page .securing2 .texts h3 { font-size: 36px; } main.new-page .securing2 .list li { gap: 16px; } main.new-page .securing2 .list .num, main.new-page .securing2 .list .label { padding: 16px 0; } main.new-page .securing2 .list .num { font-size: 26px; width: 44px; line-height: 26px; } main.new-page .securing2 .list .label { font-size: 15px; line-height: 26px; } } @media (max-width: 767px) { main.new-page .securing2 .texts { position: static; max-width: none; padding: 120px 24px 0; transform: none; } main.new-page .securing2 .texts h3 { font-size: 30px; } main.new-page .securing2 .list .num, main.new-page .securing2 .list .label { padding: 14px 0; } main.new-page .securing2 .list .num { font-size: 22px; width: 36px; line-height: 22px; } main.new-page .securing2 .list .label { font-size: 14px; line-height: 22px; } } /* ===== infra (통합 우주 인프라 — 2026-07-26부터 orbit/datacenter와 동일하게 1920:1080 레터박스 박스 구조(아래 .visual-area 참고). infra_* 레이어 전부 1920x1080 동일 캔버스(2026-07-24 이전엔 2200x1080). ring(궤도 장식 타원+고도 라벨)은 bg처럼 항상 보이는 배경성 레이어 ===== */ main.new-page .infra {position: relative;} /* 2026-07-26 전면 개편: orbit/datacenter와 동일하게 "브라우저 폭 100% 꽉 채우기 + 크롭"에서 "항상 정확한 1920:1080 비율을 유지하는 레터박스 박스"로 전환 — 상세 이유는 orbit .diagram-area 주석 참고. 크롭 자체가 없어지므로, 예전에 있던 ".ring 고도 900km 라벨"이나 ".layer.desc 정렬 어긋남" 같은 크롭발 문제들도 전부 원천 차단됨(더 이상 object-position으로 안전지대를 골라야 할 필요가 없음) */ main.new-page .infra .visual-area {position: relative; width: min(100%, calc((100vh - var(--header-height) - 40px) * 1920 / 1080)); aspect-ratio: 1920 / 1080; margin: 0 auto; overflow: hidden;} /* 2026-07-26: 이전 섹션(.datacenter)의 하단 페이드와 맞물려서 경계가 위아래로 자연스럽게 어우러지도록, .infra 상단에도 동일 톤의 검은 그라데이션을 얹음. z-index 재정렬(사용자 요청) — bg(1) 바로 위(2)에 두고, ring/line/icon 등 전경 이미지(3~5)와 .title(6)은 전부 그 위로. 2026-07-26: 좌측 그라데이션(5%)도 같은 가상요소에 두 번째 배경 레이어로 추가(orbit과 동일 이유) */ main.new-page .infra .visual-area::before {content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to bottom, #000, rgba(0, 0, 0, 0)) top / 100% 15% no-repeat, linear-gradient(to right, #000, rgba(0, 0, 0, 0)) left / 2% 100% no-repeat;} /* 박스 비율이 이미지 원본 비율과 항상 정확히 일치하므로 object-fit/object-position 없이 width:100%;height:100%만으로 크롭·왜곡 없이 1:1로 표시됨 */ main.new-page .infra .layer.bg {position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;} main.new-page .infra .layer:not(.bg) {position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 50% 50%; z-index: 5; opacity: 0;} /* ring(궤도 호+고도 라벨) — 2026-07-24: 항상 바로 보이던 정적 장식에서, 오른쪽에서 왼쪽으로 뿌려지듯 드러나는 clip-path 리빌로 변경(사용자 요청). left inset을 100%(안 보임)→0%(전체 노출)로 줄여가면 보이는 영역이 우측 끝에서 시작해 좌측으로 넓어짐 */ main.new-page .infra .layer.ring {z-index: 3; opacity: 1; clip-path: inset(0% 0% 0% 100%);} main.new-page .infra .layer.line {z-index: 4; opacity: 1; clip-path: inset(0% 0% 100% 0%);} /* 하단도 대칭으로 페이드(위 상단 페이드와 동일한 이유) — 다음 섹션(.skill)의 상단 페이드와 맞물려서 경계가 위아래로 자연스럽게 어우러지도록 함. 우측 그라데이션(5%)도 함께 */ main.new-page .infra .visual-area::after {content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to top, #000, rgba(0, 0, 0, 0)) bottom / 100% 15% no-repeat, linear-gradient(to left, #000, rgba(0, 0, 0, 0)) right / 2% 100% no-repeat;} /* 참고 이미지의 네온 글로우 느낌 — 흰색 코어 + 하늘색 계열 blur를 겹쳐서 표현. 최초 버전(8/20/44px, 0.9/0.85/0.6)과 축소 버전(4/10/20px, 0.7/0.5/0.35)의 중간값으로 조정. 2026-07-25: 참고 캡처처럼 화면 정중앙에 오도록 top을 24%→50%로 이동(가로는 기존 left:50%+transform으로 이미 중앙) */ main.new-page .infra .title {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 6; margin: 0; opacity: 0; font-family: "Hanwha Gothic"; font-weight: 700; font-size: 40px; color: #fff; text-align: center; white-space: nowrap; text-shadow: 0 0 6px rgba(255, 255, 255, 0.8), 0 0 15px rgba(120, 190, 255, 0.68), 0 0 32px rgba(80, 160, 255, 0.48);} /* 좌측 상단 보조 타이틀("우주주권 확보")과 라벨 목록("독자 저궤도"/"우주 AI"/"초저궤도 초고해상도")이 합쳐진 infra_desc.png. 한때 크롭 방향(object-position) 예외 처리를 뒀다가 다른 레이어와 어긋나 보이는 문제가 있었으나, 2026-07-26 레터박스 전환으로 크롭 자체가 아예 없어지면서 그 문제도 함께 해결됨(더 이상 예외 처리 불필요). z-index도 다른 :not(.bg) 레이어와 동일한 기본값(5, 상단 페이드보다 위)이면 충분해져서 별도 override 제거 */ @media (max-width: 1440px) { main.new-page .infra .title { font-size: 32px; } } @media (max-width: 1023px) { main.new-page .infra .title { font-size: 24px; } main.new-page .infra .pretitle{ font-size:26px; } } @media (min-width: 768px) { /* 모바일 전용 레이어(800:1094 세트)는 PC/태블릿에서 숨김 (.orbit/.datacenter와 동일한 패턴) */ main.new-page .infra .bg-m, main.new-page .infra .line-m, main.new-page .infra .line-circle-m, main.new-page .infra .icon-m, main.new-page .infra .marker-m, main.new-page .infra .infratext-m, main.new-page .infra .desc-m, main.new-page .infra .pretitle { display: none; } } @media (max-width: 767px) { /* 2026-07-27: .orbit/.datacenter와 동일한 이유로 실기기 터치스크롤 대응 진짜 pin 전환 + --stable-vh 기반 고정 높이(주소창 대응) */ main.new-page .infra { height: calc(var(--stable-vh, 100vh) * 1.5); overflow: visible; } main.new-page .infra-pin { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; } /* 데스크톱 레이어 숨김 — "통합 우주 인프라"(.title, 중앙 네온 글로우)는 2026-07-28 이전엔 새 이미지에도 포함돼 있다고 추정해서 마크업

만 숨겼었으나, 실제로는 bg-m에 없는 것으로 확인되어 infratext-m 이미지 레이어를 별도로 추가함(아래) —

는 그 대체 이미지와 중복되지 않도록 계속 숨김 */ main.new-page .infra .layer.bg, main.new-page .infra .layer.ring, main.new-page .infra .layer.line, main.new-page .infra .layer.marker, main.new-page .infra .layer.desc, main.new-page .infra .layer.icon, main.new-page .infra .title { display: none; } /* 2026-07-27: 하단 고정 대신, pretitle 아래 남는 세로 공간(100dvh - pretitle 높이) 안에서 상하 가운데 정렬 — top/bottom을 모두 지정하고 margin:auto 0으로 센터링(컨테이닝 블록인 .infra-pin이 height:100dvh로 확정 높이라 가능). top 값은 pretitle의 top(header+10px) + 실측 렌더 높이(20px, 한 줄 고정) */ main.new-page .infra .visual-area { position: absolute; inset: auto; left: 0; right: 0; top: calc(var(--header-height) + 30px); bottom: 0; margin: auto 0; width: 100%; height: auto; aspect-ratio: 800 / 1094; overflow: visible; } /* specificity를 base 규칙(.layer:not(.bg), .layer.bg, 클래스 2개)과 맞추기 위해 .layer 포함 (.orbit/.datacenter 작업 때 겪은 함정과 동일) */ main.new-page .infra .layer.bg-m { z-index: 1; opacity: 1; } main.new-page .infra .layer.line-m { z-index: 4; opacity: 1; clip-path: inset(0% 0% 100% 0%); } main.new-page .infra .layer.line-circle-m { z-index: 3; opacity: 1; clip-path: inset(0% 0% 0% 100%); } /* infratext-m("통합 우주 인프라" 네온 텍스트 이미지) — PC .title(z-index:6)과 동일하게 다른 전경 레이어(icon-m/marker-m/desc-m, 전부 기본값 5)보다 위. opacity는 base .layer:not(.bg) 기본값(0)을 그대로 쓰고 JS(playMobile)에서 title과 동일한 타이밍에 페이드인시킴. marker-m(서버랙)은 icon-m/desc-m과 같은 역할(opacity 페이드 리빌)이라 별도 override 없이 기본값(z-index:5, opacity:0) 그대로 사용 */ main.new-page .infra .layer.infratext-m { z-index: 6; } /* "우주주권 확보" — .datacenter .intro .title과 동일한 폰트 스타일(공통 규칙 767px 값인 20px 기준). 이미지와 독립적으로 화면 상단에 절대배치 */ main.new-page .infra .pretitle { position: absolute; top: calc(var(--header-height) + 10px); left: 0; width: 100%; z-index: 10; margin: 0; padding: 0 24px; opacity: 0; font-family: "Hanwha Gothic"; font-weight: 700; font-size: 24px; color: var(--main-color); text-align: left; } /* ::before/::after 둘 다 새 800:1094 지오메트리에 맞게 재정의 — 기존 desktop 규칙은 좌/우 2% 사이드 글로우까지 포함돼 있어 그대로 살리면 사이드에 원치 않는 그라데이션이 함께 나타남(실사용자 확인) → 좌우 없이 상/하 페이드만 남긴 별도 배경으로 교체. 대상은 .infra-pin 전체가 아니라 이미지 영역(.visual-area) 자체 — pretitle이 있는 상단 공백까지 어둡게 깔리지 않도록 함 */ main.new-page .infra .visual-area::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to bottom, #000, rgba(0, 0, 0, 0)) top / 100% 15% no-repeat; } main.new-page .infra .visual-area::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to top, #000, rgba(0, 0, 0, 0)) bottom / 100% 15% no-repeat; } } /* ===== network (2026-07-21 재변경 — PC/태블릿은 .observe와 동일하게 .sticky 핀 고정 구조로 전환. .network 자체를 세로로 늘려(height) 스크롤 여유를 만들고, 그 안의 .sticky(전역 CSS로 top:0/height:100vh/overflow:hidden)에 실제 콘텐츠(.visual-area)를 담아 화면에 고정시킴 — 자세한 트리거 타이밍은 new-page.js의 .network 스크롤 핸들러 참고. network_bg + 레이어들 전부 2200x1080 동일 캔버스라 좌표 계산 없이 겹쳐서 정렬. orbit과 달리 좌우 여백 없이 브라우저 폭 100%를 채우고 높이는 bg의 실제 렌더 높이를 그대로 따름(잘림 없음, vh로 강제로 맞추지 않음) ===== */ /* .sticky(100vh) 핀 구간 + 스크롤 진행률로 애니메이션을 트리거할 여유 구간 — 눈대중 값이라 실제 화면으로 보면서 조정 필요(너무 짧으면 타이틀+배경 보자마자 바로 애니메이션이 트리거되고, 너무 길면 애니메이션이 다 끝난 뒤에도 한참 더 스크롤해야 다음 섹션으로 넘어가게 됨) */ main.new-page .network {position: relative; height: 220vh;} /* .visual-area는 bg 원본 비율(2200:1080)대로 height:auto라, 뷰포트 비율이 그보다 좁고 긴(일반 16:9 이하) 화면에서는 100vh인 .sticky보다 낮게 렌더링됨 — 위쪽에 붙여두면 하단에만 여백이 남아 pin된 채로 어색하게 떠 보여서, .sticky를 flex로 세로 가운데 정렬함(전역 .sticky는 다른 섹션과 공유하므로 안 건드리고 .network 전용으로만 오버라이드) */ main.new-page .network .sticky {display: flex; align-items: center;} /* 여백 없이 y=0부터 꽉 채움 — #header는 이 섹션이 화면에 걸쳐있는 동안 JS로 숨겨지므로 이미지 위쪽(위성/타이틀)이 가려지지 않음 */ /* sea 요소들이 x축으로 흔들리는 모션 때문에 화면 밖으로 살짝 삐져나갈 수 있어서, 그게 가로 스크롤을 만들지 않도록 여기서 잘라냄 */ main.new-page .network .visual-area {position: relative; width: 100%; overflow: hidden;} /* bg를 position:relative로 일반 흐름에 두어서 이 이미지의 실제 렌더 높이(폭 100% 기준 auto)가 .visual-area의 높이를 그대로 정하게 함 — 나머지 레이어는 전부 이 bg 위에 absolute로 얹힘 */ /* 확대→축소 zoom 모션은 뺐음(스크롤 중앙 잠금과 겹칠 때 배경만 계속 움직이는 것처럼 보여 덜컹거리는 느낌이 있었음) — 대신 단순 페이드인만 사용, 리빌 전까지 미리 숨겨둠 */ main.new-page .network .layer.bg {position: relative; display: block; width: 100%; height: auto; z-index: 1; opacity: 0;} /* 2026-07-22: sky/sea/floor/main 30여 개가 전부 같은 z-index를 공유한 채 각자 무한 반복 GSAP 애니메이션으로 계속 움직여서 깜빡이는 문제로 여기 will-change:transform을 걸었었는데, 실제 사용자 환경에서는 오히려 개선되지 않았고(이 섹션에서만 깜빡임/일부 이미지 미표시가 계속 재현됨 — .observe/.orbit처럼 동시 애니메이션 레이어가 훨씬 적은 섹션은 문제 없음), 31개 레이어를 동시에 개별 GPU 레이어로 승격시키는 것 자체가 GPU 메모리/래스터링에 부담을 줘서 증상을 악화시켰을 가능성이 있어 실험적으로 제거함 — 다음에 할 일 참고, 원인 미확정 */ main.new-page .network .layer:not(.bg) {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;} /* line만 z-index를 가장 낮게 둬서 항상 다른 모든 레이어 뒤에 깔리게 함(등장은 두 번째지만 시각적으론 제일 뒤) */ /* 우측상단 모서리 한 점에서 시작해 부채꼴로 펼쳐지며 전체를 덮는 clip-path 리빌 (orbit의 line clip-path 리빌과 같은 방식 — mask는 브라우저별 alpha/luminance 해석 차이로 의도대로 안 먹혀서 clip-path로 교체) */ main.new-page .network .layer.line {z-index: 2; clip-path: polygon(100% 0%, 100% 0%, 100% 0%, 100% 0%);} /* 리빌 전까지 미리 숨겨둠 (observe/orbit .layer와 동일한 이유 — 깜빡임 방지) */ main.new-page .network .layer.sky, main.new-page .network .layer.sea, main.new-page .network .layer.floor, main.new-page .network .layer.main, main.new-page .network .layer.text {z-index: 3; opacity: 0;} /* .title — 2026-07-21에 숨긴 .infra .title("통합 우주 인프라")을 스타일 그대로 옮겨옴. 위치(top:24%)는 infra_bg.jpg 기준으로 잡혀있던 값이라 network_bg.jpg 위에서 다른 레이어와 겹쳐 보이면 육안 확인 후 조정 필요. 2026-07-22에 좌측상단으로 이동시키는 시도를 했다가 실제 브라우저에서 깜빡임/이미지 미표시 회귀가 발생해 원복함(아래 로그 참고) */ main.new-page .network .title {position: absolute; top: 12%; left: 50%; transform: translate(-50%, -50%); z-index: 5; margin: 0; opacity: 0; font-family: "Hanwha Gothic"; font-weight: 700; font-size: 40px; color: #fff; text-align: center; white-space: nowrap; text-shadow: 0 0 6px rgba(255, 255, 255, 0.8), 0 0 15px rgba(120, 190, 255, 0.68), 0 0 32px rgba(80, 160, 255, 0.48);} @media (max-width: 1440px) { main.new-page .network .title { font-size: 32px; } } @media (max-width: 1023px) { main.new-page .network .title { font-size: 24px; } } /* 기본은 숨김(PC/태블릿) — 767px 이하 미디어쿼리에서만 노출(순서 중요: 이 규칙이 미디어쿼리보다 먼저 나와야 모바일에서 display:inline-flex로 정상 오버라이드됨) */ main.new-page .network-expand-btn {display: none;} @media (max-width: 767px) { main.new-page .network .title { font-size: 18px; white-space: normal; width: 80%; } /* 모바일은 .observe/.skill과 동일하게 pin 고정 없이 전환 — new-page.js에서 스크롤 진행률 기반 트리거 대신 화면에 걸리는 순서대로(타이틀+배경 → 애니메이션) 1회 자동 재생으로 분기함 */ main.new-page .network { height: auto; } main.new-page .network .sticky { position: static; height: auto; overflow: visible; } /* 2026-07-22: 배경(.layer.bg)이 먼저 페이드인되고 그 다음에 이 버튼이 페이드인되도록 playIntro()에서 다뤄야 해서, 다른 리빌 요소와 동일한 컨벤션으로 미리 숨겨둠(깜빡임 방지) */ main.new-page .network-expand-btn { display: inline-flex; align-items: center; position: absolute; right: 16px; bottom: 16px; z-index: 20; padding: 5px 10px; font-family: "Pretendard"; font-size: 11px; font-weight: 600; color: #fff; background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 999px; opacity: 0; } } /* .network-expand-btn/.network-lightbox — 2026-07-22 신규. 모바일에서 .network 다이어그램이 축소돼서 보이는 문제 대응 — 버튼은 기본 숨김(767px 이하에서만 노출, 위 미디어쿼리 참고), 라이트박스는 network_full.jpg(완성 애니메이션 상태를 합쳐둔 정적 이미지) 하나만 보여주는 단순 풀스크린 오버레이라 스크롤/리빌 로직과 무관하게 독립적으로 동작함 */ main.new-page .network-lightbox {position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, 0.95); display: none;} main.new-page .network-lightbox.is-open {display: block;} main.new-page .network-lightbox-scroll {width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; display: flex; align-items: center;} main.new-page .network-lightbox-scroll img {height: 100%; width: auto; max-width: none; display: block;} main.new-page .network-lightbox-close {position: absolute; top: 16px; right: 16px; z-index: 1; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center;} /* 라이트박스가 열려있는 동안 배경 스크롤 방지 */ html.network-lightbox-open {overflow: hidden;} /* ===== skill (securing과 동일한 핀 고정 스크럽 + 텍스트 마스크 리빌 구조. skill_bg.jpg에는 텍스트가 없어서 두 줄 다 HTML 텍스트로 얹음, list는 없음. CSS는 securing과 공유하지 않고 독립적으로 관리) ===== */ main.new-page .skill {position: relative; height: 200vh;} /* 2026-07-26: z-index 재정렬(사용자 요청) — bg(1) < 경계 그라데이션(2) < .texts(10) 순서 */ main.new-page .skill .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; overflow: hidden;} main.new-page .skill .bg img {width: 100%; height: 100%; object-fit: cover;} /* 2026-07-26: 이전 섹션(.infra)의 하단 페이드와 맞물려서 경계가 위아래로 자연스럽게 어우러지도록, 핀 고정된 화면의 맨 위(=.infra에서 넘어온 직후 처음 보이는 영역)에 검은 그라데이션을 얹음. PC/태블릿(핀 고정 구조) 전용 — 모바일은 아래 767px 미디어쿼리에서 .sticky가 position:static으로 풀리면서 이 페이드의 기준점(.sticky 자신의 위쪽)이 사라지므로 숨김 처리 */ main.new-page .skill .sticky::before {content: ''; position: absolute; top: 0; left: 0; right: 0; height: 12%; background: linear-gradient(to bottom, #000, rgba(0, 0, 0, 0)); z-index: 2; pointer-events: none;} main.new-page .skill .texts {position: absolute; left: 50%; top: 38%; transform: translateX(-50%); z-index: 10; max-width: 760px; text-align: center;} main.new-page .skill .texts h3 {margin: 0; font-family: "Hanwha Gothic"; font-size: 42px; font-weight: 300; line-height: 1.5; color: #fff; letter-spacing: -2px;} main.new-page .skill .texts h3 strong {font-weight: 400;} main.new-page .skill .texts .line {display: block; overflow: hidden;} main.new-page .skill .texts .line span {display: block;} main.new-page .skill .texts .accent {font-style: normal; font-weight: 700; color: var(--main-color);} @media (max-width: 1440px) { main.new-page .skill .texts h3 { font-size: 36px; } } @media (max-width: 1023px) { /* left:50%+translateX(-50%)로 가운데 정렬된 상태는 유지, 폭만 좁게 제한 */ main.new-page .skill .texts { max-width: 560px; } main.new-page .skill .texts h3 { font-size: 28px; } } @media (max-width: 767px) { /* 2026-07-27: .orbit/.datacenter/.infra와 동일한 이유로 진짜 pin 전환(사용자 요청) — 기존엔 핀 고정을 버리고 고정 높이(500px) 안에서 화면에 걸리는 순간 1회 자동 재생만 했는데, 그러면 애니메이션이 다 끝나기 전에 스크롤로 지나가버릴 수 있음. .skill은 원래부터 공용 .sticky 클래스를 그대로 쓰고 있어서(.securing/.observe와 동일 — .orbit처럼 별도 -pin 래퍼가 애초에 필요 없었던 케이스), 아래 static 오버라이드만 걷어내면 68/81행의 공용 규칙 (position:sticky, 모바일 100dvh)이 그대로 살아나 진짜 pin이 됨. .sticky::before(상단 경계 그라데이션)도 기준점(.sticky 자신의 top)이 다시 유효해지므로 별도로 숨길 필요 없어짐(제거) */ main.new-page .skill { height: calc(var(--stable-vh, 100vh) * 1.5); } main.new-page .skill .texts { width: 100%; max-width: none; top: 50%; transform: translate(-50%, -50%); padding: 0 24px; } main.new-page .skill .texts h3 { font-size: 24px; } } @media (max-width: 375px) { main.new-page .skill .texts h3 { font-size: 20px; } } /* ===== youtube-area (유튜브 파사드 5개 — PC/모바일 공통, dots+화살표 슬라이드) ===== */ main.new-page .youtube-area {padding: 220px 60px 100px; overflow: hidden;} main.new-page .youtube-area .videos {position: relative; overflow: hidden;} main.new-page .youtube-area .videos-track {display: flex; gap: 40px; width: max-content; transition: transform 0.4s ease-out;} /* 2026-07-27: top:50%는 .videos 컨테이너(영상 프레임+제목 텍스트 포함) 기준이라 버튼이 실제 영상 프레임보다 아래로 처져 보임(사용자 확인) — 영상 프레임(16:9)만의 세로 중심으로 고정. 프레임 너비가 브레이크포인트별 고정값(480/380/calc(100vw-48px))이라 비율로 정확히 계산됨 */ main.new-page .youtube-area .video-nav {position: absolute; top: 135px; z-index: 3; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.6); cursor: pointer; transform: translateY(-50%); transition: background 0.2s ease-out;} main.new-page .youtube-area .video-nav::before {content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; border-top: 2px solid #fff; border-right: 2px solid #fff;} main.new-page .youtube-area .video-nav:hover {background: var(--main-color);} main.new-page .youtube-area .video-nav.prev {left: 16px;} main.new-page .youtube-area .video-nav.prev::before {transform: translate(-30%, -50%) rotate(-135deg);} main.new-page .youtube-area .video-nav.next {right: 16px;} main.new-page .youtube-area .video-nav.next::before {transform: translate(-70%, -50%) rotate(45deg);} main.new-page .youtube-area .video-item {flex-shrink: 0; width: 480px;} main.new-page .youtube-area .video-frame {position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #000;} main.new-page .youtube-area .video-title {margin-top: 14px; font-family: "Hanwha Gothic"; font-size: 16px; font-weight: 400; line-height: 1.4; color: #fff;} main.new-page .youtube-area .video-title .credit {display: block; margin-top: 4px; font-style: normal; font-size: 13px; color: rgba(255, 255, 255, 0.6);} main.new-page .youtube-area .facade {position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; cursor: pointer; background: none;} main.new-page .youtube-area .facade img {width: 100%; height: 100%; object-fit: cover; display: block;} main.new-page .youtube-area .play-btn {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; border-radius: 50%; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; transition: background 0.2s ease-out, transform 0.2s ease-out;} main.new-page .youtube-area .play-btn::before {content: ""; width: 0; height: 0; margin-left: 4px; border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent #fff;} @media (hover: hover) and (pointer: fine) { main.new-page .youtube-area .facade:hover .play-btn { background: var(--main-color); transform: translate(-50%, -50%) scale(1.08); } } main.new-page .youtube-area .video-item iframe {position: absolute; inset: 0; width: 100%; height: 100%; border: 0;} main.new-page .youtube-area .close-btn {position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.6); cursor: pointer; z-index: 2;} main.new-page .youtube-area .close-btn::before, main.new-page .youtube-area .close-btn::after {content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; background: #fff;} main.new-page .youtube-area .close-btn::before {transform: translate(-50%, -50%) rotate(45deg);} main.new-page .youtube-area .close-btn::after {transform: translate(-50%, -50%) rotate(-45deg);} main.new-page .youtube-area .dots {display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 24px; padding: 0; list-style: none;} main.new-page .youtube-area .dots li {width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); cursor: pointer; transition: background 0.2s ease-out, transform 0.2s ease-out;} main.new-page .youtube-area .dots li.active {background: var(--main-color); transform: scale(1.3);} @media (max-width: 1023px) { main.new-page .youtube-area .video-item { width: 380px; } /* 프레임 너비 380px → 16:9 높이 213.75px의 절반 */ main.new-page .youtube-area .video-nav { top: 106.875px; } } @media (max-width: 767px) { main.new-page .youtube-area { padding: 100px 24px 60px; } /* flex-basis(%) + width:auto 조합은 부모/자식이 서로의 크기를 참조하는 순환 참조가 생겨서 트랙 전체 너비가 슬라이드 1장 분량으로만 계산되는 버그가 있었음 → calc()로 명시적인 폭을 줘서 순환을 없애고, 트랙은 다시 max-content(자식 폭 합)로 되돌려서 JS 퍼센트 계산과 맞춤 */ main.new-page .youtube-area .videos-track { gap: 0; } main.new-page .youtube-area .video-item { width: calc(100vw - 48px); } main.new-page .youtube-area .play-btn { width: 56px; height: 56px; } main.new-page .youtube-area .play-btn::before { border-width: 9px 0 9px 15px; } main.new-page .youtube-area .video-nav { width: 36px; height: 36px; top: calc((100vw - 48px) * 9 / 32); } main.new-page .youtube-area .video-nav.prev { left: 8px; } main.new-page .youtube-area .video-nav.next { right: 8px; } } /* section-job: visual~04와 달리 스크롤 스크럽 연출이 아니라 탭+아코디언 형태의 일반 콘텐츠 흐름. .sticky/pin 구조를 쓰지 않음 (사용자가 직접 탭을 눌러보고 카드를 펼쳐보는 UI라 스크롤 인터랙션과 안 맞음). */ main.new-page .section-job {position: relative; padding: 140px 8% 160px; background: #0a0a0a; color: #fff; font-family: "Hanwha Gothic";} /* defult.css의 "HTML5 display-role reset"(section {display:block})이 author 규칙이라 브라우저 기본 [hidden]{display:none}(UA 규칙)을 우선순위와 무관하게 이겨버림 — .job-tech-filter-summary[hidden]과 동일한 이유로 명시적으로 재정의 (new-page.js의 채용마감일 경과 시 #section-job 자동 숨김 처리용) */ main.new-page .section-job[hidden] {display: none;} main.new-page .job-wrap {max-width: 1200px; margin:0 auto; opacity: 0;} /* section-job(공유 partial)이 렌더링하는 .job-notice 원본은 v8에서만 숨김 — 실제로 보이는 건 .job-progress-wrap 쪽에 새로 넣은 사본(test_v8.php 참고). 다른 버전은 partial을 그대로 쓰므로 이 규칙(v8 전용 CSS)의 영향을 받지 않음 */ main.new-page .section-job .job-notice {display: none;} main.new-page .job-notice {margin: 60px 0 32px; margin-top:0 !important; max-width:1000px ; margin-left:auto; margin-right:auto; padding: 20px 50px; /*border: 1px solid rgba(243, 115, 33, 0.35);*/ border-radius: 20px; background:#14151a; text-align: left;} main.new-page .job-notice-title {margin: 0 0 10px; font-family: "Hanwha Gothic"; font-size: 20px; font-weight: 700; color: var(--main-color);} main.new-page .job-notice-list {list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px;} main.new-page .job-notice-list li {position: relative; padding-left: 14px; font-family: "Pretendard"; font-size: 20px; line-height: 1.6; color: #fff;} main.new-page .job-notice-list li::before {content: ''; position: absolute; left: 0; top: 13px; width: 4px; height: 4px; border-radius: 50%; background: var(--main-color);} main.new-page .job-sticky-bar {position: sticky; top: var(--header-height); z-index: 1; background: #0a0a0a;} main.new-page .job-tabs {display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 24px; padding: 16px 0 24px; border-bottom: 1px solid rgba(255, 255, 255, 0.15);} main.new-page .job-tab {appearance: none; background: transparent; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px; color: rgba(255, 255, 255, 0.6); font-family: "Hanwha Gothic"; font-size: 14px; font-weight: 400; padding: 7px 15px; cursor: pointer; white-space: nowrap; transition: color 0.2s ease-out, background 0.2s ease-out, border-color 0.2s ease-out;} main.new-page .job-tab:hover {color: #fff; border-color: rgba(255, 255, 255, 0.5);} main.new-page .job-tab.active {background: var(--main-color); border-color: var(--main-color); color: #fff;} main.new-page .job-tech-filters {margin-bottom: 32px;} main.new-page .job-tech-filters-label {display: block; margin-bottom: 12px; font-size: 13px; color: rgba(255, 255, 255, 0.4);} main.new-page .job-tech-filters-label .not-desc{margin-left:20px; color: var(--main-color); opacity:0.9; line-height:1.2;} main.new-page .job-tech-mid-list, main.new-page .job-tech-sub-list {display: flex; flex-wrap: wrap; gap: 8px;} main.new-page .job-tech-sub-list {margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.1);} main.new-page .job-tech-mid, main.new-page .job-tech-sub {appearance: none; background: transparent; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px; color: rgba(255, 255, 255, 0.7); font-family: "Pretendard"; font-size: 13px; font-weight: 500; padding: 6px 14px; cursor: pointer; white-space: nowrap; transition: color 0.2s ease-out, background 0.2s ease-out, border-color 0.2s ease-out;} main.new-page .job-tech-sub {border-color: rgba(243, 115, 33, 0.4); color: var(--main-color);} main.new-page .job-tech-mid.active {background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.6); color: #fff;} main.new-page .job-tech-mid.has-selection:not(.active) {border-color: var(--main-color); color: var(--main-color);} main.new-page .job-tech-sub.active {background: var(--main-color); border-color: var(--main-color); color: #fff;} /* hover는 실제 마우스가 있는 기기에서만 적용 — 터치 기기는 탭하면 :hover가 계속 "붙어있는" 상태로 남는 경우가 많아서(터치엔드 후 다른 곳을 눌러야 풀림), .active를 :hover와 합쳐서 스타일을 공유하면 버튼을 다시 눌러 active를 해제해도 여전히 hover가 남아있어서 계속 주황색으로 보이는 버그가 생김 — 그래서 active와 hover를 별도 규칙으로 분리하고 hover 쪽만 (hover:hover) 미디어쿼리로 감쌈 */ @media (hover: hover) { main.new-page .job-tech-mid:hover, main.new-page .job-tech-sub:hover {color: #fff; border-color: rgba(255, 255, 255, 0.5);} main.new-page .job-tech-sub:hover {background: var(--main-color); border-color: var(--main-color); color: #fff;} } main.new-page .job-tech-selected {margin-top: 16px; padding-top: 16px; padding-bottom:10px; border-top: 1px solid rgba(255, 255, 255, 0.1);} main.new-page .job-tech-selected-label {display: block; margin-bottom: 10px; font-size: 12px; color: rgba(255, 255, 255, 0.4);} main.new-page .job-tech-selected-list {display: flex; flex-wrap: wrap; gap: 8px;} main.new-page .job-tech-badge {appearance: none; display: inline-flex; align-items: center; gap: 6px; background: var(--main-color); border: 1px solid var(--main-color); border-radius: 999px; color: #fff; font-family: "Pretendard"; font-size: 13px; font-weight: 500; padding: 6px 10px 6px 14px; cursor: pointer; white-space: nowrap; transition: opacity 0.2s ease-out, background 0.2s ease-out;} main.new-page .job-tech-badge:hover {opacity: 0.85;} main.new-page .job-tech-badge-remove {display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: rgba(0, 0, 0, 0.2); font-size: 12px; line-height: 1;} main.new-page .job-card.is-filtered-out {display: none;} /* is-empty-filter여도 패널 자체는 숨기지 않음(.active/.show-all이 정한 표시 여부를 그대로 따름) — 대신 안내 문구(.job-panel-empty)만 보여줌. 카드들은 이미 개별 .is-filtered-out으로 숨겨져 있음 */ main.new-page .job-panel-empty {display: none; padding: 40px 0; text-align: center; color: rgba(255, 255, 255, 0.5); font-size: 14px;} main.new-page .job-panel.is-empty-filter .job-panel-empty {display: block;} /* v7 모바일 전용 요소(job-tabs-select / job-tech-filter-trigger / 바텀시트 닫기·백드롭): 데스크톱 기본값은 숨김, 767px 미디어쿼리에서만 노출 (아래 반응형 블록 참고) */ main.new-page .job-tabs-select {display: none;} main.new-page .job-tech-filter-trigger {display: none;} main.new-page .job-tech-filters-close {display: none;} .job-tech-filters-backdrop {display: none;} main.new-page .job-tech-filter-wrap {position: relative; margin-bottom: 30px; padding-bottom:10px;} /* 2026-07-28: 트리거 옆(모바일은 트리거가 100% 폭이라 자연스럽게 다음 줄)에 선택된 기술 스택을 보여주는 읽기 전용 요약 — PC/모바일 스타일을 동일하게 둠(사용자 요청). inline-flex라 PC는 트리거 옆에 자연스럽게 붙고, 모바일은 트리거가 꽉 찬 너비라 붙을 자리가 없어 자동으로 다음 줄로 내려감 — 별도 미디어쿼리 분기 불필요. 2026-07-28 2차: 콤마로 이어붙인 텍스트 한 덩어리 대신, 항목마다 개별 알약(pill)으로 나열하도록 변경 — 컨테이너는 flex-wrap 정렬만 담당 */ main.new-page .job-tech-filter-summary {display: inline-flex; flex-wrap: wrap; gap: 8px; max-width: 100%; margin: 8px 0 0 8px;} /* display:inline-flex를 클래스 선택자로 못박아서, 브라우저 기본 [hidden]{display:none} 규칙 (낮은 우선순위)이 밀려 JS의 hidden=true가 무시되던 버그 수정 — [hidden] 규칙을 명시적으로 추가해 선택 항목이 없을 때 확실히 안 보이게 함 */ main.new-page .job-tech-filter-summary[hidden] {display: none;} /* 개별 알약 — .job-tech-filter-trigger의 PC 스타일(border/border-radius/padding)과 맞춤 */ main.new-page .job-tech-filter-summary-item {display: inline-block; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px; padding: 5px 12px; background: rgba(255, 255, 255, 0.05); color: var(--main-color); font-family: "Pretendard"; font-size: 13px; font-weight: 500; white-space: nowrap;} /* PC(768px 이상): job-tech-filters(중분류+소분류, 다중선택)를 sticky bar에 인라인으로 두지 않고 트리거 버튼 아래에 뜨는 드롭다운 패널로 분리 — 소분류가 많은 카테고리를 펼쳐도 sticky bar 자체는 항상 트리거 버튼 한 줄 높이로 고정되고, 패널 안에서만 스크롤됨(max-height+overflow-y). 모바일 바텀시트와 동일한 트리거/백드롭 열고닫기 로직을 그대로 재사용하고, 여기서는 위치/모양만 다르게 함 */ @media (min-width: 768px) { main.new-page .job-tech-filter-trigger {display: inline-flex; align-items: center; gap: 8px; width: auto; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px; color: #fff; font-family: "Pretendard"; font-size: 13px; font-weight: 500; padding: 9px 16px; margin-bottom: 0; cursor: pointer; transition: border-color 0.2s ease-out;} main.new-page .job-tech-filter-trigger:hover {border-color: rgba(255, 255, 255, 0.5);} main.new-page .job-tech-filter-count {display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--main-color); color: #fff; font-size: 11px;} main.new-page .job-tech-filter-count:empty {display: none;} main.new-page .job-tech-filters {position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; width: 100%; max-height: 70vh; overflow-y: auto; margin-bottom: 0; background: #232323; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); padding: 20px; opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity 0.2s ease-out, transform 0.2s ease-out;} main.new-page .job-tech-filters.is-open {opacity: 1; pointer-events: auto; transform: translateY(0);} main.new-page .job-tech-filters-label {padding-right: 28px;} main.new-page .job-tech-filters-close {display: flex; position: absolute; top: 10px; right: 14px; width: 30px; height: 24px; align-items: center; justify-content: center; background: transparent; border: none; color: rgba(255, 255, 255, 1); font-size: 14px; line-height: 1; cursor: pointer;} /* PC는 어둡게 덮는 백드롭이 아니라 "패널 바깥을 클릭하면 닫히게" 하는 투명 클릭 캐처만 필요 */ .job-tech-filters-backdrop {position: fixed; inset: 0; z-index: 55; background: transparent;} .job-tech-filters-backdrop.is-open {display: block;} } main.new-page .section-job.has-tech-filter .job-panels.show-all .job-panel-title {display: block;} main.new-page .job-panel {display: none;} main.new-page .job-panel.active {display: block;} /* "전체" 탭: 개별 패널의 active 여부와 무관하게 8개 패널을 전부 동시에 표시 */ main.new-page .job-panels.show-all .job-panel {display: block;} main.new-page .job-panel-title {display: none; position: relative; margin-bottom: 20px; padding-left: 18px; font-family: "Hanwha Gothic"; font-size: 26px; font-weight: 300; letter-spacing: -0.02em; color: #fff;} main.new-page .job-panel-title::before {content: ''; position: absolute; left: 0; top: 2px; width: 3px; height: 22px; background: var(--main-color);} main.new-page .job-panels.show-all .job-panel-title {display: block;} main.new-page .job-panel + .job-panel {margin-top: 56px;} main.new-page .job-card {border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 12px; margin-bottom: 16px; overflow: hidden;} main.new-page .job-card-head {appearance: none; width: 100%; display: flex; align-items: center; gap: 16px; background: rgba(255, 255, 255, 0.07 ); border: none; padding: 22px 24px; cursor: pointer; text-align: left; font-family: "Hanwha Gothic"; color: #fff;} main.new-page .job-title {flex: 1; font-size: 18px; font-weight: 400; color: #fff;} main.new-page .job-toggle {position: relative; flex-shrink: 0; width: 16px; height: 16px;} main.new-page .job-toggle::before, main.new-page .job-toggle::after {content: ''; position: absolute; left: 50%; top: 50%; background: #fff; transform: translate(-50%, -50%);} main.new-page .job-toggle::before {width: 16px; height: 2px;} main.new-page .job-toggle::after {width: 2px; height: 16px; transition: transform 0.2s ease-out;} main.new-page .job-card-head[aria-expanded="true"] .job-toggle::after {transform: translate(-50%, -50%) scaleY(0);} main.new-page .job-card-body {padding: 24px; color: rgba(255, 255, 255, 0.8);} main.new-page .job-card.is-closed .job-card-body {display: none;} main.new-page .job-field {margin-top: 20px;} main.new-page .job-field:first-child {margin-top: 0;} /* 담당 업무/자격 요건/우대사항 3개 항목 + 기술 스택 배치: 1200px 이상 3열 1행 + 기술스택 전체폭 1행 → 768~1199px 2*2 → 767px 이하 1*4(기본 세로 스택) */ @media (min-width: 1200px) { main.new-page .job-card-body { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } main.new-page .job-field { margin-top: 0; } main.new-page .job-field-tech { grid-column: 1 / -1; } main.new-page .job-card-apply { grid-column: 1 / -1; } } @media (min-width: 768px) and (max-width: 1199px) { main.new-page .job-card-body { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } main.new-page .job-field { margin-top: 0; } main.new-page .job-card-apply { grid-column: 1 / -1; } main.new-page .job-tech-filter-summary{gap:5px;} } main.new-page .job-field-label {display: block; margin-bottom: 8px; color: var(--main-color); font-family: "Hanwha Gothic"; font-size: 14px; font-weight: 600; line-height:1.7;} main.new-page .job-field ul {list-style: none; padding: 0; margin: 0;} main.new-page .job-field li {position: relative; padding-left: 14px; font-size: 14px; line-height: 1.7;} main.new-page .job-field li::before {content: ''; position: absolute; left: 0; top: 10px; width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, 0.5);} main.new-page .job-field .job-sub-list {margin-top: 6px; padding-left: 10px; margin-bottom:10px;} main.new-page .job-field .job-sub-list li {font-size: 13px; color: rgba(255, 255, 255, 0.65);} main.new-page .job-field .job-sub-list li::before {background: rgba(255, 255, 255, 0.3);} main.new-page .job-sub-head {display: block; margin-top: 12px; margin-bottom: 4px; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.9);} /* 기술 스택: 중분류 라벨은 숨기고, 그룹 구분 없이 칩만 한 줄로 쭉 나열 */ main.new-page .tech-stack-groups {display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; margin-top: 4px;} main.new-page .tech-stack-group {display: contents;} main.new-page .tech-stack-category {display: none;} main.new-page .tech-stack-chips {display: contents;} main.new-page .tech-stack-chip {display: inline-block; padding: 4px 12px; border: 1px solid rgba(243, 115, 33, 0.5); border-radius: 999px; font-size: 12px; color: var(--main-color); line-height: 1.4; white-space: nowrap;} /* margin-top: 20px; */ main.new-page .job-card-apply {text-align: center;} main.new-page .job-card-apply-btn {display: inline-block; padding: 10px 20px; border-radius: 999px; background: var(--main-color); color: #fff; font-family: "Hanwha Gothic"; font-size: 15px; font-weight: 500; text-decoration: none; transition: opacity 0.2s ease-out;} main.new-page .job-card-apply-btn:hover {opacity: 0.85;} /* ===== job-progress (전형 절차 — .section-job과 완전히 별개인 독립 섹션(중첩 아님). network/infra처럼 좌우 패딩 없는 풀블리드 섹션이지만, 높이는 100vh로 강제하지 않고 콘텐츠 양만큼 자연스럽게 흐름(한때 PC에서 100vh를 썼다가 제거함). progress_bg.jpg가 섹션 전체를 덮고, progress_bg_img.png(지구 곡선)는 padding-bottom으로 확보한 하단 공간에 absolute로 깔려서 섹션 폭 그대로 꽉 채움. 콘텐츠(타이틀/스텝카드/안내문구/카운트다운)만 job-wrap과 동일한 좌우 여백 있는 가운데 정렬 폭으로 제한 ===== */ main.new-page .job-progress {position: relative; padding-bottom: 0; box-sizing: border-box; overflow: hidden;} /* defult.css의 HTML5 display-role reset(section{display:block})이 author 규칙이라 브라우저 기본 [hidden]{display:none}(UA 규칙)을 이겨버림 — .section-job[hidden]과 동일한 이유로 명시 (채용마감일 경과 시 new-page.js가 #job-progress 전체를 hidden 처리) */ main.new-page .job-progress[hidden] {display: none;} main.new-page .job-progress-bg {display: none; position: absolute; inset: 0;} main.new-page .job-progress-bg img {width: 100%; height: 100%; object-fit: cover;} /* 지구 곡선 — 섹션 폭 그대로 꽉 채우고(요청사항), 실제 렌더 비율(2276:602)은 유지 */ /* 리빌 전까지 미리 숨겨둠(다른 섹션과 동일 컨벤션) — JS가 화면에 걸리는 시점에 아래에서 떠오르듯 페이드인시킴 */ main.new-page .job-progress-earth {display: none; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 2276px; height: auto; opacity: 0;} main.new-page .job-progress-wrap {position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 100px 40px 0; text-align: center; opacity: 0;} main.new-page .job-section-heading {margin: 0 0 32px; font-family: "Hanwha Gothic"; font-size: 40px; font-weight: 700; color: #fff; text-align:center;} /* border: 1px solid rgba(255, 255, 255, 0.1); */ /* 카드 박스 자체(반투명 배경)가 먼저 페이드인 — 안의 step/arrow는 각자 opacity:0로 따로 숨겨져 있다가 순차로 리빌됨 */ main.new-page .job-progress-steps {display: flex; align-items: flex-start; justify-content: space-around; margin: 0; padding: 32px 40px; list-style: none; background: rgba(243, 115, 33, 0.06); border-radius: 16px; opacity: 1; border:1px solid rgba(243, 115, 33, 0.35);} main.new-page .job-progress-steps .step {flex-shrink: 0; text-align: center; opacity: 1;} /* 강제 줄바꿈 지점 표시용(--md: 768~1023px용 3+4 분할, --sm: 767px 이하용 2+2+3 분할) — 데스크탑 기본값은 전부 숨김, 각 구간 미디어쿼리에서 해당하는 것만 켬 */ main.new-page .job-progress-steps .row-break {display: none;} main.new-page .job-progress-steps .arrow {flex: none; align-self: center; width: 12px; opacity: 1;} main.new-page .job-progress-steps .arrow img {display: block; width: 100%; height: auto;} main.new-page .job-progress-steps .num {display: block; margin-bottom: 15px; font-family: "Hanwha Gothic"; font-size: 24px; font-weight: 700; color: var(--main-color);} main.new-page .job-progress-steps .label {display: block; font-family: "Pretendard"; font-size: 17px; font-weight: 600; color: #fff; white-space: nowrap;} main.new-page .job-progress-steps .sub {margin: 10px 0 0; padding: 0; list-style: none;} main.new-page .job-progress-steps .sub li {font-family: "Pretendard"; font-size: 14px; font-weight: 400; color: rgba(255, 255, 255, 0.9); white-space: nowrap; text-align:left;} main.new-page .job-progress-steps .sub li + li {margin-top:5px;} main.new-page .job-progress-steps .sub li::before {content: "·"; margin-right: 2px;} main.new-page .job-progress-note {margin: 10px 0 0; font-family: "Pretendard"; font-size: 16px; font-weight: 400; color: rgba(255, 255, 255, 0.8); line-height:1.4; opacity: 1;} main.new-page .job-countdown {display: flex; align-items: flex-start; justify-content: center; gap: 120px; margin:80px 0 0 0; padding-bottom:80px; border-bottom:1px solid rgba(255, 255, 255, 0.15);} /* D/-와 "일" 그룹까지 한 덩어리로 묶어서 좌우 여백을 좁게(-의 양옆 간격이 동일해짐) — 시간/분/초 그룹과의 간격만 .job-countdown의 큰 gap을 그대로 씀. align-items:flex-start로 "일" 그룹(라벨 때문에 키가 더 큼)도 D/- 박스와 숫자 줄 높이가 맞도록 정렬 */ main.new-page .job-countdown-prefix {display: flex; align-items: flex-start; gap: 4px;} main.new-page .job-countdown-dash {display: flex; gap: 4px;} /* 시간/분/초는 콜론(:)으로 이어지는 한 덩어리라 별도 래퍼로 묶어서 간격을 좁게(.job-countdown-prefix와 같은 이유) — .job-countdown-prefix ↔ .job-countdown-time 사이만 .job-countdown의 큰 gap을 씀 */ main.new-page .job-countdown-time {display: flex; align-items: flex-start; gap: 10px;} /* 콜론(:)도 .job-countdown-box 클래스를 그대로 써서 시/분/초 숫자 박스와 완전히 동일한 형식(배경 타일, 글로우, 크기, 폰트)으로 보이도록 함 — 별도 크기/폰트 규칙 없이 아래 .job-countdown-box 규칙에 얹혀감. 일/시간/분/초 그룹: 숫자 박스 줄 + 그 아래 라벨. align-items:flex-start(.job-countdown)로 D/- 낱개 박스와 그룹들의 숫자 줄이 라벨 유무와 무관하게 항상 같은 높이에서 시작하도록 정렬 */ main.new-page .job-countdown-group {display: flex; flex-direction: column; align-items: center; gap: 10px;} main.new-page .job-countdown-digits {display: flex; gap: 6px;} main.new-page .job-countdown-label {font-size: 13px; font-weight: 600; color: var(--main-color); /*background: rgba(255, 255, 255, 0.9);*/ padding: 3px 12px; border-radius: 999px; opacity: 1;} /* 그라디언트가 아니라 위/아래 정확히 반씩 단색으로 나눈 타일(::before=위, ::after=아래) */ /* 하단 지구 이미지의 림라이트와 어울리는 글로우 — 블루가 너무 진하다는 피드백으로 흰색 위주에 블루는 살짝만 섞음 (overflow:hidden은 자식 콘텐츠만 자르고 own box-shadow는 안 잘리므로 함께 써도 안전함) */ main.new-page .job-countdown-box {position: relative; width: 68px; height: 92px; border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 25px rgba(81, 111, 153, 0.8), 0 0 45px rgba(180, 210, 255, 0.8); opacity: 1;} main.new-page .job-countdown-box::before, main.new-page .job-countdown-box::after {content: ""; position: absolute; left: 0; right: 0; height: 50%;} main.new-page .job-countdown-box::before {top: 0; background: #191919;} main.new-page .job-countdown-box::after {bottom: 0; background: #232323;} main.new-page .job-countdown-box .char {position: relative; z-index: 1; font-family: "Hanwha Gothic"; font-size: 55px; font-weight: 700; color: #fff;} /* 1100px 이하: 날짜(.job-countdown-prefix)/시간(.job-countdown-time)을 좌우 배치에서 위아래로 쌓음 — PC 스타일(박스 크기·폰트 등)은 그대로 두고 배치 방향/정렬/간격만 조정. DOM 순서상 prefix가 먼저라 flex-direction만 세로로 바꾸면 자연스럽게 날짜가 위, 시간이 아래로 옴. 더 좁은 화면(1023px/767px) 블록의 .job-countdown gap 축소 규칙이 이 아래에서 그대로 이어받아 세로 간격도 함께 좁아짐 */ @media (max-width: 1100px) { main.new-page .job-countdown { flex-direction: column; align-items: center; gap: 28px; } } @media (max-width: 1023px) { main.new-page .job-progress { padding-bottom: 0; } main.new-page .job-progress-earth { width: 1200px; } main.new-page .job-section-heading { font-size: 34px; } main.new-page .job-progress-steps { display: flex; flex-wrap: wrap; gap: 24px 12px; padding: 24px 20px; align-items: center; max-width:1000px; margin-left:auto; margin-right:auto; } main.new-page .job-progress-steps .step { flex: 1 1 0; } main.new-page .job-progress-steps .row-break--md { display: block; flex-basis: 100%; width: 0; height: 0; } main.new-page .job-progress-steps .num { font-size: 20px; } main.new-page .job-progress-steps .label { font-size: 16px; white-space: normal; } main.new-page .job-progress-steps .sub { max-width: 100px; margin-left:auto; margin-right:auto; } main.new-page .job-progress-steps .sub li { font-size: 13px; white-space: normal; } main.new-page .job-progress-note { font-size: 14px; } main.new-page .job-countdown { gap: 20px; } main.new-page .job-countdown-prefix { gap: 3px; } main.new-page .job-countdown-time { gap: 8px; } main.new-page .job-countdown-box { width: 56px; height: 76px; } main.new-page .job-countdown-box .char { font-size: 40px; } main.new-page .job-countdown-label { font-size: 13px; padding: 3px 10px; } } @media (max-width: 767px) { /* 기본값이 이미 auto 높이라 별도 처리 불필요하지만, 모바일 전용 여백만 축소 */ main.new-page .job-progress { padding: 60px 0 0; margin-bottom:80px;} main.new-page .job-progress-wrap { padding: 0 20px; } main.new-page .job-progress-earth { width: 800px; } main.new-page .job-section-heading { font-size: 24px; margin-bottom: 24px; } /* 767px 이하도 1023px 블록과 동일하게 2개/3개 줄바꿈 유지 — row-break--md는 여기서 별도로 끄지 않아서 1023px 블록의 display:block이 그대로 이어짐(row-break--sm은 안 켜므로 기본값 display:none 그대로 유지되어 비활성 상태) */ main.new-page .job-progress-steps { gap: 20px 5px; padding: 16px 18px; align-items:start; background:none; } main.new-page .job-progress-steps .arrow { width: 8px; } main.new-page .job-progress-steps .num { font-size: 18px; } main.new-page .job-progress-steps .label { font-size: 15px; } main.new-page .job-progress-steps .sub { max-width: none; width: fit-content; margin-left: auto; margin-right: auto; } main.new-page .job-progress-steps .sub li { font-size: 12px; text-align: left; } main.new-page .job-progress-note { font-size: 14px; } main.new-page .job-countdown { margin-top: 28px; gap: 14px; } main.new-page .job-countdown-prefix { gap: 6px; } main.new-page .job-countdown-time { gap: 6px; } main.new-page .job-countdown-group { gap: 6px; } /* 767px 이하도 PC/태블릿과 동일하게 글자(D, -, 일/시간/분/초 각 자릿수, 콜론) 하나마다 개별 박스 배경(위/아래 2톤 타일 + 그림자)을 유지 — 병합하지 않고 화면 폭에 맞춰 박스 크기/간격만 축소 */ main.new-page .job-countdown-box { width: 45px; height: 64px; box-shadow: 0 0 20px rgba(81, 111, 153, 0.6), 0 0 35px rgba(180, 210, 255, 0.6);} main.new-page .job-countdown-box .char { font-size: 30px; } main.new-page .job-countdown-dash { gap: 4px; } main.new-page .job-countdown-digits { gap: 4px; } main.new-page .job-countdown-label { font-size: 11px; padding: 2px 8px; } } @media (max-width: 640px) { main.new-page .job-progress { padding-bottom: 0; } main.new-page .job-progress-earth { width:500px; } /* 320~360px 폭의 좁은 기기에서도 8개 박스(시:분:초)가 한 줄에 들어가도록 한 단계 더 축소 */ main.new-page .job-countdown-box { width: 45px; height: 56px; } main.new-page .job-countdown-box .char { font-size: 28px; } main.new-page .job-countdown-time { gap: 4px; } main.new-page .job-countdown-prefix { gap: 4px; } } @media (max-width: 450px) { main.new-page .job-countdown-box { width: 38px; height: 53px; } main.new-page .job-countdown-box .char { font-size: 25px; } } @media (max-width: 1023px) { main.new-page .section-job { padding: 100px 6% 120px; } main.new-page .job-title { font-size: 16px; } } @media (max-width: 767px) { main.new-page .section-job { padding: 0 20px 100px; } main.new-page .job-notice { margin: 20px 0 24px; padding: 16px 18px; } main.new-page .job-notice-title { font-size: 15px; } main.new-page .job-notice-list li { font-size: 15px; } /* v7: job-tabs를 select box로 대체 (job-tab 버튼 자체는 로직 재사용을 위해 DOM엔 남기고 화면에서만 숨김) */ main.new-page .job-tabs { display: none; } main.new-page .job-tabs-select { display: block; width: 100%; appearance: none; background-color: rgba(255, 255, 255, 0.05); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-opacity='.6' stroke-width='1.5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px; color: #fff; font-family: "Hanwha Gothic"; font-size: 14px; padding: 12px 40px 12px 18px; margin-bottom: 8px; } /* select를 열었을 때(option 목록)는 대부분의 브라우저가 OS 네이티브 라이트 배경으로 그리는데, 위 .job-tabs-select의 color:#fff이 option에도 상속되어 흰 배경에 흰 글씨(사실상 안 보임)가 되던 문제 수정 */ main.new-page .job-tabs-select option { color: #111; background: #fff; } /* v7: job-tech-filters(중분류+소분류, 다중선택) 전체를 바텀시트로 분리 — sticky bar엔 트리거 버튼만 남김 */ main.new-page .job-sticky-bar { /*top:calc(var(--header-height) + 3px);*/ top:var(--header-height); } main.new-page .job-tech-filter-summary{margin-top:0;} main.new-page .job-tech-filter-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px; color: #fff; font-family: "Pretendard"; font-size: 13px; font-weight: 500; padding: 12px 18px; margin-bottom: 10px; cursor: pointer; } main.new-page .job-tech-filter-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--main-color); color: #fff; font-size: 11px; margin-left: 8px; } main.new-page .job-tech-filter-count:empty { display: none; } main.new-page .job-tech-filters { position: fixed; left: 0; right: 0; bottom: 0; max-height: 80vh; overflow-y: auto; -webkit-overflow-scrolling: touch; background: #0a0a0a; border-radius: 20px 20px 0 0; box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4); padding: 24px 20px calc(20px + env(safe-area-inset-bottom)); margin-bottom: 0; transform: translateY(100%); transition: transform 0.3s ease-out; z-index: 60; } main.new-page .job-tech-filters.is-open { transform: translateY(0); } main.new-page .job-tech-filters-label { display: block; padding-right: 32px; margin-bottom: 16px; font-size: 15px; color: #fff; } main.new-page .job-tech-filters-close { display: flex; position: absolute; top: 16px; right: 16px; width: 30px; height: 28px; align-items: center; justify-content: center; background: transparent; border: none; color: rgba(255, 255, 255, 1); font-size: 14px; line-height: 1; cursor: pointer; } main.new-page .job-tech-filters-label .not-desc{display:block; margin-top:10px; margin-left:0; font-size:12px;} .job-tech-filters-backdrop { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 55; opacity: 0; pointer-events: none; transition: opacity 0.3s ease-out; } .job-tech-filters-backdrop.is-open { opacity: 1; pointer-events: auto; } html.job-filter-open { overflow: hidden; } /* #header가 fixed + z-index:2라서, .job-sticky-bar(sticky + z-index:1) 안에 갇힌 시트/백드롭보다 위에 그려질 수 있음 — 시트가 열려있는 동안만 .job-sticky-bar의 z-index를 header보다 높여서 상단 헤더 줄이 시트 위로 겹쳐 보이지 않게 함 */ html.job-filter-open main.new-page .job-sticky-bar { z-index: 3; } main.new-page .job-tech-mid, main.new-page .job-tech-sub { font-size: 12px; padding: 5px 12px; } main.new-page .job-card-head { padding: 18px 16px; gap: 12px; } main.new-page .job-title { font-size: 15px; } main.new-page .job-card-body { padding: 16px 20px; } /* margin-top: 16px; */ main.new-page .job-card-apply {} /* padding: 12px 32px; */ main.new-page .job-card-apply-btn { font-size: 14px; } } /* ===== job-closed (채용마감일 경과 시 노출되는 마감 안내 + 다음 채용 소식 신청 섹션). #job-progress/ #section-job 다음에 오는 독립
(2026-08-13 분리 — 원래 .job-progress-wrap 안에 있었는데, #job-progress 자체를 통째로 숨기게 되면서 그 안에 얹혀있으면 같이 사라지기 때문에 분리함). 그래서 .job-progress-wrap이 주던 max-width/가운데정렬/좌우패딩을 여기서 직접 명시(box-sizing 포함, 안 하면 padding이 width에 더해져 max-width를 넘어감). new-page.js의 checkExpired()가 마감일 경과를 감지하면 #job-progress·#section-job을 숨김과 동시에 이 섹션의 hidden을 풀어서 노출함. section 태그라 defult.css의 HTML5 display-role reset(section{display:block})이 [hidden]을 이겨버리는 문제가 실제로 적용되므로 아래 [hidden] 규칙이 필수(.section-job[hidden]과 동일 원인). 배지/버튼/카드 톤은 기존 .header-cta·.job-card-apply-btn·.job-progress-steps와 맞춤(--main-color 오렌지, pill 모양, Hanwha Gothic 헤딩 + Pretendard 본문) ===== */ main.new-page .job-closed {box-sizing: border-box; max-width: 1200px; margin: 0 auto; padding: 80px 40px; text-align: center;} main.new-page .job-closed .font-hanwha{font-family: 'Hanwha';} main.new-page .job-closed[hidden] {display: none;} main.new-page .job-closed-badge {display: inline-block; margin: 0 0 24px; padding: 8px 20px; border: 1px solid rgba(243, 115, 33, 0.5); border-radius: 999px; font-family: "Hanwha Gothic"; font-size: 13px; font-weight: 600; letter-spacing: 0.05em; color: var(--main-color);} main.new-page .job-closed-title {margin: 0 0 10px; font-family: "Hanwha Gothic"; font-size: 32px; font-weight: 700; line-height: 1.4; color: #fff;} main.new-page .job-closed-title .line {display: block;} main.new-page .job-closed-desc {margin: 0 0 8px; font-family: "Pretendard"; font-size: 18px; font-weight: 400; line-height: 1.6; color: rgba(255, 255, 255, 0.85);} main.new-page .job-closed-desc strong {font-weight: 700; color: #fff;} /* 배지(.job-closed-badge)와 동일한 pill 톤이지만 배경을 채워서 순수 텍스트보다 눈에 띄게 강조 */ main.new-page .job-closed-notice {margin: 64px 0 15px; font-family: "Hanwha Gothic"; font-size: 22px; font-weight: 700; color: #fff;} main.new-page .job-closed-notice .accent {color: var(--main-color);} /* 767px 이하에서만 "...오픈되면" 뒤에서 강제 줄바꿈(PC는 한 줄 유지) */ main.new-page .job-closed-notice-break {display: none;} /* "새로운 모집 분야가 오픈" 구간에만 형광펜처럼 겹치는 굵은 띠 — ::before를 텍스트 뒤(z-index:-1)에 절대배치. text-decoration underline이 아니라 배경 겹침 효과라 밑줄과 다름에 주의. 퍼센트 기반 높이가 안정적으로 계산되도록 대상 span을 inline-block으로 둠(순수 inline은 브라우저별 % 높이 계산이 불안정) */ main.new-page .job-closed-notice-highlight {position: relative; display: inline-block; z-index: 0;} main.new-page .job-closed-notice-highlight::before {content: ''; position: absolute; z-index: -1; left: -2px; right: -2px; bottom: 8%; height: 42%; background: rgba(243, 115, 33, 0.45);} main.new-page .job-closed-form {max-width: 560px; margin: 0 auto 60px; padding: 32px; background: rgba(243, 115, 33, 0.06); border: 1px solid rgba(243, 115, 33, 0.35); border-radius: 16px; text-align: left;} main.new-page .job-closed-fields {display: flex; gap: 12px; margin-bottom: 16px;} main.new-page .job-closed-field {flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px;} main.new-page .job-closed-label {font-family: "Hanwha Gothic"; font-size: 14px; font-weight: 700; color: #fff;} /* 입력창임을 명확히 보이도록 테두리/배경 대비를 기존보다 높이고, focus 시 글로우까지 얹음 */ main.new-page .job-closed-input {width: 100%; box-sizing: border-box; padding: 15px 18px; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 999px; background: rgba(255, 255, 255, 0.09); color: #fff; font-family: "Pretendard"; font-size: 15px; font-weight: 500; transition: border-color 0.2s ease-out, background 0.2s ease-out, box-shadow 0.2s ease-out;} main.new-page .job-closed-input::placeholder {color: rgba(255, 255, 255, 0.5);} main.new-page .job-closed-input:focus {outline: none; border-color: var(--main-color); background: rgba(255, 255, 255, 0.13); box-shadow: 0 0 0 3px rgba(243, 115, 33, 0.25);} main.new-page .job-closed-consents {display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px;} main.new-page .job-closed-consent {display: flex; align-items: flex-start; gap: 10px; padding: 16px 18px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; cursor: pointer;} main.new-page .job-closed-consent input {flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--main-color); cursor: pointer;} main.new-page .job-closed-consent-body {display: block;} main.new-page .job-closed-consent-title {display: block; margin-bottom: 6px; font-family: "Pretendard"; font-size: 15px; font-weight: 600; color: #fff;} main.new-page .job-closed-consent-detail {display: block; font-family: "Pretendard"; font-size: 13px; font-weight: 400; line-height: 1.6; color: rgba(255, 255, 255, 0.55);} main.new-page .job-closed-error {margin: 0 0 14px; font-family: "Pretendard"; font-size: 13px; font-weight: 600; color: #ff6b5e; text-align: center;} main.new-page .job-closed-error[hidden] {display: none;} main.new-page .job-closed-submit {display: block; width: 100%; padding: 16px; border: none; border-radius: 999px; background: linear-gradient(90deg, var(--main-color), #ff8a3d); color: #fff; font-family: "Hanwha Gothic"; font-size: 16px; font-weight: 700; cursor: pointer; transition: opacity 0.2s ease-out;} main.new-page .job-closed-submit:hover {opacity: 0.85;} /* 완료 안내 모달 — body 최상위 직속(main.new-page 밖)이라 prefix 없이 작성. .network-lightbox와 동일한 fixed 오버레이 + is-open 토글 컨벤션 */ .job-closed-modal {position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, 0.88);} .job-closed-modal.is-open {display: flex;} .job-closed-modal-box {width: 100%; max-width: 360px; padding: 44px 32px; border-radius: 20px; background: #14151a; border: 1px solid rgba(243, 115, 33, 0.35); text-align: center;} /* .job-closed-badge(섹션 상단 "SEE YOU ON THE NEXT MISSION")와 짝을 이루는 outline pill 톤 — 체크마크로 "신청완료" 의미를 보강 */ .job-closed-modal-badge {display: inline-flex; align-items: center; gap: 6px; margin: 0 0 18px; padding: 7px 18px; border: 1px solid rgba(243, 115, 33, 0.5); border-radius: 999px; font-family: "Hanwha Gothic"; font-size: 13px; font-weight: 700; letter-spacing: 0.05em; color: var(--main-color);} .job-closed-modal-text {margin: 0 0 28px; font-family: "Hanwha Gothic"; font-size: 19px; font-weight: 600; line-height: 1.6; color: #fff;} .job-closed-modal-confirm {display: inline-block; min-width: 120px; padding: 12px 32px; border: none; border-radius: 999px; background: linear-gradient(90deg, var(--main-color), #ff8a3d); color: #fff; font-family: "Hanwha Gothic"; font-size: 15px; font-weight: 700; cursor: pointer; transition: opacity 0.2s ease-out;} .job-closed-modal-confirm:hover {opacity: 0.85;} html.job-closed-modal-open {overflow: hidden;} main.new-page .job-closed-divider {display: flex; align-items: center; gap: 16px; max-width: 460px; margin: 0 auto 40px; font-family: "Hanwha Gothic"; font-size: 12px; font-weight: 600; letter-spacing: 0.15em; color: rgba(255, 255, 255, 0.4);} main.new-page .job-closed-divider::before, main.new-page .job-closed-divider::after {content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.15);} main.new-page .job-closed-outro-title {margin: 0 0 16px; font-family: "Hanwha Gothic"; font-size: 26px; font-weight: 700; letter-spacing: 0.05em; color: var(--main-color);} main.new-page .job-closed-outro-desc {margin: 0; font-family: "Pretendard"; font-size: 16px; font-weight: 400; line-height: 1.6; color: rgba(255, 255, 255, 0.7);} @media (max-width: 767px) { main.new-page .job-closed { padding: 48px 20px; } main.new-page .job-closed-badge { font-size: 12px; padding: 7px 16px; margin-bottom: 18px; } main.new-page .job-closed-title { font-size: 22px; } main.new-page .job-closed-desc { font-size: 15px; } main.new-page .job-closed-notice { font-size: 17px; margin: 32px 0 12px; line-height: 1.6; } main.new-page .job-closed-notice-break { display: block; } main.new-page .job-closed-label { font-size: 13px; } main.new-page .job-closed-form { padding: 24px 20px; margin-bottom: 56px; } main.new-page .job-closed-fields { flex-direction: column; } .job-closed-modal-box { padding: 32px 24px; } .job-closed-modal-text { font-size: 16px; margin-bottom: 22px; } main.new-page .job-closed-divider { font-size: 11px; margin-bottom: 32px; } main.new-page .job-closed-outro-title { font-size: 20px; } main.new-page .job-closed-outro-desc { font-size: 14px; } }