@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800;900&display=swap");

:root {
  /* 2026-09-30: 왼쪽 메뉴와 새 페이지 본문의 폭은 동일한 공통 토큰을 사용한다. */
  --portal-sidebar-width: 248px;
  --portal-header-height: 64px;
  color-scheme: light;
  --portal-bg: #f8fafa;
  --portal-bg-top: #ffffff;
  --portal-surface: #ffffff;
  --portal-surface-soft: #f2f4f4;
  --portal-surface-tint: #eceeee;
  --portal-surface-high: #e6e8e9;
  --portal-surface-highest: #e1e3e3;
  --portal-text: #191c1d;
  --portal-muted: #3e4948;
  --portal-faint: #6f7979;
  --portal-border: #dfe7e6;
  --portal-border-strong: #bec9c8;
  --portal-primary: #005555;
  --portal-primary-strong: #003f40;
  --portal-primary-container: #136f6f;
  --portal-primary-soft: rgba(0, 85, 85, .10);
  --portal-accent: #175454;
  --portal-indigo: #505f76;
  --portal-rose: #7b5264;
  --portal-success: #1f7b63;
  --portal-danger: #ba1a1a;
  --portal-warning: #8c6500;
  --portal-shadow: 0 8px 30px rgba(0, 0, 0, .08);
  --portal-shadow-soft: 0 4px 20px rgba(0, 0, 0, .04);
  --portal-radius: 6px;
  --portal-radius-card: 12px;
  --portal-gap: 24px;
  /* KRDS 원칙을 업무용 포털에 적용한 토큰. 14px 표는 밀집 업무 화면 예외. */
  --portal-font: "Pretendard GOV", "Pretendard", "Malgun Gothic", system-ui, sans-serif;
  --portal-font-body: 16px;
  --portal-font-small: 14px;
  --portal-font-heading: 32px;
  --portal-control-height: 40px;
  --portal-space-1: 4px;
  --portal-space-2: 8px;
  --portal-space-3: 12px;
  --portal-space-4: 16px;
  --portal-space-6: 24px;
  --portal-space-8: 32px;
  --portal-focus: #175cd3;
  --bg: var(--portal-bg);
  --paper: var(--portal-surface);
  --paper-2: var(--portal-surface);
  --panel: var(--portal-surface);
  --panel-2: var(--portal-surface-soft);
  --line: var(--portal-border);
  --ink: var(--portal-text);
  --muted: var(--portal-muted);
  --accent: var(--portal-primary);
  --accent-2: var(--portal-primary);
  --accent-3: var(--portal-indigo);
  --accent-4: var(--portal-rose);
  --primary: var(--portal-primary);
  --blue: var(--portal-indigo);
  --coral: var(--portal-accent);
  --green: var(--portal-success);
  --violet: var(--portal-indigo);
  --good: var(--portal-success);
  --bad: var(--portal-danger);
  --warn: var(--portal-warning);
  --danger: var(--portal-danger);
  --shadow: var(--portal-shadow);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  background: var(--portal-bg);
  scroll-behavior: smooth;
}

body:not(.overlay-body) {
  margin: 0;
  min-height: 100%;
  color: var(--portal-text);
  background-color: var(--portal-bg);
  background-image: linear-gradient(180deg, var(--portal-bg-top) 0%, var(--portal-bg) 44%, var(--portal-surface-soft) 100%);
  background-size: auto;
  color: var(--portal-text);
  font-family: "Be Vietnam Pro", "Pretendard", "Segoe UI", "Malgun Gothic", system-ui, sans-serif;
  letter-spacing: 0;
}

body.overlay-body {
  background: transparent;
}

body.loading {
  cursor: progress;
}

