/* 원스테어 그룹웨어 — 디자인 토큰 (E+B 혼합, 2026-09-03 확정) */
:root {
  --bg: #F6F6F3; --card: #FFFFFF; --tool: #FAFAF8; --hair: #E6E7EA; --hair2: #F0F1F3; --border: #D9DBDF;
  --ink: #1E1E23; --ink2: #55585E; --ink3: #6B6F76; --ink4: #8F939A;
  --blue: #0A6EBD; --blue-tint: #E6F0FA; --blue-text: #11366C; --blue-line: #B5D2EE;
  --amber: #E8A000; --amber-tint: #FBF1D6; --amber-text: #8F5F00;
  --purple: #8A7FBF; --cyan: #39A9DA; --star: #F5B301; --red: #C43D2F; --red-tint: #FBE7E4; --green: #2E8B57; --green-tint: #E3F3E9;
  --shadow: 0 1px 3px rgba(30,30,35,.06); --shadow-pop: 0 8px 28px rgba(30,30,35,.16);
  --r: 12px; --font: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; --brand-font: 'Gowun Dodum', 'Apple SD Gothic Neo', sans-serif;
  --topbar: 56px; --rail: 196px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--font); font-size: 13.5px; line-height: 1.45; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: var(--blue-text); text-decoration: none; } a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
