@charset "UTF-8";
@import url("../../fonts/pretendard/font_pretendard.css");
@import url("../../fonts/remixicon/font_remixicon.css");
/* ============================================================
   Reset CSS  —  3팀 통합 버전
   최신 CSS 반영 / 브라우저·기기 호환성 고려
   ============================================================ */
/* ─────────────────────────────────────────
   1. Box-sizing
   ───────────────────────────────────────── */
:where(*, *::before, *::after) {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* ─────────────────────────────────────────
   2. Root
   ───────────────────────────────────────── */
html {
  font-size: 10px;
  height: 100%;
  scroll-behavior: smooth;
  /* 모바일 회전 시 브라우저의 자동 폰트 크기 조정 방지 */
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /*
    OS 다크모드 수용 — 스크롤바·네이티브 input 등 브라우저 UI 자동 조정
    CSS로 명시한 색상에는 영향 없음
  */
  color-scheme: light dark;
}

/* ─────────────────────────────────────────
   3. Body
   ───────────────────────────────────────── */
body {
  margin: 0;
  padding: 0;
  min-width: 320px;
  /*
    svh: iOS Safari 주소창 포함 계산 버그 해결
    100vh 선행 선언 — svh 미지원 브라우저 폴백
  */
  min-height: 100vh;
  min-height: 100svh;
  word-break: keep-all;
  overflow-wrap: break-word;
  overflow-x: hidden;
  /* iOS bounce 스크롤로 인한 레이아웃 틀어짐 방지 */
  overscroll-behavior-y: none;
  /* 폰트 안티앨리어싱 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ─────────────────────────────────────────
   4. Semantic block 요소
   ───────────────────────────────────────── */
/*
  구형 브라우저(IE, 구 Android)에서 시맨틱 요소를 inline으로 취급하는 문제 대응
*/
header,
footer,
main,
section,
article,
nav,
aside,
figure,
figcaption,
details,
summary {
  display: block;
}

/* ─────────────────────────────────────────
   5. Margin · Padding 초기화
   ───────────────────────────────────────── */
:where(h1, h2, h3, h4, h5, h6, p, figure, figcaption, blockquote, dl, dd, ul, ol, form, fieldset, hr) {
  margin: 0;
  padding: 0;
}

:where(ul, ol, li) {
  list-style: none;
}

/* ─────────────────────────────────────────
   6. Media 요소
   ───────────────────────────────────────── */
:where(img, svg, video, canvas, audio, iframe) {
  display: block;
  max-width: 100%;
  height: auto;
  border: 0;
  vertical-align: middle;
}

svg {
  /* 인라인 SVG 색상 부모 상속 */
  fill: currentColor;
}

iframe {
  /*
    GPU 컴포지팅 레이어 확보 — iframe 렌더링 성능 개선
    blur(0)은 의도적 no-op
  */
  filter: blur(0);
}

/* ─────────────────────────────────────────
   7. Form 요소
   ───────────────────────────────────────── */
:where(input, select, button, textarea, optgroup) {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: 0;
  outline: none;
  vertical-align: middle;
}

:where(input, select) {
  max-width: 100%;
}

/* 모바일 탭 딜레이(300ms) 제거 */
:where(a, button, input, select, textarea, label) {
  touch-action: manipulation;
}

/* Select 네이티브 화살표 제거 */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* IE 드롭다운 화살표 제거 */
select::-ms-expand {
  display: none;
}

/* Button */
button {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

:where(input[type=submit], input[type=button], input[type=search]) {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

button:disabled {
  cursor: default;
}

/* Textarea */
textarea {
  width: 100%;
  resize: vertical;
  min-height: 4em;
}

/* Placeholder */
:where(input, textarea)::placeholder {
  color: #9e9e9e;
  font-style: normal;
  font-weight: 400;
  opacity: 1;
  /* Firefox 기본 opacity 보정 */
}

/* ─────────────────────────────────────────
   8. Table
   ───────────────────────────────────────── */
table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
}

th {
  font-weight: 600;
}

/* ─────────────────────────────────────────
   9. 기타
   ───────────────────────────────────────── */
a {
  color: inherit;
  text-decoration: none;
}

:where(address, em, i) {
  font-style: normal;
}

:where(strong, b) {
  font-weight: 700;
}

fieldset {
  border: 0;
  /*
    fieldset 기본 min-width: min-content 로 인해
    flex/grid 레이아웃 깨지는 문제 해결
  */
  min-inline-size: unset;
}

hr {
  border: 0;
}

/* ─────────────────────────────────────────
   10. Accessibility
   ───────────────────────────────────────── */
/*
  clip 단독 사용은 deprecated → clip-path 병행
*/
caption,
legend,
.sr-only,
.hide,
.blind,
.ir {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip Navigation  */
#skip,
#skip_nav {
  position: relative;
  z-index: 9999;
}

#skip a,
#skip_nav a {
  position: absolute;
  top: -1000px;
  left: 0;
  width: 100%;
  padding: 0.8rem 0;
  background: #20262c;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 3rem;
  text-align: center;
  text-decoration: none;
  transition: top 0.3s;
}

#skip a:focus,
#skip a:hover,
#skip a:active,
#skip_nav a:focus,
#skip_nav a:hover,
#skip_nav a:active {
  top: 0;
}

/* ─────────────────────────────────────────
   11. 라이브러리 예외 처리
   ───────────────────────────────────────── */
.swiper-wrapper,
.swiper-slide {
  box-sizing: border-box;
}

.swiper-notification {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.bx-wrapper .bx-loading {
  display: none;
}

.bx-wrapper .bx-viewport {
  border: 0;
  box-shadow: none;
}

/* ─────────────────────────────────────────
   12. Reduced Motion
   ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :where(*, *::before, *::after) {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/*-------------------------------------------------
title       : MPS Design Tokens
Author      : PLAN I
Create date : 2026-06-26
-------------------------------------------------*/
:root {
  /* Color - Black scale */
  --color-white: #ffffff;
  --color-title: #222222;
  --color-subtitle: #424242;
  --color-body: #616161;
  --color-sub: #757575;
  --color-inactive: #9e9e9e;
  --color-border-100: #dddddd;
  --color-border-200: #eeeeee;
  --color-border-300: #e0e0e0;
  --color-border-400: #bdbdbd;
  --color-border-500: #929292;
  --color-border-600: #424242;
  --color-bg-100: #f5f5f5;
  --color-text-dark: #333333;
  --color-disabled: #bdbdbd;
  --color-disabled-bg: #e0e 0e0;
  /* Brand */
  --color-primary: #4863cf;
  --color-primary-light: #5b74d8;
  --color-accent: #5e8bee;
  /* Cool BG */
  --color-cool-bg1: #eef0f4;
  --color-cool-bg2: #f4f5f6;
  --info-icon: #8fa3b8;
  /* Badge */
  --badge-ivd-bg: #cdefef;
  --badge-ivd-text: #217273;
  --badge-diagnosis-bg: #dee6f7;
  --badge-diagnosis-text: #26468b;
  --badge-treatment-bg: #e9def6;
  --badge-treatment-text: #582b7c;
  --badge-red-bg: #fae7ed;
  --badge-red-text: #cf4b71;
  --badge-yellow-bg: #fff4c2;
  --badge-yellow-text: #ba6f25;
  --badge-indigo-bg: #f4f5f6;
  --badge-indigo-text: #1c217d;
  --badge-gray-bg: #e0e0e0;
  --badge-gray-text: #616161;
  --badge-green-bg: #d1fae5;
  --badge-green-text: #065f46;
  /* Badge aliases (설계서 유형·상태) */
  --badge-dx-bg: var(--badge-diagnosis-bg);
  --badge-dx-text: var(--badge-diagnosis-text);
  --badge-tx-bg: var(--badge-treatment-bg);
  --badge-tx-text: var(--badge-treatment-text);
  --badge-temp-bg: var(--badge-gray-bg);
  --badge-temp-text: var(--badge-gray-text);
  --badge-submit-bg: var(--badge-green-bg);
  --badge-submit-text: var(--badge-green-text);
  --badge-reject-bg: var(--badge-red-bg);
  --badge-reject-text: var(--badge-red-text);
  /* Step bar */
  --color-bg-subtle: var(--color-cool-bg2);
  --color-muted: var(--color-inactive);
  --color-border: var(--color-border-200);
  --step-track: #e1e1e4;
  /* Status badge */
  --status-success: #2eb6ae;
  --status-warning: #e9667c;
  /* Typography */
  --font-family: 'Pretendard GOV', 'Pretendard', sans-serif;
  --fs-xs: 1.3rem;
  --fs-sm: 1.4rem;
  --fs-md: 1.5rem;
  --fs-base: 1.6rem;
  --fs-lg: 1.8rem;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-base: 1.5;
  --lh-tight: 1.25;
  /* Radius */
  --radius-xs: 0.2rem;
  --radius-sm: 0.4rem;
  --radius-md: 0.6rem;
  --radius-lg: 0.8rem;
  --radius-xl: 2rem;
  --radius-pill: 4.8rem;
  /* Button */
  --btn-h-xs: 2.8rem;
  --btn-h-sm: 3.6rem;
  --btn-h-md: 4rem;
  --btn-h-lg: 4.8rem;
  --btn-h-xl: 5.6rem;
  --btn-px-xs: 0.8rem;
  --btn-px-sm: 1.2rem;
  --btn-px-lg: 1.6rem;
  --btn-px-xl: 2.4rem;
  /* Input */
  --input-h-sm: 4rem;
  --input-h-md: 4.8rem;
  --input-h-xs: 2.8rem;
  --input-px: 1.2rem;
  --input-px-xs: 0.8rem;
  --input-w: 24rem;
  /* Form */
  --form-content-w: 80rem;
  /* Icon */
  --icon-size: 2.4rem;
  --btn-icon-size: 1.8rem;
  /* Spacing */
  --gap-xs: 0.4rem;
  --gap-sm: 0.8rem;
  --gap-md: 1.2rem;
  --gap-lg: 1.6rem;
  --gap-xl: 2rem;
  /* Transition & shadow */
  --transition: all 0.2s ease;
  --shadow-tooltip: 0 0.4rem 0.2rem rgba(0, 0, 0, 0.1);
  --shadow-panel-tooltip: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.1);
  /* Guide layout */
  --guide-header-h: 6rem;
  --guide-sidebar-w: 22rem;
  /* App layout */
  --layout-min-w: 144rem;
  --layout-sidebar-w: 24rem;
  --layout-sidebar-w-collapsed: 8rem;
  --layout-work-min-w: calc(var(--layout-min-w) - var(--layout-sidebar-w-collapsed));
  --layout-topbar-h: 7.2rem;
  --layout-sidebar-bg: #3e54a0;
  --layout-work-bg: #f4f5f6;
  --layout-sidebar-active: #556dcf;
  --layout-sidebar-text-muted: rgba(255, 255, 255, 0.6);
  --layout-sidebar-divider: rgba(255, 255, 255, 0.1);
  --layout-alarm: #d93564;
  --chart-ivd: #2db9bb;
  --chart-diagnosis: #5e8bee;
  --chart-treatment: #6f4096;
  --chart-bar-gap: 3.2rem;
  --chart-bar-max-h: 15rem;
  --chart-visible-months: 7;
}

/* ==========================================================================
기본 스타일
========================================================================== */
body {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  font-family: var(--font-family);
  color: var(--color-title);
  background-color: var(--color-white);
}
body::selection {
  background: var(--color-primary);
  color: var(--color-white);
}

/* 스크롤이 생기는 모든 요소 — webkit / Firefox 동일 스크롤바 */
*::-webkit-scrollbar {
  width: 1rem;
  height: 1rem;
}
*::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  border-radius: 1rem;
  border: 0.2rem solid transparent;
  background-color: rgba(0, 0, 0, 0.2);
  background-clip: content-box;
}
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
  }
}

