@import url('../shared/presentation.css');
/* Direction C03 — Work sheet.
   A working surface for the two people who commission this studio: a magazine
   editor on deadline and a beauty/fashion brand manager. It stays a tool, but a
   designed one — three surfaces (desk, paper, ink), one mono voice for data, a
   display size for the numbers that matter, and photographs large enough to
   decide from. */

@font-face { font-family: PlexMono; src: url('fonts/plex-mono-400.woff2') format('woff2'); font-weight: 400; font-display: swap }
@font-face { font-family: PlexMono; src: url('fonts/plex-mono-600.woff2') format('woff2'); font-weight: 600; font-display: swap }
/* Korean text subsets: only the characters this sheet renders (see README). */
@font-face { font-family: PlexKR; src: url('fonts/plex-kr-400.woff2') format('woff2'); font-weight: 400; font-display: swap }
@font-face { font-family: PlexKR; src: url('fonts/plex-kr-600.woff2') format('woff2'); font-weight: 600; font-display: swap }

:root {
  /* three surfaces: the desk the sheet lies on, the paper, and ink */
  --desk: #dedcd3;
  --pane: #ecebe4;
  --paper: #fbfaf7;
  --ink: #14130f;
  --rule: #cbc9bf;
  --hair: #e2e0d7;
  --dim: #5a584f;
  --mark: #e9f24b;
  --link: #1440c4;
  --mono: PlexMono, 'Doit Korean', ui-monospace, 'SF Mono', Menlo, monospace;
  --kr: PlexKR, 'Doit Korean','Apple SD Gothic Neo', sans-serif;
  --lift: 3px 3px 0 rgb(20 19 15 / .10);
  --lift-strong: 5px 5px 0 rgb(20 19 15 / .16);
  --ease: cubic-bezier(.2, .8, .3, 1);
  color-scheme: light;
}

* { box-sizing: border-box }
/* the root clips too: body overflow propagates to the viewport, so without
   this the page itself scrolls when focus moves into a pane. */
html { height: 100%; overflow: hidden }
body {
  /* the shell owns the height so the panes scroll, not the page */
  height: 100dvh; overflow: hidden;
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  margin: 0;
  background: var(--pane);
  color: var(--ink);
  font: 400 12px/1.6 var(--mono), var(--kr);
  font-synthesis-style: none;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, dl, dd, figure, pre { margin: 0 }
ul, ol { margin: 0; padding: 0; list-style: none }
fieldset { margin: 0; padding: 0; border: 0 }
img { display: block; width: 100%; height: auto }
a { color: var(--link); text-underline-offset: 2px }
button { font: inherit; color: inherit; cursor: pointer }
kbd {
  font: 600 10px/1.6 var(--mono); border: 1px solid var(--rule); border-bottom-width: 2px;
  border-radius: 3px; padding: 1px 5px; background: var(--paper);
}
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px }
[hidden] { display: none !important }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%) }
.skip { position: fixed; z-index: 90; left: 10px; top: -60px; background: var(--ink); color: var(--paper); padding: 10px 16px }
.skip:focus { top: 10px }

/* one label voice across the panes */
.side-title, .block h3, .checklist h3, .attrs legend, .docbar-meta dt {
  font: 600 10px/1.5 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
}
.est {
  font: 600 9px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--rule); border-radius: 2px; padding: 1px 4px; color: var(--dim); background: var(--paper);
}

