/* ══════════════════════════════════════════════════════════════
   BROJ 배포 관리 — 이 서비스 고유 스타일
   표준(custom.css, tabspace-uiux 원본 그대로) 위에 얹는다. 표준을 고치지 않고 여기서만 보완한다.
   - 색·크기는 표준 토큰(var(--…))만 쓴다. 새 팔레트를 만들지 않는다
   - CSP(style-src 'self') 때문에 표준 base.html 의 인라인 style 을 클래스로 옮긴 규칙이 있다
   - 표준 custom.css 는 모든 margin/padding 을 0 으로 리셋하므로 간격은 여기서 명시한다
   ══════════════════════════════════════════════════════════════ */

/* 글자색 전용 보조 토큰 — 표준 상태 토큰에서 파생, 다크에서 배경 대비만 확보 */
:root {
    --ok-text: var(--success-700);
    --warn-text: var(--warning-700);
    --err-text: var(--error-600);
    --accent-text: var(--primary-700);
    --font-mono: ui-monospace, 'Cascadia Code', Consolas, monospace;
}
html.dark {
    --ok-text: #6ee7b7;
    --warn-text: #fcd34d;
    --err-text: #fca5a5;
    --accent-text: var(--primary-300);
}

/* ── 표준 base.html 인라인 style 의 클래스 대체 ── */
.sidebar-close-btn { position: absolute; right: 12px; }
.topbar-left { display: flex; align-items: center; gap: 8px; flex-shrink: 0; min-width: 120px; }
.mobile-logo {
    width: 28px; height: 28px; border-radius: 8px;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-700));
    color: #fff; font-weight: 800; font-size: 0.7rem;
}
/* 달 아이콘은 기본 숨김. 표준 app.js 가 CSSOM(el.style.display)으로 라이트/다크에 맞춰 전환한다 */
#icon-moon { display: none; }
a.sidebar-logout { text-decoration: none; }

/* 표준 custom.css 의 대비 부족 보정 — 새 색을 만들지 않고 표준에 이미 있는 토큰만 쓴다.
   · 다크: 활성/hover 메뉴가 --primary-700 글자를 어두운 --primary-50 위에 그려 대비 2.0:1 → --primary-300 (7:1 이상)
   · 사이드바 부제·역할 글자(11px)가 --text-muted 라 라이트 2.5:1 → --text-secondary (4.8:1) */
html.dark .nav-link:hover, html.dark .nav-link.active { color: var(--primary-300); }
.sidebar-logo .logo-sub, .sidebar-user-role { color: var(--text-secondary); }
:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; }

/* ── 페이지 공통 ── */
.page { max-width: 1100px; margin: 0 auto; }
.page-title { margin-bottom: 0.25rem; }
.page-desc { margin-bottom: 1.25rem; font-size: 0.9375rem; color: var(--text-secondary); }
.text-link { color: var(--primary-700); text-decoration: underline; }
html.dark .text-link { color: var(--primary-300); }
.card { margin-bottom: 1.25rem; }
.card-sub { margin-left: 0.5rem; font-size: 0.8125rem; font-weight: 300; color: var(--text-secondary); }
.card-body p { margin: 0 0 0.75rem; }
.card-body p:last-child { margin-bottom: 0; }

/* ── 텍스트 보조 ── */
.mono { font-family: var(--font-mono); font-size: 0.85rem; line-height: 1.6; }
.sha { font-family: var(--font-mono); color: var(--accent-text); font-weight: 500; }
.muted { color: var(--text-secondary); }
.small { font-size: 0.75rem; }
.warn { color: var(--warn-text); }
.error { color: var(--err-text); }

/* ── 폼 ── */
.frow { margin-bottom: 0.875rem; }
.frow-btns { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-bottom: 0.875rem; }
.targets-sel { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-bottom: 0.875rem; }
.targets-sel label { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9375rem; cursor: pointer; }
input[type="checkbox"] { width: 1rem; height: 1rem; accent-color: var(--primary-500); }
.btn-block { width: 100%; }

/* ── 커밋 표 ── */
table.commits { width: 100%; border-collapse: collapse; margin-top: 0.75rem; font-size: 0.8125rem; }
table.commits td { padding: 0.4rem 0.5rem; border-top: 1px solid var(--border-light); vertical-align: top; }
table.commits tr:hover td { background: var(--bg-secondary); }
table.commits td.sha { white-space: nowrap; }