*:focus {
  outline: 0.2rem solid var(--color-accent);
  outline-offset: -0.2rem;
  box-shadow: inset 0 0 0 0.3rem var(--color-white);
}

/* ==========================================================================
반응형 폰트 기준 크기
==========================================================================
@media (max-width: m.$sidebar-collapse) {
    html { font-size: 9px; }
}

@media (max-width: m.$layout-min) {
    html { font-size: 8px; }
}
 */
/* ==========================================================================
유틸리티
========================================================================== */
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  display: inline-block;
  max-width: 96%;
}

.iframe {
  display: block;
  width: 100%;
}

/* ==========================================================================
텍스트
========================================================================== */
.text-left {
  text-align: left !important;
}
.text-center {
  text-align: center !important;
}
.text-right {
  text-align: right !important;
}
.text-bold {
  font-weight: var(--fw-bold);
}
.text-underline {
  text-decoration: underline !important;
  text-underline-position: under;
}
.text-link {
  text-decoration: underline;
  color: var(--color-primary);
  display: inline-flex;
  gap: var(--gap-sm);
  align-items: center;
}
.text-link.ico-go::before, .text-link.ico-go::after, .text-link.ico-arr::before, .text-link.ico-arr::after {
  background: var(--color-primary);
  width: 1.7rem;
  height: 1.7rem;
}
.text-primary {
  color: var(--color-primary) !important;
}
.text-second {
  color: var(--color-subtitle) !important;
}
.text-point {
  color: var(--color-accent) !important;
}
.text-gray {
  color: var(--color-body) !important;
}

/* ==========================================================================
배경색
========================================================================== */
.bg-primary {
  background-color: var(--color-cool-bg1) !important;
}

.bg-second {
  background-color: var(--color-cool-bg2) !important;
}

.bg-point {
  background-color: var(--badge-diagnosis-bg) !important;
}

.bg-gray {
  background-color: var(--color-bg-100) !important;
}

/* ==========================================================================
Flex 정렬
========================================================================== */
.jc-center {
  justify-content: center !important;
}

.jc-space-around {
  justify-content: space-around !important;
}

.jc-space-evenly {
  justify-content: space-evenly !important;
}

.jc-space-between {
  justify-content: space-between !important;
}

.jc-flex-end {
  justify-content: flex-end !important;
}

.jc-flex-start {
  justify-content: flex-start !important;
}

.ai-flex-start {
  align-items: flex-start !important;
}

.ai-center {
  align-items: center !important;
}

.ai-flex-end {
  align-items: flex-end !important;
}

/* ==========================================================================
너비 (w1~w30: 1% 단위, w35~w100: 5% 단위)
========================================================================== */
.w1 {
  width: 1%;
}

.w2 {
  width: 2%;
}

.w3 {
  width: 3%;
}

.w4 {
  width: 4%;
}

.w5 {
  width: 5%;
}

.w6 {
  width: 6%;
}

.w7 {
  width: 7%;
}

.w8 {
  width: 8%;
}

.w9 {
  width: 9%;
}

.w10 {
  width: 10%;
}

.w11 {
  width: 11%;
}

.w12 {
  width: 12%;
}

.w13 {
  width: 13%;
}

.w14 {
  width: 14%;
}

.w15 {
  width: 15%;
}

.w16 {
  width: 16%;
}

.w17 {
  width: 17%;
}

.w18 {
  width: 18%;
}

.w19 {
  width: 19%;
}

.w20 {
  width: 20%;
}

.w21 {
  width: 21%;
}

.w22 {
  width: 22%;
}

.w23 {
  width: 23%;
}

.w24 {
  width: 24%;
}

.w25 {
  width: 25%;
}

.w26 {
  width: 26%;
}

.w27 {
  width: 27%;
}

.w28 {
  width: 28%;
}

.w29 {
  width: 29%;
}

.w30 {
  width: 30%;
}

.w35 {
  width: 35%;
}

.w40 {
  width: 40%;
}

.w45 {
  width: 45%;
}

.w50 {
  width: 50%;
}

.w55 {
  width: 55%;
}

.w60 {
  width: 60%;
}

.w65 {
  width: 65%;
}

.w70 {
  width: 70%;
}

.w75 {
  width: 75%;
}

.w80 {
  width: 80%;
}

.w85 {
  width: 85%;
}

.w90 {
  width: 90%;
}

.w95 {
  width: 95%;
}

.w100 {
  width: 100%;
}

/* ==========================================================================
마진
========================================================================== */
.ml0 {
  margin-left: calc(0 * 1rem) !important;
}

.ml1 {
  margin-left: calc(1 * 1rem) !important;
}

.ml2 {
  margin-left: calc(2 * 1rem) !important;
}

.ml3 {
  margin-left: calc(3 * 1rem) !important;
}

.ml4 {
  margin-left: calc(4 * 1rem) !important;
}

.ml5 {
  margin-left: calc(5 * 1rem) !important;
}

.ml6 {
  margin-left: calc(6 * 1rem) !important;
}

.ml7 {
  margin-left: calc(7 * 1rem) !important;
}

.ml8 {
  margin-left: calc(8 * 1rem) !important;
}

.ml9 {
  margin-left: calc(9 * 1rem) !important;
}

.ml10 {
  margin-left: calc(10 * 1rem) !important;
}

.mla {
  margin-left: auto;
}

.mt0 {
  margin-top: calc(0 * 1rem) !important;
}

.mt1 {
  margin-top: calc(1 * 1rem) !important;
}

.mt2 {
  margin-top: calc(2 * 1rem) !important;
}

.mt3 {
  margin-top: calc(3 * 1rem) !important;
}

.mt4 {
  margin-top: calc(4 * 1rem) !important;
}

.mt5 {
  margin-top: calc(5 * 1rem) !important;
}

.mt6 {
  margin-top: calc(6 * 1rem) !important;
}

.mt7 {
  margin-top: calc(7 * 1rem) !important;
}

.mt8 {
  margin-top: calc(8 * 1rem) !important;
}

.mt9 {
  margin-top: calc(9 * 1rem) !important;
}

.mt10 {
  margin-top: calc(10 * 1rem) !important;
}

.mta {
  margin-top: auto;
}

.mr0 {
  margin-right: calc(0 * 1rem) !important;
}

.mr1 {
  margin-right: calc(1 * 1rem) !important;
}

.mr2 {
  margin-right: calc(2 * 1rem) !important;
}

.mr3 {
  margin-right: calc(3 * 1rem) !important;
}

.mr4 {
  margin-right: calc(4 * 1rem) !important;
}

.mr5 {
  margin-right: calc(5 * 1rem) !important;
}

.mr6 {
  margin-right: calc(6 * 1rem) !important;
}

.mr7 {
  margin-right: calc(7 * 1rem) !important;
}

.mr8 {
  margin-right: calc(8 * 1rem) !important;
}

.mr9 {
  margin-right: calc(9 * 1rem) !important;
}

.mr10 {
  margin-right: calc(10 * 1rem) !important;
}

.mra {
  margin-right: auto;
}

.mb0 {
  margin-bottom: calc(0 * 1rem) !important;
}

.mb1 {
  margin-bottom: calc(1 * 1rem) !important;
}

.mb2 {
  margin-bottom: calc(2 * 1rem) !important;
}

.mb3 {
  margin-bottom: calc(3 * 1rem) !important;
}

.mb4 {
  margin-bottom: calc(4 * 1rem) !important;
}

.mb5 {
  margin-bottom: calc(5 * 1rem) !important;
}

.mb6 {
  margin-bottom: calc(6 * 1rem) !important;
}

.mb7 {
  margin-bottom: calc(7 * 1rem) !important;
}

.mb8 {
  margin-bottom: calc(8 * 1rem) !important;
}

.mb9 {
  margin-bottom: calc(9 * 1rem) !important;
}

.mb10 {
  margin-bottom: calc(10 * 1rem) !important;
}

.mba {
  margin-bottom: auto;
}

/* ==========================================================================
Grid
========================================================================== */
.col {
  display: grid !important;
}

.col1 {
  display: grid !important;
  grid-template-columns: repeat(1, 1fr) !important;
}

.colspan1 {
  grid-column: span 1;
}

.rowspan1 {
  grid-row: span 1;
}

.col2 {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
}

.colspan2 {
  grid-column: span 2;
}

.rowspan2 {
  grid-row: span 2;
}

.col3 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
}

.colspan3 {
  grid-column: span 3;
}

.rowspan3 {
  grid-row: span 3;
}

.col4 {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
}

.colspan4 {
  grid-column: span 4;
}

.rowspan4 {
  grid-row: span 4;
}

.col5 {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
}

.colspan5 {
  grid-column: span 5;
}

.rowspan5 {
  grid-row: span 5;
}

