movie/resources/sass/_variables.scss

@use 'sass:meta' as meta; 

// app.scss (select2 import 전에!)
$border-color: #333 !default; // Bootstrap의 Sass 변수 (필요 시)
$input-border-color: #4c4c4c !default;

// select2-bootstrap-5-theme가 참조하는 변수가 있다면 그걸 hex로 오버라이드
$select2-border-color: #4c4c4c !default; // (패키지 변수명 확인 필요)

$bootstrap-settings: (
    // Body
    body-color: #f1f1f1,
    font-family-base: "Nanum-Square-Neo-Regular",

    // Typography
    font-family-sans-serif: "Nanum-Square-Neo-Regular",
    font-size-base: 0.9rem,
    form-text-color: #9b9b9b,
    text-muted: #777,
    line-height-base: 1.6,
    link-color: #f1f1f1,
    link-hover-color: #b9b9b9,
    link-decoration: none,

    // Border
    border-color: #333,

    // Buttons / theme colors
    primary: #1c55fa,
    danger: #b00505,

    // Input
    input-bg: #161616,
    input-color: #b7b8ba,
    input-box-shadow: none,
    input-border-color: #4c4c4c,
    input-focus-box-shadow: none,
    input-focus-border-color: #519bce,
    input-focus-bg: #161616,

    // Select
    form-select-color: #f1f1f1,
    form-select-border-color: #4c4c4c,
    form-select-box-shadow: none,
    form-select-focus-border-color: #4c4c4c,
    form-select-focus-box-shadow: none,

    // Checkbox
    form-check-label-color: #b7b8ba,
    form-check-input-border: 1px solid #4c4c4c,
    form-check-input-checked-bg-color: #161616,
    form-check-input-checked-border-color: #4c4c4c,
    form-check-input-focus-border: #519bce,
    form-check-input-focus-box-shadow: none,

    // Table
    table-bg: transparent,
    table-color: #b1b1b1,
    table-border-color: #3f424b,
    table-caption-color: #333,
    table-hover-bg: #252525,
    table-hover-color: #f1f1f1,

    // Pagination
    pagination-bg: #000,
    pagination-border-color: #333,
    pagination-border-radius: 0,
    pagination-active-bg: #0f0f0f,
    pagination-active-color: #f1f1f1,
    pagination-active-border-color: #333,
    pagination-hover-bg: #0f0f0f,
    pagination-hover-color: #fff,
    pagination-hover-border-color: #333,
    pagination-disabled-bg: #282828,
    pagination-disabled-border-color: #333,
    pagination-focus-bg: #0f0f0f,
    pagination-focus-color: #f1f1f1,
    pagination-focus-box-shadow: none,

    // Modal
    modal-content-bg: #333,
    modal-content-color: #f1f1f1,
    modal-header-border-color: #3f3f3f,
    modal-header-border-width: 0 0 1px 0,
    modal-content-border-color: #3f3f3f,

    // Tabs
    nav-tabs-border-color: #2c2c2c,
    nav-tabs-border-radius: 0,
    nav-tabs-link-hover-border-color: #006989,
    nav-tabs-link-active-color: #c7c7c7,
    nav-tabs-link-active-bg: #003954,
    nav-tabs-link-active-border-color: #006989,

    // Navbar
    navbar-brand-margin-end: 0,
    navbar-toggler-border-radius: 2px,
    navbar-toggler-focus-width: 1.4px,
    navbar-light-color: #d6d6d6,

    // Card
    card-bg: transparent, // ← none 말고 transparent로!

    // Label
    form-label-color: #b7b8ba,

    // Dropdown
    dropdown-link-hover-color: #000,
    dropdown-link-hover-bg: #eee,
    dropdown-link-active-color: #000,
    dropdown-link-active-bg: #eee
);

$grid-breakpoints: (
   xs: 0,
   xxs: 420px,
   sm: 576px,
   md: 768px,
   lg: 992px,
   xl: 1200px,
   xxl: 1400px
);

$container-max-widths: (
   xxs: 420px,
   sm: 540px,
   md: 720px,
   lg: 960px,
   xl: 1140px,
   xxl: 1320px
);

@include meta.load-css('bootstrap/scss/bootstrap', $with: $bootstrap-settings);