@charset "utf-8";
/* ============================================================
   대한중공업 오션텍 DAEHAN HEAVY INDUSTRIES OCEANTECH — 공통 스타일시트
   디자인 토큰 근거 : _스펙_pd1_hd현대.md
   (hd.com/kr/main 실측 2026-08-09 · common.css 105,453B + main.css 43,112B 전수 스캔)

   주조색 #003087 (선언 9회 · 최다 브랜드컬러) / 딥네이비 #002554
   radius 버튼 4px(최다 14회) · 카드 12px · 큰카드 24px · pill 100px
   컨테이너 1440px (원본 calc(100% - 480rem) = 75vw)
   폰트 Pretendard 500 / 700 / 800 (원본은 패밀리명으로 웨이트 분리)
   브레이크포인트 1024px(37회) / 600px(9회)
   ============================================================ */

:root{
  --brand:#003087;          /* 원본 주조색 — 흰 배경 대비 11.8:1 */
  --brand-h:#00246A;        /* hover */
  --navy:#002554;           /* 원본 딥네이비 */
  --green:#008233;          /* 원본 서브 포인트 — 흰 배경 대비 4.95:1 */
  --green-lt:#00AD1D;       /* 다크 배경 위에서만 */

  --ink:#1A1A1A;            /* 원본 본문 최짙은 텍스트 */
  --text:#25282C;
  --muted:#63666A;          /* 원본 캡션 — 흰 배경 5.8:1 */
  --muted-2:#707070;        /* 원본 보조 텍스트 최다 선언 — 흰 배경 4.9:1 */

  --line:#E4E4E4;           /* 원본 구분선 최다 */
  --line-2:#EFEFEF;
  --line-3:#D9D9D9;
  --bg:#FFFFFF;
  --bg-2:#F4F4F4;           /* 원본 보조 배경 */
  --bg-3:#F8FAFB;           /* 원본 옅은 블루그레이 */
  --bg-4:#F1F4F8;
  --dark:#031820;           /* 원본 다크 섹션 */
  --dark-2:#02121A;
  --dark-3:#0B2733;
  --danger:#C4162C;

  --wrap:1440px;            /* 원본 .inner = 75vw @1920 → 1440 */
  --wrap-hd:1660px;         /* 원본 헤더 .inner */
  --wrap-text:920px;

  --r-btn:4px;              /* 원본 최다 radius */
  --r-card:12px;            /* 원본 카드·이미지 블록 */
  --r-lg:24px;              /* 원본 큰 카드·모달 */
  --r-pill:100px;
  --r-sm:2px;

  --pad-sec:120px;          /* 원본 섹션 상하 */
  --pad-sec-lg:150px;
  --header-h:84px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,
    "Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic","맑은 고딕",Roboto,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.75; letter-spacing:-0.02em;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--brand); outline-offset:2px;
}
h1,h2,h3,h4,h5{margin:0; color:var(--ink); letter-spacing:-0.035em; line-height:1.24}
h1,h2{font-weight:800}
h3,h4,h5{font-weight:700}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
table{border-collapse:collapse; width:100%}
strong,b{font-weight:700; color:var(--ink)}

.wrap{width:75vw; max-width:var(--wrap); margin:0 auto}
.skip{position:absolute; left:-9999px; top:0; z-index:999; background:var(--brand); color:#fff;
  padding:12px 22px; font-weight:700; border-radius:0 0 var(--r-btn) 0}
.skip:focus{left:0; top:0}