/*-------------------------------------------------
title       : MPS Components
Author      : PLAN I
Create date : 2026-06-26
-------------------------------------------------*/
/* Button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-xs);
  border: none;
  cursor: pointer;
  font-family: var(--font-family);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  transition: var(--transition);
  text-decoration: none;
}
.btn [class^=ri-] {
  flex-shrink: 0;
}
.btn:disabled, .btn.is-disabled {
  background-color: var(--color-disabled);
  border-color: var(--color-disabled);
  color: var(--color-white);
  cursor: not-allowed;
  pointer-events: none;
}
.btn--fill {
  background-color: var(--color-primary);
  color: var(--color-white);
}
.btn--fill:hover:not(:disabled):not(.is-disabled) {
  background-color: var(--color-primary-light);
}
.btn--outline1 {
  background-color: var(--color-white);
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
}
.btn--outline1:hover:not(:disabled):not(.is-disabled) {
  background-color: color-mix(in srgb, var(--color-primary-light) 10%, transparent);
}
.btn--outline2 {
  background-color: var(--color-white);
  border: 1px solid var(--color-sub);
  color: var(--color-title);
}
.btn--outline2:hover:not(:disabled):not(.is-disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.btn--outline3 {
  background-color: var(--color-white);
  border: 1px solid var(--color-border-300);
  color: var(--color-title);
}
.btn--outline3:hover:not(:disabled):not(.is-disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.btn--danger-soft {
  border: 0;
  background-color: #ffe3e6;
  color: var(--layout-alarm);
}
.btn--danger-soft:hover:not(:disabled):not(.is-disabled) {
  background-color: var(--badge-red-bg);
  color: var(--badge-red-text);
}
.btn--icon, .btn--icon-ghost {
  transition: var(--transition);
}
.btn--icon [class^=ri-],
.btn--icon .input__icon, .btn--icon-ghost [class^=ri-],
.btn--icon-ghost .input__icon {
  transition: var(--transition);
}
.btn--icon:hover:not(:disabled):not(.is-disabled), .btn--icon-ghost:hover:not(:disabled):not(.is-disabled) {
  color: var(--color-primary);
}
.btn--icon:hover:not(:disabled):not(.is-disabled) [class^=ri-],
.btn--icon:hover:not(:disabled):not(.is-disabled) [class^=ri-]::before,
.btn--icon:hover:not(:disabled):not(.is-disabled) .input__icon, .btn--icon-ghost:hover:not(:disabled):not(.is-disabled) [class^=ri-],
.btn--icon-ghost:hover:not(:disabled):not(.is-disabled) [class^=ri-]::before,
.btn--icon-ghost:hover:not(:disabled):not(.is-disabled) .input__icon {
  color: var(--color-primary);
}
.btn--icon:focus-visible, .btn--icon-ghost:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
.btn--icon {
  background-color: var(--color-white);
  border: 1px solid var(--color-border-300);
  color: var(--color-title);
  padding: 0;
}
.btn--icon:hover:not(:disabled):not(.is-disabled) {
  border-color: var(--color-primary);
}
.btn--icon-ghost {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
}
.btn--has-icon [class^=ri-],
.btn--has-icon .input__icon {
  transition: var(--transition);
}
.btn--has-icon:hover:not(:disabled):not(.is-disabled) [class^=ri-],
.btn--has-icon:hover:not(:disabled):not(.is-disabled) [class^=ri-]::before,
.btn--has-icon:hover:not(:disabled):not(.is-disabled) .input__icon {
  color: var(--color-primary);
}
.btn--xs {
  height: var(--btn-h-xs);
  padding: 0 var(--btn-px-xs);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
}
.btn--sm {
  height: var(--btn-h-sm);
  padding: 0 var(--btn-px-sm);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
}
.btn--md {
  height: var(--btn-h-md);
  padding: 0 var(--btn-px-sm);
  border-radius: var(--radius-md);
  font-size: var(--fs-md);
}
.btn--lg {
  height: var(--btn-h-lg);
  padding: 0 var(--btn-px-lg);
  border-radius: var(--radius-md);
  font-size: var(--fs-base);
}
.btn--lg [class^=ri-] {
  font-size: 2rem;
  line-height: 1;
}
.btn--xl {
  height: var(--btn-h-xl);
  padding: 0 var(--btn-px-xl);
  border-radius: var(--radius-lg);
  font-size: var(--fs-lg);
}
.btn--icon.btn--sm {
  width: var(--btn-h-sm);
}
.btn--icon.btn--md {
  width: var(--btn-h-md);
}
.btn--icon.btn--lg {
  width: var(--btn-h-lg);
}
.btn--icon.btn--xl {
  width: var(--btn-h-xl);
}
.btn__icon {
  flex-shrink: 0;
  width: var(--btn-icon-size);
  height: var(--btn-icon-size);
}
.btn:not(.btn--fill):not(.btn--icon):not(.btn--icon-ghost):not(.is-disabled):not(:disabled) [class^=ri-],
.btn:not(.btn--fill):not(.btn--icon):not(.btn--icon-ghost):not(.is-disabled):not(:disabled) .input__icon {
  transition: var(--transition);
}
.btn:not(.btn--fill):not(.btn--icon):not(.btn--icon-ghost):not(.is-disabled):not(:disabled):hover:not(:disabled) [class^=ri-],
.btn:not(.btn--fill):not(.btn--icon):not(.btn--icon-ghost):not(.is-disabled):not(:disabled):hover:not(:disabled) [class^=ri-]::before,
.btn:not(.btn--fill):not(.btn--icon):not(.btn--icon-ghost):not(.is-disabled):not(:disabled):hover:not(:disabled) .input__icon {
  color: var(--color-primary);
}

/* Review action button (40px fill variants) */
.review-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-xs);
  width: 100%;
  max-width: 36rem;
  height: 4rem;
  padding: 1rem 1.2rem;
  border-radius: var(--radius-md);
  font-family: var(--font-family);
  font-size: var(--fs-base);
  cursor: pointer;
  transition: var(--transition);
}
.review-btn:not(.review-btn--disabled) [class^=ri-],
.review-btn:not(.review-btn--disabled) .input__icon {
  transition: var(--transition);
}
.review-btn:not(.review-btn--disabled):hover:not(:disabled) [class^=ri-],
.review-btn:not(.review-btn--disabled):hover:not(:disabled) [class^=ri-]::before,
.review-btn:not(.review-btn--disabled):hover:not(:disabled) .input__icon {
  color: var(--color-primary);
}
.review-btn--outline1 {
  border: 1px solid var(--color-sub);
  background-color: var(--color-white);
  color: var(--color-subtitle);
}
.review-btn--outline2 {
  border: 1px solid var(--color-border-300);
  background-color: var(--color-white);
  color: var(--color-subtitle);
}
.review-btn--disabled {
  border: none;
  background-color: var(--color-disabled-bg);
  color: var(--color-sub);
  cursor: not-allowed;
}
.review-btn--close {
  border: 1px solid var(--color-border-300);
  background-color: var(--color-white);
  color: var(--color-subtitle);
}

/*-------------------------------------------------
  _badge.scss — Badge
  출력: layout.css

  주요 클래스
    .badge-dx / .badge-ivd / .badge-tx (설계서 유형)
    .badge-temp / .badge-submit / .badge-reject / .badge-gray …
    .status-badge, .step-badge
    .field-badge, .field-badge--chip (자문 가능 분야)

  용도
    상태·유형·분야 라벨. 색상은 _variables.scss --badge-* 토큰만 사용.

  사용처
    목록/상세 JSP, asmt-picker-card, userView, advisorProfile
-------------------------------------------------*/
.badge-dx,
.badge-ivd,
.badge-tx,
.badge-temp,
.badge-submit,
.badge-reject,
.badge-gray,
.badge-yellow,
.badge-red,
.badge-indigo,
.badge-green,
.badge-outline,
.badge-wait {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-xs);
  height: 2.4rem;
  padding: 0 0.6rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-base);
  white-space: nowrap;
}
.badge-dx [class^=ri-],
.badge-ivd [class^=ri-],
.badge-tx [class^=ri-],
.badge-temp [class^=ri-],
.badge-submit [class^=ri-],
.badge-reject [class^=ri-],
.badge-gray [class^=ri-],
.badge-yellow [class^=ri-],
.badge-red [class^=ri-],
.badge-indigo [class^=ri-],
.badge-green [class^=ri-],
.badge-outline [class^=ri-],
.badge-wait [class^=ri-] {
  font-size: 1.6rem;
  line-height: 1;
}

.badge-dx {
  background-color: var(--badge-dx-bg);
  color: var(--badge-dx-text);
}

.badge-ivd {
  background-color: var(--badge-ivd-bg);
  color: var(--badge-ivd-text);
}

.badge-tx {
  background-color: var(--badge-tx-bg);
  color: var(--badge-tx-text);
}

.badge-red {
  background-color: var(--badge-red-bg);
  color: var(--badge-red-text);
}

.badge-yellow {
  background-color: var(--badge-yellow-bg);
  color: var(--badge-yellow-text);
}

.badge-indigo {
  background-color: var(--badge-indigo-bg);
  color: var(--badge-indigo-text);
}

.badge-gray,
.badge-wait {
  background-color: var(--badge-gray-bg);
  color: var(--badge-gray-text);
}

.badge-green,
.badge-submit {
  background-color: var(--badge-submit-bg);
  color: var(--badge-submit-text);
}

.badge-temp {
  background-color: var(--badge-temp-bg);
  color: var(--badge-temp-text);
}

.badge-reject {
  background-color: var(--badge-reject-bg);
  color: var(--badge-reject-text);
}

.badge-outline {
  background-color: transparent;
  border: 1px solid var(--color-border-400);
  color: var(--color-subtitle);
}

/* Status badge */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  font-family: var(--font-family);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--color-title);
  line-height: var(--lh-base);
  white-space: nowrap;
}
.status-badge__icon {
  flex-shrink: 0;
  font-size: 1.6rem;
  line-height: 1;
}
.status-badge__txt {
  flex-shrink: 0;
}
.status-badge--success .status-badge__icon {
  color: var(--status-success);
}
.status-badge--warning .status-badge__icon {
  color: var(--status-warning);
}

/* Step badge */
.step-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-sm);
  height: 2.4rem;
}
.step-badge__bar {
  position: relative;
  width: 2.4rem;
  height: 0.4rem;
  border-radius: 1rem;
  background-color: var(--step-track);
  overflow: hidden;
}
.step-badge__fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  border-radius: 2rem;
  background-color: var(--color-accent);
}
.step-badge__label {
  width: 1.8rem;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-subtitle);
  text-align: center;
  line-height: var(--lh-base);
}
.step-badge--s1 .step-badge__fill {
  width: 25%;
}
.step-badge--s2 .step-badge__fill {
  width: 50%;
}
.step-badge--s3 .step-badge__fill {
  width: 75%;
}
.step-badge--s4 .step-badge__fill {
  width: 100%;
}

/* Field badge (자문가능분야) */
.field-badge-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.field-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-cool-bg2);
  font-size: 1.2rem;
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  color: var(--color-title);
  white-space: nowrap;
}
.field-badge--chip {
  height: 4rem;
  padding: 0 1.2rem;
  border: 1px solid var(--color-border-300);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
}

.field-badge-list--start {
  justify-content: flex-start;
  gap: 0.8rem;
}

/* Form check (radio / checkbox) */
.form-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--gap-sm);
  cursor: pointer;
}
.form-check__input {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 1;
  width: 1.8rem;
  height: 1.8rem;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  transform: translateY(-50%);
  cursor: pointer;
}
.form-check__input:focus-visible + .form-check__mark {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.form-check__input[type=radio]:checked + .form-check__mark {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}
.form-check__input[type=radio]:checked + .form-check__mark::after {
  opacity: 1;
}
.form-check__input[type=checkbox]:checked + .form-check__mark {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}
.form-check__input[type=checkbox]:checked + .form-check__mark [class^=ri-],
.form-check__input[type=checkbox]:checked + .form-check__mark [class^=ri-]::before {
  color: var(--color-white);
  opacity: 1;
}
.form-check__mark {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.8rem;
  height: 1.8rem;
  border: 1px solid var(--color-inactive);
  background-color: var(--color-white);
}
.form-check__input[type=radio] + .form-check__mark {
  border-radius: 50%;
}
.form-check__input[type=radio] + .form-check__mark::after {
  content: "";
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background-color: var(--color-white);
  opacity: 0;
}
.form-check__input[type=checkbox] + .form-check__mark {
  border-radius: var(--radius-xs);
}
.form-check__input[type=checkbox] + .form-check__mark [class^=ri-] {
  font-size: 1.6rem;
  line-height: 1;
  opacity: 0;
  transition: var(--transition);
}
.form-check__txt {
  font-size: var(--fs-base);
  color: var(--color-subtitle);
  line-height: var(--lh-base);
}

.form-check-box {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  width: 100%;
  padding: 2rem;
  border: 1px solid var(--color-border-300);
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
}
.form-check-box__label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-title);
}
.form-check-box__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem 3rem;
  margin: 0;
  padding: 0;
  border: none;
}
.form-check-box__group .form-check {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.form-check-box__group--block {
  flex-direction: column;
  align-items: flex-start;
  gap: 1.2rem;
}

/* Check fill (상세보기 표시용) */
.check-fill-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2.4rem;
}

