/* CIW Desk 전용 스타일 — 템플릿(maba.css)에 없는 것만 둔다. 코어는 고치지 않는다. 클래스 app-*, 변수 --app-*, 색은 --maba-* 토큰만(다크 자동 대응)
   글자는 기본 14px(상속), 보조 글자는 템플릿 maba-text-sm(13.5px) 클래스로 — 여기서 13px 미만 금지(tools/check.mjs가 본다) */

/* ── 로고 — 고리 C + 주황 점(views/common/logo.jsp, 파비콘과 같은 모양). 사이드바 자리는 템플릿 파란 상자를 지우고 그림만, 파란 사이드바에서는 고리를 글자색으로 ── */
.app-logo { display: block; width: 100%; height: 100%; }
.app-logo__ring { fill: none; stroke: var(--maba-primary); stroke-width: 6.4; stroke-linecap: round; }
.app-logo__dot { fill: var(--maba-orange); }
.maba-sidebar__brand-logo.app-brand-mark { background: none; border-radius: 0; }
body[data-maba-sidebar="primary"] .maba-sidebar .app-logo__ring { stroke: var(--maba-sidebar-text); }
.app-brand__logo { width: 30px; height: 30px; display: inline-flex; flex: none; }

/* ── 탑바 알림 목록 (템플릿 드롭다운에 스크롤만 더함) ── */
.app-alert-list { max-height: 360px; overflow-y: auto; }

/* ── 로그인 (템플릿 login.html 데모의 카드 모양) ── */
.app-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--maba-space-4); background: var(--maba-bg); }
.app-login__card { width: 100%; max-width: 460px; background: var(--maba-surface); border: 1px solid var(--maba-border); border-radius: var(--maba-radius); box-shadow: var(--maba-shadow-lg); padding: var(--maba-space-8); }
.app-login__brand { display: flex; align-items: center; gap: 12px; margin-bottom: var(--maba-space-6); }
.app-login__brand .app-brand__logo { width: 40px; height: 40px; }
.app-login__title { font-size: 20px; font-weight: 700; margin: 0; }
.app-login__sub { margin: 0; color: var(--maba-text-sub); }
.app-demo-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 12px; font-size: 13px; font-weight: 600; color: var(--maba-orange); background: color-mix(in srgb, var(--maba-orange) 14%, var(--maba-surface)); white-space: nowrap; }
.app-login__demo { margin-top: var(--maba-space-6); padding-top: var(--maba-space-4); border-top: 1px dashed var(--maba-border); }
.app-login__demo-hd { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 10px; }
.app-login__roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.app-login__role { display: flex; align-items: center; gap: 8px; text-align: left; padding: 8px 10px; }
.app-login__role span { display: flex; flex-direction: column; min-width: 0; }
.app-login__role .maba-text-sm { color: var(--maba-text-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 575.98px) {
  .app-login__card { padding: var(--maba-space-6); }
  .app-login__roles { grid-template-columns: 1fr; }
}

/* ── 화면 목록 ── */
.app-index { max-width: 1100px; margin: 0 auto; padding: var(--maba-space-6) var(--maba-space-4); }
.app-index__head { display: flex; align-items: center; gap: 12px; margin-bottom: var(--maba-space-6); }
.app-index__title { font-size: 20px; font-weight: 700; margin: 0; }

/* ── 공통 ── */
.app-pre { white-space: pre-wrap; word-break: break-word; }
.app-tabs-scroll { overflow-x: auto; scrollbar-width: none; }
.app-tabs-scroll .nav-link { white-space: nowrap; }
.app-count { margin-left: 4px; opacity: .75; }
.app-check-list { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.app-assignees { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }

/* ── 프로필 사진 (템플릿 maba-avatar는 글자·아이콘만이라 사진을 동그라미에 채우는 것만 더함. 사진 없으면 회색 첫 글자) ── */
.app-avatar-img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
/* 사진만 든 동그라미는 글자 기준선이 없어 동그라미 아래끝이 기준선이 된다 → 옆 이름이 아래로 붙는다.
   사진·첫 글자 모두 가운데로 맞춘다 */
.maba-avatar, .app-av { vertical-align: middle; }
/* 사진 자르기 상자 — 템플릿 image.html 데모의 크롭 상자와 같은 모양 */
.app-crop-box { max-height: 360px; }
.app-crop-box > img { display: block; max-width: 100%; }

/* ── 요청 상세의 '요청 내용' 칸(관리 패널 app-panel app-req), 반영 예정일 글자(고객 상세) ── */
/* 안쪽 여백은 app-panel__hd·__bd 가 준다 — 여기서 또 주면 다른 칸보다 두 배로 들어갔다(2026-09-30) */
.app-req { display: block; border: 1px solid var(--maba-border); border-radius: var(--maba-radius); background: var(--maba-surface); color: var(--maba-text); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.app-req:hover { border-color: var(--maba-primary); box-shadow: var(--maba-shadow-sm); color: var(--maba-text); }
.app-release { color: var(--maba-text); font-weight: 600; }
.app-release.is-empty { color: var(--maba-text-sub); font-weight: 400; }

/* ── 고객 홈 요약 카드(템플릿 maba-stat) 전체를 링크로 ── */
.app-stat-link { display: block; color: inherit; text-decoration: none; height: 100%; }
.app-stat-link:hover .maba-card { border-color: var(--maba-primary); }
.app-stat-link.is-alert .maba-stat__value { color: var(--maba-orange); }

/* ── 요청 상세 머리 ── */
.app-view-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 16px; margin-bottom: 16px; }
.app-view-head__title { font-size: 20px; font-weight: 700; margin: 0; flex: 1 1 320px; min-width: 0; word-break: break-word; }
.app-view-head__no { color: var(--maba-text-sub); font-weight: 600; margin-right: 6px; }
.app-view-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--maba-text-sub); width: 100%; }

/* ══ 업무 보드·요청 상세 — 디자인 시안(proposal/pp.css)과 같은 모양 (2026-09-27 이실장님 "왜 시안하고 다르지") ══
   시안의 클래스 pp-* → app-*, 색·크기 토큰 --x → --app-x. 글자는 네 가지만: 13(보조)·14(본문)·16(구역 제목)·20(요청 제목 — 고객 요청 상세와 같게). 화면 제목은 템플릿 페이지 머리(18px·아이콘).
   템플릿 셸(사이드바·탑바)·알림·확인 창·날짜 달력은 템플릿 그대로. 다크 모드는 아래 토큰을 템플릿 다크 토큰으로 바꿔 대응한다
   강조색은 시안 남색 대신 템플릿 주 색(--maba-primary)을 따른다 — 앱 전체가 한 색(2026-09-27 이실장님: 차이가 크지 않아 기본으로). 다크의 글자용은 템플릿처럼 흰색 38% 섞음 */
