/* ==========================================================================
   theme-space.css — Deep-Space Console HUD (neon · 3D)
   - 적용: <body class="theme-sa theme-space"> + style.css 다음에 이 파일을 링크
   - 폰트(Orbitron·Exo 2·IBM Plex Sans KR)는 템플릿 <head>의 <link>로 로드(@import 사용 안 함)
   - 모든 규칙은 body.theme-space 아래로 스코프
   - 모든 색은 아래 --sp-* 토큰으로만 정의 / 사용
   - 레이아웃·동작(display, pointer-events, flex/grid 등)은 건드리지 않고 도색 위주
   - 한글: IBM Plex Sans KR(제목·메뉴·탭·라벨·버튼) + IBM Plex Sans KR(본문·그리드·입력)
   ========================================================================== */

/* --------------------------------------------------------------------------
   00. TOKENS
   -------------------------------------------------------------------------- */
body.theme-space {
  /* ---- 우주 배경 ---- */
  --sp-void:             #02040A;
  --sp-void-rgb:         2, 4, 10;
  --sp-void-2:           #040A18;
  --sp-nebula-rgb:       30, 90, 160;          /* 하단 푸른 성운 · 숫자 입체 레이어 */
  --sp-nebula-2-rgb:     38, 96, 196;
  --sp-star:             #FFFFFF;
  --sp-star-mint:        #99FFDD;
  --sp-star-sky:         #99CCFF;
  --sp-star-soft:        #E8F8FF;
  --sp-planet-rgb:       20, 52, 96;           /* 행성 지평선 대기 */
  --sp-core-rgb:         14, 40, 78;           /* 도넛 행성 코어 */
  --sp-core-dark-rgb:    4, 10, 24;

  /* ---- 패널 ---- */
  --sp-panel-rgb:        8, 14, 28;
  --sp-panel:            rgba(var(--sp-panel-rgb), .88);
  --sp-panel-solid:      #08101E;              /* 불투명: 모달 · 드롭다운 · 메뉴 */
  --sp-panel-solid-2:    #0C1830;
  --sp-chrome-rgb:       4, 8, 18;
  --sp-chrome:           rgba(var(--sp-chrome-rgb), .90);  /* 상단바 · 사이드바(데스크톱) · 모바일 헤더 */
  --sp-chrome-2:         rgba(3, 6, 14, .92);
  --sp-chrome-solid:     #040811;              /* 불투명 크롬(= --sp-chrome을 심우주 위에 합성한 색): 콘텐츠가 밑으로 지나가는 고정 바 · 드로어 */
  --sp-well:             rgba(2, 4, 10, .60);  /* 입력칸 안쪽 홈 */
  --sp-backdrop:         rgba(1, 3, 8, .78);
  --sp-shadow-rgb:       0, 0, 0;

  /* ---- 선 ---- */
  --sp-line-rgb:         120, 200, 255;
  --sp-line:             rgba(var(--sp-line-rgb), .20);
  --sp-line-panel:       rgba(var(--sp-line-rgb), .25);
  --sp-line-strong:      rgba(var(--sp-line-rgb), .35);
  --sp-line-faint:       rgba(var(--sp-line-rgb), .10);

  /* ---- 텍스트 ---- */
  --sp-text:             #BFE9FF;   /* 본문 */
  --sp-text-rgb:         191, 233, 255;
  --sp-text-strong:      #E8F8FF;   /* 강조 */
  --sp-text-strong-rgb:  232, 248, 255;
  --sp-white:            #FFFFFF;   /* 코어 수치 */
  --sp-label:            #5F90AE;   /* 라벨 (패널 위 ≈ 5.6:1) */
  --sp-sub:              #6FA8C8;   /* 브랜드 서브 · 코어 라벨 */
  --sp-steel:            #8FB4CC;   /* 범례 · 보조 */
  --sp-on-accent:        #02040A;   /* 밝은 키캡 위 글자 */

  /* ---- 포인트 ---- */
  --sp-cyan:             #7CE3FF;   /* 기본 · 카운터자산 */
  --sp-cyan-rgb:         124, 227, 255;
  --sp-cyan-light:       #B6F0FF;   /* 키캡 윗면 */
  --sp-cyan-mid:         #4FB8DA;   /* 키캡 아랫면 */
  --sp-cyan-deep:        #2C7FA0;   /* 키캡 돌출(옆면) */
  --sp-amber:            #FFB547;   /* 위험자산 · 경고 · 활성 탭 */
  --sp-amber-rgb:        255, 181, 71;
  --sp-amber-soft:       #FFCF85;
  --sp-mint:             #6DF0B0;   /* 상승 · 안전자산 */
  --sp-mint-rgb:         109, 240, 176;
  --sp-red:              #FF7A8A;   /* 하락 · 삭제 · 오류 */
  --sp-red-rgb:          255, 122, 138;

  /* ---- 네온 / 입체 효과 (기본 색 토큰의 *-rgb를 참조 → 색을 바꾸면 글로우 · 그림자도 함께 바뀜) ---- */
  --sp-glow-dot:         0 0 5px rgba(var(--sp-cyan-rgb), .55);
  --sp-glow-line:        0 0 5px rgba(var(--sp-cyan-rgb), .55);
  --sp-glow-amber:       0 0 6px rgba(var(--sp-amber-rgb), .38);
  --sp-text-glow:        0 0 9px rgba(var(--sp-cyan-rgb), .36), 0 2px 0 rgba(var(--sp-nebula-rgb), .60);
  --sp-text-glow-core:   0 0 12px rgba(var(--sp-cyan-rgb), .55), 0 2px 0 rgba(var(--sp-nebula-rgb), .60);
  --sp-text-glow-soft:   0 0 10px rgba(var(--sp-cyan-rgb), .20), 0 2px 0 rgba(var(--sp-nebula-rgb), .60);
  --sp-glass-sheen:      linear-gradient(160deg, rgba(var(--sp-cyan-rgb), .08), transparent 38%);
  --sp-glass-shadow:
    inset 0 1px 0 rgba(var(--sp-text-strong-rgb), .14),
    inset 0 -26px 40px -24px rgba(var(--sp-shadow-rgb), .70),
    0 28px 56px -28px rgba(var(--sp-shadow-rgb), .95),
    0 0 26px -12px rgba(var(--sp-cyan-rgb), .20);
  --sp-glass-shadow-hover:
    inset 0 1px 0 rgba(var(--sp-text-strong-rgb), .20),
    inset 0 -26px 40px -24px rgba(var(--sp-shadow-rgb), .70),
    0 38px 68px -26px rgba(var(--sp-shadow-rgb), 1),
    0 0 34px -8px rgba(var(--sp-cyan-rgb), .30);
  --sp-glass-shadow-sm:
    inset 0 1px 0 rgba(var(--sp-text-strong-rgb), .12),
    0 16px 32px -20px rgba(var(--sp-shadow-rgb), .90),
    0 0 16px -12px rgba(var(--sp-cyan-rgb), .18);
  --sp-well-shadow:      inset 0 2px 6px rgba(var(--sp-shadow-rgb), .60);
  --sp-focus-ring:       inset 0 2px 6px rgba(var(--sp-shadow-rgb), .60), 0 0 0 3px rgba(var(--sp-cyan-rgb), .12), 0 0 9px rgba(var(--sp-cyan-rgb), .20);

  /* 3D 키캡 버튼 */
  --sp-key-primary-bg:   linear-gradient(var(--sp-cyan-light), var(--sp-cyan) 45%, var(--sp-cyan-mid));
  --sp-key-primary:      inset 0 1px 0 rgba(255, 255, 255, .70), 0 3px 0 var(--sp-cyan-deep), 0 0 11px rgba(var(--sp-cyan-rgb), .25);
  --sp-key-primary-down: inset 0 1px 0 rgba(255, 255, 255, .50), 0 1px 0 var(--sp-cyan-deep), 0 0 7px rgba(var(--sp-cyan-rgb), .20);
  --sp-key-ghost-bg:     linear-gradient(rgba(var(--sp-cyan-rgb), .10), rgba(var(--sp-cyan-rgb), .02));
  --sp-key-ghost:        inset 0 1px 0 rgba(var(--sp-text-strong-rgb), .12), inset 0 0 0 1px rgba(var(--sp-cyan-rgb), .35), 0 3px 0 rgba(var(--sp-void-rgb), .90);
  --sp-key-ghost-down:   inset 0 1px 0 rgba(var(--sp-text-strong-rgb), .08), inset 0 0 0 1px rgba(var(--sp-cyan-rgb), .50), 0 1px 0 rgba(var(--sp-void-rgb), .90);
  --sp-key-red-bg:       linear-gradient(rgba(var(--sp-red-rgb), .10), rgba(var(--sp-red-rgb), .02));
  --sp-key-red:          inset 0 1px 0 rgba(255, 220, 225, .10), inset 0 0 0 1px rgba(var(--sp-red-rgb), .40), 0 3px 0 rgba(var(--sp-void-rgb), .90);
  --sp-key-red-down:     inset 0 1px 0 rgba(255, 220, 225, .06), inset 0 0 0 1px rgba(var(--sp-red-rgb), .55), 0 1px 0 rgba(var(--sp-void-rgb), .90);
  --sp-key-mint-bg:      linear-gradient(rgba(var(--sp-mint-rgb), .10), rgba(var(--sp-mint-rgb), .02));
  --sp-key-mint:         inset 0 1px 0 rgba(220, 255, 235, .10), inset 0 0 0 1px rgba(var(--sp-mint-rgb), .40), 0 3px 0 rgba(var(--sp-void-rgb), .90);
  --sp-key-mint-down:    inset 0 1px 0 rgba(220, 255, 235, .06), inset 0 0 0 1px rgba(var(--sp-mint-rgb), .55), 0 1px 0 rgba(var(--sp-void-rgb), .90);

  /* 배경 3D */
  --sp-floor-line:       rgba(var(--sp-cyan-rgb), .15);
  --sp-planet-rim:       0 -2px 0 rgba(var(--sp-cyan-rgb), .36), 0 -10px 40px rgba(var(--sp-cyan-rgb), .18), 0 -50px 140px rgba(var(--sp-nebula-2-rgb), .24);
  /* 모바일(≤920): 지평선 림이 본문 글자 뒤를 지나가므로 선·광을 낮춤 (라벨 대비 ≈ 4:1 이상) */
  --sp-planet-rim-dim:   0 -1px 0 rgba(var(--sp-cyan-rgb), .16), 0 -10px 40px rgba(var(--sp-cyan-rgb), .10), 0 -50px 140px rgba(var(--sp-nebula-2-rgb), .26);

  /* ---- 타이포 ---- */
  --sp-font-display:     "Orbitron", "IBM Plex Sans KR", sans-serif;          /* 브랜드 · 제목 · 핵심 수치 */
  --sp-font-label:       "Exo 2", "IBM Plex Sans KR", sans-serif;             /* 라벨 · 탭 · 메뉴 · 버튼 */
  --sp-font-body:        "Exo 2", "IBM Plex Sans KR", "Pretendard", -apple-system, sans-serif; /* 본문 · 그리드 · 입력 */
  --sp-font-num:         "Orbitron", "IBM Plex Sans KR", sans-serif;                   /* 단독 수치(KPI · 점수 · 날짜). Orbitron은 고정폭 숫자(tnum)가 없어 열 정렬 숫자는 --sp-font-body */
  --sp-track:            3px;       /* 라벨 자간 (레퍼런스) */
  --sp-track-brand:      6px;

  /* ---- 형태 / 모션 ---- */
  --sp-radius-panel:     14px;
  --sp-radius:           6px;
  --sp-ease:             cubic-bezier(.2, .7, .2, 1);
  --sp-dur:              .18s;

  /* ---- 기존 변수 재정의 (인라인 style="var(--ink-2)" 등 대응) ---- */
  --pine:        var(--sp-cyan);         /* 브랜드/주요색 → 시안 (배경으로 쓰인 곳은 개별 재도색) */
  --pine-2:      var(--sp-cyan-light);
  --porcelain:   var(--sp-void-2);       /* 페이지 바탕 → 심우주 */
  --paper:       var(--sp-panel-solid);  /* 카드·메뉴 면 → 어두운 패널 */
  --gold:        var(--sp-amber);
  --gold-soft:   var(--sp-amber-soft);
  --ink:         var(--sp-text-strong);
  --ink-2:       var(--sp-text);
  --ink-3:       var(--sp-label);
  --line:        var(--sp-line);
  --copper:      var(--sp-amber);        /* 위험자산 */
  --slate:       var(--sp-cyan);         /* 카운터자산 */
  --sage:        var(--sp-mint);         /* 안전자산 */
  --serif:       var(--sp-font-display);
  --sans:        var(--sp-font-body);
  --num:         var(--sp-font-num);

  color-scheme: dark;
}
/* ---------- 10. 베이스 · 크롬 · 3D 배경 · 시차 ---------- */

/* ── 바탕: 심우주 + 정적 별 + 하단 성운 ── */
body.theme-space{
  background-color:var(--sp-void);
  background-image:
    radial-gradient(ellipse at 50% 120%, rgba(var(--sp-nebula-rgb), .45), transparent 60%),
    radial-gradient(1px 1px at 12% 18%, var(--sp-star), transparent),
    radial-gradient(1px 1px at 30% 70%, var(--sp-star-mint), transparent),
    radial-gradient(1.5px 1.5px at 55% 25%, var(--sp-star), transparent),
    radial-gradient(1px 1px at 72% 60%, var(--sp-star), transparent),
    radial-gradient(1px 1px at 88% 15%, var(--sp-star-sky), transparent),
    radial-gradient(1px 1px at 8% 88%, var(--sp-star), transparent),
    radial-gradient(1px 1px at 93% 82%, var(--sp-star), transparent),
    radial-gradient(1px 1px at 41% 9%, var(--sp-star-sky), transparent),
    radial-gradient(1.5px 1.5px at 64% 44%, var(--sp-star-soft), transparent),
    radial-gradient(1px 1px at 22% 46%, var(--sp-star), transparent),
    radial-gradient(1px 1px at 81% 36%, var(--sp-star-mint), transparent);
  background-attachment:fixed;
  color:var(--sp-text);
  font-family:var(--sp-font-body);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  timeline-scope:--sp-main;          /* .main 스크롤 타임라인을 .ambient 별 레이어에 공유 */
  scrollbar-color:rgba(var(--sp-cyan-rgb), .28) transparent;
}

/* 선택 영역 */
body.theme-space::selection,
body.theme-space ::selection{
  background:rgba(var(--sp-cyan-rgb), .32);
  color:var(--sp-white);
  text-shadow:none;
}

/* 스크롤바 (WebKit · 스크롤바 색 미지원 브라우저용) */
body.theme-space::-webkit-scrollbar,
body.theme-space ::-webkit-scrollbar{ width:10px; height:10px; background:transparent; }
body.theme-space::-webkit-scrollbar-track,
body.theme-space ::-webkit-scrollbar-track{ background:transparent; }
body.theme-space::-webkit-scrollbar-thumb,
body.theme-space ::-webkit-scrollbar-thumb{
  background-color:rgba(var(--sp-cyan-rgb), .24);
  background-clip:padding-box;
  border:2px solid transparent;
  border-radius:10px;
}
body.theme-space::-webkit-scrollbar-thumb:hover,
body.theme-space ::-webkit-scrollbar-thumb:hover{ background-color:rgba(var(--sp-cyan-rgb), .42); }
body.theme-space::-webkit-scrollbar-corner,
body.theme-space ::-webkit-scrollbar-corner{ background:transparent; }

/* 키보드 포커스 (입력칸은 컨트롤 섹션의 포커스 링 사용) */
body.theme-space :focus-visible:not(input, select, textarea){
  outline:2px solid var(--sp-cyan);
  outline-offset:2px;
}

/* 클래스 없는 일반 링크만 시안 (클래스 있는 링크는 각 컴포넌트 규칙 유지) */
body.theme-space a:not([class]){
  color:var(--sp-cyan);
  text-decoration-color:rgba(var(--sp-cyan-rgb), .4);
}
body.theme-space a:not([class]):hover{ color:var(--sp-cyan-light); }

/* ── 3D 배경 ①: 원근 그리드 바닥 (fixed, 흐름 밖) ── */
/* 원근 거리를 vh로 두어 화면 높이에 비례해 바닥이 보임 (px 고정이면 큰 화면에서 바닥이 화면 밖으로 사라짐) */
body.theme-space::before{
  content:"";
  position:fixed;
  left:-50vw; right:-50vw;
  bottom:-4vh;
  height:90vh;
  z-index:-1;
  pointer-events:none;
  background-image:
    linear-gradient(var(--sp-floor-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--sp-floor-line) 1px, transparent 1px);
  background-size:56px 56px;
  background-position:50% 100%;
  transform-origin:50% 100%;
  transform:perspective(90vh) rotateX(60deg);
  -webkit-mask-image:linear-gradient(to top, var(--sp-void) 20%, transparent 92%);
  mask-image:linear-gradient(to top, var(--sp-void) 20%, transparent 92%);
  opacity:.8;
  animation:sp-floor 10s linear infinite;
}

/* ── 3D 배경 ②: 행성 지평선 (거대한 타원의 윗부분 + 시안 림 라이트) ── */
/* 바닥(-1)보다 한 칸 뒤(-2): 그리드가 행성 앞쪽에 깔려 공간 순서가 맞음
   폭은 화면 폭에 비례(140vw, 최소 1500px)한 가로 타원 → 어떤 폭에서도 지평선이 화면 양 끝까지 이어짐
   (보이는 윗부분 높이는 260px로 고정, 넓은 화면일수록 곡률이 완만해짐) */
body.theme-space::after{
  content:"";
  position:fixed;
  left:calc(50% - max(1500px, 140vw) / 2);
  bottom:-1240px;
  width:max(1500px, 140vw); height:1500px;
  border-radius:50%;
  z-index:-2;
  pointer-events:none;
  background:radial-gradient(circle at 50% 0, rgba(var(--sp-planet-rgb), .6), var(--sp-void) 8%);
  box-shadow:var(--sp-planet-rim);
}

/* 그리드 한 칸(56px)만큼 흘려 이음매 없이 반복 */
@keyframes sp-floor{
  from{ transform:perspective(90vh) rotateX(60deg) translateY(0); }
  to  { transform:perspective(90vh) rotateX(60deg) translateY(56px); }  /* 56px = background-size 한 칸 */
}

/* ── 성운 레이어 + 스크롤 시차 별 ── */
/* theme-sa가 숨긴 .ambient를 되살림 (계획 예외: display, overflow) */
body.theme-space .ambient{
  display:block;
  overflow:hidden;
  background:
    radial-gradient(1100px 700px at 82% -12%, rgba(var(--sp-nebula-2-rgb), .16), transparent 62%),
    radial-gradient(900px 620px at -6% 42%, rgba(var(--sp-cyan-rgb), .04), transparent 60%);
  /* 지평선·바닥 위에는 별이 겹치지 않도록 아래쪽을 지움 */
  -webkit-mask-image:linear-gradient(to bottom, var(--sp-void) 55%, transparent 92%);
  mask-image:linear-gradient(to bottom, var(--sp-void) 55%, transparent 92%);
}
/* 먼 별: 작고 흐림, 느리게 이동 */
body.theme-space .ambient::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:200%;
  pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 18px 26px, var(--sp-star), transparent),
    radial-gradient(1px 1px at 122px 88px, var(--sp-star-sky), transparent),
    radial-gradient(1px 1px at 201px 172px, var(--sp-star), transparent),
    radial-gradient(1px 1px at 64px 205px, var(--sp-star-soft), transparent),
    radial-gradient(1px 1px at 170px 34px, var(--sp-star-mint), transparent),
    radial-gradient(1px 1px at 251px 141px, var(--sp-star), transparent);
  background-size:240px 240px, 310px 290px;
  opacity:.55;
}
/* 가까운 별: 조금 크고 밝음, 빠르게 이동 */
body.theme-space .ambient::after{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:200%;
  pointer-events:none;
  background-image:
    radial-gradient(1.5px 1.5px at 46px 58px, var(--sp-star), transparent),
    radial-gradient(1.5px 1.5px at 302px 214px, var(--sp-star-sky), transparent),
    radial-gradient(3px 3px at 281px 167px, rgba(var(--sp-cyan-rgb), .35), transparent),
    radial-gradient(1.5px 1.5px at 132px 391px, var(--sp-star-mint), transparent),
    radial-gradient(1.5px 1.5px at 214px 310px, var(--sp-star), transparent),
    radial-gradient(1.5px 1.5px at 398px 52px, var(--sp-star-soft), transparent);
  background-size:380px 380px, 470px 430px;
  opacity:.85;
}

