:root {
  --paper: #F4EFE4;
  --sheet: #FBF8F1;
  --ink: #2B2D2F;
  --ink2: #5E6164;
  --ink3: #8E8E8A;
  --rule: #D9D0BF;
  --rule2: #E8E1D3;
  --brick: #A5432B;
  --brick2: #C46A50;
  --brickbg: #F2DCD1;
  --brickbg2: #F8ECE5;
  --hatch: repeating-linear-gradient(45deg, transparent 0 5px, rgba(43, 45, 47, .13) 5px 6px);
  --serif: 'Nanum Myeongjo', 'AppleMyungjo', serif;
  --sans: 'Nanum Gothic', -apple-system, 'Apple SD Gothic Neo', sans-serif;
  --mono: 'Nanum Gothic Coding', ui-monospace, Menlo, monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 14px/1.55 var(--sans); }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hot { color: var(--brick); }
.muted { color: var(--ink3); }

/* SDE 데모 띠 (academy와 같은 모양) */
.demo { background: #111418; color: #C9CCD1; font-family: -apple-system, "Apple SD Gothic Neo", sans-serif; font-size: 13px; text-align: center; padding: 8px 16px; line-height: 1.5; }
.demo a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.demo b { color: #FF5A36; font-family: Menlo, monospace; font-weight: 700; }
.demo button { background: none; border: 0; padding: 0; color: #fff; font-size: 13px; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* 틀 */
.app { display: grid; grid-template-columns: 216px minmax(0, 1fr); min-height: calc(100vh - 36px); background: linear-gradient(90deg, var(--ink) 216px, transparent 216px); }
.side { background: var(--ink); color: #E9E2D4; padding: 22px 14px 18px; position: sticky; top: 0; height: calc(100vh - 36px); align-self: start; display: flex; flex-direction: column; gap: 22px; }
.logo { display: flex; gap: 10px; align-items: center; text-decoration: none; padding: 0 4px; }
.logo .mark { width: 36px; height: 36px; flex: none; }
.logo b { display: block; font: 800 19px/1.2 var(--serif); letter-spacing: -.01em; color: #F5F0E6; }
.logo small { color: #A9A398; font-size: 12px; }
#nav { display: flex; flex-direction: column; gap: 2px; }
#nav a { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; text-decoration: none; color: #CBC4B6; font-weight: 700; border-left: 3px solid transparent; }
#nav a:hover { color: #fff; }
#nav a[aria-current=page] { color: #fff; background: rgba(255, 255, 255, .06); border-left-color: var(--brick2); }
.badge { background: var(--brick); color: #fff; font: 700 11px/1.6 var(--mono); min-width: 20px; padding: 0 6px; text-align: center; }
.badge:empty { display: none; }
.bld { margin: 0; padding: 0 6px; font-size: 12px; color: #A9A398; line-height: 1.6; }
.who { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding: 0 4px; }
#today { font: 700 13px var(--mono); color: #F5F0E6; }
.who select { width: 100%; background: #3A3C3F; color: #F5F0E6; border: 1px solid #55585B; padding: 7px 8px; font-weight: 700; }
.role-note { margin: 0; font-size: 11.5px; color: #A9A398; line-height: 1.55; }
#main { padding: 24px 32px 48px; min-width: 0; }

/* 공통 */
.ph { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 14px; }
.ph h1 { margin: 0; font: 800 26px/1.3 var(--serif); letter-spacing: -.01em; }
.ph p { margin: 3px 0 0; color: var(--ink2); font-size: 13px; }
.ph-r { display: flex; gap: 8px; flex-wrap: wrap; }
.seg { display: inline-flex; border: 1px solid var(--ink); background: var(--sheet); }
.seg button { background: none; border: 0; padding: 6px 13px; font-weight: 700; font-size: 13px; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--ink); }
.seg button[aria-pressed=true] { background: var(--ink); color: var(--paper); }
.card { background: var(--sheet); border: 1px solid var(--rule); padding: 16px 18px; min-width: 0; }
.card h2 { margin: 0 0 12px; font: 800 15px/1.3 var(--serif); display: flex; align-items: baseline; gap: 8px; }
.card h2 small { font: 400 12px var(--sans); color: var(--ink3); }
.card h2 > a, .card h2 > .link, .card h2 > .dd { margin-left: auto; }
.card h2 > a { font: 700 12px var(--sans); color: var(--brick); }
.dd { font: 700 13px var(--mono); }
.cnt { font: 700 11px/1.6 var(--mono); background: var(--ink); color: var(--paper); padding: 0 6px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--ink); background: var(--sheet); color: var(--ink); padding: 7px 14px; font-weight: 700; font-size: 13px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { background: #fff; }
.btn.pri { background: var(--ink); color: var(--paper); }
.btn.pri:hover { background: #000; }
.btn.danger { background: var(--brick); border-color: var(--brick); color: #fff; }
.btn.sm { padding: 3px 9px; font-size: 12px; }
.btn:disabled { opacity: .38; cursor: not-allowed; }
.link { background: none; border: 0; padding: 0; color: var(--brick); font: 700 12.5px var(--sans); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.link:disabled { color: var(--ink3); text-decoration: none; cursor: not-allowed; }
.xs { font-size: 11px; border: 1px solid var(--rule); background: transparent; padding: 0 5px; cursor: pointer; color: var(--ink2); line-height: 1.6; }
.xs:hover { border-color: var(--brick); color: var(--brick); }
.xs:disabled { cursor: not-allowed; opacity: .6; }
.tag { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 0 7px; border: 1px solid; line-height: 1.65; white-space: nowrap; }
.t-ok { border-color: var(--ink); color: var(--ink); }
.t-part { border-color: var(--brick); color: var(--brick); background: var(--brickbg); }
.t-late { background: var(--brick); border-color: var(--brick); color: #fff; }
.t-soon { border: 1px dashed var(--ink3); color: var(--ink2); }
.t-vac { border-color: var(--ink3); color: var(--ink2); background: var(--hatch); }
.empty { padding: 26px 12px; text-align: center; color: var(--ink2); border: 1px dashed var(--rule); }
.empty b { display: block; color: var(--ink); font-size: 14px; }
.empty span { font-size: 12.5px; }
.card .empty { padding: 14px 10px; }
.note { font-size: 12.5px; color: var(--ink2); margin: 8px 0; }
.warn { background: var(--brickbg2); border-left: 3px solid var(--brick); padding: 8px 12px; font-size: 13px; margin: 0 0 12px; }
.btns { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.btns.col { flex-direction: column; }
.kv { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 6px 12px; margin: 0; }
.kv dt { color: var(--ink2); }
.kv dd { margin: 0; min-width: 0; }
.kv.sm { font-size: 13px; margin-top: 12px; }
.kv small { font-size: 12px; color: var(--ink3); }
.kv select, .kv input { width: 100%; border: 1px solid var(--rule); background: #fff; padding: 4px 8px; font-size: 13px; }
.dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; vertical-align: 1px; }
.p { background: var(--ink); }
.o { background: var(--brick); }
.n { background: repeating-linear-gradient(90deg, var(--ink3) 0 2px, transparent 2px 4px); }
.sbar { display: flex; height: 10px; background: var(--rule2); margin: 10px 0 4px; }
.sbar.lg { height: 8px; margin: 0 0 4px; }
.big span { display: block; font-size: 12px; color: var(--ink2); }
.big b { font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
.mini li a { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto; gap: 8px; align-items: baseline; padding: 7px 0; border-bottom: 1px dashed var(--rule); text-decoration: none; font-size: 13px; }
.mini li:last-child a { border-bottom: 0; }
.mini li a:hover span { text-decoration: underline; }
.mini b { font: 700 12.5px var(--mono); }
.mini span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini em { font-style: normal; color: var(--ink2); font-size: 12px; }
.mini strong { text-align: right; font-weight: 800; }

/* 표 */
.tw { overflow-x: auto; position: relative; }
.tbl { width: 100%; border-collapse: collapse; background: var(--sheet); font-size: 13px; }
.tbl th { text-align: left; font-weight: 700; color: var(--ink2); font-size: 12px; border-bottom: 2px solid var(--ink); padding: 8px 7px; white-space: nowrap; }
.tbl th button { background: none; border: 0; padding: 0; font-weight: 700; color: inherit; cursor: pointer; }
.tbl th button:hover { color: var(--ink); }
.tbl th button.asc::after { content: ' ↑'; }
.tbl th button.desc::after { content: ' ↓'; }
.tbl td { border-bottom: 1px solid var(--rule2); padding: 8px 7px; vertical-align: middle; }
.tbl td small { display: block; color: var(--ink3); font-size: 11.5px; }
.tbl .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl tfoot td { border-top: 2px solid var(--ink); border-bottom: 0; font-weight: 700; }
.tbl tr.now td { background: var(--paper); }
.tbl tr[data-go] { cursor: pointer; }
.tbl tbody tr:hover td { background: var(--brickbg2); }
.tbl .ck { width: 30px; text-align: center; }
.tbl .ck input { width: 16px; height: 16px; accent-color: var(--brick); }
.is-late td:first-child { box-shadow: inset 3px 0 0 var(--brick); }
.rno { display: inline-block; font: 700 13px var(--mono); text-decoration: none; border: 1px solid var(--ink); padding: 0 5px; background: var(--paper); }
.c-name b { display: block; }
.c-act { white-space: nowrap; text-align: right; }
.c-act .btn + .btn { margin-left: 4px; }
.c-deps { min-width: 220px; }
.dep { display: inline-flex; gap: 4px; align-items: baseline; margin-right: 10px; font-size: 12.5px; white-space: nowrap; }
.tbl .dep small { display: inline; }
.tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 14px 0 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--rule); background: var(--sheet); padding: 5px 10px; font-size: 13px; font-weight: 700; cursor: pointer; }
.chip span { font: 700 12px var(--mono); color: var(--ink3); }
.chip[aria-pressed=true] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip[aria-pressed=true] span { color: #C9C2B4; }
.search { margin-left: auto; }
.search input { width: 220px; border: 1px solid var(--rule); background: var(--sheet); padding: 6px 10px; }
.search input:focus, .kv input:focus, .kv select:focus { outline: 2px solid var(--ink); outline-offset: -1px; }
.tools .btn:last-child { margin-left: 0; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--rule); background: var(--sheet); margin-bottom: 10px; }
.stats > * { padding: 12px 16px; border-right: 1px solid var(--rule); min-width: 0; }
.stats > *:last-child { border-right: 0; }
.stats span { display: block; font-size: 12px; color: var(--ink2); }
.stats b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.stats small { color: var(--ink3); font-size: 12px; }
.stats .hot b { color: var(--brick); }
.tiles button { background: none; border: 0; border-right: 1px solid var(--rule); text-align: left; cursor: pointer; }
.tiles button:hover { background: #fff; }
.tiles button.on { box-shadow: inset 0 -3px 0 var(--ink); background: #fff; }
.tiles button.hot b { color: var(--brick); }
.mp { display: flex; align-items: center; gap: 8px; }
.mp button, .pn a { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border: 1px solid var(--ink); background: var(--sheet); font-size: 18px; cursor: pointer; text-decoration: none; padding: 0; }
.mp span { width: 32px; }
.mp b { font: 800 18px var(--serif); min-width: 124px; text-align: center; }
.pn { display: inline-flex; gap: 4px; }
.prevs { margin-top: 16px; max-width: 640px; }

/* 층별 도면 */
.plan-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.plans { background-color: var(--sheet); background-image: linear-gradient(var(--rule2) 1px, transparent 1px), linear-gradient(90deg, var(--rule2) 1px, transparent 1px); background-size: 16px 16px; border: 1px solid var(--rule); padding: 12px 16px 6px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--ink2); margin: 0 0 10px 52px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { display: inline-block; width: 14px; height: 14px; border: 1px solid var(--ink); }
.floor { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; margin-bottom: 8px; align-items: center; }
.fl { text-align: right; }
.fl b { display: block; font: 800 20px/1 var(--serif); }
.fl small { font: 700 11px var(--mono); color: var(--ink3); }
.plan { display: grid; grid-template-columns: 24fr 6fr; border: 2px solid var(--ink); background: var(--sheet); }
.rows { display: flex; flex-direction: column; min-width: 0; }
.row { display: flex; min-width: 0; }
.row.back { height: 50px; }
.row.front { height: 62px; }
.corr { height: 10px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: linear-gradient(90deg, var(--rule) 50%, transparent 50%) center / 10px 1px repeat-x, var(--paper); }
.core { border-left: 2px solid var(--ink); background: var(--hatch), #EAE4D7; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1.1fr 1fr; gap: 5px; padding: 6px; }
.core i { border: 1px solid var(--ink); background: var(--sheet); position: relative; display: flex; align-items: center; justify-content: center; }
.core span { font: 700 9.5px var(--mono); background: var(--sheet); padding: 0 2px; position: relative; }
.stair { grid-row: 1 / 3; background: repeating-linear-gradient(0deg, var(--ink) 0 1px, var(--sheet) 1px 7px) !important; }
.stair::after { content: ''; position: absolute; top: 4px; bottom: 4px; left: 50%; border-left: 1px solid var(--ink); }
.ev { background: linear-gradient(to top right, transparent calc(50% - .6px), var(--ink3) 50%, transparent calc(50% + .6px)), linear-gradient(to top left, transparent calc(50% - .6px), var(--ink3) 50%, transparent calc(50% + .6px)), var(--sheet) !important; }
.u { position: relative; flex: 1 1 0; min-width: 0; border-right: 1px solid var(--ink); padding: 3px 7px 4px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; text-decoration: none; line-height: 1.2; container-type: inline-size; }
.row .u:last-child { border-right: 0; }
.u .no { font: 700 13px var(--mono); }
.u .nm { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u .meta { display: flex; justify-content: space-between; gap: 4px; font-size: 10.5px; color: var(--ink2); white-space: nowrap; }
.u .meta em { font-style: normal; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.row.back .u .meta { padding-right: 12px; }
/* 문 열림 표시 (복도 쪽) */
.u::before { content: ''; position: absolute; right: 6px; width: 9px; height: 9px; border: 1px solid currentColor; opacity: .32; pointer-events: none; }
.row.front .u::before { top: 0; border-top: 0; border-bottom-left-radius: 100%; }
.row.back .u::before { bottom: 0; border-bottom: 0; border-top-left-radius: 100%; }
.u.mgt::before { display: none; }
a.u:hover, a.u:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; z-index: 1; }
@container (max-width: 96px) { .u .ar { display: none; } }
@container (max-width: 50px) { .u .nm { display: none; } }
.s-ok { background: var(--sheet); }
.s-part { background: var(--brickbg); }
.s-part .meta em, .s-part .no { color: var(--brick); }
.s-late { background: var(--brick); color: #FBF3EE; }
.s-late .meta { color: #F4D8CC; }
.s-vacant { background: var(--hatch), var(--paper); color: var(--ink2); }
.s-vacant .nm { font-weight: 400; }
.mgt { background: #E7E1D4; color: var(--ink2); }
.e-30 { background: var(--brick); color: #FBF3EE; }
.e-30 .meta { color: #F4D8CC; }
.e-90 { background: var(--brickbg); }
.e-90 .meta em { color: var(--brick); }
.e-180 { background: repeating-linear-gradient(45deg, var(--brickbg) 0 5px, var(--sheet) 5px 10px); }
.e-ok { background: var(--sheet); }
.e-ok .meta em { color: var(--ink); background: var(--rule2); padding: 0 3px; }
.e-far { background: var(--sheet); color: var(--ink3); }
.street { margin: 8px 0 0 52px; border-top: 3px double var(--ink); padding: 4px 0 0; display: flex; justify-content: space-between; align-items: flex-start; font: 700 11px var(--mono); color: var(--ink2); }
.scale { position: relative; display: flex; width: 33.333%; height: 6px; margin: 2px 0 16px; }
.scale i { flex: 1; border: 1px solid var(--ink); }
.scale i:first-child { background: var(--ink); }
.scale b { position: absolute; top: 8px; transform: translateX(-50%); font-weight: 700; font-size: 10px; }
.scale b:nth-of-type(1) { left: 0; }
.scale b:nth-of-type(2) { left: 50%; }
.scale b:nth-of-type(3) { left: 100%; transform: translateX(-80%); }
.side-col { display: flex; flex-direction: column; gap: 14px; }
.ulist .c-name small { display: block; }

/* 호실 상세 */
.crumb { display: flex; gap: 6px; font-size: 12.5px; color: var(--ink2); }
.crumb a { text-decoration: none; font-weight: 700; color: var(--brick); }
.crumb span::before { content: '/'; margin-right: 6px; color: var(--ink3); }
.uh { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; margin: 8px 0 18px; padding-bottom: 16px; border-bottom: 2px solid var(--ink); }
.uh-no { width: 84px; height: 84px; border: 2px solid var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--sheet); position: relative; }
.uh-no::after { content: ''; position: absolute; right: 8px; top: -2px; width: 12px; height: 12px; border: 1.5px solid var(--ink); border-top: 0; border-bottom-left-radius: 100%; opacity: .4; }
.uh-no b { font: 700 28px/1.1 var(--mono); }
.uh-no small { font-size: 11px; color: var(--ink2); }
.uh h1 { margin: 0; font: 800 26px/1.3 var(--serif); }
.uh p { margin: 2px 0 6px; color: var(--ink2); font-size: 13px; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; }
.uh-a { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.ugrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.c4 { grid-column: span 4; }
.c6 { grid-column: span 6; }
.c12 { grid-column: 1 / -1; }
.money { width: 100%; border-collapse: collapse; font-size: 14px; }
.money th { text-align: left; font-weight: 400; padding: 4px 0; }
.money th small { color: var(--ink3); font-size: 11.5px; margin-left: 2px; }
.money td { text-align: right; padding: 4px 0; font-variant-numeric: tabular-nums; }
.money .sum th, .money .sum td { border-top: 1.5px solid var(--ink); font-weight: 800; padding-top: 8px; }
.span { display: flex; gap: 8px; align-items: baseline; font-size: 16px; margin: 0; }
.span span { color: var(--ink3); }
.tl { margin: 26px 0 4px; }
.tl-bar { position: relative; height: 14px; border: 1.5px solid var(--ink); background: var(--sheet); }
.tl-win { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(45deg, var(--brickbg) 0 4px, transparent 4px 8px); border-left: 1px dashed var(--brick); border-right: 1px dashed var(--brick); }
.tl-now { position: absolute; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; background: var(--brick); }
.tl-now span { position: absolute; top: -17px; left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--brick); font-weight: 700; white-space: nowrap; }
.tl-lab { display: flex; justify-content: space-between; gap: 6px; font: 700 11px var(--mono); color: var(--ink2); margin-top: 5px; }
.tl-lab span:nth-child(2) { color: var(--brick); }
.next { background: var(--paper); border: 1px dashed var(--ink); padding: 8px 10px; font-size: 13px; margin-top: 12px; }
.log li { display: grid; grid-template-columns: 128px minmax(0, 1fr) auto; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--rule); font-size: 13px; }
.log li:last-child { border-bottom: 0; }
.log time { font: 700 12px var(--mono); color: var(--ink2); }
.log small { color: var(--ink3); font-size: 12px; }
.logf { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.logf input { flex: 1; min-width: 0; border: 1px solid var(--rule); background: #fff; padding: 6px 10px; }
.logf .err { flex-basis: 100%; }

/* 계약 만기 */
.tlw { margin-bottom: 4px; }
.xt { position: relative; padding-top: calc(var(--lanes) * 26px + 8px); margin: 0 14px 0 4px; }
.xt-band { position: absolute; left: 0; right: 0; top: 0; bottom: 22px; }
.xt-band i { position: absolute; top: 0; bottom: 0; left: 0; }
.xt-band i:nth-child(1) { background: rgba(165, 67, 43, .16); }
.xt-band i:nth-child(2) { background: rgba(165, 67, 43, .09); }
.xt-band i:nth-child(3) { background: rgba(165, 67, 43, .045); }
.xt-axis { position: relative; height: 22px; border-top: 2px solid var(--ink); font: 700 11px var(--mono); color: var(--ink2); }
.xt-axis span { position: absolute; top: 5px; transform: translateX(-50%); white-space: nowrap; }
.xt-axis span::before { content: ''; position: absolute; top: -9px; left: 50%; height: 6px; border-left: 1px solid var(--ink); }
.xt-axis .now { left: 0; transform: none; color: var(--brick); }
.xt-axis .now::before { left: 0; }
.mk { position: absolute; bottom: 22px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; text-decoration: none; z-index: 1; }
.mk::after { content: ''; width: 1px; height: calc(var(--l) * 26px + 4px); background: var(--ink); }
.mk b { font: 700 11px/1.5 var(--mono); padding: 0 4px; border: 1px solid var(--ink); background: var(--sheet); }
.mk:hover b { outline: 2px solid var(--ink); }
.m-30 b { background: var(--brick); color: #fff; border-color: var(--brick); }
.m-90 b { background: var(--brickbg); border-color: var(--brick); color: var(--brick); }
.m-win b { border-style: dashed; border-color: var(--brick); }
.m-ok b { background: var(--ink); color: var(--paper); }
.m-far b { color: var(--ink2); border-color: var(--ink3); }
.exp select { border: 1px solid var(--rule); background: #fff; padding: 3px 6px; font-size: 12.5px; }
.exp .c-memo input { width: 100%; min-width: 120px; border: 1px solid transparent; background: transparent; padding: 3px 6px; font-size: 12.5px; }
.exp .c-memo input:hover, .exp .c-memo input:focus { border-color: var(--rule); background: #fff; }

/* 관리비 */
.fees-top { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; align-items: start; }
.fees td b { display: block; }
.fees input { width: 130px; text-align: right; border: 1px solid #BFB6A4; background: #fff; padding: 4px 8px; }
.fees input.bad { border-color: var(--brick); box-shadow: 0 0 0 1px var(--brick); }
.fees .err { text-align: right; }
.alloc tr.vac td { color: var(--ink3); background: var(--hatch); }
.alloc tfoot tr td { border-top: 1px solid var(--rule); font-weight: 400; }
.alloc tfoot tr:first-child td { border-top: 2px solid var(--ink); }
.alloc tfoot tr.sum td { border-top: 2px solid var(--ink); font-weight: 800; }

/* 고지서 */
.ntool { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.ntool .btn.pri { margin-left: auto; }
.sel select { border: 1px solid var(--ink); background: var(--sheet); padding: 6px 10px; font-weight: 700; font-size: 13px; }
.sheets { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.sheet { position: relative; width: 100%; max-width: 794px; background: #FFFDF8; color: #232527; padding: 40px 46px 30px; box-shadow: 0 1px 0 var(--rule), 0 12px 32px rgba(43, 45, 47, .13); overflow: hidden; }
.sh-h { display: flex; justify-content: space-between; align-items: center; border-bottom: 3px double var(--ink); padding-bottom: 12px; }
.sh-brand { display: flex; gap: 10px; align-items: center; }
.sh-brand .mark { width: 40px; height: 40px; }
.sh-brand b { display: block; font: 800 20px/1.2 var(--serif); }
.sh-brand small { font-size: 11.5px; color: var(--ink2); }
.sh-no { font: 700 12px var(--mono); color: var(--ink2); }
.sh-t { text-align: center; font: 800 24px/1.3 var(--serif); margin: 22px 0 16px; letter-spacing: -.01em; }
.sh-who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-left: 1px solid var(--rule); margin: 0; }
.sh-who div { padding: 6px 10px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.sh-who dt { font-size: 11px; color: var(--ink2); }
.sh-who dd { margin: 0; font-weight: 700; font-size: 13.5px; }
.sh-due { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; border: 2px solid var(--ink); padding: 12px 16px; margin: 14px 0; background: var(--paper); }
.sh-due span { font-weight: 700; }
.sh-due b { font-size: 28px; font-weight: 800; letter-spacing: -.01em; }
.sh-due b small { font-size: 15px; margin-left: 2px; }
.sh-due em { font-style: normal; color: var(--brick); font-size: 12.5px; font-weight: 700; margin-left: auto; }
.sh-tb { width: 100%; border-collapse: collapse; font-size: 13px; }
.sh-tb th, .sh-tb td { padding: 6px 8px; border-bottom: 1px solid var(--rule2); text-align: left; }
.sh-tb thead th { font-size: 11.5px; color: var(--ink2); border-bottom: 1.5px solid var(--ink); font-weight: 700; }
.sh-tb .r { text-align: right; font-variant-numeric: tabular-nums; }
.sh-tb td small, .sh-tb th small { color: var(--ink3); font-size: 11px; font-weight: 400; margin-left: 3px; }
.sh-tb .grp th { background: var(--paper); font-size: 12.5px; border-top: 1px solid var(--ink); }
.sh-tb .sub td { border-top: 1px solid var(--ink); font-weight: 700; }
.sh-tb tfoot td { font-weight: 700; }
.sh-tb tfoot .hot td { color: var(--brick); }
.sh-tb .tot td { border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); font-size: 16px; font-weight: 800; }
.sh-low { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin-top: 18px; }
.sh-tr > b { font-size: 12px; color: var(--ink2); }
.bars { display: flex; align-items: flex-end; gap: 8px; height: 96px; margin-top: 6px; border-bottom: 1px solid var(--ink); }
.bars div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; position: relative; }
.bars i { display: block; width: 70%; background: var(--ink3); }
.bars div:last-child i { background: var(--brick); }
.bars b { font-size: 10px; font-weight: 700; margin-bottom: 2px; }
.bars span { position: absolute; bottom: -17px; font-size: 10.5px; color: var(--ink2); }
.sh-pay { margin: 0; font-size: 13px; }
.sh-pay div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; padding: 5px 0; border-bottom: 1px dashed var(--rule); }
.sh-pay dt { color: var(--ink2); font-size: 12px; }
.sh-pay dd { margin: 0; font-weight: 700; }
.sh-f { margin-top: 30px; border-top: 1px solid var(--rule); padding-top: 8px; font-size: 11.5px; color: var(--ink2); }
.wm { position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%) rotate(-16deg); font: 800 96px var(--serif); color: rgba(165, 67, 43, .11); pointer-events: none; white-space: nowrap; }

/* 모달 */
.ov { position: fixed; inset: 0; background: rgba(30, 31, 32, .48); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 50; }
body.modal-open { overflow: hidden; }
.modal { background: var(--sheet); width: 100%; max-width: 520px; max-height: calc(100vh - 32px); overflow: auto; border: 2px solid var(--ink); box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
.modal.wide { max-width: 660px; }
.modal > header { display: flex; justify-content: space-between; align-items: center; padding: 13px 18px; border-bottom: 1px solid var(--rule); position: sticky; top: 0; background: var(--sheet); z-index: 1; }
.modal h2 { margin: 0; font: 800 17px var(--serif); }
.modal h3 { font: 800 14px var(--serif); margin: 14px 0 10px; border-top: 1px solid var(--rule); padding-top: 12px; }
.modal h3 small { font: 400 12px var(--sans); color: var(--ink3); margin-left: 4px; }
.x { background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px; color: var(--ink2); }
.mb { padding: 16px 18px; }
.mf { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.f { display: block; margin-bottom: 12px; min-width: 0; }
.f > span { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink2); margin-bottom: 4px; }
.f input, .f select, .draft textarea { width: 100%; border: 1px solid #BFB6A4; background: #fff; padding: 8px 10px; border-radius: 0; }
.f input:focus, .f select:focus, .draft textarea:focus, .fees input:focus, .logf input:focus { outline: 2px solid var(--ink); outline-offset: -1px; }
.f input.bad, .f select.bad { border-color: var(--brick); box-shadow: 0 0 0 1px var(--brick); }
.f input:disabled { background: #EEE9DF; color: var(--ink3); }
.f small { display: block; color: var(--ink3); font-size: 12px; margin-top: 3px; }
.err { display: block; font-style: normal; color: var(--brick); font-size: 12px; margin-top: 3px; font-weight: 700; }
.err:empty { display: none; }
.f2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; }
.won { position: relative; display: block; }
.won input { padding-right: 30px; text-align: right; }
.won i { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--ink3); }
.calc { background: var(--paper); padding: 8px 10px; font-size: 12.5px; margin: 0; line-height: 1.6; }
.demo-note { background: var(--ink); color: #EDE6D8; font-size: 12.5px; padding: 7px 10px; margin: 0 0 12px; }
.draft { border: 1px solid var(--rule); padding: 12px; margin-bottom: 12px; background: #fff; }
.dh { display: flex; justify-content: space-between; gap: 4px 10px; flex-wrap: wrap; margin-bottom: 8px; }
.dh span { font-size: 12px; color: var(--ink2); }
.draft .seg { margin-bottom: 8px; flex-wrap: wrap; }
.seg.sm button { padding: 4px 10px; font-size: 12px; }
.draft textarea { font: 13px/1.6 var(--sans); resize: vertical; }
.df { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: 12px; color: var(--ink2); margin-top: 6px; }
.df .link { margin-left: auto; }
.toast { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 12px); background: var(--ink); color: var(--paper); padding: 10px 16px; font-size: 13.5px; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; z-index: 60; max-width: calc(100vw - 32px); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* 좁은 데스크톱·태블릿 */
@media screen and (max-width: 1180px) {
  .plan-wrap { grid-template-columns: minmax(0, 1fr); }
  .side-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c4 { grid-column: span 6; }
  .fees-top { grid-template-columns: minmax(0, 1fr); }
}

/* 모바일 */
@media screen and (max-width: 760px) {
  .hm { display: none; }
  .app { grid-template-columns: minmax(0, 1fr); min-height: 0; background: none; }
  .side { position: static; height: auto; padding: 12px 16px 0; gap: 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .logo { padding: 0; }
  .logo .mark { width: 30px; height: 30px; }
  .logo b { font-size: 17px; }
  .logo small { font-size: 11px; }
  #nav { grid-column: 1 / -1; flex-direction: row; margin: 0 -16px; border-top: 1px solid rgba(255, 255, 255, .1); }
  #nav a { flex: 1; justify-content: center; gap: 4px; padding: 10px 2px 9px; border-left: 0; border-bottom: 3px solid transparent; font-size: 13px; white-space: nowrap; }
  #nav a[aria-current=page] { border-bottom-color: var(--brick2); background: none; }
  .bld, .role-note, #today { display: none; }
  .who { grid-row: 1; grid-column: 2; margin: 0; padding: 0; }
  .who select { width: auto; max-width: 150px; font-size: 12.5px; padding: 6px; }
  #main { padding: 16px 16px 40px; }
  .ph { flex-direction: column; align-items: stretch; gap: 10px; }
  .ph h1, .uh h1 { font-size: 22px; }
  .mp { justify-content: space-between; }
  .plan-wrap { gap: 14px; }
  .plans { padding: 10px 8px 4px; background-size: 12px 12px; }
  .legend { margin-left: 0; gap: 4px 10px; font-size: 11.5px; }
  .floor { grid-template-columns: 26px minmax(0, 1fr); gap: 5px; margin-bottom: 6px; }
  .fl b { font-size: 14px; }
  .fl small { font-size: 9.5px; }
  .row.back { height: 46px; }
  .row.front { height: 54px; }
  .corr { height: 7px; }
  .u { padding: 2px 4px 3px; }
  .u .no { font-size: 11.5px; }
  .u .nm { font-size: 10.5px; }
  .u .meta { font-size: 9.5px; }
  .u::before { width: 7px; height: 7px; right: 3px; }
  .row.back .u .meta { padding-right: 8px; }
  .core { padding: 3px; gap: 3px; }
  .core span { font-size: 7.5px; }
  .street { margin-left: 31px; }
  .side-col { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats > * { border-bottom: 1px solid var(--rule); padding: 10px 12px; }
  .stats > *:nth-child(2n) { border-right: 0; }
  .stats > *:nth-last-child(-n+2) { border-bottom: 0; }
  .stats b { font-size: 18px; }
  .search { margin-left: 0; width: 100%; }
  .search input { width: 100%; }
  .tools .btn { width: 100%; }
  .chip { padding: 4px 8px; font-size: 12.5px; }
  .uh { grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
  .uh-no { width: 62px; height: 62px; }
  .uh-no b { font-size: 21px; }
  .uh-a { grid-column: 1 / -1; justify-content: flex-start; }
  .uh-a .pn { margin-left: auto; }
  .ugrid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .c4, .c6, .c12 { grid-column: auto; }
  .card { padding: 14px; }
  .log li { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; }
  .log time { grid-column: 1 / -1; }
  .fees input { width: 112px; }
  .ntool .btn.pri { margin-left: 0; }
  .sheet { padding: 20px 16px; }
  .sh-t { font-size: 19px; }
  .sh-who { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sh-due b { font-size: 22px; }
  .sh-due em { margin-left: 0; }
  .sh-low { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .wm { font-size: 60px; }
  .ov { align-items: flex-end; padding: 0; }
  .modal { max-height: 92vh; border-width: 2px 0 0; }
  .f2 { grid-template-columns: minmax(0, 1fr); }
  .xt { margin-right: 10px; }
  /* 표 → 카드 */
  .tbl.cards, .tbl.cards tbody { display: block; background: transparent; }
  .tbl.cards thead, .tbl.cards tfoot { display: none; }
  .tbl.cards tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 14px; padding: 11px 12px; border: 1px solid var(--rule); border-top: 0; background: var(--sheet); }
  .tbl.cards tr:first-child { border-top: 1px solid var(--rule); }
  .tbl.cards td { display: block; border: 0; padding: 0; text-align: left; background: none !important; }
  .tbl.cards td[data-l]::before { content: attr(data-l); color: var(--ink3); font-size: 11.5px; margin-right: 5px; font-weight: 400; }
  .tbl.cards td[data-l=""]::before { display: none; }
  .tbl.cards td { order: 1; font-size: 12px; color: var(--ink2); }
  .tbl.cards td.ck:empty { display: none; }
  .tbl.cards .ck { order: -4; width: auto; }
  .tbl.cards .c-main { order: -3; }
  .tbl.cards .c-name { order: -2; flex: 1 1 40%; min-width: 0; font-size: 13.5px; color: var(--ink); }
  .tbl.cards .c-st { order: -1; margin-left: auto; color: var(--ink); }
  .tbl.cards .c-st::before { display: none; }
  .tbl.cards .c-k { order: 0; font-size: 13.5px; color: var(--ink); }
  .tbl.cards .c-deps, .tbl.cards .c-memo { order: 2; color: var(--ink); }
  .tbl.cards .c-act { order: 3; }
  .tbl.cards .c-name small { display: block; }
  .tbl.cards td small { display: inline; margin-left: 4px; }
  .tbl.cards .c-act, .tbl.cards .c-deps, .tbl.cards .c-memo { flex-basis: 100%; text-align: left; }
  .tbl.cards .c-act:empty { display: none; }
  .tbl.cards .c-deps { min-width: 0; white-space: normal; }
  .tbl.cards .c-act .btn { padding: 5px 14px; }
  .is-late td:first-child { box-shadow: none; }
  .tbl.cards tr.is-late { box-shadow: inset 3px 0 0 var(--brick); }
  .exp .c-memo input { border-color: var(--rule); background: #fff; }
}

/* 인쇄: 고지서만 */
@media print {
  @page { size: A4; margin: 10mm; }
  body { background: #fff; }
  .no-print, .side, .demo, .toast, .ov { display: none !important; }
  .app { display: block; background: none; min-height: 0; }
  #main { padding: 0; }
  .sheets { display: block; }
  .sheet { box-shadow: none; max-width: none; padding: 0; break-after: page; page-break-after: always; }
  .sheet { break-inside: avoid; font-size: 12px; }
  .sh-h { padding-bottom: 8px; }
  .sh-t { font-size: 21px; margin: 12px 0 10px; }
  .sh-who div { padding: 4px 8px; }
  .sh-due { padding: 8px 14px; margin: 10px 0; }
  .sh-due b { font-size: 24px; }
  .sh-tb { font-size: 12px; }
  .sh-tb th, .sh-tb td { padding: 4px 6px; }
  .sh-low { margin-top: 12px; }
  .bars { height: 74px; }
  .sh-f { margin-top: 22px; }
  .sheet:last-child { break-after: auto; page-break-after: auto; }
}
@media screen and (max-width: 760px) { .pays .c-main { flex: 1 1 50%; } }
@media screen and (max-width: 760px) {
  .xt-axis span.odd { display: none; }
  .tbl.cards .c-memo:has(input:placeholder-shown) { display: none; }
  .sh-tb thead th { white-space: nowrap; }
}
.sh-due.done em { color: var(--ink); border: 1.5px solid var(--ink); padding: 0 8px; }