/* ===== METADEXTER 공유 디자인 시스템 (home.html에서 추출) — 디자인 리뷰용 목업 ===== */


/* ==========================================================================
   1. COLOR PALETTE
   브랜드 컬러(2026-10-15 피지컬 AI 개편, _design/physical-ai/palette.md): 파랑 + 다크네이비.
   로고(assets/brand/*.png)의 두 기준색 — 심볼 진한 파랑 #0073FE, 워드마크 "Dexter" 하늘색 #00A7FE.
   - brand-600: 라이트 배경 위 기본 포인트(버튼/링크/헤드라인 강조). 화이트 대비 5.84:1 (AA)
     (로고 원색 #0073FE는 흰 배경 4.30:1로 AA 미달이라 명도를 낮춘 값)
   - brand-700: brand-600의 hover/active. 화이트 대비 8.39:1 (AAA)
   - brand-400: 다크 배경 위 강조 텍스트 전용(라벨/숫자). 워드마크 원색 그대로 — navy-950 대비 7.10:1 (AAA)
     (brand-600을 다크 배경 소형 텍스트에 쓰면 3.21:1로 AA 미달 → brand-400으로 대체. 흰 배경 텍스트에는 금지, 2.64:1)
   - brand-100: 틴트 배경(칩·태그·하이라이트). brand-700 텍스트 7.39:1
   - navy 계열: 히어로/CTA 등 "커버" 섹션 배경 (브랜드 소개서 표지 패턴)
   - gray 계열: 본문 배경/텍스트, 섹션 구분용 알터네이팅 배경
   ========================================================================== */
:root{
  /* Brand core */
  --brand-700:#0948A8;
  --brand-600:#0B5ED7;   /* Primary accent — light bg 위 텍스트/버튼 */
  --brand-400:#00A7FE;   /* Primary accent — dark bg 위 텍스트/라벨 (대비 보정용) */
  --brand-100:#E6F2FF;   /* 파랑 틴트 배경 (배지, 하이라이트 박스) */

  --navy-950:#0B1220;  /* 히어로/커버 기본 배경 */
  --navy-900:#0F1A2E;  /* 히어로 그라데이션 하단 */
  --navy-800:#16223C;  /* 다크 섹션 위 카드/서피스 */
  --navy-700:#233252;  /* 다크 섹션 보더 */

  --white:#FFFFFF;
  --gray-50:#F6F7F9;   /* 알터네이팅 섹션 배경 */
  --gray-100:#ECEEF2;
  --gray-200:#DFE2E8;
  --gray-300:#C7CCD6;
  --gray-500:#6B7280;  /* 보조 텍스트 (본문 위 캡션) */
  --gray-700:#333B47;  /* 서브 본문 텍스트 */
  --gray-900:#12151C;  /* 헤드라인 텍스트 (라이트 배경) */

  /* Semantic (참고용 — 홈에서는 최소 사용) */
  --success:#1F9D55;
  --warning:#C77D00;

  /* Type scale */
  --font-kr:'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-label:'Oswald', var(--font-kr);

  --fs-display: clamp(34px, 4.6vw, 58px);
  --fs-h2: clamp(26px, 3vw, 38px);
  --fs-h3: 21px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-caption: 13px;
  --fs-stat: clamp(32px, 4vw, 46px);

  /* Spacing scale (8px base) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;

  --container-w: 1220px;
  --radius: 10px;
  --radius-sm: 6px;

  /* 챗봇 플로팅 버튼(.chat-fab) 전용 토큰. .chat-fab은 .side-widget 스코프 밖에 있어
     지역 --accent를 상속받지 못하므로 여기 :root에 선언한다.
     2026-10-15: 기존 오렌지 → 브랜드 파랑(brand-600)으로 통일 (hero-impl-notes.md 8-4). */
  --accent:var(--brand-600);
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
/* 앵커 이동 시 sticky 헤더(.site-header, .header-inner 76px)에 섹션 제목이 가리지 않도록
   스크롤 정지 위치를 헤더 높이 + 여백만큼 내린다. 헤더 높이는 브레이크포인트와 무관하게 76px 고정.
   home.html은 인라인 사본을 쓰므로 그쪽에도 같은 규칙이 따로 들어가 있다. */
:target{scroll-margin-top:100px;}
body{
  font-family:var(--font-kr);
  color:var(--gray-900);
  background:var(--white);
  font-size:var(--fs-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button, input, select, textarea{font-family:inherit;}
h1,h2,h3,h4{font-weight:800; line-height:1.25; letter-spacing:-0.02em;}
.container{max-width:var(--container-w); margin:0 auto; padding:0 var(--sp-5);}

/* Eyebrow / uppercase label style — brand tag 톤 (예: REAL-TIME, HANDS-FREE) */
.eyebrow{
  font-family:var(--font-label);
  font-weight:600;
  font-size:var(--fs-caption);
  letter-spacing:0.14em;
  text-transform:uppercase;
}

.section{padding:var(--sp-9) 0;}
.section-alt{background:var(--gray-50);}
.section-head{max-width:640px; margin-bottom:var(--sp-7);}
.section-head .eyebrow{color:var(--brand-600); margin-bottom:var(--sp-3); display:inline-block;}
.section-head h2{color:var(--gray-900); margin-bottom:var(--sp-3);}
.section-head p{color:var(--gray-500); font-size:var(--fs-body-lg);}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 28px; border-radius:var(--radius-sm);
  font-weight:700; font-size:15px; cursor:pointer; border:1.5px solid transparent;
  transition:all .15s ease; white-space:nowrap;
}
.btn-primary{background:var(--brand-600); color:var(--white);}
.btn-primary:hover{background:var(--brand-700);}
.btn-ghost-dark{background:transparent; border-color:rgba(255,255,255,.35); color:var(--white);}
.btn-ghost-dark:hover{border-color:#fff; background:rgba(255,255,255,.06);}
.btn-outline{background:transparent; border-color:var(--gray-300); color:var(--gray-900);}
.btn-outline:hover{border-color:var(--gray-900);}
.btn-sm{padding:10px 20px; font-size:14px;}
.btn-link{color:var(--brand-600); font-weight:700; font-size:14px; display:inline-flex; align-items:center; gap:6px;}
.btn-link .arrow{transition:transform .15s;}
.btn-link:hover .arrow{transform:translateX(3px);}

/* ==========================================================================
   3. HEADER / GNB  →  /css/header.css 로 분리 (헤더 단일화 2단계)
   --------------------------------------------------------------------------
   .site-header / .header-inner / .logo / .logo-img / .gnb / .header-actions /
   .hamburger 와 GNB 활성 표시(.gnb a[aria-current="page"]) 규칙은 전부
   mockups/css/header.css 가 소유한다. 여기에 사본을 남기면 두 파일의
   캐스케이드가 꼬이므로 다시 넣지 말 것.

   로드 순서: 각 페이지가 이 파일(styles.css) "뒤"에 header.css를 링크한다.
   같은 이유로 ≤960px 의 .gnb / .hamburger 규칙도 15절에서 빠져 있다.
   ========================================================================== */

/* ==========================================================================
   4. HERO
   다크 커버 배경(브랜드 소개서 표지 패턴) + 파랑 강조 헤드라인
   ========================================================================== */
.hero{
  position:relative;
  background:radial-gradient(120% 140% at 15% 0%, var(--navy-900) 0%, var(--navy-950) 60%);
  color:var(--white);
  padding:var(--sp-10) 0 var(--sp-9);
  overflow:hidden;
}
.hero::before{ /* AR/XR 그리드·글로우 연출 */
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(60% 60% at 70% 30%, black, transparent);
}
.hero::after{
  content:''; position:absolute; width:520px; height:520px; border-radius:50%;
  right:-120px; top:-140px; background:radial-gradient(circle, rgba(11,94,215,.35), transparent 70%);
  filter:blur(10px);
}
.hero-inner{
  position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:var(--sp-8); align-items:center;
}
.hero-eyebrow{color:var(--brand-400); margin-bottom:var(--sp-4); display:inline-block;}
.hero h1{font-size:var(--fs-display); margin-bottom:var(--sp-5);}
.hero h1 .accent{color:var(--brand-400);}
.hero p.sub{font-size:var(--fs-body-lg); color:#C8CEDB; max-width:520px; margin-bottom:var(--sp-6);}
.hero-ctas{display:flex; gap:var(--sp-4); flex-wrap:wrap;}

/* Hero visual: 실제 스크린샷을 깔끔하게. 이미지 위 장식 요소 없음, 얇은 바깥 프레임만 */
.hero-media{display:flex; flex-direction:column; gap:var(--sp-4);}
.hero-visual{
  position:relative; border-radius:14px; overflow:hidden; line-height:0;
  border:1px solid var(--navy-700);            /* 얇은(1px) 바깥 프레임만 */
}
.hv-img{display:block; width:100%; height:auto;}
/* 캡션: 이미지 아래 별도 여백에 배치(이미지와 겹치지 않음) */
.hv-caption{color:#9AA2B4; font-size:12.5px; line-height:1.4;}
/* 핵심 스펙 뱃지: 이미지 아래 한 줄로 나란히 */
.hv-badges{display:flex; flex-wrap:wrap; gap:8px; list-style:none;}
.hv-badges li{
  font-family:var(--font-label); font-size:11px; letter-spacing:.08em;
  color:var(--brand-400); background:rgba(0,167,254,.10);
  border:1px solid rgba(0,167,254,.35); padding:5px 11px; border-radius:100px;
}

/* ==========================================================================
   5. TRUST STRIP (히어로 하단 미니 신뢰 배지 — GNB 바로 아래 연속감)
   ========================================================================== */
.trust-strip{border-top:1px solid var(--navy-700); margin-top:var(--sp-8); padding-top:var(--sp-5);
  display:flex; gap:var(--sp-7); flex-wrap:wrap; color:#8B93A7; font-size:13px;}
.trust-strip strong{color:var(--white); font-weight:700;}

/* ==========================================================================
   6. 3대 사업영역 (Pillar Cards)
   brand-and-content-v2.md §2 구조 반영: XR 4종 / AI 4컴포넌트 / 맞춤형 개발
   ========================================================================== */
.pillars-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--sp-5);}
.pillar-card{
  background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius);
  padding:var(--sp-6); display:flex; flex-direction:column; gap:var(--sp-4);
  transition:box-shadow .15s, border-color .15s;
}
.pillar-card:hover{box-shadow:0 12px 32px rgba(17,20,28,.08); border-color:var(--gray-300);}
.pillar-num{font-family:var(--font-label); color:var(--brand-600); font-size:13px; font-weight:600; letter-spacing:.1em;}
.pillar-card h3{font-size:var(--fs-h3); color:var(--gray-900);}
.pillar-card p{color:var(--gray-500); font-size:14.5px; flex-grow:1;}
.chip-row{display:flex; flex-wrap:wrap; gap:6px;}
.chip{
  font-family:var(--font-label); font-size:11px; font-weight:500; letter-spacing:.06em;
  background:var(--gray-100); color:var(--gray-700); padding:5px 10px; border-radius:100px;
}
.chip.brand{background:var(--brand-100); color:var(--brand-700);}

/* ==========================================================================
   7. 더 알아보기 (솔루션 · 프로젝트 · 도입사례) — 구 "산업별 바로가기"
      .industry-grid/.industry-card/.ind-label 클래스명은 그대로 재사용 (2026-09-07)
   ========================================================================== */
.industry-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5);}
.industry-card{
  position:relative; border-radius:var(--radius); padding:var(--sp-6);
  background:var(--navy-950); color:var(--white); min-height:190px;
  display:flex; flex-direction:column; justify-content:flex-end; gap:var(--sp-2);
  overflow:hidden; isolation:isolate;
}
.industry-card::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(200deg, var(--navy-800), var(--navy-950));
}
.industry-card::after{
  content:''; position:absolute; right:-30px; top:-30px; width:140px; height:140px; border-radius:50%; z-index:-1;
  background:radial-gradient(circle, rgba(11,94,215,.28), transparent 70%);
}
.industry-card .ind-label{font-family:var(--font-label); font-size:12px; letter-spacing:.12em; color:var(--brand-400);}
.industry-card h4{font-size:19px; font-weight:700; margin:2px 0 6px;}
.industry-card p{font-size:13.5px; color:#AAB2C4;}

/* ==========================================================================
   8. 신뢰 지표 밴드 (Stats)
   brand-and-content-v2.md §3 데이터 반영
   ========================================================================== */
.stats-band{background:var(--navy-950); color:var(--white); padding:var(--sp-8) 0;}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-5); text-align:center;}
.stat-item .num{font-family:var(--font-label); font-size:var(--fs-stat); font-weight:700; color:var(--brand-400);}
.stat-item .label{margin-top:6px; color:#9AA2B4; font-size:14px;}
.stats-band .stats-foot{margin-top:var(--sp-6); text-align:center; color:#6C7690; font-size:12px;}

/* ==========================================================================
   9. 대표 실적 / 도입사례 하이라이트
   brand-and-content-v2.md §5 실사례 카테고리 반영
   ========================================================================== */
.case-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-5);}
.case-card{
  border:1px solid var(--gray-200); border-radius:var(--radius); overflow:hidden; background:var(--white);
  display:flex; flex-direction:column;
}
.case-thumb{
  aspect-ratio:16/10; background:linear-gradient(135deg, var(--navy-900), var(--navy-800));
  position:relative; display:flex; align-items:center; justify-content:center;
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
/* 이미지/추상 비주얼 위 텍스트 가독성용 다크 오버레이 (라벨 대비 강화) */
.case-thumb::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,18,32,.5), rgba(11,18,32,.78));
}
.case-thumb span{
  position:relative; z-index:1;
  font-family:var(--font-label); color:rgba(255,255,255,.82); font-size:12px; letter-spacing:.08em;
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}

