/* ── 포트폴리오 비교 페이지 (pc- prefix) ── */

.pc-warnings {
    margin-bottom: 1rem;
}
.pc-warning {
    padding: 0.625rem 0.875rem;
    border-radius: 6px;
    background: var(--color-bg-warning, rgba(234, 179, 8, 0.08));
    border: 1px solid var(--color-border-warning, rgba(234, 179, 8, 0.2));
    color: var(--color-text-secondary);
    font-size: 0.78rem;
    line-height: 1.5;
    margin-bottom: 0.5rem;
}
.pc-warning i {
    color: var(--color-warning, #eab308);
    margin-right: 0.25rem;
}

.pc-container {
    max-width: 1280px;
}

/* ── 색상 변수 (A/B 구분) ── */
:root {
    --pc-color-a: #2563eb;
    --pc-color-a-bg: color-mix(in srgb, var(--color-primary) 8%, transparent);
    --pc-color-a-border: color-mix(in srgb, var(--color-primary) 25%, transparent);
    --pc-color-b: #0d9488;
    --pc-color-b-bg: rgba(13, 148, 136, 0.08);
    --pc-color-b-border: rgba(13, 148, 136, 0.25);
}

/* ── 프리셋 칩 ── */
.pc-presets {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
}
.pc-presets-label {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}
.pc-presets-chips {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.pc-preset-chip {
    display: inline-block;
    padding: 5px 12px;
    border: 1px solid var(--color-border);
    border-radius: 100px;
    background: var(--color-bg-primary);
    color: var(--color-text-secondary);
    font-size: 0.78rem;
    cursor: pointer;
    transition: var(--transition-base);
    white-space: nowrap;
}
.pc-preset-chip:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--pc-color-a-bg);
}
.pc-preset-chip--active {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--pc-color-a-bg);
    font-weight: 600;
}

/* ── 모바일 탭 ── */
.pc-mobile-tabs {
    display: none;
    gap: 0;
    margin-bottom: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.pc-mobile-tab {
    flex: 1;
    padding: 8px 0;
    border: none;
    background: var(--color-bg-secondary);
    color: var(--color-text-muted);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-base);
}
.pc-mobile-tab--active {
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-weight: 600;
}
.pc-mobile-tab:first-child.pc-mobile-tab--active {
    border-bottom: 2px solid var(--pc-color-a);
}
.pc-mobile-tab:last-child.pc-mobile-tab--active {
    border-bottom: 2px solid var(--pc-color-b);
}

/* ── 포트폴리오 입력 영역 ── */
.pc-input-area {
    margin-bottom: var(--space-6);
}
.pc-portfolios {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}
.pc-portfolio-panel {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.pc-portfolio-panel[data-idx="0"] {
    border-top: 2px solid var(--pc-color-a);
}
.pc-portfolio-panel[data-idx="1"] {
    border-top: 2px solid var(--pc-color-b);
}

.pc-portfolio-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
}
.pc-portfolio-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}
.pc-portfolio-badge--a { background: var(--pc-color-a); }
.pc-portfolio-badge--b { background: var(--pc-color-b); }

.pc-portfolio-name {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--color-text-primary);
    font-size: 0.85rem;
    font-weight: 600;
    outline: none;
    padding: 2px 4px;
    border-radius: var(--radius-sm);
}
.pc-portfolio-name:focus {
    background: var(--color-bg-secondary);
}
.pc-portfolio-name::placeholder {
    color: var(--color-text-muted);
    font-weight: 500;
}

/* 내 포트폴리오 불러오기 (T13: gi-dropdown mode=menu로 교체).
 * `.pc-portfolio-dropdown` / `.pc-portfolio-dropdown-item` 블록 삭제 — 공용
 * gi-dropdown CSS(`components/gi-dropdown.css`)에서 스타일 상속.
 * 여기는 트리거 배치 래퍼만 유지.
 */
.pc-load-portfolio-wrap {
    padding: 0 var(--space-4);
    padding-top: var(--space-2);
    position: relative;
}
/* gi-dropdown 루트는 기본 inline-block. 트리거를 래퍼 폭에 맞추지 않고
 * 자기 너비대로 두어 좌측 정렬을 유지한다. */
