/* 모든 페이지 공통: 색상·글꼴·기본 요소·헤더·메뉴·버튼·푸터.
 * 각 HTML에서 이 파일을 먼저 읽고 해당 페이지 CSS를 읽습니다.
 */

:root {
  --color-ink: #17211f;
  --color-body: #68716e;
  --color-caption-subtle: #6b726f;
  --color-muted: #87928d;
  --color-line: #d7dedb;
  --color-paper: #f5f6f2;
  --color-surface: #fff;
  --color-dark: #1b2824;
  --color-accent: #d9ee6b;
  --color-brand-accent: #a9c51d;
  --color-accent-ink: #647817;
  --color-accent-soft: #edf3c2;
  --color-inverse-body: #aab7b1;
  --color-inverse-line: #526159;
  --color-pattern: var(--color-accent-ink);
  --pattern-opacity: 0.14;
  --pattern-opacity-mobile: 0.08;
  --pattern-grid-step: var(--space-16);
  --pattern-coordinate-step: 144px;
  --font-family: 'Noto Sans KR',sans-serif;
  --font-display: clamp(42px,5vw,64px);
  --font-heading: clamp(32px,4vw,48px);
  --font-subheading: 22px;
  --font-case-heading: 28px;
  --font-panel-heading: 40px;
  --font-result: 18px;
  --font-nav: 15px;
  --font-button: 14px;
  --font-label: 13px;
  --font-body: 15px;
  --font-reading: 16px;
  --font-small: 12px;
  --font-input: 16px;
  --leading-display: 1.2;
  --leading-heading: 1.3;
  --leading-body: 1.65;
  --leading-reading: 1.6;
  --leading-ui: 1.5;
  --space-section: 112px;
  --space-content: 56px;
  --space-group: 28px;
  --space-tight: 12px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --layout-width: 1160px;
  --layout-wide: 1440px;
  --layout-narrow: 600px;
  --page-gutter: 32px;
  --header-height: 82px;
  --copy-width: 560px;
  --control-height: 48px;
  --tracking-heading: -0.065em;
}

* {
  box-sizing: border-box;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  width: min(var(--layout-width), 100% - var(--page-gutter) * 2);
  margin: 0 auto;
}

/* Wide alignment is reserved for every header and the Home hero. */
.container.ui-container-wide {
  width: min(var(--layout-wide), 100% - var(--page-gutter) * 2);
}

.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand-mark {
  display: flex;
  gap: 2px;
  align-items: end;
  width: 25px;
  height: 22px;
}

.brand-mark i {
  display: block;
  width: 7px;
  background: var(--color-ink);
  border-radius: 4px 4px 0 0;
}

.brand-mark i:first-child {
  height: 11px;
}

.brand-mark i:nth-child(2) {
  height: 17px;
}

.brand-mark i:last-child {
  height: 22px;
  background: var(--color-brand-accent);
}

.brand-dot {
  color: var(--color-brand-accent);
}

.main-nav a:hover,
.header-cta:hover,
.ui-nav-link:hover {
  color: var(--color-accent-ink);
}

.button span {
  margin-left: 15px;
}

.menu-toggle {
  display: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

.button:hover {
  transform: none;
}

.button-dark:hover {
  background: #293b35;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: var(--space-8);
  padding-bottom: var(--space-8);
}

.brand-footer {
  color: #ffffff;
}

.brand-footer .brand-mark i {
  background: #ffffff;
}

.brand-footer .brand-mark i:last-child {
  background: var(--color-accent);
}

.footer-meta {
  display: flex;
  gap: var(--space-2) var(--space-6);
  flex-wrap: wrap;
  max-width: 740px;
  color: var(--color-inverse-body);
  font-size: var(--font-small);
}

.footer-bottom {
  border-top: 1px solid #47554e;
  padding-top: 17px;
  display: flex;
  justify-content: space-between;
  color: var(--color-inverse-body);
  font: var(--font-small)/1.7 var(--font-family);
}

html {
  scroll-behavior: smooth;
  font-family: var(--font-family);
  scroll-padding-top: 100px;
}

button,
input,
select,
textarea {
  font-family: var(--font-family);
}

:focus-visible {
  outline: 2px solid var(--color-accent-ink);
  outline-offset: 4px;
}

h1 {
  word-break: keep-all;
  overflow-wrap: anywhere;
  font-family: var(--font-family);
  font-size: var(--font-display);
  line-height: var(--leading-display);
}

h2 {
  word-break: keep-all;
  overflow-wrap: anywhere;
  font-family: var(--font-family);
  font-size: var(--font-heading);
  line-height: var(--leading-heading);
}

h3 {
  word-break: keep-all;
  overflow-wrap: anywhere;
  font-family: var(--font-family);
  font-size: var(--font-subheading);
  line-height: 1.4;
}

p {
  word-break: keep-all;
  overflow-wrap: anywhere;
  font-family: var(--font-family);
  font-size: var(--font-body);
  line-height: var(--leading-body);
}

.section-kicker {
  font-weight: 700;
  color: #718078;
  margin: 0 0 27px;
  font-family: var(--font-family);
  font-size: var(--font-small);
  line-height: 1.4;
  letter-spacing: 0.12em;
}
.section-kicker.ui-kicker-close { margin-bottom: var(--space-3); }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 700 22px var(--font-family);
  letter-spacing: -0.06em;
  font-family: var(--font-family);
}

.main-nav {
  display: flex;
  gap: 35px;
  margin-left: auto;
  margin-right: 35px;
}

.main-nav a,
.header-cta,
.ui-nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  white-space: nowrap;
  font: 500 var(--font-nav)/var(--leading-ui) var(--font-family);
  color: #4d5955;
}

.button {
  display: inline-flex;
  align-items: center;
  padding: 16px 21px;
  font-size: var(--font-button);
  font-weight: 700;
  line-height: var(--leading-ui);
  transition: background 0.2s, color 0.2s;
  font-family: var(--font-family);
}

body {
  margin: 0;
  line-height: 1.6;
  font-family: var(--font-family);
  color: var(--color-ink);
  background: var(--color-paper);
}

.site-footer {
  color: #ffffff;
  padding: 42px 0 23px;
  background: var(--color-dark);
}

.site-header .brand {
  flex-shrink: 0;
  white-space: nowrap;
}

.main-nav a[aria-current="page"],
.header-cta[aria-current="page"] {
  color: var(--color-accent-ink);
}

.site-header {
  height: var(--header-height);
  border-bottom: 1px solid rgba(23, 33, 31, 0.12);
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(245, 246, 242, 0.96);
  backdrop-filter: blur(8px);
}

.brand > span:last-child {
  font: 700 22px/1 var(--font-family);
  letter-spacing: -0.06em;
}

.brand-footer > span:last-child {
  font-size: 21px;
}

.footer-meta > span:first-child {
  font-size: var(--font-small);
  color: var(--color-inverse-body);
}

.button-dark {
  background: var(--color-dark);
  color: #ffffff;
}

@media (max-width: 800px) {

  :root {
    --layout-width: var(--layout-narrow);
    --page-gutter: 19px;
    --header-height: 70px;
  }

  .site-header {
    height: var(--header-height);
  }

  .main-nav {
    display: none;
  }

  .header-cta {
    margin-left: auto;
    margin-right: 16px;
  }

  .menu-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
  }

  .menu-toggle span {
    display: block;
    width: 22px;
    height: 1px;
    background: var(--color-ink);
  }

  .main-nav.is-open {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    top: var(--header-height);
    flex-direction: column;
    gap: 0;
    background: var(--color-paper);
    padding: 8px 19px 18px;
    border-bottom: 1px solid var(--color-line);
    margin: 0;
  }

  .main-nav.is-open a {
    padding: 11px 0;
  }

  .footer-top,
.footer-bottom {
    display: block;
  }

  .footer-meta {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 38px;
  }

  .footer-bottom span {
    display: block;
    margin-top: 8px;
  }

}

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,
::before,
::after {
    animation: none !important;
    transition: none !important;
  }

}

@media (max-width: 900px) {

  :root {
    --font-display: 40px;
    --font-heading: 34px;
    --font-subheading: 20px;
    --font-case-heading: 24px;
    --font-panel-heading: 32px;
    --font-body: 14px;
    --space-section: 84px;
    --space-content: 42px;
  }

}

@media (max-width: 560px) {

  .brand > span:last-child {
    font-size: 20px;
  }

}

/* 디자인 마스터 v1 — 새 영역은 이 공통 컴포넌트로 구성합니다.
 * 기존 페이지의 개별 스타일은 단계적으로 전환합니다. DESIGN_MASTER.md 참고.
 */
.ui-section {
  padding-block: var(--space-section);
}