a {
  color: inherit;
  text-underline-offset: 3px;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a,
input,
select,
textarea {
  letter-spacing: 0;
}

button,
[role="button"] {
  touch-action: manipulation;
}

:focus-visible {
  outline: 3px solid rgba(13, 111, 115, .28);
  outline-offset: 2px;
}

h1,
h2,
h3,
h4,
h5,
h6,
.brand,
.eyebrow,
.panel-title,
.card-title,
.guide-title,
.service-name,
.portal-title,
.title,
.item-title,
.profile-title,
.broadcast-title {
  letter-spacing: 0;
}

h1 {
  color: var(--portal-text);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.12;
}

.hero h1,
.hero-card h1 {
  max-width: 880px;
  font-size: clamp(32px, 3.8vw, 46px);
  line-height: 1.1;
}

.hero-card h1 + h1 {
  margin-top: 8px;
  color: var(--portal-primary);
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.16;
}

.topbar h1 {
  font-size: clamp(26px, 2.5vw, 36px);
  line-height: 1.16;
}

.shell,
.app-shell {
  width: min(100%, 1280px);
  margin: 0 auto;
  padding: 32px 24px 48px;
}

.login-shell {
  width: min(440px, 100%);
}

.topbar,
.panel,
.hero,
.hero-card,
.status-card,
.portal-card,
.profile-panel,
.guide-shell,
.guide-board,
.status-band,
.tabs,
.section,
.list-card,
.editor-card,
.tool-card,
.service-card,
.stat-card,
.guide-card,
.info-item,
.item,
.file-card,
.asset-card,
.phrase-card,
.news-card,
.product-card,
.product,
.metric,
.queue-item,
.list-item,
.help-dialog {
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--portal-border);
  border-radius: var(--portal-radius-card);
  box-shadow: var(--portal-shadow-soft);
  color: var(--portal-text);
}

.topbar {
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--portal-border);
  backdrop-filter: blur(16px);
}

.portal-global-topbar {
  width: 100%;
  margin: 0;
  padding: 0 28px;
  min-height: 64px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  background: rgba(255, 255, 255, .96);
  border: 0;
  border-bottom: 1px solid var(--portal-border);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: blur(18px);
  color: var(--portal-text);
  position: sticky;
  top: 0;
  z-index: 90;
}

.portal-back-top {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 110;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(0, 85, 85, .26);
  border-radius: 999px;
  background: var(--portal-primary);
  color: #fff;
  box-shadow: 0 12px 28px rgba(0, 64, 64, .22);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

.portal-back-top:hover {
  background: var(--portal-primary-strong);
}

.portal-back-top[hidden] {
  display: none;
}

.portal-global-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 168px;
  color: inherit;
  text-decoration: none;
}

.portal-global-mark {
  width: 40px;
  height: 40px;
  border-radius: var(--portal-radius);
  background: var(--portal-primary);
  color: #fff;
  display: inline-grid;
  place-items: center;
  font-weight: 900;
  font-size: 13px;
}

.portal-global-brand-copy,
.portal-global-profile-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.portal-global-title,
.portal-global-name {
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
}

.portal-global-subtitle,
.portal-global-role {
  color: var(--portal-muted);
  font-size: 12px;
  line-height: 1.15;
  white-space: nowrap;
}

.portal-global-links {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 4px;
  overflow-x: visible;
  scrollbar-width: none;
}

.portal-global-links::-webkit-scrollbar {
  display: none;
}

.portal-global-link-cluster {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.portal-global-dropdown {
  position: relative;
  min-width: 0;
  display: inline-flex;
  align-items: center;
}

.portal-global-dropdown-trigger {
  width: 100%;
}

.portal-global-dropdown-trigger::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: .72;
}

.portal-global-dropdown.is-open .portal-global-dropdown-trigger::after {
  transform: rotate(225deg) translateY(-1px);
}

.portal-global-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 95;
  width: 220px;
  padding: 8px;
  display: none;
  gap: 4px;
  background: var(--portal-surface);
  border: 1px solid var(--portal-border);
  border-radius: var(--portal-radius);
  box-shadow: var(--portal-shadow);
}

.portal-global-dropdown.is-open .portal-global-dropdown-menu,
.portal-global-dropdown:hover .portal-global-dropdown-menu {
  display: grid;
}

.portal-global-dropdown-menu .portal-global-link {
  width: 100%;
  justify-content: flex-start;
}

