/* ============================================================
   청년창업사관학교 사업비관리 — start.kosmes.or.kr 디자인 이식
   브랜드 남색 #003894 / 강조 파랑 #4380e0 / 링크 #0036ad
   탑바 연파랑 #f0f6fa / 푸터 #333 / 폰트 Pretendard
   ============================================================ */
:root {
    --kos-navy: #003894;
    --kos-navy-dark: #002a6e;
    --kos-blue: #4380e0;
    --kos-blue-dark: #0036ad;
    --kos-soft: #f5f9ff;
    --kos-line: #e1e1e1;
    --kos-line2: #ececec;
    --kos-text: #222;
    --kos-sub: #666;
    --kos-muted: #999;
    --kos-danger: #e60020;
}

* { box-sizing: border-box; }

/* 스티키 푸터 — 본문이 짧아도 푸터가 화면 맨 아래에 붙도록 body 를 세로 플렉스로. */
html { height: 100%; }
body {
    font-family: "Pretendard", system-ui, -apple-system, "Segoe UI", "Malgun Gothic", sans-serif;
    font-size: 14px;
    color: var(--kos-text);
    background-color: #fff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
/* header / sub-visual 은 자연 높이, main 이 남은 공간을 채워 푸터를 아래로 민다. */
body > main { flex: 1 0 auto; }

/* 모달 열림/닫힘 시 스크롤바가 사라졌다 다시 생기며 화면이 좌우로 흔들리는 문제 제거.
   ① 스크롤바 자리(gutter)를 항상 예약 → 스크롤바 유무로 콘텐츠 폭이 변하지 않는다.
   ② 그로 인해 불필요해진 Bootstrap 모달의 스크롤바 보정 padding-right 를 무력화(넣으면 오히려 흔들린다).
      채팅 도크 밀어내기(body.chat-open)는 그대로 유지한다.
   미지원 구형 브라우저는 @supports 밖이라 기존 동작(Bootstrap 보정 + modal-anim-lock)으로 폴백된다. */
@supports (scrollbar-gutter: stable) {
    html { scrollbar-gutter: stable; }
    body { padding-right: 0 !important; }
    body.chat-open { padding-right: var(--chat-dock-w) !important; }
}

/* 공통 가로 정렬 — 헤더/탑바/위치바/본문/푸터의 좌우 라인을 1320px + 20px 패딩으로 통일 */
.app-topbar-inner, .app-header-inner, .sub-visual .sub-inner, .app-main, .footer-top-inner, .footer-main-inner {
    width: 100%; max-width: 1320px; margin-left: auto; margin-right: auto;
    padding-left: 20px; padding-right: 20px;
}
a { color: var(--kos-blue-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===== 탑바 (kosmes 연파랑) ===== */
.app-topbar { background-color: #f0f6fa; border-bottom: 1px solid rgba(8, 70, 190, 0.1); }
.app-topbar-inner {
    max-width: 1320px; margin: 0 auto; padding: 0 20px;
    height: 34px; display: flex; align-items: center; justify-content: flex-end;
}
.tmenu { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.tmenu > li { display: flex; align-items: center; }
.tmenu > li:not(:last-child) { margin-right: 14px; padding-right: 14px; border-right: 1px solid #d9d9d9; }
.tmenu a { color: #13499d; font-weight: 500; }
.tmenu a:hover { color: var(--kos-blue-dark); text-decoration: none; }
.tmenu .tm-user { color: #333; }
.tmenu .tm-user .tm-role {
    background: var(--kos-navy); color: #fff; font-size: 11px; border-radius: 10px; padding: 1px 8px; margin-left: 5px;
}
.tmenu .tm-logout { margin: 0; }
.tmenu .tm-logout button {
    background: transparent; border: none; color: #13499d; font-size: 13px; font-weight: 500; padding: 0; cursor: pointer;
}
.tmenu .tm-logout button:hover { color: var(--kos-blue-dark); text-decoration: underline; }

/* ===== 헤더 메인 (흰 배경 + 로고 이미지 + GNB) ===== */
/* 상단 고정 스택 — 헤더 + 위치바(+ AI 강조 알림)를 한 덩어리로 sticky 고정. 높이는 내용에 따라 자동. */
.app-topstack { position: sticky; top: 0; z-index: 1020; background: #fff; }
.app-header { background: #fff; border-bottom: 2px solid var(--kos-navy); }
.app-header-inner {
    max-width: 1320px; margin: 0 auto; padding: 0 20px;
    height: 78px; display: flex; align-items: center; justify-content: space-between;
}
.app-logo { display: flex; align-items: center; gap: 0; }
.app-logo:hover { text-decoration: none; }
.app-logo .logo-img { height: 30px; width: auto; display: block; }
.app-logo .logo-sub {
    font-size: 1.0rem; font-weight: 700; color: var(--kos-blue);
    margin-left: 11px; padding-left: 11px; border-left: 1px solid #d8dee6; letter-spacing: -0.01em;
}
.app-gnb ul { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.app-gnb a {
    display: block; padding: 10px 18px; font-size: 17px; font-weight: 600;
    color: #222; border-bottom: 3px solid transparent; white-space: nowrap;
}
.app-gnb a:hover { color: var(--kos-navy); text-decoration: none; }
.app-gnb a.active { color: var(--kos-navy); border-bottom-color: var(--kos-blue); }

/* GNB 그룹 드롭다운 (커스텀 hover/focus — 스타일 유지) */
.app-gnb li.has-sub { position: relative; }
.app-gnb a.gnb-toggle { cursor: pointer; }
.app-gnb a.gnb-toggle::after { content: "▾"; margin-left: 5px; font-size: 12px; color: var(--kos-muted); }
.app-gnb .gnb-sub {
    display: none; position: absolute; top: 100%; left: 0; z-index: 1200;
    min-width: 200px; background: #fff; border: 1px solid var(--kos-line);
    border-radius: 8px; box-shadow: 0 10px 28px rgba(0, 0, 0, .12); padding: 6px;
}
.app-gnb li.has-sub:hover > .gnb-sub,
.app-gnb li.has-sub:focus-within > .gnb-sub { display: block; }
.app-gnb .gnb-sub li { width: 100%; }
.app-gnb .gnb-sub a {
    padding: 9px 14px; font-size: 15px; font-weight: 500;
    color: #333; border-bottom: 0; border-radius: 6px;
}
.app-gnb .gnb-sub a:hover { background: #eef3fb; color: var(--kos-navy); }

@media (max-width: 991px) {
    .app-header-inner { height: auto; flex-direction: column; align-items: flex-start; padding: 10px 16px; gap: 6px; }
    .app-gnb ul { flex-wrap: wrap; }
    .app-gnb a { padding: 8px 12px; font-size: 14px; }
    .app-topbar-inner, .footer-links-inner, .footer-main-inner { padding-left: 16px; padding-right: 16px; }
    /* 모바일: 드롭다운을 펼쳐서(static) 표시 */
    .app-gnb .gnb-sub { display: block; position: static; box-shadow: none; border: 0; padding: 0 0 4px 12px; min-width: 0; }
    .app-gnb a.gnb-toggle::after { content: ""; }
    /* 좁은 화면에선 60%가 너무 좁아 타이틀 라인 폭에 가깝게 */
    .ai-mark-banner-wrap { width: calc(100% - 24px); }
}

/* ===== 서브 위치바 (미니멀 — 제목 좌 + breadcrumb 우, 흰 배경) ===== */
.sub-visual { background-color: #fff; border-bottom: 1px solid var(--kos-line); position: relative; }
.sub-visual .sub-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 8px; padding-bottom: 8px; }
.sub-title { font-size: 1.3rem; font-weight: 700; color: #1d2b3a; margin: 0; letter-spacing: -0.02em; }
.breadcrumb-kos { font-size: 12.5px; color: var(--kos-muted); margin: 0; white-space: nowrap; }
.breadcrumb-kos a { color: var(--kos-muted); }
.breadcrumb-kos a:hover { color: var(--kos-blue-dark); }
.breadcrumb-kos .sep { margin: 0 6px; color: #ccc; }
.breadcrumb-kos .cur { color: var(--kos-navy); font-weight: 600; }
.breadcrumb-kos .bi-house-door-fill { color: var(--kos-blue); }

/* ===== 페이지 내부 제목 ===== */
.page-title { font-size: 1.35rem; font-weight: 800; color: var(--kos-navy); letter-spacing: -0.01em; }
.page-subtitle { color: var(--kos-sub); font-size: 0.9rem; }
.section-title {
    font-size: 1.05rem; font-weight: 700; color: #1d2b3a;
    border-left: 4px solid var(--kos-blue); padding-left: 11px; margin: 0 0 14px;
}

/* ===== 카드 ===== */
.card { border: 1px solid var(--kos-line); border-radius: 6px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); }
.card-header { background-color: #fff; border-bottom: 1px solid var(--kos-line); font-weight: 700; color: var(--kos-navy); }

/* 통계/요약 숫자 카드 */
.stat-card { border-top: 3px solid var(--kos-blue); }
.stat-card .stat-label { color: var(--kos-sub); font-size: 0.85rem; }
.stat-card .stat-value { font-size: 1.55rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--kos-navy); }
.stat-card .stat-unit { font-size: 0.85rem; font-weight: 600; color: var(--kos-sub); }

/* ===== 표 (남색 헤더) ===== */
.table { background-color: #fff; border-color: var(--kos-line2); }
.table > thead th {
    background-color: var(--kos-navy); color: #fff; font-weight: 600;
    border-color: var(--kos-navy); white-space: nowrap; vertical-align: middle;
    text-align: center !important;   /* 컬럼 헤더는 전체적으로 가운데 정렬로 통일(데이터 셀은 개별 정렬) */
}
.table > tbody td { vertical-align: middle; border-color: var(--kos-line2); }
.table-hover > tbody > tr:hover > * { background-color: var(--kos-soft); }
.table-sm th, .table-sm td { padding: 0.45rem 0.5rem; }
.table-responsive { width: 100%; max-width: 100%; overflow-x: auto; }

/* 금액(우측 정렬, 고정폭 숫자) */
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 진행률 막대 */
.exec-bar { height: 8px; background: #e9eef5; border-radius: 4px; overflow: hidden; }
.exec-bar > span { display: block; height: 100%; background: var(--kos-blue); }

/* ===== 뱃지 ===== */
.badge { font-weight: 600; letter-spacing: 0; font-size: 0.8rem; vertical-align: middle; }
/* 상태 뱃지 — 가장 긴 상태에 폭을 맞춰 통일(셀은 text-center 로 가운데) */
.badge-status { min-width: 5rem; display: inline-block; padding: 0.42em 0.55em; text-align: center; }
/* 요청유형 뱃지 — 가장 긴 '구매/계약 승인요청'에 폭을 맞춰 통일 */
.badge-type { min-width: 9rem; display: inline-block; text-align: center; }

/* ===== 진행률 셀 — 바 + 퍼센트 가로 배치(td vertical-align:middle 로 수직 가운데) ===== */
.rate-cell .exec-bar { flex: 1 1 auto; }
.rate-num { display: inline-block; width: 40px; text-align: right; white-space: nowrap; }

/* ===== 폼 ===== */
.form-label { font-weight: 600; font-size: 0.875rem; color: #344054; }
.required::after { content: " *"; color: var(--kos-danger); }
.form-control:focus, .form-select:focus { border-color: var(--kos-blue); box-shadow: 0 0 0 0.2rem rgba(67, 128, 224, 0.18); }

/* ===== 버튼 (브랜드색 통일) ===== */
.btn-primary {
    --bs-btn-bg: var(--kos-navy); --bs-btn-border-color: var(--kos-navy);
    --bs-btn-hover-bg: var(--kos-navy-dark); --bs-btn-hover-border-color: var(--kos-navy-dark);
    --bs-btn-active-bg: var(--kos-navy-dark); --bs-btn-active-border-color: var(--kos-navy-dark);
}
.btn-outline-primary {
    --bs-btn-color: var(--kos-navy); --bs-btn-border-color: var(--kos-navy);
    --bs-btn-hover-bg: var(--kos-navy); --bs-btn-hover-border-color: var(--kos-navy);
    --bs-btn-active-bg: var(--kos-navy);
}
.btn-accent { background-color: var(--kos-blue); border-color: var(--kos-blue); color: #fff; }
.btn-accent:hover { background-color: var(--kos-blue-dark); border-color: var(--kos-blue-dark); color: #fff; }

/* ===== 로그인 페이지 ===== */
.login-page { min-height: calc(100vh - 260px); display: flex; align-items: center; }
.login-box { max-width: 880px; width: 100%; margin: 0 auto; border: 1px solid var(--kos-line);
    border-radius: 10px; overflow: hidden; box-shadow: 0 8px 30px rgba(0, 56, 148, 0.08); }
.login-left { background: linear-gradient(135deg, var(--kos-navy) 0%, #0a4aa8 100%); color: #fff; padding: 44px 38px; }
.login-right { background: #fff; padding: 40px 38px; }

/* ===== 푸터 (kosmes 구조) — 스티키 + 패밀리사이트 ===== */
.app-footer { background-color: #333; flex-shrink: 0; margin-top: 40px; }
.footer-top { border-bottom: 1px solid #4e4e4e; }
.footer-top-inner {
    max-width: 1320px; margin: 0 auto; padding: 12px 20px;
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px;
}
.footer-links { display: flex; flex-wrap: wrap; align-items: center; }
.footer-links a { color: #cfcfcf; font-size: 13.5px; padding: 0 14px; position: relative; }
.footer-links a:not(:last-child)::after {
    content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 12px; background: #555;
}
.footer-links a:hover { color: #fff; }
.footer-links a:first-child { color: #fff; font-weight: 600; padding-left: 0; }
.footer-family { display: flex; gap: 10px; flex-wrap: wrap; }
.family-select {
    background: #444; color: #cfcfcf; border: 1px solid #5a5a5a; border-radius: 4px;
    font-size: 12.5px; padding: 5px 10px; min-width: 162px; cursor: pointer;
}
.family-select:focus { outline: none; border-color: #888; }
.family-select option { background: #fff; color: #222; }
.footer-main-inner {
    max-width: 1320px; margin: 0 auto; padding: 20px;
    display: flex; align-items: center; gap: 26px; justify-content: center; flex-wrap: wrap;
}
.footer-logo { height: 30px; width: auto; opacity: 0.92; }
.footer-addr { text-align: center; }
.footer-addr p { color: #9a9a9a; font-size: 12px; margin: 0; line-height: 1.7; }
.footer-addr .copyright { color: #8a8a8a; }

/* ===== AI 화면 제어 (Phase 4 — 도움말 버튼 / 폼 채움 / 행 강조) ===== */
.sub-left { display: flex; align-items: center; gap: 10px; }   /* 타이틀 + 도움말 버튼을 한 줄에 */
.ai-help-btn {
    background: var(--kos-soft); color: var(--kos-navy); border: 1px solid #cfe0f7;
    border-radius: 14px; font-size: 12px; font-weight: 600; padding: 3px 11px; cursor: pointer; white-space: nowrap;
}
.ai-help-btn:hover { background: var(--kos-blue); color: #fff; border-color: var(--kos-blue); }
@media (max-width: 575px) { .ai-help-btn { display: none; } }

/* 챗봇이 채운 입력칸 — 잠시 강조 */
.ai-filled {
    background-color: #fff7df !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.28);
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
/* 챗봇 강조 — 강조 행(연한 배경) + 형광펜(텍스트에 그은 느낌) + 상단 배너. (g2bnext 챗봇 차용) */
/* scrollIntoView 시 고정 스택(헤더+위치바+알림, 약 200px) 뒤로 강조 대상이 가리지 않도록 상단 여백 확보. */
.ai-mark-row, .ai-mark-ink { scroll-margin-top: 210px; }
.ai-mark-row > * { background-color: #f4fbe3 !important; }
.ai-mark-ink {
    background-image: linear-gradient(104deg, rgba(190,243,109,0) .5%, rgba(190,243,109,.9) 2.2%,
        rgba(160,230,70,.92) 96%, rgba(160,230,70,0) 99%);
    background-repeat: no-repeat; background-size: 100% 62%; background-position: 0 82%;
    padding: 0 1px; border-radius: 1px;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* AI 강조 알림 — 타이틀 라인(.sub-visual) 위에 겹쳐 가로 중앙·폭 60%로 띄움.
   별도 행을 만들지 않아 고정 스택 높이가 늘지 않음(화면을 덜 차지). 제목/breadcrumb는 가려지지만 알림을 끄면 복귀. */
.ai-mark-banner-wrap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 60%; z-index: 15; }
.ai-mark-banner { display: flex; align-items: center; gap: 8px;
    padding: 4px 12px; border: 1px solid #ffd480; border-radius: 10px; background: #fffaf0;
    font-size: .82rem; box-shadow: 0 6px 18px rgba(0,0,0,.16); }
.ai-mark-banner.ai-mark-empty { border-color: #dee2e6; background: #f8f9fa; }
/* 메시지는 항상 1줄 — 길면 말줄임(원문은 title 툴팁). 높이를 작게 고정해 화면을 덜 가린다. */
.ai-mark-banner-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-mark-count { flex: 0 0 auto; white-space: nowrap; }   /* 건수는 말줄임 밖 — 항상 표시 */
/* 해제 버튼도 작게 — pill 높이를 타이틀 라인보다 낮게 유지. */
.ai-mark-clear { margin-left: auto; white-space: nowrap; flex: 0 0 auto; padding: 1px 9px; font-size: .76rem; line-height: 1.6; }

/* 버튼 호버 무지갯빛 글로우는 챗봇 전송/토글에만 적용 — chat.css 참조. */