/* ================================ Admin UI (Independent) Prefix: a- ================================ */ :root{ --a-bg: #0b0f19; --a-panel: rgba(255,255,255,.06); --a-panel2: rgba(255,255,255,.08); --a-border: rgba(255,255,255,.12); --a-text: rgba(255,255,255,.92); --a-muted: rgba(255,255,255,.64); --a-muted2: rgba(255,255,255,.52); --a-primary: #2b7fff; --a-primary2: #7c5cff; --a-danger: #ff4d4f; --a-warn: #ffb020; --a-info: #2b7fff; --a-radius: 18px; --a-radius-sm: 12px; --a-shadow: 0 24px 80px rgba(0,0,0,.45); --a-shadow2: 0 12px 40px rgba(0,0,0,.35); } *{ box-sizing:border-box; } html,body{ height:100%; } .a-body{ margin:0; font-family: Pretendard, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background: var(--a-bg); color: var(--a-text); } .a-auth-bg{ position:fixed; inset:0; background: radial-gradient(1000px 500px at 10% 10%, rgba(43,127,255,.20), transparent 55%), radial-gradient(900px 450px at 90% 15%, rgba(124,92,255,.18), transparent 60%), radial-gradient(700px 400px at 50% 90%, rgba(255,255,255,.06), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.03), transparent 35%); filter: saturate(1.1); } .a-auth-shell{ min-height:100vh; display:grid; place-items:center; padding:28px; position:relative; } .a-auth-card{ width:min(980px, 100%); display:grid; grid-template-columns: 1.05fr .95fr; border:1px solid var(--a-border); border-radius: var(--a-radius); background: rgba(0,0,0,.22); backdrop-filter: blur(10px); box-shadow: var(--a-shadow); overflow:hidden; } .a-auth-left{ padding:28px; border-right:1px solid var(--a-border); background: linear-gradient(135deg, rgba(43,127,255,.10), rgba(124,92,255,.08)), rgba(255,255,255,.03); } .a-auth-right{ padding:22px; } .a-brand{ display:flex; align-items:center; gap:12px; margin-bottom:22px; } .a-brand__mark{ width:42px; height:42px; border-radius:14px; display:grid; place-items:center; font-weight:900; background: linear-gradient(135deg, rgba(43,127,255,.95), rgba(124,92,255,.95)); box-shadow: var(--a-shadow2); } .a-brand__name{ font-weight:800; letter-spacing:.02em; } .a-brand__sub{ color:var(--a-muted); font-size:13px; margin-top:2px; } .a-auth-left__copy{ margin-top:18px; } .a-h1{ font-size:22px; margin:0 0 8px; letter-spacing:-.02em; } .a-muted{ color:var(--a-muted); } .a-badges{ margin-top:18px; display:flex; flex-wrap:wrap; gap:8px; } .a-badge{ font-size:12px; color: rgba(255,255,255,.80); border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); padding:6px 10px; border-radius: 999px; } .a-panel{ border:1px solid var(--a-border); background: var(--a-panel); border-radius: var(--a-radius); padding:18px; } .a-form{ display:block; } .a-field{ margin:14px 0; } .a-label{ display:block; font-size:13px; color: rgba(255,255,255,.82); margin-bottom:8px; } .a-input{ width:100%; border-radius: var(--a-radius-sm); border:1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.25); color: var(--a-text); padding:12px 12px; outline:none; transition: border-color .15s ease, background .15s ease, transform .15s ease; } .a-input::placeholder{ color: rgba(255,255,255,.35); } .a-input:focus{ border-color: rgba(43,127,255,.55); background: rgba(0,0,0,.32); } .a-inputwrap{ position:relative; } .a-input--withbtn{ padding-right:64px; } .a-inputbtn{ position:absolute; right:10px; top:50%; transform: translateY(-50%); border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: rgba(255,255,255,.85); padding:8px 10px; border-radius: 999px; cursor:pointer; font-size:12px; } .a-inputbtn:hover{ background: rgba(255,255,255,.10); } .a-row{ margin:10px 0 16px; display:flex; align-items:center; justify-content:space-between; gap:10px; } .a-check{ display:flex; align-items:center; gap:8px; font-size:13px; color: rgba(255,255,255,.78); user-select:none; } .a-check input{ width:16px; height:16px; } .a-link{ color: rgba(255,255,255,.78); text-decoration:none; font-size:13px; opacity:.9; } .a-link:hover{ text-decoration:underline; } .a-btn{ width:100%; border-radius: var(--a-radius-sm); border:1px solid rgba(255,255,255,.14); padding:12px 14px; cursor:pointer; font-weight:800; letter-spacing:.01em; } .a-btn--primary{ background: var(--a-primary); border: 1px solid rgba(255,255,255,.12); box-shadow: none; } .a-btn--primary:hover{ filter: brightness(1.05); } .a-btn--primary:active{ transform: translateY(1px); } .a-help{ margin-top:12px; } .a-foot{ margin-top:14px; text-align:center; } .a-alert{ border-radius: 14px; border: 1px solid rgba(0,0,0,.12); padding: 12px 12px; margin: 0 0 12px; background: #fff; /* ✅ 흰색 배경 */ color: #111; /* ✅ 기본 검정 */ } .a-alert__title{ font-weight:900; margin-bottom:4px; font-size:13px; color:#111; } .a-alert__body{ font-size:13px; color:#111; } .a-alert--danger{ border-color: rgba(255,77,79,.45); } .a-alert--danger .a-alert__title, .a-alert--danger .a-alert__body{ color: #d32f2f; /* ✅ 실패 붉은색 */ } .a-alert--warn{ border-color: rgba(255,176,32,.28); background: rgba(255,176,32,.10); } .a-alert--info{ border-color: rgba(43,127,255,.28); background: rgba(43,127,255,.10); } .a-brand__logoBox{ width: 110px; display: inline-flex; align-items: center; justify-content: center; padding:5px; background: #fff; border-radius: 5px; border: 1px solid rgba(0,0,0,.08); box-shadow: 0 6px 18px rgba(0,0,0,.12); overflow: hidden; } .a-brand__logo{ width: 70%; height: 70%; object-fit: contain; display: block; } @media (max-width: 860px){ .a-auth-card{ grid-template-columns: 1fr; } .a-auth-left{ border-right:0; border-bottom:1px solid var(--a-border); } } /* ===== OTP ===== */ .a-otp-meta{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); border-radius: 14px; margin-bottom: 14px; } .a-otp-meta__label{ font-weight: 700; letter-spacing: .02em; opacity: .85; } .a-otp-meta__value{ font-weight: 800; letter-spacing: .08em; opacity: .95; } .a-otp-input{ text-align: center; font-size: 22px; font-weight: 800; letter-spacing: .35em; /* 6자리 느낌 */ padding: 14px 14px; } .a-otp-help{ margin-top: 12px; } /* 공통 에러 스타일이 없다면 */ .a-error{ margin-top: 8px; font-size: 12px; color: #ff6b6b; } /* ================================ Admin App (after login) ================================ */ .a-app__wrap{ min-height: 100vh; display: grid; grid-template-columns: 280px 1fr; } .a-side{ position: sticky; top: 0; height: 100vh; border-right: 1px solid var(--a-border); background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 40%), rgba(0,0,0,.18); backdrop-filter: blur(10px); overflow: auto; } .a-side__brand{ display:flex; align-items:center; gap:12px; padding:18px 16px; border-bottom: 1px solid var(--a-border); } .a-side__logo{ width:42px; height:42px; border-radius: 14px; display:grid; place-items:center; font-weight:900; background: linear-gradient(135deg, rgba(43,127,255,.95), rgba(124,92,255,.95)); box-shadow: var(--a-shadow2); } .a-side__brandName{ font-weight: 900; letter-spacing: .02em; } .a-side__brandSub{ font-size: 12px; color: var(--a-muted); margin-top: 2px; } .a-nav{ padding: 14px 10px 18px; } .a-nav__group{ margin: 10px 0 14px; } .a-nav__title{ padding: 8px 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.55); } .a-nav__item{ display:flex; align-items:center; gap:10px; padding: 10px 10px; border-radius: 12px; color: rgba(255,255,255,.82); text-decoration:none; border: 1px solid transparent; cursor:pointer; margin-top: 5px; } .a-nav__dot{ width: 8px; height: 8px; border-radius: 99px; background: rgba(255,255,255,.25); } .a-nav__item:hover{ background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.10); } .a-nav__item.is-active{ background: rgba(43,127,255,.12); border-color: rgba(43,127,255,.22); } .a-nav__item.is-active .a-nav__dot{ background: linear-gradient(135deg, var(--a-primary), var(--a-primary2)); } .a-nav__item.is-disabled{ opacity: .45; cursor: not-allowed; } .a-main{ min-width: 0; display: grid; grid-template-rows: auto 1fr auto; } .a-top{ border-bottom: 1px solid var(--a-border); background: radial-gradient(900px 260px at 15% 0%, rgba(43,127,255,.14), transparent 60%), radial-gradient(700px 240px at 85% 0%, rgba(124,92,255,.12), transparent 60%), rgba(0,0,0,.14); backdrop-filter: blur(10px); } .a-top > *{ padding: 14px 18px; display:flex; align-items:center; justify-content:space-between; gap: 12px; } .a-top__h{ font-size: 16px; font-weight: 900; letter-spacing: -.02em; } .a-top__sub{ font-size: 12px; margin-top: 2px; } .a-top__search{ width: min(520px, 42vw); } .a-top__searchInput{ width: 100%; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.22); color: var(--a-text); padding: 10px 12px; outline: none; } .a-top__user{ display:flex; align-items:center; gap: 10px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); padding: 8px 10px; border-radius: 16px; } .a-top__avatar{ width:34px; height:34px; border-radius: 12px; display:grid; place-items:center; font-weight: 900; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.10); } .a-top__userName{ font-weight: 800; font-size: 13px; } .a-top__userMeta{ font-size: 12px; } .a-top__logout{ border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: rgba(255,255,255,.86); padding: 8px 10px; border-radius: 999px; cursor:pointer; font-size: 12px; } .a-top__logout:hover{ background: rgba(255,255,255,.10); } .a-content{ padding: 18px; } .a-footer{ padding: 14px 18px; border-top: 1px solid var(--a-border); background: rgba(0,0,0,.10); } /* Dashboard */ .a-dash{ display:block; } .a-grid{ display:grid; gap: 12px; } .a-grid--kpi{ grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 12px; } .a-grid--charts{ grid-template-columns: 1.2fr .8fr; margin-bottom: 12px; } .a-grid--tables{ grid-template-columns: 1fr 1fr; } .a-card{ border:1px solid var(--a-border); background: rgba(255,255,255,.04); border-radius: var(--a-radius); padding: 14px; box-shadow: var(--a-shadow2); min-width: 0; } .a-card--accent{ background: linear-gradient(135deg, rgba(43,127,255,.18), rgba(124,92,255,.14)), rgba(255,255,255,.04); border-color: rgba(43,127,255,.18); } .a-card--lg{ min-height: 280px; } .a-card__label{ font-size: 12px; } .a-card__value{ margin-top: 8px; font-size: 24px; font-weight: 900; letter-spacing: -.02em; } .a-card__meta{ margin-top: 6px; font-size: 12px; } .a-card__head{ display:flex; align-items:flex-start; justify-content:space-between; gap: 10px; margin-bottom: 10px; } .a-card__title{ font-weight: 900; } .a-card__desc{ font-size: 12px; margin-top: 3px; } .a-chip{ font-size: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); padding: 6px 10px; border-radius: 999px; } .a-chart{ height: 220px; border-radius: 14px; border: 1px dashed rgba(255,255,255,.14); background: rgba(0,0,0,.15); display:grid; place-items:center; } .a-chart__placeholder{ font-size: 12px; } .a-tr{ display:grid; grid-template-columns: 90px 70px 1fr 90px; gap: 10px; padding: 10px 8px; border-top: 1px solid rgba(255,255,255,.08); align-items:center; } .a-th{ border-top: 0; padding-top: 6px; padding-bottom: 8px; color: rgba(255,255,255,.55); font-size: 12px; } .a-ellipsis{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; min-width: 0; } .a-pill{ display:inline-flex; align-items:center; justify-content:center; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); font-size: 12px; } .a-pill--warn{ border-color: rgba(255,176,32,.28); background: rgba(255,176,32,.10); } .a-pill--info{ border-color: rgba(43,127,255,.28); background: rgba(43,127,255,.10); } @media (max-width: 1200px){ .a-grid--kpi{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .a-grid--charts{ grid-template-columns: 1fr; } .a-grid--tables{ grid-template-columns: 1fr; } } @media (max-width: 980px){ .a-app__wrap{ grid-template-columns: 1fr; } .a-side{ position: relative; height: auto; } } /* ===== After login layout ===== */ .a-app__wrap{ min-height:100vh; display:grid; grid-template-columns:280px 1fr; } .a-side{ position:sticky; top:0; height:100vh; overflow:auto; border-right:1px solid var(--a-border); background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 40%), rgba(0,0,0,.18); backdrop-filter: blur(10px); } .a-side__brand{ display:flex; gap:12px; align-items:center; padding:18px 16px; border-bottom:1px solid var(--a-border); } .a-side__logo{ width:42px; height:42px; border-radius:14px; display:grid; place-items:center; font-weight:900; background: linear-gradient(135deg, rgba(43,127,255,.95), rgba(124,92,255,.95)); box-shadow: var(--a-shadow2); } .a-nav{ padding:14px 10px 18px; } .a-nav__title{ padding:8px 10px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.55); } .a-nav__item{ display:flex; gap:10px; align-items:center; padding:10px; border-radius:12px; color:rgba(255,255,255,.82); text-decoration:none; border:1px solid transparent; } .a-nav__dot{ width:8px; height:8px; border-radius:999px; background:rgba(255,255,255,.25); } .a-nav__item:hover{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.10); } .a-nav__item.is-active{ background: rgba(43,127,255,.12); border-color: rgba(43,127,255,.22); } .a-nav__item.is-active .a-nav__dot{ background: linear-gradient(135deg, var(--a-primary), var(--a-primary2)); } .a-nav__item.is-disabled{ opacity:.45; cursor:not-allowed; } .a-main{ min-width:0; display:grid; grid-template-rows:auto 1fr auto; } .a-top{ border-bottom:1px solid var(--a-border); background: rgba(0,0,0,.14); backdrop-filter: blur(10px); } .a-top > *{ padding:14px 18px; display:flex; justify-content:space-between; align-items:center; gap:12px; } .a-top__h{ font-size:16px; font-weight:900; letter-spacing:-.02em; } .a-top__sub{ font-size:12px; margin-top:2px; } .a-top__user{ display:flex; gap:10px; align-items:center; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04); padding:8px 10px; border-radius:16px; } .a-top__avatar{ width:34px; height:34px; border-radius:12px; display:grid; place-items:center; font-weight:900; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.10); } .a-top__logout{ border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); color:rgba(255,255,255,.86); padding:8px 10px; border-radius:999px; cursor:pointer; font-size:12px; } .a-top__logout:hover{ background:rgba(255,255,255,.10); } .a-content{ padding:18px; } .a-footer{ padding:14px 18px; border-top:1px solid var(--a-border); background:rgba(0,0,0,.10); } /* ===== 내정보 화면 ===== */ .a-grid--me{ display:grid; grid-template-columns: 1fr 420px; gap:12px; } .a-me__kv{ display:grid; grid-template-columns: 120px 1fr; gap:8px 12px; margin-top:8px; } .a-card__title{ font-weight:900; } .a-card__desc{ font-size:12px; margin-top:3px; } @media (max-width: 1100px){ .a-grid--me{ grid-template-columns: 1fr; } .a-app__wrap{ grid-template-columns: 1fr; } .a-side{ position:relative; height:auto; } } /* ===== Toast (System Notification) ===== */ .a-toast-wrap{ position: fixed; top: 18px; right: 18px; display: grid; gap: 10px; z-index: 9999; width: min(360px, calc(100vw - 36px)); } .a-toast{ border-radius: 14px; border: 1px solid rgba(0,0,0,.12); background: #fff; /* ✅ 흰색 배경 */ box-shadow: 0 12px 30px rgba(0,0,0,.18); padding: 12px 12px; animation: aToastIn .16s ease-out; } .a-toast__title{ font-weight: 900; font-size: 13px; margin: 0 0 4px; color: #111; /* 기본 검정 */ } .a-toast__msg{ font-size: 13px; line-height: 1.35; color: #111; /* ✅ 성공은 검정 */ } /* ✅ 성공: 검정 유지 */ .a-toast--success{} /* ✅ 실패(오류): 붉은색 */ .a-toast--danger{ border-color: rgba(255,77,79,.45); } .a-toast--danger .a-toast__title, .a-toast--danger .a-toast__msg{ color: #d32f2f; /* ✅ 붉은색 */ } /* (선택) warn/info도 보기 좋게 */ .a-toast--warn{ border-color: rgba(255,176,32,.45); } .a-toast--info{ border-color: rgba(43,127,255,.35); } @keyframes aToastIn{ from { transform: translateY(-6px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ===== Highlight button (Password Change) ===== */ .a-btn--highlight{ border: 1px solid rgba(43,127,255,.35); background: #2b7fff; /* ✅ 단색 */ color: #fff; box-shadow: 0 14px 34px rgba(43,127,255,.18); } .a-btn--highlight:hover{ filter: brightness(1.05); } .a-btn--highlight:active{ transform: translateY(1px); } .a-btn{ display: block; /* ✅ a 태그도 폭/레이아웃 적용 */ width:100%; text-align:center; /* ✅ a 태그 텍스트 가운데 */ border-radius: var(--a-radius-sm); border:1px solid rgba(255,255,255,.14); padding:12px 14px; cursor:pointer; font-weight:800; letter-spacing:.01em; } /* ===== Me Info (modern) ===== */ .a-meinfo{ margin-top: 10px; display: grid; gap: 10px; } .a-meinfo__row{ display: grid; grid-template-columns: 140px 1fr; gap: 10px; padding: 12px 12px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); border-radius: 14px; } .a-meinfo__k{ font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.60); padding-top: 2px; } .a-meinfo__v{ min-width: 0; /* ✅ 긴 텍스트/칩 overflow 방지 */ color: rgba(255,255,255,.92); } /* chips wrap */ .a-chips{ display: flex; flex-wrap: wrap; gap: 8px; } /* 기존 a-chip이 있으면 덮어쓰기/보강 */ .a-chip{ display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.18); color: rgba(255,255,255,.90); font-size: 12px; line-height: 1; } .a-chip__sub{ color: rgba(255,255,255,.55); font-size: 11px; } /* pills */ .a-pill{ display: inline-flex; align-items: center; padding: 7px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.18); font-size: 12px; font-weight: 800; letter-spacing: .02em; } .a-pill--ok{ border-color: rgba(43,127,255,.35); } .a-pill--muted{ opacity: .72; } /* responsive */ @media (max-width: 720px){ .a-meinfo__row{ grid-template-columns: 1fr; } .a-meinfo__k{ text-transform: none; letter-spacing: 0; font-size: 13px; color: rgba(255,255,255,.78); } } /* ===== App Layout ===== */ .a-app-shell{ min-height:100vh; display:grid; grid-template-columns: 260px 1fr; } .a-side{ border-right:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.02); padding: 18px; display:flex; flex-direction:column; gap:14px; } .a-side__brand{ padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.08); } .a-side__title{ font-weight:900; letter-spacing:.02em; } .a-side__sub{ font-size:12px; margin-top:4px; } .a-nav{ display:grid; gap:6px; } .a-nav__sec{ margin-top:8px; font-size:12px; color:rgba(255,255,255,.55); letter-spacing:.08em; text-transform:uppercase; } .a-nav__item{ display:block; padding:10px 10px; border-radius: 12px; color: rgba(255,255,255,.86); text-decoration:none; border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.15); } .a-nav__item:hover{ background: rgba(255,255,255,.06); } .a-nav__item.is-active{ border-color: rgba(43,127,255,.35); background: rgba(43,127,255,.10); } .a-side__foot{ margin-top:auto; display:grid; gap:10px; } .a-side__meName{ font-weight:900; } .a-side__meMail{ font-size:12px; } .a-main{ padding: 22px; } /* ===== Page / Card ===== */ .a-page{ display:grid; gap:14px; } .a-page__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .a-card{ border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); border-radius: 18px; overflow:hidden; } .a-card__hd{ padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content:space-between; } .a-card__title{ font-weight:900; } .a-card__bd{ padding:16px; } .a-card__foot{ padding:12px 16px; border-top:1px solid rgba(255,255,255,.08); } /* ===== Filters ===== */ .a-filters{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .a-input--sm{ padding:10px 10px; border-radius: 12px; font-size: 13px; } .a-btn--sm{ padding:10px 12px; border-radius: 12px; font-size: 13px; } /* ===== Table ===== */ .a-tablewrap{ overflow:auto; } .a-table{ width:100%; border-collapse:separate; border-spacing:0; min-width: 980px; } .a-table th, .a-table td{ padding:12px 12px; border-bottom:1px solid rgba(255,255,255,.08); vertical-align:top; } .a-table th{ font-size:12px; color:rgba(255,255,255,.62); text-transform:uppercase; letter-spacing:.08em; } .a-mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; } /* ===== Buttons ===== */ .a-btn--ghost{ background: rgba(43,127,255,.10); border: 1px solid rgba(43,127,255,.25); color: rgba(255,255,255,.92); } .a-btn--ghost:hover{ background: rgba(43,127,255,.16); } .a-btn--danger{ border: 1px solid rgba(255,77,79,.35); background: rgba(255,77,79,.14); color: #fff; } /* ===== Role box ===== */ .a-rolebox{ display:grid; gap:8px; padding:10px; border:1px solid rgba(255,255,255,.10); border-radius:14px; background: rgba(0,0,0,.12); } .a-hr{ height:1px; background: rgba(255,255,255,.08); margin:14px 0; } /* ===== Responsive ===== */ @media (max-width: 980px){ .a-app-shell{ grid-template-columns: 1fr; } .a-side{ position:sticky; top:0; z-index: 5; } } .a-grid2{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; } @media (max-width: 980px){ .a-grid2{ grid-template-columns: 1fr; } } /* list page full width */ .a-content--full{ max-width: none; width: 100%; margin: 0; } /* ===== Admin list table tweaks ===== */ .a-table td{ text-align: center; /* td 가운데 */ font-size: 12.5px; /* 텍스트 조금 줄임 */ } .a-table th{ text-align: center; /* th도 가운데로 */ font-size: 12px; } /* hover */ .a-table tbody tr:hover td{ background: rgba(255,255,255,.04); } /* blocked row style */ .a-table tr.is-disabled td{ opacity: .58; /* 연하게 */ text-decoration: line-through; /* 가운데 줄 */ } /* status 칸만 더 또렷하게 하고 싶으면(선택) */ .a-td--status{ font-weight: 800; letter-spacing: .02em; } /* admins list table hard override */ .a-content--full .a-table.a-table--admins{ width: 100% !important; max-width: 100% !important; table-layout: auto; } .a-content--full .a-table.a-table--admins th, .a-content--full .a-table.a-table--admins td{ text-align: center !important; font-size: 12.5px; } .a-content--full .a-table.a-table--admins tbody tr:hover td{ background: rgba(255,255,255,.04) !important; } .a-content--full .a-table.a-table--admins tr.is-disabled td{ opacity: .58; text-decoration: line-through; } /* ===== Admins list table (force) ===== */ .a-content--full .a-table.a-table--admins{ width: 100% !important; max-width: 100% !important; border-collapse: separate; border-spacing: 0; } /* center + smaller text */ .a-content--full .a-table.a-table--admins th, .a-content--full .a-table.a-table--admins td{ text-align: center !important; font-size: 12.5px; padding: 10px 10px; border-bottom: 1px solid rgba(255,255,255,.08); } /* header */ .a-content--full .a-table.a-table--admins thead th{ font-size: 12px; color: rgba(255,255,255,.72); background: rgba(255,255,255,.03); } /* row hover */ .a-content--full .a-table.a-table--admins tbody tr:hover td{ background: rgba(255,255,255,.04) !important; } /* disabled row: pale + strike */ .a-content--full .a-table.a-table--admins tr.is-disabled td{ opacity: .58; text-decoration: line-through; } /* (선택) status 칸만 또렷 */ .a-content--full .a-table.a-table--admins td.a-td--status{ font-weight: 800; letter-spacing: .02em; } /* ===== Admin edit header KV grid ===== */ .a-panel__head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:12px; } .a-panel__title{ font-weight:900; font-size:16px; } .a-panel__sub{ font-size:12px; margin-top:4px; } .a-kvgrid{ display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:10px; } .a-kv{ border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.14); border-radius: 14px; padding: 12px 12px; min-width:0; } .a-kv__k{ font-size:11px; letter-spacing:.08em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom:6px; } .a-kv__v{ font-size:13px; font-weight:800; color: rgba(255,255,255,.92); word-break: break-word; } .a-kv__ok{ color:#111; background:#fff; border-radius:999px; padding:4px 8px; display:inline-block; } .a-kv__danger{ color:#d32f2f; background:#fff; border-radius:999px; padding:4px 8px; display:inline-block; } @media (max-width: 1200px){ .a-kvgrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px){ .a-kvgrid{ grid-template-columns: 1fr; } } /* ===== Bottom action bar ===== */ .a-actions{ margin-top: 14px; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; } .a-actions__right{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; } /* ===== White button (Back) ===== */ .a-btn--white{ background:#fff !important; color:#111 !important; border:1px solid rgba(0,0,0,.18) !important; } .a-btn--white:hover{ filter: brightness(0.98); } /* ===== Solid danger button (Reset) ===== */ .a-btn--dangerSolid{ background: #ff4d4f !important; color:#fff !important; border: 1px solid rgba(255,255,255,.18) !important; } .a-btn--dangerSolid:hover{ filter: brightness(1.03); } .a-td--status.is-bad{ color:#ff4d4f; } /* ================================ Sidebar Accordion (override) - append at end of admin.css ================================ */ .a-nav{ display: grid; gap: 10px; } /* dashboard single link */ .a-nav__item--root{ margin: 0 0 6px; background: rgba(43,127,255,.10); border-color: rgba(43,127,255,.18); } /* group wrapper */ .a-nav__group{ display: grid; gap: 6px; margin: 0; } /* title button (more visible but not loud) */ .a-nav__titlebtn{ width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.045); color: rgba(255,255,255,.88); font-size: 13px; font-weight: 900; letter-spacing: .02em; cursor: pointer; text-align: left; } .a-nav__titlebtn:hover{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); } .a-nav__group.is-open .a-nav__titlebtn{ background: rgba(43,127,255,.10); border-color: rgba(43,127,255,.22); } /* chevron */ .a-nav__chev{ width: 20px; height: 20px; border-radius: 999px; display: grid; place-items: center; background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.10); flex: 0 0 auto; } .a-nav__chev::before{ content: ""; width: 7px; height: 7px; border-right: 2px solid rgba(255,255,255,.75); border-bottom: 2px solid rgba(255,255,255,.75); transform: rotate(45deg); transition: transform .18s ease; } .a-nav__group.is-open .a-nav__chev::before{ transform: rotate(-135deg); } /* items container (collapsed by default) */ .a-nav__items{ display: grid; gap: 6px; max-height: 0; overflow: hidden; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: max-height .22s ease, opacity .18s ease, transform .18s ease; } .a-nav__group.is-open .a-nav__items{ max-height: 1200px; /* 충분히 크게 */ opacity: 1; transform: translateY(0); pointer-events: auto; } /* remove old margin-top inside accordion list */ .a-nav__items .a-nav__item{ margin-top: 0; } /* ================================ Sidebar Accordion - readability tweaks (append) ================================ */ /* --- Title: group header (NO chip, highlight full button when open) --- */ .a-nav__titlebtn{ padding: 10px 12px; border-radius: 14px; /* 기본: 아이템보다 살짝만 존재감 */ background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.10); cursor: pointer; } /* ✅ 칩/원형/캡슐 제거: 텍스트는 그냥 텍스트 */ .a-nav__titletext{ display: inline-block; padding: 0; border-radius: 0; background: transparent; border: 0; color: rgba(255,255,255,.78); font-weight: 900; letter-spacing: .02em; } /* hover: 살짝만 또렷 */ .a-nav__titlebtn:hover{ background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.16); } .a-nav__titlebtn:hover .a-nav__titletext{ color: rgba(255,255,255,.88); } /* ✅ selected(open): 버튼 "전체"를 아이템보다 더 강하게 강조 */ .a-nav__group.is-open .a-nav__titlebtn{ background: linear-gradient( 135deg, rgba(43,127,255,.22), rgba(124,92,255,.16) ); border-color: rgba(43,127,255,.32); box-shadow: 0 10px 24px rgba(43,127,255,.10); /* 과하지 않게 */ } .a-nav__group.is-open .a-nav__titletext{ color: rgba(255,255,255,.95); } /* --- Items: smaller + indent + guide line --- */ .a-nav__items{ margin-left: 8px; /* 그룹 자체 살짝 들여쓰기 */ padding-left: 14px; /* ✅ 아이템 들여쓰기 */ border-left: 1px solid rgba(255,255,255,.08); /* ✅ 가이드 라인 */ } /* item size + spacing */ .a-nav__items .a-nav__item{ padding: 9px 10px; border-radius: 12px; font-size: 12.5px; /* ✅ 글씨 크기 줄임 */ line-height: 1.2; color: rgba(255,255,255,.82); background: rgba(0,0,0,.12); border: 1px solid rgba(255,255,255,.08); } /* dot position a bit nicer with indent */ .a-nav__items .a-nav__dot{ width: 7px; height: 7px; background: rgba(255,255,255,.22); } /* hover */ .a-nav__items .a-nav__item:hover{ background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); } /* active item: clearer but not loud */ .a-nav__items .a-nav__item.is-active{ background: rgba(43,127,255,.12); border-color: rgba(43,127,255,.26); } .a-nav__items .a-nav__item.is-active .a-nav__label{ color: rgba(255,255,255,.95); font-weight: 800; } /* disabled item inside accordion */ .a-nav__items .a-nav__item.is-disabled{ opacity: .45; background: rgba(0,0,0,.10); } /* 모바일에서 들여쓰기 과하면 줄이기 */ @media (max-width: 980px){ .a-nav__items{ margin-left: 4px; padding-left: 10px; } } .lbtn{ padding:8px 12px;font-size:13px;border-radius:12px;line-height:1.1;text-decoration:none; display:inline-flex;align-items:center;justify-content:center;gap:6px; border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.06);color:inherit;cursor:pointer; } .lbtn:hover{background:rgba(255,255,255,.10);} .lbtn--primary{background:rgba(59,130,246,.88);border-color:rgba(59,130,246,.95);color:#fff;} .lbtn--primary:hover{background:rgba(59,130,246,.98);} .lbtn--ghost{background:transparent;} .batch-link-btn{ display:inline-flex; align-items:center; justify-content:center; padding:6px 10px; border-radius:10px; font-size:12px; font-weight:800; text-decoration:none !important; color:#fff !important; /* 글씨 흰색 */ background:rgba(59,130,246,.88); border:1px solid rgba(59,130,246,.95); box-shadow: 0 1px 0 rgba(0,0,0,.25); } .batch-link-btn:hover{ background:rgba(59,130,246,.98); transform: translateY(-1px); } .batch-link-btn:active{ transform: translateY(0); } tr.row-link{ cursor:pointer; } tr.row-link:hover td{ background: rgba(255,255,255,.03); }