.portal-global-link,
.portal-global-auth,
.portal-global-profile {
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: var(--portal-radius);
  background: transparent;
  color: var(--portal-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  text-decoration: none;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.portal-global-link:hover,
.portal-global-auth:hover,
.portal-global-profile:hover {
  border-color: var(--portal-border);
  background: var(--portal-surface-soft);
  color: var(--portal-primary);
}

.portal-global-link[aria-current="page"] {
  border-color: var(--portal-primary-soft);
  background: var(--portal-primary-soft);
  color: var(--portal-primary-strong);
}

.portal-global-help-dot {
  width: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 999px;
  font-weight: 900;
  color: var(--portal-primary-strong);
  background: var(--portal-primary-soft);
}

.portal-global-page-action {
  border-color: rgba(0, 85, 85, .22);
  color: var(--portal-primary-strong);
}

.portal-global-page-action.primary,
.portal-global-link.primary {
  border-color: var(--portal-primary);
  background: var(--portal-primary);
  color: #fff;
}

.portal-global-account {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.portal-global-ai-trigger {
  width: 42px;
  min-height: 42px;
  border: 1px solid rgba(0, 85, 85, .22);
  border-radius: var(--portal-radius);
  background: var(--portal-primary);
  color: #fff;
  display: inline-grid;
  place-items: center;
  font-weight: 900;
  cursor: pointer;
}

.portal-global-ai-trigger:hover {
  border-color: var(--portal-primary-strong);
  background: var(--portal-primary-strong);
}

.cot-ai-panel {
  position: fixed;
  top: 76px;
  right: 18px;
  z-index: 160;
  width: min(380px, calc(100vw - 28px));
  padding: 14px;
  border: 1px solid var(--portal-border);
  border-radius: var(--portal-radius);
  background: var(--portal-surface);
  box-shadow: var(--portal-shadow);
  color: var(--portal-text);
}

.cot-ai-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.cot-ai-kicker {
  color: var(--portal-primary);
  font-size: 12px;
  font-weight: 900;
}

.cot-ai-close {
  width: 34px;
  min-height: 34px;
  padding: 0;
  border: 1px solid var(--portal-border);
  border-radius: var(--portal-radius);
  background: var(--portal-surface-soft);
  color: var(--portal-text);
  cursor: pointer;
  font-weight: 900;
}

.cot-ai-label {
  display: block;
  margin: 10px 0 5px;
  color: var(--portal-muted);
  font-size: 12px;
  font-weight: 900;
}

.cot-ai-select,
.cot-ai-textarea {
  width: 100%;
  border: 1px solid var(--portal-border);
  border-radius: var(--portal-radius);
  background: var(--portal-surface);
  color: var(--portal-text);
  padding: 9px 10px;
}

.cot-ai-textarea {
  line-height: 1.45;
  resize: vertical;
}

.cot-ai-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.cot-ai-run,
.cot-ai-full {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--portal-primary);
  border-radius: var(--portal-radius);
  background: var(--portal-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  font-weight: 900;
}

.cot-ai-full {
  border-color: var(--portal-border);
  background: var(--portal-surface-soft);
  color: var(--portal-primary-strong);
}

.cot-ai-status {
  margin-top: 10px;
  padding: 9px 10px;
  border: 1px solid var(--portal-border);
  border-radius: var(--portal-radius);
  background: var(--portal-surface-soft);
  color: var(--portal-muted);
  font-size: 12px;
  line-height: 1.45;
}

.cot-ai-status.error {
  border-color: rgba(186, 26, 26, .28);
  background: #fff3f1;
  color: var(--portal-danger);
}

.cot-ai-log {
  max-height: 180px;
  overflow: auto;
  margin: 10px 0 0;
  padding: 10px;
  border: 1px solid var(--portal-border);
  border-radius: var(--portal-radius);
  background: #111820;
  color: #eaf8f6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.45;
}

.portal-global-auth {
  border-color: var(--portal-border);
  background: var(--portal-surface);
  color: var(--portal-primary-strong);
}

.portal-global-register {
  background: var(--portal-primary);
  border-color: var(--portal-primary);
  color: #fff;
}

.portal-global-profile {
  min-height: 44px;
  padding: 0 10px 0 6px;
  border-color: var(--portal-border);
  background: var(--portal-surface);
  color: var(--portal-text);
}

.portal-global-avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--portal-primary);
  color: #fff;
  display: inline-grid;
  place-items: center;
  font-weight: 900;
}

.portal-global-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 210px;
  padding: 8px;
  display: grid;
  gap: 6px;
  background: var(--portal-surface);
  border: 1px solid var(--portal-border);
  border-radius: var(--portal-radius);
  box-shadow: var(--portal-shadow);
  z-index: 40;
}

.portal-global-menu a,
.portal-global-menu button {
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--portal-border);
  border-radius: var(--portal-radius);
  background: var(--portal-surface);
  color: var(--portal-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  cursor: pointer;
  font-weight: 700;
}

.portal-global-menu button {
  color: var(--portal-danger);
}

.portal-global-topbar:not(.is-admin) [data-admin-only] {
  display: none !important;
}

.portal-global-topbar [hidden] {
  display: none !important;
}

.portal-has-global-topbar .shell,
.portal-has-global-topbar .app-shell {
  padding-top: 32px;
}

