/* =========================================================
   milestone.css (Refactored & Cleaned - Final Consolidated)
   - JS???욎뿬 ?덈뜕 <style> 二쇱엯 肄붾뱶源뚯? milestone.css濡??닿?/?듯빀
   - ?숈씪 ?붿냼??遺꾩궛??洹쒖튃?€ ?쒗븳 怨년€앹쑝濡??⑹묠
   - ???뺣━ 湲곗?: "?뚯씪 ?섎떒 洹쒖튃" + "!important" 理쒖슦??
   ========================================================= */

/* =========================================================
   0) Root & Size Tokens
   ========================================================= */
#mainBoardContent.view-mode-milestone {
  /* Layout */
  display: flex;
  flex-direction: column;
  min-height: 0;

  /* Spacing */
  --ms-pad-x: 24px;
  --ms-pad-top: 28px;

  /* Bottom extra space (B/D scroll safety) */
  --ms-bottom-gap: 18px; /* ?꾩슂?섎㈃ 16~22 ?ъ씠 */

  /* Grid Layout */
  --ms-left-col: 260px;

  /* Dimensions */
  --ms-mini-panel-h: 112px;

 
  --ms-row-cat-h: 44px;
  --ms-row-team-h: 44px;

  /* Design Tokens */
  --ms-card-radius: 12px;
  --ms-group-radius: 16px;
  --ms-group-bg: rgb(243, 243, 247);
  --ms-card-bg: #fdfbff;
  --ms-line: rgba(0, 0, 0, 0.06);
  --ms-line-soft: rgba(0, 0, 0, 0.04);

  /* Timeline Settings */
  --ms-days: 42;
  --ms-day-w: 40px;

  /* ??Precision: day/week/timeline width */
  --ms-week-w: calc(var(--ms-day-w) * 7);
  --ms-timeline-w: calc(var(--ms-days) * var(--ms-day-w));

  /* Selection / Hover (Panel B + D 怨듯넻) */
  --ms-accent: #2563eb;

  --ms-hover-bg: rgba(37, 99, 235, 0.05);
  --ms-hover-bar: rgba(37, 99, 235, 0.35);

  --ms-sel-cat-bg: var(--ms-sel-team-bg-solid);          /* 移댄뀒怨좊━ ?⑥씪 ?좏깮(A) */
  --ms-sel-team-bg: rgba(37, 99, 235, 0.035);            /* ?€ ?좏깮(B) - ?섏쐞 移댄뀒怨좊━ */
  --ms-sel-team-hdr-bg: rgba(37, 99, 235, 0.045);        /* ?€ ?좏깮(B) - ?€ ?ㅻ뜑 */
  --ms-sel-team-bg-solid: #f3f7ff;
  --ms-sel-team-hdr-bg-solid: #eaf1ff;
  --ms-sel-line-cat: rgba(0,0,0,0.05);
  --ms-sel-line-team: rgba(0,0,0,0.075);
  --ms-sel-outline: rgba(37, 99, 235, 0.18);
}


/* =========================================================
   1) View Mode Switch (Hide Kanban UI)
   ========================================================= */
#mainBoardContent.view-mode-milestone > .top-app-bar,
#mainBoardContent.view-mode-milestone > .progress-section,
#mainBoardContent.view-mode-milestone > .input-area-wrapper,
#mainBoardContent.view-mode-milestone > .board {
  display: none !important;
}

#mainBoardContent #milestoneBoard {
  display: none !important;
}

/* Milestone Root */
#mainBoardContent.view-mode-milestone #milestoneBoard {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--ms-pad-top) var(--ms-pad-x) 0;
  box-sizing: border-box;
  overflow: hidden;
  background: transparent;
}

/* =========================================================
   2) Top Header (Title + Actions)
   ========================================================= */
.ms-top-bar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: -6px;
  margin-bottom: 20px;
  padding: 0 4px;
  box-sizing: border-box;
}

.ms-header-title {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

#mainBoardContent.view-mode-milestone .ms-header-title .project-title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--md-sys-color-on-surface, #0f172a);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  outline: none;
  border: none;
  background: transparent;
  cursor: text;
  max-width: min(42vw, 560px);
}

#mainBoardContent.view-mode-milestone .ms-header-title .ms-header-pm {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  flex: 0 0 auto;
}

#mainBoardContent.view-mode-milestone .ms-header-title .ms-header-pm-label {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
}

#mainBoardContent.view-mode-milestone .ms-header-title .ms-header-pm-btn {
  background: transparent;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
  max-width: clamp(84px, 14vw, 200px); /* 담당자명 + 약간의 여유 */
  border-radius: 999px;
}

#mainBoardContent.view-mode-milestone .ms-header-title .ms-header-pm-btn:hover {
  background: rgba(120,120,120,0.1);
}

#mainBoardContent.view-mode-milestone .ms-header-title .ms-header-pm-btn-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  color: #64748b; /* Task Management 드롭다운 버튼 톤과 동일 */
  position: relative;
  top: -1px; /* PM 라벨과 수평 정렬 보정 */
}

#mainBoardContent.view-mode-milestone .ms-header-title .ms-header-pm-btn.has-value svg {
  display: none; /* PM 선택 시 드롭다운 표시(chevron) 숨김 */
}

html[data-theme="dark"] #mainBoardContent.view-mode-milestone .ms-header-title .ms-header-pm-label,
[data-theme="dark"] #mainBoardContent.view-mode-milestone .ms-header-title .ms-header-pm-label {
  color: rgba(255,255,255,0.70);
}

html[data-theme="dark"] #mainBoardContent.view-mode-milestone .ms-header-title .ms-header-pm-btn-text,
[data-theme="dark"] #mainBoardContent.view-mode-milestone .ms-header-title .ms-header-pm-btn-text {
  color: #a78bfa;
}

#mainBoardContent.view-mode-milestone .ms-top-actions .my-task-btn.ms-neutral-btn {
  color: var(--md-sys-color-on-surface, inherit);
}

#mainBoardContent.view-mode-milestone .ms-top-actions .ms-mode-btn {
  border: none;
  background: transparent;
  color: var(--md-sys-color-on-surface, inherit);
  font-weight: 700;
}

/* =========================================================
   3) Stats Bar (KPI Cards)
   ========================================================= */
.ms-stats-bar-row {
  width: 100%;
  margin-bottom: 12px;
}

.ms-progress-card {
  border-radius: 16px;
  padding: 10px 14px;
  background: var(--ms-group-bg);
  border: none;
  box-shadow: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.ms-progress-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--ms-card-bg);
}

.ms-progress-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
.ms-progress-head .ttl { font-size: 12px; font-weight: 700; color: #1e293b; }
.ms-progress-head .meta { font-size: 11px; font-weight: 500; color: #64748b; }

.ms-progress-row { display: flex; align-items: center; gap: 10px; }
.ms-progress-track {
  flex: 1;
  height: 6px;
  border-radius: 99px;
  background: #ffffff;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.ms-progress-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #3b82f6, #4facfe);
}
.ms-progress-pct {
  position: absolute;
  top: 10px; right: 14px;
  font-size: 16px; font-weight: 800; color: #3b82f6; line-height: 1;
}

/* =========================================================
   4) Body Layout (Grid)
   ========================================================= */
#mainBoardContent.view-mode-milestone .ms-body-grid {
  display: grid;
  grid-template-columns: var(--ms-left-col) 1fr;
  gap: 14px;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 0;
}

#mainBoardContent.view-mode-milestone .ms-group {
  background: var(--ms-group-bg);
  border-radius: var(--ms-group-radius);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  height: 100%;
}

#mainBoardContent.view-mode-milestone .ms-panel-card {
  background: var(--ms-card-bg);
  border-radius: var(--ms-card-radius);
  padding: 14px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Panel Heights */
#mainBoardContent.view-mode-milestone .ms-panel-a,
#mainBoardContent.view-mode-milestone .ms-panel-c { flex: 0 0 var(--ms-mini-panel-h); }

#mainBoardContent.view-mode-milestone .ms-panel-b,
#mainBoardContent.view-mode-milestone .ms-panel-d { flex: 1 1 auto; min-height: 0; }

/* =========================================================
   5) Panel A: Project Date & Controls (Left Top) - Consolidated
   ========================================================= */
#mainBoardContent.view-mode-milestone #msBodyLeftTop.ms-panel-a{
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 14px;
  padding: 12px;
  box-sizing: border-box;
}

#msBodyLeftTop .ms-panel-a-wrap{
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  height: 100%;
}

#msBodyLeftTop .ms-pa-slot{ width:100%; box-sizing:border-box; }
#msBodyLeftTop .ms-pa-slot-3{ margin-top:auto; }

#msBodyLeftTop .ms-pa-row{
  margin-bottom: 6px;
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 0;
  font-size: 13px;
  line-height: 1.2;
}

#msBodyLeftTop .ms-pa-label{
  display: inline-block;
  width: auto;                 /* ?쇰꺼 ??? JS?먯꽌 留욎떠以?*/
  white-space: nowrap;
  font-weight: 700;
  color: rgba(0,0,0,0.55);
  letter-spacing: -0.2px;
  flex: 0 0 auto;
}

/* ??媛??곸뿭(湲곌컙/?붿뿬?? */
#msBodyLeftTop .ms-pa-value{
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 1px;                    /* ??媛꾧꺽 理쒖냼??*/
  color: rgba(0,0,0,0.90);
  min-width: 0;
  flex: 1 1 auto;
  white-space: nowrap;
}

/* ???좎쭨 ?대┃ ?섑띁 */
#mainBoardContent.view-mode-milestone #msBodyLeftTop .ms-pa-date-wrap{
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;              /* ??鍮?怨듦컙 踰뚯뼱吏?諛⑹? ?듭떖 */
  padding: 2px 3px;
  border-radius: 8px;
  cursor: pointer;
  box-sizing: border-box;
  min-height: 22px;
}

/* ???좎쭨 ?띿뒪??*/
#msBodyLeftTop .ms-pa-date{
  font-weight: 800;
  padding: 1px 2px;            /* ??以꾩엫 */
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  line-height: 1;              /* ???믪씠 ?붾뱾由?諛⑹? */
}

/* ?좎쭨 hover ???뚮??됱쑝濡??대┃ 媛€???좏샇) */
#msBodyLeftTop .ms-pa-date-wrap:hover .ms-pa-date{
  color: #2563eb;
}

/* ??"~" 媛꾧꺽 */
#msBodyLeftTop .ms-pa-tilde{
  color: rgba(0,0,0,0.35);
  display: inline-block;
  margin: 0;
}

/* ???щ챸 date input(議댁옱留? - ?대┃?€ wrap?먯꽌 JS媛€ 泥섎━ */
#mainBoardContent.view-mode-milestone #msBodyLeftTop .ms-pa-date-input{
  position: absolute;
  inset: -6px 0;
  width: 100%;
  height: calc(100% + 12px);
  min-height: 22px;
  opacity: 0.001;
  border: 0;
  background: transparent;
  z-index: 5;
  pointer-events: none;
}

/* ???붿뿬??*/
#msBodyLeftTop .ms-pa-remaining{
  font-weight: 900;
  color: #2563eb;
  display: inline-block;
  padding-left: 5.5px;         /* (?꾩옱 ?뺣젹 ?좎?) */
}

/* Add Team 踰꾪듉 */
#msBodyLeftTop .ms-pa-actions{ margin-top: 10px; width:100%; }
#msBodyLeftTop .ms-add-cat-btn{
  width: 100%;
  height: 30px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid rgba(37, 99, 235, 0.55);
  color: rgba(29, 78, 216, 0.95);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.2s, transform 0.05s;
  -webkit-text-fill-color: rgba(29, 78, 216, 0.95) !important;
}
#msBodyLeftTop .ms-add-cat-btn:hover{ background: rgba(37, 99, 235, 0.06); }
#msBodyLeftTop .ms-add-cat-btn:active{ transform: translateY(1px); }

