/* C common visual foundation. Based on the active Workflow design language. */
:root {
    --tw-bg: #ffffff;
    --tw-bg-soft: #fafafa;
    --tw-bg-hover: #f4f5f7;
    --tw-border: #e3e8ef;
    --tw-border-strong: #e1e4e8;
    --tw-text: #172033;
    --tw-text-secondary: #2f3b4e;
    --tw-text-muted: #3d495b;
    --tw-text-faint: #48566a;
    --tw-text-placeholder: #526074;
    --tw-accent: #5e6ad2;
    --tw-accent-hover: #4f5ac3;
    --tw-accent-soft: #eef0ff;
    --tw-danger: #b33434;
    --tw-radius-sm: 8px;
    --tw-radius-md: 12px;
    --tw-radius-lg: 18px;
    --tw-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    --tw-font: "Tware Korean UI", "Nanum Gothic", NanumGothic,
        -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic",
        "맑은 고딕", "Apple SD Gothic Neo", sans-serif;
    --tw-ease: cubic-bezier(.4, 0, .2, 1);

    /* --- 공통 컴포넌트 토큰 (tware-ui 에서 이관) --- */
    --tw-canvas: #ffffff;
    --tw-surface: #ffffff;
    /*
        표 머리글 바탕.

        회색 띠를 깔면 표가 낡아 보인다(#f5f7fa → #f4f5f7 로 옮겨 봐도 그대로였다).
        바탕과 거의 같은 흰빛으로 두고, 머리글은 아래 굵은 선과 진한 글자로
        알아보게 한다. 자료가 먼저 눈에 들고 표가 가벼워진다.
    */
    --tw-header: #fcfcfd;
    --tw-selected: #e8f1ff;
    --tw-focus: #1668dc;
    --tw-text-strong: #111827;
    --tw-surface-muted: #f8f9fb;
    /*
        문서함처럼 업무 화면과 한 덩어리로 보여야 하는 표의 머리글 바탕.
        맹물 회색(#f1f1f1)은 푸른 기가 도는 이 화면 위에서 혼자 탁했다.
        표면(#f8f9fb)과 테두리(#e3e8ef)에서 뽑은 빛깔로 둔다.
    */
    /* 자료 표(12px 스킨) 머리글. 사이트의 중립 표면(#f8f9fb)과 같은 결로 둔다. 푸른 띠는 화면과 따로 놀았다. */
    --tw-grid-header-surface: #f6f7f9;
    --tw-grid-group-header-surface: #eceef2;
    --tw-border-soft: #e9ecf1;
    --tw-action: #202938;
    --tw-action-hover: #111827;
    --tw-info: #2459a8;
    --tw-info-soft: #eaf2ff;
    --tw-warning: #8a5c08;
    --tw-warning-soft: #fff3dc;
    --tw-danger-soft: #fff0f0;
    --tw-space-1: 4px;
    --tw-space-2: 8px;
    --tw-space-3: 12px;
    --tw-space-4: 16px;
    --tw-space-5: 20px;
    --tw-space-6: 24px;
    --tw-font-size-min: 11px;
    /*
     * 30px 짜리 그림자는 카드 아래에 회색 띠를 남겨 테두리가 두꺼워 보이게 한다.
     * 카드가 바닥에서 살짝 떠 보일 만큼만 남기고, 테두리는 한 톤 옅게 둔다.
     */
    /* 카드는 1px 선 하나로만 나눈다. 옅은 그림자라도 깔리면 선이 번져 뿌옇게 보인다(2026-09-16). */
    --tw-shadow-card: none;
    /* 화면 너비를 그대로 쓴다. 열이 많은 표(기성, 원장)는 폭을 묶어 두면
       쓸 수 있는 자리를 남겨 두고도 가로로 밀어야 한다. 좁게 두어야 하는
       화면은 그 화면 CSS 에서 이 값을 따로 정한다. */
    --tw-page-content-max: none;
    --tw-page-padding-inline: 20px;
    --tw-page-padding-block-start: 20px;
    --tw-page-padding-block-end: 20px;
    /* 정상·성공 — 상태 표시에만 쓴다 */
    --tw-success: #1a6d4a;
    --tw-success-soft: #eaf6f0;
    /*
       엑셀 초록. 엑셀 아이콘의 빛깔이다. 상태를 나타내는 성공색과 뜻이 달라
       따로 둔다. 표를 엑셀로 내려받는 단추에만 쓴다.
    */
    --tw-excel: #217346;
    --tw-excel-hover: #1a5c38;
    /* 옛 화면 그대로 옮겨온 표(스프레드시트 모양)의 글자색. 옛 화면과 눈으로 같아야 해서 값이 따로 있다. */
    --tw-legacy-grid-text: #333;
    /* 같은 표의 머리글 바탕. 바탕이 없으면 줄이 많을 때 어디까지가 이름줄인지
       눈에 들어오지 않는다.

       옛 화면 껍데기(simple_gray.css)는 여기에 누런 빛(#f8f7f2)을 썼다. 그룹웨어
       바탕은 푸른 쪽으로 기운 회색(`--tw-surface-muted` #f8f9fb, `--tw-border`
       #e3e8ef)이라, 그 누런 머리글만 홀로 떠 보인다. 같은 푸른 회색 계열에서
       바탕보다 한 단 짙은 값으로 옮겼다.

       합칠 때 task-1 쪽과 부딪혔다. 그쪽은 color-mix(--tw-accent 4%, --tw-header)
       로 잡아 두고 '옛 화면 값 그대로' 라 적었는데, 옛 값은 누런 #f8f7f2 였으므로
       그 말은 맞지 않는다. 그 값은 거의 흰빛(#fcfcfd 에 남색 4%)이라 머리글이 다시
       바탕에 묻힌다. 위의 조사 결과를 남긴다. 되돌리려면 task-1 쪽과 이야기해야 한다. */
    --tw-legacy-grid-header: #eef1f6;

    /* --- 구분용 범주색 ---
       좋고 나쁨이 아니라 서로 다른 갈래를 나타낼 때 쓴다. 공유 범위,
       분류 태그처럼 값이 몇 가지로 나뉘는 자리다. 상태(성공·경고·위험)
       에는 쓰지 않는다. 화면마다 새 색을 만들지 말고 여기서 고른다. */
    --tw-category-violet: #6b4aa3;
    --tw-category-violet-soft: #f0e9fc;
    --tw-category-magenta: #a03a72;
    --tw-category-magenta-soft: #fae7f2;
    --tw-category-teal: #166d78;
    --tw-category-teal-soft: #e2f4f6;

    /* --- 일정 막대 ---
       달력에서 항목마다 하나씩 나누어 주는 빛깔이다. 종류가 많아 분류 태그
       셋으로는 모자란 자리에만 쓴다. 옅은 바탕과 짙은 테두리가 짝이고,
       바탕 위의 본문 글자(`--tw-text`)가 4.5:1을 넘도록 옅게 잡았다.
       화면마다 색을 새로 만들지 말고 번호로 골라 쓴다. */
    --tw-calendar-1: #eef0ff;
    --tw-calendar-1-line: #5e6ad2;
    --tw-calendar-2: #eaf2ff;
    --tw-calendar-2-line: #2459a8;
    --tw-calendar-3: #eaf6f0;
    --tw-calendar-3-line: #1a6d4a;
    --tw-calendar-4: #fff3dc;
    --tw-calendar-4-line: #8a5c08;
    --tw-calendar-5: #f0e9fc;
    --tw-calendar-5-line: #6b4aa3;
    --tw-calendar-6: #fae7f2;
    --tw-calendar-6-line: #a03a72;
    --tw-calendar-7: #e2f4f6;
    --tw-calendar-7-line: #166d78;
    --tw-calendar-8: #fff0f0;
    --tw-calendar-8-line: #b33434;
    --tw-calendar-9: #edf3e6;
    --tw-calendar-9-line: #4d6b1f;
    --tw-calendar-10: #eaf1f4;
    --tw-calendar-10-line: #2b5f73;
    --tw-calendar-11: #f6eee6;
    --tw-calendar-11-line: #8a5230;
    --tw-calendar-12: #eeeef4;
    --tw-calendar-12-line: #4a4f6b;
    --tw-calendar-13: #e9f4ef;
    --tw-calendar-13-line: #1f6b5c;
    --tw-calendar-14: #f4ecf6;
    --tw-calendar-14-line: #7a3d80;
    --tw-calendar-15: #f1f1e6;
    --tw-calendar-15-line: #6b6420;
    --tw-calendar-16: #e8eff7;
    --tw-calendar-16-line: #34557e;

    /* --- 많고 적음의 농도 ---
       조직별 인원, 날짜별 건수처럼 값의 크기를 배경 짙기로 거들 때 쓴다.
       새 색이 아니라 강조색을 바탕색에 섞은 정도라서 강조색을 바꾸면 함께 바뀐다.

       가장 짙은 단도 진한 글자가 읽히는 밝기까지만 간다. 색은 거들 뿐이고
       값은 언제나 숫자로 함께 적는다. 색만으로 뜻을 전하지 않는다. */
    --tw-heat-1: color-mix(in srgb, var(--tw-accent) 10%, var(--tw-bg));
    --tw-heat-2: color-mix(in srgb, var(--tw-accent) 22%, var(--tw-bg));
    --tw-heat-3: color-mix(in srgb, var(--tw-accent) 34%, var(--tw-bg));
    --tw-heat-4: color-mix(in srgb, var(--tw-accent) 46%, var(--tw-bg));
    --tw-heat-5: color-mix(in srgb, var(--tw-accent) 58%, var(--tw-bg));

    /* --- 그림자 ---
       띄우는 정도를 세 단계로만 쓴다. 화면마다 값을 새로 적지 않는다. */
    --tw-shadow-sm: 0 1px 3px rgba(24, 39, 61, .08);
    --tw-shadow-lg: 0 14px 34px rgba(27, 42, 64, .18);
    /* 대화상자 뒤를 덮는 막 */
    --tw-scrim: rgba(20, 27, 39, .38);
}

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    min-height: 100%;
    color: var(--tw-text);
    font-family: var(--tw-font);
    -webkit-font-smoothing: auto;
    text-rendering: optimizeLegibility;
}

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

input::placeholder,
textarea::placeholder {
    color: var(--tw-text-placeholder);
    opacity: 1;
}

button, a, input, select, textarea {
    transition: border-color 100ms var(--tw-ease), background-color 100ms var(--tw-ease),
        color 100ms var(--tw-ease), box-shadow 100ms var(--tw-ease);
}

:focus-visible {
    outline: 2px solid var(--tw-accent);
    outline-offset: 2px;
}

[hidden] {
    display: none !important;
}

/* ============================================================
   로그인 없이 여는 공통 업무 화면 셸
   ------------------------------------------------------------
   공개 채용, 외부 공유처럼 그룹웨어 메뉴 프레임을 쓰지 않는 화면도
   같은 글꼴·간격·표면 규칙을 사용한다. 업무별 색과 카드 모양은 만들지 않는다.
   ============================================================ */
.tw-public-shell {
    min-height: 100dvh;
    background: var(--tw-surface-muted);
    color: var(--tw-text);
}

.tw-public-shell__bar {
    border-bottom: 1px solid var(--tw-border);
    background: var(--tw-bg);
}

.tw-public-shell__bar-inner,
.tw-public-shell__main {
    width: min(100%, 1440px);
    margin-inline: auto;
}

.tw-public-shell__bar-inner {
    display: flex;
    min-height: 68px;
    align-items: center;
    justify-content: space-between;
    gap: var(--tw-space-4);
    padding-inline: var(--tw-page-padding-inline);
}

.tw-public-shell__brand {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: var(--tw-space-3);
    color: var(--tw-text-strong);
    font-size: 17px;
    font-weight: 600;
    text-decoration: none;
}

.tw-public-shell__brand:hover {
    color: var(--tw-accent-hover);
    text-decoration: none;
}

.tw-public-shell__brand img {
    display: block;
    width: auto;
    max-width: min(190px, 46vw);
    height: 34px;
    object-fit: contain;
}

.tw-public-shell__nav {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--tw-space-2);
}

.tw-public-shell__main {
    padding: var(--tw-page-padding-block-start) var(--tw-page-padding-inline)
        var(--tw-page-padding-block-end);
}

@media (max-width: 640px) {
    .tw-public-shell__bar-inner {
        min-height: 60px;
    }

    .tw-public-shell__brand span {
        display: none;
    }

    .tw-public-shell__nav .tw-action-button {
        min-height: 38px;
        padding-inline: var(--tw-space-3);
    }
}

/* ============================================================
   목록 화면 공통 컴포넌트
   ------------------------------------------------------------
   게시판 목록이 써 온 생김새를 공통 레이어로 올린 것이다. 값은 board-list.css
   에서 그대로 가져왔다. 화면마다 표면·버튼·표를 다시 만들지 말고 여기를 쓴다.

   opt-in 이다. 목록 화면 루트에 tw-list-screen 을 붙인 화면에만 적용되므로
   아직 전환하지 않은 화면에는 영향이 없다. 게시판은 자기 CSS 를 뒤에 로드해
   같은 값을 그대로 유지한다. 전환이 끝나면 각 모듈의 중복 정의를 걷어낸다.
   ============================================================ */

/*
   목록 자리는 테두리 상자가 아니다. 제목 → 조회 띠 → 표가 한 면 위에 그대로 놓인다.
   상자를 두르면 안쪽 여백이 또 생겨 제목·조회 띠·표의 왼쪽 선이 어긋났다.
   조회 띠의 좌우 여백과 제목 아래 여백도 같이 0 이다.
*/
.tw-list-screen__surface {
    position: relative;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: var(--tw-bg);
    box-shadow: none;
}

.tw-list-screen__toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.tw-action-button {
    display: inline-flex;
    /* 링크로 만든 단추도 글자에 밑줄이 생기지 않아야 한다. */
    text-decoration: none;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--tw-border);
    border-radius: var(--tw-radius-sm);
    padding: 0 15px;
    background: var(--tw-bg);
    color: var(--tw-text);
    font: inherit;
    font-size: 14px;
    font-weight: 650;
    white-space: nowrap;
    /* 단추 노릇을 하는 a 에 밑줄이 생기지 않게 한다. 단추는 밑줄을 갖지 않는다. */
    text-decoration: none;
    cursor: pointer;
}

.tw-action-button:hover { text-decoration: none; }

.tw-action-button:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--tw-border) 62%, var(--tw-text-muted));
    background: var(--tw-surface-muted);
}

/*
 * 링크로 만든 단추는 disabled 를 달 수 없어 aria-disabled 로 표시한다.
 * 그동안 눌러도 아무 일이 없으면서 모양은 멀쩡해, 왜 안 되는지 알 수 없었다.
 */
.tw-action-button:disabled,
.tw-action-button.is-disabled,
.tw-action-button[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: .45;
}

.tw-action-button.is-primary {
    border-color: var(--tw-accent);
    background: var(--tw-accent);
    color: var(--tw-bg);
    box-shadow: 0 7px 18px color-mix(in srgb, var(--tw-accent) 22%, transparent);
}

.tw-action-button.is-primary:hover:not(:disabled) {
    border-color: var(--tw-accent-hover);
    background: var(--tw-accent-hover);
}

.tw-action-button.is-quiet {
    border-color: transparent;
    background: transparent;
    color: var(--tw-text-muted);
    font-weight: 400;
}

/*
   표를 엑셀로 내려받는 단추. 어느 화면에서나 엑셀 초록을 쓴다.
   초록 단추가 하나면 그것이 엑셀이라는 것을 글을 읽지 않고도 안다.
   `tw-button`으로 만든 화면도 같은 빛깔을 쓰도록 함께 적어 둔다.
*/
.tw-action-button.is-excel,
.tw-button.is-excel,
.tware-button.is-excel {
    border-color: var(--tw-excel);
    background: var(--tw-excel);
    color: var(--tw-bg);
}

.tw-action-button.is-excel:hover:not(:disabled),
.tw-button.is-excel:hover:not(:disabled),
.tware-button.is-excel:hover:not(:disabled) {
    border-color: var(--tw-excel-hover);
    background: var(--tw-excel-hover);
    color: var(--tw-bg);
}

.tw-action-button.is-excel:disabled,
.tw-button.is-excel:disabled,
.tware-button.is-excel:disabled {
    opacity: .55;
}

/*
   표 칸 안에 서는 작은 단추. 기본 단추는 손가락으로 누르는 크기(42px)라
   표 칸에 넣으면 그 높이가 그대로 줄 높이가 되어 목록이 성기게 벌어진다.
   여기서는 글자 한 줄에 맞춘 크기를 쓴다.
*/
.tw-action-button.is-compact {
    min-height: 26px;
    padding: 0 10px;
    border-radius: calc(var(--tw-radius-sm) - 1px);
    font-size: 12px;
    font-weight: 650;
}

/*
   휴대전화에서 「더보기」 뒤로 들어간 작업들. 제목 옆 단추 줄 아래에 목록으로 뜬다.
   안의 단추는 테두리 없이 항목처럼 왼쪽 정렬이고, 감춰 둔(hidden)·못 누르는(disabled)
   상태는 그대로 따른다.
*/
.tw-action-overflow {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 200px;
    max-width: min(320px, calc(100vw - 24px));
    padding: 6px;
    border: 1px solid var(--tw-border);
    border-radius: var(--tw-radius-md);
    background: var(--tw-bg);
    box-shadow: var(--tw-shadow-lg);
}

.tw-action-overflow[hidden] { display: none; }

.tw-action-overflow > * { display: block; min-width: 0; }
.tw-action-overflow > span:not(.tw-action-button) { display: flex; flex-direction: column; gap: 2px; }

.tw-action-overflow .tw-action-button {
    display: inline-flex;
    justify-content: flex-start;
    width: 100%;
    min-height: 40px;
    border: 0;
    border-radius: var(--tw-radius-sm);
    padding: 0 10px;
    background: transparent;
    box-shadow: none;
    color: var(--tw-text);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.tw-action-overflow .tw-action-button.is-danger { color: var(--tw-danger); }
.tw-action-overflow .tw-action-button:hover:not(:disabled) { background: var(--tw-surface-muted); }
.tw-action-overflow .tw-action-button > i { width: 18px; text-align: center; }
.tw-action-overflow .tw-action-button > span:not(.sr-only) {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
}
.tw-action-overflow .tw-segmented { margin: 4px 6px; }

/* 자리가 모자라 메뉴 안으로 들어간 액션. 메뉴에서는 버튼 하나하나가
   테두리를 갖는 대신 항목처럼 왼쪽으로 정렬된다. */
.tw-action-button.is-menu-item {
    justify-content: flex-start;
    width: 100%;
    min-height: 34px;
    border: 0;
    border-radius: var(--tw-radius-sm);
    box-shadow: none;
}

/* 되돌릴 수 없는 작업(영구 삭제 등). 주 작업과 헷갈리지 않게 테두리와
   글자만 위험색을 쓰고 배경은 옅게 둔다. */
.tw-action-button.is-danger {
    border-color: var(--tw-danger);
    background: var(--tw-danger-soft);
    color: var(--tw-danger);
}

.tw-action-button.is-danger:hover:not(:disabled) {
    border-color: var(--tw-danger);
    background: color-mix(in srgb, var(--tw-danger-soft) 78%, var(--tw-danger));
    color: var(--tw-danger);
}

.tw-action-button.is-quiet:hover:not(:disabled) {
    border-color: transparent;
    background: var(--tw-surface-muted);
    color: var(--tw-text);
}

/*
   상태를 바꾸는 단추. 확인 처리, 되돌리기처럼 한 번 더 생각하고 눌러야 하는 것에 쓴다.
   위험색만큼 세지 않되 예사 단추와는 구별되어야 한다. is-danger 와 같은 결로
   테두리와 글자에 색을 쓰고 배경은 옅게 둔다.
*/
.tw-action-button.is-warning {
    border-color: var(--tw-warning);
    background: var(--tw-warning-soft);
    color: var(--tw-warning);
}

.tw-action-button.is-warning:hover:not(:disabled) {
    border-color: var(--tw-warning);
    background: color-mix(in srgb, var(--tw-warning-soft) 78%, var(--tw-warning));
    color: var(--tw-warning);
}

/* 내려받기처럼 결과를 손에 쥐는 단추. */
.tw-action-button.is-success {
    border-color: var(--tw-success);
    background: var(--tw-success-soft);
    color: var(--tw-success);
}

.tw-action-button.is-success:hover:not(:disabled) {
    border-color: var(--tw-success);
    background: color-mix(in srgb, var(--tw-success-soft) 78%, var(--tw-success));
    color: var(--tw-success);
}

/*
   표 안에서 합격·불합격처럼 서로 반대인 판정 작업을 바로 고르는 단추.
   보통 성공·위험 단추는 옅은 바탕을 쓰지만, 한 칸 안에 나란히 놓인 판정
   단추는 단색으로 구별한다. 삭제 단추에는 쓰지 않는다.
*/
.tw-action-button.is-status-success {
    border-color: var(--tw-success);
    background: var(--tw-success);
    color: var(--tw-bg);
    box-shadow: none;
}

.tw-action-button.is-status-success:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--tw-success) 84%, var(--tw-text-strong));
    background: color-mix(in srgb, var(--tw-success) 84%, var(--tw-text-strong));
    color: var(--tw-bg);
}

