/* M01 로직 칸 — 왼쪽 목록 / 가운데 일위대가표 / 오른쪽 시험 계산 */ .m01-logic [hidden] { display: none !important; } .m01-logic { display: grid; grid-template-columns: 240px minmax(0, 1fr) 280px; gap: var(--spacing-12); height: 100%; min-height: 0; padding: var(--spacing-12); box-sizing: border-box; color: var(--color-text-body); font-size: var(--text-body-sm); } .m01-logic__side, .m01-logic__main, .m01-logic__calc { display: flex; flex-direction: column; gap: var(--spacing-8); min-height: 0; overflow: auto; } .m01-logic__side, .m01-logic__calc { padding: var(--spacing-8); border-radius: var(--radius-cards); background: var(--color-surface); } .m01-logic__filters { display: flex; flex-direction: column; gap: var(--spacing-4); } .m01-logic__check { display: flex; align-items: center; gap: var(--spacing-4); } .m01-logic__list { margin: 0; padding: 0; list-style: none; overflow: auto; } .m01-logic__item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: var(--spacing-4) var(--spacing-8); border: 0; border-radius: var(--radius-buttons); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; } .m01-logic__item:hover { background: var(--color-paper); } .m01-logic__item.is-active { background: var(--color-mist-violet); color: var(--color-accent); } .m01-logic__badges { display: flex; gap: var(--spacing-4); } .m01-logic__badge { font-size: var(--text-caption); color: var(--color-warning); } .m01-logic__badge--blocked { color: var(--color-danger); } .m01-logic__bar { display: flex; align-items: center; gap: var(--spacing-8); flex-wrap: wrap; } .m01-logic__bar h2 { margin: 0 auto 0 0; font-size: 18px; color: var(--color-text); } .m01-logic__empty { color: var(--color-text-muted); } .m01-logic__head { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--spacing-8); } .m01-logic__field { display: flex; flex-direction: column; gap: 2px; color: var(--color-text-secondary); font-size: var(--text-caption); } .m01-logic__field--wide { grid-column: 1 / -1; } .m01-logic__file { color: var(--color-text-body); font-size: var(--text-body-sm); } .m01-logic__input { box-sizing: border-box; width: 100%; min-width: 0; padding: 3px 6px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-canvas); color: var(--color-text-body); font: inherit; font-size: var(--text-body-sm); } .m01-logic__note { min-height: 48px; resize: vertical; } .m01-logic__section { display: flex; flex-direction: column; gap: var(--spacing-4); } .m01-logic__section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-8); } .m01-logic__section-head h3, .m01-logic__calc h3 { margin: 0; font-size: var(--text-body-sm); color: var(--color-text); } .m01-logic__grid { width: 100%; border-collapse: collapse; } .m01-logic__grid th, .m01-logic__grid td { padding: 2px 4px; border-bottom: 1px solid var(--color-border); vertical-align: top; text-align: left; } .m01-logic__grid th { color: var(--color-text-secondary); font-size: var(--text-caption); font-weight: 600; } .m01-logic__grid th, .m01-logic__grid .ui-btn { white-space: nowrap; } .m01-logic__scroll { overflow-x: auto; } .m01-logic__grid--ho { min-width: 1124px; table-layout: fixed; } .m01-logic__grid--ho th:nth-child(1) { width: 76px; } .m01-logic__grid--ho th:nth-child(2) { width: 220px; } .m01-logic__grid--ho th:nth-child(3) { width: 150px; } .m01-logic__grid--ho th:nth-child(4) { width: 56px; } .m01-logic__grid--ho th:nth-child(5) { width: 300px; } .m01-logic__grid--ho th:nth-child(6), .m01-logic__grid--ho th:nth-child(7) { width: 100px; } .m01-logic__grid--ho th:nth-child(8) { width: 90px; } .m01-logic__grid--ho th:nth-child(9) { width: 32px; } .m01-logic__pair { display: flex; align-items: center; gap: var(--spacing-4); } .m01-logic__stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .m01-logic__range { display: flex; align-items: center; gap: 2px; } .m01-logic__num { width: 64px; } .m01-logic__tag { flex: none; padding: 0 6px; border-radius: var(--radius-pills); background: var(--color-mist-violet); color: var(--color-accent); font-size: var(--text-caption); } .m01-logic__money { display: block; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .m01-logic__muted { color: var(--color-text-muted); font-size: var(--text-caption); } .m01-logic__bad { color: var(--color-danger); font-size: var(--text-caption); } .m01-logic__drop { border: 0; background: none; color: var(--color-text-muted); font-size: 16px; cursor: pointer; } .m01-logic__drop:hover { color: var(--color-danger); } .m01-logic__reasons { padding: var(--spacing-8); border-left: 3px solid var(--color-danger); border-radius: var(--radius-sm); background: var(--color-canvas); color: var(--color-danger); } .m01-logic__sums { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--spacing-8); margin: 0; } .m01-logic__sums dt { color: var(--color-text-secondary); } .m01-logic__sums dd { margin: 0; text-align: right; } .m01-logic__calc-out { display: flex; flex-direction: column; gap: var(--spacing-8); } .m01-logic__backdrop { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--color-ink) 30%, transparent); } .m01-logic__pick { display: flex; flex-direction: column; gap: var(--spacing-8); width: min(720px, 92vw); max-height: 80vh; padding: var(--spacing-16); border-radius: var(--radius-xl); background: var(--color-surface-raised); font-size: var(--text-body-sm); } .m01-logic__pick-bar { display: grid; grid-template-columns: 120px 1fr auto; align-items: center; gap: var(--spacing-8); } .m01-logic__pick-list { overflow: auto; } .m01-logic__pick-row { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-8); width: 100%; padding: var(--spacing-4) var(--spacing-8); border: 0; border-bottom: 1px solid var(--color-border); background: none; color: inherit; font: inherit; text-align: left; } .m01-logic__pick-row--button { cursor: pointer; } .m01-logic__pick-row--button:hover { background: var(--color-paper); } .m01-logic__chips { display: flex; flex-wrap: wrap; gap: var(--spacing-4); }