/* ══════════════════════════════════════════════════════════════════════
editorial.css — Editorial overlay 레이어 (2026-08-15)
translate.thearab.co.kr 의 UI 개선분. site.css 는 한 줄도 고치지 않고
그 뒤에 로드해서 덮어쓰는 구조다. 본문 텍스트·표·수치 마크업은 그대로다.
되돌리기: inc/brand.php 의 이 파일 한 줄만 지우면 원래 디자인으로
완전히 돌아간다(html.php 의 bleed 클래스·div 는 스타일이 없으면 무해).
⛔ clamp() 안에서 '+' 양옆 공백 필수. 빼면 선언 전체가 무효가 된다.
══════════════════════════════════════════════════════════════════════ */
/* ---------- 1. 공통 블리드 ---------- */
.bleed{position:relative;isolation:isolate;overflow:hidden;color:#fff}
.bleed>.bleed__bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.bleed>.bleed__scrim{position:absolute;inset:0;z-index:1}
.bleed>.wrap{position:relative;z-index:2}
/* 스크림 — 글자가 놓이는 왼쪽은 진하게, 이미지가 보일 오른쪽은 열어 둔다 */
.sc-side{background:linear-gradient(97deg,rgba(10,20,34,.965) 0%,rgba(10,20,34,.91) 38%,rgba(10,20,34,.64) 68%,rgba(10,20,34,.32) 100%)}
.sc-soft{background:linear-gradient(101deg,rgba(10,20,34,.95) 0%,rgba(10,20,34,.90) 46%,rgba(10,20,34,.60) 100%)}
.sc-deep{background:linear-gradient(180deg,rgba(10,20,34,.90) 0%,rgba(10,20,34,.945) 55%,rgba(10,20,34,.97) 100%)}
/* ---------- 2. 블리드 안 텍스트 반전 ----------
site.css 가 색을 var(--color-text-*) 로 잡아 두어서, 여기서 변수를 갈아끼운다.
이렇게 하면 인라인/개별 규칙까지 한 번에 따라온다. */
.bleed{
--color-text-primary:#ffffff;
--color-text-secondary:rgba(255,255,255,.86);
--color-text-muted:rgba(255,255,255,.68);
--color-border:rgba(255,255,255,.24);
--color-bg:transparent;
--color-bg-soft:transparent;
--color-bg-warm:transparent;
--color-primary:#5FD3BB;
--color-primary-light:rgba(95,211,187,.16);
}
.bleed .stitle,.bleed h2,.bleed h3,.bleed h4,.bleed b,.bleed strong{color:#fff}
.bleed .stitle em{color:#5FD3BB}
.bleed .lead,.bleed p,.bleed li,.bleed td{color:rgba(255,255,255,.87)}
.bleed .note,.bleed .card__d,.bleed .seg__d{color:rgba(255,255,255,.70)}
.bleed .eyebrow{color:#5FD3BB}
.bleed .eyebrow::before{background:#5FD3BB}
.bleed a{color:#fff}
/* ---------- 3. 카드·박스: 배경이 비치는 유리 ---------- */
.bleed .card,.bleed .tcard,.bleed .seg__box,.bleed .seg__pane,.bleed .faq,
.bleed .why,.bleed .ftbl,.bleed .plist,.bleed .checklist li,.bleed .post{
background:rgba(255,255,255,.075);
border-color:rgba(255,255,255,.24);
color:#fff;
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
box-shadow:none;
}
.bleed .card__t,.bleed .post__t{color:#fff}
.bleed .card__no,.bleed .card__ic{background:rgba(95,211,187,.20);color:#5FD3BB}
.bleed .chip,.bleed .badge{background:rgba(255,255,255,.13);color:#fff;border-color:rgba(255,255,255,.26)}
.bleed .badge--green{background:rgba(95,211,187,.20);color:#5FD3BB}
.bleed .card--hover:hover{background:rgba(255,255,255,.12)}
/* 표 */
.bleed table{color:#fff}
.bleed th{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.20)}
.bleed td{border-color:rgba(255,255,255,.16)}
.bleed tr:nth-child(even) td{background:rgba(255,255,255,.045)}
/* 탭·세그먼트 */
.bleed .tabs__btn,.bleed .seg__btn{color:rgba(255,255,255,.72);border-color:rgba(255,255,255,.22)}
.bleed .tabs__btn.is-on,.bleed .seg__btn.is-on{background:rgba(95,211,187,.20);color:#5FD3BB;border-color:rgba(95,211,187,.5)}
.bleed .seg__bar{background:rgba(255,255,255,.14)}
/* 버튼 */
.bleed .btn--outline,.bleed .btn--ghost{color:#fff;border-color:rgba(255,255,255,.34);background:transparent}
.bleed .btn--outline:hover,.bleed .btn--ghost:hover{background:rgba(255,255,255,.12)}
.bleed .btn--white{background:#fff;color:#0A1422}
/* FAQ */
.bleed .faq__a{color:rgba(255,255,255,.86)}
.bleed details,.bleed summary{border-color:rgba(255,255,255,.20);color:#fff}
/* ---------- 4. 히어로: 영상이 배경, 텍스트가 시선 ---------- */
.hero--video{position:relative;isolation:isolate;overflow:hidden;color:#fff;
background:#0A1422;padding-block:clamp(72px,9vw,132px)}
.hero--video .hero__media{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero--video .hero__media img,
.hero--video .hero__media video{
width:100%;height:100%;object-fit:cover;object-position:60% center;display:block;
/* 배경 역할이므로 채도·밝기를 낮춰 글자가 주인공이 되게 한다 */
filter:saturate(.82) brightness(.86);
}
.hero--video .hero__media img{position:absolute;inset:0} /* 포스터: 영상 뒤에 깔림 */
.hero--video .hero__media video{position:relative;z-index:1}
.hero--video .hero__scrim{position:absolute;inset:0;z-index:2;
background:linear-gradient(96deg,rgba(10,20,34,.955) 0%,rgba(10,20,34,.90) 34%,rgba(10,20,34,.70) 56%,
rgba(10,20,34,.44) 76%,rgba(10,20,34,.30) 100%)}
.hero--video .hero__in{position:relative;z-index:3}
.hero--video h1{color:#fff}
.hero--video h1 em{color:#5FD3BB;font-style:normal}
.hero--video .hero__desc{color:rgba(255,255,255,.88)}
.hero--video .hero__eyebrow{background:rgba(95,211,187,.18);color:#5FD3BB}
/* 오른쪽 칼럼: 사진 대신 지표 카드만 영상 위에 뜬다 */
.hero--video .hero__vis>img{display:none}
.hero--video .hero__vis{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;
gap:12px;min-height:clamp(220px,26vw,340px)}
.hero--video .tcard{position:static;background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.26);
color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:none;
padding:16px 20px;min-width:min(280px,100%)}
.hero--video .tcard b{color:#fff}
.hero--video .tcard span{color:rgba(255,255,255,.78)}
/* 신뢰 지표 띠를 히어로와 이어 붙여 한 덩어리로 보이게.
⛔ site.css 가 .trust / .trust__in / .trust__i 에 각각 흰 배경을 주므로 셋 다 눌러야 한다
(하나라도 빠뜨리면 흰 박스에 흰 글씨가 되어 지표가 사라진다). */
.trust--onvideo{background:#0A1422;border-top:1px solid rgba(255,255,255,.12);
border-bottom-color:rgba(255,255,255,.12);color:#fff}
.trust--onvideo .trust__in{background:rgba(255,255,255,.14);
border-left-color:rgba(255,255,255,.12);border-right-color:rgba(255,255,255,.12)}
.trust--onvideo .trust__i{background:#0A1422}
.trust--onvideo .trust__i b{color:#fff}
.trust--onvideo .trust__i span{color:rgba(255,255,255,.74)}
/* 블리드 안의 표 — site.css 의 흰 배경·회색 글자를 함께 눌러 준다 */
.bleed .ftbl{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22)}
.bleed .ftbl thead th{background:rgba(255,255,255,.13);color:#fff}
.bleed .ftbl th,.bleed .ftbl td{border-bottom-color:rgba(255,255,255,.16)}
.bleed .ftbl tbody th{color:#fff}
.bleed .ftbl tbody td{color:rgba(255,255,255,.86)}
.bleed .ftbl tbody td:nth-of-type(2){color:#5FD3BB}
.bleed .ftbl tbody td:last-child{color:#fff}
.bleed .ftbl tbody tr:hover th,.bleed .ftbl tbody tr:hover td{background:rgba(255,255,255,.06)}
/* ---------- 5. 대표 소개 ---------- */
.bleed .founder__ph{box-shadow:0 18px 46px rgba(0,0,0,.42)}
.bleed .founder__name{color:#fff}
.bleed .founder__name em{color:#5FD3BB}
/* ⛔ 이력 격자는 li 가 아니라 div 다(.creds div{background:#fff}) — 안 누르면 흰 칸이 그대로 남는다 */
.bleed .creds{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.24)}
.bleed .creds div{background:rgba(10,20,34,.72);color:#fff;
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.bleed .creds b,.bleed .creds strong{color:#fff}
.bleed .creds span,.bleed .creds p{color:rgba(255,255,255,.78)}
.bleed .creds li{background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.24);color:#fff}
/* ---------- 6. 반응형 ---------- */
@media (max-width:900px){
/* 좁은 화면에서는 스크림을 세로로 세워 본문 가독성을 우선한다 */
.sc-side,.sc-soft{background:linear-gradient(179deg,rgba(10,20,34,.925) 0%,rgba(10,20,34,.95) 55%,rgba(10,20,34,.97) 100%)}
.bleed>.bleed__bg{background-position:72% center}
.hero--video .hero__scrim{background:linear-gradient(179deg,rgba(10,20,34,.86) 0%,rgba(10,20,34,.93) 48%,rgba(10,20,34,.96) 100%)}
.hero--video .hero__vis{align-items:stretch;min-height:0;margin-top:26px}
/* site.css 는 좁은 화면에서 두 번째 지표 카드를 숨긴다(사진 위에 겹쳐 있었기 때문).
이제는 겹치지 않고 세로로 쌓이므로 다시 보여 준다 — '한-아 동시통역 1호'는 핵심 근거다. */
.hero--video .tcard--b{display:flex}
.hero--video .tcard{min-width:0;width:100%;max-width:none}
}
/* ---------- 7. 영상 자제 조건 ----------
모션 최소화 · 데이터 절약 설정에서는 영상을 숨기고 포스터만 남긴다.
(모바일에서는 애초에 JS 가