.tw-action-button.is-status-danger {
    border-color: var(--tw-danger);
    background: var(--tw-danger);
    color: var(--tw-bg);
    box-shadow: none;
}

.tw-action-button.is-status-danger:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--tw-danger) 84%, var(--tw-text-strong));
    background: color-mix(in srgb, var(--tw-danger) 84%, var(--tw-text-strong));
    color: var(--tw-bg);
}

/* 되돌릴 수 없는 작업. 누르기 전에 한 번 더 보이라고 색을 준다. */
.tw-action-button.is-danger {
    border-color: color-mix(in srgb, var(--tw-danger) 34%, var(--tw-border));
    background: var(--tw-danger-soft);
    color: var(--tw-danger);
}

.tw-action-button.is-danger:hover:not(:disabled) {
    border-color: var(--tw-danger);
    background: color-mix(in srgb, var(--tw-danger) 10%, var(--tw-bg));
    color: var(--tw-danger);
}

/* 목록 표 — 게시판과 같은 행 높이와 글자 크기를 쓴다 */
.tw-list-screen .tw-grid {
    border: 0;
    border-radius: 0;
}

.tw-list-screen .tw-grid-table {
    font-size: 14px;
}

/*
   줄 높이. 50px이던 것을 40px로 줄인다. 한 줄짜리 값이 대부분인 목록에서
   50px은 글자 높이의 두 배가 넘어 한 화면에 담기는 줄이 눈에 띄게 적었다.
   머리글만 두 칸 더 두어 값과 구분되게 한다.
*/
.tw-list-screen .tw-grid-table td {
    height: 40px;
    border-color: var(--tw-border-soft);
}

.tw-list-screen .tw-grid-table th {
    height: 42px;
    border-color: var(--tw-border-soft);
}

/* --- 제목 영역: 에일브로우 + 제목 + 우측 액션 --- */
.tw-list-screen__heading {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px 24px;
    margin-bottom: 0;
    min-width: 0;
}

/*
 * 좁은 화면에서 제목 혼자 한 줄을 넘길 때는 줄어들 수 있어야 한다.
 * 줄지 못하게 막으면 긴 제목이 화면 밖으로 밀려 가로 스크롤이 생긴다.
 */
.tw-list-screen__heading > :first-child {
    flex: 0 1 auto;
    min-width: 0;
}

/*
    제목 줄 바로 다음에 표면이 아닌 것(안내 상자·알림·오류)이 올 때의 사이.

    표면은 조회 줄의 높이(72px 안에 42px 칸)가 알아서 15px 남짓을 띄우지만,
    그 밖의 것은 제목 줄 단추에 그대로 붙었다(안전신문고 안내 상자가 그랬다).
    화면마다 여백을 따로 적으면 값이 갈리므로 여기서 한 번 정한다. 갈래 줄은
    제 여백을 갖고 있어 뺀다. :where 라 화면이 제 여백을 적으면 그쪽이 이긴다.

    입력 화면(.tw-form-screen)도 같은 제목 줄을 쓰면서 이 규칙 밖에 있었다.
    그래서 취소·저장 단추 바로 아래에 첫 상자가 붙었다(2026-09-28 지적,
    회의 만들기). 같은 제목 줄을 쓰면 같은 사이를 둔다.
*/
:where(.tw-list-screen > .tw-list-screen__heading
    + :not(.tw-list-screen__surface, .tw-screen-tabs, .tw-section-tabs)),
:where(.tw-form-screen > .tw-list-screen__heading
    + :not(.tw-list-screen__surface, .tw-screen-tabs, .tw-section-tabs)) {
    margin-top: 16px;
}

/*
 * 넓은 화면에서 작업 단추가 많아도 제목을 먼저 말줄임하지 않는다. 제목이 읽힐
 * 최소 폭을 남긴 뒤 작업 단추 줄이 공통 밀도 단계로 줄어들게 한다.
 */
@media (min-width: 769px) {
    .tw-list-screen__heading > :first-child {
        min-width: min(240px, 42%);
    }
}

/*
    제목 줄에 올라온 조회 줄. 붙이고 떼는 일은 screen-header.js 가 한다.

    올라오면 제목 오른쪽의 남은 자리를 쓰고, 조건은 오른쪽 끝에서부터 채운다.
    제목이 자리를 미리 잡아 두던 규칙은 여기서 푼다 — 잡아 두면 조회 칸이
    눌려 한 줄에 들어갈 것도 안 들어간다.
*/
.tw-list-screen__heading.is-joined {
    flex-wrap: nowrap;
    /*
        제목 글자에 맞춘다. 눈금은 screen-header.js 가 재서 넣는다 — 제목 위에
        작은 갈래 이름이 한 줄 있어, 덩이째 가운데를 맞추면 큰 글자가 아래로
        처져 보인다.
    */
    align-items: center;
    gap: 12px 16px;
    /* 한 줄이 되면 바로 아래가 표다. 붙지 않을 만큼만 띄운다. */
    margin-bottom: 8px;
}

/*
    제목은 줄이지 않는다. 이 줄에서 자리를 내주는 것은 조회 줄 하나뿐이다.
    제목까지 줄게 두었더니 좁은 자리에서 제목이 통째로 눌려 사라졌다.
*/
.tw-list-screen__heading.is-joined > :first-child {
    flex: 0 0 auto;
    min-width: 0;
}

/*
    작업 단추 줄은 줄이지 않는다.

    줄어들 수 있게 두면 제 안에 든 것보다 좁아지고, 그 줄을 스스로 재는 공통
    처리(action-density)가 「넘친다」고 보아 단계를 끝까지 올려 이름을 지운다.
    실제로는 자리가 있는데도 그랬다. 줄어드는 몫은 조회 줄이 맡는다.
*/
.tw-list-screen__heading.is-joined > .tw-list-screen__actions { flex: 0 0 auto; }

.tw-list-screen__toolbar.is-joined {
    flex: 1 1 auto;
    justify-content: flex-end;
    /*
        접지 말고 줄인다.

        제 줄에 있을 때는 자리가 모자라면 다음 줄로 접었다. 제목 줄에 올라와서도
        접으면 줄이 두 겹이 되어 「한 줄에 안 들어간다」고 판가름 나고, 정작 칸은
        하나도 줄지 않은 채 두 줄로 내려갔다. 여기서는 접지 않고 칸을 줄인다.
    */
    flex-wrap: nowrap;
    /* 제 줄일 때 갖던 위아래 여백은 제목 줄에서는 필요 없다. */
    min-height: 0;
    padding-block: 0;
}

/*
    올라온 조회 칸은 줄일 수 있는 만큼 줄인다. 조금만 줄이면 한 줄에 들어가는데
    그냥 두 줄로 내려가는 화면이 있었다. 글자 칸은 줄어도 쓸 수 있으므로 그쪽을
    먼저 내주고, 고른 값을 보여야 하는 조건 칸은 덜 줄인다.
*/
.tw-list-screen__toolbar.is-joined > .tw-field-control {
    flex: 0 1 auto;
    min-width: 0;
}

.tw-list-screen__toolbar.is-joined > .tw-field-control :where(input, select, .tware-dropdown) {
    min-width: 0;
}

.tw-list-screen__toolbar.is-joined > .tw-field-control:has(input) { min-width: 112px; }
.tw-list-screen__toolbar.is-joined > .tw-field-control--search { min-width: 150px; }
.tw-list-screen__toolbar.is-joined > .tw-field-control:has(select) { min-width: 92px; }

/*
    조회 줄 끝 단추는 제 줄에 있을 때만 왼쪽을 밀어 오른쪽 끝으로 간다. 제목
    줄에 올라오면 줄 전체가 이미 오른쪽에 붙으므로, 밀어내기를 그대로 두면
    조건 칸만 제목 옆에 남고 가운데가 텅 빈다.
*/
.tw-list-screen__toolbar.is-joined > [data-toolbar-end] { margin-left: 0; }