.check-fill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.check-fill__mark {
  flex-shrink: 0;
  font-size: 2rem;
  line-height: 1;
  color: #E0E0E0;
}
.check-fill__txt {
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  color: var(--color-inactive);
  line-height: var(--lh-base);
}
.check-fill.is-checked .check-fill__mark {
  color: var(--color-title);
}
.check-fill.is-checked .check-fill__txt {
  font-weight: var(--fw-semibold);
  color: var(--color-title);
}

/* Input */
.input {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  width: 100%;
  padding: 0 var(--input-px);
  border: 1px solid var(--color-border-300);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
  font-family: var(--font-family);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  color: var(--color-title);
  line-height: var(--lh-base);
  transition: var(--transition);
}
.input::placeholder {
  color: var(--color-sub);
}
.input:focus {
  outline: none;
  border-color: var(--color-primary);
}
.input:disabled {
  background-color: var(--color-bg-100);
  color: var(--color-inactive);
  cursor: not-allowed;
}
.input--sm {
  height: var(--input-h-sm);
}
.input--xs {
  height: var(--input-h-xs);
  padding: 0 var(--input-px-xs);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
}
.input--xs.input--select {
  padding-right: 2.4rem;
}
.input--textarea-sm {
  min-height: 9.6rem;
}
.input--md {
  height: var(--input-h-md);
}
.input--select {
  gap: 1rem;
  padding-right: 3.2rem;
  cursor: pointer;
}
.input--select.input--readonly {
  padding-right: var(--input-px);
}
.input--select .input__icon {
  font-size: 1.2rem;
}
.input--calendar {
  position: relative;
  cursor: pointer;
}
.input--calendar .input__field[type=date] {
  cursor: pointer;
  color-scheme: light;
}
.input--calendar .input__field[type=date]::-webkit-calendar-picker-indicator {
  display: none;
}
.input--calendar .input__field[type=date]::-moz-calendar-picker-indicator {
  display: none;
}
.input--calendar .input__field[type=date]::-webkit-date-and-time-value {
  text-align: left;
}
.input--calendar.input--readonly {
  cursor: default;
}
.input--calendar.input--readonly .input__field[type=date] {
  cursor: default;
}
.input--readonly {
  background-color: var(--color-border-200);
  border-color: var(--color-border-300);
  cursor: default;
  pointer-events: none;
}
.input--readonly .input__field,
.input--readonly .input__txt {
  color: var(--color-title);
  cursor: default;
}
.input--readonly .input__icon {
  color: var(--color-border-400);
}
.input--readonly:has(.input__field:focus) {
  border-color: var(--color-border-300);
}
.input__field {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  font: inherit;
  color: var(--color-title);
  line-height: var(--lh-base);
}
.input__field::placeholder {
  color: var(--color-sub);
}
.input__field:focus {
  outline: none;
}
.input__txt {
  flex: 1;
  min-width: 0;
  text-align: left;
}
.input__icon {
  flex-shrink: 0;
  font-size: 2rem;
  color: var(--color-title);
  line-height: 1;
}
.input__btn {
  flex-shrink: 0;
  color: inherit;
}
.input:has(.input__field:focus), .input:has(.input__btn:focus-visible) {
  border-color: var(--color-primary);
}
.input.is-error {
  background-color: #fdf6f8;
  border-color: var(--badge-red-text);
}
.input.is-error:has(.input__field:focus), .input.is-error:has(.input__btn:focus-visible) {
  border-color: var(--badge-red-text);
}

input.input:read-only, input.input[readonly],
textarea.input:read-only,
textarea.input[readonly] {
  background-color: var(--color-border-200);
  border-color: var(--color-border-300);
  color: var(--color-title);
  cursor: default;
}
input.input:read-only:focus, input.input[readonly]:focus,
textarea.input:read-only:focus,
textarea.input[readonly]:focus {
  border-color: var(--color-border-300);
}

button.input {
  background-color: var(--color-white);
  cursor: pointer;
  text-align: left;
}

textarea.input {
  height: auto;
  min-height: 12rem;
  padding: var(--input-px);
  line-height: var(--lh-base);
  resize: vertical;
}

select.input {
  appearance: none;
  background-color: var(--color-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='6' viewBox='0 0 10.7071 6.06066' fill='none'%3E%3Cpath d='M0.353553 0.353553L5.35355 5.35355L10.3536 0.353553' stroke='%23222222'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.2rem center;
  padding-right: 3.2rem;
}
select.input.input--xs {
  background-position: right 0.8rem center;
  padding-right: 2.4rem;
}
select.input:disabled, select.input.input--readonly {
  background-color: var(--color-border-200);
  border-color: var(--color-border-300);
  color: var(--color-title);
  cursor: default;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='6' viewBox='0 0 10.7071 6.06066' fill='none'%3E%3Cpath d='M0.353553 0.353553L5.35355 5.35355L10.3536 0.353553' stroke='%23bdbdbd'/%3E%3C/svg%3E");
}

/* Input set */
.input-set {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
  width: 100%;
  max-width: var(--input-w);
}
.input-set__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-md);
}
.input-set__head .input-set__label {
  flex: 1;
  min-width: 0;
}
.input-set__head .form-check {
  flex-shrink: 0;
}
.input-set__label {
  display: block;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-title);
  line-height: var(--lh-base);
}
.input-set__label .tooltip {
  display: inline-flex;
  vertical-align: middle;
  margin-left: var(--gap-xs);
}
.input-set__optional {
  font-weight: var(--fw-semibold);
  color: var(--color-inactive);
}
.input-set__help {
  font-size: var(--fs-sm);
  color: var(--color-sub);
  line-height: var(--lh-tight);
}
.input-set__count {
  font-size: var(--fs-xs);
  color: var(--color-inactive);
  text-align: right;
  line-height: var(--lh-base);
}

/* Member type selector (계정 추가) */
.member-type-list {
  display: flex;
  align-items: stretch;
  gap: var(--gap-md);
  width: 100%;
  max-width: var(--form-content-w);
}
.member-type-list__item {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-width: 0;
  height: 5.6rem;
  padding: 0 2.4rem;
  border: 1px solid var(--color-border-300);
  border-radius: var(--radius-lg);
  background-color: var(--color-bg-100);
  font-family: var(--font-family);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  color: var(--color-title);
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.member-type-list__item:hover:not(.is-active) {
  border-color: var(--color-sub);
}
.member-type-list__item.is-active {
  border-color: var(--color-primary);
  background-color: var(--color-white);
  color: var(--color-primary);
}
.member-type-list__item.is-active [class^=ri-] {
  color: var(--color-primary);
}
.member-type-list__item:focus-visible {
  outline: 0.2rem solid var(--color-accent);
  outline-offset: 0.2rem;
}

/* Form row (dynamic item) */
.form-row {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-md);
  width: 100%;
  max-width: var(--form-content-w);
  padding: 1.2rem;
  border-radius: var(--radius-lg);
  transition: var(--transition);
}
.form-row:hover {
  background-color: var(--color-bg-100);
}
.form-row__label {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 6rem;
  height: var(--input-h-md);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  color: var(--color-text-dark);
  line-height: var(--lh-base);
}
.form-row__fields {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
  flex: 1;
  min-width: 0;
}
.form-row__fields .input {
  flex: 1;
  min-width: 0;
  width: 100%;
}
.form-row__fields textarea.input {
  min-height: 9.6rem;
}
.form-row__row {
  display: flex;
  gap: var(--gap-md);
  width: 100%;
}
.form-row__row .input {
  flex: 1;
  min-width: 0;
}
.form-row__delete {
  flex-shrink: 0;
}

.required {
  color: #dc2626;
}

.input-field-row {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  width: 100%;
}
.input-field-row .input {
  flex: 1;
  min-width: 0;
}
.input-field-row .btn {
  flex-shrink: 0;
}

.input-field-row--name {
  flex-wrap: wrap;
}
.input-field-row--name .input--name {
  flex: 0 0 16rem;
  width: 16rem;
}
.input-field-row--name .chip-list {
  flex: 1;
  min-width: 0;
}

.form-field-row--2col {
  display: flex;
  gap: 2rem;
  width: 100%;
}
.form-field-row--2col > .input-set {
  flex: 1;
  min-width: 0;
}

.input-search-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  width: 100%;
  padding-right: 1.2rem;
  text-align: left;
  cursor: pointer;
}
.input-search-trigger__txt {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--color-sub);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.input-search-trigger__txt.is-filled {
  color: var(--color-title);
}
.input-search-trigger [class^=ri-] {
  flex-shrink: 0;
  font-size: 2rem;
  color: var(--color-title);
  line-height: 1;
}

.form-radio-field {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  width: 100%;
}
.form-radio-field__label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-title);
  line-height: 1.5;
}
.form-radio-field__group {
  display: flex;
  flex-wrap: wrap;
  gap: 2.4rem;
  padding: 1.2rem;
  border-radius: 0.4rem;
  background-color: var(--color-bg-100);
}
.form-radio-field__group .form-check {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.name-badge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
}
.name-badge-row .input--name {
  flex: 0 0 16rem;
  width: 16rem;
}
.name-badge-row .btn {
  flex-shrink: 0;
}

/* Data table */
.data-table-wrap {
  width: 100%;
}

.data-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  background-color: var(--color-white);
}
.data-table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.data-table th,
.data-table td {
  padding: 1.2rem;
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border-300);
}
.data-table th {
  background-color: var(--color-cool-bg2);
}
.data-table thead th {
  box-sizing: border-box;
  height: 5rem;
  max-height: 5rem;
  padding: 0.6rem 1.2rem;
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  color: var(--color-title);
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  border-top: 1px solid var(--color-border-300);
}
.data-table thead th:first-child {
  border-left: 1px solid var(--color-border-300);
  border-top-left-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-lg);
}
.data-table thead th:last-child {
  border-right: 1px solid var(--color-border-300);
  border-top-right-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}
