두 칸이 들어가는
것을 전제로 grid-template-columns:130px 1fr 을 걸어 두었음.
지금은 article 안에 button 하나만 들어가므로 그 button 이
130px 칸에 갇혀 제목이 한 글자씩 줄바꿈됐음
------------------------------------------------------------------ */
#newsArchive .news-archive-list article{
display:block;grid-template-columns:none;gap:0;padding:0;border-bottom:0;
}
#newsArchive .news-archive-list article button{
display:grid;grid-template-columns:64px minmax(0,1fr) auto;
gap:18px;align-items:baseline;width:100%;
padding:15px 0;border:0;border-bottom:1px solid var(--line);
background:none;text-align:left;cursor:pointer;
}
#newsArchive .news-archive-list article:last-child button{border-bottom:0}
#newsArchive .news-archive-list h3{
margin:0;font-weight:600;
color:var(--navy);letter-spacing:-.015em;transition:color var(--t-fast);
}
#newsArchive .news-archive-list article button:hover h3{color:var(--blue)}
#newsArchive .news-day{color:var(--muted);font-weight:700;padding-top:2px}
@media(max-width:700px){
#newsArchive .news-archive-list article button{grid-template-columns:1fr;gap:5px;padding:13px 0}
}
/* 최근 소식 카드를 누를 수 있다는 것을 보이게 함 (2026-09-22) */
.news-visual-row.is-clickable{cursor:pointer;transition:opacity var(--t-fast)}
.news-visual-row.is-clickable:hover h2{color:var(--blue)}
.news-visual-row.is-clickable h2{transition:color var(--t-fast)}
.news-visual-row.is-clickable:focus-visible{outline:2px solid var(--blue);outline-offset:6px}
/* 뉴스 상세 이미지 — 원본보다 크게 늘리지 않음 (2026-09-22)
옛 홈페이지 이미지 43건 중 18건이 창 폭(660px)보다 작음.
늘리면 흐려지므로 원래 크기까지만 보이고 가운데에 둠 */
.news-modal-img{display:flex;justify-content:center;background:var(--soft)}
.news-modal-img img{width:auto;max-width:100%;height:auto}
/* ==================================================================
브라우저가 알아서 그리는 것들 (2026-09-22)
글자를 끌어 선택했을 때의 색, 입력칸의 깜박이는 막대, 밑줄이
글자에 닿는 거리, 표 안 숫자의 자릿수 정렬.
이런 것은 손대지 않으면 브라우저 기본값이 그대로 나가는데,
그 기본값은 이 사이트의 색과 아무 관계가 없음.
화면을 "만든" 것과 "가져다 붙인" 것의 차이가 여기서 드러남
================================================================== */
/* 글자를 끌어 선택했을 때 */
::selection{background:#cfe6f4;color:var(--navy)}
.site-header ::selection,.main-hero ::selection,.sub-hero ::selection{
background:rgba(147,220,240,.32);color:#fff
}
/* 입력칸에서 깜박이는 막대 */
input,textarea,select{caret-color:var(--blue)}
/* 밑줄이 글자에 바짝 붙으면 받침이 잘려 보임 */
a:hover,.text-link{text-underline-offset:.22em;text-decoration-thickness:1px}
/* 날짜와 번호는 자릿수가 맞아야 위아래로 읽힘.
특허번호, 등록일, 뉴스 날짜처럼 세로로 늘어서는 숫자에 씀 */
.record-date,.record-main p,.news-day,.news-modal-date,
.news-year-head strong,.footer-bottom{font-variant-numeric:tabular-nums}
/* ==================================================================
경로 표시 (2026-09-22)
제목 바로 위에 붙어 있던 작은 파란 라벨을 없애면서, 어느 갈래의
화면인지 알려 주던 몫만 여기로 옮김. 라벨과 달리 이건 누를 수 있어
위 단계로 돌아갈 수 있음. 장식이 아니라 길 안내임
================================================================== */
.crumb{display:flex;align-items:center;flex-wrap:wrap;gap:0 6px;margin-bottom:18px}
.crumb a,.crumb span{letter-spacing:-.005em}
.crumb a{color:inherit;opacity:.72;text-decoration:none;transition:opacity var(--t-fast)}
.crumb a:hover{opacity:1;text-decoration:underline;text-underline-offset:.22em}
.crumb span{opacity:.72}
.crumb > * + *::before{content:'›';display:inline-block;margin-right:6px;opacity:.5}
/* 어두운 배경(히어로) 위에서는 흰 글씨 */
.sub-hero .crumb,.main-hero .crumb{color:#fff}
.sub-hero .crumb a:hover{opacity:1}
/* 큰 제목 위 여백 정리 — 라벨이 빠지면서 생긴 공백을 메움 */
.sub-hero h1,.sub-hero.short h1{margin-top:0}
.detail-section > .wrap > h2:first-child,
.section > .wrap > h2:first-child{margin-top:0}
/* ==================================================================
본문 한 줄 길이 (2026-09-22)
한 줄이 너무 길면 다음 줄 첫 글자를 찾느라 눈이 되돌아옴.
한국어는 한 줄에 35~45자가 편하게 읽힘.
지금은 회사소개 본문이 1280px(한글 75자)까지 늘어나 있었음.
em 단위를 쓰면 글자 크기가 바뀌어도 글자 수 기준이 유지됨
(17px 글자에서 42em = 한글 약 42자)
================================================================== */
.detail-section p,
.section p,
.service-story p,
.service-body p,
.story-copy p,
.achievement-copy p,
.news-visual-copy p,
.company-deepcopy p,
p.lead,
p.section-copy{max-width:50em}
/* 폭이 이미 좁은 칸 안에서는 제한을 풀어 줌.
좁은 칸에 다시 제한을 걸면 글이 왼쪽으로 몰림 */
.split p,.safety-route p,.record-main p,.field-card p,.product-row p,
.case-list-card p,.news-archive-list p,.contact-panel p,.feature-line span,
.service-proof-row p,.approach-row p{max-width:none}
/* 가운데 정렬된 구역에서는 글도 가운데로 */
.section-head p.section-copy{max-width:50em}
/* ==================================================================
누를 수 있는 것들의 상태 (2026-09-22)
단추에 마우스를 올려도 아무 변화가 없었음. 문의하기, 상세 보기,
전체 보기 전부. 누를 수 있는 것인지 화면만 봐서는 알 수 없는 상태였음.
누를 때 살짝 들어가는 것(active)까지 넣음. 눌렸다는 느낌이 없으면
두 번 누르게 됨
================================================================== */
/* 문의하기 — 이 사이트에서 가장 중요한 단추 */
.nav-contact{transition:background-color var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.nav-contact:hover{background:#fff;border-color:#fff;color:var(--navy)}
.site-header.scrolled .nav-contact:hover{background:var(--blue);border-color:var(--blue)}
.nav-contact:active{transform:translateY(1px)}
/* 채워진 단추 */
.solid-btn{transition:background-color var(--t-fast),color var(--t-fast),box-shadow var(--t-base) var(--ease)}
.solid-btn:hover{background:var(--navy2);box-shadow:0 6px 18px rgba(6,25,42,.22)}
.solid-btn:active{transform:translateY(1px);box-shadow:0 2px 6px rgba(6,25,42,.18)}
/* 테두리만 있는 단추 */
.outline-btn{transition:background-color var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.outline-btn:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.outline-btn.light:hover{background:#fff;border-color:#fff;color:var(--navy)}
.outline-btn:active{transform:translateY(1px)}
/* 글자 링크 — 화살표가 살짝 나아가게 */
.text-link{transition:color var(--t-fast)}
.text-link:hover{color:var(--blue)}
.text-link::after{display:inline-block;transition:transform var(--t-base) var(--ease)}
.text-link:hover::after{transform:translateX(3px)}
/* 목록 화살표 */
.company-resource-list a .arrow,.link-row .arrow{
display:inline-block;transition:transform var(--t-base) var(--ease)
}
.company-resource-list a:hover .arrow,.link-row:hover .arrow{transform:translateX(4px)}
.company-resource-list a{transition:border-color var(--t-fast)}
.company-resource-list a:hover{border-color:var(--blue)}
/* 상단 메뉴 */
.main-nav .nav-link{transition:opacity var(--t-fast)}
.main-nav .nav-link:hover{opacity:.72}
.nav-dropdown a{transition:background-color var(--t-fast),color var(--t-fast)}
.nav-dropdown a:hover{background:var(--soft);color:var(--blue)}
/* 뉴스 항목 */
#newsArchive .news-archive-list article button{transition:background-color var(--t-fast)}
#newsArchive .news-archive-list article button:hover{background:var(--soft)}
/* 손가락으로 누르는 기기에서는 마우스오버가 없음.
올려놓은 상태가 눌린 뒤에도 남아 있는 것을 막음 */
@media(hover:none){
.nav-contact:hover,.solid-btn:hover,.outline-btn:hover{
background:inherit;border-color:inherit;color:inherit;box-shadow:none
}
}
/* 어두운 배경 위의 약한 글자 (2026-09-22)
회색을 토큰 하나로 합치면서 어두운 배경 위 글자까지 어둡게 만들어
푸터 맨 아랫줄이 배경에 묻혔음. 어두운 곳에는 밝은 쪽으로 둠 */
.site-footer .footer-bottom span{color:#9fb1bd}
/* ==================================================================
링크는 하나의 모양으로 (2026-09-22)
지금은 제각각이었음. 어떤 것은 파란 글씨만, 어떤 것은 밑줄만,
어떤 것은 아무 표시도 없었음. 링크인지 아닌지 화면만 봐서는
구분이 안 됐음.
하나로 정함 — 파란 글씨 + 화살표. 마우스를 올리면 화살표가
앞으로 나가고 밑줄이 생김. 화살표는 CSS 가 붙이므로 화면 파일에
손으로 적지 않음
================================================================== */
.text-link,
.related-links a,
.simple-nav-links a,
.application-links a,
.service-relation a,
.case-summary-grid a em,
.nav-all{
display:inline-flex;align-items:center;gap:5px;
color:var(--blue);font-weight:800;
border-bottom:0 !important;padding-bottom:0;
text-decoration:none;
transition:color var(--t-fast);
}
.text-link::after,
.related-links a::after,
.simple-nav-links a::after,
.application-links a::after,
.service-relation a::after,
.case-summary-grid a em::after{
content:'→';
display:inline-block;
font-weight:700;
transition:transform var(--t-base) var(--ease);
}
.text-link:hover,
.related-links a:hover,
.simple-nav-links a:hover,
.application-links a:hover,
.service-relation a:hover,
.case-summary-grid a:hover em{
color:var(--navy2);
text-decoration:underline;
text-underline-offset:.24em;
text-decoration-thickness:1px;
}
.text-link:hover::after,
.related-links a:hover::after,
.simple-nav-links a:hover::after,
.application-links a:hover::after,
.service-relation a:hover::after,
.case-summary-grid a:hover em::after{transform:translateX(4px)}
/* 밑줄을 그어 링크인 척하던 것을 걷어냄 */
.case-related .related-links a{border-bottom:0 !important;padding:0}
.application-links a{border-bottom:0 !important;padding-bottom:0}
/* 사례 요약 칸은 상자 전체를 누를 수 있게 함 */
.case-summary-grid a{transition:background-color var(--t-fast)}
.case-summary-grid a:hover{background:var(--soft)}
.case-summary-grid a:hover h3{color:var(--blue)}
.case-summary-grid h3{transition:color var(--t-fast)}
/* ==================================================================
관련 제품·사례 줄 — 상자 전체를 누를 수 있게 (2026-09-22)
전에는 오른쪽 끝의 '제품 보기' 글자만 링크였음. 제목을 눌러도
아무 일이 없어서 어디를 눌러야 하는지 알기 어려웠음
================================================================== */
a.service-relation.is-linked{
display:grid;grid-template-columns:160px 1fr 180px;gap:28px;align-items:center;
padding:24px 0;border-bottom:1px solid var(--line);
color:inherit;text-decoration:none;
transition:background-color var(--t-fast),padding var(--t-fast);
}
a.service-relation.is-linked:hover{background:var(--soft);padding-left:16px;padding-right:16px}
a.service-relation.is-linked:hover strong{color:var(--blue)}
a.service-relation.is-linked strong{transition:color var(--t-fast)}
.relation-go{
display:inline-flex;align-items:center;gap:5px;justify-self:end;
color:var(--blue);font-weight:800;
}
.relation-go::after{content:'→';display:inline-block;transition:transform var(--t-base) var(--ease)}
a.service-relation.is-linked:hover .relation-go::after{transform:translateX(4px)}
@media(max-width:900px){
a.service-relation.is-linked{grid-template-columns:1fr;gap:6px}
.relation-go{justify-self:start;margin-top:6px}
}
/* 수상 및 인증 — 위아래 간격을 절끼리 맞추고, 내용을 위로 붙임 */
.record-group.is-accent{
margin:40px 0 0;font-weight:900;
color:var(--blue);letter-spacing:.06em;
}
.record-group.is-accent:first-of-type{margin-top:24px}
#award-prize .record-list,#award-role .record-list{margin-top:24px}
.record-row{align-items:start}
.record-main{padding-top:1px}
.cert-thumb{align-self:start}
/* 수상 및 인증 — 목록이 넓은 화면에서 흩어져 보이던 것을 묶음 (2026-09-22)
내용이 짧은데 1280px 를 다 쓰니 오른쪽이 비어 보였음 */
.record-list{max-width:1040px}
.record-row{grid-template-columns:118px minmax(0,1fr)}
.record-row.has-cert{grid-template-columns:118px minmax(0,1fr) 88px}
/* 절마다 위아래 간격을 같게. 표창·국제기구·특허·상표가 제각각이었음 */
#award-prize,#award-role,#award-patent,#award-mark{padding-top:76px;padding-bottom:76px}
@media(max-width:700px){
#award-prize,#award-role,#award-patent,#award-mark{padding-top:52px;padding-bottom:52px}
.record-list{max-width:none}
}
/* ==================================================================
제목 줄바꿈 (2026-09-22)
화면 파일 안에 로 줄바꿈 자리를 박아 두었음. 그래서 옆에
공간이 남아도 무조건 두 줄이 됐음. 47개를 걷어내고,
줄이 넘칠 때만 알아서 나뉘게 함.
text-wrap:balance 는 나뉠 때 두 줄의 길이를 비슷하게 맞춤.
한 줄만 길고 한 줄은 단어 하나만 남는 모양을 막음
================================================================== */
h1,h2,h3,.section-title{text-wrap:balance}
.section-copy,p.lead{text-wrap:pretty}
/* ==================================================================
검토 의견 반영 (2026-09-22)
================================================================== */
/* 화면 캡처 이미지 뒤에 회색이 깔려 있었음. 투명하게 두어
이미지 자체 배경이 그대로 보이게 함 */
.sky-asset-grid img,
.case-evidence-grid img,
.case-evidence-grid figure{background:transparent}
/* AI 분석 화면의 '현재 검증 범위' 상자에 색이 칠해져 있었음.
다른 구역과 같은 방식(얇은 선)으로 맞춤 */
.truth-boundary{
background:transparent;border:0;
border-top:1px solid var(--line);border-bottom:1px solid var(--line);
padding:30px 0;
}
.truth-boundary p{max-width:50em}
/* 기상청 사례의 구축 자료 4개 — 영상이 너무 커서 2x2 로 맞춤 */
.case-evidence-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}
.case-evidence-grid.four img,
.case-evidence-grid.four iframe,
.case-evidence-grid.four .video-embed{height:300px}
@media(max-width:820px){
.case-evidence-grid.four{grid-template-columns:1fr}
.case-evidence-grid.four img,.case-evidence-grid.four .video-embed{height:auto}
}
/* 신뢰 문구 두 줄의 균형 — 위아래 문구가 따로 놀았음 */
.trust-strip .wrap>p:first-child{margin:0 0 26px;color:var(--navy)}
.trust-note{margin:26px 0 0;color:var(--t2);max-width:50em}
/* 고객사 로고가 흐릿하게 늘어나 보이던 것 — 원본보다 키우지 않음 */
.trust-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
/* 연구 초점 목록이 글자만 이어 붙어 있었음. 항목으로 끊어 보이게 */
.topic-focus{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:14px}
.topic-focus b{
display:none
}
.topic-focus span{
display:inline-block;padding:5px 12px;
border:1px solid var(--line);background:var(--soft);color:var(--t2);
}
/* 연구개발의 '확장 연구 영역' 번호 — 필요 없다고 하셔서 지움 */
.editorial-section > .wrap > span.number{display:none}
/* 사례 자료 묶음 안의 영상 — 이미지와 같은 칸 크기로 (2026-09-22) */
.case-evidence-grid figure.is-video .video-embed{position:relative;height:300px;background:#000}
.case-evidence-grid figure.is-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(max-width:820px){
.case-evidence-grid figure.is-video .video-embed{height:auto;aspect-ratio:16/9}
.case-evidence-grid figure.is-video iframe{position:static;height:100%}
}
/* ==================================================================
DX-Safety 제품 개요 — 하나의 재난정보가 두 갈래로 (2026-09-22 다시)
두 가지 문제가 있었음.
① 원천 줄 아래의 선이 화면 절반에서 끊겼음. 본문 한 줄 길이 제한
(50em)이 이 줄에도 걸렸기 때문임. 이 줄은 문단이 아니라
구역을 나누는 머리줄이므로 제한을 풀어야 함
② 원천과 두 갈래의 관계가 화면에 안 보였음. 그냥 라벨 하나와
두 칸의 글이었음
고친 뒤 : 원천 줄이 두 칸 위에 통째로 걸치고 옅은 바탕을 깔아
"여기서 갈라진다" 가 보이게 함. 둥근 모서리는 쓰지 않음
================================================================== */
.safety-branch{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.safety-source{
max-width:none !important;
display:flex;align-items:baseline;gap:8px 20px;flex-wrap:wrap;
margin:0;padding:16px 24px;
background:var(--soft);border-bottom:1px solid var(--line);
}
.safety-source-label{
flex:none;color:var(--blue);font-weight:900;letter-spacing:.11em;
}
.safety-source-items{color:var(--t2);}
.safety-routes{display:grid;grid-template-columns:1fr 1fr}
.safety-route{padding:30px 30px 34px}
.safety-route+.safety-route{border-left:1px solid var(--line);padding-left:30px}
.safety-route span{
display:block;color:var(--blue);font-weight:900;
letter-spacing:.11em;margin-bottom:10px;
}
.safety-route h3{margin:0 0 12px;letter-spacing:-.02em}
.safety-route p{margin:0;max-width:none;color:var(--t2);}
@media(max-width:820px){
.safety-source{padding:14px 18px}
.safety-routes{grid-template-columns:1fr}
.safety-route{padding:24px 18px 26px}
.safety-route+.safety-route{border-left:0;border-top:1px solid var(--line);padding-left:18px}
}
/* 한 줄 길이 제한이 걸리면 안 되는 자리들 — 문단이 아니라 구역 머리줄이거나
이미 좁은 칸 안이라 다시 좁히면 글이 왼쪽으로 몰림 */
.safety-source,.trust-strip p,.record-main p,.relation-go,
.contact-strip p,.hero-content p,.sub-hero p{max-width:none}
.sub-hero p,.page-company .sub-hero p{max-width:50em}
/* ==================================================================
고객사 로고 줄 (2026-09-22)
전에는 문구 하나가 위, 다른 하나가 아래에서 로고를 감싸고 있어
둘이 따로 노는 것처럼 보였음. 두 문구를 위로 묶어 한 덩어리로 두고
로고를 그 아래에 둠.
로고는 56px 로 줄어 안의 기관명 글자가 뭉개졌음. 크기를 키우고
원본보다 커지지 않게 막음
================================================================== */
.trust-strip .wrap{display:block}
.trust-copy{max-width:50em;margin:0 0 34px}
.trust-title{margin:0 0 8px;font-weight:700;color:var(--navy);letter-spacing:-.02em}
.trust-note{margin:0;color:var(--t2);max-width:50em}
.trust-logos{
display:grid;grid-template-columns:repeat(10,minmax(0,1fr));
gap:20px 18px;align-items:center;
}
.trust-logo{height:76px;display:flex;align-items:center;justify-content:center}
.trust-logo img{
max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
filter:saturate(.9);
}
@media(max-width:1050px){
.trust-logos{grid-template-columns:repeat(5,minmax(0,1fr))}
.trust-logo{height:68px}
}
@media(max-width:700px){
.trust-logos{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 12px}
.trust-logo{height:56px}
.trust-copy{margin-bottom:26px}
}
/* 고객사 로고 — 10칸으로 나누니 한 칸이 110px 밖에 안 돼 기관명이
뭉개졌음. 5칸 2줄로 바꿔 한 칸을 240px 로 넓힘 (2026-09-22) */
.trust-strip{text-align:left}
.trust-strip p{margin:0}
.trust-strip .wrap>p:first-child{margin:0}
.trust-title{margin:0 0 8px !important;color:var(--navy) !important}
.trust-note{margin:0 !important;color:var(--t2) !important}
.trust-logos{grid-template-columns:repeat(5,minmax(0,1fr));gap:26px 24px}
.trust-logo{height:88px}
@media(max-width:1050px){
.trust-logos{grid-template-columns:repeat(4,minmax(0,1fr))}
.trust-logo{height:76px}
}
@media(max-width:700px){
.trust-logos{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 14px}
.trust-logo{height:62px}
}
/* ==================================================================
검토 3차 (2026-09-22)
================================================================== */
/* ① 한 줄 길이를 더 넓힘. 50em 도 좁다는 지적이 여러 번 나왔음.
60em 은 17px 글자에서 약 1020px, 한글 60자 정도임 */
.detail-section p,.section p,.service-story p,.service-body p,
.story-copy p,.achievement-copy p,.news-visual-copy p,
.company-deepcopy p,p.lead,p.section-copy,
.cert-journey-note,.career-intro p,.business-index-row p,
.approach-copy p,.service-editorial p{max-width:60em}
/* ② 작은 글자 추가로 올림. 여러 번 지적된 자리들 */
.business-index-row small{color:var(--t2)}
/* ③ 좁은 칸에 갇혀 있던 글을 칸 폭에 맞춤 */
.business-index-row p,.business-index-row small{max-width:none}
.career-value p{max-width:none}
/* ④ 구역 첫 제목의 위아래 여백. 위는 넓고 아래는 좁아 쏠려 보였음 */
.detail-section > .wrap > h2:first-child,
.section > .wrap > h2:first-child,
.detail-section > .wrap > h2.section-title:first-child{margin:0 0 34px}
#safe-value > .wrap > h2,#cert-cases > .wrap > h2{margin:0 0 38px}
/* ⑤ 사진 뒤에 깔린 회색 배경 — 전부 투명으로.
앞서 일부만 바꿨는데 임무특화 화면이 빠져 있었음 */
.official-image-strip figure,
.official-image-strip img,
.case-original-gallery figure,
.case-original-gallery img,
.evidence-gallery figure,
.evidence-gallery img,
.pwc-validation figure,
.alerti-flow figure{background:transparent}
/* ⑥ 개요 구역의 영상 — 제목이 한 줄이 되면서 위로 붙어 보였음.
글과 나란한 높이로 내림 */
.sky-overview-video,.split > .media,.split > .video-embed{align-self:center}
/* ==================================================================
격자 칸이 좁아 글이 갇혀 있던 자리들 (2026-09-22)
지금까지 "옆에 공간 많은데 왜 줄바꿈이 이래" 라는 지적이 여러 번
나왔는데, 원인이 한 줄 길이 제한이 아니라 격자 칸이었음.
채용 소개는 3칸인데 내용이 2개라 셋째 칸이 통째로 비어 있었고,
회사소개 사업 분야는 설명이 가운데 칸에 갇혀 있었음
================================================================== */
/* 채용 — 빈 셋째 칸을 없앰 */
.career-value{grid-template-columns:240px minmax(0,1fr) !important;gap:34px}
/* 회사소개 사업 분야 — 설명이 남은 폭을 다 쓰게 하고 작은 글은 아래로 */
.business-index-row{grid-template-columns:64px 240px minmax(0,1fr) !important;gap:26px}
.business-index-row small{grid-column:3;margin-top:8px}
/* 채용·뉴스·성과 소개 문단 */
.news-intro .lead,.achievement-intro .lead,.career-intro .lead{max-width:60em !important}
@media(max-width:900px){
.career-value{grid-template-columns:1fr !important;gap:8px}
.business-index-row{grid-template-columns:48px minmax(0,1fr) !important;gap:8px 16px}
.business-index-row p,.business-index-row small{grid-column:2}
}
/* ####################################################################
제목 위 경로 표시를 빼고, 상단 메뉴가 그 일을 대신함
(2026-09-22 검토 의견 "지워")
왜 :
「회사」「제품」「서비스」 한 칸짜리 경로는 상단 메뉴에 그대로
있는 이름을 제목 위에 한 번 더 적은 것이라 알려 주는 것이 없었음.
다만 그것을 그냥 지우면 지금 어느 묶음에 있는지 알 길이 없어져,
상단 메뉴의 해당 항목에 밑줄을 그어 대신하게 함.
「고객사례 > 공공안전」「제품 > DX-Sky」처럼 두 칸짜리는
메뉴에 없는 정보를 담고 있어 그대로 둠
밑줄을 currentColor 로 칠하는 이유 :
머리말은 첫 화면에서 투명(흰 글씨)이고 내려가면 흰 바탕(검은 글씨)으로
바뀜. 색을 고정하면 둘 중 한쪽에서 배경에 묻힘
#################################################################### */
.main-nav .nav-link[aria-current="true"]{position:relative}
.main-nav .nav-link[aria-current="true"]:after{
content:"";position:absolute;left:15px;right:15px;bottom:calc(50% - 14px);
height:2px;background:currentColor;border-radius:2px;
}
/* 히어로 설명은 옆에 자리를 남기고 접히지 않게 함
(검토 의견 "한줄로"). 앞서 한 줄이 너무 길어지는 것을 막으려고
50em 으로 묶어 두었는데, 정작 히어로 설명은 한 문장짜리라
묶을 이유가 없고 오른쪽만 비어 보였음 */
.sub-hero p,.page-company .sub-hero p{max-width:none}
@media(max-width:1050px){
/* 좁은 화면의 메뉴는 옆에서 밀려 나오는 판이라 밑줄이 어울리지 않음.
항목 왼쪽에 세로 막대를 세움 */
.main-nav .nav-link[aria-current="true"]:after{
left:0;right:auto;top:0;bottom:0;width:3px;height:auto;border-radius:0;
}
}
/* ####################################################################
검토 의견 4차 (2026-09-23)
#################################################################### */
/* 메뉴 밑줄이 아래 화살표(⌄)까지 덮던 것 — 이름 길이에만 긋게 함.
글자를 감싼 .nav-label 에 그어야 화살표가 빠짐 */
.main-nav .nav-link[aria-current="true"]:after{content:none}
.main-nav .nav-link[aria-current="true"] .nav-label{position:relative}
.main-nav .nav-link[aria-current="true"] .nav-label:after{
content:"";position:absolute;left:0;right:0;top:calc(100% + 5px);
height:2px;background:currentColor;border-radius:2px;
}
/* 「연구 초점」 칸의 낱말 사이 빗금(/)을 없앰.
앞 회차에 낱말을 칸으로 감싸는 모양은 넣었는데, 원래 있던
빗금 규칙을 같이 끄지 않아 칸과 빗금이 겹쳐 보이고 있었음.
빗금은 "이것 아니면 저것"으로도 "둘을 나눈 것"으로도 읽혀
무슨 뜻인지 되묻게 되므로, 기호 없이 칸으로만 구분함 */
.topic-focus span+span:before{content:none}
.topic-focus span{border-radius:999px;color:var(--t3)}
@media(max-width:1050px){
/* 좁은 화면 메뉴는 옆에서 밀려 나오는 판이라 글자 밑줄이 어울리지 않음.
항목 왼쪽에 세로 막대를 세움 */
.main-nav .nav-link[aria-current="true"] .nav-label:after{content:none}
.main-nav .nav-link[aria-current="true"]:after{
content:"";position:absolute;left:0;right:auto;top:0;bottom:0;
width:3px;height:auto;border-radius:0;background:currentColor;
}
}
/* 서비스 첫 문단이 옆을 비워 두고 일찍 접히던 것.
아래 구역들은 1280px 을 다 쓰는데 이 문단만 1000px 에서 끊겨
오른쪽 280px 이 비어 보였음 */
.service-story-intro .lead{max-width:none}
/* 구역 머리글 아래 설명도 같은 문제. 850px 에서 끊겨 있었음 */
.section-head p.section-copy{max-width:none}
/* 「6G와 차세대 산업 네트워크」 구역만 글이 오른쪽으로 150px 들어가
있었음. 감싸개 자체를 980px 로 좁혀 가운데로 모았기 때문임.
감싸개는 다른 구역과 같은 자리에 두고, 읽기 좋은 한 줄 길이는
글 쪽에만 걺 */
.standard-text-section{max-width:none}
.standard-text-section h2,.standard-text-section p{max-width:980px}
/* 운용 점검 목록의 글자가 12px 이라 읽기 어려웠음 */
/* DX-Ocean — 개념도가 바로 위 표에 붙어 표를 파고드는 것처럼 보였음.
.split 이 세로 가운데 맞춤이라 그림이 위로 끌려 올라가 표의
아래 선과 맞닿았음. 두 묶음 사이를 벌림 */
.ocean-data-flow+.split{margin-top:60px}
/* ####################################################################
서비스 본문 아래 항목 목록을 가로로 나눈 칸으로 바꿈
무엇이 문제였나 :
본문은 넓게 쓰는데 목록만 왼쪽에 얇은 선을 달고 좁게 들어가
따로 붙여 놓은 것처럼 보였음. 줄표 글머리도 본문보다 작아
덜 중요한 곁가지로 읽혔음
왜 이 모양인가 :
DX-Ocean 화면에서 이미 「수집 / 보존 / 동기화 / 분석」을 가로로
나눈 칸으로 보여 주고 있음. 같은 성격의 내용이므로 새 모양을
만들지 않고 그 형태를 그대로 씀
주의 : 앞서 쌓인 규칙이 세 군데에 흩어져 있어(153·197·690행)
여백, 테두리, 글머리 기호를 하나씩 되돌려 놓지 않으면
옛 모양이 남아 겹쳐 보임. 같은 실수를 두 번 했던 자리임
#################################################################### */
.service-section.rich .service-body ul{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
margin:28px 0 0;padding:0;list-style:none;border:0;
}
.service-section.rich .service-body li{
position:static;margin:0;padding:15px 24px 18px 0;
border:0;border-top:1px solid var(--line);color:var(--t3);
}
.service-section.rich .service-body li+li{
border-left:1px solid var(--line);padding-left:24px;
}
.service-section.rich .service-body li:nth-child(3n+1){
border-left:0;padding-left:0;
}
.service-body li:before{content:none}
@media(max-width:900px){
/* 좁아지면 두 칸, 더 좁아지면 한 칸 */
.service-section.rich .service-body ul{grid-template-columns:repeat(2,minmax(0,1fr))}
.service-section.rich .service-body li:nth-child(3n+1){border-left:1px solid var(--line);padding-left:24px}
.service-section.rich .service-body li:nth-child(odd){border-left:0;padding-left:0}
}
@media(max-width:700px){
.service-section.rich .service-body ul{grid-template-columns:1fr}
.service-section.rich .service-body li,
.service-section.rich .service-body li:nth-child(3n+1){border-left:0;padding-left:0}
}
/* Alerti 머리 영상이 칸 안에서 가운데로 놓여 있어, 왼쪽 끝이
아래 본문의 화면들과 어긋나 있었음(칸 왼쪽에서 57px 안쪽).
본문 쪽 화면들은 각자 칸 끝에 딱 붙어 있으므로 영상도 맞춤.
아래 설명도 영상과 같은 폭으로 묶어 한 덩어리로 읽히게 함 */
.alerti-video-phone{margin-left:0;margin-right:0}
.alerti-flow-caption{margin-left:0;margin-right:0;max-width:320px;text-align:left}
/* ####################################################################
뉴스 태그 — 목록과 상세 창 두 군데에서 같은 모양으로 씀
왜 태그마다 다른 색을 주지 않았나 :
태그가 12가지(성격 6 + 분야 6)임. 12가지 색을 만들면
- 어느 색이 무슨 뜻인지 외울 수 없어 색이 정보를 주지 못함
- 이 사이트는 남색과 파랑, 청록 한 계열인데 빨강이나 초록을
넣으면 화면의 주인공이 내용이 아니라 태그가 됨
- 글자 대비 4.5:1 을 12가지 색에 다 맞추면 결국 다 어두워져
서로 비슷해 보임
그래서 색이 아니라 '채움과 테두리' 두 단계로만 나눔
두 단계로 나눈 기준 :
성격 태그는 항상 정확히 하나라 먼저 읽혀야 함 → 남색 채움
분야 태그는 없을 수도 둘일 수도 있음 → 테두리만
#################################################################### */
.news-tags,.news-tags-row{display:flex;flex-wrap:wrap;gap:6px;margin:0}
/* 상세 창의 태그는 p 태그라, 뒤에 나오는 .news-panel p{margin:0} 에
덮여 아래 여백이 사라지고 바로 밑 이미지에 딱 붙었음.
같은 무게로 적어 되살림 */
.news-panel .news-tags{margin:0 0 18px}
.news-tags span,.news-tags-row span{
border-radius:999px;
letter-spacing:-.01em;white-space:nowrap;
}
.news-tags span{padding:5px 12px}
.news-tags-row span{padding:3px 9px;}
/* 성격 — 무슨 종류의 소식인가 */
.news-tags .tag-kind,.news-tags-row .tag-kind{
background:var(--navy2);color:#fff;border:1px solid var(--navy2);font-weight:700;
}
/* 분야 — 어느 기술 영역인가 */
.news-tags .tag-field,.news-tags-row .tag-field{
background:var(--white);color:var(--t3);border:1px solid var(--line);
}
/* 목록 줄에서는 제목 아래에 붙음.
줄이 [날짜 | 제목] 두 칸짜리 격자라, 그냥 넣으면 태그가
세 번째 칸으로 밀려나 화면 밖으로 나감. 제목과 같은 칸에 둠 */
.news-archive-list article button{align-items:start}
.news-archive-list .news-tags-row{grid-column:2;margin-top:7px}
@media(max-width:700px){
/* 좁은 화면에서는 줄이 한 칸짜리가 됨 */
.news-archive-list .news-tags-row{grid-column:1}
}
/* ####################################################################
검토 메모 반영 (2026-09-23)
#################################################################### */
/* 뉴스룸 목록 — 제목과 태그 사이가 25px 로 벌어져 있었음.
줄 간격 18px 에 태그 위 여백 7px 이 더해진 것. 절반인 12px 로 줄임 */
#newsArchive .news-archive-list article button{row-gap:6px}
.news-archive-list .news-tags-row{margin-top:6px}
/* 뉴스룸 목록 — 날짜와 연도가 칸 맨 위에 붙어 아래가 비어 보였음.
넓은 화면에서만 세로 가운데로 둠. 좁은 화면에서는 한 칸으로 쌓이므로
가운데 맞춤이 뜻이 없음 */
@media(min-width:701px){
#newsArchive .news-archive-list .news-day{grid-row:1 / span 2;align-self:center;padding-top:0}
}
@media(min-width:801px){
#newsArchive .news-year-head{align-self:center}
}
/* Alerti 화면 — 휴대폰 이미지는 칸 가운데, 설명은 칸 왼쪽 끝에 있어
두 줄의 왼쪽이 어긋났음. 이미지 폭(240px)을 figure 에 걸어
이미지와 설명이 같은 왼쪽 선에서 시작하게 함 */
.alerti-story .alerti-screen{width:100%;max-width:240px;margin:0 auto}
.alerti-story .alerti-phone-shot{max-width:none;margin:0}
.alerti-story .alerti-screen figcaption{padding:13px 0 0}
@media(max-width:600px){.alerti-story .alerti-screen{max-width:190px}}
/* 그림 설명 — 좌우 안쪽 여백 2~4px 때문에 설명 첫 글자가 이미지 왼쪽 끝보다
살짝 안으로 들어가 있었음. 이미지와 같은 선에서 시작하게 0 으로 맞춤 */
.evidence-gallery figcaption{padding-left:0;padding-right:0}
.case-evidence-grid figcaption,.official-image-strip figcaption{padding-left:0;padding-right:0}
/* 드롭다운에서 지금 보고 있는 곳 (2026-09-23)
제품·서비스·회사·언어 메뉴 모두 같은 모양. 빌드가 aria-current 를 붙임.
"전체 보기"가 파란 글씨라, 현재 위치는 색이 아니라 배경과 왼쪽 세로줄로 구분함 */
.nav-dropdown a[aria-current]{
background:var(--soft);color:var(--navy);font-weight:800;
box-shadow:inset 2px 0 0 var(--blue);
}
/* 좁은 화면의 떠 있는 문의 단추 (2026-09-23)
1050px 이하에서는 헤더의 문의하기가 햄버거 메뉴 안에 숨음. 그 폭에서만 띄움.
검토 단추(.rv-root, 아래 20px·높이 44px)가 있으면 그 위로 12px 띄워 쌓음.
dist 미리보기 안내 막대(.preview-bar, 높이 약 46px)만 있으면 막대 위로 올림.
둘 다 있으면 검토 단추 기준(검토 단추는 막대와 상관없이 제자리에 있음) */
.float-contact{display:none}
@media(max-width:1050px){
.float-contact{
display:inline-flex;align-items:center;justify-content:center;
position:fixed;right:20px;bottom:20px;z-index:8900;
min-height:44px;padding:0 18px;border:0;cursor:pointer;
background:var(--navy);color:#fff;font-size:14px;font-weight:800;
box-shadow:0 8px 22px rgba(4,22,36,.22);
}
.float-contact:hover{background:var(--blue)}
body:has(.preview-bar) .float-contact{bottom:66px}
body:has(.rv-root) .float-contact{bottom:76px}
}
/* 700px 이하에서 검토 단추가 오른쪽·아래 12px 로 옮겨 감(review.css). 오른쪽 끝을 맞춤 */
@media(max-width:700px){
.float-contact{right:12px;bottom:12px}
body:has(.preview-bar) .float-contact{bottom:58px}
body:has(.rv-root) .float-contact{bottom:68px}
}
/* ####################################################################
뉴스룸 이미지 카드 (2026-09-23)
연도별 목록 대신 한 줄에 3장. 분류 탭, 12건씩 더보기.
예전 .news-year / .news-archive-list 규칙은 쓰는 곳이 없어짐
#################################################################### */
.newsroom-cards{padding-top:64px}
.news-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:40px}
.news-filter button{
padding:9px 18px;border:1px solid var(--line);border-radius:999px;background:#fff;
color:var(--t2);font-weight:600;cursor:pointer;
transition:border-color var(--t-fast),color var(--t-fast);
}
.news-filter button:hover{border-color:var(--navy);color:var(--navy)}
.news-filter button[aria-pressed="true"]{border-color:var(--navy);color:var(--navy);font-weight:800;box-shadow:inset 0 0 0 1px var(--navy)}
.news-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 28px}
.news-card-item button{display:block;width:100%;padding:0;border:0;background:none;text-align:left;cursor:pointer}
.news-thumb{position:relative;aspect-ratio:16/10;overflow:hidden;background:#eef2f5}
/* 뉴스 이미지 37장 대부분이 글자가 든 기사 캡처·배너이고 비율이 0.68~2.25 로 제각각임.
잘라 맞추면 가장자리 글자가 끊겨서, 자르지 않고 통째로 보이고 남는 곳은 회색으로 둠 */
.news-thumb img{width:100%;height:100%;object-fit:contain;display:block;transition:transform var(--t-slow) var(--ease)}
/* 사진이 없는 소식: 회색 바탕 가운데에 회사 로고를 카드 폭의 5분의 1 크기로 */
.news-thumb.no-img{background:#eef2f5 url('/assets/img/logo-2026.webp') center/20% auto no-repeat}
.news-card-item button:hover .news-thumb img{transform:scale(1.035)}
.news-card-body{padding-top:16px}
.news-card-body .news-tags-row{margin:0 0 10px}
.news-card-item h3{
margin:0;font-weight:700;color:var(--navy);letter-spacing:-.015em;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
transition:color var(--t-fast);
}
.news-card-item button:hover h3{color:var(--blue)}
.news-date{display:block;margin-top:10px;color:var(--t2);font-variant-numeric:tabular-nums}
.news-more-wrap{text-align:center;margin-top:56px}
.news-more[hidden]{display:none}
@media(max-width:900px){.news-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 20px}}
/* 좁은 화면에서는 탭을 한 줄로 두고 옆으로 밀어서 봄. 영문 탭 이름이 길어
여러 줄로 쌓이면 첫 화면을 거의 다 차지했음(390px 에서 7줄) */
@media(max-width:600px){
.news-card-grid{grid-template-columns:1fr}
.news-filter{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px 28px;padding:0 16px 4px;scrollbar-width:none}
.news-filter::-webkit-scrollbar{display:none}
.news-filter button{flex:none;padding:8px 14px;}
}
/* 제품 화면 목차 탭 — 좁은 화면 보강 (2026-09-23)
한 줄을 유지함. 두 줄로 접으면 위에 붙어 다니는 줄이 390px 에서 약 150px 을 계속 가림.
대신 넘어간 쪽 끝을 흐리게 하고 화살표를 둬 옆에 탭이 더 있음을 보임(JS 가 클래스를 붙임) */
.detail-tabs::before,.detail-tabs::after{
content:'';position:absolute;top:0;bottom:1px;width:48px;z-index:2;
pointer-events:none;opacity:0;transition:opacity var(--t-fast);
display:flex;align-items:center;font-size:20px;font-weight:700;color:var(--navy);
}
.detail-tabs::before{left:0;justify-content:flex-start;padding-left:6px;background:linear-gradient(90deg,#fff 35%,rgba(255,255,255,0));content:'‹'}
.detail-tabs::after{right:0;justify-content:flex-end;padding-right:6px;background:linear-gradient(270deg,#fff 35%,rgba(255,255,255,0));content:'›'}
.detail-tabs.more-left::before,.detail-tabs.more-right::after{opacity:1}
/* 탭 폭: 전에는 모두 같은 폭(flex:1)이고 줄바꿈을 막아, 긴 영문 이름이 칸을 넘쳐
옆 탭 위로 겹쳤음(GCS "Web-Based Integrated Control" 1440px 에서 63px 넘침).
글자 길이보다 줄어들지 않게 하고 남는 폭만 나눠 가짐. 다 안 들어가면 옆으로 넘김 */
.detail-tabs a{flex:1 0 auto}
/* 좁은 화면에서는 탭 폭을 글자에 맞춰 한 번에 더 많이 보이게 함(전에는 최소 142px) */
@media(max-width:700px){
.detail-tabs a{min-width:0;flex:0 0 auto;padding:15px 16px;}
}
/* 신뢰 로고 줄 (2026-09-28)
동문이엔티를 빼 10개 → 9개가 되면서, 5개씩 놓는 칸 배치에서 둘째 줄이 4개로 왼쪽에 쏠렸음.
줄 배치로 바꿔 남는 줄은 가운데로 모음. 한 줄 개수는 전과 같이 5 / 4(1050px 이하) / 3(700px 이하).
위쪽의 .trust-logos 규칙 세 벌은 이 규칙에 덮임 */
.trust-logos{display:flex;flex-wrap:wrap;justify-content:center;gap:26px 24px}
.trust-logo{flex:0 0 calc((100% - 4 * 24px) / 5)}
@media(max-width:1050px){.trust-logo{flex-basis:calc((100% - 3 * 24px) / 4)}}
@media(max-width:700px){.trust-logos{gap:18px 14px}.trust-logo{flex-basis:calc((100% - 2 * 14px) / 3)}}
/* 메뉴 화살표 (2026-09-28)
⌄ 글자는 글꼴 칸의 아래쪽에 그려져 메뉴 글자보다 약 5.7px 아래에 있었음(1440px 실측).
글꼴마다 높이가 달라 글자로는 맞출 수 없어, 선 두 개로 직접 그림. 글자는 숨김(font-size:0) */
.chev{
display:inline-block;flex:none;font-size:0;line-height:0;
width:6px;height:6px;margin-left:2px;
border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
transform:translateY(-2px) rotate(45deg);opacity:.7;
}
/* 꼬리말 셋째 줄 (2026-09-28): 팩스·이메일 제목이 칸의 왼쪽 끝에 붙어 번호와의 사이가 벌어져 보였음.
칸 안에서 가운데로. 첫 칸 "전화"는 윗줄 회사명·주소와 세로로 맞춰야 해서 그대로 둠 */
.footer-info > div > b:not(:first-child){text-align:center}
/* 영문 메인 제목 (2026-09-28): 한글보다 글자가 길어 90px 에서 화면을 너무 차지했음.
크기를 75%(clamp 54/6.7vw/90 → 40/5vw/68)로 줄이고, 두 줄로 나눠 쓰므로 폭 제한(920px)을 풂 */
html[lang="en"] .main-hero h1{font-size:clamp(40px,5vw,68px)}
/* 메인 제목은 번역 문구의 줄바꿈(\n → )으로 두 줄을 정함. 폭 제한(920px)이 남아 있으면
한글 둘째 줄 "산업 현장의 가치로 연결합니다."가 한 번 더 접혀 세 줄이 됐음 */
.main-hero h1{max-width:none}
/* DX-Sky GCS 자리 표시 3칸 (2026-09-28). 새 화면이 들어올 때까지 Alerti 처럼 자리만 보여 줌 */
.sky-asset-grid.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:700px){.sky-asset-grid.three{grid-template-columns:1fr}}
/* 고객사례 아래 「관련 제품 및 서비스」 링크에도 화살표를 붙임.
사이트의 다른 링크는 .related-links a::after 로 화살표가 붙는데
이 화면만 !important 로 꺼 두어 혼자 달라 보였음 */
.case-related .related-links a::after{content:'→';display:inline-block;font-weight:700;transition:transform var(--t-base) var(--ease)}
.case-related .related-links a:hover::after{transform:translateX(3px)}
/* ####################################################################
고객사례의 「무엇을 했나」 구역 — 왼쪽 글이 아래로 밀리던 것
무엇이 문제였나 :
이 구역은 [라벨/제목/설명] 세 줄과 오른쪽 표가 나란히 선 격자임.
오른쪽 표가 왼쪽 세 줄보다 길면, 남는 높이가 왼쪽 세 줄에
나눠 들어가 제목이 아래로 밀리고 줄 사이가 벌어졌음.
기상청 사례에서 제목이 표보다 134px 아래에서 시작했음
어떻게 고쳤나 :
맨 아래에 빈 행을 하나 더 만들고 남는 높이를 그 행이 받게 함.
위 세 줄은 내용만큼만 차지하므로 표와 같은 높이에서 시작함
#################################################################### */
.case-work-block{
grid-template-areas:"eyebrow scope" "title scope" "lead scope" ". scope";
grid-template-rows:auto auto auto 1fr;
}
.case-result-block{align-items:start}
/* 그림 칸에 두 장 이상이 들어가면 세로로 쌓음.
기본 칸은 한 장을 가운데 놓는 가로 배치라, 두 장을 넣으면
나란히 서서 각각 반으로 줄어들었음 */
.media:has(img + img){flex-direction:column;gap:14px;justify-content:flex-start}
.media:has(img + img) img{height:auto;max-height:none}
/* ####################################################################
Alerti — 실제 화면과 가로 영상 자리
바뀐 점
1. 화면 자리가 빈 칸이었는데 실제 앱 화면이 들어감
2. 흐름 영상이 세로 휴대폰 모양이었는데 가로 영상으로 바뀜.
머리 영역 오른쪽(434px)에 가로 영상을 두면 너무 작아지므로
글 아래 전체 폭으로 내려놓음
#################################################################### */
/* 제목과 설명은 전체 폭을 씀. 설명 옆이 비어 보인다는 지적이 있었음 */
.alerti-hero-layout{display:block}
.alerti-hero-layout>p{max-width:none}
/* 아래는 두 칸 — 왼쪽에 값 항목 넷, 오른쪽에 가로 영상.
영상이 16:9 라 폭이 정해지면 높이도 정해짐. 그래서 영상을 기준으로
두고, 왼쪽 네 항목을 위아래로 펼쳐 첫 항목의 위와 넷째 항목의 아래가
영상의 위아래와 만나게 함 */
/* 두 줄 격자로 둠. 영상 아래 설명이 영상과 같은 칸에 있으면
글 칸이 설명 높이(33px)만큼 더 늘어나 넷째 항목의 아래가
영상 아래와 어긋났음. 설명을 둘째 줄로 내리고 글 칸은
첫 줄에만 걸치게 해서 영상 높이에 정확히 맞춤 */
.alerti-hero-split{
display:grid;
grid-template-columns:minmax(0,1fr) 260px;
grid-template-areas:"values video" ". caption";
gap:clamp(32px,4vw,56px);row-gap:12px;
align-items:stretch;margin-top:34px;
}
.alerti-value-col{grid-area:values;display:flex}
.alerti-hero-split>.alerti-video-frame{grid-area:video}
.alerti-hero-split>.alerti-flow-caption{grid-area:caption}
.alerti-value-col .alerti-value-lines{
display:flex;flex-direction:column;justify-content:space-between;
width:100%;margin:0;
}
.alerti-value-col .alerti-value-lines>p{margin:0}
/* 영상이 세로(9:16) 로 바뀌었음. 휴대폰 화면을 찍은 것이라
가로로 늘리면 양옆이 비므로 세로 비율 그대로 둠 */
.alerti-video-frame{
aspect-ratio:9/16;width:100%;
background:#071b2a;border-radius:18px;overflow:hidden;
display:grid;place-items:center;
box-shadow:0 14px 34px rgba(2,34,53,.12);
}
/* 칸은 글 높이에 맞춰 늘어나되 영상 자체는 원본 비율(16:9)을 지킴.
남는 몇 px 은 어두운 바탕이 위아래로 메꿔 티가 나지 않음 */
.alerti-video-frame video,.alerti-video-frame iframe{
width:100%;height:100%;border:0;display:block;object-fit:contain;
}
.alerti-hero-split .alerti-flow-caption{
margin:12px 0 0;max-width:none;text-align:left;color:var(--t2);
}
/* 나란히 두는 것은 넉넉한 폭에서만.
1300px 아래로 내려가면 글 칸이 좁아져 줄이 늘고, 그 높이에 맞추느라
영상 칸이 세로로 늘어나 1200px 에서는 비율이 1.29 까지 찌그러졌음.
그 구간부터는 위아래로 쌓고 영상은 원래 비율을 지키게 함 */
@media(max-width:1300px){
.alerti-hero-split{
grid-template-columns:1fr;
grid-template-areas:"values" "video" "caption";
gap:28px;
}
.alerti-value-col .alerti-value-lines{justify-content:flex-start;gap:18px}
.alerti-hero-split>.alerti-video-frame{max-width:320px;align-self:start;justify-self:start}
}
/* 실제 화면이 들어간 자리.
빈 칸일 때는 9:16 휴대폰 모양으로 잘라 보여 줬는데, 받은 화면은
1080x2282(약 9:19)라 그대로 두면 아래가 78px 잘렸음.
칸을 그림의 원래 비율에 맞추고, 빈 칸용 규칙(비율 고정, 넘침 자르기,
그림 절대위치)을 하나씩 되돌림 */
.alerti-phone-shot{
background:transparent;display:block;padding:0;min-height:0;
aspect-ratio:auto;overflow:visible;box-shadow:none;
}
.alerti-phone-shot img{
position:static;inset:auto;
width:100%;height:auto;display:block;object-fit:contain;
border:1px solid var(--line);border-radius:12px;background:var(--soft);
}
/* ####################################################################
고객사례 넘겨 보기
왜 이렇게 만들었나 :
카드가 8개인데 화면에는 네 개만 보여 주고 있었음. 세로로 다 늘어놓으면
화면이 길어지고, 네 개만 두면 나머지 넷을 볼 길이 없었음.
좌우로 미는 방식이라 자바스크립트가 꺼져도 손가락이나 스크롤로
그대로 넘길 수 있음. 화살표는 거기에 얹는 편의 장치임
#################################################################### */
.case-carousel{position:relative}
/* scroll-behavior:smooth 를 여기에 걸지 않음.
한 벌을 지나 제자리로 조용히 돌려놓는 동작까지 애니메이션이 되어,
화면이 왼쪽으로 쭉 밀려가며 앞뒤로 움직이는 것처럼 보였음.
눌러서 옮기는 것만 scrollBy 에서 behavior:'smooth' 로 지정함 */
.case-carousel .carousel-track{
display:flex;gap:18px;overflow-x:auto;
scroll-snap-type:x mandatory;
padding-bottom:6px;margin:0;
scrollbar-width:none;
}
.case-carousel .carousel-track::-webkit-scrollbar{display:none}
.case-carousel .carousel-track>*{
flex:0 0 calc((100% - 54px)/4);scroll-snap-align:start;
}
.carousel-arrow{
position:absolute;top:calc(50% - 22px);z-index:3;
width:44px;height:44px;border-radius:50%;
display:grid;place-items:center;
border:1px solid var(--line);background:var(--white);color:var(--navy2);cursor:pointer;
box-shadow:0 6px 18px rgba(6,25,42,.14);
transition:opacity var(--t-fast),transform var(--t-fast) var(--ease);
}
.carousel-arrow:hover{transform:scale(1.06)}
.carousel-arrow.prev{left:-18px}
.carousel-arrow.next{right:-18px}
/* 넘길 것이 아예 없을 때만 흐리게. 끝에 닿아도 한 바퀴 돌 수 있어
거기서는 흐리게 하지 않음 */
.carousel-arrow[disabled]{opacity:.32;cursor:default;box-shadow:none}
.carousel-arrow[disabled]:hover{transform:none}
@media(max-width:1050px){
.case-carousel .carousel-track>*{flex:0 0 calc((100% - 36px)/3)}
.carousel-arrow.prev{left:-6px}
.carousel-arrow.next{right:-6px}
}
@media(max-width:800px){
.case-carousel .carousel-track>*{flex:0 0 calc((100% - 18px)/2)}
}
@media(max-width:560px){
.case-carousel .carousel-track>*{flex:0 0 86%}
/* 좁은 화면에서는 손가락으로 미는 것이 더 편해 화살표를 감춤 */
.carousel-arrow{display:none}
}
/* 첫 화면 제목을 「SYNC IDEAS / CREATE VALUE」 두 줄로 바꾸면서,
좁은 화면에서 CREATE VALUE 가 한 줄에 안 들어가 세 줄이 되었음.
390px 기준 46px 부터 두 줄로 들어감 */
@media(max-width:700px){
.main-hero h1{font-size:clamp(34px,11.5vw,46px)}
}
/* 제목 위 작은 글씨가 이제 한국어 문장이라 영문 라벨용 넓은 자간이
어울리지 않음. 자간을 좁히고 읽을 만한 크기로 둠 */
.main-hero .eyebrow{letter-spacing:-.01em}
/* 첫 화면 제목을 첫 글자만 대문자로 바꾸면서 자간을 넓힘.
원래 -0.04em 은 한글 큰 제목을 촘촘히 붙이려고 준 값이라,
영문 제목에서는 글자가 서로 붙어 보였음 */
.main-hero h1{letter-spacing:0}
/* 제목이 모두 대문자라 낱말 사이가 눈에 잘 안 들어왔음.
대문자는 글자 높이가 고르고 아래로 내려가는 획이 없어, 같은 폭이라도
소문자 섞인 글보다 띄어쓰기가 좁아 보임.
스페이스를 두 번 넣는 방법은 쓸 수 없음 — HTML 이 이어진 공백을
하나로 합치기 때문임. 띄어쓰기 폭을 따로 지정함 */
.main-hero h1{word-spacing:.12em}
@media(max-width:480px){
/* 아주 좁은 화면에서는 넓힌 띄어쓰기 때문에 CREATE VALUE 가
한 줄에 안 들어가 세 줄이 되었음. 거기서는 기본값으로 둠 */
.main-hero h1{word-spacing:normal}
}
/* 기관 로고 줄 — 세로로 긴 로고가 혼자 작아 보이던 것
로고 줄은 높이를 맞춰 세우는데, 기상청처럼 심벌 아래 글자가 붙은
세로형은 같은 높이에서 폭이 가로형의 1/4밖에 안 되어 글자가 안 읽혔음.
세로형에만 높이를 더 주어 다른 로고와 눈에 보이는 크기를 맞춤.
(행정안전부는 가로형 판본이 있어 그쪽으로 바꿨고, 기상청은
세로형만 제공되어 이 방법으로 맞춤) */
.trust-logo{height:96px}
.trust-logo img{max-height:62px}
.trust-logo img[src*="customer-kma"]{max-height:92px}
/* 첫 화면 제품 줄 — 설명문을 빼고 제품명과 바로가기만 남김.
무슨 제품인지와 어디로 가는지가 먼저 보이게 하려는 것임.
두 칸이 되었으므로 제품명을 가운데에 두고, 바로가기 글자를
1.5배(14px → 21px)로 키워 눌러야 할 자리가 드러나게 함 */
/* 제품명은 가운데인데 상세 보기만 오른쪽 끝에 붙어, 줄의 왼쪽 여백은
523px 인데 오른쪽은 34px 로 15배 차이가 났음.
오른쪽 칸을 왼쪽 절반과 같은 비율로 잡아 두 글자가 줄 가운데를
기준으로 좌우 대칭이 되게 함. 화면 폭이 바뀌어도 비율이 유지됨 */
/* 제품 줄 — 넓은 화면에서만 두 칸으로 나눠 제품명과 바로가기의 좌우 여백을 맞춤.
좁은 화면(700px 이하)은 위의 @media 규칙대로 한 칸에 쌓이므로 건드리지 않음 */
@media(min-width:701px){
.product-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.product-row h3{justify-self:center;text-align:center}
.product-row .text-link{justify-self:center;}
}
/* 구역 머리 — 큰 제목(48px) 바로 아래 설명문이 16px 간격이라 붙어 보였음.
구역 위아래 여백이 112px인 것과 견주면 덩어리가 납작해 보여 24px로 벌림 */
.section-head .section-title+.section-copy{margin-top:24px}
/* 제품 줄의 "상세 보기" — 짙은 사진 위에 기본 파랑(#0a6fa8)이 올라가 글자 대비가 2.7:1 로
기준(4.5:1)에 못 미쳤음. 어두운 바탕에서 이미 쓰는 밝은 하늘색으로 바꿈 (2026-10-14) */
.product-row .text-link,.product-row .text-link:hover{color:#93dcf0}
/* 하위 페이지 공통 헤더 (할 일 T99, 2026-10-15 1차 → 2차 → 3차)
1차: 사진을 빼고 남색 띠로 통일 / 2차: 최소 높이를 없애고 여백으로 높이를 정함
3차(검토 의견): 한화에어로스페이스 누리집처럼 바탕을 본문과 같은 흰색으로 두고 띠를 없앰.
제목 영역을 따로 구분하지 않고 [현재 위치] → 큰 제목 → 소개문이 본문 위에 바로 이어짐.
그래서 하위 페이지의 머리말(메뉴 줄)도 처음부터 흰 바탕·짙은 글자로 둠 (홈만 사진 위 흰 글자) */
.sub-hero,.sub-hero.short,.page-rnd .sub-hero{min-height:0;height:auto;display:block;background:transparent;color:var(--ink);border-bottom:0}
.sub-hero:before{display:none}
.sub-hero .wrap{display:block;padding-top:calc(var(--header) + 80px);padding-bottom:24px}
.sub-hero .crumb,.sub-hero .crumb a{color:var(--muted);opacity:1}
.sub-hero .crumb{margin-bottom:18px;}
.sub-hero h1,.sub-hero.short h1{margin:0 0 18px;color:var(--ink)}
.sub-hero p{margin:0;max-width:62em;color:var(--t3)}
.sub-hero ::selection{background:var(--blue);color:#fff}
@media(max-width:700px){.sub-hero .wrap{padding-top:calc(var(--header) + 40px);padding-bottom:12px}}
body:not(:has(.main-hero)) .site-header{background:#fff;color:#0a1722}
body:not(:has(.main-hero)) .site-header .brand img{filter:none}
body:not(:has(.main-hero)) .site-header .nav-contact{background:var(--navy);border-color:var(--navy);color:#fff}
/* 제품 페이지 「도입부터 구축까지」처럼 그림 없이 글만 두는 칸 (실제 구축 사진이 생기면 그림 칸을 다시 넣음) */
.split.no-media{grid-template-columns:minmax(0,1fr);max-width:860px}
/* 언어 단추 — 아이콘 없이 KR / EN 옆에 아래를 가리키는 작은 세모 (검토 의견 2026-10-15) */
.lang-caret{font-size:10px;line-height:1;opacity:.85;margin-left:2px}
/* 상단 메뉴 (넓은 화면, 2026-10-15)
참고: 한화에어로스페이스 누리집 상단 메뉴
- 메뉴(제품·서비스·고객사례·회사)는 가운데, 문의하기와 언어만 오른쪽
- 메뉴에 마우스를 올리면 머리말 전체가 남색 상자로 바뀌고, 그 아래로 같은 색 판이 내려오며 하위 메뉴가 그 위에 뜸
- 올린 항목만 밝게 두고 나머지는 흐리게, 올린 항목 아래에 밑줄이 왼쪽에서 오른쪽으로 그어짐
- 나머지 화면은 살짝 어둡게 덮음
좁은 화면(1050px 이하)은 기존 접는 메뉴를 그대로 씀 */
@media(min-width:1051px){
.site-header .brand{margin-right:0}
.site-header .header-inner{position:relative;z-index:2}
.main-nav{flex:1;gap:0}
/* 메뉴는 가운데, 오른쪽 끝은 [KR▾][문의하기] 순서 (검토 의견 2026-10-15: 언어를 문의하기 왼쪽으로, 사이를 넓게) */
.main-nav>.nav-group:first-child{margin-left:auto}
.main-nav>.language{margin-left:auto}
.main-nav>.nav-contact{margin-left:28px}
/* 글자 크기 (검토 의견 2026-10-15): 상단 메뉴 21px. 줄바꿈 없이 한 줄 */
.main-nav>.nav-group:not(.language)>.nav-link,.main-nav>.nav-link{position:relative;height:100%;display:flex;align-items:center;padding:0 24px;font-size:21px;font-weight:700;white-space:nowrap;opacity:1;transition:opacity var(--t-fast)}
.main-nav .nav-link .chev{display:none}
.main-nav>.nav-group:not(.language)>.nav-link:after,.main-nav>.nav-link:after{content:"";position:absolute;left:24px;right:24px;bottom:18px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left center;transition:transform .32s var(--ease)}
/* 열린 상태 = 마우스를 올렸거나(.nav-hold-closed 는 방금 눌러 닫은 것) 눌러서 연 것(.is-open, site.js) */
.main-nav>.nav-group:not(.language):hover:not(.nav-hold-closed)>.nav-link:after,.main-nav>.nav-group:not(.language).is-open>.nav-link:after,.main-nav>.nav-group:not(.language)>.nav-link:focus-visible:after,.main-nav>.nav-link:hover:after,.main-nav>.nav-link:focus-visible:after{transform:scaleX(1)}
.main-nav:has(>.nav-group:not(.language):hover,>.nav-group:not(.language).is-open,>.nav-link:hover)>.nav-group:not(.language)>.nav-link,
.main-nav:has(>.nav-group:not(.language):hover,>.nav-group:not(.language).is-open,>.nav-link:hover)>.nav-link{opacity:.5}
.main-nav>.nav-group:not(.language):hover>.nav-link,.main-nav>.nav-group:not(.language).is-open>.nav-link,.main-nav>.nav-link:hover{opacity:1}
/* 마우스를 올렸거나 눌러 열었을 때 머리말 상자 색 */
.site-header:has(.main-nav>.nav-group:not(.language):hover,.main-nav>.nav-group:not(.language).is-open,.main-nav>.nav-link:hover){background:var(--navy2);color:#fff;box-shadow:none}
.site-header:has(.main-nav>.nav-group:not(.language):hover,.main-nav>.nav-group:not(.language).is-open,.main-nav>.nav-link:hover) .brand img{filter:brightness(0) invert(1)}
.site-header:has(.main-nav>.nav-group:not(.language):hover,.main-nav>.nav-group:not(.language).is-open,.main-nav>.nav-link:hover) .nav-contact{border-color:rgba(255,255,255,.55);color:#fff}
/* 아래로 내려오는 판과 화면 덮개. 판 높이는 site.js 가 연 목록 높이(--nav-panel)로 맞춤. 없으면 가장 긴 서비스 목록 기준 */
.site-header:before{content:"";position:absolute;left:0;right:0;top:100%;height:0;background:var(--navy2);transition:height .3s var(--ease);pointer-events:none;z-index:1}
.site-header:after{content:"";position:fixed;left:0;right:0;top:var(--header);bottom:0;background:rgba(3,14,24,.42);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;pointer-events:none;z-index:0}
.site-header:has(.main-nav>.nav-group:not(.language):hover:not(.nav-hold-closed),.main-nav>.nav-group:not(.language).is-open):before{height:calc(var(--nav-panel,372px) + 16px);border-top:1px solid rgba(255,255,255,.1)}
.site-header:has(.main-nav>.nav-group:not(.language):hover:not(.nav-hold-closed),.main-nav>.nav-group:not(.language).is-open):after{opacity:1;visibility:visible}
/* 하위 메뉴는 판 위에 글자만 */
.main-nav>.nav-group:not(.language)>.nav-dropdown{top:100%;left:24px;right:auto;width:max-content;min-width:200px;padding:28px 0;background:transparent;border:0;box-shadow:none;color:#fff;transform:translateY(6px);z-index:2}
.main-nav>.nav-group:not(.language):hover>.nav-dropdown,.main-nav>.nav-group.is-open>.nav-dropdown{opacity:1;visibility:visible;transform:translateY(0)}
/* 단추에 초점만 남은 경우(눌러 닫은 뒤)와 방금 눌러 닫은 경우는 감춤 */
.main-nav>.nav-group:focus-within:not(:hover):not(.is-open)>.nav-dropdown,.main-nav>.nav-group.nav-hold-closed:not(.is-open)>.nav-dropdown{opacity:0;visibility:hidden}
/* 하위 메뉴 글자 20px (검토 의견 2026-10-15) */
.main-nav>.nav-group:not(.language)>.nav-dropdown a{display:block;padding:7px 0;font-size:20px;font-weight:500;color:rgba(255,255,255,.78);background:none;border:0;margin:0;white-space:nowrap}
.main-nav>.nav-group:not(.language)>.nav-dropdown a:hover,.main-nav>.nav-group:not(.language)>.nav-dropdown a[aria-current]{color:#fff;background:none;box-shadow:none;font-weight:500;text-decoration:underline;text-underline-offset:5px}
.main-nav>.nav-group:not(.language)>.nav-dropdown .nav-all{color:#93dcf0;font-weight:700}
}
/* 홈 「연구개발에서 제품화까지」 카드 번호 — 위쪽 01·02·03 막대를 없애고 카드 제목 앞에 번호를 붙임 (검토 메모 2026-10-15) */
.process-num{color:#93dcf0;font-weight:800;margin-right:.15em}
/* 제품 상세의 그림·도표 — 잘리면 안 되는 지도·그래프라 사진용 cover 대신 원래 비율로 보여 주고 출처를 붙임 */
.figure-media,.split .figure-media{display:block;margin:0;height:auto;min-height:0;background:none;overflow:visible}
.figure-media img,.split .figure-media img{position:static;width:100%;height:auto;object-fit:contain;background:#fff;border:1px solid var(--line)}
.figure-media figcaption{margin-top:10px;color:var(--muted)}
/* 홈 「최신 활동」 카드 — 실제 최신 뉴스 3건 (빌드 때 news-data.js 에서 채움, 2026-10-15) */
.news-card.latest{display:flex;flex-direction:column;gap:10px;color:inherit}
.news-card.latest .news-thumb{display:block;margin-bottom:6px}
.news-card.latest .news-date{font-weight:700;color:var(--blue);letter-spacing:.04em}
.news-card.latest h3{margin:0}
.news-card.latest:hover h3{text-decoration:underline;text-underline-offset:4px}
/* 접는 메뉴 손보기 (2026-10-15)
- 서랍 폭이 370px 로 고정돼 375px 휴대폰에서 왼쪽에 5px 틈이 보였음 → 좁은 화면은 꽉 채움
- 서비스 하위 메뉴만 넓은 화면용 폭(265px)이 남아 다른 메뉴보다 짧았음 → 서랍 폭에 맞춤 */
@media(max-width:1050px){.main-nav .nav-dropdown.compact.wide{width:auto}}
@media(max-width:480px){.main-nav{width:100%}}
/* 스크롤 움직임 (2026-10-15, 참고: 한화에어로스페이스 누리집)
- 글·카드·표: 화면에 들어올 때 아래에서 살짝 떠오름 (.mo-up)
- 사진·그림: 가장자리가 조금 잘린 채 살짝 크게 있다가 제자리로 펼쳐짐 (.mo-img)
- 하위 페이지 제목: 처음 열릴 때 위치 → 제목 → 소개문 순서로 살짝 올라옴
처음엔 투명에서 나타나게 했는데, 다른 페이지로 넘어갈 때 화면이 잠깐 하얗게 비었다 채워지는 것처럼 보여
(검토 코멘트 「버튼 누르면 흰색으로 없어졌다가 다시 로딩」) 투명 처리를 빼고 위치만 움직임
클래스는 site.js 가 '첫 화면 아래에 있는 요소'에만 붙임. 첫 화면은 깜빡이지 않고, 자바스크립트가 꺼져 있어도 내용은 그대로 보임
움직임 줄이기 설정을 켠 사람에게는 모두 끔 */
.mo-up{opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.mo-img{clip-path:inset(7% 7% 7% 7%);transform:scale(1.08);transition:clip-path 1.2s var(--ease),transform 1.4s var(--ease)}
.mo-up.mo-in{opacity:1;transform:none}
.mo-img.mo-in{clip-path:inset(0 0 0 0);transform:none}
@keyframes mo-rise{from{transform:translateY(16px)}to{transform:none}}
.sub-hero .crumb,.sub-hero h1,.sub-hero p{animation:mo-rise 1s var(--ease) both}
.sub-hero h1{animation-delay:.08s}
.sub-hero p{animation-delay:.18s}
@media(prefers-reduced-motion:reduce){
.mo-up,.mo-img{opacity:1;transform:none;clip-path:none;transition:none}
.sub-hero .crumb,.sub-hero h1,.sub-hero p{animation:none}
}
/* 닫힌 접는 메뉴의 그림자가 화면 오른쪽 끝에 비치던 것 (원래 있던 문제, 2026-10-15) — 열렸을 때만 그림자 */
@media(max-width:1050px){.main-nav{box-shadow:none}body.nav-open .main-nav{box-shadow:-18px 0 50px rgba(7,24,38,.17)}}
/* === product-pages (2026-10-15) === */
/* 제품 목록(/product) — 검토 의견 "메인페이지와 동일한 양식으로": 첫 화면 제품 줄(.product-row)과 같은
사진 띠 모양을 그대로 쓰고, 분류 표시(01 / 무인비행체)·한 줄 소개·설명을 왼쪽 칸에 함께 둠.
글자 크기 의견에 따라 분류 표시와 설명을 18px 이상으로 올림 */
.product-list-hub .product-row-hub{min-height:250px;padding:38px 44px}
@media(min-width:701px){
.product-list-hub .product-row-hub{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
}
.product-row-hub .product-row-copy{max-width:660px}
.product-row-hub .product-row-label{display:block;font-weight:800;letter-spacing:.04em;color:#93dcf0}
.product-row-hub .product-row-copy h3{margin:8px 0 6px;text-align:left;justify-self:auto}
.product-row-hub .product-row-summary{display:block;color:#fff;margin-bottom:8px}
.product-row-hub p{color:rgba(255,255,255,.88)}
@media(max-width:700px){
.product-list-hub .product-row-hub{padding:28px 24px;min-height:0}
.product-list-hub .product-row-hub:after{background:rgba(4,25,40,.84)}
.product-row-hub .text-link{margin-top:12px;}
}
/* 이 페이지에서는 회색 설명 글이 17px 아래로 내려가지 않게 함 */
/* DX-Sky 개요 — "임무 운영 흐름" 4단계를 사진이 있는 카드 4개로 바꿈(검토 의견).
카드 사이 흐름은 카드 가장자리에 걸친 화살표로 보여 줌. 넓은 화면은 →, 한 줄로 쌓이면 ↓ */
.mission-lifecycle.sky-flow-cards{counter-reset:skystep;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;border:0;margin-top:0}
.mission-lifecycle.sky-flow-cards li{counter-increment:skystep;position:relative;container-type:inline-size;display:flex;flex-direction:column;padding:0;border:1px solid var(--line);background:#fff}
.mission-lifecycle.sky-flow-cards img{width:100%;aspect-ratio:16/10;object-fit:cover;border-bottom:1px solid var(--line);background:var(--soft)}
.mission-lifecycle.sky-flow-cards strong{margin:0;padding:22px 22px 8px}
.mission-lifecycle.sky-flow-cards strong:before{content:counter(skystep,decimal-leading-zero);display:block;margin-bottom:6px;font-size:15px;letter-spacing:.08em;color:var(--blue)}
.mission-lifecycle.sky-flow-cards span{color:var(--muted);padding:0 22px 26px}
.mission-lifecycle.sky-flow-cards li:not(:last-child):after{content:"\2192";content:"\2192" / "";position:absolute;z-index:3;top:calc(50% - 22px);top:calc(31.25cqw - 22px);right:-22px;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:var(--blue);color:#fff;font-size:22px;font-weight:800;line-height:1;border:4px solid #fff}
@media(min-width:861px) and (max-width:1050px){
.mission-lifecycle.sky-flow-cards{gap:24px}
.mission-lifecycle.sky-flow-cards strong{padding:18px 16px 6px}
.mission-lifecycle.sky-flow-cards span{padding:0 16px 20px}
}
@media(max-width:860px){
.mission-lifecycle.sky-flow-cards{grid-template-columns:1fr;gap:26px}
.mission-lifecycle.sky-flow-cards li{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);grid-template-rows:auto 1fr}
.mission-lifecycle.sky-flow-cards img{grid-row:1/3;height:100%;aspect-ratio:auto;min-height:130px;border-bottom:0;border-right:1px solid var(--line)}
.mission-lifecycle.sky-flow-cards strong{padding:18px 18px 4px}
.mission-lifecycle.sky-flow-cards span{padding:0 18px 20px}
.mission-lifecycle.sky-flow-cards li:not(:last-child):after{content:"\2193";content:"\2193" / "";top:auto;bottom:-22px;right:auto;left:78px}
}
@media(max-width:480px){
.mission-lifecycle.sky-flow-cards li{grid-template-columns:minmax(0,118px) minmax(0,1fr)}
.mission-lifecycle.sky-flow-cards strong{padding:16px 14px 4px}
.mission-lifecycle.sky-flow-cards span{padding:0 14px 18px}
.mission-lifecycle.sky-flow-cards li:not(:last-child):after{left:37px}
}
/* === /product-pages === */
/* === rnd (2026-10-15) === */
/* 연구개발 「논문과 발표, 공동연구」 목록 — 검토 의견 "최신 내용으로 수정".
항목마다 날짜·종류를 제목 위에 작게 보이고, 제목은 뉴스룸 기사 창으로, 논문은 원문(DOI)으로 이어짐 */
.activity-head{display:flex;flex-direction:column;gap:6px;min-width:0}
.activity-meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-weight:800;letter-spacing:.02em;color:var(--muted)}
.activity-meta span{color:var(--blue)}
.activity-row strong a{color:inherit;text-decoration:none}
.activity-row strong a:hover,.activity-row strong a:focus-visible{text-decoration:underline;text-underline-offset:3px}
.activity-body{min-width:0}
.activity-source{display:inline-block;margin-top:10px;font-weight:800;color:var(--blue);border-bottom:1px solid currentColor}
.activity-source:after{content:" \2197";content:" \2197" / ""}
/* === /rnd === */
/* === header-nav (2026-10-15) === */
/* 검토 의견 반영: 상단 메뉴 글자 키움·언어를 문의하기 왼쪽으로·제품 하위 메뉴에 하는 일 표시·좁은 화면 접는 하위 목록
상단 메뉴(제품·서비스·회사)는 링크가 아니라 하위 목록을 여닫는 단추임(site.js). 메뉴 21px·하위 20px 은 위 넓은 화면 블록에 있음 */
.main-nav>.nav-group>.nav-link{font-family:inherit;text-align:left}
/* 제품 하위 메뉴: 하는 일을 크게, 제품 이름은 옆에 작게.
맨 위 .nav-dropdown span 규칙(칸처럼 블록·여백)이 안쪽 글자에 걸리지 않게 되돌림 */
.main-nav .nav-dropdown .nav-product>span{display:inline;padding:0;border:0;margin:0;font-size:inherit}
.main-nav .nav-dropdown .nav-product>.nav-name{font-size:.7em;font-weight:600;letter-spacing:.01em;opacity:.62;margin-left:10px}
@media(min-width:1051px){
/* 문의하기·언어 단추 20px (검토 의견 2026-10-15). 세모는 글자에 비례 */
.main-nav>.nav-contact{font-size:20px;min-height:50px;padding:0 24px;white-space:nowrap}
.main-nav .lang-button{font-size:20px;font-weight:700;padding:0 4px;gap:6px;white-space:nowrap}
.main-nav .lang-caret{font-size:.7em;margin-left:0}
.main-nav .lang-menu a{font-size:16px}
.main-nav>.nav-group:not(.language)>.nav-dropdown .nav-product .nav-name{color:#fff}
}
/* 1051~1280px: 21px 메뉴가 줄바꿈 없이 들어가도록 글자 대신 옆 여백을 줄임 */
@media(min-width:1051px) and (max-width:1280px){
.main-nav>.nav-group:not(.language)>.nav-link,.main-nav>.nav-link{padding:0 16px}
.main-nav>.nav-group:not(.language)>.nav-link:after,.main-nav>.nav-link:after{left:16px;right:16px}
.main-nav>.nav-group:not(.language)>.nav-dropdown{left:16px}
.main-nav>.nav-contact{margin-left:20px;padding:0 18px}
}
/* 좁은 화면 서랍: 제품·서비스·회사를 누르면 하위 목록이 펼쳐지고 다시 누르면 접힘 */
@media(max-width:1050px){
.main-nav .nav-group:not(.language)>.nav-link{
width:100%;height:auto;display:flex;align-items:center;justify-content:space-between;
padding:16px 24px;font-size:17px;font-weight:700;letter-spacing:0;color:var(--ink);
border-bottom:1px solid var(--line);
}
/* 손가락으로 누른 뒤 :hover 가 남아 글자가 흐려 보이던 것 */
.main-nav .nav-group:not(.language)>.nav-link:hover{opacity:1}
.main-nav .nav-group:not(.language)>.nav-link .chev{
display:block;width:9px;height:9px;font-size:0;opacity:.7;margin:-4px 4px 0 0;
border-right:2px solid currentColor;border-bottom:2px solid currentColor;
transform:rotate(45deg);transition:transform var(--t-fast);
}
.main-nav .nav-group.is-open>.nav-link .chev{transform:rotate(-135deg);margin-top:4px}
.main-nav .nav-group:not(.language)>.nav-dropdown{display:none}
.main-nav .nav-group.is-open:not(.language)>.nav-dropdown{display:block;background:var(--soft)}
.main-nav .nav-group:not(.language)>.nav-dropdown a{padding-left:36px}
.main-nav .nav-dropdown .nav-product>.nav-name{display:block;margin:3px 0 0;font-size:13px;color:var(--muted);opacity:1}
}
/* === /header-nav === */
/* === home-flow (2026-10-15) ===
홈 구성 개편: 첫 화면 → 사업 분야(관련 제품·서비스 바로 노출) → 기술이 제품이 되기까지 → 고객사례 → 최신 활동 → 고객·협력기관 → 문의
검토 의견 「글자가 너무 작다」에 맞춰 회색 설명글을 키움 (13→17px, 부제 17→20px), 제목과 부제 사이를 24→12px 로 좁힘 */
.main-hero p{font-size:25px;line-height:1.55;max-width:none}
.section-head .section-title+.section-copy{margin-top:12px}
/* 사업 분야: 카드는 더 이상 누르는 단추가 아님. 관련 제품·서비스를 카드 아래에 링크로 둠 */
.field-grid{gap:18px;align-items:start}
.field-col{display:flex;flex-direction:column;min-width:0}
.field-card{cursor:default}
.field-card:hover{transform:none}
.field-card:hover img{transform:none;filter:saturate(.85)}
.field-card:hover:before{background:linear-gradient(180deg,rgba(5,20,32,.05),rgba(5,20,32,.82))}
.field-links{display:grid;gap:18px;padding:22px 2px 0}
.field-links-label{display:block;margin:0 0 6px;font-weight:700;color:var(--t2)}
.field-links a{display:block;padding:3px 0;font-weight:700;color:var(--ink)}
.field-links a:after{content:" →";color:var(--blue)}
.field-links a:hover,.field-links a:focus-visible{color:var(--blue);text-decoration:underline;text-underline-offset:4px}
/* 고객·협력기관: 맨 아래 일반 구역. 기상청·행정안전부·국토교통과학기술진흥원은 국문 가로형으로 바꿔 모두 같은 높이
(위쪽 「기상청은 세로형만 제공되어 높이를 더 줌」 규칙은 이 규칙으로 덮임) */
.trust-section .trust-logo img,.trust-section .trust-logo img[src*="customer-kma"]{max-height:58px}
@media(max-width:700px){
.main-hero p{font-size:19px}
.main-hero p br{display:none}
.field-grid{row-gap:40px}
.field-card{min-height:240px}
}
/* === /home-flow === */
/* === type-floor (2026-10-15) ===
검토 의견 「작은 회색 글씨가 너무 작다」. 페이지마다 따로 정한 12~15px 글씨를 실측해 찾은 곳만 올림
(처음엔 .wrap>p 같은 넓은 선택자를 썼다가 첫 화면 25px 소개문·단계 제목 등 큰 글씨까지 17px로 줄여 버려, 실측된 선택자만 남김)
- 설명 문장: 17px / 버튼·날짜·위치 표시: 16px / 번호·분류 라벨: 15px / 뉴스 태그: 14px */
/* === /type-floor === */
/* === home-tune (2026-10-15 밤, 사용자 지정 값) ===
첫 화면 제목·소개문·구역 부제 크기와 4차 검토 메모(사업 분야 카드·링크, 문의 띠, 바닥글) */
.main-hero h1{font-size:clamp(54px,6.7vw,80px);line-height:1.1}
.main-hero p{font-size:27px}
.site-footer .footer-info,.site-footer .footer-info b,.site-footer .footer-info span{font-size:17px}
.site-footer .footer-bottom span{font-size:15px}
.site-footer .footer-bottom{justify-content:flex-end}
/* 고객사례 카드: 설명 줄 수가 달라 제목 시작 위치가 어긋나던 것. 제목 2줄·설명 2줄 자리를 미리 잡아 화면 폭이 바뀌어도 맞춤 */
.case-grid .image-card{justify-content:flex-end}
.case-grid .image-card h3{min-height:2.5em;display:flex;align-items:flex-end;line-height:1.25}
.case-grid .image-card p{min-height:3.1em}
@media(max-width:700px){
.main-hero p{font-size:20px}
.site-footer .footer-info,.site-footer .footer-info b,.site-footer .footer-info span{font-size:15px}
}
/* 로고: 칸이 좁아지면 가로로 긴 행정안전부만 작아져 기상청과 크기가 달라 보였음. 화면 폭별로 높이를 고정하고, 휴대폰은 2칸으로 */
.trust-section .trust-logo img,.trust-section .trust-logo img[src*="customer-kma"]{height:58px;max-height:none;width:auto;max-width:100%;object-fit:contain}
@media(max-width:1050px){.trust-section .trust-logo img,.trust-section .trust-logo img[src*="customer-kma"]{height:50px}}
@media(max-width:700px){.trust-section .trust-logo{flex-basis:calc((100% - 14px) / 2)}.trust-section .trust-logo img,.trust-section .trust-logo img[src*="customer-kma"]{height:44px}}
/* === /home-tune === */
/* === sky-tabs (2026-10-15) ===
DX-Sky 네 화면(개요·GCS·AI·하드웨어)을 오가는 줄. 고객 지적: 예전 줄은 같은 화면 안의 구역 목차처럼
보였는데 실제로는 다른 화면으로 넘어가는 선택 줄임 → 한화비전 뉴스 허브 탭 모양을 따름.
- 탭을 같은 폭으로 늘리지 않고 글자 폭대로 가운데에 모음, 아래 1px 선은 화면 끝까지
- 고른 탭은 글자를 진하게 + 2px 밑줄(1px 선 위에 겹침)
- 굵기가 바뀌어도 탭 폭이 흔들리지 않게, 굵은 글자 사본(data-label)을 안 보이게 깔아 폭을 미리 잡아 둠
- 하위 화면(GCS·AI·하드웨어)의 구역 목차(.detail-tabs)는 이 줄 아래에 그대로 두되 따라 붙지 않게 함.
두 줄이 같이 붙어 다니면 390px 에서 위쪽 약 170px 을 계속 가림 */
:root{--sky-tabs-h:69px}
.sky-tabs{position:sticky;top:var(--header);z-index:56;background:#fff;box-shadow:inset 0 -1px 0 var(--line);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sky-tabs::-webkit-scrollbar{display:none}
/* 가운데 정렬 + 넘치면 왼쪽 끝부터 밀어 볼 수 있게: 목록 폭을 글자에 맞추고 margin:auto 로 가운데 둠 */
.sky-tabs-list{display:flex;gap:16px;width:max-content;margin:0 auto;padding:0 16px}
.sky-tabs a{display:flex;flex-direction:column;align-items:center;padding:20px 24px;font-weight:400;color:var(--t2);white-space:nowrap;border-bottom:2px solid transparent;transition:color var(--t-fast),border-color var(--t-fast)}
.sky-tabs a::after{content:attr(data-label);height:0;overflow:hidden;visibility:hidden;font-weight:600;pointer-events:none;user-select:none}
.sky-tabs a:hover{color:var(--ink)}
.sky-tabs a[aria-current="page"]{color:var(--ink);font-weight:600;border-bottom-color:var(--ink)}
.sky-tabs a:focus-visible{outline:2px solid var(--blue);outline-offset:-4px}
/* 하위 화면의 구역 목차: 붙어 다니지 않게 하고, 구역으로 이동할 때는 위의 선택 줄 높이만큼 비켜 섬 */
.sky-tabs~.detail-tabs{position:relative;top:auto;z-index:1}
.sky-tabs~.detail-section,.sky-tabs~.sky-family-section{scroll-margin-top:calc(var(--header) + var(--sky-tabs-h) + 12px)}
@media(max-width:700px){
:root{--sky-tabs-h:50px}
.sky-tabs-list{gap:0;padding:0 4px}
.sky-tabs a{padding:12px 16px;}
}
/* === /sky-tabs === */
/* === en-layout (2026-10-15) ===
영문 페이지 전용 보정. 글자 크기를 키운 뒤(home-tune·type-floor) 한글보다 긴 영문이 칸을 넘치거나
버튼이 두 줄로 접히던 곳을 실측해 찾은 것만 고침. 한글 화면에는 영향 없음(html[lang="en"] 한정) */
/* 제목·부제: 마지막 줄에 단어 하나만 남는 것을 줄이려고 줄 길이를 고르게 */
html[lang="en"] :is(h1,h2,h3,h4){text-wrap:balance}
html[lang="en"] .section-head p.section-copy,html[lang="en"] .main-hero p{text-wrap:balance}
html[lang="en"] .main-hero p{max-width:1120px}
/* 하단 문의 띠: 설명 문장이 길어 "Contact Us" 버튼이 눌려 두 줄이 됐음 */
html[lang="en"] .contact-strip .outline-btn{white-space:nowrap;flex-shrink:0}
/* 꼬리말: 제목 칸 58px 에 "Company"·"Address"(17px)가 들어가지 않아 값과 겹쳤음 */
html[lang="en"] .footer-info>div{grid-template-columns:86px max-content 44px max-content 58px minmax(0,1fr)}
html[lang="en"] .footer-info>div:nth-child(1),html[lang="en"] .footer-info>div:nth-child(2){grid-template-columns:86px minmax(0,1fr)}
@media(max-width:900px){html[lang="en"] .footer-info>div,html[lang="en"] .footer-info>div:nth-child(1),html[lang="en"] .footer-info>div:nth-child(2){grid-template-columns:86px 1fr}
/* 한 줄에 하나씩 쌓이면 Fax·Email 제목만 가운데 정렬돼 Tel 과 어긋났음 */
html[lang="en"] .footer-info>div>b:not(:first-child){text-align:left}}
/* 첫 화면 사업 분야 카드: 영문 링크가 길어 화살표만 다음 줄로 떨어지거나 두 줄로 접힘 */
html[lang="en"] .field-links a:after{content:"\00a0→"}
@media(max-width:1240px){html[lang="en"] .field-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){html[lang="en"] .field-grid{grid-template-columns:1fr}}
/* 고객사례 카드(홈·제품·서비스 목록): 기관 영문명이 길어 24px 에서 4줄이 됨 */
/* 문의 띠 제목: 태블릿 폭에서 44px 영문이 4줄이 됐음 */
/* 서비스 상세 소제목: 300px 칸에 32px 영문이 4~5줄로 쌓였음 */
@media(min-width:1051px){
html[lang="en"] .service-section.rich{grid-template-columns:360px 1fr;gap:56px}
}
/* 표준화 주제 제목: 태블릿 폭에서 "communications" 한 단어가 칸을 넘어 본문과 겹쳤음 */
html[lang="en"] .topic-title h3{overflow-wrap:break-word}
/* 좁은 단의 큰 제목: 영문이 4~5줄이 되던 곳 */
/* 휴대폰: 문장형 영문 구역 제목이 30~34px 에서 5~7줄까지 쌓였음 */
/* === /en-layout === */
/* === case-template (2026-10-15) ===
고객사례 상세 8장(/case-study/<아이디>) 공통 틀. 고객 요청 네 가지를 한 화면에 합침
① 블로그 글처럼: 고객사 이름을 가운데 두고 아래로 글이 흐름 (참고: 한화비전 블로그)
② 제목 아래 큰 사진이 스크롤에 따라 펼쳐짐 (참고: 한화에어로스페이스 ESG 화면 실측값 그대로)
③ 본문은 큰 번호 01·02·03 위에 글 반, 사진 반. 구역마다 좌우를 바꿈 (참고: 항공우주연구원 누리집)
사진을 여러 장 넘겨 보는 방식은 비효율적이라는 의견에 따라 구역당 사진 1장만. 맞는 사진이 없으면 그 반쪽에 관련 글·목록을 둠
④ 고객 소개 + 과제 / 해결 방법 / 성과, 관련 제품·서비스 카드 (참고: AWS 고객사례)
.sub-hero.is-centered 와 .page-kv 는 다른 하위 페이지에도 붙여 쓸 수 있게 고객사례 전용 이름을 쓰지 않음 */
/* ① 가운데 머리: 기존 하위 페이지 머리(.sub-hero)를 그대로 쓰고 가운데 정렬만 더함.
등장 움직임도 기존 것(위치만 살짝 올라옴, 투명→불투명 없음)을 그대로 씀 */
.sub-hero.is-centered .wrap{text-align:center;padding-bottom:0}
.sub-hero.is-centered .crumb{justify-content:center}
.sub-hero.is-centered h1{max-width:870px;margin:0 auto 20px}
.sub-hero.is-centered p{max-width:760px;margin:0 auto;color:var(--t3)}
/* ② 키 비주얼 (참고 화면 1440px 실측)
- 상자: 왼쪽 12.5vw 띄우고 오른쪽 화면 끝까지, 높이 80vmin, 모서리 각짐, 어두운 덧씌움 없음
너비를 100vw 로 계산하면 세로 스크롤바 폭만큼 가로 스크롤이 생겨, 너비는 지정하지 않고(블록 기본값) 왼쪽 여백만 줌
- 왼쪽 흰 막: 처음 너비 min(33.33%, 365px), 높이 105% 가운데. 사진은 1.1배에서 시작
- site.js 가 스크롤에 따라 --e(0→1)를 넘기면 막은 0으로 줄고 사진은 1배로 돌아옴. 기본값 1 = 다 펼친 상태 */
.page-kv{margin-top:clamp(48px,6vw,88px)}
.page-kv-box{--e:1;position:relative;margin-left:12.5vw;height:80vmin;overflow:hidden;background:var(--soft)}
.page-kv-box img{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.1 - .1 * var(--e)));transform-origin:50% 50%}
.page-kv-cover{position:absolute;left:0;top:50%;z-index:1;width:calc(min(33.333%,365px) * (1 - var(--e)));height:105%;transform:translateY(-50%);background:#fff}
/* 휴대폰·좁은 태블릿: 왼쪽 여백을 본문 여백과 맞추고 4:3 비율, 막·확대 없음 */
@media(max-width:767px){
.page-kv-box{margin-left:32px;height:auto;aspect-ratio:4/3}
.page-kv-box img{transform:none}
.page-kv-cover{display:none}
}
@media(max-width:700px){.page-kv-box{margin-left:16px}}
/* ④ 고객 소개 + 한눈에 보기 (한눈에 보기 상자: 참고 화면 bg #f7f7f7, 모서리 7px, 안쪽 32px, 머리 아래에 붙음) */
.cs-overview{padding:clamp(72px,8vw,120px) 0 0}
.cs-overview-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:60px 80px;align-items:start}
.cs-label{display:block;margin:0 0 12px;font-weight:700;letter-spacing:.04em;color:var(--blue)}
.cs-about h2{max-width:820px;margin:0 0 20px;color:var(--ink)}
.cs-about p{max-width:820px;margin:0;color:var(--t3)}
.cs-glance{position:sticky;top:calc(var(--header) + 6px);padding:32px;border-radius:7px;background:#f7f7f7}
.cs-glance h2{margin:0 0 4px;}
.cs-glance dl{display:grid;gap:0;margin:0}
.cs-glance dl>div{display:grid;gap:6px;padding:18px 0;border-bottom:1px solid var(--line)}
.cs-glance dl>div:last-child{border-bottom:0;padding-bottom:0}
.cs-glance dt{font-weight:700;color:var(--t2)}
.cs-glance dd{margin:0;color:var(--ink)}
.cs-glance ul{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.cs-glance li{position:relative;padding-left:14px}
.cs-glance li:before{content:"";position:absolute;left:0;top:.72em;width:5px;height:5px;border-radius:50%;background:var(--blue)}
.cs-glance-links{display:grid;gap:4px;justify-items:start}
.cs-glance-links a{font-weight:700;color:var(--blue)}
.cs-glance-links a:after{content:"\00a0→"}
.cs-glance-links a:hover,.cs-glance-links a:focus-visible{text-decoration:underline;text-underline-offset:4px}
/* ③ 번호 구역 (참고 화면 실측: 번호 110px·굵기 900·글자색 5%, 글 칸 위 -10px/왼쪽 -10px,
제목 위 40px 띄워 번호와 겹침, 사진 칸 약 반, 사이 60px, 모서리 20px, 제목 28px, 본문 18px)
float 대신 grid 로 두 칸을 정확히 반반으로 나눔. 사진 있는 구역만 좌우를 번갈아 둠(.is-flip, 마크업에서 지정)
사진이 없는 구역은 왼쪽에 번호·제목, 오른쪽에 본문·목록 (AWS 「Challenge | 본문」 배치) */
.cs-story{padding:clamp(80px,9vw,128px) 0 clamp(80px,9vw,120px)}
.cs-sec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:60px;align-items:start}
.cs-sec.has-media{align-items:center}
.cs-sec+.cs-sec{margin-top:clamp(72px,7vw,104px)}
.cs-sec.is-flip>.cs-sec-media{order:-1}
.cs-sec-text{position:relative;min-width:0;padding-top:40px}
.cs-sec-text>:not(.cs-num){position:relative}
.cs-num{position:absolute;top:-10px;left:-10px;font-family:'Paperlogy','Pretendard',sans-serif;font-weight:900;letter-spacing:-.02em;color:var(--ink);opacity:.05;pointer-events:none;user-select:none}
.cs-sec h2{margin:0 0 20px;color:var(--ink)}
.cs-sec-text p,.cs-sec-body p{margin:0;color:var(--t3)}
.cs-sec-text .cs-lead{margin-bottom:28px}
.cs-sec-body{min-width:0;padding-top:40px}
.cs-sec-media{min-width:0;margin:0}
/* 세로로 긴 그림(LX 설치형 GCS 1012×1110)이 한 화면을 넘지 않게 높이 상한을 두고 가운데 정렬 */
.cs-sec-media img{width:auto;max-width:100%;height:auto;max-height:620px;margin:0 auto;border:1px solid var(--line);border-radius:20px;background:#fff}
.cs-sec-media figcaption{margin-top:14px;color:var(--t2);text-align:center}
.cs-sec-cards>.cs-sec-text{grid-column:1/-1}
.cs-feats{grid-column:1/-1;list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;counter-reset:feat}
.cs-feats li{position:relative;counter-increment:feat;padding:32px 32px 30px;border:1px solid var(--line);border-radius:20px;background:#fff}
.cs-feats li:before{content:counter(feat,decimal-leading-zero);display:block;margin-bottom:14px;font-family:'Paperlogy','Pretendard',sans-serif;font-size:15px;font-weight:800;letter-spacing:.04em;color:var(--blue)}
.cs-feats strong{display:block;margin-bottom:10px;color:var(--ink)}
.cs-feats p{margin:0;color:var(--t3)}
.cs-shots{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 24px;margin-top:56px}
.cs-shots figure{margin:0;min-width:0}
.cs-shots figure:first-child{grid-column:1/-1}
.cs-shots img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:20px;background:#0b111d}
.cs-shots figure:not(:first-child) img{aspect-ratio:16/10;object-fit:contain}
.cs-shots figure:first-child img{width:auto;max-width:100%;max-height:620px;margin:0 auto}
.cs-shots figcaption{margin-top:14px;color:var(--t2);text-align:center}
.cs-video{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:#071c2e}
.cs-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cs-resource{margin-top:4px!important}
.cs-resource a{font-weight:700;color:var(--blue);text-decoration:underline;text-underline-offset:4px}
/* 수행 범위·기능 목록: 번호 / 굵은 제목 / 설명 */
.cs-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.cs-list li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:12px;padding:18px 0;border-bottom:1px solid var(--line)}
.cs-list li>span{grid-row:1/3;padding-top:3px;font-weight:800;color:var(--blue)}
.cs-list strong{color:var(--ink)}
.cs-sec .cs-list p{grid-column:2;margin-top:4px;}
.cs-list.plain li{grid-template-columns:minmax(0,1fr)}
.cs-sec .cs-list.plain p{grid-column:1}
.cs-bullets{display:grid;gap:8px;margin:24px 0 0;padding:0;list-style:none}
.cs-bullets li{position:relative;padding-left:18px;color:var(--t3)}
.cs-bullets li:before{content:"";position:absolute;left:2px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--blue)}
/* ④ 관련 제품·서비스 카드 (참고 화면: 배경 #f3f3f7, 모서리 24px, 안쪽 28px, 제목 24px, 카드 전체가 링크, 아래 →) */
.cs-related{padding:0 0 clamp(80px,9vw,128px)}
.cs-related-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 24px;margin-bottom:32px;padding-top:clamp(56px,6vw,80px);border-top:1px solid var(--line)}
.cs-related-head h2{margin:0;}
.cs-all-link{font-weight:700;color:var(--blue);white-space:nowrap}
.cs-all-link:after{content:"\00a0→"}
.cs-all-link:hover,.cs-all-link:focus-visible{text-decoration:underline;text-underline-offset:4px}
.cs-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.cs-card{display:flex;flex-direction:column;min-height:240px;padding:28px;border-radius:24px;background:#f3f3f7;color:var(--ink);transition:background var(--t-base) var(--ease)}
.cs-card:hover{background:#e8e8ef}
.cs-card:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.cs-card-type{margin-bottom:10px;font-weight:700;color:var(--t2)}
.cs-card strong{font-weight:600;}
.cs-card-desc{margin-top:8px;color:var(--t3)}
.cs-card-arrow{margin-top:auto;padding-top:28px;transition:transform var(--t-base) var(--ease)}
.cs-card:hover .cs-card-arrow{transform:translateX(4px)}
/* 좁은 화면: 한 칸으로. 한눈에 보기는 본문 위로(참고 화면 휴대폰 배치), 번호 구역은 글 먼저 사진 나중 */
@media(max-width:1050px){.cs-overview-grid{grid-template-columns:minmax(0,1fr) 300px;gap:48px}}
@media(max-width:900px){
.cs-overview-grid{grid-template-columns:1fr;gap:40px}
.cs-glance{order:-1;position:static}
.cs-sec,.cs-sec.has-media{grid-template-columns:minmax(0,1fr);row-gap:28px;align-items:start}
.cs-sec.is-flip>.cs-sec-media{order:0}
.cs-sec-body{padding-top:0}
.cs-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
.cs-num{top:-6px;left:-4px}
.cs-sec-text{padding-top:28px}
.cs-glance{padding:24px}
.cs-sec-media img,.cs-video{border-radius:10px}
.cs-feats{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:28px}
.cs-feats li{padding:24px 22px;border-radius:14px}
.cs-shots{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:40px}
.cs-shots img{border-radius:10px}
.cs-cards{grid-template-columns:1fr;gap:16px}
.cs-card{min-height:0}
.cs-related-head{flex-direction:column;align-items:flex-start}
}
/* === /case-template === */
/* === products-2 (2026-10-15) ===
제품 목록(/product) 재구성. 검토 의견:
- 「표준기술과 연구개발을 실제 제품으로 연결합니다」 구역은 첫 화면과 겹쳐 삭제함
- 페이지 제목과 「제품을 만나보세요」 구역 제목이 겹쳐 제목 한 줄 + 부제 + 제품 목록으로 정리함
- 가로 띠 대신 KARI 콘텐츠 목록처럼 왼쪽 사진·오른쪽 글·맨 아래 「상세 보기」를 세로로 쌓음.
뒤에 큰 흐린 번호(110px·900·투명도 .05), 사진 폭 약 48%, 간격 60px, 모서리 20px는 참고 화면 실측값
- 분류(무인비행체)와 제품명(DX-Sky)이 비슷한 크기로 보이게 함(분류 26px·제품명 30px)
- 본문 글자는 20px 아래로 내려가지 않음(아래쪽 사례·서비스·문의 구역 포함).
앞의 product-pages 블록 중 .product-row-hub 규칙은 이 페이지에서 더 쓰이지 않음 */
body.page-products .sub-hero p{margin-top:6px}
.prod-section{padding-top:72px}
.prod-list{display:flex;flex-direction:column;gap:120px}
.prod-item{display:grid;grid-template-columns:48% minmax(0,1fr);gap:60px;align-items:center}
.prod-media{display:block;overflow:hidden;border-radius:20px;background:var(--soft);aspect-ratio:16/10}
.prod-media img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--ease)}
.prod-item:hover .prod-media img{transform:scale(1.03)}
/* 짝수 항목은 사진을 오른쪽에 둬 좌우가 번갈아 나오게 함 (검토 의견 「와리가리」). 좁은 화면(860px 이하)은 한 칸이라 사진이 늘 위 */
.prod-item:nth-child(even){grid-template-columns:minmax(0,1fr) 48%}
.prod-item:nth-child(even) .prod-media{order:2}
@media(max-width:860px){.prod-item:nth-child(even){grid-template-columns:minmax(0,1fr)}.prod-item:nth-child(even) .prod-media{order:0}}
.prod-body{position:relative;padding-top:40px}
.prod-num{position:absolute;top:-28px;left:-6px;font-weight:900;letter-spacing:-.02em;color:var(--ink);opacity:.05;pointer-events:none;user-select:none}
.prod-cat{position:relative;margin:0;font-weight:700;color:var(--blue);letter-spacing:-.01em}
.prod-name{position:relative;margin:6px 0 0;font-weight:800;color:var(--navy)}
.prod-summary{margin:18px 0 0;font-weight:600;color:var(--ink)}
.prod-desc{margin:12px 0 0;color:var(--t3)}
.prod-link{display:inline-flex;align-items:center;gap:8px;margin-top:28px;font-weight:700;color:var(--blue)}
.prod-link:after{content:"\2192";content:"\2192" / "";transition:transform var(--t-fast) var(--ease)}
.prod-link:hover:after{transform:translateX(4px)}
/* en-layout 블록이 1051~1240px 영어 사례 카드 제목을 18px로 줄임 → 이 페이지만 20px로 되돌림 */
@media(max-width:1100px){
.prod-list{gap:100px}
.prod-item{gap:44px}
}
@media(max-width:860px){
.prod-list{gap:80px}
.prod-item{grid-template-columns:minmax(0,1fr);gap:28px}
.prod-body{padding-top:28px}
.prod-num{top:-18px}
}
@media(max-width:700px){
.prod-section{padding-top:48px}
.prod-list{gap:64px}
.prod-media{border-radius:14px}
.prod-num{top:-10px;left:-3px}
}
/* === /products-2 === */
/* === chrome-2 (2026-10-15) ===
검토 의견 반영: 머리말 메뉴 강조·로고 크기·문의 창 왼쪽 칸·바닥글·홈 고객 및 협력기관 띠
바닥글과 고객 띠는 한국항공우주연구원 누리집(kari.re.kr) 아래쪽 배치를 참고함(내용이 아니라 배치만) */
/* 1) 상단 메뉴: 판이 열렸을 때 올린(연) 항목만 진한 흰색 굵은 글씨, 나머지는 흐리게.
전에는 흐리게 하는 규칙(.main-nav:has(...) … opacity:.5)의 선택자 점수가 밝게 하는 규칙보다 높아
올린 항목까지 모두 흐리게 보였음. #siteHeader 를 붙여 밝게 하는 규칙이 반드시 이기게 함 */
@media(min-width:1051px){
#siteHeader .main-nav>.nav-group:not(.language)>.nav-link,#siteHeader .main-nav>.nav-link{transition:opacity .2s,color .2s,font-weight .2s}
#siteHeader .main-nav>.nav-group:not(.language):hover>.nav-link,
#siteHeader .main-nav>.nav-group:not(.language).is-open>.nav-link,
#siteHeader .main-nav>.nav-group:not(.language)>.nav-link[aria-expanded="true"],
#siteHeader .main-nav>.nav-link:hover{opacity:1;color:#fff;font-weight:800}
/* 눌러 연 목록이 있는 채로 고객사례(하위 없음)에 올리면 강조는 고객사례로만 */
#siteHeader .main-nav:has(>.nav-link:hover)>.nav-group.is-open:not(:hover)>.nav-link{opacity:.5;font-weight:700}
/* 굵어질 때 글자 폭이 늘어 옆 메뉴가 밀리지 않게, 굵은 글씨 폭을 미리 잡아 둠(보이지 않는 복사본, data-label) */
.main-nav .nav-label[data-label]{display:inline-flex;flex-direction:column;align-items:center}
.main-nav .nav-label[data-label]:before{content:attr(data-label);height:0;overflow:hidden;visibility:hidden;font-weight:800;pointer-events:none;user-select:none}
}
/* 2) 로고: 메뉴 글자(21px)에 비례하게 키움. 로고 그림 가로:세로 = 약 2.3:1 이라 높이로 크기를 정함
넓은 화면 176x76, 태블릿 150x65, 휴대폰 132x57 (머리말 높이 86px / 휴대폰 70px 안에 들어감) */
.site-header .brand{width:176px}
.site-header .brand img{height:76px}
@media(max-width:1050px){.site-header .brand{width:150px}.site-header .brand img{height:65px}}
@media(max-width:700px){.site-header .brand{width:132px}.site-header .brand img{height:57px}}
/* 3) 문의 창 왼쪽 남색 칸: 제목 한 줄만 남기고 세로 가운데. 닫기(x)는 손가락으로 누르기 좋은 44px */
.contact-panel .contact-aside{justify-content:center}
.contact-panel .contact-aside h3{margin:0;line-height:1.45}
.contact-panel>.modal-close{width:44px;height:44px;top:10px;right:10px;display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:1;border-radius:50%}
/* 한 줄 배치(1050px 이하)에서는 창 안을 내리면 x 가 위로 사라졌음.
x 를 창 전체 높이(1~2행)에 걸쳐 두고 sticky 로 붙여, 어디까지 내려도 오른쪽 위에 보이게 함.
남색 칸 위에도 보이도록 흰 동그라미 바탕 */
@media(max-width:1050px){
.contact-panel>.contact-aside{grid-area:1/1}
.contact-panel>.contact-form{grid-area:2/1}
.contact-panel>.modal-close{position:sticky;top:10px;right:auto;grid-area:1/1/3/2;justify-self:end;align-self:start;margin:10px 10px 0 0;background:#fff;color:var(--navy);box-shadow:0 2px 10px rgba(3,15,25,.22);font-size:28px}
.contact-panel .contact-aside{padding-right:72px}
/* 문의 창이 열려 있는 동안 떠 있는 [문의하기] 단추가 창 위에 겹쳐 보이던 것 */
body:has(.modal-shell.open) .float-contact{display:none}
}
/* 4) 바닥글: 왼쪽 로고, 오른쪽에 바로가기 링크 → 회사 정보 → 연락처(세로선으로 구분), 맨 아래 저작권은 가운데
(한국항공우주연구원 바닥글 배치). 글자는 전보다 한 단계씩 키움: 회사명 20px, 나머지 18px */
.site-footer{padding:60px 0 0}
.site-footer .footer-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px 72px;align-items:start}
.site-footer .footer-logo{width:190px;height:auto;justify-self:start;filter:brightness(0) invert(1);opacity:.92}
.site-footer .footer-links{display:flex;flex-wrap:wrap;gap:8px 34px;margin:0 0 22px;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.12)}
.site-footer .footer-links a{font-size:18px;font-weight:700;color:#fff;line-height:1.5}
.site-footer .footer-links a:hover{color:#93dcf0;text-decoration:underline;text-underline-offset:5px}
.site-footer .footer-body .footer-info{display:flex;flex-direction:column;gap:6px}
.site-footer .footer-body .footer-info>div:nth-child(n){display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px;row-gap:2px;line-height:1.7}
.site-footer .footer-body .footer-info b{font-size:18px;font-weight:600;color:rgba(255,255,255,.62);text-align:left;margin:0}
.site-footer .footer-body .footer-info span{font-size:18px;color:#dfe8ee}
.site-footer .footer-body .footer-info>div:first-child span{font-size:20px;font-weight:700;color:#fff}
.site-footer .footer-body .footer-info>div:nth-child(3)>b:not(:first-child){position:relative;margin-left:10px;padding-left:22px}
.site-footer .footer-body .footer-info>div:nth-child(3)>b:not(:first-child):before{content:"";position:absolute;left:0;top:50%;width:1px;height:15px;margin-top:-7px;background:rgba(255,255,255,.3)}
.site-footer .footer-bottom{display:block;margin-top:44px;padding:22px 0 30px;border-top:1px solid rgba(255,255,255,.14);text-align:center}
.site-footer .footer-bottom span{display:inline;margin:0;font-size:16px;color:#9fb1bd}
@media(max-width:1050px){
.site-footer .footer-top{grid-template-columns:minmax(0,1fr)}
.site-footer .footer-logo{width:160px}
/* 이 폭부터 오른쪽 아래에 떠 있는 [문의하기](높이 44px)가 저작권 줄을 가리지 않게 아래를 비워 둠 */
.site-footer .footer-bottom{padding-bottom:84px}
}
@media(max-width:700px){
.site-footer{padding-top:44px}
.site-footer .footer-logo{width:140px}
.site-footer .footer-links{gap:6px 22px}
.site-footer .footer-links a{font-size:17px}
.site-footer .footer-body .footer-info b,.site-footer .footer-body .footer-info span{font-size:17px}
.site-footer .footer-body .footer-info>div:first-child span{font-size:20px}
/* 좁은 화면에서는 줄이 바뀌며 구분선이 줄 맨 앞에 남으므로, 연락처를 「이름 값」 두 칸 표로 세움 */
.site-footer .footer-body .footer-info>div:nth-child(3){display:grid;grid-template-columns:max-content minmax(0,1fr)}
.site-footer .footer-body .footer-info>div:nth-child(3)>b:not(:first-child){margin-left:0;padding-left:0}
.site-footer .footer-body .footer-info>div:nth-child(3)>b:not(:first-child):before{content:none}
.site-footer .footer-bottom{margin-top:32px}
.site-footer .footer-bottom span{font-size:15px}
}
/* 5) 홈 「고객 및 협력기관」 띠: 왼쪽에 제목과 이전·다음·정지 단추, 오른쪽에 로고가 한 줄로 넘어감(site.js chrome-2)
로고는 높이를 하나로 고정하고 너비는 그림 비율대로(기상청·행정안전부 크기가 달라 보이던 것) */
.trust-banner{background:#fff;border-top:1px solid var(--line);padding:0}
.trust-banner-inner{display:flex;align-items:center;gap:44px;min-height:136px;padding:30px 0}
.trust-banner-head{display:flex;align-items:center;gap:22px;flex:0 0 auto}
.trust-banner-title{margin:0;font-weight:800;letter-spacing:-.02em;color:var(--navy);white-space:nowrap}
.trust-banner-ctrl{display:flex;gap:8px}
.trust-btn{position:relative;width:44px;height:44px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid #c9d4dc;border-radius:50%;background:#fff;color:var(--navy);cursor:pointer;transition:background-color var(--t-fast),color var(--t-fast),border-color var(--t-fast)}
.trust-btn:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.trust-btn:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.trust-prev:before,.trust-next:before{content:"";width:9px;height:9px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-left:4px}
.trust-next:before{transform:rotate(-135deg);margin:0 4px 0 0}
.trust-toggle:before{content:"";box-sizing:border-box;width:11px;height:13px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.trust-toggle.is-paused:before{width:0;height:0;border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent currentColor;margin-left:4px}
.trust-viewport{flex:1 1 auto;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent)}
.trust-track{display:flex;align-items:center;column-gap:56px;width:max-content;margin:0;padding:0 28px;list-style:none}
.trust-item{flex:0 0 auto;display:flex;align-items:center;height:64px}
.trust-item img{display:block;height:52px;width:auto;max-width:none;object-fit:contain}
@media(max-width:900px){
.trust-banner-inner{flex-direction:column;align-items:stretch;gap:18px;padding:28px 0}
.trust-banner-head{justify-content:space-between}
}
@media(max-width:700px){
.trust-banner-ctrl{gap:6px}
.trust-track{column-gap:36px;padding:0 20px}
.trust-item{height:52px}
.trust-item img{height:40px}
}
@media(prefers-reduced-motion:reduce){.trust-track{transition:none !important}}
/* === /chrome-2 === */
/* === type-scale (2026-10-15) ===
고객 글자 크기 결정을 한 페이지가 아니라 같은 역할이 있는 모든 페이지에 적용함
(고객 지적: 「크기 의견이 한 페이지에만 반영됐다」)
- 하위 페이지 제목 소개문 30px / 구역 부제 26px / 서비스 본문 24px / 서비스 목록 22px
- 하단 문의 띠(.contact-strip)는 고객이 모든 페이지에서 지우기로 해 여기서 크기를 정하지 않음
- 제품·서비스·고객사례 화면의 본문 영역은 20px 아래 글자를 두지 않음(아래 ⑥ 바닥값)
- 휴대폰(700px 이하)은 데스크톱의 75~80%, 16px 아래로는 내리지 않음
앞쪽 블록(type-floor·home-tune·products-2·case-template)이 같은 대상을 더 높은 점수의 선택자로 잡고 있는 곳은
!important 대신 같은 점수 이상의 선택자로 맞춤(아래 각 줄 주석) */
/* ① 하위 페이지 제목 아래 소개문. body 를 붙여 products-2 의 body.page-products .sub-hero p(0,2,2)와 점수를 맞추고,
:is() 로 case-template 의 .sub-hero.is-centered p 도 함께 덮음 */
body :is(.sub-hero,.sub-hero.is-centered) p{color:var(--t3);max-width:62em}
.sub-hero.is-centered p{margin-left:auto;margin-right:auto}
/* ② 구역 제목 아래 부제: 구역 머리(.section-head)든, 제목 바로 뒤에 붙은 설명이든 같은 역할로 봄 */
/* 반쪽 칸(.split) 안에서는 26px 이 칸을 너무 채워 24px 로 한 단계 낮춤 */
.service-story-intro .lead{color:#304656;max-width:1000px}
/* ③ 서비스 상세 본문과 목록 */
.service-section.rich .service-body p{color:#455661;margin:0 0 15px}
.service-section.rich .service-body li{color:var(--t3)}
/* 목록 배치(고객 의견 「글자를 키운 뒤 배치가 이상하다」): 22px 에서 세 칸은 한 칸이 약 230px 라 용어와 설명이
뒤엉켜 여러 줄로 쪼개졌음 → 두 칸으로 줄이고, 굵은 용어는 설명 위 한 줄에 따로 둠(콜론은 문구에서 뺌).
앞 블록의 li+li·nth-child 세로선 규칙(0,4,1)보다 점수가 높게 :nth-child(n) 을 붙임 */
.service-section.rich .service-body ul{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}
.service-section.rich .service-body ul>li:nth-child(n){padding:15px 24px 18px 0;border:0;border-top:1px solid var(--line)}
.service-section.rich .service-body li b{display:block;margin-bottom:4px;font-weight:700;color:var(--navy)}
/* 비행 전·후 점검 줄 */
.ops-check-lines p{grid-template-columns:120px 1fr;gap:20px;padding:16px 0}
html[lang="en"] .ops-check-lines p{grid-template-columns:8em 1fr} /* type-v4: 170px → 8em(24px 에서 「Communication」 넘침) */
/* ④ 관련 제품과 사례 줄: 분류 20px · 이름 28px · 자세히 보기 20px */
a.service-relation.is-linked{grid-template-columns:180px 1fr 200px;padding:28px 0}
a.service-relation.is-linked>span:first-child{letter-spacing:.02em}
a.service-relation.is-linked .relation-go{letter-spacing:0}
/* ⑥ 본문 바닥값 20px (701px 이상). 처음엔 제품·서비스·고객사례만이었으나 고객이 「모든 페이지에 최소 20px」로
다시 정해 홈을 뺀 모든 하위 페이지(회사·뉴스룸·채용·수상·연구개발 포함)로 넓힘. 홈은 home-tune 에서 따로 정한 값을 씀.
font-size:max(20px,1em) → 원래 20px 보다 작던 글자는 20px 이 되고, 문단 안의 굵은 글씨·링크처럼
부모 크기를 따르는 글자는 부모 크기(1em)를 그대로 따름. 머리말·바닥글·창(.modal-shell)과
20px 보다 크게 정해 둔 글자(제목, 위 ①~④, 큰 번호, 제품 분류·요약, 사례 카드 제목, 화살표 단추)와
⑨ 고객사례 전용 값은 :not() 으로 빼서 건드리지 않음.
휴대폰에는 걸지 않음: max(16px,1em) 을 걸면 휴대폰에서 17~19px 로 정해 둔 글자까지 16px 로 내려가서,
휴대폰은 16px 아래로 남은 곳만 실측해 아래 휴대폰 구간에서 따로 올림 */
/* ⑦ 서비스 목록(/service) 「제품과 구축 서비스를 함께 연결합니다」: 관련 없는 배 그림 대신 연결 대상인 제품 네 가지 표지를 2×2 로 */
.svc-product-mosaic{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.svc-product-mosaic img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;background:var(--soft);border:1px solid var(--line)}
/* ⑧ 뉴스룸: 분류 단추는 부제와 비슷한 단계로, 단추마다 한 줄(넘치면 줄을 바꿔 다음 줄로). 카드 글자도 키움 */
.news-filter{gap:10px 12px}
.news-filter button{padding:11px 22px;white-space:nowrap}
.news-tags-row span{padding:4px 11px}
/* ⑥-2 바닥값 규칙에 걸리지 않는 글자(div 안 번호, 20px 아래 소제목)를 따로 올림 */
/* en-layout 이 1051~1240px 영어 사례 카드 제목을 18px 로 줄였던 것 → 바닥값 20px (products-2 와 같은 값) */
/* ⑥-3 글만 있는 구역 옆이 비어 보이던 곳(고객 의견 「옆에 공간 많은데」, 1440·1100px 실측으로 찾음).
글을 한 줄로 길게 늘이지 않고 역할별로 한 가지 방식만 씀
- 페이지 첫 소개문(.service-story-intro .lead, 서비스 6장): 제목이 따로 없는 한 덩어리 글이라 칸을 나눌 수 없음 →
한글은 본문 폭 끝까지(26px 에서 한 줄 약 48자, 한글 읽기 폭 안). 영어는 같은 폭이면 한 줄 90자가 넘어 75ch 로 제한
- 제목+설명만 있고 아래에 다른 내용이 없는 구역(.split.no-media, 표준화 「6G」 구역): 넓은 화면에서
「제목 | 설명」 두 칸(왼쪽 5 : 오른쪽 7). 고객사례 상세의 사진 없는 구역(AWS Challenge|본문)과 같은 배치.
오른쪽 설명은 반쪽 칸 부제와 같은 24px */
.service-story-intro .lead{max-width:none}
html[lang="en"] .service-story-intro .lead{max-width:75ch}
@media(min-width:1051px){
.split.no-media{max-width:none}
.split.no-media>div,.standard-text-section{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:72px;align-items:start}
.split.no-media>div>h2{grid-column:1;grid-row:1/span 3;margin:0}
.split.no-media>div>:not(h2){grid-column:2}
.split.no-media>div>p.section-copy{margin-top:0}
.standard-text-section>:not(p){grid-column:1}
.standard-text-section>h2{margin-bottom:0}
.standard-text-section>p{grid-column:2;grid-row:1/span 2;align-self:start;max-width:none;margin:0}
}
/* ⑨ 고객사례 상세 8장 — 고객이 이 화면에 따로 정한 값(일반 규칙보다 우선). case-template 블록의 값을 덮음 */
/* 목록 번호(01·02)는 15px 이었음. 21px 항목 이름 옆에서 너무 작아 보여 바닥값 20px 로 맞춤 */
.cs-sec ol.cs-list li>span{padding-top:1px}
.cs-list li{grid-template-columns:48px minmax(0,1fr)}
@media(min-width:701px) and (max-width:1050px){
html[lang="en"] .ops-check-lines p{grid-template-columns:8em 1fr}
}
@media(max-width:900px){
a.service-relation.is-linked{grid-template-columns:1fr;gap:6px}
}
@media(max-width:700px){
.service-section.rich .service-body ul{grid-template-columns:minmax(0,1fr)}
.service-section.rich .service-body ul>li:nth-child(n){padding:13px 0 15px}
.ops-check-lines p,html[lang="en"] .ops-check-lines p{grid-template-columns:minmax(0,1fr);gap:4px}
a.service-relation.is-linked{padding:22px 0}
.svc-product-mosaic{gap:8px}
.cs-list li{grid-template-columns:38px minmax(0,1fr)}
.news-filter button{padding:8px 16px;}
/* 휴대폰 바닥값 16px: 390px 에서 실측해 16px 아래로 남은 곳만 올림(12~15px → 16px).
body:not(.page-home) 를 붙여 앞 블록의 휴대폰 규칙보다 점수를 높임 */
}
/* === /type-scale === */
/* === chrome-3 (2026-10-15) ===
검토 의견 반영: 바닥글 여백 줄임·로고 세로 가운데·바로가기 줄 삭제(footer.html) / 언어 단추도 다른 메뉴처럼 강조 /
고객사례 상세 「관련 제품 및 서비스」 카드에 배경 사진 + 어두운 덮개. 글자 크기는 바꾸지 않음 */
/* 1) 바닥글: 위아래 여백과 줄 간격을 줄이고, 왼쪽 로고를 오른쪽 회사 정보 덩어리의 세로 가운데에 둠 */
.site-footer{padding:44px 0 0}
.site-footer .footer-top{align-items:center;gap:24px 64px}
.site-footer .footer-body .footer-info{gap:2px}
.site-footer .footer-body .footer-info>div:nth-child(n){line-height:1.6}
.site-footer .footer-bottom{margin-top:32px;padding:18px 0 32px}
@media(max-width:1050px){
.site-footer .footer-top{align-items:start}
/* 떠 있는 [문의하기] 단추(높이 44px)가 저작권 줄을 가리지 않게 chrome-2 의 아래 여백은 유지하되 조금 줄임 */
.site-footer .footer-bottom{padding-bottom:76px}
}
@media(max-width:700px){
.site-footer{padding-top:32px}
.site-footer .footer-top{gap:20px}
.site-footer .footer-bottom{margin-top:24px;padding-top:16px}
}
/* 2) 상단 언어 단추(KR▾/EN▾): 다른 메뉴와 같은 규칙.
올리거나 열면 진한 흰색 800, 다른 메뉴를 올리면 흐리게(.5). 언어 목록을 열 때도 머리말이 남색이 되고
남색 판이 내려오며 목록은 판 위에 흰 글자로 뜸(판 높이는 site.js fitPanel 이 언어 목록 높이로 맞춤) */
@media(min-width:1051px){
#siteHeader .main-nav>.language>.lang-button{transition:opacity .2s,color .2s,font-weight .2s}
#siteHeader .main-nav:has(>.nav-group:not(.language):hover,>.nav-group:not(.language).is-open,>.nav-link:hover)>.language:not(:hover):not(.is-open)>.lang-button{opacity:.5}
#siteHeader .main-nav>.language:hover:not(.nav-hold-closed)>.lang-button,
#siteHeader .main-nav>.language.is-open>.lang-button{opacity:1;color:#fff;font-weight:800}
/* 언어를 올렸거나 열었을 때 나머지 메뉴는 흐리게 */
#siteHeader .main-nav:has(>.language:hover:not(.nav-hold-closed),>.language.is-open)>.nav-group:not(.language):not(:hover):not(.is-open)>.nav-link,
#siteHeader .main-nav:has(>.language:hover:not(.nav-hold-closed),>.language.is-open)>.nav-link:not(:hover){opacity:.5}
/* 머리말 남색·로고 흰색·문의하기 테두리·내려오는 판·화면 덮개 */
.site-header:has(.main-nav>.language:hover:not(.nav-hold-closed),.main-nav>.language.is-open){background:var(--navy2);color:#fff;box-shadow:none}
.site-header:has(.main-nav>.language:hover:not(.nav-hold-closed),.main-nav>.language.is-open) .brand img{filter:brightness(0) invert(1)}
.site-header:has(.main-nav>.language:hover:not(.nav-hold-closed),.main-nav>.language.is-open) .nav-contact{border-color:rgba(255,255,255,.55);color:#fff}
.site-header:has(.main-nav>.language:hover:not(.nav-hold-closed),.main-nav>.language.is-open):before{height:calc(var(--nav-panel,140px) + 16px);border-top:1px solid rgba(255,255,255,.1)}
.site-header:has(.main-nav>.language:hover:not(.nav-hold-closed),.main-nav>.language.is-open):after{opacity:1;visibility:visible}
/* 언어 목록: 흰 상자 대신 판 위에 글자만, 단추 오른쪽 끝에 맞춤 */
#siteHeader .main-nav>.language>.lang-menu{top:100%;right:0;left:auto;width:max-content;min-width:0;padding:28px 0;background:transparent;border:0;box-shadow:none;color:#fff;z-index:2}
#siteHeader .main-nav>.language.nav-hold-closed:not(.is-open)>.lang-menu{opacity:0;visibility:hidden}
#siteHeader .main-nav>.language>.lang-menu a{display:block;padding:7px 0;text-align:right;color:rgba(255,255,255,.78);background:none;white-space:nowrap}
/* 지금 언어(aria-current)는 다른 하위 메뉴와 같이 흰 글씨+밑줄(흰 상자용 회색 바탕·왼쪽 파란 줄은 뺌) */
#siteHeader .main-nav>.language>.lang-menu a:hover,#siteHeader .main-nav>.language>.lang-menu a:focus-visible,#siteHeader .main-nav>.language>.lang-menu a[aria-current]{color:#fff;background:none;box-shadow:none;text-decoration:underline;text-underline-offset:5px}
}
/* 3) 고객사례 상세 「관련 제품 및 서비스」 카드: 연결 대상의 사진을 깔고 위아래로 어두운 덮개(흰 글자가 잘 읽히게).
사진은 카드 안 (꾸밈용이라 빈 alt). 덮개는 카드 :before */
.cs-related .cs-card{position:relative;isolation:isolate;overflow:hidden;min-height:260px;background:#0b1e2c;color:#fff}
.cs-related .cs-card:hover{background:#0b1e2c}
.cs-related .cs-card-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
/* 글자가 카드 위쪽에 있어 위쪽도 충분히 어둡게(화면 캡처처럼 복잡한 사진에서도 읽히도록) */
.cs-related .cs-card:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(5,20,32,.62) 0%,rgba(5,20,32,.45) 50%,rgba(5,20,32,.8) 100%);transition:opacity .3s}
.cs-related .cs-card:after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(5,20,32,.12);opacity:0;transition:opacity .3s}
.cs-related .cs-card:hover:after{opacity:1}
.cs-related .cs-card:hover .cs-card-bg{transform:scale(1.05)}
.cs-related .cs-card-type,.cs-related .cs-card-desc{color:rgba(255,255,255,.86)}
.cs-related .cs-card strong,.cs-related .cs-card-arrow{color:#fff}
.cs-related .cs-card>*:not(.cs-card-bg){text-shadow:0 1px 8px rgba(0,0,0,.35)}
@media(max-width:1050px){.cs-related .cs-card{min-height:240px}}
@media(max-width:700px){.cs-related .cs-card{min-height:200px}}
@media(prefers-reduced-motion:reduce){.cs-related .cs-card-bg{transition:none}.cs-related .cs-card:hover .cs-card-bg{transform:none}}
/* === /chrome-3 === */
/* === prod-nav (2026-10-15) ===
고객 지적: 제품 화면에 비슷하게 생긴 줄이 두 가지 있어 구분이 안 됨.
① DX-Sky 구성 줄(.sky-tabs) — 누르면 다른 화면으로 넘어감(개요·GCS·AI. 하드웨어 탭은 고객 요청으로 뺌)
② 이 페이지 내용 줄(.detail-tabs) — 누르면 같은 화면 안에서 아래 구역으로 내려감
구분 원칙: "다른 화면으로 가는 것은 제목 영역에 붙어 있고, 지금 화면 안을 오가는 것은 따라다닌다"
- ① 은 제목 바로 아래 고정 머리글처럼 둠. 붙어 다니지 않음(스크롤하면 제목과 함께 올라감).
왼쪽에 「DX-Sky 구성」 이름표(처음엔 "제품군"이었으나 고객: 한 제품의 기능 소개라 맞지 않음) + 세로 구분선, 큰 글자 탭, 고른 화면은 진한 글자 + 3px 밑줄
- ② 는 둥근 칩 모양으로 바꿔 탭과 생김새부터 다르게 함. 왼쪽에 「이 페이지 내용」 이름표,
칩마다 ↓ 표시(아래로 내려간다는 뜻), 머리글 아래에 붙어 다니며 지금 읽는 구역의 칩이 채워짐.
칩 글자는 20px(본문 최소 20px 규칙. 휴대폰은 사이트 공통 최소 크기 규칙대로 16px), 줄바꿈 없이 넘치면 옆으로 넘김
예전 규칙(.sky-tabs 붙어 다님, .sky-tabs~.detail-tabs 고정 해제)은 이 블록이 덮어씀 */
:root{--page-nav-h:71px}
/* ① DX-Sky 구성(화면 전환) */
.sky-tabs{position:relative;top:auto;z-index:2}
.sky-tabs-list{align-items:stretch;gap:4px}
.sky-tabs-label{position:relative;display:flex;align-items:center;gap:10px;margin-right:12px;padding-right:24px;font-weight:700;letter-spacing:.01em;color:var(--blue);white-space:nowrap}
/* 네 칸 아이콘 = 여러 화면이 묶여 있다는 표시 */
.sky-tabs-label::before{content:"";flex:none;width:14px;height:14px;background:
linear-gradient(currentColor,currentColor) 0 0/6px 6px no-repeat,
linear-gradient(currentColor,currentColor) 8px 0/6px 6px no-repeat,
linear-gradient(currentColor,currentColor) 0 8px/6px 6px no-repeat,
linear-gradient(currentColor,currentColor) 8px 8px/6px 6px no-repeat}
.sky-tabs-label::after{content:"";position:absolute;right:0;top:50%;width:1px;height:28px;margin-top:-14px;background:var(--line)}
.sky-tabs a{padding:22px 24px 21px;border-bottom-width:3px}
.sky-tabs a::after{font-weight:700}
.sky-tabs a[aria-current="page"]{color:var(--navy);font-weight:700;border-bottom-color:var(--navy)}
/* 화면 전환 줄이 붙어 다니지 않으므로 구역 이동 시 비켜 설 높이는 머리글만 */
.sky-tabs~.detail-section,.sky-tabs~.sky-family-section{scroll-margin-top:calc(var(--header) + 16px)}
/* ② 이 페이지 내용(구역 이동) */
.detail-tabs,.sky-tabs~.detail-tabs{position:sticky;top:var(--header);z-index:55;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 6px 16px rgba(11,34,50,.05)}
.detail-tabs .wrap{display:flex;align-items:center;gap:10px;padding:12px 3px;overflow-x:auto}
.page-nav-label{flex:none;margin-right:6px;font-weight:700;color:var(--t3);white-space:nowrap}
.detail-tabs a{flex:0 0 auto;min-width:0;display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border:1px solid #c6d2db;border-radius:999px;background:#fff;font-weight:500;color:var(--t3);text-align:left;white-space:nowrap;transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.detail-tabs a::after{content:"↓";content:"↓" / "";font-size:16px;line-height:1;opacity:.55}
.detail-tabs a:hover{border-color:var(--blue);color:var(--navy)}
.detail-tabs a.active{background:var(--navy);border-color:var(--navy);color:#fff}
.detail-tabs a.active::after{opacity:.8}
.detail-tabs a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* 칩 줄 아래로 제목이 숨지 않게: 머리글 + 칩 줄 높이만큼 비켜 섬 */
.detail-tabs~.detail-section{scroll-margin-top:calc(var(--header) + var(--page-nav-h) + 16px)}
@media(max-width:700px){
:root{--page-nav-h:63px}
.sky-tabs-label{margin-right:4px;padding:0 16px 0 12px;}
.sky-tabs a{padding:14px 14px 13px;}
.detail-tabs .wrap{gap:8px;padding:10px 3px}
.page-nav-label{margin-right:2px;}
.detail-tabs a{padding:6px 14px}
}
/* 넓은 화면(1280px 이상): 「이 페이지 내용」을 노션 목차처럼 왼쪽 여백에 작은 회색 목록으로 띄움(고객 제안).
- 칩 줄 대신 본문 왼쪽 248px 을 비우고 그 자리에 목록을 둠. 목록은 높이 0 인 붙어 다니는 줄 안에 걸려 있어
본문을 밀어내지 않고, 머리글 아래 40px(목록 위 여백) 에 멈춰 따라다님. 여백을 위치값이 아닌 목록 안쪽에 둬서 처음 자리(제목·탭 바로 아래)에서도 40px 떨어짐
- 글자는 17px(보조 화면 요소라 본문 최소 20px 규칙에서 뺌 → 사이트 공통 최소 크기 규칙을 !important 로 덮음),
지금 구역은 진한 글자 + 굵게 + 왼쪽 2px 진한 선
- 마지막 구역을 지나면(문의 띠·다른 블록 위) 목록을 숨김(JS 가 .toc-out 를 붙임)
1280px 미만은 왼쪽 여백이 없어 위의 칩 줄을 그대로 씀 */
@media(min-width:1280px){
.detail-tabs,.sky-tabs~.detail-tabs{position:sticky;top:var(--header);height:0;z-index:20;background:none;border:0;box-shadow:none}
.detail-tabs::before,.detail-tabs::after{display:none}
.detail-tabs .wrap{display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:40px 0 0;overflow:visible;transition:opacity var(--t-base),visibility var(--t-base)}
.detail-tabs.toc-out .wrap{opacity:0;visibility:hidden}
.page-nav-label{width:220px;margin:0 0 10px;letter-spacing:.02em;color:var(--t2)}
.detail-tabs a{display:block;width:220px;padding:7px 0 7px 16px;border:0;border-left:2px solid var(--line);border-radius:0;background:none;font-weight:400;color:var(--t2);white-space:normal}
.detail-tabs a::after{content:none}
.detail-tabs a:hover{color:var(--ink);border-left-color:#9fb1bf}
.detail-tabs a.active{background:none;color:var(--ink);font-weight:700;border-left-color:var(--navy)}
.detail-tabs~.detail-section:not(.back-section)>.wrap{padding-left:248px}
.detail-tabs~.detail-section{scroll-margin-top:calc(var(--header) + 24px)}
}
/* 제품 화면 제목 영역 아래 여백(고객: "밑에 padding 좀 더 줘") — 전에는 24px(휴대폰 12px) */
body.page-product .sub-hero .wrap{padding-bottom:64px}
@media(max-width:700px){body.page-product .sub-hero .wrap{padding-bottom:40px}}
/* === /prod-nav === */
/* === final-touch (2026-10-15) === */
/* 언어 목록이 남색 판 위에서 다른 하위 메뉴(20px)보다 작아 보여 맞춤 */
@media(min-width:1051px){#siteHeader .lang-menu a{font-size:20px}}
/* 바닥글 저작권 줄: 여백이 넓고 글자가 크다는 의견 → 줄이고 작게 (검토 메모 50) */
.site-footer .footer-bottom{margin-top:20px;padding:14px 0 18px}
.site-footer .footer-bottom span{font-size:14px}
@media(max-width:1050px){.site-footer .footer-bottom{padding-bottom:64px}}
/* 회사소개: 제목 바로 아래 큰 제목이 또 붙어 제목이 두 번 쌓여 보였음. 이야기 옆 실제 사진(APT 회의 의장석)을 제목 아래 대표 사진으로 올리고,
이야기 구역은 사진 없이 「제목 | 본문」 두 칸으로 나눔 (고객사례·서비스의 사진 없는 구역과 같은 배치) */
.story-grid.no-media{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(40px,5vw,96px);row-gap:0;align-items:start}
.story-grid.no-media .story-copy{display:contents}
.story-grid.no-media .story-copy>h2{grid-column:1;grid-row:1 / span 6;margin:0}
.story-grid.no-media .story-copy>p{grid-column:2;margin:0 0 20px;}
@media(max-width:1050px){.story-grid.no-media{display:block}.story-grid.no-media .story-copy>h2{margin-bottom:24px}}
/* 회사소개 사업 목록: 아래 제품·서비스 이름 줄을 지움(메모 56). 번호·분야명을 오른쪽 설명 높이에 맞춰 세로 가운데로(메모 57) */
.business-index-row{align-items:center}
/* 고객사례 목록 분류 머리: 설명이 좁은 칸에 갇혀 옆이 비어 보였음(메모 58~60) → 「제목 | 설명」 두 칸 */
@media(min-width:1051px){
.case-group-head>div{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(40px,5vw,96px);align-items:start}
.case-group-head>div>h2{margin:0}
.case-group-head>div>p{margin:0;max-width:none;}
}
/* 회사·연구개발의 이야기 본문 22px (메모: 「산업의 변화에서…」 본문은 22는 돼야). 같은 역할의 다른 이야기 구역도 함께 */
/* === /final-touch === */
/* === ocean-2 (2026-10-15) ===
DX-Ocean 「통신 상태를 수집하고…」 그래프 두 장 + 논문 그림 인용 캡션.
- 논문 그림(밋밋한 matplotlib 그림)을 이미지로 붙이지 않고, 같은 수치를 HTML 막대로 다시 그림.
글자가 진짜 글자라 화면 폭이 줄어도 작아지지 않음(데스크톱 20px 바닥값 규칙이 그대로 걸림)
- 색: 남색(--navy2) = 좋은 상태/이동통신, 옅은 파랑 = 중간, 회색 = 없음/낮음, 청록 = 강조(6~7 dB·저장 후 전송)
- 캡션: 설명 한 줄 + 인용 한 줄(APA, DOI·라이선스 링크, 변경 여부) */
.ocean-charts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;margin-top:40px;align-items:stretch}
/* 카드와 캡션을 두 줄 격자(subgrid)로 묶어, 캡션 길이가 달라도 두 카드 아래 끝이 맞게 함 */
.ocean-chart-fig{margin:0;min-width:0;display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0}
.ocean-chart{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;padding:32px 32px 26px;box-shadow:0 10px 30px rgba(11,42,64,.06)}
.ocean-chart .oc-kicker{display:block;font-weight:700;letter-spacing:.02em;color:var(--blue)}
.ocean-chart .oc-title{margin:6px 0 10px;color:var(--navy);letter-spacing:-.02em}
.ocean-chart .oc-lead{color:#334a59;margin:0 0 22px;max-width:none}
.oc-legend{list-style:none;display:flex;flex-wrap:wrap;gap:6px 20px;padding:0;margin:0 0 14px}
.oc-legend li{display:flex;align-items:center;gap:8px;color:#334a59}
.oc-dot{display:inline-block;flex:none;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.oc-legend .oc-dot{margin-right:0}
.ocean-chart .q{background:var(--navy2)}
.ocean-chart .b{background:#a9cbe3}
.ocean-chart .n,.ocean-chart .lo{background:#dfe5ea}
.ocean-chart .s,.ocean-chart .mid{background:#19a3c4}
.ocean-chart .hi{background:var(--navy2)}
.oc-colhead{display:flex;justify-content:space-between;gap:12px;padding:0 0 8px;border-bottom:1px solid var(--line);font-weight:600;color:var(--muted)}
.oc-rows{list-style:none;padding:0;margin:0}
.oc-rows>li{padding:12px 0 13px;border-bottom:1px solid #edf1f4}
.oc-rows>li.is-key{background:#eef8fb;margin:0 -14px;padding-left:14px;padding-right:14px;border-radius:8px;border-bottom-color:transparent}
.oc-row-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.ocean-chart .oc-label{flex:1;min-width:0;font-weight:600;color:var(--ink)}
.oc-side{color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.ocean-chart .oc-cell{margin:-4px 0 14px;color:var(--muted)}
.ocean-chart .oc-val{font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums;white-space:nowrap}
.oc-bar{display:flex;height:14px;margin:8px 0 6px;border-radius:7px;overflow:hidden;background:#edf1f4}
.oc-bar>i{display:block;height:100%;min-width:2px}
.oc-bar>i+i{box-shadow:inset 2px 0 0 #fff}
.oc-sub{display:flex;flex-wrap:wrap;align-items:center;gap:2px 0;color:var(--muted)}
.oc-sub b{margin:0 16px 0 6px;font-weight:700;color:#334a59;font-variant-numeric:tabular-nums}
.oc-block-h{display:block;margin:0 0 4px;font-weight:700;color:var(--navy)}
.oc-block+.oc-block{margin-top:28px}
.oc-block .oc-bar{height:22px;border-radius:6px;margin:10px 0 10px}
.oc-dist{list-style:none;display:flex;flex-wrap:wrap;gap:4px 22px;padding:0;margin:0}
.oc-dist li{display:flex;align-items:center;color:var(--muted)}
.oc-dist b{margin-left:6px;font-weight:800;color:#334a59}
.oc-dist li:nth-child(2) b{color:#0d7f9b}
.ocean-chart .oc-note{margin:auto 0 0;padding-top:18px;color:var(--muted)}
.ocean-charts-note{margin:20px 0 0;color:var(--muted)}
/* 캡션: 설명(진한 글자) + 인용(옅은 글자, 링크 밑줄). 그래프 아래와 사진 아래 모두 같은 모양 */
.fig-cite{margin-top:14px;color:var(--muted)}
.ocean-chart-fig .fig-cite{padding:0 4px}
.fig-cite .fig-desc{display:block;color:#334a59;font-weight:600}
.fig-cite .fig-credit{display:block;margin-top:4px}
.fig-cite a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.fig-cite a:hover{color:var(--navy)}
.fig-cite .fig-doi{overflow-wrap:anywhere}
@media(max-width:900px){.ocean-charts{grid-template-columns:minmax(0,1fr)}.ocean-chart-fig+.ocean-chart-fig{margin-top:36px}}
@media(max-width:700px){
.ocean-charts{margin-top:28px}
.ocean-chart-fig+.ocean-chart-fig{margin-top:32px}
.ocean-chart{padding:22px 18px 18px;border-radius:14px}
.ocean-chart .oc-lead{margin-bottom:18px}
.oc-rows>li.is-key{margin:0 -10px;padding-left:10px;padding-right:10px}
}
/* 「연결이 불안정한 해상에서도…」 개념도: 로 휴대폰은 세로 그림. picture 가 인라인이라 아래 틈이 생기지 않게 */
.ocean-architecture .media picture{display:block}
/* === /ocean-2 === */
/* === cs-story-pad (2026-10-15, 사용자 지정 값) === */
.cs-story{padding:clamp(80px,9vw,80px) 0 clamp(80px,9vw,80px)}
/* === /cs-story-pad === */
/* DX-Sky GCS 실제 화면(1568×710, 약 2.2:1) — 기존 고정 높이(420px/300px)에서는 잘리거나 위아래가 비어 보여
원본 비율 그대로 보이게 함 (2026-10-15) */
.sky-showcase-media img.shot{height:auto;aspect-ratio:3/2;object-fit:cover}
.sky-asset-grid img[src*="dx-sky/gcs/"]{height:auto;aspect-ratio:16/9;object-fit:cover;object-position:top}
/* GCS 상세 — 잘라낸 화면(3:2)은 원본 해상도 그대로 보이게 하고, 어두운 화면이 흰 바탕에 떠 보이지 않게 얇은 선을 둠 */
.sky-showcase-media img.shot.crop{aspect-ratio:3/2;object-fit:contain;border:1px solid var(--line)}
.sky-showcase-copy h3{margin:0 0 14px}
.sky-showcase-copy .bullet-list{margin-top:18px}
.sky-showcase-media img.shot.crop.free{aspect-ratio:auto}
/* GCS 특별한 기능 — 화면 열을 넓혀 화면 속 글자가 읽히는 크기(약 760px)로 보이게 함. 좁은 화면은 기존 1열 규칙을 그대로 따름 */
@media(min-width:901px){
#gcs-special .sky-showcase{grid-template-columns:1.5fr .8fr;gap:48px}
#gcs-special .sky-showcase.reverse{grid-template-columns:.8fr 1.5fr}
}
#gcs-special .feature-lines{margin-top:72px}
/* GCS 기본 기능 — 작은 화면 여러 장을 설명과 함께 나열 */
.gcs-basic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 20px;margin:36px 0 56px}
.gcs-basic-grid figure{margin:0}
.gcs-basic-grid img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border:1px solid var(--line)}
.gcs-basic-grid figcaption{margin-top:12px}
.gcs-basic-grid strong{display:block;}
.gcs-basic-grid figcaption span{display:block;margin-top:4px;color:var(--muted)}
@media(max-width:900px){.gcs-basic-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.gcs-basic-grid{grid-template-columns:1fr}}
.detail-section .gcs-basic-title{margin:48px 0 0;}
#sky-gcs .gcs-basic-grid{margin-bottom:36px}
/* GCS 특별한 기능 — 화면이 없는 페어링 블록(단계 흐름 + 항목) */
#gcs-special .gcs-pairing{padding:0}
#gcs-special .gcs-pairing .sky-showcase{border-bottom:0;padding-bottom:30px}
#gcs-special .gcs-pairing .mission-lifecycle{margin-top:0}
/* DX-Sky 개요 — 강점 4칸은 2×2로 배치(왼쪽 열이 좁아 4열로는 글이 깨짐) */
@media(min-width:901px){
#sky-overview .feature-lines{grid-template-columns:repeat(2,minmax(0,1fr))}
#sky-overview .feature-line,#sky-overview .feature-line+.feature-line{padding:24px 28px 20px 0;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
#sky-overview .feature-line:nth-child(even){padding-left:28px;border-right:0}
}
/* DX-Sky Drone 시스템 구성도 — 코드로 그린 SVG(번역·확대에 강함). 색은 사이트 토큰을 따름 */
.drone-diagram{margin-top:8px;overflow-x:auto}
.drone-diagram .dd-svg{display:block;width:100%;min-width:1040px;height:auto;font-family:Pretendard,"Noto Sans KR","Malgun Gothic",Arial,sans-serif}
.dd-svg .dd-mask{fill:#fff}
.dd-svg .dd-zone{fill:none;stroke:rgba(13,28,43,.2);stroke-width:.8;stroke-dasharray:4 4}
.dd-svg .dd-plain{fill:#fff;stroke:var(--ink);stroke-width:1}
.dd-svg .dd-ext{fill:rgba(13,28,43,.03);stroke:rgba(13,28,43,.32);stroke-width:1}
.dd-svg .dd-focal{fill:rgba(10,111,168,.08);stroke:var(--blue);stroke-width:1.4}
.dd-svg .dd-line{fill:none;stroke:var(--muted);stroke-width:1.2}
.dd-svg .dd-wireless{stroke-dasharray:5 4}
.dd-svg .dd-head{fill:var(--muted)}
.dd-svg .dd-rule{stroke:rgba(13,28,43,.14);stroke-width:.8}
.dd-svg .dd-dot{fill:var(--blue)}
.dd-svg text{fill:var(--ink)}
.dd-svg .dd-name{font-size:14px;font-weight:600}
.dd-svg .dd-title{font-size:16px;font-weight:700}
.dd-svg .dd-item{font-size:13px;font-weight:500}
.dd-svg .dd-sub,.dd-svg .dd-zonelabel,.dd-svg .dd-label{font-size:12px;font-weight:500;fill:var(--t3)}
.dd-svg .dd-mono{font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;font-size:11px;fill:var(--t3)}
.dd-svg .dd-cap{font-size:14px;font-weight:700}
.dd-svg .dd-captext{font-size:13px;fill:var(--t2)}
/* DX-Sky 개요 — 하드웨어 요약 항목 */
#sky-hardware .bullet-list{margin-top:28px}
.alerti-doc-links{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:16px}
.alerti-doc-links span{margin-right:2px;color:var(--t2)}
.alerti-doc-link{display:inline-flex;align-items:center;padding:4px 10px;border:1px solid var(--line,#d8dde7);border-radius:999px;font-weight:500;color:var(--blue);text-decoration:none;transition:background-color .2s,color .2s,border-color .2s}
.alerti-doc-link:hover,.alerti-doc-link:focus-visible{background:var(--blue);border-color:var(--blue);color:#fff}
.alerti-store-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.alerti-store-links+.alerti-doc-links{margin-top:10px}
.alerti-store-badge{display:inline-flex;align-items:center;border-radius:8px;transition:opacity .2s}
.alerti-store-badge img{display:block;width:auto}
.alerti-store-badge.is-google img{margin:-7px -5px}
.alerti-store-badge:hover,.alerti-store-badge:focus-visible{opacity:.86}
/* === home-tune-2 (2026-10-16) === */
/* 고객사례 화살표: 흰 원 배경 없이 투명한 진회색 꺾쇠. 카드 바깥에 여유를 두고 놓음 */
.case-carousel .carousel-arrow{top:calc(50% - 44px);width:40px;height:88px;border:0;border-radius:0;background:transparent;box-shadow:none;color:#5f6a73}
.case-carousel .carousel-arrow svg{width:20px;height:56px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.case-carousel .carousel-arrow.prev{left:-58px}
.case-carousel .carousel-arrow.next{right:-58px}
/* 바깥 여백(32px)이 좁은 폭에서는 화면 밖으로 나가지 않게 당김 */
@media(max-width:1400px){.case-carousel .carousel-arrow.prev{left:-32px}.case-carousel .carousel-arrow.next{right:-32px}}
.case-carousel .carousel-arrow:hover{transform:scale(1.08)}
.case-carousel .carousel-arrow:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* 고객 및 협력기관: 한국항공우주연구원 누리집 하단 「배너모음」(높이 80px)에 맞춤. 로고도 같은 비율로 줄임(52 → 40px) */
.trust-banner-inner{min-height:80px;padding:8px 0}
.trust-item{height:48px}
.trust-item img{height:40px}
@media(max-width:900px){.trust-banner-inner{padding:16px 0}.trust-item{height:40px}.trust-item img{height:32px}}
/* 꼬리말: 위 여백과, 정보와 저작권 줄 사이 여백을 줄임 */
.site-footer{padding-top:32px}
.site-footer .footer-bottom{margin-top:12px;padding:10px 0 14px}
@media(max-width:1050px){.site-footer .footer-bottom{padding-bottom:64px}} /* 떠 있는 [문의하기] 단추가 저작권 줄을 가리지 않게 유지 */
@media(max-width:700px){.site-footer{padding-top:26px}}
@media(max-width:700px){.case-carousel .carousel-arrow.prev{left:-16px}.case-carousel .carousel-arrow.next{right:-16px}}
/* 꼬리말: 저작권 줄 위 선을 없앰. 회사명도 다른 항목과 같은 크기·굵기로 */
.site-footer .footer-bottom{border-top:0}
.site-footer .footer-body .footer-info>div:first-child span{font-size:18px;font-weight:400;color:#dfe8ee}
.site-footer .footer-logo{width:150px}
@media(max-width:1050px){.site-footer .footer-logo{width:140px}}
@media(max-width:700px){.site-footer .footer-logo{width:120px}}
/* 사진 카드 글자 크기를 사이트 전체에서 같게 (제목 26px, 설명 20px) */
/* 단추 글씨와 뉴스 제목: 본문 최소 20px 기준에 맞춤 */
/* === /home-tune-2 === */
/* === card-zones (2026-10-16) === */
/* 사진 위에 제목과 설명을 얹는 카드: 제목 칸과 설명 칸을 나눔 (사이트 전체)
- 제목 칸은 높이를 정해 두고 세로 가운데 맞춤 → 한 줄이든 세 줄이든 같은 자리
- 설명 칸은 위쪽 맞춤, 두 칸 사이에 흰 선
- 칸 높이는 --zt(제목), --zd(설명)로 정함. 영문은 기관명·설명이 길어 더 크게
대상: .image-card(고객사례·과정·사례 목록), .field-card(첫 화면 사업분야), .cs-related .cs-card(사례 상세 관련 제품) */
.image-card,.field-card{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr var(--zt) var(--zd);justify-content:stretch;padding:22px 22px 20px}
.image-card h3,.field-card h3{grid-row:2;align-self:center;display:block;min-height:0;margin:0;white-space:normal;overflow-wrap:break-word}
.image-card p,.field-card p{grid-row:3;align-self:start;min-height:0;margin:0;padding-top:12px;border-top:1px solid rgba(255,255,255,.6)}
/* 예전 home-tune 규칙(.case-grid .image-card h3{min-height:2.5em;display:flex;align-items:flex-end})이 제목을 칸 바닥에 붙이던 것을 사이트 전체에서 풂 */
html body .case-grid .image-card h3{min-height:0;display:block}
html body .case-grid .image-card p{min-height:0}
/* 칸 높이(--zt·--zd)와 관련 카드 제목 칸은 type-v4 에서 줄 수로 계산함 */
.cs-related .cs-card{display:grid;grid-template-columns:minmax(0,1fr)}
.cs-related .cs-card-type{grid-row:1}
.cs-related .cs-card strong{grid-row:2;align-self:center;margin:0}
.cs-related .cs-card-desc{grid-row:3;align-self:start;margin:0;padding-top:12px;border-top:1px solid rgba(255,255,255,.6)}
.cs-related .cs-card-arrow{grid-row:4}
/* === /card-zones === */
/* === kv-bound (2026-10-16) === */
/* 제목 아래 큰 사진(.page-kv): 다 펼쳤을 때 사진 왼쪽 끝을 아래 본문(.wrap) 왼쪽 시작선에 맞춤 (사이트 전체)
- 원래 왼쪽 여백 12.5vw 는 화면 폭 비율이라 본문 시작선과 따로 놂.
1440px 에서는 사진 180px / 본문 80px 로 안쪽에서 멈추고, 1707px 보다 넓으면 본문보다 더 왼쪽까지 펼쳐짐(1920px: 사진 240 / 본문 320)
- .wrap 과 같은 식으로 왼쪽 여백을 계산: (전체 폭 - min(--max, 전체 폭 - 64px)) / 2. % 는 .wrap 과 같은 부모 폭 기준이라 스크롤바가 있어도 같이 맞음
- 오른쪽은 참고 화면대로 화면 끝까지 그대로 둠. 흰 막은 상자 왼쪽에서 걷히므로 펼침이 끝나는 곳 = 본문 시작선
- 767px 이하는 기존 값(32px, 700px 이하 16px)이 이미 본문 여백과 같아 건드리지 않음 */
@media(min-width:768px){
.page-kv-box{margin-left:calc((100% - min(var(--max), 100% - 64px)) / 2)}
}
/* === /kv-bound === */
/* === products-3 (2026-10-16) === */
/* 제품 목록(/product) 검토 메모 3건
① 제품 항목 뒤 큰 흐린 번호(01~04): 글 쪽 바깥 여백으로 밀어 번호의 절반쯤만 글 영역에 걸치게 함
- 글이 오른쪽(사진 왼쪽, 홀수 항목) → 번호를 글 칸 오른쪽 끝에 두고 오른쪽으로 절반 밀어냄
- 글이 왼쪽(사진 오른쪽, 짝수 항목) → 번호를 글 칸 왼쪽 끝에 두고 왼쪽으로 절반 밀어냄
- 밀어내는 양은 「번호 폭의 절반」과 「화면 옆 여백 - 24px」 중 작은 쪽(스크롤바 폭 여유 포함).
여백이 좁은 1100px 근처에서는 조금만 나가고, 화면 밖으로는 나가지 않음
- 한 칸으로 쌓이는 860px 이하는 원래 자리(products-2 값) 그대로
- 혹시 글꼴 차이로 번호가 화면 끝을 넘더라도 가로 스크롤이 생기지 않게 구역 가로 넘침을 잘라 둠
② 「제품이 적용된 사례」 카드: card-zones 블록의 제목 칸/설명 칸 나눔은 이 화면에도 걸려 있었음.
다만 home-tune 블록의 .case-grid .image-card h3{min-height:2.5em;display:flex;align-items:flex-end}가
card-zones 의 .image-card h3 보다 선택자가 세서 이겨, 제목이 칸 가운데가 아니라 높이 2.5em 상자의
아래쪽에 붙음 → 한 줄 제목은 칸 가운데보다 아래, 두 줄 제목은 가운데에 와서 기준이 어긋남.
이 화면에서만 그 두 값을 풀어 card-zones 의 「제목 칸 세로 가운데」가 그대로 먹게 함(설명 칸 min-height 도 같이 풂)
③ 「제품 도입부터 시스템 구축까지 함께합니다.」 구역: 제목·본문 줄 간격을 넓힘
(제목 1.18 → 1.4, 본문 1.6 → 1.9) */
@media(min-width:861px){
.prod-section{overflow-x:clip}
.prod-item{--prod-num-room:calc(max(32px,(100vw - var(--max)) / 2) - 24px)}
.prod-item:nth-child(odd) .prod-num{left:auto;right:0;transform:translateX(max(0px,min(50%,var(--prod-num-room))))}
.prod-item:nth-child(even) .prod-num{left:0;right:auto;transform:translateX(calc(-1 * max(0px,min(50%,var(--prod-num-room)))))}
}
body.page-products .case-grid .image-card h3{display:block;min-height:0}
body.page-products .case-grid .image-card p{min-height:0}
body.page-products .split.no-media h2.section-title{line-height:1.4}
body.page-products .split.no-media p.section-copy{line-height:1.9}
/* === /products-3 === */
/* === ocean-3 (2026-10-16) ===
DX-Ocean 화면 검토 메모 반영
- 첫 구역(.ocean-intro): 글과 항적 지도 사이가 넓고 좌우가 똑같이 반반이라는 메모 → 지도 쪽을 넓히고 사이를 좁혀 비대칭으로.
1050px 이하는 원래대로 한 줄(위 글, 아래 그림)
- 캡션 설명의 괄호 부분은 다음 줄로(.fig-desc-sub)
- 게이트웨이·단말·개념도 구역(.ocean-stack): 그림을 옆이 아니라 글 아래에 본문 폭 전체로. 글은 900px 까지만(한 줄이 너무 길지 않게)
- 「수집 기능을 장비 환경에 맞게 확장합니다.」 h3 가 26px 로 바로 아래 같은 역할의 h3(.ocean-boundary, 최대 34px)보다 작았음 → 같은 크기
- 그래프 아래 ※ 안내: ※ 뒤로 둘째 줄이 들어가게(내어쓰기). 글자 크기는 본문 바닥값 20px 이라 더 줄이지 않음
- 맨 아래 참고문헌: 그림 캡션은 짧은 인용(저자 et al. (연도), 학술지)만 두고 전체 서지는 여기 한 곳에 */
@media(min-width:1051px){.split.ocean-intro{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:40px}}
.fig-cite .fig-desc-sub{display:block}
.split.ocean-stack{grid-template-columns:minmax(0,1fr);gap:40px;align-items:start}
.split.ocean-stack>div:not(.media){max-width:900px}
.split.ocean-stack>.media{order:0;min-height:0;display:block;background:none}
.split.ocean-stack .media img{height:auto;max-height:none}
.ocean-charts-note{padding-left:1.3em;text-indent:-1.3em}
.ocean-refs{margin-top:64px;padding-top:24px;border-top:1px solid var(--line)}
.detail-section .ocean-refs h3{letter-spacing:0;margin:0 0 8px;color:var(--navy)}
.ocean-refs p{margin:0;line-height:1.6;color:var(--muted)}
.ocean-refs a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;overflow-wrap:anywhere}
@media(max-width:700px){.split.ocean-stack{gap:28px}.ocean-refs{margin-top:44px}}
/* === /ocean-3 === */
/* === safety-3 (2026-10-16) === */
/* ① 왼쪽 「이 페이지 내용」 목차(1280px 이상, prod-nav 블록) — 이 목차를 쓰는 모든 화면 공통
(DX-Sky GCS·Drone·AI, DX-Ocean, DX-Safety, CertMate, 회사 수상·인증)
- 윗선 맞춤: 전에는 목록 위 여백이 40px 이라 첫 구역 위 여백(--space-section, 1440px 에서 112px)보다 72px 위에서 시작함.
목록 위 여백을 첫 구역 위 여백과 같은 값(--toc-top)으로 두어 「이 페이지 내용」 윗선 = 첫 구역 제목 윗선.
대신 따라 붙는 위치(top)를 그만큼 올려, 스크롤해서 붙은 뒤에는 예전처럼 머리글 아래 40px 에 멈춤
- 수상 화면 첫 구역은 위 여백이 76px 로 따로 정해져 있어(#award-prize) 같은 값으로 맞춤
- 위 여백이 커진 만큼 목록 상자의 빈 윗부분이 본문 위를 덮으므로, 빈 부분은 클릭이 본문으로 통과하게 함
- 글자 크기(고객: 「22px 정도로, 전체 페이지 일괄」): 항목 17 → 22px, 「이 페이지 내용」 제목은 같은 비율로 15 → 19px */
@media(min-width:1280px){
.detail-tabs,.sky-tabs~.detail-tabs{--toc-top:var(--space-section);top:calc(var(--header) + 40px - var(--toc-top))}
.detail-tabs:has(+ #award-prize){--toc-top:76px}
.detail-tabs .wrap{padding-top:var(--toc-top);pointer-events:none}
.detail-tabs .wrap>*{pointer-events:auto}
.page-nav-label{margin-bottom:12px}
.detail-tabs a{padding:8px 0 8px 16px}
}
/* ② DX-Safety PWC 구역
- 글 위, 구성도 아래(고객 메모). 구성도는 가로로 긴 그림(1959x709)이라 본문 폭 전체로 펼침. 글 줄 길이는 900px 까지
- 8개 항목 표 → 「경보 판단 / 현장 대응 / 운영과 보안」 세 묶음 카드. 항목 제목만 보이고 설명은 눌러서 펼침(details).
문장은 그대로 두고 묶음 제목 3개만 새로 씀 */
.split.pwc-intro{grid-template-columns:minmax(0,1fr);gap:40px}
.pwc-intro>div:first-child{max-width:900px}
.split.pwc-intro>.media{min-height:0;display:block;background:none}
.split.pwc-intro .media img{height:auto;max-height:none}
.pwc-stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:56px;align-items:stretch}
.pwc-stage{padding:26px 26px 12px;background:#fff;border-top:3px solid var(--navy)}
.pwc-stage-no{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--navy);color:#fff;font-weight:700}
.detail-section .pwc-stage h3{margin:14px 0 10px}
.pwc-item{border-top:1px solid var(--line)}
.pwc-item summary{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:14px 0;list-style:none;cursor:pointer;font-weight:600;color:var(--ink)}
.pwc-item summary::-webkit-details-marker{display:none}
.pwc-item summary::after{content:"+";content:"+" / "";flex:none;font-weight:400;color:var(--blue)}
.pwc-item[open] summary::after{content:"−";content:"−" / ""}
.pwc-item summary:hover{color:var(--navy)}
.pwc-item summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.detail-section .pwc-item p{margin:0 0 16px;color:#435a68}
@media(max-width:1050px){.pwc-stages{grid-template-columns:minmax(0,1fr)}}
/* ③ Alerti 영상 아래 설명: 영상과 같은 폭, 가운데 정렬.
1300px 이상은 이미 영상과 같은 칸(260px). 그 아래(위아래로 쌓임)는 영상 최대 폭 320px 과 같게 */
.alerti-hero-split>.alerti-flow-caption{text-align:center}
@media(max-width:1300px){.alerti-hero-split>.alerti-flow-caption{width:100%;max-width:320px;justify-self:start}}
/* === /safety-3 === */
/* === case-3 (2026-10-16) ===
고객사례 상세 8장(/case-study/<아이디>)과 수상 페이지 검토 메모
① 「고객 소개」 구역 여백: 좌우 80px(1440px)은 .wrap 의 margin:auto 가 만드는 사이트 공통 본문선이라 그대로 둠
(위 큰 사진·아래 01~ 구역과 왼쪽 시작선이 같아야 해서). 넓어 보이던 원인은 이 구역 안쪽 값이었음
- 위 여백 clamp(72px,8vw,120px) = 1440px 에서 115px → clamp(48px,5vw,72px) = 72px
- 글 칸과 「한눈에 보기」 사이 80px + 글 최대 폭 820px(칸 840px)에서 남는 20px = 100px 빈 띠 → 사이 56px, 글은 칸 폭 전체
② 큰 흐린 번호(01·02…): 글 칸 왼쪽 바깥으로 밀어 번호 폭의 절반쯤만 글에 걸치게 함 (products-3 의 제품 번호와 같은 방식)
- 밀어내는 양 = 「번호 폭의 절반」과 「화면 옆 여백 - 24px」 중 작은 쪽. 1440px: 71px 중 56px, 1100px: 8px(옆 여백 32px 이라 거의 제자리)
- 사진이 왼쪽에 있는 구역(.is-flip, 글이 오른쪽)은 왼쪽 바깥이 사진과의 사이(60px)라 사진을 덮지 않게 48px 까지만 밈
- 한 칸으로 쌓이는 900px 이하는 원래 자리 그대로
- 화면 끝을 넘더라도 가로 스크롤이 생기지 않게 구역 가로 넘침을 잘라 둠
③ 수상 페이지 항목 제목(표창·국제기구 활동·특허·상표 목록의 굵은 제목) 20px → 26px. 설명 글은 그대로.
type-scale 의 바닥값 규칙(선택자 점수가 높음)을 이기려고 구역 id 로 지정. 휴대폰(700px 이하)은 22px */
.cs-overview{padding-top:clamp(48px,5vw,72px)}
.cs-overview-grid{column-gap:56px}
.cs-about h2,.cs-about p{max-width:none}
@media(min-width:901px){
.cs-story{overflow-x:clip}
.cs-sec{--cs-num-room:calc(max(32px,(100vw - var(--max)) / 2) - 24px)}
.cs-num{left:0;transform:translateX(calc(-1 * max(0px,min(50%,var(--cs-num-room)))))}
.cs-sec.is-flip .cs-num{transform:translateX(-48px)}
}
/* === /case-3 === */
/* === cases-list-3 (2026-10-16) ===
고객사례 목록(/case-study) 검토 메모 3건
① 묶음 설명문: final-touch 의 「제목 | 설명」 두 칸(1051px 이상)을 풀고 제목 바로 아래로. 글자 크기는 건드리지 않음
② 카드: 줄 폭에 맞춰 늘어나던 카드(1440px 기준 3장 417x255 = 1.64:1, 2장 633x255 = 2.48:1)를
폭 360px 상한·가로세로 5:4 로 고정. 1·2·3장 묶음 모두 같은 크기로 왼쪽부터 채움
③ 카드 사이 14px → 48px (701~1050px 는 32px, 700px 이하 한 줄 쌓기는 24px)
④ 카드가 좁아져 글이 늘어나는 만큼 제목 칸(--zt)·설명 칸(--zd)을 이 화면만 조정 */
@media(min-width:1051px){
body.page-cases .case-group-head>div{display:block}
body.page-cases .case-group-head>div>p{margin:16px 0 0;max-width:900px}
}
body.page-cases .case-grid{grid-template-columns:repeat(3,minmax(0,360px));gap:48px;justify-content:start}
body.page-cases .case-grid .image-card{min-height:0;aspect-ratio:5/4}
/* 영문은 설명이 최대 5줄(동문이엔티)이라 5:4 로는 사진 자리가 거의 0 → 정사각 1:1, 설명 칸 5줄 기준 */
html[lang="en"] body.page-cases .case-grid .image-card{aspect-ratio:1/1}
@media(max-width:1050px){body.page-cases .case-grid{grid-template-columns:repeat(2,minmax(0,360px));gap:32px}}
@media(max-width:700px){body.page-cases .case-grid{grid-template-columns:minmax(0,1fr);gap:24px}}
/* === /cases-list-3 === */
/* === type-system-3 (2026-10-16) ===
글자 크기를 페이지별이 아니라 역할별로 한 번에 정함 (고객: 「최저 글자 22로 올리자 … 위치에 따라 26이나 다양하잖아.
전체 패턴을 식별해서 알아서」). 전 페이지 한·영 1440/1100/390px 실측으로 22px 미만 글자와 같은 역할끼리 크기가 다른 곳을 찾아 정리함
역할별 크기 (데스크톱 1051px~ / 태블릿 701~1050px / 휴대폰 ~700px)
- 본문·목록·표·그림 설명·라벨·날짜·버튼·목차·탭(읽는 글 전부) 22 / 22 / 18 ← 바닥값
- 카드·항목 제목(사진 카드, 목록 줄의 굵은 제목, 단계 제목) 26 / 24 / 22 (사용자 지정: 사진 카드 제목 26, 수상 항목 제목 26)
- 기사 제목(뉴스 카드, 문장형이라 한 단계 낮춤) 24 / 24 / 20
- 그 위 단계(구역 부제 26, 하위 페이지 소개문 30, 서비스 본문 24 등)는 앞 블록의 사용자 지정 값을 그대로 둠
휴대폰 18px: 390px 화면에서 글 폭이 358px 라 22px 이면 한 줄 16자 안팎으로 끊김. 18px 은 약 19~20자로
한글 모바일 읽기 폭(15~25자) 안에 들고, 앞 블록들이 휴대폰에서 이미 쓰던 값(본문 18~19px)과 맞음 */
/* ① 바닥값. type-scale ⑥(20px, 홈 제외)과 같은 선택자·같은 점수로 뒤에 두어 덮음. 홈도 같은 규칙에 넣음
(body:not(.ts3) 는 모든 body 에 맞음 — ⑥ 의 body:not(.page-home) 와 점수를 맞추려는 것).
max(바닥, 1em, --ts3): 1em 은 부모 크기를 따르는 굵은 글씨·링크용, --ts3 은 역할별로 바닥보다 크게 둘 값(아래 ②).
--ts3 은 상속되지 않게 등록해 둠 → 제목 줄에 준 값이 그 아래 다른 글로 번지지 않음 */
/* ② 항목 제목: 목록 줄·단계 흐름·강점 칸의 굵은 제목. 설명 글(22)과 같은 크기면 위계가 안 보여 카드 제목과 같은 단계로 */
/* 제목 태그(h3)로 된 항목·카드 제목. 바닥값 규칙은 제목 태그를 건드리지 않으므로 직접 정함 */
/* 작은 제목·묶음 이름이 바닥값보다 작던 곳 */
/* 사진 카드 제목 26px(사용자 지정)을 영문·좁은 폭까지. 사례 카드는 801~1240px 에서 칸이 좁아 22px, 영문 사례 카드는 아래 ④ 에서 22px.
앞 블록(en-layout·products-2·type-scale·home-tune-2)의 영문 규칙보다 점수가 높게 클래스를 겹쳐 씀 */
/* ③ 바닥값 규칙에서 빠져 있어 따로 정해 둔 글자(고객사례 상세·목차) */
/* 서비스 상세 「관련 제품과 사례」 줄의 분류·자세히 보기(type-scale ④ 20px, 휴대폰 17~18px) */
/* 바닥값 규칙 안에서 바닥보다 크게 둘 글자: 그래프 수치(라벨보다 한 단계 크게), 회사소개 소식 칸의 큰 화살표 */
.mission-lifecycle.sky-flow-cards strong:before{font-size:22px}
/* 떠 있는 [문의하기] 단추(1050px 이하에서 보임): 14px 이었음. 단추 높이 44px 안에 들어가는 18px */
@media(max-width:1050px){body .float-contact{font-size:18px}}
/* (글자와 별개) DX-Ocean 본문 폭 그림: 화면에 들어오기 전 1.08배로 커져 있는 동안(.mo-img) 1100px 부근에서 가로 스크롤 4~9px 이 생겼음.
이 블록 적용 전에도 같았음(ocean-3 의 본문 폭 그림 배치). 그림 상자 밖으로 나간 부분만 잘라 둠 */
.split.ocean-stack>.media{overflow:clip}
/* 왼쪽 목차(1280px 이상)의 「이 페이지 내용」: safety-3 가 !important 19px 로 둬서 같은 방식으로만 덮을 수 있음 */
/* ⑤ DX-Sky Drone 시스템 구성도(SVG) 글씨체: 고객 「dx sky 부분 글씨체가 안 먹은 것 같다」.
HTML 글자는 DX-Sky 화면도 다른 화면과 같은 글꼴(실제 그려진 글꼴 기준 제목 Paperlogy·본문 Pretendard)이었고,
다른 글꼴이 보이는 곳은 이 구성도뿐이었음 — MAVLINK·PX4 / ArduPilot·LTE/5G·Wi-Fi 가 고정폭 글꼴(Consolas),
상자 제목(DX-Sky Drone·DX-Sky GCS·비행제어장치 등)과 아래 세 묶음 제목이 제목 글꼴이 아닌 본문 글꼴이었음.
→ 고정폭을 빼고 본문 글꼴로, 상자·묶음 제목은 사이트 제목 글꼴로. 글자는 상자 간격(항목 줄 간격 22)이 허락하는 만큼만 키움
(그림 좌표가 고정이라 22px 까지는 못 키움 — 그림을 다시 그려야 함) */
.dd-svg .dd-title,.dd-svg .dd-name,.dd-svg .dd-cap{font-family:'Paperlogy','Pretendard',"Noto Sans KR",sans-serif;font-weight:700;letter-spacing:-.02em}
.dd-svg .dd-mono{font-family:'Pretendard',"Noto Sans KR",sans-serif;font-size:13px;font-weight:600;letter-spacing:.02em}
.dd-svg .dd-title{font-size:18px}
.dd-svg .dd-name{font-size:16px}
.dd-svg .dd-item{font-size:15px}
.dd-svg .dd-sub,.dd-svg .dd-zonelabel,.dd-svg .dd-label{font-size:14px}
.dd-svg .dd-cap{font-size:18px}
.dd-svg .dd-captext{font-size:16px}
/* ④ 사진 카드 칸 높이·영문 사례 카드 제목·관련 카드 제목 칸은 type-v4 의 줄 수 계산으로 옮김 */
/* === /type-system-3 === */
/* === ocean-4 (2026-10-16) ===
DX-Ocean 화면 검토 메모 반영
- 그림 설명(figcaption) 전부 그림 너비 기준 가운데 정렬(항적 지도·선박 통신 구성·그래프 두 장). .fig-cite 는 이 화면에만 있음
- 「통신 품질과 전송 목적을…」 오른쪽 항목 제목(26px)이 한 줄에 오게: 「전송 데이터의 중요도와 필요한 통신 품질을 반영」이
한 줄 폭 485px 인데 칸 안쪽 폭이 456px(칸 484 − 오른쪽 여백 28)이라 넘쳤음.
→ 오른쪽 여백 28px 을 없애고(한 줄짜리 목록이라 줄 구분선 오른쪽 여백이 필요 없음) 1051px 이상에서 칸 비율 1:1 → .92:1.08 로
오른쪽 칸을 약 523px 로. 글자 크기(26px)는 그대로
- 「연결이 불안정한 해상에서도…」 안의 소제목 두 개(「수집 기능을…」「구현 기능과 연구 검증 범위를…」, 같은 역할 h3):
최대 34px(1440px 에서 33px)로 바로 위 구역 제목 46px 와 차이가 커 작아 보인다는 메모(두 번째) → 최대 38px(구역 제목의 약 0.83배).
사이트 안 같은 역할 예: 알러티 화면 소제목 clamp(26px,2.6vw,38px)
- 같은 소제목 아래 설명 두 개(.ocean-architecture p, .ocean-boundary p)는 22px 로 바로 위 구역 소개문(26px)보다 작았음
→ 구역 소개문과 같은 단계(데스크톱 26 / 태블릿 24 / 휴대폰 20)
- 「수집 기능을…」 글 칸의 900px 상한을 풀어 본문 폭 전체(1440px 에서 1032px)를 씀. 26px 에서 한 줄 약 40자로
한글 읽기 폭 상한 안이라 별도 상한을 두지 않음 */
.fig-cite{text-align:center}
#ocean-routing .feature-line{padding-right:0}
@media(min-width:1051px){#ocean-routing .split{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}}
.split.ocean-stack.ocean-architecture>div:not(.media){max-width:none}
/* === /ocean-4 === */
/* === notes-a (2026-10-16) === */
/* 고객사례 목록(/case-study) 검토 메모: cases-list-3 의 「카드 폭 360px 고정·왼쪽 정렬」을 되돌림
(고객 「전체 카드가 위치하는 가로 길이에 맞게 … 옆이 너무 휑하다」「두 개 동일한 길이로 나눠서 배치」)
① 카드: 묶음마다 본문 폭(.wrap)을 장 수로 똑같이 나눔. 3장 3등분, 2장 2등분, 1장 전체 폭.
1051px 이상은 장 수와 관계없이 한 줄(grid-auto-flow:column), 701~1050px 는 두 칸, 700px 이하는 한 칸(cases-list-3 그대로)
② 카드 간격은 cases-list-3 값 유지(48px, 701~1050px 32px)
③ 카드 높이: 비율(5:4·1:1) 대신 고정 높이로 묶음끼리 같게. 값은 바로 전 1440px 실측 높이(한 288px, 영 360px) 그대로.
칸 높이(--zt·--zd)는 card-zones·cases-list-3·type-system-3 값을 그대로 둠 */
body.page-cases .case-grid .image-card{aspect-ratio:auto;height:288px}
html[lang="en"] body.page-cases .case-grid .image-card{aspect-ratio:auto;height:360px}
@media(min-width:1051px){body.page-cases .case-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);justify-content:stretch}}
@media(min-width:701px) and (max-width:1050px){body.page-cases .case-grid{grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch}}
/* ④ 묶음 설명문: 폭 제한(1051px 이상 900px, 그 아래 기본 780px)을 풀어 본문 폭을 다 씀.
글자는 「구역 제목 아래 부제」 역할로 봄 — 다른 화면의 구역 부제(.section-copy)와 같은 26 / 24 / 20px, 줄 간격 1.8, 폭 제한 없음.
바닥값 규칙(type-system-3 ①)이 이 글에도 걸려 있어 font-size 대신 --ts3 으로 올림 */
body.page-cases .case-group-head>div>p{max-width:none;}
/* 첫 화면 「싱크테크노의 최신 활동」 카드 3장 (고객 「가장 우측이 넓어 보인다 … 이미지 가로 길이만큼 글 영역도」)
원인: 카드마다 오른쪽 안쪽 여백 28px + 바깥 여백 28px 을 주고 마지막 카드만 0 → 앞 두 장 글 폭 370px, 마지막 399px.
또 사진을 자르지 않고(contain) 회색 바탕 가운데 두어 세로로 긴 논문 사진은 실제 그림이 칸보다 훨씬 좁았음
→ 여백 대신 칸 사이 간격 48px 로 세 장 같은 폭. 구분선은 간격 한가운데에 그림.
사진은 이 화면만 칸을 꽉 채우게(cover). 논문 표지(파일명에 paper)는 제목이 있는 윗부분이 보이게 위쪽 기준.
뉴스룸 화면의 contain(기사 캡처 글자가 잘리지 않게)은 그대로 둠 */
.newsroom-preview .news-grid{column-gap:48px}
.newsroom-preview .news-grid .news-card{position:relative;margin-right:0;padding-right:0;border-right:0}
/* 701px 이상은 폭과 관계없이 세 칸 한 줄(실측 701·860·1050px 모두 3칸). 701~1050px 는 간격 32px */
@media(min-width:701px){.newsroom-preview .news-grid .news-card:not(:first-child):before{content:"";position:absolute;top:0;bottom:0;left:-24px;border-left:1px solid var(--line)}}
@media(min-width:701px) and (max-width:1050px){.newsroom-preview .news-grid{column-gap:32px}.newsroom-preview .news-grid .news-card:not(:first-child):before{left:-16px}}
.newsroom-preview .news-thumb img{object-fit:cover}
.newsroom-preview .news-thumb img[src*="paper"]{object-position:50% 0}
/* 기사 제목: 사이트 전체 제목의 줄 길이 맞춤(balance) 때문에 가운데·오른쪽 카드 제목이 사진 폭 395px 중 250px 안팎에서 끊겨
글이 왼쪽에 몰려 보였음 → 기사 카드 제목만 줄을 끝까지 채우고 마지막 줄 한 단어 남김만 피하게(pretty). 뉴스룸 카드도 같은 역할이라 함께 */
body .news-card h3,body .news-card-item h3{text-wrap:pretty}
/* === /notes-a === */
/* === notes-c (2026-10-16) === */
/* ① 제품 목록(/product) 항목 그림: 그림 칸은 16:10 인데 그림 원본은 1.6~2.02 : 1 이라 object-fit:cover 로 양옆이 잘렸음
(CertMate 2.02:1 → 좌우 약 21% 잘림, DX-Ocean·DX-Safety 16:9 → 좌우 약 10% 잘림).
고객 「컨테이너로 하라고 했잖아. 이미지가 짤리잖아」 → 네 항목 모두 그림 전체가 보이게(contain). 남는 위아래 칸은 그림 칸 바탕색(--soft) */
.prod-media img{object-fit:contain}
/* ② 제품 목록 큰 흐린 번호: 그림이 오른쪽인 항목(02·04)도 번호를 오른쪽(그림 쪽 바깥 여백)으로.
→ 네 항목 모두 번호가 오른쪽 바깥 여백에 놓이고 절반쯤 안쪽으로 걸침(홀수는 글 칸 끝, 짝수는 그림 칸 끝).
밀어내는 양·세로 위치는 products-3 규칙 그대로. 짝수 항목은 번호가 글 칸(.prod-body) 안에 있으므로
항목 폭(100cqw)을 기준으로 그림 칸 오른쪽 끝까지 옮김. 번호는 그림 위에 흐리게(5%) 겹침
— 그림 뒤로 깔면 그림에 걸친 절반이 가려져 「02」「04」가 「2」「4」만 보였음 */
@media(min-width:861px){
.prod-item{container-type:inline-size}
.prod-item:nth-child(even) .prod-num{left:auto;right:calc(100% - 100cqw);transform:translateX(max(0px,min(50%,var(--prod-num-room))))}
}
/* ③ DX-Safety Alerti 6항목 표: 항목 제목이 최대 2줄이 되게 제목 칸 폭을 넓힘(고객 「타이틀 부분 최대 2줄로」).
실측(26px 제목): 한글은 제목 칸 210px 에서 「상황을 이해하기 쉬운 지도와 상세정보」가 3줄 → 240px 이면 1301~1440px·1100px 모두 2줄 이하.
영문은 「Integrated domestic and international earthquake and tsunami information」이 2줄이 되려면 제목 칸 480px 이 필요한데,
1301px 이상에서는 표가 영상 옆 716px 칸이라 설명 칸이 200px 남짓으로 줄어 설명이 9~10줄이 됨.
→ 영문만 1301px 이상에서도 1300px 이하와 같이 영상을 표 아래로 내려 표를 본문 폭 전체로 쓰고, 제목 칸을 480px(좁으면 47%)로 */
@media(min-width:681px){
.alerti-value-lines p{grid-template-columns:240px minmax(0,1fr)}
html[lang="en"] .alerti-value-lines p{grid-template-columns:clamp(240px,47%,480px) minmax(0,1fr)}
}
html[lang="en"] .alerti-hero-split{grid-template-columns:minmax(0,1fr);grid-template-areas:"values" "video" "caption";gap:28px}
html[lang="en"] .alerti-value-col .alerti-value-lines{justify-content:flex-start;gap:18px}
html[lang="en"] .alerti-hero-split>.alerti-video-frame{max-width:320px;align-self:start;justify-self:start}
html[lang="en"] .alerti-hero-split>.alerti-flow-caption{width:100%;max-width:320px;justify-self:start}
/* ④ 「제목 | 설명」 두 칸 구역(.split.no-media, 1051px 이상): 제목을 옆 설명 칸 높이의 세로 가운데로
(고객: DX-Sky Drone 구역 「옆의 구역 중간에 오도록」). 같은 배치를 쓰는 DX-Sky·DX-Sky GCS·제품 목록 구역도 함께 */
/* 설명 글(p)의 위아래 바깥 여백 22px 가 설명 칸 높이에 들어가 제목이 글 덩어리 가운데보다 아래로 20px 쯤 내려가므로,
첫 글의 위 여백은 없애고 마지막 글의 아래 여백은 칸 안쪽 여백으로 옮김(구역 아래 간격은 그대로) */
@media(min-width:1051px){
.split.no-media>div>h2{align-self:center}
.split.no-media>div>h2+p{margin-top:0}
.split.no-media>div>p:last-child{margin-bottom:0}
.split.no-media>div:has(>p:last-child){padding-bottom:22px}
}
/* ⑤ 구역 안 그림·흐름 위 작은 제목(「시스템 구성」「임무 운영 흐름」): 24px(휴대폰 21px)이라 사이트 글자 체계에 없는 크기였음.
같은 역할인 그래프 제목(DX-Ocean .oc-title)·항목 제목 단계(type-system-3: 26 / 24 / 22)에 맞춤 */
/* === /notes-c === */
/* === ai-page (2026-10-16) ===
DX-Sky 「AI Mission Analysis」(/product/dx-sky/ai) 승인 초안 반영. 구조는 Drone·GCS 화면 클래스를 그대로 쓰고 이 화면에서만 아래를 더함
① 분석 흐름 5단계(ol.analysis-pipeline): 기본 모양은 다섯 칸 가로 배치인데 칸 폭이 약 200px 이라 22px 설명 글이
한 줄 8~9자로 끊기고 3단계(위치 고르기, 약 150자)가 17줄까지 늘어남 → 701px 이상에서 Drone 「주요 기능」 번호 목록
(.case-scope-lines: 번호 42px · 제목 190px · 설명, 간격 18px)과 같은 줄 배치로. 번호(01~05)는 글이 아니라 순서라 CSS counter 로 붙임
② 「품질 점검과 재촬영」 제목과 소개문 사이: 검토 메모 「위에 타이틀이랑 왜 이렇게 떨어져 있어 간격 줄여」.
제목 아래 여백 34px(Drone·GCS 공통 값) + 26px 글의 줄 간격 여유로 눈에 보이는 간격이 약 44px 이었음.
DX-Ocean·CertMate 같은 다른 제품 화면의 제목→첫 문단 간격(약 20~22px)에 맞춰 16px 로 줄임
③ 화면 예시 그림: 처음엔 두 장(판정 결과·재촬영 계획)을 1051px 이상 두 칸으로 놓았으나, 사용자 메모로 재촬영 계획 그림을
빼서 한 장만 남음(2026-10-16). 한 장을 두 칸 틀에 두면 반쪽 폭으로 남으므로 틀(.ai-shots)을 없애고 그림 한 장을 바로 둠
④ 문구 개편(2026-10-16): 「분석 흐름」「운영 원칙」에도 소개문이 생겨 ②의 제목 아래 16px 를 세 구역에 같이 적용.
항목 제목이 「믿을 수 있는 위치부터 골라 쓰기」처럼 길어져 제목 칸 190px(26px 글 한 줄 약 7자)에서 3줄로 늘어남 →
1051px 이상에서만 「분석 흐름」「품질 점검」 두 목록의 제목 칸을 280px 로 넓힘(설명 칸은 1440px 기준 약 730px 남음)
⑤ notes-f(2026-10-16): 「분석 흐름」 5단계 목록을 DX-Safety 묶음 카드(.pwc-stages, safety-3 ②)로 바꿔 ①의 줄 배치 규칙은 지움.
화면 예시 그림도 사용자 메모 「이미지 비활성화」로 빼서 ③의 그림 여백 규칙도 지움(그림 파일은 그대로 둠)
⑥ 문구 재작성(2026-10-16, 번역투·홍보 상투어 지적): 「분석 및 판정」 묶음에 객체 탐지 항목을 더해 묶음마다 두 항목.
검토 메모 「정상·이상·판정 불가 … 세 가지가 한 단어잖아. 줄 바꿔」: 문구 안에는 태그를 넣을 수 없어(빌드가 글자로 바꿈)
묶음 표현을 제목에서 빼고 설명 첫머리에 둠 → 어느 폭에서도 첫 줄 안에 들어가 중간에서 갈라지지 않음. CSS 변경 없음 */
#analysis-flow h2,#analysis-quality h2,#analysis-principles h2{margin-bottom:16px}
@media(min-width:1051px){#analysis-quality .case-scope-lines>div{grid-template-columns:42px 280px minmax(0,1fr)}}
/* === /ai-page === */
/* === ocean-width (2026-10-16) === */
/* 사용자 메모 「옆에 공간 넓잖아」를 같은 구조(.ocean-stack) 구역 전체에 적용: 글 폭 900px 제한을 풀어 본문 폭을 씀 */
.split.ocean-stack>div:not(.media){max-width:none}
/* === /ocean-width === */
/* === safety-4 (2026-10-16) === */
/* DX-Safety 사용자 메모 처리 */
/* ① 「하나의 재난정보를…」 구역 두 갈래(공공경보센터(PWC) / Alerti)를 카드로(고객 「카드형으로 바꿔줘」).
전에는 위아래 줄과 가운데 세로줄로만 나뉜 표 모양이었음. 같은 제품군 화면의 카드(DX-Ocean 그래프 카드: 흰 바탕·1px 테두리·둥근 모서리 16px)와
맞추되, 이 구역 바탕이 흰색이라 카드 바탕은 연한 회청색(--soft)으로 둠. 카드 제목은 글자 체계의 카드 제목 단계(26 / 24 / 22) */
.safety-branch{border-top:0;border-bottom:0}
.safety-routes{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.safety-route,.safety-route+.safety-route{padding:32px 32px 34px;background:var(--soft);border:1px solid var(--line);border-radius:16px}
@media(max-width:820px){
.safety-routes{grid-template-columns:minmax(0,1fr);gap:16px}
.safety-route,.safety-route+.safety-route{padding:24px 20px 26px;border:1px solid var(--line)}
}
/* ②③ 구역 안 소제목 두 개(「기관이 발령한 경보를…」, 「14개 상황을…」)를 같은 역할의 소제목과 같은 크기로
(고객 「글자크기가 좀 작네? 다른곳이랑 다른데?」). 기준: DX-Ocean 구역 안 소제목(ocean-4, clamp(28px,2.7vw,38px))과
이 화면 Alerti 소제목(「알림을 받은 순간부터…」, 최대 38px). 전에는 최대 32px·34px 이고 1100px 에서 24·26px 로 기준(29.7px)보다 작았음.
휴대폰은 같은 화면 Alerti 소제목과 같은 26px(전 23·24px) */
.detail-section .safety-public-flow h3,.detail-section .pwc-validation h3{letter-spacing:-.03em}
.detail-section .safety-public-flow h3{max-width:none}
/* ④ 「I’m Safe」 다음 줄에 「안전 상태 공유」(고객 「줄바꿔」). 글을 두 칸으로 나눠 각각 한 줄로 */
.alerti-value-lines p>strong>span{display:block}
/* ⑥ 스토어 배지·앱 약관 줄을 바로 위 내용에 붙임(고객 「갭이 너무 커서 동떨어져보여」).
전: 영상·영상 설명 칸 아래에 따로 놓여 1301px 이상 한글 화면에서 표 끝과 배지 사이가 약 118px.
후: 두 줄을 영상 묶음(.alerti-hero-split) 안 표 바로 아래 칸(links)으로 옮김 → 표 끝에서 12px 아래.
위아래로 쌓이는 화면(1300px 이하, 영문)은 순서 그대로 영상 설명 아래, 간격 28 → 14px.
약관 라벨·링크 글자는 고객 지정 11px — 글자 체계 바닥값(22px, !important 아님)보다 우선해야 해서 !important */
.alerti-hero-split{grid-template-areas:"values video" "links caption"}
.alerti-hero-split>.alerti-get{grid-area:links;min-width:0}
.alerti-get .alerti-store-links{margin-top:0}
.alerti-get .alerti-store-links+.alerti-doc-links{margin-top:8px}
.alerti-get .alerti-doc-link{padding:3px 8px}
@media(max-width:1300px){
.alerti-hero-split{grid-template-areas:"values" "video" "caption" "links"}
.alerti-hero-split>.alerti-get{margin-top:-14px}
}
html[lang="en"] .alerti-hero-split{grid-template-areas:"values" "video" "caption" "links"}
html[lang="en"] .alerti-hero-split>.alerti-get{margin-top:-14px}
/* ⑦ 「경보를 받는 데서 끝나지 않고…」 구역과 바로 위 「핵심 가치」 구역 사이 여백을 줄임(고객 「공간이 너무 넓은데」).
두 구역 모두 위아래 여백이 구역 기본값(--space-section, 72~112px)이라 사이가 최대 224px 이었음 → 맞닿는 쪽만 절반 */
#safe-value{padding-bottom:calc(var(--space-section) * .5)}
#safety-response-flow{padding-top:calc(var(--space-section) * .5)}
/* === /safety-4 === */
/* === ocean-5 (2026-10-16) ===
DX-Ocean 사용자 메모 4건
① 그림 출처 줄 13px(사용자 지정 값 — 바닥값 22px 의 예외, 출처 표기 역할에만). 바닥값 규칙(점수 0,5,3)을 이기려고 구역 id 로 묶음.
출처 줄은 「자료: 저자(연도), 학술지」만 남기고, 변경 여부·라이선스는 맨 아래 참고문헌의 한 줄(.ocean-refs-lic)로 모음 → 같은 13px
② 기능 상자 묶음(.feature-lines) 상자 안 글 가운데 정렬. 첫 상자만 왼쪽 안쪽 여백이 0 이라 글이 14px 왼쪽으로 쏠려 있던 것도 좌우 같게
③ 글 위·그림 아래 구조(.ocean-stack)에서 글 마지막 문단의 아래 여백(26px, 휴대폰 20px)이 줄 간격(40px, 휴대폰 28px)에 더해져
「수집 기능을…」 글과 개념도 사이만 다른 구역(게이트웨이·단말)보다 넓었음 → 마지막 문단 아래 여백 0 으로 같은 간격 */
#ocean-resilience .ocean-refs .ocean-refs-lic{margin-top:10px}
:is(#ocean-overview,#ocean-tool,#ocean-routing) .feature-line{text-align:center}
@media(min-width:1051px){:is(#ocean-overview,#ocean-tool) .feature-line{padding-left:28px;padding-right:28px}}
:is(#ocean-gateway,#ocean-terminal,#ocean-resilience) .split.ocean-stack>div:not(.media)>:last-child{margin-bottom:0}
/* === /ocean-5 === */
/* === sky-5 (2026-10-16) === */
/* ① DX-Sky 개요 「드론 플릿 운영의 모든 단계, 하나의 환경에서」(1051px 이상)
notes-c ④ 로 제목을 옆 칸 높이의 가운데에 두었는데, 옆 칸에 네 칸 표(.feature-lines)까지 들어가 제목이 글보다 230px 쯤 아래로 내려갔음.
고객 「우측 설명하는 단락 공간의 중간쯤」 → 제목이 걸치는 줄을 글 두 문단(1~2행)으로만 줄여 문단 덩어리 가운데에 맞춤.
둘째 문단 아래 여백(22px)은 표 위 여백으로 옮겨 문단↔표 간격(22+42=64px)은 그대로 */
@media(min-width:1051px){
#sky-overview .split.no-media>div>h2{grid-row:1/span 2}
#sky-overview .split.no-media>div>p:has(+.feature-lines){margin-bottom:0}
#sky-overview .split.no-media>div>.feature-lines{margin-top:64px}
}
/* ② 임무 운영 흐름 카드 사이 화살표: 파란 원 → 흰 원(파란 화살표, 연한 테두리·그림자). 고객 「배경은 흰색으로, 이미지와 이미지 사이 중앙쯤」
전에는 원 중심이 왼쪽 카드 끝(테두리 안쪽)에 있어 카드 사이 간격(28px)의 가운데보다 14px 왼쪽이었음 → 간격 가운데로.
카드 테두리 1px 를 빼고 계산: right = -(간격/2 + 원 반지름 22 + 테두리 1). 한 줄로 쌓이는 860px 이하는 위아래 간격(26px) 가운데 */
.mission-lifecycle.sky-flow-cards li:not(:last-child):after{right:-37px;background:#fff;color:var(--blue);border:1px solid #c6d2db;box-shadow:0 2px 10px rgba(11,34,50,.14)}
@media(min-width:861px) and (max-width:1050px){.mission-lifecycle.sky-flow-cards li:not(:last-child):after{right:-35px}}
@media(max-width:860px){.mission-lifecycle.sky-flow-cards li:not(:last-child):after{right:auto;bottom:-36px}}
/* ③ DX-Sky 개요 「DX-Sky GCS만의 기능」: 구역 제목 아래 34px + 첫 항목 위 안쪽 여백 54px 에 그림·글 세로 가운데 맞춤까지 겹쳐
제목→첫 그림이 1440px 114px, 1100px 149px 떨어져 있었음(고객 「위의 여백 너무 넓어. 타이틀이랑 연관없어 보이잖아」).
→ 제목 바로 뒤 첫 항목만 위 안쪽 여백 0, 그림·글을 위쪽에 맞춤. 둘째 항목부터는 그대로 */
.detail-section>.wrap>h2+.sky-showcase{padding-top:0;align-items:start}
/* ④ DX-Sky GCS 개요(#gcs-overview) → 「DX-Sky GCS만의 기능」: 개요는 글만 있는 짧은 구역인데 아래 여백 112px + 문단 아래 22px +
다음 구역 위 여백 112px 이 겹쳐 글 끝→다음 제목이 246px(1440px)이었음(고객 「밑의 여백이 겹치니까 너무 넓어 보여」).
→ 개요 구역 아래 여백만 구역 간격의 절반으로, notes-c 가 옮겨 둔 22px 도 뺌 */
#gcs-overview{padding-bottom:calc(var(--space-section) / 2)}
#gcs-overview .split.no-media>div{padding-bottom:0}
/* ⑤ DX-Sky 계열(개요·GCS·Drone) 구역 제목 → 소개문(.section-copy) 간격 34px → 16px.
AI 화면(ai-page ②)에서 고객 메모로 16px 로 줄였고, 같은 역할이라 나머지 세 화면도 같게(AI 화면은 ai-page 블록이 따로 맡음) */
:is(body[data-i18n-page="product-dx-sky"],body[data-i18n-page="product-dx-sky-gcs"],body[data-i18n-page="product-dx-sky-drone"]) .detail-section>.wrap>h2:has(+p.section-copy){margin-bottom:16px}
/* ⑥ 왼쪽 「이 페이지 내용」 목차가 있는 화면(1280px 이상)의 본문 폭
전에는 본문을 왼쪽으로 248px 비우고 그 자리에 목차를 둬, 본문이 DX-Sky 개요(목차 없음)보다 248px 좁았음(1440px: 1032 vs 1280px).
고객 「dx-sky 소개하는 부분보다 좌우 여백이 과하게 넓다 … 그 페이지를 기준으로」 → 목차를 바깥 여백으로 내보내고, 바깥 여백이 모자란 만큼만 본문을 비움.
- 목차(폭 200px)와 본문 사이 40px, 목차와 화면 끝 사이 최소 32px(.wrap 기본 바깥 여백과 같음) → 필요한 왼쪽 자리 272px
- 본문 왼쪽 비움 = max(0, 272px − 바깥 여백). 바깥 여백 = (화면 폭 − .wrap 폭) / 2. 1824px 이상이면 0(기준과 같은 폭)
- 목차 위치 = 본문 시작 − 240px (최소 32px)
목차 윗선 맞춤·글자 22px(safety-3), 1280px 미만 칩 줄은 그대로. 퍼센트는 화면 폭(구역·목차 줄 폭) 기준이라 스크롤바 폭이 들어가도 맞음 */
@media(min-width:1280px){
.detail-tabs .wrap{width:200px;margin-left:max(32px,calc((100% - min(var(--max),100% - 64px)) / 2 - 240px));margin-right:0}
.detail-tabs~.detail-section:not(.back-section)>.wrap{padding-left:max(0px,calc(272px - (100% - min(var(--max),100% - 64px)) / 2))}
}
/* === /sky-5 === */
/* === notes-d (2026-10-16) === */
/* ① DX-Sky Drone 시스템 구성도(SVG) 글자 키움 — 사용자 메모 「글자 크기 조금 키울 수 있나?」
전: 그림 좌표 1040×520 에 글자 14~18(1440px 화면 14.6~18.8px). CSS 만으로는 상자 안에 더 못 넣었음.
후: 그림을 1040×632 로 다시 배치(상자 크기·위치는 페이지 HTML 의 SVG 좌표). 가로 폭은 그대로라 1100~1440px 화면에서 그림 배율은 약 1.0~1.05
글자(그림 좌표 기준 = 1100px 화면 실제 크기): 상자 제목 18→24, 상자 이름 16→20, 항목 15→18, 보조 글(기종·접속 방식·구역 이름·선 이름) 14→17,
MAVLINK·LTE/5G 등 13→17, 아래 묶음 제목 18→22, 묶음 설명 16→19
영문 가장 긴 줄(「Pairing, signature check」「Onboard computer (Jetson)」)이 상자 안쪽 여백 18px 이상 남게 상자 폭을 정함.
1051px 이상은 그림이 본문 폭보다 넓어 4px 옆으로 밀리던 것(1100px)을 없애려 최소 폭을 풂. 1050px 이하·휴대폰은 전처럼 1040px 그림을 옆으로 넘겨 봄 */
.dd-svg .dd-title{font-size:24px}
.dd-svg .dd-name{font-size:20px}
.dd-svg .dd-item{font-size:18px}
.dd-svg .dd-sub,.dd-svg .dd-zonelabel,.dd-svg .dd-label{font-size:17px}
.dd-svg .dd-mono{font-size:17px}
.dd-svg .dd-cap{font-size:22px}
.dd-svg .dd-captext{font-size:19px}
@media(min-width:1051px){.drone-diagram .dd-svg{min-width:0}}
/* ③ 구역 소개문 · 소제목 아래 설명을 같은 역할 글과 같은 크기로(사용자 원칙 「한 곳 지적은 같은 역할 모든 곳에」)
기준: 다른 화면 구역 소개문(.section-copy)과 DX-Ocean 소제목 아래 설명(ocean-4) = 26 / 24 / 20px. 전에는 모두 바닥값 22px(휴대폰 18px)
- DX-Safety 「경보를 그대로 전달하지 않고…」 아래 두 문단, 「14개 상황을…」 아래 설명 (사용자 지적)
- DX-Safety 「내 위치에 필요한 재난정보를 받고…」 아래 소개문 (같은 화면, 제목 아래 소개문 → 항목 표)
- DX-Ocean 「통신 상태를 수집하고…」 아래 소개문 (제목 아래 소개문 → 기능 상자·그래프)
- CertMate 「시험 준비부터 결과 확인까지…」 아래 소개문 (제목 아래 소개문 → 단계 흐름)
바닥값 규칙(type-system-3)이 걸려 있어 font-size 대신 --ts3 으로 올림 */
/* === /notes-d === */
/* === ocean-6 (2026-10-16) ===
DX-Ocean 사용자 메모 3건(이 블록 안에서만 덮어씀)
① 「바다에서는 연결 방식이…」 항적 지도: 공통 규칙 .media img{max-height:520px;object-fit:contain} 때문에 그림이 520px 높이에 갇혀
칸(1440 기준 618px) 안에서 좌우로 약 28px씩 흰 띠가 생겼음 → 높이 제한을 풀어 그림이 칸 너비를 꽉 채우게(오른쪽 끝 = 본문 오른쪽 끝)
② 그림 출처 줄(「자료: Koo et al. (2026), Applied Sciences」) 4곳 13px → 20px(사용자 지정 값). 같은 역할이라 4곳 모두 같게.
휴대폰(700px 이하)은 그림 설명이 22px → 18px 로 줄어드는 비율(약 0.82~0.9)에 맞춰 16px.
맨 아래 참고문헌 라이선스 줄(.ocean-refs-lic)은 사용자 확인 중이라 이번에는 그대로(13px)
③ 「통신 품질과 전송 목적을…」(#ocean-routing) 목록은 ocean-5 에서 가운데 정렬했던 것을 왼쪽 정렬로 되돌림.
가로 3칸 상자 두 묶음(#ocean-overview, #ocean-tool)의 가운데 정렬은 그대로 */
#ocean-overview .figure-media img{max-height:none}
#ocean-routing .feature-line{text-align:left}
/* === /ocean-6 === */
/* === awards-3 (2026-10-16) ===
회사 수상 화면(/company/awards) 사용자 메모 처리. 이 블록 안에서만 덮어씀
① 증서 이미지를 줄 오른쪽 끝으로: 목록 최대 폭 1040px(2026-09-22 규칙) 때문에 증서가 본문 오른쪽 끝보다
1440px 화면에서 48px, 1920px 화면에서 240px 안쪽에 있었음 → 목록 폭 제한을 풀어 제목·본문 오른쪽 끝에 맞춤
② 날짜(연도·기간) 칸과 글 사이 간격을 네 구역 모두 같게: 전에는 날짜 칸이 118px 고정이라 실제 보이는 간격이
표창 78px · 국제기구 57px(기간이 두 줄로 꺾임) · 특허·상표 31px 로 제각각이었음
→ 구역마다 날짜 칸 = 그 구역에서 가장 긴 날짜 글자 폭(22px 기준 실측), 칸 사이 간격은 공통 96px(701~1050px 는 64px)
실측 폭: 연도 64 · 기간 ko 155(「2016 ~ 2020」) en 177(「2023 – Present」) · 날짜 111(「25.11.18」). 글꼴 차이로 넘쳐도 꺾이지 않게 nowrap
③ 휴대폰(700px 이하): 위 2026-09-22 규칙(.record-row 118px 칸)이 휴대폰 규칙보다 뒤에 있어 글이 118px 칸에 갇히고
증서와 겹치던 것을 휴대폰 원래 배치(글 1칸 + 증서 76px)로 되돌림
④ 특허 묶음 제목(「등록 5건」「출원 6건」) 22px → 30px(사용자 지정 값), 휴대폰 20px → 24px(구역 항목 제목 26→22 비율에 맞춤).
제목과 아래 목록 사이 26px → 12px */
@media(min-width:701px){
:is(#award-prize,#award-role,#award-patent,#award-mark) .record-list{max-width:none}
:is(#award-prize,#award-role,#award-patent,#award-mark) .record-row{grid-template-columns:var(--award-date) minmax(0,1fr);column-gap:96px}
/* type-v4: 증서 칸 88px 고정 → 글 폭만큼. 한국어 「증서 보기」는 한 줄(max-content), 영문 「View Certificate」는 두 줄(min-content) */
:is(#award-prize,#award-role,#award-patent,#award-mark) .record-row.has-cert{grid-template-columns:var(--award-date) minmax(0,1fr) minmax(88px,max-content)}
html[lang="en"] :is(#award-prize,#award-role,#award-patent,#award-mark) .record-row.has-cert{grid-template-columns:var(--award-date) minmax(0,1fr) minmax(88px,min-content)}
:is(#award-prize,#award-role,#award-patent,#award-mark) .record-date{white-space:nowrap}
/* type-v4: 22px 실측 px 를 글자 배수로 바꿈(24px 에서 넘쳤음). 연도 3.15em · 기간 ko 7.1em en 8.1em · 날짜 5.1em */
#award-prize{--award-date:3.15em}
#award-role{--award-date:7.1em}
html[lang="en"] #award-role{--award-date:8.1em}
#award-patent,#award-mark{--award-date:5.1em}
}
@media(min-width:701px) and (max-width:1050px){
:is(#award-prize,#award-role,#award-patent,#award-mark) .record-row{column-gap:64px}
}
@media(max-width:700px){
:is(#award-prize,#award-role,#award-patent,#award-mark) .record-row{grid-template-columns:minmax(0,1fr)}
/* 증서 칸은 76px 이 기본이나, 영문 「View Certificate」 의 Certificate 한 단어(18px 약 90px)가 76px 칸 밖으로 삐져나와 글 폭만큼 넓힘 */
:is(#award-prize,#award-role,#award-patent,#award-mark) .record-row.has-cert{grid-template-columns:minmax(0,1fr) minmax(76px,min-content)}
}
#award-patent h3.record-group+.record-list{margin-top:12px}
/* 701~1050px 는 구역 제목(h2)이 30px 로 줄어 묶음 제목과 같아지므로 한 단계 낮춤 */
/* === /awards-3 === */
/* === rnd-merge (2026-10-16) === */
/* 연구개발 첫 구역의 제목·소개문을 머리말로 합쳐 뺐으므로, 남은 세 줄 목록이 구역 맨 위에서 시작하게 함 */
.rnd-approach-v17 .approach-rows{margin-top:0}
/* === /rnd-merge === */
/* === notes-e (2026-10-16) === */
/* DX-Safety · 표준화 · 서비스 상세 사용자 메모 처리 */
/* ① DX-Safety Alerti 표 「I’m Safe / 안전 상태 공유」 (고객 「이거 두개 글자 색 왜 다른거랑 달라. 동일하게」)
safety-4 ④ 에서 두 줄로 나누려고 제목(strong) 안에 span 두 개를 넣었는데, 표 설명 글용 규칙(.alerti-value-lines span: 회색 #5d6f7c)이
그 span 에도 걸려 이 항목 제목만 회색이었음 → 제목 안 span 은 제목의 색·굵기·줄 간격을 그대로 따름 */
.alerti-value-lines p>strong>span{color:inherit;font-weight:inherit;line-height:inherit}
/* ② Alerti 앱 약관 줄: safety-4 ⑥ 의 11px → 13px(고객 「11px는 너무 작았나봐. 13으로」). 같은 이유로 !important */
/* ④ Alerti 화면 그림 아래 설명(제목 + 한 줄 설명): 그림 폭 기준 가운데 정렬(고객 「이미지의 너비에 한해서 가운데정렬」).
설명 칸 폭 = 그림 폭이라 글만 가운데로. 영상 아래 설명은 safety-3 ③ 에서 이미 영상 폭 가운데 */
.alerti-story .alerti-screen figcaption{text-align:center}
/* ⑤ 머리말 바로 아래 첫 구역 위 여백(고객: DX-Safety 「위의 여백 너무 넓잖아」)
실측(1440px): 머리말 마지막 글 → 첫 구역 제목 170px(머리말 아래 58 + 구역 위 여백 112). DX-Ocean·CertMate 도 같은 구조·같은 170px,
서비스·회사·연구개발 화면은 93~104px. → 같은 구조인 세 제품 화면의 첫 구역 위 여백을 구역 간격의 절반으로(safety-4 ⑦ 과 같은 방식).
왼쪽 목차(1280px 이상)는 safety-3 의 윗선 맞춤 값(--toc-top)을 같은 절반으로 → 목차도 같이 올라감 */
:is(#safe-overview,#ocean-overview,#cert-overview){padding-top:calc(var(--space-section) * .5)}
@media(min-width:1280px){.detail-tabs:has(+ :is(#safe-overview,#ocean-overview,#cert-overview)){--toc-top:calc(var(--space-section) * .5)}}
/* ⑥ 주제 줄(.topic-row) 제목: 28px(휴대폰 23px) → 구역 안 소제목 단계(DX-Ocean·DX-Safety 소제목과 같은 clamp(28px,2.7vw,38px), 휴대폰 26px).
고객 「여기 글자크기 왜 이렇게 작아?」(표준화). 같은 줄 구조인 연구개발(/rnd)도 함께.
제목 칸 300px 에 38px 이면 한 줄 7~8자라 4줄까지 늘어나 1051px 이상에서만 제목 칸을 360px 로 넓힘 */
.topic-title h3{letter-spacing:-.03em}
@media(min-width:1051px){.topic-row,.topic-row-deep{grid-template-columns:72px 360px minmax(0,1fr)}}
/* ⑦ 서비스 상세 4화면(무인비행체·IoT·공공알림·해양데이터) 구역(.service-section.rich)
- 구역 제목 32px(휴대폰도 32px) → 제품 화면 구역 제목과 같은 clamp(30px,3.2vw,46px)(고객 「다른 페이지에 비해 작은 거 같은데?」),
줄 간격 1.24 → 1.7(고객 지정). 영문은 제품 화면 영문 구역 제목(en-layout: clamp(30px,2.8vw,40px)), 휴대폰 30px(영문 27px) — 제품 화면과 같음.
46px 이면 300px 칸에서 「Sim-to-Real:」이 칸을 넘어 1051px 이상은 제목 칸을 영문과 같은 360px 로
- 구역 위 여백 54 → 88px(고객 「위의 패딩 더 줘」), 쌓이는 900px 이하 54 → 72px
- 제목 위 파란 작은 번호(01~) → 제품 목록·고객사례 상세의 큰 흐린 번호(Paperlogy 110px, 굵기 900, 5%)로 제목 뒤에 깔음.
글 칸 왼쪽 바깥으로 「번호 폭 절반」과 「화면 옆 여백 - 24px」 중 작은 만큼 밀어냄(case-3 ② 와 같은 계산). 가로 넘침은 구역에서 자름.
글자 크기는 바닥값 규칙(type-system-3)이 걸려 있어 --ts3 으로 올림
- 굵은 용어 없이 문장만 있는 목록(3개짜리): 두 칸 위 선 배치에서 세 번째가 혼자 아랫줄에 남아 빈 칸이 생겼음
(고객 「이 세 개 표현하는 게 좀 이상한데?」) → 한 칸 줄 목록(위아래 얇은 선, 앞에 파란 체크). 굵은 용어가 있는 목록(용어+설명)은 그대로 */
.service-story .service-section.rich{padding-top:88px}
.service-section.rich>div:first-child{position:relative}
.service-section.rich>div:first-child>.label{position:absolute;top:-44px;left:0;z-index:0;font-family:'Paperlogy','Pretendard',sans-serif;font-weight:900;letter-spacing:-.02em;color:var(--ink);opacity:.05;pointer-events:none;user-select:none}
.service-section.rich>div:first-child>h2{position:relative;z-index:1;}
@media(min-width:1051px){.service-section.rich,html[lang="en"] .service-section.rich{grid-template-columns:360px minmax(0,1fr)}}
@media(min-width:901px){
.service-story{overflow-x:clip}
.service-section.rich{--sv-num-room:calc(max(32px,(100vw - var(--max)) / 2) - 24px)}
.service-section.rich>div:first-child>.label{transform:translateX(calc(-1 * max(0px,min(50%,var(--sv-num-room)))))}
}
@media(max-width:900px){
.service-story .service-section.rich{padding-top:72px}
.service-section.rich>div:first-child>.label{top:-26px}
}
.service-section.rich .service-body ul:not(:has(b)){grid-template-columns:minmax(0,1fr);border-top:1px solid var(--line)}
.service-section.rich .service-body ul:not(:has(b))>li:nth-child(n){position:relative;padding:16px 0 16px 40px;border:0;border-bottom:1px solid var(--line)}
.service-section.rich .service-body ul:not(:has(b))>li:before{content:"";position:absolute;left:6px;top:calc(16px + .8em - 11px);width:8px;height:15px;border:solid var(--blue);border-width:0 3px 3px 0;border-radius:0;background:none;box-shadow:none;transform:rotate(45deg)}
/* === /notes-e === */
/* === notes-g (2026-10-16) === */
/* ① 맨 위로 단추(.to-top, partials/tail.html · 동작은 site.js notes-g). 사용자 「각 페이지 별로 가장 상단으로 이동하는 화살표
우측 중하단에… 동그란 원 안에 화살표」
- 남색 원(52px, 휴대폰 44px) + 흰 화살표. 떠 있는 [문의하기]와 같은 남색·그림자, 누르거나 올리면 파랑
- 오른쪽 끝은 [문의하기]·[검토] 단추 오른쪽 끝과 같게(20px, 700px 이하 12px). 그 단추들 위로 12px 띄워 쌓음
1051px 이상: 문의 단추 없음 → 아래 20px (검토 단추 있으면 76px, 미리보기 막대만 있으면 66px)
701~1050px : 문의 단추(높이 44px) 위 → 76px (검토 132px, 막대 122px)
700px 이하 : 문의 단추(아래 12px) 위 → 68px (검토 124px, 막대 114px)
- 화면 절반 넘게 내려야 보임(.show). 꼬리말이 올라오면 JS 가 --to-top-lift 만큼 위로 비켜 저작권 줄을 가리지 않음
- 문의 창이 열려 있거나 휴대폰 메뉴가 열려 있으면 숨김 */
.to-top{position:fixed;right:20px;bottom:20px;z-index:8900;display:flex;align-items:center;justify-content:center;
width:52px;height:52px;padding:0;border:1px solid rgba(255,255,255,.28);border-radius:50%;cursor:pointer;
background:var(--navy);color:#fff;box-shadow:0 8px 22px rgba(4,22,36,.24);
transform:translateY(calc(-1 * var(--to-top-lift, 0px)));
opacity:0;visibility:hidden;transition:opacity var(--t-base),visibility var(--t-base),background-color var(--t-fast)}
.to-top.show{opacity:1;visibility:visible}
.to-top:hover{background:var(--blue)}
.to-top svg{width:24px;height:24px;display:block}
body:has(.preview-bar) .to-top{bottom:66px}
body:has(.rv-root) .to-top{bottom:76px}
body:has(.modal-shell.open) .to-top,body.nav-open .to-top{display:none}
@media(max-width:1050px){
.to-top{bottom:76px}
body:has(.preview-bar) .to-top{bottom:122px}
body:has(.rv-root) .to-top{bottom:132px}
}
@media(max-width:700px){
.to-top{right:12px;bottom:68px;width:44px;height:44px}
.to-top svg{width:20px;height:20px}
body:has(.preview-bar) .to-top{bottom:114px}
body:has(.rv-root) .to-top{bottom:124px}
}
/* === /notes-g === */
/* === notes-f (2026-10-16) === */
/* DX-Sky GCS·AI 화면 메모와 사이트 전체 줄바꿈 규칙
① 제품 이름 개요 제목(DX-Sky GCS / AI Mission Analysis, 같은 역할인 DX-Sky Drone 포함) 「가운데 가로 정렬」(1051px 이상 두 칸 배치)
세로 가운데는 notes-c ④ 로 이미 맞아 있었음(실측: 제목 중심 = 설명 덩어리 중심, 한·영 1440·1100 모두 0px 차이).
남은 것은 가로 위치 — 제목 칸(약 420px) 왼쪽 끝에 붙어 있던 짧은 제품 이름을 제목 칸 가운데로.
DX-Sky 개요의 두 줄 문구 제목(「드론 플릿 운영의 모든 단계…」)은 역할이 달라 그대로 둠. 1050px 이하(위아래 쌓임)는 왼쪽 그대로 */
@media(min-width:1051px){
:is(#gcs-overview,#drone-overview,#analysis-overview) .split.no-media>div>h2{text-align:center}
}
/* ② GCS 「DX-Sky GCS만의 기능」 항목 5개: 글 왼쪽·화면 오른쪽(화면 칸 약 600px) → 글 위(본문 폭), 화면 아래(본문 폭).
고객 「화면이 잘 안 보여서, 위의 글을 가로로 쓰고 이미지를 아래 붙이는 식으로. 이 페이지만」. 화면 원본은 1521~1858px 폭이라 본문 폭(최대 1280px)으로 펼쳐도 늘어나지 않음 */
#gcs-special .sky-showcase,#gcs-special .sky-showcase.reverse{grid-template-columns:minmax(0,1fr);gap:28px;align-items:start}
#gcs-special .sky-showcase .sky-showcase-copy{order:1}
#gcs-special .sky-showcase .sky-showcase-media{order:2}
/* ⑦ 단어 중간 줄바꿈 금지(고객 「단어 잘리는 거 허용 안 해. 단어 단위로 자를 거야 … 전부」)
본문은 원래 word-break:keep-all(한글도 띄어쓰기에서만 줄바꿈)인데, 카드 제목 두 곳이 overflow-wrap:break-word 라
칸보다 긴 영어 단어를 글자 사이에서 끊었음(실측: 영문 1100px 고객사례 카드 「Telecommunicati|ons」).
→ 사이트 전체 overflow-wrap 을 normal 로 되돌림. 예외: 그림 출처 DOI·참고문헌 링크(.fig-doi, .ocean-refs a)는 주소라 칸보다 길면 끊는 것(anywhere) 그대로 */
body,body :not(.fig-doi):not(.ocean-refs a){overflow-wrap:normal}
/* 단어를 끊지 않으면 칸보다 긴 영어 단어가 칸 밖으로 나가므로, 그런 칸만 넓힘(전 화면 한·영 1440·1100·390 실측으로 찾음)
- 고객사례 넘김 카드(첫 화면·제품·서비스 목록): 1051~1240px 은 카드 4장이 한 화면이라 글 칸 약 200px 인데
영문 「Telecommunications」(22px)가 약 233px → 영문만 이 폭에서 3장씩(1050px 이하와 같은 장 수)
- 「번호 | 제목 | 설명」 줄 목록(.case-scope-lines, 701px 이상): 제목 칸 190px 에 영문 「Communications」(26px) 약 208px → 영문 제목 칸 230px
- 회사 소개 「수상·특허·상표」 줄: 이름 칸 120px 에 영문 「Trademarks」 → 영문 이름 칸 170px(700px 이하 140px)
801~960px(3장)도 같은 이유로 넘쳐 영문만 2장씩(800px 이하와 같은 장 수)
- 서비스 목록 진행 단계 5칸: 번호 옆에 글을 두면 글 칸이 약 120px(1100px) 라 영문 「Requirements」가 넘침
→ 영문만 1051~1240px 은 번호를 글 위로, 701~1050px(칸 약 167px)은 700px 이하처럼 한 줄에 한 단계씩
- GCS 「운용 환경」 줄(701~1050px): 이름 칸 150px 에 영문 「Communication」 약 164px → 영문 이름 칸을 1051px 이상과 같은 170px 로 */
@media(min-width:1051px) and (max-width:1240px){.case-carousel .carousel-track>*{flex:0 0 calc((100% - 36px)/3)}} /* type-v4: 한국어도 3장(4장일 때 1051~1100px 에서 24px 「한국정보통신기술협회」가 카드 칸을 넘음) */
@media(min-width:801px) and (max-width:960px){html[lang="en"] .case-carousel .carousel-track>*{flex:0 0 calc((100% - 18px)/2)}}
@media(min-width:701px){html[lang="en"] .case-scope-lines>div{grid-template-columns:42px 230px minmax(0,1fr)}}
html[lang="en"] .achievement-inline-list>div{grid-template-columns:170px minmax(0,1fr)}
@media(max-width:700px){html[lang="en"] .achievement-inline-list>div{grid-template-columns:minmax(0,1fr);gap:6px}} /* type-v4: 140px 두 칸 → 한 칸 쌓기(20px 라벨 「Trademarks」와 22px 제목 「commercialization」이 두 칸에 다 안 들어감) */
@media(min-width:1051px) and (max-width:1240px){html[lang="en"] .process-inline-list>*{grid-template-columns:minmax(0,1fr);gap:6px}}
@media(min-width:701px) and (max-width:1050px){
html[lang="en"] .process-inline-list{grid-template-columns:minmax(0,1fr)}
html[lang="en"] .process-inline-list>*+*{border-left:0;border-top:1px solid var(--line)}
html[lang="en"] .ops-check-lines p{grid-template-columns:8em minmax(0,1fr)}
}
/* === /notes-f === */
/* === layout-h (2026-10-16) === */
/* ① 왼쪽 「이 페이지 내용」 목차가 있는 화면(1280px 이상)의 가로 배치 — sky-5 ⑥ 과 toc-right(지움)를 이 규칙이 대신함
사용자 「오른쪽 여백을 줄이는데, 본문을 늘리지 말고, 본문과 목차 사이의 여백을 좀 늘리라고. 나머지는 본문 늘려도 돼」
「목차가 좌측에 있어서 좌측은 엄청 빽빽해 보이는데 우측은 너무 널널해 보이잖아」
전에는 목차를 화면 왼쪽 끝(32px)에 붙이고 본문을 기본 틀 자리에 둬, 넓은 화면일수록 오른쪽만 비었음(1920px: 왼쪽 80 / 오른쪽 320px).
→ 목차(200px) + 간격(88px) + 본문(최대 --max 1280px)을 한 묶음으로 보고 화면 가운데에 둠. 좌우 바깥 여백은 같게
바깥 여백 m = max(32px, (화면 폭 − 200 − 88 − 1280) / 2). 목차 = m ~ m+200, 본문 = m+288 ~ 화면 폭−m
- 1440px: m 32 → 목차 32~232, 본문 320~1408(1088px, toc-right 이전 본문 폭과 같고 간격만 40 → 88px)
- 1920px: m 176 → 목차 176~376, 본문 464~1744(1280px)
- 퍼센트는 화면 폭(목차 줄·구역 폭) 기준이라 스크롤바 폭이 들어가도 맞음. 목차 윗선·sticky·글자(safety-3), 1280px 미만 칩 줄은 그대로 */
@media(min-width:1280px){
/* type-v4: 목차 글 24px 에서 영문 「Commendations」가 200px 칸을 넘어 목차 폭 200 → 220, 묶음 288 → 308 */
.detail-tabs .wrap{width:220px;margin-left:max(32px,calc((100% - 308px - var(--max)) / 2));margin-right:0}
.detail-tabs~.detail-section:not(.back-section)>.wrap{
width:100%;margin-left:0;margin-right:0;
padding-left:calc(max(32px,(100% - 308px - var(--max)) / 2) + 308px);
padding-right:max(32px,calc((100% - 308px - var(--max)) / 2))
}
}
/* ② 맨 위로 단추(.to-top, notes-g ①): 사용자 「화살표 버튼은 좀 더 위쪽에 body:has(.rv-root) .to-top { bottom: 126px; } 이 정도로」
검토 단추가 있을 때(1051px 이상) 76 → 126px. 나머지 경우도 같은 50px 씩 올림(문의·검토 단추와 겹치지 않음, 꼬리말 피하기는 JS 가 bottom 값을 읽어 그대로 동작)
1051px 이상: 20 → 70 (막대 66 → 116, 검토 76 → 126)
701~1050px : 76 → 126 (막대 122 → 172, 검토 132 → 182)
700px 이하 : 68 → 118 (막대 114 → 164, 검토 124 → 174) */
.to-top{bottom:70px}
body:has(.preview-bar) .to-top{bottom:116px}
body:has(.rv-root) .to-top{bottom:126px}
@media(max-width:1050px){
.to-top{bottom:126px}
body:has(.preview-bar) .to-top{bottom:172px}
body:has(.rv-root) .to-top{bottom:182px}
}
@media(max-width:700px){
.to-top{bottom:118px}
body:has(.preview-bar) .to-top{bottom:164px}
body:has(.rv-root) .to-top{bottom:174px}
}
/* ③ 문의하기 글자 크기: 사용자 「전반적으로 문의하기 부분도 글자크기 키워줘」
문의 창(라벨 12·입력칸 17·동의 12·접수 단추 16·안내 14px 이었음)을 본문 글자 체계(읽는 글 최저 22px)에 맞춤.
라벨·입력칸·선택지·동의·접수 단추·안내 22px, 남색 칸 제목 40 → 최대 46px. 떠 있는 [문의하기] 18 → 22px(높이 44px 그대로),
머리글 [문의하기] 20 → 22px, 휴대폰 서랍 안 [문의하기] 16 → 22px. 창 높이를 넘으면 창 안이 스크롤되고 닫기(x)는 sticky 로 늘 보임(chrome-2) */
#contactModal .contact-aside h3{font-size:clamp(32px,3.2vw,46px);line-height:1.35}
#contactModal .form-row label{margin-bottom:8px}
#contactModal .form-row :is(input,select,textarea){padding:12px 14px}
#contactModal .form-row textarea{height:160px}
#contactModal .consent{display:flex;align-items:flex-start;gap:10px}
#contactModal .consent input{flex:none;width:22px;height:22px;margin:6px 0 0}
#contactModal #contactSubmit{min-height:60px}
#contactModal .contact-form{gap:20px}
/* 글자가 커져 1051px 이상에서도 창 높이(88vh)를 넘기 쉬워짐(1440x900 한글 829 > 792px). 닫기(x)가 absolute 라 창 안을 내리면 위로 사라지므로
1050px 이하(chrome-2)와 같은 방식으로 sticky 로 붙임: 입력 칸 칸(2열)에 겹쳐 두고 오른쪽 위에 고정 */
@media(min-width:1051px){
#contactModal .contact-panel>.contact-aside{grid-area:1/1}
#contactModal .contact-panel>.contact-form{grid-area:1/2}
#contactModal .contact-panel>.modal-close{position:sticky;top:10px;right:auto;grid-area:1/2;justify-self:end;align-self:start;margin:10px 10px 0 0;background:#fff;box-shadow:0 2px 10px rgba(3,15,25,.22)}
}
@media(max-width:1050px){body .float-contact{font-size:22px}}
@media(min-width:1051px){.main-nav>.nav-contact{font-size:22px}}
@media(max-width:1050px){.main-nav .nav-contact{font-size:22px}}
/* === /layout-h === */
/* === service-hero (2026-10-16) === */
/* 서비스 목록·상세 6장 머리말을 고객사례 상세와 같은 가운데 머리(.sub-hero.short.is-centered + 이동 경로)로 바꿈.
사용자 「서비스 화면 제목을 고객사례처럼 가운데로 정렬할까요? → 네」
- 정렬·제목 크기·이동 경로 크기·간격은 case-template 의 .is-centered 규칙과 글자 바닥값 규칙이 이미 같게 맞춰 줌
- 부제만 일반 규칙(30px, 701~1050px 26px, 700px 이하 23px)을 받아 고객사례 상세(25px / 700px 이하 20px, type-scale ⑨)보다 커서 같은 값으로 맞춤 */
/* === /service-hero === */
/* === notes-i (2026-10-16) === */
/* ① 구역 제목 → 소개문 → 본문(목록·표) 간격의 균형
사용자 메모(DX-Sky AI 「품질 검수와 재촬영 구역 산출」) 「위의 여백은 널널한데, 아래 부차설명과 표의 간격은 너무 좁잖아.
밸런스가 가장 중요하다고. 다른 부분도 일괄검사해」
전 화면 한·영 1440·1100·390 을 재 보니(제목 → 소개문 → 다음 덩어리의 첫 선·글자까지) 대부분 34~64px 인데 아래 셋만 좁았음
- DX-Sky AI 품질 검수 구역: 소개문 바로 밑에 목록 윗선이 붙어 0px(390px 은 32px)
- 회사 소개 「성과와 지식재산」 줄 목록: 22px
- 회사 수상 「국제표준화 기구 의장단 임명」 기록 목록: 24px
→ 이 셋의 소개문-본문 간격을 48px(700px 이하 40px)로 맞춤. 제목-소개문(16~34px)과 구역 위 여백(72~112px) 사이 값.
버튼·글자 링크 줄(26px 안팎)과 사례 본문 속 목록은 「본문 덩어리」가 아니라 글 흐름이라 그대로 둠 */
/* 수상 화면은 #award-role .record-list{margin-top:24px}(1215행)가 이 규칙보다 우선이라 같은 id 를 붙임 */
h2+p+:is(.case-scope-lines,.achievement-inline-list,.record-list),#award-role h2+p+.record-list{margin-top:48px}
@media(max-width:700px){h2+p+:is(.case-scope-lines,.achievement-inline-list,.record-list),#award-role h2+p+.record-list{margin-top:40px}}
/* 표준화 화면 「표준화는 기술을 시장과 연결하는 출발점입니다.」: 980px 이하에서 제목 묶음과 원칙 목록이 위아래로 쌓이면
둘 사이가 칸 간격(30px, 700px 이하 20px)뿐이라 같은 값으로 */
@media(max-width:980px){.standard-intro-grid{row-gap:48px}}
@media(max-width:700px){.standard-intro-grid{row-gap:40px}}
/* ② 그림 위 제목(「시스템 구성」 DX-Sky Drone, 「임무 운영 흐름」 DX-Sky 개요 — 같은 클래스)
사용자 「글자 크기 언제 바꿔주는데? 다른 타이틀이랑 글자크기가 다르잖아」. 이 글은 아래 그림의 제목이라
구역 안 소제목 단계(DX-Ocean·DX-Safety 소제목 clamp(28px,2.7vw,38px), 700px 이하 26px)에 맞춤.
전: 26px(1051px 이상)·26px(1100)·22px(390) → 후: 38px(1440)·29.7px(1100)·26px(390) */
.mission-lifecycle-wrap>.eyebrow{letter-spacing:-.03em}
/* ③ 버튼만 있는 맨 아래 「← DX-Sky 제품군으로 돌아가기」 구역(DX-Sky GCS·Drone·AI — 전 화면을 재 보니 이 셋뿐)
사용자 「이 부분의 배경이 하얄 필요가 있어? 위랑 동일하게 가」 「다른 페이지도 별다른 내용 없이 버튼만 있다면
굳이 색 구분하지 말고 위의 단락과 동일 배경으로 가」
전: 위 구역은 회색(--soft)인데 이 구역만 흰색, 사이에 가는 선, 위 내용 끝에서 단추까지 147px(1100 123, 390 107)
→ 위 구역이 회색이면 같은 회색(흰색이면 원래 흰색 그대로), 선을 없애고, 위 구역 아래 여백을 구역 간격의 절반으로 줄여 한 덩어리로 */
.soft+.back-section{background:var(--soft)}
.detail-section:has(+.back-section){padding-bottom:calc(var(--space-section) * .5)}
.back-section .wrap{padding-top:0;border-top:0}
/* === /notes-i === */
/* === ocean-7 (2026-10-16) ===
DX-Ocean 「통신 상태를 수집하고…」 구역 그래프 아래 안내 줄(.ocean-charts-note, 「※ 두 그래프는 …」)
① 그래프와의 위 간격을 조금 더 띄움: 위 여백 20px → 36px (그래프 아래 끝에서 글까지 60px → 76px)
② 글자 크기를 그래프 출처 줄(.fig-credit, 20px / 휴대폰 16px)과 같게. 줄 간격도 출처 줄과 같은 1.5
(이전 22px / 휴대폰 18px, 줄 간격 1.78) */
#ocean-tool .ocean-charts-note{margin-top:36px;}
/* === /ocean-7 === */
/* === rnd-2 (2026-10-16) === */
/* 연구개발(/rnd) 사용자 메모 처리. 새 모양을 만들지 않고 다른 화면에서 이미 정한 요소를 그대로 씀 */
/* ⑦ 구역 배경 번갈아(고객 「이전에 연구개발 페이지는 단락별로 배경색을 다르게 가져갔는데 왜 여기는 모두 동일하지?」)
HTML 에는 「핵심 연구 분야」(.rnd-area-section)와 「확장 연구 영역」(.emerging-research)에 soft 가 처음부터 붙어 있었으나
바탕을 칠하는 규칙이 .section.soft·.standard-topic.soft 뿐이라 두 구역이 흰색이었음 → 흰 화면 위에 회색 구역은 산학연 한 곳뿐.
회사소개·표준화 화면과 같은 순서로: 머리말·첫 구역 흰색 → 회색 / 흰 / 회색 / 흰 / 회색.
「핵심 연구 분야」 아래 여백이 0 이라(줄 목록 밑선이 구역 끝) 바탕을 칠하면서 위아래를 구역 간격(--space-section)으로 */
/* 바탕 칠하기는 soft-bg 블록의 공통 규칙(section.soft)으로 옮김 */
body.page-rnd .rnd-area-section{padding:var(--space-section) 0}
/* ① 주제 줄 번호(01~04, .topic-index): 파란 작은 글자 → 제품 목록(.prod-num)·고객사례 상세(.cs-num)·서비스 상세 구역 번호(notes-e ⑦)와
같은 큰 흐린 번호(Paperlogy 110px, 굵기 900, 5%)를 제목 뒤에 깔고, 제목이 번호 아래쪽 절반에 걸치게 둠.
글 칸 왼쪽 바깥으로 「번호 폭 절반」과 「화면 옆 여백 - 24px」 중 작은 만큼 밀어냄(case-3 ②·notes-e ⑦ 과 같은 계산).
같은 줄 구조인 표준화 화면(.standard-topic)도 같은 클래스라 함께 바뀜(그 화면 HTML 은 그대로).
번호가 칸을 차지하지 않으므로 72px 번호 칸을 없애고 제목 칸 + 본문 칸 두 칸으로 */
.topic-row{position:relative}
.topic-row>.topic-index{position:absolute;top:-10px;left:0;z-index:0;padding:0;font-family:'Paperlogy','Pretendard',sans-serif;font-weight:900;letter-spacing:-.02em;color:var(--ink);opacity:.05;pointer-events:none;user-select:none}
.topic-row.topic-row-deep>.topic-index{top:24px}
.topic-row>.topic-title,.topic-row>.topic-body{position:relative;z-index:1}
.topic-row,.topic-row.topic-row-deep{grid-template-columns:360px minmax(0,1fr)}
@media(min-width:901px){
.rnd-area-section,.standard-topic{overflow-x:clip}
.topic-row{--tp-num-room:calc(max(32px,(100vw - var(--max)) / 2) - 24px)}
.topic-row>.topic-index{transform:translateX(calc(-1 * max(0px,min(50%,var(--tp-num-room)))))}
}
@media(max-width:1050px){.topic-row,.topic-row.topic-row-deep{grid-template-columns:240px minmax(0,1fr)}}
@media(max-width:900px){
.topic-row>.topic-index{top:14px}
.topic-row.topic-row-deep>.topic-index{top:48px}
}
@media(max-width:700px){
.topic-row,.topic-row.topic-row-deep{grid-template-columns:minmax(0,1fr)}
.topic-row>.topic-body{grid-column:1}
.topic-row>.topic-index,.topic-row.topic-row-deep>.topic-index{top:4px}
}
/* ④ 첫 구역 01~03(변화에서 기회를 찾습니다 등): 위아래 선으로 나눈 표 → 카드 3장 가로 배치(900px 이하는 세로).
카드는 DX-Safety 「공공경보센터(PWC) / Alerti」 카드(safety-4 ①)와 같은 값: 회청색(--soft) 바탕·1px 테두리·둥근 모서리 16px·안쪽 여백 32px.
번호는 ①과 같은 큰 흐린 번호를 카드 안 왼쪽 위에 깔고 제목이 번호 아래쪽 절반에 걸치게 함. 제목 26px(항목 제목 단계), 설명 22px(바닥값) */
body.page-rnd .rnd-approach-v17 .approach-rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;border-top:0}
/* 2026-10-16 사용자 메모 「흰색 배경으로 해.」: 카드 바탕 회색 → 흰색. 구역 바탕도 흰색이라 테두리를 한 단계 진하게(#dce3e9 → #c6d2db, 목차 칩 테두리와 같은 색) */
body.page-rnd .approach-row,body.page-rnd .approach-row:last-child{position:relative;display:block;padding:76px 32px 34px;background:#fff;border:1px solid #c6d2db;border-radius:16px;overflow:hidden}
body.page-rnd .approach-row>.n{position:absolute;top:14px;left:24px;z-index:0;padding:0;font-family:'Paperlogy','Pretendard',sans-serif;font-weight:900;letter-spacing:-.02em;color:var(--ink);opacity:.05;pointer-events:none;user-select:none}
body.page-rnd .approach-row>strong{position:relative;z-index:1;display:block;line-height:1.35;margin:0 0 12px}
body.page-rnd .approach-row>p{position:relative;z-index:1;max-width:none}
@media(max-width:900px){
body.page-rnd .rnd-approach-v17 .approach-rows{grid-template-columns:minmax(0,1fr);gap:16px}
body.page-rnd .approach-row,body.page-rnd .approach-row:last-child{padding:54px 20px 26px}
body.page-rnd .approach-row>.n{top:10px;left:16px}
}
/* ⑥ 「논문과 발표, 공동연구」 목록: 날짜 옆 문서 종류(표준 문서·논문·발표)를 HTML 에서 뺌 → 위에는 날짜 하나만(회색) */
body.page-rnd .activity-meta{color:var(--muted)}
/* ⑤ 「실제 제품과 구축 서비스로 연결」 목록: 파란 분류 라벨 칸(「공공안전 연구개발」 등)과 맨 아래 「제품 · 서비스 · 표준화 활동」 링크 줄을 HTML 에서 뺌.
줄마다 「분야 이름(위 핵심 연구 분야의 제목과 같은 말) | 제품 · 서비스 링크」 두 칸만 남김. IoT 표준·시험 줄 추가(CertMate · 사물인터넷 플랫폼 구축) */
body.page-rnd .application-row{grid-template-columns:minmax(0,1fr) auto;gap:12px 36px}
body.page-rnd .application-links{grid-column:auto;gap:12px 32px}
@media(max-width:700px){
body.page-rnd .application-row{grid-template-columns:minmax(0,1fr)}
}
/* === /rnd-2 === */
/* === crumb (2026-10-16) === */
/* 사용자 「이 목차(이동 경로)가 어디는 있고 어디는 없는데 이상하지 않아?」
이동 경로 규칙: 목록(첫 단계) 화면에는 없음, 그 아래 상세 화면에는 모두 있음. 마크업은 한 가지
글자 크기·색·위치·제목과의 간격은 기존 .crumb / .sub-hero .crumb 규칙(22px, 휴대폰 18px, 제목 위 18px)을 그대로 씀.
가운데 머리말(.is-centered)은 가운데, 나머지는 왼쪽 → 기존 규칙으로 이미 그렇게 됨 */
/* ① 「← DX-Sky 제품군으로 돌아가기」(GCS·Drone·AI 화면 맨 아래): 1280px 이상에서 기본 틀(1440px: x=80)에 있어
왼쪽 목차 화면의 본문 시작선(layout-h ①: 바깥 여백 m + 목차 200 + 간격 88)과 어긋났음 → 본문 칸과 같은 자리·폭으로.
위 구분선도 본문 칸 폭만큼만 그어짐. 1280px 미만은 목차가 칩 줄이라 기본 틀 그대로 */
@media(min-width:1280px){
.detail-tabs~.back-section>.wrap{
width:auto;
margin-left:calc(max(32px,(100% - 288px - var(--max)) / 2) + 288px);
margin-right:max(32px,calc((100% - 288px - var(--max)) / 2))
}
}
/* === /crumb === */
/* === notes-j (2026-10-16) === */
/* ① 첫 화면 고객사례 카드 높이 = 바로 위 사업분야 카드 높이(사용자 「위의 기술의 연결~ 이 파트 아래 작성한 카드와 높이 동일하게」)
- 전: 고객사례 min-height 255px(17행 .case-grid .image-card), 사업분야 330px(14행, 700px 이하 240px, home-flow).
영문 고객사례는 card-zones 끝의 --zd:112px 로 설명 칸이 사업분야(142px, 801~1240px 174px)보다 작아 높이가 달랐음
- 후: 최소 높이와 제목·설명 칸(--zt·--zd)을 사업분야 카드와 같은 값으로 둠 → 두 카드가 같은 식으로 높이가 정해짐 */
.page-home .case-carousel .image-card{min-height:330px}
@media(max-width:700px){.page-home .case-carousel .image-card{min-height:240px}}
/* ② CertMate 머리말 부제(p.hero-lead): 47행 .hero-lead{font-size:24px!important;font-weight:800;max-width:920px!important} 때문에
이 화면만 굵고 작았음. 다른 제품 화면 부제(type-scale ① body :is(.sub-hero,…) p)와 같은 값으로 덮음.
원래 규칙이 !important 라 같은 방식으로만 덮을 수 있음 */
body .sub-hero p.hero-lead{font-weight:400;color:var(--t3);max-width:62em !important}
/* ③ 왼쪽 「이 페이지 내용」 목차(1280px 이상) 스크롤 후 고정 위치
사용자 「스크롤 다운하면 너무 상단에 붙어 있는 것 같거든? 화면 중앙 상단쯤에 더 있게」
- 전: 머리글 아래 40px(1440x900 에서 목차 제목 윗선 126px)
- 후: 머리글 아래 화면 높이의 17%(900px 화면 153px → 윗선 239px).
목록 전체가 화면 안에 들도록 「화면 높이 - 머리글 - 520px」을 상한으로 둠
(520px = 가장 긴 목록인 영문 DX-Sky 개요 7항목의 높이 489px + 여유 31px), 하한은 예전 40px
- 처음(스크롤 전) 위치와 윗선 맞춤(safety-3 의 --toc-top)은 그대로. 고정 위치(top)만 바꿈 */
@media(min-width:1280px){
.detail-tabs,.sky-tabs~.detail-tabs{--toc-stick:max(40px,min(17vh,100vh - var(--header) - 520px));top:calc(var(--header) + var(--toc-stick) - var(--toc-top))}
}
/* === /notes-j === */
/* === type-v4 (2026-10-16) ===
사이트 전체 글자 크기를 역할 변수 하나로 정함. 화면별 블록이 크기를 따로 덮어쓰던 것을 모두 지우고 여기서만 정함
- 사용자: 「타이틀 얼마 소제목 얼마, 본문 크기 얼마, 주석 얼마 이런 식으로」 「최소 글자크기 24px로」 → 승인된 크기표(A안)
- 지운 것: 바닥값 규칙 2개(type-scale ⑥ max(20px,1em), type-system-3 ① max(22px,1em,var(--ts3))), --ts3 체계와 @property,
본문 영역 font-size !important, 화면별 블록(notes-a~j, safety-3/4, ocean-2~7, products-2/3, case-template, case-3, awards-3,
sky-5, ai-page, type-scale, type-system-3, home-tune(-2), home-flow, type-floor, en-layout 등)의 font-size·짝 line-height 선언.
같은 선언 안의 다른 속성(margin, color 등)은 그대로 둠
- 남긴 것: 머리글·메뉴·꼬리말·문의창 제목·떠 있는 버튼·SVG 그림 안 글·::before/::after 기호(본문 역할이 아님)
- 쓰는 법: 크기를 바꾸려면 아래 :root 변수만 고침. 화면별 예외도 font-size 를 직접 쓰지 말고 그 범위에서 변수만 바꿈
구간: 데스크톱 1051px~ / 태블릿 701~1050px / 휴대폰 ~700px */
:root{
--fs-display:clamp(54px,6.7vw,80px); /* 첫 화면 h1 — 사용자 지정(home-tune) */
--fs-hero-sub:27px; /* 첫 화면 부제 — 사용자 지정(home-tune) */
--fs-h1:clamp(40px,4.4vw,60px); /* 페이지 제목 */
--fs-hero-lead:30px; /* 머리말 소개문 */
--fs-hero-lead-c:25px; /* 가운데 정렬 머리말 소개문 — 사용자 지정(case-template·service-hero 25) */
--fs-h2:clamp(30px,3.2vw,46px); /* 구역 제목 */
--fs-h3:clamp(28px,2.7vw,38px); /* 구역 안 소제목 */
--fs-intro:28px; /* 구역 소개문(구역 제목 바로 아래 첫 글) */
--fs-title:28px; /* 카드·항목 제목 */
--fs-article:26px; /* 기사 제목(뉴스 카드) */
--fs-body:24px; /* 본문·목록·라벨·버튼·날짜·그림 설명·이동 경로·목차·문의창 */
--fs-cite:20px; /* 그림 출처(DX-Ocean) — 사용자 지정 예외 */
--fs-legal:13px; /* 약관 링크·라이선스 — 사용자 지정 예외 */
--fs-group:30px; /* 수상 특허 묶음 제목 — 사용자 지정 예외 */
--fs-deco:110px; /* 장식 큰 번호 */
--lh-display:1.1;--lh-h1:1.15;--lh-lead:1.7;--lh-head:1.25;--lh-title:1.35;--lh-intro:1.8;--lh-body:1.75;--lh-deco:1
}
html[lang="en"]{--fs-display:clamp(40px,5vw,68px);--fs-h2:clamp(30px,2.8vw,40px)} /* 영문 첫 화면 h1 은 지금 값 유지, 영문 구역 제목 최대 40(긴 단어 넘침) */
@media(min-width:701px) and (max-width:1050px){
:root{--fs-hero-lead:26px;--fs-h3:28px;--fs-intro:26px;--fs-title:26px;--fs-group:26px}
}
@media(max-width:900px){:root{--fs-deco:72px}}
@media(max-width:700px){
:root{--fs-hero-sub:20px;--fs-h1:32px;--fs-hero-lead:22px;--fs-hero-lead-c:20px;--fs-h2:30px;--fs-h3:26px;--fs-intro:22px;
--fs-title:22px;--fs-article:22px;--fs-body:20px;--fs-cite:16px;--fs-group:24px;--lh-lead:1.6}
html[lang="en"]{--fs-h2:27px}
}
/* 본문 기본값: 머리글·꼬리말·창을 뺀 화면 내용 전체가 이 값을 물려받음. 따로 정하지 않은 글은 모두 본문 크기 */
body>:not(header,footer,.modal-shell,.float-contact,.to-top){font-size:var(--fs-body);line-height:var(--lh-body)}
:is(small,sub,sup,code,kbd){font-size:inherit}
#contactModal :is(.form-row label,.form-row input,.form-row select,.form-row textarea,.consent,.consent span,#contactSubmit,.form-status){font-size:var(--fs-body);line-height:1.5}
#contactModal .form-row label{line-height:1.4}
/* 첫 화면 */
.main-hero h1{font-size:var(--fs-display);line-height:var(--lh-display)}
.main-hero p{font-size:var(--fs-hero-sub);line-height:1.55}
/* 페이지 머리말 */
h1{font-size:var(--fs-h1);line-height:var(--lh-h1)}
.sub-hero p{font-size:var(--fs-hero-lead);line-height:var(--lh-lead)}
.sub-hero.is-centered{--fs-hero-lead:var(--fs-hero-lead-c)}
/* 구역 제목 */
h2{font-size:var(--fs-h2);line-height:var(--lh-head)}
/* 구역 안 소제목(h3급·보조 구역 제목) */
.cs-sec h2,.cs-about h2,.cs-related-head h2,.section-title.small,.prod-name,
.topic-title h3,.ocean-evidence :is(.ocean-architecture,.ocean-boundary) h3,.safety-public-flow h3,.pwc-validation h3,
.alerti-screen-section>h3,.alerti-story-copy h4,.sky-showcase-copy h3,.gcs-basic-title,.mission-lifecycle-wrap>.eyebrow{font-size:var(--fs-h3);line-height:var(--lh-head)}
/* 카드·항목 제목 */
h3,h4,summary,.cs-glance h2,.sky-video-block>.eyebrow,
:is(.feature-line,.service-proof-row,.consulting-row,.leadership-row,.application-row,.approach-row,.activity-row)>strong,
.activity-head>strong,.safety-flow-lines>div>strong,.case-scope-lines>div>strong,.principle-list>div>strong,.achievement-inline-list>div>strong,
:is(.mission-lifecycle,.analysis-pipeline,.ocean-data-flow,.response-flow)>li>strong,.pwc-validation-list p>strong,.alerti-value-lines p>strong,
.record-main strong,.cs-list li strong,.cs-card strong,a.service-relation strong{font-size:var(--fs-title);line-height:var(--lh-title)}
/* 고객사례 넘김 카드(1051~1240px)와 영문 사례 카드는 기관명이 칸을 넘어 한 단계 낮춤 */
@media(min-width:1051px) and (max-width:1240px){.case-grid .image-card{--fs-title:24px}}
@media(min-width:701px){html[lang="en"] .case-grid .image-card{--fs-title:24px}}
/* 고객·협력기관 로고 줄 머리(「고객 및 협력기관」)는 구역 제목이 아니라 라벨 */
.trust-banner-title{font-size:var(--fs-body);line-height:1.3}
/* 기사 제목 */
:is(.news-card,.news-card-item) h3{font-size:var(--fs-article);line-height:1.45}
/* 구역 소개문: 구역 제목(또는 소제목) 바로 아래 첫 글. 위치로 정함 */
.section-copy,.lead,.cs-lead,.editorial-lead-title p,.consulting-intro>p:not(.scope-note),.cs-about p,
h2+p,:is(.topic-title h3,.ocean-evidence :is(.ocean-architecture,.ocean-boundary) h3,.safety-public-flow h3,.pwc-validation h3,
.alerti-screen-section>h3,.gcs-basic-title,.section-title.small)+p,.cert-journey-note,
#safe-pwc .pwc-intro>div:first-child>p,.case-group-head>div>p{font-size:var(--fs-intro);line-height:var(--lh-intro)}
.prod-name+p{font-size:var(--fs-body);line-height:var(--lh-body)}
/* 사진 카드 설명은 두세 줄짜리 짧은 글이라 줄 간격을 좁힘(칸 높이 --zd 계산 기준) */
.image-card p,.field-card p,.cs-related .cs-card-desc{line-height:1.5}
/* 장식 큰 번호 */
.cs-num,.prod-num,.topic-row>.topic-index,.service-section.rich>div:first-child>.label,body.page-rnd .approach-row>.n{font-size:var(--fs-deco);line-height:var(--lh-deco)}
/* 예외(사용자 지정) */
:is(#ocean-overview,#ocean-terminal,#ocean-tool) .fig-cite .fig-credit,:is(#ocean-overview,#ocean-terminal,#ocean-tool) .fig-cite .fig-credit *,
#ocean-tool .ocean-charts-note{font-size:var(--fs-cite);line-height:1.5}
.alerti-doc-links span,.alerti-doc-links a,.ocean-refs .ocean-refs-lic,.ocean-refs .ocean-refs-lic *{font-size:var(--fs-legal);line-height:1.3}
#award-patent h3.record-group.is-accent{font-size:var(--fs-group);line-height:1.3}
/* 사진 카드 제목 칸(--zt)·설명 칸(--zd): px 로 박아 두던 값(card-zones·cases-list-3·type-system-3 ④·notes-j)을 지우고
「줄 수 × 글자 크기 × 줄 간격」으로 계산. 줄 수(--zt-n, --zd-n)는 2026-10-16 전 화면 실측에서 그 구간·언어·카드 종류의 가장 긴 글 기준.
설명 칸 13px = 위 여백 12 + 흰 선 1 */
.image-card,.field-card{--zt-n:2;--zd-n:3;--zt:calc(var(--zt-n) * var(--fs-title) * 1.35);--zd:calc(13px + var(--zd-n) * var(--fs-body) * 1.5)}
body.page-cases .case-grid .image-card{--zt-n:1;--zd-n:2;height:auto;min-height:288px}
html[lang="en"] .field-card{--zt-n:3;--zd-n:4}
html[lang="en"] .case-grid .image-card{--zt-n:4;--zd-n:5}
html[lang="en"] .tech-grid .image-card{--zt-n:2;--zd-n:4}
html[lang="en"] body.page-cases .case-grid .image-card{--zt-n:3;--zd-n:2;height:auto;min-height:360px}
/* 영문 첫 화면 카드는 글이 길어 칸이 커지므로 사업분야·고객사례 카드 높이를 함께 올림(notes-j 「두 카드 같은 높이」 유지) */
@media(min-width:701px){html[lang="en"] .page-home :is(.field-card,.case-carousel .image-card,.tech-grid .image-card){min-height:380px}}
@media(min-width:1051px) and (max-width:1240px){
.field-card{--zd-n:4}
html[lang="en"] .field-card{--zt-n:2;--zd-n:2}
html[lang="en"] .case-grid .image-card{--zt-n:3;--zd-n:4}
html[lang="en"] .tech-grid .image-card{--zt-n:3;--zd-n:5}
html[lang="en"] body.page-cases .case-grid .image-card{--zt-n:4;--zd-n:3}
}
@media(min-width:701px) and (max-width:1050px){
body.page-cases .case-grid .image-card{--zd-n:3}
html[lang="en"] .field-card{--zt-n:3;--zd-n:4}
html[lang="en"] .case-grid .image-card{--zt-n:4;--zd-n:4}
html[lang="en"] .tech-grid .image-card{--zt-n:3;--zd-n:5}
html[lang="en"] body.page-cases .case-grid .image-card{--zt-n:4;--zd-n:5}
}
@media(max-width:700px){
.image-card,.field-card{--zt-n:1}
html[lang="en"] .field-card{--zt-n:2;--zd-n:3}
html[lang="en"] .case-grid .image-card{--zt-n:3;--zd-n:4}
html[lang="en"] .tech-grid .image-card{--zt-n:2;--zd-n:4}
html[lang="en"] body.page-cases .case-grid .image-card{--zt-n:2;--zd-n:4}
}
/* 사례 상세 「관련 제품 및 서비스」 카드 제목 칸: 한 2줄, 영 3줄 */
.cs-related .cs-card{grid-template-rows:auto calc(2 * var(--fs-title) * 1.35) 1fr auto}
html[lang="en"] .cs-related .cs-card{grid-template-rows:auto calc(3 * var(--fs-title) * 1.35) 1fr auto}
/* 영문 긴 단어(「Telecommunications」 등)가 사진 카드 제목 칸을 넘지 않게 끊고 하이픈을 붙임(3930행 overflow-wrap:normal 을 이 자리만 풂).
701~980px 연구 분야 줄 머리(.application-type)는 227행에서 150px → 7.5em(24px 에서 「Emergency」 넘침) */
html[lang="en"] :is(.image-card,.field-card) h3{overflow-wrap:break-word;hyphens:auto}
/* === /type-v4 === */
/* === soft-bg (2026-10-16) ===
class 에 soft 가 붙은 구역은 화면과 관계없이 회색 바탕을 칠함. 전에는 .section.soft·.company-story.soft·.case-group.soft 처럼
구역 이름별로만 칠해, 같은 soft 가 붙어도 표준화(/service/standardization)의 「6G와 차세대 산업 네트워크를 준비합니다.」(.editorial-section.soft)와
연구개발 두 구역(rnd-2 ⑦ 에서 rnd 화면만 따로 고침)은 흰색이었음 */
section.soft{background:var(--soft)}
/* === /soft-bg === */
/* /company 첫 머리말: 넓은 한국어 화면에서는 제목과 소개문을 각각 한 줄로 사용한다.
태블릿·휴대폰은 기존 줄바꿈을 유지해 가로 넘침을 막는다. */
@media(min-width:1280px){
html[lang="ko"] body.page-company .sub-hero.is-centered h1,
html[lang="ko"] body.page-company .sub-hero.is-centered p{max-width:none;white-space:nowrap}
html[lang="ko"] body.page-company .sub-hero.is-centered p{font-size:23px;letter-spacing:-.025em}
}