/* generated by tools/make_prism_css.py from DOC/01_기획/웹앱디자인시안/시안/pier.css — do not edit by hand */
@font-face { font-family: "Pretendard"; src: url("fonts/PretendardVariable.woff2") format("woff2-variations"); font-weight: 45 920; font-display: swap; }
/* PierProof — Prism app profile tokens (design.md 3.2 / 3.3) and components. Literals live only in :root. */
:root {
  --prism-bg-canvas: #F4F3F0; --prism-bg-card: #FFFFFF;
  --prism-text-body: #474235; --prism-text-heading: #1F524B; --prism-text-subtle: #474235; --prism-text-accent: #D05C26;
  --prism-border-default: #474235; --prism-border-strong: #1F524B;
  --prism-status-do: #005A4E; --prism-status-do-bg: #DCEAE6;
  --prism-status-dont: #8F2A11; --prism-status-dont-bg: #F6DFDA;
  --prism-status-caution: #6B4A00; --prism-status-caution-bg: #F5E7CC;
  --prism-status-tip: #0A4E86; --prism-status-tip-bg: #DDE8F3;
  --prism-space-025: 0.125rem; --prism-space-050: 0.25rem; --prism-space-100: 0.5rem; --prism-space-150: 0.75rem;
  --prism-space-200: 1rem; --prism-space-300: 1.5rem; --prism-space-400: 2rem; --prism-space-600: 3rem; --prism-space-800: 4rem;
  --prism-type-caption: 0.8125rem; --prism-lh-caption: 1.55; --prism-type-body-sm: 0.875rem; --prism-lh-body: 1.7;
  --prism-type-body: 1rem; --prism-type-body-lg: 1.125rem; --prism-type-title-sm: 1.25rem; --prism-lh-title: 1.5;
  --prism-type-title: 1.625rem; --prism-type-title-lg: 2rem;
  --prism-radius-sm: 4px; --prism-radius-md: 8px; --prism-radius-lg: 12px; --prism-radius-pill: 9999px;
  --prism-stroke-hairline: 1px; --prism-stroke-regular: 2px; --prism-stroke-bold: 3px;
  --prism-z-raised: 100; --prism-z-sticky: 200; --prism-z-scrim: 400; --prism-z-modal: 500;
  --prism-scrim: rgba(0, 0, 0, 0.32);
  --prism-motion-fast: 100ms; --prism-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --prism-focus-ring: 3px; --prism-focus-offset: 2px; --prism-measure-max: 38em;
  --prism-font: Pretendard, -apple-system, BlinkMacSystemFont, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

  --prism-comp-line: var(--prism-border-default); --prism-comp-line-strong: var(--prism-border-strong);
  --prism-comp-state-good-fg: var(--prism-status-do); --prism-comp-state-good-bg: var(--prism-status-do-bg);
  --prism-comp-state-bad-fg: var(--prism-status-dont); --prism-comp-state-bad-bg: var(--prism-status-dont-bg);
  --prism-comp-state-warn-fg: var(--prism-status-caution); --prism-comp-state-warn-bg: var(--prism-status-caution-bg);
  --prism-comp-state-info-fg: var(--prism-status-tip); --prism-comp-state-info-bg: var(--prism-status-tip-bg);
  --prism-comp-rail-width: 15rem; --prism-comp-header-height: 3.5rem; --prism-comp-hit-min: 2.75rem;
  --prism-comp-table-head-bg: var(--prism-bg-canvas);
  --prism-comp-on-emphasis: var(--prism-bg-card);
}
:root[data-theme="dark"] {
  --prism-bg-canvas: #111111; --prism-bg-card: #111111; --prism-text-body: #F4F3F0; --prism-text-heading: #F4F3F0;
  --prism-text-subtle: #D3D3D3; --prism-border-default: #D3D3D3; --prism-border-strong: #F4F3F0;
  --prism-status-do: #DCEAE6; --prism-status-do-bg: #005A4E; --prism-status-dont: #F6DFDA; --prism-status-dont-bg: #8F2A11;
  --prism-status-caution: #F5E7CC; --prism-status-caution-bg: #6B4A00; --prism-status-tip: #DDE8F3; --prism-status-tip-bg: #0A4E86;
}
.prism { font-family: var(--prism-font); font-size: var(--prism-type-body-sm); line-height: var(--prism-lh-body); color: var(--prism-text-body); font-variant-numeric: tabular-nums; margin: var(--prism-space-200) 0; }
.prism * { box-sizing: border-box; }
.prism a { color: var(--prism-text-heading); }
.prism h1, .prism h2, .prism h3, .prism p, .prism dl, .prism dd, .prism ol, .prism ul { margin: 0; padding: 0; }
.prism h2 { font-size: var(--prism-type-title-sm); line-height: var(--prism-lh-title); font-weight: 500; color: var(--prism-text-heading); }
.prism h3 { font-size: var(--prism-type-body-lg); font-weight: 700; color: var(--prism-text-heading); }
.prism textarea { height: auto; min-height: 5rem; width: 100%; font-family: var(--prism-font); }
.prism :focus-visible { outline: var(--prism-focus-ring) solid var(--prism-comp-line-strong); outline-offset: var(--prism-focus-offset); }
.prism .eyebrow {font-size: var(--prism-type-caption); font-weight: 500; letter-spacing: 0.06em;}
.prism .lead {max-width: var(--prism-measure-max); font-size: var(--prism-type-body);}
.prism .cap {font-size: var(--prism-type-caption);}
.prism .muted {color: var(--prism-text-subtle);}
.prism .row {display: flex; gap: var(--prism-space-200); align-items: center; flex-wrap: wrap;}
.prism .row.end {justify-content: flex-end;}
.prism .stack {display: flex; flex-direction: column; gap: var(--prism-space-200);}
.prism .grid3 {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--prism-space-300);}
.prism .grid2 {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--prism-space-300);}
.prism .split {display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--prism-space-300); align-items: start;}
.prism .grow {flex: 1;}
.prism .scope {background: var(--prism-bg-card); border: var(--prism-stroke-hairline) solid var(--prism-comp-line); padding: var(--prism-space-150) var(--prism-space-200);
  display: flex; gap: var(--prism-space-400); font-size: var(--prism-type-body-sm); border-radius: var(--prism-radius-sm);}
