/* ==========================================================================
   space-3d.css — SF 관제실 3D 층 (2026-10-20 1단계 공포탐욕 → 같은 날 2단계 전 화면)
   - 원본: design-reference/sf-sample-J-3d-upright.html — 똑바로 선 3D(화면 기울기·판 깊이 0), 판마다 8겹 그림자 "두께",
     클릭할 때만 튀어나옴(마우스 이동·드래그에는 반응하지 않음), 데스크톱만 WebGL 지형 배경(static/js/space3d.js)
   - 연결: base.html·base_mobile.html·login.html이 theme-space.css 다음에 이 파일을, theme_space.js 옆에 space3d.js를 로드(전 화면)
   - 모든 선택자 앞의 `html body.theme-space`는 명시도 확보용(1단계에서 extra_head로 먼저 로드하던 시절의 흔적 — 지금도 무해)
   - 토큰은 --s3-* 만 새로 정의(theme-space의 --sp-* hex를 다시 정의하면 check_help [9] 대비 검사 대상이 바뀜).
     색은 기존 --sp-*·--sp-*-rgb를 그대로 참조
   - 전 화면에 걸리므로 "칠하기만": 카드에는 그림자(두께·윗변 빛)만 더하고 position·display·overflow 같은 배치 속성은
     바꾸지 않음(기존 화면의 드롭다운·모달 기준 위치를 지키기 위함). position:relative는 튀어나오는 동안(.s3-on)과
     명시적으로 켠 판([data-s3-pop])에만
   - ⚠️ 조상 요소(.main 등)에 perspective/transform/transform-style 금지 — .main 안 position:fixed 모달의 기준이 바뀜.
     3D는 각 판 자신의 transform(perspective() 함수, space3d.js가 넣음)으로만. 표 그리드(Tabulator)·모달이 든 카드는
     입장 연출도 하지 않고, 클릭 효과도 space3d.js가 막음(두께만)
   - 판정·숫자는 만들지 않음: 색·아이콘은 credit.gate 등 서버가 정한 값을 그대로 칠하기만 함(_credit_gate_3d.html)
   ========================================================================== */

/* ---------- 00. 토큰 ---------- */
html body.theme-space{
  /* 판 두께: 1px씩 오른쪽 아래로 밀린 그림자 8겹(샘플 J) — 바깥으로 갈수록 어두운 시안 */
  --s3-edge-1:#0e4560; --s3-edge-2:#0d3d55; --s3-edge-3:#0b344a; --s3-edge-4:#092b3e;
  --s3-edge-5:#082333; --s3-edge-6:#061c2a; --s3-edge-7:#051621; --s3-edge-8:#04111a;
  --s3-thick:
    1px 1px 0 var(--s3-edge-1), 2px 2px 0 var(--s3-edge-2), 3px 3px 0 var(--s3-edge-3), 4px 4px 0 var(--s3-edge-4),
    5px 5px 0 var(--s3-edge-5), 6px 6px 0 var(--s3-edge-6), 7px 7px 0 var(--s3-edge-7), 8px 8px 0 var(--s3-edge-8);
  --s3-thick-sm:     /* 작은 판·모바일 카드: 4겹 */
    1px 1px 0 var(--s3-edge-1), 2px 2px 0 var(--s3-edge-3), 3px 3px 0 var(--s3-edge-5), 4px 4px 0 var(--s3-edge-7);
  --s3-drop:     0 30px 50px -24px rgba(0, 0, 0, .70);
  --s3-drop-pop: 0 50px 70px -30px rgba(0, 0, 0, .75);
  --s3-glow:     0 0 30px rgba(var(--sp-cyan-rgb), .10);
  --s3-pop-glow: 0 0 40px rgba(var(--sp-cyan-rgb), .45);
  --s3-flash:    rgba(160, 245, 255, .22);    /* 클릭한 자리의 반짝임 */
  --s3-rim:      inset 0 2px 0 rgba(var(--sp-cyan-rgb), .26);   /* 윗변 시안 빛(안쪽 그림자 — 배치 속성 없이) */
  --s3-ease:     cubic-bezier(.2, .8, .2, 1);
  /* 등각 3D 막대(샘플 J) */
  --s3-bar-front-top:#26c4db; --s3-bar-front-bottom:#0f6b7c; --s3-bar-top:#8ff3ff; --s3-bar-side:#0a4655;
  --s3-bar-now-top:#ffffff; --s3-bar-now-bottom:#9ff6ff; --s3-bar-now-side:#5fc9d8;
}

