/* SMPMC 홈페이지 공통 스타일 — B안(ARCHITECTURE) 기준
   화이트 지배 · 헤어라인 그리드 · 큰 타이포 · 레드는 포인트로만 */

:root{
  --red:#a5122a; --red-dk:#8a0f23; --red-pale:#fbf2f4;
  /* 보조 글자색 두 개는 WCAG AA(4.5:1)를 못 넘고 있었다 — mute2 는 2.80:1 인데
     10.5~13px 작은 글자 71곳에 쓰였고, mute 는 soft 배경 위에서 4.17:1 이었다.
     흰 배경과 soft 배경 양쪽에서 4.5:1 을 넘도록 두 단계 모두 어둡게 잡는다. (QA HBUG-25)
     mute #6f6f75 = 흰 4.99:1 · soft 4.54:1 / mute2 #74747b = 흰 4.64:1 */
  --ink:#111111; --ink2:#1d1d1f; --mute:#6f6f75; --mute2:#74747b;
  --line:#e2e2e4; --bg:#fff; --soft:#f4f4f5; --black:#0a0a0b;
  --ff:'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  /* 고정폭 글꼴에는 한글이 없어 "구축 중" 같은 라벨이 엉뚱한 글꼴로 떨어져 깨져 보였다.
     영문·숫자는 고정폭으로, 한글은 본문 글꼴로 내려오도록 뒤에 Pretendard 를 둔다. */
  --mono:ui-monospace,'SFMono-Regular','SF Mono',Menlo,Consolas,
         'Pretendard Variable',Pretendard,'Malgun Gothic',monospace;
  --nav:88px; --pad:clamp(20px,4.5vw,72px); --maxw:1560px;
  --e:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* word-break:keep-all — 한글은 어절 중간에서 끊으면 안 읽힌다("에너지를 줄이 / 고,").
   대신 URL 처럼 띄어쓰기 없는 긴 문자열은 화면을 밀어내므로 그것만 끊어 준다. */
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ff);
  font-size:17px;line-height:1.65;letter-spacing:-.012em;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;word-break:keep-all;overflow-wrap:break-word}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.035em;line-height:1.14}
p{margin:0} ul{margin:0;padding:0;list-style:none} img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
/* 앵커로 뛸 때 고정된 상단바·탭 아래에서 멈추게 한다.
   실제 높이는 smpmc.js 가 --anchor-off 로 넣어 준다(값이 없을 때를 위한 기본값 122px). */
/* 딱 가려지는 높이만큼만 — 여기에 여유를 더하면 그만큼 앞 칸이 줄처럼 비쳐 보인다 */
[id]{scroll-margin-top:var(--anchor-off, 122px)}
.l-h{font-weight:800} .l-l{font-weight:400}

/* 한 문장을 한 덩이로 묶어, 남은 자리에 못 들어가면 통째로 다음 줄로 내린다.
   문장 안에서는 평소대로 줄이 바뀐다(스크립트의 bindSentences 가 감싼다). */
.sen{display:inline-block}