.prism .scope b {font-weight: 700;}
.prism .card {background: var(--prism-bg-card); border: var(--prism-stroke-hairline) solid var(--prism-comp-line); border-radius: var(--prism-radius-md); padding: var(--prism-space-200);
  display: flex; flex-direction: column; gap: var(--prism-space-150);}
.prism .card.sunken {background: var(--prism-bg-canvas);}
.prism .strip {background: var(--prism-bg-card); border: var(--prism-stroke-regular) solid var(--prism-comp-line-strong); border-radius: var(--prism-radius-md);
  padding: var(--prism-space-200) var(--prism-space-300); display: flex; flex-direction: column; gap: var(--prism-space-150);}
.prism .strip .concl {font-size: var(--prism-type-body-lg); font-weight: 700; color: var(--prism-text-heading); max-width: none;}
.prism .counts {display: flex; gap: var(--prism-space-200); flex-wrap: wrap; align-items: stretch;}
.prism .cnt {display: flex; align-items: baseline; gap: var(--prism-space-100); min-height: var(--prism-comp-hit-min); padding: 0 var(--prism-space-200);
  background: var(--prism-bg-card); border: var(--prism-stroke-regular) solid var(--prism-comp-line); border-radius: var(--prism-radius-sm); font: inherit; color: inherit; cursor: pointer;}
.prism .cnt b {font-size: var(--prism-type-title); font-weight: 700; line-height: 1.2;}
.prism .cnt.sel {background: var(--prism-text-heading); color: var(--prism-comp-on-emphasis); border-color: var(--prism-text-heading);}
.prism .banner {border: var(--prism-stroke-regular) solid var(--prism-comp-state-warn-fg); background: var(--prism-comp-state-warn-bg); color: var(--prism-comp-state-warn-fg);
  border-radius: var(--prism-radius-sm); padding: var(--prism-space-150) var(--prism-space-200); display: flex; gap: var(--prism-space-150); align-items: flex-start;}