/* XR TRAINING — 인물(XR글래스 착용)만 크롭한 case-xr-training.jpg, 얼굴/글래스에 초점 */
.case-thumb--xrtrain{background-image:url("../assets/case-xr-training.jpg"); background-position:center 30%;}
/* XR ON-SITE — 현장 게이지/밸브 사진만 크롭한 case-xr-onsite.jpg (텍스트 없음) */
.case-thumb--xronsite{background-image:url("../assets/case-xr-onsite.jpg"); background-position:center;}
/* AI DETECTION — 실사진 없음: 어두운 배경 + 동심원/스캔 추상 패턴 */
.case-thumb--aidetect{
  background:
    radial-gradient(circle at 50% 50%, rgba(0,167,254,.30), transparent 42%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.06) 0 1px, transparent 1px 16px),
    linear-gradient(135deg, var(--navy-800), var(--navy-950));
}
/* AI GUIDANCE — 실사진 없음: 어두운 배경 + 격자/경로 추상 패턴 */
.case-thumb--aiguide{
  background:
    linear-gradient(115deg, rgba(0,167,254,.22), transparent 55%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.05) 0 1px, transparent 1px 22px),
    linear-gradient(135deg, var(--navy-900), var(--navy-950));
}
.case-body{padding:var(--sp-5); display:flex; flex-direction:column; gap:8px; flex-grow:1;}
.case-cat{font-family:var(--font-label); font-size:11px; letter-spacing:.1em; color:var(--brand-600); font-weight:600;}
.case-body h4{font-size:16px; font-weight:700; color:var(--gray-900);}
.case-body p{font-size:13.5px; color:var(--gray-500); flex-grow:1;}
/* 썸네일 분류 'physical'(THUMB_LABELS) — 이미지가 없는 피지컬 카드의 배경(라벨 PHYSICAL AI 위) */
.case-thumb--physical{background:linear-gradient(135deg, var(--navy-950), var(--navy-800));}

/* 제조 암묵지 AI 솔루션 카드(.case-card--physical, cases.html #physical-ai 섹션) — 2026-10-19 (2차 개편: 3열)
   산업 카드(4열, CSS 배경 썸네일)와 달리 같은 컨테이너 폭을 3등분한 카드에 인포그래픽(thumbnail_image)을 자르지 않고 보여 준다.
   .case-grid--physical 은 grid 대신 flex 로 가운데 정렬 — 1~2장이어도 3열 기준 폭을 유지하고 가운데 모인다.
   열 수: 기본 3열 → ≤1024px 2열(홀수면 마지막 카드가 가운데) → ≤620px 1열. gap 은 산업 .case-grid 와 같은 --sp-5.
   썸네일 칸은 16:9 로 통일하고 <img> 는 object-fit:contain — 카드 이미지에 라벨·부제가 그려져 있어 한 글자도 잘리면 안 된다.
   02·03 카드(2560x1440)는 칸과 비율이 같아 꽉 차고, 31번 카드(1379x919, 3:2)는 좌우에 여백이 남는다. 그 여백 색은 31번 이미지의
   좌·우 가장자리 12px 평균을 Pillow 로 샘플링한 값(왼쪽 #1E374F, 오른쪽 #060F17 — 토큰 navy-700/navy-950 에 각각 가장 가깝지만
   양쪽이 달라 하나의 토큰으로는 한쪽이 뜬다)을 좌→우 그라데이션으로 깔아 사진과 이어지게 한다. 02·03 에서는 여백이 0 이라 보이지 않는다.
   .case-thumb--img 는 <img> 가 있을 때만 붙는 변형: 라벨 가독성용 어두운 스크림(::before)을 끈다. */