/* =========================================================
   6) Panel B: Category List (Left Bottom)
   ========================================================= */

/* Panel B Container Reset (Full Bleed) */
#mainBoardContent.view-mode-milestone #msBodyLeftBottom.ms-panel-b {
  /* ??D ?곸뿭 ?섎떒 媛€濡??ㅽ겕濡ㅻ컮 ?믪씠留뚰겮 諛붾떏 ?щ갚 ?뺣낫(以?源⑥쭚 諛⑹?) */
  padding: 0 0 16px 0 !important;   /* ?꾩슂?섎㈃ 16 ??18濡쒕쭔 諛붽씀硫???*/

  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* B(?쇱そ 由ъ뒪?? 留??꾨옒 ?щ갚 */
#mainBoardContent.view-mode-milestone #msBodyLeftBottom .ms-category-list{
  padding-bottom: var(--ms-bottom-gap);
  box-sizing: border-box;
}

/* D(?ㅻⅨ履??€?꾨씪?? 留??꾨옒 ?щ갚 */
#mainBoardContent.view-mode-milestone #msBodyRightBottom .ms-d-content{
  padding-bottom: var(--ms-bottom-gap);
  box-sizing: border-box;
}

.ms-category-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  flex: 1;
}

/* Individual Item Row */
.ms-category-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--ms-row-cat-h);
  min-height: var(--ms-row-cat-h);
  padding: 0 12px;
  border-bottom: 1px solid var(--ms-line-soft);
  background: transparent;
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
  box-sizing: border-box;
}

/* Hover Effect (Clean - No Strip, No Shift) */
.ms-category-item:hover {
  background-color: var(--ms-hover-bg);
  box-shadow: inset 2px 0 0 var(--ms-hover-bar);
}

/* ???€ ?좏깮(B) - 諛곌꼍 媛뺤“留?諛붾뒗 ?놁쓬) */
#msBodyLeftBottom .ms-category-item.is-team-selected,
#msBodyLeftBottom .ms-category-item.is-team-selected:hover{
  background-color: var(--ms-sel-team-bg-solid) !important;
  box-shadow: none !important;  /* ???€ ?좏깮?€ 醫뚯륫 諛??몃줈 媛뺤“) ?놁쓬 */
}

/* ???€ ?ㅻ뜑???댁쭩 ???낃쾶 */
#msBodyLeftBottom .ms-category-item.ms-team-header.is-team-selected,
#msBodyLeftBottom .ms-category-item.ms-team-header.is-team-selected:hover{
  background-color: var(--ms-sel-team-hdr-bg-solid) !important; /* ??D?곸뿭 team row?€ ?숈씪 */
  box-shadow: none !important;
}

/* ??移댄뀒怨좊━ ?⑥씪 ?좏깮(A) - ??媛뺥븯寃?+ ?쇱そ 諛?*/
.ms-category-item.active,
.ms-category-item.is-selected,
.ms-category-item.active:hover,
.ms-category-item.is-selected:hover {
  /* ?⑤꼸 D?€ ?숈씪???щ챸??諛곌꼍???곸슜 */
  background-color: rgba(37, 99, 235, 0.08) !important;
  box-shadow: inset 3px 0 0 var(--ms-accent);
}

/* Text Content */
.ms-cat-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.ms-cat-title {
  display: block;
  font-size: 13px;
  color: #1e293b;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.3px;
  white-space: nowrap;      
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Controls (Hover to Show) */
.ms-cat-controls {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.2s;
}
.ms-category-item:hover .ms-cat-controls { opacity: 1; }

.ms-cat-controls button {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 10px;
  color: #94a3b8;
  padding: 4px;
}
.ms-cat-controls button:hover {
  color: #3b82f6;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 4px;
}
.ms-cat-controls button.del-btn:hover { color: #ef4444; }

/* ??移댄뀒怨좊━(?섏쐞 row)?먯꽌????踰꾪듉 hover ???쒖떆 */
.ms-category-item.ms-tree-child:hover .ms-more-icon,
.ms-category-item.ms-tree-child .ms-header-controls.is-menu-open .ms-more-icon{
  opacity: 1;
}

/* ??移댄뀒怨좊━ ?몄쭛(?붾툝?대┃/硫붾돱濡?吏꾩엯) ?? 寃€?€ ?ъ빱??諛뺤뒪 ?€???섍?踰쇱슫 ?몄쭛 ?ㅽ??쇄€?*/
.ms-category-item.ms-tree-child.is-editing .ms-cat-title{
  background: rgba(37, 99, 235, 0.06);
  border-radius: 8px;
  padding: 2px 6px;
}

.ms-cat-title[contenteditable="true"]:focus{
  outline: none;
}

/* (?좏깮) ?몄쭛 以?而ㅼ꽌/?좏깮 ?먮굦 */
.ms-cat-title[contenteditable="true"]{
  cursor: text;
}

/* ---------------------------------------------------------
   Team Header & Tree Style
   --------------------------------------------------------- */
.ms-category-item.ms-team-header {
  background-color: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  color: #334155;
  font-weight: 800;
  font-size: 13px;
  padding-left: 12px;
  padding-right: 12px;
  cursor: default;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ms-category-item.ms-team-header .ms-team-title .text { color: #2563eb; }

/* Panel B ?€ ?ㅻ뜑 援щ텇??= Panel D(0.10)?€ ?숈씪?섍쾶 */
#msBodyLeftBottom .ms-category-item.ms-team-header{
  border-top: 0 !important; /* ??援щ텇?좎? ?쒕컮濡????됱쓽 ?섎떒?졻€앹씠 ?대떦?섍쾶 ?댁꽌 D?€ ?숈씪?섍쾶 */
  border-bottom: 1px solid var(--ms-line-soft) !important;
}

/* 湲곗〈???쒕컮濡??????섎떒?졻€앹쓣 吏€?곕뜕 泥섎━瑜??섎룎由?*/
#msBodyLeftBottom .ms-category-item.ms-tree-child:has(+ .ms-category-item.ms-team-header){
  border-bottom-color: var(--ms-line-soft) !important;
}

/* 泥??€ ?ㅻ뜑??留????좎씠 嫄곗뒳由щ㈃ ?쒓굅(?좏깮) */
#msBodyLeftBottom .ms-category-item.ms-team-header:first-child{
  border-top: 0;
}

.ms-team-title { display: flex; align-items: center; min-width: 0; }
.ms-team-title .text {
  margin-right: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ms-accordion-arrow{
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;            /* ???쇨컖???ъ씠利??댁쭩 異뺤냼 */
  line-height: 1;
  margin-right: 6px;
  color: #64748b;
  transform: translateY(1px); /* ???€紐낃낵 ?섑룊 留욎땄(?댁쭩 ?꾨옒濡? */
  flex: 0 0 auto;
}

/* Count Badge */
.ms-team-count{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* ???뚯빟 ?뺥깭 */
  height: 18px;
  padding: 0 9px;          /* 醫뚯슦 ?щ갚???섎젮 ?뚯빟泥섎읆 */
  min-width: 0;            /* ?먰삎 媛뺤젣(min-width) ?쒓굅 */
  border-radius: 999px;    /* ?뚯빟 */

  /* ?띿뒪??*/
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;

  /* ?됱긽(湲곗〈 ???좎?) */
  color: #94a3b8;
  background: #e2e8f0;

  /* ???댁쭩 ?꾨옒濡??대젮???€紐낃낵 ?섑룊 留욎땄 */
  transform: translateY(1px);
}

/* Header Controls (...) */
.ms-header-controls {
  position: relative;
  display: flex;
  align-items: center;
  opacity: 1;
  transition: none;
  cursor: pointer;
}
.ms-more-icon {
  font-size: 14px;
  color: #94a3b8;
  padding: 4px;
  border-radius: 4px;
  font-weight: bold;
  letter-spacing: 1px;

  opacity: 0;
  transition: none;
}

/* hover ???꾩씠肄??쒖떆 + 硫붾돱 ?대┝ ?곹깭?먯꽌???쒖떆 */
.ms-team-header:hover .ms-more-icon,
.ms-header-controls.is-menu-open .ms-more-icon {
  opacity: 1;
}

.ms-more-icon:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: #3b82f6;
}

/* Dropdown Menu */
.ms-header-menu{
  position: absolute;
  right: 0;
  top: 100%;                 /* ???몃━嫄???踰꾪듉) 諛붾줈 ?꾨옒 湲곗? */

  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  min-width: 140px;
  z-index: 1000;
  padding: 4px;
  overflow: hidden;

  /* ???④?(?덉씠?꾩썐 ?딄? ?좊컻?섎뒗 display:none 湲덉?) */
  opacity: 0;
  pointer-events: none;

  /* ???쒕찓???믪씠(100%)?앸줈 諛€吏€ 留먭퀬, ?댁쭩留??대룞 */
  transform: translateY(-4px);
  transition: opacity 120ms ease, transform 120ms ease;
  will-change: transform, opacity;
}

/* ???꾨옒履?怨듦컙??遺€議깊븷 ?뚮뒗 ?꾨줈 */
.ms-header-controls.menu-up .ms-header-menu{
  top: auto;
  bottom: 100%;              /* ???몃━嫄?諛붾줈 ??湲곗? */
  transform: translateY(4px);
}

/* ??Hover / Focus ???쒖떆 (???꾨옒 紐⑤몢 transform=0?쇰줈 ?섎텤?댁꽌???대┝) */
.ms-header-controls.is-menu-open .ms-header-menu{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* ???꾨줈 ?⑤뒗 寃쎌슦???숈씪?섍쾶(?대┃ ??0?쇰줈) */
.ms-header-controls.menu-up.is-menu-open .ms-header-menu{
  transform: translateY(0);
}

.ms-header-menu button {
  background: transparent; border: none; text-align: left;
  padding: 8px 12px; font-size: 12px; color: #334155;
  cursor: pointer; border-radius: 4px; white-space: nowrap;
}
.ms-header-menu button:hover { background-color: #f1f5f9; color: #3b82f6; }
.ms-header-menu button.del { color: #ef4444; }
.ms-header-menu button.del:hover { background-color: #fef2f2; }

/* Tree Child Style */
.ms-category-item.ms-tree-child {
  padding-left: 36px !important;
  border-bottom: 1px solid var(--ms-line-soft);
}

/* ???€ ?묓옒 ?곹깭硫? ?대떦 ?€???섏쐞 移댄뀒怨좊━ ?④? */
.ms-category-item.ms-tree-child.is-collapsed-child{
  display: none !important;
}

/* (?좏깮) ?€ ?ㅻ뜑媛€ ?대┃ 媛€?ν븯?ㅻ뒗 ?먮굦 */
.ms-category-item.ms-team-header{
  cursor: pointer;
}

/* ??湲곗〈 ?몃━ 爰얠엫???몃줈/媛€濡? ?쒓굅 */
.ms-tree-child::before,
.ms-tree-child::after {
  content: none !important;
}

/* =========================================================
   7) Panel C: Ruler (Right Top)
   ========================================================= */
#mainBoardContent.view-mode-milestone .ms-panel-card.ms-panel-c { padding: 0; overflow: hidden; }
#mainBoardContent.view-mode-milestone #msRuler { width: 100%; height: 100%; }
#mainBoardContent.view-mode-milestone .ms-ruler-box{
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: grid;

  /* ???곗썡 0.9 / 二쇱감 0.9 / ?쇱옄?붿씪 1.2 (利?9:9:12 鍮꾩쑉) */
  grid-template-rows: 9fr 9fr 12fr;
}
#mainBoardContent.view-mode-milestone .ms-ruler-months,
#mainBoardContent.view-mode-milestone .ms-ruler-weeks,
#mainBoardContent.view-mode-milestone .ms-ruler-days { display: grid; }

/* Ruler Cells */
#mainBoardContent.view-mode-milestone .ms-ruler-months { 
  border-bottom: none !important; 
}
#mainBoardContent.view-mode-milestone .ms-ruler-month {
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #2563eb;
  border-left: 1px solid rgba(0, 0, 0, 0.12); /* ????寃쎄퀎 = 1px */
}
/* ????寃쎄퀎??1???꾩튂)留??먭퍖寃?*/
#mainBoardContent.view-mode-milestone .ms-ruler-day.month-start{
  border-left-width: 1px;
  border-left-color: rgba(0, 0, 0, 0.12);
}

#mainBoardContent.view-mode-milestone .ms-ruler-month:first-child { border-left: none; }

#mainBoardContent.view-mode-milestone .ms-ruler-weeks{
  border-bottom: none !important;
  background: rgb(243, 243, 247);
}
#mainBoardContent.view-mode-milestone .ms-ruler-week {
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: rgba(15, 23, 42, 0.70);
  border-left: 1px solid rgba(96, 96, 96, 0.04);
}
#mainBoardContent.view-mode-milestone .ms-ruler-week:first-child { border-left: none; }

