:root {
    --font-family: "Outfit", "Inter", system-ui, sans-serif;
    /* [V15-TOKEN, 2026-08-01] --bg-dark/--text-primary/--text-secondary/--accent-gold/
       --accent-emerald를 공유 시맨틱 토큰(v12_layout.css)에 별칭 연결 — 이제 이 페이지도
       라이트/다크 전환에 자동 반응([[테마]] 문서 §2 참고). --bg-card/--accent-blue는
       v12_layout.css가 이 파일보다 나중에 로드돼(app.html 태그 순서) 같은 이름의 :root
       변수가 이미 그쪽 값으로 덮어써지고 있었음(우연한 이름 충돌, 이 파일의 원래 선언은
       죽은 코드) — 오히려 다른 페이지와 카드 색이 자동으로 통일되는 효과라 그대로 둠.
       --accent-rose/--border-subtle/--shadow-premium은 이 페이지 고유값이라 별도 유지,
       아래 [data-theme="light"]에서 개별 오버라이드. */
    --bg-dark: var(--bg-deep);
    --bg-card: rgba(30, 41, 59, .4);
    --text-primary: var(--text-main);
    --text-secondary: var(--text-dim);
    --accent-blue: #3b82f6;
    --accent-gold: var(--pending);
    --accent-emerald: var(--hit);
    --accent-rose: #f43f5e;
    --border-subtle: rgba(51, 65, 85, .5);
    --shadow-premium: 0 10px 25px -5px rgba(0, 0, 0, .3), 0 8px 10px -6px rgba(0, 0, 0, .3);
    /* [V15-TOKEN, 2026-08-01] 실시간 로그 패널의 접힌 헤더 줄/탭 줄 배경 — 원래
       리액트 인라인 스타일에 rgba(30,41,59,.6)/rgba(15,23,42,.4)로 하드코딩돼 있어
       라이트에서 카드 배경과 뭉개져 회색 뭉텅이로 보였음(사람 지적, 전달.md 확대
       스크린샷). 문자열 치환으로 var() 참조로 바꾸고 여기서 다크/라이트 값을 정의. */
    --card-header-bg: rgba(30, 41, 59, .6);
    --card-subheader-bg: rgba(15, 23, 42, .4);
    /* 뉴스 카드(우선순위 뱃지, News1 컴포넌트)의 배경 그라데이션 — 카드 자체가
       .news-card-pro/.glow-s-class 클래스가 아니라 리액트 인라인 style로 전부
       그려지고 있어(문자열 치환 대상), 일반 카드는 --bg-card, S급은 --card-header-bg
       재사용, 이 우선순위(priority_flag) 그라데이션만 별도 토큰 필요. */
    --card-priority-bg: linear-gradient(135deg, rgba(30,41,59,0.8) 0%, rgba(245,158,11,0.1) 100%);
}

* {
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important
}

body {
    margin: 0;
    background-color: var(--bg-dark);
    color: var(--text-primary);
    font-family: var(--font-family);
    -webkit-font-smoothing: antialiased
}

.dashboard-container {
    width: 90%;
    max-width: 1800px;
    margin: 0 auto;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem
}

.card {
    background: var(--bg-card);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, .05);
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: var(--shadow-premium);
    width: 100%;
    box-sizing: border-box;
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
    position: relative;
    overflow: hidden
}

.card:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .1), transparent)
}

.glow-s-class {
    animation: glow-pulse 3s ease-in-out infinite;
    border: 1px solid rgba(245, 158, 11, .3) !important;
    background: linear-gradient(135deg, #1e293b66, #f59e0b0d) !important
}

@keyframes glow-pulse {

    0%,
    to {
        box-shadow: 0 0 20px -5px #f59e0b4d, inset 0 0 10px #f59e0b1a
    }

    50% {
        box-shadow: 0 0 40px -5px #f59e0b80, inset 0 0 20px #f59e0b33
    }
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px
}

::-webkit-scrollbar-track {
    background: #0f172a33
}

::-webkit-scrollbar-thumb {
    background: #334155cc;
    border-radius: 10px
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-blue)
}

* {
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease
}

.news-feed-stack::-webkit-scrollbar {
    width: 4px
}

.news-feed-stack::-webkit-scrollbar-track {
    background: transparent
}

.news-feed-stack::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 4px
}

.news-feed-stack::-webkit-scrollbar-thumb:hover {
    background: #475569
}

.btn {
    padding: .6rem 1.2rem;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-weight: 700;
    font-size: .85rem;
    transition: all .2s cubic-bezier(.4, 0, .2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px
}

.btn-primary {
    background-color: var(--accent-blue);
    color: #fff
}

.btn-primary:hover {
    background-color: #2563eb
}

input,
textarea {
    padding: .8rem;
    margin-top: .5rem;
    background-color: #22262e;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 1rem
}

input:focus,
textarea:focus {
    outline: 2px solid var(--accent-blue);
    border-color: transparent
}

.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem
}

