/* 할 일 (redesign 8.6, track RA4): what the 할 일 screens and 할 일 만들기 add over RF1's lx- parts
   (redesign-rf1.css). Only ra4- classes are defined here; a part's own look is RF1's. */

/* In the frame the page's own padding is the list's (this screen is a list and its panel side by side, the design's
   .split > .page + .aside): the screen takes the frame's padding back so the panel stands at the page's right edge,
   from under the tabs down, and the list keeps the same place. */
.ra4-screen{min-width:0}
main.lx-page .ra4-screen{margin:-24px -28px -40px}
/* (the list's padding is said here: the parts give a page inside the frame's page none -- RF1 `.lx-page .lx-page` --
   and this one stands at the frame's edges, so it keeps the frame's own 24 · 28 · 40) */
main.lx-page .ra4-screen .ra4-page{padding:24px 28px 40px}
/* 할 일 만들기 opens in the frame's panel: this screen's own panel gives it the place (one panel at a time). */
.ra4-create-open .ra4-aside{display:none}
.ra4-split{align-items:stretch}
.ra4-page{gap:14px}
.ra4-head{gap:12px;align-items:flex-start}
/* the first line and 할 일 만들기 on one row beside the panel too (1280: the button went under the sentence) */
.ra4-head{flex-wrap:nowrap}
.ra4-head .lx-lede{flex:1 1 0;min-width:0;margin:0;word-break:keep-all}
.ra4-head>.lx-push{display:none}
.ra4-filters{gap:8px}
.ra4-gap{width:1px;height:18px;margin:0 4px;background:var(--ds-line)}