/* 글자만 있던 칸 앞에 세우는 선 아이콘 */
.ic{display:block;width:30px;height:30px;margin-bottom:16px;color:var(--red)}
.ic svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.ic.sm{width:22px;height:22px;margin-bottom:0}
/* 어두운 칸에서는 브랜드 레드가 묻힌다 — 밝은 쪽으로 옮긴다 */
.dark .ic{color:#ff9fae}

/* 스크롤 안내 — 첫 화면에서만 보이고 내리기 시작하면 사라진다.
   1px 선 하나는 눈에 띄지 않아 마우스 휠 모양으로 바꿨다. */
/* 본문은 가운데로 모이는데 화면 끝에 붙여 두면 넓은 모니터에서 혼자 멀리 떨어진다.
   본문 오른쪽 끝에 맞추고, 화면이 좁아지면 화면 여백을 따른다. */
/* 본문 오른쪽 끝에서 --out 만큼 더 오른쪽에 "왼쪽 끝"을 둔다 — 글자와 겹치지 않게.
   오른쪽 여백이 좁으므로 SCROLL 글자는 빼고 휠만 남긴다(본문 폭이 1560 이라 글자까지 넣을 자리가 없다).
   고정 요소의 % 는 스크롤바를 뺀 폭이라 100vw 와 달리 본문과 정확히 맞는다. */
.shint{--out:15px;
  /* 본문 오른쪽 끝 = (화면폭 + 본문폭)/2 - 여백. 화면이 본문 최대폭보다 좁으면 본문폭은 화면폭이다. */
  --edge:calc((100% + min(100%, var(--maxw))) / 2 - var(--pad));
  position:fixed;
  left:min(calc(100% - 38px), calc(var(--edge) + var(--out)));
  bottom:clamp(20px,3.2vh,36px);z-index:90;
  display:flex;align-items:center;gap:13px;pointer-events:none;
  transition:opacity .45s var(--e),transform .45s var(--e)}
.shint.gone{opacity:0;transform:translateY(12px)}
.shint .ms{width:27px;height:44px;flex:0 0 auto;position:relative;border:2px solid var(--ink);
  border-radius:15px;background:rgba(255,255,255,.72);backdrop-filter:blur(6px)}
.shint .ms::after{content:'';position:absolute;left:50%;top:8px;width:4px;height:9px;margin-left:-2px;
  border-radius:2px;background:var(--red);animation:wheel 1.9s var(--e) infinite}
@keyframes wheel{0%{transform:translateY(0);opacity:0}18%{opacity:1}
  70%{transform:translateY(15px);opacity:0}100%{opacity:0}}
/* 오른쪽 여백이 좁아 글자는 두지 않는다 — 되살리려면 display 만 지우면 된다 */
.shint .t{display:none;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;font-weight:600;color:var(--ink2)}
@media(max-width:700px){.shint .ms{width:23px;height:38px;border-radius:13px}}

/* ── 관제 콘솔(가상) ──
   실제 설비에서 오는 값이 아니다. 머리말에 "예시" 를 적어 두었다.
   화면을 넘길 때 높이가 출렁이지 않도록 본문 높이는 스크립트가 가장 큰 화면에 맞춰 잠근다. */
.cons{background:rgba(255,255,255,.86);backdrop-filter:blur(18px) saturate(170%);
  border:1px solid rgba(17,17,17,.13);box-shadow:0 28px 70px -36px rgba(17,17,19,.45)}
.cons-hd{display:flex;align-items:center;gap:8px;padding:13px 16px;white-space:nowrap;
  border-bottom:1px solid var(--line);font-size:12px}
.cons-hd .live{width:7px;height:7px;border-radius:50%;background:var(--red);flex:0 0 auto;
  animation:consPulse 2.2s var(--e) infinite}
@keyframes consPulse{0%,100%{box-shadow:0 0 0 0 rgba(165,18,42,.5)}60%{box-shadow:0 0 0 7px rgba(165,18,42,0)}}
.cons-hd b{font-weight:700;color:var(--ink);letter-spacing:-.01em}
.cons-hd .clk{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--mute);
  font-variant-numeric:tabular-nums}
.cons-hd .ex{font-size:10.5px;color:var(--mute2);border:1px solid var(--line);
  padding:2px 6px;background:#fff}

/* 탭은 글자 길이에 따라 자리가 달라지지 않도록 세 칸을 같은 너비로 못 박는다 */
.cons-tabs{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line);padding:0 16px}
.cons-tabs button{padding:11px 0;font-size:13px;font-weight:600;color:var(--mute2);text-align:center;
  position:relative;white-space:nowrap;transition:color .25s}
.cons-tabs button::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--red);transform:scaleX(0);transition:transform .35s var(--e)}
.cons-tabs button.on{color:var(--ink)} .cons-tabs button.on::after{transform:scaleX(1)}