/*
    좁아지면 제 줄로 내려온다.

    붙인 채로 좁히면 제목이 자리를 다 쓰고 조회 칸이 글자를 못 읽을 만큼
    눌린다. 여기서부터는 제목 아래 제 줄에 서고, 끝 단추만 오른쪽으로 민다.
*/
@media (max-width: 900px) {
    .tw-list-screen__heading:has(> .tw-list-screen__toolbar.is-joined) {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .tw-list-screen__toolbar.is-joined {
        flex: 1 1 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .tw-list-screen__toolbar.is-joined > [data-toolbar-end] { margin-left: auto; }
}

/*
    제목 아래 갈래 줄의 옛 모양(밑줄 하나로 고른 갈래를 표시하던 때).
    지금 모양은 아래쪽 「탭 — tw-screen-tabs」 한 벌이 정한다. 칸 크기만 여기
    값이 아직 살아 있다.

    위아래 여백은 여기서 정하지 않는다. 예전에는 `margin: 4px 0 16px` 이 남아
    있어 갈래 줄만 제목에 4px 로 붙고 아래로는 18px 을 띄웠다. 제목 아래 다른
    것은 모두 16px 을 띄우는데 갈래 줄만 위아래가 갈렸던 까닭이다.
*/
.tw-screen-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid var(--tw-border);
    padding: 0 2px;
}

.tw-screen-tabs > a,
.tw-screen-tabs > button {
    display: inline-flex;
    min-height: 43px;
    align-items: center;
    gap: 8px;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 0 15px;
    background: none;
    color: var(--tw-text-muted);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.tw-screen-tabs > a:hover,
.tw-screen-tabs > button:hover {
    color: var(--tw-text-strong);
}

.tw-screen-tabs > .is-active {
    border-bottom-color: var(--tw-accent);
    color: var(--tw-accent);
}

.tw-list-screen__eyebrow {
    margin: 0;
    color: var(--tw-accent);
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .12em;
}

.tw-list-screen__heading h1 {
    margin: 0;
    overflow: hidden;
    color: var(--tw-text-strong);
    font-size: clamp(24px, 2.2vw, 32px);
    font-weight: 750;
    letter-spacing: -.035em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * 휴대전화. 제목 영역이 화면 절반을 먹지 않게 한다.
 * 에일브로우·제목·설명·단추 줄을 모두 두되 크기와 사이를 줄이고, 단추 줄은
 * 넓은 화면과 같이 한 줄에서 밀도 단계로 좁힌다(줄바꿈으로 여러 줄이 되지 않는다).
 */
@media (max-width: 640px) {
    /*
     * 제목 한 줄 오른쪽에 「더보기」와 주 동작 하나만 선다(action-density.js 가 나머지를
     * 메뉴에 담는다). 설명은 제목 아래로 내려간다.
     */
    .tw-list-screen__heading {
        align-items: center;
        flex-wrap: nowrap;
        gap: 8px;
        margin-bottom: 0;
    }

    .tw-list-screen__heading > :first-child {
        flex: 1 1 auto;
        min-width: 0;
    }

    .tw-list-screen__eyebrow {
        margin: 0;
        font-size: 11px;
    }

    .tw-list-screen__heading h1 {
        overflow: hidden;
        font-size: 20px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /*
     * 뒤에 오는 기본 규칙(flex: 0 1 auto, overflow: hidden)보다 세게 건다. 그렇지 않으면
     * 설명이 긴 화면에서 단추 줄이 줄어들어 주 동작 단추가 오른쪽에서 잘린다.
     */
    .tw-list-screen__heading > .tw-list-screen__actions {
        position: relative;
        flex: 0 0 auto;
        overflow: visible;
    }

    .tw-list-screen__actions > .tw-action-button,
    [data-tware-actions] > .tw-action-button {
        min-height: 38px;
    }

    .tw-action-overflow-toggle {
        width: 38px;
        min-width: 38px;
        padding: 0;
    }

    .tw-action-overflow-toggle > i { font-size: 16px; }

    .tw-list-screen__page-size { display: none !important; }

    /* 한 줄: 검색어 · 조건 N · 검색. 건수는 그 아래 한 줄, 패널은 맨 아래. */
    .tw-list-screen__toolbar > .tw-field-control--search { order: 1; flex: 1 1 120px; min-width: 0; width: auto; }
    .tw-list-screen__toolbar > .tw-filter-toggle { order: 2; }
    .tw-list-screen__toolbar > .tw-action-button.is-search { order: 3; }
    .tw-list-screen__toolbar > .tw-list-screen__count { order: 4; flex: 1 1 100%; margin-left: 0; }
    .tw-list-screen__toolbar > .tw-filter-panel { order: 5; }

    .tw-filter-panel { gap: 6px; padding-top: 8px; }

    .tw-filter-panel > .tw-field-control { flex: 1 1 calc(50% - 3px); min-width: 0; }
    .tw-filter-panel > .tw-field-control select,
    .tw-filter-panel > .tw-field-control .tware-dropdown { width: 100%; min-width: 0; }
    .tw-filter-panel > .tw-action-button { flex: 0 0 auto; margin-left: auto; }

    .tw-list-screen__description {
        display: -webkit-box;
        overflow: hidden;
        margin-top: 3px;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        font-size: 12px;
        line-height: 1.4;
    }

    /*
     * 조회 띠. 검색어와 검색 단추만 남고 조건은 「조건」 패널로 접힌다(filter-toolbar.js).
     * 큰 화면의 42px 조작 높이는 손가락에는 넉넉하지만 화면 절반을 조회 띠가
     * 차지하게 만들므로 38px로 줄인다.
     */
    .tw-list-screen__toolbar {
        gap: 6px;
        min-height: 0;
        padding: 10px 0;
    }

    .tw-list-screen__toolbar .tw-field-control select,
    .tw-list-screen__toolbar .tw-field-control input,
    .tw-list-screen__toolbar .tw-action-button {
        min-height: 38px;
        font-size: 13px;
    }

    /* 기간처럼 입력 둘을 묶은 무리(role=group)는 반 칸에 넣으면 날짜가 잘린다. 제 줄을 쓴다. */
    .tw-list-screen__toolbar > .tw-field-control:not(.tw-field-control--search):not([role="group"]) {
        flex: 1 1 calc(50% - 6px);
        min-width: 0;
    }

    .tw-list-screen__toolbar > .tw-field-control[role="group"] {
        flex: 1 1 100%;
        min-width: 0;
    }

    .tw-list-screen__toolbar .tw-field-control select {
        width: 100%;
        min-width: 0;
    }

    .tw-list-screen__toolbar > .tw-field-control--search {
        flex: 1 1 160px;
        width: auto;
    }

    .tw-list-screen__toolbar > .tw-action-button {
        padding-inline: 12px;
    }

    .tw-list-screen__count {
        font-size: 12px;
    }

    .tw-list-screen__page-size > span {
        display: none;
    }

    .tw-list-screen__page-size .tware-dropdown { width: 78px; }
}

.tw-list-screen__heading.tw-page-header.is-compact {
    align-items: center;
    margin-bottom: var(--tw-space-3);
}

.tw-list-screen__heading.tw-page-header.is-compact .tw-page-title {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -.02em;
}

/* 제목 아래 한 줄 설명. 제목 옆이 아니라 항상 아래로 내려 화면마다 제목 위치가 흔들리지 않게 한다. */
.tw-list-screen__description {
    margin: 6px 0 0;
    max-width: 72ch;
    color: var(--tw-text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

/*
 * 창이 좁아져도 작업 단추는 줄바꿈하지 않는다. 여러 줄로 접히면 제목 아래
 * 높이가 들쭉날쭉해지고 어느 것이 주 작업인지 흐려진다.
 * 대신 단추 줄 안에서만 가로로 밀어서 본다.
 */
.tw-list-screen__actions {
    display: flex;
    align-items: center;
    /*
     * 자리를 다 차지하지 않고 필요한 만큼만 쓴다. 제목 영역이 space-between 이라
     * 이것만으로 오른쪽에 붙는다. justify-content: flex-end 로 붙이면 넘칠 때
     * 앞쪽 단추가 시작 경계 밖으로 나가 아예 닿을 수 없게 된다.
     */
    flex: 0 1 auto;
    flex-wrap: nowrap;
    gap: 8px;
    justify-content: flex-start;
    min-width: 0;
    /* 가로로 미는 일은 없다. 마지막 단계에서 격자로 접는다. */
    overflow: hidden;
    padding-block: 2px;
}

/*
 * 제목 줄이 아닌 단추 줄(보기 화면 위 작업 띠, 구획 아래 단추 줄 등)은
 * data-tware-actions 를 붙이면 같은 처리를 받는다. 자리 배치는 그 화면이 정한다.
 */
[data-tware-actions] {
    flex-wrap: nowrap;
    min-width: 0;
    overflow: hidden;
}

/*
 * 단추는 줄어들지 않는다. 줄어들면 글자가 잘려 무슨 단추인지 알 수 없다.
 * 묶음을 display:contents 로 흘려보내는 화면이 있어 자식까지 함께 잡는다.
 */
.tw-list-screen__actions > *,
.tw-list-screen__actions .tw-action-button,
.tw-list-screen__actions .tw-field-control,
.tw-list-screen__actions .tw-segmented,
[data-tware-actions] > *,
[data-tware-actions] .tw-action-button,
[data-tware-actions] .tw-field-control,
[data-tware-actions] .tw-segmented { flex: 0 0 auto; }

/* ------------------------------------------------------------
   좁아진 창 — 단계별로 좁힌다 (가로 스크롤 대신)
   단계는 action-density.js 가 재 보고 붙인다.
   ------------------------------------------------------------ */

/* 1 단계 — 여백과 사이 간격을 줄인다 */
[data-density="1"] { gap: 5px; }
[data-density="1"] .tw-action-button {
    padding-inline: 11px;
    font-size: 13px;
}
[data-density="1"] .tware-icon-text { gap: 5px; }

/* 2 단계 — 글자를 아이콘 아래로 내린다 */
[data-density="2"] { gap: 4px; }
[data-density="2"] .tw-action-button {
    min-height: 46px;
    padding-inline: 9px;
    font-size: 11px;
    line-height: 1.15;
}
[data-density="2"] .tware-icon-text {
    flex-direction: column;
    gap: 3px;
}
[data-density="2"] .tw-segmented__option { padding-inline: 8px; }

/* 3 단계 — 아이콘만 둔다. 이름은 title·aria-label 로 남는다 */
[data-density="3"] { gap: 4px; }
[data-density="3"] .tw-action-button {
    min-height: 42px;
    padding-inline: 10px;
}
[data-density="3"] .tw-action-button > span:not(.sr-only) {
    /* 눈에서만 감춘다. 화면 낭독기는 계속 읽는다. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
[data-density="3"] .tw-action-button { position: relative; }
[data-density="3"] .tware-icon-text { gap: 0; }
[data-density="3"] .tw-action-button > i { font-size: 16px; }

/* 4 단계 — 아이콘만 두고 단추 자체를 더 줄인다 */
[data-density="4"] { gap: 3px; }
[data-density="4"] .tw-action-button {
    position: relative;
    min-height: 36px;
    padding-inline: 8px;
}
[data-density="4"] .tw-action-button > span:not(.sr-only) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
[data-density="4"] .tware-icon-text { gap: 0; }
[data-density="4"] .tw-action-button > i { font-size: 15px; }
[data-density="4"] .tw-field-control select { min-height: 36px; }
[data-density="4"] .tw-segmented__option { min-width: 30px; padding-inline: 6px; }

/*
 * 5 단계 — 한 줄에 도저히 못 넣을 때. 밀어서 보게 하지 않는다.
 * 단추를 모두 같은 정사각형으로 맞추고 오른쪽 정렬로 접는다. 크기가 같으므로
 * 접힌 줄끼리 칸이 맞아, 흘러넘친 것이 아니라 처음부터 그렇게 짠 격자로 보인다.
 */
[data-density="5"] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
    overflow: visible;
}

[data-density="5"] .tw-action-button {
    position: relative;
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
}

[data-density="5"] .tw-action-button > span:not(.sr-only) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

[data-density="5"] .tware-icon-text { gap: 0; justify-content: center; }
[data-density="5"] .tw-action-button > i { font-size: 15px; }

/* 칸 수에 맞도록 정사각형 여러 칸을 차지하는 크기로 맞춘다. */
[data-density="5"] .tw-field-control { width: 178px; }
[data-density="5"] .tw-field-control select { min-height: 40px; width: 100%; }
[data-density="5"] .tw-segmented { padding: 2px; }
[data-density="5"] .tw-segmented__option { min-width: 32px; min-height: 32px; padding-inline: 6px; }

/* --- 조회 툴바: 조건 + 검색 + 건수 + 표시 개수 --- */
.tw-list-screen__toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 72px;
    padding: 0;
    min-width: 0;
}

/*
   좌우 여백은 여기서 한 번만 정한다. 예전에는 검색어 칸에만 여백이 있어
   날짜 칸처럼 아이콘 없는 입력은 글자가 테두리에 딱 붙어 나왔다.
   화면마다 따로 여백을 적어 두면 화면마다 값이 갈린다.
*/
.tw-field-control select,
.tw-field-control input {
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--tw-border);
    border-radius: var(--tw-radius-sm);
    background: var(--tw-bg);
    color: var(--tw-text);
    font: inherit;
}

.tw-field-control select {
    min-width: 108px;
    padding: 0 34px 0 12px;
}

.tw-field-control--search {
    position: relative;
    flex: 1 1 200px;
    min-width: 0;
    width: min(360px, 34vw);
}

.tw-field-control--search.is-fluid {
    flex-basis: auto;
    width: 100%;
    max-width: none;
}

.tw-field-control--search > i {
    position: absolute;
    top: 50%;
    left: 14px;
    z-index: 1;
    color: var(--tw-text-placeholder);
    transform: translateY(-50%);
    pointer-events: none;
}

.tw-field-control--search input {
    width: 100%;
    padding: 0 14px 0 40px;
}

.tw-action-button.is-search {
    border-color: var(--tw-action);
    background: var(--tw-action);
    color: var(--tw-bg);
}

.tw-action-button.is-search:hover:not(:disabled) {
    border-color: var(--tw-action-hover);
    background: var(--tw-action-hover);
}

/* 카드형 목록처럼 한 화면에 여러 건을 훑는 화면의 낮은 조회 띠. */
.tw-list-screen__toolbar.is-compact {
    min-height: 52px;
    padding: 0 var(--tw-space-4);
}

.tw-list-screen__toolbar.is-compact .tw-segmented__option {
    min-height: 28px;
    padding-inline: 11px;
    font-size: 12px;
    font-weight: 400;
}

.tw-list-screen__toolbar.is-compact .tw-segmented__option.is-active {
    background: var(--tw-accent);
    box-shadow: none;
    color: var(--tw-bg);
}

.tw-list-screen__toolbar.is-compact .tw-field-control input,
.tw-list-screen__toolbar.is-compact .tw-action-button {
    min-height: 30px;
    font-size: 12px;
}

/* 조회 조건이 많아 여러 줄로 감기는 목록 툴바.
   줄 사이 여백을 주고, 검색칸이 남은 줄을 통째로 먹지 않게 폭을 묶는다. */
/*
   조회 조건과 검색 단추는 한 덩어리로 오른쪽 끝에 붙는다. 저마다 제 내용만큼만
   쓰고 남는 자리는 왼쪽에 둔다. 단추 하나만 따로 밀어 두면 조건과 단추 사이가
   넓게 벌어져 무엇을 누르는 단추인지 눈으로 잇기 어렵다.
*/
.tw-list-screen__toolbar--dense {
    align-items: end;
    justify-content: flex-end;
    padding-block: 12px;
    row-gap: 10px;
    min-height: 0;
}

/*
   검색어 칸도 제 내용만큼만 쓴다. 남는 자리를 다 먹게 두면 줄이 통째로 늘어나
   덩어리가 오른쪽에 붙지 못한다.
*/
.tw-list-screen__toolbar--dense .tw-field-control--search {
    flex: 0 1 280px;
    width: auto;
}

/* 한 줄에 안 들어가는 조건을 담는 패널. 툴바가 줄바꿈 flex라
   기준선 전체를 차지하게 해 제 줄을 하나 만든다. */
.tw-filter-panel {
    display: flex;
    flex: 1 0 100%;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
    border-top: 1px solid var(--tw-border-soft);
    padding-top: 12px;
}

.tw-filter-panel[hidden] {
    display: none;
}

.tw-filter-toggle__count {
    display: inline-grid;
    min-width: 18px;
    height: 18px;
    place-items: center;
    border-radius: 999px;
    background: var(--tw-surface-muted);
    color: var(--tw-text-muted);
    font-size: 11px;
    font-weight: 700;
}

.tw-filter-toggle__count:empty {
    display: none;
}

.tw-filter-toggle.is-open {
    border-color: var(--tw-accent);
    color: var(--tw-accent);
}

/* 검색·초기화는 조건 바로 옆에 붙는다. 덩어리째 오른쪽으로 가는 것은 툴바가 맡는다. */
.tw-list-screen__toolbar--dense .tw-field-control--search ~ .tw-action-button {
    margin-left: 0;
}

/*
   검색 단추는 마지막 조건 바로 옆에 붙는다. 오른쪽으로 가는 것은 덩어리째다.
   단추만 따로 밀어 두면 조건과 단추 사이가 넓게 벌어진다.

   건수는 여기에 적지 않는다. 표 아래 쪽 넘김 줄이 이미 보여 준다.
*/
.tw-list-screen__toolbar--dense > .tw-action-button.is-search {
    margin-left: 2px;
}

/* 조건 드롭다운은 고른 값에 맞춘 폭을 쓴다.
   원래 select는 화면 밖으로 숨겨 두므로 여기서 폭을 건드리면 안 된다.
   min-width를 주면 1px로 감춰 둔 것이 되살아나 글자 조각이 비친다. */
.tw-list-screen__toolbar--dense .tw-field-control .tware-dropdown {
    width: auto;
    min-width: 92px;
}

/*
    조회 줄 오른쪽 끝에 붙이는 기능 단추.

    올리기·설정 같은 단추를 표 바로 위에 따로 두면 조회 줄과 표 사이에 줄이
    하나 더 생겨, 화면마다 표가 다른 높이에서 시작한다. 같은 줄 오른쪽 끝으로
    보낸다.
*/
.tw-list-screen__toolbar > [data-toolbar-end] {
    /*
        자리는 순서로 잡는다. 조회 줄의 단추 몇은 화면이 뜬 뒤 공통 조회 도구가
        자리를 다시 잡으므로, 문서에 마지막으로 적어 두어도 마지막에 서지 않는다.
    */
    order: 99;
    margin-left: auto;
}

/* 끝에 붙은 단추가 이미 있으면 셈은 그 앞에서 오른쪽으로 민다. */
.tw-list-screen__toolbar > [data-toolbar-end] ~ .tw-list-screen__count { margin-left: 0; }

/* 단추가 여럿이면 한 덩이로 묶어 끝에 붙인다. */
.tw-list-screen__toolbar-actions { display: inline-flex; flex: 0 0 auto; gap: 8px; }

.tw-list-screen__count {
    margin-left: auto;
    color: var(--tw-text-muted);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tw-list-screen__page-size {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--tw-text-muted);
    font-size: 12px;
    white-space: nowrap;
}

.tw-list-screen__page-size .tware-dropdown { width: 92px; }
/* ============================================================
   끌어다 놓기 — tw-drop-target

   파일을 받는 화면에 붙인다. 평소에는 아무것도 그리지 않고, 파일을 끌고
   들어왔을 때만 안내를 덮는다. 자리를 미리 차지하는 상자를 두지 않으려는
   것이다. 화면은 tw-drop-target 을 받는 요소 안에 안내 요소 하나만 두고,
   끌고 들어온 동안 is-dragging 을 붙였다 뗀다.
   ============================================================ */

.tw-drop-target {
    position: relative;
}

.tw-drop-target__overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 2px dashed var(--tw-accent);
    border-radius: var(--tw-radius-md);
    background: color-mix(in srgb, var(--tw-bg) 88%, var(--tw-accent));
    color: var(--tw-text);
    font-size: 14px;
    /* 덮개는 안내만 한다. 끌기 이벤트는 아래 화면이 그대로 받아야 한다. */
    pointer-events: none;
}

.tw-drop-target.is-dragging .tw-drop-target__overlay {
    display: flex;
}

.tw-drop-target__overlay i {
    color: var(--tw-accent);
    font-size: 30px;
}

.tw-drop-target__overlay p {
    margin: 0;
}

.tw-drop-target__overlay small {
    color: var(--tw-text-muted);
    font-size: 12px;
}

/*
   눈에 보이는 받는 자리. 끌어다 놓을 수 있다는 것을 알려면 자리가 보여야 하고,
   끌기를 쓰지 못하는 사람은 눌러서 골라야 하므로 단추로 만든다.
*/
.tw-drop-target__zone {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px dashed var(--tw-border);
    border-radius: var(--tw-radius-sm);
    padding: 13px 16px;
    background: var(--tw-surface-muted);
    color: var(--tw-text-muted);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.tw-drop-target__zone:hover {
    border-color: var(--tw-accent);
    color: var(--tw-text);
}

.tw-drop-target__zone i {
    font-size: 17px;
}

.tw-drop-target.is-dragging .tw-drop-target__zone {
    border-color: var(--tw-accent);
    color: var(--tw-text);
}

/* 목록 표면 안에 놓이면 조회 조건·표와 같은 여백을 받고 남은 폭을 채운다. */
.tw-list-screen__surface > .tw-drop-target__zone {
    box-sizing: border-box;
    width: 100%;
    margin: 12px 0;
}

/* ============================================================
   보기 화면 — tw-view-screen
   상세 화면의 제목·본문·구획·첨부·이전다음. 값은 게시판 보기에서 가져왔다.
   ============================================================ */

.tw-view-screen__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 16px;
    min-width: 0;
    color: var(--tw-text-muted);
    font-size: 12px;
}

/*
   한 덩이(아이콘 + 값)는 제 안에서도 띄어 둔다. 바깥 gap 만 있고 안쪽이 없어
   아이콘과 글자가 붙어 나왔다(2026-09-22 지적).
*/
.tw-view-screen__meta > span {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
}

.tw-view-screen__meta > span > i {
    color: var(--tw-text-placeholder);
}

.tw-view-screen__meta b {
    color: var(--tw-text);
    font-weight: 600;
}

.tw-view-screen__meta time {
    font-variant-numeric: tabular-nums;
}

.tw-view-screen__section {
    overflow: hidden;
    margin: 0 0 18px;
    border: 1px solid var(--tw-border);
    border-radius: var(--tw-radius-sm);
}

.tw-view-screen__section[hidden] { display: none; }

.tw-view-screen__section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 45px;
    padding: 9px 13px;
    background: var(--tw-surface-muted);
}

.tw-view-screen__section-heading h2,
.tw-view-screen__section-heading h3 {
    margin: 0;
    color: var(--tw-text);
    font-size: 13px;
    font-weight: 600;
}

.tw-view-screen__body {
    min-width: 0;
    padding: 20px 26px 28px;
    color: var(--tw-text-secondary);
    font-size: 13px;
    line-height: 1.9;
    overflow-wrap: anywhere;
}

.tw-view-screen__body :where(img, video, svg, canvas) {
    max-width: 100% !important;
    height: auto !important;
}

/* 첨부 목록 */
.tw-attachment-list {
    margin: 0;
    padding: 5px;
    list-style: none;
}

.tw-attachment-list li {
    display: grid;
    align-items: center;
    gap: 5px;
    grid-template-columns: minmax(0, 1fr) auto;
}

.tw-attachment-list a {
    display: grid;
    align-items: center;
    gap: 7px;
    grid-template-columns: 25px minmax(0, 1fr) auto;
    padding: 8px 9px;
    border-radius: var(--tw-radius-sm);
    color: var(--tw-text-secondary);
    font-size: 12px;
    text-decoration: none;
}

.tw-attachment-list a:hover { background: var(--tw-surface-muted); }
.tw-attachment-list i { color: var(--tw-accent); text-align: center; }
.tw-attachment-list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-attachment-list small { color: var(--tw-text-faint); font-size: 11px; font-variant-numeric: tabular-nums; }

/* 이전글·다음글 */
.tw-view-screen__adjacent {
    display: grid;
    border-top: 1px solid var(--tw-border);
}

.tw-view-screen__adjacent a {
    display: grid;
    align-items: center;
    gap: 10px;
    grid-template-columns: 85px minmax(0, 1fr) 100px;
    min-height: 48px;
    padding: 8px 20px;
    color: var(--tw-text-secondary);
    text-decoration: none;
}

.tw-view-screen__adjacent a + a { border-top: 1px solid var(--tw-border-soft); }
.tw-view-screen__adjacent a:hover { background: var(--tw-surface-muted); }
/* 화살표와 「이전글」이 딱 붙어 나왔다(2026-09-23 지적). 사이를 띄운다. */
.tw-view-screen__adjacent span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--tw-text-muted);
    font-size: 11px;
}
.tw-view-screen__adjacent b { overflow: hidden; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.tw-view-screen__adjacent time { color: var(--tw-text-faint); font-size: 11px; text-align: right; font-variant-numeric: tabular-nums; }

/* 속성표 — 라벨과 값이 짝을 이루는 읽기 전용 목록.
   게시글처럼 본문 하나가 아니라 항목이 여러 개인 보기 화면에서 쓴다.
   좁아지면 라벨이 값 위로 올라간다. */
.tw-detail-list {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    margin: 0;
    padding: 4px 0;
}

.tw-detail-list__item {
    display: grid;
    align-items: baseline;
    gap: 4px 14px;
    grid-template-columns: 130px minmax(0, 1fr);
    padding: 9px 16px;
    border-bottom: 1px dotted var(--tw-border-soft);
    min-width: 0;
}

.tw-detail-list__item.is-wide { grid-column: 1 / -1; }

/* 항목이 길어 한 줄에 둘까지만 놓아야 할 때. */
.tw-detail-list.is-two-column {
    grid-template-columns: repeat(auto-fit, minmax(420px, calc(50% - 1px)));
}

.tw-detail-list__item > dt {
    margin: 0;
    color: var(--tw-text-muted);
    font-size: 12px;
    word-break: keep-all;
}

/* 홈페이지에 나가는 항목처럼 눈에 띄어야 하는 라벨. */
.tw-detail-list__item.is-marked > dt::before {
    content: '★';
    margin-right: 4px;
    color: var(--tw-warning);
}

.tw-detail-list__item > dd {
    margin: 0;
    min-width: 0;
    color: var(--tw-text);
    font-size: 13px;
    line-height: 1.6;
    word-break: break-word;
}

@media screen and (max-width: 640px) {
    .tw-detail-list,
    .tw-detail-list.is-two-column { grid-template-columns: minmax(0, 1fr); }
    .tw-detail-list__item { grid-template-columns: minmax(0, 1fr); }

    .tw-form-screen .tw-form-screen__fields,
    .tw-form-screen .tw-form-screen__fields.is-two-column {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ============================================================
   작성 화면 — tw-form-screen
   ============================================================ */

.tw-form-screen__card {
    overflow: hidden;
    border: 1px solid var(--tw-border);
    border-radius: var(--tw-radius-md);
    background: var(--tw-surface);
    box-shadow: var(--tw-shadow-card);
}

.tw-form-screen__card + .tw-form-screen__card { margin-top: 14px; }

.tw-form-screen__card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 51px;
    padding: 10px 15px;
    border-bottom: 1px solid var(--tw-border-soft);
    background: var(--tw-surface-muted);
}

/*
   아이콘과 제목은 한 줄이다. 이 규칙이 없으면 h2 가 블록이라 아이콘 아래로
   내려가 머리글이 두 줄이 된다. board-write.css 가 갖고 있던 것을 공통으로
   올렸다. 카드 머리글을 쓰는 화면이면 모두 같은 모양이어야 한다.
*/
.tw-form-screen__card-heading > div {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.tw-form-screen__card-heading h2 {
    margin: 0;
    color: var(--tw-text);
    font-size: 13px;
    font-weight: 600;
}

.tw-form-screen__card-heading span { color: var(--tw-text-muted); font-size: 11px; }

/*
   머리줄 아이콘은 강조색으로 둔다. 흰 바탕에 회색 글씨뿐이면 어디가 한 묶음의
   시작인지 눈으로 잡히지 않는다. 필수 표시도 여기서 한 번만 정한다.
*/
.tw-form-screen__card-heading > div > i { color: var(--tw-accent); font-size: 14px; }
.tw-form-screen__card-heading h2 b { color: var(--tw-danger); }

.tw-form-screen__fields {
    display: grid;
    gap: 14px 18px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    min-width: 0;
    padding: 18px;
}

.tw-form-screen__field {
    display: grid;
    align-content: start;
    gap: 5px;
    min-width: 0;
}

.tw-form-screen__field.is-wide { grid-column: 1 / -1; }

/* 항목이 많아 넉넉히 놓아야 할 때. 한 줄에 둘까지만 세운다. */
.tw-form-screen__fields.is-two-column {
    grid-template-columns: repeat(auto-fit, minmax(420px, calc(50% - 9px)));
}

.tw-form-screen__field > label {
    color: var(--tw-text-secondary);
    font-size: 12px;
    font-weight: 600;
}

/* 필수 표시 */
.tw-form-screen__field > label b { color: var(--tw-danger); }

.tw-form-screen__field input,
.tw-form-screen__field select,
.tw-form-screen__field textarea {
    width: 100%;
    min-height: 38px;
    padding: 7px 11px;
    border: 1px solid var(--tw-border);
    border-radius: var(--tw-radius-sm);
    background: var(--tw-surface);
    color: var(--tw-text);
    font: inherit;
    font-size: 13px;
}

/* 체크와 라디오는 글자 상자가 아니다. 위 규칙에서 빼 준다. */
.tw-form-screen__field input[type="checkbox"],
.tw-form-screen__field input[type="radio"] {
    width: 16px;
    height: 16px;
    min-height: 0;
    padding: 0;
    accent-color: var(--tw-accent);
}

.tw-form-screen__field input:focus,
.tw-form-screen__field select:focus,
.tw-form-screen__field textarea:focus {
    border-color: var(--tw-accent);
    outline: 2px solid color-mix(in srgb, var(--tw-accent) 13%, transparent);
}

.tw-form-screen__field small { color: var(--tw-text-muted); font-size: 11px; }

/* 폼 전체 오류. 입력 묶음 위에서 같은 모양으로 문제를 알린다. */
.tw-form-screen__validation {
    margin-bottom: var(--tw-space-3);
    padding: 11px 14px;
    border: 1px solid var(--tw-danger);
    border-radius: var(--tw-radius-sm);
    background: var(--tw-danger-soft);
    color: var(--tw-danger);
    font-size: 12px;
}

.tw-form-screen__validation:empty,
.tw-form-screen__validation.validation-summary-valid { display: none; }
.tw-form-screen__validation ul { margin: 0; padding-left: 18px; }
.tw-form-screen .field-validation-error { color: var(--tw-danger); font-size: 11px; }

/* 라디오·체크 선택지를 설명과 함께 고르는 카드 묶음. */
.tw-form-screen__fieldset { margin: 0; padding: 0; border: 0; }
.tw-form-screen__fieldset > legend {
    margin-bottom: 5px;
    color: var(--tw-text-secondary);
    font-size: 12px;
    font-weight: 600;
}

.tw-form-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.tw-form-choice {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 9px;
    padding: 11px 12px;
    border: 1px solid var(--tw-border);
    border-radius: var(--tw-radius-sm);
    background: var(--tw-surface);
    color: var(--tw-text);
    cursor: pointer;
}

.tw-form-choice:has(input:checked) {
    border-color: var(--tw-accent);
    background: var(--tw-accent-soft);
}

.tw-form-choice > input { flex: 0 0 auto; margin-top: 2px; }
.tw-form-choice > span { display: grid; min-width: 0; gap: 3px; }
.tw-form-choice b {
    color: var(--tw-text-strong);
    font-size: 12px;
    font-weight: 600;
}
.tw-form-choice small {
    color: var(--tw-text-secondary);
    font-size: 11px;
    line-height: 1.45;
}
.tw-form-choice.is-compact {
    width: fit-content;
    margin-top: 5px;
    padding: 7px 9px;
}

/* 조건에 따라 열리는 하위 입력 묶음. */
.tw-form-nested-fields {
    display: grid;
    min-width: 0;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
}

/* 사용자 선택 결과와 항목별 작업을 함께 보여 주는 공통 목록. */
.tw-people-picker {
    display: grid;
    min-width: 0;
    grid-column: 1 / -1;
    gap: 12px;
}

.tw-person-summary {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid var(--tw-border-soft);
    border-radius: var(--tw-radius-sm);
    background: var(--tw-surface-muted);
}

.tw-person-summary > span:last-child { display: grid; min-width: 0; gap: 3px; }
.tw-person-summary b { color: var(--tw-text-strong); font-size: 12px; font-weight: 600; }
.tw-person-summary small { color: var(--tw-text-secondary); font-size: 11px; line-height: 1.45; }

.tw-people-picker__toolbar {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.tw-people-picker__toolbar h3,
.tw-people-picker__toolbar p { margin: 0; }
.tw-people-picker__toolbar h3 { color: var(--tw-text-strong); font-size: 12px; font-weight: 600; }
.tw-people-picker__toolbar p { margin-top: 3px; color: var(--tw-text-secondary); font-size: 11px; }

.tw-people-list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tw-people-list__empty {
    margin: 0;
    padding: 14px;
    border: 1px dashed var(--tw-border);
    border-radius: var(--tw-radius-sm);
    color: var(--tw-text-secondary);
    font-size: 11px;
    text-align: center;
}

.tw-people-list__item {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border: 1px solid var(--tw-border-soft);
    border-radius: var(--tw-radius-sm);
}

.tw-people-list__identity,
.tw-people-list__actions {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.tw-people-list__identity > span:last-child {
    overflow: hidden;
    color: var(--tw-text);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tw-people-list__avatar {
    display: inline-flex;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: var(--tw-radius-lg);
    background: var(--tw-accent-soft);
    color: var(--tw-accent);
    font-size: 12px;
}

.tw-people-list__actions { flex: 0 0 auto; }
.tw-people-list__actions .tware-dropdown { min-width: 118px; }

@media screen and (max-width: 640px) {
    .tw-form-choice-grid,
    .tw-form-nested-fields { grid-template-columns: minmax(0, 1fr); }

    .tw-people-picker__toolbar,
    .tw-people-list__item {
        align-items: stretch;
        flex-direction: column;
    }

    .tw-people-picker__toolbar .tw-action-button { justify-content: center; width: 100%; }
    .tw-people-list__actions { justify-content: space-between; width: 100%; }
    .tw-people-list__actions .tware-dropdown { flex: 1 1 auto; }
}

/* 하단 저장·취소 */
.tw-form-screen__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.tw-form-screen__actions > .tw-spacer { flex: 1 1 auto; }

/* ============================================================
   점수·수량 구간 입력 — tw-score-bands
   ------------------------------------------------------------
   등급별 점수·비율·인원처럼 같은 구조의 수치 구간을 한 묶음으로 보여 준다.
   계산된 경계와 입력 단위는 각 등급 안에서 한 줄을 유지한다.
   ============================================================ */

.tw-score-bands {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 8px;
}

.tw-score-bands.is-wide { gap: 10px 14px; }

.tw-score-band {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 92px;
}

.tw-score-bands.is-wide > .tw-score-band { width: 150px; }

.tw-score-band__name {
    color: var(--tw-text-muted);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.tw-score-band .tw-input { width: 100%; }

.tw-score-band__bound {
    min-height: 18px;
    color: var(--tw-text-secondary);
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    white-space: nowrap;
}

.tw-score-band__bound[aria-hidden="true"] { visibility: hidden; }

.tw-score-band__input {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px;
    color: var(--tw-text-muted);
    font-size: 12px;
}

.tw-score-bands.is-wide .tw-score-band__input {
    grid-template-columns: 88px auto;
    gap: 5px;
}

.tw-score-band__input small { white-space: nowrap; }

.tw-score-band.is-current {
    border-radius: var(--tw-radius-sm);
    background: color-mix(in srgb, var(--tw-accent) 7%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tw-accent) 34%, transparent);
}

.tw-score-band.is-invalid {
    background: var(--tw-danger-soft);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tw-danger) 44%, transparent);
}

@media (max-width: 900px) {
    .tw-score-bands:not(.is-wide) > .tw-score-band { width: calc(50% - 5px); }
}

/* ============================================================
   문서 작업영역 — tw-authoring-workspace / tw-document-stage
   ------------------------------------------------------------
   작성과 보기 화면이 함께 쓰는 고정 높이 작업영역이다. 바깥 문서가 아니라
   두 패널이 세로 스크롤을 소유하며, 좁은 화면에서는 작업영역 하나가 소유한다.
   높이는 상위 레이아웃이 제한해야 한다.
   ============================================================ */

.tw-authoring-screen {
    display: grid;
    height: 100dvh;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
    contain: layout paint;
    overflow: hidden;
}

/*
 * 고정 높이 작성 화면에서는 바깥 문서가 스크롤을 소유하지 않는다.
 * 데스크톱은 두 패널, 좁은 화면은 workspace 하나만 세로 스크롤한다.
 */
html:has(body.c-frame-body > .tw-authoring-screen:not(.is-print-layout)),
body.c-frame-body:has(> .tw-authoring-screen:not(.is-print-layout)) {
    width: 100%;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}

.tw-authoring-workspace {
    display: grid;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    grid-template-rows: minmax(0, 1fr);
    gap: var(--tw-space-4);
    /* 자리만 잡는 상자다. `hidden` 이면 보이지 않게 스크롤을 먹는다 — `clip` 을 쓴다. */
    overflow: clip;
}

.tw-authoring-workspace.is-settings-first {
    grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
}

.tw-authoring-workspace__document,
.tw-authoring-workspace__settings {
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: auto;
    scrollbar-color: transparent transparent;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
}

.tw-authoring-workspace__document {
    border: 1px solid var(--tw-border-soft);
    border-radius: var(--tw-radius-md);
    background: var(--tw-surface-muted);
}

.tw-authoring-workspace__settings {
    display: grid;
    align-content: start;
    /*
     * 줄 높이는 담긴 것이 정한다. 이 판은 스스로 세로로 구르므로 넘치면 굴리면 된다.
     *
     * 그냥 두면 auto 줄이 되는데, overflow:hidden 인 것을 담으면(공통 카드가 그렇다)
     * 격자가 그 칸을 담긴 것보다 작게 줄일 수 있게 된다. 그러면 카드가 제 안을
     * 소리 없이 잘라 내서, 아래쪽 입력칸은 있는 줄도 모르게 된다.
     */
    grid-auto-rows: min-content;
    gap: var(--tw-space-3);
    padding: var(--tw-space-4);
    border: 1px solid var(--tw-border);
    border-radius: var(--tw-radius-md);
    background: var(--tw-surface);
    box-shadow: var(--tw-shadow-card);
}

.tw-authoring-workspace::-webkit-scrollbar,
.tw-authoring-workspace__document::-webkit-scrollbar,
.tw-authoring-workspace__settings::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.tw-authoring-workspace::-webkit-scrollbar-track,
.tw-authoring-workspace__document::-webkit-scrollbar-track,
.tw-authoring-workspace__settings::-webkit-scrollbar-track {
    background: transparent;
}

.tw-authoring-workspace::-webkit-scrollbar-thumb,
.tw-authoring-workspace__document::-webkit-scrollbar-thumb,
.tw-authoring-workspace__settings::-webkit-scrollbar-thumb {
    border-radius: var(--tw-radius-sm);
    background: transparent;
}

.tw-authoring-workspace:hover,
.tw-authoring-workspace:focus-within,
.tw-authoring-workspace__document:hover,
.tw-authoring-workspace__document:focus-within,
.tw-authoring-workspace__settings:hover,
.tw-authoring-workspace__settings:focus-within {
    scrollbar-color: var(--tw-border-strong) transparent;
}

.tw-authoring-workspace:hover::-webkit-scrollbar-thumb,
.tw-authoring-workspace:focus-within::-webkit-scrollbar-thumb,
.tw-authoring-workspace__document:hover::-webkit-scrollbar-thumb,
.tw-authoring-workspace__document:focus-within::-webkit-scrollbar-thumb,
.tw-authoring-workspace__settings:hover::-webkit-scrollbar-thumb,
.tw-authoring-workspace__settings:focus-within::-webkit-scrollbar-thumb {
    background: var(--tw-border-strong);
}

.tw-authoring-workspace::-webkit-scrollbar-thumb:hover,
.tw-authoring-workspace__document::-webkit-scrollbar-thumb:hover,
.tw-authoring-workspace__settings::-webkit-scrollbar-thumb:hover {
    background: var(--tw-text-faint);
}

.tw-document-stage {
    display: grid;
    align-content: start;
    justify-items: center;
    min-width: 0;
    min-height: 100%;
    padding: var(--tw-space-4);
}

/*
 * 무대가 판 높이를 통째로 차지하는 것은 무대 혼자 있을 때의 이야기다.
 *
 * 판 안에 무대 말고 다른 것이 함께 서면(문서 위 도구모음, 안내 띠 같은 것) 100% 가
 * 그것들 높이만큼 그대로 넘쳐서, 판이 구르고 편집기가 또 구른다. 한 화면에 스크롤
 * 막대가 둘이 되는데 그 둘이 같은 것을 굴린다.
 *
 * 함께 선 것이 있을 때만 강제를 푼다. 무대 혼자인 화면은 예전 그대로다.
 */
.tw-authoring-workspace__document:has(> :not(.tw-document-stage)) > .tw-document-stage {
    min-height: 0;
}

.tw-document-stage__canvas {
    width: min(100%, 960px);
    min-width: 0;
    border: 1px solid var(--tw-border);
    border-radius: var(--tw-radius-md);
    background: var(--tw-surface);
    box-shadow: var(--tw-shadow-card);
}

.tw-document-stage__canvas.is-fluid {
    width: 100%;
    max-width: none;
}

.tw-document-stage.is-obscured {
    filter: blur(5px);
    pointer-events: none;
    user-select: none;
}

.tw-document-stage__content {
    min-width: 0;
    padding: var(--tw-space-5);
}

@media (max-width: 1024px) {
    .tw-authoring-workspace {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        align-content: start;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .tw-authoring-workspace__document,
    .tw-authoring-workspace__settings {
        min-height: auto;
        overflow: visible;
        overscroll-behavior: auto;
        scrollbar-gutter: auto;
    }

    .tw-authoring-workspace.is-settings-first {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (hover: none) {
    .tw-authoring-workspace,
    .tw-authoring-workspace__document,
    .tw-authoring-workspace__settings {
        scrollbar-color: var(--tw-border-strong) transparent;
    }

    .tw-authoring-workspace::-webkit-scrollbar-thumb,
    .tw-authoring-workspace__document::-webkit-scrollbar-thumb,
    .tw-authoring-workspace__settings::-webkit-scrollbar-thumb {
        background: var(--tw-border-strong);
    }
}

.tw-authoring-screen.is-print-layout {
    display: block;
    height: auto;
    overflow: visible;
    padding: 0;
}

.tw-authoring-screen.is-print-layout > .tw-list-screen__heading,
.tw-authoring-screen.is-print-layout .tw-authoring-workspace__settings,
.tw-authoring-screen.is-print-layout .tw-list-screen__actions {
    display: none;
}

.tw-authoring-screen.is-print-layout .tw-authoring-workspace,
.tw-authoring-screen.is-print-layout .tw-authoring-workspace__document {
    display: block;
    height: auto;
    overflow: visible;
    border: 0;
    background: transparent;
}

.tw-authoring-screen.is-print-layout .tw-document-stage { padding: 0; }

/* ============================================================
   등급·사람·폼 행렬 — 작성/검토 화면 공통
   ------------------------------------------------------------
   인사평가뿐 아니라 교육·자격·심사처럼 사람별 점수와 서술 응답을 함께
   작성하는 화면에서 쓴다. 선택/페이징 그리드와 다른 정적 입력 행렬이다.
   ============================================================ */

.tw-grade-badge {
    display: inline-grid;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    place-items: center;
    border-radius: 50%;
    background: var(--tw-header);
    color: var(--tw-text-muted);
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
}

.tw-grade-badge.is-compact {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
    font-size: 11px;
}

.tw-grade-badge.is-interactive { cursor: pointer; }
.tw-grade-badge.is-pending { color: var(--tw-text-faint); }
.tw-grade-badge[data-grade="S"],
.tw-grade-badge[data-grade="A"] { background: var(--tw-warning); color: var(--tw-bg); }
.tw-grade-badge[data-grade="B"] { background: var(--tw-accent); color: var(--tw-bg); }
.tw-grade-badge[data-grade="C"] { background: var(--tw-category-teal); color: var(--tw-bg); }
.tw-grade-badge[data-grade="D"] { background: var(--tw-category-violet); color: var(--tw-bg); }
.tw-grade-badge[data-grade="E"] { background: var(--tw-category-magenta); color: var(--tw-bg); }
.tw-grade-badge[data-grade="F"] { background: var(--tw-danger); color: var(--tw-bg); }

.tw-status-badge.is-success { background: var(--tw-success-soft); color: var(--tw-success); }

.tw-organization-item__visual > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.tw-user-photo.is-round {
    mask: none;
    -webkit-mask: none;
    border-radius: 50%;
}

.tw-user-photo.is-small { width: 32px; height: 32px; flex: 0 0 32px; }
.tw-user-photo.is-compact { width: 22px; height: 22px; flex: 0 0 22px; }
.tw-user-photo.is-large { width: 72px; height: 72px; flex: 0 0 72px; }

.tw-person-list {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: var(--tw-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.tw-person-list__item {
    display: grid;
    min-width: 0;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    padding: 6px 9px;
    border: 1px solid var(--tw-border-soft);
    border-radius: var(--tw-radius-sm);
    background: var(--tw-surface);
}

.tw-person-list__item > strong,
.tw-person-list__item > span { min-width: 0; }
.tw-person-list__copy {
    display: grid;
    min-width: 0;
    align-content: center;
    gap: 2px;
}
.tw-person-list__copy > :where(strong, span, small) {
    min-width: 0;
    overflow-wrap: anywhere;
}
.tw-person-list__role { color: var(--tw-text-muted); font-size: 11px; }

.tw-form-table-wrap {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    contain: inline-size layout paint;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-color: transparent transparent;
    scrollbar-width: thin;
}

.tw-form-table-wrap:hover,
.tw-form-table-wrap:focus-within { scrollbar-color: var(--tw-border-strong) transparent; }

.tw-form-table {
    display: table;
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
    color: var(--tw-text);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.tw-form-table th,
.tw-form-table td {
    min-width: 0;
    padding: 7px;
    border-bottom: 1px solid var(--tw-border-soft);
    text-align: center;
    overflow-wrap: anywhere;
}

.tw-form-table th {
    height: 42px;
    background: var(--tw-header);
    color: var(--tw-text-secondary);
    font-weight: 650;
    white-space: nowrap;
}

.tw-form-table tbody tr:hover > td:not([rowspan]) { background: var(--tw-surface-muted); }
.tw-form-table tfoot td { background: var(--tw-surface-muted); }
.tw-form-table tfoot tr:first-child td { border-top: 3px double var(--tw-border-strong); }
.tw-form-table tfoot tr:last-child td { font-weight: 650; }
.tw-form-table__label { min-width: 160px; text-align: left; }
.tw-form-table__detail { min-width: 180px; text-align: left; }
.tw-form-table__score { white-space: nowrap; }
.tw-form-table__person { min-width: 120px; font-size: 12px; font-weight: 500; }
.tw-form-table__person .tw-user-photo {
    display: block;
    margin: 0 auto 3px;
}

.tw-form-table .tw-score-input {
    width: 64px;
    min-height: 32px;
    border: 1px solid var(--tw-accent);
    border-radius: var(--tw-radius-sm);
    padding: 4px 6px;
    background: var(--tw-surface);
    color: var(--tw-text);
    font: inherit;
    text-align: right;
}

.tw-form-table .tw-score-input:disabled {
    border-color: var(--tw-border);
    background: var(--tw-surface-muted);
}

.tw-form-table td.is-score-top,
.tw-form-table td.is-score-bottom {
    border-color: var(--tw-accent);
    background: color-mix(in srgb, var(--tw-accent) 7%, transparent);
}

.tw-form-table td.is-score-invalid {
    border-color: var(--tw-danger);
    background: var(--tw-danger-soft);
}

.tw-comparison-group {
    display: flex;
    min-width: 0;
}

.tw-comparison-group__panel { min-width: 0; }
.tw-comparison-group__panel:first-child { flex: 1 1 auto; }
.tw-comparison-group__panel + .tw-comparison-group__panel .tw-form-table__repeat-cell,
.tw-comparison-group__panel + .tw-comparison-group__panel .tw-form-table__repeat-action { display: none; }

.tw-response-list {
    display: grid;
    gap: var(--tw-space-3);
    margin: 0;
}

.tw-response-list__heading {
    margin: 0;
    color: var(--tw-text-strong);
    font-size: 13px;
    font-weight: 650;
}

.tw-response {
    display: grid;
    min-width: 0;
    grid-template-rows: auto minmax(90px, auto);
}

.tw-response__author {
    display: flex;
    min-height: 40px;
    align-items: center;
    gap: 9px;
    padding: 6px 10px;
    border: 1px solid var(--tw-border);
    border-bottom: 0;
    border-radius: var(--tw-radius-md) var(--tw-radius-md) 0 0;
    background: var(--tw-surface-muted);
    color: var(--tw-text-secondary);
    font-size: 13px;
    font-weight: 650;
}

.tw-response__body {
    min-width: 0;
    margin: 0;
    padding: 10px 14px;
    border: 1px solid var(--tw-border);
    border-radius: 0 0 var(--tw-radius-md) var(--tw-radius-md);
    color: var(--tw-text);
}

.tw-response__body.is-readonly { background: var(--tw-surface-muted); }
.tw-rich-editor { min-width: 0; }
.tw-rich-editor[data-tware-control="namo-content-editor"] {
    min-width: 0;
    border-radius: 0 0 var(--tw-radius-md) var(--tw-radius-md);
}

.tw-rich-editor.is-readonly { background: var(--tw-surface-muted); }

.tw-rich-editor-surface {
    margin: 0;
    padding: 10px 12px;
    background: var(--tw-surface);
    color: var(--tw-text);
    font-family: var(--tw-font);
    font-size: 14px;
    line-height: 1.55;
}

.tw-rich-editor-surface p { margin: 0 0 .65em; }

.tw-metric__note.is-warning { color: var(--tw-warning); }
.tw-metric__note.is-danger { color: var(--tw-danger); }

@media (max-width: 1024px) {
    .tw-comparison-group {
        display: grid;
        width: 100%;
        max-width: 100%;
        grid-template-columns: minmax(0, 1fr);
    }
    .tw-comparison-group__panel { width: 100%; max-width: 100%; }
    .tw-comparison-group__panel + .tw-comparison-group__panel .tw-form-table__repeat-cell:not([hidden]) { display: table-cell; }
    .tw-comparison-group__panel + .tw-comparison-group__panel .tw-form-table__repeat-action { display: inline-flex; }
}

@media (max-width: 800px) {
    /* tware-ui의 일반 표 모바일 규칙보다 구체적으로 지정해 가로 스크롤은 wrap 한 곳만 소유한다. */
    .tw-page-shell table.tw-form-table {
        display: table;
        width: 100%;
        max-width: none;
        overflow: visible;
    }
}

/* ============================================================
   지표 타일 — tw-metric-grid
   숫자를 읽는 화면. 위치에 따라 색을 배정하지 않는다.
   ============================================================ */

.tw-metric-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    min-width: 0;
}

.tw-metric {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 11px 13px;
    border: 1px solid var(--tw-border);
    border-radius: var(--tw-radius-sm);
    background: var(--tw-surface);
}

.tw-metric__label {
    overflow: hidden;
    color: var(--tw-text-muted);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tw-metric__value {
    overflow: hidden;
    color: var(--tw-text-strong);
    font-size: 22px;
    font-variant-numeric: tabular-nums;
    font-weight: 400;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tw-metric__value em {
    margin-left: 2px;
    color: var(--tw-text-muted);
    font-size: 12px;
    font-style: normal;
}

.tw-metric__note { color: var(--tw-text-faint); font-size: 11px; font-variant-numeric: tabular-nums; }

/* 서비스·연결 상태 줄 */
.tw-status-row {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    min-width: 0;
}

.tw-status-item {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 10px 13px;
    border: 1px solid var(--tw-border);
    border-radius: var(--tw-radius-sm);
    background: var(--tw-surface);
}

.tw-status-item__signal {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--tw-text-muted);
}

.tw-status-item__signal.is-ok { background: var(--tw-success); }
.tw-status-item__signal.is-warning { background: var(--tw-warning); }
.tw-status-item__signal.is-danger { background: var(--tw-danger); }

.tw-status-item b { font-weight: 600; }
.tw-status-item small { display: block; color: var(--tw-text-faint); font-size: 11px; font-variant-numeric: tabular-nums; }

/* ============================================================
   토글 묶음 — 둘 중 하나를 고르는 자리
   ------------------------------------------------------------
   보기 방식처럼 선택지가 두세 개로 고정된 것에 쓴다. 지금 무엇이
   골라져 있는지 한눈에 보이므로 드롭다운보다 낫다.
   ============================================================ */

.tw-segmented {
    display: inline-flex;
    align-items: stretch;
    gap: 2px;
    min-width: 0;
    border: 1px solid var(--tw-border);
    border-radius: var(--tw-radius-sm);
    padding: 2px;
    background: var(--tw-surface-muted);
}

.tw-segmented__option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    border: 0;
    border-radius: calc(var(--tw-radius-sm) - 2px);
    padding: 0 12px;
    background: transparent;
    color: var(--tw-text-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

/* ============================================================
   업무 목적 탐색 — tw-purpose-nav
   설정이 많은 화면에서 기술 항목보다 업무 목적을 먼저 고른다.
   ============================================================ */

.tw-purpose-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--tw-space-2);
    min-width: 0;
}

.tw-purpose-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--tw-space-1) var(--tw-space-3);
    min-width: 0;
    padding: var(--tw-space-3);
    border: 1px solid var(--tw-border);
    border-radius: var(--tw-radius-sm);
    background: var(--tw-surface);
    color: var(--tw-text);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.tw-segmented__option:hover:not(.is-active) { color: var(--tw-text); }

.tw-segmented__option.is-active {
    background: var(--tw-surface);
    box-shadow: var(--tw-shadow);
    color: var(--tw-accent);
}

/* 아이콘만 두는 묶음. 고른 것에만 옅은 강조색을 깔아 눈에 걸리게 한다. */
.tw-segmented.is-icon-only .tw-segmented__option {
    min-width: 36px;
    padding: 0 8px;
    font-size: 15px;
}

.tw-segmented.is-icon-only .tw-segmented__option.is-active {
    background: var(--tw-accent-soft);
    box-shadow: none;
}

/* ============================================================
   안내 띠 — 화면 위에 한 줄로 알리는 말
   ============================================================ */

.tw-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: var(--tw-space-3);
    border: 1px solid var(--tw-border);
    border-radius: var(--tw-radius-md);
    padding: 14px 16px;
    background: var(--tw-surface-muted);
    color: var(--tw-text-secondary);
    font-size: 13px;
    line-height: 1.55;
}

/*
 * 카드 안에 들어간 안내는 카드 벽에 붙지 않는다. 카드 자체에는 안쪽 여백이
 * 없고 줄마다 16px 씩 들여 쓰므로, 안내도 같은 만큼 들여 글줄이 한 선에 선다.
 */
:where(.tw-view-screen__section, .tw-form-screen__card)
    > :where(.tw-notice, .tw-screen-state) {
    margin-right: 16px;
    margin-left: 16px;
}

:where(.tw-view-screen__section, .tw-form-screen__card)
    > :where(.tw-notice, .tw-screen-state):last-child {
    margin-bottom: 16px;
}

/*
 * 빈 상태·진행 안내는 카드 안에서 제 테두리를 벗는다.
 *
 * 카드가 이미 테두리를 그리고 있어, 그대로 두면 상자 안에 상자가 또 그려져
 * 두 겹으로 보였다(회의 기록의 'AI 회의 요약' 이 그랬다). 안내가 카드 밖에
 * 홀로 설 때는 예전대로 제 테두리를 쓴다.
 *
 * 이때는 제 안쪽 여백(24px 26px)이 넉넉하므로 옆으로 더 들이지 않는다.
 * 알림(tw-notice)은 색으로 눈에 띄어야 하므로 그대로 둔다.
 *
 * :where() 로 묶지 않는다. 그것은 셈에 들지 않아 아래쪽 .tw-screen-state 와
 * 힘이 같아지고, 뒤에 오는 그쪽이 이겨 테두리가 그대로 남는다.
 *
 * 목록 표면도 같은 카드다. 표에 「자료가 없습니다」 줄을 넣는 화면은 여기에
 * 걸리지 않지만, 표 없이 안내만 놓는 화면(인사평가 목록)은 그대로 두면 똑같이
 * 두 겹으로 보인다. 표면 바로 아래에 놓인 것만 벗긴다.
 */
.tw-view-screen__section > .tw-screen-state,
.tw-form-screen__card > .tw-screen-state,
.tw-list-screen__surface > .tw-screen-state {
    margin-right: 0;
    margin-left: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.tw-view-screen__section > .tw-screen-state:last-child,
.tw-form-screen__card > .tw-screen-state:last-child,
.tw-list-screen__surface > .tw-screen-state:last-child {
    margin-bottom: 0;
}

.tw-notice > i { flex: 0 0 auto; margin-top: 1px; color: var(--tw-text-faint); font-size: 16px; }
.tw-notice > div { display: grid; gap: 2px; min-width: 0; }
.tw-notice strong { color: var(--tw-text-strong); font-weight: 650; }

/* 알림 종류는 색으로만 구분한다. 왼쪽 색 띠는 쓰지 않는다. */
.tw-notice.is-info { border-color: color-mix(in srgb, var(--tw-info) 24%, var(--tw-border)); background: var(--tw-info-soft); }
.tw-notice.is-info > i { color: var(--tw-info); }
.tw-notice.is-success { border-color: color-mix(in srgb, var(--tw-success) 24%, var(--tw-border)); background: var(--tw-success-soft); }
.tw-notice.is-success > i { color: var(--tw-success); }
.tw-notice.is-warning { border-color: color-mix(in srgb, var(--tw-warning) 24%, var(--tw-border)); background: var(--tw-warning-soft); }
.tw-notice.is-warning > i { color: var(--tw-warning); }
.tw-notice.is-danger { border-color: color-mix(in srgb, var(--tw-danger) 24%, var(--tw-border)); background: var(--tw-danger-soft); }
.tw-notice.is-danger > i { color: var(--tw-danger); }

.tw-purpose-card:hover,
.tw-purpose-card:focus-visible,
.tw-purpose-card.is-current {
    border-color: var(--tw-accent);
    background: var(--tw-accent-soft);
}

.tw-purpose-card:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--tw-accent) 28%, transparent);
    outline-offset: 2px;
}

.tw-purpose-card__icon {
    grid-row: 1 / span 2;
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: var(--tw-radius-sm);
    background: var(--tw-surface-muted);
    color: var(--tw-accent);
    font-size: 16px;
}

.tw-purpose-card__copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.tw-purpose-card__title {
    color: var(--tw-text-strong);
    font-size: 13px;
    font-weight: 600;
}

.tw-purpose-card__description {
    color: var(--tw-text-muted);
    font-size: 11px;
    line-height: 1.45;
}

.tw-purpose-card__meta {
    grid-column: 2;
    color: var(--tw-text-secondary);
    font-size: 11px;
    font-style: normal;
}

/* 카드형 업무 목록 — 진행 항목은 크게, 나머지는 같은 흐름 안에서 간결하게 읽는다. */
.tw-card-list {
    display: grid;
    gap: var(--tw-space-2);
    min-width: 0;
    padding: var(--tw-space-4);
}

.tw-list-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--tw-space-3);
    min-width: 0;
    min-height: 72px;
    padding: 9px 14px;
    border: 1px solid var(--tw-border);
    border-radius: var(--tw-radius-md);
    background: var(--tw-surface);
    color: var(--tw-text);
}

.tw-list-card.is-prominent {
    min-height: 80px;
    border-color: color-mix(in srgb, var(--tw-danger) 42%, var(--tw-border));
    background: var(--tw-danger-soft);
}

.tw-list-card__body,
.tw-list-card__copy {
    display: grid;
    min-width: 0;
}

.tw-list-card__body { gap: 0; }
.tw-list-card__copy { gap: 5px; }

.tw-list-card__heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px 10px;
    min-width: 0;
}

.tw-list-card__title {
    margin: 0;
    overflow: hidden;
    color: var(--tw-text-strong);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tw-list-card.is-prominent .tw-list-card__title { font-size: 15px; }

.tw-list-card__status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--tw-surface-muted);
    color: var(--tw-text-secondary);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.tw-list-card__status::before {
    display: none;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--tw-text-faint);
    content: '';
}

.tw-list-card__status.is-live {
    padding-inline: 0;
    background: transparent;
    color: var(--tw-danger);
}
.tw-list-card__status.is-live::before { display: block; background: var(--tw-danger); }
.tw-list-card__status.is-upcoming {
    background: var(--tw-accent-soft);
    color: var(--tw-accent);
}

.tw-list-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 5px;
    margin: 0;
    color: var(--tw-text-secondary);
    font-size: 12px;
    line-height: 1.55;
}

