/* 보물섬 클라우드 — 화면 규칙
   · 모바일이 기본. 입력 글자는 16px 밑으로 내려가지 않는다(iOS 가 확대해 버린다).
   · 색은 8개 안쪽. 상태는 색 하나로만 말한다: 통과=녹, 불통=적, 미검산=회.
   · 표는 자기 상자 안에서 가로로 흐른다. 페이지 본문은 절대 가로로 밀리지 않는다.
   ·
   · 디자인 기준 (2026-08-24 회장님 지시로 재작업):
   ·   구조·타이포·카드·칩·배지·간격 = ~/workspace/goalboard/invest.html (BRT 인베스트 v96, 회장님이 매일
   ·   쓰는 ELN 감시 화면)의 애플 스타일을 그대로 옮긴다 — 읽기 참조만 했을 뿐 그 파일은 건드리지 않았다.
   ·   브랜드색만 Pine Capital 목업 v1의 초록(--accent)으로 바꾼다. "칠은 채도색 위에 얹지 않고,
   ·   글씨는 그보다 진한 -t 대비색을 쓴다" 는 invest.html 의 v314 원칙을 그대로 따른다(아래 --ok/--bad/--warn
   ·   이 이미 그 고대비 텍스트색이고, 옅은 배경은 별도 -tint 로 둔다). */

:root{
  --bg:#F5F5F7; --card:#FFFFFF; --ink:#1D1D1F; --muted:#6E6E73; --line:#E5E5EA; --rule:rgba(60,60,67,.14);
  --card-border:transparent; --shadow:0 1px 3px rgba(0,0,0,.06);
  --panel:rgba(120,120,128,.08); --gray-tint:rgba(120,120,128,.14); --focus:rgba(11,93,51,.18);

  /* 브랜드 — Pine Capital 목업 v1 그린. 헤더·활성 탭·기본 버튼에 쓴다(상태색과는 다른 축). */
  --accent:#0B5D33; --accent-tint:rgba(11,93,51,.12); --lime:#8DC63F;

  /* 상태색 — invest.html 그대로: 칠=애플 채도색(-tint) / 글씨=고대비(-t 대응, 여기선 변수명을 텍스트색으로 씀) */
  --ok:#1d7a35; --ok-tint:rgba(52,199,89,.14);
  --bad:#d70015; --bad-tint:rgba(255,59,48,.14);
  --warn:#8a6d00; --warn-tint:rgba(255,159,10,.18);

  --radius:16px; --radius-sm:11px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#000000; --card:#1C1C1E; --ink:#F5F5F7; --muted:#8E8E93; --line:#38383A; --rule:rgba(84,84,88,.34);
    --card-border:#38383A; --shadow:none;
    --panel:rgba(120,120,128,.16); --gray-tint:rgba(120,120,128,.24); --focus:rgba(95,211,154,.30);
    --accent:#5fd39a; --accent-tint:rgba(95,211,154,.18); --lime:#8DC63F;
    --ok:#30D158; --ok-tint:rgba(48,209,88,.18);
    --bad:#FF453A; --bad-tint:rgba(255,69,58,.18);
    --warn:#FF9F0A; --warn-tint:rgba(255,159,10,.22);
  }
}
:root[data-theme="dark"]{
  --bg:#000000; --card:#1C1C1E; --ink:#F5F5F7; --muted:#8E8E93; --line:#38383A; --rule:rgba(84,84,88,.34);
  --card-border:#38383A; --shadow:none;
  --panel:rgba(120,120,128,.16); --gray-tint:rgba(120,120,128,.24); --focus:rgba(95,211,154,.30);
  --accent:#5fd39a; --accent-tint:rgba(95,211,154,.18); --lime:#8DC63F;
  --ok:#30D158; --ok-tint:rgba(48,209,88,.18);
  --bad:#FF453A; --bad-tint:rgba(255,69,58,.18);
  --warn:#FF9F0A; --warn-tint:rgba(255,159,10,.22);
}

*{box-sizing:border-box}
/* ★hidden 속성은 display 를 주는 규칙에 진다(.gate 가 display:grid 라 로그인 화면이 안 사라졌다).
   실측으로 잡힌 버그 — 전역으로 못 박는다. */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font:16px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text","Pretendard","Apple SD Gothic Neo",Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  -webkit-text-size-adjust:100%;
}
button,input,select,textarea{font:inherit; font-size:16px; color:inherit}
h1,h2,h3,h4{margin:0 0 .4rem; font-weight:700; letter-spacing:-.02em}
h3{font-size:17px}
h4{font-size:11px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin:0 0 10px}
.muted{color:var(--muted)}
.fine{color:var(--muted); font-size:13px}
.err{color:var(--bad); font-size:14px}
/* 계산값(모델·산식으로 나온 수) — invest.html .calcd 그대로: 점선 밑줄 + title 툴팁 */
.calcd{border-bottom:1px dotted var(--muted); cursor:help}

