/* app.css — service(bom) 공통 화면 클래스. 보드형 UI (screen-style-sample.png 기준) */

/* ── 페이지 골격 ─────────────────────────── */
.page { display: flex; flex-direction: column; flex: 1; min-width: 0; overflow-y: auto; padding: 20px 32px 48px; }
.page-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.page-head h1 { font-size: 24px; font-weight: 500; color: var(--heading-text); display: flex; align-items: center; gap: 6px; min-width: 0; }
.page-head h1 .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-head .spacer { flex: 1; }
.page-head .meta { display: flex; align-items: center; gap: 8px; color: var(--text-2); }
.page-sub { color: var(--text-2); margin-top: 4px; font-size: 13px; }
.page .tabs { margin-top: 10px; }
.page .section-gap { height: 20px; flex: none; }

/* ── 보드 툴바 ───────────────────────────── */
.board-toolbar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 14px 0 6px; }
.split-btn { display: inline-flex; }
.split-btn .btn.primary:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.split-btn .btn.primary + .btn.primary { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; border-left: 1px solid rgba(255, 255, 255, .35); width: 28px; padding: 0; }
.board-toolbar .tool { position: relative; }
.board-toolbar .tool input { height: 32px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; padding: 0 8px 0 30px; width: 150px; transition: width .15s, border-color .15s; }
.board-toolbar .tool input:focus { outline: none; border-color: var(--primary); width: 220px; background: var(--surface); }
.board-toolbar .tool > .material-icons { position: absolute; left: 7px; top: 7px; font-size: 18px; pointer-events: none; }
.board-toolbar .btn.on { background: var(--primary-soft); color: var(--primary); }
.menu-pop { position: absolute; top: 36px; left: 0; min-width: 200px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px; z-index: 40; }
.menu-pop > label, .menu-pop > button { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; padding: 7px 8px; border-radius: var(--radius-sm); cursor: pointer; text-align: left; white-space: nowrap; }
.menu-pop > label:hover, .menu-pop > button:hover { background: var(--hover); }
.menu-pop .sep { height: 1px; background: var(--border-soft); margin: 4px 0; }
.menu-pop .cap { font-size: 12px; color: var(--text-3); padding: 4px 8px; }

/* ── 그룹 + 보드 테이블 ──────────────────── */
.group { margin-top: 26px; --gc: var(--st-blue); }
.group-title { display: flex; align-items: center; gap: 6px; color: var(--gc); font-size: 18px; font-weight: 500; cursor: pointer; user-select: none; margin-left: 12px; }
.group-title .material-icons { font-size: 20px; transition: transform .15s; }
.group.collapsed .group-title .material-icons { transform: rotate(-90deg); }
.group-title .cnt { font-size: 13px; color: var(--text-3); font-weight: 400; }
.group.collapsed .board, .group.collapsed .board-foot { display: none; }

.board-scroll { overflow-x: auto; padding-bottom: 2px; }
.board { --cols: 40px minmax(260px, 1fr) 120px 150px 140px 112px 120px; margin-top: 8px; min-width: 970px; border-left: 6px solid var(--gc); border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.board .b-row { display: grid; grid-template-columns: var(--cols); border-bottom: 1px solid var(--border-soft); background: var(--surface); min-height: 36px; }
.board .b-row > div { display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--border-soft); min-width: 0; padding: 0 8px; }
.board .b-row > div:first-child { padding: 0; }
.board .b-row > div.c-title { justify-content: flex-start; gap: 8px; padding-left: 16px; }
.board .b-head { border-top: 1px solid var(--border-soft); }
.board .b-head > div { font-size: 14px; color: var(--text); font-weight: 400; }
.board .b-head > div .material-icons { font-size: 16px; color: var(--text-3); margin-left: 6px; }
.board .b-head > div.c-title { justify-content: center; padding-left: 0; }
.board .b-item { cursor: pointer; }
.board .b-item:hover { background: var(--surface-2); }
.board .b-item .c-title .t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board .b-item .c-title .open { opacity: 0; color: var(--text-2); font-size: 13px; display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1px 6px; background: var(--surface); }
.board .b-item:hover .c-title .open { opacity: 1; }
.board .b-item .c-status { padding: 0; position: relative; }
.board .b-item .c-status .cell { width: 100%; height: 100%; min-height: 36px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; }
.board .b-item .c-status .cell.can:hover { filter: brightness(.94); }
.board .b-item .c-status .cell.can::after { content: ''; position: absolute; right: 0; top: 0; border: 6px solid transparent; border-top-color: rgba(255, 255, 255, .7); border-right-color: rgba(255, 255, 255, .7); }
.board .b-item .c-due { gap: 6px; }
.board .b-item .c-due .material-icons { font-size: 18px; }
.board .b-item .c-due.late { color: var(--danger); }
.board .b-item .c-due.done .d { text-decoration: line-through; color: var(--text-2); }
.board .b-item .c-mat.wait { box-shadow: inset 0 0 0 2px var(--st-orange); }
.board .b-item .c-team { color: var(--text-2); font-size: 13px; overflow: hidden; }
.board .b-item .c-team span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board .b-add > div.c-title { color: var(--text-2); cursor: pointer; }
.board .b-add > div.c-title:hover { color: var(--primary); }
.board .b-add > div:not(.c-title) { border-right: 0; }
.board .b-empty { padding: 10px 16px; color: var(--text-3); font-size: 13px; background: var(--surface); border-bottom: 1px solid var(--border-soft); }
.board .chk { width: 16px; height: 16px; border: 1px solid var(--border); border-radius: 3px; display: inline-block; background: var(--surface); }