/* 현재 섹션과 직접 이동: 넓은 PC 화면에서만 본문 밖 오른쪽에 표시. */
.ui-section-nav[hidden], .ui-section-nav [hidden] { display: none; }
.ui-section-nav {
  display: none;
  position: sticky;
  top: var(--header-height);
  z-index: 90;
  background: var(--color-surface);
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-line);
  font-size: var(--font-label);
  line-height: var(--leading-ui);
}
.ui-section-nav-status {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: var(--control-height);
  width: min(var(--layout-width), 100% - var(--page-gutter) * 2);
  margin-inline: auto;
}
.ui-section-nav-count { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-accent-ink); white-space: nowrap; }
.ui-section-nav-name { font-weight: 600; }
.ui-section-nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--color-ink);
  font: 600 var(--font-label)/var(--leading-ui) var(--font-family);
  cursor: pointer;
}
.ui-section-nav-toggle svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.ui-section-nav-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.ui-section-nav-list {
  position: absolute;
  top: 100%;
  right: var(--page-gutter);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(360px, 100% - var(--page-gutter) * 2);
  padding: var(--space-2);
  margin: 0;
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
}
.ui-section-nav-list a {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding-inline: var(--space-2);
  color: var(--color-body);
}
.ui-section-nav-list a:hover,
.ui-section-nav-list a:focus-visible,
.ui-section-nav-list a[aria-current="location"] { color: var(--color-accent-ink); background: var(--color-accent-soft); }
.ui-section-nav-list a[aria-current="location"] { font-weight: 600; }
.ui-section-nav-mark { display: block; width: 6px; height: 6px; flex: none; border: 1px solid currentColor; border-radius: 50%; }
.ui-section-nav-list a[data-passed="true"] .ui-section-nav-mark { background: var(--color-body); }
.ui-section-nav-list a[aria-current="location"] .ui-section-nav-mark { border-color: var(--color-accent-ink); background: var(--color-accent-ink); }
.ui-section-nav-progress { position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px; display: grid; grid-template-columns: repeat(var(--section-count, 8), 1fr); gap: 2px; }
.ui-section-nav-progress span { background: var(--color-line); }
.ui-section-nav-progress [data-reached="true"] { background: var(--color-accent-ink); }
/* Shared outer edges must not depend on a page's section navigator. */
@media (min-width: 1200px) {
  :root { --page-gutter: var(--space-16); }
  .ui-container-wide { --page-gutter: calc(var(--control-height) + var(--space-8)); }
}
@media (min-width: 1200px) and (min-height: 600px) {
  .ui-section-nav { display: block; position: fixed; top: calc(50% + var(--header-height) / 2); right: var(--space-3); width: var(--control-height); transform: translateY(-50%); border: 0; background: transparent; }
  .ui-section-nav-status { width: 100%; height: 36px; justify-content: center; gap: 0; border: 0; }
  .ui-section-nav-count { opacity: 0; }
  .ui-section-nav:is(:hover, :focus-within) .ui-section-nav-count { opacity: 1; }
  .ui-section-nav-name, .ui-section-nav-toggle, .ui-section-nav-progress { display: none; }
  .ui-section-nav-list { position: static; display: block; width: 100%; border: 0; padding: var(--space-1) 0; background: transparent; }
  .ui-section-nav-list a { justify-content: center; padding: 0; }
  .ui-section-nav-list a:is(:hover, :focus-visible, [aria-current="location"]) { background: transparent; }
  .ui-section-nav-mark { opacity: .55; }
  .ui-section-nav-list a:is(:hover, :focus-visible) .ui-section-nav-mark { opacity: 1; }
  .ui-section-nav-list a[aria-current="location"] .ui-section-nav-mark { width: 3px; height: 16px; border-radius: 2px; opacity: 1; }
  .ui-section-nav-label { position: absolute; right: calc(100% + var(--space-2)); white-space: nowrap; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-line); color: var(--color-ink); background: var(--color-surface); opacity: 0; pointer-events: none; }
  .ui-section-nav-list a:hover .ui-section-nav-label,
  .ui-section-nav-list a:focus-visible .ui-section-nav-label { opacity: 1; }
}

/* Opt-in page snapping. Expanded reading and reduced motion keep free scrolling. */
.ui-snap-page {
  scroll-snap-type: y mandatory;
  scroll-padding-top: var(--header-height);
}
.ui-snap-panel {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  scroll-margin-top: 0;
}
/* Every main snap panel fills the screen, including panels with a custom layout.
 * The compact footer is outside main; longer content still expands naturally.
 */
.ui-viewport-panel,
.ui-snap-page main > .ui-snap-panel {
  min-height: calc(100svh - var(--header-height));
}
.ui-viewport-panel {
  display: flex;
  align-items: center;
  padding-block: clamp(var(--space-6), 4svh, var(--space-16));
}
/* Interactive content grows downward without recentering the section heading. */
.ui-viewport-panel.ui-viewport-start {
  align-items: flex-start;
}
/* Natural-height sections must allow scrolling out of an oversized panel. */
.ui-snap-flow .ui-snap-panel {
  scroll-snap-stop: normal;
}
.ui-snap-page:has([data-snap-expand][open]) {
  scroll-snap-type: none;
}
/* Closed detail content must not extend a section's scrollable snap area. */
details[data-snap-expand]:not([open]) > :not(summary),
.ui-snap-page .ui-faq > details:not([open]) > :not(summary) {
  display: none;
}
@media (max-height: 700px), (max-width: 389px) {
  .ui-snap-page {
    scroll-snap-type: y proximity;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ui-snap-page {
    scroll-snap-type: none;
  }
}

.ui-display {
  font-size: var(--font-display);
  font-weight: 800;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-heading);
  margin: 0;
}

.ui-heading {
  font-size: var(--font-heading);
  font-weight: 700;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  margin: 0;
}

.ui-title {
  font-size: var(--font-subheading);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.04em;
  margin: 0;
}

.ui-panel-heading {
  font-size: var(--font-panel-heading);
  text-wrap: balance;
}

.ui-copy {
  max-width: var(--copy-width);
  font-size: var(--font-body);
  line-height: var(--leading-body);
  color: var(--color-body);
  margin: var(--space-6) 0 0;
}

/* Service name, definition and scope stay together as one introduction. */
.ui-service-intro > .ui-heading { letter-spacing: -0.04em; }
.ui-service-intro > .ui-title { margin-top: var(--space-3); }
.ui-service-intro > .ui-copy { margin-top: var(--space-4); }

.ui-caption {
  font-size: var(--font-small);
  line-height: 1.7;
  color: var(--color-body);
}
.ui-caption-subtle {
  color: var(--color-caption-subtle);
  font-weight: 400;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 긴 설명을 읽는 본문: 일반 소개 문구보다 크고 진하게 표시합니다. */
.ui-prose {
  max-width: var(--copy-width);
  color: var(--color-ink);
  font-size: var(--font-reading);
  line-height: var(--leading-reading);
}
.ui-prose p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}
.ui-prose p + p {
  margin-top: var(--space-2);
}
.ui-prose strong {
  font-weight: 600;
}

.ui-section-head {
  max-width: 760px;
  margin-bottom: var(--space-content);
}

.ui-section-head .section-kicker {
  margin-bottom: var(--space-6);
}

.ui-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

.ui-grid-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ui-card {
  min-width: 0;
  padding: var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
}

.ui-card .ui-copy {
  margin-top: var(--space-4);
}

.ui-card .ui-caption {
  margin: 0 0 var(--space-6);
}

.ui-card-accent {
  background: var(--color-accent-soft);
}
.ui-card-paper {
  background: var(--color-paper);
}
.ui-card-accent :is(.ui-copy, .ui-caption) {
  color: var(--color-ink);
}
.ui-card.ui-inverse {
  border-color: var(--color-dark);
}
.ui-card.ui-inverse .ui-caption {
  color: var(--color-accent);
}