/* 상태 색(서버가 정한 값 → 색): 판·배지·행이 같은 변수로 칠함 */
html body.theme-space .s3-tone--ok     { --s3-tone-color:var(--sp-mint);  --s3-tone-rgb:var(--sp-mint-rgb); }
html body.theme-space .s3-tone--warn   { --s3-tone-color:var(--sp-amber); --s3-tone-rgb:var(--sp-amber-rgb); }
html body.theme-space .s3-tone--alert,
html body.theme-space .s3-tone--crisis { --s3-tone-color:var(--sp-red);   --s3-tone-rgb:var(--sp-red-rgb); }
html body.theme-space .s3-tone--muted  { --s3-tone-color:var(--sp-steel); --s3-tone-rgb:143, 180, 204; }

/* ---------- 10. 판 두께 · 윗변 빛 · 입장 연출 · 클릭 반짝임 (전 화면의 카드) ---------- */
/* 두께와 윗변 빛은 그림자만으로 — 배치 속성(position 등)은 건드리지 않음 */
html body.theme-space :is(.card, .stats){
  box-shadow:var(--s3-thick), var(--s3-rim), var(--sp-glass-shadow), var(--s3-drop);
  transition:box-shadow .3s ease, transform .45s var(--s3-ease);
}
html body.theme-space :is(.card, .stats):hover{
  box-shadow:var(--s3-thick), var(--s3-rim), var(--sp-glass-shadow-hover), var(--s3-drop);
}
html body.theme-space .mstock-card{
  box-shadow:var(--s3-thick-sm), var(--s3-rim), var(--sp-glass-shadow-sm);
  transition:box-shadow .3s ease;
}

/* 입장 연출: 페이지를 처음 열 때만 — space3d.js가 로드 1.6초 뒤 html.s3-arrived를 붙이면 그 뒤 JS가 새로 그리는 카드는
   움직이지 않음. 모바일은 화면에 직접 놓인 카드만(조회 결과 카드 목록 안의 카드 제외).
   backwards: 끝난 뒤 translate·scale 값을 남기지 않음(남으면 카드가 position:fixed 자손의 기준 상자가 됨) */
html:not(.s3-arrived) body.theme-space :is(.card, .stats, .mstock-main > .mstock-card){
  animation:s3-arrive .7s var(--s3-ease) backwards;
}
/* 표 그리드(Tabulator)·모달이 든 카드는 움직이지 않음(그리드 측정·모달 위치 보호) */
html body.theme-space :is(.card, .stats, .mstock-card):has(.tabulator, .modal-overlay){ animation:none !important; }

/* 클릭 반짝임·튀어나옴은 명시적으로 켠 판([data-s3-pop])과 지금 튀어나온 판(.s3-on)에만 — 이때만 position:relative */
html body.theme-space :is([data-s3-pop], .s3-on){ position:relative; }
html body.theme-space :is(.card, .stats, .mstock-card):is([data-s3-pop], .s3-on)::before,
html body.theme-space .s3-slab::before,
html body.theme-space .stat-row.s3-kpis > .stat.s3-slab::before{
  content:"";
  position:absolute;
  inset:0; left:0; top:0;
  width:auto; height:auto;
  border-radius:inherit;
  background:radial-gradient(240px 240px at var(--s3-gx, 50%) var(--s3-gy, 0%), var(--s3-flash), transparent 65%);
  box-shadow:none;
  opacity:var(--s3-go, 0);
  transition:opacity .2s ease;
  pointer-events:none;
}
/* 신용 게이트 작은 판의 윗변 시안 빛 선(샘플 J .slab::after) — 직접 만든 판이라 의사요소를 씀 */
html body.theme-space .s3-slab::after,
html body.theme-space .stat-row.s3-kpis > .stat.s3-slab::after{
  content:"";
  position:absolute;
  left:12px; right:12px; top:-1px; bottom:auto;
  width:auto; height:2px;
  background:linear-gradient(90deg, transparent, var(--sp-cyan), transparent);
  opacity:.7;
  pointer-events:none;
}