#mainBoardContent.view-mode-milestone .ms-ruler-day{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;      /* ???꾨옒濡?遺숈엫 */
  gap: 2px;
  padding: 0 0 6px;              /* ???꾨옒 ?щ갚留??댁쭩 */
  border-left: 1px solid rgba(0, 0, 0, 0.05);
}
#mainBoardContent.view-mode-milestone .ms-ruler-day:first-child { border-left: none; }
#mainBoardContent.view-mode-milestone .ms-ruler-daynum { font-size: 11px; font-weight: 800; color: rgba(15, 23, 42, 0.85); line-height: 1; }
#mainBoardContent.view-mode-milestone .ms-ruler-dow { font-size: 10px; font-weight: 700; color: rgba(100, 116, 139, 0.95); line-height: 1; }

/* Weekend & Today */
#mainBoardContent.view-mode-milestone .ms-ruler-day.weekend .ms-ruler-daynum,
#mainBoardContent.view-mode-milestone .ms-ruler-day.weekend .ms-ruler-dow { color: #ef4444; }
#mainBoardContent.view-mode-milestone .ms-ruler-day.is-today { background-color: #dbeafe; }
#mainBoardContent.view-mode-milestone .ms-ruler-day.is-today .ms-ruler-daynum,
#mainBoardContent.view-mode-milestone .ms-ruler-day.is-today .ms-ruler-dow { color: #2563eb; font-weight: 800; }

#mainBoardContent.view-mode-milestone .ms-ruler-week.month-start {
  border-left-width: 1px;
  border-left-color: rgba(0, 0, 0, 0.12);
}

/* 異붽?: 遺꾧린 紐⑤뱶?먯꽌??猷곕윭(?ㅻ뜑)?????쒖옉?좊룄 寃뱀튂吏€ ?딄쾶 ?쒓굅 */
#mainBoardContent.view-mode-milestone #milestoneBoard.is-zoom-quarter .ms-ruler-week.month-start {
  border-left: none !important;
}

/* ??Week boundary contrast (1px ?좎?) */
#mainBoardContent.view-mode-milestone .ms-ruler-day.week-start:not(.month-start){
  border-left-color: rgba(0,0,0,0.10); /* 湲곗〈 0.05蹂대떎 吏꾪븯寃?*/
}

/* (二쇱감 ???먯껜??議곌툑 ?먮졆?섍쾶) */
#mainBoardContent.view-mode-milestone .ms-ruler-week{
  border-left-color: rgba(0,0,0,0.08); /* 湲곗〈 0.04蹂대떎 吏꾪븯寃?*/
}

/* ??Dark mode: week-start留??좎?(二쇱감 ?됱? ?섎떒 理쒖쥌媛믪쑝濡??뺣━) */
html[data-theme="dark"] #mainBoardContent.view-mode-milestone .ms-ruler-day.week-start:not(.month-start){
  border-left-color: rgba(255,255,255,0.14);
}

/* =========================================================
   8) Panel D: Timeline Body (Right Bottom)
   ========================================================= */
#mainBoardContent.view-mode-milestone .ms-panel-card.ms-panel-d { position: relative; padding: 0; overflow: hidden; }

/* Background Grid */
#mainBoardContent.view-mode-milestone .ms-timeline-bg {
  display: grid;

  /* ??1fr 湲덉?: 42移몄쓣 day-w ?쎌?濡?怨좎젙 */
  grid-template-columns: repeat(var(--ms-days), var(--ms-day-w));

  /* ???€?꾨씪???ㅼ젣 ??쓣 怨좎젙(???⑦꽩/?붽꼍怨??덉씠??湲곗? ???듭씪) */
  width: var(--ms-timeline-w);
  min-width: var(--ms-timeline-w);

  height: 100%;
  background: var(--ms-card-bg);
}
#mainBoardContent.view-mode-milestone .ms-timeline-col {
  width: var(--ms-day-w);
  min-width: var(--ms-day-w);

  height: 100%;
  border-left: 1px solid rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
}

#mainBoardContent.view-mode-milestone .ms-timeline-col:first-child { border-left: none; }
#mainBoardContent.view-mode-milestone .ms-timeline-col.is-today { background-color: #dbeafe; }

#mainBoardContent.view-mode-milestone .ms-timeline-col.month-start {
  border-left: none !important; /* ?щ챸??transparent) ?€???꾩삁 ?쒓굅(none) */
}

#mainBoardContent.view-mode-milestone #milestoneBoard.is-zoom-quarter .ms-timeline-col.month-start {
  border-left: none !important;
}

/* Track Rows */
.ms-track-layer {
  position: relative;
  pointer-events: none;
  display: flex;
  flex-direction: column;

  /* ??諛곌꼍 洹몃━?쒖? ???숈씪 */
  width: var(--ms-timeline-w);
  min-width: var(--ms-timeline-w);
}
.ms-track-row {
  position: relative;
  height: var(--ms-row-cat-h);
  min-height: var(--ms-row-cat-h);
  border-bottom: 1px solid #f1f5f9; /* ??理쒖쥌 ?곗꽑媛??섎떒 洹쒖튃 湲곗?) */
  box-sizing: border-box;
}

/* ??D ?몃옓 ?좏깮 媛뺤“ (B?€ ?숈씪 ?? */
#msBodyRightBottom .ms-track-row.is-team-selected{
  /* ??Solid ?€???щ챸???덈뒗 諛곌꼍(rgba)???ъ슜?섏뿬 ?ㅼそ 洹몃━???좎씠 洹몃?濡?鍮꾩튂?꾨줉 ??*/
  background-color: var(--ms-sel-team-bg);

  /* ???몄쐞?곸쑝濡??좎쓣 洹몃━??洹몃씪?붿뼵???쒓굅 (湲곕낯 洹몃━???몄텧) */
  background-image: none !important;

  /* 媛€濡?援щ텇?좊룄 ?좏깮 諛곌꼍?먯꽌 ?먮졆?섍쾶 */
  border-bottom-color: var(--ms-sel-line-cat) !important;

  box-shadow: none !important;
  outline: none !important;
}

#msBodyRightBottom .ms-track-row[data-rowtype="team"].is-team-selected{
  background-color: var(--ms-sel-team-hdr-bg-solid);

  /* ???ㅻえ 移??곸뿭(?€ ?ㅻ뜑 ?????몃줈 援щ텇???쒓굅 */
  background-image: none !important;

  border-bottom-color: var(--ms-sel-line-team) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* 移댄뀒怨좊━ ?⑥씪 ?좏깮(A) */
#msBodyRightBottom .ms-track-row.is-selected{
  background-color: rgba(37, 99, 235, 0.08) !important;
  box-shadow: none;
  outline: none;
}

.ms-track-row.is-collapsed-row{ display:none !important; }

/* Header Track (Empty row for alignment) */
.ms-track-row.ms-header-track {
  background-color: #f8fafc;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

#mainBoardContent.view-mode-milestone #msBodyRightBottom.ms-panel-d{
  position: relative;
}

#mainBoardContent.view-mode-milestone #msBodyRightBottom .ms-month-boundary-layer{
  position: absolute;
  top: 0; left: 0;

  /* ??諛곌꼍 洹몃━?쒖? ???숈씪 */
  width: var(--ms-timeline-w);
  min-width: var(--ms-timeline-w);

  height: 100%;
  pointer-events: none;
  z-index: 50; /* ??媛€濡???蹂대떎 ??*/
}

#mainBoardContent.view-mode-milestone #msBodyRightBottom .ms-month-boundary-line{
  position: absolute;
  top: 0; bottom: 0;
  width: 0;
  border-left: 1px solid rgba(0,0,0,0.12);
}

html[data-theme="dark"] #mainBoardContent.view-mode-milestone #msBodyRightBottom .ms-month-boundary-line{
  border-left-color: rgba(255,255,255,0.18);
}

/* ??Week boundary contrast in timeline bg (1px ?좎?) */
#mainBoardContent.view-mode-milestone .ms-timeline-col:nth-child(7n+1):not(.month-start){
  border-left-color: rgba(0,0,0,0.10); /* 湲곗〈 0.05蹂대떎 吏꾪븯寃?*/
}

/* =========================================================
   [FIX] Quarter View Double Line Issue (Final)
   - 遺꾧린 酉?.is-zoom-quarter)?먯꽌??CSS媛€ 洹몃━??紐⑤뱺 '?쇱そ ??border-left)'???쒓굅?⑸땲??
   - JS媛€ 洹몃━??'?ㅻⅨ履???border-right)' ?섎굹留??④꺼????以??꾩긽??諛⑹??⑸땲??
   ========================================================= */

/* 1. 遺꾧린 紐⑤뱶???? 紐⑤뱺 ?€?꾨씪??移몄쓽 border-left ?쒓굅 */
#mainBoardContent.view-mode-milestone #milestoneBoard.is-zoom-quarter .ms-timeline-col {
  border-left: none !important;
}

/* 2. 遺꾧린 紐⑤뱶???? ?뱁엳 '?쇱슂??7n+1)'???곸슜?섎뒗 border-left??媛뺣젰?섍쾶 ?쒓굅 */
#mainBoardContent.view-mode-milestone #milestoneBoard.is-zoom-quarter .ms-timeline-col:nth-child(7n+1) {
  border-left: none !important;
}

/* 3. ?ㅽ겕紐⑤뱶 ?€??*/
html[data-theme="dark"] #mainBoardContent.view-mode-milestone #milestoneBoard.is-zoom-quarter .ms-timeline-col,
html[data-theme="dark"] #mainBoardContent.view-mode-milestone #milestoneBoard.is-zoom-quarter .ms-timeline-col:nth-child(7n+1),
[data-theme="dark"] #mainBoardContent.view-mode-milestone #milestoneBoard.is-zoom-quarter .ms-timeline-col,
[data-theme="dark"] #mainBoardContent.view-mode-milestone #milestoneBoard.is-zoom-quarter .ms-timeline-col:nth-child(7n+1) {
  border-left: none !important;
}

/* =========================================================
   X) Layout Safety & Scroll Sync (Moved from JS <style>)
   ========================================================= */

/* ???섏씠吏€(諛붾뵒) ?덈꺼 媛€濡??ㅽ겕濡?李⑤떒 */
#mainBoardContent.view-mode-milestone,
#mainBoardContent.view-mode-milestone #milestoneBoard{
  overflow-x: hidden !important;
}