.cons-body{position:relative;padding:16px}
.cons .cs{display:none} .cons .cs.on{display:block;animation:consIn .45s var(--e) both}
@keyframes consIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* 지표 3칸 */
.cons .kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cons .kpi .k{font-size:11.5px;color:var(--mute2);white-space:nowrap}
.cons .kpi .v{display:flex;align-items:baseline;gap:3px;margin-top:5px}
.cons .kpi b{font-size:23px;font-weight:700;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.cons .kpi i{font-style:normal;font-size:11px;color:var(--mute2)}
.cons .kpi .d{font-size:11px;margin-top:4px;color:var(--mute2);white-space:nowrap}
.cons .kpi .d.dn{color:#2f9e5f;font-weight:600}

/* 추이 그래프 */
.cons .chart{margin-top:15px;padding-top:14px;border-top:1px solid var(--line)}
.cons .chart svg{width:100%;height:84px;display:block;overflow:visible}
.cons .chart .line{fill:none;stroke:var(--red);stroke-width:1.7;stroke-linejoin:round;
  vector-effect:non-scaling-stroke}
.cons .chart .area{fill:url(#consFill);stroke:none}
.cons .chart .grid{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.cons .chart .hdot{fill:var(--red);stroke:#fff;stroke-width:1.5}
.cons .cap{display:flex;justify-content:space-between;font-size:11px;color:var(--mute2);margin-top:8px}
.cons .cap b{color:var(--ink2);font-weight:600;font-variant-numeric:tabular-nums}

/* 막대 줄 */
.cons .rows{display:grid;gap:10px;margin-top:15px;padding-top:14px;border-top:1px solid var(--line)}
.cons .row{display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:center}
.cons .row .nm{font-size:12.5px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cons .row .pv{font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums;color:var(--ink)}
.cons .row .bar{grid-column:1/-1;height:5px;background:#eaeaee;overflow:hidden}
.cons .row .bar i{display:block;height:100%;background:var(--red);opacity:.8;transition:width 1.1s var(--e)}

/* 도넛 게이지 */
.cons .gauge{display:flex;align-items:center;gap:16px}
.cons .gauge svg{width:78px;height:78px;flex:0 0 auto}
.cons .gauge .tr{stroke:#eaeaee} .cons .gauge .vl{stroke:var(--red);stroke-linecap:round;
  transition:stroke-dasharray 1.1s var(--e)}
.cons .gauge .gt{font-size:12px;color:var(--mute2);white-space:nowrap}
.cons .gauge .gv{display:flex;align-items:baseline;gap:2px;margin-top:2px}
.cons .gauge .gv b{font-size:30px;font-weight:700;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.cons .gauge .gv i{font-style:normal;font-size:13px;color:var(--mute2)}
.cons .gauge .gs{font-size:11.5px;color:var(--mute);margin-top:4px;line-height:1.5}
.cons .gauge .gs b{color:var(--red);font-weight:700}

/* 작은 지표 줄 */
.cons .mini{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:15px;
  padding-top:14px;border-top:1px solid var(--line)}
.cons .mini span{display:block;font-size:11px;color:var(--mute2);white-space:nowrap}
.cons .mini b{display:block;font-size:15px;font-weight:700;margin-top:3px;
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* 알람 집계 · 목록 */
.cons .tally{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cons .tally div{border:1px solid var(--line);background:#fff;padding:9px 11px}
.cons .tally span{font-size:11px;color:var(--mute2)}
.cons .tally b{display:block;font-size:21px;font-weight:700;margin-top:2px;
  font-variant-numeric:tabular-nums}
.cons .tally .a b{color:var(--mute2)} .cons .tally .b b{color:#a06a08} .cons .tally .c b{color:var(--ink)}
.cons .evts{display:grid;gap:7px;margin-top:14px}
.cons .evt{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center;font-size:12.5px}
.cons .evt.new{animation:consIn .45s var(--e) both}
.cons .evt .lv{font-size:10px;font-weight:700;padding:2px 6px;border:1px solid;white-space:nowrap}
.cons .evt .lv.b{color:#a06a08;border-color:#e3c88a;background:#fdf7e9}
.cons .evt .lv.c{color:#2f7a52;border-color:#bfe0cc;background:#f1f8f4}
.cons .evt .tx{color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cons .evt .tm{font-family:var(--mono);font-size:10.5px;color:var(--mute2);white-space:nowrap}

.cons-ft{display:flex;flex-wrap:wrap;gap:5px 16px;padding:10px 16px;border-top:1px solid var(--line);
  background:var(--soft);font-size:11px;color:var(--mute2);white-space:nowrap}
.cons-ft b{color:var(--ink2);font-weight:600}

@media(prefers-reduced-motion:reduce){
  .cons-hd .live{animation:none}.cons .cs.on,.cons .evt.new{animation:none}
  .cons .row .bar i,.cons .gauge .vl{transition:none}
}

/* 통합검색 */
.sch{position:fixed;inset:0;z-index:200;background:rgba(17,17,19,.55);backdrop-filter:blur(6px)}
.sch[hidden]{display:none}
.sch-in{background:#fff;max-width:820px;margin:0 auto;padding:clamp(22px,3vw,34px) clamp(20px,3vw,38px) 10px}
.sch-bar{display:flex;align-items:center;gap:14px;border-bottom:2px solid var(--ink);padding-bottom:14px}
.sch-bar svg{width:22px;height:22px;stroke:var(--ink);fill:none;stroke-width:1.7;flex:0 0 auto}
.sch-bar input{flex:1;border:0;outline:0;font:inherit;font-size:clamp(19px,2.4vw,26px);
  letter-spacing:-.02em;background:none;color:var(--ink);min-width:0}
.sch-bar input::-webkit-search-cancel-button{display:none}
.sch-x{font-size:28px;line-height:1;color:var(--mute);padding:0 4px}
.sch-x:hover{color:var(--ink)}
.sch-hint{margin-top:14px;font-family:var(--mono);font-size:12.5px;color:var(--mute2)}
.sch-res{max-height:min(56vh,520px);overflow-y:auto;margin-top:8px}
.sch-res a{display:grid;grid-template-columns:96px 1fr;gap:4px 14px;align-items:baseline;
  padding:16px 2px;border-bottom:1px solid var(--line)}
.sch-res a:hover{background:var(--soft)}
.sch-res .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--red)}
.sch-res .t{font-size:16.5px;font-weight:600;line-height:1.5;word-break:keep-all}
.sch-res .s{grid-column:2;font-size:14px;color:var(--mute);line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:640px){.sch-res a{grid-template-columns:1fr}.sch-res .s{grid-column:1}}

/* 프로토타입 바는 B안 확정과 함께 걷어냈다. 다시 필요하면 git 이력에서 되살린다. */

/* 화면 전체에 세로 헤어라인 5줄을 깔았었다(B안 시그니처).
   본문의 칸 구분선과 수십 px 씩 어긋나 선이 두 겹으로 보이고,
   맨 왼쪽 줄은 글자가 달라붙은 것처럼 읽혀 걷어냈다.
   되살리려면 이 블록과 smpmc.js 의 grid-lines 삽입을 함께 되돌린다. */

/* ── 헤더 + 세부메뉴 드롭다운 ── */
.hdr{position:fixed;top:0;left:0;right:0;z-index:120;transition:background .4s var(--e),border-color .4s}
.hdr::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);
  transform:scaleX(0);transition:transform .4s var(--e)}
.hdr.on,.hdr.open{background:rgba(255,255,255,.94);backdrop-filter:saturate(180%) blur(18px)}
.hdr.on::after,.hdr.open::after{transform:scaleX(1)}
.hdr .bar{display:flex;align-items:center;gap:clamp(16px,3vw,52px);height:var(--nav);
  max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.logo{font-size:27px;letter-spacing:-.015em;color:var(--red);flex:0 0 auto}

/* 세부메뉴로 바로 들어오면 큰 머리말을 건너뛰고 내용부터 보여 준다(smpmc.js 가 anchored 를 단다).
   메뉴 이름만 눌러 들어오면 지금처럼 머리말부터 나온다. */
body.anchored .phead{display:none}

body.anchored #shell{padding-top:var(--nav)}
/* 탭 바로 다음 칸 — .phead 도 section 이라 :first-of-type 으로는 잡히지 않는다 */
body.anchored .tabs + .sec{padding-top:clamp(40px,4.5vw,72px)}
/* 항목 사이를 넉넉히 — 1181px 에서도 한 줄에 들어가는 선까지만 벌린다 */
.gnb{display:flex;gap:clamp(15px,2.6vw,46px)}
/* 남는 자리는 로고와 메뉴 사이로 몰아 준다 — 메뉴와 사업문의·사이트맵이 멀리 떨어져 보이지 않게 */
.hdr .bar nav{margin-left:auto}
.gnb>li>a{display:block;padding:33px 2px;font-size:19px;font-weight:500;position:relative;white-space:nowrap}
.gnb>li>a::after{content:'';position:absolute;left:0;right:0;bottom:26px;height:1.5px;background:var(--red);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--e)}
.gnb>li:hover>a::after,.gnb>li.cur>a::after{transform:scaleX(1)}
.gnb>li.cur>a{font-weight:700}
.util{display:flex;align-items:center;gap:12px;margin-left:0}
.ib{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;transition:background .25s}
.ib:hover{background:var(--soft)}
.ib svg{width:18px;height:18px;stroke:var(--ink2);fill:none;stroke-width:1.6}
/* 사이트맵 — 사업문의 옆에 얹되 버튼보다 조용하게 */
.smap{display:inline-flex;align-items:center;gap:7px;padding:10px 14px;font-size:14.5px;
  font-weight:600;color:var(--ink2);border:1px solid var(--line);white-space:nowrap;transition:.22s}
.smap svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6}
.smap:hover{border-color:var(--ink);color:var(--ink)}
@media(max-width:900px){.smap{padding:9px 11px} .smap span,.smap{font-size:0;gap:0}
  .smap svg{width:17px;height:17px}}

.cta{padding:11px 21px;background:var(--red);color:#fff;font-size:14.5px;font-weight:600;
  white-space:nowrap;transition:background .25s}
.cta:hover{background:var(--red-dk)}
.burger{display:none}

/* 드롭다운 — 헤더 아래로 한 판이 내려온다 */
.drop{position:absolute;left:0;right:0;top:100%;background:rgba(255,255,255,.97);
  backdrop-filter:saturate(180%) blur(18px);border-bottom:1px solid var(--line);
  overflow:hidden;max-height:0;transition:max-height .42s var(--e)}
.hdr.open .drop{max-height:340px}
/* 올린 메뉴의 하위 항목만 그 아래에 펼친다.
   일곱 칸을 한꺼번에 펼치면 메뉴마다 글자 수가 달라 서로 겹친다.
   위치는 글자 폭에 따라 달라지므로 스크립트가 재서 넣는다. */
.drop .in{position:relative;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.drop .col{position:absolute;top:12px;padding-bottom:34px;white-space:nowrap;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .26s var(--e),transform .26s var(--e),visibility .26s}
.drop .col.on{opacity:1;visibility:visible;transform:none}
.drop a{display:block;padding:9px 2px;font-size:17px;color:var(--mute);
  transition:color .22s,padding-left .3s var(--e)}
.drop a:hover{color:var(--red);padding-left:5px}
@media(max-width:1180px){.gnb,.drop{display:none}.burger{display:grid}}
@media(max-width:640px){.cta{padding:9px 14px;font-size:13px}.util{gap:5px}}

/* 본문 바로가기 — 평소엔 화면 밖, 포커스를 받으면 왼쪽 위에 나타난다 */
.skip{position:fixed;left:12px;top:-100px;z-index:200;background:var(--red);color:#fff;
  padding:12px 18px;border-radius:6px;font-size:15px;font-weight:600;
  transition:top .18s var(--e)}
.skip:focus{top:12px;outline:2px solid #fff;outline-offset:-4px}

/* 전체메뉴 */
/* 화면 밖으로 밀어내기만 하면 링크 40개가 탭 순서와 화면낭독기에 그대로 남는다 —
   닫힌 메뉴를 지나 본문에 닿기까지 Tab 을 45번 넘게 눌러야 했다.
   visibility 로 완전히 빼고 열릴 때만 되살린다. 닫힐 때는 애니메이션이 끝난 뒤 숨긴다. */
.drawer{position:fixed;inset:0;z-index:150;background:#fff;transform:translateY(-100%);
  visibility:hidden;
  transition:transform .55s var(--e), visibility 0s linear .55s;
  overflow-y:auto;padding:calc(var(--nav) + 50px) var(--pad) 60px}
.drawer.open{transform:none;visibility:visible;
  transition:transform .55s var(--e), visibility 0s linear 0s}
.dclose{position:fixed;top:calc(var(--nav)/2 - 13px);right:var(--pad);z-index:160;font-size:26px;display:none}
.drawer.open ~ .dclose{display:block}
.dg{max-width:var(--maxw);margin:0 auto;display:grid}
@media(min-width:900px){.dg{grid-template-columns:repeat(4,1fr);gap:0 30px}}
.dg>div{border-top:1px solid var(--line);padding:20px 0}
.dg h4{font-size:20px;margin:0 0 8px}
.dg a{display:inline-block;color:var(--mute);font-size:15px;margin:0 16px 5px 0}
.dg a:hover{color:var(--red)}

/* ── 공통 조판 ── */
main{position:relative;z-index:2}
/* 위아래를 같은 값으로 크게 잡아 두니 큰 모니터에서 칸마다 300px 씩 비었다.
   위는 줄여 내용이 먼저 나오게 하고, 칸 사이 간격은 아래쪽이 맡는다. */
.sec{padding:clamp(20px,1.8vw,30px) 0 clamp(58px,6vw,96px);position:relative}
.sec.soft{background:var(--soft)}
.sec.dark{background:var(--black);color:#fff}
/* 섹션 머리번호 — 왼쪽에 두되, 숫자 아래에 영문을 쌓지 않고 옆에 나란히 세운다.
   쌓아 두면 제목까지 세 줄이 이어져 위가 늘어져 보였다. */
.snum{font-size:clamp(42px,6.4vw,100px);font-weight:700;letter-spacing:-.05em;color:var(--line);
  line-height:.8;display:inline-block;vertical-align:baseline;margin:0 16px 0 0}
.dark .snum{color:rgba(255,255,255,.14)}
.eb{font-size:12.5px;font-weight:600;letter-spacing:.18em;color:var(--mute2);margin-bottom:18px}
/* 숫자와 짝을 이룬 영문만 옆줄로 — 홀로 쓰인 라벨은 그대로 제 자리에 둔다 */
.snum + .eb{display:inline-block;vertical-align:baseline;margin-bottom:clamp(18px,2.2vw,30px)}
.dark .eb{color:rgba(255,255,255,.5)}
.h2{font-size:clamp(30px,4.8vw,64px);line-height:1.14}
.lead{margin-top:24px;font-size:clamp(16px,1.25vw,19px);color:var(--mute);max-width:640px;line-height:1.78}
.dark .lead{color:rgba(255,255,255,.6)}
.more{display:inline-flex;align-items:center;gap:9px;margin-top:34px;font-size:15.5px;font-weight:600;
  border-bottom:1px solid var(--ink);padding-bottom:5px;transition:.25s}
.more:hover{color:var(--red);border-color:var(--red)}
.more svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;transition:transform .3s var(--e)}
.more:hover svg{transform:translateX(5px)}
.btn{display:inline-flex;align-items:center;gap:9px;padding:16px 32px;font-size:15.5px;font-weight:600;
  transition:.28s var(--e)}
.btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;transition:transform .3s var(--e)}
.btn:hover svg{transform:translateX(5px)}
.bf{background:var(--ink);color:#fff}.bf:hover{background:var(--red)}
.bl{border:1px solid rgba(17,17,17,.3)}.bl:hover{border-color:var(--ink);background:rgba(0,0,0,.04)}

/* 이미지 슬롯 — 실사가 없어도 화면이 무너지지 않는다 */
.slot{position:relative;overflow:hidden;background:#eaeaec;isolation:isolate}
.slot::before{content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.5) 0 1px,transparent 1px 44px),
             linear-gradient(115deg,#fafafa,#dcdce0 45%,#f2f2f4 62%,#c6c6cb)}
.slot.ph::before{background:var(--img) center/cover no-repeat}

/* 리빌 */
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--e),transform .9s var(--e)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.09s}.rv[data-d="2"]{transition-delay:.18s}
.rv[data-d="3"]{transition-delay:.27s}.rv[data-d="4"]{transition-delay:.36s}
.mask{display:block;overflow:hidden}
.mask>span{display:block;transform:translateY(105%);transition:transform 1.05s var(--e)}
.in .mask>span{transform:none}
.mask:nth-of-type(2)>span{transition-delay:.09s}

/* ── 서브페이지 공통 헤더 ── */
.phead{padding:calc(var(--nav) + clamp(56px,7vw,104px)) 0 clamp(40px,5vw,72px);position:relative}
.phead .crumb{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--mute2);margin-bottom:20px}
.phead .crumb b{color:var(--red);font-weight:600}
.phead h1{font-size:clamp(32px,5vw,68px);line-height:1.12}
/* 620px 이면 한 문장이 끝 낱말만 남기고 넘어가는 일이 잦다. 본문 폭의 절반 남짓까지만 넓힌다. */
.phead p{margin-top:22px;font-size:clamp(16px,1.25vw,19px);color:var(--mute);
  max-width:840px;line-height:1.78}
.phead .rule{position:absolute;left:var(--pad);top:var(--nav);width:2px;height:clamp(40px,6vh,72px);background:var(--red)}

/* ── 서브페이지 : 번갈아 배치되는 항목 블록 ──
   사업영역 · 미래운영 · 지속가능경영 · 인재채용이 같은 구조를 쓴다. */
.blocks{display:grid}
.blk{display:grid;gap:clamp(26px,4vw,72px);padding:clamp(48px,6vw,96px) 0;
  border-top:1px solid var(--line);align-items:center}
.blk:first-child{border-top:0}
@media(min-width:960px){
  .blk{grid-template-columns:1fr 1fr}
  .blk:nth-child(even) .blk-fig{order:-1}
}
.blk-fig{aspect-ratio:4/3;position:relative;overflow:hidden}
.blk-fig .slot{position:absolute;inset:0;transition:transform 1.3s var(--e)}
.blk:hover .blk-fig .slot{transform:scale(1.04)}
.blk .no{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--red);font-weight:600}
.blk h3{font-size:clamp(24px,3.2vw,42px);margin:14px 0 18px;line-height:1.2}
.blk p{color:var(--mute);font-size:16.5px;line-height:1.82}
.blk .kws{display:flex;flex-wrap:wrap;gap:7px;margin-top:24px}
.blk .kws span{padding:8px 14px;border:1px solid var(--line);font-size:14px;color:var(--ink2)}
/* 한글 라벨이라 고정폭을 쓰지 않는다 — 자간까지 벌리면 "구 축 중" 처럼 흩어진다 */
.blk .bdg{display:inline-block;margin-bottom:14px;font-size:12px;font-weight:600;
  padding:4px 10px;border:1px solid var(--line);color:var(--mute)}
.blk .bdg.now{border-color:var(--red);background:var(--red-pale);color:var(--red)}

/* 프로세스 한 줄 */
.steps-row{display:flex;flex-wrap:wrap;gap:8px 6px;align-items:center;
  margin-top:clamp(30px,3.5vw,50px);padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.steps-row em{font-style:normal;font-family:var(--mono);font-size:12.5px;color:var(--ink2);white-space:nowrap}
.steps-row i{width:16px;height:1px;background:var(--red);opacity:.5}

/* 3~4열 카드 */
.grid3{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  margin-top:clamp(34px,4vw,60px)}
@media(min-width:760px){.grid3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.grid3{grid-template-columns:repeat(3,1fr)}}
.grid3>div{background:#fff;padding:clamp(26px,3vw,44px)}
.grid3 .no{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;color:var(--red)}
.grid3 h3{font-size:clamp(19px,1.9vw,24px);margin:13px 0 11px}
.grid3 p{color:var(--mute);font-size:15px;line-height:1.74}

/* 문의 폼 */
.form{max-width:760px;margin-top:clamp(34px,4vw,56px)}
.form .fr{display:grid;gap:16px}
@media(min-width:700px){.form .fr.two{grid-template-columns:1fr 1fr}}
.form label{display:block;margin-top:18px;font-size:13.5px;font-weight:600;color:var(--ink2)}
.form label em{font-style:normal;font-weight:400;color:var(--mute2);margin-left:5px}
.form label .req{color:var(--red);margin-left:4px}
.form input,.form select,.form textarea{width:100%;margin-top:8px;padding:13px 15px;
  border:1px solid var(--line);font:inherit;font-size:15.5px;background:#fff;color:var(--ink);resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--ink)}
.form textarea{min-height:170px;line-height:1.75}
.agree{margin-top:26px;padding:20px;background:var(--soft);font-size:14px;color:var(--mute);line-height:1.75}
.agree label{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:14.5px;color:var(--ink2);cursor:pointer}
.agree input{width:auto;margin:3px 0 0}
.form .msg{margin-top:16px;font-size:14.5px;display:none}
.form .msg.on{display:block}
.form .msg.err{color:var(--red)}
.form .msg.ok{color:var(--ink)}
.form .submit{margin-top:26px;padding:17px 44px;background:var(--ink);color:#fff;
  font-size:16px;font-weight:600;transition:background .25s}
.form .submit:hover{background:var(--red)}
.form .submit[disabled]{opacity:.55}
.done{padding:clamp(48px,6vw,88px) 0;text-align:center}
.done h2{font-size:clamp(24px,3vw,38px)}
.done p{margin-top:18px;color:var(--mute);font-size:16.5px;line-height:1.8}

/* 로컬 탭 (2depth) */
.tabs{border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:sticky;
  top:var(--nav);z-index:100;background:rgba(255,255,255,.95);backdrop-filter:blur(14px)}
.tabs .in{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);display:flex;gap:clamp(14px,2vw,32px);
  overflow-x:auto;scrollbar-width:none}
.tabs .in::-webkit-scrollbar{display:none}
.tabs a{padding:19px 2px;font-size:17px;font-weight:500;color:var(--mute);white-space:nowrap;
  position:relative;transition:color .25s}
.tabs a::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--red);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--e)}
.tabs a:hover{color:var(--ink)}
.tabs a.cur{color:var(--ink);font-weight:700}
.tabs a.cur::after{transform:scaleX(1)}

/* ── 푸터 ── */
footer{background:var(--soft);padding:clamp(50px,6vw,80px) 0 40px;font-size:14px;color:var(--mute);
  position:relative;z-index:2}
.ft{display:flex;flex-wrap:wrap;gap:24px;padding-bottom:30px;border-bottom:1px solid var(--line)}
.fl{display:flex;flex-wrap:wrap;gap:8px 24px}
.fl a{font-size:14px;color:var(--ink2);font-weight:500}
.fl a:hover{color:var(--red)}
.fl a.em{font-weight:700;color:var(--ink)}
.fs{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}
.fs select,.fs a{padding:11px 15px;border:1px solid var(--line);background:#fff;font:inherit;
  font-size:13.5px;color:var(--ink2)}
.fs a{display:inline-flex;align-items:center;gap:7px}
.fs a:hover{border-color:var(--red);color:var(--red)}
.fb{padding-top:28px;display:flex;flex-wrap:wrap;gap:16px 40px}
.fb .co{font-size:17px;letter-spacing:-.015em;color:var(--red)}
.fi{font-size:13.5px;line-height:1.85}.fi span{margin-right:14px}
.cp{margin-top:22px;font-size:12.5px;color:var(--mute2)}

/* ── 커스텀 커서 : 빨간 원이 커졌다 작아졌다 한다 ──
   마우스가 있는 기기에서만 켠다. 손가락으로 쓰는 기기에는 커서가 없다.
   정확한 지점은 가운데 작은 점이 잡아주고, 큰 원은 그 주위를 따라온다. */
.cur-ring,.cur-dot{display:none}
@media (hover:hover) and (pointer:fine){
  body.cursor-on{cursor:none}
  body.cursor-on a,body.cursor-on button{cursor:none}
  /* 글자를 넣는 곳은 커서를 돌려준다 — 원이 덮으면 입력 위치가 안 보인다 */
  body.cursor-on input,body.cursor-on textarea,body.cursor-on select{cursor:auto}

  .cur-ring,.cur-dot{display:block;position:fixed;left:0;top:0;pointer-events:none;
    opacity:0;transition:opacity .3s;will-change:transform}
  .cur-ring{z-index:500} .cur-dot{z-index:501}
  body.cur-vis .cur-ring,body.cur-vis .cur-dot{opacity:1}

  /* 커지고 작아지는 것은 안쪽 요소가 맡는다 — 바깥은 좌표 이동만 한다 */
  .cur-ring i{display:block;width:20px;height:20px;margin:-10px 0 0 -10px;
    border:1.5px solid var(--red);border-radius:50%;
    animation:curPulse 1.6s ease-in-out infinite;
    transition:width .3s var(--e),height .3s var(--e),margin .3s var(--e),
               background .3s,border-color .3s}
  .cur-dot i{display:block;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;
    background:var(--red);border-radius:50%}
  /* 누를 수 있는 것 위에서는 조금 더 벌어진다 */
  .cur-ring.hot i{width:36px;height:36px;margin:-18px 0 0 -18px;
    background:rgba(165,18,42,.1);animation-duration:1.1s}
  /* 어두운 구간에서는 밝은 톤으로 바꿔 잘 보이게 한다 */
  .cur-ring.dark i{border-color:#ff8fa1} .cur-dot.dark i{background:#ff8fa1}
}
@keyframes curPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}.rv{opacity:1;transform:none}.mask>span{transform:none}
  /* 모션을 줄이는 설정이면 커서는 건드리지 않는다 */
  body.cursor-on{cursor:auto}
  .cur-ring,.cur-dot{display:none!important}
}
@media(max-width:768px){
  body{font-size:16px}
  .rv{transform:translateY(14px);transition-duration:.55s}
  .rv[data-d]{transition-delay:0s}
}