/**
 * @framework-doc
 * {
 *   "schema": 1,
 *   "layer": "style",
 *   "role": "레지스트리 기반 공통 요소와 업무 UI 스타일",
 *   "responsibilities": [
 *     "레지스트리 기반 공통 요소와 업무 UI 스타일을 CSS 선택자와 반응형 규칙으로 정의한다.",
 *     "기본 글꼴·글자 크기·색상과 프레임 Z축 토큰(--frame-layer-*)을 :root에 단일 정의한다."
 *   ],
 *   "contracts": [
 *     "표시 스타일만 담당하며 업무 상태와 권한은 변경하지 않는다.",
 *     "Z축 토큰은 이 파일에서만 정의하고 다른 CSS는 var()로 참조한다."
 *   ],
 *   "related": ["public-news/stack.css", "tests/frame-layers.test.mjs"]
 * }
 * @end-framework-doc
 */
@import url('./ui-tokens.css?v=27e5d5f8b645e05332ee97ee56a4e51a3ea4c3324eb55bbc7beb79b1115c9832');

/* Single source of viewport layers. Pages and cards pick a token, never a number. */
:root {
  font-family: var(--ui-font-family);
  font-size: var(--ui-font-small);
  font-weight: var(--ui-font-weight-regular);
  line-height: var(--ui-line-body);
  color: var(--ui-color-accent-strong);
  background: var(--ui-color-background);
  font-synthesis: none;
  --frame-layer-content: 0;
  --frame-layer-sticky: 18;
  --frame-layer-card: 19;
  --frame-layer-chrome: 20;
  --frame-layer-navigation: 100;
  --frame-layer-panel: 200;
  --frame-layer-modal: 300;
  --frame-layer-alert: 400;
}

/* Shared public/admin mobile design primitives. */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
@media (max-width: 760px) {
  button,
  input,
  select,
  textarea {
    font: inherit;
  }
  button,
  a.button,
  .icon-button {
    min-height: var(--ui-touch);
  }
  input:not([type='checkbox']):not([type='radio']),
  select,
  textarea {
    font-size: var(--ui-font-body);
  }
  .panel,
  .feature-card,
  .stack-card {
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-none);
  }
  .page-intro .eyebrow,
  .feature-card-body .eyebrow {
    display: none;
  }
  .main-content {
    padding: var(--ui-space-12);
  }
  .page-intro {
    margin-bottom: var(--ui-space-12);
    gap: var(--ui-space-8);
  }
  .page-intro h1 {
    font-size: var(--ui-font-20);
    line-height: var(--ui-line-heading);
    margin: 0;
  }
  .page-intro p {
    font-size: var(--ui-font-small);
    line-height: var(--ui-line-body);
    margin: var(--ui-space-6) 0 0;
  }
  .page-intro .button {
    padding: var(--ui-space-6) var(--ui-space-10);
  }
  .topbar {
    position: sticky;
    top: 0;
    z-index: var(--frame-layer-chrome);
    height: 60px;
    padding: var(--ui-space-8) var(--ui-space-12);
    gap: var(--ui-space-8);
    background: var(--ui-color-surface);
  }
  .breadcrumb {
    gap: 0;
    flex-shrink: 0;
  }
  .breadcrumb strong,
  .topbar .profile-avatar,
  .topbar .notification {
    display: none;
  }
  .topbar-actions {
    flex: 1;
    min-width: 0;
    gap: var(--ui-space-4);
  }
  .top-search {
    display: flex !important;
    flex: 1;
    min-width: 0;
    width: auto;
    height: 44px;
    margin: 0;
    padding: 0 var(--ui-space-8);
  }
  .top-search input {
    width: 100%;
    min-width: 0;
    font-size: var(--ui-font-body);
  }
  .top-search input::placeholder {
    font-size: var(--ui-font-small);
  }
  .icon-button {
    min-width: 44px;
  }
  .news-source,
  .news-item,
  .news-release,
  .newsroom-summary {
    padding: var(--ui-space-12);
  }
  .newsroom-summary h2,
  .news-source h2,
  .news-item h2 {
    font-size: var(--ui-font-body);
    margin: 0 0 var(--ui-space-8);
  }
  .newsroom-summary p {
    font-size: var(--ui-font-small);
    line-height: var(--ui-line-body);
    margin: var(--ui-space-8) 0;
  }
  .news-actions {
    gap: var(--ui-space-6);
    flex-wrap: wrap;
  }
  .news-actions .button {
    font-size: var(--ui-font-small);
    padding: var(--ui-space-8) var(--ui-space-10);
  }
  .stack-settings-grid {
    gap: var(--ui-space-12);
  }
  .stack-settings-actions {
    position: static;
    padding: var(--ui-space-12);
    gap: var(--ui-space-8);
  }
  .stack-settings-actions .button {
    flex: 1 1 140px;
    font-size: var(--ui-font-small);
  }
  .stack-defaults li {
    padding: var(--ui-space-8) 0;
    gap: var(--ui-space-4);
  }
  .stack-defaults li div {
    flex-wrap: wrap;
    gap: var(--ui-space-4);
  }
  .feature-card-toolbar {
    padding: 0 var(--ui-space-12);
    min-height: 44px;
    gap: var(--ui-space-8);
    font-size: var(--ui-font-label);
  }
  .feature-card-body {
    padding: var(--ui-space-12);
    min-height: 0;
  }
  .feature-suggestions {
    position: static;
    padding: 0;
    gap: var(--ui-space-6);
    margin-bottom: var(--ui-space-12);
  }
  .feature-stack {
    gap: var(--ui-space-12);
  }
  .feature-card {
    scroll-margin-top: var(--ui-space-72);
  }
  .page-footer {
    padding: var(--ui-space-12);
    gap: var(--ui-space-6);
  }
}

