@charset "utf-8";


/* 적용페이지 : 분석라운지 -> 정책자금맵 */
/* 26.02.11 맨 아래 '신용사회' 홍보 및 바로가기 기능 배너 - wsj */
.bottom-intro{
    display:flex;
    position: relative;
    letter-spacing: -0.02em;
    border: 1px solid #e3eaf9;
    border-radius: 5px;
    padding: 36px 40px 38px 38px;
    background-color: #f1f6ff;
    margin: 30px 0px 30px 0px;
    justify-content: space-around;
    align-items: center;

    & .ti-left-deco{position: relative;}
    & .ti-left-deco img{width: 90px; height: auto;}
    & .ti-tit{font-size: 22px; font-weight: var(--fwsb); line-height: 0.7; color: #222; margin: 0 0 15px;}
    & .ti-con{font-size: 16px; font-weight: var(--fwsb); color: #2b384f;}
    & .ti-con .dot-list{}
    & .ti-con .dot-list > li{position: relative; padding: 0 0 0 0px;}
    & .ti-con .dot-list > li + li{margin-top: 6px;}
    & .ti-right-deco{position: relative;}
    & .ti-right-deco a{width: 220px;}

    @media (width <= 1050px){
        display: block;
        padding: 30px;
        text-align: center;

        & .ti-left-deco{display: none;}
        & .ti-right-deco{margin-top : 20px;}
    }
    @media (width <= 640px){
        display: block;
        padding: 20px;

        & .ti-tit{font-size: 17px;}
        & .ti-con{word-break: break-all; font-size: 14px;}

    }
}

/* 이메일 인증 팝업 모바일 css 수정 - kjh 2026-02-13 */
@media (width <= 474px){
	#eml_lebeled {
		display: flex;
	    width: 100%;
	    align-items: center;
	}
}

/* 적용페이지 : 기관라운자 -> 지원사업 성과분석 -> 기초자료분석 */
/* 26.04.09 대상기업 목록 그리드 내 '항목추가' 클릭 시 생성되는 필터박스 - wsj */
#customColumnBox{
	postion:relative;
	display: inline-block;

	 & .customColumnPopup{
	   z-index: 1;
	   display: none;
	   width: 180px;
	   position: absolute;
	   top: -240px;
	   left: 865px;
	   border-radius:0px;

	   & .customColumnHeader{
	       height: 30px;
	       align-content: center;
	       background-color: #eaf1fb;
	       box-shadow: inset 0 0 0 1px #d4e4fa;
	       transition: 0.25s;
	       font-weight: var(--fwm);
	   }

	   & .customColumnHeaderSpan{ color: #283e80; font-size: 15px; font-weight: 700; margin-left: 10px; }
       & .customColumnBody{ padding:5px; }
       & .customColumnTable tbody{ display:grid; gap:5px; }
       & .customColumnTable td:first-child{ width: 30px; }
       & .customColumnTable td:first-child input{ cursor:pointer; }
       & .customColumnTable td:second-child{ width: 110px; }

	 }
}

/* BASA_진단결과(행안부) - 관심기업버튼  */
.diag-item .book {
	text-align: right;
}

.diag-item .book .bookmark_btn {
	display: inline-block;
	text-align: center;
	border: 1px solid #5981D9;
    border-radius: 10px;
	line-height: 32px;
	min-width: 115px;
	margin-bottom: 16px;
	transition: 0.3s;
	padding: 0 12px;
	color: #555555;
}

.diag-item .book .bookmark {
	font-weight: 400;
	font-size: 14px;
}

.diag-item .book .bookmark::before {
	content: '';
	display: inline-block;
	width: 18px;
	height: 17px;
	background-image: url(/src/img/sub/ico_bluestar-off.png);
	background-repeat: no-repeat;
	background-size: contain;
	vertical-align: middle;
	margin-bottom: 4px;
	margin-right: 8px;
}

.diag-item .book .bookmark_btn:hover{
    color: #fff; background-color: #5981d9; border-color: transparent;
}

.diag-item .book .bookmark_btn.on .bookmark::before{
	background-image: url(/src/img/sub/ico_bluestar.png);
}

.diag-item .book .bookmark_btn:hover .bookmark::before{
	background-image: url(/src/img/sub/ico_bluestar-off.png);
}

/* BASA_진단결과(행안부) - esg 경영진단 */
 :root {
    --navy: #1B3A6B;
    --cyan: #00B2C8;
    --green: #009E7A;
    --orange: #E87722;
    --red: #D94F4F;
    --border-light: #F1F3F5;
    --border-med: #E9ECEF;
    --gray-bg: #F8FAFC;
    --gray-text: #6B7280;
    --dark-text: #1F2937;
  }
  .esg-section {
    max-width: 1000px;
    background: #fff;
    overflow: hidden;
  }

  .esg-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-light);
  }
  .header-left {
    font-size: 15px;
    font-weight: 800;
    color: var(--navy);
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .header-left::before {
    content: '';
    width: 3px; height: 14px;
    background: var(--cyan);
    border-radius: 2px;
  }

  .esg-card-content {
    display: flex;
    border-bottom: 1px solid var(--border-light);
  }

  .col-left {
    flex: 1;
    padding: 24px;
    border-right: 1px solid var(--border-light);
  }
  .my-label { font-size: 15px; margin-bottom: 8px; }
  .my-val-group { display: flex; align-items: baseline; gap: 6px; margin-bottom: 16px; }
  .my-val { font-size: 40px; font-weight: 800; color: var(--navy); letter-spacing: -1px; }
  .my-unit { font-size: 14px; color: var(--gray-text); font-weight: 500; }

  .integrated-comment {
    font-size: 15px;
    color: #4E5968;
    line-height: 1.6;
    padding: 14px;
    background: var(--gray-bg);
    border-radius: 8px;
  }
  .integrated-comment strong { color: var(--navy); }

  .col-right {
    flex: 1.2;
    padding: 24px;
    display: flex;
    flex-direction: column;
  }

  .filter-header-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  .filter-title { font-size: 15px; }
  .filter-info-tags { display: flex; gap: 4px; }
  .tag-info {
    background: var(--gray-bg);
    border: 1px solid var(--border-med);
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
  }

  .info-group { margin-bottom: 16px; position: relative; }

  .gauge-top-center {
      text-align: center;
      margin-bottom: 8px;
  }
  .rank-val-compact {
      font-size: 18px;
      color: var(--orange);
      font-weight: 800;
  }

  .gauge-track {
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, #009E7A 0%, #00B2C8 30%, #F5A623 70%, #D94F4F 100%);
    position: relative;
    margin: 0 4px 6px;
  }
  .gauge-pointer {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(-50%, -50%);
    width: 12px; height: 12px;
    background: #fff;
    border: 3px solid var(--navy);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    cursor: pointer;
  }

  /** tooltip**/
  .gauge-pointer::before {
  	content: attr(data-tooltip);
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: rgba(27,58, 107, 0.95);
    color: #fff;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    pointer-events: none;
    border-radius:6px;
    z-index: 10;
  }

  .gauge-pointer::after {
  	content: '';
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    border: 5px solid rgba(27, 58, 107, 0.95) transparent transparent transparent;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    pointer-events: none;
    z-index: 10;
  }

  .gauge-pointer:hover::before,
  .gauge-pointer:hover::after {
  	opacity:1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }

  .gauge-footer-labels {
      display: flex;
      justify-content: space-between;
      padding: 0 2px;
  }
  .footer-lbl {
      font-size: 14px;
      font-weight: 700;
      color: var(--gray-text);
  }
  .lbl-center { position: absolute; left: 50%; transform: translateX(-50%); }

  .comparison-plain-text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--gray-text);
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border-light);
  }
  .comparison-plain-text strong { color: var(--dark-text); font-weight: 700; }
  .highlight-text { color: var(--green); font-weight: 700; }

  .esg-recommendations { padding: 20px 24px 28px; }
  .recommend-title {
    font-size: 15px;
    margin-bottom: 16px;
  }

  .recommend-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .recommend-card {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: #fff;
    transition: all 0.2s;
    cursor: pointer;
  }
  .recommend-card:hover {
    border-color: var(--cyan);
    background: var(--gray-bg);
  }

  .card-icon {
    font-size: 14px;
    margin-right: 10px;
    flex-shrink: 0;
  }

  .card-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    font-size: 14px;
  }

  .card-name {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .card-divider {
    color: var(--border-med);
    font-size: 10px;
  }

  .card-org {
    color: var(--gray-text);
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 14px;
  }

  /* 혜택 텍스트를 네이비 버튼 스타일로 변경 */
  .card-benefit {
    font-size: 14px;
    font-weight: 500;
    width: 80px;
    text-align: center;
    color: #fff;
    background-color: var(--navy);
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
  }

  .esg-footer {
    background: var(--gray-bg);
    padding: 10px;
    font-size: 10.5px;
    color: var(--gray-text);
    text-align: center;
  }

@media (width <= 768px){
	.esg-section {
    width: 100%;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
  }

  .esg-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-light);
  }
  .header-left {
    font-size: 14px;
    font-weight: 800;
    color: var(--navy);
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .header-left::before {
    content: '';
    width: 3px; height: 14px;
    background: var(--cyan);
    border-radius: 2px;
  }

	/* 모바일 대응을 위해 세로 배치로 변경 */
  .esg-card-content {
    display: flex;
    flex-direction: column;
  }

  .col-left {
    padding: 20px;
    border-bottom: 1px solid var(--border-light);
  }
  .my-label { font-size: 14px; margin-bottom: 6px; }
  .my-val-group { display: flex; align-items: baseline; gap: 4px; margin-bottom: 12px; }
  .my-val { font-size: 32px; font-weight: 800; color: var(--navy); letter-spacing: -1px; }
  .my-unit { font-size: 12px; color: var(--gray-text); font-weight: 500; }

  .integrated-comment {
    font-size: 13px;
    color: #4E5968;
    line-height: 1.5;
    padding: 12px;
    background: var(--gray-bg);
    border-radius: 8px;
  }
  .integrated-comment strong { color: var(--navy); }

  .col-right {
    padding: 20px;
    display: flex;
    flex-direction: column;
  }

  .filter-header-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
  }
  .filter-title { font-size: 14px; }
  .filter-info-tags { display: flex; gap: 4px; }
  .tag-info {
    background: var(--gray-bg);
    border: 1px solid var(--border-med);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    color: var(--navy);
  }

  .info-group { margin-bottom: 12px; position: relative; }

  .gauge-top-center {
      text-align: center;
      margin-bottom: 6px;
  }
  .rank-val-compact {
      font-size: 16px;
      color: var(--orange);
      font-weight: 800;
  }

  .gauge-track {
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, #009E7A 0%, #00B2C8 30%, #F5A623 70%, #D94F4F 100%);
    position: relative;
    margin: 0 4px 6px;
  }
  .gauge-pointer {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(-50%, -50%);
    width: 10px; height: 10px;
    background: #fff;
    border: 2px solid var(--navy);
    border-radius: 50%;
    cursor: pointer;
  }

  /** tooltip**/
  .gauge-pointer::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: rgba(27,58, 107, 0.95);
    color: #fff;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    pointer-events: none;
    border-radius:6px;
    z-index: 10;
  }

  .gauge-pointer::after {
    content: '';
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    border: 5px solid rgba(27, 58, 107, 0.95) transparent transparent transparent;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    pointer-events: none;
    z-index: 10;
  }

  .gauge-pointer:hover::before,
  .gauge-pointer:hover::after {
    opacity:1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }

  .gauge-footer-labels {
      display: flex;
      justify-content: space-between;
      padding: 0 2px;
  }
  .footer-lbl {
      font-size: 10px;
      font-weight: 700;
      color: var(--gray-text);
  }

  .lbl-center { position: absolute; left: 50%; transform: translateX(-50%); }

  .comparison-plain-text {
    font-size: 13px;
    line-height: 1.5;
    color: var(--gray-text);
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid var(--border-light);
  }
  .comparison-plain-text strong { color: var(--dark-text); }
  .highlight-text { color: var(--green); font-weight: 700; }

  /* 추천 섹션 모바일 최적화 */
  .esg-recommendations { padding: 16px 20px 24px; border-top: 1px solid var(--border-light); }
  .recommend-title {
    font-size: 14px;
    margin-bottom: 12px;
  }

  .recommend-grid {
    display: flex;
    flex-direction: column; /* 1열 배치 */
    gap: 8px;
  }

  .recommend-card {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: #fff;
    cursor:pointer;
  }

  .recommend-card:hover {
    border-color: var(--cyan);
    background: var(--gray-bg);
  }

  .card-icon {
    font-size: 14px;
    margin-right: 10px;
  }

  .card-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
  }

  .card-name {
    font-size: 13px;
    font-weight: 600;
  }

  .card-org {
  	display: none;
  }

  .card-benefit {
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    background-color: var(--navy);
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: auto;
  }

  .esg-footer {
    background: var(--gray-bg);
    padding: 10px;
    font-size: 10px;
    color: var(--gray-text);
    text-align: center;
  }
}

/* BASA_진단결과(행안부) - 투자유치 현황  */
.ivs_info_box {
	border: 1px dashed #ccc;
	border-radius: 8px;
	padding: 20px 15px;
	text-align: center;
	background-color: #fff;
	max-width: 650px;
	line-height: 1.6;
}

.ivs_info_box p {
	margin: 0 0 5px 0;
}

.report-link {
	align-items: center;
	justify-content: center;
	margin-top: 10px;
	font-size: 14px;
	cursor: pointer;
}

.report-link svg {
	width: 16px;
	height: 16px;
	stroke: #00c49a;
}