/* 메디킷 뼈대(D-1080 4단계) — 메디킷 클래스로 안 되는 배치만 여기 둔다.
 * 사이드바는 메디킷 MarketingMenu(펼침 274, 접힘 76)를 따른다. 메디킷은 접힘과 펼침을 서로 다른
 * 클래스로 그리는데, 캐스티는 접기 단추(#app.is-collapsed)와 1100px 이하 자동 접기를 CSS 로 해 왔다.
 * 그 둘을 여기서 같은 모습으로 맞춘다. 색은 쓰지 않는다(색은 메디킷 클래스와 토큰이 맡는다). */

.mk-side { position: sticky; top: 0; height: 100vh; overflow: hidden; }
/* 관리자 메뉴가 많으면 화면보다 길어진다 — 목록만 스크롤 */
/* 목록이 스크롤 상자라 안쪽 포커스 링(2px 링과 2px 띄움)이 잘리지 않게 사방 4px 여유를 둔다 */
.mk-side [data-side-nav] { flex: 0 1 auto; min-height: 0; overflow-y: auto; padding: 24px 4px 4px; margin: 0 -4px; width: calc(100% + 8px); }
.mk-side [data-side-nav] > * { flex-shrink: 0; }
.mk-side [data-side-ico] svg { width: 20px; height: 20px; display: block; }

/* 접힘 — 아이콘만, 이름은 app.js 가 title 로 옮겨 마우스를 올리면 보인다 */
.app.is-collapsed .mk-side { width: 76px; align-items: center; }
.app.is-collapsed .mk-side [data-side-label],
.app.is-collapsed .mk-side [data-side-badge],
.app.is-collapsed .mk-side [data-side-version],
.app.is-collapsed .mk-side [data-side-logo] { display: none; }
.app.is-collapsed .mk-side [data-side-head] { justify-content: center; padding: 0; }
.app.is-collapsed .mk-side [data-side-item] { width: 40px; padding: 0; justify-content: center; }
.app.is-collapsed .mk-side [data-side-collapse] svg { transform: rotate(180deg); }
.app.is-collapsed .mk-side [data-side-nav],
.app.is-collapsed .mk-side [data-side-foot] { align-items: center; }
/* 「캐스팅 기록」 배지 껍데기(#nav-unseen)는 폴링이 갈아 끼울 자리라 늘 남는다. 접히면 그 빈 칸과 링크의 간격(16px)
   때문에 그 아이콘만 왼쪽으로 치우친다. 「안내 다시 보기」는 폭 100% 폼 안이라 단추가 폼 왼쪽에 붙는다 */
.app.is-collapsed .mk-side #nav-unseen { display: none; }
.app.is-collapsed .mk-side [data-side-foot] form { display: flex; justify-content: center; }

/* 1100px 이하 — 접힘과 같은 모습. 이미 가장 좁아 접기 단추는 감춘다. 나중에 실리는 medikit.css 의 폭 낱말을
   이기도 .app 을 앞에 붙여 무게를 올린다 */
@media (max-width: 1100px) {
  .app .mk-side { width: 76px; align-items: center; }
  .app .mk-side [data-side-label],
  .app .mk-side [data-side-badge],
  .app .mk-side [data-side-version],
  .app .mk-side [data-side-logo],
  .app .mk-side [data-side-collapse] { display: none; }
  .app .mk-side [data-side-head] { justify-content: center; padding: 0; }
  .app .mk-side [data-side-item] { width: 40px; padding: 0; justify-content: center; }
  .app .mk-side [data-side-nav],
  .app .mk-side [data-side-foot] { align-items: center; }
  .app .mk-side #nav-unseen { display: none; }
  .app .mk-side [data-side-foot] form { display: flex; justify-content: center; }
}

/* 상단바(메디킷 AppHeader) — 위에 붙어 있게, 좁은 화면에서는 여백을 줄이고 줄을 접는다 */
/* 전환 줄(직원에게만)과 상단바를 한 묶음으로 위에 붙인다 */
.mk-topwrap { position: sticky; top: 0; z-index: 30; }
/* 전환 줄이 있으면 위 묶음이 86 이라 캠페인 화면의 위 높이(--cx-top)도 맞춘다 */
:root:has([data-staffbar]) { --cx-top: 86px; }
@media (max-width: 900px) {
  /* 위아래 5 — 한 줄이면 넓은 폭과 같은 48(5+36+5+선 1, 최소 48)이라 --cx-top 과 맞는다 */
  .mk-top { height: auto; min-height: 48px; padding: 5px 14px; flex-wrap: wrap; row-gap: 4px; }
}
@media (max-width: 600px) {
  /* 휴대폰 폭에서는 접힌 사이드바를 예전 폭(64)으로 — 메디킷 76 이면 본문이 12px 좁아져
     캐스팅 기록 줄이 넘쳤다(뼈대 교체 실측 375px). 아이콘 칸 40 은 그대로 들어간다 */
  .app .mk-side { width: 64px; padding-left: 4px; padding-right: 4px; }
  .mk-top { padding: 5px 12px; }
  .mk-top [data-chip-text] { display: none; }
}

