@charset "utf-8";
/* ============================================================
   더웨일주식회사 — screen-ui.css
   통이미지 → 하드코딩 리빌드 공용 디자인 시스템 (gwangjin 공용구조 재활용)
   ------------------------------------------------------------
   규칙: 1rem=10px / Noto Sans / 폰트 4단계(3.6·2.4·1.8·1.5rem)
        / width 1200 / 반응형(~480px) / 공용 클래스
   목차
    00. 변수 / 리셋 / 타이포 기본
    01. 레이아웃 (container / section / 타이틀)
    02. 그리드 · 미디어 스플릿
    03. 카드 · 썸네일
    04. 스펙 표 (반응형 스크롤)
    05. 아이콘 피처 (원형 3종)
    06. 연혁 타임라인
    07. 인증서 갤러리
    08. 제품 내부 pill 서브탭
    09. 버튼
    10. 폼 (온라인문의)
    11. 게시판 (공지/자료실/실적)
    12. 오시는길 (지도/정보)
    13. 메인(index)
   ============================================================ */

/* ===== 00. 변수 / 리셋 / 타이포 ============================= */
:root{
  --container-xl:1200px;
  --point:#13426e;      /* 네이비 (메인 포인트) */
  --point-2:#1b6fb0;    /* 미드 블루 */
  --accent:#3fb8dd;     /* 시안 (강조) */
  --ink:#222222;
  --body:#444444;
  --muted:#7a7a7a;
  --faint:#a8a8a8;
  --line:#e4e4e4;
  --line-2:#eef0f2;
  --soft:#f4f7fa;
  --soft-2:#f7f8fa;
  --radius:8px;
  --shadow:0 6px 20px rgba(19,66,110,0.08);
  --shadow-hover:0 12px 30px rgba(19,66,110,0.16);
  --ease:cubic-bezier(0.22,1,0.36,1);
}
*,*::before,*::after{box-sizing:border-box;}
html{font-size:62.5%;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:"Noto Sans KR","Noto Sans",sans-serif;
  font-size:1.8rem; line-height:1.7; color:var(--body);
  font-weight:400; background:#fff; letter-spacing:-0.02em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; border:0; vertical-align:middle;}
a{color:inherit;}
h1,h2,h3,h4,h5,p,ul,ol,li,figure,table,dl,dd{margin:0; padding:0;}
ul,ol{list-style:none;}
table{border-collapse:collapse; width:100%;}

/* 폰트 4단계 유틸 */
.t-title{font-size:3.6rem; line-height:1.35; font-weight:700; color:var(--ink);}
.t-subtitle{font-size:2.4rem; line-height:1.45; font-weight:700; color:var(--ink);}
.t-body{font-size:1.8rem; line-height:1.85;}
.t-note{font-size:1.5rem; line-height:1.75; color:var(--muted);}

/* ===== 01. 레이아웃 ========================================= */
.sub-page{width:100%;}
.sub-inner{max-width:var(--container-xl); margin:0 auto; padding:0 20px;}
.sub-section{padding:0 0 20px;}
.sub-section + .sub-section{padding-top:70px;}

/* 섹션 타이틀 (좌측 액센트 바) */
.sec-head{margin-bottom:36px;}
.sec-title{
  position:relative; font-size:2.4rem; font-weight:700; color:var(--ink);
  padding-left:18px; line-height:1.35; margin:0 0 26px;
}
/* 콘텐츠 흐름 중 뒤따르는 섹션 타이틀은 위 여백으로 구분 (첫 타이틀 제외) */
* + .sec-title{margin-top:60px;}
.sec-head .sec-title{margin:0;}
.prod-head + .sec-title{margin-top:8px;}
.sec-title::before{
  content:""; position:absolute; left:0; top:2px; bottom:2px;
  width:6px; border-radius:3px; background:var(--point);
}
.sec-title .accent{color:var(--point);}
.sec-desc{margin-top:14px; font-size:1.8rem; line-height:1.9; color:var(--body);}
.sec-note{margin-top:10px; font-size:1.5rem; color:var(--muted);}
.center{text-align:center;}
.mt-s{margin-top:16px;} .mt-m{margin-top:34px;} .mt-l{margin-top:60px;}

/* 페이지 상단 리드 문구 */
.page-lead{
  text-align:center; font-size:2.4rem; font-weight:500; color:var(--ink);
  line-height:1.6; margin-bottom:16px;
}
.page-lead .accent{color:var(--point); font-weight:700;}
.page-sub{text-align:center; font-size:1.8rem; color:var(--muted); margin-bottom:50px;}

/* ===== 02. 그리드 · 미디어 스플릿 ========================== */
.grid{display:grid; gap:30px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}

/* 이미지 + 텍스트 2단 */
.media-split{display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center;}
.media-split.media-right{grid-template-columns:1fr 1fr;}
.media-split__img img{width:100%; border-radius:var(--radius); box-shadow:var(--shadow);}
.media-split__text h3{font-size:2.4rem; font-weight:700; color:var(--ink); margin-bottom:18px;}
.media-split__text p{font-size:1.8rem; line-height:1.9; color:var(--body);}

/* ===== 03. 카드 · 썸네일 ==================================== */
.photo-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; transition:box-shadow .25s var(--ease), transform .25s var(--ease);
}
.photo-card:hover{box-shadow:var(--shadow-hover); transform:translateY(-4px);}
.photo-card__media{background:var(--soft); overflow:hidden;}
.photo-card__media img{width:100%; display:block; aspect-ratio:4/3; object-fit:cover;}
.photo-card__body{padding:22px 24px;}
.photo-card__tit{font-size:2.0rem; font-weight:700; color:var(--ink); margin-bottom:10px;}
.photo-card__desc{font-size:1.6rem; line-height:1.7; color:var(--muted);}