.data-table tbody td {
  color: var(--color-title);
  text-align: center;
}
.data-table tbody td:has(.detail-table__list) {
  text-align: left;
  vertical-align: top;
}
.data-table tbody td .detail-table__list {
  align-items: flex-start;
  text-align: left;
}
.data-table tbody td {
  /* &:has(.step-badge),
  &:has(.status-badge) {
      display: flex;
      align-items: center;
      justify-content: center;
  } */
}
.data-table tbody td.data-table__title-cell {
  max-width: 0;
  overflow: hidden;
  text-align: left;
}
.data-table__id {
  font-size: var(--fs-sm);
  color: var(--color-sub);
}
.data-table__date {
  font-size: var(--fs-sm);
  color: var(--color-sub);
}
.data-table__title-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}
.data-table__title-txt {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.data-table__title-inner .data-table__title-txt {
  flex: 1;
  min-width: 0;
}
.data-table__title-txt:is(a) {
  color: var(--color-title);
  text-decoration: none;
}
.data-table__title-txt:is(a):hover {
  color: var(--color-primary);
  text-decoration: underline;
}
.data-table__title-txt:is(a):focus-visible {
  outline: 0.2rem solid var(--color-accent);
  outline-offset: 0.2rem;
  border-radius: var(--radius-xs);
}
.data-table__name-cell {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.data-table__name-link {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-title);
  text-decoration: none;
}
.data-table__name-link:hover, .data-table__name-link:focus-visible {
  color: var(--color-primary);
  text-decoration: underline;
}
.data-table--user {
  min-width: 104rem;
}
.data-table__action-group {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}
.data-table--member tbody td {
  font-size: var(--fs-md);
}
.data-table--member tbody td.data-table__name-id-cell {
  text-align: left;
}
.data-table--member tbody td.data-table__name-id-cell .data-table__sub {
  display: block;
  margin-top: 0.2rem;
  font-size: var(--fs-xs);
  color: var(--color-sub);
  word-break: break-all;
}
.data-table--member tbody td .input {
  width: 100%;
}
.data-table--member tbody td:has(.input--xs) {
  vertical-align: middle;
}
.data-table--member tbody tr.is-disabled {
  color: var(--color-sub);
  background-color: var(--color-bg-100);
}
.data-table--member tbody .data-table__sub {
  display: block;
  margin-top: 0.2rem;
  font-size: var(--fs-xs);
  color: var(--color-sub);
}
.data-table__fields-cell {
  padding: 0.8rem 1.2rem;
  text-align: center;
}
.data-table--picker tbody td {
  font-size: var(--fs-md);
}
.data-table--picker tbody tr.is-selected {
  background-color: #eff3fd;
}
.data-table--picker tbody td.data-table__name-id-cell {
  text-align: left;
}
.data-table--picker tbody td.data-table__name-id-cell .data-table__sub {
  display: block;
  margin-top: 0.2rem;
  font-size: var(--fs-xs);
  color: var(--color-sub);
  word-break: break-all;
}
.data-table--picker .form-check {
  justify-content: center;
}

.data-table--item-picker {
  min-width: 0;
}
.data-table--item-picker thead th {
  text-align: center;
}
.data-table--item-picker tbody td {
  vertical-align: middle;
}
.data-table--item-picker .data-table__item-no,
.data-table--item-picker tbody td:last-child {
  text-align: center;
}
.data-table--item-picker .data-table__item-name {
  text-align: left;
}
.data-table--item-picker tbody td:last-child {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.data-table--member {
  min-width: 0;
}

.data-table tbody tr.design-row {
  cursor: pointer;
}
.data-table tbody tr.design-row:hover {
  background: var(--color-bg-subtle);
}

/* Detail table (상세보기 — 행 헤더 레이아웃) */
.detail-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.detail-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  background-color: var(--color-white);
  border-top: 1px solid var(--color-border-300);
}
.detail-table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.detail-table th,
.detail-table td {
  padding: 1.6rem;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  border-bottom: 1px solid var(--color-border-300);
}
.detail-table th {
  font-weight: var(--fw-semibold);
  color: var(--color-subtitle);
  background-color: var(--color-bg-100);
  text-align: left;
  vertical-align: top;
}
.detail-table td {
  color: var(--color-subtitle);
  text-align: left;
  vertical-align: top;
}
.detail-table__col-label {
  width: 20rem;
}
.detail-table__list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-left: 2rem;
  list-style: disc;
}
.detail-table__list li {
  list-style: disc;
}

.detail-table--stack tr {
  display: block;
}
.detail-table--stack th,
.detail-table--stack td {
  display: block;
  width: 100%;
}

/* Tab */
.tab-list {
  display: flex;
  align-items: flex-start;
  border-bottom: 1px solid var(--color-border-300);
}
.tab-list__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: 5.2rem;
  padding: 0.8rem 2rem;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  font-family: var(--font-family);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--color-inactive);
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  white-space: nowrap;
}
.tab-list__item:hover {
  color: var(--color-title);
}
.tab-list__item.is-active {
  color: var(--color-title);
  border-bottom-color: var(--color-title);
}
.tab-list__item.is-disabled, .tab-list__item:not([href]):not(button) {
  cursor: default;
}
.tab-list__item.is-disabled:hover, .tab-list__item:not([href]):not(button):hover {
  color: var(--color-inactive);
}
.tab-list__item.is-disabled.is-active:hover, .tab-list__item:not([href]):not(button).is-active:hover {
  color: var(--color-title);
}
.tab-list__item:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}
.tab-list__item .badge {
  flex-shrink: 0;
}
.tab-list--portal {
  width: 100%;
  border-bottom-color: var(--color-border-300);
}

.tab-panel {
  display: none;
  padding-top: var(--gap-xl);
}
.tab-panel.is-active {
  display: block;
}

/* Chip tab (연결형탭) */
.chip-tab-list {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  height: var(--input-h-sm);
  padding: 0.4rem;
  border: 1px solid var(--color-border-300);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
}
.chip-tab-list__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-xs);
  height: 100%;
  padding: 0.8rem 0.6rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  font-family: var(--font-family);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  color: var(--color-sub);
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.chip-tab-list__item:hover:not(.is-active) {
  color: var(--color-title);
}
.chip-tab-list__item.is-active {
  border-color: var(--color-primary-light);
  background-color: color-mix(in srgb, var(--color-primary-light) 10%, transparent);
  font-weight: var(--fw-semibold);
  color: var(--color-title);
}
.chip-tab-list__item.is-active [class^=ri-] {
  color: var(--color-primary-light);
}
.chip-tab-list__item:focus-visible {
  outline: 0.2rem solid var(--color-accent);
  outline-offset: 0.2rem;
}

.linked-tab {
  display: flex;
  width: 100%;
}
.linked-tab__item {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-width: 0;
  height: 4.8rem;
  margin-left: -1px;
  padding: 0.8rem 1.6rem;
  border: 1px solid var(--color-border-300);
  background-color: var(--color-white);
  font-family: var(--font-family);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--color-subtitle);
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.linked-tab__item:first-child {
  margin-left: 0;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}
.linked-tab__item:last-child {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.linked-tab__item:hover:not(.is-active) {
  color: var(--color-title);
}
.linked-tab__item.is-active {
  position: relative;
  z-index: 1;
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.linked-tab__item.is-active [class^=ri-] {
  flex-shrink: 0;
  font-size: 2rem;
  line-height: 1;
}
.linked-tab__item:focus-visible {
  outline: 0.2rem solid var(--color-accent);
  outline-offset: 0.2rem;
  z-index: 2;
}
.linked-tab__label {
  min-width: 0;
  line-height: 1.5;
}

/*-------------------------------------------------
  _pagination.scss — Pagination
  출력: layout.css

  주요 클래스
    .pagination, .pagination__btn, .pagination__page

  용도
    목록·모달 검색 결과 페이지 이동.
  ※ .modal__body 내부에서는 margin-top: 0 (간격은 modal 규칙 따름)

  사용처
    doc-list 목록 JSP, item/asmt/pi/mbr 검색 modal
-------------------------------------------------*/
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  margin-top: 4rem;
}
.pagination__group {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.6rem;
  height: 4.6rem;
  padding: 0;
  border: 1px solid var(--color-border-300);
  border-radius: var(--radius-pill);
  background-color: var(--color-white);
  color: var(--color-title);
  cursor: pointer;
  transition: var(--transition);
}
.pagination__btn [class^=ri-] {
  font-size: 1.8rem;
}
.pagination__btn:hover:not(:disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.pagination__btn:focus-visible {
  outline: 0.2rem solid var(--color-accent);
  outline-offset: 0.2rem;
}
.pagination__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.pagination__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.6rem;
  height: 4.6rem;
  padding: 0 1.8rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  font-family: var(--font-family);
  font-size: var(--fs-sm);
  color: var(--color-subtitle);
  cursor: pointer;
  transition: var(--transition);
}
.pagination__page:hover:not(.is-active) {
  color: var(--color-title);
  background-color: var(--color-cool-bg1);
}
.pagination__page.is-active {
  background-color: var(--color-title);
  color: var(--color-white);
  font-weight: var(--fw-semibold);
}
.pagination__page:focus-visible {
  outline: 0.2rem solid var(--color-accent);
  outline-offset: 0.2rem;
}
.pagination a.pagination__btn,
.pagination a.pagination__page {
  text-decoration: none;
}

/* Info box */
.info-box {
  display: flex;
  align-items: center;
  gap: var(--gap-lg);
  width: 100%;
  padding: 1.6rem 2rem;
  border-radius: var(--radius-lg);
  background-color: var(--color-cool-bg1);
}
.info-box__body {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--gap-lg);
  min-width: 0;
}
.info-box__icon {
  flex-shrink: 0;
  font-size: 2rem;
  color: var(--info-icon);
  line-height: 1;
}
.info-box__title {
  flex-shrink: 0;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-title);
  line-height: var(--lh-base);
  white-space: nowrap;
}
.info-box__txt {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  color: var(--color-subtitle);
  line-height: var(--lh-base);
}
.info-box__btn {
  flex-shrink: 0;
  height: var(--input-h-md);
  padding: 0 1.6rem;
  border: none;
  border-radius: var(--radius-md);
  background-color: var(--color-disabled);
  font-family: var(--font-family);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--color-white);
  line-height: 1;
  cursor: pointer;
  transition: var(--transition);
}
.info-box__toggle {
  flex-shrink: 0;
  min-width: 4.4rem;
  min-height: 4.4rem;
  padding: 1rem;
  color: var(--color-title);
}
.info-box__toggle [class^=ri-] {
  font-size: 2.4rem;
  line-height: 1;
  transition: transform var(--transition);
}

.info-box--accordion {
  flex-wrap: wrap;
  align-items: center;
  max-width: none;
}
.info-box--accordion .info-box__icon {
  flex-shrink: 0;
}
.info-box--accordion .info-box__title {
  flex: 1;
  min-width: 0;
  white-space: normal;
}
.info-box--accordion .info-box__toggle {
  margin: -1rem -1rem -1rem auto;
}
.info-box--accordion .info-box__txt {
  flex: 1 1 100%;
  margin: 0.8rem 0 0;
  padding-left: 3.2rem;
}
.info-box--accordion.is-expanded .info-box__toggle [class^=ri-] {
  transform: rotate(180deg);
}
.info-box--accordion .product-code-guide {
  max-width: 100%;
  padding-right: 0.8rem;
  font-size: 1.6rem;
  line-height: 1.6;
  color: var(--color-body);
  height: 60rem;
  overflow: auto;
}

