/* =====================================================================
   company.css — 회사 소개 상세(company) — 탭/패널 · 정보표 · 연혁 타임라인 · 이미지 확대 라이트박스
   ---------------------------------------------------------------------
   ● base.css의 전역 변수(:root)에 의존합니다. base.css를 먼저 불러온 뒤 이 파일을 불러오세요.
   ● 로드 순서: base → layout → home → company → products → modal → login → responsive
   ===================================================================== */

/* ══════════ 회사 소개 상세 — 탭/패널(公司简介·组织结构) · 정보표(info-grid) · 연혁 타임라인 ══════════ */
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin:0 0 40px;flex-wrap:wrap}
.tab{background:none;border:0;font-family:var(--font-body);font-size:16px;font-weight:600;color:var(--slate);padding:16px 22px;cursor:pointer;position:relative;border-radius:10px 10px 0 0}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--ink)}
.tab.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--signal)}
.panel{display:none;animation:fade .3s ease}
.panel.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.panel h2{font-size:26px;font-weight:700;letter-spacing:-.01em;margin-bottom:8px}
.panel .lede{color:var(--slate);font-size:16px;margin-bottom:28px;max-width:60ch}
.info-grid{display:grid;grid-template-columns:180px 1fr;gap:0;border-top:1px solid var(--line)}
.info-grid .r{display:contents}
.info-grid dt{font-family:var(--font-mono);font-size:13px;color:var(--slate);letter-spacing:.04em;padding:18px 0;border-bottom:1px solid var(--line)}
.info-grid dd{padding:18px 0;border-bottom:1px solid var(--line);font-size:16px;font-weight:500}
.vision-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.timeline{border-left:2px solid var(--line);margin-left:8px}
.tl-item{position:relative;padding:0 0 34px 32px}
.tl-item::before{content:"";position:absolute;left:-9px;top:4px;width:14px;height:14px;border-radius:50%;background:var(--paper);border:3px solid var(--signal)}
.tl-item .yr{font-family:var(--font-mono);font-weight:600;color:var(--steel-2);font-size:15px}
.tl-item p{color:var(--slate);margin-top:4px}
/* 회사 소개 - 公司简介 이미지 / 组织结构 표 링크 */
.intro-img{width:100%;border:1px solid var(--line);border-radius:12px;margin-top:8px;display:block}
.intro-img + .intro-img{margin-top:32px}
.info-grid dd a{color:var(--steel-2);text-decoration:underline;text-underline-offset:2px}
.info-grid dd a:hover{color:var(--ink)}
/* 이미지 확대 라이트박스 (公司简介) */
.intro-img{cursor:zoom-in}
.lightbox[hidden]{display:none}
.lightbox{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:40px}
.lightbox-backdrop{position:absolute;inset:0;background:rgba(8,15,23,.82);backdrop-filter:blur(2px)}
.lightbox-img{position:relative;max-width:94vw;max-height:92vh;object-fit:contain;border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.5);animation:lbpop .25s ease}
@keyframes lbpop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.lightbox-x{position:absolute;top:22px;right:26px;z-index:2;width:44px;height:44px;border:0;border-radius:10px;background:rgba(255,255,255,.14);color:#fff;font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .18s}
.lightbox-x:hover{background:rgba(255,255,255,.3)}