/* ═══════════════════════════════════════════════════════════════════════
   stock · Porcelain 페이지 컴포넌트 (2026-09-02 · 시안 B 확장)
   ─ 모든 클래스는 pc- 접두 → 페이지별 기존 CSS(.card/.kpi/.tbl …)와 충돌 없음.
   ─ 색·글꼴·그림자는 전부 css/tokens.css 의 --s-* 토큰 → 라이트/다크 자동.
   ─ 계좌관리(dashboard.jsp) 의 .dash-* 와 같은 규격: 헤더 24px/600 · KPI 30px/300 ·
     카드 무테두리+그림자 r12 · 표 th 11.5px/500 · 태그 11px/600.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 페이지 골격 ── */
.pc-main { padding: 34px 40px 48px; margin: 0 auto; width: 100%; max-width: 1280px;
           display: flex; flex-direction: column; gap: 22px; box-sizing: border-box; }
.pc-main.wide { max-width: 1440px; }
.pc-main > * { min-width: 0; }

/* ── 페이지 헤더 ── */
.pc-ph { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.pc-ph h1, .pc-ph h2 { font-size: 24px; font-weight: 600; margin: 0; letter-spacing: -.01em; color: var(--s-txt); line-height: 1.25; }
.pc-ph .pc-sub { color: var(--s-dim); font-size: 12.5px; margin-top: 6px; line-height: 1.5; }
.pc-ph .pc-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pc-ph .pc-when { font-family: var(--s-mono); font-size: 12px; color: var(--s-dim); text-align: right; line-height: 1.8; font-variant-numeric: tabular-nums; }

/* ── 버튼 ── (기존 페이지 버튼을 덮지 않는다 · 새 마크업에서만 사용) */
.pc-btn { font: inherit; font-size: 12.5px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--s-line);
          background: var(--s-panel); color: var(--s-txt); cursor: pointer; white-space: nowrap; line-height: 1.3;
          transition: background .12s, border-color .12s; }