.pc-load-portfolio-dd {
    display: inline-block;
}

/* 검색 */
.pc-portfolio-search {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    position: relative;
}
.pc-portfolio-search-input {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    font-size: 0.8rem;
    outline: none;
}
.pc-portfolio-search-input:focus {
    border-color: var(--color-primary);
}
.pc-portfolio-search-input::placeholder {
    color: var(--color-text-muted);
}
.pc-portfolio-search-dd .gi-dd__trigger--search {
    height: 36px;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-sm);
}
.pc-portfolio-search-dd .gi-dd__panel {
    max-height: 220px;
}
.pc-portfolio-search-results {
    position: absolute;
    top: 100%;
    left: var(--space-4);
    right: var(--space-4);
    z-index: var(--z-dropdown);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    max-height: 200px;
    overflow-y: auto;
    display: none;
}
.pc-portfolio-search-results.is-open {
    display: block;
}
.pc-portfolio-search-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 10px;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--color-text-primary);
}
.pc-portfolio-search-item:hover {
    background: var(--color-bg-secondary);
}

/* 항목 목록 */
.pc-portfolio-items {
    min-height: 60px;
    max-height: 300px;
    overflow-y: auto;
}
.pc-portfolio-empty {
    padding: var(--space-5) var(--space-4);
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.8rem;
}
.pc-portfolio-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--color-border);
}
.pc-portfolio-item:last-child {
    border-bottom: none;
}
.pc-portfolio-item-info {
    flex: 1;
    min-width: 0;
}
.pc-portfolio-item-name {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pc-portfolio-item-code {
    font-size: 0.68rem;
    color: var(--color-text-muted);
}
.pc-portfolio-item-amount {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}
.pc-portfolio-item-amount input {
    width: 64px;
    padding: 3px 5px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    font-size: 0.78rem;
    text-align: right;
    outline: none;
}
.pc-portfolio-item-amount input:focus {
    border-color: var(--color-primary);
}
.pc-portfolio-item-unit {
    font-size: 0.68rem;
    color: var(--color-text-muted);
}
.pc-portfolio-item-remove {
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 2px;
    font-size: 0.85rem;
    opacity: 0.5;
}
.pc-portfolio-item-remove:hover {
    opacity: 1;
    color: var(--color-bear);
}

/* 하단 */
.pc-portfolio-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    border-top: 1px solid var(--color-border);
}
.pc-portfolio-total {
    font-size: 0.78rem;
    color: var(--color-text-secondary);
}
.pc-portfolio-total strong {
    color: var(--color-text-primary);
}
.pc-portfolio-clear {
    padding: 4px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    font-size: 0.72rem;
    cursor: pointer;
}
.pc-portfolio-clear:hover {
    background: var(--color-bg-secondary);
}

/* 비교 버튼 */
.pc-compare-action {
    display: flex;
    justify-content: center;
    margin-top: var(--space-4);
}
.pc-compare-btn {
    padding: 10px 32px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--color-action);
    color: var(--color-action-text);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-base);
}
.pc-compare-btn:hover {
    opacity: 0.9;
}
.pc-compare-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── 결과 영역 ── */
.pc-results {
    min-height: 100px;
}
.pc-results-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-4);
    text-align: center;
    color: var(--color-text-muted);
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-lg);
}
.pc-results-placeholder i {
    font-size: 2.5rem;
    margin-bottom: var(--space-3);
    opacity: 0.3;
}
.pc-results-placeholder p {
    margin: 0;
    font-size: 0.85rem;
}

/* 로딩 */
.pc-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-10) 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}
.pc-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: pc-spin 0.6s linear infinite;
}
@keyframes pc-spin {
    to { transform: rotate(360deg); }
}

/* ── 결과 섹션 공통 ── */
.pc-result-section {
    margin-bottom: var(--space-6);
}
.pc-result-section-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-3) 0;
}
.pc-result-section-subtitle {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-3) 0;
}