/* 스크롤 타임라인 지원 브라우저에서만 시차 (미지원 시 정지된 별) */
@supports (animation-timeline: scroll()){
  body.theme-space .main{ scroll-timeline:--sp-main block; }
  body.theme-space .ambient::before{
    animation:sp-parallax-far linear both;
    animation-timeline:--sp-main;
  }
  body.theme-space .ambient::after{
    animation:sp-parallax-near linear both;
    animation-timeline:--sp-main;
  }
}
@keyframes sp-parallax-far{
  from{ translate:0 0; }
  to  { translate:0 -120px; }
}
@keyframes sp-parallax-near{
  from{ translate:0 0; }
  to  { translate:0 -360px; }
}

/* ── 상단바 (레퍼런스 .top: 바닥선 + 왼쪽 90px 시안 선) ── */
/* 바닥선은 테두리 대신 안쪽 1px 그림자(도색만, 원래 테두리 없음 → 크기 그대로) */
body.theme-space .topbar{
  background:
    linear-gradient(180deg, rgba(var(--sp-cyan-rgb), .04), transparent 70%),
    var(--sp-chrome);
  box-shadow:
    inset 0 -1px 0 var(--sp-line),
    0 14px 30px -22px rgba(var(--sp-shadow-rgb), .9);
  color:var(--sp-text);
}
body.theme-space .topbar::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:90px; height:1px;
  z-index:2;
  pointer-events:none;
  background:var(--sp-cyan);
  box-shadow:var(--sp-glow-line);
}
/* 브랜드 구간: 박스 도색 제거, 사이드바 오른쪽 선을 위로 이어 줌 (모바일 섹션에서 선 제거) */
body.theme-space .topbar-brand,
body.theme-space.sidebar-collapsed .topbar-brand{
  background:transparent;
  box-shadow:inset -1px 0 0 var(--sp-line);
}

/* 브랜드 */
body.theme-space .brand-name{
  font-family:var(--sp-font-display);
  font-synthesis:none;
  font-weight:400;
  font-size:20px;
  letter-spacing:var(--sp-track-brand);
  text-transform:uppercase;
  color:var(--sp-text-strong);
  text-shadow:var(--sp-text-glow-soft);
}
body.theme-space .brand-tag{
  font-family:var(--sp-font-label);
  font-synthesis:none;
  font-weight:200;
  font-size:10px;
  letter-spacing:var(--sp-track);
  text-transform:uppercase;
  color:var(--sp-sub);
}

/* ── 아바타 버튼 · 드롭다운 ── */
body.theme-space .avatar-btn{
  background:transparent;
  color:var(--sp-cyan);
  font-family:var(--sp-font-display);
  font-synthesis:none;
  font-weight:500;
  text-shadow:0 0 8px rgba(var(--sp-cyan-rgb), .6);
  box-shadow:
    inset 0 0 0 1px var(--sp-cyan),
    inset 0 0 10px rgba(var(--sp-cyan-rgb), .18),
    0 0 12px rgba(var(--sp-cyan-rgb), .35);
  transition:filter .15s ease, background-color var(--sp-dur) var(--sp-ease), box-shadow var(--sp-dur) var(--sp-ease);
}
body.theme-space .avatar-btn:hover{
  background:rgba(var(--sp-cyan-rgb), .12);
  box-shadow:
    inset 0 0 0 1px var(--sp-cyan-light),
    inset 0 0 12px rgba(var(--sp-cyan-rgb), .25),
    0 0 18px rgba(var(--sp-cyan-rgb), .5);
}
body.theme-space .avatar-menu{
  background:var(--sp-glass-sheen), var(--sp-panel-solid);
  border-color:var(--sp-line-panel);
  box-shadow:var(--sp-glass-shadow);
  color:var(--sp-text);
}
/* 메뉴 윗선의 짧은 시안 표시선 */
body.theme-space .avatar-menu::before{
  content:"";
  position:absolute;
  top:-1px; left:18px;
  width:40px; height:1px;
  pointer-events:none;
  background:var(--sp-cyan);
  box-shadow:var(--sp-glow-line);
}
body.theme-space .avatar-menu-head{ color:var(--sp-text-strong); }
body.theme-space .avatar-menu-head .badge{
  font-family:var(--sp-font-label);
  font-synthesis:none;
  font-weight:600;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--sp-amber);
  background:rgba(var(--sp-amber-rgb), .12);
  box-shadow:inset 0 0 0 1px rgba(var(--sp-amber-rgb), .4);
  text-shadow:0 0 6px rgba(var(--sp-amber-rgb), .5);
}
body.theme-space .avatar-menu-divider{ background:var(--sp-line); }
body.theme-space .avatar-menu-item{
  font-family:var(--sp-font-label);
  font-synthesis:none;
  font-weight:400;
  letter-spacing:1px;
  color:var(--sp-text);
  transition:background-color var(--sp-dur) var(--sp-ease), color var(--sp-dur) var(--sp-ease), box-shadow var(--sp-dur) var(--sp-ease);
}
body.theme-space .avatar-menu-item:hover{
  background:linear-gradient(90deg, rgba(var(--sp-cyan-rgb), .12), rgba(var(--sp-cyan-rgb), .02));
  color:var(--sp-text-strong);
  box-shadow:inset 2px 0 0 var(--sp-cyan);
}

/* ── 사이드바 ── */
/* 오른쪽 선: 테두리 대신 안쪽 1px 그림자 (메뉴 폭이 줄지 않게, 도색만) */
body.theme-space .sidebar{
  background:linear-gradient(180deg, var(--sp-chrome), var(--sp-chrome-2));
  box-shadow:inset -1px 0 0 var(--sp-line);
  color:var(--sp-text);
}

/* 접기 버튼: 고스트 3D 키캡 (계획 예외: :active 이동) */
body.theme-space .sidebar-toggle-btn{
  background:var(--sp-key-ghost-bg);
  border-color:transparent;
  box-shadow:var(--sp-key-ghost);
  color:var(--sp-cyan);
  transition:background .15s ease, box-shadow var(--sp-dur) var(--sp-ease), color var(--sp-dur) var(--sp-ease), translate .08s ease;
}
body.theme-space .sidebar-toggle-btn:hover{
  background:linear-gradient(rgba(var(--sp-cyan-rgb), .18), rgba(var(--sp-cyan-rgb), .04));
  box-shadow:var(--sp-key-ghost), 0 0 14px -2px rgba(var(--sp-cyan-rgb), .45);
  color:var(--sp-cyan-light);
}
body.theme-space .sidebar-toggle-btn:active{
  translate:0 2px;
  box-shadow:var(--sp-key-ghost-down);
}
/* svg 아이콘 글로우 (계획 예외: drop-shadow) */
body.theme-space .sidebar-toggle-ico{ filter:drop-shadow(0 0 3px rgba(var(--sp-cyan-rgb), .55)); }

/* 메뉴 그룹 라벨 */
body.theme-space .nav-label{
  font-family:var(--sp-font-label);
  font-synthesis:none;
  font-size:11px;
  font-weight:400;
  letter-spacing:var(--sp-track);
  color:var(--sp-label);
}

/* 메뉴 항목 — 접힘 레일이 font-size:0 트릭을 쓰므로 자간은 em 단위 */
body.theme-space .nav-item{
  font-family:var(--sp-font-label);
  font-synthesis:none;
  font-weight:400;
  letter-spacing:.06em;
  color:var(--sp-label);
}
body.theme-space .nav-item:hover{
  color:var(--sp-text);
  background:rgba(var(--sp-cyan-rgb), .06);
}
/* 활성: 왼쪽 시안 선 + 빛 번짐 (레퍼런스 리드아웃) */
body.theme-space .nav-item.active{
  color:var(--sp-text-strong);
  font-weight:400;
  background:linear-gradient(90deg, rgba(var(--sp-cyan-rgb), .14), rgba(var(--sp-cyan-rgb), .02));
  box-shadow:
    inset 2px 0 0 var(--sp-cyan),
    inset 12px 0 14px -12px rgba(var(--sp-cyan-rgb), .55);
  text-shadow:0 0 8px rgba(var(--sp-cyan-rgb), .5);
}
/* 아이콘 (크기는 theme-sa 값 유지) */
body.theme-space .nav-ico{ stroke:var(--sp-label); }
body.theme-space .nav-item:hover .nav-ico{ stroke:var(--sp-text); }
body.theme-space .nav-item.active .nav-ico{
  stroke:var(--sp-cyan);
  filter:drop-shadow(0 0 4px var(--sp-cyan));
}

/* 사이드바 하단 */
body.theme-space .side-foot{
  border-top-color:var(--sp-line-faint);
  color:var(--sp-label);
}
body.theme-space .side-foot b{
  color:var(--sp-steel);
  font-weight:500;
}

/* ── 페이지 머리 ── */
body.theme-space .page-eyebrow{
  font-family:var(--sp-font-label);
  font-synthesis:none;
  font-weight:500;
  letter-spacing:var(--sp-track);
  color:var(--sp-amber);
  text-shadow:var(--sp-glow-amber);
}
body.theme-space .page-title{
  font-family:var(--sp-font-display);
  font-synthesis:none;
  font-weight:400;
  letter-spacing:3px;
  color:var(--sp-text-strong);
  text-shadow:var(--sp-text-glow-soft);
}
body.theme-space .page-date{
  font-family:var(--sp-font-num);
  font-variant-numeric:tabular-nums;
  letter-spacing:1px;
  color:var(--sp-steel);
}
body.theme-space .page-summary-line{
  font-variant-numeric:tabular-nums;
  color:var(--sp-text);
}

/* 헤어라인: 바닥선 + 왼쪽 90px 빛나는 시안 선 */
body.theme-space .rule{
  background:linear-gradient(90deg, var(--sp-cyan) 0 90px, var(--sp-line) 90px) left bottom / 100% 1px no-repeat;
  box-shadow:none;
}
/* margin 대신 relative 이동: 부모와 마진 상쇄로 .rule이 밀리지 않게 */
body.theme-space .rule::after{
  content:"";
  display:block;
  position:relative; top:1px;
  width:90px; height:1px;
  pointer-events:none;
  background:var(--sp-cyan);
  box-shadow:var(--sp-glow-line);
}

/* ── 탭바 · 서브탭바 (레퍼런스 .nv) ── */
body.theme-space .tab-bar,
body.theme-space .subtab-bar{ border-bottom-color:var(--sp-line); }

/* 계획 예외: 밑줄 6px/4px → 2px, 줄어든 만큼 padding-bottom을 늘려 높이 유지 */
body.theme-space .tab-item{
  font-family:var(--sp-font-label);
  font-synthesis:none;
  font-size:12px;
  font-weight:500;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--sp-label);
  border-bottom-width:2px;
  padding-bottom:16px;
  transition:color .15s ease, border-color .15s ease, text-shadow .15s ease, box-shadow .15s ease;
}
body.theme-space .subtab-item{
  font-family:var(--sp-font-label);
  font-synthesis:none;
  font-size:12px;
  font-weight:500;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--sp-label);
  border-bottom-width:2px;
  padding-bottom:12px;
  transition:color .15s ease, border-color .15s ease, text-shadow .15s ease, box-shadow .15s ease;
}
body.theme-space .tab-item:hover,
body.theme-space .subtab-item:hover{ color:var(--sp-text); }
body.theme-space .tab-item:hover:not(.active),
body.theme-space .subtab-item:hover:not(.active){ border-bottom-color:var(--sp-line-strong); }
/* 활성: 앰버 + 글로우 + 밑줄 아래 빛 번짐 */
body.theme-space .tab-item.active,
body.theme-space .subtab-item.active{
  color:var(--sp-amber);
  text-shadow:var(--sp-glow-amber);
  border-bottom-color:var(--sp-amber);
  background-image:linear-gradient(to top, rgba(var(--sp-amber-rgb), .07), transparent 70%);
  box-shadow:0 7px 8px -7px rgba(var(--sp-amber-rgb), .8);
}
/* 비활성 탭: 라벨색을 한 단계만 흐리게 (불투명도 .7 → 바탕 대비 ≈ 3.3:1, 글자로 읽힘) */
body.theme-space .tab-item.disabled{
  color:var(--sp-label);
  opacity:.7;
}
/* 좁은 화면: 넓은 자간 때문에 한글 탭이 줄바꿈되지 않도록 자간만 축소 */
@media (max-width:920px){
  body.theme-space .tab-item,
  body.theme-space .subtab-item{ letter-spacing:1px; }
}
/* ---------- 20. 데이터 표시 · 유리 카드 ---------- */

/* ── 입체 유리 패널: KPI 밴드(.stats) · 카드(.card) ── */
body.theme-space .stats {
  background: var(--sp-glass-sheen), var(--sp-panel);
  border-color: var(--sp-line-panel);
  border-radius: var(--sp-radius-panel);
  box-shadow: var(--sp-glass-shadow);
  color: var(--sp-text);
}
body.theme-space .card {
  background: var(--sp-glass-sheen), var(--sp-panel);
  border-color: var(--sp-line-panel);
  border-radius: var(--sp-radius-panel);
  box-shadow: var(--sp-glass-shadow);
  color: var(--sp-text);
}
/* 섹션 틴트 → 같은 유리, 테두리 색만 아주 옅게 구분 (theme-sa 흰 배경 덮기) */
body.theme-space .card--pine {
  background: var(--sp-glass-sheen), var(--sp-panel);
  border-color: var(--sp-line-panel);
}
body.theme-space .card--sage {
  background: var(--sp-glass-sheen), var(--sp-panel);
  border-color: rgba(var(--sp-mint-rgb), .25);
}
body.theme-space .card--gold {
  background: var(--sp-glass-sheen), var(--sp-panel);
  border-color: rgba(var(--sp-amber-rgb), .30);
}
/* 호버: 그림자가 깊어져 떠오름 (기존 transition: box-shadow 그대로 사용) */
body.theme-space .card:hover {
  box-shadow: var(--sp-glass-shadow-hover);
}

/* ── 카드 헤더: 바닥선 + 왼쪽 90px 시안 발광 선 (레퍼런스 .top) ── */
body.theme-space .card-head {
  position: relative;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--sp-line);
}
body.theme-space .card-head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 90px;
  height: 1px;
  background: var(--sp-cyan);
  box-shadow: var(--sp-glow-line);
  pointer-events: none;
}
body.theme-space .card-title {
  font-family: var(--sp-font-display);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: var(--sp-track);
  color: var(--sp-text-strong);
  font-synthesis: none;
}
/* 제목 앞 발광 점 */
body.theme-space .card-title::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 10px;
  vertical-align: middle;
  border-radius: 50%;
  background: var(--sp-cyan);
  box-shadow: var(--sp-glow-dot);
  pointer-events: none;
}
body.theme-space .card-link {
  font-family: var(--sp-font-label);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--sp-cyan);
  font-synthesis: none;
}
body.theme-space .card-link:hover {
  color: var(--sp-text-strong);
  text-shadow: 0 0 8px rgba(var(--sp-cyan-rgb), .6);
}

/* ── 리드아웃 스탯 (레퍼런스 .m): 왼쪽 1px 시안선 + 5px 발광 점 ── */
body.theme-space .stats .stat,
body.theme-space .stat-row .stat,
body.theme-space .stat-stack > .stat {
  position: relative;
}
/* 형제 구분선(원래 있는 1px 테두리, theme-sa 오렌지) → 시안 리드아웃 선: 색만 교체 */
body.theme-space .stat + .stat {
  border-left-color: rgba(var(--sp-cyan-rgb), .5);
}
/* .stats 첫 칸은 원래 테두리가 없음 → 크기를 바꾸지 않도록 안쪽 1px 그림자로 선을 그림 */
body.theme-space .stats .stat:first-child {
  box-shadow: inset 1px 0 0 rgba(var(--sp-cyan-rgb), .5);
}
body.theme-space .stats .stat::before,
body.theme-space .stat-row .stat::before,
body.theme-space .stat-stack > .stat::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sp-cyan);
  box-shadow: var(--sp-glow-dot);
  pointer-events: none;
}
/* 테두리 없이 안쪽 그림자 선을 쓰는 .stats 첫 칸: 점 중심을 선(0~1px)에 맞춤 */
body.theme-space .stats .stat:first-child::before {
  left: -2px;
}
/* 좌측 패딩 0인 항목(.stat-row 첫 칸 · .stat-stack): 글자에 붙지 않게
   12px 바깥(카드 여백)에 선·점을 그림 — 원래 테두리 없음(그대로 유지) */
body.theme-space .stat-row .stat:first-child::before,
body.theme-space .stat-stack > .stat::before {
  left: -15px;
}
body.theme-space .stat-row .stat:first-child::after,
body.theme-space .stat-stack > .stat::after {
  content: "";
  position: absolute;
  left: -13px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(var(--sp-cyan-rgb), .5);
  pointer-events: none;
}

/* 스탯 타이포 */
body.theme-space .stat-label {
  font-family: var(--sp-font-label);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: var(--sp-track);
  text-transform: uppercase;
  color: var(--sp-label);
  font-synthesis: none;
}
body.theme-space .stat-value {
  font-family: var(--sp-font-display);
  font-weight: 400;
  font-size: 25px;               /* Orbitron 폭 보정 (29px → 25px) */
  letter-spacing: 0;
  color: var(--sp-text-strong);
  text-shadow: var(--sp-text-glow);
  font-variant-numeric: tabular-nums;
  font-synthesis: none;
}
body.theme-space .stat-value small {
  color: var(--sp-steel);
  text-shadow: none;
}
body.theme-space .stat-value.gold {
  color: var(--sp-amber);
  text-shadow: var(--sp-glow-amber), 0 2px 0 rgba(var(--sp-nebula-rgb), .6);
}
/* 신용 게이트 항목 설명 목록(.term-help): 이름은 스탯 라벨과 같은 라벨 글꼴, 설명은 본문 글꼴 */
body.theme-space .term-help {
  border-top-color: var(--sp-line-panel);
}
body.theme-space .term-help dt {
  font-family: var(--sp-font-label);
  font-weight: 400;
  letter-spacing: 1px;
  color: var(--sp-text);
  font-synthesis: none;
}
body.theme-space .term-help dd,
body.theme-space .mstock-card-help {
  font-family: var(--sp-font-body);
  color: var(--sp-steel);
}
body.theme-space .stat-sub {
  font-family: var(--sp-font-body);
  font-weight: 400;
  color: var(--sp-steel);
  font-variant-numeric: tabular-nums;
}

/* ── 시스템현황 카드(.status-grid .stat): 작은 유리 카드, 리드아웃 선·점 없음 ── */
body.theme-space .status-grid .stat {
  border-color: var(--sp-line-panel);
  border-radius: 12px;
  background: var(--sp-glass-sheen), var(--sp-panel);
  box-shadow: var(--sp-glass-shadow-sm);
}
body.theme-space .status-grid .stat + .stat {
  border-color: var(--sp-line-panel);
}
body.theme-space .status-grid .stat::before,
body.theme-space .status-grid .stat::after {
  content: none;
}

/* ── 표 (raw table) ── */
/* 헤더 밑줄: 원래 2px 테두리 폭은 그대로 두고(투명) 안쪽 1px 시안 선만 그림 → 표 높이 변화 없음 */
body.theme-space th {
  font-family: var(--sp-font-label);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: var(--sp-track);
  text-transform: uppercase;
  color: var(--sp-label);
  border-bottom-color: transparent;
  box-shadow: inset 0 -1px 0 rgba(var(--sp-cyan-rgb), .55);
  font-synthesis: none;
}
/* 열로 정렬되는 숫자: Orbitron은 고정폭 숫자가 없어 자릿수가 어긋남 → Exo 2 고정폭 숫자 */
body.theme-space td {
  font-family: var(--sp-font-body);
  font-size: 13px;
  font-weight: 400;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--sp-text);
  border-bottom-color: var(--sp-line-faint);
}
body.theme-space td.name {
  font-family: var(--sp-font-body);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--sp-text-strong);
}
body.theme-space tbody tr:hover {
  background: rgba(var(--sp-cyan-rgb), .05);
}

