/* ==================================================================
   내 거래 (/ot/{emission|rec}/deals)
   ------------------------------------------------------------------
   대구(dg-front)의 re100-renewal.css 에서 이 화면이 쓰는 규칙만 옮겼다.

   ★ 색을 그대로 가져오지 않았다. 대구 스타일시트는 자체 토큰
     (--fg-point · --fg-title · --fg-info-text)과 보라색(#7877DF)을 쓰는데,
     그것은 대구 브랜드다. 여기서는 여수가 이미 가진 variables.css 토큰으로
     바꿔 적었다 — 색상 통합(E) 작업이 토큰만 고치면 이 화면까지 함께 따라온다.
     하드코딩한 hex 는 중립 회색과 상태색(주의·성공·오류)뿐이다.

   ★ 클래스 이름 앞에 md- 를 붙여 두었다. 이 화면 밖으로 번지지 않는다.
   ================================================================== */

/* ---- 지표 띠: 네 칸을 한 묶음으로 쓰는 변형 (KpiStrip accent={false}) ---- */
.box-style6.is-flat > .right { width: 100%; }

/* ---- 검색조건 ---- */
.search-filter { display: flex; align-items: center; gap: .5rem 1rem; }

.search-filter > ul { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; }

.search-filter .search-field { display: flex; align-items: center; gap: .75rem; }

.search-filter-actions { display: flex; gap: .35rem; flex: none; }

.sub-wrap > .search-filter { margin-bottom: 1.25rem; }

/* ---- 버튼 묶음에서 하나 고르기 (ChoiceButtons) ---- */
.choice-btns { display: inline-flex; flex-wrap: wrap; gap: .5rem; }

.choice-btns > button { height: 2rem; padding: 0 .8rem; border: 1px solid var(--color-gray-200); border-radius: .3rem;
  background: var(--color-white); color: var(--color-gray-800); font-size: .75rem; line-height: 1; cursor: pointer; }

.choice-btns > button:hover { border-color: var(--color-primary); }

.choice-btns > button.on { border-color: var(--color-primary); background: var(--md-tint, #eaf1f7);
  color: var(--color-primary); font-weight: 600; }

/* ---- 주의 문구 목록 ---- */
.energy-note { margin-top: .75rem; }

.energy-note > li { position: relative; padding-left: 1rem; font-size: .7rem; line-height: 1.5; color: var(--color-primary); }

.energy-note > li::before { content: "※"; position: absolute; left: 0; }

.rs-empty { padding: 2rem 0; text-align: center; font-size: .75rem; color: var(--color-gray-500); }

/* ---- 제목 옆 뱃지 ---- */
.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: var(--color-gray-600);
  vertical-align: middle; white-space: nowrap; }

.tit-btns-wrap .tit-badge { flex: none; margin-left: .5rem; }

/* ---- 좌우 두 칸 ---- */
.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 var(--color-gray-100); }

.md-list > li { border-bottom: 1px solid var(--color-gray-100); }

.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: var(--color-gray-50); }

