/* Layout: one narrow working column under a flat top bar. Monotone, square, 2px rules, pixel labels. Progress = segmented bars. */

* { box-sizing: border-box; border-radius: 0 !important; }
html, body { background: var(--bg); color: var(--fg); }
body { margin: 0; font-family: var(--body); font-size: 16px; line-height: 1.5; } /* 도스 글꼴은 16px 비트맵 격자에서 가장 선명하다 */
h1, h2, h3, p { margin: 0; }
h1, h2 { text-wrap: balance; }
h1 { font-size: 1.5rem; font-weight: 700; line-height: 1.3; }
h2 { font-size: 1rem; font-weight: 700; }
.ptitle { font-family: var(--pixel); font-weight: 400; text-transform: uppercase; font-size: 2rem; line-height: 1.1; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; letter-spacing: .02em; }
.ptitle small { font-family: var(--body); font-size: .9rem; font-weight: 400; color: var(--mid); letter-spacing: 0; text-transform: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px dashed var(--fg); outline-offset: 2px; }
.px { font-family: var(--pixel); letter-spacing: .02em; }
.mid { color: var(--mid); }
.small { font-size: .8rem; }
.num { font-variant-numeric: tabular-nums; }
.label { font-family: var(--pixel); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--mid); }

/* top bar */
.top { border-bottom: var(--bw) solid var(--line); background: var(--bg); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; }
.top-in { max-width: 980px; margin: 0 auto; padding: 10px 16px; display: flex; gap: 6px 20px; align-items: center; flex-wrap: wrap; }
.brand { font-family: var(--logo); letter-spacing: .12em; }
.logo { font-family: var(--logo); font-size: 1rem; text-decoration: none; }
.tabs { display: flex; gap: 2px; }
.logo { letter-spacing: .14em; }
.orgbtn { text-decoration: none; font-weight: 700; border: var(--bw) solid var(--line); padding: 3px 10px; background: var(--paper); white-space: nowrap; }
.orgbtn:hover { background: var(--hover); }
.tabs a { text-decoration: none; padding: 4px 10px; border: 2px solid transparent; }
.tabs a:hover { border-color: var(--faint); }
.tabs a.on { border-color: var(--line-hi); background: var(--fg); color: var(--bg); }