.tw-list-card__participants {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
    color: var(--tw-text-secondary);
    font-size: 12px;
}

.tw-avatar-stack {
    display: flex;
    align-items: center;
    padding-left: 4px;
}

.tw-avatar-stack__item {
    display: grid;
    width: 26px;
    height: 26px;
    margin-left: -4px;
    place-items: center;
    border: 2px solid var(--tw-surface);
    border-radius: 999px;
    background: var(--tw-surface-muted);
    color: var(--tw-text-secondary);
    font-size: 11px;
    font-weight: 600;
}

.tw-list-card.is-prominent .tw-avatar-stack__item { border-color: var(--tw-danger-soft); }

.tw-list-card__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

.tw-list-card__actions .tw-action-button { min-width: 64px; }

.tw-card-list__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--tw-space-2);
    padding-top: var(--tw-space-2);
    color: var(--tw-text-secondary);
    font-size: 12px;
}

@media (max-width: 640px) {
    .tw-card-list { padding: var(--tw-space-3); }

    .tw-list-card,
    .tw-list-card.is-prominent {
        grid-template-columns: 1fr;
        align-items: stretch;
        min-height: 0;
        gap: var(--tw-space-3);
        padding: var(--tw-space-3);
    }

    .tw-list-card__actions { justify-content: stretch; }
    .tw-list-card__actions .tw-action-button { flex: 1 1 auto; }
}

