/* ============================================================================
   포트폴리오 표 — 구조 정본 (app.css에서 분리, 2026-08-05)

   왜 별도 파일인가: 병행 세션들이 app.css를 동시에 편집하다 셀렉터 목록이 병합돼
   td가 inline-flex로 이탈, 표 전체가 무너진 실사고(2026-08-04) 때문이다.
   이 파일은 app.css **뒤에** 로드된다(캐스케이드 우선) — 표의 뼈대(정렬·배지·가드)는
   여기가 정본이며, app.css에 같은 규칙을 다시 만들지 마라 (tests/test_css_sanity.py가 감시).
   ============================================================================ */

/* ---- 대제목 (사용자 지시 2026-08-19 → 2026-08-21 꾸밈) -------------------------
   "이게 이 모듈의 대표구나라는 이미지를 줬으면" → "너무 밋밋하다. 전문가가 꾸민다는 가정으로."

   **더한 것은 셋뿐이다: 가운데, 위 여백, 양옆 헤어라인.**
   크기·굵기·자간은 캐논(--fs-title / 700 / -.02em) 그대로 두었다 — 제목을 꾸민다고
   글자를 건드리기 시작하면 화면마다 다른 제목이 생기고, 그게 "AI가 만든 화면"의 인상이다.
   격은 장식이 아니라 **여백과 균형**에서 나온다(docs/28 모던 럭셔리 · 이 파일의 .pfqkick와 한 문법).

   헤어라인 셋을 손으로 조율했다:
     · 안쪽 끝은 시그니처 청록을 아주 옅게 머금고 **바깥으로 가며 사라진다** — 상자에 갇히지 않는다
     · 길이에 상한(96px)을 둔다 — 넓은 화면에서 선이 끝없이 뻗으면 제목이 아니라 구분선이 된다
     · 좁아지면 선이 먼저 줄고(min-width:0) 글자는 끝까지 남는다
   위 여백이 아래보다 넉넉하다 — 제목은 앞을 비워야 자기 단락을 이끄는 것으로 읽힌다.

   ⚠ `.pfevalh`(두 번째 장의 대제목)와 **같은 규칙을 공유한다.** 하나만 고치지 마라.

   2026-08-21: 이 문법을 나머지 모듈(산업 트렌드·시장은 지금·심리·종목비교·스크리닝·AI vs AI)의
   대제목까지 넓혔다 (사용자 "포트폴리오 잘했다, 같은 스타일로"). app.css에 있던 "크기만 키운"
   파일럿 규칙(2026-08-19)은 여기로 흡수해 지웠다 — 정본이 둘이면 한쪽만 고치는 사고가 난다.
   포트폴리오만 본문 폭(1260px)에 맞춰 좁히고, 나머지는 자기 화면 폭 그대로 가운데를 잡는다
   (다른 모듈엔 포트폴리오의 #pfbody 같은 고정폭 본문이 없어 맞출 대상이 없다). */
#view-portfolio > h2, #view-portfolio .pfevalh,
#view-industry > h2, #view-market > h2, #view-sentiment > h2,
#view-compare > h2, #view-screen > h2, #view-aivsai > h2 {
  display:flex; align-items:center; justify-content:center; gap:16px;
  font-size:var(--fs-title); font-weight:700; letter-spacing:-.02em;
  color:var(--text); text-align:center; word-break:keep-all;
  margin:26px 0 18px;
}
/* 포트폴리오는 대제목을 **버렸다** (사용자 지시 2026-08-29 "아예 없애자 그냥") — 사이드바가
   이미 어느 화면인지 말하고 있고, 가운데 대제목 + 헤어라인은 첫 화면을 한 겹 무겁게 했다.
   화면은 담기 줄로 바로 시작한다. 다른 모듈(#view-industry 등)의 대제목은 그대로다.
   ⚠ 규칙을 지우지 않고 숨긴다 — 위 공유 선택자에 이름이 남아 있어야 나중에 되살리기 쉽다. */
#view-portfolio > h2 { display:none; }
#view-portfolio > h2::before, #view-portfolio > h2::after,
#view-portfolio .pfevalh::before, #view-portfolio .pfevalh::after,
#view-industry > h2::before, #view-industry > h2::after,
#view-market > h2::before, #view-market > h2::after,
#view-sentiment > h2::before, #view-sentiment > h2::after,
#view-compare > h2::before, #view-compare > h2::after,
#view-screen > h2::before, #view-screen > h2::after,
#view-aivsai > h2::before, #view-aivsai > h2::after {
  content:""; flex:0 1 96px; min-width:0; height:1px; border-radius:1px;
}
/* 왼쪽 선은 바깥(왼쪽)으로, 오른쪽 선은 바깥(오른쪽)으로 흐려진다 — 글자 쪽이 진하다 */
#view-portfolio > h2::before, #view-portfolio .pfevalh::before,
#view-industry > h2::before, #view-market > h2::before, #view-sentiment > h2::before,
#view-compare > h2::before, #view-screen > h2::before, #view-aivsai > h2::before {
  background:linear-gradient(90deg, transparent,
             color-mix(in srgb, var(--accent) 34%, var(--line)) 92%);
}
#view-portfolio > h2::after, #view-portfolio .pfevalh::after,
#view-industry > h2::after, #view-market > h2::after, #view-sentiment > h2::after,
#view-compare > h2::after, #view-screen > h2::after, #view-aivsai > h2::after {
  background:linear-gradient(270deg, transparent,
             color-mix(in srgb, var(--accent) 34%, var(--line)) 92%);
}
/* AI vs AI의 부제(<small>)는 제목과 한 줄에 이어 붙는다 — 헤어라인 사이 공간에서 자연히 작게 읽힌다 */
#view-aivsai > h2 small { font-weight:400; }

/* 포트폴리오 화면 = 담기 검색만 — 헤더 전역 검색·최근 칩 숨김 (사용자 확정 2026-08-04) */
body.pfview header .searchwrap, body.pfview header #recent { display:none; }

/* 15열(밸류·성장·기록 → 매도신호·투자노트, plans/011) 표가 창 최대일 때 **가로 스크롤 없이** 들어가게 (사용자 확정 2026-08-05 — app.css의
   860px 상한을 여기서 넓힌다). 좁은 창에서는 .pftblwrap overflow가 기존대로 스크롤을 만든다. */
#pfbody { max-width:1260px; }

/* 14열: 1 종목 · 2 시나리오 = 왼쪽 / 3~10 숫자(…비중·FwdPER·ROE) = 오른쪽 /
   11~14 = AI평가·매도신호·투자노트·삭제(가운데 · 세로도 행 중앙).
   후행 PER 열 폐기로 12~15 → 11~14로 당겨졌다 (2026-08-14).
   ⚠ 열을 더하고 빼면 이 범위를 **반드시 함께** 갱신하라 (tests/test_css_sanity가 파일 건전성은
   지키지만 열 수까지는 모른다). **표가 카드보다 넓으면 카드 안에서 가로 스크롤**한다. */
.pftblwrap { overflow-x:auto; }
/* 헤더 = 시그니처 청록 바 + 흰 글자 — 종목 스크리닝(.scrtbl th)과 같은 문법.
   **카드 폭을 좌우로 꽉 채워 마감한다** (사용자 지시 2026-08-20): 양끝을 둥글리고
   좌우에 여백을 남겼더니 바가 카드 안에 떠 있는 딱지처럼 보여 마감이 어설펐다.
   그래서 카드의 좌우 안쪽 여백을 0으로 두고(아래 .pftblwrap), 글자가 벽에 붙지 않도록
   **첫 열·끝 열에만** 그만큼의 여백을 되돌려 준다. */
.agcard .agtbl.pftbl th { white-space:nowrap; vertical-align:middle;
  background:var(--accent); color:rgba(255,255,255,.92); border-bottom:0; padding:9px 8px;
  border-radius:0; }
.pftblwrap { padding-left:0; padding-right:0; }
.agcard .agtbl.pftbl th:first-child, .agcard .agtbl.pftbl td:first-child { padding-left:14px; }
.agcard .agtbl.pftbl th:last-child, .agcard .agtbl.pftbl td:last-child { padding-right:14px; }
.agcard .agtbl.pftbl th:nth-child(-n+2), .agcard .agtbl.pftbl td:nth-child(-n+2) { text-align:left; }
.agcard .agtbl.pftbl th:nth-child(n+3):nth-child(-n+5),
.agcard .agtbl.pftbl td:nth-child(n+3):nth-child(-n+5) { text-align:right; white-space:nowrap; }
/* 6~10열(평단가·보유수량·비중·PER·ROE)은 **가운데** 정렬 (사용자 지시 2026-08-19 —
   첨부에 세로선을 그어 준 그 열들). 자릿수가 한두 자리뿐이라 오른쪽에 붙여도 열의
   중심이 흔들려 어긋나 보였다. 3~5열(현재 주가·평가금액·수익률)은 자릿수 비교가
   중요해 오른쪽 정렬을 지킨다. */
.agcard .agtbl.pftbl th:nth-child(n+6):nth-child(-n+10),
.agcard .agtbl.pftbl td:nth-child(n+6):nth-child(-n+10) { text-align:center; white-space:nowrap; }
.agcard .agtbl.pftbl td.hold { text-align:center; }
.agcard .agtbl.pftbl th:nth-child(n+11), .agcard .agtbl.pftbl td:nth-child(n+11) { text-align:center; }
/* 우측 4열은 아이콘·배지뿐이라 첫 줄이 아니라 **행 한가운데**에 나란히 서야 예쁘다
   (사용자 확정 2026-08-14). 아래 td{vertical-align:top}보다 구체적이어야 이긴다. */
/* 4열(평가금액)부터 끝(×)까지 **행 한가운데**에 나란히 선다 (사용자 지시 2026-08-19 —
   첨부에 빨간 선으로 그어 준 그 줄). 앞의 세 열(종목·시나리오·현재 주가)만 두 줄짜리라
   위 맞춤을 유지한다. 아래 td{vertical-align:top}보다 구체적이어야 이긴다. */
.agcard .agtbl.pftbl td:nth-child(n+3) { vertical-align:middle; }
/* 헤더 라벨은 **전 열 가운데** (사용자 지시 2026-08-26 "컬럼 인덱스 중간정렬") — 본문 정렬
   (숫자 우측·이름 좌측)은 그대로 두고 청록 바의 라벨만 가운데 세운다.
   :nth-child(n) 두 번은 장식이 아니다 — 위의 3~5열 th 규칙이 의사클래스 둘
   (:nth-child(n+3):nth-child(-n+5), 특이도 0,5,1)이라 하나로는 진다 (렌더 실측 2026-08-26). */
.agcard .agtbl.pftbl thead th:nth-child(n):nth-child(n) { text-align:center; }
/* 비중 0% (미입력 = 0으로 간주) — 값이 아니라 초대장이므로 옅게 */
.pftbl .w0 { color:color-mix(in srgb, var(--dim) 65%, transparent); }
/* 정렬 세그먼트 — 비중·시총·시나리오 셋뿐 (사용자 확정: 모든 열 정렬은 소음) */
/* 표 바로 위 오른쪽 (사용자 지시 2026-08-21) — 카드가 좌우 여백 0이라 이 줄이 스스로 준다 */
.pfsortrow { display:flex; align-items:center; justify-content:flex-end; padding:0 14px 9px; }
/* '정렬' = 세그먼트 안의 **머리칸** (사용자 재지시 2026-08-26 "정렬이 목록이고 옆 3개가
   옵션이라는 느낌") — 밖에 둔 글자는 지나가는 텍스트로 읽혀서, 회색 바탕 칸으로 묶어
   "이 무리의 이름"임을 형태로 말한다. 클릭 대상이 아니므로 버튼이 아니라 i다. */
.pfsortlb { display:inline-flex; align-items:center; gap:5px; align-self:stretch;
  padding:3px 10px; font-style:normal; font-size:var(--fs-lab); font-weight:600;
  color:var(--dim); background:var(--panel2); border-right:1px solid var(--line); }
.pfsortlb svg { width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; }
.pfsort { display:inline-flex; align-items:center; border:1px solid var(--line);
  border-radius:8px; overflow:hidden; }
.pfsort button { font:inherit; font-size:12px; padding:3px 11px; border:0; cursor:pointer;
  background:transparent; color:var(--dim); }
.pfsort button + button { border-left:1px solid var(--line); }
.pfsort button.on { background:var(--panel2); color:var(--text); font-weight:700; }
.pfsort button:hover { color:var(--accent); }

/* **모든 셀을 첫 줄에 맞춘다** (사용자 확정 2026-08-03 "행 줄 정렬을 신경 써서") — 가운데
   정렬이면 두 줄짜리 셀(시나리오·현재가) 옆에서 한 줄짜리 숫자가 아래로 내려가 어긋나 보인다. */
.agcard .agtbl.pftbl td { vertical-align:top; padding-top:9px; padding-bottom:9px; }
.agcard .agtbl.pftbl tbody tr:first-child td { padding-top:13px; }

/* 종목 사이 옅은 회색 구분선 (사용자 확정 2026-08-04) — 마지막 행은 카드 여백이 마감 */
.agcard .agtbl.pftbl tbody tr:not(:last-child) td {
  border-bottom:1px solid color-mix(in srgb, var(--line) 62%, transparent); }

/* 첫 줄의 **글상자 높이를 하나로** 통일 — 폰트 크기가 다르면(종목명 13px vs 시나리오 11.5px)
   같은 top에서 시작해도 글자 기준선이 어긋나 보인다. 18px으로 못박아 한 줄에 세운다.
   ⚠ 이 목록에 **셀(td·th) 자체를 넣지 마라** — 셀의 display가 바뀌면 표 그리드에서 이탈해
   열이 통째로 무너진다 (2026-08-04 실사고: td.num에 inline-flex가 붙어 표 전체 붕괴). */
.pftbl td.nm a, .pftbl td.th .thline, .pftbl td.num b, .pftbl .pfhold { line-height:18px; }
.pftbl td.num { line-height:18px; }
.pftbl td.nm a, .pftbl td.num b { display:inline-block; }

