@charset "UTF-8";
:root { --ink:#202b40; --muted:#747f92; --line:#e8ecf2; --blue:#365de7; --blue-soft:#eef2ff; --canvas:#f7f8fc; --green:#198663; font-family:Inter,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif; color:var(--ink); font-size:14px; background:var(--canvas); }
* { box-sizing:border-box; } body { margin:0; } button,input,select { font:inherit; } button,a,input,select { -webkit-tap-highlight-color:transparent; } button { cursor:pointer; } button:disabled { cursor:not-allowed; opacity:.5; } button { transition:background .15s,box-shadow .15s; } a { color:inherit; text-decoration:none; } h1,h2,p { margin:0; } h1 { font-size:30px; letter-spacing:-1px; line-height:1.35; } h2 { font-size:17px; letter-spacing:-.4px; line-height:1.4; } p { line-height:1.7; } svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; } [hidden] { display:none!important; } .muted { color:var(--muted); } .small { font-size:12px; } .eyebrow { color:#8791a5; font-size:10px; font-weight:750; letter-spacing:1.6px; margin-bottom:10px; } .wordmark { display:flex; gap:12px; align-items:center; font-weight:750; font-size:16px; line-height:1.15; letter-spacing:-.3px; } .brand-icon { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; background:var(--blue); color:white; font-family:Georgia,serif; font-size:36px; font-weight:bold; letter-spacing:-4px; padding:0 5px 8px 0; border-radius:13px; flex-shrink:0; }
.primary,.secondary,.ghost,.close-button { display:inline-flex; align-items:center; justify-content:center; gap:10px; border:1px solid transparent; border-radius:8px; padding:11px 16px; font-weight:650; font-size:13px; line-height:1.4; white-space:nowrap; } .primary { background:var(--blue); color:white; box-shadow:0 3px 6px #365de712; } .primary:hover:not(:disabled) { background:#274bcc; } .secondary { background:white; border-color:var(--line); color:#59657b; } .secondary:hover:not(:disabled),.ghost:hover:not(:disabled) { background:#f0f3fa; } .ghost,.close-button { background:transparent; color:#6b778c; } .full { width:100%; } :focus-visible { outline:3px solid #9badf7; outline-offset:3px; } .field { margin-bottom:21px; } .field label { display:block; font-size:12px; font-weight:650; margin-bottom:9px; color:#49566c; } input:not([type=radio]),select { width:100%; min-width:0; height:44px; border:1px solid #dfe4ed; border-radius:8px; padding:11px 13px; background:#fff; color:var(--ink); transition:border-color .15s; } input::placeholder { color:#a0a9b9; font-size:13px; } input:hover,select:hover { border-color:#bdc8de; } .hint { color:#8993a5; font-size:11px; line-height:1.6; margin-top:7px; } .message { color:#b44848; font-size:12px; line-height:1.7; overflow-wrap:anywhere; } .message:not(:empty) { margin-block:12px; } .message.success { color:var(--green); } .message:empty { display:none; } .sr-only { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
/* 로그인 */
.login-layout { min-height:100svh; display:flex; align-items:center; justify-content:center; padding:32px 20px; }
.login-card { width:100%; max-width:400px; padding:32px; background:white; border:1px solid var(--line); border-radius:12px; box-shadow:0 4px 20px #273c6705; }
#login-button { height:44px; margin-top:2px; }
.login-help { margin-top:24px; padding-top:20px; border-top:1px solid var(--line); color:#788499; font-size:11px; line-height:1.8; }
/* 워크스페이스 */
.workspace { min-height:100svh; display:grid; grid-template-columns:232px minmax(0,1fr); } .sidebar { background:#fff; border-right:1px solid var(--line); display:flex; flex-direction:column; padding:32px 20px 20px; min-height:100svh; position:sticky; top:0; height:100svh; } .sidebar .wordmark { padding:0 10px; } .sidebar-content { margin-top:52px; } .nav-label { font-size:9px; font-weight:700; letter-spacing:1.7px; color:#a5adbd; padding:0 14px; margin-bottom:12px; } .nav-button { width:100%; display:flex; align-items:center; gap:12px; padding:13px 14px; text-align:left; border:0; border-radius:8px; background:transparent; color:#778297; font-size:13px; margin-bottom:6px; font-weight:550; } .nav-button:hover { background:#f5f7fb; } .nav-button.selected { color:var(--blue); background:var(--blue-soft); font-weight:700; } .sidebar-note { margin-top:auto; color:#6d7990; font-size:11px; padding:24px 12px; } .sidebar-note p { font-size:11px; color:#9aa3b5; margin-top:8px; } .sidebar-account { display:flex; align-items:center; gap:10px; padding:20px 8px 0; border-top:1px solid var(--line); min-width:0; } .sidebar-account>div { min-width:0; } .sidebar-account strong { display:block; font-size:12px; overflow:hidden; text-overflow:ellipsis; } .sidebar-account span:not(.avatar) { display:block; margin-top:5px; font-size:10px; color:#8590a2; } .avatar { display:inline-flex; flex-shrink:0; align-items:center; justify-content:center; width:35px; height:35px; border-radius:11px; background:#edf0fa; color:#6478b9; font-size:12px; font-weight:700; text-transform:uppercase; } .avatar.large { width:52px; height:52px; font-size:18px; border-radius:15px; } .topbar { height:76px; border-bottom:1px solid var(--line); background:#fff; padding:0 40px; display:flex; align-items:center; justify-content:space-between; } .breadcrumb { font-size:11px; color:#96a0b1; } .breadcrumb span { padding:0 16px; color:#ccd1dd; } .breadcrumb strong { font-weight:500; color:#586780; } .topbar .ghost { font-size:11px; } .page-content { max-width:1420px; margin:auto; padding:38px 40px 0; } .page-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:30px; } .page-heading .muted { font-size:12px; margin-top:12px; } .page-heading .eyebrow { margin-bottom:9px; } .stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-bottom:26px; } .stat { display:flex; flex-direction:column; align-items:flex-start; border:1px solid var(--line); border-radius:12px; padding:21px 24px; background:#fff; } .stat>span:first-child { font-size:12px; font-weight:600; color:#718097; } .stat strong { font-size:29px; letter-spacing:-1px; font-weight:650; margin:12px 0 5px; } .stat-description { font-size:10px; color:#a0a8b7; } .status-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#3da986; margin-right:5px; vertical-align:middle; } .status-dot.gray { background:#a7aebe; } .card { border:1px solid var(--line); border-radius:12px; background:white; box-shadow:0 2px 3px #273c6702; overflow:hidden; } .card-toolbar { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:24px; } .card-toolbar .muted { margin-top:6px; } .count-badge { display:inline-flex; align-items:center; justify-content:center; background:#edf1ff; color:#6179d8; font-size:11px; padding:3px 7px; border-radius:5px; margin-left:6px; vertical-align:middle; } .toolbar-actions { display:flex; gap:8px; align-items:center; } .search-field { display:flex; position:relative; align-items:center; width:190px; } .search-field svg { position:absolute; left:12px; width:16px; height:16px; color:#99a5b9; } .search-field input { height:37px; padding-left:36px; background:#fbfcfe; font-size:12px; } .search-field input::placeholder { font-size:11px; } .toolbar-actions .secondary { padding:9px 12px; font-size:11px; } table { width:100%; border-collapse:collapse; text-align:left; table-layout:fixed; } th { padding:12px 24px; font-size:10px; font-weight:600; color:#8994a6; background:#fafbfe; border-block:1px solid #edf0f6; } th:first-child { width:32%; } th:last-child { width:120px; } td { padding:20px 24px; border-bottom:1px solid #f0f2f7; font-size:12px; overflow-wrap:anywhere; } tbody tr:last-child td { border-bottom:0; } tbody tr:hover { background:#fcfdff; } .table-account { display:flex; align-items:center; gap:11px; min-width:0; } .table-account>div { min-width:0; } .table-account strong { display:block; font-size:12px; font-weight:600; overflow-wrap:anywhere; } .table-account small { font-size:10px; color:#9ba4b5; } .badge { display:inline-flex; align-items:center; gap:5px; font-size:10px; padding:5px 8px; border-radius:5px; white-space:nowrap; color:#788399; background:#f3f5f8; } .badge.admin { color:#6b62bd; background:#f1effb; } .badge.operator { color:#557ac7; background:#edf3fe; } .badge.active { color:#408f78; background:#eef8f3; } .badge.disabled { color:#8a8f9c; background:#f1f3f6; } .badge.subtle { background:#f5f7fd; color:#7786a9; } .row-action { background:transparent; color:#6d7da0; border:1px solid #e4e9f2; font-size:10px; padding:7px 9px; border-radius:6px; white-space:nowrap; } .row-action:hover:not(:disabled) { background:#eef2fc; color:var(--blue); } .self-label { color:#a5adbb; font-size:10px; } .created-column { color:#99a2b2; font-size:11px; } .table-footer { border-top:1px solid var(--line); display:flex; justify-content:space-between; padding:15px 24px; font-size:10px; color:#a0a9b9; gap:16px; } .table-message:not(:empty) { margin:0; padding:0 24px 14px; } .empty-cell { padding:44px 24px; text-align:center; color:#9aa4b5; } .permission-guide { display:flex; gap:12px; padding:22px 2px; color:#8090ad; } .guide-icon { border:1px solid #a3b0c8; border-radius:50%; font-size:10px; height:16px; width:16px; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px; } .permission-guide strong { font-size:11px; font-weight:600; color:#7e8ca6; } .permission-guide p { font-size:10px; color:#9aa5b8; margin-top:6px; } .page-footer { font-size:9px; color:#aeb7c8; font-weight:700; letter-spacing:1px; padding:36px 0 25px; } .page-footer span { font-weight:400; letter-spacing:0; padding-left:8px; }
/* 내 계정 */
.profile-overview { display:flex; align-items:center; gap:16px; padding:25px 30px; margin-bottom:24px; } .profile-overview>div { flex:1; min-width:0; overflow-wrap:anywhere; } .profile-overview p { margin-top:5px; } .password-card { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:26px 30px; margin-bottom:24px; } .settings-description { display:flex; align-items:center; gap:16px; min-width:0; } .settings-description h2 { margin:0 0 6px; } .settings-description p { font-size:12px; } .settings-icon { flex-shrink:0; width:40px; height:40px; border-radius:10px; background:#f1f4ff; display:flex; align-items:center; justify-content:center; color:#6d83ca; } .session-card { padding:24px 30px; display:flex; align-items:center; justify-content:space-between; gap:20px; } .session-card h2 { font-size:14px; margin-bottom:8px; } .session-card p { font-size:11px; white-space:pre-line; }
/* 계정 추가·비밀번호·권한 변경 */
dialog { border:1px solid #e9edf4; border-radius:16px; padding:0; width:480px; max-width:calc(100vw - 32px); max-height:calc(100svh - 48px); color:var(--ink); box-shadow:0 30px 80px #12214d33; } dialog::backdrop { background:#17274060; backdrop-filter:blur(3px); } .dialog-heading { padding:28px 28px 0; display:flex; justify-content:space-between; align-items:flex-start; } .dialog-heading h2 { font-size:22px; } .dialog-heading .eyebrow { font-size:9px; margin-bottom:7px; } .close-button { font-size:24px; padding:0 4px; font-weight:400; margin-top:-4px; line-height:1; } .dialog-description { padding:13px 28px 0; font-size:12px; } .dialog-body { padding:24px 28px 8px; } .dialog-footer { display:flex; justify-content:flex-end; gap:8px; border-top:1px solid var(--line); padding:18px 28px; background:#fbfcfe; } .dialog-account { padding:12px 28px 0; color:#8793a9; font-size:13px; overflow-wrap:anywhere; } fieldset { border:0; margin:0; padding:0; } legend { font-weight:650; font-size:12px; color:#49566c; margin-bottom:10px; } .role-options { margin-bottom:22px; } .role-option { display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:8px; margin-bottom:8px; cursor:pointer; } .role-option:has(input:checked) { border-color:#8fa4f3; background:#f4f6ff; } .role-option input { accent-color:var(--blue); height:16px; width:16px; margin:0; flex-shrink:0; } .role-option strong { display:block; font-size:12px; font-weight:650; } .role-option small { display:block; font-size:10px; color:#8a94a8; margin-top:5px; } .impact-note { background:#f4f6fb; color:#8792a8; padding:12px 14px; border-radius:8px; font-size:11px; line-height:1.7; } .impact-note.warning { color:#9a7237; background:#fcf6e9; }
.confirmation-dialog { max-width:calc(100vw - 32px); width:380px; }
.confirmation-body { padding:30px 24px 26px; text-align:center; }
.confirmation-icon { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; background:#eef8f3; color:var(--green); border-radius:50%; margin-bottom:18px; }
.confirmation-body h2 { font-size:18px; margin-bottom:9px; }
.confirmation-body p { font-size:12px; }
@media(max-width:1100px) { .workspace { grid-template-columns:200px minmax(0,1fr); } .page-content { padding:30px 24px 0; } .topbar { padding-inline:24px; } .card-toolbar { align-items:flex-start; flex-direction:column; } th,td { padding-inline:16px; } th:first-child { width:32%; } .table-footer { flex-direction:column; gap:6px; } }
@media(max-width:760px) { .login-layout { padding:24px 16px; } .login-card { padding:28px 24px; } .workspace { display:block; } .sidebar { position:static; height:auto; min-height:0; padding:18px 20px 0; border-right:0; border-bottom:1px solid var(--line); } .sidebar .wordmark { font-size:13px; padding:0; } .sidebar .brand-icon { width:34px; height:34px; font-size:28px; border-radius:10px; } .sidebar-content { margin-top:18px; } .sidebar nav { display:flex; gap:12px; } .nav-label,.sidebar-note,.sidebar-account { display:none; } .nav-button { width:auto; padding:10px 12px; font-size:12px; } .nav-button svg { width:16px; height:16px; } .topbar { height:52px; padding:0 20px; } .breadcrumb { font-size:10px; } .breadcrumb span { padding:0 8px; } .topbar .ghost { padding:8px 0; } .page-content { padding:25px 20px 0; } h1 { font-size:24px; } .page-heading { align-items:flex-start; flex-direction:column; gap:16px; margin-bottom:23px; } .page-heading .muted { font-size:11px; margin-top:8px; } .page-heading .eyebrow { font-size:9px; } .page-heading .primary { font-size:12px; padding:10px 14px; } .stats { gap:8px; margin-bottom:18px; } .stat { padding:15px 12px; border-radius:9px; } .stat strong { font-size:24px; margin:10px 0 0; } .stat>span:first-child { font-size:10px; } .stat-description { display:none; } .card-toolbar { padding:20px 16px; gap:16px; } .toolbar-actions { width:100%; } .search-field { width:auto; flex:1; } .created-column { display:none; } table { table-layout:fixed; } th:first-child { width:36%; } th:last-child { width:78px; } th,td { padding:14px 8px; font-size:10px; } th:first-child,td:first-child { padding-left:16px; } .table-account { gap:6px; } .table-account .avatar { display:none; } .table-account strong { font-size:11px; } .badge { padding:4px 6px; font-size:9px; } .row-action { font-size:9px; padding:6px; } .table-footer { padding:13px 16px; font-size:9px; } .permission-guide { padding-top:18px; } .profile-overview { padding:22px 20px; } .password-card { flex-direction:column; align-items:stretch; padding:22px 20px; gap:20px; } .password-card>button { align-self:flex-end; } .settings-description { gap:12px; } .session-card { flex-direction:column; align-items:flex-start; padding:22px 20px; gap:15px; } .dialog-heading { padding:24px 22px 0; } .dialog-body { padding:20px 22px 8px; } .dialog-description,.dialog-account { padding-inline:22px; } .dialog-footer { padding:16px 22px; } .page-footer { padding-top:25px; } }
@media(prefers-reduced-motion:reduce) { * { transition:none!important; } }
/* 레퍼런스 조회 */
.catalog-filters { display:flex; flex-wrap:wrap; align-items:flex-end; gap:16px; padding:22px; }
.catalog-filters>label { display:grid; gap:8px; flex:1; min-width:140px; font-size:12px; font-weight:600; color:#67748a; }
.catalog-filter-actions { display:flex; gap:8px; }
.catalog-toolbar { display:flex; justify-content:space-between; align-items:center; min-height:70px; gap:12px; }
.catalog-toolbar a { font-size:11px; padding:8px 12px; }
.catalog-state:not(:empty) { padding:38px 24px; border:1px dashed #ccd5e5; border-radius:12px; text-align:center; background:#fff; color:#718097; margin-bottom:20px; }
.catalog-state.catalog-error { color:#916049; background:#fffcf7; }
.reference-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.reference-tile { padding:0; border:1px solid var(--line); border-radius:12px; background:white; overflow:hidden; text-align:left; display:flex; flex-direction:column; min-width:0; color:var(--ink); }
.reference-tile:hover { border-color:#aebff4; box-shadow:0 8px 24px #2c407b0d; }
.reference-preview { display:flex; width:100%; aspect-ratio:4/5; position:relative; align-items:center; justify-content:center; background:#edf0f5; }
.reference-preview img { width:100%; height:100%; position:absolute; object-fit:contain; }
.media-placeholder { font-size:12px; color:#8490a5; padding:24px; text-align:center; display:block; }
.reference-count { position:absolute; right:10px; bottom:10px; background:#19253fbb; color:#fff; font-size:11px; padding:5px 8px; border-radius:6px; }
.reference-tile-info { display:flex; flex-direction:column; gap:6px; padding:16px; width:100%; }
.reference-tile-info strong { white-space:nowrap; text-overflow:ellipsis; overflow:hidden; font-size:13px; }
.reference-tile-info .small { font-size:11px; }
.catalog-pagination { display:flex; justify-content:center; gap:12px; padding:28px 0 0; }
.reference-dialog { width:1100px; }
.reference-detail-layout { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); padding:24px 28px; gap:30px; }
.reference-viewer { display:flex; align-items:center; justify-content:center; min-height:240px; background:#f3f5f8; border-radius:10px; overflow:hidden; }
.reference-viewer img,.reference-viewer video { width:100%; max-height:65svh; object-fit:contain; display:block; }
.reference-card-controls { display:flex; justify-content:center; align-items:center; gap:20px; padding:14px 0; font-size:12px; }
.reference-copy { overflow-wrap:anywhere; }
.reference-copy h3 { font-size:15px; margin:8px 0; }
.reference-copy p { white-space:pre-wrap; font-size:12px; margin:8px 0; }
.reference-copy a { margin-top:12px; }
.reference-data-column { min-width:0; }
.reference-data-column h3 { font-size:13px; margin:0 0 12px; }
.reference-facts { display:grid; grid-template-columns:104px minmax(0,1fr); gap:10px; margin:0 0 26px; font-size:12px; }
.reference-facts dt,.reference-label dt { color:#8490a4; }
.reference-facts dd { margin:0; overflow-wrap:anywhere; }
.reference-facts .fact-note { grid-column:1/-1; color:#977747; font-size:11px; line-height:1.6; }
.reference-labels { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px; }
.reference-label { border:1px solid var(--line); background:#f8faff; padding:8px 10px; border-radius:8px; font-size:11px; min-width:0; max-width:100%; }
.reference-label dd { margin:5px 0 0; overflow-wrap:anywhere; }
.reference-files { display:grid; gap:7px; }
.reference-file { font-size:11px; overflow-wrap:anywhere; color:#526dbb; padding:8px 10px; border:1px solid var(--line); border-radius:6px; }
.reference-file:hover { background:#eef2fc; }
.reference-json { margin:0 28px 24px; border-top:1px solid var(--line); padding-top:18px; font-size:12px; color:#68768c; }
.reference-json summary { cursor:pointer; }
.reference-json pre { max-height:350px; overflow:auto; padding:16px; background:#f4f6fb; border-radius:8px; font-size:11px; white-space:pre-wrap; overflow-wrap:anywhere; }
@media(max-width:1200px) { .reference-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } }
@media(max-width:900px) { .reference-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .reference-detail-layout { grid-template-columns:1fr; } }
@media(max-width:760px) { .sidebar nav { flex-wrap:wrap; gap:0; } .nav-button { font-size:11px; padding:10px 8px; gap:6px; } .catalog-filters { padding:16px; gap:12px; } .catalog-filters>label { min-width:calc(50% - 12px); } .catalog-filters select { font-size:12px; padding-inline:8px; } .catalog-filter-actions { width:100%; justify-content:flex-end; } .reference-grid { gap:12px; } .reference-tile-info { padding:12px; } .reference-tile-info .small { font-size:10px; } .reference-detail-layout { padding:20px; gap:20px; } .reference-json { margin-inline:20px; } .catalog-state:not(:empty) { padding:24px 18px; font-size:12px; } .reference-facts { grid-template-columns:90px minmax(0,1fr); } }

.account-actions { display:flex; flex-wrap:wrap; gap:6px; }
@media(max-width:760px) { .account-actions { flex-direction:column; align-items:flex-start; } .account-actions .row-action { white-space:normal; text-align:left; } }