@charset "UTF-8";
/*-------------------------------------------------
title : 관리자 대시보드(탄소 중심). pages/db/admin/DbAdminBase
desc  : 왼쪽 큰 배출 지도 + 오른쪽 지표 칸, 아래 차트 줄.
        색은 variables.css 토큰과 config/colors.ts 의 가이드 값을 쓴다.
        배출 #b4563c(ENERGY_COLORS.emission), 감축 #009853(가이드에 감축 색이 없어 자립률 초록을 쓴다)
        지도 위 글상자는 흰색 반투명(기존 대시보드 지도 라벨과 같은 느낌). 여수 화면처럼 모서리를 둥글리지 않는다
-------------------------------------------------*/
.cdb { --cdb-emit: var(--energy-emission); --cdb-redc: var(--energy-self-sufficiency); --cdb-gap: 1rem; --cdb-radius: 0;
  --cdb-glass: rgba(255, 255, 255, .86); --cdb-glass-hover: rgba(255, 255, 255, .96); }

/* ── 윗단: 지도(왼쪽)와 지표 칸(오른쪽) ── */
/* 윗단은 한 화면 높이다. 오른쪽 칸은 그 안에 맞추고, 화면이 낮아 넘치면 칸 안에서만 스크롤한다 */
.cdb-main { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; gap: var(--cdb-gap); margin-bottom: var(--cdb-gap);
  height: max(34rem, calc(100vh - 8.75rem)); }
.cdb-rail { display: flex; flex-direction: column; gap: .75rem; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.cdb-rail > .cont { flex: none; padding: .75rem .9rem; }
/* 오른쪽 칸 아래 끝을 지도와 맞춘다: 남는 높이는 배출 상위 사업장 칸이 채운다.
   목록 칸의 높이를 내용과 떼어(absolute) 재고, 들어가는 만큼 줄을 그린 뒤 줄이 높이를 나눠 갖는다 */
.cdb-rail > .cdb-top { flex: 1 1 0; min-height: 16rem; display: flex; flex-direction: column; }
.cdb-top-body { flex: 1; min-height: 0; position: relative; }
.cdb-rail > .cdb-top .cdb-top-body > ol { position: absolute; inset: 0; display: flex; flex-direction: column; }
.cdb-rail > .cdb-top li { flex: 1 1 0; height: auto; min-height: 2.3rem; max-height: 3.4rem; }
.cdb-rail > .cdb-top li.first { flex-grow: 1.4; min-height: 3rem; max-height: 4.4rem; }
.cdb-rail .titT2 { margin-bottom: .4rem; font-size: .92rem; }
.cdb-rail > .cont { border-radius: var(--cdb-radius); }

/* 지도: 칸을 꽉 채우고 제목, 단지 선택, 범례를 지도 위에 띄운다 */
.cdb-map { position: relative; min-width: 0; border-radius: var(--cdb-radius); overflow: hidden; background: var(--color-dark-900); }
.cdb-map > .vmap { position: absolute; inset: 0; border-radius: 0; }
.cdb-map-head { position: absolute; top: 14px; left: 16px; right: 60px; z-index: 5; display: flex; align-items: center; gap: .75rem; pointer-events: none; }
.cdb-map-head > * { pointer-events: auto; }
.cdb-map-head h2 { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--color-white); text-shadow: 0 1px 3px rgba(0, 0, 0, .8), 0 0 10px rgba(0, 0, 0, .45); white-space: nowrap; }
.cdb-map-head .choice-btns { background: var(--cdb-glass); border-radius: 0; backdrop-filter: blur(4px); }
/* 점 설명: (i) 아이콘 하나로 접어 두고, 올리거나 눌러(포커스) 펼친다 */
.cdb-map-info { position: relative; }
.cdb-map-info > button { width: 26px; height: 26px; border: 0; border-radius: 50%; cursor: help; display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-dark-900); background: var(--cdb-glass); box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.cdb-map-key { position: absolute; top: calc(100% + 8px); left: 0; z-index: 6; display: none; flex-direction: column; gap: .4rem; margin: 0;
  padding: .6rem .75rem; font-size: .72rem; color: var(--color-dark-900); background: var(--cdb-glass-hover); box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }
.cdb-map-info:hover .cdb-map-key, .cdb-map-info:focus-within .cdb-map-key { display: flex; }
.cdb-map-key > span { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.cdb-map-key .k-emit { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--cdb-emit); background: var(--color-white); color: var(--cdb-emit);
  font-size: 9px; font-weight: 700; font-style: normal; display: inline-flex; align-items: center; justify-content: center; }
.cdb-map-key .k-tree { color: var(--cdb-redc); display: inline-flex; }
.cdb-map-key .k-zone { width: 14px; height: 10px; border: 1.5px solid var(--color-accent-cyan); background: rgba(33, 208, 184, .25); }

/* 두 카드는 늘 같은 너비다 */
.cdb-legend { position: absolute; left: 14px; bottom: 14px; z-index: 5; display: grid; grid-template-columns: repeat(2, 16.5rem); gap: .6rem; margin: 0; padding: 0; list-style: none; }
.cdb-legend button { display: grid; gap: .15rem; width: 100%; height: 100%; padding: .75rem 1rem; text-align: left; border-radius: 0; cursor: pointer;
  color: var(--color-dark-900); background: var(--cdb-glass); border: 1px solid rgba(255, 255, 255, .6); backdrop-filter: blur(4px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .2); transition: border-color .15s, background .15s; }
.cdb-legend button:hover { background: var(--cdb-glass-hover); }
.cdb-legend button.on { border-color: var(--color-primary-700); box-shadow: 0 0 0 2px var(--color-primary-700), 0 2px 12px rgba(0, 0, 0, .2); }
.cdb-legend .nm { display: flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 600; }
.cdb-legend .nm i { width: .75rem; height: .75rem; }
/* 배출(탄소발자국)과 감축(나무) 한 줄씩 */
.cdb-legend .row { display: flex; align-items: baseline; gap: .35rem; white-space: nowrap; }
.cdb-legend .row svg { align-self: center; flex: none; }
.cdb-legend .row.em svg, .cdb-legend .row.em strong { color: var(--cdb-emit); }
.cdb-legend .row.rd svg, .cdb-legend .row.rd strong { color: var(--cdb-redc); }
.cdb-legend .row strong { font-size: 1.2rem; font-weight: 700; line-height: 1.25; }
.cdb-legend .row em { font-size: .68rem; font-weight: 400; font-style: normal; color: var(--color-gray-700); overflow: hidden; text-overflow: ellipsis; }
.cdb-legend .meta { display: flex; gap: .6rem; font-size: .7rem; color: var(--color-gray-700); }
.cdb-legend .cdb-diff { margin-top: .1rem; }

/* ── 핵심 지표: 장외거래 실적의 카드 묶음(box-style10)을 2 x 2 로 놓는다 ── */
.cdb-kpi-wrap .titT2 { margin-bottom: .5rem; }
.cdb-kpi.box-style10 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.cdb-kpi .box { width: auto; min-width: 0; } /* 공용 모바일 규칙(.box-style10 .box { width: 49% })을 푼다 */
.cdb-kpi .box .inner { position: relative; height: 100%; padding: .45rem .5rem; overflow: hidden; }
.cdb-kpi .box .inner p { margin-bottom: .25rem; padding-bottom: 0; font-size: .75rem; }
.cdb-kpi .c-num { padding: .25rem; white-space: nowrap; }
.cdb-kpi .box.emit .inner { border-top: 3px solid var(--cdb-emit); }
.cdb-kpi .box.redc .inner { border-top: 3px solid var(--cdb-redc); }
/* 카드 모양은 그대로 두고, 위에 흰 반투명 빛을 얹어 무게를 덜고 은은히 빛나 보이게 한다 */
.cdb-kpi .box .inner::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .18) 45%, rgba(255, 255, 255, 0) 70%); }
.cdb-kpi .c-num { background: rgba(55, 60, 81, .82); }
.cdb-sub { display: block; margin-top: .25rem; font-size: .68rem; color: var(--color-gray-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 증감: 배출은 줄어야 좋다. 색만으로 알리지 않고 글(증가, 감소)과 화살표를 함께 쓴다 */
.cdb-diff { display: inline-block; margin-top: .3rem; font-size: .68rem; font-style: normal; font-weight: 600; }
.cdb-diff.up { color: var(--cdb-emit); }
.cdb-diff.up::before { content: "▲ "; }
.cdb-diff.down { color: var(--cdb-redc); }
.cdb-diff.down::before { content: "▼ "; }
.cdb-diff.flat, .cdb-diff.none { color: var(--color-gray-600); font-weight: 400; }

/* ── 아랫단: 추이, 업종, 에너지 ── */
/* 칸 높이는 차트 높이(약 250px)에 제목과 여백만 더한 만큼이다 */
.cdb-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--cdb-gap); grid-auto-rows: 18rem; }
.cdb-row > div { min-width: 0; min-height: 0; }
.cdb-row .cont { height: 100%; position: relative; border-radius: var(--cdb-radius); }
.cdb-a-trend { grid-column: 1 / 7; }
.cdb-a-redc { grid-column: 7 / 13; }
.cdb-a-bz { grid-column: 1 / 7; }
.cdb-a-enrg { grid-column: 7 / 13; }
/* 제목 옆 한 줄 요약(배출 증감, 감축의 소나무 환산). 좁으면 다음 줄로 내려간다. 오른쪽 + 버튼 자리는 비운다 */
.cdb-tit-note { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .75rem; row-gap: .2rem; padding-right: 2rem; }
.cdb-tit-sub { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 400; font-style: normal; color: var(--color-gray-700); }
.cdb-tit-sub svg { flex: none; color: var(--color-gray-500); }
.cdb-tit-sub b { font-weight: 700; }
.cdb-tit-sub b.em { color: var(--cdb-emit); }
.cdb-tit-sub b.rd { color: var(--cdb-redc); }