.pc-btn:hover { background: var(--s-panel-2); }
.pc-btn.pri { background: var(--s-accent-fill, var(--s-accent)); border-color: var(--s-accent-fill, var(--s-accent)); color: #fff; font-weight: 500; }
.pc-btn.pri:hover { filter: brightness(1.08); background: var(--s-accent-fill, var(--s-accent)); }
.pc-btn.danger { color: var(--s-live-ink, var(--s-live)); border-color: color-mix(in srgb, var(--s-live) 45%, transparent); }
.pc-btn.danger:hover { background: var(--s-live-soft, transparent); }
.pc-btn.sm { padding: 4px 10px; font-size: 12px; }
.pc-btn:disabled { opacity: .5; cursor: default; }
.pc-btn:focus-visible { outline: 2px solid var(--s-accent); outline-offset: 2px; }

/* 세그먼트 토글 (select 대체 · 각 항목은 button 또는 label) */
.pc-seg { display: inline-flex; background: var(--s-panel-2); border-radius: 999px; padding: 3px; gap: 2px; }
.pc-seg > * { font: inherit; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; color: var(--s-dim); background: transparent; border: 0; cursor: pointer; white-space: nowrap; line-height: 1.3; }
.pc-seg > .on, .pc-seg > [aria-pressed="true"], .pc-seg > input:checked + span { background: var(--s-panel); color: var(--s-txt); font-weight: 500; box-shadow: 0 1px 2px rgba(22,27,38,.12); }
.pc-seg > *:focus-visible { outline: 2px solid var(--s-accent); outline-offset: 1px; }

/* ── KPI 띠 ── */
.pc-kpis { display: grid; grid-template-columns: repeat(5, 1fr); background: var(--s-panel); border-radius: var(--s-r-lg, 12px);
           box-shadow: var(--s-shadow); padding: 6px 0; }
.pc-kpis.c3 { grid-template-columns: repeat(3, 1fr); }
.pc-kpis.c4 { grid-template-columns: repeat(4, 1fr); }
.pc-kpis.c6 { grid-template-columns: repeat(6, 1fr); }
.pc-kpi { border-left: 1px solid var(--s-line); padding: 20px 26px 18px; min-width: 0; }
.pc-kpi:first-child { border-left: 0; }
.pc-kpi .k { font-size: 11.5px; color: var(--s-dim); letter-spacing: .04em; }
.pc-kpi .v { font-weight: var(--s-num-w, 300); font-size: 30px; margin-top: 8px; letter-spacing: -.02em; line-height: 1.1;
             font-variant-numeric: tabular-nums; color: var(--s-txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-kpi .v small { font-size: 14px; color: var(--s-dim); margin-left: 3px; font-weight: 400; }
.pc-kpi .v.word { font-size: 22px; font-weight: 500; }
.pc-kpi .m { font-size: 12px; color: var(--s-dim); margin-top: 8px; font-family: var(--s-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-up { color: var(--s-up) !important; } .pc-dn { color: var(--s-dn) !important; }
.pc-ok { color: var(--s-ok) !important; } .pc-wn { color: var(--s-warn-ink, var(--s-warn)) !important; } .pc-bad { color: var(--s-live-ink, var(--s-live)) !important; }

/* ── 그리드 ── */
.pc-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 22px; align-items: start; }
.pc-grid.eq { grid-template-columns: 1fr 1fr; }
.pc-grid.r { grid-template-columns: 1fr 1.5fr; }
.pc-grid.side { grid-template-columns: 240px 1fr; }
.pc-grid > * { min-width: 0; }
.pc-col { display: flex; flex-direction: column; gap: 22px; min-width: 0; }

/* ── 카드 ── */
.pc-card { background: var(--s-panel); border-radius: var(--s-r-lg, 12px); box-shadow: var(--s-shadow); min-width: 0; border: 0; }
.pc-card.flat { box-shadow: none; background: var(--s-panel-2); }
.pc-card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px 0; flex-wrap: wrap; }
.pc-card-h h2, .pc-card-h h3 { margin: 0; font-size: 15.5px; font-weight: 600; letter-spacing: -.005em; color: var(--s-txt); border: 0; padding: 0; }
.pc-card-h h2 small, .pc-card-h h3 small { color: var(--s-dim); font-weight: 400; font-size: 12px; margin-left: 8px; }
.pc-card-h .pc-act { font-size: 12px; color: var(--s-accent-2); text-decoration: none; }
.pc-card-h .pc-act:hover { text-decoration: underline; }
.pc-card-h .pc-act.dim { color: var(--s-dim); }
.pc-card-h .pc-acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pc-card-b { padding: 14px 22px 20px; }
.pc-card-b.tight { padding-top: 8px; }
.pc-card-b.scroll { overflow-x: auto; }
/* 접힘 카드 (details) */
details.pc-card > summary { list-style: none; cursor: pointer; padding: 14px 22px; font-size: 13.5px; font-weight: 500; color: var(--s-txt);
                            display: flex; align-items: center; justify-content: space-between; gap: 10px; border-radius: var(--s-r-lg, 12px); }
details.pc-card > summary::-webkit-details-marker { display: none; }
details.pc-card > summary small { color: var(--s-dim); font-weight: 400; margin-left: 8px; }
details.pc-card > summary::after { content: '펼치기 ▾'; color: var(--s-dim); font-size: 12px; font-weight: 400; }
details.pc-card[open] > summary::after { content: '접기 ▴'; }
details.pc-card[open] > summary { border-bottom: 1px solid var(--s-line-soft); }

/* ── 표 ── */
.pc-tbl { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--s-txt); }
.pc-tbl th { text-align: left; font-weight: 500; color: var(--s-dim); font-size: 11.5px; letter-spacing: .04em; padding: 8px 8px;
             border-bottom: 1px solid var(--s-line); white-space: nowrap; background: transparent; }
.pc-tbl td { padding: 10px 8px; border-bottom: 1px solid var(--s-line-soft); vertical-align: middle; }
.pc-tbl tbody tr:last-child td { border-bottom: 0; }
.pc-tbl tbody tr:hover td { background: var(--s-panel-2); }
.pc-tbl .n, .pc-tbl td.num, .pc-tbl th.num { text-align: right; font-family: var(--s-mono); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.pc-tbl th.n, .pc-tbl th.num { font-family: var(--s-sans); }
.pc-tbl .sym { font-weight: 500; }
.pc-tbl .sym small { color: var(--s-dim); font-family: var(--s-mono); margin-left: 6px; font-weight: 400; font-size: 11.5px; }
.pc-tbl .dimt { color: var(--s-dim); font-size: 12px; }
.pc-tbl tr.sel td { background: var(--s-accent-soft, color-mix(in srgb, var(--s-accent) 6%, transparent)); }
.pc-tbl .empty-row td { color: var(--s-dim); text-align: center; padding: 22px; }

/* ── 태그 · 필 ── */
.pc-tag { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 4px; font-weight: 600; letter-spacing: .03em; white-space: nowrap; line-height: 1.5; }
.pc-tag.b { color: var(--s-up); background: var(--s-up-soft); }
.pc-tag.s { color: var(--s-dn-ink, var(--s-dn)); background: var(--s-dn-soft); }
.pc-tag.g { color: var(--s-dim); background: var(--s-panel-2); }
.pc-tag.ok { color: var(--s-ok); background: var(--s-ok-soft); }
.pc-tag.wn { color: var(--s-warn-ink, var(--s-warn)); background: var(--s-warn-soft); }
.pc-tag.cr { color: var(--s-live-ink, var(--s-live)); background: var(--s-live-soft); }
.pc-tag.acc { color: var(--s-accent); background: var(--s-accent-soft, color-mix(in srgb, var(--s-accent) 10%, transparent)); }
.pc-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
           letter-spacing: .02em; border: 1px solid transparent; white-space: nowrap; line-height: 1.5; }
.pc-pill .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pc-pill.live { color: var(--s-live-ink, var(--s-live)); border-color: color-mix(in srgb, var(--s-live) 45%, transparent); background: var(--s-live-soft); }
.pc-pill.armed { color: #fff; background: var(--s-live-fill, var(--s-live)); border-color: var(--s-live-fill, var(--s-live)); }
.pc-pill.paper { color: var(--s-dn-ink, var(--s-dn)); border-color: color-mix(in srgb, var(--s-dn) 45%, transparent); background: var(--s-dn-soft); }
.pc-pill.ok { color: var(--s-ok); border-color: color-mix(in srgb, var(--s-ok) 45%, transparent); background: var(--s-ok-soft); }
.pc-pill.wn { color: var(--s-warn-ink, var(--s-warn)); border-color: color-mix(in srgb, var(--s-warn) 45%, transparent); background: var(--s-warn-soft); }
.pc-pill.off { color: var(--s-dim); border-color: var(--s-line); background: var(--s-panel-2); }
@media (prefers-reduced-motion: no-preference) {
  .pc-pill.armed .d, .pc-pill.ok .d, .pc-pill.live .d { animation: pc-pulse 2.2s ease-in-out infinite; }
  @keyframes pc-pulse { 50% { opacity: .35; } }
}

/* ── 게이트 행 (상태 점 + 제목/부제 + 값) ── */
.pc-gates { display: grid; gap: 8px; }
.pc-gates.c4 { grid-template-columns: repeat(4, 1fr); }
.pc-gate { display: grid; grid-template-columns: 8px 1fr auto; gap: 14px; align-items: center; padding: 11px 14px;
           border-radius: var(--s-r, 8px); background: var(--s-panel-2); }
.pc-gate .st { width: 8px; height: 8px; border-radius: 50%; background: var(--s-line); }
.pc-gate .st.ok { background: var(--s-ok); } .pc-gate .st.wn { background: var(--s-warn); } .pc-gate .st.bad { background: var(--s-live); }
.pc-gate .t { font-size: 13px; font-weight: 500; color: var(--s-txt); min-width: 0; }
.pc-gate .t small { display: block; color: var(--s-dim); font-weight: 400; font-size: 12px; margin-top: 2px; line-height: 1.45; }
.pc-gate .v { font-family: var(--s-mono); font-size: 12px; color: var(--s-dim); text-align: right; white-space: nowrap; }
.pc-gate .v.wn { color: var(--s-warn-ink, var(--s-warn)); } .pc-gate .v.bad { color: var(--s-live-ink, var(--s-live)); } .pc-gate .v.ok { color: var(--s-ok); }

/* ── 폼 ── */
.pc-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px 16px; }
.pc-form .span { grid-column: 1 / -1; }
.pc-form label, .pc-field { display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; color: var(--s-dim); letter-spacing: .03em; }
.pc-in, .pc-form input:not([type=checkbox]):not([type=radio]), .pc-form select, .pc-form textarea {
  font: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--s-line); border-radius: var(--s-r, 8px);
  background: var(--s-panel); color: var(--s-txt); box-sizing: border-box; width: 100%; }
.pc-in.mono, .pc-form input[type=number], .pc-form input[type=time], .pc-form input[type=date] { font-family: var(--s-mono); font-variant-numeric: tabular-nums; }
.pc-in:focus, .pc-form input:focus, .pc-form select:focus, .pc-form textarea:focus { outline: 2px solid var(--s-accent); outline-offset: 0; border-color: var(--s-accent); }
.pc-in.round { border-radius: 999px; padding: 6px 12px; width: auto; }
.pc-form .chk { flex-direction: row; align-items: center; gap: 8px; font-size: 13px; color: var(--s-txt); letter-spacing: 0; }
.pc-form .chk input { width: auto; }

/* ── 칩 · 기타 ── */
.pc-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pc-chip { font: inherit; font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--s-panel-2); color: var(--s-txt); border: 0; cursor: pointer; line-height: 1.4; }
.pc-chip:hover { background: var(--s-line); }
.pc-chip.on { background: var(--s-accent-fill, var(--s-accent)); color: #fff; }
.pc-chip.sep { background: transparent; color: var(--s-dim); padding: 0 2px; cursor: default; }
.pc-mono { font-family: var(--s-mono); font-size: 12px; }
.pc-dim { color: var(--s-dim); font-size: 12.5px; line-height: 1.65; }
.pc-empty { border: 1px dashed var(--s-line); border-radius: var(--s-r, 8px); padding: 26px; text-align: center; color: var(--s-dim); font-size: 12.5px; line-height: 1.7; }
.pc-stack { display: flex; flex-direction: column; gap: 8px; }
.pc-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pc-row.between { justify-content: space-between; }
.pc-acc { border-radius: var(--s-r, 8px); background: var(--s-panel-2); padding: 12px 16px; display: flex; align-items: center; justify-content: space-between;
          gap: 10px; font-size: 13px; font-weight: 500; color: var(--s-txt); }
.pc-acc small { color: var(--s-dim); font-weight: 400; margin-left: 8px; }
.pc-acc .car { color: var(--s-dim); font-size: 12px; font-family: var(--s-mono); }
.pc-acc.cur { outline: 1.5px solid var(--s-accent); }
.pc-result { margin-top: 10px; padding: 10px 14px; border-radius: var(--s-r, 8px); background: var(--s-panel-2); font-family: var(--s-mono); font-size: 12px;
             color: var(--s-txt-2, var(--s-txt)); white-space: pre-wrap; word-break: break-all; max-height: 320px; overflow: auto; }
.pc-result:empty { display: none; }

/* 좌측 색인 (설정) */
.pc-sidenav { position: sticky; top: calc(var(--s-nav-h, 100px) + 16px); display: flex; flex-direction: column; gap: 2px; }
.pc-sidenav .gl { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--s-dim); padding: 12px 12px 6px; }
.pc-sidenav a { padding: 7px 12px; border-radius: 6px; color: var(--s-dim); text-decoration: none; font-size: 12.5px; }
.pc-sidenav a:hover { color: var(--s-txt); }
.pc-sidenav a.on { background: var(--s-panel); color: var(--s-txt); font-weight: 500; box-shadow: 0 1px 2px rgba(22,27,38,.08); }