/* ---------- document header ---------- */
.docbar {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(14px, 2.2vw, 38px);
  padding: 13px clamp(14px, 1.6vw, 26px);
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
}
.mark { display: flex; align-items: baseline; gap: 4px }
.mark-name { font: 600 21px/1 var(--mono); letter-spacing: .1em }
.mark-reg { font-size: 10px; color: var(--link) }
.docbar-lines { border-left: 1px solid var(--rule); padding-left: clamp(12px, 1.6vw, 24px) }
.docbar-lead { font: 600 13px/1.45 var(--kr), var(--mono); letter-spacing: -.01em }
.docbar-title { font-family: var(--kr), var(--mono); font-size: 11.5px; color: var(--dim) }
.docbar-meta { display: flex; gap: 22px; justify-self: end }
.docbar-meta div { display: grid; gap: 1px }
.docbar-meta dd { margin: 0; font: 600 13px/1.2 var(--mono); font-variant-numeric: tabular-nums }
.docbar-links { display: flex; gap: 7px }
.doc-action {
  display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px;
  background: var(--ink); color: var(--paper); text-decoration: none;
  font: 600 10.5px/1 var(--mono), var(--kr); letter-spacing: .06em;
  border: 1px solid var(--ink); transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.doc-action:hover { transform: translate(-1px, -1px); box-shadow: var(--lift) }
.doc-action.ghost { background: none; color: var(--ink) }
.doc-action.ghost:hover { background: var(--mark) }

/* ---------- three panes ---------- */
.workspace {
  display: grid;
  grid-template-columns: clamp(232px, 18vw, 272px) minmax(0, 1fr) clamp(300px, 22vw, 348px);
  min-height: 0;
}
/* grid items default to min-height:auto, which would grow the row instead of
   scrolling the pane. */
.side, .sheet { min-height: 0 }
.side { overflow: auto; overscroll-behavior: contain; background: var(--pane) }
.side-filters { border-right: 1px solid var(--ink); padding: 18px clamp(14px, 1.2vw, 20px) 26px }
.side-tray {
  border-left: 1px solid var(--ink); display: flex; flex-direction: column; gap: 16px;
  padding: 18px clamp(14px, 1.2vw, 20px) 22px;
}
.side-title { display: block }

.block { border-top: 1px solid var(--rule); padding-top: 14px; margin-top: 20px }
.block:first-of-type { border-top: 0; margin-top: 14px; padding-top: 0 }
.block h3 { margin-bottom: 10px }
.block-help, .measure-note, .checklist-note, .who-note {
  font-family: var(--kr), var(--mono); font-size: 11px; line-height: 1.8; color: var(--dim);
}
.who-note { margin-top: 10px; border-left: 2px solid var(--mark); padding-left: 10px }
.measure-note { margin-top: 16px; border-top: 1px dashed var(--rule); padding-top: 10px }

/* role picker */
.who { position: relative; display: grid; gap: 3px }
.who input { position: absolute; opacity: 0; width: 1px; height: 1px }
.who label {
  display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 11px; cursor: pointer;
  background: var(--paper); border: 1px solid var(--rule);
  font-family: var(--kr), var(--mono); font-size: 12.5px;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.who label::before { content: ''; width: 9px; height: 9px; border: 1px solid var(--ink); border-radius: 50%; flex: none }
.who label:hover { border-color: var(--ink); transform: translate(-1px, -1px); box-shadow: var(--lift) }
.who input:checked + label { background: var(--ink); color: var(--paper); border-color: var(--ink) }
.who input:checked + label::before { background: var(--mark); border-color: var(--mark) }
.who input:focus-visible + label { outline: 2px solid var(--link); outline-offset: 2px }

/* use rules */
.uses { display: grid; gap: 3px; margin-bottom: 8px }
.uses button {
  width: 100%; text-align: left; padding: 9px 11px; background: var(--paper); border: 1px solid var(--rule);
  font-family: var(--kr), var(--mono); font-size: 12.5px; display: grid; gap: 2px;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.uses button::after {
  content: attr(data-rule); font: 400 9.5px/1.5 var(--mono), var(--kr); color: var(--dim); letter-spacing: .02em;
}
.uses button:hover { border-color: var(--ink); transform: translate(-1px, -1px); box-shadow: var(--lift) }
.uses button[aria-pressed='true'] { background: var(--mark); border-color: var(--ink); box-shadow: var(--lift) }
.uses button[aria-pressed='true']::after { color: var(--ink) }
/* the role's suggested use, marked but not applied */
.uses button.is-suggested:not([aria-pressed='true']) { border-color: var(--ink) }
.uses button.is-suggested:not([aria-pressed='true'])::before {
  content: '추천'; justify-self: start; font: 600 9px/1.4 var(--mono), var(--kr);
  letter-spacing: .1em; background: var(--ink); color: var(--paper); padding: 1px 5px; margin-bottom: 2px;
}

/* attribute chips */
.attrs { margin-bottom: 14px }
.attrs legend { display: flex; gap: 7px; align-items: center; margin-bottom: 2px }
.attrs label {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; margin: 5px 5px 0 0; padding: 4px 10px 4px 7px;
  background: var(--paper); border: 1px solid var(--rule); font-size: 11px; cursor: pointer;
  font-family: var(--kr), var(--mono); transition: background .16s var(--ease), border-color .16s var(--ease);
}
.attrs label:hover { border-color: var(--ink) }
.attrs label:has(input:checked) { background: var(--mark); border-color: var(--ink); font-weight: 600 }
.attrs input { accent-color: var(--ink); margin: 0 }
.reset {
  width: 100%; min-height: 40px; padding: 9px; background: none; border: 1px solid var(--ink);
  font: 600 10.5px/1 var(--mono), var(--kr); letter-spacing: .1em; text-transform: uppercase;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.reset:hover { background: var(--ink); color: var(--paper) }

/* ---------- the sheet: paper on a desk ---------- */
.sheet {
  overflow: auto; overscroll-behavior: contain; background: var(--desk);
  background-image: radial-gradient(rgb(20 19 15 / .07) 1px, transparent 1px);
  background-size: 22px 22px;
  padding: 0 clamp(16px, 2vw, 34px) 56px;
}
.sheet-head {
  position: sticky; top: 0; z-index: 3;
  display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 4px 20px; align-items: baseline;
  margin: 0 clamp(-34px, -2vw, -16px) 20px; padding: 16px clamp(16px, 2vw, 34px) 12px;
  background: linear-gradient(var(--desk) 72%, rgb(222 220 211 / 0));
}
#sheet-title { align-self: center }
.sheet-count {
  font: 600 clamp(24px, 2.4vw, 34px)/1 var(--mono); font-variant-numeric: tabular-nums;
  letter-spacing: -.02em; display: flex; align-items: baseline; gap: 8px;
}
.sheet-count::after {
  content: ''; width: 34px; height: 6px; background: var(--mark); border: 1px solid var(--ink); align-self: center;
}
.sheet-rule {
  font-family: var(--kr), var(--mono); font-size: 12px; color: var(--ink);
  border: 1px solid var(--ink); background: var(--paper); padding: 3px 10px; justify-self: start;
}
.sheet-help {
  grid-column: 1 / -1; color: var(--dim); font-size: 10.5px; font-family: var(--kr), var(--mono);
  display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center;
}

.strips { display: flex; flex-flow: row wrap; align-items: flex-start; gap: clamp(16px, 1.6vw, 26px) }
.strip {
  display: grid; grid-template-columns: 104px auto; max-width: 100%;
  background: var(--paper); border: 1px solid var(--ink); box-shadow: var(--lift);
}
.strip[hidden] { display: none }
.edge {
  display: grid; align-content: start; gap: 4px; padding: 14px 12px 14px 16px; border-right: 1px solid var(--rule);
  background: repeating-linear-gradient(180deg, transparent 0 10px, var(--hair) 10px 17px) left 4px top / 5px 100% no-repeat;
}
.edge b { font: 600 11px/1.4 var(--mono); letter-spacing: .06em }
.edge span { font-family: var(--kr), var(--mono); font-size: 10.5px; color: var(--dim) }
.edge-count {
  font: 600 10px/1 var(--mono) !important; font-variant-numeric: tabular-nums; color: var(--ink) !important;
  border: 1px solid var(--rule); padding: 3px 6px; justify-self: start; margin-top: 4px;
}
.edge a { font-size: 10px; margin-top: 6px }

.cells { display: flex; flex-wrap: wrap; align-content: start; padding: 10px }
.cell { position: relative; flex: 0 0 clamp(178px, 17vw, 246px); padding: 8px; display: grid; gap: 8px; align-content: start }
.cell[hidden] { display: none }
.pick { position: absolute; opacity: 0; width: 1px; height: 1px }
.cell label {
  position: relative; display: block; cursor: pointer; background: var(--hair);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.cell label img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 26% }
.cell label::after { content: ''; position: absolute; inset: 0; border: 1px solid rgb(20 19 15 / .18); pointer-events: none }
.cell label:hover { transform: translate(-2px, -2px); box-shadow: var(--lift-strong) }

/* selection: a numbered tab on the frame, the way a print gets marked */
.pick-mark {
  position: absolute; left: 0; top: 0; z-index: 2; min-width: 30px; height: 26px; padding: 0 7px;
  display: grid; place-items: center; background: var(--mark); color: var(--ink);
  border: 1px solid var(--ink); border-left: 0; border-top: 0;
  font: 600 11px/1 var(--mono); font-variant-numeric: tabular-nums;
  /* quiet when empty so the frame leads, solid once the cut is picked */
  background: var(--paper); opacity: .72;
  transition: opacity .16s var(--ease), background .16s var(--ease);
}
.cell label:hover .pick-mark { opacity: 1 }
.cell:has(.pick:checked) .pick-mark { opacity: 1; background: var(--mark) }
.cell:has(.pick:checked) .pick-mark::after { content: attr(data-order) }
.cell:has(.pick:checked) label { box-shadow: var(--lift-strong) }
.cell:has(.pick:checked) label::after { border: 2px solid var(--ink) }
.cell:has(.pick:focus-visible) label { outline: 2px solid var(--link); outline-offset: 3px }

.cell-foot {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 8px; align-items: center;
  border-top: 1px solid var(--hair); padding-top: 7px;
}
.cell-id { grid-column: 1; display: flex; align-items: center; gap: 7px; font: 600 10.5px/1.3 var(--mono); letter-spacing: .04em }
.cell-id i { font-style: normal; font-size: 9px; background: var(--ink); color: var(--paper); padding: 1px 4px; letter-spacing: .06em }
.cell-tags { grid-column: 1; font-size: 10px; color: var(--dim); font-family: var(--kr), var(--mono) }
.zoom {
  grid-column: 2; grid-row: 1 / span 2; width: 30px; height: 30px; border: 1px solid var(--rule);
  background: var(--paper); font-size: 12px; transition: background .16s var(--ease), color .16s var(--ease);
}
.zoom:hover { border-color: var(--ink); background: var(--ink); color: var(--paper) }

.sheet-empty {
  border: 1px dashed var(--ink); background: var(--paper); padding: 26px; text-align: center;
  font-family: var(--kr), var(--mono); font-size: 12.5px; box-shadow: var(--lift);
}
.sheet-foot {
  margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--rule);
  display: grid; gap: 6px; color: var(--dim); font-family: var(--kr), var(--mono); font-size: 10.5px; line-height: 1.8;
  max-width: 78ch;
}
.sheet-foot a { justify-self: start; margin-top: 6px; font-weight: 600 }

/* ---------- selection tray ---------- */
.tray-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--ink); padding-bottom: 10px }
.tray-head .side-title { display: flex; align-items: center; gap: 10px }
.tray-head b {
  font: 600 20px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink);
  background: var(--mark); border: 1px solid var(--ink); padding: 3px 8px; letter-spacing: 0;
}
.link-button { border: 0; background: none; padding: 4px; color: var(--link); text-decoration: underline; font-size: 11px }