/* ??Grid/Flex ?대?媛€ ?볦뼱?몃룄 遺€紐?諛€由?諛⑹? */
#mainBoardContent.view-mode-milestone .ms-body-grid,
#mainBoardContent.view-mode-milestone .ms-group,
#mainBoardContent.view-mode-milestone .ms-group-right,
#mainBoardContent.view-mode-milestone .ms-panel-c,
#mainBoardContent.view-mode-milestone .ms-panel-d,
#mainBoardContent.view-mode-milestone #msBodyRightTop,
#mainBoardContent.view-mode-milestone #msBodyRightBottom{
  min-width: 0 !important;
}

/* ??B ?ㅽ겕濡ㅻ컮 ?④?(?ㅽ겕濡ㅼ? ?섎릺, 諛붾쭔 ?④?) */
#mainBoardContent.view-mode-milestone #msBodyLeftBottom{
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#mainBoardContent.view-mode-milestone #msBodyLeftBottom::-webkit-scrollbar{
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* ??C???ㅽ겕濡ㅻ컮 ?놁씠 ?대┰(猷곕윭??translate濡쒕쭔 ?대룞) */
#mainBoardContent.view-mode-milestone #msBodyRightTop{
  overflow-x: hidden !important;
}

/* =========================
   Zoom Controls (Panel D) - Refined (No shadow, Bigger pill)
   ========================= */
#msBodyRightBottom .ms-zoom-controls{
  position: absolute;
  z-index: 50;
  pointer-events: auto;

  /* ???덈Т ?곗륫/?섎떒??遺숈? ?딄쾶 ???④퀎 ???덉そ?쇰줈 */
  right: calc(24px + var(--ms-zoom-safe-right, 0px));
  bottom: calc(18px + var(--ms-zoom-safe-bottom, 0px));

  display: inline-flex;
  gap: 4px;          /* ??踰꾪듉 媛꾧꺽 ?섎젮???듬떟???쒓굅 */
  padding: 6px;      /* ???뚯빟(而⑦뀒?대꼫) ?먭퍡 ?ㅼ? */

  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.96);

  /* ??洹몃┝???쒓굅 */
  box-shadow: none;
}

html[data-theme="dark"] #msBodyRightBottom .ms-zoom-controls,
[data-theme="dark"] #msBodyRightBottom .ms-zoom-controls{
  border-color: rgba(255,255,255,0.14);
  background: rgba(20,20,20,0.82);

  /* ??洹몃┝???쒓굅 */
  box-shadow: none;
}

#msBodyRightBottom .ms-zoom-controls button{
  border: 0;
  outline: none;
  background: transparent;

  /* ??踰꾪듉 ?먯껜 ?ш린 ?ㅼ? */
  padding: 10px 16px;
  border-radius: 999px;

  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.2px;
  line-height: 1;

  cursor: pointer;
  color: rgba(0,0,0,0.72);
}

html[data-theme="dark"] #msBodyRightBottom .ms-zoom-controls button,
[data-theme="dark"] #msBodyRightBottom .ms-zoom-controls button{
  color: rgba(255,255,255,0.80);
}

#msBodyRightBottom .ms-zoom-controls button:hover{
  background: rgba(0,0,0,0.05);
}

html[data-theme="dark"] #msBodyRightBottom .ms-zoom-controls button:hover,
[data-theme="dark"] #msBodyRightBottom .ms-zoom-controls button:hover{
  background: rgba(255,255,255,0.10);
}

#msBodyRightBottom .ms-zoom-controls button.is-active{
  background: rgba(37, 99, 235, 0.14);
  color: #2563eb;
}

html[data-theme="dark"] #msBodyRightBottom .ms-zoom-controls button.is-active,
[data-theme="dark"] #msBodyRightBottom .ms-zoom-controls button.is-active{
  background: rgba(120, 160, 255, 0.20);
  color: rgba(220, 235, 255, 1);
}

/* =========================================================
   9) Dark Mode Support
   ========================================================= */
[data-theme="dark"] #mainBoardContent.view-mode-milestone .ms-progress-card,
[data-theme="dark"] #mainBoardContent.view-mode-milestone .ms-group { background: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] #mainBoardContent.view-mode-milestone .ms-progress-item,
[data-theme="dark"] #mainBoardContent.view-mode-milestone .ms-panel-card { background: rgba(255, 255, 255, 0.03); }
[data-theme="dark"] #mainBoardContent.view-mode-milestone .ms-progress-track { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.10); }

/* Panel A Dark */
html[data-theme="dark"] #mainBoardContent.view-mode-milestone #msBodyLeftTop.ms-panel-a {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.12);
}
html[data-theme="dark"] #msBodyLeftTop .ms-pa-label { color: rgba(255, 255, 255, 0.65); }
html[data-theme="dark"] #msBodyLeftTop .ms-pa-value { color: rgba(255, 255, 255, 0.92); }
html[data-theme="dark"] #msBodyLeftTop .ms-pa-tilde { color: rgba(255, 255, 255, 0.35); }

[data-theme="dark"] #mainBoardContent.view-mode-milestone .ms-ruler-weeks{
  background: rgba(255,255,255,0.06);
}
/* ???섎떒 理쒖쥌媛??곗꽑: 二쇱감 援щ텇?좎? 0.04 */
[data-theme="dark"] #mainBoardContent.view-mode-milestone .ms-ruler-week{
  border-left-color: rgba(255,255,255,0.04);
}

/* ??Dark: ?좏깮/?몃쾭 ?ㅻ쭔 ?곕줈 蹂댁젙 */
html[data-theme="dark"] #mainBoardContent.view-mode-milestone,
[data-theme="dark"] #mainBoardContent.view-mode-milestone{
  --ms-hover-bg: rgba(120, 160, 255, 0.10);
  --ms-hover-bar: rgba(120, 160, 255, 0.35);

  --ms-sel-cat-bg: var(--ms-sel-team-bg-solid);
  --ms-sel-team-bg: rgba(120, 160, 255, 0.08);
  --ms-sel-team-hdr-bg: rgba(120, 160, 255, 0.10);
  --ms-sel-team-bg-solid: #1a2235;
  --ms-sel-team-hdr-bg-solid: #1d2840;
  --ms-sel-line-cat: rgba(255,255,255,0.10);
  --ms-sel-line-team: rgba(255,255,255,0.14);

  --ms-sel-outline: rgba(180, 200, 255, 0.22);
}

html[data-theme="dark"] #msBodyRightBottom .ms-track-row.is-team-selected,
[data-theme="dark"] #msBodyRightBottom .ms-track-row.is-team-selected{
  /* ???ㅽ겕紐⑤뱶?먯꽌???몄쐞??洹몃씪?붿뼵???쒓굅?섍퀬 ?щ챸 諛곌꼍 ?좎? */
  background-image: none !important;
  background-color: var(--ms-sel-team-bg);
}

html[data-theme="dark"] #msBodyRightBottom .ms-track-row[data-rowtype="team"].is-team-selected,
[data-theme="dark"] #msBodyRightBottom .ms-track-row[data-rowtype="team"].is-team-selected{
  background-image:
    repeating-linear-gradient(
      to right,
      var(--ms-sel-line-team) 0,
      var(--ms-sel-line-team) 1px,
      transparent 1px,
      transparent var(--ms-day-w)
    ),
    repeating-linear-gradient(
      to right,
      rgba(255,255,255,0.14) 0,
      rgba(255,255,255,0.14) 1px,
      transparent 1px,
      transparent var(--ms-week-w)
    );
}

/* ??Dark Mode: 移댄뀒怨좊━ ?⑥씪 ?좏깮(A) - ?ш린???щ챸?섍쾶 泥섎━ */
html[data-theme="dark"] #msBodyRightBottom .ms-track-row.is-selected,
[data-theme="dark"] #msBodyRightBottom .ms-track-row.is-selected {
  /* ?ㅽ겕紐⑤뱶?먯꽌???щ챸??0.12)瑜?二쇱뼱 ?좎씠 蹂댁씠寃???*/
  background-color: rgba(120, 160, 255, 0.12) !important;
}


/* =========================================================
   [Milestone Board Unified Styles]
   - Modals: Add Epic / Add Holiday / Edit Epic
   - Components: Cards, Inputs, Dropdowns
   ========================================================= */

/* ---------------------------------------------------------
   1. Modal Common Styles (Overlay & Base) 
   ---------------------------------------------------------
*/
#msEpicModalOverlay,
#msHolidayModalOverlay,
#msEpicEditModalOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

#msEpicModalOverlay .ms-modal,
#msHolidayModalOverlay .ms-modal,
#msEpicEditModalOverlay .ms-modal {
  width: 100%;
  max-width: 560px;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.14);
  animation: msModalFadeIn 0.18s ease-out;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

@keyframes msModalFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------
   2. Modal Header
   ---------------------------------------------------------
*/
#msEpicModalOverlay .ms-modal-header,
#msHolidayModalOverlay .ms-modal-header,
#msEpicEditModalOverlay .ms-modal-header {
  padding: 18px 22px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: #fff;
}

#msEpicModalOverlay .ms-modal-title,
#msHolidayModalOverlay .ms-modal-title,
#msEpicEditModalOverlay .ms-modal-title {
  font-size: 18px;
  font-weight: 800;
  color: #1e293b;
}

/* ---------------------------------------------------------
   3. Modal Body
   ---------------------------------------------------------
*/
#msEpicModalOverlay .ms-modal-body,
#msHolidayModalOverlay .ms-modal-body,
#msEpicEditModalOverlay .ms-modal-body {
  padding: 18px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-sizing: border-box;
  background: #f8f9fa !important;
  max-height: 80vh;
  overflow-y: auto;
}

/* 2-Column Grid Layout */
#msEpicModalOverlay .ms-field-row,
#msHolidayModalOverlay .ms-field-row,
#msEpicEditModalOverlay .ms-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* ---------------------------------------------------------
   4. Form Fields & Inputs
   ---------------------------------------------------------
*/
#msEpicModalOverlay .ms-field,
#msHolidayModalOverlay .ms-field,
#msEpicEditModalOverlay .ms-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#msEpicModalOverlay .ms-field-label,
#msHolidayModalOverlay .ms-field-label,
#msEpicEditModalOverlay .ms-field-label {
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
}

/* Standard Inputs (Text, Select) */
#msEpicModalOverlay .ms-field-input,
#msHolidayModalOverlay .ms-field-input,
#msEpicEditModalOverlay .ms-field-input {
  width: 100%;
  height: 40px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #fff;
  font-size: 14px;
  color: #1e293b;
  outline: none;
  box-sizing: border-box;
}

/* Textarea Exception (For Memo) */
#msHolidayModalOverlay textarea.ms-field-input {
  height: auto;
  min-height: 80px;
  padding: 12px;
  resize: vertical;
  line-height: 1.4;
  font-family: inherit;
}

/* Epic Edit: reason input keeps single-line field height by default */
#msEpicEditModalOverlay #msEditReason.ms-field-input {
  height: 40px;
  min-height: 40px;
  max-height: 140px;
  padding: 10px 12px;
  resize: none;
  line-height: 1.35;
  overflow-y: hidden;
}

#msEpicModalOverlay .ms-field-input::placeholder,
#msHolidayModalOverlay .ms-field-input::placeholder,
#msEpicEditModalOverlay .ms-field-input::placeholder {
  color: #94a3b8;
}

