/* ============================================================================
iyu-editorial.css — 산업 다큐멘터리 디자인 레이어
----------------------------------------------------------------------------
목적 : 홈페이지에서 "AI 생성 템플릿" 신호를 제거하고, 실사 이미지와
1px 괘선 기반의 편집(editorial) 체계로 재구성한다.
원칙 : 1) 장식을 빼고 실물을 넣는다 — 그라디언트/광원/글래스 제거, 사진 도입
2) 색은 하나만 쓴다 — cyan·indigo·teal 혼재 → 잉크 + 러스트 1색
3) 리듬을 만든다 — 균일 py-24 → 3단계 수직 리듬
4) 선으로 나눈다 — 그림자 대신 hairline
5) 한글 조판을 지킨다 — keep-all, balance, 하드
무력화
적용 : 페이지 옵트인. 에 `iyu-editorial` 클래스를 붙인 페이지에만 적용된다.
v3.css 는 손대지 않았으므로 한 줄 + body 클래스만 지우면 완전히 롤백된다.
순서 : v3.css → geo-aeo.css → (이 파일) ※ 반드시 마지막에 로드
DOM 차이 : 홈은 main.flex-grow > main > section
서브는 main.flex-grow > section
그래서 공통 규칙은 `main.flex-grow > :is(main, section, div)` 로 쓴다.
:is() 는 인자 중 최고 특정도(여기선 요소 1개)를 취하므로
기존 `> main` 과 특정도가 완전히 동일하다. v3.css 와의
특정도 싸움에서 이긴 규칙들이 조용히 되돌아가지 않는다.
============================================================================ */
/* ── 0. 타이포 자산 ───────────────────────────────────────────────────────
Pretendard: 국내 실무에서 표준처럼 쓰이는 한글 산세리프.
Inter 기본값이 주는 "AI 기본 폰트" 인상을 걷어내는 가장 값싼 한 수.
폰트는 index.html 의 로 불러온다.
여기서 @import 를 쓰면 (HTML → 이 CSS → 폰트 CSS → 폰트 파일) 로
요청이 직렬화되어 첫 렌더가 늦어진다. */
/* ── 1. 토큰 ─────────────────────────────────────────────────────────────
기존 팔레트는 파란기가 도는 #f7f8ff 지면에 cyan/indigo/teal 3색이 섞여 있었다.
지면을 따뜻한 오프화이트로 바꾸고 액센트를 러스트 1색으로 통일한다.
파란색을 지우는 것만으로 "테크 템플릿" 인상의 절반이 사라진다. */
body.iyu-editorial {
--e-ink: #14161a; /* 제목·본문 */
--e-ink-2: #4a515c; /* 부연 */
/* 대비 검증(WCAG 상대휘도) 후 조정한 값이다. 원래는
ink-3 #7b8390 = 3.82:1, ink-4 #a4aab4 = 2.34:1 로
12px 캡션에 쓰기엔 둘 다 AA(4.5:1) 미달이었다. */
--e-ink-3: #646c78; /* 캡션·메타 — 흰 지면 5.31:1, 교차 지면 4.82:1 */
--e-ink-4: #7b8390; /* 아이콘·구분선 등 비텍스트 전용 (3.82:1) */
--e-paper: #ffffff;
--e-paper-2: #f5f4f1; /* 따뜻한 오프화이트 (구 #f7f8ff 대체) */
--e-paper-3: #edebe6;
--e-line: #e3e2dd; /* 기본 괘선 */
--e-line-2: #d1cfc8; /* 강조 괘선 */
--e-line-3: #14161a; /* 헤어라인 강조 */
--e-accent: #a8480b; /* 러스트 — 산업 신호색 계열, 저채도 */
--e-accent-2: #8a3a06;
--e-accent-wash:#f7efe7;
--e-radius: 3px; /* 22px → 3px. 라운드가 클수록 템플릿처럼 보인다 */
--e-radius-lg: 4px;
/* 수직 리듬 3단계 — 전부 py-24(96px) 였던 것을 섹션 무게에 따라 차등 */
--e-space-s: 72px;
--e-space-m: 112px;
--e-space-l: 152px;
--e-maxw: 1200px;
--e-maxw-text: 680px;
--e-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
"Apple SD Gothic Neo", "Segoe UI", "Noto Sans KR", "Malgun Gothic", sans-serif;
--e-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/* ── 2. 지면 ─────────────────────────────────────────────────────────── */
body.iyu-editorial {
background: var(--e-paper) !important;
color: var(--e-ink) !important;
font-family: var(--e-sans) !important;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body.iyu-editorial main.flex-grow > :is(main, section, div) {
/* v3.css 가 깔아둔 3중 radial-gradient 지면을 걷어낸다 */
background: var(--e-paper) !important;
color: var(--e-ink) !important;
}
body.iyu-editorial main.flex-grow > :is(main, section, div) *:not(svg):not(path):not(circle):not(rect):not(ellipse):not(line):not(polyline):not(polygon) {
font-family: inherit;
}
/* ── 3. AI 신호 제거 ──────────────────────────────────────────────────────
측정된 클리셰를 항목별로 무력화한다.
그라디언트 텍스트 3 / 블러 오브 3 / 그리드 오버레이 1 / 글래스 카드 69 /
글로우 섀도 3 / 링 스핀 애니메이션 / animate-ping·pulse 3 */
/* 3-1. 그라디언트 텍스트 → 단색 잉크 */
body.iyu-editorial main.flex-grow > :is(main, section, div) .text-transparent.bg-clip-text,
body.iyu-editorial main.flex-grow > :is(main, section, div) h1 .text-transparent,
body.iyu-editorial main.flex-grow > :is(main, section, div) h2 .text-transparent {
background-image: none !important;
background: none !important;
-webkit-background-clip: border-box !important;
background-clip: border-box !important;
color: var(--e-ink) !important;
-webkit-text-fill-color: var(--e-ink) !important;
}
/* 3-2. 블러 광원 오브 · 메시 그라디언트 · 그리드 오버레이 → 삭제 */
body.iyu-editorial .v3-mesh-bg,
body.iyu-editorial .v3-mesh-bg::before,
body.iyu-editorial .v3-mesh-bg::after,
body.iyu-editorial main.flex-grow > :is(main, section, div) [class*="blur-["],
body.iyu-editorial main.flex-grow > :is(main, section, div) [class*="bg-grid-pattern"],
body.iyu-editorial main.flex-grow > :is(main, section, div) .absolute.inset-0[class*="bg-[linear-gradient(to_right"],
body.iyu-editorial main.flex-grow > :is(main, section, div) > section:first-child::before,
body.iyu-editorial main.flex-grow > :is(main, section, div) > section:first-child::after {
display: none !important;
content: none !important;
background: none !important;
}
/* 3-3. 발광 그림자 → 제거 */
body.iyu-editorial main.flex-grow > :is(main, section, div) [class*="shadow-[0_0_"] {
box-shadow: none !important;
}
/* 3-4. 회전 링 / 궤도 장식 / 펄스 점 → 제거
히어로와 About 의 "빈 상자 안에서 도는 원" 자리는 사진이 대신한다 */
body.iyu-editorial main.flex-grow > :is(main, section, div) [class*="animate-[spin"],
body.iyu-editorial main.flex-grow > :is(main, section, div) .animate-ping {
display: none !important;
}
body.iyu-editorial main.flex-grow > :is(main, section, div) .animate-pulse {
animation: none !important;
}
/* 3-5. 글래스 카드 → 종이 + 괘선.
bg-white/5 69회, border-white/10 41회를 한 번에 정리한다 */
body.iyu-editorial main.flex-grow > :is(main, section, div) [class*="bg-charcoal"]:not(section),
body.iyu-editorial main.flex-grow > :is(main, section, div) [class*="bg-obsidian"]:not(section),
body.iyu-editorial main.flex-grow > :is(main, section, div) [class*="bg-white/5"]:not(section),
body.iyu-editorial main.flex-grow > :is(main, section, div) [class*="bg-white/10"]:not(section) {
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-color: var(--e-line) !important;
}
body.iyu-editorial main.flex-grow > :is(main, section, div) [class*="from-charcoal"]:not(section),
body.iyu-editorial main.flex-grow > :is(main, section, div) [class*="to-charcoal"]:not(section),
body.iyu-editorial main.flex-grow > :is(main, section, div) [class*="from-obsidian"]:not(section),
body.iyu-editorial main.flex-grow > :is(main, section, div) [class*="to-obsidian"]:not(section),
body.iyu-editorial main.flex-grow > :is(main, section, div) [class*="bg-gradient-to"]:not(section) {
background-image: none !important;
}
body.iyu-editorial main.flex-grow > :is(main, section, div) [class*="border-white"],
body.iyu-editorial main.flex-grow > :is(main, section, div) [class*="border-titanium"],
body.iyu-editorial main.flex-grow > :is(main, section, div) [class*="border-cyan"] {
border-color: var(--e-line) !important;
}
/* 3-6. 라운드 통일 해제 — 22px 강제를 3px 로 */
body.iyu-editorial main.flex-grow > :is(main, section, div) [class*="rounded-xl"],
body.iyu-editorial main.flex-grow > :is(main, section, div) [class*="rounded-2xl"],
body.iyu-editorial main.flex-grow > :is(main, section, div) [class*="rounded-3xl"],
body.iyu-editorial main.flex-grow > :is(main, section, div) [class*="rounded-lg"],
body.iyu-editorial main.flex-grow > :is(main, section, div) [class*="rounded-sm"] {
border-radius: var(--e-radius) !important;
}
/* 3-7. 카드 부양(hover:-translate-y) 11회 → 괘선 반응으로 대체.
"떠오르는 카드"는 템플릿의 대표 동작이다 */
body.iyu-editorial main.flex-grow > :is(main, section, div) .hover\:-translate-y-1:hover,
body.iyu-editorial main.flex-grow > :is(main, section, div) .hover\:-translate-y-2:hover,
body.iyu-editorial main.flex-grow > :is(main, section, div) [class*="hover:-translate-y"]:hover {
transform: none !important;
}
body.iyu-editorial main.flex-grow > :is(main, section, div) [class*="group-hover:scale-1"],
body.iyu-editorial main.flex-grow > :is(main, section, div) .group:hover [class*="group-hover:scale-1"] {
transform: none !important;
}
/* 3-8. 액센트 단일화 — cyan/indigo/teal → 러스트 */
body.iyu-editorial main.flex-grow > :is(main, section, div) .text-cyan,
body.iyu-editorial main.flex-grow > :is(main, section, div) .text-amber,
body.iyu-editorial main.flex-grow > :is(main, section, div) [class*="text-purple"],
body.iyu-editorial main.flex-grow > :is(main, section, div) [class*="text-blue-"] {
color: var(--e-accent) !important;
}
body.iyu-editorial main.flex-grow > :is(main, section, div) .bg-cyan {
background-color: var(--e-ink) !important;
}
/* ── 4. 타이포그래피 ──────────────────────────────────────────────────────
한글 조판 규칙. keep-all 이 없어서 1440px 에서 "만듭니 / 다" 로
깨지던 히어로 제목이 여기서 교정된다. */
body.iyu-editorial main.flex-grow > :is(main, section, div) h1,
body.iyu-editorial main.flex-grow > :is(main, section, div) h2,
body.iyu-editorial main.flex-grow > :is(main, section, div) h3,
body.iyu-editorial main.flex-grow > :is(main, section, div) h4,
body.iyu-editorial main.flex-grow > :is(main, section, div) p,
body.iyu-editorial main.flex-grow > :is(main, section, div) li,
body.iyu-editorial main.flex-grow > :is(main, section, div) span {
word-break: keep-all;
overflow-wrap: break-word;
}
body.iyu-editorial main.flex-grow > :is(main, section, div) h1,
body.iyu-editorial main.flex-grow > :is(main, section, div) h2 {
text-wrap: balance;
letter-spacing: -0.025em;
color: var(--e-ink) !important;
font-weight: 700;
}
body.iyu-editorial main.flex-grow > :is(main, section, div) h3 {
letter-spacing: -0.015em;
color: var(--e-ink) !important;
}
body.iyu-editorial main.flex-grow > :is(main, section, div) p,
body.iyu-editorial main.flex-grow > :is(main, section, div) [class*="text-muted"],
body.iyu-editorial main.flex-grow > :is(main, section, div) [class*="text-gray"] {
color: var(--e-ink-2) !important;
line-height: 1.72;
}
/* 4-1. 하드코딩
은 그대로 둔다.
원래 문제였던 "만듭니 / 다" 파열은 위의 word-break:keep-all 로 해결된다.
br 을 숨기면 앞뒤 어절이 공백 없이 붙어버린다("스마트공장의두뇌를"). */
/* 4-2. 영문 mono eyebrow 45회 → 한글 라벨 톤으로.
"Success Stories" 같은 대문자 mono 라벨은 템플릿의 지문이다.
완전히 지우는 대신 무게를 낮춰 부제로 강등시킨다 */
body.iyu-editorial main.flex-grow > :is(main, section, div) .font-mono {
font-family: var(--e-sans) !important;
letter-spacing: 0.02em !important;
text-transform: none !important;
}
body.iyu-editorial main.flex-grow > :is(main, section, div) span.font-mono[class*="tracking-wid"],
body.iyu-editorial main.flex-grow > :is(main, section, div) span[class*="uppercase"][class*="tracking-wid"] {
display: inline-block;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 0.08em !important;
color: var(--e-ink-3) !important;
padding-left: 11px;
position: relative;
margin-bottom: 14px !important;
}
body.iyu-editorial main.flex-grow > :is(main, section, div) span.font-mono[class*="tracking-wid"]::before,
body.iyu-editorial main.flex-grow > :is(main, section, div) span[class*="uppercase"][class*="tracking-wid"]::before {
content: "";
position: absolute;
left: 0; top: 0.42em;
width: 3px; height: 0.86em;
background: var(--e-accent);
}
/* 4-3. 숫자는 mono 유지 — 여기서만 등폭이 의미를 갖는다 */
body.iyu-editorial .e-figure,
body.iyu-editorial .v3-stat-value {
font-family: var(--e-mono) !important;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
/* ── 5. 수직 리듬 ─────────────────────────────────────────────────────────
10개 섹션 전부 py-24 였던 것을 성격별로 3단계로 나눈다.
같은 간격이 열 번 반복되면 스크롤이 "생성된 목록"처럼 읽힌다. */
body.iyu-editorial main.flex-grow > :is(main, section, div) > section {
padding-top: var(--e-space-m) !important;
padding-bottom: var(--e-space-m) !important;
background: var(--e-paper) !important;
border: 0 !important;
overflow: visible !important;
}
/* 서사의 마디가 되는 섹션은 넓게.
※ 위의 기본 섹션 규칙과 특정도를 맞추기 위해 같은 경로를 그대로 쓴다.
단순히 .iyu-home-blueprint 만 쓰면 클래스 수가 모자라 밀린다. */
body.iyu-editorial main.flex-grow > :is(main, section, div) > section.iyu-home-blueprint,
body.iyu-editorial main.flex-grow > :is(main, section, div) > section.iyu-home-cases {
padding-top: var(--e-space-l) !important;
padding-bottom: var(--e-space-l) !important;
}
/* 목록형·보조 섹션은 좁게 */
body.iyu-editorial main.flex-grow > :is(main, section, div) > section.iyu-home-products,
body.iyu-editorial main.flex-grow > :is(main, section, div) > section.iyu-home-support,
body.iyu-editorial main.flex-grow > :is(main, section, div) > section.iyu-home-cta {
padding-top: var(--e-space-s) !important;
padding-bottom: var(--e-space-s) !important;
}
body.iyu-editorial section.iyu-answer-hub {
padding-top: var(--e-space-s) !important;
padding-bottom: var(--e-space-s) !important;
}
/* 지면 교차 — 배경색이 아니라 괘선 하나로 구분한다 */
body.iyu-editorial main.flex-grow > :is(main, section, div) > section.iyu-home-products,
body.iyu-editorial main.flex-grow > :is(main, section, div) > section.iyu-home-capabilities,
body.iyu-editorial main.flex-grow > :is(main, section, div) > section.iyu-home-support {
background: var(--e-paper-2) !important;
}
body.iyu-editorial main.flex-grow > :is(main, section, div) > section + section {
border-top: 1px solid var(--e-line) !important;
}
body.iyu-editorial main.flex-grow > :is(main, section, div) .max-w-7xl {
max-width: var(--e-maxw) !important;
}
/* 섹션 헤더 — 가운데 정렬 남발을 왼쪽 정렬로. 편집물은 왼쪽에서 시작한다 */
body.iyu-editorial .iyu-home-solutions .text-center,
body.iyu-editorial .iyu-home-capabilities .text-center,
body.iyu-editorial .iyu-home-blueprint .text-center,
body.iyu-editorial .iyu-home-architecture .text-center,
body.iyu-editorial .iyu-home-support .text-center {
text-align: left !important;
max-width: 720px;
margin-left: 0 !important;
margin-right: 0 !important;
}
body.iyu-editorial .iyu-home-solutions .text-center p,
body.iyu-editorial .iyu-home-capabilities .text-center p,
body.iyu-editorial .iyu-home-blueprint .text-center p,
body.iyu-editorial .iyu-home-architecture .text-center p,
body.iyu-editorial .iyu-home-support .text-center p {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* ── 6. 내비게이션 ────────────────────────────────────────────────────── */
body.iyu-editorial nav.fixed {
background: rgba(255, 255, 255, 0.92) !important;
border-bottom: 1px solid var(--e-line) !important;
box-shadow: none !important;
backdrop-filter: saturate(1.1) blur(14px);
-webkit-backdrop-filter: saturate(1.1) blur(14px);
}
body.iyu-editorial nav.v3-nav-scrolled {
background: rgba(255, 255, 255, 0.97) !important;
border-bottom-color: var(--e-line-2) !important;
}
/* nav 안에는 /cooperation/ 링크가 두 개 있다 — 우측 CTA 버튼과
메뉴의 "고객지원" 텍스트 링크. 처음엔 둘 다 잡아서 평범한 메뉴 항목이
검은 배경에 검은 글씨가 됐다. 배경 유틸리티가 붙은 쪽(=버튼)만 잡는다.
href 를 정확히 "/cooperation/" 로 묶었더니 영문 nav 의 "/en/cooperation/" 이
빠져 배경만 밝게 남고 글자는 흰색이 돼 대비 1.1:1 이 됐다. $= 로 로케일을 흡수한다. */
body.iyu-editorial nav a[href$="/cooperation/"][class*="bg-titanium"] {
border-radius: var(--e-radius) !important;
background: var(--e-ink) !important;
color: #fff !important;
box-shadow: none !important;
}
body.iyu-editorial #v3-scroll-progress {
background: var(--e-accent) !important;
box-shadow: none !important;
height: 2px !important;
}
/* ── 7. 히어로 ────────────────────────────────────────────────────────────
기존: 좌 텍스트 / 우 회전 궤도 위에 아이콘이 떠 있는 빈 정사각형.
변경: 좌 텍스트 / 우 실사 라인 사진. 최소 높이를 걷어 여백을 되찾는다. */
body.iyu-editorial main.flex-grow > :is(main, section, div) > section:first-child {
min-height: 0 !important;
padding-top: 148px !important;
padding-bottom: var(--e-space-m) !important;
background: var(--e-paper) !important;
border-bottom: 1px solid var(--e-line) !important;
}
body.iyu-editorial .iyu-home-hero h1 {
font-size: clamp(2.25rem, 4.4vw, 3.75rem) !important;
line-height: 1.24 !important;
letter-spacing: -0.035em;
margin-bottom: 22px !important;
max-width: 15em;
}
body.iyu-editorial .iyu-home-hero > div > div > div > p {
font-size: 1.0625rem !important;
max-width: 34em;
margin-bottom: 34px !important;
}
/* 히어로 배지 — 애니메이션 점이 붙은 알약을 납작한 라벨로 */
body.iyu-editorial .iyu-home-hero .inline-flex.items-center.gap-2.rounded-full {
border-radius: var(--e-radius) !important;
background: transparent !important;
border: 0 !important;
border-left: 3px solid var(--e-accent) !important;
padding: 1px 0 1px 11px !important;
margin-bottom: 26px !important;
backdrop-filter: none !important;
}
body.iyu-editorial .iyu-home-hero .inline-flex.items-center.gap-2.rounded-full span:last-child {
color: var(--e-ink-3) !important;
font-weight: 600 !important;
letter-spacing: 0.04em !important;
font-size: 12px !important;
}
/* 히어로 하단 신뢰 배지(빅데이터·산업용 AI·실시간 모니터링) */
body.iyu-editorial .iyu-home-hero .mt-12.pt-8 {
border-top: 1px solid var(--e-line) !important;
margin-top: 40px !important;
padding-top: 22px !important;
gap: 28px !important;
}
body.iyu-editorial .iyu-home-hero .mt-12.pt-8 span {
font-size: 13px !important;
color: var(--e-ink-3) !important;
}
body.iyu-editorial .iyu-home-hero .mt-12.pt-8 svg {
width: 15px !important; height: 15px !important;
color: var(--e-ink-4) !important;
}
/* ── 8. 버튼 ──────────────────────────────────────────────────────────────
알약(999px) + 컬러 글로우 → 사각 + 잉크. 링크형 보조 버튼은 밑줄 */
/* 주 버튼은 어떤 유틸리티 조합과 겹쳐도 대비가 깨지면 안 된다.
실제로 위 탭 타깃 규칙(0,6,3)에 밀려 검은 배경에 검은 글씨가 된 적이 있다.
속성 선택자를 겹쳐 특정도를 (0,6,4) 로 올려 둔다. */
body.iyu-editorial main.flex-grow > :is(main, section, div) a.bg-cyan,
body.iyu-editorial main.flex-grow > :is(main, section, div) a[class*="bg-cyan"],
body.iyu-editorial main.flex-grow > :is(main, section, div) a[class*="bg-cyan"][class*="font-bold"][class*="flex"][class*="items-center"] {
background: var(--e-ink) !important;
color: #fff !important;
border-radius: var(--e-radius) !important;
box-shadow: none !important;
padding: 14px 26px !important;
font-weight: 600 !important;
font-size: 15px !important;
transition: background-color .18s ease !important;
}
body.iyu-editorial main.flex-grow > :is(main, section, div) a.bg-cyan:hover {
background: var(--e-accent) !important;
}
body.iyu-editorial main.flex-grow > :is(main, section, div) a.border,
body.iyu-editorial main.flex-grow > :is(main, section, div) a[class*="border-titanium"] {
background: transparent !important;
color: var(--e-ink) !important;
border: 1px solid var(--e-line-2) !important;
border-radius: var(--e-radius) !important;
padding: 14px 26px !important;
font-weight: 600 !important;
font-size: 15px !important;
}
body.iyu-editorial main.flex-grow > :is(main, section, div) a.border:hover {
border-color: var(--e-ink) !important;
background: transparent !important;
color: var(--e-ink) !important;
}
/* "Learn More →" 류 인라인 링크 */
body.iyu-editorial main.flex-grow > :is(main, section, div) .group:hover .flex.items-center.gap-2 {
gap: 8px !important;
}
/* ── 9. 이미지 시스템 ─────────────────────────────────────────────────────
전체 홈페이지에 ![]()
가 0개였다. 사진이 들어오는 자리의 규칙을 정의한다.
- 라운드 거의 없음, 그림자 없음, 1px 괘선
- 캡션은 사진 아래 왼쪽, 저채도 소문자
- 채도를 살짝 낮춰 지면과 붙인다 (스톡 사진 특유의 들뜸 방지) */
body.iyu-editorial .e-figure {
margin: 0;
position: relative;
}
body.iyu-editorial .e-figure img,
body.iyu-editorial img.e-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--e-radius);
background: var(--e-paper-3);
/* 색보정(채도 0.88 / 대비 1.02)은 이미지에 미리 구워져 있다.
런타임 filter 는 합성 레이어를 만들어 페인트 비용이 들고
일부 캡처·인쇄 경로에서 이미지가 누락된다.
scripts/build_site_images.py 참고. */
}
body.iyu-editorial .e-figure figcaption {
font-family: var(--e-sans) !important;
margin-top: 10px;
font-size: 12px;
line-height: 1.5;
color: var(--e-ink-3);
letter-spacing: 0.01em;
display: flex;
gap: 8px;
align-items: baseline;
}
body.iyu-editorial .e-figure figcaption b {
color: var(--e-ink-2);
font-weight: 600;
white-space: nowrap;
}
/* 히어로 사진 — 오른쪽 컬럼을 채우고 살짝 재단선을 넘긴다 */
body.iyu-editorial .e-hero-figure {
aspect-ratio: 3 / 2;
border: 1px solid var(--e-line);
border-radius: var(--e-radius);
overflow: hidden;
}
body.iyu-editorial .e-hero-figure img { border-radius: 0; }
/* About 정사각형 사진 */
body.iyu-editorial .e-square-figure {
aspect-ratio: 1 / 1;
border: 1px solid var(--e-line);
border-radius: var(--e-radius);
overflow: hidden;
}
body.iyu-editorial .e-square-figure img { border-radius: 0; }
/* 사례 카드 상단 사진 — 카드가 사진으로 시작한다 */
body.iyu-editorial .e-card-figure {
aspect-ratio: 16 / 10;
overflow: hidden;
border-bottom: 1px solid var(--e-line);
background: var(--e-paper-3);
}
body.iyu-editorial .e-card-figure img {
border-radius: 0;
transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
body.iyu-editorial a:hover .e-card-figure img { transform: scale(1.028); }
/* 생성 이미지 고지 — 실사 촬영본으로 교체하기 전까지 정직하게 표시 */
body.iyu-editorial .e-imgnote {
font-size: 11px;
color: var(--e-ink-3);
letter-spacing: 0.01em;
}
/* ── 10. 카드 ─────────────────────────────────────────────────────────────
글래스 + 큰 라운드 + 부양 → 종이 + 괘선 + 정지.
구분은 그림자가 아니라 선이 한다. */
body.iyu-editorial .iyu-home-solutions .grid > div > a,
body.iyu-editorial .iyu-home-products .grid > div > a,
body.iyu-editorial .iyu-home-capabilities .grid > div,
body.iyu-editorial .iyu-home-support .grid > div > a {
border: 1px solid var(--e-line) !important;
border-radius: var(--e-radius) !important;
background: var(--e-paper) !important;
box-shadow: none !important;
padding: 26px !important;
transition: border-color .18s ease !important;
}
body.iyu-editorial .iyu-home-solutions .grid > div > a:hover,
body.iyu-editorial .iyu-home-products .grid > div > a:hover,
body.iyu-editorial .iyu-home-support .grid > div > a:hover {
border-color: var(--e-ink) !important;
}
/* 카드 아이콘 타일 — 56px 컬러 배경 타일을 아이콘만 남기고 걷어낸다.
width:auto 는 이 타일(flex 컨테이너 자신)에는 shrink-to-fit 을 주지 않는다 —
부모가 block 카드(a 태그, div)라 타일이 카드 폭 전체로 늘어나 아이콘만
왼쪽 끝에 남는 얇은 막대가 된다(모바일 폭에서 두드러짐). §23-4 와 같은 문제,
같은 fit-content 수정. */
body.iyu-editorial .iyu-home-solutions .w-14.h-14,
body.iyu-editorial .iyu-home-products .w-14.h-14,
body.iyu-editorial .iyu-home-capabilities .w-14.h-14,
body.iyu-editorial .iyu-home-cases .w-12.h-12 {
width: fit-content !important;
height: auto !important;
background: none !important;
border: 0 !important;
margin-bottom: 18px !important;
justify-content: flex-start !important;
}
body.iyu-editorial .iyu-home-solutions .w-14.h-14 svg,
body.iyu-editorial .iyu-home-products .w-14.h-14 svg,
body.iyu-editorial .iyu-home-capabilities .w-14.h-14 svg {
width: 20px !important;
height: 20px !important;
color: var(--e-ink-3) !important;
stroke-width: 1.5 !important;
}
body.iyu-editorial .iyu-home-solutions h3,
body.iyu-editorial .iyu-home-products h3 {
font-size: 1.25rem !important;
margin-top: 2px !important;
margin-bottom: 8px !important;
}
body.iyu-editorial .iyu-home-solutions p,
body.iyu-editorial .iyu-home-products p {
font-size: 0.9rem !important;
line-height: 1.68 !important;
min-height: 0 !important;
}
/* 카드 안 영문 소제목(Industrial AI Bot 등) */
body.iyu-editorial .iyu-home-solutions .mb-4 > span,
body.iyu-editorial .iyu-home-products .mb-4 > span {
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.06em !important;
color: var(--e-ink-4) !important;
text-transform: uppercase !important;
}
/* ── 11. 사례 카드 ───────────────────────────────────────────────────────
사진이 상단에 붙으므로 내부 패딩을 다시 잡는다 */
body.iyu-editorial .iyu-home-cases .grid > div > a {
border: 1px solid var(--e-line) !important;
border-radius: var(--e-radius) !important;
background: var(--e-paper) !important;
box-shadow: none !important;
overflow: hidden !important;
transition: border-color .18s ease !important;
}
body.iyu-editorial .iyu-home-cases .grid > div > a:hover {
border-color: var(--e-ink) !important;
}
body.iyu-editorial .iyu-home-cases .grid > div > a > .p-8 {
padding: 22px !important;
}
body.iyu-editorial .iyu-home-cases h3 {
font-size: 1.0625rem !important;
line-height: 1.5 !important;
margin-bottom: 10px !important;
}
body.iyu-editorial .iyu-home-cases p {
font-size: 0.875rem !important;
}
/* 산업 태그 */
body.iyu-editorial .iyu-home-cases span.rounded-full {
border-radius: var(--e-radius) !important;
background: var(--e-paper-2) !important;
border: 1px solid var(--e-line) !important;
color: var(--e-ink-2) !important;
font-size: 11px !important;
padding: 3px 8px !important;
}
/* 카드 우하단 원형 화살표 버튼 → 삭제 */
body.iyu-editorial .iyu-home-cases .w-8.h-8.rounded-full {
display: none !important;
}
/* ── 12. 데이터 표기 ──────────────────────────────────────────────────────
근거 없는 라운드 넘버가 AI 인상의 큰 축이었다.
수치 옆에 산출 근거를 붙일 자리를 만든다. */
body.iyu-editorial .e-metric {
display: block;
border-top: 1px solid var(--e-line);
padding-top: 14px;
}
body.iyu-editorial .e-metric-value {
font-family: var(--e-mono);
font-variant-numeric: tabular-nums;
font-size: clamp(1.5rem, 2.4vw, 2rem);
font-weight: 600;
letter-spacing: -0.03em;
color: var(--e-ink);
line-height: 1.1;
display: block;
}
body.iyu-editorial .e-metric-label {
display: block;
margin-top: 6px;
font-size: 13px;
font-weight: 600;
color: var(--e-ink-2);
}
body.iyu-editorial .e-metric-basis {
display: block;
margin-top: 5px;
font-size: 11.5px;
line-height: 1.55;
color: var(--e-ink-3);
}
body.iyu-editorial .v3-stats-bar {
background: transparent !important;
border: 0 !important;
border-top: 1px solid var(--e-line) !important;
border-radius: 0 !important;
box-shadow: none !important;
}
body.iyu-editorial .v3-stat { border-color: var(--e-line) !important; }
body.iyu-editorial .v3-stat-value { color: var(--e-ink) !important; }
body.iyu-editorial .v3-stat-label { color: var(--e-ink-3) !important; }
/* 고객사 로고 스트립 */
body.iyu-editorial .v3-logo-track .v3-logo-item {
color: var(--e-ink-4) !important;
font-family: var(--e-sans) !important;
}
body.iyu-editorial .v3-logo-track .v3-logo-item:hover { color: var(--e-ink-2) !important; }
/* ── 13. 푸터 ─────────────────────────────────────────────────────────── */
body.iyu-editorial footer {
background: var(--e-paper-2) !important;
border-top: 1px solid var(--e-line) !important;
box-shadow: none !important;
}
/* ── 14. 반응형 ─────────────────────────────────────────────────────────── */
@media (max-width: 1023.98px) {
body.iyu-editorial {
--e-space-s: 52px;
--e-space-m: 68px;
--e-space-l: 88px;
}
body.iyu-editorial main.flex-grow > :is(main, section, div) > section:first-child {
padding-top: 112px !important;
}
body.iyu-editorial .e-hero-figure { aspect-ratio: 16 / 10; }
}
@media (max-width: 640px) {
body.iyu-editorial .iyu-home-hero h1 { font-size: 1.9rem !important; }
body.iyu-editorial .e-figure figcaption { font-size: 11.5px; }
}
/* ── 15. 접근성 ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
body.iyu-editorial *,
body.iyu-editorial *::before,
body.iyu-editorial *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
}
}
body.iyu-editorial a:focus-visible,
body.iyu-editorial button:focus-visible {
outline: 2px solid var(--e-accent);
outline-offset: 2px;
}
/* ── 16. 삽입된 사진 블록 배치 ─────────────────────────────────────────────
index.html 에 새로 넣은 들의 자리 규칙.
회전 링·빈 상자가 있던 자리를 그대로 물려받는다. */
/* 16-1. 히어로 우측 */
body.iyu-editorial .e-hero { margin: 0; }
body.iyu-editorial .e-hero .e-hero-figure { aspect-ratio: 3 / 2; }
body.iyu-editorial .e-hero figcaption { max-width: 44ch; }
/* 16-2. About 우측 — 사진 아래 지표 두 개 */
body.iyu-editorial .e-about { margin: 0 0 22px; }
body.iyu-editorial .e-about-metrics {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px;
}
/* 16-3. MES 우측 — 사진이 지표 카드 위에 놓인다 */
body.iyu-editorial .e-mes-figure {
margin: 0 0 26px;
border: 1px solid var(--e-line);
border-radius: var(--e-radius);
padding: 0;
overflow: hidden;
}
body.iyu-editorial .e-mes-figure img {
aspect-ratio: 3 / 2;
border-radius: 0;
}
body.iyu-editorial .e-mes-figure figcaption {
padding: 12px 14px 13px;
margin-top: 0;
border-top: 1px solid var(--e-line);
background: var(--e-paper);
}
/* 16-4. Blueprint — 개념도 위 실물 사진. 개념도보다 좁게 두어 종속시킨다 */
body.iyu-editorial .e-bp-figure {
max-width: 560px;
margin: 0 auto 40px;
}
body.iyu-editorial .e-bp-figure img {
aspect-ratio: 16 / 10;
border: 1px solid var(--e-line);
}
/* 16-5. 성과 배지 — cyan 알약을 잉크 괘선 라벨로 */
body.iyu-editorial .e-metric-badge {
display: inline-block;
font-family: var(--e-mono);
font-variant-numeric: tabular-nums;
font-size: 12px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--e-ink) !important;
background: transparent;
border: 1px solid var(--e-line-2);
border-radius: var(--e-radius);
padding: 3px 8px;
white-space: nowrap;
}
/* 근거 문구는 카드 안에서 한 단 낮은 목소리로 */
body.iyu-editorial .iyu-home-mes .e-metric-basis {
display: block;
margin-top: 8px;
padding-top: 8px;
border-top: 1px dotted var(--e-line);
font-size: 11.5px;
line-height: 1.5;
/* 근거 문구도 읽으라고 넣은 글이다. 비활성 회색이 아니라 캡션 회색을 쓴다. */
color: var(--e-ink-3) !important;
}
/* MES 지표 카드 자체 */
body.iyu-editorial .iyu-home-mes .grid.grid-cols-1.gap-6 > div {
border: 1px solid var(--e-line) !important;
border-radius: var(--e-radius) !important;
background: var(--e-paper) !important;
box-shadow: none !important;
padding: 20px !important;
}
body.iyu-editorial .iyu-home-mes .w-12.h-12 {
width: fit-content !important;
height: auto !important;
background: none !important;
border-radius: 0 !important;
}
body.iyu-editorial .iyu-home-mes .w-12.h-12 svg {
width: 18px !important; height: 18px !important;
color: var(--e-ink-3) !important;
stroke-width: 1.5 !important;
}
body.iyu-editorial .iyu-home-mes .flex.items-start.gap-6 { gap: 16px !important; }
body.iyu-editorial .iyu-home-mes h3 { font-size: 1.0625rem !important; }
/* 세로 장식선 제거 */
body.iyu-editorial .iyu-home-mes .absolute.-left-8 { display: none !important; }
/* 16-6. 히어로/About 사진이 들어간 그리드의 간격 재조정 */
body.iyu-editorial .iyu-home-hero .grid.lg\:grid-cols-2,
body.iyu-editorial .iyu-home-about .grid.lg\:grid-cols-2,
body.iyu-editorial .iyu-home-mes .grid.lg\:grid-cols-2 {
gap: 56px !important;
align-items: start !important;
}
@media (max-width: 1023.98px) {
body.iyu-editorial .e-about-metrics { gap: 16px; }
body.iyu-editorial .e-bp-figure { max-width: 100%; }
}
/* ── 17. Blueprint 개념도 재스킨 ──────────────────────────────────────────
index.html 인라인