/* 튀어나온 판(space3d.js가 .s3-on과 transform을 넣음) — 이웃 판 위로 올라오고 그림자·빛이 커짐 */
html body.theme-space [data-s3-pop]{ cursor:pointer; }
html body.theme-space :is(.card, .stats, .s3-slab).s3-on,
html body.theme-space :is(.card, .stats, .s3-slab).s3-on:hover{
  z-index:2;
  box-shadow:var(--s3-thick), var(--s3-rim), var(--sp-glass-shadow-hover), var(--s3-drop-pop), var(--s3-pop-glow);
}
html body.theme-space .mstock-card.s3-on{
  z-index:2;
  box-shadow:var(--s3-thick-sm), var(--s3-rim), var(--sp-glass-shadow-sm), var(--s3-pop-glow);
}

@keyframes s3-arrive{
  from{ opacity:0; translate:0 36px; scale:.94; }
  to  { opacity:1; translate:0 0;    scale:1; }
}
/* 위에서부터 차례로 도착 — 형제 순서(제목·탭 포함)대로 45ms씩 늦게 */
html body.theme-space :is(.card, .stats, .mstock-main > .mstock-card):nth-child(2) { animation-delay:.045s; }
html body.theme-space :is(.card, .stats, .mstock-main > .mstock-card):nth-child(3) { animation-delay:.09s; }
html body.theme-space :is(.card, .stats, .mstock-main > .mstock-card):nth-child(4) { animation-delay:.135s; }
html body.theme-space :is(.card, .stats, .mstock-main > .mstock-card):nth-child(5) { animation-delay:.18s; }
html body.theme-space :is(.card, .stats, .mstock-main > .mstock-card):nth-child(6) { animation-delay:.225s; }
html body.theme-space :is(.card, .stats, .mstock-main > .mstock-card):nth-child(7) { animation-delay:.27s; }
html body.theme-space :is(.card, .stats, .mstock-main > .mstock-card):nth-child(8) { animation-delay:.315s; }
html body.theme-space :is(.card, .stats, .mstock-main > .mstock-card):nth-child(9) { animation-delay:.36s; }
html body.theme-space :is(.card, .stats, .mstock-main > .mstock-card):nth-child(10){ animation-delay:.405s; }
html body.theme-space :is(.card, .stats, .mstock-main > .mstock-card):nth-child(n+11){ animation-delay:.45s; }

/* ---------- 20. 작은 판(.s3-slab) — 신용 게이트 카드 안의 KPI·추세·설명 ---------- */
html body.theme-space .s3-slab{
  position:relative;
  background:linear-gradient(155deg, rgba(var(--sp-cyan-rgb), .07), transparent 60%), var(--sp-panel-solid);
  border:1px solid var(--sp-line-panel);
  border-radius:10px;
  box-shadow:var(--s3-thick-sm), var(--s3-drop), var(--s3-glow);
  transition:box-shadow .3s ease, transform .45s var(--s3-ease);
}
/* 판 테두리를 상태 색으로 아주 옅게 */
html body.theme-space .s3-slab.s3-tone{ border-color:rgba(var(--s3-tone-rgb), .45); }

/* KPI 5칸: 원래 .stat-row(가로 flex·첫 칸 왼쪽 여백 0·형제 사이 왼쪽 선) → 판 5장 그리드.
   칸 수는 화면 폭이 아니라 신용 게이트 카드 폭으로 정함(사이드바 접힘·창 폭에 따라 카드 폭이 달라서) — 아래 60절 @container */