.tag {
    background-color: #2e333d;
    color: #fff;
    padding: .4rem .8rem;
    border-radius: 20px;
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: .5rem
}

.tag-blue {
    background-color: #3b82f633;
    color: #60a5fa
}

.tag-remove {
    cursor: pointer;
    opacity: .7
}

.tag-remove:hover {
    opacity: 1
}

.input-group {
    display: flex;
    gap: .5rem
}

.advanced-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer
}

.advanced-content {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color)
}

.text-sm {
    font-size: .8rem
}

.text-secondary {
    color: var(--text-secondary)
}

.selectable-text {
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    cursor: text
}

.news-card-pro .selectable-text {
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 1 !important;
    word-break: break-all !important;
    white-space: normal !important;
}

.news-card-pro .selectable-text+.selectable-text,
.news-card-pro .selectable-text[style*="0.85rem"],
.news-card-pro .selectable-text[style*=".85rem"] {
    -webkit-line-clamp: 2 !important;
}

.news-item {
    transition: transform .2s;
    -webkit-user-select: text;
    user-select: text
}

.news-item:hover {
    transform: translateY(-2px)
}

.news-header {
    display: flex;
    gap: .5rem;
    margin-bottom: .5rem;
    align-items: center
}

.badge {
    padding: .2rem .5rem;
    border-radius: 4px;
    font-size: .75rem;
    font-weight: 700
}

.badge.tier-high {
    background-color: #ef444433;
    color: #f87171
}

.badge.tier-mid {
    background-color: #f59e0b33;
    color: #fbbf24
}

.badge.tier-low {
    background-color: #71717a33;
    color: #a1a1aa
}

.news-time {
    margin-left: auto;
    font-size: .8rem;
    color: var(--text-secondary)
}

.news-title a {
    color: var(--text-primary);
    text-decoration: none
}

.news-title a:hover {
    color: var(--accent-blue)
}

.character-container {
    padding: 1rem;
    border-radius: 50%;
    width: 150px;
    height: 150px;
    margin: 0 auto 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, #2a2e37 0%, transparent 70%)
}

.character-status {
    font-size: .9rem;
    color: var(--text-secondary);
    margin-top: .5rem
}

.section-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 1.5rem 0 .8rem;
    display: flex;
    align-items: center;
    gap: .5rem
}

.signal-zone {
    max-height: 480px;
    overflow-y: auto;
    border: 2px solid #ef4444;
    border-radius: 12px;
    padding: 1rem;
    background: #ef44440d;
    margin-bottom: 2rem
}

.signal-item {
    border-left: 4px solid #f59e0b !important;
    background: #0000004d !important
}

.news-feed {
    max-height: 900px;
    overflow-y: auto;
    padding: .5rem;
    border: 1px solid var(--border-color);
    border-radius: 12px
}

.time-ago {
    font-size: .8rem;
    color: #6366f1;
    font-weight: 500;
    margin-left: .5rem
}

.news-title {
    font-size: 1rem !important;
    line-height: 1.4;
    margin: .5rem 0
}

.news-summary {
    font-size: .9rem !important;
    opacity: .8
}

.fresh-signal {
    color: #22c55e !important;
    font-weight: 800;
    text-shadow: 0 0 10px rgba(34, 197, 94, .3)
}

.signal-zone::-webkit-scrollbar,
.news-feed::-webkit-scrollbar {
    width: 6px
}

.signal-zone::-webkit-scrollbar-track,
.news-feed::-webkit-scrollbar-track {
    background: transparent
}

.signal-zone::-webkit-scrollbar-thumb,
.news-feed::-webkit-scrollbar-thumb {
    background: #3f3f46;
    border-radius: 10px
}

.signal-zone::-webkit-scrollbar-thumb:hover,
.news-feed::-webkit-scrollbar-thumb:hover {
    background: #52525b
}

.login-view,
.pending-view {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    background: radial-gradient(circle at center, #1a1e26, #0f1115);
    overflow-x: hidden
}

.logo-group {
    display: flex;
    align-items: center
}

.avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--accent-blue);
    background: #2a2e37
}

.user-profile {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding-left: 1.5rem;
    border-left: 1px solid var(--border-color)
}

.user-name {
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.2
}

.user-role {
    font-size: .7rem;
    font-weight: 700;
    color: #fbbf24;
    display: flex;
    align-items: center;
    margin-top: 2px
}

.btn-ghost:hover {
    color: var(--text-primary);
    background: #ffffff0d
}

.btn-icon {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all .2s
}