/* 캡션 썸네일 (인증서/사진 라벨용) */
.thumb{text-align:center;}
.thumb img{width:100%; border:1px solid var(--line); border-radius:6px; background:#fff;}
.thumb figcaption{margin-top:12px; font-size:1.5rem; color:var(--body);}

/* ===== 04. 스펙 표 ========================================== */
.table-scroll{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 40px;}
.spec-table{min-width:640px; font-size:1.5rem;}
.spec-table caption{
  caption-side:top; text-align:left; font-size:1.8rem; font-weight:700;
  color:var(--ink); padding:0 0 14px;
}
.spec-table th,.spec-table td{
  border:1px solid var(--line); padding:12px 14px; text-align:center; line-height:1.5;
  color:var(--body); vertical-align:middle;
}
.spec-table thead th{background:var(--point); color:#fff; font-weight:700; border-color:rgba(255,255,255,0.38);}
.spec-table tbody th{background:var(--soft); color:var(--ink); font-weight:700;}
.spec-table tbody tr:nth-child(even) td{background:var(--soft-2);}
.spec-table td strong{color:var(--point);}
.spec-table .td-left{text-align:left;}
.table-guide{font-size:1.5rem; color:var(--muted); line-height:1.9; margin-top:10px;}

/* ===== 05. 아이콘 피처 (원형 3종) ========================== */
.feature-row{display:grid; grid-template-columns:repeat(3,1fr); gap:30px; text-align:center;}
.feature{display:flex; flex-direction:column; align-items:center;}
.feature__circle{
  width:150px; height:150px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:3px solid var(--accent); margin-bottom:18px;
  transition:transform .25s var(--ease);
}
.feature:nth-child(2) .feature__circle{border-color:var(--point-2);}
.feature:nth-child(3) .feature__circle{border-color:var(--point);}
.feature:hover .feature__circle{transform:translateY(-6px);}
.feature__circle svg{width:60px; height:60px;}
.feature__circle svg [stroke]{stroke:var(--point);}
.feature__label{font-size:1.5rem; color:var(--muted); margin-bottom:2px;}
.feature__en{font-size:2.4rem; font-weight:700; color:var(--point); letter-spacing:.02em;}

/* ===== 06. 연혁 타임라인 =================================== */
.timeline{position:relative; max-width:960px; margin:0 auto; padding:10px 0 30px;}
.timeline::before{content:""; position:absolute; left:50%; top:0; bottom:0; width:2px; background:var(--line); transform:translateX(-50%);}
.era-badge{
  position:relative; z-index:2; width:110px; height:110px; margin:30px auto; border-radius:50%;
  background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:2.4rem; font-weight:700; box-shadow:0 8px 20px rgba(63,184,221,.35);
}
.era-badge:first-child{margin-top:0;}
.tl-item{position:relative; width:50%; padding:14px 44px; min-height:56px;}
.tl-item::before{content:""; position:absolute; top:20px; width:14px; height:14px; border-radius:50%; background:#fff; border:2px solid var(--accent); z-index:2;}
.tl-item.left{left:0; text-align:right;}
.tl-item.right{left:50%; text-align:left;}
.tl-item.left::before{right:-7px;}
.tl-item.right::before{left:-7px;}
.tl-item.left::after,.tl-item.right::after{content:""; position:absolute; top:26px; width:34px; height:2px; background:var(--accent);}
.tl-item.left::after{right:0;}
.tl-item.right::after{left:0;}
.tl-date{font-size:1.8rem; font-weight:700; color:var(--muted); letter-spacing:.03em;}
.tl-item.right .tl-date{color:var(--point-2);}
.tl-desc{font-size:1.7rem; color:var(--body); line-height:1.55; margin-top:6px;}

/* ===== 07. 인증서 갤러리 =================================== */
.gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px 24px;}
.gallery-item{text-align:center;}
.gallery-item img{width:100%; border:1px solid var(--line); border-radius:6px; box-shadow:var(--shadow); background:#fff; transition:transform .2s var(--ease), box-shadow .2s var(--ease);}
.gallery-item:hover img{transform:translateY(-4px); box-shadow:var(--shadow-hover);}
.gallery-item figcaption{margin-top:14px; font-size:1.6rem; color:var(--body); line-height:1.5;}

/* 디자인/도면 타일 반응형 그리드 (제품 이미지 조각) */
.design-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin:0 0 44px; align-items:start;}
.design-grid figure{margin:0;}
.design-grid img{width:100%; border:1px solid var(--line); border-radius:6px; background:#fff; display:block;}
.design-grid figcaption{margin-top:12px; font-size:1.6rem; color:var(--body); text-align:center;}
.design-grid--2{grid-template-columns:repeat(2,1fr);}
.design-grid--4{grid-template-columns:repeat(4,1fr); gap:18px;}
.design-grid .code{margin-top:8px; font-size:1.5rem; font-weight:600; color:var(--point); text-align:center; letter-spacing:.02em;}
/* 디자인 하위 그룹 라벨 (CEILING standard/deluxe, COP/ETCHING 등) */
.subgroup-label{font-size:1.8rem; font-weight:700; color:var(--point-2); margin:30px 0 16px; padding-left:14px; position:relative;}
.subgroup-label::before{content:""; position:absolute; left:0; top:3px; bottom:3px; width:4px; border-radius:2px; background:var(--accent);}
.subgroup-label:first-of-type{margin-top:6px;}
/* 사진 갤러리: 고정 4:3 비율 + cover (임의 확대·왜곡 방지, 높이 통일) */
.design-grid--photo figure{border:1px solid var(--line); border-radius:6px; overflow:hidden; background:var(--soft);}
.design-grid--photo img{width:100%; aspect-ratio:4/3; object-fit:cover; border:0; border-radius:0; display:block;}
.design-grid--photo.design-grid--tall img{aspect-ratio:3/4;}
.design-grid--photo figcaption{margin-top:12px;}
.design-grid--photo figure > figcaption{margin:0; padding:10px 12px 12px; background:#fff; text-align:center;}

/* 동작 순서 스텝 플로우 (렌더+텍스트+SVG 화살표) */
.step-flow{display:flex; align-items:stretch; justify-content:center; flex-wrap:nowrap; max-width:1080px; margin:0 auto 44px;}
.step-flow__item{flex:1 1 0; max-width:300px; text-align:center; display:flex; flex-direction:column; align-items:center;}
.step-flow__fig{width:100%; background:var(--soft); border-radius:var(--radius); padding:10px;}
.step-flow__fig img{width:100%; display:block;}
.step-flow__num{margin-top:16px; font-size:1.5rem; font-weight:700; color:#fff; background:var(--point); padding:5px 20px; border-radius:16px;}
.step-flow__desc{margin-top:12px; font-size:1.7rem; line-height:1.65; color:var(--body);}
.step-flow__arrow{flex:0 0 auto; display:flex; align-items:center; padding:0 10px; color:var(--accent);}
.step-flow__arrow svg{width:26px; height:26px;}
@media (max-width:768px){
  .step-flow{flex-direction:column; align-items:center;}
  .step-flow__item{max-width:360px; width:100%;}
  .step-flow__arrow{transform:rotate(90deg); padding:14px 0;}
}

/* 강조 포인트 배지 (원형) — 제품 특징 요약 */
.point-badges{display:flex; flex-wrap:wrap; justify-content:center; gap:22px; margin:6px 0 36px;}
.point-badge{width:132px; height:132px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; text-align:center; font-size:1.6rem; font-weight:700; line-height:1.4; padding:10px; box-shadow:0 8px 18px rgba(63,184,221,.3);}
.point-badge:nth-child(2){background:var(--point-2);}
.point-badge:nth-child(3){background:var(--point-2);}
.point-badge:nth-child(4){background:var(--point);}
@media (max-width:480px){.point-badges{gap:14px;} .point-badge{width:108px; height:108px; font-size:1.5rem;}}

/* 카리프트 특징 소제목 */
.feature-lead{font-size:2.4rem; font-weight:700; color:var(--ink); line-height:1.4; margin-bottom:6px;}
.feature-lead span{display:block; font-size:1.8rem; font-weight:400; color:var(--muted); margin-top:6px;}
.feature-cert{font-size:2.0rem; font-weight:700; color:var(--point); margin:0 0 20px; padding-left:16px; position:relative;}
.feature-cert::before{content:""; position:absolute; left:0; top:4px; bottom:4px; width:5px; border-radius:3px; background:var(--point);}

/* 시공 완료 현장 등 이름 리스트 (다단 컬럼) */
.name-list{columns:3; column-gap:34px; max-width:1000px; margin:0 auto; list-style:none; padding:0;}
.name-list li{break-inside:avoid; padding:9px 0 9px 18px; position:relative; font-size:1.6rem; color:var(--body); border-bottom:1px solid var(--line-2);}
.name-list li::before{content:""; position:absolute; left:0; top:17px; width:6px; height:6px; border-radius:50%; background:var(--point);}
@media (max-width:768px){.name-list{columns:2; column-gap:18px;}}
@media (max-width:480px){.name-list{columns:1;}}

/* ===== 08. 제품 내부 pill 서브탭 =========================== */
.pill-nav{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:30px auto 50px;}
.pill{
  appearance:none; border:1px solid var(--line); background:var(--soft); cursor:pointer;
  min-width:150px; padding:0 22px; height:52px; line-height:50px; border-radius:26px;
  font-size:1.5rem; font-weight:500; color:var(--muted); font-family:inherit;
  transition:all .2s var(--ease); text-align:center;
}
.pill:hover{color:var(--point); border-color:var(--point);}
.pill.is-active{background:var(--point); border-color:var(--point); color:#fff; font-weight:700;}
/* 구축실적 탭 — 파트너사 로고(원본 code 47265 탭메뉴 참고) + 메인 탭 아이콘 */
.pill__logo{display:inline-block; height:20px; width:auto; max-width:52px; object-fit:contain; vertical-align:-5px; margin-right:8px; padding:2px 4px; background:#fff; border:1px solid var(--line); border-radius:4px; box-sizing:content-box;}
.pill.is-active .pill__logo{border-color:transparent;}
.pill__ico{display:inline-block; width:19px; height:19px; vertical-align:-3px; margin-right:7px;}
.pill__ico svg{display:block; width:100%; height:100%;}
/* 구축실적 탭 — 구조형 그리드: 메인 탭 풀폭 바 + 파트너 3열 카드 (가운데 래핑 들쭉날쭉 방지) */
.case-tabs .pill-nav{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.case-tabs .pill{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; min-width:0; height:auto; min-height:56px; padding:8px 18px; line-height:1.35;
  border-radius:var(--radius); text-align:center; white-space:normal;
}
.case-tabs .pill .pill__logo,.case-tabs .pill .pill__ico{margin-right:0; flex:0 0 auto;}
.case-tabs .pill--main{font-weight:700; color:var(--point); background:#fff; border-color:var(--point);}
.case-tabs .pill--main.is-active{background:var(--point); border-color:var(--point); color:#fff;}
.pill-panel{display:none;}
.pill-panel.is-active{display:block; animation:fadeUp .35s var(--ease);}
@keyframes fadeUp{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}

/* 구축 실적 3뎁스 탭 — 위 공통 섹션과 구분선 (heading 바로 위) */
/* .sec-title:has(+ .case-tabs){ margin-top:74px; padding-top:52px; border-top:1px solid var(--line); }
.sec-title:has(+ .case-tabs)::before{ top:54px; } */

/* 구축 실적 탭 — 모바일: 2열 그리드로 정돈 (가운데 들쭉날쭉 방지) */
@media (max-width:768px){
  .case-tabs .pill-nav{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 auto 30px; }
  .case-tabs .pill{ width:100%; min-width:0; height:auto; min-height:48px; line-height:1.35;
    padding:10px 12px; white-space:normal; display:flex; align-items:center; justify-content:center; font-size:1.4rem; }
  .sec-title:has(+ .case-tabs){ margin-top:52px; padding-top:38px; }
  .sec-title:has(+ .case-tabs)::before{ top:40px; }
}

/* 제품 상세 블록 */
.prod-head{text-align:center; margin-bottom:30px;}
.prod-head h2{font-size:2.4rem; font-weight:700; color:var(--ink);}
.prod-head h2 span{display:block; font-size:1.5rem; color:var(--muted); font-weight:400; margin-top:6px;}
.prod-figure{text-align:center; margin:0 auto 44px;}
.prod-figure img{width:100%; border-radius:var(--radius); box-shadow:var(--shadow);}
.prod-figure figcaption{margin-top:14px; font-size:1.6rem; color:var(--muted);}
.prod-desc{font-size:1.8rem; line-height:1.9; text-align:center; color:var(--body); margin-bottom:34px;}

/* 특징 리스트 (체크) */
.check-list{max-width:1000px; margin:0 auto 40px;}
.check-list li{position:relative; padding:12px 0 12px 34px; font-size:1.8rem; line-height:1.7; border-bottom:1px dashed var(--line);}
.check-list li::before{content:""; position:absolute; left:4px; top:20px; width:14px; height:8px; border-left:3px solid var(--point); border-bottom:3px solid var(--point); transform:rotate(-45deg);}
.dot-list{margin:0 0 34px;}
.dot-list li{position:relative; padding:9px 0 9px 20px; font-size:1.8rem; line-height:1.75; color:var(--body);}
.dot-list li::before{content:""; position:absolute; left:0; top:19px; width:6px; height:6px; border-radius:50%; background:var(--point);}
.check-list strong, .dot-list strong{color:var(--point); font-weight:700;}

/* ===== 09. 버튼 ============================================ */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:52px; padding:0 34px; border-radius:28px; font-size:1.6rem; font-weight:700; text-decoration:none; cursor:pointer; border:2px solid transparent; transition:all .2s var(--ease); font-family:inherit;}
.btn-primary{background:var(--point); color:#fff;}
.btn-primary:hover{background:#0f3358;}
.btn-line{background:transparent; border-color:var(--point); color:var(--point);}
.btn-line:hover{background:var(--point); color:#fff;}
.btn-ghost{background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.5);}
.btn-ghost:hover{background:#fff; color:var(--point);}

/* ===== 10. 폼 (온라인문의) ================================= */
.form-wrap{max-width:1000px; margin:0 auto;}
.form-note{font-size:1.5rem; color:var(--muted); margin-bottom:18px;}
.form-note .req{color:#d0433b; font-weight:700;}
.form-table{border-top:2px solid var(--point); font-size:1.6rem;}
.form-table th,.form-table td{border-bottom:1px solid var(--line); padding:16px 20px; text-align:left; vertical-align:middle;}
.form-table th{width:200px; background:var(--soft); color:var(--ink); font-weight:500;}
.form-table th .req{color:#d0433b; margin-left:3px;}
.form-table input[type=text],.form-table input[type=email],.form-table select,.form-table textarea{
  width:100%; max-width:480px; height:50px; padding:0 16px; border:1px solid var(--line); border-radius:6px;
  font-size:1.6rem; font-family:inherit; color:var(--ink); background:#fff;
}
.form-table textarea{height:150px; padding:12px 16px; max-width:100%; resize:vertical;}
.form-inline{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.form-inline input{max-width:160px;}
.agree-box{margin:30px 0; padding:26px 28px; background:var(--soft); border-radius:var(--radius); font-size:1.6rem; line-height:1.9;}
.agree-check{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:14px; font-size:1.6rem;}
.agree-check input{width:20px; height:20px;}
.form-submit{text-align:center; margin-top:30px;}

/* ===== 11. 게시판 ========================================== */
.board-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; font-size:1.5rem; color:var(--muted);}
.board-table{border-top:2px solid var(--point); font-size:1.6rem; table-layout:fixed; width:100%;}
.board-table thead th{background:var(--soft); color:var(--ink); font-weight:700; padding:16px 10px; border-bottom:1px solid var(--line); font-size:1.5rem;}
.board-table td{padding:16px 10px; border-bottom:1px solid var(--line); text-align:center; color:var(--body);}
.board-table td.subject{text-align:left;}
.board-table .w-no{width:12%;} .board-table .w-date{width:18%;} .board-table .w-hit{width:12%;} .board-table .w-file{width:12%;} .board-table .w-loc{width:24%;} .board-table .w-year{width:16%;}
.board-table td.subject a{text-decoration:none; color:var(--ink);}
.board-table td.subject a:hover{color:var(--point); text-decoration:underline;}
.board-empty{padding:80px 20px; text-align:center; color:var(--muted); font-size:1.8rem;}
.board-empty .ico{display:block; font-size:4.2rem; margin-bottom:12px; opacity:.5;}

/* ===== 공용 게시판 렌더러(board-render.php) ===== */
.blind{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); border:0;}
.sub-table-wrap{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 10px;}
.sub-table{width:100%; border-collapse:collapse;}
.board-table .col-num{width:10%;} .board-table .col-name{width:14%;} .board-table .col-date{width:16%;} .board-table .col-hit{width:10%;}
.board-table td.col-subject{text-align:left;}
.board-table td.col-subject a{display:block; max-width:100%; text-decoration:none; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.board-table td.col-subject a:hover{color:var(--point); text-decoration:underline;}
/* 고객센터 게시판 반응형 */
@media (max-width:600px){
  .board-table{font-size:1.5rem;}
  .board-table thead th{padding:13px 8px;}
  .board-table td{padding:14px 8px;}
  .board-table .col-name, .board-table .col-hit{display:none;}
  .board-table .col-num{width:16%;}
  .board-table .col-date{width:28%;}
  .board-view-title{font-size:2.0rem;}
  .board-view-content{font-size:1.6rem; padding:28px 4px; min-height:160px;}
  .board-view-meta{gap:6px 16px;}
}
.board-paging{margin-top:30px; text-align:center;}
.board-paging span{display:inline-block; min-width:38px; padding:8px 10px; margin:0 3px; border:1px solid var(--line); border-radius:6px; color:var(--muted); font-size:1.5rem;}
.board-paging .on{color:#fff; background:var(--point); border-color:var(--point); font-weight:700;}
.board-view{border-top:2px solid var(--point);}
.board-view-head{padding:24px 6px; border-bottom:1px solid var(--line);}
.board-view-title{font-size:2.4rem; font-weight:700; color:var(--ink); margin-bottom:12px; line-height:1.4;}
.board-view-meta{display:flex; flex-wrap:wrap; gap:20px; font-size:1.5rem; color:var(--muted);}
.board-view-content{padding:36px 6px; min-height:220px; font-size:1.8rem; line-height:1.8; color:var(--body); border-bottom:1px solid var(--line);}
.board-view-content img{max-width:100%; height:auto;}
.board-view-empty{color:var(--muted); text-align:center; padding:70px 0;}
.board-view-foot{margin-top:28px; text-align:center;}
.board-btn{display:inline-block; padding:12px 44px; background:var(--point); color:#fff; text-decoration:none; border-radius:6px; font-size:1.6rem; font-weight:700;}
.board-btn:hover{background:var(--point-2);}
.pager{display:flex; justify-content:center; gap:6px; margin-top:34px;}
.pager a,.pager span{min-width:40px; height:40px; line-height:38px; text-align:center; border:1px solid var(--line); border-radius:6px; font-size:1.5rem; color:var(--muted); text-decoration:none;}
.pager .is-current{background:var(--point); border-color:var(--point); color:#fff; font-weight:700;}

/* ===== 12. 오시는길 ======================================== */
.map-embed{width:100%; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--soft);}
.map-embed iframe{width:100%; height:440px; border:0; display:block;}
.map-info{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:24px; margin-top:36px;}
.map-info__item{background:var(--soft); border-radius:var(--radius); padding:28px 26px; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.map-info__ico{width:56px; height:56px; margin:0 auto 14px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow);}
.map-info__ico svg{width:28px; height:28px;}
.map-info__label{font-size:1.5rem; color:var(--muted); margin-bottom:6px;}
.map-info__value{font-size:1.8rem; font-weight:700; color:var(--ink); line-height:1.5;}

/* 회사개요 표 */
.overview-table{border-top:2px solid var(--point); font-size:1.6rem;}
.overview-table th,.overview-table td{border-bottom:1px solid var(--line); padding:16px 20px; text-align:left; vertical-align:middle;}
.overview-table th{width:150px; background:var(--soft); color:var(--ink); font-weight:700; text-align:center;}
.overview-table td{color:var(--body);}

/* 조직도 */
.org{max-width:960px; margin:0 auto; text-align:center;}
.org__top{display:inline-flex; flex-direction:column; align-items:center; gap:0;}
.org__ceo{width:120px; height:120px; border-radius:50%; background:var(--point); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.8rem; font-weight:700;}
.org__line{width:2px; height:34px; background:var(--line);}
.org__director{border:2px solid var(--point); color:var(--point); font-weight:700; font-size:1.8rem; padding:10px 34px; border-radius:6px; background:#fff;}
.org__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:40px;}
.org__dept{background:var(--soft); border-radius:var(--radius); padding:26px 20px; border-top:4px solid var(--accent);}
.org__dept:nth-child(2){border-top-color:var(--point-2);}
.org__dept:nth-child(3){border-top-color:var(--point-2);}
.org__dept:nth-child(4){border-top-color:var(--point);}
.org__dept h4{font-size:2.0rem; font-weight:700; color:var(--point); margin-bottom:14px;}
.org__dept li{font-size:1.6rem; color:var(--body); line-height:1.9;}

/* ===== 13. 메인(index) ===================================== */
.main-hero{position:relative; width:100%; height:640px; overflow:hidden; background:#0b1a30;}
.main-hero__slides{position:absolute; inset:0;}
.main-hero__slide{position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1.1s var(--ease);}
.main-hero__slide.is-active{opacity:1;}
.main-hero__slide.hs1{background-image:url(/resources/images/main/main_01.jpg);}
.main-hero__slide.hs2{background-image:url(/resources/images/main/main_02.jpg);}
.main-hero__slide.hs3{background-image:url(/resources/images/main/main_03.jpg);}
.main-hero__slide.hs4{background-image:url(/resources/images/main/main_04.jpg);}
.main-hero__inner{position:relative; z-index:3; max-width:var(--container-xl); margin:0 auto; height:100%; padding:0 20px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#fff;}
.main-hero__eyebrow{font-size:1.8rem; letter-spacing:.14em; color:rgba(255,255,255,.85); margin-bottom:20px; font-weight:400;}
.main-hero__tit{font-size:3.6rem; font-weight:700; line-height:1.45; text-shadow:0 2px 14px rgba(0,0,0,.4);}
.main-hero__dots{position:absolute; z-index:4; left:0; right:0; bottom:28px; display:flex; justify-content:center; gap:10px;}
.main-hero__dots button{width:12px; height:12px; border-radius:50%; border:2px solid #fff; background:transparent; cursor:pointer; padding:0;}
.main-hero__dots button.is-active{background:#fff;}
/* 히어로 좌우 화살표 */
.main-hero__arrow{position:absolute; z-index:5; top:50%; transform:translateY(-50%); width:58px; height:58px; border-radius:50%; background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.55); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s var(--ease);}
.main-hero__arrow:hover{background:rgba(255,255,255,0.32);}
.main-hero__arrow--prev{left:3%;}
.main-hero__arrow--next{right:3%;}
.main-hero__arrow svg{width:26px; height:26px;}

/* 제품소개 슬라이더 (원본 구조 재현) */
.prod-slider{position:relative; background:var(--soft);}
.prod-slider__track{position:relative; max-width:var(--container-xl); margin:0 auto; padding:0 20px;}
.prod-slide{display:none; align-items:center; gap:70px; min-height:530px; padding:50px 0; animation:fadeUp .4s var(--ease);}
.prod-slide.is-active{display:flex;}
.prod-slide__media{flex:0 0 400px; width:400px; background:#fff; box-shadow:var(--shadow); border-radius:var(--radius); overflow:hidden;}
.prod-slide__media img{width:100%; display:block; aspect-ratio:400/540; object-fit:cover;}
.prod-slide__body{flex:1;}
.prod-slide__body h4{font-size:1.8rem; color:var(--muted); font-weight:400; margin-bottom:10px;}
.prod-slide__body h3{font-size:3.6rem; color:var(--ink); font-weight:700; margin-bottom:22px; letter-spacing:-0.03em;}
.prod-slide__body p{font-size:1.8rem; color:var(--body); line-height:1.9;}
.prod-slide__body .btn{margin-top:34px;}
.prod-slider__arrow{position:absolute; z-index:4; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%; background:#fff; box-shadow:var(--shadow); border:1px solid var(--line); color:var(--point); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s var(--ease);}
.prod-slider__arrow:hover{background:var(--point); color:#fff; border-color:var(--point);}
.prod-slider__arrow svg{width:24px; height:24px;}
.prod-slider__arrow--prev{left:3%;}
.prod-slider__arrow--next{right:3%;}
.prod-slider__tabs{display:flex; justify-content:center; gap:0; max-width:var(--container-xl); margin:0 auto; background:#fff; border-top:1px solid var(--line);}
.prod-slider__tab{flex:1; max-width:220px; height:60px; border:none; border-bottom:3px solid transparent; background:none; font-family:inherit; font-size:1.6rem; color:var(--muted); cursor:pointer; transition:all .15s;}
.prod-slider__tab:hover{color:var(--point);}
.prod-slider__tab.is-active{color:var(--point); font-weight:700; border-bottom-color:var(--accent);}
@media (max-width:960px){
  .prod-slide{flex-direction:column; gap:30px; min-height:0; text-align:center;}
  .prod-slide__media{flex:0 0 auto; width:320px; max-width:80%;}
  .prod-slide__body h3{font-size:2.8rem;}
  .prod-slider__arrow{width:44px; height:44px;}
  .prod-slider__arrow--prev{left:6px;} .prod-slider__arrow--next{right:6px;}
}
@media (max-width:480px){
  .prod-slider__tab{font-size:1.5rem; height:52px;}
  .main-hero__arrow{width:44px; height:44px;}
  .main-hero__arrow--prev{left:8px;} .main-hero__arrow--next{right:8px;}
}

.main-section{padding:90px 0;}
.main-section .sub-inner{padding:0 20px;}
.main-section--soft{background:var(--soft);}
.main-sec-head{text-align:center; margin-bottom:50px;}
.main-sec-head h2{font-size:3.6rem; font-weight:700; color:var(--ink);}
.main-sec-head h2 span{color:var(--point);}
.main-sec-head p{margin-top:14px; font-size:1.8rem; color:var(--muted);}

/* 메인 인트로 카피 */
.main-intro{text-align:center;}
.main-intro__copy{font-size:3.4rem; font-weight:500; line-height:1.55; color:var(--ink); letter-spacing:-.01em;}
.main-intro__copy b{color:var(--point); font-weight:700;}

/* 메인 제품 3분류 카드 */
.main-prod{display:grid; grid-template-columns:repeat(3,1fr); gap:30px;}
.main-prod__item{position:relative; border-radius:var(--radius); overflow:hidden; background:#000; box-shadow:var(--shadow);}
.main-prod__item img{width:100%; aspect-ratio:4/3.2; object-fit:cover; opacity:.82; transition:transform .4s var(--ease), opacity .3s;}
.main-prod__item:hover img{transform:scale(1.06); opacity:.7;}
.main-prod__cap{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#fff; background:linear-gradient(180deg,rgba(9,23,46,.15),rgba(9,23,46,.6));}
.main-prod__cap h3{font-size:2.4rem; font-weight:700; text-shadow:0 2px 10px rgba(0,0,0,.4);}
.main-prod__cap p{margin-top:8px; font-size:1.5rem; color:rgba(255,255,255,.9);}
.main-prod__cap .go{margin-top:16px; font-size:1.5rem; border:1px solid rgba(255,255,255,.7); border-radius:20px; padding:6px 18px;}
.main-prod__item a{position:absolute; inset:0; z-index:2;}

/* 메인 게시판 2단 */
.main-news{margin-top:70px;}
.main-boards{display:grid; grid-template-columns:1fr 1fr; gap:36px;}
.main-board__head{display:flex; justify-content:space-between; align-items:center; border-bottom:2px solid var(--point); padding-bottom:14px; margin-bottom:6px;}
.main-board__head h3{font-size:2.4rem; font-weight:700; color:var(--ink);}
.main-board__head a{font-size:1.5rem; color:var(--muted); text-decoration:none;}
.main-board__head a:hover{color:var(--point);}
.main-board__list li{display:flex; justify-content:space-between; gap:14px; padding:15px 4px; border-bottom:1px solid var(--line); font-size:1.6rem;}
.main-board__list a{text-decoration:none; color:var(--body); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.main-board__list a:hover{color:var(--point);}
.main-board__list .date{color:var(--faint); font-size:1.5rem; flex-shrink:0;}

/* 메인 CTA 배너 */
.main-cta{position:relative; background:linear-gradient(120deg,var(--point) 0%,var(--point-2) 100%); color:#fff; text-align:center; padding:70px 20px;}
.main-cta h2{font-size:3.6rem; font-weight:700; line-height:1.4;}
.main-cta p{margin-top:14px; font-size:1.8rem; color:rgba(255,255,255,.85);}
.main-cta .btn{margin-top:28px;}

/* ===== 14. 페이지 보정 ===================================== */
/* 연혁 연도별 타임라인 (더웨일) */
.year-tl{max-width:1000px; margin:0 auto;}
.year-tl__row{display:grid; grid-template-columns:120px 1fr; gap:28px; padding:20px 0; border-bottom:1px solid var(--line-2); position:relative;}
.year-tl__row:first-child{padding-top:0;}
.year-tl__year{font-size:2.4rem; font-weight:700; color:var(--point); line-height:1.2;}
.year-tl__list li{position:relative; padding:3px 0 3px 16px; font-size:1.6rem; color:var(--body); line-height:1.7;}
.year-tl__list li::before{content:""; position:absolute; left:0; top:15px; width:5px; height:5px; border-radius:50%; background:var(--accent);}
@media (max-width:480px){.year-tl__row{grid-template-columns:1fr; gap:6px;} .year-tl__year{font-size:2.0rem;}}

/* 메인 히어로/섹션카드 (더웨일) */
.whale-hero{position:relative; overflow:hidden; padding:210px 20px; background:var(--point);}
.whale-hero__slider{position:absolute; inset:0; z-index:0;}
.whale-hero__slide{position:absolute; inset:0; opacity:0; transition:opacity 1.4s ease;}
.whale-hero__slide.is-active{opacity:1;}
.whale-hero__slide img{width:100%; height:100%; object-fit:cover; display:block;}
/* 가운데 텍스트 영역만 살짝 어둡게 (중앙 스크림, 가장자리는 밝게 유지) */
.whale-hero::after{content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 62% 68% at 50% 50%, rgba(8,22,44,.7) 0%, rgba(8,22,44,.36) 58%, rgba(8,22,44,.08) 100%);}
.whale-hero__inner{position:relative; z-index:2;}
/* 히어로 슬라이더 컨트롤 — 좌우 버튼은 배너 양끝, 도트는 하단 중앙 */
.whale-hero__arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:70px; height:70px; border-radius:50%; border:2px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.08); color:#fff; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .2s var(--ease), color .2s var(--ease), border-color .2s;}
.whale-hero__arrow:hover{background:#fff; color:var(--point); border-color:#fff;}
.whale-hero__arrow svg{width:34px; height:34px;}
.whale-hero__arrow--prev{left:40px;}
.whale-hero__arrow--next{right:40px;}
.whale-hero__dots{position:absolute; left:0; right:0; bottom:34px; z-index:4; display:flex; align-items:center; justify-content:center; gap:10px;}
.whale-hero__dot{width:10px; height:10px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.45); cursor:pointer; transition:width .3s var(--ease), background .2s;}
.whale-hero__dot.is-active{width:30px; border-radius:5px; background:#fff;}
/* 메인 배너 전용 타이포 (예외적으로 크게 — 배너 존재감) */
.whale-hero .main-hero__eyebrow{color:rgba(255,255,255,.88); margin-bottom:22px; font-size:2rem; letter-spacing:.16em;}
.whale-hero h2{font-size:5rem; line-height:1.3;}
.whale-hero p{font-size:2rem; color:rgba(255,255,255,.9);}
.whale-hero .btn{height:60px; padding:0 44px; font-size:1.8rem; margin-top:36px;}
.section-card{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:32px 26px; text-decoration:none; transition:box-shadow .25s var(--ease), transform .25s var(--ease); border-top:4px solid var(--accent);}
.section-card:hover{box-shadow:var(--shadow-hover); transform:translateY(-5px);}
.section-card__en{font-size:1.5rem; color:var(--accent); font-weight:700; letter-spacing:.06em;}
.section-card__tit{font-size:2.4rem; font-weight:700; color:var(--ink); margin:8px 0 14px;}
.section-card__desc{font-size:1.6rem; color:var(--muted); line-height:1.7; flex:1 0 auto;}
.section-card__go{margin-top:20px; font-size:1.5rem; color:var(--point); font-weight:700; transition:letter-spacing .2s var(--ease);}
.section-card:hover .section-card__go{letter-spacing:.02em;}
/* 카드 픽토그램 */
.section-card__ico{width:60px; height:60px; border-radius:16px; background:var(--soft); color:var(--point);
  display:flex; align-items:center; justify-content:center; margin-bottom:22px;
  transition:background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);}
.section-card__ico svg{width:30px; height:30px;}
.section-card:hover .section-card__ico{background:var(--point); color:#fff; transform:translateY(-2px);}
.section-card--sm{padding:28px 24px;}
/* 사업활동 7 그리드 (구버전, 미사용) */
.biz-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}

/* 사업활동 — 넘버링 리스트형 */
.act-list{border-top:2px solid var(--point);}
.act-item{display:grid; grid-template-columns:96px 64px 1fr 34px; align-items:center; gap:30px;
  padding:26px 16px; border-bottom:1px solid var(--line); text-decoration:none;
  transition:background .2s var(--ease), padding .2s var(--ease);}
.act-item:hover{background:var(--soft); padding-left:26px;}
.act-num{font-size:3.4rem; font-weight:800; color:var(--line); letter-spacing:-.02em; transition:color .2s;}
.act-item:hover .act-num{color:var(--point);}
.act-ico{width:64px; height:64px; border-radius:50%; background:var(--soft); color:var(--point);
  display:flex; align-items:center; justify-content:center; transition:background .2s var(--ease), color .2s var(--ease);}
.act-item:hover .act-ico{background:var(--point); color:#fff;}
.act-ico svg{width:30px; height:30px;}
.act-body{display:flex; flex-direction:column;}
.act-en{font-size:1.4rem; font-weight:700; letter-spacing:.08em; color:var(--accent);}
.act-t{font-size:2.2rem; font-weight:700; color:var(--ink); margin:3px 0 5px;}
.act-d{font-size:1.6rem; color:var(--muted); line-height:1.6;}
.act-arrow{color:var(--faint); display:flex; transition:color .2s, transform .2s var(--ease);}
.act-arrow svg{width:26px; height:26px;}
.act-item:hover .act-arrow{color:var(--point); transform:translateX(4px);}

/* 기술현황 — 다크 컬럼형 */
.main-section--dark{background:linear-gradient(120deg,#0c2138 0%, var(--point) 100%); color:#fff;}
.main-section--dark .main-sec-head h2{color:#fff;}
.main-section--dark .main-sec-head h2 span{color:var(--accent);}
.main-section--dark .main-sec-head p{color:rgba(255,255,255,.68);}
.tech-cols{display:grid; grid-template-columns:repeat(3,1fr);}
.tech-col{position:relative; padding:22px 42px; color:#fff; text-decoration:none;
  border-left:1px solid rgba(255,255,255,.16); transition:background .25s var(--ease);}
.tech-col:first-child{border-left:0;}
.tech-col:hover{background:rgba(255,255,255,.05);}
.tech-col__num{display:block; font-size:6.4rem; font-weight:800; line-height:1; color:rgba(255,255,255,.8); letter-spacing:-.02em;}
.tech-col:hover .tech-col__num{color:rgba(255,255,255,.3);}
.tech-col__ico{display:inline-flex; margin:20px 0 6px; color:var(--accent);}
.tech-col__ico svg{width:38px; height:38px;}
.tech-col__en{display:block; font-size:1.4rem; font-weight:700; letter-spacing:.1em; color:var(--accent); margin-bottom:10px;}
.tech-col__tit{font-size:2.6rem; font-weight:700; margin-bottom:14px;}
.tech-col__desc{font-size:1.6rem; color:rgba(255,255,255,.72); line-height:1.75;}
.tech-col__go{display:inline-block; margin-top:24px; font-size:1.5rem; font-weight:700; color:#fff; opacity:.9; transition:color .2s;}
.tech-col:hover .tech-col__go{color:var(--accent);}

/* 인사말 서명 */
.greeting-sign{margin-top:34px; font-size:1.8rem; color:var(--muted);}
.greeting-sign b{font-size:2.4rem; color:var(--ink); margin-left:8px;}
/* 광진소개 섹션 간격 */
.company-page .sub-section + .sub-section{padding-top:80px;}
/* 유지관리 안내 문단 */
.mnt-block{margin-bottom:44px;}
.mnt-block:last-child{margin-bottom:0;}
.mnt-block .sec-title{margin-bottom:16px;}

/* 유지관리 절차 플로우차트 */
.flow{max-width:720px; margin:0 auto;}
.flow__step{display:flex; flex-direction:column; align-items:center;}
.flow__row{display:flex; flex-wrap:wrap; justify-content:center; gap:10px;}
.flow__chip{
  min-width:130px; text-align:center; padding:12px 20px; border-radius:6px;
  font-size:1.6rem; font-weight:700; color:#fff; background:var(--point);
}
.flow__chip.is-circle{border-radius:50%; width:110px; height:110px; display:flex; align-items:center; justify-content:center; min-width:0;}
.flow__chip.tone-line{background:#fff; color:var(--point); border:2px solid var(--point);}
.flow__chip.tone-accent{background:var(--accent);}
.flow__chip.tone-gray{background:#eef0f2; color:var(--muted);}
.flow__chip.tone-amber{background:#eb9b3e;}
.flow__arrow{width:2px; height:26px; background:var(--line); margin:8px 0; position:relative;}
.flow__arrow::after{content:""; position:absolute; left:50%; bottom:-2px; width:9px; height:9px; border-right:2px solid var(--faint); border-bottom:2px solid var(--faint); transform:translateX(-50%) rotate(45deg);}
.flow__label{font-size:1.5rem; color:var(--muted); margin-bottom:10px;}

/* ============================================================
   반응형
   ============================================================ */
@media (max-width:960px){
  body{font-size:1.7rem;}
  .sub-section + .sub-section{padding-top:54px;}
  .grid-3,.grid-4,.biz-grid{grid-template-columns:repeat(2,1fr);}
  .main-intro__copy{font-size:2.6rem;}
  .media-split{grid-template-columns:1fr; gap:26px;}
  .feature-row{gap:20px;}
  .feature__circle{width:120px; height:120px;}
  .feature__circle svg{width:48px; height:48px;}
  .gallery-grid{grid-template-columns:repeat(2,1fr); gap:20px;}
  .design-grid{grid-template-columns:repeat(2,1fr); gap:16px;}
  .design-grid--4{grid-template-columns:repeat(3,1fr);}
  .map-info{grid-template-columns:1.6fr 1fr 1fr; gap:14px;}
  .org__grid{grid-template-columns:repeat(2,1fr);}
  .main-section{padding:64px 0;}
  .main-sec-head h2,.main-cta h2,.main-hero__tit{font-size:2.8rem;}
  .whale-hero h2{font-size:3.8rem;}
  .whale-hero{padding:150px 20px;}
  .main-prod{grid-template-columns:1fr; gap:20px;}
  .main-boards{grid-template-columns:1fr; gap:30px;}
  .main-hero{height:520px;}
  .form-table th{width:130px; padding:14px 12px;}
  .act-item{grid-template-columns:70px 54px 1fr 26px; gap:20px; padding:22px 10px;}
  .act-num{font-size:2.8rem;}
  .act-ico{width:54px; height:54px;}
  .tech-cols{grid-template-columns:1fr;}
  .tech-col{border-left:0; border-top:1px solid rgba(255,255,255,.16); padding:34px 4px;}
  .tech-col:first-child{border-top:0; padding-top:6px;}
  .tech-col__num{font-size:5.2rem;}
}
@media (max-width:480px){
  body{font-size:1.6rem;}
  .sub-inner{padding:0 16px;}
  .grid-2,.grid-3,.grid-4,.biz-grid{grid-template-columns:1fr;}
  .page-lead,.main-intro__copy{font-size:2.0rem;}
  .whale-hero__arrow{width:40px; height:40px;}
  .whale-hero h2{font-size:2.8rem;}
  .whale-hero .main-hero__eyebrow,.whale-hero p{font-size:1.7rem;}
  .whale-hero{padding:120px 16px;}
  .whale-hero__arrow{width:48px; height:48px;}
  .whale-hero__arrow svg{width:24px; height:24px;}
  .whale-hero__arrow--prev{left:12px;}
  .whale-hero__arrow--next{right:12px;}
  .act-item{grid-template-columns:46px 1fr; gap:14px; padding:18px 4px;}
  .act-ico,.act-arrow{display:none;}
  .act-num{font-size:2.4rem;}
  .act-t{font-size:1.9rem;}
  .tech-col__num{font-size:4.6rem;}
  .tech-col__tit{font-size:2.2rem;}
  .sec-title,.media-split__text h3,.prod-head h2,.main-board__head h3{font-size:2.0rem;}
  .t-title{font-size:2.8rem;}
  /* 타임라인 → 한쪽 정렬 */
  .timeline::before{left:18px;}
  .era-badge{margin-left:18px; transform:translateX(-50%); width:90px; height:90px; font-size:2.0rem;}
  .tl-item{width:100%; left:0 !important; padding:10px 10px 10px 44px; text-align:left !important;}
  .tl-item.left::before,.tl-item.right::before{left:11px; right:auto;}
  .tl-item.left::after,.tl-item.right::after{left:25px; right:auto; width:18px;}
  .feature-row{grid-template-columns:1fr; gap:26px;}
  .gallery-grid{grid-template-columns:1fr 1fr;}
  .design-grid{grid-template-columns:1fr;}
  .design-grid--4{grid-template-columns:repeat(2,1fr);}
  .map-info{grid-template-columns:1fr;}
  .org__grid{grid-template-columns:1fr;}
  .main-hero{height:440px;}
  .form-table th,.form-table td{display:block; width:100%; text-align:left;}
  .form-table th{border-bottom:none;}
  .form-table input[type=text],.form-table input[type=email],.form-table select{max-width:100%;}
}

/* ===== 사업활동 : 시스템 카드 / 스펙 그리드 / 실적 카드 ===== */
.sys-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin:0 0 44px;}
.sys-card{display:flex; gap:18px; align-items:flex-start; padding:24px 26px; background:var(--soft); border:1px solid var(--line); border-radius:var(--radius); transition:box-shadow .2s ease, transform .2s ease;}
.sys-card:hover{box-shadow:var(--shadow); transform:translateY(-3px);}
.sys-card__ico{flex:0 0 58px; width:58px; height:58px; border-radius:50%; background:#fff; border:2px solid var(--accent); display:flex; align-items:center; justify-content:center;}
.sys-card__ico svg{width:30px; height:30px;}
.sys-card__ico svg [stroke]{stroke:var(--point);}
.sys-card__body{flex:1; min-width:0;}
.sys-card__tit{font-size:1.8rem; font-weight:700; color:var(--ink); margin-bottom:6px;}
.sys-card__desc{font-size:1.6rem; line-height:1.6; color:var(--muted);}

.spec-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin:0 0 26px;}
.spec-grid__item{background:#fff; padding:18px 22px;}
.spec-grid__k{font-size:1.5rem; font-weight:700; color:var(--point-2); margin-bottom:6px;}
.spec-grid__v{font-size:1.6rem; line-height:1.5; color:var(--ink);}

.case-card{border:1px solid var(--line); border-radius:var(--radius); padding:32px; margin:0 0 40px; background:#fff; box-shadow:var(--shadow);}
.case-card__head{border-bottom:2px solid var(--point); padding-bottom:14px; margin-bottom:26px; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;}
.case-card__tit{font-size:2.4rem; font-weight:700; color:var(--ink);}
.case-card__en{font-size:1.6rem; color:var(--muted);}
.case-card__photos{display:grid; gap:16px; margin-bottom:26px;}
.case-card__photos--2{grid-template-columns:repeat(2,1fr);}
.case-card__photos--3{grid-template-columns:repeat(3,1fr);}
.case-card__photos--4{grid-template-columns:repeat(2,1fr);}
.case-card__photos img{width:100%; height:100%; display:block; border-radius:6px; object-fit:cover;}
.case-card .check-list{max-width:none; margin:0;}
.case-card .check-list li:last-child{border-bottom:none;}

.check-list--grid{max-width:none; display:grid; grid-template-columns:1fr 1fr; gap:0 44px;}
@media (max-width:480px){ .check-list--grid{grid-template-columns:1fr;} }

.tech-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin:0 0 44px;}
.tech-grid img{width:100%; display:block; border:1px solid var(--line); border-radius:var(--radius); background:#fff;}

.cert-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin:0 0 20px;}
.cert-card{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff; box-shadow:var(--shadow);}
.cert-card__label{font-size:1.8rem; font-weight:700; color:#fff; background:var(--point); padding:13px 20px;}
/* 부제 — 발급기관·인증번호 (라벨 아래 작게) */
.cert-card__sub{display:block; margin-top:5px; font-size:1.35rem; font-weight:400; line-height:1.5; color:rgba(255,255,255,.82); word-break:keep-all;}
.cert-card__img{position:relative; flex:1; width:100%; padding:22px; display:flex; align-items:center; justify-content:center; background:var(--soft); border:0; font:inherit; cursor:zoom-in; overflow:hidden;}
.cert-card__img img{max-width:100%; height:auto; display:block; box-shadow:0 2px 10px rgba(0,0,0,.12); transition:transform .35s ease;}
.cert-card__img:hover img{transform:scale(1.03);}
/* 크게 보기 배지 — 호버 시 노출 */
.cert-card__zoom{
  position:absolute; left:50%; bottom:18px; transform:translate(-50%,8px);
  padding:8px 18px; border-radius:40px; background:rgba(17,24,39,.86); color:#fff;
  font-size:1.35rem; font-weight:600; letter-spacing:-.01em; white-space:nowrap;
  opacity:0; transition:opacity .25s ease, transform .25s ease; pointer-events:none;
}
.cert-card__img:hover .cert-card__zoom,
.cert-card__img:focus-visible .cert-card__zoom{opacity:1; transform:translate(-50%,0);}
.sec-title__count{
  display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:26px;
  margin-left:10px; padding:0 8px; border-radius:40px; background:var(--point); color:#fff;
  font-size:1.4rem; font-weight:700; vertical-align:3px;
}

/* 인증서 원본 확대 (라이트박스) */
.cert-lightbox{position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:40px 20px; background:rgba(10,16,28,.88);}
.cert-lightbox[hidden]{display:none;}
.cert-lightbox__inner{margin:0; max-width:min(860px,100%); max-height:100%; display:flex; flex-direction:column; align-items:center; gap:14px;}
.cert-lightbox__inner img{max-width:100%; max-height:calc(100vh - 150px); width:auto; height:auto; background:#fff; border-radius:6px; box-shadow:0 24px 60px rgba(0,0,0,.5);}
.cert-lightbox__inner figcaption{font-size:1.5rem; color:rgba(255,255,255,.86); text-align:center; word-break:keep-all;}
.cert-lightbox__close{
  position:absolute; top:20px; right:24px; width:48px; height:48px; border:0; border-radius:50%;
  background:rgba(255,255,255,.14); color:#fff; font-size:3rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .2s ease;
}
.cert-lightbox__close:hover{background:rgba(255,255,255,.26);}
@media (max-width:768px){
  .cert-lightbox{padding:60px 14px 20px;}
  .cert-lightbox__close{top:12px; right:12px; width:42px; height:42px; font-size:2.6rem;}
}

.client-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:0 0 20px;}
.client-card{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; height:196px; padding:16px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); font-size:1.7rem; font-weight:700; color:var(--point); line-height:1.4; transition:box-shadow .2s ease, transform .2s ease;}
.client-card:hover{box-shadow:var(--shadow); transform:translateY(-3px); border-color:var(--accent);}
.client-card__logo{display:flex; align-items:center; justify-content:center; height:84px; margin-bottom:12px; flex:0 0 auto;}
.client-card__logo img{max-height:84px; max-width:160px; width:auto; height:auto;}
.client-card small{display:block; font-size:1.3rem; font-weight:400; color:var(--muted); margin-top:4px;}

@media (max-width:768px){
  .spec-grid{grid-template-columns:repeat(2,1fr);}
  .client-grid{grid-template-columns:repeat(2,1fr);}
  .cert-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:480px){
  .tech-grid{grid-template-columns:1fr;}
  .cert-grid{grid-template-columns:1fr;}
}
@media (max-width:480px){
  .sys-grid{grid-template-columns:1fr; gap:14px;}
  .sys-card{padding:18px 20px;}
  .spec-grid{grid-template-columns:1fr;}
  .case-card{padding:20px;}
  .case-card__photos--2,.case-card__photos--3,.case-card__photos--4{grid-template-columns:1fr;}
  .case-card__tit{font-size:2.0rem;}
}