/* 데이터 범위: 수집 대상을 이미지로 식별하고 항목에서 활용 업무로 읽습니다. */
.ui-data-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}
.ui-data-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
}
.ui-data-image {
  overflow: hidden;
}
.ui-data-image picture {
  display: block;
}
.ui-data-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.ui-data-card-heading {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-6) var(--space-6) 0;
}
.ui-data-card-heading .ui-step-number {
  margin: 0;
}
.ui-data-experience {
  margin: var(--space-2) var(--space-6) 0;
  font-size: var(--font-label);
  font-weight: 600;
  line-height: var(--leading-body);
  color: var(--color-accent-ink);
}
.ui-data-details {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin: 0;
}
.ui-data-details dt {
  font-size: var(--font-label);
  font-weight: 600;
  line-height: var(--leading-body);
}
.ui-data-details dd {
  margin: var(--space-2) 0 0;
  font-size: var(--font-body);
  line-height: var(--leading-body);
  color: var(--color-body);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.ui-data-fields {
  padding: var(--space-4) var(--space-6) var(--space-6);
}
.ui-data-result {
  margin-top: auto;
  padding: var(--space-4) var(--space-6);
  background: var(--color-accent-soft);
}
.ui-data-result dt {
  color: var(--color-ink);
}
.ui-data-result dd {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  color: var(--color-ink);
  font-weight: 600;
}
.ui-data-result dd + dd {
  margin-top: var(--space-1);
}
.ui-data-notes {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-6);
  margin-top: var(--space-3);
}
.ui-data-notes .ui-caption {
  margin: 0;
}
@media (min-width: 901px) and (max-height: 760px) {
  .ui-data-image img { aspect-ratio: 2 / 1; }
  .ui-data-card-heading { padding-top: var(--space-4); }
  .ui-data-fields { padding-block: var(--space-3) var(--space-4); }
}
@media (max-width: 900px) {
  .ui-data-gallery {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 업무별 상세 탐색: 도식·주제·문제·해결 방향을 하나의 링크로 묶습니다. */
.ui-index-link {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) 20px;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6);
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  transition: border-color 0.2s, background 0.2s;
}
.ui-index-visual {
  display: grid;
  place-items: center;
  min-height: 88px;
  background: var(--color-paper);
}
.ui-operation-symbol {
  display: block;
  width: 100%;
  max-width: 104px;
  height: auto;
  color: var(--color-body);
}
.ui-operation-symbol :is(path, rect, circle) {
  vector-effect: non-scaling-stroke;
}
.ui-index-content {
  min-width: 0;
}
.ui-index-link .ui-caption {
  display: block;
  margin: 0 0 var(--space-2);
}
.ui-index-link .ui-step-number {
  display: inline;
  margin: 0 var(--space-2) 0 0;
}
.ui-index-link .ui-title {
  display: block;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.ui-index-link .ui-copy {
  display: block;
  max-width: none;
  margin: var(--space-2) 0 0;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.ui-index-arrow {
  color: var(--color-accent-ink);
}
.ui-index-link:hover {
  border-color: var(--color-accent-ink);
}
.ui-index-link:hover .ui-index-visual,
.ui-index-link:focus-visible .ui-index-visual {
  background: var(--color-accent-soft);
}
@media (max-width: 560px) {
  .ui-index-link {
    grid-template-columns: 56px minmax(0, 1fr) 16px;
    gap: var(--space-3);
    padding: var(--space-4);
  }
  .ui-index-visual {
    min-height: 56px;
    align-self: start;
  }
}

.ui-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

/* Link arrows are authored in HTML: internal page →, section below ↓,
   external destination / new window / mail app ↗. Do not rotate with CSS. */
.ui-button {
  min-height: var(--control-height);
  justify-content: center;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.ui-button:hover {
  transform: none;
}

.button-outline {
  color: var(--color-ink);
  background: transparent;
  border-color: var(--color-line);
}

.button-outline:hover {
  background: var(--color-accent-soft);
  border-color: var(--color-accent-ink);
}

.ui-button:disabled {
  color: var(--color-body);
  background: var(--color-paper);
  border-color: var(--color-line);
  cursor: not-allowed;
}

.ui-link {
  font-size: var(--font-body);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 5px;
}

.ui-link:hover {
  color: var(--color-accent-ink);
}

.ui-title .ui-link {
  font: inherit;
}

.ui-callout {
  padding: var(--space-6) var(--space-8);
  border-left: 3px solid var(--color-accent-ink);
  background: var(--color-accent-soft);
}

.ui-callout p {
  margin: 0;
}

.ui-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.ui-flow li {
  min-width: 0;
  padding-top: var(--space-6);
  border-top: 2px solid var(--color-line);
}

.ui-flow li:last-child {
  border-color: var(--color-accent-ink);
}

.ui-step-number {
  display: block;
  font-size: var(--font-label);
  font-weight: 700;
  line-height: 1.6;
  color: var(--color-accent-ink);
  margin-bottom: var(--space-6);
}

.ui-flow .ui-copy {
  margin-top: var(--space-4);
}

.ui-case-brief > li {
  padding: var(--space-4);
}
.ui-case-brief > li:last-child {
  background: var(--color-accent-soft);
}
.ui-case-brief .ui-step-number {
  margin-bottom: var(--space-3);
  word-break: keep-all;
}
.ui-case-brief .ui-title {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.ui-case-brief .ui-copy {
  max-width: none;
  font-size: var(--font-reading);
  line-height: var(--leading-body);
  color: var(--color-ink);
  margin-top: var(--space-3);
}
/* 사례의 시작을 표시하는 번호와 업무 도식. 번호는 실적 수치가 아닙니다. */
.ui-chapter-marker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  color: var(--color-accent-ink);
}
.ui-chapter-number {
  font-size: var(--font-display);
  line-height: 1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-heading);
}
.ui-chapter-marker .ui-operation-symbol {
  width: 104px;
  flex-shrink: 0;
}
@media (max-width: 560px) {
  .ui-chapter-number {
    font-size: var(--font-panel-heading);
  }
}
@media (max-width: 900px) {
  .ui-case-brief {
    gap: var(--space-3);
  }
  .ui-case-brief > li {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
    padding: var(--space-3) var(--space-4);
  }
  .ui-case-brief .ui-step-number {
    margin: 0;
  }
  .ui-case-brief .ui-copy {
    display: none;
  }
}

.ui-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  margin-bottom: var(--space-6);
}

.ui-field label,
.ui-story dt,
.ui-label {
  font-size: var(--font-label);
  font-weight: 600;
  line-height: 1.6;
}

.ui-field input,
.ui-field select,
.ui-field textarea {
  width: 100%;
  min-height: var(--control-height);
  border: 1px solid var(--color-line);
  border-radius: 0;
  padding: var(--space-3) var(--space-4);
  color: var(--color-ink);
  background: var(--color-surface);
  font: var(--font-input)/1.6 var(--font-family);
}

.ui-field textarea {
  min-height: 128px;
  resize: vertical;
}

.ui-field input:focus-visible,
.ui-field select:focus-visible,
.ui-field textarea:focus-visible {
  border-color: var(--color-accent-ink);
}

.ui-field .ui-caption {
  margin: 0;
}

.ui-table-wrap {
  overflow-x: auto;
}

.ui-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  text-align: left;
  font-size: var(--font-body);
  line-height: var(--leading-body);
}

.ui-table th,
.ui-table td {
  border-bottom: 1px solid var(--color-line);
  padding: var(--space-4);
  vertical-align: top;
}

.ui-table th {
  color: var(--color-ink);
  font-weight: 700;
  background: var(--color-paper);
}

.ui-table td {
  color: var(--color-body);
}

.ui-table caption {
  text-align: left;
  font-size: var(--font-small);
  color: var(--color-body);
  padding-bottom: var(--space-4);
}

/* 데이터 종류·수집 항목을 읽은 뒤 활용 업무로 시선을 연결하는 표. */
.ui-table-outcomes :is(th, td) {
  padding: var(--space-6);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.ui-table-outcomes thead th {
  padding-block: var(--space-4);
  background: var(--color-dark);
  color: var(--color-surface);
  font-size: var(--font-label);
  font-weight: 600;
  border-color: var(--color-inverse-line);
}
.ui-table-outcomes thead th:last-child {
  color: var(--color-accent);
}
.ui-table-outcomes tbody :is(th, td) {
  background: var(--color-surface);
}
.ui-table-outcomes tbody td:last-child {
  background: var(--color-accent-soft);
  color: var(--color-ink);
  font-size: var(--font-reading);
  font-weight: 600;
}
.ui-table-outcome {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
.ui-table-outcome > [aria-hidden] {
  flex-shrink: 0;
  color: var(--color-accent-ink);
}
@media (max-width: 560px) {
  .ui-table-outcomes :is(th, td) {
    padding: var(--space-4);
  }
}

/* 상세로 이동하기 전, 업무 분류보다 해결 결과를 강조하는 짧은 사례 목록. */
.ui-case-topics {
  list-style: none;
  margin: 0;
  padding: var(--space-6) var(--space-8);
}
.ui-case-topics > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px;
  align-items: center;
  gap: var(--space-6);
  padding-block: var(--space-4);
}
.ui-case-topics > li + li {
  border-top: 1px solid var(--color-inverse-line);
}
.ui-case-topics .ui-label {
  color: var(--color-inverse-body);
  margin: 0 0 var(--space-2);
  font-weight: 400;
}
.ui-case-topics .ui-step-number {
  display: inline;
  margin: 0 var(--space-2) 0 0;
}
.ui-case-topics .ui-title {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
@media (max-width: 560px) {
  .ui-case-topics {
    padding: var(--space-3) var(--space-4);
  }
  .ui-case-topics > li {
    grid-template-columns: minmax(0, 1fr) 40px;
    gap: var(--space-3);
    padding-block: var(--space-3);
  }
  .ui-case-topics .ui-label {
    margin-bottom: var(--space-1);
  }
}

.ui-inverse {
  background: var(--color-dark);
  color: var(--color-surface);
}

.ui-inverse .ui-copy,
.ui-inverse .ui-caption,
.ui-inverse .section-kicker {
  color: var(--color-inverse-body);
}

.ui-inverse .ui-step-number {
  color: var(--color-accent);
}

.ui-inverse .ui-flow li {
  border-color: var(--color-inverse-line);
}

.ui-inverse .ui-flow li:last-child {
  border-color: var(--color-accent);
}

.ui-inverse :focus-visible {
  outline-color: var(--color-accent);
}

.ui-inverse .ui-link:hover {
  color: var(--color-accent);
}

.ui-inverse .ui-chapter-marker,
.ui-inverse .ui-operation-symbol .ui-accent,
.ui-inverse .ui-detail summary::after {
  color: var(--color-accent);
}
.ui-inverse .ui-operation-symbol {
  color: var(--color-inverse-body);
}
.ui-inverse .ui-case-brief > li:last-child {
  color: var(--color-ink);
}
.ui-inverse .ui-case-brief > li:last-child .ui-copy {
  color: var(--color-ink);
}
.ui-inverse .ui-case-brief > li:last-child .ui-step-number {
  color: var(--color-accent-ink);
}
.ui-inverse .button-outline {
  color: var(--color-surface);
  border-color: var(--color-inverse-line);
}
.ui-inverse .button-outline:hover {
  color: var(--color-ink);
  border-color: var(--color-accent);
}
.ui-inverse .ui-detail {
  border-color: var(--color-inverse-line);
}
/* 어두운 사례에서도 긴 근거는 밝은 읽기 영역에서 확인합니다. */
.ui-reading-surface {
  padding: var(--space-6);
  background: var(--color-surface);
  color: var(--color-ink);
}
.ui-reading-surface :is(.ui-copy, .ui-caption, .ui-detail > p) {
  color: var(--color-body);
}
.ui-reading-surface .ui-detail {
  border-color: var(--color-line);
}
.ui-reading-surface .ui-detail summary::after {
  color: var(--color-accent-ink);
}
.ui-reading-surface :focus-visible {
  outline-color: var(--color-accent-ink);
}

/* 선택형 선 배경: 실제 운영 도식과 분리된 정적인 시각 구획. */
.ui-line-backdrop {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.ui-line-backdrop::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: min(100%, 960px);
  height: 360px;
  background: var(--color-inverse-body);
  mask: url('../assets/architecture-lines.svg') right top / auto 100% no-repeat;
  opacity: var(--pattern-opacity);
  pointer-events: none;
}
@media (max-width: 560px) {
  .ui-line-backdrop::before {
    height: 240px;
    opacity: var(--pattern-opacity-mobile);
  }
}
@media (forced-colors: active) {
  .ui-line-backdrop::before {
    display: none;
  }
}

/* 공통 업무 설명: 글자·간격·조작 기준을 공유합니다.
 * 소개·운영 구조·사례 기록의 서로 다른 배치는 각 페이지 CSS가 담당합니다.
 */

/* 선택형 배경 장식. 본문·sticky 장면의 크기와 스크롤에는 관여하지 않습니다. */
.ui-pattern {
  position: relative;
  isolation: isolate;
}
.ui-pattern::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto auto;
  width: min(100%, 960px);
  height: min(100%, 640px);
  opacity: var(--pattern-opacity);
  pointer-events: none;
  transform: scale(var(--pattern-flip-x, 1), var(--pattern-flip-y, 1));
}
.ui-pattern-grid::before {
  background-image:
    linear-gradient(var(--color-pattern) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-pattern) 1px, transparent 1px);
  background-size: var(--pattern-grid-step) var(--pattern-grid-step);
  mask-image: radial-gradient(ellipse at right top, #000 8%, transparent 72%);
}
.ui-pattern-frame::before {
  background: var(--color-pattern);
  mask: url('../assets/section-frames.svg') right top / 100% auto no-repeat;
}
.ui-pattern-coordinates::before {
  background-image:
    radial-gradient(circle at 1px 1px, var(--color-pattern) 2px, transparent 2.5px),
    linear-gradient(var(--color-pattern) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-pattern) 1px, transparent 1px);
  background-size: var(--pattern-coordinate-step) var(--pattern-coordinate-step);
  background-position: var(--space-8) var(--space-8);
  mask-image: radial-gradient(ellipse at left bottom, #000 12%, transparent 90%);
}
.ui-pattern-left { --pattern-flip-x: -1; }
.ui-pattern-left::before { left: 0; right: auto; }
.ui-pattern-bottom { --pattern-flip-y: -1; }
.ui-pattern-bottom::before { top: auto; bottom: 0; }
.ui-pattern.ui-inverse { --color-pattern: var(--color-inverse-body); }
/* Use only the outer margin; keep contact fields and the image free of decoration. */
.ui-pattern-gutter::before {
  inset: 0 auto 0 0;
  width: max(0px, calc((100% - var(--layout-width)) / 2 - var(--space-8)));
  height: 100%;
  mask-image: linear-gradient(90deg, #000, transparent);
}
.master-pattern-example { min-height: 256px; }
@media (max-width: 560px) {
  .ui-pattern::before { opacity: var(--pattern-opacity-mobile); }
}
@media (forced-colors: active) {
  .ui-pattern::before { display: none; }
}

.ui-surface {
  background: var(--color-surface);
}
.ui-accent {
  color: var(--color-accent-ink);
}
/* Heading accents use the light lime token on charcoal surfaces. */
.ui-inverse :is(.ui-display, .ui-heading) .ui-accent {
  color: var(--color-accent);
}
.ui-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-16);
  align-items: start;
}
.ui-split > * {
  min-width: 0;
}
.ui-figure {
  margin: 0;
  min-width: 0;
}

