/* 계획 05: RE100 개편 신규 화면 공통 스타일. 색은 variables.css 토큰만 사용. */
/* ==================================================================
   검색조건 통일 — Figma v2 search_box
   모든 검색조건(srh-filter*)에 적용: 항목 사이 20px, 라벨과 입력 사이 12px, 입력끼리 10px, 라벨 16px.
   새 화면은 components/common/SearchFilter(SearchField) 를 쓴다.
   ================================================================== */
[class^=srh-filter] > ul { gap: .5rem 1rem; }
[class^=srh-filter] > ul > li { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
[class^=srh-filter] > ul > li label,
[class^=srh-filter] > ul > li .srh-tit,
[class^=srh-filter] > ul > li > span.tit { margin: 0; font-size: .8rem; line-height: 1.2rem; color: var(--fg-info-text); white-space: nowrap; }
[class^=srh-filter] > ul > li > label,
[class^=srh-filter] > ul > li > span.srh-tit,
[class^=srh-filter] > ul > li > span.tit { margin-right: .1rem; }
[class^=srh-filter] > ul > li .form-check label { color: var(--fg-body); }
/* 입력 사이 간격은 gap 이 정한다. 화면마다 붙여 둔 여백 유틸은 지운다 */
[class^=srh-filter] > ul > li .mgr5, [class^=srh-filter] > ul > li .mgr10 { margin-right: 0 !important; }
[class^=srh-filter] > ul > li .mgl5, [class^=srh-filter] > ul > li .mgl10 { margin-left: 0 !important; }
[class^=srh-filter] > ul > li > .dateBtn { margin-left: 0; }
[class^=srh-filter] > ul > li .calendar-picker { gap: .5rem; align-items: center; }
/* 폭 100% 입력은 라벨 옆에 두고 정해진 폭으로(라벨이 위로 떨어지지 않게) */
/* 검색어 입력(폭 100%)은 라벨 옆에서 버튼을 뺀 남은 폭을 채운다(검색어만 있는 게시판, 기업명 등) */
[class^=srh-filter] > ul > li:has(> input.InpSel-w100) { flex: 1 1 18rem; flex-wrap: nowrap; }
[class^=srh-filter] > ul > li > input.InpSel-w100 { width: auto !important; flex: 1 1 auto; min-width: 10rem; }
/* 카드 안 검색조건 바로 아래 표는 띄운다 */
.cont .search-filter:has(+ * .tui-grid-container), .cont .search-filter:has(+ .tui-grid-container) { margin-bottom: .75rem; }
/* 공통 컴포넌트(SearchFilter): 조회 버튼 등은 오른쪽 끝 */
.search-filter { display: flex; align-items: center; gap: .5rem 1rem; }
.search-filter > ul { display: flex; flex: 1; flex-wrap: wrap; align-items: center; }
.search-filter-actions { display: inline-flex; flex: none; align-items: center; gap: .5rem; margin-left: auto; }
.sub-wrap > .search-filter { margin-bottom: 1.25rem; }
/* ==================================================================
   증감(오름·내림) 표시 통일
   색: 오름 var(--color-up) 빨강, 내림 var(--color-down) 파랑
   아이콘: 값 앞의 채운 삼각형(xeicon caret-up \e92f / caret-down \e935)
   표·그리드·KPI·대시보드 어디든 같다. 새 코드는 .delta-up / .delta-down (DeltaText) 을 쓴다.
   ================================================================== */
.delta-up, .up-down-count.up, .up-down-count.up > span, div[class*=tbl-st] table td em.up, .up-txt, .compare-up > span, .c-up,
.graph-list-type3 .electric-charges-num li span.up, .chart.updown2 .dataLabel > span, .chart.updown2 .dataLabel > span > em,
.up-down-arrow-up { color: var(--color-up) !important; }
.delta-down, .up-down-count.down, .up-down-count.down > span, div[class*=tbl-st] table td em.down, .down-txt, .compare-down > span, .c-down,
.graph-list-type3 .electric-charges-num li span.down, .chart.updown2 .dataLabel > span.down, .chart.updown2 .dataLabel > span.down > em,
.up-down-arrow-down { color: var(--color-down) !important; }
.delta-up, .delta-down { white-space: nowrap; }
.delta-up:before, .delta-down:before, .up-down-count.up:before, .up-down-count.down:before,
div[class*=tbl-st] table td em.up:before, div[class*=tbl-st] table td em.down:before,
.icon-box-wrap10 > ul > li [class^=cnt] .up-down.up:before, .icon-box-wrap10 > ul > li [class^=cnt] .up-down.down:before,
.flex-col2 > div > span:nth-child(2) > span > em.up:before, .flex-col2 > div > span:nth-child(2) > span > em.down:before {
  display: inline-block; margin-right: .15rem; font-family: "xeicon"; font-size: .75em; font-weight: 400; line-height: 1; vertical-align: .05em; }
.delta-up:before, .up-down-count.up:before, div[class*=tbl-st] table td em.up:before,
.icon-box-wrap10 > ul > li [class^=cnt] .up-down.up:before,
.flex-col2 > div > span:nth-child(2) > span > em.up:before { content: "\e92f"; color: var(--color-up); }
.delta-down:before, .up-down-count.down:before, div[class*=tbl-st] table td em.down:before,
.icon-box-wrap10 > ul > li [class^=cnt] .up-down.down:before,
.flex-col2 > div > span:nth-child(2) > span > em.down:before { content: "\e935"; color: var(--color-down); }
/* 아이콘은 값 앞에만 둔다(표의 em 은 뒤에 붙던 것을 앞으로) */
div[class*=tbl-st] table td em.up:after, div[class*=tbl-st] table td em.down:after { content: none; }
.box-style6 .left .box .txt span.up, .box-style6 .right .box .txt span.up,
.top-box .left .box .txt span.up, .top-box .right .box .txt span.up { background: var(--color-up); }
.tit-flex { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.tit-flex .titT2 { margin-bottom: 0; }
/* 돋보기 아이콘: Line Awesome 의 la-search 는 손잡이가 왼쪽 아래를 향한다. 흔한 모양(오른쪽 아래)으로 뒤집는다 */
.las.la-search { display: inline-block; transform: scaleX(-1); }
/* 제목 바로 옆에 선택 버튼 등을 붙일 때 */
.tit-flex.is-start { justify-content: flex-start; gap: .75rem; }
/* 제목 옆 부제·설명: 회색 알약 뱃지(Figma v2) */
.tit-badge { display: inline-block; margin-left: .5rem; padding: 0 .6rem; border-radius: 20px; background: #F1F2F7; font-style: normal;
  font-size: .65rem; font-weight: 400; line-height: 1.3rem; color: #555; vertical-align: middle; white-space: nowrap; }
.tit-badge + .tit-badge { margin-left: .3rem; }
/* 제목 + 버튼 줄(.tit-btns-wrap)은 tit 로 시작하는 클래스에 margin:0·flex:1 을 준다. 뱃지는 그 규칙에서 빼고 위 간격을 그대로 쓴다 */
.tit-btns-wrap .tit-badge { flex: none; margin-left: .5rem; }
.tit-btns-wrap .tit-badge + .tit-badge { margin-left: .3rem; }
.tit-flex .unit { font-size: .7rem; color: var(--fg-info-text); font-weight: 400; margin-left: .25rem; }
.tit-flex .unit-txt { margin-left: auto; font-size: .7rem; color: var(--fg-info-text); text-align: right; }
/* KPI 띠: 네 칸 한 묶음형 + 값 막대 아래 보조 문구(Figma v2) */
.box-style6.is-flat { margin-bottom: 1.25rem; }
/* 카드의 마지막 요소면 아래 여백이 카드 안쪽 여백과 겹치므로 없앤다 */
.cont > .box-style6.is-flat:last-child { margin-bottom: 0; }
/* 부정거래 신고 대상 선택 창의 안내 한 줄 */
.rpdc-trt-guide { margin: .25rem 0 .75rem; font-size: .8rem; line-height: 1.5; color: var(--fg-body); }
.box-style6.is-flat > .right.box_r { width: 100%; }
.box-style6 .box .sub { margin-top: .6rem; min-height: 1.2rem; font-size: .8rem; line-height: 1.2rem; color: var(--fg-body); }
.box-style6 .box .sub em { font-style: normal; }
/* 떨어진 흰 버튼 중 하나 고르기(3·6·12개월, 기준 기간) */
.choice-btns { display: inline-flex; flex-wrap: wrap; gap: .5rem; }
.choice-btns > button { height: 2rem; padding: 0 .8rem; border: 1px solid #ccc; border-radius: .3rem; background: #fff;
  color: var(--fg-body); font-size: .75rem; line-height: 1; cursor: pointer; }
.choice-btns > button:hover { border-color: var(--fg-point); }
.choice-btns > button.on { border-color: var(--fg-point); background: #f4f3fd; color: var(--fg-point); font-weight: 600; }
.tit-flex .choice-btns > button { height: 1.6rem; padding: 0 .6rem; }
/* 아이콘 원 + 라벨 + 값 + 구분선 + 보조 문구 타일 */
.stat-tiles { display: grid; grid-template-columns: 1fr; gap: .6rem; }
.stat-tiles.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat-tile { display: flex; gap: .7rem; padding: .9rem 1rem; border: 1px solid var(--fg-card-border); border-radius: var(--fg-card-radius); background: #fff; }
.stat-tile .ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; }
.stat-tile .ico.tone-purple { background: #ecebfc; color: #6b63d6; }
.stat-tile .ico.tone-blue { background: #e4ecfd; color: #3c66d9; }
.stat-tile .ico.tone-yellow { background: #fff1cc; color: #e39a0b; }
.stat-tile .ico.tone-green { background: #dff5e3; color: #2f9e52; }
/* 이행수단 색(보라·파랑·노랑·초록)과 겹치지 않는 지표용 */
.stat-tile .ico.tone-slate { border: 1px solid #e3e6ee; background: #fff; color: #4b5468;
  box-shadow: 0 1px 2px rgba(35, 43, 54, .05); }
/* 회색 아이콘 판은 조달 상세의 아이콘 판과 같은 둥근 사각형이다 */
.stat-tile .ico.tone-slate { border-radius: .5rem; }
.stat-tile .body { flex: 1; min-width: 0; }
.stat-tile .lbl { font-size: .8rem; font-weight: 600; line-height: 2rem; color: var(--fg-title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-tile .val { padding-bottom: .4rem; border-bottom: 1px solid #e6e8f0; font-size: 1.2rem; font-weight: 700; line-height: 1.6rem;
  background: linear-gradient(90deg, #5a4fd6 0%, #b04fd6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat-tile .val em { margin-left: .3rem; font-style: normal; font-size: .75rem; font-weight: 500; -webkit-text-fill-color: #555; }
.stat-tile .sub { margin-top: .4rem; min-height: 1.1rem; font-size: .7rem; line-height: 1.5; color: #555; }
/* 타일 설명 줄: 항목은 왼쪽, 값은 오른쪽 끝. 한 줄에 한 가지 */
.stat-tile .sub .fact, .gm-last .fact { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; white-space: nowrap; }
.stat-tile .sub .fact > b, .gm-last .fact > b { font-weight: 500; color: var(--fg-body); }
/* 좁은 화면: 값이 길면 카드 밖으로 나가 화면이 가로로 밀린다. 값만 줄을 바꾼다(이름은 한 줄) */
@media (max-width: 768px) {
  .stat-tile .sub .fact > b, .gm-last .fact > b { min-width: 0; white-space: normal; text-align: right; word-break: keep-all; }
}
/* 히트맵 테두리 설명 */
.heat-marks { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-top: .6rem; font-size: .7rem; color: #555; }
.heat-marks i { display: inline-block; width: .9rem; height: .6rem; margin-right: .3rem; border: 2px solid; border-radius: 2px; vertical-align: -1px; }
.heat-marks i.dash { border-style: dashed; }
.heat-marks b.num { margin-right: .3rem; padding: 0 .25rem; border-radius: 2px; background: #6CC24A; font-size: .6rem; font-weight: 600; color: #fff; }
/* 분석 결과 2×2: 네 타일을 같은 크기로, 아이콘은 위에 두어 좁은 폭에서도 문구가 읽히게 */
.stat-tiles.wh-findings { grid-auto-rows: 1fr; }
.stat-tiles.wh-findings .stat-tile { gap: .6rem; padding: .8rem .9rem; }
.stat-tiles.wh-findings .stat-tile .lbl { white-space: normal; line-height: 1.4; }
/* 분석 결과 타일: 아이콘 옆에는 제목과 값만 두고, 구분선과 설명 줄은 타일 너비를 다 쓴다 */
.stat-tiles.wh-findings .stat-tile { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 .6rem; align-content: start; }
.stat-tiles.wh-findings .stat-tile .ico { grid-row: 1 / span 2; align-self: center; }
.stat-tiles.wh-findings .stat-tile .body { display: contents; }
.stat-tiles.wh-findings .stat-tile .val { padding-bottom: 0; border-bottom: 0; }
.stat-tiles.wh-findings .stat-tile .sub { grid-column: 1 / -1; margin-top: .6rem; padding-top: .5rem; border-top: 1px solid #e6e8f0; }
/* 표: 사용량 아래 태양광 충당 비율 */
.pv-share { display: inline-block; font-size: .6rem; line-height: .8rem; color: #c98500; }
/* 요일·시간대별: 인사이트 세 타일이 히트맵 카드 높이를 나눠 가진다 */
.wh-summary-col > .cont > .stat-tiles.wh-summary { flex-direction: column; }
.wh-summary-col .stat-tiles.wh-summary .stat-tile { flex: 1; }
/* 차트가 카드에 남는 높이를 채운다: 칸에 .chart-fill-col, 차트를 .chart-fill 로 감싼다(차트 옵션 height: null).
   height:100% 로 두면 Highcharts 가 기본 높이 400 으로 그리므로 absolute 로 채운다 */
.chart-fill-col > .cont { display: flex; flex-direction: column; height: 100%; }
.chart-fill { position: relative; flex: 1; min-height: 15rem; }
.chart-fill > div { position: absolute; inset: 0; }
/* 히트맵 차트가 칸 높이를 끝까지 채운다(늘어난 flex 칸에서는 height:100% 가 먹지 않는다) */
.wh-heat-col .wh-heat { position: relative; }
.wh-heat-col .wh-heat > div { position: absolute; inset: 0; }
/* 계시 구분 범례·표지 */
/* HTML 범례는 차트 범례(figmaChart baseChartOptions.legend)와 같은 모양: 회색 알약, 0.7rem #444, 둥근 표지 10px */
.band-legend, .heatmap-legend { display: inline-flex; align-items: center; gap: .75rem; padding: 0 .75rem; border-radius: 20px; background: #F1F2F7;
  font-size: .7rem; line-height: 1.9rem; color: #444; white-space: nowrap; }
.band-legend i { display: inline-block; width: 10px; height: 10px; margin-right: .3rem; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .12); vertical-align: -1px; }
.band-tag { display: inline-block; padding: 0 .5rem; border-radius: var(--radius-pill); font-size: .65rem; line-height: 1.2rem; color: #333; }
/* ※ 안내문 */
.energy-note { margin-top: .75rem; }
.energy-note > li { position: relative; padding-left: 1rem; font-size: .7rem; line-height: 1.5; color: var(--fg-point); }
.energy-note > li::before { content: "※"; position: absolute; left: 0; }
.heatmap-legend { align-self: flex-start; width: fit-content; gap: .4rem; margin-top: .5rem; }
.heatmap-legend .bar { width: 8rem; height: .45rem; border-radius: .25rem;
  background: linear-gradient(90deg, #2C7BB6, #3CB8C3, #6CC24A, #F5D63D, #E03C31); }
@media (max-width: 768px) {
  .stat-tiles.cols-2 { grid-template-columns: 1fr; }
}

/* 산단기업 대시보드(Figma v2 main-dashboard) */
.udb { display: flex; flex-direction: column; gap: 1rem; }
.udb .udb-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.udb .udb-kpis .stat-tile { align-items: center; padding: 1rem 1.2rem; }
.udb .udb-kpis .stat-tile .ico { width: 3rem; height: 3rem; }
.udb .udb-kpis .stat-tile .val { font-size: 1.7rem; line-height: 2.1rem; background: none; -webkit-text-fill-color: var(--fg-title); color: var(--fg-title); }
.udb .udb-kpis .stat-tile .val em { font-size: .8rem; }
.udb .udb-kpis .stat-tile .lbl { font-size: 1rem; }
.udb .udb-kpis .stat-tile .sub { display: flex; justify-content: space-between; gap: .5rem; font-size: .8rem; }
.udb-ring { flex: none; width: 3.6rem; height: 3.6rem; }
.udb-ring text { font-size: 13px; font-weight: 700; fill: var(--fg-title); }
.udb-row { display: grid; gap: 1rem; }
.udb-row.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.udb-row.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.udb-card { margin: 0; }
.udb-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e6e8f0; }
.udb-head h3 { position: relative; margin: 0; padding-bottom: .5rem; font-size: 1rem; font-weight: 700; color: var(--fg-title); }
.udb-head h3::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 2px; background: var(--fg-point); }
.udb-head .more { display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; margin-bottom: .4rem;
  border: 1px solid #ccc; border-radius: .2rem; color: var(--fg-body); }
/* 단위 뱃지는 제목 바로 옆, + 버튼은 오른쪽 끝 */
.udb-head.has-unit { margin-bottom: 1rem; }
.udb-head .tit-badge { margin: 0 auto .4rem .5rem; }
.udb-sub { margin: .9rem 0 .5rem; font-size: .8rem; font-weight: 600; color: var(--fg-title); }
.udb-means { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.udb-means > li { padding: 1.2rem .5rem; border: 1px solid var(--fg-card-border); border-radius: var(--fg-card-radius); text-align: center; }
.udb-means .name { margin-top: .8rem; font-size: .85rem; font-weight: 600; color: var(--fg-title); }
.udb-means .val { margin-top: .4rem; font-size: 1.3rem; font-weight: 700; color: var(--fg-title); }
.udb-means .pct { margin-top: .2rem; font-size: .75rem; color: #555; }
.udb-card .tbl-st1 tr.now td { font-weight: 600; }
.udb-card .tbl-st1 tr.now td:last-child { color: var(--fg-point); }
.udb-rec { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; }
.udb-rec > li { padding: .6rem .3rem; border: 1px solid #d9dbf3; border-radius: .4rem; background: #f2f2ff; text-align: center; }
.udb-rec span { display: block; font-size: .65rem; font-weight: 600; color: var(--fg-title); }
.udb-rec strong { display: block; margin-top: .3rem; font-size: 1.05rem; color: var(--fg-title); }
.udb-rec strong.hl { color: #2f9e52; }
.udb-bars > li { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; font-size: .7rem; }
.udb-bars .lbl { flex: none; width: 4.8rem; font-weight: 600; color: var(--fg-title); }
.udb-bars .bar { flex: 1; height: .5rem; }
.udb-bars .bar i { display: block; height: 100%; min-width: 2px; border-radius: .25rem; background: linear-gradient(90deg, #979cff, #689fd6); }
.udb-bars .num { flex: none; width: 3rem; color: var(--fg-body); }
.udb-alerts > li { display: flex; align-items: flex-start; gap: .6rem; padding: .7rem 0; border-bottom: 1px solid #e6e8f0; }
.udb-alerts > li:last-child { border-bottom: 0; }
.udb-alerts > li > svg { flex: none; margin-top: .1rem; }
.udb-alerts .warn > svg, .udb-alerts .warn .tit { color: #e39a0b; }
.udb-alerts .info > svg, .udb-alerts .info .tit { color: #2456c9; }
.udb-alerts .ok > svg, .udb-alerts .ok .tit { color: #2f9e52; }
.udb-alerts .body { flex: 1; min-width: 0; }
.udb-alerts .tit { font-size: .75rem; font-weight: 700; }
.udb-alerts .txt { margin-top: .15rem; font-size: .7rem; color: var(--fg-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.udb-alerts .date { flex: none; font-size: .65rem; color: #555; }
.udb-bars .empty, .udb-alerts .empty { padding: .8rem 0; font-size: .7rem; color: var(--fg-info-text); }
@media (max-width: 1280px) {
  .udb .udb-kpis, .udb-row.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .udb .udb-kpis, .udb-row.cols-2, .udb-row.cols-3 { grid-template-columns: 1fr; }
  .udb-means { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.udb-card .tbl-st1 th, .udb-card .tbl-st1 td { padding-left: .2rem; padding-right: .2rem; font-size: .7rem; white-space: nowrap; }
/* 카드 '+' 버튼 호버: 기존 더보기 버튼(.more-btn)처럼 아이콘이 한 바퀴 돌고, 테두리·글자는 포인트 색으로 */
.udb-head .more { transition: border-color .2s, color .2s, background-color .2s; }
.udb-head .more > svg { transition: transform .3s; }
.udb-head .more:hover, .udb-head .more:focus-visible { border-color: var(--fg-point); background: #f4f3fd; color: var(--fg-point); }
.udb-head .more:hover > svg, .udb-head .more:focus-visible > svg { transform: rotate(180deg); }

/* RE100 포트폴리오 추천 시나리오 */
.pf-need { margin-top: 1rem; text-align: center; }
.pf-need p + p { margin-top: .3rem; }
.pf-scn-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-top: 1rem; }
.pf-scn { display: block; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.pf-scn .stat-tile { height: 100%; transition: border-color .2s, box-shadow .2s; }
.pf-scn:hover .stat-tile, .pf-scn:focus-visible .stat-tile { border-color: var(--fg-point); }
.pf-scn.active .stat-tile { border-color: var(--fg-point); box-shadow: 0 0 0 1px var(--fg-point) inset; }
.pf-notes { font-size: .7rem; line-height: 1.6; color: #555; }
.pf-notes li { position: relative; padding-left: .6rem; }
.pf-notes li::before { content: ""; position: absolute; left: 0; top: .7em; width: .2rem; height: .2rem; border-radius: 50%; background: #999; }
@media (max-width: 1024px) { .pf-scn-grid { grid-template-columns: 1fr; } }

/* 재생에너지 조달 상세(피그마 v2) */
.pf-goal-notice { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding: .8rem 1.2rem;
  border: 1px solid #f3d38a; border-radius: var(--fg-card-radius); background: #fff8e6; font-size: .8rem; color: #6b5413; }
.pf-cond { margin-left: .3rem; color: #e39a0b; font-size: .9rem; vertical-align: -1px; cursor: help; }
.pf-conditions { padding: .6rem .9rem; border-radius: var(--fg-card-radius); background: #fff8e6; font-size: .72rem; line-height: 1.6; color: #6b5413; }
.pf-conditions b { margin-right: .3rem; }
.pf-scale-on th, .pf-scale-on td { background: #f4f3fd !important; font-weight: 600; color: var(--fg-point); }

/* RE100 현황 — 카드·제목·타일은 공통 규칙(col-wrap .cont, titT2, tit-badge, stat-tile)을 쓰고 여기서는 화면 고유 요소만 정한다 */
/* 뱃지가 여럿이면 마지막 뱃지 뒤에서만 + 버튼을 오른쪽으로 민다 */
.rs-head .tit-badge { margin: 0 0 .4rem .5rem; }
.rs-head .tit-badge + .tit-badge { margin-left: .3rem; }
.rs-head .tit-badge:last-of-type { margin-right: auto; }
.rs-more { margin-left: auto; display: inline-flex; align-items: center; gap: .2rem; font-size: .7rem; color: var(--fg-info-text); white-space: nowrap; }
.rs-more:hover, .rs-more:focus-visible { color: var(--fg-point); }
.rs-empty { padding: 2rem 0; text-align: center; font-size: .75rem; color: var(--fg-info-text); }

/* 목표 경로 게이지: 계획상 오늘 위치는 옅은 빗금(그림자)으로, 실제 달성률은 진한 채움으로 겹쳐 그린다 */
.rs-gauge { margin: 1.4rem 0 .2rem; }
.rs-gauge-ticks { position: relative; height: 1.1rem; }
.rs-gauge-ticks .tick { position: absolute; bottom: .2rem; transform: translateX(-50%); font-size: .65rem; font-weight: 600; color: #7877DF; white-space: nowrap; }
.rs-gauge-ticks .tick.final { color: #8a8fd8; }
.rs-gauge-ticks .tick.end { transform: translateX(-100%); }
.rs-track { position: relative; height: .9rem; border-radius: 999px; background: #eef0f5; box-shadow: inset 0 1px 2px rgba(35, 43, 54, .08); }
.rs-track .plan { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px;
  background: repeating-linear-gradient(-45deg, rgba(121, 86, 168, .2) 0 5px, rgba(121, 86, 168, .1) 5px 10px);
  box-shadow: 0 0 0 1px rgba(121, 86, 168, .18) inset; }
.rs-track .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--fg-gradient);
  box-shadow: 0 2px 6px rgba(121, 86, 168, .35); }
.rs-track .line { position: absolute; top: -.25rem; bottom: -.25rem; width: 2px; margin-left: -1px; border-radius: 1px; background: #7877DF; }
.rs-track .line.final { background: #ADB1FF; }
.rs-under { position: relative; height: 1.5rem; margin-top: .45rem; }
.rs-under:has(.lbl.low) { height: 2.8rem; }
.rs-under .lbl { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.rs-under .lbl.end { transform: translateX(-100%); }
.rs-under .lbl.now { top: 0; padding: .05rem .55rem; border-radius: 20px; background: #7956A8; color: #fff; font-size: .65rem; font-weight: 600;
  box-shadow: 0 2px 6px rgba(121, 86, 168, .3); }
.rs-under .lbl.now b { margin-left: .15rem; font-size: .9rem; font-weight: 700; }
.rs-under .lbl.now::before { content: ""; position: absolute; left: 50%; top: -.3rem; margin-left: -.3rem; border: .3rem solid transparent; border-top: 0; border-bottom-color: #7956A8; }
.rs-under .lbl.now.end::before { left: auto; right: .5rem; }
.rs-under .lbl.plan { top: .1rem; padding: 0 .45rem; border: 1px dashed rgba(121, 86, 168, .45); border-radius: 20px; background: #f6f3fb;
  font-size: .62rem; font-weight: 600; color: #7956A8; }
.rs-pace { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-top: .7rem; font-size: .72rem; font-weight: 600; }
.rs-pace.ok { color: #2f9e52; }
.rs-pace.late { color: #d9822b; }
.rs-pace .sub { flex-basis: 100%; padding-left: 1.1rem; font-size: .62rem; font-weight: 400; color: #999; }

.rs-means li { display: grid; grid-template-columns: 8rem 1fr 9rem; align-items: center; gap: .8rem; padding: .55rem 0; border-bottom: 1px solid #eef0f5; }
.rs-means li:last-child { border-bottom: 0; }
.rs-means .name { display: flex; flex-direction: column; gap: .2rem; font-size: .75rem; font-weight: 600; color: var(--fg-title); }
.rs-means .ghg { display: inline-flex; align-items: center; gap: .2rem; width: fit-content; padding: 0 .45rem; border-radius: 20px;
  font-size: .6rem; font-weight: 500; line-height: 1.2rem; }
.rs-means .ghg.on { background: #ecebfc; color: #6b63d6; }
.rs-means .ghg.off { background: #F1F2F7; color: #888; }
.rs-means .bars { position: relative; height: 1rem; }
.rs-means .bar { position: absolute; left: 0; border-radius: 3px; }
.rs-means .bar.plan { top: 0; bottom: 0; background: #e6e5fa; }
.rs-means .bar.actual { top: .25rem; bottom: .25rem; background: #7877DF; }
.rs-means .num { text-align: right; font-size: .7rem; color: #666; }
.rs-means .num b { color: var(--fg-title); font-size: .78rem; }
.rs-means .num em { margin-left: .4rem; font-style: normal; font-weight: 700; color: var(--fg-point); }
.rs-legend { display: flex; gap: 1rem; justify-content: flex-end; margin-top: .5rem; font-size: .65rem; color: #666; }
.rs-legend i { display: inline-block; width: .7rem; height: .5rem; margin-right: .3rem; border-radius: 2px; }
.rs-legend i.plan { background: #e6e5fa; } .rs-legend i.actual { background: #7877DF; }

.rs-todo li { display: flex; align-items: center; gap: .8rem; padding: .7rem 0; border-bottom: 1px solid #eef0f5; }
.rs-todo .lv { flex: none; }
.rs-todo li.warn .lv { color: #e39a0b; }
.rs-todo li.info .lv { color: #3c66d9; }
.rs-todo li.ok .lv { color: #2f9e52; }
.rs-todo li:last-child { border-bottom: 0; }
.rs-todo .body { flex: 1; min-width: 0; }
.rs-todo .tit { font-size: .75rem; font-weight: 600; color: var(--fg-title); }
.rs-todo .txt { margin-top: .15rem; font-size: .65rem; line-height: 1.5; color: var(--fg-info-text); }
.rs-todo .go { flex: none; display: inline-flex; align-items: center; gap: .25rem; padding: 0 .6rem; border: 1px solid var(--fg-card-border);
  border-radius: 20px; font-size: .65rem; font-weight: 600; line-height: 1.4rem; color: var(--fg-point); white-space: nowrap; }
.rs-todo .go:hover, .rs-todo .go:focus-visible { border-color: var(--fg-point); background: #f4f3fd; }
.rs-todo .empty { justify-content: center; color: var(--fg-info-text); font-size: .75rem; }
@media (max-width: 1024px) {
  .rs-means li { grid-template-columns: 7rem 1fr; }
  .rs-means .num { grid-column: 1 / -1; text-align: left; }
}
/* KPI 띠 다음 카드 줄: 카드 줄 사이(25px)와 같게 */
.rs-page .box-style6 + .col-wrap { margin-top: -6px; }

/* RE100 현황 카드 제목: 대시보드와 달리 제목 밑줄·구분선 없이 */
.udb-head.rs-plain { border-bottom: 0; }
.udb-head.rs-plain h3 { padding-bottom: 0; }
.udb-head.rs-plain h3::after { content: none; }
.udb-head.rs-plain .more, .udb-head.rs-plain .tit-badge { margin-bottom: 0; }
/* 이행수단 이름 앞 아이콘 */
.rs-means .name .t { display: inline-flex; align-items: center; gap: .35rem; }
.rs-means .name .ico { display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; }
.rs-means .name .ico.tone-purple { background: #ecebfc; color: #6b63d6; }
.rs-means .name .ico.tone-blue { background: #e4ecfd; color: #3c66d9; }
.rs-means .name .ico.tone-yellow { background: #fff1cc; color: #e39a0b; }
.rs-means .name .ico.tone-green { background: #dff5e3; color: #2f9e52; }
.rs-means .name .ghg { margin-left: 1.75rem; }
.rs-under .lbl.plan.low { top: 1.6rem; }
/* 계획 표시에서 막대까지 점선 */
.rs-under .lbl.plan::before { content: ""; position: absolute; left: 50%; bottom: 100%; height: .55rem; border-left: 1px dashed rgba(121, 86, 168, .55); }
.rs-under .lbl.plan.low::before { height: 2.05rem; }
.rs-under .lbl.plan.end::before { left: auto; right: .5rem; }

/* 포트폴리오 시뮬레이션: 추천·직접 구성 선택 */
.pf-mode { display: flex; align-items: center; gap: 1rem; margin-bottom: .8rem; }
.pf-mode .txt { font-size: .72rem; color: var(--fg-info-text); }
.pf-saved { margin-right: auto; font-size: .72rem; color: #2f9e52; }
.pf-saved a { margin-left: .4rem; font-weight: 600; color: var(--fg-point); text-decoration: underline; }

/* 시나리오 관리 */
.sm-empty { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; border-radius: var(--fg-card-radius); background: #f7f8fb; font-size: .75rem; color: #555; }
.sm-link { flex: none; padding: .25rem .8rem; border: 1px solid var(--fg-card-border); border-radius: 20px; font-size: .7rem; font-weight: 600; color: var(--fg-point); }
.sm-main-wrap { display: grid; grid-template-columns: 11rem 1fr; gap: 1.2rem; align-items: center; }
/* 시나리오 이름: 체크박스 열과 붙지 않게 왼쪽 여백. inline 으로 둬야 줄 높이를 건드리지 않는다 */
.sm-name { padding-left: .5rem; }
.sm-progress { padding: 1rem; border-radius: var(--fg-card-radius); background: #f4f3fd; text-align: center; }
.sm-progress .lbl { font-size: .72rem; font-weight: 600; color: #555; }
.sm-progress .val { margin-top: .2rem; font-size: 1.8rem; font-weight: 700; color: #7956A8; }
.sm-progress .sub { margin-top: .2rem; font-size: .6rem; color: #999; }
.sm-actions { display: flex; align-items: center; justify-content: flex-end; gap: .4rem; margin-top: .8rem; }
.sm-actions .txt { margin-right: auto; display: inline-flex; align-items: center; gap: .3rem; font-size: .7rem; color: var(--fg-info-text); }
.sm-main { display: inline-block; margin-right: .4rem; padding: 0 .45rem; border-radius: 20px; background: #7956A8; color: #fff; font-size: .62rem; font-weight: 600; line-height: 1.2rem; vertical-align: 1px; }
.sm-compare th .sm-star { margin-right: .25rem; color: #e39a0b; vertical-align: -2px; }
.sm-compare td { vertical-align: top; }
.sm-compare td small { font-size: .62rem; color: #999; }
.sm-compare td.sm-best { font-weight: 700; color: var(--fg-point); background: #f4f3fd; }
.sm-stack { display: flex; height: .6rem; overflow: hidden; border-radius: 999px; background: #eef0f5; }
.sm-stack span { height: 100%; }
.sm-means { margin-top: .5rem; text-align: left; }
.sm-means li { display: flex; align-items: center; gap: .35rem; padding: .1rem 0; font-size: .68rem; color: #555; }
.sm-means li i { flex: none; width: .55rem; height: .55rem; border-radius: 2px; }
.sm-means li b { margin-left: auto; font-weight: 600; color: var(--fg-title); }
.sm-means li em { width: 2.4rem; font-style: normal; text-align: right; color: #888; }
@media (max-width: 1024px) { .sm-main-wrap { grid-template-columns: 1fr; } }
/* 추천·직접 구성 카드: 감싸는 div 때문에 공통 카드 테두리 규칙이 닿지 않아 같은 값으로 준다 */
.pf-body > .cont { padding: var(--fg-card-padding); border: 1px solid var(--fg-card-border); border-radius: var(--fg-card-radius); background: var(--color-white); }
/* 추천 시나리오 카드도 분석 결과 타일과 같은 배치: 아이콘 옆에 제목·값, 구분선 아래 설명은 가로 너비 전체 */
.pf-scn .stat-tile { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 .6rem; align-content: start; padding: .8rem .9rem; }
.pf-scn .stat-tile .ico { grid-row: 1 / span 2; align-self: center; }
.pf-scn .stat-tile .body { display: contents; }
.pf-scn .stat-tile .lbl { white-space: normal; line-height: 1.4; }
.pf-scn .stat-tile .val { padding-bottom: 0; border-bottom: 0; }
.pf-scn .stat-tile .sub { grid-column: 1 / -1; margin-top: .6rem; padding-top: .5rem; border-top: 1px solid #e6e8f0; }
.pf-scn .stat-tile .val.save, .pf-saving { color: #2f9e52; -webkit-text-fill-color: #2f9e52; background: none; }
/* 비용 강조: 추가 비용은 오름(빨강), 절감은 내림(파랑) 공통 색 */
.pf-cost { font-weight: 800; }
.pf-cost em { margin-left: .3rem; font-style: normal; font-size: .75rem; font-weight: 700; }
.pf-cost.up, .pf-cost.up em, .pf-cost-text.up, .pf-cost-cell.up { color: var(--color-up); -webkit-text-fill-color: var(--color-up); }
.pf-cost.down, .pf-cost.down em, .pf-cost-text.down, .pf-cost-cell.down { color: var(--color-down); -webkit-text-fill-color: var(--color-down); }
.pf-cost-text, .pf-cost-cell { font-weight: 700; }
.sub-box-wrap .txt-r.pf-cost-text strong { color: inherit; -webkit-text-fill-color: inherit; }

/* ==================================================================
   장외거래 내 거래(/ot/rec/contract): 목록 + 진행 단계 + 협의 메시지
   ================================================================== */
.md-page .col-md-5 .cont, .md-page .col-md-7 .cont { height: auto; }
.md-list { max-height: 34rem; overflow-y: auto; border-top: 1px solid #eef0f5; }
.md-list > li { border-bottom: 1px solid #eef0f5; }
.md-row { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: .6rem; padding: .65rem .5rem; border: 0; background: none;
  text-align: left; cursor: pointer; }
.md-row:hover, .md-row:focus-visible { background: #f8f8fc; }
.md-row.on { background: #f4f3fd; box-shadow: inset 3px 0 0 var(--fg-point); }
.md-row .main { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.md-row .tit { font-size: .78rem; font-weight: 600; color: var(--fg-title); }
.md-row .sub { font-size: .65rem; color: #888; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-row .side { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; flex: none; }
.md-kind-badge { display: inline-block; margin-right: .35rem; padding: 0 .4rem; border-radius: 4px; font-size: .6rem; font-weight: 600; vertical-align: 1px; }
.md-kind-badge.k1 { background: #fdecec; color: #d44a4a; }
.md-kind-badge.k2 { background: #e8f0fd; color: #3a6fd8; }
.md-state { padding: .05rem .5rem; border-radius: 20px; font-size: .62rem; font-weight: 600; white-space: nowrap; background: #F1F2F7; color: #777; }
.md-state.myTurn { background: #fff1e3; color: #c4620f; }
.md-state.contract { background: #ecebfc; color: #6b63d6; }
.md-state.done { background: #e7f6ec; color: #2f9e52; }
.md-unread { display: inline-flex; align-items: center; gap: .15rem; padding: 0 .4rem; border-radius: 10px; background: var(--fg-point); color: #fff; font-size: .6rem; }
.md-empty { padding: 2rem .5rem; text-align: center; font-size: .72rem; color: var(--fg-info-text); }
.md-go { display: inline-flex; align-items: center; gap: .2rem; margin-top: .6rem; color: var(--fg-point); font-weight: 600; }
.md-detail-head h3 { display: flex; align-items: center; }
.md-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3rem; margin: .4rem 0 .9rem; }
.md-steps li { display: flex; flex-direction: column; gap: .3rem; }
.md-steps .bar { height: .4rem; border-radius: 999px; background: #eef0f5; }
.md-steps .lbl { font-size: .65rem; color: #999; }
.md-steps li.done .bar { background: var(--fg-gradient, #7877DF); }
.md-steps li.done .lbl { color: #666; }
.md-steps li.now .bar { background: repeating-linear-gradient(135deg, #7877DF 0 6px, #9d9cf0 6px 12px); }
.md-steps li.now .lbl { color: var(--fg-point); font-weight: 700; }
.md-steps li.stop .bar { background: #c9cbd3; }
.md-steps li.stop .lbl { color: #888; font-weight: 700; }
.md-guide { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; padding: .7rem .9rem; border-radius: var(--fg-card-radius, 8px);
  background: #f7f8fb; }
.md-guide.myTurn { background: #fff6ec; }
.md-guide p { font-size: .75rem; color: #444; }
.md-guide p b { margin-right: .4rem; color: var(--fg-title); }
.md-guide.myTurn p b { color: #c4620f; }
.md-guide .btns { display: flex; gap: .35rem; margin-left: auto; }
.md-terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem 1rem; margin: 1rem 0 .4rem; }
.md-terms dt { font-size: .65rem; color: #888; }
.md-terms dd { margin: .1rem 0 0; font-size: .8rem; font-weight: 600; color: var(--fg-title); }
.md-notes { margin-top: .5rem; }
.md-import { display: flex; align-items: center; gap: .6rem; margin-top: .9rem; padding: .7rem .9rem; border: 1px solid #cfe9d8; border-radius: var(--fg-card-radius, 8px);
  background: #f1faf4; color: #2f7a47; }
.md-import p { flex: 1; font-size: .72rem; }
.md-msg { margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid #eef0f5; }
.md-msg-head { display: flex; align-items: center; gap: .3rem; margin-bottom: .5rem; font-size: .65rem; color: #888; }
.md-msg-list { display: flex; flex-direction: column; gap: .4rem; max-height: 20rem; min-height: 6rem; overflow-y: auto; padding: .4rem .2rem; }
.md-msg-empty, .md-msg-off { padding: 1rem 0; text-align: center; font-size: .7rem; color: var(--fg-info-text); }
.md-msg-off { margin-top: 1rem; border-top: 1px solid #eef0f5; }
.md-day { align-self: center; padding: 0 .6rem; border-radius: 10px; background: #F1F2F7; font-size: .6rem; color: #888; }
.md-bubble { max-width: 78%; padding: .45rem .7rem; border-radius: 10px; }
.md-bubble p { font-size: .75rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.md-bubble .meta { display: block; margin-top: .15rem; font-size: .58rem; color: #999; }
.md-bubble.theirs { align-self: flex-start; background: #F1F2F7; color: #333; border-top-left-radius: 2px; }
.md-bubble.mine { align-self: flex-end; background: #ecebfc; color: #2f2a78; border-top-right-radius: 2px; }
.md-bubble.mine .meta { text-align: right; }
.md-compose { display: grid; grid-template-columns: 1fr auto; gap: .3rem .5rem; margin-top: .6rem; }
.md-compose textarea { width: 100%; padding: .45rem .6rem; border: 1px solid #d6d8e0; border-radius: 6px; font-size: .75rem; resize: vertical; }
.md-compose textarea:focus { outline: none; border-color: var(--fg-point); }
.md-compose .md-btn { align-self: stretch; height: auto; }
.md-count { font-size: .6rem; color: #aaa; }
.md-error { grid-column: 1 / -1; font-size: .68rem; color: #d44a4a; }
/* 장외거래 등록 창: 숫자 칸 아래 쉼표 넣은 값 */
.ot-form-hint { margin-top: .25rem; font-size: .68rem; color: var(--fg-info-text); }
.ot-form-hint.inline { margin: 0 0 0 .5rem; }

/* ==================================================================
   REC 장외시장 새 구성(/ot/rec/market)
   ================================================================== */
.rm-mine { display: inline-flex; align-items: center; justify-content: center; width: 1.05rem; height: 1.05rem; margin-left: .3rem; border-radius: 50%; background: #ecebfc; color: #6b63d6; vertical-align: middle; cursor: help; }
/* REC 장외시장(/ot/rec/market): 시세 한 줄 + 게시판. 글자·숫자는 지표 타일(.stat-tile)과 같다 */
.rm-bar { display: flex; flex-wrap: wrap; align-items: stretch; gap: .8rem; margin-bottom: 1.25rem; }
.rm-bar-prices { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: .4rem 0; margin: 0; padding: .8rem 1.2rem;
  border: 1px solid var(--fg-card-border); border-radius: var(--fg-card-radius); background: #fff; }
.rm-bar-prices > div { display: flex; align-items: baseline; gap: .6rem; padding: 0 1.4rem; }
.rm-bar-prices > div:first-child { padding-left: 0; }
.rm-bar-prices > div + div { border-left: 1px solid #e6e8f0; }
.rm-bar-prices dt { font-size: .8rem; font-weight: 600; color: var(--fg-title); }
.rm-bar-prices dd { display: inline-flex; align-items: baseline; gap: .3rem; margin: 0; font-size: .75rem; font-weight: 500; color: #555; }
.rm-bar-prices dd b, .rm-bar-deal .val b { font-size: 1.2rem; font-weight: 700;
  background: linear-gradient(90deg, #5a4fd6 0%, #b04fd6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.rm-stale { display: inline-flex; align-items: center; gap: .2rem; align-self: center; padding: 0 .5rem; border-radius: 20px; background: #fff1e3; color: #c4620f; font-size: .65rem; font-weight: 600; }
.rm-bar-deal { display: flex; align-items: baseline; gap: .6rem; padding: .8rem 1.2rem; border: 1px solid var(--fg-card-border); border-radius: var(--fg-card-radius);
  background: #fff; transition: border-color .2s; }
.rm-bar-deal .lbl { font-size: .8rem; font-weight: 600; color: var(--fg-title); }
.rm-bar-deal .val { font-size: .75rem; font-weight: 500; color: #555; }
.rm-bar-deal .val b { margin: 0 .1rem; }
.rm-bar-deal svg { align-self: center; color: var(--fg-point); }
.rm-bar-deal:hover, .rm-bar-deal:focus-visible { border-color: var(--fg-point); }
.rm-bar-deal.warn { border-color: #f4c99a; background: #fff8f0; }
.rm-bar-deal.warn .val b { background: none; -webkit-text-fill-color: #c4620f; color: #c4620f; }
.rm-page .tit-btns-wrap .rm-best { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; margin: 0 auto 0 0; font-size: .7rem; color: #888; }
/* 공통 .tit-btns-wrap 의 제목은 남은 폭을 다 차지(flex:1)하므로, 제목 바로 옆에 요약을 붙이려면 제목 폭을 글자만큼으로 */
.rm-page .tit-btns-wrap:has(.rm-best) .titT2 { flex: none; }
.rm-best .tit-badge { flex: none; margin-left: .5rem; }
.rm-best b { margin: 0 .1rem 0 .25rem; color: var(--fg-title); }

/* 목표 관리(새 구성): 상단 한 문장 + 세 단계 */
.gm-head { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.25rem; padding: 1rem 1.25rem; border: 1px solid var(--fg-card-border); border-radius: var(--fg-card-radius); background: #fff; }
.gm-head.warn { border-color: #f4c99a; background: #fff8f0; color: #c4620f; }
.gm-head.ok { border-color: #bfe3cb; background: #f1faf4; color: #2f7a47; }
.gm-head.info { color: var(--fg-point); }
.gm-head .txt { flex: 1; }
.gm-head .tit { font-size: .9rem; font-weight: 700; color: var(--fg-title); }
.gm-head .sub { margin-top: .15rem; font-size: .75rem; color: #666; }
.gm-go { display: inline-flex; align-items: center; gap: .25rem; flex: none; padding: .35rem .8rem; border: 1px solid currentColor; border-radius: 20px; font-size: .72rem; font-weight: 600; color: inherit; }
.gm-go:hover, .gm-go:focus-visible { background: rgba(255,255,255,.6); }
/* 번호 원과 제목·뱃지를 한 줄 가운데로 맞춘다(뱃지는 .tit-btns-wrap .tit-badge 에서 flex:none) */
.gm-step-tit { display: flex; align-items: center; }
.gm-step-tit .tit-badge { flex: none; }
.gm-no { display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; margin-right: .5rem; border-radius: 50%; flex: none;
  background: #ecebfc; color: var(--fg-point); font-size: .7rem; font-weight: 700; }
.gm-no.done { background: #e7f6ec; color: #2f9e52; }
.gm-step-tit .tit-badge.gm-done { background: #e7f6ec; color: #2f7a47; }
.gm-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: .4rem 0 .6rem; }
.gm-hint { flex-basis: 100%; font-size: .7rem; line-height: 1.5; color: var(--fg-info-text); }
.gm-years { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .6rem; margin-top: .4rem; }
.gm-year { display: flex; flex-direction: column; gap: .25rem; padding: .6rem .8rem; border: 1px solid #e6e8f0; border-radius: var(--fg-card-radius); background: #fff; }
.gm-year.now { border-color: var(--fg-point); background: #f8f7fe; }
.gm-year .y { font-size: .7rem; color: #777; }
.gm-year .v { display: inline-flex; align-items: center; gap: .25rem; font-size: .8rem; font-weight: 700; color: var(--fg-title); }
.gm-year .a { font-size: .65rem; color: var(--fg-point); }
.gm-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .8rem; }
.gm-past { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; font-size: .7rem; color: #888; }
.gm-past b { color: #555; }
.gm-input { width: 4.6rem; height: 1.8rem; padding: 0 .5rem; border: 1px solid #d6d8e0; border-radius: 6px; font-size: .75rem; text-align: right; }
.gm-input.wide { width: 100%; }
.gm-input:focus { outline: none; border-color: var(--fg-point); }
.gm-plan { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)) auto; gap: .7rem 1rem; margin-top: .4rem; }
.gm-plan-save { display: flex; align-items: flex-end; }
@media (max-width: 1280px) { .gm-plan { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gm-plan-save { grid-column: 1 / -1; justify-content: flex-end; } }
.gm-plan label { display: flex; flex-direction: column; gap: .3rem; font-size: .72rem; color: #555; }
.gm-plan label.use span { font-weight: 700; color: var(--fg-title); }
.gm-result { margin-top: 1rem; padding: .7rem 1rem; border-radius: var(--fg-card-radius); background: #f7f8fb; font-size: .78rem; color: #555; }
.gm-result b { margin-left: .2rem; font-size: 1rem; color: var(--fg-point); }
.gm-result .short { font-weight: 700; color: var(--color-up); }
.gm-result .okay { font-weight: 700; color: #2f9e52; }
.gm-next { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .8rem; padding: .7rem 1rem; border: 1px dashed #d6d8e0; border-radius: var(--fg-card-radius); font-size: .75rem; color: #555; }

/* 시나리오 상세(새 구성): 판단 → 확보할 것 → 진행 */
.sv-page .titT2 .tit-badge.sv-main { background: #ecebfc; color: #6b63d6; font-weight: 600; }
.sv-comp { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin: .2rem 0 .6rem; font-size: .75rem; color: #666; }
.sv-comp b { margin-left: .2rem; color: var(--fg-title); }
.sv-stack { height: .7rem; }
.sv-lead { margin-top: 1rem; font-size: .95rem; line-height: 1.7; color: var(--fg-title); }
.sv-lead b { font-weight: 700; }
.sv-notes { display: flex; flex-direction: column; gap: .3rem; margin-top: .6rem; }
.sv-notes li { display: flex; align-items: flex-start; gap: .4rem; font-size: .75rem; color: #555; }
.sv-notes svg { flex: none; margin-top: .15rem; color: var(--fg-point); }
.sv-basis { margin-top: .8rem; font-size: .65rem; color: #999; }
.sv-means { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .8rem; }
.sv-card { display: flex; flex-direction: column; gap: .35rem; padding: 1rem; border: 1px solid var(--fg-card-border); border-radius: var(--fg-card-radius); background: #fff; }
.sv-card .name { display: flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 700; color: var(--fg-title); }
.sv-card .name .tit-badge { margin-left: auto; }
.sv-card .ico { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; }
.sv-card .ico.tone-yellow { background: #fff1cc; color: #e39a0b; }
.sv-card .ico.tone-purple { background: #ecebfc; color: #6b63d6; }
.sv-card .ico.tone-blue { background: #e4ecfd; color: #3c66d9; }
.sv-card .ico.tone-green { background: #dff5e3; color: #2f9e52; }
.sv-card .qty { font-size: .75rem; color: #666; }
.sv-card .qty b { font-size: 1.2rem; font-weight: 700;
  background: linear-gradient(90deg, #5a4fd6 0%, #b04fd6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.sv-card .todo { font-size: .72rem; color: var(--fg-title); }
.sv-gauge { height: .55rem; margin-top: .5rem; overflow: hidden; border-radius: 999px; background: #eef0f5; }
.sv-gauge .fill { display: block; height: 100%; border-radius: 999px; }
.sv-gauge-txt { display: flex; justify-content: space-between; align-items: baseline; font-size: .68rem; color: #777; }
.sv-gauge-txt b { color: var(--fg-title); }
.sv-gauge-txt em { font-style: normal; font-weight: 700; color: var(--fg-point); }
.sv-card dl { display: flex; flex-direction: column; gap: .15rem; margin: .3rem 0 0; padding-top: .5rem; border-top: 1px solid #eef0f5; }
.sv-card dl > div { display: flex; justify-content: space-between; font-size: .7rem; color: #777; }
.sv-card dd { margin: 0; color: var(--fg-body); }
.sv-card .links { display: flex; gap: .8rem; margin-top: .4rem; font-size: .7rem; }
.sv-card .links a { display: inline-flex; align-items: center; gap: .2rem; color: var(--fg-point); font-weight: 600; }
.sv-off { color: #999; }
.gm-page .cont { scroll-margin-top: 6rem; transition: box-shadow .3s; }
.gm-page .cont.gm-focus { box-shadow: 0 0 0 2px var(--fg-point); }
button.gm-go { background: none; cursor: pointer; }
/* 공통 .titT2 span 규칙(display:block, 왼쪽 여백)이 번호 원에 걸리지 않게 */
.gm-page .titT2 .gm-no { display: inline-flex; align-items: center; justify-content: center; padding: 0; font-size: .7rem; line-height: 1; position: static; }

/* 알림: 종 아이콘 창의 전체 보기, 알림 목록 화면 */
.alarm .util-over-box .alarm-all { display: block; padding: .6rem 0; border-top: 1px solid #eef0f5; text-align: center; font-size: .72rem; font-weight: 600; color: var(--fg-point); }
.al-list { border-top: 1px solid #eef0f5; }
.al-list > li { border-bottom: 1px solid #eef0f5; }
.al-list > li > button { display: flex; align-items: center; gap: .8rem; width: 100%; padding: .8rem .5rem; border: 0; background: none; text-align: left; cursor: pointer; }
.al-list > li > button:hover, .al-list > li > button:focus-visible { background: #f8f8fc; }
.al-list > li.unread > button { background: #fbfbff; }
.al-list .ico { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid #e3e6ee; border-radius: 50%; background: #fff; color: #4b5468; }
.al-list .ico.k-ot { color: var(--fg-point); }
.al-list .body { display: flex; flex: 1; flex-direction: column; gap: .2rem; min-width: 0; }
.al-list .meta { display: flex; align-items: center; gap: .4rem; }
.al-list .meta .tit-badge { margin-left: 0; }
.al-list .dot { width: .45rem; height: .45rem; border-radius: 50%; background: var(--color-up); }
.al-list .txt { font-size: .78rem; line-height: 1.5; color: var(--fg-title); white-space: pre-line; }
.al-list li:not(.unread) .txt { color: #666; }
.al-list .date { flex: none; font-size: .68rem; color: #999; }
.al-empty { padding: 2.5rem 0; text-align: center; font-size: .75rem; color: var(--fg-info-text); }

/* 이행 실적 화면 */
/* 입력 칸 아래 짧은 도움말(회색). 주의 문구(.bu-atte)와 구분한다 */
.smcn-help { margin: .35rem 0 0; font-size: .7rem; line-height: 1.5; color: #777; }
.smcn-help b { font-weight: 600; color: var(--fg-title); }
/* 표 아래 안내와 하단 버튼 사이 */
.smcn-form .energy-note + .btns { margin-top: 1.25rem; }
/* 협의 메시지: 보내기 버튼을 입력 칸 높이에 맞춘다 */
.md-compose > :nth-child(2) { align-self: stretch; height: auto !important; min-height: 0; display: inline-flex; align-items: center; justify-content: center; margin: 0; }
/* 게시판형 목록 아래: 설명(왼쪽)과 등록 버튼(오른쪽) 한 줄 */
.list-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-top: .8rem; }
.list-foot .energy-note { margin-top: 0; }
.list-foot > :last-child { flex: none; }

/* ===== 관리자 대시보드: 성서산업단지 3D 지도 위에 섹션을 띄운다 ===== */
.admin-flex-wrap.admin-map-stage { position: relative; display: block; height: calc(100vh - 8rem); min-height: 640px; overflow: hidden; background: #0b1220; }
/* 좌우 섹션: 지도 위에 여백을 두고 흰 카드로 띄운다 */
.admin-map-stage > .area1, .admin-map-stage > .area3 { position: absolute; top: 14px; bottom: 14px; width: 360px; z-index: 3; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.admin-map-stage > .area1 { left: 14px; }
.admin-map-stage > .area3 { right: 14px; }
.admin-map-stage .cont { background: #fff; border-radius: 10px; box-shadow: 0 8px 28px rgba(2,8,23,.28); }
.admin-map-stage > .area2 { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: min(720px, calc(100% - 780px)); min-width: 0; z-index: 3; display: block; }
.admin-map-stage > .area1 > .cont, .admin-map-stage > .area3 > .cont { flex: 1 1 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
/* 카드 제목은 그대로 두고 본문(.db-card-body)만 스크롤한다. 스크롤바는 마우스를 올렸을 때만 얇게 보인다 */
.admin-map-stage .cont > .db-card-body { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: transparent transparent; scrollbar-gutter: stable; margin-right: -6px; padding-right: 2px; }
.admin-map-stage .cont > .db-card-body:hover { scrollbar-color: rgba(100,116,139,.38) transparent; }
.admin-map-stage .cont > .db-card-body::-webkit-scrollbar { width: 6px; }
.admin-map-stage .cont > .db-card-body::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
.admin-map-stage .cont > .db-card-body:hover::-webkit-scrollbar-thumb { background: rgba(100,116,139,.38); }
.admin-map-stage .cont > .udb-head { flex: none; }
/* 위 카드는 내용만큼, 아래 카드가 남는 높이를 채운다 */
.admin-map-stage > .area1 > .cont:first-child, .admin-map-stage > .area3 > .cont:first-child { flex: none; }
.cm3d { position: absolute; inset: 0; z-index: 1; }
/* maplibre 가 컨테이너에 position: relative 를 넣으므로 더 구체적으로 덮는다 */
.cm3d .cm3d-map, .cm3d .cm3d-map.maplibregl-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.cm3d-vignette { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(ellipse at 50% 55%, transparent 55%, rgba(4,8,18,.5) 100%); }
.cm3d-labels { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.cm3d-name { position: absolute; transform: translate(-50%, 6px); padding: 4px 12px; border-radius: 999px; font-size: 15px; font-weight: 600;
  background: rgba(255,255,255,.88); color: #1e293b; border: 1px solid rgba(15,23,42,.12); white-space: nowrap; }
.cm3d-gauge { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 6px; padding-bottom: 4px; }
.cm3d-tagpin { position: absolute; transform: translate(-50%, -100%); }
.cm3d-leads { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.cm3d-leads line { stroke: rgba(255,255,255,.85); stroke-width: 1.2; }
.cm3d-tag.moved::after { display: none; }
/* 전체 보기 라벨: 이름·수치 한 줄 + 미니 막대(사용량, 그 안에 재생에너지) */
.cm3d-tag.card { flex-direction: column; align-items: stretch; gap: 6px; padding: 8px 14px 10px; }
.cm3d-tag.card .row { display: flex; align-items: center; gap: 10px; }
.cm3d-tag .mini { position: relative; display: block; height: 6px; border-radius: 3px; background: rgba(148,163,184,.25); overflow: hidden; }
.cm3d-tag .mini i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; height: auto; border-radius: 3px; }
.cm3d-tag .mini i.use { background: linear-gradient(90deg, #689fd6, #979cff); }
.cm3d-tag .mini i.gen { background: #84cc16; }
.cm3d-svg { display: block; overflow: visible; margin-left: 8px; filter: drop-shadow(0 4px 10px rgba(2,8,23,.55)); }
.cm3d-svg .track { fill: rgba(15,23,42,.35); stroke: rgba(255,255,255,.55); stroke-width: 1; }
.cm3d-svg .tick { stroke: rgba(255,255,255,.8); stroke-width: 1; }
.cm3d-svg .use { fill: #3b82f6; }
.cm3d-svg .gen { fill: #84cc16; }
.cm3d-tag { position: relative; display: flex; align-items: center; gap: 10px; padding: 6px 13px; border-radius: 8px; font-size: 15px; white-space: nowrap;
  background: rgba(255,255,255,.94); color: #0f172a; border: 1px solid rgba(37,99,235,.3); box-shadow: 0 2px 10px rgba(0,0,0,.3); }
.cm3d-tag::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; transform: translateX(-50%) rotate(45deg);
  background: inherit; border-right: inherit; border-bottom: inherit; }
.cm3d-tag b { color: #1d4ed8; font-weight: 700; }
/* 겹쳐서 위로 올린 라벨은 게이지와 선으로 잇는다 */
.cm3d-tag::before { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: var(--lead, 0px); background: rgba(255,255,255,.85); }
.cm3d-tag span { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.cm3d-tag em { font-style: normal; font-weight: 400; color: #64748b; font-size: 12px; }
.cm3d-tag em.re { font-weight: 700; color: #65a30d; margin-right: 1px; }
.cm3d i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: none; }
.cm3d i.u { background: #3b82f6; } .cm3d i.g { background: #84cc16; }
.cm3d i.ramp { width: 18px; background: linear-gradient(90deg, #2dd4bf, #a3e635); }
.cm3d-re, .cm3d-use { position: absolute; left: calc(50% + 30px); transform: translateY(50%); white-space: nowrap; }
.cm3d-re { padding: 5px 12px 5px 9px; border-left: 3px solid #84cc16; border-radius: 0 6px 6px 0; background: #fff; color: #3f6212; font-size: 15px; }
.cm3d-re b { font-size: 22px; font-weight: 800; color: #4d7c0f; }
.cm3d-use { font-size: 16px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.85); }
.cm3d-use em { font-style: normal; font-weight: 400; font-size: 12px; opacity: .85; }
.cm3d-card { position: absolute; z-index: 3; width: 310px; text-align: left; cursor: pointer;
  padding: 16px 18px; border-radius: 4px 10px 10px 4px; border: 1px solid rgba(37,99,235,.25); border-left: 2px solid #2563eb;
  background: rgba(255,255,255,.95); box-shadow: 0 8px 28px rgba(2,8,23,.3); transition: opacity .3s; font: inherit; color: #0f172a; }
.cm3d-card h4 { margin: 0 0 12px; font-size: 18px; color: #1d4ed8; }
.cm3d-card dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.cm3d-card dl > div:last-child { grid-column: 1 / -1; }
.cm3d-card dt { font-size: 13px; color: #64748b; display: flex; align-items: center; gap: 5px; }
.cm3d-card dd { margin: 0; font-size: 21px; font-weight: 700; }
.cm3d-card dd em { font-style: normal; font-size: 13px; font-weight: 400; color: #64748b; margin-left: 3px; }
.cm3d-card .bars { display: grid; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(15,23,42,.08); }
.cm3d-card .bars > div { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; font-size: 13px; color: #64748b; }
.cm3d-card .bars b { color: #0f172a; font-size: 15px; }
.cm3d-card .bars em { grid-column: 1 / -1; height: 5px; background: rgba(15,23,42,.08); border-radius: 2px; overflow: hidden; }
.cm3d-card .bars em i { display: block; width: 0; height: 100%; border-radius: 0; }
.cm3d-card .more { display: block; margin-top: 12px; font-size: 13px; color: #2563eb; text-align: right; }
.cm3d-ctrl { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 3; display: flex; gap: 4px; padding: 6px;
  border-radius: 999px; background: rgba(255,255,255,.93); box-shadow: 0 6px 20px rgba(2,8,23,.28); }
.cm3d-ctrl button { border: 0; background: none; font: inherit; font-size: 15px; color: #475569; padding: 7px 16px; border-radius: 999px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; }
.cm3d-ctrl button.on { background: #2563eb; color: #fff; font-weight: 700; }
.cm3d-ctrl button.play { color: #0f172a; }
@media (max-width: 1400px) {
  .admin-flex-wrap.admin-map-stage > .area2 { width: calc(100% - 780px); }
}

/* 산단 일일 공급/소비전력: 두 박스를 같은 모양(그림 + 아래 이름)과 같은 높이로 */
.admin-dash .area1-con .box-grid .box-icon { min-height: 5.6rem; padding: 0.75rem 1rem; }
.admin-dash .area1-con .box-grid .box-icon > div { flex: none; width: 3.6rem; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.admin-dash .area1-con .box-grid .box-icon .icon1, .admin-dash .area1-con .box-grid .box-icon .icon4 { width: 2.4rem; height: 2.4rem; background-size: contain; background-position: center; }
/* 관리자 대시보드 레이어: 지도(1) < 헤더 띠(2) < 좌우·상단 섹션(3) */
.admin-dash:has(.admin-map-stage) .main-tit { position: relative; z-index: 2; }
/* 메인 대시보드만: 지도를 본문 여백(좌우·아래 50px) 밖까지 넓혀 화면 끝에 붙인다. 높이는 화면 아래까지(스크립트로 맞춤) */
.admin-flex-wrap.admin-map-stage { margin-left: -50px; margin-right: -50px; margin-bottom: -50px; width: auto; }

/* ===== 관리자 대시보드: 사용자 대시보드 색에 맞춤 ===== */
/* 상단 한 줄 지표 */
/* 좌우 섹션 사이 전체 폭(좌 섹션·간격 | 상단 | 간격·우 섹션) */
.admin-map-stage > .area2 { left: calc(14px + 360px + 14px); right: calc(14px + 360px + 14px); width: auto; transform: none; }
.admin-map-stage .db-goal-line { display: flex; align-items: center; gap: 1rem; padding: .7rem 1.2rem; }
.db-goal-line ul { flex: 1; display: flex; align-items: center; min-width: 0; }
/* 항목마다 이름(위) · 값(아래): 123,456,789.1 같은 큰 값도 한 칸에 들어간다 */
.db-goal-line li { flex: 1 1 0; display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; min-width: 0; padding: 0 1rem; border-left: 1px solid #e6e8f0; white-space: nowrap; }
.db-goal-line li:first-child { border-left: 0; padding-left: 0; }
.db-goal-line li.self { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .6rem; row-gap: .25rem; align-items: center; }
.db-goal-line li.self .lbl { grid-column: 1 / -1; }
.db-goal-line li.self strong { grid-row: 2; grid-column: 1; }
.db-goal-line li.self .gauge { grid-row: 2; grid-column: 2; }
.db-goal-line .lbl { font-size: .75rem; font-weight: 600; color: var(--fg-title); }
.db-goal-line .gauge { flex: 1; min-width: 3rem; height: .45rem; border-radius: .25rem; background: #e9eaf6; overflow: hidden; }
.db-goal-line .gauge i { display: block; height: 100%; border-radius: .25rem; background: linear-gradient(90deg, #979cff, #689fd6); }
.db-goal-line strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 1.25rem; font-weight: 800; background: linear-gradient(90deg, #7e83ed, #4f8fd8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.db-goal-line strong em { margin-left: .2rem; font-size: .6rem; font-weight: 500; color: #555; -webkit-text-fill-color: #555; }
.db-goal-line .upd { flex: none; align-self: flex-start; font-size: .6rem; color: #777; }
/* 카드 안 강조: 참여 현황 막대, 수치 타일 */
.admin-map-stage .count-info-lst2 ul > li.bg1 > div { background: linear-gradient(90deg, #979cff, #689fd6); }
.admin-map-stage .count-info-lst2 ul > li.bg2 > div { background: linear-gradient(90deg, #a6a2f5, #7e83ed); }
.admin-map-stage .count-info-lst2 ul > li.bg3 > div { background: linear-gradient(90deg, #7fd3a8, #3fa478); }
.admin-map-stage .count-info-lst2 ul > li > div { border-radius: .4rem; }
.admin-map-stage .txt-grid > div, .admin-map-stage .txt-flex2 > div { padding: .45rem .3rem .55rem; border: 1px solid #d9dbf3; border-radius: .4rem; background: #f7f7ff; }
.admin-map-stage .txt-grid > div .tit, .admin-map-stage .txt-flex2 > div .tit { background: none; color: var(--fg-title); font-weight: 600; padding: 0 .2rem; }
.admin-map-stage .txt-grid > div > strong, .admin-map-stage .txt-flex2 > div > strong { padding-top: .25rem; }
.admin-map-stage .box-grid .box-icon > ul > li .tit { background: #f2f2ff; border: 1px solid #d9dbf3; border-radius: .3rem; color: var(--fg-title); }
.admin-map-stage .box-grid .box-icon { border-color: #e1e3f2; border-radius: .5rem; }
.admin-map-stage .udb-head { margin-bottom: .8rem; }
/* 지도 라벨: 보라 강조색, 더 크게 */
.cm3d-tag { border-color: rgba(126,131,237,.45); font-size: 17px; padding: 7px 14px; }
.cm3d-tag b { color: var(--fg-point); }
.cm3d-tag em { font-size: 13px; }
.cm3d i.u { background: linear-gradient(180deg, #979cff, #689fd6); }
.cm3d-name { font-size: 16px; color: var(--fg-title); border-color: rgba(126,131,237,.35); }
.cm3d-re { font-size: 17px; } .cm3d-re b { font-size: 26px; }
.cm3d-use { font-size: 18px; } .cm3d-use em { font-size: 13px; }
.cm3d-card { width: 330px; border-color: rgba(126,131,237,.3); border-left-color: var(--fg-point); }
.cm3d-card h4 { font-size: 20px; color: var(--fg-point); }
.cm3d-card dt { font-size: 14px; } .cm3d-card dd { font-size: 24px; } .cm3d-card dd em { font-size: 14px; }
.cm3d-card .bars > div { font-size: 14px; } .cm3d-card .bars b { font-size: 16px; }
.cm3d-card .more { color: var(--fg-point); font-size: 14px; }
/* 아래 단지 이동: 알약 대신 다른 섹션처럼 흰 카드 + 각진 버튼 */
.cm3d-ctrl { border-radius: 10px; padding: 6px; gap: 2px; box-shadow: 0 8px 28px rgba(2,8,23,.28); }
.cm3d-ctrl button { border-radius: 6px; font-size: 16px; padding: 8px 18px; color: #555; }
.cm3d-ctrl button.on { background: linear-gradient(90deg, #979cff, #7e83ed); color: #fff; }
.cm3d-ctrl button:not(.on):hover { background: #f2f2ff; color: var(--fg-point); }
/* 자립률 칸: 값이 길어지면 막대가 먼저 줄어든다 */
.db-goal-line li.self { grid-template-columns: auto minmax(1.5rem, 1fr); }


/* ===== 2D 위성 지도(VWorld). 구글 지도를 대신한다. 대시보드 지도와 같은 바탕·색 ===== */
.vmap { position: relative; width: 100%; height: 100%; min-height: 240px; overflow: hidden; border-radius: inherit; background: #0b1220; }
.vmap .vmap-canvas, .vmap .vmap-canvas.maplibregl-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.vmap-pins { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.vmap-pin { position: absolute; pointer-events: auto; width: 14px; height: 14px; margin: -7px 0 0 -7px; padding: 0; border-radius: 50%;
  background: #fff; border: 3px solid #7e83ed; box-shadow: 0 0 0 4px rgba(126,131,237,.3), 0 2px 6px rgba(0,0,0,.45); cursor: pointer; transition: transform .15s; }
.vmap-pin.badge { width: 24px; height: 24px; margin: -12px 0 0 -12px; border-width: 2px; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #4f46e5; line-height: 1; }
.vmap-pin.on { transform: scale(1.35); z-index: 2; border-color: #4f46e5; box-shadow: 0 0 0 6px rgba(79,70,229,.35), 0 2px 8px rgba(0,0,0,.5); }
.vmap-tip { position: absolute; z-index: 3; transform: translate(-50%, calc(-100% - 18px)); pointer-events: none; white-space: nowrap;
  padding: 8px 12px; border-radius: 8px; font-size: 13px; color: #0f172a; background: rgba(255,255,255,.96);
  border: 1px solid rgba(126,131,237,.45); box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.vmap-tip::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; transform: translateX(-50%) rotate(45deg);
  background: inherit; border-right: inherit; border-bottom: inherit; }
.vmap-tip-tit { display: flex; align-items: center; gap: 8px; margin: 0; }
.vmap-tip-tit b { color: var(--fg-point, #4f46e5); font-weight: 700; }
.vmap-tip-tit em { font-style: normal; font-size: 12px; color: #64748b; }
.vmap-tip dl { display: grid; grid-template-columns: auto auto; gap: 2px 10px; margin: 6px 0 0; }
.vmap-tip dt { color: #64748b; font-weight: 400; }
.vmap-tip dd { margin: 0; font-weight: 700; text-align: right; }
.vmap .maplibregl-ctrl-group { border-radius: 6px; }

/* 이행수단별 실적 상단: 카드 사이 간격(1.25rem)과 맞추고, 칸 제목과 수치 상자 사이를 띄운다 */
.box-style6.fufl-head { margin-bottom: 1.25rem; }
.box-style6.fufl-head .box { padding-top: 1.1rem; padding-bottom: 1rem; }
.box-style6.fufl-head .box .tit { margin-bottom: .5rem; }
.box-style6.fufl-head .box .s-list { margin-bottom: .75rem; }

/* 장외거래 실적(REC): 상단 수치 띠와 카드 사이는 카드 사이 간격(25px)과 같게(카드 줄이 위로 6px 를 이미 띄운다) */
.oct-head { margin-bottom: calc(1.25rem - 6px); }
/* 평균 체결가 아래 RE100 REC 대비, 진행 현황 제목 옆 글 수 */
/* 상자 높이를 다른 칸과 같게: 문구는 상자 아래쪽 여백 안에 겹쳐 둔다 */
.box-style10 .c-num:has(.oct-vs) { position: relative; }
.box-style10 .inner .oct-vs { position: absolute; left: 0; right: 0; bottom: .35rem; font-size: .65rem; font-weight: 400; color: #b8bcd6; line-height: 1; }
.box-style10 .inner .oct-vs.up { color: #ff8a8f; }
.box-style10 .inner .oct-vs.down { color: #8fb8ff; }
.oct-posts { font-size: .7rem; color: var(--fg-info-text, #64748b); padding: .3rem .8rem; border-radius: 20px; background: #F1F2F7; }
.oct-posts b { color: #333; font-weight: 700; }

/* ===== 관리자 대시보드 지도 라벨 다듬기(2026-10-06) =====
   단지명은 세미볼드 + 메인 그라디언트(variables.css --color-gradient-primary) 글자. */
.cm3d-tag.card .nm, .cm3d-name, .cm3d-card h4 {
  font-weight: 600; background: var(--color-gradient-primary); -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* 전체 보기 라벨: 단지명 + RE %, 사용량 대비 재생에너지 게이지, 두 값 */
.cm3d-tag.card { position: relative; flex-direction: column; align-items: stretch; gap: 9px; padding: 12px 16px 12px;
  border: 0; border-radius: 12px; background: rgba(255,255,255,.96); box-shadow: 0 6px 18px rgba(2,8,23,.35); }
.cm3d-tag.card::before { content: none; }
.cm3d-tag.card .hd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cm3d-tag.card .nm { font-size: 19px; line-height: 1.15; letter-spacing: -.01em; }
.cm3d-tag.card .re { display: inline-flex; align-items: baseline; gap: 3px; font-size: 12px; font-weight: 600; color: #4d7c0f; }
.cm3d-tag.card .re strong { font-size: 18px; font-weight: 700; color: #3f6212; line-height: 1; }
/* 게이지: 전체(메인 그라디언트) = 전력 사용량, 초록 = 재생에너지. 둘 다 왼쪽 0 에서 시작 */
.cm3d-tag.card .gauge { position: relative; display: block; height: 10px; border-radius: 5px; background: rgba(126,132,237,.16); overflow: hidden; }
.cm3d-tag.card .gauge i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; height: auto; border-radius: 5px; }
/* 대시보드 다른 막대와 같은 진하기: 메인 그라디언트를 그대로 쓴다 */
.cm3d-tag.card .gauge i.use { background: var(--color-gradient-primary); }
.cm3d-tag.card .gauge i.gen { background: linear-gradient(90deg, #65a30d, #84cc16); box-shadow: 2px 0 0 0 #fff; }
.cm3d-tag.card .ft { display: flex; justify-content: space-between; gap: 10px; }
.cm3d-tag.card .ft span { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 400; color: #64748b; }
.cm3d-tag.card .ft strong { font-size: 13px; font-weight: 700; color: #1e293b; }
.cm3d-tag.card .ft i { width: 7px; height: 7px; border-radius: 2px; }
.cm3d-tag.card .ft i.u { background: #7E84ED; }
.cm3d-tag.card .ft i.g { background: #65a30d; }
/* 연결선 */
.cm3d-leads line { stroke: rgba(214,220,255,.9); stroke-width: 1.4; stroke-dasharray: 3 3; }
/* 단지별 화면: 다른 단지 이름표 */
.cm3d-name { background-color: rgba(255,255,255,.94); background-image: none; color: #6b74e6; font-weight: 600; border-radius: 8px; border: 0;
  box-shadow: 0 3px 10px rgba(2,8,23,.3); }
.cm3d-card h4 { display: inline-block; font-size: 19px; }

/* 단지별 화면의 RE 표시: 왼쪽 띠 없이 게이지 초록과 같은 계열로 */
.cm3d-re { border-left: 0; border-radius: 8px; padding: 5px 12px; color: #4d7c0f; box-shadow: 0 3px 10px rgba(2,8,23,.3); }
.cm3d-re b { color: #3f6212; }

/* ===== 재생에너지 색 통일(2026-10-06) =====
   연두(라임)는 메인 청보라와 어울리지 않아, 같은 대시보드의 "RE100 달성 기업수" 칸이 쓰는
   에메랄드(#7fd3a8 → #3fa478)로 맞춘다. 글자는 같은 계열의 진한 색. */
.cm3d-tag.card .gauge i.gen { background: linear-gradient(90deg, #3fa478, #7fd3a8); }
.cm3d-tag.card .re { color: #2f8f66; }
.cm3d-tag.card .re strong { color: #1f6f4e; }
.cm3d-tag.card .ft i.g, .cm3d i.g { background: #3fa478; }
.cm3d-svg .gen { fill: #3fa478; }
.cm3d i.ramp { background: linear-gradient(90deg, #7fd3a8, #3fa478); }
.cm3d-re { color: #2f8f66; }
.cm3d-re b { color: #1f6f4e; }
.cm3d-tag em.re { color: #2f8f66; }

/* 단지별 상세 카드의 가로 게이지: 전체 보기 라벨 게이지와 같은 모양·색(사용량 = 메인 그라디언트, 재생에너지 = 에메랄드) */
.cm3d-card .bars em { height: 8px; border-radius: 4px; background: rgba(126,132,237,.16); }
.cm3d-card .bars em i { display: block; width: 0; height: 100%; border-radius: 4px; }
.cm3d i.u { background: #7E84ED; }

/* 세로 게이지(원기둥): 눈금이 없어져 왼쪽 여백 보정이 필요 없다 */
.cm3d-svg { margin-left: 0; }

/* 단지별 화면: 값은 솟은 구역의 층에 붙인다(따로 뜨는 막대 없음). 사용량은 윗면 오른쪽, RE 는 에메랄드 층 왼쪽 */
.cm3d-use.at, .cm3d-re.at { left: auto; bottom: auto; }
.cm3d-use.at { transform: translate(16px, -50%); padding: 5px 12px; border-radius: 8px; background: rgba(255,255,255,.96);
  color: #4b52c9; text-shadow: none; font-weight: 700; box-shadow: 0 3px 10px rgba(2,8,23,.3); }
.cm3d-use.at em { color: #64748b; opacity: 1; }
.cm3d-re.at { transform: translate(calc(-100% - 16px), -50%); }

/* 보고 있는 단지의 RE 표시는 다른 단지 이름표보다 위에 그린다 */
.cm3d-re.at { z-index: 5; }
.cm3d-name { z-index: 1; }

/* 로그인 전 헤더: 아이콘 단추 크기(정사각형)에 글자가 눌리지 않도록 글자 단추로 그린다 */
#header .header-wrap .util > ul > li.login > a { width: auto; padding: 0 0.9rem; color: #fff; font-size: 0.75rem; font-weight: 500; white-space: nowrap; }

/* 회원 유형이 두 가지일 때: 카드 폭을 고정해 가운데에 모은다 */
.select-box.select-box-2 ul { justify-content: center; gap: 1.2rem; }
.select-box.select-box-2 ul li { flex: 0 1 22rem; }
.select-box.select-box-2 ul li > a { display: block; height: 100%; }
.select-box.select-box-2 li .box-style1 { height: 100%; }
@media (min-width: 1201px) { .select-box.select-box-2 li .box-style1 p { white-space: nowrap; } }
.member-h .tit-step-desc { margin-top: 0.6rem; color: var(--color-gray-600, #6b7280); font-size: 0.85rem; text-align: center; }

/* 입력 검증 툴팁: 옆 입력란이나 표 칸에 가려지지 않게 위에 그린다 */
.popper-tooltip { z-index: 30; }

/* ───────── 재생에너지 조달(피그마 대구_v2 4731:105524 메인, 4746:103033 등 수단 상세) ─────────
   피그마 1920 기준 px 를 이 프로젝트 배율(26px = 1.3rem)로 옮겼다 */
.procure-tile { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 50%; }
.procure-tile img { display: block; height: auto; }
.procure-intro .procure-tile { border-radius: .5rem; }
.procure-bullets > li { position: relative; padding-left: .65rem; }
.procure-bullets > li::before { content: ""; position: absolute; left: 0; top: .75em; width: .26rem; height: .26rem; margin-top: -.13rem; border-radius: 50%; background: #7e83ed; }

/* 메인: 제목 옆 안내문 */
/* 제목 모양은 공통 규칙(.cont > .tit-flex > .titT2)을 따른다. 여기서는 안내문 배치만 정한다 */
.tit-flex.procure-head { align-items: baseline; flex-wrap: wrap; gap: .26rem .52rem; margin-bottom: .5rem; }
.procure-head p { font-size: .81rem; line-height: 1.5; color: #333; }

/* 메인: 이행수단 카드(3열) */
.procure-means { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.procure-means .card { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem; border: 1px solid #d0d5e5; border-radius: 10px; background: #fafbfe; }
.procure-means .card .body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.procure-means .card .name { font-size: 1.1rem; font-weight: 700; line-height: 1.5; color: #262626; }
.procure-means .card .desc { min-height: 3em; font-size: .81rem; line-height: 1.5; letter-spacing: -.02em; color: #444; }
.procure-means .card .btns2 { display: flex; flex-wrap: wrap; gap: .49rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid #d0d5e5; }
.procure-means .card .btns2 > button, .procure-means .card .btns2 > a { flex: 1 1 6.5rem; min-width: 0; white-space: nowrap; height: 2rem; justify-content: center; }
/* 단추가 셋(REC)이면 상세보기는 글자 폭만큼만 쓰고, 바로가기 두 개가 남은 폭을 나눠 갖는다 */
.procure-means .card .btns2:has(> :nth-child(3)) > :first-child { flex: 0 0 auto; padding-left: .6rem; padding-right: .6rem; }

/* 상세: 이전으로 */
.procure-back { display: flex; justify-content: flex-end; margin-bottom: 1.25rem; }
.procure-back > button, .procure-back > a { height: 2rem; }

/* 상세: 소개 상자. 강조선은 위쪽에서 좌우 모서리를 돌아 조금 내려온 데서 끊긴다(옅어지지 않는다) */
.procure-intro { position: relative; display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; padding: 1.49rem 1rem;
  border: 1px solid #d0d5e5; border-radius: 10px; background: #fafbfe; }
.procure-intro::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 1.8rem; border: 3px solid #7d86ec; border-bottom: 0;
  border-radius: 10px 10px 0 0; pointer-events: none; }
.procure-intro h3 { font-size: 1.3rem; font-weight: 700; line-height: 1; color: #262626; }
.procure-intro p { margin-top: .49rem; font-size: .91rem; line-height: 1.35; color: #333; }

/* 상세: 2단 */
.procure-detail { display: grid; grid-template-columns: minmax(0, 1245fr) minmax(0, 550fr); gap: 1.25rem; align-items: stretch; }
.procure-detail > .col { padding: 0; display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.procure-detail > .col > .cont { margin: 0; height: auto; padding: 1rem; border: 1px solid #dce0ec; border-radius: 10px; background: #fff; }
.procure-detail > .col > .cont > .titT2 { margin-bottom: 1.25rem; }
.procure-detail > .col > .procure-side { flex: 1; display: flex; flex-direction: column; }

/* 상세: 주요 정보(3 x 2) */
.procure-info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.procure-info { display: flex; align-items: flex-start; gap: .49rem; min-height: 7.1rem; padding: 1rem; border: 1px solid #d0d5e5; border-radius: 10px; background: #fafbfe; }
.procure-info .ico, .procure-steps .ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: .5rem; }
.procure-info .ico { background: #e6eefc; }
.procure-info .ico img, .procure-steps .ico img { display: block; width: 1.2rem; height: 1.2rem; }
.procure-info .txt { flex: 1; min-width: 0; }
.procure-info .lbl { font-size: 1.1rem; font-weight: 700; line-height: 1.5; color: #7e83ed; }
.procure-info ul { font-size: .81rem; line-height: 1.5; letter-spacing: -.02em; color: #444; }

/* 상세: 조달 절차 */
.procure-steps { display: flex; align-items: stretch; }
.procure-steps .step { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; padding: 1rem .52rem;
  border: 1px solid #d0d5e5; border-radius: 10px; background: #fff; text-align: center; }
.procure-steps .ico { background: #eee; margin-bottom: .49rem; }
.procure-steps .no { position: absolute; left: .39rem; top: .3rem; display: inline-flex; align-items: center; justify-content: center; width: 1.2rem; height: 1.2rem;
  border-radius: 50%; background: #7e83ed; color: #fff; font-size: .7rem; font-weight: 700; line-height: 1; }
.procure-steps .name { font-size: 1rem; font-weight: 700; line-height: 1.5; color: #262626; }
.procure-steps .desc { font-size: .81rem; line-height: 1.5; letter-spacing: -.02em; color: #444; }
.procure-steps .arrow { flex: none; align-self: center; width: .9rem; height: .9rem; }

/* 상세: 관련 시스템 바로가기 + 추천 대상(한 카드) */
.procure-link { display: flex; flex-direction: column; gap: .49rem; margin-bottom: 1rem; }
/* 바로가기 단추와 추천 대상은 카드 아래쪽에 붙는다(왼쪽 단과 높이를 맞춘 만큼 설명 칸이 늘어난다) */
.procure-side > .procure-link { flex: 1; }
.procure-side > .procure-link .desc { flex: 1; }
.procure-link .logo { display: flex; align-items: center; gap: 1rem; padding: 1rem; border: 1px solid #dce0ec; border-radius: 10px; background: #fff; }
.procure-link .logo.only, .procure-link .logo.center { justify-content: center; }
.procure-link .logo img { display: block; flex: none; height: 2.25rem; width: auto; }
/* ENERUSE 는 가로로 긴 글자 로고라 높이를 낮춰 다른 기관 표식과 폭을 맞춘다 */
.procure-link .logo img[src$="logo-eneruse.svg"] { height: 1rem; }
.procure-link .logo.only img { height: auto; max-height: 3.2rem; max-width: 13rem; }
.procure-link .name { font-size: 1rem; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; color: #262626; }
.procure-link .sub { font-size: .81rem; line-height: 1.5; color: #333; }
.procure-link .desc { font-size: .81rem; line-height: 1.5; color: #333; }
.procure-link .btn-full > button, .procure-link .btn-full > a { width: 100%; height: 2rem; justify-content: center; }
.procure-rule { margin: 0; border: 0; border-top: 1px solid #dce0ec; }
.procure-recommend { padding: 1.49rem 0 .49rem; }
.procure-recommend .tit { display: flex; align-items: center; gap: .26rem; font-size: 1.1rem; font-weight: 600; line-height: 1.5; letter-spacing: -.02em; color: #262626; }
.procure-recommend .tit img { width: 1rem; height: 1rem; }
.procure-recommend ul { margin-top: .26rem; font-size: .81rem; line-height: 1.5; letter-spacing: -.02em; color: #444; }
.procure-recommend li + li { margin-top: .26rem; }

@media (max-width: 1280px) { .procure-means { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1024px) { .procure-detail { grid-template-columns: 1fr; } }
@media (max-width: 768px) {
  .procure-means, .procure-info-grid { grid-template-columns: 1fr; }
  .procure-steps { flex-direction: column; gap: .39rem; }
  .procure-steps .arrow { transform: rotate(90deg); }
}

/* ───────── 산단기업 대시보드: 고정 요약 줄 + 위젯 2열(피그마 대구_v2 main-dashboard, main-dashboard-setting) ───────── */
/* 요약 줄: 아이콘은 옅은 색 둥근 사각 칸, 게이지는 크게 */
.udb .udb-kpis .stat-tile { align-items: flex-start; gap: 1rem; padding: 1.1rem 1.2rem; }
.udb .udb-kpis .stat-tile .ico { width: 3.2rem; height: 3.2rem; border-radius: .5rem; }
.udb .udb-kpis .stat-tile .ico svg { width: 1.3rem; height: 1.3rem; }
.udb .udb-kpis .stat-tile .ico.tone-yellow { background: #fff5d6; color: #f0a514; }
.udb .udb-kpis .stat-tile .ico.tone-green { background: #ecf7ed; color: #3fa860; }
.udb .udb-kpis .stat-tile .ico.tone-blue { background: #e6eefc; color: #3c66d9; }
.udb .udb-kpis .udb-ring { width: 5rem; height: 5rem; align-self: center; }
.udb .udb-kpis .stat-tile .lbl { font-size: 1rem; line-height: 1.6rem; }
.udb .udb-kpis .stat-tile .val { font-size: 1.7rem; line-height: 2.2rem; }
.udb .udb-kpis .stat-tile .val em { font-size: .8rem; }

/* 배너의 대시보드 설정 단추(시계·날씨 알약 왼쪽) */
.udb-config-btn { display: inline-flex; align-items: center; align-self: stretch; gap: .35rem; min-height: 1.7rem; padding: 0 .8rem; border-radius: var(--util-btn-radius, .5rem);
  background: var(--color-util-bg, #4b4c59); color: #fff; font-size: .75rem; font-weight: 500; white-space: nowrap; transition: background .2s; }
.udb-config-btn:hover, .udb-config-btn:focus-visible { background: #5a5b6a; color: #fff; }

/* 위젯은 한 줄에 두 개 고정 */
.udb-widgets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.dashboard-wrap .udb-card { display: flex; flex-direction: column; min-width: 0; min-height: 20.5rem; padding: 1rem; overflow: hidden; }
.udb-card > .udb-head { flex: none; margin-bottom: 1rem; }
.udb-card > .udb-body { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }
.udb-card > .udb-body > .energy-note { margin-top: auto; padding-top: .75rem; }
/* 설정 화면: 위젯 안쪽은 누를 수 없고 통째로 끌 수 있다 */
.udb-card.is-config { height: 100%; cursor: grab; }
.udb-card > .udb-cover { position: absolute; inset: 0; z-index: 5; }
/* 예전 2단 틀(.col-wrap) 안에 놓인 위젯도 한 줄에 두 개 */
.dashboard-wrap .col-wrap > .udb-card { flex: 0 0 calc(50% - .5rem); margin: 0 .25rem .5rem; }

/* 이행수단 일러스트 칸(RE100 화면 공용) */
.means-illust { flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 25%; border: 1px solid rgba(0, 0, 0, .1); vertical-align: middle; }
.means-illust.round { border: 0; border-radius: 50%; }
.means-illust img { display: block; height: auto; }
.means-illust.tone-white { background: #fff; }
.means-illust.tone-yellow { background: #fff5d6; }
.means-illust.tone-blue { background: #e6eefc; }
.means-illust.tone-green { background: #ecf7ed; }
.means-illust.tone-purple { background: #f2f2ff; }

/* 이행수단별 사용 현황 */
.udb-means { flex: 1; gap: .75rem; }
.udb-means > li { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.4rem .5rem; border-color: #d0d5e5; border-radius: 10px; }
.udb-means .name { margin-top: .9rem; font-size: 1rem; font-weight: 500; }
.udb-means .val { margin-top: .5rem; font-size: 1.5rem; }
.udb-means .pct { margin-top: .4rem; font-size: .85rem; }

/* REC 보유 현황: 옅은 칸 + 보라 숫자, 막대는 옅은 바탕 위에 숫자를 얹는다 */
.udb-rec { gap: .5rem; }
.udb-rec > li { padding: 1rem .3rem; border-color: #d0d5e5; border-radius: 10px; background: #fafbfe; }
.udb-rec span { font-size: .8rem; font-weight: 500; }
.udb-rec strong { margin-top: .35rem; font-size: 1.35rem; font-weight: 700;
  background: linear-gradient(90deg, #7d85ec, #8f8ff5); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #7d85ec; }
.udb-sub { margin: 1.2rem 0 .6rem; font-size: .9rem; }
.udb-bars > li { gap: .5rem; margin-bottom: .45rem; font-size: .75rem; }
.udb-bars .lbl { width: 4.6rem; font-weight: 500; }
.udb-bars .bar { display: flex; align-items: center; gap: .4rem; height: 1.5rem; padding: 0 .35rem; border-radius: .4rem; background: #f2f3fb; }
.udb-bars .bar i { flex: none; height: .75rem; max-width: calc(100% - 3rem); border-radius: .25rem; background: linear-gradient(90deg, #7d85ec, #8fa3ee); }
.udb-bars .bar b { font-weight: 600; color: var(--fg-title); }

/* 표 위젯: 피그마처럼 조금 크게 */
.dashboard-wrap .udb-card .tbl-st1 th, .dashboard-wrap .udb-card .tbl-st1 td { font-size: .75rem; }

/* 대시보드 설정 화면 */
.udb-config-grid { margin: 0 0 1rem; }
.udb-config-grid .react-grid-item > .udb-card { position: relative; }
.udb-config-grid .react-grid-item.react-grid-placeholder { border-radius: 10px; background: #7d85ec; opacity: .15; }
.dashboard-wrap .udb-config-grid .delete-btn { top: .85rem; right: .9rem; z-index: 19; display: inline-flex; align-items: center; justify-content: center;
  width: 1.4rem; height: 1.4rem; border: 1px solid #ccc; border-radius: .2rem; background: #fff; color: var(--fg-body); }
.dashboard-wrap .udb-config-grid .delete-btn:hover { border-color: #e5484d; color: #e5484d; }
.dashboard-wrap .udb-config-grid .delete-btn > i { line-height: 1; }
.udb-config-empty { padding: 3rem 1rem; border: 1px dashed #c9cde0; border-radius: 10px; text-align: center; font-size: .85rem; color: var(--fg-info-text); }

@media (max-width: 1024px) {
  .udb-widgets { grid-template-columns: 1fr; }
  .dashboard-wrap .col-wrap > .udb-card { flex-basis: 100%; }
  .udb-config-btn span { display: none; }
}

/* RE 달성률 위젯: 왼쪽은 일러스트 뒤에서 차오르는 게이지, 오른쪽은 조달 경로별 달성률 */
.udb-re { flex: 1; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 1.2rem; align-items: center; }
.udb-re-l { display: flex; flex-direction: column; align-items: center; }
.udb-re-now { display: flex; align-items: baseline; gap: .3rem; font-size: .9rem; font-weight: 600; color: var(--fg-title); }
.udb-re-now > svg { align-self: center; color: #f5b301; fill: #f5b301; }
.udb-re-now strong { margin-left: .3rem; font-size: 2.1rem; font-weight: 700; line-height: 1;
  background: linear-gradient(90deg, #7d85ec, #689fd6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #7d85ec; }
.udb-re-now em { font-style: normal; font-weight: 700; color: #7d85ec; }
.udb-re-illust { position: relative; width: min(100%, 10.5rem); margin-top: .5rem; }
.udb-re-illust > img { position: relative; display: block; width: 100%; height: auto; }
/* 게이지 자리 = 그림 속 배터리 몸통(328 x 297 기준 x 88~188, y 30~170) */
/* 그림 속 배터리 몸통은 반투명 유리다(좌우 테두리는 그림에 남아 있다). 그 안쪽 자리에 반투명 원기둥이 달성률만큼 찬다 */
.udb-re-gauge { position: absolute; left: 29.9%; width: 24.4%; top: 14.1%; height: 43.8%; display: flex; align-items: flex-end; justify-content: center; }
.udb-re-gauge > i { position: relative; display: block; width: 100%; min-height: 0;
  background: linear-gradient(90deg, #6f73d6 0%, #8a8ee6 22%, #a3a7f0 32%, #7e82de 48%, #6468cc 62%, #585cc0 100%); transition: height .8s ease-out; }
/* 원기둥 윗면: 채워진 높이 끝에 밝은 타원을 얹는다 */
.udb-re-gauge > i::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 0; padding-top: 16%; transform: translateY(-50%); border-radius: 50%;
  background: linear-gradient(90deg, #9da1ee, #bfc2f7 40%, #8d91e6); }
.udb-re-gauge > svg { position: absolute; left: 50%; top: 50%; width: 36%; height: auto; transform: translate(-50%, -50%); color: #fff; fill: #fff; stroke-width: 1;
  filter: drop-shadow(0 0 2px rgba(90, 95, 160, .5)); }
.udb-re-r { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.udb-re-goal > p:first-child { display: flex; align-items: baseline; justify-content: space-between; font-size: .8rem; font-weight: 600; color: var(--fg-title); }
.udb-re-goal > p:first-child b { font-size: 1.1rem; color: #7d85ec; }
.udb-re-bar { display: block; height: .7rem; margin: .35rem 0 .3rem; border-radius: .35rem; background: #eef0f6; overflow: hidden; }
.udb-re-bar i { display: block; height: 100%; border-radius: .35rem; background: linear-gradient(90deg, #7d85ec, #689fd6); transition: width .8s ease-out; }
.udb-re-note { font-size: .68rem; color: var(--fg-info-text); }
.udb-re-means > li { display: flex; align-items: center; gap: .5rem; padding: .4rem 0; border-top: 1px solid #eef0f5; font-size: .75rem; }
.udb-re-means .nm { flex: 1; min-width: 0; font-weight: 600; color: var(--fg-title); }
.udb-re-means .kwh { color: #777; white-space: nowrap; }
.udb-re-means b { flex: none; width: 3.2rem; text-align: right; color: var(--fg-title); }
.udb-rec.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.udb-asof { margin-left: .5rem; font-style: normal; font-size: .68rem; font-weight: 400; color: var(--fg-info-text); }
@media (max-width: 768px) { .udb-re { grid-template-columns: 1fr; } }

/* 내 거래: 구분 뱃지(게시판과 같은 n-badge)와 제목 사이 간격 */
/* 판매·구매 뱃지는 내 거래의 모양으로 통일한다(거래 게시판 표, 대시보드 위젯, 내 거래) */
.n-badge1, .n-badge2, .titT2 > .n-badge1, .titT2 > .n-badge2 { display: inline-block; padding: .05rem .55rem; border-radius: 3px; font-size: .68rem; font-weight: 500; line-height: 1.5; text-align: center; white-space: nowrap; }
.md-kind, .titT2 > .md-kind { margin-right: .4rem; vertical-align: 2px; }
.titT2 > .md-kind::before, .titT2 > .md-kind::after { content: none; }

/* REC 장외거래 현황 위젯: 최근 거래 목록 */
.udb-deals > li { border-bottom: 1px solid #e6e8f0; }
.udb-deals > li:last-child { border-bottom: 0; }
.udb-deals > li > a { display: flex; align-items: center; gap: .5rem; padding: .55rem .2rem; font-size: .75rem; color: var(--fg-body); }
.udb-deals > li > a:hover { background: #f8f8fc; }
.udb-deals .what { font-weight: 600; color: var(--fg-title); white-space: nowrap; }
.udb-deals .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #777; }
.udb-deals .empty { padding: .8rem 0; font-size: .7rem; color: var(--fg-info-text); }

/* 표 행 어긋남 방지(플로우 결함 'Grid Row줄 안맞음').
   번호·체크박스 칸(왼쪽 고정 영역)은 행 높이가 41px 로 고정인데, 본문 칸 안의 배지나 아이콘이 한 줄 높이(21px)를 넘으면
   본문 행만 42px 로 늘어나 행마다 1px 씩 밀린다. 셀 안의 배지·아이콘은 20px 를 넘지 않게 한다 */
.tui-grid-cell [class^=p-badge], .tui-grid-cell [class^=n-badge], .tui-grid-cell .sm-main {
  box-sizing: border-box; height: 1rem; padding-top: 0; padding-bottom: 0; line-height: calc(1rem - 2px); vertical-align: middle; }
.tui-grid-cell .sm-main { line-height: 1rem; }
.tui-grid-cell .rm-mine { width: 1rem; height: 1rem; }

/* 사업장 현황 탭의 요약 카드 값: 34px(대시보드 첫 줄 카드 값과 같은 크기) */
.icon-tit-box .value > strong { font-size: 1.7rem; }

/* 가입 3단계(고객정보): 항목 폭이 31rem 으로 고정돼 두 묶음이 한 줄에 들어가지 못하고 한 열로 쌓였다.
   폭 고정을 풀어 묶음 두 개가 나란히 놓이게 한다(좁은 화면에서는 기존 규칙대로 한 열). */
.member-h .join-box > div.client-info-con .inp-flex-con .flex-col { min-width: 0; }
.member-h .join-box > div.client-info-con .inp-flex-con .inp-flex { width: auto; min-width: 0; }

/* REC 시세조회의 REC·SMP 탭 가격 동향(플로우 6974): 피그마 아이콘(SVG)은 정사각형이 아니다(26x40, 37x29, 36x31, 35x35).
   기존 규칙이 아이콘을 2rem 정사각형으로 맞추므로 SVG 아이콘은 제 크기로 둔다 */
.icon-box-wrap5 .icon-box1 > div .img-tit img[src$=".svg"],
.icon-box-wrap5 .icon-box2 > div .img-tit img[src$=".svg"] { width: auto; height: auto; }