@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans+KR:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ═══════════════════════════════════════════════════════════════
   2026-07-18 다크 테크 테마 전면 개편
   - 배경: 라이트(#F5F6F8) → 딥 네이비 블랙(#070D1A)
   - 원색(로고 4색) 남발 제거: 스펙트럼 라인·아이브로우 등 "포인트"에만 사용
   - 타이틀 대형화: clamp()로 화면 크기에 따라 유동적으로 커지게
     (clamp(최소, 선호값, 최대) — 모바일에선 최소, 큰 화면에선 최대로 수렴)
   - 클래스 구조는 기존 그대로 유지 → HTML 수정 최소화
═══════════════════════════════════════════════════════════════ */

:root{
  --bg:#070D1A;            /* 페이지 기본 배경 (거의 검정에 가까운 네이비) */
  --panel:#0D1A2F;         /* 카드/패널 배경 (배경보다 한 단계 밝게 = 층위 표현) */
  --ink:#E9EFF8;           /* 본문 기본 글자색 (순백 대신 살짝 푸른 흰색 — 눈부심 방지) */
  --slate:#94A2B8;         /* 보조 글자색 */
  --line:#1B2A45;          /* 경계선 */
  --brand:#3FA9F5;         /* 주 액센트 — 다크 배경에선 네이비 대신 밝은 블루를 브랜드색으로 */
  --brand-strong:#5FCBFF;  /* 액센트 강조(호버 등) */
  --navy:#012A60;          /* 로고 원래 네이비 (필요 시 참조용) */
  --spec-red:#ED1B24;
  --spec-yellow:#FFC20F;
  --spec-blue:#008FD5;
  --spec-green:#8CC63E;
  --invert-bg:#0A1526;     /* CTA 배너/푸터 — 본문보다 미세하게 밝은 네이비 */
  --invert-panel:#12213A;
  --invert-text:#F5F6F8;
  --invert-slate:#AEBDD3;
  --invert-line:#223352;
  --spectrum-grad: linear-gradient(90deg, var(--spec-red) 0%, var(--spec-yellow) 33%, var(--spec-blue) 66%, var(--spec-green) 100%);
  --radius: 14px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'IBM Plex Sans KR', -apple-system, sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  word-break:keep-all;
  overflow-wrap:break-word;
}
h1,h2,h3{
  font-family:'Space Grotesk','IBM Plex Sans KR',sans-serif;
  font-weight:700;
  letter-spacing:-0.01em;
  line-height:1.22;
}
.mono{font-family:'IBM Plex Mono',monospace;}
a{color:inherit; text-decoration:none;}
img,svg{display:block; max-width:100%;}
section{padding:112px 0;}
.wrap{max-width:1160px; margin:0 auto; padding:0 32px;}

/* 서브페이지 대형 타이틀 — 기존 인라인 font-size:36~38px 을 대체 (더 크게) */
.page-title{
  font-size:clamp(34px, 4.4vw, 54px);
  max-width:800px;
  margin-bottom:20px;
  line-height:1.2;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'IBM Plex Mono',monospace;
  font-size:21px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--brand-strong); font-weight:500; margin-bottom:18px;
  
  border-bottom:1px solid var(--brand-strong);
  padding-bottom:6px;
}
.eyebrow::before{
  content:''; width:16px; height:2px; background:var(--spectrum-grad);
  display:inline-block;
}
.invert .eyebrow{color:var(--brand-strong);}

/* ---------- NAV ---------- */
header{
  position:sticky; top:0; z-index:100;
  background:rgba(7,13,26,0.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
nav{
  max-width:1160px; margin:0 auto; padding:14px 32px;
  display:flex; align-items:center; justify-content:space-between;
}
.logo{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:19px;
  display:flex; align-items:baseline; gap:1px;
}
/* 2026-07-18: 사용자 결정 — 컬러 원본 로고(logo.jpg, 태그라인 포함)를 흰 배지에 얹어 사용.
   태그라인("eXcellence in ...")까지 읽히도록 표시 크기를 키움
   (전역 box-sizing:border-box 이므로 height는 패딩 포함 전체 높이) */
.logo-img{height:72px; width:auto; display:block; background:#FFFFFF; padding:6px 12px; border-radius:9px;}
.footer-logo{color:var(--invert-text); font-size:20px;}
.footer-logo-img{display:inline-flex; align-items:center;}
/* 2026-07-18: 푸터 로고 = 투명 PNG (배경 제거, 네이비→흰색, X의 4색 유지).
   다크 배경 위에 로고만 떠 있는 형태 — drop-shadow로 은은한 깊이감 */
.footer-logo-badge{
  height:58px; width:auto; display:block;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,0.45));
}
.nav-links{display:flex; align-items:center; gap:34px; font-size:14.5px; font-weight:500;}
.nav-links a{color:var(--slate); transition:color .15s;}
.nav-links a:hover{color:var(--ink);}
.nav-links a.current{color:var(--ink); font-weight:600;}
/* .nav-links a 보다 구체도(specificity)를 높여야 글자색이 안 밀림
   — 기존 코드의 잠재 버그: .nav-cta 단독 선택자는 .nav-links a에게 color를 빼앗겼음 */
.nav-links a.nav-cta{
  background:var(--ink); color:var(--bg);
  padding:10px 20px; border-radius:999px; font-size:14px; font-weight:600;
  transition:background .15s;
}
.nav-links a.nav-cta:hover{background:var(--brand-strong); color:var(--bg);}
.nav-toggle, .nav-burger{display:none;}

/* ---------- HERO ---------- */
.hero{
  padding:80px 0 70px;
  background-image: radial-gradient(circle, var(--line) 1px, transparent 1px);
  background-size:26px 26px;
  background-position:-10px -10px;
}
.hero .wrap{
  display:grid; grid-template-columns:1.35fr 0.65fr; gap:48px; align-items:center;
}
.hero h1{font-size:clamp(34px, 4.6vw, 56px); margin-bottom:24px; max-width:1060px;}
.hero p.lead{font-size:clamp(15px, 1.5vw, 18px); color:var(--slate); max-width:640px; margin-bottom:36px;}

/* 메인(index) 전용: 장비 실사진 풀블리드 히어로.
   ::before에 사진, ::after에 어두운 그라데이션을 덮어 텍스트 가독성 확보 */
.hero-photo{position:relative; overflow:hidden; padding:132px 0 124px; background-image:none;}
.hero-photo::before{
  content:''; position:absolute; inset:0;
  background:url('images/hero-orion.jpg') center/cover no-repeat;
}
.hero-photo::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(7,13,26,0.94) 0%, rgba(7,13,26,0.78) 46%, rgba(7,13,26,0.38) 100%),
    linear-gradient(180deg, rgba(7,13,26,0.55) 0%, rgba(7,13,26,0.25) 45%, rgba(7,13,26,0.92) 100%);
}
.hero-photo .wrap{position:relative; z-index:1; display:block;}