/* ── 칩(자산군 · 상태 뱃지) ── */
body.theme-space .chip {
  font-family: var(--sp-font-label);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: rgba(var(--sp-cyan-rgb), .06);
  font-synthesis: none;
}
/* 기존 점(::before)은 크기 유지, 발광만 */
body.theme-space .chip::before {
  box-shadow: 0 0 6px currentColor;
}
body.theme-space .chip.risk {
  color: var(--sp-amber);
  background: rgba(var(--sp-amber-rgb), .08);
  border-color: rgba(var(--sp-amber-rgb), .40);
}
body.theme-space .chip.counter {
  color: var(--sp-cyan);
  background: rgba(var(--sp-cyan-rgb), .08);
  border-color: rgba(var(--sp-cyan-rgb), .40);
}
body.theme-space .chip.safe {
  color: var(--sp-mint);
  background: rgba(var(--sp-mint-rgb), .08);
  border-color: rgba(var(--sp-mint-rgb), .40);
}
body.theme-space .chip.warn {
  color: var(--sp-amber);
  background: rgba(var(--sp-amber-rgb), .14);
  border-color: rgba(var(--sp-amber-rgb), .55);
}
body.theme-space .chip.danger {
  color: var(--sp-red);
  background: rgba(var(--sp-red-rgb), .10);
  border-color: rgba(var(--sp-red-rgb), .45);
}

/* ── 수익률 색: 상승 민트 / 하락 레드 ── */
body.theme-space .ret.pos {
  color: var(--sp-mint);
  text-shadow: 0 0 8px rgba(var(--sp-mint-rgb), .35);
}
body.theme-space .ret.neg {
  color: var(--sp-red);
  text-shadow: 0 0 8px rgba(var(--sp-red-rgb), .35);
}

/* ── 기간별 누적수익률: 미니 리드아웃 패널 (외곽선은 안쪽 그림자 → 크기 그대로) ── */
body.theme-space .period-return-item {
  background: rgba(var(--sp-cyan-rgb), .04);
  box-shadow: inset 0 0 0 1px var(--sp-line-faint);
  border-radius: 12px;
}
body.theme-space .period-return-label {
  font-family: var(--sp-font-label);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--sp-label);
  font-synthesis: none;
}
body.theme-space .period-return-rate {
  font-family: var(--sp-font-num);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
body.theme-space .period-return-amount {
  font-family: var(--sp-font-num);
  font-variant-numeric: tabular-nums;
  color: var(--sp-steel);
}

/* ── 공포와 탐욕: 게이지 ── */
body.theme-space .fg-gauge-score {
  font-family: var(--sp-font-display);
  font-weight: 500;
  color: var(--sp-white);
  text-shadow: var(--sp-text-glow-core);
  font-variant-numeric: tabular-nums;
  font-synthesis: none;
}
/* 띠 경계 --fg-b1~--fg-b4는 style.css의 .fg-gauge-track 주석 참고 — 서버 gauge_bands에서 만든 값이라 숫자를 적지 않음 */
body.theme-space .fg-gauge-track {
  background: linear-gradient(to right,
    var(--sp-mint) 0 var(--fg-b1),
    rgba(var(--sp-mint-rgb), .35) var(--fg-b1) var(--fg-b2),
    rgba(var(--sp-cyan-rgb), .55) var(--fg-b2) var(--fg-b3),
    rgba(var(--sp-amber-rgb), .45) var(--fg-b3) var(--fg-b4),
    var(--sp-amber) var(--fg-b4) 100%);
  box-shadow: 0 0 12px rgba(var(--sp-cyan-rgb), .25);
}
body.theme-space .fg-gauge-pointer {
  background: var(--sp-white);
  box-shadow: 0 0 8px var(--sp-cyan), 0 0 2px var(--sp-white);
}
body.theme-space .fg-gauge-marks {
  font-family: var(--sp-font-label);
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
  color: var(--sp-label);
  font-synthesis: none;
}
body.theme-space .fg-gauge-rating {
  font-family: var(--sp-font-label);
  font-weight: 600;
  letter-spacing: 1px;
  font-synthesis: none;
}

/* 구간 색 (z1 극단적 공포 → z5 극단적 탐욕) */
body.theme-space .fg-z1 { background: rgba(var(--sp-mint-rgb), .22);  color: var(--sp-mint); }
body.theme-space .fg-z2 { background: rgba(var(--sp-mint-rgb), .12);  color: var(--sp-mint); }
body.theme-space .fg-z3 { background: rgba(var(--sp-cyan-rgb), .14);  color: var(--sp-cyan); }
body.theme-space .fg-z4 { background: rgba(var(--sp-amber-rgb), .14); color: var(--sp-amber); }
body.theme-space .fg-z5 { background: rgba(var(--sp-amber-rgb), .26); color: var(--sp-amber-soft); }

/* ── 공포와 탐욕: 지표 카드 (작은 유리 카드) ── */
body.theme-space .fg-indicator-card {
  border-color: var(--sp-line-panel);
  background: var(--sp-glass-sheen), var(--sp-panel);
  box-shadow: var(--sp-glass-shadow-sm);
}
body.theme-space .fg-indicator-name {
  font-family: var(--sp-font-label);
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--sp-text-strong);
  font-synthesis: none;
}
body.theme-space .fg-indicator-desc {
  font-family: var(--sp-font-body);
  font-weight: 400;              /* 11.5px 보조 문구: body 300보다 한 단계 굵게 */
  color: var(--sp-steel);
}
body.theme-space .fg-indicator-plain {
  font-family: var(--sp-font-body);
  color: var(--sp-text);
  background: rgba(var(--sp-amber-rgb), .08);
  box-shadow: inset 2px 0 0 rgba(var(--sp-amber-rgb), .6);
}
body.theme-space .fg-indicator-score {
  font-family: var(--sp-font-num);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--sp-text-strong);
  text-shadow: var(--sp-text-glow);
}

/* 미니 바 (레퍼런스 2px 발광 선): 트랙 높이 5px · overflow:hidden은 그대로 두고(레이아웃 불변)
   도색만으로 가운데 2px 선 + 위아래 옅은 빛 번짐을 그림 (잘리는 box-shadow 대신) */
body.theme-space .fg-mini-track {
  background: linear-gradient(rgba(var(--sp-cyan-rgb), .15), rgba(var(--sp-cyan-rgb), .15)) 0 2px / 100% 2px no-repeat;
  border-radius: 0;
}
body.theme-space .fg-mini-fill.fg-z1 {
  background:
    linear-gradient(var(--sp-mint), var(--sp-mint)) 0 2px / 100% 2px no-repeat,
    linear-gradient(transparent, rgba(var(--sp-mint-rgb), .45), transparent);
}
body.theme-space .fg-mini-fill.fg-z2 {
  background:
    linear-gradient(rgba(var(--sp-mint-rgb), .6), rgba(var(--sp-mint-rgb), .6)) 0 2px / 100% 2px no-repeat,
    linear-gradient(transparent, rgba(var(--sp-mint-rgb), .28), transparent);
}
body.theme-space .fg-mini-fill.fg-z3 {
  background:
    linear-gradient(var(--sp-cyan), var(--sp-cyan)) 0 2px / 100% 2px no-repeat,
    linear-gradient(transparent, rgba(var(--sp-cyan-rgb), .45), transparent);
}
body.theme-space .fg-mini-fill.fg-z4 {
  background:
    linear-gradient(rgba(var(--sp-amber-rgb), .7), rgba(var(--sp-amber-rgb), .7)) 0 2px / 100% 2px no-repeat,
    linear-gradient(transparent, rgba(var(--sp-amber-rgb), .28), transparent);
}
body.theme-space .fg-mini-fill.fg-z5 {
  background:
    linear-gradient(var(--sp-amber), var(--sp-amber)) 0 2px / 100% 2px no-repeat,
    linear-gradient(transparent, rgba(var(--sp-amber-rgb), .45), transparent);
}

/* 분할 매수·매도 가이드 표: 발동 칸 강조 / 의견 칸 본문 */
body.theme-space #step-guide-table td.fg-step-active {
  background: rgba(var(--sp-amber-rgb), .16);
  color: var(--sp-amber);
}
body.theme-space td.fg-opinion-cell {
  font-family: var(--sp-font-body);
  font-size: 12px;
  font-variant-numeric: normal;
  color: var(--sp-text);
}

/* ── 모바일(920px 이하): 스탯 세로 쌓기 ── */
@media (max-width: 920px) {
  /* 구분선(theme-sa --line) → 옅은 시안 */
  body.theme-space .stat + .stat {
    border-top-color: var(--sp-line-faint);
  }
  /* .stats 밴드: 좌측 패딩 0 → 선·점을 밴드 여백(24px) 쪽 바깥에 그림 (첫 칸의 안쪽 선도 제거) */
  body.theme-space .stats .stat:first-child {
    box-shadow: none;
  }
  body.theme-space .stats .stat::before,
  body.theme-space .stats .stat:first-child::before {
    left: -15px;
    top: 25px;
  }
  body.theme-space .stats .stat::after {
    content: "";
    position: absolute;
    left: -13px;
    top: 18px;
    bottom: 18px;
    width: 1px;
    background: rgba(var(--sp-cyan-rgb), .5);
    pointer-events: none;
  }
  /* .stat-row: 첫 칸은 데스크톱처럼 카드 여백 쪽 바깥 선·점(라벨 높이에 맞춤).
     옆 칸들은 좌측 패딩 0으로 글자에 바로 붙고 바깥 선은 앞 칸 글자와 겹치므로 점 없이
     기본 위쪽 구분선만 사용 (base .stat + .stat 의 border-left:none 그대로) */
  body.theme-space .stat-row .stat + .stat::before {
    content: none;
  }
  body.theme-space .stat-row .stat:first-child::before {
    top: 25px;
  }
  body.theme-space .stat-row .stat:first-child::after {
    top: 18px;
    bottom: 18px;
  }

  /* 좁은 화면 원시 표: 넓은 자간 때문에 표 최소 폭이 카드보다 커지지 않도록 자간만 축소 */
  body.theme-space th {
    letter-spacing: 1px;
  }
  body.theme-space td .btn-edit,
  body.theme-space td .btn-delete {
    letter-spacing: .5px;
  }
}
/* 아주 좁은 화면(≈ 휴대폰 폭): 고정폭 숫자가 조금 넓어 표가 카드 밖으로 밀리지 않도록 셀 글자만 살짝 줄임
   (375px에서 기본 테마와 같은 표 폭) */
@media (max-width: 420px) {
  body.theme-space td {
    font-size: 12.5px;
    letter-spacing: -.2px;
  }
}
/* ---------- 30. 도넛 3D 궤도 · 행성 코어 · 배분 바 ---------- */

/* ── 도넛 스테이지: 궤도 링 · 행성 코어를 품는 격리 무대 ──
   isolation으로 z:-1 장식이 카드 뒤로 빠지지 않게 가둠. 장식은 모두 z:-1 → 캔버스(Chart.js 툴팁 포함) 뒤.
   margin은 링 여백 확보용 (계획서 레이아웃 예외: 8px auto 22px → 48px auto 44px).
   위 여백은 .card-head의 margin-bottom(20px)과 상쇄되므로 바깥 점선 링(스테이지 밖 ≈ 40px)보다 크게 둠 */
body.theme-space .donut-stage{
  isolation:isolate;
  margin:48px auto 44px;
}

/* 평면 회전 링 (레퍼런스 60초 링) — 시안 점선 + 위성점, 캔버스 뒤
   맨 아래 층: 도넛 링 안·바깥 가장자리의 은은한 중성 광 (캔버스 filter 대신 — 링은 반지름 ≈ 이 상자의 81%, 구멍 ≈ 58.6%) */
body.theme-space .donut-stage::before{
  content:"";
  position:absolute;
  inset:-12%;
  border-radius:50%;
  border:1px dashed rgba(var(--sp-cyan-rgb), .35);
  /* 위성점: 점선 위에 걸치도록 중심을 1.5px 내림 (0이면 위쪽이 잘려 반원이 됨) */
  background:
    radial-gradient(circle at 50% 1.5px, var(--sp-cyan) 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 50% 1.5px, rgba(var(--sp-cyan-rgb), .30), transparent 8px),
    radial-gradient(circle closest-side, transparent 53%, rgba(var(--sp-text-rgb), .18) 58.6% 81.4%, transparent 88%);
  z-index:-1;
  pointer-events:none;
  animation:sp-spin 60s linear infinite;
}

/* 3D 기울어진 앰버 궤도 — 캔버스 뒤(z -1): 도넛 조각 · Chart.js 툴팁을 가리지 않음, 클릭 통과 */
body.theme-space .donut-stage::after{
  content:"";
  position:absolute;
  inset:-22%;
  border-radius:50%;
  border:1.5px dotted rgba(var(--sp-amber-rgb), .55);
  background:radial-gradient(circle at 50% 2px,
    var(--sp-amber) 0 3.5px,
    rgba(var(--sp-amber-rgb), .30) 4.5px,
    transparent 8px);
  box-shadow:0 0 18px rgba(var(--sp-amber-rgb), .12);
  z-index:-1;
  pointer-events:none;
  transform:perspective(800px) rotateX(72deg);
  animation:sp-orbit3d 30s linear infinite;
}

/* ── 행성 코어 ──
   .donut-center 자체는 원래대로(z-index · 배경 없음) → 글자(.n/.l)만 캔버스 위.
   코어 구체 · 레이더 · 눈금은 z:-1 pseudo로 그려 .donut-stage 무대 안, 캔버스 뒤에 깔림
   (컷아웃이 투명이라 그대로 비침, 툴팁은 항상 맨 위) */

/* 정지 층: 점선 외곽 링 + 십자 눈금 + 행성 코어 구체
   코어 층은 스테이지(168px)와 같은 크기로 가운데 배치: 이 상자 = 스테이지 × 1.48 이므로 크기 = 100% / 1.48
   구체: 중앙 원판(반지름 ≈ 스테이지 폭의 23%, 컷아웃 안) + 좌상단 하이라이트 + 얇은 시안 림 */
body.theme-space .donut-center::before{
  content:"";
  position:absolute;
  inset:-24%;
  border-radius:50%;
  border:1px dotted rgba(var(--sp-cyan-rgb), .18);
  background:
    linear-gradient(rgba(var(--sp-cyan-rgb), .55), rgba(var(--sp-cyan-rgb), .55)) 50% 0    / 1px 9px no-repeat,
    linear-gradient(rgba(var(--sp-cyan-rgb), .55), rgba(var(--sp-cyan-rgb), .55)) 50% 100% / 1px 9px no-repeat,
    linear-gradient(rgba(var(--sp-cyan-rgb), .55), rgba(var(--sp-cyan-rgb), .55)) 0 50%    / 9px 1px no-repeat,
    linear-gradient(rgba(var(--sp-cyan-rgb), .55), rgba(var(--sp-cyan-rgb), .55)) 100% 50% / 9px 1px no-repeat,
    radial-gradient(circle at 44% 40%,
      rgba(var(--sp-cyan-rgb), .30),
      rgba(var(--sp-cyan-rgb), 0) 12%) 50% 50% / calc(100% / 1.48) calc(100% / 1.48) no-repeat,
    radial-gradient(circle closest-side at 50% 50%,
      rgba(var(--sp-core-rgb), .85) 0 22%,
      rgba(var(--sp-core-dark-rgb), .95) 44%,
      rgba(var(--sp-cyan-rgb), .30) 45.4%,
      transparent 46.6%) 50% 50% / calc(100% / 1.48) calc(100% / 1.48) no-repeat;
  background-origin:border-box;
  z-index:-1;
  pointer-events:none;
}

/* 레이더 스윕 (8초) — 원형 마스크, 0° 쪽에 밝은 선. 코어 위(트리 순서상 ::before 다음)
   부채꼴 알파는 레퍼런스(.07)에 가깝게 낮춰 라벨 대비 유지 (.10 위에서 코어 라벨 ≈ 4.8:1) */
body.theme-space .donut-center::after{
  content:"";
  position:absolute;
  inset:27%;
  border-radius:50%;
  background:conic-gradient(from 0deg,
    rgba(var(--sp-cyan-rgb), .45) 0 1.2deg,
    rgba(var(--sp-cyan-rgb), .10) 1.2deg,
    rgba(var(--sp-cyan-rgb), 0) 70deg,
    transparent 360deg);
  -webkit-mask:radial-gradient(circle, var(--sp-void) 62%, transparent 63%);
          mask:radial-gradient(circle, var(--sp-void) 62%, transparent 63%);
  z-index:-1;
  pointer-events:none;
  animation:sp-spin 8s linear infinite;
}

/* 코어 수치 · 라벨 */
body.theme-space .donut-center .n{
  font-family:var(--sp-font-display);
  font-weight:500;
  font-synthesis:none;
  font-variant-numeric:tabular-nums;
  color:var(--sp-white);
  text-shadow:var(--sp-text-glow-core);
}
/* 라벨: 짙은 코어색 후광으로 스윕 선이 글자 밑을 지날 때도 획 주변 대비 유지 */
body.theme-space .donut-center .l{
  font-family:var(--sp-font-label);
  font-size:11px;
  font-weight:300;
  font-synthesis:none;
  letter-spacing:4px;
  text-transform:uppercase;
  color:var(--sp-sub);
  text-shadow:0 0 4px rgba(var(--sp-core-dark-rgb), .95), 0 0 2px rgba(var(--sp-core-dark-rgb), .95);
}

/* ── 자산 배분 (레퍼런스 미니 바) ── */
body.theme-space .alloc-row{
  font-family:var(--sp-font-body);
  color:var(--sp-text);
}
/* 범례 이름 — theme-sa(ink-2) 덮어씀, 한글은 IBM Plex Sans KR */
body.theme-space .alloc-name{
  font-family:var(--sp-font-label);
  font-size:11px;
  font-weight:400;
  font-synthesis:none;
  letter-spacing:1px;
  color:var(--sp-steel);
}
/* 2px 트랙 · 글로우 안 잘리게 overflow:visible (계획서 예외) */
body.theme-space .alloc-bar{
  height:2px;
  overflow:visible;
  border-radius:0;
  background:rgba(var(--sp-cyan-rgb), .15);
}
/* 채움 색은 인라인(var(--copper|--slate|--sage) → 앰버·시안·민트) 그대로 */
body.theme-space .alloc-fill{
  border-radius:0;
  box-shadow:0 0 6px rgba(var(--sp-text-rgb), .45);
}
body.theme-space .alloc-pct{
  font-family:var(--sp-font-num);
  font-size:11.5px;
  font-weight:500;
  font-variant-numeric:tabular-nums;
  color:var(--sp-text-strong);
}

/* ── 키프레임 (이 섹션 소유) ── */
@keyframes sp-spin{
  to{ rotate:360deg; }
}
@keyframes sp-orbit3d{
  from{ transform:perspective(800px) rotateX(72deg) rotateZ(0deg); }
  to  { transform:perspective(800px) rotateX(72deg) rotateZ(-360deg); }
}
/* ---------- 40. 폼 · 3D 키캡 버튼 · 스피너 · 모달 · 로그인 · 수량추이 컨트롤 ---------- */

/* ── 폼 라벨 (theme-sa ink-2 덮어쓰기) ── */
body.theme-space .form-row label,
body.theme-space .form-row--checkbox label {
  font-family: var(--sp-font-label);
  font-synthesis: none;
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--sp-label);
}

/* ── 입력칸: 안으로 파인 3D 홈 ── */
body.theme-space .form-row input,
body.theme-space .form-row select,
body.theme-space .form-row textarea,
body.theme-space .menu-label-input,
body.theme-space .modal-search {
  font-family: var(--sp-font-body);
  color: var(--sp-text-strong);
  caret-color: var(--sp-cyan);
  background: var(--sp-well);
  border-color: var(--sp-line);
  box-shadow: var(--sp-well-shadow);
  transition: border-color var(--sp-dur) var(--sp-ease), box-shadow var(--sp-dur) var(--sp-ease);
}
body.theme-space .form-row textarea {
  font-family: var(--sp-font-body);
}
body.theme-space .form-row input:hover,
body.theme-space .form-row select:hover,
body.theme-space .form-row textarea:hover,
body.theme-space .menu-label-input:hover,
body.theme-space .modal-search:hover {
  border-color: var(--sp-line-strong);
}
body.theme-space .form-row input:focus,
body.theme-space .form-row select:focus,
body.theme-space .form-row textarea:focus,
body.theme-space .menu-label-input:focus,
body.theme-space .modal-search:focus {
  border-color: var(--sp-cyan);
  box-shadow: var(--sp-focus-ring);
}

/* 자리표시 글자 */
body.theme-space .form-row input::placeholder,
body.theme-space .form-row textarea::placeholder,
body.theme-space .menu-label-input::placeholder,
body.theme-space .modal-search::placeholder {
  color: var(--sp-label);
  opacity: 1;
}