/* ── 섹션 1: 핵심 비교 요약 ── */
.pc-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
.pc-summary-card {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
}
.pc-summary-card-label {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    margin-bottom: 4px;
}
.pc-summary-card-value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--color-text-primary);
}
.pc-summary-card-sub {
    font-size: 0.7rem;
    color: var(--color-text-tertiary);
    margin-top: 2px;
}
.pc-summary-card-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 2px;
    font-size: 0.78rem;
}
.pc-val-a { color: var(--pc-color-a); }
.pc-val-b { color: var(--pc-color-b); }
.pc-val-label {
    font-size: 0.68rem;
    color: var(--color-text-muted);
    margin-right: 4px;
}

/* ── 섹션 2: 중복도 ── */
.pc-overlap-summary {
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}
.pc-overlap-stat {
    text-align: center;
}
.pc-overlap-stat-value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-text-primary);
}
.pc-overlap-stat-label {
    font-size: 0.72rem;
    color: var(--color-text-muted);
}
.pc-overlap-weight {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}
.pc-overlap-weight-item {
    font-size: 0.78rem;
    color: var(--color-text-secondary);
}

.pc-overlap-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}
.pc-overlap-table th {
    text-align: left;
    padding: 6px 8px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-weight: 500;
    font-size: 0.72rem;
}
.pc-overlap-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-primary);
}
.pc-overlap-table .col-right {
    text-align: right;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}
.pc-weight-bar-wrap {
    display: inline-flex;
    gap: 2px;
    align-items: center;
    vertical-align: middle;
    margin-left: 4px;
}
.pc-weight-bar {
    display: inline-block;
    height: 8px;
    border-radius: 2px;
    min-width: 2px;
}
.pc-weight-bar--a { background: var(--pc-color-a); }
.pc-weight-bar--b { background: var(--pc-color-b); }

.pc-overlap-more {
    display: block;
    margin: var(--space-2) auto 0;
    padding: 6px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    font-size: 0.78rem;
    cursor: pointer;
}
.pc-overlap-more:hover {
    background: var(--color-bg-secondary);
}

/* ── 섹션 3: 섹터 차트 ── */
.pc-sector-chart-wrap {
    position: relative;
    height: 300px;
    margin-bottom: var(--space-4);
}

/* ── 섹션 헤더 메타 뱃지 (성과/중복도/섹터/비용 공통) ── */
/* 제목 우측 회색 작은 뱃지 — "최근 1년 · 2024-04-25 ~ 2025-04-25" 또는
 * "최신 스냅샷 (YYYY-MM-DD 기준)". 디자인 토큰 준수: mono 폰트 + tabular-nums. */
.pc-meta-badge {
    display: inline-flex;
    align-items: center;
    margin-left: var(--space-2);
    padding: 2px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-secondary);
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0;
    vertical-align: middle;
    white-space: nowrap;
}

/* ── 기간 프리셋 칩 (성과 섹션 전용) ── */
/* 디자인 시그니처: 활성 칩은 인버티드-블랙 (#0f172a bg, #fff fg).
 * 비활성은 1px border + 흰 배경. 기존 pc-preset-chip 과 별개 컴포넌트. */
.pc-perf-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
}
.pc-perf-title {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}
.pc-period-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: flex-start;
}
.pc-period-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    padding: 4px 10px;
    border: 1px solid var(--color-border);
    border-radius: 100px;
    background: var(--color-bg-primary);
    color: var(--color-text-secondary);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.1;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.pc-period-chip:hover:not(.pc-period-chip--active):not(:disabled) {
    border-color: var(--color-text-primary);
    color: var(--color-text-primary);
}
.pc-period-chip--active {
    /* 시그니처 인버티드-블랙. 라이트/다크 테마 모두 동일 톤 유지. */
    background: #0f172a;
    border-color: #0f172a;
    color: #ffffff;
    font-weight: 600;
}
.pc-period-chip--active:hover {
    background: #0f172a;
}
.pc-period-chip-label {
    line-height: 1.1;
}
.pc-period-chip-sub {
    font-size: 0.58rem;
    opacity: 0.85;
    margin-top: 2px;
    font-weight: 500;
    letter-spacing: 0;
    white-space: nowrap;
}
.pc-period-chips--loading .pc-period-chip {
    pointer-events: none;
    opacity: 0.55;
}
.pc-period-chips--loading .pc-period-chip-sub {
    visibility: hidden;
}