/* L2 adapter: shared KRDS 1.1.0 profile; original L0 files remain unchanged. */
@font-face {
  font-family: 'Pretendard GOV';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./PretendardGOV-Regular.subset.woff2?v=27e5d5f8b645e05332ee97ee56a4e51a3ea4c3324eb55bbc7beb79b1115c9832') format('woff2');
}
@font-face {
  font-family: 'Pretendard GOV';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./PretendardGOV-Bold.subset.woff2?v=27e5d5f8b645e05332ee97ee56a4e51a3ea4c3324eb55bbc7beb79b1115c9832') format('woff2');
}
:root[data-public-service] {
  --dock-height: 116px;
  font-family: var(--ui-font-family);
  color: var(--ui-text);
  font-size: 100%;
  line-height: var(--ui-line-body);
  background: var(--ui-color-background);
}
body {
  background: var(--ui-color-surface);
  font-family: var(--ui-font-family);
  font-size: var(--ui-font-body);
  line-height: var(--ui-line-body);
  color: var(--ui-text);
}
button,
input,
select,
textarea {
  font-family: var(--ui-font-family);
}
:where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 2px;
}
.panel,
.feature-card,
.news-card,
.stack-card,
.side-box {
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow-none);
}
.button.primary,
.button.dark {
  background: var(--ui-accent);
  color: var(--ui-color-surface);
  border-color: var(--ui-accent);
}
.button.secondary {
  color: var(--ui-accent);
  border-color: var(--ui-accent);
  background: var(--ui-color-surface);
}
/* Action rows reflow before labels shrink. Keep Korean words and icons intact,
   including inside narrow cards and with enlarged text. */