/* ---------------------------------------------------------
   5. Date Pickers & Dropdowns (Chips)
   ---------------------------------------------------------
*/
/* Wrap for positioning */
#msEpicModalOverlay .ms-date-wrap,
#msHolidayModalOverlay .ms-date-wrap,
#msEpicEditModalOverlay .ms-date-wrap,
#msEpicModalOverlay .ms-dd-wrap,
#msHolidayModalOverlay .ms-dd-wrap,
#msEpicEditModalOverlay .ms-dd-wrap {
  position: relative;
  width: 100%;
}

/* Chip Style (Date Button & Dropdown Button) */
#msEpicModalOverlay .ms-date-chip,
#msHolidayModalOverlay .ms-date-chip,
#msEpicEditModalOverlay .ms-date-chip,
#msEpicModalOverlay .ms-dd-btn,
#msHolidayModalOverlay .ms-dd-btn,
#msEpicEditModalOverlay .ms-dd-btn {
  width: 100%;
  height: 40px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #fff;
  font-size: 14px;
  color: #1e293b;
  outline: none;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  cursor: pointer;
  justify-content: flex-start; /* Default align */
}

/* Dropdown Button Specifics */
#msEpicModalOverlay .ms-dd-btn,
#msHolidayModalOverlay .ms-dd-btn,
#msEpicEditModalOverlay .ms-dd-btn {
  justify-content: space-between;
}

/* Empty State Color */
#msEpicModalOverlay .ms-date-chip.is-empty,
#msHolidayModalOverlay .ms-date-chip.is-empty,
#msEpicEditModalOverlay .ms-date-chip.is-empty,
#msEpicModalOverlay .ms-dd-btn .ms-dd-text.is-empty,
#msHolidayModalOverlay .ms-dd-btn .ms-dd-text.is-empty,
#msEpicEditModalOverlay .ms-dd-btn .ms-dd-text.is-empty {
  color: #94a3b8 !important;
}

/* Hidden Native Date Input */
#msEpicModalOverlay .ms-date-native,
#msHolidayModalOverlay .ms-date-native,
#msEpicEditModalOverlay .ms-date-native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}

/* ---------------------------------------------------------
   6. Dropdown Menu (Popup List)
   ---------------------------------------------------------
*/
#msEpicModalOverlay .ms-dd-menu,
#msHolidayModalOverlay .ms-dd-menu,
#msEpicEditModalOverlay .ms-dd-menu {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  width: 100%;
  z-index: 9999;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
  max-height: 140px; /* ~3.5 items */
  overflow-y: auto;
}

/* Show when open */
#msEpicModalOverlay .ms-dd-wrap.is-open .ms-dd-menu,
#msHolidayModalOverlay .ms-dd-wrap.is-open .ms-dd-menu,
#msEpicEditModalOverlay .ms-dd-wrap.is-open .ms-dd-menu {
  display: block;
}

#msEpicModalOverlay .ms-dd-item,
#msHolidayModalOverlay .ms-dd-item,
#msEpicEditModalOverlay .ms-dd-item {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  color: #334155;
}

#msEpicModalOverlay .ms-dd-item:hover,
#msHolidayModalOverlay .ms-dd-item:hover,
#msEpicEditModalOverlay .ms-dd-item:hover {
  background: #f1f5f9;
}

/* Chevron Icon */
#msEpicModalOverlay .ms-dd-caret,
#msHolidayModalOverlay .ms-dd-caret,
#msEpicEditModalOverlay .ms-dd-caret {
  font-size: 0; 
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid #64748b; 
  border-bottom: 1.5px solid #64748b;
  transform: rotate(45deg); 
  margin-bottom: 3px; 
  margin-left: auto;
  opacity: 0.7;
  pointer-events: none;
}

/* ---------------------------------------------------------
   7. Footer & Buttons
   ---------------------------------------------------------
*/
#msEpicModalOverlay .ms-modal-footer,
#msHolidayModalOverlay .ms-modal-footer,
#msEpicEditModalOverlay .ms-modal-footer {
  padding: 14px 22px;
  background: #fff;
  border-top: 1px solid #e2e8f0;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

#msEpicModalOverlay .ms-btn,
#msHolidayModalOverlay .ms-btn,
#msEpicEditModalOverlay .ms-btn {
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  border: none;
  cursor: pointer;
}

/* Secondary Button (Cancel) */
#msEpicModalOverlay .ms-btn:not(.ms-btn-primary),
#msHolidayModalOverlay .ms-btn:not(.ms-btn-primary),
#msEpicEditModalOverlay .ms-btn:not(.ms-btn-primary) {
  background: #f1f5f9;
  color: #475569;
}
#msEpicModalOverlay .ms-btn:not(.ms-btn-primary):hover,
#msHolidayModalOverlay .ms-btn:not(.ms-btn-primary):hover,
#msEpicEditModalOverlay .ms-btn:not(.ms-btn-primary):hover {
  background: #e2e8f0;
}

/* Primary Button (Submit/Update) */
#msEpicModalOverlay .ms-btn.ms-btn-primary,
#msHolidayModalOverlay .ms-btn.ms-btn-primary,
#msEpicEditModalOverlay .ms-btn.ms-btn-primary {
  background: #2563eb;
  color: #fff;
}
#msEpicModalOverlay .ms-btn.ms-btn-primary:hover,
#msHolidayModalOverlay .ms-btn.ms-btn-primary:hover,
#msEpicEditModalOverlay .ms-btn.ms-btn-primary:hover {
  background: #1d4ed8;
}

/* ---------------------------------------------------------
   8. Specific Components
   ---------------------------------------------------------
*/

/* Hint Box (Only for Add Epic) */
#msEpicModalOverlay .ms-epic-hint {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid rgba(68, 122, 239, 0.35);
  background: rgba(68, 94, 239, 0.06);
  color: #4455ef;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

/* Holiday List Box (Only for Holiday) */
.ms-holiday-list-box {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  min-height: 100px;
  padding: 12px;
  font-size: 13px;
  color: #64748b;
  max-height: 220px;
  overflow-y: auto;
}
.ms-holiday-list-box::-webkit-scrollbar {
  width: 6px;
}
.ms-holiday-list-box::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 3px;
}
.ms-holiday-list-box::-webkit-scrollbar-track {
  background-color: transparent;
}

/* ---------------------------------------------------------
   9. Panel D: Epic Task Card Design
   --------------------------------------------------------- */
.ms-task-card {
  position: absolute;
  top: 4px;   /* Top margin in track */
  height: calc(100% - 8px); /* Bottom margin accounted */
  background-color: #ffffff;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 500;
  color: #333;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
  cursor: pointer;
  z-index: 10;
  transition: transform 0.1s, box-shadow 0.1s;
  
  /* Left colored strip (Default) */
  border-left: 5px solid #cbd5e1; 
}

.ms-task-card:hover {
  transform: none !important; /* ?꾨줈 1px ?щ씪媛€???숈옉 媛뺤젣 李⑤떒 */
  box-shadow: 0 4px 8px rgba(0,0,0,0.20); /* ?€??洹몃┝?먮? 議곌툑 ??吏꾪븯寃?*/
  z-index: 50; /* ?몃쾭 ???ㅻⅨ 移대뱶蹂대떎 ?꾩뿉 蹂댁씠?꾨줉 */
}

/* Content Layout */
.ms-task-content {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
  align-items: center;
}

.ms-task-title {
  overflow: hidden;
  text-overflow: ellipsis;
}

.ms-task-pct {
  color: #64748b;
  font-size: 11px;
  font-weight: 400;
  margin-top: 2px;
}

#mainBoardContent.view-mode-milestone .ms-task-pct.ms-task-pct-low {
  color: #ef4444 !important;
}

#mainBoardContent.view-mode-milestone .ms-task-pct.ms-task-pct-high {
  color: #2563eb !important;
}

/* ---------------------------------------------------------
   10. Difficulty Level Colors
   --------------------------------------------------------- */
/* Lv1: Gray */
.ms-task-card[data-level="Lv1"] { border-left-color: #94a3b8; }

/* Lv2: Blue */
.ms-task-card[data-level="Lv2"] { border-left-color: #3b82f6; }

/* Lv3: Green */
.ms-task-card[data-level="Lv3"] { border-left-color: #10b981; }

/* Lv4: Orange/Yellow */
.ms-task-card[data-level="Lv4"] { border-left-color: #f59e0b; }

/* Lv5: Red */
.ms-task-card[data-level="Lv5"] { border-left-color: #ef4444; }

/* =========================================
   [Audit Log] 蹂€寃??대젰 由ъ뒪???ㅽ???(Vertical List)
   ========================================= */
.ms-audit-section {
  margin-top: 20px;
  border-top: 1px solid #e2e8f0;
  padding-top: 16px;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 16px;
  margin-bottom: 4px;
}

.ms-audit-title {
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
  margin-bottom: 12px;
}

.ms-audit-list {
  max-height: 240px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px; /* ??ぉ 媛?媛꾧꺽 ?볧옒 */
  padding-right: 4px;
}

.ms-audit-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  position: relative;
  padding-left: 14px;
}

/* ?€?꾨씪????*/
.ms-audit-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #cbd5e1;
}

/* ?ㅻ뜑: ?묒꽦??+ ?쒓컙 */
.ms-audit-header {
  color: #64748b;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.ms-audit-user {
  font-weight: 700;
  color: #334155;
}

.ms-audit-time {
  font-weight: 400;
  font-size: 11px;
  color: #94a3b8;
}

/* 蹂€寃??댁슜 諛뺤뒪 (?뚮???諛곌꼍) */
.ms-audit-content {
  background: #f1f5f9; /* ?고븳 ?뚯깋/釉붾（ 怨꾩뿴 */
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  box-sizing: border-box;
}

/* 媛쒕퀎 蹂€寃?以?(?먰뵿紐? A -> B) */
.ms-change-row {
  color: #334155;
  font-weight: 500;
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
}

.ms-change-label {
  color: #64748b;
  margin-right: 4px;
  white-space: nowrap;
}

/* 蹂€寃??ъ쑀 以?(媛뺤“) */
.ms-reason-row {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed #cbd5e1; /* 援щ텇??*/
  color: #475569;
  line-height: 1.4;
}

.ms-audit-list::-webkit-scrollbar { width: 4px; }
.ms-audit-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }

/* =========================================================
   [View Mode] Category Pivot View Styles
   ========================================================= */
/* 1. 移댄뀒怨좊━ 酉?.ms-view-category)???? 
      媛??됱쓽 ?몄쭛 硫붾돱(??3媛?留??④퉩?덈떎. 
      (?좉? 踰꾪듉???덈뒗 .ms-pa-actions??.ms-add-cat-btn?€ ?④린硫?????) */
#mainBoardContent.view-mode-milestone #milestoneBoard.ms-view-category .ms-header-controls {
  display: none !important;
}

/* 2. 移댄뀒怨좊━ 酉곗씪 ???ㅻ뜑 ?됱긽 援щ텇 (蹂대씪???? */
#mainBoardContent.view-mode-milestone #milestoneBoard.ms-view-category .ms-category-item.ms-team-header {
  background-color: #fcfaff;
  color: #4a044e;
}
#mainBoardContent.view-mode-milestone #milestoneBoard.ms-view-category .ms-category-item.ms-team-header .ms-team-title .text {
  color: #9333ea;
}
#mainBoardContent.view-mode-milestone #milestoneBoard.ms-view-category .ms-track-row.ms-header-track {
  background-color: #fcfaff;
}
/* 1. Panel B (?쇱そ 由ъ뒪?? ?좏깮 ??蹂대씪??-> ?뚮???蹂듦뎄 */
#mainBoardContent.view-mode-milestone #milestoneBoard.ms-view-category .ms-category-item.ms-team-header.is-team-selected {
  background-color: var(--ms-sel-team-hdr-bg-solid) !important;
  color: #334155 !important; /* ?띿뒪???됱긽??湲곕낯?쇰줈 蹂듦뎄 */
}

