@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

/* =====================================================================
   i-pro Cloud 브랜드 프레임 오버레이 — 하위(게시판) 페이지용
   기존 KSO_Infinity(2017) 레이아웃 위에 얹어 첫 화면과 톤을 통일한다.
   원칙: 마크업은 건드리지 않고 이 파일만 마지막에 로드해 캐스케이드로 이긴다.
   되돌리기: layout.html의 <link> 한 줄만 지우면 원상복구.
   ===================================================================== */
:root{
  --dt-navy:#1D3482; --dt-navy-900:#16255d; --dt-navy-950:#101426;
  --dt-green:#81B440; --dt-green-deep:#4b7f22;
  --dt-ink:#1a2230; --dt-ink-soft:#5b6472;
  --dt-line:#e6e9f0; --dt-bg:#f6f8fc;
}

/* ---------- 타이포그래피 ---------- */
body,.kso-contents,#kso-nav,#kso-footer,#kso-copyright,
button,input,select,textarea,.dropdown-menu{
  font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif !important;
  word-break:keep-all;
}
/* KSO의 .font-en(영문 디스플레이 폰트)이 첫 화면과 달라 보이는 원인 →
   메뉴명·제목·푸터 라벨까지 전부 Pretendard로 통일 (요소에 직접 걸어 상속 우회) */
.font-en,
#kso-nav .navbar-nav>li>a,#kso-nav .navbar-nav>li>a span,
.sub-head-title h1.font-en,#kso-footer .font-en,.dropdown-menu>li>a{
  font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif !important;
}

/* ---------- KSO 테마색 훅 재타깃 (곳곳의 강조색) ---------- */
.pointColor,.conceptColor,a.pointHover:hover,.pointHover:hover{color:var(--dt-navy) !important}
.pointBgColor{background-color:var(--dt-navy) !important;border-color:var(--dt-navy) !important;color:#fff !important}
.deco-line.pointColor span,.deco-line.font-en span{color:var(--dt-green) !important}

/* =========================================================
   헤더 / 네비게이션 — 첫 화면과 동일하게 "밝은 헤더" 로 통일
   (랜딩 헤더 = rgba(246,248,252,.86) + blur, 컬러 로고, 네이비 텍스트)
   ========================================================= */
/* 헤더 바 높이를 첫 화면 네비(68px)와 동일하게 맞춤 */
#kso-header,#kso-nav,#kso-nav .navbar.nav-md,
#kso-nav .header-full,#kso-nav .navbar-header,#kso-nav .navbar-collapse{
  height:68px !important;min-height:68px !important}
/* 메뉴 글자를 68px 바 안에서 세로 중앙정렬 (KSO가 span에 큰 line-height/패딩을 줘 아래로 처지는 문제 해결) */
#kso-nav .navbar-nav>li>a{
  display:flex !important;align-items:center;justify-content:center;
  height:68px !important;padding:0 14px !important;line-height:1 !important}
#kso-nav .navbar-nav>li>a>span{
  line-height:1 !important;position:static !important;top:auto !important;margin:0 !important;padding:0 !important}
/* 로고: 옛 이미지 숨기고 새 i-pro Cloud 컬러 로고를 배경으로. 높이 38px(첫 화면과 동일) */
#kso-header .sitelogo{
  display:inline-block;width:170px;height:38px;margin-top:15px;
  background:url(/landing/logo-ipro-cloud.png) left center/contain no-repeat;
}
#kso-header .sitelogo img{display:none !important}

/* 네비: 항상 밝은 반투명 바 (랜딩과 동일 톤). 하단 테두리는 밴드(.sub-promotion)가 담당 → 여기선 없음(이중선 방지) */
#kso-nav,#kso-nav.sticked{
  background:rgba(246,248,252,.9) !important;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
#kso-nav.sticked{box-shadow:0 6px 24px rgba(16,20,46,.08)}
/* 메뉴 글자색·호버색을 첫 화면 네비(.nav-links)와 동일하게:
   기본 --ink-soft(#4b5473, 500) → 호버/활성 --ink(#1c2340). 그린/네이비 강조 안 씀 */
