/* 부동산바로 허브 — ★중앙실(관제실) 결 (대표 직권 2026-09-16)
   대표 원문: 「중앙실이잖아 부동산바로가. 그러니까 최첨단으로 보이게」
   ★뜻: 여긴 열 곳을 «지켜보는 자리»다. 꾸미개가 아니라 ★관제판처럼 보여야 한다.
   ★글을 방해하지 않는다. 바탕은 뒤에, 글자는 앞에. */

:root {
  /* ★2026-09-16 2차 — 대표 「어둡고 배경·히어로·카드가 같은 명도로 뭉친다」
     ★층을 «숫자»로 세웠다. 검정은 안 쓴다. 미래형 데이터센터 결. */
  /* ★3차 — 대표가 «값으로» 지정하심. 그대로 쓴다. */
  --L0: #0F1D35;      /* 배경 바닥 */
  --L1: #172B46;      /* 배경 위쪽 */
  --L2: #263B5C;      /* ★카드 — 배경보다 확실히 밝다 (1.27~1.49 : 1) */
  --L3: #2E4569;      /* 카드 얹었을 때 */
  --바닥: var(--L0);
  --바닥2: var(--L1);
  --판: #263B5C;
  --판밝: #2E4569;
  --판선: rgba(143, 190, 225, .22);    /* ★지정값 */
  --판선밝: rgba(143, 190, 225, .46);
  --글: #F7FAFF;                       /* ★제목·숫자 */
  --글연: #B8C8DB;                     /* ★설명문 */
  --형광: #5ad1e8;                     /* ★청록은 «중요한 곳»에만 */
  --형광2: #6fdcef;
  --산: #6ee7b7;      /* 공개 */
  --중바: #5E4A2C;    /* ★검토중 — 탁한 황갈색 바탕 */
  --중글: #E9DCC0;    /* ★검토중 — 연한 베이지 글씨 */
  --끔: #9aabbf;      /* 준비 중 */
  --유리: blur(12px) saturate(112%);
  --하이라이트: rgba(200, 228, 245, .07);   /* ★아주 약한 청백 */
}

/* ── 바탕판 ─────────────────────────────────────────── */
#baro-flow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;          /* ★절대 클릭을 먹지 않는다 */
  /* ★맨 아래까지 «딥 네이비»로 간다. 검정으로 떨어뜨리지 않는다. */
  background:
    radial-gradient(1200px 680px at 50% -10%, rgba(120, 200, 235, .15), transparent 64%),
    radial-gradient(980px 620px at 88% 106%, rgba(150, 175, 230, .12), transparent 62%),
    linear-gradient(180deg, var(--L1) 0%, #142541 46%, var(--L0) 100%);
}
#baro-flow canvas { display: block; width: 100%; height: 100%; }

/* ★바탕 위에 옅은 훑는 선 — 관제 화면 느낌 한 겹 */
#baro-flow::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
      180deg, rgba(255, 255, 255, .016) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}
/* ★가운데로 은은하게 번지는 빛 — 번쩍이지 않는다. 깊이만 만든다. */
/* ★중앙 네트워크 — «청백색» 빛이 퍼진다. 번쩍이지 않는다. */
#baro-flow .번짐 {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(820px 460px at 50% 24%, rgba(205, 232, 248, .16), transparent 68%),
    radial-gradient(560px 340px at 50% 24%, rgba(150, 215, 240, .12), transparent 62%),
    radial-gradient(540px 330px at 16% 64%, rgba(225, 240, 250, .05), transparent 72%);
}

/* ── 글은 바탕 위로 ─────────────────────────────────── */
.허브속 { position: relative; z-index: 1; }

/* ── 맨 위 상태 띠 — «지금 몇 곳이 살아 있나» ────────── */
.관제띠 {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 11px 16px;
  background: linear-gradient(180deg, #2B4266 0%, var(--판) 70%);
  border: 1px solid var(--판선);
  border-radius: 12px;
  backdrop-filter: var(--유리);
  box-shadow: 0 1px 0 0 var(--하이라이트) inset;
  font-size: 12.5px; color: var(--글연);
  font-variant-numeric: tabular-nums;
}
.관제띠 b { color: var(--글); font-weight: 700; }
.숨 {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--산); font-weight: 700;
}
.숨 i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--산);
  box-shadow: 0 0 0 0 rgba(52, 211, 153, .55);
  animation: 맥 2.2s ease-out infinite;
}
@keyframes 맥 {
  0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, .5); }
  70%  { box-shadow: 0 0 0 9px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

/* ── 카드판 ─────────────────────────────────────────── */
.카드판 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 14px;
}

