/* ========================================================================== components.css — 버튼 · CEO · 타임라인 · 공법카드 · 오피스 · 뉴스/프로젝트 카드 · 채용 아코디언 · 모달 · 스크롤 등장 애니메이션 ========================================================================== */ /* ---------- 스크롤 등장 효과 ---------- [data-reveal] 이 붙은 덩어리가 화면에 들어오면 assets/js/reveal.js 가 .is-in 을 붙입니다. 아래에서 32px 떠오르며 나타납니다. ⚠️ 자바스크립트가 멈추면 내용이 영영 안 보입니다. 그래서 숨김은 .js-reveal 플래그가 에 붙어 있을 때만 걸립니다. 이 플래그는 reveal.js 가 아니라 index.html 이 아니라 아래 스크립트가 붙입니다 — 즉 스크립트가 하나라도 실패하면 자동으로 "그냥 보이는" 상태가 됩니다. */ .js-reveal [data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity .9s cubic-bezier(.23, 1, .32, 1), transform .9s cubic-bezier(.23, 1, .32, 1); } .js-reveal [data-reveal].is-in { opacity: 1; transform: none; } /* 모션을 줄이는 설정이면 움직이지 않고 바로 보여 줍니다 */ @media (prefers-reduced-motion: reduce) { .js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; } } /* ---------- 버튼 ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; font-size: var(--fs-small); font-weight: 700; letter-spacing: -.01em; transition: transform .2s var(--ease), background .2s, color .2s, border-color .2s; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: none; } .btn svg { width: 16px; height: 16px; flex-shrink: 0; } .btn--primary { background: var(--c-blue); color: var(--c-white); } .btn--primary:hover { background: var(--c-blue-dark); } .btn--ghost { border: 1px solid var(--c-line); color: var(--c-ink); background: var(--c-white); } .btn--ghost:hover { border-color: var(--c-blue); color: var(--c-blue); } .btn--light { background: rgba(255,255,255,.14); color: var(--c-white); border: 1px solid rgba(255,255,255,.28); } .btn--light:hover { background: var(--c-white); color: var(--c-navy); } .btn--sm { padding: 9px 16px; font-size: var(--fs-xs); } /* ---------- 칩 필터 ---------- */ .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--sp-4); } .chip { padding: 7px 15px; border-radius: 999px; border: 1px solid var(--c-line); background: var(--c-white); font-size: var(--fs-xs); font-weight: 600; color: var(--c-muted); transition: all .2s var(--ease); } .chip:hover { border-color: var(--c-blue-soft); color: var(--c-blue); } .chip.is-on { background: var(--c-blue); border-color: var(--c-blue); color: var(--c-white); } /* ---------- CEO 인사말 ---------- */ /* "SINCE 1973" — about.section.eyebrow. .scene__kicker는 여러 섹션이 같이 쓰는 공용 클래스라 여기서만 5px 키우도록 이 섹션에서만 덮어씁니다. */ #scene-about .scene__kicker { font-size: 16px; } /* 영상 위, 센구조연구소→센벡스→센코어테크로 이어지는 계열 구조를 날짜와 함께 짧게 보여줍니다(content/about.json의 milestones, 3개 고정). 가로로 나란히 놓고 "+" 기호로 잇습니다 — 좁은 화면에서는 그 기호를 숨기고 세로로 쌓습니다. 마지막 항목(센코어테크)의 회사명은 다른 두 항목처럼 왼쪽 정렬 그대로 두되(justify-content: space-between이 이 항목 전체를 오른쪽 끝에 붙여 주므로, 셋 중 가장 넓은 회사명 글자 자체가 이미 영상 오른쪽 끝에 맞습니다), 연월·업무 설명도 같은 왼쪽 정렬을 그대로 씁니다 — 예전엔 이 항목만 오른쪽 정렬을 줬는데, 회사명 기준으로 통일해 달라는 요청으로 없앴습니다. */ .about-milestones { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: clamp(16px, 3vw, 36px); margin-bottom: var(--sp-5); } .about-milestone { display: flex; flex-direction: column; gap: 5px; } .about-milestone__date { font-size: calc(var(--fs-small) + 2px); color: var(--c-blue); font-weight: 700; font-variant-numeric: tabular-nums; } .about-milestone__name { font-size: clamp(1.44rem, 2.6vw, 2.04rem); font-weight: 800; color: var(--c-ink); letter-spacing: -.01em; line-height: 1.15; } .about-milestone__role { font-size: var(--fs-small); color: var(--c-muted); } .about-milestone__arrow { color: var(--c-line); font-size: 1.6rem; font-weight: 300; flex: 0 0 auto; } /* 좁은 화면에서는 예전에 세로로 쌓았는데, 별것 아닌 정보 3개가 아홉 줄을 차지해 화면만 잡아먹었습니다. 글자 크기를 줄여 가로 한 줄(3열)로 붙입니다. 각 열은 내용 폭만큼만 차지하고(flex: 0 1 auto) 남는 공간은 열 사이로 나뉩니다(부모의 justify-content: space-between). "+" 기호는 그 폭마저 아까워 계속 숨깁니다. 320px(가장 좁은 실기기)에서도 세 열이 각각 한 줄씩 들어가는 것을 확인했습니다 — 글자를 더 키우면 업무 설명부터 접힙니다. */ @media (max-width: 640px) { .about-milestones { flex-direction: row; flex-wrap: nowrap; align-items: flex-start; gap: 10px; margin-bottom: var(--sp-4); } .about-milestone { flex: 0 1 auto; min-width: 0; gap: 2px; } .about-milestone__arrow { display: none; } .about-milestone__date { font-size: 11px; line-height: 1.4; } .about-milestone__name { font-size: 15px; line-height: 1.25; } .about-milestone__role { font-size: 11px; line-height: 1.35; } } /* 제목·인용구·본문 글을 모두 지웠습니다 — 영상과, 그 바로 아래 우측에 놓는 서명(직함·이름)만 남습니다. 폭은 CEO 영상(.ceo__video)과 똑같이 .about-block 전체 폭을 씁니다. */ .ceo__video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: var(--ph); margin-bottom: var(--sp-4); } .ceo__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* 영상 바로 아래, 우측 정렬 — "센 엔지니어링그룹 대표이사 이승환" */ .ceo__sign { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 2px 8px; text-align: right; } .ceo__role { font-size: var(--fs-small); color: var(--c-muted); } .ceo__name { font-size: 1.15rem; } /* ---------- 회사연혁 : 가로 타임라인 (.tml) ---------- 수평선 하나 위에 연혁을 왼쪽에서 오른쪽으로 늘어놓습니다. 창립(1973)은 맨 왼쪽 고정, 연대는 버튼으로 여닫습니다. 내용과 위치 계산은 assets/js/timeline.js 가 맡습니다. */ :root { --tml-axis-y: 190px; /* 위에서 수평선까지의 거리 */ --tml-gap: 210px; /* 항목 하나가 차지하는 가로 폭 */ --tml-era-gap: 120px; /* 연대와 연대 사이 추가 여백 */ --tml-tail: 170px; /* 마지막 항목 뒤로 더 뻗는 길이 (사람이 서는 자리) */ } .tml__hint { font-size: var(--fs-xs); color: var(--c-muted); margin-top: 2px; } /* 가로로 끌어서 보는 칸. 스크롤바는 숨기고 드래그로만 움직입니다. .scene__inner 밖에 두어 화면 양 끝까지 씁니다. */ .tml-stage { position: relative; margin-top: clamp(18px, 3vh, 34px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); /* 마우스로 끌어서 볼 때 글자가 드래그-선택되면 거슬려서 막습니다. */ -webkit-user-select: none; user-select: none; } .tml__scroll { overflow-x: auto; overflow-y: hidden; cursor: grab; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; /* 가로 끝에서 페이지가 밀리지 않게 */ } .tml__scroll::-webkit-scrollbar { display: none; } .tml__scroll.is-drag { cursor: grabbing; } .tml__track { position: relative; height: 430px; min-width: 100%; } .tml__axis { position: absolute; left: 0; top: var(--tml-axis-y); height: 2px; background: var(--c-ink); border-radius: 2px; } .tml__arrow { position: absolute; top: var(--tml-axis-y); width: 0; height: 0; transform: translate(0, -7px); border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 14px solid var(--c-ink); } /* 항목 */ .tml__node { position: absolute; top: 0; width: var(--tml-gap); transform: translateX(-50%); opacity: 0; transition: opacity .45s ease; } .tml__node.is-on { opacity: 1; } .tml__dot { position: absolute; top: var(--tml-axis-y); left: 50%; width: 13px; height: 13px; margin: -6px 0 0 -6.5px; border-radius: 50%; background: var(--c-white); border: 3px solid var(--c-blue); z-index: 2; } .tml__tick { position: absolute; left: 50%; width: 1px; background: var(--c-line); } .tml__card { position: absolute; left: 0; width: 100%; padding: 0 14px; } .tml__node--up .tml__card { bottom: calc(100% - var(--tml-axis-y) + 26px); text-align: right; } .tml__node--down .tml__card { top: calc(var(--tml-axis-y) + 26px); text-align: left; } .tml__node--up .tml__tick { top: calc(var(--tml-axis-y) - 26px); height: 26px; } .tml__node--down .tml__tick { top: var(--tml-axis-y); height: 26px; } .tml__when { font-size: var(--fs-xs); font-weight: 700; color: var(--c-blue); margin-bottom: 4px; font-variant-numeric: tabular-nums; } .tml__title { font-size: var(--fs-small); font-weight: 700; line-height: 1.5; } /* 창립은 특별 취급 */ .tml__node--origin .tml__dot { width: 19px; height: 19px; margin: -9px 0 0 -9.5px; background: var(--c-blue); border-color: var(--c-blue); box-shadow: 0 0 0 5px rgba(0, 113, 227, .16); } .tml__node--origin .tml__when { font-size: 1.5rem; font-weight: 900; color: var(--c-ink); letter-spacing: -.02em; } .tml__node--origin .tml__title { font-size: 1rem; } /* 10년 단위 구분 겸 여닫기 버튼 — 연대 글자(예: "1990년대")를 트랙 맨 위쪽에 두고(위로 뻗는 항목 글과 안 겹치도록), 그 아래로 축까지 가느다란 세로선을 이어, 축 위에서 크고 진한 동그라미로 끝맺습니다. 이 동그라미(전체 버튼)를 누르면 그 연대를 접고 폅니다 — 펼치면 동그라미가 파랗게 채워집니다. 개수는 표시하지 않습니다. */ .tml__decade { position: absolute; top: 6px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; background: none; border: none; padding: 0; margin: 0; font: inherit; cursor: pointer; opacity: 0; transition: opacity .45s ease; } .tml__decade.is-on { opacity: 1; } .tml__decade-label { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .04em; color: var(--c-muted); white-space: nowrap; } .tml__decade-line { width: 1px; background: var(--c-line); margin-top: 8px; } .tml__decade-dot { width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; border: 3px solid var(--c-blue); background: var(--c-white); transition: background .2s ease, box-shadow .2s ease; } .tml__decade:hover .tml__decade-dot { box-shadow: 0 0 0 4px rgba(0, 113, 227, .12); } .tml__decade[aria-expanded="true"] .tml__decade-dot { background: var(--c-blue); box-shadow: 0 0 0 5px rgba(0, 113, 227, .16); } /* 앞서가는 사람 — 움직이지 않습니다. 마지막 항목보다 조금 앞에 서 있을 뿐이고, "여기서 계속 나아가는 중"이라는 인상만 줍니다. */ .tml__walker { position: absolute; top: var(--tml-axis-y); width: 40px; height: 40px; transform: translate(-50%, -100%); pointer-events: none; z-index: 4; opacity: 0; transition: opacity .5s ease; } .tml__walker.is-on { opacity: 1; } .tml__walker img { width: 100%; height: 100%; object-fit: contain; display: block; } /* ---------- 주요공법 ---------- */ .methods__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); } .methods__head > div:first-child { flex: 1 1 320px; } .methods__head .scene__lead { margin-top: 8px; } .methods { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } /* 좁은 화면에서는 카드를 세로로 쌓지 않고 옆으로 드래그해서 보는 가로 캐러셀로 바꿉니다(PC는 위 grid 그대로 유지). .methods 양옆에 9%씩 패딩을 줘서 그 폭만큼 앞·뒤 카드가 살짝 걸쳐 보이게 하고, 카드는 그 패딩을 뺀 나머지(=100%)를 정확히 채웁니다 — 카드 폭을 퍼센트로 더 줄이면(예: 82%) 첫/마지막 카드는 스크롤이 그 이상 음수/최대치를 넘어갈 수 없어 정중앙에 못 맞고 살짝 치우쳐 보입니다 (가운데 카드들은 양쪽으로 여유가 있어 눈치채기 어려웠던 것). scroll-padding은 따로 안 씁니다 — 패딩만으로 이미 정확히 중앙이 맞춰집니다(scroll-padding까지 같이 쓰면 오히려 어긋납니다). */ @media (max-width: 640px) { .methods { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--sp-3); padding: 4px 9%; -webkit-overflow-scrolling: touch; } .method { flex: 0 0 100%; scroll-snap-align: center; } } .method { display: flex; flex-direction: column; background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; } .method:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--c-blue-soft); } .method__thumb { position: relative; aspect-ratio: 16 / 10; background: var(--ph); overflow: hidden; } /* 유튜브 hqdefault 썸네일(480×360, 4:3)은 16:9 영상 내용 바깥 위아래에 검은 레터박스(각 45px, 총 90px = 25%)가 있습니다. object-fit:cover가 16:10 박스에 맞춰 이미 위아래 16.7%를 잘라내므로(0.75/0.9=0.8333 만 보임), 남은 검은 부분까지 마저 없애려면 0.8333/0.75 ≈ 1.11배만 더 확대하면 됩니다 — 그 이상 키우면 실제 영상 장면까지 잘려나갑니다. */ .method__thumb img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); } /* 유튜브 썸네일 위 재생 버튼 — ::before/::after 로 삼각형을 그려서 따로 아이콘 파일 없이 만듭니다. */ .method__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%; background: rgba(10, 37, 64, .68); display: grid; place-items: center; transition: background .2s var(--ease), transform .2s var(--ease); } .method__play::before { content: ""; width: 0; height: 0; margin-left: 4px; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent var(--c-white); } .method:hover .method__play { background: var(--c-blue); transform: translate(-50%, -50%) scale(1.08); } .method__body { padding: var(--sp-3); display: flex; flex-direction: column; flex: 1; } .method__code { align-self: flex-start; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .1em; color: var(--c-blue); background: var(--c-tint); padding: 4px 10px; border-radius: 999px; margin-bottom: 10px; } .method__name { font-size: 1.12rem; margin-bottom: 8px; } .method__summary { font-size: var(--fs-small); color: var(--c-muted); margin-bottom: var(--sp-2); } .method__points { display: grid; gap: 5px; margin-bottom: var(--sp-3); } .method__points li { font-size: var(--fs-small); color: var(--c-muted); padding-left: 16px; position: relative; } .method__points li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 1px; background: var(--c-blue-soft); rotate: 45deg; } /* ---------- CONTACT ---------- ⚠️ 흰색 글씨(rgba(255,255,255,…))로 되어 있던 옛 스타일입니다. 예전 디자인에서는 CONTACT가 짙은 남색 블록 위에 있어서 흰 글씨가 맞았지만, 지금은 about 장면 전체가 밝은 --paper 배경(.scene--paper)이라 흰 글씨가 거의 안 보였습니다. 밝은 배경 기준 토큰(--c-ink/--c-muted/--c-line)으로 다시 썼습니다 — 여기 두 톤(짙은 배경/밝은 배경)을 섞지 마세요. */ .offices { display: block; } .offices__domestic { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); margin-bottom: var(--sp-3); } /* 좁은 화면에서는 국내 카드 3개를 세로로 쌓지 않고 옆으로 드래그해서 보는 가로 캐러셀로 바꿉니다(해외지사 아코디언은 이 칸 밖에 있어 그대로 아래에 한 줄로 남습니다. PC는 위 grid 그대로 유지). 원리는 주요공법 캐러셀과 같습니다 — 패딩만으로 스냅 중앙을 맞추고 scroll-padding은 따로 쓰지 않습니다(같이 쓰면 양 끝 카드가 어긋남). */ @media (max-width: 640px) { .offices__domestic { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--sp-3); padding: 4px 9%; margin-bottom: calc(var(--sp-3) + 4px); -webkit-overflow-scrolling: touch; } .offices__domestic .office { flex: 0 0 100%; scroll-snap-align: center; } } .office { padding: var(--sp-3); border-radius: var(--radius); background: var(--c-white); border: 1px solid var(--c-line); box-shadow: var(--shadow-sm); } .office__tag { font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--c-blue); font-weight: 700; margin-bottom: 6px; } .office__name { font-size: 1rem; margin-bottom: 8px; color: var(--c-ink); } .office__addr { font-size: var(--fs-small); color: var(--c-muted); margin-bottom: 8px; } .office__addr a { color: inherit; border-bottom: 1px solid var(--c-line); } .office__addr a:hover { color: var(--c-blue); border-color: var(--c-blue); } .office__meta { font-size: var(--fs-small); color: var(--c-ink); display: grid; gap: 3px; } .office__meta a { border-bottom: 1px solid var(--c-line); } .office__meta a:hover { color: var(--c-blue); border-color: var(--c-blue); } /* 해외 지사 — 국내 카드 3개(.offices__domestic)와 같은 폭으로 그 아래에 세로로 길게 쌓은 줄들이고, 하나씩 눌러서 폅니다. 모바일에서 국내 카드가 가로 캐러셀로 바뀌어도 이건 .offices__domestic 바깥이라 영향을 안 받고 항상 한 줄 전체 폭으로 나옵니다. */ .office-overseas { display: flex; flex-direction: column; border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; background: var(--c-white); box-shadow: var(--shadow-sm); } .office-overseas__row { border-bottom: 1px solid var(--c-line); } .office-overseas__row:last-child { border-bottom: 0; } .office-overseas__row-head { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 20px; font-size: var(--fs-small); font-weight: 600; color: var(--c-ink); transition: color .2s; } .office-overseas__row-head::-webkit-details-marker { display: none; } .office-overseas__row-head::after { content: "+"; flex-shrink: 0; font-size: 1.3rem; font-weight: 400; line-height: 1; color: var(--c-blue); } .office-overseas__row[open] .office-overseas__row-head::after { content: "−"; } .office-overseas__row-head:hover { color: var(--c-blue); } .office-overseas__row-body { padding: 0 20px 20px; } .office-overseas__row-body .office__name { font-size: var(--fs-small); } /* ---------- 카드 그리드 (뉴스 / 프로젝트) ---------- */ .cards { display: grid; gap: var(--sp-3); } .cards--news { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .cards--projects { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } .card { display: flex; flex-direction: column; height: 100%; background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--radius-lg); overflow: hidden; text-align: left; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .card:hover { transform: translateY(-5px); box-shadow: var(--shadow); } .card__body { padding: var(--sp-3); display: flex; flex-direction: column; flex: 1; } .card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--c-muted); margin-bottom: 10px; } .card__cat { color: var(--c-blue); font-weight: 700; } .card__title { font-size: 1.08rem; line-height: 1.4; margin-bottom: 8px; } .card__excerpt { font-size: var(--fs-small); color: var(--c-muted); flex: 1; /* 3줄까지만 보여주고 나머지는 ... 으로 생략. 전체 글은 상세 페이지(news.html)에서 보여줍니다. */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; } .card__foot { margin-top: var(--sp-3); font-size: var(--fs-small); font-weight: 700; color: var(--c-blue); display: inline-flex; align-items: center; gap: 6px; } .card__foot::after { content: "→"; transition: transform .25s var(--ease); } .card:hover .card__foot::after { transform: translateX(4px); } /* ---------- 홈 뉴스 섹션 — 스포트라이트 2개, 가로로 나란히 ---------- 참고 컴포넌트(Aceternity의 AnimatedTestimonials, ui.aceternity.com/ components/animated-testimonials)의 "사진 여러 장이 살짝 겹쳐 쌓여있다가 지금 차례인 사진만 정면으로 나오고, 옆의 글이 함께 바뀌는" 구성은 그대로 두고, 이 스포트라이트를 두 개 가로로 나란히 배치해 한 번에 서로 다른 기사 두 개를 보여줍니다(controls.js). */ .news__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); } .news__seeall { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); font-weight: 700; color: var(--c-blue); } .news__seeall::after { content: "→"; transition: transform .2s var(--ease); } .news__seeall:hover::after { transform: translateX(4px); } .news-spotlight-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-5) var(--sp-4); width: min(1440px, 96vw); margin: 0 auto; } .news-spotlight { position: relative; box-sizing: border-box; flex: 1 1 520px; max-width: 700px; } .news-spotlight__viewport { position: relative; height: 420px; } .cards--news[data-news-track] { display: block; height: 100%; } .news-spotlight__card { position: absolute; inset: 0; display: grid; grid-template-columns: 44% 1fr; align-items: center; gap: var(--sp-3); pointer-events: none; /* 기본 .card 는 사각 테두리 상자 모양인데, 이 구성에서는 상자 없이 사진(둥근 모서리는 사진 자체가 가짐)과 글만 나란히 떠 있는 모습이라 테두리·배경·그림자를 지웁니다. */ background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; } .news-spotlight__card.is-active { pointer-events: auto; } .news-spotlight__card:hover { transform: none; box-shadow: none; } .news-spotlight__card .card__media { position: relative; height: 82%; border-radius: 20px; overflow: hidden; background: var(--ph); box-shadow: var(--shadow-sm); /* 회전만으로는 사진이 없는 기사(전부 같은 기본 아이콘)일 때 카드가 거의 겹쳐 안 보였습니다 — 카드마다 다른 방향으로 살짝 밀어내는 이동(translate)을 더해 "여러 장이 부채처럼 겹쳐 쌓인" 모습이 또렷이 드러나게 했습니다. */ transform: scale(.9) translate(var(--stack-x, 0), var(--stack-y, 0)) rotate(var(--stack-rot, 0deg)); opacity: .6; z-index: 1; transition: transform .5s var(--ease), opacity .5s var(--ease), box-shadow .5s var(--ease); } .news-spotlight__card.is-active .card__media { transform: scale(1) translate(0, 0) rotate(0deg); opacity: 1; z-index: 10; box-shadow: var(--shadow); } .news-spotlight__card .card__media img { width: 100%; height: 100%; object-fit: cover; } /* 사진이 없는 기사의 기본 아이콘(news-placeholder.svg)은 사진처럼 꽉 채워 잘라내지(cover) 않고, 옅은 배경 위에 작게 오려 보여줍니다 — 실제 사진과 아이콘이 같은 방식으로 보이면 아이콘 쪽이 늘어나 어색해 보였습니다. */ .news-spotlight__card .card__media--placeholder { background: var(--c-tint); display: grid; place-items: center; } .news-spotlight__card .card__media--placeholder img { width: 46%; height: 46%; object-fit: contain; } /* 사진들이 서로 다른 방향으로 밀리고 다른 각도로 겹쳐 보이도록 카드마다 값을 다르게 줍니다 — 사진이 없어 전부 같은 기본 아이콘일 때도 이 값 덕분에 "쌓여있다"는 느낌이 납니다. */ .news-spotlight__card:nth-child(5n+1) { --stack-rot: -7deg; --stack-x: -16px; --stack-y: 10px; } .news-spotlight__card:nth-child(5n+2) { --stack-rot: 6deg; --stack-x: 18px; --stack-y: 14px; } .news-spotlight__card:nth-child(5n+3) { --stack-rot: -5deg; --stack-x: 12px; --stack-y: -14px; } .news-spotlight__card:nth-child(5n+4) { --stack-rot: 8deg; --stack-x: -20px; --stack-y: -8px; } .news-spotlight__card:nth-child(5n+5) { --stack-rot: -9deg; --stack-x: 6px; --stack-y: 18px; } .news-spotlight__card .card__body { padding: 0; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .4s var(--ease), transform .4s var(--ease), visibility 0s .4s; } .news-spotlight__card.is-active .card__body { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .4s var(--ease) .15s, transform .4s var(--ease) .15s; } .news-spotlight__card .card__title { font-size: 1.1rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .news-spotlight__card .card__excerpt { -webkit-line-clamp: 4; line-clamp: 4; } /* 이전/다음 버튼 — 두 스포트라이트를 대표하는 화살표 한 쌍만 두고, 화면(두 스포트라이트를 담은 행) 가운데 아래에 둡니다. 누르면 controls.js가 두 스포트라이트를 함께 한 칸씩 움직입니다. */ .news-spotlight__nav { display: flex; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-4); } .news-spotlight__arrow { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--c-line); background: var(--c-white); color: var(--c-ink); display: grid; place-items: center; transition: border-color .2s, color .2s; } .news-spotlight__arrow:hover { border-color: var(--c-blue); color: var(--c-blue); } .news-spotlight__arrow svg { width: 15px; height: 15px; } @media (max-width: 760px) { /* 모바일은 화면이 좁아 2개를 나란히도, 위아래로 쌓아도 부담스러워서 첫 번째 스포트라이트 하나만 보여줍니다. */ .news-spotlight[data-news-instance="1"] { display: none; } .news-spotlight { flex-basis: 100%; max-width: 300px; } .news-spotlight__viewport { height: 480px; } .news-spotlight__card { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: var(--sp-3); } .news-spotlight__card .card__media { height: 180px; } } .tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; } .tag { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; background: var(--c-tint); color: var(--c-blue-dark); } /* ---------- 채용: 공고 아코디언 ---------- */ .jobs { display: grid; gap: 12px; margin-bottom: var(--sp-6); } .job { border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-white); overflow: hidden; transition: border-color .25s, box-shadow .25s; } .job.is-open { border-color: var(--c-blue-soft); box-shadow: var(--shadow-sm); } .job__head { width: 100%; display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3); text-align: left; } .job__title { font-size: 1.08rem; font-weight: 700; flex: 1; } .job__badges { display: flex; flex-wrap: wrap; gap: 6px; } .job__badge { font-size: var(--fs-xs); font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--c-tint); color: var(--c-blue-dark); white-space: nowrap; } .job__badge--due { background: #FFF1E8; color: #B8551C; } .job__toggle { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--c-line); position: relative; transition: transform .3s var(--ease), background .25s, border-color .25s; } .job__toggle::before, .job__toggle::after { content: ""; position: absolute; inset: 50% 6px auto; height: 1.5px; background: var(--c-ink); transform: translateY(-50%); } .job__toggle::after { transform: translateY(-50%) rotate(90deg); transition: opacity .25s; } .job.is-open .job__toggle { transform: rotate(180deg); background: var(--c-blue); border-color: var(--c-blue); } .job.is-open .job__toggle::before, .job.is-open .job__toggle::after { background: var(--c-white); } .job.is-open .job__toggle::after { opacity: 0; } .job__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); } .job.is-open .job__panel { grid-template-rows: 1fr; } .job__panel > div { overflow: hidden; } .job__inner { padding: 0 var(--sp-3) var(--sp-3); border-top: 1px solid var(--c-line-soft); padding-top: var(--sp-3); } .job__desc { font-size: var(--fs-small); color: var(--c-muted); margin-bottom: var(--sp-3); } .job__cols { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: var(--sp-3); } .job__coltitle { font-size: .85rem; font-weight: 800; letter-spacing: .04em; margin-bottom: 8px; } .job__list { display: grid; gap: 5px; } .job__list li { font-size: var(--fs-small); color: var(--c-muted); padding-left: 15px; position: relative; } .job__list li::before { content: ""; position: absolute; left: 0; top: .68em; width: 5px; height: 5px; border-radius: 50%; background: var(--c-blue-soft); } /* ---------- 실적 지구본 자리 (국외 탭) ---------- 원 모양은 유지하되, 높이는 국내 탭 지도(.pmap)와 똑같은 공식(min(65vh, 560px))을 씁니다 — 예전에는 폭(100%)을 기준으로 정사각형을 잡아서, 지도보다 폭이 좁은 대신 높이가 들쭉날쭉 달라 두 탭을 오가면 화면 높이가 출렁였습니다. 폭은 그 높이에 맞춰 정사각형으로 따라오므로 .pmap보다는 좁지만(칸 정가운데에 옵니다), 높이는 항상 같습니다. */ .globe { margin-bottom: var(--sp-5); } .globe__stage { position: relative; aspect-ratio: 1 / 1; height: min(65vh, 560px); min-height: 380px; max-width: 100%; margin: 0 auto; cursor: grab; touch-action: pan-y; } .globe__stage.is-dragging { cursor: grabbing; } .globe__stage canvas { display: block; width: 100% !important; height: 100% !important; } /* WebGL 을 못 쓰는 환경 — 지구본 자리를 접고 아래 숫자·목록만 남깁니다. .globe__hint는 이제 .proj-viz 형제라 .globe__stage와 같은 부모 밑 형제(~)가 아니므로, .proj-viz 안에 .is-unavailable이 있는지를 :has()로 봅니다. */ .globe__stage.is-unavailable { display: none; } .proj-viz:has(.globe__stage.is-unavailable) ~ .globe__hint { display: none; } /* .pmap과 같은 이유(모바일에서 스크롤 시 손가락이 걸림)로 모바일에서는 .pmap과 동일한 고정 높이로 맞춥니다. */ @media (max-width: 760px) { .globe__stage { height: 280px; min-height: 280px; } } .globe__pills { position: absolute; inset: 0; pointer-events: none; } .gpill { position: absolute; top: 0; left: 0; white-space: nowrap; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .94); border: 1px solid var(--c-line); box-shadow: var(--shadow-sm); font-size: var(--fs-xs); font-weight: 700; color: var(--c-navy); transition: opacity .25s var(--ease); } .gpill small { font-weight: 600; color: var(--c-blue); margin-left: 4px; } .globe__tip { position: absolute; z-index: 3; pointer-events: none; transform: translate(14px, -50%); padding: 7px 12px; border-radius: var(--radius); background: var(--c-navy); color: var(--c-white); font-size: var(--fs-xs); line-height: 1.5; box-shadow: var(--shadow); display: grid; } .globe__tip strong { font-size: var(--fs-xs); } .globe__tip span { color: var(--c-blue-soft); } .globe__hint { text-align: center; margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--c-muted); letter-spacing: .02em; } /* ---------- 실적 요약 숫자 ---------- 참고 자료(_전달_프로젝트지도)의 통계 줄과 같은 모양 — 항목 폭에 맞춰 왼쪽부터 나란히, 전체 폭으로 늘려 펼치지 않습니다. */ .globe__stats { display: flex; flex-wrap: wrap; gap: clamp(28px, 5vw, 64px); margin: var(--sp-4) 0 var(--sp-5); } .globe__stats > div { display: grid; gap: 2px; } .globe__stats dt { /* 예전엔 "TOTAL PROJECTS"류 짧은 영문 라벨이라 대문자·자간을 줬는데, 지금은 "1973년부터 수행된 프로젝트"처럼 긴 한글 문장이라 그 처리를 빼야 읽기 편합니다(한글은 대문자 개념이 없고, 넓은 자간은 긴 문장에서 오히려 잘 안 읽힙니다). */ font-size: var(--fs-small); font-weight: 600; color: var(--c-muted); margin-bottom: 2px; } .globe__stats dd { font-family: var(--font-display); font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 900; letter-spacing: -.03em; line-height: 1; color: var(--c-navy); font-variant-numeric: tabular-nums; } /* ---------- 지역별 실적 순위 ---------- */ .regions { display: grid; gap: 10px; align-content: start; } .regions li { display: grid; grid-template-columns: 8.5rem 1fr 3rem; gap: var(--sp-2); align-items: center; font-size: var(--fs-small); } .regions__name { font-weight: 600; color: var(--c-ink); } .regions__bar { height: 8px; border-radius: 999px; background: var(--c-tint); overflow: hidden; } .regions__bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--c-blue-mid), var(--c-blue)); } .regions__n { text-align: right; font-weight: 700; color: var(--c-blue); } @media (max-width: 560px) { .regions li { grid-template-columns: 6.5rem 1fr 2.6rem; gap: 10px; font-size: var(--fs-xs); } .gpill { font-size: 10px; padding: 3px 8px; } } /* ---------- 로딩 / 빈 상태 ---------- 목록이 비었을 때 그냥 글자 한 줄만 있으면 그 영역 자체가 없는 것처럼 보여서, 카드와 같은 둥근 모서리의 점선 테두리 박스로 "틀"을 줍니다. */ .state { grid-column: 1 / -1; padding: var(--sp-6) var(--sp-5); text-align: center; color: var(--c-muted); font-size: var(--fs-small); border: 1px dashed var(--c-line); border-radius: var(--radius); background: var(--c-tint, transparent); } .site-error { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 200; max-width: min(560px, 92vw); padding: 14px 18px; border-radius: var(--radius); background: #FEF3F2; border: 1px solid #FDA29B; color: #B42318; font-size: var(--fs-small); box-shadow: var(--shadow); } /* ---------- 스크롤 등장 애니메이션 ---------- 반드시 `.js-anim` 이 붙어 있을 때만 숨깁니다. (index.html 상단 인라인 스크립트 참고) 플래그 없이 `.reveal { opacity: 0 }` 로 두면, 자바스크립트가 멈추거나 탭이 백그라운드에서 로드돼 트랜지션이 진행되지 않을 때 페이지 전체가 반투명하게(뿌옇게) 굳어 버립니다. 이 줄을 다시 풀지 마세요. */ .js-anim .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .js-anim .reveal.is-in { opacity: 1; transform: none; } .js-anim .reveal[data-delay="1"] { transition-delay: .08s; } .js-anim .reveal[data-delay="2"] { transition-delay: .16s; } .js-anim .reveal[data-delay="3"] { transition-delay: .24s; } .js-anim .reveal[data-delay="4"] { transition-delay: .32s; } @media (prefers-reduced-motion: reduce) { .js-anim .reveal { opacity: 1; transform: none; transition: none; } } @media (max-width: 860px) { .ceo { grid-template-columns: 1fr; } /* 해시태그처럼 붙는 배지(팀/형태/근무지/마감)가 좁은 화면에서 제목과 한 줄을 다투다 잘려 보이는 일이 없도록, 배지 칸을 아예 새 줄 전체(100%)로 떼어냅니다 — 그 줄 안에서는 배지끼리 알아서 줄바꿈됩니다(.job__badges 는 이미 flex-wrap). 배지 하나가 유난히 길 때를 대비해 그 안 글자도 한 줄 고정을 풀어 둡니다. */ .job__title { min-width: 0; } .job__badges { flex-basis: 100%; min-width: 0; } .job__badge { white-space: normal; } .job__head { flex-wrap: wrap; } } /* ---------- 지원하기 팝업 ---------- */ .apply-modal { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: var(--sp-3); } .apply-modal__backdrop { position: absolute; inset: 0; background: rgba(10, 37, 64, .55); backdrop-filter: blur(4px); } .apply-modal__panel { position: relative; width: min(420px, 100%); background: var(--c-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--sp-4); text-align: center; animation: applyModalIn .25s var(--ease); } @keyframes applyModalIn { from { opacity: 0; transform: translateY(14px) scale(.98); } } .apply-modal__close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; font-size: 1.3rem; line-height: 1; color: var(--c-muted); transition: background .2s; } .apply-modal__close:hover { background: var(--c-tint); } .apply-modal__eyebrow { font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--c-blue); font-weight: 800; margin-bottom: 6px; } .apply-modal__title { font-size: 1.2rem; margin-bottom: var(--sp-2); } .apply-modal__to { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: var(--fs-small); color: var(--c-muted); padding: 10px 14px; background: var(--c-tint); border-radius: var(--radius); margin-bottom: var(--sp-2); } .apply-modal__to strong { color: var(--c-ink); word-break: break-all; } .apply-modal__copy { margin-left: auto; flex-shrink: 0; font-size: var(--fs-xs); font-weight: 700; color: var(--c-blue); padding: 3px 10px; border: 1px solid var(--c-blue-soft); border-radius: 999px; transition: background .2s, color .2s, border-color .2s; } .apply-modal__copy:hover { background: var(--c-blue); color: var(--c-white); } .apply-modal__copy.is-copied { background: var(--c-blue); color: var(--c-white); border-color: var(--c-blue); } .apply-modal__hint { font-size: var(--fs-xs); color: var(--c-muted); margin-bottom: var(--sp-3); } .apply-modal__send { width: 100%; justify-content: center; } .apply-modal__fallback { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.5; } /* ---------- 프로젝트 국내/국외 탭 ---------- */ .proj-tabs { display: flex; gap: 8px; margin-bottom: var(--sp-3); } .proj-tab { padding: 8px 20px; border-radius: 999px; border: 1px solid var(--c-line); background: var(--c-white); font-size: var(--fs-small); font-weight: 700; color: var(--c-muted); transition: all .2s var(--ease); } .proj-tab:hover { border-color: var(--c-blue-soft); color: var(--c-blue); } .proj-tab.is-on { background: var(--c-blue); border-color: var(--c-blue); color: var(--c-white); } /* ---------- 지도(지구본)와 카드 패널 — 좌우 배치 ---------- 국내·국외 둘 다 같은 배치입니다: 지도/지구본(왼쪽, 넓게) + 카드 패널(오른쪽, 좁게). 네 요소(.proj-viz__map×2, [data-pmap-side], [data-oproj-side])가 모두 .proj-viz의 바로 아래 자식이고, 안 쓰는 탭 쪽은 [hidden]이라 grid 배치에서 아예 빠지므로, order로만 자리를 정하면 됩니다 — 폭 배정을 탭마다 맞바꿀 필요가 없습니다. */ .proj-viz { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: start; } .proj-viz > .proj-viz__map { order: 1; } .proj-viz > [data-pmap-side], .proj-viz > [data-oproj-side] { order: 2; } @media (max-width: 900px) { .proj-viz { grid-template-columns: 1fr; } } /* ---------- 국내 지도 (MapLibre 실제 지도 타일) ---------- assets/js/projectmap.js 가 그립니다. .proj-viz 왼쪽 칸 폭을 그대로 채우므로 max-width로 묶을 필요가 없습니다. */ .pmap { position: relative; width: 100%; height: min(65vh, 560px); min-height: 380px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--c-line); /* 캔버스가 이 칸을 다 못 채우는 경우(원인을 여러 차례 고쳐 봤지만 완전히 없애지 못했습니다)에도 최소한 눈에 거슬리지 않도록, 사진 자리표시용 진한 남색(--ph) 대신 지도 바탕(CARTO 라이트 타일)과 비슷한 옅은 회색을 씁니다 — 남는 자리가 있어도 "깨진 화면"처럼 보이지 않고 지도의 일부처럼 자연스럽게 섞입니다. */ background: #e7ebef; } .pmap.is-unavailable { display: none; } .pmap.is-unavailable ~ .pmap__legend { display: none; } /* 모바일은 지도가 크면 스크롤할 때마다 지도 위에서 손가락이 걸려 (지도가 터치를 가로채) 페이지를 내리기 불편합니다 — 최대한 작게. */ @media (max-width: 760px) { .pmap { height: 280px; min-height: 280px; } } .pmap__canvas { position: absolute; inset: 0; } /* 첫 탭 전까지 지도 위 모든 터치를 대신 받는 오버레이 — 지도(캔버스)는 이 밑에서 아예 터치를 못 받으므로 스크롤이 그대로 통과됩니다. 탭하면 is-hidden이 붙어 사라지고, 그 뒤로는 지도가 평소처럼 조작됩니다. */ .pmap__gate { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; cursor: pointer; } .pmap__gate span { padding: 8px 16px; border-radius: 999px; background: rgba(17, 24, 39, .55); backdrop-filter: blur(2px); color: #fff; font-size: var(--fs-small); font-weight: 700; } .pmap__gate.is-hidden { display: none; } /* PC는 손가락 터치로 스크롤을 가로챌 일이 없으니(마우스 드래그로만 지도를 움직임) 오버레이 없이 처음부터 바로 조작 가능하게 둡니다 — .pmap 모바일 전용 높이 조정과 같은 기준(760px)을 씁니다. */ @media (min-width: 761px) { .pmap__gate { display: none; } } .pmap__back { position: absolute; left: 12px; top: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 999px; border: 1px solid var(--c-line); background: rgba(255, 255, 255, .94); backdrop-filter: blur(6px); font: inherit; font-size: var(--fs-small); font-weight: 700; color: var(--c-ink); cursor: pointer; box-shadow: var(--shadow-sm); } .pmap__back:hover { border-color: var(--c-blue); color: var(--c-blue); } /* MapLibre 팝업(마우스오버·클릭 말풍선) — 사이트 톤(짙은 남색)에 맞춥니다 */ .maplibregl-popup-content { background: var(--c-navy); color: var(--c-white); border-radius: var(--radius); padding: 9px 12px; font-family: inherit; font-size: var(--fs-xs); line-height: 1.5; max-width: 260px; } .maplibregl-popup-content strong { font-size: var(--fs-small); } .maplibregl-popup-tip { border-top-color: var(--c-navy) !important; border-bottom-color: var(--c-navy) !important; } .maplibregl-ctrl-attrib { font-size: 10px; } /* 범례 — 지도의 색과 정확히 같은 띠여야 거짓말을 하지 않습니다. .pmap 이 안 보이면(is-unavailable) 같이 숨깁니다. */ .pmap__legend { display: flex; align-items: center; gap: 12px; margin-top: var(--sp-3); flex-wrap: wrap; } .pmap__legend-bar { height: 10px; width: min(260px, 38vw); border-radius: 999px; background: linear-gradient(90deg, #c7ddf7, #93c5fd, #3b82f6, #1d4ed8); border: 1px solid var(--c-line); } .pmap__legend-cap { font-size: var(--fs-xs); color: var(--c-muted); font-variant-numeric: tabular-nums; } .pmap__legend-title { font-size: var(--fs-xs); font-weight: 700; } /* 시/도·바다 이름 — 지도 위 HTML 오버레이(글자 없는 타일 위에 직접 얹음). assets/js/projectmap.js의 buildProvLabels()/placeProvLabels()가 위치를 계속 다시 계산해 옮깁니다. */ .pmap__label { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; white-space: nowrap; font-size: 11.5px; font-weight: 700; color: #3a3a3c; letter-spacing: -.01em; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 6px #fff; } .pmap__label--sea { font-weight: 500; color: #5b7fa6; font-size: 12px; letter-spacing: .2em; } /* ---------- 국내 실적 오른쪽 패널: 시/도 카드 → 시/군/구 → 프로젝트 목록 ---------- assets/js/projectmap.js가 그리며, 지도 클릭(시/도 색칠, 시군구 원)과 서로 연동됩니다(카드를 누르면 지도가 그 지역으로 이동, 지도의 원을 누르면 이 패널이 그 시군구 목록을 엽니다). */ .pmap-side { position: relative; } .panel { display: flex; flex-direction: column; height: min(65vh, 560px); min-height: 380px; border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: var(--c-white); box-shadow: var(--shadow-sm); overflow: hidden; } .panel__head { padding: 18px 20px 14px; border-bottom: 1px solid var(--c-line); } .panel__head--tight { padding-bottom: 12px; } .panel__crumb { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; } .panel__crumb button { border: 1px solid var(--c-line); background: var(--c-white); border-radius: 999px; font: inherit; font-size: var(--fs-xs); font-weight: 700; color: var(--c-muted); padding: 5px 12px; cursor: pointer; transition: color .15s, border-color .15s; } .panel__crumb button:hover { color: var(--c-blue); border-color: var(--c-blue-soft); } .panel__sep { color: var(--c-line); } .panel__cur { font-size: var(--fs-xs); font-weight: 700; color: var(--c-ink); } .panel__title { font-size: 1.3rem; font-weight: 900; letter-spacing: -.02em; line-height: 1.2; color: var(--c-navy); } .panel__sub { font-size: var(--fs-xs); color: var(--c-muted); margin-top: 6px; line-height: 1.6; } .panel__sub b { color: var(--c-blue); } .panel__big { margin-top: 10px; font-size: 1.5rem; font-weight: 900; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--c-navy); } .panel__big small { font-size: var(--fs-xs); font-weight: 500; color: var(--c-muted); margin-left: 3px; } .panel__body { flex: 1; overflow-y: auto; } /* 목록 접기(+/-) 버튼은 모바일 전용입니다 — 데스크톱에서는 패널이 지도 옆 자기 칸에 들어가 길이가 문제되지 않으므로 아예 감춥니다. 실제 모양과 접힘 규칙은 아래 640px 미디어쿼리에 있습니다. */ .panel__fold { display: none; } .panel__foot { padding: 10px 20px; border-top: 1px solid var(--c-line); font-size: var(--fs-xs); color: var(--c-muted); } /* 목록 맨 아래, 로고 아이콘이 뜻하는 바를 설명하는 작은 줄(국내 시/군/구 목록·해외 나라 상세 둘 다 씁니다) — 위 문구보다 한 단 더 작고 옅게 둡니다. */ .panel__foot-note { display: flex; align-items: flex-start; gap: 5px; margin-top: 4px; font-size: 11px; color: var(--c-muted); line-height: 1.4; } .panel__foot-note img { width: 12px; height: 12px; flex: 0 0 auto; margin-top: 1px; } /* 시/도 카드 그리드 — 클래스명이 .cards/.card 이면 뉴스 카드(.cards--news .card, components.css 위쪽 342행 부근)와 이름이 겹쳐 스타일이 서로 덮어써지므로, 이 패널 전용 이름(.prov-*)을 씁니다. */ .prov-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; } .prov-card { display: grid; gap: 2px; text-align: left; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-white); padding: 11px 13px 10px; font: inherit; color: var(--c-ink); cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; } .prov-card:hover { border-color: var(--c-blue); box-shadow: 0 6px 18px rgba(0, 113, 227, .12); transform: translateY(-1px); } .prov-card__nm { font-size: var(--fs-xs); font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .prov-card__n { font-size: 1.2rem; font-weight: 900; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; } .prov-card__n small { font-size: .7rem; font-weight: 500; color: var(--c-muted); margin-left: 2px; } .prov-card__bar { height: 5px; border-radius: 999px; background: var(--c-tint); overflow: hidden; margin-top: 5px; } .prov-card__bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--c-blue-mid), var(--c-blue)); } @media (max-width: 1100px) { .prov-cards { grid-template-columns: 1fr; } } /* ---------- 모바일: 카드 목록 접기 + 3열 ---------- 좁은 화면에서는 지도/지구본 아래에 이 패널이 통째로 놓이는데, 시/도 17개(국내)·나라 12개(국외)가 한 줄에 하나씩 쌓이면 스크롤만 한참 내려가야 했습니다. 두 가지를 같이 손봅니다. 1) 제목 옆 +/- 버튼으로 목록을 여닫고 처음에는 접어 둡니다. 접힘 표시(.is-folded)는 projectmap.js·overseasmap.js가 카드 화면을 그릴 때 항상 붙여 두지만, 그걸 실제로 감추는 규칙은 이 미디어쿼리 안에만 있습니다 — 그래서 데스크톱은 예전 그대로 늘 펼쳐져 있고 버튼도 보이지 않습니다. 접었을 때는 패널 높이(min 380px)까지 같이 풀어 제목 줄만 남게 합니다. 2) 카드를 3열로 깔고 글자를 줄입니다. 카드 이름은 원래부터 한 줄 말줄임(.prov-card__nm)이라 "우즈베키스탄"처럼 긴 이름도 열을 밀지 않습니다 — 다만 그리드 칸이 내용 크기 아래로 줄어들 수 있도록 min-width: 0 을 함께 줍니다. */ @media (max-width: 640px) { .panel__head--fold { display: grid; grid-template-columns: 1fr auto; align-items: start; column-gap: 10px; } .panel__head--fold .panel__sub { grid-column: 1 / -1; } .panel__fold { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: 0 0 auto; border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-white); color: var(--c-blue); font-size: 18px; font-weight: 700; line-height: 1; cursor: pointer; } .panel.is-foldable.is-folded { height: auto; min-height: 0; } .panel.is-foldable.is-folded .panel__body, .panel.is-foldable.is-folded .panel__foot { display: none; } .prov-cards { grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 10px; } .prov-card { min-width: 0; padding: 8px 7px; gap: 1px; } /* 320px 같은 아주 좁은 화면에서는 12px 로는 "세종특별자치시"(7자)부터 말줄임이 걸려서, 화면 폭을 따라 11px 까지 내려가게 둡니다. */ .prov-card__nm { font-size: clamp(11px, 3.2vw, 12px); } .prov-card__n { font-size: 1rem; } .prov-card__n small { font-size: .62rem; margin-left: 1px; } .prov-card__bar { height: 4px; margin-top: 4px; } } /* 시/도 안의 시/군/구 목록 */ .arow { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--c-tint); cursor: pointer; transition: background .15s; } .arow:hover { background: var(--c-tint); } .arow__nm { font-weight: 700; font-size: var(--fs-small); color: var(--c-ink); } .arow__ct { font-size: var(--fs-xs); color: var(--c-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .arow__ct b { color: var(--c-ink); } .arow__bar { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: var(--c-tint); overflow: hidden; } .arow__bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--c-blue-mid), var(--c-blue)); } /* 해외 실적 카드: 연도 행 아래 "구조설계 N건 · 안전진단 M건" 상세 */ .arow__detail { grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--c-muted); } /* 시/군/구 안의 프로젝트 목록 */ .prow { padding: 10px 20px 10px 26px; border-bottom: 1px solid var(--c-tint); font-size: var(--fs-xs); line-height: 1.5; } .prow__nm { font-weight: 600; color: var(--c-ink); } /* 관리자가 지정한 몇몇 프로젝트명 끝에 붙는 작은 로고(projectmap.js의 LOGO_NAMES 참고) — 글자 옆에 자연스럽게 놓이도록 살짝 띄우고 기준선을 글자 중앙에 맞춥니다. */ /* 전역 리셋(base.css)이 img를 기본 block으로 바꿔 두어서, 그대로 두면 글자 옆이 아니라 무조건 다음 줄에 혼자 떨어져 보입니다 — 여기서만 inline-block으로 되돌려 글자와 한 줄에 나란히 놓이게 합니다. */ .prow__logo { display: inline-block; width: 14px; height: 14px; margin-left: 5px; vertical-align: -2px; } /* 이름이 길어 줄바꿈될 때 로고만 다음 줄에 혼자 떨어지지 않도록, 마지막 단어 + 로고를 한 덩어리로 묶어 줄바꿈 단위를 통째로 만듭니다 (nameHTML() 참고) — 그래도 줄이 바뀌면 이 덩어리째로 다음 줄로. */ .prow__nm-tail { white-space: nowrap; } .prow__kd { color: var(--c-muted); font-size: .75rem; margin-top: 2px; } /* 해외 나라 상세, 큰 건수 옆의 "[로고] N건" — 로고와 숫자가 줄바꿈 없이 항상 가로 한 줄로 나란히 놓이도록 inline-flex로 묶습니다. */ .oproj-patlogo { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } .oproj-patlogo img { width: 14px; height: 14px; flex: 0 0 auto; } .pmap-chip { display: inline-block; font-size: .625rem; font-weight: 700; letter-spacing: .08em; color: var(--c-white); background: var(--c-blue); border-radius: 5px; padding: 1px 7px; margin-left: 6px; vertical-align: 1px; } .pmap-chip.is-tsc { background: #34aadc; } .panel__empty { padding: 26px 20px; color: var(--c-muted); font-size: var(--fs-small); text-align: center; } /* ---------- 센코어테크의 역량 (총 인원·순위 카드 + 매출 카드) ---------- 왼쪽에 흰 카드 두 장(총 인원, 강구조시공능력 순위)을 세로로 쌓고, 오른쪽에 기준연도 매출액과 곡선 그래프를 담은 큰 카드 하나를 둡니다. 세 카드 모두 흰 배경에 주요 숫자는 파란색(--c-blue)입니다. 순위· 기준연도·총 인원(소속/협력업체)·연도별 금액은 Pages CMS의 [⑤ 센코어 테크 역량]에서 입력하면 render.js가 그대로 반영합니다(설명 문구 자체는 고정값). */ .sct-capability { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: var(--sp-3); align-items: stretch; } @media (max-width: 760px) { .sct-capability { grid-template-columns: 1fr; } } /* 왼쪽 — 총 인원·순위 카드 두 장 */ .sct-stats { display: flex; flex-direction: column; gap: var(--sp-3); } @media (max-width: 760px) { .sct-stats { flex-direction: row; } } /* justify-content는 center가 아니라 flex-start입니다 — 순위 카드(값+ 라벨)와 총 인원 카드(값+라벨+소속 내역)는 아래에 붙는 줄 수가 달라서, 가운데 정렬이면 "4위"와 "521명"처럼 맨 위 숫자의 높이가 카드마다 서로 달라져 버립니다. flex-start로 둘 다 카드 위쪽에서 시작하게 하면 숫자 높이가 항상 맞습니다. */ .sct-stat { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-start; gap: 8px; padding: var(--sp-4); border-radius: var(--radius-lg); background: var(--c-white); border: 1px solid var(--c-line); box-shadow: var(--shadow-sm); } .sct-stat__value { font-size: 3.4rem; font-weight: 800; color: var(--c-blue); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .sct-stat__unit { font-size: 1.5rem; font-weight: 700; color: var(--c-muted); margin-left: 4px; } /* 순위 앞에 붙는 말(중국어 "第4名"의 "第") — 한/영/일은 값이 없어 빈 span으로 남으므로, :empty일 때는 여백을 주지 않아 자리가 티나지 않게 합니다. */ .sct-stat__prefix { font-size: 1.5rem; font-weight: 700; color: var(--c-muted); } .sct-stat__prefix:not(:empty) { margin-right: 2px; } .sct-stat__label { font-size: var(--fs-small); color: var(--c-ink); font-weight: 600; } /* 480px 이하에서만 켜지는 강제 줄바꿈(render.js가 한국어일 때만 "기준" 뒤에 심어 둡니다) — 데스크톱 등 카드가 넓을 때는 굳이 끊을 필요가 없어 기본은 숨겨 둡니다. */ .sct-rank-break { display: none; } .sct-stat__sublabel { font-size: var(--fs-xs); color: var(--c-muted); } @media (max-width: 480px) { .sct-stat__value { font-size: 2.5rem; } /* 좁은 화면에서는 두 카드가 나란히(row) 배치되어 칸이 매우 좁아져, "2026년 기준 강구조시공능력 순위"·"OO 소속 000명" 같은 문구가 단어 중간에서 부자연스럽게 여러 줄로 잘렸습니다 — 글자를 줄여 (2026년 기준 / 강구조시공능력 순위, 소속 / 명이 한 줄씩 깨끗하게 떨어지도록) 해결합니다. 카드 안쪽 여백(padding)은 원래 값(--sp-4) 대신 살짝만 줄인 16px을 씁니다 — 여백을 더 줄이면 글자를 키울 여지가 생기지만 글자가 왼쪽에 붙어 보인다는 피드백이 있어, 여백은 이 정도로 유지하고 그 안에서 줄바꿈이 유지되는 최대치로 글자 크기를 맞췄습니다(320px 최소 폭 기준 11.5px가 한계). .sct-stat__label 은 순위 라벨과 "센코어테크의 임직원 수" 라벨이 같은 클래스라 여기서 크기를 맞추면 둘 다 함께 맞춰집니다. */ .sct-stat { padding: 16px; } .sct-stat__label { font-size: 11px; } .sct-stat__sublabel { font-size: 10px; } .sct-rank-break { display: block; } } /* 오른쪽 — 기준연도 매출액 + 곡선 그래프 카드 */ .sct-revenue { padding: var(--sp-4); border-radius: var(--radius-lg); background: var(--c-white); border: 1px solid var(--c-line); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; } .sct-revenue__label { font-size: var(--fs-xs); color: var(--c-muted); font-weight: 600; } .sct-revenue__value { display: block; margin-top: 6px; font-size: 3.4rem; font-weight: 800; color: var(--c-blue); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .sct-revenue__unit { font-size: 1.3rem; font-weight: 700; color: var(--c-muted); margin-left: 4px; } .sct-revenue__chart { flex: 1; display: flex; flex-direction: row; align-items: flex-start; gap: 10px; margin-top: var(--sp-4); min-height: 0; } /* y축 눈금 — render.js가 0부터 최댓값까지 "보기 좋은" 간격(niceNum)으로 나눈 값을 위(최댓값)→아래(0) 순서로 내려줍니다. svg의 padTop/padBottom (30px/16px, 200 기준 15%/8%)과 같은 비율로 위아래 여백을 줘서 눈금선과 실제로 맞습니다. */ .sct-revenue__axis { flex: 0 0 auto; height: 170px; display: flex; flex-direction: column; justify-content: space-between; padding: 26px 0 14px; font-size: var(--fs-xs); color: var(--c-muted); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } .sct-revenue__plot { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; } /* svg(눈금선·곡선·채움)와 그 위에 겹치는 점·값 라벨(.sct-revenue__pts)을 같은 칸에 포개 둡니다. 라벨을 svg 가 아니라 이 HTML 오버레이로 그리는 이유는, svg가 preserveAspectRatio="none"이라 칸 너비/높이 비율에 맞춰 가로세로가 다르게 늘어나는데(곡선은 디자인상 괜찮지만), 그 안의 글자·원까지 같이 늘어나면 찌그러져 보이기 때문입니다. */ .sct-revenue__chartbox { position: relative; height: 170px; } .sct-revenue__svg { display: block; width: 100%; height: 170px; } .sct-revenue__grid { stroke: var(--c-line); stroke-width: 1; } .sct-revenue__grid--base { stroke: var(--c-line); stroke-width: 1.5; } .sct-revenue__pts { position: absolute; inset: 0; pointer-events: none; } .sct-revenue__pt { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--c-blue); border: 2px solid var(--c-white); box-shadow: 0 0 0 1px rgba(11, 23, 39, .08); } .sct-revenue__ptval { position: absolute; left: 50%; bottom: 100%; margin-bottom: 6px; transform: translateX(-50%); font-style: normal; font-size: 11px; font-weight: 700; color: var(--c-ink); white-space: nowrap; font-variant-numeric: tabular-nums; } .sct-revenue__years { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--c-muted); font-variant-numeric: tabular-nums; } @media (max-width: 480px) { .sct-stat__value, .sct-revenue__value { font-size: 2.5rem; } }