/* 드롭다운 목록 면 */
body.theme-space .form-row select option,
body.theme-space .form-row select optgroup {
  background: var(--sp-panel-solid);
  color: var(--sp-text);
}

/* 숫자 입력: Orbitron (칸 하나의 단독 수치라 열 정렬 불필요 — Orbitron은 고정폭 숫자 없음) */
body.theme-space .form-row input[type="number"] {
  font-family: var(--sp-font-num);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

/* 비활성 입력 */
body.theme-space .form-row input:disabled,
body.theme-space .form-row select:disabled,
body.theme-space .form-row textarea:disabled,
body.theme-space .menu-label-input:disabled,
body.theme-space .modal-search:disabled {
  opacity: .5;
}

/* 브라우저 자동완성 배경(밝은 노랑/파랑) 제거 — 미지원 브라우저 대비 규칙 분리 */
body.theme-space .form-row input:-webkit-autofill {
  -webkit-text-fill-color: var(--sp-text-strong);
  caret-color: var(--sp-cyan);
  box-shadow: inset 0 0 0 1000px var(--sp-panel-solid), var(--sp-well-shadow);
}
body.theme-space .form-row input:-webkit-autofill:focus {
  box-shadow: inset 0 0 0 1000px var(--sp-panel-solid), 0 0 0 3px rgba(var(--sp-cyan-rgb), .12), 0 0 9px rgba(var(--sp-cyan-rgb), .20);
}

/* 체크박스: 홈 효과 제외, 시안 체크 */
body.theme-space .form-row input[type="checkbox"],
body.theme-space .form-row input[type="radio"],
body.theme-space .form-row--checkbox input[type="checkbox"] {
  accent-color: var(--sp-cyan);
  background: transparent;
  box-shadow: none;
}
body.theme-space .form-row input[type="checkbox"]:focus,
body.theme-space .form-row input[type="radio"]:focus,
body.theme-space .form-row--checkbox input[type="checkbox"]:focus {
  box-shadow: 0 0 0 3px rgba(var(--sp-cyan-rgb), .18), 0 0 10px rgba(var(--sp-cyan-rgb), .35);
}

/* 카드 안 구분선: 1px 라인 + 왼쪽 90px 시안 구간 (theme-sa 회색 덮어쓰기) */
body.theme-space .section-divider {
  background:
    linear-gradient(var(--sp-cyan), var(--sp-cyan)) left center / 90px 2px no-repeat,
    linear-gradient(90deg, var(--sp-line-strong), var(--sp-line-faint)) left center / 100% 1px no-repeat;
}

/* ── 버튼 공통: 라벨 폰트 · 넓은 자간 ── */
body.theme-space .btn-primary,
body.theme-space .btn-secondary,
body.theme-space .btn-delete,
body.theme-space .btn-edit,
body.theme-space .btn-excel,
body.theme-space .btn-danger,
body.theme-space .btn-refresh,
body.theme-space .qty-trend-period-btn,
body.theme-space .eval-trend-period-btn {
  font-family: var(--sp-font-label);
  font-synthesis: none;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition:
    background-color var(--sp-dur) var(--sp-ease),
    box-shadow var(--sp-dur) var(--sp-ease),
    color var(--sp-dur) var(--sp-ease),
    text-shadow var(--sp-dur) var(--sp-ease),
    translate .08s var(--sp-ease);
}
body.theme-space .btn-primary:focus-visible,
body.theme-space .btn-secondary:focus-visible,
body.theme-space .btn-delete:focus-visible,
body.theme-space .btn-edit:focus-visible,
body.theme-space .btn-excel:focus-visible,
body.theme-space .btn-danger:focus-visible,
body.theme-space .btn-refresh:focus-visible,
body.theme-space .qty-trend-period-btn:focus-visible,
body.theme-space .eval-trend-period-btn:focus-visible {
  outline: 2px solid rgba(var(--sp-cyan-rgb), .70);
  outline-offset: 2px;
}

/* ── 주 버튼: 시안 3D 키캡 ── */
body.theme-space .btn-primary {
  color: var(--sp-on-accent);
  background: var(--sp-key-primary-bg);
  border: none;
  box-shadow: var(--sp-key-primary);
  text-shadow: 0 1px 0 rgba(var(--sp-text-strong-rgb), .35);
}
body.theme-space .btn-primary:hover {
  background: var(--sp-key-primary-bg);
  box-shadow: var(--sp-key-primary), 0 0 22px rgba(var(--sp-cyan-rgb), .55);
}
body.theme-space .btn-primary:active {
  translate: 0 2px;
  box-shadow: var(--sp-key-primary-down);
}
body.theme-space .btn-primary:disabled,
body.theme-space .btn-primary:disabled:hover,
body.theme-space .btn-primary:disabled:active {
  opacity: .55;
  background: var(--sp-key-primary-bg);
  box-shadow: none;
  translate: none;
}

/* ── 고스트 시안 키캡: 보조 · 새로고침 · 수정 ── */
body.theme-space .btn-secondary,
body.theme-space .btn-refresh,
body.theme-space .btn-edit {
  color: var(--sp-cyan);
  background: var(--sp-key-ghost-bg);
  border-color: transparent;
  box-shadow: var(--sp-key-ghost);
}
body.theme-space .btn-secondary:hover,
body.theme-space .btn-refresh:hover,
body.theme-space .btn-edit:hover {
  color: var(--sp-cyan);
  background: rgba(var(--sp-cyan-rgb), .14);
  box-shadow: var(--sp-key-ghost), 0 0 14px -2px rgba(var(--sp-cyan-rgb), .35);
  text-shadow: 0 0 8px rgba(var(--sp-cyan-rgb), .50);
}
body.theme-space .btn-secondary:active,
body.theme-space .btn-refresh:active,
body.theme-space .btn-edit:active {
  translate: 0 2px;
  background: rgba(var(--sp-cyan-rgb), .18);
  box-shadow: var(--sp-key-ghost-down);
}
body.theme-space .btn-secondary:disabled,
body.theme-space .btn-secondary:disabled:hover,
body.theme-space .btn-secondary:disabled:active,
body.theme-space .btn-refresh:disabled,
body.theme-space .btn-refresh:disabled:hover,
body.theme-space .btn-refresh:disabled:active {
  background: var(--sp-key-ghost-bg);
  box-shadow: var(--sp-key-ghost);
  text-shadow: none;
  translate: none;
}

/* ── 엑셀: 민트 고스트 키캡 ── */
body.theme-space .btn-excel {
  color: var(--sp-mint);
  background: var(--sp-key-mint-bg);
  border-color: transparent;
  box-shadow: var(--sp-key-mint);
}
body.theme-space .btn-excel:hover {
  background: rgba(var(--sp-mint-rgb), .14);
  box-shadow: var(--sp-key-mint), 0 0 14px -2px rgba(var(--sp-mint-rgb), .35);
  text-shadow: 0 0 8px rgba(var(--sp-mint-rgb), .50);
}
body.theme-space .btn-excel:active {
  translate: 0 2px;
  background: rgba(var(--sp-mint-rgb), .18);
  box-shadow: var(--sp-key-mint-down);
}

/* ── 삭제 · 위험: 레드 고스트 키캡 (theme-sa 빨강/테두리 덮어쓰기) ── */
body.theme-space .btn-delete,
body.theme-space .btn-danger {
  color: var(--sp-red);
  background: var(--sp-key-red-bg);
  border-color: transparent;
  box-shadow: var(--sp-key-red);
}
body.theme-space .btn-delete:hover,
body.theme-space .btn-danger:hover {
  background: rgba(var(--sp-red-rgb), .14);
  box-shadow: var(--sp-key-red), 0 0 14px -2px rgba(var(--sp-red-rgb), .35);
  text-shadow: 0 0 8px rgba(var(--sp-red-rgb), .50);
}
body.theme-space .btn-delete:active,
body.theme-space .btn-danger:active {
  translate: 0 2px;
  background: rgba(var(--sp-red-rgb), .18);
  box-shadow: var(--sp-key-red-down);
}
body.theme-space .btn-danger:disabled,
body.theme-space .btn-danger:disabled:hover,
body.theme-space .btn-danger:disabled:active {
  opacity: .5;
  background: var(--sp-key-red-bg);
  box-shadow: var(--sp-key-red);
  text-shadow: none;
  translate: none;
}

/* ── 로딩 스피너: 시안 링 ── */
body.theme-space .spinner {
  border-color: rgba(var(--sp-cyan-rgb), .25);
  border-top-color: var(--sp-cyan);
  box-shadow: 0 0 8px rgba(var(--sp-cyan-rgb), .35);
}
/* 밝은 키캡 위에서는 짙은 링 */
body.theme-space .btn-primary .spinner {
  border-color: rgba(var(--sp-void-rgb), .25);
  border-top-color: var(--sp-on-accent);
  box-shadow: none;
}

/* ── 폼 메시지 (theme-sa error 덮어쓰기) ── */
body.theme-space .form-message {
  font-family: var(--sp-font-body);
}
body.theme-space .form-message.success {
  color: var(--sp-mint);
  text-shadow: 0 0 8px rgba(var(--sp-mint-rgb), .30);
}
body.theme-space .form-message.error {
  color: var(--sp-red);
  text-shadow: 0 0 8px rgba(var(--sp-red-rgb), .30);
}
body.theme-space .form-message.warning {
  color: var(--sp-amber);
  text-shadow: 0 0 8px rgba(var(--sp-amber-rgb), .30);
}

/* ── 로그인 화면: 3D 바닥·행성이 보이도록 투명 ── */
body.theme-space .auth-page {
  background: transparent;
}
body.theme-space .auth-card,
body.theme-space .auth-card:hover {
  background: var(--sp-glass-sheen), var(--sp-panel);
  border-top: 3px solid var(--sp-cyan);
  border-radius: var(--sp-radius-panel);
  box-shadow: var(--sp-glass-shadow-hover), 0 -1px 9px rgba(var(--sp-cyan-rgb), .20);
}
/* 홀로그램 후광 프로필 */
body.theme-space .auth-mark {
  background: var(--sp-void-2);
  border-color: var(--sp-cyan);
  box-shadow:
    0 0 0 4px rgba(var(--sp-cyan-rgb), .07),
    0 0 16px rgba(var(--sp-cyan-rgb), .26),
    0 12px 28px -8px rgba(var(--sp-shadow-rgb), .80);
}
body.theme-space .auth-brand {
  font-family: var(--sp-font-display);
  font-synthesis: none;
  font-weight: 400;
  letter-spacing: var(--sp-track-brand);
  text-transform: uppercase;     /* .brand-name과 같은 대문자 브랜드 */
  color: var(--sp-text-strong);
  text-shadow: var(--sp-text-glow-soft);
}

/* ── 모달 (theme-sa 검정 오버레이 · 그림자 덮어쓰기) ── */
body.theme-space .modal-overlay {
  background:
    radial-gradient(ellipse at 50% 45%, rgba(var(--sp-nebula-rgb), .18), transparent 65%),
    var(--sp-backdrop);
}
body.theme-space .modal-box {
  color: var(--sp-text);
  background: var(--sp-glass-sheen), var(--sp-panel-solid);
  border-color: var(--sp-line-strong);
  border-radius: var(--sp-radius-panel);
  box-shadow: var(--sp-glass-shadow-hover);
}
/* 헤더 라인 + 왼쪽 90px 발광 구간 — 도색만(position 변경 없음):
   배경을 테두리 상자 기준으로 깔아 원래 1px 밑줄 자리에 시안 선, 그 위로 옅은 빛 번짐 */
body.theme-space .modal-head {
  border-bottom-color: var(--sp-line);
  background:
    linear-gradient(var(--sp-cyan), var(--sp-cyan)) left bottom / 90px 1px no-repeat,
    linear-gradient(to top, rgba(var(--sp-cyan-rgb), .30), transparent) left bottom / 90px 6px no-repeat;
  background-origin: border-box;
}
body.theme-space .modal-title {
  font-family: var(--sp-font-display);
  font-synthesis: none;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: var(--sp-track);
  text-transform: uppercase;
  color: var(--sp-text-strong);
  text-shadow: var(--sp-text-glow-soft);
}
body.theme-space .modal-close {
  color: var(--sp-label);
  transition: color var(--sp-dur) var(--sp-ease), text-shadow var(--sp-dur) var(--sp-ease);
}
body.theme-space .modal-close:hover {
  color: var(--sp-text-strong);
  text-shadow: 0 0 8px rgba(var(--sp-cyan-rgb), .70);
}
body.theme-space .modal-close:focus-visible {
  outline: 2px solid rgba(var(--sp-cyan-rgb), .70);
  outline-offset: 2px;
}
body.theme-space .modal-list {
  scrollbar-color: rgba(var(--sp-cyan-rgb), .30) transparent;
}
body.theme-space .modal-row {
  color: var(--sp-text);
  transition: background-color var(--sp-dur) var(--sp-ease), box-shadow var(--sp-dur) var(--sp-ease);
}
body.theme-space .modal-row:hover {
  background: rgba(var(--sp-cyan-rgb), .10);
  box-shadow: inset 2px 0 0 var(--sp-cyan);
}
/* 티커(QQQ · OD0Q 등 영문 코드): Orbitron은 O·Q·D·0이 구분되지 않아 Exo 2 (레퍼런스도 종목명은 Exo 2) */
body.theme-space .modal-row .modal-row-ticker {
  font-family: var(--sp-font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--sp-steel);
}
body.theme-space .modal-row:hover .modal-row-ticker {
  color: var(--sp-cyan);
}
body.theme-space .modal-row .modal-row-name {
  font-family: var(--sp-font-body);
  color: var(--sp-text-strong);
}
body.theme-space .modal-empty {
  font-weight: 400;
  color: var(--sp-label);
}

/* ── 수량/평가금액 추이 툴바: 기간 버튼 (고스트 키캡 알약) ── */
body.theme-space .qty-trend-period-btn,
body.theme-space .eval-trend-period-btn {
  color: var(--sp-steel);
  background: var(--sp-key-ghost-bg);
  border-color: transparent;
  box-shadow: var(--sp-key-ghost);
}
body.theme-space .qty-trend-period-btn:hover,
body.theme-space .eval-trend-period-btn:hover {
  color: var(--sp-cyan);
  background: rgba(var(--sp-cyan-rgb), .14);
  text-shadow: 0 0 8px rgba(var(--sp-cyan-rgb), .50);
}
body.theme-space .qty-trend-period-btn:active,
body.theme-space .eval-trend-period-btn:active {
  translate: 0 2px;
  box-shadow: var(--sp-key-ghost-down);
}
/* 선택된 기간: 시안 주 키캡 (--pine 폴백 배경 덮어쓰기) */
body.theme-space .qty-trend-period-btn.active,
body.theme-space .eval-trend-period-btn.active,
body.theme-space .qty-trend-period-btn.active:hover,
body.theme-space .eval-trend-period-btn.active:hover {
  color: var(--sp-on-accent);
  background: var(--sp-key-primary-bg);
  border-color: transparent;
  box-shadow: var(--sp-key-primary);
  text-shadow: 0 1px 0 rgba(var(--sp-text-strong-rgb), .35);
}
body.theme-space .qty-trend-period-btn.active:hover,
body.theme-space .eval-trend-period-btn.active:hover {
  box-shadow: var(--sp-key-primary), 0 0 22px rgba(var(--sp-cyan-rgb), .55);
}
body.theme-space .qty-trend-period-btn.active:active,
body.theme-space .eval-trend-period-btn.active:active {
  box-shadow: var(--sp-key-primary-down);
}

/* 표시 토글 */
body.theme-space .qty-trend-toggle {
  font-family: var(--sp-font-label);
  font-synthesis: none;
  letter-spacing: 1px;
  color: var(--sp-steel);
}
body.theme-space .qty-trend-toggle input[type="checkbox"] {
  accent-color: var(--sp-cyan);
}

/* 범례 칩 */
body.theme-space .qty-trend-legend-chip {
  font-family: var(--sp-font-label);
  font-synthesis: none;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--sp-steel);
  background: rgba(var(--sp-cyan-rgb), .05);
  border-color: var(--sp-line);
  transition: border-color var(--sp-dur) var(--sp-ease), color var(--sp-dur) var(--sp-ease), background-color var(--sp-dur) var(--sp-ease);
}
body.theme-space .qty-trend-legend-chip:hover {
  color: var(--sp-text);
  background: rgba(var(--sp-cyan-rgb), .10);
  border-color: var(--sp-line-strong);
}
/* 숨김 종목(눌러서 다시 켜는 토글 — 비활성이 아님): 칩 전체를 흐리면 글자가 읽히지 않으므로(≈2.3:1)
   글자는 라벨색(패널 위 ≈ 5.6:1)으로 두고 점선 · 취소선 · 흐린 색 견본으로 '숨김'을 표시 */
body.theme-space .qty-trend-legend-chip.hidden-ticker {
  opacity: 1;
  color: var(--sp-label);
  background: transparent;
  border-style: dashed;
  border-color: var(--sp-line);
}
body.theme-space .qty-trend-legend-chip.hidden-ticker:hover {
  color: var(--sp-steel);
  border-color: var(--sp-line-strong);
}
body.theme-space .qty-trend-legend-chip.hidden-ticker .sw {
  opacity: .4;
}
/* 색 견본: 짙은 테두리 + 중성 은은한 광 (색은 JS 인라인) */
body.theme-space .qty-trend-legend-chip .sw {
  box-shadow: 0 0 0 1px rgba(var(--sp-void-rgb), .80), 0 0 6px rgba(var(--sp-text-strong-rgb), .25);
}
/* ---------- 50. Tabulator 그리드 ---------- */
/* 원칙: 가독성 우선 — 그리드 안에는 glow · text-shadow · animation · transition · 3D 없음.
   Tabulator 기본 테마의 다단 결합 선택자(최대 10단)를 이기도록 원본 체인 앞에 body.theme-space를 붙임.
   도색 전용: display · position · overflow · white-space · 크기 · 여백 · cursor는 건드리지 않음 */

/* ── 컨테이너 · 스크롤 영역 ── */
body.theme-space .tabulator{
  background:transparent;
  color:var(--sp-text);
  font-family:var(--sp-font-body);
  font-weight:400;                      /* body 300보다 한 단계 굵게: 셀 가독성 */
}
/* 기본 테마 흰 배경(#fff) 제거 — 유리 카드가 그대로 비치게 */
body.theme-space .tabulator .tabulator-tableholder,
body.theme-space .tabulator .tabulator-tableholder .tabulator-table{
  background:transparent;
  color:var(--sp-text);
}
/* 데이터 없음 문구 (기본 테마 4단 체인까지 덮음) */
body.theme-space .tabulator .tabulator-placeholder .tabulator-placeholder-contents,
body.theme-space .tabulator .tabulator-tableholder .tabulator-placeholder .tabulator-placeholder-contents,
body.theme-space .tabulator .tabulator-tableholder .tabulator-placeholder span{
  color:var(--sp-label);
  font-family:var(--sp-font-label);
  font-weight:400;
  letter-spacing:var(--sp-track);
  font-synthesis:none;
}
/* 로딩 · 오류 알림 */
body.theme-space .tabulator .tabulator-alert{
  background:rgba(var(--sp-void-rgb), .55);
}
body.theme-space .tabulator .tabulator-alert .tabulator-alert-msg{
  background:var(--sp-panel-solid);
  color:var(--sp-text);
  font-family:var(--sp-font-label);
  letter-spacing:var(--sp-track);
  font-synthesis:none;
}
body.theme-space .tabulator .tabulator-alert .tabulator-alert-msg.tabulator-alert-state-msg{
  border-color:var(--sp-line-strong);
  color:var(--sp-text);
}
body.theme-space .tabulator .tabulator-alert .tabulator-alert-msg.tabulator-alert-state-error{
  border-color:var(--sp-red);
  color:var(--sp-red);
}
/* 컬럼 · 행 크기조절 가이드선 (v6) */
body.theme-space .tabulator .tabulator-col-resize-guide,
body.theme-space .tabulator .tabulator-row-resize-guide{
  background-color:var(--sp-cyan);
}

/* ── 헤더: 투명 + 얇은 시안 밑줄 (theme-sa 회색 밑줄 덮어쓰기) ──
   원본 2px 테두리 폭은 그대로(투명) 두고 안쪽 1px 선만 그림 → 헤더 높이 불변, 도색만 */