/* Current country coverage. Geography indicates scope, not office locations. */
.ui-coverage-map { position: relative; width: 100%; max-width: 1000px; margin-inline: auto; }
.ui-coverage-world { display: block; width: 100%; height: auto; overflow: visible; }
.ui-coverage-land { fill: var(--color-inverse-line); fill-opacity: .15; stroke: var(--color-inverse-line); stroke-width: .6; }
.ui-coverage-dots { opacity: .5; }
.ui-coverage-world pattern circle { fill: var(--color-inverse-body); }
.ui-coverage-country-area { fill: var(--color-accent); fill-opacity: .38; stroke: var(--color-accent); stroke-opacity: .85; stroke-width: .8; vector-effect: non-scaling-stroke; }
.ui-coverage-world g:hover .ui-coverage-country-area { fill-opacity: .65; }
.ui-coverage-ring { fill: none; stroke: var(--color-accent); stroke-width: 1; stroke-opacity: .6; vector-effect: non-scaling-stroke; }
.ui-coverage-point { fill: var(--color-accent); }
.ui-coverage-summary { display: flex; align-items: flex-start; gap: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--color-inverse-line); }
.ui-coverage-summary > .ui-label { margin: 0; padding-top: var(--space-1); color: var(--color-inverse-body); flex-shrink: 0; }
.ui-coverage-regions {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-6);
  row-gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-reading);
  font-weight: 600;
  line-height: var(--leading-body);
}
.ui-coverage-regions li { display: flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.ui-coverage-regions li::before { content: ''; flex-shrink: 0; width: 5px; height: 5px; background: var(--color-accent); border-radius: 50%; }
.ui-coverage > .ui-caption { margin: var(--space-3) 0 0; }
@media (max-width: 600px) {
  .ui-coverage-summary { align-items: flex-start; flex-direction: column; gap: var(--space-3); }
  .ui-coverage-summary > .ui-label { padding-top: 0; }
}
.ui-figure img {
  display: block;
  width: 100%;
  height: auto;
}
/* 설명용 운영 화면과 데이터 예시. 실제 운영 화면·실적의 증거로 쓰지 않습니다.
 * SVG 안의 문자는 viewBox 기준이며 본문 글자 크기와 분리합니다.
 */
.ui-visual-example > figcaption {
  margin: var(--space-2) 0 0;
}
.ui-visual {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-line);
  font-family: var(--font-family);
  font-size: 24px;
  font-weight: 500;
  fill: var(--color-ink);
}
.ui-visual-label { font-size: 20px; font-weight: 600; }
.ui-visual-strong { font-weight: 700; }
.ui-visual-muted { fill: var(--color-body); font-size: 20px; }
.ui-visual-light { fill: var(--color-surface); }
.ui-visual-lime { fill: var(--color-accent); }
.ui-visual-paper { fill: var(--color-paper); }
.ui-visual-surface { fill: var(--color-surface); stroke: var(--color-line); }
.ui-visual-dark, .ui-visual-worker { fill: var(--color-dark); }
.ui-visual-accent { fill: var(--color-accent-soft); }
.ui-visual-lime-fill { fill: var(--color-accent); }
.ui-visual-outline { fill: none; stroke: var(--color-inverse-line); }
.ui-visual-rule { fill: none; stroke: var(--color-line); }
.ui-visual-dim-rule { fill: none; stroke: var(--color-inverse-line); stroke-width: 2; }
.ui-visual-route, .ui-visual-route-light, .ui-visual-device {
  fill: none;
  stroke: var(--color-accent-ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ui-visual-route-light { stroke: var(--color-accent); }
.ui-visual-device { stroke: var(--color-ink); stroke-width: 3; }
.ui-inverse .ui-visual { border-color: var(--color-inverse-line); }

/* 실제 텍스트·표로 읽는 규칙 검사 예시. 상태색은 승인 여부와 분리합니다. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.ui-check-demo {
  background: var(--color-surface);
  color: var(--color-ink);
  border: 1px solid var(--color-line);
  font-size: var(--font-body);
  line-height: var(--leading-body);
}
.ui-check-header {
  background: var(--color-dark);
  color: var(--color-surface);
  padding: var(--space-4) var(--space-6);
}
.ui-check-eyebrow {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
  color: var(--color-accent);
  font-size: var(--font-small);
  font-weight: 600;
  letter-spacing: .06em;
}
.ui-check-eyebrow span { color: var(--color-inverse-body); letter-spacing: 0; }
.ui-check-header .ui-title { color: inherit; }
.ui-check-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-6);
}
.ui-check-control {
  min-height: 44px;
  min-width: 88px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  color: var(--color-ink);
  font: 600 var(--font-button)/var(--leading-ui) var(--font-family);
  cursor: pointer;
}
.ui-check-control:hover { background: var(--color-paper); border-color: var(--color-accent-ink); }
.ui-check-control:focus-visible { outline: 2px solid var(--color-accent-ink); outline-offset: 3px; }
.ui-check-demo [hidden] { display: none; }
.ui-check-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  text-align: left;
}
.ui-check-table th, .ui-check-table td {
  padding: var(--space-2) var(--space-4);
  border-block: 1px solid var(--color-line);
  vertical-align: middle;
  overflow-wrap: anywhere;
}
.ui-check-table thead { background: var(--color-paper); font-size: var(--font-label); }
.ui-check-table thead th:first-child { width: 39%; }
.ui-check-table thead th:nth-child(2) { width: 30%; }
.ui-check-table tbody th { font-weight: 400; }
.ui-check-table td:nth-child(2) { word-break: keep-all; overflow-wrap: normal; }
.ui-check-table tbody tr { height: 64px; }
.ui-check-field { display: block; color: var(--color-body); font-size: var(--font-small); }
.ui-check-table strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-check-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 30px;
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-label);
  font-weight: 600;
  white-space: nowrap;
  background: var(--color-paper);
}
.ui-check-status svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[data-check-row][data-state="waiting"] .ui-check-status { color: var(--color-body); }
[data-check-row][data-state="waiting"] svg, [data-check-row][data-state="checking"] svg { display: none; }
[data-check-row][data-state="checking"] { background: var(--color-accent-soft); box-shadow: inset 3px 0 var(--color-accent-ink); }
[data-check-row][data-state="checking"] .ui-check-status { background: transparent; }
[data-check-row][data-state="pass"] .ui-check-status { background: var(--color-accent-soft); }
[data-check-row][data-state="missing"] .ui-check-status,
[data-check-row][data-state="review"] .ui-check-status { background: var(--color-dark); color: var(--color-surface); }
.ui-check-demo[data-playback] [data-state="pass"] .ui-check-status path {
  stroke-dasharray: 24;
  animation: ui-check-mark .24s ease-out both;
}
.ui-check-message {
  min-height: 78px;
  margin: 0;
  padding: var(--space-4) var(--space-6);
  font-size: var(--font-label);
  background: var(--color-paper);
}
.ui-check-approval {
  display: flex;
  align-items: start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-line);
  font-size: var(--font-label);
}
.ui-check-approval strong { font-weight: 600; word-break: keep-all; }
.ui-check-approval p { margin: var(--space-1) 0 0; color: var(--color-body); font-size: var(--font-small); }
.ui-check-person { flex: none; color: var(--color-accent-ink); }
.ui-check-person svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; }
/* 규칙 결과 옆의 의미 검수: 원문과 근거는 항상 표시하고 강조만 순서대로 바꿉니다. */
.ui-check-meaning { padding: var(--space-3) var(--space-6); background: var(--color-paper); border-top: 1px solid var(--color-line); }
.ui-check-meaning-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.ui-check-meaning-head .ui-label { margin: 0; }
.ui-check-meaning-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-2) 0; }
.ui-check-meaning-fields dt { color: var(--color-body); font-size: var(--font-small); }
.ui-check-meaning-fields dd { margin: 0; font-weight: 600; }
.ui-check-meaning-fields mark { background: transparent; color: inherit; }
.ui-check-meaning-reason { margin: 0; font-size: var(--font-label); }
.ui-check-meaning-reason strong { font-weight: 600; }
.ui-check-meaning[data-state="checking"] { box-shadow: inset 3px 0 var(--color-accent-ink); }
.ui-check-meaning[data-state="checking"] mark,
.ui-check-meaning[data-state="review"] mark { background: var(--color-accent-soft); }
.ui-check-meaning[data-state="review"] .ui-check-status { color: var(--color-surface); background: var(--color-dark); }
.ui-check-with-meaning .ui-check-table tbody tr { height: 56px; }
.ui-check-with-meaning .ui-check-approval { padding-block: var(--space-3); }
@keyframes ui-check-mark { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
@media (min-width: 901px) and (max-height: 760px) {
  .ui-check-header { padding-block: var(--space-3); }
  .ui-check-toolbar { min-height: 52px; padding-block: var(--space-1); }
  .ui-check-table tbody tr { height: 56px; }
  .ui-check-message { min-height: 68px; padding-block: var(--space-3); }
  .ui-check-approval { padding-block: var(--space-3); }
  .ui-check-with-meaning .ui-check-table tbody tr { height: 48px; }
  .ui-check-with-meaning .ui-check-table th, .ui-check-with-meaning .ui-check-table td { padding-block: var(--space-1); }
  .ui-check-with-meaning .ui-check-header { padding-block: var(--space-2); }
  .ui-check-meaning { padding-block: var(--space-2); }
  .ui-check-meaning-fields { margin-block: var(--space-1); }
}
@media (max-width: 560px) {
  .ui-check-header { padding: var(--space-4); }
  .ui-check-toolbar, .ui-check-message, .ui-check-approval { padding-inline: var(--space-3); }
  .ui-check-table th, .ui-check-table td { padding-inline: var(--space-2); }
  .ui-check-table thead th:first-child { width: 37%; }
  .ui-check-message { min-height: 120px; }
  .ui-check-status { padding-inline: var(--space-1); font-size: var(--font-small); }
  .ui-check-table td:nth-child(2) { font-size: var(--font-label); }
  .ui-check-meaning { padding-inline: var(--space-3); }
}
@media (prefers-reduced-motion: reduce) {
  .ui-check-demo .ui-check-status path { animation: none; }
}

/* Home 운영 흐름: 작업 분배·독립적인 완료 기록·사람 승인·전달의 관계. */
.ui-ops-frame { min-width: 0; container-type: inline-size; }
.ui-ops-demo .ui-check-header { padding: var(--space-3) var(--space-4); }
.ui-ops-demo .ui-check-eyebrow { margin-bottom: var(--space-2); letter-spacing: .03em; }
.ui-ops-board { padding: var(--space-4); }
.ui-ops-sources, .ui-ops-workers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.ui-ops-sources li { padding: var(--space-1); border: 1px solid var(--color-line); background: var(--color-paper); text-align: center; font-size: var(--font-label); font-weight: 600; }
.ui-ops-dispatch { position: relative; height: 48px; }
.ui-ops-dispatch > svg { display: block; width: 100%; height: 100%; }
.ui-ops-dispatch path, .ui-ops-connector path { fill: none; stroke: var(--color-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ui-ops-queue { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 88px; padding: 2px var(--space-3); border: 1px solid var(--color-line); background: var(--color-surface); font-size: var(--font-label); font-weight: 600; text-align: center; }
.ui-ops-label { display: flex; justify-content: space-between; gap: var(--space-2); margin: 0 0 var(--space-2); font-size: var(--font-small); font-weight: 600; }
.ui-ops-label span { color: var(--color-body); font-weight: 400; }
.ui-ops-worker { min-width: 0; padding: var(--space-2); border: 1px solid var(--color-line); background: var(--color-paper); text-align: center; }
.ui-ops-worker strong { display: flex; justify-content: center; align-items: center; gap: var(--space-1); font-size: var(--font-label); font-weight: 600; white-space: nowrap; }
.ui-ops-worker svg, .ui-ops-approval svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; }
.ui-ops-worker [data-ops-status] { display: block; margin-top: var(--space-1); font-size: var(--font-label); color: var(--color-body); }
.ui-ops-worker[data-state="active"] { background: var(--color-dark); border-color: var(--color-dark); color: var(--color-surface); }
.ui-ops-worker[data-state="active"] [data-ops-status] { color: var(--color-accent); }
.ui-ops-worker[data-state="done"] { border-color: var(--color-accent-ink); }
.ui-ops-worker[data-state="done"] [data-ops-status] { color: var(--color-accent-ink); }
.ui-ops-connector { display: block; width: 100%; height: 24px; }
.ui-ops-merge { height: 28px; }
.ui-ops-review { display: grid; grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr); gap: var(--space-1); align-items: center; }
.ui-ops-review-title { grid-column: 1 / -1; align-items: baseline; margin: 0; line-height: var(--leading-ui); }
.ui-ops-review .ui-ops-review-title strong { min-height: 0; font-size: var(--font-body); color: var(--color-accent-ink); white-space: nowrap; }
.ui-ops-review > div { padding: var(--space-2); border: 1px solid var(--color-line); background: var(--color-paper); text-align: center; }
.ui-ops-review strong { display: flex; align-items: center; justify-content: center; gap: var(--space-1); font-size: var(--font-label); font-weight: 600; word-break: keep-all; }
.ui-ops-review [data-ops-inspect-label], .ui-ops-review [data-ops-approval-label] { display: block; margin-top: var(--space-1); color: var(--color-body); font-size: var(--font-small); }
.ui-ops-arrow { color: var(--color-accent-ink); text-align: center; }
.ui-ops-review > [data-state="active"] { background: var(--color-accent-soft); border-color: var(--color-accent-ink); }
.ui-ops-review > [data-state="done"] { border-color: var(--color-accent-ink); }
.ui-ops-review > [data-state="done"] > span { color: var(--color-accent-ink); }
.ui-ops-delivery { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-1) var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-line); }
.ui-ops-delivery strong { display: block; font-size: var(--font-label); font-weight: 600; }
.ui-ops-delivery [data-ops-delivery-label] { display: block; font-size: var(--font-small); color: var(--color-body); }
.ui-ops-formats { font-size: var(--font-small); font-weight: 600; white-space: nowrap; }
.ui-ops-delivery[data-state="done"] { border-color: var(--color-accent-ink); background: var(--color-accent-soft); }
.ui-ops-toolbar { border-top: 1px solid var(--color-line); min-height: 60px; padding: var(--space-2) var(--space-4); background: var(--color-paper); }
.ui-ops-toolbar p { margin: 0; color: var(--color-accent-ink); }
.ui-ops-toolbar .ui-check-control { flex: none; }
.ui-ops-demo .ui-ops-packet { stroke: var(--color-accent-ink); stroke-width: 2; stroke-dasharray: 7 22; opacity: 0; }
.ui-ops-demo[data-playback="playing"]:is([data-ops-stage="0"], [data-ops-stage="1"]) .ui-ops-dispatch .ui-ops-packet,
.ui-ops-demo[data-playback="playing"][data-ops-stage="4"] .ui-ops-merge .ui-ops-packet,
.ui-ops-demo[data-playback="playing"][data-ops-stage="7"] .ui-ops-transfer .ui-ops-packet { opacity: 1; animation: ui-ops-flow 1.4s linear both; }
.ui-ops-demo[data-ops-stage="0"] .ui-ops-queue { border-color: var(--color-accent-ink); background: var(--color-accent-soft); }
.ui-ops-demo[data-playback="playing"] .ui-ops-worker[data-state="done"] { animation: ui-ops-record .3s ease-out both; }
@keyframes ui-ops-flow { from { stroke-dashoffset: 58; } to { stroke-dashoffset: 0; } }
@keyframes ui-ops-record { from { background: var(--color-accent-soft); } to { background: var(--color-paper); } }
/* Larger diagrams get room between steps; short windows keep the compact layout. */
@media (min-height: 820px) {
  @container (min-width: 620px) {
    .ui-ops-demo .ui-check-header { padding: var(--space-4) var(--space-6); }
    .ui-ops-board { padding: var(--space-6); }
    .ui-ops-sources li { padding-block: var(--space-2); }
    .ui-ops-dispatch { height: var(--space-16); }
    .ui-ops-worker, .ui-ops-review > div { padding-block: var(--space-3); }
    .ui-ops-worker strong, .ui-ops-review strong, .ui-ops-sources li, .ui-ops-delivery strong { font-size: var(--font-body); }
    .ui-ops-connector { height: var(--space-8); }
    .ui-ops-merge { height: var(--space-12); }
    .ui-ops-delivery { padding: var(--space-3) var(--space-4); }
    .ui-ops-toolbar { padding-inline: var(--space-6); }
  }
}
@media (max-width: 560px) {
  .ui-ops-demo .ui-check-eyebrow { flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
  .ui-ops-board { padding: var(--space-3); }
  .ui-ops-worker { padding-inline: var(--space-1); }
  .ui-ops-review { grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr); }
  .ui-ops-review strong { min-height: 42px; }
  .ui-ops-approval svg { display: none; }
  .ui-ops-review [data-ops-inspect-label], .ui-ops-review [data-ops-approval-label] { min-height: 40px; }
  .ui-ops-toolbar { min-height: 88px; padding-inline: var(--space-3); }
  .ui-ops-delivery { min-height: 92px; }
  .ui-ops-delivery [data-ops-delivery-label] { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-ops-demo .ui-ops-packet { display: none; }
  .ui-ops-demo[data-playback] .ui-ops-worker { animation: none; }
}

/* 작업 완료 기록: 실제 작업 단위의 독립 실행·재처리를 설명하는 예시. */
.ui-job-key {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-1) var(--space-4);
  border-top: 1px solid var(--color-line);
  background: var(--color-paper);
  color: var(--color-body);
  font-size: var(--font-small);
}
.ui-job-key span { color: var(--color-accent-ink); }
.ui-job-lanes { list-style: none; margin: 0; padding: 0; }
.ui-job {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(56px, 1fr) 84px;
  align-items: center;
  gap: var(--space-3);
  min-height: 64px;
  padding: var(--space-2) var(--space-6);
  border-bottom: 1px solid var(--color-line);
}
.ui-job-name { min-width: 0; }
.ui-job-name strong { display: block; font-weight: 600; }
.ui-job-name span { display: block; font-size: var(--font-small); color: var(--color-body); word-break: keep-all; }
.ui-job-state {
  padding: var(--space-1);
  text-align: center;
  font-size: var(--font-label);
  font-weight: 600;
  color: var(--color-body);
}
.ui-job-track { display: flex; justify-content: space-between; position: relative; isolation: isolate; }
.ui-job-track::before, .ui-job-track::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 5px;
  left: 6px;
  right: 6px;
  height: 2px;
  background: var(--color-line);
}
.ui-job-track::after { background: var(--color-accent-ink); transform: scaleX(0); transform-origin: left; transition: transform .3s ease-out; }
.ui-job-track i { width: 12px; height: 12px; border: 2px solid var(--color-line); border-radius: 50%; background: var(--color-surface); }
.ui-job[data-step="1"] .ui-job-track i:first-child,
.ui-job[data-step="2"] .ui-job-track i:not(:last-child),
.ui-job[data-step="3"] .ui-job-track i { border-color: var(--color-accent-ink); background: var(--color-accent); }
.ui-job[data-step="2"] .ui-job-track::after { transform: scaleX(.5); }
.ui-job[data-step="3"] .ui-job-track::after { transform: scaleX(1); }
.ui-job[data-stage="running"], .ui-job[data-stage="saving"] { background: var(--color-paper); }
.ui-job[data-stage="running"] .ui-job-state { color: var(--color-accent-ink); }
.ui-job[data-stage="saving"] .ui-job-state, .ui-job[data-stage="done"] .ui-job-state { background: var(--color-accent-soft); color: var(--color-ink); }
.ui-job[data-stage="retry"] .ui-job-state { background: var(--color-dark); color: var(--color-surface); }
.ui-job-records { padding: var(--space-2) var(--space-6); }
.ui-job-records > p { margin: 0 0 var(--space-1); }
.ui-job-records ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; gap: var(--space-2); margin: 0; padding: 0; }
.ui-job-records li {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  min-height: 36px;
  padding: var(--space-1);
  border: 1px dashed var(--color-line);
  color: var(--color-body);
  font-size: var(--font-label);
}
.ui-job-records li[data-saved="true"] { background: var(--color-accent-soft); border: 1px solid var(--color-accent-ink); color: var(--color-ink); }
.ui-job-records [data-record-label] { white-space: nowrap; }
.ui-job-records svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ui-job-records [data-saved="false"] svg { visibility: hidden; }
.ui-collection-demo[data-playback] [data-saved="true"] { animation: ui-job-record .24s ease-out both; }
.ui-collection-demo[data-playback] [data-saved="true"] path { stroke-dasharray: 24; animation: ui-check-mark .24s ease-out both; }
.ui-check-demo[data-playback="paused"] * { animation-play-state: paused; }
@keyframes ui-job-record { from { transform: translateY(3px); } to { transform: translateY(0); } }
@media (max-width: 560px) {
  .ui-job { gap: var(--space-2); padding-inline: var(--space-3); }
  .ui-job-records { padding-inline: var(--space-3); }
  .ui-job-records li { gap: var(--space-1); font-size: var(--font-small); }
}

