/* approval-doc.css: the approval document, its 결재란 (작성 · 검토 · 승인) and the 인주 seal.
   The one loud object on the site. State lives in data-state on .approval-doc:
   drafting | checking | awaiting | approved | cancelled | expired.
   Without JS the markup ships as data-state="awaiting": a static, truthful illustration.
   .is-live is added by approval-demo.js. Nothing changes height between states (no layout shift). */

.approval-doc { margin: 0; container-type: inline-size; }
.approval-doc__sheet {
  background: var(--sheet);
  border: var(--rule-w) solid var(--rule-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-doc);
  padding: var(--space-4);
}
@container (min-width: 30rem) { .approval-doc__sheet { padding: var(--space-6); } }

/* Head: kind and title on the left, 결재란 top-right as on Korean paperwork. */
.approval-doc__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4) var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 3px double var(--rule-strong);
}
.approval-doc__titles { flex: 1 1 12rem; }
.approval-doc__kind { margin: 0 0 var(--space-2); font-size: var(--step--1); color: var(--muted); }
.approval-doc__kind [lang="ko"] { font-weight: 600; color: var(--ink-2); }
.approval-doc__title { margin: 0; font-size: var(--step-1); font-weight: 600; line-height: 1.35; color: var(--ink); }

/* 결재란: a real table. Header cells over stamp cells. */
.kyeoljae {
  flex: none;
  margin: 0 0 0 auto;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.75rem;
  line-height: 1.25;
  text-align: center;
}
.kyeoljae th, .kyeoljae td { width: 5.75rem; border: var(--rule-w) solid var(--rule-strong); }
.kyeoljae th { padding: var(--space-1) var(--space-1) 0.375rem; font-weight: 400; background: var(--green-wash); vertical-align: top; }
.kyeoljae th [lang="ko"] { display: block; font-size: 0.875rem; font-weight: 600; color: var(--ink); line-height: 1.35; }
.kyeoljae__en { display: block; color: var(--ink-2); }
.kyeoljae td { position: relative; height: 4rem; padding: var(--space-1); vertical-align: middle; }
.kyeoljae__mark { display: block; font-weight: 600; color: var(--green); transition: opacity 0.3s ease; }
.kyeoljae__mark--approved, .kyeoljae__mark--cancelled, .kyeoljae__mark--expired { display: none; }

/* Which boxes are filled in which state. */
.approval-doc[data-state="drafting"] [data-box="drafted"] .kyeoljae__mark,
.approval-doc:is([data-state="drafting"], [data-state="checking"]) [data-box="checked"] .kyeoljae__mark {
  visibility: hidden;
  opacity: 0;
}
.approval-doc[data-state="awaiting"] [data-box="approval"] {
  background: var(--seal-wash);
  outline: 1.5px dashed var(--seal);
  outline-offset: -5px;
}
.approval-doc[data-state="approved"] .kyeoljae__mark--approved { display: block; }
.approval-doc[data-state="cancelled"] .kyeoljae__mark--cancelled,
.approval-doc[data-state="expired"] .kyeoljae__mark--expired { display: block; color: var(--ink-2); }

/* The 인주 seal: drawn in SVG, stamped once. */
.seal {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5rem;
  height: 5rem;
  transform: translate(-50%, -50%) rotate(-12deg);
  pointer-events: none;
  opacity: 0.94;
}
.seal__ring { fill: none; stroke: var(--seal); stroke-width: 7; }
.seal__ring--inner { stroke-width: 3; }
.seal__text { fill: var(--seal); font-family: var(--font-sans); font-size: 40px; font-weight: 600; letter-spacing: -1px; }
.approval-doc[data-state="approved"].is-live .seal { animation: seal-stamp 0.45s var(--ease-stamp) both; }
@media (prefers-color-scheme: light) { .seal { mix-blend-mode: multiply; } }
@keyframes seal-stamp {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(1.9) rotate(-3deg); }
  55% { opacity: 1; transform: translate(-50%, -50%) scale(0.9) rotate(-12deg); }
  78% { transform: translate(-50%, -50%) scale(1.04) rotate(-12deg); }
  100% { opacity: 0.94; transform: translate(-50%, -50%) scale(1) rotate(-12deg); }
}
@media (prefers-reduced-motion: reduce) {
  .approval-doc[data-state="approved"].is-live .seal { animation: none; }
  .kyeoljae__mark, .approval-doc__lines, .approval-doc__checks ul { transition: none; }
}

/* Request fields. */
.approval-doc__fields { margin: 0; }
.approval-doc__fields > div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: var(--rule-w) solid var(--rule);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.approval-doc__fields dt { color: var(--muted); font-size: var(--step--1); padding-top: 0.1rem; }
.approval-doc__fields .tag-approval { margin-left: var(--space-2); white-space: normal; }
@container (max-width: 21rem) {
  .approval-doc__fields > div { grid-template-columns: 1fr; gap: 0; }
  .approval-doc__fields .tag-approval { margin-left: 0; }
}