/* 마우스를 올려도 글자색을 그대로 — v4.css 의 a:hover{color:--text-1} 가 메디킷 글자색 낱말보다 무거워
   켜진 메뉴 이름만 검게 바뀌고 아이콘은 분홍으로 남았다. 메디킷 메뉴는 호버 모양을 두지 않는다 */
.mk-side a[data-side-item]:hover { color: var(--ms-gray-700); }
.mk-side a[aria-current="page"]:hover { color: var(--ms-primary); }
.mk-top a:hover { color: var(--ms-gray-700); }
.mk-top a.text-red:hover { color: var(--ms-red); }
/* 제목 칸은 넘치면 줄임표로 자른다. 안쪽 탭 링크의 포커스 링이 잘리지 않게 여유 */
.mk-top [data-topbar-title] { padding: 4px; }
@media (max-width: 600px) {
  .mk-top [data-topbar-right] { flex-shrink: 1; flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; }
}

/* ── 워크 뼈대(D-1081 B안) ─────────────────────────────────────────────────
 * 워크 화면은 layout.html 을 쓰지 않고 partials/work_head.html 을 부른다. 사이드바는 화면 왼쪽에 고정하고,
 * 본문(.cl-shell)과 머리줄(.mk-wtop)이 그 폭만큼 비켜 준다. 나중에 실리는 medikit.css 의 폭과 배치 낱말을
 * 이기도록 id 로 잡는다. 960px 이하에서는 위 가로줄로 접고 「메뉴」 단추로 펼친다(종전과 같은 동작) */
#cl-sidebar { position: fixed; top: 0; left: 0; bottom: 0; height: 100vh; z-index: 30; overflow: hidden; }
#cl-sidebar [data-side-nav] { overflow-y: auto; padding: 24px 4px 4px; margin: 0 -4px; width: calc(100% + 8px); }
#cl-sidebar [data-side-nav] > * { flex-shrink: 0; }
#cl-sidebar [data-side-ico] svg { width: 20px; height: 20px; display: block; }
#cl-sidebar a[data-side-item]:hover { color: var(--ms-gray-700); }
#cl-sidebar a[aria-current="page"]:hover { color: var(--ms-primary); }
#cl-nav-toggle { display: none; }
/* 워크 머리줄 높이 — 제품 전환 줄 38 + 담당자 줄 48. 좁은 폭에서는 위로 접힌 사이드바(위 4 + 머리 48 + 아래 8
   + 선 1)까지 더한다. 대화 화면과 키 큰 표 상자가 이만큼 뺀다(static/css/work.css) */
:root { --w-head: 86px; --w-head-narrow: 147px; }
.mk-wtop { margin-left: 274px; }
@media (max-width: 960px) {
  #cl-sidebar { position: static; width: auto; height: auto; border-right: none; border-bottom: 1px solid var(--ms-gray-300); padding-bottom: 8px; }
  #cl-nav-toggle { display: inline-flex; }
  #cl-sidebar-body { display: none; }
  #cl-sidebar-body.is-open { display: flex; }
  .mk-wtop { margin-left: 0; }
  .mk-wtop header { padding: 0 16px; }
}

/* 스크립트가 잠갔다 푸는 단추(고른 사람이 없으면 잠김 등). 메디킷에는 잠긴 모양을 상태로 바꾸는 낱말이
   disabled:cursor-not-allowed 하나뿐이라, data-mk-lock 표식이 붙은 단추만 잠기면 부품 매크로의 잠김 색(_BTN_OFF)과
   같게 칠한다. .mk 전체에 걸면 캐스티 발송 카드처럼 잠겨도 제 색을 두던 단추까지 바뀐다(도구 줄 리뷰) */
.mk button[data-mk-lock]:disabled, .mk button[data-mk-lock]:disabled:hover { background-color: var(--ms-gray-300); color: var(--ms-white); border-color: transparent; }

/* --- 옛 공용 부품의 메디킷 옷(캐스티와 워크 화면 전부, 2026-10-21) ----------------------
   화면들은 공용 부품(.btn, .field, .panel, .admin-table, .modal 등, static/css/app.css)을 쓴다. 화면 파일을
   하나씩 매크로로 바꾸기 전에, 메디킷 뼈대(캐스티 상단바 .mk-top, 워크 머리줄 .mk-wtop)가 있는 화면에서 그
   부품을 메디킷 값(색, 글자, 크기, 둥근 정도)으로 덮는다. 로그인처럼 뼈대가 없는 화면은 그대로다. 범위는 :where() 로 감싸 원래 선택자와 같은 무게로
   둔다. 이 파일(shell.css)은 base.html 에서 화면별 CSS(head 블록의 billing.css, campaign_v4.css, work.css 등)와
   responsive.css 보다도 뒤에 읽혀, 같은 무게면 이 묶음이 이긴다. 화면별로 더 좁게 쓴 규칙(.cl-sales .field
   처럼 클래스가 더 붙은 것)만 이긴다. 그래서 responsive.css 의 좁은 화면 크기는 아래 미디어 쿼리로 다시 준다.
   값의 출처는
   templates/partials/mk.html 의 단추, 입력, 카드, 표 매크로다. --ms-black 은 색이 아니라 세 숫자라 rgb() 로 감싼다. 캐스티 화면을 바꿀 때 이 묶음을 옮겨 쓴다 */
