:root {
  --navy-950: #07111f;
  --navy-900: #0a1a2c;         /* 표 */
  --navy-800: #11233a;
  --line: #263d57;
  --cyan: #25d4f4;
  --cyan-soft: #9beeff;
  --gold: #efd17e;
  --on-fill: #17200f;      /* 채워진 버튼 글자 — 이 자리에만 */
  --text: #f5f8fc;
  --muted: #9cafc5;
  --danger: #ff7d83;
  --success: #7ee0b0;
  --accent-bg: rgba(37,212,244,.07);   /* 강조 영역 · 안내문 */
  --surface: #11233a;          /* 패널 — 규정 배경색 4단계 중 하나 */
}

* { box-sizing: border-box; }
html { min-width: 1024px; background: var(--navy-950); }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 82% 5%, rgba(37, 212, 244, .08), transparent 28rem),
    var(--navy-950);
  font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", Arial, sans-serif;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
.mobile-notice { display: none; }
.shell { min-height: 100vh; display: grid; grid-template-columns: 238px minmax(0, 1fr); }
.sidebar {
  position: sticky; top: 0; height: 100vh; padding: 18px 16px;
  display: flex; flex-direction: column; overflow-y: auto;
  background: var(--navy-950); border-right: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; margin: 0 8px 18px; }
.brand-mark { color: var(--cyan); font-weight: 900; font-size: 24px; letter-spacing: -.06em; }
.brand-copy strong { display: block; font-size: 14px; }
.brand-copy span { color: var(--muted); font-size: 13px; letter-spacing: .08em; }
.nav { display: grid; gap: 3px; }
.nav a {
  padding: 9px 12px; border: 1px solid transparent; color: var(--text); font-weight: 700;
}
.nav a:hover, .nav a.active { color: var(--text); border-color: var(--line); background: var(--navy-800); }
.sidebar-user { position: static; margin-top: auto; padding-top: 12px; color: var(--muted); font-size: 13px; }
.sidebar-user strong { display: block; color: var(--text); margin-bottom: 4px; }
.logout { margin-top: 12px; padding: 8px 0; color: var(--cyan-soft); border: 0; background: none; cursor: pointer; }
.main { min-width: 0; width: 100%; padding: 36px clamp(32px, 5vw, 78px) 72px; }
.page-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 28px; }
.eyebrow { margin: 0 0 8px; color: var(--cyan-soft); font-size: 13px; font-weight: 800; letter-spacing: .16em; }
h1 { margin: 0; font-size: 34px; letter-spacing: -.04em; }
.subcopy { color: var(--muted); margin: 10px 0 0; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; }
/* 버튼 규격 — 채워진 것까지 **모두 같은 크기**다(D-023).
   크기로 중요도를 표시하지 않는다. 뜻은 모양(채워짐/테두리만/붉은 글자)으로 나눈다.
   .small은 남겨 두되 규격은 같다 — 예전 화면이 쓰고 있어서 클래스만 유지한다. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 28px; min-height: 28px; min-width: 4.5rem;
  padding: 0 10px; border: 1px solid #4a6d89; background: transparent;
  color: var(--text); font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer;
}
/* 채워진 버튼 — 화면이 넘어가는 주된 동작. 한 구역에 하나만 둔다.
   대표 결정 2026-08-05(D-040 2차): **금색으로 채운다.** 테두리만 있는 버튼과
   모양으로 구분되어야 '채워짐'이라는 규정의 뜻이 산다.
   금색 바탕 위에서는 규정의 밝은 여섯 색이 모두 읽히지 않으므로,
   이 자리에만 쓰는 글자색(onfill #17200f)을 규정에 일곱 번째로 넣었다. */
.btn.primary { color: var(--on-fill); border-color: var(--gold); background: var(--gold); }
/* 되돌리기 어려운 것 — 일부러 눈에 덜 띄게 해서 실수 클릭을 줄인다. */
.btn.danger { color: var(--danger); border-color: rgba(255,125,131,.55); }
.btn.small { height: 28px; min-height: 28px; padding: 0 10px; font-size: 14px; }
.panel { padding: 24px; border: 1px solid var(--line); background: var(--surface); }
.grid { display: grid; gap: 18px; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat { padding: 22px; border-top: 2px solid var(--cyan); background: var(--surface); }
/* 집계 숫자는 **일반 내용**이다. 하늘색은 규정에서 '코드·항목명'의 색이다(글자색 규정).
   뜻이 다른 자리에 같은 색을 쓰면 색으로 뜻을 읽을 수 없게 된다. */
.stat b { display: block; margin-top: 8px; font-size: 34px; color: var(--text); }
.stat span { color: var(--muted); font-size: 13px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; background: rgba(9, 24, 41, .72); }
th, td { padding: 14px 16px; text-align: left; border-bottom: 1px solid rgba(38,61,87,.72); vertical-align: middle; }
th { color: var(--cyan-soft); font-size: 13px; letter-spacing: .07em; }
td { color: var(--text); font-size: 14px; }
tr:last-child td { border-bottom: 0; }
/* 상태 표시 — **테두리를 두르지 않는다**(D-022).
   글자를 감싼 네모는 '클릭할 수 있는 것'의 표시로만 쓴다. 상태에 네모를 두르면
   눌러도 아무 일이 없어 사람이 한 번은 눌러 본다. 뜻은 색이 전한다. */
.status {
  display: inline-block; box-sizing: border-box;
  min-width: 3rem; padding: 0 6px; height: 24px; line-height: 24px;
  text-align: center; vertical-align: middle; white-space: nowrap;
  color: var(--success); border: 0; font-size: 13px;
}
.status.closed, .status.deleted { color: var(--muted); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; align-items: start; }
.field { display: grid; gap: 7px; align-content: start; }
.field.full { grid-column: 1 / -1; }
label { color: var(--text); font-size: 13px; font-weight: 700; }
input, select, textarea {
  width: 100%; padding: 12px 13px; color: var(--text); background: var(--navy-950);
  border: 1px solid #35506a; outline: none;
}
input[type="checkbox"] { width: auto; margin: 0 8px 0 0; accent-color: var(--cyan); }
input:focus, select:focus, textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(37,212,244,.12); }
textarea { min-height: 110px; resize: vertical; }
.form-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.filter { display: flex; gap: 10px; margin-bottom: 18px; }
.filter input { max-width: 420px; }
.flash { margin: 0 0 22px; padding: 14px 16px; border-left: 1px solid var(--line); background: var(--accent-bg); }
.flash.error { border-color: var(--danger); background: rgba(255,125,131,.1); }
.detail-list { display: grid; grid-template-columns: 160px 1fr; gap: 0; margin: 0; }
.detail-list dt, .detail-list dd { margin: 0; padding: 11px 0; border-bottom: 1px solid rgba(38,61,87,.6); }
.detail-list dt { color: var(--muted); }
.empty { padding: 44px 20px; text-align: center; color: var(--muted); }
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 40px; }
.login-card { width: min(460px, 100%); padding: 42px; border: 1px solid var(--line); background: var(--navy-900); }
.login-card h1 { margin-bottom: 8px; }
.login-card .field { margin-top: 18px; }
.login-card .btn { width: 100%; margin-top: 24px; }
.muted { color: var(--muted); }
.section-title { margin: 0 0 16px; font-size: 20px; }
.mt { margin-top: 24px; }
.mt-sm { margin-top: 8px; }
.inline-form { display: inline-flex; }
.subrow td { padding: 18px; background: var(--navy-950); }
.compact-form { display: grid; grid-template-columns: minmax(220px, 1fr) auto; gap: 10px; align-items: end; }
.compact-form label { min-width: 0; }
.integration-state { padding: 20px; border-left: 1px solid var(--line); background: var(--accent-bg); }
.integration-state.ready { border-color: var(--success); background: rgba(126, 224, 176, .08); }
.integration-state strong { color: var(--gold); }
.integration-state.ready strong { color: var(--success); }
.integration-state p { margin: 8px 0 0; color: var(--muted); line-height: 1.65; }
pre { margin: 0; max-width: 420px; white-space: pre-wrap; color: var(--text); }

@media (max-width: 599px) {
  html { min-width: 0; }
  .mobile-notice {
    position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
    padding: 28px; text-align: center; background: var(--navy-950);
  }
  .mobile-notice strong { display: block; margin-bottom: 12px; font-size: 24px; color: var(--cyan); }
  .shell, .login-page { display: none; }
}

/* v1.5: project tabs / 4-col stats / delayed badge */
.ptabs { display: flex; gap: 4px; margin: 0 0 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ptabs a { padding: 10px 16px; color: var(--muted); font-size: 14px; border: 1px solid transparent; border-bottom: none; }
.ptabs a:hover { color: #e6eef7; }
.ptabs a.active { color: var(--cyan-soft); border-color: var(--line); background: var(--navy-900); border-radius: 6px 6px 0 0; font-weight: 700; }
.grid.cols-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.status.delayed { color: var(--danger); }
.sidebar-user a.muted { display: block; margin: 3px 0; font-size: 13px; color: var(--muted); }

/* v1.7: company logo branding + dashboard filter panel */
.brand { flex-direction: column; align-items: flex-start; gap: 10px; }
.brand-logo { display: block; width: 158px; max-width: 100%; height: auto; }
.brand-sub { color: var(--muted); font-size: 13px; letter-spacing: .18em; }
.login-logo { display: block; width: 230px; max-width: 82%; height: auto; margin: 0 0 20px; }
.dash-filter { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; padding: 16px 20px; }
.dash-filter form { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.filter-label { display: inline-flex; gap: 8px; align-items: center; color: var(--muted); font-size: 13px; white-space: nowrap; }
.panel-head .muted { font-size: 13px; }

/* v1.8: customer form sections */
.form-section { grid-column: 1 / -1; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; letter-spacing: .02em; color: var(--cyan); }
.form-grid .form-section:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.form-hint { grid-column: 1 / -1; margin: -6px 0 0; color: var(--muted); font-size: 13px; }
.form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; }
.radio-row { display: flex; gap: 18px; align-items: center; min-height: 42px; }
.radio-row label { display: inline-flex; gap: 7px; align-items: center; font-weight: 400; white-space: nowrap; }
.page-head .actions { display: flex; gap: 10px; align-items: center; }
.head-status { font-size: 13px; padding: 6px 12px; }
/* 필수 표시 — 네모를 두르지 않는다. 네모는 '클릭할 수 있는 것'의 표시다(규정 선.클릭테두리).
   금색 글자만으로 충분히 눈에 띈다(고객 화면은 이미 그렇게 되어 있었다). */
.req-tag { display: inline-block; margin-left: 6px; font-size: 13px; font-weight: 700; color: var(--gold); vertical-align: 1px; }
.label-hint { margin-left: 8px; font-size: 13px; font-weight: 400; }
.project-title-row { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(25rem, 1fr) 180px minmax(17rem, 22rem); gap: 12px; align-items: start; }
.project-event { min-width: 0; }
.project-event .form-hint { margin: 5px 0 0; }
.project-test { min-width: 0; }
.project-test .check-item { padding: 9px 0; border: 0; background: transparent; }
.project-test .check-item:hover { border-color: transparent; }
.project-test-alert {
  border: 2px solid var(--danger); background: rgba(255, 91, 105, .09);
  padding: 16px 18px; margin-bottom: 8px;
}
.project-test-choice {
  display: flex; align-items: center; gap: 10px; color: var(--danger);
  font-size: 20px; line-height: 1.35; cursor: pointer;
}
.project-test-choice input { width: 20px; height: 20px; margin: 0; accent-color: var(--danger); }
.project-test-alert p { margin: 8px 0 0 30px; color: #ffb5bc; font-size: 14px; line-height: 1.55; }
.project-date-row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(190px, 1fr)); gap: 12px; align-items: start; }
.form-validation-summary { padding: 10px 0; color: var(--danger); font-weight: 700; }
.input-error { border-color: var(--danger) !important; }
.field-error { margin: 5px 0 0; color: var(--danger); font-size: 13px; }
.creation-complete strong { color: var(--cyan-soft); }
.project-created-highlight { border-top: 2px solid var(--success); }
.project-created-highlight p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; margin: 0; }
.project-created-highlight p span { color: var(--muted); font-size: 13px; }
.project-created-highlight p strong { color: var(--cyan-soft); font-size: 20px; }
.danger-zone { border-color: var(--danger); }

/* v1.8: 밀도 개선 — 여백 축소 + 한글 단어 단위 줄바꿈 */
body { word-break: keep-all; }
.main { padding: 24px clamp(24px, 3.5vw, 48px) 56px; }
.page-head { margin-bottom: 16px; }
h1 { font-size: 27px; }
.subcopy { margin-top: 5px; }
.panel { padding: 16px 20px; }
.section-title { margin: 0 0 10px; font-size: 16px; }
.mt { margin-top: 14px; }
th, td { padding: 9px 12px; }
th { letter-spacing: .04em; }
.stat { padding: 14px 16px; }
.stat b { margin-top: 4px; font-size: 34px; }
.grid { gap: 14px; }
.grid.cols-4 { gap: 12px; }
.form-grid { gap: 12px 16px; }
.ptabs a { padding: 8px 14px; }
.ptabs { margin-bottom: 14px; }
/* (규격은 위 .btn 한 곳에서만 정한다 — 여기서 다시 키우면 규격이 두 개가 된다) */
.detail-list dt, .detail-list dd { padding: 8px 0; }
.review-row { margin: 0 0 4px; padding: 10px 0 6px; border-bottom: 1px solid rgba(38,61,87,.4); }
.review-row:last-child { border-bottom: 0; }
.review-row h3 { margin: 0 0 6px; font-size: 14px; color: var(--cyan-soft); }
.review-row p { margin: 0 0 4px; line-height: 1.6; }
.form-section { margin-top: 10px; padding-top: 10px; }
.dash-filter { padding: 10px 16px; }

/* v1.9: 대리 입력 표시 + 비행허가 업로드 */
.proxy-tag { display: inline-block; padding: 2px 8px; font-size: 13px; font-weight: 700; color: var(--gold); border: 1px solid rgba(239,209,126,.5); border-radius: 3px; }
.none-check { display: inline-flex; gap: 6px; align-items: center; margin-top: 6px; font-weight: 400; color: var(--muted); font-size: 13px; }
.permit-upload-btn { cursor: pointer; }
.permit-progress { margin-left: 8px; font-size: 13px; }

/* ── v1.9.1: 표 열 간격 통일 ──────────────────────────────────────────────
   모든 표에서 짧은 열(날짜·상태·수량·버튼)은 내용에 딱 맞게 붙고,
   지정한 한 열(grow-N)만 남는 폭을 흡수한다. 화면이 달라도 규칙이 같아
   열 간격이 항상 동일하게 보인다. */
th, td { white-space: nowrap; vertical-align: middle; }
.grow-1 th:nth-child(1), .grow-1 td:nth-child(1),
.grow-2 th:nth-child(2), .grow-2 td:nth-child(2),
.grow-3 th:nth-child(3), .grow-3 td:nth-child(3),
.grow-4 th:nth-child(4), .grow-4 td:nth-child(4),
.grow-5 th:nth-child(5), .grow-5 td:nth-child(5),
.grow-6 th:nth-child(6), .grow-6 td:nth-child(6),
.grow-7 th:nth-child(7), .grow-7 td:nth-child(7),
.grow-8 th:nth-child(8), .grow-8 td:nth-child(8),
.grow-9 th:nth-child(9), .grow-9 td:nth-child(9),
.grow-10 th:nth-child(10), .grow-10 td:nth-child(10),
.grow-11 th:nth-child(11), .grow-11 td:nth-child(11) { white-space: normal; width: 99%; }
.subrow td, td[colspan] { white-space: normal; }
td .btn { vertical-align: middle; }

/* 폼: 좌/우 분리 배치에서 각 패널은 한 줄에 한 항목씩 */
.form-grid.one { grid-template-columns: 1fr; }
.form-col .form-section { margin-top: 0; padding-top: 0; border-top: none; }

/* 사이드바 로고: 하단 문구까지 포함한 전체 로고 사용 */
.brand-logo { width: 190px; }
/* 안내문은 그리드 안에서만 위로 당긴다(제목과 겹침 방지) */
.form-hint { margin: 4px 0 10px; }
.form-grid > .form-hint { margin: -6px 0 0; }
.form-col > .form-hint { margin: 4px 0 10px; }
.seq-tag { display: inline-block; margin-left: 4px; font-size: 13px; color: var(--muted); }


/* v2.0-r3: 플로팅 라벨 — 항목명이 입력칸 안에 있다가 입력하면 위로 작게 이동(공간 절약) */
.field.float { position: relative; }
.field.float > input { padding: 22px 12px 8px; min-height: 52px; font-size: 14px; line-height: 1.2; }
.field.float > label {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  pointer-events: none; transition: all .15s ease; color: var(--muted); font-size: 13px; font-weight: 400;
}
.field.float > label .req-tag { font-size: 13px; padding: 1px 5px; }
.field.float > input:focus + label,
.field.float > input:not(:placeholder-shown) + label {
  top: 5px; transform: none; font-size: 13px; color: var(--muted); letter-spacing: .02em;
}
.field.float > input::placeholder { color: transparent; }
.field.float > input:focus::placeholder { color: #5b6b80; }
.field.static-label { position: relative; }
.field.static-label > label {
  position: absolute; top: 5px; left: 12px; z-index: 1; pointer-events: none;
  font-size: 13px; color: var(--muted); font-weight: 400; letter-spacing: .02em;
}
.field.static-label > label .req-tag { font-size: 13px; padding: 1px 5px; }
.field.static-label > select,
.field.static-label > input { padding: 22px 12px 8px; min-height: 52px; width: 100%; }
.field.static-label .form-hint { margin-top: 6px; }
/* 읽기 전용 표기 — 입력칸이 없으므로 라벨을 띄우지 않고 한 줄로 둔다.
   static-label을 쓰면 라벨이 절대 위치라 아래 글자와 포개진다. */
.field.readonly > label { display: block; margin-bottom: 4px; font-size: 13px; color: var(--muted); font-weight: 400; }
.field.readonly .form-hint { margin: 0; }

/* 기간 입력을 한 줄에 (시작 ~ 종료) — 다른 입력칸과 같은 '상자 하나' 형태로 통일 */
.date-pair {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid #35506a; background: var(--navy-950);
  padding: 20px 12px 6px; min-height: 52px;
}
.date-pair > input { flex: 1; border: 0; background: transparent; padding: 0; min-height: auto; }
.date-pair > input:focus { box-shadow: none; }
.date-pair > span { color: var(--muted); }
.field.static-label:focus-within > .date-pair { border-color: var(--cyan); }

/* 조밀 그리드(폼 공간 절약) */
.form-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; }
.form-grid.dense { gap: 10px 12px; }