#kso-nav .navbar-nav>li>a,
#kso-nav .navbar-nav>li>a span,
#kso-nav.sticked .navbar-nav>li>a{color:#4b5473 !important;font-weight:500}
#kso-nav .navbar-nav>li>a:hover,#kso-nav .navbar-nav>li>a:hover span,
#kso-nav .navbar-nav>li.active>a,#kso-nav .navbar-nav>li.active>a span,
#kso-nav .navbar-nav>li.open>a,#kso-nav .navbar-nav>li.open>a span{color:#1c2340 !important}
#kso-nav .navbar-nav>li.active>a{font-weight:700}

/* 드롭다운 메뉴 = 부드러운 카드 */
.dropdown-menu{border:0 !important;border-radius:12px;padding:8px;
  box-shadow:0 14px 34px rgba(16,20,46,.14) !important;margin-top:6px}
.dropdown-menu>li>a{border-radius:8px;padding:9px 14px;color:var(--dt-ink) !important;font-weight:500}
.dropdown-menu>li>a:hover{background:var(--dt-bg) !important;color:var(--dt-navy) !important}
.dropdown-menu.active-arrow>li.active>a{color:var(--dt-green) !important;font-weight:700}

/* 고객지원 메뉴에서 '데모요청'(board_Demo)·'고객의소리'(board_Customer) 항목 숨김
   (미사용 게시판 — 첫 화면 드로어에서도 제외한 것과 동일 방침) */
#kso-nav .dropdown-menu li:has(> a[href*="board_Demo"]),
#kso-nav .dropdown-menu li:has(> a[href*="board_Customer"]),
#xs-menu li:has(> a[href*="board_Demo"]),
#xs-menu li:has(> a[href*="board_Customer"]),
.side-nav a[href*="board_Demo"],.side-nav a[href*="board_Customer"]{display:none !important}

/* =========================================================
   서브 상단 밴드 — 400px 배경이미지 → 밝은 슬림 밴드 (랜딩과 동일한 밝은 상단)
   ========================================================= */
.sub-promotion{
  height:80px !important;min-height:80px !important;
  background:var(--dt-bg) !important;
  border-bottom:1px solid var(--dt-line);
  position:relative;overflow:hidden;
}
/* 첫 화면의 그린 하이라이트 감성을 아주 은은하게 반영 */
.sub-promotion::after{
  content:"";position:absolute;right:-110px;top:-150px;width:340px;height:340px;
  background:radial-gradient(circle,rgba(129,180,64,.14),transparent 62%);pointer-events:none;
}
.sub-promotion .displaytablecell{vertical-align:middle !important}
.sub-head-title{padding-bottom:0}
.sub-head-title h1,.sub-head-title h1.font-en{
  color:var(--dt-navy) !important;font-weight:800;letter-spacing:-.02em;font-size:1.8rem;margin:0;
}
.sub-head-title p{color:var(--dt-ink-soft) !important;margin-top:6px;font-size:.95rem}

/* =========================================================
   본문 영역 — 좌측 서브메뉴 pill + 컨텐츠
   ========================================================= */