/* 운영 설명 장면: 원문·후보·필드·판단 경계를 실제 HTML로 연결합니다. */
.ui-demo-route { list-style: none; margin: 0; padding: 0; }
.ui-demo-route > li {
  position: relative;
  display: grid;
  grid-template-columns: var(--space-6) minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-2) var(--space-6);
  border-top: 1px solid var(--color-line);
}
.ui-demo-route > li::before,
.ui-demo-route > li::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: calc(var(--space-2) + var(--space-1) + var(--space-3));
  left: calc(var(--space-6) + var(--space-3) - 1px);
  width: 2px;
  height: calc(100% + 1px);
  pointer-events: none;
}
.ui-demo-route > li::before { background: var(--color-line); }
.ui-demo-route > li::after { background: var(--color-accent-ink); transform: scaleY(0); transform-origin: top; }
.ui-demo-route > li:last-child::before,
.ui-demo-route > li:last-child::after { display: none; }
.ui-route-node {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: var(--space-6);
  height: var(--space-6);
  margin-top: var(--space-1);
  border: 1px solid var(--color-line);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-body);
  font-size: var(--font-small);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ui-route-content { min-width: 0; }
.ui-route-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.ui-demo-route .ui-step-number { flex: 0 0 var(--space-16); margin: 0; }
.ui-demo-route .ui-title { color: var(--color-ink); }
.ui-demo-route .ui-copy { margin: var(--space-1) 0 0; color: var(--color-body); font-size: var(--font-label); }
.ui-demo-route .ui-copy br { display: none; }
.ui-demo-route > li[data-sequence-state="seen"] { background: var(--color-paper); }
.ui-demo-route > li[data-sequence-state="seen"]::after { transform: scaleY(1); }
.ui-demo-route > li:is([data-sequence-state="active"], [data-sequence-state="seen"]) .ui-route-node {
  border-color: var(--color-accent-ink);
  background: var(--color-accent-ink);
  color: var(--color-surface);
}
.ui-demo-route > li[data-sequence-state="active"] .ui-route-node { outline: 3px solid var(--color-accent-soft); outline-offset: 2px; }
.ui-scene-demo[data-playback] .ui-demo-route > li[data-sequence-state="active"]::after { animation: ui-route-travel 2.2s linear both; }
.ui-scene-demo[data-playback="paused"] .ui-demo-route > li[data-sequence-state="active"]::after { animation-play-state: paused; }
@keyframes ui-route-travel { to { transform: scaleY(1); } }
@media (max-width: 560px) {
  .ui-demo-route > li::before, .ui-demo-route > li::after { left: calc(var(--space-3) * 2 - 1px); }
  .ui-demo-route .ui-step-number { flex-basis: 100%; }
  .ui-route-heading { gap: var(--space-1); }
}
.ui-demo-candidates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); padding: var(--space-3) var(--space-6); border-top: 1px solid var(--color-line); }
.ui-demo-window { min-width: 0; padding: var(--space-3); background: var(--color-paper); border: 1px solid var(--color-line); }
.ui-demo-window .ui-label { margin: 0 0 var(--space-2); }
.ui-scene-demo code { font: 500 var(--font-label)/var(--leading-body) var(--font-family); overflow-wrap: anywhere; }
.ui-demo-window code { display: block; min-height: 24px; color: var(--color-body); }
.ui-demo-value { min-height: 28px; margin-block: var(--space-2); font-weight: 600; }
.ui-demo-badge { display: inline-flex; align-items: center; min-height: 28px; padding: var(--space-1) var(--space-2); background: var(--color-paper); border: 1px solid var(--color-line); color: var(--color-ink); font-size: var(--font-small); font-weight: 600; }
.ui-demo-mapping { margin: 0; padding: 0 var(--space-6); }
.ui-demo-mapping > div { display: flex; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-2); border-bottom: 1px solid var(--color-line); }
.ui-demo-mapping dt { color: var(--color-body); }
.ui-demo-mapping dd { margin: 0; font-weight: 600; }
.ui-demo-gate { margin: var(--space-3) var(--space-6); padding: var(--space-3) var(--space-4); border-left: 3px solid var(--color-accent-ink); background: var(--color-accent-soft); }
.ui-demo-gate .ui-step-number { display: block; margin: 0 0 var(--space-1); }
.ui-demo-gate strong { display: block; font-weight: 600; }
.ui-demo-gate p { margin: var(--space-1) 0 0; color: var(--color-body); font-size: var(--font-label); }
.ui-demo-source, .ui-demo-summary, .ui-demo-delivery { padding: var(--space-3) var(--space-6); border-top: 1px solid var(--color-line); }
.ui-demo-source > .ui-label, .ui-demo-summary > .ui-label, .ui-demo-delivery > .ui-label { margin: 0 0 var(--space-2); }
.ui-demo-source > strong { display: block; font-weight: 600; }
.ui-demo-source blockquote { margin: 0; font-size: var(--font-subheading); font-weight: 600; line-height: var(--leading-body); word-break: keep-all; }
.ui-demo-source mark { background: var(--color-accent-soft); color: var(--color-ink); transition: background-color .24s ease; }
.ui-demo-analysis-table thead th:first-child { width: 23%; }
.ui-demo-analysis-table thead th:nth-child(2) { width: 23%; }
.ui-demo-analysis-table td:last-child { word-break: keep-all; }
.ui-demo-map-table thead th:first-child { width: 38%; }
.ui-demo-map-table thead th:nth-child(2) { width: 62%; }
.ui-demo-map-table td > span[aria-hidden] { color: var(--color-accent-ink); margin-right: var(--space-2); }
.ui-demo-summary > p:not(.ui-label) { margin: 0; min-height: 26px; font-weight: 600; }
.ui-demo-delivery ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.ui-demo-delivery li { padding: var(--space-2) var(--space-1); border: 1px solid var(--color-line); text-align: center; font-weight: 600; }
.ui-scene-demo .ui-check-header { padding-block: var(--space-3); }
.ui-scene-demo .ui-check-toolbar { min-height: 52px; padding-block: var(--space-1); }
.ui-scene-demo [data-demo-progress] { word-break: keep-all; }
.ui-scene-demo .ui-check-table tbody tr { height: 52px; }
.ui-scene-demo .ui-check-message { min-height: 78px; word-break: keep-all; }
.ui-scene-demo .ui-step-number { color: var(--color-accent-ink); }
.ui-scene-demo [data-sequence-state="active"]:not(mark) { background: var(--color-accent-soft); box-shadow: inset 3px 0 var(--color-accent-ink); }
.ui-scene-demo mark[data-sequence-state="active"] { background: var(--color-accent); }
.ui-scene-demo mark[data-sequence-state="waiting"] { background: transparent; }
.ui-scene-demo [data-reveal] { transition: opacity .24s ease; }
.ui-scene-demo [data-sequence-state="waiting"] [data-reveal] { opacity: 0; }
.ui-scene-demo[data-playback] [data-sequence-state="active"] [data-reveal] { animation: ui-job-record .24s ease-out both; }
.ui-scene-demo .ui-check-eyebrow { color: var(--color-accent); }
.ui-scene-demo .ui-label { color: var(--color-ink); }
.ui-scene-demo .ui-check-approval p { color: var(--color-body); }
.ui-scene-demo .ui-check-header .ui-title { color: var(--color-surface); }
@media (min-width: 901px) and (max-height: 760px) {
  .ui-demo-candidates, .ui-demo-source, .ui-demo-summary, .ui-demo-delivery { padding-block: var(--space-2); }
  .ui-scene-demo .ui-check-header, .ui-scene-demo .ui-check-approval { padding-block: var(--space-2); }
  .ui-scene-demo .ui-check-message { min-height: 68px; }
}
@media (max-width: 560px) {
  .ui-demo-route > li, .ui-demo-source, .ui-demo-summary, .ui-demo-delivery, .ui-demo-candidates { padding-inline: var(--space-3); }
  .ui-demo-candidates { gap: var(--space-2); }
  .ui-demo-window { padding: var(--space-2); }
  .ui-demo-window .ui-label { min-height: 42px; }
  .ui-demo-window .ui-demo-badge { padding-inline: var(--space-1); }
  .ui-demo-mapping { padding-inline: var(--space-3); font-size: var(--font-label); }
  .ui-demo-gate { margin-inline: var(--space-3); }
  .ui-demo-delivery ul { gap: var(--space-1); font-size: var(--font-label); }
  .ui-scene-demo .ui-check-message { min-height: 142px; }
}