:root {
  --app-bg: #f5f6f8; --app-surface: #ffffff; --app-surface-2: #eef0f3; --app-surface-3: #e6e9ee;
  --app-line: #e3e6eb; --app-line-strong: #cfd4dc;
  --app-text: #1c2230; --app-text-2: #475467; --app-sub: #6b7385; --app-faint: #9aa2b1;
  --app-accent: var(--maba-primary); --app-accent-hover: color-mix(in srgb, var(--maba-primary), black 12%);
  --app-accent-soft: color-mix(in srgb, var(--maba-primary) 12%, var(--maba-surface)); --app-accent-text: var(--maba-primary);
  --app-red: #d9383e; --app-red-hover: #c22d33; --app-red-soft: #fdeeee; --app-amber: #b86e00; --app-amber-soft: #fff4e0;
  --app-green: #218358; --app-green-bar: #30a46c;
  --app-ok: #1f8a4c; --app-ok-soft: #eefaf3; --app-ok-line: #b7e0c8;
  --app-memo: #fff8e6; --app-memo-line: #f2dfa9; --app-memo-ink: #6d4a00; --app-memo-ink-hover: #573b00; --app-memo-sub: #8a6a1f;
  --app-memo-tag: #f6e5b4; --app-memo-focus: #d9b44a; --app-memo-ring: #fbefcc;
  --app-row-hover: #f9fafb; --app-row-open: #f4f6fa; --app-row-open-hover: #ebeef5; --app-av-bg: #8a93a5;
  /* 분류 색 — 점·단계 표시에만 */
  --app-cat-접수: #8a93a5; --app-cat-진행: var(--maba-primary); --app-cat-검수: #d4860b; --app-cat-완료: #30a46c; --app-cat-취소: #b7bdc8;
  --app-fs-meta: 13px; --app-fs-body: 14px; --app-fs-h: 16px; --app-fs-title: 20px;
  --app-r: 10px; --app-r-sm: 7px;
  --app-shadow-card: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 1px rgba(16, 24, 40, .03);
  --app-shadow-hover: 0 4px 12px rgba(16, 24, 40, .08);
  --app-shadow-pop: 0 12px 32px rgba(16, 24, 40, .14), 0 2px 6px rgba(16, 24, 40, .06);
}
[data-bs-theme="dark"] {
  --app-bg: var(--maba-bg); --app-surface: var(--maba-surface);
  --app-surface-2: color-mix(in srgb, var(--maba-text) 8%, var(--maba-surface)); --app-surface-3: color-mix(in srgb, var(--maba-text) 14%, var(--maba-surface));
  --app-line: var(--maba-border); --app-line-strong: color-mix(in srgb, var(--maba-text) 26%, var(--maba-surface));
  --app-text: var(--maba-text); --app-text-2: color-mix(in srgb, var(--maba-text) 82%, var(--maba-surface)); --app-sub: var(--maba-text-sub);
  --app-faint: color-mix(in srgb, var(--maba-text-sub) 75%, var(--maba-surface));
  --app-accent-soft: color-mix(in srgb, var(--maba-primary) 28%, var(--maba-surface)); --app-accent-text: color-mix(in srgb, var(--maba-primary), white 38%);
  --app-red: #f06a6f; --app-red-soft: color-mix(in srgb, #d9383e 24%, var(--maba-surface)); --app-amber: #f0a43c; --app-amber-soft: color-mix(in srgb, #b86e00 26%, var(--maba-surface));
  --app-ok: #5fd08f; --app-ok-soft: color-mix(in srgb, #1f8a4c 20%, var(--maba-surface)); --app-ok-line: color-mix(in srgb, #1f8a4c 45%, var(--maba-surface));
  --app-memo: color-mix(in srgb, #e0a800 12%, var(--maba-surface)); --app-memo-line: color-mix(in srgb, #e0a800 34%, var(--maba-surface));
  --app-memo-ink: #f2c75c; --app-memo-ink-hover: #f6d57f; --app-memo-sub: #d9b86a; --app-memo-tag: color-mix(in srgb, #e0a800 26%, var(--maba-surface));
  --app-memo-focus: #c99a2e; --app-memo-ring: color-mix(in srgb, #e0a800 22%, var(--maba-surface));
  --app-row-hover: var(--app-surface-2); --app-row-open: color-mix(in srgb, var(--maba-text) 5%, var(--maba-surface)); --app-row-open-hover: var(--app-surface-2);
}
/* 이 구역 안에서만 부트스트랩 기본 여백·링크 색을 시안처럼 없앤다 (특이성 0 — 아래 클래스 규칙이 이긴다) */
:where(.app-pp) :is(h1, h2, h3, p) { margin: 0; }
:where(.app-pp) a:where(:not(.btn)) { color: inherit; text-decoration: none; }
.app-pp { color: var(--app-text); }
.app-offcanvas.offcanvas { --bs-offcanvas-width: min(760px, 100vw); }
/* 보드 옆 패널은 좁아서 한 줄 (속성 → 왼쪽 → 나머지) */
.app-vgrid.is-narrow { grid-template-columns: minmax(0, 1fr); grid-template-areas: "props" "main" "rest"; grid-template-rows: none; }
/* 날짜 칸(템플릿 달력)은 폭을 고정해 기한·반영 예정일의 글자가 같은 자리에 온다 (옆의 마감 표시·지우기 버튼은 뒤에 붙는다).
   폰처럼 좁으면 날짜 칸이 줄어 옆의 "2일 지남"이 칸 밖으로 밀리지 않는다(2026-09-30) */
input.app-ghost.app-ghost--date { flex: 0 1 148px; width: 148px; min-width: 104px; }
.app-prop__v > .app-due { flex: none; white-space: nowrap; }
/* 시안의 팝오버 자리는 템플릿 펼침 메뉴(dropdown) — 폭만 시안처럼 */
.app-pp .dropdown-menu:has(.app-pop__item) { min-width: 220px; }
/* 끌어서 옮기는 동안 카드 자리 (SortableJS) */
.app-col__list .sortable-ghost { opacity: .45; }
/* 되돌리기 알림 — 템플릿 리치 알림 아래에 5초 동안 줄어드는 막대 (다 줄면 그대로 굳는다) */
.app-undo { position: relative; overflow: hidden; }
.app-undo::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: var(--maba-green); transform-origin: left; animation: app-undo 5s linear forwards; }
@keyframes app-undo { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ── 공통 부품 ── */
.app-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 14px; border-radius: var(--app-r-sm);
  border: 1px solid var(--app-line-strong); background: var(--app-surface); color: var(--app-text); font-weight: 600; white-space: nowrap;
}
.app-btn:hover { background: var(--app-surface-2); }
.app-btn i { font-size: 17px; }
.app-btn--primary { background: var(--app-accent); border-color: var(--app-accent); color: #fff; }
.app-btn--primary:hover { background: var(--app-accent-hover); border-color: var(--app-accent-hover); }
.app-btn--ghost { border-color: transparent; background: transparent; color: var(--app-text-2); }
.app-btn--ghost:hover { background: var(--app-surface-2); color: var(--app-text); }
.app-btn--danger { color: var(--app-red); }
.app-btn--sm { height: 30px; padding: 0 10px; font-size: var(--app-fs-meta); }
.app-iconbtn {
  width: 34px; height: 34px; border-radius: var(--app-r-sm); border: 0; background: transparent; color: var(--app-sub);
  display: inline-flex; align-items: center; justify-content: center; font-size: 19px;
}
.app-iconbtn:hover { background: var(--app-surface-2); color: var(--app-text); }

.app-av {
  width: 24px; height: 24px; border-radius: 50%; flex: none; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--app-av-bg); color: #fff; font-size: var(--app-fs-meta); font-weight: 600; line-height: 1;
}
.app-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.app-av--md { width: 30px; height: 30px; }
.app-av--lg { width: 36px; height: 36px; font-size: var(--app-fs-body); }
.app-stack { display: inline-flex; align-items: center; }
.app-stack .app-av { box-shadow: 0 0 0 2px var(--app-surface); }
.app-stack .app-av + .app-av { margin-left: -6px; }

.app-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--app-c, var(--app-cat-접수)); }
[data-cat="접수"] { --app-c: var(--app-cat-접수); }
[data-cat="진행"] { --app-c: var(--app-cat-진행); }
[data-cat="검수"] { --app-c: var(--app-cat-검수); }
[data-cat="완료"] { --app-c: var(--app-cat-완료); }
[data-cat="취소"] { --app-c: var(--app-cat-취소); }

.app-prio { display: inline-flex; width: 16px; height: 16px; flex: none; color: var(--app-faint); }
.app-prio svg { width: 16px; height: 16px; display: block; }
.app-prio--URGENT { color: var(--app-red); }
.app-prio--HIGH { color: var(--app-text-2); }

.app-due { display: inline-flex; align-items: center; gap: 4px; color: var(--app-sub); white-space: nowrap; }
.app-due i { font-size: 15px; }
.app-due.is-soon { color: var(--app-amber); font-weight: 500; }
.app-due.is-late { color: var(--app-red); font-weight: 500; }

.app-cnt { display: inline-flex; align-items: center; gap: 3px; color: var(--app-sub); }
.app-cnt i { font-size: 15px; }

.app-bar { position: relative; height: 4px; border-radius: 2px; background: var(--app-surface-3); overflow: hidden; flex: 1; min-width: 40px; }
.app-bar > span { position: absolute; inset: 0 auto 0 0; background: var(--app-green-bar); border-radius: 2px; }

.app-select, .app-input {
  height: 36px; padding: 0 12px; border-radius: var(--app-r-sm); border: 1px solid var(--app-line-strong);
  background: var(--app-surface); color: var(--app-text); min-width: 0;
}
.app-select {
  appearance: none; padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%236b7385' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 14px;
}
.app-select:hover, .app-input:hover { border-color: var(--app-faint); }
.app-select:focus, .app-input:focus, .app-textarea:focus { outline: none; border-color: var(--app-accent); box-shadow: 0 0 0 3px var(--app-accent-soft); }

.app-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 9px; background: var(--app-surface-3); }
.app-seg button {
  height: 30px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--app-sub); font-weight: 600; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.app-seg button:hover { color: var(--app-text); }
.app-seg button.is-on { background: var(--app-surface); color: var(--app-text); box-shadow: var(--app-shadow-card); }
.app-seg--icon button { width: 34px; padding: 0; justify-content: center; font-size: 18px; }