/* ── 배포 대상 상태 ── */
.targets { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.target, .deploy-target { border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 0.9rem 1rem; }
.target-label { display: flex; align-items: center; gap: 0.6rem; font-weight: 500; margin-bottom: 0.6rem; font-size: 0.9375rem; }
.target-body .row { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 0.75rem; padding: 0.2rem 0; font-size: 0.9375rem; }
.target-body .k { color: var(--text-secondary); white-space: nowrap; }
.target-body .v { text-align: right; margin-left: auto; }

/* ── 배포 미리보기·실행 ── */
.deploy-target { margin-bottom: 0.75rem; }
.deploy-row { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; }
.deploy-row .target-label { margin-bottom: 0; }
.deploy-body { margin-top: 0.6rem; }
.deploy-body .small { margin: 0.15rem 0; }
.deploy-body > .btn { margin-top: 0.7rem; }
.deploy-status { margin-top: 0.6rem; font-size: 0.875rem; }
.deploy-status.ok { color: var(--ok-text); }
ul.filelist, ul.commitlist { list-style: none; margin: 0.4rem 0 0; padding: 0; font-size: 0.8125rem; }
ul.filelist li, ul.commitlist li { padding: 0.15rem 0; border-top: 1px solid var(--border-light); }
ul.filelist li.del { color: var(--text-muted); text-decoration: line-through; }
.fstat { display: inline-block; min-width: 3.2em; color: var(--accent-text); font-weight: 500; }
.fpath { font-family: var(--font-mono); }

/* ── 로그인 ── */
body.center-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-card { width: min(380px, calc(100% - 2rem)); }
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 1.25rem; }
.login-brand .logo-box {
    width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-700));
    color: #fff; font-weight: 800; font-size: 1rem;
}
.login-title { font-size: 1.125rem; line-height: 1.2; }
.login-brand .logo-sub { font-size: 0.75rem; color: var(--text-muted); }

/* ── 매뉴얼 ── */
.manual { max-width: 960px; }
.manual .card { overflow: visible; }
.manual-section { scroll-margin-top: calc(var(--topbar-h) + 1rem); }
.manual-toc ol { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem 1.5rem; padding: 0; }
.manual-toc a, .manual-section .to-toc { color: var(--primary-700); }
html.dark .manual-toc a, html.dark .manual-section .to-toc { color: var(--primary-300); }
.manual-toc a:hover, .manual-section .to-toc:hover { text-decoration: underline; }
.manual-section .to-toc { font-size: 0.8125rem; font-weight: 300; flex-shrink: 0; }
.manual h3 { font-size: 1rem; margin: 1.25rem 0 0.5rem; }
.manual-summary { line-height: 1.7; }
.manual-steps { padding-left: 1.4rem; display: flex; flex-direction: column; gap: 0.5rem; line-height: 1.7; }
.manual-tips { margin-top: 1.25rem; padding: 0.875rem 1.125rem; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); }
.manual-tips h3 { margin-top: 0; }
.manual-tips ul { padding-left: 1.3rem; display: flex; flex-direction: column; gap: 0.4rem; line-height: 1.7; }
.manual-shots { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 1.5rem; }
.manual-shots figure { width: 100%; min-width: 0; }
.manual-shots figure.phone { max-width: 360px; }
.manual-shots img { width: 100%; height: auto; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--card-bg); }
.manual-shots figcaption { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.6; color: var(--text-secondary); }
.manual strong.mark { font-weight: 600; }
.manual-faq details { padding: 0.8rem 1.25rem; border-top: 1px solid var(--border-light); }
.manual-faq details:first-child { border-top: none; }
.manual-faq summary { cursor: pointer; font-weight: 500; line-height: 1.6; }
.manual-faq details p { margin-top: 0.5rem; line-height: 1.7; color: var(--text-secondary); }
.manual-note { padding: 0.875rem 1.125rem; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); line-height: 1.7; }

/* ── 반응형 ── */
@media (max-width: 640px) {
    .targets { grid-template-columns: 1fr; }
    .counts { grid-template-columns: 1fr; gap: 0.5rem; }
    .manual-toc ol { grid-template-columns: 1fr; }
}