.칸 {
  position: relative;
  display: flex; flex-direction: column;
  /* ★위가 더 밝은 유리판 — 페이지 바닥과 «층»이 갈린다 */
  background: linear-gradient(180deg, #2B4266 0%, var(--판) 62%);
  border: 1px solid var(--판선);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none; color: inherit;
  backdrop-filter: var(--유리);
  box-shadow: 0 1px 0 0 var(--하이라이트) inset,
              0 14px 34px -22px rgba(6, 14, 28, .92);
  transition: border-color .18s, transform .18s, box-shadow .18s, background .25s;
}
.칸:hover {
  background: linear-gradient(180deg, #34507A 0%, var(--판밝) 62%);
  border-color: var(--판선밝);
}
.칸:focus-visible { outline: 2px solid var(--형광); outline-offset: 2px; }

/* ★그림 띠 — 대표님이 뽑으신 16:9 그림이 여기 들어간다 */
.띠 {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(140deg, #31486e, #23375a);
  overflow: hidden;
}
.띠 img { width: 100%; height: 100%; object-fit: cover; display: block;
          filter: brightness(1.14) saturate(.92); }   /* ★지정값 */
/* ★2026-09-16 고침 — 글자는 띠 «아래 칸»에 있다. 그림을 덮을 이유가 없었다.
   대표 「너무 어둡지 않아?」 → 재 보니 그림 평균 밝기가 60/255 인데
   거기에 .82 짜리 검정을 또 덮고 있었다. ★아주 옅게만 남겨 아래 테두리와 이어 준다. */
.띠::after {
  content: "";
  position: absolute; inset: 0;
  /* ★2차로 더 줄임 — 글자가 여기 없다. 테두리 이음새만 남긴다 */
  background: linear-gradient(180deg, transparent 84%, rgba(15, 29, 53, .18) 100%);
}
/* ★그림이 아직 없을 때 — 비어 보이지 않게 격자만 */
.띠.빈 {
  background-image:
    linear-gradient(rgba(125, 211, 252, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 211, 252, .08) 1px, transparent 1px);
  background-size: 22px 22px;
}
.띠.빈::before {
  content: "그림 준비 중";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: rgba(185, 201, 220, .7); font-size: 12px; letter-spacing: .04em;
}

.패 {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  background: rgba(15, 29, 53, .66); backdrop-filter: blur(8px);
  border: 1px solid rgba(200, 228, 245, .14);
}
.패.열림 { color: var(--산); }
/* ★검토중 — 탁한 황갈색 바탕에 연한 베이지 글씨. 먼저 튀지 않게. */
.패.검토 { color: var(--중글); background: rgba(94, 74, 44, .82);
           border-color: rgba(233, 220, 192, .22); }
.패.아직 { color: var(--끔); }

.속 { padding: 14px 16px 15px; display: flex; flex-direction: column; flex: 1; }
.속 h3 { margin: 0 0 5px; font-size: 16.5px; color: var(--글); letter-spacing: -.01em; }
.속 p  { margin: 0 0 14px; font-size: 13px; color: var(--글연); line-height: 1.55; flex: 1; }
.가 {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 11px; border-top: 1px solid rgba(150, 190, 225, .14);
  color: var(--형광2); font-weight: 700; font-size: 13.5px;
}
.가 span { color: rgba(185, 201, 220, .8); font-weight: 400; }

/* ── 움직임을 꺼 달라 한 사람에겐 ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .숨 i { animation: none; }
  .칸 { transition: none; }
}


/* ── ★모바일: 배경과 카드를 각각 5% 더 올린다 (대표 지정) ──────
   폰은 밖에서 보고 화면이 작아 같은 색도 어둡게 느껴진다. */
@media (max-width: 760px) {
  :root {
    --L0: #101E38;    /* #0F1D35 ×1.05 */
    --L1: #182D4A;    /* #172B46 ×1.05 */
    --L2: #283E61;    /* #263B5C ×1.05 */
    --L3: #31496F;
    --판: #283E61;
    --판밝: #31496F;
  }
  .칸 { background: linear-gradient(180deg, #2E4670 0%, var(--판) 62%); }
  .관제띠 { background: linear-gradient(180deg, #2E4670 0%, var(--판) 70%); }
  /* ★2026-09-16 되돌림 — 대표 「폰인데 너무 밝아」
     ★주문은 «배경과 카드» 5% 였는데 ★그림에도 얹은 것이 내 잘못이다.
       그림은 이미 세 번 밝힌 판(평균 95)이라 ×1.19 에서 ★픽셀 12.1%가 탔다(지산 16.7%).
     ★×0.95 로 내리면 ★탄 칸 0%. 폰 화면은 원래 더 밝게 나온다. */
  .띠 img { filter: brightness(.95) saturate(.92); }
  .머리그림>img { filter: brightness(.95) saturate(.92) !important; }
}