.kso-contents{background:#fff}
.aside-full-menu .nav-pills{border-bottom:1px solid var(--dt-line);padding-bottom:2px}
.aside-full-menu .nav-pills>li>a{color:var(--dt-ink-soft);font-weight:600;border-radius:8px 8px 0 0}
.aside-full-menu .nav-pills>li.active>a,
.aside-full-menu .nav-pills>li>a.pointHover:hover{
  color:var(--dt-navy) !important;background:transparent !important;
  border-bottom:2px solid var(--dt-green);border-radius:0}
.aside-full-menu .nav-pills>li.second-menu>a{color:var(--dt-navy);font-weight:800}

/* 버튼 톤 (게시판/폼 공통) */
.btn-kso.pointBgColor,.btn-kso-default.pointBgColor{border-radius:10px}
a.btn-kso,button.btn-kso{border-radius:10px}

/* =========================================================
   푸터
   ========================================================= */
#kso-footer{background:var(--dt-navy-900) !important;color:#fff;padding-top:44px;padding-bottom:24px}
#kso-footer .footer-color,#kso-footer p,#kso-footer li,#kso-footer .company-info{color:rgba(255,255,255,.74) !important}
#kso-footer h5,#kso-footer .deco-line span{color:#fff !important}
#kso-footer .deco-line.pointColor span{color:var(--dt-green) !important}
#kso-footer .fa{color:var(--dt-green) !important}
/* 푸터 로고 → 화이트 로고 교체 */
#kso-footer .col-md-3 img{content:url(/landing/logo-ipro-cloud-white.png);max-height:50px;width:auto}
#kso-copyright{background:var(--dt-navy-950) !important;color:rgba(255,255,255,.5) !important}
#kso-copyright .text-center{color:rgba(255,255,255,.55) !important;letter-spacing:.04em;font-size:.8rem}

/* =========================================================
   게시판 목록/표/페이징/사이드 — 텍스트 요소를 랜딩 톤으로 (v3 taste 패스)
   ※ 게시글 제목의 인라인 색(#EE2222 등)은 작성자 의도적 강조라 건드리지 않음
   ========================================================= */
/* 좌측 사이드 메뉴 */
.aside .page-menu.line-point span,.aside h3 span{color:var(--dt-navy) !important;font-weight:800}
.side-nav .list-group-item{
  color:var(--dt-ink-soft) !important;border-color:var(--dt-line) !important;
  border-left:3px solid transparent;font-weight:500;transition:color .15s,border-color .15s}
.side-nav .list-group-item:hover{color:var(--dt-navy) !important}
.side-nav .list-group-item.on,.side-nav .list-group-item.active{
  color:var(--dt-navy) !important;font-weight:700;
  border-left-color:var(--dt-green) !important;background:var(--dt-bg) !important}

/* 목록 표 */
.table.restlist>thead>tr>th,.table>thead>tr>th{
  border-bottom:2px solid var(--dt-line) !important;color:var(--dt-ink) !important;font-weight:700}
.table.restlist>thead>tr>th a,.table>thead>tr>th a{color:var(--dt-ink) !important}
.table.restlist>tbody>tr>td,.table>tbody>tr>td{border-color:var(--dt-line) !important;vertical-align:middle}
.table-hover>tbody>tr:hover{background:var(--dt-bg) !important}
.table.restlist>tbody>tr.active>td,.table>tbody>tr.active{background:var(--green-soft,#e9f2dc) !important}
.table.restlist>tbody>tr.active td strong{color:var(--dt-navy)}

/* 페이징 */
.pagination>li>a,.pagination>li>span{
  color:var(--dt-navy) !important;border-color:var(--dt-line) !important;margin:0 2px;border-radius:8px !important}
.pagination>li>a:hover{color:var(--dt-green-deep) !important;border-color:var(--dt-green) !important;background:var(--dt-bg) !important}
.pagination>li.active>a,.pagination>li.active>span,.pagination>li.active>a:focus{
  background:var(--dt-navy) !important;border-color:var(--dt-navy) !important;color:#fff !important}

/* 버튼/검색 폼 — radius 통일 */
.btn-kso,a.btn,button.btn,.btn-default,.board-search .btn{border-radius:10px !important}
.board-search select,.board-search input,.form-control{border-radius:8px !important;border-color:var(--dt-line) !important}
.form-control:focus{border-color:var(--dt-green) !important;box-shadow:0 0 0 3px rgba(129,180,64,.15) !important}

/* 접근성: 모션 최소화 선호 시 애니메이션 억제 (KSO animate.css 계열) */
@media (prefers-reduced-motion:reduce){
  [class*="kso-cl"],[class*="kso-ft"],.animated{animation:none !important;transition:none !important}
}