/* ?띿뒪???쒕ぉ) ?됱긽 蹂듦뎄 */
#mainBoardContent.view-mode-milestone #milestoneBoard.ms-view-category .ms-category-item.ms-team-header.is-team-selected .ms-team-title .text {
  color: #2563eb !important;
}

/* 2. Panel D (?ㅻⅨ履??€?꾨씪?? ?ㅻ뜑 ?몃옓 ?좏깮 ??諛곌꼍 蹂듦뎄 */
#mainBoardContent.view-mode-milestone #milestoneBoard.ms-view-category .ms-track-row.ms-header-track.is-team-selected {
  background-color: var(--ms-sel-team-hdr-bg-solid) !important;
}

/* =========================================================
   [Epic Edit Modal] Header 1-row + Status Toggle
   ========================================================= */
#msEpicEditModalOverlay .ms-modal-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* ?ㅻ뜑 ?€?댄??€ 湲몃㈃ 留먯쨪??*/
#msEpicEditModalOverlay .ms-modal-title{
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ?ㅻ뜑 ?곗륫(?좉? + 湲곗〈 ?꾩씠肄섎뱾) */
#msEpicEditModalOverlay .ms-epic-header-right{
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  /* ?뚮몢由щ? ?꾩＜ ?고븳 ?뚯깋?쇰줈 蹂€寃?*/
  border: 0.5px solid #e2e8f0; 
  border-radius: 6px; /* 紐⑥꽌由щ? ?쎄컙 ?κ?寃??섎㈃ ??遺€?쒕윭??蹂댁엯?덈떎 */
}



/* ???먰뵿紐⑤떖 ?꾩슜 踰꾪듉 ID??留욎떠 active ??吏€??*/
#msEpicEditModalOverlay .st-btn.active#msEpicBtnTodo  { background: #6b7280; }
#msEpicEditModalOverlay .st-btn.active#msEpicBtnDoing { background: #3b82f6; }
#msEpicEditModalOverlay .st-btn.active#msEpicBtnDone  { background: #10b981; }

/* (1) ?뱀뀡 ?€?댄????꾨뱶 ?쇰꺼 ?ㅼ쑝濡??듭씪 */
#msEpicEditModalOverlay #msGateSection .ms-audit-title{
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  margin: 0 0 8px;
}

/* (2) 紐⑤떖 ??而ㅼ뒪?€ ?쒕∼?ㅼ슫 踰꾪듉(ms-dd-btn) ?믪씠/???듭씪 */
#msEpicEditModalOverlay .ms-dd-btn{
  height: 40px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

/* (3) ?꾩냽怨듭젙 ?쒕∼?ㅼ슫(select) ?믪씠/???듭씪 (JS ?몃씪???ㅽ??쇰룄 ??뼱?€) */
#msEpicEditModalOverlay .ms-gate-decision{
  height: 40px !important;
  width: 120px !important;
  font-size: 14px !important;
}

/* ?꾩냽 ?먰뵿 ?곌껐 ?쒕∼?ㅼ슫: 紐⑸줉 4媛??뺣룄 蹂댁씠寃?*/
#msEpicEditModalOverlay #msGateAddDD .ms-dd-menu{
  max-height: 150px !important;  /* 3媛쒋넂4媛??뺣룄 */
  overflow-y: auto !important;
}

#msEpicEditModalOverlay .ms-dd-btn.is-empty .ms-dd-text{ color:#94a3b8; }

/* (4) 嫄곗젅 ?ъ쑀 input ?믪씠 ?듭씪 */
#msEpicEditModalOverlay .ms-gate-reason{
  height: 40px !important;
  font-size: 13px !important;
}

/* (5) ?꾩냽 ?먰뵿 ?좏깮 以? select???섎━怨? 踰꾪듉?€ 以꾩뼱?ㅼ? ?딄쾶 */
#msEpicEditModalOverlay .ms-gate-add{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

#msEpicEditModalOverlay #msGateAddSelect{
  flex: 1 1 auto;
  min-width: 0;
  height: 40px !important;
}

#msEpicEditModalOverlay #msGateAddBtn{
  flex: 0 0 auto;
  min-width: 72px;
  height: 40px;
  white-space: nowrap;      /* ???쒖텛/媛€??以꾨컮轅?諛⑹? */
  word-break: keep-all;     /* ???쒓? 履쇨컻吏?諛⑹? */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
}

#msEpicEditModalOverlay .ms-gate-title{
  margin: 14px 0 8px;
}
#msEpicEditModalOverlay .ms-gate-title-sub{
  margin-top: 14px;
}

#msEpicEditModalOverlay .ms-gate-link-row{
  display: flex;
  align-items: center;
  gap: 10px;
}

#msEpicEditModalOverlay .ms-gate-search{
  position: relative;
  flex: 1;
  min-width: 0;
}

#msEpicEditModalOverlay .ms-gate-search-icon{
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.45;
  pointer-events: none;
}

#msEpicEditModalOverlay #msGateAddSelect{
  width: 100%;
  height: 40px;
  padding-left: 36px; /* ?꾩씠肄?怨듦컙 */
  box-sizing: border-box;
}

#msEpicEditModalOverlay #msGateAddBtn{
  height: 40px;
  min-width: 72px;
  white-space: nowrap;  /* ???쒖텛媛€???몃줈濡?履쇨컻吏€??臾몄젣 諛⑹? */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#msEpicEditModalOverlay .ms-gate-help{
  font-size: 12px;
  color: #64748b;
  margin: 6px 0 10px;
}

/* ?먰뵿 ?몄쭛 紐⑤떖: ?꾩냽 ?먰뵿 ?좏깮(select) "鍮덇컪"????placeholder ??*/
#msEpicEditModalOverlay #msGateAddSelect{
  color: #1e293b; /* ?좏깮??媛??쇰컲 ?띿뒪?? */
}

#msEpicEditModalOverlay #msGateAddSelect.is-empty{
  color: #94a3b8; /* ??textarea placeholder ?ㅺ낵 留욎땄 */
}

#msEpicEditModalOverlay #msGateAddSelect,
#msEpicEditModalOverlay .ms-gate-decision{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* ??怨듦컙 ?뺣낫 (?곗륫 ?⑤뵫) */
  padding-right: 38px !important;

  /* ?숈씪 ?꾩씠肄섏쓣 諛곌꼍?쇰줈 ?쎌엯 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 16px 16px;

  /* ???쒖씠???쒕∼?ㅼ슫 ?붿궡???꾩튂泥섎읆: 移????곗륫 以묒븰 */
  background-position: right 12px center;
}

/* IE/Edge(援ы삎) ?붿궡???④? */
#msEpicEditModalOverlay #msGateAddSelect::-ms-expand,
#msEpicEditModalOverlay .ms-gate-decision::-ms-expand{
  display: none;
}

/* (?좏깮) ?꾩냽 ?먰뵿 ?좏깮?€ ?쇱そ ?뗫낫湲??꾩씠肄섏씠 ?덉쑝??湲곗〈 ?⑤뵫 ?좎? */
#msEpicEditModalOverlay #msGateAddSelect{
  padding-left: 12px !important; /* ?ㅺ? ?대? ?곕뒗 ?뗫낫湲?怨듦컙 */
}

/* ?먰뵿 ?몄쭛 紐⑤떖: 援щ텇???щ갚 以꾩씠湲?(鍮④컙 諛뺤뒪 ?곸뿭) */
#msEpicEditModalOverlay .ms-audit-section{
  margin-top: 10px !important;      /* 湲곗〈 20px ??10px */
  padding-top: 10px !important;     /* 湲곗〈 18px ??10px */
  padding-bottom: 0 !important;   /* 湲곗〈 16px ??8px */
  margin-bottom: 0 !important;      /* 湲곗〈 4px ??0 */
  border-bottom: 0 !important;      /* ???꾨옒 援щ텇???쒓굅(鍮④컙 諛뺤뒪 ?쇱씤) */
}

/* 洹몃옒???꾩そ 援щ텇?좎? 理쒖냼濡??좎??섍퀬 ?띠쑝硫??좏깮) */
#msEpicEditModalOverlay .ms-audit-section{
  border-top: 1px solid rgba(0,0,0,0.06) !important; /* ???고븯寃?*/
}


/* ================================
   Epic Edit Modal - Status Toggle (SINGLE BORDER)
   ================================ */

/* ???좉? 諛붽묑 ?섑띁(?뱀떆 ?⑥븘?덈뒗 ?뚮몢由?洹몃┝???꾨? ?쒓굅) */
#msEpicEditModalOverlay .ms-epic-header-right{
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* ???좉? 而⑦뀒?대꼫: ?뚮몢由?1媛쒕쭔 */
#msEpicEditModalOverlay .ms-epic-status-toggle.status-toggle-slim{
  display: flex !important;
  align-items: center !important;

  height: 28px !important;
  min-height: 28px !important;
  padding: 2px !important;
  gap: 2px !important;

  border-radius: 10px !important;

  /* ???ш린留??뚮몢由?*/
  border: 1px solid rgba(17,24,39,0.14) !important;

  /* ??2以??뚮몢由щ줈 蹂댁씠寃?留뚮뱶???붿냼???꾨? ?쒓굅 */
  box-shadow: none !important;
  outline: 0 !important;
  background: rgba(17,24,39,0.04) !important;
}

/* ?뱀떆 媛€?곸슂?뚮줈 ?쇱씤???ㅼ뼱媛€硫?媛뺤젣 ?쒓굅 */
#msEpicEditModalOverlay .ms-epic-status-toggle.status-toggle-slim::before,
#msEpicEditModalOverlay .ms-epic-status-toggle.status-toggle-slim::after{
  content: none !important;
  display: none !important;
}

/* ??踰꾪듉(?€湲?吏꾪뻾/?꾨즺): ?먭린 ?뚮몢由??꾩썐?쇱씤/洹몃┝???꾨? ?쒓굅 */
#msEpicEditModalOverlay .ms-epic-status-toggle.status-toggle-slim .st-btn{
  height: 100% !important;
  padding: 0 10px !important;

  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;

  border-radius: 8px !important; /* 踰꾪듉 ?κ?寃뚮뒗 ?좎?(?ㅽ겕???? */

  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;

  background: transparent !important;
}

#msEpicEditModalOverlay .ms-epic-status-toggle.status-toggle-slim .st-btn:focus,
#msEpicEditModalOverlay .ms-epic-status-toggle.status-toggle-slim .st-btn:focus-visible{
  outline: 0 !important;
  box-shadow: none !important;
}

/* 鍮꾪솢???띿뒪??*/
#msEpicEditModalOverlay .ms-epic-status-toggle.status-toggle-slim .st-btn:not(.active){
  color: rgba(17,24,39,0.75) !important;
}

/* ?쒖꽦 ?곹깭 諛곌꼍(以묐났 ?놁씠 1踰덈쭔) */
#msEpicEditModalOverlay .st-btn.active#msEpicBtnTodo  { background:#6b7280 !important; color:#fff !important; }
#msEpicEditModalOverlay .st-btn.active#msEpicBtnDoing { background:#3b82f6 !important; color:#fff !important; }
#msEpicEditModalOverlay .st-btn.active#msEpicBtnDone  { background:#10b981 !important; color:#fff !important; }

/* =========================================================
   [Epic Edit Modal] Status Toggle = Task Modal Style
   ========================================================= */
#msEpicEditModalOverlay{
  --tm-h1: 36px;
  --tm-h1-pad: 3px;
  --tm-radius: 8px;
}