/* ── 화면 머리 — 템플릿 페이지 머리(maba-page-head)를 쓰고, 업무 보드 요약 줄의 숫자·기한 지남 색만 ── */
.app-summary b { color: var(--app-text); font-weight: 600; }
.app-summary .is-late { color: var(--app-red); }
/* 제목 옆 설명이 길면 모바일에서 제목까지 줄어 "앱 받 / 기"처럼 끊겼다 — 설명이 남는 폭만 쓰고 그 안에서 줄바꿈 */
.maba-page-head__lead > .maba-page-head__sub { flex: 1 1 0; }
/* 설명이 길어 단추가 다음 줄로 내려가면(폰 — 앱 배포·업무 보드) 왼쪽에 붙었다 → 같은 줄일 때처럼 오른쪽 끝에 (2026-09-30) */
.maba-page-head__actions { margin-left: auto; }

/* ── 보드 도구 줄 ── */
.app-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 16px; }
.app-toolbar__end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.app-sys { max-width: 220px; }
/* 시스템별 보기 — 옵션 길이에 맞춰 줄면 펼친 목록의 발주처 이름(optgroup)이 끝에 붙는다. 폭을 고정(2026-09-29 이실장님) */
.app-sys.app-syssel { width: 240px; max-width: 100%; }
.app-sys.is-on { border-color: var(--app-accent); color: var(--app-accent-text); font-weight: 600; }
.app-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.app-chip {
  height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--app-line-strong); background: var(--app-surface);
  color: var(--app-text-2); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.app-chip b { font-weight: 700; color: var(--app-text); }
.app-chip:hover { border-color: var(--app-faint); }
.app-chip.is-on { background: var(--app-text); border-color: var(--app-text); color: var(--app-surface); }
.app-chip.is-on b { color: var(--app-surface); }
.app-chip.is-zero { opacity: .5; }
.app-people { display: inline-flex; align-items: center; gap: 2px; padding-left: 4px; }
.app-people button { border: 0; background: none; padding: 2px; border-radius: 50%; }
.app-people button.is-on .app-av { box-shadow: 0 0 0 2px var(--app-surface), 0 0 0 4px var(--app-accent); }
.app-people button:not(.is-on) .app-av { opacity: .9; }
.app-people.has-pick button:not(.is-on) .app-av { opacity: .35; }
.app-search { position: relative; display: inline-flex; align-items: center; }
.app-search i { position: absolute; left: 11px; color: var(--app-faint); font-size: 16px; pointer-events: none; }
.app-search input { width: 220px; padding-left: 34px; }

/* ── 칸반 ── */
.app-board { display: flex; gap: 14px; align-items: flex-start; overflow-x: auto; padding-bottom: 12px; }
.app-col { flex: 0 0 288px; width: 288px; display: flex; flex-direction: column; border-radius: 12px; background: var(--app-surface-2); padding: 8px; transition: background .12s, box-shadow .12s; }
.app-col.is-over { background: var(--app-accent-soft); box-shadow: inset 0 0 0 2px var(--app-accent); }
.app-col__hd { display: flex; align-items: center; gap: 8px; padding: 6px 6px 10px; font-weight: 600; }
.app-col__hd .app-col__cnt { color: var(--app-sub); font-weight: 500; }
.app-col__hd .app-col__hint { margin-left: auto; color: var(--app-faint); font-weight: 400; font-size: var(--app-fs-meta); }
.app-col__list { display: flex; flex-direction: column; gap: 8px; min-height: 56px; }
.app-col__empty { padding: 18px 8px; text-align: center; color: var(--app-faint); border: 1px dashed var(--app-line-strong); border-radius: var(--app-r-sm); }
.app-col__more { margin-top: 8px; border: 0; background: none; color: var(--app-sub); padding: 6px; border-radius: var(--app-r-sm); }
.app-col__more:hover { background: var(--app-surface-3); color: var(--app-text); }