body.theme-space .tabulator .tabulator-header{
  background:transparent;
  border-bottom-color:transparent;
  box-shadow:inset 0 -1px 0 rgba(var(--sp-cyan-rgb), .55);
  color:var(--sp-label);
  font-weight:400;
}
body.theme-space .tabulator .tabulator-header .tabulator-col{
  background:transparent;
}
/* 헤더 라벨: 레퍼런스 th 톤 (Exo 2 + IBM Plex Sans KR). 자간은 1.5px — 한글은 대문자 효과가 없고
   넓은 자간이 폭만 늘려 좁은 열에서 제목이 먼저 잘리므로 가독성 우선으로 줄임 */
body.theme-space .tabulator .tabulator-col-title,
body.theme-space .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title{
  font-family:var(--sp-font-label);
  font-size:11.5px;
  font-weight:400;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--sp-label);
  font-synthesis:none;
}
/* 정렬 중인 컬럼 라벨은 한 단계 밝게 */
body.theme-space .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="ascending"] .tabulator-col-content .tabulator-col-title,
body.theme-space .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="descending"] .tabulator-col-content .tabulator-col-title{
  color:var(--sp-text);
}
/* 정렬 가능 헤더 hover (기본 #cdcdcd 덮기, v5/v6 선택자 모두) */
@media (hover:hover) and (pointer:fine){
  body.theme-space .tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover,
  body.theme-space .tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover{
    background:rgba(var(--sp-cyan-rgb), .06);
  }
}
/* 정렬 화살표: 기본은 흐린 선, 정렬 중이면 시안 (기본 #bbb / #666 덮기) */
body.theme-space .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter .tabulator-arrow,
body.theme-space .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="none"] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{
  border-bottom-color:var(--sp-line-strong);
}
body.theme-space .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="none"] .tabulator-col-content .tabulator-col-sorter{
  color:var(--sp-line-strong);
}
body.theme-space .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="ascending"] .tabulator-col-content .tabulator-col-sorter,
body.theme-space .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="descending"] .tabulator-col-content .tabulator-col-sorter{
  color:var(--sp-cyan);
}
body.theme-space .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="ascending"] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{
  border-bottom-color:var(--sp-cyan);
}
body.theme-space .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="descending"] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{
  border-top-color:var(--sp-cyan);
}
@media (hover:hover) and (pointer:fine){
  body.theme-space .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="none"] .tabulator-col-content .tabulator-col-sorter.tabulator-col-sorter-element .tabulator-arrow:hover{
    border-bottom-color:var(--sp-steel);
  }
  body.theme-space .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="ascending"] .tabulator-col-content .tabulator-col-sorter.tabulator-col-sorter-element .tabulator-arrow:hover{
    border-bottom-color:var(--sp-cyan-light);
  }
  body.theme-space .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="descending"] .tabulator-col-content .tabulator-col-sorter.tabulator-col-sorter-element .tabulator-arrow:hover{
    border-top-color:var(--sp-cyan-light);
  }
}
/* 컬럼 이동 중 · 그룹 헤더 · 고정 컬럼 경계 */
body.theme-space .tabulator .tabulator-header .tabulator-col.tabulator-moving{
  background:var(--sp-panel-solid-2);
  border-color:var(--sp-line-strong);
}
body.theme-space .tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols{
  border-top-color:var(--sp-line-faint);
}
body.theme-space .tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left{
  border-right-color:var(--sp-line);
}
body.theme-space .tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-right{
  border-left-color:var(--sp-line);
}
/* 편집형 헤더 제목 입력칸 */
body.theme-space .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title .tabulator-title-editor{
  background:var(--sp-well);
  border-color:var(--sp-line);
  color:var(--sp-text-strong);
  caret-color:var(--sp-cyan);
}

/* ── 헤더 필터: 평평한 홈 (발광 없음) ── */
body.theme-space .tabulator .tabulator-header-filter input,
body.theme-space .tabulator .tabulator-header-filter select{
  font-family:var(--sp-font-body);
  color:var(--sp-text-strong);
  background:var(--sp-well);
  border-color:var(--sp-line);
  box-shadow:none;
  caret-color:var(--sp-cyan);
}
body.theme-space .tabulator .tabulator-header-filter input::placeholder{
  color:var(--sp-label);
}
body.theme-space .tabulator .tabulator-header-filter input:focus,
body.theme-space .tabulator .tabulator-header-filter select:focus{
  border-color:var(--sp-cyan);
  box-shadow:none;
}
body.theme-space .tabulator .tabulator-header-filter select option{
  background:var(--sp-panel-solid);
  color:var(--sp-text);
}

/* ── 행: 기본 · 짝수 · hover ── */
/* 순서 주의: 기본 → 짝수 → hover → 자산군 틴트 → 선택 → 수정중 · 임시 */
body.theme-space .tabulator-row{
  background:transparent;
  border-bottom-color:var(--sp-line-faint);
}
body.theme-space .tabulator-row.tabulator-row-even{
  background:transparent;
}
body.theme-space .tabulator-row:hover{
  background:rgba(var(--sp-cyan-rgb), .06);
}
@media (hover:hover) and (pointer:fine){
  body.theme-space .tabulator-row.tabulator-selectable:hover{
    background:rgba(var(--sp-cyan-rgb), .06);
  }
}

/* ── 행: 자산군 틴트 (위험=앰버 · 카운터=시안 · 안전=민트) ── */
body.theme-space .tabulator-row.row-risk{ background:rgba(var(--sp-amber-rgb), .07); }
body.theme-space .tabulator-row.row-counter{ background:rgba(var(--sp-cyan-rgb), .06); }
body.theme-space .tabulator-row.row-safe{ background:rgba(var(--sp-mint-rgb), .06); }
body.theme-space .tabulator-row.row-risk:hover{ background:rgba(var(--sp-amber-rgb), .12); }
body.theme-space .tabulator-row.row-counter:hover{ background:rgba(var(--sp-cyan-rgb), .11); }
body.theme-space .tabulator-row.row-safe:hover{ background:rgba(var(--sp-mint-rgb), .11); }

/* ── 행: 선택 (시안 틴트 + 왼쪽 2px 바) ── */
body.theme-space .tabulator-row.tabulator-selected{
  background:rgba(var(--sp-cyan-rgb), .14);
  box-shadow:inset 2px 0 0 var(--sp-cyan);
}
@media (hover:hover) and (pointer:fine){
  body.theme-space .tabulator-row.tabulator-selected:hover{
    background:rgba(var(--sp-cyan-rgb), .18);
  }
}

/* ── 행: 수정중 · 임시(복사) — 자산군 틴트보다 아래에 둬서 우선 ── */
body.theme-space .tabulator-row.row-editing{
  background:rgba(var(--sp-amber-rgb), .14);
  box-shadow:inset 2px 0 0 var(--sp-amber);
}
body.theme-space .tabulator-row.row-editing:hover{
  background:rgba(var(--sp-amber-rgb), .20);
}
/* 임시 행: 점선 외곽(원본 dashed 유지)은 색만 교체 */
body.theme-space .tabulator-row.row-draft{
  background:rgba(var(--sp-amber-rgb), .10);
  box-shadow:inset 2px 0 0 var(--sp-amber);
  outline-color:rgba(var(--sp-amber-rgb), .50);
}
body.theme-space .tabulator-row.row-draft:hover{
  background:rgba(var(--sp-amber-rgb), .16);
}

/* ── 수량 추이 표 선택 행 (원본 !important를 이기려면 !important 필요) ── */
body.theme-space .qty-trend-table-wrap .tabulator-row.qty-trend-row-selected{
  background:rgba(var(--sp-cyan-rgb), .16) !important;
  box-shadow:inset 2px 0 0 var(--sp-cyan);
}

/* ── 셀: 본문 · 이름 · 숫자 ── */
body.theme-space .tabulator-row .tabulator-cell{
  color:var(--sp-text);
  font-family:var(--sp-font-body);
}
body.theme-space .tabulator-row .tabulator-cell.cell-name{
  color:var(--sp-text-strong);
  font-family:var(--sp-font-body);
  font-weight:500;
}
/* 숫자 열: Orbitron은 고정폭 숫자가 없어(1이 0의 절반 폭) 자릿수가 어긋나고 넓어서 잘림
   → Exo 2 고정폭 숫자 (그리드는 가독성 우선) */
body.theme-space .tabulator-row .tabulator-cell.cell-num{
  font-family:var(--sp-font-body);
  font-size:13px;
  font-weight:400;
  font-variant-numeric:tabular-nums lining-nums;
}
/* 인라인 편집 가능 셀: 옅은 앰버 (전환 효과 없음) */
body.theme-space .tabulator-row .tabulator-cell.tabulator-editable{
  background:rgba(var(--sp-amber-rgb), .06);
  transition:none;
}
body.theme-space .tabulator-row .tabulator-cell.tabulator-editable:hover{
  background:rgba(var(--sp-amber-rgb), .12);
}

/* ── 편집 중인 셀 · 에디터 ── */
/* :hover까지 묶어 editable:hover 틴트가 편집 면을 덮지 않게 함 */
body.theme-space .tabulator-row .tabulator-cell.tabulator-editing,
body.theme-space .tabulator-row .tabulator-cell.tabulator-editing:hover{
  border-color:var(--sp-cyan);
  background:var(--sp-panel-solid-2);
}
/* Tabulator 기본 에디터 + transactions.html 커스텀 에디터 */
body.theme-space .tabulator-row .tabulator-cell.tabulator-editing input,
body.theme-space .tabulator-row .tabulator-cell.tabulator-editing select,
body.theme-space .tabulator-row .tabulator-cell.tabulator-editing textarea,
body.theme-space .tabulator-cell.tabulator-editing .cell-select-editor,
body.theme-space .tabulator-cell.tabulator-editing .cell-date-editor{
  color:var(--sp-text-strong);
  background:transparent;
  caret-color:var(--sp-cyan);
  box-shadow:none;
}
body.theme-space .tabulator-row .tabulator-cell.tabulator-editing input,
body.theme-space .tabulator-row .tabulator-cell.tabulator-editing select,
body.theme-space .tabulator-row .tabulator-cell.tabulator-editing textarea{
  font-family:inherit;                  /* 셀 글꼴 그대로 (숫자 셀은 Exo 2 고정폭 숫자) */
}
body.theme-space .tabulator-row .tabulator-cell.tabulator-editing select option,
body.theme-space .tabulator-cell.tabulator-editing .cell-select-editor option{
  background:var(--sp-panel-solid);
  color:var(--sp-text);
}
/* 검증 실패: 레드 테두리 (편집 중 시안보다 우선) */
body.theme-space .tabulator-row .tabulator-cell.tabulator-validation-fail,
body.theme-space .tabulator-row .tabulator-cell.tabulator-validation-fail:hover{
  border-color:var(--sp-red);
}
body.theme-space .tabulator-row .tabulator-cell.tabulator-validation-fail input,
body.theme-space .tabulator-row .tabulator-cell.tabulator-validation-fail select{
  color:var(--sp-red);
}
/* 행 선택 체크박스 */
body.theme-space .tabulator input[type="checkbox"]{
  accent-color:var(--sp-cyan);
}

/* ── 범위 선택 (v6) ── */
body.theme-space .tabulator .tabulator-tableholder .tabulator-range-overlay .tabulator-range{
  border-color:var(--sp-cyan);
}
body.theme-space .tabulator .tabulator-tableholder .tabulator-range-overlay .tabulator-range.tabulator-range-active{
  border-color:var(--sp-cyan);
}
body.theme-space .tabulator .tabulator-tableholder .tabulator-range-overlay .tabulator-range-cell-active{
  border-color:var(--sp-cyan);
}
body.theme-space .tabulator-row .tabulator-cell.tabulator-range-selected:not(.tabulator-range-only-cell-selected):not(.tabulator-range-row-header){
  background:rgba(var(--sp-cyan-rgb), .10);
}
/* 행 머리 칸: 수정중 · 선택 행의 진한 틴트 위에서도 읽히도록 라벨색 대신 스틸(모든 틴트 위 ≥ 7:1) */
body.theme-space .tabulator-row .tabulator-cell.tabulator-row-header{
  background:rgba(var(--sp-cyan-rgb), .04);
  border-right-color:var(--sp-line);
  border-bottom-color:var(--sp-line-faint);
  color:var(--sp-steel);
}
body.theme-space .tabulator-row.tabulator-range-highlight .tabulator-cell.tabulator-range-row-header{
  background:rgba(var(--sp-cyan-rgb), .08);
  color:var(--sp-text);
}
body.theme-space .tabulator-row.tabulator-range-selected .tabulator-cell.tabulator-range-row-header,
body.theme-space .tabulator-row.tabulator-range-highlight.tabulator-range-selected .tabulator-cell.tabulator-range-row-header{
  background:rgba(var(--sp-cyan-rgb), .16);
  color:var(--sp-text-strong);
}
body.theme-space .tabulator .tabulator-header .tabulator-col.tabulator-range-highlight{
  background:rgba(var(--sp-cyan-rgb), .08);
  color:var(--sp-text);
}
body.theme-space .tabulator .tabulator-header .tabulator-col.tabulator-range-selected{
  background:rgba(var(--sp-cyan-rgb), .16);
  color:var(--sp-text-strong);
}

/* ── 계산(calcs) 행 — 기본 테마가 !important라 같은 수준으로 덮음 ── */
body.theme-space .tabulator .tabulator-header .tabulator-calcs-holder,
body.theme-space .tabulator .tabulator-footer .tabulator-calcs-holder{
  background:rgba(var(--sp-cyan-rgb), .04) !important;
  border-top-color:var(--sp-line-faint);
  border-bottom-color:var(--sp-line-faint);
  color:var(--sp-steel);
}
body.theme-space .tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row,
body.theme-space .tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row{
  background:transparent !important;
}
body.theme-space .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-calcs{
  background:rgba(var(--sp-cyan-rgb), .04) !important;
  color:var(--sp-steel);
}
body.theme-space .tabulator-row.tabulator-calcs .tabulator-cell{
  color:var(--sp-steel);
}
body.theme-space .tabulator-row.tabulator-calcs.tabulator-calcs-top{
  border-bottom-color:var(--sp-line);
}
body.theme-space .tabulator-row.tabulator-calcs.tabulator-calcs-bottom{
  border-top-color:var(--sp-line);
}

/* ── 그룹 행 ── */
body.theme-space .tabulator-row.tabulator-group{
  background:rgba(var(--sp-cyan-rgb), .04);
  border-top-color:var(--sp-line-faint);
  border-bottom-color:var(--sp-line-faint);
  border-right-color:var(--sp-line-faint);
  color:var(--sp-steel);
  font-family:var(--sp-font-label);
  font-weight:400;
  letter-spacing:2px;
  font-synthesis:none;
}
@media (hover:hover) and (pointer:fine){
  body.theme-space .tabulator-row.tabulator-group:hover{
    background:rgba(var(--sp-cyan-rgb), .08);
  }
}
body.theme-space .tabulator-row.tabulator-group .tabulator-arrow{
  border-left-color:var(--sp-steel);
}
/* 펼친 그룹: 아래 화살표 (왼쪽 변은 원래대로 투명) */
body.theme-space .tabulator-row.tabulator-group.tabulator-group-visible .tabulator-arrow{
  border-left-color:transparent;
  border-top-color:var(--sp-steel);
}
body.theme-space .tabulator-row.tabulator-group span{
  color:var(--sp-cyan);                 /* 건수 표시 (기본 #d00) */
}

/* ── 기타 행 상태: 이동 · 고정 컬럼 · 트리 · 반응형 접힘 · 핸들 ── */
body.theme-space .tabulator-row.tabulator-row-moving{
  background:var(--sp-panel-solid-2);
  border-color:var(--sp-line-strong);
}
body.theme-space .tabulator-row.tabulator-moving{
  background:var(--sp-panel-solid-2);
  border-top-color:var(--sp-line-strong);
  border-bottom-color:var(--sp-line-strong);
}
body.theme-space .tabulator-row .tabulator-frozen.tabulator-frozen-left{
  border-right-color:var(--sp-line);
}
body.theme-space .tabulator-row .tabulator-frozen.tabulator-frozen-right{
  border-left-color:var(--sp-line);
}
body.theme-space .tabulator-row .tabulator-cell .tabulator-data-tree-branch{
  border-bottom-color:var(--sp-line);
  border-left-color:var(--sp-line);
}
body.theme-space .tabulator-row .tabulator-cell .tabulator-data-tree-control{
  background:rgba(var(--sp-cyan-rgb), .06);
  border-color:var(--sp-line-strong);
}
@media (hover:hover) and (pointer:fine){
  body.theme-space .tabulator-row .tabulator-cell .tabulator-data-tree-control:hover{
    background:rgba(var(--sp-cyan-rgb), .12);
  }
}
body.theme-space .tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-collapse::after,
body.theme-space .tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-expand,
body.theme-space .tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-expand::after{
  background:var(--sp-steel);
}
body.theme-space .tabulator-row .tabulator-responsive-collapse{
  border-top-color:var(--sp-line-faint);
  border-bottom-color:var(--sp-line-faint);
}
body.theme-space .tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle{
  background:rgba(var(--sp-cyan-rgb), .18);
  color:var(--sp-text-strong);
}
body.theme-space .tabulator-row .tabulator-cell.tabulator-row-handle .tabulator-row-handle-box .tabulator-row-handle-bar{
  background:var(--sp-steel);
}

/* ── 푸터 · 페이지네이터 (theme-sa 회색 상단선 덮어쓰기) ── */
body.theme-space .tabulator .tabulator-footer{
  background:transparent;
  border-top-color:var(--sp-line-faint);
  color:var(--sp-label);
  font-family:var(--sp-font-label);
  font-weight:400;
  font-synthesis:none;
}
body.theme-space .tabulator .tabulator-footer .tabulator-paginator,
body.theme-space .tabulator .tabulator-footer .tabulator-page-counter{
  color:var(--sp-label);
}
body.theme-space .tabulator .tabulator-footer .tabulator-page{
  color:var(--sp-text);
  background:transparent;
  border-color:var(--sp-line);
  font-family:var(--sp-font-label);
  letter-spacing:1px;
  font-synthesis:none;
}
@media (hover:hover) and (pointer:fine){
  body.theme-space .tabulator .tabulator-footer .tabulator-page:not(:disabled):not(.active):hover{
    color:var(--sp-text-strong);
    background:rgba(var(--sp-cyan-rgb), .10);
    border-color:var(--sp-line-strong);
  }
}
body.theme-space .tabulator .tabulator-footer .tabulator-page.active{
  color:var(--sp-text-strong);
  background:rgba(var(--sp-cyan-rgb), .14);
  border-color:var(--sp-cyan);
}
body.theme-space .tabulator .tabulator-footer .tabulator-page-size{
  color:var(--sp-text-strong);
  background:var(--sp-well);
  border-color:var(--sp-line);
  font-family:var(--sp-font-body);
}
body.theme-space .tabulator .tabulator-footer .tabulator-page-size option{
  background:var(--sp-panel-solid);
  color:var(--sp-text);
}

/* ── 팝업: 리스트 에디터 · 메뉴 · 툴팁 (body에 붙음, 평면 그림자만) ──
   .tabulator 밖이라 body의 300을 물려받음 → 셀과 같은 400으로 */
body.theme-space .tabulator-popup-container,
body.theme-space .tabulator-edit-list{
  background:var(--sp-panel-solid);
  border:1px solid var(--sp-line-strong);
  color:var(--sp-text);
  font-family:var(--sp-font-body);
  font-weight:400;
  box-shadow:0 12px 32px rgba(var(--sp-shadow-rgb), .70);
}
body.theme-space .tabulator-tooltip{
  background:var(--sp-panel-solid-2);
  border-color:var(--sp-line-strong);
  color:var(--sp-text-strong);
  box-shadow:0 8px 20px rgba(var(--sp-shadow-rgb), .60);
}
/* 리스트 에디터 항목 — hover를 먼저, .active를 나중에 둬서 선택 항목이 우선 */
body.theme-space .tabulator-edit-list .tabulator-edit-list-item{
  color:var(--sp-text);
}
@media (hover:hover) and (pointer:fine){
  body.theme-space .tabulator-edit-list .tabulator-edit-list-item:hover{
    background:rgba(var(--sp-cyan-rgb), .10);
    color:var(--sp-text-strong);
  }
}
body.theme-space .tabulator-edit-list .tabulator-edit-list-item.active{
  background:rgba(var(--sp-cyan-rgb), .20);
  color:var(--sp-text-strong);
}
body.theme-space .tabulator-edit-list .tabulator-edit-list-item.focused,
body.theme-space .tabulator-edit-list .tabulator-edit-list-item.active.focused{
  outline-color:var(--sp-cyan);
}
body.theme-space .tabulator-edit-list .tabulator-edit-list-group{
  color:var(--sp-label);
  border-bottom-color:var(--sp-line);
  font-family:var(--sp-font-label);
  font-weight:400;
  letter-spacing:var(--sp-track);
  font-synthesis:none;
}
body.theme-space .tabulator-edit-list .tabulator-edit-list-notice,
body.theme-space .tabulator-edit-list .tabulator-edit-list-placeholder{
  color:var(--sp-label);
}
/* 컨텍스트 메뉴 */
body.theme-space .tabulator-menu .tabulator-menu-item{
  color:var(--sp-text);
  font-family:var(--sp-font-label);
  font-weight:400;
  letter-spacing:1px;
  font-synthesis:none;
}
@media (hover:hover) and (pointer:fine){
  body.theme-space .tabulator-menu .tabulator-menu-item:not(.tabulator-menu-item-disabled):hover{
    background:rgba(var(--sp-cyan-rgb), .10);
    color:var(--sp-text-strong);
  }
}
body.theme-space .tabulator-menu .tabulator-menu-item.tabulator-menu-item-submenu::after{
  border-color:var(--sp-line-strong);
}
body.theme-space .tabulator-menu .tabulator-menu-separator{
  border-top-color:var(--sp-line);
}