.case-grid--physical{display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; gap:var(--sp-5);}
.case-grid--physical .case-card{flex:0 0 calc((100% - 2 * var(--sp-5)) / 3); max-width:calc((100% - 2 * var(--sp-5)) / 3);}
.case-card--physical .case-thumb{aspect-ratio:16/9; min-height:0;}
.case-card--physical .case-thumb--img{display:block; background:linear-gradient(90deg, #1E374F 0%, #060F17 100%);}
.case-card--physical .case-thumb--img::before{content:none;}
/* <img> 는 absolute 로 칸에서 띄운다 — 흐름 안에 두면 flex 아이템의 자동 min-height 가 이미지 고유 높이(3:2)를 따라
   aspect-ratio:16/9 칸을 3:2 로 늘려 버린다(2026-10-19 측정: 31번 카드 칸 비율 1.50). .case-thumb 는 position:relative. */
.case-card--physical .case-thumb--img img{position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain;}
.case-card--physical .case-body h4{font-size:18px;}
/* 카드 본문: 설명은 늘리지 않고(기존 .case-body p{flex-grow:1} 해제) 주요 기능 목록이 설명 바로 아래 오게 한다.
   하단 요소(성과 줄)는 margin-top:auto 로 카드 바닥에 붙여 같은 줄 카드끼리(flex stretch 로 높이 동일) 밑선이 맞는다. */
.case-card--physical .case-body > p{flex-grow:0;}
.case-card--physical .case-body .case-result{margin-top:auto;}
/* 주요 기능 목록(features) — 솔루션 카드·상세의 .sol-features 점 목록을 그대로 쓰고 여백만 보탠다(카드 안·상세 요약 아래 공용) */
.case-features{margin-top:2px; word-break:keep-all;}
.res-detail-head .case-features{margin-top:var(--sp-4);}
/* 카드 메타 줄: 세부 산업(.case-industry) · 솔루션 분류(.case-cat) · 상태 배지(.sol-status, 솔루션 카드와 같은 골드 톤) */
.case-meta{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px;}
.case-meta .case-industry{align-self:center;}
.case-meta .sol-status{margin-left:auto;}
/* 상세(.pd-meta 는 projects_detail.html 의 태그 줄, flex gap 8px) 안에서는 .res-detail-head .sol-status 의 왼쪽 여백을 끈다 */
.pd-meta .sol-status{margin-left:0;}
@media (max-width: 1024px){
  .case-grid--physical .case-card{flex-basis:calc((100% - var(--sp-5)) / 2); max-width:calc((100% - var(--sp-5)) / 2);}
}
@media (max-width: 620px){
  .case-grid--physical .case-card{flex-basis:100%; max-width:100%;}
}
/* 산업별 통합 상세(cases_industry.html, /cases/industry/<slug>) — 2026-10-29.
   사례 본문은 개별 상세 규칙(.res-detail*) 그대로, 여기는 산업명 제목·바로가기·사례 사이 구분만.
   폭은 .res-detail 과 같은 860px 가운데.
   앵커 이동 여백: 전역 :target 규칙(1절)은 여기서 닿지 않는다 — _layout.html 의 "#" 링크 클릭 스크립트가 해시를 바꾸지 않고
   scrollIntoView 로 옮기므로 :target 이 성립하지 않는다. 그래서 사례 article 자체에 같은 100px(헤더 76 + 여유)을 준다. */
.ci-case{scroll-margin-top:100px;}
.ci-head{max-width:860px; margin:0 auto var(--sp-8);}
.ci-title{font-size:32px; color:var(--gray-900); word-break:keep-all;}
.ci-toc{margin-top:var(--sp-5); padding:var(--sp-4) var(--sp-5); background:var(--gray-50); border-radius:8px;}
.ci-toc ol{margin:0; padding-left:1.4em; display:grid; gap:6px;}
.ci-toc a{color:var(--brand-700); font-weight:600; word-break:keep-all;}
.ci-toc a:hover{text-decoration:underline;}
.ci-case + .ci-case{margin-top:var(--sp-9); padding-top:var(--sp-9); border-top:1px solid var(--gray-200);}
.ci-foot{max-width:860px; margin-left:auto; margin-right:auto;}
@media (max-width: 620px){
  .ci-head{margin-bottom:var(--sp-7);}
  .ci-title{font-size:26px;}
  .ci-case + .ci-case{margin-top:var(--sp-7); padding-top:var(--sp-7);}
}

/* ==========================================================================
   10. 고객사 로고 배너
   ========================================================================== */
.logo-band{padding:var(--sp-7) 0; border-top:1px solid var(--gray-200); border-bottom:1px solid var(--gray-200);}
.logo-band .label{text-align:center; color:var(--gray-500); font-size:13px; margin-bottom:var(--sp-5);}
.logo-strip{display:flex; flex-wrap:wrap; justify-content:center; gap:var(--sp-6); align-items:center;}
.logo-chip{
  color:var(--gray-500); font-weight:700; font-size:15px; letter-spacing:.01em;
  opacity:.7; filter:grayscale(1);
}
.logo-band .note{text-align:center; margin-top:var(--sp-5); color:var(--gray-300); font-size:11.5px;}

/* ==========================================================================
   11. 최신 뉴스
   ========================================================================== */
.news-list{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5);}
.news-card{border-bottom:1px solid var(--gray-200); padding-bottom:var(--sp-5);}
.news-date{font-family:var(--font-label); font-size:12px; color:var(--gray-500); letter-spacing:.05em;}
.news-tag{display:inline-block; background:var(--brand-100); color:var(--brand-700); font-size:11px; font-weight:700;
  padding:3px 8px; border-radius:4px; margin-left:8px;}
.news-card h4{margin-top:10px; font-size:16px; font-weight:700; color:var(--gray-900); line-height:1.45;}

/* ==========================================================================
   12. 하단 CTA 배너
   ========================================================================== */
.cta-banner{
  background:linear-gradient(120deg, var(--navy-950) 0%, #0C1A3A 120%);
  color:var(--white); padding:var(--sp-9) 0; position:relative; overflow:hidden;
}
.cta-banner::after{
  content:''; position:absolute; left:-10%; bottom:-40%; width:480px; height:480px; border-radius:50%;
  background:radial-gradient(circle, rgba(11,94,215,.35), transparent 70%);
}
.cta-inner{position:relative; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-6); flex-wrap:wrap;}
.cta-inner h2{font-size:var(--fs-h2); max-width:560px;}
.cta-inner p{color:#B7BECD; margin-top:var(--sp-3); max-width:480px;}
.cta-actions{display:flex; gap:var(--sp-4); flex-wrap:wrap;}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
footer{background:var(--gray-900); color:#A7ADB8; padding:var(--sp-8) 0 var(--sp-6);}
/* 2026-10-29 공통 푸터(_footer.html) 5열: 회사 정보 · COMPANY · SOLUTIONS · USE CASES · RESOURCES. 예전 4열 = 1.4fr 1fr 1fr 1fr.
   SOLUTIONS 는 솔루션 이름이 가장 길어(예: "AI 데이터수집 솔루션") 조금 넓게. 회사 정보 열은 1.4fr 이면 1440 에서도 261px 로 좁아져
   주소가 낱말 중간("에이스앤에스타/워")에서 꺾이고 1024 이하에서 로고(38px 높이 = 폭 267px)가 줄어서 1.8fr. */
.footer-grid{display:grid; grid-template-columns:1.8fr 1fr 1.2fr 1fr 1fr; gap:var(--sp-6); padding-bottom:var(--sp-7);}
.footer-col h5{color:#fff; font-size:13px; letter-spacing:.08em; margin-bottom:var(--sp-4); font-family:var(--font-label);}
.footer-col p, .footer-col li{font-size:13.5px; line-height:2;}
.footer-col a:hover{color:#fff;}
.footer-col--brand p{word-break:keep-all;}   /* 주소가 좁은 폭에서 꺾일 때 낱말 단위로 */
.footer-brand{display:flex; align-items:center; gap:8px; font-family:var(--font-label); font-weight:700; color:#fff; font-size:17px; margin-bottom:var(--sp-4);}
/* 2026-10-16 푸터 로고를 글자(METADEXTER)에서 헤더와 같은 이미지로 교체. 2026-10-21 새 로고 assets/brand/mdt-logo
   (방패 심볼 + METADEXTER + 슬로건, 흰색·하늘색 = 어두운 배경용 618×88 → 38px일 때 폭 267px).
   <picture>(WebP + PNG 폴백)는 home/about/contact/_layout 4곳 공통.
   width/height 속성은 비율 힌트(CLS 방지)이고 표시 크기는 여기서 정한다. 위 글자형 규칙은 보관(다른 템플릿이 쓸 수 있다). */
.footer-brand picture{display:contents;}
.footer-brand .footer-logo{height:38px; width:auto; max-width:100%; display:block;}
.footer-bottom{border-top:1px solid #262B33; padding-top:var(--sp-5); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12.5px;}

/* ==========================================================================
   15. RESPONSIVE (리뷰용 — 핵심 브레이크포인트만 대응)
   ========================================================================== */
@media (max-width: 960px){
  /* .gnb / .hamburger 의 ≤960px 규칙은 /css/header.css E절로 이동했다.
     (단순 display 토글이 아니라 세로 드롭다운 패널로 재배치되므로,
      헤더 관련 규칙을 한 파일에 모아 두지 않으면 캐스케이드가 꼬인다.) */
  .hero-inner{grid-template-columns:1fr;}
  .hero-visual{order:-1;}
  .pillars-grid, .industry-grid{grid-template-columns:1fr 1fr;}
  .case-grid{grid-template-columns:1fr 1fr;}
  .stats-grid{grid-template-columns:1fr 1fr;}
  .news-list{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .footer-col--brand{grid-column:1 / -1;}   /* 5열 → 2열일 때 회사 정보만 한 줄 전체, 나머지 4열은 2×2 */
}
@media (max-width: 620px){
  .pillars-grid, .industry-grid, .case-grid, .stats-grid, .footer-grid{grid-template-columns:1fr;}
  .cta-inner{flex-direction:column; align-items:flex-start;}
  .section{padding:var(--sp-7) 0;}
}


/* ==========================================================================
   16. INTERIOR PAGES (solutions / about / industry) — home과 동일 시스템 확장
   ========================================================================== */
/* 서브 페이지 상단 배너 (_design/physical-ai/subpage-preview.html 5절 — 구 .page-hero 교체, 2026-10-15)
   (A) .page-banner              : 진한 남색 + 파란 글로우. 사진 없음. 기본.
   (B) .page-banner--photo       : 배경 사진 + 어두운 오버레이. 사진은 CSS 변수 하나로만 지정한다:
       <section class="page-banner page-banner--photo" style="--banner-img:url('/assets/…')">
       → 페이지별로 이 변수 값만 바꾼다. 변수가 없으면 (A)와 같은 남색으로 떨어진다(안전 폴백).
       (인라인 <style> 블록 금지 원칙과의 관계: 규칙은 전부 여기 있고 템플릿은 값 하나만 공급한다 — hero-impl-notes.md 8-7)
   구 .page-hero의 격자 ::before는 뺐다 — 사진 버전이 ::before를 사진 레이어로 쓰므로 규칙이 충돌한다. */
.page-banner{
  position:relative; isolation:isolate; overflow:hidden;
  background:radial-gradient(120% 140% at 15% 0%, var(--navy-900) 0%, var(--navy-950) 60%);
  color:var(--white); padding:var(--sp-8) 0;
}
.page-banner::after{
  content:""; position:absolute; z-index:-1; width:460px; height:460px; border-radius:50%; right:-120px; top:-160px;
  background:radial-gradient(circle, rgba(11,94,215,.32), transparent 70%); filter:blur(10px);
}
.page-banner .inner{position:relative; max-width:820px;}
.page-banner .eyebrow{color:var(--brand-400); margin-bottom:var(--sp-3); display:inline-block;}
.page-banner h1{font-size:clamp(30px,4vw,46px); margin-bottom:var(--sp-4); word-break:keep-all;}
.page-banner h1 .accent{color:var(--brand-400);}
.page-banner p.lead{color:#C8CEDB; font-size:var(--fs-body-lg); max-width:640px; word-break:keep-all;}
/* 빵부스러기: <nav class="breadcrumb"><a>HOME</a><span class="sep">›</span><span aria-current="page">ABOUT</span></nav> */
.breadcrumb{
  font-family:var(--font-label); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:#8B93A7;
  margin-bottom:var(--sp-4); display:flex; flex-wrap:wrap; align-items:center; gap:8px;
}
.breadcrumb a:hover{color:#fff;}
.breadcrumb .sep{color:#5D667A;}
.breadcrumb [aria-current="page"]{color:#C8CEDB;}

.page-banner--photo{background:var(--navy-950); padding:var(--sp-9) 0;}
.page-banner--photo::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background-image:var(--banner-img, none); background-size:cover; background-position:70% 35%;
}
/* 사진 위 오버레이: 좌측(텍스트) 짙게 → 우측 옅게 + 전체 톤 다운. 흰 글자 대비 확보
   (A)의 460px 글로우 원(right:-120px; top:-160px)을 inset:0 으로 배너 전체 크기로 되돌린다.
   2026-10-19 수정: 여기 있던 `right:auto; top:auto` 는 (A)의 right/top 을 지우려던 것이었지만 inset:0 뒤에 와서
   inset 의 top/right 롱핸드를 다시 auto 로 덮었고, 내용 없는 absolute 요소라 덮개가 0x0 으로 접혔다(스크림 미적용).
   inset:0 이 네 방향을 이미 덮으므로 두 선언을 제거 — 좌→우 농도 차는 아래 90deg 그라데이션이 담당한다. */
.page-banner--photo::after{
  inset:0; width:auto; height:auto; border-radius:0; filter:none;
  background:
    linear-gradient(90deg, rgba(8,14,28,.92) 0%, rgba(8,14,28,.80) 40%, rgba(8,14,28,.45) 100%),
    linear-gradient(180deg, rgba(8,14,28,.25) 0%, rgba(8,14,28,.15) 100%);
}
/* 사진 배너 전용 빵부스러기 색 — 2026-10-19. 남색 배너(A)는 위 .breadcrumb 값 그대로(이 선택자가 닿지 않는다).
   사진 위 .80~.86 스크림은 사진 밝은 부분이 비쳐 #8B93A7 링크가 390 폭에서 3.7:1 까지 떨어져(1단계 측정) 링크·현재 위치·구분자를 한 단계씩 밝힌다. */
.page-banner--photo .breadcrumb{color:#C2C9D6;}
.page-banner--photo .breadcrumb .sep{color:#8B93A7;}
.page-banner--photo .breadcrumb [aria-current="page"]{color:#E9ECF2;}
@media (max-width:960px){
  .page-banner, .page-banner--photo{padding:var(--sp-7) 0;}
  /* 좁은 폭에서는 글이 사진 전체 폭을 덮으므로 좌→우 스크림 대신 전면을 고르게 어둡게(.80~.86) */
  .page-banner--photo::before{background-position:65% 30%;}
  .page-banner--photo::after{background:linear-gradient(180deg, rgba(8,14,28,.80) 0%, rgba(8,14,28,.86) 100%);}
}

/* 솔루션 허브 */
.sol-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-5);}
.sol-card{border:1px solid var(--gray-200); border-radius:var(--radius); overflow:hidden; background:#fff; display:flex; flex-direction:column; transition:box-shadow .15s, border-color .15s;}
.sol-card:hover{box-shadow:0 12px 32px rgba(17,20,28,.08); border-color:var(--gray-300);}
/* 썸네일 이미지 좌상단에 제목이 인쇄돼 있어(XR 4장 모두) 오버레이를 하단으로 모은다.
   원래는 .sol-code 가 좌상단이었는데, 인쇄된 흰 글자 획이 라벨 글자 뒤를 지나가면서
   같은 라벨 안에서 대비가 2.2 ↔ 6.4 로 요동쳐 "뭉개져" 보였다. 평균 밝기 문제가 아니라
   배경이 픽셀마다 바뀌는 문제라, 상단 스크림을 키워서는 해결되지 않는다
   (인쇄된 흰 획 255 를 AA 아래로 누르려면 알파 .87+ 가 필요해 이미지가 검은 판이 된다).
   순서는 코드(위) → 영문 부제(아래) — 사이트 공통 eyebrow+title 패턴을 따른다. */
.sol-thumb{
  aspect-ratio:16/9; position:relative;
  background:linear-gradient(135deg,var(--navy-900),var(--navy-800));
  background-size:cover; background-position:center;
  display:flex; flex-direction:column; justify-content:flex-end;
  gap:7px; padding:var(--sp-4) 18px;
}
/* 스크림 재분배 — 상단 .40 유지(이미지가 그대로 보임), 하단에 집중시켜 텍스트 자리를 확보.
   ::before 는 absolute 라 flex item 이 아니다. static 으로 바꾸면 레이아웃이 깨진다. */
.sol-thumb::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(11,18,32,.40) 0%,
    rgba(11,18,32,.40) 30%,
    rgba(11,18,32,.60) 55%,
    rgba(11,18,32,.88) 88%,
    rgba(11,18,32,.90) 100%);
}
/* --brand-400 은 흰 배경 대비 2.64:1(FAIL)이라 밝은 사진 위에서 대비가 무너진다(구 red-400 시절과 같은 문제).
   하단이 순백에 가까운 이미지(xr-04-manual p90 휘도 251)에서 스크림만으로는 4.57:1 —
   AA 하한 4.5 를 겨우 넘어 여유가 없다. 칩 배경을 한 겹 더 깔아 6.02:1 로 고정한다.
   보더는 하단이 어두운 이미지에서 칩이 배경에 녹지 않게 해 4장의 모양을 맞춘다.
   inset:auto 필수 — absolute 시절의 left/top 이 상대 오프셋으로 되살아나지 않게. */
.sol-thumb .sol-code{
  position:relative; inset:auto; z-index:1; align-self:flex-start;
  font-family:var(--font-label); font-size:12px; letter-spacing:.12em; line-height:1;
  color:var(--brand-400);
  padding:5px 10px 4px; border-radius:var(--radius-sm);
  background:rgba(11,18,32,.82); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}
.sol-thumb .sol-en{
  position:relative; inset:auto; z-index:1;
  color:rgba(255,255,255,.92); font-size:13px; font-weight:600; line-height:1.4;
}
.sol-body{padding:var(--sp-5); display:flex; flex-direction:column; gap:12px; flex-grow:1;}
.sol-body h3{font-size:var(--fs-h3); color:var(--gray-900);}
.sol-def{color:var(--gray-500); font-size:14px;}
.sol-features{display:flex; flex-direction:column; gap:7px;}
.sol-features li{font-size:13.5px; color:var(--gray-700); padding-left:18px; position:relative;}
.sol-features li::before{content:""; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:50%; background:var(--brand-600);}
/* 특허·SW 등록일 / 출원일 — 항목명보다 덜 강조되는 보조 표기 (.news-date와 같은 톤) */
.reg-date{font-family:var(--font-label); font-size:11.5px; color:var(--gray-500); letter-spacing:.03em; white-space:nowrap;}
.sol-card .btn-link{margin-top:auto; padding-top:4px;}

/* 피지컬 AI 카드(.sol-card--physical, solutions.html PHYSICAL 섹션) — 2026-10-16
   썸네일이 설명 글자까지 그려진 정사각 인포그래픽(1507x1507 등)이라 16:9 cover 로 자르면 내용이 사라진다.
   그래서 이 변형만 1:1 박스 + <img> object-fit:contain 으로 전체를 보여 주고, XR 카드의 하단 스크림(::before)과
   코드/영문 부제 오버레이는 쓰지 않는다(인포그래픽 위에 글자를 얹지 않는다). 코드·부제·상태는 본문 위 .sol-meta 줄로.
   사진 자체가 어두운 남색이라 letterbox 가 생겨도 티가 안 나게 박스 배경은 navy-950 으로 둔다. */
.sol-card--physical .sol-thumb{
  aspect-ratio:1/1; display:block; padding:0;
  background:var(--navy-950);
}
.sol-card--physical .sol-thumb::before{content:none;}
.sol-card--physical .sol-thumb img{display:block; width:100%; height:100%; object-fit:contain;}
.sol-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px;
  font-family:var(--font-label); font-size:12px; letter-spacing:.10em; line-height:1.2; color:var(--gray-500);
}
.sol-meta .sol-meta-code{color:var(--brand-600); font-weight:600;}
/* 상태 배지(예: "개발 진행 중") — 목록 카드 메타 줄과 상세 머리(.res-detail-head)에서 같이 쓴다.
   뉴스 '수상·인증' 태그(.t-award)와 같은 골드 톤: #8A6A12 on #FBF0D5 = 6.9:1 */
.sol-status{
  display:inline-block; font-family:var(--font-kr); letter-spacing:0;
  font-size:11px; font-weight:700; line-height:1; padding:5px 10px; border-radius:100px;
  background:#FBF0D5; color:#8A6A12; white-space:nowrap;
}
.sol-meta .sol-status{margin-left:auto;}
.res-detail-head .sol-status{margin-left:6px; vertical-align:top; padding:4px 10px;}
/* 솔루션 상세 사진 배너(.page-banner--sol-detail) — 2026-10-16, 사진 배너(B안)를 실제로 쓰는 첫 페이지.
   [1] 오버레이: 1단계(10/16)에 있던 `.page-banner--sol-detail::after{top:0; right:0}` 임시 패치는 2026-10-19 에
       공통 `.page-banner--photo::after` 에서 `right:auto; top:auto` 를 지우는 근본 수정으로 대체되어 제거했다(16절 주석 참고).
   [2] 위치: 배경 사진이 정사각(1254x1254)이라 가로로 긴 배너에서 cover 로 위아래가 잘린다. 공통 70% 35% 대신
       작업자 얼굴·태블릿이 지나가는 가운데 띠(50% 42%)를 보이게 한다(모바일 65% 30% 규칙도 이 값으로 덮는다). */
.page-banner--sol-detail::before{background-position:50% 42%;}
/* 도입사례 상세 사진 배너(.page-banner--case-detail, projects_detail.html) — 2026-10-19.
   배경 사진이 3:2(1536x1024)라 공통 위치(70% 35% / ≤960px 65% 30%)로 작업자 얼굴·프레스가 모두 보여 별도 규칙이 없다.
   클래스는 솔루션 상세처럼 위치만 조정할 일이 생길 때 쓰는 훅 — 공통 .page-banner--photo 규칙은 바꾸지 않는다. */

/* AI 컴포넌트 카드 (추상 비주얼) */
.ai-thumb{aspect-ratio:16/9; position:relative; overflow:hidden;}
.ai-thumb .ai-num{position:absolute; right:18px; top:10px; z-index:1; font-family:var(--font-label); font-size:36px; font-weight:700; color:rgba(0,167,254,.55);}
.ai-thumb--1{background:radial-gradient(circle at 50% 50%, rgba(0,167,254,.30), transparent 42%), repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.06) 0 1px, transparent 1px 16px), linear-gradient(135deg,var(--navy-800),var(--navy-950));}
.ai-thumb--2{background:linear-gradient(115deg, rgba(0,167,254,.22), transparent 55%), repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 1px, transparent 1px 22px), repeating-linear-gradient(-45deg, rgba(255,255,255,.05) 0 1px, transparent 1px 22px), linear-gradient(135deg,var(--navy-900),var(--navy-950));}
.ai-thumb--3{background:radial-gradient(circle at 30% 45%, rgba(0,167,254,.28), transparent 45%), repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 26px), linear-gradient(135deg,var(--navy-800),var(--navy-950));}
.ai-thumb--4{background:conic-gradient(from 210deg at 70% 30%, rgba(0,167,254,.25), transparent 40%), repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 20px), linear-gradient(135deg,var(--navy-900),var(--navy-950));}

/* 회사소개 인트로 */
.about-intro{display:grid; grid-template-columns:1.1fr .9fr; gap:var(--sp-7); align-items:center;}
.about-intro .lead-quote{font-size:20px; line-height:1.6; color:var(--gray-900); font-weight:700; margin-bottom:var(--sp-4);}
.about-intro p{color:var(--gray-700); margin-bottom:var(--sp-3);}
.about-media img{border-radius:var(--radius); width:100%; border:1px solid var(--gray-200);}
.about-media figcaption{color:var(--gray-500); font-size:12px; margin-top:8px;}
.pillar-mini{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); margin-top:var(--sp-6);}
.pillar-mini .m{border:1px solid var(--gray-200); border-radius:var(--radius); padding:var(--sp-5);}
.pillar-mini .m .n{font-family:var(--font-label); color:var(--brand-600); font-size:12px; letter-spacing:.1em;}
.pillar-mini .m h4{margin:8px 0 6px; font-size:16px;}
.pillar-mini .m p{font-size:13.5px; color:var(--gray-500);}

/* About 인사말·섹션 이동 (2026-10-30, about.html #greeting) */
/* 메뉴로 이동한 섹션 제목 — 헤더(--header-h 76) 바로 아래 24px. 스크립트가 포커스를 옮기지만(tabindex="-1", 스크린리더용) 테두리는 그리지 않는다. */
.section-head h2[tabindex="-1"]{scroll-margin-top:calc(var(--header-h, 76px) + 24px);}
.section-head h2[tabindex="-1"]:focus{outline:none;}
.greeting-media img{display:block; width:100%; height:auto; border-radius:var(--radius);}
.greeting-body{max-width:760px; margin:var(--sp-8) auto 0; word-break:keep-all; color:var(--gray-700);}
.greeting-body h3{font-size:24px; line-height:1.45; font-weight:700; color:var(--gray-900); margin-bottom:var(--sp-5);}
.greeting-body p{font-size:17px; line-height:1.85; margin-bottom:var(--sp-4);}
.greeting-body .greeting-sign{text-align:right; font-weight:700; color:var(--gray-900); margin:var(--sp-6) 0 0;}
/* 2026-10-30 인사말 = 전달받은 이미지 한 장(1275x467). 원본보다 크게 늘리지 않고, 모서리·그림자 없이 받은 그대로. */
.greeting-full img{display:block; width:100%; max-width:1275px; height:auto; margin:0 auto;}
@media (max-width:620px){
  .greeting-body{margin-top:var(--sp-6);}
  .greeting-body h3{font-size:20px;}
  .greeting-body p{font-size:16px; line-height:1.8;}
}

/* 연혁 타임라인 */
.timeline{position:relative; max-width:860px;}
.timeline::before{content:""; position:absolute; left:19px; top:6px; bottom:6px; width:2px; background:linear-gradient(var(--brand-600), var(--gray-200));}
.tl-item{position:relative; padding:0 0 var(--sp-6) 58px;}
.tl-item:last-child{padding-bottom:0;}
.tl-dot{position:absolute; left:10px; top:2px; width:20px; height:20px; border-radius:50%; background:#fff; border:3px solid var(--brand-600); z-index:1;}
.tl-year{font-family:var(--font-label); font-size:26px; font-weight:700; color:var(--gray-900); line-height:1; display:inline-block;}
.tl-phase{font-family:var(--font-label); font-size:11px; letter-spacing:.12em; color:var(--brand-600); margin-left:10px;}
.tl-item ul{display:flex; flex-direction:column; gap:5px; margin-top:10px;}
.tl-item li{font-size:14px; color:var(--gray-700); padding-left:14px; position:relative;}
.tl-item li::before{content:"—"; position:absolute; left:0; color:var(--gray-300);}

/* 로고 그리드(고객/기관) */
/* ==========================================================================
   로고 그리드 (logo-grid.js가 /api/logos/<category> 결과로 채운다)
   두 파일(styles.css / home.html 인라인)에 같은 내용이 들어가야 한다 —
   한쪽만 고치면 페이지 간 로고 크기가 어긋난다.
   ========================================================================== */
.logo-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:10px;}
/* 칸은 높이를 고정해 어떤 비율의 이미지가 들어와도 줄이 가지런히 맞는다.
   로고 PNG에 흰 카드와 둥근 테두리가 이미 그려져 있으므로
   칸에는 border/background를 주지 않는다(이중 테두리 방지). */
.logo-cell{
  height:96px; display:flex; align-items:center; justify-content:center;
  padding:6px; overflow:hidden;
}
/* contain — 비율을 유지한 채 칸 안에 완전히 들어간다(잘리거나 찌그러지지 않음) */
.logo-img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block;}
@media (max-width:960px){
  .logo-grid{grid-template-columns:repeat(3,1fr);}
  .logo-cell{height:84px;}
}
@media (max-width:620px){
  .logo-grid{grid-template-columns:repeat(2,1fr);}
  .logo-cell{height:76px;}
}

/* 산업 페이지 */
.problem-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5);}
.problem-card{border-left:3px solid var(--brand-600); background:var(--gray-50); border-radius:0 var(--radius) var(--radius) 0; padding:var(--sp-5);}
.problem-card .pc-icon{font-size:22px;}
.problem-card h4{margin:10px 0 6px; font-size:16px; color:var(--gray-900);}
.problem-card p{font-size:13.5px; color:var(--gray-500);}

.map-table{border-top:1px solid var(--gray-200);}
.map-row{display:grid; grid-template-columns:1fr auto 1.5fr; gap:var(--sp-5); align-items:center; padding:var(--sp-5) 0; border-bottom:1px solid var(--gray-200);}
.map-problem{font-weight:700; color:var(--gray-900); font-size:15px;}
.map-arrow{color:var(--brand-600); font-size:22px;}
.map-sol .s-name{font-family:var(--font-label); color:var(--brand-600); font-size:12px; letter-spacing:.08em; display:block; margin-bottom:4px;}
.map-sol p{font-size:14px; color:var(--gray-700);}

.effect-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-5); text-align:center;}
.effect-item{border:1px solid var(--gray-200); border-radius:var(--radius); padding:var(--sp-6) var(--sp-4);}
.effect-item .num{font-family:var(--font-label); font-size:var(--fs-stat); color:var(--brand-600); font-weight:700;}
.effect-item .label{color:var(--gray-500); font-size:13.5px; margin-top:6px;}
.effect-note{margin-top:var(--sp-5); color:var(--gray-300); font-size:11.5px; text-align:center;}