.section-heading {
  flex-wrap: wrap;
}
.section-heading > :is(h2, h3, h4) {
  flex: 1 0 auto;
  max-width: 100%;
  word-break: keep-all;
}
.section-heading > :is(button, a.ui-button, a.button) {
  flex: 0 0 auto;
  max-width: 100%;
  min-height: var(--ui-touch);
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.section-heading > :is(button, a.ui-button, a.button) > svg {
  flex-shrink: 0;
}
.newsroom-summary p,
.news-source p,
.news-item p,
.news-release p,
.feature-card-body p {
  font-size: var(--ui-font-body);
  line-height: var(--ui-line-body);
  color: var(--ui-text);
}
label {
  color: var(--ui-text);
}
.muted,
.helper,
.dates,
.detail {
  color: var(--ui-muted);
}
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--frame-layer-chrome);
  height: 48px;
  padding: var(--ui-space-2) var(--ui-space-12);
  background: var(--ui-color-surface);
  border-bottom: 1px solid var(--ui-line);
}
.app-header-logo {
  border: 0;
  background: none;
  color: var(--ui-accent);
  font-size: var(--ui-font-18);
  font-weight: var(--ui-font-weight-bold);
  padding: 0;
  min-height: 44px;
  cursor: pointer;
}
.topbar-actions {
  flex: 0;
  gap: 0;
}
.topbar .logout {
  min-height: 44px;
  min-width: 44px;
}
.app-search-dock {
  position: fixed;
  z-index: var(--frame-layer-navigation);
  bottom: 0;
  left: 235px;
  right: 0;
  background: var(--ui-color-surface);
  border-top: 1px solid var(--ui-line);
  padding: var(--ui-space-8) var(--ui-space-12)
    calc(var(--ui-space-8) + env(safe-area-inset-bottom));
  box-shadow: var(--ui-shadow-popup);
}
.app-search-dock .top-search {
  display: flex !important;
  width: 100%;
  height: 44px;
  margin: 0;
  border: 1px solid var(--ui-line);
  background: var(--ui-color-surface);
  border-radius: var(--ui-radius);
  padding: var(--ui-space-8);
}
.app-search-dock input {
  width: 100%;
  font-size: var(--ui-font-body);
}
.app-search-dock input::placeholder {
  font-size: var(--ui-font-body);
}
.app-search-dock .feature-suggestions {
  position: static;
  padding: 0 0 var(--ui-space-4);
  margin: 0;
  background: var(--ui-color-surface);
  display: flex;
  gap: var(--ui-space-4);
  overflow: auto;
}
.app-search-dock .feature-suggestions button {
  font-size: var(--ui-font-small);
  min-height: 40px;
  white-space: nowrap;
  padding: var(--ui-space-4) var(--ui-space-8);
  border-radius: var(--ui-radius);
}
.main-shell {
  padding-bottom: calc(var(--dock-height) + env(safe-area-inset-bottom));
}
@media (max-width: 760px) {
  .app-search-dock {
    left: 0;
  }
  .topbar {
    height: 48px;
  }
  .stack-settings-actions {
    position: static;
  }
  .newsroom-summary p {
    font-size: var(--ui-font-body);
  }
  .topbar-actions {
    flex: 0;
  }
  .feature-card-body {
    min-height: 0;
  }
  .page-intro p {
    font-size: var(--ui-font-label);
  }
  .login-panel {
    padding: var(--ui-space-20);
  }
  .topbar .icon-button {
    min-height: 44px;
  }
}
.app-search-dock .feature-suggestions a {
  font-size: var(--ui-font-small);
  min-height: 40px;
  white-space: nowrap;
  padding: var(--ui-space-4) var(--ui-space-8);
  border-radius: var(--ui-radius);
  flex-shrink: 0;
}
.topbar-actions {
  flex: 0 0 auto;
  min-width: 44px;
}
.app-header-logo {
  flex: 0 0 auto;
}
.topbar {
  gap: var(--ui-space-8);
}
.newsroom-summary label,
.news-message,
.news-history,
.news-source dl,
.news-release small,
.news-item small {
  font-size: var(--ui-font-label);
  line-height: var(--ui-line-body);
  color: var(--ui-text);
}
.newsroom-summary input,
.newsroom-summary select,
.newsroom-summary textarea {
  font-size: var(--ui-font-body);
  border-color: var(--ui-line);
}
.news-actions .button,
.stack-settings-actions .button {
  font-size: var(--ui-font-label);
  min-height: 44px;
}
.stack-defaults button {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  color: var(--ui-accent);
}
@media (max-width: 760px) {
  .topbar-actions {
    flex: 0 0 auto;
  }
  .hero-art {
    display: none;
  }
  .hero {
    min-height: 0;
    padding: var(--ui-space-16);
  }
  .page-intro h1 {
    font-size: var(--ui-font-20);
  }
  .app-search-dock .feature-suggestions {
    max-width: 100%;
  }
}
@media (forced-colors: active) {
  button,
  a,
  input {
    forced-color-adjust: auto;
  }
  .stack-card,
  .panel,
  .stack-dock {
    border: 1px solid CanvasText;
  }
}