.brand,
.brand-wrap,
.topbar .brand {
  color: var(--portal-text);
}

.brand-mark,
.portal-index {
  border-radius: var(--portal-radius);
  background: var(--portal-text);
  color: #fff;
}

.eyebrow,
.guide-label,
.guide-kicker,
.service-category,
.stat-label,
.label {
  color: var(--portal-primary);
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.subtitle,
.panel-meta,
.card-meta,
.stat-sub,
.copy,
.guide-copy,
.portal-copy,
.summary,
.domain,
.field-help,
.item-note,
.item-sub,
.profile-role,
.profile-popover-sub,
.empty,
.empty-state,
.status-line,
.asset-meta,
.metric-label {
  color: var(--portal-muted);
}

.hero {
  overflow: hidden;
}

.hero::before,
.hero::after,
.hero-card::before {
  display: none;
}

.hero-card,
.status-card,
.portal-card {
  backdrop-filter: none;
}

.portal-card,
.guide-card,
.service-card,
.stat-card,
.news-card,
.product-card,
.product,
.asset-card,
.phrase-card,
.item,
.row,
.info-item {
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.portal-card:hover,
.guide-card:hover,
.service-card:hover,
.news-card:hover,
.product-card:hover,
.product:hover,
.asset-card:hover {
  border-color: var(--portal-border-strong);
  box-shadow: var(--portal-shadow);
  transform: translateY(-1px);
}

.nav,
.toplinks,
.top-actions,
.hero-links,
.portal-actions,
.guide-actions,
.action-row,
.editor-toolbar,
.service-actions,
.service-links,
.service-checks,
.runtime-list,
.form-actions,
.asset-actions,
.phrase-actions,
.attachment-actions,
.item-actions,
.row-actions,
.theme-row,
.mode-row {
  gap: 8px;
}

.nav a,
.nav button,
.toplink,
.chip-link,
.chip-button,
.button,
.btn,
.action-btn,
.small-btn,
.mini-btn,
.tab,
.tab-btn,
.hero-link,
.portal-btn,
.guide-btn,
.guide-link,
.status-refresh,
.refresh,
.price-toggle,
.price-btn,
.go,
.profile-item,
.help-close,
.attachment-remove,
.mode-btn {
  min-height: 38px;
  border: 1px solid var(--portal-border);
  border-radius: var(--portal-radius);
  background: var(--portal-surface);
  color: var(--portal-text);
  box-shadow: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  text-decoration: none;
}

.nav a:hover,
.nav button:hover,
.toplink:hover,
.chip-link:hover,
.chip-button:hover,
.button:hover,
.btn:hover,
.action-btn:hover,
.small-btn:hover,
.mini-btn:hover,
.tab:hover,
.tab-btn:hover,
.hero-link:hover,
.portal-btn:hover,
.guide-btn:hover,
.guide-link:hover,
.status-refresh:hover,
.refresh:hover,
.price-toggle:hover,
.price-btn:hover,
.go:hover,
.profile-item:hover,
.help-close:hover {
  border-color: var(--portal-border-strong);
  background: var(--portal-surface-soft);
}

.primary,
.btn.primary,
.button.primary,
.chip-button.primary,
.action-btn.primary,
.tab[aria-selected="true"],
.tab-btn.active,
.hero-link.primary,
.portal-btn.primary,
.guide-btn.primary,
.guide-link.primary,
.mode-btn.active,
.small-btn.primary {
  border-color: var(--portal-primary);
  background: var(--portal-primary);
  color: #f8ffff;
}

.primary:hover,
.btn.primary:hover,
.button.primary:hover,
.chip-button.primary:hover,
.action-btn.primary:hover,
.hero-link.primary:hover,
.portal-btn.primary:hover,
.guide-btn.primary:hover,
.guide-link.primary:hover,
.small-btn.primary:hover {
  border-color: var(--portal-primary-strong);
  background: var(--portal-primary-strong);
  color: #f8ffff;
}

.secondary,
.btn.secondary,
.button.secondary,
.portal-btn.alt,
.action-btn.secondary {
  border-color: var(--portal-indigo);
  background: var(--portal-indigo);
  color: #ffffff;
}

.dark,
.btn.dark,
.btn.alt,
.hero-link.alt {
  border-color: var(--portal-text);
  background: var(--portal-text);
  color: #ffffff;
}

.warn,
.btn.warn,
.notice.warn,
.badge.warn {
  border-color: rgba(169, 108, 22, .35);
  background: #fff7e8;
  color: var(--portal-warning);
}

.danger,
.btn.danger,
.button.danger,
.action-btn.danger,
.small-btn.danger,
.mini-btn.danger,
.profile-item.danger,
.attachment-remove,
.notice.bad,
.notice.error,
.badge.bad {
  border-color: rgba(179, 66, 55, .28);
  background: #fff3f1;
  color: var(--portal-danger);
}

button:disabled,
.btn:disabled,
.button:disabled,
.action-btn:disabled,
.small-btn:disabled {
  cursor: not-allowed;
  opacity: .56;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
.input,
.textarea,
.select,
.token-input,
input.field,
.search {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--portal-border);
  border-radius: var(--portal-radius);
  background: var(--portal-surface);
  color: var(--portal-text);
  padding: 10px 12px;
}

textarea,
.textarea,
textarea.code {
  line-height: 1.55;
  resize: vertical;
}

textarea.code,
.result-box,
.tool-output,
.preview,
.notice,
.guide-note,
.offer-list,
.type-help,
.editor-wrap {
  border-radius: var(--portal-radius);
}

input::placeholder,
textarea::placeholder {
  color: var(--portal-faint);
}

label,
.field label {
  color: var(--portal-muted);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.notice,
.guide-note,
.status-note,
.result-box,
.tool-output,
.preview,
.offer-list,
.empty,
.empty-state {
  border: 1px solid var(--portal-border);
  background: var(--portal-surface-soft);
  color: var(--portal-muted);
}

.notice.good,
.badge.good,
.pill.good,
.status-pill.ok,
.check-pill.ok,
.ok,
.good {
  color: var(--portal-success);
}

.notice.good {
  border-color: rgba(24, 135, 95, .3);
  background: #effaf5;
}

.notice.bad,
.notice.error {
  border-color: rgba(179, 66, 55, .28);
  background: #fff3f1;
}

.pill,
.chip,
.badge,
.metric-pill,
.status-pill,
.check-pill,
.link-pill,
.warn-pill {
  min-height: 28px;
  border: 1px solid var(--portal-border);
  border-radius: 999px;
  background: var(--portal-surface-soft);
  color: var(--portal-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.link-pill {
  color: var(--portal-primary);
  text-decoration: none;
}

.row,
.list-item,
.queue-item,
.attachment-item,
.offer,
.type-row {
  border-color: var(--portal-border);
  background: var(--portal-surface);
  border-radius: var(--portal-radius);
}

.row-sub,
.shop,
.asset-name,
.file-name,
.item-url,
.offer-price {
  overflow-wrap: anywhere;
}

.thumb,
.asset-thumb {
  background: #17212b;
  color: #ffffff;
}

.thumb img,
.asset-thumb img {
  display: block;
}

.card-body,
.product-body,
.asset-body {
  background: var(--portal-surface);
}

.chips,
.pill-row,
.status-meta,
.checks {
  gap: 6px;
}

.price {
  color: var(--portal-success);
}

.offer-price,
.source {
  color: var(--portal-accent);
}

.offers {
  border-color: var(--portal-border);
  background: var(--portal-surface-soft);
}

.profile-popover {
  border-radius: var(--portal-radius);
  background: var(--portal-surface);
  border-color: var(--portal-border);
  box-shadow: var(--portal-shadow);
}

.profile-avatar {
  background: var(--portal-primary);
  color: #ffffff;
}

.help-modal {
  background: rgba(23, 33, 43, .46);
}

.swatch {
  border-radius: var(--portal-radius);
}

.toast {
  border-radius: var(--portal-radius);
  background: var(--portal-text);
  color: #ffffff;
}

.timer-face,
.preview-stage,
.preview-top,
.preview-bottom,
.preview-body,
.preview-mission {
  border-radius: var(--portal-radius);
}

.preview-stage,
.timer-face {
  background: #111820;
  color: #fffaf2;
}

.preview-body {
  background:
    linear-gradient(135deg, rgba(180, 93, 49, .22), transparent 44%),
    linear-gradient(45deg, rgba(13, 111, 115, .22), transparent 50%),
    #151c24;
}

body.overlay-body .overlay-top,
body.overlay-body .overlay-bottom,
body.overlay-body .overlay-card {
  background: rgba(8, 12, 16, .78);
  border-color: rgba(255, 255, 255, .18);
  color: #fffaf2;
}

@media (min-width: 1120px) {
  .portal-global-topbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    overflow: visible;
  }

  .portal-global-links {
    position: absolute;
    top: var(--portal-header-height);
    left: 0;
    width: var(--portal-sidebar-width);
    height: calc(100vh - var(--portal-header-height));
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 6px;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--portal-surface-soft);
    border-right: 1px solid var(--portal-border);
    z-index: 80;
  }

  .portal-global-link {
    width: 100%;
    justify-content: flex-start;
    min-height: 42px;
    padding: 0 12px;
  }

  .portal-global-dropdown {
    width: 100%;
    display: grid;
    align-items: stretch;
    position: static;
  }

  .portal-global-dropdown-menu {
    position: static;
    width: 100%;
    padding: 3px 0 4px 10px;
    gap: 4px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }

  .portal-global-dropdown:hover .portal-global-dropdown-menu {
    display: none;
  }

  .portal-global-dropdown.is-open .portal-global-dropdown-menu {
    display: grid;
  }

  .portal-global-dropdown-menu .portal-global-link {
    min-height: 36px;
    padding-left: 14px;
    font-size: 13px;
    background: rgba(255, 255, 255, .56);
    border-color: transparent;
  }

  .portal-global-link-cluster {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36px;
    gap: 4px;
  }

  .portal-global-link-cluster .portal-global-link {
    min-width: 0;
  }

  .portal-global-help-dot {
    width: 36px;
    min-height: 36px;
    justify-content: center;
    padding: 0;
  }

  .portal-global-help,
  .portal-global-page-action {
    justify-content: flex-start;
  }

  /* 2026-09-28: 고정 사이드 메뉴와 독립 관리 화면이 겹치지 않도록 같은 본문 오프셋을 적용한다. */
  .portal-has-global-topbar .shell,
  .portal-has-global-topbar .app-shell,
  .portal-has-global-topbar .shop-shell,
  .portal-has-global-topbar .inbox-shell {
    width: min(calc(100% - var(--portal-sidebar-width)), 1280px);
    margin-left: calc(var(--portal-sidebar-width) + max(0px, (100vw - var(--portal-sidebar-width) - 1280px) / 2));
    margin-right: 0;
  }
}

.shell > .hero {
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, .62fr);
  gap: var(--portal-gap);
  align-items: stretch;
}

.shell > .hero .hero-card {
  min-height: 360px;
  padding: 32px;
  border: 1px solid rgba(160, 239, 238, .18);
  border-radius: var(--portal-radius-card);
  background:
    linear-gradient(135deg, rgba(0, 85, 85, .98), rgba(19, 111, 111, .92)),
    var(--portal-primary);
  color: #ffffff;
  box-shadow: 0 18px 48px rgba(0, 85, 85, .18);
}

.shell > .hero .hero-card h1 {
  color: #ffffff;
  font-size: clamp(32px, 3.6vw, 48px);
  font-weight: 700;
  line-height: 1.14;
  max-width: 820px;
}

.shell > .hero .hero-copy {
  color: rgba(255, 255, 255, .84);
  font-size: 16px;
  line-height: 1.7;
}

.shell > .hero .hero-card .eyebrow {
  border-color: rgba(160, 239, 238, .24);
  background: rgba(255, 255, 255, .12);
  color: #a0efee;
}

.shell > .hero .hero-meta {
  gap: 10px;
}

.shell > .hero .hero-meta-item {
  border-color: rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .10);
}

.shell > .hero .hero-meta-label {
  color: rgba(255, 255, 255, .68);
}

.shell > .hero .hero-meta-value {
  color: #ffffff;
}

.shell > .hero .hero-link {
  min-height: 44px;
  border-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .12);
  color: #ffffff;
}