/* Core Technology 히어로 (2026-07-23 v2): 처음엔 capture2.jpg를 반투명 배경(cover)으로
   깔았으나 cover는 화면을 채우려고 이미지를 잘라냄 → 사용자 "자르지 말고 다 넣어줘" 지시로
   <img> 전시 방식으로 변경. width:100% + height:auto = 원본 비율 그대로, 어떤 화면 폭에서도
   잘리지 않음. 기본 .hero의 점 그리드 배경은 그대로 유지 */
.hero-capture .wrap{grid-template-columns:1fr 1.5fr;} /* 텍스트:이미지 비율 — 이미지 크기는 이 숫자(1.5fr)로 조절 (2026-07-23 사용자 요청으로 1.15→1.5 확대) */
/* 텍스트 칸이 절반 폭이라 기본 히어로 크기(최대 56px)는 한 줄에 두세 단어만 들어가 어수선함 —
   칸 폭에 맞게 제목을 한 단계 줄여 아래 섹션들과 시각적 밸런스를 맞춤 (2026-07-23) */
.hero-capture .page-title{font-size:clamp(28px, 2.9vw, 40px);}
.capture-shot{
  width:100%; height:auto; display:block;
  border:1px solid var(--line); border-radius:10px;
  box-shadow:0 18px 44px rgba(0,0,0,0.45); /* 살짝 띄워 보이게 — Solution의 defect-shot과 같은 전시 느낌 */
}
@media (max-width:900px){
  /* 모바일: 공용 규칙(.hero-visual{order:-1})이 비주얼을 제목 위로 올리는데, SW 캡처는
     맥락(제목) 없이 먼저 보이면 어색함 → 이 히어로만 텍스트 아래로 되돌림.
     .hero-capture .hero-visual이 .hero-visual보다 구체적(클래스 2개)이라 공용 규칙을 이김 */
  .hero-capture .hero-visual{order:2; margin-top:10px;}
}


.cta-row{display:flex; gap:14px; flex-wrap:wrap;}
.btn{
  display:inline-block; padding:14px 28px; border-radius:999px;
  font-size:15px; font-weight:600; transition:all .15s; border:1px solid transparent;
}
.btn-primary{background:var(--spec-blue); color:#fff;}
.btn-primary:hover{background:var(--brand-strong); color:var(--bg);}
.btn-ghost{border-color:var(--invert-line); color:var(--ink); background:rgba(13,26,47,0.6);}
.btn-ghost:hover{border-color:var(--ink);}
.invert .btn-ghost{border-color:var(--invert-line); color:var(--invert-text); background:transparent;}
.invert .btn-ghost:hover{border-color:var(--invert-text);}

.hero-visual{position:relative;}
@media (prefers-reduced-motion:no-preference){
  .beam-in, .beam-out{animation:pulse 3.2s ease-in-out infinite;}
}
@keyframes pulse{0%,100%{opacity:.55;} 50%{opacity:1;}}

.spectral-rule{height:2px; width:100%; background:var(--spectrum-grad); opacity:.55;}

/* ---------- CONTEXT / STATS ---------- */
.context-intro{max-width:900px; margin-bottom:56px;}
.context-intro h2{font-size:clamp(26px, 3vw, 38px); margin-bottom:16px;}
.ts-heading{font-size:clamp(24px, 2.6vw, 32px) !important; margin-bottom:0;}
.context-intro p{color:var(--slate); font-size:16px;}
.stat-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
}
.stat-grid-2col{grid-template-columns:repeat(2,1fr); max-width:640px;}
.stat-card{background:var(--panel); padding:32px 28px;}
.stat-num{font-family:'Space Grotesk',sans-serif; font-size:32px; font-weight:700; margin-bottom:10px;}
.stat-num span{background:var(--spectrum-grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.stat-card p{color:var(--slate); font-size:14px;}

/* ---------- PREVIEW CARDS (Tech / Solution) ---------- */
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:48px; flex-wrap:wrap;}
.section-head h2{font-size:clamp(26px, 3vw, 38px); max-width:520px;}
.link-more{font-size:14px; font-weight:600; color:var(--brand); white-space:nowrap; display:inline-flex; align-items:center; gap:6px;}
.link-more:hover{color:var(--brand-strong);}

/* 카드 공통 철학(개편 후): 원색 테두리 제거 → 톤온톤 패널 + 호버 시에만 액센트.
   색은 "정보"가 아니라 "포인트"로만 쓴다. */
.tech-card-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.tech-card{
  border:1px solid var(--line); border-radius:var(--radius); padding:30px 28px;
  background:var(--panel); transition:border-color .15s, transform .15s;
}
.tech-card:hover{border-color:var(--brand); transform:translateY(-2px);}
.tech-card h3{font-size:20px; margin-bottom:14px; line-height:1.35;}
.tech-card .tech-sub{
  font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; letter-spacing:.03em;
  display:inline-block; padding:5px 11px; border-radius:999px; margin-bottom:16px;
  background:rgba(63,169,245,0.12); color:var(--brand-strong);
}
.tech-card p{font-size:14.5px; color:var(--slate); margin-bottom:20px; line-height:1.65;}

/* ---------- PROBLEM CARDS ---------- */
.problem-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.problem-card{
  border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 28px; background:var(--panel);
}
.problem-card .tech-sub{
  font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:600; letter-spacing:.03em;
  display:inline-block; padding:5px 11px; border-radius:999px; margin-bottom:16px;
  background:rgba(63,169,245,0.12); color:var(--brand-strong);
}
.problem-card h3{font-size:13px; margin-bottom:14px; line-height:1.4;}
.problem-card .detail{font-size:16px; color:var(--slate); line-height:1.65;}
.spec-strip{display:flex; flex-wrap:wrap; gap:8px; margin-top:32px;}
.spec-chip{
  font-family:'IBM Plex Mono',monospace; font-size:13.5px; color:var(--ink);
  background:rgba(27,42,69,0.5); border:1px solid var(--line); border-radius:6px; padding:6px 10px;
}

.solution-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.solution-card{
  border:1px solid var(--line); border-radius:var(--radius); padding:30px 28px;
  background:var(--panel); display:flex; flex-direction:column; transition:border-color .15s, transform .15s;
}
.solution-card:hover{border-color:var(--brand); transform:translateY(-2px);}
.solution-card h3{font-size:20px; margin-bottom:14px; line-height:1.35;}
.solution-desc{font-size:16px; color:var(--slate); margin-bottom:20px; line-height:1.65;}
.tech-line{display:flex; align-items:baseline; gap:8px; font-size:13.5px; color:var(--slate); line-height:1.6; margin-bottom:8px;}
.tech-tag{
  font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600; color:var(--brand-strong);
  background:rgba(63,169,245,0.1); padding:2px 7px; border-radius:5px; flex-shrink:0;
}
.item-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:auto;}
.item-tag{
  font-size:12.5px; color:var(--ink); background:rgba(27,42,69,0.5); border:1px solid var(--line);
  border-radius:6px; padding:6px 10px;
}

