:root{
  --bg:#f4f5f7; --panel:#fff; --line:#e2e5ea; --ink:#1f2430; --muted:#6b7280;
  --accent:#e0556b; --accent-d:#c83f55;
}
*{box-sizing:border-box;}
html,body{height:100%;margin:0;font-family:"Malgun Gothic","맑은 고딕",system-ui,sans-serif;color:var(--ink);background:var(--bg);}
button,.btn{font:inherit;font-size:13px;padding:7px 12px;border:1px solid var(--line);background:#fff;border-radius:7px;cursor:pointer;color:var(--ink);}
button:hover{background:#f0f1f4;}
button.primary{background:var(--accent);color:#fff;border-color:var(--accent);}
button.primary:hover{background:var(--accent-d);}
button.ghost{border-color:transparent;background:transparent;color:var(--muted);}
input[type=text],input[type=password]{font:inherit;font-size:14px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;width:100%;}
.view{display:none;height:100vh;}
.view.active{display:block;}

/* 로그인 */
#view-login{display:none;place-items:center;}
#view-login.active{display:grid;}
.login-card{background:#fff;padding:32px;border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.08);width:320px;}
.login-card h1{margin:0 0 4px;color:var(--accent);font-size:22px;}
.login-card p{margin:0 0 20px;color:var(--muted);font-size:13px;}
.login-card label{display:block;font-size:12px;color:var(--muted);margin:12px 0 5px;}
.login-card .err{color:#c0392b;font-size:12px;min-height:16px;margin-top:8px;}
.login-card button{width:100%;margin-top:18px;padding:11px;}

/* 공통 상단바 */
.topbar{height:56px;display:flex;align-items:center;gap:10px;padding:0 18px;background:#fff;border-bottom:1px solid var(--line);}
.topbar .brand{font-weight:800;color:var(--accent);font-size:17px;}
.topbar .crumb{color:var(--muted);font-size:14px;display:flex;align-items:center;gap:8px;}
.topbar .crumb b{color:var(--ink);}
.topbar .spacer{flex:1;}
.topbar .user{font-size:13px;color:var(--muted);}

/* 프로젝트 그리드 */
.wrap{padding:26px;max-width:1100px;margin:0 auto;}
.wrap h2{font-size:18px;margin:0 0 16px;}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;cursor:pointer;transition:.12s;position:relative;}
.card:hover{box-shadow:0 6px 18px rgba(0,0,0,.07);transform:translateY(-1px);}
.card h3{margin:0 0 6px;font-size:15px;}
.card .meta{font-size:12px;color:var(--muted);}
.card .del{position:absolute;top:10px;right:10px;color:#bbb;font-size:14px;}
.card .del:hover{color:#c0392b;}
.card.add{display:flex;align-items:center;justify-content:center;color:var(--accent);font-weight:700;border-style:dashed;border-color:var(--accent);}

/* 도면 리스트 (프로젝트 상세) */
.sheets{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;}
.sheet{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;cursor:pointer;position:relative;}
.sheet:hover{box-shadow:0 6px 18px rgba(0,0,0,.07);}
.sheet .thumb{height:150px;background:#eef0f3 center/contain no-repeat;border-bottom:1px solid var(--line);}
.sheet .info{padding:10px 12px;}
.sheet .info b{font-size:14px;}
.sheet .info .meta{font-size:12px;color:var(--muted);margin-top:3px;}
.sheet .del{position:absolute;top:8px;right:8px;background:rgba(255,255,255,.9);border-radius:6px;padding:2px 6px;color:#c0392b;font-size:12px;}

/* 에디터 */
#view-editor{display:none;}
#view-editor.active{display:grid;grid-template-rows:56px 1fr;}
.editor-body{display:grid;grid-template-columns:250px 1fr 330px;overflow:hidden;}
.col{overflow:auto;background:#fff;}
#leftcol{border-right:1px solid var(--line);padding:10px;}
#rightcol{border-left:1px solid var(--line);}
#stage{position:relative;background:#dfe2e7;overflow:hidden;}
#cv{position:absolute;inset:0;display:block;cursor:crosshair;}
#zoominfo{position:absolute;right:10px;bottom:10px;font-size:11px;background:rgba(255,255,255,.85);padding:3px 8px;border-radius:5px;color:#555;}
.hintbox{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;color:#8a909b;font-size:14px;pointer-events:none;}

.sec-title{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:6px 4px;}
.cat{margin-bottom:9px;}
.cat h4{display:flex;align-items:center;gap:6px;font-size:12px;margin:0 0 3px;padding:4px 7px;border-radius:6px;color:#fff;}
.type{display:flex;gap:6px;align-items:center;font-size:12px;padding:5px 7px;border-radius:5px;cursor:pointer;border:1px solid transparent;}
.type:hover{background:#f0f1f4;}
.type.active{border-color:var(--accent);background:#fdeef0;}
.type .code{font-weight:700;min-width:36px;}
.type .nm{color:#444;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.idx{padding:0 4px;}
.idx .row{display:flex;align-items:center;gap:7px;font-size:12px;padding:3px 0;}
.idx .row .sw{width:11px;height:11px;border-radius:3px;}
.idx .row .n{margin-left:auto;font-weight:700;}
.idx .total{margin-top:8px;padding-top:8px;border-top:1px solid var(--line);display:flex;font-size:13px;font-weight:800;}
.idx .total .n{margin-left:auto;color:var(--accent);}

table.list{width:100%;border-collapse:collapse;font-size:12px;}
table.list th,table.list td{padding:5px 7px;border-bottom:1px solid var(--line);text-align:left;}
table.list th{position:sticky;top:0;background:#fafbfc;color:var(--muted);font-weight:600;z-index:1;}
table.list tr.sel td{background:#fdeef0;}
table.list td .dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:middle;}
table.list td.qty input{width:42px;font-size:12px;padding:3px 5px;border:1px solid var(--line);border-radius:5px;}
table.list td .x{color:#c0392b;cursor:pointer;font-weight:700;}
table.list tr[data-i]:hover td{background:#f6f7f9;cursor:pointer;}
.empty{color:#9aa0ab;font-size:12px;padding:12px;}
.savestate{font-size:12px;color:var(--muted);}
.savestate.dirty{color:var(--accent);font-weight:700;}
.floorinp{width:64px !important;text-align:center;}
.seg-group{display:inline-flex;border:1px solid var(--line);border-radius:7px;overflow:hidden;}
.seg{border:none;border-radius:0;padding:6px 11px;background:#fff;}
.seg + .seg{border-left:1px solid var(--line);}
.seg.active{background:var(--accent);color:#fff;}
.seg.active:hover{background:var(--accent-d);}
.kbdhint{font-size:11px;color:var(--muted);margin-left:8px;}
.spinner{display:inline-block;width:14px;height:14px;border:2px solid #ccc;border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle;}
@keyframes spin{to{transform:rotate(360deg)}}