/* ── 그리드 안 테마 효과 무력화: 칩 · 수익률 · 스피너 ── */
/* 칩은 섹션 20의 1px 테두리가 그대로 평면 외곽선 역할 — 발광만 제거 */
body.theme-space .tabulator .chip,
body.theme-space .tabulator .tabulator-cell .chip{
  box-shadow:none;
  text-shadow:none;
  transition:none;
}
body.theme-space .tabulator .chip::before,
body.theme-space .tabulator .tabulator-cell .chip::before{
  box-shadow:none;
}
body.theme-space .tabulator .ret,
body.theme-space .tabulator .ret.pos,
body.theme-space .tabulator .ret.neg{
  text-shadow:none;
}
body.theme-space .tabulator .ret.pos{ color:var(--sp-mint); }
body.theme-space .tabulator .ret.neg{ color:var(--sp-red); }
body.theme-space .tabulator .spinner,
body.theme-space .tabulator .tabulator-cell .spinner{
  box-shadow:none;
}

/* ── 그리드 안 버튼: 평면 외곽선 (돌출 · 이동 · 발광 · 전환 없음) ── */
/* 접두 :is(.tabulator, .tabulator .tabulator-cell): :is()의 명시도는 목록 중 가장 높은 쪽(.tabulator .tabulator-cell)
   → 셀 안 · 밖 버튼 모두 (0,4,1) 이상이라 섹션 40의 :hover · :active · :disabled:hover 규칙(최대 0,4,1)보다
   같거나 높고 뒤에 있어 항상 이김 (예전의 셀 체인 · :disabled 중복 선택자를 하나로 묶음) */
body.theme-space :is(.tabulator, .tabulator .tabulator-cell) :is(.btn-primary, .btn-secondary, .btn-refresh, .btn-edit, .btn-excel, .btn-delete, .btn-danger){
  text-shadow:none;
  translate:none;
  transition:none;
  letter-spacing:1px;                   /* 좁은 셀에서 잘림 방지 */
}

/* 시안 고스트: 보조 · 새로고침 · 수정 */
body.theme-space :is(.tabulator, .tabulator .tabulator-cell) :is(.btn-secondary, .btn-refresh, .btn-edit){
  color:var(--sp-cyan);
  background:transparent;
  background-clip:padding-box;
  border-color:transparent;
  box-shadow:inset 0 0 0 1px rgba(var(--sp-cyan-rgb), .35);
}
body.theme-space :is(.tabulator, .tabulator .tabulator-cell) :is(.btn-secondary, .btn-refresh, .btn-edit):hover:not(:disabled){
  background-color:rgba(var(--sp-cyan-rgb), .10);
  box-shadow:inset 0 0 0 1px rgba(var(--sp-cyan-rgb), .55);
}
body.theme-space :is(.tabulator, .tabulator .tabulator-cell) :is(.btn-secondary, .btn-refresh, .btn-edit):active:not(:disabled){
  background-color:rgba(var(--sp-cyan-rgb), .16);
  box-shadow:inset 0 0 0 1px rgba(var(--sp-cyan-rgb), .60);
}

/* 민트 고스트: 엑셀 */
body.theme-space :is(.tabulator, .tabulator .tabulator-cell) .btn-excel{
  color:var(--sp-mint);
  background:transparent;
  background-clip:padding-box;
  border-color:transparent;
  box-shadow:inset 0 0 0 1px rgba(var(--sp-mint-rgb), .40);
}
body.theme-space :is(.tabulator, .tabulator .tabulator-cell) .btn-excel:hover:not(:disabled){
  background-color:rgba(var(--sp-mint-rgb), .10);
  box-shadow:inset 0 0 0 1px rgba(var(--sp-mint-rgb), .55);
}
body.theme-space :is(.tabulator, .tabulator .tabulator-cell) .btn-excel:active:not(:disabled){
  background-color:rgba(var(--sp-mint-rgb), .16);
  box-shadow:inset 0 0 0 1px rgba(var(--sp-mint-rgb), .60);
}

/* 레드 고스트: 삭제 · 위험 */
body.theme-space :is(.tabulator, .tabulator .tabulator-cell) :is(.btn-delete, .btn-danger){
  color:var(--sp-red);
  background:transparent;
  background-clip:padding-box;
  border-color:transparent;
  box-shadow:inset 0 0 0 1px rgba(var(--sp-red-rgb), .40);
}
body.theme-space :is(.tabulator, .tabulator .tabulator-cell) :is(.btn-delete, .btn-danger):hover:not(:disabled){
  background-color:rgba(var(--sp-red-rgb), .10);
  box-shadow:inset 0 0 0 1px rgba(var(--sp-red-rgb), .55);
}
body.theme-space :is(.tabulator, .tabulator .tabulator-cell) :is(.btn-delete, .btn-danger):active:not(:disabled){
  background-color:rgba(var(--sp-red-rgb), .16);
  box-shadow:inset 0 0 0 1px rgba(var(--sp-red-rgb), .60);
}

/* 주 버튼: 그라데이션 키캡 대신 단색 시안 면 */
body.theme-space :is(.tabulator, .tabulator .tabulator-cell) .btn-primary{
  color:var(--sp-on-accent);
  background:var(--sp-cyan);
  box-shadow:inset 0 0 0 1px var(--sp-cyan-mid);
}
body.theme-space :is(.tabulator, .tabulator .tabulator-cell) .btn-primary:hover:not(:disabled){
  background-color:var(--sp-cyan-light);
  box-shadow:inset 0 0 0 1px var(--sp-cyan-mid);
}
body.theme-space :is(.tabulator, .tabulator .tabulator-cell) .btn-primary:active:not(:disabled){
  background-color:var(--sp-cyan-mid);
  box-shadow:inset 0 0 0 1px var(--sp-cyan-deep);
}
/* ---------- 60. 모바일(mstock) · 920px 이하 ---------- */

/* ── 920px 이하: 상단바 · 드로어 · 배경 3D 축소 ── */
@media (max-width:920px){
  /* theme-sa의 모바일 검정 상단바를 콘솔 크롬으로 덮음 */
  body.theme-space .topbar{ background:var(--sp-chrome); }

  /* 모바일에선 브랜드 박스가 상단바 안 일반 흐름 → 박스 도색 제거 */
  body.theme-space .topbar-brand,
  body.theme-space.sidebar-collapsed .topbar-brand{
    background:transparent;
    border-color:transparent;
    box-shadow:none;
  }

  /* 오프캔버스 드로어: 본문 위에 겹치므로 불투명 바탕(반투명 크롬 그라데이션은 그 위에) +
     깊은 그림자 + 오른쪽 안쪽 헤어라인(닫힘 상태에서 화면 가장자리에 선이 남지 않도록 inset) */
  body.theme-space .sidebar{
    background:
      linear-gradient(180deg, var(--sp-chrome), var(--sp-chrome-2)),
      var(--sp-chrome-solid);
    box-shadow:
      0 0 40px rgba(var(--sp-shadow-rgb), .6),
      inset -1px 0 0 var(--sp-line);
  }
  /* 열린 드로어: 시안 외광을 살짝 더함 */
  body.theme-space.sidebar-mobile-open .sidebar{
    box-shadow:
      0 0 40px rgba(var(--sp-shadow-rgb), .6),
      0 0 26px -10px rgba(var(--sp-cyan-rgb), .35),
      inset -1px 0 0 var(--sp-line-strong);
  }

  /* 드로어 뒤 어둠막 */
  body.theme-space .sidebar-backdrop{ background:var(--sp-backdrop); }

  /* 배경 3D(섹션 10 소유) — 행성만 작은 화면용으로 축소 (그리드 바닥은 데스크톱 높이 그대로 → 하단 탭바 위로 보임).
     행성: 폭은 화면 비례 타원(160vw, 최소 1100px), 보이는 높이 110px.
     림은 본문 글자(폼 라벨 · 섹션 제목) 뒤를 지나가므로 낮춘 림(--sp-planet-rim-dim) 사용 */
  body.theme-space::after{
    left:calc(50% - max(1100px, 160vw) / 2);
    width:max(1100px, 160vw); height:1100px;
    bottom:-990px;
    box-shadow:var(--sp-planet-rim-dim);
  }

  /* 기간별 수익률 타일: 모바일에선 페이지 바탕 위에 바로 놓여 행성 림이 비치므로 패널 바탕을 깔아 가독성 확보 */
  body.theme-space .period-return-item{
    background:
      linear-gradient(rgba(var(--sp-cyan-rgb), .04), rgba(var(--sp-cyan-rgb), .04)),
      var(--sp-panel);
  }
}

/* ── 당겨서 새로고침 ── */
/* 숨김 상태(translateY -100%)에서 바깥 그림자가 화면 위로 새지 않도록 외곽 효과는 넣지 않음.
   헤더 위로 내려와 겹치므로 불투명 크롬 (원래 var(--paper) 불투명) */
body.theme-space .ptr-indicator{
  background:var(--sp-chrome-solid);
  border-bottom-color:var(--sp-line);
  box-shadow:inset 0 -1px 0 rgba(var(--sp-cyan-rgb), .08);
}
body.theme-space .ptr-spinner{
  border-color:rgba(var(--sp-cyan-rgb), .25);
  border-top-color:var(--sp-cyan);
  box-shadow:0 0 8px rgba(var(--sp-cyan-rgb), .25);
}
body.theme-space .ptr-label{
  font-family:var(--sp-font-label);
  font-synthesis:none;
  font-weight:500;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--sp-label);
}

/* ── 상단 헤더 (파인 배경 → 콘솔 크롬 + 헤더 라인) ──
   도색만(position · 테두리 추가 없음): 바닥선은 안쪽 1px 그림자, 왼쪽 90px 빛나는 시안 선(레퍼런스 .top:after)과
   그 위 옅은 빛 번짐은 맨 위 배경 층으로 그림 */
body.theme-space .mstock-header{
  background:
    linear-gradient(var(--sp-cyan), var(--sp-cyan)) left bottom / 90px 1px no-repeat,
    linear-gradient(to top, rgba(var(--sp-cyan-rgb), .30), transparent) left bottom / 90px 6px no-repeat,
    linear-gradient(180deg, rgba(var(--sp-cyan-rgb), .05), transparent 70%),
    var(--sp-chrome);
  color:var(--sp-text);
  box-shadow:
    inset 0 -1px 0 var(--sp-line),
    0 14px 30px -20px rgba(var(--sp-shadow-rgb), .9);
}
/* 브랜드: .brand-name과 같은 대문자. 자간은 16px 글자 크기에 맞춰 6px → 5px로 비례 축소 */
body.theme-space .mstock-header-brand{
  font-family:var(--sp-font-display);
  font-synthesis:none;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:5px;
  color:var(--sp-text-strong);
  text-shadow:var(--sp-text-glow-soft);
}
body.theme-space .mstock-header-title{
  font-family:var(--sp-font-label);
  font-synthesis:none;
  font-weight:500;
  letter-spacing:2px;
  color:var(--sp-sub);
  opacity:1;
}
body.theme-space .mstock-header-logout{
  font-family:var(--sp-font-label);
  font-synthesis:none;
  letter-spacing:1px;
  color:var(--sp-label);
  transition:color var(--sp-dur) var(--sp-ease), text-shadow var(--sp-dur) var(--sp-ease);
}
body.theme-space .mstock-header-logout:hover{
  color:var(--sp-text-strong);
  text-shadow:0 0 8px rgba(var(--sp-cyan-rgb), .35);
}

/* ── 하단 탭바 ── */
/* 고정 바 밑으로 본문이 지나가므로 불투명 크롬 (원래 var(--paper) 불투명) */
body.theme-space .mstock-tabbar{
  background:var(--sp-chrome-solid);
  border-top-color:var(--sp-line);
  box-shadow:
    0 -10px 30px -12px rgba(var(--sp-shadow-rgb), .8),
    0 -1px 0 rgba(var(--sp-cyan-rgb), .08);
}
/* 윗선 가운데가 은은하게 빛나는 HUD 라인 (탭바는 원래 fixed) */
body.theme-space .mstock-tabbar::before{
  content:"";
  position:absolute;
  left:0; right:0; top:-1px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(var(--sp-cyan-rgb), .45) 50%, transparent);
  pointer-events:none;
}
body.theme-space .mstock-tab{
  font-family:var(--sp-font-label);
  font-synthesis:none;
  font-weight:500;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--sp-label);
  transition:color var(--sp-dur) var(--sp-ease);
}
/* 활성 탭: 앰버 + 글로우 + 위쪽 1px 앰버 표시선 */
body.theme-space .mstock-tab.active{
  color:var(--sp-amber);
  text-shadow:var(--sp-glow-amber);
  box-shadow:
    inset 0 1px 0 var(--sp-amber),
    inset 0 12px 14px -12px rgba(var(--sp-amber-rgb), .35);
}
body.theme-space .mstock-tab.active .mstock-tab-ico{
  filter:drop-shadow(0 0 4px var(--sp-amber)); /* 계획 예외: svg 아이콘 글로우 */
}

/* ── 리밸런싱 서브탭 (밑줄 4px → 2px, 높이 유지) ── */
body.theme-space .mstock-subtabbar{ border-bottom-color:var(--sp-line); }
body.theme-space .mstock-subtab{
  font-family:var(--sp-font-label);
  font-synthesis:none;
  font-weight:500;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--sp-label);
  border-bottom-width:2px;
  padding-bottom:13px; /* 계획 예외: 11px + 줄어든 밑줄 2px */
  transition:color var(--sp-dur) var(--sp-ease);
}
body.theme-space .mstock-subtab.active{
  color:var(--sp-amber);
  text-shadow:var(--sp-glow-amber);
  border-bottom-color:var(--sp-amber);
  box-shadow:0 7px 8px -7px rgba(var(--sp-amber-rgb), .8);
}

/* ── 카드 리스트 (가벼운 유리 카드) ── */
body.theme-space .mstock-card{
  background:var(--sp-glass-sheen), var(--sp-panel);
  border-color:var(--sp-line-panel);
  border-radius:var(--sp-radius-panel);
  box-shadow:var(--sp-glass-shadow-sm);
  color:var(--sp-text);
}
body.theme-space .mstock-card--tappable:active{
  background:
    linear-gradient(rgba(var(--sp-cyan-rgb), .06), rgba(var(--sp-cyan-rgb), .06)),
    var(--sp-glass-sheen),
    var(--sp-panel);
  border-color:var(--sp-line-strong);
}
body.theme-space .mstock-card-label{
  font-family:var(--sp-font-label);
  font-synthesis:none;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--sp-steel);
}
/* 카드 값(오른쪽 정렬로 위아래 줄이 맞는 숫자): Exo 2 고정폭 숫자 (Orbitron은 tnum 없음) */
body.theme-space .mstock-card-value{
  font-family:var(--sp-font-body);
  font-variant-numeric:tabular-nums lining-nums;
  font-size:13.5px;
  font-weight:500;
  letter-spacing:.3px;
  color:var(--sp-text-strong);
}
body.theme-space .mstock-card-title{
  font-family:var(--sp-font-body);
  font-weight:500;
  color:var(--sp-text-strong);
}
body.theme-space .mstock-card-hint{
  font-family:var(--sp-font-body);
  font-weight:400;
  color:var(--sp-label);
}

/* ── 요약 스트립 (골드 크림 → 유리 + 앰버 테두리) ── */
body.theme-space .mstock-summary-strip{
  background:
    var(--sp-glass-sheen),
    linear-gradient(340deg, rgba(var(--sp-amber-rgb), .05), transparent 50%),
    var(--sp-panel);
  border-color:rgba(var(--sp-amber-rgb), .30);
  box-shadow:var(--sp-glass-shadow-sm);
}
body.theme-space .mstock-summary-item .n{
  font-family:var(--sp-font-display);
  font-synthesis:none;
  font-weight:500;
  font-variant-numeric:tabular-nums;
  letter-spacing:.5px;
}
/* .ret.pos/.neg 색 · 민트/레드 글로우(섹션 20)를 덮지 않도록 일반 수치만 강조색 + 시안 글로우 */
body.theme-space .mstock-summary-item .n:not(.ret){
  color:var(--sp-text-strong);
  text-shadow:var(--sp-text-glow);
}
body.theme-space .mstock-summary-item .l{
  font-family:var(--sp-font-label);
  font-synthesis:none;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--sp-label);
}

/* ── 섹션 제목 + 빛나는 점 ── */
body.theme-space .mstock-section-title{
  font-family:var(--sp-font-display);
  font-synthesis:none;
  font-weight:400;
  letter-spacing:3px;
  color:var(--sp-text-strong);
}
body.theme-space .mstock-section-title::before{
  content:"";
  display:inline-block;
  width:5px; height:5px;
  margin-right:9px;
  border-radius:50%;
  vertical-align:middle;
  position:relative; top:-1px;
  background:var(--sp-cyan);
  box-shadow:var(--sp-glow-dot);
  pointer-events:none;
}

/* ── 보유 수량 추이: 선택된 모바일 카드 ── */
body.theme-space .qty-trend-card.qty-trend-card-selected{
  background:
    linear-gradient(rgba(var(--sp-cyan-rgb), .10), rgba(var(--sp-cyan-rgb), .10)),
    var(--sp-glass-sheen),
    var(--sp-panel);
  border-color:rgba(var(--sp-cyan-rgb), .5);
  box-shadow:
    var(--sp-glass-shadow-sm),
    0 0 18px -6px rgba(var(--sp-cyan-rgb), .5);
}

/* ---------- 80. AI 리밸런싱(.ai-*) · 인라인 알림 배너 보강 ----------
   이 파일 원본은 AI 리밸런싱 서브탭(2026-10-13) 추가 전의 style.css 기준으로 작성돼서, style.css 맨 아래의
   .ai-* 규칙(밝은 배경 · 어두운 글자색을 하드코딩)이 어두운 카드 위에서 떠 보임 → 같은 토큰으로 다시 도색.
   레이아웃(display · 크기 · 여백)은 건드리지 않음. */