html body.theme-space .s3-credit{ container:s3credit / inline-size; }
html body.theme-space .stat-row.s3-kpis{
  display:grid;
  grid-template-columns:minmax(0, 1.45fr) repeat(4, minmax(0, 1fr));
  gap:18px;
  margin-top:4px;
}
html body.theme-space .stat-row.s3-kpis > .stat.s3-slab{
  padding:14px 16px 14px;
  border:1px solid var(--sp-line-panel);
  min-width:0;
}
html body.theme-space .stat-row.s3-kpis > .stat.s3-slab.s3-tone{ border-color:rgba(var(--s3-tone-rgb), .45); }
/* 판이 좁아 라벨 자간(3px)·25px 숫자가 넘치지 않게 — 폭 1280px에서 "(normal)"이 잘리던 것 실측 */
html body.theme-space .stat-row.s3-kpis .stat-label{ letter-spacing:1.5px; }
html body.theme-space .stat-row.s3-kpis .stat-value{ font-size:clamp(20px, 1.65vw, 25px); overflow-wrap:break-word; }
html body.theme-space .stat-row.s3-kpis .s3-slab--hero .stat-value{ white-space:nowrap; }
/* 상태 색은 '게이트'·'급확대' 칸만(서버 값 그대로). 나머지 칸은 중립색 */
html body.theme-space .s3-slab.s3-tone .stat-value,
html body.theme-space .s3-slab.s3-tone .stat-value small{
  color:var(--s3-tone-color);
  text-shadow:0 0 12px rgba(var(--s3-tone-rgb), .45);
}
html body.theme-space .s3-ico{ margin-right:6px; font-size:.8em; }
html body.theme-space .s3-badge .s3-ico{ margin-right:0; }   /* 배지는 gap으로 이미 띄움 */

/* 대표 칸: 하이일드 스프레드 — 큰 시안 숫자 + 3중 회전 링 */
html body.theme-space .stat-row.s3-kpis > .stat.s3-slab--hero{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 84px;
  align-items:center;
  gap:6px;
}
html body.theme-space .stat-row.s3-kpis .s3-slab--hero .stat-value{
  font-size:clamp(26px, 2.4vw, 34px);
  color:var(--sp-cyan);
  text-shadow:var(--sp-text-glow-core);
}
html body.theme-space .s3-ring{
  position:relative;
  width:84px; height:84px;
  transform:rotateX(62deg);         /* 원근 없이 납작하게 눕힌 링(자기 자신만 — 조상 transform 아님) */
}
html body.theme-space .s3-ring i{
  position:absolute;
  border-radius:50%;
  border:2px solid var(--sp-cyan);
  animation:s3-spin 9s linear infinite;
}
html body.theme-space .s3-ring i:nth-child(1){ inset:0; border-style:dashed; opacity:.8; }
html body.theme-space .s3-ring i:nth-child(2){
  inset:13px; border-color:var(--sp-cyan-light);
  animation-duration:6s; animation-direction:reverse;
  box-shadow:0 0 14px rgba(var(--sp-cyan-rgb), .8);
}
html body.theme-space .s3-ring i:nth-child(3){
  inset:27px; border-color:var(--s3-tone-color, var(--sp-mint));
  border-top-color:transparent;
  animation-duration:4s;
}
html body.theme-space .s3-ring--sm{ width:40px; height:40px; flex-shrink:0; margin-left:auto; }
html body.theme-space .s3-ring--sm i:nth-child(2){ inset:7px; }
html body.theme-space .s3-ring--sm i:nth-child(3){ inset:13px; }
@keyframes s3-spin{ to{ transform:rotate(360deg); } }