/* 임시저장 상태 배지 */
.status.draft { color: var(--gold); }

/* 질문 관리 순서 버튼 */
.q-order { white-space: nowrap; }


/* v2.0-r3b: 등록 폼 행 목록 — 표 테두리·배경 제거(불필요한 라인 정리) */
.table-wrap.plain { border: 0; overflow: visible; }
.table-wrap.plain table { background: transparent; }
.table-wrap.plain th { border-bottom: 0; padding: 4px 10px 2px 0; font-size: 13px; }
.table-wrap.plain td { border-bottom: 0; padding: 4px 10px 4px 0; }
.table-wrap.plain tr:hover td { background: transparent; }


/* v2.0-r3f: 표 안 상태 배지·보조문구 정렬 통일 */
td .status { margin: 0; }
.cell-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.cell-stack .sub { color: var(--muted); font-size: 13px; line-height: 1.4; }
.status.warn { color: var(--gold); }
/* 배지가 없는 상태 표기도 같은 높이를 차지해 행 높이가 흔들리지 않게 한다 */
.status-none { display: inline-block; height: 24px; line-height: 24px; color: var(--muted); font-size: 13px; vertical-align: middle; }
.permit-cell { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.permit-cell .code { min-width: 2.4rem; }


/* v2.0-r3g: 섹션 제목 옆 요약·액션 배치(별도 줄 제거로 공간 절약) */
.section-title { display: flex; align-items: baseline; gap: 8px; }
.section-title .title-sub { font-size: 13px; font-weight: 400; color: var(--muted); }
.section-title .title-action { margin-left: auto; align-self: center; }


/* v2.0-r3h: 외곽 테두리 정리 — 패널·표 바깥 선을 없애고 행 구분선만 남긴다(대표 지시) */
.panel { border: 0; }
.table-wrap { border: 0; }
table { background: transparent; }
thead th { border-bottom: 1px solid rgba(38,61,87,.9); }
/* v2.0-r3k: 행 구분선 제거 — 여백과 마우스 오버 강조로 행을 구분한다(대표 지시) */
tbody td { border-bottom: 0; }
tbody tr:hover td { background: var(--accent-bg); }
.grid.cols-2 > .panel { background: var(--navy-900); }
/* 좌우 패널이 서로의 높이에 끌려 늘어나지 않게(빈 공간 축소) */
.grid.cols-2 { align-items: start; }


/* v2.0-r3j: 표 열 규격 공통 기준(전 화면 동일 적용)
   코드/숫자/일자 열은 내용 폭 고정 → ID 뒤 불필요한 여백 제거,
   명칭 열은 최대폭 + 말줄임(전체 내용은 마우스 오버로 확인),
   남는 폭은 우측 '비고' 열이 흡수한다(추후 활용 여지). */
.tbl-shows th, .tbl-shows td { padding: 11px 8px; }
.tbl-shows .c-code { width: 1%; white-space: nowrap; padding-right: 10px; }
.tbl-shows .c-num  { width: 1%; white-space: nowrap; padding-right: 12px; }
.tbl-shows .c-date { width: 1%; white-space: nowrap; }
.tbl-shows .c-permit, .tbl-shows .c-status { width: 1%; white-space: nowrap; }
.tbl-shows .c-act { width: 1%; white-space: nowrap; }
.tbl-shows .c-name { max-width: 8.5rem; }
.tbl-shows .c-name .clip {
  display: block; max-width: 8.5rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 비고 열은 최소 폭을 확보해 긴 문장이 지나치게 세로로 길어지지 않게 한다 */
.tbl-shows .c-note { min-width: 13rem; }
.tbl-shows .c-note {
  white-space: normal; word-break: keep-all; color: var(--muted); font-size: 13px; line-height: 1.5;
}
.tbl-shows .code { color: var(--cyan-soft); font-size: 13px; }
/* 허가 셀: 코드 슬롯을 항상 같은 폭으로 잡아 배지가 세로로 줄 맞는다 */
.permit-cell .code { display: inline-block; min-width: 2.6rem; text-align: left; }


/* v2.0-r3n: 목록형 구분선 전면 제거 — 표와 같은 기준(관리자 전 화면) */
.detail-list dt, .detail-list dd { border-bottom: 0; }
.review-row { border-bottom: 0; }


/* v2.0-r3o: 표 폭 규칙 재정의(공간 배치)
   기존(v1.9.1)에는 표가 항상 화면 전체 폭으로 늘어나고 지정한 한 열이 남는 폭을
   전부 흡수해, 넓은 화면에서 그 열만 부풀고 나머지가 오른쪽 끝으로 밀렸다.
   이제 표는 내용 폭에 맞춰 짜이고, 남는 공간은 표 오른쪽에 그대로 남긴다
   (추후 열 추가 시 활용). 긴 문장이 들어가는 비고 열만 최대 폭 안에서 줄바꿈한다. */
table { width: auto; min-width: 0; }
.grow-1 th:nth-child(1), .grow-1 td:nth-child(1),
.grow-2 th:nth-child(2), .grow-2 td:nth-child(2),
.grow-3 th:nth-child(3), .grow-3 td:nth-child(3),
.grow-4 th:nth-child(4), .grow-4 td:nth-child(4),
.grow-5 th:nth-child(5), .grow-5 td:nth-child(5),
.grow-6 th:nth-child(6), .grow-6 td:nth-child(6),
.grow-7 th:nth-child(7), .grow-7 td:nth-child(7),
.grow-8 th:nth-child(8), .grow-8 td:nth-child(8),
.grow-9 th:nth-child(9), .grow-9 td:nth-child(9),
.grow-10 th:nth-child(10), .grow-10 td:nth-child(10),
.grow-11 th:nth-child(11), .grow-11 td:nth-child(11) { width: auto; }
.tbl-shows .c-note { max-width: 22rem; min-width: 10rem; }
.tbl-shows .c-code, .tbl-shows .c-num, .tbl-shows .c-date,
.tbl-shows .c-permit, .tbl-shows .c-status, .tbl-shows .c-act { width: auto; }
/* 입력 폼 성격의 표(등록 화면·질문 관리)는 폭을 채운다 */
.table-wrap.plain table, #q-table { width: 100%; }


/* v2.0-r3p: 표 정렬·열 폭 규칙 (대표 지시)
   - 항목명(머리글)은 가운데 정렬, 내용은 왼쪽 정렬
   - 열 폭은 성격별로 고정해 화면·표가 달라도 같은 자리에 오게 한다
   - 열 간격은 일정하게 유지 */
.tbl-shows { width: 100%; table-layout: fixed; }
/* 기본은 항목명 가운데·값 왼쪽이되, 열별 규칙(c-num 등)이 이를 덮는다.
   덮이려면 열별 규칙이 뒤에 와야 한다 — 아래 '열 정렬' 묶음 참고. */
.tbl-shows th { padding: 10px 10px; }
.tbl-shows td { padding: 11px 10px; }
.tbl-shows th:not([class*="c-"]) { text-align: center; }
.tbl-shows td:not([class*="c-"]) { text-align: left; }
.tbl-shows .c-code   { width: 4rem; }
.tbl-shows .c-date   { width: 8rem; }
.tbl-shows .c-num    { width: 5rem; }
.tbl-shows .c-name   { width: 7rem; }
.tbl-shows .c-permit { width: 9.75rem; }
.tbl-shows .c-status { width: 7rem; }
/* 비고 열이 남는 폭을 혼자 빨아들이면 그 열만 텅 빈다(대표가 반복해 지적한 문제).
   흔한 값에 맞춰 폭을 잡고, 남는 폭은 다른 열이 나눠 갖게 둔다. */
.tbl-shows .c-note, .tbl-shows .c-flex { width: auto; max-width: 22rem; }
.tbl-shows .c-act    { width: 5rem; }
.tbl-shows .c-name .clip { max-width: none; }
.tbl-shows td, .tbl-shows th { overflow: hidden; text-overflow: ellipsis; }

/* 좁은 패널 안의 표: 고정폭 대신 내용폭 (머리글 가운데·내용 왼쪽은 동일) */
.tbl-compact { width: 100%; table-layout: auto; }
.tbl-compact th { padding: 10px 10px; }
.tbl-compact td { padding: 11px 10px; }
.tbl-compact th:not([class*="c-"]) { text-align: center; }
.tbl-compact td:not([class*="c-"]) { text-align: left; }
.tbl-compact .c-flex { width: 100%; }


/* v2.0-r3q: 본문 영역 최대 폭 제한
   초광폭 모니터에서 화면 끝까지 늘어나면 제목·버튼은 오른쪽 끝, 표는 왼쪽에 몰려
   서로 떨어져 보인다. 본문 폭을 읽기 좋은 범위로 제한해 한 덩어리로 보이게 한다. */
.main { max-width: 1320px; }


/* v2.0-r3r: 텍스트 영역도 입력칸과 동일한 라벨 규칙(상자 안 상단) */
.field.static-label > textarea { padding: 22px 12px 10px; width: 100%; }


/* v2.0-r3s: 글자 크기 통일 (전 화면 공통 기준)
   기존에는 본문 기본 크기가 지정되지 않아 크기를 따로 정하지 않은 문단·안내문이
   브라우저 기본값(16px)으로 커 보였다(고객송부 화면 등). 기준을 14px로 잡고
   제목·표·라벨의 위계를 명확히 한다. */
body { font-size: 14px; line-height: 1.6; }
h1 { font-size: 34px; }
.section-title { font-size: 20px; }
.panel h3.section-title { font-size: 14px; }
.subcopy, .muted, .panel p { font-size: 14px; }
.integration-state strong { font-size: 14px; }
.integration-state p { font-size: 14px; }
.notice { font-size: 14px; }
th { font-size: 13px; }
td { font-size: 14px; }
.btn { font-size: 14px; }
/* (버튼 글자 크기는 규격 14px 하나다 — 여기서 줄이면 규격이 두 개가 된다) */
label { font-size: 13px; }

/* 건수 열·버튼 2개 액션 열 폭 (머리글이 잘리지 않도록) */
.tbl-shows .c-cnt  { width: 6.5rem; }
.tbl-shows .c-act2 { width: 9.5rem; text-align: left; }


/* v2.0-r3t: 질문 관리 표 줄간격 축소 */
#q-table th, #q-table td { padding: 4px 8px; }
#q-table input[type="text"], #q-table input:not([type="checkbox"]) { padding: 7px 10px; min-height: 0; }
#q-table .btn.small { min-height: 28px; padding: 0 10px; }
#q-table input[type="checkbox"] { transform: scale(1.05); }


/* ============================================================================
   v2.0-r3u: 표 정렬 표준 — "머리글은 그 열의 값과 같은 정렬" (2026-08-04 대표 확정)

   그동안 머리글은 무조건 가운데, 값은 무조건 왼쪽이었다. 열 폭이 내용보다 넓은
   경우(비고·장소 등) 머리글은 열 한가운데, 값은 열 왼쪽 끝에 놓여 서로 멀어졌고
   "이 값이 어느 항목인지" 눈으로 따라가기 어려웠다.

   기준을 아래와 같이 통일한다. 화면·표가 달라도 동일하게 적용한다.
     - 길이가 일정한 열(코드·일자·시각·수량·건수·상태·배지·버튼) → 머리글·값 모두 가운데
     - 길이가 들쭉날쭉한 텍스트 열(명칭·연락처·비고·설명)        → 머리글·값 모두 왼쪽
   ============================================================================ */

/* 표준 데이터 표: 화면 폭을 채우고 내용에 따라 열 폭이 정해진다 */
.tbl { width: 100%; table-layout: auto; }
/* 비행허가 신청 이력만 고정 폭 — 긴 비행장소 목록이 옆 칸을 침범하던 것을 막는다. */
.tbl-permit-hist { table-layout: fixed; }
/* 비행장소는 여러 곳을 ' · '로 이은 목록이라 한 줄로 자르면(clip) 잘린 글자가
   옆 칸(허가요청기간)을 시각적으로 덮었다. 이 표에서는 줄바꿈으로 풀어 제 칸 안에
   담는다 — 목록이라 여러 줄로 보이는 편이 오히려 읽기 좋다. */
.tbl-permit-hist .clip { white-space: normal; overflow: visible; }
.tbl th { padding: 10px 10px; }
.tbl td { padding: 11px 10px; }

/* 기본은 왼쪽(텍스트 열) — 앞서 정의한 머리글 가운데 규칙을 여기서 되돌린다 */
.tbl th, .tbl td,
.tbl-shows th, .tbl-shows td,
.tbl-compact th:not([class*="c-"]), .tbl-compact td:not([class*="c-"]) { text-align: left; }

/* 가운데 정렬 열 (머리글·값 동시 적용) */
th.c-code,   td.c-code,
th.c-date,   td.c-date,
th.c-time,   td.c-time,
/* 숫자는 오른쪽 — 자릿수가 맞아야 크기 비교가 된다(규정 표.정렬).
   가운데로 두면 1,200과 800의 끝자리가 어긋나 세로로 읽을 수 없다. */
th.c-num, td.c-num,
th.c-cnt, td.c-cnt { text-align: right; }

/* 상태·결과·버튼은 가운데 — 짧고 길이가 비슷하다 */
th.c-lab,    td.c-lab,
th.c-status, td.c-status,
th.c-permit, td.c-permit,
th.c-act,    td.c-act,
th.c-act2,   td.c-act2 { text-align: center; }

/* 왼쪽 정렬 열 (명시) */
th.c-name, td.c-name,
th.c-text, td.c-text,
th.c-note, td.c-note,
th.c-flex, td.c-flex { text-align: left; }

/* 가운데 정렬 열 안의 버튼·배지는 셀 가운데에 놓인다 */
td.c-act > form, td.c-act2 > form { display: inline-block; margin: 0; }
td.c-act2 .btn + .btn, td.c-act2 form + form { margin-left: 4px; }
.permit-cell .code { text-align: center; }

/* 열 폭 기준(표준 표) — 짧은 열은 고정, 남는 폭은 텍스트 열이 흡수한다 */
/* `width: 1%`는 표를 화면 폭에 맞춰 늘일 때 쓰는 요령이다. 표를 내용에 맞춰
   짜이게 바꾼 뒤로는 오히려 폭 계산을 어지럽힌다. 줄바꿈만 막으면 된다. */
.tbl .c-code   { white-space: nowrap; }
.tbl .c-date   { white-space: nowrap; }
.tbl .c-time   { white-space: nowrap; }
.tbl .c-num    { white-space: nowrap; }
.tbl .c-cnt    { white-space: nowrap; }
.tbl .c-lab    { white-space: nowrap; }
.tbl .c-status { width: 1%; white-space: nowrap; }
.tbl .c-permit { width: 1%; white-space: nowrap; }
.tbl .c-act    { width: 1%; white-space: nowrap; }
.tbl .c-act2   { width: 1%; white-space: nowrap; }
.tbl .c-note   { color: var(--muted); }
.tbl .code     { color: var(--cyan-soft); font-size: 13px; }

/* 고정폭 표(.tbl-shows) 안의 짧은 라벨·자유 텍스트 열 */
.tbl-shows .c-lab  { width: 6.5rem; }
.tbl-shows .c-time { width: 5rem; }
.tbl-shows .c-text { width: auto; }

/* 질문 관리 표는 줄간격을 좁게 유지한다(v2.0-r3t 기준을 표준 padding보다 우선) */
#q-table th, #q-table td { padding: 4px 8px; }


/* ============================================================================
   v2.0-r3w: 등록 화면 밀도 개선 (2026-08-04 대표 지시)
   ============================================================================ */

/* 상단 상태 배지 — 외곽선이 글자를 제대로 감싸지 못하던 문제 수정.
   .status가 높이 24px·줄높이 22px로 상자를 고정했는데 .head-status가 위아래
   여백 6px씩을 덧붙여 글자가 상자 밖으로 삐져나왔다. 자기 높이를 함께 지정해
   옆의 버튼(높이 42px)과 같은 리듬으로 맞춘다. */
.head-status {
  height: 34px; line-height: 32px; padding: 0 14px;
  min-width: 4.5rem; font-size: 13px;
}

/* 안내 문구를 입력칸 아래가 아니라 상자 안 라벨 오른쪽에 붙인다(세로 공간 절약) */
.label-hint { color: var(--muted); font-weight: 400; font-size: 13px; letter-spacing: 0; }
.field.float > label .label-hint,
.field.static-label > label .label-hint { margin-left: 8px; }

/* 라벨 줄 오른쪽 끝의 "추가" 버튼 */
.field.full > label { display: flex; align-items: center; gap: 8px; }
.field.full > label .label-hint { flex: 1 1 auto; }
.label-action { flex: 0 0 auto; margin-left: auto; }

/* 글자수 표시(#106) — 칸 오른쪽 안쪽. 한도에 닿으면 붉어진다. */
.field-count {
  position: absolute; right: 12px; bottom: 13px;
  font-size: 13px; color: var(--muted); pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.field-count.full { color: var(--danger); }
.field.has-count { position: relative; }
.field.has-count > input { padding-right: 56px; }

/* 머리글 없는 입력 행 표(등록 화면의 드론쇼·장소·시나리오) */
.rowform { width: 100%; }
.rowform td { padding: 5px 6px; vertical-align: middle; }
.rowform tr:hover td { background: transparent; }
.rowform input, .rowform select { min-height: 40px; }
.rowform .c-code { width: 3.2rem; color: var(--cyan-soft); font-size: 13px; font-weight: 700; }
.rowform .c-name { width: 12rem; }
.rowform .c-date { width: 11rem; }
.rowform .c-time { width: 8.5rem; }
.rowform .c-num  { width: 8rem; }
.rowform .c-act  { width: 5rem; }

/* 코드+명칭 한 칸 표기 — 코드와 명칭이 붙어 보이지 않게 사이를 띄운다 */
.code-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.code-name .code { margin-right: 8px; color: var(--cyan-soft); font-size: 13px; font-weight: 700; }
.code-name .cn-name { color: var(--text); }
.unit-suffix { margin-left: 4px; color: var(--muted); font-size: 13px; }
/* 회사·부서처럼 단위가 아닌 설명성 보조문만 아래 줄에 표시한다. */
.th-unit { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; font-weight: 400; letter-spacing: 0; }
/* 항목명은 모두 윗줄에 맞춘다. */
th { vertical-align: top; }

/* 코드+명칭이 들어가는 명칭 열은 조금 더 넓게 */
.tbl-shows .c-name { width: 10.5rem; }

/* 버튼 3개가 들어가는 액션 열(조회·수정·삭제/등록취소) */
th.c-act3, td.c-act3 { text-align: center; }
.tbl .c-act3 { white-space: nowrap; }
.tbl-shows .c-act3 { width: 1px; white-space: nowrap; }
td.c-act3 > form { display: inline-block; margin: 0; }
td.c-act3 .btn + .btn, td.c-act3 form + form { margin-left: 4px; }

/* v2.0-r3w: 예정일자+시각을 한 열로 합쳐 비고 열의 폭을 확보한다 */
th.c-when, td.c-when { text-align: center; }
.tbl-shows .c-when { width: 10.5rem; white-space: nowrap; }

/* 303 세 표(드론쇼·장소·시나리오) 세로선 공유(2026-08-09):
   칸 폭은 공유 colgroup(%)만 따르게 하고, c-* 고정폭(rem)은 무시한다.
   colgroup의 9칸 기준선에 세 표가 colspan으로 맞춰 정렬된다. */
.tbl-project-input { table-layout: fixed; }
.tbl-project-input th, .tbl-project-input td {
  width: auto !important;        /* 폭은 공유 colgroup(%)만 따른다 */
  white-space: normal;           /* 좁은 칸에서 넘치지 않게 줄바꿈(겹침 방지) */
  word-break: keep-all;
  overflow-wrap: anywhere;
  vertical-align: top;
  /* 시작선 정렬(2026-08-09 대표 지시): 길이는 달라도 모든 칸을 왼쪽 시작으로
     통일한다. 숫자 칸(c-num·c-cnt)이 오른쪽 정렬이라 옆 글자 칸과 시작선이
     어긋나 보이던 것을 없앤다. 공유 격자(colgroup) 위에서 세 표의 칸 시작선이
     세로로 맞는다. */
  text-align: left !important;
}
/* 303 세 표에서는 빈 값 경고(붉은색)를 조용한 회색으로 통일한다(대표 지시). */
.tbl-project-input .incomplete { color: var(--muted) !important; }
.when-time { margin-left: 4px; color: var(--cyan-soft); }
.tbl-shows .c-permit { width: 8.5rem; }
.tbl-shows .c-status { width: 7rem; }
.tbl-shows .c-num { width: 4.6rem; }
.tbl-shows .c-act3 { width: 1px; }

/* 열 폭 미세 조정 — 버튼 3개와 비고가 모두 잘리지 않도록 */
.tbl-shows .c-name { width: 8.5rem; }
.tbl-shows .c-when { width: 10rem; }
.tbl-shows .c-num  { width: 5.2rem; }
.tbl-shows .c-permit { width: 8rem; }
.tbl-shows .c-act3 { width: 1px; }
.tbl-shows .c-note { font-size: 13px; }

/* 액션 열: 버튼 3개(조회·수정·등록취소)가 잘리지 않는 최소 폭 */
.tbl-shows .c-name { width: 8.25rem; }
.tbl-shows .c-when { width: 9.5rem; }
.tbl-shows .c-act3 { width: 1px; }
.tbl-shows td.c-act3 { overflow: visible; }

/* v2.0-r3w: 드론쇼 표는 열이 많아 본문 폭을 조금 넓힌다(초광폭에서도 한 덩어리로 보이는 범위) */
.main { max-width: 1440px; }
.tbl-shows .c-name { width: 9rem; }
.tbl-shows .c-when { width: 11rem; }


/* ============================================================================
   v2.0-r3z / r4a: 계정 카드형 목록 · 테스트 배지 · 한 열 폼 (2026-08-04 대표 지시)
   ============================================================================ */

/* 계정 한 건을 2줄로 묶어 가로 스크롤 없이 보여준다(관리자 계정 화면) */
.acct-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid rgba(38,61,87,.5);
}
.acct-row:last-child { border-bottom: 0; }
.acct-main { flex: 1 1 auto; min-width: 0; line-height: 1.6; }
.acct-main strong { font-size: 14px; }
.acct-main .muted { font-size: 13px; word-break: break-all; }
.acct-act { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.acct-act .inline-form { margin: 0; }

/* 개발용 테스트 프로젝트 표시 — 누를 수 없는 상태 표시다.
   테두리는 **누를 수 있는 것에만** 쓴다(규정 상태표시.테두리). 네모를 두르면
   버튼처럼 보여 눌러 보게 된다. 같은 성격인 .req-tag와 모양을 맞춘다. */
.test-tag {
  display: inline-block; margin-left: 6px;
  font-size: 13px; font-weight: 700; color: var(--muted); vertical-align: 1px;
}

/* 한 열짜리 입력 폼(좁은 패널 안의 담당자 등록 등) */
.form-grid.one { grid-template-columns: minmax(0, 1fr); }

/* 등록 화면 시나리오 행의 드론 수 칸 */
.rowform .c-num > input { width: 100%; }

/* 화면 검사에서 잡힌 잘림 보정 (v2.0-r4a) */
.tbl-shows .c-permit { width: 9.25rem; }
.tbl-shows .c-act    { width: 6.75rem; }
.tbl-shows .c-lab    { width: 8.5rem; }
.tbl-compact td, .tbl-compact th { white-space: normal; }

/* v2.0-r4b: 비행허가 — 장소 여러 곳 선택 · 신청/투입 수량 비교 */
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 8px 14px; }
.check-item {
  display: flex; align-items: center; gap: 6px; padding: 9px 11px;
  border: 1px solid #35506a; background: var(--navy-950); font-weight: 400; cursor: pointer;
}
.check-item:hover { border-color: var(--cyan); }
.check-item .code { color: var(--cyan-soft); font-size: 13px; font-weight: 700; }
.check-item input { margin: 0 4px 0 0; }
.check-item .ci-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.check-item .ci-tag { flex: 0 0 auto; margin-left: auto; }
.over-count { color: var(--danger); font-weight: 700; }


/* ============================================================================
   v2.1-r1: 사용 안내(화면 계층도) — 좌측 메뉴에서 열어 보는 시스템 지도
   ============================================================================ */
ul.tree { list-style: none; margin: 0; padding-left: 0; }
ul.tree ul { list-style: none; margin: 0; padding-left: 22px; border-left: 1px solid var(--line); }
ul.tree li { position: relative; padding: 7px 0 7px 16px; }
ul.tree ul li::before {
  content: ""; position: absolute; left: -1px; top: 19px; width: 12px; height: 1px; background: var(--line);
}
.tree .node { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.tree .gname { font-weight: 700; }
.tree .gname.lv1 { font-size: 14px; color: var(--cyan-soft); }
.tree .gdesc { color: var(--muted); font-size: 13px; flex: 1 1 260px; min-width: 0; }
.tree .tag {
  display: inline-block; padding: 1px 8px; font-size: 13px; font-weight: 700;
  border: 1px solid var(--line); color: var(--muted); white-space: nowrap;
}
.tree .tag.admin { color: var(--gold); border-color: rgba(239,209,126,.5); }

.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.flow .step { padding: 7px 12px; border: 1px solid var(--line); background: var(--navy-900); font-size: 13px; }
.flow .step b { color: var(--cyan-soft); }
.flow .arrow { color: var(--muted); }

.guide-note {
  margin-top: 18px; padding: 14px 16px;
  border-left: 1px solid var(--line); background: var(--accent-bg); font-size: 13px;
}
.guide-note strong { color: var(--gold); }


/* v2.1-r2: 관리자 계정 화면 — 좌측(등록 폼)을 좁히고 우측(담당자 목록)에 폭을 더 준다.
   담당자 표가 패널을 넘쳐 버튼이 가로 스크롤 안으로 숨던 문제(대표 지적) 해결. */
.grid.cols-2.acct-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }

/* 사용 안내의 설명 표는 긴 문장이 들어가므로 줄바꿈을 허용한다 */
.guide-table td, .guide-table th { white-space: normal; }
.guide-table .c-name, .guide-table .c-code { width: 12rem; white-space: normal; }

/* ============================================================
   v2.1-r3 — 명칭은 자르지 않는다 (대표 확인 2026-08-05)
   실제 프로젝트 데이터를 넣자 드론쇼 표의 장소 명칭이 "드론쇼 행사…"로
   잘렸다. 명칭은 최대 14자로 제한돼 있으므로 두 줄이면 반드시 들어간다.
   말줄임표로 자르면 무슨 장소인지 알 수 없으니, 자르는 대신 줄바꿈한다.
   (열 폭을 계속 넓히는 방식은 열이 8개라 곧 한계에 부딪힌다.)
   ============================================================ */
.tbl-shows th.c-name, .tbl-shows td.c-name,
.tbl-shows th.c-loc,  .tbl-shows td.c-loc {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: keep-all;      /* 한글은 단어 단위로 끊는다 */
  overflow-wrap: anywhere;   /* 그래도 안 맞는 긴 영문·숫자는 강제로 끊는다 */
}
.code-name {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
/* 코드는 명칭과 떨어지지 않게 붙여 둔다(코드만 윗줄에 남는 것 방지) */
.code-name .code { display: inline-block; }
/* 명칭은 코드 옆에 붙어 한 줄로 자른다(넘침 규칙). 코드 아래로 내려가지 않게
   block 대신 inline-block으로 둔다. 잘리면 clipScript가 밑줄·말풍선을 붙인다. */
.code-name .cn-name.clip { display: inline-block; max-width: 100%; vertical-align: bottom; }

/* 시각이 없는 드론쇼는 00:00 대신 '시간 미정'으로 표시한다 */
.when-none { color: var(--muted); font-size: 13px; }

/* 넘침 규칙(2026-08, 대표 확정): 기관·부서·명칭이 칸을 넘치면 줄바꿈하지 않고
   한 줄로 자른다. 잘린 칸은 시안 점선 밑줄로 표시하고, 누르면 전체가 말풍선으로
   뜬다(902 고객 포털과 동일). 예전엔 줄바꿈했으나 화면마다 표가 들쭉날쭉해져
   자르기로 통일했다. 실제 자름·밑줄·말풍선은 .clip(아래) + clipScript가 맡는다. */
.tbl-shows .c-name, .tbl .c-name { max-width: none; }

/* ---- 드론쇼 표 열 폭 재배분 ----
   명칭을 자르지 않기로 하면서 명칭 열이 넓어졌다. 고정 레이아웃 표라 지정한 폭의
   합이 표 폭을 넘으면 폭을 안 준 비고 열이 22px까지 밀려 글자가 잘린다.
   실측(1600px 화면에서 표 1226px) 기준으로 다시 나눈다.
   예정일시는 한 줄을 고집하지 않고 날짜/시각 두 줄을 허용해 폭을 크게 줄였다.
   허가 배지와 버튼 3개가 들어가는 열은 줄일 수 없으므로(줄이면 그쪽이 잘린다)
   줄일 수 있는 것은 예정일시와 명칭뿐이다. 명칭은 어차피 두 줄로 접힌다. */
.tbl-shows .c-name   { width: 8.75rem; }
.tbl-shows .c-when   { width: 7.5rem; white-space: normal; }
.tbl-shows .c-permit { width: 9.25rem; }
.tbl-shows .c-status { width: 7rem; }
/* 버튼 열은 **내용만큼만** 잡는다.
   예전에는 버튼 3개가 들어갈 폭(17.5rem)을 못 박아 두었다. 그런데 마감된
   프로젝트에서는 버튼이 '조회' 하나만 남는다 — 그때 이 열이 188px을 빈 채로
   붙들고 있었다(2026-08-06 검사가 잡음). 줄바꿈은 white-space가 막으므로
   폭을 못 박을 이유가 없다. */
.tbl-shows .c-act3   { width: 1px; }
.tbl-shows .c-note   { min-width: 8rem; }

/* 비행허가 표는 장소를 여러 곳 나열하므로 한 줄로 두면 표가 화면을 넘어
   가로 스크롤이 생긴다(신청서 1장 = 장소 n곳 구조라 앞으로 더 길어진다).
   설명이 들어가는 열은 줄바꿈을 허용한다. */
.tbl .c-text { white-space: normal; word-break: keep-all; }

/* ============================================================
   v2.1-r4 — 표기 규칙 (대표 확정 2026-08-05)
   ============================================================ */

/* 붉은 글자 = 사람이 손대야 하는 상태(미지정·미입력·미기록·미신청 등).
   테두리를 두르지 않는다 — 테두리는 '클릭할 수 있는 것'의 표시로만 쓴다. */
.incomplete { color: var(--danger); font-size: 13px; }

/* 화면 번호 — 제목 옆에 작게. 캡처에 찍혀서 어느 화면인지 바로 알 수 있게 한다. */
.screen-no {
  margin-left: 10px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  vertical-align: middle;
}

/* 로그인 화면의 보조 링크 — 비밀번호 찾기 등 (#112) */
.login-help { margin: 14px 0 0; text-align: center; font-size: 13px; }
.login-help a { color: var(--cyan-soft); text-decoration: underline; }
.login-note { margin-top: 18px; font-size: 13px; line-height: 1.6; text-align: center; }
.login-note code { color: var(--cyan-soft); }

/* 담당자 정보 수정 폼 — 카드 아래에서 그 자리에 펼쳐진다 (#112) */
.acct-edit { padding: 14px 0 18px; border-bottom: 1px solid rgba(38,61,87,.5); }
.acct-edit .form-actions { justify-content: flex-start; gap: 8px; }

/* ------------------------------------------------------------------
   403 관리자 계정 — 대표 지시 2026-08-07
   화면 설명을 화면번호 옆으로 올리고(102와 같은 규칙), 조치가 필요한 것을 맨 위에 둔다.
   ------------------------------------------------------------------ */
.page-head:has(~ .acct-top) > div:first-child { display: flex; flex-wrap: wrap; align-items: baseline; min-width: 0; }
.page-head:has(~ .acct-top) .eyebrow { flex-basis: 100%; }
.page-head:has(~ .acct-top) .subcopy { margin: 0 0 0 14px; font-size: 13px; }
/* 바탕은 설계 규격의 패널색을 그대로 쓴다 — 붉은 기운은 테두리와 글자로만 낸다.
   허용 배경색 밖의 값을 만들면 design-system 검사가 잡는다. */
.acct-warn {
  margin: 0 0 14px; padding: 12px 16px; font-size: 14px;
  color: var(--danger); border: 1px solid rgba(255,125,131,.45); background: var(--navy-800);
}
.acct-warn strong { color: var(--danger); }
.acct-warn-sub { color: var(--muted); font-size: 13px; margin-left: 10px; }

/* 아랫줄은 한 줄로 흐르게 두되, 구분점이 글자에 붙지 않게 한다. */
.acct-meta { display: flex; flex-wrap: wrap; align-items: baseline; }
.acct-meta .mi { white-space: nowrap; }
/* 이메일만은 길면 끊는다 — 아무리 길어도 칸을 넘겨서는 안 된다. */
.acct-meta .mi:first-child { white-space: normal; word-break: break-all; }
.acct-meta .sep { color: var(--muted); margin: 0 6px; }
.acct-meta .incomplete { font-size: 13px; }
.section-title .title-note { color: var(--muted); font-size: 13px; font-weight: 400; margin-left: 10px; }

/* 정지처럼 되돌리기 어려운 것은 자주 쓰는 버튼과 한 칸 띄워 둔다. */
.acct-gap { width: 10px; flex: 0 0 auto; }

/* 사람마다 맡고 있는 프로젝트 */
.acct-prj { margin: -4px 0 10px; font-size: 13px; color: var(--muted); }
.acct-prj .chip {
  display: inline-block; border: 1px solid var(--line); border-radius: 3px;
  padding: 1px 7px; margin: 2px 5px 2px 0; color: var(--text); font-size: 13px; text-decoration: none;
}
.acct-prj .chip.none { border-style: dashed; color: var(--muted); }

/* 정지 확인 — 무엇이 함께 해제되는지 누르기 전에 보여준다 */
.acct-confirm {
  border: 1px solid var(--line); background: var(--navy-800);
  padding: 12px 15px; margin: 0 0 14px; font-size: 13px; line-height: 1.7;
}
.acct-confirm p { margin: 0 0 6px; }
.acct-confirm-title { color: var(--text); font-weight: 700; font-size: 14px; }
.acct-confirm .chip {
  display: inline-block; border: 1px solid var(--line); border-radius: 3px;
  padding: 1px 7px; margin: 2px 5px 2px 0; color: var(--text); font-size: 13px;
}
.acct-confirm-act { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin-top: 8px; }
.acct-confirm-act .inline-form { margin: 0; }

/* ============================================================
   v2.2 — 기록 네 가지 (#105, D-037)
   ============================================================ */

/* 공지 탭 배지 — 안 읽은 건수. 붉은색은 "봐야 할 것"이라는 뜻이다. */
.ptabs .tab-badge {
  display: inline-block; margin-left: 6px; padding: 0 6px;
  background: var(--danger); color: #1a0508;
  font-size: 13px; font-weight: 800; line-height: 18px; vertical-align: middle;
}
/* 로그인 후 처음 들어왔을 때만 잠깐 눈에 띄게 한다.
   계속 깜빡이면 금방 거슬려 오히려 무시하게 되고, 빛에 민감한 사람에게도 좋지 않다. */
.ptabs a.has-new .tab-badge { animation: badge-pulse .6s ease-in-out 3; }
@keyframes badge-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .ptabs a.has-new .tab-badge { animation: none; }
}

/* 공지 목록 — 한 건이 한 줄 */
.notice-list .n-row {
  display: flex; gap: 12px; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid rgba(38,61,87,.5);
}
.notice-list .n-row:last-child { border-bottom: 0; }
.notice-list .n-when { width: 11rem; flex: none; color: var(--muted); font-size: 13px; }
.notice-list .n-body { flex: 1; min-width: 0; word-break: keep-all; }
.notice-list .n-act { white-space: nowrap; font-size: 13px; color: var(--muted); }
/* 기한이 지난 공지는 흐리게 — 지우지 않고 뒤로 물린다 */
.notice-list .n-row.expired .n-body { color: var(--muted); }
.notice-list .n-row.is-reply { margin-left: 3rem; padding-left: 14px; border-left: 2px solid var(--line); }
.notice-list .n-edit { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 6px; }
.notice-list .n-edit textarea, .reply-compose textarea { width: 100%; }
.reply-compose { display: inline-block; position: relative; margin-left: 4px; }
.reply-compose > summary, .older-notices > summary { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.reply-compose form { position: absolute; z-index: 20; right: 0; width: 28rem; padding: 10px; background: var(--navy-950); border: 1px solid var(--line); }
.older-notices { margin-top: 8px; }
.notice-dot { display: inline-block; width: 8px; height: 8px; vertical-align: middle; }
.notice-dot::before { content: ""; display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }

/* 비망록 — 후기라 글이 길다 */
.diary-list .diary-item {
  padding: 16px 0; border-bottom: 1px solid rgba(38,61,87,.5);
}
.diary-list .diary-item:last-child { border-bottom: 0; }
.diary-list .diary-item header { margin-bottom: 6px; font-size: 13px; }
.diary-list .diary-item p { margin: 0; white-space: pre-wrap; word-break: keep-all; line-height: 1.7; }
.diary-actions { float: right; display: inline-flex; gap: 6px; }
.diary-edit textarea { min-height: 9rem; }
.older-diaries > summary { margin: 12px 0; cursor: pointer; color: var(--cyan-soft); text-decoration: underline; text-underline-offset: 3px; }
.compact-customer-filter { margin: 10px 0 0; }
.compact-customer-filter input { max-width: 32rem; }
#link_customer_search { margin-bottom: 8px; }

/* 표 안의 메모 — 좁은 칸은 '메모 N건'만, 넓은 칸은 두 줄 미리보기 + 더보기 */
.memo-cell { color: var(--muted); font-size: 13px; }
.memo-cell .body { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.memo-cell.open .body { display: block; }
.memo-more {
  display: inline-block; margin-top: 2px; padding: 0; border: 0; background: none;
  color: var(--cyan-soft); font-size: 13px; text-decoration: underline; cursor: pointer;
}
.memo-list { margin-top: 6px; }
.memo-list li { margin-bottom: 4px; font-size: 13px; color: var(--muted); list-style: none; }
.memo-list li b { color: var(--text); font-weight: 400; }


/* 사용 안내의 설명 표 — 두 칸짜리라 오른쪽 칸이 남는 폭을 전부 먹는다.
   글줄이 길어지면 읽기도 나쁘다. 읽기 좋은 폭에서 끊는다. */
.guide-table { width: auto; max-width: 100%; }
.guide-table .c-text { max-width: 44rem; }


/* 표를 억지로 화면 폭에 맞춰 늘이지 않는다.
   늘이면 폭을 안 준 열(대개 비고)이 남는 폭을 혼자 먹어 그 열만 텅 빈다.
   내용에 맞춰 짜이게 두고, 넘칠 때만 화면 폭에서 끊는다. */
.tbl-shows { width: auto; max-width: 100%; }


/* 체크박스·라디오 강조색 — accent-color는 background-color가 아니라서
   색 검사에 안 잡힌다. 규정 색으로 못 박는다. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--cyan-soft); }


/* 한 건을 두 줄로 쓰는 목록 표 (#116).
   같은 성격의 두 값을 위아래로 묶어 칸 수를 줄인다. */
.tbl-2line td { vertical-align: top; }
.tbl-2line .sub { display: block; margin-top: 4px; font-size: 13px; }
.tbl-2line .c-text { max-width: 30rem; }

/* 목록에서 프로젝트명을 눌러 들어간다(대표 확정 2026-08-05).
   테두리는 못 쓰므로 밑줄로 '누를 수 있음'을 알린다. */
.row-open { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.row-open:hover { color: var(--cyan-soft); }
.complete-text { color: var(--success); }

/* 301 — 한 프로젝트를 무엇/계약과 구성/진행상황의 세 줄로 읽는다(D-062). */
.project-list-3 { border: 1px solid var(--line); background: var(--navy-900); max-height: 390px; overflow-y: auto; scrollbar-gutter: stable; }
.project-list-item { padding: 16px 18px; border-bottom: 1px solid rgba(38,61,87,.72); }
.project-list-item:last-child { border-bottom: 0; }
.project-list-head { display: flex; justify-content: space-between; gap: 18px; align-items: baseline; margin-bottom: 10px; }
.project-list-state { flex: 0 0 auto; color: var(--success); }
.project-list-line { display: grid; grid-template-columns: 1.35fr 1.05fr 1.45fr 1fr 1fr; gap: 14px 20px; margin-top: 8px; align-items: start; }
.project-list-contract .composition { grid-column: 4 / 6; }
.project-list-metric { min-width: 0; display: flex; gap: 7px; align-items: baseline; white-space: nowrap; }
.project-list-metric .metric-label { flex: 0 0 auto; color: var(--cyan-soft); font-size: 13px; }
.project-list-metric > span:last-child { overflow-wrap: anywhere; white-space: normal; }
.project-list-item.is-closed, .project-list-item.is-closed a, .project-list-item.is-closed span { color: var(--muted); }

@media (max-width: 1180px) {
  .project-list-line { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-list-contract .composition { grid-column: 1 / -1; }
}


/* 고를 수 있는 표의 체크박스 열 */
th.c-pick, td.c-pick { width: 2.4rem; text-align: center; }


/* 두 줄 표에서 이름·기관은 흔한 최대에 맞춰 넉넉히 준다.
   좁게 두면 한도(이름 10자·기관 15자)를 채운 값이 세 줄로 접힌다. */
.tbl-2line .c-name { min-width: 12rem; }


/* 고객 목록도 내용에 맞춰 짜이게 둔다. 억지로 늘이면 기관 칸이 남는 폭을 혼자 먹는다. */
/* 표는 **내용만큼만** 넓힌다. `auto`는 브라우저마다 화면 폭까지 늘리는 경우가 있어
   `fit-content`로 못 박는다. 늘어나면 폭을 안 준 열이 남는 폭을 혼자 먹는다. */
.tbl { width: auto; max-width: 100%; }
.tbl-req, .tbl-2line { width: auto; max-width: 100%; }

/* 306 고객요청 — 한 번에 한 시나리오·한 고객만 보고 질문별 7:3 입력 구조로 읽는다(D-068). */
.request-help { margin: 8px 0 14px; }
.request-notify { margin-bottom: 14px; }
.request-notify-grid { display: grid; grid-template-columns: minmax(14rem,.7fr) minmax(13rem,.55fr) minmax(24rem,1.4fr); gap: 16px; align-items: start; }
.request-notify-grid > label, .request-notify-grid > div > strong { display: block; color: var(--cyan-soft); font-size: 13px; }
.request-notify-grid select, .request-notify-grid textarea { width: 100%; margin-top: 6px; }
.request-recipients { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; }
.request-recipients label { white-space: nowrap; }
.request-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.request-tab { padding: 7px 12px; border-bottom: 2px solid transparent; color: var(--muted); text-decoration: none; }
.request-tab:hover, .request-tab.on { color: var(--text); }
.request-tab.on { border-bottom-color: var(--cyan-soft); font-weight: 700; }
.customer-tabs { margin-top: 2px; }
.request-sheet { overflow: hidden; }
.request-question { padding: 16px 0; border-bottom: 1px solid var(--line); }
.request-question:last-of-type { border-bottom: 0; }
.request-question h3 { margin: 0 0 9px; font-size: 14px; }
.request-answer-grid { display: grid; grid-template-columns: minmax(0,7fr) minmax(14rem,3fr); gap: 16px; align-items: stretch; }
.request-customer-answer, .request-answer-grid textarea { min-height: 7rem; width: 100%; padding: 11px 12px; border: 1px solid var(--line); background: var(--navy-950); color: var(--text); line-height: 1.55; }
.request-customer-answer .input-placeholder { color: var(--muted); }
.request-attachment { display: block; margin-top: 8px; color: var(--cyan-soft); text-decoration: underline; text-underline-offset: 3px; }
.satis-set-preview-wrap{margin-top:4px}
.satis-set-preview{border:1px solid var(--line);background:var(--navy-950);padding:14px 16px}
.satis-set-preview[hidden]{display:none}
.satis-set-preview h3{margin:0 0 10px;font-size:.95rem;color:var(--cyan-soft)}
.satis-set-question-list{margin:0;padding-left:2rem;display:grid;gap:7px}
.satis-set-question-list li{padding-left:4px;color:var(--muted)}
.satis-set-question-list strong{display:block;color:var(--text);font-weight:700}
.satis-set-question-list span{display:block;margin-top:1px;font-size:.84rem;color:var(--muted)}
.satis-set-summary-note{margin:12px 0 0;padding-top:9px;border-top:1px dashed var(--line)}
@media (max-width: 900px) {
  .request-notify-grid, .request-answer-grid { grid-template-columns: 1fr; }
}


/* 기관·회사명은 한도가 15자다. 흔한 최대에 맞춰 폭을 잡는다(규정 표.열폭). */
.tbl .c-text { max-width: 20rem; }


/* 버튼만 들어가는 마지막 열은 내용에 맞춘다. 폭을 안 주면 남는 폭을 앞 열이 나눠 갖는다. */
.tbl .c-act, .tbl .c-act2, .tbl .c-act3 { white-space: nowrap; }
.tbl .c-status, .tbl .c-permit, .tbl .c-name { white-space: nowrap; }


/* 날짜·시각 열은 길이가 고정이다. 남는 폭을 가져갈 이유가 없다. */
.tbl .c-date, .tbl .c-time { width: 1px; }


/* 표를 감싼 상자가 화면 폭을 다 차지하면 그 안의 표도 따라 늘어난다.
   상자를 내용만큼만 잡아 표가 실제로 내용에 맞춰 짜이게 한다. */
.table-wrap { display: block; width: fit-content; max-width: 100%; vertical-align: top; }


/* 고정 형식 칸은 빈 상태에서도 형식이 보여야 한다(D-030).
   플로팅 라벨은 값이 없으면 안내글을 숨기므로 이 칸만 늘 보이게 한다. */
.field.float > input[data-fixed]::placeholder { color: var(--muted); opacity: 1; }
.field.float > input[data-fixed]:placeholder-shown + label { top: 5px; transform: none; }


/* 설명 — 명칭 아래 회색 한 줄 (D-053-3).
   대상 하나에 한 건이고 고쳐 쓰는 값이다. 쌓이는 기록(메모)과 다르다. */
.code-name + .sub { display: block; margin-top: 3px; font-size: 13px; }


/* 메모 칸 — 건수만 보이고 누르면 그 자리에서 펼친다 (D-053-2·4).
   이 칸은 두 줄에 12자밖에 못 넣는다. 12자짜리 미리보기는 읽어도 뜻을 알 수 없어
   미리보기를 포기했다(규정 표.비고.기준).
   테두리는 쓰지 않는다 — 표 안에서 네모가 과하다. 밑줄로 '누를 수 있음'을 알린다. */
th.c-memo, td.c-memo { text-align: left; white-space: nowrap; }
.memo-cell > summary {
  list-style: none; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
  color: var(--text); font-size: 13px;
}
.memo-cell > summary::-webkit-details-marker { display: none; }
.memo-cell > summary::marker { content: ""; }
.memo-cell > summary:hover { color: var(--cyan-soft); }
.memo-body { margin-top: 6px; white-space: normal; max-width: 26rem; }
.memo-one { margin-bottom: 6px; }
.memo-when { display: block; color: var(--muted); font-size: 13px; }
.memo-text { display: block; font-size: 14px; }
.memo-add { display: flex; gap: 6px; margin-top: 8px; align-items: center; }
.memo-add input[name="body"] { flex: 1 1 auto; min-width: 12rem; }


/* 접어 두는 덩어리 (D-053-5) — 평소에 안 보고, 어긋났을 때만 펼쳐 본다.
   메모 칸과 같은 규칙을 쓴다: 테두리 없이 밑줄로 '누를 수 있음'을 알린다. */
.fold > summary {
  list-style: none; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
  color: var(--text); font-weight: 700; font-size: 14px;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::marker { content: ""; }
.fold > summary:hover { color: var(--cyan-soft); }
.fold-body { margin-top: 12px; }


/* 제공자료 업로드 — 시나리오 칸은 시나리오가 둘 이상일 때만 그린다.
   칸이 하나 늘어난 만큼 폼이 좁아지지 않게 넓이를 다시 잡는다. */
.deliverable-upload .field { min-width: 12rem; }


/* 302 '지금 등록된 것': 삭제 불가 이유는 행을 늘리지 않고 잠깐 뜨는 알림으로 보여 준다. */
.rowform td.c-lab { width: 1px; white-space: nowrap; padding-left: 24px; }
.disabled-delete { color: var(--muted); cursor: help; }
.disabled-delete input { opacity: .45; }
.reason-toast {
  position: fixed; right: 28px; bottom: 28px; z-index: 100;
  max-width: 28rem; padding: 11px 14px; border: 1px solid var(--line);
  background: var(--navy-800); color: var(--text); box-shadow: 0 10px 28px rgba(0,0,0,.32);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.reason-toast.show { opacity: 1; transform: translateY(0); }
/* 102의 화면 설명은 화면번호 옆에 두어 제목 아래 한 줄을 없앤다. */
.page-head:has(+ .dash-filter) > div:first-child { display: flex; flex-wrap: wrap; align-items: baseline; min-width: 0; }
.page-head:has(+ .dash-filter) .eyebrow { flex-basis: 100%; }
.page-head:has(+ .dash-filter) .subcopy { margin: 0 0 0 14px; font-size: 13px; }
.dashboard-schedule .section-title, .dashboard-project-list .section-title { margin-bottom: 8px; }
.dashboard-schedule-scroll { max-height: 286px; overflow-y: auto; scrollbar-gutter: stable; }
.dashboard-schedule-scroll thead th { position: sticky; top: 0; z-index: 2; }
.dashboard-schedule-scroll td { height: 48px; }
/* 303 프로젝트 입력: 화면명 아래 행사명과 업무 버튼을 같은 높이에 둔다. */
.page-head:has(.project-head-staff) { align-items: start; }
.page-head:has(.project-head-staff) > div:first-child { min-width: 0; flex: 1 1 auto; }
.page-head:has(.project-head-staff) .subcopy {
  color: var(--text); font-size: 20px; font-weight: 700; margin-top: 10px;
  white-space: nowrap; overflow: visible;
}
.page-head:has(.project-head-staff) .actions {
  display: block; flex: 0 0 auto; max-width: 58%; padding-top: 93px;
}
.project-head-main {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
}
.project-head-staff { margin-top: 8px; color: var(--muted); text-align: right; font-size: 13px; white-space: nowrap; }
.project-head-staff strong { color: var(--text); }
.project-title-status { margin-left: 12px; font-size: 18px; font-weight: 800; vertical-align: 2px; }
.staff-overflow { display: inline-block; position: relative; margin-left: 8px; text-align: left; }
.staff-overflow summary { cursor: pointer; color: var(--cyan-soft); text-decoration: underline; text-underline-offset: 4px; }
.staff-overflow div { position: absolute; right: 0; z-index: 20; min-width: 260px; padding: 10px 12px; border: 1px solid var(--line); background: var(--navy-950); }
.staff-overflow div span { display: block; padding: 3px 0; }
.project-overview { grid-template-columns: minmax(0, 7fr) minmax(20rem, 5fr); align-items: stretch; }
.project-overview > .panel { margin-bottom: 0; }
.project-info-list { grid-template-columns: 6.5rem minmax(0, 1fr) 6.5rem minmax(0, 1fr); column-gap: 8px; }
.project-info-list dt, .project-info-list dd { padding: 7px 0; }
.project-code-value { color: var(--gold); font-size: 17px; font-weight: 800; }
.permit-one-line { display: inline-block; white-space: nowrap; }
.contact-group-title { margin: 14px 0 5px; color: var(--cyan-soft); font-size: 14px; }
.contact-group-title:first-of-type { margin-top: 0; }
.contact-group-title span { color: var(--muted); font-weight: 400; }
.permit-summary summary { cursor: pointer; color: var(--cyan-soft); }
.permit-summary { min-width: 0; max-width: 100%; }
.permit-summary summary { max-width: 100%; }
.permit-summary > div { min-width: 0; max-width: 100%; }
.permit-summary p { margin: 6px 0 0; white-space: normal; overflow-wrap: anywhere; }
.project-input-sections { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.project-input-sections .project-section { margin-top: 0; }
.project-section-shows { order: 1; }
.project-section-locations { order: 2; }
.project-section-scenarios { order: 3; }
.project-section .section-title { margin-bottom: 8px; }
.project-section .section-help { margin: -2px 0 8px; }
.tbl-project-input { width: 100%; table-layout: fixed; font-size: 13px; }
.tbl-project-input th, .tbl-project-input td {
  padding-left: 3px; padding-right: 3px; overflow: visible; text-overflow: clip;
}
.tbl-project-input .c-name { white-space: normal; word-break: normal; overflow-wrap: normal; }
.tbl-project-input .code-name { white-space: normal; word-break: normal; overflow-wrap: normal; }
.tbl-project-input .code-name .code { display: block; margin: 0 0 3px; }
/* F-1 고침: 명칭·사용 열은 한 줄로 묶지 않는다.
   칸(overflow:visible)이 넘침을 흘려보내므로, nowrap이면 14자 명칭이 칸을 넘어
   옆 칸 글자 위에 겹쳐 그려졌다(장소 명칭 겹침·191,200대 뭉갬). 좁으면 두 줄로
   내려가게 두어 겹침을 없앤다. word-break는 위 규칙(normal)을 그대로 따른다. */
.tbl-project-input .code-name .cn-name { display: block; white-space: normal; font-size: 13px; }
.tbl-project-input .code-name + .sub { white-space: normal; overflow-wrap: anywhere; }
.tbl-project-input .c-when { white-space: nowrap; }
.tbl-project-input .c-usage, .tbl-project-input .c-usage-detail { white-space: normal; }
.tbl-project-input .c-memo { width: 4%; white-space: nowrap; text-align: right; overflow: visible; position: relative; }
.tbl-project-input .c-act3 { width: 12%; white-space: nowrap; text-align: right; }
.tbl-project-input .c-act3 .btn { min-width: 3rem; padding-left: 7px; padding-right: 7px; }
.project-section-shows .tbl-project-input .c-name { width: 17%; }
.project-section-shows .tbl-project-input .c-when { width: 16%; }
.project-section-shows .tbl-project-input .c-num { width: 4%; }
.project-section-shows .tbl-project-input .c-permit { width: 8%; }
.project-section-shows .tbl-project-input .permit-cell { display: block; white-space: normal; }
.project-section-shows .tbl-project-input .permit-cell .code { display: block; min-width: 0; margin-bottom: 3px; text-align: left; }
.project-section-shows .tbl-project-input .c-status { width: 7%; }
.project-section-shows .tbl-project-input .c-act3 { width: 10%; }
/* F-1 고침: 장소 명칭 칸을 14%→18%로 넓힌다. 폭은 사용 드론쇼·드론·시나리오 열이
   아니라(그 열도 좁으면 겹친다) 오른쪽 사용허가·버튼 열에서 가져온다. */
.project-section-locations .tbl-project-input .c-name { width: 18%; }
.project-section-locations .tbl-project-input .c-usage { width: 30%; }
.project-section-locations .tbl-project-input .c-usage-detail { width: 28%; }
.project-section-locations .tbl-project-input .c-cnt { width: 7%; }
.project-section-locations .tbl-project-input .c-act3 { width: 13%; }
.project-section-scenarios .tbl-project-input .c-name { width: 20%; }
.project-section-scenarios .tbl-project-input .c-usage { width: 26%; white-space: normal; word-break: keep-all; }
.project-section-scenarios .tbl-project-input .c-num { width: 5%; }
.project-section-scenarios .tbl-project-input .c-cnt { width: 6%; }
.project-section-scenarios .tbl-project-input .c-act3 { width: 12%; }
.tbl-project-input .memo-body {
  position: absolute; z-index: 20; right: 0; top: 2rem;
  width: 26rem; max-width: min(26rem, 70vw); padding: 12px;
  background: var(--navy-950); border: 1px solid var(--line); text-align: left;
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}
.tbl-project-input .memo-add { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; }
.tbl-project-input .memo-add input[name="body"] { min-width: 0; width: 100%; padding-right: 58px; }
.tbl-project-input .memo-add .field-count { right: 5.2rem; bottom: 13px; }
@media (max-width: 1100px) {
  .project-overview { grid-template-columns: 1fr; }
  .page-head:has(.project-head-staff) .actions { max-width: none; }
}
.request-page-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.8rem}
.request-shared-grid,.request-columns-head{display:grid;grid-template-columns:minmax(0,3fr) minmax(18rem,2fr);gap:1.25rem}
.request-columns-head{padding:.7rem 1rem;border-bottom:1px solid var(--line,#28415d)}
.request-question-v2{padding:1rem 0;border-bottom:1px solid var(--line,#28415d)}
.request-question-v2>h3{margin:0 0 .65rem;font-size:20px}.contribution-list{list-style:none;margin:0 0 .7rem;padding:0;display:grid;gap:.45rem}
.contribution-list li{padding:.55rem .7rem;border:1px solid var(--line,#28415d);border-radius:4px}.contribution-list strong{display:block;margin-bottom:.2rem;color:inherit}
.contribution-add{display:grid;grid-template-columns:1fr auto;gap:.5rem;align-items:end}.contribution-add textarea{min-width:0}.contribution-empty{margin:.45rem 0}
.request-sms-dialog{width:min(42rem,calc(100vw - 2rem));color:inherit;background:#0d1d31;border:1px solid #3b5878;padding:1.2rem}.request-sms-dialog::backdrop{background:rgba(0,0,0,.7)}

/* 질문 관리 허브 유형 바 (2026-08-09) */
.q-hub { display: flex; gap: .4rem; margin: 0 0 1.4rem; border-bottom: 1px solid var(--line, #24384f); }
.q-hub-tab { padding: .55rem 1.1rem; font-size: 14px; color: #9cafc5; text-decoration: none; border: 1px solid transparent; border-bottom: none; border-radius: 8px 8px 0 0; position: relative; top: 1px; }
.q-hub-tab:hover { color: #f5f8fc; }
.q-hub-tab.on { color: #f5f8fc; font-weight: 700; background: #11233a; border-color: var(--line, #24384f); border-bottom: 1px solid #11233a; }

/* 질문 라이브러리 / 세트 구성 하위 바 — 알약 형태로 유형 바와 구분 (허용 팔레트) */
.q-view { display: flex; gap: .5rem; margin: 0 0 1.2rem; }
.q-view-tab { padding: .4rem 1rem; font-size: 14px; color: #9cafc5; text-decoration: none; border: 1px solid var(--line, #24384f); border-radius: 999px; }
.q-view-tab:hover { color: #f5f8fc; }
.q-view-tab.on { color: #f5f8fc; font-weight: 700; background: #11233a; border-color: #9beeff; }
.opt-check { margin-right: 1.2rem; white-space: nowrap; }

/* 텍스트 넘침 규칙 (대표 확정 2026-08-09) — .clip이 넘치면 시안 점선 밑줄, 누르면 말풍선 */
.clip { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.clip.is-clipped { border-bottom: 1px dashed var(--cyan, #7ec3e8); cursor: pointer; }
.clip-pop {
  position: absolute; z-index: 9999; max-width: min(90vw, 440px);
  background: var(--panel, #0f1e33); color: var(--text, #e8edf4); border: 1px solid var(--cyan, #7ec3e8);
  border-radius: 8px; padding: .55rem .8rem; font-size: .85rem; line-height: 1.6;
  box-shadow: 0 8px 24px rgba(0,0,0,.5); white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere;
}

/* 사용안내(201) 탭·문서 버전·흐름도 (2026-08-09) */
.guide-tabs { flex-wrap: wrap; }
.doc-ver { color: var(--muted); font-size: 13px; margin: -0.4rem 0 1.2rem; }
.doc-ver strong { color: var(--cyan-soft); }
.flow-diagram { background: var(--navy-950, #07111f); border: 1px solid var(--line); border-radius: 10px; padding: 12px; overflow-x: auto; text-align: center; }
.flow-svg { max-width: 100%; height: auto; }

/* 화면번호 목록 영역 소제목 */
.guide-table .cyan { color: var(--cyan-soft); }

/* 사용안내 · 고객 포털 예시 화면 갤러리 (2026-08-09) */
.guide-shots { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; margin-top: 12px; }
.guide-shot { margin: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--navy-950, #07111f); }
.guide-shot figcaption { padding: 8px 12px; font-size: 13px; font-weight: 700; color: var(--cyan-soft); border-bottom: 1px solid var(--line); }
.guide-shot img { display: block; width: 100%; height: auto; }
@media (max-width: 1100px){ .guide-shots { grid-template-columns: 1fr; } }
.guide-shot .shot-desc { margin: 0; padding: 8px 12px 12px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); }

/* 고객포털(801) 사용법 안내 — 화면에 보이는 실제 크기 그대로 */
.portal-step .portal-step-no { display:inline-block; min-width:2.6rem; margin-right:.4rem; color: var(--cyan-soft); }
.portal-step-intro { margin: 2px 0 8px; color: var(--text); }
.portal-step-how { margin: 0 0 16px; padding-left: 1.3rem; color: var(--muted); line-height: 1.9; }
.portal-step-how li { margin: 2px 0; }
.portal-step-how b { color: var(--text); }
.portal-step > a { display:block; overflow-x:auto; border:1px solid var(--line); border-radius:8px; background: var(--navy-950,#07111f); }
.portal-step-img { display:block; max-width:none; width:1440px; height:auto; }
.portal-step .shot-hint { margin:6px 0 0; font-size:13px; color:var(--muted); }
/* 302 프로젝트 수정 — 확정 시안(2026-08-11). 임의 재배치 금지. */
.project-edit-v2{max-width:1100px;color:var(--text,#f5f8fc)}
.project-edit-v2 input,.project-edit-v2 select{background:#07111f;border:1px solid #35506a;color:#f5f8fc;height:36px;padding:7px 11px;font:inherit;min-width:0}
.project-edit-v2 input::placeholder{color:#5d7891}.pe-wrap{max-width:1100px}.pe-basics{display:flex;gap:10px;margin-bottom:10px;align-items:center}.pe-basics>strong{white-space:nowrap}.pe-project-name{flex:1;max-width:460px}.pe-project-name>input{width:100%;height:38px;padding-right:58px}.pe-name-wrap{display:block;position:relative;min-width:0;height:36px}.pe-name-wrap>.pe-name{width:100%;padding-right:54px}.pe-name-wrap>.field-count{right:10px;bottom:7px}.pe-code{display:inline-flex;align-items:center;background:#0d1d30;border:1px dashed #35506a;color:#9beeff;font-weight:700;height:38px;padding:7px 11px}.pe-test{font-size:13px;font-weight:700;color:#efd17e;border:1px solid rgba(239,209,126,.5);padding:3px 10px;white-space:nowrap}.pe-testband{background:rgba(239,209,126,.08);border:1px solid rgba(239,209,126,.45);padding:9px 14px;font-size:13px;margin-bottom:16px}.pe-testband b{color:#efd17e}.pe-dates{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}.pe-date{position:relative;background:#07111f;border:1px solid #35506a;padding:8px 12px;min-height:68px;overflow:hidden}.pe-date>span:first-child{display:block;font-size:13px;color:#9cafc5}.pe-date b{color:#efd17e;margin-left:6px}.pe-date-value{display:block;font-size:14px;margin-top:2px;text-decoration:underline;text-underline-offset:4px;cursor:pointer}.pe-date>input{position:absolute;left:0;right:0;bottom:0;width:100%;opacity:0;pointer-events:none}
.pe-section{background:#11233a;border:1px solid #263d57;margin-bottom:16px}.pe-section>header{display:flex;align-items:center;gap:10px;border-bottom:1px solid #263d57;padding:9px 16px;min-height:47px}.pe-section>header b{font-size:14px;color:#9beeff}.pe-section>header>span:not(.pe-add){font-size:13px;color:#9cafc5}.pe-add{margin-left:auto;width:84px;display:flex;justify-content:center}.pe-add button,.pe-action{display:inline-flex;align-items:center;justify-content:center;height:28px;width:64px;padding:0;font-size:13px;font-weight:700;background:transparent;border:1px solid #4a6d89;color:#f5f8fc;cursor:pointer}.pe-action{justify-self:center;color:#ff7d83;border-color:rgba(255,125,131,.55)}.pe-row{display:grid;grid-template-columns:56px 1fr 84px;gap:10px;align-items:center;padding:8px 16px;border-bottom:1px solid rgba(38,61,87,.72);position:relative;min-height:53px}.pe-row:last-child{border-bottom:0}.pe-id{font-weight:700;color:#25d4f4;text-align:center;font-size:13px}.pe-id.new{color:#efd17e}.pe-fields{display:grid;grid-template-columns:minmax(120px,1fr) 470px 64px 84px;gap:8px;align-items:center;min-width:0}.pe-name{width:100%}.pe-mid{min-width:0;display:flex;align-items:center;gap:8px}.pe-show-mid{display:grid;grid-template-columns:1fr 88px 88px}.pe-datetime{position:relative;display:block;background:#07111f;border:1px solid #35506a;height:36px;padding:7px 11px;overflow:hidden;cursor:pointer}.pe-datetime>span{text-decoration:underline;text-underline-offset:3px;white-space:nowrap}.pe-datetime input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}.pe-select{width:88px;padding-left:8px!important}.pe-ql{font-size:13px;white-space:nowrap;text-align:center}.pe-number{width:84px!important;text-align:right}.pe-readonly{display:flex;align-items:center;justify-content:flex-end;background:#0d1d30;border:1px dashed #35506a;color:#9beeff;height:36px;padding:7px 11px;font-size:14px;line-height:21px}.pe-nodel{font-size:13px;color:#9cafc5;text-align:center;line-height:1.3}.pe-permits{display:flex;flex-direction:column;align-items:stretch;gap:2px}.pe-permit-line{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:4px;color:#f5f8fc;cursor:pointer}.pe-permit-line.is-pending{color:#ff7d83}.pe-permit-line.is-disabled{text-decoration:none;cursor:default}.pe-location:has(.pe-permits .pe-permit-line:nth-child(2)) .pe-number{height:auto;min-height:36px;white-space:nowrap}.pe-row.is-archived{opacity:.56}.pe-row.is-archived .pe-id{color:#9cafc5}.pe-row.is-archived .pe-action{color:#9beeff;border-color:#4a6d89}.pe-archive-detail{grid-column:2/4;font-size:13px;color:#9cafc5}.pe-archive-detail summary{cursor:pointer;text-decoration:underline;text-decoration-style:dotted}.pe-foot{display:flex;justify-content:flex-end;gap:8px;max-width:1100px;margin-top:6px}
.pe-permit-line:not(a){text-decoration:none;cursor:default}
@media(max-width:1200px){.pe-fields{grid-template-columns:minmax(120px,1fr) minmax(350px,470px) 64px 84px}.pe-dates{grid-template-columns:repeat(2,1fr)}}
.pe-readonly-view { max-width: none; }
.pe-readonly-view .pe-wrap { width: calc((100% - 18px) * 7 / 12); max-width: none; }
@media(max-width:1100px){.pe-readonly-view .pe-wrap{width:100%}}
@media(max-width:850px){.project-edit-v2{min-width:920px}.project-edit-v2{overflow-x:auto}}
.project-operation-controls .result-compose{display:grid;grid-template-columns:minmax(110px,1fr) minmax(160px,1.4fr) auto;gap:6px;align-items:end;min-width:390px;text-align:left}.project-operation-controls .result-compose .field{margin:0}.project-operation-controls .result-compose select,.project-operation-controls .result-compose input{width:100%;height:32px}.project-operation-controls .result-compose .form-actions{margin:0}.project-operation-controls .result-compose .form-actions .btn{height:32px;white-space:nowrap}
/* 404A 만족도 세트 구성 — 행 위치가 순서이며 ▲▼로 이동한다. */
#satis-composer th.c-lab,#satis-composer td.c-lab,#req-composer th.c-lab,#req-composer td.c-lab{width:1.8rem;text-align:center;padding-left:4px;padding-right:0}
#satis-composer th.c-num,#satis-composer td.c-num,#req-composer th.c-num,#req-composer td.c-num{text-align:center;white-space:nowrap;width:4.2rem;padding-left:0;padding-right:4px}
#satis-composer .c-num .btn,#req-composer .c-num .btn{min-width:24px;width:24px;height:22px;padding:0;font-size:13px;line-height:1}
#satis-composer .ord-no,#req-composer .ord-no{display:inline-block;min-width:1.1rem;text-align:right;margin-right:2px;font-size:13px}
#satis-composer td,#req-composer td{padding-top:4px;padding-bottom:4px}

/* 운영관리 하위 메뉴 */
.nav-group{display:block;margin:10px 12px 3px;color:var(--gold,#efd17e);font-size:12px;font-weight:700;letter-spacing:.08em}
.nav a.nav-sub{margin-left:8px;padding-left:14px;font-size:13px;border-left:1px solid var(--line,#263d57)}

/* 배터리·드론·완료보고서 공통 */
.bt-tabs{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--line,#263d57);margin-bottom:18px;overflow:visible}
.bt-tabs a{flex:1 1 6.25rem;min-width:6.25rem;height:34px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line,#263d57);border-bottom:0;background:#0a1a2c;color:#9cafc5;font-size:13px;text-decoration:none;white-space:normal;text-align:center;line-height:1.25}
.bt-tabs a.bt-on{background:#11233a;color:#efd17e;font-weight:700;border-top:2px solid #efd17e}
.bt-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:14px}.bt-cards4{grid-template-columns:repeat(4,1fr)}
.bt-card{background:#0a1a2c;border:1px solid var(--line,#263d57);padding:12px 14px}.bt-card .k{color:#9cafc5;font-size:13px}.bt-card .v{font-size:20px;font-weight:700;margin-top:2px;display:inline-block}.bt-card.bt-hero{border-color:#efd17e}.bt-card.bt-hero .v{color:#efd17e}
.bt-link{text-decoration:underline;text-underline-offset:5px;cursor:pointer}.bt-ok{color:#7ee0b0}.bt-danger{color:#ff7d83}.bt-gold{color:#efd17e}.bt-cyan{color:#9beeff}.bt-warn{color:#efd17e}
.bt-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.bt-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.bt-grid2>*,.bt-grid3>*{min-width:0}.bt-mt{margin-top:14px}.bt-h{font-size:14px;margin:0 0 8px;color:#efd17e}
.bt-table{width:100%;border-collapse:collapse;font-size:13px}.bt-table th{background:#11233a;color:#9cafc5;font-weight:700;padding:6px 8px;border:1px solid var(--line,#263d57);text-align:center;white-space:nowrap}.bt-table td{padding:5px 8px;border:1px solid var(--line,#263d57);overflow-wrap:anywhere}.bt-table td>input,.bt-table td>select,.bt-table td>textarea{box-sizing:border-box;max-width:100%;min-width:0}.bt-table td.num{text-align:right;font-variant-numeric:tabular-nums}.bt-table td.c{text-align:center}.bt-table tr.bt-warnrow td{background:rgba(239,209,126,.08)}
.bt-edit-form{display:grid;grid-template-columns:repeat(2,minmax(150px,1fr));gap:8px;width:min(560px,80vw);padding:10px;margin-top:6px;background:#07111f;border:1px solid var(--line,#263d57)}.bt-edit-form label{display:grid;gap:3px;color:#9cafc5;font-size:12px}.bt-edit-form input,.bt-edit-form select{width:100%;height:32px}.bt-edit-form .btn{align-self:end;height:32px}
.permit-file-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.permit-file-row input[name=reason],.inline-form input[name=reason]{min-width:170px;max-width:260px;height:30px}
.tbl-survey{min-width:900px;table-layout:fixed}.tbl-survey th,.tbl-survey td,.tbl-permit-hist th,.tbl-permit-hist td{vertical-align:middle}.tbl-survey .c-status,.tbl-survey .c-act,.tbl-permit-hist .c-status{white-space:normal;line-height:1.35}.tbl-permit-hist{min-width:1120px;table-layout:fixed}
input[type=date],input.date-text-input{min-width:150px}input[type=time]{min-width:112px}
/* 수량은 직접 입력한다. 브라우저 기본 ±1 증감 화살표는 전 화면에서 숨긴다. */
input[type=number] { appearance: textfield; -moz-appearance: textfield; }
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.bt-scroll{max-height:232px;overflow:auto}.bt-scroll thead th{position:sticky;top:0}.bt-chip{display:inline-flex;width:72px;min-width:72px;height:28px;align-items:center;justify-content:center;text-align:center;padding:1px 6px;white-space:nowrap;font-size:13px;border:1px solid var(--line,#263d57);color:#07111f;font-weight:700}
.bt-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-width:0;margin-bottom:10px}.bt-l{color:#9cafc5;font-size:13px;white-space:nowrap}.bt-sp{margin-left:auto}.bt-on{outline:2px solid #25d4f4}.bt-gbtn{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:space-between;gap:6px;width:126px;min-width:126px;height:38px;padding:4px 8px}.bt-num{width:90px}.bt-short{width:110px}.bt-wide{flex:1;min-width:0}.bt-cell{width:56px;text-align:right}
.bt-tablewrap{width:100%;overflow-x:auto}.bt-maint-table{min-width:1032px;table-layout:fixed}.bt-maint-table th:nth-child(1){width:70px}.bt-maint-table th:nth-child(2){width:74px}.bt-maint-table th:nth-child(3){width:170px}.bt-maint-table th:nth-child(4){width:64px}.bt-maint-table th:nth-child(5){width:72px}.bt-maint-table th:nth-child(6){width:250px}.bt-maint-table th:nth-child(7){width:96px}.bt-maint-table th:nth-child(8){width:160px}.bt-maint-table th:nth-child(9){width:76px}.bt-maint-table td{overflow:hidden;vertical-align:middle}.bt-maint-table td>select,.bt-maint-table td>input:not([type=hidden]){display:block;width:100%;max-width:100%;min-width:0}.bt-maint-table td>select+input{margin-top:6px}.bt-maint-table td .btn{max-width:100%;white-space:normal}
.bt-memo{border:1px solid var(--line,#263d57);background:#07111f;padding:10px 12px;margin-bottom:10px}.bt-memo textarea{width:100%;background:transparent;border:0;color:#f5f8fc;font-size:13px;padding:6px 0 0;height:90px;min-height:90px;resize:vertical}.bt-note{border:1px dashed var(--line,#263d57);padding:8px 12px;margin-top:10px;font-size:13px}.bt-note pre{white-space:pre-wrap;font:inherit}.bt-small{font-size:13px}.bt-inline{display:inline}.bt-bar{height:10px;background:#11233a;position:relative}.bt-bar i{position:absolute;inset:0 auto 0 0;background:#25d4f4;opacity:.65}.bt-pager{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:10px}.bt-listbox{border:1px solid var(--line,#263d57);background:#07111f;max-height:230px;overflow:auto;padding:6px 10px;display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:2px 10px}.bt-pick{display:flex;align-items:center;min-width:0;font-size:13px;white-space:nowrap}.bt-pick input{flex:0 0 auto}.bt-code{background:#c74b52;border-color:#c74b52;color:#f5f8fc;font-weight:700}.bt-idlink{color:#9beeff;text-decoration:underline;text-underline-offset:3px}

/* 운영관리 표는 화면 폭을 밀어내지 않고 해당 표 안에서만 스크롤한다. */
.bt-grid2 .panel,.bt-grid3 .panel{min-width:0;overflow-x:auto}

/* 완료보고서 */
.sr-tablewrap{overflow-x:auto}.sr-list{min-width:1100px}.sr-list td{height:38px}.sr-row{cursor:pointer}.sr-row:hover td{background:rgba(37,212,244,.05)}.sr-ellip{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sr-twocol{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}.sr-eval{border-color:#efd17e}.sr-grades{display:flex;gap:8px}.sr-grade{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line,#263d57);background:#0a1a2c;font-size:20px;font-weight:700;cursor:pointer;color:#9cafc5}.sr-grade input{display:none}.sr-grade.sr-on{background:#efd17e;border-color:#efd17e;color:#17200f}.sr-form .sr-lab{width:120px;text-align:left;background:#11233a;color:#9cafc5;white-space:nowrap}.sr-form td{padding:0 8px;height:34px}.sr-cellinput{width:100%;background:transparent;border:0;color:#f5f8fc;font-size:13px;height:32px}.sr-celltextarea{width:100%;background:transparent;border:0;color:#f5f8fc;font-size:13px;padding:8px 0;height:64px;resize:vertical}.sr-tall{height:80px;vertical-align:top}.sr-tall7{height:238px;vertical-align:top}.sr-tall7 .sr-celltextarea{height:222px}
@media(max-width:1000px){.bt-grid2,.bt-grid3,.sr-twocol{grid-template-columns:1fr}.bt-listbox{grid-template-columns:repeat(2,1fr)}}

/* 이력 가져오기 미리보기(D09) */
.bt-table tr.bt-okrow > td{background:rgba(126,224,176,.07)}
.bt-table td > select[name*="[stage]"]{min-width:132px}
.bt-table td > select[name*="[result]"]{min-width:104px}
.bt-table td > select[name*="[drone_id]"]{min-width:190px}

/* D10 보험 — 대상 그룹 고르기. 체크상자와 그룹 칩을 한 덩어리로 묶는다 (2026-08-12) */
.bt-check { display: inline-flex; align-items: center; gap: 5px; margin-right: 10px; cursor: pointer; }
.bt-check input { margin: 0; }
/* 보험계약 입력줄 — 넓은 칸 하나가 줄을 다 먹어 다음 항목이 밀려 내려가던 문제.
   칸마다 폭을 정해 한 줄에 나란히 서게 한다 (2026-08-12). */
.bt-mid { width: 230px; }
.ins-form .bt-row > input[type=date],.ins-form .bt-row > input.date-text-input { width: 150px; flex: 0 0 auto; }
.ins-form .bt-row > select { flex: 0 0 auto; max-width: 260px; }
.ins-form .bt-row > .count-wrap { flex: 0 0 auto; }
.ins-adjust > .count-wrap { flex: 1; min-width: 220px; }
.ins-adjust > select { flex: 0 0 auto; }
.ins-adjust > input[name=short_code] { width: 170px; flex: 0 0 auto; }

/* ── D10 보험 (2026-08-12 대표 지시) ─────────────────────────────
   "입력박스등의 앞자리를 맞추라" — 줄마다 맨 앞 라벨의 폭을 고정해
   입력칸의 왼쪽 끝이 세로로 한 줄에 서게 한다. 줄 가운데의 라벨(보험사·연락처 등)은
   그대로 두어 칸이 늘어지지 않게 한다. */
.ins-form .bt-row > label.bt-l:first-of-type,
.ins-pick > label.bt-l:first-of-type,
.ins-adjust > label.bt-l:first-of-type { flex: 0 0 7rem; }
.ins-form .bt-row,
.ins-pick,
.ins-adjust { align-items: center; }
.ins-tilde { flex: 0 0 auto; color: #9cafc5; }
.ins-code { width: 190px; flex: 0 0 auto; }
.ins-n { display: inline-block; min-width: 2.2rem; margin-left: 4px; font-size: 13px; color: #f5f8fc; }
.bt-chip.ins-manual { background: #263d57; border-color: #263d57; color: #f5f8fc; }
.bt-h4 { margin: 16px 0 8px; font-size: 14px; color: #efd17e; font-weight: 700; }

/* 표가 화면보다 넓으면 본문 전체를 밀어내는 대신 그 표만 옆으로 넘긴다.
   (2026-08-12 화면 점검 — 308 신청 이력 표가 1440px 화면에서 본문을 1586px로 늘렸다)
   .shell은 grid이고 grid 칸의 기본 min-width는 auto라, 본문 안에 넓은 표가 하나만 있어도
   본문 칸 자체가 그 표 폭까지 벌어져 화면 전체에 가로 스크롤이 생긴다.
   본문 칸의 최소 폭을 풀어 두고, 넘치는 것은 그 표 안에서만 넘기게 한다. */
.shell > .main { min-width: 0; }
.table-wrap { overflow-x: auto; }
.tbl-scroll { overflow-x: auto; max-width: 100%; }
/* 두 칸 배치도 grid라 칸의 기본 min-width가 auto다. 안에 넓은 표가 있으면
   칸이 표 폭까지 벌어져 화면을 밀어낸다. 최소 폭을 풀어 표 안에서만 넘기게 한다. */
.bt-grid2 > *, .bt-cards > * { min-width: 0; }
/* B04 세부검사 칸: 유형 선택이 가장 긴 항목 폭까지, 메모는 최소 200px까지 벌어져
   한 줄에 들어가지 못하고 칸을 넘쳤다. 두 줄로 쌓아 칸 안에 담는다 (2026-08-12 화면 점검). */
.bt-table td > select[name="exam_type_id"],
.bt-table td > input[name="exam_memo"] { display: block; width: 100%; max-width: 100%; min-width: 0; }
.bt-table td > select[name="exam_type_id"] { margin-bottom: 4px; }

/* 프로젝트 상세의 드론쇼 표 일자 칸은 폭이 16%로 정해져 있는데 nowrap이 걸려 있어
   '2026-10-05(월) 시간 미정'이 8px 모자라 잘렸다. 폭을 넓히면 다른 열을 밀어내므로
   이 칸만 줄바꿈을 허용한다 (2026-08-12 화면 점검). */
.project-section-shows .tbl-project-input .c-when { white-space: normal; }
/* 고객 관리 메모 칸도 프로젝트 표와 같은 방식으로 띄운다.
   칸 폭이 70px뿐이라, 펼치면 본문이 옆 열 위로 흘러넘쳤다 (2026-08-12 화면 점검). */
td.c-memo { position: relative; }
td.c-memo .memo-body {
  position: absolute; z-index: 20; right: 0; top: 2rem;
  width: 26rem; max-width: min(26rem, 70vw); padding: 12px;
  background: var(--navy-950); border: 1px solid var(--line); text-align: left;
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}
/* [조회][수정] 두 단추가 1280px에서 7px 모자라 잘렸다.
   표 칸은 비율 폭이라 min-width가 먹지 않는다 — 비율을 조금 올린다 (2026-08-12 화면 점검). */
.project-section-shows .tbl-project-input .c-act3 { width: 13.5%; }
.project-section-scenarios .tbl-project-input .c-act3 { width: 14%; }
/* 비율 폭이라 넓히는 데 한계가 있다 — 이 칸만 좌우 여백을 줄여 두 단추를 담는다. */
.tbl-project-input td.c-act3 { padding-left: 6px; padding-right: 6px; }

/* D10 보험증권 — 실제 드론과 분리된 가상 보험 명부 */
.bt-cards3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ins-form{margin-top:12px}
.ins-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ins-grid label,.ins-full{display:flex;flex-direction:column;gap:4px;color:#9cafc5;font-size:13px;min-width:0}
.ins-grid input,.ins-grid select,.ins-full input{width:100%;min-width:0;box-sizing:border-box}
.ins-full{margin-top:12px}
.ins-installments{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px}
.ins-installment{display:grid;grid-template-columns:40px minmax(135px,1fr) minmax(120px,1fr);gap:8px;align-items:center;min-width:0}
.ins-installment input{width:100%;min-width:0}
.ins-check{display:flex;align-items:center;gap:7px;margin:14px 0;color:#f5f8fc;font-size:13px}
.ins-check input{flex:0 0 auto}
.ins-detail-grid{display:grid;grid-template-columns:minmax(320px,1fr) minmax(360px,1fr);gap:18px;margin-top:14px}
.ins-detail-grid>*{min-width:0}.ins-unit-list{max-height:320px}
.ins-file-row{display:grid;grid-template-columns:minmax(150px,1fr) auto;gap:8px;align-items:center;border-bottom:1px solid var(--line,#263d57);padding:10px 0}
.ins-file-row>input,.ins-file-row>.ins-progress{grid-column:1/-1;max-width:100%}
@media(max-width:1050px){.ins-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ins-detail-grid{grid-template-columns:1fr}}
@media(max-width:720px){.bt-cards3,.ins-grid,.ins-installments{grid-template-columns:1fr}}

/* ── 302·303 구성정보 공간 개선 (2026-08-15 대표 지시) ───────────────────
   지시 내용
     1) "3개의 박스로 구분하고 있는데 박스 하나로 통합해도 될듯"
     2) "우측에 공간이 비어있는데 각 항목별 2줄로 사용해서 공간 낭비"
     3) "화면 전체를 최대한 활용해서 화면이 아래로 넘치지 않기를 바래"
   색·글자크기·테두리 두께·입력칸 높이는 확정 시안 그대로 두고 배치만 바꾼다.
   안쪽 .pe-section 구조는 손대지 않는다 — 추가·삭제·복원 스크립트가 그 구조에 의존한다.
   장소·시나리오를 좌우로 세우는 것은 조회화면(303)에서만 기본으로 한다.
   편집화면(302)은 행마다 삭제 버튼과 "삭제 불가" 안내가 더 붙어 좌우로 세우면
   1440px에서 서로 겹친다. 편집은 1700px 이상에서만 좌우로 세운다. */

/* (3) 폭 제한 해제. 1100px 고정이 우측 공백의 원인이었다. */
.project-edit-v2 { max-width: none; }
.project-edit-v2 .pe-wrap { max-width: none; }
.project-edit-v2 .pe-foot { max-width: none; }
.pe-readonly-view .pe-wrap { width: 100%; }

/* (1) 바깥 테두리 하나 = 통합 박스. 안쪽 세 덩어리는 테두리를 벗는다. */
.pe-groups {
  display: grid; grid-template-columns: 1fr;
  background: #11233a; border: 1px solid #263d57; margin-bottom: 16px;
}
.pe-groups-head {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid #263d57; padding: 9px 16px; min-height: 47px;
}
.pe-groups-head b { font-size: 14px; color: #9beeff; }
.pe-groups-head > span { font-size: 13px; color: #9cafc5; }
.pe-groups > .pe-section { background: transparent; border: 0; margin: 0; min-width: 0; }
.pe-groups > .pe-section[data-kind="show"] { grid-column: 1 / -1; border-bottom: 1px solid #263d57; }
.pe-groups > .pe-section[data-kind="location"] { border-bottom: 1px solid #263d57; }

/* 안쪽 제목줄은 바깥 제목보다 한 단 낮게. 높이 47 → 34 */
.pe-groups > .pe-section > header {
  min-height: 34px; padding: 5px 16px; background: rgba(38,61,87,.34); flex-wrap: nowrap;
}
.pe-groups > .pe-section > header b { color: #efd17e; }

/* 긴 설명이 두세 줄로 접혀 줄 높이를 밀어 올리던 문제. 한 줄로 두고 넘치면 자른다. */
.pe-groups > .pe-section > header > span:not(.pe-add) {
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* (2) 트랙 최소폭을 0으로 둔다. 최소폭을 주면 좁은 화면에서 칸이 트랙 밖으로 삐져나와
   옆의 "사용수량" 라벨과 겹친다 (1200px에서 실제로 겹쳤다). */
.pe-groups > .pe-section[data-kind="show"] .pe-fields {
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px) 64px 84px;
}
.pe-groups > .pe-section[data-kind="show"] .pe-show-mid {
  grid-template-columns: minmax(0, 1fr) 88px 88px; justify-content: stretch;
}
.pe-groups > .pe-section[data-kind="location"] .pe-fields {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) 64px 84px;
}
.pe-groups .pe-fields > *, .pe-groups .pe-mid > * { min-width: 0; }
.pe-groups .pe-select { width: 100%; }

/* 읽기 전용(303)에서 이름이 두 줄로 접히던 문제 — 한 줄로 두고 넘치면 잘라 준다. */
.pe-readonly-view .pe-readonly.pe-name {
  justify-content: flex-start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 좌우 2단 — 조회화면은 1300px부터, 편집화면은 1700px부터 */
@media (min-width: 1300px) {
  .pe-readonly-view .pe-groups { grid-template-columns: 1fr 1fr; }
  .pe-readonly-view .pe-groups > .pe-section[data-kind="location"] {
    border-right: 1px solid #263d57; border-bottom: 0;
  }
  .pe-readonly-view .pe-groups > .pe-section[data-kind="location"] .pe-fields {
    grid-template-columns: minmax(110px, 1fr) minmax(150px, 1.05fr) 64px 84px;
  }
  /* 가운데 칸은 폭 0으로 접되 display:none 은 쓰지 않는다.
     숨기면 그리드 항목 수가 줄어 뒤 칸이 한 칸씩 당겨지고 "사용수량"이 사라진다. */
  .pe-readonly-view .pe-groups > .pe-section[data-kind="scenario"] .pe-fields {
    grid-template-columns: minmax(0, 1fr) 0 64px 84px;
  }
}
@media (min-width: 1700px) {
  form.project-edit-v2 .pe-groups { grid-template-columns: 1fr 1fr; }
  form.project-edit-v2 .pe-groups > .pe-section[data-kind="location"] {
    border-right: 1px solid #263d57; border-bottom: 0;
  }
}

/* 수량칸이 84px 트랙 안에서 2px 넘쳐 1800px 화면에 가로 스크롤이 생기던 것. */
.pe-groups .pe-number { width: 100% !important; max-width: 84px; }

/* ── 짧은 라벨과 입력칸을 한 줄로 (2026-08-15 대표 지시 · 시안 항목 1) ─────
   "짧은제목과 입력칸을 한줄로 해서 정리하면 줄 갯수를 대폭 줄일수 있는데"
   전 화면에 한꺼번에 적용했더니 302 신규등록처럼 한 칸 안에 안내문·체크상자·
   조합입력이 함께 들어간 화면이 무너졌다. 그래서 화면이 직접 켜는 방식으로 둔다.
   폼에 inline-labels 를 붙인 화면만 라벨이 왼쪽으로 간다.
   붙이지 않은 화면은 지금까지와 똑같다. */
.form-grid.inline-labels > .field {
  grid-template-columns: 8rem minmax(0, 1fr);
  align-items: center; gap: 6px 10px;
}
.form-grid.inline-labels > .field > label {
  font-size: 13px; font-weight: 700; color: var(--muted);
  text-align: right; align-self: center;
}
/* 라벨을 입력칸 안에 띄워 두던 방식은 왼쪽으로 나왔으므로 원래 자리로 되돌린다. */
.form-grid.inline-labels > .field.static-label { position: static; }
.form-grid.inline-labels > .field.static-label > label {
  position: static; top: auto; left: auto; pointer-events: auto;
}
.form-grid.inline-labels > .field.static-label > input,
.form-grid.inline-labels > .field.static-label > select { padding: 7px 11px; min-height: 36px; }
/* 입력칸 아래에 붙는 안내·오류·글자수는 입력칸 쪽 칸에 둔다. */
.form-grid.inline-labels > .field > .form-hint,
.form-grid.inline-labels > .field > .field-error,
.form-grid.inline-labels > .field > .field-count { grid-column: 2 / -1; }
/* 여러 줄 입력과 읽기전용은 라벨을 위쪽에 붙여 둔다. */
.form-grid.inline-labels > .field:has(> textarea) { align-items: start; }
.form-grid.inline-labels > .field:has(> textarea) > label { padding-top: 9px; }
/* 라벨이 없는 칸은 예전처럼 한 칸을 다 쓴다. */
.form-grid.inline-labels > .field:not(:has(> label)) { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1099px) {
  .form-grid.inline-labels > .field { grid-template-columns: minmax(0, 1fr); }
  .form-grid.inline-labels > .field > label { text-align: left; }
}

/* 좁은 화면에서 입력칸 묶음이 트랙 밖으로 나가 오른쪽 "삭제 불가" 안내와 겹치던 것.
   1fr 의 기본 최소폭은 auto 라 내용이 크면 트랙이 벌어진다. 0 으로 못박는다. */
.pe-groups .pe-row { grid-template-columns: 56px minmax(0, 1fr) 84px; }
.pe-groups .pe-readonly { min-width: 0; }

/* 이름 칸에 최소폭이 없으면 좁은 화면에서 0px 로 접혀 버린다. 이름이 날짜칸보다 중요하다. */
.pe-groups > .pe-section[data-kind="show"] .pe-fields {
  grid-template-columns: minmax(120px, 1fr) minmax(0, 460px) 64px 84px;
}

/* 테두리·안쪽여백까지 폭에 포함시킨다. 안 그러면 트랙보다 2px 커져 가로 스크롤이 생긴다. */
.pe-groups input, .pe-groups select, .pe-groups .pe-readonly { box-sizing: border-box; }

/* 시나리오는 가운데 칸을 쓰지 않는데 기본값 470px 이 그대로 남아 트랙을 밀어냈다.
   (1100px 겹침 · 1800px 가로 스크롤이 모두 이것 때문이었다)
   폭 0 으로 접되 display:none 은 쓰지 않는다 — 숨기면 뒤 칸이 한 칸씩 당겨진다. */
.pe-groups > .pe-section[data-kind="scenario"] .pe-fields {
  grid-template-columns: minmax(0, 1fr) 0 64px 84px;
}

/* ── 글자수 표시 자리 정렬 (2026-08-18) ──
   스크립트가 만드는 .count-wrap 에 CSS가 없어 inline 으로 남았다.
   상자 높이가 15px 밖에 안 돼 카운터가 입력칸보다 9px 위에 찍혔고,
   안의 입력칸이 절대배치인 날짜칸은 상자 폭이 0px 라 카운터가 칸 밖으로 나갔다.
   (2026-08-15 UI 작업과 무관한 기존 결함. 적용 전후 좌표가 같음을 확인했음) */
.count-wrap { display: block; position: relative; min-width: 0; }
.count-wrap > input, .count-wrap > textarea { width: 100%; }
.q-scope .bt-row > .count-wrap:has(> .q-drone-count) {
  flex: 0 0 190px; width: 190px;
}
/* 날유형 칸은 숨겨진 1px 입력칸이라 글자수가 의미 없다. 칸 밖으로 뜨던 것. */
.pe-datetime .field-count { display: none; }

/* ── 날짜칸 정리 (2026-08-18 대표 지시) ──────────────────────────────
   윗줄 요일표시와 아래 입력칸에 같은 날짜가 두 번 보였다.
   요일만 라벨 옆으로 보내고 값은 입력칸 하나로 본다.
   날짜는 YYYY-MM-DD 10자 고정이라 글자수는 세지 않는다. */
.pe-date {
  min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 8px; align-items: center;
}
.pe-date > span:first-child { display: block; min-width: 0; }
.pe-date .pe-date-value {
  display: inline-block; margin-top: 0; font-size: 13px; color: #efd17e;
  text-decoration: none; justify-self: end; white-space: nowrap; cursor: pointer;
}
.pe-date .count-wrap { grid-column: 1 / -1; }
.pe-date .field-count { display: none; }
.pe-date input { width: 100%; }

/* ── 장소 허가기간을 두 줄로 · 명칭 공간 최대 확보 (2026-08-18 대표 지시) ──
   지시
     "장소는 항상 일자가 2개 있어. 시작일과 종료일. FR TO. 날짜를 2줄로"
     "신청수량을 좀 더 우측으로 — 명칭 공간 최대한 확보"
   허가줄을 한 줄에 밀어넣느라 명칭이 잘렸다. 날짜는 자릿수가 고정이므로
   두 줄로 세워 고정폭만 쓰게 하고, 남는 폭은 전부 명칭에 준다. */
.pe-permit-line {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; column-gap: 6px; row-gap: 0;
  white-space: nowrap; overflow: visible; text-overflow: clip;
  text-decoration: none; line-height: 1.45;
}
.pe-permit-line > b { grid-row: 1 / 3; align-self: center; }
.pe-permit-fr, .pe-permit-to {
  font-variant-numeric: tabular-nums; white-space: nowrap;
  text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px;
}
.pe-permit-line.is-disabled .pe-permit-fr,
.pe-permit-line.is-disabled .pe-permit-to { text-decoration: none; }

/* 허가칸은 두 줄짜리 고정폭. 나머지는 전부 명칭이 가져간다. */
.pe-groups > .pe-section[data-kind="location"] .pe-fields {
  grid-template-columns: minmax(0, 1fr) 182px 64px 84px;
}
@media (min-width: 1300px) {
  .pe-readonly-view .pe-groups > .pe-section[data-kind="location"] .pe-fields {
    grid-template-columns: minmax(0, 1fr) 182px 64px 84px;
  }
}
/* 드론쇼 가운데 칸(일시·장소·시나리오)도 필요한 만큼만. 남는 폭은 명칭으로. */
.pe-groups > .pe-section[data-kind="show"] .pe-fields {
  grid-template-columns: minmax(0, 1fr) minmax(0, 366px) 64px 84px;
}
.pe-groups > .pe-section[data-kind="show"] .pe-show-mid {
  grid-template-columns: minmax(0, 1fr) 76px 76px;
}
/* 두 줄이 된 허가칸 때문에 줄 높이가 눌리지 않게 한다. */
.pe-groups > .pe-section[data-kind="location"] .pe-row { min-height: 57px; }

/* 좌우 2단 분기점 1300 → 1800.
   1300~1700 에서는 반칸이 좁아 장소 명칭이 24px 까지 눌렸다 (1440px 실측).
   명칭이 우선이므로 넓은 화면에서만 좌우로 세운다. */
@media (min-width: 1300px) and (max-width: 1799px) {
  .pe-readonly-view .pe-groups { grid-template-columns: 1fr; }
  .pe-readonly-view .pe-groups > .pe-section[data-kind="location"] {
    border-right: 0; border-bottom: 1px solid #263d57;
  }
  .pe-readonly-view .pe-groups > .pe-section[data-kind="scenario"] .pe-fields {
    grid-template-columns: minmax(0, 1fr) 0 64px 84px;
  }
}

/* ── 떠 있는 라벨의 긴 안내문 넘침 (2026-08-18) ─────────────────────
   302 신규등록의 "행사장소" 처럼 칸이 좁은데 라벨 안에 긴 안내문이 붙으면
   안내문이 세 줄로 접혀 칸 밖으로 나가고 0/255 글자수와 겹쳤다.
   (2026-08-15 UI 작업과 무관한 기존 결함. 적용 전 화면에서도 같음)
   라벨은 한 줄로 자르고 전체 문장은 마우스를 올리면 보인다. */
.field.float > label {
  max-width: calc(100% - 18px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.field.float > label .label-hint { cursor: help; }
/* 글자수 표시가 오른쪽 안쪽에 있으므로 그만큼 라벨을 먼저 자른다. */
.field.float.has-count > label { max-width: calc(100% - 74px); }

/* 행사장소 칸이 180px 밖에 안 돼 라벨의 "필수" 배지까지 잘렸다.
   행사장소는 255자를 받는 칸이므로 행사명과 나란히 넉넉히 준다.
   드론 수량은 숫자 몇 자리라 줄여도 된다. */
.project-title-row {
  grid-template-columns: minmax(20rem, 1.25fr) minmax(20rem, 1fr) minmax(11rem, 13rem);
}

/* 좌우 2단을 쓰면 반칸이 좁아 장소 명칭이 124px 까지 눌린다 (1920px 실측).
   대표 지시가 "명칭 공간 최대한 확보" 이므로 2단을 쓰지 않고 한 칸으로 세운다.
   세로는 285 → 373px 로 늘지만 명칭이 잘리지 않는다. */
.pe-readonly-view .pe-groups { grid-template-columns: 1fr; }
.pe-readonly-view .pe-groups > .pe-section[data-kind="location"] {
  border-right: 0; border-bottom: 1px solid #263d57;
}
.pe-readonly-view .pe-groups > .pe-section[data-kind="scenario"] .pe-fields {
  grid-template-columns: minmax(0, 1fr) 0 64px 84px;
}

/* ── 302 신규등록을 303 형식으로 통일 (2026-08-18 대표 지시) ─────────
   신규등록은 표(table) 구조라 .pe-row 로 바꾸면 행 추가·삭제 스크립트를
   전부 다시 써야 한다. 표는 그대로 두고 겉모습만 303과 맞춘다. */
.pe-groups-new { display: block; padding-bottom: 0; }
.pe-groups-new > .field.full { margin: 0; }
/* 각 덩어리의 제목줄 — 303 의 .pe-section > header 와 같은 높이·색 */
.pe-groups-new > .field.full > label {
  display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
  min-height: 34px; padding: 5px 16px; margin: 0;
  background: rgba(38,61,87,.34); border-bottom: 1px solid #263d57;
  font-size: 14px; font-weight: 700; color: #efd17e;
}
.pe-groups-new > .field.full > label .muted,
.pe-groups-new > .field.full > label strong { font-weight: 700; }
.pe-groups-new > .field.full > label .label-hint {
  font-weight: 400; color: #9cafc5; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pe-groups-new > .field.full > label .label-action { margin-left: auto; flex: 0 0 auto; }
.pe-groups-new > .field.full + .field.full > label { border-top: 1px solid #263d57; }
/* 표 자체 — 테두리 없이 303 의 행처럼 */
.pe-groups-new .table-wrap.plain { border: 0; background: transparent; overflow: visible; }
.pe-groups-new table.rowform { width: 100%; border-collapse: collapse; }
.pe-groups-new table.rowform td {
  border: 0; border-bottom: 1px solid rgba(38,61,87,.72);
  padding: 8px 8px; vertical-align: middle; background: transparent;
}
.pe-groups-new table.rowform tr:last-child td { border-bottom: 0; }
.pe-groups-new table.rowform td:first-child { padding-left: 16px; }
.pe-groups-new table.rowform td:last-child { padding-right: 16px; }
/* 맨 앞 코드칸은 303 과 같은 폭·색 */
.pe-groups-new td.c-code {
  width: 56px; text-align: center; font-weight: 700; color: #25d4f4; font-size: 13px;
}
/* 명칭이 가장 넓고, 날짜·시각·수량은 자릿수만큼만 */
.pe-groups-new td.c-name, .pe-groups-new td.c-text { width: auto; }
.pe-groups-new td.c-date { width: 168px; }
.pe-groups-new td.c-time { width: 132px; }
.pe-groups-new td.c-num  { width: 104px; }
.pe-groups-new td.c-act  { width: 84px; text-align: right; }
.pe-groups-new table.rowform td > input,
.pe-groups-new table.rowform td > select { width: 100%; box-sizing: border-box; }
.pe-groups-new td.c-num > input { max-width: 104px; }

/* 302 편집화면도 303 과 같은 세로 1단으로 통일 (2026-08-18 대표 지시).
   1700px 이상에서 장소·시나리오를 좌우로 세우던 것을 되돌린다.
   좌우로 세우면 반칸이 좁아 명칭이 눌린다. */
@media (min-width: 1700px) {
  form.project-edit-v2 .pe-groups { grid-template-columns: 1fr; }
  form.project-edit-v2 .pe-groups > .pe-section[data-kind="location"] {
    border-right: 0; border-bottom: 1px solid #263d57;
  }
}

/* 통합박스는 폼 격자의 한 줄을 통째로 쓴다. */
.pe-groups-new { grid-column: 1 / -1; }
/* 제목줄은 한 줄로. 접히면 줄 높이가 두 배가 된다. */
.pe-groups-new > .field.full > label,
.pe-groups-new > .field.full > label .muted { white-space: nowrap; }
/* 표에서 남는 폭은 전부 명칭이 가져간다. 나머지는 자릿수만큼 고정. */
.pe-groups-new table.rowform td.c-name,
.pe-groups-new table.rowform td.c-text { width: 100%; min-width: 0; }
.pe-groups-new table.rowform td.c-date,
.pe-groups-new table.rowform td.c-time,
.pe-groups-new table.rowform td.c-num,
.pe-groups-new table.rowform td.c-code,
.pe-groups-new table.rowform td.c-act { width: 1%; white-space: nowrap; }
.pe-groups-new table.rowform td.c-date { min-width: 168px; }
.pe-groups-new table.rowform td.c-time { min-width: 132px; }
.pe-groups-new table.rowform td.c-num  { min-width: 104px; }
.pe-groups-new table.rowform td.c-code { min-width: 56px; }
.pe-groups-new table.rowform td.c-act  { min-width: 84px; }
/* 드론쇼의 장소 선택칸은 명칭 다음으로 넓게. */
.pe-groups-new table.rowform#ds-table td.c-text { width: 1%; min-width: 200px; }
.pe-groups-new table.rowform .count-wrap { display: block; }

/* 표 감싸개가 내용폭에 맞춰 줄어들어 표가 박스를 못 채웠다. */
.pe-groups-new .table-wrap.plain { display: block; width: 100%; }
.pe-groups-new table.rowform { width: 100%; table-layout: auto; }

/* 좁은 화면에서는 날짜·시각·장소 칸을 최소로 줄여 명칭에 폭을 넘긴다.
   1200px 에서 명칭이 70px 까지 눌렸다. */
@media (max-width: 1366px) {
  .pe-groups-new table.rowform td.c-date { min-width: 132px; }
  .pe-groups-new table.rowform td.c-time { min-width: 104px; }
  .pe-groups-new table.rowform td.c-num  { min-width: 88px; }
  .pe-groups-new table.rowform#ds-table td.c-text { min-width: 132px; }
  .pe-groups-new table.rowform td { padding: 8px 5px; }
  .pe-groups-new table.rowform td.c-name input,
  .pe-groups-new table.rowform td.c-text input { min-width: 0; }
}

/* ── 302 신규: 아직 못 쓰는 칸 (2026-08-18 대표 지시) ─────────────────
   신규와 수정의 칸 구성을 같게 하되, 등록 전에는 쓸 수 없는 칸을
   회색으로 자리만 잡아 둔다. 두 모드가 같은 자리·같은 폭으로 보인다. */
.pe-later {
  display: inline-block; font-size: 13px; color: #6f8299;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  cursor: help;
}
.pe-groups-new td.c-ql-new {
  width: 1%; min-width: 64px; white-space: nowrap; text-align: center;
  font-size: 13px; color: #9cafc5;
}
.pe-groups-new td.c-permit { width: 1%; min-width: 182px; white-space: nowrap; }
.pe-groups-new td.c-num .pe-later { text-align: right; width: 100%; }
@media (max-width: 1366px) {
  .pe-groups-new td.c-permit { min-width: 140px; }
  .pe-groups-new td.c-ql-new { min-width: 56px; }
}

/* ── 비행완료보고 통합 목록 (2026-08-19 대표 승인) ──
   드론쇼·시험비행을 한 목록으로. 유형 표시는 팔레트 색 그대로, 배지 아님. */
.fr-type-show { color: #25d4f4; font-size: 13px; white-space: nowrap; }
.fr-type-trial { color: #efd17e; font-size: 13px; white-space: nowrap; }
.fr-filter { margin-bottom: 10px; }
.fr-filter .btn.bt-on { border-color: #25d4f4; color: #25d4f4; }

/* ── 완료보고 제출 흐름 (2026-08-19 대표 확정) ── */
.sr-submitted { color: #25d4f4; white-space: nowrap; }
.sr-rejected { border-color: rgba(255,125,131,.6); }

/* ── 311 마감 점검 (2026-08-19 대표 확정) ──
   담당자가 미입력 항목을 한 화면에서 확인하고 보완한다.
   글자 13/14/20/34, 각진 모서리, 버튼 28px — 공용 규칙 그대로. */
.cc-show { border: 1px solid #263d57; margin-top: 12px; }
.cc-head { display: flex; align-items: center; gap: 10px; padding: 6px 10px;
           background: #11233a; border-bottom: 1px solid #263d57; }
.cc-head.cc-project { border: 1px solid #263d57; margin-top: 8px; }
.cc-code { flex: 0 0 auto; min-width: 40px; font-size: 13px; color: #25d4f4; }
.cc-name { flex: 1 1 auto; min-width: 0; font-size: 13px; }
.cc-count { flex: 0 0 auto; font-size: 13px; }
.cc-act { flex: 0 0 auto; }
.cc-act .btn[disabled] { opacity: .45; cursor: not-allowed; }
.tbl-cc { width: 100%; border-collapse: collapse; }
.tbl-cc td { padding: 3px 10px; font-size: 13px; vertical-align: top; }
.tbl-cc tr.cc-group td { color: #8fa6bd; padding-top: 8px; }
.tbl-cc .c-cc-mark { width: 56px; white-space: nowrap; }
.tbl-cc .c-cc-label { width: 300px; }
.tbl-cc .c-cc-note { }
.cc-warn { color: #efd17e; }

/* ── 완료보고 등급 기준 (2026-08-19 대표 확정) ──
   등급 글자만 있으면 무엇을 고르는지 알 수 없다. 승인된 프로토타입(v10)처럼
   카드에 뜻을 붙이고, 자세한 기준은 접어 둔다.
   기존 .sr-grade 는 44x44 가운데정렬 flex 라 방향과 크기를 바꿔 두 줄로 쌓는다. */
.sr-grade { flex-direction: column; width: auto; min-width: 132px; height: auto;
            text-align: center; line-height: 1.35; padding: 6px 10px; font-size: 13px; }
.sr-grade > b { display: block; font-size: 20px; line-height: 1.2; }
.sr-gdesc { display: block; font-size: 13px; color: #8fa6bd; white-space: nowrap; }
.sr-grade.sr-on .sr-gdesc { color: #17200f; }
.sr-gcrit { margin: 6px 0 10px; }
.sr-gcrit > summary { font-size: 13px; color: #8fa6bd; cursor: pointer; }
.sr-gtable { width: auto; margin-top: 6px; }
.sr-gtable td { padding: 2px 12px 2px 0; font-size: 13px; }
.sr-gtable .sr-gcode { color: #25d4f4; width: 28px; }

/* -- 702A 시스템 유지보수 매뉴얼 (2026-08-20 대표 확정) --
   글자 13/14/20, 각진 모서리, 버튼 28px - 공용 규칙 그대로. */
.om-syswrap { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.om-sys { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px;
          font-size: 13px; border: 1px solid #263d57; background: #0a1a2c; color: #9cafc5; }
.om-sys.on { background: #11233a; border-color: #25d4f4; color: #9beeff; font-weight: 700; }
.om-sys.om-add { color: #efd17e; border-style: dashed; }
.om-cnt { font-size: 13px; color: #8fa6bd; }
.om-sysdesc { margin-top: 8px; }
.om-tabs .om-addtab { color: #efd17e; }
.om-head { display: flex; align-items: center; gap: 12px; margin-top: 12px;
           padding-bottom: 8px; border-bottom: 1px solid #263d57; }
.om-title { font-size: 20px; }
.om-meta { font-size: 13px; color: #8fa6bd; }
.om-act { margin-left: auto; white-space: nowrap; }
.om-body { font-size: 14px; line-height: 1.7; padding: 6px 2px 4px; }
.om-body h2 { font-size: 20px; margin: 18px 0 8px; color: #9beeff; }
.om-body h3 { font-size: 14px; margin: 16px 0 6px; color: #25d4f4; }
.om-body h4 { font-size: 14px; margin: 12px 0 4px; color: #efd17e; }
.om-body p { margin: 6px 0; }
.om-body ul, .om-body ol { margin: 6px 0 6px 20px; }
.om-body li { margin: 3px 0; }
.om-body code { font-size: 13px; background: #0a1a2c; border: 1px solid #263d57; padding: 0 4px; }
.om-body pre { font-size: 13px; background: #0a1a2c; border: 1px solid #263d57;
               padding: 10px 12px; overflow-x: auto; }
.om-body table { border-collapse: collapse; margin: 8px 0; width: 100%; }
.om-body th, .om-body td { border: 1px solid #263d57; padding: 5px 10px; font-size: 13px;
                           text-align: left; vertical-align: top; }
.om-body th { background: #11233a; color: #9beeff; white-space: nowrap; }
.om-body hr { border: 0; border-top: 1px solid #263d57; margin: 14px 0; }
.om-body a { color: #25d4f4; }
.om-old { opacity: .78; border-left: 2px solid #efd17e; padding-left: 12px; }
.om-editor { width: 100%; height: 460px; background: #07111f; border: 1px solid #35506a;
             color: #f5f8fc; font-family: Consolas, "D2Coding", monospace; font-size: 13px;
             line-height: 1.6; padding: 10px 12px; resize: vertical; }

/* 702A 구조도 그림 — 문서 본문에 넣은 SVG 가 패널 폭을 넘지 않게 한다. */
.om-fig { margin: 0 0 16px 0; padding: 12px; background: #07111f; border: 1px solid #263d57; overflow-x: auto; }
.om-fig svg { display: block; width: 100%; height: auto; max-width: 1100px; margin: 0 auto; }

/* 702A 신호등 한 줄 — 바깥 신호등(/cs/status/)과 같은 내용을 화면 위에 띄운다. */
.om-status { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 12px; }
.om-lamp { width: 20px; height: 20px; flex: 0 0 20px; border: 1px solid #263d57; background: #9cafc5; }
.om-status-green .om-lamp { background: #7ee0b0; }
.om-status-yellow .om-lamp { background: #efd17e; }
.om-status-red .om-lamp { background: #ff7d83; }
.om-stword { font-size: 20px; font-weight: 700; flex: 0 0 auto; }
.om-status-green .om-stword { color: #7ee0b0; }
.om-status-yellow .om-stword { color: #efd17e; }
.om-status-red .om-stword { color: #ff7d83; }
.om-status-gray .om-stword { color: #9cafc5; }
.om-stitems { font-size: 13px; color: #cfe0f0; flex: 1 1 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.om-stwhen { font-size: 13px; color: #9cafc5; flex: 0 0 auto; }
.om-stlink { font-size: 13px; color: #25d4f4; border: 1px solid #25d4f4; height: 28px; line-height: 26px; padding: 0 12px; flex: 0 0 auto; text-decoration: none; }

/* 311 결과·메모 한 줄 — 2026-08-20 대표 지시로 303 표 칸에서 이리로 옮겼다.
   좁은 칸에 밀어 넣으면 두 줄로 깨지므로, 여기서는 폭을 넉넉히 준다. */
.cc-work { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
           padding: 10px 12px; border-bottom: 1px solid #263d57; }
.cc-work .cc-wl { flex: 0 0 auto; font-size: 13px; color: #9cafc5; padding-bottom: 6px; }
.cc-work .cc-wv { flex: 0 0 auto; font-size: 13px; padding-bottom: 4px; }
.cc-work .cc-note { flex: 1 1 auto; font-size: 13px; padding-bottom: 6px; }
.cc-form { display: flex; align-items: flex-end; gap: 10px; flex: 1 1 480px; min-width: 0; }
.cc-form .field { margin: 0; }
.cc-form .cc-f-res { flex: 0 0 120px; }
.cc-form .cc-f-fail { flex: 0 0 190px; }
.cc-form .cc-f-reason { flex: 1 1 240px; min-width: 180px; }
.cc-form .btn { flex: 0 0 auto; margin-bottom: 1px; }

/* 마감 버튼을 눈에 띄게 — 대표 지시(2026-08-20). 높이 규정(28px)은 그대로 둔다. */
.cc-head { padding: 10px 12px; }
.cc-code, .cc-name { font-size: 14px; }
.cc-act .btn { min-width: 108px; }

/* ── 사용 안내 201~207 (2026-08-22 견적시스템 설명서 포함) ────────────────
   규칙: 글자는 13·14·20·34px 만. 모서리는 각지게. 가로 스크롤은 만들지 않는다.
   좁은 화면에서는 흐름도의 줄이 위아래로 쌓인다(가로로 밀지 않는다). */
.gd-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.gd-cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gd-card { border: 1px solid var(--line); background: var(--navy-900); padding: 12px 14px; }
.gd-card h3 { margin: 0 0 8px; font-size: 14px; color: var(--cyan-soft); }
.gd-card p { margin: 0; font-size: 13px; color: var(--text); line-height: 1.6; }
.gd-card ul { margin: 0; padding-left: 16px; }
.gd-card li { font-size: 13px; line-height: 1.75; }

.gd-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.gd-step { border: 1px solid var(--line); background: var(--navy-900); padding: 6px 10px; font-size: 13px; }
.gd-arrow { color: var(--muted); font-size: 13px; }

.quote-workflow { margin-top: 18px; padding: 18px; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(18,34,57,.94), rgba(8,19,34,.98)); }
.qwf-lane { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: center; }
.qwf-owner { align-self: stretch; display: grid; place-items: center; border-right: 2px solid var(--cyan); color: var(--cyan-soft); font-size: 13px; }
.qwf-track { display: flex; align-items: stretch; justify-content: space-between; gap: 8px; min-width: 0; }
.qwf-track.centered { justify-content: center; align-items: center; }
.qwf-node { flex: 1 1 130px; min-width: 0; padding: 11px 12px; border: 1px solid var(--line); background: var(--navy-900); text-align: center; }
.qwf-node b, .qwf-node small, .sf-screen b, .sf-screen small { display: block; }
.qwf-node b { color: var(--text); font-size: 13px; }
.qwf-node small { margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.qwf-node.accent { border-color: var(--cyan); box-shadow: inset 0 3px 0 var(--cyan); }
.qwf-node.success { border-color: #3ba875; box-shadow: inset 0 3px 0 #3ba875; }
.qwf-node.warn { border-color: #c88a3d; box-shadow: inset 0 3px 0 #c88a3d; }
.qwf-link, .qwf-branch, .qwf-down, .sf-arrow, .sf-up { color: var(--cyan-soft); }
.qwf-link { align-self: center; }
.qwf-branch { padding: 0 8px; font-size: 12px; white-space: nowrap; }
.qwf-down { padding: 5px 0 5px 120px; font-weight: 800; }
.screen-flow { margin-top: 18px; display: grid; grid-template-columns: 170px 28px minmax(0, 1fr); gap: 10px; align-items: center; }
.sf-screen, .sf-workspace { border: 1px solid var(--line); background: var(--navy-900); }
.sf-screen { padding: 16px; text-align: center; }
.sf-screen.primary { border-color: var(--cyan); box-shadow: inset 0 4px 0 var(--cyan); }
.sf-screen b { margin-top: 6px; font-size: 14px; }
.sf-screen small { margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.sf-no { display: inline-block; padding: 2px 7px; border: 1px solid var(--cyan); color: var(--cyan-soft); font: 700 11px/1.4 ui-monospace, monospace; }
.sf-arrow { text-align: center; font-size: 22px; }
.sf-title { padding: 11px 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 9px; }
.sf-tabs { display: grid; grid-template-columns: repeat(11, auto); align-items: stretch; padding: 12px; gap: 6px; }
.sf-tabs span { min-width: 94px; padding: 9px 8px; border: 1px solid var(--line); font-size: 12px; text-align: center; }
.sf-tabs span b { color: var(--cyan-soft); }
.sf-tabs span small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.sf-tabs i { align-self: center; color: var(--cyan-soft); font-style: normal; }
.sf-support { grid-column: 3; justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 240px; }
.sf-up { font-size: 12px; }

.gd-map { margin-top: 4px; }
.gd-row { display: grid; grid-template-columns: 84px repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.gd-row-head span { font-size: 13px; color: var(--cyan-soft); padding: 2px 0; }
.gd-lab { font-size: 13px; color: var(--cyan-soft); align-self: center; }
.gd-node { border: 1px solid var(--line); background: var(--navy-900); padding: 8px 10px; font-size: 13px; line-height: 1.55; }
.gd-node i { display: block; font-style: normal; margin-top: 4px; color: var(--muted); font-size: 13px; }
.gd-core .gd-node { border-color: var(--cyan); }
.gd-gate { color: var(--gold); border-color: var(--gold) !important; }
.gd-critical { border-color: var(--cyan) !important; }
.gd-exception { border-color: var(--danger) !important; }
.gd-dim { opacity: .55; }
.gd-exc .gd-lab { color: var(--danger); }
.gd-bracket { margin: 4px 0 10px 92px; padding-top: 6px; border-top: 1px dashed var(--line); font-size: 13px; color: var(--muted); }

/* 좁은 화면 — 가로로 밀지 않고 위아래로 쌓는다 (대표 지시 2026-08-20) */
@media (max-width: 1180px) {
  .gd-cards, .gd-cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gd-row { grid-template-columns: 1fr; }
  .gd-row-head { display: none; }
  .gd-lab { color: var(--gold); }
  .gd-bracket { margin-left: 0; }
  .screen-flow { grid-template-columns: 140px 24px minmax(0, 1fr); }
  .sf-tabs { grid-template-columns: repeat(5, auto); }
  .sf-tabs i { display: none; }
}
@media (max-width: 760px) {
  .gd-cards, .gd-cards-4 { grid-template-columns: 1fr; }
  .qwf-lane { grid-template-columns: 1fr; }
  .qwf-owner { min-height: 34px; border-right: 0; border-bottom: 2px solid var(--cyan); }
  .qwf-track { flex-direction: column; }
  .qwf-link { transform: rotate(90deg); text-align: center; }
  .qwf-down { padding-left: 0; text-align: center; }
  .qwf-branch { white-space: normal; text-align: center; }
  .screen-flow { grid-template-columns: 1fr; }
  .sf-arrow { transform: rotate(90deg); }
  .sf-tabs { grid-template-columns: 1fr 1fr; }
  .sf-support { grid-column: 1; width: 100%; }
}

/* 801 고객포털 미리보기 — 모서리는 각지게 (대표 지시) */
.guide-shot { border-radius: 0; }

/* ── 견적 기준정보 606A (2026-08-20) ─────────────────────────────────────
   글자 13·14·20px · 각진 모서리 · 가로 스크롤 없음 */
.qc-lab { width: 104px; }
.qc-ta { min-height: 62px; font-size: 14px; }
.qc-body { white-space: normal; word-break: keep-all; }
.qc-imgs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.qc-imgcell { border: 1px solid var(--line); background: var(--navy-900); padding: 12px 14px; }
.qc-imgbox { display: flex; align-items: center; justify-content: center; min-height: 120px; margin: 8px 0; padding: 8px; border: 1px solid var(--line); background: #fff; }
.qc-img { max-width: 100%; max-height: 160px; display: block; }
@media (max-width: 1180px) { .qc-imgs { grid-template-columns: 1fr; } }

/* 견적 산출내역 입력 표 (603 · 606A) — 칸을 꽉 채워 고르개 글자가 잘리지 않게 한다.
   글자수 표시는 칸 오른쪽 아래에 절대배치로 붙으므로, 한도가 있는 칸에는
   오른쪽 여백을 두어 값이 표시 위로 겹치지 않게 한다. */
.q-cost-line td { border-left: 0; border-right: 0; }
.q-cost-line input,
.q-cost-line select { width: 100%; box-sizing: border-box; }
.q-cost-line input[maxlength] { padding-right: 34px; }
.q-cost-line select { padding-left: 6px; padding-right: 6px; }
.q-cost-line td { padding-left: 6px; padding-right: 6px; }

/* 견적 산출내역 계산 결과 (603) — 표 안에 세로줄을 긋지 않는다. */
.q-cost-sum td { border-left: 0; border-right: 0; }
.q-cost-sum .q-cost-num { text-align: right; font-variant-numeric: tabular-nums; }
.q-cost-sum .q-cost-total td { font-size: 20px; border-top: 2px solid #263d57; }

/* 견적 화면 601·602·603·606A (2026-08-20)
   .bt-row 는 가로 배치인데 기본 select 가 width:100% 라, 고르개가 라벨 아래로
   떨어져 혼자 한 줄을 차지했다. 라벨과 입력칸의 왼쪽 끝을 맞추려면 자리를 잡아 줘야 한다.
   글자수 표시는 칸 오른쪽 아래에 절대배치로 붙으므로 오른쪽 여백도 함께 둔다. */
.q-scope .bt-row > select { width: auto; flex: 0 0 auto; max-width: 320px; }
.q-scope .bt-row input[maxlength] { padding-right: 38px; }
.q-scope .bt-row input.q-drone-count[maxlength] { padding-right: 58px; }
.q-scope .q-find { width: 250px; flex: 0 0 auto; }