body.theme-space .spinner--dark{
  border-color:rgba(var(--sp-cyan-rgb), .22);
  border-top-color:var(--sp-cyan);
}
body.theme-space .ai-notice{
  background:var(--sp-well);
  border-color:var(--sp-line-panel);
  color:var(--sp-text);
}
body.theme-space .ai-notice--info{
  color:var(--sp-cyan);
  background:rgba(var(--sp-cyan-rgb), .08);
  border-color:rgba(var(--sp-cyan-rgb), .40);
}
body.theme-space .ai-notice--warn{
  color:var(--sp-amber);
  background:rgba(var(--sp-amber-rgb), .10);
  border-color:rgba(var(--sp-amber-rgb), .45);
}
body.theme-space .ai-notice--error{
  color:var(--sp-red);
  background:rgba(var(--sp-red-rgb), .10);
  border-color:rgba(var(--sp-red-rgb), .45);
}
body.theme-space .ai-headline{
  color:var(--sp-text-strong);
  text-shadow:var(--sp-text-glow-soft);
}
body.theme-space .ai-section-title{
  font-family:var(--sp-font-label);
  font-synthesis:none;
  letter-spacing:2px;
  color:var(--sp-cyan);
}
body.theme-space .ai-issue,
body.theme-space .ai-pre{
  background:var(--sp-well);
  border-color:var(--sp-line-panel);
  box-shadow:var(--sp-well-shadow);
  color:var(--sp-text);
}
body.theme-space .ai-issue-title{ color:var(--sp-text-strong); }
/* 방향 표시: 상승 민트 · 하락 레드(한국 증시 관례가 아니라 이 테마의 .ret.pos/.neg와 동일한 색) */
body.theme-space .ai-dir--up{ color:var(--sp-mint); }
body.theme-space .ai-dir--down{ color:var(--sp-red); }
/* 방향성 확률 막대: 밝은 트랙(#E7E5DF) → 어두운 홈, 구간 색은 발광 없이 낮은 채도 + 윗선 */
body.theme-space .ai-prob-bar{
  background:var(--sp-well);
  box-shadow:inset 0 0 0 1px var(--sp-line-panel);
}
body.theme-space .ai-prob{ color:var(--sp-on-accent); font-weight:700; }
body.theme-space .ai-prob--up{ background:var(--sp-mint); }
body.theme-space .ai-prob--flat{ background:var(--sp-steel); }
body.theme-space .ai-prob--down{ background:var(--sp-red); }
body.theme-space .ai-stage-active{
  background:rgba(var(--sp-amber-rgb), .14);
  box-shadow:inset 2px 0 0 var(--sp-amber);
}
body.theme-space .ai-apply-bar{ border-top-color:var(--sp-line); }
body.theme-space .ai-apply-label{ color:var(--sp-steel); }
body.theme-space .ai-status{ color:var(--sp-steel); }
body.theme-space td.ai-outlook-cell,
body.theme-space td.ai-reason-cell,
body.theme-space .ai-outlook-line{ color:var(--sp-text); }

/* 화면 곳곳의 인라인 style 알림 배너(환율 매수신호·경고 등)가 밝은 배경용 글자색(#8A6D3B 등)을 직접 씀 →
   인라인 style을 이기려면 !important가 필요. 배경의 알파(.14~.18)는 그대로 두고 글자색만 테마 색으로 교체 */
body.theme-space #fx-buy-signal-banner,
body.theme-space #buy-signal-banner,
body.theme-space #fg-signal-banner,
body.theme-space .mstock-card-row[style*="#8A6D3B"],
body.theme-space .mstock-card-row[style*="#8A5A40"]{ color:var(--sp-amber) !important; }
body.theme-space #warning-banner{ color:var(--sp-red) !important; }

/* 리밸런싱 "계절성 캘린더" 칸 색: 페이지 인라인 <style>이 body.theme-sa .season-* 로 밝은 배경용 글자색(#B23A2E · #166A42)을
   지정함 → 인라인 <style>은 이 파일보다 나중에 로드되므로, 클래스를 하나 더 붙여 우선순위로 이김(기존 매핑 유지: bull=붉은 계열, bear=녹색 계열) */
body.theme-sa.theme-space .season-bull{ background:rgba(var(--sp-red-rgb), .14); color:var(--sp-red); }
body.theme-sa.theme-space .season-bear{ background:rgba(var(--sp-mint-rgb), .12); color:var(--sp-mint); }
body.theme-sa.theme-space .season-mixed{ background:rgba(var(--sp-cyan-rgb), .08); color:var(--sp-text); }

/* 기간 버튼(1개월·3개월·1년·YTD·전체): 넓은 자간+좌우 패딩 때문에 폰 폭(≈375px)에서 5개가 한 줄에 안 들어가
   한글이 "1개/월"로 꺾임 → 줄바꿈을 막고 좁은 화면에서만 자간·패딩을 줄여 한 줄에 맞춤(크기·배치 로직은 그대로) */
body.theme-space .qty-trend-period-btn,
body.theme-space .eval-trend-period-btn{ white-space:nowrap; }
@media (max-width:420px){
  body.theme-space .qty-trend-period-btn,
  body.theme-space .eval-trend-period-btn{ letter-spacing:.5px; padding-left:9px; padding-right:9px; }
}

/* ---------- 85. 숫자 네온 효과 (2026-10-14) ----------
   네온 간판처럼 "밝은 심지 + 색 번짐" 겹침: 가장 안쪽은 거의 흰색 얇은 빛, 바깥으로 갈수록 넓고 옅은 색 번짐.
   - 큰 숫자(KPI · 도넛 중앙 · 공포탐욕 점수 · 기간 수익률 · 모바일 요약): 강한 네온
   - 수익률(.ret): 상승 민트 · 하락 레드 네온 (표/그리드 안은 글자가 작아 번짐 폭을 줄인 약한 네온)
   - 그리드의 일반 숫자·모바일 카드 값 같은 작은 본문 숫자는 가독성을 위해 글로우를 주지 않음
   색은 --sp-*-rgb 토큰만 참조 → 테마 색을 바꾸면 네온도 같이 바뀜. 애니메이션 없음(정적 효과). */
body.theme-space{
  /* 2026-10-15: 번짐을 약하게 조정 — 가장 바깥(40px) 층을 없애고 각 층의 밝기·반경을 낮춤 */
  --sp-neon-cyan:
    0 0 1px rgba(255, 255, 255, .65),
    0 0 3px rgba(var(--sp-cyan-rgb), .65),
    0 0 8px rgba(var(--sp-cyan-rgb), .38),
    0 0 16px rgba(var(--sp-cyan-rgb), .20);
  --sp-neon-amber:
    0 0 1px rgba(255, 255, 255, .60),
    0 0 3px rgba(var(--sp-amber-rgb), .65),
    0 0 8px rgba(var(--sp-amber-rgb), .38),
    0 0 16px rgba(var(--sp-amber-rgb), .18);
  --sp-neon-mint:
    0 0 1px rgba(255, 255, 255, .60),
    0 0 3px rgba(var(--sp-mint-rgb), .65),
    0 0 8px rgba(var(--sp-mint-rgb), .36),
    0 0 14px rgba(var(--sp-mint-rgb), .16);
  --sp-neon-red:
    0 0 1px rgba(255, 255, 255, .55),
    0 0 3px rgba(var(--sp-red-rgb), .65),
    0 0 8px rgba(var(--sp-red-rgb), .36),
    0 0 14px rgba(var(--sp-red-rgb), .16);
  /* 표·그리드 안 수익률용: 번짐 폭만 줄인 약한 네온 */
  --sp-neon-mint-sm: 0 0 2px rgba(var(--sp-mint-rgb), .60), 0 0 6px rgba(var(--sp-mint-rgb), .26);
  --sp-neon-red-sm:  0 0 2px rgba(var(--sp-red-rgb), .60),  0 0 6px rgba(var(--sp-red-rgb), .26);
}

/* 큰 숫자: 시안 네온 (글자색은 심지처럼 밝게) */
body.theme-space .stat-value,
body.theme-space .donut-center .n,
body.theme-space .fg-gauge-score,
body.theme-space .fg-indicator-score,
body.theme-space .mstock-summary-item .n:not(.ret){
  color:#EAFBFF;
  text-shadow:var(--sp-neon-cyan);
}
body.theme-space .stat-value.gold{
  color:#FFF3DC;
  text-shadow:var(--sp-neon-amber);
}
/* 기간별 수익률 · 이름 있는 수익률(.ret): 큰 글자는 풀 네온, 부호 색은 그대로 */
body.theme-space .period-return-rate{ text-shadow:var(--sp-neon-cyan); }
body.theme-space .ret.pos{ color:var(--sp-mint); text-shadow:var(--sp-neon-mint); }
body.theme-space .ret.neg{ color:var(--sp-red);  text-shadow:var(--sp-neon-red); }
body.theme-space .mstock-summary-item .n.ret.pos{ text-shadow:var(--sp-neon-mint); }
body.theme-space .mstock-summary-item .n.ret.neg{ text-shadow:var(--sp-neon-red); }
body.theme-space .stat-value .ret.pos,
body.theme-space .stat-value.pos{ text-shadow:var(--sp-neon-mint); }
body.theme-space .stat-value .ret.neg,
body.theme-space .stat-value.neg{ text-shadow:var(--sp-neon-red); }
/* 단위 · 부가 글자(원, %, 종목)는 번짐 없이 */
body.theme-space .stat-value small{ color:var(--sp-steel); text-shadow:none; }

/* 그리드·표 안 수익률: 약한 네온 (이 뒤 .tabulator 규칙보다 우선순위 높게 명시) */
body.theme-space .tabulator .ret.pos,
body.theme-space .tabulator-cell .ret.pos{ text-shadow:var(--sp-neon-mint-sm); }
body.theme-space .tabulator .ret.neg,
body.theme-space .tabulator-cell .ret.neg{ text-shadow:var(--sp-neon-red-sm); }
body.theme-space td.ret.pos, body.theme-space td .ret.pos{ text-shadow:var(--sp-neon-mint-sm); }
body.theme-space td.ret.neg, body.theme-space td .ret.neg{ text-shadow:var(--sp-neon-red-sm); }

/* ---------- 90. 모션 줄이기 ---------- */
/* OS/브라우저의 '동작 줄이기' 설정 시 궤도·스윕·그리드 바닥·별 시차·전환 효과를 모두 정지 */
@media (prefers-reduced-motion: reduce) {
  body.theme-space::before,
  body.theme-space::after,
  body.theme-space *,
  body.theme-space *::before,
  body.theme-space *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  /* 3D 키캡이 눌릴 때의 이동도 정지 */
  body.theme-space :is(.btn-primary, .btn-secondary, .btn-refresh, .btn-edit, .btn-excel,
    .btn-delete, .btn-danger, .sidebar-toggle-btn, .qty-trend-period-btn, .eval-trend-period-btn):active {
    translate: none;
  }
}

/* ── 화면 도움말("❓ 도움말") 버튼·모달(2026-10-19) — 모달 뼈대(오버레이·상자·헤더·닫기)는 위 "모달" 덮어쓰기를 그대로 받고,
   새 클래스만 --sp-* 토큰으로 칠함. 움직임은 transition뿐이라 맨 아래 prefers-reduced-motion 규칙이 그대로 꺼 줌 ── */
body.theme-space .help-btn {
  font-family: var(--sp-font-label);
  font-synthesis: none;
  letter-spacing: .5px;
  color: var(--sp-sub);
  background: rgba(var(--sp-cyan-rgb), .04);
  border-color: var(--sp-line-strong);
  transition: color var(--sp-dur) var(--sp-ease), border-color var(--sp-dur) var(--sp-ease), box-shadow var(--sp-dur) var(--sp-ease);
}
body.theme-space .help-btn:hover {
  color: var(--sp-text-strong);
  border-color: var(--sp-cyan);
  box-shadow: 0 0 10px rgba(var(--sp-cyan-rgb), .25);
}
body.theme-space .help-btn:focus-visible,
body.theme-space .help-modal-body:focus-visible {
  outline-color: rgba(var(--sp-cyan-rgb), .70);
}
body.theme-space .mstock-header .help-btn {
  color: var(--sp-sub);
  border-color: var(--sp-line-strong);
}
body.theme-space .help-modal .modal-title {
  font-family: var(--sp-font-label);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: none;
}
body.theme-space .help-modal-body {
  scrollbar-color: rgba(var(--sp-cyan-rgb), .30) transparent;
}
body.theme-space .help-sec-title {
  font-family: var(--sp-font-label);
  font-synthesis: none;
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--sp-text-strong);
}
body.theme-space .help-summary,
body.theme-space .help-list {
  font-family: var(--sp-font-body);
  color: var(--sp-text);
}
body.theme-space .help-flow-step {
  color: var(--sp-text);
  background: rgba(var(--sp-cyan-rgb), .04);
  border-color: var(--sp-line-strong);
}
body.theme-space .help-flow-step[data-kind="출처"] .help-flow-kind { color: var(--sp-cyan); }
body.theme-space .help-flow-step[data-kind="계산"] .help-flow-kind { color: var(--sp-label); }
body.theme-space .help-flow-step[data-kind="화면"] .help-flow-kind { color: var(--sp-mint); }
body.theme-space .help-flow-step[data-kind="할 일"] .help-flow-kind { color: var(--sp-amber); }
body.theme-space .help-flow-arrow { color: var(--sp-steel); }
body.theme-space .help-cautions li::marker { color: var(--sp-amber); }

/* 그림 중심 안내(2026-10-21) — style.css의 --help-tone·--hv-color를 --sp-* 토큰으로 다시 칠함. 글자는 패널(--sp-panel-solid·-2) 위
   대비 4.5:1 이상인 --sp-text·--sp-text-strong·--sp-steel만(--sp-label은 쓰지 않음), 강조색 글자(--sp-cyan·amber·mint·red)도
   같은 배경에서 4.5:1 이상 — scripts/check_help.py가 토큰 값으로 대비를 계산해 확인 */
body.theme-space .help-tone-ok { --help-tone: var(--sp-mint); }
body.theme-space .help-tone-warn { --help-tone: var(--sp-amber); }
body.theme-space .help-tone-alert,
body.theme-space .help-tone-danger { --help-tone: var(--sp-red); }
body.theme-space .help-tone-none { --help-tone: var(--sp-steel); }
body.theme-space .hv-c-mint { --hv-color: var(--sp-mint); }
body.theme-space .hv-c-cyan { --hv-color: var(--sp-cyan); }
body.theme-space .hv-c-amber { --hv-color: var(--sp-amber); }
body.theme-space .hv-c-red { --hv-color: var(--sp-red); }
body.theme-space .hv-c-steel { --hv-color: var(--sp-steel); }
body.theme-space .help-fact-tells { --help-tone: var(--sp-mint); }
body.theme-space .help-fact-not_tells { --help-tone: var(--sp-red); }
body.theme-space .help-fact-remember { --help-tone: var(--sp-amber); }
body.theme-space :is(.help-pill, .help-kpi, .help-card, .help-fact, .help-takeaway, .help-more) {
  background: rgba(var(--sp-cyan-rgb), .035);
  border-color: var(--sp-line-panel);
}
body.theme-space .help-pill { border-color: var(--help-tone); }
body.theme-space .help-takeaway { border-left-color: var(--sp-cyan); }
body.theme-space :is(.help-pill-value, .help-kpi-value, .help-card-title, .help-takeaway p, .help-fact-title,
  .help-error-text, .hv-chip-label, .hv-bar-row.is-now, .hv-gauge-score, .hv-chip-list-factor .hv-chip-detail) {
  color: var(--sp-text-strong);
}
body.theme-space :is(.help-card-a, .help-card-ex p, .help-fact .help-list, .hv-chip.is-active) {
  font-family: var(--sp-font-body);
  color: var(--sp-text);
}
body.theme-space :is(.help-pill-label, .help-pill-note, .help-kpi-label, .help-kpi-note, .help-kpi-asof, .help-kpi-unit,
  .help-visual-text, .hv-note, .hv-bar-row, .hv-chip, .hv-spark-ends, .hv-gauge-ends, .hv-gauge-legend, .help-loading,
  .help-mark) {
  color: var(--sp-steel);
}
body.theme-space :is(.help-kpi-label, .help-pill-label, .help-card-title, .help-fact-title, .help-takeaway-title, .help-card-q,
  .help-card-ex-title, .help-more > summary, .hv-chip-label) {
  font-family: var(--sp-font-label);
  font-synthesis: none;
}
body.theme-space :is(.help-kpi-value, .hv-bar-value, .hv-gauge-score, .hv-chip-list-factor .hv-chip-detail) {
  font-family: var(--sp-font-num);
}
body.theme-space .help-card-no {
  background: var(--sp-cyan);
  color: var(--sp-on-accent);
  box-shadow: var(--sp-glow-dot);
}
body.theme-space :is(.help-card-q, .help-takeaway-title) { color: var(--sp-cyan); }
body.theme-space .help-card-ex {
  background: rgba(var(--sp-amber-rgb), .05);
  border-left-color: var(--sp-amber);
}
body.theme-space .help-card-ex-title { color: var(--sp-amber); }
body.theme-space .hv-chip { border-color: var(--sp-line-panel); border-left-color: var(--hv-color); }
body.theme-space .hv-chip.is-active { border-color: var(--hv-color); box-shadow: 0 0 10px -2px var(--hv-color); }
body.theme-space .hv-chip-now { color: var(--sp-on-accent); }
body.theme-space .hv-bar-track { background: rgba(var(--sp-line-rgb), .14); }
body.theme-space .hv-gauge-marker { background: var(--sp-text-strong); box-shadow: 0 0 6px rgba(var(--sp-text-strong-rgb), .6); }
body.theme-space .help-more > summary { color: var(--sp-text-strong); }
body.theme-space .help-more[open] > summary { border-bottom-color: var(--sp-line-panel); }
body.theme-space .help-retry {
  font-family: var(--sp-font-label);
  color: var(--sp-text-strong);
  border-color: var(--sp-line-strong);
  background: rgba(var(--sp-cyan-rgb), .06);
}
body.theme-space .help-retry:hover { border-color: var(--sp-cyan); }
body.theme-space :is(.help-retry, .help-more > summary):focus-visible { outline-color: rgba(var(--sp-cyan-rgb), .70); }

/* ---------- 95. 도움말 게임 콘솔 (2026-10-21) — 대원(묻는 쪽)과 함선 컴퓨터(답하는 쪽)가 통신하는 함교 콘솔 ----------
   예외: 이 절은 도색 외에 position·padding·의사요소도 씀 — theme-sa(style.css)에는 콘솔 요소가 없고 body는 항상 theme-space.
   · 새 마크업 없음: 초상화·통신 태그·리벳·경고 줄무늬·상태등은 모두 의사요소. 화자는 _help_body.html의 data-speaker(crew|core)로만 구분.
   · 장식 의사요소는 모두 pointer-events:none — 닫기(X)·다시 시도·"더 자세히" 클릭을 가로채지 않음. 리벳·줄무늬는 X 영역과 겹치지 않는 자리.
   · 모바일 시트 높이(style.css의 dvh 규칙, #37)는 건드리지 않음 — 여기서는 높이·max-height를 지정하지 않음.
   · 태그 글귀는 content "글자"; 다음 줄에 content "글자" / "" (대체문 문법을 모르는 구형 브라우저는 첫 줄을 씀, 아는 브라우저는 보조기기에 읽히지 않음).
   · 키프레임 hc-*는 위 90절 동작 줄이기 규칙이 자동으로 끔. 초상화 그림(data URI)의 색은 토큰 짝:
     3F4D5F=--sp-bevel-hi, 0A1220=--sp-metal-deep, 7CE3FF=--sp-cyan, 2B3645=--sp-metal-line, 1E2835=--sp-metal-2, FFB547=--sp-amber, 0A0E14≈--sp-bevel-lo
   · 조절 손잡이: .help-modal의 --hc-bevel·--hc-hex·--hc-scan을 none으로 두면 금속 질감이 바로 꺼짐 ---------- */
/* 토큰(2026-10-21) — 위쪽 토큰 블록이 아니라 여기 둠: 앞부분 줄 번호가 밀리면 docs/help_inventory.md의 CSS 근거 줄이 어긋나서.
   scripts/check_help.py [9]는 파일 전체에서 --sp-…: #RRGGBB; 정의를 읽으므로 위치와 상관없이 금속 3종 위 대비를 계산함 */