/*
 * 날짜별 일정 목록 — 회의·교육·방문처럼 시간이 먼저 읽혀야 하는 항목을
 * 카드보다 촘촘한 agenda 흐름으로 보여 준다. 시간, 상태점, 본문, 작업 순서를
 * 어느 화면에서나 같게 유지한다.
 */
.tw-agenda-list,
.tw-agenda-list__group,
.tw-agenda-list__items {
    display: grid;
    min-width: 0;
}

.tw-agenda-list__group + .tw-agenda-list__group {
    border-top: 1px solid var(--tw-border-soft);
}

.tw-agenda-list__group-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tw-space-3);
    min-height: 38px;
    padding: 7px 18px;
    border-bottom: 1px solid var(--tw-border-soft);
    background: var(--tw-surface-muted);
    color: var(--tw-text-secondary);
}

.tw-agenda-list__group-title {
    margin: 0;
    color: var(--tw-text-strong);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.tw-agenda-list__group-count {
    font-size: 11px;
    white-space: nowrap;
}

.tw-agenda-list__item {
    display: grid;
    grid-template-columns: 72px 16px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--tw-space-3);
    min-width: 0;
    min-height: 72px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--tw-border-soft);
    background: var(--tw-bg);
}

.tw-agenda-list__item:last-child { border-bottom: 0; }

.tw-agenda-list__item.is-current {
    background: color-mix(in srgb, var(--tw-accent-soft) 50%, var(--tw-bg));
}

.tw-agenda-list__time {
    display: grid;
    gap: 2px;
    min-width: 0;
    color: var(--tw-text-strong);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    line-height: 1.35;
}

.tw-agenda-list__time small {
    overflow: hidden;
    color: var(--tw-text-secondary);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tw-agenda-list__marker {
    display: grid;
    width: 16px;
    height: 16px;
    place-items: center;
}

.tw-agenda-list__marker::before {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--tw-text-faint);
    content: '';
}

.tw-agenda-list__item.is-current .tw-agenda-list__marker::before {
    background: var(--tw-danger);
    box-shadow: 0 0 0 4px var(--tw-danger-soft);
}

.tw-agenda-list__content {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.tw-agenda-list__heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 9px;
    min-width: 0;
}

.tw-agenda-list__title {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--tw-text-strong);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

a.tw-agenda-list__title:hover { color: var(--tw-accent-hover); }

.tw-agenda-list__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 6px;
    min-width: 0;
    margin: 0;
    color: var(--tw-text-secondary);
    font-size: 12px;
    line-height: 1.5;
}

.tw-agenda-list__participants {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.tw-agenda-list__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    min-width: 0;
}

.tw-agenda-list__actions .tw-action-button { min-width: 64px; }
.tw-agenda-list__actions form { display: contents; }

@media (max-width: 640px) {
    .tw-agenda-list__group-heading { padding-inline: var(--tw-space-3); }

    .tw-agenda-list__item {
        grid-template-columns: 58px 12px minmax(0, 1fr);
        gap: var(--tw-space-2);
        padding: var(--tw-space-3);
    }

    .tw-agenda-list__actions {
        grid-column: 3;
        justify-content: flex-start;
        padding-top: 2px;
    }

    .tw-agenda-list__actions .tw-action-button { min-width: 72px; }

    .tw-agenda-list__title {
        overflow: visible;
        overflow-wrap: anywhere;
        text-overflow: clip;
        white-space: normal;
    }
}

/* 제목과 항목을 반복해서 묶는 간결한 목록 */
.tw-grouped-list,
.tw-grouped-list__group,
.tw-grouped-list__items {
    display: grid;
    min-width: 0;
}

.tw-grouped-list { gap: var(--tw-space-2); }
.tw-grouped-list__group { gap: var(--tw-space-2); }
.tw-grouped-list__items { gap: var(--tw-space-2); }

.tw-grouped-list__group + .tw-grouped-list__group {
    padding-top: var(--tw-space-2);
    border-top: 1px solid var(--tw-border-soft);
}

.tw-grouped-list__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tw-space-2);
    color: var(--tw-text-secondary);
}

.tw-grouped-list__heading strong { font-size: 12px; font-weight: 600; }
.tw-grouped-list__heading span { color: var(--tw-text-muted); font-size: 11px; }

/* 필요할 때만 여는 보조·고급 설정 */
.tw-disclosure {
    overflow: visible;
    border: 1px solid var(--tw-border-soft);
    border-radius: var(--tw-radius-sm);
    background: var(--tw-surface-muted);
}

.tw-disclosure > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tw-space-4);
    min-height: 42px;
    padding: var(--tw-space-2) var(--tw-space-3);
    color: var(--tw-text);
    cursor: pointer;
    user-select: none;
}

.tw-disclosure > summary > span:first-child {
    display: grid;
    gap: 2px;
}

.tw-disclosure > summary strong { font-weight: 600; }
.tw-disclosure > summary small { color: var(--tw-text-muted); font-size: 11px; }
.tw-disclosure__content { padding: 0 var(--tw-space-3) var(--tw-space-3); }

/* ============================================================
   실시간 협업 작업영역 — tw-live-workspace
   ------------------------------------------------------------
   영상 회의·원격 지원처럼 가운데 무대, 오른쪽 정보 패널, 아래 제어줄을
   한 화면 안에서 함께 쓰는 보기 화면이다. 문서는 스크롤하지 않고 정보 패널
   본문 하나만 세로 스크롤을 가진다. 좁은 화면에서는 패널을 무대 아래에 둔다.
   ============================================================ */

.tw-live-workspace {
    display: block;
    width: 100%;
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: var(--tw-action);
    color: var(--tw-bg);
}

.tw-live-prejoin,
.tw-live-workspace__session {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
}

.tw-live-prejoin[hidden],
.tw-live-workspace__session[hidden],
.tw-live-workspace__sidebar[hidden] { display: none; }

/* 회의·원격지원에서 공통으로 쓰는 입장 전 장치 확인 화면 */
.tw-live-prejoin {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    background: var(--tw-bg-soft);
    color: var(--tw-text);
}

.tw-live-prejoin__header {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: var(--tw-space-4);
    padding: 12px 18px;
    border-bottom: 1px solid var(--tw-border-soft);
    background: var(--tw-surface);
}

.tw-live-prejoin__brand {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
    color: var(--tw-text-strong);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.tw-live-prejoin__brand-icon,
.tw-live-prejoin__meeting-mark {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--tw-radius-sm);
    background: var(--tw-accent-soft);
    color: var(--tw-accent);
}

.tw-live-prejoin__brand-icon { width: 32px; height: 32px; font-size: 15px; }

.tw-live-prejoin__body {
    display: grid;
    width: min(1180px, 100%);
    min-width: 0;
    min-height: 0;
    margin: 0 auto;
    padding: clamp(20px, 4vw, 48px);
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 400px);
    align-items: center;
    gap: clamp(28px, 5vw, 64px);
    overflow-y: auto;
}

.tw-live-prejoin__media {
    display: grid;
    min-width: 0;
    align-content: center;
    gap: var(--tw-space-4);
}

.tw-live-prejoin__preview {
    position: relative;
    display: grid;
    width: 100%;
    min-width: 0;
    min-height: 360px;
    aspect-ratio: 16 / 10;
    place-items: center;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--tw-bg) 14%, transparent);
    border-radius: var(--tw-radius-lg);
    background: var(--tw-action);
    box-shadow: var(--tw-shadow-lg);
}

.tw-live-prejoin__preview video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1);
}

.tw-live-prejoin__placeholder { display: grid; place-items: center; }
.tw-live-prejoin__placeholder[hidden] { display: none; }

.tw-live-prejoin__avatar,
.tw-live-media__avatar {
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: var(--tw-accent);
    color: var(--tw-bg);
    font-weight: 600;
}

.tw-live-prejoin__avatar { width: 92px; height: 92px; font-size: 30px; }

.tw-live-prejoin__preview-status {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 1;
    margin: 0;
    padding: 7px 10px;
    border-radius: var(--tw-radius-lg);
    background: color-mix(in srgb, var(--tw-action) 78%, transparent);
    color: var(--tw-bg);
    font-size: 11px;
}

.tw-live-prejoin__controls {
    position: absolute;
    right: 18px;
    bottom: 18px;
    left: 18px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* 회의·원격지원에서 공통으로 쓰는 입장 전 장치 선택 패널 */
.tw-live-device-panel {
    display: grid;
    min-width: 0;
    gap: var(--tw-space-3);
    padding: var(--tw-space-4);
    border: 1px solid var(--tw-border-soft);
    border-radius: var(--tw-radius-md);
    background: var(--tw-surface);
    box-shadow: var(--tw-shadow-sm);
}

.tw-live-device-panel[hidden] { display: none; }

.tw-live-device-panel__heading,
.tw-live-device-panel__footer {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: var(--tw-space-3);
}

.tw-live-device-panel__heading > div { display: grid; min-width: 0; gap: 3px; }
.tw-live-device-panel__heading h2 { margin: 0; color: var(--tw-text-strong); font-size: 14px; font-weight: 600; }
.tw-live-device-panel__heading p,
.tw-live-device-panel__footer p {
    margin: 0;
    color: var(--tw-text-secondary);
    font-size: 11px;
    line-height: 1.45;
}

.tw-live-device-panel__fields {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--tw-space-3);
}

.tw-live-device-panel .tw-field { min-width: 0; }
.tw-live-device-panel .tw-input { width: 100%; min-width: 0; }
.tw-live-device-panel__footer p { flex: 1 1 auto; }
.tw-live-device-panel__footer .tw-action-button { flex: 0 0 auto; }

.tw-live-prejoin__details {
    display: grid;
    min-width: 0;
    align-content: center;
    gap: var(--tw-space-4);
}

.tw-live-prejoin__meeting-mark { width: 48px; height: 48px; font-size: 21px; }
.tw-live-prejoin__copy { display: grid; min-width: 0; gap: var(--tw-space-2); }

.tw-live-prejoin__eyebrow {
    margin: 0;
    color: var(--tw-accent);
    font-size: 12px;
    font-weight: 600;
}

.tw-live-prejoin__copy h1 {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--tw-text-strong);
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 600;
    line-height: 1.35;
}

.tw-live-prejoin__badges,
.tw-live-prejoin__meta,
.tw-live-prejoin__meta span {
    display: flex;
    min-width: 0;
    align-items: center;
}

.tw-live-prejoin__badges { flex-wrap: wrap; gap: 7px; }
.tw-live-prejoin__meta { flex-wrap: wrap; gap: 7px 14px; margin: 0; color: var(--tw-text-secondary); font-size: 12px; }
.tw-live-prejoin__meta span { gap: 6px; }
.tw-live-prejoin__meta i { color: var(--tw-text-faint); }