/* 사례 원문과 설명용 장면. 데스크톱에서는 읽는 단계에 따라 시각 자료가 이어집니다. */
.ui-case-story { min-width: 0; }
.ui-story-chapters {
  padding: var(--space-8);
  background: var(--color-surface);
  color: var(--color-ink);
}
.ui-story-chapter {
  min-width: 0;
  scroll-margin-top: var(--space-6);
}
.ui-story-chapter + .ui-story-chapter {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-line);
}
.ui-story-chapter > .ui-step-number {
  margin: 0 0 var(--space-3);
  color: var(--color-accent-ink);
}
.ui-story-chapter > .ui-title { color: var(--color-ink); }
.ui-story-chapter > .ui-prose { margin-top: var(--space-4); }
.ui-story-chapters .ui-copy,
.ui-story-chapters .ui-caption,
.ui-story-chapters .ui-detail > p { color: var(--color-body); }
.ui-story-chapters .ui-detail { border-color: var(--color-line); }
.ui-story-chapters .ui-detail summary::after { color: var(--color-accent-ink); }
.ui-story-chapters .ui-button { color: var(--color-ink); border-color: var(--color-line); }
.ui-story-chapters :focus-visible { outline-color: var(--color-accent-ink); }
.ui-story-home:not(:empty) { margin-top: var(--space-6); }
.ui-story-board { display: none; min-width: 0; }
.ui-story-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: var(--space-3);
  border: 1px solid var(--color-line);
  background: var(--color-surface);
}
.ui-story-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-2);
  font-size: var(--font-label);
  font-weight: 600;
  color: var(--color-ink);
}
.ui-story-nav a + a { border-left: 1px solid var(--color-line); }
.ui-story-nav .ui-step-number { margin: 0; color: var(--color-accent-ink); }
.ui-story-nav a[aria-current="step"] {
  background: var(--color-accent-soft);
  box-shadow: inset 0 -3px var(--color-accent-ink);
}
.ui-story-legend {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-line);
}
.ui-story-legend .ui-copy {
  margin: 0;
  color: var(--color-body);
  font-size: var(--font-body);
  line-height: var(--leading-body);
}
.ui-story-legend .ui-check-control { margin: 0; }
.ui-story-note {
  padding: var(--space-3) var(--space-6);
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-line);
}
.ui-story-note .ui-label { margin: 0 0 var(--space-1); }
.ui-story-note strong { font-size: var(--font-reading); font-weight: 600; word-break: keep-all; }
.ui-story-path { list-style: none; margin: 0; padding: var(--space-3) var(--space-6); }
.ui-story-path li { display: grid; grid-template-columns: 30px 1fr; gap: var(--space-3); padding-block: var(--space-2); }
.ui-story-path li + li { border-top: 1px solid var(--color-line); }
.ui-story-path .ui-step-number { margin: 0; }
.ui-story-path strong { display: block; font-weight: 600; }
.ui-story-path div > span { display: block; margin-top: var(--space-1); font-size: var(--font-label); color: var(--color-body); }
.ui-story-chain { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); list-style: none; margin: 0; padding: var(--space-8) var(--space-6); }
.ui-story-chain li { position: relative; padding: var(--space-4) var(--space-3); border: 1px solid var(--color-line); background: var(--color-paper); }
.ui-story-chain li + li::before { content: '→'; position: absolute; left: -16px; top: 50%; width: 16px; text-align: center; transform: translateY(-50%); color: var(--color-accent-ink); }
.ui-story-chain .ui-story-held { border: 2px solid var(--color-accent-ink); background: var(--color-accent-soft); }
.ui-story-chain strong { display: block; margin: var(--space-3) 0; font-size: var(--font-reading); font-weight: 600; }
.ui-story-chain li > span:last-child { font-size: var(--font-label); }
.ui-story-state { display: inline-block; padding: var(--space-1) var(--space-2); background: var(--color-accent-soft); color: var(--color-accent-ink); font-size: var(--font-label); font-weight: 600; }
.ui-story-pending { background: var(--color-paper); color: var(--color-ink); border: 1px solid var(--color-line); }
.ui-story-table th:first-child { width: 42%; }
.ui-story-table:has(th:nth-child(3)) th:first-child,
.ui-story-table:has(th:nth-child(3)) th:nth-child(2) { width: 30%; }
.ui-story-table :is(th, td) { word-break: keep-all; overflow-wrap: anywhere; }
.ui-story-table td:last-child { background: var(--color-accent-soft); color: var(--color-ink); }
.ui-story-product { display: flex; align-items: center; gap: var(--space-6); padding: var(--space-4) var(--space-6); background: var(--color-paper); }
.ui-story-product svg { width: 140px; max-width: 40%; flex: none; color: var(--color-ink); }
.ui-story-product strong { display: block; font-size: var(--font-subheading); font-weight: 600; margin-top: var(--space-2); }
.ui-story-output { margin: var(--space-6) 0 0; padding: var(--space-4); border-left: 3px solid var(--color-accent-ink); background: var(--color-accent-soft); }
.ui-story-output dt { font-size: var(--font-label); font-weight: 600; }
.ui-story-output dd { margin: var(--space-2) 0 0; }
.ui-story-output-list { margin: 0; padding-left: var(--space-4); font-size: var(--font-reading); }
.ui-story-output-list li + li { margin-top: var(--space-1); }
.ui-story-fit { margin-top: var(--space-6); }
.ui-story-fit .ui-caption { margin: 0; }
.ui-story-fit .ui-copy { margin-top: var(--space-2); }
.ui-story-frame > figcaption { margin-top: var(--space-2); }
.ui-story-frame .ui-check-eyebrow { margin-bottom: var(--space-2); }
.ui-story-frame .ui-check-header .ui-title { word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; }
.ui-story-frame[data-story-frame="0"] .ui-demo-source mark { background: transparent; }
.ui-story-frame[data-story-motion="playing"] [data-story-reveal] {
  animation: ui-story-reveal .45s ease-out both;
  animation-delay: calc(var(--story-order, 0) * .32s);
}
@keyframes ui-story-reveal { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 1101px) and (min-height: 701px) {
  .ui-case-story[data-story-ready] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); align-items: start; }
  .ui-case-story[data-story-ready] .ui-story-board { display: block; position: sticky; top: calc(var(--header-height) + var(--space-6)); }
  .ui-story-stage { display: grid; }
  .ui-story-stage > .ui-story-frame { grid-area: 1 / 1; align-self: start; }
  .ui-story-stage > .ui-story-frame[data-story-active="false"] { visibility: hidden; pointer-events: none; }
}
@media (min-width: 901px) and (max-height: 760px) {
  .ui-case-story[data-story-ready] .ui-story-board { top: calc(var(--header-height) + var(--space-3)); }
  .ui-story-note, .ui-story-legend, .ui-story-product, .ui-story-path { padding-block: var(--space-3); }
  .ui-story-path li { padding-block: var(--space-2); }
}
@media (max-width: 1100px), (max-height: 700px) {
  .ui-story-chapters { padding: var(--space-6); }
  .ui-story-chapter + .ui-story-chapter { margin-top: var(--space-8); padding-top: var(--space-8); }
  .ui-story-chapters .ui-story-frame > .ui-caption { color: var(--color-body); }
}
@media (max-width: 560px) {
  .ui-story-chapters { padding: var(--space-4); }
  .ui-story-note, .ui-story-legend, .ui-story-path, .ui-story-product { padding-inline: var(--space-3); }
  .ui-story-product { gap: var(--space-3); }
  .ui-story-legend { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .ui-story-legend .ui-check-control { justify-self: start; }
  .ui-story-chain { grid-template-columns: minmax(0, 1fr); padding: var(--space-4) var(--space-3); }
  .ui-story-chain li { display: grid; grid-template-columns: 64px 1fr; align-items: center; column-gap: var(--space-2); padding: var(--space-3); }
  .ui-story-chain strong { margin: 0; }
  .ui-story-chain li > span:last-child { grid-column: 2; justify-self: start; }
  .ui-story-chain li + li::before { content: '↓'; top: -16px; left: 28px; transform: none; line-height: 16px; }
}

/* 단계 사이의 선은 처리 순서만 나타냅니다. 진행률이나 실시간 상태가 아닙니다. */
.ui-flow.ui-architecture {
  border: 1px solid var(--color-inverse-line);
  padding: var(--space-6);
  gap: var(--space-8);
}
.ui-architecture > li {
  position: relative;
  padding: var(--space-4);
  background: var(--color-dark);
  border: 1px solid var(--color-inverse-line);
}
.ui-architecture > li + li::before {
  content: "";
  position: absolute;
  width: var(--space-8);
  left: calc(-1 * var(--space-8) - 1px);
  top: 50%;
  border-top: 1px solid var(--color-inverse-line);
}
.ui-architecture > li:nth-child(3) {
  border-color: var(--color-accent);
}
@media (max-width: 900px) {
  .ui-architecture > li + li::before { display: none; }
}
@media (max-width: 560px) {
  .ui-flow.ui-architecture { padding: var(--space-4); gap: var(--space-4); }
  .ui-architecture > li + li::before {
    display: block;
    width: 0;
    height: var(--space-4);
    left: 50%;
    top: calc(-1 * var(--space-4) - 1px);
    border-top: 0;
    border-left: 1px solid var(--color-inverse-line);
  }
}
.ui-card-link {
  display: inline-block;
  align-self: flex-start;
  margin-top: var(--space-8);
}
.ui-evidence {
  border-top: 2px solid var(--color-accent-ink);
  padding-top: var(--space-6);
}
.ui-evidence > .ui-caption {
  margin: 0;
}
.ui-evidence > strong {
  display: block;
  color: var(--color-accent-ink);
  font-size: var(--font-heading);
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-heading);
  margin: var(--space-3) 0 var(--space-6);
}
.ui-evidence .ui-copy {
  margin-top: var(--space-4);
}
.ui-story {
  margin: var(--space-6) 0;
}
.ui-story > div + div {
  margin-top: var(--space-6);
}
.ui-story dt {
  color: var(--color-ink);
}
.ui-story dd {
  margin: var(--space-2) 0 0;
  font-size: var(--font-body);
  line-height: var(--leading-body);
  color: var(--color-body);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 사례는 한 행에 하나씩 읽습니다. 제목 → 문제·방법 → 업무 변화 → 상세 링크. */
.ui-case-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.ui-card.ui-case-summary {
  --case-inset: var(--space-6);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr);
  column-gap: var(--space-12);
  row-gap: var(--space-6);
  padding: var(--space-12) 0;
  border: 0;
  border-top: 1px solid var(--color-line);
}
.ui-case-list > .ui-case-summary:last-child {
  border-bottom: 1px solid var(--color-line);
}
.ui-case-summary-head {
  min-width: 0;
}
.ui-case-summary-head .ui-caption {
  margin: 0 0 var(--space-4);
  font-size: var(--font-label);
}
.ui-case-summary-head .ui-accent {
  font-weight: 700;
}
.ui-case-summary-head .ui-title {
  font-size: var(--font-case-heading);
  line-height: 1.4;
  letter-spacing: -0.04em;
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.ui-case-summary-head .ui-title > span {
  display: inline-block;
}
.ui-case-summary .ui-story {
  min-width: 0;
  margin: 0;
}
.ui-case-summary .ui-story > div {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: var(--space-6);
  margin: 0;
  padding-inline: var(--case-inset);
}
.ui-case-summary .ui-story > div + div {
  margin-top: var(--space-6);
}
.ui-case-summary .ui-story dt {
  color: var(--color-body);
  padding-top: 2px;
}
.ui-case-summary .ui-story dd {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--font-reading);
  line-height: var(--leading-body);
}
.ui-case-summary .ui-story strong {
  font-weight: 600;
}
.ui-case-summary .ui-story > .ui-story-outcome {
  padding-block: var(--space-6);
  background: var(--color-accent-soft);
}
.ui-case-summary .ui-story-outcome dt {
  color: var(--color-accent-ink);
}
.ui-case-summary .ui-story-outcome dd {
  font-size: var(--font-result);
  line-height: var(--leading-body);
}
.ui-case-summary-link {
  grid-column: 2;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--control-height);
  padding: 0 var(--case-inset);
  font-size: var(--font-reading);
}
.ui-case-summary-link span {
  flex-shrink: 0;
}
.ui-case-summary-link:hover {
  background: var(--color-paper);
}
@media (max-width: 900px) {
  .ui-card.ui-case-summary {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
    padding-block: var(--space-8);
  }
  .ui-case-summary-link {
    grid-column: 1;
  }
}
@media (max-width: 560px) {
  .ui-card.ui-case-summary {
    --case-inset: var(--space-4);
    gap: var(--space-6);
  }
  .ui-case-summary .ui-story > div {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }
  .ui-case-summary .ui-story dt {
    padding-top: 0;
  }
  .ui-case-summary .ui-story > .ui-story-outcome {
    padding-block: var(--space-4);
  }
}
.ui-faq details, .ui-detail {
  border-top: 1px solid var(--color-line);
}
/* Keep the same text inset in both states; only paint the active question. */
.ui-faq > details {
  padding-inline: var(--space-4);
}
.ui-faq > details[open] {
  background: var(--color-surface);
  box-shadow: inset 3px 0 var(--color-accent-ink);
}
.ui-faq > details[open] > summary {
  color: var(--color-accent-ink);
}