/* 로그인 */
.gate{min-height:100dvh; display:grid; place-items:center; padding:24px}
.gate-card{background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius);
  padding:28px; width:min(420px,100%); box-shadow:var(--shadow)}
.brand{font-size:20px; font-weight:700; letter-spacing:-.02em}
.brand .mark{color:var(--accent)}
.brand.small{font-size:16px}
.gate-card form{display:grid; gap:14px; margin-top:18px}
label{display:grid; gap:6px; font-size:14px; color:var(--muted)}
input,select{padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:var(--card); width:100%}
input:focus,select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--focus)}
button{cursor:pointer; border-radius:10px; border:1px solid var(--line); background:var(--card); padding:10px 14px;
  transition:background .15s ease}
button.primary{background:var(--accent); color:#fff; border-color:var(--accent); font-weight:600}
button.ghost{background:transparent; border-color:transparent; color:var(--muted)}
button:active{background:var(--panel)}
button.primary:active{background:var(--accent); opacity:.85}
button:disabled{opacity:.5; cursor:default}
.linklike{color:var(--accent); text-decoration:underline; cursor:pointer}

/* 상단 — 브랜드 초록 바(목업 .top). 라이트·다크 상관없이 브랜드는 고정색이다. */
.top{position:sticky; top:0; z-index:5; display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  padding:10px 16px; background:#0B5D33; color:#fff; border-bottom:1px solid #094a29}
.brand.small{display:flex; align-items:center; gap:8px}
.brand.small .mark{width:22px; height:22px; border-radius:50%; background:var(--lime); color:#0B5D33;
  display:grid; place-items:center; font-size:11px; font-weight:800}
#tabs{display:flex; gap:3px; overflow-x:auto; flex:1; -webkit-overflow-scrolling:touch}
#tabs button{border:0; background:transparent; padding:9px 13px; border-radius:980px; color:#BDD9C8; white-space:nowrap;
  min-height:44px; font-size:13.5px; font-weight:500}
#tabs button.on{background:rgba(255,255,255,.16); color:#fff; font-weight:650}
.who{display:flex; align-items:center; gap:9px; font-size:12.5px; color:#BDD9C8}
.who .av{width:25px; height:25px; border-radius:50%; background:rgba(255,255,255,.18); display:grid;
  place-items:center; font-size:10.5px; font-weight:700; color:#fff}
.who button.ghost{color:#BDD9C8}
main{padding:16px; max-width:1100px; margin:0 auto}
.foot{padding:24px 16px 40px; text-align:center; color:var(--muted); font-size:12px}

/* 카드·표 — invest.html .card 그대로(그림자, 얇은/없는 테두리, 큰 라운드) */
.card{background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:16px; margin-bottom:14px}
.head{display:flex; gap:16px; flex-wrap:wrap; align-items:flex-end; margin-bottom:14px}
.kpi{background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius-sm);
  box-shadow:var(--shadow); padding:12px 16px}
.kpi .v{font-size:22px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.kpi .l{font-size:11px; color:var(--muted); font-weight:600; letter-spacing:.02em; text-transform:uppercase}
.tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
table{border-collapse:collapse; width:100%; font-size:14px; font-variant-numeric:tabular-nums}
th,td{padding:9px 10px; border-bottom:1px solid var(--rule); text-align:left; white-space:nowrap}
th{font-size:11px; color:var(--muted); font-weight:600; letter-spacing:.02em; text-transform:uppercase}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}
tbody tr:hover{background:var(--panel)}
td input{padding:6px 8px; min-width:90px}

/* 배지 — 칠은 -tint, 글씨는 고대비(-ok/-bad/-warn) */
.badge{display:inline-block; padding:2px 9px; border-radius:980px; font-size:11.5px; font-weight:700}
.b-pass{background:var(--ok-tint); color:var(--ok)}
.b-fail{background:var(--bad-tint); color:var(--bad)}
.b-unchecked{background:var(--gray-tint); color:var(--muted)}
.b-stale{background:var(--warn-tint); color:var(--warn)}

/* 카테고리 탭 — 애플 세그먼트 칩(invest.html .seg) + 그린 브랜드. 탭마다 표의 열이 통째로 바뀐다
   (app.js COLS_BY_CAT) — 목업 v1 "한 표에 다 넣으면 어느 쪽도 제대로 안 보인다"는 그대로 지킨다. */
.ctabs{display:flex; flex-wrap:wrap; gap:2px; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:3px; margin-bottom:14px}
.ct{border:none; background:transparent; color:var(--muted); border-radius:9px; padding:7px 12px;
  font-size:12.5px; font-weight:600; display:flex; align-items:center; gap:6px; min-height:auto}
.ct b{font-weight:inherit}
.ct-n{font-size:10px; font-weight:700; background:var(--gray-tint); color:var(--muted); border-radius:980px; padding:1px 7px}
.ct.on{background:var(--accent); color:#fff}
.ct.on .ct-n{background:rgba(255,255,255,.25); color:#fff}
.catnote{font-size:12px; color:var(--muted); margin:-4px 0 10px}

/* 작은 필터 칩(원장 연도 필터 등) — invest.html .seg-sm */
.chipseg{display:inline-flex; gap:2px; background:var(--panel); border:1px solid var(--line);
  border-radius:980px; padding:2px; margin-bottom:10px}
.chipseg button{border:none; background:transparent; color:var(--muted); border-radius:980px; padding:5px 12px;
  font-size:11.5px; font-weight:600; min-height:auto}
.chipseg button.on{background:var(--accent); color:#fff}

/* 목록 행 클릭(구조화상품 → 상세) */
tr.clickable{cursor:pointer}
tr.clickable:hover{background:var(--accent-tint)}

/* 종료(만기 지남) 표기 — invest.html .led-end/.dead 그대로: 톤다운 + 작은 회색 배지.
   ★KO(조기상환)는 이 스키마로 판별할 근거가 없어 만들지 않는다 — 명세서에 없는 걸 지어내지 않는다는
   원칙(README)과 같은 이유. "만기 지남"만 maturity_date 로 정직하게 계산한다. */
.matured{opacity:.55}
.matured-badge{display:inline-block; margin-left:6px; font-size:9.5px; font-weight:700; letter-spacing:.02em;
  color:var(--muted); background:var(--panel); border-radius:980px; padding:2px 8px; white-space:nowrap}

/* 구조화상품 상세 — 별도 화면 헤더 */
.dhead{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px}
.dhead h3{margin:0}
.backbtn{padding:7px 12px; font-size:13px; border-radius:980px}

/* 쿠폰 원장(§3) — invest.html .led-tbl 그대로: 지난 회차 나눔선 굵게, 최근 수령 강조,
   미래 회차 톤다운, 하단 누적 합계 행(윗선 굵게) */
.led-tbl{width:100%}
.led-tbl tr.now td{background:var(--accent-tint)}
.led-tbl tr.now td.l{font-weight:700}
.led-tbl tr.future td{opacity:.7}
.led-tbl .led-foot td{border-top:2px solid var(--line); border-bottom:none; font-size:13px; font-weight:700; padding-top:11px}

/* 업로드 */
.drop{border:2px dashed var(--line); border-radius:var(--radius); padding:40px 20px; text-align:center;
  background:var(--card)}
.drop.hot{border-color:var(--accent); background:var(--accent-tint)}
.drop .big{font-size:17px; font-weight:600; margin:0 0 6px}
.progress{display:flex; align-items:center; gap:12px; padding:16px; background:var(--card);
  border:1px solid var(--card-border); box-shadow:var(--shadow); border-radius:var(--radius); margin-top:14px}
.spinner{width:18px; height:18px; border:2px solid var(--line); border-top-color:var(--accent);
  border-radius:50%; animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.rowactions{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:12px}

/* 비교 막대 */
.bars{display:grid; gap:8px; margin-top:10px}
.bar{display:grid; grid-template-columns:110px 1fr 90px; gap:10px; align-items:center; font-size:14px}
.bar .track{background:var(--panel); border-radius:6px; height:16px; position:relative; overflow:hidden}
.bar .fill{position:absolute; top:0; bottom:0; background:var(--accent)}
.bar .fill.neg{background:var(--bad)}

.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--ink); color:var(--bg);
  padding:10px 16px; border-radius:980px; font-size:14px; z-index:50; max-width:90vw}

/* 상태 색(양/음/근접) — 검산 배지(badge)와는 다른 축이다: 이건 "얼마나 안전한가" 를 말한다 */
.pos{color:var(--ok)}
.neg{color:var(--bad)}
.warnv{color:var(--warn)}
.pill{display:inline-block; font-size:11px; font-weight:700; padding:2px 9px; border-radius:980px; white-space:nowrap}
.pill-ok{background:var(--ok-tint); color:var(--ok)}
.pill-warn{background:var(--warn-tint); color:var(--warn)}
.pill-bad{background:var(--bad-tint); color:var(--bad)}
.pill-gray{background:var(--gray-tint); color:var(--muted)}

/* 비교 표 — 「내 포트폴리오」 행을 시각적으로 고정 앵커로 둔다 */
tr.mine{background:var(--accent-tint); font-weight:650}
tr.mine td{border-bottom:2px solid var(--accent)}
.callout{background:var(--accent-tint); border:1px solid var(--card-border); border-left:4px solid var(--accent);
  border-radius:10px; padding:12px 14px; font-size:13px; margin-top:10px}
.callout.warn{border-left-color:var(--warn)}
.callout b{color:var(--ink)}

/* 구조화상품 상세 카드 내부 값 그리드(계약·위로 올리는 값) */
.sdgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px 16px; margin-bottom:4px}
.sdgrid>div{min-width:0}
.sdgrid>div:first-child{grid-column:span 2}
.sdgrid .l{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; font-weight:600}
.sdgrid .v{font-size:14px; font-weight:600; margin-top:1px; overflow-wrap:anywhere}
.sdgrid .v.missing{font-weight:400; color:var(--muted); font-style:italic}