.app-card {
  background: var(--app-surface); border: 1px solid var(--app-line); border-radius: var(--app-r); padding: 12px 12px 10px;
  box-shadow: var(--app-shadow-card); cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .12s;
}
.app-card:hover { border-color: var(--app-line-strong); box-shadow: var(--app-shadow-hover); }
.app-card.is-dragging { opacity: .45; transform: rotate(1deg); }
.app-card__top { display: flex; align-items: center; gap: 6px; color: var(--app-sub); font-size: var(--app-fs-meta); min-width: 0; }
.app-card__no { font-variant-numeric: tabular-nums; font-weight: 500; flex: none; }
.app-card__sys { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.app-card__sys::before { content: '·'; margin-right: 6px; color: var(--app-faint); }
.app-card__prio { margin-left: auto; display: inline-flex; }
.app-card__parent { margin-top: 4px; display: flex; align-items: center; gap: 4px; color: var(--app-sub); font-size: var(--app-fs-meta); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.app-card__parent i { font-size: 14px; flex: none; }
.app-card__title {
  margin-top: 4px; font-size: var(--app-fs-body); font-weight: 500; line-height: 1.45; word-break: keep-all; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.app-card__prog { margin-top: 10px; display: flex; align-items: center; gap: 8px; font-size: var(--app-fs-meta); color: var(--app-sub); }
.app-card__toggle { border: 0; background: none; padding: 0; color: var(--app-sub); display: inline-flex; align-items: center; gap: 2px; font-size: var(--app-fs-meta); }
.app-card__toggle:hover { color: var(--app-text); }
.app-card__toggle i { font-size: 15px; transition: transform .15s; }
.app-card__toggle[aria-expanded="true"] i { transform: rotate(90deg); }
.app-card__kids { list-style: none; margin: 8px 0 0; padding: 8px 0 0; border-top: 1px solid var(--app-line); display: flex; flex-direction: column; gap: 2px; }
.app-card__kids li { display: flex; align-items: center; gap: 8px; padding: 4px 6px; margin: 0 -6px; border-radius: 6px; font-size: var(--app-fs-meta); }
.app-card__kids li:hover { background: var(--app-surface-2); }
.app-card__kids .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-card__foot { margin-top: 10px; display: flex; align-items: center; gap: 10px; font-size: var(--app-fs-meta); min-height: 24px; }
.app-card__foot .app-stack { margin-left: auto; }

/* 배포 대상 이름표 (웹·앱·CS) */
.app-tgt { flex: none; display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 5px; border: 1px solid var(--app-line-strong); color: var(--app-text-2); font-size: var(--app-fs-meta); font-weight: 600; line-height: 1; white-space: nowrap; }
.app-tgt + .app-tgt { margin-left: 4px; }
.app-card__tgts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.app-card__tgts .app-tgt + .app-tgt { margin-left: 0; }
.app-tgtsel { width: auto; }
.app-tgts { display: flex; flex-wrap: wrap; gap: 6px; }
.app-tgt-btn { height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--app-line-strong); background: var(--app-surface); color: var(--app-sub); font-weight: 600; }
.app-tgt-btn:hover { border-color: var(--app-faint); color: var(--app-text); }
.app-tgt-btn.is-on { background: var(--app-accent-soft); border-color: var(--app-accent); color: var(--app-accent-text); }
.app-tgt-btn.is-gone { opacity: .6; border-style: dashed; }
/* 배포 확인 띠 — 운영팀이 볼 때 진행 단계 아래 */
.app-confirm { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin: -8px 0 20px; padding: 12px 16px; border: 1px solid var(--app-ok-line); border-radius: 12px; background: var(--app-ok-soft); }
.app-confirm > i { font-size: 22px; color: var(--app-ok); }
.app-confirm__txt { flex: 1; min-width: 180px; display: flex; flex-direction: column; }
.app-confirm__txt span { color: var(--app-sub); font-size: var(--app-fs-meta); }

/* ── 목록 ── */
.app-list { background: var(--app-surface); border: 1px solid var(--app-line); border-radius: 12px; overflow: hidden; }
.app-lhead, .app-row {
  display: grid; align-items: center; gap: 12px;
  grid-template-columns: 20px 92px minmax(0, 1fr) 160px 84px 96px 92px; /* 번호는 시스템별(카인포-12-3)이라 넓게 */
  padding: 0 16px;
}
.app-lhead { height: 38px; background: var(--app-surface); border-bottom: 1px solid var(--app-line); color: var(--app-sub); font-size: var(--app-fs-meta); font-weight: 600; }
.app-group__hd {
  width: 100%; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 0;
  background: var(--app-surface-2); font-weight: 600; text-align: left; border-bottom: 1px solid var(--app-line);
}
.app-group__hd i { font-size: 16px; color: var(--app-sub); transition: transform .15s; }
.app-group__hd[aria-expanded="false"] i { transform: rotate(-90deg); }
.app-group__hd .app-col__cnt { color: var(--app-sub); font-weight: 500; }
.app-group__hd .app-col__hint { margin-left: auto; color: var(--app-faint); font-weight: 400; font-size: var(--app-fs-meta); }
.app-row { min-height: 46px; border-bottom: 1px solid var(--app-line); cursor: pointer; }
.app-row:hover { background: var(--app-row-hover); }
.app-row__no { color: var(--app-sub); font-size: var(--app-fs-body); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-row__title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.app-row__title .t { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.app-row__title .app-cnt { flex: none; }
.app-row__sys { color: var(--app-sub); font-size: var(--app-fs-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-row__upd { color: var(--app-sub); font-size: var(--app-fs-body); text-align: right; white-space: nowrap; }
.app-row__due { font-size: var(--app-fs-body); }
/* 펼친 원 요청 + 하위 카드 — 한 덩어리 바탕, 원 요청 화살표에서 내려오는 나뭇가지 선, 하위 카드는 낮고 옅게 */
.app-row.is-open, .app-row--kid { background: var(--app-row-open); }
.app-row.is-open { border-bottom-color: transparent; }
.app-row.is-open .app-row__title .t { font-weight: 700; }
.app-row.is-open .app-row__title, .app-row--kid .app-row__title { position: relative; align-self: stretch; }
.app-row.is-open .app-row__title::before { content: ''; position: absolute; left: 9px; top: calc(50% + 11px); bottom: 0; width: 1.5px; background: var(--app-line-strong); }
.app-row--kid { min-height: 40px; border-bottom: 0; }
.app-row--kid.is-last { border-bottom: 1px solid var(--app-line); }
.app-row.is-open:hover, .app-row--kid:hover { background: var(--app-row-open-hover); }
.app-row--kid .app-row__no { color: var(--app-faint); }
.app-row--kid .app-row__title { padding-left: 32px; }
.app-row--kid .app-row__title::before { content: ''; position: absolute; left: 9px; top: 0; bottom: 0; width: 1.5px; background: var(--app-line-strong); }
.app-row--kid.is-last .app-row__title::before { bottom: 50%; }
.app-row--kid .app-row__title::after { content: ''; position: absolute; left: 9px; top: 50%; width: 15px; height: 1.5px; background: var(--app-line-strong); }
.app-row--kid .app-row__title .t { font-weight: 400; color: var(--app-text-2); }
.app-kidst { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--app-surface); border: 1px solid var(--app-line); color: var(--app-text-2); font-size: var(--app-fs-meta); white-space: nowrap; }
.app-kidbtn { border: 0; background: none; width: 20px; height: 20px; padding: 0; border-radius: 4px; color: var(--app-sub); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.app-kidbtn:hover { background: var(--app-surface-3); color: var(--app-text); }
.app-kidbtn i { font-size: 15px; transition: transform .15s; }
.app-kidbtn[aria-expanded="true"] i { transform: rotate(90deg); }
.app-kidgap { width: 20px; flex: none; }
.app-prog-mini { display: inline-flex; align-items: center; gap: 6px; flex: none; color: var(--app-sub); font-size: var(--app-fs-meta); }
/* 목록에서는 제목과 떼어 제목 칸 오른쪽 끝에 — 줄마다 같은 자리 */
.app-row__title .app-prog-mini { margin-left: auto; padding-left: 16px; margin-right: 20px; }
.app-row__title .app-prog-mini .app-bar { width: 56px; }
.app-row__title .app-prog-mini .tnum { min-width: 26px; text-align: right; }
.app-prog-mini .app-bar { width: 44px; flex: none; }
.app-list__empty { padding: 40px 16px; text-align: center; color: var(--app-sub); }
.app-list__foot { padding: 10px 16px; display: flex; justify-content: center; }

/* ── 상세 ── */
.app-vhead { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.app-vhead__main { flex: 1; min-width: 0; }
.app-vtitle { font-size: var(--app-fs-title); font-weight: 700; line-height: 1.35; letter-spacing: -.01em; word-break: keep-all; overflow-wrap: anywhere; }
.app-vmeta { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; color: var(--app-sub); }
.app-vmeta .app-av { width: 20px; height: 20px; }
.app-vmeta span { display: inline-flex; align-items: center; gap: 6px; }
.app-vhead__actions { display: flex; gap: 6px; flex: none; position: relative; }
.app-lock { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; background: var(--app-surface-3); color: var(--app-text-2); font-weight: 600; font-size: var(--app-fs-meta); }

/* 칸이 모자라면 다음 줄로 — 가로로 밀려 가려지는 단계가 없게(보류가 오른쪽 끝에 숨던 문제). 줄 첫 칸의 잇는 선은 request-panel.js가 is-rowstart로 숨긴다 */
.app-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); row-gap: 4px; margin-bottom: 20px; background: var(--app-surface); border: 1px solid var(--app-line); border-radius: 12px; padding: 6px; }
.app-step {
  min-width: 0; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 0; background: none;
  border-radius: 8px; color: var(--app-faint); font-weight: 500; text-align: left; line-height: 1.3; word-break: keep-all; position: relative;
}
.app-step + .app-step::before { content: ''; position: absolute; left: -6px; top: 50%; width: 10px; height: 1px; background: var(--app-line-strong); }
.app-step.is-rowstart::before { display: none; }
.app-step__mark {
  width: 20px; height: 20px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--app-line-strong); background: var(--app-surface); color: #fff; font-size: 13px;
}
.app-step.is-done { color: var(--app-text-2); }
.app-step.is-done .app-step__mark { background: var(--app-c); border-color: var(--app-c); }
.app-step.is-now { color: var(--app-text); font-weight: 700; background: color-mix(in srgb, var(--app-c) 10%, var(--app-surface)); }
.app-step.is-now .app-step__mark { border: 5px solid var(--app-c); background: var(--app-surface); }
button.app-step:hover:not(.is-now) { background: var(--app-surface-2); color: var(--app-text); }
.app-steps.is-readonly .app-step { cursor: default; }
.app-steps.is-readonly .app-step:hover:not(.is-now) { background: none; color: inherit; }

/* 왼쪽(요청·고객 대화) 55 : 오른쪽(속성·내부 메모·작업) 45 — 오른쪽은 340px 밑으로 줄지 않는다 */
.app-vgrid { display: grid; grid-template-columns: minmax(0, 11fr) minmax(340px, 9fr); grid-template-areas: "main props" "main rest"; grid-template-rows: auto 1fr; gap: 20px 24px; align-items: start; }
.app-vmain { grid-area: main; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.app-props { grid-area: props; }
.app-vrest { grid-area: rest; display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.app-panel { background: var(--app-surface); border: 1px solid var(--app-line); border-radius: 12px; }
.app-panel__hd { display: flex; align-items: center; gap: 8px; padding: 14px 18px 0; }
.app-panel__hd h2 { font-size: var(--app-fs-h); font-weight: 700; }
.app-panel__hd .app-note { color: var(--app-faint); font-size: var(--app-fs-meta); }
.app-panel__hd .end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.app-panel__bd { padding: 14px 18px 18px; }

.app-body { white-space: pre-wrap; word-break: break-word; line-height: 1.75; }
/* 공지 본문 — 에디터 HTML(서버가 정화한 것). 줄바꿈은 태그로 오므로 pre-wrap 을 쓰지 않는다 */
.app-notice-body { word-break: break-word; line-height: 1.75; }
.app-notice-body img { max-width: 100%; height: auto; }
.app-notice-body table { max-width: 100%; }
.app-notice-body > :last-child { margin-bottom: 0; }
/* 목록 이름·제목 칸 — 낱말 단위로 줄바꿈(긴 이름은 칸 안에서 끊음). 폰에서 나머지 정보가 이 칸 아래로 붙는 표
   (공지 관리·발주처·시스템·프로젝트 연결 요청·계정) */
.app-words { word-break: keep-all; overflow-wrap: anywhere; }
.app-atts { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--app-line); }
.app-atts__hd { font-weight: 600; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.app-atts__hd span { color: var(--app-sub); font-weight: 500; }
.app-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 8px; margin-bottom: 10px; }
.app-thumb { display: block; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; border: 1px solid var(--app-line); background: var(--app-surface-2); }
.app-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.app-thumb:hover img { transform: scale(1.04); }
/* 첨부 지우기 — 썸네일은 올려 둘 때만 보이고(터치 화면은 늘), 파일 줄은 휴지통 단추 */
.app-thumbwrap, .app-inatt__img { position: relative; }
.app-thumb__del {
  position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border: 0; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 16px;
  background: rgba(17, 24, 39, .62); color: #fff; opacity: 0; transition: opacity .15s;
}
.app-thumbwrap:hover .app-thumb__del, .app-inatt__img:hover .app-thumb__del, .app-thumb__del:focus-visible { opacity: 1; }
@media (hover: none) { .app-thumb__del { opacity: 1; } }
.app-thumb__del:hover { background: var(--app-red); }
.app-iconbtn--xs { width: 26px; height: 26px; font-size: 16px; }
.app-attadd { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 10px; }
/* 끌어다 놓는 중 */
[data-drop].is-drop { outline: 2px dashed var(--app-accent); outline-offset: -2px; background-color: var(--app-accent-soft); }
.app-memo [data-drop].is-drop { outline-color: var(--app-memo-focus); background-color: var(--app-memo-ring); }
/* 그 자리에서 고치기 */
.app-field { display: block; margin-bottom: 12px; }
.app-field > span { display: block; margin-bottom: 4px; color: var(--app-sub); font-size: var(--app-fs-meta); font-weight: 600; }
.app-field .app-input { width: 100%; }
.app-edit-body { height: auto; min-height: 180px; padding: 10px 12px; line-height: 1.7; resize: vertical; }
.app-edit-ft { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
/* 대화·메모 한 줄에 딸린 첨부 */
.app-inatt { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; max-width: 100%; }
.is-us .app-inatt { justify-content: flex-end; }
.app-inatt__img a { display: block; width: 132px; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; border: 1px solid var(--app-line); background: var(--app-surface-2); }
.app-inatt__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.app-inatt__file { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 4px 4px 10px; border: 1px solid var(--app-line); border-radius: 10px; background: var(--app-surface); font-size: var(--app-fs-meta); }
.app-inatt__file > i { font-size: 17px; color: var(--app-sub); }
.app-inatt__file b { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-inatt__file .tnum { color: var(--app-sub); white-space: nowrap; }
/* 보내기 전에 붙여 둔 파일 */
.app-pend { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 10px 6px; }
.app-pend__item { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 2px 2px 8px; border-radius: 8px; background: var(--app-surface-2); font-size: var(--app-fs-meta); }
.app-pend__item b { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.app-pend__item .tnum { color: var(--app-sub); }
.app-pend__item button { width: 22px; height: 22px; border: 0; border-radius: 6px; background: none; color: var(--app-sub); display: inline-flex; align-items: center; justify-content: center; }
.app-pend__item button:hover { background: var(--app-surface-3); color: var(--app-text); }
.app-memo .app-pend__item { background: var(--app-memo-tag); }
/* 파일은 한 줄에 둘 — 칸이 좁아 한 개가 260px 밑이 되면 하나씩 */
.app-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(260px, calc((100% - 8px) / 2)), 1fr)); gap: 6px 8px; }
.app-file { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--app-line); border-radius: 8px; }
.app-file__ic { width: 34px; height: 34px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 19px; background: var(--app-surface-2); color: var(--app-text-2); flex: none; }
.app-file__name { flex: 1; min-width: 0; }
.app-file__name b { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-file__name span { color: var(--app-sub); font-size: var(--app-fs-meta); }

/* 고객 대화·진행 이력 (왼쪽) — 대화는 고객에게 보이는 공개 댓글만 */
.app-feed { list-style: none; margin: 0; padding: 0; position: relative; }
.app-feed::before { content: ''; position: absolute; left: 15px; top: 6px; bottom: 6px; width: 1px; background: var(--app-line); }
.app-feed > li { position: relative; display: flex; gap: 12px; padding: 8px 0; }
.app-ev { align-items: flex-start; color: var(--app-sub); }
.app-ev__ic { width: 32px; display: inline-flex; justify-content: center; flex: none; position: relative; }
.app-ev__ic i { width: 22px; height: 22px; border-radius: 50%; background: var(--app-surface); border: 1px solid var(--app-line-strong); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: var(--app-sub); }
.app-ev b { color: var(--app-text); font-weight: 600; }
.app-ev .app-when { margin-left: 6px; color: var(--app-faint); font-size: var(--app-fs-meta); }
.app-ev__txt { min-width: 0; padding-top: 1px; }
.app-ev__quote { margin-top: 4px; padding: 6px 10px; border-left: 2px solid var(--app-line-strong); color: var(--app-text-2); white-space: pre-wrap; }
.app-more { display: block; width: 100%; margin: 0 0 6px; padding: 6px; border: 1px dashed var(--app-line-strong); border-radius: 8px; background: none; color: var(--app-sub); }
.app-more:hover { color: var(--app-text); background: var(--app-surface-2); }

/* 고객 대화 말풍선 — 고객은 왼쪽(회색), 우리 쪽은 오른쪽(파랑). 이어 쓴 말은 이름·사진을 한 번만 */
.app-chat { list-style: none; margin: 0; padding: 4px 0 0; display: flex; flex-direction: column; }
.app-chat__msg { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; }
.app-chat__msg:first-child { margin-top: 0; }
.app-chat__msg.is-cont { margin-top: 4px; }
.app-chat__msg.is-us { flex-direction: row-reverse; }
.app-chat__av { width: 32px; flex: none; }
.app-chat__col { min-width: 0; max-width: min(78%, 560px); display: flex; flex-direction: column; }
.app-chat__msg.is-us .app-chat__col { align-items: flex-end; }
.app-chat__meta { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: var(--app-fs-meta); color: var(--app-sub); }
.app-chat__meta b { color: var(--app-text); font-weight: 600; }
.app-chat__row { display: flex; align-items: flex-end; gap: 6px; max-width: 100%; }
.app-chat__msg.is-us .app-chat__row { flex-direction: row-reverse; }
.app-chat__bubble { min-width: 0; padding: 9px 14px; border-radius: 16px; white-space: pre-wrap; word-break: break-word; line-height: 1.6; }
.is-them .app-chat__bubble { background: var(--app-surface-2); border-top-left-radius: 4px; }
.is-us .app-chat__bubble { background: var(--app-accent-soft); border-top-right-radius: 4px; }
.app-chat__msg.is-cont .app-chat__bubble { border-radius: 16px; }
.app-chat__row .app-when { flex: none; color: var(--app-faint); font-size: var(--app-fs-meta); white-space: nowrap; }
.app-memo__who .app-when { color: var(--app-faint); font-size: var(--app-fs-meta); }
.app-you { color: var(--app-accent-text); font-size: var(--app-fs-meta); font-weight: 600; }
.app-chat__empty { padding: 12px 0 4px; color: var(--app-sub); text-align: center; }
.app-nochat { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border: 1px dashed var(--app-line-strong); border-radius: 12px; color: var(--app-sub); }

/* 보이는 범위 표시 — 칸 머리에 늘 붙인다 */
.app-vis { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: var(--app-fs-meta); font-weight: 600; white-space: nowrap; }
.app-vis i { font-size: 14px; }
.app-vis--pub { background: var(--app-accent-soft); color: var(--app-accent-text); }
.app-vis--int { background: var(--app-memo-tag); color: var(--app-memo-ink); }

/* 쓰기 칸 */
.app-compose { margin-top: 16px; border: 1px solid var(--app-line-strong); border-radius: 10px; background: var(--app-surface); }
.app-compose:focus-within { border-color: var(--app-accent); box-shadow: 0 0 0 3px var(--app-accent-soft); }
.app-textarea { display: block; width: 100%; min-height: 84px; resize: vertical; border: 0; background: transparent; padding: 10px 12px; line-height: 1.6; }
.app-textarea:focus { box-shadow: none; outline: none; }
.app-compose__ft { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 6px 8px 8px; }

/* 내부 메모 (오른쪽) — 노란 칸 하나로 고객 대화와 떼어 놓는다 */
.app-memo { background: var(--app-memo); border-color: var(--app-memo-line); }
.app-memo .app-panel__hd h2 { display: inline-flex; align-items: center; gap: 4px; color: var(--app-memo-ink); }
.app-memo .app-panel__hd h2 i { font-size: 18px; }
.app-memo__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.app-memo__item { padding-bottom: 12px; border-bottom: 1px solid var(--app-memo-line); }
.app-memo__item:last-child { padding-bottom: 0; border-bottom: 0; }
.app-memo__who { display: flex; align-items: center; gap: 6px; }
.app-memo__who b { font-weight: 600; }
.app-memo__bd { margin-top: 6px; white-space: pre-wrap; word-break: break-word; line-height: 1.6; }
.app-memo .app-empty-sm { color: var(--app-memo-sub); }
.app-compose--memo { margin-left: 0; border-color: var(--app-memo-line); }
.app-compose--memo:focus-within { border-color: var(--app-memo-focus); box-shadow: 0 0 0 3px var(--app-memo-ring); }
/* 배포 기록 (2026-09-30) — 시스템 화면 목록의 들어간 요청 한 줄씩, 기록 창의 열별 고르기 */
.app-deploy__reqs { list-style: none; margin: 6px 0 0; padding: 0; }
.app-deploy__reqs li { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 2px 0; }
.app-deploy__reqs a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-dp-group + .app-dp-group { margin-top: 12px; }
.app-dp-group__hd { margin-bottom: 4px; color: var(--app-sub); font-size: var(--app-fs-meta); font-weight: 600; }
.app-dp-item { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.app-dp-item:hover { background: var(--app-surface-2); }
.app-dp-item .form-check-input { flex: none; margin: 0; }
.app-dp-item__t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-dp-item .badge { flex: none; }

/* 내부 메모 @부르기 — 쓰기 칸 아래 사람 목록(↑↓·Enter), 메모 글의 @이름 (2026-09-30) */
.app-compose--memo { position: relative; }
.app-mention-menu { left: 8px; top: 100%; margin-top: 4px; min-width: 220px; max-height: 280px; overflow-y: auto; }
.app-mention-menu .app-pop__item.is-active { background: var(--app-surface-2); }
.app-mention { color: var(--app-memo-ink); font-weight: 600; }
.app-btn--memo { background: var(--app-memo-ink); border-color: var(--app-memo-ink); color: #fff; }
.app-btn--memo:hover { background: var(--app-memo-ink-hover); border-color: var(--app-memo-ink-hover); }

/* 오른쪽 속성 */
.app-props { background: var(--app-surface); border: 1px solid var(--app-line); border-radius: 12px; padding: 8px 8px 10px; }
.app-prop { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 40px; padding: 2px 10px; }
.app-prop + .app-prop { border-top: 1px solid var(--app-surface-2); }
.app-prop__k { color: var(--app-sub); }
.app-prop__v { min-width: 0; display: flex; align-items: center; gap: 8px; }
.app-prop__v .sub { color: var(--app-sub); font-size: var(--app-fs-meta); }
.app-ghost {
  appearance: none; flex: 1; min-width: 0; width: 100%; height: 34px; padding: 0 28px 0 8px; border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--app-text); font-weight: 500;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%239aa2b1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 14px;
}
.app-prop__v > .app-ghost:first-child { margin-left: -8px; }
.app-prop__v > .app-prio + .app-ghost { margin-left: -4px; }
.app-ghost:hover { background-color: var(--app-surface-2); }
.app-ghost:focus { outline: none; border-color: var(--app-accent); background-color: var(--app-surface); }
input.app-ghost { background-image: none; padding-right: 8px; width: auto; flex: 1; min-width: 0; }
input.app-ghost::-webkit-calendar-picker-indicator { opacity: .5; cursor: pointer; }
/* 날짜 칸은 폭을 고정해 기한·반영 예정일의 달력 표시가 같은 자리에 오게 한다 (옆의 마감 표시·지우기 버튼은 뒤에 붙는다) */
input[type="date"].app-ghost { flex: none; width: 148px; }
/* 속성의 시스템 링크, 댓글·내부 메모 안 요청 번호 링크(app.linkNos) */
.app-prop__v .app-link, .app-chat__bubble .app-link, .app-memo__bd .app-link { color: var(--app-accent-text); font-weight: 500; }
.app-prop__v .app-link:hover, .app-chat__bubble .app-link:hover, .app-memo__bd .app-link:hover { text-decoration: underline; }
.app-assign { position: relative; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; }
.app-assign__btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; background: none; padding: 4px 8px; margin-left: -8px; border-radius: 6px; text-align: left; min-width: 0; flex-wrap: wrap; }
.app-assign__btn:hover { background: var(--app-surface-2); }
.app-persons { display: flex; flex-wrap: wrap; gap: 6px 12px; min-width: 0; }
.app-person { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; white-space: nowrap; }
.app-hint { color: var(--app-sub); font-size: var(--app-fs-meta); }
.app-hint i { font-size: 14px; vertical-align: -2px; }

/* 하위 카드 */
.app-kids__sum { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: var(--app-sub); font-size: var(--app-fs-meta); }
.app-kids__sum b { color: var(--app-text); }
.app-kids { list-style: none; margin: 0; padding: 0; }
.app-kids li { display: flex; align-items: center; gap: 8px; min-height: 40px; border-top: 1px solid var(--app-surface-2); }
.app-kids li:first-child { border-top: 0; }
.app-kids .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.app-kids .t:hover { color: var(--app-accent-text); }
.app-kids .app-ghost { flex: none; width: auto; max-width: 112px; margin-left: 0; height: 30px; font-size: var(--app-fs-meta); padding-left: 6px; }
.app-kidadd { display: flex; gap: 6px; margin-top: 10px; }
.app-kidadd .app-input { flex: 1; height: 32px; }

/* 작업 시간 */
.app-hours { font-size: var(--app-fs-h); font-weight: 700; }
.app-wl { list-style: none; margin: 0; padding: 0; }
.app-wl li { display: grid; grid-template-columns: 44px 38px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 34px; font-size: var(--app-fs-meta); border-top: 1px solid var(--app-surface-2); }
.app-wl li:first-child { border-top: 0; }
.app-wl .d { color: var(--app-sub); }
.app-wl .h { font-weight: 700; }
.app-wl .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-wl .n span { color: var(--app-sub); }
.app-wl .x { border: 0; background: none; color: var(--app-faint); padding: 2px; border-radius: 4px; display: inline-flex; }
.app-wl .x:hover { color: var(--app-red); background: var(--app-red-soft); }
.app-wlform { display: grid; grid-template-columns: 1fr 72px auto; gap: 6px; margin-top: 12px; }
.app-wlform .app-input, .app-wlform .app-select { height: 32px; font-size: var(--app-fs-meta); padding: 0 8px; }
.app-wlform .app-select { padding-right: 26px; }
.app-wlform .full { grid-column: 1 / -1; }
.app-empty-sm { color: var(--app-sub); font-size: var(--app-fs-meta); }

/* 팝오버·메뉴 */
.app-pop__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 0; background: none; border-radius: 6px; text-align: left; }
.app-pop__item:hover { background: var(--app-surface-2); }
.app-pop__item.is-danger { color: var(--app-red); }
.app-pop__item .sub { margin-left: auto; color: var(--app-sub); font-size: var(--app-fs-meta); }
.app-pop__item input { margin: 0; accent-color: var(--app-accent); width: 16px; height: 16px; }
.app-pop__ft { display: flex; justify-content: flex-end; gap: 6px; padding: 8px 4px 2px; border-top: 1px solid var(--app-line); margin-top: 6px; }
.app-pop__label { padding: 6px 10px 4px; color: var(--app-faint); font-size: var(--app-fs-meta); font-weight: 600; }

/* ── 좁은 화면 ── */
@media (max-width: 1100px) {
  .app-lhead, .app-row { grid-template-columns: 20px 92px minmax(0, 1fr) 84px 96px; }
  .app-row__sys, .app-row__upd, .app-lhead .c-sys, .app-lhead .c-upd { display: none; }
}
@media (max-width: 960px) {
  .app-vgrid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "props" "main" "rest"; grid-template-rows: none; }
}
@media (max-width: 860px) {
  .app-toolbar__end { margin-left: 0; width: 100%; }
  .app-search { flex: 1; }
  .app-search input { width: 100%; }
}
@media (max-width: 575px) {
  .app-col { flex-basis: 84vw; width: 84vw; }
  .app-lhead { display: none; }
  .app-row { grid-template-columns: 20px minmax(0, 1fr) auto; row-gap: 2px; padding: 8px 12px; }
  .app-row__no, .app-row__who, .app-kidgap { display: none; }
  .app-row__due { grid-column: 2 / 3; }
  .app-vhead { flex-direction: column; gap: 10px; }
  /* 앱 배포·업무 보드 머리 — 제목과 단추를 한 줄에, 설명·요약은 그 아래 한 줄로. 설명이 제목 옆 좁은 칸에서 꺾이고
     단추는 또 다음 줄로 내려가 머리가 세 줄이었다(2026-09-30). 묶음(lead)을 풀어 아이콘·제목·설명·단추가 한 줄 흐름에 선다 */
  .app-head--stack { align-items: center; row-gap: 4px; }
  .app-head--stack .maba-page-head__lead, .app-head--stack .maba-page-head__lead > div { display: contents; }
  .app-head--stack .maba-page-head__actions { order: 1; }
  .app-head--stack .maba-page-head__sub { order: 2; flex: 1 1 100%; margin-top: 0; }
  .app-feed::before { display: none; }
  .app-chat__msg.is-us .app-chat__av { display: none; }
  .app-chat__col { max-width: 86%; }
  /* 요청 속성 이름 칸 — 가장 긴 '반영 예정일'에 맞춰 줄여 값 칸(날짜 + "2일 지남")에 자리를 준다 */
  .app-prop { grid-template-columns: 72px minmax(0, 1fr); }
}

/* ── 끌어서 순서 바꾸는 목록 (보드 열 설정·답변 템플릿·배포 대상) ── */
.app-col-edit, .app-tpl-list, .app-tgt-edit { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.app-col-edit li { display: grid; grid-template-columns: 24px 1fr 110px 150px 32px; gap: 6px; align-items: center; }
.app-tgt-edit li { display: grid; grid-template-columns: 24px 1fr 32px; gap: 6px; align-items: center; }
.app-tpl-list > li { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border: 1px solid var(--maba-border); border-radius: var(--maba-radius-sm); background: var(--maba-surface); }
.app-handle { cursor: grab; color: var(--maba-text-sub); font-size: 18px; line-height: 1; }

/* ── 비밀번호 규칙 ── */
.app-pw-rules { list-style: none; margin: 6px 0 0; padding: 0; color: var(--maba-text-sub); }
.app-pw-rules li.is-ok { color: var(--maba-green); }

/* ── 계정 탭 줄 — 탭(꽉 찬 탭 · 카운트 배지) + 검색칸 (a-accounts.jsp) ──
   폰·태블릿 세로는 탭이 폭을 나누고 검색칸은 아래 줄. PC(768px~)는 탭을 글자 길이만큼 왼쪽에(꽉 채우면 한 칸이 300px 가까이),
   검색칸은 같은 줄 오른쪽 끝, 밑줄은 줄 전체에 (2026-09-30) */
.app-tabbar { display: flex; flex-direction: column; gap: 12px; }
.app-tabbar > .maba-f-search { margin-left: auto; }
@media (min-width: 768px) {
  .app-tabbar { flex-direction: row; align-items: center; border-bottom: 1px solid var(--maba-border); }
  .app-tabbar > .nav-tabs { align-self: stretch; border-bottom: 0; }
  .app-tabbar > .nav-tabs .nav-item { flex: 0 0 auto; }
}

@media (max-width: 575.98px) {
  .app-col-edit li { grid-template-columns: 24px 1fr 32px; }
  .app-col-edit li > :nth-child(3), .app-col-edit li > :nth-child(4) { grid-column: 2 / 3; }
  /* 답변 템플릿 본문 미리보기 — 폰은 두 줄까지(전체는 [수정] 창에서) */
  .app-tpl-body { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  /* 리포트 거르기 — 폰은 빠른 기간(가득) / 시작~종료 / 발주처 / 시스템, 칸은 줄 끝까지 (2026-09-30 — 칸 폭이 제각각으로 흩어졌다.
     발주처·시스템을 나란히 두면 고른 이름이 잘려 한 줄씩) */
  .app-rp-filter { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .app-rp-period { display: grid !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .app-rp-period > .form-label { display: none; }
  .app-rp-period .maba-f-date { width: 100%; }
  .app-rp-period > .btn-group { grid-row: 1; grid-column: 1 / -1; }
  .app-rp-period > .btn-group > .btn { flex: 1; }
  .app-rp-sel { min-width: 0; }
  .app-rp-sel .form-select { width: 100% !important; min-width: 0; }
  /* 프로젝트 단계 — 폰은 점(24px)만 잇고 이름은 숨김(지금 단계 이름은 아래 한 줄, a-project-view.js) */
  .app-pj-steps .step-label { display: none; }
  .app-pj-steps .step-dot { width: 24px; height: 24px; margin-bottom: 0; font-size: 12px; }
  .app-pj-steps > li::before { top: 11px; left: calc(-50% + 14px); right: calc(50% + 14px); }
  /* 계정 탭(꽉 찬 탭) — 폰은 셋을 한 줄에: 좌우 여백을 줄이고 '(발주처)'는 숨김(a-accounts.jsp). 그대로면 412px에서도 두 줄로 꺾였다 */
  .nav-tabs.app-tabs-fill { flex-wrap: nowrap; gap: 0; }
  .nav-tabs.app-tabs-fill .nav-link { padding-left: 4px; padding-right: 4px; white-space: nowrap; }
}
@media (max-width: 767.98px) {
  /* 프로젝트 연결 요청 — 폰·태블릿 세로는 제목 한 줄, 넘치면 …(자물쇠는 끝에 남김). 표를 고정 폭으로 해야 칸이 늘지 않고 잘린다 */
  .app-pj-reqs { table-layout: fixed; }
  .app-pj-title { display: flex; align-items: center; gap: 4px; min-width: 0; }
  .app-pj-title > a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .app-pj-title > i { flex: none; }
  /* 공지 목록 — 폰·태블릿 세로는 제목 칸 + ⋯ 칸, 대상(발주처 이름) 줄은 넘치면 …(a-notices.js). 고정 폭이라야 잘린다 */
  .app-nt-list { table-layout: fixed; }
  .app-nt-list .app-nt-act { width: 56px; }
  .app-nt-target { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* 앱 상세 버전·공유 링크 — 폰·태블릿 세로는 한 칸 묶음(a-app-view.js), 바뀐 내용·주소는 한 줄에서 … */
  .app-apk-vlist, .app-apk-slist { table-layout: fixed; }
  .app-apk-vlist .app-apk-memo-m, .app-apk-slist .app-apk-share__url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-apk-slist .app-apk-share { min-width: 0; }
}

/* ══ 차분한 톤 (2026-09-27 이실장님: 화려한 것보다 업무 보드 시안처럼 차분하게) ══
   템플릿 코어는 그대로 두고, 템플릿 부품의 색만 이 앱에서 낮춘다. 부품 모양·동작은 템플릿 그대로.
   원칙: 색은 뜻이 있을 때만(기한·상태·위험), 고른 것은 먹색, 파란 채움은 화면의 주 동작 단추만.
   (템플릿 "차분한 테마"로 옮길 후보 — 옮기면 이 구역은 지운다) */
/* 제목 아이콘 — 파란 상자 → 회색 (템플릿이 열어 둔 매개변수) */
:root { --maba-hd-icon: var(--maba-text-sub); }

/* 왼쪽 메뉴 — 어두운 바탕 → 밝은 바탕, 고른 메뉴는 옅은 파랑 (색 테마를 따로 고르지 않은 기본 상태만, 다크 모드는 토큰이 따라간다) */
body:not([data-maba-sidebar]) {
  --maba-sidebar-bg: var(--maba-surface);
  --maba-sidebar-text: color-mix(in srgb, var(--maba-text) 88%, var(--maba-surface));
  --maba-sidebar-group: var(--maba-text-sub);
  --maba-sidebar-hover: color-mix(in srgb, var(--maba-text) 6%, transparent);
}
body:not([data-maba-sidebar]) .maba-sidebar { border-right: 1px solid var(--maba-border); }
body:not([data-maba-sidebar]) .maba-sidebar__brand { color: var(--maba-text); border-bottom-color: var(--maba-border); }
body:not([data-maba-sidebar]) .maba-sidebar__link:hover,
body:not([data-maba-sidebar]) .maba-sidebar__sub a:hover { color: var(--maba-text); }
body:not([data-maba-sidebar]) .maba-sidebar__link.active,
body:not([data-maba-sidebar]) .maba-sidebar__sub a.active {
  background: color-mix(in srgb, var(--maba-primary) 10%, var(--maba-surface));
  color: var(--app-accent-text); border-left-color: var(--maba-primary);
}

/* 보조 단추(회색·파랑 테두리) — 흰 바탕 + 연한 선, 올리면 옅은 회색, 고르면 먹색 (시안 칩과 같게) */
.btn-outline-gray, .btn-outline-blue { --maba-btn-bg: var(--maba-text); --maba-btn-fg: var(--maba-surface); border-color: var(--maba-border); color: var(--maba-text); }
.btn-outline-gray:hover, .btn-outline-blue:hover { background-color: color-mix(in srgb, var(--maba-text) 6%, var(--maba-surface)); border-color: var(--maba-border); color: var(--maba-text); }

/* 알약 탭(계정·내 요청의 전체/내부/고객) — 고른 탭은 파랑 채움 → 먹색 (시안 '전체' 칩과 같게), 안 고른 탭은 본문색 */
.nav-pills { --bs-nav-pills-link-active-bg: var(--maba-text); --bs-nav-pills-link-active-color: var(--maba-surface); --bs-nav-link-color: var(--maba-text-sub); --bs-nav-link-hover-color: var(--maba-text); }

/* 숫자 카드 아이콘 — 꽉 찬 색 상자 → 옅은 바탕 + 색 아이콘 (색의 뜻은 남긴다) */
.maba-stat-icon { color: var(--maba-stat-c, var(--maba-primary)); background: color-mix(in srgb, var(--maba-stat-c, var(--maba-primary)) 12%, var(--maba-surface)); }

/* 체크·입력칸 포커스 — 부트스트랩 기본 파랑(#0d6efd)이 남은 곳을 주 색으로 */
.form-check-input:checked, .form-check-input[type="checkbox"]:indeterminate { background-color: var(--maba-primary); border-color: var(--maba-primary); }
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: color-mix(in srgb, var(--maba-primary) 55%, var(--maba-surface));
  box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--maba-primary) 20%, transparent);
}

/* ══ spring-template 관리 화면(공통코드·접근 IP·감사 로그)이 쓰는 것 — 템플릿 app.css 에서 가져옴 ══ */
/* 권한 밖 요소 숨김 — 첫 페인트부터 (data-maba-role 깜빡임 방지). LoginInterceptor 가 <body data-app-role> 을 찍는다 */
body[data-app-role="admin"] [data-maba-role]:not([data-maba-role*="admin"]),
body[data-app-role="developer"] [data-maba-role]:not([data-maba-role*="developer"]),
body[data-app-role="executive"] [data-maba-role]:not([data-maba-role*="executive"]),
body[data-app-role="requester"] [data-maba-role]:not([data-maba-role*="requester"]),
body[data-app-role="customer"] [data-maba-role]:not([data-maba-role*="customer"]) { display: none !important; }
/* 필수 표시 */
.app-reqmark { color: var(--maba-red); font-weight: 700; }
/* 검색바 — 라벨 없이 placeholder 만, 필드는 고정폭(좁아지면 줄바꿈) */
.app-search-field { flex: 0 0 170px; width: 170px; }
.app-search-field--sm { flex-basis: 170px; width: 170px; }
.app-search-field--grow { flex: 1 1 320px; width: auto; min-width: 220px; max-width: 520px; }
/* 목록 화면 폭 — 헤더와 카드를 같은 폭으로 */
.app-list-head,
.app-list-card { max-width: 1380px; }
.app-list-card .tabulator-col-title-holder { justify-content: center; }
/* 표 안 단추 칸(폭 50) — 기본 좌우 여백 12px면 단추(35px)가 넘쳐 옆에 말줄임 점이 찍혔다(공통코드, 2026-09-30) */
.tabulator .tabulator-row .tabulator-cell.app-cell-btn { padding-left: 4px; padding-right: 4px; }
/* 감사 로그 검색 줄(audit-*.jsp) — PC는 한 줄(검색어가 남는 폭). 폰은 시작~종료 / 결과(행위)·검색어·조회로 묶어
   조건이 한 줄씩 쌓여 표 위 210~250px을 차지하던 것을 줄임(2026-09-30) */
.app-au-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.app-au-period { display: flex; align-items: center; gap: 8px; }
.app-au-filter > .app-au-q { flex: 1 1 200px; width: auto; min-width: 200px; }
@media (max-width: 575.98px) {
  .app-au-period { flex: 1 1 100%; min-width: 0; }
  .app-au-period > .form-control { flex: 1 1 0; width: auto; min-width: 0; }
  .app-au-filter > .form-select { flex: 0 0 116px; width: 116px; }
  .app-au-filter > .app-au-target { flex: 1 1 calc(100% - 124px); width: auto; min-width: 0; }   /* 개인정보 로그 — 검색어·조회는 다음 줄 */
  .app-au-filter > .app-au-q { flex: 1 1 0; min-width: 0; }
}
/* 감사 로그 표 — 폰에서 접힌 값(브라우저 정보·URI)이 길면 줄을 바꾸고 두 줄까지만(한 줄로 두면 표가 옆으로 835px까지 늘었다) */
.app-au-grid .tabulator-responsive-collapse td:first-child { white-space: nowrap; }
.app-au-grid .tabulator-responsive-collapse td:last-child { white-space: normal; overflow-wrap: anywhere; }
.app-au-grid .tabulator-responsive-collapse .maba-text-sm { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* 방금 바뀐 행 강조 */
.app-row-flash > td { animation: app-row-flash 2s ease-out; }
@keyframes app-row-flash {
  0%, 30% { background: color-mix(in srgb, var(--maba-primary), transparent 86%); }
  100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) { .app-row-flash > td { animation: none; } }
/* 사용여부 토글 — 스위치 자체는 클릭을 받지 않고 감싼 영역이 받는다 */
.app-use-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.app-use-toggle .form-check-input { pointer-events: none; }
.app-use-toggle .lbl { font-size: 13.5px; font-weight: 600; color: var(--maba-text-sub); }
.app-use-toggle.on .lbl { color: var(--maba-primary); }
/* 환경 배지(탑바 안) — local·dev 에서만. 운영(real)은 그리지 않는다 */
.app-env-badge { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #fff; flex: none; }
.app-env-badge--local { background: var(--maba-gray-600); }
.app-env-badge--dev { background: var(--maba-orange); }
.app-env-banner { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 4px 12px; color: #fff; }
.app-env-banner--local { background: var(--maba-gray-600); }
.app-env-banner--dev { background: var(--maba-orange); }

/* 사이드바 브랜드를 첫 화면 링크로(퍼블리싱은 글자) — 링크 밑줄·색 없이 */
a.maba-sidebar__brand, a.maba-sidebar__brand:hover { text-decoration: none; }

/* ── APK 배포 — 앱 배포·앱 상세·고객 앱 받기·공유 페이지 (docs/APK-배포페이지-검토.md) ── */
.app-apk-memo { display: inline-block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.app-apk-cert { word-break: break-all; }
/* 앱 목록 앱 이름 칸 — 폰에서 이름이 길면 낱말 단위로 줄을 바꿔 [받기]가 옆으로 밀리지 않게 */
.app-apk-name { word-break: keep-all; }
/* [받기] 전에 뜨는 바뀐 내용 — 길면 창 안에서 스크롤 */
.app-apk-memo-pop { max-height: 50vh; overflow-y: auto; text-align: left; }
/* 공유 링크 이름 칸 — 주소가 아무 데서나 끊겨 칸이 한 글자 폭으로 줄던 것(모바일) → 폭을 잡고 주소만 그 안에서 끊는다 */
.app-apk-share { min-width: 160px; word-break: keep-all; }
.app-apk-share__url { word-break: break-all; }
.app-apk-dl dt { width: 130px; }
.app-apk-qr { width: 220px; max-width: 100%; aspect-ratio: 1; }
.app-apk-get { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.app-apk-get__name { font-size: var(--app-fs-h); font-weight: 600; }
.app-apk-guide > summary, .app-apk-old-wrap > summary { cursor: pointer; font-weight: 500; }
.app-apk-guide { margin-top: 16px; }
.app-apk-steps { margin: 10px 0 0; padding-left: 20px; }
.app-apk-steps li + li { margin-top: 6px; }
.app-apk-old-wrap { margin-top: 16px; }
.app-apk-old { margin: 8px 0; padding: 0; list-style: none; }
.app-apk-old li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--app-line); }
/* 공유 페이지 — 로그인 없이 여는 한 장(로그인 화면처럼 가운데 카드). 폰이 먼저, PC 는 아래에 QR */
.app-share { min-height: 100vh; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 48px var(--maba-space-4); background: var(--maba-bg); }
.app-share__card { width: 100%; max-width: 520px; background: var(--maba-surface); border: 1px solid var(--maba-border); border-radius: var(--maba-radius); box-shadow: var(--maba-shadow-lg); padding: var(--maba-space-6); }
.app-share__brand { display: flex; align-items: center; gap: 10px; margin-bottom: var(--maba-space-4); }
.app-share__brand .app-brand__logo { width: 28px; height: 28px; }
.app-share__app { margin: 0 0 4px; font-size: var(--app-fs-title); font-weight: 700; }
.app-share__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.app-share__memo { margin-top: 14px; padding: 12px; border-radius: var(--maba-radius); background: var(--maba-bg); }
.app-share__off { text-align: center; padding: 20px 0 8px; }
.app-share__off .ti { font-size: 40px; color: var(--app-sub); }
.app-share__qr { width: 100%; max-width: 520px; display: flex; align-items: center; gap: 16px; padding: 16px; background: var(--maba-surface); border: 1px dashed var(--app-line-strong); border-radius: var(--maba-radius); }
.app-share__qr-img { flex: none; width: 140px; height: 140px; }
.app-share__qr-img svg { display: block; width: 100%; height: 100%; }
@media (max-width: 575.98px) {
  .app-share { padding: 16px 12px; }
  .app-share__card { padding: var(--maba-space-4); }
  .app-apk-memo { max-width: 160px; }
  .app-apk-dl dt { width: 96px; }
}