.shell > .hero .hero-link:hover {
  border-color: rgba(255, 255, 255, .42);
  background: rgba(255, 255, 255, .18);
}

.shell > .hero .hero-link.primary {
  border-color: #ffffff;
  background: #ffffff;
  color: var(--portal-primary-strong);
}

.status-card,
.portal-card,
.guide-shell,
.guide-card,
.profile-panel,
.service-card,
.news-card,
.product-card,
.list-card,
.editor-card,
.tool-card,
.stat-card,
.asset-card,
.phrase-card,
.file-card,
.item,
.info-item,
.metric,
.queue-item,
.list-item {
  background: var(--portal-surface);
  border-color: var(--portal-border);
  border-radius: var(--portal-radius-card);
  box-shadow: var(--portal-shadow-soft);
}

.status-card {
  padding: 24px;
}

.cards,
.guide-grid,
.content-grid,
.status-grid,
.info-grid {
  gap: var(--portal-gap);
}

.cards {
  margin-top: var(--portal-gap);
}

.portal-card {
  min-height: 232px;
  padding: 24px;
}

.portal-card.primary-card {
  background: var(--portal-surface) !important;
}

.portal-title,
.guide-title,
.profile-title,
.title,
.product-title {
  color: var(--portal-text);
  font-weight: 700;
}

