/* dnbsoft.com 회사소개(/about) 스타일 — 2026-10-15 섹션화 2차 때 design/page_101.html 의 <style> 을 그대로 옮겼다(템플릿 안 중괄호는 Template_ 가 먹을 수 있다).
   링크는 design/page_101.html 맨 위(예전 <style> 자리). 맨 아래 '섹션화 맞춤' 은 조각의 서식 값(<b>·<ul>)을 옛 모양에 맞추는 규칙. */
/* ===== DNBSOFT 회사소개 (반응형 + EN/KO) ===== */
.dnba{background:#EEF0F3;font-family:'Pretendard','Pretendard Variable',-apple-system,BlinkMacSystemFont,sans-serif;color:#374151;letter-spacing:-.01em}
.dnba *{box-sizing:border-box}
.dnba a{transition:.15s}
.dnba-ph{display:flex;align-items:center;justify-content:center;text-align:center;color:#9AA6B4;font-size:13px;font-weight:600;letter-spacing:.02em;background:linear-gradient(135deg,#414F62,#39475A)}
.dnba-btn:hover{background:#A50D26!important;color:#fff}
/* 지적자산·인증 탭 갤러리 */
.dna-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.dna-tab{background:#3F4B5C;border:1px solid #4A576A;color:#C4CAD3;font-family:inherit;font-size:14px;font-weight:700;padding:9px 18px;border-radius:8px;cursor:pointer;transition:.15s}
.dna-tab:hover{border-color:#8B93A0;color:#fff}
.dna-tab.active{background:#C8102E;border-color:#C8102E;color:#fff}
.dna-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
@media (max-width:900px){.dna-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.dna-grid{grid-template-columns:repeat(2,1fr)}}
.dna-card{margin:0;background:#3F4B5C;border:1px solid #45536A;border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.dna-img{display:flex;align-items:center;justify-content:center;background:#fff;aspect-ratio:3/4;overflow:hidden;padding:4px;box-sizing:border-box}
.dna-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;object-position:center;display:block;margin:auto;filter:none!important;-webkit-filter:none!important}
.dna-card figcaption{padding:12px 14px;font-size:13px;font-weight:700;color:#EDEFF2;line-height:1.45;text-align:center}
.dna-panel:not(.open) .dna-grid .dna-card:nth-child(n+11){display:none}
.dna-more{margin-top:20px;display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid #556173;color:#C4CAD3;font-size:13px;font-weight:700;padding:9px 18px;border-radius:8px;cursor:pointer;font-family:inherit;transition:.15s}
.dna-more:hover{border-color:#8B93A0;color:#fff}
.dna-more .ll{display:none}
.dna-panel.open .dna-more .ml{display:none}
.dna-panel.open .dna-more .ll{display:inline}
/* 연혁 스크롤 + 현재 연도 하이라이트 */
.tl-scroll{scrollbar-width:none;-ms-overflow-style:none}
.tl-scroll::-webkit-scrollbar{display:none;width:0;height:0}
.tl-scroll > div{transition:opacity .25s}
.tl-scroll > div > div:first-child > span:first-child{transition:transform .25s,background .25s}
.tl-scroll > div > div:last-child > div:first-child{transition:color .25s}
.tl-scroll > div:not(.active){opacity:.6}
.tl-scroll > div.active > div:first-child > span:first-child{background:#C8102E!important;transform:scale(1.4)}
.tl-scroll > div.active > div:last-child > div:first-child{color:#C8102E!important}
/* 카카오맵(퍼가기)은 컬러 + 반응형 */
.root_daum_roughmap{width:100%!important}
.root_daum_roughmap img{filter:none!important;-webkit-filter:none!important}
.root_daum_roughmap .wrap_map{width:100%!important;height:360px!important}
/* ---- 섹션화 맞춤(2026-10-15) ----
   textarea 'inline' 의 **굵게** 는 <b> 로 나온다 — 옛 <strong style="color:#FFFFFF"> 과 같게(style.css 의 strong 굵기 800, 연구개발 띠는 흰 글자). */
.dnba b{font-weight:800}
.sh-secbox-ab_rnd b{color:#FFFFFF}
/* 문단의 '두 번째 굵은 글자 초록'(accent2) — 옛 '1차 개발을 완료' <strong style="color:#6FCF97"> */
.sh-secbox-ab_rnd .ab-acc2 b:nth-of-type(2){color:#6FCF97}
/* 연혁 내용 — paras 서식의 "- " 줄(<ul><li>)을 옛 <div>· 항목</div> 줄(5px 간격)과 같게 */
.tl-scroll ul{display:flex;flex-direction:column;gap:5px;margin:0;padding:0;list-style:none}
.tl-scroll li{margin:0;padding:0}
.tl-scroll li::before{content:"· "}