.ui-faq details:last-child, .ui-detail {
  border-bottom: 1px solid var(--color-line);
}
.ui-faq summary, .ui-detail summary {
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: var(--space-6);
  font-size: var(--font-body);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.ui-faq summary::-webkit-details-marker, .ui-detail summary::-webkit-details-marker {
  display: none;
}
.ui-faq summary::after, .ui-detail summary::after {
  content: "+";
  flex-shrink: 0;
  color: var(--color-accent-ink);
}
.ui-faq summary::after {
  display: grid;
  place-items: center;
  flex: 0 0 var(--space-6);
  height: var(--space-6);
  align-self: start;
  border-radius: 50%;
}
.ui-faq details[open] > summary::after {
  background: var(--color-accent-soft);
}
.ui-faq details[open] > summary::after, .ui-detail[open] > summary::after {
  content: "−";
}
.ui-faq p, .ui-detail > p {
  color: var(--color-body);
  font-size: var(--font-body);
  line-height: var(--leading-body);
  margin: 0 0 var(--space-6);
}
.ui-faq p {
  margin-bottom: 0;
  padding-bottom: var(--space-6);
}
.ui-cta {
  background: var(--color-accent-soft);
}
.ui-cta .ui-split {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
}
.ui-cta .ui-heading {
  font-size: var(--font-display);
  line-height: var(--leading-display);
}
.ui-cta .ui-copy {
  font-size: var(--font-result);
  margin-top: 0;
}
.ui-cta .ui-actions {
  margin-top: var(--space-12);
  gap: var(--space-6);
}
.ui-cta .ui-button {
  min-height: var(--space-16);
  padding: var(--space-4) var(--space-8);
  font-size: var(--font-reading);
}
@media (max-width: 389px) {
  .ui-cta .ui-heading {
    font-size: var(--font-heading);
  }
}
@media (max-width: 900px) {
  .ui-cta .ui-split {
    grid-template-columns: minmax(0, 1fr);
  }
  .ui-cta .ui-actions {
    margin-top: var(--space-8);
  }
}
@media (max-width: 900px) {
  .ui-split {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

/* 기준 화면의 설명용 배치. 고객 페이지에는 적용하지 않습니다. */
.design-master .master-hero {
  padding-block: var(--space-16);
}

.master-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-16);
}

.master-identity {
  padding: var(--space-8);
  background: var(--color-surface);
  border-top: 3px solid var(--color-accent-ink);
}

.master-identity .brand {
  margin-block: var(--space-6);
}

.master-toc {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
  padding-block: var(--space-6);
  border-block: 1px solid var(--color-line);
  font-size: var(--font-small);
  font-weight: 600;
}

.master-surface {
  background: var(--color-surface);
}

.master-section-number {
  color: var(--color-accent-ink);
  margin-right: var(--space-3);
}

.master-palette {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.master-swatch {
  min-width: 0;
  border: 1px solid var(--color-line);
  background: var(--color-surface);
}

.master-swatch-color {
  height: 104px;
  background: var(--swatch);
  border-bottom: 1px solid var(--color-line);
}

.master-swatch-copy {
  padding: var(--space-4);
}

.master-swatch-copy strong {
  font-size: var(--font-body);
}

.master-swatch-copy p {
  margin: var(--space-2) 0 0;
  font-size: var(--font-small);
  color: var(--color-body);
}

.master-token {
  display: block;
  font-family: var(--font-family);
  font-size: var(--font-small);
  overflow-wrap: anywhere;
  color: var(--color-body);
}

.master-subsection {
  margin-top: var(--space-16);
}

.master-subsection > .ui-title {
  margin-bottom: var(--space-8);
}

#typography > .ui-copy {
  margin-bottom: var(--space-8);
}

.master-type-row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
  padding-block: var(--space-8);
  border-top: 1px solid var(--color-line);
}

.master-type-row > .ui-caption {
  margin: 0;
}

.master-type-row .ui-copy,
.master-type-row .ui-actions,
.master-type-row .ui-field {
  margin: 0;
}

.master-spacing {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.master-space-bar {
  width: var(--space-example);
  max-width: 100%;
  height: var(--space-3);
  background: var(--color-accent-ink);
  margin-bottom: var(--space-3);
}

.master-page-outline {
  padding-left: 20px;
  font-size: var(--font-body);
  color: var(--color-body);
  line-height: var(--leading-body);
}

.master-page-outline li + li {
  margin-top: var(--space-2);
}

.master-component-group + .master-component-group {
  margin-top: var(--space-content);
}

.master-component-group > .ui-title {
  margin-bottom: var(--space-6);
}

@media (max-width: 900px) {
  .ui-grid,
  .ui-flow,
  .master-hero-grid {
    grid-template-columns: 1fr;
  }

  .master-hero-grid {
    gap: var(--space-8);
  }

  .master-palette {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .master-type-row {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

@media (max-width: 560px) {
  .ui-card {
    padding: var(--space-6);
  }

  .ui-callout {
    padding: var(--space-6);
  }

  .master-spacing {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .master-toc {
    gap: var(--space-4) var(--space-6);
  }
}