/* 채팅 말풍선 (LLM) */
.pc-msg { display: flex; gap: 12px; }
.pc-msg .who { width: 28px; height: 28px; border-radius: 50%; background: var(--s-panel-2); display: grid; place-items: center; font-size: 11px; font-weight: 600; color: var(--s-dim); flex: none; }
.pc-msg .who.me { background: var(--s-accent-fill, var(--s-accent)); color: #fff; }
.pc-msg .txt { background: var(--s-panel-2); border-radius: 12px; padding: 10px 14px; font-size: 13px; line-height: 1.65; max-width: 72ch; min-width: 0; color: var(--s-txt); white-space: pre-wrap; word-break: break-word; }
.pc-msg.me { flex-direction: row-reverse; }
.pc-msg.me .txt { background: var(--s-accent-soft, color-mix(in srgb, var(--s-accent) 8%, transparent)); }

/* 타임라인 피드 (뉴스) */
.pc-feed { display: grid; grid-template-columns: 64px 1fr; gap: 0 18px; }
.pc-feed .t { font-family: var(--s-mono); font-size: 11.5px; color: var(--s-dim); padding-top: 12px; }
.pc-feed .it { padding: 11px 0; border-bottom: 1px solid var(--s-line-soft); min-width: 0; }
.pc-feed .it .h1 { font-size: 13.5px; font-weight: 500; line-height: 1.45; color: var(--s-txt); }
.pc-feed .it .h1 a { color: inherit; text-decoration: none; }
.pc-feed .it .h1 a:hover { text-decoration: underline; }
.pc-feed .it .m { color: var(--s-dim); font-size: 12px; margin-top: 4px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* 세션 카드 (모의) */
.pc-sesh { border-radius: var(--s-r, 8px); background: var(--s-panel-2); padding: 14px 16px; display: grid; gap: 6px; cursor: pointer; }
.pc-sesh:hover { background: var(--s-line-soft); }
.pc-sesh .nm { font-weight: 600; font-size: 13.5px; display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--s-txt); }
.pc-sesh .v { font-size: 22px; font-weight: var(--s-num-w, 300); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pc-sesh .m { color: var(--s-dim); font-size: 12px; font-family: var(--s-mono); }
.pc-sesh.on { outline: 1.5px solid var(--s-accent); }

/* 차트 자리 */
.pc-legend { display: flex; gap: 16px; font-size: 11.5px; color: var(--s-dim); font-family: var(--s-mono); margin-top: 8px; flex-wrap: wrap; }
.pc-legend i { display: inline-block; width: 10px; height: 2px; vertical-align: middle; margin-right: 5px; }

/* ── 반응형 ── */
@media (max-width: 1279px) {
  .pc-kpis, .pc-kpis.c6 { grid-template-columns: repeat(3, 1fr); }
  .pc-kpi { border-left: 0; border-top: 1px solid var(--s-line-soft); }
  .pc-kpi:nth-child(-n+3) { border-top: 0; }
  .pc-grid, .pc-grid.eq, .pc-grid.r { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) {
  .pc-grid.side { grid-template-columns: 1fr; }
  .pc-sidenav { position: static; flex-direction: row; flex-wrap: wrap; }
  .pc-sidenav .gl { width: 100%; }
  .pc-gates.c4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .pc-main { padding: 20px 14px 36px; }
  .pc-kpis, .pc-kpis.c6, .pc-kpis.c4, .pc-kpis.c3 { grid-template-columns: repeat(2, 1fr); }
  .pc-kpi { padding: 14px 16px 12px; }
  .pc-kpi .v { font-size: 24px; }
  .pc-card-h, .pc-card-b { padding-left: 14px; padding-right: 14px; }
  .pc-feed { grid-template-columns: 48px 1fr; }
}