/* 모든 페이지 하단 공통 저작권 푸터 (로그인 페이지는 카드 안 note에 별도 표기) */
body:not(.sec-login-page)::after {
	content: "© 2026 SEC Co.,Ltd. All Rights Reserved.";
	display: block;
	text-align: center;
	font-size: 0.72rem;
	color: var(--muted, #5c6b7a);
	padding: 16px 12px 22px;
	letter-spacing: 0.01em;
}

:root {
	--navy: #0b1f3a;
	--navy-light: #16325c;
	--accent: #0066cc;
	--accent-hover: #0052a3;
	/* 파란 "바탕"(버튼·선택된 보기·알림 숫자) — 라이트는 --accent 와 같고 다크만 진하게(2026-11-02 S7 A-2안) */
	--accent-fill: var(--accent);
	--accent-fill-hover: var(--accent-hover);
	--on-accent-fill: #fff;   /* 강조 바탕 위 글자 — 다크는 짙은 남색(2026-11-06) */
	--surface: #f4f7fb;
	--muted: #5c6b7a;
	--border: #d8e0ea;
	--white: #fff;
}

* { box-sizing: border-box; }

/* 사이트 글꼴 = Pretendard(2026-10-13 사용자: 화면마다 글꼴이 달라 통일 — 서버 /fonts 에 자체 호스팅, 외부 CDN 아님).
   인쇄물(견적서 인쇄본·라벨)은 각자 글꼴을 직접 정해 두어 바뀌지 않는다 */
@font-face { font-family: "Pretendard Variable"; font-weight: 45 920; font-style: normal; font-display: swap; src: url("/fonts/PretendardVariable.woff2?v=302ec55f") format("woff2-variations"); }

body {
	margin: 0;
	font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Malgun Gothic', Roboto, sans-serif;
	background: var(--surface);
	color: var(--navy);
	line-height: 1.5;
	word-break: keep-all;        /* 한글 낱말이 중간에서 끊기지 않게(2026-10-16 사용자) */
	overflow-wrap: break-word;   /* 칸보다 긴 낱말만 그 안에서 나눔 */
}
/* 폰 너비의 표 칸은 예전 줄바꿈 그대로: keep-all 이면 자동 너비 표의 한글 열이 넓어져 옆 열이 눌리고 가로 스크롤이 생김(2026-10-16 측정) */
@media (max-width: 767px) { td, th { word-break: normal; overflow-wrap: normal; } }

/* 입력칸·버튼은 브라우저가 글꼴을 물려받지 않아 시스템 글꼴로 남는다 → 화면 글꼴을 그대로 쓰게 */
button, input, select, textarea { font-family: inherit; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

.sec-field { text-align: left; margin-bottom: 1rem; }
.sec-field label {
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	margin-bottom: 0.375rem;
}
.sec-field input {
	width: 100%;
	padding: 0.75rem 0.875rem;
	border: 1px solid var(--border);
	border-radius: 8px;
	font-size: 1rem;
}
.sec-field input:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.15);
}

.sec-btn {
	display: inline-block;
	width: 100%;
	padding: 0.875rem;
	background: var(--accent-fill);
	color: var(--white);
	border: none;
	border-radius: 8px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
}
.sec-btn:hover { background: var(--accent-fill-hover); }

.sec-error {
	background: #fdecea;
	border: 1px solid #f5c2c0;
	color: #b42318;
	padding: 0.75rem;
	border-radius: 8px;
	font-size: 0.875rem;
	margin-bottom: 1rem;
	text-align: left;
	display: none;
}

.sec-header {
	background: var(--white);
	border-bottom: 1px solid var(--border);
	padding: 0.875rem 1.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
}

.sec-header img { height: 40px; }
.sec-nav { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
.sec-nav a { color: var(--navy); font-weight: 500; font-size: 0.9rem; }
.sec-nav button {
	background: none;
	border: none;
	color: var(--muted);
	cursor: pointer;
	font-size: 0.9rem;
}

.sec-main { max-width: 1700px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }

.sec-hero {
	background: linear-gradient(160deg, var(--navy) 0%, var(--navy-light) 100%);
	color: var(--white);
	padding: 2.5rem 1.5rem;
	border-radius: 12px;
	margin-bottom: 2rem;
	text-align: center;
}
.sec-hero h1 { margin: 0 0 0.5rem; font-size: 1.75rem; }
.sec-hero p { margin: 0; opacity: 0.9; }

.sec-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.5rem;
}

.sec-user-label {
	font-size: 0.875rem;
	color: var(--navy);
	font-weight: 600;
}

.sec-user-bar {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.sec-settings-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 8px;
	color: var(--muted);
	transition: background 0.15s, color 0.15s;
}

.sec-settings-btn:hover {
	background: var(--surface);
	color: var(--accent);
}

/* Language switcher in header */
.sec-lang-switch {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin-left: 0.5rem;
	margin-right: 0.25rem;
	border: 1px solid var(--border);
	border-radius: 999px;
	padding: 1px;
	background: var(--surface);
}

.sec-lang-btn {
	font-size: 0.7rem;
	line-height: 1;
	padding: 0.2rem 0.45rem;
	border: 0;
	background: transparent;
	color: var(--muted);
	border-radius: 999px;
	cursor: pointer;
	font-weight: 600;
}

.sec-lang-btn.active {
	background: var(--navy);
	color: #fff;
}

.sec-lang-btn:hover:not(.active) {
	background: #e8eef5;
	color: var(--navy);
}

.sec-settings-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem;
	max-width: 900px;
	margin-bottom: 2rem;
}

.sec-settings-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100px;
	padding: 1.25rem;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 12px;
	font-weight: 600;
	font-size: 1rem;
	color: var(--navy);
	text-align: center;
	box-shadow: 0 4px 16px rgba(11, 31, 58, 0.06);
	transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.sec-settings-tile:hover {
	border-color: var(--accent);
	box-shadow: 0 8px 24px rgba(0, 102, 204, 0.12);
	transform: translateY(-2px);
	color: var(--accent);
}

@media (max-width: 520px) {
	.sec-settings-grid {
		grid-template-columns: 1fr;
	}
}

.sec-menu-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1.25rem;
	max-width: 1280px;
	margin: 0 auto;
}

/* 빈 블록 타일 — 4x4 레이아웃 유지용, 비활성/클릭 불가 */
.sec-menu-tile--empty {
	background: var(--surface);
	border: 1px solid #eef2f7;
	box-shadow: none;
	cursor: default;
	pointer-events: none;
}
.sec-menu-tile--empty:hover {
	box-shadow: none;
	transform: none;
}

.sec-menu-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	min-height: 112px;
	padding: 1.1rem 1rem;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 12px;
	text-align: center;
	color: var(--navy);
	font-weight: 600;
	font-size: 0.95rem;
	box-shadow: 0 4px 16px rgba(11, 31, 58, 0.06);
	transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s, color 0.15s;
}

a.sec-menu-tile:hover {
	border-color: var(--accent);
	box-shadow: 0 8px 24px rgba(0, 102, 204, 0.12);
	transform: translateY(-2px);
	color: var(--accent);
}

.sec-menu-tile__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: inherit;
	opacity: 0.8;
}
.sec-menu-tile__icon svg {
	width: 30px;
	height: 30px;
	display: block;
}
a.sec-menu-tile:hover .sec-menu-tile__icon { opacity: 1; }

.sec-menu-tile__label {
	line-height: 1.35;
}

.sec-menu-tile--na {
	background: var(--surface);
	color: var(--muted);
	cursor: not-allowed;
	box-shadow: none;
}

.sec-page-head {
	margin-bottom: 1.5rem;
}

.sec-page-head h1 {
	margin: 0 0 0.35rem;
	font-size: 1.5rem;
}

.sec-muted {
	color: var(--muted);
	margin: 0;
}

.sec-module-body {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 2rem;
	min-height: 120px;
	margin-bottom: 1.5rem;
}

.sec-link-back {
	font-weight: 500;
}

/* Back button — 채권현황과 동일한 테두리 박스 ← 아이콘 (전 페이지 통일).
   원래 텍스트(←/"메뉴로 돌아가기"/i18n로 채워지는 값)는 font-size:0으로 숨기고
   ::before 로 화살표를 렌더 → 내용/i18n 과 무관하게 항상 ← 아이콘. title(툴팁)은 유지. */
