/*
 * 실제 JSP 연결 보정층
 *
 * 화면의 기준은 /html/assets/preview.css 이다. 이 파일은 정적 시안에 없는
 * 서버 데이터/권한/업무 컴포넌트만 보완하며, 별도의 레이아웃을 만들지 않는다.
 */

body[data-kms-live="true"] {
    --kms-ui-bg: var(--bg);
    --kms-ui-panel: var(--card);
    --kms-ui-line: var(--border);
    --kms-ui-text: var(--text);
    --kms-ui-muted: var(--text-muted);
    --kms-ui-primary: var(--primary);
    --kms-ui-primary-soft: var(--primary-soft);
    --kms-ui-success: var(--ok);
    --kms-ui-warning: var(--warn);
    --kms-ui-danger: var(--danger);
    position: relative;
    isolation: isolate;
    height: auto;
    min-height: 100vh;
    margin: 0;
}

body[data-kms-live="true"] .kms-header {
    position: sticky;
    top: 0;
    z-index: 50;
    width: 100%;
    height: var(--header-h);
    min-height: var(--header-h);
    padding: 0 16px;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: #fff;
    color: var(--text);
    box-shadow: none;
}

body[data-kms-live="true"] .kms-menu-toggle {
    display: inline-flex;
    width: 38px;
    height: 38px;
    margin: 0;
    padding: 0 9px;
}