/* Shared primitives. Feature classes add layout, not a separate visual theme. */
.ui-button,
.ui-button.small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-8);
  min-height: var(--ui-control-height);
  padding: var(--ui-space-8) var(--ui-space-12);
  border: 1px solid var(--ui-color-border);
  border-radius: var(--ui-radius);
  background: var(--ui-color-surface);
  color: var(--ui-color-accent);
  font-size: var(--ui-font-label);
  font-weight: var(--ui-font-weight-bold);
  line-height: var(--ui-line-body);
  cursor: pointer;
  transition:
    background var(--ui-motion),
    color var(--ui-motion);
}
.ui-button:hover:not(:disabled) {
  background: var(--ui-color-accent-soft);
  transform: none;
}
.ui-button.primary,
.ui-button.dark {
  border-color: var(--ui-color-accent);
  background: var(--ui-color-accent);
  color: var(--ui-color-on-accent);
}
.ui-button.primary:hover:not(:disabled),
.ui-button.dark:hover:not(:disabled) {
  background: var(--ui-color-accent-hover);
}
.ui-button.secondary {
  border-color: var(--ui-color-accent);
  color: var(--ui-color-accent);
}
.ui-button.danger-fill {
  background: var(--ui-color-danger);
  border-color: var(--ui-color-danger);
  color: var(--ui-color-on-accent);
}
.ui-button.danger-fill:hover:not(:disabled) {
  background: var(--ui-color-danger);
}
.ui-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ui-card {
  border: 1px solid var(--ui-color-border);
  border-radius: var(--ui-radius);
  background: var(--ui-color-surface);
  color: var(--ui-color-text);
  box-shadow: var(--ui-shadow-none);
}
.ui-card.panel,
.ui-card.membership-editor {
  padding: var(--ui-space-16);
}
.ui-input:not([type='checkbox']):not([type='radio']) {
  min-height: var(--ui-control-height);
  padding: var(--ui-space-8) var(--ui-space-12);
  border: 1px solid var(--ui-color-border);
  border-radius: var(--ui-radius);
  background: var(--ui-color-surface);
  color: var(--ui-color-text);
  font-size: var(--ui-font-body);
  line-height: var(--ui-line-body);
}
.ui-input::placeholder {
  color: var(--ui-color-muted);
  font-size: var(--ui-font-label);
}
.ui-input:focus {
  border-color: var(--ui-color-accent);
  box-shadow: var(--ui-shadow-none);
  outline: 2px solid var(--ui-color-accent);
  outline-offset: 2px;
}
.ui-input[type='checkbox'],
.ui-input[type='radio'] {
  accent-color: var(--ui-color-accent);
}
.ui-badge {
  border-radius: var(--ui-radius);
  font-size: var(--ui-font-small);
  font-weight: var(--ui-font-weight-bold);
  line-height: var(--ui-line-body);
  background: var(--ui-color-background);
  color: var(--ui-color-muted);
}
.ui-badge.green {
  color: var(--ui-color-success);
  background: var(--ui-color-success-soft);
}
.ui-badge.orange {
  color: var(--ui-color-warning);
  background: var(--ui-color-warning-soft);
}
.ui-notice {
  color: var(--ui-color-warning);
  background: var(--ui-color-warning-soft);
  border-color: var(--ui-color-warning);
  border-radius: var(--ui-radius);
  font-size: var(--ui-font-label);
  line-height: var(--ui-line-body);
}
.ui-help,
.ui-muted {
  color: var(--ui-color-muted);
  font-size: var(--ui-font-small);
  line-height: var(--ui-line-body);
}
.ui-dialog {
  color: var(--ui-color-text);
  background: var(--ui-color-surface);
  border-radius: var(--ui-radius);
}
.ui-header.topbar,
.ui-header.stack-top {
  min-height: var(--ui-header-height);
  background: var(--ui-color-accent-hover);
  color: var(--ui-color-on-accent);
  border-bottom: 0;
}
.ui-header .app-header-logo,
.ui-header .icon-button,
.ui-header .logo {
  color: var(--ui-color-on-accent);
}
.news-message.error,
.settings-message.failed,
.toast.error {
  color: var(--ui-color-danger);
  background: var(--ui-color-danger-soft);
  border-color: var(--ui-color-danger);
}

.feature-card-toolbar,
.stack-card-head {
  min-height: var(--ui-control-height);
  padding: 0 var(--ui-space-12);
  background: var(--ui-color-accent-soft);
  color: var(--ui-color-accent-hover);
  font-size: var(--ui-font-body);
  font-weight: var(--ui-font-weight-bold);
}
@media (max-width: 760px) {
  .main-content:has(> .feature-stack) {
    padding: 0;
  }
  .ui-card.feature-card {
    border: 0;
    border-radius: 0;
  }
  .feature-card-body {
    padding: var(--ui-space-12);
  }
}

/* Public component headings and recommendations are also the admin primitives. */
.feature-card-toolbar strong,
.stack-card-head h2 {
  margin: 0;
  font-size: var(--ui-font-body);
  font-weight: var(--ui-font-weight-bold);
  line-height: var(--ui-line-body);
  letter-spacing: 0;
}
.app-search-dock .feature-suggestions .ui-button,
.stack-recommendations .ui-button {
  min-height: var(--ui-control-height);
  padding: var(--ui-space-6) var(--ui-space-12);
  background: var(--ui-color-accent-soft);
  color: var(--ui-color-accent-hover);
  border-color: var(--krds-color-light-primary-20);
  font-size: var(--ui-font-small);
}