.sec-page-back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	box-sizing: border-box;
	border: 1px solid var(--border);
	border-radius: 7px;
	color: var(--muted);
	line-height: 1;
	margin-left: 8px;
	vertical-align: middle;
	text-decoration: none;
	font-size: 0;
}
.sec-page-back::before {
	content: "\2190";
	font-size: 1.05rem;
	line-height: 1;
}
.sec-page-back:hover {
	text-decoration: none;
	opacity: 1;
	background: var(--surface);
	border-color: #cbd5e1;
	color: var(--navy);
}

.sec-page-head__left {
	display: flex;
	align-items: flex-start;
	gap: 6px;
}

/* Helper for title + back arrow on same line */
.sec-page-head__title-row {
	display: flex;
	align-items: center;
	gap: 6px;
}

.sec-page-head--row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.sec-btn--inline {
	width: auto;
	padding: 0.5rem 1.125rem;
	font-size: 0.875rem;
}

.sec-btn--sm {
	padding: 0.375rem 0.75rem;
	font-size: 0.8125rem;
}

.sec-btn--ghost {
	background: transparent;
	color: var(--navy);
	border: 1px solid var(--border);
}

.sec-btn--ghost:hover {
	background: var(--surface);
	color: var(--accent);
}

/* 표 작업 열용 아이콘 버튼 (수정/삭제 등) — 모든 페이지 공통 */
.sec-ico-btn {
	background: none;
	border: none;
	cursor: pointer;
	padding: 2px 4px;
	margin: 0;
	font-size: 0.98rem;
	line-height: 1;
	border-radius: 5px;
	vertical-align: middle;
}
.sec-ico-btn:hover { background: var(--surface); }
.sec-ico-btn + .sec-ico-btn { margin-left: 1px; }
.sec-ico-btn:disabled { opacity: 0.4; cursor: default; }
/* 2026-10-03: secIconize 가 넣은 선 아이콘(SVG)을 누르면 클릭 대상이 버튼이 아니라 svg/path 가 되어
   e.target.matches('[data-edit]') 로 찾는 화면(Customer DB 등)에서 버튼이 안 눌렸다 → 아이콘 안쪽은 클릭을 버튼에 넘긴다 */
.sec-ico-btn svg, .sec-ico-btn svg * { pointer-events: none; }

/* 모든 페이지 아이콘 버튼을 흑백 픽토그램으로 — 컬러 이모지의 채도 제거 (배경 없는 아이콘 버튼만 대상) */
.sec-ico-btn,
.sec-btn--ghost.sec-btn--sm,
.dc-icon-btn,
.m3d-iconbtn,
.srm-attach,
.doa-act-btn,
.wl-edit, .wl-del, .wl-save, .wl-cancel,
.po-file-ic, .po-act-btn,
.qi-po-ic, .qi-po-warn {
	filter: grayscale(100%);
}

/* 서비스 리포트 작성/발송 이력이 있는 행: 📄 아이콘에 파란 테두리만 (은은한 강조) */
.sec-ico-btn.has-report {
	display: inline-block;
	border: 1.5px solid #3b82f6;
	border-radius: 6px;
}

/* 연결된 불량접수가 있는 행: 🔧 아이콘에 회색 테두리(흑백) + 상태 뱃지(무채색) */
.sec-ico-btn.has-repair {
	display: inline-block;
	border: 2.5px solid #64748b;
	border-radius: 6px;
}

/* 첨부파일이 있는 행: 👁️ 요약보기 아이콘에 회색 테두리(흑백) — has-repair 선례와 동일 톤 */
.sec-ico-btn.has-files {
	display: inline-block;
	border: 2px solid #94a3b8;
	border-radius: 6px;
}

.sec-form-panel {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 1.25rem 1.5rem;
	margin-bottom: 1.25rem;
	max-width: 550px;
}

.sec-form-panel textarea.sec-input-inline {
	width: 100%;
	font-family: inherit;
	resize: vertical;
	min-height: 60px;
}

.sec-form-panel__title {
	margin: 0 0 1rem;
	font-size: 1rem;
}

.sec-form-row {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	margin-bottom: 0.75rem;
}

.sec-form-row label {
	font-size: 0.8125rem;
	font-weight: 600;
}

.sec-form-row input,
.sec-input-inline,
.sec-select {
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--border);
	border-radius: 8px;
	font-size: 0.9375rem;
	font-family: inherit;
}

.sec-form-row .sec-select {
	width: 100%;
}

.sec-input-inline {
	width: 100%;
	min-width: 120px;
}

.sec-form-hint {
	font-size: 0.8125rem;
	color: var(--muted);
	margin: 0 0 1rem;
}

.sec-form-actions {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	justify-content: center;
}
/* 저장/취소 버튼: 가운데 정렬 + 각 약 30% 너비로 통일 (모든 팝업 폼 공통) */
.sec-form-actions .sec-btn {
	width: 30%;
	min-width: 96px;
	flex: 0 0 auto;
}

.sec-message {
	padding: 0.75rem 1rem;
	border-radius: 8px;
	font-size: 0.875rem;
	margin-bottom: 1rem;
	background: #e8f4fc;
	color: var(--navy);
}

.sec-message--error {
	background: #fdecea;
	color: #b42318;
}

.sec-actions-cell {
	white-space: nowrap;
	width: 36px;
	text-align: center;
}

.sec-actions-cell .sec-btn {
	margin-right: 0.25rem;
}

@media (max-width: 720px) {
	.sec-menu-grid {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(3, minmax(120px, 1fr));
	}
}

@media (max-width: 420px) {
	.sec-menu-grid {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
	}
}

.sec-card {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 1.75rem;
}
.sec-card h3 { margin: 0 0 0.5rem; }
.sec-card p { color: var(--muted); font-size: 0.9375rem; margin: 0 0 1rem; }
.sec-card .sec-btn { width: auto; padding: 0.625rem 1.25rem; font-size: 0.875rem; }

.sec-table-wrap {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 12px;
	overflow: auto;
	width: 100%;
	box-shadow: 0 1px 3px 0 rgb(15 23 42 / 0.08), 0 1px 2px -1px rgb(15 23 42 / 0.08);
}

/* Refined clean table look (inspired by stock page's nice design) */
.sec-table-wrap .sec-data-table {
	width: 100%;
	table-layout: auto;
}

.sec-table-wrap th {
	background: var(--surface);
	font-weight: 600;
	color: var(--navy);
	border-bottom-color: #e2e8f0;
}

.sec-table-wrap td {
	border-bottom-color: #f1f5f9;
}

/* Consistent wide action column (like tuned on stock page) */
.sec-actions-col {
	width: 330px;
	text-align: left;
	white-space: nowrap;
}
.sec-actions-col .sec-btn {
	padding: 3px 6px;
	font-size: 0.8rem;
	margin: 0;
	line-height: 1;
}

/* Calendar page styles */
.calendar-grid .day-cell {
	border: 1px solid #e5e7eb;
}
.calendar-grid .schedule-badge {
	border: 1px solid #e5e7eb;
	padding: 2px 4px;
}

/* Weekend (Sat/Sun) in red - shared */
.calendar-grid .day-header.weekend,
.calendar-grid .day-cell.weekend .day-num {
	color: #dc2626;
	font-weight: 700;
}
.calendar-grid .day-cell.weekend {
	background: #fef2f2;
}

/* Today in blue - shared */
.calendar-grid .day-cell.today {
	background: #dbeafe;
	border-color: #3b82f6;
	box-shadow: inset 0 0 0 2px #3b82f6;
}
.calendar-grid .day-cell.today .day-num {
	color: #1e40af;
	font-weight: 700;
}

/* Drag range highlight - shared */
.calendar-grid .day-cell.drag-range {
	background: #fef3c7;
	border-color: #f59e0b;
}
}

table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
	min-width: 0;
}
th, td {
	padding: 0.75rem 1rem;
	text-align: left;
	border-bottom: 1px solid var(--border);
}
th { background: var(--surface); font-weight: 600; }
tr:last-child td { border-bottom: none; }

.sec-note {
	font-size: 0.75rem;
	color: var(--muted);
	margin-top: 1.5rem;
}

/* Customer info window below customer select in new CS record form */
.sec-customer-info {
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--surface);
	padding: 8px 10px;
	margin: 4px 0 8px;
	font-size: 0.8rem;
	line-height: 1.3;
}
.sec-customer-info__header {
	font-weight: 600;
	margin-bottom: 4px;
	color: var(--navy);
	font-size: 0.75rem;
}
.sec-customer-info__body {
	color: var(--navy);
}
.sec-customer-info__body div {
	margin: 2px 0;
}