.product-code-guide__doc-title {
  margin: 0 0 1.2rem;
  font-weight: var(--fw-semibold);
  color: var(--color-title);
}
.product-code-guide__heading {
  margin: 1.6rem 0 0.8rem;
  font-weight: var(--fw-semibold);
  color: var(--color-title);
}
.product-code-guide__subheading {
  margin: 1.4rem 0 0.6rem;
  font-size: 1.6rem;
  font-weight: var(--fw-medium);
  color: var(--color-title);
}
.product-code-guide__para {
  margin: 0 0 0.8rem;
}
.product-code-guide__list {
  margin: 0 0 1rem;
  padding-left: 1.6rem;
}
.product-code-guide__diagram {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin: 1rem 0 0.4rem;
}
.product-code-guide__cell {
  width: 2.4rem;
  height: 2.8rem;
  border: 1px solid var(--color-sub);
  border-radius: 0.2rem;
  background: #fff;
}
.product-code-guide__diagram-labels {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  margin: 0 0 1.2rem;
  padding: 0 1.6rem;
  font-size: 1.2rem;
  color: var(--color-sub);
  text-align: center;
}

.info-box--status {
  max-width: none;
  width: 100%;
  padding: 2.4rem;
  border: 1px solid var(--color-border-300);
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
}
.info-box--status .info-box__body {
  align-items: center;
  gap: 1.2rem;
}
.info-box--status .info-box__graphic {
  flex-shrink: 0;
  width: 3.6rem;
  height: 3.6rem;
  object-fit: contain;
}
.info-box--status .info-box__content {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
  min-width: 0;
}
.info-box--status .info-box__title {
  font-size: 1.8rem;
  font-weight: var(--fw-bold);
  white-space: normal;
}
.info-box--status .info-box__txt {
  flex: none;
}
.info-box--status .info-box__btn {
  height: 4.8rem;
  background-color: var(--color-title);
  cursor: pointer;
}
.info-box--status .info-box__btn:disabled, .info-box--status .info-box__btn.is-disabled {
  background-color: var(--color-disabled);
  cursor: not-allowed;
}

.note-box {
  padding: 2.4rem;
  border-radius: var(--radius-lg);
  background-color: var(--color-cool-bg1);
}
.note-box--outline {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  border: 1px solid var(--color-border-300);
  border-radius: var(--radius-xs);
  background-color: var(--color-white);
}
.note-box__label {
  display: block;
  margin-bottom: 1.6rem;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-subtitle);
}
.note-box__txt {
  margin: 0;
  font-size: var(--fs-base);
  color: var(--color-title);
}

/* Chip (removable) */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-sm);
  height: var(--input-h-md);
  padding: 0 0.8rem 0 1.2rem;
  border: 1px solid var(--color-border-300);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
  font-size: var(--fs-base);
  color: var(--color-title);
}
.chip__remove {
  width: 2rem;
  height: 2rem;
  color: var(--color-sub);
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
}

.chip-list--inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
}

/* File */
.file-area__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--gap-md);
}
.file-area__title {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-title);
  line-height: var(--lh-base);
}
.file-area__count {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
}
.file-area__download {
  gap: var(--gap-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-title);
}
.file-area__download [class^=ri-] {
  font-size: 1.6rem;
}
.file-area__list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
  padding: 0.8rem;
  border: 1px solid var(--color-border-300);
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
}
.file-area__item {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
  list-style: none;
}
.file-area__item > a,
.file-area__item > .file-area__link {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  padding: 0.8rem 1.2rem;
  border-radius: var(--radius-lg);
  color: inherit;
  text-decoration: none;
  transition: var(--transition);
}
.file-area__item > a:hover, .file-area__item > a:focus-visible,
.file-area__item > .file-area__link:hover,
.file-area__item > .file-area__link:focus-visible {
  background-color: var(--color-bg-100);
}
.file-area__item > a:focus-visible,
.file-area__item > .file-area__link:focus-visible {
  outline: 0.2rem solid var(--color-accent);
  outline-offset: 0.2rem;
}
.file-area__remove {
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  margin-right: 0.4rem;
  color: var(--color-sub);
}
.file-area__remove [class^=ri-] {
  font-size: 1.8rem;
  line-height: 1;
}
.file-area__icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  object-fit: contain;
}
.file-area__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: var(--fs-base);
  color: var(--color-title);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-area__size {
  flex-shrink: 0;
  font-size: var(--fs-sm);
  color: var(--color-inactive);
}

.file-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-lg);
  padding: 4.8rem 1.2rem;
  border-radius: var(--radius-lg);
  background-color: var(--color-bg-100);
}
.file-upload__txt {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-title);
  line-height: var(--lh-base);
}

/* Text list (본문 불릿/번호 목록) */
.text-list {
  margin: 0;
  padding-left: 2.4rem;
  font-size: var(--fs-base);
  color: var(--color-subtitle);
  line-height: var(--lh-base);
  list-style: disc;
  list-style-position: outside;
}
.text-list li {
  list-style: disc;
}
.text-list li + li {
  margin-top: 0.8rem;
}
.text-list--ordered {
  list-style: decimal;
}
.text-list--ordered li {
  list-style: decimal;
}

/* Tooltip */
.tooltip {
  position: relative;
  display: inline-flex;
}
.tooltip__trigger {
  width: 1.6rem;
  height: 1.6rem;
  color: var(--color-border-400);
}
.tooltip__trigger [class^=ri-] {
  font-size: 1.6rem;
  color: inherit;
}
.tooltip__trigger [class^=ri-]::before {
  color: inherit;
}
.tooltip__trigger--soft {
  color: var(--color-inactive);
}
.tooltip__trigger--soft [class^=ri-],
.tooltip__trigger--soft [class^=ri-]::before {
  color: inherit;
}
.tooltip__trigger:focus-visible + .tooltip__bubble, .tooltip__trigger:hover + .tooltip__bubble {
  opacity: 1;
  visibility: visible;
}
.tooltip__bubble {
  position: absolute;
  bottom: calc(100% + 0.8rem);
  left: 50%;
  transform: translateX(-50%);
  display: block;
  min-width: 0;
  max-width: 36rem;
  width: max-content;
  height: auto;
  min-height: 0;
  padding: 0.6rem 1.2rem;
  border: 0.1rem solid var(--color-inactive);
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
  box-shadow: var(--shadow-panel-tooltip);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  color: var(--color-subtitle);
  white-space: normal;
  text-align: left;
  line-height: var(--lh-base);
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
  z-index: 10;
}
.tooltip__bubble::after {
  content: "";
  position: absolute;
  top: auto;
  bottom: -0.6rem;
  left: 50%;
  right: auto;
  width: 0.9rem;
  height: 0.9rem;
  background-color: var(--color-white);
  border: 0;
  border-right: 0.1rem solid var(--color-inactive);
  border-bottom: 0.1rem solid var(--color-inactive);
  transform: translateX(-50%) rotate(45deg);
}
.tooltip {
  /* &--right {
      .tooltip__bubble {
          bottom: auto;
          left: calc(100% + 0.8rem);
          top: 50%;
          transform: translateY(-50%);           

          &::after {
              top: 50%;
              left: auto;
              right: calc(100% - 1px);
              transform: translateY(-50%);
              border-color: transparent;
              border-right-color: var(--color-text-dark);
          }
      }
  }

  &--bottom {
      .tooltip__bubble {
          bottom: auto;
          top: calc(100% + 0.8rem);            

          &::after {
              top: auto;
              bottom: 100%;                
              border-color: transparent;
              border-bottom-color: var(--color-text-dark);
          }
      }
  }

  // 화살표를 아이콘(왼쪽)에 맞추고 말풍선은 우측으로 펼침 — 스크롤 영역 좌·상단 클리핑 완화
  &--start {
      .tooltip__bubble {
          left: -2rem;
          transform: none;

          &::after {
              left: 2.2rem;
              right: auto;
              transform: none;
          }
      }
  } */
}
.tooltip--float .tooltip__trigger:hover + .tooltip__bubble, .tooltip--float .tooltip__trigger:focus-visible + .tooltip__bubble {
  opacity: 0;
  visibility: hidden;
}
.tooltip--float .tooltip__bubble {
  position: fixed;
  top: -9999px;
  left: -9999px;
  bottom: auto;
  right: auto;
  transform: none;
  z-index: 1100;
  pointer-events: none;
  transition: none;
  animation: none;
}
.tooltip--float .tooltip__bubble.is-floating {
  top: var(--tooltip-top);
  left: var(--tooltip-left);
  transform: translateY(1.2rem);
}
.tooltip--float .tooltip__bubble.is-floating.is-visible {
  visibility: visible;
  animation: tooltip-float-in 0.25s ease forwards;
}
.tooltip--float .tooltip__bubble.is-floating.is-floating--top.is-visible {
  animation-name: tooltip-float-in-below;
}
@media (prefers-reduced-motion: reduce) {
  .tooltip--float .tooltip__bubble.is-floating {
    transform: none;
  }
  .tooltip--float .tooltip__bubble.is-floating.is-visible {
    animation: none;
    opacity: 1;
    transform: none;
  }
}
.tooltip--float .tooltip__bubble.is-floating::after {
  top: auto;
  bottom: -0.6rem;
  left: var(--tooltip-arrow-left, 50%);
  right: auto;
  width: 0.9rem;
  height: 0.9rem;
  background-color: var(--color-white);
  border: 0;
  border-right: 0.1rem solid var(--color-inactive);
  border-bottom: 0.1rem solid var(--color-inactive);
  transform: translateX(-50%) rotate(45deg);
  z-index: 1;
}
.tooltip--float .tooltip__bubble.is-floating.is-floating--top::after {
  top: -0.6rem;
  bottom: auto;
  border-right: 0;
  border-bottom: 0;
  border-left: 0.1rem solid var(--color-inactive);
  border-top: 0.1rem solid var(--color-inactive);
}
.tooltip--float .tooltip__bubble.is-floating.is-floating--right::after {
  top: 50%;
  bottom: auto;
  left: auto;
  right: calc(100% - 0.45rem);
  border-right: 0;
  border-bottom: 0.1rem solid var(--color-inactive);
  border-left: 0.1rem solid var(--color-inactive);
  border-top: 0;
  transform: translateY(-50%) rotate(45deg);
}