/* 게이트 배지(카드 머리·모바일 섹션 제목 옆): 색 + 아이콘 + 글자 */
html body.theme-space .s3-head-meta{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
html body.theme-space .s3-asof{ font-family:var(--sp-font-body); font-size:11.5px; color:var(--sp-steel); }
html body.theme-space .s3-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 12px;
  border:1px solid var(--s3-tone-color);
  border-radius:4px;
  background:rgba(var(--s3-tone-rgb), .08);
  color:var(--s3-tone-color);
  font-family:var(--sp-font-label);
  font-size:12.5px; font-weight:500; letter-spacing:1px;
  white-space:nowrap;
  box-shadow:0 0 16px rgba(var(--s3-tone-rgb), .35);
}

/* 추세 판 → 항목 설명 판을 위아래로(설명 문장이 길어 옆 칸에 두면 추세 판보다 두 배 넘게 길어짐 — 1440px 실측) */
html body.theme-space .s3-credit-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:18px;
  margin-top:22px;
}
html body.theme-space .s3-chart{ padding:14px 16px 12px; }
html body.theme-space .s3-empty{ margin:0; font-size:13px; color:var(--sp-steel); }
/* 기존 항목 설명 목록(.term-help, credit_help 문장 그대로)을 판으로 — 원래처럼 "이름 | 설명" 2열 */
html body.theme-space .term-help.s3-notes{
  margin:0;
  padding:14px 18px;
  border:1px solid var(--sp-line-panel);
}
/* 맨 아래 기준일·참고 문단 */
html body.theme-space .s3-foot{
  margin-top:18px !important;       /* 원래 인라인 margin-top:10px — 판 두께 그림자와 겹치지 않게 */
  padding:10px 14px;
  border-left:2px solid rgba(var(--sp-cyan-rgb), .5);
  background:rgba(var(--sp-cyan-rgb), .04);
  line-height:1.6;
}

/* ---------- 30. 등각 3D 막대(추세) ---------- */
html body.theme-space .s3-trend{ margin:0; }
html body.theme-space .s3-trend-cap{
  font-family:var(--sp-font-label);
  font-size:11.5px; letter-spacing:1px;
  color:var(--sp-text);
}
html body.theme-space .s3-bars{
  position:relative;
  height:200px;
  margin:28px 8px 0 40px;
  border-bottom:1px solid var(--sp-line-panel);
}
html body.theme-space .s3-tick{
  position:absolute;
  left:-40px; width:32px;
  translate:0 50%;
  text-align:right;
  font-family:var(--sp-font-body);
  font-size:10.5px;
  font-variant-numeric:tabular-nums;
  color:var(--sp-steel);
}
html body.theme-space .s3-gate-line{
  position:absolute; left:0; right:0; height:0;
  border-top:2px dashed var(--sp-amber);
  pointer-events:none;
}
html body.theme-space .s3-gate-line span{
  position:absolute; right:0; bottom:5px;
  font-family:var(--sp-font-label);
  font-size:11px; letter-spacing:1px;
  color:var(--sp-amber);
  white-space:nowrap;
}
html body.theme-space .s3-bar-track{
  position:absolute;
  inset:0 10px 0 0;
  display:flex; align-items:flex-end;
  gap:6px;
}
html body.theme-space .s3-bar{
  position:relative;
  flex:1 1 0;
  min-width:3px; max-width:44px;
  height:var(--h);
  background:linear-gradient(var(--s3-bar-front-top), var(--s3-bar-front-bottom));
  opacity:calc(.45 + .55 * var(--i) / var(--n, 20));    /* 오래된 막대일수록 흐리게(멀리 있는 느낌) */
}
html body.theme-space .s3-bar::before{     /* 윗면 */
  content:"";
  position:absolute; left:0; top:-6px;
  width:100%; height:6px;
  background:var(--s3-bar-top);
  transform:skewX(-45deg);
  transform-origin:0 100%;
}
html body.theme-space .s3-bar::after{      /* 옆면 */
  content:"";
  position:absolute; right:-6px; top:0;
  width:6px; height:100%;
  background:var(--s3-bar-side);
  transform:skewY(-45deg);
  transform-origin:0 0;
}
html body.theme-space .s3-bar.now{
  opacity:1;
  background:linear-gradient(var(--s3-bar-now-top), var(--s3-bar-now-bottom));
  box-shadow:0 0 22px var(--s3-bar-now-bottom);
}
html body.theme-space .s3-bar.now::before{ background:var(--s3-bar-now-top); }
html body.theme-space .s3-bar.now::after{ background:var(--s3-bar-now-side); }
html body.theme-space .s3-trend-axis{
  display:flex; justify-content:space-between;
  margin:8px 18px 0 40px;
  font-family:var(--sp-font-body);
  font-size:10.5px;
  font-variant-numeric:tabular-nums;
  color:var(--sp-steel);
}
/* 모바일(좁은 카드) */
html body.theme-space .s3-trend--compact{ margin-top:14px; padding-top:12px; border-top:1px solid var(--sp-line); }
html body.theme-space .s3-trend--compact .s3-bars{ height:140px; margin:24px 4px 0 32px; }
html body.theme-space .s3-trend--compact .s3-tick{ left:-32px; width:26px; }
html body.theme-space .s3-trend--compact .s3-bar-track{ gap:3px; inset:0 6px 0 0; }
html body.theme-space .s3-trend--compact .s3-bar::before{ top:-4px; height:4px; }
html body.theme-space .s3-trend--compact .s3-bar::after{ right:-4px; width:4px; }
html body.theme-space .s3-trend--compact .s3-trend-axis{ margin:6px 10px 0 32px; }

