:root{
  /* Quiet Luxury 팔레트 */
  --pine: #16332C;        /* 딥 파인 그린 — 사이드바 */
  --pine-2: #1E463C;      /* 파인 밝은 단계 */
  --porcelain: #F6F5F1;   /* 도자기빛 배경 */
  --paper: #FDFCFA;       /* 카드 */
  --gold: #B99A5F;        /* 샴페인 골드 액센트 */
  --gold-soft: #D8C49A;
  --ink: #22302C;
  --ink-2: #5C6B66;
  --ink-3: #9AA8A2;
  --line: rgba(22,51,44,0.09);
  /* 자산군 뮤트 팔레트 — 프라이빗 뱅크 프레임과 동일 세계관 */
  --copper: #B07A5E;      /* 위험자산 — 따뜻한 구리빛 */
  --slate: #6E87A0;       /* 카운터자산 — 차분한 청회색 */
  --sage:  #8CA48C;       /* 안전자산 — 세이지 그린 (방어·안정) */
  --serif: 'Noto Serif KR', serif;
  --sans: 'Pretendard', -apple-system, sans-serif;
  --num: 'Inter', 'Pretendard', sans-serif;
}
*{ box-sizing:border-box; margin:0; }
html{ -webkit-font-smoothing:antialiased; }

/* html에 height:100%를 줘야 body의 height:100vh가 실제로 뷰포트 높이만큼 고정되고,
   그 안의 .main만 내용에 따라 내부 스크롤되는 구조가 성립함 (아래 .main 참고) */
html{ height:100%; }
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--porcelain);
  /* min-height:100vh였던 걸 height:100vh + overflow:hidden으로 바꿔서, 화면 전체가 아니라
     .main(본문 영역)만 내부 스크롤되게 함 — 왼쪽 사이드바/상단바는 항상 고정되고 콘텐츠만
     스크롤되길 원한다는 요청(2026-07-14)에 맞춤 */
  height:100vh;
  overflow:hidden;
  /* .topbar(상단바)와 .app(사이드바+본문)을 세로로 쌓기 위한 flex 컨테이너로 변경.
     .topbar는 로그인 페이지처럼 없는 곳도 있어서, 없으면 .app이 자연스럽게 전체를 차지함 */
  display:flex; flex-direction:column;
}
/* 은은한 빛 — 배경 우상단에서 떨어지는 아이보리 광 */
.ambient{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1000px 700px at 80% -15%, rgba(217,196,154,0.14) 0%, transparent 60%),
    radial-gradient(800px 600px at -5% 100%, rgba(22,51,44,0.05) 0%, transparent 55%);
}

/* ── 상단바 (씨킹알파처럼 화면 맨 위에 항상 떠 있는 검정 바) ──
   로그인한 페이지에서만 나옴(base.html에서 current_user.is_authenticated로 감쌈).
   지금은 계정 관련 메뉴(아바타 드롭다운)만 오른쪽에 두지만, 나중에 로고/알림 등도
   이 안에 왼쪽부터 추가하면 됨 */
.topbar{
  /* 원래 52px 고정이었는데, 사이드바 맨 위에 있던 "Ginger" 브랜드/태그라인 블록이 이
     상단바 왼쪽으로 옮겨오면서(2026-07-15) 그 내용이 들어갈 만큼 높이를 늘림.
     height 고정 대신 min-height + 세로 패딩으로 둬서 브랜드 텍스트 두 줄(이름+필기체
     태그라인)이 안 잘리게 함 */
  min-height:84px; flex-shrink:0;
  background:var(--pine);
  display:flex; align-items:center; justify-content:flex-end;
  padding:0 24px;
  position:relative; z-index:20;
}
/* 상단바 왼쪽 구간: "Ginger" 브랜드/태그라인/사이드바 접기버튼을 담는 자리 — 사이드바와
   같은 색으로 칠해서(아래 배경 규칙) 위에서 보면 사이드바의 검정색이 화면 맨 위까지
   이어진 것처럼 보이게 함. position:absolute라 .topbar-right의 flex 배치(오른쪽 정렬)에
   영향을 주지 않고 이 구간만 따로 채움. 폭은 사이드바 기본/접힘 폭(236px/68px)과 정확히
   맞춰야 해서 .sidebar의 width 값과 동일하게 둠 — 폭이 바뀌면 이 값도 같이 바꿔야 함
   (2026-07-15: 배경만 있던 빈 자리표시자에서 실제 브랜드 콘텐츠를 담는 용도로 변경) */
.topbar-brand{
  position:absolute; left:0; top:0; bottom:0;
  width:236px;
  background:var(--pine);
  transition:width .2s ease;
  display:flex; align-items:center; justify-content:flex-start; gap:8px;
  padding:0 16px;
  z-index:1;
}
body.sidebar-collapsed .topbar-brand{ width:68px; justify-content:center; }
/* 접힌 상태에서는 아이콘(접기버튼)만 남기고 브랜드 글자는 숨김 — 예전에 사이드바 안에서
   .sidebar.collapsed .brand-text를 숨기던 것과 같은 방침, 위치만 상단바로 옮겨옴 */
body.sidebar-collapsed .topbar-brand .brand-text{ display:none; }
.avatar-btn{
  width:34px; height:34px; border-radius:50%;
  background:var(--gold); color:#1A1A1A;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-weight:700; font-size:14px;
  border:none; cursor:pointer; transition:filter .15s ease;
}
.avatar-btn:hover{ filter:brightness(1.08); }
.avatar-menu{
  position:absolute; top:44px; right:24px; z-index:30;
  width:210px;
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 24px 48px -20px rgba(0,0,0,0.4);
  padding:14px 0;
}
.avatar-menu[hidden]{ display:none; }
.avatar-menu-head{ padding:0 18px 12px; font-size:13.5px; color:var(--ink); }
.avatar-menu-head .badge{
  display:inline-block; margin-left:6px; font-size:10.5px; font-weight:700;
  color:var(--gold); background:rgba(242,113,28,0.12); padding:2px 7px; border-radius:999px;
  vertical-align:middle;
}
.avatar-menu-divider{ height:1px; background:var(--line); margin:0 0 8px; }
.avatar-menu-item{
  display:block; padding:9px 18px; font-size:13.5px; font-weight:500;
  color:var(--ink); text-decoration:none;
}
.avatar-menu-item:hover{ background:rgba(0,0,0,0.045); }

/* flex:1이 body(높이 100vh 고정)의 남은 세로 공간을 자동으로 채워줌 — .topbar 높이를 뺀
   나머지 높이. min-height:0이 중요한데, flex 아이템 기본값(min-height:auto)은 내용물 크기
   밑으로 못 줄어들게 막아서 안에 있는 .main이 내부 스크롤되지 못하고 .app 자체가 늘어나
   버림(그러면 결국 body/사이드바까지 같이 스크롤되는 예전 문제로 되돌아감) — min-height:0으로
   그 최소 크기 제한을 풀어줘야 .main의 overflow-y:auto가 실제로 동작함 */
.app{ display:flex; flex:1; min-height:0; position:relative; z-index:1; }

/* ═══ 다크 사이드바 ═══ */
.sidebar{
  width:236px; flex-shrink:0;
  background:linear-gradient(175deg, var(--pine) 0%, #122A24 100%);
  color:#E9EDE9;
  padding:30px 16px 22px;
  display:flex; flex-direction:column;
  /* 메뉴가 늘어나 화면보다 길어져도(작은 화면 등) 사이드바 자체가 스크롤되지, 페이지 전체가
     밀려나진 않게 하는 안전망 (평소엔 메뉴 개수가 적어서 스크롤이 생길 일은 거의 없음) */
  overflow-y:auto;
  /* 접기/펼치기 시 폭이 부드럽게 변함(2026-07-15, 씨킹알파의 "<" 버튼 참고) */
  transition:width .2s ease;
}
/* 접힌 사이드바: 아이콘만 남기고 글자/보조 텍스트는 숨김. 폭은 아이콘(19px, 씨킹알파
   테마 기준)+좌우 패딩 정도로 충분히 좁힘 */
.sidebar.collapsed{ width:68px; }
/* 브랜드(brand-text)는 2026-07-15부터 사이드바가 아니라 상단바(.topbar-brand)에 있어서
   여기서는 더 이상 다루지 않음 — 접힘 시 브랜드 숨김은 위 body.sidebar-collapsed
   .topbar-brand .brand-text 규칙 참고 */
.sidebar.collapsed .nav-label{ display:none; }
/* side-foot(로그아웃) 자체는 접힌 상태에서도 계속 보여야 함(2026-07-29 요청) — 예전엔
   .side-foot 전체를 display:none으로 완전히 숨겨서, 다른 nav-item들은 아이콘만 남아 계속
   보이는데 로그아웃만 완전히 사라져버리는 문제가 있었음. 안의 .side-foot-logout이
   .nav-item이라 바로 아래 .sidebar.collapsed .nav-item 규칙을 그대로 물려받아 다른
   메뉴들과 똑같이 아이콘만 남은 모습으로 보임 */
/* font-size:0으로 글자(텍스트 노드)만 시각적으로 없애고 아이콘(고정 px 크기라 영향 없음)은
   그대로 남김 — 나브아이템 마크업을 접었을 때 전용으로 따로 만들지 않고 재사용하기 위한 트릭.
   gap도 0으로 줘야 텍스트가 사라진 자리에 남는 여백 없이 아이콘이 정확히 가운데 옴 */
.sidebar.collapsed .nav-item{ justify-content:center; gap:0; font-size:0; padding-left:0; padding-right:0; }
.brand-name{
  font-family:var(--serif); font-weight:700; font-size:22px;
  color:#F3EFE6; letter-spacing:1px;
}
/* "Powered by Argus" 필기체 태그라인(2026-07-15) — 대문자 강제(text-transform)와 넓은
   letter-spacing은 각진 라벨용 스타일이라 필기체와는 안 어울려서, 원래 대소문자를 그대로
   살리고 자간도 촘촘하게 되돌림. 필기체는 획이 가늘어 작은 크기에서 안 읽히기 쉬워서
   font-size도 조금 키움 */
.brand-tag{
  font-family:'Dancing Script', var(--serif); font-size:17px; font-weight:600;
  color:var(--gold-soft); letter-spacing:0.3px; margin-top:4px;
}
/* 모바일 오프캔버스 드로어의 배경 오버레이 — 데스크톱에서는 항상 숨김.
   920px 이하 전용 스타일(위치/배경/표시 조건)은 아래 @media (max-width:920px) 블록 참고 */
.sidebar-backdrop{ display:none; }
/* 사이드바 접기/펼치기(데스크톱) · 메뉴 드로어 여닫기(모바일) 버튼 — 화살표 회전 대신
   햄버거(☰)/닫기(X) 두 아이콘을 겹쳐두고 상태에 따라 하나만 보여줌(2026-07-16) */
.sidebar-toggle-btn{
  flex-shrink:0; width:44px; height:44px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14);
  /* color:inherit이었을 때는 이 버튼이 .sidebar(밝은 글자색 지정) 안에 있어서 문제가 없었는데,
     2026-07-15에 상단바(.topbar-brand)로 옮기면서 부모 체인에 밝은 색을 지정한 곳이 없어져
     body의 어두운 기본 글자색(var(--ink))을 그대로 물려받아 어두운 배경 위에 아이콘이 거의
     안 보이게 됐음(색상 대비 부족) — 항상 어두운 배경(사이드바/상단바 브랜드 영역) 위에만
     쓰이는 버튼이라 명시적으로 밝은 색을 지정해 어느 부모 안에서든 잘 보이게 함 */
  color:#E9EDE9; cursor:pointer; transition:background .15s ease;
}
.sidebar-toggle-btn:hover{ background:rgba(255,255,255,0.16); }
.sidebar-toggle-ico{ width:32px; height:32px; stroke:currentColor; fill:none; stroke-width:2; }
/* 기본값: 햄버거 보임 / X 숨김. "닫혀있어서 누르면 열리는" 상태를 기본으로 침 —
   모바일의 기본 상태(드로어 닫힘)와 일치함 */