@keyframes tooltip-float-in {
  from {
    opacity: 0;
    transform: translateY(1.2rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes tooltip-float-in-below {
  from {
    opacity: 0;
    transform: translateY(-1.2rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/*-------------------------------------------------
  _card.scss — Select card list
  출력: layout.css

  주요 클래스
    .select-card-list, .select-card-list__item
    .select-card-list--tooltip

  용도
    세로 카드형 단일/다중 선택 (자문의견 전환 등).

  사용처
    guide.html, doc-view 사이드 자문의견 선택 UI
-------------------------------------------------*/
.select-card-list {
  display: flex;
  flex-direction: column;
  max-width: 36rem;
}
.select-card-list__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  padding: 1.6rem 1.2rem;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  font-family: var(--font-family);
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  color: var(--color-sub);
  line-height: var(--lh-base);
  text-align: left;
  text-decoration: none;
  box-sizing: border-box;
  cursor: pointer;
  transition: var(--transition);
}
.select-card-list__item:hover:not(.is-active) {
  background-color: var(--color-border-200);
}
.select-card-list__item:hover:not(.is-active) .select-card-list__tooltip, .select-card-list__item:focus-visible:not(.is-active) .select-card-list__tooltip {
  opacity: 1;
  visibility: visible;
}
.select-card-list__item.is-active {
  gap: 1rem;
  border-color: var(--color-text-dark);
  font-weight: var(--fw-semibold);
  color: var(--color-text-dark);
}
.select-card-list__item.is-active .select-card-list__icon {
  display: inline-flex;
  font-weight: normal;
}
.select-card-list__icon {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--icon-size);
  height: var(--icon-size);
  font-size: var(--icon-size);
  line-height: 1;
  color: var(--color-text-dark);
}
.select-card-list__txt {
  flex: 1;
  word-break: break-all;
}
.select-card-list__tooltip {
  position: absolute;
  bottom: calc(100% + 0.8rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 20.9rem;
  height: 4rem;
  padding: 1rem 2.4rem;
  border: 1px solid var(--color-text-dark);
  border-radius: var(--radius-pill);
  background-color: var(--color-text-dark);
  box-shadow: var(--shadow-tooltip);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  color: var(--color-white);
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: var(--transition);
  z-index: 10;
}
.select-card-list__tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 0.65rem solid transparent;
  border-top-color: var(--color-text-dark);
}

/* Modal */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.modal.is-open {
  display: flex;
}
.modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.3);
}
.modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 128rem;
  max-height: calc(100vh - 4rem);
  padding: 5rem 4rem 4rem;
  border-radius: var(--radius-xl);
  background-color: var(--color-white);
  overflow: hidden;
}
.modal__close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-title);
  cursor: pointer;
}
.modal__close [class^=ri-] {
  font-size: 2rem;
  line-height: 1;
}
.modal__close:focus-visible {
  outline: 0.2rem solid var(--color-accent);
  outline-offset: 0.2rem;
  border-radius: var(--radius-xs);
}
.modal__body {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
.modal__body .picker-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.modal__body .picker-list__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  margin-bottom: 0.8rem;
}
.modal__body .picker-list__items {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.modal__body .picker-list__item {
  margin: 0;
}
.modal__title {
  margin: 0;
  font-size: 2rem;
  font-weight: var(--fw-bold);
  color: var(--color-title);
  line-height: var(--lh-tight);
}
.modal__section {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
}
.modal__actions {
  display: flex;
  justify-content: center;
  width: 100%;
}

body.is-modal-open {
  overflow: hidden;
}

.modal--confirm .modal__panel {
  max-width: 64rem;
  padding: 5rem 4rem 4rem;
  border-radius: 2rem;
}
.modal--confirm .modal__body {
  gap: 4rem;
}
.modal--confirm .modal__section {
  gap: 1.6rem;
  text-align: center;
}
.modal--confirm .modal__title--lg {
  font-size: 2.4rem;
}
.modal--confirm .modal__desc {
  margin: 0;
  font-size: 1.8rem;
  font-weight: var(--fw-regular);
  color: var(--color-subtitle);
  line-height: 1.5;
  letter-spacing: -0.036rem;
}
.modal--confirm .modal__actions {
  flex-wrap: wrap;
  gap: 1.2rem;
}

.modal-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2.4rem;
  padding: 1.2rem 2.4rem;
  border-radius: var(--radius-lg);
  background-color: var(--color-cool-bg1);
}
.modal-search__fields {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2.4rem;
}
.modal-search__field {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
}
.modal-search__label {
  flex-shrink: 0;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-subtitle);
  white-space: nowrap;
}
.modal-search__input {
  width: 24rem;
}
.modal-search__actions {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  flex-shrink: 0;
}
.modal-search .input.input--sm {
  width: 24rem;
}

.guide-layer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  display: flex;
  justify-content: flex-end;
  width: auto;
  max-width: 100%;
  height: 100dvh;
  pointer-events: none;
}
.guide-layer[hidden] {
  display: none;
}
.guide-layer.is-open {
  pointer-events: none;
}
.guide-layer.is-open .guide-layer__panel {
  pointer-events: auto;
  transform: translateX(0);
}
.guide-layer__panel {
  display: flex;
  flex-direction: column;
  width: min(52rem, 100vw - 2rem);
  height: 100%;
  border-left: 1px solid var(--color-border-300);
  background-color: var(--color-cool-bg1);
  box-shadow: -0.4rem 0 2.4rem rgba(0, 0, 0, 0.08);
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: auto;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .guide-layer__panel {
    transition: none;
  }
}
.guide-layer__head {
  flex-shrink: 0;
  border-radius: 0;
}
.guide-layer__head.info-box {
  align-items: center;
  padding: 1.6rem 2rem;
}
.guide-layer__head .info-box__title {
  flex: 1;
  min-width: 0;
  white-space: normal;
}
.guide-layer__close {
  flex-shrink: 0;
  margin: -1rem -1rem -1rem auto;
  min-width: 4.4rem;
  min-height: 4.4rem;
  padding: 1rem;
  color: var(--color-title);
}
.guide-layer__close [class^=ri-] {
  font-size: 2.4rem;
  line-height: 1;
}
.guide-layer__body {
  flex: 1;
  min-height: 0;
  padding: 0 2rem 2.4rem;
  overflow-x: hidden;
  overflow-y: auto;
}
.guide-layer__body .info-box__txt,
.guide-layer__body .product-code-guide {
  max-width: 100%;
  margin: 0;
  padding-left: 3.2rem;
  font-size: 1.6rem;
  line-height: 1.6;
  color: var(--color-body);
}

html:has(.layout-wrap) {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font-family);
  color: var(--color-title);
  background-color: var(--layout-sidebar-bg);
  overflow-x: hidden;
}
body:has(.layout-wrap) {
  height: 100%;
  overflow: hidden;
}

.layout-wrap {
  display: flex;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background-color: var(--layout-sidebar-bg);
}

.layout-left {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: var(--layout-sidebar-bg);
  transition: width 0.3s ease;
}
.layout-left.is-sidebar-init {
  transition: none;
}
.layout-left:not(.is-expanded) {
  z-index: 10;
  overflow: visible;
}
@media (min-width: 1681px) {
  .layout-left {
    width: var(--layout-sidebar-w);
  }
  html:not(.is-sidebar-expanded) .layout-left:not(.is-expanded) {
    width: var(--layout-sidebar-w-collapsed);
  }
  html:not(.is-sidebar-expanded) .layout-left:not(.is-expanded) .layout-left__brand {
    height: 8rem;
    padding: 0;
    gap: 0;
  }
  html:not(.is-sidebar-expanded) .layout-left:not(.is-expanded) .layout-left__logo--expanded {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  html:not(.is-sidebar-expanded) .layout-left:not(.is-expanded) .layout-left__logo--collapsed {
    display: block;
    width: 3.516rem;
  }
  html:not(.is-sidebar-expanded) .layout-left:not(.is-expanded) .layout-left__role,
  html:not(.is-sidebar-expanded) .layout-left:not(.is-expanded) .layout-left__portal,
  html:not(.is-sidebar-expanded) .layout-left:not(.is-expanded) .layout-left__badge {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  html:not(.is-sidebar-expanded) .layout-left:not(.is-expanded) .layout-left__nav,
  html:not(.is-sidebar-expanded) .layout-left:not(.is-expanded) .layout-left__sub-nav {
    width: 100%;
    padding: 1.2rem;
    overflow: visible;
  }
  html:not(.is-sidebar-expanded) .layout-left:not(.is-expanded) .layout-left__link {
    position: relative;
    justify-content: center;
    gap: 0;
    padding: 1.6rem;
    border-radius: 50%;
    overflow: visible;
  }
  html:not(.is-sidebar-expanded) .layout-left:not(.is-expanded) .layout-left__link .layout-left__label {
    position: absolute;
    left: calc(100% + 0.8rem);
    top: 50%;
    z-index: 20;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0.8rem 1.2rem;
    overflow: visible;
    clip: auto;
    border: 0;
    border-radius: var(--radius-md);
    background-color: var(--layout-sidebar-active);
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    line-height: 1;
    color: var(--color-white);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-50%);
    box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.16);
  }
  html:not(.is-sidebar-expanded) .layout-left:not(.is-expanded) .layout-left__link:hover .layout-left__label, html:not(.is-sidebar-expanded) .layout-left:not(.is-expanded) .layout-left__link:focus-visible .layout-left__label {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }
  html:not(.is-sidebar-expanded) .layout-left:not(.is-expanded) .layout-left__link.is-active .layout-left__label {
    font-weight: var(--fw-semibold);
  }
  html:not(.is-sidebar-expanded) .layout-left:not(.is-expanded) .layout-left__link--alarm::after {
    content: "";
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background-color: var(--layout-alarm);
  }
  html:not(.is-sidebar-expanded) .layout-left:not(.is-expanded) .layout-left__divider {
    width: 5.6rem;
    margin: 0 auto;
  }
}
@media (max-width: 1680px) {
  .layout-left {
    width: var(--layout-sidebar-w-collapsed);
  }
  html:not(.is-sidebar-expanded) .layout-left:not(.is-expanded) .layout-left__brand {
    height: 8rem;
    padding: 0;
    gap: 0;
  }
  html:not(.is-sidebar-expanded) .layout-left:not(.is-expanded) .layout-left__logo--expanded {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  html:not(.is-sidebar-expanded) .layout-left:not(.is-expanded) .layout-left__logo--collapsed {
    display: block;
    width: 3.516rem;
  }
  html:not(.is-sidebar-expanded) .layout-left:not(.is-expanded) .layout-left__role,
  html:not(.is-sidebar-expanded) .layout-left:not(.is-expanded) .layout-left__portal,
  html:not(.is-sidebar-expanded) .layout-left:not(.is-expanded) .layout-left__badge {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  html:not(.is-sidebar-expanded) .layout-left:not(.is-expanded) .layout-left__nav,
  html:not(.is-sidebar-expanded) .layout-left:not(.is-expanded) .layout-left__sub-nav {
    width: 100%;
    padding: 1.2rem;
    overflow: visible;
  }
  html:not(.is-sidebar-expanded) .layout-left:not(.is-expanded) .layout-left__link {
    position: relative;
    justify-content: center;
    gap: 0;
    padding: 1.6rem;
    border-radius: 50%;
    overflow: visible;
  }
  html:not(.is-sidebar-expanded) .layout-left:not(.is-expanded) .layout-left__link .layout-left__label {
    position: absolute;
    left: calc(100% + 0.8rem);
    top: 50%;
    z-index: 20;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0.8rem 1.2rem;
    overflow: visible;
    clip: auto;
    border: 0;
    border-radius: var(--radius-md);
    background-color: var(--layout-sidebar-active);
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    line-height: 1;
    color: var(--color-white);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-50%);
    box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.16);
  }
  html:not(.is-sidebar-expanded) .layout-left:not(.is-expanded) .layout-left__link:hover .layout-left__label, html:not(.is-sidebar-expanded) .layout-left:not(.is-expanded) .layout-left__link:focus-visible .layout-left__label {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }
  html:not(.is-sidebar-expanded) .layout-left:not(.is-expanded) .layout-left__link.is-active .layout-left__label {
    font-weight: var(--fw-semibold);
  }
  html:not(.is-sidebar-expanded) .layout-left:not(.is-expanded) .layout-left__link--alarm::after {
    content: "";
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background-color: var(--layout-alarm);
  }
  html:not(.is-sidebar-expanded) .layout-left:not(.is-expanded) .layout-left__divider {
    width: 5.6rem;
    margin: 0 auto;
  }
  html.is-sidebar-expanded .layout-left, .layout-left.is-expanded {
    width: var(--layout-sidebar-w);
  }
}