.page { max-width: 980px; margin: 0 auto; padding: 28px 16px 80px; display: flex; flex-direction: column; gap: 28px; }
/* 꼬리말: 내용이 짧아도 화면 맨 아래 (길면 내용 끝) */
#app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
#app > main.page { flex: 1 0 auto; width: 100%; box-sizing: border-box; padding-bottom: 20px; }
.footbar { margin-top: auto; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.box { border: var(--bw) solid var(--line); background: var(--paper); padding: 16px; min-width: 0; }
.rule { border-top: var(--bw) solid var(--line); }
.hair { border-top: 1px solid var(--faint); }

/* controls */
.btn { border: var(--bw) solid var(--line); background: var(--paper); padding: 5px 12px; cursor: pointer; font-weight: 700; white-space: nowrap; text-decoration: none; display: inline-block; line-height: 1.4; }
.btn:hover { background: var(--hover); }
.btn:active { transform: translate(1px, 1px); }
.btn.solid { background: var(--fg); color: var(--bg); box-shadow: 3px 3px 0 var(--faint); }
.btn.solid:hover { filter: contrast(1.2); }
.btn.ghost { border-color: transparent; background: transparent; font-weight: 400; color: var(--mid); }
.btn.ghost:hover { color: var(--fg); background: transparent; text-decoration: underline; }
.btn.sm { padding: 1px 8px; font-size: .8rem; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
input[type=text], input[type=date], textarea, select {
  background: var(--paper); border: var(--bw) solid var(--line); padding: 6px 10px; width: 100%; color: var(--fg); }
input.bare { border: 0; border-bottom: 1px dashed var(--faint); padding: 4px 2px; background: transparent; }
input.bare:focus { border-bottom-color: var(--line-hi); outline: none; }
textarea { resize: vertical; min-height: 80px; }
label.f { display: flex; flex-direction: column; gap: 4px; }
input[type=checkbox] { appearance: none; width: 16px; height: 16px; border: var(--bw) solid var(--line); background: var(--paper); margin: 0; cursor: pointer; flex: none; display: grid; place-items: center; }
input[type=checkbox]:checked { background: var(--fg); }
input[type=checkbox]:checked::after { content: ""; width: 6px; height: 6px; background: var(--bg); }

/* segmented progress bar: IIIIIIIII */
.seg { display: flex; gap: 2px; height: 14px; align-items: stretch; min-width: 0; }
.seg i { flex: 1 1 0; min-width: 2px; background: var(--faint); }
.seg i.d { background: var(--fg); }
.seg i.w { --c: var(--fg); --s: 2px; --p: 6px; background: repeating-linear-gradient(180deg, var(--c) 0 var(--s), transparent var(--s) var(--p)); }
.seg.lg { height: 22px; gap: 3px; }
.seg.sm { height: 10px; }
/* 진행 중 = 줄 3개 (높이 = 2 × 간격 + 줄 굵기): 14px 2/6 · 22px 4/9 · 10px 2/4 */
.seg.lg i.w { --s: 4px; --p: 9px; }
.seg.sm i.w { --p: 4px; }
.segrow { display: grid; grid-template-columns: minmax(0, 1fr) 4.5em; gap: 10px; align-items: center; }
.pct { font-family: var(--pixel); text-align: right; font-size: .85rem; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .75rem; color: var(--mid); }
.legend span::before { content: ""; display: inline-block; width: 8px; height: 10px; margin-right: 5px; vertical-align: -1px; background: var(--faint); }
.legend .d::before { background: var(--fg); }
.legend .w::before { background: repeating-linear-gradient(180deg, var(--fg) 0 2px, transparent 2px 4px); }

/* people tag */
.tag { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 4px; border: var(--bw) solid var(--line); font-family: var(--pixel); font-size: .7rem; background: var(--paper); }
.tag.on { background: var(--fg); color: var(--bg); }
button.tag { cursor: pointer; }
.tag.off { border-color: var(--faint); color: var(--mid); }

/* project cards */
.plist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pcard { text-decoration: none; display: flex; flex-direction: column; gap: 12px; }
.pcard:hover { box-shadow: 4px 4px 0 var(--fg); transform: translate(-2px, -2px); }
.pcard .goal { color: var(--mid); font-size: .85rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.newcard { border: 2px dashed var(--mid); display: grid; place-items: center; min-height: 160px; text-decoration: none; color: var(--mid); }
.newcard:hover { color: var(--fg); border-color: var(--line-hi); }

/* process + tasks */
.proc { border: var(--bw) solid var(--line); background: var(--paper); }
.proc-h { display: grid; grid-template-columns: 1.6em minmax(0, 12em) minmax(0, 1fr) 4.5em auto; gap: 12px; align-items: center; padding: 10px 12px; cursor: pointer; user-select: none; }
.proc-h:hover { background: var(--hover); }
.proc-h .caret { font-family: var(--pixel); }
.proc-h .nm b { font-family: var(--pixel); font-weight: 400; font-size: .95rem; }
.proc-h .nm span { color: var(--mid); font-size: .8rem; margin-left: 6px; }
.proc-b { border-top: var(--bw) solid var(--line); }
.task { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--faint); }
.task:hover { background: var(--hover); }
.task .t { text-decoration: none; min-width: 0; overflow-wrap: anywhere; }
.task .t:hover { text-decoration: underline; }
.task .st { font-family: var(--pixel); font-size: .7rem; color: var(--mid); white-space: nowrap; }
.task .meta { display: flex; gap: 4px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.due { font-size: .75rem; color: var(--mid); white-space: nowrap; }
.due.late { color: var(--fg); font-weight: 700; text-decoration: underline; }
.addline { display: flex; gap: 8px; padding: 8px 12px; align-items: center; }
.ptools { display: flex; gap: 2px; }
.filters { display: flex; gap: 0; border: var(--bw) solid var(--line); width: fit-content; }
.filters button { border: 0; background: var(--paper); padding: 3px 12px; cursor: pointer; }
.filters button + button { border-left: var(--bw) solid var(--line); }
.filters button.on { background: var(--fg); color: var(--bg); }
.filters .step { padding: 3px 12px; background: var(--paper); font-size: .9rem; white-space: nowrap; }
.filters .step + .step { border-left: var(--bw) solid var(--line); }
.filters .step.on { background: var(--fg); color: var(--bg); font-weight: 700; }
.filters .step.past { color: var(--mid); }

/* status switch */
.sw { display: flex; border: var(--bw) solid var(--line); width: fit-content; }
.sw button { border: 0; background: var(--paper); padding: 4px 14px; cursor: pointer; font-family: var(--pixel); font-size: .8rem; }
.sw button + button { border-left: var(--bw) solid var(--line); }
.sw button.on { background: var(--fg); color: var(--bg); }

/* templates */
.tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.tpl { border: 2px solid var(--faint); background: var(--paper); padding: 12px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.tpl:hover { border-color: var(--mid); }
.tpl.on { border-color: var(--line-hi); box-shadow: 3px 3px 0 var(--fg); }
.preview-procs { display: flex; flex-wrap: wrap; gap: 6px; }
.preview-procs span { border: 1px solid var(--line); padding: 1px 8px; font-family: var(--pixel); font-size: .75rem; }

.grid2 { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.toast { position: fixed; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); background: var(--fg); color: var(--bg); padding: 8px 16px; font-size: .85rem; z-index: 50; border: var(--bw) solid var(--line); box-shadow: 3px 3px 0 var(--faint); max-width: calc(100% - 32px); }
.note { border: 2px dashed var(--fg); padding: 10px 14px; font-size: .85rem; }
.task.mine { box-shadow: inset 4px 0 0 var(--fg); }
.task.linkrow { grid-template-columns: auto minmax(0, 1fr) auto; }
.linkmain { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-decoration: none; overflow-wrap: anywhere; }
.linkmain:hover b { text-decoration: underline; }
@media (max-width: 560px) { .task.linkrow { grid-template-columns: auto minmax(0, 1fr); } .task.linkrow > .row { grid-column: 1 / -1; justify-content: flex-end; } }
.task button.task, button.task:hover { background: var(--hover); }
.btn.provider { width: 100%; text-align: center; padding: 10px; }
.weekcal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: var(--bw) solid var(--line); }
.calday { min-height: 7.5em; padding: 6px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.calday + .calday { border-left: 1px solid var(--faint); }
.calday.today { background: var(--paper); box-shadow: inset 0 3px 0 var(--org); }
.calhead { display: flex; gap: 6px; align-items: baseline; }
.calday.today .calhead { font-weight: 700; }
.calday.weekend .calhead { color: var(--mid); }
.calitem { display: flex; flex-direction: column; border: var(--bw) solid var(--line); padding: 2px 5px; text-decoration: none; color: inherit; font-size: .85rem; line-height: 1.3; min-width: 0; }
.calitem:hover { background: var(--hover); }
.calitem.oc { border-left: 5px solid var(--c-l); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .calitem.oc { border-left-color: var(--c-d); } }
:root[data-theme="dark"] .calitem.oc { border-left-color: var(--c-d); }
.weekcal.multi .calday { border-top: 1px solid var(--faint); min-height: 6em; }
.weekcal.multi .calday:nth-child(7n + 1) { border-left: 0; }
.calitem .ct { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.calitem .cp { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calitem.low { color: var(--mid); border-color: var(--mid); }
.calitem.done { color: var(--mid); border-color: var(--faint); }
.calitem.done .ct { text-decoration: line-through; }
@media (max-width: 720px) {
  .weekcal { grid-template-columns: minmax(0, 1fr); }
  .calday { min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .calday + .calday { border-left: 0; border-top: 1px solid var(--faint); }
  .calhead { width: 5.5em; flex: none; }
  .calday.none:not(.today) { display: none; }
  .calitem { flex: 1 1 10em; }
}
.pchip { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.pchip.pm { font-weight: 700; }
.pchip .pmmark { font-size: .7rem; padding: 0 4px; }
.peoplerow { display: grid; grid-template-columns: 5.5em minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 28px; }
.btn.plus { width: 28px; height: 28px; padding: 0; font-weight: 700; line-height: 1; }
.ideas { display: grid; grid-template-columns: repeat(auto-fill, minmax(14em, 1fr)); gap: 8px; }
.idea { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: inherit; border-style: dashed; padding: 10px 12px; min-width: 0; }
.idea:hover { border-style: solid; }
.idea .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pplfold { align-self: flex-start; display: inline-flex; gap: 6px; align-items: center; padding: 2px 6px; color: var(--mid); font-weight: 400; }
.pplfold:hover { color: var(--fg); }
.pplfold .tri { font-size: .7rem; transition: transform .12s; }
.pplfold.on .tri { transform: rotate(180deg); }
.ppl { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; min-height: 24px; }
.ppl .pchip { font-size: .85rem; }
.peekbtn { padding: 0 6px; display: inline-flex; gap: 2px; align-items: center; }
.peekbtn .tri { display: inline-block; font-size: .7rem; transition: transform .12s; }
.peekbtn.on .tri { transform: rotate(180deg); }
.clpeek { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 2px; padding: 0 0 4px 24px; }
.clpeek .ci { display: flex; gap: 6px; align-items: baseline; font-size: .85rem; min-width: 0; }
.clpeek .ci .ct { min-width: 0; overflow-wrap: anywhere; }
.clpeek .ci.done { color: var(--mid); }
.clpeek .ci.done .ct { text-decoration: line-through; }
.statrow { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5em, 1fr)); gap: 0; border: var(--bw) solid var(--line); }
.statrow .stat { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-right: 1px solid var(--faint); border-bottom: 1px solid var(--faint); }
.statrow .stat b { font-size: 1.25rem; }
.recent { display: flex; align-items: stretch; gap: 4px; }
.recent > .btn:first-child { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: center; text-align: left; padding: 6px 10px; white-space: normal; }
.recent > .btn:first-child > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent > .btn:first-child > .small { grid-column: 1; font-weight: 400; }
.recent > .btn:first-child > .px { grid-column: 2; grid-row: 1 / 3; }
.who.here span.small { text-decoration: underline; }
.topright { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
.iconbtn { width: 30px; height: 30px; display: grid; place-items: center; border: 2px solid transparent; background: transparent; color: var(--fg); cursor: pointer; padding: 0; }
.iconbtn:hover { border-color: var(--line-hi); }
.who { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.who .role { font-family: var(--pixel); font-size: .7rem; border: 1px solid var(--line); padding: 0 5px; }
.empty { border: 2px dashed var(--faint); padding: 20px; text-align: center; color: var(--mid); }
.crumb { font-size: .8rem; color: var(--mid); }
.crumb a { text-decoration: none; } .crumb a:hover { text-decoration: underline; }
.logline { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--faint); }

/* process cards */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; align-items: start; }
.pcard2 { border: var(--bw) solid var(--line); background: var(--paper); padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pcard2 h2 { font-size: 1rem; }
.pcard2 .tlist { display: flex; flex-direction: column; border-top: 1px solid var(--faint); }
.pcard2 .ptools { border-top: 1px dashed var(--faint); padding-top: 6px; margin-top: 2px; }
.donehead { border-top: 1px dashed var(--faint); margin-top: 4px; padding-top: 6px; font-size: .7rem; color: var(--mid); }
.badge { font-family: var(--pixel); font-size: .7rem; background: var(--fg); color: var(--bg); padding: 1px 6px; letter-spacing: .06em; }
.task.compact.mine { box-shadow: none; }
@media (hover: hover) {
  .pcard2 .ptools { opacity: 0; transition: opacity .15s; }
  .pcard2:hover .ptools, .pcard2:focus-within .ptools { opacity: 1; }
}
.newproc { border: 2px dashed var(--faint); padding: 14px; display: flex; flex-direction: column; gap: 8px; min-height: 120px; justify-content: center; }
.newproc:focus-within { border-color: var(--line-hi); }
.task.compact { grid-template-columns: 16px minmax(0, 1fr) auto auto; padding: 7px 0; gap: 8px; }
.task.compact .meta { flex-wrap: nowrap; }
.doing { font-size: .7rem; border: 1px solid currentColor; padding: 0 5px; white-space: nowrap; line-height: 1.5; }
.logline.sys span:nth-child(2) { color: var(--mid); }
/* 체크리스트: 누가 언제 체크했는지 */
.clrow { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--faint); }
/* 자료 카드 */
.phead { text-decoration: none; min-width: 0; }
.phead:hover h2 { text-decoration: underline; }
.ptable td, .ptable th { padding: 8px 10px; }
.ptable tr.donerow td, .ptable tr.donerow .t { color: var(--mid); }
.ptable tr.donerow .t { text-decoration: line-through; }
.ptable tr.donerow .tag { border-color: var(--mid); color: var(--mid); }
.ptable tr.donerow .tag.on { background: var(--mid); color: var(--bg); }
.ptable .t { text-decoration: none; } .ptable .t:hover { text-decoration: underline; }
.filters.cats { flex-wrap: wrap; }
.filters.cats button { font-size: .8rem; padding: 3px 10px; }
.filters.cats button:disabled { color: var(--faint); cursor: default; }
.filters.cats button .num { color: inherit; opacity: .7; margin-left: 2px; }
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.mcard { border: var(--bw) solid var(--line); background: var(--paper); padding: 10px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 6px; min-height: 130px; min-width: 0; font: inherit; color: inherit; }
.mcard:hover { box-shadow: 3px 3px 0 var(--fg); transform: translate(-1px, -1px); }
.mcard.pinned { box-shadow: 3px 3px 0 var(--faint); }
.mhead { overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mbody { font-size: .8rem; color: var(--mid); overflow-wrap: anywhere; white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mkind { font-size: .7rem; border: 1px solid var(--line); padding: 0 6px; width: fit-content; }
.pin { font-family: var(--pixel); font-size: .65rem; background: var(--fg); color: var(--bg); padding: 0 5px; letter-spacing: .06em; }
.overlay { position: fixed; inset: 0; background: color-mix(in srgb, var(--bg) 70%, transparent); display: grid; place-items: center; padding: 16px; z-index: 40; }
.modal { background: var(--paper); border: var(--bw) solid var(--line); box-shadow: 6px 6px 0 var(--fg); width: min(560px, 100%); max-height: 85vh; overflow: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.modal:focus { outline: none; }
.modal.wide { width: min(1000px, 100%); max-height: 90vh; }
.mtext { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
/* 자료 (예전) */
.mitem { display: grid; grid-template-columns: 3.2em minmax(0, 1fr) auto; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--faint); align-items: start; }
.filepick { border: 2px dashed var(--mid); padding: 10px; cursor: pointer; display: block; color: var(--mid); }
.filepick:hover, .filepick:focus-within { border-color: var(--line-hi); color: var(--fg); }
.filepick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.task.done .doing.review { color: var(--fg); border-color: var(--line-hi); }
.pri { margin-right: 6px; border: var(--bw) solid var(--line); padding: 0 4px; font-size: .75rem; line-height: 1; display: inline-block; }

/* 덜 강조: 끝났거나 우선순위가 낮은 것은 회색으로 */
.dim { color: var(--mid); }
.dim .seg i.d { background: var(--mid); }
.dim .seg i.w { --c: var(--mid); }
.dim .seg i { background: color-mix(in srgb, var(--faint) 45%, transparent); }
.dim .tag, .task.dim .tag { border-color: var(--faint); color: var(--mid); background: transparent; }
.dim .tag.on { background: var(--faint); color: var(--fg); }
.task.dim .t { color: var(--mid); }
.task.dim input[type=checkbox] { border-color: var(--mid); }
.task.dim input[type=checkbox]:checked { background: var(--mid); }
.task.high .t { font-weight: 700; }
/* 완료한 일: 회색 + 취소선. 체크박스도 회색이지만 꽉 찬 상태로 클릭 가능, 마우스를 올리면 원래 대비로 */
.task.done .t, .task.done .due, .task.done .st { color: var(--mid); }
.task.done .t { text-decoration: line-through; text-decoration-thickness: 1px; }
.task.done input[type=checkbox] { border-color: var(--mid); }
.task.done input[type=checkbox]:checked { background: var(--mid); }
.task.done input[type=checkbox]:hover { border-color: var(--line-hi); }
.ck-done { border-color: var(--mid) !important; }
.ck-done:checked { background: var(--mid) !important; }
.task.done .tag { border-color: var(--mid); color: var(--mid); }
.task.done .tag.on { background: var(--mid); color: var(--bg); }
.task.done:hover .t { color: var(--fg); }
.pcard2.finished h2, .pcard2.finished .small { color: var(--mid); }
/* 다 끝난 Process 카드: 테두리 · 배지 · 진행 바까지 회색. 안의 Task와 버튼은 그대로 쓸 수 있다 */
.pcard2.finished { border-color: var(--mid); }
.pcard2.finished .badge { background: var(--mid); }
.pcard2.finished .seg i.d { background: var(--mid); }
.pcard2.finished .tlist { border-top-color: var(--faint); }
.pcard2.finished:hover, .pcard2.finished:focus-within { border-color: var(--line-hi); }

/* 협업: 다른 조직 사람 태그는 그 조직 색 */
.tag.ext { --org: var(--x-l); --on-org: #FFFFFF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tag.ext { --org: var(--x-d); --on-org: #0E0E0E; } }
:root[data-theme="dark"] .tag.ext { --org: var(--x-d); --on-org: #0E0E0E; }
.mkind.lock { border-style: dashed; }
.tag.guest { border-style: dashed; }
.pmmark { font-family: var(--pixel); font-size: .6rem; border: 1px solid var(--org); color: var(--org); padding: 0 3px; line-height: 1.4; }
.collab-badge { font-size: .7rem; border: 1px solid var(--line); padding: 0 6px; white-space: nowrap; display: inline-flex; align-items: center; gap: 0; }
.collab-badge .orgdot { width: 8px; height: 8px; margin: 0 0 0 4px; }
.tpl.newtpl { border-style: dashed; border-color: var(--mid); background: transparent; }
.tpl.newtpl:hover { border-color: var(--line-hi); }
.tpl .btn.sm { padding: 0 6px; margin-top: 4px; }
/* 조직 색 · 화면의 5–10%: 상단 선 · 조직 버튼 · 선택 탭 · 주요 버튼 · 내 태그 · PIN · 포커스 */
.top { border-bottom-color: var(--org); }
.orgbtn { border-color: var(--org); }
.orgbtn .sw-dot, .swatch { display: inline-block; width: 10px; height: 10px; background: var(--org); margin-right: 6px; vertical-align: 0; }
.tabs a.on { background: var(--org); border-color: var(--org); color: var(--on-org); }
.btn.solid { background: var(--org); border-color: var(--org); color: var(--on-org); }
.tag { border-color: var(--org); color: var(--org); }          /* 다른 사람: 조직 색 테두리 */
.tag.on { background: var(--org); border-color: var(--org); color: var(--on-org); }  /* 나: 조직 색으로 채움 */
.who .tag.on { background: var(--org); }
.pin { background: var(--org); color: var(--on-org); }
:focus-visible { outline-color: var(--org); }
.orgdot { display: inline-block; width: 12px; height: 12px; margin-right: 8px; background: var(--c-l); vertical-align: 1px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .orgdot { background: var(--c-d); } }
:root[data-theme="dark"] .orgdot { background: var(--c-d); }
.colorpick { display: flex; flex-wrap: wrap; gap: 6px; }
.colorpick button { border: 2px solid var(--faint); background: var(--paper); padding: 4px 10px 4px 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; }
.colorpick button i { width: 14px; height: 14px; display: inline-block; }
.colorpick button.on { border-color: var(--line-hi); box-shadow: 2px 2px 0 var(--fg); }

@media (max-width: 720px) {
  .plist, .grid2 { grid-template-columns: minmax(0, 1fr); }
  .proc-h { grid-template-columns: 1.4em minmax(0, 1fr) 3.5em; }
  .proc-h .seg { grid-column: 2 / -1; grid-row: 2; }
  .proc-h .ptools { display: none; }
  .task { grid-template-columns: 16px minmax(0, 1fr) auto; }
  .task .meta { grid-column: 2 / -1; justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* 화면 코드의 style= 에서 옮긴 겉모습 (배치 · 간격은 화면 코드에 남는다) */
.brand.big { font-size: 1.8rem; }
.h-lg { font-size: 1.25rem; }
.ptitle.sub { font-size: 1.3rem; }
.px.reg { font-weight: 400; }
.code { font-size: 1.3rem; user-select: all; }
.code.big { font-size: 1.6rem; }
.code-sel { user-select: all; }
.title-input { font-size: 1.5rem; font-weight: 700; }
.struck { color: var(--mid); text-decoration: line-through; }
.fg { color: var(--fg); }
.nolink { text-decoration: none; }
.cardbtn { text-align: left; cursor: pointer; font: inherit; }

/* 로딩 화면 (8BIT 기본): 칸이 하나씩 차오르는 진행 바 + 깜빡이는 커서. 다른 템플릿은 skin-*.css에서 바꾼다 */
.loader { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 16px; }
.ld-logo { font-family: var(--logo); font-size: 1.8rem; letter-spacing: .14em; }
.ld-bar { display: flex; gap: 3px; width: 168px; height: 14px; }
.ld-bar i { flex: 1; background: var(--faint); animation: ld-cell 1.6s steps(1) infinite; }
.ld-bar i:nth-child(2) { animation-delay: .2s; } .ld-bar i:nth-child(3) { animation-delay: .4s; } .ld-bar i:nth-child(4) { animation-delay: .6s; }
.ld-bar i:nth-child(5) { animation-delay: .8s; } .ld-bar i:nth-child(6) { animation-delay: 1s; } .ld-bar i:nth-child(7) { animation-delay: 1.2s; } .ld-bar i:nth-child(8) { animation-delay: 1.4s; }
@keyframes ld-cell { 0% { background: var(--fg); } 50% { background: var(--faint); } }
.ld-text { font-family: var(--pixel); font-size: .8rem; color: var(--mid); }
.ld-text::after { content: "_"; animation: ld-blink 1s steps(1) infinite; }
@keyframes ld-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ld-bar i, .ld-text::after { animation: none; } }

/* 조직 선택: 왼쪽 3 조직 · 오른쪽 7 내 할 일 (좁은 화면은 위아래) */
.orgsplit { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); gap: 28px; align-items: start; }
@media (max-width: 860px) { .orgsplit { grid-template-columns: minmax(0, 1fr); } }
.page:has(> .orgsplit), .page:has(> * > .orgsplit) { max-width: 1240px; }