/* Hidden slots have identical behavior in the static and React renderers. */
.display-presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-8);
  margin-bottom: var(--ui-space-12);
}
.display-settings label {
  display: block;
}
.display-save-toolbar {
  position: sticky;
  top: calc(var(--frame-header-height, 48px) + var(--ui-control-height, 44px) + 12px);
  z-index: var(--frame-layer-sticky);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px;
  margin-bottom: 16px;
  background: var(--ui-color-surface);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
}
.display-save-state {
  flex: 1 1 140px;
  margin: 0;
}
.display-fields-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.display-number-control {
  display: grid;
  grid-template-columns: var(--ui-control-height, 44px) minmax(0, 1fr) var(
      --ui-control-height,
      44px
    );
  gap: 4px;
  margin-top: 4px;
}
.display-number-control .ui-input {
  width: 100%;
  text-align: center;
}
.display-number-field p {
  margin: 4px 0 0;
}
.display-field-error {
  color: var(--ui-color-danger);
}
.display-number-control input[aria-invalid='true'] {
  border: 2px solid var(--ui-color-danger);
}
.display-preview-panel {
  margin-bottom: 16px;
}
.display-preview-panel > summary {
  min-height: 44px;
  cursor: pointer;
  font-weight: var(--ui-font-weight-bold);
}
.display-preview {
  margin-top: var(--ui-space-12);
  border: 1px solid var(--ui-color-border-soft);
  border-radius: var(--ui-radius);
  overflow-wrap: anywhere;
  background: var(--ui-color-surface);
}
.display-preview .stack-card-head {
  position: static;
  top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.display-preview-body,
.display-preview-tools {
  padding: var(--display-padding, var(--ui-space-12));
}
.display-preview-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--display-gap, var(--ui-space-12));
  border-top: 1px solid var(--ui-color-border-soft);
}
.display-preview-tools label {
  flex: 1 1 100%;
  min-width: 0;
}
.display-preview .ui-button {
  white-space: normal;
  max-width: 100%;
}
.display-preview .ui-input {
  width: 100%;
}
.layout-frame [hidden] {
  display: none !important;
}

/* First-visit install guidance stays in page flow and is visible without scrolling. */
.pwa-install-banner {
  margin: var(--ui-space-12) auto;
  padding: var(--ui-space-16);
  width: calc(100% - 32px);
  max-width: 960px;
  box-sizing: border-box;
  background: var(--ui-color-surface);
  border: 1px solid var(--ui-color-border);
  border-radius: var(--ui-radius);
}
.pwa-install-banner[hidden] {
  display: none;
}
.pwa-install-banner h2 {
  margin: 0 0 var(--ui-space-8);
  font-size: var(--ui-font-20);
}
.pwa-install-banner p {
  margin: var(--ui-space-8) 0;
  font-size: var(--ui-font-body);
}
.pwa-install-banner button {
  margin-right: var(--ui-space-8);
}
.pwa-install-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-8);
}
.pwa-install-mobile {
  display: none;
}
@media (max-width: 760px) {
  .pwa-install-banner.ui-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 44px;
    align-items: center;
    gap: var(--ui-space-8);
    width: 100%;
    max-width: none;
    margin: 0;
    padding: var(--ui-space-4) var(--ui-space-8);
    border-radius: 0;
  }
  .pwa-install-banner h2,
  .pwa-install-banner .pwa-install-description,
  .pwa-install-banner .pwa-install-desktop {
    display: none;
  }
  .pwa-install-banner .pwa-install-mobile {
    display: inline;
  }
  .pwa-install-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--ui-font-small);
    font-weight: var(--ui-font-weight-bold);
  }
  .pwa-install-banner .pwa-install-actions {
    display: contents;
  }
  .pwa-install-banner button {
    min-height: 44px;
    margin: 0;
    padding: var(--ui-space-4) var(--ui-space-12);
    white-space: nowrap;
  }
  .pwa-install-banner .pwa-install-close {
    width: 44px;
    padding: 0;
    font-size: var(--ui-font-20);
  }
  .pwa-install-help {
    grid-column: 1 / -1;
  }
}

.public-notice-dialog { width: min(560px, calc(100vw - 32px)); max-height: 80vh; box-sizing: border-box; padding: 20px; border: 1px solid var(--ui-color-border-soft); border-radius: var(--ui-radius); color: var(--ui-color-text); background: var(--ui-color-surface); }
.public-notice-dialog::backdrop { background: var(--ui-color-overlay); }
.public-notice-item { border-top: 1px solid var(--ui-color-border-soft); padding: 16px 0; }
.public-notice-item h3 { overflow-wrap: anywhere; }
.public-notice-item p { white-space: pre-wrap; overflow-wrap: anywhere; }