/* Etribe 브랜드 마크 사이징 / 2026-08-01
───────────────────────────────────────────────────────────────────────────
문제: 테마(kirki)는 로고 슬롯을 '폭' 기준으로 잡는다.
@media (min-width:992px){ .site_logo .logo{max-width:169px}
.site_logo .logo img{height:auto} }
원본 로고는 가로형 워드마크(169x45, 3.76:1)라 폭 169 -> 높이 45 로 떨어진다.
그런데 Etribe 마크는 정사각 심볼(256x256, 1:1)이라 같은 규칙에서 169x169 가 되고,
헤더 높이가 74px -> 197px (2.7배)로 붕괴한다. (측정: src/_geometry.mjs)
해결: 폭이 아니라 '높이'로 맞춘다. 원본 슬롯의 설계 높이(45px)를 그대로 유지하면
헤더 높이와 나머지 레이아웃이 원본과 동일해진다. 비율은 심볼 그대로(정사각).
범위: 로고 이미지 치수만. 색/여백/폰트/레이아웃 토큰 무변경.
이 파일은 head 마지막에 로드되어 kirki 규칙(동일 특정성)을 소스순서로 이긴다. */
.site_logo .logo img {
width: auto;
height: 45px;
}
/* 오프캔버스(햄버거) 로고: 테마 기본 캡은 136px 폭 -> 동일 문제. 높이 기준으로. */
.hamburger_logo .mobile_logo img {
width: auto;
height: 40px;
}
/* ═══════════════════════════════════════════════════════════════════════════
한글 타이포그래피 레이어 (KO-TYPE) / 2026-08-01
───────────────────────────────────────────────────────────────────────────
문제: 이 템플릿의 폰트는 Manrope(제목)·Inter(본문)로 **둘 다 한글 글리프가 없다.**
한글을 넣으면 시스템 폰트(맑은고딕/애플고딕 등)로 폴백되어 굵기·폭·회색도가
제각각인 "이질감"이 생긴다. 실제로 영문 웹템플릿의 한글화 실패는 대부분 이것이다.
해결 3단 (Latin-first / Hangul-fallback + 광학 보정):
1) **unicode-range 로 스크립트 분리** — Pretendard 를 '한글 코드블록에만' 바인딩한다.
그래서 라틴(GPU·LLM·AI·숫자)은 원본 그대로 Manrope/Inter 로 남고, 한글만 Pretendard
로 간다. 폰트 스택 순서(Manrope → PretendardKR)가 아니라 unicode-range 가 경계를
정하므로 라틴 글자는 절대 Pretendard 로 새지 않는다(원본 디자인 정체성 보존).
2) **size-adjust 로 광학 크기 정합** — 한글은 라틴과 달리 x-height/디센더 여백이 거의
없이 em 박스를 꽉 채워, 같은 px 이어도 라틴보다 크고 무겁게 보인다. size-adjust:94%
로 한글만 축소해 Manrope 라틴과 같은 시각 크기로 맞춘다(한 줄에 섞여도 단차 없음).
(Spoqa 가 일본어에 font-size:90% 를 쓴 것과 같은 원리를, 폰트 단위로 정밀 적용)
3) **한글 조판 규칙** — 어절 단위 줄바꿈(keep-all), 라틴용 음의 자간 완화,
한글 밀도에 맞는 행간. (KLREQ/KRDS 계열 관행)
Pretendard = 이 워크스페이스가 이미 표준으로 쓰는 한글 서체(가변 woff2, 로컬 자체호스팅
→ 원격 폰트 요청 0). 라틴이 Inter 기반이라 Inter/Manrope 계열과 이음새가 작다. */
@font-face {
font-family: "PretendardKR";
src: url("../fonts/PretendardVariable.woff2") format("woff2-variations");
font-weight: 45 920;
font-style: normal;
font-display: swap;
size-adjust: 94%; /* 한글 광학 크기를 라틴에 맞춤 */
unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF;
}
/* 테마 폰트 토큰에 한글 폴백을 '뒤에' 붙인다(라틴 우선 유지) */
:root {
--tj-ff-heading: Manrope, PretendardKR, sans-serif;
--tj-ff-body: Inter, PretendardKR, sans-serif;
}
/* ── 한글 조판 규칙 ────────────────────────────────────────────────────────── */
html[lang="ko"] :is(h1, h2, h3, h4, h5, h6, .sec-title, .tj-el-title, .sub-title, p, li, span, a) {
word-break: keep-all; /* 어절 단위 줄바꿈 (한국어 표준; break-all 은 낱자 분해) */
overflow-wrap: break-word; /* 단, URL 등 초장문 토큰만 안전 분할 */
}
/* 제목: 라틴 디스플레이용 과한 음자간(-0.03em)을 한글에 맞게 완화 + 행간 여유 */
html[lang="ko"] .tj-el-title,
html[lang="ko"] .sec-title {
letter-spacing: -0.02em;
line-height: 1.18;
}
/* 데스크탑에서 의도한 좌표로 줄을 끊고(
), 좁은 화면에선 자연 흐름으로 되돌린다 */
@media (max-width: 991px) {
html[lang="ko"] .tj-el-title br,
html[lang="ko"] .sec-title br { display: none; }
}
/* ── 통계 카드(.tj-el-number) : 원본 "80+"(2자+기호, ~183px) 기준으로 잡힌 슬롯 ──
Etribe 스펙은 "768GB"(5자)라 120px 그대로면 354px 로 넘쳐 옆 설명문과 겹친다.
숫자는 크게 유지하되 슬롯 폭(156px 기준 컨테이너)에 맞게 축소하고, 단위는
'큰 숫자 + 작은 단위' 관례대로 작게 — 임팩트는 유지, 겹침은 제거. */
html[lang="ko"] .tj-el-number .counter { font-size: 92px; letter-spacing: -0.03em; }
html[lang="ko"] .tj-el-number .count-plus { font-size: 34px; letter-spacing: 0; }
/* 한글 제목 줄 균형 — keep-all 은 어절 단위로만 끊으므로 마지막 줄에 한 어절만 남는
'외톨이 줄'이 생기기 쉽다(예: "…나가지 / 않습니다"). text-wrap:balance 가 줄 길이를
고르게 재분배해 자연스러운 끊김을 만든다. 본문은 pretty(마지막 줄 고아 방지). */
html[lang="ko"] :is(h1, h2, h3, h4, h5, h6, .sec-title, .tj-el-title, .title) { text-wrap: balance; }
html[lang="ko"] :is(p, li) { text-wrap: pretty; }
/* ── 푸터 이식 (실제 이트라이브 정보) ─────────────────────────────────────────
로고: etribe-mark.webp 는 256×256 정사각이다. 원본 슬롯은 169×45 가로형
워드마크를 전제하므로 폭 기준으로 두면 헤더 때처럼 세로가 튄다 → 높이 고정. */
#contact .elementor-element-28d0e0ef img {
width: auto;
height: 44px;
}
/* 죽은 구독 폼을 대체한 연락 CTA */
.etribe-footer-cta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px 22px;
}
.etribe-footer-cta .tj-primary-btn {
white-space: nowrap;
}
@media (max-width: 575px) {
.etribe-footer-cta {
gap: 12px 16px;
}
}
/* 두 번째 CTA — 테마 tj-text-btn 은 내부 텍스트 스왑 애니메이션이 첫 글자를
가려서 쓰지 않는다. 사이트 본문 링크 톤에 맞춘 단순 앵커로 대체. */
.etribe-footer-mail {
font-size: 17px;
font-weight: 600;
color: var(--tj-color-heading-primary, #050505);
border-bottom: 1px solid currentColor;
padding-bottom: 2px;
transition: opacity 0.25s ease;
}
.etribe-footer-mail:hover {
opacity: 0.6;
}
/* ── 히어로 = tekmino tech-startup(h8) 배너 레이아웃 이식 ────────────────────
테마 CSS(tekmino-main·main-light)에 h8 클래스가 이미 다 있어서 추가 CSS 는
elementor 페이지 전용 컨테이너 규칙 하나뿐이다(원본은 .elementor-645 스코프). */
.elementor-1235 .elementor-element.elementor-element-1f348f3e {
--display: flex;
--flex-direction: column;
--container-widget-width: 100%;
--container-widget-height: initial;
--container-widget-flex-grow: 0;
--container-widget-align-self: initial;
--flex-wrap-mobile: wrap;
}
/* h8 배너 — 한국어 조판 보정 (레이아웃 불변, 글자 크기만)
원본은 영문 49자가 80px 에서 4줄 → H1 블록 325px, 폼 y=605.
한글 40자를 그대로 80px 에 두면 6줄이 되어 폼이 폴드 밖으로 밀린다.
반대로 너무 줄이면(54px) 블록이 243px 로 82px 짧아져 폼이 위로 떠 버린다.
→ 원본 좌표에 정확히 맞는 값을 픽셀 대조로 탐색: 67px / 1.14 에서
H1 325px · 4줄 · 폼 y=605 (원본과 Δ0). [[korean-localization-method]] 층. */
html[lang="ko"] .tj-h8-banner-title {
font-size: 84px;
line-height: 1.2897;
letter-spacing: -0.032em;
/* GSAP SplitText 가 줄을 div 로 감싸서 행간만으로는 320px 에서 멈춘다.
원본 블록(325px)까지 남는 5px 는 테마 기본 margin-bottom(30px)에 얹어
흡수한다 → 폼 y=605 로 원본과 정확히 일치. */
margin-bottom: 30px;
}
/* 인라인 아이콘: 테마는 torch.svg(내부 여백 있음) 기준으로 margin-left:-10px 를
준다. 우리 큐브는 타이트 크롭이라 앞 글자에 붙는다 → 간격 복원 + 비율 유지. */
html[lang="ko"] .tj-h8-banner-title span {
width: 60px;
height: 60px;
margin-left: 6px;
margin-right: 6px;
transform: translateY(7px);
}
html[lang="ko"] .tj-h8-banner-title span img {
object-fit: contain;
}
/* 반응형 — 테마 단계(80/66/55/45)에 같은 비율(0.84)을 적용 */
@media (max-width: 1399px) {
html[lang="ko"] .tj-h8-banner-title { font-size: 68px; }
html[lang="ko"] .tj-h8-banner-title span { width: 63px; height: 63px; }
}
@media (max-width: 991px) {
html[lang="ko"] .tj-h8-banner-title { font-size: 56px; }
html[lang="ko"] .tj-h8-banner-title span { width: 52px; height: 52px; }
}
@media (max-width: 575px) {
html[lang="ko"] .tj-h8-banner-title { font-size: 44px; }
html[lang="ko"] .tj-h8-banner-title span { width: 41px; height: 41px; }
}
/* 좌상단 카드 — 원본은 고객 아바타 4개(원형)였다. 우리는 GPU 카드 제품컷
한 장으로 대체한다. 캡션·별점을 감추고 카드 패딩(26/28)까지 0 으로 만들어
이미지가 카드(213×175)를 통째로 채우게 한다 → 카드 크기는 그대로. */
.tj-h8-banner-img-area .customers-box {
padding: 0;
}
.customers ul li:only-child img {
width: 213px;
height: 175px;
border-radius: 10px;
border: 0;
background-color: transparent;
object-fit: cover;
}
.customers-box .rating-area,
.customers-box .customers-bottom {
display: none;
}
/* ── 기술 스택 마퀴 ─────────────────────────────────────────────────────────
managed-it 데모의 블럭을 실측해 이식했다. 참조 대상은 겉의 `.client-item`
(투명한 슬라이드 래퍼)이 아니라 그 안의 `.client-logo` — 이것이 눈에 보이는
"블럭"이다:
285×121 · padding 20px · background #EAEBE6
border 1px solid #E0E0DC · border-radius 10px · flex 중앙정렬
블럭 간격 30px (`.client-item { padding: 0 30px 0 0 }`)
레퍼런스는 블럭 안에 [마크+워드마크] 완성형 로고 이미지 한 장(179×41 등,
솔리드 검정, filter:none)을 자연 크기로 넣는다. 우리는 브랜드별 완성형 락업
이미지가 없으므로 simple-icons 솔리드 마크 + 브랜드명 텍스트로 같은 락업을
조립하고, 마크 자체가 사명인 브랜드는 텍스트를 생략한다.
⚠ 테마의 `.elementor img{height:auto;max-width:100%}`(0,1,1)가 로고 클래스를
이기므로 선택자를 (0,2,0) 이상으로 올리고 max-width:none 을 준다. */
.marquee-slider-2 {
background-color: transparent;
border: 0;
border-radius: 0;
/* 여백 0 — 상단 120px 과 제목~띠 60px 간격은 컨테이너 #365f515c 가 준다.
원본 띠 높이 = 블럭 높이 그대로(121px). */
padding: 0;
--gap: 30px;
/* 양 끝 페이드 — 레퍼런스 `.client-slider-wrap` 의 마스크를 그대로 옮겼다.
mask-mode 기본값이 alpha 라 색상 스톱(166/140)은 의미가 없고 알파만 쓰인다:
0% 투명 → 20% 불투명 → 80% 불투명 → 100% 투명. 즉 좌우 각 20% 구간 페이드.
블럭이 띠 경계에서 잘려 사라지지 않고 배경으로 녹아든다. */
-webkit-mask-image: linear-gradient(90deg,
rgba(217, 217, 217, 0) 0%,
rgb(166, 166, 166) 20%,
rgb(140, 140, 140) 80%,
rgba(115, 115, 115, 0) 100%);
mask-image: linear-gradient(90deg,
rgba(217, 217, 217, 0) 0%,
rgb(166, 166, 166) 20%,
rgb(140, 140, 140) 80%,
rgba(115, 115, 115, 0) 100%);
}
/* 흐름 속도 — 블럭화로 한 벌 폭이 3472→5955px 로 늘었다. 체감 속도(px/s)를
기존과 같게 유지하려면 주기도 비례해야 한다((5955+30)/80.8 ≈ 74s). */
.marquee-slider-2 .marquee-slider-wrapper {
animation-duration: 74s;
--gap: 30px;
}
/* 블럭 — 레퍼런스 .client-logo 규격 그대로 */
.marquee-slider-2 .brand {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
white-space: nowrap;
box-sizing: border-box;
width: 285px;
height: 121px;
padding: 20px;
background-color: #EAEBE6;
border: 1px solid #E0E0DC;
border-radius: 10px;
}
.marquee-slider-2 .brand-mark {
display: block;
width: auto;
max-width: none;
height: 32px;
}
.marquee-slider-2 .brand-name {
font-family: Manrope, sans-serif;
font-weight: 700;
font-size: 25px;
line-height: 1;
letter-spacing: -0.018em;
color: #0A0A0A;
}
/* 워드마크형 — 마크 자체가 이름이므로 이름 텍스트를 붙이지 않고, 대신 마크를
이름의 캡 하이트(25px Manrope 700 ≈ 19px)에 광학적으로 맞춘다. 기계적으로
같은 높이를 주면 대문자·소문자·x-height 로고가 서로 다른 크기로 읽힌다. */
.marquee-slider-2 .brand--word .brand-mark { height: 19px; }
.marquee-slider-2 .brand-samsung .brand-mark { height: 18px; } /* 전대문자 → 캡 기준 */
.marquee-slider-2 .brand-intel .brand-mark { height: 24px; } /* 소문자+어센더 */
.marquee-slider-2 .brand-amd .brand-mark { height: 19px; } /* 전대문자 */
.marquee-slider-2 .brand-arm .brand-mark { height: 21px; } /* 소문자, 어센더 없음 */
/* 슈퍼마이크로는 마크 안에 사명이 들어 있는 완성형 락업 → 이름 중복 없이 단독,
대신 안쪽 글자가 읽히도록 아이콘(32px)보다 크게. */
.marquee-slider-2 .brand-supermicro .brand-mark { height: 38px; }
@media (max-width: 991px) {
.marquee-slider-2 { padding: 0; --gap: 22px; }
.marquee-slider-2 .marquee-slider-wrapper { --gap: 22px; }
.marquee-slider-2 .brand { width: 224px; height: 96px; padding: 16px; gap: 10px; }
.marquee-slider-2 .brand-mark { height: 26px; }
.marquee-slider-2 .brand-name { font-size: 20px; }
.marquee-slider-2 .brand--word .brand-mark { height: 15px; }
.marquee-slider-2 .brand-samsung .brand-mark { height: 15px; }
.marquee-slider-2 .brand-intel .brand-mark { height: 19px; }
.marquee-slider-2 .brand-amd .brand-mark { height: 15px; }
.marquee-slider-2 .brand-arm .brand-mark { height: 17px; }
.marquee-slider-2 .brand-supermicro .brand-mark { height: 31px; }
}
@media (max-width: 575px) {
.marquee-slider-2 { padding: 0; --gap: 16px; }
.marquee-slider-2 .marquee-slider-wrapper { --gap: 16px; }
.marquee-slider-2 .brand { width: 182px; height: 78px; padding: 14px; gap: 8px; border-radius: 8px; }
.marquee-slider-2 .brand-mark { height: 21px; }
.marquee-slider-2 .brand-name { font-size: 16px; }
.marquee-slider-2 .brand--word .brand-mark { height: 12px; }
.marquee-slider-2 .brand-samsung .brand-mark { height: 12px; }
.marquee-slider-2 .brand-intel .brand-mark { height: 15px; }
.marquee-slider-2 .brand-amd .brand-mark { height: 12px; }
.marquee-slider-2 .brand-arm .brand-mark { height: 13px; }
.marquee-slider-2 .brand-supermicro .brand-mark { height: 25px; }
}
/* ── 헤더 로고 워드마크 ──────────────────────────────────────────────────────
원본은 심볼+워드마크가 한 장의 이미지(169×45)다. 우리는 심볼 이미지 +
HTML 텍스트 조합 — 반응형에서 텍스트만 조절할 수 있고 문구도 슬롯이다.
폰트는 원본과 같은 Manrope(테마가 이미 로드). 원본 실측 비율:
심볼 44px · 워드마크 캡하이트 25px = 0.57 → 우리도 0.56 으로 맞춤.
단순 텍스트로 보이지 않게 800 굵기 + skewX(-8deg) 오블리크를 준다
(Manrope 에는 이탤릭이 없어 합성 기울기를 쓴다). */
.site_logo .logo {
display: inline-flex;
align-items: center;
gap: 11px;
}
.site_logo .logo-word {
display: inline-block;
font-family: Manrope, sans-serif;
font-weight: 800;
font-size: 25px;
line-height: 1;
letter-spacing: 0.005em;
color: var(--tj-color-heading-primary, #050505);
white-space: nowrap;
transform: skewX(-8deg);
/* skew 는 밑변을 오른쪽으로 밀어 왼쪽 아래가 심볼 쪽으로 다가온다.
그만큼(≈ tan8° × 캡높이 ÷ 2) 되밀어 광학 간격을 유지한다. */
margin-left: 2px;
transform-origin: left center;
/* skew 로 오른쪽 위가 레이아웃 박스를 ~11px 넘친다. overflow 는 visible 이라
잘리진 않지만, 옆 요소가 붙지 않도록 그만큼 자리를 확보한다. */
padding-right: 11px;
}
@media (max-width: 575px) {
.site_logo .logo { gap: 9px; }
.site_logo .logo-word { font-size: 20px; }
}
/* ── 루트(post-454) 섹션 이식 — 마퀴 제목 + [도입 경로] ──────────────────────
tekminolight.themejunction.net 루트의 두 구간을 마크업째 가져왔다:
· #365f515c 마퀴 제목("Join Over 1000+ …") + 띠 — column, gap 60, pt 120
· #7a5802cb [Why Choose Us] 제목/리드/버튼 + 4열 — column, gap 50, py 120
아래 규칙은 원본 post-454.css 에서 해당 요소 id 것만 뽑아 스코프를
`.elementor-454` → `.elementor-1235` 로 바꾼 것이다(값은 손대지 않음).
미디어쿼리 구간도 원본 그대로 유지한다. */
.elementor-1235 .elementor-element.elementor-element-365f515c {--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:60px 0px;--row-gap:60px;--column-gap:0px;--padding-top:120px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}
.elementor-1235 .elementor-element.elementor-element-5ae752e9 {--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:15px;--padding-right:15px;}
.elementor-1235 .elementor-element.elementor-element-afeeb99 {--display:flex;--overflow:hidden;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}
.elementor-1235 .elementor-element.elementor-element-7a5802cb {--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:50px 0px;--row-gap:50px;--column-gap:0px;--padding-top:120px;--padding-bottom:120px;--padding-left:15px;--padding-right:15px;}
.elementor-1235 .elementor-element.elementor-element-3b1e3859 {--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}
.elementor-1235 .elementor-element.elementor-element-17b15ab0 .sec-heading {max-width:550px;margin:0px 0px 0px 0px;}
.elementor-1235 .elementor-element.elementor-element-17b15ab0 .sec-heading .sec-title {margin:0px 0px 0px 0px;}
.elementor-1235 .elementor-element.elementor-element-7076db52 {width:var( --container-widget-width, 250px );max-width:250px;--container-widget-width:250px;--container-widget-flex-grow:0;}
.elementor-1235 .elementor-element.elementor-element-7076db52 .editor_text {text-align:start;}
.elementor-1235 .elementor-element.elementor-element-1100dde4 {--display:grid;--e-con-grid-template-columns:repeat(4, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}
.elementor-1235 .elementor-element.elementor-element-67cb6d6b {--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}
@media(max-width:1399px) {
.elementor-1235 .elementor-element.elementor-element-1100dde4 {--grid-auto-flow:row;}
}
@media(max-width:1199px) {
.elementor-1235 .elementor-element.elementor-element-365f515c {--gap:50px 0px;--row-gap:50px;--column-gap:0px;--padding-top:100px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}
.elementor-1235 .elementor-element.elementor-element-7a5802cb {--padding-top:100px;--padding-bottom:100px;--padding-left:15px;--padding-right:15px;}
.elementor-1235 .elementor-element.elementor-element-17b15ab0 .sec-heading {max-width:450px;}
.elementor-1235 .elementor-element.elementor-element-1100dde4 {--e-con-grid-template-columns:repeat(2, 1fr);--grid-auto-flow:row;}
}
@media(max-width:991px) {
.elementor-1235 .elementor-element.elementor-element-365f515c {--gap:40px 0px;--row-gap:40px;--column-gap:0px;--padding-top:70px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}
.elementor-1235 .elementor-element.elementor-element-7a5802cb {--gap:30px 30px;--row-gap:30px;--column-gap:30px;--padding-top:70px;--padding-bottom:70px;--padding-left:15px;--padding-right:15px;}
.elementor-1235 .elementor-element.elementor-element-3b1e3859 {--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:flex-start;--flex-wrap:wrap;}
.elementor-1235 .elementor-element.elementor-element-7076db52.elementor-element {--align-self:center;}
.elementor-1235 .elementor-element.elementor-element-1100dde4 {--grid-auto-flow:row;}
.elementor-1235 .elementor-element.elementor-element-67cb6d6b {--margin-top:10px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}
}
@media(max-width:767px) {
.elementor-1235 .elementor-element.elementor-element-7a5802cb {--gap:35px 0px;--row-gap:35px;--column-gap:0px;}
.elementor-1235 .elementor-element.elementor-element-3b1e3859 {--gap:15px 0px;--row-gap:15px;--column-gap:0px;}
.elementor-1235 .elementor-element.elementor-element-1100dde4 {--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}
}
/* 제목 블록 광학 정렬 — [ 도입 경로 ] + 제목이 우측 리드문보다 아래로 처져 보인다.
원인: 한 줄 짜리 행에서 flex align-items:center 는 [소제목+제목] 덩어리 전체를
기준으로 가운데를 맞추는데, 위에 붙은 소제목(15px + 여백 18px)이 덩어리 중심을
끌어올려 정작 제목 글자는 그만큼 아래로 내려간다.
실측: 제목 잉크 중심이 리드문 중심보다 18.7px 아래(1440·1920·1280 동일).
레이아웃은 건드리지 않고 transform 으로만 그 값을 올린다.
992px 미만에서는 행이 wrap 되어 두 요소가 위아래로 쌓이므로 적용하지 않는다. */
@media (min-width: 992px) {
.elementor-1235 .elementor-element.elementor-element-17b15ab0 .sec-heading {
transform: translateY(-18.7px);
}
}
/* ── [ 적용 시나리오 ] 섹션 이식 (post-454 의 3열 blog-item) ──────────────────
컨테이너 규칙은 원본에서 뽑아 스코프만 .elementor-1235 로 바꿨다(값 무수정). */
.elementor-1235 .elementor-element.elementor-element-63b860ca {--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:50px 0px;--row-gap:50px;--column-gap:0px;--padding-top:120px;--padding-bottom:120px;--padding-left:15px;--padding-right:15px;}
.elementor-1235 .elementor-element.elementor-element-444e5d5c {--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}
.elementor-1235 .elementor-element.elementor-element-4b750b3 .sec-heading {max-width:550px;}
.elementor-1235 .elementor-element.elementor-element-282f00bf {--display:flex;}
@media(max-width:1199px) {
.elementor-1235 .elementor-element.elementor-element-63b860ca {--gap:40px 0px;--row-gap:40px;--column-gap:0px;--padding-top:100px;--padding-bottom:100px;--padding-left:15px;--padding-right:15px;}
}
@media(max-width:991px) {
.elementor-1235 .elementor-element.elementor-element-63b860ca {--gap:30px 0px;--row-gap:30px;--column-gap:0px;--padding-top:70px;--padding-bottom:70px;--padding-left:15px;--padding-right:15px;}
}
/* 카드 필드 재해석 — 테마 클래스는 그대로 두고 값만 우리 축으로 쓴다.
.blog-date(원본: 06/Jul) → 진입 사다리 단계 + 경로. 한글 두 글자라 원본의
대문자 자간(uppercase)이 벌어져 보이므로 그것만 되돌린다. */
.blog-date .month {
text-transform: none;
letter-spacing: 0.02em;
font-size: 13px;
}
/* .author 는 원본이 "By 이름" 구조였다. 우리는 링크 없는 규모 텍스트라
본문 색을 직접 준다(테마는 a 에만 색을 건다). */
.blog-item .blog-meta .author {
color: var(--tj-color-theme-dark-3, #6d6e68);
}
/* .categories a 는 테마가 링크 전제(hover 색전환)다. 우리는 이동할 곳이 없어
앵커를 링크로 쓰지 않으므로 커서만 기본으로 되돌린다. */
.blog-item .categories a {
cursor: default;
}
/* 본문 — 원본 카드에는 desc 가 없었지만 테마가 클래스를 정의해 두었다.
과제/구성 한 문단 + 결과 수치 한 문단, 두 번째를 눈에 띄게 구분한다. */
.blog-item .blog-content .desc {
font-size: 16px;
line-height: 1.625;
color: var(--tj-color-theme-dark-2, #494a46);
}
.blog-item .blog-content .desc.etribe-case-result {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--tj-color-border-1, #e0e0dc);
font-weight: 600;
color: var(--tj-color-heading-primary, #050505);
}
/* ── 슬라이더 ────────────────────────────────────────────────────────────────
카드 높이 정렬 — 본문 길이가 달라도 한 줄에 선 카드들이 같은 높이로 서고,
결과 줄은 항상 바닥에 붙는다. Swiper 는 슬라이드 높이를 auto 로 둬야
가장 긴 카드에 맞춰 트랙이 잡힌다. */
.etribe-scenario-slider .swiper-slide { height: auto; display: flex; }
.etribe-scenario-slider .blog-item { width: 100%; display: flex; flex-direction: column; }
.etribe-scenario-slider .blog-item .blog-content { display: flex; flex-direction: column; flex: 1 1 auto; }
.etribe-scenario-slider .blog-item .blog-content .desc.etribe-case-result { margin-top: auto; }
/* 양 끝 페이드 — 섹션1 마퀴(.marquee-slider-2)와 같은 마스크를 쓴다.
mask-mode 기본값이 alpha 라 색 스톱은 무의미하고 알파만 쓰인다:
0% 투명 → 8% 불투명 → 92% 불투명 → 100% 투명. 마퀴(20/80)보다 얕게 잡았다 —
카드에는 읽어야 할 문단이 있어 20% 를 먹이면 양 끝 카드가 통째로 흐려진다.
컨테이너를 화면 폭까지 넓혀 페이드가 뷰포트 가장자리에서 일어나게 한다. */
.etribe-scenario-slider .swiper {
/* overflow 는 Swiper 기본값(hidden)을 그대로 둔다. visible 로 열면 마스크 상자
밖으로 슬라이드가 삐져나오고, mask-repeat 기본값이 repeat 이라 그 부분에
그라디언트가 한 번 더 깔려 카드가 다시 나타나는 이상한 띠가 생긴다.
그래서 repeat 과 size 도 명시로 못 박는다. */
-webkit-mask-image: linear-gradient(90deg,
rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 8%, rgb(0, 0, 0) 92%, rgba(0, 0, 0, 0) 100%);
mask-image: linear-gradient(90deg,
rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 8%, rgb(0, 0, 0) 92%, rgba(0, 0, 0, 0) 100%);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
/* ⚠ 폭 폭주 방지 — 부모(#282f00bf)가 display:flex 라 그 자식은 기본
min-width:auto 를 갖는다. Swiper 는 컨테이너 폭으로 슬라이드 폭을 계산하는데,
컨테이너가 "내용만큼" 커지면 [슬라이드가 커짐 → 컨테이너가 커짐] 순환이 돌아
≤767px 에서 슬라이드 폭이 2,097만 px 까지 폭주했다(overflow:hidden 이라
가로 스크롤은 안 생겨 지표로는 잡히지 않는다). 플렉스 체인 전체에 min-width:0
을 박아 폭을 부모가 정하도록 되돌린다. */
#scenarios .elementor-element-282f00bf,
#scenarios .elementor-element-282f00bf > .elementor-widget-container {
min-width: 0;
width: 100%;
}
.etribe-scenario-slider,
.etribe-scenario-slider .swiper {
min-width: 0;
max-width: 100%;
}
/* 슬라이더는 컨테이너(1320px)가 아니라 화면 전체 폭을 쓴다 — 그래야 양 끝
페이드가 "화면 밖으로 이어지는" 느낌이 되고, 마퀴와 리듬이 맞는다. */
.etribe-scenario-slider {
width: 100%;
padding-inline: 55px;
}
@media (max-width: 1199px) { .etribe-scenario-slider { padding-inline: 40px; } }
@media (max-width: 767px) { .etribe-scenario-slider { padding-inline: 20px; } }
/* 좌상단 상품 태그 — 원본의 날짜 배지(.blog-date: 32px 숫자 + 14px 월) 자리를
상품명 한 줄로 쓴다. 흰 알약·모서리·위치는 원본 그대로 두고 활자만 바꾼다. */
.etribe-product-tag {
padding: 9px 14px !important;
}
.etribe-product-tag .date {
font-size: 15px !important;
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.01em;
margin-bottom: 0 !important;
white-space: nowrap;
}
/* ── 월드 → [적용 시나리오] 이월 여백 ─────────────────────────────────────────
증상: scroll-world 가 다 사라지기 전에 시나리오 카드가 밑에서 올라와 겹친다.
원인(실측): 엔진은 트랙 마지막 `embedFade × vh` = 0.5 × 900 = 450px 동안
고정 레이어를 1.00 → 0.00 으로 녹인다. 그런데 뒤 섹션은 "제목 top − vh" 지점에서
이미 화면 하단에 들어온다. 제목 top 12754 → 진입 11854, 월드가 0.05 로 떨어지는
지점은 12517 → **663px 먼저 등장**한다. 들어오는 쪽(위 → 아래)이라 한 화면
분량이 통째로 겹치는 것이고, 진입부(아래 → 위로 빠져나감)와 대칭이 아니다.
해법: 뒤 섹션의 첫 요소를 "월드가 사라지는 지점 + 한 화면" 아래로 내린다.
필요 여백 = vh − (0.05 되는 지점까지의 잔여) ≈ 0.93 × vh
vh 는 기기마다 다르므로 px 이 아니라 100vh 로 잡고, 그 위에 섹션 본래의
상단 여백(120/100/70px)을 얹는다. 남는 ~180px 이 월드가 걷힌 뒤의 정적 구간이다.
⚠ scroll-world 자체(embedFade·트랙·스크럽)는 건드리지 않는다 — 여백만 뒤 섹션 몫. */
.elementor-1235 .elementor-element.elementor-element-63b860ca {
--padding-top: calc(100vh + 120px);
}
@media (max-width: 1199px) {
.elementor-1235 .elementor-element.elementor-element-63b860ca {
--padding-top: calc(100vh + 100px);
}
}
@media (max-width: 991px) {
.elementor-1235 .elementor-element.elementor-element-63b860ca {
--padding-top: calc(100vh + 70px);
}
}
/* ── [적용 시나리오] → [EDE 현장 점검] 사이 여백 ─────────────────────────────
실측: 두 섹션이 정확히 0px 로 붙어 있었다. 이식한 컨테이너 규칙은
`--padding-bottom:120px` 를 주지만 이 페이지의 elementor 판에서는 그 변수가
실제 padding 으로 잡히지 않는다(computed padding-bottom 이 0px). 그래서
변수 대신 padding 을 직접 준다. 값은 사이트의 섹션 리듬(120/100/70)에 맞춘다. */
#scenarios {
padding-bottom: 120px;
}
@media (max-width: 1199px) { #scenarios { padding-bottom: 100px; } }
@media (max-width: 991px) { #scenarios { padding-bottom: 70px; } }
/* ── 모바일 마감 ─────────────────────────────────────────────────────────────
1) 말풍선 카드 — 데스크탑에서는 카드(213)와 이미지(213)가 딱 맞지만, 좁은
화면에서는 테마가 카드를 240 으로 넓혀 오른쪽에 27px 회색 띠가 남는다.
이미지를 카드 폭에 맞추고 비율은 원본(213:175)으로 유지한다. */
@media (max-width: 575px) {
.customers ul li:only-child img {
width: 100%;
height: auto;
aspect-ratio: 213 / 175;
object-fit: cover;
}
}
/* 2) 푸터 이메일 링크 — 26px 라 손가락으로 누르기엔 얇다(권장 44px).
글자 크기는 그대로 두고 위아래 여백만 늘려 터치 영역을 키운다. */
@media (max-width: 767px) {
.etribe-footer-mail {
display: inline-block;
padding-top: 10px;
padding-bottom: 10px;
}
}
/* 3) 푸터 링크 터치 영역 — 메뉴 링크가 19px, 연락처 줄이 26px 라 손가락으로
정확히 누르기 어렵다(권장 44px). 글자 크기·색은 그대로 두고 세로 여백만
넣어 실제로 눌리는 면적을 키운다. 사회 아이콘(.footer_socials)은 이미
40px 원형이라 건드리지 않는다. */
@media (max-width: 767px) {
#contact .widget-nav-menu ul li a,
#contact .copyright-menu ul li a,
#contact .footer-contact-info .contact-item.link a {
display: inline-block;
padding-top: 8px;
padding-bottom: 8px;
}
/* EDE 섹션의 텍스트 버튼 — 이 섹션의 유일한 행동 유도인데 16px 밖에 안 된다.
글자는 그대로 두고 세로 여백으로 누를 면적을 만든다. */
#hero-spec .tj-text-btn,
#hero-spec .elementor-icon-list-item a {
display: inline-block;
padding-top: 12px;
padding-bottom: 12px;
}
}