/* Older screens inside the PC shell (2026-10-23 redesign, stage 5).
   The materials, RFP, requirements, strategy, storyboard, sections, output, final review, editor and history screens
   still render their earlier markup (.view, .stack, .board-card, .banner, details > summary, button.primary …) into
   #view. This layer restyles that markup with the shell's tokens (--surface, --line, --brand, --r, --shadow …) so
   those screens read like the home and 결과물 screens. It is CSS only and loads after styles.css and result.css.

   Scope: only an older view root directly inside .main-area #view (.view, or the editor's .workbench). Home
   (.home) and 결과물 (.res-screen) are not .view, so the shell's .btn, .chip, .card and res- rules are never
   reached. The team screens (team form, team settings, usage) render as .view too; they are left alone by the
   :has() exclusions below. The scope sits in :where(), so it adds no weight: each rule here has the same
   specificity as the styles.css rule it replaces and wins only by loading later. PC only (1280–1600px). */

/* ---- page root ------------------------------------------------------------------------------------------- */
:where(.main-area #view) > .view:where(:not(:has(#team-form, #asset-form, #member-list, #usage-month-form))) {
  padding:0; max-width:1360px; line-height:1.6; color:var(--ink);
}
:where(.main-area #view) > .view.narrow:where(:not(:has(#team-form, #asset-form, #member-list, #usage-month-form))) { max-width:1080px; }
:where(.main-area #view) > .view.rfp-view { max-width:1180px; }
/* the editor's stale-draft notice sits above the workbench */
:where(.main-area #view) > .view:where(:not(:has(#team-form, #asset-form, #member-list, #usage-month-form))) + .workbench { margin-top:16px; }

/* ---- older views: every rule in this block is scoped to an older view root and adds no weight ------------- */
:where(.main-area #view > :is(.view, .workbench):not(:has(#team-form, #asset-form, #member-list, #usage-month-form))) {
  /* ---- type scale ------------------------------------------------------------------------------------------ */
  h2 { font-size:20px; line-height:1.4; letter-spacing:-.01em; font-weight:700; color:var(--ink); }
  h3 { font-size:15px; line-height:1.45; font-weight:700; color:var(--ink); }
  h4 { font-size:13.5px; line-height:1.5; font-weight:700; color:var(--ink); margin:0; }
  h5 { font-size:13px; font-weight:700; color:var(--ink-2); }
  p { line-height:1.65; }
  p:not(.row, .banner, .error-box) { max-width:80ch; }
  :is(ul, ol) { line-height:1.65; padding-left:20px; margin:0; }
  li + li { margin-top:4px; }
  .small-text { font-size:12.5px; line-height:1.6; }
  small { font-size:12px; line-height:1.55; }
  .muted { color:var(--muted); }
  .eyebrow { font-size:11.5px; letter-spacing:.06em; color:var(--muted); font-weight:700; }
  a:not(.btn, .button-link) { color:var(--brand); font-weight:500; }
  :is(.source-text, .strategy-text) { line-height:1.75; font-size:13.5px; color:var(--ink-2); }
  /* page heading: title, badge on the right, a lead line under it */
  .section-heading { margin-bottom:24px; gap:6px; }
  .section-heading h2 { font-size:22px; }
  .lead { max-width:72ch; color:var(--ink-2); font-size:13.5px; line-height:1.65; }
  /* ---- 8px rhythm ------------------------------------------------------------------------------------------ */
  .stack { gap:16px; }
  .row { gap:8px; }
  .form-grid { gap:16px; }
  .rule { margin:16px 0; }
  .board-grid { gap:16px; }
  /* ---- card surfaces --------------------------------------------------------------------------------------- */
  :is(.board-card, .ai-result) {
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:20px 24px; gap:16px;
  }
  /* a top-level section or form that opens with its own heading is a card (final review, strategy, sections) */
  > :is(section, form):not(.board-card, .fold, .ai-result, .section-summary, .upload-form):has(> :is(h3, h4):first-child) {
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:20px 24px;
  }
  /* a card inside a card stays flat so the nesting reads as grouping, not as stacked paper */
  :is(.board-card, .fold, .ai-result, .section-summary) :is(.board-card, .ai-result) { box-shadow:none; border-radius:var(--r); padding:16px 20px; }
  .fold {
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:0 20px;
  }
  .fold[open] > summary { border-bottom:1px solid var(--line); margin-bottom:16px; }
  .fold[open] { padding-bottom:16px; }
  > details:not([class]) {
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:0 20px;
  }
  > details:not([class])[open] { padding-bottom:20px; }
  > details:not([class])[open] > summary { border-bottom:1px solid var(--line); margin-bottom:16px; }
  .section-summary {
    border:1px solid var(--line); border-left:3px solid var(--brand); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:20px 24px; gap:12px; background:var(--surface);
  }
  .section-summary .next-action { font-size:14px; line-height:1.65; }
  .upload-form {
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:16px 20px; gap:16px;
  }
  .rfp-review { border-top:1px solid var(--line); margin-top:24px; padding-top:24px; }
  .fold > .rfp-review { border-top:0; margin-top:0; padding-top:0; margin-bottom:0; }
  .rfp-save-bar { background:transparent; padding:16px 0; }
  .empty { padding:40px 24px; gap:12px; }
  .empty p { color:var(--ink-2); }
  /* number tiles (RFP 분석, 스토리보드 overview) as small cards */
  .rfp-overview { gap:16px; padding:0 0 24px; }
  .rfp-overview div {
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:14px 16px; gap:4px;
  }
  .rfp-overview strong { font-size:24px; letter-spacing:-.02em; line-height:1.25; }
  .rfp-overview span { color:var(--muted); font-size:12.5px; line-height:1.5; }
  .board-view .rfp-overview { margin:0 0 8px; }
  /* list items that are buttons: documents and section cards */
  .document-item {
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:12px 14px; gap:6px; font-weight:500; line-height:1.5; color:var(--ink);
  }
  .document-item:hover:not(:disabled) { background:var(--surface); border-color:var(--line-2); }
  .document-item[aria-current=true] { background:var(--brand-soft); border-color:var(--brand); box-shadow:none; }
  .document-item strong { font-size:13.5px; font-weight:700; }
  .document-item small { font-size:12px; }
  .document-item .next-step { color:var(--brand); font-weight:600; }
  .document-list { gap:8px; }
  .document-layout { gap:24px; }
  .section-grid { gap:8px; }
  .section-grid.compact .document-item { padding:10px 12px; gap:2px; }
  .source-unit { padding:16px 0; }
  /* history and review rows: one bordered disclosure per item */
  .history-item {
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:0 16px; box-shadow:var(--shadow);
  }
  .history-item[open] { padding-bottom:16px; }
  .history-item + .history-item { margin-top:8px; }
  .stack > .history-item + .history-item { margin-top:0; }
  .history-content { padding:16px 0 0; }
  .history-item[open] > summary { border-bottom:1px solid var(--line); }
  /* ---- disclosure rows: chevron, hover, the same padding everywhere ---------------------------------------- */
  :is(.view > details > summary, [data-section-step] > details > summary, details > summary) {
    list-style:none; cursor:pointer; position:relative; padding-left:30px; padding-right:10px; margin-inline:-10px; border-radius:8px;
    min-height:40px; padding-top:9px; padding-bottom:9px; line-height:1.55; color:var(--ink); transition:background-color .12s ease;
  }
  details > summary::-webkit-details-marker { display:none; }
  details > summary::before {
    content:""; position:absolute; left:13px; top:calc(9px + .775em - 4px); width:7px; height:7px;
    border-right:2px solid var(--faint); border-bottom:2px solid var(--faint); transform:rotate(-45deg); transition:transform .12s ease;
  }
  details[open] > summary::before { transform:rotate(45deg); top:calc(9px + .775em - 6px); }
  details > summary:hover { background:#f2f4f7; }
  details > summary:hover::before { border-color:var(--ink-2); }
  /* folds, top-level disclosures and history rows: taller rows, bold label (details.x keeps the generic rule's weight) */
  :is(details.fold, details.history-item) > summary,
  > details:not([class]) > summary { font-weight:700; padding-top:14px; padding-bottom:14px; }
  :is(details.fold, details.history-item) > summary::before,
  > details:not([class]) > summary::before { top:calc(14px + .775em - 4px); }
  :is(details.fold, details.history-item)[open] > summary::before,
  > details[open]:not([class]) > summary::before { top:calc(14px + .775em - 6px); }
  details.history-item > summary { font-weight:600; padding-top:12px; padding-bottom:12px; }
  details.history-item > summary::before { top:calc(12px + .775em - 4px); }
  details.history-item[open] > summary::before { top:calc(12px + .775em - 6px); }
  .rfp-sections > details { border-top:1px solid var(--line); }
  .rfp-sections summary span { float:right; color:var(--muted); font-weight:500; }
  /* ---- notices --------------------------------------------------------------------------------------------- */
  .banner {
    background:var(--surface-2); border:1px solid var(--line); border-left:3px solid var(--line-2); border-radius:var(--r);
    padding:12px 16px; font-size:13px; line-height:1.65; color:var(--ink-2);
  }
  .banner:has(.status.warn, .status.bad) {
    background:var(--warn-soft); border-color:#f9d3a8; border-left-color:var(--warn);
  }
  .banner strong { color:var(--ink); }
  .error-box {
    background:var(--bad-soft); border:1px solid #f6c6c0; border-left:3px solid var(--bad); border-radius:var(--r); padding:12px 16px; font-size:13px; line-height:1.65; color:var(--bad);
  }
  .conflict {
    background:var(--warn-soft); border:1px solid #f9d3a8; border-left:3px solid var(--warn); border-radius:var(--r); padding:16px; gap:16px;
  }
  /* status labels match the shell's chips */
  .status {
    gap:6px; padding:2px 10px; border:1px solid #b7e3cb; background:var(--ok-soft); color:var(--ok); border-radius:999px; font-size:12px; font-weight:600; line-height:1.5;
  }
  .status.warn { border-color:#f9d3a8; background:var(--warn-soft); color:var(--warn); }
  .status.bad { border-color:#f6c6c0; background:var(--bad-soft); color:var(--bad); }
  .status.neutral { border-color:var(--line); background:var(--surface-2); color:var(--ink-2); }
  /* ---- buttons: the shell's .btn, .btn.primary and .btn.ghost. Only plain and primary/quiet/small/danger buttons;
     buttons with their own role class (document-item, slide-item, coverage links …) keep their own look. */
  button:where(:not([class]), .primary, .quiet, .small, .danger),
  a.button-link {
    border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2); border-radius:8px; padding:8px 14px;
    font-weight:600; font-size:13.5px; line-height:1.4; box-shadow:0 1px 2px rgba(16,24,40,.05); text-decoration:none;
    display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:background-color .12s ease, border-color .12s ease;
  }
  /* a lone action in a grid column keeps its own width instead of stretching across the card */
  :is(.section-heading, .stack) > :is(button:where(:not([class]), .primary, .quiet, .small, .danger), .button-link) { justify-self:start; }
  button:where(:not([class]), .primary, .quiet, .small, .danger):hover:not(:disabled),
  a.button-link:hover { background:var(--surface-2); border-color:var(--line-2); }
  button.primary { background:var(--brand); border-color:var(--brand); color:#fff; }
  button.primary:hover:not(:disabled) { background:var(--brand-ink); border-color:var(--brand-ink); }
  button.quiet { background:transparent; border-color:transparent; box-shadow:none; color:var(--brand); }
  button.quiet:hover:not(:disabled) { background:var(--brand-soft); border-color:transparent; }
  button.small { padding:5px 10px; font-size:12.5px; border-radius:7px; gap:6px; }
  button.danger { color:var(--bad); }
  button.danger:hover:not(:disabled) { background:var(--bad-soft); }
  button:disabled { opacity:.5; box-shadow:none; }
  /* a quiet button that is a source link inside running text stays left-aligned and wraps */
  button.quiet.small { text-align:left; justify-content:flex-start; white-space:normal; }
  /* ---- form fields ----------------------------------------------------------------------------------------- */
  :is(select, textarea),
  input:where(:not([type=checkbox], [type=radio], [type=color], [type=file], [type=range])) {
    border:1px solid var(--line-2); border-radius:8px; background:var(--surface); color:var(--ink); padding:8px 12px;
    font-size:13.5px; font-weight:400; line-height:1.5; box-shadow:0 1px 2px rgba(16,24,40,.04); transition:border-color .12s ease, box-shadow .12s ease;
  }
  textarea { line-height:1.65; padding:10px 12px; }
  :is(input, select, textarea):hover:not(:disabled, :focus) { border-color:#b9c0cc; }
  :is(input, select, textarea):focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(21,94,69,.18); outline:none; }
  :is(input, select, textarea):disabled { background:var(--surface-2); color:var(--muted); }
  input:is([type=checkbox], [type=radio]) { accent-color:var(--brand); }
  input[type=file] { font-size:13px; color:var(--ink-2); border:1px dashed var(--line-2); border-radius:8px; background:var(--surface-2); padding:8px; }
  input[type=file]::file-selector-button {
    border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2); border-radius:7px; padding:5px 10px; font:inherit; font-weight:600; font-size:12.5px; margin-right:10px; cursor:pointer;
  }
  label.field { gap:6px; font-size:12.5px; font-weight:600; color:var(--ink-2); line-height:1.5; }
  .field small { font-weight:400; color:var(--muted); }
  .check { gap:8px; font-size:13px; line-height:1.6; color:var(--ink); }
  .check input { margin-top:4px; }
  fieldset {
    border:1px solid var(--line); border-radius:var(--r); background:var(--surface); padding:16px 20px; margin:0;
  }
  legend { padding:0 6px; font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--muted); }
  .item-editor { gap:16px; padding:20px; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); }
  .save-state { font-size:12.5px; }
  /* ---- tables ---------------------------------------------------------------------------------------------- */
  table {
    width:100%; border-collapse:separate; border-spacing:0; font-size:13px; line-height:1.55; font-variant-numeric:tabular-nums; text-align:left;
  }
  :is(th, td) {
    padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; overflow-wrap:anywhere;
  }
  thead th {
    position:sticky; top:0; z-index:1; background:var(--surface-2); color:var(--ink-2); font-size:12.5px; font-weight:700; border-bottom:1px solid var(--line-2);
  }
  tbody th { color:var(--ink-2); font-weight:600; }
  tbody tr:hover > :is(td, th) { background:#f9fafb; }
  tbody tr:last-child > :is(td, th) { border-bottom:0; }
  :is(td, th).num { text-align:right; white-space:nowrap; }
  /* a table straight in the page gets the card frame; one in a scroll wrapper gets it from the wrapper */
  table:not(.usage-table-wrap table, .ai-block-review table) {
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  }
  table:not(.usage-table-wrap table) thead th:first-child { border-top-left-radius:var(--r); }
  table:not(.usage-table-wrap table) thead th:last-child { border-top-right-radius:var(--r); }
  .usage-table-wrap {
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:auto;
  }
  /* data tables scroll inside their frame so the header stays in view; source grids already scroll in their fold */
  .usage-table-wrap:has(> .usage-table) { max-height:min(70vh, 720px); }
  .usage-table { font-size:13px; }
  .usage-table th { color:var(--ink-2); font-weight:700; }
  .usage-table :is(td, th) { padding:10px 12px; border-bottom:1px solid var(--line); }
  .ai-block-review th { background:var(--surface-2); }
  /* ---- focus rings ----------------------------------------------------------------------------------------- */
  :is(button, a, summary, [tabindex]):focus-visible {
    outline:2px solid var(--brand); outline-offset:2px;
  }
  :is(input:is([type=checkbox], [type=radio], [type=file])):focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
  .usage-table-wrap:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
}

/* empty states read like the 결과물 empty card */
:where(.main-area #view) > .view.empty {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:48px 32px; gap:12px; max-width:1080px;
}

/* ---- editor workbench ------------------------------------------------------------------------------------ */
:where(.main-area #view) > .workbench {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); overflow:clip; max-width:1600px;
}
:where(.main-area #view > .workbench) {
  .outline { background:var(--surface-2); padding:20px 16px; }
  .slide-list { gap:8px; }
  .slide-item { border-radius:var(--r); background:var(--surface); padding:10px; gap:6px; }
  .slide-item[aria-current=true] { border-color:var(--brand); background:var(--brand-soft); }
  .slide-mini { border-radius:6px; }
  .editor { padding:24px 28px 32px; }
  .editor-tools { background:var(--surface); padding:8px 0; margin-bottom:24px; border-bottom:1px solid var(--line); }
  .slide-preview { border-radius:var(--r); box-shadow:var(--shadow); }
  .slide-preview h2 { color:var(--brand); }
  .review-panel { background:var(--surface); padding:24px 20px; }
  .coverage-item { padding:16px 0; gap:8px; }
  .coverage-item .note { font-size:12.5px; line-height:1.6; padding-left:0; }
  .coverage-item .note::before { content:none; }
}

@media (prefers-reduced-motion: reduce) {
  :where(.main-area #view) * { transition:none !important; }
}