/* ========================================
   RISK_NOTE - 유틸리티 클래스
   ======================================== */

/* ── Display ── */
.d-flex { display: flex; }
.d-grid { display: grid; }
.d-none { display: none; }
.d-block { display: block; }
.d-inline-flex { display: inline-flex; }
.d-inline-block { display: inline-block; }

/* ── Flex ── */
.flex-center { align-items: center; }
.flex-start { align-items: flex-start; }
.flex-end { justify-content: flex-end; }
.flex-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.flex-2 { flex: 2; }
.flex-3 { flex: 3; }

/* ── Gap ── */
.gap-4 { gap: 4px; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.gap-24 { gap: 24px; }

/* ── Margin Top ── */
.mt-4 { margin-top: 4px; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }

/* ── Margin Bottom ── */
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: 4px; }
.mb-6 { margin-bottom: 6px; }
.mb-8 { margin-bottom: 8px; }
.mb-10 { margin-bottom: 10px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.mb-24 { margin-bottom: 24px; }

/* ── Margin Right ── */
.mr-6 { margin-right: 6px; }

/* ── Padding ── */
.pt-8 { padding-top: 8px; }
.pt-12 { padding-top: 12px; }
.pt-16 { padding-top: 16px; }
.pb-8 { padding-bottom: 8px; }
.pb-16 { padding-bottom: 16px; }
.py-8 { padding-top: 8px; padding-bottom: 8px; }
.py-12 { padding-top: 12px; padding-bottom: 12px; }
.py-16 { padding-top: 16px; padding-bottom: 16px; }
.py-20 { padding-top: 20px; padding-bottom: 20px; }
.py-40 { padding-top: 40px; padding-bottom: 40px; }
.p-8 { padding: 8px; }
.p-12 { padding: 12px; }
.p-14 { padding: 14px; }
.p-16 { padding: 16px; }
.p-20 { padding: 20px; }
.p-24 { padding: 24px; }

/* ── Text Size ── */
.text-xs { font-size: 0.6875rem; }
.text-sm { font-size: 0.8125rem; }
.text-md { font-size: 0.875rem; }
.text-base { font-size: 0.9375rem; }
.text-lg { font-size: 1rem; }
.text-xl { font-size: 1.125rem; }
.text-2xl { font-size: 1.25rem; }
.text-3xl { font-size: 1.5rem; }
.text-4xl { font-size: 1.75rem; }
.text-12 { font-size: 0.75rem; }
.text-17 { font-size: 1.0625rem; }

/* ── Text Align ── */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }

/* ── Font Weight ── */
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }

/* ── Text Color ── */
.text-ink { color: var(--ink); }
.text-gray { color: var(--ink-light); }
.text-red { color: var(--accent); }
.text-green { color: var(--green); }
.text-blue { color: var(--mgr); }
.text-yellow { color: var(--yellow); }
.text-rep { color: var(--rep); }
.text-white { color: #fff; }

/* ── Cursor ── */
.pointer { cursor: pointer; }

/* 긴 표·목록 세로 스크롤 (fnc_mgr 목록 등 공통) */
.scroll-panel-tall {
    max-height: min(85vh, 800px);
    overflow-y: auto;
}
.cursor-crosshair { cursor: crosshair; }

/* ── Visibility ── */
.hidden { display: none !important; }
.show { display: block; }

/* ── Border Radius ── */
.rounded-6 { border-radius: 6px; }
.rounded-8 { border-radius: 8px; }
.rounded-10 { border-radius: 10px; }
.rounded-12 { border-radius: 12px; }
.rounded-full { border-radius: 50%; }

/* ── Width ── */
.w-full { width: 100%; }
.w-auto { width: auto; }

/* ── Max-Width (3회 이상 반복되는 값만) ── */
.mw-160 { max-width: 160px; }

/* ── 빈 상태 (공통) ── */
.no-record {
    text-align: center;
    padding: 20px 0;
    font-size: 0.8125rem;
    color: var(--ink-light);
}

/* ── Indicator Dot (공통) ── */
.indicator-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
}
.indicator-dot.accent { background: var(--accent); }
.indicator-dot.yellow { background: var(--yellow); }
.indicator-dot.green  { background: var(--green); }
.indicator-dot.blue   { background: var(--mgr); }