.prism .banner b {font-weight: 700;}
.prism .banner.tip {border-color: var(--prism-comp-state-info-fg); background: var(--prism-comp-state-info-bg); color: var(--prism-comp-state-info-fg);}
.prism .banner.dont {border-color: var(--prism-comp-state-bad-fg); background: var(--prism-comp-state-bad-bg); color: var(--prism-comp-state-bad-fg);}
.prism .banner.good {border-color: var(--prism-comp-state-good-fg); background: var(--prism-comp-state-good-bg); color: var(--prism-comp-state-good-fg);}
.prism .banner .m {flex: none;}
.prism .b {display: inline-flex; align-items: center; gap: var(--prism-space-050); padding: var(--prism-space-025) var(--prism-space-100); white-space: nowrap;
  font-size: var(--prism-type-caption); font-weight: 500; line-height: 1.5; border: var(--prism-stroke-regular) solid var(--prism-comp-line);
  border-radius: var(--prism-radius-sm); color: var(--prism-text-body); background: transparent;}
.prism .b.good {color: var(--prism-comp-state-good-fg); background: var(--prism-comp-state-good-bg); border-color: var(--prism-comp-state-good-fg);}
.prism .b.warn {color: var(--prism-comp-state-warn-fg); background: var(--prism-comp-state-warn-bg); border-color: var(--prism-comp-state-warn-fg);}
.prism .b.info {color: var(--prism-comp-state-info-fg); background: var(--prism-comp-state-info-bg); border-color: var(--prism-comp-state-info-fg);}
.prism .b.bad {color: var(--prism-comp-state-bad-fg); background: var(--prism-comp-state-bad-bg); border-color: var(--prism-comp-state-bad-fg); border-width: var(--prism-stroke-bold);}
.prism .b.dash {border-style: dashed;}
.prism .b.fixed {color: var(--prism-comp-on-emphasis); background: var(--prism-text-heading); border-color: var(--prism-text-heading);}
.prism .b .m {font-size: 0.7em;}
.prism .btn {min-height: var(--prism-comp-hit-min); padding: 0 var(--prism-space-200); border-radius: var(--prism-radius-sm); font: inherit; font-weight: 500;
  cursor: pointer; border: var(--prism-stroke-regular) solid var(--prism-text-heading); background: var(--prism-bg-card); color: var(--prism-text-heading);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--prism-space-100); text-decoration: none; white-space: nowrap;}
.prism .btn.primary {background: var(--prism-text-heading); color: var(--prism-comp-on-emphasis);}
.prism .btn.quiet {border-color: transparent; background: transparent; text-decoration: underline;}
.prism .btn.danger {border-color: var(--prism-comp-state-bad-fg); color: var(--prism-comp-state-bad-fg);}
.prism .btn.sm {min-height: var(--prism-comp-hit-min); padding: 0 var(--prism-space-150); font-size: var(--prism-type-caption);}
.prism .field {display: flex; flex-direction: column; gap: var(--prism-space-050);}
.prism .field label, .prism .lbl {font-weight: 700; font-size: var(--prism-type-body-sm);}
.prism .req {font-weight: 500; font-size: var(--prism-type-caption); margin-left: var(--prism-space-100);}
.prism .field input, .prism .field select, .prism .field textarea {min-height: var(--prism-comp-hit-min); padding: var(--prism-space-100) var(--prism-space-150); font: inherit;
  color: var(--prism-text-body); background: var(--prism-bg-card); border: var(--prism-stroke-regular) solid var(--prism-comp-line); border-radius: var(--prism-radius-sm);}