.portal-copy,
.summary,
.guide-copy,
.guide-card p {
  color: var(--portal-muted);
}

.portal-index,
.brand-mark {
  background: var(--portal-primary);
  color: #ffffff;
}

.portal-card.ops .portal-index,
.portal-card.work .portal-index,
.portal-card.stream .portal-index,
.portal-card.deploy .portal-index,
.portal-card.games .portal-index {
  background: var(--portal-primary-container);
}

.portal-card.work .portal-index,
.secondary,
.btn.secondary,
.button.secondary,
.portal-btn.alt,
.action-btn.secondary {
  background: var(--portal-indigo);
  border-color: var(--portal-indigo);
}

.portal-card.games .portal-index,
.portal-card.games .portal-btn.primary,
.guide-card .guide-btn.primary[style] {
  background: var(--portal-rose) !important;
  border-color: var(--portal-rose) !important;
}

.portal-card.deploy .portal-index,
.portal-card.deploy .portal-btn.primary {
  background: var(--portal-success) !important;
  border-color: var(--portal-success) !important;
}

.portal-tag,
.guide-label,
.eyebrow,
.chip,
.metric-pill,
.status-pill,
.pill,
.badge {
  border-color: rgba(0, 85, 85, .14);
  background: var(--portal-primary-soft);
  color: var(--portal-primary-strong);
}