body[data-kms-live="true"] .kms-menu-toggle span { width: 100%; background: #3d4757; }
body[data-kms-live="true"] .kms-logo { color: var(--text); font-size: 16px; letter-spacing: 0; }

body[data-kms-live="true"] .kms-main {
    display: flex;
    flex: 0 0 auto;
    min-height: calc(100vh - var(--header-h));
    align-items: stretch;
}

body[data-kms-live="true"] .kms-sidebar {
    position: static;
    z-index: auto;
    width: var(--sidebar-w);
    height: auto;
    min-height: calc(100vh - var(--header-h));
    flex: 0 0 var(--sidebar-w);
    padding: 14px 0 0;
    overflow: visible;
    background: var(--sidebar-bg);
}

/* 데스크톱 메뉴는 별도 스크롤 상자가 아니라 문서 흐름으로 높이가 결정된다.
 * 짧은 화면은 sidebar의 min-height가 보장하고, 본문이나 메뉴가 길어지면
 * .kms-main의 stretch 레이아웃에 따라 실제 sidebar도 함께 늘어난다. */
@media (min-width: 769px) {
    body[data-kms-live="true"] .kms-sidebar {
        align-self: stretch;
    }
    body[data-kms-live="true"] .kms-content {
        min-height: calc(100vh - var(--header-h));
        align-self: flex-start;
    }
    body[data-kms-live="true"] .kms-menu {
        min-height: 0;
        flex: 0 0 auto;
        overflow: visible;
    }

    /* .kms-main 밖에 놓인 푸터가 있는 화면도 좌측 색이 끊기지 않도록
     * 고정 레이어 대신 문서 전체 높이를 따르는 배경 레이어를 사용한다. */
    body[data-kms-live="true"]:not(.kms-login):not(.kms-sidebar-collapsed)::before {
        content: "";
        position: absolute;
        top: var(--header-h);
        left: 0;
        bottom: 0;
        width: var(--sidebar-w);
        background: var(--sidebar-bg);
        z-index: -1;
        pointer-events: none;
    }
}

body[data-kms-live="true"] .kms-content {
    width: auto;
    max-width: none;
    min-width: 0;
    flex: 1 1 auto;
    margin: 0;
    padding: 20px;
    /* 가로 잘림만 적용한다. hidden은 세로 overflow를 auto로 계산해 문서와 이중 스크롤을 만든다. */
    overflow-x: clip;
    overflow-y: visible;
    background: transparent;
}

body[data-kms-live="true"]:not(.kms-login) .kms-content {
    /* 푸터가 정상 흐름(아래 규칙 position:static)으로 내용 아래에 오므로 과한 하단 여백은 불필요.
       우하단 플로팅 뱃지 회피 여백은 푸터의 margin-top 이 담당한다. */
    padding-bottom: 24px;
}

body[data-kms-live="true"]:not(.kms-login) .kms-footer {
    /* fixed → static: 푸터가 내용 위를 덮지 않고 내용 아래(정상 흐름)에 온다. */
    position: static;
    /* 위 내용과의 간격 + 우하단 플로팅 뱃지(메신저·나의할일, 하단 80px)를
       마지막 내용이 넘어서도록 확보하는 여백. */
    margin: 40px 0 0;
    min-height: 40px;
    padding: 11px 20px 12px;
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--border, #dfe4ec) 78%, transparent);
    background: color-mix(in srgb, var(--kms-content-bg, var(--bg, #f3f5f9)) 96%, #fff);
    color: var(--text-muted, #7b8492);
    text-align: center;
}

body[data-kms-live="true"].kms-sidebar-collapsed:not(.kms-login) .kms-footer {
    left: 0;
}

body[data-kms-live="true"] .kms-sidebar-profile-actions form { margin: 0; }
body[data-kms-live="true"] .kms-user-avatar { overflow: hidden; }
body[data-kms-live="true"] .kms-user-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* DB에 저장된 프로젝트 색상은 시안 변수에만 연결한다. */
body[data-kms-live="true"].kms-project-page {
    --bg: var(--kms-page-bg, #f3f5f9);
    --card: var(--kms-card-bg, #fff);
    --primary: var(--kms-primary, #2563eb);
    --primary-soft: color-mix(in srgb, var(--primary) 9%, #fff);
    --sidebar-bg: var(--kms-menu-bg, #1c2434);
    --sidebar-text: var(--kms-menu-text, #aeb7c6);
    /* 사이드바 파생 팔레트: 메뉴 글자/배경색에서 자동 계산한다.
       밝은 레이아웃이면 진한 계열, 어두운 레이아웃이면 밝은 계열이 자동으로 나온다. */
    --sidebar-strong: var(--kms-menu-text, #fff);
    --sidebar-heading: var(--kms-menu-text, #d4dae4);
    --sidebar-muted: color-mix(in srgb, var(--kms-menu-text, #aeb7c6) 62%, var(--kms-menu-bg, #1c2434));
    --sidebar-line: color-mix(in srgb, var(--kms-menu-text, #aeb7c6) 18%, transparent);
    --sidebar-soft: color-mix(in srgb, var(--kms-menu-text, #aeb7c6) 8%, transparent);
    --sidebar-chip: color-mix(in srgb, var(--kms-menu-text, #aeb7c6) 16%, transparent);
    /* 호버 테두리: 메뉴 배경보다 확실히 진한(글자색 45% 혼합) 톤 */
    --sidebar-hover-line: color-mix(in srgb, var(--kms-menu-text, #aeb7c6) 45%, var(--kms-menu-bg, #1c2434));
    background-color: var(--bg);
    background-image: var(--kms-bg-image, none);
    background-size: var(--kms-bg-size, cover);
    background-position: center top;
    background-repeat: var(--kms-bg-repeat, no-repeat);
    background-attachment: fixed;
}

body[data-kms-live="true"].kms-project-page .kms-header {
    border-bottom-color: color-mix(in srgb, var(--kms-top-text, #1e2532) 14%, transparent);
    background: var(--kms-top-bg, #fff);
    color: var(--kms-top-text, var(--text));
}

body[data-kms-live="true"].kms-project-page .kms-logo { color: var(--kms-top-text, var(--text)); }
body[data-kms-live="true"].kms-project-page .kms-menu-toggle span { background: var(--kms-top-text, var(--text)); }
/* 헤더 햄버거 호버도 배경 대신 상단 글자색 파생 테두리로 표시한다. */
body[data-kms-live="true"].kms-project-page .kms-menu-toggle:hover {
    background: transparent;
    border-color: color-mix(in srgb, var(--kms-top-text, #1e2532) 45%, var(--kms-top-bg, #fff));
}
body[data-kms-live="true"].kms-project-page .kms-project-select {
    border-color: color-mix(in srgb, var(--kms-top-text, #1e2532) 20%, var(--border));
    background: color-mix(in srgb, var(--kms-top-bg, #fff) 94%, #fff);
    color: var(--kms-top-text, var(--text));
}
/* 메신저의 프로젝트 선택 영역도 현재 프로젝트의 상단 레이아웃을 따른다. */
body[data-kms-live="true"].kms-project-page .kms-messenger-head,
body[data-kms-live="true"].kms-project-page .kms-chat-head {
    background: var(--kms-top-bg, #172b4d);
    color: var(--kms-top-text, #fff);
}
body[data-kms-live="true"].kms-project-page .kms-messenger-project {
    border-color: color-mix(in srgb, var(--kms-top-text, #fff) 28%, transparent);
    background: color-mix(in srgb, var(--kms-top-bg, #172b4d) 88%, var(--kms-top-text, #fff));
    color: var(--kms-top-text, #fff);
}
body[data-kms-live="true"].kms-project-page .kms-messenger-project option {
    background: var(--kms-top-bg, #172b4d);
    color: var(--kms-top-text, #fff);
}
.kms-messenger-project:disabled {
    cursor: not-allowed;
    opacity: 1;
}
body[data-kms-live="true"].kms-project-page :is(.kms-messenger-close, .kms-chat-back, .kms-chat-members-toggle) {
    background: color-mix(in srgb, var(--kms-top-text, #fff) 14%, transparent);
    color: var(--kms-top-text, #fff);
}
body[data-kms-live="true"].kms-project-page .kms-content {
    background: color-mix(in srgb, var(--kms-content-bg, var(--bg)) 92%, transparent);
}
body[data-kms-live="true"].kms-project-page .kms-menu-items a.active,
body[data-kms-live="true"].kms-project-page a.kms-menu-single.active {
    background: var(--kms-menu-active-bg, var(--primary));
    color: var(--kms-menu-active-text, #fff);
}

/* layout.js가 만드는 실제 프로젝트 메뉴도 menu.js 시안 구조와 같은 간격을 쓴다. */
.kms-project-menu-tree .kms-project-menu-directory { width: 100%; }
.kms-project-menu-tree .kms-project-menu-directory > summary { list-style: none; }
.kms-project-menu-tree .kms-project-menu-directory > summary::-webkit-details-marker { display: none; }
.kms-project-menu-tree .kms-project-menu-link { display: flex; align-items: center; text-decoration: none; }
.kms-project-menu-tree .kms-project-menu-link.depth-1 { padding-left: 22px; }
.kms-project-menu-tree .kms-project-menu-link.depth-2 { padding-left: 38px; }
.kms-project-menu-loading,
.kms-project-menu-empty { padding: 10px; color: var(--sidebar-text); font-size: 12px; }

/* 서버 화면의 폼/상태 메시지 */
.kms-form-error,
.kms-form-info { margin: 0 0 14px; padding: 11px 12px; border-radius: 8px; font-size: 13px; line-height: 1.5; }
.kms-form-error { border: 1px solid #fecaca; background: #fff1f2; color: #b91c1c; }
.kms-form-info { border: 1px solid #bfdbfe; background: #eff6ff; color: #1e4f8f; }
.kms-form-info.kms-success { border-color: #bbf7d0; background: #f0fdf4; color: #15803d !important; }
.kms-help { display: block; margin-top: 5px; color: var(--text-muted); font-size: 11px; line-height: 1.5; }
.kms-file-size-control { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; min-width: 0; }
.kms-file-size-control > input { width: min(190px, 100%); flex: 0 1 190px; }
.kms-file-size-converted { min-width: 150px; padding: 7px 10px; border-radius: 7px; background: var(--primary-soft); color: var(--text-sub); font-size: 12px; white-space: nowrap; }
.kms-file-policy-na { display: flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--text-sub); font-size: 12px; }
.kms-file-policy-na small { color: var(--text-muted); font-size: 11px; }
.kms-optional { color: var(--text-muted); font-size: 11px; font-weight: 400; }
.kms-required { color: var(--danger); }
.kms-empty:not(td):not(th) { display: flex; min-height: 110px; align-items: center; justify-content: center; color: var(--text-muted); text-align: center; }

.kms-content :where(input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], input[type="search"], input[type="url"], select, textarea) {
    min-width: 0;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    font: inherit;
}
.kms-content :where(input, select, textarea):focus {
    outline: 2px solid #bcd0fb;
    border-color: var(--primary);
    box-shadow: none;
}
.kms-content textarea { min-height: 90px; resize: vertical; }
.kms-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.kms-card-gap { margin-top: 14px; }
.kms-btn-danger,
.kms-modal-delete { border-color: #fecaca; background: #fff; color: var(--danger); }
.kms-btn-danger:hover,
.kms-modal-delete:hover { background: #fff7f7; }
.kms-modal-delete { margin-right: auto; }
.kms-page-more { display: flex; min-width: 180px; margin: 14px auto 0; }
.kms-page-more:disabled { cursor: default; opacity: .72; }
/* 그리드 하단: 시안처럼 "더 보기 (n / m건 · p / q페이지)" 버튼을 가운데 정렬 */
.kms-grid-foot { flex-wrap: wrap; gap: 8px; }
.kms-grid-foot .kms-page-more { margin: 0; }
/* 오류이력·동의이력 등 kms-grid-more 를 쓰는 화면도 동일하게 가운데 정렬한다. */
.kms-grid-more { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 12px; border-top: 1px solid var(--border); }
.kms-grid-more > .kms-btn { min-width: 180px; }
.kms-section-gap { margin-top: 14px; }
.kms-calendar-day.muted { background: #fafbfc; }
.kms-password-policy-card,
.kms-my-info-card,
.kms-customer-summary { padding: 20px; }

/* 프로젝트 오류·접근·로그인이력은 날짜 필드를 포함한 검색 조건을 같은 축에 맞춘다. */
.kms-history-searchbar {
    display: grid;
    grid-template-columns:
        minmax(180px, .85fr)
        minmax(220px, 1fr)
        minmax(220px, 1fr)
        minmax(190px, .85fr)
        max-content;
    align-items: center;
}
.kms-history-searchbar > label {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
}
.kms-history-searchbar > label > span {
    display: block;
    white-space: nowrap;
}
.kms-history-searchbar > label > :is(input, select, .kms-date-field),
.kms-history-searchbar .kms-date-field > input {
    width: 100%;
    min-width: 0;
}
.kms-history-searchbar .kms-searchbar-actions {
    align-self: stretch;
    align-items: center;
    white-space: nowrap;
}

/* canonical modal 안의 실제 업무 필드 */
.kms-modal-layer > .kms-modal { width: min(680px, 100%); }
.kms-modal-layer > .kms-modal.kms-modal-wide { width: min(960px, 100%); }
.kms-help-modal > .kms-modal { width: min(1040px, 100%); height: min(860px, calc(100dvh - 48px)); }
.kms-help-modal .kms-modal-body { padding: 20px; background: #f4f7fb; }
.kms-modal-body :where(input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], input[type="search"], input[type="url"], select, textarea) {
    width: 100%;
    min-height: 36px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    font: inherit;
}
/* 폼 마크업은 시안 공통(.kms-form-row) 하나만 사용한다. (구 .kms-form-grid 폐기) */

/* 동의 정책 관리: 검색·목록·등록 폼이 좁은 화면에서도 가용 너비를 모두 사용한다. */
.kms-consent-policy-page { width: 100%; min-width: 0; }
.kms-consent-policy-search > .system-log-search { width: 100%; min-width: 0; }
/* 목록은 다른 관리화면과 동일하게 좌측정렬(kms-table 기본)을 따른다. */
.kms-consent-policy-modal > .kms-modal { min-width: 0; }
.kms-consent-policy-modal > .kms-modal > form,
.kms-consent-policy-modal .kms-modal-head,
.kms-consent-policy-modal .kms-modal-body,
.kms-consent-policy-modal .kms-modal-foot { width: 100%; min-width: 0; }
.kms-consent-policy-options { justify-content: flex-start; }
.kms-consent-policy-options > label { display: inline-flex; align-items: center; gap: 6px; }
.kms-consent-policy-options input[type="checkbox"] { flex: 0 0 auto; }
.kms-consent-policy-period > input { min-width: 0; }
.kms-consent-item-editor { margin-top: 8px; }
.kms-consent-item-editor-head,
.kms-consent-edit-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.kms-consent-item-editor-head > div { min-width: 0; }
.kms-consent-item-editor-head small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    line-height: 1.45;
}
.kms-consent-item-editor-list {
    display: grid;
    gap: 12px;
    margin-top: 12px;
}
.kms-consent-edit-item {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-soft, #f8fafc);
}
.kms-consent-edit-item-head { margin-bottom: 12px; }
.kms-consent-edit-item textarea { min-height: 180px; }

/* 프로젝트관리자 동의 화면은 현재 원문을 읽기 전용으로 제공한다. */
.kms-project-consent-readonly { margin-bottom: 14px; padding: 0; overflow: hidden; }
.kms-project-consent-readonly .kms-grid-head > div { min-width: 0; }
.kms-project-consent-readonly .kms-grid-head strong,
.kms-project-consent-readonly .kms-grid-head small { display: block; }
.kms-project-consent-readonly .kms-grid-head small { margin-top: 4px; color: var(--text-muted); font-weight: 400; }
.kms-project-consent-list { display: grid; gap: 10px; padding: 14px; }
.kms-project-consent-item { min-width: 0; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.kms-project-consent-item > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 14px;
    cursor: pointer;
    list-style: none;
}
.kms-project-consent-item > summary::-webkit-details-marker { display: none; }
.kms-project-consent-item > summary > span:first-child { min-width: 0; }
.kms-project-consent-item > summary strong,
.kms-project-consent-item > summary small { display: block; overflow-wrap: anywhere; }
.kms-project-consent-item > summary small { margin-top: 4px; color: var(--text-muted); font-size: 11px; }
.kms-project-consent-content {
    padding: 14px;
    border-top: 1px solid var(--border);
    background: #f8fafc;
    line-height: 1.75;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

/* 게시판은 팝업이 아닌 목록/등록/상세/수정 페이지 흐름이다. */
.kms-board-form { max-width: 960px; padding: 20px; }
.kms-board-form > label { display: block; margin: 14px 0 6px; color: var(--text-sub); font-size: 13px; font-weight: 700; }
.kms-board-form > input[type="text"] { width: 100%; }
.kms-editor { overflow: hidden; border: 1px solid var(--border); border-radius: 9px; }
.kms-editor-toolbar { display: flex; gap: 5px; padding: 8px; border-bottom: 1px solid var(--border); background: #f8fafc; }
.kms-editor-toolbar button { min-width: 32px; height: 30px; border: 1px solid var(--border); border-radius: 6px; background: #fff; cursor: pointer; }
.kms-editor textarea { display: block; width: 100%; min-height: 300px; padding: 14px; border: 0; border-radius: 0; }
.kms-file-policy-info { display: flex; align-items: center; justify-content: center; min-height: 48px; margin: 0; padding: 8px 12px; border-radius: 8px; background: var(--primary-soft); color: var(--text-sub); font-size: 12px; line-height: 1.45; text-align: center; }
.kms-board-content { min-height: 220px; padding: 20px; overflow-wrap: anywhere; line-height: 1.8; }
.kms-attachment-list { margin: 0 20px 18px; padding: 14px; border: 1px solid var(--border); border-radius: 8px; }
.kms-attachment-list a { display: block; margin: 5px 0; color: var(--primary); }
.kms-answer-list { display: grid; gap: 10px; margin: 16px 20px; }
.kms-answer-list article { padding: 14px; border-left: 3px solid var(--primary); border-radius: 8px; background: var(--primary-soft); }

/* 프로젝트 홈/내 정보: 시안 폼(라벨 좌측 열)과 같은 리듬으로 정렬한다. */
.kms-project-card { padding: 20px; }
.kms-project-description { color: var(--text-sub); line-height: 1.7; }
.kms-my-info-card { max-width: 900px; }
.kms-my-info-form { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 9px 16px; align-items: center; }
.kms-my-info-form > label,
.kms-my-info-form fieldset > label { margin: 0; color: var(--text-sub); font-size: 13px; font-weight: 700; }
.kms-my-info-form > small,
.kms-my-info-form > fieldset { grid-column: 2; }
.kms-my-info-form fieldset { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 9px 14px; margin: 12px 0; padding: 16px; border: 1px solid var(--border); border-radius: 9px; }
.kms-my-info-form fieldset > small { grid-column: 2; }
.kms-my-info-form legend { padding: 0 6px; font-weight: 700; }
.kms-my-info-form > .kms-form-foot { grid-column: 1 / -1; margin-top: 4px; }
.kms-profile-image-manager { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 9px 16px; align-items: center; margin: 0 0 20px; padding: 16px; border: 1px solid var(--border); border-radius: 9px; }
.kms-profile-image-manager > strong { align-self: start; color: var(--text-sub); font-size: 13px; font-weight: 700; }
.kms-profile-image-manager > :not(strong) { grid-column: 2; min-width: 0; }
.kms-profile-image-manager .kms-profile-current { margin: 0; }
.kms-profile-image-manager details { margin-top: 0; }
.kms-profile-image-manager > div:has(input[type="file"]) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kms-profile-image-manager input[type="file"] { flex: 1 1 320px; }

/* 독립 로그인/프로젝트 선택 화면 */
body[data-kms-live="true"].kms-login {
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: #1c2434;
}
body[data-kms-live="true"].kms-login .kms-login-box {
    width: min(420px, 100%);
    padding: 30px 28px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card);
    box-shadow: 0 24px 60px rgba(15, 23, 42, .32);
}
body[data-kms-live="true"].kms-login .kms-login-box input,
body[data-kms-live="true"].kms-login .kms-login-box select,
body[data-kms-live="true"].kms-login .kms-login-box textarea { border-color: var(--border); border-radius: 8px; }
.kms-project-choice-list { display: grid; gap: 8px; }
.kms-project-choice-list a { padding: 13px 14px; border: 1px solid var(--border); border-radius: 9px; color: var(--text); text-decoration: none; }
.kms-project-choice-list a:hover { border-color: var(--primary); background: var(--primary-soft); }

/* 기존 알림 API 레이어도 동일한 카드 인상으로 유지한다. */
.kms-notice-layer { background: rgba(15, 23, 42, .5); }
.kms-notice-box { border-radius: 14px; box-shadow: 0 24px 60px rgba(15, 23, 42, .3); }
.kms-notice-title { border-color: var(--border); }

@media (max-width: 768px) {
    body[data-kms-live="true"] .kms-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 100;
        height: 100vh;
        min-height: 0;
        margin-left: 0;
        padding-top: 6px;
        overflow-y: auto;
    }
    body[data-kms-live="true"] .kms-content { padding: 14px 14px 24px; }
    body[data-kms-live="true"]:not(.kms-login) .kms-footer {
        left: 0;
        min-height: 38px;
        padding: 10px 14px 11px;
    }
    .kms-my-info-form,
    .kms-my-info-form fieldset,
    .kms-profile-image-manager { grid-template-columns: 1fr; }
    .kms-my-info-form > small,
    .kms-my-info-form > fieldset,
    .kms-my-info-form fieldset > small,
    .kms-profile-image-manager > :not(strong) { grid-column: 1; }

    .kms-file-size-control { align-items: stretch; }
    .kms-file-size-control > input { width: 100%; flex-basis: calc(100% - 58px); }
    .kms-file-size-converted { width: 100%; min-width: 0; white-space: normal; }
    .kms-file-policy-na { align-items: flex-start; }

    .kms-history-searchbar {
        grid-template-columns: minmax(0, 1fr);
        gap: 9px;
    }
    .kms-history-searchbar > label {
        grid-template-columns: 68px minmax(0, 1fr);
    }
    .kms-history-searchbar > label > span {
        display: block;
        white-space: nowrap;
    }
    .kms-history-searchbar .kms-searchbar-actions {
        width: 100%;
        margin-left: 0;
    }

    .kms-consent-policy-page .kms-page-head { text-align: center; }
    .kms-consent-policy-page .kms-page-actions,
    .kms-consent-policy-page .kms-page-actions .kms-btn { width: 100%; }
    .kms-consent-policy-search { width: 100%; padding: 12px; }
    .kms-consent-policy-search .system-log-search,
    .kms-consent-policy-search .system-log-search > label,
    .kms-consent-policy-search .system-log-search :where(input, select),
    .kms-consent-policy-search .kms-searchbar-actions { width: 100%; min-width: 0; }
    .kms-consent-policy-search .kms-searchbar-actions .kms-btn { flex: 1; }
    .kms-consent-policy-modal > .kms-modal {
        align-items: stretch;
        width: 100%;
        max-height: 100dvh;
        padding: 0;
        border-radius: 16px 16px 0 0;
    }
    .kms-consent-policy-modal .kms-modal-head strong {
        flex: 1;
        padding-left: 30px;
        text-align: center;
    }
    .kms-consent-policy-modal .kms-modal-body { padding: 12px 16px; }
    .kms-consent-policy-modal .kms-form-row > label:first-child { text-align: left; }
    .kms-consent-policy-modal .kms-consent-policy-options {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }
    .kms-consent-policy-modal .kms-consent-policy-options > label { justify-content: center; }
    .kms-consent-policy-modal .kms-consent-policy-period {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }
    .kms-consent-policy-modal .kms-consent-policy-period > span { text-align: center; }
    .kms-consent-policy-modal textarea { min-height: 200px; }
    .kms-consent-item-editor-head {
        align-items: stretch;
        flex-direction: column;
    }
    .kms-consent-item-editor-head > .kms-btn { width: 100%; }
    .kms-consent-edit-item { padding: 12px; }
    .kms-consent-edit-item .kms-consent-policy-options {
        grid-template-columns: minmax(0, 1fr);
    }
    .kms-project-consent-readonly,
    .kms-project-consent-list,
    .kms-project-consent-item { width: 100%; min-width: 0; }
    .kms-project-consent-list { padding: 12px; }
    .kms-project-consent-item > summary { align-items: flex-start; }
    .kms-project-consent-content { padding: 13px; font-size: 13px; }
}

@media (min-width: 769px) and (max-width: 1180px) {
    .kms-history-searchbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .kms-history-searchbar .kms-searchbar-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
        width: 100%;
        margin-left: 0;
    }
}