.board-foot { display: grid; grid-template-columns: var(--cols); min-width: 970px; margin-left: 6px; --cols: 40px minmax(260px, 1fr) 120px 150px 140px 112px 120px; }
.board-foot > div { min-height: 36px; display: flex; align-items: center; justify-content: center; padding: 0 8px; }
.board-foot > .f-cell { border: 1px solid var(--border-soft); border-top: 0; border-left: 0; background: var(--surface); box-shadow: 0 2px 4px rgba(0, 0, 0, .04); }
.board-foot > .f-cell.first { border-left: 1px solid var(--border-soft); border-radius: 0 0 0 var(--radius-sm); }
.board-foot > .f-cell.last { border-radius: 0 0 var(--radius-sm) 0; }
.dist-bar { display: flex; width: 100%; height: 24px; overflow: hidden; }
.dist-bar > span { height: 100%; }
.dist-bar.none { background: var(--st-gray); border-radius: 2px; }
.range-pill { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 22px; border-radius: 11px; background: var(--st-blue); color: #fff; font-size: 13px; font-weight: 500; }
.range-pill.none { background: var(--st-gray); }

/* 상태 선택 팝오버 */
.status-pop { position: fixed; z-index: 150; width: 200px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.status-pop .opt { height: 32px; border: 0; color: #fff; border-radius: 2px; cursor: pointer; font-size: 14px; }
.status-pop .opt:hover { filter: brightness(.92); }
.status-pop .cap { font-size: 12px; color: var(--text-3); padding: 0 2px; }
.status-pop .none { font-size: 13px; color: var(--text-2); padding: 4px; }

/* ── 키-값 / 정보 블록 ───────────────────── */
.kv { display: grid; grid-template-columns: 120px 1fr; gap: 8px 16px; font-size: 14px; }
.kv > dt { color: var(--text-2); }
.kv > dd { margin: 0; min-width: 0; word-break: break-word; }
.info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }

/* ── 타임라인/기록 리스트 ─────────────────── */
.feed { display: flex; flex-direction: column; gap: 12px; }
.feed-item { border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 12px 14px; background: var(--surface); }
.feed-item .fi-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; color: var(--text-2); flex-wrap: wrap; }
.feed-item .fi-head strong { color: var(--text); font-weight: 600; }
.feed-item .fi-body { display: grid; grid-template-columns: 110px 1fr; gap: 4px 12px; font-size: 14px; }
.feed-item .fi-body > dt { color: var(--text-2); font-size: 13px; }
.feed-item .fi-body > dd { margin: 0; white-space: pre-wrap; word-break: break-word; }
.feed-item .fi-actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: 10px; }

/* ── 홈 대시보드 ─────────────────────────── */
.stat-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-top: 16px; }
.stat { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; border-left: 4px solid var(--sc, var(--st-blue)); }
.stat .n { font-size: 26px; font-weight: 600; color: var(--heading-text); }
.stat .l { font-size: 13px; color: var(--text-2); }

/* ── 문서 편집기 ─────────────────────────── */
.doc-editor { width: 100%; min-height: 420px; font-family: var(--font); font-size: 14px; line-height: 1.7; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); resize: vertical; }
.doc-editor:focus { outline: none; border-color: var(--primary); }
.doc-view { white-space: pre-wrap; word-break: break-word; line-height: 1.7; padding: 16px; border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--surface-2); min-height: 200px; }

/* ── 슬라이더 패널 공통 ──────────────────── */
.panel { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--surface); }
.panel-head { display: flex; align-items: flex-start; gap: 8px; padding: 18px 20px 0; }
.panel-head h2 { flex: 1; font-size: 20px; font-weight: 500; color: var(--heading-text); word-break: break-word; }
.panel-body { flex: 1; overflow-y: auto; padding: 0 20px 32px; }

@media (max-width: 900px) {
    .page { padding: 16px 16px 40px; }
    .kv { grid-template-columns: 1fr; gap: 2px; }
    .kv > dd { margin-bottom: 8px; }
    .feed-item .fi-body { grid-template-columns: 1fr; }
}