/* ---------- 헤더 ---------- */
.hd{position:sticky; top:0; z-index:300; background:#fff; border-bottom:1px solid var(--line)}
.hd-in{display:flex; align-items:center; gap:36px; height:var(--header-h);
       width:86.5vw; max-width:var(--wrap-hd); margin:0 auto; min-width:0}
.logo{display:flex; align-items:center; gap:12px; flex:0 1 auto; min-width:0; color:var(--brand)}
.logo > span{min-width:0}
.logo .mark{width:32px; height:32px; flex:0 0 auto}
.logo .nm{display:block; font-size:19px; font-weight:800; letter-spacing:-0.05em; line-height:1.15;
  color:var(--navy); white-space:nowrap}
.logo .en{display:block; font-size:9.5px; font-weight:700; letter-spacing:.17em; color:var(--muted);
  line-height:1.5; white-space:nowrap; overflow:hidden; text-overflow:clip}
.gnb{display:flex; flex:1 1 auto; justify-content:center; gap:4px}
.gnb > li{position:relative}
.gnb > li > a{display:block; padding:0 20px; line-height:var(--header-h);
  font-size:16px; font-weight:700; color:var(--muted-2); white-space:nowrap; position:relative;
  transition:color .25s var(--ease)}
.gnb > li:hover > a,.gnb > li:focus-within > a,.gnb > li.on > a{color:var(--brand)}
.gnb > li > a::after{content:""; position:absolute; left:20px; right:20px; bottom:-1px; height:3px;
  background:var(--brand); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease)}
.gnb > li:hover > a::after,.gnb > li:focus-within > a::after,.gnb > li.on > a::after{transform:scaleX(1)}
.gnb .sub{position:absolute; left:50%; transform:translateX(-50%) translateY(8px); top:100%; min-width:214px;
  background:#fff; border:1px solid var(--line); border-top:2px solid var(--brand); border-radius:0 0 var(--r-card) var(--r-card);
  padding:14px 0; opacity:0; visibility:hidden; box-shadow:0 18px 42px rgba(0,37,84,.13);
  transition:opacity .24s var(--ease), transform .24s var(--ease)}
.gnb > li:hover .sub,.gnb > li:focus-within .sub{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}
.gnb .sub a{display:block; padding:9px 24px; font-size:15px; font-weight:500; color:var(--text); white-space:nowrap}
.gnb .sub a:hover{color:var(--brand); background:var(--bg-3)}
.hd-util{display:flex; align-items:center; gap:10px; flex:0 0 auto}
.lang{display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--muted); font-weight:500}
.lang .on{color:var(--brand); font-weight:700}
.btn-mini{display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 18px;
  border-radius:var(--r-btn); border:1px solid var(--line-3); background:#fff; color:var(--ink);
  font-size:13px; font-weight:700; letter-spacing:-0.02em; transition:all .25s var(--ease)}