/* ── 성과 섹션 부분 로딩 오버레이 ── */
.pc-perf-loading .pc-perf-columns,
.pc-perf-loading .pc-perf-chart-wrap {
    opacity: 0.4;
    pointer-events: none;
    transition: opacity 120ms ease;
}

/* 성과 섹션 soft 경고(배너) — 기존 pc-warning 변종. */
.pc-warning--soft {
    background: color-mix(in srgb, var(--color-warning, #eab308) 6%, transparent);
    border-color: color-mix(in srgb, var(--color-warning, #eab308) 22%, transparent);
}
.pc-warning--error {
    background: color-mix(in srgb, var(--color-bear) 6%, transparent);
    border-color: color-mix(in srgb, var(--color-bear) 24%, transparent);
    color: var(--color-bear);
}

/* 공통 거래일 0 빈 상태. */
.pc-perf-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-4);
    text-align: center;
    color: var(--color-text-muted);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
}
.pc-perf-empty i {
    font-size: 1.75rem;
    margin-bottom: var(--space-2);
    opacity: 0.4;
}
.pc-perf-empty p {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.55;
    max-width: 36ch;
}

/* ── 섹션 4: 성과 비교 ── */
.pc-perf-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}
.pc-perf-column {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
}
.pc-perf-column[data-idx="0"] {
    border-top: 2px solid var(--pc-color-a);
}
.pc-perf-column[data-idx="1"] {
    border-top: 2px solid var(--pc-color-b);
}
.pc-perf-column-title {
    font-size: 0.82rem;
    font-weight: 600;
    margin: 0 0 var(--space-2) 0;
    color: var(--color-text-primary);
}
.pc-perf-row {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    font-size: 0.78rem;
}
.pc-perf-row-label {
    color: var(--color-text-muted);
}
.pc-perf-row-value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    color: var(--color-text-primary);
}
.pc-perf-chart-wrap {
    position: relative;
    height: 260px;
}
.pc-perf-chart-note {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    margin-top: var(--space-2);
}

/* ── 섹션 5: 비용/배당/추적오차 비교 ── */
.pc-cost-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}
.pc-cost-table th {
    text-align: left;
    padding: 6px 8px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-weight: 500;
    font-size: 0.72rem;
}
.pc-cost-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-primary);
}
.pc-cost-table .col-right {
    text-align: right;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}
.pc-cost-table .col-diff {
    text-align: right;
    font-size: 0.72rem;
    color: var(--color-text-muted);
}

/* ── 공유 버튼 ── */
.pc-share-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--space-4);
}
.pc-share-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 5px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    cursor: pointer;
}
.pc-share-btn:hover {
    background: var(--color-bg-secondary);
}

/* ── 반응형 ── */
@media (max-width: 960px) {
    .pc-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .pc-perf-columns {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .pc-mobile-tabs {
        display: flex;
    }
    .pc-portfolios {
        grid-template-columns: 1fr;
    }
    .pc-portfolio-panel[data-idx="1"] {
        display: none;
    }
    .pc-portfolio-panel.pc-portfolio-panel--visible {
        display: block !important;
    }
    .pc-portfolio-panel[data-idx="0"]:not(.pc-portfolio-panel--visible) {
        display: block;
    }
    .pc-summary-grid {
        grid-template-columns: 1fr 1fr;
    }
    .pc-overlap-table {
        font-size: 0.72rem;
    }
    .pc-sector-chart-wrap {
        height: 240px;
    }
    /* 성과 카드 2열 → 1열 스택 (포트폴리오 A 위 / B 아래). */
    .pc-perf-columns {
        grid-template-columns: 1fr;
    }
    /* 차트 높이 240 → 200 (작은 화면에서 스크롤 비용 절감). */
    .pc-perf-chart-wrap {
        height: 200px;
    }
    /* 제목 아래로 칩 줄바꿈 (pc-perf-header 는 flex-wrap 이미 허용). */
    .pc-perf-header {
        flex-direction: column;
        align-items: stretch;
    }
    .pc-period-chips {
        justify-content: flex-start;
    }
    /* 모바일에서 1M / 5Y 칩 숨김 — 가로 공간 부족 방지. 데스크탑 전용 플래그. */
    .pc-period-chip--desktop-only {
        display: none;
    }
}