:where(:root:has(.mk-top, .mk-wtop)) {
  .btn { gap: 4px; height: 36px; padding: 0 12px; border-radius: 6px; font-size: 14px; font-weight: 500; line-height: 1.5;
         background: transparent; border: 1px solid transparent; color: rgb(var(--ms-black)); }
  .btn.sm { height: 33px; padding: 0 12px; border-radius: 6px; font-size: 14px; }
  .btn.brand { background: var(--ms-primary); color: var(--ms-white); font-weight: 500; }
  .btn.brand:hover { background: var(--ms-primary-500); }
  .btn.ghost, .btn.icon { background: var(--ms-white); border-color: var(--ms-gray-300); color: rgb(var(--ms-black)); }
  .btn.ghost:hover, .btn.icon:hover { background: var(--ms-gray-200); border-color: var(--ms-gray-300); color: rgb(var(--ms-black)); }
  .btn.icon { width: 33px; height: 33px; padding: 0; }
  .btn.is-quiet { background: transparent; border-color: transparent; color: var(--ms-gray-600); }
  .btn.is-quiet:hover { background: var(--ms-gray-200); color: rgb(var(--ms-black)); }
  .btn.danger { background: var(--ms-red); border-color: transparent; color: var(--ms-white); font-weight: 500; }
  .btn.danger-ghost { background: var(--ms-white); border-color: var(--ms-red); color: var(--ms-red); }
  .btn:disabled, .btn:disabled:hover { background: var(--ms-gray-300); border-color: transparent; color: var(--ms-white); }

  .field { height: 40px; padding: 0 12px; border: 1px solid var(--ms-gray-300); border-radius: 8px;
           background: var(--ms-white); color: rgb(var(--ms-black)); font-size: 14px; }
  .field.sm { height: 33px; }
  textarea.field { height: auto; padding: 8px 12px; line-height: 1.6; }
  .field::placeholder { color: var(--ms-gray-600); }
  .field:focus { border-color: var(--ms-primary); }
  .fgroup > .flabel { font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--ms-gray-600); }

  .panel { background: var(--ms-white); border: 1px solid var(--ms-gray-300); border-radius: 12px; padding: 24px; }
  .sec-label { margin: 0 0 8px; font-size: 16px; font-weight: 500; line-height: 1.5; letter-spacing: 0; color: rgb(var(--ms-black)); }
  .page-title { font-size: 24px; font-weight: 600; line-height: 1.4; letter-spacing: 0; color: rgb(var(--ms-black)); }
  .page-desc, .hint { font-size: 12px; line-height: 1.3; color: var(--ms-gray-600); }

  .admin-table th, .admin-table td { padding: 12px 16px; border-bottom: 1px solid var(--ms-gray-200); font-size: 14px; line-height: 1.6; }
  .admin-table th { background: var(--ms-primary-100); font-weight: 400; color: rgb(var(--ms-black)); }
  .admin-table td { color: var(--ms-gray-800); }

  .backdrop, .modal-back { background: var(--ms-overlay); }
  .modal { background: var(--ms-white); border: 0; border-radius: 12px; padding: 24px; box-shadow: 0 0 4px 0 var(--ms-gray-300); }
  .modal-title { font-size: 16px; font-weight: 600; letter-spacing: 0; color: rgb(var(--ms-black)); }
  .modal-desc { font-size: 14px; color: var(--ms-gray-600); }

  /* responsive.css 의 좁은 화면 값(이 묶음이 뒤라 덮이므로 다시 준다) */
  @media (max-width: 900px) { .panel { padding: 16px; } }
  @media (max-width: 560px) { .page-title { font-size: 20px; } }
  /* 1024 폭에서 사용자 관리 표가 상자보다 52px 넓어 오른쪽 관리 단추가 잘려 보였다(상자 안 가로 스크롤은 눈에 안 띈다) —
     칸 좌우 여백을 줄여 넣는다. 더 좁으면(900 이하) 원래대로 상자 안에서 옆으로 흐른다 */
  @media (max-width: 1450px) { .admin-table th, .admin-table td { padding: 12px 10px; } }
}
/* 다크에서 메디킷 잠김 색(회색 위 --ms-white)은 --ms-white 가 어두운 카드색이 되어 글자가 안 보인다 —
   잠긴 단추 글자만 옛 보조 글자색으로 둔다(공용 부품 옷 리뷰). 매크로 단추와 data-mk-lock 도 같다(그 규칙보다 뒤, 같은 무게) */
:root[data-theme="dark"] .btn:disabled, :root[data-theme="dark"] .mk button:disabled { color: var(--text-3); }