.tw-live-prejoin__help,
.tw-live-prejoin__admission-note {
    margin: 0;
    color: var(--tw-text-secondary);
    line-height: 1.55;
}

.tw-live-prejoin__help { font-size: 13px; }
.tw-live-prejoin__admission-note { color: var(--tw-text-faint); font-size: 11px; text-align: center; }
.tw-live-prejoin__actions { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; gap: var(--tw-space-2); }
.tw-live-prejoin__actions .tw-action-button { justify-content: center; min-height: 44px; }
.tw-live-prejoin__join { width: 100%; }

.tw-live-workspace__session { display: block; }

@media screen and (max-width: 900px) and (min-width: 721px) {
    .tw-live-device-panel__fields { grid-template-columns: minmax(0, 1fr); }
    .tw-live-device-panel__footer { align-items: stretch; flex-direction: column; }
    .tw-live-device-panel__footer .tw-action-button { width: 100%; justify-content: center; }
}

.tw-live-workspace__header {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--tw-space-4);
    padding: 11px 16px 7px;
    background: var(--tw-action);
}

.tw-live-workspace__heading { display: grid; min-width: 0; gap: 3px; }
.tw-live-workspace__eyebrow {
    margin: 0;
    color: var(--tw-accent-soft);
    font-size: 11px;
    font-weight: 600;
}

.tw-live-workspace__title-row {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
}

.tw-live-workspace__title-row h1 {
    overflow: hidden;
    margin: 0;
    color: var(--tw-bg);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tw-live-workspace__meta {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
    overflow: hidden;
    margin: 0;
    color: color-mix(in srgb, var(--tw-bg) 72%, transparent);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tw-live-workspace__header-actions { display: flex; min-width: 0; align-items: center; gap: 8px; }

.tw-live-workspace__body {
    display: grid;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    overflow: hidden;
    background: var(--tw-action);
}

.tw-live-workspace__stage-shell {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    background: var(--tw-action);
}

.tw-live-workspace__stage {
    position: relative; /* 손 든 사람 알림이 이 안에 떠 있다. */
    display: grid;
    min-width: 0;
    min-height: 0;
    place-items: center;
    overflow: hidden;
    padding: clamp(14px, 2.4vw, 30px);
    background: var(--tw-action);
}

.tw-live-workspace__stage .tw-screen-state,
.tw-live-workspace__stage-state {
    width: min(100%, 520px);
}

.tw-live-workspace__stage .tw-screen-state > i { color: var(--tw-accent); }
.tw-live-workspace__stage-actions { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; }

.tw-live-workspace__stage-state {
    display: grid;
    justify-items: center;
    gap: var(--tw-space-4);
    color: color-mix(in srgb, var(--tw-bg) 78%, transparent);
    text-align: center;
}

.tw-live-workspace__stage-state[hidden] { display: none; }

.tw-live-workspace__stage-state-icon {
    display: inline-grid;
    width: 74px;
    height: 74px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--tw-bg) 14%, transparent);
    border-radius: 50%;
    background: var(--tw-action-hover);
    color: var(--tw-accent-soft);
    font-size: 27px;
}

.tw-live-workspace__stage-state h2 { margin: 0 0 6px; color: var(--tw-bg); font-size: 17px; font-weight: 600; }
.tw-live-workspace__stage-state p { max-width: 460px; margin: 0; font-size: 12px; line-height: 1.6; }

.tw-live-media {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
}

.tw-live-media__view-controls {
    position: absolute;
    z-index: 3;
    top: var(--tw-space-3);
    left: 50%;
    display: inline-flex;
    max-width: calc(100% - (var(--tw-space-3) * 2));
    align-items: center;
    gap: var(--tw-space-1);
    padding: var(--tw-space-1);
    border: 1px solid color-mix(in srgb, var(--tw-bg) 16%, transparent);
    border-radius: var(--tw-radius-lg);
    background: color-mix(in srgb, var(--tw-action) 88%, transparent);
    box-shadow: var(--tw-shadow-sm);
    transform: translateX(-50%);
}

.tw-live-media__view-option {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    gap: var(--tw-space-2);
    padding: 0 var(--tw-space-3);
    border: 1px solid transparent;
    border-radius: var(--tw-radius-md);
    background: transparent;
    color: color-mix(in srgb, var(--tw-bg) 78%, transparent);
    font: 400 11px/1 var(--tw-font);
    white-space: nowrap;
    cursor: pointer;
}

.tw-live-media__view-option:hover { background: var(--tw-action-hover); color: var(--tw-bg); }
.tw-live-media__view-option:focus-visible { outline: 2px solid var(--tw-focus); outline-offset: 1px; }
.tw-live-media__view-option.is-active {
    border-color: color-mix(in srgb, var(--tw-bg) 18%, transparent);
    background: var(--tw-bg);
    color: var(--tw-action);
}

.tw-live-media__grid {
    display: grid;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    grid-auto-rows: minmax(0, 1fr);
    gap: var(--tw-space-3);
}

.tw-live-media[data-layout="speaker"]:not(.is-single) .tw-live-media__grid {
    grid-template-columns: minmax(0, 1fr) clamp(144px, 20vw, 240px);
    grid-template-rows: repeat(var(--tw-live-side-count), minmax(0, 1fr));
}

.tw-live-media[data-layout="speaker"]:not(.is-single) .tw-live-media__tile.is-featured {
    grid-column: 1;
    grid-row: 1 / -1;
}

.tw-live-media[data-layout="speaker"]:not(.is-single) .tw-live-media__tile:not(.is-featured) {
    grid-column: 2;
}

.tw-live-media__tile {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    margin: 0;
    border: 1px solid var(--tw-border);
    border-radius: var(--tw-radius-md);
    background: var(--tw-action-hover);
    box-shadow: var(--tw-shadow-sm);
}

.tw-live-media__tile.is-featured { border-color: color-mix(in srgb, var(--tw-accent) 72%, var(--tw-border)); }

.tw-live-media__tile video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tw-live-media__tile.is-local video { transform: scaleX(-1); }
.tw-live-media__tile.is-local[data-track-source*="screen"] video { transform: none; }

.tw-live-media__placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: var(--tw-space-3);
    color: color-mix(in srgb, var(--tw-bg) 78%, transparent);
    text-align: center;
}

.tw-live-media__tile.has-video .tw-live-media__placeholder { display: none; }
.tw-live-media__placeholder .tw-live-media__avatar {
    width: clamp(54px, 9vw, 84px);
    height: clamp(54px, 9vw, 84px);
    font-size: clamp(20px, 3vw, 27px);
}
.tw-live-media__placeholder-state { font-size: 11px; }

.tw-live-media__focus {
    position: absolute;
    z-index: 2;
    top: var(--tw-space-2);
    right: var(--tw-space-2);
    display: inline-grid;
    width: 32px;
    height: 32px;
    place-items: center;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--tw-bg) 18%, transparent);
    border-radius: var(--tw-radius-md);
    background: color-mix(in srgb, var(--tw-action) 82%, transparent);
    color: var(--tw-bg);
    font-size: 12px;
    cursor: pointer;
}

.tw-live-media__focus:hover,
.tw-live-media__focus[aria-pressed="true"] { border-color: var(--tw-accent); background: var(--tw-accent); }
.tw-live-media__focus:focus-visible { outline: 2px solid var(--tw-focus); outline-offset: 2px; }

.tw-live-media__label {
    position: absolute;
    right: var(--tw-space-2);
    bottom: var(--tw-space-2);
    max-width: calc(100% - var(--tw-space-4));
    overflow: hidden;
    padding: var(--tw-space-1) var(--tw-space-2);
    border-radius: var(--tw-radius-sm);
    background: var(--tw-action);
    color: var(--tw-bg);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tw-live-media__empty {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: var(--tw-space-3);
    color: var(--tw-bg);
    text-align: center;
}

.tw-live-media__empty i { color: var(--tw-accent-soft); font-size: 32px; }
.tw-live-media__empty p { max-width: 360px; margin: 0; font-size: 12px; line-height: 1.6; }
.tw-live-media__avatar { width: 84px; height: 84px; font-size: 27px; }
.tw-live-media__audio { position: absolute; width: 0; height: 0; overflow: hidden; }

.tw-live-workspace__sidebar {
    display: grid;
    width: clamp(300px, 24vw, 360px);
    min-width: 0;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
    margin: 10px 10px 10px 0;
    overflow: hidden;
    border: 1px solid var(--tw-border);
    border-radius: var(--tw-radius-md);
    background: var(--tw-surface);
    box-shadow: var(--tw-shadow-lg);
    color: var(--tw-text);
}

.tw-live-workspace__sidebar-header {
    display: grid;
    gap: 9px;
    padding: 12px;
    border-bottom: 1px solid var(--tw-border-soft);
}

.tw-live-workspace__sidebar-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.tw-live-workspace__sidebar-title > div { display: grid; gap: 2px; min-width: 0; }
.tw-live-workspace__sidebar-title h2 {
    margin: 0;
    color: var(--tw-text-strong);
    font-size: 13px;
    font-weight: 600;
}
.tw-live-workspace__sidebar-title span { color: var(--tw-text-secondary); font-size: 11px; }
.tw-live-workspace__tabs.tw-screen-tabs { margin: 0; }
.tw-live-workspace__tabs .tw-screen-tab { flex: 1 1 0; min-width: 0; padding-inline: 10px; }

.tw-live-workspace__panel {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr) auto;
    overflow: hidden;
}
.tw-live-workspace__panel[hidden] { display: none; }
.tw-live-workspace__panel.is-chat { display: block; }
.tw-live-workspace__panel-body {
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    padding: 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--tw-border) transparent;
}
.tw-live-workspace__panel-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 10px 12px;
    border-top: 1px solid var(--tw-border-soft);
    background: var(--tw-surface);
}
.tw-live-workspace__panel .tw-people-list__item { background: var(--tw-surface); }
.tw-people-list__identity-copy { display: grid; min-width: 0; gap: 2px; }
.tw-people-list__identity-copy strong {
    overflow: hidden;
    color: var(--tw-text);
    font-size: 12px;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tw-people-list__identity-copy small {
    overflow: hidden;
    color: var(--tw-text-secondary);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tw-live-workspace__empty {
    display: grid;
    min-height: 100%;
    place-items: center;
    color: var(--tw-text-secondary);
    font-size: 12px;
    text-align: center;
}

.tw-live-chat {
    display: grid;
    min-width: 0;
    min-height: 0;
    height: 100%;
    grid-template-rows: minmax(0, 1fr) auto;
}

.tw-live-chat__messages {
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    padding: 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--tw-border) transparent;
}

.tw-live-chat__list {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tw-live-chat__message {
    display: grid;
    width: min(88%, 260px);
    justify-self: start;
    gap: 4px;
    padding: 8px 10px;
    border-radius: var(--tw-radius-md);
    background: var(--tw-bg-soft);
    color: var(--tw-text);
}

.tw-live-chat__message.is-mine {
    justify-self: end;
    background: var(--tw-accent-soft);
}

.tw-live-chat__message-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--tw-text-secondary);
    font-size: 11px;
}

.tw-live-chat__message-meta strong { color: var(--tw-text-strong); font-weight: 600; }
.tw-live-chat__message p {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--tw-text);
    font-size: 12px;
    line-height: 1.55;
    white-space: pre-wrap;
}

.tw-live-chat__composer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
    padding: 10px;
    border-top: 1px solid var(--tw-border-soft);
    background: var(--tw-surface);
}

.tw-live-chat__composer input {
    min-width: 0;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid var(--tw-border);
    border-radius: var(--tw-radius-sm);
    outline: none;
    background: var(--tw-surface);
    color: var(--tw-text);
    font: 400 12px/1.4 var(--tw-font);
}

.tw-live-chat__composer input::placeholder { color: var(--tw-text-placeholder); }
.tw-live-chat__composer input:focus {
    border-color: var(--tw-accent);
    box-shadow: 0 0 0 3px var(--tw-focus);
}

/*
 * 회의 기록 맨 위의 주의. 카드 안내(tw-notice)와 일부러 다르게 생겼다.
 * 읽기 전에 먼저 짚고 가야 하는 이야기라 화면에서 한 번은 눈에 걸려야 한다.
 */
.tw-speech-caution {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 14px;
    margin: 0 0 18px;
    padding: 16px 18px;
    border: 0;
    border-radius: var(--tw-radius-md);
    background: color-mix(in srgb, var(--tw-warning) 9%, var(--tw-surface));
    color: var(--tw-text-secondary);
}

/* 둥근 표식 하나로 알아보게 한다. 선을 긋지 않는다. */
.tw-speech-caution__mark {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--tw-warning) 24%, var(--tw-surface));
    color: color-mix(in srgb, var(--tw-warning) 75%, #000000);
    font-size: 17px;
}

.tw-speech-caution > div { display: grid; min-width: 0; gap: 4px; }