.icon-close{ display:none; }
/* ⚠️ 이 버튼은 2026-07-15에 사이드바에서 상단바(.topbar-brand)로 옮겨갔으므로, 데스크톱
   접힘 상태 판정도 .sidebar.collapsed가 아니라 body.sidebar-collapsed 기준으로 맞춰야 함
   (base.html의 JS가 접힘/펼침 시 sidebar와 body 양쪽에 다 클래스를 토글해줌).
   데스크톱(921px 이상)은 사이드바가 기본으로 펼쳐져 있으니 "열림" 상태의 기본 아이콘을
   모바일과 반대로 뒤집어줌 — 펼침=X(누르면 접힘), 접힘=햄버거(누르면 펼침) */
@media (min-width:921px){
  .icon-hamburger{ display:none; }
  .icon-close{ display:block; }
  body.sidebar-collapsed .icon-hamburger{ display:block; }
  body.sidebar-collapsed .icon-close{ display:none; }
}

.nav-label{
  font-size:10px; font-weight:600; letter-spacing:1.6px;
  color:rgba(233,237,233,0.38); padding:16px 14px 9px; text-transform:uppercase;
}
.nav-item{
  display:flex; align-items:center; gap:11px;
  padding:11px 14px; margin-bottom:2px;
  border-radius:9px;
  color:rgba(233,237,233,0.72); font-size:13.5px; font-weight:500;
  text-decoration:none;
  transition:all .18s ease;
}
.nav-item:hover{ background:rgba(255,255,255,0.06); color:#F3EFE6; }
/* 선택된 메뉴 왼쪽에 세로 골드 바 — 씨킹알파 사이드바 참고(2026-07-15). 카드 그리드의
   "지금 수정 중인 행" 표시(.row-editing)와 같은 box-shadow:inset 기법을 재사용함 */
.nav-item.active{
  background:rgba(185,154,95,0.16);
  color:#F0E6D2; font-weight:600;
  box-shadow:inset 3px 0 0 var(--gold);
}
.nav-item.active .nav-ico{ stroke:var(--gold-soft); }
.nav-ico{ width:16px; height:16px; flex-shrink:0; stroke:currentColor; fill:none; stroke-width:1.6; opacity:.9; }

.side-foot{
  margin-top:auto; padding:16px 14px 0;
  border-top:1px solid rgba(233,237,233,0.1);
  font-size:12px; line-height:1.7; color:rgba(233,237,233,0.55);
}
.side-foot b{ color:rgba(233,237,233,0.7); font-weight:600; }
/* side-foot 안의 로그아웃 링크(.nav-item 재사용) — side-foot 자체 padding(14px 좌우)과
   .nav-item 자체 padding(11px 14px)이 겹쳐 다른 메뉴 항목보다 더 들여쓰기되는 것을 막기 위해,
   컨테이너 쪽 좌우 padding은 없애고 .nav-item 자체 padding만으로 다른 메뉴들과 들여쓰기를 맞춤 */
.side-foot{ padding-left:0; padding-right:0; }
.side-foot-logout{ margin-bottom:0; }

/* ═══ 메인 ═══ */
/* 27인치 4K(3840×2160) 모니터를 브라우저 창 최대화(OS 배율 100% 기준 CSS 픽셀 = 실제 해상도)로
   썼을 때 가로 스크롤 없이 딱 맞도록 계산한 값.
   3840 - 사이드바 236px - 세로 스크롤바 여유 20px ≈ 3584px 가용폭 안에서 3580px로 설정
   (Tabulator 그리드가 이 폭 안에서 최대한 넓게 쓰이도록 함). 창이 이보다 좁거나(예: OS 배율을
   150%로 쓰면 CSS 픽셀 기준 실질 폭은 3840/1.5≈2560px) 컬럼 합계가 더 넓으면, 페이지 전체가
   아니라 그리드 안쪽(.tabulator-tableholder)만 가로 스크롤되는 안전망은 그대로 유지됨 */
/* min-height:0 + overflow-y:auto: 사이드바/상단바는 고정된 채로 이 영역만 세로 스크롤됨
   (body의 height:100vh+overflow:hidden, .app의 min-height:0과 세트로 동작 — 위 주석 참고) */
.main{ flex:1; min-width:0; min-height:0; padding:42px 52px 60px; max-width:3580px; overflow-y:auto; }

.page-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:14px; }
.page-eyebrow{
  font-size:11px; letter-spacing:2px; color:var(--gold);
  text-transform:uppercase; font-weight:600; margin-bottom:8px;
}
.page-title{
  font-family:var(--serif); font-weight:600; font-size:27px;
  color:var(--ink); letter-spacing:-0.3px;
}
.page-date{ font-size:12px; color:var(--ink-3); font-family:var(--num); }

/* snapshots.html 전용 — "일별 계좌 총액 추이" 카드 안, 카드 제목과 그리드 사이에 끼워 넣는
   "최근 스냅샷 요약" 한 줄. (처음엔 페이지 제목 옆에 뒀다가 내용이 길어서 잘리는 문제가 있어
   위치를 옮기고, 그 다음엔 그리드 아래로 옮겼다가 다시 여기로 옮김) */
.page-summary-line{ font-size:13px; color:var(--ink-2); font-family:var(--num); margin:2px 0 16px; }

/* 골드 헤어라인 */
.rule{
  height:2px; margin:0 0 30px;
  background:linear-gradient(90deg, var(--gold) 0%, rgba(185,154,95,0.25) 30%, transparent 70%);
}

/* ── Stock 메뉴 하위 탭바 (_stock_tabs.html) ──
   사이드바 밑에 종목등록/매수·매도 기록/자산배분/리밸런싱을 한 메뉴(Stock)로 묶으면서,
   그 안에서 4개 화면을 전환하는 용도. .rule(골드 헤어라인) 바로 아래, 카드들 위에 옴 */