/* ---------- WHY ---------- */
.vision-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center;}

/* ---------- VISION "기준" 콘셉트 v2 — 시안 D-2 (about.html) ----------
   2026-07-19 사용자 선택안. 문구의 키워드를 디자인으로 번역:
   ① "세계가 신뢰하는" = 렌즈 안 지구본 격자 + 섹션 전체로 퍼지는 파문(리플) 배경
   ② "검사 기준"       = 다이얼 눈금 링 + 각도 라벨 + PLANX STANDARD
   ③ "난제까지 해결"   = 본문 아래 [난제→원천기술→기준] 경로 그래픽 */
.vision-standard{position:relative; overflow:hidden;}
.vision-standard::before{
  /* 파문(리플): repeating-radial-gradient = 얇은 동심원을 96px 간격으로 무한 반복.
     마스크로 렌즈 주변만 보이게 하고 멀어질수록 사라지게 처리 */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-radial-gradient(circle at 76% 46%, rgba(63,169,245,.055) 0 1.5px, transparent 1.5px 96px);
  -webkit-mask-image:radial-gradient(circle at 76% 46%, #000 0%, transparent 78%);
          mask-image:radial-gradient(circle at 76% 46%, #000 0%, transparent 78%);
}
.vision-standard::after{
  /* 렌즈 뒤 글로우 */
  content:""; position:absolute; right:2%; top:50%; transform:translateY(-50%);
  width:760px; height:760px; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(63,169,245,.13), transparent 70%);
}
.vision-standard .wrap{position:relative; z-index:2;}
/* kicker/rule은 About 히어로(hero-eye)에서 사용. Vision 섹션 머리글은 표준 eyebrow+h2로 통일(2026-07-19) */
.vision-kicker{font-family:'IBM Plex Mono',monospace; font-size:12.5px; letter-spacing:4px; color:var(--brand); margin-bottom:16px;}
.vision-rule{width:56px; height:3px; background:var(--spectrum-grad); border-radius:2px; margin-bottom:26px;}
.grad-text{
  background:linear-gradient(92deg, var(--brand) 0%, var(--brand-strong) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.vision-lead{color:var(--slate); font-size:17px; line-height:1.8; max-width:560px; margin-bottom:12px;}
.vision-lead strong{
  color:var(--ink); font-weight:600;
  /* 형광펜 효과: 글자 아래 38%만 반투명 색을 까는 그라데이션 배경 */
  background:linear-gradient(transparent 62%, rgba(63,169,245,.20) 62%);
}
/* [난제 → 원천기술 → 기준] 경로 그래픽 */
.vision-path{display:flex; align-items:center; margin-top:42px; max-width:560px;}
.vp-node{display:flex; flex-direction:column; align-items:center; gap:10px; min-width:92px;}
.vp-node .dot{width:14px; height:14px; border-radius:50%;}
.vp-node .lbl{font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.5px; color:var(--slate); white-space:nowrap;}
.vp-node.q .dot{border:2px dashed var(--slate);}                 /* 난제: 점선 = 아직 미해결 */
.vp-node.tech .dot{background:var(--brand); animation:vp-pulse 2.2s ease-out infinite;} /* 원천기술: 맥동 */
.vp-node.std .dot{background:var(--brand-strong); box-shadow:0 0 14px rgba(95,203,255,.8);} /* 기준: 발광 */
.vp-node.std .lbl{color:var(--brand-strong);}
@keyframes vp-pulse{
  0%{box-shadow:0 0 0 0 rgba(63,169,245,.55);}
  100%{box-shadow:0 0 0 14px rgba(63,169,245,0);}
}
.vp-track{flex:1; height:0; margin:0 6px 30px; position:relative;}
.vp-track.dashed{border-top:2px dashed #33507e;}                 /* 난제→기술: 아직 점선 */
.vp-track.solid{border-top:2px solid var(--brand);}              /* 기술→기준: 실선 완성 */
.vp-track.solid::after{
  content:""; position:absolute; right:-2px; top:-5px;
  border-left:8px solid var(--brand); border-top:4px solid transparent; border-bottom:4px solid transparent;
}
/* 렌즈 다이얼 비주얼 */
.vision-lens{position:relative; aspect-ratio:1; max-width:500px; margin:0 auto; width:100%;}
.vision-lens svg{width:100%; height:100%; display:block;}
.vl-spin{transform-origin:220px 220px; animation:vl-spin 26s linear infinite;}
.vl-spin-rev{transform-origin:220px 220px; animation:vl-spin 40s linear infinite reverse;}
.vl-orbit{transform-origin:220px 220px; animation:vl-spin 12s linear infinite;}
@keyframes vl-spin{to{transform:rotate(360deg);}}
@media (max-width:900px){
  .vision-standard::after{width:420px; height:420px; right:-15%;}
  .vision-path{max-width:none;}
  .vp-node{min-width:70px;}
  .vp-node .lbl{font-size:10px;}
}

/* ---------- ABOUT 히어로: 눈 홀로그램 "빛의 여정" — 시안 E-2 (about.html) ----------
   라벨·지시선 없이 애니메이션만으로 서사(빛이 각막→망막으로 이동해 파문으로 맺힘).
   빛 애니메이션 자체는 HTML 안의 SVG(SMIL <animate>)에 있고, 여기는 레이아웃·연출 담당 */
.hero-eye{padding:96px 0 84px; position:relative; overflow:hidden;}
.hero-eye::before{
  /* 아주 옅은 모눈 배경 — 눈 주변만 보이게 마스크 */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(63,169,245,.035) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(63,169,245,.035) 0 1px, transparent 1px 48px);
  -webkit-mask-image:radial-gradient(circle at 72% 45%, #000 0%, transparent 75%);
          mask-image:radial-gradient(circle at 72% 45%, #000 0%, transparent 75%);
}
.hero-eye .wrap{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr 1.05fr; gap:48px; align-items:center;
}
.hero-eye .page-title{font-size:clamp(34px, 4.4vw, 56px); line-height:1.25; margin-bottom:24px;}
.hero-eye .lead{max-width:560px; margin-bottom:26px;}
.he-tagline{font-family:'IBM Plex Mono',monospace; font-size:13px; letter-spacing:1.5px; color:var(--brand-strong);}
.he-tagline::after{content:"_"; animation:he-cursor 1.1s step-end infinite;} /* 타자기 커서 */
@keyframes he-cursor{50%{opacity:0;}}
.eye-visual{position:relative; max-width:600px; margin:0 auto; width:100%;}
.eye-visual img{
  width:100%; display:block;
  /* 이미지 배경(순검정)과 사이트 배경의 경계를 없애는 가장자리 페이드 마스크 */
  -webkit-mask-image:radial-gradient(ellipse 78% 82% at 50% 50%, #000 52%, transparent 82%);
          mask-image:radial-gradient(ellipse 78% 82% at 50% 50%, #000 52%, transparent 82%);
}
.eye-visual svg{position:absolute; inset:0; width:100%; height:100%;}
.eye-scan{
  /* 눈 전체를 위아래로 훑는 스캔 라인 */
  position:absolute; left:6%; right:6%; height:2px;
  background:linear-gradient(90deg, transparent, rgba(95,203,255,.75), transparent);
  animation:eyescan 5s ease-in-out infinite; pointer-events:none;
}
@keyframes eyescan{0%,100%{top:10%;} 50%{top:90%;}}
.eye-readout{
  display:flex; justify-content:center; margin-top:6px;
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:1px; color:var(--slate);
}
.eye-readout .live{color:var(--spec-green);}
.eye-readout .live::before{content:"●"; margin-right:6px; animation:he-blink 1.6s infinite;}
@keyframes he-blink{0%,100%{opacity:1;} 50%{opacity:.25;}}
@media (max-width:1100px){
  .hero-eye{padding:64px 0 56px;}
  .hero-eye .wrap{grid-template-columns:1fr;}
}
.why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:52px;}
.why-card{
  border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 28px; background:var(--panel); transition:border-color .15s;
}
.why-card:hover{border-color:var(--brand);}
.why-card .tech-sub{
  font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; letter-spacing:.03em;
  display:inline-block; padding:5px 11px; border-radius:999px; margin-bottom:16px;
  background:rgba(63,169,245,0.12); color:var(--brand-strong);
}
.why-card h3{font-size:18px; margin-bottom:12px; line-height:1.4;}
.why-card p{font-size:14.5px; color:var(--slate); line-height:1.65;}

/* ---------- CTA BANNER ---------- */
.invert{background:var(--invert-bg); color:var(--invert-text);}
.cta-banner{
  padding:72px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  position:relative; overflow:hidden;
}
/* 2026-07-18: CTA 배너 배경 = f(X)=y 수식 (X는 로고 4색 X). 오른쪽에 크게, 반투명 */
.cta-banner::before{
  content:''; position:absolute; inset:0;
  background:url('images/cta-formula.svg') right 4% center / auto 66% no-repeat;
  opacity:0.18;
}
.cta-banner .wrap{position:relative; z-index:1;}
.cta-banner .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.cta-banner h2{font-size:clamp(26px, 3vw, 38px); max-width:560px;}
.cta-banner p{color:var(--invert-slate); font-size:15.5px; margin-top:12px; max-width:520px;}
.addr-list{margin-top:22px; display:flex; flex-direction:column; gap:9px;}
.addr-row{display:flex; gap:14px; font-size:13.5px; align-items:baseline;}
.addr-k{color:var(--brand-strong); min-width:120px; flex-shrink:0; font-size:12.5px; font-weight:600; letter-spacing:.01em;}
.addr-v{color:var(--invert-text);}

/* ---------- FOOTER ---------- */
footer{background:var(--invert-bg); color:var(--invert-slate); border-top:1px solid var(--invert-line);}
footer .wrap{padding:34px 32px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;}
footer .f-links{display:flex; gap:24px; font-size:13px;}

/* ---------- REVEAL ---------- */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:none;}

/* ---------- ABOUT: JOURNEY ---------- */
/* 2026-07-18: Journey 섹션 배경 = 클린룸 양산 라인 실사진(반투명).
   ::before 레이어에 사진을 깔고 opacity로 투명도 조절 — 숫자(0~1)만 바꾸면 됨 */
.journey-photo{
  position:relative; overflow:hidden;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--panel);
}
.journey-photo::before{
  content:''; position:absolute; inset:0;
  background:url('images/journey-line.jpg') center/cover no-repeat;
  opacity:0.11;
}
.journey-photo > .wrap{position:relative; z-index:1;}
/* 사진 출처 표기 스타일의 작은 라벨 (글자는 CSS content로 넣음) */
.journey-photo::after{
  content:'실제 양산 라인';
  position:absolute; top:20px; right:26px; z-index:1;
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.14em;
  color:rgba(233,239,248,0.65);
}
.journey-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:52px;}
.year-card{
  border:1px solid var(--line); border-radius:var(--radius);
  padding:32px 30px; background:var(--panel);
}
.year-header{display:flex; align-items:baseline; flex-wrap:wrap; gap:12px; margin-bottom:22px;}
.year-label{
  font-family:'Space Grotesk',sans-serif; font-size:30px; font-weight:700; color:var(--ink);
}
.year-tagline{font-size:16px; color:var(--brand-strong); font-weight:600;}
.event-list{display:flex; flex-direction:column; gap:16px;}
.event-item{display:flex; gap:12px; align-items:flex-start;}
.event-dot{width:7px; height:7px; border-radius:50%; background:var(--brand); margin-top:7px; flex-shrink:0;}
.event-content h4{font-size:15px; font-weight:600; color:var(--ink); margin-bottom:3px; line-height:1.4;}
.event-content p{font-size:13px; color:var(--slate); line-height:1.55;}

/* ---------- ABOUT: TEAM ---------- */
/* 2026-07-18: Leadership 섹션 배경 = 광학 수식 + 성장 곡선 SVG(반투명).
   직접 그린 SVG(images/team-formula.svg)라 저작권 문제 없음. opacity 숫자로 투명도 조절 */
.team-photo{position:relative; overflow:hidden;}
.team-photo::before{
  content:''; position:absolute; inset:0;
  background:url('images/team-formula.svg') center/cover no-repeat;
  opacity:0.12;
}
.team-photo > .wrap{position:relative; z-index:1;}
/* 2026-07-28: 팀 카드 3명→2명(도덕호 삭제)에 맞춰 3열→2열 — 3열 유지 시 오른쪽에 빈 칸이 생김 */
.team-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:52px;}
.team-card{
  border:1px solid var(--line); border-radius:var(--radius); padding:28px 24px; background:var(--panel);
  text-align:left;
}
/* 개편: 원색(금/빨강/초록) 아바타 → 통일된 다크 톤 + 라인 아이콘 */
.team-avatar{
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  margin-bottom:16px; background:rgba(63,169,245,0.1); border:1px solid var(--line);
}
.team-avatar svg{width:30px; height:30px; fill:var(--brand-strong);}
.team-card h3{font-size:17px; margin-bottom:2px;}
.team-role{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--brand-strong); margin-bottom:14px; display:block;}
.team-card p{font-size:13px; color:var(--slate); line-height:1.6;}
.team-cred{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px;}
.team-cred li{
  font-size:12.5px; color:var(--slate); line-height:1.5; padding-left:13px; position:relative;
}
.team-cred li::before{
  content:''; position:absolute; left:0; top:6px; width:4px; height:4px; border-radius:50%; background:var(--brand);
}

/* ---------- ABOUT: LOCATIONS ---------- */
/* 2026-07-18: Locations 섹션 배경 = 세계 지도(반투명) + 한국 하이라이트/항로 아크 */
.locations-photo{
  position:relative; overflow:hidden;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--panel);
}
.locations-photo::before{
  content:''; position:absolute; inset:0;
  background:url('images/world-map.svg') center 32%/118% no-repeat;
  opacity:0.35;
}
.locations-photo > .wrap{position:relative; z-index:1;}
.location-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:52px;}
.location-card{
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--panel); overflow:hidden;
}
.location-photo{width:100%; height:160px; overflow:hidden; background:var(--line);}
.location-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.location-body{padding:22px 24px 26px;}
.location-tag{
  font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600; letter-spacing:.03em;
  color:var(--brand-strong); margin-bottom:10px; display:block;
}
.location-card h3{font-size:17px; margin-bottom:10px;}
.location-card p{font-size:13.5px; color:var(--slate); line-height:1.6;}