/* Display only customer name field (replaces dropdown) */
.sec-customer-display {
	background: var(--surface) !important;
	color: var(--navy);
	font-weight: 500;
}

/* Right sidebar for Customer DB picker */
.sec-right-sidebar {
	position: fixed;
	top: 0;
	right: 0;
	width: 380px;
	max-width: 90vw;
	height: 100vh;
	background: var(--white);
	border-left: 1px solid var(--border);
	box-shadow: -6px 0 16px rgba(0, 0, 0, 0.12);
	z-index: 1050;
	display: flex;
	flex-direction: column;
	font-size: 0.875rem;
}
.sec-right-sidebar__header {
	display: flex;
	align-items: center;
	padding: 10px 12px;
	border-bottom: 1px solid var(--border);
	background: var(--surface);
	gap: 8px;
	font-weight: 600;
}
.sec-right-sidebar__content {
	flex: 1;
	overflow: auto;
	padding: 4px 0;
}
.sec-cust-row {
	padding: 10px 14px;
	border-bottom: 1px solid var(--border);
	cursor: pointer;
}
.sec-cust-row:hover {
	background: var(--surface);
}
.sec-cust-row .c-company {
	font-weight: 600;
	color: var(--navy);
}
.sec-cust-row .c-model {
	font-size: 0.75rem;
	color: var(--muted);
	margin-left: 4px;
}
.sec-cust-row .c-meta {
	font-size: 0.75rem;
	color: var(--muted);
	margin-top: 2px;
}

/* Layout for form + right vertical tab menu */
.cs-edit-area {
	display: flex;
	gap: 0;
	align-items: flex-start;
	position: relative;
	justify-content: center;
}
.cs-edit-area .sec-form-panel {
	flex: 1;
}

.right-rail {
	display: none;
	flex-direction: row;
	height: auto;
	min-height: 400px;
}

.cs-edit-area .sec-form-panel:not([hidden]) + .right-rail {
	display: flex;
}

.vertical-tab-bar {
	width: 60px;
	background: var(--surface);
	border-left: 1px solid var(--border);
	display: flex;
	flex-direction: column;
	font-size: 11px;
	flex-shrink: 0;
}

.vtab {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	padding: 10px 4px;
	text-align: center;
	cursor: pointer;
	border-bottom: 1px solid #d1d5db;
	background: var(--surface);
	color: var(--muted);
	font-weight: 500;
	transition: background 0.15s;
	white-space: nowrap;
}

.vtab:hover {
	background: #e0e7ff;
}

.vtab.active {
	background: var(--white);
	color: #1e40af;
	font-weight: 700;
	border-right: 3px solid #3b82f6;
}

.vtab.na {
	color: var(--muted);
	font-style: italic;
}

.tab-content-panel {
	width: 0;
	overflow: hidden;
	transition: width 0.28s ease;
	background: var(--white);
	border-left: 1px solid var(--border);
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	box-shadow: -2px 0 8px rgba(0,0,0,0.08);
}

.tab-content-panel.open {
	width: 525px;
}

.tab-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.tab-content-header {
	padding: 8px 12px;
	background: var(--surface);
	border-bottom: 1px solid #e2e8f0;
	font-size: 0.9rem;
	display: flex;
	align-items: center;
}

.tab-list {
	flex: 1;
	overflow-y: auto;
	padding: 4px 8px;
	max-height: calc(100vh - 170px);
}

.tab-close-btn {
	background: transparent;
	border: none;
	font-size: 1rem;
	cursor: pointer;
	line-height: 1;
	padding: 2px 6px;
}

/* ===== 모바일 모드 토글 버튼 + 강제 모바일 레이아웃 (헤더의 📱 버튼으로 켬/끔) ===== */
.sec-mobile-toggle { background:none; border:1px solid var(--border); color:var(--muted); border-radius:8px; padding:3px 9px; font-size:0.8rem; cursor:pointer; white-space:nowrap; font-weight:600; }
.sec-mobile-toggle:hover { background:var(--surface); color:var(--accent); }
body.sec-mobile .sec-mobile-toggle { background:var(--accent-fill); color: var(--on-accent-fill); border-color:var(--accent); }

body.sec-mobile .sec-main { padding:1rem 0.7rem 3rem !important; max-width:100% !important; }
body.sec-mobile .sec-header { padding:0.5rem 0.7rem !important; gap:0.4rem !important; }
body.sec-mobile .sec-gsearch { margin-left:0 !important; }
body.sec-mobile .sec-header img { height:26px !important; }
body.sec-mobile .sec-nav { gap:0.4rem !important; }
body.sec-mobile .sec-nav a, body.sec-mobile .sec-nav button { font-size:0.8rem !important; }

/* 대시보드: 요약/메뉴 세로 스택, 메뉴 2열 */
body.sec-mobile .hub-dashboard { flex-direction:column !important; }
body.sec-mobile .hub-left, body.sec-mobile .hub-right { flex:1 1 auto !important; width:100% !important; min-width:0 !important; }
body.sec-mobile .sec-menu-grid { grid-template-columns:repeat(2,1fr) !important; gap:0.7rem !important; }
body.sec-mobile .sec-menu-tile { min-height:92px !important; padding:1rem 0.5rem !important; font-size:0.95rem !important; }

/* 페이지 헤더 세로 정렬 */
body.sec-mobile .sec-page-head, body.sec-mobile .sec-page-head--row { flex-direction:column !important; align-items:stretch !important; gap:10px !important; }
body.sec-mobile .sec-page-head h1 { font-size:1.3rem !important; }
body.sec-mobile .sec-page-head__title-row { flex-wrap:wrap !important; }

/* 필터/검색 바 세로 스택 + 전체폭 */
body.sec-mobile .ie-filter-bar { flex-direction:column !important; align-items:stretch !important; gap:8px !important; }
body.sec-mobile .ie-filter-bar .field { width:100% !important; }
body.sec-mobile .ie-filter-bar input, body.sec-mobile .ie-filter-bar select, body.sec-mobile .ie-filter-bar .sec-input, body.sec-mobile .ie-filter-bar .sec-select, body.sec-mobile .ie-filter-bar .sec-input-inline { width:100% !important; min-width:0 !important; box-sizing:border-box; }

/* 폼 인라인 그리드(4/3/2열) 축소 */
body.sec-mobile [style*="repeat(4"] { grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; }   /* minmax(0,…): 긴 select 가 칸을 밀어 넘치는 것 방지 */
body.sec-mobile [style*="repeat(3"] { grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; }
body.sec-mobile [style*="repeat(2"] { grid-template-columns:minmax(0,1fr) !important; }
body.sec-mobile .sec-form-row > select, body.sec-mobile .sec-form-row > input, body.sec-mobile .sec-form-row > textarea { min-width:0 !important; max-width:100% !important; box-sizing:border-box; }
body.sec-mobile .sec-form-row, body.sec-mobile .po-fr { width:100% !important; box-sizing:border-box; }

/* 넓은 표: 가로 스크롤 (글자 세로 깨짐 방지) */
body.sec-mobile .sec-table-wrap { overflow-x:auto !important; -webkit-overflow-scrolling:touch; }
body.sec-mobile .sec-table-wrap .sec-data-table { min-width:1000px !important; }