.md-row.on { background: var(--md-tint, #eaf1f7); box-shadow: inset 3px 0 0 var(--color-primary); }

.md-row .main { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }

.md-row .tit { font-size: .78rem; font-weight: 600; color: var(--color-gray-800); }

.md-row .sub { font-size: .65rem; color: var(--color-gray-500); 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, .titT2 > .md-kind { margin-right: .4rem; vertical-align: 2px; }

/* 여수 titT2 는 ::before 로 장식을 붙인다. 뱃지에는 붙지 않게 한다 */
.titT2 > .md-kind::before, .titT2 > .md-kind::after { content: none; }

.md-unread { display: inline-flex; align-items: center; gap: .15rem; padding: 0 .4rem; border-radius: 10px;
  background: var(--color-primary); color: var(--color-white); font-size: .6rem; }

.md-empty { padding: 2rem .5rem; text-align: center; font-size: .72rem; color: var(--color-gray-500); }

.md-go { display: inline-flex; align-items: center; gap: .2rem; margin-top: .6rem; color: var(--color-primary); font-weight: 600; }

/* ---- 오른쪽: 진행 단계 ---- */
.md-detail-head h5 { 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: var(--color-gray-100); }

.md-steps .lbl { font-size: .65rem; color: var(--color-gray-500); }

.md-steps li.done .bar { background: var(--color-primary); }

.md-steps li.done .lbl { color: var(--color-gray-600); }

/* 지금 칸은 색만으로 구분하지 않는다 — 사선 무늬와 굵은 라벨을 함께 쓴다(WCAG SC 1.4.1) */
.md-steps li.now .bar { background: repeating-linear-gradient(135deg,
  var(--color-primary) 0 6px, var(--color-accent-sky) 6px 12px); }

.md-steps li.now .lbl { color: var(--color-primary); font-weight: 700; }

.md-steps li.stop .bar { background: var(--color-gray-400); }

.md-steps li.stop .lbl { color: var(--color-gray-600); font-weight: 700; }

/* ---- 안내 띠 ---- */
.md-guide { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .7rem .9rem; border-radius: 8px; background: var(--color-gray-50); }

.md-guide.myTurn { background: #fff6ec; }

.md-guide p { font-size: .75rem; color: var(--color-gray-700); }

.md-guide p b { margin-right: .4rem; color: var(--color-gray-800); }

.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: var(--color-gray-500); }

.md-terms dd { margin: .1rem 0 0; font-size: .8rem; font-weight: 600; color: var(--color-gray-800); }

.md-notes { margin-top: .5rem; }

/* ---- RE100 실적 등록 안내 ---- */
.md-import { display: flex; align-items: center; gap: .6rem; margin-top: .9rem; padding: .7rem .9rem;
  border: 1px solid #cfe9d8; border-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 var(--color-gray-100); }

.md-msg-head { display: flex; align-items: center; gap: .3rem; margin-bottom: .5rem; font-size: .65rem; color: var(--color-gray-500); }

.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(--color-gray-500); }

.md-msg-off { margin-top: 1rem; border-top: 1px solid var(--color-gray-100); }

.md-day { align-self: center; padding: 0 .6rem; border-radius: 10px; background: #f1f2f7; font-size: .6rem; color: var(--color-gray-500); }

.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: var(--color-gray-500); }

/* 꼬리 모서리를 한쪽만 깎아, 색을 못 봐도 보낸 쪽을 알 수 있게 한다 */
.md-bubble.theirs { align-self: flex-start; background: #f1f2f7; color: var(--color-gray-800); border-top-left-radius: 2px; }

.md-bubble.mine { align-self: flex-end; background: var(--md-tint, #eaf1f7); color: var(--color-primary); 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 var(--color-gray-200);
  border-radius: 6px; font-size: .75rem; resize: vertical; }

.md-compose textarea:focus { outline: none; border-color: var(--color-primary); }

/* 보내기 버튼을 입력 칸 높이에 맞춘다 */
.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; }

.md-count { font-size: .6rem; color: var(--color-gray-400); }

.md-error { grid-column: 1 / -1; font-size: .68rem; color: var(--color-btn-error); }

/* ---- 배출권 확보 현황 (#25) ---- */
.md-secured { margin-bottom: .75rem; }

.md-secured-table { overflow-x: auto; }

.md-secured-table table { width: 100%; border-collapse: collapse; }

.md-secured-table th, .md-secured-table td { padding: .45rem .5rem; border-bottom: 1px solid var(--color-gray-100);
  font-size: .72rem; white-space: nowrap; }

.md-secured-table thead th { border-bottom: 1px solid var(--color-gray-200); background: var(--color-gray-50);
  color: var(--color-gray-600); font-weight: 600; text-align: right; }

.md-secured-table thead th:first-child { text-align: left; }

.md-secured-table tbody th { text-align: left; font-weight: 600; color: var(--color-gray-800); }

.md-secured-table tbody td { text-align: right; color: var(--color-gray-800); }

/* 순처분은 색만으로 알리지 않는다 — 화면이 부호를 함께 적는다(WCAG SC 1.4.1) */
.md-secured-table td.minus { color: var(--color-btn-error); }

/* ---- 할당배출권 사용·잔여 현황 (#9) ---- */
.ab-table { overflow-x: auto; }

.ab-table table { width: 100%; border-collapse: collapse; }

.ab-table th, .ab-table td { padding: .45rem .5rem; border-bottom: 1px solid var(--color-gray-100);
  font-size: .72rem; white-space: nowrap; }

.ab-table thead th { border-bottom: 1px solid var(--color-gray-200); background: var(--color-gray-50);
  color: var(--color-gray-600); font-weight: 600; text-align: right; }

.ab-table thead th:first-child { text-align: left; }

.ab-table tbody th { text-align: left; font-weight: 600; color: var(--color-gray-800); }

.ab-table tbody td { text-align: right; color: var(--color-gray-800); }

/* 부족분은 색만으로 알리지 않는다 — 화면이 부호와 '(부족)' 을 함께 적는다 */
.ab-table td.minus { color: var(--color-btn-error); }

.ab-note { margin-top: .6rem; }

.ab-empty { padding: 2rem 0; text-align: center; font-size: .75rem; color: var(--color-gray-500); }

/* ---- 올해 전망 · 사용 가이드라인 (#12) ---- */
.ab-outlook { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--color-gray-100); }

.ab-outlook-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .7rem 1rem; margin: .6rem 0 .2rem; }

.ab-outlook-figures dt { font-size: .65rem; color: var(--color-gray-500); }

.ab-outlook-figures dd { margin: .1rem 0 0; font-size: .82rem; font-weight: 600; color: var(--color-gray-800); }

.ab-outlook-figures dd.minus { color: var(--color-btn-error); }

.ab-outlook-figures dd .sub { display: block; font-size: .6rem; font-weight: 400; color: var(--color-gray-500); }

/* ---- 감축 시나리오 (#30) ---- */
.sim-scenario { margin: 1rem 0; padding: .9rem; border: 1px solid var(--color-gray-200); border-radius: 8px;
  background: var(--color-gray-50); }

.sim-scenario-pick { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }

.sim-scenario-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .7rem 1rem; margin: .8rem 0 .2rem; }

.sim-scenario-figures dt { font-size: .65rem; color: var(--color-gray-500); }

.sim-scenario-figures dd { margin: .1rem 0 0; font-size: .82rem; font-weight: 600; color: var(--color-gray-800); }

/* 목표 초과는 색만으로 알리지 않는다 — 화면이 '없음' 과 수량을 구분해 적는다 */
.sim-scenario-figures dd.minus { color: var(--color-btn-error); }

.sim-scenario-figures dd .sub { display: block; font-size: .6rem; font-weight: 400; color: var(--color-gray-500); }