/* ---------- CORE TECH: PATENT LIST ---------- */
.patent-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:36px;}
.patent-column{
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--panel); overflow:hidden;
}
.patent-column-head{padding:26px 24px 22px; border-bottom:1px solid var(--line);}
.patent-count{
  display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600;
  letter-spacing:.03em; padding:5px 12px; border-radius:999px; margin-top:12px;
}
.patent-column-registered .patent-count{background:rgba(140,198,62,0.12); color:#A9DB6C;}
.patent-column-applied .patent-count{background:rgba(255,194,15,0.12); color:#FFD25E;}
.patent-column-label{
  display:flex; align-items:center; gap:9px;
  font-family:'Space Grotesk',sans-serif; font-size:20px; font-weight:700; letter-spacing:-0.01em;
  color:var(--ink);
}
.patent-column-label .dot{width:10px; height:10px; border-radius:50%; flex-shrink:0;}
.patent-column-body{padding:6px 24px 6px;}
.patent-row{display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line);}
.patent-row:last-child{border-bottom:none;}
.patent-row-num{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; font-weight:700; flex-shrink:0; padding-top:1px;
}
.patent-row-title{font-size:13.5px; color:var(--ink); line-height:1.55;}
.patent-column-registered .patent-row-num{color:#A9DB6C;}
.patent-column-applied .patent-row-num{color:#FFD25E;}

/* ---------- CORE TECH: DETAIL SECTIONS ---------- */
.tech-detail-grid{display:grid; grid-template-columns:1.15fr 0.85fr; gap:48px; align-items:center; margin-bottom:20px;}
.tech-detail-head{max-width:560px;}
.tech-detail-head .tech-sub{
  font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; letter-spacing:.03em;
  display:inline-block; padding:5px 11px; border-radius:999px; margin-bottom:16px;
}
.tech-detail-head h2{font-size:clamp(28px, 3.2vw, 40px); margin-bottom:16px;}
.tech-detail-head p{color:var(--slate); font-size:16px; line-height:1.65;}
.tech-detail-visual{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:20px;}

.principle-steps{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:40px; position:relative;
}
.principle-steps::before{
  content:''; position:absolute; top:24px; left:0; right:0; height:1px; background:var(--line); z-index:0;
}
.principle-step{position:relative; z-index:1;}
.principle-num{
  width:48px; height:48px; border-radius:50%; background:var(--panel);
  border:2px solid var(--line); display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:14px; margin-bottom:16px; color:var(--ink);
}
.principle-step h4{font-size:15px; margin-bottom:8px; line-height:1.4;}
.principle-step p{font-size:13px; color:var(--slate); line-height:1.6;}

/* ---------- CORE TECH: DIFFERENTIATORS ---------- */
.diff-block{margin-top:40px;}
.diff-title{
  font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--slate); margin-bottom:18px;
}
.diff-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px;}
.diff-list li{
  display:flex; gap:14px; align-items:flex-start; font-size:14.5px; color:var(--slate); line-height:1.6;
}
.diff-list li::before{
  content:''; width:8px; height:8px; border-radius:50%; background:var(--brand); flex-shrink:0; margin-top:6px;
}
.diff-list strong{color:var(--ink); font-weight:600;}

/* ---------- PAGE HEAD ---------- */
.page-head{padding:72px 0 8px;}
.breadcrumb{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--slate); margin-bottom:22px; letter-spacing:.06em;}
.breadcrumb a:hover{color:var(--brand-strong);}
.breadcrumb b{color:var(--brand-strong); font-weight:600;}