/* 매도신호 셀 (plans/011) — 되돌릴 조건 하나당 등 하나, 최대 3 + "+N".
   색 정본은 app.css의 팝오버 신호등(.sg*)과 동일 의미: 초록=순항·주황=주의·빨강=발동.
   여기는 표 셀용 크기·배치만 정한다. 점선 회색(sgq) = 직접 확인·미점검(모름을 모름으로). */
.pftbl td.sig .sigrow { display:inline-flex; align-items:center; gap:5px; padding:4px 6px;
  border-radius:8px; cursor:pointer; }
.pftbl td.sig .sigrow:hover { background:var(--panel2); }
.pftbl td.sig .fdot { width:9px; height:9px; border-radius:50%; flex:0 0 9px; }
.pftbl td.sig .fdot.sgok { background:var(--accent); }
.pftbl td.sig .fdot.sgwarn { background:#d97706; }
.pftbl td.sig .fdot.sgfired { background:var(--up); }
.pftbl td.sig .fdot.sgq { background:transparent; border:1.5px dashed var(--dim);
  width:10px; height:10px; }
.pftbl td.sig .sigmore { font-size:var(--fs-sub); color:var(--dim); font-variant-numeric:tabular-nums; }

/* 노트 셀 — 기록 개수 배지. 없으면 옅게(초대), 있으면 또렷하게(내 기록) */
.pftbl .pfnote { position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; padding:0; border:0; border-radius:8px; background:transparent;
  color:var(--text); cursor:pointer; }        /* 요청1 — 진입 아이콘을 또렷하게 */
.pftbl .pfnote svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; }
.pftbl .pfnote.empty { color:var(--dim); opacity:.55; }
.pftbl .pfnote:hover { background:var(--panel2); color:var(--accent); opacity:1; }
/* 기록 개수 — 초록 원 배지는 시선을 뺏는다(사용자 확정 2026-08-14). 아이콘 옆에
   작은 회색 숫자로만. 버튼 폭은 숫자 자리만큼만 늘어난다 */
.pftbl .pfnote { width:auto; min-width:32px; gap:3px; padding:0 5px; }
.pftbl .pfnote em { font-style:normal; font-size:var(--fs-lab); font-weight:600; line-height:1;
  color:var(--dim); font-variant-numeric:tabular-nums; }
.pftbl .pfnote:hover em { color:var(--accent); }

/* 등급 배지 재설계 (사용자 확정 2026-08-04): <i> 기본 이탤릭 제거·정사각 둥근 박스·글자 중앙.
   색: A=초록 / B=연두 / C=주황(신호등 '주의'와 동일) / D=회색 / F=진한 회색(무조건).
   ※ pPER 요약 바의 sA~sD 세그먼트는 별개 계약(헌장 D≤10% 경고=빨강)이라 건드리지 않는다.
   특이도를 base(.agcard .agtbl .bk)보다 높여 두어 순서·병합에 흔들리지 않게 한다. */
.agcard .agtbl.pftbl .bk { display:inline-flex; align-items:center; justify-content:center;
  width:21px; height:21px; padding:0; border-radius:6px;
  font-style:normal; font-size:var(--fs-lab); line-height:1; }
/* AI 평가 학점 = **다섯 색 성적표** (사용자 확정 2026-08-22).
   진하기만 다른 자주 램프(2026-08-21)는 A와 B가 한눈에 안 갈렸다. 학점은 다섯 칸뿐이라
   **칸마다 다른 색**을 주는 편이 읽기 쉽다 — 순서는 배지에 적힌 글자(A·B·C·D·F)가 이미
   말하므로, 색은 '구분'만 맡으면 된다.

   사용자 안(보라·녹색·주황·빨강·짙은회색)에서 **두 곳만 조정했다**:
     · B 녹색 → **라임 계열(#4d7c0f)**. 순수 녹색은 표 머리 바(--accent 에메랄드)와 같은
       가족이라 또 헤더의 조각처럼 보인다 — 2026-08-20에 A를 페트롤로 옮긴 것과 같은 사고다.
     · D 빨강 → **깊은 크림슨(#b91c1c)**. 밝은 빨강은 이 화면에서 '상승'이라는 뜻이 이미
       박혀 있다(--up #ff3b30). 톤을 낮춰 같은 행의 수익률 빨강과 갈라 둔다.

   흰 글자 대비: A 6.5 · B 5.3 · C 3.9 · D 6.4 · F 10.4 — 11px 굵은 글자에 모두 충분하다.

   ⚠ **표에만 걸지 않는다.** 투자노트 밴드(.pfnbi)도 같은 `.bk.s*`를 쓰는데 예전 규칙이
   `.agcard .agtbl.pftbl` 아래에만 있어 밴드에서는 배경이 안 칠해졌다 — 흰 글자가 투명
   바탕에 얹혀 **글자가 안 보였다**(2026-08-22 발견). 이제 배지 어디서든 같은 색이다. */
/* 배지 뼈대도 표 밖에서 함께 산다. 색만 옮겼더니 투자노트 밴드에서 **글자가 검게** 남았다
   (흰 글자 규칙이 `.agcard .agtbl .bk`에 묶여 있었다 — 실측 2026-08-22: 보라 바탕에
   #16161c). 표 안에서는 위의 더 구체적인 규칙이 크기를 이긴다. */