/* The list: six buckets, each a head that is a press and its lines (severity, title and its second line, the end). */
.ra4-list{min-width:0}
.ra4-grp{justify-content:flex-start}
.ra4-grp-press{display:inline-flex;align-items:center;gap:8px;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.ra4-grp-press[aria-pressed="true"]{color:var(--ds-accent-text)}
/* (기한 지남's head is red as the design's: the press takes its colour from the head otherwise) */
.ra4-grp-press.lx-c-bad{color:var(--ds-danger-text,#B3261E)}
.ra4-grp-press:hover{background:none;text-decoration:underline}
.ra4-grp-all{padding:0;border:0;background:none;font:inherit;font-weight:500;cursor:pointer}
.ra4-row{grid-template-columns:22px minmax(0,1fr) auto;text-decoration:none;color:inherit}
.ra4-row .lx-sub{word-break:keep-all}
.ra4-sev{display:inline-flex;align-items:center}
.ra4-row-end{gap:8px;flex-wrap:nowrap}
.ra4-due{font-size:var(--ds-fs-xs,13px);font-weight:500;white-space:nowrap;color:var(--ds-text-3)}
.ra4-due.lx-c-bad{color:var(--ds-danger-text,#B2311F)}
/* A line's marks are words of its second line (8.6: gray, Click's purple), not the old list's boxed marks. */
.ra4-row .todo-mark,.ra4-row .todo-mark[data-mark="request"]{padding:0;border:0;border-radius:0;font-size:inherit;color:inherit}
.ra4-row .ra4-click-mark{color:var(--ds-click-text,#5837C9)}
/* What a line asks and where it stands (UR31-3c): its action opens the second line in the accent's words; its step is
   four dots at its end, the ones reached filled (the panel says the four by name). */
.ra4-row .ra4-do{color:var(--ds-accent-text);font-weight:600}
.ra4-step{display:inline-flex;align-items:center;gap:3px;flex:none}
.ra4-step>i{width:6px;height:6px;border-radius:50%;background:var(--ds-line-strong)}
.ra4-step>i[data-on]{background:var(--ds-accent)}
.ra4-more{align-self:flex-start;padding:8px 6px 0 44px;border:0;background:none;font:inherit;font-size:var(--ds-fs-xs,13px);cursor:pointer}
.ra4-pager{flex-wrap:wrap}
/* (fixed end columns: each row is its own grid, so auto widths would not line up from row to row) */
.ra4-done-row{grid-template-columns:minmax(0,1fr) 6.5rem 7.5rem 11.5rem;text-decoration:none;color:inherit}
.ra4-took{color:var(--ds-text-3);font-size:var(--ds-fs-xs,13px);white-space:nowrap;text-align:right}
.ra4-done-row .ra4-due{text-align:right}
.ra4-unavailable{margin:0}
/* (the empty list's way to 찾기 stands off the frame over it) */
.ra4-body .todo-empty-go{display:inline-block;margin-top:12px}

/* 담당별 (전체's second view) */
/* (the table is the parts' own, table.lx-t: this sheet says only its columns and that a head is a press that sorts) */
.ra4-by{table-layout:fixed}
.ra4-by th:nth-child(2){width:7rem}
.ra4-by th:nth-child(3){width:14rem}
.ra4-by td.lx-r{font-variant-numeric:tabular-nums}
.ra4-by tbody tr:hover td{background:none}
.ra4-by-sort{padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.ra4-by-sort:hover{text-decoration:underline}
.ra4-by th[aria-sort="ascending"] .ra4-by-sort::after{content:" ↑"}
.ra4-by th[aria-sort="descending"] .ra4-by-sort::after{content:" ↓"}
.ra4-by-search{max-width:20rem;margin-bottom:8px}
/* (a name keeps its words and breaks inside one only when it alone is longer than its column) */
.ra4-by td{word-break:keep-all;overflow-wrap:break-word}
/* A narrow list (390, or beside the panel): the two fixed columns took 336px and left 담당 22px, a letter a line (PC1
   10-13 문제 4). Under 600px of list the three share it, 담당 the most, and a column's name may take two lines. */
.ra4-body:has(>.ra4-by){container:ra4-by / inline-size}
@container ra4-by (max-width:600px){
  .ra4-by th:nth-child(2){width:20%}
  .ra4-by th:nth-child(3){width:36%}
  .ra4-by th{white-space:normal;word-break:keep-all}
}

/* 예정, folded at 전체's end */
.ra4-coming{border-top:1px solid var(--ds-line);padding-top:4px}
.ra4-coming>summary{cursor:pointer;list-style:none}
.ra4-coming>summary::-webkit-details-marker{display:none}
.ra4-coming>summary::before{content:"▸";margin-right:6px;color:var(--ds-text-3)}
.ra4-coming[open]>summary::before{content:"▾"}
.ra4-coming-list{margin:0;padding:0;list-style:none}

/* The panel beside the list */
/* An item's panel is one block in the aside: its parts keep the aside's own gap (the design's 16px). Its facts are the
   design's .kv -- label beside value, 112px and the rest -- drawn from the shared detail part's markup. */
.ra4-item{display:flex;flex-direction:column;gap:16px;min-width:0}
.ra4-item .detail-facts{display:grid;grid-template-columns:112px minmax(0,1fr);gap:8px 16px;margin:0;padding:0;border:0}
.ra4-item .detail-fact{display:contents}
.ra4-item .detail-fact>dt{margin:0;padding:0;border:0;color:var(--ds-text-3);font-size:13px;font-weight:400}
.ra4-item .detail-fact>dd{margin:0;padding:0;border:0;min-width:0;overflow-wrap:anywhere}
.ra4-meta .lx-c-bad{font-weight:600}
.ra4-close span{font-size:20px;line-height:1}
.ra4-meta{gap:6px 16px;font-size:var(--ds-fs-xs,13px)}
.ra4-actions{gap:8px;flex-wrap:wrap}
.ra4-actions .ra4-act{display:inline-flex}
.ra4-actions .lx-push{flex:1 1 auto}
.ra4-due-short{font-size:13px;font-weight:600;white-space:nowrap;color:var(--ds-text-3)}
.ra4-due-short.lx-c-bad{color:var(--ds-danger-text,#B3261E)}
.ra4-row:has(>.ra4-due-short){grid-template-columns:minmax(0,1fr) auto}
/* (the targets' count leaves the row beside a panel or a narrow window and joins the second line: 명세 6.6) */
.ra4-row .ra4-dropsum{display:none}
.lx-split:has(>.lx-aside):where(:not([data-lx-roomy])) .ra4-row .ra4-dropsum{display:inline}
.ra4-actions:empty{display:none}
/* The panel's steps (접수 → 검토 → 조치 → 완료) and the line's action under them: one row that wraps rather than
   overflow a phone's width; the step it stands at is the accent's pill, the ones behind it plain, the rest grey. */
.ra4-flow{display:flex;flex-direction:column;gap:6px;min-width:0}
.ra4-steps{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;margin:0;padding:0;list-style:none;font-size:var(--ds-fs-xs,13px)}
.ra4-steps>li{display:inline-flex;align-items:center;color:var(--ds-text-3);white-space:nowrap}
.ra4-steps>li+li::before{content:"";width:14px;height:1px;margin:0 6px;background:var(--ds-line-strong)}
.ra4-steps>li[data-passed]{color:var(--ds-text-2)}
.ra4-steps>li[aria-current="step"]{padding:1px 10px;border-radius:999px;background:var(--ds-accent-soft,color-mix(in srgb,var(--ds-accent) 12%,transparent));color:var(--ds-accent-text);font-weight:600}
.ra4-steps>li[aria-current="step"]:focus-visible{outline:2px solid var(--ds-accent);outline-offset:2px}
.ra4-flow .ra4-do{margin:0;font-weight:600;word-break:keep-all}
.ra4-reason{margin:0;color:var(--ds-text-2);word-break:keep-all}
.ra4-acts{display:flex;flex-direction:column;gap:12px}
.ra4-act{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px}
.ra4-act .lx-field{flex:1 1 12rem;min-width:0}
.ra4-more-menu>summary{list-style:none;cursor:pointer;width:fit-content}
.ra4-more-menu>summary::-webkit-details-marker{display:none}
.ra4-more-menu[open]>.ra4-act{margin-top:8px;padding:12px;border:1px solid var(--ds-line);border-radius:var(--ds-radius-s,8px)}
.ra4-said{margin:0;color:var(--ds-text-2);font-size:var(--ds-fs-xs,13px)}
.ra4-said:empty{display:none}
/* A line's 담당 and 기한: each a row of the design's .kv -- its name in the 112px column, the field, its button -- so
   the two take two lines, not two labelled blocks, and the line's issues come up under them (UR18-2b). */
.ra4-group-forms{display:flex;flex-direction:column;gap:8px}
.ra4-group-form{gap:8px;align-items:center;flex-wrap:nowrap}
.ra4-group-form .lx-field{flex:1 1 auto;min-width:0;display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center;gap:16px}
.ra4-group-form .lx-field>.lx-lbl{color:var(--ds-text-3);font-size:13px;font-weight:400}
@media (max-width:480px){.ra4-group-form .lx-field{grid-template-columns:56px minmax(0,1fr);gap:8px}}
.ra4-selbar{font-size:var(--ds-fs-xs,13px)}
.ra4-issue{gap:10px}
.ra4-issue-key{flex:none;width:5.5rem}
.ra4-side:empty{display:none}

/* 할 일 만들기's button is the part's: blue only when it is the main one (the old sheet made every one blue, so 담당 지정
   stood as a second main button beside 사유를 푸는 화면 열기). */
.lx-btn.todo-create-open:not(.lx-btn-p){border-color:var(--ds-line-strong);background:var(--ds-surface);color:var(--ds-text)}
.lx-btn.todo-create-open:not(.lx-btn-p):hover{background:color-mix(in srgb,var(--ds-accent) 8%,transparent)}

/* 할 일 만들기 in the panel */
.ra4-create{display:flex;flex-direction:column;gap:12px}
.ra4-create .todo-create-targets{margin:0;padding-left:18px}
.ra4-who{display:flex;flex-direction:row;flex-wrap:wrap;gap:6px 16px;margin:0;padding:0;border:0}
.ra4-who legend{width:100%;margin-bottom:4px}

/* Narrow (900px and under): the panel covers the screen (5절), the list keeps its place under it. */
@media (max-width:1100px){.ra4-row .ra4-dropsum{display:inline}}
@media (max-width:900px){
  main.lx-page .ra4-screen{margin:-20px -16px -32px}
  main.lx-page .ra4-screen .ra4-page{padding:20px 16px 32px}
  .ra4-head{flex-wrap:wrap}
  .ra4-has-panel .ra4-aside{position:fixed;inset:0 0 0 auto;z-index:40;width:100%;max-width:none;overflow:auto;border-left:0;box-shadow:var(--ds-shadow,0 0 0 1px rgba(0,0,0,.06))}
  .ra4-row{grid-template-columns:22px minmax(0,1fr)}
  .ra4-row-end{grid-column:2;flex-wrap:wrap}
  .ra4-done-row{grid-template-columns:minmax(0,1fr) auto}
  .ra4-took,.ra4-done-row .ra4-due{grid-column:1 / -1;text-align:left}
}