/* + (더 보기) 버튼: 올리면 옅게 물들고, 키보드 포커스에는 테두리(접근성 기준 WCAG 2.4.7) */
.cdb .more-btn { transition: background .15s, border-color .15s, color .15s; cursor: pointer; }
.cdb .more-btn:hover { background: var(--color-secondary-100); border-color: var(--color-secondary-300); color: var(--color-primary-700); }
.cdb .more-btn:focus-visible { outline: 2px solid var(--color-primary-700); outline-offset: 2px; }

/* 배출 상위 사업장: 한 줄에 순위, 이름, 배출량, 전년 대비. 1위는 크게, 나머지는 작게 */
.cdb-top ol { margin: 0; padding: 0; list-style: none; }
.cdb-top li { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr) auto 4.6rem; align-items: center; gap: .6rem; height: 2.1rem; padding: 0 .35rem;
  border-bottom: 1px solid var(--color-gray-200); transition: background .15s; }
.cdb-top li:last-child { border-bottom: 0; }
.cdb-top .rk { width: 1.2rem; height: 1.2rem; background: var(--color-dark-900); color: var(--color-white); font-size: .65rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; }
.cdb-top .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; font-weight: 600; }
.cdb-top .qt { font-size: .8rem; font-weight: 700; white-space: nowrap; text-align: right; }
.cdb-top .qt em { margin-left: .2rem; font-size: .62rem; font-weight: 400; font-style: normal; color: var(--color-gray-600); }
.cdb-top .cdb-diff { margin: 0; font-size: .65rem; white-space: nowrap; text-align: right; }
/* 1위 */
.cdb-top li.first { height: 3rem; grid-template-columns: 1.7rem minmax(0, 1fr) auto 4.6rem; }
.cdb-top li.first .rk { width: 1.7rem; height: 1.7rem; font-size: .85rem; background: var(--cdb-emit); }
.cdb-top li.first .nm { font-size: .95rem; }
.cdb-top li.first .qt { font-size: 1.1rem; color: var(--cdb-emit); }
.cdb-top li.blank .rk { background: var(--color-gray-300); }
.cdb-top li.blank .nm { color: var(--color-gray-400); font-weight: 400; }
/* 마우스를 올리면 배경만 바뀐다(지도 점도 함께 강조된다) */
.cdb-top li.on { background: var(--color-secondary-100); }

/* 처리할 일: 인사말 뒤에 문장으로. 숫자는 밑줄과 굵기로 강조하고 누르면 그 화면으로 간다 */
/* 맨 위 줄: 처리할 일 문장과 오른쪽 시계, 날씨를 세로 가운데로 맞춘다 */
.cdb .main-tit { gap: 1rem; align-items: center; }
.cdb .main-tit .name { white-space: nowrap; }
.cdb-todo { margin: 0 auto 0 0; font-size: 1rem; line-height: 1.4; color: var(--color-gray-700); }
.cdb-todo .n { margin: 0 .1rem; font-weight: 700; color: var(--color-dark-900); text-decoration: underline; text-underline-offset: 3px; }
.cdb-todo .n.on { color: var(--color-primary-700); font-size: 1.12rem; }
.cdb-todo .n:hover { color: var(--color-primary-700); text-decoration-thickness: 2px; }
.cdb-empty { margin: .5rem 0; font-size: .75rem; color: var(--color-gray-600); }

