@charset "utf-8";
/* ============================================================
   renew2026.css — 2026 홈페이지 개편 오버라이드 레이어
   기존 common/styleDefault/layout/content.css 는 수정하지 않고
   이 파일만 마지막에 로드해 덮어쓴다. (되돌리기 = link 1줄 제거)
   작성 2026-08-31
   ============================================================ */

/* ---------- 0. 공통 변수 ---------- */
:root{
  --nr-accent:#0b4da2;
  --nr-accent-dk:#083a7a;
  --nr-ink:#111;
  --nr-line:#e2e6ec;
  --nr-fs:1;              /* 글자 크기 배율 (접근성 토글) */
}

/* ---------- 1. 메인 배너 ---------- */
/* 좌하단 텍스트 영역 가독성 확보용 그라데이션 */
.company .vis .visual-slide .item .img{position:relative;}
.company .vis .visual-slide .item .img::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:75%;
  background:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.62) 26%,rgba(0,0,0,.34) 55%,rgba(0,0,0,0) 100%);
  pointer-events:none;z-index:1;
}
.company .vis .visual-slide .item .img::before{
  content:"";position:absolute;left:0;bottom:0;width:72%;height:66%;
  background:linear-gradient(to top right,rgba(0,0,0,.55) 0%,rgba(0,0,0,.22) 45%,rgba(0,0,0,0) 100%);
  pointer-events:none;z-index:1;
}
.company .vis .visual-slide .item .txt{z-index:2;}
.company .vis .visual-slide .item .txt .btxt{text-shadow:0 2px 14px rgba(0,0,0,.45);}
.company .vis .visual-slide .item .txt .stxt{text-shadow:0 1px 10px rgba(0,0,0,.5);line-height:1.55;}
.company .vis .visual-slide .item .txt .stxt strong{font-weight:700;color:#ffd97a;}
.company .vis .visual-slide .item picture{display:block;width:100%;height:100%;}
.company .vis .visual-slide .item picture img{width:100%;height:100%;object-fit:cover;}

/* 저사양/모션 최소화 환경에서는 켄번즈 정지 */
@media (prefers-reduced-motion: reduce){
  .company .vis .visual-slide .item .img img,
  .company .vis .visual-slide .item picture img{animation:none !important;transform:none !important;}
  .wow{animation:none !important;visibility:visible !important;}
}

/* ============================================================
   2. 조직도 — 색 체계 + 레이아웃 전면 재설계 (2026-08-31)
   ------------------------------------------------------------
   색 규칙
     · 본부 4개가 좌 → 우로 남색 → 청색 → 시안 → 민트 로 이어진다.
     · 각 본부의 산하 조직은 위 → 아래로 같은 색상의 밝은 단계로 내려간다
       (시작 = 본부색 중 가장 진한 색, 끝 = 가장 옅은 색).
     · 대표이사는 그 4색을 순서대로 담은 가로 그라데이션 —
       가장 진한 남색에서 시작해 가장 옅은 민트로 끝난다.
     · 배경이 밝아 흰 글씨 대비가 3:1 미만이 되는 칸은 짙은 남색 글씨로 뒤집는다.
   육각형은 SVG 배경 대신 clip-path 로 그려 색을 자유롭게 준다.
   ============================================================ */

/* --- 2-1. 본부별 색 — 안쪽(본체) + 바깥(테두리 링) 2톤 ---
   회사 표준 조직도 색을 그대로 쓴다. 한 본부와 그 산하 부서는 완전히 같은 색이고,
   육각형은 밝은 테두리 링 안에 본체가 들어앉는 2톤 구조다.
   대표이사만 4본부 색을 세로로 잇는 그라데이션(진한 코발트 → 민트)을 쓴다.       */
.work .cont li.fam-pub  { --bg:#0493DC; --ring:#68BEEA; --fg:#fff; }  /* 공공사업본부 계열 */
.work .cont li.fam-mgmt { --bg:#1856CE; --ring:#68BEEA; --fg:#fff; }  /* 경영기획실 계열 */
.work .cont li.fam-tech { --bg:#1698C1; --ring:#72CEE0; --fg:#fff; }  /* 기술연구본부 계열 */
.work .cont li.fam-ai   { --bg:#1DC3B8; --ring:#77DBD4; --fg:#fff; }  /* AI전략본부 계열 */
.work .cont li.fam-ceo  { --bg:#0F65CC; --ring:#70CDDF; --fg:#fff; }  /* 대표이사 */

/* --- 2-2. 육각형 렌더 : 바깥 링(li) + 본체(a) 2겹 --- */
.work .cont li:after{ background-image:none !important; content:none !important; }
.work .cont li{
  background:var(--ring);
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  -webkit-clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
}
.work .cont li.is-blank{ background:none; pointer-events:none; }
.work .cont li a{
  position:absolute; left:8%; right:8%; top:8%; bottom:8%;
  width:auto; height:auto;
  background:var(--bg);
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  -webkit-clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  transition:filter .18s ease;
}
.work .cont li.fam-ceo a{
  background-image:linear-gradient(180deg,#0524D9 0%,#0F65CC 42%,#1592C2 72%,#1DC3B8 100%);
}
.work .cont li a span{ color:var(--fg) !important; word-break:keep-all; }
.work .cont .list > ul li a span{
  font-weight:700;                 /* 부서명 가독성 — 기존 500 → 700 */
  letter-spacing:-0.035em;
  padding:0 8px;
}
/* 밝은 시안·민트 위 흰 글씨의 또렷함 보강 */
.work .cont li.fam-tech a span,
.work .cont li.fam-ai a span{ text-shadow:0 1px 2px rgba(0,32,44,.34); }
.work .cont li a[data-title]:hover,
.work .cont li a[data-title]:focus-visible{ filter:brightness(1.07); }
/* 본부 칸 : 산하 부서와 완전히 같은 색을 쓰고, 굵은 글씨로만 계열의 머리임을 표시한다 */
.work .cont a.is-head span{ letter-spacing:-0.02em; }

/* --- 2-3. 마케팅본부 「신설예정」 배지 : 이름 아래 가운데 --- */
.work .cont a[data-title="마케팅본부"] span::after{
  content:"신설예정";
  display:block;
  width:-moz-fit-content;
  width:fit-content;
  margin:6px auto 0;
  padding:2px 10px 3px;
  font-size:12px;
  font-weight:600;
  line-height:1.5;
  letter-spacing:-0.02em;
  border-radius:999px;
  background:rgba(255,255,255,.30);
  color:#fff;
}

/* --- 2-4. 데스크톱 폰트 단계별 보정 --- */
@media only screen and (max-width:1480px){
  .work .cont .list > ul li a span{font-size:17px;line-height:1.3;}
  .work .cont .list > ul a[data-title="마케팅본부"] span::after{font-size:11px;margin-top:5px;}
}
@media only screen and (max-width:1280px){
  .work .cont .list > ul li a span{font-size:15px;line-height:1.28;}
  .work .cont .list > ul a[data-title="마케팅본부"] span::after{font-size:10px;padding:1px 8px 2px;}
}

/* ============================================================
   2-5. 모바일 조직도 — 거북이형 1·4·3·4·3·1 배치
   본부별로 세로 한 줄이 이어지고, 좌우 색이 가운데로 모인다.
     대표이사
     공공사업본부 · 경영기획실 · 기술연구본부 · AI전략본부
     DB사업부 · 인문인공지능연구소 · 메타버스(디지털트윈)사업부
     DL사업부 · 지식사업부 · SI사업부 · AI사업부
     아카이브사업부 · 전사 TF · AI창작연구소
     마케팅본부(신설예정)
   ============================================================ */
.work .cont .mo-grid{ display:none; }

@media only screen and (max-width:999px){
  /* 기존 PC용 3단(c01·c02·c03·c02.mobile)은 모두 감춘다 */
  .work .cont .list > ul{ display:none !important; }
  .work .cont .list{ width:auto !important; left:auto !important; transform:none !important; }
  .work .cont{ padding:0 12px; }

  .work .cont .mo-grid{
    --hw: 84px;                    /* 육각형 가로 */
    --hh: 110px;                   /* 육각형 세로 (약간 세로로 긴 형태) */
    --gap: 3px;
    display:block;
    max-width:calc(var(--hw) * 4 + var(--gap) * 3);
    margin:0 auto;
    padding-bottom:calc(var(--hh) * 0.12);
  }
  .work .cont .mo-grid ul.mo{
    display:flex; justify-content:center; align-items:flex-start;
    gap:var(--gap); margin:0; padding:0; list-style:none; font-size:0;
  }
  .work .cont .mo-grid ul.mo + ul.mo{ margin-top:calc(var(--hh) * -0.25 + var(--gap)); }
  .work .cont .mo-grid ul.mo li{
    width:var(--hw); height:var(--hh); margin:0; padding:0; position:relative;
    display:block; vertical-align:top;
  }
  .work .cont .mo-grid ul.mo li:after{ content:none !important; }
  .work .cont .mo-grid ul.mo li{
    background:var(--ring);
    clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
    -webkit-clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  }
  .work .cont .mo-grid ul.mo li a{
    display:flex; align-items:center; justify-content:center; position:absolute;
    left:8%; right:8%; top:8%; bottom:8%; width:auto; height:auto;
    background:var(--bg);
    clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
    -webkit-clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  }
  .work .cont .mo-grid ul.mo li a.ceo{
    background-image:linear-gradient(180deg,#0524D9 0%,#0F65CC 42%,#1592C2 72%,#1DC3B8 100%);
  }
  .work .cont .mo-grid ul.mo li a span{
    display:block; text-align:center;
    font-size:12px !important; line-height:1.22 !important; font-weight:700 !important;
    letter-spacing:-0.05em; color:var(--fg) !important; word-break:keep-all;
    padding:0 3px;
  }
  .work .cont .mo-grid a[data-title="마케팅본부"] span::after{
    font-size:9.5px; padding:1px 7px 2px; margin-top:4px; line-height:1.45;
  }
}

@media only screen and (min-width:700px) and (max-width:999px){
  .work .cont .mo-grid{ --hw:118px; --hh:154px; --gap:4px; }
  .work .cont .mo-grid ul.mo li a span{ font-size:16px !important; line-height:1.25 !important; padding:0 6px; }
  .work .cont .mo-grid a[data-title="마케팅본부"] span::after{ font-size:12px; padding:2px 10px 3px; margin-top:6px; }
}
@media only screen and (min-width:481px) and (max-width:699px){
  .work .cont .mo-grid{ --hw:96px; --hh:126px; }
  .work .cont .mo-grid ul.mo li a span{ font-size:13.5px !important; }
}

/* 390px 안쪽 : 화면 폭에 맞춰 축소 */
@media only screen and (max-width:420px){
  .work .cont .mo-grid{
    --hw: min(84px, calc((100vw - 46px) / 4));
    --hh: calc(min(84px, calc((100vw - 46px) / 4)) * 1.31);
  }
  .work .cont .mo-grid ul.mo li a span{ font-size:11.5px !important; letter-spacing:-0.06em; padding:0 2px; }
}
@media only screen and (max-width:359px){
  .work .cont .mo-grid ul.mo li a span{ font-size:10.5px !important; line-height:1.2 !important; }
}

/* ---------- 3. 역량·성과 (특허 · 인증 · 수상 · 저작권 · 논문 · 협약) ----------
   ① 행 높이를 줄여 표 전체 세로 길이를 절반 가까이 압축한다.
   ② 탭마다 칸 폭을 고정해 행이 바뀌어도 세로줄이 흔들리지 않게 한다.
   원본 규칙(.achievement .list .vtem li dl dd .box…)이 더 구체적이라 !important 로 덮는다. */

/* 원본 .box_title 은 flex 컨테이너라 <br> 이 무시된다 → 블록으로 되돌려 번호를 줄바꿈 */
.achievement .list .vtem li dl dd .box .box_title{
  display:block !important; line-height:1.45;
  padding:13px 18px !important; font-size:16px !important;
}
.achievement .list .vtem li dl dd .box .box_title .box_no{
  display:block; margin-top:4px; font-size:12.5px; font-weight:400; letter-spacing:0;
  color:rgba(255,255,255,.88);
}
.achievement .list .vtem li dl dd .box .box_info,
.achievement .list .vtem li dl dd .box .box_status{
  font-size:14px !important; line-height:1.45; padding:8px 10px;
}
.achievement .list .vtem li dl dd .box{ gap:6px !important; }
.achievement .list .vtem li dl dd .box > div{ min-width:0; word-break:keep-all; }

@media only screen and (min-width:1000px){
  /* ① 주요 인증(특허 및 기술 인증) — 제목 / 기관 / 일자 / 상태 */
  .achievement .list .vtem:nth-of-type(1) .box > div:nth-child(1){ flex:1 1 auto !important; width:auto !important; }
  .achievement .list .vtem:nth-of-type(1) .box > div:nth-child(2){ flex:0 0 148px !important; width:148px !important; }
  .achievement .list .vtem:nth-of-type(1) .box > div:nth-child(3){ flex:0 0 124px !important; width:124px !important; }
  .achievement .list .vtem:nth-of-type(1) .box > div:nth-child(4){ flex:0 0 100px !important; width:100px !important; }

  /* ③ 주요 수상 — 구분 / 주관 / 일자 / 내용 */
  .achievement .list .vtem:nth-of-type(3) .box > div:nth-child(1){ flex:0 0 158px !important; width:158px !important; }
  .achievement .list .vtem:nth-of-type(3) .box > div:nth-child(2){ flex:0 0 240px !important; width:240px !important; }
  .achievement .list .vtem:nth-of-type(3) .box > div:nth-child(3){ flex:0 0 124px !important; width:124px !important; }
  .achievement .list .vtem:nth-of-type(3) .box > div:nth-child(4){ flex:1 1 auto !important; width:auto !important; text-align:left; }

  /* ④ 저작권 — 저작물 / 등록기관 / 일자 / 분류 */
  .achievement .list .vtem:nth-of-type(4) .box > div:nth-child(1){ flex:0 0 330px !important; width:330px !important; }
  .achievement .list .vtem:nth-of-type(4) .box > div:nth-child(2){ flex:0 0 168px !important; width:168px !important; }
  .achievement .list .vtem:nth-of-type(4) .box > div:nth-child(3){ flex:0 0 124px !important; width:124px !important; }
  .achievement .list .vtem:nth-of-type(4) .box > div:nth-child(4){ flex:1 1 auto !important; width:auto !important; text-align:left; }

  /* ⑤ 논문 — 제목 / 게재처 / 일자 */
  .achievement .list .vtem:nth-of-type(5) .box > div:nth-child(1){ flex:1 1 auto !important; width:auto !important; }
  .achievement .list .vtem:nth-of-type(5) .box > div:nth-child(2){ flex:0 0 250px !important; width:250px !important; }
  .achievement .list .vtem:nth-of-type(5) .box > div:nth-child(3){ flex:0 0 124px !important; width:124px !important; }

  /* ⑥ 협약 — 협약명 / 기관 / 일자 */
  .achievement .list .vtem:nth-of-type(6) .box > div:nth-child(1){ flex:1 1 auto !important; width:auto !important; }
  .achievement .list .vtem:nth-of-type(6) .box > div:nth-child(2){ flex:0 0 290px !important; width:290px !important; }
  .achievement .list .vtem:nth-of-type(6) .box > div:nth-child(3){ flex:0 0 130px !important; width:130px !important; }
}
@media only screen and (max-width:1480px) and (min-width:1000px){
  .achievement .list .vtem li dl dd .box .box_title{ font-size:15px !important; padding:11px 14px !important; }
  .achievement .list .vtem li dl dd .box .box_info,
  .achievement .list .vtem li dl dd .box .box_status{ font-size:13px !important; }
}
/* 증빙 이미지 갤러리 : 한 줄에 4장, 높이를 제한해 펼친 상태의 세로 길이를 줄인다 */
.achievement .cstm_img_wrap{ gap:10px; align-items:flex-start; }
.achievement .cstm_img_wrap > img{
  max-width:calc((100% - 30px) / 4) !important;
  max-height:430px; object-fit:contain; object-position:top;
  border:1px solid #e6ecf2; border-radius:6px; background:#fff;
}
@media only screen and (max-width:999px){
  .achievement .cstm_img_wrap > img{ max-width:calc((100% - 20px) / 3) !important; max-height:300px; }
}
@media only screen and (max-width:600px){
  .achievement .cstm_img_wrap > img{ max-width:calc((100% - 10px) / 2) !important; max-height:240px; }
}

@media only screen and (max-width:999px){
  .achievement .list .vtem li dl dd .box .box_title{ font-size:14px !important; padding:10px 12px !important; }
  .achievement .list .vtem li dl dd .box .box_title .box_no{ font-size:11.5px; }
  .achievement .list .vtem li dl dd .box .box_info,
  .achievement .list .vtem li dl dd .box .box_status{ font-size:12.5px !important; padding:6px 8px; }
}

/* ---------- 4. NARA In Media ---------- */
.pr#media .media-tools{
  display:flex;align-items:center;justify-content:flex-end;gap:8px;
  margin:0 0 18px;flex-wrap:wrap;
}
.pr#media .media-tools .lbl{font-size:14px;color:#5a6472;margin-right:2px;}
.pr#media .media-tools button{
  border:1px solid var(--nr-line);background:#fff;border-radius:999px;
  padding:7px 16px;font-size:14px;color:#333;cursor:pointer;line-height:1.4;
}
.pr#media .media-tools button[aria-pressed="true"]{
  background:var(--nr-accent);border-color:var(--nr-accent);color:#fff;font-weight:600;
}
.pr#media .media-tools button:focus-visible{outline:2px solid var(--nr-accent);outline-offset:2px;}
.pr#media .list ul li .txt .src{
  margin-top:9px;font-size:12.5px;color:#5a6472;letter-spacing:-0.01em;line-height:1.4;
}
.pr#media .list ul li .txt .src::before{content:"출처 · ";}
.pr#media .list ul li.is-hidden{display:none;}
.pr#media .media-more{display:block;width:100%;max-width:320px;margin:28px auto 0;
  border:1px solid var(--nr-line);background:#fff;border-radius:999px;padding:14px 0;
  font-size:15px;color:#333;cursor:pointer;}
.pr#media .media-more:hover{background:#f5f7fa;}

/* ---------- 5. 접근성 툴바 ---------- */
#nr-a11y{
  position:fixed;right:16px;bottom:16px;z-index:9000;opacity:.92;
  display:flex;flex-direction:column;gap:6px;align-items:flex-end;
}
#nr-a11y .grp{
  display:flex;gap:4px;background:rgba(255,255,255,.96);
  border:1px solid var(--nr-line);border-radius:999px;padding:5px;
  box-shadow:0 4px 16px rgba(0,0,0,.12);
}
#nr-a11y button{
  min-width:38px;height:34px;border:0;background:transparent;border-radius:999px;
  font-size:14px;color:#333;cursor:pointer;line-height:1;
}
#nr-a11y button:hover{background:#eef2f7;}
#nr-a11y button[aria-pressed="true"]{background:var(--nr-accent);color:#fff;font-weight:700;}
#nr-a11y button:focus-visible{outline:2px solid var(--nr-accent);outline-offset:2px;}
#nr-a11y .nr-a11y-toggle{
  display:none;width:44px;height:44px;border-radius:999px;
  background:rgba(255,255,255,.97);border:1px solid var(--line);
  box-shadow:0 4px 16px rgba(0,0,0,.14);font-size:17px;font-weight:700;color:var(--accent);
}
@media (max-width:768px){
  #nr-a11y{right:10px;bottom:10px;}
  #nr-a11y .nr-a11y-toggle{display:block;}
  #nr-a11y .grp{display:none;}
  #nr-a11y.is-open .grp{display:flex;}
  #nr-a11y.is-open .nr-a11y-toggle{background:var(--accent);color:#fff;border-color:var(--accent);}
}

/* 글자 크기 3단계 */
html[data-nr-fs="l"] body{font-size:112.5%;}
html[data-nr-fs="xl"] body{font-size:125%;}
html[data-nr-fs="l"] .company .vis .visual-slide .item .txt .stxt,
html[data-nr-fs="xl"] .company .vis .visual-slide .item .txt .stxt{line-height:1.6;}

/* 고대비 */
html[data-nr-contrast="high"] body{background:#000;color:#fff;}
html[data-nr-contrast="high"] .achievement .box,
html[data-nr-contrast="high"] .cerfity .tbl table,
html[data-nr-contrast="high"] .history .vtem,
html[data-nr-contrast="high"] .pr .list ul li{background:#000;color:#fff;border-color:#fff;}
html[data-nr-contrast="high"] a{color:#ffe680;}
html[data-nr-contrast="high"] .company .vis .visual-slide .item .img::after{
  background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.55) 55%,rgba(0,0,0,.2) 100%);
}
html[data-nr-contrast="high"] .achievement .box .box_no{color:#d8d8d8;}

/* ---------- 6. 공통 접근성 보정 ---------- */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--nr-accent);outline-offset:2px;
}
.blind{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;}