/* ---------- SOLUTION: FILTER + CARD GRID ---------- */
.filter-bar{display:flex; gap:10px; flex-wrap:wrap; padding:28px 0 12px;}
.filter-btn{
  font-family:'IBM Plex Mono',monospace; font-size:13px; padding:8px 18px; border:1px solid var(--line);
  background:var(--panel); border-radius:999px; cursor:pointer; transition:all .15s; color:var(--slate);
}
.filter-btn:hover{border-color:var(--brand); color:var(--ink);}
.filter-btn.active{background:var(--ink); border-color:var(--ink); color:var(--bg);}

.solution-detail-grid{display:grid; grid-template-columns:1fr; gap:24px; padding:36px 0 88px;}
.solution-detail-card{
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--panel); overflow:hidden; transition:border-color .15s;
}
.solution-detail-card:hover{border-color:var(--brand);}
.solution-detail-head{padding:30px 30px 0;}
.solution-detail-tag{
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--brand-strong); border:1px solid var(--line); padding:4px 10px; border-radius:999px; display:inline-block; margin-bottom:16px;
}
.solution-detail-card h3{font-size:24px; margin-bottom:12px;}
.solution-detail-card > p{font-size:15px; color:var(--slate); padding:0 30px; max-width:680px; line-height:1.7;}
.solution-detail-body{padding:24px 30px 30px; display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:14px;}
/* ── 솔루션 카드 우측 사진 (2026-07-21) ──
   3D 장비 실사진을 첫 카드 오른쪽에 절대배치, 카드 세로 중앙 정렬(top:50% + translateY).
   radial 마스크로 사진 가장자리를 배경에 융화(눈 홀로그램과 같은 기법).
   pointer-events:none — 사진이 링크/호버를 가로막지 않도록 */