.loading-screen {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 300;
    color: var(--accent-blue);
    letter-spacing: 2px
}

.w-full {
    width: 100%
}

.mt-4 {
    margin-top: 1rem
}

.portfolio-watch {
    background: linear-gradient(135deg, #1e1b4b, #0f172a);
    border: 1px solid #4338ca;
    padding: 1.2rem;
    border-radius: 12px;
    margin-top: 1.5rem;
    box-shadow: 0 4px 20px #4338ca33
}

.portfolio-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: .8rem;
    color: #818cf8;
    font-weight: 700;
    font-size: .9rem
}

.portfolio-risk-card {
    background: #ef44441a;
    border: 1px solid rgba(239, 68, 68, .3);
    padding: .8rem;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.risk-label {
    color: #f87171;
    font-weight: 800;
    font-size: .8rem;
    text-transform: uppercase
}

.stop-loss-msg {
    background: #7f1d1d;
    color: #fecaca;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: .75rem;
    font-weight: 600;
    margin-top: 8px
}

.owned-highlight {
    border-right: 8px solid #10b981 !important;
    background: #10b9810d !important;
    position: relative
}

.owned-highlight:after {
    content: "PORTFOLIO";
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: .6rem;
    font-weight: 900;
    color: #10b981;
    letter-spacing: 1px
}

.checked-item {
    filter: grayscale(.5);
    opacity: .7;
    transition: all .5s ease
}

.sticky-critical {
    position: relative;
    border-bottom: 2px dashed #ef4444;
    padding-bottom: 2.5rem;
    margin-bottom: 2.5rem
}

@keyframes pulse {
    0% {
        opacity: 1;
        transform: scale(1)
    }

    50% {
        opacity: .8;
        transform: scale(.99)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

.critical-risk-border {
    border: 2px solid #ef4444 !important;
    box-shadow: 0 0 20px #ef444466
}

.section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    letter-spacing: -.5px
}

.portfolio-item-hover {
    transition: all .3s cubic-bezier(.19, 1, .22, 1)
}

.portfolio-item-hover:hover {
    transform: translate(8px);
    border-color: #3b82f6cc !important;
    box-shadow: 0 8px 30px -5px #3b82f666
}

@keyframes glow-pulse {

    0%,
    to {
        box-shadow: 0 0 20px -5px #f59e0b4d
    }

    50% {
        box-shadow: 0 0 30px -5px #f59e0b80
    }
}

.glow-s-class {
    animation: glow-pulse 3s ease-in-out infinite
}

.news-card-pro {
    transition: all .3s cubic-bezier(.19, 1, .22, 1)
}

.news-card-pro:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px -5px #00000080
}

.spin {
    animation: spin 1s linear infinite
}

.pulse-indicator {
    animation: pulse-dot 2s ease-in-out infinite
}

@keyframes pulse-dot {

    0%,
    to {
        opacity: 1;
        transform: scale(1)
    }

    50% {
        opacity: .7;
        transform: scale(1.1)
    }
}

.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 2rem
}

.logo-group {
    display: flex;
    align-items: center;
    gap: 12px
}

.nav-group {
    display: flex;
    align-items: center;
    gap: 24px
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(59, 130, 246, .1);
    border-left-color: var(--accent-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 12px;
    background: #ffffff08;
    border-radius: 30px;
    border: 1px solid var(--border-color)
}

.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--accent-blue)
}

.user-info {
    display: flex;
    flex-direction: column
}

.user-name {
    font-size: .85rem;
    font-weight: 600;
    color: var(--text-primary)
}

.user-role {
    font-size: .65rem;
    color: #fbbf24;
    font-weight: 700
}

.btn-ghost {
    background: transparent;
    color: var(--text-secondary)
}

.btn-ghost:hover {
    background: #ffffff0d;
    color: var(--text-primary)
}

.btn-icon {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border-radius: 6px
}

.btn-icon:hover {
    background: #ef44441a;
    color: #ef4444
}

@media(max-width:500px) {

    html,
    body {
        overflow-x: hidden;
        width: 100%;
        margin: 0;
        padding: 0
    }

    .dashboard-container {
        padding: .8rem !important;
        width: 100% !important;
        box-sizing: border-box;
        overflow-x: hidden;
        display: flex;
        flex-direction: column
    }

    .container {
        width: 100%;
        margin: 0 auto;
        padding: 10px;
        box-sizing: border-box;
        overflow-x: hidden
    }

    .card,
    .section-title,
    .app-header {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box
    }

    .card {
        padding: 1rem;
        margin: 0
    }

    .app-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1rem 0
    }

    .user-profile {
        padding-left: 0;
        border-left: none;
        margin-top: .5rem;
        width: 100%;
        justify-content: flex-start
    }

    input,
    textarea,
    select {
        max-width: 100%;
        box-sizing: border-box
    }

    .news-feed,
    .signal-zone {
        max-width: 100%;
        overflow-x: hidden
    }

    .login-view,
    .pending-view {
        padding: 1rem;
        width: 100% !important;
        max-width: 100vw;
        box-sizing: border-box
    }
}