/* Interior responsive */
@media (max-width:960px){
  .sol-grid, .problem-grid, .effect-grid{grid-template-columns:1fr 1fr;}
  .about-intro{grid-template-columns:1fr;}
  .about-media{order:-1;}
  .pillar-mini{grid-template-columns:1fr;}
  .map-row{grid-template-columns:1fr; gap:8px;}
  .map-arrow{display:none;}
}
@media (max-width:620px){
  .sol-grid, .problem-grid, .effect-grid{grid-template-columns:1fr;}
}

/* ==========================================================================
   17. LIST/FORM PAGES (projects / quote / news)
   ========================================================================== */
/* 필터 바 (디자인 전용 — 실제 필터 동작은 개발 단계 구현) */
.filter-bar{display:flex; flex-direction:column; gap:var(--sp-4); margin-bottom:var(--sp-6);}
.filter-group{display:flex; flex-wrap:wrap; gap:10px; align-items:center;}
.filter-label{font-family:var(--font-label); font-size:12px; letter-spacing:.1em; color:var(--gray-500); min-width:74px;}
.filter-pill{font-size:13.5px; font-weight:600; color:var(--gray-700); background:var(--gray-100); border:1px solid transparent; padding:8px 16px; border-radius:100px; cursor:pointer;}
.filter-pill:hover{border-color:var(--gray-300);}
.filter-pill.active{background:var(--brand-600); color:#fff;}
.filter-note{font-size:12px; color:var(--gray-300);}
.result-count{color:var(--gray-500); font-size:14px; margin-bottom:var(--sp-5);}
.result-count strong{color:var(--gray-900);}
.case-industry{align-self:flex-start; font-size:11px; font-weight:700; color:var(--gray-500); background:var(--gray-100); padding:3px 8px; border-radius:4px;}

/* 페이지네이션 (디자인 전용) */
.pagination{display:flex; justify-content:center; gap:6px; margin-top:var(--sp-7);}
.pagination a{min-width:38px; height:38px; padding:0 10px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--gray-200); border-radius:var(--radius-sm); font-size:14px; font-weight:600; color:var(--gray-700);}
.pagination a:hover{border-color:var(--gray-900);}
.pagination a.active{background:var(--brand-600); border-color:var(--brand-600); color:#fff;}

/* 견적 폼 */
.quote-layout{display:grid; grid-template-columns:.8fr 1.2fr; gap:var(--sp-8); align-items:start;}
.quote-aside .a-item{padding:var(--sp-5) 0; border-bottom:1px solid var(--gray-200);}
.quote-aside .a-item:first-child{padding-top:0;}
.quote-aside .a-num{font-family:var(--font-label); color:var(--brand-600); font-size:12px; letter-spacing:.1em;}
.quote-aside h4{font-size:16px; margin:6px 0; color:var(--gray-900);}
.quote-aside p{font-size:14px; color:var(--gray-500);}
.form-card{background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius); padding:var(--sp-7);}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5);}
.field{display:flex; flex-direction:column; gap:8px;}
.field.full{grid-column:1 / -1;}
.field label{font-size:13.5px; font-weight:700; color:var(--gray-900);}
.field label .req{color:var(--brand-600); margin-left:3px;}
.field input, .field select, .field textarea{font-family:inherit; font-size:14.5px; color:var(--gray-900); border:1px solid var(--gray-300); border-radius:var(--radius-sm); padding:12px 14px; background:#fff; width:100%;}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--brand-600); box-shadow:0 0 0 3px rgba(11,94,215,.12);}
.field textarea{resize:vertical; min-height:130px;}
.check-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.check{display:flex; align-items:center; gap:9px; font-size:14px; color:var(--gray-700); border:1px solid var(--gray-200); border-radius:var(--radius-sm); padding:11px 14px; cursor:pointer;}
.check input{width:16px; height:16px; accent-color:var(--brand-600);}
.consent{display:flex; align-items:flex-start; gap:10px; font-size:13px; color:var(--gray-500); margin-top:var(--sp-2);}
.consent input{margin-top:3px; accent-color:var(--brand-600);}
.form-actions{margin-top:var(--sp-5);}

/* 뉴스 게시판 */
.news-board{border-top:2px solid var(--gray-900);}
.news-row{display:grid; grid-template-columns:56px 1fr auto; gap:var(--sp-5); align-items:center; padding:var(--sp-5) var(--sp-2); border-bottom:1px solid var(--gray-200);}
.news-row:hover{background:var(--gray-50);}
/* 카테고리별 정사각형 썸네일 */
.nr-thumb{width:56px; height:56px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; font-size:24px; line-height:1; flex-shrink:0;}
.nr-thumb.t-press{background:var(--brand-600);}
.nr-thumb.t-biz{background:var(--navy-800);}
.nr-thumb.t-partner{background:var(--gray-500);}
.nr-thumb.t-award{background:#C79A2E;}

/* --- 뉴스 전용 미디어 썸네일 (news-image-spec 1-4) --------------------------
   .news-board 는 /news 와 /resources 가 공유한다. 자료실은 56×56 정사각 이모지를
   유지해야 하므로, 가로형 썸네일 규칙은 뉴스 목록 래퍼에만 붙는 .nb-media 스코프
   안에서만 선언한다. (resources.html 래퍼에는 nb-media 를 붙이지 않는다)
   이미지가 있는 행/이모지만 있는 행 모두 타일 박스를 96×54(16:9)로 통일해
   제목 시작선과 타일 좌우 변이 행마다 어긋나지 않게 한다 — 조건부 크기 분기 없음.
   54px 은 행의 텍스트 높이(≈63px)보다 작아 기존 행 높이를 늘리지 않는다. */
.news-board.nb-media .news-row{grid-template-columns:96px 1fr auto;}
.news-board.nb-media .nr-thumb{
  width:96px; height:auto; aspect-ratio:16/9;   /* height:auto 필수 — 기본 규칙의 height:56px 해제 */
  font-size:28px;                                /* 96×54 박스에 맞춰 이모지 확대 (기본 24px) */
  overflow:hidden;
}
.news-board.nb-media .nr-thumb img{
  width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit;
}

.news-row .nr-date{font-family:var(--font-label); font-size:12px; color:var(--gray-500); margin-bottom:4px;}
.news-row .nr-title{font-size:16px; font-weight:700; color:var(--gray-900);}
.news-row .nr-excerpt{font-size:13.5px; color:var(--gray-500); margin-top:4px;}
.news-row .nr-tag{font-size:11px; font-weight:700; padding:4px 10px; border-radius:100px; white-space:nowrap;}
/* 카테고리별 태그 색상: 보도자료=브랜드 파랑 / 사업소식=네이비 / 파트너십=그레이 / 수상·인증=골드 */
.news-row .nr-tag.t-press{background:var(--brand-100); color:var(--brand-700);}
.news-row .nr-tag.t-biz{background:#E3E9F5; color:#233252;}
.news-row .nr-tag.t-partner{background:var(--gray-100); color:var(--gray-700);}
.news-row .nr-tag.t-award{background:#FBF0D5; color:#8A6A12;}

@media (max-width:960px){
  .quote-layout{grid-template-columns:1fr;}
}
@media (max-width:620px){
  .form-grid, .check-grid{grid-template-columns:1fr;}
  .news-row{grid-template-columns:48px 1fr; gap:14px;}
  .news-row .nr-tag{grid-column:2 / -1; justify-self:start; margin-top:8px;}
  .nr-thumb{width:48px; height:48px; font-size:20px;}
  /* 뉴스 전용 스코프는 특성도가 높아 위 .nr-thumb 규칙을 이기므로 여기서 다시 지정한다 */
  .news-board.nb-media .news-row{grid-template-columns:76px 1fr;}
  .news-board.nb-media .nr-thumb{width:76px; height:auto; font-size:22px;}
}

/* ==========================================================================
   18. 우측 사이드 위젯 (즐겨찾기 + AI 상담) — 전 페이지 공통
   side-widget 프로토타입에서 이식. 색상 변수/제네릭 클래스를 .side-widget 스코프로
   한정해 기존 디자인 토큰(:root)·컴포넌트와 충돌하지 않도록 함.
   ========================================================================== */
.side-widget{
  --surface-deep:#121A24; --surface-mid:#1C2733; --surface-hover:#243342;
  --accent:var(--brand-600); --accent-line:#4FD1C5;
  --text-primary:#EDF1F5; --text-muted:#8FA1B3;
  --shadow:0 12px 32px rgba(0,0,0,.35);
  position:fixed; top:50%; right:0; transform:translateY(-50%);
  display:flex; align-items:stretch; z-index:9999;
}
.side-widget .panel{
  width:252px; background:var(--surface-deep);
  border:1px solid rgba(255,255,255,.07); border-right:none;
  border-radius:14px 0 0 14px; box-shadow:var(--shadow);
  padding:18px 14px 16px; display:flex; flex-direction:column; gap:4px;
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .32s cubic-bezier(.4,0,.2,1), opacity .24s ease, padding .32s ease;
}
.side-widget.open .panel{ max-height:420px; opacity:1; padding:18px 14px 16px; }
.side-widget .panel-label{ font-size:12px; color:var(--text-muted); padding:2px 10px 10px; font-weight:600; }
.side-widget .fav-link{
  display:flex; align-items:center; gap:10px; padding:10px 10px; border-radius:9px;
  color:var(--text-primary); text-decoration:none; font-size:14px; font-weight:500;
  border-left:2px solid transparent; transition:background .15s ease, border-color .15s ease;
}
.side-widget .fav-link:hover, .side-widget .fav-link:focus-visible{
  background:var(--surface-hover); border-left-color:var(--accent-line); outline:none;
}
.side-widget .fav-link svg{ flex:none; opacity:.85; }
.side-widget .divider{ height:1px; background:rgba(255,255,255,.08); margin:10px 2px 12px; }
.side-widget .chat-cta{
  display:flex; align-items:center; justify-content:center; gap:8px; padding:11px 12px;
  border-radius:9px; background:var(--accent); color:#fff; font-size:14px; font-weight:700;
  border:none; cursor:pointer; transition:filter .15s ease, transform .1s ease;
}
.side-widget .chat-cta:hover{ filter:brightness(1.06); }
.side-widget .chat-cta:active{ transform:scale(.98); }
.side-widget .chat-sub{ text-align:center; font-size:11.5px; color:var(--text-muted); margin-top:8px; line-height:1.5; }
.side-widget .tab{
  width:44px; background:var(--surface-deep); border:1px solid rgba(255,255,255,.07);
  border-radius:14px 0 0 14px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  padding:16px 0; cursor:pointer; color:var(--text-primary); position:relative;
}
.side-widget.open .tab{ border-left:1px solid rgba(255,255,255,.07); }
.side-widget .tab:hover{ background:var(--surface-hover); }
.side-widget .tab .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px rgba(11,94,215,.18); }
.side-widget .tab .label{ writing-mode:vertical-rl; text-orientation:mixed; font-size:12.5px; font-weight:600; letter-spacing:.02em; color:var(--text-muted); }
.side-widget .tab .chevron{ transition:transform .3s ease; color:var(--text-muted); }
.side-widget.open .tab .chevron{ transform:rotate(180deg); }
@media (prefers-reduced-motion: reduce){
  .side-widget .panel, .side-widget .tab .chevron{ transition:none; }
}
@media (max-width:480px){
  .side-widget .panel{ width:220px; }
}

/* ==========================================================================
   18b. 플로팅 챗봇 버튼 (2026-09 사이드바 단순화 / 2026-10-15 브랜드 파랑)
   "즐겨찾는 페이지" 패널 + 펼침/접힘 탭을 제거하고 AI 상담 버튼만 화면에 고정된
   캡슐형 플로팅 버튼으로 노출한다. 위 18번 섹션(.side-widget/.panel/.fav-link/.tab 등)은
   마크업 주석(각 페이지 HTML)과 함께 복원 가능하도록 그대로 남겨두었다 — 클래스명이
   겹치지 않으므로 아래 규칙과 충돌하지 않는다. 색상은 :root의 --accent(= brand-600) +
   흰 글자(5.84:1 AA). hover는 사이트 버튼 관례(.btn-primary:hover)와 같이 brand-700.
   (js/chat-panel.js의 전송 버튼·사용자 말풍선 인라인 스타일도 같은 brand-600 + 흰 글자다.)
   ========================================================================== */
.chat-fab-wrap{ position:fixed; right:24px; bottom:24px; z-index:9999; }
.chat-fab{
  display:flex; align-items:center; gap:8px; padding:14px 22px;
  border:none; border-radius:100px; cursor:pointer; font-family:inherit;
  background:var(--accent); color:#fff; font-size:14px; font-weight:700;
  box-shadow:0 10px 28px rgba(11,94,215,.35);
  transition:background-color .15s ease, transform .1s ease;
}
.chat-fab svg{ flex:none; }
.chat-fab:hover{ background:var(--brand-700); }
.chat-fab:active{ transform:scale(.97); }
.chat-fab:focus-visible{ outline:2px solid #fff; outline-offset:2px; box-shadow:0 0 0 4px rgba(11,94,215,.45); }
/* ≤480px(모바일): 라벨을 시각적으로만 숨기고(접근성 이름은 button aria-label + 숨긴 span 텍스트로 유지)
   아이콘만 있는 52px 원형으로 줄인다 — 홈 첫 화면에서 캡슐형 버튼이 히어로의 [우리의 접근 보기] 버튼을
   가리던 문제(2026-10-16 홈 2차). 데스크톱 모양은 그대로. 마크업(.chat-fab-label span)은 모든 페이지 공통. */
@media (max-width:480px){
  .chat-fab-wrap{ right:16px; bottom:16px; }
  .chat-fab{ width:52px; height:52px; padding:0; gap:0; justify-content:center; }
  .chat-fab svg{ width:24px; height:24px; }
  .chat-fab-label{
    position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
    overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  }
}

/* AI 상담 자체 패널(iframe) — 드래그 이동 / 코너 리사이즈 / 닫기(×) */
.dify-panel{
  position:fixed; right:24px; bottom:24px;
  width:400px; height:600px; max-width:96vw; max-height:88vh;
  display:none; flex-direction:column;
  background:#fff; border:1px solid rgba(0,0,0,.12); border-radius:14px;
  overflow:hidden; box-shadow:0 18px 50px rgba(0,0,0,.30); z-index:2147483000;
}
.dify-panel.open{ display:flex; }
.dify-panel__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; background:#121A24; color:#EDF1F5; cursor:move; user-select:none; flex:none;
}
.dify-panel__title{ font-size:14px; font-weight:700; }
.dify-panel__close{
  width:28px; height:28px; border:none; border-radius:8px; background:transparent;
  color:#EDF1F5; font-size:20px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.dify-panel__close:hover{ background:rgba(255,255,255,.14); }
.dify-panel__frame{ flex:1 1 auto; width:100%; border:0; display:block; }
/* 리사이즈 핸들: 좌측/상단 엣지 + 좌상단 코너 (우하단 고정 패널이라 좌·상으로 확장) */
.dify-panel__rz{ position:absolute; z-index:3; }
.dify-panel__rz--l{ left:0; top:0; bottom:0; width:7px; cursor:ew-resize; }
.dify-panel__rz--t{ left:0; right:0; top:0; height:7px; cursor:ns-resize; }
.dify-panel__rz--tl{
  left:0; top:0; width:16px; height:16px; cursor:nwse-resize; z-index:4;
  background:linear-gradient(135deg, rgba(255,255,255,.85) 0 42%, transparent 42%);
}
.dify-drag-guard{ position:fixed; inset:0; z-index:2147483002; display:none; }
.dify-drag-guard.on{ display:block; }
@media (max-width:520px){
  .dify-panel{ width:96vw; height:80vh; right:2vw; bottom:2vh; }
}

/* ==========================================================================
   20. 자료실 / FAQ (resources-faq-spec.md §1.3, §2.2)
   기존 토큰(:root)과 게시판·필터·버튼 컴포넌트를 그대로 재사용하고,
   두 페이지에만 필요한 요소(고정글 뱃지 / 첨부 표시 / 아코디언 / 검색창)만 추가한다.
   ========================================================================== */

/* ── 자료실 목록: .news-board/.news-row 재사용 + 링크화 ── */
.res-row{color:inherit;}
.res-row:hover .nr-title{color:var(--brand-600);}
.res-pin{
  display:inline-block; vertical-align:1px; margin-right:6px;
  font-family:var(--font-label); font-size:11px; font-weight:600; letter-spacing:.06em;
  background:var(--brand-600); color:#fff; padding:2px 7px; border-radius:100px;
}
.res-meta{display:flex; flex-wrap:wrap; gap:14px; margin-top:6px; font-size:12.5px; color:var(--gray-500);}
.res-meta .res-file{color:var(--gray-700); font-weight:600;}
.res-empty{
  text-align:center; color:var(--gray-500); font-size:14.5px;
  padding:var(--sp-8) var(--sp-4); border-bottom:1px solid var(--gray-200);
}
.pagination .page-gap{
  min-width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  color:var(--gray-300); font-size:14px;
}

/* ── 자료실 상세 ── */
.res-detail{max-width:860px; margin:0 auto;}
.res-detail-head{border-bottom:2px solid var(--gray-900); padding-bottom:var(--sp-5); margin-bottom:var(--sp-6);}
.res-detail-head .nr-tag{display:inline-block; font-size:11px; font-weight:700; padding:4px 10px; border-radius:100px;}
.res-detail-head h2{font-size:26px; color:var(--gray-900); margin:var(--sp-3) 0 var(--sp-3);}
/* 뉴스 상세의 한 줄 요약 — 제목 아래, 본문 위 리드 문장 */
.res-summary{margin-top:var(--sp-4); font-size:15px; line-height:1.7; color:var(--gray-500);}
.res-detail-body{
  font-size:15.5px; line-height:1.85; color:var(--gray-700);
  white-space:pre-wrap; min-height:120px;
  /* pre-wrap 은 줄바꿈을 입력 그대로 보존하는 대신, 공백 없는 긴 문자열(URL,
     이어붙인 영문 등)을 끊지 않아 좁은 화면에서 가로로 넘친다.
     anywhere 는 넘칠 때만 아무 데서나 끊으므로 일반 문장의 줄바꿈 모양은
     그대로다(break-all 과 달리 넘치지 않는 줄은 건드리지 않는다).
     뉴스 상세·자료실 상세가 공유하는 규칙이라 양쪽에 함께 적용된다. */
  overflow-wrap:anywhere;
}
.res-nocontent{color:var(--gray-300);}
.res-attach{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5); flex-wrap:wrap;
  margin-top:var(--sp-7); padding:var(--sp-5);
  background:var(--gray-50); border:1px solid var(--gray-200); border-radius:var(--radius);
}
.res-attach-info{display:flex; align-items:center; gap:var(--sp-4);}
.res-attach-ico{font-size:22px; line-height:1;}
.res-attach-name{font-size:15px; font-weight:700; color:var(--gray-900); word-break:break-all;}
.res-attach-note{font-size:12.5px; color:var(--gray-500); margin-top:2px;}
.res-detail-foot{margin-top:var(--sp-7); padding-top:var(--sp-5); border-top:1px solid var(--gray-200); display:flex; justify-content:center;}

/* 뉴스 본문 중간 이미지 — app.py render_news_body() 필터가 만드는 <figure>.
   .res-detail-body 는 자료실 상세와 함께 쓰는 클래스라, 이미지 규칙은 전부
   .news-figure 스코프 안에만 둔다(자료실 본문에는 figure 가 생기지 않는다).
   본문은 white-space:pre-wrap 이므로 figure 안에서만 normal 로 되돌린다. */
.res-detail-body .news-figure{white-space:normal; margin:28px 0; text-align:center;}
.news-figure img{max-width:100%; height:auto; border-radius:var(--radius-sm); display:block; margin:0 auto;}
.news-figure figcaption{margin-top:10px; font-size:13px; color:var(--gray-500); line-height:1.5;}
/* 본문 동영상(2026-10-30, [[동영상:파일|캡션]] — 솔루션·도입사례 본문). 모서리·여백은 위 본문 이미지와 같게, 배경 검정.
   width:100% + height:auto 라 좁은 화면에서도 가로로 넘치지 않는다. */
.body-video video{display:block; width:100%; max-width:100%; height:auto; margin:0 auto; border-radius:var(--radius-sm); background:#000;}

/* ── FAQ 검색창 ── */
.faq-search{position:relative; max-width:560px; margin-bottom:var(--sp-6);}
.faq-search-ico{position:absolute; left:16px; top:50%; transform:translateY(-50%); font-size:15px; opacity:.55;}
.faq-search input{
  width:100%; font-family:inherit; font-size:15px; color:var(--gray-900);
  border:1px solid var(--gray-300); border-radius:100px; padding:13px 20px 13px 44px; background:#fff;
}
.faq-search input:focus{outline:none; border-color:var(--brand-600); box-shadow:0 0 0 3px rgba(11,94,215,.12);}

/* ── FAQ 아코디언 ── */
.faq-group + .faq-group{margin-top:var(--sp-7);}
.faq-group-title{
  font-family:var(--font-label); font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--brand-600); margin-bottom:var(--sp-4);
}
.faq-list{border-top:2px solid var(--gray-900);}
.faq-item{border-bottom:1px solid var(--gray-200);}
.faq-q{
  display:flex; align-items:flex-start; gap:var(--sp-4);
  padding:var(--sp-5) var(--sp-2); cursor:pointer; list-style:none;
  font-size:16px; font-weight:700; color:var(--gray-900); line-height:1.5;
}
.faq-q::-webkit-details-marker{display:none;}
.faq-q:hover{background:var(--gray-50);}
.faq-q:hover .faq-q-text{color:var(--brand-600);}
.faq-q-mark, .faq-a-mark{
  flex-shrink:0; width:26px; height:26px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-label); font-size:13px; font-weight:700;
}
.faq-q-mark{background:var(--brand-600); color:#fff;}
.faq-a-mark{background:var(--gray-200); color:var(--gray-700);}
.faq-q-text{flex-grow:1;}
/* 펼침 표시(+ → ×) */
.faq-ico{flex-shrink:0; position:relative; width:14px; height:14px; margin-top:6px;}
.faq-ico::before, .faq-ico::after{
  content:""; position:absolute; left:0; top:6px; width:14px; height:2px;
  background:var(--gray-500); border-radius:2px; transition:transform .18s ease;
}
.faq-ico::after{transform:rotate(90deg);}
.faq-item[open] .faq-ico::before{background:var(--brand-600);}
.faq-item[open] .faq-ico::after{transform:rotate(0deg); background:var(--brand-600);}
.faq-a{
  display:flex; align-items:flex-start; gap:var(--sp-4);
  padding:0 var(--sp-2) var(--sp-5) var(--sp-2); background:var(--gray-50);
}
.faq-a-text{font-size:14.5px; line-height:1.8; color:var(--gray-700); white-space:pre-wrap;}
.faq-item[open] .faq-q{background:var(--gray-50);}
.faq-item[open] .faq-a{padding-top:var(--sp-2);}

/* ── FAQ 하단 CTA (챗봇 / 문의하기) ── */
.faq-help{
  margin-top:var(--sp-8); padding:var(--sp-7);
  background:var(--navy-950); color:var(--white); border-radius:var(--radius);
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-6); flex-wrap:wrap;
}
.faq-help h3{font-size:21px; margin-bottom:8px;}
.faq-help p{color:#B7BECD; font-size:14.5px;}
.faq-help-actions{display:flex; gap:var(--sp-4); flex-wrap:wrap;}
.faq-help .btn-outline{border-color:rgba(255,255,255,.35); color:var(--white);}
.faq-help .btn-outline:hover{border-color:#fff; background:rgba(255,255,255,.06);}

@media (max-width:620px){
  .res-attach{flex-direction:column; align-items:flex-start;}
  .faq-help{flex-direction:column; align-items:flex-start;}
  .res-detail-head h2{font-size:21px;}
}


/* ==========================================================================
   21. 증서 이미지 뷰어 (about #certifications)
   about-admin-spec.md §3-1 / §4
   - 두 부분: (a) 목록의 제목 버튼 .cert-link  (b) 중앙 모달 .cert-viewer
   - home.html의 영상 모달(.vmodal)과 "같은 패턴"이지만 선택자는 새로 만든다.
     .vmodal은 home.html 인라인 <style>에만 있어 about.html에서 못 쓴다.
   - 여기 선택자는 전부 .cert-link / .cert-viewer / .cv-* / .cv-locked 로,
     현재 코드베이스 어디에도 없는 이름이다 (기존 규칙 수정 0줄, 추가만).
   ========================================================================== */

/* ── (a) 목록 제목 버튼 — 이미지가 있는 항목만 ──────────────────────────
   "누를 수 있다"는 표시는 2중이다:
     정적(스캔용)  = 제목 뒤 작은 문서 아이콘 → 이미지 없는 항목과 한눈에 구분
     동작(확인용)  = hover/focus 시 브랜드 파랑 + 밑줄 (기존 .faq-q:hover .faq-q-text 관례와 동일 톤)
   아이콘은 "색"이 아니라 "형태"라서 WCAG 1.4.1(색만으로 구분 금지)을 지킨다. */
.cert-link{
  display:inline-block; max-width:100%;
  margin:0; padding:0; border:0; background:none;
  font:inherit; color:inherit; text-align:left;
  cursor:pointer; border-radius:3px;
  transition:color .15s ease;
}
.cert-link:hover{color:var(--brand-600);}
.cert-link:hover .cert-link-t,
.cert-link:focus-visible .cert-link-t{
  text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px;
}
.cert-link:focus-visible{outline:2px solid var(--brand-600); outline-offset:2px; color:var(--brand-600);}
/* 밑줄이 아이콘 아래까지 끌리지 않게 밑줄은 .cert-link-t 에만 건다 */
.cert-link-ico{
  display:inline-block; vertical-align:-2px; margin-left:5px;
  width:13px; height:13px; color:var(--brand-600);
}
.cert-link:hover .cert-link-ico,
.cert-link:focus-visible .cert-link-ico{color:var(--brand-700);}

/* 스크린리더 전용 텍스트 (이 프로젝트에 기존 유틸이 없어 뷰어 스코프로 새로 만든다) */
.cv-sr{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}

/* ── (b) 뷰어 모달 ─────────────────────────────────────────────────────
   z-index 10050 근거: 모바일 GNB(.site-header.menu-open 10002)·딤(10000)·
   챗봇 FAB(9999) 위, Dify 패널(2147483000) 아래. Dify보다 위로 올리지 않는 것은
   의도다 — 사용자가 챗봇을 열면 챗봇이 맨 위여야 한다. 10003~10049 를 비워 둬서
   헤더 z-index를 조금 올려도 뷰어를 덮지 않는다. */
.cert-viewer{position:fixed; inset:0; z-index:10050; display:none;}
.cert-viewer.is-open{display:block;}
.cv-backdrop{position:absolute; inset:0; background:rgba(11,18,32,.86); backdrop-filter:blur(3px);}
.cv-panel{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:flex; flex-direction:column;
  min-width:min(380px, calc(100vw - 32px));
  max-width:min(90vw, calc(100vw - 32px));
  max-height:calc(100vh - 32px);
  background:var(--navy-950); border:1px solid var(--navy-700);
  border-radius:14px; overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.55);
}
/* 캡션 + 닫기 = 상단 바. 캡션을 아래에 두면 ✕가 이미지 위에 떠야 하는데,
   스펙이 "우상단 ✕"를 요구하므로 바를 위에 둔다(.vmodal-bar 와 같은 구조). */
.cv-bar{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  padding:9px 9px 9px 18px; border-bottom:1px solid var(--navy-700); flex:none;
}
.cv-cap{min-width:0;}
.cv-cap-title{font-size:15px; font-weight:700; color:var(--white); line-height:1.35;}
.cv-cap-date{
  display:block; margin-top:2px;
  font-family:var(--font-label); font-size:11.5px; letter-spacing:.03em; color:#B7BECD;
}
/* 날짜 없는 항목 — author display:block 이 [hidden] UA 규칙을 이기므로 명시해야 한다 */
.cv-cap-date[hidden]{display:none;}
/* 44px 고정 — 모바일 전용 규칙을 따로 두지 않아도 스펙(≥44px)을 항상 만족한다 */
.cv-close{
  width:44px; height:44px; flex:none;
  display:grid; place-items:center; cursor:pointer;
  background:rgba(255,255,255,.07); border:1px solid var(--navy-700);
  border-radius:10px; color:#C8CEDB;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.cv-close:hover{background:var(--brand-600); border-color:var(--brand-600); color:#fff;}
.cv-close:focus-visible{outline:2px solid var(--brand-400); outline-offset:2px;}

.cv-stage{
  position:relative; flex:1 1 auto; min-height:180px;
  display:grid; place-items:center; background:#000;
}
/* 스펙 §4의 90vw / 80vh / contain.
   min(…, 100%) 을 함께 둔 이유: 짧은 뷰포트에서 패널이 max-height로 잘리면
   100%가 스테이지 실제 높이로 확정돼 이미지가 바에 눌리지 않는다. */
.cv-img{
  display:block; margin:0 auto;
  width:auto; height:auto;
  max-width:min(90vw, 100%);
  max-height:min(80vh, 100%);
  object-fit:contain;
}

/* 로딩 / 실패 — 클래스로만 전환한다 (.is-loading / .is-error on .cert-viewer) */
.cv-msg{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:none; width:100%; padding:0 var(--sp-5);
  text-align:center; font-size:13.5px; line-height:1.6; color:#B7BECD;
}
.cert-viewer.is-loading .cv-loading{display:block;}
.cert-viewer.is-error   .cv-error{display:block;}
.cert-viewer.is-loading .cv-img,
.cert-viewer.is-error   .cv-img{visibility:hidden;}
.cv-error strong{display:block; color:var(--white); font-weight:700; font-size:14.5px; margin-bottom:4px;}
.cv-spin{
  display:block; width:26px; height:26px; margin:0 auto 10px;
  border:2px solid rgba(255,255,255,.18); border-top-color:var(--brand-400);
  border-radius:50%; animation:cv-spin .8s linear infinite;
}
@keyframes cv-spin{to{transform:rotate(360deg);}}

/* 배경 스크롤 잠금 — 뷰어 전용 클래스.
   ⚠️ 모바일 GNB의 .gnb-locked 와 이름이 다르고, 미디어쿼리 "밖"에 있다
   (뷰어는 모든 폭에서 열리므로 961px가 돼도 저절로 풀려선 안 된다).
   둘은 별개 클래스라 한쪽을 지워도 다른 쪽 잠금이 유지된다. */
html.cv-locked, body.cv-locked{overflow:hidden;}

/* 모바일 — 620px 채택. 스펙(≤620px)과 같고, styles.css·home.html .vmodal이
   이미 쓰는 값이다. 960px은 GNB/레이아웃 브레이크포인트여서 여기서는 안 쓴다
   (700~960px 태블릿에서는 중앙 패널이 이미 충분히 넓다). 새 값은 만들지 않았다. */
@media (max-width:620px){
  .cv-panel{
    left:0; top:0; transform:none;
    width:100vw; min-width:0; max-width:100vw;
    height:100vh; height:100dvh; max-height:100dvh;
    border:0; border-radius:0;
  }
  .cv-bar{padding-left:14px;}
  .cv-cap-title{font-size:14px;}
  .cv-img{max-width:100%; max-height:100%;}
}

/* styles.css 관례: 모션은 기본으로 켜 두고 reduce에서 되돌린다
   (home.html의 no-preference 방식과 다름 — 이 파일 방식을 따랐다) */
@media (prefers-reduced-motion: reduce){
  .cert-link{transition:none;}
  .cv-close{transition:none;}
  .cv-spin{animation:none;}   /* 정지한 고리 + "불러오는 중" 문구로 충분히 읽힌다 */
}

/* ===== 솔루션 CUSTOM STEP 카드 — 링크 카드 호버 (홈 pillar-card에는 적용 안 됨) ===== */
.pillar-card--link{
  position:relative; overflow:hidden; color:inherit; text-decoration:none; cursor:pointer;
  transition:transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s, border-color .28s, background-color .28s;
}
.pillar-card--link::before{
  content:""; position:absolute; left:0; top:0; height:4px; width:100%;
  background:var(--brand-600); transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.pillar-card--link::after{
  content:attr(data-step); position:absolute; right:-6px; bottom:-28px;
  font-family:var(--font-label); font-size:120px; font-weight:700; line-height:1;
  color:var(--gray-900); opacity:.04; pointer-events:none; transition:opacity .28s, transform .35s;
}
.pillar-card--link h3, .pillar-card--link p, .pillar-card--link .pillar-num{transition:color .28s;}
.pillar-more{
  display:inline-flex; align-items:center; gap:6px; margin-top:auto;
  font-size:14px; font-weight:700; color:var(--brand-600); transition:color .28s;
}
.pillar-more .arrow{display:inline-block; transition:transform .28s cubic-bezier(.2,.7,.2,1);}
.pillar-card--link:hover, .pillar-card--link:focus-visible{
  transform:translateY(-8px);
  background:var(--navy-950); border-color:var(--navy-950);
  box-shadow:0 22px 44px rgba(11,18,32,.28), 0 6px 14px rgba(11,94,215,.18);
}
.pillar-card--link:hover::before, .pillar-card--link:focus-visible::before{transform:scaleX(1);}
.pillar-card--link:hover::after, .pillar-card--link:focus-visible::after{color:#fff; opacity:.07; transform:translateY(-8px);}
.pillar-card--link:hover h3, .pillar-card--link:focus-visible h3{color:#fff;}
.pillar-card--link:hover p, .pillar-card--link:focus-visible p{color:rgba(255,255,255,.75);}
.pillar-card--link:hover .pillar-num, .pillar-card--link:focus-visible .pillar-num,
.pillar-card--link:hover .pillar-more, .pillar-card--link:focus-visible .pillar-more{color:var(--brand-400);}
.pillar-card--link:hover .pillar-more .arrow, .pillar-card--link:focus-visible .pillar-more .arrow{transform:translateX(6px);}
.pillar-card--link:focus-visible{outline:3px solid var(--brand-400); outline-offset:3px;}
.pillar-card--link:active{transform:translateY(-4px);}
@media (prefers-reduced-motion: reduce){
  .pillar-card--link, .pillar-card--link::before, .pillar-card--link::after, .pillar-more .arrow{transition:none;}
  .pillar-card--link:hover, .pillar-card--link:focus-visible{transform:none;}
  .pillar-card--link:hover::after, .pillar-card--link:focus-visible::after{transform:none;}
}