/* ---------- 40. 모바일 카드 행 ---------- */
html body.theme-space .s3-msec-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
html body.theme-space .s3-msec-head .s3-badge{ font-size:11.5px; padding:3px 10px; }
html body.theme-space .s3-mhero{ align-items:center; }
html body.theme-space .s3-mhero .mstock-card-value{
  font-family:var(--sp-font-display);
  font-size:22px;
  color:var(--sp-cyan);
  text-shadow:var(--sp-text-glow-core);
}
html body.theme-space .mstock-card-row.s3-tone .mstock-card-value{
  color:var(--s3-tone-color);
  text-shadow:0 0 10px rgba(var(--s3-tone-rgb), .45);
}

/* ---------- 50. WebGL 배경(space3d.js가 데스크톱에서만 canvas#s3-bg를 넣고 html.s3-webgl을 붙임) ---------- */
html body.theme-space #s3-bg{
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:-1;
  display:block;
  pointer-events:none;
}
/* 3D 지형이 그려지면 CSS 격자 바닥·행성은 숨김(별 .ambient는 그대로) */
html.s3-webgl body.theme-space::before,
html.s3-webgl body.theme-space::after{ display:none; }

/* ---------- 60. 반응형 · 모션 줄이기 ---------- */
/* 카드 폭이 좁으면 대표 칸(스프레드)을 한 줄 전체로, 나머지 4칸 → 2칸 → 1칸 */
@container s3credit (max-width: 1000px){
  html body.theme-space .stat-row.s3-kpis{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
  html body.theme-space .stat-row.s3-kpis > .stat.s3-slab--hero{ grid-column:1 / -1; grid-template-columns:auto 84px; justify-content:start; column-gap:28px; }
}
@container s3credit (max-width: 640px){
  html body.theme-space .stat-row.s3-kpis{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@container s3credit (max-width: 380px){
  html body.theme-space .stat-row.s3-kpis{ grid-template-columns:minmax(0, 1fr); }
}
/* 좁은 화면: 기울기·깊이 없음(두께와 반짝임만) — space3d.js도 같은 기준으로 transform을 넣지 않음 */
@media (max-width: 920px){
  html body.theme-space :is([data-s3-pop], .s3-on){ transform:none !important; }
}
/* 동작 줄이기: 입장·링 회전·전환은 style.css·theme-space.css의 전역 규칙이 끄고, 여기서는 튀어나옴도 막음 */
@media (prefers-reduced-motion: reduce){
  html body.theme-space :is([data-s3-pop], .s3-on){ transform:none !important; }
  html body.theme-space :is(.card, .stats, .mstock-card){ animation:none !important; }
}