body.theme-space {
  /* ---- 게임 콘솔 금속(2026-10-21 도움말 게임 콘솔) — 도움말 모달의 강철 패널·초상화 창·명령 카드.
     글자는 위 텍스트·포인트 토큰만 올리고, scripts/check_help.py [9]가 금속 3종 위 대비를 계산해 확인 ---- */
  --sp-metal:            #151C27;   /* 콘솔 바탕 */
  --sp-metal-rgb:        21, 28, 39;
  --sp-metal-2:          #1E2835;   /* 패널 · 카드 */
  --sp-metal-deep:       #0A1220;   /* 초상화 창 · 디스플레이 */
  --sp-metal-line:       #2B3645;   /* 금속 테두리 */
  --sp-bevel-hi:         #3F4D5F;   /* 베벨 밝은 면 */
  --sp-bevel-lo:         #080B10;   /* 베벨 어두운 면 */
  --sp-hazard:           #F2C230;   /* 경고 줄무늬 · 번호판 (위 글자는 --sp-on-accent) */
  --sp-font-stencil:     "Black Ops One", "Orbitron", "IBM Plex Sans KR", sans-serif;  /* 도움말 콘솔 제목 · 카드 번호판 (2026-10-21) */
  --sp-font-mono:        "Share Tech Mono", ui-monospace, Menlo, Consolas, "IBM Plex Sans KR", monospace; /* 도움말 통신 태그 · 기준일 · 번호 키 */
}
body.theme-space .help-modal {
  --hc-bevel: inset 1px 1px 0 var(--sp-bevel-hi), inset -1px -1px 0 var(--sp-bevel-lo);
  --hc-hex: radial-gradient(circle, rgba(var(--sp-cyan-rgb), .07) 1px, transparent 1.5px) 0 0 / 10px 10px;
  --hc-scan: repeating-linear-gradient(to bottom, rgba(var(--sp-cyan-rgb), .06) 0 1px, transparent 1px 3px);
  --hc-portrait: 44px;
  --hc-gap: 10px;
  --hc-crew: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M14 30a18 18 0 0 1 36 0v10H14z' fill='%233F4D5F' stroke='%230A0E14' stroke-width='2'/><rect x='19' y='27' width='26' height='10' rx='2' fill='%230A1220' stroke='%230A0E14' stroke-width='2'/><path d='M21 31h18' stroke='%237CE3FF' stroke-width='2'/><path d='M12 42h40l4 14H8z' fill='%232B3645' stroke='%230A0E14' stroke-width='2'/><rect x='26' y='40' width='12' height='8' fill='%231E2835' stroke='%230A0E14' stroke-width='2'/><circle cx='48' cy='22' r='3' fill='%23FFB547'/></svg>");
  --hc-core: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%237CE3FF' stroke-width='1.8'><ellipse cx='32' cy='26' rx='15' ry='18'/><path d='M19 30q13 7 26 0M22 20h20'/><circle cx='26' cy='27' r='1.6' fill='%237CE3FF'/><circle cx='38' cy='27' r='1.6' fill='%237CE3FF'/><path d='M26 44l-6 14h24l-6-14'/><path d='M32 8v-5' stroke-width='1.2'/></svg>");
}
body.mstock-view.theme-space .help-modal { --hc-portrait: 32px; --hc-gap: 8px; }

/* 콘솔 프레임: 금속 바탕 + 베벨 + 맨 위 경고 줄무늬 + 네 모서리 리벳 */
body.theme-space .help-modal .help-modal-box {
  position: relative;
  background: var(--hc-hex), var(--sp-metal);
  border: 2px solid var(--sp-metal-line);
  border-radius: 8px;
  box-shadow: var(--hc-bevel), 0 0 0 1px var(--sp-bevel-lo), 0 30px 60px -24px rgba(var(--sp-shadow-rgb), .95);
}
body.mstock-view.theme-space .help-modal .help-modal-box { border-radius: 12px 12px 0 0; border-bottom: none; }
body.theme-space .help-modal .help-modal-box::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; pointer-events: none;
  border-radius: 6px 6px 0 0;
  background: repeating-linear-gradient(135deg, var(--sp-hazard) 0 10px, var(--sp-bevel-lo) 10px 20px);
  opacity: .9;
}
body.mstock-view.theme-space .help-modal .help-modal-box::before { height: 4px; border-radius: 10px 10px 0 0; }
body.theme-space .help-modal .help-modal-box::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  --hc-rivet: radial-gradient(circle at 35% 35%, #6B7B90, var(--sp-metal-line) 60%, var(--sp-bevel-lo) 70%, transparent 72%);
  background:
    var(--hc-rivet) 8px 12px / 8px 8px no-repeat,
    var(--hc-rivet) right 8px top 12px / 8px 8px no-repeat,
    var(--hc-rivet) 8px calc(100% - 8px) / 8px 8px no-repeat,
    var(--hc-rivet) right 8px bottom 8px / 8px 8px no-repeat;
}
body.theme-space .help-modal .modal-head {
  position: relative; z-index: 1;
  padding-top: 24px;
  border-bottom-color: var(--sp-metal-line);
  background:
    linear-gradient(var(--sp-cyan), var(--sp-cyan)) left bottom / 90px 1px no-repeat;
}
body.mstock-view.theme-space .help-modal .modal-head { padding-top: 18px; }
body.theme-space .help-modal .modal-title {
  font-family: var(--sp-font-stencil);
  font-synthesis: none;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 1px;
  color: var(--sp-text-strong);
  text-shadow: 0 0 10px rgba(var(--sp-cyan-rgb), .45);
}
/* 상태등 3개(제목 뒤 — X 버튼과 떨어진 자리): 초록 깜빡임 · 호박 · 꺼진 빨강 */
body.theme-space .help-modal .modal-title::after {
  content: ""; display: inline-block; width: 9px; height: 9px; margin: 0 26px 0 12px; vertical-align: 2px; border-radius: 50%;
  pointer-events: none;
  background: var(--sp-mint);
  box-shadow: 0 0 6px var(--sp-mint), 14px 0 0 var(--sp-amber), 28px 0 0 rgba(var(--sp-red-rgb), .35);
  animation: hc-led 2.6s steps(1, end) infinite;
}
body.theme-space .help-modal .modal-close {
  position: relative; z-index: 2;
  border: 1px solid var(--sp-bevel-hi);
  border-radius: 4px;
  background: var(--sp-metal-2);
  box-shadow: var(--hc-bevel);
  color: var(--sp-steel);
  min-width: 32px; min-height: 32px;
}

/* 통신 패널 공통 — 함선 컴퓨터(core)와 대원(crew) */
body.theme-space .help-modal :is([data-speaker="core"], [data-speaker="crew"]) {
  position: relative;
  border: 1px solid rgba(var(--sp-cyan-rgb), .30);
  border-radius: 0 4px 4px 0;
  background: var(--hc-scan), rgba(6, 9, 15, .55);
  animation: hc-rx .3s var(--sp-ease) both;
}
body.theme-space .help-modal [data-speaker="core"] { border-left: 3px solid var(--sp-cyan); }
body.theme-space .help-modal [data-speaker="crew"] { border-left: 3px solid var(--sp-amber); }

/* 초상화 창(의사요소 한 개: 스윕 띠 + 그림 + 스캔라인 + 빛 + 바탕) */
body.theme-space .help-modal :is(.help-hero, .help-card-q, .help-card-a, .help-takeaway)::before {
  content: ""; position: absolute; pointer-events: none;
  width: var(--hc-portrait); height: var(--hc-portrait);
  border: 2px solid var(--sp-metal-line); border-radius: 4px;
  box-shadow: var(--hc-bevel), inset 0 0 12px rgba(var(--sp-cyan-rgb), .25);
  background:
    linear-gradient(to bottom, transparent, rgba(var(--sp-cyan-rgb), .28), transparent) 0 -12px / 100% 12px no-repeat,
    var(--hc-art, var(--hc-core)) center / 84% no-repeat,
    repeating-linear-gradient(to bottom, rgba(var(--sp-cyan-rgb), .06) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 50% 40%, rgba(var(--sp-cyan-rgb), .18), transparent 70%),
    var(--sp-metal-deep);
  animation: hc-sweep 3.2s linear infinite;
}
body.theme-space .help-modal .help-card-q { --hc-art: var(--hc-crew); }

/* 임무 브리핑(hero) — 초상화 64px + 태그 */
body.theme-space .help-modal .help-hero[data-speaker="core"] {
  --hc-portrait: 64px;
  margin-top: 22px;
  padding: 14px 14px 12px calc(14px + var(--hc-portrait) + 14px);
  min-height: calc(var(--hc-portrait) + 28px);
  border-radius: 6px;
  background: var(--hc-hex), var(--sp-metal-2);
  border: 1px solid var(--sp-metal-line);
  border-left: 3px solid var(--sp-cyan);
  box-shadow: var(--hc-bevel);
}
body.mstock-view.theme-space .help-modal .help-hero[data-speaker="core"] { --hc-portrait: 44px; padding-left: calc(12px + var(--hc-portrait) + 12px); }
body.theme-space .help-modal .help-hero[data-speaker="core"]::before { left: 14px; top: 14px; }
body.mstock-view.theme-space .help-modal .help-hero[data-speaker="core"]::before { left: 12px; }
body.theme-space .help-modal .help-hero[data-speaker="core"]::after {
  content: "▸ 임무 브리핑";
  content: "▸ 임무 브리핑" / "";
  position: absolute; top: -9px; left: 12px; padding: 0 6px; pointer-events: none;
  background: var(--sp-metal); border: 1px solid rgba(var(--sp-cyan-rgb), .35); border-radius: 2px;
  font: 11px/16px var(--sp-font-mono); letter-spacing: 1px; color: var(--sp-cyan);
}
body.theme-space .help-modal .help-summary { color: var(--sp-text-strong); }

/* 상태 알약 = 베벨 칩 + 체력 바 */
body.theme-space .help-modal .help-pill {
  position: relative; padding-right: 66px;
  border-radius: 3px; background: var(--sp-metal); box-shadow: var(--hc-bevel);
}
body.theme-space .help-modal .help-pill::after {
  content: ""; position: absolute; right: 10px; top: 50%; width: 46px; height: 8px; margin-top: -4px; pointer-events: none;
  border: 1px solid var(--sp-bevel-hi);
  background: repeating-linear-gradient(90deg, var(--help-tone) 0 7px, var(--sp-bevel-lo) 7px 9px) 1px 1px / calc(100% - 2px) calc(100% - 2px) no-repeat, var(--sp-bevel-lo);
  box-shadow: 0 0 6px -1px var(--help-tone);
}
body.theme-space .help-modal :is(.help-pill-icon, .help-kpi-icon) { border-radius: 3px; box-shadow: 0 0 6px -1px var(--help-tone); }
body.theme-space .help-modal .help-pill-label { font-family: var(--sp-font-mono); letter-spacing: 1px; }

/* 제어판(KPI) = 명령 카드 버튼 + 번호 키 */
body.theme-space .help-modal .help-kpis { counter-reset: hc-key; }
body.theme-space .help-modal .help-kpi {
  position: relative; counter-increment: hc-key;
  border: 1px solid var(--sp-metal-line); border-radius: 4px;
  background: linear-gradient(#263142, var(--sp-metal-2));
  box-shadow: var(--hc-bevel), 0 2px 0 var(--sp-bevel-lo);
}
body.theme-space .help-modal .help-kpi::after {
  content: counter(hc-key);
  content: counter(hc-key) / "";
  position: absolute; top: 4px; right: 7px; pointer-events: none;
  font: 11px/1 var(--sp-font-mono); color: var(--sp-steel);
}
body.theme-space .help-modal .help-kpi-label { padding-right: 14px; letter-spacing: 1px; }
body.theme-space .help-modal .help-kpi-value {
  font-weight: 700; font-style: oblique 8deg; color: var(--sp-cyan);
  text-shadow: 0 0 8px rgba(var(--sp-cyan-rgb), .55);
}
body.theme-space .help-modal .help-kpi-asof { font-family: var(--sp-font-mono); letter-spacing: .5px; }
body.theme-space .help-modal .help-kpis-m { border-radius: 4px; background: var(--sp-metal-2); border: 1px solid var(--sp-metal-line); box-shadow: var(--hc-bevel); }

/* 카드 = 금속 패널 + 경고 노랑 번호판(01 형식 — DOM 글자는 그대로 두고 보이는 글자만 counter) */
body.theme-space .help-modal :is(.help-cards, .help-cards-m) { counter-reset: hc-card; }
body.theme-space .help-modal .help-card {
  counter-increment: hc-card;
  gap: 10px;
  border: 2px solid var(--sp-metal-line);
  border-radius: 6px;
  background: var(--sp-metal-2);
  box-shadow: var(--hc-bevel), 0 0 0 1px var(--sp-bevel-lo);
}
body.theme-space .help-modal .help-card-no {
  width: auto; height: auto; min-width: 30px; padding: 1px 6px;
  border: 1px solid var(--sp-bevel-lo); border-radius: 2px;
  background: var(--sp-hazard); color: var(--sp-on-accent);
  box-shadow: 0 1px 0 var(--sp-bevel-lo);
  font-size: 0;
}
body.theme-space .help-modal .help-card-no::before {
  content: counter(hc-card, decimal-leading-zero);
  content: counter(hc-card, decimal-leading-zero) / "";
  font: 14px/18px var(--sp-font-stencil); letter-spacing: .5px;
}
body.theme-space .help-modal .help-card-title { font-family: var(--sp-font-label); letter-spacing: .3px; }

/* 대원 통신(질문) · 함선 컴퓨터 통신(답) — 초상화는 패널 왼쪽 밖 */
body.theme-space .help-modal :is(.help-card-q, .help-card-a) {
  margin: 6px 0 0 calc(var(--hc-portrait) + var(--hc-gap));
  padding: 9px 12px;
  min-height: var(--hc-portrait);
  font-family: var(--sp-font-body);
}
body.theme-space .help-modal :is(.help-card-q, .help-card-a)::before { left: calc(-1 * (var(--hc-portrait) + var(--hc-gap)) - 3px); top: -1px; }
body.theme-space .help-modal .help-card-q { font-size: 14px; font-weight: 600; color: var(--sp-text-strong); }
body.theme-space .help-modal .help-card-a { font-size: 13.5px; color: var(--sp-text); }
body.theme-space .help-modal :is(.help-card-q, .help-card-a)::after {
  position: absolute; top: -9px; left: 8px; padding: 0 5px; pointer-events: none;
  background: var(--sp-metal-2);
  font: 11px/16px var(--sp-font-mono); letter-spacing: 1px;
}
body.theme-space .help-modal .help-card-q::after { content: "▸ 수신 · 대원"; content: "▸ 수신 · 대원" / ""; color: var(--sp-amber); }
body.theme-space .help-modal .help-card-a::after { content: "▸ 함선 컴퓨터"; content: "▸ 함선 컴퓨터" / ""; color: var(--sp-cyan); }
body.theme-space .help-modal :is(.help-card-q, .help-card-a) { padding-top: 12px; }
/* 모바일: 초상화를 통신문 안 왼쪽 위에 띄워(float) 글 폭을 되찾음 */
body.mstock-view.theme-space .help-modal :is(.help-card-q, .help-card-a) { margin-left: 0; min-height: 0; }
body.mstock-view.theme-space .help-modal :is(.help-card-q, .help-card-a)::before {
  position: static; float: left; margin: 2px var(--hc-gap) 2px 0;
}

/* 그림 = 와이어프레임 디스플레이 */
body.theme-space .help-modal .help-visual {
  padding: 10px 12px;
  border: 1px solid rgba(var(--sp-cyan-rgb), .40); border-radius: 4px;
  background:
    linear-gradient(rgba(var(--sp-cyan-rgb), .07) 1px, transparent 1px) 0 0 / 100% 10px,
    linear-gradient(90deg, rgba(var(--sp-cyan-rgb), .07) 1px, transparent 1px) 0 0 / 10px 100%,
    var(--sp-metal-deep);
  box-shadow: inset 0 0 12px rgba(var(--sp-cyan-rgb), .15);
}
body.theme-space .help-modal .hv-chip { border-radius: 3px; background: rgba(6, 9, 15, .55); }
body.theme-space .help-modal :is(.hv-bar-track, .hv-bar-fill) { border-radius: 1px; }
body.theme-space .help-modal .hv-bar-fill { box-shadow: 0 0 6px -1px var(--hv-color); }

/* 시뮬레이션 패널 = 호박 줄무늬 + 깜빡이는 커서 */
body.theme-space .help-modal .help-card-ex {
  position: relative; overflow: hidden;
  padding: 12px 12px 9px;
  border: 1px solid rgba(var(--sp-amber-rgb), .55); border-radius: 4px;
  background: var(--sp-metal); box-shadow: var(--hc-bevel);
}
body.theme-space .help-modal .help-card-ex::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; pointer-events: none;
  background: repeating-linear-gradient(135deg, var(--sp-amber) 0 8px, var(--sp-bevel-lo) 8px 16px); opacity: .8;
}
body.theme-space .help-modal :is(.help-card-ex-title, .help-takeaway-title) { font-family: var(--sp-font-mono); letter-spacing: 1px; }
body.theme-space .help-modal :is(.help-card-ex-title, .help-takeaway-title, .help-loading)::after {
  content: " ▍"; content: " ▍" / "";
  animation: hc-blink 1.1s steps(1, end) infinite;
}

/* 배지 = 경고 스티커 */
body.theme-space .help-modal .help-mark { border-style: solid; border-radius: 3px; background: var(--sp-metal); box-shadow: var(--hc-bevel); }

/* 임무 요약(takeaway) — 브리핑과 같은 패널 */
body.theme-space .help-modal .help-takeaway[data-speaker="core"] {
  --hc-portrait: 64px;
  padding: 14px 16px 14px calc(14px + var(--hc-portrait) + 14px);
  min-height: calc(var(--hc-portrait) + 28px);
  border-radius: 6px; border: 1px solid var(--sp-metal-line); border-left: 3px solid var(--sp-cyan);
  background: var(--hc-hex), var(--sp-metal-2); box-shadow: var(--hc-bevel);
}
body.mstock-view.theme-space .help-modal .help-takeaway[data-speaker="core"] { --hc-portrait: 44px; padding-left: calc(12px + var(--hc-portrait) + 12px); }
body.theme-space .help-modal .help-takeaway[data-speaker="core"]::before { left: 14px; top: 14px; }
body.mstock-view.theme-space .help-modal .help-takeaway[data-speaker="core"]::before { left: 12px; }
body.theme-space .help-modal .help-takeaway p { color: var(--sp-text-strong); }

/* 임무 일지(facts) */
body.theme-space .help-modal .help-fact {
  position: relative;
  border: 1px solid var(--sp-metal-line); border-top: 2px solid var(--help-tone); border-radius: 4px;
  background: var(--sp-metal-2); box-shadow: var(--hc-bevel);
}
body.theme-space .help-modal .help-fact::after {
  content: "LOG"; content: "LOG" / "";
  position: absolute; top: 6px; right: 8px; pointer-events: none;
  font: 10px/1 var(--sp-font-mono); letter-spacing: 1.5px; color: var(--sp-steel);
}
body.theme-space .help-modal .help-fact-icon { border-radius: 3px; box-shadow: 0 0 6px -1px var(--help-tone); }
body.theme-space .help-modal .help-fact-title { padding-right: 34px; }

/* 데이터 항로(flow) · 데이터 뱅크(더 자세히) */
body.theme-space .help-modal .help-flow-step { border-radius: 3px; border-color: var(--sp-metal-line); background: var(--sp-metal-2); box-shadow: var(--hc-bevel); }
body.theme-space .help-modal .help-flow-kind { font-family: var(--sp-font-mono); letter-spacing: 1px; }
body.theme-space .help-modal .help-flow-arrow { color: var(--sp-cyan); font-weight: 700; }
body.theme-space .help-modal .help-more { border-radius: 4px; border: 1px dashed var(--sp-metal-line); background: var(--sp-metal-2); box-shadow: var(--hc-bevel); }
body.theme-space .help-modal .help-more > summary { font-family: var(--sp-font-mono); letter-spacing: 1px; }
body.theme-space .help-modal .help-sec-title { font-family: var(--sp-font-mono); letter-spacing: 1.5px; color: var(--sp-cyan); }
body.theme-space .help-modal .help-loading { font-family: var(--sp-font-mono); letter-spacing: 1px; color: var(--sp-steel); }
body.theme-space .help-modal .help-error { padding: 12px 14px; border: 1px solid var(--sp-metal-line); border-left: 3px solid var(--sp-red); border-radius: 4px; background: var(--sp-metal-2); }

/* 움직임 — 열 때 전원 켜짐 1회, 통신문 수신, 상태등·커서 깜빡임, 초상화 스캔 */
body.theme-space .help-modal:not([hidden]) .help-modal-box { animation: hc-boot .32s var(--sp-ease) both; }
body.mstock-view.theme-space .help-modal:not([hidden]) .help-modal-box { animation-name: hc-sheet; }
@keyframes hc-boot { 0% { opacity: 0; transform: translateY(10px); filter: brightness(.6); } 60% { opacity: 1; filter: brightness(1.08); } 100% { transform: none; filter: none; } }
@keyframes hc-sheet { from { transform: translateY(24px); } to { transform: none; } }
@keyframes hc-rx { from { opacity: .35; } to { opacity: 1; } }
@keyframes hc-blink { 0%, 70% { opacity: 1; } 72%, 96% { opacity: .2; } 100% { opacity: 1; } }
@keyframes hc-led { 0%, 85% { background-color: var(--sp-mint); } 87%, 96% { background-color: rgba(var(--sp-mint-rgb), .25); } 100% { background-color: var(--sp-mint); } }
@keyframes hc-sweep {
  from { background-position: 0 -12px, center, 0 0, 0 0, 0 0; }
  to   { background-position: 0 calc(100% + 12px), center, 0 0, 0 0, 0 0; }
}