/* ===================================================================== eSIM Admin Console — 공통 테마 (refined dark) 각 페이지 의 가장 마지막에 로드하여 레이아웃은 유지하고 색/타이포/그림자/라운드/포커스 등 외형만 일관되게 다듬습니다. ===================================================================== */ @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"); :root { /* 배경 */ --bg-1: #0e1014; --bg-2: #161a22; --bg-3: #1b2030; /* 표면(카드/패널) */ --surface: rgba(255, 255, 255, 0.045); --surface-2: rgba(255, 255, 255, 0.028); --surface-input: rgba(10, 12, 16, 0.55); /* 경계선 */ --border: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.20); /* 텍스트 */ --text: #e8eaee; --muted: #98a0ad; /* 강조색 */ --accent: #5b8cff; --accent-2: #7c6cff; --accent-soft: rgba(91, 140, 255, 0.18); --good: #34d399; --bad: #fb7185; --gold: #f7c948; /* 형태 */ --radius: 16px; --radius-sm: 10px; --shadow: 0 18px 44px rgba(0, 0, 0, 0.45); --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.35); --ring: 0 0 0 3px var(--accent-soft); --font: "Pretendard", system-ui, -apple-system, "Segoe UI", Roboto, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; } /* ===== Base ===== */ body { background: radial-gradient(1200px 600px at 12% -8%, rgba(91, 140, 255, 0.12), transparent 60%), radial-gradient(1000px 560px at 100% 0%, rgba(124, 108, 255, 0.10), transparent 55%), linear-gradient(135deg, var(--bg-1), var(--bg-2)) !important; background-attachment: fixed !important; color: var(--text) !important; font-family: var(--font) !important; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, .menu-title, .title { color: var(--text) !important; letter-spacing: -0.01em; } ::selection { background: var(--accent-soft); } /* ===== Logo ===== */ .logo { background: var(--surface) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-sm), inset 0 0 24px rgba(91, 140, 255, 0.08) !important; backdrop-filter: blur(8px); color: var(--text) !important; letter-spacing: 0.04em; transition: transform 0.25s ease, box-shadow 0.25s ease !important; } .logo:hover { transform: translateY(-3px) !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--accent-soft), inset 0 0 26px rgba(91, 140, 255, 0.16) !important; } /* ===== 카드 / 패널 (login-card, search-form, menu-card, table-container, card) ===== */ .login-card, .search-form, .menu-card, .table-container, .table-wrapper, .card { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .menu-title { color: var(--muted) !important; font-weight: 600; } /* ===== 입력 / 셀렉트 ===== */ input, select, .form-control, .form-select, .form-grid input, .form-grid select { background-color: var(--surface-input) !important; color: var(--text) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important; transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important; } input::placeholder, .form-control::placeholder { color: rgba(255, 255, 255, 0.38) !important; } input:hover, select:hover, .form-control:hover, .form-select:hover { border-color: var(--border-strong) !important; } input:focus, select:focus, .form-control:focus, .form-select:focus { background-color: rgba(10, 12, 16, 0.75) !important; color: var(--text) !important; border-color: var(--accent) !important; box-shadow: var(--ring) !important; transform: none !important; /* 기존 scale(1.05) 제거 → 차분한 포커스 */ outline: none !important; } option, select option { background-color: #11141b !important; color: var(--text) !important; } /* 커스텀 드롭다운 화살표 색을 강조색 톤으로 (단일 화살표) */ select { -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; background-image: url("data:image/svg+xml;utf8,") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 14px !important; padding-right: 34px !important; } /* ===== 버튼 ===== */ .search-btn, .download-btn, .btn-main, .btn-login { background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important; color: #fff !important; border: none !important; border-radius: var(--radius-sm) !important; font-weight: 700 !important; letter-spacing: 0.01em; box-shadow: 0 8px 20px rgba(91, 140, 255, 0.28) !important; transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease !important; } .search-btn:hover, .download-btn:hover, .btn-main:hover, .btn-login:hover { background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important; filter: brightness(1.08) !important; transform: translateY(-2px) !important; box-shadow: 0 12px 26px rgba(91, 140, 255, 0.4) !important; } .search-btn:active, .download-btn:active, .btn-main:active, .btn-login:active { transform: translateY(0) !important; box-shadow: 0 6px 14px rgba(91, 140, 255, 0.3) !important; } /* 다운로드(보조) 버튼은 톤다운 */ .download-btn { background: linear-gradient(135deg, #3a4254, #2a3142) !important; box-shadow: var(--shadow-sm) !important; } .download-btn:hover { background: linear-gradient(135deg, #424b60, #313a4e) !important; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4) !important; } /* ===== 테이블 ===== */ .table, .table.table-dark { --bs-table-bg: transparent; color: var(--text) !important; border-color: var(--border) !important; } .table thead th { background: rgba(255, 255, 255, 0.05) !important; color: var(--muted) !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.82em !important; border-color: var(--border) !important; border-bottom: 1px solid var(--border-strong) !important; white-space: nowrap; } .table tbody td { border-color: rgba(255, 255, 255, 0.06) !important; vertical-align: middle; } .table.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: transparent; background: rgba(255, 255, 255, 0.022) !important; color: var(--text) !important; } .table tbody tr { transition: background 0.15s ease; } .table tbody tr:hover > * { background: var(--accent-soft) !important; } /* 요약 테이블 */ .summary-table { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important; box-shadow: var(--shadow-sm) !important; } .summary-table td { color: var(--text) !important; } /* 상태 텍스트 컬러 보정 */ .text-primary { color: var(--accent) !important; } .text-success { color: var(--good) !important; } /* ===== Alert ===== */ .alert-danger { background: rgba(251, 113, 133, 0.14) !important; border: 1px solid rgba(251, 113, 133, 0.4) !important; color: #ffd7dd !important; border-radius: var(--radius-sm) !important; } .alert-warning { background: rgba(247, 201, 72, 0.14) !important; border: 1px solid rgba(247, 201, 72, 0.4) !important; color: #ffe9b0 !important; border-radius: var(--radius-sm) !important; } /* ===== 스크롤바 ===== */ * { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.28); background-clip: content-box; }