/* ==========================================================================
   [V15-THEME-LIGHT, 2026-08-01] 홈 피드(#root, 리액트 렌더) 라이트 모드 1차 대응.
   이 파일 전체(위 812줄)를 한 줄씩 다 뒤집지 않고, 다크 배경을 명시적으로 가정해
   라이트에서 실제로 안 보이거나 이상해지는 항목(흰 텍스트/오버레이, 불투명 어두운
   배경)만 우선 대응했다 — 채도 있는 신호색 배지(tier-high/mid/low, portfolio-risk-card,
   signal-zone, owned-highlight 등)는 Phase 1의 .price-pulse-box와 같은 논리로
   반투명 틴트 배경이라 양쪽 테마에서 대체로 버틴다고 보고 1차 범위에서 제외 —
   라이브 확인 후 문제 있으면 이 블록에 추가([[테마]] §5 "실측 스크린샷 필수" 원칙). */

[data-theme="light"] {
    /* --bg-card/--accent-blue는 v12_layout.css와의 이름 충돌로 이미 그쪽 라이트값을
       따르므로(§2-1 주석 참고) 여기서 다시 선언 안 함 — --border-subtle만 이 파일
       고유값이라 별도 오버라이드 필요. 리액트 인라인 스타일(index-NATIVE_V1.js,
       "포트폴리오 이상 없음" 박스 등)도 이 변수를 참조하도록 문자열 치환 패치함. */
    --border-subtle: rgba(15, 23, 42, 0.12);
    --card-header-bg: rgba(15, 23, 42, 0.04);
    --card-subheader-bg: rgba(15, 23, 42, 0.03);
    --card-priority-bg: linear-gradient(135deg, #ffffff 0%, #fef3c7 100%);
}

[data-theme="light"] .card {
    border-color: rgba(15, 23, 42, 0.08);
}
[data-theme="light"] .card:before {
    background: linear-gradient(90deg, transparent, rgba(15, 23, 42, 0.08), transparent);
}

[data-theme="light"] input,
[data-theme="light"] textarea {
    background-color: #f1f5f9;
}

[data-theme="light"] .tag {
    background-color: #e2e8f0;
    color: #1e293b;
}

[data-theme="light"] .character-container {
    background: radial-gradient(circle, #e2e8f0 0%, transparent 70%);
}

[data-theme="light"] .avatar {
    background: #e2e8f0;
}

[data-theme="light"] .user-profile {
    background: rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .btn-ghost:hover {
    background: rgba(15, 23, 42, 0.05);
}

[data-theme="light"] .btn-icon:hover {
    background: #ef44441a;
}

[data-theme="light"] .login-view,
[data-theme="light"] .pending-view {
    background: radial-gradient(circle at center, #f1f5f9, #e2e8f0);
}

[data-theme="light"] ::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.04);
}
[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: #cbd5e1;
}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}
[data-theme="light"] .signal-zone::-webkit-scrollbar-thumb,
[data-theme="light"] .news-feed::-webkit-scrollbar-thumb {
    background: #cbd5e1;
}
[data-theme="light"] .signal-zone::-webkit-scrollbar-thumb:hover,
[data-theme="light"] .news-feed::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* [V15-THEME-LIGHT, 2026-08-01] S급 카드(.glow-s-class) 배경 — 사람이 전달.md로
   직접 지적("박스백그라운드 흰색에 그라데이션은 아주 살짝"): 원래 다크용 그라데이션
   (#1e293b66 짙은 슬레이트 → #f59e0b0d)이 라이트에서도 그대로 적용돼 카드 전체가
   짙은 대각선 회색으로 뭉개져 보였음. 흰 배경 기반 + 아주 옅은 그라데이션으로 교체.
   당시엔 "s급 박스는 파란색계열, 로고/네온 텍스트 컬러에서 벗어나지마"([[테마]] §1-1)
   가 원칙이라 블루(#3a9dc9 계열)로 확정했었으나, [2026-08-16 재정정] 브랜드가
   StockBanana(노랑+차콜)로 바뀌며 그 전제 자체가 낡음 — 사람이 전달.md 스크린샷으로
   "이거 색상 바꾸라고" 재지적, 노랑 계열(--brand-accent, [[브랜드]] §6-4)로 교체. */
[data-theme="light"] .glow-s-class {
    background: linear-gradient(135deg, #ffffff, #fef9c3) !important;
    border-color: rgba(250, 204, 21, 0.35) !important;
}