.stat-chip,
.status-note,
.hero-meta-item,
.guide-note,
.notice,
.offer-list,
.empty,
.empty-state {
  border-color: var(--portal-border);
  background: var(--portal-surface-soft);
}

.tab[aria-selected="true"],
.view-btn[aria-pressed="true"],
.page-btn[aria-current="page"] {
  background: var(--portal-primary);
  border-color: var(--portal-primary);
  color: #ffffff;
}

.source,
.offer-price {
  color: var(--portal-primary);
}

.product-main .thumb,
.thumb {
  background: var(--portal-surface-highest);
  color: var(--portal-muted);
}

.help-modal {
  background: rgba(25, 28, 29, .48);
}

.help-dialog {
  width: min(1120px, calc(100% - 32px));
  background: var(--portal-surface);
}

@media (max-width: 980px) {
  .portal-global-topbar {
    grid-template-columns: 1fr;
    align-items: stretch;
    padding: 14px 18px;
  }

  .portal-global-brand,
  .portal-global-account {
    justify-content: space-between;
  }

  .portal-global-links {
    justify-content: flex-start;
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .shell,
  .app-shell {
    padding: 18px 14px 36px;
  }

  .shell > .hero {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .topbar {
    align-items: flex-start;
  }

  .nav,
  .toplinks,
  .top-actions,
  .filters,
  .toolbar {
    justify-content: flex-start;
  }
}

@media (max-width: 680px) {
  .portal-global-topbar {
    width: 100%;
    margin-top: 0;
  }

  .portal-global-links {
    display: grid;
    grid-template-columns: 1fr;
  }

  .portal-global-link,
  .portal-global-auth {
    width: 100%;
  }

  .portal-global-dropdown {
    width: 100%;
    display: grid;
  }

  .portal-global-dropdown-menu {
    position: static;
    width: 100%;
    box-shadow: none;
    margin: 0;
  }

  .portal-global-dropdown:hover .portal-global-dropdown-menu {
    display: none;
  }

  .portal-global-dropdown.is-open .portal-global-dropdown-menu {
    display: grid;
  }

  .portal-global-link-cluster {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 42px) minmax(0, 1fr);
    gap: 8px;
  }

  .portal-global-link-cluster .portal-global-link:not(.portal-global-help-dot) {
    grid-column: 2;
    grid-row: 1;
  }

  .portal-global-help-dot {
    grid-column: 1;
    grid-row: 1;
    width: 42px;
    min-height: 42px;
    justify-content: center;
    padding: 0;
  }

  .portal-global-account {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .portal-global-ai-trigger {
    width: 100%;
  }

  .portal-global-profile,
  .portal-global-menu {
    grid-column: 1 / -1;
  }

  .portal-global-profile {
    width: 100%;
    justify-content: flex-start;
  }

  .portal-global-menu {
    position: static;
    width: 100%;
  }

  .nav a,
  .nav button,
  .toplink,
  .chip-link,
  .chip-button,
  .button,
  .btn,
  .action-btn,
  .hero-link,
  .portal-btn,
  .guide-btn,
  .guide-link {
    width: 100%;
  }

  .profile-copy {
    display: none;
  }

  .shell > .hero .hero-card {
    min-height: 0;
    padding: 24px;
  }

  .cards,
  .guide-grid,
  .content-grid,
  .status-grid,
  .info-grid {
    gap: 14px;
  }
}

/* 2026-09-30: 신규 포털 페이지의 필수 본문 경계. 메뉴 영역은 페이지 CSS가 소유하지 않는다. */
body[data-portal-layout="sidebar"] > [data-portal-page] {
  position: relative;
  isolation: isolate;
  z-index: 0;
  box-sizing: border-box;
  min-inline-size: 0;
  inline-size: 100% !important;
  max-inline-size: 100% !important;
  margin-inline: 0 !important;
}
[data-portal-page] .portal-scroll-region {
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow: auto;
}
@media (min-width: 1120px) {
  body[data-portal-layout="sidebar"] > [data-portal-page] {
    inline-size: calc(100% - var(--portal-sidebar-width)) !important;
    max-inline-size: calc(100% - var(--portal-sidebar-width)) !important;
    margin-inline-start: var(--portal-sidebar-width) !important;
    margin-inline-end: 0 !important;
  }
}

/* 2026-09-30 KRDS 기반 공통 탐색/본문 컴포넌트. 좌측 폭과 위치는 기존 레이아웃이 소유. */
.portal-global-topbar { font-family: var(--portal-font); background: var(--portal-surface); box-shadow: none; border-bottom: 1px solid var(--portal-border-strong); }
.portal-global-topbar .portal-global-link { font-size: var(--portal-font-small); border-radius: var(--portal-radius); line-height: 1.5; }
.portal-global-topbar .portal-global-link:hover { background: var(--portal-primary-soft); color: var(--portal-primary-strong); }
.portal-global-topbar .portal-global-link[aria-current="page"] { background: var(--portal-primary-soft); color: var(--portal-primary-strong); font-weight: 700; box-shadow: inset 3px 0 var(--portal-primary); }
.portal-global-topbar :is(a,button):focus-visible { outline: 3px solid var(--portal-focus); outline-offset: 2px; }
[data-portal-page] { font-family: var(--portal-font); font-size: var(--portal-font-body); line-height: 1.5; }
[data-portal-page] .portal-button { min-height: var(--portal-control-height); padding: 8px 16px; border: 1px solid var(--portal-border-strong); border-radius: var(--portal-radius); background: var(--portal-surface); color: var(--portal-text); font: inherit; cursor: pointer; }
[data-portal-page] .portal-button.primary { background: var(--portal-primary); border-color: var(--portal-primary); color: white; }
[data-portal-page] .portal-button:hover { background: var(--portal-primary-soft); color: var(--portal-primary-strong); }
[data-portal-page] .portal-button.primary:hover { background: var(--portal-primary-strong); color: white; }
[data-portal-page] :is(button,a,input,select,textarea):focus-visible { outline: 3px solid var(--portal-focus); outline-offset: 2px; }
[data-portal-page] .portal-button:disabled { background: var(--portal-surface-high); color: var(--portal-muted); cursor: not-allowed; }
[data-portal-page] .portal-skip-link { position: absolute; left: 16px; top: 0; transform: translateY(-200%); padding: 12px 16px; background: white; color: var(--portal-primary); z-index: 10; }
[data-portal-page] .portal-skip-link:focus { transform: translateY(0); }
@media(min-width:1120px) {
  .portal-global-topbar .portal-global-links { background: var(--portal-surface); padding: 24px 16px; }
  .portal-global-topbar .portal-global-link { min-height: 44px; flex-shrink: 0; }
  .portal-global-topbar .portal-global-dropdown-menu .portal-global-link { min-height: 40px; background: transparent; }
  .portal-global-topbar .portal-global-dropdown-menu .portal-global-link[aria-current="page"] { background: var(--portal-primary-soft); }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }