@charset "UTF-8";
/* ============================================================================
    style.css  —  AXworks 통합 오버라이드 / 신규 스타일 시트 (style.scss 컴파일 결과)
    생성일: 2026-08-03

    ▸ 원칙: 기존 variables.css / custom.css 는 절대 수정하지 않는다.
           모든 신규 규칙과 오버라이드는 이 파일에만 작성한다.
    ▸ 로드 순서: bootstrap.min.css → custom.css → style.css (가장 마지막)
    ▸ 작성 우선순위
         1순위: Bootstrap 5 클래스 사용
         2순위: variables.css / custom.css 에 정의된 클래스 재사용
         3순위: 위로 해결 불가할 때만 아래 "[추가20260803]" 하단에 신규 작성
   ============================================================================ */
/**추가20260803**/
/* ── 여기서부터 신규 작성 영역 ─────────────────────────────────────────── */
/* 디자인시스템 문서 페이지 전용 헬퍼 (design-system.html 에서만 사용, ds- 프리픽스) */
.ds-body {
  background-color: #f8fafc;
}

.ds-nav {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  border-right: 1px solid #e2e8f0;
  background-color: #fff;
}

.ds-nav a {
  display: block;
  padding: 6px 12px;
  border-radius: 6px;
  color: #526277;
  text-decoration: none;
  font-size: 0.9rem;
}

.ds-nav a:hover {
  background-color: #f1f5f9;
  color: #0f172a;
}

.ds-nav a.active {
  background-color: #6650EA;
  color: #fff;
}

.ds-nav .ds-nav-group {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #94a3b8;
  text-transform: uppercase;
  padding: 14px 12px 4px;
}

.ds-section {
  scroll-margin-top: 24px;
}

.ds-card {
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0px 3px 7px -5px #94a3b8;
}

.ds-preview {
  padding: 24px;
  border-bottom: 1px solid #f1f5f9;
}

.ds-preview.dark {
  background-color: #0f172a;
  border-radius: 8px 8px 0 0;
}

.ds-code {
  margin: 0;
  padding: 14px 18px;
  background-color: #02030a;
  color: #e2e8f0;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.8rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-all;
  border-radius: 0 0 8px 8px;
}

.ds-swatch {
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.ds-swatch .chip {
  height: 72px;
}

.ds-swatch .meta {
  padding: 8px 10px;
  background-color: #fff;
  border-top: 1px solid #f1f5f9;
}

.ds-swatch .name {
  font-weight: 700;
  font-size: 0.8rem;
  color: #29374d;
}

.ds-swatch .hex {
  font-size: 0.72rem;
  color: #6f8199;
  font-family: Consolas, monospace;
}

.ds-token {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background-color: #f1f5f9;
  color: #334155;
  font-family: Consolas, monospace;
  font-size: 0.78rem;
}

.ds-guide {
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  padding: 16px 18px;
  height: 100%;
}

.ds-guide .ds-guide-head {
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ds-guide.do {
  border-top: 3px solid #198754;
}

.ds-guide.dont {
  border-top: 3px solid #dc3545;
}

.ds-guide.do .ds-guide-head {
  color: #198754;
}

.ds-guide.dont .ds-guide-head {
  color: #dc3545;
}

.ds-type-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px dashed #e2e8f0;
}

.ds-lnb-demo {
  width: 100px;
  background-color: #0f172a;
  border-radius: 8px;
  min-height: 320px;
}

/* ------------------------------------------------------------------ *
 *  서비스 관리 > 맞춤형 서비스 (기획안 #008)  20260803
 * ------------------------------------------------------------------ */
/* 기본/맞춤형 서비스 탭 (디자인시스템 underline 탭) — 개수 뱃지 */
.nav-underline {
  gap: 0;
}

/* 기본↔맞춤형 탭 밑줄을 끊김 없이 연속되게 — li(nav-item) 사이 3.5px 여백만 제거.
   nav-link 좌우 패딩(1.25rem)은 유지 → 탭 텍스트 간격은 그대로, 밑줄(border-bottom)만 이어짐 */
.seg-tabs .nav-item {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.nav-underline .nav-link .cnt {
  margin-left: 6px;
  background: #334155;
  color: #fff;
  font-weight: 700;
}

.nav-underline .nav-link.active .cnt {
  background: #0f172a;
  color: #fff;
}

/* 상태 뱃지 (활성/비활성) */
.badge.bg-soft-green {
  background: #dcfce7;
  color: #15803d;
}

.badge.bg-soft-gray {
  background: #f1f5f9;
  color: #94a3b8;
}

/* 서비스 아이콘 박스 (생성/상세 헤더) */
.svc-icon-box {
  height: 38px;
  padding: 0 12px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  color: #475569;
}

.svc-icon-box:hover {
  border-color: #94a3b8;
}

.svc-icon-box.sm {
  padding: 0 10px;
  font-size: 1.15rem;
}

/* 아이콘(이모지) 선택 드롭다운 (2-1) — 서비스명 입력창 좌측 아이콘 클릭 시 그리드. radius는 form-control(4px)과 동일 */
.emoji-menu.dropdown-menu {
  min-width: 0;
  padding: 6px;
  border-radius: 4px;
}

.emoji-menu.show {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: 244px;
}

.emoji-menu button {
  border: 0;
  background: transparent;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  font-size: 1.15rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.emoji-menu button:hover {
  background: #f1f5f9;
}

.emoji-menu button.active {
  background: rgba(102, 80, 234, 0.12);
}

/* 서비스 담당자 칩 */
.assignee-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 6px 10px;
  background: #fff;
}

.assignee-chip .email {
  color: #94a3b8;
  font-size: 0.85rem;
}

.assignee-chip .rm {
  cursor: pointer;
  color: #cbd5e1;
  display: inline-flex;
  line-height: 1;
}

.assignee-chip .rm:hover {
  color: #526277;
}

/* 추천 질문 행 (번호 + 입력 + 삭제) */
.q-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.q-row .num {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 6px;
  background: #f1f5f9;
  color: #526277;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8rem;
}

.q-row .rm {
  cursor: pointer;
  color: #cbd5e1;
  display: inline-flex;
  flex-shrink: 0;
}

.q-row .rm:hover {
  color: #dc3545;
}

/* 맞춤형 서비스 리스트 아이템(.service .box 재사용) 내부 정렬 */
.service .box .svc-name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.service .box .svc-name .txt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 기본 서비스 활성/비활성 상태 dot (수정본 방식 — h6 내 .ms-auto 우측 정렬, .using 재사용) */
.svc-status {
  cursor: pointer;
}

/* 보관기간 i 툴팁 — 긴 문구 줄바꿈 (custom.css .tooltip 오버라이드, style.css 로드 페이지 한정) */
.tooltip {
  max-width: 280px;
  white-space: normal;
  line-height: 1.45;
}

/* slim scroll: 얇은 thumb + 여백 (floating 스타일, 라운드 유지)
   좌측만 border 주면 radius 깨져서, 4면 균등 투명 border + background-clip 로 처리 */
*::-webkit-scrollbar {
  width: 11px;
}

*::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  background-clip: padding-box;
}

/* 멀티 셀렉트 (AXF 디자인시스템 이식) — 서비스 담당자 다중 선택 20260804 */
.ms-wrap {
  position: relative;
  min-width: 0;
}

/* 멀티셀렉트를 담은 flex 항목이 내용(배지) 폭만큼 늘어나 레이아웃이 밀리는 것 방지 → 박스 내부에서 가로 스크롤 */
.ms-field {
  min-width: 0;
}

.multiselect-box {
  min-height: 38px;
  width: 100%;
  max-width: 100%;
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  flex-wrap: wrap;
  padding: 4px;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  background: #fff;
  cursor: text;
}

.multiselect-box .multi-search {
  flex: 1 1 60px;
  min-width: 60px;
  padding-left: 8px;
  background: transparent;
  border: 0;
  box-shadow: none;
  outline: 0;
}

.multiselect-box .multi-search::placeholder {
  color: #a3a3a3;
}

/* 배지: 줄임(...) 없이, 넘치면 아래 줄로 내려감(wrap) — 배지 자체는 한 줄 유지 */
.selected-badge {
  padding: 3px 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  white-space: nowrap;
  border: 1px solid #d4d4d4;
  background-color: #fafafa;
  border-radius: 4px;
  font-size: 0.85rem;
}

.selected-badge button {
  border: 0;
  background: transparent;
  padding: 0;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: #737373;
  line-height: 1;
  flex-shrink: 0;
}

.selected-badge button:hover {
  color: #171717;
}

.multiselect-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  width: 100%;
  max-height: 240px;
  overflow-y: auto;
  z-index: 999;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #e5e5e5;
  padding: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 모달 등 하단 공간이 부족한 곳: 위로 펼침 */
.ms-dropup .multiselect-dropdown {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 4px;
}

.multiselect-dropdown .option-item {
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
  padding: 6px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.multiselect-dropdown .option-item:hover {
  background-color: #fafafa;
}

/* 담당자 옵션(한 줄): 본부 | 팀 | 이름 직위 (이메일) */
.option-item .opt-org {
  color: #94a3b8;
}

.option-item .opt-name {
  font-weight: 600;
  color: #1e293b;
}

.option-item .opt-pos {
  color: #64748b;
}

.option-item .opt-email {
  color: #94a3b8;
}

/* 라디오 focus 시 원형이 인디고(블루)로 채워지는 문제 수정 (custom.css inset shadow 오버라이드, 미선택 상태) */
.form-check-input[type=radio]:focus:not(:checked) {
  box-shadow: none !important;
  border-color: #cbd5e1 !important;
}

/* form-switch focus 효과 제거 → 파란 원/포커스 링 없이 비-focus와 동일 (Bootstrap 오버라이드) */
.form-switch .form-check-input:focus {
  box-shadow: none !important;
}

/* 체크박스 중간 상태(:indeterminate) — custom.css 는 :checked 만 인디고로 맞춰 둬서
   중간 상태가 부트스트랩 기본 파랑으로 남는다. 전체선택 체크박스(공유 조직도·학습 관리 표)에 공통 적용. */
.form-check-input[type=checkbox]:indeterminate {
  background-color: #6650EA;
  border-color: #6650EA;
}

.form-switch .form-check-input:checked:focus {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:focus:not(:checked) {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
}

/* 우측 서비스 설정 패널 — 모든 패널을 동일한 브라우저 높이로 (사내 규정 패널 기준) */
#nav-tabContent {
  height: calc(100vh - 100px);
  overflow-y: auto;
  min-width: 0;
}

/* lnb 옆 메인 컨텐츠 래퍼(.flex-grow-1)가 내부 넓은 콘텐츠(멀티셀렉트 등) 때문에 뷰포트 밖으로 커지는 것 방지 → 가로 스크롤이 박스 내부에서 동작 */
.admin-page .flex-grow-1[style*=margin-left] {
  min-width: 0;
}

/* 기본 서비스 설정 패널(.svc-settings): textarea 가 tab-content 남은 높이를 100% 차지, 저장은 하단 (.my-3 래퍼 유지) */
#nav-tabContent > .svc-settings.active {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

#nav-tabContent > .svc-settings.active > form {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#nav-tabContent > .svc-settings.active > form > .my-3 {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#nav-tabContent > .svc-settings.active > form > .my-3 > textarea {
  flex: 1;
  min-height: 120px;
  height: auto;
}

/* 문서 초안 작성(템플릿 관리) 패널: 세로로 채워 저장 버튼 하단 고정 */
#nav-tabContent > .svc-tpl.active {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* 맞춤형 서비스 상세 패널: 세로로 채워 삭제/저장 버튼 하단 고정 (기본 서비스와 동일 정리) */
#nav-tabContent > .svc-detail.active {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* 삭제/저장 액션 바: 패널 스크롤 시에도 하단에 sticky 고정 */
.svc-detail .svc-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: #fff;
}

/* 템플릿 업로드 드롭존 */
.tpl-dropzone {
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  padding: 18px;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}

.tpl-dropzone:hover {
  background-color: #f8fafc;
  border-color: #94a3b8;
}

.tpl-dropzone.dragover {
  background-color: rgba(102, 80, 234, 0.06);
  border-color: #6650EA;
}

/* 템플릿 테이블: 새로 추가된 row 하이라이트(유지, 연한 인디고) */
.tpl-row-new > td {
  background-color: rgba(102, 80, 234, 0.07);
}

/* 파일명(inline-block + text-truncate)은 baseline이 하단이라 세로 중앙 어긋남 → middle 정렬 */
.tpl-name {
  vertical-align: middle;
}

/* 좌측 서비스 목록 카드 — 우측 패널과 동일한 높이, 목록이 남은 공간 채우고 스크롤 */
#nav-tab {
  height: calc(100vh - 100px);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

#nav-tab > .seg-pane {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#nav-tab > .seg-pane > .overflow-auto {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

/* ── 사용자 페이지 추가 20260805 ─────────────────────────────────────────────
   user_service.html 서비스 카탈로그 / 조회·편집 모달 전용.
   UI/UX는 기존 페이지 컴포넌트 재사용이 원칙 — 필터 탭은 .nav-underline+.cnt(디자인시스템),
   카드는 .service .box(기존 user_service), 검색은 .form-control.search(admin) 그대로 사용.
   아래는 대응 컴포넌트가 없어 부득이 신규로 둔 최소 항목만. 모두 스코프 격리. */
/* 서비스 카탈로그 폭 제한 */
.user-page .u-catalog {
  max-width: 1080px;
  width: 100%;
}

/* 필터 탭 간 간격 제거 — custom.css .nav-item{padding:0 .25rem} 가 만드는 좌우 0.25rem 제거.
   (원본 custom.css 는 건드리지 않고 여기서 오버라이드, .user-page .u-filter 로만 스코프) */
.user-page .u-filter .nav-item {
  padding-left: 0;
  padding-right: 0;
}

/* 필터 탭: 줄바꿈 없이 한 줄 유지 + 좁으면 좌우 스크롤(스크롤바 숨김) */
.user-page .u-filter {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.user-page .u-filter::-webkit-scrollbar {
  display: none;
}

.user-page .u-filter .nav-item {
  flex-shrink: 0;
}

.user-page .u-filter .nav-link {
  white-space: nowrap;
}

/* 상단 '새 대화 생성' 버튼: AXworks 로고 라인에 세로 중앙 정렬(로고 렌더 높이 45px 기준) */
.user-page .top-btn-group {
  align-items: center;
  min-height: 45px;
}

/* 검색창: 데스크톱 고정폭(우측), 모바일(≤768) 줄바꿈되어 전체폭 — 반응형 */
.user-page .u-search-input {
  width: 280px;
  max-width: 100%;
}

@media (max-width: 768px) {
  .user-page .u-search-input {
    width: 100%;
  }
}
/* 즐겨찾기 별: 아웃라인(star_border) 회색 → 클릭 시 채운 별(star) 노란색.
   로컬 심볼폰트가 정적(FILL축 없음)이라 별은 Material Icons 글리프로 교체(JS)해서 채움 표현 */
.user-page .u-fav {
  color: #cbd5e1;
}

.user-page .u-fav:hover {
  color: #f59e0b;
}

.user-page .u-fav.active {
  color: #f59e0b;
}

/* 서비스 카드 액션 버튼(실행/즐겨찾기/더보기) 아이콘 120% 확대 — 심볼·아이콘 폰트 모두 */
.user-page .u-svc-col .btn .material-symbols-outlined,
.user-page .u-svc-col .btn .material-icons {
  font-size: 1.2em;
}

/* 별(Material Icons)을 형제 심볼 아이콘과 세로 정렬 통일 */
.user-page .u-svc-col .btn .material-icons {
  line-height: 1;
  vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════════════════
   문서 초안 작성 (doc-draft) — user_doc-draft.html / user_doc-draft-new.html
   · 인라인 <style>에서 이관 (20260806). 전부 dd- 프리픽스 → 기존 CSS와 충돌 없음
   · .dd-fname/.dd-fmeta 는 원래 .fname/.fmeta 였으나 타 페이지 충돌 회피 위해 프리픽스화
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --dd-primary: #6650EA;
  --dd-line: #e2e8f0;
  --dd-soft: #f5f3ff;
}

/* 이 페이지는 60rem 고정 해제하고 풀페이지(전체 너비) 사용 (전역 .chat-area .scroll > div 규칙 오버라이드) */
.chat-area .scroll > div.dd-full {
  max-width: none;
}

.dd-crumb {
  font-size: 14px;
  color: #94a3b8;
  text-align: right;
}

.dd-crumb a {
  color: var(--dd-primary) !important;
  text-decoration: none;
}

.dd-crumb .sep {
  margin: 0 6px;
}

.dd-crumb .cur {
  color: #475569;
  font-weight: 600;
}

.dd-badge-type {
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
  background: #f1f5f9;
  border-radius: 8px;
  padding: 3px 10px;
  vertical-align: middle;
}

/* 화면 좌/우 분할 레이아웃 (좌: 설정·컨트롤 / divider / 우: 미리보기·출력) — divider 드래그로 좌측 폭 가변 */
.dd-split {
  display: grid;
  grid-template-columns: var(--dd-leftw, 420px) 20px 1fr;
  gap: 0;
  align-items: start;
}

@media (max-width: 992px) {
  .dd-split {
    grid-template-columns: 1fr;
  }
}
/* 데스크톱: 분할 영역을 화면(뷰포트) 높이에 고정하고 좌측 설정만 내부 스크롤.
   → divider는 스크롤과 무관하게 화면 중앙에 고정, 우측 뷰어는 높이 100vh */
@media (min-width: 992px) {
  .dd-full {
    height: 100%;
  }
  .dd-split {
    height: 100%;
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
  }
  /* 좌측: 헤더(타이틀·스텝퍼)는 고정, 각 스텝 본문은 [스크롤 영역 .dd-scroll + 하단 고정 액션 .dd-foot] 통일 구조 (step1~4 공통) */
  .dd-left {
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .dd-left > *:not(.dd-lbody) {
    flex-shrink: 0;
  }
  .dd-left > .dd-lbody {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  /* padding-right = 슬림 스크롤바 폭(6px) + 콘텐츠~스크롤바 간격(5px) */
  .dd-lbody > .dd-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 11px;
  }
  .dd-lbody > .dd-foot {
    flex-shrink: 0;
    margin-top: 12px;
  }
  /* 우측 뷰어: gray 캔버스(여백)에 콘텐츠가 뷰포트 높이를 채움 */
  .dd-right {
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .dd-rbody {
    flex: 1;
    min-height: 0;
    padding: 12px 24px;
  }
  .dd-rbody > .dd-panel,
  .dd-rbody > .dd-result-doc {
    height: 100%;
    overflow-y: auto;
  }
  /* step1 미리보기 · step3 생성: 캔버스 중앙 정렬 */
  .dd-rbody[data-step="1"], .dd-rbody[data-step="3"] {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* 미리보기: 캔버스 높이에 맞춘 A4(210:297) 비율 시트 */
  .dd-rbody[data-step="1"] > .dd-preview {
    height: 100%;
    width: auto;
    max-width: 100%;
    margin: 0;
  }
  /* step2 편집보기: 토글은 위 고정, 시트가 rbody 전체 너비 + 캔버스 높이 채움 */
  .dd-rbody[data-step="2"] {
    display: flex;
    flex-direction: column;
  }
  .dd-rbody[data-step="2"] > .dd-vtoggle-row {
    flex-shrink: 0;
  }
  .dd-rbody[data-step="2"] > .dd-a4 {
    flex: 1;
    min-height: 0;
    width: 100%;
    max-width: none;
    margin: 0;
  }
  /* 템플릿 보기: 캔버스 높이에 맞춘 A4 비율, 가로 중앙 */
  .dd-rbody[data-step="2"] > .dd-a4.tpl-view {
    width: auto;
    max-width: 100%;
    align-self: center;
  }
  /* step4 결과: 보고서 박스를 캔버스 높이에 맞춘 A4(210:297) 비율 시트로, 가로 중앙 */
  /* 결과 보고서: 가로 100%(세로는 A4 비율로 길어짐) → 우측 패널이 세로 스크롤.
     container-type: inline-size → 내부 텍스트·여백을 폭 기준(cqw)으로 비례 확대 */
  .dd-rbody[data-step="4"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    container-type: inline-size;
    gap: 3cqw;
  }
  .dd-rbody[data-step="4"] > .dd-result-doc {
    width: 100%;
    height: auto;
    aspect-ratio: 210/297;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 6px;
    padding: 8cqw 9cqw;
  }
  .dd-rbody[data-step="4"] > .dd-result-doc p {
    text-align: justify;
  }
  .dd-rbody[data-step="4"] .dd-page-num {
    margin-top: auto;
  }
}
/* 패널 폭 조절 divider — 전체 높이 세로 구분선 + 중앙 그립(스크롤바와 확실히 구분) */
.dd-divider {
  align-self: stretch;
  width: 20px;
  min-height: 200px;
  cursor: col-resize;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 전체 높이 세로 구분선 */
.dd-divider::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  background: #e2e8f0;
  transition: background 0.15s;
}

/* 중앙 그립(잡는 손잡이) — 그림자로 도드라지게 해 스크롤바와 헷갈리지 않게 */
.dd-divider::after {
  content: "";
  position: relative;
  width: 6px;
  height: 40px;
  border-radius: 4px;
  background: #cbd5e1;
  border: 1px solid #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.15);
  transition: background 0.15s, height 0.15s;
}

.dd-divider:hover::before, .dd-divider.dragging::before {
  background: var(--dd-primary);
}

.dd-divider:hover::after, .dd-divider.dragging::after {
  background: var(--dd-primary);
  height: 56px;
}

/* 스텝 인디케이터 (좌측 컬럼 상단) */
.dd-stepper {
  display: flex;
  align-items: flex-start;
  width: 100%;
  padding: 0 8px;
}

.dd-stepper .st {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 0 0 30px;
  min-width: 0;
}

.dd-stepper .st .dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  background: #f1f5f9;
  color: #94a3b8;
  border: 1px solid #e2e8f0;
}

.dd-stepper .st .lbl {
  font-size: 11px;
  color: #94a3b8;
  text-align: center;
  white-space: nowrap;
}

.dd-stepper .st.current .dot {
  background: var(--dd-primary);
  color: #fff;
  border-color: var(--dd-primary);
}

.dd-stepper .st.current .lbl {
  color: var(--dd-primary);
  font-weight: 700;
}

.dd-stepper .st.done .dot {
  background: var(--dd-primary);
  color: #fff;
  border-color: var(--dd-primary);
}

/* 완료 스텝: 숫자 → check 아이콘 + 클릭해 되돌아가기 */
.dd-stepper .st.done {
  cursor: pointer;
}

.dd-stepper .st.done .dot {
  font-size: 0;
}

.dd-stepper .st.done .dot::after {
  content: "check";
  font-family: "Material Icons";
  font-size: 18px;
  line-height: 1;
}

.dd-stepper .st.done:hover .lbl {
  color: var(--dd-primary);
}

/* 현재 스텝: '설정중' 글로우(맥동) */
.dd-stepper .st.current .dot {
  animation: dd-gi-glow 1.3s ease-in-out infinite;
}

.dd-stepper .bar {
  flex: 1 1 0;
  height: 2px;
  background: #e2e8f0;
  margin: 15px 6px 0;
}

.dd-stepper .bar.done {
  background: var(--dd-primary);
}

/* 생성 중(step3) 좌측 안내 박스 */
/* step3 좌측 안내: 박스 없이 그레이 텍스트, 좌측 영역 가로·세로 센터 */
.dd-infobox {
  font-size: 13px;
  color: #64748b;
  line-height: 1.7;
  text-align: center;
}

.dd-lbody[data-step="3"] {
  justify-content: center;
  align-items: center;
}

/* 우측 패널: gray 음영 캔버스 */
.dd-right {
  background: #eef2f6;
}

/* 슬림 스크롤바 — doc-draft 모든 스크롤 영역 통일(좌/우 패널 + 학습데이터 모달). 전역 thumb border 오버라이드 */
.dd-split, .dd-split *, #ddLearnData, #ddLearnData * {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

.dd-split ::-webkit-scrollbar, #ddLearnData ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.dd-split ::-webkit-scrollbar-track, #ddLearnData ::-webkit-scrollbar-track {
  background: transparent;
}

.dd-split ::-webkit-scrollbar-thumb, #ddLearnData ::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border: 0;
  border-radius: 3px;
}

.dd-split ::-webkit-scrollbar-thumb:hover, #ddLearnData ::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.dd-panel {
  border: 1px solid var(--dd-line);
  border-radius: 14px;
  background: #fff;
  padding: 20px;
}

.dd-foot {
  margin-top: 12px;
}

/* 좌측 본문(설정·요약·정보)은 박스 없이 통일 — 우측 에디터 .dd-rbody .dd-panel 은 카드 유지 */
.dd-lbody .dd-panel {
  border: 0;
  background: transparent;
  padding: 0;
  border-radius: 0;
}

.dd-label {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 8px;
  display: block;
}

.dd-hint {
  font-size: 12px;
  color: #94a3b8;
  font-weight: 400;
}

.dd-sect {
  padding: 9px 0;
}

.dd-sect:first-child {
  padding-top: 0;
}

/* 세그먼트 컨트롤 (생성모드/분량/언어/문체) */
.dd-seg {
  display: flex;
  background: #f1f5f9;
  border-radius: 6px;
  padding: 3px;
  gap: 3px;
}

.dd-seg.col2 > button {
  flex: 1;
}

.dd-seg > button {
  flex: 1;
  border: 0;
  background: transparent;
  border-radius: 4px;
  padding: 8px 4px;
  font-size: 13px;
  color: #64748b;
  font-weight: 600;
}

.dd-seg > button.active {
  background: #fff;
  color: var(--dd-primary);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.dd-seg > button:hover {
  color: #0f172a;
}

.dd-styline .dd-seg > button {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dd-styline .dd-seg > button small {
  font-weight: 400;
  color: #94a3b8;
  font-size: 11px;
}

/* 템플릿 파일 행 */
.dd-file {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--dd-line);
  border-radius: 6px;
  padding: 10px 12px;
}

.dd-file .fic {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: #eef2ff;
  color: var(--dd-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* 파일명: 볼드 제거(모든 파일 행 공통) / 용량: 가장 작은 글씨로 약하게 */
.dd-fname {
  font-weight: 400;
  font-size: 13px;
}

.dd-fmeta {
  font-size: 10px;
  color: #94a3b8;
}

.dd-file .fx, .dd-ref-item .fx {
  color: #cbd5e1;
  border: 0;
  background: transparent;
}

.dd-file .fx:hover, .dd-ref-item .fx:hover {
  color: #ef4444;
}

/* 템플릿 선택 모달: 라디오 선택된 옵션 박스 강조 (JS로 .selected 토글) */
#ddTplSelect .dd-file {
  transition: border-color 0.15s, background 0.15s;
}

#ddTplSelect .dd-file.selected {
  border-color: var(--dd-primary);
  background: var(--dd-soft);
}

/* 템플릿 없음(빈 상태) */
.dd-tpl-empty {
  border: 1px dashed var(--dd-line);
  border-radius: 6px;
  padding: 14px;
  text-align: center;
}

.dd-tpl-empty-text {
  font-size: 12.5px;
  color: #94a3b8;
  line-height: 1.6;
  margin-bottom: 10px;
}

/* 참고 문서 추가 */
.dd-refadd {
  display: flex;
  gap: 10px;
}

/* 레이아웃(가로 균등·아이콘 정렬)만 담당, 시각 스타일은 .btn-outline-gray 사용 */
.dd-refadd > button {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* 참고 문서 리스트: 5개 이상이면 스크롤(약 4개 높이) */
#ddRefList {
  max-height: 232px;
  overflow-y: auto;
}

.dd-ref-item {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--dd-line);
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 8px;
  min-width: 0;
}

/* 긴 파일명 말줄임: 이름 컨테이너는 줄어들고, 태그·삭제버튼은 고정 */
.dd-ref-item > .flex-grow-1 {
  min-width: 0;
  overflow: hidden;
}

.dd-ref-item .dd-fname {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dd-ref-item .rtag {
  font-size: 11px;
  color: #64748b;
  background: #f1f5f9;
  border-radius: 6px;
  padding: 2px 8px;
  flex-shrink: 0;
  white-space: nowrap;
}

.dd-ref-item .fx {
  flex-shrink: 0;
}

/* 체크 소스 */
.dd-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  margin-bottom: 2px;
  cursor: pointer;
  font-size: 14px;
}

/* 체크박스는 앱 표준 .form-check-input, 여기서는 크기만 맞춘다 */
.dd-check input {
  width: 16px;
  height: 16px;
}

/* 우측 프리뷰 (step1) */
/* 미리보기: A4(210:297) 비율 흰 시트 (gray 캔버스 위, 그림자로 음영) */
.dd-preview {
  aspect-ratio: 210/297;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--dd-line);
  border-radius: 4px;
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #94a3b8;
  padding: 40px;
  overflow: auto;
}

.dd-preview .ic {
  font-size: 46px;
  opacity: 0.5;
}

.dd-doc-sheet {
  background: #fff;
  border: 1px solid var(--dd-line);
  border-radius: 12px;
  padding: 28px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
  text-align: left;
  width: 100%;
  max-width: 460px;
}

.dd-doc-sheet h6 {
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  border-radius: 6px;
  padding: 6px 10px;
  display: inline-block;
}

/* 작업 설정 요약 (step2 좌측) */
.dd-sum-row {
  display: flex;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid #f1f5f9;
  font-size: 14px;
}

.dd-sum-row:first-child {
  border-top: 0;
}

.dd-sum-row .k {
  color: #94a3b8;
  width: 88px;
  flex-shrink: 0;
}

.dd-sum-row .v {
  font-weight: 600;
  text-align: left;
  flex: 1;
  min-width: 0;
}

/* 편집/양식 토글 */
.dd-vtoggle {
  display: inline-flex;
  background: #f1f5f9;
  border-radius: 6px;
  padding: 3px;
  gap: 3px;
}

.dd-vtoggle button {
  border: 0;
  background: transparent;
  border-radius: 4px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
}

.dd-vtoggle button.active {
  background: #fff;
  color: var(--dd-primary);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

/* 토글 행 (A4 시트 밖 상단): 탭 센터 정렬 + 안내는 그 아래 */
.dd-vtoggle-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 6px;
}

.dd-vtoggle-row .dd-guide {
  width: 100%;
  margin-top: 10px;
  margin-bottom: 0;
}

/* 편집 보기 시트 (rbody 영역 100% 너비) / 템플릿 보기(.tpl-view)일 때만 A4 비율 */
.dd-a4 {
  width: 100%;
  background: #fff;
  border: 1px solid var(--dd-line);
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.12);
  padding: 28px;
  overflow-y: auto;
}

.dd-a4.tpl-view {
  aspect-ratio: 210/297;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
}

/* 문서 구조 에디터 */
.dd-doc-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 17px;
  margin-bottom: 14px;
}

.dd-guide {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 16px;
}

.dd-node {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--dd-line);
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 8px;
  background: #fff;
}

.dd-node.sub {
  margin-left: 34px;
  background: #fafafa;
}

.dd-node.dragging {
  opacity: 0.4;
}

.dd-node.dragover {
  border-color: var(--dd-primary);
  box-shadow: 0 0 0 2px var(--dd-soft);
}

.dd-num {
  flex-shrink: 0;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border-radius: 7px;
  background: #eef2ff;
  color: var(--dd-primary);
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dd-node.sub .dd-num {
  background: #f1f5f9;
  color: #64748b;
}

.dd-node .t-title {
  border: 0;
  font-weight: 600;
  font-size: 14px;
  width: 150px;
  flex-shrink: 0;
  background: transparent;
}

.dd-node .t-dir {
  border: 0;
  border-left: 1px solid #eef2f6;
  padding-left: 10px;
  font-size: 13px;
  color: #475569;
  flex: 1;
  min-width: 0;
  background: transparent;
}

.dd-node input:focus {
  outline: none;
}

/* 입력 포커스 시 노드 박스 강조 (form-control:focus 와 동일 스타일) */
.dd-node:focus-within {
  border-color: var(--dd-primary);
  box-shadow: inset 0 0 0 1px var(--dd-primary);
}

.dd-node .na {
  border: 0;
  background: transparent;
  color: #cbd5e1;
  padding: 2px;
  border-radius: 6px;
  flex-shrink: 0;
}

.dd-node .na.add:hover {
  color: var(--dd-primary);
  background: var(--dd-soft);
}

.dd-node .na.del:hover {
  color: #ef4444;
  background: #fef2f2;
}

.dd-node .na.grip {
  cursor: grab;
}

.dd-node .na.grip:hover {
  color: #94a3b8;
}

.dd-doc-actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
  justify-content: flex-end;
}

/* 버튼 시각은 디자인시스템(.btn-outline-*) 사용, 여기선 레이아웃(가로 균등·아이콘 정렬)만 */
.dd-doc-actions > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.dd-page-num {
  text-align: center;
  color: #cbd5e1;
  font-size: 12px;
  margin-top: 10px;
}

/* 템플릿 보기: 시트 높이를 채우고 페이지번호(-1-)를 하단 고정 */
#ddViewTpl {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

#ddViewTpl .dd-page-num {
  margin-top: auto;
}

/* step3 생성 (우측) */
.dd-gen {
  max-width: 560px;
  margin: 40px auto;
  text-align: center;
}

/* 문서 아이콘이 좌→우로 지나가는 로딩 애니메이션 (opacity 페이드 인·아웃) */
.dd-docanim {
  position: relative;
  width: 120px;
  height: 56px;
  margin: 0 auto 22px;
  overflow: hidden;
}

.dd-docanim .dd-doc-ic {
  position: absolute;
  top: 50%;
  left: -44px;
  transform: translateY(-50%);
  font-size: 42px;
  color: #94a3b8;
  animation: dd-doc-slide 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes dd-doc-slide {
  0% {
    left: -44px;
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    left: 120px;
    opacity: 0;
  }
}
.dd-progress {
  height: 8px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
  margin: 22px 0;
}

.dd-progress > i {
  display: block;
  height: 100%;
  width: 55%;
  background: linear-gradient(90deg, #c4b5fd, #6650EA);
  border-radius: 999px;
  transition: width 0.4s;
}

.dd-genstep {
  text-align: left;
  max-width: 360px;
  margin: 0 auto;
}

.dd-genstep li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: 14px;
  color: #94a3b8;
}

.dd-genstep li.done {
  color: #475569;
}

.dd-genstep li.cur {
  color: #0f172a;
  font-weight: 600;
}

.dd-genstep .gi {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 13px;
}

.dd-genstep .gi .material-symbols-outlined {
  font-size: 12px;
}

/* 완료: dark 원형 + 흰 체크 */
.dd-genstep li.done .gi {
  background: #334155;
  border-color: #334155;
  color: #fff;
}

/* 진행중: 보라 원형 + 반짝이는(맥동) 효과 */
.dd-genstep li.cur .gi {
  background: var(--dd-primary);
  border-color: var(--dd-primary);
  color: #fff;
  animation: dd-gi-glow 1.3s ease-in-out infinite;
}

@keyframes dd-gi-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(102, 80, 234, 0.5);
  }
  70%, 100% {
    box-shadow: 0 0 0 7px rgba(102, 80, 234, 0);
  }
}
.dd-warn {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  color: #dc2626;
  font-size: 13px;
  padding: 12px 14px;
  margin-top: 24px;
  text-align: center;
  line-height: 1.6;
}

/* step4 결과 */
.dd-dl {
  border: 1px solid var(--dd-line);
  border-radius: 6px;
  width: 100%;
  background: #fff;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dd-dl .material-symbols-outlined {
  color: #94a3b8;
}

.dd-dl:hover {
  border-color: var(--dd-primary);
  color: var(--dd-primary);
}

.dd-src-link {
  color: var(--dd-primary);
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
}

.dd-result-doc {
  border: 1px solid var(--dd-line);
  border-radius: 12px;
  background: #fff;
  padding: 34px 38px;
  line-height: 1.8;
}

.dd-result-doc h5 {
  font-weight: 800;
}

.dd-result-doc h6 {
  font-weight: 700;
  margin-top: 20px;
}

.dd-result-doc p {
  color: #475569;
  font-size: 14px;
}

/* step4 결과 보고서 — 텍스트 계층별 폰트를 폭 기준(cqw)으로 정의 → A4 폭이 커지면 비례 확대.
   cqw 값 = 인쇄 pt를 A4 폭(210mm) 대비 %로 환산 (예: 본문 11pt ≈ 1.85% → 1.85cqw) */
/* !important: custom.css 의 h5/h6 { font-size ... !important } 를 덮어써 cqw 스케일 적용 */
.dd-rbody[data-step="4"] > .dd-result-doc {
  line-height: 1.7;
  color: #334155;
}

.dd-rbody[data-step="4"] > .dd-result-doc h5 {
  font-size: 3.4cqw !important;
  font-weight: 800;
  line-height: 1.35;
  margin-bottom: 2.6cqw !important;
} /* 문서 제목 ~20pt */
.dd-rbody[data-step="4"] > .dd-result-doc h6 {
  font-size: 2.5cqw !important;
  font-weight: 700;
  line-height: 1.4;
  margin-top: 3cqw;
  margin-bottom: 0.8cqw;
} /* 대제목 H1 ~15pt */
.dd-rbody[data-step="4"] > .dd-result-doc .dd-h2 {
  font-size: 2.2cqw;
  font-weight: 700;
  margin: 2.4cqw 0 0.6cqw;
} /* 중제목 H2 ~13pt */
.dd-rbody[data-step="4"] > .dd-result-doc .dd-h3 {
  font-size: 2cqw;
  font-weight: 600;
  margin: 2cqw 0 0.5cqw;
} /* 소제목 H3 ~12pt */
.dd-rbody[data-step="4"] > .dd-result-doc p {
  font-size: 1.85cqw;
  line-height: 1.75;
  color: #334155;
  text-align: justify;
  margin-bottom: 1.6cqw;
} /* 본문 ~11pt */
.dd-rbody[data-step="4"] > .dd-result-doc .dd-caption {
  font-size: 1.5cqw;
  color: #94a3b8;
  margin: 0.6cqw 0 1.6cqw;
} /* 캡션/각주 ~9pt */
.dd-rbody[data-step="4"] .dd-page-num {
  font-size: 1.5cqw;
}

/* 결과 보고서 — 모바일: 고정 A4(560px) + 가로·세로 스크롤, 고정 px 폰트(가독성). cqw 대신 px */
@media (max-width: 991.98px) {
  /* 고정 560px A4가 스택 컬럼 폭을 늘려 좌측까지 밀지 않도록: 컬럼·rbody는 화면폭으로 가두고 A4 가로 넘침은 rbody 내부에서만 스크롤 */
  .dd-right {
    min-width: 0;
  }
  /* 결과 미리보기: 고정 높이 박스 + 내부 스크롤(가로·세로) */
  .dd-rbody[data-step="4"] {
    display: flex;
    flex-direction: column;
    align-items: safe center;
    gap: 24px;
    overflow: auto;
    padding: 16px;
    min-width: 0;
    max-width: 100%;
    height: 70vh;
  }
  .dd-rbody[data-step="4"] > .dd-result-doc {
    width: 560px;
    min-width: 560px;
    max-width: none;
    height: auto;
    aspect-ratio: 210/297;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 6px;
    padding: 44px 50px;
  }
  .dd-rbody[data-step="4"] .dd-page-num {
    margin-top: auto;
    font-size: 12px;
  }
  .dd-rbody[data-step="4"] > .dd-result-doc h5 {
    font-size: 21px !important;
    margin-bottom: 16px !important;
    line-height: 1.35;
  }
  .dd-rbody[data-step="4"] > .dd-result-doc h6 {
    font-size: 16px !important;
    margin-top: 18px;
    margin-bottom: 5px;
  }
  .dd-rbody[data-step="4"] > .dd-result-doc .dd-h2 {
    font-size: 14px;
    margin: 15px 0 4px;
  }
  .dd-rbody[data-step="4"] > .dd-result-doc .dd-h3 {
    font-size: 13px;
    margin: 12px 0 3px;
  }
  .dd-rbody[data-step="4"] > .dd-result-doc p {
    font-size: 12.5px;
    line-height: 1.7;
    margin-bottom: 10px;
  }
  .dd-rbody[data-step="4"] > .dd-result-doc .dd-caption {
    font-size: 10.5px;
    margin: 4px 0 10px;
  }
}
/* 상단 바는 user_service.html과 동일하게 .top-btn-group 사용(모바일 아이콘화·상단 여백은 표준 규칙이 처리) */
/* 하단 네비게이션 */
.dd-nav {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 22px;
}

/* 학습 데이터 팝업 */
.dd-ld-cat {
  width: 190px;
  flex-shrink: 0;
}

.dd-ld-cat button {
  display: flex;
  justify-content: space-between;
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 14px;
  color: #475569;
  margin-bottom: 2px;
}

.dd-ld-cat button.active {
  background: #eef2ff;
  color: var(--dd-primary);
  font-weight: 700;
}

/* 카테고리 트리 */
.dd-tree button {
  justify-content: flex-start !important;
  gap: 4px;
  align-items: center;
}

.dd-tree .tl {
  flex: 1;
  text-align: left;
}

.dd-tree .tw {
  width: 18px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  transition: transform 0.15s;
  cursor: pointer;
}

.dd-tree .tw .material-symbols-outlined {
  font-size: 18px;
}

.dd-tree .tree-branch.collapsed > button .tw {
  transform: rotate(-90deg);
}

.dd-tree .tree-kids {
  margin-left: 11px;
  padding-left: 8px;
  border-left: 1px solid #e2e8f0;
}

.dd-tree .tree-branch.collapsed > .tree-kids {
  display: none;
}

.dd-ld-file {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--dd-line);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

.dd-ld-file input {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.dd-ld-file .ftag {
  font-size: 11px;
  color: #64748b;
  background: #f1f5f9;
  border-radius: 6px;
  padding: 2px 8px;
  margin-left: auto;
}

/* 카드 hover 시 미리보기 툴팁 (제목 포함 3줄 말줄임) */
.dd-ld-tip {
  position: absolute;
  z-index: 20;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  background: #fff;
  border: 1px solid var(--dd-line);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.15);
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.55;
  color: #475569;
  display: none;
}

.dd-ld-file:hover .dd-ld-tip {
  display: block;
}

/* 제목 1줄 */
.dd-ld-tip .tip-title {
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 설명 3줄 + "..." (총 4줄) */
.dd-ld-tip .tip-desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dd-ld-empty {
  border: 1px solid var(--dd-line);
  border-radius: 10px;
  background: #f8fafc;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

/* 접이식 섹션 헤더 (모바일에서 요약/문서정보 접기 — 데스크톱은 항상 펼침, chevron 숨김) */
.dd-collapse-hd {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  width: 100%;
  padding: 0;
  margin: 0 0 1rem;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  font-size: 1.15rem;
  line-height: 1.4;
}

.dd-collapse-hd .dd-chev {
  display: none;
  color: #94a3b8;
  font-size: 20px;
  transition: transform 0.2s ease;
}

.dd-collapse-body {
  display: block;
}

/* ═══════════ 반응형 (주 영역 우선 스택) ═══════════ */
/* divider는 데스크톱(≥992px) 2단에서만 노출 */
@media (max-width: 991.98px) {
  .dd-divider {
    display: none;
  }
}
/* 태블릿(md): 2단 유지하되 좌측 컬럼 축소 (divider 없이 2컬럼) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .dd-split {
    grid-template-columns: 320px 1fr;
    gap: 16px;
  }
  .dd-node .t-title {
    width: 120px;
  }
}
/* 모바일(sm 이하): 1단 스택 + 스텝별 주 영역을 위로 */
@media (max-width: 767.98px) {
  .dd-split {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  /* 스텝퍼(1-2-3-4)를 항상 상단에 : 좌측 컬럼(타이틀·스텝퍼) 우선 → right-first 해제 */
  .dd-split.right-first .dd-right {
    order: 0;
  }
  /* ① 작업 설정: 우측 미리보기 패널은 설정 영역(좌측 우선) 아래로 흐르게 표시 */
  /* 우측(출력) 패널 안쪽 여백 (p-2 = 0.5rem) */
  .dd-rbody {
    padding: 0.5rem;
  }
  /* ④ 결과 다운로드: 아이콘+짧은 라벨을 가로 4분할, '내려받기' 텍스트 숨김 */
  .dd-dl-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  .dd-dl-grid .dd-dl {
    flex-direction: column;
    gap: 4px;
    text-align: center;
    padding: 12px 6px;
    margin-bottom: 0;
    font-size: 12px;
  }
  .dd-dl-grid .dd-dl .material-symbols-outlined {
    font-size: 1.8rem;
  }
  .dd-dl-suffix {
    display: none;
  }
  /* 요약(②) · 문서정보(④) 접이식 활성화 — 기본 접힘, 헤더 클릭 시 펼침 */
  .dd-collapse-hd {
    cursor: pointer;
    margin-bottom: 0;
  }
  .dd-collapse-hd.dd-open {
    margin-bottom: 12px;
  }
  .dd-collapse-hd .dd-chev {
    display: inline-flex;
  }
  .dd-collapse-hd.dd-open .dd-chev {
    transform: rotate(180deg);
  }
  .dd-collapse-body {
    display: none;
  }
  .dd-collapse-body.dd-open {
    display: block;
  }
  /* 스텝퍼: 모든 스텝 라벨 노출(좁은 화면 대비 폰트 축소) */
  .dd-stepper .st .lbl {
    display: block;
    font-size: 10px;
  }
  /* ③ 생성 좌측 안내문은 모바일에서 생략(스피너 영역이 자체 설명, '오른쪽' 문구도 부적합) */
  .dd-lbody[data-step="3"] {
    display: none !important;
  }
  /* 분량 4개 → 2×2 wrap */
  .dd-seg[data-group=length] {
    flex-wrap: wrap;
  }
  .dd-seg[data-group=length] > button {
    flex: 1 1 calc(50% - 3px);
  }
  /* 문체 3개 세로 배치 */
  .dd-styline .dd-seg {
    flex-direction: column;
  }
  /* 구조 에디터 노드: 제목/버튼은 1줄, 작성 방향은 아래 full-width */
  .dd-node {
    flex-wrap: wrap;
  }
  .dd-node .t-title {
    flex: 1;
    width: auto;
  }
  .dd-node .t-dir {
    order: 5;
    flex-basis: 100%;
    border-left: 0;
    padding-left: 34px;
    margin-top: 4px;
  }
  /* step1 프리뷰 높이 축소 */
  .dd-preview {
    min-height: 360px;
  }
  /* 하단 액션 버튼을 화면 하단에 고정 — 전 스텝 공통 흰색 액션바 (① 생성 · ② 이전/문서생성 · ④ 재생성) */
  .dd-lbody > .dd-foot {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    margin: 0;
    padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid var(--dd-line);
    box-shadow: 0 -2px 8px rgba(15, 23, 42, 0.06);
  }
  /* 고정 액션바에 콘텐츠가 가리지 않도록 하단 여백 확보 (액션바 있는 ①②④ 스텝) */
  .dd-split.dd-cur-1, .dd-split.dd-cur-2, .dd-split.dd-cur-4 {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
  /* ── 모바일 여백/완성도 정리 ── */
  /* 좌우 패딩은 user_service와 동일하게 표준(.user-page .contents-body: 0.5rem)을 그대로 사용 */
  /* 모바일에서는 브레드크럼 생략(user_service와 동일하게 상단 간결화) */
  .dd-crumb {
    display: none;
  }
  /* 타이틀·부제·스텝퍼 상단 영역 간격 정리 */
  .dd-left > p.slate-400 {
    margin-bottom: 1rem !important;
  }
  .dd-stepper {
    margin-bottom: 1.25rem !important;
  }
  /* 학습 데이터 모달: 카테고리(가로 칩) + 목록 세로 스택, 풀스크린 */
  #ddLearnData .modal-body > .d-flex {
    flex-direction: column;
  }
  #ddLearnData .dd-ld-cat {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 12px;
  }
  #ddLearnData .dd-ld-cat button {
    width: auto;
  }
}
/* ── 허브(user_doc-draft.html) 전용 : 템플릿 카드 · 최근 작업 테이블 ── */
/* 템플릿 카드 (기존 .service .box 스타일 그대로: 라운드 6px + 호버 그림자) */
.dd-tpl-card {
  border: solid 1px #e2e8f0;
  border-radius: 6px;
  padding: 1.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
  height: 100%;
}

.dd-tpl-card:hover {
  box-shadow: 0px 3px 7px -5px #94a3b8;
}

.dd-cnt-badge {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  background: #f1f5f9;
  border-radius: 999px;
  padding: 2px 10px;
}

/* 최근 작업 상태 배지 */
.dd-status {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: #6650EA;
  background: #f5f3ff;
  border-radius: 999px;
  padding: 3px 12px;
}

/* 삭제 아이콘 버튼 정중앙 정렬 (Material Icons 폰트 메트릭상 세로로 3px 내려가는 것 보정, 이 테이블에만 적용) */
#ddRecentTable td .btn-icon-only {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 제목 셀 좌측정렬 + 행 전체 클릭 가능 */
#ddRecentTable td:first-child {
  text-align: left;
}

#ddRecentTable tbody tr {
  cursor: pointer;
}

/* 빈 상태 */
.dd-empty {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  color: #94a3b8;
  text-align: center;
  padding: 64px 0;
}

/* ------------------------------------------------------------------ *
 *  회의록 요약 페이지 추가 (dd- 체계 재사용 + 최소 보강) 20260806
 * ------------------------------------------------------------------ */
.dd-drop {
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  padding: 20px 14px;
  text-align: center;
  color: #475569;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}

.dd-drop:hover, .dd-drop.dragover {
  background: #f8fafc;
  border-color: var(--dd-primary);
}

.dd-drop .material-symbols-outlined {
  font-size: 1.5rem;
  color: #94a3b8;
}

/* 업로드 파일 목록: 3개까지 표시, 4개 이상이면 내부 세로 스크롤 (항목 52px + margin 8px = 60px × 3) */
#msFileList {
  max-height: 180px;
  overflow-y: auto;
}

/* step1 회의 일시: 커스텀 날짜/시각 피커 (톤앤매너 인디고) — 날짜는 넓게, 시각은 고정폭 */
.ms-picker {
  position: relative;
}

.ms-date-picker {
  flex: 1 1 auto;
  min-width: 0;
}

.ms-time-picker {
  flex: 0 0 132px;
}

.ms-picker-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  text-align: left;
  background: #fff;
  cursor: pointer;
}

.ms-picker-btn:hover {
  border-color: var(--dd-primary);
}

.ms-picker-btn .material-symbols-outlined {
  font-size: 18px;
  color: #94a3b8;
  flex-shrink: 0;
}

.ms-picker-val {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #94a3b8;
}

.ms-picker-val.has-val {
  color: #0f172a;
  font-weight: 600;
}

/* 날짜+시간 통합 팝업 (fixed → 스크롤 컨테이너/overflow에 안 잘림) */
.ms-dt {
  position: fixed;
  z-index: 1080;
  display: none;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
  padding: 14px;
}

.ms-dt.show {
  display: block;
}

.ms-dt-body {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.ms-dt-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
}

/* 캘린더 */
.ms-cal {
  width: 268px;
  flex-shrink: 0;
}

.ms-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.ms-cal-title {
  font-weight: 700;
  font-size: 14px;
  color: #0f172a;
}

.ms-cal-nav {
  border: 0;
  background: transparent;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  cursor: pointer;
}

.ms-cal-nav:hover {
  background: #f1f5f9;
  color: var(--dd-primary);
}

.ms-cal-nav .material-symbols-outlined {
  font-size: 20px;
}

.ms-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.ms-cal-dow {
  margin-bottom: 2px;
}

.ms-cal-dow span {
  text-align: center;
  font-size: 12px;
  color: #94a3b8;
  font-weight: 600;
  padding: 4px 0;
}

.ms-cal-dow span:first-child {
  color: #ef4444;
}

.ms-cal-day, .ms-cal-empty {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  border-radius: 6px;
  border: 0;
  background: transparent;
  color: #334155;
  cursor: pointer;
}

.ms-cal-grid > .ms-cal-day:nth-child(7n+1) {
  color: #ef4444;
}

.ms-cal-day:hover {
  background: #eef2ff;
  color: var(--dd-primary);
}

.ms-cal-day.today {
  font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--dd-primary);
}

.ms-cal-day.sel {
  background: var(--dd-primary) !important;
  color: #fff !important;
  font-weight: 700;
  box-shadow: none;
}

.ms-cal-day.disabled {
  color: #cbd5e1 !important;
  cursor: not-allowed;
  pointer-events: none;
}

.ms-cal-empty {
  cursor: default;
}

.ms-cal-nav:disabled {
  opacity: 0.3;
  pointer-events: none;
}

/* 시각 영역: 드럼 휠 + 직접입력 칸 (세로) — 가로 중앙 정렬 + 캘린더 높이에 맞춰 세로 중앙 */
.ms-time-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  gap: 8px;
  padding-left: 12px;
  border-left: 1px solid #f1f5f9;
}

.ms-time-input {
  width: 104px;
  text-align: center;
  font-weight: 400;
  letter-spacing: 1px;
}

.ms-time-input:focus {
  border-color: var(--dd-primary);
  box-shadow: 0 0 0 0.18rem rgba(102, 80, 234, 0.15);
}

/* 시각 드럼(휠) 다이얼 — 스크롤 스냅 + 가운데 하이라이트 밴드 */
.ms-time-wheels {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 170px;
  padding: 0 4px;
}

.ms-wheel {
  height: 170px;
  width: 48px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
}

.ms-wheel::-webkit-scrollbar {
  display: none;
}

.ms-wheel-list {
  padding: 68px 0;
}

.ms-wheel-item {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: #94a3b8;
  scroll-snap-align: center;
  cursor: pointer;
  transition: color 0.12s, font-size 0.12s;
}

.ms-wheel-item.on {
  color: var(--dd-primary);
  font-weight: 800;
  font-size: 17px;
}

.ms-wheel-sep {
  font-weight: 800;
  color: #0f172a;
  align-self: center;
}

.ms-wheel-band {
  position: absolute;
  left: 4px;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  height: 34px;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  background: rgba(102, 80, 234, 0.06);
  border-radius: 6px;
  pointer-events: none;
}

/* 회의 전체 모달(모바일) 본문 */
.ms-full-modal-body .fw-bold {
  color: #0f172a;
  margin-bottom: 10px;
}

.ms-full-modal-body p {
  color: #475569;
  font-size: 14px;
  line-height: 1.9;
  margin-bottom: 12px;
}

.ms-full-modal-body p:last-child {
  margin-bottom: 0;
}

/* 결과 문서 표 */
.dd-result-doc table {
  width: 100%;
  font-size: 13px;
}

.dd-result-doc th {
  color: #94a3b8;
  font-weight: 700;
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid #e2e8f0;
}

.dd-result-doc td {
  padding: 8px;
  border-bottom: 1px solid #f1f5f9;
  color: #475569;
}

/* 유형별 미리보기 서식(dd-doc-sheet 위에서 h6 칩 스타일 해제) */
.dd-tpl-doc h6 {
  border: 0;
  background: transparent;
  padding: 0;
  display: block;
  font-weight: 700;
  margin: 16px 0 6px;
  font-size: 14px;
}

.dd-tpl-doc p, .dd-tpl-doc li {
  color: #475569;
  font-size: 13px;
}

.dd-tpl-doc ul {
  padding-left: 18px;
  margin-bottom: 0;
}

.dd-tpl-doc .meta {
  line-height: 2;
  color: #526277;
}

/* 우측 미리보기 서식: A4 비율 (doc-draft .dd-preview 동일 방식) — 데스크톱은 높이 채우고 폭은 A4 */
.dd-tpl-doc {
  aspect-ratio: 210/297;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  overflow-y: auto;
}

/* 결과(step3) 좌측: 생성화면용 중앙정렬 해제 → 다운로드 버튼 full폭 */
.ms-mtg .dd-lbody[data-step="3"] {
  justify-content: flex-start;
  align-items: stretch;
}

/* 생성(step2) 좌측 안내 문구: 좌측 패널에서 세로 가운데 정렬(가로는 .dd-infobox text-center) */
.ms-mtg .dd-lbody[data-step="2"] {
  justify-content: center;
}

@media (min-width: 992px) {
  .ms-mtg .dd-rbody[data-step="1"] > .dd-tpl-doc {
    height: 100%;
    width: auto;
    max-width: 100%;
    margin: 0;
  }
}
/* 회의록 요약 3단계(1 업로드 / 2 생성 / 3 결과) 재정의 */
/* 결과(step3): [상단 툴바(회의 전체 펼치기)] + [회의록 A4 페이지 열 | 회의 전체 텍스트 열].
   회의록 A4는 container-query(cqw)로 열 폭에 비례해 스케일. 펼치면 좌측 폼/구분선을 접어 우측 최대폭. */
@media (min-width: 992px) {
  .ms-mtg .dd-rbody[data-step="2"] {
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .ms-mtg .dd-rbody[data-step="3"] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    overflow: hidden;
  }
  .ms-mtg .dd-rbody[data-step="3"] .ms-rtop {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
  }
  /* 2열: rcols 자체는 스크롤 없음(각 열이 독립 스크롤) */
  .ms-mtg .dd-rbody[data-step="3"] .ms-rcols {
    flex: 1;
    min-height: 0;
    display: flex;
    gap: 20px;
    align-items: stretch;
    justify-content: center;
    overflow: hidden;
  }
  /* 미리보기 열 공통(회의록·회의 전체): container-query 기준 + 세로 독립 스크롤 */
  .ms-mtg .ms-pages,
  .ms-mtg .ms-full {
    min-width: 0;
    min-height: 0;
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5cqw;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .ms-mtg .ms-pages {
    width: 100%;
    max-width: 620px;
    flex: 0 1 620px;
  }
  .ms-mtg .ms-full {
    flex: 1 1 0;
  }
  /* A4 시트(회의록·회의 전체 공통) — 열 폭에 비례해 텍스트 스케일 */
  .ms-mtg .ms-rcols .dd-result-doc {
    width: 100%;
    height: auto;
    aspect-ratio: 210/297;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--dd-line);
    border-radius: 6px;
    padding: 8cqw 9cqw;
  }
  .ms-mtg .ms-rcols .dd-result-doc h5 {
    font-size: 3.4cqw !important;
    font-weight: 800;
    line-height: 1.35;
    margin-bottom: 2.6cqw !important;
  }
  .ms-mtg .ms-rcols .dd-result-doc h6 {
    font-size: 2.5cqw !important;
    font-weight: 700;
    line-height: 1.4;
    margin-top: 3cqw;
    margin-bottom: 0.8cqw;
  }
  .ms-mtg .ms-rcols .dd-result-doc > .fw-bold {
    font-size: 2.2cqw;
    margin-bottom: 1.6cqw;
  }
  .ms-mtg .ms-rcols .dd-result-doc p {
    font-size: 1.85cqw;
    line-height: 1.9;
    margin-bottom: 1.6cqw;
    color: #334155;
  }
  .ms-mtg .ms-rcols .dd-result-doc ul,
  .ms-mtg .ms-rcols .dd-result-doc li {
    font-size: 1.85cqw;
  }
  .ms-mtg .ms-rcols .dd-result-doc table {
    font-size: 1.85cqw;
  }
  .ms-mtg .ms-rcols .dd-result-doc th,
  .ms-mtg .ms-rcols .dd-result-doc td {
    padding: 1cqw 1.4cqw;
  }
  .ms-mtg .ms-rcols .dd-page-num {
    margin-top: auto;
    text-align: center;
    color: #94a3b8;
    font-size: 1.5cqw;
    padding-top: 2cqw;
  }
  /* 펼침 상태: divider 최대치(좌측 최소폭)로 우측 패널 최대 + 미리보기 2개(회의록·회의 전체) 나란히 */
  .dd-split.ms-full-open .ms-pages {
    flex: 1 1 0;
    max-width: none;
  }
  .dd-split.ms-full-open .ms-rcols {
    justify-content: center;
  }
}
/* 결과(step3) — 모바일(≤991): 고정 A4(560px)+px폰트, 고정 높이 뷰포트 안에서 좌·우/상·하 스크롤 (doc-draft step4 동일) */
@media (max-width: 991.98px) {
  /* rbody는 고정 높이(스크롤 뷰포트), 실제 스크롤은 ms-rcols가 담당 */
  .ms-mtg .dd-rbody[data-step="3"] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 12px;
    min-width: 0;
    max-width: 100%;
    height: 72vh;
  }
  .ms-mtg .dd-rbody[data-step="3"] .ms-rtop {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
  }
  /* align-items: safe center → 560px A4가 화면보다 넓어도 잘리지 않고 좌측부터 보이며 가로 스크롤 가능 */
  .ms-mtg .dd-rbody[data-step="3"] .ms-rcols {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: safe center;
    gap: 24px;
    overflow: auto;
  }
  .ms-mtg .ms-pages,
  .ms-mtg .ms-full {
    display: flex;
    flex-direction: column;
    align-items: safe center;
    gap: 12px;
  }
  .ms-mtg .ms-rcols .dd-result-doc {
    width: 560px;
    min-width: 560px;
    max-width: none;
    height: auto;
    aspect-ratio: 210/297;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--dd-line);
    border-radius: 6px;
    padding: 44px 50px;
  }
  .ms-mtg .ms-rcols .dd-result-doc h5 {
    font-size: 21px !important;
    margin-bottom: 16px !important;
    line-height: 1.35;
  }
  .ms-mtg .ms-rcols .dd-result-doc h6 {
    font-size: 16px !important;
    margin-top: 18px;
    margin-bottom: 5px;
  }
  .ms-mtg .ms-rcols .dd-result-doc > .fw-bold {
    font-size: 15px;
    margin-bottom: 10px;
  }
  .ms-mtg .ms-rcols .dd-result-doc p {
    font-size: 12.5px;
    line-height: 1.8;
    margin-bottom: 10px;
    color: #334155;
  }
  .ms-mtg .ms-rcols .dd-result-doc table {
    font-size: 12.5px;
  }
  .ms-mtg .ms-rcols .dd-page-num {
    margin-top: auto;
    text-align: center;
    color: #94a3b8;
    font-size: 12px;
    padding-top: 14px;
  }
}
/* 스텝 의미 리매핑 + 고정 액션바 여백 — 모바일(≤767.98px)만 (공유 규칙은 doc-draft 4단계 기준: 생성=step3/결과=step4) */
@media (max-width: 767.98px) {
  .ms-mtg .dd-lbody[data-step="2"] {
    display: none !important;
  } /* 회의록 생성=step2 좌측 안내 숨김(= doc-draft 생성 스텝 좌측 숨김) */
  .ms-mtg .dd-lbody[data-step="3"]:not(.d-none) {
    display: block !important;
  } /* 공유 규칙의 step3 숨김 무효화 → 회의록 결과=step3 좌측(다운로드/재생성) 노출 */
  /* 고정 하단 액션바 여백: 회의록 액션 스텝은 1(생성)·3(재생성) */
  .dd-split.ms-mtg.dd-cur-3 {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
  .dd-split.ms-mtg.dd-cur-2 {
    padding-bottom: 0;
  } /* 생성 스텝은 액션바 없음 → 여백 제거 */
}
/* ═══════════════════════════════════════════════════════════════════════
   대화함 · 대화 공유하기 (사용자 페이지) 추가 20260810
   - 대화함(user_conversations): 3탭(보관된/공유한/공유받은) 테이블 + 안내배너
   - 대화 공유 모달: 조직 트리 + 멤버 선택 + 선택 대상 (service-chat-ex)
   기존 토큰(slate-*, indigo-blue, badge.bg-light-*, .selected-badge)만 재사용
   ═══════════════════════════════════════════════════════════════════════ */
/* 서비스 유형 뱃지 색 보강 — 문서 초안 작성(indigo)·외부 자료 조사(green).
   회의록 요약은 기존 .bg-light-violet 재사용. custom.css 원본 미변경, 신규 클래스만 추가 */
.badge.bg-light-green {
  background-color: #DCFCE7;
  color: #166534;
}

.badge.bg-light-indigo {
  background-color: #E7E3FC;
  color: #4B36C9;
}

/* LNB 알림 dot — 대화함에 신규 공유받은 대화가 있을 때 (기획안 1-1) */
/* dot 을 메뉴 항목(li) 기준으로 배치 → 우측에서 5px */
.main-menu.user li {
  position: relative;
}

.main-menu.user li .menu-icon.has-dot::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ef4444;
  border: 1.5px solid #fff;
}