button:disabled { opacity: .5; cursor: default; }
input, select, textarea { outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--blue) !important; box-shadow: 0 0 0 3px var(--blue-tint); }
h1, h2, h3, h4 { margin: 0; font-weight: 700; }
h1 { font-size: 20px; } h2 { font-size: 17px; } h3 { font-size: 15px; } h4 { font-size: 13.5px; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }
::selection { background: var(--blue-tint); }
.app { height: 100%; display: flex; flex-direction: column; }
/* 상단 바 */
.topbar { flex-shrink: 0; height: var(--topbar); display: flex; align-items: center; gap: 14px; padding: 0 18px 0 16px; background: var(--card); border-bottom: 1px solid var(--hair); }
.topbar .logo { display: flex; align-items: center; gap: 8px; height: 30px; margin-right: 6px; }
.topbar .logo img { height: 30px; width: auto; display: block; }
.topbar .logo .wordmark { font-family: var(--brand-font); font-size: 15px; color: var(--blue-text); letter-spacing: -.01em; }
.tabs { display: flex; gap: 2px; }
.tab { height: 34px; padding: 0 14px; border-radius: 17px; color: var(--ink2); font-size: 13.5px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tab:hover { background: var(--hair2); }
.tab.active { background: var(--blue-tint); color: var(--blue-text); font-weight: 700; }
.tab .n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--amber); color: var(--ink); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.searchbox { margin-left: auto; display: flex; align-items: center; gap: 8px; width: 300px; height: 36px; padding: 0 14px; border: 1px solid var(--border); border-radius: 18px; background: var(--tool); color: var(--ink4); }
.searchbox input { flex: 1; border: 0; background: none; min-width: 0; }
.searchbox input:focus { box-shadow: none; }
.searchbox kbd { font: 11px var(--font); color: var(--ink4); border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; }
.icon-btn { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--ink2); position: relative; flex-shrink: 0; }
.icon-btn:hover { background: var(--hair2); }
.icon-btn .dot { position: absolute; top: 7px; right: 7px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--amber); color: var(--ink); font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.avatar { flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; width: 26px; height: 26px; font-size: 11px; }
.avatar.lg { width: 38px; height: 38px; font-size: 15px; } .avatar.xl { width: 56px; height: 56px; font-size: 22px; } .avatar.sm { width: 20px; height: 20px; font-size: 9px; }
/* 몸통 */
.app-body { flex: 1; min-height: 0; display: flex; gap: 12px; padding: 12px 16px; }
.rail { width: var(--rail); flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; padding-right: 2px; }
.main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.card { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); }
.main > .card { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.rail-primary { height: 42px; margin: 2px 0 8px; border-radius: 21px; background: var(--blue); color: #fff; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.rail-primary:hover { background: #0960A6; }
.rail-item { display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 10px 0 12px; border-radius: 9px; color: var(--ink); font-size: 13.5px; white-space: nowrap; width: 100%; text-align: left; }
.rail-item svg { flex-shrink: 0; color: var(--ink3); }
.rail-item:hover { background: rgba(255,255,255,.7); }
.rail-item.active { background: var(--blue-tint); color: var(--blue-text); font-weight: 700; } .rail-item.active svg { color: var(--blue-text); }
.rail-item .cnt { margin-left: auto; font-size: 12px; color: var(--ink3); font-weight: 500; }
.rail-item.active .cnt, .rail-item .cnt.strong { color: var(--blue-text); font-weight: 700; }
.rail-item .cnt.amber { background: var(--amber); color: var(--ink); border-radius: 8px; padding: 0 6px; font-weight: 700; font-size: 11px; height: 17px; display: inline-flex; align-items: center; }
.rail-item .swatch { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.rail-title { margin: 14px 0 4px 12px; font-size: 11.5px; font-weight: 700; color: var(--ink3); letter-spacing: .02em; display: flex; align-items: center; }
.rail-title .act { margin-left: auto; margin-right: 8px; color: var(--blue); font-weight: 500; cursor: pointer; }
.rail-foot { margin-top: auto; padding: 12px 12px 4px; font-size: 12px; color: var(--ink3); }
.quota { height: 6px; border-radius: 3px; background: var(--hair); overflow: hidden; margin: 6px 0 4px; } .quota i { display: block; height: 100%; background: var(--blue); border-radius: 3px; }
.quota i.warn { background: var(--amber); }
/* 도구 줄·머리 */
.toolbar { flex-shrink: 0; display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 8px 16px; border-bottom: 1px solid var(--hair); background: var(--tool); border-radius: var(--r) var(--r) 0 0; flex-wrap: wrap; }
.toolbar.plain { background: var(--card); }
.pagehead { flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: 16px 20px 12px; border-bottom: 1px solid var(--hair); flex-wrap: wrap; }
.pagehead h1 { font-size: 18px; } .pagehead .sub { color: var(--ink3); font-size: 12.5px; }
.pagehead .right { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.content { flex: 1; min-height: 0; overflow: auto; padding: 16px 20px; }
.content.tight { padding: 0; }
.split { flex: 1; min-height: 0; display: flex; }
.split > * { min-width: 0; min-height: 0; }
.split.v { flex-direction: column; }
.split .list { flex: 1; overflow: auto; }
.split .pane { flex: 1; overflow: auto; border-left: 1px solid var(--hair); }
.split.v .pane { border-left: 0; border-top: 1px solid var(--hair); flex: 1.1; }
.split.right .list { flex: 0 0 46%; }
/* 버튼 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: 18px; font-size: 13.5px; white-space: nowrap; background: var(--hair2); color: var(--ink); flex-shrink: 0; }
.btn:hover { background: #E6E7EA; }
.btn.primary { background: var(--blue); color: #fff; font-weight: 700; padding: 0 18px; } .btn.primary:hover { background: #0960A6; }
.btn.outline { background: var(--card); border: 1px solid var(--border); } .btn.outline:hover { background: var(--tool); }
.btn.amber { background: var(--amber); color: var(--ink); font-weight: 700; } .btn.amber:hover { background: #D69400; }
.btn.danger { background: var(--card); border: 1px solid var(--amber); color: var(--amber-text); font-weight: 700; }
.btn.red { background: var(--red); color: #fff; font-weight: 700; }
.btn.ghost { background: none; color: var(--blue-text); } .btn.ghost:hover { background: var(--blue-tint); }
.btn.sm { height: 30px; padding: 0 11px; border-radius: 6px; font-size: 12.5px; background: var(--card); border: 1px solid var(--border); }
.btn.sm.blue { border-color: var(--blue-line); color: var(--blue-text); font-weight: 700; }
.btn.sm.primary { background: var(--blue); color: #fff; border-color: var(--blue); font-weight: 700; } .btn.sm.primary:hover { background: #0960A6; }
.btn.sm.red { background: var(--red); color: #fff; border-color: var(--red); font-weight: 700; }
.btn.sm.amber { background: var(--amber); color: var(--ink); border-color: var(--amber); font-weight: 700; }
.btn.sm.danger { border-color: var(--amber); color: var(--amber-text); font-weight: 700; }
.btn.sm.outline { background: var(--card); }
.btn.sm.plain { border: 0; background: none; color: var(--ink2); } .btn.sm.plain:hover { background: var(--hair2); }
.btn.lg { height: 44px; padding: 0 22px; border-radius: 22px; font-size: 14.5px; }
.btn.block { width: 100%; }
.btn.icon { width: 36px; padding: 0; }
.btn svg { flex-shrink: 0; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--card); }
.seg button { height: 30px; padding: 0 12px; font-size: 12.5px; color: var(--ink2); border-right: 1px solid var(--border); white-space: nowrap; }
.seg button:last-child { border-right: 0; }
.seg button.active { background: var(--blue-tint); color: var(--blue-text); font-weight: 700; }
/* 칩·배지 */
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; border-radius: 8px; padding: 1px 7px; white-space: nowrap; flex-shrink: 0; color: var(--ink2); background: var(--hair2); font-weight: 500; }
.chip.blue { color: var(--blue-text); background: var(--blue-tint); font-weight: 700; }
.chip.amber { color: var(--amber-text); background: var(--amber-tint); font-weight: 700; }
.chip.amber-solid { color: var(--ink); background: var(--amber); font-weight: 700; }
.chip.dashed { color: var(--amber-text); background: none; border: 1px dashed var(--amber); font-weight: 700; }
.chip.red { color: var(--red); background: var(--red-tint); font-weight: 700; }
.chip.green { color: #1F6B3E; background: var(--green-tint); font-weight: 700; }
.chip.purple { color: #4A3F8F; background: #EEEBF7; font-weight: 700; }
.chip.dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip.lg { font-size: 12.5px; padding: 3px 10px; border-radius: 10px; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--card); font-size: 12.5px; white-space: nowrap; }
.pill.active { background: var(--blue-tint); border-color: var(--blue-line); color: var(--blue-text); font-weight: 700; }
/* 목록 행 */
.rows { display: flex; flex-direction: column; }
.row-item { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 16px; border-bottom: 1px solid var(--hair2); cursor: pointer; }
.row-item:hover { background: var(--tool); }
.row-item.active { background: var(--blue-tint); }
.row-item.unread .subj, .row-item.unread .who { font-weight: 700; }
.row-item .who { width: 150px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-item .subj { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.row-item .subj .snip { color: var(--ink3); font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.row-item .when { width: 74px; text-align: right; flex-shrink: 0; font-size: 12.5px; color: var(--ink3); }
.row-item .size { width: 60px; text-align: right; flex-shrink: 0; font-size: 12px; color: var(--ink4); }
.row-item.two { min-height: 62px; padding: 8px 16px; align-items: flex-start; }
.row-item.two .lines { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row-item.two .lines > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.check { width: 16px; height: 16px; border: 1.5px solid var(--ink4); border-radius: 4px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--card); }
.check.on { background: var(--blue); border-color: var(--blue); }
.star { color: var(--ink4); flex-shrink: 0; display: inline-flex; } .star.on { color: var(--star); }
.star.on svg { fill: var(--star); stroke: var(--amber-text); }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th { text-align: left; font-size: 12px; font-weight: 700; color: var(--ink3); padding: 9px 12px; border-bottom: 1px solid var(--hair); background: var(--tool); white-space: nowrap; position: sticky; top: 0; z-index: 1; }
.table td { padding: 10px 12px; border-bottom: 1px solid var(--hair2); vertical-align: middle; }
.table tr.click { cursor: pointer; } .table tr.click:hover td { background: var(--tool); }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .sub { display: block; font-size: 12px; color: var(--ink3); }
.tablewrap { overflow: auto; }
/* 폼 */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label { font-size: 12.5px; font-weight: 700; color: var(--ink2); }
.field .help { font-size: 12.5px; color: var(--ink3); }
.field .err { font-size: 12.5px; color: var(--red); }
.input, .field input:not([type=checkbox]):not([type=radio]), .field select, .field textarea { height: 42px; padding: 0 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); font-size: 14px; width: 100%; }
.field textarea, textarea.input { height: auto; min-height: 110px; padding: 10px 14px; resize: vertical; line-height: 1.6; }
.input.sm, .field input.sm, .field select.sm { height: 34px; font-size: 13px; padding: 0 10px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.form-grid .full { grid-column: 1 / -1; }
.switch { width: 38px; height: 22px; border-radius: 11px; background: var(--border); position: relative; flex-shrink: 0; transition: background .15s; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: left .15s; }
.switch.on { background: var(--blue); } .switch.on::after { left: 18px; }
.opt { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hair2); }
.opt .t { font-weight: 500; } .opt .d { font-size: 12.5px; color: var(--ink3); margin-top: 2px; }
.opt .switch, .opt select, .opt .seg { margin-left: auto; }
.radio { display: flex; align-items: center; gap: 8px; padding: 6px 0; cursor: pointer; }
.radio i { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--ink4); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.radio.on i { border-color: var(--blue); } .radio.on i::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
/* 카드 안 구획 */
.section { padding: 16px 20px; border-bottom: 1px solid var(--hair); }
.section:last-child { border-bottom: 0; }
.section h3 { margin-bottom: 10px; }
.box { border: 1px solid var(--hair); border-radius: 10px; padding: 14px 16px; background: var(--card); }
.box.tint { background: var(--blue-tint); border-color: var(--blue-line); }
.box.amber { background: var(--amber-tint); border-color: #F0D28A; }
.box.tool { background: var(--tool); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 13px; }
.kv dt { color: var(--ink3); } .kv dd { margin: 0; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.stat { border: 1px solid var(--hair); border-radius: 10px; padding: 12px 14px; background: var(--card); }
.stat .l { font-size: 12px; color: var(--ink3); } .stat .v { font-size: 20px; font-weight: 700; margin-top: 2px; letter-spacing: -.01em; } .stat .s { font-size: 12px; color: var(--ink3); margin-top: 2px; }
.stat.warn { border-color: #F0D28A; background: var(--amber-tint); } .stat.warn .v { color: var(--amber-text); }
.stat.blue { background: var(--blue-tint); border-color: var(--blue-line); } .stat.blue .v { color: var(--blue-text); }
.empty { padding: 48px 20px; text-align: center; color: var(--ink3); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.empty b { color: var(--ink); font-size: 15px; }
.banner { display: flex; align-items: center; gap: 10px; padding: 9px 16px; font-size: 12.5px; background: var(--blue-tint); color: var(--blue-text); border-bottom: 1px solid var(--blue-line); flex-wrap: wrap; }
.banner.amber { background: var(--amber-tint); color: var(--amber-text); border-color: #F0D28A; }
.banner.red { background: var(--red-tint); color: var(--red); border-color: #F1B7B0; }
.banner .x { margin-left: auto; cursor: pointer; }
.note { font-size: 12.5px; color: var(--ink3); }
.divider { height: 1px; background: var(--hair); margin: 12px 0; }
.timeline { display: flex; flex-direction: column; gap: 0; }
.timeline .tl { display: flex; gap: 12px; padding: 0 0 14px; position: relative; }
.timeline .tl::before { content: ""; position: absolute; left: 12px; top: 26px; bottom: 0; width: 2px; background: var(--hair); }
.timeline .tl:last-child::before { display: none; }
.timeline .tl .dotc { width: 26px; height: 26px; border-radius: 50%; background: var(--hair2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--ink3); }
.timeline .tl.done .dotc { background: var(--blue-tint); color: var(--blue-text); }
.timeline .tl.now .dotc { background: var(--amber); color: var(--ink); }
.timeline .tl.rej .dotc { background: var(--red-tint); color: var(--red); }
.steps { display: flex; gap: 0; align-items: center; flex-wrap: wrap; }
.steps .st { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 12px; min-width: 88px; font-size: 12px; color: var(--ink3); position: relative; }
.steps .st b { color: var(--ink); font-size: 12.5px; } .steps .st .ty { font-size: 11px; }
.steps .st.done .ty { color: var(--blue-text); } .steps .st.now { background: var(--amber-tint); border-radius: 8px; } .steps .st.now .ty { color: var(--amber-text); font-weight: 700; }
.steps .st.rej .ty { color: var(--red); font-weight: 700; }
.steps .arr { color: var(--ink4); }
/* 메일 읽기 */
.msg { padding: 18px 22px; border-bottom: 1px solid var(--hair); }
.msg .head { display: flex; align-items: flex-start; gap: 12px; }
.msg .body { margin-top: 14px; font-size: 14px; line-height: 1.75; color: #2A2A2F; word-break: break-word; }
.msg .body img { max-width: 100%; }
.msg .body blockquote { margin: 8px 0; padding: 4px 12px; border-left: 3px solid var(--hair); color: var(--ink3); }
.msg.collapsed { padding: 10px 22px; cursor: pointer; background: var(--tool); }
.att { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--hair); border-radius: 8px; font-size: 12.5px; background: var(--card); max-width: 100%; }
.att .nm { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att .sz { color: var(--ink3); }
.bigcard { border: 1px solid var(--blue-line); border-radius: 10px; overflow: hidden; margin-top: 12px; }
.bigcard .bh { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--blue-tint); color: var(--blue-text); font-size: 12px; font-weight: 700; }
.bigcard .bb { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.compose { display: flex; flex-direction: column; height: 100%; }
.compose .line { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-bottom: 1px solid var(--hair2); }
.compose .line label { width: 54px; flex-shrink: 0; font-size: 12.5px; color: var(--ink3); }
.compose .line input { flex: 1; border: 0; background: none; height: 42px; min-width: 120px; } .compose .line input:focus { box-shadow: none; }
.compose .tokens { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex: 1; }
.token { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px 0 4px; border-radius: 13px; background: var(--hair2); font-size: 12.5px; }
.token.ext { background: var(--amber-tint); color: var(--amber-text); }
.token .x { cursor: pointer; color: var(--ink3); }
.compose .editor { flex: 1; min-height: 200px; padding: 14px 18px; outline: none; font-size: 14px; line-height: 1.75; overflow: auto; }
.compose .foot { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--hair); background: var(--tool); flex-wrap: wrap; }
.suggest { position: absolute; z-index: 5; background: var(--card); border: 1px solid var(--hair); border-radius: 10px; box-shadow: var(--shadow-pop); min-width: 280px; max-height: 260px; overflow: auto; padding: 4px; }
.suggest .s { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 12.5px; }
.suggest .s:hover, .suggest .s.hi { background: var(--blue-tint); }
.suggest .s .k { margin-left: auto; color: var(--ink3); font-size: 11px; }
/* 레이어 */
#layer:empty { display: none; }
.backdrop { position: fixed; inset: 0; background: rgba(30,30,35,.32); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px; }
.modal { background: var(--card); border-radius: 14px; box-shadow: var(--shadow-pop); width: 560px; max-width: 100%; max-height: calc(100vh - 40px); display: flex; flex-direction: column; overflow: hidden; }
.modal.wide { width: 900px; } .modal.xl { width: 1080px; } .modal.narrow { width: 440px; }
.modal .mh { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--hair); }
.modal .mh h2 { font-size: 16px; } .modal .mh .x { margin-left: auto; }
.modal .mb { flex: 1; min-height: 0; overflow: auto; padding: 18px 20px; }
.modal .mf { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--hair); background: var(--tool); }
.modal .mf .right { margin-left: auto; display: flex; gap: 8px; }
.popover { position: fixed; z-index: 60; background: var(--card); border: 1px solid var(--hair); border-radius: 12px; box-shadow: var(--shadow-pop); min-width: 200px; max-width: min(420px, calc(100vw - 20px)); max-height: calc(100vh - 20px); overflow: auto; }
.menu { padding: 6px; }
.menu .mi { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 8px; font-size: 13px; text-align: left; white-space: nowrap; }
.menu .mi:hover { background: var(--blue-tint); }
.menu .mi.danger { color: var(--red); } .menu .mi.danger:hover { background: var(--red-tint); }
.menu .mi .k { margin-left: auto; color: var(--ink4); font-size: 11.5px; }
.menu .sep { height: 1px; background: var(--hair); margin: 4px 0; }
.menu .mt { padding: 8px 10px 4px; font-size: 11.5px; font-weight: 700; color: var(--ink3); }
.toasts { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 100; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 12px; background: var(--ink); color: #fff; font-size: 13.5px; box-shadow: var(--shadow-pop); max-width: min(560px, calc(100vw - 32px)); animation: up .18s ease-out; }
.toast .a { color: #FFD166; font-weight: 700; cursor: pointer; white-space: nowrap; }
.toast.err { background: var(--red); }
.toast .prog { height: 3px; border-radius: 2px; background: rgba(255,255,255,.35); width: 64px; overflow: hidden; } .toast .prog i { display: block; height: 100%; background: #FFD166; }
@keyframes up { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
.spinner { width: 18px; height: 18px; border: 2px solid var(--hair); border-top-color: var(--blue); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px; color: var(--ink3); }
/* 인증 */
.auth { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; }
.auth .card { width: 440px; max-width: 100%; padding: 36px 36px 30px; display: flex; flex-direction: column; gap: 18px; }
.auth .brand { display: flex; align-items: center; gap: 10px; }
.auth .brand img { height: 34px; }
.auth h1 { font-size: 20px; font-family: var(--brand-font); font-weight: 400; }
.codeinput { letter-spacing: .5em; text-align: center; font-size: 22px !important; height: 52px !important; }
/* 캘린더 */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid var(--hair); border-left: 1px solid var(--hair); }
.cal-grid .dow { padding: 6px 8px; font-size: 12px; font-weight: 700; color: var(--ink3); border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); background: var(--tool); }
.cal-grid .day { min-height: 104px; padding: 6px; border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.cal-grid .day:hover { background: var(--tool); }
.cal-grid .day .d { font-size: 12.5px; font-weight: 500; color: var(--ink2); display: flex; align-items: center; gap: 6px; }
.cal-grid .day.other .d { color: var(--ink4); } .cal-grid .day.today .d b { background: var(--blue); color: #fff; border-radius: 50%; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; }
.cal-grid .day .d .hol { color: var(--red); font-size: 11px; font-weight: 500; }
.cal-grid .day.sun .d, .cal-grid .day.hol .d { color: var(--red); }
.ev { font-size: 11.5px; padding: 1px 6px; border-radius: 4px; background: var(--blue-tint); color: var(--blue-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-left: 3px solid var(--blue); cursor: pointer; }
.ev.more { background: none; border: 0; color: var(--ink3); }
.week { display: grid; grid-template-columns: 52px repeat(7, 1fr); border-top: 1px solid var(--hair); }
.week .wh { padding: 8px 6px; font-size: 12px; text-align: center; border-bottom: 1px solid var(--hair); border-left: 1px solid var(--hair); font-weight: 700; color: var(--ink3); background: var(--tool); }
.week .wh.today { color: var(--blue-text); }
.week .hr { font-size: 11px; color: var(--ink4); text-align: right; padding: 0 6px; height: 48px; border-bottom: 1px solid var(--hair2); }
.week .slot { border-left: 1px solid var(--hair); border-bottom: 1px solid var(--hair2); height: 48px; position: relative; cursor: pointer; }
.week .col { position: relative; border-left: 1px solid var(--hair); }
.week .col .slot { border-left: 0; }
.week .evb { position: absolute; left: 3px; right: 3px; padding: 3px 6px; border-radius: 6px; background: var(--blue-tint); color: var(--blue-text); border-left: 3px solid var(--blue); font-size: 11.5px; overflow: hidden; cursor: pointer; z-index: 1; }
.week .evb b { display: block; font-size: 12px; }
/* 채팅 */
.chat { display: flex; flex-direction: column; height: 100%; }
.chat .msgs { flex: 1; overflow: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.bubble { display: flex; gap: 10px; align-items: flex-end; max-width: 78%; }
.bubble.me { align-self: flex-end; flex-direction: row-reverse; }
.bubble .b { padding: 9px 13px; border-radius: 14px; background: var(--hair2); line-height: 1.55; font-size: 13.5px; white-space: pre-wrap; word-break: break-word; }
.bubble.me .b { background: var(--blue); color: #fff; border-bottom-right-radius: 4px; }
.bubble:not(.me) .b { border-bottom-left-radius: 4px; }
.bubble .meta { font-size: 11px; color: var(--ink4); white-space: nowrap; }
.bubble .nm { font-size: 12px; color: var(--ink2); margin-bottom: 3px; font-weight: 500; }
.bubble .cardref { display: block; margin-top: 6px; padding: 10px 12px; border-radius: 10px; background: var(--card); border: 1px solid var(--hair); color: var(--ink); font-size: 12.5px; min-width: 220px; }
.bubble.me .cardref { color: var(--ink); }
.sysmsg { align-self: center; font-size: 11.5px; color: var(--ink3); background: var(--hair2); padding: 3px 10px; border-radius: 10px; }
.chat .composer { display: flex; align-items: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--hair); background: var(--tool); }
.chat .composer textarea, .chat .composer textarea.input { flex: 1; height: 42px; min-height: 42px; max-height: 140px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 21px; resize: none; background: var(--card); line-height: 1.45; }
.conv { display: flex; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--hair2); cursor: pointer; align-items: center; }
.conv:hover { background: var(--tool); } .conv.active { background: var(--blue-tint); }
.conv .c { flex: 1; min-width: 0; } .conv .c .t { display: flex; gap: 6px; align-items: center; } .conv .c .t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv .c .l { font-size: 12.5px; color: var(--ink3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv .r { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 11.5px; color: var(--ink4); }
.badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--blue); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.badge.amber { background: var(--amber); color: var(--ink); }
.online { width: 9px; height: 9px; border-radius: 50%; background: var(--green); border: 2px solid #fff; }
/* 알림 팝오버 */
.noti { display: flex; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--hair2); cursor: pointer; }
.noti:hover { background: var(--tool); } .noti.unread { background: #F4F8FD; }
.noti .ic { width: 30px; height: 30px; border-radius: 50%; background: var(--blue-tint); color: var(--blue-text); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.noti .c { flex: 1; min-width: 0; font-size: 12.5px; } .noti .c b { display: block; font-size: 13px; } .noti .c .w { color: var(--ink4); font-size: 11.5px; margin-top: 2px; }
/* 검색 팔레트 */
.palette { width: 720px; max-width: 100%; }
.palette .res { padding: 4px 0; }
.palette .res h4 { padding: 8px 14px 4px; font-size: 11.5px; color: var(--ink3); }
.palette .ri { display: flex; align-items: center; gap: 10px; padding: 8px 14px; cursor: pointer; font-size: 13px; }
.palette .ri:hover, .palette .ri.hi { background: var(--blue-tint); }
.palette .ri .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .palette .ri .m { color: var(--ink3); font-size: 12px; white-space: nowrap; }
mark { background: #FFF1B8; color: inherit; padding: 0 1px; border-radius: 2px; }
/* 유틸 */
.row { display: flex; align-items: center; gap: 8px; min-width: 0; } .row.wrap { flex-wrap: wrap; } .row.top { align-items: flex-start; } .row.between { justify-content: space-between; }
.col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.grow { flex: 1; min-width: 0; } .ml { margin-left: auto; }
.muted { color: var(--ink2); } .dim { color: var(--ink3); } .faint { color: var(--ink4); } .strong { font-weight: 700; } .blue { color: var(--blue-text); } .amber { color: var(--amber-text); } .red { color: var(--red); } .green { color: #1F6B3E; }
.small { font-size: 12.5px; } .xs { font-size: 11.5px; } .lg { font-size: 15px; } .num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; } .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mt4 { margin-top: 4px; } .mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; } .mb8 { margin-bottom: 8px; } .mb12 { margin-bottom: 12px; } .mb16 { margin-bottom: 16px; }
.p16 { padding: 16px; } .p20 { padding: 20px; } .px20 { padding-left: 20px; padding-right: 20px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.prose { font-size: 14px; line-height: 1.75; } .prose p { margin: 0 0 10px; } .prose img { max-width: 100%; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.clickable { cursor: pointer; }
.print-doc { width: 794px; max-width: 100%; margin: 0 auto; padding: 56px 64px; background: #fff; color: #111; font-size: 13.5px; line-height: 1.7; }
.print-doc table { width: 100%; border-collapse: collapse; } .print-doc td, .print-doc th { border: 1px solid #333; padding: 6px 10px; font-size: 12.5px; }
.seal { width: 68px; height: 68px; border: 2.5px solid #C43D2F; border-radius: 50%; color: #C43D2F; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; text-align: center; line-height: 1.15; transform: rotate(-6deg); opacity: .9; }
/* 모바일 */
.tabbar { flex-shrink: 0; display: flex; height: calc(56px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--card); border-top: 1px solid var(--hair); }
.tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10.5px; color: var(--ink3); min-height: 44px; position: relative; }
.tabbar button.active { color: var(--blue-text); font-weight: 700; }
.tabbar button .n { position: absolute; top: 6px; left: calc(50% + 6px); }
@media (max-width: 860px) {
  .topbar { padding: 0 8px 0 12px; gap: 6px; }
  .topbar .tabs { display: none; }
  .searchbox { width: auto; flex: 1; margin-left: 0; }
  .app-body { padding: 0; gap: 0; }
  .rail { display: none; position: fixed; z-index: 40; top: var(--topbar); left: 0; bottom: 0; width: 280px; background: var(--card); padding: 12px; box-shadow: var(--shadow-pop); overflow-y: auto; }
  .rail.open { display: flex; }
  .main > .card { border-radius: 0; box-shadow: none; }
  .toolbar { border-radius: 0; }
  .form-grid, .grid2, .grid3 { grid-template-columns: 1fr; }
  .split:not(.v) { flex-direction: column; }
  .split.right .list { flex: 1; }
  .split .pane { border-left: 0; }
  .split.has-detail .list { display: none; }
  .split:not(.has-detail) .pane { display: none; }
  .row-item .who { width: auto; max-width: 40%; }
  .row-item .size { display: none; }
  .modal { width: 100% !important; max-height: 100vh; border-radius: 14px 14px 0 0; }
  .backdrop { align-items: flex-end; padding: 0; }
  .content { padding: 12px 14px; } .section { padding: 14px; } .pagehead { padding: 12px 14px; }
  .desktop-only { display: none !important; }
}
@media (min-width: 861px) { .tabbar { display: none !important; } .mobile-only { display: none !important; } }
@media print { .topbar, .rail, .tabbar, .toolbar, .toasts, #layer { display: none !important; } .app-body { padding: 0; } .main > .card { box-shadow: none; } .content { overflow: visible; } }

body.win .app-body { padding: 0; } body.win .main > .card { border-radius: 0; box-shadow: none; } body.win .split .list { display: none; } body.win .split .pane { border: 0; }