.prism .field textarea {font-size: var(--prism-type-body-sm); line-height: 1.6; resize: none;}
.prism .field .help {font-size: var(--prism-type-caption);}
.prism .field.bad input, .prism .field.bad textarea {border-color: var(--prism-comp-state-bad-fg); border-width: var(--prism-stroke-bold);}
.prism .err {color: var(--prism-comp-state-bad-fg); font-size: var(--prism-type-caption); font-weight: 500; display: flex; gap: var(--prism-space-050);}
.prism .choice {display: flex; gap: var(--prism-space-300); align-items: center;}
.prism .choice label {display: inline-flex; align-items: center; gap: var(--prism-space-100); min-height: var(--prism-comp-hit-min); font-weight: 500;}
.prism .choice input {width: 1.25rem; height: 1.25rem; accent-color: var(--prism-text-heading);}
.prism .tw {overflow-x: auto; background: var(--prism-bg-card); border: var(--prism-stroke-hairline) solid var(--prism-comp-line); border-radius: var(--prism-radius-sm);}
.prism table.t {width: 100%; border-collapse: collapse; font-size: var(--prism-type-body-sm);}
.prism table.t caption {text-align: left; font-weight: 700; padding: var(--prism-space-100) var(--prism-space-150); color: var(--prism-text-heading);}
.prism table.t th, .prism table.t td {padding: var(--prism-space-100) var(--prism-space-150); border-bottom: var(--prism-stroke-hairline) solid var(--prism-comp-line); text-align: left; vertical-align: middle;}
.prism table.t thead th {position: sticky; top: 0; background: var(--prism-comp-table-head-bg); font-weight: 700; white-space: nowrap; border-bottom: var(--prism-stroke-regular) solid var(--prism-comp-line);}
.prism table.t td.num, .prism table.t th.num {text-align: right;}
.prism table.t tr.sel td {background: var(--prism-comp-table-head-bg);}
.prism table.t tr.sep td {background: var(--prism-comp-table-head-bg); font-weight: 700; color: var(--prism-text-heading);}
.prism table.t td a {font-weight: 700;}
.prism .chip {display: inline-block; border: var(--prism-stroke-hairline) solid var(--prism-comp-line); border-radius: var(--prism-radius-sm);
  padding: 0 var(--prism-space-100); font-size: var(--prism-type-caption); white-space: nowrap; background: var(--prism-bg-card);}
.prism dl.kv {display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--prism-space-100) var(--prism-space-300); font-size: var(--prism-type-body-sm);}
.prism dl.kv dt {font-weight: 700;}
.prism .pbar {height: 0.75rem; border: var(--prism-stroke-regular) solid var(--prism-comp-line); border-radius: var(--prism-radius-pill); overflow: hidden; background: var(--prism-bg-card);}
.prism .pbar > i {display: block; height: 100%; background: var(--prism-text-heading);}
.prism .list {list-style: none; display: flex; flex-direction: column;}
.prism .list li {display: flex; align-items: center; gap: var(--prism-space-100); min-height: var(--prism-comp-hit-min); padding: 0 var(--prism-space-150); border-bottom: var(--prism-stroke-hairline) solid var(--prism-comp-line);}
.prism .list li a {flex: 1; font-weight: 500; text-decoration: none;}
.prism .list li.cur {background: var(--prism-bg-canvas);}
.prism .list li.cur a {font-weight: 700;}
.prism .scroll {max-height: 18rem; overflow-y: auto; border: var(--prism-stroke-hairline) solid var(--prism-comp-line); border-radius: var(--prism-radius-sm);}
.prism .drawing {background: var(--prism-bg-card); border: var(--prism-stroke-regular) solid var(--prism-comp-line); border-radius: var(--prism-radius-sm); display: block; width: 100%; height: auto;}
.prism .toc a {display: flex; align-items: center; min-height: var(--prism-comp-hit-min); padding: 0 var(--prism-space-150); text-decoration: none; font-weight: 500; border-radius: var(--prism-radius-sm);}
.prism .toc a.cur {background: var(--prism-bg-canvas); font-weight: 700;}
.prism .toc ol {list-style: none;}
.prism .num {font-variant-numeric: tabular-nums;}
.prism pre.code {margin: 0; background: var(--prism-bg-canvas); border: var(--prism-stroke-hairline) solid var(--prism-comp-line); border-radius: var(--prism-radius-sm);
  padding: var(--prism-space-150); font-family: var(--prism-font); font-size: var(--prism-type-caption); line-height: 1.6; white-space: pre-wrap;}