/* ── 대화함 페이지 ─────────────────────────────────────────── */
/* 탭 우측 신규 개수 알림(빨간 점 카운트) — '공유 받은 대화' 탭 (기획안 1-1) */
/* 대화함 탭: 탭 사이 간격 제거(custom.css .nav-item{padding:0 .25rem} 상쇄) */
.user-page #convoTab .nav-item {
  padding-left: 0;
  padding-right: 0;
}

/* dot 을 탭 우측 상단에 absolute 배치하기 위한 기준 (dot 담은 탭만) */
.nav-link:has(> .convo-tab-new) {
  position: relative;
}

/* 신규(미확인) 공유 알림 — 좌측 LNB 대화함 dot 과 동일한 빨간 점, 탭 우측 상단 absolute (숫자 없음) */
.convo-tab-new {
  position: absolute;
  top: 4px;
  right: 2px;
  width: 7px;
  height: 7px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  background: #ef4444;
  border: 1.5px solid #fff;
  font-size: 0;
  line-height: 0;
}

/* 안내 배너 — 공유받은 대화/공유 모달 공용 (soft amber, 라운드) */
.convo-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 8px;
  background: #FEF9C3;
  color: #854D0E;
  font-size: 0.95rem;
}

.convo-notice .material-symbols-outlined {
  font-size: 20px;
  flex-shrink: 0;
}

.convo-notice b {
  color: #713F12;
}

/* 안내가 여러 줄일 때 리스트로 (상·하단 통합) */
.convo-notice ul {
  margin: 0;
  line-height: 1.5;
}

.convo-notice li + li {
  margin-top: 3px;
}

/* 그레이 변형 — 대화 공유 모달 안내(앰버 대신 슬레이트 톤) */
.convo-notice.convo-notice--gray {
  background: #f1f5f9;
  color: #526277;
}

.convo-notice.convo-notice--gray b {
  color: #334155;
}

/* 테이블을 감싸는 라운드 카드 — 헤더/행을 얇은 라인으로 구분 (기획안 톤) */
.convo-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
  overflow: hidden;
}

.convo-table {
  margin-bottom: 0;
  vertical-align: middle;
}

.convo-table thead th {
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
  color: #526277;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.9rem 1rem;
  white-space: nowrap;
}

.convo-table tbody td {
  border-bottom: 1px solid #f1f5f9;
  padding: 1rem;
  color: #29374d;
}

.convo-table tbody tr:last-child td {
  border-bottom: 0;
}

.convo-table tbody tr:hover {
  background: #f8fafc;
}

.convo-table .convo-title {
  font-weight: 700;
  color: #0f172a;
}

/* 긴 대화명: 50자 넘으면 말줄임 + 마우스오버 전체 제목(기획안 5, 5-1) */
.convo-table .convo-title.text-truncate {
  display: inline-block;
  max-width: 360px;
  vertical-align: bottom;
}

/* 대화함 테이블 액션 아이콘(조회·보관해제·삭제·공유취소) — btn-nobg-slim 기반 + 가독 색/인디고 hover (표준 테이블에도 적용) */
.convo-act {
  color: #526277;
}

.convo-act:hover {
  color: #6650EA;
}

/* 받은 사람 '외 N명' — 기본 텍스트 색/굵기·기본 커서, 밑줄만 확장 표시 (호버 시 data-tooltip 명단) */
.convo-more {
  text-decoration: underline;
  white-space: nowrap;
}

/* 대화함 테이블: 고정 레이아웃 → 대화명 열이 폭 부족 시 말줄임(...) 처리 (툴팁은 JS로) */
.convo-tbl {
  table-layout: fixed;
}

.convo-tbl td.text-ellipsis {
  max-width: none;
}

/* 대화함 테이블 — 모바일: custom.css 의 앱 표준 반응형 테이블(@media ≤768, .user-page tr 을 flex-wrap 으로
   줄바꿈)을 그대로 따른다. 즉 카드가 아니라 bordered 테이블 모양을 유지한다.
   표준 규칙은 5열 기준(td 1·2 = 전체폭, td 3~5 = 33.33%)이라, 열 수가 다른 표만 폭을 재지정한다. */
@media screen and (max-width: 768px) {
  /* 보관된 대화(6열) — [서비스 유형] / [대화명] / [생성일자 · 조회 · 보관해제 · 대화삭제] */
  #pane-saved .convo-tbl tbody td:nth-child(3) {
    width: 40%;
  }
  #pane-saved .convo-tbl tbody td:nth-child(4),
  #pane-saved .convo-tbl tbody td:nth-child(5),
  #pane-saved .convo-tbl tbody td:nth-child(6) {
    display: inline-flex;
    width: 20%;
    border-top: solid 1px #e2e8f0;
  }
  /* 공유한 대화(6열) — 받은 사람은 이름+이메일이라 전체폭. [유형] / [대화명] / [받은 사람] / [공유일시 · 조회 · 공유취소] */
  #pane-shared .convo-tbl tbody td:nth-child(3) {
    display: block;
    width: 100%;
  }
  #pane-shared .convo-tbl tbody td:nth-child(4) {
    width: 40%;
  }
  #pane-shared .convo-tbl tbody td:nth-child(5),
  #pane-shared .convo-tbl tbody td:nth-child(6) {
    display: inline-flex;
    width: 30%;
    border-top: solid 1px #e2e8f0;
  }
  /* 공유 받은 대화(5열) — [유형] / [대화명] / [공유한 사람] / [공유일시 · 조회] */
  #pane-received .convo-tbl tbody td:nth-child(3) {
    display: block;
    width: 100%;
  }
  #pane-received .convo-tbl tbody td:nth-child(4) {
    width: 50%;
  }
  #pane-received .convo-tbl tbody td:nth-child(5) {
    width: 50%;
  }
}
/* NEW 뱃지 — 새로 받은(미확인) 대화 표시 (빨간 소형 라벨) */
.tag-new {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  vertical-align: middle;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.3px;
  color: #fff;
  background: #ef4444;
  border-radius: 4px;
}

/* ── 대화 공유 모달 (개선 20260810: 전역검색·시각통일·조회↔선택·피드백) ── */
.share-modal .modal-dialog {
  max-width: 640px;
}

.share-modal .modal-body {
  padding: 1rem 1.25rem 1.25rem;
}

/* 최상단 전역 검색 — 아이콘 입력창 좌측 내장 */
.share-search {
  position: relative;
  margin-bottom: 12px;
}

.share-search .material-symbols-outlined {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: #94a3b8;
  pointer-events: none;
}

.share-search input {
  padding-left: 38px;
}

/* 조직도 + 멤버를 하나의 박스로 묶고, 사이 divider로 좌우 폭 조절 */
.share-pane {
  display: flex;
  align-items: stretch;
  height: 280px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}

/* 좌우 폭 조절 divider (dd-divider 패턴 — 1px 라인 + 중앙 그립) */
.share-divider {
  flex: 0 0 14px;
  align-self: stretch;
  cursor: col-resize;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
}

.share-divider::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  background: #e2e8f0;
  transition: background 0.15s;
}

.share-divider::after {
  content: "";
  position: relative;
  width: 5px;
  height: 36px;
  border-radius: 4px;
  background: #cbd5e1;
  border: 1px solid #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.15);
  transition: background 0.15s, height 0.15s;
}

.share-divider:hover::before, .share-divider.dragging::before {
  background: #6650EA;
}

.share-divider:hover::after, .share-divider.dragging::after {
  background: #6650EA;
  height: 48px;
}

/* 좌: 조직 트리 — 순수 내비게이션 + 부서/회사 펼침·접힘(collapse) */
.share-tree {
  flex: 0 0 42%;
  min-width: 120px;
  overflow: auto;
  padding: 6px;
}

.tree-node {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  white-space: nowrap;
  padding: 6px 8px;
  border-radius: 6px;
  color: #334155;
}

.tree-node .tree-ico {
  font-size: 18px;
  color: #94a3b8;
}

.tree-node:hover {
  background: #f1f5f9;
}

/* 조회중(active) = 옅은 배경 + 인디고 텍스트 (좌측 바 없음) */
.tree-node.active {
  background: #ede9ff;
  color: #4B36C9;
  font-weight: 700;
}

.tree-node.active .tree-ico {
  color: #6650EA;
}

/* 펼침/접힘 — 하위(팀)를 담는 컨테이너는 부모 아래로 들여쓰기 */
.tree-children {
  padding-left: 16px;
}

.tree-item.collapsed > .tree-children {
  display: none;
}

/* 접기 화살표: 펼침=아래(expand_more), 접힘=좌회전 */
.tree-caret {
  font-size: 18px;
  color: #94a3b8;
  border-radius: 4px;
  transition: transform 0.15s;
  flex: 0 0 auto;
}

.tree-caret:hover {
  background: #e2e8f0;
  color: #526277;
}

.tree-item.collapsed > .tree-node > .tree-caret {
  transform: rotate(-90deg);
}

.tree-node.active .tree-caret {
  color: #6650EA;
}

/* 리프(팀)는 화살표 자리만큼 정렬용 여백 */
.tree-caret-spacer {
  display: inline-block;
  width: 18px;
  flex: 0 0 18px;
}

/* 조직 체크박스 — 조직 자체를 공유 대상으로 선택(체크 시 '선택된 대상'에 조직명 칩).
   상위 조직이 선택되면 하위는 이미 포함되므로 비활성 처리한다. */
/* 체크박스 자체는 앱 표준 .form-check-input(custom.css: 인디고 체크·3px 라디우스·인디고 포커스링)을 쓰고,
   .tree-chk 는 트리 행 안에서의 레이아웃(줄어들지 않기·간격·세로중앙)만 담당한다. */
.tree-chk {
  flex: 0 0 auto;
  margin: 0 6px 0 0;
  cursor: pointer;
}

.tree-node.org-picked {
  color: #4B36C9;
  font-weight: 700;
}

.tree-node.org-picked .tree-ico {
  color: #6650EA;
}

/* 선택된 대상 - 조직 칩 (멤버 칩과 구분: 인디고 톤 + 조직 아이콘) */
.selected-badge.org-badge {
  border-color: #c4b5fd;
  background-color: #f5f3ff;
  color: #4B36C9;
  font-weight: 700;
}

.selected-badge.org-badge > .material-symbols-outlined {
  font-size: 15px;
  color: #6650EA;
}

/* 조직 칩이 대신하는 인원 수 */
.selected-badge.org-badge .org-cnt {
  font-weight: 500;
  font-size: 0.78rem;
  color: #8b7bd8;
}

.selected-badge.org-badge button {
  color: #8b7bd8;
}

.selected-badge.org-badge button:hover {
  color: #4B36C9;
}

/* 우: 멤버 / 검색 결과 */
.share-members {
  flex: 1 1 0;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.share-members .sm-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: #29374d;
  margin-bottom: 8px;
}

.share-members .sm-head .form-check {
  flex: 0 0 auto;
} /* 헤더 우측 '전체 선택' */
.share-members .sm-sub {
  color: #94a3b8;
  font-weight: 400;
  font-size: 0.85rem;
}

.share-members .sm-list {
  overflow: auto;
  flex: 1;
}

/* 멤버 행(리스트 한정): hover + 선택 시 배경 피드백 (선택 = 인디고 틴트) */
.share-members .sm-list .form-check {
  margin: 0;
  padding: 6px 8px 6px 30px;
  border-radius: 6px;
}

.share-members .sm-list .form-check:hover {
  background: #f8fafc;
}

.share-members .sm-list .form-check:has(input:checked) {
  background: #f4f2ff;
}

.share-members .sm-name {
  font-weight: 600;
  color: #29374d;
}