/* Draft on ruled ledger lines, and the checks the agents ran. */
.approval-doc__body { display: grid; gap: var(--space-4) var(--space-5); margin-top: var(--space-4); }
@container (min-width: 34rem) { .approval-doc__body { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.approval-doc__label { margin: 0 0 var(--space-1); font-size: var(--step--1); color: var(--muted); }
.approval-doc__lines {
  padding-left: var(--space-3);
  font-size: 0.9375rem;
  line-height: 1.75rem;
  color: var(--ink-2);
  background-image: linear-gradient(to bottom, transparent calc(100% - 1px), var(--rule) calc(100% - 1px));
  background-size: 100% 1.75rem;
  border-left: 2px solid var(--rule-strong);
  transition: opacity 0.3s ease;
}
.approval-doc__lines p { margin: 0; line-height: inherit; } /* keep Korean lines on the 1.75rem rules */
.approval-doc__checks ul { margin: 0; padding: 0; list-style: none; font-size: 0.9375rem; transition: opacity 0.3s ease; }
.approval-doc__checks li { margin: 0; padding: var(--space-1) 0; border-bottom: var(--rule-w) solid var(--rule); }
.approval-doc__checks li::before {
  content: "";
  display: inline-block;
  width: 0.45rem;
  height: 0.8rem;
  margin: 0 0.6rem 0.15rem 0.1rem;
  border: solid var(--green);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.approval-doc[data-state="drafting"] .approval-doc__lines,
.approval-doc:is([data-state="drafting"], [data-state="checking"]) .approval-doc__checks ul { opacity: 0; visibility: hidden; }

/* Footer: one live status line, the demo clock, the two buttons. In an end state the clock and
   buttons give way to the result and "Run the demo again" in the same row (no empty gap). */
.approval-doc__footer { margin-top: var(--space-5); padding-top: var(--space-4); border-top: var(--rule-w) solid var(--rule-strong); }
.approval-doc__status { margin: 0; font-weight: 600; line-height: 1.5; color: var(--ink); }

.approval-doc__clock { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-3); margin-top: var(--space-1); font-size: var(--step--1); color: var(--muted); }
.approval-doc__clock[hidden] { display: none; }
.approval-doc__countdown { color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.approval-doc:not([data-state="awaiting"]) [data-demo-pause] { visibility: hidden; }

/* End states: approved | cancelled | expired. */
.approval-doc:is([data-state="approved"], [data-state="cancelled"], [data-state="expired"]) :is(.approval-doc__clock, [data-demo-approve], [data-demo-cancel]) {
  display: none;
}
.approval-doc__replay { display: none; }
.approval-doc.is-live:is([data-state="approved"], [data-state="cancelled"], [data-state="expired"]) .approval-doc__replay { display: inline-flex; }

/* The action tag becomes the result. Red stays only for "needs your approval"; results differ by
   shape too: approved = check, cancelled = slash, not sent = dash. */
.approval-doc:is([data-state="approved"], [data-state="cancelled"], [data-state="expired"]) .approval-doc__tag {
  color: var(--ink-2);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--rule-strong);
}
.approval-doc:is([data-state="approved"], [data-state="cancelled"], [data-state="expired"]) .approval-doc__tag::before {
  width: 0.75rem;
  height: 0;
  border: 0;
  border-top: 2px solid currentColor;
  border-radius: 0;
}
.approval-doc[data-state="approved"] .approval-doc__tag { color: var(--green); background: var(--green-wash); box-shadow: none; }
.approval-doc[data-state="approved"] .approval-doc__tag::before {
  width: 0.375rem;
  height: 0.7rem;
  margin: -0.2rem 0.15rem 0 0.15rem;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.approval-doc[data-state="cancelled"] .approval-doc__tag::before { transform: rotate(-45deg); }

.approval-doc__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.approval-doc__actions > * { flex: 1 1 100%; }
@container (min-width: 26rem) { .approval-doc__actions > * { flex: 0 0 auto; } }

/* No-JS picture of the two chat buttons: inert labels, dashed so they do not read as controls. */
.approval-doc__fake {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  font-weight: 600;
  color: var(--ink-2);
  border: 1.5px dashed var(--rule-strong);
  border-radius: var(--radius-btn);
  cursor: default;
  user-select: none;
}
.approval-doc.is-live .approval-doc__fake { display: none; }

/* Caption under the sheet. */
.approval-doc__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-3);
  font-size: var(--step--1);
  color: var(--muted);
}
.approval-doc__caption > span { flex: 1 1 18rem; max-width: 40rem; }
.approval-doc__caption-live { display: none; }
.approval-doc.is-live .approval-doc__caption-live { display: inline; }
.approval-doc.is-live .approval-doc__caption-static { display: none; }