.tray-empty { display: grid; gap: 14px; padding: 18px 0 }
.tray-slots { display: flex; gap: 8px }
.tray-slots span { flex: 1; aspect-ratio: 4 / 5; border: 1px dashed var(--rule); background: var(--paper) }
.tray-slots span:first-child { border-color: var(--ink) }
.tray-empty p { font-family: var(--kr), var(--mono); font-size: 11px; line-height: 1.8; color: var(--dim) }
.tray-empty b { color: var(--ink); font-size: 12px }

.tray-list { display: grid; gap: 4px }
.tray-list li {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  background: var(--paper); border: 1px solid var(--rule); padding: 6px;
}
.tray-list img { width: 40px; aspect-ratio: 4 / 5; object-fit: cover }
.tray-list .tray-id { font: 600 10.5px/1.4 var(--mono); letter-spacing: .04em }
.tray-list .tray-tags { font-size: 10px; color: var(--dim); font-family: var(--kr), var(--mono) }
.tray-list button { border: 1px solid var(--rule); background: var(--paper); width: 26px; height: 26px; line-height: 1; font-size: 12px }
.tray-list button:hover { background: var(--ink); color: var(--paper); border-color: var(--ink) }

.tray-actions { display: grid; gap: 7px; margin-top: auto; padding-top: 4px }
.tray-actions button, .button-link {
  min-height: 46px; padding: 12px; border: 1px solid var(--ink); background: var(--paper); text-align: center;
  font: 600 11px/1.2 var(--mono), var(--kr); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: inherit;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.tray-actions .primary { background: var(--ink); color: var(--paper) }
.tray-actions button:not(:disabled):hover, .button-link:hover { transform: translate(-1px, -1px); box-shadow: var(--lift) }
.tray-actions .ghost:not(:disabled):hover { background: var(--mark) }
.tray-actions button:disabled { opacity: .4; cursor: not-allowed; border-style: dashed }
.tray-status { min-height: 16px; font-size: 10.5px; color: var(--link); font-family: var(--kr), var(--mono) }

.checklist { border-top: 1px solid var(--ink); padding-top: 14px }
.checklist h3 { margin-bottom: 10px }
.checklist ul { display: grid; gap: 6px; font-family: var(--kr), var(--mono); font-size: 11.5px }
.checklist li { display: grid; grid-template-columns: 13px minmax(0, 1fr); gap: 8px; align-items: start }
.checklist li::before { content: ''; width: 11px; height: 11px; border: 1px solid var(--dim); margin-top: 4px }
.checklist-note { margin-top: 12px }

/* ---------- viewer: a loupe on a dark table ---------- */
dialog { border: 0; padding: 0; background: none; max-width: min(1240px, 94vw); max-height: 92dvh }
dialog::backdrop { background: rgb(20 19 15 / .86) }
#viewer .viewer-body {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(250px, 22vw, 300px);
  max-height: 92dvh; background: var(--ink); border: 1px solid var(--ink);
}
.viewer-body img {
  width: 100%; height: 100%; max-height: 92dvh; object-fit: contain;
  background: #0c0b08; padding: clamp(10px, 1.6vw, 26px);
}
.viewer-side { background: var(--paper); padding: 20px; display: grid; align-content: start; gap: 16px }
.viewer-id { font: 600 15px/1.2 var(--mono); letter-spacing: .06em }
.viewer-meta { display: grid }
.viewer-meta div { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 10px; border-bottom: 1px solid var(--hair); padding: 7px 0 }
.viewer-meta dt { font: 600 9.5px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim) }
.viewer-meta dd { margin: 0; font-family: var(--kr), var(--mono); font-size: 12px; font-weight: 600 }
.viewer-actions { display: flex; flex-wrap: wrap; gap: 6px }
.viewer-actions button {
  min-height: 40px; padding: 8px 12px; border: 1px solid var(--ink); background: var(--paper);
  font: 600 10.5px/1 var(--mono), var(--kr); letter-spacing: .06em;
}
.viewer-actions button:hover:not(:disabled) { background: var(--ink); color: var(--paper) }
.viewer-actions button:disabled { opacity: .3; cursor: not-allowed }
#viewer-pick { flex: 1 0 100%; background: var(--ink); color: var(--paper) }
#viewer-pick[aria-pressed='true'] { background: var(--mark); color: var(--ink) }
.viewer-note {
  font-family: var(--kr), var(--mono); font-size: 10.5px; color: var(--dim); line-height: 1.8;
  border-top: 1px dashed var(--rule); padding-top: 12px;
}

/* ---------- brief ---------- */
#brief { background: var(--paper); border: 1px solid var(--ink); box-shadow: var(--lift-strong) }
.brief-form { padding: 22px; display: grid; gap: 14px; width: min(780px, 92vw) }
.brief-form h2 { font: 600 15px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase }
.brief-help { font-family: var(--kr), var(--mono); font-size: 11.5px; line-height: 1.8; color: var(--dim); border-left: 2px solid var(--mark); padding-left: 12px }
.brief-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px }
.brief-field { display: grid; gap: 5px }
.brief-field span { font: 600 9.5px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim) }
.brief-field input, .brief-field select, .brief-field textarea {
  min-height: 42px; border: 1px solid var(--rule); background: #fff; padding: 10px;
  font: 400 12px/1.5 var(--mono), var(--kr); width: 100%;
}
.brief-field textarea { field-sizing: content; min-height: 52px; resize: vertical }
.brief-field :focus-visible { border-color: var(--link); outline-offset: 1px }
#brief-output {
  border: 1px solid var(--ink); border-left-width: 3px; padding: 14px; background: #fff;
  white-space: pre-wrap; word-break: break-word;
  font: 400 11.5px/1.9 var(--mono), var(--kr); max-height: 220px; overflow: auto;
}
.brief-actions { display: flex; flex-wrap: wrap; gap: 7px }
.brief-actions button, .brief-actions .button-link {
  min-height: 44px; padding: 12px 16px; border: 1px solid var(--ink); background: var(--paper);
  font: 600 10.5px/1 var(--mono), var(--kr); letter-spacing: .08em; text-transform: uppercase;
}
.brief-actions .primary { background: var(--ink); color: var(--paper) }
.brief-actions button:hover, .brief-actions .button-link:hover { transform: translate(-1px, -1px); box-shadow: var(--lift) }
.brief-status { min-height: 16px; font-size: 11px; color: var(--link); font-family: var(--kr), var(--mono) }