/* 무엇에 대한 이야기인지 한 낱말로 먼저 밝힌다. */
.tw-speech-caution__eyebrow {
    color: color-mix(in srgb, var(--tw-warning) 72%, #000000);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .1em;
}

.tw-speech-caution strong {
    color: var(--tw-text-strong);
    font-size: 14px;
    font-weight: 700;
}

.tw-speech-caution p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

/*
 * 보존 기간 안내.
 *
 * 경고가 아니라 사실을 알리는 한 줄이다. 위의 주의 상자처럼 크게 두면 정작
 * 읽어야 할 주의가 묻히므로, 조용한 한 줄로 둔다. 관리자가 기간을 정했을
 * 때만 화면에 그려진다.
 */
.tw-retention-note {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding: 9px 14px;
    border-radius: var(--tw-radius-sm);
    background: color-mix(in srgb, var(--tw-text-muted) 8%, var(--tw-surface));
    color: var(--tw-text-secondary);
    font-size: 12px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.tw-retention-note > i {
    flex: 0 0 auto;
    color: var(--tw-text-muted);
    font-size: 14px;
}

/* 회의 중 기록 칸에서는 폭이 좁아 양옆 여백을 줄인다. */
.tw-live-transcript .tw-retention-note {
    margin: 0 0 10px;
    padding: 8px 12px;
}

/*
 * 보관 기간을 정하는 레이어 창.
 *
 * 값 두 개를 고치는 자리라 화면을 따로 만들지 않고 이 창으로 끝낸다.
 */
.tw-retention-dialog {
    display: grid;
    min-width: 0;
    gap: 16px;
}

.tw-retention-dialog__intro {
    margin: 0;
    color: var(--tw-text-secondary);
    font-size: 13px;
    line-height: 1.6;
}

.tw-retention-dialog__field {
    display: grid;
    min-width: 0;
    gap: 6px;
}

.tw-retention-dialog__label {
    color: var(--tw-text-strong);
    font-size: 13px;
    font-weight: 650;
}

.tw-retention-dialog__control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tw-retention-dialog__control input {
    width: 120px;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid var(--tw-border);
    border-radius: var(--tw-radius-sm);
    background: var(--tw-surface);
    color: var(--tw-text-strong);
    font: inherit;
    font-size: 14px;
}

.tw-retention-dialog__control input:focus {
    border-color: var(--tw-accent);
    outline: 2px solid color-mix(in srgb, var(--tw-accent) 13%, transparent);
    outline-offset: 1px;
}

.tw-retention-dialog__unit {
    color: var(--tw-text-secondary);
    font-size: 13px;
}

.tw-retention-dialog__field small {
    color: var(--tw-text-muted);
    font-size: 12px;
    line-height: 1.6;
}

.tw-retention-dialog__preview {
    margin: 0;
    padding: 10px 14px;
    border-radius: var(--tw-radius-sm);
    background: color-mix(in srgb, var(--tw-text-muted) 8%, var(--tw-surface));
    color: var(--tw-text-secondary);
    font-size: 12px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

/* 실제로 지워질 것이 있으면 눈에 들어와야 한다. */
.tw-retention-dialog__preview.is-warning {
    background: color-mix(in srgb, var(--tw-warning) 12%, var(--tw-surface));
    color: color-mix(in srgb, var(--tw-warning) 78%, #000000);
    font-weight: 650;
}

.tw-retention-dialog__footnote {
    margin: 0;
    color: var(--tw-text-muted);
    font-size: 12px;
}

/*
 * 아이콘 단추.
 *
 * 여태 `c-shell.css` 에만 있었는데 `_CFrameLayout` 은 그 파일을 부르지 않는다.
 * 그래서 이 뼈대를 쓰는 화면에서는 브라우저 기본 단추 그대로, 회색 상자에
 * 테두리까지 두른 모습으로 나왔다. 여기에도 두어 어느 뼈대에서든 같게 만든다.
 */
.tw-icon-button {
    display: inline-grid;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: var(--tw-radius-sm);
    background: transparent;
    color: var(--tw-text-muted);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.tw-icon-button:hover {
    background: var(--tw-bg-hover);
    color: var(--tw-text-strong);
}

/* 제목과 물음표는 한 줄에 선다. 머리글의 아이콘 줄바꿈은 그대로 둔다. */
.tw-heading-with-tip {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 2px;
}

/*
 * 제목 옆 물음표는 단추가 아니라 글자 옆 표식으로 읽혀야 한다.
 * 상자도 바탕도 두지 않고 글리프만 남긴다.
 */
.tw-heading-tip {
    width: auto;
    height: auto;
    padding: 2px;
    color: var(--tw-text-faint);
    font-size: 13px;
}

.tw-heading-tip:hover { background: transparent; color: var(--tw-accent); }

/* 회의 기록 화면의 발언 목록.
   발언마다 상자를 두르면 글보다 테두리가 먼저 읽힌다. 얼굴과 이름만 남기고
   구분은 얇은 선으로 대신한다. */
.tw-record-transcript {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 4px 0;
    list-style: none;
}

.tw-record-transcript__item {
    display: grid;
    min-width: 0;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 11px 16px;
    border-bottom: 1px dotted var(--tw-border-soft);
}

.tw-record-transcript__item:last-child { border-bottom: 0; }
.tw-record-transcript__item.is-removed { opacity: .65; }
.tw-record-transcript__photo { width: 32px; height: 32px; }

.tw-record-transcript__body {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.tw-record-transcript__meta {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    margin: 0;
}

.tw-record-transcript__meta strong {
    color: var(--tw-text-strong);
    font-size: 13px;
    font-weight: 600;
}

.tw-record-transcript__meta time {
    color: var(--tw-text-muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

/*
 * 원래 목소리 듣기.
 *
 * 발언 줄마다 붙으므로 조용히 서 있다가 가리킬 때만 드러난다. 상자를 두르면
 * 문장보다 단추가 먼저 눈에 들어온다.
 */
.tw-record-transcript__play {
    width: 24px;
    height: 24px;
    align-self: center;
    font-size: 14px;
}

.tw-record-transcript__play.is-playing {
    background: color-mix(in srgb, var(--tw-accent) 14%, transparent);
    color: var(--tw-accent);
}

.tw-record-transcript__text {
    margin: 0;
    color: var(--tw-text);
    font-size: 13px;
    line-height: 1.65;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

/* 골라 지울 수 있을 때만 발언 앞에 확인칸이 붙는다. */
.tw-record-transcript.is-selectable .tw-record-transcript__item {
    grid-template-columns: auto auto minmax(0, 1fr);
}

.tw-record-transcript__check {
    width: 15px;
    height: 15px;
    margin: 9px 0 0;
    accent-color: var(--tw-accent);
    cursor: pointer;
}

.tw-record-transcript__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 9px 16px;
    border-bottom: 1px solid var(--tw-border-soft);
    background: var(--tw-surface-muted);
    font-size: 12px;
}

.tw-record-transcript__bar[hidden] { display: none; }
.tw-record-transcript__bar label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.tw-record-transcript__bar label input { accent-color: var(--tw-accent); cursor: pointer; }
.tw-record-transcript__bar-count { color: var(--tw-text-muted); }
.tw-record-transcript__bar .tw-list-screen__actions { margin-left: auto; }

/* 지운 사람과 지운 때. 무엇이 사라졌는지 뒤에서 확인하는 자리다. */
.tw-record-deletions {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 4px 0;
    list-style: none;
}

.tw-record-deletions__item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    padding: 9px 16px;
    border-bottom: 1px dotted var(--tw-border-soft);
}

.tw-record-deletions__item:last-child { border-bottom: 0; }
.tw-record-deletions__item strong {
    color: var(--tw-text-strong);
    font-size: 13px;
    font-weight: 600;
}

.tw-record-deletions__item time {
    color: var(--tw-text-muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.tw-record-deletions__item span {
    min-width: 0;
    color: var(--tw-text-secondary);
    font-size: 12px;
    overflow-wrap: anywhere;
}

.tw-live-workspace__panel.is-chat[hidden],
.tw-live-workspace__panel.is-transcript[hidden] { display: none; }
.tw-live-workspace__panel.is-transcript:not([hidden]) { display: block; }

/* 머리글·고르기 줄·발언·지운 이력·꼬리글이 상황에 따라 늘고 준다. 행 수를 못박지
   않도록 세로 flex로 두고, 발언 목록만 남은 높이를 차지하게 한다. */
.tw-live-transcript {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
}

.tw-live-transcript__header,
.tw-live-transcript__footer {
    display: flex;
    flex: 0 0 auto;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: var(--tw-space-2);
    padding: var(--tw-space-3);
    background: var(--tw-surface);
}

.tw-live-transcript__header { border-bottom: 1px solid var(--tw-border-soft); }
.tw-live-transcript__footer {
    border-top: 1px solid var(--tw-border-soft);
    color: var(--tw-text-secondary);
    font-size: 11px;
    line-height: 1.45;
}

.tw-live-transcript__body {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    padding: var(--tw-space-3);
    scrollbar-color: var(--tw-border) transparent;
    scrollbar-width: thin;
}

.tw-live-transcript__list {
    display: grid;
    gap: var(--tw-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.tw-live-transcript__segment {
    display: grid;
    min-width: 0;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--tw-space-2);
    padding-bottom: var(--tw-space-3);
    border-bottom: 1px solid var(--tw-border-soft);
}

/* 도구 줄 단추에 붙는 숫자. 손 든 사람이 몇인지 명단을 열지 않고 안다. */
.tw-live-control__count {
    display: inline-grid;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    place-items: center;
    border-radius: 999px;
    background: var(--tw-warning);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.tw-live-control__count[hidden] { display: none; }

/* 손 든 사람 알림. 회의 화면 위에 떠 있어 명단을 열지 않아도 보인다. */
.tw-live-hands {
    position: absolute;
    z-index: 3;
    top: 12px;
    left: 50%;
    display: flex;
    max-width: min(560px, calc(100% - 24px));
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgb(24 30 42 / 88%);
    color: #ffffff;
    font-size: 12px;
    line-height: 1.4;
    transform: translateX(-50%);
}

.tw-live-hands[hidden] { display: none; }
.tw-live-hands > i { flex: 0 0 auto; color: var(--tw-warning); font-size: 14px; }
.tw-live-hands > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tw-live-hands__open {
    flex: 0 0 auto;
    border: 1px solid rgb(255 255 255 / 35%);
    border-radius: 999px;
    padding: 3px 10px;
    background: transparent;
    color: #ffffff;
    font: inherit;
    cursor: pointer;
}

.tw-live-hands__open:hover { background: rgb(255 255 255 / 14%); }

.tw-live-transcript__photo { width: 28px; height: 28px; }

.tw-live-transcript__list.is-selectable .tw-live-transcript__segment {
    grid-template-columns: auto auto minmax(0, 1fr);
}

.tw-live-transcript__check {
    margin: 7px 0 0;
    accent-color: var(--tw-accent);
    cursor: pointer;
}

.tw-live-transcript__bar {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: var(--tw-space-2) var(--tw-space-3);
    border-bottom: 1px solid var(--tw-border-soft);
    color: var(--tw-text-secondary);
    font-size: 11px;
}

.tw-live-transcript__bar[hidden] { display: none; }
.tw-live-transcript__bar label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.tw-live-transcript__bar label input { accent-color: var(--tw-accent); cursor: pointer; }
.tw-live-transcript__bar .tw-list-screen__actions { margin-left: auto; }

.tw-live-transcript__deletions {
    flex: 0 0 auto;
    max-height: 116px;
    overflow-y: auto;
    padding: var(--tw-space-2) var(--tw-space-3);
    border-top: 1px solid var(--tw-border-soft);
    color: var(--tw-text-secondary);
    font-size: 11px;
    line-height: 1.5;
}

.tw-live-transcript__deletions[hidden] { display: none; }
.tw-live-transcript__deletions > summary { cursor: pointer; color: var(--tw-text-muted); }
.tw-live-transcript__deletions ul {
    display: grid;
    gap: 3px;
    margin: var(--tw-space-2) 0 0;
    padding: 0;
    list-style: none;
}

.tw-live-transcript__deletions li { overflow-wrap: anywhere; }
.tw-live-transcript__deletions strong { color: var(--tw-text-strong); font-weight: 600; }
.tw-live-transcript__segment-body {
    display: grid;
    min-width: 0;
    gap: var(--tw-space-1);
}

.tw-live-transcript__segment:last-child { padding-bottom: 0; border-bottom: 0; }
.tw-live-transcript__segment-meta {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: var(--tw-space-2);
    color: var(--tw-text-secondary);
    font-size: 11px;
}
.tw-live-transcript__segment-meta strong {
    overflow: hidden;
    color: var(--tw-text-strong);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tw-live-transcript__segment-meta time { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.tw-live-transcript__segment p {
    margin: 0;
    color: var(--tw-text);
    font-size: 12px;
    line-height: 1.6;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.tw-live-workspace__toolbar {
    display: grid;
    min-width: 0;
    align-items: center;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 10px;
    overflow: hidden;
    padding: 9px 14px 13px;
    background: var(--tw-action);
}

.tw-live-workspace__toolbar-group {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}

.tw-live-workspace__toolbar-group:nth-child(2) { justify-content: center; }
.tw-live-workspace__toolbar-group.is-departure { justify-content: flex-end; }

.tw-live-control {
    display: inline-flex;
    min-width: 42px;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 13px;
    border: 1px solid color-mix(in srgb, var(--tw-bg) 16%, transparent);
    border-radius: var(--tw-radius-lg);
    background: var(--tw-action-hover);
    color: var(--tw-bg);
    font: 400 12px/1 var(--tw-font);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.tw-live-control:hover:not(:disabled) { border-color: color-mix(in srgb, var(--tw-bg) 34%, transparent); }
.tw-live-control:focus-visible { outline: 2px solid var(--tw-focus); outline-offset: 2px; }
.tw-live-control:disabled { opacity: .52; cursor: not-allowed; }
.tw-live-control[aria-pressed="true"] { border-color: var(--tw-accent); background: var(--tw-accent); }
.tw-live-control.is-quiet { background: transparent; }
.tw-live-control.is-danger { border-color: var(--tw-danger); background: var(--tw-danger); }
.tw-live-prejoin__controls .tw-live-control { box-shadow: var(--tw-shadow-sm); }

@media screen and (max-width: 1100px) {
    .tw-live-workspace__toolbar {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: stretch;
        justify-content: stretch;
        gap: 4px;
        overflow: visible;
        padding: 7px 8px calc(10px + env(safe-area-inset-bottom));
    }
    .tw-live-workspace__toolbar-group { display: contents; }
    .tw-live-workspace__toolbar .tw-live-control {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        padding: 0;
    }
    .tw-live-workspace__toolbar .tw-live-control > span { display: none; }
}

@media screen and (max-width: 720px) {
    .tw-live-prejoin__header { padding: 9px 12px; }
    .tw-live-prejoin__body {
        align-content: start;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--tw-space-5);
        overflow-y: auto;
        padding: var(--tw-space-4);
    }
    .tw-live-prejoin__preview { min-height: 250px; aspect-ratio: 4 / 3; }
    .tw-live-prejoin__media { align-content: start; }
    .tw-live-device-panel { padding: var(--tw-space-3); }
    .tw-live-device-panel__fields { grid-template-columns: minmax(0, 1fr); }
    .tw-live-device-panel__footer { align-items: stretch; flex-direction: column; }
    .tw-live-device-panel__footer .tw-action-button { width: 100%; justify-content: center; }
    .tw-live-prejoin__details { gap: var(--tw-space-3); padding-bottom: var(--tw-space-4); }
    .tw-live-prejoin__meeting-mark { display: none; }
    .tw-live-prejoin__copy h1 { font-size: 21px; }
    .tw-live-prejoin__help { font-size: 12px; }
    .tw-live-prejoin__controls {
        right: 12px;
        bottom: 12px;
        left: 12px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .tw-live-prejoin__controls .tw-live-control {
        width: 100%;
        min-width: 0;
        padding-inline: var(--tw-space-2);
    }
    .tw-live-prejoin__controls .tw-live-control:last-child { grid-column: 1 / -1; }
    .tw-live-prejoin__preview-status { top: 12px; left: 12px; }
    .tw-live-prejoin__actions {
        position: sticky;
        z-index: 2;
        bottom: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: var(--tw-space-2) 0 calc(var(--tw-space-2) + env(safe-area-inset-bottom));
        background: var(--tw-bg-soft);
    }
    .tw-live-prejoin__join { grid-column: 1 / -1; }

    .tw-live-workspace__header {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--tw-space-2);
        padding: 8px 10px 5px;
    }
    .tw-live-workspace__header-actions {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: var(--tw-space-1);
    }
    .tw-live-workspace__header-actions .tw-live-control { min-height: 36px; }
    .tw-live-workspace__title-row h1 { font-size: 15px; }
    .tw-live-workspace__meta { display: none; }
    .tw-live-workspace__header-actions .tw-status-badge { display: none; }
    .tw-live-workspace__body {
        position: relative;
        display: block;
    }
    .tw-live-workspace__stage-shell { width: 100%; height: 100%; }
    .tw-live-workspace__stage { padding: 10px; }
    .tw-live-media__grid { gap: var(--tw-space-2); }
    .tw-live-media__view-controls { top: var(--tw-space-2); }
    .tw-live-media[data-layout="speaker"]:not(.is-single) .tw-live-media__grid {
        grid-template-columns: repeat(var(--tw-live-side-count), minmax(96px, 1fr));
        grid-template-rows: minmax(0, 3fr) minmax(78px, 1fr);
        overflow-x: auto;
    }
    .tw-live-media[data-layout="speaker"]:not(.is-single) .tw-live-media__tile.is-featured {
        grid-column: 1 / -1;
        grid-row: 1;
    }
    .tw-live-media[data-layout="speaker"]:not(.is-single) .tw-live-media__tile:not(.is-featured) {
        grid-column: auto;
        grid-row: 2;
    }
    .tw-live-workspace__sidebar {
        position: absolute;
        z-index: 4;
        inset: 8px;
        width: auto;
        margin: 0;
    }
    .tw-live-workspace__sidebar-header { padding: 9px 10px; }
    .tw-live-workspace__panel-body { padding: 9px 10px; }
    .tw-live-transcript__footer { align-items: stretch; flex-direction: column; }
    .tw-live-transcript__footer .tw-action-button { width: 100%; justify-content: center; }
    .tw-live-workspace .tw-people-list__item { flex-direction: row; align-items: center; }
    .tw-live-workspace .tw-people-list__actions { width: auto; }
}

@media screen and (max-height: 620px) {
    .tw-live-workspace__meta { display: none; }
    .tw-live-workspace__sidebar-header { padding-block: 7px; }
    .tw-live-workspace__toolbar { padding-top: 6px; }
}

/* ============================================================
   화면 상태 — 비어 있음·오류·권한 없음
   ============================================================ */

.tw-screen-state {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 120px;
    padding: 24px 26px;
    border: 1px solid var(--tw-border);
    border-radius: var(--tw-radius-md);
    background: var(--tw-surface);
    color: var(--tw-text-secondary);
}

/*
 * 좁은 칸에 들어가는 빈 상태. `tw-screen-state` 는 최소 높이가 120px 이라
 * 옆 패널에 넣으면 자리를 다 잡아먹는다. 여기서는 작게, 그러나 무엇을
 * 해야 하는지까지 적는다.
 */
.tw-empty-note {
    display: grid;
    justify-items: center;
    gap: 7px;
    padding: 22px 16px;
    border: 1px dashed var(--tw-border);
    border-radius: var(--tw-radius-md);
    background: var(--tw-surface-muted);
    text-align: center;
}

.tw-empty-note__mark {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 50%;
    background: var(--tw-bg-hover);
    color: var(--tw-text-faint);
    font-size: 16px;
}

.tw-empty-note strong {
    color: var(--tw-text);
    font-size: 13px;
    font-weight: 600;
}

.tw-empty-note p {
    margin: 0;
    max-width: 30ch;
    color: var(--tw-text-muted);
    font-size: 12px;
    line-height: 1.55;
}

.tw-screen-state > i { color: var(--tw-text-faint); font-size: 28px; }
.tw-screen-state h2 { margin: 0 0 4px; color: var(--tw-text); font-size: 15px; font-weight: 600; }
.tw-screen-state p { margin: 0; font-size: 13px; }
.tw-screen-state.is-error > i { color: var(--tw-danger); }

/* ============================================================
   탭 — tw-screen-tabs
   ============================================================ */

/*
   가로로 넘칠 때만 옆으로 민다. 위아래로는 절대 밀리지 않는다.
   `overflow-x`만 적으면 `overflow-y`가 `visible`로 남지 못하고 `auto`가 되어,
   탭이 제 상자보다 1px만 높아도 오른쪽에 세로 스크롤 화살표가 선다.
   밀대 자체도 감춘다. 탭은 세 칸 남짓이라 밀대가 보이면 군더더기다.
*/
.tw-screen-tabs {
    display: flex;
    align-items: stretch;
    gap: 4px;
    min-width: 0;
    /*
       위아래를 같은 값으로 띄운다. 갈래 줄은 제 테두리와 바탕을 가진 띠라
       16px 을 위아래로 두면 제목과도, 아래 표면과도 너무 떨어져 보였다.
       특히 아래쪽은 표면 안 조회 줄의 제 여백이 더해져 더 벌어졌다.
       10px 로 좁히되 위아래는 계속 같게 둔다.
    */
    margin: 10px 0;
    padding: 4px;
    border: 1px solid var(--tw-border-soft);
    border-radius: var(--tw-radius-md);
    background: var(--tw-surface-muted);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.tw-screen-tabs::-webkit-scrollbar { display: none; }

/*
   탭 하나. 고른 탭만 하얗게 떠오르고 나머지는 바탕에 잠긴다.
   밑줄 하나로 표시하던 것보다 어느 화면에 있는지가 한눈에 들어온다.
*/
.tw-screen-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: max-content;
    min-height: 38px;
    padding: 0 18px;
    border: 0;
    border-radius: calc(var(--tw-radius-md) - 5px);
    background: transparent;
    color: var(--tw-text-secondary);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    /* 다른 화면으로 넘어가는 탭은 링크로 만든다. 링크라고 밑줄이 생기면 안 된다. */
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color 120ms ease,
        color 120ms ease,
        box-shadow 120ms ease;
}

.tw-screen-tab:hover {
    background: color-mix(in srgb, var(--tw-surface) 68%, transparent);
    color: var(--tw-text-strong);
}

.tw-screen-tab:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--tw-focus) 55%, transparent);
    outline-offset: -2px;
}

/*
   고른 탭은 한쪽 변에만 줄을 긋지 않는다. 한 변에만 색을 얹으면 칸이 한쪽으로
   기울어 보이고, 글자 크기나 여백이 바뀔 때마다 줄 자리가 어긋난다.
   대신 칸 전체를 강조색으로 채워 어디에 있는지 한눈에 보이게 한다.
*/
/* role=tab 으로 만든 갈래(공사현장 보기)는 aria-selected 가 고른 표시다. 같은 모양을 준다. */
.tw-screen-tab.is-active,
.tw-screen-tab.is-active:hover,
.tw-screen-tab[aria-selected="true"],
.tw-screen-tab[aria-selected="true"]:hover {
    background: var(--tw-accent);
    color: var(--tw-bg);
    font-weight: 700;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--tw-accent) 30%, transparent);
}
@media (max-width: 1100px) {
    .tw-purpose-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .tw-purpose-nav { grid-template-columns: 1fr; }
}

/* ============================================================
   달력 — tw-calendar
   ------------------------------------------------------------
   일정을 얹는 달력이다. 일정관리만 쓰는 것이 아니라 회의실 사용 현황,
   리조트 예약, 근태 현황처럼 날짜 칸에 무언가를 늘어놓는 화면이 함께 쓴다.

   여러 날에 걸치는 일은 칸마다 조각내지 않고 한 막대로 잇는다. 조각내면
   같은 일이 몇 건인지 셀 수 없고, 어디서 시작해 어디서 끝나는지 읽히지 않는다.
   ============================================================ */

.tw-calendar {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* 기간 제목과 앞뒤 이동. 조회 조건은 이 줄에 함께 놓는다. */
.tw-calendar__toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    min-height: 60px;
    padding: 0 15px;
    border-bottom: 1px solid var(--tw-border-soft);
    min-width: 0;
}

.tw-calendar__period {
    margin: 0;
    min-width: 118px;
    color: var(--tw-text-strong);
    font-size: 18px;
    font-weight: 750;
    letter-spacing: -.02em;
    /* 달이 바뀔 때 숫자 폭이 달라지면 제목이 흔들린다. */
    font-variant-numeric: tabular-nums;
}

.tw-calendar__nav {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 4px;
}

.tw-calendar__nav button {
    display: inline-grid;
    place-items: center;
    width: 33px;
    height: 33px;
    border: 1px solid var(--tw-border);
    border-radius: var(--tw-radius-sm);
    background: var(--tw-bg);
    color: var(--tw-text-muted);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.tw-calendar__nav button:hover {
    background: var(--tw-bg-hover);
    color: var(--tw-text);
}

/* --- 요일 머리글 --- */
.tw-calendar__weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border-bottom: 1px solid var(--tw-border-soft);
    background: var(--tw-header);
}

.tw-calendar__weekday {
    padding: 7px 10px;
    color: var(--tw-text-muted);
    font-size: 12px;
    font-weight: 650;
}

.tw-calendar__weekday.is-sunday { color: var(--tw-danger); }
.tw-calendar__weekday.is-saturday { color: var(--tw-info); }

/* --- 달 격자 --- */
.tw-calendar__grid {
    display: grid;
    grid-auto-rows: minmax(118px, auto);
}

.tw-calendar__week {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border-bottom: 1px solid var(--tw-border-soft);
}

.tw-calendar__week:last-child { border-bottom: 0; }

.tw-calendar__day {
    position: relative;
    min-width: 0;
    padding: 6px 7px 7px;
    border-right: 1px solid var(--tw-border-soft);
    background: var(--tw-bg);
}

.tw-calendar__day:last-child { border-right: 0; }
.tw-calendar__day.is-other-month { background: var(--tw-bg-soft); }
.tw-calendar__day.is-other-month .tw-calendar__day-number { opacity: .45; }

/*
   오늘 칸은 옅게 물들인다. 경고색을 쓰는 것이 아니라 그 색을 바탕에 섞어
   눈에 띄되 상태로 읽히지 않게 한다.
*/
.tw-calendar__day.is-today {
    background: color-mix(in srgb, var(--tw-warning-soft) 55%, var(--tw-bg));
}

/* 눌러서 등록할 수 있는 달력만 손 모양이 된다. 현황 달력은 누를 데가 없다. */
.tw-calendar__day.is-clickable { cursor: pointer; }
.tw-calendar__day.is-clickable:hover { background: var(--tw-surface-muted); }

.tw-calendar__day-number {
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 999px;
    color: var(--tw-text-secondary);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.tw-calendar__day.is-sunday .tw-calendar__day-number,
.tw-calendar__day.is-holiday .tw-calendar__day-number { color: var(--tw-danger); }
.tw-calendar__day.is-saturday .tw-calendar__day-number { color: var(--tw-info); }

.tw-calendar__day.is-today .tw-calendar__day-number {
    background: var(--tw-accent);
    color: var(--tw-bg);
    font-weight: 650;
}

/* 공휴일 이름. 날짜 옆에 작게 붙는다. */
.tw-calendar__day-label {
    margin-left: 5px;
    color: var(--tw-danger);
    font-size: 11px;
}

/* 날짜 옆 요약. 현황 달력이 본사·현장 인원 같은 것을 적는다. */
.tw-calendar__summary {
    margin-left: 6px;
    color: var(--tw-text-faint);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

/*
   칸 오른쪽 위 건수. data-heat 로 그달 안에서 몰리는 정도를 받는다.
   색만으로 뜻을 전하지 않도록 숫자를 늘 함께 적고, 가장 짙은 단에서도
   진한 글자가 읽히도록 농도를 제한한다.
*/
.tw-calendar__count {
    position: absolute;
    top: 7px;
    right: 7px;
    padding: 1px 7px;
    border-radius: 999px;
    color: var(--tw-text-strong);
    font-size: 11px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.tw-calendar__count[data-heat="1"] { background: var(--tw-heat-1); }
.tw-calendar__count[data-heat="2"] { background: var(--tw-heat-2); }
.tw-calendar__count[data-heat="3"] { background: var(--tw-heat-3); }
.tw-calendar__count[data-heat="4"] { background: var(--tw-heat-4); }
.tw-calendar__count[data-heat="5"] { background: var(--tw-heat-5); }

/*
   막대가 앉는 층. 칸 위에 겹쳐 두어 여러 날짜를 가로지를 수 있게 한다.
   층은 포인터를 받지 않으므로 막대 사이 빈 자리를 누르면 아래 칸이 받는다.
*/
.tw-calendar__lanes {
    position: absolute;
    inset: 34px 0 6px;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-auto-rows: 21px;
    row-gap: 2px;
    padding: 0 3px;
    pointer-events: none;
}

.tw-calendar__lanes > * { pointer-events: auto; }

.tw-calendar__chip {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    height: 19px;
    margin: 0 1px;
    padding: 0 7px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: var(--tw-accent-soft);
    color: var(--tw-accent);
    font: inherit;
    font-size: 11.5px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.tw-calendar__chip:hover { filter: brightness(.97); }
.tw-calendar__chip time { opacity: .78; font-variant-numeric: tabular-nums; }

/* 종일 일정은 채워서 시간이 없는 일이라는 것을 모양으로 알린다. */
.tw-calendar__chip.is-allday {
    background: var(--tw-accent);
    color: var(--tw-bg);
    font-weight: 600;
}

/*
   주가 바뀌어 잘린 막대. 잘린 쪽 모서리를 각지게 해서 이어진다는 것이 보인다.
   둥근 모서리를 그대로 두면 서로 다른 일이 나란히 놓인 것처럼 읽힌다.
*/
.tw-calendar__chip.is-continued {
    margin-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.tw-calendar__chip.is-continues {
    margin-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/*
   여기서 고칠 수 없는 항목. 연동해 온 일정, 다른 업무의 현황이 그렇다.
   색을 하나 더 만들지 않고 점선과 흐린 바탕으로 알린다. 색을 못 보는
   사람에게도 테두리 모양이 남는다.
*/
.tw-calendar__chip.is-readonly {
    border-style: dashed;
    border-color: var(--tw-border);
    background: var(--tw-surface-muted);
    color: var(--tw-text-muted);
    cursor: default;
}

.tw-calendar__chip.is-pending {
    border-style: dashed;
    border-color: currentColor;
    background: var(--tw-warning-soft);
    color: var(--tw-warning);
}

/* 막대 안 오른쪽 끝에 붙는 짧은 표시. 결재중 같은 것이다. */
.tw-calendar__chip .tw-calendar__tag {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 0 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tw-bg) 66%, transparent);
    font-size: 11px;
    font-weight: 650;
}

/*
   자리가 모자란 칸에서 그날 전체를 여는 단추. 남은 건수를 함께 적어
   무엇이 가려졌는지 숫자로 알린다.
*/
.tw-calendar__viewall {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 19px;
    margin: 0 1px;
    padding: 0 7px;
    border: 1px solid var(--tw-border);
    border-radius: 5px;
    background: var(--tw-bg);
    color: var(--tw-text-muted);
    font: inherit;
    font-size: 11px;
    font-weight: 650;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.tw-calendar__viewall:hover {
    border-color: var(--tw-accent);
    background: var(--tw-accent-soft);
    color: var(--tw-accent);
}

.tw-calendar__viewall .tw-calendar__rest { font-weight: 400; opacity: .85; }

/*
   달력 위 날짜별 건수 줄. 그달의 편차를 한 줄로 보여 준다. 어느 날에 몰리는지
   먼저 알고 그다음에 그 날을 연다.
*/
.tw-calendar__density {
    display: flex;
    align-items: flex-end;
    gap: 9px;
    padding: 11px 15px;
    border-bottom: 1px solid var(--tw-border-soft);
    background: var(--tw-surface-muted);
}

.tw-calendar__density h3 {
    margin: 0;
    color: var(--tw-text-faint);
    font-size: 11.5px;
    font-weight: 650;
    white-space: nowrap;
}

.tw-calendar__density-bars {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    align-items: end;
    gap: 2px;
    flex: 1 1 auto;
    height: 34px;
    min-width: 0;
}

/*
    막대 아래 날짜. 막대만 세워 두면 어느 날인지 알려면 마우스를 올려야 했다
    (2026-09-24 지적). 좁아지면 글자부터 줄이고, 더 좁으면 이레에 하나만 남긴다.
*/
.tw-calendar__density-slot {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: end;
    gap: 3px;
    min-width: 0;
}

.tw-calendar__density-day {
    color: var(--tw-text-faint);
    font-size: var(--tw-font-size-min);
    line-height: 1;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.tw-calendar__density-day.is-sunday { color: var(--tw-danger); }
.tw-calendar__density-day.is-saturday { color: var(--tw-accent); }

@media (max-width: 900px) {
    .tw-calendar__density-slot:not(:nth-child(7n + 1)) .tw-calendar__density-day {
        visibility: hidden;
    }
}

.tw-calendar__density-bar {
    display: block;
    width: 100%;
    min-height: 2px;
    padding: 0;
    border: 0;
    border-radius: 2px 2px 0 0;
    background: var(--tw-heat-4);
    cursor: pointer;
}

.tw-calendar__density-bar:hover,
.tw-calendar__density-bar.is-peak { background: var(--tw-accent); }
.tw-calendar__density-bar.is-empty { background: var(--tw-border); }

/* --- 주·일 보기의 시간표 --- */
.tw-calendar--time {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
}

.tw-calendar__allday {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    border-bottom: 1px solid var(--tw-border);
    background: var(--tw-surface-muted);
}

.tw-calendar__allday-label {
    padding: 8px 10px;
    border-right: 1px solid var(--tw-border-soft);
    color: var(--tw-text-faint);
    font-size: 11px;
}

.tw-calendar__allday-lanes {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-auto-rows: 21px;
    row-gap: 2px;
    padding: 6px 3px;
}

.tw-calendar__hours { border-right: 1px solid var(--tw-border-soft); }

.tw-calendar__hour {
    position: relative;
    height: 46px;
    padding-right: 8px;
    color: var(--tw-text-faint);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* 시각은 칸 가운데가 아니라 칸이 시작하는 줄에 맞춘다. */
.tw-calendar__hour span { position: relative; top: -8px; }

.tw-calendar__days {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.tw-calendar__daycol {
    position: relative;
    border-right: 1px solid var(--tw-border-soft);
    /* 한 시간마다 줄을 긋는다. 요소를 시간마다 만들지 않는다. */
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0 45px,
        var(--tw-border-soft) 45px 46px);
}

.tw-calendar__daycol:last-child { border-right: 0; }
.tw-calendar__daycol.is-weekend { background-color: var(--tw-bg-soft); }

.tw-calendar__event {
    position: absolute;
    left: 2px;
    right: 2px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 4px 7px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: var(--tw-accent-soft);
    color: var(--tw-accent);
    font: inherit;
    font-size: 11.5px;
    text-align: left;
    overflow: hidden;
    cursor: pointer;
}

.tw-calendar__event strong { font-weight: 650; }
.tw-calendar__event time { opacity: .8; font-variant-numeric: tabular-nums; }

.tw-calendar__event.is-readonly {
    border-style: dashed;
    border-color: var(--tw-border);
    background: var(--tw-surface-muted);
    color: var(--tw-text-muted);
    cursor: default;
}

/* 지금 시각. 하루 어디쯤인지 알려 주는 유일한 표시라 눈에 띄어야 한다. */
.tw-calendar__now {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 3;
    height: 0;
    border-top: 2px solid var(--tw-danger);
}

.tw-calendar__now::before {
    content: "";
    position: absolute;
    left: -4px;
    top: -5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tw-danger);
}

/* 캘린더별 색. 화면이 색을 정하지 않고 공통 범주색에서 고른다. */
.tw-calendar__chip.is-accent,
.tw-calendar__event.is-accent { background: var(--tw-accent-soft); color: var(--tw-accent); }
.tw-calendar__chip.is-accent.is-allday { background: var(--tw-accent); color: var(--tw-bg); }

.tw-calendar__chip.is-teal,
.tw-calendar__event.is-teal { background: var(--tw-category-teal-soft); color: var(--tw-category-teal); }
.tw-calendar__chip.is-teal.is-allday { background: var(--tw-category-teal); color: var(--tw-bg); }

.tw-calendar__chip.is-violet,
.tw-calendar__event.is-violet { background: var(--tw-category-violet-soft); color: var(--tw-category-violet); }
.tw-calendar__chip.is-violet.is-allday { background: var(--tw-category-violet); color: var(--tw-bg); }

.tw-calendar__chip.is-magenta,
.tw-calendar__event.is-magenta { background: var(--tw-category-magenta-soft); color: var(--tw-category-magenta); }
.tw-calendar__chip.is-magenta.is-allday { background: var(--tw-category-magenta); color: var(--tw-bg); }

/* ============================================================
   기간 표 — tw-timeline
   ------------------------------------------------------------
   줄마다 대상이 있고 가로가 날짜인 표다. 달력 칸 하나에 사람이 수백 명
   들어가는 현황에서 달력이 못 하는 일을 맡는다. 회의실·장비처럼 자원이
   줄이 되는 화면도 같은 모양이 필요하다.

   세로 스크롤은 이 표 하나가 갖는다. 머리글은 붙어 따라온다.
   ============================================================ */

.tw-timeline { display: flex; flex-direction: column; min-width: 0; }

.tw-timeline__scroll {
    max-height: 452px;
    overflow: auto;
    overscroll-behavior: auto;
}

.tw-timeline__head {
    position: sticky;
    top: 0;
    z-index: 3;
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    border-bottom: 1px solid var(--tw-border);
    background: var(--tw-header);
}

.tw-timeline__head-label {
    padding: 8px 12px;
    border-right: 1px solid var(--tw-border-soft);
    color: var(--tw-text-muted);
    font-size: 11.5px;
    font-weight: 650;
}

.tw-timeline__axis { display: grid; }

.tw-timeline__tick {
    display: grid;
    place-items: center;
    padding: 4px 0;
    border-left: 1px solid var(--tw-border-soft);
    color: var(--tw-text-muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.tw-timeline__tick small {
    display: block;
    color: var(--tw-text-faint);
    font-size: 11px;
}

.tw-timeline__tick.is-weekend { background: var(--tw-bg-soft); }
.tw-timeline__tick.is-holiday { background: var(--tw-danger-soft); color: var(--tw-danger); }

.tw-timeline__tick.is-today {
    background: var(--tw-accent);
    color: var(--tw-bg);
    font-weight: 650;
}

.tw-timeline__tick.is-today small { color: color-mix(in srgb, var(--tw-bg) 82%, transparent); }

/* 부서처럼 줄을 묶는 머리. 접고 펼 수 있다. */
.tw-timeline__group {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    border-bottom: 1px solid var(--tw-border-soft);
    background: var(--tw-surface-muted);
}

.tw-timeline__group-label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 0;
    border-right: 1px solid var(--tw-border-soft);
    background: transparent;
    color: var(--tw-text-strong);
    font: inherit;
    font-size: 12px;
    font-weight: 650;
    text-align: left;
    cursor: pointer;
}

.tw-timeline__group-label .tw-timeline__count {
    margin-left: auto;
    color: var(--tw-text-faint);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

.tw-timeline__group-fill { background: var(--tw-surface-muted); }

.tw-timeline__row {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    border-bottom: 1px solid var(--tw-border-soft);
}

/* 묶음을 접으면 줄이 사라져야 한다. display 를 못 박아 두면 hidden 이 먹지 않는다. */
.tw-timeline__row[hidden] { display: none; }

.tw-timeline__row:hover .tw-timeline__row-label { background: var(--tw-bg-hover); }

.tw-timeline__row-label {
    display: flex;
    align-items: center;
    gap: 6px;
    /* 묶음보다 한 단 들여써서 어디에 딸린 줄인지 보이게 한다. */
    padding: 5px 12px 5px 22px;
    border-right: 1px solid var(--tw-border-soft);
    background: var(--tw-bg);
    color: var(--tw-text-secondary);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tw-timeline__row-label small { color: var(--tw-text-faint); font-size: 11px; }

/*
   막대가 놓이는 자리. 날짜 칸과 막대를 같은 격자에 얹어 칸 수만 맞추면
   막대가 저절로 제 날짜에 앉는다.
*/
.tw-timeline__track {
    position: relative;
    display: grid;
    min-height: 30px;
}

.tw-timeline__cell {
    grid-row: 1;
    border-left: 1px solid var(--tw-border-soft);
}

.tw-timeline__cell.is-weekend { background: var(--tw-bg-soft); }
.tw-timeline__cell.is-holiday { background: var(--tw-danger-soft); }

.tw-timeline__bar {
    grid-row: 1;
    align-self: center;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 5px;
    height: 20px;
    margin: 0 2px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: var(--tw-category-teal-soft);
    color: var(--tw-category-teal);
    font: inherit;
    font-size: 11.5px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.tw-timeline__bar.is-violet { background: var(--tw-category-violet-soft); color: var(--tw-category-violet); }
.tw-timeline__bar.is-accent { background: var(--tw-accent-soft); color: var(--tw-accent); }

.tw-timeline__bar.is-pending {
    border-style: dashed;
    border-color: currentColor;
    background: var(--tw-warning-soft);
    color: var(--tw-warning);
}

/* ============================================================
   집계 표 — tw-heatgrid
   ------------------------------------------------------------
   줄이 조직·자원이고 칸이 날짜인 표다. 칸의 숫자가 값을 말하고 배경 농도는
   거들기만 한다. 색을 못 봐도 값을 읽을 수 있고, 이 자체가 표라서 화면
   낭독기로도 읽힌다.
   ============================================================ */

.tw-heatgrid { display: flex; flex-direction: column; min-width: 0; }

.tw-heatgrid__scroll {
    max-height: 452px;
    overflow: auto;
    overscroll-behavior: auto;
}

.tw-heatgrid__head {
    position: sticky;
    top: 0;
    z-index: 3;
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    border-bottom: 1px solid var(--tw-border);
    background: var(--tw-header);
}

.tw-heatgrid__head-label {
    padding: 8px 12px;
    border-right: 1px solid var(--tw-border-soft);
    color: var(--tw-text-muted);
    font-size: 11.5px;
    font-weight: 650;
}

.tw-heatgrid__axis { display: grid; }

.tw-heatgrid__tick {
    display: grid;
    place-items: center;
    padding: 4px 0;
    border-left: 1px solid var(--tw-border-soft);
    color: var(--tw-text-muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.tw-heatgrid__tick small { display: block; color: var(--tw-text-faint); font-size: 11px; }
.tw-heatgrid__tick.is-weekend { background: var(--tw-bg-soft); }

.tw-heatgrid__tick.is-today {
    background: var(--tw-accent);
    color: var(--tw-bg);
    font-weight: 650;
}

.tw-heatgrid__tick.is-today small { color: color-mix(in srgb, var(--tw-bg) 82%, transparent); }

.tw-heatgrid__row {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    border-bottom: 1px solid var(--tw-border-soft);
}

.tw-heatgrid__row:hover .tw-heatgrid__row-label { background: var(--tw-bg-hover); }

.tw-heatgrid__row-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-right: 1px solid var(--tw-border-soft);
    background: var(--tw-bg);
    color: var(--tw-text-secondary);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tw-heatgrid__row-label b {
    margin-left: auto;
    color: var(--tw-text-strong);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.tw-heatgrid__cells { display: grid; }

.tw-heatgrid__cell {
    display: grid;
    place-items: center;
    min-height: 30px;
    border: 0;
    border-left: 1px solid var(--tw-border-soft);
    background: transparent;
    color: var(--tw-text-strong);
    font: inherit;
    font-size: 11.5px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.tw-heatgrid__cell[data-heat="0"] { color: var(--tw-text-placeholder); font-weight: 400; }
.tw-heatgrid__cell[data-heat="1"] { background: var(--tw-heat-1); }
.tw-heatgrid__cell[data-heat="2"] { background: var(--tw-heat-2); }
.tw-heatgrid__cell[data-heat="3"] { background: var(--tw-heat-3); }
.tw-heatgrid__cell[data-heat="4"] { background: var(--tw-heat-4); }
.tw-heatgrid__cell[data-heat="5"] { background: var(--tw-heat-5); }

/* 값을 셀 수 없는 날. 쉬는 날이라 빈 것과 값이 0 인 것을 갈라 보여 준다. */
.tw-heatgrid__cell.is-off {
    background: var(--tw-bg-soft);
    color: var(--tw-text-placeholder);
    font-weight: 400;
}

.tw-heatgrid__cell:hover {
    outline: 2px solid var(--tw-accent);
    outline-offset: -2px;
}

.tw-heatgrid__legend {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px;
    border-top: 1px solid var(--tw-border-soft);
    background: var(--tw-surface-muted);
    color: var(--tw-text-faint);
    font-size: 11.5px;
}

.tw-heatgrid__legend i {
    display: inline-block;
    width: 22px;
    height: 12px;
    border: 1px solid var(--tw-border-soft);
    border-radius: 3px;
}

/* ============================================================
   붙어 뜨는 상자 — tw-popover
   ------------------------------------------------------------
   글자만 띄우는 tw-tooltip 과 가운데 크게 뜨는 tw-dialog 사이가 비어 있었다.
   누른 자리 옆에 붙어 떠서 몇 줄 보여 주고 단추 두어 개를 내주는 자리다.

   자리는 화면이 잡는다. 화면 밖으로 나가지 않게 뒤집는 계산은 붙이는 쪽이
   하고, 여기서는 생김새만 정한다.
   ============================================================ */

.tw-popover {
    position: absolute;
    z-index: 40;
    width: 308px;
    max-width: calc(100vw - 24px);
    border: 1px solid var(--tw-border);
    border-radius: var(--tw-radius-md);
    background: var(--tw-bg);
    box-shadow: var(--tw-shadow-lg);
    overflow: hidden;
}

.tw-popover__header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 13px 14px 10px;
}

.tw-popover__header h3 {
    flex: 1 1 auto;
    margin: 0;
    min-width: 0;
    color: var(--tw-text-strong);
    font-size: 14.5px;
    font-weight: 650;
    line-height: 1.35;
}

.tw-popover__close {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--tw-text-faint);
    font: inherit;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.tw-popover__close:hover { background: var(--tw-bg-hover); color: var(--tw-text); }

.tw-popover__body { padding: 0 14px 12px; }

/*
   전체보기로 펼치는 그 날의 일정 목록. 모양을 정해 두지 않아 글머리 기호가
   붙은 맨 목록으로 나왔다(2026-09-28 지적).
*/
.tw-calendar__daylist { display: grid; margin: 0; padding: 0; gap: 2px; list-style: none; }

.tw-calendar__daylist-item {
    display: grid;
    width: 100%;
    box-sizing: border-box;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 10px;
    border: 0;
    border-radius: var(--tw-radius-sm);
    padding: 7px 9px;
    background: transparent;
    color: var(--tw-text);
    font: inherit;
    font-size: 12px;
    text-align: left;
    cursor: pointer;
}

.tw-calendar__daylist-item:hover { background: var(--tw-bg-hover); }
.tw-calendar__daylist-item:focus-visible { outline: 2px solid var(--tw-accent); outline-offset: -2px; }
.tw-calendar__daylist-item > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-calendar__daylist-when { color: var(--tw-text-muted); font-size: 11px; white-space: nowrap; }

.tw-popover__footer {
    display: flex;
    gap: 6px;
    padding: 10px 14px;
    border-top: 1px solid var(--tw-border-soft);
    background: var(--tw-surface-muted);
}

@media (max-width: 1024px) {
    /* 좁은 화면에서는 시간표 왼쪽 시각 칸을 줄여 하루 폭을 지킨다. */
    .tw-calendar--time,
    .tw-calendar__allday { grid-template-columns: 44px minmax(0, 1fr); }
    .tw-timeline__head,
    .tw-timeline__group,
    .tw-timeline__row,
    .tw-heatgrid__head,
    .tw-heatgrid__row { grid-template-columns: 120px minmax(0, 1fr); }
}

/*
    사람 사진은 정사각형이다. 세로로 긴 증명사진을 너비만 잡고 두면 세로로
    늘어난 둥근 사진이 된다. 어디서 쓰든 가운데를 정사각으로 잘라 채운다.
*/
img[src*="/UserImage"],
img[src*="/img/user/"] { aspect-ratio: 1 / 1; object-fit: cover; }