.skip-nav a {
  position: fixed;
  top: -100%;
  left: 1rem;
  z-index: 9999;
  padding: 1rem 1.6rem;
  border-radius: var(--radius-sm);
  background-color: var(--color-primary);
  color: var(--color-white);
  text-decoration: none;
}
.skip-nav a:focus {
  top: 1rem;
}

.layout-left__brand {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 20rem;
  padding: 0;
  color: var(--color-white);
  text-decoration: none;
}
.layout-left__brand:focus-visible {
  outline: 0.2rem solid var(--color-accent);
  outline-offset: -0.2rem;
}

.layout-left__logo {
  display: block;
  flex-shrink: 0;
  height: auto;
}
.layout-left__logo--expanded {
  width: 13rem;
}
.layout-left__logo--collapsed {
  display: none;
  width: 3.516rem;
}

.layout-left__role {
  padding: 0 1.2rem;
  font-size: var(--fs-xs);
  color: var(--layout-sidebar-text-muted);
}

.layout-left__nav {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
  padding: 1.2rem;
}

.gnb-menu {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
}
.gnb-menu .gnb-toggle-wrap {
  display: none;
}
.gnb-menu .gnb-main-trigger#MENU002010000000000::before {
  content: "";
  flex-shrink: 0;
  width: var(--icon-size);
  height: var(--icon-size);
  background: url("/resources/images/mps/layout/icon-user-circle.svg") no-repeat center/contain;
}
.gnb-menu .gnb-main-trigger#MENU002030000000000::before {
  content: "";
  flex-shrink: 0;
  width: var(--icon-size);
  height: var(--icon-size);
  background: url("/resources/images/mps/layout/icon-home.svg") no-repeat center/contain;
}
.gnb-menu .gnb-main-trigger#MENU002040000000000::before {
  content: "";
  flex-shrink: 0;
  width: var(--icon-size);
  height: var(--icon-size);
  background: url("/resources/images/mps/layout/icon-file-check.svg") no-repeat center/contain;
}
.gnb-menu .gnb-main-trigger#MENU002050000000000::before {
  content: "";
  flex-shrink: 0;
  width: var(--icon-size);
  height: var(--icon-size);
  background: url("/resources/images/mps/layout/icon-user-plus.svg") no-repeat center/contain;
}
.gnb-menu .gnb-main-trigger#MENU002060000000000::before {
  content: "";
  flex-shrink: 0;
  width: var(--icon-size);
  height: var(--icon-size);
  background: url("/resources/images/mps/layout/icon-user-circle.svg") no-repeat center/contain;
}
.gnb-menu .gnb-main-trigger#MENU002070000000000::before {
  content: "";
  flex-shrink: 0;
  width: var(--icon-size);
  height: var(--icon-size);
  background: url("/resources/images/mps/layout/icon-sitemap.svg") no-repeat center/contain;
}
.gnb-menu .gnb-main-trigger#MENU002080000000000::before {
  content: "";
  flex-shrink: 0;
  width: var(--icon-size);
  height: var(--icon-size);
  background: url("/resources/images/mps/layout/icon-briefcase.svg") no-repeat center/contain;
}
.gnb-menu .gnb-main-trigger#MENU002090000000000::before {
  content: "";
  flex-shrink: 0;
  width: var(--icon-size);
  height: var(--icon-size);
  background: url("/resources/images/mps/layout/icon-file-check.svg") no-repeat center/contain;
}
.gnb-menu .gnb-main-trigger#MENU002100000000000::before {
  content: "";
  flex-shrink: 0;
  width: var(--icon-size);
  height: var(--icon-size);
  background: url("/resources/images/mps/layout/icon-user-plus.svg") no-repeat center/contain;
}
.gnb-menu .gnb-main-trigger#MENU002110000000000::before {
  content: "";
  flex-shrink: 0;
  width: var(--icon-size);
  height: var(--icon-size);
  background: url("/resources/images/mps/layout/icon-file-check.svg") no-repeat center/contain;
}
.gnb-menu .gnb-main-trigger#MENU002120000000000::before {
  content: "";
  flex-shrink: 0;
  width: var(--icon-size);
  height: var(--icon-size);
  background: url("/resources/images/mps/layout/icon-user-plus.svg") no-repeat center/contain;
}
.gnb-menu .gnb-main-trigger#MENU002130000000000::before {
  content: "";
  flex-shrink: 0;
  width: var(--icon-size);
  height: var(--icon-size);
  background: url("/resources/images/mps/layout/icon-list-search.svg") no-repeat center/contain;
}
.gnb-menu .gnb-main-trigger#MENU002140000000000::before {
  content: "";
  flex-shrink: 0;
  width: var(--icon-size);
  height: var(--icon-size);
  background: url("/resources/images/mps/layout/icon-stage.svg") no-repeat center/contain;
}

.layout-left__icon {
  flex-shrink: 0;
  display: block;
  width: var(--icon-size);
  height: var(--icon-size);
}

.layout-left__link {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  width: 100%;
  min-height: 5.6rem;
  padding: 1.6rem 2rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: 1;
  color: var(--color-white);
  text-decoration: none;
  transition: var(--transition);
}
.layout-left__link:hover, .layout-left__link:focus-visible {
  background-color: rgba(255, 255, 255, 0.08);
}
.layout-left__link.is-active {
  background-color: var(--layout-sidebar-active);
  font-weight: var(--fw-semibold);
}
.layout-left__link--alarm {
  position: relative;
}

.layout-left__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.8rem;
  height: 1.8rem;
  padding: 0 0.4rem;
  border-radius: var(--radius-pill);
  background-color: var(--layout-alarm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-white);
}

.layout-left__divider {
  width: calc(100% - 2.4rem);
  height: 0.1rem;
  margin: 0 1.2rem;
  border: 0;
  background-color: var(--layout-sidebar-divider);
}

.layout-left__sub-nav {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
  padding: 1.2rem;
}

.layout-left__portal {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-top: auto;
  padding: 2.4rem;
  border-top: 0.1rem solid var(--layout-sidebar-divider);
}

.layout-left__portal-link {
  font-size: var(--fs-xs);
  line-height: 2.4rem;
  color: var(--color-white);
  text-decoration: none;
}
.layout-left__portal-link--current {
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-underline-offset: 0.2rem;
}
.layout-left__portal-link:hover, .layout-left__portal-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2rem;
}

.layout-work {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  border-radius: 3rem 0 0 3rem;
  background-color: var(--layout-work-bg);
  overflow-x: auto;
  overflow-y: auto;
}

.layout-topbar {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 100%;
  min-width: var(--layout-work-min-w);
  height: var(--layout-topbar-h);
  padding: 0 4rem;
  border-bottom: 0.1rem solid var(--color-border-300);
}

.layout-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.layout-topbar__left {
  display: flex;
  align-items: center;
  gap: 2.4rem;
}

.layout-topbar__menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--icon-size);
  height: var(--icon-size);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.layout-topbar__menu-btn:focus-visible {
  outline: 0.2rem solid var(--color-accent);
  outline-offset: 0.2rem;
  border-radius: var(--radius-xs);
}

.layout-topbar__menu-icon {
  display: block;
  width: var(--icon-size);
  height: var(--icon-size);
}

.layout-topbar__user {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  font-size: var(--fs-base);
  color: var(--color-title);
}

.layout-topbar__user-name {
  font-weight: var(--fw-bold);
}

.layout-topbar__divider {
  width: 0.1rem;
  height: 1.4rem;
  background-color: var(--color-border-600);
}

.layout-topbar__right {
  display: flex;
  align-items: center;
  gap: 2.4rem;
}

.layout-topbar__stage-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 3.6rem;
  padding: 0 1.2rem;
  border: 0.1rem solid var(--color-sub);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-title);
  cursor: pointer;
  transition: var(--transition);
}
.layout-topbar__stage-btn [class^=ri-] {
  font-size: var(--btn-icon-size);
}
.layout-topbar__stage-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.layout-topbar__stage-btn:focus-visible {
  outline: 0.2rem solid var(--color-accent);
  outline-offset: 0.2rem;
}

.layout-topbar__session {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--color-title);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
.layout-topbar__session [class^=ri-] {
  font-size: var(--btn-icon-size);
  color: var(--color-sub);
}

.layout-topbar__session-text {
  min-width: 11rem;
}

.layout-topbar__session-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3.6rem;
  padding: 0 1.2rem;
  border: 0;
  border-radius: var(--radius-md);
  background-color: var(--color-title);
  color: var(--color-white);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: var(--transition);
}
.layout-topbar__session-btn:hover {
  opacity: 0.8;
}
.layout-topbar__session-btn:focus-visible {
  outline: 0.2rem solid var(--color-accent);
  outline-offset: 0.2rem;
}

.layout-topbar__icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-size);
  height: var(--icon-size);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.layout-topbar__icon-btn:focus-visible {
  outline: 0.2rem solid var(--color-accent);
  outline-offset: 0.2rem;
  border-radius: var(--radius-xs);
}

.layout-topbar__icon {
  display: block;
  width: var(--icon-size);
  height: var(--icon-size);
  filter: brightness(0);
}

.layout-topbar__dot {
  position: absolute;
  top: 0;
  right: 0;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background-color: var(--layout-alarm);
}

.layout-contents {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4rem;
  min-width: var(--layout-work-min-w);
  padding: 4rem 4rem;
}
@media (max-width: 1680px) {
  .layout-contents {
    padding-inline: 2rem;
  }
}

/* footer가 main 밖(layout-work 직계)일 때 — 기존 main 내부 배치와 동일 여백 */
.layout-work > .layout-contents:has(+ .layout-foot) {
  padding-bottom: 0;
}

.layout-foot {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 100%;
}

.layout-work > .layout-foot {
  min-width: var(--layout-work-min-w);
  margin-top: 4rem;
  padding: 0 4rem 4rem;
}
@media (max-width: 1680px) {
  .layout-work > .layout-foot {
    padding-inline: 2rem;
  }
}

.layout-foot__txt {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1;
  color: var(--color-inactive);
}

@media (prefers-reduced-motion: reduce) {
  .layout-left {
    transition: none;
  }
  .layout-left__link .layout-left__label {
    transition: none;
  }
}
/* Login layout */
.login-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem;
  background: url("/resources/images/mps/login/bg.jpg") no-repeat center center/cover;
}/*# sourceMappingURL=layout.css.map */