/* ---------- narrow ---------- */
@media (max-width: 1180px) {
  html, body { height: auto; overflow: visible }
  body { display: block }
  .workspace { grid-template-columns: clamp(220px, 24vw, 260px) minmax(0, 1fr); height: auto }
  .side, .sheet { overflow: visible }
  .side-tray {
    position: fixed; inset: auto 0 0 0; z-index: 20; max-height: 54dvh;
    border-top: 2px solid var(--ink); border-left: 0; box-shadow: 0 -6px 0 rgb(20 19 15 / .06);
  }
  .sheet { padding-bottom: 230px }
  .checklist { display: none }
  .tray-empty { padding: 8px 0 }
}

@media (max-width: 860px) {
  .docbar { grid-template-columns: auto minmax(0, 1fr); gap: 12px 16px; padding: 12px 14px }
  .docbar-lines { grid-column: 2; border-left: 0; padding-left: 0 }
  .docbar-meta { grid-column: 1 / -1; justify-self: start; gap: 18px }
  .docbar-links { grid-column: 1 / -1 }
  .doc-action { flex: 1; justify-content: center }
  .workspace { grid-template-columns: minmax(0, 1fr) }
  .side-filters { border-right: 0; border-bottom: 1px solid var(--ink); padding-bottom: 18px }
  .who label { min-height: 46px }
  .tray-actions button, .button-link { min-height: 48px }
  .attrs label { min-height: 36px }
  .uses { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .sheet { padding-left: 14px; padding-right: 14px }
  .sheet-head {
    position: static; margin: 0 0 14px; padding: 14px 0 10px; background: none;
    grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: start;
  }
  .sheet-count { font-size: 26px }
  .sheet-rule { justify-self: start; max-width: 100% }
  .strip { grid-template-columns: minmax(0, 1fr) }
  .edge {
    border-right: 0; border-bottom: 1px solid var(--rule); display: flex; flex-wrap: wrap; align-items: baseline;
    gap: 10px; background: none; padding: 10px 12px;
  }
  .edge a { margin: 0; margin-left: auto }
  .edge-count { margin-top: 0 }
  .cell { flex: 1 1 calc(50% - 1px) }
  #viewer .viewer-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto }
  .viewer-body img { max-height: 54dvh }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important }
}

/* Proposal detail pass — 2026-10-06. Composition remains direction-specific. */
 :root{--kr:'Doit Korean','Apple SD Gothic Neo',sans-serif}.who-note,.block-help,.measure-note{font-size:12px;line-height:1.85}.sheet-foot{line-height:1.85}.cell-tags{font-size:11px}.tray-empty p{font-size:12px}.tray-slots span{aspect-ratio:1}.tray-list button{min-width:48px;min-height:48px}.brief-help{font-size:13px}.brief-field span{font-size:12px;letter-spacing:.02em}.brief-field input,.brief-field select,.brief-field textarea{min-height:48px;font-size:14px}.checklist ul{font-size:12px}.filter-disclosure>summary{display:none}.filter-disclosure{min-width:0}.cell:focus-within{outline:2px solid var(--link);outline-offset:-2px}
@media(max-width:1180px){.side-tray{padding:12px 18px 8px;max-height:34dvh;gap:8px;padding-bottom:max(8px,env(safe-area-inset-bottom))}.tray-empty{padding:2px 0;gap:0}.tray-empty .tray-slots{display:none}.tray-empty p:last-child{display:none}.tray-actions{grid-template-columns:1fr 1fr;margin-top:0;padding-top:0}.tray-status{grid-column:1/-1;min-height:0}.tray-status:empty{display:none}.tray-list{max-height:12dvh;overflow:auto}.sheet{padding-bottom:260px}.tray-head{padding-bottom:6px}}
@media(max-width:860px){.docbar-meta{display:none}.docbar-title{font-size:11px}.side-filters{padding-top:15px;padding-bottom:0}.side-filters>.side-title{display:none}.side-filters>.block{margin-top:0}.who{display:flex;gap:5px}.who label{flex:1;justify-content:center;text-align:center;font-size:11px;padding:7px 6px;line-height:1.6}.who-note{font-size:12px;margin-top:12px}.filter-disclosure>summary{display:flex;justify-content:space-between;align-items:center;min-height:48px;cursor:pointer;border-top:1px solid var(--rule);font-size:12px;list-style:none}.filter-disclosure>summary::after{content:'+';font-size:18px}.filter-disclosure[open]>summary::after{content:'−'}.filter-disclosure>summary::-webkit-details-marker{display:none}.sheet-head{margin-top:8px}.tray-actions button{font-size:11px;letter-spacing:0}.sheet{padding-bottom:230px}.tray-empty b{font-size:12px}}