/* =====================================================================
   stock-theme.css - StockBoard 전용 테마
   기준: workflows/01. UI_UX_GUIDELINES_stock3.md §1 (컬러 시스템 재정의)

   common.css 는 공유 파일이므로 수정하지 않고, 이 파일을 common.css 다음
   순서로 로드해서 컬러 토큰만 덮어쓴다.
   ===================================================================== */

:root {
    /* --- 브랜드 액센트 --- */
    --color-primary:       #1ed760;
    --color-primary-dark:  #17b854;
    --color-primary-deep:  #1D63D8;
    --color-on-accent:     #141414;

    /* --- 본문 (화이트 콘텐츠) --- */
    --color-ink:           #1f1f1f;
    --color-muted:         #6B7280;
    --color-subtle:        #98A2AC;
    --color-border:        #E4E7EB;
    --color-surface-light: #F3F4F6;
    --color-canvas:        #F6F7F8;
    --color-white:         #FFFFFF;

    /* --- 사이드바 3존 (모두 화이트, §1.4) --- */
    --color-sidebar-bg:    #FFFFFF;
    --color-sidebar-hover: #F0F1F3;
    --color-logo-bg:       #FFFFFF;
    --color-footer-bg:     #FFFFFF;

    /* --- 시맨틱 --- */
    --color-success:       #1ed760;
    --color-danger:        #E5484D;
    --color-danger-deep:   #B91C1C;
    --color-warning:       #F2B84B;
    --color-info:          #539df5;

    /* --- 등락 배지 전용 (§4.3) --- */
    --color-stock-up:      #FF6B6B;
    --color-stock-down:    #539df5;
    --color-stock-flat:    #8A9099;

    /* --- 헤더 전용: 페이지 테마와 무관하게 다크 고정 (§1.1) --- */
    --color-header-bg:      #1f1f1f;
    --color-header-ink:     #ECECEC;
    --color-header-muted:   #9BA3AE;
    --color-header-border:  #34383B;
    --color-header-surface: #2A2D2F;

    /* common.css 레거시 별칭 */
    --text-main:      var(--color-ink);
    --text-muted:     var(--color-muted);
    --border-color:   var(--color-border);
    --bg-color:       var(--color-canvas);
    --danger-color:   var(--color-danger);
    --warning-color:  var(--color-warning);
    --success-color:  var(--color-success);

    /*
     * 주의: common.css 의 --header-bg 는 header.main-header 와 footer.main-footer 가
     * 공유한다. 여기서 덮어쓰면 푸터까지 어두워지므로 토큰은 건드리지 않고,
     * 아래에서 header.main-header 선택자만 같은 우선순위로 재정의한다.
     */
}

/* =====================================================================
   1. 사이드바 - 3존 모두 화이트 + 보더로 구분 (§1.4)
   ===================================================================== */
.logo-area {
    background: var(--color-logo-bg);
    color: var(--color-ink);
    border-bottom: 1px solid var(--color-border);
}
.logo-area .logo-text,
.logo-area h1,
.logo-area span,
.logo-area i {
    color: var(--color-ink);
}
.logo-area .logo-sub {
    color: var(--color-muted);
}

.nav-menu {
    background: var(--color-sidebar-bg);
}
.nav-item {
    color: var(--color-muted);
}
.nav-item i {
    color: var(--color-muted);
}
.nav-item:hover {
    background: var(--color-sidebar-hover);
    color: var(--color-ink);
}
.nav-item:hover i {
    color: var(--color-ink);
}
/* 활성 메뉴: 원색 채움이므로 어두운 텍스트 (§1.3) */
.nav-item.active,
.nav-item.active:hover {
    background: var(--color-primary);
    color: var(--color-on-accent);
}
.nav-item.active i {
    color: var(--color-on-accent);
}

.sidebar-footer {
    background: var(--color-footer-bg);
    border-top: 1px solid var(--color-border);
}
.sidebar-footer a {
    color: var(--color-muted);
}
.sidebar-footer a:hover {
    color: var(--color-ink);
}

/* =====================================================================
   2. 헤더 - 다크 고정 (§1.1)
   ===================================================================== */
/* common.css 가 header.main-header (0-1-1) 로 선언하므로 같은 우선순위로 맞춘다 */
header.main-header {
    background: var(--color-header-bg);
    border-bottom: 1px solid var(--color-header-border);
}
.main-header .page-title {
    color: var(--color-header-ink);
}
.main-header .page-subtitle {
    color: var(--color-header-muted);
}
.main-header .timer-wrapper {
    color: var(--color-header-muted);
}
.main-header .timer-display {
    color: var(--color-header-ink);
}
.main-header .btn-extend {
    background: transparent;
    border: 1px solid var(--color-header-border);
    color: var(--color-primary);
}
.main-header .btn-extend:hover {
    background: var(--color-header-surface);
}
.main-header .user-info {
    color: var(--color-header-ink);
}
.main-header .user-info span {
    color: var(--color-header-ink);
}
.main-header .avatar {
    background: var(--color-primary);
    color: var(--color-on-accent);
}
.main-header .btn-logout {
    color: var(--color-header-muted);
}
.main-header .btn-logout:hover {
    background: rgba(229, 72, 77, 0.15);
    color: var(--color-danger);
}
.main-header .header-divider {
    background: var(--color-header-border);
}

/* =====================================================================
   3. 원색 채움 요소 - on-accent 텍스트 (§1.3)
   ===================================================================== */
.btn-primary {
    background: var(--color-primary);
    color: var(--color-on-accent);
}
.btn-primary:hover {
    background: var(--color-primary-dark);
    color: var(--color-on-accent);
}
.btn-success {
    background: var(--color-success);
    color: var(--color-on-accent);
}
.btn-danger {
    background: var(--color-danger);
    color: #fff;
}
.btn-outline {
    background: var(--color-white);
    color: var(--color-primary-deep);
    border: 1px solid var(--color-border);
}
.btn-outline:hover {
    background: var(--color-surface-light);
}

/* 옅은 배경 위 본문형 텍스트는 진한 변형 사용 (§1.3) */
.alert-info,
.alert-box.alert-info {
    color: var(--color-primary-deep);
}
.alert-error,
.alert-box.alert-error {
    color: var(--color-danger-deep);
}

/* =====================================================================
   4. 등락 배지 - 원색 채움 (§4.3, stock2.md §3 대체)
   ===================================================================== */
.badge-stock-up {
    background: var(--color-stock-up);
    color: var(--color-on-accent);
}
.badge-stock-down {
    background: var(--color-stock-down);
    color: var(--color-on-accent);
}
.badge-stock-flat {
    background: var(--color-stock-flat);
    color: var(--color-on-accent);
}

/* 통계 카드 아이콘 - 원색 채움 (§4.3, 원본 §12 대체) */
.stat-icon.blue   { background: var(--color-primary);    color: var(--color-on-accent); }
.stat-icon.green  { background: var(--color-success);    color: var(--color-on-accent); }
.stat-icon.up     { background: var(--color-stock-up);   color: var(--color-on-accent); }
.stat-icon.red    { background: var(--color-stock-up);   color: var(--color-on-accent); }
.stat-icon.down   { background: var(--color-stock-down); color: var(--color-on-accent); }
.stat-icon.cyan   { background: var(--color-stock-down); color: var(--color-on-accent); }
.stat-icon.orange { background: var(--color-warning);    color: var(--color-on-accent); }

.stat-card.blue   { border-top-color: var(--color-primary); }
.stat-card.up     { border-top-color: var(--color-stock-up); }
.stat-card.down   { border-top-color: var(--color-stock-down); }
.stat-card.orange { border-top-color: var(--color-warning); }

/* =====================================================================
   5. 종목 카드 (대시보드)
   ===================================================================== */
.stock-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 1280px) {
    .stock-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .stock-card-grid { grid-template-columns: 1fr; }
}

.stock-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 32, 0.05), 0 8px 20px -10px rgba(15, 23, 32, 0.14);
}
.stock-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 15px 16px 12px;
    border-bottom: 1px solid var(--color-border);
}
.stock-name {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--color-ink);
}
.stock-ticker {
    font-size: 11.5px;
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
    margin-left: 6px;
}
.stock-card-body {
    padding: 14px 16px 6px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.stock-issue-summary {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--color-ink);
    background: var(--color-surface-light);
    border-radius: 8px;
    padding: 10px 12px;
    margin: 0 0 12px;
}
.news-mini-list {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.news-mini-item a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-ink);
    text-decoration: none;
    line-height: 1.4;
}
.news-mini-item a:hover {
    color: var(--color-primary-deep);
    text-decoration: underline;
}
.news-mini-meta {
    display: block;
    font-size: 11px;
    color: var(--color-muted);
    margin-top: 2px;
}
.stock-card-body .btn-outline {
    align-self: flex-start;
    margin-top: auto;
    margin-bottom: 14px;
}
.stock-card-foot {
    padding: 9px 16px;
    border-top: 1px solid var(--color-border);
    font-size: 11px;
    color: var(--color-muted);
    display: flex;
    align-items: center;
    gap: 5px;
}

/* 로딩 스켈레톤 */
.stock-card-skeleton {
    padding: 16px;
    gap: 10px;
    display: flex;
    flex-direction: column;
}
.skeleton-bar {
    border-radius: 6px;
    background: linear-gradient(90deg,
        var(--color-surface-light) 25%, #FFFFFF 37%, var(--color-surface-light) 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer 1.4s ease infinite;
}
@keyframes skeleton-shimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* =====================================================================
   5-1. 키워드 등록 폼 - 버튼을 입력창 하단선에 맞춤
        common.css 의 .form-group 은 block 이라 justify-content 가 먹지 않는다.
        행을 grid + align-items:end 로 두고 버튼 칸만 flex 로 만든다.
   ===================================================================== */
.keyword-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;   /* 버튼 칸은 내용만큼만 */
    gap: 16px;
    align-items: end;                      /* 입력창 하단 기준 정렬 */
}
.keyword-form-row .form-group {
    margin-bottom: 0;                      /* align-items:end 가 어긋나지 않도록 */
}
.keyword-form-actions {
    display: flex;
    gap: 8px;
}
.keyword-form-actions .btn {
    white-space: nowrap;
}
/* 좁은 화면에서는 입력창 아래로 버튼을 내린다 */
@media (max-width: 780px) {
    .keyword-form-row {
        grid-template-columns: 1fr;
    }
    .keyword-form-actions .btn {
        flex: 1;
        justify-content: center;
    }
}

/* =====================================================================
   6. 키워드 카드 (키워드 관리 페이지 §3.2)
   ===================================================================== */
.keyword-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
    margin-top: 18px;
}
.keyword-card {
    padding: 14px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 32, 0.05), 0 8px 20px -10px rgba(15, 23, 32, 0.14);
}
.keyword-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    gap: 8px;
}
.keyword-card-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--color-ink);
}
.keyword-card-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: transparent;
    color: var(--color-muted);
    flex-shrink: 0;
}
.keyword-card-remove:hover {
    background: var(--color-danger);
    color: #fff;
}
.keyword-card-ticker {
    font-size: 12px;
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
    margin-bottom: 4px;
}
.keyword-card-meta {
    font-size: 11px;
    color: var(--color-subtle);
}
.keyword-market-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--color-surface-light);
    color: var(--color-muted);
    margin-left: 6px;
}

/* =====================================================================
   7. 업데이트 버튼 로딩 상태
   ===================================================================== */
.btn-updating i {
    animation: btn-spin 0.8s linear infinite;
}
@keyframes btn-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* =====================================================================
   8. 로그인 / 회원가입 화면
   ===================================================================== */
.auth-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-canvas);
    padding: 24px;
}
.auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 32px 28px;
    box-shadow: 0 1px 2px rgba(15, 23, 32, 0.05), 0 18px 40px -18px rgba(15, 23, 32, 0.25);
}
.auth-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 6px;
}
.auth-brand i {
    font-size: 24px;
    color: var(--color-primary);
}
.auth-brand-name {
    font-size: 19px;
    font-weight: 800;
    color: var(--color-ink);
}
.auth-desc {
    font-size: 12.5px;
    color: var(--color-muted);
    margin-bottom: 22px;
}
.auth-card .form-group {
    margin-bottom: 14px;
}
.auth-card .btn {
    width: 100%;
    justify-content: center;
    margin-top: 6px;
}
.auth-switch {
    margin-top: 18px;
    text-align: center;
    font-size: 12.5px;
    color: var(--color-muted);
}
.auth-switch a {
    color: var(--color-primary-deep);
    font-weight: 700;
    text-decoration: none;
}
.auth-switch a:hover {
    text-decoration: underline;
}

/* =====================================================================
   9. 빈 상태
   ===================================================================== */
.empty-state {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 56px 20px;
    background: var(--color-white);
    border: 1px dashed var(--color-border);
    border-radius: 12px;
}
.empty-state i {
    font-size: 34px;
    color: var(--color-subtle);
    margin-bottom: 12px;
}
.empty-state-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--color-ink);
    margin-bottom: 4px;
}
.empty-state-desc {
    font-size: 12.5px;
    color: var(--color-muted);
    margin-bottom: 16px;
}


/* =====================================================================
   10. 비밀번호 보이기 토글
   ===================================================================== */
.password-field {
    position: relative;
}
.password-field .form-control {
    /* 토글 버튼과 글자가 겹치지 않도록 오른쪽 여백 확보 */
    padding-right: 40px;
}
.password-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
    border-radius: 6px;
    font-size: 16px;
}
.password-toggle:hover {
    background: var(--color-surface-light);
    color: var(--color-ink);
}
.password-toggle.on {
    color: var(--color-primary-deep);
}

/* =====================================================================
   11. 알림(toast) - 화면 중앙 표시
        common.css 는 우측 상단 고정이라 놓치기 쉬워 중앙으로 옮긴다.
        stock-theme.css 는 모든 화면에서 로드되므로 전 페이지에 적용된다.
   ===================================================================== */
#toast-container {
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    align-items: center;
    /* 알림 자체는 클릭을 막지 않도록 컨테이너는 통과시킨다 */
    pointer-events: none;
}
#toast-container .toast {
    pointer-events: auto;
    min-width: 320px;
    max-width: 90vw;
    box-shadow: 0 12px 36px -8px rgba(15, 23, 32, 0.35);
    animation: toast-pop 0.18s ease-out;
    /*
     * 알림 박스 윤곽을 뚜렷하게 잡는다.
     * 왼쪽은 common.css 의 4px 타입별 액센트(성공/오류/경고 색)를 그대로 살리고
     * 나머지 3면에만 테두리를 넣어 색 정보와 윤곽을 함께 유지한다.
     */
    border-top: 1px solid var(--color-ink);
    border-right: 1px solid var(--color-ink);
    border-bottom: 1px solid var(--color-ink);
}
/* 닫기(×) 버튼도 테두리 대비에 맞춰 또렷하게 */
#toast-container .toast .toast-close {
    color: var(--color-ink);
}
@keyframes toast-pop {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    #toast-container .toast { animation: none; }
}

/* =====================================================================
   12. 관심종목 재무재표
        기준: workflows/04__SCREEN_SPEC_financial_summary_stock2.md §2.1, §2.2
        이 화면에는 뉴스 리스트가 없다.
   ===================================================================== */
.financial-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 1280px) {
    .financial-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
    .financial-card-grid { grid-template-columns: 1fr; }
}

.financial-card {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.financial-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border);
}
.financial-card-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-ink);
}
.financial-card-meta {
    margin-top: 3px;
    font-size: 11.5px;
    color: var(--color-subtle);
}

.financial-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 8px;
}
.financial-section-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-ink);
}
.financial-section-period {
    font-size: 11px;
    color: var(--color-subtle);
}

/* 실적 요약 (§2.1) */
.financial-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid var(--color-surface-light);
}
.financial-summary-row:last-child { border-bottom: none; }
.financial-summary-label {
    font-size: 12.5px;
    color: var(--color-muted);
    width: 66px;
    flex-shrink: 0;
}
.financial-summary-value {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--color-ink);
    /* 자릿수가 흔들리지 않도록 고정폭 숫자 */
    font-variant-numeric: tabular-nums;
    flex: 1;
    text-align: right;
}

/* 재무 건강도 신호등 (§2.2) */
.financial-health-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.financial-health-item {
    display: flex;
    align-items: center;
    gap: 8px;
}
.financial-health-label {
    font-size: 12.5px;
    color: var(--color-muted);
    flex: 1;
}
.financial-health-value {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--color-ink);
    font-variant-numeric: tabular-nums;
}

.health-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}
.health-dot-green  { background: var(--color-success); }
.health-dot-yellow { background: var(--color-warning); }
.health-dot-red    { background: var(--color-danger); }
/* 계산에 필요한 계정이 공시에 없어 판정할 수 없는 경우 */
.health-dot-gray   { background: var(--color-subtle); }

/* 종합 신호등 배지 - 원색 채움 + on-accent 텍스트 (§1.3 대비 규칙) */
.health-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--color-on-accent);
}
.health-badge-green  { background: var(--color-success); }
.health-badge-yellow { background: var(--color-warning); }
.health-badge-red    { background: var(--color-danger); color: #fff; }

.financial-footnote {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    font-size: 10.5px;
    color: var(--color-subtle);
}
/* 카드 안에서는 안내 박스가 여백을 덜 먹도록 */
.financial-card .financial-state {
    margin: 0;
    font-size: 12px;
}

/* =====================================================================
   13. 종목 검색 팝업 (키워드 관리)
        참고 UI: 증권사 앱의 "종목 추가" 화면
   ===================================================================== */

/* --- 등록 폼의 종목명 선택 필드 --- */
.stock-pick-field {
    position: relative;
}
.stock-pick-field .form-control {
    padding-right: 40px;
    cursor: pointer;
    /* readonly 지만 비활성처럼 보이면 안 되므로 배경은 흰색 유지 */
    background: var(--color-white);
}
.stock-pick-btn {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--color-primary-deep);
    font-size: 17px;
    cursor: pointer;
    border-radius: 6px;
}
.stock-pick-btn:hover {
    background: var(--color-surface-light);
}
/* 티커는 조회된 값만 들어가므로 비활성 상태를 명확히 보여준다 */
#newTicker:disabled {
    background: var(--color-surface-light);
    color: var(--color-ink);
    cursor: not-allowed;
}

/* --- 팝업 --- */
.stock-search-box {
    max-width: 460px;
}
.stock-search-body {
    padding-top: 4px;
}

.stock-search-bar {
    position: relative;
    margin-bottom: 4px;
}
.stock-search-bar .form-control {
    /* 지우기 + 검색 아이콘 2개 자리 */
    padding-right: 72px;
    font-size: 15px;
}
.stock-search-clear,
.stock-search-go {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 6px;
    font-size: 17px;
}
.stock-search-clear {
    right: 38px;
    color: var(--color-subtle);
}
.stock-search-go {
    right: 6px;
    color: var(--color-ink);
}
.stock-search-clear:hover,
.stock-search-go:hover {
    background: var(--color-surface-light);
}

.stock-search-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 380px;
    overflow-y: auto;
}
.stock-search-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 4px;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
}
.stock-search-item:last-child {
    border-bottom: none;
}
.stock-search-item:hover {
    background: var(--color-surface-light);
}
.stock-search-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-ink);
}
/* 검색어와 일치한 부분만 강조 (참고 UI 와 동일) */
.stock-search-name em {
    font-style: normal;
    color: var(--color-primary-deep);
}
.stock-search-code {
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--color-subtle);
    font-variant-numeric: tabular-nums;
}
.stock-search-badge {
    flex-shrink: 0;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--color-surface-light);
    color: var(--color-muted);
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
}

.stock-search-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 48px 0;
    color: var(--color-subtle);
    font-size: 13px;
}
.stock-search-empty i {
    font-size: 30px;
}

@media (max-width: 780px) {
    .stock-search-list { max-height: 60vh; }
}

/* =====================================================================
   14. 카드 구성: 상단 공시(사실) + 하단 뉴스(해석)
   ===================================================================== */
.feed-section {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border);
}
.feed-section:first-of-type {
    margin-top: 10px;
}
.feed-head {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 7px;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-ink);
}
.feed-head i {
    font-size: 14px;
    color: var(--color-primary-deep);
}
/* 두 섹션의 성격 차이를 한 줄로 설명한다 */
.feed-hint {
    margin-left: auto;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--color-subtle);
}

.feed-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.feed-item {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 5px 0;
}
.feed-item + .feed-item {
    border-top: 1px dashed var(--color-surface-light);
}
.feed-title {
    flex: 1;
    font-size: 12.5px;
    color: var(--color-ink);
    text-decoration: none;
    /* 공시 제목이 길어 두 줄을 넘기면 잘라낸다 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.feed-title:hover {
    color: var(--color-primary-deep);
    text-decoration: underline;
}
.feed-date {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--color-subtle);
    font-variant-numeric: tabular-nums;
}
.feed-empty {
    font-size: 12px;
    color: var(--color-subtle);
}

/* 분류 배지 - 공시는 채움, 뉴스는 외곽선으로 구분 */
.feed-badge {
    flex-shrink: 0;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    line-height: 1.6;
}
.feed-badge-disclosure {
    background: var(--color-primary-deep);
    color: #fff;
}
.feed-badge-news {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-muted);
    margin-right: 4px;
}

/* 뉴스 항목이 배지를 품도록 정렬 조정 */
.news-mini-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 4px;
}
.news-mini-item > a {
    flex: 1 1 auto;
    min-width: 0;
}
.news-mini-item .news-mini-meta {
    flex-basis: 100%;
}

/* =====================================================================
   15. PC 폴백 배너
        모바일로 접속했는데 해당 화면의 모바일 템플릿이 없어 PC 화면이
        그대로 나온 경우에만 노출된다.
        미대응 화면이 조용히 방치되는 것을 막는 장치다.
        (MOBILE_DEPLOY_GUIDELINES_2.md §6.4)
   ===================================================================== */
.pc-fallback-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--color-warning);
    color: var(--color-on-accent);
    font-size: 12.5px;
    font-weight: 600;
    text-align: center;
}
.pc-fallback-banner i { font-size: 15px; }

/* =====================================================================
   16. PC 화면의 좁은 폭 대응 (태블릿 · 창 축소)

        모바일 기기는 UA 판정으로 mobile/ 템플릿을 받지만,
        태블릿(iPadOS 사파리는 UA 가 데스크탑으로 나온다)과
        PC 창을 줄인 경우는 이 PC 화면을 그대로 본다.
        common.css 의 브레이크포인트는 900px 까지뿐이라 그 아래에서 헤더가 무너진다.

        지침서 v2 §1 이 common.css 무수정을 요구하므로 이 파일에서 덮는다.
   ===================================================================== */

@media (max-width: 760px) {

    /*
     * flex 자식은 min-width:auto 라 내용보다 작아지지 않는다.
     * 이것이 제목이 두 줄로 접히던 진짜 원인이므로 축소를 허용한다.
     */
    header.main-header {
        padding: 0 12px;
        gap: 8px;
    }
    .main-header .header-left {
        min-width: 0;
        flex: 1 1 auto;
    }
    .main-header .header-left > div {
        min-width: 0;
    }
    .main-header .page-title {
        font-size: 14.5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* 영문 부제("Watchlist")는 장식이라 좁은 폭에서 가장 먼저 뺀다 */
    .main-header .page-subtitle {
        display: none;
    }
    .main-header .header-right {
        gap: 8px;
        flex: 0 0 auto;
    }
    /* 아바타는 남기고 이름 텍스트만 접는다 */
    .main-header .user-info span {
        display: none;
    }
    .main-header .timer-wrapper {
        padding: 0 8px;
        gap: 4px;
    }

    /* 페이지 헤더: 좌우 배치를 위아래로 바꿔 텍스트가 겹치지 않게 한다 */
    .page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .page-header-right {
        flex-wrap: wrap;
        align-items: center;
    }

    /* 카드 그리드는 1열 */
    .stock-card-grid,
    .financial-card-grid {
        grid-template-columns: 1fr;
    }
    /* 종목 추가 폼도 세로로 쌓는다 */
    .keyword-form-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 460px) {
    /*
     * 여기부터는 타이머까지 들어갈 자리가 없다.
     * 세션 연장은 common.js 가 만료 전에 안내하므로 헤더에서 빼도 무방하다.
     */
    .main-header .timer-wrapper {
        display: none;
    }
    .main-header .page-title {
        font-size: 14px;
    }
}

/* =====================================================================
   17. 운영자 화면 (이용현황 · 결제 · 사용자 관리)
   ===================================================================== */
.temp-password-box {
    margin-top: 14px;
    padding: 16px;
    border: 1px dashed var(--color-border);
    border-radius: 10px;
    background: var(--color-surface-light);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.temp-password-user {
    font-size: 12.5px;
    color: var(--color-muted);
}
.temp-password-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--color-ink);
    /* 운영자가 드래그해서 복사해야 하므로 선택을 허용한다 */
    user-select: all;
    -webkit-user-select: all;
}

/* 관리 버튼이 여러 개라 좁아지면 줄바꿈시킨다 */
.user-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

/* 가격 정책 표의 입력칸은 셀 폭에 맞춘다 */
#priceTbody .form-control,
#priceTbody .form-select {
    max-width: 130px;
}

/* =====================================================================
   18. 구독 / 결제
   ===================================================================== */
.plan-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    max-width: 640px;
}
@media (max-width: 760px) {
    .plan-grid { grid-template-columns: 1fr; max-width: none; }
}

.plan-card {
    position: relative;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* 유도할 플랜만 강조한다. 둘 다 강조하면 선택 기준이 사라진다 */
.plan-card-pro {
    border-color: var(--color-primary);
    box-shadow: 0 8px 24px -18px rgba(31, 31, 31, .45);
}
.plan-card.is-current {
    background: var(--color-surface-light);
}

.plan-name {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--color-primary-deep);
}
.plan-price {
    font-size: 30px;
    font-weight: 800;
    color: var(--color-ink);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.plan-price span {
    margin-left: 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-muted);
}

.plan-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1;
}
.plan-features li {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    color: var(--color-ink-soft, var(--color-muted));
}
.plan-features i {
    color: var(--color-primary-dark);
    font-size: 15px;
}

.plan-badge {
    align-self: flex-start;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--color-surface-light);
    border: 1px solid var(--color-border);
    font-size: 11px;
    font-weight: 700;
    color: var(--color-muted);
}
.plan-next {
    font-size: 12px;
    color: var(--color-subtle);
}
.plan-btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
}

/* 등록된 카드 */
.card-method {
    display: flex;
    align-items: center;
    gap: 12px;
}
.card-method > i {
    font-size: 26px;
    color: var(--color-primary-deep);
}
.card-method-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-ink);
}
.card-method-number {
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--color-subtle);
    font-variant-numeric: tabular-nums;
}
.card-method .btn { margin-left: auto; }

/* 결제 결과 */
.billing-result {
    max-width: 460px;
    margin: 40px auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.billing-result > i { font-size: 56px; }
.billing-result .result-ok   { color: var(--color-primary-dark); }
.billing-result .result-fail { color: var(--color-danger); }
.result-title {
    font-size: 19px;
    font-weight: 700;
    color: var(--color-ink);
}
.result-desc {
    font-size: 13.5px;
    color: var(--color-muted);
    line-height: 1.65;
}
.result-actions {
    margin-top: 8px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

/* =====================================================================
   §19 약관 · 개인정보처리방침
   로그인 전에도 열리는 독립 문서 페이지.
   읽는 화면이므로 카드로 잘게 나누지 않고 한 장으로 이어서 보여준다.
   ===================================================================== */

.policy-wrapper {
    min-height: 100vh;
    background: var(--bg-color);
    padding: 0 0 60px;
}

/* 상단 바: 어디서 들어와도 돌아갈 곳이 보이게 한다 */
.policy-topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    background: var(--color-white);
    border-bottom: 1px solid var(--border-color);
}

.policy-topbar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--text-main);
    text-decoration: none;
}

.policy-topbar-brand i {
    font-size: 20px;
    color: var(--primary-color);
}

.policy-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--color-white);
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
}

.policy-back:hover {
    background: var(--color-surface-light);
    color: var(--text-main);
}

.policy-doc {
    max-width: 760px;
    margin: 0 auto;
    padding: 28px 20px 0;
}

.policy-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 8px;
}

.policy-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 13px;
    color: var(--text-muted);
    padding-bottom: 16px;
    border-bottom: 2px solid var(--border-color);
}

.policy-meta span + span::before {
    content: '·';
    margin-right: 10px;
}

/* 목차. 조항이 많은 문서에서 원하는 곳으로 바로 간다 */
.policy-toc {
    margin: 20px 0 8px;
    padding: 14px 18px;
    background: var(--color-surface-light);
    border-radius: 8px;
}

.policy-toc-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.policy-toc ol {
    margin: 0;
    padding-left: 18px;
    columns: 2;
    column-gap: 24px;
}

.policy-toc li {
    font-size: 13px;
    line-height: 1.9;
    break-inside: avoid;
}

.policy-toc a {
    color: var(--text-main);
    text-decoration: none;
}

.policy-toc a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

/* 본문 */
.policy-section {
    /* 목차에서 점프했을 때 sticky 바에 제목이 가리지 않게 한다 */
    scroll-margin-top: 68px;
    padding-top: 24px;
}

.policy-section h2 {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 10px;
}

.policy-section p,
.policy-section li {
    font-size: 14.5px;
    line-height: 1.85;
    color: var(--text-main);
}

.policy-section p {
    margin: 0 0 10px;
}

.policy-section ol,
.policy-section ul {
    margin: 0 0 10px;
    padding-left: 20px;
}

.policy-section li {
    margin-bottom: 4px;
}

/* 꼭 읽어야 하는 문단 (자동결제 고지, 투자 면책) */
.policy-callout {
    display: flex;
    gap: 10px;
    padding: 14px 16px;
    margin: 4px 0 12px;
    background: var(--color-white);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--primary-color);
    border-radius: 6px;
}

.policy-callout i {
    flex-shrink: 0;
    font-size: 18px;
    color: var(--primary-color);
}

.policy-callout p:last-child {
    margin-bottom: 0;
}

/* 표 */
.policy-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 12px;
    font-size: 13.5px;
}

.policy-table th,
.policy-table td {
    padding: 9px 12px;
    border: 1px solid var(--border-color);
    text-align: left;
    vertical-align: top;
    line-height: 1.7;
}

.policy-table th {
    background: var(--color-surface-light);
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
}

.policy-table-wrap {
    overflow-x: auto;
}

/* 사업자 정보를 아직 못 채운 자리 */
.policy-todo {
    color: var(--text-muted);
    font-style: normal;
    background: var(--color-surface-light);
    padding: 1px 6px;
    border-radius: 4px;
}

.policy-footnote {
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.8;
}

/* 푸터 약관 링크 */
.footer-links {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 10px;
}

.footer-links a {
    color: inherit;
    opacity: 0.85;
    text-decoration: none;
}

.footer-links a:hover {
    opacity: 1;
    text-decoration: underline;
}

.footer-links .sep {
    opacity: 0.45;
}

/* 가입 화면 동의 영역 */
.agree-box {
    margin: 4px 0 16px;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--color-surface-light);
}

.agree-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--text-main);
}

.agree-row + .agree-row {
    margin-top: 8px;
}

.agree-row input[type="checkbox"] {
    /* 모바일에서 손가락으로 누를 수 있는 크기 */
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--primary-color);
    cursor: pointer;
}

.agree-row label {
    cursor: pointer;
    flex: 1;
    /* 좁은 화면에서 링크가 밀려나지 않게 한다 */
    min-width: 0;
}

.agree-row .agree-required {
    color: var(--primary-color);
    font-weight: 600;
}

.agree-view {
    flex-shrink: 0;
    font-size: 12.5px;
    color: var(--text-muted);
    text-decoration: underline;
    white-space: nowrap;
}

.agree-view:hover {
    color: var(--primary-color);
}

@media (max-width: 640px) {
    .policy-doc {
        padding: 20px 16px 0;
    }

    .policy-title {
        font-size: 21px;
    }

    /* 좁은 화면에서 2단 목차는 읽기 어렵다 */
    .policy-toc ol {
        columns: 1;
    }

    .policy-section p,
    .policy-section li {
        font-size: 14px;
    }
}

/* 로그인 · 회원가입 화면 하단 약관 링크 (사이드바·푸터가 없는 화면) */
.auth-policy-links {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
    text-align: center;
    font-size: 12.5px;
    color: var(--text-muted);
}

.auth-policy-links a {
    color: var(--text-muted);
    text-decoration: none;
}

.auth-policy-links a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

.auth-policy-links .sep {
    margin: 0 8px;
    opacity: 0.5;
}

/* 좁은 화면에서 저작권 문구와 약관 링크가 한 줄에 눌리지 않게 한다 */
@media (max-width: 640px) {
    footer.main-footer {
        display: flex;
        flex-direction: column;
        gap: 6px;
        align-items: center;
    }

    .footer-links {
        margin-left: 0;
    }
}

/* ---------------------------------------------------------------------
   사업자 정보 (전자상거래법 제10조 표시)
   푸터가 길어지므로 본문보다 한 단계 작고 옅게 둔다.
   --------------------------------------------------------------------- */
footer.main-footer .biz-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 0;
    font-size: 11.5px;
    line-height: 1.7;
    color: var(--text-muted);
}

/* 구분선은 마크업이 아니라 CSS 로 넣는다.
   항목이 th:if 로 빠져도 구분선만 남는 일이 없다 */
footer.main-footer .biz-info span + span::before {
    content: '|';
    margin: 0 8px;
    opacity: 0.4;
}

footer.main-footer .biz-info b {
    font-weight: 600;
    color: var(--text-main);
}

footer.main-footer .footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 0;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
}

/* 로그인·가입 화면의 사업자 정보 (푸터가 없는 화면) */
.auth-biz-info {
    margin-top: 10px;
    font-size: 11px;
    line-height: 1.7;
    color: var(--text-muted);
    text-align: center;
    opacity: 0.9;
}

/* =====================================================================
   §20 동종업계 비교
   PC 는 표(지표=행, 종목=열), 모바일은 지표별 블록.
   막대는 어느 화면에서든 "길수록 유리"로 방향이 맞춰져 내려온다.
   ===================================================================== */

.cmp-group {
    background: var(--color-white);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
}

.cmp-group-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--border-color);
}

.cmp-sector {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-main);
    /* 업종명이 길어도 지수 배지를 밀어내지 않게 한다 */
    min-width: 0;
}

.cmp-count {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
}

.cmp-index {
    flex-shrink: 0;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--color-surface-light);
    font-size: 12.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.cmp-index.is-up   { color: var(--color-danger); }
.cmp-index.is-down { color: var(--color-info); }
.cmp-index em {
    font-style: normal;
    font-weight: 400;
    opacity: .6;
    font-size: 11px;
}

.cmp-legend {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--text-muted);
}

/* ----- PC 표 ----- */
.cmp-table-wrap {
    /* 종목이 늘면 가로로 넘긴다. 본문 자체가 밀리면 안 된다 */
    overflow-x: auto;
    margin-top: 12px;
}

.cmp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.cmp-table th,
.cmp-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: top;
}

.cmp-metric-col {
    text-align: left;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
    width: 30%;
    min-width: 150px;
}

.cmp-stock-col {
    text-align: right;
    min-width: 120px;
}

.cmp-stock-name {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
}

.cmp-stock-sub {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* 관심종목이 아니라 잠깐 끼워 넣은 종목 */
.cmp-temp {
    padding: 0 5px;
    border-radius: 3px;
    background: var(--color-surface-light);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 600;
}

.cmp-cell { text-align: right; }

.cmp-value {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    color: var(--text-main);
}

.cmp-cell.is-best .cmp-value {
    color: var(--color-success-dark);
    font-weight: 700;
}

.cmp-best-mark { font-size: 13px; }

.cmp-bar {
    height: 4px;
    margin-top: 5px;
    border-radius: 2px;
    background: var(--color-surface-light);
    overflow: hidden;
}
.cmp-bar i {
    display: block;
    height: 100%;
    background: var(--primary-color);
    border-radius: 2px;
}
.cmp-cell.is-best .cmp-bar i { background: var(--color-success); }

/* 출처 꼬리표 · 방향 안내 */
.cmp-src {
    display: inline-block;
    margin-left: 6px;
    padding: 0 5px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .03em;
    vertical-align: 1px;
}
.cmp-src-kb   { background: #E8EEF6; color: #2C5282; }
.cmp-src-dart { background: var(--color-surface-light); color: var(--color-primary); }

.cmp-hint {
    display: block;
    font-size: 10.5px;
    font-weight: 400;
    color: var(--text-muted);
    opacity: .85;
}

/* ----- 비교 종목 칩 ----- */
.cmp-extras {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.cmp-extra-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px 4px 11px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--color-white);
    font-size: 12.5px;
    color: var(--text-main);
}
.cmp-extra-chip button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    background: var(--color-surface-light);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 11px;
}
.cmp-extra-chip button:hover {
    background: var(--color-danger);
    color: var(--color-white);
}

/* ----- 안내 상태 ----- */
.cmp-single {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding: 11px 13px;
    border-radius: 6px;
    background: var(--color-surface-light);
    font-size: 12.5px;
    color: var(--text-muted);
    line-height: 1.7;
}
.cmp-single i { flex-shrink: 0; font-size: 16px; margin-top: 2px; }

.cmp-notice {
    padding: 44px 20px;
    text-align: center;
    background: var(--color-white);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}
.cmp-notice > i { font-size: 34px; color: var(--color-subtle); }
.cmp-notice-title {
    margin-top: 10px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-main);
}
.cmp-notice-desc {
    margin-top: 5px;
    font-size: 13.5px;
    color: var(--text-muted);
}

/* ----- 잠금 (무료 플랜) -----
   화면을 감추지 않고 무엇을 얻는지 보여준 뒤 결제로 안내한다 */
.cmp-locked {
    padding: 38px 24px;
    text-align: center;
    background: var(--color-white);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}
.cmp-locked-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-surface-light);
    color: var(--color-primary);
    font-size: 26px;
}
.cmp-locked h2 {
    margin: 14px 0 6px;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-main);
}
.cmp-locked > p {
    margin: 0 auto 16px;
    max-width: 420px;
    font-size: 13.5px;
    color: var(--text-muted);
    line-height: 1.75;
}
.cmp-locked-list {
    display: inline-flex;
    flex-direction: column;
    gap: 7px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    text-align: left;
}
.cmp-locked-list li {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    color: var(--text-main);
}
.cmp-locked-list i { color: var(--color-success); }

/* =====================================================================
   §21 팝업 헤더 (다크 고정)
   common.css 는 수정 금지라 여기서 덮어쓴다.
   PC 모달 · 모바일 시트 모두 .modal-header 를 쓰므로 한 번에 적용된다.

   바탕 #141414 위에 올라가는 글자·아이콘은 헤더 토큰을 따른다
   (01. UI_UX_GUIDELINES_stock3.md §1.2 --color-header-*)
   ===================================================================== */
.modal-header {
    background: #141414;
    border-bottom: 1px solid #34383B;
}

.modal-title,
.modal-title i {
    color: #ECECEC;
}

.btn-modal-close {
    color: #9BA3AE;
}

/* 어두운 바탕에서는 빨간 글자가 묻힌다. 밝게 띄우고 바탕만 살짝 올린다 */
.btn-modal-close:hover {
    color: #ECECEC;
    background: rgba(255, 255, 255, 0.10);
}

/* =====================================================================
   §22 밸류에이션 보기
   카드 하나가 독립적으로 완결된다. PC 는 2열, 좁으면 1열.
   판정 색: 저평가=초록 / 적정=회색 / 고평가=주황 / 나머지=옅은 회색
   ===================================================================== */

.val-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 16px;
}

.val-card {
    background: var(--color-white);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0 18px 6px;
}

.val-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 0 12px;
    border-bottom: 2px solid var(--border-color);
}

.val-name {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.val-name b {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.val-sub {
    font-size: 12px;
    color: var(--text-muted);
}

.val-price {
    flex-shrink: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.val-price b {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-main);
}
.val-price span { font-size: 12.5px; font-weight: 600; }
.val-price-up   span { color: var(--color-danger); }
.val-price-down span { color: var(--color-info); }
.val-price-flat span { color: var(--text-muted); }

/* ----- PER / PBR 블록 ----- */
.val-metric {
    padding: 16px 0;
    border-bottom: 1px solid var(--border-color);
}
.val-metric:last-child { border-bottom: 0; }

.val-metric-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.val-metric-label {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: .02em;
}

.val-verdict {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
}
.val-verdict i { font-size: 13px; }
.val-verdict-under { background: #DCF5EA; color: var(--color-success-dark); }
.val-verdict-fair  { background: var(--color-surface-light); color: var(--text-main); }
.val-verdict-over  { background: #FBE9D2; color: #9A5B10; }
.val-verdict-loss,
.val-verdict-no_sample,
.val-verdict-no_value { background: var(--color-surface-light); color: var(--text-muted); }

.val-explain {
    margin: 8px 0 12px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-muted);
}

/* ----- 막대 비교 ----- */
.val-bars {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--color-canvas);
}

.val-bar-row {
    display: grid;
    grid-template-columns: 62px 1fr auto;
    align-items: center;
    gap: 10px;
}

.val-bar-label {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}
.val-bar-row.is-stock .val-bar-label { color: var(--text-main); font-weight: 600; }

.val-bar {
    height: 10px;
    border-radius: 5px;
    background: var(--color-surface-light);
    overflow: hidden;
}
.val-bar i {
    display: block;
    height: 100%;
    border-radius: 5px;
    background: var(--color-subtle);
}
.val-bar-row.is-stock .val-bar i { background: var(--primary-color); }

.val-bar-val {
    min-width: 54px;
    text-align: right;
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}
.val-bar-row.is-stock .val-bar-val { color: var(--text-main); font-weight: 700; }

.val-sample {
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-muted);
    text-align: right;
}

/* 비교가 안 될 때 값만 크게 */
.val-solo {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--color-canvas);
}
.val-solo-label { font-size: 12px; color: var(--text-muted); }
.val-solo b { font-size: 20px; font-weight: 700; color: var(--text-main); font-variant-numeric: tabular-nums; }
.val-solo-note { margin-left: auto; font-size: 11px; color: var(--text-muted); }

.val-verdict-text {
    margin: 12px 0 0;
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--text-main);
}

.val-note {
    display: flex;
    gap: 7px;
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 6px;
    background: #FFF8E6;
    border-left: 3px solid var(--color-warning);
    font-size: 12.5px;
    line-height: 1.7;
    color: #6B4E12;
}
.val-note i { flex-shrink: 0; font-size: 15px; margin-top: 2px; color: var(--color-warning); }

/* ----- 상태 ----- */
.val-card.is-empty .val-head { border-bottom: 0; }
.val-empty {
    display: flex;
    gap: 8px;
    padding: 4px 0 14px;
    font-size: 13px;
    color: var(--text-muted);
}
.val-empty i { font-size: 16px; }

.val-notice {
    grid-column: 1 / -1;
    padding: 44px 20px;
    text-align: center;
    background: var(--color-white);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}
.val-notice > i { font-size: 34px; color: var(--color-subtle); }
.val-notice-title { margin-top: 10px; font-size: 16px; font-weight: 700; color: var(--text-main); }
.val-notice-desc { margin-top: 5px; font-size: 13.5px; color: var(--text-muted); }

.val-disclaimer {
    display: flex;
    gap: 7px;
    margin: 18px 0 0;
    font-size: 12px;
    line-height: 1.7;
    color: var(--text-muted);
}
.val-disclaimer i { flex-shrink: 0; margin-top: 3px; }

/* 좁은 화면: 1열, 막대 라벨 축소 */
@media (max-width: 640px) {
    .val-grid { grid-template-columns: 1fr; gap: 12px; }
    .val-card { padding: 0 14px 4px; }
    .val-name b { font-size: 16px; }
    .val-price b { font-size: 16px; }
    .val-bar-row { grid-template-columns: 54px 1fr auto; gap: 8px; }
}

/* =====================================================================
   §23 등락률 기준 표시
   같은 날짜인데 네이버 등과 등락률이 다른 일이 있다.
   시세 출처가 정규장 종가를 주고 다른 사이트는 애프터마켓가를 쓰기 때문이다
   (에이플러스에셋 9/18: 정규장 13,120원 -3.17% / 애프터마켓 13,330원 -1.62%).
   숫자가 틀린 게 아니므로, 어디를 봐도 기준이 먼저 읽히게 한다.
   ===================================================================== */

/* 등락 배지 옆 — 숫자를 비교하는 바로 그 자리 */
.basis-chip {
    flex-shrink: 0;
    padding: 2px 7px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-light);
    color: var(--text-muted);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
    cursor: help;
}

/* 카드 하단 기준 안내 — 11px 회색 한 줄이라 눈에 안 띄던 것을 키운다 */
.stock-card-foot {
    align-items: flex-start;
    gap: 7px;
    padding: 11px 16px;
    background: var(--color-surface-light);
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.6;
}

.stock-card-foot > i {
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 14px;
    color: var(--color-primary);
}

.stock-card-foot b {
    display: block;
    font-weight: 600;
    color: var(--text-main);
}

.stock-card-foot span {
    display: block;
    font-size: 11.5px;
    opacity: .95;
}

/* 좁은 화면에서는 칩이 배지를 밀어내지 않게 한 줄 더 쓴다 */
@media (max-width: 420px) {
    .basis-chip {
        padding: 2px 6px;
        font-size: 10px;
    }
}

/* =====================================================================
   §24 회원가입 약관 팝업
   본문은 /policy/{type}/content 에서 받아 채운다.
   문서 페이지(§19)의 스타일을 그대로 쓰되 팝업 안에 맞게 여백만 줄인다.
   ===================================================================== */

.policy-modal-box {
    /* 약관은 길다. 화면 높이를 최대한 쓰되 위아래 여백은 남긴다 */
    max-height: 86vh;
    display: flex;
    flex-direction: column;
}

.policy-modal-body {
    flex: 1;
    overflow-y: auto;
    /* 팝업 안에서는 스크롤이 뒤 페이지로 넘어가지 않게 한다 */
    overscroll-behavior: contain;
    padding: 18px 22px;
}

/* 팝업 안에서는 문서 페이지보다 조밀하게 */
.policy-modal-body .policy-toc {
    margin-top: 0;
}
.policy-modal-body .policy-section {
    scroll-margin-top: 0;
    padding-top: 18px;
}
.policy-modal-body .policy-section h2 {
    font-size: 15.5px;
}
.policy-modal-body .policy-section p,
.policy-modal-body .policy-section li {
    font-size: 13.5px;
    line-height: 1.75;
}
.policy-modal-body .policy-footnote {
    margin-top: 24px;
}

.policy-loading {
    padding: 48px 20px;
    text-align: center;
    font-size: 13.5px;
    color: var(--text-muted);
}
.policy-loading i {
    display: inline-block;
    margin-right: 4px;
    animation: policySpin 1s linear infinite;
}
@keyframes policySpin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .policy-loading i { animation: none; }
}

/* 링크였던 "보기" 가 button 이 되었으므로 버튼 기본 모양을 지운다 */
button.agree-view {
    border: 0;
    background: none;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
}

/* =====================================================================
   §25 밸류에이션 지표 안내 (화면 맨 위 한 번)
   전에는 카드마다 같은 설명이 반복돼 종목이 늘수록 숫자가 묻혔다.
   한 번만 두되 눈에 들어오게 강조한다.
   ===================================================================== */

.val-guide {
    margin-bottom: 16px;
    padding: 16px 18px;
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--primary-color);
    border-radius: 10px;
    background: var(--color-white);
}

.val-guide-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
}
.val-guide-title i {
    font-size: 18px;
    color: var(--primary-color);
}

.val-guide-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 0;
}

/* 지표명과 설명을 한 줄로. 지표명 폭을 고정해 두 줄이 나란히 읽힌다 */
.val-guide-item {
    display: grid;
    grid-template-columns: 232px 1fr;
    align-items: baseline;
    gap: 14px;
}

.val-guide-item dt {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-color);
    letter-spacing: .02em;
}

/* 산출 식. 같은 강조색이되 지표명보다 한 단계 가벼워야
   둘이 같은 무게로 부딪히지 않는다 */
.val-guide-formula {
    font-weight: 600;
    font-size: 13px;
    color: var(--primary-color);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.val-guide-item dd {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--text-main);
}

@media (max-width: 640px) {
    .val-guide {
        padding: 14px 15px;
        border-radius: 8px;
    }
    /* 좁은 화면에서는 지표명을 위로 올린다. 52px 을 빼면 설명이 너무 좁다 */
    .val-guide-item {
        grid-template-columns: 1fr;
        gap: 2px;
    }
    /* 식이 길어 한 줄에 안 들어가면 줄바꿈을 허용한다 */
    .val-guide-item dt {
        flex-wrap: wrap;
    }
    .val-guide-formula {
        white-space: normal;
        font-size: 12.5px;
    }
    .val-guide-item dd {
        font-size: 13px;
    }
}

/* =====================================================================
   §26 이메일 등록 안내
   이메일 컬럼이 생기기 전 가입자에게만 뜬다.
   경고가 아니라 안내다 — 붉은색 대신 브랜드색 강조선을 쓴다.
   ===================================================================== */

.email-prompt {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--primary-color);
    border-radius: 8px;
    background: var(--color-white);
}

.email-prompt-icon {
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 20px;
    color: var(--primary-color);
}

.email-prompt-body {
    flex: 1;
    min-width: 0;
}
.email-prompt-body b {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text-main);
}
.email-prompt-body > span {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    color: var(--text-muted);
}

.email-prompt-form {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}
.email-prompt-form .form-control {
    /* flex 안에서 input 이 최소 너비를 고집해 버튼을 밀어내지 않게 */
    min-width: 0;
    max-width: 320px;
}
.email-prompt-form .btn {
    flex-shrink: 0;
}

.email-prompt-close {
    flex-shrink: 0;
    border: 0;
    background: none;
    padding: 2px;
    font-size: 16px;
    color: var(--color-subtle);
    cursor: pointer;
}
.email-prompt-close:hover { color: var(--text-muted); }

@media (max-width: 640px) {
    .email-prompt { padding: 12px 14px; gap: 10px; }
    /* 좁은 화면에서는 입력과 버튼을 세로로 */
    .email-prompt-form { flex-direction: column; }
    .email-prompt-form .form-control { max-width: none; }
}

/* =====================================================================
   §27 아이디 · 비밀번호 찾기
   ===================================================================== */

/* 한 화면에서 둘을 전환한다. PC·모바일 같은 마크업을 쓴다 */
.find-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    margin-bottom: 20px;
    background: var(--color-surface-light);
    border-radius: 10px;
}

.find-tab {
    flex: 1;
    padding: 10px 8px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--color-muted);
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.find-tab:hover  { color: var(--color-ink); }

.find-tab.on {
    background: var(--color-white);
    color: var(--color-ink);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .10);
}

/* [hidden] 은 UA 스타일이라 작성자 규칙에 진다.
   .find-pane 에 display 를 직접 주지 않고 둔다 */

.find-hint {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: -4px 0 16px;
    color: var(--color-muted);
    font-size: 12.5px;
    line-height: 1.55;
}

.find-hint i        { flex: 0 0 auto; margin-top: 1px; font-size: 14px; }
.find-hint b        { color: var(--color-ink); font-weight: 600; }

/* 기존 비밀번호가 즉시 무효가 된다는 안내라 경고색을 쓴다 */
.find-hint-warn     { color: var(--color-danger-deep); }
.find-hint-warn i   { color: var(--color-danger); }
.find-hint-warn b   { color: var(--color-danger-deep); }

/* 발송 결과. 토스트와 달리 화면에 남아 있어야 한다 */
.find-result {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 16px;
    padding: 14px 14px 12px;
    border: 1px solid rgba(30, 215, 96, .35);
    border-radius: 10px;
    background: rgba(30, 215, 96, .08);
}

.find-result > i {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--color-primary-dark);
    font-size: 18px;
}

.find-result p {
    margin: 0;
    color: var(--color-ink);
    font-size: 13.5px;
    line-height: 1.6;
}

.find-result-sub {
    margin-top: 4px !important;
    color: var(--color-muted) !important;
    font-size: 12.5px !important;
}

/* 로그인 화면 하단 찾기 링크 */
.auth-find-links {
    margin-top: 10px;
    text-align: center;
    font-size: 13px;
    color: var(--color-subtle);
}

.auth-find-links a {
    color: var(--color-muted);
    text-decoration: none;
}

.auth-find-links a:hover { color: var(--color-ink); text-decoration: underline; }
.auth-find-links .sep    { margin: 0 8px; color: var(--color-border); }

/* =====================================================================
   §28 서비스 범위 안내 (국내 상장 주식 전용)
   ===================================================================== */

/* 종목 추가 팝업 — 검색창 바로 아래.
   찾는 종목이 안 나올 때 이유를 먼저 읽게 된다 */
.stock-search-scope {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 10px 0 4px;
    color: var(--color-muted);
    font-size: 12.5px;
    line-height: 1.5;
}

.stock-search-scope i { flex: 0 0 auto; margin-top: 1px; font-size: 14px; }
.stock-search-scope b { color: var(--color-ink); font-weight: 600; }

/* 검색 결과가 없을 때 덧붙는 사유 */
.stock-search-empty-sub {
    margin-top: 6px;
    color: var(--color-subtle);
    font-size: 12.5px;
}

/* 로그인·회원가입 — 가입 전에 범위를 알 수 있게 */
.auth-scope {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: -8px 0 20px;
    padding: 7px 10px;
    border-radius: 8px;
    background: var(--color-surface-light);
    color: var(--color-muted);
    font-size: 12.5px;
    line-height: 1.4;
}

.auth-scope i { color: var(--color-primary-dark); font-size: 14px; }

/* =====================================================================
   §29 고객센터 문의 (구독 관리 화면)
   ===================================================================== */

/* 진입줄. 플랜 카드 아래에 조용히 놓인다 —
   메뉴를 따로 만들지 않고 문의가 가장 많은 화면에만 둔다 */
.support-entry {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-white);
}

.support-entry > i {
    flex: 0 0 auto;
    color: var(--color-muted);
    font-size: 22px;
}

.support-entry-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.support-entry-text b    { color: var(--color-ink); font-size: 13.5px; font-weight: 600; }
.support-entry-text span { color: var(--color-muted); font-size: 12.5px; }

.support-entry-btn {
    flex: 0 0 auto;
    padding: 8px 14px;
    border: 1.5px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-white);
    color: var(--color-ink);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.support-entry-btn:hover {
    border-color: var(--color-primary);
    background: var(--color-surface-light);
}

/* 좋은 문의는 길다. 넣을 칸이 좀으면 한 줄로 적고 말게 된다 */
.support-box      { max-width: 520px; }
.support-textarea { height: auto; padding: 10px 12px; line-height: 1.6; resize: vertical; }

.support-count {
    margin-top: 6px;
    color: var(--color-subtle);
    font-size: 12px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.support-note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 4px 0 0;
    color: var(--color-muted);
    font-size: 12.5px;
    line-height: 1.55;
}

.support-note i { flex: 0 0 auto; margin-top: 1px; font-size: 14px; }

/* 모바일 — 버튼을 아래로 내려 가로폭을 확보한다 */
@media (max-width: 480px) {
    .support-entry     { flex-wrap: wrap; }
    .support-entry-btn { width: 100%; }
}

/* =====================================================================
   §30 회원 탈퇴 (구독 관리 화면 하단)
   ===================================================================== */

/* 되돌릴 수 없는 기능이다. 찾으면 보이되 먼저 눈에 띄지는 자리에 두지 않는다 */
.withdraw-entry {
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
    text-align: right;
}

.withdraw-link {
    padding: 4px 2px;
    border: 0;
    background: none;
    color: var(--color-subtle);
    font-size: 12.5px;
    font-family: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.withdraw-link:hover { color: var(--color-danger); }

.withdraw-box  { max-width: 480px; }
.withdraw-lead { margin: 0 0 12px; color: var(--color-ink); font-size: 13.5px; line-height: 1.6; }
.withdraw-lead b { color: var(--color-danger-deep); font-weight: 600; }

.withdraw-list {
    margin: 0 0 14px;
    padding: 12px 14px;
    list-style: none;
    border-radius: 8px;
    background: var(--color-surface-light);
}

.withdraw-list li {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    color: var(--color-ink);
    font-size: 13px;
    line-height: 1.7;
}

.withdraw-list i { flex: 0 0 auto; margin-top: 4px; color: var(--color-danger); font-size: 13px; }

/* 지우지 못하는 것 / 되돌릴 수 없는 것 — 두 안내를 색으로 구분한다 */
.withdraw-keep,
.withdraw-warn {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0 0 10px;
    font-size: 12.5px;
    line-height: 1.6;
}

.withdraw-keep   { color: var(--color-muted); }
.withdraw-keep a { color: var(--color-muted); }
.withdraw-warn   { color: var(--color-danger-deep); }

.withdraw-keep i,
.withdraw-warn i { flex: 0 0 auto; margin-top: 2px; font-size: 14px; }
.withdraw-warn i { color: var(--color-danger); }

.withdraw-confirm {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    color: var(--color-ink);
    font-size: 13px;
    cursor: pointer;
}

.withdraw-confirm input { width: 16px; height: 16px; accent-color: var(--color-danger); cursor: pointer; }

/* =====================================================================
   §31 로그인 상태 유지
   ===================================================================== */

/* 로그인 버튼 바로 위. 누르기 전에 눈에 들어와야 하는 선택이다 */
.remember-me {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: -4px 0 16px;
    color: var(--color-muted);
    font-size: 13px;
    cursor: pointer;
    user-select: none;
}

.remember-me input {
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.remember-me:hover { color: var(--color-ink); }

/* =====================================================================
   §32 계정 · 데이터 삭제 안내 (Play 데이터 보안 양식용 공개 페이지)
   약관 페이지와 같은 틀을 쓰고 모자라는 두 개만 더한다
   ===================================================================== */

/* 문서 맨 아래 사업자 표시. Play 가 "개발자 이름 기재" 를 요구한다 */
.policy-biz {
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
    color: var(--color-subtle);
    font-size: 12.5px;
    line-height: 1.7;
}

/* 표 안의 보충 설명 — 본문보다 작게 내려 행 높이를 해치지 않게 한다 */
.policy-note {
    display: inline-block;
    margin-top: 3px;
    color: var(--color-muted);
    font-size: 12px;
    line-height: 1.5;
}