#msEpicEditModalOverlay .ms-epic-header-right{
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#msEpicEditModalOverlay .ms-epic-status-toggle.status-toggle-slim{
  height: var(--tm-h1) !important;
  min-height: var(--tm-h1) !important;
  padding: var(--tm-h1-pad) !important;
  gap: 0 !important;
  border-radius: var(--tm-radius) !important;
  border: 1px solid rgba(17,24,39,0.14) !important;
  background: rgba(17,24,39,0.04) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] #msEpicEditModalOverlay .ms-epic-status-toggle.status-toggle-slim,
[data-theme="dark"] #msEpicEditModalOverlay .ms-epic-status-toggle.status-toggle-slim{
  border: 1px solid rgba(255,255,255,0.14) !important;
  background: rgba(255,255,255,0.08) !important;
}

#msEpicEditModalOverlay .ms-epic-status-toggle.status-toggle-slim:hover{
  border-color: var(--md-sys-color-outline) !important;
}

#msEpicEditModalOverlay .ms-epic-status-toggle.status-toggle-slim:focus-within{
  border-color: var(--md-sys-color-outline) !important;
}

#msEpicEditModalOverlay .ms-epic-status-toggle.status-toggle-slim .st-btn{
  height: 100% !important;
  padding: 0 10px !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  border-radius: var(--tm-radius) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  color: var(--md-sys-color-on-surface) !important;
  opacity: 0.6 !important;
  background: transparent !important;
  transition: 0.2s !important;
}

#msEpicEditModalOverlay .ms-epic-status-toggle.status-toggle-slim .st-btn:hover{
  opacity: 1 !important;
}

#msEpicEditModalOverlay .ms-epic-status-toggle.status-toggle-slim .st-btn.active{
  opacity: 1 !important;
  color: #fff !important;
}


/* ?꾩냽 遺€??寃€??-/?⑹쓽/嫄곗젅) ?쒕∼?ㅼ슫???쒖씠??ms-dd)?€ 媛숈? ?ㅼ쑝濡?*/
#msEpicEditModalOverlay .ms-gate-decision-dd{
  width: 110px;
}

#msEpicEditModalOverlay .ms-gate-decision-dd .ms-dd-btn{
  height: 34px;
  padding: 0 10px;
  border-radius: 10px;
}

#msEpicEditModalOverlay .ms-gate-decision-dd .ms-dd-menu{
  max-height: 150px;
  overflow-y: auto;
}

/* =================================================================
   Epic Edit Modal: adaptive height + body-only scroll
   ================================================================= */

#msEpicEditModalOverlay .ms-modal {
  display: flex !important;
  flex-direction: column !important;
  width: min(560px, calc(100vw - 32px));
  height: auto !important;
  max-height: clamp(620px, 78vh, 860px) !important;
  overflow: hidden !important;
}

#msEpicEditModalOverlay .ms-modal-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  max-height: none !important;
  padding: 18px 22px 24px !important;
  background: #f8f9fa !important;
}

#msEpicEditModalOverlay .ms-modal-footer {
  flex: 0 0 auto !important;
  background: #fff !important;
  border-top: 1px solid #e2e8f0 !important;
  padding: 14px 22px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

@media (max-height: 820px) {
  #msEpicEditModalOverlay .ms-modal {
    max-height: 88vh !important;
  }

  #msEpicEditModalOverlay .ms-modal-body {
    padding: 14px 20px 16px !important;
    gap: 10px !important;
  }
}



/* =========================================================
   ?뙔 Milestone View ??Dark Mode Overrides
   ?ъ슜踰? milestone.cleaned.css "留??꾨옒"??洹몃?濡?遺숈뿬 ?ｊ린
   ========================================================= */

/* ---------------------------------------------------------
   0) Root tokens (?ㅽ겕 ??湲곗?媛?
   --------------------------------------------------------- */
html[data-theme="dark"] #mainBoardContent.view-mode-milestone,
[data-theme="dark"] #mainBoardContent.view-mode-milestone{
  /* 諛곌꼍/移대뱶 */
  --ms-group-bg: rgba(255,255,255,0.06);
  --ms-card-bg: rgba(255,255,255,0.03);

  /* ?쇱씤 */
  --ms-line: rgba(255,255,255,0.10);
  --ms-line-soft: rgba(255,255,255,0.06);

  /* ?띿뒪??湲곕낯/蹂댁“) */
  --ms-text: rgba(255,255,255,0.92);
  --ms-muted: rgba(255,255,255,0.62);
  --ms-dim: rgba(255,255,255,0.42);
}

/* ---------------------------------------------------------
   1) 怨듯넻 而⑦뀒?대꼫/?⑤꼸
   --------------------------------------------------------- */
html[data-theme="dark"] #mainBoardContent.view-mode-milestone .ms-group,
[data-theme="dark"] #mainBoardContent.view-mode-milestone .ms-group{
  background: var(--ms-group-bg);
}

html[data-theme="dark"] #mainBoardContent.view-mode-milestone .ms-panel-card,
[data-theme="dark"] #mainBoardContent.view-mode-milestone .ms-panel-card{
  background: var(--ms-card-bg);
  border-color: rgba(255,255,255,0.10);
}

/* ---------------------------------------------------------
   2) Stats Bar (KPI)
   --------------------------------------------------------- */
html[data-theme="dark"] #mainBoardContent.view-mode-milestone .ms-progress-head .ttl,
[data-theme="dark"] #mainBoardContent.view-mode-milestone .ms-progress-head .ttl{
  color: var(--ms-text);
}
html[data-theme="dark"] #mainBoardContent.view-mode-milestone .ms-progress-head .meta,
[data-theme="dark"] #mainBoardContent.view-mode-milestone .ms-progress-head .meta{
  color: var(--ms-muted);
}

html[data-theme="dark"] #mainBoardContent.view-mode-milestone .ms-progress-track,
[data-theme="dark"] #mainBoardContent.view-mode-milestone .ms-progress-track{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.10);
}

/* ---------------------------------------------------------
   3) Panel A (?꾨줈?앺듃 湲곌컙/踰꾪듉)
   --------------------------------------------------------- */
html[data-theme="dark"] #mainBoardContent.view-mode-milestone #msBodyLeftTop.ms-panel-a{
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.12);
}

html[data-theme="dark"] #msBodyLeftTop .ms-pa-label{ color: var(--ms-muted); }
html[data-theme="dark"] #msBodyLeftTop .ms-pa-value{ color: var(--ms-text); }
html[data-theme="dark"] #msBodyLeftTop .ms-pa-tilde{ color: var(--ms-dim); }

html[data-theme="dark"] #msBodyLeftTop .ms-add-cat-btn{
  background: rgba(120,160,255,0.10);
  border-color: rgba(120,160,255,0.45);
  color: rgba(220,235,255,1);
  -webkit-text-fill-color: rgba(220,235,255,1) !important;
}
html[data-theme="dark"] #msBodyLeftTop .ms-add-cat-btn:hover{
  background: rgba(120,160,255,0.14);
}

/* Panel A ?좎쭨 hover(?대┃ 媛€???좏샇) */
html[data-theme="dark"] #msBodyLeftTop .ms-pa-date-wrap:hover .ms-pa-date{
  color: rgba(180, 200, 255, 1);
}

/* ---------------------------------------------------------
   4) Panel B (議곗쭅/移댄뀒怨좊━ 由ъ뒪??
   --------------------------------------------------------- */
html[data-theme="dark"] #msBodyLeftBottom .ms-category-item{
  border-bottom-color: rgba(255,255,255,0.06);
}

html[data-theme="dark"] #msBodyLeftBottom .ms-cat-title{
  color: var(--ms-text);
}

html[data-theme="dark"] #msBodyLeftBottom .ms-cat-controls button{
  color: rgba(255,255,255,0.45);
}
html[data-theme="dark"] #msBodyLeftBottom .ms-cat-controls button:hover{
  color: rgba(180,200,255,1);
  background: rgba(255,255,255,0.08);
}

/* ?€ ?ㅻ뜑(諛곌꼍/?띿뒪?? */
html[data-theme="dark"] #msBodyLeftBottom .ms-category-item.ms-team-header{
  background-color: rgba(255,255,255,0.05);
  color: var(--ms-text);
  border-bottom-color: rgba(255,255,255,0.08) !important;
}
html[data-theme="dark"] #msBodyLeftBottom .ms-category-item.ms-team-header .ms-team-title .text{
  color: rgba(180,200,255,1);
}

/* ---------------------------------------------------------
   5) Panel C/D 猷곕윭/?€?꾨씪??
   --------------------------------------------------------- */
/* 二쇱감 諛?*/
html[data-theme="dark"] #mainBoardContent.view-mode-milestone .ms-ruler-weeks{
  background: rgba(255,255,255,0.06);
}
html[data-theme="dark"] #mainBoardContent.view-mode-milestone .ms-ruler-week{
  border-left-color: rgba(255,255,255,0.10);
}

/* ?쇱옄(?レ옄/?붿씪) ?띿뒪??*/
html[data-theme="dark"] #mainBoardContent.view-mode-milestone .ms-ruler-daynum{
  color: rgba(255,255,255,0.86);
}
html[data-theme="dark"] #mainBoardContent.view-mode-milestone .ms-ruler-dow{
  color: rgba(255,255,255,0.55);
}

/* ?ㅻ뒛 ?섏씠?쇱씠??猷곕윭/?€?꾨씪??怨듯넻) */
html[data-theme="dark"] #mainBoardContent.view-mode-milestone .ms-ruler-day.is-today{
  background-color: rgba(59, 130, 246, 0.15);
}
html[data-theme="dark"] #mainBoardContent.view-mode-milestone .ms-timeline-col.is-today{
  background-color: rgba(59, 130, 246, 0.12);
}

/* ?€?꾨씪??湲곕낯 ??*/
html[data-theme="dark"] #mainBoardContent.view-mode-milestone .ms-timeline-col{
  border-left-color: rgba(255,255,255,0.06);
}
html[data-theme="dark"] #mainBoardContent.view-mode-milestone .ms-track-row{
  border-bottom-color: rgba(255,255,255,0.06);
}

/* ---------------------------------------------------------
   6) Panel D ?먰뵿 移대뱶
   --------------------------------------------------------- */
html[data-theme="dark"] #mainBoardContent.view-mode-milestone .ms-task-card{
  background-color: rgba(30, 32, 35, 0.92);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 8px 18px rgba(0,0,0,0.35);
  color: rgba(255,255,255,0.90);
}
html[data-theme="dark"] #mainBoardContent.view-mode-milestone .ms-task-pct{
  color: rgba(255,255,255,0.60);
}
html[data-theme="dark"] #mainBoardContent.view-mode-milestone .ms-task-card:hover{
  box-shadow: 0 14px 28px rgba(0,0,0,0.45);
}

#mainBoardContent.view-mode-milestone .ms-task-card[data-status="done"]{
  opacity: 0.45;
  filter: saturate(0.35);
}

/* =========================================================
   [Milestone] Epic 移대뱶 ?곹깭蹂??ㅽ????곸슜
   ========================================================= */

/* 1. 湲곕낯 移대뱶 ?ㅼ젙: 湲곕낯?€ ?곗깋 ?좎? */
html:not([data-theme="dark"]) #mainBoardContent.view-mode-milestone .ms-task-card {
  background-color: #ffffff !important;
  background-image: none !important;
  transition: all 0.2s ease; /* 遺€?쒕윭???꾪솚 ?④낵 */
}

/* 2. [?꾨즺 Epic] 諛곌꼍?€ ?뚯깋 ?뚯쁺 + ?띿뒪?몃뒗 ?먮━寃?*/
html:not([data-theme="dark"]) #mainBoardContent.view-mode-milestone .ms-task-card.is-done,
html:not([data-theme="dark"]) #mainBoardContent.view-mode-milestone .ms-task-card[data-status="done"] {
  background-color: #ffffff !important; /* ???고븳 ?뚯깋 諛곌꼍 */
  opacity: 0.6 !important;
  box-shadow: none !important;
  
  

}