.share-members .sm-pos {
  color: #94a3b8;
}

.share-members .sm-team {
  color: #6650EA;
  font-size: 0.8rem;
  font-weight: 600;
}

.share-members .sm-email {
  color: #94a3b8;
  font-size: 0.9rem;
}

.sm-empty {
  color: #94a3b8;
  font-size: 0.9rem;
  text-align: center;
  padding: 22px 0;
}

/* 선택 대상 + 카운트 — 칩이 4줄(≈140px) 넘으면 내부 스크롤 */
.share-selected {
  padding: 8px 10px;
  border-radius: 8px;
  background: #f8fafc;
  min-height: 40px;
  max-height: 140px;
  overflow-y: auto;
  display: flex;
  align-items: flex-start;
  align-content: flex-start;
  flex-wrap: wrap;
  gap: 6px;
}

.share-selected .empty {
  color: #94a3b8;
  font-size: 0.9rem;
}

/* 공유 완료 오버레이 — 공유 모달 위에 확인 다이얼로그처럼 표시(스택 모달 대신 오버레이) */
.share-done-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.45);
  border-radius: 0.5rem;
}

.share-done-card {
  background: #fff;
  border-radius: 10px;
  padding: 24px 28px;
  max-width: 88%;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.2);
}

/* ========== 참고 문서 미리보기 (user_chat / 요구사항 #004) ========== */
/* 답변 내 참고 문서 카드 */
.ref-docs {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.ref-docs-label {
  font-size: 12px;
  font-weight: 600;
}

.ref-doc-card {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 10px 14px;
  background: #fff;
  max-width: 400px;
}

.ref-doc-card + .ref-doc-card {
  margin-top: 8px;
}

.ref-doc-meta {
  flex: 1 1 auto;
  min-width: 0;
  margin-right: 12px;
}

.ref-doc-name {
  display: block;
  font-weight: 400;
  font-size: 14px;
  color: #0f172a;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-doc-sub {
  font-size: 12px;
  color: #94a3b8;
  margin-top: -1px;
  line-height: 1.2;
}

.ref-doc-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  flex-shrink: 0;
}

.ref-doc-act {
  color: #526277;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

.ref-doc-act:hover {
  color: #6650EA;
}

.ref-doc-act .material-symbols-outlined {
  font-size: 18px;
}

/* 미리보기 = 우측 도킹 2분할 패널 (모달 대신, 대화 이어가기 가능) */
#main.split-open {
  display: flex;
  align-items: stretch;
}

#main.split-open > .contents-body {
  flex: 1 1 0;
  min-width: 0;
}

.doc-split-panel {
  display: none;
  flex-direction: column;
  height: 100dvh;
  flex: 0 0 var(--docv-w, 46%);
  min-width: 420px;
  max-width: 820px;
  background: #fff;
  container-type: inline-size;
}

#main.split-open > .doc-split-panel {
  display: flex;
  animation: docPanelIn 0.2s ease;
}

/* 좌우 폭 조절 divider (share-divider 패턴 — 1px 라인 + 중앙 그립) */
.docv-divider {
  display: none;
}

#main.split-open > .docv-divider {
  display: flex;
  flex: 0 0 12px;
  align-self: stretch;
  cursor: col-resize;
  position: relative;
  align-items: center;
  justify-content: center;
  background: #fff;
}

.docv-divider::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  background: #e2e8f0;
  transition: background 0.15s;
}

.docv-divider::after {
  content: "";
  position: relative;
  width: 5px;
  height: 36px;
  border-radius: 4px;
  background: #cbd5e1;
  border: 1px solid #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.15);
  transition: background 0.15s, height 0.15s;
}

.docv-divider:hover::before, .docv-divider.dragging::before {
  background: #6650EA;
}

.docv-divider:hover::after, .docv-divider.dragging::after {
  background: #6650EA;
  height: 48px;
}

@keyframes docPanelIn {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.docv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
}

.docv-body {
  flex: 1;
  display: flex;
  min-height: 0;
}

.docv-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 15px;
  color: #0f172a;
  min-width: 0;
}

.docv-title > span:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.docv-title .material-symbols-outlined {
  color: #DC2626;
  font-size: 22px;
  flex-shrink: 0;
}

.docv-title .docv-pages {
  color: #94a3b8;
  font-weight: 500;
  font-size: 13px;
  flex-shrink: 0;
}

.docv-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.docv-close {
  border: 0;
  background: transparent;
  color: #64748b;
  display: inline-flex;
  padding: 4px;
  border-radius: 6px;
  cursor: pointer;
}

.docv-close:hover {
  background: #f1f5f9;
  color: #0f172a;
}

/* 좌: 페이지 썸네일 — 실제 페이지의 축소본(ChatGPT 스타일). 패널 폭 480px 이상에서만 표시 */
.docv-thumbs {
  display: none;
  flex-direction: column;
  gap: 10px;
  width: 128px;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 12px 14px;
  background: #f8fafc;
  border-right: 1px solid #e2e8f0;
}

@container (min-width: 480px) {
  .docv-thumbs {
    display: flex;
  }
}
.docv-thumb {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  width: 100px;
  aspect-ratio: 210/297;
  flex-shrink: 0;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  background: #fff;
  transition: border-color 0.12s, box-shadow 0.12s;
}

.docv-thumb:hover {
  border-color: #cbd5e1;
}

.docv-thumb.is-active {
  border-color: #6650EA;
  box-shadow: 0 0 0 2px rgba(102, 80, 234, 0.28);
}

/* 실제 .docv-page 를 그대로 축소(scale)해 미니어처 렌더 */
.docv-thumb .docv-page {
  position: absolute;
  top: 0;
  left: 0;
  width: 620px;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: 0 0 0 0;
  padding: 40px 44px;
  transform: scale(0.1613);
  transform-origin: top left;
  pointer-events: none;
}

.docv-thumb-num {
  position: absolute;
  bottom: 3px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 9px;
  color: #94a3b8;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0));
}

.docv-thumb.is-active .docv-thumb-num {
  color: #6650EA;
  font-weight: 700;
}

/* 우: 본문 미리보기 — 전체 페이지 세로 스크롤 */
.docv-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #eef1f5;
}

.docv-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 22px;
}

.docv-page {
  max-width: 640px;
  margin: 0 auto;
  background: #fff;
  aspect-ratio: 210/297;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.1);
  padding: 40px 44px;
  line-height: 1.85;
}

.docv-page + .docv-page {
  margin-top: 20px;
}

.docv-page.is-ref {
  box-shadow: 0 0 0 2px rgba(102, 80, 234, 0.28), 0 6px 24px rgba(15, 23, 42, 0.1);
}

.docv-page h5 {
  font-weight: 800;
}

.docv-page h6 {
  font-weight: 700;
  margin-top: 20px;
}

.docv-page p {
  color: #475569;
  font-size: 14px;
}

.docv-page ol, .docv-page ul {
  color: #475569;
  font-size: 14px;
  padding-left: 20px;
}

.docv-page li {
  margin-bottom: 4px;
}

.docv-hl {
  background: #FEF3C7;
  border-radius: 3px;
  box-shadow: 0 0 0 3px #FEF3C7;
}

.docv-hl.pulse {
  animation: docvPulse 1.2s ease;
}

@keyframes docvPulse {
  0%, 100% {
    background: #FEF3C7;
    box-shadow: 0 0 0 3px #FEF3C7;
  }
  30% {
    background: #FCD34D;
    box-shadow: 0 0 0 5px #FCD34D;
  }
}
.docv-page-num {
  text-align: center;
  color: #94a3b8;
  font-size: 12px;
  margin-top: auto;
  padding-top: 20px;
  flex-shrink: 0;
}

/* 모바일(≤768px): 파일 열기 시 우측 도킹 대신 전체화면(새창처럼) + 썸네일 리스트 없음 */
@media (max-width: 768px) {
  #main.split-open > .doc-split-panel {
    position: fixed;
    inset: 0;
    z-index: 1050;
    width: 100vw;
    max-width: none;
    min-width: 0;
    height: 100dvh;
    flex: none;
    animation: docPanelUp 0.22s ease;
  }
  #main.split-open > .docv-divider {
    display: none;
  }
  .docv-thumbs {
    display: none !important;
  }
}
@keyframes docPanelUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* ========== 문서 영문 번역 (user_doc-translate / 요구사항 #005) ========== */
/* 좌측: 언어 설정 */
.tl-lang-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tl-lang-row .form-select {
  flex: 1;
}

/* 스왑 버튼: 시각 스타일은 표준 .btn-icon-only.btn-outline-gray, 여기선 레이아웃(정사각·정렬)만 */
.tl-lang-swap {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tl-lang-swap .material-symbols-outlined {
  font-size: 20px;
}

/* 좌측 '번역 정보'는 문서 초안 작성의 '문서 정보'와 동일하게 .dd-collapse-hd/.dd-sum-row 재사용 (별도 스타일 불필요) */
/* 우측 step1: 빈 상태(번역 미리보기 안내) */
.tl-empty {
  text-align: center;
  color: #94a3b8;
  max-width: 440px;
  padding: 24px;
}

.tl-empty .tl-globe {
  margin: 0 auto 16px;
  line-height: 1;
}

.tl-empty .tl-globe .material-symbols-outlined {
  font-size: 46px;
  color: #94a3b8;
  opacity: 0.5;
}

.tl-empty h5 {
  color: #334155;
  font-weight: 700;
  margin-bottom: 10px;
}

.tl-empty p {
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
}

/* 모바일(1단 스택): STEP1에서는 우측 '번역 미리보기' 안내 영역을 숨긴다.
   dd-cur-1 은 ddGoStep 이 스텝 전환 시 갱신 → STEP2/3 에서는 다시 표시됨. */
@media (max-width: 767.98px) {
  #tlSplit.dd-cur-1 .dd-right {
    display: none;
  }
}
/* 우측 step3: 상단 액션바 + 번역문/원문 2-panel (회의록 ms-rtop/ms-rcols 참고) */
/* .dd-rbody[data-step="3"] 의 기본 센터링(align/justify center) 오버라이드 → 자식 full-width, 좌측 정렬 */
/* 결과(step3)는 회의록 요약과 동일한 레이아웃(.ms-rtop/.ms-rcols/.ms-pages/.ms-full/.dd-result-doc)을 재사용한다.
   → 별도 박스 없이 A4 문서 시트만 표시. 제목(번역문/원문)은 시트 안이 아니라 시트 위(페이지 영역 위)에 배치. */
/* 상단 바 공통 스타일 (.ms-rtop 은 회의록과 공유되므로 번역 페이지(#tlSplit)에만 적용) */
.tl-rzone {
  display: flex;
  align-items: flex-end; /* 타이틀·버튼을 하단 기준으로 정렬 */
  min-width: 0;
}

.tl-rzone-right {
  gap: 12px;
}

/* 우존: 원문 타이틀(좌) + 액션 버튼(우끝). 원문 숨김 상태에서도 버튼은 우끝 유지 */
.tl-rzone-right .tl-ractions {
  margin-left: auto;
  flex-shrink: 0;
}

.tl-ractions {
  display: flex;
  align-items: center;
}

.tl-doc-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 16px;
  color: #0f172a;
}

/* 데스크톱(≥992): 상단 바를 아래 .ms-rcols 컬럼과 동일하게 좌/우 두 존(flex:1 + gap 20px)으로
   나눠, 번역문 타이틀은 좌측 페이지 위, 원문 타이틀은 우측 페이지 위에 정렬한다. */
@media (min-width: 992px) {
  #tlSplit .dd-rbody[data-step="3"] .ms-rtop {
    justify-content: flex-start;
    align-items: flex-end; /* 영역 세로 정렬: 하단 기준 */
    gap: 20px; /* .ms-rcols 컬럼 간격과 동일 → 존 경계가 컬럼 경계와 일치 */
    flex-wrap: nowrap;
  }
  #tlSplit .tl-rzone {
    flex: 1 1 0;
  }
}
/* 모바일(≤991): 번역문/원문 페이지가 세로로 스택되므로 좌/우 두 존 정렬을 해제하고,
   타이틀은 인라인 + 액션 버튼은 우측, 폭이 부족하면 다음 줄로 줄바꿈되게 한다. */
@media (max-width: 991.98px) {
  #tlSplit .dd-rbody[data-step="3"] .ms-rtop {
    justify-content: flex-start;
    align-items: center;
    gap: 8px 10px;
    flex-wrap: wrap;
  }
  #tlSplit .tl-rzone {
    align-items: center;
    flex: 0 1 auto;
  }
  #tlSplit .tl-rzone-right {
    flex: 1 1 auto; /* 남은 폭 차지 → 내부 버튼은 margin-left:auto 로 우측 정렬 */
  }
  #tlSplit .tl-doc-title {
    font-size: 14px;
  }
}
/* 언어 라벨: dark 뱃지(칩) */
.tl-lang-badge {
  font-weight: 500;
  font-size: 12px;
  color: #fff;
  background: #334155;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

/* 번역 결과: 제목↔시트 간격 축소. .ms-pages/.ms-full 은 회의록 페이지와 공유되므로
   번역 페이지 래퍼(#tlSplit)로 한정해 회의록에는 영향 없도록 한다. */
#tlSplit .ms-pages,
#tlSplit .ms-full {
  gap: 4px;
}

