/* 오다스빌 웹 공통 — 색 토큰·글자·단추·표·상태. 공개 사이트(site.css)와 운영자 화면(admin.css)이 같이 쓴다. */
:root{
  --page:#FFFFFF;--pane:#EEF1F5;--sunken:#F6F7F9;--hover:#E8ECF1;
  --line:#DEE2E9;--line-2:#C3CAD5;--line-soft:#EDF0F4;
  --ink:#131B27;--ink-2:#4A5565;--ink-3:#6C7787;
  --accent:#2344A0;--accent-2:#1A3582;--accent-ink:#FFFFFF;--accent-soft:#E7ECF8;
  --ok:#1C7343;--ok-soft:#E1F0E7;--warn:#8F5508;--warn-soft:#F9EDD6;--bad:#B3283A;--bad-soft:#F8E2E4;
  --chart:#2B4DB3;--chart-soft:color-mix(in srgb,#2B4DB3 20%,transparent);--grid:#E6E9EE;
  --rail:#161D28;--rail-ink:#C9D2DE;--rail-on:#24304A;--rail-mut:#7E8A9C;
  --f-sans:"IBM Plex Sans KR","Malgun Gothic","Apple SD Gothic Neo",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",Consolas,ui-monospace,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --page:#12171E;--pane:#1B2129;--sunken:#181E26;--hover:#222A34;
  --line:#29313C;--line-2:#3A4451;--line-soft:#1E252E;
  --ink:#E4E9F0;--ink-2:#A8B2C0;--ink-3:#808B9A;
  --accent:#93ABF3;--accent-2:#B0C2F7;--accent-ink:#0E131A;--accent-soft:#1D2944;
  --ok:#63C48E;--ok-soft:#14301F;--warn:#E3A64F;--warn-soft:#33270F;--bad:#F2828C;--bad-soft:#3A1B20;
  --chart:#6F8AE0;--chart-soft:color-mix(in srgb,#6F8AE0 26%,transparent);--grid:#232B36;
  --rail:#0E131A;--rail-ink:#C9D2DE;--rail-on:#1D2944;--rail-mut:#6E7A8C;
  color-scheme:dark}}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--page);color:var(--ink);font:14px/1.6 var(--f-sans);word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4,p{margin:0}
a{color:var(--accent)}
.mono{font-family:var(--f-mono);font-size:12.5px;letter-spacing:-.01em}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.mut{color:var(--ink-3)}
.b2{color:var(--ink-2)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
svg.i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;padding:0 16px;border:1px solid var(--line-2);border-radius:6px;background:var(--page);font-size:14px;font-weight:500;white-space:nowrap;text-decoration:none;color:var(--ink)}
.btn:hover{background:var(--hover)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,var(--line-2))}
.btn.danger:hover{background:var(--bad-soft)}
.btn.sm{height:30px;padding:0 12px;font-size:13px}
.btn.lg{height:46px;padding:0 22px;font-size:15.5px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn svg.i{width:17px;height:17px}
form.inline{display:inline}

.tw{border:1px solid var(--line);border-radius:8px;overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{font-weight:500;font-size:12px;color:var(--ink-3);text-align:left;padding:8px 12px;background:var(--sunken);border-bottom:1px solid var(--line);white-space:nowrap}
.tbl th.num{text-align:right}
.tbl td{padding:9px 12px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl td.nw{white-space:nowrap}

.st{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;white-space:nowrap}
.st::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.st.ok{color:var(--ok)}.st.bad{color:var(--bad)}.st.warn{color:var(--warn)}.st.off{color:var(--ink-3)}.st.run{color:var(--accent)}
.tag{display:inline-block;font-size:11.5px;font-weight:600;padding:1px 7px;border-radius:3px;white-space:nowrap;height:fit-content}
.tag.fix{background:var(--ok-soft);color:var(--ok)}.tag.improve{background:var(--accent-soft);color:var(--accent)}
.tag.new{background:var(--sunken);color:var(--ink-2);border:1px solid var(--line)}.tag.safe{background:var(--warn-soft);color:var(--warn)}
.chiplist{display:flex;flex-wrap:wrap;gap:5px}
.chiplist span{font-size:11.5px;color:var(--ink-2);border:1px solid var(--line);border-radius:3px;padding:0 6px}
.code{margin:10px 0 0;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:var(--sunken);font:12.5px/1.55 var(--f-mono);overflow-x:auto;color:var(--ink-2);white-space:pre}

.flash{padding:10px 14px;border-radius:6px;font-size:13.5px}
.flash.ok{background:var(--ok-soft);color:var(--ok)}
.flash.bad{background:var(--bad-soft);color:var(--bad)}

.inp{height:34px;border:1px solid var(--line-2);border-radius:6px;background:var(--page);padding:0 10px;font-size:13.5px;width:100%;min-width:0}
textarea.inp{height:auto;padding:8px 10px;min-height:70px;resize:vertical}
select.inp{padding-right:6px}
.chk{display:inline-flex;align-items:center;gap:6px;font-size:13px;cursor:pointer}
.chk input{accent-color:var(--accent);width:15px;height:15px;margin:0}