/* ── 움직임: 카드가 차례로 떠오르고 막대가 자란다 ── */
@keyframes cdb-rise { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
.cdb-legend li, .cdb-kpi .box, .cdb-rail > .cont, .cdb-row > div { animation: cdb-rise .5s ease-out both; }
.cdb-legend li:nth-child(2), .cdb-kpi .box:nth-child(2) { animation-delay: .08s; }
.cdb-kpi .box:nth-child(3) { animation-delay: .16s; }
.cdb-kpi .box:nth-child(4) { animation-delay: .24s; }
.cdb-rail > .cont:nth-child(2) { animation-delay: .15s; }
.cdb-rail > .cont:nth-child(3) { animation-delay: .25s; }
@media (prefers-reduced-motion: reduce) {
  .cdb-legend li, .cdb-kpi .box, .cdb-rail > .cont, .cdb-row > div { animation: none; }
}

@media (max-width: 1400px) {
  .cdb-main { grid-template-columns: minmax(0, 1fr); height: auto; }
  .cdb-map { height: 34rem; }
  .cdb-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cdb-kpi-wrap { grid-column: 1 / 4; }
  .cdb-kpi.box-style10 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cdb-rail > .cdb-top { grid-column: span 2; min-height: 0; }
  .cdb-top-body { position: static; }
  .cdb-rail > .cdb-top .cdb-top-body > ol { position: static; }
  .cdb-rail > .cdb-top li { flex: none; height: 2.1rem; min-height: 0; }
  .cdb-rail > .cdb-top li.first { height: 3rem; }
  .cdb-a-trend, .cdb-a-redc { grid-column: 1 / 13; }
  .cdb-a-bz, .cdb-a-enrg { grid-column: span 6; }
}
@media (max-width: 768px) {
  .cdb .main-tit { flex-wrap: wrap; }
  .cdb-todo { order: 3; width: 100%; margin: .3rem 0 0; font-size: .78rem; }
  /* 모바일: 지도 위에는 제목과 단지 선택만 두고, 단지 카드는 지도 아래로 내린다 */
  .cdb-map { height: auto; display: flex; flex-direction: column; }
  .cdb-map > .vmap { position: relative; inset: auto; height: 22rem; }
  .cdb-map-head { top: 10px; left: 10px; right: 50px; flex-wrap: wrap; gap: .4rem; }
  .cdb-map-head h2 { font-size: .9rem; }
  .cdb-legend { position: static; padding: .6rem; gap: .5rem; grid-template-columns: minmax(0, 1fr); }
  .cdb-kpi .box .inner p { font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cdb-kpi .c-num { font-size: .6rem; }
  .cdb-kpi .c-num em { font-size: .9rem; }
  .cdb-legend button { padding: .6rem .7rem; }
  .cdb-legend .row { flex-wrap: wrap; white-space: normal; }
  .cdb-legend .row em { white-space: normal; }
  .cdb-legend strong { font-size: 1.1rem; }
  .cdb-legend .meta { flex-direction: column; gap: 0; }
  .cdb-rail { grid-template-columns: minmax(0, 1fr); }
  .cdb-kpi-wrap { grid-column: auto; }
  .cdb-kpi.box-style10 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cdb-rail > .cdb-top { grid-column: auto; }
  .cdb-a-bz, .cdb-a-enrg { grid-column: 1 / 13; }
}

/* 핵심 지표 카드는 그 화면으로 가는 링크다 */
.cdb-kpi a.box { display: block; color: inherit; text-decoration: none; }
.cdb-kpi a.box .inner { transition: background .15s, border-color .15s; }
.cdb-kpi a.box:hover .inner { background-color: var(--color-secondary-210); }
.cdb-kpi a.box:focus-visible { outline: 2px solid var(--color-primary-700); outline-offset: 2px; }
.cdb-top li.link { cursor: pointer; }
.cdb-top li.link:focus-visible { outline: 2px solid var(--color-primary-700); outline-offset: -2px; }