html:not([data-theme="dark"]) #mainBoardContent.view-mode-milestone .ms-task-card.is-done .ms-task-title,
html:not([data-theme="dark"]) #mainBoardContent.view-mode-milestone .ms-task-card.is-done .ms-task-pct {
  opacity: 0.5 !important; /* ??湲€?먮쭔 ?먮━寃?*/
}

/* 3. [Overdue Epic] 諛곌꼍?€ 遺됱? ?먮굦 + ?뚮몢由?媛뺤“ (?좎? ?좎?) */
html:not([data-theme="dark"]) #mainBoardContent.view-mode-milestone .ms-task-card.is-overdue {
  background-color: #fffafa !important; /* ???꾩＜ ?고븳 遺됱? 諛곌꼍 */
  
  /* ???쒖씠???좎?瑜?諛⑺빐?섏? ?딅뒗 ?좎뿉??遺됱? ?멸낸??異붽? */
  box-shadow: 
    0 1px 2px rgba(0,0,0,0.05),
    0 0 0 1px rgba(239, 68, 68, 0.3) !important;
}
html:not([data-theme="dark"]) #mainBoardContent.view-mode-milestone .ms-task-card.is-overdue:hover {
  background-color: #fff5f5 !important; /* 諛곌꼍???댁쭩 ??諛앹? 遺됱??됱쑝濡?*/
  box-shadow: 
    0 4px 8px rgba(220, 38, 38, 0.15),
    0 0 0 2px rgba(239, 68, 68, 0.6) !important; /* ?뚮몢由щ? ??吏꾪븯怨??먭퍖寃?*/
  cursor: pointer;
  transform: translateY(-1px); /* ?꾩＜ ?댁쭩 ?꾨줈 ?좎삤瑜대뒗 ?먮굦 */
  transition: all 0.2s ease;
}

/* ?ㅻ쾭?€ 湲€?먯깋: ?덈Т 鍮④컺吏€ ?딄쾶 媛€?낆꽦 ?뺣낫 */
html:not([data-theme="dark"]) #mainBoardContent.view-mode-milestone .ms-task-card.is-overdue .ms-task-title {
  color: #c53030 !important;
}

html:not([data-theme="dark"]) #mainBoardContent.view-mode-milestone .ms-task-card.is-done:hover,
html:not([data-theme="dark"]) #mainBoardContent.view-mode-milestone .ms-task-card[data-status="done"]:hover {
  opacity: 1 !important;                 /* ?щ챸??蹂듦뎄 */
  background-color: #fcfcfc !important;  /* 諛곌꼍?됱쓣 ?댁쭩 諛앷쾶 */
  box-shadow: 0 4px 6px rgba(0,0,0,0.08) !important; /* 遺€?쒕윭??洹몃┝??異붽? */
  cursor: pointer;
}

/* ?몃쾭 ??湲€?먮룄 議곌툑 ??吏꾪븯寃?*/
html:not([data-theme="dark"]) #mainBoardContent.view-mode-milestone .ms-task-card.is-done:hover .ms-task-title,
html:not([data-theme="dark"]) #mainBoardContent.view-mode-milestone .ms-task-card.is-done:hover .ms-task-pct {
  opacity: 0.8 !important;
}

/* ---------------------------------------------------------
   7) ?ㅻ뜑 硫붾돱(???쒕∼?ㅼ슫)
   --------------------------------------------------------- */
html[data-theme="dark"] #mainBoardContent.view-mode-milestone .ms-header-menu{
  background: rgba(30, 32, 35, 0.96);
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
}
html[data-theme="dark"] #mainBoardContent.view-mode-milestone .ms-header-menu button{
  color: rgba(255,255,255,0.88);
}
html[data-theme="dark"] #mainBoardContent.view-mode-milestone .ms-header-menu button:hover{
  background-color: rgba(255,255,255,0.08);
  color: rgba(180,200,255,1);
}
html[data-theme="dark"] #mainBoardContent.view-mode-milestone .ms-header-menu button.del:hover{
  background-color: rgba(239, 68, 68, 0.18);
  color: rgba(255,255,255,0.92);
}

/* ---------------------------------------------------------
   8) 紐⑤떖(?먰뵿 異붽?/?섏젙, ?댁씪) + ?쒕∼?ㅼ슫
   --------------------------------------------------------- */
html[data-theme="dark"] #msEpicModalOverlay .ms-modal,
html[data-theme="dark"] #msHolidayModalOverlay .ms-modal,
html[data-theme="dark"] #msEpicEditModalOverlay .ms-modal{
  background: var(--md-sys-color-surface-container, rgba(30, 32, 35, 0.96));
  border: 1px solid rgba(255,255,255,0.10);
}

html[data-theme="dark"] #msEpicModalOverlay .ms-modal-header,
html[data-theme="dark"] #msHolidayModalOverlay .ms-modal-header,
html[data-theme="dark"] #msEpicEditModalOverlay .ms-modal-header{
  background: transparent;
  border-bottom-color: rgba(255,255,255,0.10);
}

html[data-theme="dark"] #msEpicModalOverlay .ms-modal-title,
html[data-theme="dark"] #msHolidayModalOverlay .ms-modal-title,
html[data-theme="dark"] #msEpicEditModalOverlay .ms-modal-title{
  color: rgba(255,255,255,0.92);
}

html[data-theme="dark"] #msEpicModalOverlay .ms-field-label,
html[data-theme="dark"] #msHolidayModalOverlay .ms-field-label,
html[data-theme="dark"] #msEpicEditModalOverlay .ms-field-label{
  color: rgba(255,255,255,0.62);
}

/* ?명뭼/移??좎쭨/?쒕∼?ㅼ슫 踰꾪듉) */
html[data-theme="dark"] #msEpicModalOverlay .ms-field-input,
html[data-theme="dark"] #msHolidayModalOverlay .ms-field-input,
html[data-theme="dark"] #msEpicEditModalOverlay .ms-field-input,
html[data-theme="dark"] #msEpicModalOverlay .ms-date-chip,
html[data-theme="dark"] #msHolidayModalOverlay .ms-date-chip,
html[data-theme="dark"] #msEpicEditModalOverlay .ms-date-chip,
html[data-theme="dark"] #msEpicModalOverlay .ms-dd-btn,
html[data-theme="dark"] #msHolidayModalOverlay .ms-dd-btn,
html[data-theme="dark"] #msEpicEditModalOverlay .ms-dd-btn{
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.88);
}

html[data-theme="dark"] #msEpicModalOverlay .ms-field-input::placeholder,
html[data-theme="dark"] #msHolidayModalOverlay .ms-field-input::placeholder,
html[data-theme="dark"] #msEpicEditModalOverlay .ms-field-input::placeholder{
  color: rgba(255,255,255,0.38);
}

html[data-theme="dark"] #msEpicModalOverlay .ms-date-chip.is-empty,
html[data-theme="dark"] #msHolidayModalOverlay .ms-date-chip.is-empty,
html[data-theme="dark"] #msEpicEditModalOverlay .ms-date-chip.is-empty,
html[data-theme="dark"] #msEpicModalOverlay .ms-dd-btn .ms-dd-text.is-empty,
html[data-theme="dark"] #msHolidayModalOverlay .ms-dd-btn .ms-dd-text.is-empty,
html[data-theme="dark"] #msEpicEditModalOverlay .ms-dd-btn .ms-dd-text.is-empty{
  color: rgba(255,255,255,0.38) !important;
}

/* ?쒕∼?ㅼ슫 硫붾돱 */
html[data-theme="dark"] #msEpicModalOverlay .ms-dd-menu,
html[data-theme="dark"] #msHolidayModalOverlay .ms-dd-menu,
html[data-theme="dark"] #msEpicEditModalOverlay .ms-dd-menu{
  background: rgba(30, 32, 35, 0.96);
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
}

html[data-theme="dark"] #msEpicModalOverlay .ms-dd-item,
html[data-theme="dark"] #msHolidayModalOverlay .ms-dd-item,
html[data-theme="dark"] #msEpicEditModalOverlay .ms-dd-item{
  color: rgba(255,255,255,0.88);
}
html[data-theme="dark"] #msEpicModalOverlay .ms-dd-item:hover,
html[data-theme="dark"] #msHolidayModalOverlay .ms-dd-item:hover,
html[data-theme="dark"] #msEpicEditModalOverlay .ms-dd-item:hover{
  background: rgba(255,255,255,0.08);
}

/* 紐⑤떖 Footer */
html[data-theme="dark"] #msEpicModalOverlay .ms-modal-footer,
html[data-theme="dark"] #msHolidayModalOverlay .ms-modal-footer,
html[data-theme="dark"] #msEpicEditModalOverlay .ms-modal-footer{
  background: transparent;
  border-top-color: rgba(255,255,255,0.10);
}

/* 紐⑤떖 踰꾪듉(Secondary) */
html[data-theme="dark"] #msEpicModalOverlay .ms-btn:not(.ms-btn-primary),
html[data-theme="dark"] #msHolidayModalOverlay .ms-btn:not(.ms-btn-primary),
html[data-theme="dark"] #msEpicEditModalOverlay .ms-btn:not(.ms-btn-primary){
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.80);
}
html[data-theme="dark"] #msEpicModalOverlay .ms-btn:not(.ms-btn-primary):hover,
html[data-theme="dark"] #msHolidayModalOverlay .ms-btn:not(.ms-btn-primary):hover,
html[data-theme="dark"] #msEpicEditModalOverlay .ms-btn:not(.ms-btn-primary):hover{
  background: rgba(255,255,255,0.12);
}

/* ?쒕∼?ㅼ슫 ?붿궡??罹먮읉) */
html[data-theme="dark"] #msEpicModalOverlay .ms-dd-caret,
html[data-theme="dark"] #msHolidayModalOverlay .ms-dd-caret,
html[data-theme="dark"] #msEpicEditModalOverlay .ms-dd-caret{
  border-right-color: rgba(255,255,255,0.55);
  border-bottom-color: rgba(255,255,255,0.55);
}

/* ---------------------------------------------------------
   9) ?댁씪 由ъ뒪??媛먯궗 濡쒓렇(紐⑤떖 ??諛뺤뒪)
   --------------------------------------------------------- */
html[data-theme="dark"] .ms-holiday-list-box{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.70);
}
html[data-theme="dark"] .ms-holiday-list-box::-webkit-scrollbar-thumb{
  background-color: rgba(255,255,255,0.20);
}

/* Audit Log */
html[data-theme="dark"] .ms-audit-section{
  border-top-color: rgba(255,255,255,0.10);
  border-bottom-color: rgba(255,255,255,0.10);
}
html[data-theme="dark"] .ms-audit-title{ color: rgba(255,255,255,0.45); }
html[data-theme="dark"] .ms-audit-item::before{ background-color: rgba(255,255,255,0.25); }
html[data-theme="dark"] .ms-audit-header{ color: rgba(255,255,255,0.55); }
html[data-theme="dark"] .ms-audit-user{ color: rgba(255,255,255,0.88); }
html[data-theme="dark"] .ms-audit-time{ color: rgba(255,255,255,0.38); }
html[data-theme="dark"] .ms-audit-content{
  background: rgba(255,255,255,0.05);
}
html[data-theme="dark"] .ms-change-row{ color: rgba(255,255,255,0.86); }
html[data-theme="dark"] .ms-change-label{ color: rgba(255,255,255,0.55); }
html[data-theme="dark"] .ms-reason-row{
  border-top-color: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.70);
}
html[data-theme="dark"] .ms-audit-list::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.22);
}