.bk { display:inline-flex; align-items:center; justify-content:center;
  min-width:21px; height:21px; padding:0 4px; border-radius:6px;
  font-style:normal; font-size:var(--fs-lab); font-weight:700; line-height:1; color:#fff; }
.bk.na { width:auto; height:auto; padding:0; background:transparent; color:var(--dim); }

.bk.sA { background:#6d28d9; }      /* 보라 — 가장 좋음 */
.bk.sB { background:#65a30d; }      /* 연두 — 사용자 지시 2026-08-26 "좀 더 연두로" (#4d7c0f에서 밝힘) */
.bk.sC { background:#d97706; }      /* 주황 — 주의 */
.bk.sD { background:#b91c1c; }      /* 깊은 빨강 — 나쁨 */
.bk.sF { background:#3f3f46; }      /* 짙은 회색 — 판정 밖 */
.agcard .agtbl.pftbl .bk.na { width:auto; height:auto; background:transparent; }

/* 신용융자 표식 (사용자 지시 2026-08-21 "너무 튀지 않게") — **색을 쓰지 않는다.**
   빨강이면 경고가 되는데 신용은 사실이지 경고가 아니다. 회색 윤곽 하나로 사실만 말하고,
   판단은 사용자에게 남긴다. 업종 줄에 붙어 종목명보다 항상 뒤에 읽힌다. */
.pfmg { display:inline-block; margin-left:6px; padding:0 5px; font-style:normal;
  font-size:var(--fs-badge); line-height:1.6; letter-spacing:.02em;
  color:var(--dim); border:1px solid var(--line); border-radius:3px;
  vertical-align:1px; cursor:help; }
.pftrdrow .pfmg { margin-left:5px; cursor:default; }

/* 매매기록 폼의 '신용융자' 체크 — 저장 버튼 앞, 조용한 한 칸 */
.pftmargin { display:inline-flex; align-items:center; gap:5px; cursor:pointer;
  font-size:var(--fs-sub); color:var(--dim); white-space:nowrap; user-select:none; }
.pftmargin input { width:13px; height:13px; margin:0; accent-color:var(--accent); cursor:pointer; }
.pftmargin:hover { color:var(--text); }

/* 구조 가드 (강건화, 2026-08-04) — 표의 셀은 무슨 규칙이 와도 셀이어야 한다.
   위 사고의 재발 방지: 셀렉터 병합·편집 충돌로 셀 display가 바뀌어도 표는 무너지지 않는다. */
.agcard .agtbl.pftbl td, .agcard .agtbl.pftbl th { display:table-cell !important; }

/* 15열을 카드 폭 안에 담기 위한 압축 — 넘치면 가로 스크롤이지만, 평소엔 안 넘치게 */
.agcard .agtbl.pftbl th, .agcard .agtbl.pftbl td { padding-left:4px; padding-right:4px; }
.pftbl td.th, .pftbl td.th .thline { max-width:180px; }
.pftbl td.th { min-width:160px; }
.pftbl td:nth-child(6), .pftbl td:nth-child(7) { min-width:60px; }   /* 평단가 · 보유수량 */
.agcard .agtbl.pftbl td.nm { max-width:104px; }

/* 숫자 셀 = 메인 숫자 + 괄호 보조 (사용자 확정 2026-08-03 "메인 숫자, 아래 괄호로 등락") */
/* 숫자는 **굵게 쓰지 않는다** (사용자 지시 2026-08-19 "볼드 있으니까 복잡해").
   한 행에 굵은 숫자가 넷(현재가·평가금액·수익률·비중)이면 어느 것도 주인공이 아니고
   표만 시끄러워진다. 행의 주인공은 종목명 하나로 충분하다. */
.pftbl td.num b { font-weight:400; font-variant-numeric:tabular-nums; }
.pftbl td.num small { display:block; font-size:var(--fs-sub); color:var(--dim);
  font-variant-numeric:tabular-nums; margin-top:1px; }

/* 현재 주가 셀 — **값이 행의 한가운데 선에 서고, 오늘 등락은 그 아래로 흘러내린다**
   (사용자 지시 2026-08-19 "빨강펜으로 그은 중앙 정렬에 오게 하고 등락은 그 아래 작게").
   등락줄을 정상 흐름에 두면 두 줄이 통째로 가운데 정렬돼 값이 선 위로 뜬다.
   그래서 절대배치로 띄운다 — 셀의 높이 계산에 끼지 않아야 값이 선에 정확히 앉는다.
   ⚠ 이 래퍼(.pxwrap)가 data-pfpx를 갖는다. 장중 틱(pfTickPatch)이 여기에 붙인다. */
.pftbl td.num.pxcell { overflow:visible; }
.pftbl .pxwrap { position:relative; display:inline-block; }
.pftbl .pxwrap small { position:absolute; right:0; top:100%; margin-top:0;
  font-size:9px; line-height:1.4; white-space:nowrap; }
  /* 9px — 타이포 캐논의 하한(--fs-badge 10.5px)보다 낮은 **유일한 예외**다
     (사용자 지시 2026-08-19). 읽는 문장이 아니라 값에 딸린 부호라 작아도 된다.
     다른 곳에 9px를 복사해 쓰지 마라 — 여기만이다. */
.pftbl .pxwrap small.u { color:var(--up); }      /* 상승 = 빨강 (의미색 불변) */
.pftbl .pxwrap small.d { color:var(--down); }    /* 하락 = 파랑 */
.pftbl td.num small.u { color:var(--up); } .pftbl td.num small.d { color:var(--down); }

/* ============================================================================
   포트폴리오 성격 진단 카드 — 알파·베타 (plans/009, 사용자 확정 2026-08-05)
   산점도(ECharts) + 헤드라인 3종 + 종목별 β 막대 + AI 코멘트(.rsum-* 재사용은 app.css)
   ============================================================================ */
.pfab { margin-top:10px; }
.pfabhead { display:flex; align-items:center; justify-content:space-between; gap:12px; }
/* 제목은 전 화면 공통 캐논(app.css `.page h3` — 15.5px·700·검정)을 그대로 쓴다. 카드마다
   크기·색을 다시 정하지 않는다 (사용자 확정 2026-08-06 "다른 페이지에서도 동일한 규칙").
   카드 부제(작은 회색 설명)는 폐기 — 읽으라는 건지 모를 글은 없는 게 낫다. */
.pfabhead h3 { margin:0; }
.pfabtt { flex:1; min-width:0; }
.pfabgrid { display:grid; grid-template-columns:minmax(0,1fr) 264px; gap:18px; margin-top:10px; }
.pfabscw { min-width:0; }
#pfabsc { height:250px; min-width:0; }
.pfabcap { font-size:var(--fs-sub); color:var(--dim); margin-top:6px; text-align:center; }
.pfabcap i { display:inline-block; width:14px; height:0; border-top:2px solid var(--accent);
  vertical-align:middle; margin:0 4px 0 2px; }
.pfabcap i.lm { border-top:1px dashed var(--dim); }
.pfabkey { display:flex; flex-direction:column; gap:14px; justify-content:center; }
.pfabk small { display:block; color:var(--dim); font-size:var(--fs-sub); letter-spacing:.02em; }
.pfabk b { display:block; font-size:21px; font-weight:700; font-variant-numeric:tabular-nums;
  line-height:1.3; }
.pfabk b.u { color:var(--up); } .pfabk b.d { color:var(--down); }
.pfabk span { display:block; font-size:var(--fs-sub); color:var(--text); margin-top:3px;
  line-height:1.45; word-break:keep-all; }   /* "벌었어/요"처럼 어절 중간에서 꺾이지 않게.
     숫자 밑 한 줄이 이 카드에서 가장 많이 읽히는 문장이다 — 10.5px 회색은 폐기(2026-08-06) */
/* 정의 = 한 줄에 α|β 나란히, 산점도 figure 폭까지만 (사용자 확정 2026-08-05).
   글리프 68px는 "촌스럽다·균형 붕괴" 반려(4차) — 크기가 아니라 **세리프 이탤릭의 서체 대비 +
   시그니처 색**으로 격을 낸다. 5차(2026-08-06 "밋밋하다 · 궁금증을 자아내라"): 글리프를 30px
   시그니처 색으로 키우고, 두 정의 사이를 세로 헤어라인으로 나눈 뒤, 설명을 **읽히는 크기의
   질문 한 줄**로 바꿨다. 흐릿한 회색 11.5px 설명은 폐기 — 이름은 검정 볼드, 질문도 검정. */
.pfabdef { display:grid; grid-template-columns:1fr 1fr; margin-top:18px; margin-bottom:4px;
  max-width:calc(100% - 282px); }   /* 우측 헤드라인 열(264+18px) 침범 금지 */
.pfabdefrow { display:flex; align-items:flex-start; gap:14px; min-width:0; padding-right:26px; }
.pfabdefrow + .pfabdefrow { padding:0 0 0 26px; border-left:1px solid var(--line); }
.pfabbig { font-family:Georgia, "Times New Roman", serif; font-style:italic; font-size:30px;
  line-height:1; color:var(--accent); flex:0 0 24px; text-align:center;
  transform:translateY(-2px); }
.pfabdefrow .t { min-width:0; }
.pfabdefrow .t b { display:block; font-size:14px; font-weight:700; color:var(--text);
  letter-spacing:-.01em; }
.pfabdefrow .t span { display:block; font-size:13px; color:var(--text); margin-top:3px;
  line-height:1.5; word-break:keep-all; }
/* 하단 = 좌(신호·막대) | 우(AI 박스) 1:1 (사용자 확정 2026-08-05 배치).
   AI 응답은 재무 총평과 같은 .rsum 박스 문법(사용자 확정 2026-08-05 2차 — "세 번째 캡처 스타일").
   M2의 .rsum 높이 상한(300px)은 이 카드엔 안 맞아 푼다 — 리포트가 잘리면 안 된다. */
.pfabbot { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:16px; }
.pfabbot .pfabai { margin-top:0; padding-top:0; border-top:none; }
.pfab .rsum, .pfadv .rsum { max-height:none; min-height:0; justify-content:flex-start; }
/* 종목별 β 막대 — em = β=1(시장) 기준선. 세부 수치(α·R²·비중)는 툴팁으로 (설명 접기 원칙) */
.pfabbarhead { font-size:12.5px; font-weight:700; }
.pfabbarhead small { color:var(--dim); font-weight:400; margin-left:7px; font-size:var(--fs-sub); }
.pfabbars { margin-top:8px; display:flex; flex-direction:column; gap:5px; }
.pfabbar { display:flex; align-items:center; gap:9px; font-size:var(--fs-lab); }
.pfabbar .nm { flex:0 0 90px; text-align:right; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.pfabbar .tr { position:relative; flex:1; height:10px; border-radius:3px;
  background:color-mix(in srgb, var(--line) 40%, transparent); }
.pfabbar .tr i { position:absolute; left:0; top:0; bottom:0; border-radius:3px;
  background:color-mix(in srgb, var(--accent) 45%, transparent); }
.pfabbar .tr i.hi { background:var(--accent); }
.pfabbar .tr em { position:absolute; top:-2px; bottom:-2px; width:1px; background:var(--dim);
  opacity:.55; }
.pfabbar b { flex:0 0 40px; text-align:right; font-weight:600; font-variant-numeric:tabular-nums; }
.pfabbar.na b { color:var(--dim); font-weight:400; }
.pfabfoot { margin-top:12px; font-size:var(--fs-sub); color:var(--dim); }
.pfabai { margin-top:12px; padding-top:10px;
  border-top:1px solid color-mix(in srgb, var(--line) 62%, transparent); }
.pfabai h4 { margin:0 0 6px; font-size:var(--fs-sub); font-weight:600; color:var(--dim); }
/* ---- 모자이크 프리뷰 (사용자 확정 2026-08-05 "버튼 딸랑 하나는 별로") ----
   닫힘 상태 = 결과 레이아웃의 실루엣을 강한 블러로 깔고, 그 위 중앙에 CTA.
   "여기에 무엇이 나타나는지"를 화면 스스로 말하게 한다 — 실루엣은 전부 가짜 표본. */
.pfmask { position:relative; margin-top:12px; }
/* 두 카드('포트폴리오 평가하기'·'AI 포트폴리오 개선 시뮬레이션')를 **미리보기 상태에서
   같은 높이로** 만든다 (사용자 요청 "위의 박스와 아래의 박스 크기를 같게 하라").
   그냥 두면 어긋나는 이유가 둘이었다 — ①미리보기를 끝까지 그려 1,528px·1,337px로 달랐고
   ②평가 카드에만 α·β 용어 설명이 있어 76px 더 길었다(실측).
   카드 높이를 고정하고 미리보기가 남는 공간을 채우게 하면 둘 다 해결된다. 미리보기는
   뭐가 나올지 감만 주는 자리표시자라 늘거나 잘려도 잃는 정보가 없다.
   min-height가 아니라 height인 이유: 미리보기 실루엣이 원래 1,500px대라 하한만 주면
   내용이 카드를 그대로 밀어 올린다(실측 782·653px). 높이를 못 박아야 남는 공간에 맞춰 잘린다.
   `:has(.pfmask)` — 계산이 끝나면 이 규칙은 풀리고 내용만큼의 높이를 갖는다. */
.pfab:has(.pfmask), .pfadv:has(.pfmask) {
  display:flex; flex-direction:column; height:272px; }
  /* 272px = 원래 높이(544px)의 절반 (사용자 지시 2026-08-19). 아직 아무것도 계산하지 않은
     카드가 화면의 절반을 먹고 있었다. 버튼을 누르면 .pfmask가 사라지며 이 규칙이 풀려
     내용만큼의 높이로 되돌아간다 — 실행 뒤 높이는 예전 그대로다.
     두 카드(알파·베타, AI 점검)가 같은 규칙을 쓰므로 접힌 높이도 서로 같다. */
.pfab:has(.pfmask) > :last-child, .pfadv:has(.pfmask) > :last-child {
  flex:1; display:flex; flex-direction:column; min-height:0; }
.pfab .pfmask, .pfadv .pfmask { flex:1; min-height:0; overflow:hidden; }
.pfab .pfmask .pfmaskc, .pfadv .pfmask .pfmaskc {   /* 아래로 갈수록 흐려져 자른 티가 안 나게 */
  -webkit-mask-image:linear-gradient(#000 52%, transparent 96%);
  mask-image:linear-gradient(#000 52%, transparent 96%); }
/* blur 6px·opacity .65 — "너무 진한 모자이크" 반려(2026-08-05), 실루엣이 조금 더 읽히게 */
.pfmaskc { filter:blur(6px) saturate(.85); opacity:.65; pointer-events:none; user-select:none; }
.pfmaskov { position:absolute; inset:0; display:flex; flex-direction:column; gap:9px;
  align-items:center; justify-content:center; text-align:center; padding:0 24px; }
.pfmaskov .pfthbtn.big { padding:9px 26px; font-size:13px; min-width:248px; }
  /* min-width — 두 카드 CTA("포트폴리오 평가하기"/"AI 포트폴리오 개선 시뮬레이션")의
     크기를 맞춘다 (사용자 확정 2026-08-06 "통일성") */
/* 버튼 밑 줄은 **상태·오류일 때만** 나온다 (평상시 안내 문구는 폐기 — 사용자 지시 2026-08-06
   "읽으라는 건지 말라는 건지 모를 정도로 작고 흐릿하면 없는 게 낫다"). 나올 땐 읽히는 크기로. */
.pfmaskov small { font-size:12.5px; color:var(--text); word-break:keep-all; }
.pfabsil { width:100%; height:250px; display:block; }
.silbar { display:inline-block; height:10px; border-radius:4px; vertical-align:middle;
  background:color-mix(in srgb, var(--dim) 55%, transparent); }
.pfabbar .nm .silbar { height:9px; }

/* ---- 평가·개선 묶음 (사용자 지시 2026-08-19) --------------------------------
   표 → 여기 사이를 넉넉히 벌려 "여기부터는 다른 이야기"임을 여백으로 먼저 말한다.
   대제목 아래 왼쪽 세로선이 두 카드를 품어, 둘이 이 제목의 하위임을 눈으로 알린다. */
/* 위 실선은 걷었다 (2026-08-21) — 대제목이 제 양옆에 헤어라인을 갖게 되면서
   바로 위 전폭 실선과 선이 두 겹으로 읽혔다. 표와의 단절은 여백이 맡는다. */
.pfeval { margin-top:46px; }
/* 섹션 대제목 — 모듈 제목(22px)보다 한 단 아래, 하위 카드 제목(14px)보다 한 단 위.
   예전엔 17px로 모듈 제목과 **같은 크기**라 둘이 나란히 읽혔다 (사용자 지적 2026-08-19). */
/* 대제목 — 화면 맨 위 "포트폴리오"와 **한 규칙을 공유한다**(위 `#view-portfolio > h2` 블록).
   값이 갈리면 두 장의 제목이 다른 화면처럼 보인다. 여기서는 이 장에만 필요한 여백만 조정한다:
   이 묶음은 표에 딸린 섹션이 아니라 화면의 두 번째 장이라, 표와 넉넉히 끊고 시작한다. */
#view-portfolio .pfevalh { margin-top:0; }
.pfevalkids { position:relative; margin-top:14px; padding-left:16px; }
.pfevalkids::before {            /* 하위임을 말하는 세로선 — 위에서 아래로 옅어진다 */
  content:""; position:absolute; left:0; top:6px; bottom:6px; width:2px; border-radius:2px;
  background:linear-gradient(color-mix(in srgb, var(--accent) 42%, transparent),
                             color-mix(in srgb, var(--accent) 8%, transparent)); }
/* 하위 카드의 제목은 대제목보다 한 단계 낮다 — 같은 크기면 위아래가 아니라 나란히 읽힌다 */
.pfevalkids .pfabhead h3 { font-size:14px; color:var(--dim2); font-weight:700; }
.pfevalkids > .agcard + .agcard { margin-top:12px; }

/* ---- AI 포트폴리오 점검 (핵심 기능 4) — 숏 리포트: 신호 + 진단 한 장 ---- */
.pfadv { margin-top:10px; }
.pfadvl { list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:7px; }
.pfadvl li { display:flex; align-items:flex-start; gap:9px; font-size:var(--fs-sub); word-break:keep-all; }
.pfadvl li i { flex:0 0 7px; height:7px; border-radius:50%; margin-top:5px; background:var(--dim); }
.pfadvl li.warn i { background:#d97706; }         /* 신호등 '주의'와 같은 주황 — 색 문법 통일 */
.pfadvl li.warn span { color:var(--text); }
.pfadvl li.info span { color:var(--dim); }
.pfadvok { margin-top:12px; font-size:var(--fs-sub); color:var(--dim); }
.pfadvrep { margin-top:2px; }
/* 시뮬레이션 카드 부제는 폐기(2026-08-06) — 무슨 카드인지는 제목과 버튼이 이미 말한다.
   크기를 키워 살리려 했던 시도(11→12px, 2026-08-05)가 실패했고, 답은 삭제였다. */

/* ---- 2·3단계: 타입 선택·의도 입력·시뮬 결과 (plans/010) ---- */
.psim { margin-top:16px; padding-top:14px;
  border-top:1px solid color-mix(in srgb, var(--line) 62%, transparent); }
.psim-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-top:10px; }
.psim-card { font:inherit; text-align:left; cursor:pointer; padding:10px 12px; border-radius:10px;
  border:1px solid var(--line); background:var(--panel2); color:var(--text); }
.psim-card b { display:block; font-size:12.5px; }
/* 고르는 근거가 되는 문장 — 하한선 12px·본문색 (docs/28 선언 ⑨) */
.psim-card span { display:block; font-size:var(--fs-sub); color:var(--dim2); margin-top:4px;
  line-height:1.45; word-break:keep-all; }
.psim-card.on { border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 9%, transparent); }
.psim-card:disabled, .psim-intent input:disabled, #psimgo:disabled { opacity:.55; cursor:default; }
.psim-intent { display:flex; gap:10px; margin-top:10px; }
.psim-intent input { flex:1; min-width:0; font:inherit; font-size:var(--fs-sub); padding:8px 12px;
  border-radius:9px; border:1px solid var(--line); background:var(--panel2); color:var(--text); }
/* 예시 문장은 회색으로 — 클릭하면 사라지고 사용자가 쓴 게 남는다(브라우저 기본 동작).
   설명문이 아니라 **그대로 써도 되는 예시**여야 무엇을 적으면 되는지 즉시 전달된다
   (사용자 확정 2026-08-05). 설명은 아래 .psim-hint가 맡는다. */
.psim-intent input::placeholder { color:var(--dim); opacity:.75; }
.psim-hint { margin-top:7px; font-size:var(--fs-lab); line-height:1.55; color:var(--dim); word-break:keep-all; }
/* 접힘 상태 — 진단과 설정이 한 화면에 겹쳐 보이지 않게 버튼 하나로 (사용자 "이중 구조가 별로다") */
.psim-shut { display:flex; flex-direction:column; align-items:center; gap:8px; padding:6px 0 2px; }
.psim-shut #psimopen { display:inline-flex; align-items:center; gap:7px; }
.psim-shut small { font-size:var(--fs-lab); color:var(--dim); text-align:center; word-break:keep-all; }
/* 요구사항 표기(승인 후 요약 줄) + 서브창(모달) — 담기 서브창(.pftrdbox) 문법 위에 얹는다 */
.psim-intentline { margin-top:9px; font-size:var(--fs-sub); color:var(--dim); word-break:keep-all; }
#pfsimov { position:fixed; inset:0; z-index:210; display:flex; align-items:center;
  justify-content:center; padding:24px; background:rgba(0,0,0,.42); }   /* #pftrdov 미러 */
/* 서브창은 **담기 서브창(#pfaddov)과 같은 문법**을 그대로 쓴다 (사용자 확정 2026-08-06 9차
   "이건 너무 촌스럽다 · 다른 곳에서의 스타일과 동일하게").
   폐기한 것: 높이 1.5배(min-height 620) + 자식마다 margin-top:auto로 여백 배분 + 절대배치 큰 X.
   높이를 늘리고 그 공백을 auto로 나눠 담으니 카드와 입력과 버튼이 서로 떨어진 섬이 됐다 —
   그게 촌스러움의 정체다. 여백은 '남는 높이를 나누는 것'이 아니라 '요소 사이 간격을 정하는 것'.
   답답하지 않게: 담기 창(500)보다 넓은 640 + 표준보다 한 뼘 큰 패딩 · 1×3은 유지. */
.psim-modal { width:min(640px, 100%); padding:24px 26px 22px; }
.psim-modal .pftrdhead b { font-size:16px; }              /* #pfaddov와 같은 제목 크기 */
.psim-modal .pfaddguide { margin:0 0 16px; }              /* 표준 위치 — 제목 바로 아래 */
/* 타입 3택은 **가로 1×3** (사용자 확정 2026-08-06 5차 — 세로 반려) */
.psim-modal .psim-grid { gap:10px; margin-top:0; }
.psim-modal .psim-card { padding:12px 13px; }
.psim-modal .psim-intent { margin-top:14px; }
.psim-modal .psim-intent input { padding:10px 13px; font-size:13px; border-radius:10px; }
.psim-modal #psimok { margin-top:16px; width:100%; padding:9px 0; font-size:13px; }
/* 프롬프트 창 인식 = 주비스 펫이 입력 자리에 서 있다 (사용자 확정 — "메모창 같아" 반려) */
.psim-prompt { align-items:center; gap:12px; }
.psim-pet { flex:0 0 36px; width:36px; height:36px; object-fit:contain; }
.psim-res { margin-top:14px; }
.psim-acts { width:100%; border-collapse:collapse; font-size:var(--fs-sub); }
.psim-acts td { padding:6px 8px; vertical-align:top;
  border-bottom:1px solid color-mix(in srgb, var(--line) 50%, transparent); }
.psim-acts td.nm { font-weight:600; }
.psim-acts td.nm small { display:block; color:var(--dim); font-size:var(--fs-badge); font-weight:400; }
.psim-acts td.num { white-space:nowrap; font-variant-numeric:tabular-nums; }
.psim-acts td.rsn { color:var(--dim); word-break:keep-all; }
.psim-b { display:inline-flex; align-items:center; justify-content:center; min-width:32px;
  height:19px; padding:0 6px; border-radius:6px; font-style:normal; font-size:var(--fs-badge);
  font-weight:700; color:#fff; }
.psim-b.badd { background:var(--accent); }
.psim-b.bup { background:#65a30d; }
.psim-b.bdn { background:#d97706; }
.psim-b.bkp { background:transparent; color:var(--dim); border:1px solid var(--line);
  font-weight:500; }
.psim-cmp { width:100%; border-collapse:collapse; font-size:var(--fs-sub); margin-top:4px; }
.psim-cmp th { text-align:right; font-size:var(--fs-th); color:var(--dim); font-weight:600;
  padding:4px 8px; }
.psim-cmp td { padding:5px 8px;
  border-bottom:1px solid color-mix(in srgb, var(--line) 45%, transparent); }
.psim-cmp td.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.psim-cmp .win { color:var(--accent); margin-right:4px; font-size:9px; vertical-align:1px; }
@media (max-width: 920px) { .psim-grid { grid-template-columns:1fr; } }

@media (max-width: 920px) {
  .pfabgrid, .pfabbot, .pfabdef { grid-template-columns:1fr; }
  .pfabdef { max-width:none; row-gap:10px; }
  /* 한 열로 접히면 두 정의는 위아래가 된다 — 세로 헤어라인·좌여백은 α와 β의 시작선을
     어긋나게 만든다(실측 2026-08-30). 구분은 행 간격으로 충분하다. */
  .pfabdefrow { padding-right:0; }
  .pfabdefrow + .pfabdefrow { padding:0; border-left:none; }
  .pfabbot .pfabai { border-left:none; padding-left:0; padding-top:10px;
    border-top:1px solid color-mix(in srgb, var(--line) 62%, transparent); }
}

/* ============================================================================
   투자노트 서브창 v2 (plans/011, 사용자 확정 2026-08-06 "에버노트를 거의 그대로")
   좌 = 노트 목록 / 우 = 툴바 + 제목 + 라이브 에디터 / 우하단 = 주비스(✦).
   몸통은 앱 공통 서브창 문법(.pftrdbox), 폭 960. 읽는 글은 12px 이상(선언 9).
   ============================================================================ */
/* v4 — 모달을 버리고 화면 안으로 (사용자 확정 2026-08-14 "좌측 주비스를 못 쓰는 건 큰 단점").
   #pfnote는 .page 직계라 폭은 흐름을 따르고(챗이 열리면 함께 좁아진다), 고정 px을 쓰지 않는다. */
#pfnote { display:block; }
/* ⚠ app.css:2973 `#pfbody { display:flex }`가 hidden(UA display:none)을 덮는다 —
   author 선언이 이기기 때문. 노트를 열어도 표가 자리를 차지해 화면이 통째로 밀렸다(실측).
   같은 지뢰를 v3.1에서 팝오버로 한 번 밟았다. */
#pfbody[hidden], #pfnote[hidden] { display:none !important; }
.pfnotebox { width:auto; padding:14px 16px 12px; }
/* 선택 종목 밴드 — 스크롤해도 어느 종목인지 남는다 (.page가 스크롤 컨테이너, #stockhead 선례) */
/* × 는 밴드 우측 상단에 못박는다 — 흐름에 두면 줄바꿈에 밀려 혼자 떨어진다(실측) */
.pfnband { position:sticky; top:0; z-index:5; display:flex; align-items:flex-start; gap:8px;
  background:var(--bg); padding:2px 0 8px; }
/* 밴드 = 라벨+값 쌍의 나열. 좁아지면 줄바꿈하되 글자는 쪼개지 않는다
   (표 14열을 그대로 옮겼더니 라벨이 세로로 쪼개지고 뒤쪽 열이 잘렸다 — 실측 2026-08-14) */
.pfnband { flex-wrap:wrap; }
.pfnbmain { display:flex; align-items:baseline; gap:8px; flex:1 1 100%; min-width:0; }
.pfnbnm { font-size:16px; font-weight:800; color:var(--text); text-decoration:none;
  letter-spacing:-.01em; cursor:pointer; }
.pfnbnm:hover { color:var(--accent); }
.pfnbmain small { font-size:var(--fs-sub); color:var(--dim); }
.pfnbv { font-size:var(--fs-lab); font-weight:700; padding:2px 8px; border-radius:8px; cursor:pointer;
  color:var(--dim2); background:var(--panel2); border:1px solid var(--line); }
.pfnbv:hover { color:var(--accent); border-color:var(--accent); }
.pfnbstats { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 18px;
  flex:1 1 100%; min-width:0; }
.pfnbi { display:inline-flex; align-items:baseline; gap:5px; white-space:nowrap; }
.pfnbi > i { font-style:normal; font-size:var(--fs-lab); color:var(--dim); }
.pfnbi > b { font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; }
.pfnbi > b.u { color:var(--up); } .pfnbi > b.d { color:var(--down); }
.pfnbi .bk { font-size:var(--fs-lab); }
.pfnbsig { display:inline-flex; align-items:center; gap:4px; }
.pfnbsig .fdot { width:7px; height:7px; border-radius:50%; }
.pfnbsig .fdot.sgok { background:#22c55e; box-shadow:0 0 0 2px color-mix(in srgb, #22c55e 18%, transparent); }
.pfnbsig .fdot.sgwarn { background:#f59e0b; box-shadow:0 0 0 2px color-mix(in srgb, #f59e0b 18%, transparent); }
.pfnbsig .fdot.sgfired { background:#ef4444; box-shadow:0 0 0 2px color-mix(in srgb, #ef4444 18%, transparent); }
.pfnbsig .fdot.sgq { background:transparent; border:1.5px dashed var(--dim); }
/* [폐기 2026-08-19] .pfnbx — 밴드 우측 상단 닫기 X. 바로 아래 노트 헤더의 X와 같은 일을
   하는 버튼이 두 개라 사용자가 중복을 지적했다. 닫기는 헤더의 .pfthx 하나로 통일. */
/* body.jvnoscroll(배경 스크롤 잠금)은 노트가 모달이던 시절의 것 — 인라인이 된 지금
   쓰는 곳이 하나도 없어 걷어냈다 (v4). 다시 모달이 필요해지면 그때 되살린다. */
.pfnstat { margin-left:12px; font-size:var(--fs-sub); color:var(--dim); flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* 오류·지시 문장(409 안내 등)은 읽어야 하는 글 — 본문색 + 줄바꿈 허용 (docs/28 선언 9) */
.pfnstat.alert { color:var(--text); white-space:normal; overflow:visible; text-overflow:clip; }
/* 인라인이라 뷰포트 고정 높이를 쓰지 않는다 — 화면이 좁아지면 흐름대로 줄어든다 */
.pfnotegrid { display:grid; grid-template-columns:235px minmax(0,1fr); gap:14px;
  height:min(66vh, 640px); min-height:380px; }   /* 목록은 좁게 — 글 쓰는 곳이 넓어야 한다 */
/* ============================================================================
   지난 기록 보관함 · 사이클 닫기 (v5, 2026-08-14)
   ============================================================================ */
/* 표 아래 접힌 한 줄 — 기록이 있을 때만 나타난다 */
#pfarch { margin-top:10px; }
.pfarchhead { display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:var(--fs-sub);
  padding:5px 10px; border:0; border-radius:9px; background:transparent; color:var(--dim);
  cursor:pointer; }
.pfarchhead:hover { color:var(--accent); }
.pfarchhead b { font-weight:700; color:var(--text); }
.pfarchhead svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; transition:transform .15s; }
.pfarchhead.on svg { transform:rotate(90deg); }
.pfarchlist { display:flex; flex-direction:column; gap:4px; margin-top:6px; }
.pfarchrow { display:grid; grid-template-columns:minmax(90px,auto) auto 1fr auto; gap:12px;
  align-items:baseline; font:inherit; text-align:left; padding:8px 12px; border:0;
  border-radius:10px; background:var(--panel2); color:var(--text); cursor:pointer; }
.pfarchrow:hover { background:color-mix(in srgb, var(--dim) 13%, var(--panel2)); }
.pfarchrow b { font-size:12.5px; font-weight:700; }
.pfarchn { font-size:var(--fs-sub); color:var(--dim); white-space:nowrap; }
.pfarchwhy { font-size:var(--fs-sub); color:var(--dim2); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.pfarchrow small { font-size:var(--fs-lab); color:var(--dim); font-variant-numeric:tabular-nums; }

/* … 메뉴에서 여는 보관함 (v5.1) — 노트를 쓰다가도 지난 기록에 바로 닿는다 */
.pnarchbody { flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column;
  gap:5px; padding-top:4px; }
.pnarchsec { font-size:var(--fs-lab); font-weight:700; letter-spacing:.03em; color:var(--dim);
  margin:8px 0 2px; }
.pnarchsec:first-child { margin-top:0; }
.pnarchnote { font-size:var(--fs-sub); color:var(--dim2); word-break:keep-all; }
.pnarchrow { display:grid; grid-template-columns:minmax(80px,auto) auto 1fr auto; gap:10px;
  align-items:baseline; font:inherit; text-align:left; padding:8px 11px; border:0;
  border-radius:10px; background:var(--panel2); color:var(--text); cursor:pointer; }
.pnarchrow:hover { background:color-mix(in srgb, var(--dim) 13%, var(--panel2)); }
.pnarchrow b { font-size:12.5px; font-weight:700; }
.pnarchrow span { font-size:var(--fs-sub); color:var(--dim); white-space:nowrap; }
.pnarchrow i { font-style:normal; font-size:var(--fs-sub); color:var(--dim2); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.pnarchrow small { font-size:var(--fs-lab); color:var(--dim); font-variant-numeric:tabular-nums; }

/* 보관 종목의 밴드 배지 */
.pfnbclosed { font-size:var(--fs-lab); font-weight:700; padding:2px 8px; border-radius:8px;
  color:var(--dim2); background:var(--panel2); border:1px solid var(--line); }
.pfnbwhy b { font-weight:600; }

/* 닫기 권유 / 재진입 알림 — 노트 위 한 줄 */
#pfnnotice:empty { display:none; }
.pfnclose, .pfnpast { display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  margin:0 0 10px; padding:9px 12px; border-radius:10px; font-size:12.5px;
  color:var(--text); word-break:keep-all; }
.pfnclose { border:1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
  background:color-mix(in srgb, var(--accent) 6%, var(--panel)); }
.pfnclose input { flex:1 1 220px; min-width:160px; font:inherit; font-size:12.5px;
  padding:6px 10px; border:1px solid var(--line); border-radius:8px;
  background:var(--panel); color:var(--text); }
.pfnclose input:focus { outline:none; border-color:var(--accent); }
.pfnpast { border:1px solid var(--line); background:var(--panel2); }
.pfnpast span, .pfnclose span { flex:0 1 auto; }

/* 노트 안 스크롤바는 얇게 (전역 12px은 이 좁은 패널에서 굵다 — 사용자 확정 2026-08-14).
   앱 전체는 건드리지 않는다 */
#pfnote ::-webkit-scrollbar { width:7px; height:7px; }
#pfnote ::-webkit-scrollbar-thumb { border-width:1px; border-radius:4px;
  background:color-mix(in srgb, var(--dim) 70%, transparent); }
#pfnote ::-webkit-scrollbar-thumb:hover { background:var(--dim); }
#pfnote .pfnotelist, #pfnote .pnbody, #pfnote .pntrlist, #pfnote .pnjvlog {
  scrollbar-width:thin; }
.pfnotelist { border-right:1px solid var(--line); padding-right:14px; overflow-y:auto;
  display:flex; flex-direction:column; gap:4px; }
#pfnnew { align-self:stretch; margin-bottom:4px; }
.pfnlbtns { display:flex; gap:6px; margin-bottom:4px; }
.pfnlbtns .pfthbtn { flex:1; }
/* 오로라 세로선은 **좌측** 한 줄 — 초록 = 투자노트, 보라 = 매매기록. 항목은 얇게,
   두 종류가 같은 두께·크기 (요청6, 에버노트 목록 느낌) */
.pfnoteitem { position:relative; font:inherit; text-align:left; padding:5px 9px 5px 14px;
  border:0; border-radius:8px; background:transparent; color:var(--text); cursor:pointer; }
.pfnoteitem::before { content:""; position:absolute; left:4px; top:6px; bottom:6px; width:3px;
  border-radius:2px; }
.pfnoteitem.tnote::before { background:linear-gradient(180deg, #34d399, #45c9d8); }
.pfnoteitem.ttrade::before { background:linear-gradient(180deg, #a78bfa, #c86fd4); }
.pfnoteitem:hover { background:var(--panel2); }
.pfnoteitem.on { background:var(--panel2); }
.pfnoteitem b { display:block; font-size:var(--fs-sub); font-weight:600; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.pfnoteitem span { display:block; font-size:var(--fs-sub); color:var(--dim); margin-top:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pfnoteitem small { display:block; font-size:var(--fs-lab); color:var(--dim); margin-top:1px;
  font-variant-numeric:tabular-nums; }             /* 날짜 = 라벨(읽는 글 아님) */
.pfnempty { font-size:var(--fs-sub); color:var(--dim); padding:10px 6px; word-break:keep-all; }
.pfnerr { font-size:12.5px; color:var(--text); word-break:keep-all; }
.pfnoteed { position:relative; display:flex; flex-direction:column; gap:8px;
  min-width:0; min-height:0; }

/* 편집 툴바 — 에버노트 상단 꾸러미. 아이콘은 전부 라인 SVG (이모지 금지) */
.pnbar { display:flex; align-items:center; gap:10px; }
.pntools { display:inline-flex; gap:2px; padding:3px; border:1px solid var(--line);
  border-radius:9px; background:var(--panel2); }
.pntool { display:inline-flex; align-items:center; justify-content:center; width:26px;
  height:24px; padding:0; border:0; border-radius:6px; background:transparent;
  color:var(--dim2); cursor:pointer; }
.pntool:hover { background:var(--panel); color:var(--accent); }
.pntool svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; }
.pfnacts { margin-left:auto; display:inline-flex; gap:6px; }
.pfnact { font:inherit; font-size:var(--fs-sub); padding:4px 10px; border:1px solid var(--line);
  border-radius:8px; background:transparent; color:var(--dim); cursor:pointer;
  text-decoration:none; }
.pfnact:hover { color:var(--accent); border-color:var(--accent); }
#pfntitle { font:inherit; font-size:15px; font-weight:700; color:var(--text); padding:7px 4px;
  border:0; border-bottom:1px solid var(--line); background:transparent; }
#pfntitle:focus { outline:none; border-bottom-color:var(--accent); }
#pfntitle::placeholder { color:var(--dim); font-weight:400; }

/* 라이브 에디터 본문 — 마크다운이 그 자리에서 서식이 된다 */
.pnbody { flex:1; min-height:0; overflow-y:auto; padding:12px 14px 46px;
  border:1px solid var(--line); border-radius:10px; background:var(--panel2);
  color:var(--text); font-size:13.5px; line-height:1.75; word-break:break-word; }
.pnbody:focus { outline:none; border-color:var(--accent); }
.pnbody p { margin:0 0 2px; }
.pnbody h1 { font-size:19px; font-weight:800; margin:10px 0 6px; letter-spacing:-.01em; }
/* ## 중제목만 남색 — 검정(h1·본문)과 위계가 색으로도 갈린다 (사용자 확정 2026-08-27,
   뉴스 기사 남색 부제 벤치마킹). 어두운 테마에선 같은 계열의 밝은 남색(가독 확보). */
.pnbody h2 { font-size:16px; font-weight:700; margin:8px 0 4px; color:#7f9dfa; }
body[data-theme="light"] .pnbody h2 { color:#2648b0; }
.pnbody h3 { font-size:14px; font-weight:700; margin:6px 0 3px; }
.pnbody ul, .pnbody ol { margin:2px 0; padding-left:22px; }
.pnbody li { margin:1px 0; }
.pnbody ul.pnck { list-style:none; padding-left:4px; }
.pnbody ul.pnck li { display:flex; align-items:flex-start; gap:7px; }
.pnbody ul.pnck input[type="checkbox"] { margin-top:5px; accent-color:var(--accent); }
.pnbody ul.pnck input[type="checkbox"]:checked + span { color:var(--dim);
  text-decoration:line-through; }
.pnbody blockquote { margin:4px 0; padding:2px 12px; border-left:3px solid var(--accent);
  color:var(--dim2); }
.pnbody hr { border:0; border-top:1px solid var(--line); margin:10px 0; }
.pnbody code { font-family:ui-monospace, Consolas, monospace; font-size:var(--fs-sub);
  background:var(--panel); border:1px solid var(--line); border-radius:5px; padding:1px 5px; }
.pfnref { color:var(--accent); cursor:pointer; text-decoration:none; padding:0 2px;
  border-bottom:1px dashed color-mix(in srgb, var(--accent) 55%, transparent); }
.pfnref.miss { color:var(--dim); cursor:default; border-bottom-style:dotted; }

/* ✦ 주비스 — 우하단 플로팅 (에버노트 모티브). 내 컨텍스트가 살아 있는 도우미 */
.pnjv { position:absolute; right:14px; bottom:14px; width:40px; height:40px; border:0;
  border-radius:50%; background:var(--accent); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.25); }
.pnjv:hover { filter:brightness(1.06); }
.pnjv svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linejoin:round; }
/* 포스트잇 모양 (사용자 확정 2026-08-06 2차 — 가로로 길지 않게, 네모 박스) */
/* 사이드 채팅 (v5.8, 클로드 사이드챗 참조) — 글자도 여백도 아껴 쓴다. 노트가 주인공이고
   이 창은 곁에서 거드는 자리다. 머리줄에 닫기 X. */
.pnjvpop { position:absolute; right:14px; bottom:62px; width:286px;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow); padding:9px 10px 10px; display:flex; flex-direction:column; gap:7px;
  min-width:240px; }
  /* min-height는 **일부러 두지 않는다** — 넣으면 아직 아무것도 안 한 창까지 그 높이로
     늘어나 기본 모습이 바뀐다. 줄이기 하한(200px)은 끄는 쪽(JS PNJV_MIN_H)이 지킨다. */

/* ---- 크기 조절 손잡이 여덟 (사용자 요청 2026-08-22) ------------------------------
   네 변 + 네 모서리. 보이지 않고 커서로만 존재를 알린다 — 선을 그리면 창이 시끄러워지고,
   커서가 바뀌는 순간 "여기를 잡으면 된다"는 건 이미 전해진다(맥·윈도 창 문법).
   변은 6px, 모서리는 12px — 모서리가 더 넓어야 사선으로 잡기 쉽다.
   모서리를 변보다 **뒤에** 선언해 겹치는 구간에서 모서리가 이긴다. */
.pnjvrz { position:absolute; z-index:2; }
.pnjvrz-n { top:-3px; left:8px; right:8px; height:6px; cursor:ns-resize; }
.pnjvrz-s { bottom:-3px; left:8px; right:8px; height:6px; cursor:ns-resize; }
.pnjvrz-w { left:-3px; top:8px; bottom:8px; width:6px; cursor:ew-resize; }
.pnjvrz-e { right:-3px; top:8px; bottom:8px; width:6px; cursor:ew-resize; }
.pnjvrz-nw { top:-4px; left:-4px; width:12px; height:12px; cursor:nwse-resize; }
.pnjvrz-se { bottom:-4px; right:-4px; width:12px; height:12px; cursor:nwse-resize; }
.pnjvrz-ne { top:-4px; right:-4px; width:12px; height:12px; cursor:nesw-resize; }
.pnjvrz-sw { bottom:-4px; left:-4px; width:12px; height:12px; cursor:nesw-resize; }
/* 끌기 중에는 창 안의 글자가 선택되거나 커서가 깜빡이지 않게 — 화면 전체를 굳힌다 */
body.pnjv-rz { user-select:none; }
body.pnjv-rz * { cursor:inherit !important; }

/* 창이 커지면 대화 로그가 남는 높이를 먹는다 — 안 그러면 창만 크고 내용은 그대로다 */
.pnjvpop .pnjvlog { flex:1; min-height:0; overflow-y:auto; }
.pnjvhead { display:flex; align-items:center; gap:6px; padding:0 1px 1px; }
.pnjvhead b { font-size:11.5px; font-weight:700; color:var(--text); }
.pnjvhead span { flex:1; font-size:10.5px; color:var(--dim); }
.pnjvhead button { display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border:0; border-radius:6px; background:transparent;
  color:var(--dim); cursor:pointer; }
.pnjvhead button:hover { background:var(--panel2); color:var(--text); }
.pnjvhead svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; }
/* 본문에서 긁은 문장 = 이 대화의 초점. 누르면 놓는다 */
.pnjvsel { align-self:flex-start; max-width:100%; font:inherit; font-size:10.5px;
  padding:3px 8px; border-radius:7px; border:1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  background:color-mix(in srgb, var(--accent) 8%, transparent); color:var(--text);
  cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pnjvsel[hidden] { display:none !important; }
.pnjvsel:hover { border-color:var(--accent); color:var(--accent); }
.pnjvpop textarea { flex:1; font:inherit; font-size:11.5px; line-height:1.5; padding:6px 8px;
  border:1px solid var(--line); border-radius:8px; background:var(--panel2);
  color:var(--text); resize:none; min-height:32px; max-height:96px; }
.pnjvpop textarea:focus { outline:none; border-color:var(--accent); }
.pnjvpop textarea::placeholder { color:var(--dim); }
.pnjvsend { align-self:flex-end; flex:none; display:inline-flex; align-items:center;
  justify-content:center; width:28px; height:28px; border:0; border-radius:8px;
  background:var(--accent); color:#fff; cursor:pointer; }
.pnjvsend:hover { filter:brightness(1.08); }
.pnjvsend svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round; }
.pnjvout { max-height:220px; overflow-y:auto; }
.pnjvmsg { font-size:12.5px; line-height:1.65; color:var(--text); word-break:keep-all; }
.pnjverr { font-size:12.5px; color:var(--text); word-break:keep-all; }
.pnjvwait { font-size:12.5px; color:var(--dim); }
.pnjvout .pfnact { margin-top:8px; }

@media (max-width: 860px) { .pfnotegrid { grid-template-columns:1fr; height:auto; }
  .pfnotelist { border-right:0; padding-right:0; max-height:180px; } }

/* 매매기록 모드 (우측 스위칭) — 정형 폼. 폼 뼈대는 app.css .pftrdform 재사용 */
.pntrhead { font-size:14px; font-weight:700; }
.pntrhead small { display:block; font-size:var(--fs-sub); font-weight:400; color:var(--dim2);
  margin-top:3px; word-break:keep-all; }           /* 읽는 문장 12px (선언 9) */
.pntrform { margin-top:2px; }
.pntrlist { flex:1; min-height:0; overflow-y:auto; margin-top:4px; padding-top:10px;
  border-top:1px solid var(--line); }
.pntrlist .pftrdrow.on { background:var(--panel2); border-radius:8px; }

/* 본문 속 이미지·링크 (에버노트 규칙 — 붙여넣기) */
.pnbody img { max-width:100%; border-radius:10px; margin:4px 0; display:block; }
.pnbody a:not(.pfnref) { color:var(--accent); text-decoration:underline;
  text-underline-offset:2px; }

/* ============================================================================
   투자노트 v3 (plans/012) — @시세 칩 · #태그 · @// 팝업 · 필터 · 헤더 스위치 · 아이콘
   ============================================================================ */
/* @종목·지수 칩 — 이름 · 현재가 · 등락 · 스파크 · 기록 대비. 흐름이 한눈에 */
.pnstock { display:inline-flex; align-items:center; gap:6px; padding:2px 9px; margin:0 1px;
  border:1px solid var(--line); border-radius:9px; background:var(--panel);
  font-size:12.5px; line-height:1.5; white-space:nowrap; vertical-align:baseline;
  cursor:default; }
.pnstock > b { font-weight:700; }
.pnstock .pnsq { display:inline-flex; align-items:center; gap:6px; }
.pnstock .pnsq b { font-weight:600; font-variant-numeric:tabular-nums; }
.pnstock .pnsq small { font-size:var(--fs-lab); font-variant-numeric:tabular-nums; }
.pnstock .pnsq .u { color:var(--up); } .pnstock .pnsq .d { color:var(--down); }
.pnstock .pnsq .pnbasecmp { color:var(--dim); }
.pnsp { width:64px; height:18px; }          /* 요청5 — 3개월 흐름이 '선'으로 보이게 */
.pnsp path { fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.pnsp.u path { stroke:var(--up); } .pnsp.d path { stroke:var(--down); }

/* #태그 칩 — 시그니처 틴트 */
.pntag { display:inline-block; padding:1px 8px; margin:0 1px; border-radius:9px;
  font-size:var(--fs-sub); color:var(--accent); vertical-align:baseline;
  background:color-mix(in srgb, var(--accent) 9%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
/* 목록 항목의 작은 태그 */
.pnltag { font-style:normal; font-size:var(--fs-badge); color:var(--accent); margin-left:5px; }

/* @·/ 공용 팝업 — 캐럿 좌표에 fixed */
#pnpop { position:fixed; z-index:230; width:280px; max-height:224px; overflow-y:auto;
  background:var(--panel); border:1px solid var(--line); border-radius:11px;
  box-shadow:var(--shadow); padding:5px; display:flex; flex-direction:column; gap:1px; }
#pnpop .pnprow { display:flex; align-items:baseline; gap:8px; font:inherit; text-align:left;
  padding:7px 10px; border:0; border-radius:8px; background:transparent; color:var(--text);
  cursor:pointer; }
#pnpop .pnprow b { font-size:12.5px; font-weight:600; }
#pnpop .pnprow small { font-size:var(--fs-lab); color:var(--dim); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
#pnpop .pnprow.on, #pnpop .pnprow:hover { background:var(--panel2); }

/* 좌측 필터 — 종류는 색(오로라선)이 말하고, 선택은 여기서 (pfsort 세그먼트 문법) */
/* flex:none 필수 — 세로 flex 안에서 목록(#pfnitems)이 자리를 다 가져가 2px로 눌렸다(실측).
   .pnpsep 때와 같은 지뢰다 */
.pnfilter { display:inline-flex; flex:none; align-self:flex-start; margin-bottom:6px;
  border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.pnfilter button { font:inherit; font-size:var(--fs-sub); padding:4px 12px; border:0; cursor:pointer;
  background:transparent; color:var(--dim); }
.pnfilter button + button { border-left:1px solid var(--line); }
.pnfilter button.on { background:var(--panel2); color:var(--text); font-weight:700; }
.pnfilter button:hover { color:var(--accent); }

/* 헤더 스위치 — [+투자노트][+매매기록] (요청6: + 크게·붙여쓰기·오로라 배경에 흰 글자).
   흰 글씨 대비를 위해 그라데이션은 한 톤 어둡게 (라이트·다크 공통) */
.pnswitch { display:inline-flex; gap:7px; margin-right:10px; }
.pnswitch button { display:inline-flex; align-items:center; gap:2px; font:inherit;
  font-size:var(--fs-sub); font-weight:700; color:#fff; padding:5px 12px 5px 9px; cursor:pointer;
  border:0; border-radius:9px; }
.pnswitch button b { font-size:15px; font-weight:800; line-height:1; }
#pfnnew { background:linear-gradient(135deg, #0ea371, #0d8fa6); }
#pfnnewtrade { background:linear-gradient(135deg, #7452e8, #a8489b); }
.pnswitch button:hover { filter:brightness(1.08); }

/* 액션 아이콘 (내보내기·더 보기) + 드롭다운 */
.pfnacts { position:relative; }
.pnico { display:inline-flex; align-items:center; justify-content:center; width:28px;
  height:26px; padding:0; border:1px solid var(--line); border-radius:8px;
  background:transparent; color:var(--dim2); cursor:pointer; text-decoration:none; }
.pnico:hover { color:var(--accent); border-color:var(--accent); }
.pnico svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; }
.pnico svg circle { fill:currentColor; stroke:none; }
.pnmenu { position:absolute; right:0; top:32px; z-index:230; min-width:150px;
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow); padding:5px; display:flex; flex-direction:column; gap:1px; }
.pnmenu button { font:inherit; font-size:12.5px; text-align:left; padding:7px 11px; border:0;
  border-radius:7px; background:transparent; color:var(--text); cursor:pointer; }
.pnmenu button:hover { background:var(--panel2); }

/* 세로로 긴 포스트잇 규격은 폐기 (v5.8) — 입력은 한 줄에서 시작해 쓴 만큼만 자란다 */
.pnjvout { max-height:240px; }

/* ✦ 짧은 대화 (2026-08-14) — 챗의 축소판. 내 말은 오른쪽, 주비스는 왼쪽 */
.pnjvlog { display:flex; flex-direction:column; gap:6px; max-height:264px; overflow-y:auto;
  padding-right:2px; }
.pnjvlog:empty { display:none; }
.pnjvrow { font-size:11.5px; line-height:1.55; padding:6px 9px; border-radius:10px;
  max-width:90%; word-break:keep-all; white-space:pre-wrap; }
.pnjvrow.me { align-self:flex-end; background:var(--accent); color:#fff;
  border-bottom-right-radius:4px; }
.pnjvrow.jv { align-self:flex-start; background:var(--panel2); color:var(--text);
  border-bottom-left-radius:4px; }
.pnjvrow.wait { color:var(--dim); }
.pnjvrow.err { color:var(--text); }
.pnjvundo { display:block; margin-top:7px; font:inherit; font-size:var(--fs-sub); padding:3px 9px;
  border:1px solid var(--line); border-radius:8px; background:var(--panel);
  color:var(--text); cursor:pointer; }
.pnjvundo:hover { border-color:var(--accent); color:var(--accent); }
/* 입력은 한 줄 — 보내기 버튼을 옆에 붙여 세로를 아낀다 (클로드 사이드챗 문법) */
.pnjvin { display:flex; align-items:flex-end; gap:6px; }
.pnjvundo, .pnjvput { font-size:10.5px; padding:2px 7px; }
.pnjvput { display:block; margin-top:6px; font:inherit; border:1px solid var(--line);
  border-radius:7px; background:var(--panel); color:var(--text); cursor:pointer; }
.pnjvput:hover { border-color:var(--accent); color:var(--accent); }
.pnjvput:disabled { color:var(--dim); border-color:var(--line); cursor:default; }

/* ============================================================================
   투자노트 v3.8 (2026-08-14) — 더 보기(정렬·들여쓰기) · 할 일 취소선 · 템플릿 상주
   ============================================================================ */
/* 더 보기 팝오버 — 아이콘 + 이름 한 줄짜리 목록 (에버노트 문법) */
#pnmore { position:absolute; top:32px; z-index:230; min-width:150px; padding:5px;
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow); display:flex; flex-direction:column; gap:1px; }
#pnmore button { display:flex; align-items:center; gap:9px; font:inherit; font-size:12.5px;
  text-align:left; padding:6px 10px; border:0; border-radius:7px; background:transparent;
  color:var(--text); cursor:pointer; }
#pnmore button:hover { background:var(--panel2); }
#pnmore svg { width:15px; height:15px; flex:none; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

/* 할 일 — 체크하면 그 줄이 그어지고 옅어진다 (끝냈다는 느낌) */
.pnbody ul.pnck input[type="checkbox"]:checked + span { color:var(--dim);
  text-decoration:line-through; text-decoration-thickness:1px; }

/* ============================================================================
   투자노트 v3.10 (2026-08-14) — 제목 접기 · 주간 투자노트 템플릿
   ============================================================================ */
/* 접기 화살표 — 제목 왼쪽 여백에 숨어 있다가 마우스가 닿으면 나타난다.
   가상 요소라 클릭을 못 받으므로 판정은 JS가 제목의 왼쪽 padding(20px)으로 한다. */
/* 화살표가 본문 왼쪽 벽에 붙지 않도록 본문에 여백을 더 준다 (사용자 확정 2026-08-14).
   30px은 "글 앞에 뭔가 있는 것 같다"는 반려를 받아 절반으로 — 화살표 자리(15px)만 남긴다 */
.pnbody { padding-left:15px; }
.pnbody h1, .pnbody h2, .pnbody h3 { position:relative; padding-left:15px; margin-left:-15px; }
.pnbody h1::before, .pnbody h2::before, .pnbody h3::before {
  content:""; position:absolute; left:0; top:50%; width:14px; height:14px;
  margin-top:-7px; opacity:0; cursor:pointer; transition:opacity .12s, transform .12s;
  background:center/12px no-repeat url("data:image/svg+xml;charset=utf-8,\
%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' \
stroke='%23747480' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'\
%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.pnbody h1:hover::before, .pnbody h2:hover::before, .pnbody h3:hover::before { opacity:1; }
/* 접힌 제목은 화살표를 늘 보여 준다 — 감춰진 글이 있다는 유일한 신호 */
.pnbody h1.pnfold::before, .pnbody h2.pnfold::before, .pnbody h3.pnfold::before {
  opacity:1; transform:rotate(-90deg); }
.pnbody .pnhid { display:none; }

/* 템플릿 줄 — 기본 2종 + 내 템플릿. 한 줄이 넘으면 [+더보기] 뒤로 숨긴다 (v3.13) */
#pntpl { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
#pntpl small { width:100%; }
/* max-height는 칩 실높이(≈25px)보다 넉넉해야 한다 — 30px 상한에 31px 칩이 들어가
   아랫변이 잘리던 실사고(2026-08-28). 칩 높이를 바꾸면 여기도 같이 본다. */
.pntplrow { display:flex; flex-wrap:wrap; gap:6px; overflow:hidden; max-height:27px; }
/* 접힘 — 내용 있는 노트에선 라벨만 남는다 (사용자 확정 2026-08-28 "계속 보이면 불편").
   라벨 클릭으로 여닫고, 화살표가 상태를 말한다. */
#pntpl small { display:flex; align-items:center; gap:5px; cursor:pointer; user-select:none; }
#pntpl small svg { width:10px; height:10px; flex:none; transition:transform .15s; }
#pntpl.folded small svg { transform:rotate(-90deg); }
#pntpl.folded .pntplrow, #pntpl.folded .pntplmore { display:none; }
#pntpl.folded { margin-bottom:-2px; }
.pntplrow.open { max-height:none; }
.pntplmine { position:relative; padding-right:24px; }
.pntplmine .pntplx { position:absolute; right:7px; top:50%; transform:translateY(-50%);
  font-style:normal; font-size:var(--fs-sub); line-height:1; color:var(--dim); cursor:pointer; }
.pntplmine .pntplx:hover { color:#dc2626; }
.pntplmore { font:inherit; font-size:var(--fs-sub); padding:4px 10px; cursor:pointer;
  border:0; border-radius:9px; background:transparent; color:var(--dim); }
.pntplmore:hover { color:var(--accent); }

/* ============================================================================
   투자노트 v3.1 다듬기 (사용자 요청 9건, 2026-08-06)
   ============================================================================ */
/* [오류 수정] 팝업·메뉴가 hidden인데도 보이던 근본 원인 — author display:flex가
   hidden(UA display:none)을 덮었다. ✦ 팝오버·… 메뉴가 처음부터 열려 있던 것,
   @ 선택 후 팝업이 안 닫히던 것 전부 이 한 줄이 원인 (요청 2·3·5). */
#pfnote [hidden], #pnpop[hidden] { display:none !important; }

/* 요청7 — 빈 새 노트의 시작 템플릿 */
#pntpl { margin-top:2px; }
/* 칩 높이 약 20% 축소 (사용자 요청 2026-08-28: 31px → 25px) — line-height까지 조여야
   fs-sub 12.5px 기준 셈이 맞는다 */
#pntpl button { font:inherit; font-size:var(--fs-sub); line-height:1.3; padding:3px 11px;
  cursor:pointer;
  border:1px dashed color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius:9px;
  background:color-mix(in srgb, var(--accent) 6%, transparent); color:var(--text); }
#pntpl button:hover { border-color:var(--accent); color:var(--accent); }

/* ============================================================================
   투자노트 v3.2 (사용자 요청 6건, 2026-08-13) — 에버노트 캡처 기준
   ============================================================================ */
/* 요청2 — 제목은 문서의 얼굴 (에버노트처럼 크게), 밑줄 없이 */
#pfntitle { font-size:23px; font-weight:800; letter-spacing:-.015em; padding:2px 4px 4px;
  border-bottom:0; }
#pfntitle:focus { border-bottom:0; }
#pfntitle::placeholder { font-weight:800; color:color-mix(in srgb, var(--dim) 55%, transparent); }
/* 요청2 — "템플릿에서 시작하기" 라벨 + 템플릿 칩 */
/* display는 위 v3.13 접기 블록의 flex가 정본 — 여기서 block으로 되돌리면 화살표 정렬이
   깨진다 (동률 특이도는 뒤가 이긴다, 2026-08-28) */
#pntpl small { font-size:var(--fs-lab); font-weight:600; letter-spacing:.03em;
  color:var(--dim); margin-bottom:6px; }

/* 요청3 — 형광펜(==..==)과 글자색([c=이름]..[/c]) — 왕복 가능한 요소만 */
.pnbody mark { background:rgba(250, 224, 66, .5); color:inherit; border-radius:3px;
  padding:0 2px; }
.pnbody .pnfg[data-pnc="red"] { color:#dc2626; }
.pnbody .pnfg[data-pnc="orange"] { color:#d97706; }
.pnbody .pnfg[data-pnc="green"] { color:#047857; }
.pnbody .pnfg[data-pnc="blue"] { color:#2563eb; }
.pnbody .pnfg[data-pnc="purple"] { color:#7c3aed; }
.pnbody .pnfg[data-pnc="gray"] { color:#6b7280; }
/* 색상 팔레트 팝오버 */
.pnbar { position:relative; }
#pncolor { position:absolute; top:32px; z-index:230; display:flex; align-items:center; gap:4px;
  padding:6px 8px; background:var(--panel); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow); }
#pncolor button { display:inline-flex; align-items:center; justify-content:center; width:24px;
  height:24px; padding:0; border:1px solid var(--line); border-radius:7px;
  background:transparent; cursor:pointer; }
#pncolor button:hover { border-color:var(--accent); }
#pncolor button i { width:13px; height:13px; border-radius:4px; }
#pncolor i.red { background:#dc2626; } #pncolor i.orange { background:#d97706; }
#pncolor i.green { background:#047857; } #pncolor i.blue { background:#2563eb; }
#pncolor i.purple { background:#7c3aed; } #pncolor i.gray { background:#6b7280; }
#pncolor .reset { width:auto; padding:0 10px; font:inherit; font-size:var(--fs-sub);
  color:var(--dim); }
#pncolor .reset:hover { color:var(--accent); }

/* 요청4 — 헤더 한 줄: [+투자노트][+매매기록][내보내기][…][X]. 두 버튼은 같은 규격 */
.pnswitch button { min-width:98px; height:30px; justify-content:center; padding:0 12px 0 9px; }
.pnheadacts { margin-left:0; margin-right:4px; align-items:center; }
.pnheadacts .pnico { width:30px; height:30px; border-radius:9px; }
.pfnotebox .pfthx { padding:6px; }
.pfnotebox .pfthx svg { width:19px; height:19px; }

/* 요청5 — @시세는 칩이 아니라 카드: 이름·현재가 한 줄, 큰 스파크, 핵심 정보 줄 */
.pnstock { display:inline-grid; grid-template-columns:1fr auto; align-items:baseline;
  column-gap:10px; width:min(320px, 100%); padding:9px 13px 8px; margin:4px 2px;
  border-radius:12px; white-space:normal; }
.pnstock > b { font-size:13.5px; }
.pnstock .pnsq { display:contents; }
.pnstock .pnsqhead { display:inline-flex; align-items:baseline; gap:6px; justify-self:end; }
.pnstock .pnsqhead b { font-size:13.5px; font-weight:700; }
.pnstock .pnsqhead small { font-size:var(--fs-sub); }
.pnstock .pnsp { grid-column:1 / -1; width:100%; height:46px; margin:5px 0 3px; }
.pnstock .pnsp path { stroke-width:1.6; }
.pnstock .pnsqinfo { grid-column:1 / -1; display:block; font-size:var(--fs-sub); color:var(--dim);
  font-variant-numeric:tabular-nums; line-height:1.6; }

/* 요청5 — @ 팝업: 상단 검색 입력창 + 목록 (클로드 코드 @ 문법) */
#pnpop { width:352px; max-height:300px; }
#pnpopin { font:inherit; font-size:12.5px; padding:8px 11px; margin:2px 2px 5px;
  border:1px solid var(--line); border-radius:9px; background:var(--panel2);
  color:var(--text); }
#pnpopin:focus { outline:none; border-color:var(--accent); }
#pnpopin::placeholder { color:var(--dim); }
#pnpoplist { display:flex; flex-direction:column; gap:1px; overflow-y:auto; min-height:0; }
.pnpempty { font-size:var(--fs-sub); color:var(--dim); padding:8px 11px; }
/* 지수와 종목을 가르는 얇은 선 — 아래는 시총 상위(고를 수 있는 실물, v3.12).
   flex:none이 없으면 1px짜리 아이템이 축소돼 0px가 된다(실측) */
.pnpsep { flex:none; height:1px; margin:4px 10px; background:var(--line); }

/* 요청6 — 목록 항목은 종류 색으로 끝까지 채운 박스 + 호버 휴지통 */
.pfnoteitem { padding:6px 30px 6px 14px; }
.pfnoteitem.tnote { background:linear-gradient(90deg, rgba(52,211,153,.14), rgba(69,201,216,.05)); }
.pfnoteitem.ttrade { background:linear-gradient(90deg, rgba(167,139,250,.14), rgba(200,111,212,.05)); }
.pfnoteitem.tnote:hover, .pfnoteitem.tnote.on {
  background:linear-gradient(90deg, rgba(52,211,153,.24), rgba(69,201,216,.11)); }
.pfnoteitem.ttrade:hover, .pfnoteitem.ttrade.on {
  background:linear-gradient(90deg, rgba(167,139,250,.24), rgba(200,111,212,.11)); }
.pnldel { position:absolute; right:5px; top:50%; transform:translateY(-50%);
  display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px;
  border-radius:6px; color:var(--dim); opacity:0; }
.pfnoteitem:hover .pnldel { opacity:1; }
.pnldel:hover { color:#dc2626; background:rgba(0,0,0,.06); }
.pnldel svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; }
/* 삭제 확인은 앱 표준 확인창(jvConfirm, app.css .jvcfm)을 쓴다 — 상단 배너는 2026-08-14 폐기 */

/* ============================================================================
   투자노트 v3.3 (사용자 요청 3건, 2026-08-14) — 봉 카드·초기 빈 노트·색상 휠
   ============================================================================ */
/* 요청1 — @시세 카드: 비율 유지 확대(320→400) + 이름·현재가 | 우측 수익률 4종 */
.pnstock { grid-template-columns:auto auto 1fr; width:min(400px, 100%);
  padding:10px 14px 9px; }
.pnstock > b { font-size:14px; }
.pnstock .pnsqprice { grid-column:2; font-size:14px; font-weight:700;
  font-variant-numeric:tabular-nums; }
.pnstock .pnsqhead { grid-column:3; gap:9px; }
.pnret { display:inline-flex; align-items:baseline; gap:3px; }
.pnret i { font-style:normal; font-size:var(--fs-badge); color:var(--dim); }
/* v3.2의 .pnstock .pnsqhead b(13.5px)보다 구체적으로 — 아니면 당일·주가 같은 크기가 된다 */
.pnstock .pnsqhead .pnret b { font-size:var(--fs-lab); font-weight:600;
  font-variant-numeric:tabular-nums; }
.pnret.big i { font-size:var(--fs-lab); }
.pnstock .pnsqhead .pnret.big b { font-size:13.5px; font-weight:700; }   /* 당일은 조금 크게 */
/* 3개월 OHLC 봉 — 볼륨 없음. 상승 빨강·하락 파랑 (메인 차트와 같은 문법) */
.pnstock .pncd { grid-column:1 / -1; width:100%; height:58px; margin:6px 0 4px; }
.pncd line { stroke-width:1; }
.pncd line.u { stroke:var(--up); } .pncd line.d { stroke:var(--down); }
.pncd rect.u { fill:var(--up); } .pncd rect.d { fill:var(--down); }
.pnstock .pnsp { height:58px; }                    /* 폴백 라인도 같은 키 */

/* 요청3 — 색상 휠 동그라미 (에버노트 문법): 무지개 링 + 가운데 = 지금 고른 색 */
.pncwheel { position:relative; display:inline-block; width:16px; height:16px;
  border-radius:50%; background:conic-gradient(from 200deg, #f43f5e, #f59e0b, #facc15,
  #22c55e, #38bdf8, #6366f1, #a855f7, #f43f5e); }
.pncwheel::after { content:""; position:absolute; inset:3.5px; border-radius:50%;
  background:var(--pnc-cur, var(--panel2)); }
#pncolor button, #pncolor button i { border-radius:50%; }

/* ============================================================================
   투자노트 v3.4 (2026-08-14) — # 태그 피커 · 하단 태그 바 · Tab 확정
   ============================================================================ */
#pnfoot { display:flex; align-items:center; gap:7px; flex-wrap:wrap; padding:7px 2px 0;
  border-top:1px solid var(--line); }
#pnfoot > svg { width:14px; height:14px; flex:none; fill:none; stroke:var(--dim);
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
#pnfoot > svg circle { fill:var(--dim); stroke:none; }
#pnfoottags { display:inline-flex; align-items:center; gap:5px; flex-wrap:wrap; }
.pnfchip { display:inline-flex; align-items:center; gap:3px; }
.pnfx { border:0; padding:0 1px; font:inherit; font-size:var(--fs-sub); line-height:1;
  color:var(--dim); background:transparent; cursor:pointer; }
.pnfx:hover { color:#dc2626; }
#pnfootadd { font:inherit; font-size:var(--fs-sub); padding:3px 10px; cursor:pointer;
  border:1px dashed var(--line); border-radius:9px; background:transparent;
  color:var(--dim); }
#pnfootadd:hover { border-color:var(--accent); color:var(--accent); }

/* ============================================================================
   투자노트 v3.5 (2026-08-14) — 목록 균일 박스 · 매도신호 원 교체
   ============================================================================ */
/* 목록: 한 항목 = 한 줄 전체 폭, 박스는 옅은 회색 하나로 — 종류는 좌측 세로선만 말한다.
   **모든 항목은 같은 높이**(사용자 확정 2026-08-14 "다르게 하면 복잡하게 느껴진다") —
   제목·발췌·날짜 세 줄로 고정하고, 넘치는 글은 한 줄에서 잘린다. 발췌가 없는 노트도
   빈 줄을 남겨 줄 수를 맞춘다(pnListRender). */
#pfnitems { display:flex; flex-direction:column; gap:5px; }
.pfnoteitem { width:100%; height:64px; box-sizing:border-box; overflow:hidden; }
.pfnoteitem b, .pfnoteitem span, .pfnoteitem small {
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pfnoteitem span { min-height:18px; }              /* 발췌가 비어도 자리는 지킨다 */
.pfnoteitem.tnote, .pfnoteitem.ttrade { background:var(--panel2); }
.pfnoteitem.tnote:hover, .pfnoteitem.tnote.on,
.pfnoteitem.ttrade:hover, .pfnoteitem.ttrade.on {
  background:color-mix(in srgb, var(--dim) 13%, var(--panel2)); }

/* ============================================================================
   투자노트 v3.6 (2026-08-14 마감 4건)
   ============================================================================ */
/* 좌측 열 = 옅은 회색 패널, 본문 = 흰색 — 목록과 글쓰는 곳의 명암을 뒤집는다 */
.pfnotelist { background:color-mix(in srgb, var(--panel2) 55%, var(--panel));
  border-right:0; border-radius:12px; padding:10px; }
.pnbody { background:var(--panel); }
/* 색상표 — 가장 오른쪽은 검정, '기본' 버튼 없음. 옛 노트의 회색은 계속 읽힌다 */
.pnbody .pnfg[data-pnc="black"] { color:#111827; }
#pncolor i.black { background:#111827; }
/* 표 — 우측 4열의 가로·세로 가운데 정렬은 파일 맨 위 nth-child 정본이 담당한다.
   여기서는 점 묶음이 셀 안에서도 가운데 서게만 한다 */
.pftbl td.sig .sigrow { justify-content:center; }

/* 매도신호 점 = 현금흐름 박스의 신호등 원 (app.css .sig 문법 — 원 + 은은한 링).
   초록/주황/빨강, 확인 불가(sgq)는 기존 점선 유지 */
.pftbl td.sig .fdot { width:7px; height:7px; flex:0 0 7px; }
.pftbl td.sig .fdot.sgok { background:#22c55e;
  box-shadow:0 0 0 2px color-mix(in srgb, #22c55e 18%, transparent); }
.pftbl td.sig .fdot.sgwarn { background:#f59e0b;
  box-shadow:0 0 0 2px color-mix(in srgb, #f59e0b 18%, transparent); }
.pftbl td.sig .fdot.sgfired { background:#ef4444;
  box-shadow:0 0 0 2px color-mix(in srgb, #ef4444 18%, transparent); }

/* ============================================================================
   여러 노트 골라두기 (v5.3, 2026-08-14) — Shift 범위 / Ctrl 하나씩 + 아래 작업 바
   ============================================================================ */
.pfnoteitem.msel, .pfnoteitem.msel:hover {
  background:color-mix(in srgb, var(--accent) 15%, var(--panel2));
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 60%, transparent); }
/* 화면 아래에 띄운다 — 패널 바닥에 붙이면 긴 목록에선 스크롤 밖으로 나가 손이 닿지 않는다(실측) */
.pnselbar { position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:120;
  display:flex; align-items:center; gap:6px; padding:6px 8px 6px 14px; border-radius:12px;
  background:linear-gradient(90deg, var(--accent), #45c9d8); color:#fff;
  box-shadow:0 10px 26px rgba(0,0,0,.24); white-space:nowrap; }
.pnselbar[hidden] { display:none !important; }     /* author display가 hidden을 이긴다 */
.pnselbar b { font-size:12.5px; font-weight:700; margin-right:4px; }
.pnselbar button { display:inline-flex; align-items:center; gap:5px; font:inherit;
  font-size:var(--fs-sub); font-weight:600; padding:6px 11px; border:0; border-radius:9px;
  background:rgba(255,255,255,.16); color:#fff; cursor:pointer; }
.pnselbar button:hover { background:rgba(255,255,255,.3); }
.pnselbar button.danger:hover { background:#dc2626; }
.pnselbar #pnselx { padding:6px; background:transparent; }
.pnselbar #pnselx:hover { background:rgba(255,255,255,.22); }
.pnselbar svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; }

/* ============================================================================
   오늘의 한 문장 (v5.7, 2026-08-19) — 요약 카드 옆 빈자리
   계정마다 하루 하나. 결(tone)은 테두리와 위 선에만 아주 옅게 얹는다.

   ⚠ 시도했다 되돌린 것 둘 (사용자 반려 2026-08-19) — **다시 하지 마라**:
     ① 머리말을 이중 괘선 딱지(박스)로 두르기 → "박스 넣기 전으로 돌리자"
     ② 카드 바탕을 해질녘 하늘 그라데이션으로 칠하기 → "이것도 아니다, 그냥 금장으로"
   남은 답은 처음 것이다: **바탕은 건드리지 않고, 금은 글자와 가는 선에만.**
   대신 읽히지 않던 원인(11.5px + 밝은 중간 톤)을 고친다 — 키우고 진하게.
   ============================================================================ */
/* 아래 표와의 간격 — 요약 카드와 표가 맞붙어 한 덩어리로 읽혔다 (사용자 지시 2026-08-19) */
.pfsumrow { display:flex; align-items:stretch; gap:12px; flex-wrap:wrap; margin-bottom:20px; }
/* 두 카드는 `align-items:stretch`라 키가 같은데, pPER 쪽만 내용이 위에 붙어 아래가 비었다
   (사용자 지적 2026-08-21). 옆의 '오늘의 한 문장'은 이미 세로 가운데다 — 같은 줄의 두 카드가
   서로 다른 기준으로 서 있으면 줄이 기울어 보인다. 같은 규칙으로 맞춘다. */
.pfsumrow .pfsum { flex:1 1 560px; justify-content:center; }
/* 카드는 옆 요약 카드와 같은 판을 쓴다. 눈에 띄는 힘은 색 면이 아니라
   **위쪽으로 흐르는 가는 선 + 여백 + 타이포**에서 나온다 (docs/28 모던 럭셔리). */
.pfquote { flex:1 1 320px; min-width:280px; position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center; gap:0;
  padding:16px 22px 15px;
  /* 테두리 한 바퀴가 결의 색을 아주 옅게 머금는다 (사용자 확정 2026-08-19) —
     선 하나만 칠하면 반쪽만 강조된 것처럼 보인다 */
  border:1px solid color-mix(in srgb, var(--pfq, var(--accent)) 32%, var(--line));
  box-shadow:0 1px 2px color-mix(in srgb, var(--pfq, var(--accent)) 7%, transparent); }
/* 위 모서리를 스치는 한 줄 — 결의 색이 왼쪽에서 시작해 소리 없이 사라진다 */
.pfquote::before { content:""; position:absolute; left:0; right:0; top:0; height:1.5px;
  background:linear-gradient(90deg, var(--pfq, var(--accent)), transparent 58%); }
/* 머리말 = **금장(箔) 문법** — 글리프를 얹지 않는다. 글자 자체에 금박을 입히고
   앞뒤로 가는 금선을 둔다. background-clip:text이 안 먹는 환경에서는 그냥 금색
   글자로 읽힌다(색을 먼저 준다).

   금박 띠는 처음보다 **어둡다**: 밝은 중간 톤(#e0c27e)이 밝은 바탕에 묻혀 글자가
   사라졌던 것이 박스를 씌우게 된 원인이었다. 중간을 낮추고 크기·굵기를 올리면
   박스 없이도 읽힌다 (사용자 지시 2026-08-19 "조금 더 키우고 조금 더 진하게"). */
.pfquote { --gold:#7d5c1c; --gold-foil:linear-gradient(100deg, #6b4d13, #b8934a 44%, #85641f 80%); }
body[data-theme="dark"] .pfquote {
  --gold:#c9a961; --gold-foil:linear-gradient(100deg, #a8823a, #e6cd93 44%, #bd9647 80%); }
.pfqkick { display:flex; align-items:center; gap:10px; margin-bottom:12px;
  font-size:13px; font-weight:800; letter-spacing:.17em; color:var(--gold); }
.pfqkick b { font-weight:800; background:var(--gold-foil); -webkit-background-clip:text;
  background-clip:text; -webkit-text-fill-color:transparent; }
/* 라벨 앞뒤의 금선 — 앞은 짧게 끊고, 뒤는 카드 끝으로 흐려진다 */
.pfqkick::before { content:""; flex:none; width:15px; height:1px; background:var(--gold-foil); }
.pfqkick::after { content:""; flex:1; height:1px; min-width:16px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--gold) 55%, transparent), transparent 88%); }
.pfqtext { position:relative; margin:0; font-size:15px; font-weight:600; line-height:1.7;
  letter-spacing:-.012em; color:var(--text); word-break:keep-all; }
.pfqwho { margin-top:11px; font-size:11.5px; font-weight:600; letter-spacing:.01em;
  color:var(--dim); text-align:right; }
.pfqwho::before { content:""; display:inline-block; width:16px; height:1px; margin:0 7px 4px 0;
  background:currentColor; opacity:.55; }
/* 여섯 결 — **바탕을 칠하지 않는다**(색 면이 들어오는 순간 표와 겉돈다, 사용자 반려 2026-08-19) */
.pfq-patience   { --pfq: #0f766e; }
.pfq-discipline { --pfq: #52525b; }
.pfq-contrarian { --pfq: #1d4ed8; }
.pfq-humility   { --pfq: #6d28d9; }
.pfq-value      { --pfq: #047857; }
.pfq-risk       { --pfq: #b45309; }
@media (max-width: 900px) { .pfquote { flex-basis:100%; } }

/* ============================================================================
   유튜브 미리보기 카드 (v5.9, 2026-08-19) — 노트 안의 한 덩어리
   크기 선택지는 두지 않는다(사용자 확정: 미리보기 하나로). 폭은 본문에 맞춘다.
   ============================================================================ */
.pnbody .pnyt { margin:8px 0; border:1px solid var(--line); border-radius:12px;
  overflow:hidden; background:var(--panel); max-width:520px; user-select:none; }
.pnythead { display:flex; align-items:center; gap:7px; padding:8px 8px 8px 12px; }
.pnyttitle { flex:none; max-width:62%; font-size:12.5px; font-weight:700; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pnytby { flex:1; font-size:11px; color:var(--dim);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pnytmore { flex:none; margin-left:auto; display:inline-flex; align-items:center;
  justify-content:center; width:24px; height:24px; border:0; border-radius:7px;
  background:transparent; color:var(--dim); cursor:pointer; }
.pnytmore:hover { background:var(--panel2); color:var(--text); }
.pnytmore svg { width:15px; height:15px; fill:currentColor; stroke:none; }
/* AI 요약 버튼 — 오른쪽 그룹(요약·⋯)은 요약 버튼의 auto 마진이 만든다 */
.pnytsum { flex:none; margin-left:auto; display:inline-flex; align-items:center; gap:4px;
  padding:3px 8px; border:1px solid var(--line); border-radius:8px; background:transparent;
  color:var(--dim); font-size:11px; font-weight:600; cursor:pointer;
  transition:background-color .12s ease, color .12s ease; }
.pnytsum:hover { background:var(--panel2); color:var(--text); }
/* 제미나이 4색 별 — 위 빨강·오른쪽 파랑·아래 초록·왼쪽 노랑 (콘익 그라데이션 + 별 마스크).
   SVG 선형 그라데이션으론 네 귀퉁이 색 배치가 안 나와 CSS 마스크로 오린다. */
.pnytstar { flex:none; width:13px; height:13px; display:inline-block;
  background:conic-gradient(from 0deg, #EA4335, #4285F4 25%, #34A853 50%, #FBBC04 75%, #EA4335);
  -webkit-mask:url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M12 1.5c.9 5.8 4.7 9.6 10.5 10.5-5.8.9-9.6 4.7-10.5 10.5C11.1 16.7 7.3 12.9 1.5 12 7.3 11.1 11.1 7.3 12 1.5z"/%3E%3C/svg%3E') center/contain no-repeat;
  mask:url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M12 1.5c.9 5.8 4.7 9.6 10.5 10.5-5.8.9-9.6 4.7-10.5 10.5C11.1 16.7 7.3 12.9 1.5 12 7.3 11.1 11.1 7.3 12 1.5z"/%3E%3C/svg%3E') center/contain no-repeat; }
.pnytsum.busy { opacity:.85; cursor:default; color:var(--accent); border-color:var(--accent); }
.pnytsum.busy .pnytstar { animation:pnytspin .9s linear infinite; }
.pnythead .pnytmore { margin-left:0; }
/* 요약 대기 자리 — 카드 아래에 요약이 앉을 곳을 미리 잡는다 (저장되지 않는 표시 전용) */
.pnbody .pnytwait { max-width:520px; margin:6px 0 10px; padding:10px 12px 12px;
  border:1px dashed var(--line); border-radius:10px; user-select:none; }
.pnytwaithead { display:flex; align-items:center; gap:7px; margin-bottom:9px;
  font-size:12px; font-weight:600; color:var(--text); }
.pnytwaithead em { font-style:normal; font-weight:400; font-size:11px; color:var(--dim);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pnytspin { flex:none; width:13px; height:13px; }
.pnytspin circle { fill:none; stroke:var(--accent); stroke-width:2.6; stroke-linecap:round;
  stroke-dasharray:40; stroke-dashoffset:26; transform-origin:center;
  animation:pnytspin .9s linear infinite; }
@keyframes pnytspin { to { transform:rotate(360deg); } }
.pnytwait .skel { min-height:11px; }
/* 제목 없는 노트 — 빈 굵은 줄로 두면 "빈 노트가 선택된" 오해를 만든다 (2026-08-27) */
.pfnoteitem b.pnuntitled { color:var(--dim); font-weight:500; }
/* 요약 반응은 공용 스낵바(#jvtoast, app.css)로 말한다 — 앵커 말풍선(v1)은 같은 날 폐지
   (사용자 확정 2026-08-27, 제미나이 벤치마킹) */
.pnytbody { position:relative; aspect-ratio:16/9; background:#0d0f12; }
.pnytthumb { width:100%; height:100%; object-fit:cover; display:block; margin:0; border-radius:0; }
.pnytbody iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.pnytplay { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:inline-flex; align-items:center; justify-content:center; width:58px; height:40px;
  border:0; border-radius:11px; background:rgba(220,32,32,.92); color:#fff; cursor:pointer;
  transition:transform .12s ease, background-color .12s ease; }
.pnytplay:hover { background:#dc2020; transform:translate(-50%,-50%) scale(1.06); }
.pnytplay svg { width:22px; height:22px; fill:currentColor; stroke:none; }
/* .pnmenu가 right:0·top:32px로 붙어 있어 left만 주면 좌우로 늘어난다 — 둘 다 풀어 준다 */
.pnytmenu { position:absolute; right:auto; top:auto; z-index:240; min-width:172px; }

/* 표시 방식 3택 (v5.9 2차) — 미리보기(기본) / URL 링크 / 제목 */
.pnbody .pnyt.pnyt-url, .pnbody .pnyt.pnyt-title { max-width:100%; }
.pnytline { display:flex; align-items:center; gap:8px; padding:7px 8px 7px 11px; }
.pnytlink { flex:1; font-size:12.5px; color:var(--accent); text-decoration:none;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pnytlink:hover { text-decoration:underline; }
.pnytmark { flex:none; width:17px; height:17px; fill:#dc2020; stroke:none; }
.pnytmark .pnytmarkp { fill:#fff; }
.pnythead .pnytmark { margin-right:1px; }
/* 메뉴 — 위는 보기 방식(현재 것에 점), 아래는 동작 */
.pnytmsec { padding:6px 10px 4px; font-size:10.5px; letter-spacing:.04em; color:var(--dim); }
.pnytmenu button { display:flex; align-items:center; gap:8px; }
.pnytmenu button i { flex:none; width:5px; height:5px; border-radius:50%; background:transparent; }
.pnytmenu button.on { font-weight:700; color:var(--accent); }
.pnytmenu button.on i { background:var(--accent); }
.pnytmenu button.danger:hover { color:#dc2626; }
.pnytmsep { height:1px; margin:5px 8px; background:var(--line); }

/* ===== 투자노트 에디터 · 폰 (머신러너님 지적 2026-08-30 "노트 높이가 너무 낮아") =====
   `.pnbody`는 `flex:1; min-height:0`이라 **부모가 주는 만큼만** 차지한다. 데스크톱은 패널이
   화면 높이를 받아 넉넉하지만, 폰에서는 위(제목·툴바·템플릿 칩)가 자리를 다 먹고 남는 것이
   글 쓰는 칸이 됐다 — 실측상 77px, 세 줄도 안 들어간다. 노트는 **쓰는 곳**이 주인공이다.
   그래서 폰에서만 바닥을 깐다: 화면의 42%(812px 폰에서 ≈341px)면 열 줄 남짓이 보인다.
   `min-height:0`을 덮는 것이라 부모가 그만큼 늘어난다 — 카드가 커지고 페이지가 길어질 뿐,
   잘리지 않는다(패널이 고정 높이가 아니다).
   ⚠ 이 파일에 두는 이유: portfolio.css가 app.css **뒤에** 로드되므로, app.css에 쓰면 위
   `.pnbody { min-height:0 }`에 순서로 진다.

   툴바(.pntools)는 버튼이 열 개가 넘어 폰 폭을 넘는다 — 오른쪽 것들이 잘려 있었다.
   가로로 밀어 볼 수 있게 한다(줄바꿈보다 낫다: 한 줄이라 도구 띠로 읽힌다). */
@media (pointer:coarse) and (max-width:900px), (max-width:560px) {
  .pnbody { min-height:42vh; }
  .pnbar { min-width:0; }
  .pntools { overflow-x:auto; scrollbar-width:none; max-width:100%; }
  .pntools::-webkit-scrollbar { display:none; }
  .pntool { flex:none; }
}

/* ===== 모듈 대제목 · 폰 (실측 2026-08-30 — "AI vs AI"가 두 줄로 쪼개졌다) =====
   대제목은 `display:flex`로 [장식선 96px] [제목] [부제] [장식선 96px]을 한 줄에 세운다.
   데스크톱에서는 폭이 남아 우아하지만, 343px 폰에서는 **장식선 둘이 192px을 먼저 가져가**
   제목이 "AI vs / AI"로 끊기고 부제가 그 옆에 끼어 붙는다. 이름이 두 동강 나면 제목이 아니다.
   폰에서는 장식을 걷는다 — 선은 뜻이 아니라 멋이고, 좁은 화면에서 멋이 뜻을 밀어내면 안 된다.
   부제는 제 줄로 내린다. 이 규칙은 **전 모듈 공용**이라(위 공유 선택자) 한 번에 낫는다. */
@media (pointer:coarse) and (max-width:900px), (max-width:560px) {
  #view-portfolio > h2, #view-portfolio .pfevalh,
  #view-industry > h2, #view-market > h2, #view-sentiment > h2,
  #view-compare > h2, #view-screen > h2, #view-aivsai > h2 {
    flex-wrap:wrap; gap:4px 10px; margin:18px 0 14px; }
  #view-portfolio > h2::before, #view-portfolio > h2::after,
  #view-portfolio .pfevalh::before, #view-portfolio .pfevalh::after,
  #view-industry > h2::before, #view-industry > h2::after,
  #view-market > h2::before, #view-market > h2::after,
  #view-sentiment > h2::before, #view-sentiment > h2::after,
  #view-compare > h2::before, #view-compare > h2::after,
  #view-screen > h2::before, #view-screen > h2::after,
  #view-aivsai > h2::before, #view-aivsai > h2::after { display:none; }
  /* 부제(— 네 AI의 가상 포트폴리오 기록)는 제목 아래 제 줄로 */
  #view-industry > h2 small, #view-market > h2 small, #view-sentiment > h2 small,
  #view-compare > h2 small, #view-screen > h2 small, #view-aivsai > h2 small {
    flex:1 0 100%; }
}

/* ===== 폰: 요약 머리의 곁가지 두 줄을 걷는다 (머신러너님 지시 2026-08-31
   "모바일에선 매우 단순해야 한다") =====
   ① `.pfcount` — "8종목 · 총 평가 1.37억 · 종가 2026-08-31". 셋 다 **바로 아래에
      이미 있는 것**이다: 종목 수는 표가, 평가액은 손익 카드('투자원금 → 평가액')가,
      종가일은 시세 표기가 말한다. 폰에서는 `.pfbar`가 접혀 이 줄이 통째로 한 행을
      차지하는데, 그 행이 주는 새 정보가 없다.
   ② `.pfsum .agleg` — A/B/C/D 구간 범례 4칸. 폰에서 두 줄로 접히며 카드에서 가장
      긴 덩어리가 되는데, 정작 읽는 것은 위의 큰 숫자(pPER)와 **색 띠**다.
      띠(`.agbar`)는 남긴다 — 분포를 한눈에 주는 것은 숫자가 아니라 그 띠다.
   숫자를 지우는 게 아니라 **중복된 말을 지운다.** 노드는 남으므로 장중 시세 갱신이
   `#pftotal`을 찾는 경로도 그대로다(`display:none`이지 제거가 아니다).
   데스크톱은 넓어 두 줄 다 제자리를 지킨다 — 이 블록에 안 걸린다. */
@media (pointer:coarse) and (max-width:900px), (max-width:560px) {
  .pfbar .pfcount { display:none; }
  .pfsum .agleg { display:none; }
}