/* 모달/팝업/요약 전체폭 · 요약 1열 */
body.sec-mobile .sec-modal-content, body.sec-mobile .po-modal, body.sec-mobile #ie-new-form.ie-new-form-centered, body.sec-mobile #ie-detail-modal .sec-modal-content { width:96vw !important; max-width:96vw !important; padding:14px !important; }
body.sec-mobile #ie-summary-modal .ie-sum-grid, body.sec-mobile #cs-summary-modal .grid { grid-template-columns:1fr !important; }
body.sec-mobile #cs-summary-modal .box { width:96vw !important; }
/* ── 모바일 보강(2026-09-13) ── */
body.sec-mobile img, body.sec-mobile canvas, body.sec-mobile video, body.sec-mobile iframe { max-width:100% !important; }
body.sec-mobile .sec-ico-btn, body.sec-mobile .rr-act-btn { font-size:1.2rem !important; padding:5px 7px !important; }   /* 손가락 탭 타깃 확대 */
body.sec-mobile table { max-width:100% !important; }
/* 넓은 입력 표(불량접수 품목·Lead Time)는 표 자체를 가로 스크롤 */
body.sec-mobile .rr-items-table { display:block !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch; }
body.sec-mobile .rr-items-table > thead, body.sec-mobile .rr-items-table > tbody { display:table !important; width:100% !important; min-width:560px; }
/* 라이트박스/미리보기 오버레이 여백 축소 */
body.sec-mobile .sec-lightbox-ov, body.sec-mobile .rr-fp-ov { padding:10px !important; }
/* ── 펫 상태창·뽑기(hub.html, 인라인 스타일 모달) 모바일 보강(2026-09-18) ── */
body.sec-mobile .tama-status-panel { max-height:94vh !important; }
body.sec-mobile .tama-status-body { padding:14px 12px !important; }
body.sec-mobile .tama-sk-box { flex-direction:column !important; gap:10px !important; padding:12px !important; }
body.sec-mobile .tama-sk-right { border-left:none !important; border-top:1px solid var(--border); padding-left:0 !important; padding-top:10px; flex-wrap:wrap !important; }
body.sec-mobile .tama-sk-col { flex:1 1 40% !important; padding:6px 8px !important; }
body.sec-mobile .tama-sk-col:nth-child(2) { border-right:none !important; }
body.sec-mobile .tama-sk-input { flex:1 1 100% !important; border-top:1px solid var(--border); padding:10px 4px 0 !important; margin-top:4px; }
body.sec-mobile .tama-gacha-panel .gm-grid { grid-template-columns:repeat(3,1fr) !important; }   /* 3×3 판 유지(위 repeat(3 축소 규칙 예외) */
/* 좁은 화면이면 모바일 모드(body.sec-mobile) 여부와 무관하게 상태창은 세로 스택 — 폰에서 "PC 화면"으로 전환해 둔 경우 대비 */
@media (max-width: 640px) {
	.tama-status-panel { max-height:94vh !important; }
	.tama-status-body { padding:14px 12px !important; }
	.tama-sk-box { flex-direction:column !important; gap:10px !important; padding:12px !important; }
	.tama-sk-right { border-left:none !important; border-top:1px solid var(--border); padding-left:0 !important; padding-top:10px; flex-wrap:wrap !important; }
	.tama-sk-col { flex:1 1 40% !important; padding:6px 8px !important; }
	.tama-sk-col:nth-child(2) { border-right:none !important; }
	.tama-sk-input { flex:1 1 100% !important; border-top:1px solid var(--border); padding:10px 4px 0 !important; margin-top:4px; }
	.tama-petbox { max-width:100%; }
}
/* ── 페이지별 툴바 줄바꿈(2026-09-18 모바일 점검) ── */
body.sec-mobile .cs-filter-row { flex-wrap:wrap !important; gap:8px !important; }                                   /* CS History 검색·필터·버튼 */
body.sec-mobile .cs-filter-row > input, body.sec-mobile .cs-filter-row > select, body.sec-mobile .cs-filter-row > #cs-status-filter-wrap { flex:1 1 100% !important; min-width:0 !important; width:100% !important; }
body.sec-mobile .cs-filter-row > .sec-btn { flex:1 1 auto !important; }
body.sec-mobile .calendar-controls { display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:10px !important; }   /* Calendar 월 이동/필터 */
body.sec-mobile .calendar-controls .cal-nav { position:static !important; transform:none !important; justify-content:center !important; }
body.sec-mobile .calendar-controls .filter-row { margin-left:0 !important; }
body.sec-mobile .calendar-controls .filter-row select { flex:1 1 auto !important; }
body.sec-mobile .doa-toolbar { flex-wrap:wrap !important; }                                                          /* DOA 검색·버튼 */
body.sec-mobile .doa-toolbar #doa-search { flex:1 1 100% !important; width:100% !important; }
/* CS History 편집 폼 + 우측 세로 탭(고객 검색 등): 모바일에서는 폼 아래로 가로 탭으로 전환 */
body.sec-mobile .cs-edit-area { flex-direction:column !important; align-items:stretch !important; }
body.sec-mobile .cs-edit-area .sec-form-panel { width:100% !important; max-width:100% !important; box-sizing:border-box; }
body.sec-mobile .right-rail { width:100% !important; min-height:0 !important; flex-direction:column !important; }
body.sec-mobile .vertical-tab-bar { flex-direction:row !important; width:100% !important; border-left:none !important; border-top:1px solid var(--border); overflow-x:auto; }
body.sec-mobile .vtab { writing-mode:horizontal-tb !important; padding:8px 12px !important; border-bottom:none !important; border-right:1px solid var(--border) !important; flex:0 0 auto; }
body.sec-mobile .vtab.active { border-bottom:3px solid #3b82f6 !important; }
body.sec-mobile .tab-content-panel { width:100% !important; border-left:none !important; box-shadow:none !important; border-top:1px solid var(--border); }
body.sec-mobile .tab-content-panel:not(.open) { display:none !important; }
/* 헤더 알림 패널: 종 아이콘 기준 우측 정렬 시 화면 왼쪽으로 잘림 → 화면 폭에 맞춤 */
body.sec-mobile .sec-notif-panel { position:fixed !important; top:auto !important; left:8px !important; right:8px !important; width:auto !important; margin-top:6px; }
body.sec-mobile .tk-tbl { min-width:520px; }                                                                          /* 스킬 교환권 표: 가로 스크롤(글자 세로 깨짐 방지) */
body.sec-mobile .tk-tbl.tk-ledger { min-width:640px; }

/* ===================== 다크 모드 (html.sec-dark) ===================== */
.sec-theme-toggle { background: none; border: none; cursor: pointer; padding: 2px 5px; display: inline-flex; align-items: center; border-radius: 6px; line-height: 0; }
.sec-theme-toggle:hover { background: rgba(148,163,184,0.18); }

/* 변수 기반 다크 + 인라인/하드코딩 밝은 배경 일괄 오버라이드(필터 반전 방식 폐기) */
html.sec-dark {
	--surface: #1f2125; --white: #282a2c; --border: #3d4351; --muted: #aeb4c0;
	--navy: #e3e3e8; --navy-light: #cfd3db; --accent: #a8c7fa; --accent-hover: #c4d8fb;   /* 링크 글자 — 카드 위 대비 6.8:1(예전 #3b82f6 은 4.18 로 기준 미달, 2026-11-06 그래파이트) */
	/* 흰 글자 대비 4.5:1 이상 — #3b82f6 바탕은 3.68, 마우스 올린 #60a5fa 는 2.54 였다(2026-11-02 S7 A-2안: 5.17 / 8.72) */
	--accent-fill: #a8c7fa; --accent-fill-hover: #c4d8fb;
	/* 강조 바탕 위 글자 — Chrome 처럼 하늘색 바탕 + 짙은 남색 글자(2026-11-06 사용자 A안, 대비 8.3:1) */
	--on-accent-fill: #0b2a52;
	color-scheme: dark;
}
html.sec-dark body { background: #1f2125; color: #e3e3e8; }
html.sec-dark .sec-btn { color: #fff; }
html.sec-dark .sec-btn:not(.sec-btn--ghost):not(.sec-btn--danger):not(.sec-btn--secondary) { color: var(--on-accent-fill); }   /* 하늘색 버튼 위 짙은 글자(2026-11-06 A안) */
/* 머리줄 = Chrome 위 막대처럼 푸른 회색(2026-11-06 A안) */
html.sec-dark .sec-header { background: #1d2635 !important; border-bottom-color: #2c3546 !important; }
/* 마우스 올림 = 진하게 + 하늘색 테두리 빛(키보드 외곽선과 같은 색) — 진해지기만 하면 구분이 약했다(2026-11-02 S7 A-2안) */
html.sec-dark .sec-btn:not(.sec-btn--ghost):not(.sec-btn--danger):not(:disabled):hover { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px #60a5fa; }
/* 검정 라인아트 스킬 아이콘 → 다크모드에서 흰색 반전 */
html.sec-dark img.skill-icon { filter: invert(1) brightness(1.15); }
html.sec-dark .sec-hero { background: linear-gradient(160deg,#333c4e 0%,#1f2125 100%); color: #fff; }
/* 입력요소 */
html.sec-dark input, html.sec-dark select, html.sec-dark textarea { background: #333c4e !important; color: #e3e3e8 !important; border-color: #474e5e !important; }
html.sec-dark input::placeholder, html.sec-dark textarea::placeholder { color: #8e95a3; }
html.sec-dark option { background: #333c4e; color: #e3e3e8; }
/* 테이블 */
html.sec-dark table { color: #e3e3e8; }
html.sec-dark th, html.sec-dark td { border-color: #3d4351 !important; }
html.sec-dark thead th { background: #333c4e !important; color: #e3e3e8 !important; }
html.sec-dark tbody tr:hover { background: rgba(174, 180, 192,0.08); }
/* 인라인 밝은(중립) 배경 → 다크 (색상 배지는 제외) */
html.sec-dark [style*="background:#fff"], html.sec-dark [style*="background: #fff"],
html.sec-dark [style*="background:#ffffff"], html.sec-dark [style*="background: #ffffff"],
html.sec-dark [style*="background:#f8fafc"], html.sec-dark [style*="background: #f8fafc"],
html.sec-dark [style*="background:#f1f5f9"], html.sec-dark [style*="background: #f1f5f9"],
html.sec-dark [style*="background:#fafcff"], html.sec-dark [style*="background:#fcfdff"],
html.sec-dark [style*="background:#f2f4f7"], html.sec-dark [style*="background:#f9fafb"],
html.sec-dark [style*="background:#f8f9fa"], html.sec-dark [style*="background:#eef2f7"],
html.sec-dark [style*="background:#f0f3f7"], html.sec-dark [style*="background:#f0f4f8"],
html.sec-dark [style*="background:#eef5ff"], html.sec-dark [style*="background:#f5f7fb"],
html.sec-dark [style*="background-color:#fff"], html.sec-dark [style*="background-color: #fff"],
html.sec-dark [style*="background-color:#f8fafc"] {
	background-color: #282a2c !important; border-color: #3d4351 !important;
}
/* 인라인 어두운 글자색 → 밝게 */
html.sec-dark [style*="color:#0f172a"], html.sec-dark [style*="color:#1e293b"], html.sec-dark [style*="color:#0d2a52"],
html.sec-dark [style*="color:#111"], html.sec-dark [style*="color:#222"], html.sec-dark [style*="color:#333"],
html.sec-dark [style*="color:#1f2937"], html.sec-dark [style*="color:#334155"], html.sec-dark [style*="color:#475569"],
html.sec-dark [style*="color:#0b2447"], html.sec-dark [style*="color:#19365a"] { color: #e3e3e8 !important; }
/* app.css/페이지 하드코딩 밝은 배경 클래스 */
html.sec-dark .sec-card, html.sec-dark .sec-form-panel, html.sec-dark .sec-panel, html.sec-dark .sec-module-body,
html.sec-dark .sec-menu-tile, html.sec-dark .sec-menu-tile--empty, html.sec-dark .sec-menu-tile--na,
html.sec-dark .sec-settings-tile, html.sec-dark .sec-message, html.sec-dark .sec-lang-switch,
html.sec-dark .doa-box, html.sec-dark .doa-photo, html.sec-dark .po-modal, html.sec-dark .sec-modal, html.sec-dark .up-table {
	background: #282a2c; color: #e3e3e8; border-color: #3d4351;
}
/* 페이지별 표 밝은 셀 */
html.sec-dark #po-table td.po-doc, html.sec-dark #doa-table td.cs-lock,
html.sec-dark #doa-table thead th.cs-lock-h { background: #333c4e !important; color: #e3e3e8 !important; }
/* 캘린더 주말 셀(연한 빨강 → 은은한 다크 레드틴트) */
html.sec-dark .calendar-grid .day-cell.weekend { background: #2a1f24 !important; }
/* 활성 토글/탭/pill 이 var(--navy) 배경이라 다크에서 밝아지는 문제 → accent 파랑 + 흰 글자 */
html.sec-dark .pm-vt-btn.active, html.sec-dark .sec-lang-btn.active, html.sec-dark .po-tab.active,
html.sec-dark [style*="background:var(--navy)"], html.sec-dark [style*="background: var(--navy)"] {
	background: var(--accent-fill) !important; color: var(--on-accent-fill) !important;
}
/* 입력/선택 클래스(배경 미지정 → 브라우저 기본 흰색)와 커스텀 표시 박스 다크화 */
html.sec-dark .sec-input-inline, html.sec-dark .sec-select, html.sec-dark .sec-customer-display,
html.sec-dark .sec-input, html.sec-dark button.sec-select {
	background: #333c4e !important; color: #e3e3e8 !important; border-color: #474e5e !important;
}
/* JS 주입 모달 헤더의 밝은 그라디언트(예: CS 요약) */
html.sec-dark #cs-summary-modal .hd { background: var(--white) !important; }
/* 밝은(흰/연한 틴트) 인라인 박스 배경 → 모달과 동일한 깔끔한 중성 다크. (작은 상태 배지 색 #dbeafe/#fee2e2/#dcfce7/#fef3c7 등은 대비 위해 제외) */
html.sec-dark [style*="background:#fffbeb"], html.sec-dark [style*="background: #fffbeb"],
html.sec-dark [style*="background:#fff7ed"], html.sec-dark [style*="background:#fefce8"],
html.sec-dark [style*="background:#fef2f2"], html.sec-dark [style*="background: #fef2f2"],
html.sec-dark [style*="background:#fff1f2"],
html.sec-dark [style*="background:#eff6ff"], html.sec-dark [style*="background: #eff6ff"],
html.sec-dark [style*="background:#f0f9ff"] { background-color: #1e2637 !important; }
/* 위 박스들의 밝은 색 테두리(#fde68a/#fecaca/#bfdbfe 등) 흐리게 */
html.sec-dark [style*="#fde68a"], html.sec-dark [style*="#fecaca"], html.sec-dark [style*="#fca5a5"],
html.sec-dark [style*="#bfdbfe"], html.sec-dark [style*="#93c5fd"], html.sec-dark [style*="#fed7aa"] { border-color: #474e5e !important; }
/* 고스트 버튼/링크/muted/구분선 */
html.sec-dark .sec-btn--ghost { background: #333c4e; color: #e3e3e8; border-color: #474e5e; }
html.sec-dark a { color: #7fb0ff; }
html.sec-dark a.sec-header__logo, html.sec-dark .sec-nav a, html.sec-dark .sec-user-label { color: #e3e3e8; }
html.sec-dark .sec-muted { color: #aeb4c0; }
html.sec-dark hr { border-color: #3d4351; }

/* ===== 132번(2026-09-24): 다크 모드 — 페이지 <style> 의 밝은 배경·navy 활성 버튼 보정 =====
   다크에서 --navy 가 밝은색(#e6edf6)이 되어 "background:var(--navy); color:#fff" 활성 버튼이 흰 바탕에 흰 글자가 됐다.
   새 코드는 hex 대신 토큰을 쓴다: --surface(바탕) --white(카드) --border --muted --accent 와 아래 상태 배경 4종. */
:root { --ok-bg:#dcfce7; --warn-bg:#fffbeb; --err-bg:#fef2f2; --info-bg:#eff6ff; --on-accent:#fff; }
html.sec-dark { --ok-bg:rgba(34,197,94,0.14); --warn-bg:rgba(245,158,11,0.14); --err-bg:rgba(239,68,68,0.14); --info-bg:rgba(59,130,246,0.14); }
html.sec-dark #quick-range button.qr-active,
html.sec-dark .ar-qr-btn.active,
html.sec-dark .sc-rail button.on,
html.sec-dark .pv-filter button.on,
html.sec-dark .pm-vt-btn.active,
html.sec-dark .rr-fchip.active,
html.sec-dark .rr-view-toggle button[aria-pressed="true"],
html.sec-dark .qs-step__no { background: var(--accent-fill) !important; color: var(--on-accent-fill) !important; border-color: var(--accent) !important; }
html.sec-dark tr.rr-myturn > td, html.sec-dark #rr-list-tbl tr.rr-myturn > td { background: var(--warn-bg) !important; }
html.sec-dark .ar-mrow--due > td { background: var(--err-bg) !important; }
html.sec-dark .ar-mrow--due:hover > td { background: rgba(239,68,68,0.22) !important; }
html.sec-dark .calendar-grid .day-cell.today { background: var(--info-bg) !important; }
html.sec-dark .calendar-grid .day-cell.today .day-num { color: #93c5fd !important; }
html.sec-dark .calendar-grid .day-cell.drag-range { background: var(--warn-bg) !important; }
html.sec-dark .rr-proc-note { background: var(--white) !important; color: var(--muted) !important; }
html.sec-dark #rr-proc-wrap.proc-active .rr-proc-note { background: rgba(6,182,212,0.12) !important; color: #67e8f9 !important; border-color: rgba(6,182,212,0.35) !important; }
html.sec-dark .rr-proc-in:disabled { background: var(--surface) !important; color: var(--muted) !important; }
html.sec-dark #rr-leadtime-body tr.lt-mainrow.lt-next > td.lt-labelcell { color: #fcd34d; }

/* ===== 133번(2026-09-24): 공통 표·접근성 =====
   · 긴 표는 스크롤해도 머리글이 보이게(sticky) — .sec-table-wrap 안의 표
   · 키보드로 옮겨 다닐 때 외곽선(:focus-visible)
   · 아이콘 버튼 공통 모양(.sec-ico-btn) — 새 아이콘 버튼은 aria-label 을 함께 단다 */
.sec-table-wrap { max-height: 78vh; overflow: auto; }
.sec-table-wrap > table > thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); }
html.sec-dark .sec-table-wrap > table > thead th { background: #282a2c; }
:focus-visible { outline: 2px solid var(--accent, #3b82f6); outline-offset: 2px; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }
.sec-btn--danger { background: #dc2626 !important; border-color: #dc2626 !important; color: #fff !important; }
.sec-btn--success { background: #16a34a !important; border-color: #16a34a !important; color: #fff !important; }

/* ===== 63번(2026-09-24): 폰에서 Stock·Unit Price 를 카드형으로, 헤더는 한 줄 =====
   Stock 표: 품목(크게)·품번·재고·칸·작업 버튼만 한 장의 카드로. 나머지 칸은 PC 화면에서.
   열 순서(stock.html): 1선택 2No 3파트 4분류키 5칸 6입고일 7품번 8품목 9규격 10등급 11재고 12단위 13비고 14상태 15작업 */
body.sec-mobile #stock-items-table { min-width:0 !important; table-layout:auto !important; }
body.sec-mobile #stock-items-table colgroup, body.sec-mobile #stock-items-table thead { display:none; }
body.sec-mobile #stock-items-table tbody tr { display:grid; grid-template-columns:1fr auto; grid-template-areas:"name qty" "pn loc" "state act"; gap:2px 10px; padding:10px 12px; border-bottom:1px solid var(--border); }
body.sec-mobile #stock-items-table tbody td { display:none; border:0 !important; padding:0 !important; text-align:left !important; }
body.sec-mobile #stock-items-table tbody td:nth-child(8) { display:block; grid-area:name; font-weight:700; font-size:0.98rem; }
body.sec-mobile #stock-items-table tbody td:nth-child(7) { display:block; grid-area:pn; font-size:0.78rem; color:var(--muted); font-family:Consolas,monospace; }
body.sec-mobile #stock-items-table tbody td:nth-child(11) { display:block; grid-area:qty; font-size:1.05rem; font-weight:800; text-align:right !important; }
body.sec-mobile #stock-items-table tbody td:nth-child(11)::after { content:" 개"; font-size:0.72rem; font-weight:500; color:var(--muted); }
body.sec-mobile #stock-items-table tbody td:nth-child(5) { display:block; grid-area:loc; font-size:0.8rem; text-align:right !important; }
body.sec-mobile #stock-items-table tbody td:nth-child(5)::before { content:"칸 "; color:var(--muted); }
body.sec-mobile #stock-items-table tbody td:nth-child(14) { display:block; grid-area:state; font-size:0.76rem; }
body.sec-mobile #stock-items-table tbody td:nth-child(15) { display:block; grid-area:act; text-align:right !important; white-space:nowrap; }
body.sec-mobile #stock-items-table tbody td[colspan] { display:block; grid-column:1 / -1; }
/* Unit Price 검색 결과 표(위쪽 표): 품목·품목명·규격·단위·단가·통화·작업 → 카드 */
body.sec-mobile .up-wrap:not([style*="40vh"]) .up-table { min-width:0 !important; }
body.sec-mobile .up-wrap:not([style*="40vh"]) .up-table thead { display:none; }
body.sec-mobile .up-wrap:not([style*="40vh"]) .up-table tbody tr { display:grid; grid-template-columns:1fr auto; grid-template-areas:"name price" "code act" "spec spec"; gap:2px 10px; padding:9px 10px; border-bottom:1px solid var(--border); }
body.sec-mobile .up-wrap:not([style*="40vh"]) .up-table tbody td { border:0 !important; padding:0 !important; text-align:left !important; }
body.sec-mobile .up-wrap:not([style*="40vh"]) .up-table tbody td:nth-child(1) { grid-area:code; font-family:Consolas,monospace; font-size:0.78rem; color:var(--muted); }
body.sec-mobile .up-wrap:not([style*="40vh"]) .up-table tbody td:nth-child(2) { grid-area:name; font-weight:700; }
body.sec-mobile .up-wrap:not([style*="40vh"]) .up-table tbody td:nth-child(3) { grid-area:spec; font-size:0.76rem; color:var(--muted); }
body.sec-mobile .up-wrap:not([style*="40vh"]) .up-table tbody td:nth-child(4) { display:none; }
body.sec-mobile .up-wrap:not([style*="40vh"]) .up-table tbody td:nth-child(5) { grid-area:price; font-weight:800; text-align:right !important; }
body.sec-mobile .up-wrap:not([style*="40vh"]) .up-table tbody td:nth-child(6) { display:none; }
body.sec-mobile .up-wrap:not([style*="40vh"]) .up-table tbody td:nth-child(7) { grid-area:act; text-align:right !important; }
body.sec-mobile .up-wrap:not([style*="40vh"]) .up-table tbody td[colspan] { grid-column:1 / -1; }
body.sec-mobile .up-wrap { overflow-x:hidden !important; }
/* 헤더 한 줄: 줄바꿈 대신 가로로 밀기, 이름·보조 글자는 숨김(첫 화면 높이의 1/4 을 차지하던 문제) */
body.sec-mobile .sec-header { flex-wrap:nowrap !important; overflow-x:auto; scrollbar-width:none; }
body.sec-mobile .sec-header::-webkit-scrollbar { display:none; }
/* 통합검색 결과: 헤더가 가로로 밀리는(overflow-x) 칸이라 그 안에서는 잘려 안 보였다 — 휴대폰은 화면에 고정(2026-10-30 시뮬레이션) */
body.sec-mobile .sec-gs-results { position:fixed !important; top:62px !important; left:8px !important; right:8px; width:auto !important; max-height:calc(100vh - 80px) !important; }
body.sec-mobile .sec-header .sec-user-label { max-width:4.5em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.sec-mobile .sec-gsearch input { width:7.5em !important; min-width:0 !important; }
/* 휴대폰 헤더(2026-10-19 점검): 검색 칸 min-width 200px(인라인) 때문에 헤더가 499px 로 넘쳐 사용자 버튼이 화면 밖으로 잘렸다 → 검색은 남는 폭만, 사용자 버튼은 머리글자만 */
body.sec-mobile .sec-gsearch { min-width:0 !important; flex:1 1 auto !important; }
body.sec-mobile .sec-gsearch input { width:100% !important; }
body.sec-mobile .sec-user-btn .sec-user-label, body.sec-mobile .sec-user-btn .sec-user-chev { display:none !important; }
/* 휴대폰 알림(PO 수령 확인·TODO 알림): 오른쪽 위 340px 로 떠 헤더·제목을 덮었다 → 화면 아래에 가로로(2026-10-19 점검) */
body.sec-mobile #cshub-reminder-toasts { top:auto !important; bottom:12px !important; left:10px !important; right:10px !important; max-width:none !important; max-height:42vh; overflow:auto; }
body.sec-mobile .sec-nav { flex-wrap:nowrap !important; }
/* 63번 보정: 표·tbody 를 block 으로 해야 카드(grid) 가 전체 폭을 쓴다 */
body.sec-mobile #stock-items-table, body.sec-mobile #stock-items-table tbody,
body.sec-mobile .up-wrap:not([style*="40vh"]) .up-table, body.sec-mobile .up-wrap:not([style*="40vh"]) .up-table tbody { display:block !important; width:100% !important; }
body.sec-mobile #stock-items-table tbody td:nth-child(8), body.sec-mobile #stock-items-table tbody td:nth-child(7) { word-break:break-word; min-width:0; }
body.sec-mobile #stock-items-table tbody tr { grid-template-columns:minmax(0,1fr) auto !important; grid-template-areas:"name qty" "pn loc" "state state" "act act" !important; }
body.sec-mobile #stock-items-table tbody td:nth-child(15) { text-align:left !important; white-space:normal !important; padding-top:4px !important; }
body.sec-mobile .up-wrap:not([style*="40vh"]) .up-table tbody tr { grid-template-columns:minmax(0,1fr) auto !important; grid-template-areas:"name price" "code code" "spec spec" "act act" !important; }

/* 컨트롤 높이 통일(2026-09-25, 사용자 지시): 검색창(.sec-input-inline 42px)을 기준으로 드롭박스·날짜·버튼을 같은 높이로.
   전에는 입력 42 · 드롭박스 44 · 버튼 36~38 · 페이지별 인라인 지정(Stock 31px)이 섞여 줄이 들쭉날쭉했다.
   textarea·표시용 div(.sec-customer-display)·표 안 작은 버튼(.sec-btn--sm)·칩은 제외. */
input.sec-input-inline, select.sec-input-inline, select.sec-select, .sec-btn--inline:not(.sec-btn--sm) { box-sizing: border-box; height: 2.625rem; }
.sec-btn--inline:not(.sec-btn--sm) { display: inline-flex; align-items: center; justify-content: center; padding-top: 0; padding-bottom: 0; line-height: 1.2; }
input[type="date"].sec-input-inline, input[type="datetime-local"].sec-input-inline { padding-top: 0; padding-bottom: 0; }
/* 작은 입력 묶음 .sec-form--sm(2026-10-22, 사용자): 좁은 판 · 보조 폼은 감싸는 묶음에 이 클래스 하나만 단다 — 안의 이름표 · 입력칸 · 드롭박스 · 날짜 · 글상자 · 버튼이 13px · 36px.
   화면마다 height · padding · font-size 를 따로 주지 않는다(화면 규칙 5). 표 안 작은 버튼(.sec-btn--sm)·체크박스·파일 칸은 그대로. 처음 쓴 곳: Import/Export 미리보기 창의 업데이트 쪽 */
.sec-form--sm .sec-form-row label { font-size: 0.8125rem; }
.sec-form--sm input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]), .sec-form--sm select, .sec-form--sm textarea { box-sizing: border-box; font-size: 0.8125rem; padding-left: 0.625rem; padding-right: 0.625rem; }
.sec-form--sm input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]), .sec-form--sm select { height: 2.25rem; padding-top: 0; padding-bottom: 0; }
.sec-form--sm textarea { padding-top: 0.5rem; padding-bottom: 0.5rem; line-height: 1.5; }
.sec-form--sm .sec-btn--inline:not(.sec-btn--sm) { height: 2.25rem; font-size: 0.8125rem; padding-left: 0.875rem; padding-right: 0.875rem; }

/* ── 제안서 1·5장(2026-09-25): 헤더 아이콘 표준·사용자 메뉴 ── */
.sec-i { display:inline-block; vertical-align:middle; flex:none; }
.sec-nav--v2 { gap: 4px; flex-wrap: nowrap; }
.sec-hbtn { width:36px; height:36px; border-radius:8px; border:none; background:transparent; color:var(--muted); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; position:relative; padding:0; }
.sec-hbtn:hover { background:var(--surface); color:var(--navy); }
.sec-notif-cnt { position:absolute; top:3px; right:3px; min-width:16px; height:16px; border-radius:999px; background:var(--accent-fill); color: var(--on-accent-fill); font-size:10px; font-weight:800; line-height:16px; text-align:center; padding:0 4px; }
.sec-gs-ic { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; line-height:0; }
.sec-usermenu { position:relative; margin-left:6px; padding-left:10px; border-left:1px solid var(--border); }
.sec-user-btn { height:36px; padding:0 8px 0 6px; border-radius:8px; border:1px solid transparent; background:transparent; color:var(--navy); display:inline-flex; align-items:center; gap:8px; cursor:pointer; font:inherit; font-size:0.9rem; font-weight:600; }
.sec-user-btn:hover, .sec-user-btn.open { background:var(--surface); border-color:var(--border); }
.sec-user-btn .sec-user-chev { color:var(--muted); transition:transform .15s; }
.sec-user-btn.open .sec-user-chev { transform:rotate(180deg); }
.sec-avatar { width:26px; height:26px; border-radius:50%; background:var(--accent-fill); color: var(--on-accent-fill); display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; }
.sec-user-menu { position:absolute; right:0; top:calc(100% + 8px); width:250px; border:1px solid var(--border); border-radius:12px; background:var(--white); box-shadow:0 12px 32px rgba(15,23,42,.18); padding:6px; z-index:1200; }
.sec-um-who { padding:10px 12px 8px; border-bottom:1px solid var(--border); margin-bottom:4px; }
.sec-um-who b { display:block; font-size:14px; color:var(--navy); }
.sec-um-who span { font-size:12px; color:var(--muted); word-break:break-all; }
.sec-um-item { display:flex; align-items:center; gap:10px; width:100%; padding:9px 12px; border-radius:8px; font:inherit; font-size:13px; color:var(--navy); background:transparent; border:none; cursor:pointer; text-decoration:none; text-align:left; box-sizing:border-box; }
.sec-um-item:hover { background:var(--surface); }
.sec-um-item .sec-i { color:var(--muted); }
.sec-um-item.sec-um-danger { color:#b91c1c; }
.sec-um-item.sec-um-lang { cursor:default; }
.sec-um-item.sec-um-lang .sec-lang-switch { margin-left:auto; margin-right:0; }
.sec-um-item.sec-um-lang:hover { background:transparent; }
.sec-nav--v2 .sec-mobile-toggle { border:none; padding:9px 12px; font-size:13px; color:var(--navy); border-radius:8px; }
body.sec-mobile .sec-nav--v2 .sec-mobile-toggle { background:transparent; color:var(--accent); border:none; }
.sec-nav--v2 .sec-settings-btn { width:100%; height:auto; border-radius:8px; }
body.sec-mobile .sec-user-btn .sec-user-label { max-width:4.5em; }
body.sec-mobile .sec-user-menu { position:fixed; left:8px; right:8px; top:56px; width:auto; }
html.sec-dark .sec-hbtn { color:#aab4c3; } html.sec-dark .sec-hbtn:hover { background:#282a2c; color:#e3e3e8; }
html.sec-dark .sec-user-menu { background:#1d2635; border-color:#3d4351; }
html.sec-dark .sec-user-btn:hover, html.sec-dark .sec-user-btn.open { background:#282a2c; border-color:#3d4351; }
html.sec-dark .sec-um-item { color:#e3e3e8; } html.sec-dark .sec-um-item:hover { background:#282a2c; }
html.sec-dark .sec-um-who b { color:#e3e3e8; }
html.sec-dark .sec-usermenu { border-left-color:#3d4351; }
/* 작업열 아이콘(SVG)은 흑백 필터가 필요 없다 — 이모지가 남은 곳만 필터가 적용된다 */
.sec-ico-btn .sec-i, .po-act-btn .sec-i, .rr-act-btn .sec-i, .doa-act-btn .sec-i, .dc-icon-btn .sec-i { color:var(--muted); }
.sec-ico-btn:hover .sec-i, .po-act-btn:hover .sec-i, .rr-act-btn:hover .sec-i, .doa-act-btn:hover .sec-i, .dc-icon-btn:hover .sec-i { color:var(--navy); }
.sec-nt-ic .sec-i { color:currentColor; }
.sec-user-menu .sec-settings-btn { display:flex; width:100%; height:auto; justify-content:flex-start; padding:9px 12px; border-radius:8px; color:var(--navy); }
.sec-user-menu .sec-settings-btn:hover { background:var(--surface); color:var(--navy); }
html.sec-dark .sec-user-menu .sec-settings-btn { color:#e3e3e8; }

/* ── 제안서 3장(2026-09-25): 상태 배지 색 토큰 — 뜻 5가지 × 테마 2가지. 배지·칩·안내 상자는 이 10색만 쓴다 ──
   진행(info) · 완료(ok) · 대기(wait) · 지연/오류(bad) · 중립(mute). 라이트는 옅은 배경+진한 글자(대비 7:1↑), 다크는 채도 뺀 어두운 배경+파스텔 글자(4.5:1↑) */
:root {
	--b-info-bg:#dbeafe; --b-info-fg:#1e40af;
	--b-ok-bg:#dcfce7;   --b-ok-fg:#166534;
	--b-wait-bg:#fef3c7; --b-wait-fg:#92400e;
	--b-bad-bg:#fee2e2;  --b-bad-fg:#991b1b;
	--b-mute-bg:#f1f5f9; --b-mute-fg:#475569;
}
html.sec-dark {
	--b-info-bg:#26395a; --b-info-fg:#93c5fd;
	--b-ok-bg:#14352a;   --b-ok-fg:#86efac;
	--b-wait-bg:#3a2f14; --b-wait-fg:#fcd34d;
	--b-bad-bg:#3f1d1d;  --b-bad-fg:#fca5a5;
	--b-mute-bg:#353841; --b-mute-fg:#cbd5e1;
}
.sec-badge { display:inline-flex; align-items:center; height:22px; padding:0 9px; border-radius:6px; font-size:12px; font-weight:600; white-space:nowrap; line-height:1; }
.sec-badge--info { background:var(--b-info-bg); color:var(--b-info-fg); }
.sec-badge--ok { background:var(--b-ok-bg); color:var(--b-ok-fg); }
.sec-badge--wait { background:var(--b-wait-bg); color:var(--b-wait-fg); }
.sec-badge--bad { background:var(--b-bad-bg); color:var(--b-bad-fg); }
.sec-badge--mute { background:var(--b-mute-bg); color:var(--b-mute-fg); }

/* ── 제안서 2장(2026-09-25): 체크박스·라디오 18px 커스텀, 드롭박스 화살표 통일(높이 42는 앞서 적용) ── */
input[type="checkbox"], input[type="radio"] { appearance:none; -webkit-appearance:none; width:18px !important; height:18px !important; min-width:18px !important; max-width:18px !important; min-height:0 !important; padding:0 !important; font-size:0; margin:0 4px 0 0; border:1.5px solid var(--muted); border-radius:4px; background:var(--white); vertical-align:middle; cursor:pointer; position:relative; display:inline-block; box-sizing:border-box; flex:none; }
input[type="radio"] { border-radius:50%; }
input[type="checkbox"]:checked { background:var(--accent-fill); border-color:var(--accent); }
input[type="checkbox"]:checked::after { content:""; position:absolute; left:5px; top:1px; width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
input[type="checkbox"]:indeterminate { background:var(--accent-fill); border-color:var(--accent); }
input[type="checkbox"]:indeterminate::after { content:""; position:absolute; left:4px; top:7px; width:8px; height:2px; background:#fff; }
input[type="radio"]:checked { border-color:var(--accent); }
input[type="radio"]:checked::after { content:""; position:absolute; inset:3px; border-radius:50%; background:var(--accent-fill); }
input[type="checkbox"]:disabled, input[type="radio"]:disabled { opacity:.45; cursor:default; }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
html.sec-dark input[type="checkbox"], html.sec-dark input[type="radio"] { background:#1d2635; border-color:#7e8594; }
select.sec-select, select.sec-input-inline { appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"); background-repeat:no-repeat !important; background-position:right 10px center !important; background-size:16px 16px !important; padding-right:32px !important; }
html.sec-dark select.sec-select, html.sec-dark select.sec-input-inline { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") !important; background-repeat:no-repeat !important; background-position:right 10px center !important; background-size:16px 16px !important; }
select.sec-select[multiple], select.sec-input-inline[multiple] { background-image:none !important; padding-right:12px !important; }

/* ── 제안서 4장(2026-09-25): 표 작업열은 아이콘 최대 4개 + ⋯ 더보기(삭제는 항상 더보기 안) ── */
.sec-act-more { background:none; border:none; cursor:pointer; padding:2px 4px; margin:0 0 0 1px; border-radius:5px; color:var(--muted); line-height:1; display:inline-flex; align-items:center; vertical-align:middle; }
.sec-act-more:hover, .sec-act-more.open { background:var(--surface); color:var(--navy); }
.sec-actm { position:fixed; z-index:1300; min-width:170px; border:1px solid var(--border); border-radius:10px; background:var(--white); box-shadow:0 10px 28px rgba(15,23,42,.18); padding:4px; }
.sec-actm-item { display:flex; align-items:center; gap:10px; width:100%; padding:8px 12px; border:none; background:transparent; border-radius:7px; font:inherit; font-size:13px; color:var(--navy); cursor:pointer; text-align:left; white-space:nowrap; }
.sec-actm-item:hover { background:var(--surface); }
.sec-actm-item .sec-i { color:var(--muted); }
.sec-actm-item.danger { color:#b91c1c; }
.sec-actm-item.danger .sec-i { color:#b91c1c; }
.sec-actm-sep { height:1px; background:var(--border); margin:4px 6px; }
html.sec-dark .sec-actm { background:#1d2635; border-color:#3d4351; }
html.sec-dark .sec-actm-item { color:#e3e3e8; } html.sec-dark .sec-actm-item:hover { background:#282a2c; }
/* 제목 줄 '도구' 메뉴(가끔 쓰는 버튼 모음) */
.sec-tools { position:relative; display:inline-block; }
.sec-tools-menu { position:absolute; right:0; top:calc(100% + 6px); min-width:200px; border:1px solid var(--border); border-radius:10px; background:var(--white); box-shadow:0 10px 28px rgba(15,23,42,.18); padding:4px; z-index:1200; }
.sec-tools-menu > * { display:flex !important; width:100% !important; box-sizing:border-box; align-items:center; gap:10px; padding:9px 12px !important; border:none !important; background:transparent !important; border-radius:7px; font-size:13px !important; color:var(--navy) !important; text-align:left; justify-content:flex-start !important; height:auto !important; }
.sec-tools-menu > *:hover { background:var(--surface) !important; }
.sec-tools-menu > [hidden] { display:none !important; }
html.sec-dark .sec-tools-menu { background:#1d2635; border-color:#3d4351; }
html.sec-dark .sec-tools-menu > * { color:#e3e3e8 !important; } html.sec-dark .sec-tools-menu > *:hover { background:#282a2c !important; }

/* ── 보기 전환(2026-09-29, 사용자 확정 1안): 한 페이지 안에서 표를 바꿔 보는 버튼 묶음 ──
   위치 = 제목 줄 오른쪽('+ 새 …'·도구 ▾ 왼쪽). 42px 한 묶음, 고른 보기만 강조색 채움, 글자만(아이콘 없음).
   숫자(.sec-badge)는 챙겨야 할 것이 있을 때만. 쓰는 곳: CS History(CS 이력/Tube 수명) · Stock(현재 재고/사용이력) · Manual */
.sec-seg { display:inline-flex; align-items:stretch; height:42px; border:1px solid var(--border); border-radius:10px; background:var(--white); padding:3px; gap:2px; flex:none; box-sizing:border-box; }
.sec-seg > button { border:0; background:none; color:var(--muted); font:inherit; font-weight:700; font-size:0.88rem; padding:0 14px; border-radius:7px; display:inline-flex; align-items:center; gap:6px; cursor:pointer; white-space:nowrap; line-height:1; }
.sec-seg > button:hover { color:var(--navy); background:var(--surface); }
.sec-seg > button.on { background:var(--accent-fill); color: var(--on-accent-fill); }
.sec-seg > button.on:hover { background:var(--accent-fill); color: var(--on-accent-fill); }
.sec-seg > button .sec-badge { font-size:0.72rem; padding:1px 7px; }
.sec-seg > button.on .sec-badge { background:rgba(255,255,255,0.22); color:#fff; }
.sec-page-head__right { display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
body.sec-mobile .sec-seg { width:100%; } body.sec-mobile .sec-seg > button { flex:1; justify-content:center; }
/* 제목 줄 오른쪽·보기 전환 안에서 hidden 을 준 것은 정말 숨긴다(.sec-btn·.sec-badge 의 display 가 [hidden] 을 이기는 함정) */
.sec-page-head__right > [hidden], .sec-seg [hidden] { display:none !important; }

/* 짧은 알림 secToast(header.js, 2026-10-14) — 화면 아래 가운데, 글자만. 라이트=진한 바탕·흰 글, 다크=밝은 바탕·어두운 글(--navy·--white 를 뒤집어 씀) */
.sec-toasts { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 12000; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
.sec-toast { padding: 11px 18px; border-radius: 10px; background: var(--navy); color: var(--white); font-size: .9rem; font-weight: 600; line-height: 1.4; text-align: center; overflow-wrap: anywhere; box-shadow: 0 10px 30px rgba(15, 27, 45, .25); opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; }
.sec-toast.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .sec-toast { transition: none; } }

/* 휴대폰 누르기 크기(2026-11-02 점검 S8) — 손가락으로 누르기 작던 것: ← 뒤로 28px(52화면) · ⋯ 더보기 26×22(14화면) · 채권 규칙 × 9×14 */
body.sec-mobile .sec-page-back { width: 36px; height: 36px; }
body.sec-mobile .sec-act-more { min-width: 36px; min-height: 36px; justify-content: center; }
body.sec-mobile .ar-rule-x { min-width: 28px; min-height: 28px; }