/* 번역 진행 로딩 아이콘: 한자(translate 아이콘 文A) 대신 한글+영문 글리프 "가A" */
.dd-docanim .dd-doc-ic.tl-lang-ic {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 1px;
  white-space: nowrap;
}

.tl-lang-ic > b {
  color: #6650EA;
}

/* ── LNB 스택 순서 (앱 전역) ─────────────────────────────────────────────
   .lnb 는 position:fixed 라 그 자체가 스택 컨텍스트를 만든다(z-index:auto = 0단계).
   그래서 내부 모바일 오프캔버스 메뉴(z-index:1045)가 이 컨텍스트에 갇혀,
   본문의 위치지정 요소(custom.css: .table tbody tr td{position:relative} 등)보다 아래로 깔렸다.
   → LNB 자체를 오프캔버스 레벨로 올려 메뉴가 항상 본문 위에 오게 한다.
   (모달 backdrop 1050 / 모달 1055 보다는 낮아 모달 동작에는 영향 없음) */
.lnb {
  z-index: 1045;
}

/* ========== 학습 관리 (user_learning / 요구사항 #007) ========== */
/* LNB 5번째 메뉴 '학습 관리' 아이콘 (custom.css 는 menu1~4 만 정의 → 여기서 추가) */
.main-menu.user .menu5::before {
  content: "\e80c";
}

/* 상단 액션(새 대화 생성)과 페이지 타이틀 사이 여백 — 대화함과 동일(.chat-area 의 margin-top:2rem + padding-top:.5rem = 2.5rem) */
.lm-page > h4 {
  margin-top: 2.5rem;
}

/* 좌(서비스 선택·학습 카테고리) / 우(학습 데이터 조회) 2분할 */
/* .contents-body 가 height:100dvh + flex-column 이므로, 남은 세로 공간을 .lm-split 이 모두 차지한다.
   → 좌측 박스는 브라우저 높이 끝까지 늘어나고, 카테고리 트리(.lm-tree)가 그 안에서 스크롤된다. */
.lm-split {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 16px;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
}

.lm-main {
  align-self: start;
} /* 우측(학습 데이터 조회)은 내용 높이 유지 */
/* 좌측은 한 박스 안에 '서비스 선택' + '학습 카테고리' 두 구획.
   구획 사이는 카드 폭 전체를 가로지르는 구분선(p-3 = 1rem 패딩만큼 음수 마진). */
.lm-side-sec + .lm-side-sec {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e2e8f0;
}

.lm-side-sec + .lm-side-sec {
  margin-left: -1rem;
  margin-right: -1rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* 박스 전체를 세로로 채우고, 두 번째 구획(학습 카테고리)이 남는 높이를 모두 가져간다 */
.lm-side {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.lm-side-sec + .lm-side-sec {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* 패널 제목 옆 개수 뱃지 (기획안 2·3) — 탭의 .cnt 는 .nav-underline 전용이라 badge 토큰을 쓴다 */
.lm-cnt {
  font-weight: 700;
  vertical-align: middle;
  margin-left: 2px;
}

/* 카테고리 트리 : .dd-tree(문서 초안 작성 학습 데이터 모달)와 동일 컴포넌트 + 스크롤 (기획안 2-2).
   .dd-tree 는 정렬 규칙만 담고 버튼 기본형은 .dd-ld-cat 에 있으므로, 같은 버튼 스타일을 여기 정의한다. */
.lm-tree button {
  display: flex;
  align-items: center;
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 14px;
  color: #475569;
  margin-bottom: 2px;
}

.lm-tree button:hover {
  background: #f1f5f9;
}

.lm-tree button.active {
  background: #eef2ff;
  color: #6650EA;
  font-weight: 700;
}

.lm-tree button > span:last-child {
  flex-shrink: 0;
  font-size: 12px;
  color: #94a3b8;
}

.lm-tree button.active > span:last-child {
  color: #6650EA;
}

.lm-tree {
  flex: 1 1 auto;
  min-height: 120px;
  overflow-y: auto;
  margin-top: 4px;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

.lm-tree::-webkit-scrollbar {
  width: 6px;
}

.lm-tree::-webkit-scrollbar-track {
  background: transparent;
}

.lm-tree::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.lm-tree::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.lm-none {
  font-size: 13px;
  color: #94a3b8;
  text-align: center;
  padding: 16px 0 4px;
  margin: 0;
}

/* 우측 툴바 : 검색(좌) + 업로드·삭제(우) */
.lm-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lm-search {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 380px;
}

.lm-toolbar-btns {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

.lm-toolbar-btns .btn {
  white-space: nowrap;
}

.lm-toolbar-btns .material-symbols-outlined {
  font-size: 18px;
  vertical-align: middle;
}

/* 비활성 버튼(선택된 데이터가 없을 때의 '데이터 삭제') — 같은 outline-gray 버튼이 나란히 있어
   부트스트랩 기본 opacity .65 만으로는 구분이 약하므로 색·배경까지 확실히 낮춘다 */
.lm-toolbar-btns .btn:disabled,
.lm-toolbar-btns .btn.disabled {
  opacity: 1;
  color: #cbd5e1;
  border-color: #e2e8f0;
  background: #f8fafc;
  cursor: default;
}

/* 선택 개수 (기획안 5-1) — '데이터 삭제' 버튼 바로 왼쪽. 액션이 아니라 정보성이므로 회색 톤 */
.lm-sel {
  font-size: 13px;
  font-weight: 400;
  color: #64748b;
  white-space: nowrap;
  margin-right: 2px;
}

/* 학습 데이터 목록 */
.lm-tbl {
  table-layout: fixed;
}

.lm-tbl td.lm-name {
  text-align: left;
  max-width: none;
}

.lm-tbl td.lm-date {
  font-size: 13px;
  color: #64748b;
  white-space: nowrap;
}

.lm-empty {
  color: #94a3b8;
  font-size: 14px;
  padding: 34px 0 !important;
}

/* 파일 미리보기 모달 (기획안 7-1) : A4 시트는 참고 문서 미리보기의 .docv-page 재사용 */
.lm-prev-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 15px;
  color: #0f172a;
  min-width: 0;
}

.lm-prev-title .material-symbols-outlined {
  color: #DC2626;
  font-size: 22px;
  flex-shrink: 0;
}

.lm-prev-title > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lm-prev-body {
  background: #eef1f5;
  padding: 20px;
  max-height: calc(100vh - 190px);
  overflow-y: auto;
}

/* 닫기(X)는 헤더 우측 끝으로 */
#lmPreview .modal-header .docv-close {
  margin-left: auto;
}

/* 문서 시트 : .docv-page(A4 210:297) 재사용. 높이를 화면에 맞추고 폭은 비율로 따라오게 해서
   A4 한 장이 통째로 보이도록 한다(내용은 이 안에 다 들어가는 분량으로 유지). */
.lm-prev-body .docv-page {
  width: min(100%, (100vh - 250px) * 210 / 297);
  height: auto;
  aspect-ratio: 210/297;
  margin: 0 auto;
  padding: 34px 38px;
  /* A4 비율을 유지해야 하므로, 시트가 작아지는 좁은 화면에서는 시트 안에서 스크롤해 전체 텍스트를 읽는다
     (데스크톱 크기에서는 한 장에 다 들어가 스크롤이 생기지 않음) */
  overflow-y: auto;
  overscroll-behavior: contain;
}

.lm-prev-body .docv-page > h3 {
  font-size: 17px;
  font-weight: 800;
  text-align: center;
  margin-bottom: 18px;
  word-break: break-all;
}

.lm-prev-text h6 {
  font-weight: 700;
  font-size: 13px;
  color: #0f172a;
  margin: 14px 0 4px;
}

.lm-prev-text h6:first-child {
  margin-top: 0;
}

.lm-prev-text p {
  color: #475569;
  font-size: 12px;
  line-height: 1.75;
  margin-bottom: 0;
}

.lm-prev-foot {
  text-align: center;
  font-size: 12px;
  color: #94a3b8;
  margin: 16px 0 0;
}

/* 모바일 : 1단 스택 */
@media (max-width: 991.98px) {
  /* 1단 스택 : html·body 가 overflow:hidden 이라 페이지 자체는 스크롤되지 않는다(앱 공통).
     그래서 user_service/user_doc-draft 의 .chat-area > .scroll 과 동일하게, 제목 아래 본문 영역이
     남은 높이를 차지하며 그 안에서만 스크롤되게 한다(안 그러면 표가 화면 밖으로 잘려 보이지 않음).
     카테고리 트리는 목록이 길어 표를 너무 아래로 밀어내므로 250px 고정 + 자체 스크롤로 둔다. */
  .lm-split {
    grid-template-columns: 1fr;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    align-items: start;
    align-content: start;
  }
  /* 데스크톱에서 높이를 채우려고 준 flex/min-height:0 을 해제하지 않으면
     그리드 행이 내용 높이로 잡히지 않고 좌측 박스가 찌그러져 우측과 겹친다 */
  .lm-side {
    display: block;
    min-height: auto;
  }
  /* 그리드 아이템 기본 min-width:auto 때문에 내용 최소폭만큼 칸이 벌어져 가로로 삐져나온다 → 0 으로 풀어 화면폭에 맞춘다 */
  .lm-split > * {
    min-width: 0;
  }
  .lm-side-sec, .lm-tree, .lm-main {
    min-width: 0;
  }
  .lm-side-sec + .lm-side-sec {
    display: block;
    flex: 0 0 auto;
  }
  .lm-tree {
    flex: 0 0 auto;
    height: 250px;
    max-height: 250px;
    overflow-y: auto;
  }
  .lm-toolbar {
    flex-wrap: wrap;
  }
  .lm-search {
    max-width: none;
    flex: 1 1 100%;
  }
  .lm-toolbar-btns {
    margin-left: 0;
    width: 100%;
  }
  .lm-toolbar-btns .btn {
    flex: 1 1 0;
  }
  .lm-sel {
    flex: 1 1 100%;
    text-align: right;
    margin-right: 0;
  }
}
/* 모바일 표 : custom.css 의 앱 표준 반응형 테이블(@media ≤768, .user-page tr flex-wrap)을 따르되,
   표준이 5열 기준(td 1·2 전체폭 / 3~5 33.33%)이라 7열인 이 표는 행 구성을 다시 지정한다.
   1행 [체크박스 · 데이터 명] / 2행 [카테고리 · 등록 일시] / 3행 [학습 여부 · 파일 크기 · 미리보기] */
@media screen and (max-width: 768px) {
  #main .lm-tbl tbody td:nth-child(1) {
    display: inline-flex;
    align-items: center;
    width: 40px;
  }
  #main .lm-tbl tbody td:nth-child(2) {
    display: inline-flex;
    align-items: center;
    width: calc(100% - 40px);
    max-width: calc(100% - 40px) !important;
    font-weight: 700;
    color: #0f172a;
  }
  #main .lm-tbl tbody td:nth-child(3) {
    display: inline-flex;
    width: 40%;
    border-top: solid 1px #e2e8f0;
  }
  #main .lm-tbl tbody td:nth-child(4) {
    display: inline-flex;
    width: 60%;
    border-top: solid 1px #e2e8f0;
  }
  #main .lm-tbl tbody td:nth-child(5),
  #main .lm-tbl tbody td:nth-child(6) {
    display: inline-flex;
    align-items: center;
    width: 34%;
    border-top: solid 1px #e2e8f0;
  }
  #main .lm-tbl tbody td:nth-child(7) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32%;
    border-top: solid 1px #e2e8f0;
  }
  /* 아이콘 버튼이 custom.css 에서 width:100% 로 늘어나는 것 방지 */
  #main .lm-tbl tbody .convo-act {
    display: inline-flex;
    width: auto;
  }
  /* 안내 문구 행은 전체폭 */
  #main .lm-tbl tbody td.lm-empty {
    display: block;
    width: 100%;
    text-align: center;
  }
}
/* 미리보기 모달(모바일 전체화면) : 시트 여백 축소 */
@media (max-width: 575.98px) {
  .lm-prev-body {
    padding: 12px;
  }
  .lm-prev-body .docv-page {
    width: 100%;
    padding: 22px 20px;
  }
  .lm-prev-body .docv-page > h3 {
    font-size: 15px;
    margin-bottom: 12px;
  }
  .lm-prev-text h6 {
    font-size: 12px;
    margin: 11px 0 3px;
  }
  .lm-prev-text p {
    font-size: 11.5px;
    line-height: 1.65;
  }
}