.solution-detail-card.has-photo{position:relative;}
.solution-card-photo{
  position:absolute; top:50%; transform:translateY(-50%); right:34px; width:270px;
  pointer-events:none; z-index:1;
  -webkit-mask-image:radial-gradient(ellipse 66% 72% at 50% 50%, #000 50%, transparent 87%);
  mask-image:radial-gradient(ellipse 66% 72% at 50% 50%, #000 50%, transparent 87%);
}
/* 사진 영역만큼 텍스트를 왼쪽으로 — 본문이 사진에 깔리지 않게.
   max-width:none — 기본 규칙의 680px 제한은 padding까지 포함(border-box)이라 그대로 두면 본문이 과도하게 좁아짐 */
.has-photo .solution-detail-head, .has-photo > p{padding-right:340px; max-width:none;}
.has-photo .solution-detail-body{padding-right:340px;}
@media (max-width:900px){
  /* 모바일: 절대배치 대신 카드 상단에 사진을 일반 흐름으로 배치 */
  .solution-card-photo{position:static; transform:none; display:block; width:68%; max-width:260px; margin:18px auto 0;}
  .has-photo .solution-detail-head, .has-photo > p{padding-right:30px;}
  .has-photo .solution-detail-body{padding-right:30px;}
}

/* 3D Spectral Encoding 섹션 (2026-07-21): 직접 그린 비구면 렌즈 설계 도면 SVG를 반투명 배경으로.
   섹션 전체가 아니라 상단 우측(제목·본문 옆 빈 공간)에만 도면 원본 비율로 배치 —
   섹션이 길어서 cover로 깔면 도면이 과하게 확대되기 때문. 크기는 width/height 숫자로 조절 */
.lens-blueprint{position:relative; overflow:hidden;}
.lens-blueprint::before{
  content:''; position:absolute; top:36px; right:0; width:1120px; height:560px;
  background:url('images/lens-design.svg') right top / contain no-repeat;
  opacity:0.5; pointer-events:none;
}
.lens-blueprint > .wrap{position:relative; z-index:1;}
@media (max-width:900px){
  .lens-blueprint::before{display:none;} /* 모바일: 텍스트 뒤에 도면이 겹쳐 산만해지므로 숨김 */
}

/* 2.5D Acu-Flying 섹션 (2026-07-21): 2.5D 장비 내부 실사진(25D.jpg) 반투명 배경.
   사진이 밝고 복잡해서 opacity를 다른 배경(0.11~0.12)보다 낮게(0.08) — 숫자만 조절하면 됨.
   기존 인라인 스타일에 있던 panel 배경·상하 보더도 이 클래스로 흡수 */
.acu-photo{
  position:relative; overflow:hidden;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--panel);
}
.acu-photo::before{
  content:''; position:absolute; inset:0;
  background:url('images/25D.jpg') center/cover no-repeat;
  opacity:0.08;
}
.acu-photo > .wrap{position:relative; z-index:1;}
/* 우상단 사진 설명 라벨 — Journey 섹션(.journey-photo::after)과 같은 패턴 (2026-07-21 사용자 요청 문구) */
.acu-photo::after{
  content:'FPCB LD/ULD 및 Stacking 포함 Quad-2.5D Acu-Flying 광학계 적용 실제 Turn-Key 장비';
  position:absolute; top:20px; right:26px; z-index:1;
  font-family:'IBM Plex Mono',monospace; font-size:14px; letter-spacing:.1em;
  color:rgba(233,239,248,0.72);
  max-width:calc(100% - 52px); text-align:right;
}

/* Home Problem 섹션 (2026-07-23): 3D SW 화면 캡처(capture1.jpg — TGV 홀 정밀 계측 화면)를
   반투명 섹션 전체 배경으로 — .acu-photo와 같은 패턴 (배경은 cover 방식이라 섹션 비율에 따라
   가장자리가 일부 잘릴 수 있음). 캡처가 다크 UI라 밝은 사진(0.08)보다 살짝 높은 0.14 —
   카드 텍스트 가독성이 우선이므로 진하기는 이 숫자만 조절하면 됨 */
.problem-photo{position:relative; overflow:hidden;}
.problem-photo::before{
  content:''; position:absolute; inset:0;
  background:url('images/capture1.jpg') center/cover no-repeat;
  opacity:0.14; pointer-events:none;
}
.problem-photo > .wrap{position:relative; z-index:1;}
@media (max-width:900px){
  /* 모바일: 카드가 세로로 쌓여 섹션이 길어지면 가로형 캡처가 cover로 크게 확대·크롭되어
     얼룩처럼 보임 → lens-blueprint 모바일과 같은 원칙으로 배경 숨김 */
  .problem-photo::before{display:none;}
}

/* Careers 페이지 전체 배경 (2026-07-21): PlanX 명판(브러시드 메탈, planx-nameplate.jpg —
   원본 PlanX명판.jpg의 영문 파일명 복사본; 한글 파일명은 URL 문제 소지가 있어 배포 제외 원칙).
   position:fixed — 스크롤해도 배경은 고정되어 은은한 깊이감. z-index:-1로 모든 콘텐츠 뒤에.
   밝은 메탈 이미지라 opacity를 더 낮게(0.05). 진하기는 opacity 숫자만 조절 */
.careers-bg::before{
  content:''; position:fixed; inset:0; z-index:-1;
  background:url('images/planx-nameplate.jpg') center/cover no-repeat;
  opacity:0.05; pointer-events:none;
}

/* Wafer/고밀도 PCB/FPCB 카드: 실제 불량 검출 캡처 전시 (2026-07-21, 2026-07-24 defect3으로 교체).
   defect3-dark.jpg(흰 배경을 다크 네이비로 치환한 처리본)를 TGV 카드의 우측 사진과 대칭되게
   카드 우측에 얇은 보더 프레임으로 배치 (창 타이틀 바는 사용자 요청으로 제거) */
.solution-detail-card.has-defect{position:relative;}
.defect-shot{
  position:absolute; top:50%; transform:translateY(-50%); right:34px; width:340px;
  border:1px solid var(--line); border-radius:10px; overflow:hidden;
  background:#0A1424;
}
.defect-shot img{width:100%; display:block;}
/* 패널 영역만큼 텍스트를 왼쪽으로 (TGV 카드 .has-photo와 같은 방식) */
.has-defect .solution-detail-head, .has-defect > p{padding-right:410px; max-width:none;}
.has-defect .solution-detail-body{padding-right:410px;}
@media (max-width:900px){
  /* 모바일: 절대배치 대신 카드 흐름 안에 배치 */
  .defect-shot{position:static; transform:none; width:auto; max-width:400px; margin:18px auto 0;}
  .has-defect .solution-detail-head, .has-defect > p{padding-right:30px;}
  .has-defect .solution-detail-body{padding-right:30px;}
}

.solution-spec-row{
  border:1px solid var(--line); border-radius:10px; padding:16px 18px; background:rgba(27,42,69,0.35);
}
.solution-spec-row .k{
  font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600; color:var(--brand-strong); margin-bottom:6px; letter-spacing:.03em;
}
.solution-spec-row .v{font-size:13.5px; color:var(--ink); line-height:1.6;}

/* ---------- CAREERS (2026-07-18 신설) ----------
   <details>/<summary> 는 HTML 내장 아코디언 태그 — JS 없이 클릭으로 열리고 닫힘.
   details에 open 속성이 붙으면 펼쳐진 상태이며, CSS의 [open] 선택자로 그 상태를 스타일링 */
.job-list{display:flex; flex-direction:column; gap:16px; padding:36px 0 8px;}
.job-card{
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--panel); overflow:hidden; transition:border-color .15s;
}
.job-card:hover, .job-card[open]{border-color:var(--brand);}
.job-summary{
  list-style:none; cursor:pointer; padding:26px 30px;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
}
.job-summary::-webkit-details-marker{display:none;}  /* 기본 ▶ 마커 숨김 */
.job-title{
  font-family:'Space Grotesk','IBM Plex Sans KR',sans-serif;
  font-size:20px; font-weight:700; letter-spacing:-0.01em; line-height:1.3;
}
.job-meta{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
.job-tag{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--slate);
  background:rgba(27,42,69,0.5); border:1px solid var(--line); border-radius:6px; padding:5px 10px;
}
.job-toggle{
  flex-shrink:0; width:36px; height:36px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; color:var(--brand-strong); transition:transform .2s;
}
.job-card[open] .job-toggle{transform:rotate(45deg);}  /* +가 45도 돌아 ×모양이 됨 */
.job-body{padding:2px 30px 30px; border-top:1px solid var(--line); display:flex; flex-direction:column;}
.job-section{margin-top:24px;}
.job-section h4{
  font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--brand-strong); margin-bottom:12px;
}
.job-section ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
.job-section li{
  font-size:14.5px; color:var(--slate); line-height:1.6; padding-left:14px; position:relative;
}
.job-section li::before{
  content:''; position:absolute; left:0; top:9px; width:5px; height:5px; border-radius:50%; background:var(--brand);
}
/* 지원 버튼: 본문보다 한 단계 작게, 카드 우하단 정렬
   (job-body가 flex column이므로 align-self:flex-end 로 오른쪽 끝에 붙음) */
.job-apply{align-self:flex-end; margin-top:20px; padding:9px 18px; font-size:13px;}
.job-footnote{color:var(--slate); font-size:14px; padding:20px 0 88px;}

/* ---------- CONTACT ---------- */
.contact-hero{padding:72px 0 20px;}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; padding-bottom:96px;}
.c-item{margin-bottom:26px; border-bottom:1px solid var(--line); padding-bottom:22px;}
.c-item:last-child{border-bottom:none;}
.c-item .l{
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.1em; color:var(--brand-strong); margin-bottom:8px; text-transform:uppercase;
}
.c-item .v{font-size:15.5px; line-height:1.6;}

/* 2026-07-18: 접수 폼 제거 → 이메일 직접 문의 카드로 교체 */
.contact-email-card{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--panel);
  padding:38px 34px;
}
.contact-email-card h2{font-size:26px; margin-bottom:12px;}
.contact-email-card > p{color:var(--slate); font-size:15px; line-height:1.65; margin-bottom:24px;}
.contact-email-hint{
  margin-top:20px; padding-top:18px; border-top:1px solid var(--line);
  font-size:13px !important; line-height:1.7;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1100px){
  section{padding:72px 0;}
  .hero{padding:56px 0 48px;}
  .hero-photo{padding:96px 0 88px;}
  .hero .wrap{grid-template-columns:1fr;}
  .vision-grid{grid-template-columns:1fr;}
  .br-desktop{display:none;}
  .stat-grid{grid-template-columns:1fr;}
  .stat-grid-2col{grid-template-columns:1fr; max-width:none;}
  .patent-grid{grid-template-columns:1fr; gap:28px;}
  .tech-card-grid, .solution-grid, .why-grid, .problem-grid{grid-template-columns:1fr;}
  .journey-grid{grid-template-columns:1fr; gap:20px;}
  .team-grid{grid-template-columns:1fr;}
  .location-grid{grid-template-columns:1fr;}
  .principle-steps{grid-template-columns:1fr; gap:28px;}
  .tech-detail-grid{grid-template-columns:1fr; gap:28px;}
  .principle-steps::before{display:none;}
  .contact-grid{grid-template-columns:1fr; gap:36px;}
  .solution-detail-body{grid-template-columns:1fr;}
  .nav-links{
    position:absolute; top:100%; left:0; right:0; background:var(--panel);
    flex-direction:column; align-items:flex-start; padding:20px 32px; gap:16px;
    border-bottom:1px solid var(--line);
    display:none;
  }
  .nav-toggle:checked ~ .nav-links{display:flex;}
  .nav-burger{display:flex; flex-direction:column; gap:5px; cursor:pointer; width:22px;}
  .logo-img{height:60px; padding:7px 12px;}  /* 모바일: 헤더가 과하게 두꺼워지지 않게 */
  .nav-burger span{height:2px; background:var(--ink); display:block;}
  .hero-visual{order:-1;}
  .cta-banner .wrap{flex-direction:column; align-items:flex-start;}
}
@media (max-width:520px){
  .wrap{padding:0 20px;}
  .hero p.lead{font-size:15px;}
}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px;}