.btn-mini:hover{border-color:var(--brand); color:var(--brand)}
.btn-mini.pri{background:var(--brand); border-color:var(--brand); color:#fff}
.btn-mini.pri:hover{background:var(--brand-h); border-color:var(--brand-h); color:#fff}
.nav-toggle{display:none; width:42px; height:42px; border:1px solid var(--line-3); border-radius:var(--r-btn);
  background:#fff; align-items:center; justify-content:center; cursor:pointer; color:var(--navy)}

.drawer{display:none; border-top:1px solid var(--line); background:var(--bg-3); padding:24px 0 44px}
.drawer.open{display:block}
.drawer-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:2px 30px;
  width:86.5vw; max-width:var(--wrap-hd); margin:0 auto}
.drawer h3{font-size:12px; color:var(--brand); letter-spacing:.11em; margin:22px 0 8px; font-weight:800}
.drawer a{display:block; padding:6px 0; font-size:14.5px; font-weight:500; color:var(--text)}
.drawer a:hover{color:var(--brand)}

/* ---------- 히어로 ---------- */
.hero{position:relative; background:var(--navy); color:#fff; overflow:hidden}
.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.46}
.hero::after{content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,rgba(0,37,84,.94) 0%,rgba(0,37,84,.78) 44%,rgba(3,24,32,.55) 100%)}
.hero-in{position:relative; z-index:2; width:75vw; max-width:var(--wrap); margin:0 auto; padding:120px 0 112px}
.hero h1{color:#fff; font-size:clamp(32px,4.6vw,66px); font-weight:800; line-height:1.18; letter-spacing:-0.04em}
.hero .lead{margin-top:26px; max-width:var(--wrap-text); font-size:clamp(16px,1.25vw,20px);
  line-height:1.78; color:rgba(255,255,255,.88); font-weight:500}
.crumb{display:flex; flex-wrap:wrap; gap:8px; font-size:13px; color:rgba(255,255,255,.8); margin-bottom:24px; font-weight:500}
.crumb li+li::before{content:"›"; margin-right:8px; opacity:.7}
.hero.plain{background:var(--bg-3); color:var(--ink)}
.hero.plain::after{display:none}
.hero.plain h1{color:var(--navy)}
.hero.plain .lead{color:var(--text)}
.hero.plain .crumb{color:var(--muted)}

.hero-home .hero-in{padding:186px 0 168px}
.hero-home h1{font-size:clamp(34px,5.4vw,84px); line-height:1.12}
.hero-home .kicker{display:inline-block; padding:9px 22px; border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.46); color:#fff; font-size:13px; font-weight:700;
  letter-spacing:.1em; margin-bottom:30px}
.hero-btns{margin-top:44px; display:flex; gap:12px; flex-wrap:wrap}

/* ---------- 섹션 ---------- */
.sec{padding:var(--pad-sec) 0}
.sec.alt{background:var(--bg-3)}
.sec.gray{background:var(--bg-2)}
.sec.dark{background:var(--dark); color:rgba(255,255,255,.86)}
.sec.dark h2,.sec.dark h3,.sec.dark h4{color:#fff}
.sec.navy{background:var(--navy); color:rgba(255,255,255,.86)}
.sec.navy h2,.sec.navy h3,.sec.navy h4{color:#fff}
.sec-head{margin-bottom:58px; max-width:var(--wrap-text)}
.sec-head h2{font-size:clamp(26px,3.1vw,48px); font-weight:800; line-height:1.22}
.sec-head .sub{margin-top:20px; font-size:clamp(15px,1.15vw,19px); color:var(--muted); line-height:1.82; font-weight:500}
.sec.dark .sec-head .sub,.sec.navy .sec-head .sub{color:rgba(255,255,255,.78)}
.eyebrow{display:block; font-size:12.5px; font-weight:800; letter-spacing:.14em; color:var(--brand); margin-bottom:15px}
.sec.dark .eyebrow,.sec.navy .eyebrow{color:#7FB2FF}
.prose p{margin:0 0 20px; font-size:16.5px; line-height:1.92; color:var(--text)}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--ink); font-weight:700}
.split-h3{font-size:clamp(21px,1.9vw,30px); font-weight:800; margin-bottom:22px; letter-spacing:-0.035em}

/* 다크·네이비 섹션 안 텍스트 — WCAG AA 이상 */
.sec.dark .prose p,.sec.dark .blist li,.sec.dark .tl-item li,.sec.dark .step p,
.sec.dark .faq .a,.sec.dark .form-note,.sec.navy .prose p,.sec.navy .blist li,
.sec.navy .tl-item li,.sec.navy .step p,.sec.navy .faq .a{color:rgba(255,255,255,.86)}
.sec.dark .prose strong,.sec.dark .quote,.sec.dark .faq summary,
.sec.navy .prose strong,.sec.navy .quote,.sec.navy .faq summary{color:#fff}
.sec.dark .split-h3,.sec.navy .split-h3{color:#fff}
.sec.dark .quote,.sec.navy .quote{border-left-color:#7FB2FF}
.sec.dark .tl-item .y,.sec.navy .tl-item .y{color:#7FB2FF}
.sec.dark .blist li,.sec.navy .blist li{border-bottom-color:rgba(255,255,255,.17)}
.sec.dark .blist li::before,.sec.navy .blist li::before{background:#7FB2FF}
.sec.dark .blist li b,.sec.navy .blist li b{color:#fff}
.sec.dark .step,.sec.navy .step{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16)}
.sec.dark .steps,.sec.navy .steps{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.16)}
.sec.dark .step::before,.sec.navy .step::before{color:#7FB2FF}
.sec.dark .badge,.sec.navy .badge{background:transparent; border-color:rgba(255,255,255,.38); color:rgba(255,255,255,.94)}
.sec.dark .tbl-scroll,.sec.navy .tbl-scroll{border-color:rgba(255,255,255,.24)}
.sec.dark .tbl,.sec.navy .tbl{background:rgba(255,255,255,.04)}
.sec.dark .tbl caption,.sec.navy .tbl caption{background:rgba(255,255,255,.08); color:rgba(255,255,255,.84);
  border-bottom-color:rgba(255,255,255,.24)}
.sec.dark .tbl thead th,.sec.navy .tbl thead th{background:#7FB2FF; color:var(--navy)}
.sec.dark .tbl th,.sec.dark .tbl td,.sec.navy .tbl th,.sec.navy .tbl td{
  color:rgba(255,255,255,.88); border-bottom-color:rgba(255,255,255,.15)}
.sec.dark .tbl tbody th,.sec.navy .tbl tbody th{color:#fff; background:rgba(255,255,255,.08)}
.sec.dark .posts,.sec.navy .posts{border-top-color:rgba(255,255,255,.62)}
.sec.dark .post,.sec.navy .post{border-bottom-color:rgba(255,255,255,.15)}
.sec.dark .post .cat,.sec.navy .post .cat{background:rgba(255,255,255,.14); color:#fff}
.sec.dark .post p,.sec.navy .post p{color:rgba(255,255,255,.76)}
.sec.dark .post .d,.sec.navy .post .d{color:rgba(255,255,255,.72)}
.sec.dark .faq,.sec.navy .faq{border-top-color:rgba(255,255,255,.62)}
.sec.dark .faq details,.sec.navy .faq details{border-bottom-color:rgba(255,255,255,.17)}
.sec.dark .faq summary .q,.sec.dark .faq summary::after,
.sec.navy .faq summary .q,.sec.navy .faq summary::after{color:#7FB2FF; border-color:#7FB2FF}
.sec.dark .figure figcaption,.sec.navy .figure figcaption{color:rgba(255,255,255,.76)}
.sec.dark .tl::before,.sec.navy .tl::before{background:rgba(255,255,255,.24)}
.sec.dark .tl-item::before,.sec.navy .tl-item::before{background:#7FB2FF; border-color:var(--dark)}
.sec.navy .tl-item::before{border-color:var(--navy)}
.sec.dark .sign,.sec.navy .sign{color:rgba(255,255,255,.82)}
.sec.dark .sign b,.sec.navy .sign b{color:#fff}
.sec.dark .cards,.sec.navy .cards{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.16)}
.sec.dark .card{background:var(--dark)}
.sec.navy .card{background:var(--navy)}
.sec.dark .card:hover,.sec.navy .card:hover{background:var(--dark-3)}
.sec.dark .card p,.sec.navy .card p{color:rgba(255,255,255,.76)}
.sec.dark .card .ico,.sec.navy .card .ico{color:#7FB2FF}
.sec.dark .card .tag,.sec.navy .card .tag{background:rgba(255,255,255,.14); color:#fff}
.sec.dark .icard,.sec.navy .icard{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.16)}
.sec.dark .icard p,.sec.navy .icard p{color:rgba(255,255,255,.76)}
.sec.dark .spec dt,.sec.navy .spec dt{color:#7FB2FF}
.sec.dark .spec dd,.sec.navy .spec dd{color:rgba(255,255,255,.88); border-bottom-color:rgba(255,255,255,.15)}
.sec.dark .stats,.sec.navy .stats{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.16)}
.sec.dark .stat{background:var(--dark)}
.sec.navy .stat{background:var(--navy)}
.sec.dark .stat .n,.sec.navy .stat .n{color:#fff}
.sec.dark .stat .n .u,.sec.navy .stat .n .u{color:#7FB2FF}
.sec.dark .stat .l,.sec.navy .stat .l{color:rgba(255,255,255,.76)}

/* ---------- 카드 ---------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.cards.c2{grid-template-columns:repeat(2,1fr)}
.cards.c4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--r-card); padding:40px 32px;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease)}
.card:hover{border-color:var(--brand); box-shadow:0 14px 34px rgba(0,48,135,.10); transform:translateY(-3px)}
.card .ico{width:38px; height:38px; margin-bottom:22px; color:var(--brand)}
.card h3{font-size:21px; font-weight:700; margin-bottom:12px}
.card p{font-size:15px; line-height:1.86; color:var(--muted)}
.card .tag{display:inline-block; margin-bottom:14px; padding:5px 13px; border-radius:var(--r-pill);
  background:var(--bg-4); font-size:12px; color:var(--brand); letter-spacing:.02em; font-weight:700}

.icards{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.icards.c2{grid-template-columns:repeat(2,1fr)}
.icards.c4{grid-template-columns:repeat(4,1fr)}
.icard{border-radius:var(--r-card); overflow:hidden; border:1px solid var(--line); background:#fff;
  transition:box-shadow .3s var(--ease), transform .3s var(--ease)}
.icard:hover{box-shadow:0 16px 38px rgba(0,48,135,.12); transform:translateY(-3px)}
.icard img{width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .8s var(--ease)}
.icard:hover img{transform:scale(1.05)}
.icard .bd{padding:26px 24px 32px}
.icard h3{font-size:19px; font-weight:700; margin-bottom:10px}
.icard p{font-size:14.5px; color:var(--muted); line-height:1.82}
.icard .tag{display:inline-block; margin-bottom:12px; padding:4px 12px; border-radius:var(--r-pill);
  background:var(--bg-4); font-size:11.5px; color:var(--brand); font-weight:700}

/* ---------- 지표 ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden}
.stat{padding:42px 30px; background:#fff}
.stat .n{display:block; font-size:clamp(32px,3.4vw,54px); font-weight:800; color:var(--navy);
  letter-spacing:-0.045em; line-height:1.08}
.stat .n .u{font-size:18px; margin-left:6px; color:var(--brand); font-weight:700; letter-spacing:-0.02em}
.stat .l{display:block; margin-top:13px; font-size:14.5px; color:var(--muted); font-weight:500}

/* ---------- 사양 정의목록 ---------- */
.spec{display:grid; grid-template-columns:repeat(2,1fr); gap:0 44px; margin:0}
.spec dt{font-size:11.5px; letter-spacing:.11em; color:var(--brand); font-weight:800; padding-top:18px}
.spec dd{margin:0; padding:4px 0 18px; font-size:16px; line-height:1.8; color:var(--text); border-bottom:1px solid var(--line-2)}

/* ---------- 표 ---------- */
.tbl-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:var(--r-card)}
.tbl{min-width:720px; font-size:15px}
.tbl caption{text-align:left; padding:17px 22px; font-size:14px; color:var(--muted); font-weight:500;
  background:var(--bg-3); border-bottom:1px solid var(--line)}
.tbl th,.tbl td{padding:15px 22px; border-bottom:1px solid var(--line-2); text-align:left; vertical-align:top; line-height:1.72}
.tbl thead th{background:var(--navy); color:#fff; font-weight:700; white-space:nowrap; border-bottom:0}
.tbl tbody th{font-weight:700; color:var(--ink); white-space:nowrap; background:var(--bg-3)}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:0}
.tbl td.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}

/* ---------- 목록 ---------- */
.blist li{position:relative; padding:15px 0 15px 26px; border-bottom:1px solid var(--line-2);
  font-size:16px; line-height:1.86; color:var(--text)}
.blist li::before{content:""; position:absolute; left:0; top:27px; width:10px; height:2px; background:var(--brand)}
.blist li:last-child{border-bottom:0}
.blist li b{color:var(--ink); font-weight:700}

/* ---------- 단계 ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; counter-reset:st}
.steps.s3{grid-template-columns:repeat(3,1fr)}
.steps.s5{grid-template-columns:repeat(5,1fr)}
.steps.s6{grid-template-columns:repeat(6,1fr)}
.step{position:relative; padding:36px 26px; background:#fff; counter-increment:st}
.step::before{content:"STEP " counter(st); display:block; font-size:11.5px; color:var(--brand);
  letter-spacing:.13em; margin-bottom:15px; font-weight:800}
.step h3{font-size:18px; font-weight:700; margin-bottom:10px}
.step p{font-size:14px; color:var(--muted); line-height:1.8}

/* ---------- 타임라인 ---------- */
.tl{position:relative; padding-left:38px}
.tl::before{content:""; position:absolute; left:7px; top:10px; bottom:10px; width:2px; background:var(--line)}
.tl-item{position:relative; padding:0 0 46px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:""; position:absolute; left:-36px; top:12px; width:16px; height:16px; border-radius:50%;
  background:var(--brand); border:3px solid #fff; box-shadow:0 0 0 2px var(--line)}
.tl-item .y{display:block; font-size:30px; font-weight:800; color:var(--brand);
  letter-spacing:-0.045em; margin-bottom:11px}
.tl-item li{position:relative; padding:5px 0 5px 16px; font-size:16px; color:var(--text); line-height:1.8}
.tl-item li::before{content:""; position:absolute; left:0; top:17px; width:6px; height:2px; background:var(--line-3)}

/* ---------- FAQ ---------- */
.faq{border-top:2px solid var(--navy)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex; gap:15px; align-items:flex-start; padding:26px 46px 26px 0; font-size:17px;
  font-weight:700; color:var(--ink); cursor:pointer; position:relative; line-height:1.6; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:8px; top:34px; width:11px; height:11px;
  border-right:2px solid var(--brand); border-bottom:2px solid var(--brand);
  transform:rotate(45deg); transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq summary .q{flex:0 0 auto; color:var(--brand); font-weight:800}
.faq .a{padding:0 0 30px 33px; font-size:16px; color:var(--text); line-height:1.9}

/* ---------- 2단 ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center}
.split.rev > *:first-child{order:2}
.split img{border-radius:var(--r-card); width:100%; aspect-ratio:4/3; object-fit:cover}
.figure{margin:0}
.figure figcaption{margin-top:13px; font-size:13.5px; color:var(--muted)}
.wide-fig{margin:0}
.wide-fig img{width:100%; aspect-ratio:21/9; object-fit:cover; border-radius:var(--r-lg)}
.wide-fig figcaption{margin-top:14px; font-size:13.5px; color:var(--muted)}

/* ---------- 인용 ---------- */
.quote{border-left:4px solid var(--brand); padding:6px 0 6px 30px;
  font-size:clamp(19px,2vw,29px); font-weight:800; line-height:1.58; color:var(--navy); letter-spacing:-0.04em}
.sign{margin-top:30px; font-size:15px; color:var(--muted); font-weight:500}
.sign b{color:var(--ink); font-size:20px; margin-left:9px; font-weight:800}

/* ---------- 게시판 ---------- */
.posts{border-top:2px solid var(--navy)}
.post{display:grid; grid-template-columns:126px 1fr 118px; gap:22px; align-items:center;
  padding:26px 6px; border-bottom:1px solid var(--line-2)}
.post .cat{font-size:12px; color:var(--brand); background:var(--bg-4); border-radius:var(--r-pill);
  padding:6px 12px; text-align:center; font-weight:700}
.post h3{font-size:18.5px; font-weight:700; line-height:1.52}
.post p{font-size:14px; color:var(--muted); margin-top:7px; line-height:1.75}
.post .d{font-size:13.5px; color:var(--muted); text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
.post:hover h3{color:var(--brand)}

/* ---------- CTA 밴드 ---------- */
.band{background:var(--navy); padding:88px 0}
.band .in{display:flex; align-items:center; justify-content:space-between; gap:34px; flex-wrap:wrap;
  width:75vw; max-width:var(--wrap); margin:0 auto}
.band h2{font-size:clamp(23px,2.3vw,38px); color:#fff; font-weight:800}
.band p{margin-top:14px; font-size:16px; color:rgba(255,255,255,.84)}

.btn{display:inline-flex; align-items:center; gap:10px; height:56px; padding:0 34px;
  border-radius:var(--r-btn); background:var(--brand); color:#fff; font-size:15px; font-weight:700;
  border:1px solid var(--brand); cursor:pointer; letter-spacing:-0.02em;
  transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease)}
.btn:hover{background:var(--brand-h); border-color:var(--brand-h); color:#fff}
.btn.line{background:#fff; color:var(--brand); border-color:var(--line-3)}
.btn.line:hover{background:#fff; border-color:var(--brand); color:var(--brand-h)}
.btn.ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.66)}
.btn.ghost:hover{background:#fff; color:var(--brand); border-color:#fff}
.btn.pill{border-radius:var(--r-pill)}

/* ---------- 폼 ---------- */
.form{display:grid; grid-template-columns:repeat(2,1fr); gap:24px}
.fld{display:flex; flex-direction:column; gap:9px}
.fld.full{grid-column:1/-1}
.fld label{font-size:14px; font-weight:700; color:var(--ink)}
.fld input,.fld select,.fld textarea{height:56px; padding:0 16px; border:1px solid var(--line-3);
  border-radius:var(--r-btn); font-size:15px; font-family:inherit; color:var(--ink); background:#fff}
.fld textarea{height:176px; padding:15px 16px; line-height:1.7; resize:vertical}
.req{color:var(--danger); margin-left:4px}
.form-note{grid-column:1/-1; font-size:14px; color:var(--muted); line-height:1.85}
.note-line{margin-top:26px}

/* ---------- 푸터 ---------- */
.ft{background:var(--dark); color:rgba(255,255,255,.68); padding:86px 0 44px; font-size:14px}
.ft-top{display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:42px;
  width:75vw; max-width:var(--wrap); margin:0 auto}
.ft h3{font-size:13px; color:#fff; margin-bottom:18px; letter-spacing:.06em; font-weight:700}
.ft a{color:rgba(255,255,255,.68)}
.ft a:hover{color:#7FB2FF}
.ft li{padding:5px 0}
.ft-brand .logo{color:#7FB2FF; margin-bottom:20px}
.ft-brand .logo .nm{color:#fff}
.ft-brand .logo .en{color:rgba(255,255,255,.62)}
.ft-brand p{font-size:14px; line-height:1.9}
.ft-bot{width:75vw; max-width:var(--wrap); margin:56px auto 0; padding-top:30px;
  border-top:1px solid rgba(255,255,255,.16); display:flex; flex-wrap:wrap; gap:14px 28px;
  align-items:center; justify-content:space-between}
.ft-legal{display:flex; flex-wrap:wrap; gap:8px 24px}
.ft-legal a{color:rgba(255,255,255,.88)}
.ft-addr{font-size:13px; line-height:1.95; color:rgba(255,255,255,.64)}
.notice{width:75vw; max-width:var(--wrap); margin:32px auto 0; padding:17px 22px;
  border:1px dashed rgba(255,255,255,.32); border-radius:var(--r-btn);
  font-size:13px; color:rgba(255,255,255,.8); line-height:1.85}
.notice b{color:#fff}

/* ---------- 사이트맵 ---------- */
.smap{display:grid; grid-template-columns:repeat(4,1fr); gap:40px 30px}
.smap h3{font-size:17px; font-weight:800; padding-bottom:13px; border-bottom:2px solid var(--brand); margin-bottom:12px}
.smap a{display:block; padding:8px 0; font-size:14.5px; color:var(--text); border-bottom:1px solid var(--line-2)}
.smap a:hover{color:var(--brand)}

/* ---------- 유틸 ---------- */
.mt40{margin-top:40px}
.mt56{margin-top:60px}
.center{text-align:center}
.sec-head.center{margin-left:auto; margin-right:auto}
.badge{display:inline-block; padding:7px 16px; border-radius:var(--r-pill); border:1px solid var(--line-3);
  font-size:13px; color:var(--ink); margin:0 6px 8px 0; background:#fff; font-weight:500}
.kv{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden}
.kv > div{background:#fff; padding:30px 26px}
.kv dt{font-size:11.5px; letter-spacing:.11em; color:var(--brand); font-weight:800; margin-bottom:9px}
.kv dd{margin:0; font-size:16px; line-height:1.8; color:var(--text)}

/* ---------- 반응형 (원본 1024 / 600) ---------- */
@media (max-width:1440px){
  .wrap,.hero-in,.band .in,.ft-top,.ft-bot,.notice{width:86vw}
  .gnb > li > a{padding:0 14px; font-size:15px}
}
@media (max-width:1200px){
  :root{--pad-sec:96px; --pad-sec-lg:118px}
  .gnb > li > a{padding:0 10px; font-size:14px}
  .hd-in{gap:18px}
  .cards.c4,.stats,.steps.s5,.steps.s6,.kv{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1024px){
  :root{--pad-sec:80px; --pad-sec-lg:96px}
  .wrap,.hero-in,.band .in,.ft-top,.ft-bot,.notice,.hd-in,.drawer-grid{width:auto; margin-left:28px; margin-right:28px}
  .ft-bot{margin-top:48px}
  .notice{margin-top:30px}
  .gnb{display:none}
  .nav-toggle{display:flex}
  .hd-util .btn-mini:not(.pri){display:none}
  .hero-in{padding:78px 0 72px}
  .hero-home .hero-in{padding:112px 0 100px}
  .sec-head{margin-bottom:40px}
  .cards,.icards,.icards.c4,.stats,.steps{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr; gap:36px}
  .split.rev > *:first-child{order:0}
  .ft-top{grid-template-columns:repeat(2,1fr); gap:32px}
  .drawer-grid{grid-template-columns:repeat(2,1fr)}
  .smap{grid-template-columns:repeat(2,1fr)}
  .spec{grid-template-columns:1fr}
  .wide-fig img{aspect-ratio:16/9}
}
@media (max-width:600px){
  :root{--pad-sec:58px; --pad-sec-lg:68px; --header-h:64px}
  body{font-size:15px}
  .wrap,.hero-in,.band .in,.ft-top,.ft-bot,.notice,.hd-in,.drawer-grid{margin-left:20px; margin-right:20px}
  .hd-in{gap:10px}
  .hd-util{gap:8px}
  .hd-util .lang{display:none}
  .logo .nm{font-size:16px}
  /* 영문 워드마크는 33자로 길어 390px 에서 헤더를 밀어낸다 — 모바일에서는 감춘다 */
  .logo .en{display:none}
  .ft-brand .logo .en{display:block; font-size:8.5px}
  .cards,.cards.c2,.cards.c4,.icards,.icards.c2,.icards.c4,.stats,
  .steps,.steps.s3,.steps.s5,.steps.s6,.form,.smap,.kv{grid-template-columns:1fr}
  .card{padding:28px 22px}
  .stat{padding:28px 22px}
  .post{grid-template-columns:1fr; gap:8px}
  .post .cat{justify-self:start}
  .post .d{text-align:left}
  .band{padding:56px 0}
  .ft-top{grid-template-columns:1fr}
  .drawer-grid{grid-template-columns:1fr}
  .tl{padding-left:28px}
  .tl-item::before{left:-27px; width:14px; height:14px}
  .wide-fig img{aspect-ratio:4/3}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important; transition:none !important}
}