.tab-bar{ display:flex; gap:4px; margin:-16px 0 26px; border-bottom:1px solid var(--line); }
.tab-item{
  display:flex; align-items:center;
  padding:10px 16px 12px; margin-bottom:-1px;
  font-family:var(--sans); font-size:13.5px; font-weight:600;
  color:var(--ink-2); text-decoration:none;
  border-bottom:6px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
/* 마우스를 올리면 씨킹알파(Seeking Alpha) 탭바처럼 밑줄이 옅은 회색으로 나타남 — 지금 선택된
   탭(.active, 골드색 밑줄)과는 겹치지 않게 :not(.active)로 따로 뺌. section-divider와 같은
   이유로 반투명(rgba) 대신 눈에 확실히 띄는 불투명 회색을 씀 */
.tab-item:hover{ color:var(--ink); }
.tab-item:hover:not(.active){ border-bottom-color:#C7CCC8; }
.tab-item.active{ color:var(--pine); border-bottom-color:var(--gold); }
/* 아직 페이지가 없는 탭용 범용 클래스 — 클릭은 막되(pointer-events:none) 목록에는 보여서
   "곧 생길 화면"이라는 걸 알 수 있게 함. active와는 동시에 적용 안 됨(페이지가 없으니 활성일 수 없음).
   지금은 실제로 쓰는 탭이 없지만, 다음에 자리표시자 탭이 또 필요하면 재사용 */
.tab-item.disabled{ color:var(--ink-3); cursor:default; pointer-events:none; }

/* ── 리밸런싱 서브탭바(2026-07-28 신규, 2026-07-28 밑줄 스타일로 변경) — STOCK 상단
   탭바(.tab-bar)와 같은 밑줄 강조 메커니즘을 그대로 씀(사용자가 상단 탭바 스크린샷을
   보여주며 "버튼 모양 말고 이미지처럼" 요청). 상위 탭보다 한 단계 낮은 위계임을 표시하려고
   font-size/밑줄 두께만 살짝 작게 뒀고, 색상 변수는 .tab-item과 동일하게 재사용 ── */
.subtab-bar{ display:flex; gap:4px; margin:0 0 20px; border-bottom:1px solid var(--line); }
.subtab-item{
  display:flex; align-items:center;
  padding:8px 14px 10px; margin-bottom:-1px;
  font-family:var(--sans); font-size:13px; font-weight:600;
  color:var(--ink-2); text-decoration:none;
  border-bottom:4px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.subtab-item:hover{ color:var(--ink); }
.subtab-item:hover:not(.active){ border-bottom-color:#C7CCC8; }
.subtab-item.active{ color:var(--pine); border-bottom-color:var(--gold); }

/* ── KPI 스탯 열 — 골드빛 종이 톤 ── */
.stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  background:linear-gradient(135deg, #FBF7EE 0%, #F5EEDE 100%);
  border:1px solid rgba(185,154,95,0.22);
  border-radius:16px;
  padding:28px 8px;
  margin-bottom:20px;
  box-shadow:0 1px 2px rgba(22,51,44,0.04), 0 12px 32px -20px rgba(185,154,95,0.35);
}
.stat{ padding:0 30px; }
.stat + .stat{ border-left:1px solid rgba(185,154,95,0.18); }
/* .stats(자체 배경/테두리를 가진 KPI 밴드 전용)와 달리, 이미 card--gold 카드 안에 있을 때
   .stat 여러 개를 그냥 가로로 나란히 두고 싶을 때 쓰는 가벼운 래퍼 (배경/그림자 없음).
   row-gap: 항목이 5개 이상이라 카드 폭에 다 안 들어가 flex-wrap으로 다음 줄로 넘어갈 때
   (2026-07-27, 투자 기본 현황에 출금합계 반영 항목 2개 추가하며 실측 확인), 줄 사이 여백이
   없어 두 번째 줄이 첫 줄에 바짝 붙어 보이는 문제가 있었음 — .stat-stack과 같은 18px로 맞춤 */
.stat-row{ display:flex; flex-wrap:wrap; row-gap:18px; }
.stat-row .stat:first-child{ padding-left:0; }
/* .stat-row(가로 나열)와 달리 위아래로 쌓아서 보여줄 때 쓰는 래퍼 (투자 기본 현황의
   소유자 총 투자원금 → 환율정보). .stat 기본값(좌우 30px 패딩 + 형제 간 왼쪽 테두리)은
   가로 배치 전제라 세로 배치에서는 무효화하고, 대신 위쪽 여백으로 구분함.
   ⚠️ 반드시 직계 자식 결합자(>)를 써야 함 — 자손 결합자(공백)로 두면 .stat-stack 안에
   .stat-row(가로 배치)를 중첩했을 때(2026-07-27, 투자 기본 현황에 평가금액 총합계/총수익률
   추가) 그 안의 .stat들에도 이 세로배치용 padding:0/margin-top이 잘못 적용돼서, 뒤쪽
   항목들이 border/간격 없이 아래로 밀려 보이는 문제가 실측 확인됨 */
.stat-stack > .stat{ padding:0; }
.stat-stack > .stat + .stat{ border-left:none; margin-top:18px; }
.stat-label{ font-size:14px; font-weight:600; color:#3E4C47; margin-bottom:10px; letter-spacing:-0.2px; }
.stat-value{
  font-family:var(--serif); font-weight:600; font-size:29px;
  color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-0.3px;
}
.stat-value small{ font-size:15px; font-weight:500; color:var(--ink-2); margin-left:2px; }
.stat-value.gold{ color:var(--gold); }
.stat-sub{ font-size:13.5px; font-weight:500; color:#3E4C47; margin-top:9px; font-family:var(--num); }

/* ── 콘텐츠 그리드 ── */
.grid{ display:grid; grid-template-columns:1.55fr 1fr; gap:18px; }

.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:16px; padding:26px 28px;
  box-shadow:0 1px 2px rgba(22,51,44,0.04);
  transition:box-shadow .25s ease;
}
/* 섹션별 배경 틴트 — 색으로 영역을 구분 */
.card--pine{
  background:linear-gradient(160deg, #F3F6F3 0%, #EAF0EB 100%);
  border-color:rgba(22,51,44,0.12);
}
.card--sage{
  background:linear-gradient(160deg, #F4F7F2 0%, #ECF2E9 100%);
  border-color:rgba(140,164,140,0.3);
}
/* DESIGN_SYSTEM.md의 "돈 관련 요약" 틴트 규칙(.stats KPI 밴드와 같은 골드빛 크림)을
   개별 카드에도 쓸 수 있게 추가 — 투자원금처럼 금액 자체가 주제인 카드에 사용 */
.card--gold{
  background:linear-gradient(160deg, #FBF7EE 0%, #F5EEDE 100%);
  border-color:rgba(185,154,95,0.3);
}
.card:hover{ box-shadow:0 1px 2px rgba(22,51,44,0.04), 0 16px 36px -22px rgba(22,51,44,0.22); }
.card-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:20px; }
.card-title{
  font-family:var(--serif); font-size:16px; font-weight:600; color:var(--ink);
}
.card-link{
  font-size:12px; color:var(--gold); text-decoration:none; font-weight:500;
  letter-spacing:0.2px;
}
.card-link:hover{ color:#9A7E48; }

/* 테이블 */
table{ width:100%; border-collapse:collapse; }
th{
  text-align:left; padding:0 8px 12px;
  font-size:13.5px; font-weight:700; letter-spacing:-0.2px;
  color:var(--ink);
  border-bottom:2px solid rgba(22,51,44,0.14);
}
th:nth-child(n+3), td:nth-child(n+3){ text-align:right; }
td{
  padding:13px 8px; font-size:13.5px;
  border-bottom:1px solid rgba(22,51,44,0.07);
  font-family:var(--num); font-variant-numeric:tabular-nums; color:var(--ink);
}
td.name{ font-family:var(--sans); font-weight:600; }
tr:last-child td{ border-bottom:none; }
tbody tr{ transition:background .15s; }
tbody tr:hover{ background:rgba(253,252,250,0.75); }

.chip{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--sans); font-size:11px; font-weight:700;
  padding:3px 10px 3px 8px; border-radius:999px;
}
.chip::before{ content:''; width:5px; height:5px; border-radius:50%; background:currentColor; }
/* 자산군별 배경을 옅게 채워서(거의 흰 배경+얇은 테두리였던 이전보다) 한눈에 구분되게 함.
   색상 자체는 DESIGN_SYSTEM.md 규칙(위험=코퍼, 카운터=슬레이트, 안전=세이지) 그대로 유지하고,
   텍스트는 대비를 위해 더 진한 톤을, 배경은 그 색의 옅은 틴트(16% 불투명도)를 사용 */
.chip.risk{ color:#7A4E37; background:rgba(150,101,76,0.16); border:1px solid rgba(150,101,76,0.4); }
.chip.counter{ color:#3D5570; background:rgba(84,112,138,0.16); border:1px solid rgba(84,112,138,0.4); }
.chip.safe{ color:#4A6350; background:rgba(95,125,100,0.16); border:1px solid rgba(95,125,100,0.4); }
/* 시스템 상태 화면(2026-07-30)의 🟢안전/🟡경고/🔴위험 3단계 뱃지용 — .chip.safe/.chip.risk는
   위 자산군 칩과 그대로 재사용(같은 색맹 안전 팔레트), .chip.danger만 위험(빨강 계열)으로
   신규 추가하고 경고는 대비되는 앰버 톤을 새로 넣음 */
.chip.warn{ color:#8A6D1E; background:rgba(201,163,44,0.18); border:1px solid rgba(201,163,44,0.45); }
.chip.danger{ color:#9C3B2E; background:rgba(196,75,58,0.16); border:1px solid rgba(196,75,58,0.42); }

/* 시스템 상태 → 시스템현황(2026-07-30) — .stats(고정 3열)와 달리 항목 수가 유동적(8개
   내외)이라 auto-fill 그리드로 카드를 감싸서 씀. 안의 라벨/값은 기존 .stat-label/.stat-value
   타이포를 그대로 재사용 */
.status-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:14px;
}
.status-grid .stat{ padding:16px 18px; border:1px solid rgba(185,154,95,0.22); border-radius:12px; background:#FBF9F4; }
.status-grid .stat .chip{ margin-top:8px; }

.ret{ font-weight:600; }
.ret.pos{ color:#96654C; }
.ret.neg{ color:#54708A; }

/* 도넛 카드 */
.donut-stage{ position:relative; width:168px; margin:8px auto 22px; }
.donut-center{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; pointer-events:none;
}
.donut-center .n{ font-family:var(--serif); font-weight:600; font-size:23px; color:var(--ink); }
.donut-center .l{ font-size:12px; color:var(--ink-2); margin-top:3px; font-weight:500; }

.alloc-list{ display:flex; flex-direction:column; gap:13px; }
.alloc-row{ display:flex; align-items:center; gap:11px; font-size:13px; }
.alloc-name{ width:76px; color:#3E4C47; font-weight:600; flex-shrink:0; }
.alloc-bar{ flex:1; height:4px; border-radius:99px; background:rgba(255,255,255,0.8); overflow:hidden; }
.alloc-fill{ height:100%; border-radius:99px; }
.alloc-pct{ width:40px; text-align:right; font-family:var(--num); font-weight:600; color:var(--ink); }

/* ── 레이아웃: 세로 스택 (폼 위 / 목록 아래) ── */
.stack{ display:flex; flex-direction:column; gap:18px; }

/* ── 폼 (종목등록) ── */
.form{ display:flex; flex-direction:column; gap:16px; }
.form-row{ display:flex; flex-direction:column; gap:6px; }
.form-row label{ font-size:13px; font-weight:600; color:#3E4C47; }
.form-row input, .form-row select, .form-row textarea{
  font-family:var(--sans); font-size:13.5px; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:9px;
  padding:10px 12px; outline:none; transition:border-color .15s ease;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{ border-color:var(--gold); }
/* settings.html "메뉴명 수정" 표: .form-row 밖(<table><td> 안)이라 위 규칙이 안 먹혀서
   같은 톤으로 따로 스타일을 줌 */
.menu-label-input{
  width:100%; max-width:280px;
  font-family:var(--sans); font-size:13.5px; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:9px;
  padding:8px 10px; outline:none; transition:border-color .15s ease;
}
.menu-label-input:focus{ border-color:var(--gold); }
/* textarea(여러 줄 비고 등)는 input과 달리 세로로만 사용자가 늘릴 수 있게 하고,
   줄바꿈은 그대로 유지하되 폭을 넘는 긴 단어/URL은 강제로 줄바꿈해서 레이아웃이 안 깨지게 함 */
.form-row textarea{ resize:vertical; font-family:var(--sans); line-height:1.5; white-space:pre-wrap; word-break:break-word; }
/* 금액/수량 등 숫자 입력칸은 앞으로도 계속 우측 정렬을 기본값으로 함 (그리드의 숫자 컬럼이
   전부 우측 정렬인 것과 톤을 맞춤 — cell-num 클래스와 같은 원칙). type="number"이면 어떤
   페이지의 어떤 필드든 이 규칙이 자동 적용되므로, 새 숫자 입력칸을 추가할 때 따로 신경 안 써도 됨 */
.form-row input[type="number"]{ text-align:right; }

/* 가로 폭이 넓은 카드에서는 필드를 한 줄로 배치 */
.form--inline{ flex-direction:row; flex-wrap:wrap; align-items:flex-end; gap:14px; }
.form--inline .form-row{ flex:1; min-width:160px; }
.form--inline .btn-primary{ align-self:flex-end; }
.form--inline .form-message{ flex-basis:100%; }

/* snapshots.html "종목별 스냅샷 상세" 카드: 조회조건 폼과 바로 아래 그리드가 같은 카드 안에
   붙어있어서, 폼 자체의 gap(16px)만으로는 그리드와의 경계가 잘 안 보인다는 피드백으로
   폼 아래쪽에 여백을 더 줌 (다른 페이지의 조회조건은 별도 카드라 이 여백이 필요 없어서
   .form--inline 전체가 아니라 이 폼에만 적용함). 그래도 경계가 흐릿하다는 추가 피드백으로
   여백을 한 번 더 넓히고(section-divider와 합쳐서 총 간격이 커짐) 회색 선까지 추가함 */
#detail-search-form{ margin-bottom:26px; }

/* 카드 안에서 위/아래 두 블록(조회조건 폼 vs 그리드)을 회색 선으로 나눔 — 페이지 상단의
   골드 그라데이션 .rule과 달리 카드 내부용 구분선. ⚠️ --line(카드 테두리 색, 9% 불투명도) →
   rgba(0,0,0,0.14) 두 단계 다 "안 보인다"는 피드백이 있어서, 반투명 대신 확실히 눈에 띄는
   불투명 회색(#C7CCC8)으로 바꾸고 두께도 2px로 키움 */
.section-divider{ height:2px; background:#C7CCC8; margin:0 0 22px; }
/* 씨킹알파(어두운) 테마에서는 이 회색이 배경과 비슷해 묻히므로, 더 밝은 회색으로 반전 */
body.theme-sa .section-divider{ background:#5A5A5A; }

.form-row--checkbox{ flex:0 0 auto; min-width:0; }
.form-row--checkbox label{
  display:flex; align-items:center; gap:7px;
  padding:10px 12px; font-size:13.5px; font-weight:600; color:#3E4C47;
  white-space:nowrap;
}
.form-row--checkbox input[type="checkbox"]{ width:15px; height:15px; accent-color:var(--gold); }

/* .form-row--fit: form-row가 카드 폭 전체로 늘어나지 않고 버튼 내용 폭만큼만 차지하게 함
   (transactions.html의 조회조건 카드처럼, 버튼 여러 개를 한 줄에 나란히 붙일 때 씀) */
.form-row--fit{ flex:0 0 auto; min-width:0; }
.inline-actions{ display:flex; gap:10px; align-items:center; }
.btn-primary{
  font-family:var(--sans); font-size:13.5px; font-weight:600;
  color:#F3EFE6; background:var(--pine); border:none; border-radius:9px;
  padding:11px 16px; cursor:pointer; transition:background .15s ease;
}
.btn-primary:hover{ background:var(--pine-2); }
.btn-primary:disabled{ opacity:0.7; cursor:not-allowed; }

/* 조회/시세갱신처럼 "처리 중"임을 알리는 로딩 스피너 — btn-primary(어두운 배경) 위에서
   잘 보이도록 흰색 계열로. .btn-secondary 등 밝은 배경 버튼에 쓸 일이 생기면 그때
   색상 변형 클래스를 추가하면 됨 */
.spinner{
  display:inline-block; width:12px; height:12px; margin-right:7px; vertical-align:-2px;
  border:2px solid rgba(255,255,255,0.35); border-top-color:#fff; border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.btn-secondary{
  font-family:var(--sans); font-size:13.5px; font-weight:600;
  color:var(--pine); background:transparent; border:1px solid var(--pine);
  border-radius:9px; padding:11px 16px; cursor:pointer; transition:background .15s ease;
}
.btn-secondary:hover{ background:rgba(22,51,44,0.06); }
.btn-delete{
  font-family:var(--sans); font-size:12px; font-weight:600;
  color:#96654C; background:transparent; border:1px solid rgba(176,122,94,0.35);
  border-radius:7px; padding:5px 10px; cursor:pointer; transition:background .15s ease;
}
.btn-delete:hover{ background:rgba(176,122,94,0.1); }
.btn-edit{
  display:inline-block; font-family:var(--sans); font-size:12px; font-weight:600;
  color:#54708A; background:transparent; border:1px solid rgba(110,135,160,0.35);
  border-radius:7px; padding:5px 10px; cursor:pointer; transition:background .15s ease;
  margin-right:6px; text-decoration:none;
}
.btn-edit:hover{ background:rgba(110,135,160,0.1); }
.form-message{ font-size:12.5px; font-weight:500; min-height:16px; }
.form-message.success{ color:var(--sage); }
.form-message.error{ color:#96654C; }
.form-message.warning{ color:var(--gold); }

/* 엑셀 다운로드 버튼 — Tabulator 그리드가 있는 카드의 card-head 우측에 배치.
   초록색(#217346)은 엑셀 파일 아이콘과 통일감을 주기 위한 의도적 예외 색상 (전역 팔레트 색이 아님) */
.btn-excel{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--sans); font-size:12.5px; font-weight:600;
  color:#217346; background:transparent; border:1px solid rgba(33,115,70,0.35);
  border-radius:8px; padding:7px 12px; cursor:pointer; transition:background .15s ease;
}
.btn-excel:hover{ background:rgba(33,115,70,0.08); }
.btn-excel-ico{ width:15px; height:15px; flex-shrink:0; }

/* card-head 안에서 제목 반대쪽에 버튼을 여러 개 나란히 두고 싶을 때 쓰는 래퍼.
   card-head 자체는 justify-content:space-between이라 자식이 2개(제목/버튼그룹)여야
   양 끝으로 정렬되므로, 버튼이 여러 개면 이렇게 하나로 묶어야 함 */
.card-head-actions{ display:flex; align-items:center; gap:10px; }

/* 선택 삭제 등 "위험한" 대량 작업 버튼 — btn-excel과 크기는 맞추고 색만 경고(코퍼) 톤으로.
   비활성화(선택 없음) 상태에서는 흐리게 표시해 지금 누를 수 없다는 걸 바로 알 수 있게 함 */
.btn-danger{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--sans); font-size:12.5px; font-weight:600;
  color:#96654C; background:transparent; border:1px solid rgba(176,122,94,0.4);
  border-radius:8px; padding:7px 12px; cursor:pointer; transition:background .15s ease;
}
.btn-danger:hover{ background:rgba(176,122,94,0.1); }
.btn-danger:disabled{ opacity:0.35; cursor:not-allowed; }

/* 시세 갱신 등 card-head에 들어가는 일반 보조 버튼 — btn-excel/btn-danger와 크기를 맞추되
   위험하지 않은 동작이라 파인(중립) 톤을 씀 */
.btn-refresh{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--sans); font-size:12.5px; font-weight:600;
  color:var(--pine); background:transparent; border:1px solid rgba(22,51,44,0.25);
  border-radius:8px; padding:7px 12px; cursor:pointer; transition:background .15s ease;
}
.btn-refresh:hover{ background:rgba(22,51,44,0.06); }
.btn-refresh:disabled{ opacity:0.5; cursor:not-allowed; }
.btn-danger:disabled:hover{ background:transparent; }

/* ── Tabulator 그리드를 기존 카드 테마에 맞춰 재도색 ──
   ⚠️ Tabulator 기본 테마는 .tabulator-tableholder .tabulator-table{background:#fff}처럼
   클래스 3단 결합 선택자를 써서 배경을 하드코딩해둔 곳이 있음. 이런 규칙은 로드 순서와 무관하게
   단순 클래스 선택자보다 우선 적용되므로, 아래에서도 동일한 결합 단계로 맞춰 덮어써야 함. */
.tabulator{
  background:transparent; border:none; font-family:var(--sans); font-size:13.5px;
  color:var(--ink);
}
/* 스크롤 영역과 실제 테이블 요소 — 기본 테마의 흰 배경(#fff)이 카드의 은은한 그린/세이지
   그라데이션 위에서 튀어 보이는 원인이었음. 카드 배경이 그대로 비치도록 투명 처리 */
.tabulator .tabulator-tableholder,
.tabulator .tabulator-tableholder .tabulator-table{
  background:transparent; color:var(--ink);
}
/* 데이터가 없을 때 표시되는 placeholder 문구도 카드 톤에 맞는 회녹색으로 */
.tabulator .tabulator-placeholder .tabulator-placeholder-contents{
  color:var(--ink-3); font-family:var(--sans); font-size:13.5px; font-weight:500;
}
.tabulator .tabulator-header{
  background:transparent; border-bottom:2px solid rgba(22,51,44,0.14); color:var(--ink);
}
.tabulator .tabulator-header .tabulator-col{
  background:transparent; border-right:none;
}
/* 헤더 라벨은 컬럼 정렬(hozAlign)과 무관하게 항상 가운데 정렬 */
.tabulator .tabulator-col-content{ text-align:center; }
.tabulator .tabulator-col-title{
  font-family:var(--sans); font-size:13.5px; font-weight:700; color:var(--ink);
  text-align:center;
}
/* headerFilter(컬럼별 검색/드롭다운 필터) 입력칸 — Tabulator 기본값은 흰 배경의 각진 input이라
   카드의 은은한 색조 배경 위에서 튀어 보임. 폼 입력칸(.form-row input)과 톤을 맞춤 */
.tabulator .tabulator-header-filter input,
.tabulator .tabulator-header-filter select{
  font-family:var(--sans); font-size:12.5px; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:7px;
  padding:5px 8px; outline:none;
}
.tabulator .tabulator-header-filter input:focus,
.tabulator .tabulator-header-filter select:focus{ border-color:var(--gold); }
/* list 타입 헤더필터/에디터 팝업(예: 매수/매도 기록의 "구분" 드롭다운) — Tabulator 기본
   max-height(200px)가 "구분" 값 9개(전체+매수/매도/배당/수수료/이자/세금/입금/출금) 중
   마지막 "출금"을 가려서 스크롤해야만 보임(2026-07-20 발견 — 사용자가 "출금이 없다"고
   착각한 원인). 목록을 더 키워서 흔히 쓰는 짧은 목록은 스크롤 없이 한눈에 다 보이게 함 */
.tabulator-edit-list{ max-height:340px; }
/* 기존 raw <table>(dashboard.html의 보유종목 표)와 동일하게 줄무늬(zebra) 없이
   카드의 은은한 그라데이션이 행 배경으로 그대로 비치도록 하고, hover만 살짝 밝게 */
.tabulator-row{
  background:transparent; border-bottom:1px solid rgba(22,51,44,0.07);
}
.tabulator-row.tabulator-row-even{ background:transparent; }
/* 자산군별 행 전체 배경 틴트 — 칩만으로는 한눈에 안 들어온다는 피드백으로 추가.
   JS의 rowFormatter가 row-risk/row-counter/row-safe 클래스를 데이터의 category에 맞춰 붙여줌.
   .tabulator-row-even과 동일한 특이도(클래스 2개)라 CSS 파일에서 더 아래에 있는 이 규칙이
   캐스케이드에서 이김 — 순서를 바꾸면 짝수행에서 틴트가 사라지니 주의 */
.tabulator-row.row-risk{ background:rgba(150,101,76,0.20); }
.tabulator-row.row-counter{ background:rgba(84,112,138,0.20); }
.tabulator-row.row-safe{ background:rgba(95,125,100,0.20); }
/* 행 클릭 시 수정 모드로 진입하므로 커서로 클릭 가능함을 알림 */
.tabulator-row:hover{ background:rgba(253,252,250,0.55); cursor:pointer; }
/* 자산군 틴트가 있는 행은 hover 시에도 그 색을 유지한 채 살짝 진하게만 (hover 규칙보다
   클래스 2개로 특이도가 같아 파일 순서상 이 규칙이 이겨서, hover해도 틴트가 안 사라짐) */
.tabulator-row.row-risk:hover{ background:rgba(150,101,76,0.30); }
.tabulator-row.row-counter:hover{ background:rgba(84,112,138,0.30); }
.tabulator-row.row-safe:hover{ background:rgba(95,125,100,0.30); }
/* 행 클릭으로 수정 모드에 들어간 행을 표시 — 그리드 전체를 훑지 않고도 "지금 뭘 고치고
   있는지" 바로 알 수 있게 골드 계열로 강조함 (사이드바 .nav-item.active와 같은 톤).
   row-risk/counter/safe(클래스 2개)보다 특이도가 높아야(row-editing도 tabulator-row와 함께
   2개지만, 파일에서 더 아래라 캐스케이드에서 이김) 자산군 틴트가 있는 행이 수정 중이어도
   골드 강조가 우선 보임. 종목등록/금융정보 등 행클릭→수정 패턴을 쓰는 모든 그리드에서 공용으로 씀 */
.tabulator-row.row-editing{
  background:rgba(185,154,95,0.22);
  box-shadow:inset 3px 0 0 var(--gold);
}
.tabulator-row.row-editing:hover{ background:rgba(185,154,95,0.30); }

/* "복사"로 만든 임시(미저장) 거래 행 — 실제 서버에는 아직 없는 상태임을 눈에 띄게 알려주려고
   왼쪽에 골드 띠 + 옅은 배경을 줌(row-editing과 톤은 같되, 대시 테두리로 "확정 전"임을 구분).
   "임시 항목 저장"을 눌러 실제로 등록되면 refreshGrids()가 이 행을 지우고 일반 행으로 대체함 */
.tabulator-row.row-draft{
  background:rgba(185,154,95,0.14);
  box-shadow:inset 3px 0 0 var(--gold);
  outline:1px dashed rgba(185,154,95,0.5);
  outline-offset:-1px;
}
.tabulator-row.row-draft:hover{ background:rgba(185,154,95,0.22); }

/* 인라인 편집 가능한 셀(예: 종목등록의 정렬순서/자산군/섹터/통화/매수원금/리밸런싱비율/숨김) —
   Tabulator가 editor 옵션이 붙은 컬럼의 셀에 자동으로 붙여주는 tabulator-editable 클래스를
   그대로 이용해서, 클릭하면 바로 고칠 수 있는 셀만 옅은 골드 배경으로 구분해줌. 그냥 보기만
   하는 셀(티커/종목명 등, 클릭하면 수정 팝업이 뜸)과 구분이 안 돼서 헷갈린다는 요청으로 추가함
   (2026-07-14) — 밑줄이나 아이콘 대신 배경색으로 은은하게 구분해서 그리드가 번잡해 보이지 않게 함 */
.tabulator-row .tabulator-cell.tabulator-editable{
  background:rgba(185,154,95,0.08);
  transition:background .15s ease;
}
.tabulator-row .tabulator-cell.tabulator-editable:hover{ background:rgba(185,154,95,0.18); }
.tabulator-row .tabulator-cell{
  /* 디자인 시스템 타이포 원칙: 표 안 텍스트는 기본 산세리프, 숫자만 --num(tabular-nums) */
  padding:13px 8px; font-family:var(--sans);
  border-right:none;
}
/* 식별자 성격의 첫 컬럼(종목명/별칭 등) — 기존 raw <table>의 td.name과 동일하게 굵은 산세리프 */
.tabulator-row .tabulator-cell.cell-name{ font-weight:600; }
/* 금액/수량 등 순수 숫자 컬럼에만 적용 — Inter + tabular-nums로 자릿수 정렬 */
.tabulator-row .tabulator-cell.cell-num{ font-family:var(--num); font-variant-numeric:tabular-nums; }
/* 비고처럼 여러 줄 입력값을 그대로 보여줘야 하는 컬럼 — Tabulator 기본값(한 줄로 줄여서
   "..."로 자르는 nowrap+ellipsis)을 덮어써서, 값에 들어있는 개행(\n)이 실제 줄바꿈으로 보이고
   폭을 넘는 긴 단어도 강제 줄바꿈되게 함. 행 높이는 Tabulator가 내용에 맞춰 자동으로 늘림 */
.tabulator-row .tabulator-cell.cell-memo{
  white-space:pre-wrap; overflow:visible; text-overflow:clip; word-break:break-word;
  text-align:left; line-height:1.5;
}
.tabulator-row .tabulator-cell.tabulator-editing{ border:1px solid var(--gold); }
/* transactions.html의 계좌/종목/날짜 커스텀 에디터(select, input[type=date]) — Tabulator
   기본 에디터와 달리 셀에 꽉 차는 크기를 직접 지정해줘야 함 */
.tabulator-cell.tabulator-editing .cell-select-editor,
.tabulator-cell.tabulator-editing .cell-date-editor{
  width:100%; height:100%; border:none; outline:none; background:transparent;
  font:inherit; padding:0 4px; box-sizing:border-box;
}
.tabulator .tabulator-footer{
  background:transparent; border-top:1px solid rgba(22,51,44,0.1); color:var(--ink-2);
}
.tabulator-cell .cell-actions{ display:flex; gap:0; }

/* ── 로그인 페이지 — 사이드바 없이 화면 가운데에 카드 하나만 뜨는 독립 레이아웃 ── */
.auth-page{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  position:relative; z-index:1; padding:20px;
}
.auth-card{
  width:100%; max-width:380px;
  padding:40px 36px 36px;
  border-top:3px solid var(--gold);
  box-shadow:0 1px 2px rgba(0,0,0,0.04), 0 28px 56px -24px rgba(0,0,0,0.24);
}
/* 로그인 카드 대표 이미지(실제 반려견 "Ginger" 사진, 2026-07-16) — 지운 "Pension Portfolio"
   태그라인 대신 브랜드를 시각적으로 또렷하게 남기기 위한 자리. 원래는 "G" 글자 모노그램
   배지였는데, 실사 사진으로 바뀌면서 원형 프로필 사진 형태로 키움 */
.auth-mark{
  width:96px; height:96px; margin:0 auto 18px;
  border-radius:50%;
  overflow:hidden;
  border:3px solid var(--gold);
  box-shadow:0 8px 20px -8px rgba(0,0,0,0.35);
}
.auth-mark img{ width:100%; height:100%; object-fit:cover; }
.auth-brand{
  text-align:center; margin-bottom:28px;
  font-family:var(--serif); font-weight:700; font-size:21px;
  color:var(--ink); letter-spacing:0.2px;
}
.auth-card .form-row{ margin-bottom:14px; }
.auth-card .form-row input{ width:100%; }
.auth-card .btn-primary{ width:100%; margin-top:4px; }

/* ── 종목 선택 모달 (transactions.html) — 이 앱에서 처음 쓰는 가운데 오버레이 팝업 패턴.
   기본은 숨김(hidden 속성)이고, JS가 열 때 hidden을 지워서 표시함 ── */
.modal-overlay{
  position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
  background:rgba(22,51,44,0.45); padding:20px;
}
.modal-overlay[hidden]{ display:none; }
.modal-box{
  width:100%; max-width:520px; max-height:80vh; display:flex; flex-direction:column;
  background:var(--paper); border-radius:16px; border:1px solid var(--line);
  box-shadow:0 24px 60px -20px rgba(22,51,44,0.45);
}
.modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 22px 14px; border-bottom:1px solid var(--line);
}
.modal-title{ font-family:var(--serif); font-size:17px; font-weight:600; color:var(--ink); }
.modal-close{
  background:none; border:none; cursor:pointer; font-size:20px; line-height:1;
  color:var(--ink-3); padding:2px 6px;
}
.modal-close:hover{ color:var(--ink); }
.modal-search{
  margin:14px 22px; padding:10px 12px; border:1px solid var(--line); border-radius:9px;
  font-family:var(--sans); font-size:13.5px; outline:none;
}
.modal-search:focus{ border-color:var(--gold); }
.modal-list{ overflow-y:auto; padding:0 10px 16px; }
.modal-row{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:9px;
  cursor:pointer; transition:background .15s ease;
}
.modal-row:hover{ background:rgba(185,154,95,0.1); }
.modal-row .modal-row-ticker{ font-family:var(--num); font-size:12.5px; color:var(--ink-2); width:70px; flex-shrink:0; }
.modal-row .modal-row-name{ font-weight:600; color:var(--ink); flex:1; }
.modal-empty{ padding:20px; text-align:center; color:var(--ink-3); font-size:13px; }

@media (max-width:920px){
  .main{ padding:26px 20px; }
  .stats{ grid-template-columns:1fr; padding:8px 24px; }
  .stat{ padding:20px 0; }
  .stat + .stat{ border-left:none; border-top:1px solid var(--line); }
  .grid{ grid-template-columns:1fr; }

  /* 사이드바를 완전히 숨기던 것(예전) 대신, 상단바의 "<" 버튼으로 여닫는 오프캔버스
     드로어로 전환 — 모바일에서 메뉴 자체에 접근할 방법이 없었던 문제(2026-07-16) 수정.
     같은 버튼(#sidebar-toggle-btn)을 재사용하되, 이 폭에서는 desktop의 "접기"(아이콘 레일)
     대신 body.sidebar-mobile-open 클래스로 전체 폭 드로어를 슬라이드-인 시킴(아래 JS 참고) */
  /* ⚠️ top:0이 아니라 top:84px(.topbar의 min-height와 동일)로 둠 — .app에 걸린
     position:relative + z-index:1이 쌓임 맥락(stacking context)을 새로 만들어서, 그 안의
     .sidebar(z-index:50)가 실제로는 형제 요소인 .topbar(z-index:20)보다 위로 못 올라가고
     뒤에 가려지는 문제가 있었음(2026-07-16, "홈으로" 메뉴가 상단바 브랜드 글자에 가려
     안 보이던 버그) — .app의 z-index를 건드리면 아바타 드롭다운(topbar 자식, 데스크톱)의
     쌓임 순서까지 흔들릴 수 있어, 대신 드로어가 상단바 영역을 아예 침범하지 않게 함.
     이러면 상단바(브랜드/닫기 버튼)도 드로어가 열린 채로 계속 보이고 눌림 */
  .sidebar{
    display:flex;
    position:fixed; top:84px; left:0; bottom:0; z-index:50;
    width:250px;
    transform:translateX(-100%);
    transition:transform .25s ease;
    box-shadow:0 0 40px rgba(0,0,0,0.35);
  }
  /* 데스크톱에서 저장된 "접힘"(68px 아이콘 레일) 상태가 남아있어도, 모바일에서는
     항상 전체 폭 드로어로 보여줌 */
  .sidebar.collapsed{ width:250px; }
  .sidebar.collapsed .nav-label,
  .sidebar.collapsed .side-foot{ display:block; }
  .sidebar.collapsed .nav-item{ justify-content:flex-start; gap:11px; font-size:13.5px; padding:11px 14px; }
  body.sidebar-mobile-open .sidebar{ transform:translateX(0); }
  body.sidebar-mobile-open .icon-hamburger{ display:none; }
  body.sidebar-mobile-open .icon-close{ display:block; }
  /* .sidebar와 같은 이유로 top:84px — 상단바 영역은 덮지 않아 계속 눌림 */
  .sidebar-backdrop{
    display:none; position:fixed; top:84px; left:0; right:0; bottom:0; z-index:40;
    background:rgba(0,0,0,0.45);
  }
  body.sidebar-mobile-open .sidebar-backdrop{ display:block; }
}
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}

/* ═══ Seeking Alpha 스타일 (body.theme-sa) ═══
   대시보드에서 미리 써보고 확정해서 이제 base.html이 모든 페이지의 <body>에 항상 붙임 —
   기존 Quiet Luxury(파인그린+골드) 팔레트는 위에 그대로 남겨두고, 이 블록으로 덮어쓰는 구조.
   대부분의 컴포넌트는 --pine/--gold 등 CSS 변수를 쓰기 때문에, 변수를 여기서 재정의하기만
   해도 카드/버튼/텍스트 색이 자동으로 다 바뀜. 그라데이션·rgba(22,51,44,…)처럼 변수를 안 쓰고
   파인그린/골드를 직접 하드코딩한 자리(주로 Tabulator 그리드, 버튼, 모달)는 아래에서
   하나씩 따로 덮어씀. Chart.js(대시보드 도넛)는 CSS로 못 건드려서 dashboard.html의 JS에서
   body.theme-sa 여부를 직접 확인해 팔레트를 통째로 바꿈 */
body.theme-sa{
  --pine: #000000;         /* 사이드바/헤더 — 씨킹알파는 순검정 */
  --pine-2: #000000;
  --porcelain: #F5F4F1;    /* 본문 배경 — 아이보리 아님, 무채색 오프화이트 */
  --paper: #FFFFFF;        /* 카드 — 완전한 흰색 (은은한 톤 대신 대비로 구획) */
  --gold: #F2711C;         /* 씨킹알파 오렌지 — 강조/CTA/활성 탭 */
  --gold-soft: #FF9152;
  --ink: #1A1A1A;
  --ink-2: #5B5B5B;
  --ink-3: #9A9A9A;
  --line: rgba(0,0,0,0.1);
  --copper: #D93025;       /* 위험자산 칩 + 하락(빨강) — 뮤트 톤 대신 또렷한 원색으로 */
  --slate: #5B5B5B;        /* 카운터자산 칩 — 중성 회색 */
  --sage: #1A8754;         /* 안전자산 칩 + 상승(초록) */
  /* 씨킹알파는 제목에도 세리프를 안 씀 — 전부 그로테스크 산세리프 하나로 통일 */
  --serif: 'Pretendard', -apple-system, sans-serif;
}
/* 사이드바 배경은 var(--pine)과 하드코딩 색(#122A24)을 섞은 그라데이션이라 변수 재정의만으론
   안 바뀜 — 순검정 단색으로 직접 덮어씀 */
body.theme-sa .sidebar{ background:#000000; }
/* 상단 메뉴바(topbar)를 페이지 본문과 같은 배경색으로 맞춤(2026-07-15 요청) — 원래는
   .topbar가 var(--pine)(테마-sa에서 순검정)을 그대로 썼는데, 그러면 사이드바(검정)와는
   이어져 보이지만 본문(옅은 오프화이트)과는 색이 끊겨 보였음 */
body.theme-sa .topbar{ background:var(--porcelain); }
/* 상단바 왼쪽 자리표시자는 본문 배경(위 규칙)이 아니라 사이드바 색(순검정)을 따라가야
   경계선 없이 이어져 보임 — 위 body.theme-sa .sidebar 규칙과 항상 같은 색을 유지할 것 */
body.theme-sa .topbar-brand{ background:#000000; }
/* 배경 우상단의 은은한 빛 번짐 효과 — 씨킹알파는 완전히 플랫한 배경이라 꺼둠 */
body.theme-sa .ambient{ display:none; }
/* KPI 밴드/카드 틴트: 파스텔 그라데이션 대신 흰 배경 + 얇은 테두리로 구획 (씨킹알파는
   카드 배경에 색을 거의 안 쓰고 여백·테두리로만 영역을 나눔) */
body.theme-sa .stats,
body.theme-sa .card--pine,
body.theme-sa .card--sage,
body.theme-sa .card--gold{
  background:#FFFFFF;
  border-color:var(--line);
}
body.theme-sa .stat-value.gold{ color:var(--gold); }
/* 상승(양수)=초록, 하락(음수)=빨강 — 기존 코퍼/슬레이트 뮤트 톤 대신 통상적인 증권앱 관례로 */
body.theme-sa .ret.pos{ color:var(--sage); }
body.theme-sa .ret.neg{ color:var(--copper); }
/* 자산군 칩(뱃지): 색이 변수가 아니라 하드코딩이라 따로 덮어씀. 위험=빨강, 카운터=회색, 안전=초록 */
body.theme-sa .chip.risk{ color:#B23A2E; background:rgba(217,48,37,0.1); border-color:rgba(217,48,37,0.35); }
body.theme-sa .chip.counter{ color:#4A4A4A; background:rgba(91,91,91,0.1); border-color:rgba(91,91,91,0.3); }
body.theme-sa .chip.safe{ color:#166A42; background:rgba(26,135,84,0.1); border-color:rgba(26,135,84,0.32); }
/* 표 헤더/행 밑줄, 라벨류 텍스트 — 파인그린이 섞인 하드코딩 색이라 무채색으로 교체 */
body.theme-sa th{ border-bottom-color:rgba(0,0,0,0.16); }
body.theme-sa td{ border-bottom-color:rgba(0,0,0,0.08); }
body.theme-sa .stat-label,
body.theme-sa .stat-sub,
body.theme-sa .alloc-name{ color:var(--ink-2); }
body.theme-sa .card-link:hover{ color:var(--gold-soft); }

/* ── 골드→오렌지 톤으로 바뀐 것들 중 rgba()가 옛 골드 RGB(185,154,95)를 직접 박아둬서
   var(--gold) 재정의만으론 안 바뀌는 자리들 (헤어라인, KPI 밴드 테두리/그림자, 활성 메뉴,
   모달 행 hover) — 전부 오렌지 RGB(242,113,28)로 교체 */
body.theme-sa .rule{
  background:linear-gradient(90deg, var(--gold) 0%, rgba(242,113,28,0.3) 30%, transparent 70%);
}
body.theme-sa .stats{ border-color:rgba(242,113,28,0.25); box-shadow:0 1px 2px rgba(0,0,0,0.04), 0 12px 32px -20px rgba(242,113,28,0.3); }
body.theme-sa .stat + .stat{ border-left-color:rgba(242,113,28,0.2); }
/* 실제 Seeking Alpha 사이드바 메뉴 참고 스크린샷(2026-07-15)에 맞춰, 폰트 크기를 키우고
   활성 메뉴 글자색을 옅은 살구색 대신 또렷한 오렌지로 바꿈(#FFD9BC는 너무 흐려서 스크린샷의
   선명한 오렌지 텍스트와 차이가 컸음). 아이콘도 살짝 키워서 텍스트와의 비례를 비슷하게 맞춤.
   ⚠️ 일반(비활성) 메뉴 글자색도 원래 rgba(233,237,233,0.72)(연두빛이 섞인 흐린 회색, 72%
   불투명도)라 순검정 배경 위에서 "흰색이 아니라 회색으로 보인다"는 피드백이 있었음 —
   스크린샷처럼 또렷한 흰색에 가깝게 밝힘 */
body.theme-sa .nav-item{ font-size:14px; color:rgba(255,255,255,0.92); }
/* 기존 hover 색(#F3EFE6, 살짝 누런 크림톤)이 위에서 밝힌 기본 글자색보다 오히려 어두워
   보이는 역전 현상이 생겨서, 순백색으로 맞춰 hover가 항상 기본보다 밝게 유지되도록 함 */
body.theme-sa .nav-item:hover{ color:#FFFFFF; }
body.theme-sa .nav-ico{ width:19px; height:19px; }
/* 왼쪽 세로 바도 골드 대신 씨킹알파 오렌지로 (스크린샷 참고) */
body.theme-sa .nav-item.active{ background:rgba(242,113,28,0.18); color:#F2711C; font-weight:700; box-shadow:inset 3px 0 0 #F2711C; }
body.theme-sa .nav-item.active .nav-ico{ stroke:#F2711C; }
body.theme-sa .modal-row:hover{ background:rgba(242,113,28,0.1); }

/* ── 폼 라벨/버튼: 파인그린 하드코딩(#3E4C47, rgba(22,51,44,…))과 코퍼/슬레이트 하드코딩
   (#96654C, #54708A)을 무채색/빨강 계열로 교체 ── */
body.theme-sa .form-row label,
body.theme-sa .form-row--checkbox label{ color:var(--ink-2); }
body.theme-sa .btn-secondary:hover{ background:rgba(0,0,0,0.05); }
body.theme-sa .btn-refresh{ border-color:rgba(0,0,0,0.2); }
body.theme-sa .btn-refresh:hover{ background:rgba(0,0,0,0.05); }
body.theme-sa .btn-delete,
body.theme-sa .btn-danger,
body.theme-sa .form-message.error{ color:var(--copper); }
body.theme-sa .btn-delete,
body.theme-sa .btn-danger{ border-color:rgba(217,48,37,0.35); }
body.theme-sa .btn-delete:hover,
body.theme-sa .btn-danger:hover{ background:rgba(217,48,37,0.08); }
body.theme-sa .btn-edit{ color:var(--slate); border-color:rgba(91,91,91,0.35); }
body.theme-sa .btn-edit:hover{ background:rgba(91,91,91,0.08); }

/* ── Tabulator 그리드: 헤더/행 밑줄, 자산군별 행 틴트, 수정중 행 강조, 푸터 ── */
body.theme-sa .tabulator .tabulator-header{ border-bottom-color:rgba(0,0,0,0.16); }
body.theme-sa .tabulator-row{ border-bottom-color:rgba(0,0,0,0.08); }
body.theme-sa .tabulator-row.row-risk{ background:rgba(217,48,37,0.08); }
body.theme-sa .tabulator-row.row-counter{ background:rgba(91,91,91,0.08); }
body.theme-sa .tabulator-row.row-safe{ background:rgba(26,135,84,0.08); }
body.theme-sa .tabulator-row.row-risk:hover{ background:rgba(217,48,37,0.14); }
body.theme-sa .tabulator-row.row-counter:hover{ background:rgba(91,91,91,0.14); }
body.theme-sa .tabulator-row.row-safe:hover{ background:rgba(26,135,84,0.14); }
body.theme-sa .tabulator-row.row-editing{ background:rgba(242,113,28,0.14); }
body.theme-sa .tabulator-row.row-editing:hover{ background:rgba(242,113,28,0.2); }
body.theme-sa .tabulator-row.row-draft{ background:rgba(242,113,28,0.14); box-shadow:inset 3px 0 0 var(--gold); outline:1px dashed rgba(242,113,28,0.45); outline-offset:-1px; }
body.theme-sa .tabulator-row.row-draft:hover{ background:rgba(242,113,28,0.2); }
body.theme-sa .tabulator .tabulator-footer{ border-top-color:rgba(0,0,0,0.12); }
body.theme-sa .tabulator-row .tabulator-cell.tabulator-editable{ background:rgba(242,113,28,0.08); }
body.theme-sa .tabulator-row .tabulator-cell.tabulator-editable:hover{ background:rgba(242,113,28,0.16); }

/* ── 모달 오버레이: 배경 어둡게 깔리는 색이 파인그린 하드코딩이라 무채색 검정으로 ── */
body.theme-sa .modal-overlay{ background:rgba(0,0,0,0.5); }
body.theme-sa .modal-box{ box-shadow:0 24px 60px -20px rgba(0,0,0,0.5); }

/* ── 모바일(920px 이하) 상단바 정리 ──
   .topbar-brand(검정 236px 박스)는 원래 데스크톱에서 바로 아래 이어지는 검정 사이드바와
   시각적으로 한 덩어리처럼 보이려고 폭을 맞춘 것인데, 모바일은 사이드바가 오프캔버스로
   숨어있어(위 @media (max-width:920px) 참고) 그 검정 박스만 뚝 떨어진 사각형처럼 남아
   아래 콘텐츠와 세로선이 안 맞아 보임(2026-07-16 확인). 박스를 없애고 상단바 전체를
   검정 한 줄로 통일해서 브랜드/토글 버튼(왼쪽)과 아바타(오른쪽)가 한 바 안에 놓이게 함.
   body.theme-sa .topbar{ background:var(--porcelain); } 보다 파일 아래쪽에 둬서
   순서상 이 규칙이 이기게 함(선택자 명시도가 같음) */
@media (max-width:920px){
  body.theme-sa .topbar{ background:#000000; }
  .topbar-brand,
  body.sidebar-collapsed .topbar-brand{
    position:static; width:auto; flex:1;
    background:transparent; padding:0; justify-content:flex-start;
  }
  .topbar{ justify-content:space-between; }
}

/* ═══════════════════════════════════════════════════════════════════════
   mstock(모바일 전용 Stock 화면) 레이아웃 — base_mobile.html/_mstock_tabbar.html/
   mstock_*.html 전용. 사이드바·상단바(.topbar)는 이 화면들에 아예 없으므로(별도
   base_mobile.html이라 그 HTML 자체가 없음) 겹침 걱정 없이 새로 구성함. 색상 변수
   (--gold/--copper/--slate/--sage 등)·.card/.chip/.ret/.spinner/.btn-*는 기존 걸 그대로
   재사용하고, 여기서는 mstock 고유의 상단 헤더/하단 탭바/카드 리스트 뼈대만 추가함
   ═══════════════════════════════════════════════════════════════════════ */
/* 기본 body{ height:100vh; overflow:hidden; }는 사이드바/상단바가 고정된 채 .main만 내부
   스크롤되는 데스크톱 레이아웃 전용 규칙(위 body 규칙 주석 참고) — mstock은 그 .main 내부
   스크롤 구조가 없는 그냥 평범한 세로 문서라서, height 고정과 overflow:hidden을 그대로
   물려받으면 뷰포트 밖 콘텐츠가 아예 스크롤이 안 되는 문제가 있었음(2026-07-21 실측 확인).
   height:auto + overflow:visible로 되돌려서 body/문서 전체가 자연스럽게 스크롤되게 함 */
body.mstock-view{ display:block; height:auto; min-height:100vh; overflow:visible; }

/* 당겨서 새로고침 인디케이터(2026-07-23 추가, _pull_to_refresh.html이 조작) — 평소엔
   translateY(-100%)로 화면 밖에 숨어있다가 터치로 당기는 만큼 끌려 내려옴. height 대신
   transform만 바꾸는 이유: touchmove마다 매 프레임 갱신해야 해서 레이아웃 리플로우가 없는
   컴포지터 전용 속성(transform)을 써야 끊기지 않음. z-index:40인 .sidebar-backdrop/.mstock-tabbar,
   z-index:50인 .sidebar/.modal-overlay보다 낮게 둬서 드로어를 열면 자연히 가려지게 함.
   env(safe-area-inset-top)은 이 앱에서 처음 쓰는 자리 — 노치 없는 기기는 0으로 폴백됨 */
.ptr-indicator{
  position:fixed; top:0; left:0; right:0; z-index:35;
  display:flex; align-items:center; justify-content:center; gap:8px;
  height:60px; padding-top:env(safe-area-inset-top);
  background:var(--paper); border-bottom:1px solid var(--line);
  transform:translateY(-100%);
  transition:transform .25s ease;
  pointer-events:none;
}
/* 드래그 중엔 transition을 꺼서 손가락 움직임과 1:1로 따라오게 함 — 스냅백/고정될 때만
   (JS가 이 클래스를 뗄 때) 다시 부드러운 애니메이션이 붙음 */
.ptr-indicator.dragging{ transition:none; }
/* 기존 .spinner(465행)는 어두운 버튼 배경 위 흰색 링이라 이 밝은 배경 위에선 안 보여서
   같은 spin 키프레임을 재사용하되 색만 새로 만듦 */
.ptr-spinner{
  width:16px; height:16px; flex-shrink:0;
  border:2px solid var(--line); border-top-color:var(--gold);
  border-radius:50%; animation:spin .7s linear infinite;
}
.ptr-label{ font-size:12px; font-weight:600; color:var(--ink-2); }

/* 상단 헤더: 일반 문서 흐름(고정 아님) — 좁은 화면에서 고정 요소가 콘텐츠를 계속
   깎아먹는 걸 피하려는 의도(2026-07-21, 사용자 피드백 반영) */
.mstock-header{
  display:flex; align-items:center; gap:10px;
  padding:16px 18px; background:var(--pine); color:#fff;
}
/* 햄버거 메뉴 버튼은 .sidebar-toggle-btn(기존 데스크톱 상단바용 스타일, 44px 정사각형
   +밝은 색)을 그대로 재사용 — 항상 어두운 배경 위에 쓰이는 버튼이라 이 헤더에도 그대로 맞음 */
.mstock-header-menu-btn{ margin:-6px 0; }
.mstock-header-brand{ font-family:var(--serif); font-weight:700; font-size:16px; }
.mstock-header-title{ flex:1; font-size:14px; font-weight:600; opacity:0.85; }
.mstock-header-logout{ font-size:12.5px; color:rgba(255,255,255,0.8); text-decoration:none; }
.mstock-header-logout:hover{ color:#fff; }

/* 본문: 하단 고정 탭바 높이만큼만 여백을 줌(상단 헤더는 고정이 아니므로 별도 여백 불필요) */
.mstock-main{ padding:16px 14px calc(76px + env(safe-area-inset-bottom)); max-width:520px; margin:0 auto; }

/* 하단 탭바: 4개 화면 전환용이라 유일하게 고정(fixed) — 항상 접근 가능해야 하는 내비게이션 */
.mstock-tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:flex; background:var(--paper); border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -4px 16px -8px rgba(22,51,44,0.18);
}
.mstock-tab{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:9px 4px 8px; text-decoration:none; color:var(--ink-3);
  font-size:11px; font-weight:600;
}
.mstock-tab-ico{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.mstock-tab.active{ color:var(--gold); }

/* 리밸런싱 서브탭바(모바일, 2026-07-28 신규, 2026-07-28 밑줄 스타일로 변경) — desktop
   .subtab-bar와 대칭인 밑줄 강조 토글. 하단 고정 .mstock-tabbar와는 별개로, 리밸런싱 화면
   콘텐츠 맨 위에 오는 일반 흐름(non-fixed) 탭 */
.mstock-subtabbar{ display:flex; border-bottom:1px solid var(--line); margin-bottom:18px; }
.mstock-subtab{
  flex:1; text-align:center; padding:9px 6px 11px; margin-bottom:-1px;
  font-family:var(--sans); font-size:13px; font-weight:600;
  color:var(--ink-2); text-decoration:none;
  border-bottom:4px solid transparent;
}
.mstock-subtab.active{ color:var(--pine); border-bottom-color:var(--gold); }

/* 카드 리스트: 기존 .card를 세로로 쌓기 좋게 padding/gap만 축소한 변형 */
.mstock-card-list{ display:flex; flex-direction:column; gap:10px; }
.mstock-card{
  background:var(--paper); border:1px solid var(--line); border-radius:14px;
  padding:14px 16px;
}
.mstock-card-row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-top:6px; }
.mstock-card-row:first-child{ margin-top:0; }
.mstock-card-label{ font-size:12px; color:var(--ink-3); flex-shrink:0; }
.mstock-card-value{ font-family:var(--num); font-variant-numeric:tabular-nums; font-size:13.5px; color:var(--ink); text-align:right; }
.mstock-card-title{ display:flex; align-items:center; gap:8px; font-weight:600; color:var(--ink); margin-bottom:8px; flex-wrap:wrap; }

/* 탭하면 수정 모달이 열리는 카드(예: 매수/매도 기록의 보유 현황 요약, 2026-07-26 추가) —
   클릭 가능하다는 걸 알 수 있게 커서와 살짝의 hover 톤만 추가하고, 카드 맨 아래에
   .mstock-card-hint 한 줄로 무엇을 하는 탭인지 안내함 */
.mstock-card--tappable{ cursor:pointer; }
.mstock-card--tappable:active{ background:rgba(0,0,0,0.03); }
.mstock-card-hint{ font-size:11px; color:var(--ink-3); text-align:right; margin-top:8px; }

/* 모바일 카드 하단 복사/수정/삭제 버튼 줄 — .btn-danger(삭제)가 전역적으로 .btn-secondary(복사/수정)보다
   padding/font-size가 작게 정의되어 있어서(card-head용 컴팩트 버튼과 크기를 맞추려던 규칙, style.css
   상단 .btn-danger 참고) 같은 줄에 나란히 두면 삭제 버튼만 작아 보임 — 여기서만 크기를 맞춰줌 */
.mstock-card-actions{ display:flex; gap:8px; margin-top:10px; }
.mstock-card-actions .btn-secondary,
.mstock-card-actions .btn-danger{ flex:1; padding:11px 16px; font-size:13.5px; }
/* .btn-danger는 display:inline-flex(justify-content 기본값 flex-start)라서 flex:1로 넓어지면
   텍스트가 왼쪽으로 쏠림 — .btn-secondary는 일반 버튼이라 기본 중앙정렬이라 안 보이던 차이 */
.mstock-card-actions .btn-danger{ justify-content:center; }

/* 요약 스트립(투자 기본 현황 등 상단 한두 줄 요약) */
.mstock-summary-strip{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:14px 16px; margin-bottom:14px; border-radius:14px;
  background:linear-gradient(160deg, #FBF7EE 0%, #F5EEDE 100%); border:1px solid rgba(185,154,95,0.3);
}
.mstock-summary-item .n{ font-family:var(--serif); font-weight:600; font-size:18px; color:var(--ink); }
.mstock-summary-item .l{ font-size:11px; color:var(--ink-3); margin-top:2px; }

/* 기간별 누적수익률(3개월/6개월/1년/YTD/전체, 2026-07-28 추가) — 데스크톱 snapshots.html·
   모바일 mstock_snapshots.html 공용. 5개 항목을 한 줄에 나란히 두되, 폭이 좁으면(모바일)
   flex-wrap으로 자동 줄바꿈됨. 색상은 인라인 스타일 대신 .ret.pos/.ret.neg를 그대로 재사용해서
   테마(기본/씨킹알파)별 색이 자동으로 맞음 */
.period-return-grid{ display:flex; gap:10px; flex-wrap:wrap; }
.period-return-item{ flex:1 1 96px; min-width:88px; text-align:center; padding:12px 8px; border-radius:12px; background:rgba(0,0,0,0.03); }
.period-return-label{ font-size:11.5px; color:var(--ink-3); margin-bottom:6px; }
.period-return-rate{ font-family:var(--num); font-weight:700; font-size:16px; }
.period-return-amount{ font-family:var(--num); font-size:11.5px; color:var(--ink-2); margin-top:3px; }

.mstock-section-title{ font-family:var(--serif); font-size:15px; font-weight:600; color:var(--ink); margin:18px 0 10px; }
.mstock-section-title:first-child{ margin-top:0; }

/* 신규 거래 등록 접이식 폼(매수/매도 기록 화면 전용) */
.mstock-add-form{ display:none; flex-direction:column; gap:12px; margin-top:12px; }
.mstock-add-form.open{ display:flex; }

/* "더보기" 버튼(Historical Prices 등 리스트가 길어질 수 있는 화면) */
.mstock-more-btn{ width:100%; margin-top:4px; }

/* 사이드바 드로어(그룹 간 이동, _sidebar_nav.html) — base.html에서는 top:84px(.topbar 높이)
   만큼 아래에서 열리지만, mstock-header는 고정(fixed)이 아니라서 그 84px 오프셋이 필요 없음.
   .sidebar/.sidebar-backdrop의 top:84px 규칙(위 @media(max-width:920px) 블록)보다 선택자
   명시도가 높아서(class 2개 vs 클래스 1개) 미디어쿼리 안팎 상관없이 항상 이 규칙이 이김 —
   920px 초과 폭에서는 애초에 .sidebar가 position:fixed가 아니라 top 값 자체가 무의미하므로
   무해함(mstock은 모바일 UA로만 진입해 실사용 시나리오는 항상 좁은 폭) */
body.mstock-view .sidebar,
body.mstock-view .sidebar-backdrop{ top:0; }

/* "보유 수량 추이" 카드(홈 대시보드, dashboard.html/mstock_dashboard.html 공용, 2026-07-25 추가) —
   기간 필터 버튼/종목 표시-숨김 범례/차트/표를 감싸는 툴바·레이아웃 규칙만 여기 두고, 실제
   데이터 렌더링(계단형 라인차트/Tabulator 표)은 각 템플릿의 JS가 담당함 */
.qty-trend-toolbar{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-bottom:14px;
}
.qty-trend-period-group{ display:inline-flex; gap:6px; }
/* eval-trend-period-btn — "평가금액 추이" 카드의 기간 버튼(2026-07-25 추가). qty-trend와
   똑같은 모양이지만 클래스를 분리해서, 두 카드가 한 페이지에 같이 있을 때 각자의 JS가
   document.querySelectorAll('.qty-trend-period-btn')로 상대방 버튼까지 잘못 집어가는 걸 막음 */
.qty-trend-period-btn, .eval-trend-period-btn{
  font-family:var(--sans); font-size:12px; font-weight:600; color:var(--ink-2);
  background:transparent; border:1px solid rgba(0,0,0,0.15); border-radius:999px;
  padding:5px 14px; cursor:pointer;
}
.qty-trend-period-btn.active, .eval-trend-period-btn.active{
  color:#fff; background:var(--pine, #16332C); border-color:var(--pine, #16332C);
}
.eval-trend-period-group{ display:inline-flex; gap:6px; margin-bottom:10px; }
.qty-trend-toggle{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-2); }
.qty-trend-legend{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.qty-trend-legend-chip{
  display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600;
  padding:4px 10px; border-radius:999px; border:1px solid rgba(0,0,0,0.12);
  background:rgba(0,0,0,0.03); cursor:pointer; color:var(--ink-2); user-select:none;
}
.qty-trend-legend-chip .sw{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
/* 표시/숨김 토글로 꺼진 종목 — 범례 칩 자체를 흐리게 해서 "지금 안 보임" 상태를 알려줌 */
.qty-trend-legend-chip.hidden-ticker{ opacity:0.4; text-decoration:line-through; }
.qty-trend-chart-wrap{ width:100%; overflow-x:auto; }
.qty-trend-table-wrap{ overflow-x:auto; margin-top:6px; }
.qty-trend-table-wrap .tabulator{ min-width:640px; }
/* 표에서 선택된 종목 행 — 클릭하면 차트 선 강조와 함께 이 스타일로 표시 */
.qty-trend-table-wrap .tabulator-row.qty-trend-row-selected{
  background:rgba(185,154,95,0.18) !important;
}
/* 모바일 "보유 수량 추이" 카드(그리드 대신 카드 리스트, 2026-07-25 요청) — 탭하면 위
   .qty-trend-row-selected와 같은 목적으로 강조 표시 */
.qty-trend-card{ cursor:pointer; }
.qty-trend-card.qty-trend-card-selected{
  background:rgba(185,154,95,0.18); border-color:rgba(185,154,95,0.5);
}

/* 범용 정렬 유틸리티 — 2번째 칸까지는 th:nth-child(n+3)/td:nth-child(n+3) 기본 오른쪽 정렬이
   안 미쳐서 명시적으로 오른쪽 정렬해야 할 때 씀(예: fear_greed.html의 2열짜리 지수 비교 표) */
.text-right{ text-align:right; }

/* ── 공포와 탐욕지수 화면(2026-07-28 신규, fear_greed.html/mstock_fear_greed.html) ──
   CNN Fear & Greed 게이지/7가지 지표 카드/종목별 방향성 배지. 새 색상을 추가하지 않고 계절성
   캘린더와 같은 색 언어(세이지그린=약세/공포 쪽, 코퍼=강세/탐욕 쪽, 골드=중립)를 그대로 씀 */
.fg-gauge-head{ display:flex; align-items:baseline; gap:12px; }
.fg-gauge-score{ font-family:var(--num); font-size:40px; font-weight:800; color:var(--ink); line-height:1; }
.fg-gauge-track{
  position:relative; height:12px; border-radius:6px; margin-top:16px; overflow:visible;
  background:linear-gradient(to right,
    var(--sage) 0%, var(--sage) 25%,
    #D8DDD6 25%, #D8DDD6 45%,
    var(--gold-soft) 45%, var(--gold-soft) 55%,
    #E7CDA9 55%, #E7CDA9 75%,
    var(--copper) 75%, var(--copper) 100%);
}
.fg-gauge-pointer{
  position:absolute; top:-5px; width:4px; height:22px; background:var(--ink);
  border-radius:2px; transform:translateX(-50%);
}
.fg-gauge-marks{ display:flex; justify-content:space-between; margin-top:6px; font-size:11px; color:var(--ink-3); }

.fg-gauge-rating{ display:inline-block; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:700; white-space:nowrap; }
.fg-z1{ background:rgba(140,164,140,0.30); color:#3F5C42; }
.fg-z2{ background:rgba(140,164,140,0.16); color:#5C7360; }
.fg-z3{ background:rgba(185,154,95,0.20); color:#8A6F3D; }
.fg-z4{ background:rgba(176,122,94,0.18); color:#8A5A40; }
.fg-z5{ background:rgba(176,122,94,0.30); color:#6E4530; }

.fg-indicator-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:14px; padding:4px; }
.fg-indicator-card{ padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--paper); }
.fg-indicator-name{ font-weight:700; font-size:13.5px; color:var(--ink); }
.fg-indicator-desc{ font-size:11.5px; color:var(--ink-2); line-height:1.4; margin:4px 0 8px; }
/* fg-indicator-plain: 위 fg-indicator-desc(전문 용어 정의)와 별개로, 중학생도 이해할 수 있는
   쉬운 설명을 눈에 띄는 박스로 구분해서 보여줌(2026-07-30 추가) */
.fg-indicator-plain{
  font-size:12px; color:var(--ink); line-height:1.5; margin:0 0 10px;
  background:rgba(212,163,86,0.1); border-radius:8px; padding:8px 10px;
}
.fg-indicator-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.fg-indicator-score{ font-family:var(--num); font-weight:800; font-size:16px; color:var(--ink); }
.fg-mini-track{ height:5px; border-radius:3px; background:var(--porcelain); margin-top:8px; overflow:hidden; }
.fg-mini-fill{ height:100%; }
.fg-mini-fill.fg-z1{ background:#3F5C42; }
.fg-mini-fill.fg-z2{ background:#5C7360; }
.fg-mini-fill.fg-z3{ background:#8A6F3D; }
.fg-mini-fill.fg-z4{ background:#8A5A40; }
.fg-mini-fill.fg-z5{ background:#6E4530; }

/* 분할 매수·매도 단계 가이드 표 — 지금 지수가 발동시킨 칸만 강조(renderStepGuide) */
#step-guide-table td.fg-step-active{ background:rgba(185,154,95,0.22); font-weight:700; color:var(--pine); }

/* 종목별 의견 표의 "의견" 칸 — 문단형 텍스트라 오른쪽 정렬 기본값을 되돌리고 살짝 작게 표시 */
td.fg-opinion-cell{ text-align:left; font-size:12px; color:var(--ink-2); line-height:1.6; }