@charset "UTF-8";
/* ==========================================================================
   BABYNEWS INTRANET - 인슈라넷 디자인 테마 이식 (2026-10-01)
   인슈라넷 lapl-theme.css 를 그대로 옮기고 초록은 베이비뉴스 공식 로고 군청(#253272), 라플 주황은 회색(#5E6475)으로 바꿨다 — 주황은 눈부시다는 사용자 지시(2026-10-01).
   색을 바꿀 때는 이 파일을 직접 고치지 말고 .tools/recolor.js 를 다시 돌린다
   lapl.co.kr/admin 의 레이아웃/타이포/색 체계를 인슈라넷 CRM에 이식한 레이어.
   common.css 뒤에 로드되어 레거시 스타일을 덮어쓴다.

   구조: ① 다크 네이비 상단바  ② 가로 탭 내비게이션(2뎁스)  ③ 아이보리 본문
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 디자인 토큰
   -------------------------------------------------------------------------- */
:root {
	/* 색 - 배경/경계는 색조 없는 중립 회색, 강조만 네이비·코랄·블루
	   (lapl.co.kr/admin 의 아이보리 계열에서 색조를 뺀 값) */
	--navy:        #17213A;
	--ivory:       #F7F7F8;   /* 페이지 바탕 - 중립 회색 */
	--surface:     #FFFFFF;
	--border:      #E4E4E7;
	--divider:     #EFEFF1;
	--text:        #17213A;
	--text-2:      #6B7080;
	--muted:       #9B9DA6;
	--coral:       #253272;
	--coral-deep:  #E05A4C;
	--mist:        #EDEEF1;
	--blue:        #3B7FE0;
	--lapl-orange: #5E6475;   /* 라플 로고 삼각형 오렌지 - 본인 소속 표시 전용 */
	/* 라플 사각로고에서 그대로 뽑은 초록 투톤 (2026-09-17 사용자 지시).
	   로고는 대각선으로 두 톤이 갈린다 - 짙은 쪽이 왼쪽 위, 밝은 쪽이 오른쪽 아래다. */
	--lapl-green:   #253272;
	--lapl-green-2: #5E6475;

	/* 상태색 */
	--success:     #2E9E6B;
	--warning:     #E0A040;
	--danger:      #E05A4C;
	--info:        #3B7FE0;

	/* 타이포 */
	--font-sans:   "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
	               "Segoe UI", "Noto Sans KR", sans-serif;
	--fs-base:     15px;
	--fs-table:    14px;
	--fs-sm:       13px;
	--fs-xs:       12px;
	--lh-base:     1.55;

	/* 형태 */
	--radius:      12px;
	--radius-sm:   8px;
	--control-h:   40px;
	--btn-h:       50px;

	/* 레이아웃 - 헤더 높이는 기존(80px) 유지하여 레거시 오프셋 계산을 건드리지 않음 */
	--header-h:    80px;
	--lnb-w:       200px;
	--page-pad:    24px;

	/* ── 메뉴 3단계 규칙 ────────────────────────────────────────────
	   대(GNB) 업무 영역  → 밑줄 탭      : 고객 관리 · 계약 관리 …
	   중(SNB) 영역 내 화면 → 알약 버튼   : 고객 목록 · 상담 댓글 …
	   소(TAB) 화면 내 전환 → 세그먼트    : 기간·유형 전환 등
	   단계가 내려갈수록 높이·글자·굵기가 한 단계씩 작아진다. */
	--gnb-h:       54px;   --gnb-fs:  15px;   /* 대 */
	--snb-h:       32px;   --snb-fs:  13px;   /* 중 */
	--tab3-h:      28px;   --tab3-fs: 12px;   /* 소 */
}

/* --------------------------------------------------------------------------
   2. 타이포그래피 - Pretendard 전역 적용
   -------------------------------------------------------------------------- */
html, body,
input, select, textarea, button,
.text-sub, .table, .btn {
	font-family: var(--font-sans) !important;
}

html {
	/* 모바일 고무줄 스크롤(당겨서 새로고침 포함) 차단 - 화면이 위아래로 흔들리지 않게 */
	overscroll-behavior-y: none;
}

body {
	margin: 0;
	padding: 0;
	min-height: 100vh;
	/* 주소창이 접혔다 펴질 때 100vh 가 변해 화면이 튄다. dvh 는 실제 보이는 높이라 안 튄다. */
	min-height: 100dvh;
	overscroll-behavior-y: none;
	display: flex;
	flex-direction: column;
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	color: var(--text);
	background-color: var(--ivory);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 { color: var(--text); font-weight: 700; line-height: 1.45; }
h1 { font-size: 26px; }
h2 { font-size: 21px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }

a { color: var(--navy); }
a:hover { color: var(--coral-deep); }

/* --------------------------------------------------------------------------
   3. 상단바 - 라플 초록 투톤
   -------------------------------------------------------------------------- */
.header {
	height: var(--header-h);
	/* 로고처럼 45° 사선으로 두 톤이 딱 갈린다. 갈리는 자리는 날짜가 시작되는 지점이며
	   그 x 좌표는 화면에서 재어 --hdr-split 으로 넣어 준다 (include/head.php). */
	background-color: var(--lapl-green) !important;
	background-image: none !important;
	--hdr-split: 62%;
	border-bottom: 0;
	position: fixed;
	top: 0; left: 0;
	width: 100%;
	z-index: 500;
}
/* 밝은 쪽 초록 - 45° 로 자른다. 아래로 내려갈수록 왼쪽으로 기울어 로고와 방향이 같다 */
.header::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--lapl-green-2);
	clip-path: polygon(var(--hdr-split) 0, 100% 0, 100% 100%, calc(var(--hdr-split) - var(--header-h)) 100%);
	pointer-events: none;
}
/* 사선은 배경이다 - 로고와 버튼은 그 위로 */
.header .header-wrap { position: relative; z-index: 1; }
.header .header-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	max-width: none;
	padding: 0 var(--page-pad);
}
/* 로고 잠금장치 - INSURANET | LAPL (구분선에 바짝 붙인다) */
.header .logo { display: inline-flex; align-items: center; gap: 8px; height: 100%; flex-shrink: 0; }
/* INSURANET 워드마크는 검정 단색이라 흰색으로 반전. 이미지가 글자에 딱 맞게 잘려 있다 */
/* 레거시 CSS 가 .logo img 에 margin-right:20px 을 주고 있어 바가 한쪽으로 쏠린다 */
.header .logo img { margin: 0 !important; }
.logo__insuranet { height: 26px; width: auto; max-height: none; filter: brightness(0) invert(1); }
/* LAPL 은 주황 삼각형을 포함한 흰색 투명 PNG - 반전하지 않는다.
   이미지 안에서 글자가 차지하는 비율이 76.47%(340px 중 260px)이므로
   26 / 0.7647 = 34px 을 줘야 INSURANET 글자와 높이가 같아진다. */
/* 삼각형이 글자 위에 얹혀 있어 이미지 중앙과 글자 중앙이 4px 어긋난다.
   그대로 세로 가운데 정렬하면 LAPL 글자만 아래로 내려가므로 그만큼 올려준다. */
.logo__lapl { height: 34px; width: auto; max-height: none; transform: translateY(-4px); }

/* 두 로고 사이 구분 바 - 글자 높이에 맞춰 가운데 */
.logo__divider {
	width: 1px;
	height: 26px;
	background: rgba(255, 255, 255, .35);
	flex-shrink: 0;
}

/* --- 관리 설정 (톱니바퀴) --------------------------------------------- */
.admin-menu { position: relative; display: inline-flex; }
.admin-menu__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	background: transparent;
	color: rgba(255, 255, 255, .66);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.admin-menu__btn:hover,
.admin-menu__btn[aria-expanded="true"] { background: rgba(255, 255, 255, .1); color: #fff; }
.admin-menu__btn svg {
	width: 18px; height: 18px;
	fill: none; stroke: currentColor;
	stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.admin-menu__pop {
	display: none;
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 176px;
	padding: 6px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: 0 10px 28px rgba(23, 33, 58, .16);
	z-index: 600;
}
.admin-menu__pop.is-open { display: block; }
.admin-menu__title {
	margin: 4px 10px 6px;
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--muted);
}
.admin-menu__item {
	display: block;
	padding: 9px 10px;
	border-radius: var(--radius-sm);
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--text);
	text-decoration: none;
	white-space: nowrap;
}
.admin-menu__item:hover { background: var(--ivory); color: var(--coral-deep); }

/* --- 관리 설정 페이지 ------------------------------------------------- */
.setting-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}
@media (max-width: 1100px) { .setting-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .setting-grid { grid-template-columns: 1fr; } }

.setting-card {
	padding: 22px 24px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
}
.setting-card__title { margin: 0 0 6px; font-size: 17px; font-weight: 700; color: var(--text); }
.setting-card__desc  { margin: 0 0 16px; font-size: var(--fs-sm); color: var(--text-2); }
.setting-card__links { display: flex; flex-wrap: wrap; gap: 8px; }

/* --- 개인 대시보드 ----------------------------------------------------- */
.dash-grid { margin-bottom: 28px; }
.dash-grid .card { display: flex; flex-direction: column; }
.dash-card--wide { grid-column: span 2; }
@media (max-width: 700px) { .dash-card--wide { grid-column: auto; } }

.dash-more {
	margin-top: auto;
	padding-top: 12px;
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--text-2);
	text-decoration: none;
}
.dash-more::after { content: " ›"; }
.dash-more:hover { color: var(--coral-deep); }
.dash-empty { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; }

/* 대시보드가 여러 개 쌓일 때(관리자) 섹션 사이 간격 */
.dash-title--mt { margin-top: 4px; }

/* 미리보기 안내 띠 */
.dash-preview {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 14px;
	padding: 11px 16px;
	background: var(--tone-zone-c);
	border: 1px solid var(--border);
	border-left: 3px solid var(--lapl-orange);
	border-radius: var(--radius-sm);
	font-size: var(--fs-sm);
	color: var(--text-2);
}
.dash-preview b { color: var(--text); }
.dash-preview a { margin-left: auto; font-weight: 700; color: var(--coral-deep); text-decoration: none; }

/* --- 출근/퇴근 체크 ---------------------------------------------------- */
.punch { margin: 2px 0 14px; }
.punch__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding: 7px 0;
	border-bottom: 1px solid var(--divider);
}
.punch__row:last-child { border-bottom: 0; }
.punch__label { font-size: var(--fs-sm); color: var(--text-2); }
.punch__time {
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--text);
	font-variant-numeric: tabular-nums;
}
.punch__time.is-empty { color: var(--muted); font-weight: 600; }
.punch__btns { display: flex; gap: 8px; margin-top: auto; }
.punch__btns .btn { flex: 1; min-height: 38px; }
.punch__btns .btn[disabled] { opacity: .45; cursor: default; filter: none; }

/* 전체관리자 대시보드 */
.dash-section { margin-bottom: 28px; }
.dash-section__title {
	margin: 0 0 14px;
	font-size: 17px;
	font-weight: 700;
	color: var(--text);
}
.dash-section__title small { margin-left: 6px; font-size: var(--fs-sm); font-weight: 500; color: var(--muted); }

.dash-card--full { grid-column: 1 / -1; }

/* 섹션 머리줄 - 제목 + 기간/지점 선택 */
.dash-bar-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}
.dash-month { display: flex; align-items: center; gap: 6px; margin: 0; }
.dash-month select {
	height: 32px;
	padding: 0 10px;
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--text);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
}
.dash-month__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 32px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--text-2);
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
}
.dash-month__nav:hover { background: var(--ivory); color: var(--text); }
.dash-month__today {
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--text-2);
	text-decoration: none;
	margin-left: 2px;
}
.dash-month__today:hover { color: var(--coral-deep); }

/* 추이표에서 선택한 달 강조 */
.dash-table th.is-current,
.dash-table td.is-current { background: var(--tone-zone-a); font-weight: 700; }
.dash-table { width: 100%; border-collapse: collapse; margin-top: 4px; }
.dash-table th, .dash-table td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--divider); }
.dash-table th { background: var(--ivory); color: var(--text-2); font-weight: 700; white-space: nowrap; }
/* 숫자 칸은 오른쪽 정렬 - 머리글도 같이 맞춰야 제목과 값이 한 줄에 선다 */
.dash-table td:nth-child(n+2),
.dash-table th:nth-child(n+2) { text-align: right; }

.dash-bar { display: block; height: 6px; background: var(--divider); border-radius: 999px; overflow: hidden; }
.dash-bar > i { display: block; height: 100%; background: var(--navy); border-radius: 999px; }

.txt-blue  { color: var(--blue); }
.txt-coral { color: var(--coral-deep); }
/* 실적 집계에서 빠지는 값(일시납 등)은 한 단계 흐리게 */
.txt-muted { color: var(--muted); }

/* --- CSR ERP 본문 (csradmin 화면을 인슈라넷 UI 안에 넣을 때) ----------- */
.csr-body { background: transparent; }
.snb__badge {
	display: inline-block;
	margin-left: 5px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--coral);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 17px;
}
.snb__link.active .snb__badge { background: var(--coral-deep); }

/* 본인 소속 지점 - 지점명만 라플 브랜드 오렌지로. 배지·배경 없이 글자색만 바꾼다 */
.dash-table .is-mine-name { color: var(--lapl-orange); }
.dash-table tfoot td {
	background: var(--tone-head);
	font-weight: 700;
	border-top: 1px solid var(--border);
	border-bottom: 0;
}

/* --- 회원상담 최신댓글 표 ---------------------------------------------- */
.dash-section__head { margin: 28px 0 12px; }

.comment-table td { vertical-align: top; padding-top: 11px; padding-bottom: 11px; text-align: center; }
.comment-table th { text-align: center; }
/* 읽는 칸은 왼쪽 정렬 - 레거시 .table.type--1 의 가운데 정렬보다 우선 */
.comment-table td.cmt-content,
.comment-table td.cmt-status,
.comment-table thead th:nth-child(4),
.comment-table thead th:nth-child(5) { text-align: left !important; }
.comment-table .cmt-writer { font-weight: 700; color: var(--text); }
.comment-table .cmt-org    { color: var(--text-2); }
.comment-table .cmt-org .cmt-sub { display: block; font-size: var(--fs-xs); color: var(--muted); }
.comment-table .cmt-name a { font-weight: 700; }
.comment-table .cmt-content { color: var(--text); line-height: 1.5; }
.comment-table .cmt-content .cmt-meta {
	display: block;
	margin-top: 3px;
	font-size: var(--fs-xs);
	color: var(--muted);
}
.comment-table .cmt-date { color: var(--text-2); white-space: nowrap; font-size: var(--fs-sm); }
.comment-table .cmt-none { color: var(--muted); }

/* 상태 - 배지 대신 텍스트로 간단하게. 단계는 색으로만 구분한다 */
.tag-st {
	font-size: var(--fs-sm);
	font-weight: 600;
	white-space: nowrap;
}
.tag-st + .tag-st::before {
	content: " · ";
	color: var(--muted);
	font-weight: 400;
}
.tag-st--tm    { color: #2F5FA8; }              /* TM 단계  */
.tag-st--pm    { color: var(--coral-deep); }    /* PM 상담 */
.tag-st--visit { color: #263174; }              /* 방문·계약 */

.header .btn-wrap { display: flex; align-items: center; gap: 6px; }

/* 상단바 시계 + 출퇴근 (사용자 지시 2026-09-17) - 이름 왼쪽 */
.hdr-now {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	padding: 0 12px 0 2px;
	font-size: 14px;
	color: rgba(255, 255, 255, .72);
	white-space: nowrap;
}
/* 초가 바뀔 때마다 폭이 흔들리면 옆 버튼이 들썩인다 - 숫자 폭을 고정한다 */
.hdr-now__time {
	font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	font-size: 19px;
	letter-spacing: -.02em;
	color: #fff;
}
.hdr-punch { display: inline-flex; align-items: center; gap: 4px; margin-right: 10px; }
/* 찍고 나면 시각만 조용히 남는다 */
.hdr-punch__stamp {
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	color: rgba(255, 255, 255, .72);
	white-space: nowrap;
}
.header .btn-punch[hidden] { display: none; }
/* 메일·Cafe 버튼과 같은 옷을 입되 둥글기만 다르다 (사용자 지시 2026-09-17).
   상단바에서 이것만 알약 모양이라, 색을 쓰지 않아도 눈에 먼저 들어온다. */
.header .btn-punch {
	height: 26px;
	padding: 0 9px;
	font-size: 12px;
	border-radius: 999px !important;
	background: rgba(255, 255, 255, .08) !important;
	color: rgba(255, 255, 255, .85) !important;
	border-color: rgba(255, 255, 255, .16) !important;
	cursor: pointer;
}
.header .btn-punch:hover { background: rgba(255, 255, 255, .16) !important; color: #fff !important; }
.header .btn-punch:disabled { opacity: .55; cursor: default; }


/* 상단바 사용자 정보 */
.logged-user-info {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 9px;
	background-color: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: var(--radius-sm);
	font-size: var(--fs-sm);
	color: rgba(255, 255, 255, .72);
	margin-right: 6px;
	max-width: 250px;
}
.logged-user-name  { font-weight: 700; color: #fff; }
@media (max-width: 1500px) { .ip-address { display: none; } }
.ip-address        { color: rgba(255, 255, 255, .6); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-weight: 400; }
/* 초록 바탕에서는 색을 얹지 않는다 - 흰 글자가 제일 깨끗하다 (사용자 지시 2026-09-17) */
.connection-status { color: #fff; font-weight: 700; }

/* 상단바 버튼 */
.header .btn {
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 0 9px;
	font-size: var(--fs-sm);
	font-weight: 700;
	border-radius: var(--radius-sm);
	text-decoration: none;
	border: 1px solid transparent;
}
.btn-ext {
	background: rgba(255, 255, 255, .08) !important;
	color: rgba(255, 255, 255, .85) !important;
	border-color: rgba(255, 255, 255, .16) !important;
}
.btn-ext:hover { background: rgba(255, 255, 255, .16) !important; color: #fff !important; }

/* 주요 동작 버튼 - 고객목록/댓글 동일 코랄로 통일 */
.btn-accent-l,
.btn-primary-l {
	background: var(--coral) !important;
	color: #fff !important;
	border-color: var(--coral) !important;
}
.btn-accent-l:hover, .btn-primary-l:hover { background: var(--coral-deep) !important; border-color: var(--coral-deep) !important; }

/* 보조 동작 - 조용한 텍스트 버튼 */
.header .btn-ghost { background: transparent !important; color: rgba(255,255,255,.66) !important; border-color: transparent !important; }
.header .btn-ghost:hover { color: #fff !important; background: rgba(255,255,255,.08) !important; }

/* 버튼 그룹 구분선 - 외부링크 / 주요동작 / 계정 */
.header .btn-wrap .btn-accent-l { margin-left: 8px; position: relative; }
.header .btn-wrap .btn-accent-l::before {
	content: "";
	position: absolute;
	left: -8px;
	top: 6px;
	bottom: 6px;
	width: 1px;
	background: rgba(255, 255, 255, .18);
}

/* --------------------------------------------------------------------------
   4. 메뉴 3단계 - 대(GNB) / 중(SNB) / 소(TAB)
   -------------------------------------------------------------------------- */

/* ── 대(大) : 업무 영역 탭 ───────────────────────────────────────────
   일반 흐름에 배치 - 레거시 레이아웃의 상단 오프셋 계산을 건드리지 않는다 */
.gnb {
	width: 100%;
	background-color: var(--surface);
	border-bottom: 1px solid var(--border);
}
.gnb__inner {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	height: var(--gnb-h);
	padding: 0 var(--page-pad);
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: thin;
}
.gnb__list { display: flex; align-items: stretch; list-style: none; margin: 0; padding: 0; gap: 2px; }
.gnb__item { display: flex; }
.gnb__link {
	display: inline-flex;
	align-items: center;
	padding: 0 14px;
	font-size: var(--gnb-fs);
	font-weight: 500;
	color: var(--text-2);
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 3px solid transparent;
	transition: color .15s ease, border-color .15s ease;
}
.gnb__link:hover { color: var(--text); }
.gnb__item.is-active > .gnb__link,
.gnb__link.active {
	color: var(--text);
	font-weight: 700;
	border-bottom-color: var(--coral);
}
/* 우측 끝에 붙는 탭 묶음 (HELP DESK 등) */
.gnb__aside { margin-left: auto; }

/* 탭 사이 구분 바 (사용자 지시 2026-09-17) - 글자만 늘어놓으면 어디까지가 한 메뉴인지 흐리다.
   맨 끝 탭 뒤에는 긋지 않는다. 우측 묶음(HELP DESK·업무공지)도 같은 규칙이다. */
.gnb__item + .gnb__item { position: relative; }
.gnb__item + .gnb__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 12px;
	width: 1px;
	background: var(--border);
}

/* 처리하지 않은 업무공지 건수 - 라플 초록 */
.gnb__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	margin-left: 6px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--lapl-green-2);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* ── 중(中) : 선택된 영역의 화면 전환 ─────────────────────────────── */
.snb {
	width: 100%;
	background-color: var(--ivory);
	border-bottom: 1px solid var(--border);
}
.snb__inner {
	display: flex;
	align-items: center;
	gap: 4px;
	height: 44px;
	padding: 0 var(--page-pad);
	overflow-x: auto;
}
.snb__list { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; gap: 4px; }
/* 전부 같은 형태의 알약 버튼으로 보이게 하고, 활성만 채운다 */
.snb__link {
	display: inline-flex;
	align-items: center;
	height: var(--snb-h);
	padding: 0 14px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--surface);
	font-size: var(--snb-fs);
	font-weight: 600;
	color: var(--text-2);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.snb__link:hover { background: var(--divider); border-color: var(--border); color: var(--text); }
.snb__link.active {
	background: var(--navy);
	border-color: var(--navy);
	color: #fff;
}

/* ── 소(小) : 한 화면 안에서의 전환 (기간·유형 등) ────────────────── */
.tab3 {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 3px;
	background: var(--divider);
	border-radius: 999px;
}
.tab3__link {
	display: inline-flex;
	align-items: center;
	height: var(--tab3-h);
	padding: 0 12px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	font-size: var(--tab3-fs);
	font-weight: 600;
	color: var(--text-2);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}
.tab3__link:hover { color: var(--text); }
.tab3__link.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(23,33,58,.12); }

/* 제목 안 부제 */
.page-title--2 small { font-size: var(--fs-sm); font-weight: 500; color: var(--text-2); margin-left: 6px; }

/* --------------------------------------------------------------------------
   5. 본문 영역 - 좌측 사이드바 여백 제거
   -------------------------------------------------------------------------- */
.admin-wrap:not(.signin) { padding-left: 0 !important; }
/* 탭 바로 아래에 내용이 붙지 않도록 숨 쉴 여백을 준다 */
.admin-content { padding-top: 22px; }
/* 본문 하단 과다 여백 정리 - .pb-40 은 10rem(160px), .section 은 120px 였다 */
.admin-content.pb-40, .admin-content.py-40 { padding-bottom: 28px !important; }
.admin-wrap:not(.signin) .section { padding-bottom: 0; }

.page {
	flex: 1;
	padding: var(--page-pad);
}

.page-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
}
.page-head h2 { margin: 0; }

/* --------------------------------------------------------------------------
   6. 카드 / 지표 (대시보드)
   -------------------------------------------------------------------------- */
.card, .box, .content-box, .ui-card {
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
}
/* 레거시 인라인 카드 스타일(#eee 테두리 / #fcfcfc 배경) 흡수 */
.ui-card[style] {
	border-color: var(--border) !important;
	background: var(--surface) !important;
	border-radius: var(--radius) !important;
}
.card { padding: 22px 24px; }

.card-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}
@media (max-width: 1360px) { .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1040px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .card-grid { grid-template-columns: 1fr; } }

.card__title {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 14px;
	font-size: var(--fs-table);
	font-weight: 700;
	color: var(--text);
}
.card__title small { font-weight: 500; color: var(--muted); }

/* 큰 숫자 지표 */
.metric {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	padding-bottom: 6px;
	border-bottom: 2px dotted var(--border);
	margin-bottom: 18px;
}
.metric__num  { font-size: 40px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: var(--navy); }
.metric__unit { font-size: var(--fs-table); font-weight: 700; color: var(--text); }
.metric--coral .metric__num { color: var(--coral); }
.metric--blue  .metric__num { color: var(--blue); }

/* 지표 하위 항목 리스트 */
.stat-list { list-style: none; margin: 0; padding: 0; }
.stat-list__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 4px 0;
	font-size: var(--fs-sm);
}
.stat-list__label { color: var(--text-2); }
.stat-list__label::before { content: "· "; color: var(--muted); }
.stat-list__value { font-weight: 700; color: var(--text); white-space: nowrap; }
.stat-list__value--coral { color: var(--coral); }
.stat-list__value--blue  { color: var(--blue); }
.stat-list__row--muted .stat-list__label,
.stat-list__row--muted .stat-list__value { color: var(--muted); }

/* --------------------------------------------------------------------------
   7. 표
   -------------------------------------------------------------------------- */
.table {
	font-size: var(--fs-table);
	color: var(--text);
	background-color: var(--surface);
	border-color: var(--border);
}
.table thead th {
	background-color: var(--ivory);
	color: var(--text-2);
	font-weight: 700;
	border-bottom: 1px solid var(--border) !important;
	border-top: 0 !important;
	white-space: nowrap;
}
.table td, .table th { border-color: var(--divider); vertical-align: middle; }
.table tbody tr:hover { background-color: var(--ivory); }
.table a { color: var(--navy); font-weight: 700; }
.table a:hover { color: var(--coral-deep); }

/* ── 인슈라넷 톤앤매너 ─────────────────────────────────────────────
   표의 음영은 "구역"을 나누는 용도로만 쓰고, 색으로 의미를 주지 않는다.
   색은 네이비(기본) · 블루(비율) · 코랄(주의) 셋으로만 제한한다. */
:root {
	/* 구역 음영은 색조 없이 '밝기 단계'로만 구분한다 */
	--tone-head:   #EDEDEF;   /* 헤더·합계 행 (가장 진함) */
	--tone-zone-a: #FAFAFB;   /* 데이터 구역 A - 건수 등 */
	--tone-zone-b: #F4F4F6;   /* 데이터 구역 B - 실적 등 */
	--tone-zone-c: #F7F7F9;   /* 입력·목표 구역 */
	--tone-num:    #17213A;   /* 실적 숫자 */
	--tone-rate:   #3B7FE0;   /* 비율·달성률 */
	--tone-warn:   #E05A4C;   /* 주의·미달 */
}

/* 숫자 세로 정렬 - 자릿수가 어긋나지 않게 */
.table { font-variant-numeric: tabular-nums; }

/* 그룹 헤더(colspan) 와 합계 행 */
.table thead tr + tr th { background-color: var(--tone-zone-a); }
.table tfoot td, .table tfoot th,
.table tr.total td, .table tr.total th {
	background-color: var(--tone-head) !important;
	font-weight: 700;
	color: var(--text);
	border-top: 1px solid var(--border) !important;
}

/* 레거시 인라인 색 → 표준 톤 매핑 (마크업 수정 없이 덮어씀) */
.table [style*="#fff9c4"], .table [style*="#fffde7"],
.table [style*="#fff0f0"], .table [style*="#FFF9C4"] {
	background-color: var(--tone-zone-c) !important;
}
.table [style*="#e3f2fd"], .table [style*="#f0f7ff"],
.table [style*="#f1f8ff"], .table [style*="#E3F2FD"] {
	background-color: var(--tone-zone-a) !important;
}
.table [style*="#E8EAF5"], .table [style*="#E8EAF5"] {
	background-color: var(--tone-zone-b) !important;
}
.table [style*="#f8f9fa"], .table [style*="#f5f5f5"] {
	background-color: var(--tone-head) !important;
}
[style*="#f00"], [style*="#F00"],
[style*="#FF0000"], [style*="#ff0000"] { color: var(--tone-warn) !important; }
[style*="#0d47a1"], [style*="#0D47A1"] { color: var(--tone-rate) !important; }
[style*="#666"], [style*="#888"] { color: var(--text-2) !important; }
[style*="#999"], [style*="#aaa"] { color: var(--muted) !important; }
[style*="#333"], [style*="#08141f"] { color: var(--text) !important; }

.badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; }
.badge--ok   { background: #E7E9F3; color: var(--success); }
.badge--wait { background: #FDF0EE; color: var(--coral-deep); }
.badge--hold { background: var(--mist); color: var(--info); }

/* --------------------------------------------------------------------------
   8. 폼 컨트롤
   -------------------------------------------------------------------------- */
input[type="text"], input[type="password"], input[type="number"],
input[type="email"], input[type="tel"], input[type="date"], input[type="search"],
select, textarea, .form-control {
	font-size: var(--fs-base);
	color: var(--text);
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 0 12px;
}
input[type="text"], input[type="password"], input[type="number"],
input[type="email"], input[type="tel"], input[type="date"], input[type="search"], select {
	height: var(--control-h);
}
textarea { padding: 10px 12px; line-height: var(--lh-base); }
input:focus, select:focus, textarea:focus, .form-control:focus {
	outline: none;
	border-color: var(--coral);
	box-shadow: 0 0 0 3px rgba(239, 118, 106, .15);
}
::placeholder { color: var(--muted); }
label { color: var(--text-2); font-size: var(--fs-sm); font-weight: 700; }

/* --------------------------------------------------------------------------
   9. 버튼 (본문)
   -------------------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 34px;          /* 고정 높이 대신 최소높이 - 기존 소형 버튼을 깨지 않는다 */
	padding: 0 14px;
	font-family: var(--font-sans);
	font-size: var(--fs-sm);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	border-radius: var(--radius-sm);
	border: 1px solid transparent;
	transition: background-color .15s ease, color .15s ease;
}
.page-head .btn + .btn { margin-left: 6px; }
.btn:hover { filter: brightness(.96); }
.btn-primary { background-color: var(--navy);  border-color: var(--navy);  color: #fff; }
.btn-accent  { background-color: var(--coral); border-color: var(--coral); color: #fff; }
.btn-ghost   { background-color: var(--surface); border-color: var(--border); color: var(--text); }
.btn-lg      { height: var(--btn-h); border-radius: var(--radius); font-size: var(--fs-base); padding: 0 20px; }

/* --------------------------------------------------------------------------
   9-2. 레거시 페이지 제목 / 버튼 정규화
        기존 페이지(.admin-content__head, .board-btn, .round-btn)를
        마크업 수정 없이 새 디자인 체계에 맞춘다.
   -------------------------------------------------------------------------- */

/* 제목 줄 - 검정 굵은 구분선과 과한 여백을 완화 */
.admin-content__head {
	padding-bottom: 14px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--border);
}
.page-title { align-items: center; gap: 10px; }
.page-title--1 { font-size: 26px; font-weight: 700; color: var(--text); letter-spacing: -.02em; }
.page-title--2 {
	display: flex;
	align-items: center;
	font-size: 21px;
	line-height: 1.45;
	font-weight: 700;
	color: var(--text);
	letter-spacing: -.02em;
	margin: 0;
}
/* 제목 앞 파비콘 아이콘 제거 (되살리려면 이 한 줄만 삭제) */
.page-title--2 > img { display: none; }

/* 브레드크럼 제거 - 상단 탭(GNB/SNB)이 같은 경로를 이미 보여주는 중복 */
.admin-content__head .breadcrumb { display: none !important; }
/* 제목만 남으므로 한 줄로 가볍게 */
.admin-content__head { justify-content: flex-start; }
.page-title .ml-3 { margin-left: 0 !important; }

/* ── 버튼 모양 규칙 ────────────────────────────────────────────────
   알약(동그라미) = 이동·전환   → .snb__link(중), .tab3__link(소)
   사각(radius 8) = 동작        → .btn, .round-btn, .board-btn
   같은 알약 모양이던 '고객 등록' 류 동작 버튼을 사각으로 바꿔
   내비게이션과 헷갈리지 않게 한다. */
.round-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 34px;
	padding: 0 14px;
	font-size: var(--fs-sm);
	font-weight: 700;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border);
	background-color: var(--surface);
	color: var(--text);
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.round-btn:hover { background-color: var(--navy); border-color: var(--navy); color: #fff; }
/* 제목 옆 동작 버튼 묶음 간격 */
.page-title .round-btn + .round-btn { margin-left: 6px; }

/* 목록/상세 화면 버튼 - 각진 모서리와 #08141f 를 새 체계로 */
.board-btn {
	font-size: var(--fs-sm);
	font-weight: 700;
	height: 34px;
	border-radius: var(--radius-sm);
}
.board-btn.type--1 { background-color: var(--navy); border: 1px solid var(--navy); color: #fff; }
.board-btn.type--1:hover { background-color: var(--coral-deep); border-color: var(--coral-deep); color: #fff; }
.board-btn.type--2 { background-color: var(--surface); border: 1px solid var(--navy); color: var(--navy); }
.board-btn.type--2:hover { background-color: var(--navy); color: #fff; }
.board-btn.type--3 { background-color: var(--surface); border: 1px solid var(--border); color: var(--text-2); }
.board-btn.type--3:hover { background-color: var(--ivory); border-color: var(--navy); color: var(--navy); }
.board-btn.sm { height: 28px; font-size: var(--fs-xs); border-radius: 6px; }

/* --------------------------------------------------------------------------
   9-3. 로그인 화면 - 라플 게이트 화면과 동일한 카드형
   -------------------------------------------------------------------------- */
/* body가 세로 flex이므로 main 이 남는 높이를 차지해야 푸터가 바닥에 붙는다 */
body > main.main,
body > #contents { flex: 1 0 auto; display: flex; flex-direction: column; }
body > main.main > .admin-wrap { flex: 1 0 auto; }

.admin-wrap.signin {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px 20px;
	background-color: var(--ivory);
}
.admin-wrap.signin.section { padding-bottom: 48px; }
.admin-wrap.signin .container { max-width: 100% !important; padding: 0; }

.signin-wrap {
	max-width: 400px;
	margin: 0 auto;
	padding: 36px 34px 32px;
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
}
.signin-wrap .info-bx { text-align: center; margin-bottom: 4px; }
.signin-wrap .info-bx img { height: 30px; width: auto; }

.signin-list { margin-top: 24px !important; }
.signin-list .item + .item { margin-top: 10px; }
.signin-list input[type="text"],
.signin-list input[type="password"] {
	font-size: var(--fs-base) !important;
	height: 48px !important;
	padding: 0 14px !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius) !important;
	background-color: var(--ivory);
	color: var(--text);
}
.signin-list input.type--top,
.signin-list input.type--bottom { border-radius: var(--radius) !important; }
.signin-list input.type--bottom { border-top: 1px solid var(--border) !important; }
.signin-list input::placeholder { color: var(--muted); }
.signin-list input:focus {
	border-color: var(--coral) !important;
	box-shadow: 0 0 0 3px rgba(239, 118, 106, .15);
}

.signin-list .btn,
.signin-list #btn-login {
	width: 100%;
	height: var(--btn-h);
	font-size: var(--fs-base) !important;
	font-weight: 700;
	border-radius: var(--radius);
	background-color: var(--navy) !important;
	border-color: var(--navy) !important;
	color: #fff !important;
}
.signin-list .btn:hover { background-color: var(--coral-deep) !important; border-color: var(--coral-deep) !important; }

.signin-list .input-label__txt { font-size: var(--fs-sm); color: var(--text-2); font-weight: 500; }
.signin-list .mt-5 { margin-top: 14px !important; }

/* --------------------------------------------------------------------------
   10. 푸터
   -------------------------------------------------------------------------- */
#Popup { flex-shrink: 0; }

/* 사이트 푸터 - 다크. 색/아이콘은 lapl.co.kr 푸터와 동일 */
.site-footer {
	flex-shrink: 0;
	background: #0F1319;
	border-top: 0;
	padding: 26px var(--page-pad) 30px;
	text-align: center;
}
.site-footer__inner { max-width: 1100px; margin: 0 auto; }
.site-footer p { margin: 0; }

/* 연락처 줄 - 아이콘 + 텍스트 */
.site-footer__contact {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 22px;
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	font-size: 13px;
	color: #C3C8D2;
}
.site-footer__contact li { display: flex; align-items: center; gap: 7px; }
.site-footer__contact .ic {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.site-footer__contact a { color: #C3C8D2; text-decoration: none; }
.site-footer__contact a:hover { color: var(--coral); text-decoration: underline; }

/* 항목 사이 구분선 - 줄바꿈되어도 구분자가 어긋나지 않는다 */
.site-footer__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 14px;
	font-size: 13px;
	color: #C3C8D2;
}
.site-footer__row > span { position: relative; }
.site-footer__row > span + span::before {
	content: "";
	position: absolute;
	left: -7px;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 11px;
	background: rgba(255, 255, 255, .18);
}

.site-footer__copy { margin-top: 16px !important; font-size: var(--fs-xs); color: #868D9B; }

@media (max-width: 767px) {
	.site-footer__row { gap: 4px 12px; }
	.site-footer__row > span + span::before { display: none; }
}

/* PC 에서는 회사정보와 연락처를 한 줄로 합쳐 '윗줄 + 카피라이트' 두 줄로 끝낸다
   (사용자 지시 2026-09-17). 윗줄은 볼드로 올려 회사 정보가 먼저 읽히게 한다.
   좁은 화면에서는 원래대로 두 덩어리로 나뉘어 접힌다 — 한 줄에 넣으면 글자가 뭉갠다. */
@media (min-width: 1024px) {
	.site-footer__inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0;
	}
	.site-footer__row,
	.site-footer__contact {
		display: contents;              /* 두 목록의 자식을 한 줄 안에 나란히 푼다 */
	}
	.site-footer__inner > .site-footer__row {
		display: flex;
	}
	.site-footer__inner {
		flex-flow: row wrap;
		justify-content: center;
		gap: 8px 18px;
		font-size: 13px;
		font-weight: 700;
		color: #D6DAE2;
	}
	.site-footer__row > span,
	.site-footer__contact > li { font-weight: 700; }
	.site-footer__contact > li { color: #D6DAE2; }
	.site-footer__contact a { color: #D6DAE2; font-weight: 700; }

	/* 구분선은 첫 항목만 빼고 모든 항목 앞에 — 두 목록이 한 줄로 이어져서다 */
	.site-footer__row > span + span::before { left: -9px; }
	.site-footer__contact > li { position: relative; }
	.site-footer__contact > li::before {
		content: "";
		position: absolute;
		left: -9px;
		top: 50%;
		transform: translateY(-50%);
		width: 1px;
		height: 11px;
		background: rgba(255, 255, 255, .18);
	}

	/* 카피라이트는 줄을 바꿔 아래로 내린다 */
	.site-footer__copy {
		flex: 0 0 100%;
		margin-top: 14px !important;
		font-weight: 400;
	}
}

/* 카드 안에서 목표를 바로 고치는 작은 폼 (사용자 지시 2026-09-17: 목표를 등록하도록).
   목표를 정하러 다른 화면까지 가게 하면 아무도 안 고친다. */
.pm-target { display: inline-flex; align-items: center; gap: 5px; margin: 0; }
.pm-target input[type="number"] {
	width: 72px;
	height: 26px;
	min-height: 26px;
	padding: 0 7px;
	font-size: 12.5px;
	text-align: right;
	border: 1px solid var(--border, #E4E4E7);
	border-radius: 6px;
}
.pm-target span { font-size: 12px; color: var(--text-2, #6B7080); }

/* 숫자를 눌러 상세로 가는 링크 (사용자 지시 2026-09-17).
   처음에는 점선 밑줄로 '눌린다'를 알렸는데, 숫자마다 줄이 그어져 표가 어지러웠다.
   밑줄과 볼드를 걷어내고, 마우스를 올렸을 때만 색으로 알린다. */
.dash-table a,
.metric__num a,
.stat-list__value a {
	color: inherit;
	text-decoration: none;
	border-bottom: 0;
	font-weight: 400;
}
.dash-table a:hover,
.metric__num a:hover,
.stat-list__value a:hover {
	color: var(--coral, #EF766A);
	text-decoration: underline;
}

/* 해피박스 · 네이버페이 전자결재 (사용자 지시 2026-09-17) */
.hb-apply {
	margin-top: 10px;
	padding: 12px 14px;
	border: 1px solid #E4E4E7;
	border-radius: 10px;
	background: #FAFAFB;
}
.hb-apply--done { border-color: #BFC4E0; background: #F1F2F8; }
.hb-apply__title { font-weight: 700; font-size: 13.5px; color: #17213A; margin: 0 0 4px; }
.hb-apply__note { font-size: 12px; color: #6B7080; margin: 4px 0; line-height: 1.6; }
.hb-apply__note--warn { color: #B07A12; font-weight: 600; }
.hb-apply__input {
	display: block;
	width: 100%;
	margin: 6px 0;
	padding: 7px 10px;
	font-size: 13px;
	border: 1px solid #E4E4E7;
	border-radius: 8px;
	box-sizing: border-box;
}
.hb-flash { padding: 10px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.hb-flash--ok  { background: #E7E9F3; color: #263174; border: 1px solid #BFC4E0; }
.hb-flash--bad { background: #FDF0EE; color: #C2493C; border: 1px solid #F3C9C3; }
.hb-kind {
	display: inline-block; padding: 1px 8px; border-radius: 999px;
	font-size: 11px; font-weight: 700; white-space: nowrap;
}
.hb-kind--1 { background: #FDF1F5; color: #C2493C; border: 1px solid #F6DCE4; }
.hb-kind--2 { background: #EFF4FC; color: #2B5AA8; border: 1px solid #D8E3F5; }
.hb-step { font-weight: 700; font-size: 12px; white-space: nowrap; }
.hb-step--wait { color: #B07A12; }
.hb-step--done { color: #263174; }
.hb-step--rej  { color: #C2493C; }
.hb-act { display: inline-flex; gap: 5px; margin: 0; }

/* 상태 라디오를 관리 주체별로 갈라 놓은 칸 (사용자 지시 2026-09-17).
   윗칸 = CSR 이 만지는 값(상담관리·상담유형), 아랫칸 = PM 이 만지는 값(TA 관리·방문관리).
   'CSR' · 'PM' 글자는 빼고 바탕색으로만 가른다 (사용자 지시) —
   라디오가 40개 가까이 한 덩어리로 있으면 누가 손대는 값인지 알 수 없다. */
.role-block {
	padding: 7px 12px;
	border-radius: 0;
	border: 0;
}
/* 두 구역은 색이 다르므로 사이를 띄우지 않아도 갈린다 */
.role-block + .role-block { margin-top: 0; }
.role-block--csr { background: #FDF1F5; }   /* 연분홍 - CSR */
.role-block--pm  { background: #EFF4FC; }   /* 연하늘 - PM */
/* 줄 사이는 한 줄 높이만 — 라디오는 줄이 짧아 여백이 크면 따로 놀아 보인다 */
.role-block .status-section { margin-bottom: 0; padding: 3px 0; }
.role-block .status-section:last-child { margin-bottom: 0; }

/* 항목 이름 뒤에 구분 바 — '상담관리 ㅣ ○ 회원신청 …' (사용자 지시 2026-09-17).
   이름과 선택지가 붙어 있으면 어디까지가 이름인지 눈이 헷갈린다.
   폭은 글자에 맞추되 최소값을 줘서 네 줄의 선택지 시작점이 세로로 맞는다. */
.role-block .status-title {
	position: relative;
	width: auto;
	min-width: 76px;
	padding-right: 13px;
	margin-right: 8px;
}
.role-block .status-title::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 13px;
	background: rgba(23, 33, 58, .22);
}

/* 레거시 버튼 전역 정리 (사용자 지시 2026-09-17: 전체적으로 버튼 수정).
   common.css 의 .board-btn 은 각진 모서리에 width:100%·max-width:100px 이 박혀 있어
   글자가 길면 잘리고 짧으면 허옇게 남았다. 폭은 글자에 맞추고 모서리는 인슈라넷 규칙(8px)으로.
   색은 그대로 둔다 — 뜻이 붙어 있는 색이라 없애면 어느 게 삭제인지 알 수 없다. */
.board-btn {
	width: auto;
	max-width: none;
	min-width: 72px;
	height: 34px;
	padding: 0 14px;
	font-size: 13px;
	font-weight: 600;
	border-radius: 8px;
	white-space: nowrap;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.board-btn.type--1 { background-color: var(--navy, #17213A); border-color: var(--navy, #17213A); }
.board-btn.type--1:hover { background-color: #fff; color: var(--navy, #17213A); }
.board-btn.type--2 { border-color: var(--navy, #17213A); color: var(--navy, #17213A); }
.board-btn.type--2:hover { background-color: var(--navy, #17213A); color: #fff; }
/* 삭제 자리 - 누르기 전에 한 번 멈칫하도록 테두리만 붉게 */
.board-btn.type--3 { border-color: var(--border, #E4E4E7); color: var(--text-2, #6B7080); }
.board-btn.type--3:hover { background-color: #E5484D; border-color: #E5484D; color: #fff; }
.board-btn.sm,
.board-btn.view,
.board-btn.xs {
	height: 28px;
	min-width: 0;
	padding: 0 11px;
	font-size: 12px;
	border-radius: 6px;
	margin: 2px 0;
}
.btn-bx { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.btn-bx .board-btn { margin: 0; }

/* 제목 옆 '등록' 버튼 - 알약(16px) 모양이라 다른 버튼과 따로 놀았다.
   한 규칙(사각 8px)으로 맞추고 남색 채움으로 '여기서 새로 만든다'를 분명히 한다.
   .round-btn 은 고객·임직원·공지·제휴 등 거의 모든 목록 화면이 쓰므로 한 번에 정리된다. */
.round-btn {
	height: 34px;
	padding: 0 14px;
	font-size: 13px;
	font-weight: 600;
	border-radius: 8px;
	background-color: var(--navy, #17213A);
	border: 1px solid var(--navy, #17213A);
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.round-btn:hover { background-color: #fff; color: var(--navy, #17213A); border-color: var(--navy, #17213A); }
.page-title { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.page-title .round-btn.ml-3 { margin-left: 0 !important; }

/* 표 안의 작은 동작 버튼 (사용자 지시 2026-09-17).
   원래는 버튼마다 빨강·초록·노랑 인라인 색이 박혀 있어 정작 값이 안 읽혔다.
   한 톤으로 낮추고 꼭 하나(전화 걸기)만 채운 버튼으로 남긴다. */
.cell-actions {
	float: right;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-left: 12px;
}
.ibtn {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 10px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	color: var(--text-2, #6B7080);
	background: #fff;
	border: 1px solid var(--border, #E4E4E7);
	border-radius: 6px;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.ibtn:hover { background: #F7F7F8; border-color: #C9CBD2; color: var(--navy, #17213A); }

/* 색은 그대로 두되 한 팔레트로 맞춘다 (사용자 지시 2026-09-17: 버튼에 컬러는 넣어줘).
   원래 값은 #f00 · #fd0 · #2D3B8A 처럼 원색이라 표 위에서 너무 튀었다.
   같은 뜻을 유지하면서 채도만 낮춘 값으로 바꾼다. */
.ibtn--red,
.ibtn--navy,
.ibtn--green,
.ibtn--amber,
.ibtn--orange,
.ibtn--violet,
.ibtn--primary { color: #fff; border-color: transparent; }
.ibtn--red:hover,
.ibtn--navy:hover,
.ibtn--green:hover,
.ibtn--amber:hover,
.ibtn--orange:hover,
.ibtn--violet:hover,
.ibtn--primary:hover { color: #fff; border-color: transparent; filter: brightness(.93); }

.ibtn--red     { background: #E5484D; }   /* 전화 걸기 */
.ibtn--navy    { background: #17213A; }   /* 종료 · 안내 */
.ibtn--green   { background: #2E9E6B; }   /* 저장 · 불러오기 */
.ibtn--amber   { background: #D99B2B; }   /* 성공 알림 */
.ibtn--orange  { background: #5E6475; }   /* 부재 안내 */
.ibtn--violet  { background: #6F5BB0; }   /* 이벤트 */
.ibtn--primary { background: var(--coral, #EF766A); }

/* 줄 끝에 버튼을 모아 두는 자리 - 설명 글은 왼쪽, 버튼은 오른쪽 */
.row-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	flex-wrap: wrap;
}
.row-actions__hint { font-size: 12px; color: var(--text-2, #6B7080); margin-right: auto; }

/* 조회 필터 줄 - 선택상자·날짜·버튼을 한 줄에 같은 높이로 (사용자 지시 2026-09-17).
   레거시 input 이 width:100% 라 그냥 두면 날짜칸이 한 줄을 다 먹는다. 여기서 폭을 잡아준다. */
.filter-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.filter-bar select,
.filter-bar input[type="date"],
.filter-bar input[type="text"] {
	height: 34px;
	min-height: 34px;
	width: auto;
	flex: 0 0 auto;
	padding: 0 10px;
	font-size: 13px;
	border: 1px solid var(--border, #E4E4E7);
	border-radius: 8px;
	background: #fff;
	color: var(--text, #17213A);
}
.filter-bar select { min-width: 132px; }
.filter-bar input[type="date"] { min-width: 146px; }
.filter-bar__sep {
	width: 1px;
	height: 18px;
	background: var(--border, #E4E4E7);
	margin: 0 2px;
}
.filter-bar__tilde { color: var(--text-2, #6B7080); font-size: 13px; }

/* 납작한 회색 버튼 - 색으로 소리치지 않고 글자로 말한다 */
.btn-flat {
	display: inline-flex;
	align-items: center;
	height: 34px;
	padding: 0 13px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	color: var(--text, #17213A);
	background: #fff;
	border: 1px solid var(--border, #E4E4E7);
	border-radius: 8px;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-flat:hover { background: #F7F7F8; border-color: #C9CBD2; color: var(--navy, #17213A); text-decoration: none; }
.btn-flat--on { background: var(--navy, #17213A); border-color: var(--navy, #17213A); color: #fff; }
.btn-flat--on:hover { background: #24304F; border-color: #24304F; color: #fff; }
.btn-flat--clear { color: var(--text-2, #6B7080); }

/* 이름·소속처럼 글자로 된 칸은 왼쪽에 붙인다 — 숫자와 같이 가운데 두면 눈이 줄을 못 따라간다
   (사용자 지시 2026-09-17) */
.dash-table th.txt-left,
.dash-table td.txt-left { text-align: left; }

/* 정렬 가능한 머리줄 */
.dash-table th.is-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.dash-table th.is-sortable:hover { color: var(--coral, #EF766A); }
.dash-table th.is-sortable::after { content: "↕"; margin-left: 5px; opacity: .3; font-size: 11px; }
.dash-table th.is-asc::after  { content: "▲"; opacity: 1; font-size: 9px; }
.dash-table th.is-desc::after { content: "▼"; opacity: 1; font-size: 9px; }

/* 열이 많은 현황표 - 이름이 한 글자씩 세로로 쪼개지지 않게 한 줄로 두고,
   대신 표만 가로로 밀어서 본다 (사용자 지시 2026-09-17). */
.dash-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dash-table--nowrap th,
.dash-table--nowrap td { white-space: nowrap; }

/* 본문 폭 - 레거시 .container 는 1240px 에 묶여 있다. 대시보드·현황표는 열이 열 개를 넘어
   그 안에서는 숫자가 눌리고 가로 스크롤이 생긴다. 화면이 넓으면 넓은 만큼 쓴다
   (사용자 지시 2026-09-17: 가로로 넓게).
   .admin-content .container 로 좁혀 잡아 로그인·푸터 같은 가운데 정렬 화면은 건드리지 않는다. */
@media (min-width: 1280px) {
	.admin-content .container { max-width: 1680px; }
}
@media (min-width: 1800px) {
	.admin-content .container { max-width: min(95vw, 2200px); }
}

.relative-footer { position: relative; width: 100%; z-index: 1; }
#footer-main  { flex-shrink: 0; padding-left: 0; }
#footer-login { margin-top: 0; }

@media screen and (max-width: 767px) {
	.footer-content { max-width: 100%; padding: 10px; }
	.gnb__inner, .snb__inner, .page { padding-left: 14px; padding-right: 14px; }
}

/* --------------------------------------------------------------------------
   12. 모바일 - 데스크톱 전용으로 박힌 최소폭을 푼다
   common.css 의 .wrapper{min-width:1024px !important} 때문에 폰에서 문서가
   1024px 로 벌어져 가로 스크롤이 생기고 화면이 밀려 나간다.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1023px) {
	.wrapper,
	.container,
	.container.wrapper,
	.admin-content .container {
		min-width: 0 !important;
		max-width: 100% !important;
		width: 100% !important;
	}

	/* 로그인 화면 - 카드가 화면 폭 안에 들어오게.
	   높이는 dvh 로 잡아야 주소창이 접힐 때 카드가 위아래로 움직이지 않는다. */
	.admin-wrap.signin { padding: 32px 16px; min-height: auto; }
	.admin-wrap.signin .container { padding: 0 !important; }
	.signin-wrap { max-width: 100%; padding: 28px 22px 24px; }

	/* 표는 가로로 넘칠 수밖에 없으니 표만 스크롤되게 두고 페이지는 고정 */
	.admin-content__body { overflow-x: auto; -webkit-overflow-scrolling: touch; }

	/* ── 로그인 화면 완전 고정 ──────────────────────────────────────
	   dvh·overscroll 만으로는 iOS 에서 주소창이 접히며 여전히 흔들린다.
	   body 를 fixed 로 붙박아 문서 자체에 스크롤이 생기지 않게 한다.
	   로그인 화면은 스크롤할 내용이 없어 부작용이 없다. */
	html.is-login,
	body.is-login {
		position: fixed;
		top: 0; right: 0; bottom: 0; left: 0;
		width: 100%;
		height: 100%;
		min-height: 0;
		max-height: 100%;
		overflow: hidden;
		overscroll-behavior: none;
		/* iOS 는 문서에 스크롤 여지가 조금만 있어도 고무줄이 생긴다.
		   html·body 를 화면에 붙박아 스크롤 자체를 없앤다. */
		touch-action: pan-x;
		/* 레거시 CSS 가 고정 헤더 높이만큼 body 에 상단 여백을 준다.
		   로그인 화면엔 헤더가 없어 그만큼 빈 공간이 생기므로 없앤다. */
		padding: 0 !important;
		margin: 0 !important;
	}
	body.is-login > main.main {
		touch-action: auto;
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		min-height: 0;          /* flex 자식이 넘칠 때 줄어들 수 있게 */
	}
	/* 카드를 남은 공간 정가운데에 */
	body.is-login .admin-wrap.signin {
		flex: 1 1 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20px 16px;
		min-height: 0;
	}
	body.is-login .signin__body,
	body.is-login .admin-wrap.signin .container { width: 100%; }
	/* 레거시 .signin__body 의 padding-top:65px 가 카드를 아래로 밀어
	   가운데 정렬이 어긋난다. 로그인 화면에서는 없앤다. */
	body.is-login .signin__body { padding: 0 !important; }

	/* 푸터는 압축하고, 하단 툴바/홈바에 가리지 않게 안전영역만큼 띄운다 */
	body.is-login > .site-footer {
		flex: 0 0 auto;
		padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
	}
	body.is-login .site-footer__row,
	body.is-login .site-footer__contact { font-size: 11.5px; gap: 4px 10px; }
	body.is-login .site-footer__contact { margin-top: 7px; }
	body.is-login .site-footer__copy { margin-top: 9px !important; font-size: 11px; }
	/* 작은 화면에서 카드+푸터가 넘치면 이 안에서만 스크롤된다 */
	body.is-login > main.main { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
	body.is-login > .site-footer { flex: 0 0 auto; }
}

/* --------------------------------------------------------------------------
   11. 구 좌측메뉴(.lnb) 숨김 - 가로 탭으로 대체됨
   -------------------------------------------------------------------------- */
.lnb, .lnb-open, .nav__bg, .nav-mobile__btn { display: none !important; }

/* --------------------------------------------------------------------------
   업무공지 (사용자 지시 2026-09-17)
   표로 그리면 제목이 눌리고 마감일이 흐려진다. 왼쪽에 날짜, 가운데 내용,
   오른쪽에 버튼 하나 - 한 줄에 '언제까지 · 무엇을 · 누르면 끝'이 다 들어간다.
   -------------------------------------------------------------------------- */
.nt-list { list-style: none; margin: 0; padding: 0; }
.nt-item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 14px 2px;
	border-top: 1px solid var(--divider);
}
.nt-list > .nt-item:first-child { border-top: 0; }
.nt-item.is-done { opacity: .5; }
.nt-item.is-open { background: var(--ivory); }

/* 왼쪽 날짜 - 숫자만 크게, 아래에 작은 말 */
.nt-item__due {
	flex: 0 0 72px;
	text-align: center;
	line-height: 1.25;
	padding-top: 2px;
}
.nt-item__due b { display: block; font-size: 16px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.nt-item__due span { display: block; font-size: 11px; color: var(--muted); }
.nt-item__due.is-late b,
.nt-item__due.is-late span { color: var(--coral-deep); }

.nt-item__body { flex: 1 1 auto; min-width: 0; }
.nt-item__title { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); }
.nt-item__title a { color: inherit; text-decoration: none; }
.nt-item__title a:hover { text-decoration: underline; }
.nt-item__desc { margin: 4px 0 0; font-size: 13.5px; color: var(--text-2); line-height: 1.6; }
.nt-item__meta { margin: 5px 0 0; font-size: 12px; color: var(--muted); }
.nt-item__act { flex: 0 0 auto; padding-top: 2px; }

/* 처리완료 진행 막대 */
.nt-bar { height: 5px; margin: 8px 0 0; border-radius: 999px; background: var(--mist); overflow: hidden; max-width: 320px; }
.nt-bar i { display: block; height: 100%; background: var(--lapl-green-2); }

/* 진행현황 표는 그 공지 바로 아래에 펼친다 */
.nt-prog { padding: 0 0 14px 88px; }
.nt-prog table { margin: 0; }

/* 새 공지 폼 - 평소에는 접어 둔다 */
.nt-new { margin: 0 0 6px; border: 1px dashed var(--border); border-radius: var(--radius-sm); }
.nt-new > summary {
	padding: 10px 14px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--text-2);
	cursor: pointer;
}
.nt-new[open] > summary { border-bottom: 1px solid var(--divider); }
.nt-form { padding: 14px; }
.nt-f { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.nt-f > span { flex: 0 0 84px; padding-top: 9px; font-size: 13px; font-weight: 700; color: var(--text-2); }
.nt-f input[type=text], .nt-f textarea { flex: 1 1 auto; }
.nt-lv { flex: 1 1 auto; padding-top: 7px; }
.nt-lv label { margin: 0 14px 6px 0; font-size: 13.5px; white-space: nowrap; }
.nt-lv em { display: block; margin-top: 4px; font-size: 12px; font-style: normal; color: var(--muted); }
.nt-form__act { padding-left: 96px; }

/* 본문 제목 앞 아이콘 */
.page-ico { margin-right: 6px; font-size: 20px; line-height: 1; vertical-align: -2px; }

/* 상단 탭의 '하는 일' 버튼 - 고객등록 (사용자 지시 2026-09-18).
   알약으로 채웠더니 탭 높이에 눌려 글자가 잘렸다. 글자만 초록으로 두어
   다른 메뉴와 같은 높이를 쓰면서도 '이건 동작'이라는 게 드러나게 한다. */
.gnb__link--cta {
	color: var(--lapl-green) !important;
	font-weight: 700;
}
.gnb__link--cta:hover { color: var(--lapl-green-2) !important; }
/* 고객등록 앞에도 다른 메뉴와 같은 구분 바를 긋는다 (사용자 지시 2026-09-18) */

/* --------------------------------------------------------------------------
   지사 · 본부현황 카드 (사용자 지시 2026-09-17)
   대시보드 맨 위에서 내 아래 조직을 한 장씩 늘어놓는다.
   카드가 많아도 한 화면에 들어오도록 표준 카드보다 조금 좁게 잡는다.
   -------------------------------------------------------------------------- */
.org-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.org-card .card__title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.org-card .metric { margin-bottom: 4px; }
.org-card .metric__num { font-size: 26px; }

/* 내 소속은 왼쪽에 초록 띠를 둬 눈에 먼저 들어오게 */
.org-card.is-mine { border-left: 3px solid var(--lapl-green); }

/* 목표 대비 진행 막대 - 숫자보다 빨리 읽힌다 */
.org-bar {
	height: 5px;
	margin: 0 0 10px;
	border-radius: 999px;
	background: var(--mist);
	overflow: hidden;
}
.org-bar i { display: block; height: 100%; background: var(--lapl-green-2); }

/* 라플 KPI 안의 보기 전환 (사용자 지시 2026-09-17)
   KPI · PM 순위 · 조직 순위는 같은 이야기를 각도만 바꿔 보는 것이라
   상단 탭줄에 흩어 놓지 않고 화면 안에서 바꾼다. */
.kpi-switch {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 14px;
	/* 화면을 바꾸는 버튼이라 오른쪽 끝에 (사용자 지시 2026-09-18) */
	justify-content: flex-end;
}

/* --------------------------------------------------------------------------
   업무 문의창 (사용자 지시 2026-09-17)
   오른쪽 아래에 늘 떠 있다. 화면을 떠나지 않고 묻는 자리라 본문 위에 얹되,
   폭을 좁게 잡아 표를 가리지 않는다.
   -------------------------------------------------------------------------- */
/* 푸터 오른쪽 끝에 놓는다 — 스크롤을 따라다니지 않는다 (사용자 지시 2026-09-18) */
.askbox-dock {
	position: relative;
	display: flex;
	justify-content: flex-end;
	padding: 0 var(--page-pad, 24px) 26px;
}
.askbox-fab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 46px;
	padding: 0 18px 0 15px;
	border: 0;
	border-radius: 999px;
	background: var(--lapl-green);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
	cursor: pointer;
}
/* 알약 버튼도 같은 방향의 투톤 — 왼쪽 위가 짙고 오른쪽 아래가 밝다 */
.askbox-fab { background-image: linear-gradient(135deg, var(--lapl-green) 0%, var(--lapl-green) 46%, var(--lapl-green-2) 46%, var(--lapl-green-2) 100%); }
.askbox-fab:hover { background-color: var(--lapl-green-2); background-image: none; }
.askbox-fab__ico { font-size: 17px; line-height: 1; }

/* 창은 버튼 위로 펼친다 — 아래로 열면 문서 밖으로 나간다 */
.askbox {
	position: absolute;
	right: var(--page-pad, 24px);
	bottom: 72px;
	z-index: 601;
	display: flex;
	flex-direction: column;
	width: 340px;
	max-width: calc(100vw - 32px);
	max-height: 520px;
	border: 1px solid var(--border);
	border-radius: 14px;
	background: var(--surface);
	box-shadow: 0 16px 40px rgba(0, 0, 0, .18);
	overflow: hidden;
}
.askbox[hidden] { display: none; }

.askbox__head {
	position: relative;
	padding: 13px 42px 12px 16px;
	background: var(--lapl-green);
	color: #fff;
	overflow: hidden;
}
/* 상단바와 같은 45° 사선 투톤 — 밝은 쪽이 오른쪽 아래 (사용자 지시 2026-09-17).
   창 폭이 고정이라 자르는 자리를 값으로 박는다. */
.askbox__head::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--lapl-green-2);
	clip-path: polygon(62% 0, 100% 0, 100% 100%, 6% 100%);
	pointer-events: none;
}
.askbox__head > * { position: relative; z-index: 1; }
.askbox__head b { display: block; font-size: 14px; }
.askbox__head span { display: block; margin-top: 2px; font-size: 11.5px; color: rgba(255, 255, 255, .8); }
.askbox__close {
	position: absolute;
	right: 8px;
	top: 8px;
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: #fff;
	font-size: 19px;
	line-height: 1;
	cursor: pointer;
}
.askbox__close:hover { background: rgba(255, 255, 255, .16); }

.askbox__body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 14px;
	background: var(--ivory);
}
.askbox__msg {
	margin-bottom: 10px;
	padding: 10px 12px;
	border-radius: 12px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--text);
	word-break: break-word;
}
.askbox__msg--bot { background: var(--surface); border: 1px solid var(--border); }
/* 내가 쓴 말은 오른쪽에 붙여 대화처럼 읽히게 */
.askbox__msg--me {
	margin-left: 40px;
	background: var(--navy);
	color: #fff;
}
.askbox__msg b { display: block; margin-bottom: 3px; font-size: 13.5px; }
/* 답변의 줄바꿈과 빈 줄을 그대로 살린다 — 한 덩어리로 붙으면 안 읽힌다 */
.askbox__msg p { margin: 0; color: var(--text-2); white-space: pre-line; }
.askbox__cate {
	display: inline-block;
	margin-bottom: 5px;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--mist);
	font-size: 11px;
	color: var(--text-2);
}
.askbox__more { display: inline-block; margin-top: 6px; font-size: 12px; color: var(--lapl-green); }
.askbox__wait { color: var(--muted) !important; }
.askbox__act { margin-top: 8px; }

.askbox__foot { display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--divider); }
.askbox__foot input { flex: 1 1 auto; height: 36px; font-size: 13px; }
.askbox__links {
	display: flex;
	gap: 14px;
	padding: 0 12px 10px;
	font-size: 12px;
}
.askbox__links button {
	padding: 0;
	border: 0;
	background: none;
	color: var(--text-2);
	font-size: 12px;
	cursor: pointer;
}
.askbox__links button:hover, .askbox__links a:hover { color: var(--lapl-green); }
.askbox__links a { color: var(--text-2); }

/* 인쇄할 때는 빼 둔다 */
@media print { .askbox, .askbox-fab { display: none !important; } }

/* --------------------------------------------------------------------------
   레거시 폼 표 (.table.type--1) 톤 맞추기 (사용자 지시 2026-09-17)
   고객 등록·상세처럼 예전 마크업이 남은 화면이 대시보드 표와 글자 크기·
   라벨 색이 달라 한 시스템처럼 보이지 않았다. 마크업은 그대로 두고 옷만 맞춘다.
   -------------------------------------------------------------------------- */
.table.type--1 > tbody > tr > th,
.table.type--1 > tr > th {
	width: 150px;
	padding: 11px 14px;
	background-color: var(--tone-zone-a);
	color: var(--text-2);
	font-size: 13.5px;
	font-weight: 500;
	text-align: left;
	white-space: nowrap;
	vertical-align: middle;
}
.table.type--1 > tbody > tr > td,
.table.type--1 > tr > td {
	padding: 9px 14px;
	font-size: var(--fs-table);
	vertical-align: middle;
}
/* 폼 표에서는 줄마다 배경이 바뀌면 입력칸이 어수선해진다 */
.table.type--1 > tbody > tr:hover,
.table.type--1 > tr:hover { background-color: transparent; }

/* 입력칸 높이를 한 벌로 — 화면마다 40px·48px 이 섞여 있었다 */
.table.type--1 input[type=text], .table.type--1 input[type=tel],
.table.type--1 input[type=number], .table.type--1 input[type=date],
.table.type--1 select, .table.type--1 textarea { font-size: var(--fs-table); }

/* 라디오·체크는 글자와 같은 줄에 붙어 있어야 읽힌다 */
.table.type--1 label { margin-right: 14px; font-size: var(--fs-table); vertical-align: middle; }

/* 목록 표에서 글이 담긴 칸은 왼쪽 정렬 — 주소·상품명처럼 길이가 제각각인 것들 */
.table .txt-left, .table td.txt-left, .table th.txt-left { text-align: left !important; }

/* 라플챗봇 - 자주 묻는 항목 버튼 */
.askbox__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.askbox__chip {
	padding: 5px 11px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--ivory);
	color: var(--text-2);
	font-size: 12px;
	cursor: pointer;
}
.askbox__chip:hover { border-color: var(--lapl-green); color: var(--lapl-green); background: #fff; }

/* --------------------------------------------------------------------------
   폼 표를 카드처럼 (사용자 지시 2026-09-17)
   고객 등록·수정 화면이 네모난 표 하나로 화면에 딱 붙어 있어, 카드로 짜인
   다른 화면과 따로 노는 느낌이었다. 모서리를 둥글리고 바깥선을 하나만 남긴다.
   -------------------------------------------------------------------------- */
.table.type--1 {
	border: 1px solid var(--border);
	border-radius: var(--radius, 12px);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: var(--surface);
}
/* 칸 경계는 윗선 하나로만 긋는다 — 모아 그리면 둥근 모서리가 깨진다 */
.table.type--1 > tbody > tr > th, .table.type--1 > tr > th,
.table.type--1 > tbody > tr > td, .table.type--1 > tr > td {
	border: 0;
	border-top: 1px solid var(--divider);
}
.table.type--1 > tbody > tr:first-child > th,
.table.type--1 > tbody > tr:first-child > td,
.table.type--1 > tr:first-child > th,
.table.type--1 > tr:first-child > td { border-top: 0; }
/* 라벨 칸과 입력 칸 사이에도 옅은 선 하나 */
.table.type--1 > tbody > tr > th, .table.type--1 > tr > th {
	border-right: 1px solid var(--divider);
}

/* 필수 표시 — 빨간 별은 화면 곳곳에서 경고처럼 읽힌다. 조용한 회색으로 (사용자 지시). */
.page-title--2 .text-color-1,
.table .text-color-1 { color: var(--muted) !important; font-weight: 700; }

/* PM 현황 · 지점별 상세 — 표 안에서는 볼드를 쓰지 않는다 (사용자 지시 2026-09-17).
   줄마다 굵은 글자가 섞이면 무엇이 중요한지가 오히려 흐려진다. 머리줄과 합계 줄만 굵다. */
#pmStatTable tbody td,
#pmStatTable tbody td a,
#pmStatTable tbody td b,
#pmStatTable tbody td strong { font-weight: 400; }

/* 고객정보(상세)는 읽는 표다 — 둥근 모서리도, 라벨 옆 세로선도 두지 않는다
   (사용자 지시 2026-09-17). 선이 많으면 값보다 칸이 먼저 보인다. */
.table.type--1.cust-info {
	border-radius: 0;
	border-left: 0;
	border-right: 0;
}
.table.type--1.cust-info > tbody > tr > th,
.table.type--1.cust-info > tr > th { border-right: 0; }

/* 성공톡 — 노랑 (사용자 지시 2026-09-17).
   노란 바탕에 흰 글씨는 안 읽힌다. 글자는 짙은 네이비로 둔다. */
/* 성공톡은 카카오 알림톡이라 카카오 노랑을 그대로 쓴다 (사용자 지시 2026-09-18).
   노란 바탕에 흰 글씨는 안 읽힌다 — 글자는 카카오가 쓰는 짙은 갈색으로. */
.ibtn--yellow {
	background: #FEE500;
	color: #3C1E1E !important;
}
.ibtn--yellow:hover { background: #F2DA00; color: #3C1E1E !important; }

/* 고객 상세의 구역 제목 (사용자 지시 2026-09-17).
   '■ 주요상담' 처럼 기호를 붙여 두었는데, 화면마다 크기가 달라 제목처럼 안 읽혔다. */
.cust-sec {
	margin: 26px 0 10px;
	font-size: 16px;
	font-weight: 800;
	color: var(--text);
}
/* 제목 줄에 버튼이 함께 놓이는 곳이 있어 위아래 여백을 죽이지 않는다 */
.d-flex > .cust-sec { margin-bottom: 0; }

/* 자녀정보 — 입력칸 줄과 [+ 자녀 추가] 를 같은 줄에 (사용자 지시 2026-09-17).
   자녀가 여럿이면 왼쪽으로 줄이 쌓이고, 추가 버튼은 첫 줄 오른쪽에 그대로 있는다. */
.child-wrap { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.child-wrap .child-row:last-child { margin-bottom: 0 !important; }

.cust-sec__ico { margin-right: 7px; font-size: .95em; line-height: 1; vertical-align: -1px; }

/* 일정등록 (사용자 지시 2026-09-17) — 상담을 적은 뒤 다음 약속을 잡는 자리라
   저장 버튼과 색을 나눈다. 체크박스 라벨이라 켜졌을 때 더 진하게 둔다. */
.board-btn.btn-sched-on {
	background-color: #5E6475 !important;
	border-color: #5E6475 !important;
	color: #fff !important;
}
.board-btn.btn-sched-on:hover { background-color: #4E5363 !important; border-color: #4E5363 !important; }
/* 체크가 켜지면 한 톤 더 진하게 — 지금 켜져 있는지가 보여야 한다 */
input:checked + .board-btn.btn-sched-on {
	background-color: #C9651F !important;
	border-color: #C9651F !important;
}

/* 상담내역·계약내역 — 머리줄이 라벨이 아니라 열 제목이다 (사용자 지시 2026-09-17).
   고객정보의 라벨 폭(150px)을 그대로 쓰면 이름 한 칸이 텅 비어 보인다. */
/* 머리줄은 라벨이 아니라 열 제목이라 가운데에 선다 (사용자 지시 2026-09-18) */
.table.type--1.cust-log > tbody > tr > th,
.table.type--1.cust-log > tr > th {
	width: auto;
	border-right: 0;
	text-align: center;
}

/* 새로 만드는 동작은 오렌지로 묶는다 — 일정등록 · 계약등록 (사용자 지시 2026-09-17) */
.round-btn.btn-orange {
	background-color: #5E6475 !important;
	border-color: #5E6475 !important;
	color: #fff !important;
}
.round-btn.btn-orange:hover { background-color: #4E5363 !important; border-color: #4E5363 !important; }

/* --------------------------------------------------------------------------
   고객 목록 표 정리 (사용자 지시 2026-09-17)
   길이가 제각각인 칸이 줄바꿈되면서 줄 높이가 들쭉날쭉했다.
   긴 칸은 한 줄로 자르고, 전체 내용은 마우스를 올려 본다.
   -------------------------------------------------------------------------- */
.c-addr, .c-child {
	max-width: 190px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.c-child { text-align: left; }

/* 이름 옆의 상담·계약 건수 — 빨강·파랑은 경고처럼 읽힌다. 조용한 회색으로 */
.schedule-count, .contract-count {
	margin-left: 2px;
	font-size: 11.5px;
	font-weight: 400;
	color: var(--muted);
}
/* 계약 건수만은 초록으로 (대표님 지시 2026-09-23: "계약 수는 초록색으로 (1)") — 상담 건수와 같은 회색이면 무엇이 계약인지 모른다 */
.contract-count, .cust-list td .contract-count { color: var(--lapl-green, #253272); font-weight: 700; }

/* 필터 안의 글자는 굵게 쓰지 않는다 (사용자 지시 2026-09-17).
   체크 항목이 스무 개 넘게 늘어서는 줄에서 '전체'·'CP' 만 굵으면
   고른 것처럼 보여 오해를 부른다. 굵기 대신 체크 표시로 구분한다. */
.table.type--1 label,
.table.type--1 .input-label,
.table.type--1 .input-label__txt { font-weight: 400 !important; }

/* 고객 목록 — 열 제목은 가운데, 폭은 colgroup 대로 (사용자 지시 2026-09-17).
   고객정보 화면의 라벨 규칙(왼쪽 정렬·150px)이 목록 표에까지 걸려 있었다. */
.table.type--1.cust-list { table-layout: fixed; }
.table.type--1.cust-list > tbody > tr > th,
.table.type--1.cust-list > tr > th {
	width: auto;
	text-align: center;
	border-right: 0;
	padding-left: 6px;
	padding-right: 6px;
}
.table.type--1.cust-list > tbody > tr > td,
.table.type--1.cust-list > tr > td {
	padding-left: 6px;
	padding-right: 6px;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* 폭을 못 박았으니 말줄임 한계도 칸에 맡긴다 */
.cust-list .c-addr, .cust-list .c-child { max-width: none; }

/* ==========================================================================
   9. 버튼 한 벌로 (사용자 지시 2026-09-17)
   화면마다 색과 자리가 달라 어느 것이 주요 동작인지 매번 찾아야 했다.
   규칙 : 주요 동작 = 오렌지 / 보조 = 흰 바탕 / 묶음은 오른쪽 끝에.
   ========================================================================== */

/* 주요 동작 — 저장 · 등록 · 확인. 한 화면에 하나만 오렌지여야 뜻이 산다 */
.board-btn.type--1,
.round-btn.btn-orange,
.cling-btn {
	background-color: #5E6475 !important;
	border-color: #5E6475 !important;
	color: #fff !important;
}
.board-btn.type--1:hover,
.round-btn.btn-orange:hover,
.cling-btn:hover {
	background-color: #4E5363 !important;
	border-color: #4E5363 !important;
	color: #fff !important;
}

/* 보조 동작 — 목록 · 취소 · 수정 */
.board-btn.type--2 {
	background-color: var(--surface) !important;
	border-color: var(--border) !important;
	color: var(--text-2) !important;
}
.board-btn.type--2:hover {
	background-color: var(--ivory) !important;
	border-color: var(--text-2) !important;
	color: var(--text) !important;
}

/* 삭제는 회색 (사용자 지시 2026-09-18) — 붉은색은 저장·등록보다 먼저 눈에 들어온다.
   자주 쓰는 버튼이 아니므로 조용한 회색으로 두되, 채워 두어 버튼인 것은 분명히 한다. */
.board-btn.type--3,
.btn-check-del {
	background-color: #8E9299 !important;
	border-color: #8E9299 !important;
	color: #fff !important;
}
.board-btn.type--3:hover,
.btn-check-del:hover {
	background-color: #74787F !important;
	border-color: #74787F !important;
	color: #fff !important;
}

/* 버튼이 서로 걸치지 않게 — 레거시가 박아 둔 고정폭을 푼다 */
.board-btn, .round-btn, .cling-btn {
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	padding-left: 14px;
	padding-right: 14px;
	white-space: nowrap;
	vertical-align: middle;
}

/* 버튼 묶음은 오른쪽 끝에 모은다 — 목록·저장이 화면 좌우로 흩어져 있었다 */
.btn-bx {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 18px;
}
/* 표 안의 버튼은 칸을 넘지 않게 */
.table .board-btn, .table .round-btn { margin: 0 2px; }
.table td .btn-bx { justify-content: center; margin-top: 0; }

/* 제목 줄 오른쪽에 붙는 버튼 */
.admin-content__head .round-btn,
.dash-bar-head .round-btn { margin-left: 8px; }

/* 목록 아래 동작 줄 — 왼쪽은 묶음 처리, 오른쪽은 주요 동작 */
.mt-5 > .board-btn + .board-btn { margin-left: 6px; }

/* 오른쪽 끝 저장 버튼 — 세로로 훑을 때 한 줄에 서야 한다 (사용자 지시 2026-09-17).
   글자 수가 달라도 폭이 같도록 최소 폭을 준다. */
.cust-info .btn-submit,
.cust-info td:last-child > .board-btn,
.cust-info td:last-child > input.board-btn {
	min-width: 74px !important;
	justify-content: center;
	text-align: center;
}
/* 값은 왼쪽에 붙인다 — 읽는 글은 왼쪽에서 시작해야 눈이 줄을 탄다 */
.table.type--1.cust-info > tbody > tr > td,
.table.type--1.cust-info > tr > td { text-align: left; }

/* 버튼은 위에서 아래까지 한 줄에 서야 한다 (사용자 지시 2026-09-18) —
   표의 오른쪽 끝에 모두 붙이면 세로로 줄이 맞는다.
   저장 버튼은 세 번째 칸에만 있다. 두 칸짜리 고객정보 표에서는 값 칸이
   마지막이라, last-child 로 잡으면 값이 가운데로 밀린다. */
.table.type--1.cust-info > tbody > tr > td:nth-child(3),
.table.type--1.cust-info > tr > td:nth-child(3) { text-align: right; }

/* 상담내역·계약내역은 목록이라 가운데 정렬이 맞다 — 글이 긴 칸만 왼쪽으로 */
.table.type--1.cust-log > tbody > tr > td,
.table.type--1.cust-log > tr > td { text-align: center; }
.table.type--1.cust-log > tbody > tr > td.txt-left,
.table.type--1.cust-log > tr > td.txt-left { text-align: left; }

/* 첨부파일 칸 — 파일 이름은 왼쪽, AI요약 버튼은 오른쪽 끝에 (사용자 지시 2026-09-18) */
.attach-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}
.attach-row .file_upload { flex: 1 1 auto; min-width: 0; }
.attach-row .file_list { margin: 0; }
.attach-row .row-actions { flex: 0 0 auto; margin: 0; }

/* 상세 화면 맨 아래 [목록·수정·삭제] 는 가운데 (사용자 지시 2026-09-18).
   화면을 다 읽고 내려온 자리라 시선이 가운데에 있다. */
.btn-bx.mt-11 { justify-content: center; }

/* 상담내역은 읽는 글이라 왼쪽 정렬 (사용자 지시 2026-09-18).
   등록일 칸만 가운데로 둔다 — 날짜는 자릿수가 같아 가운데가 줄이 맞는다. */
.table.type--1.cust-log--left > tbody > tr > td,
.table.type--1.cust-log--left > tr > td { text-align: left; }
.table.type--1.cust-log--left > tbody > tr > td.log-date,
.table.type--1.cust-log--left > tr > td.log-date {
	text-align: center;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	line-height: 1.5;
}

/* 고객 상세 — 칸 안의 버튼은 같은 폭으로, 오른쪽 끝에 (사용자 지시 2026-09-18).
   글자 수대로 폭이 달라 윗줄과 아랫줄의 버튼이 어긋나 보였다. */
.cust-info .cell-actions {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
	float: right;
}
.cust-info .cell-actions .ibtn {
	min-width: 62px;
	justify-content: center;
	text-align: center;
}

/* 상담내역의 단계 표시 (사용자 지시 2026-09-18).
   전에는 붉은 글씨로 내용 끝에 붙어 있었다. 붉은색은 경고로 읽히는데
   대부분은 그냥 진행 단계라, 조용한 알약으로 바꿔 한 칸에 모았다. */
.table.type--1.cust-log--left > tbody > tr > td.log-status,
.table.type--1.cust-log--left > tr > td.log-status {
	text-align: center;
	line-height: 1.9;
}
/* 테두리도 음영도 두지 않는다 (사용자 지시 2026-09-18) — 글자만으로 충분하다 */
.log-tag {
	display: inline-block;
	padding: 0;
	border: 0;
	background: none;
	color: var(--text-2);
	font-size: 12px;
	white-space: nowrap;
}
/* 상담희망 시간대만 색으로 — 약속을 잡을 때 먼저 보는 값이다 */
.log-tag--hope { color: var(--coral-deep); font-weight: 700; }
.log-tag + .log-tag { margin-left: 6px; }

/* 목록 표 — 머리줄이 라벨이 아니라 열 제목이다 (사용자 지시 2026-09-18).
   폼 표 규칙(왼쪽 정렬·150px)이 걸려 첫 칸만 넓고 나머지가 밀려 있었다. */
.table.type--1.tbl-list > tbody > tr > th,
.table.type--1.tbl-list > tr > th {
	width: auto;
	text-align: center;
	border-right: 0;
}
.table.type--1.tbl-list > tbody > tr > td,
.table.type--1.tbl-list > tr > td { text-align: center; }
.table.type--1.tbl-list > tbody > tr > td.txt-left,
.table.type--1.tbl-list > tr > td.txt-left { text-align: left; }
/* 링크가 들었다는 이유로 왼쪽으로 밀지 않는다 (사용자 지시 2026-09-18) —
   고객명처럼 짧은 값까지 왼쪽에 붙어 머리줄과 어긋났다.
   왼쪽 정렬이 필요한 칸에는 txt-left 를 직접 붙인다. */

/* 검색·초기화는 붙어 다닌다 (사용자 지시 2026-09-18) —
   줄이 넘칠 때 둘이 갈라지면 초기화만 외따로 떨어져 보인다. */
.filter-bar__btns { display: inline-flex; align-items: center; gap: 6px; }

/* 계약 목록 상단 합계 (사용자 지시 2026-09-18).
   큰 금액 하나와 건수, 그 뒤에 분류별 금액을 바(ㅣ)로 나눠 적는다. */
.con-sum {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px 10px;
	margin: 0;
	font-size: 15px;
	color: var(--text);
}
.con-sum__main { font-size: 17px; }
.con-sum__main b { font-size: 20px; font-weight: 800; color: var(--coral-deep); }
.con-sum__cnt { color: var(--text-2); font-size: 14px; }

/* 분류별 — 항목 사이에 세로 바 */
.con-sum__by { display: inline-flex; flex-wrap: wrap; align-items: baseline; font-size: 14px; color: var(--text-2); }
.con-sum__by > span { padding: 0 10px; position: relative; }
.con-sum__by > span + span::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	bottom: 2px;
	width: 1px;
	background: var(--border);
}
.con-sum__by b { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }

/* 카드 안의 목표 입력 (사용자 지시 2026-09-18) — 값처럼 보이되 눌러 고칠 수 있게 */
.org-target { display: inline-flex; align-items: baseline; gap: 4px; }
.org-target__in {
	width: 84px;
	height: 26px;
	padding: 0 6px;
	border: 1px solid var(--border);
	border-radius: 6px;
	font-size: 13px;
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.org-target__in:focus { border-color: var(--lapl-green); outline: 0; }
.org-target em { font-style: normal; font-size: 12px; color: var(--text-2); }

/* --------------------------------------------------------------------------
   대시보드 인사 한 줄 (사용자 지시 2026-09-18)
   숫자를 보기 전에 이름을 부르고 오늘 할 일을 먼저 말한다.
   카드처럼 두르지 않는다 — 인사가 상자에 갇히면 읽히지 않고 넘어간다.
   -------------------------------------------------------------------------- */
.dash-hello {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin: 2px 0 18px;
}
.dash-hello__msg {
	margin: 0;
	font-size: 17px;
	color: var(--text-2);
	line-height: 1.5;
}
.dash-hello__msg > b { font-size: 19px; font-weight: 800; color: var(--text); }

/* 할 일이 있으면 눌러서 바로 간다 */
.dash-hello__todo { color: var(--lapl-green); font-weight: 700; text-decoration: none; }
.dash-hello__todo b { font-weight: 800; }
.dash-hello__todo:hover { color: var(--lapl-green-2); text-decoration: underline; }
.dash-hello__clear { color: var(--muted); }

.dash-hello__date { font-size: 13px; color: var(--muted); white-space: nowrap; }

/* 계약 목록 — 열 폭을 colgroup 대로 지킨다 (사용자 지시 2026-09-18) */
.table.type--1.con-list { table-layout: fixed; }
.table.type--1.con-list > tbody > tr > td,
.table.type--1.con-list > tr > td {
	padding-left: 6px;
	padding-right: 6px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.table.type--1.con-list > tbody > tr > th,
.table.type--1.con-list > tr > th { padding-left: 6px; padding-right: 6px; }

/* 대시보드 구역 제목 앞 아이콘 (사용자 지시 2026-09-18) */
.dash-sec__ico { margin-right: 7px; font-size: .95em; line-height: 1; vertical-align: -1px; }

/* 구역 제목 앞 선 아이콘 (사용자 지시 2026-09-18).
   색은 글자를 따라가고 굵기는 한 벌로 맞춘다 — 아이콘마다 따로 적지 않는다. */
.sec-ico {
	width: 1.05em;
	height: 1.05em;
	margin-right: 7px;
	vertical-align: -2px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: .85;
}
.askbox-fab__ico {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* 센터본부 — 퍼미션 TM 조직이라 영업 본부와 셈법이 다르다 (사용자 지시 2026-09-18).
   테두리 색만 달리해 '같은 줄에 있지만 다른 성격' 임을 알린다. */
.org-card.is-center { border-color: #5E6475; }
.org-card.is-center.is-mine { border-left-color: #5E6475; }

/* FAQ 답변 — 단락·목록이 그대로 살아 있는 글이다 (사용자 지시 2026-09-18) */
.faq-answer { text-align: left; line-height: 1.75; }
.faq-answer p { margin: 0 0 10px; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer ul, .faq-answer ol { margin: 0 0 10px; padding-left: 22px; }
.faq-answer li { margin-bottom: 6px; }
.faq-answer li:last-child { margin-bottom: 0; }
.faq-answer b { color: var(--text); }

/* ==========================================================================
   카드 등장 모션 (사용자 지시 2026-09-18)
   ========================================================================== */
/* 아래에서 위로 — 8px 은 거의 안 보여 16px 로 키웠다 (사용자 지시 2026-09-18) */
@keyframes cardIn {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: none; }
}

.is-dash .card-grid > .card,
.is-dash .dash-section > .card,
.is-dash .dash-card {
	animation: cardIn .42s cubic-bezier(.2, .7, .3, 1) both;
}

/* 왼쪽부터 차례로 — 여덟 장까지만 늦춘다 */
.is-dash .card-grid > .card:nth-child(2), .is-dash .dash-section > .card:nth-child(2) { animation-delay: 45ms; }
.is-dash .card-grid > .card:nth-child(3), .is-dash .dash-section > .card:nth-child(3) { animation-delay: 90ms; }
.is-dash .card-grid > .card:nth-child(4), .is-dash .dash-section > .card:nth-child(4) { animation-delay: 135ms; }
.is-dash .card-grid > .card:nth-child(5), .is-dash .dash-section > .card:nth-child(5) { animation-delay: 180ms; }
.is-dash .card-grid > .card:nth-child(6), .is-dash .dash-section > .card:nth-child(6) { animation-delay: 225ms; }
.is-dash .card-grid > .card:nth-child(7), .is-dash .dash-section > .card:nth-child(7) { animation-delay: 270ms; }
.is-dash .card-grid > .card:nth-child(8), .is-dash .dash-section > .card:nth-child(8) { animation-delay: 315ms; }

/* 표 안의 큰 카드는 늦추지 않는다 — 한 장뿐이라 기다릴 이유가 없다 */
.is-dash .card.dash-card--full { animation-delay: 0ms; }

/* 마우스를 올리면 살짝 떠오른다 — 누를 수 있는 카드라는 표시 */
/* 본부 카드의 반응은 위 규칙이 함께 맡는다 (2026-09-18) */

/* 움직임을 줄이도록 설정한 사람에게는 걸지 않는다 */
@media (prefers-reduced-motion: reduce) {
	.card-grid > .card,
	.dash-section > .card,
	.dash-card,
	.org-card { animation: none !important; transition: none !important; transform: none !important; }
}

@media print {
	.card-grid > .card,
	.dash-section > .card,
	.dash-card { animation: none !important; }
}

/* 미달·미터치·달성률은 경고가 아니라 상태다 (사용자 지시 2026-09-18).
   빨강은 잘못된 것처럼 읽히고, 옅은 오렌지는 표에서 묻힌다 —
   숫자만 보고도 눈에 걸리도록 진한 오렌지 한 가지로 맞춘다. */
/* 강조 오렌지는 로고 삼각형과 같은 색이다 (사용자 지시 2026-09-18).
   전에 쓰던 #C2500F 는 황토에 가까워 라플 색과 따로 놀았다.
   이 한 줄이 미터치·달성률·미출근·TA단계·업무알림까지 전부를 바꾼다. */
:root { --orange-deep: var(--lapl-orange, #5E6475); }
.txt-coral,
.txt-coral a,
.dash-table .txt-coral,
.dash-table .txt-coral a,
.stat-list__value--coral,
.stat-list__value--rate { color: var(--orange-deep) !important; }
.stat-list__value--rate { font-weight: 700; }

/* ==========================================================================
   조직도 (사용자 지시 2026-09-18)
   본부를 한 덩이로 묶고 그 아래 지점을 카드로 깐다. 카드 안에는 소속 명단.
   ========================================================================== */
.org-hq {
	margin-bottom: 18px;
	padding: 16px 18px 14px;
	border: 1px solid var(--border);
	border-radius: var(--radius, 12px);
	background: var(--surface);
}
.org-hq__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 12px; }
.org-hq__name { margin: 0; font-size: 17px; font-weight: 800; color: var(--text); }
/* 인원 수는 이름에 붙여 한 덩이로 읽는다 (사용자 지시 2026-09-18) */
.org-hq__meta { margin-left: 6px; font-size: 13px; font-weight: 500; color: var(--muted); }
/* 본부에 딸린 버튼은 오른쪽 끝으로 */
.org-hq__act { margin-left: auto; display: inline-flex; gap: 4px; }

/* 본부 직속 — 지점에 속하지 않는 자리(본부장 등) */
.org-hq__own { margin: 12px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.org-hq__own-label {
	font-size: 12px;
	font-weight: 700;
	color: var(--text-2);
	margin-right: 2px;
}

/* 지점 카드 */
.org-branches {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 12px;
	margin-top: 14px;
}
.org-branch {
	display: flex;
	flex-direction: column;
	padding: 12px 14px;
	border: 1px solid var(--divider);
	border-radius: 10px;
	background: var(--ivory);
}
.org-branch__head { display: flex; align-items: baseline; gap: 8px; }
.org-branch__head b { font-size: 14.5px; color: var(--text); }
.org-branch__cnt { margin-left: 6px; font-size: 12px; font-weight: 500; color: var(--muted); }
/* 지점 인원은 한 줄로 길게 (사용자 지시 2026-09-18) — 여러 줄로 감기면
   지점 카드마다 높이가 달라져 조직도가 들쭉날쭉해진다. 넘치면 옆으로 민다. */
.org-branch__body {
	display: flex;
	flex-wrap: nowrap;
	gap: 5px;
	margin: 10px 0 0;
	flex: 1 1 auto;
	overflow-x: auto;
	padding-bottom: 4px;
}
/* 옆으로 미는 막대는 얇게 — 카드 안이라 두꺼우면 자리를 먹는다 */
.org-branch__body::-webkit-scrollbar { height: 4px; }
.org-branch__body::-webkit-scrollbar-thumb { background: #CED4DA; border-radius: 2px; }
.org-branch__body .org-chip { flex: 0 0 auto; }
/* 손대는 버튼은 오른쪽 끝에 모은다 — 읽는 흐름을 가로막지 않는다 */
.org-branch__act { display: flex; justify-content: flex-end; gap: 4px; margin-top: 12px; }

/* 사람 한 명 */
.org-chip {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	padding: 3px 9px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--surface);
	font-size: 12.5px;
	color: var(--text) !important;
	text-decoration: none;
	white-space: nowrap;
}
.org-chip:hover { border-color: var(--lapl-green); color: var(--lapl-green) !important; }
.org-chip em { font-style: normal; font-size: 11px; color: var(--muted); }

.org-empty { font-size: 12.5px; color: var(--muted); }

/* 조직을 이끄는 자리 — 명단 맨 앞에 서고 한 톤 진하다 (사용자 지시 2026-09-18) */
.org-chip--lead {
	border-color: var(--lapl-green);
	background: #F1F2FA;
	font-weight: 700;
}
.org-chip--lead em { color: var(--lapl-green); }

/* 본부를 가로로 나란히 (사용자 지시 2026-09-18).
   화면이 좁으면 저절로 한 줄에 하나씩 내려온다. 본부 높이가 제각각이라
   위쪽을 맞춰 세운다 — 아래를 맞추면 짧은 본부에 빈 칸이 길게 생긴다. */
.org-wrap {
	display: grid;
	/* 본부는 한 줄을 통째로 쓴다 (사용자 지시 2026-09-18) —
	   가로로 나란히 두니 카드가 좁아 지점 명단이 자꾸 잘렸다. */
	grid-template-columns: 1fr;
	gap: 16px;
	align-items: start;
}
.org-wrap .org-hq { margin-bottom: 0; }
/* 본부가 넓어졌으니 그 안의 지점을 가로로 나란히 깐다 */
.org-wrap .org-branches { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* 본부를 맡은 사람 — 이름 앞에 세로 바를 그어 제목과 구분한다 (사용자 지시 2026-09-18) */
.org-hq__lead {
	position: relative;
	margin-left: 12px;
	padding-left: 13px;
	font-size: 14px;
	font-weight: 700;
	color: var(--text-2);
}
.org-hq__lead::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 13px;
	background: var(--border);
}

/* 지점 한 줄 (사용자 지시 2026-09-18) — 이름 · 명단 · 버튼이 한 줄에 선다.
   이름 폭을 맞춰 두어 본부가 달라도 명단 시작점이 세로로 떨어진다. */
.org-rows { margin-top: 12px; }
.org-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 0;
	border-top: 1px solid var(--divider);
}
.org-rows > .org-row:first-child { border-top: 0; }

.org-row__name {
	flex: 0 0 150px;
	font-size: 14px;
	font-weight: 700;
	color: var(--text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.org-row__name em { margin-left: 5px; font-style: normal; font-size: 12px; font-weight: 500; color: var(--muted); }
.org-row__dash { flex: 0 0 auto; color: var(--muted); }

/* 명단은 한 줄로 이어지고, 넘치면 옆으로 민다 */
.org-row__people {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-wrap: nowrap;
	gap: 5px;
	overflow-x: auto;
	padding-bottom: 2px;
}
.org-row__people .org-chip { flex: 0 0 auto; }
.org-row__people::-webkit-scrollbar { height: 4px; }
.org-row__people::-webkit-scrollbar-thumb { background: #CED4DA; border-radius: 2px; }

/* 손대는 버튼은 오른쪽 끝 — 평소에는 조용히 있다가 줄에 마우스를 올리면 진해진다 */
.org-row__act { flex: 0 0 auto; display: flex; gap: 4px; opacity: .35; transition: opacity .15s ease; }
.org-row:hover .org-row__act { opacity: 1; }

/* 상단바 날씨 (사용자 지시 2026-09-18) — 시계 옆에 조용히 붙는다 */
.hdr-wx { display: inline-flex; align-items: center; gap: 4px; margin-right: 12px; font-size: 13px; color: rgba(255,255,255,.82); }
.hdr-wx[hidden] { display: none; }
.hdr-wx__ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hdr-wx__temp { font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }

/* NPAY신청 — 센터본부와 ADMIN 에게만 보인다 (사용자 지시 2026-09-18).
   일정등록(오렌지) 옆이라 색을 나눠 둔다. 눌러 둔 동안은 한 톤 진하다. */
.board-btn.btn-npay { margin-left: 6px; background-color: var(--lapl-green) !important; border-color: var(--lapl-green) !important; color: #fff !important; }
.board-btn.btn-npay:hover { background-color: var(--lapl-green-2) !important; border-color: var(--lapl-green-2) !important; }
.board-btn.btn-npay.is-on { background-color: #171E47 !important; border-color: #171E47 !important; }

/* 대시보드 카드는 올리면 반응한다 (사용자 지시 2026-09-18) —
   눌러 들어갈 수 있는 자리라는 표시다.
   ⚠ transform 은 건드리지 않는다. 카드가 떠오르는 등장 애니메이션도 transform 을 쓰는데,
     같은 속성에 transition 을 걸면 둘이 부딪쳐 등장 모션이 통째로 씹힌다. */
.is-dash .card, .is-dash .dash-card {
	transition: box-shadow .16s ease, border-color .16s ease;
}
.is-dash .card:hover, .is-dash .dash-card:hover {
	border-color: var(--muted);
	box-shadow: 0 6px 18px rgba(23, 33, 58, .10);
}

/* 본부 번호 (사용자 지시 2026-09-18) — 부르는 차례를 눈으로도 세도록 */
.org-hq__no {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin-right: 8px;
	border-radius: 999px;
	background: var(--mist);
	color: var(--text-2);
	font-size: 12px;
	font-weight: 800;
	vertical-align: 1px;
}

/* 표 머리에서 다른 화면으로 넘어가는 칸 (사용자 지시 2026-09-18).
   링크라는 건 알려야 하되, 머리줄이 알록달록해지면 안 되니
   평소엔 같은 색으로 두고 점선 밑줄만 깔아 둔다. */
.tbl-list thead th .th-link {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px dashed currentColor;
	padding-bottom: 1px;
}
.tbl-list thead th .th-link:hover {
	color: var(--lapl-green);
	border-bottom-color: var(--lapl-green);
}

/* NEW 배지 (사용자 지시 2026-09-18) — 하루 안에 들어온 건.
   검은 이미지를 쓰던 자리다. 배지가 상품명보다 진하면 눈이 배지에 먼저 가서,
   연한 초록 바탕에 초록 글씨로 눕히고 크기도 한 단계 줄였다. */
.tag-new {
	display: inline-block;
	margin-left: 5px;
	padding: 1px 5px;
	border-radius: 3px;
	background: rgba(37, 50, 114, .10);
	color: var(--lapl-green);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .04em;
	line-height: 1.5;
	vertical-align: 1px;
}

/* 검색 옆 초기화 (사용자 지시 2026-09-18 "전체페이지 UI 점검").
   .filter-bar__btns 로 묶인 자리는 gap 이 간격을 주지만, 옛 화면들은 버튼 두 개가
   그냥 나란히 놓여 있어 서로 붙어 버린다. 어디에 있든 같은 간격이 되게 한다. */
.btn-flat + .btn-flat { margin-left: 6px; }

/* 가로 필터에서 꼭 필요한 이름표 (사용자 지시 2026-09-18).
   보통은 각 칸의 첫 항목이 이름을 대신하지만, 날짜가 두 쌍 나란히 놓이는 화면
   (제휴계약의 결제일·계약일)은 무엇의 기간인지 적어 주지 않으면 구분이 안 된다. */
.filter-bar__label {
	font-size: 13px;
	font-weight: 600;
	color: var(--text-2, #6B7080);
	white-space: nowrap;
}

/* 메인 대시보드 출근 인원 (사용자 지시 2026-09-18) —
   오늘 몇 명 나왔는지가 카드에서 먼저 읽혀야 한다. 미터치·달성률과 같은 진한 오렌지. */
.stat-list__value--att { color: var(--orange-deep) !important; font-weight: 700; }

/* ==========================================================================
   리크루팅 (사용자 지시 2026-09-18)
   한 사람이 한 줄이고, 그 줄에서 면접·CIS·입사를 바로 누른다.
   ========================================================================== */

/* 단계별 인원 — 어디에서 막혀 있는지 */
.rc-tally { display: flex; align-items: baseline; gap: 14px; margin: 0; font-size: 14px; color: var(--text-2); }
.rc-tally b { margin-left: 3px; font-size: 16px; font-weight: 700; color: var(--text); }
.rc-tally > span:first-child b { color: var(--lapl-green); }

/* 진행과정 — 세 칸이 왼쪽에서 오른쪽으로 이어진다.
   지나온 칸은 초록으로 채우고, 아직 안 온 칸은 비워 둔다. 지금 어디인지가 색으로 읽힌다. */
.rc-steps { display: inline-flex; align-items: stretch; gap: 3px; }
.rc-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	min-width: 46px;
	padding: 4px 6px;
	border: 1px solid var(--border);
	border-radius: 6px;
	background: #fff;
	color: var(--muted);
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.rc-step em { font-style: normal; font-size: 11px; font-weight: 700; line-height: 1.3; }
.rc-step i  { font-style: normal; font-size: 10px; line-height: 1.2; opacity: .8; }
.rc-step:hover:not(:disabled) { border-color: var(--lapl-green); color: var(--lapl-green); }
.rc-step.is-on {
	background: var(--lapl-green);
	border-color: var(--lapl-green);
	color: #fff;
}
/* 마지막 칸(입사)만 오렌지 — 여기까지 와야 끝난 것이다 */
.rc-step.is-on[data-step="3"] { background: var(--orange-deep); border-color: var(--orange-deep); }
.rc-step:disabled { cursor: default; opacity: .55; }

/* 보류·중단 */
.rc-badge {
	display: inline-block;
	margin-left: 4px;
	padding: 1px 5px;
	border-radius: 3px;
	font-size: 10px;
	font-weight: 700;
}
.rc-badge--1 { background: rgba(224, 160, 64, .16); color: #9A6A12; }   /* 보류 */
.rc-badge--2 { background: rgba(23, 33, 58, .10);   color: var(--text-2); }   /* 중단 */
.rc-list tr.rc-off td { color: var(--muted); }

/* 주요경력은 길다 — 두 줄까지만 보이고 나머지는 접는다.
   줄임(-webkit-box)은 안쪽 span 에 건다. 칸(td)에 걸면 그 칸이 표의 칸이 아니게 되어
   세로 가운데 정렬을 잃고 글씨가 위로 붙는다 (대표님 지시 2026-09-22). */
.rc-list .rc-career {
	vertical-align: middle;
	font-size: 13px;
	line-height: 1.45;
}
.rc-list .rc-career > span {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* 필수 표시 — 빨강 대신 회색 (사용자 지시 2026-09-17) */
.txt-req { color: var(--muted); font-weight: 400; }

/* ==========================================================================
   총무현황 (사용자 지시 2026-09-18)
   본부현황 격자 안, 센터본부 카드 옆에 한 장으로 선다. 그 안에 두 사람.
   ========================================================================== */
/* 본부가 아니라는 표시 — 센터본부를 주황으로 구분한 것과 같은 방식이다 */
.ga-card { border-color: var(--lapl-green); }
.ga-card .card__title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ga-card .card__title small { font-weight: 500; color: var(--muted); }

.ga-list { margin: 0; padding: 0; list-style: none; }
.ga-item {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 8px;
	padding: 10px 0;
	border-top: 1px solid var(--border);
}
.ga-item:first-child { border-top: 0; padding-top: 2px; }
.ga-name { font-weight: 700; color: var(--text); }

/* 지금 자리에 있는가 — 근무중만 채운다. 나머지를 비워 둬야 눈이 초록에 먼저 간다. */
.ga-state {
	display: inline-flex;
	align-items: center;
	height: 23px;
	padding: 0 9px;
	border-radius: 12px;
	border: 1px solid transparent;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}
.ga-state--on   { background: var(--lapl-green); color: #fff; }
.ga-state--off  { background: rgba(23, 33, 58, .07); color: var(--text-2); }
/* 출근전은 경고가 아니다 — 아침이면 당연한 상태다 (2026-09-18).
   오렌지로 세워 두면 매일 아침 모두가 문제인 것처럼 보인다. 중립으로 둔다. */
.ga-state--none { background: #fff; border-color: var(--border); color: var(--text-2); }

.ga-sub { font-size: 12px; color: var(--muted); }

/* 휴가 켜고 끄기는 줄 오른쪽 끝에 */
.ga-off {
	margin-left: auto;
	height: 23px;
	padding: 0 8px;
	border: 1px solid var(--border);
	border-radius: 6px;
	background: #fff;
	font-size: 11px;
	font-weight: 600;
	color: var(--text-2);
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.ga-off:hover:not(:disabled) { border-color: var(--muted); color: var(--text); }
.ga-off.is-on { border-color: var(--orange-deep); color: var(--orange-deep); }
.ga-off:disabled { opacity: .5; cursor: default; }

/* 카드 제목의 아이콘 (사용자 지시 2026-09-18) — 제목 글자와 같은 높이로 앉힌다.
   본부 카드는 제목 줄을 양끝 정렬로 쓰므로, 아이콘이 이름에서 떨어지지 않게 묶어 준다. */
.org-card .card__title .sec-ico,
.ga-card .card__title .sec-ico {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-right: 6px;
	color: var(--text-2);
}
.ga-card .card__title .sec-ico { color: var(--lapl-green); }
/* 아이콘이 붙으면서 제목 줄이 [아이콘][이름][인원] 세 덩이가 됐다.
   양끝 정렬을 그대로 두면 셋이 고르게 벌어져 아이콘만 멀찍이 떨어진다 —
   앞의 둘은 붙여 두고, 인원수만 오른쪽 끝으로 밀어낸다. */
.org-card .card__title,
.ga-card .card__title { justify-content: flex-start; }
.org-card .card__title > small,
.ga-card .card__title > small { margin-left: auto; }
/* 퇴근 — 오늘 일은 끝났다. 근무중과 달리 채우지 않고 테두리만 둔다 (사용자 지시 2026-09-18) */
.ga-state--done { background: #fff; border-color: var(--border); color: var(--text-2); }

/* PM 현황의 입사일 옆 개월차 (사용자 지시 2026-09-18) —
   날짜가 본체이고 개월수는 곁들이는 값이라 한 단계 작고 옅게 둔다. */
.pm-mon { font-size: 11px; font-weight: 700; color: var(--orange-deep); }

/* ==========================================================================
   휴가신청 (사용자 지시 2026-09-18)
   ========================================================================== */
/* 내 결재선 — 신청 전에 누구에게 올라가는지 보이게 */
.lv-line {
	display: flex;
	align-items: center;
	margin: 0 0 16px;
	font-size: 13px;
	color: var(--text-2);
}
.lv-line b { color: var(--text); }
.lv-chain b { color: var(--text); }
.lv-chain .txt-muted { margin-left: 3px; font-size: 12px; }

/* 결재함에 쌓인 건수 — 남을 기다리게 하는 일이라 눈에 걸려야 한다 */
.lv-cnt {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 7px;
	border-radius: 10px;
	background: var(--orange-deep);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
}

.lv-reason { font-size: 12px; color: var(--muted); }

/* 진행 — 끝난 것만 채운다. 기다리는 것은 비워 둬야 아직 할 일이라는 게 읽힌다. */
.lv-st {
	display: inline-flex;
	align-items: center;
	height: 22px;
	padding: 0 8px;
	border-radius: 11px;
	border: 1px solid transparent;
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
}
.lv-st--0  { background: #fff; border-color: var(--orange-deep); color: var(--orange-deep); }
.lv-st--1  { background: #fff; border-color: var(--orange-deep); color: var(--orange-deep); }
.lv-st--2  { background: var(--lapl-green); color: #fff; }
.lv-st--no { background: rgba(23, 33, 58, .07); color: var(--text-2); }

/* 다가오는 휴가 — 결재자가 누가 언제 빠지는지 미리 본다 */
.lv-soon { margin: 0; padding: 0; list-style: none; }
.lv-soon li {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 9px 0;
	border-bottom: 1px solid var(--border);
	font-size: 14px;
}
.lv-soon li:last-child { border-bottom: 0; }
.lv-soon b { min-width: 92px; }
.lv-soon span { color: var(--text-2); }
.lv-soon em { font-style: normal; font-size: 12px; color: var(--muted); }

/* TA단계에서 손이 가야 하는 것 (사용자 지시 2026-09-18) —
   PM 안내·재연락은 누군가 움직여야 끝나는 상태라 색으로 짚어 준다.
   전부 색을 입히면 어느 것이 급한지 알 수 없어, 이 둘만 남긴다. */
.ta-act { color: var(--orange-deep); font-weight: 700; }

/* 업무알림의 결재 대기 (2026-09-18) —
   메뉴 옆 숫자에 더해지는 값이라, 여기 안 보이면 '1'을 보고 들어와 빈 화면을 만난다. */
.nt-wait__list { margin: 0; padding: 0; list-style: none; }
.nt-wait__list li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--border);
}
.nt-wait__list li:last-child { border-bottom: 0; }
.nt-wait__n {
	min-width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 8px;
	border-radius: 17px;
	background: var(--orange-deep);
	color: #fff;
	font-size: 15px;
	font-weight: 800;
}
.nt-wait__t { font-weight: 700; color: var(--text); }
.nt-wait__list li > a { margin-left: auto; }

/* 받은 알림 카드 (사용자 지시 2026-09-18) —
   줄로 쌓으면 제목이 다 비슷해 보인다. 한 장에 하나씩 놓아 기한과 제목이 크게 서게 한다. */
.nt-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-top: 4px; }
.nt-card { display: flex; flex-direction: column; }

/* 기한이 맨 위 — 언제까지인지가 제목보다 먼저 읽혀야 한다 */
.nt-card__due {
	display: flex;
	align-items: baseline;
	gap: 5px;
	margin: 0 0 8px;
	font-size: 12px;
	color: var(--muted);
}
.nt-card__due b { font-size: 16px; font-weight: 800; color: var(--text); }
.nt-card.is-late .nt-card__due b,
.nt-card.is-late .nt-card__due span { color: var(--orange-deep); font-weight: 700; }
.nt-card__ok {
	margin-left: auto;
	font-style: normal;
	font-size: 11px;
	font-weight: 700;
	color: var(--lapl-green);
}

.nt-card__title { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.4; }
.nt-card__desc { margin: 0 0 10px; font-size: 13px; color: var(--text-2); line-height: 1.6; }
.nt-card__meta { margin: 0; font-size: 12px; color: var(--muted); }

/* 버튼은 카드 맨 아래 — 카드 높이가 달라도 단추 줄이 나란하다 */
.nt-card__act { margin-top: auto; padding-top: 12px; display: flex; justify-content: flex-end; }

/* 끝난 것은 한 톤 내린다. 지우지는 않는다 — 무엇을 했는지도 기록이다. */
.nt-card.is-done { background: var(--tone-zone-b, #F4F4F6); }
.nt-card.is-done .nt-card__title { color: var(--text-2); }
/* 왼쪽 띠로 급한 것을 한 번 더 */
.nt-card.is-late { border-left: 3px solid var(--orange-deep); }

/* ==========================================================================
   라플 KPI 표 (사용자 지시 2026-09-18)
   칸마다 연두·하늘·노랑을 칠하고 글자는 빨강·파랑이었다. 색이 많으면 어디를
   봐야 할지 알 수 없다. 바탕은 비우고, 정말 봐야 하는 셋만 세운다.
   ========================================================================== */
/* 금액은 오른쪽 — 자릿수가 어긋나면 크기를 눈으로 못 잰다 */
.table.type--1.tbl-list > tbody > tr > td.txt-right,
.table.type--1.tbl-list > tfoot > tr > td.txt-right,
.table.type--1.tbl-list > tr > td.txt-right { text-align: right; }

.kpi-rank { color: var(--text-2); }
/* 목표·달성률은 라플 오렌지, 실적합계는 진하게 — 이 셋이 이 표의 요점이다 */
.kpi-target,
.kpi-rate { color: var(--orange-deep); font-weight: 700; }
.kpi-sum  { font-weight: 700; color: var(--text); }
.kpi-cnt  { font-weight: 700; color: var(--text); }

/* 합계 줄은 한 칸 눌러 둔다 — 값이 아니라 마무리다 */
.kpi-foot > td { background: var(--tone-zone-b, #F4F4F6); font-weight: 700; }

/* CSR 대시보드 출근 명단 (사용자 지시 2026-09-18) —
   숫자만으로는 누가 빠졌는지 모른다. 아침에 알아야 하는 것은 이름이다. */
.csr-att { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 5px; }
.csr-att__p {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	padding: 3px 8px;
	border-radius: 12px;
	background: rgba(37, 50, 114, .10);
}
.csr-att__p b { font-size: 12px; font-weight: 700; color: var(--text); }
.csr-att__p i { font-style: normal; font-size: 11px; color: var(--muted); }
/* 안 나온 사람은 비워 둔다 — 초록이 나온 사람에게만 가게 */
.csr-att__p--off { background: transparent; border: 1px solid var(--border); }
.csr-att__p--off b { color: var(--orange-deep); }
/* 같은 카드 안에서 기간이 다른 줄 — 어느 기간인지 작게 덧붙인다 (2026-09-18) */
.stat-note { font-style: normal; margin-left: 4px; font-size: 11px; color: var(--muted); }

/* 업무알림 카드의 확인·처리 버튼 (사용자 지시 2026-09-18) —
   '읽었다'와 '다 했다'는 다른 말이라 손잡이도 둘이다. */
.nt-card__act { align-items: center; gap: 6px; }
.nt-card__f { margin: 0; }
.nt-card__read { margin-right: auto; font-size: 11px; color: var(--muted); }

/* 설계서전송 — 글씨는 다른 단계(무응답 등)와 똑같이 두고, 문서 그림을 네모 앞에 따로 세운다
   (사용자 지시 2026-09-20). 라벨 안쪽에 두면 네모와 글씨 사이에 끼어 글씨를 밀어낸다. */
.ta-doc { display: inline-block; width: 14px; height: 14px; margin-right: 3px;
	vertical-align: -3px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%235E6475' d='M13.6 2H6.6A2.6 2.6 0 0 0 4 4.6v14.8A2.6 2.6 0 0 0 6.6 22h10.8a2.6 2.6 0 0 0 2.6-2.6V8.4L13.6 2z'/%3E%3Cpath fill='%23ffffff' opacity='.5' d='M13.6 2L20 8.4h-4.9a1.5 1.5 0 0 1-1.5-1.5V2z'/%3E%3Cpath stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' d='M8.2 12.6h7.6M8.2 16.1h5.2'/%3E%3C/svg%3E") no-repeat center / contain; }

/* 오늘의 계약 (사용자 지시 2026-09-18) —
   본부 카드들이 이 달을 말할 때, 이 한 장만 오늘을 말한다.
   테두리를 오렌지로 둬 '결이 다른 칸' 임을 알린다 (총무현황의 초록과 같은 방식). */
.td-card { border-color: var(--orange-deep); }
.td-card .card__title { justify-content: flex-start; }
.td-card .card__title > small { margin-left: auto; font-weight: 500; color: var(--muted); }
.td-card .card__title .sec-ico { flex: 0 0 auto; width: 16px; height: 16px; margin-right: 6px; color: var(--orange-deep); }

/* 오늘의 계약 — 숫자를 누르면 그 계약들이 열린다 (사용자 지시 2026-09-18).
   밑줄로 어지럽히지 않고, 올렸을 때만 선이 보이게 한다. */
.td-link { color: inherit; text-decoration: none; }
.td-link:hover { color: var(--orange-deep); text-decoration: underline; }

/* 라플앱 연동 설정 — ADMIN 전용 화면 (사용자 지시 2026-09-18).
   설정 화면은 읽고 판단하는 곳이라 표보다 문단에 가깝게 짰다. */
.ap-lead { font-size: 14px; line-height: 1.8; color: #444; margin: 0 0 22px; }
.ap-h { font-size: 15px; font-weight: 600; margin: 26px 0 8px; color: #222; }
.ap-h:first-of-type { margin-top: 0; }
.ap-box { border: 1px solid #e5e5e5; border-radius: 6px; padding: 16px 18px; background: #fff; }
.ap-box + .ap-h { margin-top: 26px; }

/* 키와 입력칸은 한 줄에 — 복사 버튼이 값에서 멀어지면 안 된다 */
.ap-key { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.ap-key input { flex: 1 1 auto; min-width: 0; padding: 8px 10px; border: 1px solid #ddd;
	border-radius: 4px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
.ap-key input[readonly] { background: #fafafa; color: #333; }

.ap-warn { font-size: 13px; line-height: 1.7; color: #b4472a; margin: 0 0 12px; }
.ap-done { font-size: 13px; color: var(--orange-deep); margin: 10px 0 0; }
.ap-no   { font-size: 13px; color: #888; margin: 10px 0 0; line-height: 1.7; }
.ap-miss { font-size: 13px; line-height: 1.7; color: #666; margin: 8px 0 0; }
.ap-stat { font-size: 14px; margin: 0; }
.ap-stat b { font-size: 20px; color: var(--orange-deep); }

.ap-spec { background: #fafafa; border: 1px solid #eee; border-radius: 4px; padding: 14px 16px;
	font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.75;
	color: #333; white-space: pre-wrap; word-break: break-all; margin: 0 0 12px; }

/* PM 배정현황 — 날마다 몇 건이 내려갔는지 (사용자 지시 2026-09-18).
   날짜가 가로로 30칸까지 늘어나므로 이름 칸을 고정하고 나머지를 좁게 민다.
   숫자를 왼쪽 이름과 붙여 읽어야 해서, 가로로 밀어도 이름은 따라온다. */
.pa-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.pa-grid { font-size: 13px; }
table.pa-grid th, table.pa-grid td { padding: 6px 4px; min-width: 30px; white-space: nowrap;
	font-variant-numeric: tabular-nums; }
table.pa-grid th { font-size: 12px; line-height: 1.25; }
table.pa-grid th i { display: block; font-style: normal; font-size: 10px; color: var(--muted, #999);
	font-weight: 400; }

/* 이름 칸 — 가로 스크롤에도 붙어 있게 */
table.pa-grid .pa-name { position: sticky; left: 0; z-index: 2; background: #fff;
	text-align: left; min-width: 148px; box-shadow: 1px 0 0 var(--line, #e5e5e5); }
table.pa-grid thead .pa-name { z-index: 3; background: var(--tone-zone-b, #F4F4F6); }
table.pa-grid tfoot .pa-name { background: var(--tone-zone-b, #F4F4F6); }
table.pa-grid .pa-name b { font-weight: 600; }
table.pa-grid .pa-name i { display: block; font-style: normal; font-size: 11px;
	color: var(--muted, #999); margin-top: 1px; }

/* 오늘 · 주말 · 빈 칸 */
table.pa-grid .today { background: #FDEDE7; }
table.pa-grid th.today { background: var(--orange-deep); color: #fff; }
table.pa-grid th.today i { color: rgba(255, 255, 255, .8); }
table.pa-grid .off { background: #FAFAFB; }
table.pa-grid .z { color: var(--muted, #999); }
.pa-low { color: var(--orange-deep); }

/* 합계 · 계약 */
table.pa-grid .pa-sum { background: #FBF9F5; font-weight: 700; min-width: 48px; }
table.pa-grid .pa-con-td a { color: var(--orange-deep); text-decoration: none; font-weight: 700; }
table.pa-grid .pa-con-td a:hover { text-decoration: underline; }
table.pa-grid tfoot td { background: var(--tone-zone-b, #F4F4F6); font-weight: 700; }

.pa-cap { font-size: 14px; font-weight: 600; margin: 18px 0 6px; }
.pa-cap--2 { margin-top: 30px; }
.pa-note { font-size: 12.5px; color: #666; line-height: 1.7; margin: 10px 0 0; }

/* 숫자 카드 한 줄 — 표 위에서 오늘·이 달을 먼저 말한다 */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px;
	background: var(--line, #e5e5e5); border: 1px solid var(--line, #e5e5e5); border-radius: 6px;
	overflow: hidden; }
.kpi-box { background: #fff; padding: 13px 15px; }
.kpi-box__label { display: block; font-size: 11.5px; color: #777; margin-bottom: 5px; }
.kpi-box__num { display: block; font-size: 21px; font-weight: 700; letter-spacing: -.5px; line-height: 1.15; }
.kpi-box__num small { font-size: 12px; font-weight: 500; color: #777; margin-left: 2px; }
.kpi-box__sub { display: block; font-size: 11px; color: #999; margin-top: 3px; }
.kpi-box--hi .kpi-box__num { color: var(--orange-deep); }

/* 이름 · 소속 · 조건을 한 줄로 (사용자 지시 2026-09-18) —
   두 줄이면 줄 높이가 벌어져 날짜 칸 30개가 덩달아 커진다 */
table.pa-grid .pa-name i { display: inline; margin-left: 6px; margin-top: 0; }
table.pa-grid .pa-name { min-width: 0; }

/* 본부·지점·이름은 왼쪽 정렬, 나머지 숫자 칸은 가운데 (사용자 지시 2026-09-18) */
table.pa-grid .pa-l { text-align: left; padding-left: 8px; padding-right: 8px; white-space: nowrap; }

/* 두 표가 같은 격자를 쓰도록 — colgroup 폭이 그대로 먹으려면 고정 배치여야 한다 (2026-09-18) */
table.pa-grid { table-layout: fixed; width: 100%; }
table.pa-grid .pa-l { overflow: hidden; text-overflow: ellipsis; }

/* 계약 칸은 합계 줄까지 오렌지 (사용자 지시 2026-09-18) */
table.pa-grid .pa-con-td { color: var(--orange-deep); font-weight: 700; }

/* 사은품 신청현황 — 단계별 칸에 색을 아주 조금만 (사용자 지시 2026-09-18).
   '어디서 막혀 있나' 를 보는 표라, 결재중은 회색, 지급완료(상담등록 필요)는 오렌지,
   완료는 초록, 반려는 흐리게. 숫자 전체를 칠하면 정작 막힌 곳이 안 보인다. */
table.hs-grid { table-layout: fixed; width: 100%; font-size: 13px; }
table.hs-grid th i { display: block; font-style: normal; font-size: 10px; color: var(--muted, #999); font-weight: 400; }
table.hs-grid .hs-all { font-weight: 700; }
table.hs-grid .hs-ing  { color: #666; }
table.hs-grid .hs-paid { color: var(--orange-deep); font-weight: 700; }
table.hs-grid .hs-done { color: #253272; }
table.hs-grid .hs-rej  { color: #b4472a; }
table.hs-grid tfoot td { background: var(--tone-zone-b, #F4F4F6); font-weight: 700; }

/* 표가 든 카드는 움직이지 않는다 (사용자 지시 2026-09-18).
   등장 애니메이션과 올렸을 때의 그림자는 숫자 몇 개짜리 카드에 어울리는 것이다.
   표가 든 카드는 읽는 동안 커서가 계속 위에 있어 그림자가 들락거리고,
   등장할 때 표 전체가 미끄러져 들어오면 첫 줄을 읽기 시작하는 순간이 늦어진다. */
.is-dash .card:has(table),
.is-dash .card.dash-card--full {
	animation: none !important;
	transition: none !important;
	transform: none !important;
}
.is-dash .card:has(table):hover,
.is-dash .card.dash-card--full:hover {
	box-shadow: none;
	border-color: var(--line, #e5e5e5);
}

/* 박스 칸은 굵지 않게 (사용자 지시 2026-09-18) — 합계·계약처럼 결과 숫자가 아니라 참고 숫자다 */
table.pa-grid tbody .pa-box { font-weight: 400; }

/* 상담내역 삭제 버튼 — 작게, 줄 위에 (사용자 지시 2026-09-18).
   내용이 긴 줄에서 가운데 정렬된 버튼은 글 중간에 떠서 어느 줄 것인지 헷갈린다. */
.board-btn.xs { height: 22px; min-width: 0; padding: 0 9px; font-size: 11px; line-height: 20px; border-radius: 5px; }
td.log-act, td.log-date { vertical-align: top; padding-top: 10px; }

/* 대시보드 인사 — 두 번째 문장은 새 줄로 (사용자 지시 2026-09-18) */
.dash-hello__line { display: block; margin-top: 4px; }

/* 앱·휴대폰 상단 — 초록 바탕에 인슈라넷·라플 로고만 (사용자 지시 2026-09-18).
   시계·날씨·출퇴근·외부 링크·계정 버튼은 좁은 폭에서 로고 위로 겹쳐 올라온다. */
.header--app .btn-wrap { display: none !important; }
.header--app .header-wrap { justify-content: center; }
.header--app .logo { margin: 0 auto; }
@media (max-width: 767px) {
	.header .btn-wrap { display: none !important; }
	.header .header-wrap { justify-content: center; }
	.header .logo { margin: 0 auto; }
}

/* 모바일·앱 상단은 인슈라넷 로고만 크게 가운데 (사용자 지시 2026-09-18) — 라플 마크·구분선은 뺀다 */
.header--app .logo__lapl, .header--app .logo__divider { display: none !important; }
.header--app .logo__insuranet { height: 36px; }
@media (max-width: 767px) {
	.header .logo__lapl, .header .logo__divider { display: none !important; }
	.header .logo__insuranet { height: 36px; }
}

/* 모바일·앱에서는 푸터를 뺀다 (사용자 지시 2026-09-18) — 주소·전화·저작권은 휴대폰 화면에서 자리만 차지한다 */
@media (max-width: 767px) { .site-footer { display: none !important; } }
body.is-app .site-footer { display: none !important; }

/* 푸터 세로를 최대한 줄인다 (사용자 지시 2026-09-18) — 세 줄을 촘촘히, 위아래 여백은 최소로 */
.site-footer { padding: 8px var(--page-pad) 9px; }
.site-footer__row { gap: 4px 12px; font-size: 12px; line-height: 1.3; }
.site-footer__contact { margin: 3px 0 0; gap: 3px 16px; font-size: 12px; line-height: 1.3; }
.site-footer__contact .ic { width: 12px; height: 12px; }
.site-footer__copy { margin-top: 3px !important; font-size: 11px; line-height: 1.3; }

/* PM 현황 · 인슈라넷 최근 접속 — 사무실이면 오렌지, 밖이면 회색 (사용자 지시 2026-09-18) */
.pm-seen { font-variant-numeric: tabular-nums; font-weight: 600; }
.pm-seen--in  { color: var(--orange-deep); }
.pm-seen--out { color: #9a9a9a; }

/* 최근 접속 글씨는 옆 '(8개월)' 과 같은 크기로 (사용자 지시 2026-09-18) */
.pm-seen { font-size: 11px; font-weight: 500; }

/* ── 모바일 최적화 (사용자 지시 2026-09-18) ──────────────────────────────────────
   원래 화면(고객 목록·계약·PM 현황 …)을 휴대폰에서도 읽을 수 있게 한다.
   원칙: 표는 가로로 밀어 본다(칸을 억지로 접으면 숫자표가 깨진다), 필터는 두 칸씩 접는다,
   여백·글자는 한 단계 줄인다. 앱 화면(app/*)은 따로 그린 것이라 여기 영향을 안 받는다. */
@media (max-width: 767px) {
	:root { --page-pad: 12px; }
	.admin-content { padding-top: 12px; }
	.admin-content .container { padding-left: var(--page-pad); padding-right: var(--page-pad); }
	.admin-content__head { margin-bottom: 8px; }
	.page-title--2 { font-size: 18px; }
	.page-title .round-btn { padding: 6px 10px; font-size: 12px; }

	/* 메뉴 탭 — 가로 스크롤은 이미 되고, 칸만 좁힌다 */
	.gnb__link { padding: 0 10px; font-size: 13px; white-space: nowrap; }

	/* 필터 — 두 칸씩, 버튼은 한 줄 */
	.filter-bar { gap: 6px; }
	.filter-bar select, .filter-bar input[type="date"], .filter-bar input[type="text"], .filter-bar input[type="month"], .filter-bar input[type="search"] {
		flex: 1 1 calc(50% - 6px); min-width: 0; width: auto; }
	.filter-bar__sep, .filter-bar__tilde { display: none; }
	.filter-bar__btns { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px; }
	.filter-bar .btn-flat { padding: 7px 10px; font-size: 12.5px; }

	/* 표 — 본문 영역 안에서 가로로 민다. 칸이 좁아지지 않게 최소 폭을 준다 */
	.admin-content__body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.admin-content__body table.table, .admin-content__body table.dash-table { min-width: 720px; font-size: 12.5px; }
	.admin-content__body table.table th, .admin-content__body table.table td,
	.admin-content__body table.dash-table th, .admin-content__body table.dash-table td { padding: 6px 6px; white-space: nowrap; }
	.dash-table-scroll, .pa-scroll { margin-left: calc(-1 * var(--page-pad)); margin-right: calc(-1 * var(--page-pad)); padding: 0 var(--page-pad); }

	/* 카드·숫자 */
	.card { padding: 14px; }
	.card-grid { gap: 12px; }
	.dash-section { margin-bottom: 18px; }
	.kpi-row { grid-template-columns: 1fr 1fr; }
	.metric__num { font-size: 26px; }

	/* 대시보드 인사 */
	.dash-hello__msg { font-size: 15px; }

	/* PM 현황·PM 배정현황 — 넓은 표라 위 규칙으로 가로 스크롤 */
	table.pa-grid { min-width: 900px; }
}
@media (max-width: 420px) {
	.kpi-row { grid-template-columns: 1fr; }
}

/* 모바일 — 표를 둘로 가른다 (2026-09-18): 목록표는 가로로 밀고, 입력·검색표는 칸을 접는다.
   고객 목록의 검색표(체크박스 여러 줄)를 목록표처럼 밀면 오른쪽이 잘려 체크를 못 한다. */
@media (max-width: 767px) {
	.admin-content__body table.table { min-width: 0; }
	.admin-content__body table.table th, .admin-content__body table.table td { white-space: normal; }
	.admin-content__body table.table.text-left th { width: 64px; min-width: 64px; font-size: 12px; padding: 6px 4px; }
	.admin-content__body table.table.text-left td { padding: 6px 4px; }
	.admin-content__body table.table.text-left td label { margin-right: 6px; font-size: 12.5px; }
	.admin-content__body table.table.text-left td select,
	.admin-content__body table.table.text-left td input[type="text"],
	.admin-content__body table.table.text-left td input[type="date"] { max-width: 100%; min-width: 0; }
	/* 목록표 */
	.admin-content__body table.tbl-list, .admin-content__body table.cust-list, .admin-content__body table.dash-table,
	.admin-content__body table.cust-log, .admin-content__body table.pa-grid, .admin-content__body table.hs-grid { min-width: 720px; }
	.admin-content__body table.tbl-list th, .admin-content__body table.tbl-list td,
	.admin-content__body table.cust-list th, .admin-content__body table.cust-list td,
	.admin-content__body table.dash-table th, .admin-content__body table.dash-table td,
	.admin-content__body table.pa-grid th, .admin-content__body table.pa-grid td,
	.admin-content__body table.hs-grid th, .admin-content__body table.hs-grid td { white-space: nowrap; }
}

/* 모바일 — 검색·입력표는 화면 폭 안에서 접는다 (2026-09-18). 고정 배치라야 체크박스 줄이 칸 안에서 줄바꿈된다 */
@media (max-width: 767px) {
	.admin-content__body table.table.text-left { width: 100%; table-layout: fixed; }
	.admin-content__body table.table.text-left td { word-break: keep-all; overflow-wrap: anywhere; }
}

/* 모바일 — 화면이 좌우로 밀리거나 위아래로 튕기지 않게 (사용자 지시 2026-09-18).
   넓은 표는 자기 상자 안에서만 밀리고, 페이지 자체는 세로로만 움직인다. */
@media (max-width: 767px) {
	html, body { overflow-x: hidden; max-width: 100vw; overscroll-behavior: none; }
	.main, .admin-wrap, .admin-content, .admin-content .container { max-width: 100vw; overflow-x: hidden; }
	.gnb__inner { overscroll-behavior-x: contain; }
	.admin-content__body { overscroll-behavior-x: contain; }
}

/* 휴대폰·앱에서는 대시보드 카드가 움직이지 않는다 (사용자 지시 2026-09-18) —
   등장 슬라이드·올렸을 때 그림자 없이, PC 와 같은 카드가 그 자리에 바로 선다 */
@media (max-width: 767px) {
	.is-dash .card, .is-dash .dash-card, .is-dash .card-grid > .card, .is-dash .dash-section > .card {
		animation: none !important; transition: none !important; transform: none !important; opacity: 1 !important; }
	.is-dash .card:hover { box-shadow: none; }
}
.header--app ~ * .is-dash .card, .header--app ~ * .is-dash .dash-card {
	animation: none !important; transition: none !important; transform: none !important; opacity: 1 !important; }

/* 모바일·앱 로고를 확실히 가운데로 (사용자 지시 2026-09-18) — 기존 space-between 을 이긴다 */
.header--app .header-wrap { justify-content: center !important; }
.header--app .logo { margin: 0 auto !important; justify-content: center; }
@media (max-width: 767px) {
	.header .header-wrap { justify-content: center !important; }
	.header .logo { margin: 0 auto !important; justify-content: center; }
}

/* 모바일·앱 로고 가운데 — 로고가 absolute 라 margin 으로는 안 움직였다 (2026-09-18) */
.header--app .logo { position: static !important; }
@media (max-width: 767px) { .header .logo { position: static !important; } }

/* 앱에서는 로고 아래 메뉴 줄을 뺀다 (사용자 지시 2026-09-18) — 이동은 하단 탭이 맡는다 */
.header--app ~ * .gnb { display: none !important; }
/* 앱에서는 지점별 현황 섹션을 뺀다 (사용자 지시 2026-09-18) */
.header--app ~ * .dash-section--branches { display: none !important; }

/* 모바일 스크롤이 막히던 것 (사용자 지시 2026-09-18: "대시보드 스크롤이 안 되네").
   html/body 에 overflow-x:hidden 을 주면 iOS 에서 세로 스크롤까지 멈추는 일이 있다.
   clip 은 잘라내기만 하고 스크롤 상자를 만들지 않는다. */
@media (max-width: 767px) {
	html, body { overflow-x: clip !important; overflow-y: auto !important; height: auto !important; }
	.main, .admin-wrap, .admin-content, .admin-content .container { overflow-x: clip !important; overflow-y: visible !important; }
}

/* 로고는 투톤 그대로 — INSURANET ㅣ LAPL 둘 다, 가운데 (사용자 지시 2026-09-18). 앞서 라플 마크를 숨겼던 것을 되돌린다 */
.header--app .logo__lapl, .header--app .logo__divider { display: inline-block !important; }
.header--app .logo__insuranet { height: 26px; }
.header--app .logo__lapl { height: 34px; }
@media (max-width: 767px) {
	.header .logo__lapl, .header .logo__divider { display: inline-block !important; }
	.header .logo__insuranet { height: 26px; }
	.header .logo__lapl { height: 34px; }
}

/* 입력창은 라운드 없이 — 계약등록을 비롯한 모든 화면 (사용자 지시 2026-09-18). 버튼은 그대로 */
input[type="text"], input[type="number"], input[type="date"], input[type="time"], input[type="month"],
input[type="search"], input[type="tel"], input[type="email"], input[type="password"], input[type="url"],
select, textarea,
.filter-bar select, .filter-bar input, .fb input, .fb select, .cf textarea, .cf input, .cf select,
.ap-key input, .signin-list input {
	border-radius: 0 !important;
}

/* 계약등록 제목 아이콘 (사용자 지시 2026-09-18) — 제목 글자 앞, 라플 오렌지 선 아이콘 */
.cf-ico { width: 16px; height: 16px; margin: 0 6px -3px 0; stroke: var(--orange-deep); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: baseline; }

/* 팝업창 — 얇은 초록 테두리 + 상단 투톤 사선 띠 (사용자 지시 2026-09-18).
   상단바·질문상자와 같은 45° 사선. 띠는 6px 로 얇게, 모서리는 각지게(입력창 규칙과 맞춤). */
#Popup .cnt_bx {
	border: 1px solid var(--lapl-green) !important;
	border-radius: 0 !important;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .18) !important;
	padding-top: 26px !important;
	position: relative;
}
#Popup .cnt_bx::before {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 6px;
	background: linear-gradient(135deg, var(--lapl-green) 0%, var(--lapl-green) 48%, var(--lapl-green-2) 48%, var(--lapl-green-2) 100%);
	pointer-events: none;
}
#Popup .btn_close { top: 14px; }

/* 계약등록 등 팝업 폼 — 왼쪽 제목 칸은 볼드 (사용자 지시 2026-09-18) */
#frmPop table.table.text-left tr > td:first-child,
#frmPopup table.table.text-left tr > td:first-child,
#Popup table.table.text-left tr > td:first-child { font-weight: 700; white-space: nowrap; }
/* 앱에서 계약등록을 페이지로 열면 800px 고정폭이 휴대폰을 넘는다 — 폭을 푼다 */
@media (max-width: 767px) { main#contents[style*="width"] { width: auto !important; } }

/* 계약등록 제목 — 축하 아이콘 + 이름 (사용자 지시 2026-09-18) */
.cf-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cf-head__ico { width: 26px; height: 26px; stroke: var(--orange-deep); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.cf-head__bar { color: #c5c5cc; font-weight: 400; margin: 0 2px; }
.cf-head__who { font-size: 15px; font-weight: 500; color: #555; }
.cf-head__who::before { content: ""; }

/* 상담내역 삭제 버튼 — [등록] 버튼과 같은 크기, 줄의 첫 줄(등록일 줄)에 맞춰 위로 (사용자 지시 2026-09-18).
   앞의 vertical-align 은 .table.type--1 td 규칙(특이성 높음)에 밀려 안 먹었다 — !important 로 못 박는다. */
.board-btn.xs { height: 28px; padding: 0 12px; font-size: var(--fs-xs); line-height: 26px; border-radius: 6px; }
table.table td.log-act, table.table td.log-date { vertical-align: top !important; padding-top: 8px !important; }

/* 상담등록 — 분홍(CSR)·파랑(PM)·메모, 세 상자로 뗀다 (사용자 지시 2026-09-18).
   붙어 있으면 한 덩어리로 읽혀 어느 자리가 무엇을 적는지 헷갈린다. */
.role-block--csr { margin-bottom: 12px !important; }
.role-block--pm  { margin-bottom: 12px !important; }
#content, textarea#content {
	display: block; box-sizing: border-box; width: 100%; min-height: 110px;
	padding: 12px 14px; border: 1px solid #DCDDE3; border-radius: 0 !important;
	background: var(--tone-zone-c, #F7F7F9); font-size: 13.5px; line-height: 1.6;
	margin: 0 0 10px !important;
}
#content:focus { background: #fff; border-color: var(--lapl-green); outline: none; }

/* 대시보드 인사 — 이름 옆 알림 숫자 배지 (사용자 지시 2026-09-18) */
.dash-hello__badge { display: inline-block; vertical-align: 3px; margin-left: 6px; min-width: 20px; height: 20px; padding: 0 6px;
	border-radius: 999px; background: var(--orange-deep); color: #fff; font-size: 12px; font-weight: 700; line-height: 20px;
	text-align: center; text-decoration: none; }
.dash-hello__badge:hover { background: var(--lapl-orange, #5E6475); color: #fff; text-decoration: none; }

/* PM 현황 — 계약금액 합계 30만원 이하 줄은 회색 바탕 (사용자 지시 2026-09-18) */
#pmStatTable tbody tr.pm-low > td { background: #EFEFF2; color: #6b6b73; }
#pmStatTable tbody tr.pm-low > td a { color: #6b6b73; }
#pmStatTable tbody tr.pm-low:hover > td { background: #E7E7EB; }

/* 회색 줄 조금 더 연하게 (사용자 지시 2026-09-18) */
#pmStatTable tbody tr.pm-low > td { background: #F6F6F8; color: #8a8a92; }
#pmStatTable tbody tr.pm-low > td a { color: #8a8a92; }
#pmStatTable tbody tr.pm-low:hover > td { background: #F0F0F3; }

/* 상단바 [퇴근] 옆 시각(07:56)은 뺀다 (사용자 지시 2026-09-18) — 출근 여부는 버튼 상태로 충분하고, 시각은 총무현황·출퇴근 기록에 있다 */
.hdr-punch__stamp { display: none !important; }

/* 오늘의 지점 일정 (사용자 지시 2026-09-18) — 한 줄에 시간 · PM · 고객 · 장소 */
.ds-card { padding: 6px 18px 10px; }
.ds-list { list-style: none; margin: 0; padding: 0; }
.ds-row { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; border-top: 1px solid #f0f0f3; font-size: 13.5px; }
.ds-row:first-child { border-top: 0; }
.ds-time { flex: 0 0 44px; font-weight: 700; font-variant-numeric: tabular-nums; color: #333; }
.ds-pm { flex: 0 0 120px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-pm small { font-weight: 400; color: #999; margin-left: 4px; }
.ds-cust { flex: 0 0 80px; color: var(--text, #17213A); text-decoration: none; font-weight: 600; }
.ds-cust:hover { color: var(--orange-deep); text-decoration: underline; }
.ds-place { flex: 1 1 auto; min-width: 0; color: #666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-tag { flex: 0 0 auto; font-size: 11px; color: var(--orange-deep); font-weight: 700; }
.ds-row.is-done .ds-time, .ds-row.is-done .ds-cust { color: var(--orange-deep); }
.ds-empty { margin: 12px 0; color: #999; font-size: 13.5px; }
.ds-more { display: inline-block; margin-top: 8px; font-size: 12.5px; color: #888; text-decoration: none; }
.ds-more:hover { color: var(--orange-deep); }
@media (max-width: 767px) {
	.ds-row { flex-wrap: wrap; gap: 4px 10px; }
	.ds-pm { flex: 0 0 auto; } .ds-cust { flex: 0 0 auto; } .ds-place { flex: 1 1 100%; white-space: normal; }
}

/* PM별 현황 카드 (사용자 지시 2026-09-18) — 이름 / 계약건수 / 금액 */
.pl-card { padding: 8px 18px 12px; }
.pl-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pl-table th { font-size: 12px; font-weight: 600; color: #888; padding: 6px 4px; border-bottom: 1px solid #e8e8ec; text-align: right; }
.pl-table td { padding: 8px 4px; border-top: 1px solid #f0f0f3; text-align: right; font-variant-numeric: tabular-nums; }
.pl-table tbody tr:first-child td { border-top: 0; }
.pl-table .l { text-align: left; }
.pl-table td.l a { color: var(--text, #17213A); text-decoration: none; font-weight: 600; }
.pl-table td.l a:hover { color: var(--orange-deep); text-decoration: underline; }
.pl-table .pl-amt { font-weight: 700; color: var(--orange-deep); }
.pl-table tr.is-zero td { color: #aaa; } .pl-table tr.is-zero td.l a { color: #999; font-weight: 500; }
.pl-table tfoot td { border-top: 2px solid #e8e8ec; font-weight: 700; }

/* 오늘의 지점 일정 — 시간·이름만 (사용자 지시 2026-09-18) */
.ds-pm--link { text-decoration: none; color: var(--text, #17213A); flex: 1 1 auto; }
.ds-pm--link:hover { color: var(--orange-deep); text-decoration: underline; }
.ds-row.is-done .ds-pm--link { color: var(--orange-deep); }

/* 상단바 '접속중ㅣ출근' — 출퇴근 상태는 작게 (사용자 지시 2026-09-18) */
.connection-status .conn-att { font-style: normal; font-size: 11px; font-weight: 500; opacity: .85; margin-left: 1px; }
/* 출근은 오렌지, 퇴근은 회색 (사용자 지시 2026-09-18) */
.connection-status .conn-att--in  { color: #FFB68F; }
.connection-status .conn-att--out { color: #C9CDD6; }

/* 상단바 [퇴근] 버튼 — 출근 뒤 퇴근 전에만 보인다 (사용자 지시 2026-09-19: 퇴근할 때만 누른다). 출근은 자동. */
.hdr-punch[hidden] { display: none !important; }

/* 상단바 이름·IP·접속중ㅣ출근 은 한 줄 (사용자 지시 2026-09-18) */
.logged-user-info { white-space: nowrap; }
.logged-user-name { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

/* 이름 · IP · 접속중ㅣ출근 을 한 줄로 (사용자 지시 2026-09-18) — 250px 상한이 둘째 줄을 만들고 있었다.
   출근/퇴근 글자는 '접속중' 과 같은 크기·굵기, 색만 다르다. */
.logged-user-info { max-width: none !important; flex-wrap: nowrap !important; white-space: nowrap !important; }
.logged-user-name { display: inline-flex !important; align-items: center; gap: 6px; white-space: nowrap !important; }
.connection-status { white-space: nowrap; }
.connection-status .conn-att { font-size: inherit !important; font-weight: 700 !important; opacity: 1; margin-left: 0; }
/* 접속중ㅣ출근 — 가운데 막대는 회색 (사용자 지시 2026-09-18) */
.connection-status .conn-bar { font-style: normal; font-weight: 400; color: #C9CDD6; }

/* 앱 첫 화면 상단은 '인슈라넷 로고 페이지' 처럼 (사용자 지시 2026-09-18) —
   흰 바탕에 INSURANET 로고 하나 크게 가운데, 초록·사선·라플 마크 없이. 앱 세션(.header--app)에서만 */
.header--app { background-color: #fff !important; background-image: none !important; border-bottom: 1px solid #ececef !important; height: 72px !important; }
.header--app::before, .header--app::after { display: none !important; }
.header--app .header-wrap { height: 72px !important; }
.header--app .logo__insuranet { height: 34px !important; filter: none !important; }
.header--app .logo__lapl, .header--app .logo__divider { display: none !important; }
.header--app .nav__bg, .header--app .nav-mobile__btn { display: none !important; }

/* ── 로그인 카드 상단 띠 — 상단바와 같은 초록 투톤에 INSURANET ㅣ LAPL (사용자 지시 2026-09-18) ── */
.signin-wrap { --sw-pt: 36px; --sw-px: 34px; padding-top: var(--sw-pt); padding-left: var(--sw-px); padding-right: var(--sw-px); overflow: hidden; }
@media (max-width: 767px) { .signin-wrap { --sw-pt: 28px; --sw-px: 22px; } }
.signin-wrap .info-bx.signin-band {
	position: relative;
	display: flex; align-items: center; justify-content: center; gap: 10px;
	height: 64px;
	margin: calc(-1 * var(--sw-pt)) calc(-1 * var(--sw-px)) 4px;
	background-color: var(--lapl-green);
	--band-split: 62%;
}
/* 밝은 초록은 상단바와 같은 45° 사선 */
.signin-wrap .info-bx.signin-band::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: var(--lapl-green-2);
	clip-path: polygon(var(--band-split) 0, 100% 0, 100% 100%, calc(var(--band-split) - 64px) 100%);
}
.signin-wrap .info-bx.signin-band img { position: relative; z-index: 1; margin: 0; }
.signin-wrap .info-bx.signin-band .logo__insuranet { height: 26px; }
.signin-wrap .info-bx.signin-band .logo__lapl { height: 34px; }
.signin-wrap .info-bx.signin-band .logo__divider { position: relative; z-index: 1; }

/* 앱·모바일 로고 윗부분이 잘리던 것 (라플앱 세션 보고 2026-09-18, 아이폰 사파리) — 레거시 .header-wrap .logo 가
   absolute 정렬용으로 준 transform: translateY(-50%) 가 static 으로 바꾼 뒤에도 남아 로고를 제 높이의 절반만큼 위로 밀었다 */
.header--app .logo { transform: none !important; top: auto !important; }
@media (max-width: 767px) { .header .logo { transform: none !important; top: auto !important; } }

/* 앱 헤더 왼쪽 '‹ 라플' — 앱 웹뷰에서 MY라플로 돌아가는 문 (라플앱 세션 요청 2026-09-18). 로고 가운데 정렬은 그대로 */
.hdr-back-lapl { display: none; }
.header--app .hdr-back-lapl {
	display: inline-flex; align-items: center; gap: 2px;
	position: absolute; left: 12px; top: 50%; transform: translateY(-50%); z-index: 2;
	padding: 6px 10px 6px 6px; border-radius: 999px;
	font-size: 13px; font-weight: 600; color: var(--lapl-green); text-decoration: none; background: #F2F3F7;
}
.header--app .hdr-back-lapl i { font-style: normal; font-size: 20px; line-height: 1; margin-top: -2px; }
.header--app .hdr-back-lapl:active { background: #E3E5EE; }

/* PM현황 최근접속의 휴대폰 표시 — 출근이 아니라 기록만인 접속 (사용자 지시 2026-09-18) */
.pm-seen__m { display: inline-block; margin-left: 4px; padding: 0 4px; border: 1px solid currentColor; border-radius: 3px; font-size: 9px; font-style: normal; font-weight: 600; line-height: 14px; vertical-align: 1px; opacity: .8; }

/* 앱·모바일 상단도 로그인 띠처럼 — 초록 투톤 사선에 INSURANET ㅣ LAPL 가운데 (사용자 지시 2026-09-18 밤).
   앞서 흰 바탕에 INSURANET 만 두던 규칙을 여기서 되돌린다 */
.header--app { --header-h: 72px; background-color: var(--lapl-green) !important; border-bottom: 0 !important; height: 72px !important; }
.header--app::after { display: block !important; }
.header--app .logo__insuranet { height: 26px !important; filter: brightness(0) invert(1) !important; }
.header--app .logo__lapl { display: block !important; height: 34px !important; }
.header--app .logo__divider { display: block !important; }
.header--app .hdr-back-lapl { color: #fff; background: rgba(255,255,255,.18); }
@media (max-width: 767px) {
	.header .logo__insuranet { height: 26px !important; }
	.header .logo__lapl { display: block !important; height: 34px !important; }
	.header .logo__divider { display: block !important; }
}

/* ── 고객등록 휴대폰 최적화 (사용자 지시 2026-09-18: "고객등록도 계약등록처럼") ──
   767px 이하에서 표를 세로로 푼다: 제목 칸은 작은 이름표, 입력칸은 화면 폭 가득. 제목·칸 아이콘은 .cf-ico 공용 */
.cust-form > tbody > tr > th .cf-ico { margin-bottom: -3px; }
@media (max-width: 767px) {
	.cust-form, .cust-form > tbody, .cust-form > tbody > tr, .cust-form > tbody > tr > th, .cust-form > tbody > tr > td { display: block; width: 100% !important; box-sizing: border-box; }
	.cust-form > colgroup { display: none; }
	.cust-form { border-top: 0 !important; }
	.cust-form > tbody > tr { padding: 10px 0 12px; border-top: 1px solid var(--border); }
	.cust-form > tbody > tr:first-child { border-top: 0; }
	.cust-form > tbody > tr > th { padding: 0 0 6px !important; border: 0 !important; background: transparent !important; text-align: left; font-size: 12.5px; font-weight: 700; }
	.cust-form > tbody > tr > td { padding: 0 !important; border: 0 !important; }
	.cust-form td input[type="text"], .cust-form td input[type="tel"], .cust-form td select { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
	.cust-form td #c_gu { margin-top: 6px; }
	.cust-form td .d-flex { flex-wrap: wrap; gap: 4px 0; }
	.cust-form td label { margin-right: 10px; }
	.cust-form .child-item { flex-wrap: wrap; gap: 6px; }
	.cust-form .child-item input { flex: 1 1 45%; width: auto !important; max-width: none !important; margin: 0 !important; }
	.cust-form .child-item .btn-child-remove { margin-left: auto; }
	.cust-form #file-table { width: 100% !important; }
	.cust-form ~ .btn-bx { display: flex; gap: 8px; }
	.cust-form ~ .btn-bx .board-btn { flex: 1 1 0; text-align: center; margin: 0 !important; }
	.cf-head.page-title--2 { gap: 6px; }
}

/* 고객등록 — 표 상자 없이, 작성칸만 흰색·나머지는 회색 바탕 (사용자 지시 2026-09-18 밤). PC·휴대폰 모두 */
main#contents:has(.cust-form) { background: #EFF0F2; }
.cust-form.table.type--1 { border: 0 !important; border-radius: 0 !important; background: transparent !important; overflow: visible; }
.cust-form.table.type--1 > tbody > tr > th,
.cust-form.table.type--1 > tbody > tr > td { border: 0 !important; background: transparent !important; }
.cust-form.table.type--1 > tbody > tr > th { color: var(--text-2); font-weight: 700; }
.cust-form.table.type--1 > tbody > tr { border-top: 0 !important; }
.cust-form td input[type="text"], .cust-form td input[type="tel"], .cust-form td select, .cust-form td textarea {
	background: #fff !important; border: 1px solid #DCDDE2 !important; }
.cust-form td input[type="text"]:focus, .cust-form td input[type="tel"]:focus, .cust-form td select:focus { border-color: var(--lapl-green) !important; }
.cust-form #file-table { background: #fff; }
.cust-form ~ .btn-bx { padding-bottom: 8px; }
@media (max-width: 767px) {
	.cust-form.table.type--1 > tbody > tr { padding: 8px 0 10px; }
	.cust-form.table.type--1 > tbody > tr > th { font-size: 12.5px; }
}

/* 고객등록 휴대폰 — 필수 여섯 줄만, 이 순서로 (사용자 지시 2026-09-18): 이름 · 연락처 · 성별 · 지역 · 신청경로 · 참고사항.
   나머지 줄은 숨기되 폼에는 남아 있어 값(PM 배정 기본값 등)은 그대로 저장된다. PC 는 전부 보인다 */
@media (max-width: 767px) {
	.cust-form > tbody { display: flex; flex-direction: column; }
	.cust-form > tbody > tr:not(.m-keep) { display: none !important; }
	.cust-form > tbody > tr.m-1 { order: 1; } .cust-form > tbody > tr.m-2 { order: 2; } .cust-form > tbody > tr.m-3 { order: 3; }
	.cust-form > tbody > tr.m-4 { order: 4; } .cust-form > tbody > tr.m-5 { order: 5; } .cust-form > tbody > tr.m-6 { order: 6; }
	.cust-form > tbody > tr.m-keep { border-top: 0 !important; }
}

/* 고객등록 단계별 (휴대폰) — 아직 차례가 아닌 줄과 저장 버튼 */
@media (max-width: 767px) {
	.cust-form > tbody > tr.m-keep.m-hide, .cust-form ~ .btn-bx.m-hide { display: none !important; }
}
/* 휴대폰·앱에서는 라플챗봇을 뺀다 (사용자 지시 2026-09-18) — 작은 화면에서 입력칸을 가린다 */
@media (max-width: 767px) { .askbox-dock, .askbox { display: none !important; } }
.header--app ~ * .askbox-dock, .header--app ~ .askbox-dock, .header--app ~ * .askbox { display: none !important; }

/* ── 고객등록 휴대폰 — 애플(iOS) 스타일 (사용자 지시 2026-09-18 밤: "애플 디자인") ──
   iOS 설정 화면의 '인셋 그룹' 문법: 연회색 바탕(#F2F2F7) 위에 흰 둥근 카드 한 줄씩, 작은 회색 라벨,
   테두리 없는 17px 입력, 초록 큰 버튼. 시스템 글꼴(-apple-system)로 아이폰에서 그대로 iOS 처럼 읽힌다. */
@media (max-width: 767px) {
	main#contents:has(.cust-form) { background: #F2F2F7; font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Malgun Gothic", sans-serif; }
	main#contents:has(.cust-form) .admin-content__head { padding: 6px 0 10px; }
	main#contents:has(.cust-form) .page-title--2 { font-size: 28px; font-weight: 700; letter-spacing: -.4px; color: #000; }
	main#contents:has(.cust-form) .page-title--2 .cf-head__ico { width: 28px; height: 28px; }
	main#contents:has(.cust-form) .breadcrumb, main#contents:has(.cust-form) .admin-content__head nav { display: none !important; }
	.cust-form > tbody { gap: 12px; }
	.cust-form > tbody > tr.m-keep { background: #fff; border-radius: 12px; padding: 10px 16px 12px !important; box-shadow: 0 1px 0 rgba(0,0,0,.03); }
	.cust-form > tbody > tr > th { padding: 0 0 4px !important; font-size: 13px !important; font-weight: 600 !important; color: #6E6E73 !important; letter-spacing: -.1px; }
	.cust-form > tbody > tr > th .cf-ico { width: 15px; height: 15px; margin-right: 5px; }
	.cust-form td input[type="text"], .cust-form td input[type="tel"], .cust-form td select {
		border: 0 !important; background: transparent !important; box-shadow: none !important;
		height: 40px !important; padding: 0 !important; font-size: 17px !important; color: #000; letter-spacing: -.2px; }
	.cust-form td input::placeholder { color: #C7C7CC; }
	.cust-form td select { -webkit-appearance: none; appearance: none;
		background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C7C7CC' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right center !important; }
	.cust-form td #c_gu { margin-top: 0; border-top: 1px solid #E5E5EA !important; border-radius: 0 !important; }
	/* 성별 — 세그먼트 컨트롤 */
	.cust-form tr.m-3 td { display: flex !important; gap: 0; background: #EEEEF0; border-radius: 9px; padding: 2px !important; margin-top: 4px; }
	.cust-form tr.m-3 td input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
	.cust-form tr.m-3 td label { flex: 1 1 0; margin: 0 !important; height: 34px; line-height: 34px; text-align: center; font-size: 15px; font-weight: 500; color: #000; border-radius: 7px; }
	.cust-form tr.m-3 td input[type="radio"]:checked + label { background: #fff; color: var(--lapl-green); font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
	/* 참고사항은 여러 줄처럼 넉넉히 */
	.cust-form tr.m-6 td input[type="text"] { height: 44px !important; }
	/* 버튼 — iOS 큰 버튼 */
	.cust-form ~ .btn-bx { flex-direction: column; gap: 10px; margin-top: 18px !important; }
	.cust-form ~ .btn-bx .board-btn { height: 50px; line-height: 50px; font-size: 17px; font-weight: 600; border-radius: 12px; }
	.cust-form ~ .btn-bx .board-btn.type--1 { background: var(--lapl-green) !important; border-color: var(--lapl-green) !important; color: #fff !important; }
	.cust-form ~ .btn-bx .board-btn.type--2 { background: transparent !important; border: 0 !important; color: var(--lapl-green) !important; height: 40px; line-height: 40px; }
}

/* 앱·휴대폰 상단 — 흰 바탕에 원래 검은 INSURANET 로고 하나, 가운데 (사용자 지시 2026-09-18 밤: "상단 로고부터 교체").
   조금 전의 초록 투톤(로그인창처럼)을 되돌린다. LAPL 마크는 흰색 그림이라 흰 바탕에선 안 보여 뺀다 */
.header--app { background-color: #fff !important; background-image: none !important; border-bottom: 1px solid #ececef !important; }
.header--app::after, .header--app::before { display: none !important; }
.header--app .logo__insuranet { height: 30px !important; filter: none !important; }
.header--app .logo__lapl, .header--app .logo__divider { display: none !important; }
.header--app .hdr-back-lapl { color: var(--lapl-green); background: #F2F3F7; }
@media (max-width: 767px) {
	.header { background-color: #fff !important; background-image: none !important; border-bottom: 1px solid #ececef !important; }
	.header::after, .header::before { display: none !important; }
	.header .logo__insuranet { height: 30px !important; filter: none !important; }
	.header .logo__lapl, .header .logo__divider { display: none !important; }
	.header .nav-mobile__btn { color: #333 !important; }
}

/* 앱·휴대폰 상단 — 바탕은 초록 투톤 그대로, 로고는 흰 상자 안에 원래 검은 INSURANET (사용자 지시 2026-09-18 밤: "바탕은 초록").
   바로 위의 흰 헤더 규칙을 되돌리고, 로고만 흰 배지로 얹는다 */
.header--app { background-color: var(--lapl-green) !important; border-bottom: 0 !important; }
.header--app::after { display: block !important; }
.header--app .logo { background: #fff; padding: 7px 14px; border-radius: 8px; height: auto !important; }
.header--app .logo__insuranet { height: 24px !important; filter: none !important; }
.header--app .hdr-back-lapl { color: #fff; background: rgba(255,255,255,.18); }
@media (max-width: 767px) {
	.header { background-color: var(--lapl-green) !important; border-bottom: 0 !important; }
	.header::after { display: block !important; }
	.header .logo { background: #fff; padding: 7px 14px; border-radius: 8px; height: auto !important; }
	.header .logo__insuranet { height: 24px !important; filter: none !important; }
	.header .nav-mobile__btn { color: #fff !important; }
}

/* 앱·휴대폰 상단 — 흰 바탕, 원래 검은 INSURANET 로고만 (사용자 지시 2026-09-18 밤). 초록 배지 규칙을 되돌린다.
   ("아니 바탕은 초록" 은 홈 화면 아이콘 얘기 — 아이콘은 초록 LAPL 그대로) */
.header--app { background-color: #fff !important; background-image: none !important; border-bottom: 1px solid #ececef !important; }
.header--app::after, .header--app::before { display: none !important; }
.header--app .logo { background: transparent; padding: 0; border-radius: 0; }
.header--app .logo__insuranet { height: 30px !important; filter: none !important; }
.header--app .hdr-back-lapl { color: var(--lapl-green); background: #F2F3F7; }
@media (max-width: 767px) {
	.header { background-color: #fff !important; background-image: none !important; border-bottom: 1px solid #ececef !important; }
	.header::after, .header::before { display: none !important; }
	.header .logo { background: transparent; padding: 0; border-radius: 0; }
	.header .logo__insuranet { height: 30px !important; filter: none !important; }
	.header .nav-mobile__btn { color: #333 !important; }
}

/* 로그인(초기화면) — 상단 띠 없이 검은 INSURANET 로고만 (사용자 지시 2026-09-18 밤: "초기화면도 상단 배경없이 로고만") */
.signin-wrap .info-bx.signin-band { background: transparent; height: auto; margin: 0 0 4px; padding: 4px 0 2px; }
.signin-wrap .info-bx.signin-band::after { display: none; }
.signin-wrap .info-bx.signin-band .logo__insuranet { height: 30px; filter: none; }
.signin-wrap .info-bx.signin-band .logo__lapl, .signin-wrap .info-bx.signin-band .logo__divider { display: none; }

/* 휴대폰 고객등록 — 한 번에, 깔끔하게 (사용자 지시 2026-09-18 밤): 흰 카드 하나에 여섯 줄, 줄 사이 실선, 아이콘 없음 */
@media (max-width: 767px) {
	main#contents:has(.cust-form) .page-title--2 { font-size: 22px; }
	main#contents:has(.cust-form) .page-title--2 .cf-head__ico { display: none; }
	.cust-form > tbody { gap: 0; background: #fff; border-radius: 12px; padding: 2px 16px; }
	.cust-form > tbody > tr.m-keep { background: transparent; border-radius: 0; box-shadow: none; padding: 10px 0 12px !important; border-top: 1px solid #E5E5EA !important; }
	.cust-form > tbody > tr.m-keep.m-1 { border-top: 0 !important; }
	.cust-form > tbody > tr > th .cf-ico { display: none; }
	.cust-form ~ .btn-bx { margin-top: 16px !important; }
}

/* ── 휴대폰 고객등록 — 네이버 회원가입 스타일 (사용자가 보낸 그림 2026-09-18 밤) ──
   연회색 바탕, 카드 없이 굵은 라벨 + 큼직한 흰 네모 입력칸(테두리 1px·모서리 각), 성별은 네모 안에 라디오,
   지역은 두 칸 나란히, 저장은 초록 큰 네모 버튼. 앞의 iOS 카드 규칙을 덮는다 */
@media (max-width: 767px) {
	main#contents:has(.cust-form) { background: #F5F6F7; }
	main#contents:has(.cust-form) .page-title--2 { font-size: 20px; text-align: center; justify-content: center; margin-bottom: 6px; }
	.cust-form > tbody { background: transparent; border-radius: 0; padding: 0; gap: 0; }
	.cust-form > tbody > tr.m-keep { background: transparent; border: 0 !important; border-radius: 0; box-shadow: none; padding: 0 0 14px !important; }
	.cust-form > tbody > tr > th { padding: 0 0 8px !important; font-size: 16px !important; font-weight: 700 !important; color: #111 !important; }
	.cust-form td input[type="text"], .cust-form td input[type="tel"], .cust-form td select {
		display: block; width: 100% !important; height: 52px !important; padding: 0 14px !important;
		background: #fff !important; border: 1px solid #DADADA !important; border-radius: 0 !important; box-shadow: none !important;
		font-size: 16px !important; color: #111; }
	.cust-form td input::placeholder { color: #A0A0A0; }
	.cust-form td input:focus, .cust-form td select:focus { border-color: var(--lapl-green) !important; outline: 0; }
	.cust-form td select { background-position: right 14px center !important; padding-right: 36px !important; }
	/* 지역 — 시/도 · 시/군/구 나란히 (네이버 생년월일 칸처럼) */
	.cust-form tr.m-4 td { display: flex !important; gap: 8px; }
	.cust-form tr.m-4 td select { flex: 1 1 0; width: auto !important; }
	.cust-form td #c_gu { margin-top: 0; border-top: 1px solid #DADADA !important; }
	/* 성별 — 네모 안에 라디오 나란히 */
	.cust-form tr.m-3 td { display: flex !important; align-items: center; gap: 18px; height: 52px; padding: 0 14px !important; margin: 0;
		background: #fff; border: 1px solid #DADADA; border-radius: 0; }
	.cust-form tr.m-3 td input[type="radio"] { position: static; opacity: 1; width: 18px; height: 18px; margin: 0 6px 0 0; accent-color: var(--lapl-green); }
	.cust-form tr.m-3 td label { flex: 0 0 auto; height: auto; line-height: 1; margin: 0 !important; padding: 0; font-size: 16px; font-weight: 400; color: #111; background: transparent !important; box-shadow: none !important; border-radius: 0; text-align: left; }
	.cust-form tr.m-3 td input[type="radio"]:checked + label { background: transparent; color: #111; font-weight: 400; box-shadow: none; }
	/* 저장 — 초록 큰 네모, 취소는 아래 글자 */
	.cust-form ~ .btn-bx { margin-top: 6px !important; gap: 6px; }
	.cust-form ~ .btn-bx .board-btn { height: 52px; line-height: 52px; font-size: 17px; font-weight: 700; border-radius: 0 !important; }
	.cust-form ~ .btn-bx .board-btn.type--2 { height: 40px; line-height: 40px; font-weight: 500; color: #666 !important; }
}

/* 휴대폰 고객등록 라벨 앞 아이콘 다시 (사용자 지시 2026-09-18 밤: "각 아이콘 넣어서") — 네이버식 굵은 라벨 앞에 오렌지 선 아이콘 */
@media (max-width: 767px) {
	.cust-form > tbody > tr > th .cf-ico { display: inline-block; width: 18px; height: 18px; margin: 0 6px -3px 0; }
	main#contents:has(.cust-form) .page-title--2 .cf-head__ico { display: inline-block; width: 24px; height: 24px; }
}

/* ── 휴대폰 고객등록 — 대시보드 카드 느낌 (사용자 지시 2026-09-19: "대시보드 페이지 느낌으로, 회색바탕에 신청폼 라운드") ──
   대시보드와 같은 연회색 바탕 위에 흰 둥근 카드(12px, 1px 테두리) 하나. 제목은 카드 머리(대시보드 card__title 과 같은 크기),
   입력칸은 사이트 규칙대로 각지게, 성별은 초록 칩. 앞의 네이버식·iOS식 규칙을 덮는다 */
@media (max-width: 767px) {
	main#contents:has(.cust-form) { background: var(--ivory); font-family: inherit; }
	main#contents:has(.cust-form) .admin-content { padding-top: 14px; }
	main#contents:has(.cust-form) .admin-content .container { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 18px 16px 16px !important; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
	main#contents:has(.cust-form) .admin-content__head { padding: 0 0 12px; margin: 0 0 14px; border-bottom: 1px solid var(--divider); }
	main#contents:has(.cust-form) .page-title--2 { font-size: 15px; font-weight: 700; text-align: left; justify-content: flex-start; margin: 0; gap: 6px; color: var(--text); }
	main#contents:has(.cust-form) .page-title--2 .cf-head__ico { width: 18px; height: 18px; }
	.cust-form > tbody { padding: 0; }
	.cust-form > tbody > tr.m-keep { padding: 0 0 14px !important; }
	.cust-form > tbody > tr > th { padding: 0 0 6px !important; font-size: 13px !important; font-weight: 700 !important; color: var(--text-2) !important; }
	.cust-form > tbody > tr > th .cf-ico { width: 15px; height: 15px; margin: 0 5px -3px 0; }
	.cust-form td input[type="text"], .cust-form td input[type="tel"], .cust-form td select {
		height: 44px !important; padding: 0 12px !important; font-size: 15px !important;
		background: #fff !important; border: 1px solid var(--border) !important; border-radius: 0 !important; }
	.cust-form td input::placeholder { color: #B5B5BC; }
	.cust-form td input:focus, .cust-form td select:focus { border-color: var(--lapl-green) !important; }
	/* 성별 — 초록 칩. 레거시의 그림 라디오(::before)와 진짜 라디오는 숨긴다 */
	.cust-form tr.m-3 td { display: flex !important; gap: 8px; height: auto; padding: 0 !important; background: transparent; border: 0; }
	.cust-form tr.m-3 td input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
	.cust-form tr.m-3 td label { flex: 1 1 0; display: flex; align-items: center; justify-content: center; height: 44px; margin: 0 !important; padding: 0;
		font-size: 15px !important; font-weight: 500; color: var(--text-2); background: #fff !important; border: 1px solid var(--border); border-radius: 0; }
	.cust-form tr.m-3 td label::before, .cust-form tr.m-3 td label::after { display: none !important; content: none !important; }
	.cust-form tr.m-3 td input[type="radio"]:checked + label { background: var(--lapl-green) !important; border-color: var(--lapl-green); color: #fff !important; font-weight: 700; }
	/* 지역 두 칸 */
	.cust-form tr.m-4 td { gap: 8px; }
	.cust-form td #c_gu { border-top: 1px solid var(--border) !important; }
	/* 버튼 — 대시보드 버튼과 같은 둥근 모서리 */
	.cust-form ~ .btn-bx { margin-top: 4px !important; gap: 8px; }
	.cust-form ~ .btn-bx .board-btn { height: 46px; line-height: 46px; font-size: 15px; font-weight: 700; border-radius: 10px !important; }
	.cust-form ~ .btn-bx .board-btn.type--1 { background: var(--lapl-green) !important; border-color: var(--lapl-green) !important; color: #fff !important; }
	.cust-form ~ .btn-bx .board-btn.type--2 { height: 40px; line-height: 40px; background: transparent !important; border: 0 !important; color: var(--muted) !important; font-weight: 500; }
}

/* 휴대폰 고객등록 마무리 (2026-09-19) — 줄이 12px 밀려 오른쪽이 잘리던 것(지역 둘째 칸·성별 '여자')을 바로잡고,
   참고사항 칸은 한 줄짜리라 낮게. 글꼴은 PC 와 같은 Pretendard 를 그대로 쓴다 */
@media (max-width: 767px) {
	.cust-form > tbody > tr.m-keep { width: auto !important; align-self: stretch; margin: 0 !important; }
	.cust-form > tbody > tr > th, .cust-form > tbody > tr > td { width: auto !important; margin: 0 !important; }
	.cust-form tr.m-6 td input[type="text"] { height: 40px !important; font-size: 14px !important; }
}

/* 휴대폰 고객등록 — 옆 탭(일정 등 앱 화면)과 같은 글자·모양 (사용자 지시 2026-09-19).
   앱 화면(include/app_shell.php) 기준: 제목 17px/700, 라벨 13px 회색, 입력 15px·테두리 #e3e3e8·라운드 10px, 바탕 #F6F6F8 */
@media (max-width: 767px) {
	main#contents:has(.cust-form) { background: #F6F6F8; }
	main#contents:has(.cust-form) .admin-content .container { border-color: #ececef; border-radius: 12px; }
	main#contents:has(.cust-form) .page-title--2 { font-size: 17px; font-weight: 700; color: #1d1d1f; }
	.cust-form > tbody > tr > th { font-size: 13px !important; font-weight: 600 !important; color: #888 !important; }
	.cust-form td input[type="text"], .cust-form td input[type="tel"], .cust-form td select {
		height: auto !important; padding: 10px 12px !important; border: 1px solid #e3e3e8 !important; border-radius: 10px !important;
		font-size: 15px !important; font-family: inherit; }
	.cust-form td #c_gu { border-top: 1px solid #e3e3e8 !important; }
	.cust-form tr.m-6 td input[type="text"] { font-size: 15px !important; padding: 9px 12px !important; }
	/* 성별 칩도 같은 테두리·라운드 */
	.cust-form tr.m-3 td label { height: 42px; border: 1px solid #e3e3e8; border-radius: 10px; font-size: 15px !important; font-weight: 600; color: #444; }
	.cust-form tr.m-3 td input[type="radio"]:checked + label { background: var(--lapl-green) !important; border-color: var(--lapl-green); color: #fff !important; }
	/* 저장 — 화면 폭 가득, 앱 화면 버튼과 같은 라운드 */
	.cust-form ~ .btn-bx .board-btn { display: block; width: 100%; height: 46px; line-height: 46px; font-size: 15px; font-weight: 700; border-radius: 10px !important; }
}

/* 저장·취소가 좁게 나오던 것 — 레거시 버튼 규칙이 폭을 잡고 있다. 화면 폭 가득 (2026-09-19) */
@media (max-width: 767px) {
	.cust-form ~ .btn-bx { display: flex !important; flex-direction: column; align-items: stretch !important; text-align: center; }
	.cust-form ~ .btn-bx .board-btn { display: block !important; width: 100% !important; min-width: 0 !important; max-width: none !important; flex: 0 0 auto !important; }
}

/* ── 휴대폰·앱 전체메뉴 (사용자 지시 2026-09-19: "인슈라넷 이용에 불편 없도록") ──
   좁은 화면에서 감춰 두던 메뉴줄(.gnb)을 상단바 단추로 펼친다. 메뉴는 lnb.php 한 곳에서만 나온다. PC 는 그대로 */
.m-menu__btn { display: none; }
.m-menu__btn span { display: block; height: 2px; border-radius: 2px; background: #333; }
@media (max-width: 767px) {
	.m-menu__btn { display: flex; flex-direction: column; justify-content: center; gap: 4px;
		position: absolute; right: 14px; top: 50%; transform: translateY(-50%); z-index: 3;
		width: 34px; height: 34px; padding: 0 6px; border: 0; background: transparent; cursor: pointer; }
}
.header--app .m-menu__btn { display: flex; flex-direction: column; justify-content: center; gap: 4px;
	position: absolute; right: 14px; top: 50%; transform: translateY(-50%); z-index: 3;
	width: 34px; height: 34px; padding: 0 6px; border: 0; background: transparent; cursor: pointer; }

.m-menu__dim { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 590; }
body.m-menu-open .m-menu__dim { display: block; }
body.m-menu-open { overflow: hidden; }
body.m-menu-open .gnb {
	display: block !important; position: fixed; left: 0; right: 0; z-index: 600;
	top: var(--m-menu-top, 72px); bottom: 0; background: #fff; overflow-y: auto; -webkit-overflow-scrolling: touch;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .12); border-top: 1px solid #ececef; }
body.m-menu-open .gnb__inner { display: block; padding: 4px 0 24px; max-width: none; }
body.m-menu-open .gnb__list, body.m-menu-open .gnb__aside { display: block; }
body.m-menu-open .gnb__item { display: block; border-bottom: 1px solid #f2f2f5; }
body.m-menu-open .gnb__link { display: flex; align-items: center; gap: 8px; height: auto; padding: 15px 20px;
	font-size: 15.5px; font-weight: 600; color: #222; white-space: normal; }
body.m-menu-open .gnb__item.is-active .gnb__link { color: var(--lapl-green); }
body.m-menu-open .gnb__link--cta { color: var(--orange-deep); }
body.m-menu-open .gnb__badge { margin-left: auto; }
.m-menu__out { display: none; }
body.m-menu-open .m-menu__out { display: block; padding: 15px 20px; margin-top: 8px; border-top: 1px solid #f2f2f5;
	font-size: 15px; color: #888; text-decoration: none; }

/* 앱·휴대폰 상단 왼쪽 로그아웃 (사용자 지시 2026-09-19) — 오른쪽 ☰ 와 짝 */
.m-out__btn { display: none; }
.m-out__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 767px) {
	.m-out__btn { display: inline-flex; align-items: center; justify-content: center;
		position: absolute; left: 14px; top: 50%; transform: translateY(-50%); z-index: 3;
		width: 34px; height: 34px; color: #666; text-decoration: none; }
}
.header--app .m-out__btn { display: inline-flex; align-items: center; justify-content: center;
	position: absolute; left: 14px; top: 50%; transform: translateY(-50%); z-index: 3;
	width: 34px; height: 34px; color: #666; text-decoration: none; }

/* 휴대폰 푸터에서 팩스는 뺀다 (사용자 지시 2026-09-19) — 좁은 화면에서 줄만 늘린다 */
@media (max-width: 767px) { .site-footer__contact li:nth-child(3) { display: none; } }

/* 공지 팝업 (사용자 지시 2026-09-19) — 로그인하면 한 번 뜬다. 상단바와 같은 초록 투톤 머리 */
.np-dim { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center;
	padding: 20px; background: rgba(17, 18, 22, .45); }
.np-box { width: 100%; max-width: 460px; background: #fff; border-radius: 14px; overflow: hidden;
	box-shadow: 0 18px 50px rgba(0, 0, 0, .25); }
.np-box__head { position: relative; overflow: hidden; padding: 18px 20px; background: var(--lapl-green); color: #fff; }
.np-box__head::after { content: ""; position: absolute; inset: 0; background: var(--lapl-green-2);
	clip-path: polygon(66% 0, 100% 0, 100% 100%, 24% 100%); }
.np-box__head > * { position: relative; z-index: 1; }
.np-box__tag { display: inline-block; margin-bottom: 6px; padding: 2px 8px; border-radius: 999px;
	background: rgba(255, 255, 255, .22); font-size: 11.5px; font-weight: 700; }
.np-box__head b { display: block; font-size: 17px; font-weight: 800; line-height: 1.45; }
.np-box__body { padding: 18px 20px; font-size: 14.5px; line-height: 1.7; color: #33343a; max-height: 46vh; overflow-y: auto; }
.np-box__act { display: flex; gap: 8px; padding: 0 20px 18px; }
.np-btn { flex: 1 1 0; height: 46px; line-height: 46px; border: 0; border-radius: 10px; text-align: center;
	font-size: 15px; font-weight: 700; cursor: pointer; text-decoration: none; }
.np-btn--go { background: var(--lapl-green); color: #fff; }
.np-btn--ghost { background: #F2F3F5; color: #55565c; }
@media (max-width: 767px) { .np-box__head b { font-size: 16px; } .np-box__body { font-size: 14px; } }
/* 공지 등록 화면의 팝업 선택 */
.nt-pop { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #55565c; cursor: pointer; }

/* 공지 팝업 — 공지사항처럼 짧게 (사용자 지시 2026-09-19) */
.np-box__sum { margin: 0; font-size: 14.5px; line-height: 1.65; color: #33343a; }
.np-box__more { margin: 8px 0 0; font-size: 12.5px; color: #8A8B91; }
.np-box__meta { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid #f0f0f3; font-size: 12px; color: #9A9BA1; }
.np-box__body { max-height: none; }

/* 새 알림 올리기 — 팝업으로 (사용자 지시 2026-09-19) */
.nt-new__open { margin-bottom: 14px; }
.nt-modal { position: fixed; inset: 0; z-index: 880; display: flex; align-items: center; justify-content: center;
	padding: 20px; background: rgba(17, 18, 22, .45); }
.nt-modal[hidden] { display: none; }
body.nt-modal-on { overflow: hidden; }
.nt-modal__box { width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; background: #fff;
	border: 1px solid var(--lapl-green); border-radius: 0; box-shadow: 0 18px 50px rgba(0, 0, 0, .25); position: relative; }
.nt-modal__box::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px;
	background: linear-gradient(135deg, var(--lapl-green) 0%, var(--lapl-green) 48%, var(--lapl-green-2) 48%, var(--lapl-green-2) 100%); }
.nt-modal__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 10px; }
.nt-modal__head b { font-size: 16px; font-weight: 800; }
.nt-modal__x { border: 0; background: none; font-size: 22px; line-height: 1; color: #9A9BA1; cursor: pointer; }
.nt-modal .nt-form { padding: 0 20px 20px; }
.nt-form__cancel { background: #F2F3F5; color: #55565c; }
@media (max-width: 767px) { .nt-modal { padding: 12px; } .nt-modal__box { max-height: 92vh; } }

/* 라플 공지사항 카드 (사용자 지시 2026-09-19) — 제목 줄 + 읽은 사람 수 */
.dn-list { list-style: none; margin: 0; padding: 0; }
.dn-item { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--divider); }
.dn-item:first-child { border-top: 0; }
.dn-item__t { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px;
	font-size: 14.5px; font-weight: 600; color: var(--text); text-decoration: none;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dn-item__t:hover { color: var(--lapl-green); }
.dn-item.is-new .dn-item__t { font-weight: 700; }
.dn-tag { flex: 0 0 auto; padding: 1px 6px; border-radius: 4px; background: rgba(37, 50, 114, .1);
	color: var(--lapl-green); font-size: 11px; font-weight: 700; font-style: normal; }
.dn-dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--orange-deep); }
.dn-item__r { flex: 0 0 auto; display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.dn-item__r b { font-size: 14px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.dn-item__r span { color: #B5B5BC; }
.dn-item__r em { font-style: normal; color: #B5B5BC; font-variant-numeric: tabular-nums; }
@media (max-width: 767px) {
	.dn-item { flex-wrap: wrap; gap: 4px 10px; }
	.dn-item__t { flex: 1 1 100%; white-space: normal; }
	.dn-item__r { font-size: 12px; }
}

/* 공지사항 카드 — 마감일 대신 '공지사항' 표시 (사용자 지시 2026-09-19) */
.nt-card__kind { display: inline-block; padding: 2px 8px; border-radius: 999px; background: rgba(37, 50, 114, .1);
	color: var(--lapl-green); font-size: 11.5px; font-weight: 700; }
.nt-card--notice .nt-card__due b { display: none; }

/* 라플 공지 게시판 (사용자 지시 2026-09-19) */
.nb-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.nb-table th { padding: 10px 8px; border-bottom: 2px solid var(--border); font-size: 12.5px; font-weight: 700; color: var(--text-2); text-align: left; }
.nb-table td { padding: 12px 8px; border-bottom: 1px solid var(--divider); vertical-align: middle; }
.nb-table .c-no { width: 56px; color: var(--muted); text-align: center; }
.nb-table .c-w { width: 110px; color: var(--text-2); }
.nb-table .c-d { width: 70px; color: var(--muted); font-variant-numeric: tabular-nums; }
.nb-table .c-r { width: 80px; text-align: right; white-space: nowrap; }
.nb-table .c-r b { font-weight: 700; } .nb-table .c-r span { color: #B5B5BC; font-size: 12px; }
.nb-table .c-t a { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-weight: 600; text-decoration: none; }
.nb-table .c-t a:hover { color: var(--lapl-green); }
.nb-table tr.is-new .c-t a { font-weight: 700; }
.nb-foot { margin: 14px 0 0; font-size: 12.5px; color: var(--muted); }
.nb-foot a { color: var(--lapl-green); font-weight: 600; }
.nb-view__t { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 19px; font-weight: 800; }
.nb-view__meta { display: flex; gap: 14px; margin: 0 0 16px; padding-bottom: 14px; border-bottom: 1px solid var(--divider); font-size: 13px; color: var(--muted); }
.nb-view__meta b { color: var(--text); }
.nb-view__body { font-size: 15px; line-height: 1.8; color: var(--text); }
.nb-view__frame { margin: 0 -24px; border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); background: #F5F6F8; }
.nb-view__frame iframe { display: block; width: 100%; height: 900px; border: 0; }
.nb-view__open { margin: 10px 0 0; font-size: 12.5px; text-align: right; }
.nb-view__open a { color: var(--muted); text-decoration: none; }
.nb-view__act { margin-top: 18px; text-align: center; }
.nt-f__hint { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); font-style: normal; }
@media (max-width: 767px) {
	.nb-table .c-w, .nb-table th:nth-child(3) { display: none; }
	.nb-table .c-no { width: 36px; }
	.nb-view__frame { margin: 0 -16px; }
	.nb-view__meta { flex-wrap: wrap; gap: 6px 12px; }
}

/* 공지사항 통합 화면 (사용자 지시 2026-09-19) — 제목줄 '공지사항 ㅣ 공지사항등록', 구분 표시 */
.nb-tabs { display: flex; align-items: center; gap: 10px; }
.nb-tabs .page-title--2 { margin: 0; }
.nb-tabs__a { color: var(--text); text-decoration: none; }
.nb-tabs__a.is-on { color: var(--text); }
.nb-tabs__bar { color: #c5c5cc; font-weight: 400; font-size: 18px; }
.nb-tabs__btn { border: 0; background: none; padding: 0; font: inherit; color: var(--lapl-green); cursor: pointer; }
.nb-tabs__btn:hover { text-decoration: underline; }
.nb-table .c-k { width: 84px; }
.nb-kind { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.nb-kind--notice { background: rgba(37, 50, 114, .1); color: var(--lapl-green); }
.nb-kind--task { background: rgba(94, 100, 117, .12); color: var(--orange-deep); }
.nb-kind--task.is-late { background: var(--orange-deep); color: #fff; }
.nb-kind--done { background: #EEF0F3; color: #8A8B91; }
.nb-table tr.is-done .c-t a { color: #9A9BA1; font-weight: 500; }
.nb-table .c-r small { display: block; font-size: 11px; color: #B5B5BC; font-weight: 500; }
.dn-tag--task { background: rgba(94, 100, 117, .12); color: var(--orange-deep); }
.dn-tag--task.is-late { background: var(--orange-deep); color: #fff; }
.nb-view__task { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 14px 16px; background: #FAFAFB; border: 1px solid var(--divider); border-radius: 10px; }
.nb-prog { margin-top: 18px; }
.nb-prog summary { cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--text-2); }
.nb-prog summary small { font-weight: 500; color: var(--muted); margin-left: 6px; }
.nb-prog table { margin-top: 10px; }
.nb-view__act { display: flex; justify-content: center; gap: 8px; }
.nt-opts { display: flex; flex-wrap: wrap; gap: 8px 18px; }
@media (max-width: 767px) { .nb-table .c-k { width: 64px; } .nb-tabs__bar { font-size: 15px; } }

/* 아래 메뉴줄(.snb)은 오른쪽으로 — 고객관리·일정관리 등 하위 메뉴가 생기면 모두 우측 정렬 (사용자 지시 2026-09-19, 전체 공통) */
.snb__inner { display: flex; justify-content: flex-end; }
.snb__list { justify-content: flex-end; margin-left: auto; }
@media (max-width: 767px) { .snb__inner { justify-content: flex-start; } .snb__list { margin-left: 0; } }

/* 읽은 사람 팝업 (사용자 지시 2026-09-19) */
.nb-readers { border: 0; background: none; padding: 0 4px; margin: 0 -4px; font: inherit; color: inherit; cursor: pointer; border-radius: 6px; }
.nb-readers:hover { background: rgba(37, 50, 114, .08); color: var(--lapl-green); }
.nb-readers b { text-decoration: underline; text-decoration-color: rgba(37, 50, 114, .35); text-underline-offset: 3px; }
.nt-modal__box--sm { max-width: 420px; }
.nb-rd { padding: 0 20px 18px; max-height: 60vh; overflow-y: auto; }
.nb-rd__wait { margin: 0; padding: 14px 0; color: var(--muted); font-size: 13.5px; }
.nb-rd__h { display: flex; align-items: center; gap: 6px; margin: 12px 0 6px; font-size: 13px; font-weight: 700; color: var(--text-2); }
.nb-rd__h b { font-size: 13px; padding: 0 7px; border-radius: 999px; background: #EEF0F3; color: #55565c; }
.nb-rd__h.is-read b { background: rgba(37, 50, 114, .12); color: var(--lapl-green); }
.nb-rd__h.is-unread b { background: rgba(94, 100, 117, .12); color: var(--orange-deep); }
.nb-rd__list { list-style: none; margin: 0; padding: 0; }
.nb-rd__list li { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; border-top: 1px solid #f2f2f5; font-size: 14px; }
.nb-rd__n { font-weight: 600; }
.nb-rd__l { font-size: 12px; color: var(--muted); }
.nb-rd__t { margin-left: auto; font-size: 12px; color: #9A9BA1; font-variant-numeric: tabular-nums; }
.nb-rd__d { font-size: 12px; color: var(--lapl-green); font-weight: 600; }

/* 아래 메뉴줄(.snb) — 알약 대신 글자 + ㅣ 구분 (사용자 지시 2026-09-19, 전체 공통). 활성은 초록 굵게 */
.snb { background: transparent; border-bottom: 0; }
.snb__inner { height: 40px; gap: 0; }
.snb__list { gap: 0; }
.snb__list li { display: flex; align-items: center; }
.snb__list li + li::before { content: "ㅣ"; color: #c5c5cc; font-size: 13px; margin: 0 8px; }
.snb__link { height: auto; padding: 4px 2px; border: 0; border-radius: 0; background: transparent;
	font-size: 14px; font-weight: 600; color: var(--text-2); }
.snb__link:hover { background: transparent; color: var(--lapl-green); }
.snb__link.active { background: transparent; border: 0; color: var(--lapl-green); font-weight: 800; }
.nb-tabs__link { color: var(--lapl-green); text-decoration: none; }
.nb-tabs__link:hover { text-decoration: underline; }
/* 업무보고 내용 보기 */
.ap-view { padding: 0 20px 20px; }
.ap-view__meta { margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--divider); font-size: 12.5px; color: var(--muted); }
.ap-view__body { white-space: pre-wrap; word-break: break-word; font-size: 14.5px; line-height: 1.75; max-height: 60vh; overflow-y: auto; }

/* 공지 본문 틀 — '확 달라진 인슈라넷' 안내장 꼴 (사용자 지시 2026-09-19) */
.nt-tpl { font-size: 15px; line-height: 1.7; }
.nt-tpl__lead { margin: 0 0 18px; color: var(--text-2); }
.nt-tpl__steps { margin: 0 0 14px; }
.nt-tpl__st { position: relative; display: flex; gap: 14px; padding: 0 0 20px; }
.nt-tpl__st::before { content: ""; position: absolute; left: 19px; top: 40px; bottom: 0; width: 2px; background: var(--divider); }
.nt-tpl__st:last-child::before { display: none; }
.nt-tpl__n { position: relative; z-index: 1; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; background: var(--lapl-green); color: #fff;
	display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; }
.nt-tpl__b b { display: block; margin: 7px 0 3px; font-size: 16px; font-weight: 800; color: var(--text); }
.nt-tpl__b p { margin: 0; font-size: 14px; color: var(--text-2); }
.nt-tpl__note { margin: 6px 0 0; padding: 14px 15px; border-radius: 12px; background: #FFF6F2; border: 1px solid #FFE0D3; font-size: 13.5px; color: #8A4A32; }
.nt-tpl__note b { color: var(--orange-deep); }
@media (max-width: 767px) { .nt-tpl { font-size: 14.5px; } .nt-tpl__b b { font-size: 15px; } }

/* 공지 상세 — 글쓴이·날짜·읽음은 오른쪽 끝, 아래에 최근 공지 (사용자 지시 2026-09-19) */
.nb-view__meta--right { justify-content: flex-end; }
.nb-recent { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--divider); }
.nb-recent__t { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--text-2); }
.nb-recent__list { list-style: none; margin: 0; padding: 0; }
.nb-recent__list li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #f2f2f5; font-size: 14px; }
.nb-recent__list li:first-child { border-top: 0; }
.nb-recent__list a { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 6px; color: var(--text); text-decoration: none; font-weight: 500;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-recent__list li.is-new a { font-weight: 700; }
.nb-recent__list a:hover { color: var(--lapl-green); }
.nb-recent__list em { flex: 0 0 auto; font-style: normal; font-size: 12px; color: #B5B5BC; font-variant-numeric: tabular-nums; }
@media (max-width: 767px) { .nb-view__meta--right { justify-content: flex-start; } }

/* 공지사항 목록 제목 크게 (사용자 지시 2026-09-19) */
.nb-table { font-size: 14.5px; }
.nb-table td { padding: 15px 8px; }
.nb-table .c-t a { font-size: 16.5px; font-weight: 700; }
.nb-table tr.is-new .c-t a { font-weight: 800; }
@media (max-width: 767px) { .nb-table .c-t a { font-size: 15.5px; } }

/* 공지 틀 — 아이콘 + "1. 제목" 한 줄 꼴, 아래 여백 정리 (사용자 지시 2026-09-19) */
.nt-tpl__st { display: flex; gap: 12px; padding: 13px 0; border-top: 1px solid var(--divider); }
.nt-tpl__st::before { display: none; }
.nt-tpl__st:first-child { border-top: 0; }
.nt-tpl__i { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; background: #F2F3F7; display: flex; align-items: center; justify-content: center; }
.nt-tpl__i svg { width: 19px; height: 19px; stroke: var(--lapl-green); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nt-tpl__b b { margin: 0 0 2px; font-size: 15.5px; font-weight: 700; }
.nt-tpl__steps { margin-bottom: 6px; }
.nt-tpl__note { margin-top: 12px; }
.nb-view__frame { margin-bottom: 0; }
.nb-view__frame iframe { height: 240px; }
.nb-view__open { margin-top: 6px; }
.nb-recent { margin-top: 18px; padding-top: 14px; }

/* [+해피박스 신청] — 일정등록 옆 (사용자 지시 2026-09-19). 켜지면 진초록 */
.board-btn.btn-hbox { background-color: var(--orange-deep) !important; border-color: var(--orange-deep) !important; }
.board-btn.btn-hbox:hover { background-color: #d9541f !important; border-color: #d9541f !important; }
.board-btn.btn-hbox.is-on { background-color: var(--lapl-green) !important; border-color: var(--lapl-green) !important; }

/* 고객등록 PC — 흰 카드 한 장에 정리 (사용자 지시 2026-09-19). 휴대폰 규칙(767px 이하)은 그대로 */
@media (min-width: 768px) {
	main#contents:has(.cust-form) { background: var(--ivory); }
	main#contents:has(.cust-form) .admin-content .container { max-width: 960px !important; background: var(--surface);
		border: 1px solid var(--border); border-radius: 14px; padding: 22px 28px 26px !important; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
	main#contents:has(.cust-form) .admin-content__head { padding: 0 0 14px; margin: 0 0 6px; border-bottom: 1px solid var(--divider); }
	main#contents:has(.cust-form) .page-title--2 { font-size: 17px; }
	.cust-form.table.type--1 > tbody > tr > th, .cust-form.table.type--1 > tbody > tr > td { border-bottom: 1px solid var(--divider) !important; padding: 12px 8px !important; }
	.cust-form.table.type--1 > tbody > tr:last-child > th, .cust-form.table.type--1 > tbody > tr:last-child > td { border-bottom: 0 !important; }
	.cust-form.table.type--1 > tbody > tr > th { width: 140px; font-size: 13.5px; }
	.cust-form td input[type="text"], .cust-form td input[type="tel"], .cust-form td select { height: 40px !important; border-radius: 8px !important; border-color: #DCDDE2 !important; }
	.cust-form td input.max-width--200, .cust-form td select.max-width--200 { max-width: 320px !important; width: 100%; }
	.cust-form td #c_gu { margin-left: 8px; }
	.cust-form ~ .btn-bx { display: flex; justify-content: center; gap: 10px; margin-top: 18px !important; padding-top: 16px; border-top: 1px solid var(--divider); }
	.cust-form ~ .btn-bx .board-btn { min-width: 140px; height: 42px; line-height: 42px; border-radius: 8px; font-weight: 700; }
	.cust-form ~ .btn-bx .board-btn.type--1 { background: var(--lapl-green) !important; border-color: var(--lapl-green) !important; color: #fff !important; }
}

/* 고객등록 PC — 참고사항 칸은 다른 칸과 같은 폭으로 (사용자 지시 2026-09-19: "참고사항 박스 너무 큼") */
@media (min-width: 768px) {
	.cust-form td input.max-width--1000 { max-width: 480px !important; width: 100%; }
	main#contents:has(.cust-form) .admin-content .container { border-radius: 16px; }
}

/* 신청경로 고르기 — 지인 / 계약자소개 / 개척 / 기타( ) (사용자 지시 2026-09-19) */
.route-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.route-opt { display: inline-flex; align-items: center; margin: 0 !important; cursor: pointer; }
.route-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.route-opt span { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 1px solid #DCDDE2; border-radius: 8px; background: #fff; font-size: 14px; font-weight: 500; color: var(--text-2); }
.route-opt input:checked + span { background: var(--lapl-green); border-color: var(--lapl-green); color: #fff; font-weight: 700; }
.route-opt input:focus-visible + span { outline: 2px solid rgba(37, 50, 114, .35); }
.route-etc { height: 36px !important; max-width: 220px !important; width: 100% !important; }
@media (max-width: 767px) {
	.cust-form tr.m-5 td { display: block !important; }
	.route-opts { gap: 6px; }
	.route-opt span { height: 40px; padding: 0 12px; font-size: 14.5px; border-radius: 10px; border-color: #e3e3e8; }
	.route-etc { flex: 1 1 100%; max-width: none !important; height: 42px !important; border-radius: 10px !important; border-color: #e3e3e8 !important; }
	.cust-form td input.route-etc { display: block; }
}
@media (min-width: 768px) { .route-etc { border-radius: 8px !important; } }

/* 리크루팅 후보 등록 — 고객등록과 같은 카드 화면 (사용자 지시 2026-09-19). 휴대폰에서는 여덟 줄 전부, 순서대로 */
@media (max-width: 767px) {
	.cust-form > tbody > tr.m-7 { order: 7; } .cust-form > tbody > tr.m-8 { order: 8; }
	.rc-form tr.m-3 td, .rc-form tr.m-4 td, .rc-form tr.m-6 td { display: block !important; gap: 0; }
	.cust-form td textarea { display: block; width: 100% !important; box-sizing: border-box; padding: 10px 12px !important; border: 1px solid #e3e3e8 !important; border-radius: 10px !important; font-size: 15px !important; background: #fff !important; }
	.rc-form .rc-hint { display: block; margin: 6px 0 0 !important; font-size: 12px; }
}
@media (min-width: 768px) {
	.cust-form td textarea { max-width: 480px; width: 100%; border-radius: 8px !important; border-color: #DCDDE2 !important; padding: 8px 12px; }
}

/* 휴가 신청서 (사용자 지시 2026-09-19) — 묶음 제목 줄, 읽기 전용 칸 */
.lv-form tr.lv-sec > th { padding: 18px 8px 6px !important; border-bottom: 0 !important; background: transparent !important; font-size: 14px; font-weight: 800; color: var(--text); }
.lv-form tr.lv-sec > th i { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 6px;
	background: rgba(37, 50, 114, .1); color: var(--lapl-green); font-style: normal; font-size: 12px; font-weight: 800; }
.lv-form tr.lv-sec:first-child > th { padding-top: 4px !important; }
.lv-form td.lv-ro { color: var(--text); font-weight: 600; }
.lv-form .lv-hint { font-size: 12px; font-weight: 400; }
.lv-form .lv-tilde { margin: 0 4px; color: var(--muted); }
.lv-form td input[type="date"], .lv-form td input[type="time"], .lv-form td input[type="number"] { height: 40px; padding: 0 10px; border: 1px solid #DCDDE2; border-radius: 8px; background: #fff; font-size: 14px; }
@media (max-width: 767px) {
	.cust-form > tbody > tr.m-9 { order: 9; } .cust-form > tbody > tr.m-10 { order: 10; } .cust-form > tbody > tr.m-11 { order: 11; } .cust-form > tbody > tr.m-12 { order: 12; }
	.cust-form > tbody > tr.m-13 { order: 13; } .cust-form > tbody > tr.m-14 { order: 14; } .cust-form > tbody > tr.m-15 { order: 15; } .cust-form > tbody > tr.m-16 { order: 16; } .cust-form > tbody > tr.m-17 { order: 17; }
	.lv-form tr.lv-sec > th { padding: 14px 0 2px !important; }
	.lv-form td.lv-ro { padding: 6px 0 !important; }
	.lv-form td input[type="date"], .lv-form td input[type="time"], .lv-form td input[type="number"] { width: 100%; height: 44px; border-radius: 10px; border-color: #e3e3e8; font-size: 15px; }
	.lv-form tr.m-11 td { display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px; }
	.lv-form tr.m-11 td input[type="time"] { flex: 1 1 40%; width: auto; }
	.lv-form tr.m-16 td input[type="number"] { max-width: 140px; }
	.lv-form .lv-hint { flex: 1 1 100%; display: block; margin: 4px 0 0 !important; }
	.lv-form tr.m-3 td, .lv-form tr.m-4 td, .lv-form tr.m-6 td { display: block !important; }
}

/* 아래 메뉴줄 아이콘 (사용자 지시 2026-09-19) */
.snb__ico { width: 15px; height: 15px; margin: 0 5px -3px 0; stroke: var(--orange-deep); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.snb__link.active .snb__ico { stroke: var(--lapl-green); }
/* 지출결의서 */
.ex-st { margin-left: 8px; font-size: 12px; vertical-align: middle; }
.ex-form td.lv-ro, .ex-form .lv-ro { font-weight: 500; }
.ex-pre { white-space: pre-wrap; line-height: 1.7; }
.ex-files { list-style: none; margin: 0; padding: 0; }
.ex-files li { padding: 3px 0; }
.ex-files a { color: var(--lapl-green); font-weight: 600; text-decoration: none; }
.ex-files a:hover { text-decoration: underline; }
.ex-file { font-size: 13px; }
@media (max-width: 767px) {
	.cust-form > tbody > tr.m-18 { order: 18; } .cust-form > tbody > tr.m-19 { order: 19; } .cust-form > tbody > tr.m-20 { order: 20; } .cust-form > tbody > tr.m-21 { order: 21; }
	.cust-form > tbody > tr.m-22 { order: 22; } .cust-form > tbody > tr.m-23 { order: 23; } .cust-form > tbody > tr.m-24 { order: 24; } .cust-form > tbody > tr.m-25 { order: 25; }
	.ex-form tr td { display: block !important; }
}

/* CSR 근무·급여 설정 (인사관리) — 2026-09-19 */
.cs-form { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 6px 24px 20px; }
.cs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 18px; }
.cs-grid--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-grid label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--text-2); font-weight: 600; }
.cs-grid input, .cs-grid select { height: 38px; padding: 0 10px; border: 1px solid #DCDDE2; border-radius: 8px; font-size: 14px; background: #fff; }
.cs-ta { width: 100%; padding: 10px 12px; border: 1px solid #DCDDE2; border-radius: 8px; font-size: 14px; }
.cs-hint { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
.cs-form .cust-sec { margin-top: 18px; }
.cs-table input, .cs-table select { height: 36px; }
@media (max-width: 767px) { .cs-grid, .cs-grid--wide { grid-template-columns: 1fr; } .cs-form { padding: 6px 14px 16px; } }

/* 전자결재 제목줄의 [+ 작성하기] (사용자 지시 2026-09-19) */
.nb-tabs__go { margin-left: 12px; height: 32px; line-height: 32px; padding: 0 14px; font-size: 13px; font-weight: 700; border: 0; cursor: pointer; text-decoration: none; }
@media (max-width: 767px) { .nb-tabs__go { margin-left: 8px; height: 30px; line-height: 30px; padding: 0 12px; font-size: 12.5px; } }

/* 공지사항 목록 오른쪽 칸 — 넓히고 '완료 n' 은 같은 줄에 (사용자 지시 2026-09-19) */
.nb-table .c-w { width: 130px; }
.nb-table .c-d { width: 90px; }
.nb-table .c-r { width: 150px; text-align: right; white-space: nowrap; }
.nb-table .c-r small { display: inline; margin-left: 8px; font-size: 12px; }
.nb-table th, .nb-table td { padding-left: 12px; padding-right: 12px; }
.nb-table .c-k { width: 92px; }
@media (max-width: 767px) { .nb-table .c-r { width: 90px; } .nb-table .c-r small { display: block; margin: 0; } .nb-table th, .nb-table td { padding-left: 6px; padding-right: 6px; } }

/* ── DB신청서 · 업적현황 네 칸 (2026-09-19) ── */
.db-perf { display: flex; flex-direction: column; gap: 3px; max-width: 360px; }
.db-perf__r { display: flex; align-items: baseline; gap: 10px; line-height: 1.5; }
.db-perf__r em { font-style: normal; width: 48px; flex: 0 0 48px; font-size: 13px; color: var(--muted, #8a8f98); }
.db-perf__r b { width: 48px; flex: 0 0 48px; font-size: 14px; color: var(--text); }
.db-perf__r small { font-size: 13px; color: var(--muted, #8a8f98); }
.db-perf__sum { margin-top: 3px; padding-top: 5px; border-top: 1px solid #E5E5EA; }
.db-perf__sum em, .db-perf__sum small { color: var(--text); font-weight: 600; }
.ex-form .lv-hint { font-size: 12px; }

/* ── 상단바 MY PAGE (2026-09-19) ── */
.hdr-mypage { font-weight: 700; color: var(--lapl-green, #253173); letter-spacing: .2px; }
.hdr-mypage:hover { text-decoration: underline; }

/* ── MY PAGE — 내 업무 한 화면 (2026-09-19). 회색 바탕 위 흰 카드 넷 ── */
main#contents:has(.mp-wrap) { background: #EFF0F2; }
.mp-me { margin: 2px 0 0 34px; font-size: 13.5px; color: #6E6E73; letter-spacing: -.1px; }
.mp-me__scope { font-style: normal; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #E9EBF5; color: #253173; font-size: 12px; font-weight: 600; }
@media (max-width: 767px) { .mp-me { margin-left: 0; font-size: 12.5px; } }
.mp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mp-card { background: #fff; border-radius: 14px; padding: 16px 20px 14px; box-shadow: 0 1px 0 rgba(0,0,0,.03); min-width: 0; }
.mp-card__t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; font-size: 16px; font-weight: 700; color: var(--text); }
.mp-card__t .cf-head__ico { width: 20px; height: 20px; }
.mp-card__t small { font-size: 12px; font-weight: 400; }
.mp-todo { margin-left: auto; font-size: 12px; font-weight: 600; color: #b45309; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 999px; padding: 2px 10px; }
.mp-todo b { color: #c2410c; }
.mp-tbl.table.type--1 { border-left: 0 !important; border-right: 0 !important; border-radius: 0 !important; }
.mp-tbl th, .mp-tbl td { padding: 8px 6px !important; font-size: 13px; }
.mp-tbl thead th { background: #F7F7F9 !important; color: #6E6E73; font-weight: 600; }
.mp-tbl__now td { background: #F3F4FB !important; }
.mp-now { font-style: normal; font-size: 11px; font-weight: 600; color: #fff; background: var(--lapl-green, #253173); border-radius: 999px; padding: 1px 7px; margin-left: 4px; vertical-align: 1px; }
.mp-tbl--list td { text-align: left; }
.mp-ellip { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-foot { margin: 8px 0 0; text-align: right; font-size: 12px; }
.mp-foot a { color: var(--muted, #8a8f98); }
.mp-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.mp-kpis--4 { grid-template-columns: repeat(4, 1fr); margin-bottom: 0; }
.mp-kpi { display: flex; flex-direction: column; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: #F7F7F9; color: inherit; text-decoration: none; min-width: 0; }
.mp-kpi em { font-style: normal; font-size: 12px; color: #6E6E73; font-weight: 600; }
.mp-kpi b { font-size: 26px; line-height: 1.15; color: var(--text); letter-spacing: -.5px; margin-top: 2px; }
.mp-kpi small { font-size: 12px; color: #8a8f98; }
.mp-kpi--warn { background: #FFF6F2; }
.mp-kpi--warn b { color: #d9480f; }
.mp-kpi__hint { font-size: 11px; color: #b06a4a; margin-top: 2px; }
.mp-kpi:hover { background: #F0F1F4; }
@media (max-width: 991px) { .mp-grid { grid-template-columns: 1fr; } }
@media (max-width: 767px) {
	.mp-card { padding: 12px 14px 12px; border-radius: 12px; }
	.mp-kpis, .mp-kpis--4 { grid-template-columns: repeat(2, 1fr); }
	.mp-kpi b { font-size: 22px; }
	.mp-tbl th, .mp-tbl td { padding: 7px 4px !important; font-size: 12.5px; }
	.mp-tbl th:nth-child(n+5), .mp-tbl td:nth-child(n+5) { display: none; }
	.mp-tbl--list th:nth-child(n+4), .mp-tbl--list td:nth-child(n+4) { display: none; }
	.mp-tbl--list th:nth-child(n+5), .mp-tbl--list td:nth-child(n+5) { display: none; }
	main#contents:has(.mp-wrap) .page-title--2 { font-size: 24px; }
}

/* ── 고객정보 상세 — 고객등록 카드 포맷으로 (사용자 지시 2026-09-19). 회색 바탕, 흰 둥근 카드, 항목 아이콘 ── */
main#contents:has(.cv-wrap) { background: #EFF0F2; }
.cv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cv-card { background: #fff; border-radius: 14px; padding: 16px 20px 18px; box-shadow: 0 1px 0 rgba(0,0,0,.03); margin-top: 16px; min-width: 0; }
.cv-grid .cv-card { margin-top: 0; }
.cv-card__t { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--text); }
.cv-card__t .cf-head__ico { width: 20px; height: 20px; }
.cv-tbl.table.type--1 { border: 0 !important; border-radius: 0 !important; background: transparent !important; overflow: visible; }
.cv-tbl.table.type--1 > tbody > tr > th, .cv-tbl.table.type--1 > tbody > tr > td { border: 0 !important; border-top: 1px solid #F0F0F3 !important; background: transparent !important; padding: 9px 4px !important; vertical-align: middle; }
.cv-tbl.table.type--1 > tbody > tr:first-child > th, .cv-tbl.table.type--1 > tbody > tr:first-child > td { border-top: 0 !important; }
.cv-tbl > tbody > tr > th { color: #6E6E73; font-weight: 600; font-size: 13px; white-space: nowrap; }
.cv-tbl > tbody > tr > td { font-size: 14px; color: var(--text); word-break: break-all; }
.cv-tbl .cell-actions { float: right; display: inline-flex; gap: 4px; flex-wrap: wrap; margin-left: 8px; }
.cv-tbl .attach-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.cv-card > .d-flex.mt-5 { margin-top: 0 !important; }
.cv-card .cust-sec { margin-top: 0; }
.cv-card .table.type--1.cust-info { border-left: 0 !important; border-right: 0 !important; border-radius: 0 !important; }
.cv-card form + form .cust-info { border-top: 0 !important; }
.cv-wrap ~ .btn-bx, .cv-wrap .btn-bx.mt-11 { margin-top: 14px; }
@media (max-width: 767px) {
	.cv-grid { grid-template-columns: 1fr; }
	.cv-card { padding: 12px 14px 14px; border-radius: 12px; margin-top: 12px; }
	.cv-tbl, .cv-tbl > tbody, .cv-tbl > tbody > tr, .cv-tbl > tbody > tr > th, .cv-tbl > tbody > tr > td { display: block; width: 100% !important; box-sizing: border-box; }
	.cv-tbl > colgroup { display: none; }
	.cv-tbl.table.type--1 > tbody > tr { padding: 8px 0 10px; border-top: 1px solid #F0F0F3; }
	.cv-tbl.table.type--1 > tbody > tr:first-child { border-top: 0; }
	.cv-tbl.table.type--1 > tbody > tr > th { padding: 0 0 4px !important; border: 0 !important; font-size: 12.5px; }
	.cv-tbl.table.type--1 > tbody > tr > td { padding: 0 !important; border: 0 !important; }
	.cv-tbl .cell-actions { float: none; display: flex; margin: 6px 0 0; }
	.cv-tbl .attach-row { flex-direction: column; }
	main#contents:has(.cv-wrap) .page-title--2 { font-size: 24px; }
	main#contents:has(.cv-wrap) .breadcrumb, main#contents:has(.cv-wrap) .admin-content__head nav { display: none !important; }
	.cv-wrap .btn-bx.mt-11 { display: flex; gap: 8px; }
	.cv-wrap .btn-bx.mt-11 .board-btn { flex: 1 1 0; text-align: center; margin: 0 !important; }
}

/* 사은품 신청현황 — 표 머리 가운데 정렬 (2026-09-19) */
.hb-list thead th, .hb-list thead th.txt-left { text-align: center !important; }

/* ── MY PAGE 목표설정 · 해야 할 업무 (2026-09-19) ── */
.mp-card--wide { grid-column: 1 / -1; }
.tg-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tg-col { border: 1px solid #ECECF0; border-radius: 12px; padding: 12px 14px; background: #FAFAFB; min-width: 0; }
.tg-col--late { border-color: #F5C6B0; background: #FFF6F2; }
.tg-col__h { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 15px; }
.tg-due { margin-left: auto; font-style: normal; font-size: 11.5px; color: #b45309; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 999px; padding: 1px 8px; }
.tg-col--late .tg-due { color: #c2410c; }
.tg-val { margin: 0 0 4px; font-size: 14px; }
.tg-val b { font-size: 22px; letter-spacing: -.4px; margin-right: 2px; }
.tg-val .lv-st { margin-left: 6px; vertical-align: 3px; }
.tg-memo, .tg-none, .tg-reject { margin: 0 0 6px; font-size: 13px; color: #6E6E73; }
.tg-reject .lv-reason { color: #d9480f; }
.tg-form { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.tg-form label { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 8px; font-size: 13px; color: #6E6E73; }
.tg-form input { width: 100%; box-sizing: border-box; height: 34px; border: 1px solid #DCDDE2; border-radius: 8px; padding: 0 10px; background: #fff; font-size: 14px; }
.tg-in { display: flex; align-items: center; gap: 6px; }
.tg-in i { font-style: normal; font-size: 13px; color: #6E6E73; }
.tg-form__act { display: flex; gap: 6px; margin-top: 4px; }
.tg-hist { margin-top: 10px; font-size: 13px; }
.tg-hist summary { cursor: pointer; color: #6E6E73; }
.tg-sub { margin: 14px 0 6px; font-size: 14px; font-weight: 700; }
.tg-alerts { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; }
.tg-alert { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; font-size: 13.5px; line-height: 1.4; }
.tg-alert svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; }
.tg-alert--warn { background: #FFF4EC; color: #9a3412; border: 1px solid #FED7AA; }
.tg-alert--info { background: #EEF6FF; color: #1e40af; border: 1px solid #BFDBFE; }
.tg-alert__go { margin-left: auto; font-weight: 700; white-space: nowrap; color: inherit; text-decoration: underline; }
@media (max-width: 767px) {
	.tg-cols { grid-template-columns: 1fr; }
	.tg-form label { grid-template-columns: 1fr; gap: 3px; }
	.tg-alert { flex-wrap: wrap; }
	.tg-alert__go { margin-left: 28px; }
}

/* ── MY PAGE 알림 카드 · 고객목록 카드 (2026-09-19) ── */
.mp-card__more { margin-left: auto; font-size: 12px; font-weight: 500; color: #6E6E73; }
.mp-todo + .mp-card__more { margin-left: 8px; }
.mp-nt { list-style: none; margin: 0; padding: 0; }
.mp-nt__i { border-top: 1px solid #F0F0F3; }
.mp-nt__i:first-child { border-top: 0; }
.mp-nt__i a { display: flex; align-items: center; gap: 8px; padding: 8px 2px; color: inherit; text-decoration: none; min-width: 0; }
.mp-nt__i b { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: 13.5px; }
.mp-nt__i.is-open b { font-weight: 700; color: var(--text); }
.mp-nt__i:not(.is-open) b { color: #8a8f98; }
.mp-nt__i small { flex: 0 0 auto; font-size: 12px; }
.mp-nt__tag { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: #253173; background: #E9EBF5; border-radius: 6px; padding: 1px 6px; }
.mp-nt__tag--job { color: #b45309; background: #fff7ed; }
.mp-nt__i.nodata { padding: 14px 0; text-align: center; color: #8a8f98; font-size: 13px; }
.cl-card--search .table.type--1, .cl-card--list .table.type--1 { border-left: 0 !important; border-right: 0 !important; border-radius: 0 !important; }
.cl-card--search .table.type--1 { border-top: 0 !important; }
.cl-card--list { margin-top: 16px; }
.cl-wrap .paging, .cl-wrap .pagination { margin-top: 12px; }
@media (max-width: 767px) { .cl-card--list { margin-top: 12px; } }

/* 고객목록 표 머리 — 전부 볼드, 정렬 링크도 같은 굵기 (2026-09-19) */
.table.type--1.cust-list > tbody > tr > th, .table.type--1.cust-list > tr > th, .table.type--1.cust-list > tr > th a, .table.type--1.cust-list > tbody > tr > th a { font-weight: 700 !important; color: var(--text-2); }

/* 고객목록 검색 칸 제목 — 볼드 + 아이콘 (2026-09-19) */
.cl-card--search th.cl-th { font-weight: 700 !important; color: var(--text-2); white-space: nowrap; }
.cl-card--search th.cl-th .cf-ico { width: 15px; height: 15px; margin-right: 5px; }

/* 고객목록 검색 — 주소·경로·검색 한 줄 (2026-09-19) */
.cl-inline { gap: 6px 6px; }
.cl-inline select, .cl-inline input[type="text"] { margin: 0 !important; }
.cl-inline #c_si, .cl-inline #c_gu, .cl-inline #c_route { width: 140px !important; max-width: 140px !important; }
.cl-inline #search { width: 96px !important; }
.cl-inline input[name="keyword"] { width: 220px !important; max-width: 220px !important; }
.cl-inline__lb { display: inline-flex; align-items: center; margin-left: 16px; font-weight: 700; color: var(--text-2); white-space: nowrap; }
.cl-inline__lb .cf-ico { width: 15px; height: 15px; margin-right: 5px; }
.cl-inline .btn-flat { margin-left: 4px; }
@media (max-width: 991px) { .cl-inline__lb { margin-left: 0; flex-basis: 100%; margin-top: 4px; } }

/* MY PAGE 메뉴 — 맨 앞, 초록 글자 (2026-09-19) */
.gnb__link.gnb__link--my { color: var(--lapl-green-2) !important; font-weight: 700; }
.gnb__link.gnb__link--my:hover { color: var(--lapl-green) !important; }
.gnb__item.is-active .gnb__link--my { color: var(--lapl-green) !important; }

/* MY PAGE 숫자 칸 — "가망고객 / 12명" 한 줄 (사용자 지시 2026-09-19) */
.mp-kpi { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 6px; padding: 10px 14px; }
.mp-kpi em { font-size: 13.5px; }
.mp-kpi em::after { content: " /"; color: #B0B3BA; font-weight: 400; }
.mp-kpi b { font-size: 20px; margin-top: 0; }
.mp-kpi small { margin-left: -4px; }
.mp-kpi__hint { flex-basis: 100%; margin-top: 0; }
@media (max-width: 767px) { .mp-kpi b { font-size: 18px; } }

/* MY PAGE 일정 표 — 고정 폭, 이름은 보통 굵기 (2026-09-19) */
.mp-tbl--list { table-layout: fixed; }
.mp-tbl--list td a { font-weight: 500; color: var(--text); }
.mp-tbl--list .mp-ellip { max-width: none; }

/* MY PAGE 결재할 문서 (2026-09-19) */
.mp-tbl--inbox { table-layout: fixed; margin-bottom: 6px; }
.mp-tbl--inbox td a { color: var(--text); font-weight: 500; }
.mp-card .tg-sub:first-of-type { margin-top: 4px; }

/* ── MY PAGE 쪽지 · 목표 현황 (2026-09-19) ── */
.mm-open { margin-left: auto; font-size: 12px; padding: 4px 12px; }
.mp-todo + .mm-open { margin-left: 8px; }
.mm-form { border: 1px solid #ECECF0; border-radius: 12px; padding: 12px 14px; background: #FAFAFB; margin-bottom: 10px; }
.mm-form__toh { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 6px; }
.mm-form__toh em { font-style: normal; color: var(--lapl-green); font-weight: 700; }
.mm-all { margin-left: auto; font-size: 12.5px; color: #6E6E73; }
.mm-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 10px; max-height: 220px; overflow: auto; padding: 6px 8px; background: #fff; border: 1px solid #E5E5EA; border-radius: 8px; }
.mm-group__h { display: block; font-size: 13px; margin-bottom: 2px; }
.mm-group__m { display: flex; flex-wrap: wrap; gap: 2px 10px; padding-left: 18px; }
.mm-m { font-size: 12.5px; color: #3a3a3c; white-space: nowrap; }
.mm-form textarea { width: 100%; box-sizing: border-box; margin-top: 8px; border: 1px solid #DCDDE2; border-radius: 8px; padding: 8px 10px; font-size: 14px; background: #fff; }
.mm-form__act { display: flex; gap: 6px; margin-top: 6px; }
.mm-i__h b { font-weight: 600; }
.mm-i.is-open .mp-nt__tag { color: #fff; background: var(--orange-deep); }
.mm-i__b { padding: 4px 2px 10px 46px; font-size: 13.5px; line-height: 1.55; color: var(--text); white-space: normal; }
.mm-i__act { margin-top: 4px; }
.mm-sent__to { margin: -4px 0 6px 2px; font-size: 12px; }
.tg-status { table-layout: fixed; margin-bottom: 6px; }
.tg-status small { font-size: 11px; color: #8a8f98; margin-left: 1px; }
.tg-status__sum td { background: #F7F7F9 !important; }
.tg-status__sub td:first-child { padding-left: 18px !important; color: #3a3a3c; }
.tg-bar { display: inline-block; vertical-align: middle; width: 60%; max-width: 140px; height: 8px; border-radius: 999px; background: #ECECF0; overflow: hidden; margin-right: 6px; }
.tg-bar i { display: block; height: 100%; background: var(--orange-deep); border-radius: 999px; }
.tg-bar i.is-ok { background: var(--lapl-green); }
@media (max-width: 767px) { .mm-groups { grid-template-columns: 1fr; } .mm-i__b { padding-left: 0; } .tg-bar { width: 50px; } }

/* 쪽지 받는 사람 — 둥근 칩 · 고른 명단 (2026-09-19) */
.mm-group__m { gap: 6px; padding-left: 20px; }
.mm-m { position: relative; }
.mm-m input { position: absolute; opacity: 0; width: 0; height: 0; }
.mm-m span { display: inline-block; padding: 3px 11px; border-radius: 999px; border: 1px solid #DCDDE2; background: #fff; font-size: 12.5px; color: #3a3a3c; cursor: pointer; line-height: 1.4; }
.mm-m span:hover { border-color: var(--lapl-green); }
.mm-m input:checked + span { background: var(--lapl-green); border-color: var(--lapl-green); color: #fff; font-weight: 600; }
.mm-sel { margin: 6px 0 8px; padding: 8px 10px; border-radius: 8px; background: #E9EBF5; font-size: 12.5px; line-height: 1.8; }
.mm-sel b { color: #253173; margin-right: 6px; }
.mm-sel__n { display: inline-block; margin: 0 4px 2px 0; padding: 1px 8px; border-radius: 999px; background: #fff; border: 1px solid #C7CCE5; color: #253173; font-weight: 600; }

/* MY PAGE 알림(공지) 카드 — 맨 위, 넓게, 눈에 띄게 (2026-09-19) */
.mp-card--notice { border: 1.5px solid #F5C6B0; background: #FFFCFA; }
.mp-card--notice .mp-card__t { font-size: 17px; }
.mp-card--notice .mp-nt__i b { font-size: 14.5px; }
.mp-card--notice .mp-nt__i.is-open b { color: #9a3412; }
/* 공지는 한 줄에 하나씩, 크게 (사용자 지시 2026-09-19) */
.mp-card--notice .mp-nt { display: block; }
.mp-card--notice .mp-nt__i a { padding: 12px 4px; gap: 12px; }
.mp-card--notice .mp-nt__i b { font-size: 17px; white-space: normal; line-height: 1.4; }
.mp-card--notice .mp-nt__i.is-open b { font-weight: 700; }
.mp-card--notice .mp-nt__i small { font-size: 13px; }
.mp-card--notice .mp-nt__tag { font-size: 12px; padding: 2px 8px; }
@media (max-width: 767px) { .mp-card--notice .mp-nt__i b { font-size: 15.5px; } .mp-card--notice .mp-nt__i a { padding: 10px 2px; } }
/* 빠른 실행 줄 · 전자결재 메뉴 단추 */
.mp-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.mp-quick__b { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid #DCDDE2; color: var(--text); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.mp-quick__b svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mp-quick__b:hover { border-color: var(--lapl-green); color: var(--lapl-green); }
.mp-quick__b--main { background: var(--lapl-green); border-color: var(--lapl-green); color: #fff; }
.mp-quick__b--main:hover { background: var(--lapl-green-2); color: #fff; }
.mp-apmenu { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: -2px 0 10px; font-size: 13.5px; }
.mp-apmenu__bar { color: #C5C5CC; margin: 0 6px; }
.mp-apmenu__i a { color: var(--text); font-weight: 600; }
.mp-apmenu__i a:hover { color: var(--lapl-green); }
.mp-apmenu__new { display: inline-block; margin-left: 4px; width: 18px; height: 18px; line-height: 17px; text-align: center; border-radius: 50%; background: #E9EBF5; color: #253173 !important; font-size: 13px; font-weight: 700; }

/* ── 전 화면 카드 포맷 (2026-09-19) — 회색 바탕 위 흰 둥근 카드. 고객등록·상세·MY PAGE 와 같은 결 ── */
main#contents { background: #EFF0F2; }
.admin-content__head .page-title--2 { font-weight: 700; }
.admin-content__body:not(.cv-wrap):not(.mp-wrap) > .table.type--1,
.admin-content__body:not(.cv-wrap):not(.mp-wrap) > form > .table.type--1,
.admin-content__body:not(.cv-wrap):not(.mp-wrap) > div:not(.cv-card):not(.mp-card) > .table.type--1,
.admin-content__body:not(.cv-wrap):not(.mp-wrap) > .dash-table,
.admin-content__body:not(.cv-wrap):not(.mp-wrap) > div:not(.cv-card):not(.mp-card) > .dash-table {
	background: #fff; border: 0 !important; border-radius: 14px; border-collapse: separate; border-spacing: 0; overflow: hidden;
	box-shadow: 0 1px 0 rgba(0,0,0,.03); margin-bottom: 14px; }
.admin-content__body:not(.cv-wrap):not(.mp-wrap) > .table.type--1 > tbody > tr:first-child > th,
.admin-content__body:not(.cv-wrap):not(.mp-wrap) > .table.type--1 > tr:first-child > th,
.admin-content__body:not(.cv-wrap):not(.mp-wrap) > .table.type--1 > thead > tr:first-child > th { border-top: 0 !important; }
.admin-content__body:not(.cv-wrap):not(.mp-wrap) .table.type--1 th { font-weight: 700; }
.admin-content__body:not(.cv-wrap):not(.mp-wrap) .table.type--1 > tbody > tr > td:last-child,
.admin-content__body:not(.cv-wrap):not(.mp-wrap) .table.type--1 > tbody > tr > th:last-child,
.admin-content__body:not(.cv-wrap):not(.mp-wrap) .table.type--1 > tr > td:last-child,
.admin-content__body:not(.cv-wrap):not(.mp-wrap) .table.type--1 > tr > th:last-child { border-right: 0 !important; }
.admin-content__body:not(.cv-wrap):not(.mp-wrap) .table.type--1 > tbody > tr > td:first-child,
.admin-content__body:not(.cv-wrap):not(.mp-wrap) .table.type--1 > tbody > tr > th:first-child,
.admin-content__body:not(.cv-wrap):not(.mp-wrap) .table.type--1 > tr > td:first-child,
.admin-content__body:not(.cv-wrap):not(.mp-wrap) .table.type--1 > tr > th:first-child { border-left: 0 !important; }
.admin-content__body:not(.cv-wrap):not(.mp-wrap) > .ui-card,
.admin-content__body:not(.cv-wrap):not(.mp-wrap) > .dash-card,
.admin-content__body:not(.cv-wrap):not(.mp-wrap) > .card { background: #fff; border: 0 !important; border-radius: 14px; box-shadow: 0 1px 0 rgba(0,0,0,.03); }
@media (max-width: 767px) { .admin-content__body:not(.cv-wrap):not(.mp-wrap) > .table.type--1, .admin-content__body:not(.cv-wrap):not(.mp-wrap) > form > .table.type--1 { border-radius: 12px; } }

/* 임직원 목록 재직여부 — 재직 주황 · 퇴직 회색 (2026-09-19) */
.ml-st { display: inline-block; min-width: 44px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; text-align: center; }
.ml-st--on { background: #FFF1E8; color: var(--orange-deep); border: 1px solid #F8C9AE; }
.ml-st--off { background: #F0F0F3; color: #8a8f98; border: 1px solid #E1E1E6; }

/* MY PAGE 제목 줄 오른쪽 [＋ 고객등록] (2026-09-19) */
main#contents:has(.mp-wrap) .admin-content__head { position: relative; }
.mp-newcust { position: absolute; right: 0; top: 10px; z-index: 2; display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px; background: var(--lapl-green); color: #fff !important; font-size: 14px; font-weight: 700; text-decoration: none; }
.mp-newcust:hover { background: var(--lapl-green-2); }
@media (max-width: 767px) { .mp-newcust { top: 0; padding: 6px 12px; font-size: 13px; } }

/* 쪽지 받는 사람 — 지점별 한 줄, [전체] + 개인 칩 (2026-09-19) */
.mm-groups { display: block; max-height: 320px; padding: 0 10px; }
.mm-group { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-top: 1px solid #F0F0F3; }
.mm-group:first-child { border-top: 0; }
.mm-group__h { flex: 0 0 170px; display: flex; align-items: center; gap: 6px; font-size: 13px; margin: 0; }
.mm-group__h b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-group__m { flex: 1 1 auto; padding-left: 0; }
.mm-m--all span { border-style: dashed; color: #253173; }
.mm-m--all input:checked + span { border-style: solid; }
@media (max-width: 767px) { .mm-group { flex-direction: column; gap: 4px; } .mm-group__h { flex-basis: auto; } }

/* MY PAGE 우상단 작성 메뉴 (2026-09-19) */
.mp-topmenu { position: absolute; right: 0; top: 12px; z-index: 2; display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 4px 0; font-size: 14px; }
.mp-topmenu__bar { color: #C5C5CC; margin: 0 8px; }
.mp-topmenu__a { color: var(--text); font-weight: 600; text-decoration: none; }
.mp-topmenu__a:hover { color: var(--lapl-green); }
.mp-topmenu__a--main { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px; background: var(--lapl-green); color: #fff !important; font-weight: 700; }
.mp-topmenu__a--main:hover { background: var(--lapl-green-2); }
@media (max-width: 767px) { .mp-topmenu { position: static; justify-content: flex-start; margin: 6px 0 4px; font-size: 13px; } .mp-topmenu__bar { margin: 0 6px; } .mp-topmenu__a--main { padding: 4px 11px; } }

/* 휴대폰: 공지 카드는 [알림] 을 눌렀을 때만 (2026-09-19) */
.mp-notibtn { display: none; }
@media (max-width: 767px) {
	.mp-card--notice:not(.is-shown) { display: none; }
	.mp-notibtn { display: inline-flex; align-items: center; gap: 6px; position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 850; padding: 10px 18px; border-radius: 999px; background: #1d1d1f; color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; box-shadow: 0 6px 18px rgba(0,0,0,.22); }
	.mp-notibtn svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
	.mp-notibtn em { font-style: normal; background: var(--lapl-orange, #5E6475); border-radius: 999px; padding: 1px 7px; font-size: 12px; }
	.header--app ~ * .mp-notibtn { display: none; }
	body:has(.mp-card--notice.is-shown) .mp-notibtn { display: none; }
}

/* 해야 할 업무 — 세로로 넓게 (2026-09-19) */
.mp-kpis--v { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 0; }
.mp-kpis--v .mp-kpi { padding: 14px 18px; min-height: 62px; }
.mp-kpis--v .mp-kpi em { font-size: 15px; }
.mp-kpis--v .mp-kpi b { font-size: 26px; }
@media (max-width: 767px) { .mp-kpis--v { grid-template-columns: 1fr; gap: 8px; } .mp-kpis--v .mp-kpi { padding: 12px 16px; min-height: 0; } .mp-kpis--v .mp-kpi b { font-size: 22px; } }

/* 쪽지 보내기는 PC 에서만 (2026-09-19) — 휴대폰은 받은 쪽지만 */
@media (max-width: 767px) { #mmOpen, #mmForm { display: none !important; } }

/* 해야 할 업무 — 정사각형 카드 5개 나란히 (사용자 지시 2026-09-19) */
.mp-kpis--v { grid-template-columns: repeat(5, 1fr); gap: 12px; }
.mp-kpis--v .mp-kpi { aspect-ratio: 1 / 1; min-height: 0; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 4px; padding: 12px; border-radius: 16px; }
.mp-kpis--v .mp-kpi em { font-size: 14px; }
.mp-kpis--v .mp-kpi em::after { content: none; }
.mp-kpis--v .mp-kpi b { font-size: 34px; line-height: 1.1; }
.mp-kpis--v .mp-kpi small { margin-left: 0; }
.mp-kpis--v .mp-kpi__hint { flex-basis: auto; font-size: 11px; line-height: 1.3; }
@media (max-width: 991px) { .mp-kpis--v { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) { .mp-kpis--v { grid-template-columns: repeat(2, 1fr); gap: 8px; } .mp-kpis--v .mp-kpi { padding: 10px; } .mp-kpis--v .mp-kpi b { font-size: 28px; } }

/* 나의 업무현황 정사각형 — 작게 (사용자 지시 2026-09-19) */
.mp-kpis--v { max-width: 720px; gap: 10px; }
.mp-kpis--v .mp-kpi { border-radius: 12px; padding: 8px; gap: 2px; }
.mp-kpis--v .mp-kpi em { font-size: 12.5px; }
.mp-kpis--v .mp-kpi b { font-size: 24px; }
.mp-kpis--v .mp-kpi small { font-size: 11px; }
.mp-kpis--v .mp-kpi__hint { font-size: 10px; }
@media (max-width: 767px) { .mp-kpis--v { max-width: none; grid-template-columns: repeat(3, 1fr); gap: 6px; } .mp-kpis--v .mp-kpi b { font-size: 20px; } .mp-kpis--v .mp-kpi__hint { display: none; } }

/* 나의 업무현황 — 한 줄 "가망고객 / 3명" 형식, 5개 나란히, 작게 (사용자 지시 2026-09-19) */
.mp-kpis--v { max-width: none; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.mp-kpis--v .mp-kpi { aspect-ratio: auto; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: baseline; text-align: left; gap: 0 5px; padding: 10px 12px; min-height: 0; }
.mp-kpis--v .mp-kpi em { font-size: 13px; }
.mp-kpis--v .mp-kpi em::after { content: " /"; color: #B0B3BA; font-weight: 400; }
.mp-kpis--v .mp-kpi b { font-size: 19px; }
.mp-kpis--v .mp-kpi small { margin-left: -4px; font-size: 12px; }
.mp-kpis--v .mp-kpi__hint { flex-basis: 100%; font-size: 10.5px; }
@media (max-width: 991px) { .mp-kpis--v { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) { .mp-kpis--v { grid-template-columns: 1fr 1fr; gap: 6px; } .mp-kpis--v .mp-kpi { padding: 8px 10px; } .mp-kpis--v .mp-kpi b { font-size: 17px; } .mp-kpis--v .mp-kpi__hint { display: none; } }

/* 나의 업무현황 — 칸 수와 상관없이 가로 꽉 차게 (사용자 지시 2026-09-19) */
.mp-kpis--v { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); width: 100%; }
@media (max-width: 767px) { .mp-kpis--v { grid-template-columns: repeat(2, 1fr); } }

/* 나의 업무현황 — 세로만 두 배 (사용자 지시 2026-09-19) */
.mp-kpis--v .mp-kpi { min-height: 92px; padding: 18px 14px; align-content: center; }
@media (max-width: 767px) { .mp-kpis--v .mp-kpi { min-height: 72px; padding: 14px 12px; } }

/* 나의 업무현황 — 세로 더 넓게, 글자 가운데 (사용자 지시 2026-09-19) */
.mp-kpis--v .mp-kpi { min-height: 130px; padding: 22px 14px; justify-content: center; align-items: baseline; align-content: center; text-align: center; }
.mp-kpis--v .mp-kpi__hint { text-align: center; }
@media (max-width: 767px) { .mp-kpis--v .mp-kpi { min-height: 96px; padding: 16px 12px; } }

/* 고객현황 칸 — 나의 업무현황과 같은 높이·정렬 (사용자 지시 2026-09-19) */
.mp-card--wide .mp-kpis--4 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; width: 100%; }
.mp-card--wide .mp-kpis--4 .mp-kpi { min-height: 130px; padding: 22px 14px; justify-content: center; align-items: baseline; align-content: center; text-align: center; gap: 0 5px; }
.mp-card--wide .mp-kpis--4 .mp-kpi em { font-size: 13px; }
.mp-card--wide .mp-kpis--4 .mp-kpi b { font-size: 19px; }
.mp-card--wide .mp-kpis--4 .mp-kpi small { font-size: 12px; }
.mp-card--wide .mp-kpis--4 .mp-kpi__hint { text-align: center; font-size: 10.5px; }
@media (max-width: 767px) { .mp-card--wide .mp-kpis--4 { grid-template-columns: repeat(2, 1fr); gap: 6px; } .mp-card--wide .mp-kpis--4 .mp-kpi { min-height: 96px; padding: 16px 12px; } .mp-card--wide .mp-kpis--4 .mp-kpi b { font-size: 17px; } .mp-card--wide .mp-kpis--4 .mp-kpi__hint { display: none; } }

/* 나의 업무현황 · 고객현황 — 눈에 띄게 크게 (사용자 지시 2026-09-19) */
.mp-kpis--v .mp-kpi, .mp-card--wide .mp-kpis--4 .mp-kpi { min-height: 150px; background: #F3F4F7; border: 1px solid #DCDEEB; }
.mp-kpis--v .mp-kpi em, .mp-card--wide .mp-kpis--4 .mp-kpi em { font-size: 17px; font-weight: 700; color: #3a3a3c; }
.mp-kpis--v .mp-kpi b, .mp-card--wide .mp-kpis--4 .mp-kpi b { font-size: 36px; color: var(--lapl-green, #253173); letter-spacing: -.8px; }
.mp-kpis--v .mp-kpi small, .mp-card--wide .mp-kpis--4 .mp-kpi small { font-size: 15px; color: #3a3a3c; }
.mp-kpis--v .mp-kpi__hint, .mp-card--wide .mp-kpis--4 .mp-kpi__hint { font-size: 12px; }
.mp-kpis--v .mp-kpi--warn, .mp-card--wide .mp-kpis--4 .mp-kpi--warn { background: #FFF3EC; border-color: #F8D3BE; }
.mp-kpis--v .mp-kpi--warn b, .mp-card--wide .mp-kpis--4 .mp-kpi--warn b { color: #d9480f; }
@media (max-width: 767px) { .mp-kpis--v .mp-kpi, .mp-card--wide .mp-kpis--4 .mp-kpi { min-height: 104px; } .mp-kpis--v .mp-kpi em, .mp-card--wide .mp-kpis--4 .mp-kpi em { font-size: 14px; } .mp-kpis--v .mp-kpi b, .mp-card--wide .mp-kpis--4 .mp-kpi b { font-size: 28px; } }

/* 칸 바탕은 흰색, 누를 때(hover·터치)만 색 (사용자 지시 2026-09-19) */
.mp-kpi, .mp-kpis--v .mp-kpi, .mp-card--wide .mp-kpis--4 .mp-kpi, .mp-kpis--v .mp-kpi--warn, .mp-card--wide .mp-kpis--4 .mp-kpi--warn, .mp-kpi--warn { background: #fff; border: 1px solid #E5E5EA; transition: background .15s, border-color .15s; }
.mp-kpi:hover, .mp-kpi:active, .mp-kpis--v .mp-kpi:hover, .mp-kpis--v .mp-kpi:active, .mp-card--wide .mp-kpis--4 .mp-kpi:hover, .mp-card--wide .mp-kpis--4 .mp-kpi:active { background: #F3F4F7; border-color: #BFC4E0; }
.mp-kpi--warn:hover, .mp-kpi--warn:active, .mp-kpis--v .mp-kpi--warn:hover, .mp-kpis--v .mp-kpi--warn:active, .mp-card--wide .mp-kpis--4 .mp-kpi--warn:hover, .mp-card--wide .mp-kpis--4 .mp-kpi--warn:active { background: #FFF3EC; border-color: #F8D3BE; }
.mp-kpis--v .mp-kpi b, .mp-card--wide .mp-kpis--4 .mp-kpi b { color: var(--text); }
.mp-kpis--v .mp-kpi--warn b, .mp-card--wide .mp-kpis--4 .mp-kpi--warn b { color: #d9480f; }
.mp-kpi:hover b, .mp-kpi:active b, .mp-kpis--v .mp-kpi:hover b, .mp-kpis--v .mp-kpi:active b, .mp-card--wide .mp-kpis--4 .mp-kpi:hover b, .mp-card--wide .mp-kpis--4 .mp-kpi:active b { color: var(--lapl-green, #253173); }
.mp-kpi--warn:hover b, .mp-kpi--warn:active b, .mp-kpis--v .mp-kpi--warn:hover b, .mp-kpis--v .mp-kpi--warn:active b { color: #d9480f !important; }

/* 칸 글자 두 줄 — 위 "가망고객", 아래 "160명" (사용자 지시 2026-09-19) */
.mp-kpis--v .mp-kpi, .mp-card--wide .mp-kpis--4 .mp-kpi { flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.mp-kpis--v .mp-kpi em::after, .mp-card--wide .mp-kpis--4 .mp-kpi em::after { content: none; }
.mp-kpis--v .mp-kpi b, .mp-card--wide .mp-kpis--4 .mp-kpi b { line-height: 1.1; }
.mp-kpis--v .mp-kpi small, .mp-card--wide .mp-kpis--4 .mp-kpi small { margin-left: 2px; }
.mp-kpis--v .mp-kpi .mp-kpi__hint, .mp-card--wide .mp-kpis--4 .mp-kpi .mp-kpi__hint { flex-basis: auto; margin-top: 2px; }

/* 숫자와 단위는 한 줄 "160명" (사용자 지시 2026-09-19) — 제목·설명만 줄을 차지한다 */
.mp-kpis--v .mp-kpi, .mp-card--wide .mp-kpis--4 .mp-kpi { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 3px; }
.mp-kpis--v .mp-kpi em, .mp-card--wide .mp-kpis--4 .mp-kpi em { flex-basis: 100%; text-align: center; margin-bottom: 2px; }
.mp-kpis--v .mp-kpi b, .mp-card--wide .mp-kpis--4 .mp-kpi b { flex: 0 0 auto; }
.mp-kpis--v .mp-kpi small, .mp-card--wide .mp-kpis--4 .mp-kpi small { flex: 0 0 auto; margin-left: 0; }
.mp-kpis--v .mp-kpi .mp-kpi__hint, .mp-card--wide .mp-kpis--4 .mp-kpi .mp-kpi__hint { flex-basis: 100%; text-align: center; }


/* 칸 제목(가망고객 등)은 회색, 숫자는 검정 (사용자 지시 2026-09-19) */
.mp-kpis--v .mp-kpi em, .mp-card--wide .mp-kpis--4 .mp-kpi em { color: #8a8f98; font-weight: 600; }

/* 숫자를 크고 진하게 (사용자 지시 2026-09-19) */
.mp-kpis--v .mp-kpi b, .mp-card--wide .mp-kpis--4 .mp-kpi b { font-size: 44px; font-weight: 800; color: #111 !important; letter-spacing: -1.2px; }
.mp-kpis--v .mp-kpi small, .mp-card--wide .mp-kpis--4 .mp-kpi small { font-size: 15px; font-weight: 600; color: #3a3a3c; }
.mp-kpis--v .mp-kpi--warn b, .mp-card--wide .mp-kpis--4 .mp-kpi--warn b { color: #d9480f !important; }
@media (max-width: 767px) { .mp-kpis--v .mp-kpi b, .mp-card--wide .mp-kpis--4 .mp-kpi b { font-size: 32px; } }

/* 공지 본문 작성칸 — 크게 (2026-09-19) */
.nt-body { min-height: 360px; line-height: 1.7; font-size: 15px; padding: 14px 16px !important; }
@media (max-width: 767px) { .nt-body { min-height: 260px; font-size: 14px; } }

/* 임직원 정보 — 이름 옆 직급표 (2026-09-19) */
.mv-lv { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px; background: #E9EBF5; color: #253173; font-size: 12px; font-weight: 700; }

/* 라플챗봇 떠 있는 단추는 숨긴다 — HELP DESK 로만 연다 (2026-09-19) */
.askbox-dock { display: none !important; }
.askbox { display: block; }
.askbox[hidden] { display: none !important; }

/* 임직원 정보 — 가로 한 칸 (2026-09-19) */
.mv-one { width: 100%; }
.mv-one .cust-info { width: 100% !important; }

/* 카드 터치 모션 (2026-09-19) — 누르면 살짝 떠올랐다 눌린다 */
.mp-kpi,.mp-card,.cv-card,.tg-col,.mp-quick__b,.mp-nt__i a{transition:transform .16s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease}
.mp-kpi:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.07)}
.mp-kpi:active{transform:scale(.97);box-shadow:0 2px 6px rgba(0,0,0,.07)}
.mp-quick__b:active,.mp-newcust:active,.mp-topmenu__a:active{transform:scale(.96)}
.mp-nt__i a:active{background:#F7F7F9}
@media (prefers-reduced-motion:reduce){.mp-kpi,.mp-card,.cv-card,.tg-col,.mp-quick__b,.mp-nt__i a{transition:none}}

/* 상담내역 삭제 단추 — 등록 단추와 같은 크기·오른쪽 줄맞춤 (2026-09-19) */
.table.type--1.cust-log > tr > td.log-act,
.table.type--1.cust-log--left > tr > td.log-act,
td.log-act{text-align:right !important;padding-right:12px}
table.table td.log-act .board-btn.xs,
td.log-act .board-btn.xs{height:26px;min-width:0;padding:0 10px;font-size:11.5px;line-height:24px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center}

/* 제목 줄(+단추)과 바로 아래 표가 붙어 보이던 것 (2026-09-19) — 줄 아래 여백을 준다.
   .d-flex > .cust-sec 의 margin-bottom 을 0 으로 죽여 두어 표가 단추에 닿아 있었다. */
.d-flex.align-items-center.mt-5,
.d-flex.align-items-center.justify-content-between.mt-5,
.d-flex:has(> .cust-sec){margin-bottom:12px}
.d-flex:has(> .cust-sec) .round-btn,
.d-flex:has(> .cust-sec) .board-btn{flex:0 0 auto}
/* 표 제목 줄이 admin-content__head 안에 있는 화면(전자결재·사은품 등)도 같은 간격 */
.nb-head .nb-tabs{margin-bottom:6px}

/* 상담내역 삭제 단추 — 칸 밖으로 삐져나오던 것 (2026-09-19). .board-btn 의 min-width:74px !important 가 원인이었다 */
table.table td.log-act .board-btn.xs,
td.log-act .board-btn.xs{min-width:0 !important;margin:0 !important;width:auto !important;padding:0 10px !important}
.table.type--1.cust-log > tr > td.log-act,
.table.type--1.cust-log--left > tr > td.log-act{padding-right:10px !important}

/* 공지사항 화면은 흰 바탕 (사용자 지시 2026-09-19) */
main#contents:has(.nt-card),
main#contents:has(.nt-list),
main#contents:has(.nt-board){background:#fff}

/* 임직원 목록 [직원등록] — 줄 맨 오른쪽 (2026-09-19) */
.admin-content__head .page-title:has(> .ml-list-new){display:flex;align-items:center;gap:8px;width:100%}
.ml-list-new{margin-left:auto !important}

/* 고르기 칸 체크박스 — 줄 한가운데 (2026-09-19, 모든 목록 공통) */
.table td:has(> .input-label--checkbox.no-txt),
.table th:has(> .input-label--checkbox.no-txt){vertical-align:middle !important;text-align:center}
.table .input-label--checkbox.no-txt{display:inline-flex;align-items:center;justify-content:center;margin:0 !important;vertical-align:middle}
.table .input-label--checkbox.no-txt .input-label__txt{margin:0}

/* 재직·퇴직·배정 — 상자 없이 글자색만 (사용자 지시 2026-09-19) */
.ml-st,.ml-st--on,.ml-st--off{background:none !important;border:0 !important;padding:0 !important;min-width:0 !important;border-radius:0 !important;font-weight:700}
.ml-st--on{color:var(--orange-deep) !important}
.ml-st--off{color:#8a8f98 !important}

/* 상담내역 관리 칸 — 머리글도 버튼과 같은 오른쪽 줄 (2026-09-19) */
.table.cust-log th:last-child,
.table.cust-log--left th:last-child{text-align:right !important;padding-right:16px !important}
.table.type--1.cust-log > tr > td.log-act,
.table.type--1.cust-log--left > tr > td.log-act,
td.log-act{padding-right:16px !important}

/* 상담관리·TA관리 줄의 [부재] 단추 — 줄 오른쪽 끝 (2026-09-19) */
.status-section{position:relative}
.status-section .btn-absent-go{position:absolute;right:0;top:50%;transform:translateY(-50%);width:56px !important;min-width:0 !important;height:56px !important;padding:0 !important;font-size:14px;font-weight:700;line-height:1;border-radius:12px;display:inline-flex;align-items:center;justify-content:center}
.cv-note{margin:0 0 10px;font-size:12.5px;color:#8a8f98}
@media (max-width:767px){.status-section .btn-absent-go{position:static;transform:none;display:inline-flex;margin-left:8px;vertical-align:middle}}

/* 자녀 추가 단추 — 회색, 입력 줄과 상하 가운데 (2026-09-19) */
.child-wrap{align-items:center}
#btn-child-add{align-self:center;height:30px;line-height:28px;padding:0 14px;white-space:nowrap}
.child-row{align-items:center}

/* 상담 구분 · 방문상담 칸 (2026-09-19) */
.memo-kind{display:flex;gap:8px;margin:0 0 8px}
.memo-kind__i input{position:absolute;opacity:0;width:0;height:0}
.memo-kind__i span{display:inline-block;padding:6px 16px;border:1px solid #DCDDE2;border-radius:999px;background:#fff;font-size:13.5px;font-weight:600;color:#3a3a3c;cursor:pointer}
.memo-kind__i input:checked + span{background:var(--lapl-green);border-color:var(--lapl-green);color:#fff}
.visit-box{border:1px solid #DCDEEB;background:#F7F8FB;border-radius:12px;padding:12px 14px;margin:0 0 10px}
.visit-box__t{margin:0 0 8px;font-size:13.5px;font-weight:700;color:#253173}
.visit-f{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:13.5px}
.visit-f > span:first-child{flex:0 0 96px;color:#6E6E73;font-weight:600}
.visit-f input[type=text]{flex:1 1 auto;height:32px;border:1px solid #DCDDE2;border-radius:8px;padding:0 10px;background:#fff}
.visit-gift{display:flex;gap:6px}
.visit-gift label{display:inline-flex;align-items:center}
.visit-gift input{position:absolute;opacity:0;width:0;height:0}
.visit-gift span{display:inline-block;padding:5px 12px;border:1px solid #DCDDE2;border-radius:999px;background:#fff;font-size:13px;cursor:pointer}
.visit-gift input:checked + span{background:var(--orange-deep);border-color:var(--orange-deep);color:#fff;font-weight:600}
.visit-box__n{margin:4px 0 0;font-size:12.5px;color:#6E6E73}
@media (max-width:767px){.visit-f{flex-wrap:wrap}.visit-f > span:first-child{flex-basis:100%}}

/* 회원정보 화면의 동작 단추 — 저장·등록·삭제 크기와 오른쪽 줄을 하나로 (2026-09-19) */
.cv-act.board-btn{height:30px !important;min-width:64px !important;padding:0 14px !important;font-size:13px !important;line-height:28px !important;border-radius:8px !important;display:inline-flex;align-items:center;justify-content:center}
.cv-wrap .btn-bx{text-align:right;padding-right:16px}
.cv-wrap .btn-bx .board-btn{margin:0}
.cv-wrap .cv-card > .d-flex .cv-act{margin-right:16px}
.cv-wrap td.log-act{text-align:right !important;padding-right:16px !important;vertical-align:top}
.cv-wrap .table.cust-log th:last-child{text-align:right !important;padding-right:16px !important}
/* 상담등록의 [등록] 줄도 같은 오른쪽 줄에 */
.cv-wrap div[style*="text-align: right"]{padding-right:16px}

/* 방문상담 칸 — 흰 바탕, 일시·장소·내용·해피박스 (2026-09-19) */
.visit-box{background:#fff !important;border:1px solid #E5E5EA !important;border-radius:12px;padding:14px 16px;margin:0 0 10px}
.visit-box__t{display:flex;align-items:center;gap:6px;margin:0 0 10px;font-size:14px;font-weight:700;color:var(--text)}
.visit-box__t .cf-ico{width:17px;height:17px}
.visit-f{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:13.5px}
.visit-f--memo{align-items:flex-start}
.visit-f__l{flex:0 0 104px;display:inline-flex;align-items:center;gap:5px;color:#6E6E73;font-weight:600}
.visit-f__l .cf-ico{width:15px;height:15px}
.visit-f__v{flex:1 1 auto;display:flex;align-items:center;gap:6px;min-width:0}
.visit-f__v em{font-style:normal;color:#8a8f98;font-size:12.5px}
.visit-in{height:32px;border:1px solid #DCDDE2;border-radius:8px;padding:0 10px;background:#fff;font-size:13.5px}
.visit-in--date{width:150px}
.visit-in--time{width:70px;padding:0 6px}
.visit-f__v > input[type=text],.visit-f__v > textarea{flex:1 1 auto;width:100%}
.visit-f__v textarea{height:auto;min-height:64px;padding:8px 10px;line-height:1.5}
.visit-gift__c input{position:absolute;opacity:0;width:0;height:0}
.visit-gift__c span{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border:1px solid #DCDDE2;border-radius:8px;background:#fff;font-size:13px;cursor:pointer}
.visit-gift__c span::before{content:"";width:14px;height:14px;border:1.5px solid #C7C7CC;border-radius:3px}
.visit-gift__c input:checked + span{border-color:var(--orange-deep);color:var(--orange-deep);font-weight:700}
.visit-gift__c input:checked + span::before{background:var(--orange-deep);border-color:var(--orange-deep)}
.visit-box__n{margin:6px 0 0;font-size:12.5px;color:#8a8f98}
@media (max-width:767px){.visit-f{flex-wrap:wrap}.visit-f__l{flex-basis:100%}}

/* 회원정보 단추 줄맞춤·부재·구분 글자 다듬기 (2026-09-19) */
.cv-wrap .cv-act.board-btn{min-width:64px !important;width:auto !important;height:30px !important;padding:0 14px !important;font-size:13px !important;line-height:28px !important;border-radius:8px !important}
.cv-wrap div[style*="text-align: right"]{padding-right:0 !important}
/* 부재 단추가 칸 밖으로 나가던 것 — 칸에 자리를 내주고 단추를 줄인다 */
.status-section{min-height:44px;padding-right:56px}
.status-section .btn-absent-go{width:40px !important;height:40px !important;font-size:12.5px;border-radius:10px}
/* 구분은 글자로 */
.memo-kind{display:flex;align-items:center;gap:0;margin:0 0 10px}
.memo-kind__i span{display:inline-block;padding:2px 2px;border:0 !important;background:none !important;border-radius:0;font-size:14px;font-weight:600;color:#8a8f98;cursor:pointer}
.memo-kind__i input:checked + span{background:none !important;color:var(--lapl-green) !important;font-weight:800;text-decoration:underline;text-underline-offset:5px}
.memo-kind__bar{font-style:normal;color:#C5C5CC;margin:0 10px}
/* 증정완료 — 테두리 있는 네모 칸 */
.visit-gift__c span{display:inline-flex !important;align-items:center;gap:7px;padding:7px 14px !important;border:1px solid #DCDDE2 !important;border-radius:8px !important;background:#fff !important;font-size:13px;color:#3a3a3c;cursor:pointer}
.visit-gift__c span::before{content:"";display:inline-block;width:15px;height:15px;border:1.5px solid #C7C7CC;border-radius:4px;background:#fff}
.visit-gift__c input:checked + span{border-color:var(--orange-deep) !important;color:var(--orange-deep);font-weight:700}
.visit-gift__c input:checked + span::before{background:var(--orange-deep);border-color:var(--orange-deep)}

/* 단추 크기 — .cust-info td:last-child 규칙(:last-child 가 한 칸 더 세다)보다 세게 (2026-09-19) */
.cv-wrap .cust-info td .cv-act.board-btn,
.cv-wrap .cust-info td:last-child > .cv-act.board-btn{min-width:64px !important;width:auto !important;height:30px !important;padding:0 14px !important;line-height:28px !important}
/* 위쪽 목록·수정·삭제도 같은 크기로 */
.cv-wrap .btn-bx .board-btn{height:30px !important;min-width:64px !important;padding:0 14px !important;font-size:13px !important;line-height:28px !important;border-radius:8px !important;display:inline-flex;align-items:center;justify-content:center}
.cv-wrap .btn-bx.mt-11{display:flex;gap:8px}
.cv-wrap .btn-bx.mt-11 .board-btn{margin:0 !important}

/* ══ 표 안 단추 배치 규정 (2026-09-19, 전 화면 공통) ══
   칸에 단추가 들어 있으면 그 칸은 줄 높이의 한가운데에 놓는다.
   내용이 긴 줄에서도 단추가 어디 붙을지 헷갈리지 않게 — 예전에는 칸마다 위/가운데가 뒤섞여 있었다. */
.table td:has(.board-btn),
.table td:has(.round-btn),
.table td:has(button),
.table td:has(input[type=button]),
.table td:has(input[type=submit]),
.table td:has(.btn-flat),
.table td:has(.ibtn),
.c-t td:has(button),
.c-t td:has(.c-btn){vertical-align:middle !important}
/* 위로 붙여 두었던 예전 규칙을 덮는다 (상담내역·계약내역의 관리 칸) */
table.table td.log-act,
.cv-wrap td.log-act,
.table.type--1.cust-log > tr > td.log-act,
.table.type--1.cust-log--left > tr > td.log-act{vertical-align:middle !important;padding-top:8px !important;padding-bottom:8px !important}
/* 단추 자체도 글자를 가운데로 */
.table td .board-btn,
.table td .round-btn,
.table td .btn-flat{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}

/* 증정완료 — 네모 칸 테두리는 빼고 체크만 (사용자 지시 2026-09-19) */
.visit-gift__c span{border:0 !important;background:none !important;padding:0 !important}
.visit-gift__c input:checked + span{border:0 !important}

/* 수령증 사진 올리기 (2026-09-19) */
.visit-f__v--gift{flex-wrap:wrap;gap:6px 12px}
.visit-shot{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:1px solid #DCDDE2;border-radius:8px;background:#fff;font-size:13px;color:#3a3a3c;cursor:pointer}
.visit-shot input{position:absolute;opacity:0;width:0;height:0}
.visit-shot .cf-ico{width:16px;height:16px;margin:0}
.visit-shot:hover{border-color:var(--lapl-green);color:var(--lapl-green)}
.visit-shot__n{font-style:normal;font-size:12px;color:#253173;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 부재 단추 — 칸(상담관리·TA관리) 높이의 한가운데 (2026-09-19 재조정) */
.role-block .status-section:first-child{position:static}
.role-block{position:relative}
.role-block .btn-absent-go{position:absolute !important;right:12px;top:50% !important;transform:translateY(-50%) !important}
.status-section{padding-right:70px}

/* 부재 안내 — 초록 박스 안 맨 아래 오른쪽 (2026-09-19) */
.role-block .cv-note{margin:6px 12px 2px 0;text-align:right;font-size:12.5px;color:#6E6E73}

/* 부재 안내 — 박스 오른쪽 끝에 붙인다 (2026-09-19) */
.role-block .cv-note{margin:6px 0 0 !important;padding-right:0 !important;text-align:right !important;width:100%}

/* 부재 안내 — 초록 박스 바깥 아래, 오른쪽 끝 (2026-09-19) */
.cv-note--out{margin:8px 0 12px !important;text-align:right !important;width:100%;font-size:12.5px;color:#6E6E73}

/* 방문 결과 표시 (2026-09-19) */
.visit-f__v--tags{flex-wrap:wrap;gap:6px 14px}
.visit-tag{display:inline-flex;align-items:center;cursor:pointer}
.visit-tag input{position:absolute;opacity:0;width:0;height:0}
.visit-tag span{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#3a3a3c}
.visit-tag span::before{content:"";display:inline-block;width:15px;height:15px;border:1.5px solid #C7C7CC;border-radius:4px;background:#fff}
.visit-tag input:checked + span{color:var(--lapl-green);font-weight:700}
.visit-tag input:checked + span::before{background:var(--lapl-green);border-color:var(--lapl-green)}

/* 수령증 업로드 — 테두리 없이 (사용자 지시 2026-09-19) */
.visit-shot{border:0 !important;background:none !important;padding:0 !important;color:#3a3a3c}
.visit-shot:hover{color:var(--lapl-green)}

/* 상담등록 — 작성자 칸을 뺀 뒤 내용 칸이 화면 폭을 쓴다 (2026-09-19) */
.cv-write > tbody > tr > td,.cv-write > tr > td{width:auto !important}
.cv-write > tbody > tr > th,.cv-write > tr > th{width:auto !important}

/* 상담등록 — 네 묶음을 표의 줄로 (2026-09-19). 분홍·하늘 바탕 대신 줄로 나눈다 */
.cv-write tr.cv-st > th{color:#6E6E73;font-weight:700;font-size:13px;vertical-align:middle;white-space:nowrap}
.cv-write tr.cv-st > td{padding-top:8px !important;padding-bottom:8px !important}
.cv-write .role-block,.cv-write .role-block--csr,.cv-write .role-block--pm{background:none !important;border:0 !important;padding:0 !important;margin:0 !important;border-radius:0 !important}
.cv-write .status-section{margin:0 !important;padding:0 56px 0 0 !important;min-height:34px;display:flex;align-items:center}
.cv-write .status-options{display:flex;flex-wrap:wrap;gap:2px 10px}
.cv-write .btn-absent-go{position:absolute !important;right:8px;top:50% !important;transform:translateY(-50%) !important}
.cv-write tr.cv-st > td{position:relative}
.cv-write tr.cv-st--note th{border-right-color:transparent}
.cv-write .cv-st__note .cv-note{margin:0 !important;text-align:right}

/* 상담등록 표 — 줄과 칸을 선으로 나눈다 (사용자 지시 2026-09-19) */
.cv-write{border-top:1px solid var(--border,#E5E5EA) !important}
.cv-write > tbody > tr > th,.cv-write > tr > th,
.cv-write > tbody > tr > td,.cv-write > tr > td{border-bottom:1px solid var(--border,#E5E5EA) !important}
.cv-write > tbody > tr > th,.cv-write > tr > th{border-right:1px solid var(--border,#E5E5EA) !important;background:#FAFAFB}
.cv-write tr.cv-st--note > th,.cv-write tr.cv-st--note > td{border-bottom:1px solid var(--border,#E5E5EA) !important}

/* 상담등록 라디오 — 네모 칸으로 (사용자 지시 2026-09-19) */
.cv-write .status-options input[type=radio]{
	-webkit-appearance:none;appearance:none;width:16px;height:16px;margin:0 6px 0 0;
	border:1.5px solid #C7C7CC;border-radius:4px;background:#fff;vertical-align:-3px;cursor:pointer;position:relative}
.cv-write .status-options input[type=radio]:checked{border-color:var(--lapl-green);background:var(--lapl-green)}
.cv-write .status-options input[type=radio]:checked::after{
	content:;position:absolute;left:4px;top:0;width:5px;height:10px;
	border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.cv-write .status-options input[type=radio]:disabled{background:#F2F2F5;border-color:#E1E1E6;cursor:default}
.cv-write .status-options label{margin-right:0;font-size:13px;color:#3a3a3c;cursor:pointer}
.cv-write .status-option{display:inline-flex;align-items:center}

/* 라디오 동그라미 흔적 제거 (사용자 지시 2026-09-19) — 기본 모양과 :before 표시를 모두 끈다 */
.cv-write .status-options input[type=radio],
.cv-write input[type=radio]{-webkit-appearance:none !important;appearance:none !important;background-image:none !important;box-shadow:none !important}
.cv-write .status-options input[type=radio]::before,
.cv-write input[type=radio]::before{content:none !important;display:none !important}
.cv-write .status-options label::before,
.cv-write .status-option label::before{content:none !important;display:none !important}

/* 상담등록 네모 칸 다듬기 (사용자 지시 2026-09-19) — 동그라미 자리(라벨 왼쪽 여백)를 없애고 칸 간격을 넓힌다 */
.cv-write .status-options label{padding-left:0 !important;margin-left:0 !important;line-height:1.4}
.cv-write .status-options label::before,
.cv-write .status-options label::after{content:none !important;display:none !important;border:0 !important;background:none !important;width:0 !important;height:0 !important}
.cv-write .status-options input[type=radio]{width:16px !important;height:16px !important;min-width:16px;flex:0 0 16px}
.cv-write .status-options{gap:8px 26px !important}
.cv-write .status-option{margin:0 !important}
/* 줄 구분선이 표 끝까지 이어지게 */
.cv-write{border-collapse:collapse !important;width:100%}
.cv-write > tbody > tr > th,.cv-write > tr > th,
.cv-write > tbody > tr > td,.cv-write > tr > td{border-bottom:1px solid var(--border,#E5E5EA) !important}

/* 상담등록 표 — 줄선이 내용 칸까지 이어지게 (사용자 지시 2026-09-19) */
table.table.type--1.cust-info.cv-write > tbody > tr > td,
table.table.type--1.cust-info.cv-write > tr > td,
table.table.type--1.cust-info.cv-write > tbody > tr > th,
table.table.type--1.cust-info.cv-write > tr > th{border-bottom:1px solid var(--border,#E5E5EA) !important}
table.table.type--1.cust-info.cv-write > tbody > tr:last-child > td,
table.table.type--1.cust-info.cv-write > tr:last-child > td{border-bottom:0 !important}

/* 상담내용 한 줄 차림표 (2026-09-19) */
.memo-kind{flex-wrap:wrap}
.memo-kind__a{display:inline-block;padding:2px 2px;font-size:14px;font-weight:600;color:#8a8f98;text-decoration:none}
.memo-kind__a:hover{color:var(--lapl-green)}
.memo-kind__a.is-on{color:var(--lapl-green);font-weight:800;text-decoration:underline;text-underline-offset:5px}
.memo-kind__logo{height:14px;vertical-align:-2px;margin-right:4px}
.memo-oldbtn{display:none !important}

/* 상담등록 선택지 — 글자 키우고 넉넉하게 (사용자 지시 2026-09-19) */
.cv-write .status-options{gap:10px 30px !important;padding:2px 0}
.cv-write .status-options label{font-size:14.5px !important;letter-spacing:-.2px}
.cv-write .status-options input[type=radio]{width:17px !important;height:17px !important;margin-right:8px !important}
.cv-write .status-option{padding:2px 0}
.cv-write tr.cv-st > td{padding-top:12px !important;padding-bottom:12px !important}
.cv-write tr.cv-st > th{font-size:14px;padding-left:16px}

/* 일정등록 칸 — 방문상담과 같은 모양 (2026-09-19) */
.visit-box--sched{margin-top:10px}
#schedule_details{margin-top:0 !important}
.cust-sec .cf-head__ico{width:18px;height:18px;margin-right:7px;vertical-align:-3px}

/* 상담등록 네모 칸 — 체크 표시까지 또렷하게 (사용자 지시 2026-09-19) */
.cv-write .status-options input[type=radio]{border:1.5px solid #C7C7CC !important;border-radius:4px !important;background:#fff !important}
.cv-write .status-options input[type=radio]:checked{background:var(--lapl-green) !important;border-color:var(--lapl-green) !important}
.cv-write .status-options input[type=radio]:checked::after{
	content: !important;display:block !important;position:absolute;left:5px;top:1px;width:5px;height:10px;
	border:solid #fff !important;border-width:0 2px 2px 0 !important;transform:rotate(45deg);border-radius:0}
.cv-write .status-options input[type=radio]:disabled{background:#F4F4F6 !important;border-color:#E1E1E6 !important}
.cv-write .status-options input[type=radio]:disabled:checked{background:#B9BBC0 !important;border-color:#B9BBC0 !important}

/* 상담등록 이름표 아이콘 (2026-09-19) */
.cv-write > tbody > tr > th,.cv-write > tr > th{white-space:nowrap}
.cv-write th .cf-ico{width:16px;height:16px;margin:0 7px -3px 0}

/* 상담등록 선택지 — 줄맞춰 가지런히 (사용자 지시 2026-09-19) */
.cv-write .status-options{display:grid !important;grid-template-columns:repeat(auto-fill,minmax(118px,1fr)) !important;gap:10px 8px !important}
.cv-write .status-option{display:flex;align-items:center;min-width:0}
.cv-write .status-options label{font-size:13.5px !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-write .status-options input[type=radio]{width:16px !important;height:16px !important;margin-right:7px !important}
.cv-write tr.cv-st > td{padding-top:14px !important;padding-bottom:14px !important}
/* 부재 단추 — 초록 바탕에 흰 글씨 (사용자 지시 2026-09-20) */
.status-section .btn-absent-go,
.cv-write .btn-absent-go{background:var(--lapl-green,#253272) !important;border:1.5px solid var(--lapl-green,#253272) !important;color:#fff !important;font-weight:700}
.status-section .btn-absent-go:hover,
.cv-write .btn-absent-go:hover{background:#18204B !important;border-color:#18204B !important;color:#fff !important}
@media (max-width:767px){.cv-write .status-options{grid-template-columns:repeat(auto-fill,minmax(96px,1fr)) !important}}

/* 부재 단추 — 저장 단추와 같은 크기·같은 오른쪽 줄 (사용자 지시 2026-09-19) */
.cv-write .btn-absent-go,
.status-section .btn-absent-go{
	width:64px !important;min-width:64px !important;height:30px !important;
	padding:0 14px !important;font-size:13px !important;line-height:28px !important;border-radius:8px !important;
	right:16px !important}
.cv-write .status-section{padding-right:92px !important}

/* 상담등록 선택지 — 한 줄로 (사용자 지시 2026-09-19). 칸이 좁으면 가로로 밀어 본다 */
.cv-write .status-options{display:flex !important;flex-wrap:nowrap !important;align-items:center;gap:0 18px !important;overflow-x:auto;padding-bottom:2px}
.cv-write .status-option{flex:0 0 auto}
.cv-write .status-options label{white-space:nowrap}
.cv-write .status-options::-webkit-scrollbar{height:6px}
.cv-write .status-options::-webkit-scrollbar-thumb{background:#DCDDE2;border-radius:3px}
@media (max-width:767px){.cv-write .status-options{gap:0 14px !important}}

/* 상담등록 선택지 — 왼쪽 여백 (사용자 지시 2026-09-19): 이름표 칸 선에 붙지 않게 */
.cv-write tr.cv-st > td{padding-left:18px !important}
.cv-write .status-section{padding-left:0 !important}
.cv-write .status-options{padding-left:0 !important}

/* 상담등록 — 아래 상담내역과 같은 글자 크기 (사용자 지시 2026-09-19). 표 기본값 15px 로 맞춘다 */
.cv-write > tbody > tr > th,.cv-write > tr > th{font-size:var(--fs-base,15px) !important;font-weight:700}
.cv-write .status-options label{font-size:var(--fs-base,15px) !important}
.cv-write .memo-kind__i span,.cv-write .memo-kind__a{font-size:var(--fs-base,15px) !important}
.cv-write textarea,.cv-write input[type=text],.cv-write .visit-in{font-size:var(--fs-base,15px) !important}
.cv-write .visit-f__l,.cv-write .visit-tag span,.cv-write .visit-gift__c span{font-size:14px !important}
.cv-write .cv-note,.cv-write .visit-box__n{font-size:13px !important}
.cv-write .status-options input[type=radio]{width:17px !important;height:17px !important}
.cv-write .status-options input[type=radio]:checked::after{left:5px;top:1px;width:5px;height:11px}

/* 관리 머리글 — 단추 한가운데 (2026-09-19) */
.log-act-h{display:inline-block;width:64px;text-align:center}

/* 부재 안내 줄 — 칸을 합치고 오른쪽 끝 (사용자 지시 2026-09-19) */
table.table.type--1.cust-info.cv-write > tbody > tr.cv-st--note > td,
table.table.type--1.cust-info.cv-write > tr.cv-st--note > td{text-align:right !important;padding:8px 16px !important;background:#fff}
.cv-write tr.cv-st--note .cv-note{margin:0 !important;text-align:right !important}

/* 상담내용 차림표 아이콘 — 초록 (2026-09-19) */
.mk-ico{width:16px;height:16px;margin-right:6px;vertical-align:-3px;fill:none;stroke:var(--lapl-green,#253173);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.memo-kind__i span,.memo-kind__a{display:inline-flex;align-items:center}
.memo-kind__i input:not(:checked) + span .mk-ico,.memo-kind__a:not(.is-on) .mk-ico{stroke:#8a8f98}
.memo-kind__a:hover .mk-ico{stroke:var(--lapl-green,#253173)}

/* 부재 안내 — 볼드 없이 (사용자 지시 2026-09-19) */
.cv-write tr.cv-st--note .cv-note,
.cv-write tr.cv-st--note .cv-note b,
.cv-note--out{font-weight:400 !important;color:#8a8f98}

/* 방문상담 안내 — 오른쪽 끝 (사용자 지시 2026-09-19) */
.visit-box__n{text-align:right !important;font-weight:400 !important;color:#8a8f98;margin:8px 0 0 !important}

/* 주요상담·상담내역 — 이름표 칸을 상담등록과 같게 (사용자 지시 2026-09-19): 회색 바탕 + 오른쪽 선 */
.cv-wrap #address_save .cust-info > tbody > tr > th,
.cv-wrap #address_save .cust-info > tr > th,
.cv-wrap #month_price_save .cust-info > tbody > tr > th,
.cv-wrap #month_price_save .cust-info > tr > th,
.cv-wrap #child_save .cust-info > tbody > tr > th,
.cv-wrap #child_save .cust-info > tr > th,
.cv-wrap #significant_save .cust-info > tbody > tr > th,
.cv-wrap #significant_save .cust-info > tr > th,
.cv-wrap .cust-log > tbody > tr > th,
.cv-wrap .cust-log > tr > th{background:#FAFAFB !important;border-right:1px solid var(--border,#E5E5EA) !important}
/* 상담내역 머리줄은 칸마다 선을 긋지 않는다 — 첫 칸(작성자)만 */
.cv-wrap .cust-log > tbody > tr:first-child > th,
.cv-wrap .cust-log > tr:first-child > th{border-right:0 !important}
.cv-wrap .cust-log > tbody > tr:first-child > th:first-child,
.cv-wrap .cust-log > tr:first-child > th:first-child{border-right:1px solid var(--border,#E5E5EA) !important}

/* 팝업 자리·버튼 (2026-09-19) */
#Popup .cnt_bx{max-height:calc(100vh - 80px) !important;overflow-y:auto}
/* 목록·수정·삭제 등 화면 아래 단추 크기 통일 */
.btn-bx .board-btn,.btn-bx .round-btn{height:32px !important;min-width:72px !important;padding:0 16px !important;font-size:13.5px !important;line-height:30px !important;border-radius:8px !important;display:inline-flex;align-items:center;justify-content:center}
.btn-bx{display:flex;gap:8px;align-items:center}
.btn-bx .board-btn{margin:0 !important}

/* 기본정보·상담정보 — 첫 줄 위에도 선 (사용자 지시 2026-09-19) */
.cv-tbl.table.type--1 > tbody > tr:first-child > th,
.cv-tbl.table.type--1 > tbody > tr:first-child > td,
.cv-tbl.table.type--1 > tr:first-child > th,
.cv-tbl.table.type--1 > tr:first-child > td{border-top:1px solid #F0F0F3 !important}

/* 겹침창 — 화면을 덮는 스크롤 판 (사용자 지시 2026-09-19: 아래가 걸쳐 잘리던 것) */
#Popup{position:fixed !important;top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;
	width:auto !important;height:auto !important;margin:0 !important;padding:24px 12px !important;
	box-sizing:border-box;overflow-y:auto;overflow-x:hidden;z-index:999}
#Popup .cnt_bx{margin:0 auto !important;max-height:none !important;height:auto !important;
	width:fit-content;max-width:min(1100px,96vw);border-radius:12px;border:0 !important;box-shadow:0 10px 40px rgba(0,0,0,.25) !important}
#Popup .btn_close{position:sticky;float:right;top:0;right:0;z-index:2}
@media (max-width:767px){#Popup{padding:12px 8px !important}#Popup .cnt_bx{max-width:100%}}

/* 기본정보·상담정보 — 마지막 줄 아래에도 선 (사용자 지시 2026-09-19: 참고사항·첨부파일 밑) */
.cv-tbl.table.type--1 > tbody > tr:last-child > th,
.cv-tbl.table.type--1 > tbody > tr:last-child > td,
.cv-tbl.table.type--1 > tr:last-child > th,
.cv-tbl.table.type--1 > tr:last-child > td{border-bottom:1px solid #F0F0F3 !important}

/* 기본정보·상담정보 — 이름표 칸 오른쪽 세로선 (사용자 지시 2026-09-19) */
.cv-tbl.table.type--1 > tbody > tr > th,
.cv-tbl.table.type--1 > tr > th{border-right:1px solid #F0F0F3 !important}

/* 기본정보·상담정보 — 선 옆 여백 (사용자 지시 2026-09-19) */
.cv-tbl.table.type--1 > tbody > tr > td,
.cv-tbl.table.type--1 > tr > td{padding-left:18px !important}
.cv-tbl.table.type--1 > tbody > tr > th,
.cv-tbl.table.type--1 > tr > th{padding-right:14px !important}

/* 배정일 등 오른쪽 끝 (2026-09-19) */
.cv-tbl td{position:relative}
.cv-right{float:right;margin-left:12px}

/* PM 이름 옆 소속 (2026-09-19) */
.cv-org{color:#8a8f98;font-weight:500;margin-left:2px}

/* 푸터 — 검은 바탕 대신 검은 글씨 (사용자 지시 2026-09-19) */
.site-footer{background:transparent !important;border-top:1px solid var(--border,#E5E5EA)}
.site-footer,.site-footer p,.site-footer li,.site-footer a,
.site-footer .site-footer__row,.site-footer .site-footer__copy{color:#1d1d1f !important}
.site-footer a:hover{color:var(--lapl-green,#253173) !important}
.site-footer svg{stroke:#1d1d1f !important;fill:none}
.site-footer .site-footer__copy{color:#8a8f98 !important}

/* 푸터 — 세로로 넉넉하게, 진한 회색 글씨 (사용자 지시 2026-09-19) */
.site-footer{padding:52px var(--page-pad) 60px !important}
.site-footer__inner{line-height:1.9}
.site-footer__contact{margin-top:18px !important;gap:10px 26px}
.site-footer__copy{margin-top:16px !important}
.site-footer,.site-footer p,.site-footer li,.site-footer a,
.site-footer .site-footer__row{color:#4A4A4F !important}
.site-footer .site-footer__copy{color:#9A9AA0 !important}
.site-footer svg{stroke:#4A4A4F !important}

/* 푸터 — 저작권 한 줄만 (2026-09-19) */
.site-footer__copy{margin:0 !important}
.site-footer{padding:16px var(--page-pad) 18px !important}

/* 주요상담 주소 — 시·구 칸을 넉넉히 (사용자 지시 2026-09-19) */
#address_save input[name=c_si]{width:150px !important;min-width:150px}
#address_save input[name=c_gu]{width:190px !important;min-width:190px}
#address_save input[name=c_address]{width:calc(100% - 370px) !important;min-width:240px}
#address_save input[type=text]{margin-right:8px}
@media (max-width:767px){#address_save input[name=c_si],#address_save input[name=c_gu],#address_save input[name=c_address]{width:100% !important;min-width:0;margin:0 0 6px}}

/* 주요상담 주소 — 세 칸을 한 줄로 (사용자 지시 2026-09-19) */
#address_save td{white-space:nowrap}
#address_save td > input[type=text]{display:inline-block;vertical-align:middle}
#address_save input[name=c_si]{width:140px !important;min-width:0 !important}
#address_save input[name=c_gu]{width:180px !important;min-width:0 !important}
#address_save input[name=c_address]{width:calc(100% - 350px) !important;min-width:200px !important}
@media (max-width:900px){#address_save input[name=c_address]{min-width:140px !important}}
@media (max-width:767px){#address_save td{white-space:normal}#address_save input[name=c_si],#address_save input[name=c_gu],#address_save input[name=c_address]{width:100% !important;margin:0 0 6px}}

/* 주소 뒤 칸 (2026-09-19) */
#address_save input[name=c_address]{width:calc(100% - 560px) !important;min-width:160px !important}
#address_save input[name=c_address2]{width:180px !important;min-width:0 !important}
@media (max-width:900px){#address_save input[name=c_address]{min-width:120px !important}}
@media (max-width:767px){#address_save input[name=c_address2]{width:100% !important;margin:0 0 6px}}

/* ── 상단바 상태 한 단어 (사용자 지시 2026-09-19) — 출근 오렌지 · 퇴근 회색 · 휴무 옅은 회색 · 접속중 흰색 ── */
.connection-status .conn-att--on  { color: #fff; }
.connection-status .conn-att--off { color: #C9CDD6; }

/* ── 주요상담 주소 — 네 칸 같은 폭, 전체 폭은 참고사항 칸(90%)과 같게 (사용자 지시 2026-09-19) ── */
#address_save .addr-row{display:flex;gap:8px;width:90%;box-sizing:border-box}
#address_save .addr-row input[type=text]{flex:1 1 0;width:auto !important;min-width:0 !important;margin:0 !important}
@media (max-width:767px){#address_save .addr-row{flex-wrap:wrap}#address_save .addr-row input[type=text]{flex:1 1 100%}}

/* ── 버튼 글자는 상하좌우 가운데 (사용자 지시 2026-09-20) ──
   프리텐다드 한글은 기준선 위로 몰려 있어 글자가 0.5~1px 떠 보인다. 위쪽에 1px 을 더 줘서 눈으로 가운데가 되게 한다.
   padding 을 !important 로 박은 규칙들(cv-act·btn-bx·부재·log-act)보다 뒤에 있고 같은 선택자를 나열해 이긴다. */
.btn,.ibtn,.board-btn,.round-btn,.btn-flat,.btn-punch,.header .btn,.cust-info .cell-actions .ibtn,
.cv-act.board-btn,.cv-wrap .cv-act.board-btn,.cv-wrap .cust-info td:last-child > .cv-act.board-btn,
.cv-wrap .btn-bx .board-btn,.btn-bx .board-btn,.btn-bx .round-btn,td.log-act .board-btn.xs,
.status-section .btn-absent-go,.cv-write .btn-absent-go{
	display:inline-flex;align-items:center;justify-content:center;text-align:center;box-sizing:border-box;
	padding-top:1px !important;padding-bottom:0 !important;
}

/* ── 겹침창 닫기 단추 — 상자 오른쪽 위 (사용자 지시 2026-09-20: 팝업에 닫기 단추가 없다) ── */
#Popup .pop_box{position:relative;margin:0 auto;width:fit-content;max-width:min(1100px,96vw)}
#Popup .pop_box .cnt_bx{margin:0 !important;max-width:none}
#Popup .btn_close{position:absolute !important;float:none !important;top:12px !important;right:12px !important;z-index:3;cursor:pointer}
@media (max-width:767px){#Popup .pop_box{max-width:100%}}

/* ── 표 칸 글자는 세로 가운데 — 모든 게시판·상담내역 공통 (사용자 지시 2026-09-20: 등록일이 위로 올라가 있다) ──
   log-date · log-act 에 'top + 위 여백' 을 박아 둔 규칙들을 되돌린다. 위아래 여백은 다른 칸과 같게(9px). */
.table td,.table th,
table.table td.log-act,table.table td.log-date,td.log-act,td.log-date,
.cv-wrap td.log-act,.comment-table td{vertical-align:middle !important}
table.table td.log-act,table.table td.log-date,td.log-act,td.log-date{padding-top:9px !important;padding-bottom:9px !important}
.comment-table td{padding-top:11px;padding-bottom:11px}

/* ── 자녀정보 — 성별은 고르고, 칸 사이는 12px (사용자 지시 2026-09-20) ── */
.child-row{gap:12px !important}
.child-row select.child-gender{height:34px;padding:0 28px 0 12px;font-size:var(--fs-sm);border:1px solid var(--border,#E4E4E7);border-radius:var(--radius-sm,6px);background:#fff;color:var(--text,#17213A);cursor:pointer}
.child-row select.child-gender:invalid,.child-row select.child-gender option[value=""]{color:var(--muted,#9A9AA0)}

/* ── 겹침창 닫기 단추 — 상자 아래 가운데 (사용자 지시 2026-09-20) ──
   .pop_box 를 흰 상자로 삼고(.cnt_bx 그림자는 끔) 단추를 그 안 맨 아래 가운데에 둔다. */
#Popup .pop_box{display:flex;flex-direction:column;align-items:stretch;background:#fff;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.25);padding-bottom:14px}
#Popup .pop_box .cnt_bx{box-shadow:none !important;border-radius:12px 12px 0 0;width:auto}
#Popup .btn_close{position:static !important;float:none !important;align-self:center;margin:2px auto 0 !important;top:auto !important;right:auto !important;min-width:96px;justify-content:center}

/* ── 주요상담 선택칸 공통 — 월 보험료(10~100만원·잘모름) · 임신주수(1~42주) · 성별 (사용자 지시 2026-09-20) ── */
.cv-wrap select.cv-select,.child-row select.cv-select{height:34px;padding:0 28px 0 12px;font-size:var(--fs-sm);border:1px solid var(--border,#E4E4E7);border-radius:var(--radius-sm,6px);background:#fff;color:var(--text,#17213A);cursor:pointer}

/* ── 계약내역 표 — 목록표라 첫 칸 뒤 세로선을 두지 않는다 (사용자 지시 2026-09-20). 상담내역(작성자 칸)에는 그대로 남긴다 ── */
.cv-wrap .cust-log.cust-contract > tbody > tr:first-child > th:first-child,
.cv-wrap .cust-log.cust-contract > tr:first-child > th:first-child{border-right:0 !important}

/* ── 공지 항목 한 줄 — "1. DB신청 - 매월 1일 · 전자결재" (사용자 지시 2026-09-20) ── */
.nt-tpl__b{display:block;line-height:1.55}
.nt-tpl__b b{display:inline !important;margin:0 !important}
.nt-tpl__b .nt-tpl__d{font-size:14px;font-weight:400;color:var(--text-2,#6B7080)}

/* ── 공지 항목 — 글씨 키우고 아이콘과 세로 가운데 (사용자 지시 2026-09-20) ── */
.nt-tpl__st{align-items:center !important}
.nt-tpl__b b{font-size:17px !important}
.nt-tpl__b .nt-tpl__d{font-size:15.5px}
@media (max-width:767px){.nt-tpl__b b{font-size:16px !important}.nt-tpl__b .nt-tpl__d{font-size:14.5px}}

/* ── 오늘 상담 추천 카드 — MY 페이지 (사용자 지시 2026-09-20) ── */
.mp-reco{list-style:none;margin:0;padding:0}
.mp-reco__i{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--divider,#F0F0F3);min-width:0}
.mp-reco__i:first-child{border-top:0}
.mp-reco__n{flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:#F2F3F7;color:var(--lapl-green,#253272);font-size:12px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.mp-reco__name{flex:0 0 auto;font-size:15px;font-weight:700;color:var(--text,#17213A);text-decoration:none;white-space:nowrap}
.mp-reco__name:hover{color:var(--lapl-green,#253272);text-decoration:underline}
.mp-reco__tag{flex:0 0 auto;padding:2px 7px;border-radius:5px;font-size:11.5px;font-weight:700;white-space:nowrap;background:#EEF0F3;color:#5B6170}
.mp-reco__i--g0 .mp-reco__tag{background:rgba(37, 50, 114,.12);color:var(--lapl-green,#253272)}
.mp-reco__i--g1 .mp-reco__tag{background:rgba(94, 100, 117,.12);color:var(--orange-deep,#4E5363)}
.mp-reco__i--g2 .mp-reco__tag{background:#E5484D;color:#fff}
.mp-reco__i--g3 .mp-reco__tag{background:rgba(47,95,168,.12);color:#2F5FA8}
.mp-reco__i--g4 .mp-reco__tag,.mp-reco__i--g5 .mp-reco__tag{background:#FFF3E8;color:#B25A1E}
.mp-reco__why{flex:1 1 auto;min-width:0;font-size:13.5px;color:var(--text-2,#6B7080);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-reco__hint{font-style:normal;font-weight:700;color:var(--orange-deep,#4E5363)}
.mp-reco__act{flex:0 0 auto;display:inline-flex;gap:6px}
.mp-reco__b{display:inline-flex;align-items:center;justify-content:center;height:28px;padding:1px 11px 0;border-radius:7px;font-size:12.5px;font-weight:700;text-decoration:none;border:1px solid var(--navy,#17213A);color:var(--navy,#17213A);background:#fff}
.mp-reco__b:hover{background:var(--navy,#17213A);color:#fff}
.mp-reco__b--call{border-color:var(--lapl-green,#253272);background:var(--lapl-green,#253272);color:#fff}
.mp-reco__b--call:hover{background:#18204B;border-color:#18204B}
.mp-reco__empty{margin:4px 0 2px;font-size:13.5px;color:var(--muted,#9A9AA0)}
@media (max-width:767px){
	.mp-reco__i{flex-wrap:wrap;gap:6px 8px}
	.mp-reco__why{flex:1 1 100%;white-space:normal;padding-left:32px}
	.mp-reco__act{margin-left:auto}
}

/* ── 제목 오른쪽 끝 링크줄 — 보험계약 'PM순위 ㅣ 조직순위' (사용자 지시 2026-09-20). MY 페이지 상단 메뉴와 같은 옷 ── */
.page-title .pt-links{margin-left:auto;display:inline-flex;align-items:center;font-size:14px;white-space:nowrap}
.pt-links__a{color:var(--text,#17213A);font-weight:600;text-decoration:none}
.pt-links__a:hover{color:var(--lapl-green,#253272)}
.pt-links__bar{color:#C5C5CC;margin:0 8px}

/* ── 라플 PM 이달 순위 카드 (사용자 지시 2026-09-20) — PM별 현황 카드와 같은 표, 순위 칸만 더한다 ── */
.rk-table th.rk-no,.rk-table td.rk-no{width:44px;text-align:center}
.rk-table td.rk-no b{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:#EEF0F3;color:#5B6170;font-size:12.5px;font-weight:800}
.rk-table tr.rk-r1 td.rk-no b{background:var(--lapl-green,#253272);color:#fff}
.rk-table tr.rk-r2 td.rk-no b{background:rgba(37, 50, 114,.16);color:var(--lapl-green,#253272)}
.rk-table tr.rk-r3 td.rk-no b{background:rgba(37, 50, 114,.08);color:var(--lapl-green,#253272)}
.rk-table tr.rk-r1 td.l a{color:var(--lapl-green,#253272)}
.rk-table td.pl-amt{font-variant-numeric:tabular-nums}
/* 제목줄에 오른쪽 링크가 있으면 제목 상자를 끝까지 늘려 링크가 진짜 오른쪽 끝에 붙게 (사용자 지시 2026-09-20) */
.admin-content__head > .page-title:has(.pt-links){flex:1 1 auto;width:100%}
.pt-links__a.is-on{color:var(--lapl-green,#253272)}

/* ── 계약관리 하위 화면 레이아웃 통일 (사용자 지시 2026-09-20) — 제목줄 → 필터 한 줄 → 표. 필터와 표 사이는 어느 화면이나 14px ── */
.admin-content__body > form[name=frmSearch]{margin:0 0 14px}
.admin-content__body > form[name=frmSearch] .filter-bar{margin:0}
/* 메인 순위 카드 1~3위 메달 — PM 순위 화면과 같은 표시 (사용자 지시 2026-09-20) */
.rk-table th.rk-no,.rk-table td.rk-no{width:64px;white-space:nowrap}
.rk-table td.rk-no{display:table-cell}
.rk-table td.rk-no .rk-medal{margin-left:4px;font-size:15px;vertical-align:middle}
.rk-table tr.rk-r1 td,.rk-table tr.rk-r2 td,.rk-table tr.rk-r3 td{font-weight:700}

/* PM 순위 표 — 두 줄 머리의 아래 줄(건수·금액)은 작은 글씨 (사용자 지시 2026-09-20: 색칠 대신) */
.tbl-list th.th-sub{font-size:12px;font-weight:600;color:var(--text-2,#6B7080)}

/* ── 라플 PM 순위 카드 폭 — 위 지사·본부현황 카드 세 장 폭 (사용자 지시 2026-09-20) ──
   같은 auto-fill 격자(org-grid)에 두고 세 칸을 차지한다. 칸이 셋이 안 되는 좁은 화면에서는 끝까지. */
.rk-grid{margin-bottom:0}
.rk-grid > .rk-card{grid-column:span 3}
@media (max-width:1040px){.rk-grid > .rk-card{grid-column:1 / -1}}

/* CSR 출근/퇴근 목록 — 이름 옆 이달 인센티브 금액 (사용자 지시 2026-09-20) */
.csr-att__inc{margin-left:6px;font-style:normal;font-size:12px;font-weight:700;color:var(--lapl-green,#253272);font-variant-numeric:tabular-nums;white-space:nowrap}
.csr-att__inc.is-zero{color:#B5B5BC;font-weight:500}

/* ── CSR 인센티브 현황 카드 — MY 페이지 (사용자 지시 2026-09-20) ── */
.mp-card--inc .mp-kpis{margin-bottom:10px}
.mp-inc-tbl tr.is-zero td{color:#9A9AA0}
.mp-inc-tbl tr.is-zero td a b{color:#9A9AA0;font-weight:500}
.mp-inc-ok{color:var(--lapl-green,#253272)}

/* ── MY 페이지 회원 목록 탭 (사용자 지시 2026-09-20: 하단 메뉴 정리) — 글자가 붙어 있던 것을 알약 단추 줄로 ── */
.mp-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.mp-tab{display:inline-flex;align-items:center;height:34px;padding:1px 14px 0;border-radius:8px;border:1px solid var(--border,#E4E4E7);background:#fff;color:var(--text,#17213A);font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap}
.mp-tab:hover{background:#F7F7F8;border-color:#C9CBD2}
.mp-tab.is-on{background:var(--navy,#17213A);border-color:var(--navy,#17213A);color:#fff}
.mp-hint{margin:0 0 12px;font-size:12.5px;color:var(--muted,#9A9AA0)}
@media (max-width:767px){.mp-tab{height:32px;padding:1px 11px 0;font-size:12.5px}}

/* 공지 목록 — 대상 표 (사용자 지시 2026-09-20) */
.nb-table .nb-to{margin-left:6px;padding:1px 6px;border-radius:4px;background:#EEF0F3;color:#5B6170;font-size:11px;font-weight:600;white-space:nowrap}

/* ── 순위 카드 옆 '신규 위촉' 카드 — 둘이 같은 크기로 나란히 (사용자 지시 2026-09-20) ── */
.rk-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
.rk-grid > .rk-card,.rk-grid > .wc-card{grid-column:auto !important}
.wc-card__t{margin:0 0 6px}
.wc-table td.l b{color:var(--text,#17213A)}
@media (max-width:1040px){.rk-grid{grid-template-columns:1fr !important}}

/* ── 라플 순위 · 신규 위촉 — 제목은 카드 위, 각 카드는 위 지사·본부현황 카드 두 장 폭 (사용자 지시 2026-09-20) ── */
.rk-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr)) !important;align-items:start}
.rk-grid > .rk-col{grid-column:span 2;min-width:0}
.rk-col > .dash-section__title{margin-bottom:10px}
.rk-col > .card{display:block}
@media (max-width:1040px){.rk-grid > .rk-col{grid-column:1 / -1}}

/* ── 전자결재 카드 (사용자 지시 2026-09-20) ── */
.ac-table td.l b{color:var(--text,#17213A)}
.ac-tag{display:inline-block;padding:2px 8px;border-radius:5px;font-size:11.5px;font-weight:700;white-space:nowrap;background:#EEF0F3;color:#5B6170}
.ac-tag--ap{background:rgba(47,95,168,.12);color:#2F5FA8}
.ac-tag--lv{background:rgba(37, 50, 114,.12);color:var(--lapl-green,#253272)}
.ac-tag--hb{background:rgba(94, 100, 117,.12);color:var(--orange-deep,#4E5363)}
.ac-tag--tg{background:rgba(111,91,176,.12);color:#6F5BB0}
.ac-what a{color:var(--text,#17213A);text-decoration:none}
.ac-what a:hover{color:var(--lapl-green,#253272);text-decoration:underline}
.ac-act{white-space:nowrap}
.ds-more-row{margin:10px 0 0;display:flex;gap:14px;flex-wrap:wrap}
.ds-more-row .ds-more{margin:0}

/* ── 순위 · 환영 카드 마무리 (사용자 지시 2026-09-20): 두 카드 같은 높이 · 마지막 줄 아래 선 · 전체 순위 보기 오른쪽 끝 · 순위 번호 세로 정렬 ── */
.rk-grid{align-items:stretch !important}
.rk-grid > .rk-col{display:flex;flex-direction:column}
.rk-col > .card{flex:1 1 auto;display:flex;flex-direction:column}
.rk-table,.wc-table{width:100%}
.rk-table tbody tr:last-child td,.wc-table tbody tr:last-child td{border-bottom:1px solid #F0F0F3}
.rk-card .ds-more{margin-top:auto;align-self:flex-end;padding-top:10px}
.rk-table th.rk-no,.rk-table td.rk-no{width:64px;text-align:left !important;padding-left:6px}
.rk-table td.rk-no{white-space:nowrap}
.rk-table td.rk-no b{vertical-align:middle}
.rk-table td.rk-no .rk-medal{display:inline-block;width:20px;margin-left:4px;text-align:center;vertical-align:middle;font-size:15px}
/* 순위 · 환영 표의 줄 높이를 같게 — 메달 때문에 순위 줄만 41px 이던 것 (사용자 지시 2026-09-20: 양 옆 선 동일하게) */
.rk-table tbody td,.wc-table tbody td{height:41px;padding-top:0;padding-bottom:0;vertical-align:middle}
.rk-table thead th,.wc-table thead th{height:31px;padding-top:0;padding-bottom:0;vertical-align:middle}
.wc-card .ds-more{margin-top:auto;align-self:flex-end;padding-top:10px}
.wc-card .ds-more--blank{visibility:hidden;pointer-events:none}

/* 공지 카드 — '대상 CSR' 이름표, 게시판 [등록] 은 오른쪽 끝 (사용자 지시 2026-09-20) */
.mp-nt__to,.dn-to{margin-left:6px;padding:1px 6px;border-radius:4px;background:#EEF0F3;color:#5B6170;font-size:11px;font-style:normal;font-weight:600;white-space:nowrap}
.nb-tabs{width:100%}
.nb-tabs__new{margin-left:auto}
.nb-tabs__new{margin-left:auto;font-size:14px;font-weight:600;color:var(--text,#17213A);text-decoration:none;background:none;border:0;padding:0;height:auto}
.nb-tabs__new:hover{color:var(--lapl-green,#253272);background:none}
/* 공지 본문 강조 — **글자** (사용자 지시 2026-09-20) */
.nt-tpl .nt-hl,.np-box .nt-hl{color:#E5484D;font-weight:800}

/* ── 프로필 사진 — 사각 라운드, 없으면 라플 로고 (사용자 지시 2026-09-20) ── */
.ph-av{display:inline-flex;align-items:center;justify-content:center;border-radius:22%;overflow:hidden;flex:0 0 auto;vertical-align:middle;background:#EEF0F3}
.ph-av img{width:100%;height:100%;object-fit:cover;display:block}
.ph-av--logo{background:var(--lapl-green,#253272)}
.ph-av--logo img{object-fit:contain;padding:14%}
.ph-av--hdr{border:1px solid rgba(255,255,255,.4);border-radius:6px}
.ph-form{display:inline-block;margin:0 12px 0 0}
.ph-btn{position:relative;display:inline-flex;padding:0;border:0;background:none;cursor:pointer;line-height:0}
.ph-btn .ph-av{box-shadow:0 0 0 1px var(--border,#E4E4E7)}
.ph-btn__cam{position:absolute;right:-3px;bottom:-3px;width:19px;height:19px;border-radius:50%;background:var(--lapl-green,#253272);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px #fff}
.ph-btn__cam svg{width:11px;height:11px;fill:none;stroke:#fff;stroke-width:2;stroke-linejoin:round}
.ph-btn:hover .ph-btn__cam{background:#18204B}
.mp-title{display:flex;align-items:center;flex-wrap:wrap}
.mp-me--ph{margin-left:94px}
@media (max-width:767px){.mp-me--ph{margin-left:0}}

/* 인사 카드 — 사진을 왼쪽에 두고 글은 오른쪽 (사용자 지시 2026-09-20) */
.dash-hello{display:flex;align-items:center;gap:14px}
.dash-hello__ph{flex:0 0 auto;line-height:0;text-decoration:none}
.dash-hello__ph .ph-av{box-shadow:0 0 0 1px var(--border,#E4E4E7)}
.dash-hello__msg{margin:0}
/* 인사 카드 — 사진 바로 오른쪽에 글 (사용자 지시 2026-09-20). 예전 규칙이 글을 오른쪽 끝으로 밀고 있었다 */
.dash-hello{justify-content:flex-start !important;align-items:center !important}
.dash-hello__msg{text-align:left}

/* 사은품 신청 — 월별 엑셀 줄 (사용자 지시 2026-09-20) */
.hb-xls{display:inline-flex;align-items:center;gap:6px;margin:0}
.hb-xls select{height:34px}

/* ── 인사 카드 — 사진 크게, 이름 아래 인사말·소속 세 줄 (사용자 지시 2026-09-20) ── */
.dash-hello{gap:16px !important}
.dash-hello__msg{display:flex;flex-direction:column;gap:2px}
.dash-hello__msg > b{line-height:1.3}
.dash-hello__line{display:block;font-size:14.5px;color:var(--text-2,#6B7080)}
.dash-hello__who{display:block;font-size:13px;color:var(--muted,#9A9AA0)}
.mp-me--sub{margin-top:1px;color:#9A9AA0}
/* 프로필 사진 — 줄일 때 부드럽게 (사용자 지시 2026-09-20: 선명하지 않다) */
.ph-av img{image-rendering:auto;-webkit-backface-visibility:hidden}
/* 베이비뉴스 칼럼 사진 가져오기 (사용자 지시 2026-09-20) */
.bn-hint{margin:0;font-size:13.5px;color:var(--text-2,#6B7080);line-height:1.7}

/* 임직원 상세정보 — 프로필 사진 칸 (사용자 지시 2026-09-20) */
.mp-photo{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.mp-photo .ph-av{box-shadow:0 0 0 1px var(--border,#E4E4E7)}
.mp-photo__side{flex:1 1 260px;min-width:0}
.mp-photo__side .lv-hint{margin:6px 0 0}
.mp-photo__side .route-opt{margin-top:6px}

/* ── HELP DESK — 누르면 이 페이지 안에서 채팅창이 열린다 (사용자 지시 2026-09-20) ──
   2026-09-19 에 떠 있는 단추를 숨기려고 .askbox-dock 을 통째로 감췄는데, 채팅창이 그 안에 있어
   같이 숨었다. HELP DESK 를 눌러도 아무 일이 없던 이유다.
   이제 단추만 숨기고 창은 화면 오른쪽 아래에 붙인다 — 긴 표 아래에서 눌러도 바로 보인다. */
.askbox-dock{display:block !important;position:static;padding:0;height:0}
.askbox-fab{display:none !important}
.askbox{position:fixed !important;right:24px;bottom:24px;z-index:1200;display:flex !important;
	width:360px;max-width:calc(100vw - 24px);max-height:min(560px,calc(100vh - 48px))}
.askbox[hidden]{display:none !important}
@media (max-width:767px){
	.askbox-dock{display:block !important}
	.askbox{display:flex !important;right:8px;left:8px;bottom:8px;width:auto;max-height:70vh}
	.askbox[hidden]{display:none !important}
}
/* 라플챗봇 창을 길게 (사용자 지시 2026-09-20) — 주고받은 말이 한눈에 보이도록 세로를 늘린다 */
.askbox{width:400px !important;max-height:min(760px,calc(100vh - 40px)) !important;height:calc(100vh - 140px)}
.askbox__body{flex:1 1 auto;min-height:0;max-height:none !important}
@media (max-width:767px){.askbox{height:auto;max-height:82vh !important}}

/* 조직도 이름표에 프로필 사진 (사용자 지시 2026-09-20) */
.org-chip{display:inline-flex;align-items:center;gap:6px}
.org-chip__av{flex:0 0 auto;border-radius:6px}
.org-chip__av.ph-av--logo img{padding:18%}

/* ── 조직도 — 본부 넷을 나란히, 지점은 카드로 (사용자 지시 2026-09-20) ──
   본부장은 본부 제목 옆에 그대로 두어 지점 카드 위에 온다. */
.org-wrap--4{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:16px}
@media (max-width:1180px){.org-wrap--4{grid-template-columns:1fr !important}}
.org-wrap--4 > .org-hq{display:flex;flex-direction:column;min-width:0}

/* 지점 카드 */
.org-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-top:12px}
.org-cards > .org-row{display:block;padding:11px 12px 10px;border:1px solid var(--border,#E4E4E7);border-radius:12px;background:#fff;min-width:0}
.org-cards > .org-row:first-child{border-top:1px solid var(--border,#E4E4E7)}
.org-cards .org-row__name{display:block;font-size:13.5px;font-weight:700;color:var(--text,#17213A)}
.org-cards .org-row__name em{margin-left:5px;font-style:normal;font-size:12px;font-weight:500;color:var(--muted,#9A9AA0)}
.org-cards .org-row__dash{display:none}
.org-cards .org-row__people{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.org-cards .org-row__act{opacity:1;margin-top:8px;display:block}
.org-cards .org-chip{max-width:100%}

/* ── 조직도 — 지점 카드를 한 줄에 넷, 크게 (사용자 지시 2026-09-20) ──
   본부 상자는 다시 한 줄을 통째로 쓴다. 본부를 둘씩 놓으면 지점 카드가 좁아 이름이 잘린다. */
.org-wrap--4{grid-template-columns:1fr !important}
.org-cards{grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:14px}
.org-cards > .org-row{padding:14px 16px 13px;border-radius:14px}
.org-cards .org-row__name{font-size:15px}
.org-cards .org-row__name em{font-size:12.5px}
.org-cards .org-row__people{gap:6px;margin-top:10px}
.org-cards .org-chip{font-size:13px;padding:5px 10px}
.org-cards .org-chip__av{width:26px !important;height:26px !important}
@media (max-width:1400px){.org-cards{grid-template-columns:repeat(3,minmax(0,1fr)) !important}}
@media (max-width:1040px){.org-cards{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
@media (max-width:700px){.org-cards{grid-template-columns:1fr !important}}

/* ── 조직도 — 지점 카드 위의 본부장 줄, 지점원은 한 줄로 나란히 (사용자 지시 2026-09-20) ── */
.org-hq__boss{display:flex;align-items:center;gap:10px;margin:12px 0 0;padding:10px 14px;border:1px solid var(--border,#E4E4E7);border-radius:12px;background:#F7F8FB}
.org-hq__boss-label{flex:0 0 auto;font-size:12px;font-weight:700;color:var(--lapl-green,#253272)}

/* 지점원은 한 줄로 나란히 — 많으면 카드 안에서 가로로 민다 */
.org-cards .org-row__people{flex-wrap:nowrap !important;overflow-x:auto;overflow-y:hidden;padding-bottom:4px;scrollbar-width:thin}
.org-cards .org-row__people::-webkit-scrollbar{height:6px}
.org-cards .org-row__people::-webkit-scrollbar-thumb{background:#DADCE1;border-radius:3px}
.org-cards .org-chip{flex:0 0 auto;white-space:nowrap}

/* ── 지점 카드 — 지점장 맨 위, 그 아래 팀장들 한 줄 (사용자 지시 2026-09-20) ── */
.org-cards .org-row__lead{display:block;margin-top:9px}
.org-cards .org-row__lead .org-chip{font-size:13.5px;font-weight:700;padding:6px 12px}
.org-cards .org-row__lead .org-chip__av{width:30px !important;height:30px !important}
.org-cards .org-row__people{margin-top:8px}

/* ── 지점 카드 — 지점장 아래 팀장들을 한 사람씩 세로로, 사진은 크게 (사용자 지시 2026-09-20) ── */
.org-cards .org-row__people{display:flex;flex-direction:column;flex-wrap:nowrap !important;align-items:stretch;
	gap:6px;margin-top:8px;overflow:visible !important;padding-bottom:0}
.org-cards .org-row__lead{display:block;margin-top:10px}
.org-cards .org-row__lead .org-chip,
.org-cards .org-row__people .org-chip{display:flex;align-items:center;gap:10px;width:100%;max-width:none;
	justify-content:flex-start;padding:7px 12px;font-size:14px;border-radius:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.org-cards .org-chip__av{width:38px !important;height:38px !important;border-radius:9px}
.org-cards .org-row__lead .org-chip__av{width:44px !important;height:44px !important;border-radius:10px}
.org-cards .org-row__lead .org-chip{font-size:15px;font-weight:800;padding:8px 12px}
/* 본부장 줄도 같은 크기로 */
.org-hq__boss .org-chip{padding:7px 12px;font-size:15px;font-weight:800;border-radius:12px}
.org-hq__boss .org-chip__av{width:44px !important;height:44px !important;border-radius:10px}
/* 본부장 줄 — 상자와 '본부장' 글자를 빼고 이름표만 (사용자 지시 2026-09-20) */
.org-hq__boss{background:none !important;border:0 !important;padding:0 !important;margin:10px 0 0 !important}
.org-hq__boss-label{display:none !important}

/* 조직도 이름 옆 위촉일 (사용자 지시 2026-09-20) */
.org-chip__dt{margin-left:auto;padding-left:8px;font-style:normal;font-size:11.5px;font-weight:500;color:var(--muted,#9A9AA0);font-variant-numeric:tabular-nums;white-space:nowrap}
.org-chip--lead .org-chip__dt{color:rgba(37, 50, 114,.62)}

/* 지점 카드 — 맨 위 사람도 아래 사람과 같은 글씨 (사용자 지시 2026-09-20: 소장섭 폰트 동일하게) */
.org-cards .org-row__lead .org-chip{font-size:14px !important;font-weight:700 !important;padding:7px 12px !important}
.org-cards .org-row__lead .org-chip__av{width:38px !important;height:38px !important;border-radius:9px !important}
/* 지점 카드 안에서는 모두 같은 글씨 — 맨 위 사람은 초록 테두리로만 구분한다 (사용자 지시 2026-09-20) */
.org-cards .org-chip{font-size:14px !important;font-weight:600 !important}
/* 본부장 이름표 — 바탕색 없이 오렌지 테두리 (사용자 지시 2026-09-20) */
.org-hq__boss .org-chip{background:#fff !important;border:1.5px solid var(--orange-deep,#4E5363) !important;color:var(--orange-deep,#4E5363) !important}
.org-hq__boss .org-chip:hover{background:#FFF7F1 !important}
.org-hq__boss .org-chip__dt{color:rgba(78, 83, 99,.7) !important}
/* 본부장 자리의 라플 로고는 오렌지 사각 (사용자 지시 2026-09-20) — 테두리와 같은 색으로 묶는다 */
.org-hq__boss .ph-av--logo{background:var(--orange-deep,#4E5363) !important}
/* 조직도 — 제목 오른쪽 끝의 [본부 추가] (사용자 지시 2026-09-20) */
.page-title .org-add{margin-left:auto}
/* [본부 추가] 가 오른쪽 끝에 서려면 제목 상자가 한 줄을 다 써야 한다 (사용자 지시 2026-09-20) */
.admin-content__head > .page-title:has(.org-add){flex:1 1 auto;width:100%}

/* 본부장이 볼 때 이름 옆 당월 매출 — 숫자가 눈에 들어오게 (사용자 지시 2026-09-20) */
.org-chip__dt{font-weight:700}

/* 이름 옆 당월 매출은 자리가 좁으면 이름을 밀어낸다 — 숫자는 줄이지 않고 이름을 줄인다 (사용자 지시 2026-09-20) */
.org-cards .org-chip{gap:8px}
.org-chip__dt{flex:0 0 auto}
/* 이름 옆 숫자(위촉일·당월 매출)는 어디서나 같은 회색 (사용자 지시 2026-09-20) */
.org-chip__dt,
.org-chip--lead .org-chip__dt,
.org-hq__boss .org-chip__dt{color:var(--muted,#9A9AA0) !important}

/* 비어 있는 자리 (사용자 지시 2026-09-20) */
.org-chip--none{display:inline-flex;align-items:center;height:52px;padding:0 14px;border:1.5px dashed var(--border,#D8DADF);border-radius:12px;
	background:#fff;color:var(--muted,#9A9AA0);font-size:14px;font-weight:600}

/* ── 본부장 이름표 폭을 아래 지점 카드 한 칸과 똑같이 (사용자 지시 2026-09-20) ──
   카드와 같은 격자에 올려 두면 화면이 좁아져도 폭이 저절로 맞는다. */
.org-hq__boss{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:10px 0 0 !important}
.org-hq__boss > .org-chip,.org-hq__boss > .org-chip--none{grid-column:1;width:100%;justify-content:flex-start}
@media (max-width:1400px){.org-hq__boss{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1040px){.org-hq__boss{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.org-hq__boss{grid-template-columns:1fr}}

/* ── 조직도 제목 옆 [위촉일 ㅣ 당월실적] (사용자 지시 2026-09-20) ──
   버튼처럼 보이면 무언가 만들어질 것 같다 — 글씨만 두고 고른 쪽만 진하게 한다. */
.org-tog{display:flex;align-items:center;gap:6px;margin:0 0 0 auto}
.org-tog__b{border:0;background:none;padding:2px 4px;cursor:pointer;
	font-size:14px;font-weight:600;color:var(--muted,#9A9AA0);line-height:1.4}
.org-tog__b.is-on{color:var(--orange,#5E6475);font-weight:800}
.org-tog__b:hover{color:var(--text,#1E1E22)}
.org-tog__bar{color:var(--border,#D8DADF);font-size:13px}

/* ── 사진 대신 쓰는 라플 사각 로고 (사용자 지시 2026-09-20) ──
   예전에는 초록 바탕에 흰 LAPL 글자만 얹었다. 이제 로고 그림 자체가 바탕까지 들고 있어
   덧칠할 바탕도, 안쪽 여백도 필요 없다 — 칸을 꽉 채워 준다. */
.ph-av--logo{background:none !important}
.ph-av--logo img{object-fit:cover !important;padding:0 !important}
.org-chip__av.ph-av--logo img{padding:0 !important}
/* 본부장 칸에 오렌지를 덧칠하던 것도 걷는다 — 로고에 이미 오렌지가 들어 있다 */
.org-hq__boss .ph-av--logo{background:none !important}

/* [위촉일 ㅣ 당월실적] 이 오른쪽 끝에 서려면 제목 상자가 한 줄을 다 써야 한다 (사용자 지시 2026-09-20) */
.admin-content__head > .page-title:has(.org-tog){flex:1 1 auto;width:100%}

/* 프로필 기본 그림은 초록 사각 로고 (사용자 지시 2026-09-20).
   본부장 칸만 오렌지로 둔다 — 테두리가 오렌지라 그림도 맞춰야 한 덩이로 보인다.
   그림 파일 자체에 색이 들어 있어 CSS 로는 칠할 수 없다. 그래서 그림을 갈아 끼운다. */
/* 본부장 칸을 오렌지로 갈아 끼우던 줄은 걷었다 (사용자 지시 2026-09-20: CSR 만 오렌지) */

/* ── 라플 공지사항 카드 글씨를 다른 카드와 똑같이 (사용자 지시 2026-09-20) ──
   이 카드만 제목 17px · 항목 17px 로 크게 잡혀 있어 MY PAGE 에서 혼자 튀었다.
   다른 카드(제목 16px · 항목 13.5px · 날짜 12px)에 맞춘다. */
.mp-card--notice .mp-card__t{font-size:16px}
.mp-card--notice .mp-nt__i b{font-size:13.5px}
.mp-card--notice .mp-nt__i small{font-size:12px}
.mp-card--notice .mp-nt__i a{padding:8px 2px;gap:8px}
@media (max-width:767px){.mp-card--notice .mp-nt__i b{font-size:13.5px}.mp-card--notice .mp-nt__i a{padding:8px 2px}}

/* ── CSR 인사관리 이름 칸 (사용자 지시 2026-09-20) ──
   재직중은 오렌지, 퇴직은 회색. 명단이 길어도 지금 일하는 사람이 먼저 눈에 든다. */
.ml-nm b, .ml-nm a{font-weight:700;text-decoration:none}
.ml-nm--on, .ml-nm--on a{color:var(--orange-deep,#4E5363) !important}
.ml-nm--off, .ml-nm--off a{color:var(--muted,#9AA0AE) !important}

/* ── 생손보 전산 바로가기 (사용자 지시 2026-09-20) ──
   원본(gasupport)처럼 생명·손해 두 칸으로 나누고 회사 이름표를 격자로 깐다.
   이름표 그림에 회사 이름과 고객센터 번호가 함께 들어 있어 글씨를 따로 얹지 않는다. */
.is-hint{margin:6px 0 0;font-size:13px;color:var(--muted,#9AA0AE)}
.is-wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.is-col{background:var(--surface,#fff);border:1px solid var(--border,#E8E4DE);border-radius:14px;padding:16px 16px 18px}
.is-col__t{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:16px;font-weight:800;color:var(--text,#17213A)}
.is-col__t::before{content:"";width:4px;height:16px;border-radius:2px;background:var(--lapl-green,#253272)}
.is-col--gi .is-col__t::before{background:var(--orange-deep,#5E6475)}
.is-col__t em{font-style:normal;font-size:13px;font-weight:600;color:var(--muted,#9AA0AE)}

.is-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.is-item{display:block;border-radius:10px;overflow:hidden;line-height:0;
	transition:transform .12s ease, box-shadow .12s ease}
.is-item img{width:100%;height:auto;display:block}
.is-item:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(23,33,58,.14)}
.is-item:focus-visible{outline:2px solid var(--lapl-green,#253272);outline-offset:2px}

@media (max-width:1180px){.is-wrap{grid-template-columns:1fr}}
@media (max-width:640px){.is-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── 생손보 전산 — 이름표를 작게, 칸은 상자 없이 회색 바탕으로 (사용자 지시 2026-09-20) ──
   1fr 로 두면 이름표가 칸 너비에 맞춰 늘어나 원본보다 커진다. 너비를 못 박아 원본 비율을 지킨다. */
.is-col{background:#F1F3F5 !important;border:0 !important;padding:14px 14px 16px}
.is-grid{grid-template-columns:repeat(auto-fill,118px);justify-content:start;gap:8px}
.is-item{background:#fff;border-radius:8px}
@media (max-width:640px){.is-grid{grid-template-columns:repeat(auto-fill,106px)}}

/* ── 생손보 전산 — 바탕을 이름표 테두리와 같은 회색으로, 크기는 원본대로 (사용자 지시 2026-09-20) ──
   이름표 그림의 바깥 테두리가 #E5E5E5 다. 칸 바탕을 같은 색으로 두고 사이를 띄우지 않으면
   그림의 테두리와 칸 바탕이 이어져 원본처럼 한 판으로 보인다.
   크기는 원본이 화면에 쓰던 146px 로 못 박는다 — 1fr 로 늘리면 칸 너비마다 달라진다. */
.is-col{background:#E5E5E5 !important;padding:12px}
.is-grid{grid-template-columns:repeat(auto-fill,146px);gap:0}
.is-item{background:none;border-radius:0}
.is-item:hover{position:relative;z-index:1;transform:none;box-shadow:0 4px 14px rgba(23,33,58,.22)}
@media (max-width:640px){.is-grid{grid-template-columns:repeat(auto-fill,minmax(0,1fr))}}

/* ── 생손보 전산 — 회색 판을 이름표 넉 장 폭에 딱 맞춘다 (사용자 지시 2026-09-20) ──
   반반으로 나누면 판이 이름표보다 넓어 오른쪽에 빈 회색이 남는다.
   판을 내용 크기로 두고 둘을 나란히 세우면 원본처럼 이름표에 꼭 맞는다. */
.is-wrap{display:flex !important;flex-wrap:wrap;gap:20px;align-items:flex-start}
.is-col{flex:0 0 auto;max-width:100%}
.is-grid{grid-template-columns:repeat(4,146px)}
@media (max-width:760px){
	.is-col{width:100%}
	.is-grid{grid-template-columns:repeat(auto-fill,146px);justify-content:center}
}

/* ── 생손보 전산 — 두 박스를 같은 크기로, 아이콘은 박스 가로에 맞춰 (사용자 지시 2026-09-20) ──
   내용 크기로 두면 손해보험 박스가 생명보험 박스보다 작아진다. 반반으로 되돌리고
   이름표를 칸 너비에 맞춰 늘린다. 높이도 둘을 같게 맞춘다 — 나란히 놓인 두 판이
   서로 다른 크기면 한쪽이 덜 채워진 것처럼 보인다. */
.is-wrap{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:stretch}
.is-col{flex:initial;width:auto;max-width:none}
.is-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1180px){.is-wrap{grid-template-columns:1fr}}
@media (max-width:640px){.is-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 생손보 전산 — 한 줄에 다섯 개 (사용자 지시 2026-09-20). 넷씩이면 이름표가 커지고 판도 길어진다 */
.is-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1180px){.is-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:640px){.is-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ── 생손보 전산 — 올리면 안쪽 흰 카드만 떠오른다 (사용자 지시 2026-09-20) ──
   회색 테두리는 그림 파일 안에 박혀 있어 CSS 로 떼어낼 수 없다.
   대신 흰 카드가 놓인 자리(사방 5% 안쪽, 이름표 35장이 모두 같다)에 덧그림을 깔고
   거기에만 그림자를 준다 — 회색까지 통째로 들리지 않고 카드만 돌출해 보인다. */
.is-item{position:relative;overflow:visible}
.is-item::after{content:"";position:absolute;inset:5%;border-radius:8px;pointer-events:none;
	transition:box-shadow .14s ease}
.is-item:hover{box-shadow:none;transform:none;z-index:1}
.is-item:hover::after{box-shadow:0 5px 14px rgba(23,33,58,.28)}
.is-item:focus-visible{outline:none}
.is-item:focus-visible::after{outline:2px solid var(--lapl-green,#253272);outline-offset:1px}

/* ── 휴대폰에서는 잠시 내려 둔다 (사용자 지시 2026-09-20) ──
   목표설정 · 프로필 사진 · 쪽지. 셋 다 휴대폰에서 당장 할 일이 아니라
   손가락으로 훑어 내려가는 길만 길게 만든다. 컴퓨터 화면에서는 그대로 보인다.
   '아직' 내려 두는 것이라, 다시 올릴 때는 이 블록만 지우면 된다. */
@media (max-width: 767px) {
	.mp-grid > #target { display: none; }
	.mp-grid > #memo   { display: none; }
	.mp-title .ph-form { display: none; }
}

/* MY PAGE 위 메뉴 — 항목과 칸막이를 한 덩이로 (사용자 지시 2026-09-20).
   한 덩이로 묶어 두면 항목을 감출 때 앞의 'ㅣ' 도 같이 사라진다. */
.mp-topmenu__i{display:inline-flex;align-items:center}
.mp-topmenu__i:first-child .mp-topmenu__bar{display:none}

/* 휴대폰에서는 지출결의서·회원등록을 내려 둔다 (사용자 지시 2026-09-20).
   회원등록은 아래 앱 탭에 이미 있어 같은 단추가 두 번 나온다.
   지출결의서는 휴대폰에서 쓰기 어려운 서식이라 컴퓨터에서 쓴다. */
@media (max-width:767px){
	.mp-topmenu__i--expense,
	.mp-topmenu__i--cust{display:none}
}

/* 휴대폰에서는 목표·쪽지 알림 띠도 내려 둔다 (사용자 지시 2026-09-20).
   목표 등록은 컴퓨터에서 하는 일인데, 휴대폰에서는 화면 맨 위 두 줄을 늘 차지한다.
   컴퓨터 화면에서는 그대로 뜬다. */
@media (max-width:767px){ .mp-wrap > .tg-alerts{display:none} }

/* ── 휴대폰·앱 상단 로그아웃을 오른쪽으로 (사용자 지시 2026-09-20) ──
   이 단추가 들어 있는 .container.header-wrap 은 좁은 화면에서도 660px 이라,
   right 로 붙이면 화면 밖으로 밀려난다 (같은 까닭으로 ☰ 가 안 보인다).
   상자의 왼쪽 끝은 화면 왼쪽과 같으므로, 화면 너비에서 되짚어 자리를 잡는다. */
@media (max-width:767px){
	.m-out__btn{left:calc(100vw - 48px) !important;right:auto}
}
.header--app .m-out__btn{left:calc(100vw - 48px) !important;right:auto}

/* 회원 목록 칩 — 휴대폰에서는 짧은 이름으로 (사용자 지시 2026-09-20).
   '연락 기다리는 회원' 넷이 좁은 화면에서 두 줄로 접혀 목록을 아래로 밀어낸다. */
.mp-tab__long, .mp-tab__short { font-weight: inherit; }
.mp-tab__short { display: none; }
@media (max-width: 767px) {
	.mp-tab__long { display: none; }
	.mp-tab__short { display: inline; }
}

/* 공지 한 줄 오른쪽 — 가운뎃점은 앞에 무언가 있을 때만 (사용자 지시 2026-09-20) */
.mp-nt__d + .mp-nt__st::before,
.mp-nt__due + .mp-nt__st::before { content: " · "; }

/* 휴대폰에서는 올린 날짜를 뺀다 (사용자 지시 2026-09-20) — 좁은 화면에서 제목을 밀어낸다.
   마감은 남긴다. 언제까지 해야 하는지가 그 줄에서 정작 봐야 할 것이다. */
@media (max-width: 767px) {
	.mp-card--notice .mp-nt__d { display: none; }
}

/* 휴대폰에서는 공지 한 줄 앞의 [공지]·[업무] 딱지를 뺀다 (사용자 지시 2026-09-20).
   좁은 화면에서 제목이 쓸 수 있는 자리를 딱지가 먼저 가져간다.
   업무인지 아닌지는 뒤에 남는 '마감 …' 으로 그대로 알 수 있다. */
@media (max-width: 767px) {
	.mp-card--notice .mp-nt__tag { display: none; }
	.mp-card--notice .mp-nt__i a { gap: 8px; }
}

/* '대상 CSR' 같은 대상 표시도 휴대폰에서는 뺀다 (사용자 지시 2026-09-20).
   내 앞으로 온 공지만 목록에 오르므로, 대상이 누구인지는 휴대폰에서 알 필요가 없다. */
@media (max-width: 767px) { .mp-card--notice .mp-nt__to { display: none; } }

/* 날짜를 감춘 자리에 가운뎃점만 남지 않게 (사용자 지시 2026-09-20).
   감춰도 DOM 에는 남아 있어 '날짜 다음 읽음표시' 규칙이 그대로 걸린다 — 여기서 끊는다.
   마감이 앞에 있는 줄은 그대로 점을 찍는다. */
@media (max-width: 767px) {
	.mp-card--notice .mp-nt__d + .mp-nt__st::before { content: none; }
}

/* 공지 본문 — 휴대폰에서는 제목과 설명을 두 줄로 (사용자 지시 2026-09-20).
   한 줄에 이어 붙이면 좁은 화면에서 설명이 문장 한가운데서 접혀 '/ 본부' 처럼 꼬리만 남는다.
   설명을 아랫줄로 내리면 앞의 '-' 는 줄머리에 혼자 남으므로 같이 감춘다. */
.nt-tpl__dash { font-style: normal; }
@media (max-width: 767px) {
	.nt-tpl__d { display: block; margin-top: 3px; }
	.nt-tpl__dash { display: none; }
}

/* 마감 날짜도 휴대폰에서는 뺀다 (사용자 지시 2026-09-20) — 목록에서는 제목만 남긴다.
   마감은 공지를 열면 본문 머리에 그대로 적혀 있다.
   날짜를 감춘 자리에 가운뎃점만 남지 않게 점도 같이 끊는다. */
@media (max-width: 767px) {
	.mp-card--notice .mp-nt__due { display: none; }
	.mp-card--notice .mp-nt__due + .mp-nt__st::before { content: none; }
}

/* ── 휴대폰 회원 목록 (사용자 지시 2026-09-20) ──
   찾는 칸은 이름·연락처 하나로, 표는 이름·TA단계·연락처 셋만.
   상담단계·방문단계·기간·주소 같은 조건은 컴퓨터에서 거른다 — 휴대폰에서는
   손에 든 이름이나 번호로 한 사람을 찾는 일이 거의 전부다. */
@media (max-width: 767px) {
	/* 검색 카드 — 마지막 줄만 남기고, 그 줄에서도 검색 묶음만 */
	.cl-card--search table.table tr { display: none; }
	.cl-card--search table.table tr.search-row { display: table-row; }
	.cl-card--search table.table tr.search-row > .cl-th { display: none; }
	.cl-card--search table.table tr.search-row > td { display: block; padding: 10px 12px; }
	.cl-inline > *:not(.cl-find) { display: none !important; }
	.cl-find { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; width: 100%; }
	.cl-find .cl-inline__lb { display: none; }
	.cl-find #search { flex: 0 0 auto; }
	.cl-find input[name="keyword"] { flex: 1 1 140px; min-width: 0; max-width: none !important; margin-right: 0 !important; }

	/* 줄 수 고르기는 휴대폰에서 쓸 일이 없다 */
	.cl-card--list select[name="page_rows"] { display: none; }

	/* 표 — 이름(4)·TA단계(5)·연락처(6) 만 */
	.cust-list { table-layout: auto; }
	.cust-list colgroup { display: none; }
	/* 몇 번째 칸이 아니라 칸 이름(clc-*)으로 고른다 (2026-09-28) · 칸 차례를 바꾸거나 숨겨도 어긋나지 않는다 */
	.cust-list th:not(.clc-name):not(.clc-ta):not(.clc-phone):not(.clc-empty),
	.cust-list td:not(.clc-name):not(.clc-ta):not(.clc-phone):not(.clc-empty) { display: none; }
	.cust-list th, .cust-list td { padding: 10px 6px; font-size: 13.5px; white-space: normal; }
	.cust-list td.clc-name { text-align: left; }
	.cust-list .customer-link { font-weight: 700; }
}

/* 휴대폰 회원 목록 표 — 720px 로 못 박힌 폭을 푼다 (사용자 지시 2026-09-20).
   세 칸만 남겼는데도 표가 화면보다 넓어 TA단계·연락처가 오른쪽으로 밀려나 있었다. */
@media (max-width: 767px) {
	.cust-list { min-width: 0 !important; width: 100% !important; table-layout: auto !important; }
}

/* ── 휴대폰에서는 카드를 화면 끝까지 (사용자 지시 2026-09-20) ──
   좌우 12px 여백 때문에 375px 화면에서 쓸 수 있는 폭이 351px 로 줄어 있었다.
   바깥 카드는 화면에 딱 붙으므로 모서리를 둥글게 둘 까닭이 없다 — 각지게 편다.
   제목·경로 줄은 글씨라 화면 끝에 붙으면 읽기 나쁘다. 그 줄에만 여백을 남긴다. */
@media (max-width: 767px) {
	.admin-content .container { padding-left: 0; padding-right: 0; }
	.admin-content__head { padding-left: 12px; padding-right: 12px; }
	.cv-card, .mp-card { border-radius: 0; }
	.mp-grid { gap: 10px; }
}

/* 헤더 바로 아래에서 제목이 시작되게 (사용자 지시 2026-09-20) — 위 여백을 없앤다 */
@media (max-width: 767px) {
	.admin-content { padding-top: 0 !important; }
	.admin-content__head { padding-top: 10px; }
}

/* 바깥 카드는 모두 각지게 (사용자 지시 2026-09-20) — 화면 끝에 붙는 상자에 둥근 모서리는 안 맞는다.
   안쪽 작은 상자(숫자 타일·줄 목록)는 그대로 둔다. */
@media (max-width: 767px) {
	.cv-card, .mp-card, .dash-card, .card.dash-card--full { border-radius: 0 !important; }
}

/* 회원 목록 제목 옆 [‹ MY PAGE] 는 휴대폰에서 뺀다 (사용자 지시 2026-09-20).
   앱 아래 탭에 홈 단추가 이미 있어 같은 일을 하는 단추가 둘이 된다. */
@media (max-width: 767px) { .nb-tabs__go { display: none; } }

/* ── 휴대폰 MY PAGE 머리 (사용자 지시 2026-09-20) ──
   'MY PAGE ㅣ' 를 빼고 이름과 인사말만 남긴다. 컴퓨터에서는 인사말을 감추고 제목을 그대로 쓴다. */
.mp-hello { display: none; }
@media (max-width: 767px) {
	.mp-h__my { display: none; }
	.mp-title .cf-head__who { font-size: 19px; font-weight: 800; color: var(--text, #17213A); }
	.mp-hello { display: block; margin: 2px 0 0; font-size: 13.5px; color: #6E6E73; }
}

/* 회원등록·상세 같은 카드 화면도 바깥 상자는 각지게 (사용자 지시 2026-09-20) */
@media (max-width: 767px) {
	.cust-form, .cv-card, .cf-card, .lv-form, .ex-form { border-radius: 0 !important; }
}

/* 매출현황은 휴대폰에서 당월 한 줄만 (사용자 지시 2026-09-20).
   좁은 화면에서 여섯 칸짜리 표를 네 줄이나 두면 숫자가 짓눌린다.
   지난 달은 컴퓨터에서 본다. */
.mp-sales__sub--mo { display: none; }
@media (max-width: 767px) {
	#sales .mp-tbl tbody tr:not(.mp-tbl__now) { display: none; }
	.mp-sales__sub { display: none; }
	.mp-sales__sub--mo { display: inline; }
	#sales .mp-now { display: none; }
}

/* ── 휴대폰 MY PAGE — 카드 제목을 회색 바탕으로 빼낸다 (사용자 지시 2026-09-20) ──
   제목이 흰 카드 안에 있으면 어디서 어디까지가 한 덩이인지 눈에 덜 들어온다.
   카드 안쪽 여백만큼 밖으로 당겨 페이지 바탕색을 깔면, 제목이 카드 위에 얹힌 것처럼 보인다. */
@media (max-width: 767px) {
	.mp-card__t {
		margin: -12px -14px 12px !important;
		padding: 10px 14px 8px;
		background: #F6F6F8;
		border-bottom: 1px solid #ECECEF;
		font-size: 15px;
	}
	/* 제목 줄 오른쪽 끝의 단추·배지는 그대로 자리를 지킨다 */
	.mp-card__t .mp-card__more { margin-left: auto; }
}

/* 전자결재 카드도 다른 카드와 같은 모양으로 (사용자 지시 2026-09-20) —
   이것만 dash-section 이라 휴대폰에서 제목이 회색 바탕으로 빠지지 않았다. */
@media (max-width: 767px) {
	#apCard .card, #apCard .dash-card--full { border-radius: 0 !important; }
	#apCard .dash-section__title {
		margin: 0 !important; padding: 10px 14px 8px;
		background: #F6F6F8; border-bottom: 1px solid #ECECEF; font-size: 15px;
	}
	#apCard { margin-bottom: 0 !important; }
}

/* 매출현황 — 휴대폰에서는 제목에 달을 적고 표에서는 월 칸을 뺀다 (사용자 지시 2026-09-20).
   한 줄만 남은 표에서 '9월' 칸은 제목과 같은 말을 한 번 더 하는 셈이다. */
.mp-sales__mo { display: none; }
@media (max-width: 767px) {
	.mp-sales__mo { display: inline; }
	#sales .mp-tbl th:first-child, #sales .mp-tbl td:first-child { display: none; }
}

/* 월 칸을 뺀 만큼 자리가 생겼다 — 생보 옆에 손보·일시납도 돌려놓는다 (사용자 지시 2026-09-20).
   앞선 규칙이 다섯째 칸부터 감추고 있어 생보만 남고 손보가 빠져 있었다. */
@media (max-width: 767px) {
	#sales .mp-tbl th:nth-child(n+5), #sales .mp-tbl td:nth-child(n+5) { display: table-cell; }
}

/* ── 전자결재함 (사용자 지시 2026-09-20) — 분류별로 모아 보고 상태까지 한눈에 ── */
.apb-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.apb-tabs--st { margin-bottom: 14px; }
.apb-tab, .apb-st { display: inline-flex; align-items: center; gap: 5px; padding: 7px 13px; border-radius: 999px;
	border: 1px solid var(--border, #E4E4E7); background: #fff; color: var(--text-2, #687084);
	font-size: 13.5px; font-weight: 600; text-decoration: none; }
.apb-tab em, .apb-st em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--muted, #9AA0AE); }
.apb-tab:hover, .apb-st:hover { border-color: var(--lapl-green, #253272); color: var(--lapl-green, #253272); }
.apb-tab.is-on { background: var(--navy, #17213A); border-color: var(--navy, #17213A); color: #fff; }
.apb-tab.is-on em { color: rgba(255,255,255,.75); }
.apb-st.is-on { background: var(--lapl-green, #253272); border-color: var(--lapl-green, #253272); color: #fff; }
.apb-st.is-on em { color: rgba(255,255,255,.8); }

.apb-tbl tbody tr:hover { background: #FAFAFB; }
.apb-g { display: inline-block; padding: 2px 8px; border-radius: 6px; background: #F1F1F4; color: #555; font-size: 12px; font-weight: 700; }
.apb-me { font-style: normal; margin-left: 4px; font-size: 11px; font-weight: 700; color: var(--lapl-green, #253272); }
.apb-turn { font-style: normal; margin-left: 4px; font-size: 11px; font-weight: 700; color: var(--orange-deep, #5E6475); }
.apb-st__b { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.apb-st__b--wait { background: #FFF3E8; color: #C4610F; }
.apb-st__b--ok   { background: #E6E8F4; color: #19214D; }
.apb-st__b--no   { background: #FDECEC; color: #C02626; }

@media (max-width: 767px) {
	.apb-tbl th:nth-child(3), .apb-tbl td:nth-child(3),
	.apb-tbl th:nth-child(5), .apb-tbl td:nth-child(5) { display: none; }
	.apb-tbl { min-width: 0 !important; width: 100% !important; table-layout: auto !important; }
	.apb-tab, .apb-st { padding: 6px 10px; font-size: 12.5px; }
}

/* 전자결재함 분류·상태 — 단추가 아니라 글씨다 (사용자 지시 2026-09-20).
   사이에 옅은 바를 하나씩 끼워 분류와 상태를 한 줄에 잇는다. 고른 것만 진하게. */
.apb-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
	-webkit-overflow-scrolling: touch; scrollbar-width: thin;
	gap: 0; align-items: center; margin: 2px 0 14px; padding-bottom: 2px; }
.apb-tabs--st { display: none; }
.apb-tabs::-webkit-scrollbar { height: 5px; }
.apb-tabs::-webkit-scrollbar-thumb { background: #D8DADF; border-radius: 3px; }
.apb-tabs::-webkit-scrollbar-track { background: transparent; }
.apb-tab, .apb-st { flex: 0 0 auto; white-space: nowrap;
	display: inline-flex; align-items: center; gap: 4px; padding: 0 9px;
	border: 0; border-radius: 0; background: none;
	color: var(--text-2, #687084); font-size: 13.5px; font-weight: 500; text-decoration: none; }
.apb-tab em, .apb-st em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--muted, #9AA0AE); }
.apb-tab:hover, .apb-st:hover { background: none; border: 0; color: var(--navy, #17213A); }
.apb-tab.is-on, .apb-st.is-on { background: none; border: 0; font-weight: 700; }
.apb-tab.is-on { color: var(--navy, #17213A); }
.apb-st.is-on { color: var(--lapl-green, #253272); }
.apb-tab.is-on em { color: var(--navy, #17213A); }
.apb-st.is-on em { color: var(--lapl-green, #253272); }
.apb-bar { flex: 0 0 auto; font-style: normal; color: #DFE2E7; user-select: none; }
.apb-bar--mid { margin: 0 4px; }
@media (max-width: 767px) {
	.apb-tab, .apb-st { padding: 0 7px; font-size: 12.5px; }
}

/* ── 회원 목록 검색 조건 (사용자 지시 2026-09-20) ──
   영문 풀이는 그 줄의 오른쪽 끝, 곧 검색 상자의 오른쪽 가장자리에 세운다.
   색으로 누가 하는 일인지 가른다 — 퍼미션센터(TAG·AS·CP)는 오렌지, PM(TC·VC)은 초록,
   조건이 아닌 칸(기간·검색)은 회색 그대로.
   같은 무게의 규칙이 위에 이미 회색을 박아 둬서, 표까지 넣어 더 좁게 잡고 !important 를 붙인다. */
.cl-card--search td .cl-th__sub { float: right; margin-left: 16px;
	font-size: 11px; font-weight: 500; color: var(--muted, #9AA0AE);
	letter-spacing: .2px; white-space: nowrap; }
.cl-card--search table th.cl-th--own { color: var(--orange-deep, #5E6475) !important; }
.cl-card--search table th.cl-th--pm  { color: var(--lapl-green, #253272) !important; }
.cl-card--search table th.cl-th--own .cf-ico,
.cl-card--search table th.cl-th--pm  .cf-ico { stroke: currentColor; }
.cl-th--cp { vertical-align: middle; }

/* 고객 상세도 목록과 같은 색으로 (사용자 지시 2026-09-20) —
   여기서는 약어만 쓰고 영문 풀이는 넣지 않는다.
   퍼미션센터가 보는 칸(TAG·CP·희망시간)은 오렌지, PM 이 보는 칸(TC·VC)은 초록. */
.cust-info th.cv-th--own, table th.cv-th--own { color: var(--orange-deep, #5E6475) !important; }
.cust-info th.cv-th--pm,  table th.cv-th--pm  { color: var(--lapl-green, #253272) !important; }
th.cv-th--own .cf-ico, th.cv-th--pm .cf-ico { stroke: currentColor; }

/* ── 검색 조건 줄에 숨통을 (사용자 지시 2026-09-20) ──
   줄이 붙어 있으면 어디까지가 한 단계인지 눈으로 끊기지 않는다.
   위아래 여백을 주고, 칸 안에서는 높이 가운데에 놓는다. */
.cl-card--search table.table > tbody > tr > th,
.cl-card--search table.table > tbody > tr > td,
.cl-card--search table.table > tr > th,
.cl-card--search table.table > tr > td {
	padding-top: 11px; padding-bottom: 11px; vertical-align: middle;
}
/* 고르는 칸들끼리도 조금 띄운다 — 네모와 글씨가 한 덩이로 읽히게 */
.cl-card--search .status-options label,
.cl-card--search td > label { margin-right: 14px; }
.cl-card--search td input[type="checkbox"],
.cl-card--search td input[type="radio"] { vertical-align: -2px; }

/* 고객 상세의 단계 줄도 같은 숨통 */
.cv-st > th, .cv-st > td { padding-top: 11px; padding-bottom: 11px; vertical-align: middle; }
.status-options { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.status-option { display: inline-flex; align-items: center; gap: 4px; }

/* ── 검색 줄을 한 줄로 (사용자 지시 2026-09-20) ──
   기간과 검색을 한 칸에 합쳤더니 두 줄로 접혔다. 칸 안을 한 줄짜리 가로 배열로 두고
   고르는 칸들의 폭 제한을 풀어, 남는 자리는 키워드 칸이 가져가게 한다. */
.cl-card--search table tr.search-row > td {
	display: flex; align-items: center; flex-wrap: nowrap; gap: 6px;
}
.cl-card--search table tr.search-row > td > div {
	display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; margin: 0 !important;
}
.cl-card--search table tr.search-row .period { margin: 0 !important; }
.cl-card--search table tr.search-row .period > div { padding: 0 !important; }
.cl-card--search table tr.search-row select {
	max-width: none !important; width: auto; min-width: 82px; margin: 0 !important;
}
.cl-card--search table tr.search-row .input-date {
	max-width: 116px !important; width: 116px !important; margin: 0 !important;
}
.cl-card--search table tr.search-row input[name="keyword"] {
	max-width: none !important; flex: 1 1 110px; min-width: 90px; margin: 0 !important;
}
.cl-card--search table tr.search-row .cl-inline__lb { white-space: nowrap; }
.cl-card--search table tr.search-row .btn-flat { white-space: nowrap; }

/* 유틸리티 클래스(.flex-wrap)가 !important 로 줄바꿈을 켜 둬서 한 줄이 되지 않았다 —
   같은 세기로 눌러 준다 (사용자 지시 2026-09-20). 폭도 조금 더 줄여 한 줄에 담는다. */
.cl-card--search table tr.search-row > td,
.cl-card--search table tr.search-row > td > div,
.cl-card--search table tr.search-row .period { flex-wrap: nowrap !important; }
.cl-card--search table tr.search-row select { min-width: 76px; }
.cl-card--search table tr.search-row .input-date { max-width: 104px !important; width: 104px !important; }
.cl-card--search table tr.search-row .cl-inline__lb { margin: 0 2px 0 6px; }
.cl-card--search table tr.search-row .text-gray-7 { padding: 0 2px; }

/* 설계서전송은 글씨도 오렌지 (사용자 지시 2026-09-20) — 아이콘과 같은 색으로 한 덩이로 보이게.
   굵기는 옆 항목과 같게 둔다. */
.cl-card--search label[for="ta_status_14"],
.status-options label[for="ta_status14"] { color: var(--orange-deep, #5E6475); }

/* 검색 한 줄 — 칸마다 폭을 못 박아 날짜가 잘리지 않게, 단추가 다음 줄로 넘어가지 않게
   (사용자 지시 2026-09-20). 남는 자리는 키워드 칸이 가져간다. */
.cl-card--search table tr.search-row .input-date {
	width: 132px !important; max-width: 132px !important; flex: 0 0 132px;
	padding-left: 10px; padding-right: 26px; box-sizing: border-box;
}
.cl-card--search table tr.search-row select {
	width: auto; min-width: 0; max-width: 112px !important; flex: 0 1 112px;
}
.cl-card--search table tr.search-row input[name="keyword"] {
	flex: 1 1 130px; min-width: 110px;
}
.cl-card--search table tr.search-row .btn-flat { flex: 0 0 auto; }
.cl-card--search table tr.search-row .text-gray-7 { flex: 0 0 auto; }

/* ── 검색 줄 마무리 (사용자 지시 2026-09-20) ──
   .cl-find 는 인라인 덩이라 그 안에서 또 줄이 접혔다 — 이것도 한 줄로 묶는다.
   생김새는 회원등록 폼과 같게: 흰 바탕, 같은 테두리색, 높이 40, 누르면 초록 테두리. */
.cl-card--search table tr.search-row .cl-find {
	display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; flex: 1 1 auto; min-width: 0;
}
.cl-card--search table tr.search-row input[type="text"],
.cl-card--search table tr.search-row select {
	height: 40px; border: 1px solid #DCDDE2 !important; background: #fff !important;
	border-radius: 8px; font-size: 14px;
}
.cl-card--search table tr.search-row input[type="text"]:focus,
.cl-card--search table tr.search-row select:focus { border-color: var(--lapl-green, #253272) !important; }
.cl-card--search table tr.search-row .btn-flat { height: 40px; border-radius: 8px; padding: 0 16px; }

/* 영문 풀이를 약어 바로 아래로 (사용자 지시 2026-09-20) — 오른쪽 끝에서 제목 칸 안으로 옮겼다.
   앞서 둔 float 규칙은 이제 자리가 달라 쓰지 않는다. */
.cl-card--search th .cl-th__sub {
	display: block; float: none; margin: 2px 0 0; font-size: 11px; font-weight: 500;
	color: var(--muted, #9AA0AE); letter-spacing: .2px; white-space: nowrap; line-height: 1.3;
}
.cl-card--search th.cl-th { line-height: 1.25; }

/* 검색 줄 — 제목과 영문은 회색 그대로, [검색] 단추만 초록 (사용자 지시 2026-09-20) */
.cl-card--search table tr.search-row > th.cl-th,
.cl-card--search table tr.search-row > th.cl-th .cl-th__sub { color: var(--muted, #9AA0AE); }
.cl-card--search table tr.search-row .btn-flat--on {
	background: var(--lapl-green, #253272) !important;
	border-color: var(--lapl-green, #253272) !important;
	color: #fff !important;
}
.cl-card--search table tr.search-row .btn-flat--on:hover {
	background: #18204B !important; border-color: #18204B !important;
}

/* 영문 풀이는 약어 첫 글자 바로 아래에 왼쪽 맞춤 (사용자 지시 2026-09-20).
   제목 칸은 [아이콘 15px + 여백 5px] 다음에 약어가 온다 — 그 폭만큼 들여 쓴다. */
.cl-card--search th .cl-th__sub { margin-left: 20px; text-align: left; }

/* 검색 줄이 카드 밖으로 밀려 [초기화] 가 잘렸다 — 표를 카드 폭에 묶는다 (사용자 지시 2026-09-20) */
.cl-card--search table.table { width: 100% !important; table-layout: fixed; }
.cl-card--search table.table > tbody > tr > th.cl-th,
.cl-card--search table.table > tr > th.cl-th { width: 150px; }

/* 제목 칸 — 회색 바탕에 조금 더 넓게 (사용자 지시 2026-09-20).
   값이 들어가는 칸과 눈으로 갈라 두면 어디까지가 조건 이름인지 바로 읽힌다. */
.cl-card--search table.table > tbody > tr > th.cl-th,
.cl-card--search table.table > tr > th.cl-th {
	width: 178px; background: #F7F7F9; border-right: 1px solid #ECECEF;
	padding-left: 16px; padding-right: 12px;
}
/* 값 칸이 카드 밖으로 밀리지 않게 — 고르는 칸들이 줄어들 수 있게 열어 둔다 */
.cl-card--search table tr.search-row select { flex: 0 1 104px; min-width: 62px; max-width: 104px !important; }
.cl-card--search table tr.search-row input[name="keyword"] { flex: 1 1 90px; min-width: 80px; }

/* TAG 줄 위에도 선 (사용자 지시 2026-09-20) — 첫 줄만 선이 없어 시작이 흐릿했다 */
.cl-card--search table.table > tbody > tr:first-child > th,
.cl-card--search table.table > tbody > tr:first-child > td,
.cl-card--search table.table > tr:first-child > th,
.cl-card--search table.table > tr:first-child > td { border-top: 1px solid #ECECEF; }

/* 검색 줄이 아직 카드 밖으로 4~80px 밀린다 — 고르는 칸과 날짜 칸을 조금씩 줄여 안으로 넣는다
   (사용자 지시 2026-09-20: 초기화 단추가 잘리지 않게). */
.cl-card--search table tr.search-row > td { gap: 4px; }
.cl-card--search table tr.search-row > td > div { gap: 4px; }
.cl-card--search table tr.search-row .cl-find { gap: 4px; }
.cl-card--search table tr.search-row .input-date {
	width: 120px !important; max-width: 120px !important; flex: 0 0 120px; padding-right: 22px;
}
.cl-card--search table tr.search-row select { flex: 0 1 92px; max-width: 92px !important; min-width: 58px; }
.cl-card--search table tr.search-row .btn-flat { padding: 0 12px; }

/* 남은 자리만큼 고르는 칸을 조금 넓힌다 — '시/도 선택' 이 잘리지 않게 (사용자 지시 2026-09-20) */
.cl-card--search table tr.search-row select { flex: 0 1 96px; max-width: 96px !important; }

/* ── 고객 상세 상담등록의 단계 줄을 검색 화면과 같은 꼴로 (사용자 지시 2026-09-20) ──
   제목 칸은 회색 바탕에 같은 폭, 줄마다 같은 여백, 칸 안에서는 높이 가운데.
   여기서는 약어만 쓰고 영문 풀이는 넣지 않는다 (앞선 지시). */
.cv-write .cv-st > th {
	width: 178px; background: #F7F7F9; border-right: 1px solid #ECECEF;
	padding: 11px 12px 11px 16px; vertical-align: middle;
	font-weight: 700; white-space: nowrap;
}
.cv-write .cv-st > td { padding: 11px 14px; vertical-align: middle; }
.cv-write .cv-st > th, .cv-write .cv-st > td { border-top: 1px solid #ECECEF; }
.cv-write .cv-st .cf-ico { width: 15px; height: 15px; margin-right: 5px; }

/* 고르는 칸들 — 검색 화면과 같은 간격으로 */
.cv-write .status-options { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.cv-write .status-option { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
.cv-write .status-option label { margin: 0; }

/* 제목 칸 바탕색이 다른 규칙에 덮여 검색 화면과 미묘하게 달랐다 — 같은 값으로 못 박는다 */
.cv-write .cv-st > th { background: #F7F7F9 !important; }

/* ── 고른 네모의 색을 줄의 역할 색과 맞춘다 (사용자 지시 2026-09-20) ──
   CP·희망시간은 오렌지, TC·VC는 초록. 제목 칸에 붙인 역할 표시로 줄을 가려낸다.
   위에서 초록을 !important 로 박아 뒀으므로 같은 세기로 눌러 준다. */
.cv-write .cv-st:has(> th.cv-th--own) .status-options input[type=radio]:checked {
	background: var(--orange-deep, #5E6475) !important;
	border-color: var(--orange-deep, #5E6475) !important;
}
.cv-write .cv-st:has(> th.cv-th--pm) .status-options input[type=radio]:checked {
	background: var(--lapl-green, #253272) !important;
	border-color: var(--lapl-green, #253272) !important;
}
/* 고를 수 없는 줄은 회색 그대로 */
.cv-write .status-options input[type=radio]:disabled:checked {
	background: #B9BBC0 !important; border-color: #B9BBC0 !important;
}

/* 설계서전송은 TC(초록) 줄 안의 항목이라 글씨·그림도 초록으로 (사용자 지시 2026-09-20) */
.cl-card--search label[for="ta_status_14"],
.status-options label[for="ta_status14"] { color: var(--lapl-green, #253272); }
.ta-doc {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23253272' d='M13.6 2H6.6A2.6 2.6 0 0 0 4 4.6v14.8A2.6 2.6 0 0 0 6.6 22h10.8a2.6 2.6 0 0 0 2.6-2.6V8.4L13.6 2z'/%3E%3Cpath fill='%23ffffff' opacity='.5' d='M13.6 2L20 8.4h-4.9a1.5 1.5 0 0 1-1.5-1.5V2z'/%3E%3Cpath stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' d='M8.2 12.6h7.6M8.2 16.1h5.2'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* 회원 목록 제목 아래 선은 뺀다 (사용자 지시 2026-09-20) — 바로 아래 검색 카드가 이미 경계를 만든다.
   이 화면에서만. 다른 화면은 제목과 본문 사이에 카드가 없어 선이 있어야 갈린다. */
.admin-content:has(.cl-wrap) .admin-content__head { border-bottom: 0; }

/* 제목 칸의 약어를 옆 칸 글씨와 같은 높이로 (사용자 지시 2026-09-20).
   제목은 두 줄(약어+영문), 옆 칸은 한 줄이다. 가운데 맞춤이면 두 줄 덩이의 가운데가 맞춰져
   약어가 한 줄 위로 뜬다. 아래 여백을 줄이고 위를 늘려 덩이를 내려 앉힌다.
   CP 칸은 두 줄짜리 내용을 덮고 있어 이미 맞다 — 건드리지 않는다. */
.cl-card--search table th.cl-th:not(.cl-th--cp) { padding-top: 19px; padding-bottom: 3px; }

/* ── 상담등록 네모를 검색 화면과 같은 모양으로 (사용자 지시 2026-09-20) ──
   모서리는 각지게, 크기·테두리색도 검색 화면의 네모(19px · 1px #DDD)와 같게 맞춘다.
   고른 뒤 채우는 색은 줄의 역할 색(오렌지·초록) 그대로 둔다. */
.cv-write .status-options input[type=radio] {
	width: 19px !important; height: 19px !important; min-width: 19px; flex: 0 0 19px;
	border-radius: 0 !important; border: 1px solid #DDDDDD !important; background: #fff !important;
	margin-right: 7px !important;
}
.cv-write .status-options input[type=radio]:checked::after {
	left: 6px; top: 2px; width: 5px; height: 10px;
}

/* 목록 TA 칸 — 값 전부 초록 글씨 (사용자 지시 2026-09-20). TA 는 PM 이 손대는 줄이라 줄 색과 맞춘다.
   손이 가야 하는 단계(PM 안내·재연락·설계서전송)는 굵게 한 번 더 짚는다. */
/* TA 칸도 굵게 쓰지 않는다 (사용자 지시 2026-09-20) — 초록 글씨만으로 충분히 눈에 든다 */
.cust-list .ta-cell { color: var(--lapl-green, #253272); font-weight: 400; }
.cust-list .ta-cell.ta-act { font-weight: 400; }

/* 약어와 영문을 한 줄로 (사용자 지시 2026-09-20) — 'TA · Telephone Approach'.
   두 줄이던 것을 붙이면서 제목 칸을 그만큼 넓힌다. */
.cl-card--search th .cl-th__sub {
	display: inline; float: none; margin: 0 0 0 5px; vertical-align: baseline;
}
.cl-card--search th .cl-th__sub::before { content: "· "; }
.cl-card--search table.table > tbody > tr > th.cl-th,
.cl-card--search table.table > tr > th.cl-th { width: 238px; }
/* 한 줄이 되었으니 옆 칸 글씨와 높이가 저절로 맞는다 — 내려 앉히던 여백을 되돌린다 */
.cl-card--search table th.cl-th:not(.cl-th--cp) { padding-top: 11px; padding-bottom: 11px; }

/* 제목 칸이 넓어진 만큼 검색 줄을 다시 줄여 한 줄에 담는다 (사용자 지시 2026-09-20) */
.cl-card--search table tr.search-row select { flex: 0 1 84px; max-width: 84px !important; min-width: 54px; }
.cl-card--search table tr.search-row .input-date {
	width: 114px !important; max-width: 114px !important; flex: 0 0 114px; padding-right: 20px;
}

/* 상단 메뉴 앞 그림 (사용자 지시 2026-09-20: "일러스트 각 아이콘").
   글자색을 그대로 따라가는 선 아이콘이라 눌린 메뉴에서는 같이 진해진다. */
.gnb__ico { width: 15px; height: 15px; margin-right: 5px; flex: 0 0 auto;
	fill: none; stroke: currentColor; stroke-width: 1.7;
	stroke-linecap: round; stroke-linejoin: round;
	opacity: .62; vertical-align: -2px; }
.gnb__link { display: inline-flex; align-items: center; }
.gnb__item.is-active .gnb__ico, .gnb__link:hover .gnb__ico { opacity: 1; }
@media (max-width: 1279px) { .gnb__ico { display: none; } }

/* ── 지사일정 (사용자 지시 2026-09-20: "지사일정등록") ──
   공지 게시판(.nb-table)과 같은 표를 쓰고, 구분·남은날만 여기서 더한다. */
.ev-table .c-k  { width: 96px; }
.ev-table .c-dt { width: 150px; }
.ev-table .c-dd { width: 76px; }
.ev-table .c-w  { width: 100px; }
.ev-table .c-a  { width: 104px; }
.ev-table td.c-t b { display: block; font-weight: 600; }
.ev-table td.c-t .ev-memo { display: block; margin-top: 3px; color: var(--muted, #9AA0AE); font-size: 12.5px; line-height: 1.55; }
.ev-table tr.is-past td { color: var(--muted, #9AA0AE); }
.ev-table tr.is-past td.c-t b { font-weight: 500; }
.ev-table tr.ev-sep td { background: #F7F8FA; color: var(--muted, #9AA0AE); font-size: 12.5px; font-weight: 700; text-align: left; }
.ev-table td.ev-none { padding: 26px 0; color: var(--muted, #9AA0AE); }
.ev-table td.c-a { white-space: nowrap; }
.ev-table td.c-a form { display: inline; }
.ev-act { display: inline-block; padding: 0 5px; border: 0; background: none;
	color: var(--text-2, #687084); font-size: 12.5px; font-weight: 600; text-decoration: none; cursor: pointer; }
.ev-act:hover { color: var(--lapl-green, #253272); }
.ev-act--x:hover { color: #C02626; }

/* 구분 — 색으로 먼저 갈린다 */
.ev-k { display: inline-block; min-width: 72px; padding: 2px 8px; border-radius: 6px;
	background: #F1F1F4; color: #555; font-size: 12px; font-weight: 700; }
.ev-k--exam { background: #FDECEC; color: #C02626; }
.ev-k--pay  { background: #E6E8F4; color: #19214D; }
.ev-k--goal { background: #FFF3E8; color: #C4610F; }
.ev-k--db   { background: #EAF0FB; color: #24509E; }

/* 남은 날 */
.ev-d { display: inline-block; font-size: 12px; font-weight: 700; color: var(--muted, #9AA0AE); }
.ev-d.is-today { color: var(--orange-deep, #5E6475); }
.ev-d.is-now   { color: var(--lapl-green, #253272); }
.ev-d.is-old   { color: #C3C7CE; }

/* 공지 목록 위 띠 — 다가오는 일정 몇 줄 */
.ev-strip { margin-bottom: 14px; padding: 14px 18px 12px; }
.ev-strip__t { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--navy, #17213A); }
.ev-strip__t a { color: inherit; text-decoration: none; }
.ev-strip__t a:hover { color: var(--lapl-green, #253272); }
.ev-strip__list { margin: 0; padding: 0; list-style: none; }
.ev-strip__list li { display: flex; align-items: center; gap: 9px; padding: 5px 0;
	border-top: 1px solid #F1F2F5; font-size: 13.5px; }
.ev-strip__list li:first-child { border-top: 0; }
.ev-strip__list b { font-weight: 600; color: var(--navy, #17213A); }
.ev-strip__list em { font-style: normal; color: var(--text-2, #687084); font-size: 12.5px; }
.ev-strip__list .ev-d { margin-left: auto; }

/* 등록 화면 — 날짜 두 칸 사이의 물결 */
.ev-tilde { display: inline-block; margin: 0 6px; color: var(--muted, #9AA0AE); }
.ev-more { margin: 12px 0 0; text-align: center; }
.ev-more a { color: var(--muted, #9AA0AE); font-size: 12.5px; text-decoration: none; }
.ev-more a:hover { color: var(--lapl-green, #253272); }

@media (max-width: 767px) {
	.ev-table .c-w, .ev-table thead th:nth-child(5) { display: none; }
	.ev-table td.c-w { display: none; }
	.ev-table { min-width: 0 !important; width: 100% !important; table-layout: auto !important; }
	.ev-strip { border-radius: 0; }
}

/* 공지사항 ㅣ 지사일정 — 두 탭 사이에 바, 켜진 쪽만 진하게 (사용자 지시 2026-09-20) */
.nb-tabs .page-title--2 .nb-tabs__a { color: var(--muted, #9AA0AE); font-weight: 600; }
.nb-tabs .page-title--2 .nb-tabs__a.is-on { color: var(--text, #17213A); font-weight: 700; }
.nb-tabs .page-title--2 .nb-tabs__a:hover { color: var(--lapl-green, #253272); }
.nb-tabs__bar { margin: 0 9px; color: #DFE2E7; font-style: normal; font-weight: 400; }

/* ── 지사일정 — 구분 자유입력 · 반복 · 담당자 고르기 (사용자 지시 2026-09-20) ── */
.ev-k--edu { background: #F3ECFB; color: #6B3FA0; }
.ev-table td.c-dt .ev-rep { display: block; margin-top: 2px; color: var(--lapl-green, #253272); font-size: 11.5px; font-weight: 700; }
.ev-table td.c-w .ev-to { display: block; margin-top: 2px; color: var(--muted, #9AA0AE); font-size: 11.5px; }

/* 구분 추천 단어 — 누르면 그대로 채워진다 */
.ev-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 7px 0 0; }
.ev-chip { padding: 4px 10px; border: 1px solid var(--border, #E4E4E7); border-radius: 999px;
	background: #fff; color: var(--text-2, #687084); font-size: 12.5px; cursor: pointer; }
.ev-chip:hover { border-color: var(--lapl-green, #253272); color: var(--lapl-green, #253272); }

/* 반복 — 고른 것에 맞는 칸만 나온다 */
.ev-rep-n { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 8px 0 0; font-size: 13px; color: var(--text-2, #687084); }
.ev-rep-n input, .ev-rep-n select { margin: 0 4px; }

/* 담당자 고르기 — 이름으로 좁혀 보는 상자 */
.ev-pick { max-width: 640px; }
.ev-pick__n { margin-left: 10px; font-size: 12.5px; }
.ev-pick__n b { color: var(--lapl-green, #253272); }
.ev-pick__box { margin-top: 8px; max-height: 260px; overflow-y: auto;
	border: 1px solid var(--border, #E4E4E7); border-radius: 10px; padding: 8px 10px; background: #FCFCFD; }
.ev-pick__g { margin: 8px 0 4px; font-size: 11.5px; font-weight: 700; color: var(--muted, #9AA0AE); }
.ev-pick__g:first-child { margin-top: 0; }
.ev-pick__i { display: inline-flex; align-items: center; gap: 5px; margin: 0 10px 5px 0; font-size: 13px; cursor: pointer; }
.ev-pick__i em { font-style: normal; color: var(--muted, #9AA0AE); font-size: 11.5px; }
.ev-pick__i input:checked + span { color: var(--lapl-green, #253272); font-weight: 700; }
.ev-mgr { display: inline-flex; margin-top: 10px; }
.ev-mgr b { color: var(--orange-deep, #5E6475); }

/* ── 해피박스 지급·계약 현황 (사용자 지시 2026-09-20) ── */
.hbg-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.hbg-mon { padding: 16px 18px 12px; margin-bottom: 14px; }
.hbg-mon__t { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--navy, #17213A); }
.hbg-mon ul { margin: 0; padding: 0; list-style: none; }
.hbg-mon li { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 13px; }
.hbg-mon li b { flex: 0 0 38px; font-weight: 700; color: var(--navy, #17213A); }
.hbg-mon__n { flex: 0 0 52px; color: var(--text-2, #687084); }
.hbg-mon__bar { flex: 1 1 auto; height: 8px; border-radius: 999px; background: #EEF0F3; overflow: hidden; }
.hbg-mon__bar i { display: block; height: 100%; background: var(--lapl-green, #253272); }
.hbg-mon li em { flex: 0 0 132px; font-style: normal; text-align: right; color: var(--muted, #9AA0AE); font-size: 12.5px; }

.hbg-f { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.hbg-f label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2, #687084); }
.hbg-tbl td a { color: var(--navy, #17213A); text-decoration: none; }
.hbg-tbl td a:hover { color: var(--lapl-green, #253272); text-decoration: underline; }
.hbg-n { margin-left: 3px; color: var(--muted, #9AA0AE); font-size: 11px; }
.hbg-y  { display: inline-block; padding: 2px 9px; border-radius: 999px; background: #E6E8F4; color: #19214D; font-size: 12px; font-weight: 700; }
.hbg-p  { display: inline-block; padding: 2px 9px; border-radius: 999px; background: #F1F1F4; color: #777; font-size: 12px; font-weight: 700; }
.hbg-n2 { color: var(--muted, #9AA0AE); font-size: 12.5px; }
.hbg-note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.7; }
@media (max-width: 767px) {
	.hbg-kpi { grid-template-columns: repeat(2, 1fr); }
	.hbg-tbl th:nth-child(3), .hbg-tbl td:nth-child(3),
	.hbg-tbl th:nth-child(5), .hbg-tbl td:nth-child(5),
	.hbg-tbl th:nth-child(9), .hbg-tbl td:nth-child(9) { display: none; }
	.hbg-mon li em { flex: 0 0 96px; }
}

/* 회원 목록 VC 칸 — TA 와 같은 초록 글씨 (사용자 지시 2026-09-20).
   굵게는 쓰지 않는다 (사용자 지시 2026-09-20) — 한 줄에 굵은 글씨가 둘이면 어느 쪽도 안 읽힌다. */
.vc-cell { color: var(--lapl-green, #253272); font-weight: 400; }

/* 해피박스 — 단계와 겹쳐 붙는 표시다 (사용자 지시 2026-09-20) */
.hb-mark { display: inline-block; width: 13px; height: 13px; margin-left: 5px; vertical-align: -2px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E6475' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='13' rx='2'/%3E%3Cpath d='M3 12h18M12 8v13'/%3E%3C/svg%3E") no-repeat center / contain; }
.hb-lb { color: var(--orange-deep, #5E6475); font-weight: 600; }

/* 회원 목록 — 제목줄부터 내용까지 모두 왼쪽 정렬 (사용자 지시 2026-09-20).
   표에 붙은 text-center 를 여기서 덮는다. 고르기 네모 칸만 가운데로 둔다 —
   네모는 글이 아니라 단추라 왼쪽으로 붙이면 줄이 비뚤어 보인다. */
.cust-list th, .cust-list td { text-align: left !important; }
.cust-list th:first-child, .cust-list td:first-child { text-align: center !important; }
.cust-list th a { justify-content: flex-start; }
/* 제목줄만 가운데로 (대표님 지시 2026-09-23: "맨위 타이틀도 가운데 정렬") — 내용 줄은 그대로 왼쪽 */
.cust-list th { text-align: center !important; }
.cust-list th a { justify-content: center; }
/* 주소·자녀정보는 긴 글이라 제목도 왼쪽 (대표님 지시 2026-09-23) */
.cust-list th.th-l { text-align: left !important; }

/* 회원 이름 옆 해피박스 상자 — 고객 화면에서만 (사용자 지시 2026-09-20).
   VC 는 1차상담(AP)·2차상담(PC) 같은 단계만 담는다. 박스는 단계가 아니라 회원에게 붙는 표시다. */
.cf-head__who .hb-mark { margin-left: 6px; width: 15px; height: 15px; vertical-align: -2px; }

/* ── 상담등록 단계 줄을 검색 화면과 같은 모습으로 (사용자 지시 2026-09-20: "가로로 너무 넓은데") ──
   옆으로 밀어 보던 한 줄(nowrap + 가로 스크롤)을 걷고, 검색 화면처럼 접어서 보여 준다.
   제목 칸도 검색 화면과 같은 238px 회색 칸으로 맞춘다 — 두 화면의 같은 조건이 같은 자리에 선다. */
.cv-write tr.cv-st > th {
	width: 238px !important; min-width: 238px;
	background: #F7F8FA; vertical-align: middle;
}
.cv-write .status-options {
	display: flex !important; flex-wrap: wrap !important;
	gap: 8px 16px !important; align-items: center;
	overflow-x: visible !important; max-width: 940px;
}
.cv-write .status-option { flex: 0 0 auto; }
.cv-write .status-options label { font-size: 14px !important; }
@media (max-width: 1279px) { .cv-write tr.cv-st > th { width: 150px !important; min-width: 150px; } }
@media (max-width: 767px) {
	.cv-write tr.cv-st > th { width: auto !important; min-width: 0; }
	.cv-write .status-options { gap: 6px 12px !important; max-width: none; }
}

/* 상담기록 — 이름과 글을 같은 높이에서 시작하게 (사용자 지시 2026-09-20) */
.cv-log > tbody > tr > th, .cv-log > tbody > tr > td,
.cust-log th, .cust-log td { vertical-align: top; }

/* 고객 상세 상담정보의 해피박스 줄 (사용자 지시 2026-09-20) */
.cv-hb th { color: var(--orange-deep, #5E6475) !important; }
.cv-hb th .cf-ico { stroke: currentColor; }
.cv-hb__v { color: var(--orange-deep, #5E6475); font-weight: 700; }
.cv-hb__d { margin-left: 8px; font-style: normal; color: var(--muted, #9AA0AE); font-size: 12.5px; }

/* ── 상담등록 단계 줄 간격을 검색 화면과 똑같이 (사용자 지시 2026-09-20: "첫번째거를 두번째 형식으로") ──
   검색 화면은 네모와 글씨가 바짝 붙고 항목 사이만 살짝 띄어 있다. 같은 값으로 맞춘다. */
.cv-write .status-options { gap: 7px 11px !important; }
.cv-write .status-option { gap: 0; }
.cv-write .status-options input[type=radio],
.cv-write .status-options input[type=checkbox] { margin-right: 5px !important; }
.cv-write .status-options label { font-size: 13.5px !important; }

/* 고른 항목은 글씨도 초록으로 — 어디를 골랐는지 멀리서도 짚인다 */
.cl-card--search td input[type="checkbox"]:checked + label,
.cl-card--search td input[type="radio"]:checked + label { color: var(--lapl-green, #253272); font-weight: 600; }


/* ── 검색 조건의 고르는 네모 (사용자 지시 2026-09-20: "라디오 버튼 각 한개만") ──
   원래 쓰던 네모는 라벨의 가상요소(label:before)가 그린다. 진짜 입력칸은 숨어 있다(common.css).
   그 입력칸을 직접 꾸몄더니 네모가 둘로 보였다 — 숨김을 되돌리고 원래 네모만 손본다.
   동그라미(라디오)도 네모로 맞춘다 — 한 줄만 모양이 다르면 다른 규칙처럼 읽힌다. */
.cl-card--search td input[type="checkbox"],
.cl-card--search td input[type="radio"] {
	-webkit-appearance: auto; appearance: auto;
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; background: none;
}
.cl-card--search td input[type="checkbox"]::after,
.cl-card--search td input[type="radio"]::after { content: none; }
/* 라운드 없는 네모 하나로 */
.cl-card--search td input[type="radio"] + label:before { border-radius: 0; }
/* 고르면 초록 (사용자 지시 2026-09-20: "선택시 초록색으로") */
.cl-card--search td input[type="checkbox"]:checked + label:before,
.cl-card--search td input[type="radio"]:checked + label:before {
	background: var(--lapl-green, #253272) url(../images/icon/check_icon.png) no-repeat center / 16px;
	border: 1px solid var(--lapl-green, #253272);
}
.cl-card--search td input[type="checkbox"]:checked + label,
.cl-card--search td input[type="radio"]:checked + label { color: var(--lapl-green, #253272); font-weight: 600; }

/* 해피박스지급 · 계약CL 앞의 그림 (사용자 지시 2026-09-20) —
   라벨의 가상요소는 네모가 쓰고 있으니, 설계서전송처럼 따로 세운 <i> 로 그린다. */
.hb-box, .vc-doc { display: inline-block; width: 13px; height: 13px; margin-right: 3px; vertical-align: -2px; }
.hb-box { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%235E6475' d='M3 9.6h18V20a1.6 1.6 0 0 1-1.6 1.6H4.6A1.6 1.6 0 0 1 3 20V9.6z'/%3E%3Cpath fill='%235E6475' opacity='.75' d='M2.2 6.2h19.6a.8.8 0 0 1 .8.8v2.2a.8.8 0 0 1-.8.8H2.2a.8.8 0 0 1-.8-.8V7a.8.8 0 0 1 .8-.8z'/%3E%3Cpath fill='%23ffffff' d='M10.6 6.2h2.8v15.4h-2.8z'/%3E%3C/svg%3E") no-repeat center / contain; }
.vc-doc { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23253272' d='M13.6 2H6.6A2.6 2.6 0 0 0 4 4.6v14.8A2.6 2.6 0 0 0 6.6 22h10.8a2.6 2.6 0 0 0 2.6-2.6V8.4L13.6 2z'/%3E%3Cpath fill='%23ffffff' opacity='.5' d='M13.6 2L20 8.4h-4.9a1.5 1.5 0 0 1-1.5-1.5V2z'/%3E%3Cpath stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' d='M8.2 12.6h7.6M8.2 16.1h5.2'/%3E%3C/svg%3E") no-repeat center / contain; }
.hb-lb { color: var(--orange-deep, #5E6475); font-weight: 600; }
.cl-card--search td label[for="visit_status_6"],
.cv-write .status-options label[for="visit_status6"] { color: var(--lapl-green, #253272); font-weight: 600; }

/* 계약CL·해피박스 그림은 테두리 없이 속만 채운다 (사용자 지시 2026-09-20) */
.hb-box, .vc-doc { border: 0 !important; box-shadow: none !important; }

/* 계약CL 문서 그림은 조금 더 크게 (사용자 지시 2026-09-20) */
.vc-doc { width: 17px !important; height: 17px !important; vertical-align: -4px !important; margin-right: 4px !important; }

/* ── TAG 줄을 아래 줄들과 같은 간격·크기로 (사용자 지시 2026-09-20) ──
   라디오 이름표에는 오른쪽 여백(padding-right 1.5em, common.css)이 따로 붙어 있어
   육아맘·예비맘이 아래 줄보다 훨씬 벌어져 보였다. 그 여백을 걷고 네모 줄과 같은 14px 로 맞춘다.
   줄이 접히면 다음 줄도 왼쪽 끝(전체 자리)에서 시작한다. */
.cl-card--search td input[type="radio"] + label { padding-right: 0; margin-right: 14px; }
.cl-card--search td input[type="radio"] + label:before,
.cl-card--search td input[type="checkbox"] + label:before { width: 19px; height: 19px; }
.cl-card--search table tr > td { text-align: left; }

/* ── 검색 화면 1번 줄(TAG, 라디오)과 2번 줄(네모)의 네모 크기가 달랐다 (사용자 지시 2026-09-20) ──
   common.css 가 라디오 네모만 border-box 로 잡아 테두리를 안쪽에 넣는다 → 2px 작게 보였다. 같은 셈법으로. */
.cl-card--search td input[type="radio"] + label:before { box-sizing: content-box; }

/* ── 상담등록 고르는 칸을 검색 화면과 똑같은 만듦새로 (사용자 지시 2026-09-20: "간격이나 폰트 두번째 이미지처럼") ──
   검색 화면은 입력칸을 숨기고 라벨의 가상요소가 19px 네모를 그린다(common.css). 여기도 같은 방식으로 바꾼다 —
   입력칸을 직접 꾸미던 규칙들(!important)이 위에 많아, 한 단계 더 좁은 선택자로 덮는다.
   글씨 14px · 네모 19px · 라벨 왼쪽 23.8px · 항목 사이 14px · 줄 위아래 11px — 검색 화면 값 그대로다. */
.cv-write .status-options .status-option input[type=radio],
.cv-write .status-options .status-option input[type=checkbox] {
	-webkit-appearance: auto !important; appearance: auto !important;
	position: absolute !important; width: 1px !important; height: 1px !important;
	margin: -1px !important; padding: 0 !important; overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important; border: 0 !important; background: none !important;
}
.cv-write .status-options .status-option input::before,
.cv-write .status-options .status-option input::after { content: none !important; }
.cv-write .status-options .status-option label {
	position: relative; display: inline-block;
	padding: 0 0 0 23.8px !important; margin: 0 14px 0 0 !important;
	font-size: 14px !important; font-weight: 400; line-height: 21.7px; cursor: pointer;
	white-space: nowrap; overflow: visible;
}
.cv-write .status-options .status-option label:before {
	content: ""; position: absolute; left: 0; top: 50%; margin-top: -9.5px;
	width: 19px; height: 19px; box-sizing: content-box;
	border: 1px solid #ddd; border-radius: 0; background: #fff;
}
.cv-write .status-options .status-option label:hover:before { border-color: #08141f; }
.cv-write .status-options .status-option input:checked + label:before {
	background: var(--lapl-green, #253272) url(../images/icon/check_icon.png) no-repeat center / 16px;
	border-color: var(--lapl-green, #253272);
}
.cv-write .status-options .status-option input:checked + label { color: var(--lapl-green, #253272); font-weight: 600; }
.cv-write .status-options .status-option input:disabled + label:before { background: #F4F4F6; border-color: #E1E1E6; }
.cv-write .status-options .status-option input:disabled:checked + label:before { background-color: #B9BBC0; border-color: #B9BBC0; }
.cv-write .status-options .status-option input:disabled + label { cursor: default; }
/* 간격은 라벨의 오른쪽 여백(14px)이 맡는다 — 검색 화면과 같은 셈법 */
.cv-write .status-options { gap: 6px 0 !important; }
.cv-write .status-option { padding: 0 !important; gap: 0 !important; }
.cv-write tr.cv-st > td { padding-top: 11px !important; padding-bottom: 11px !important; }

/* 위(2026-09-19)의 "라디오 동그라미 흔적 제거" 규칙이 라벨의 :before 를 !important 로 끄고 있어
   바로 앞 만듦새가 안 먹었다. 같은 힘(!important)에 더 좁은 선택자로 되살린다. */
.cv-write .status-options .status-option label::before,
.cv-write .status-options .status-option label:before {
	content: "" !important; display: block !important;
	width: 19px !important; height: 19px !important; box-sizing: content-box !important;
	border: 1px solid #ddd !important; border-radius: 0 !important; background: #fff !important;
	position: absolute; left: 0; top: 50%; margin-top: -9.5px;
}
.cv-write .status-options .status-option label::after { content: none !important; }
.cv-write .status-options .status-option input[type=radio],
.cv-write .status-options .status-option input[type=checkbox] {
	min-width: 0 !important; flex: none !important;
}
.cv-write .status-options .status-option input:checked + label:before {
	background: var(--lapl-green, #253272) url(../images/icon/check_icon.png) no-repeat center / 16px !important;
	border-color: var(--lapl-green, #253272) !important;
}
.cv-write .status-options .status-option input:disabled + label:before { background: #F4F4F6 !important; border-color: #E1E1E6 !important; }
.cv-write .status-options .status-option input:disabled:checked + label:before { background-color: #B9BBC0 !important; border-color: #B9BBC0 !important; }
.cv-write .status-options .status-option label:hover:before { border-color: #08141f !important; }

/* 회원 목록 — 접히면 안 되는 칸 (사용자 지시 2026-09-20).
   번호·이름·단계·날짜는 한 줄로 읽혀야 한다. 긴 글(주소·자녀정보)만 접힌다. */
.cust-list th, .cust-list td { word-break: keep-all; }
.cust-list .clc-no, .cust-list .clc-csr, .cust-list .clc-cp, .cust-list .clc-vc,
.cust-list .clc-phone, .cust-list .clc-fcdt, .cust-list .clc-insdt { white-space: nowrap; }

/* 회원 목록 제목줄 — TA·VC 는 초록 (사용자 지시 2026-09-20).
   아래 값이 초록으로 나오는 두 칸이라 제목도 같은 색이어야 한 덩이로 읽힌다.
   여섯째·일곱째 칸이 TA·VC 다 (□ No 이름 TAG CSR TA VC …).
   표 제목의 회색을 박아 둔 규칙(.table.type--1 … th)이 위에 있어 !important 로 덮는다. */
/* (2026-09-28 · 칸 이름으로 옮겨 아래 한 곳에 모았다) */

/* 고객 상세 상담등록 이름표 — 검색 화면처럼 약어 뒤에 영문 풀이 (사용자 지시 2026-09-20) */
.cv-write tr.cv-st > th .cv-th__sub {
	display: inline; margin-left: 5px; vertical-align: baseline;
	font-size: 11px; font-weight: 500; color: var(--muted, #9AA0AE);
	letter-spacing: .2px; white-space: nowrap;
}
.cv-write tr.cv-st > th .cv-th__sub::before { content: "· "; }
/* CP 이름표 칸이 희망시간 줄까지 함께 쓴다 — 두 줄 높이의 가운데에 세운다 */
.cv-write tr.cv-st > th.cv-th--cp { vertical-align: middle; }

/* ── 상담등록 — 고른 칸의 색은 누가 하는 일인지로 가른다 (사용자 지시 2026-09-20) ──
   퍼미션센터가 보는 줄(CP·희망시간, role-block--csr)은 오렌지,
   PM 이 발로 뛰는 줄(TA·VC, role-block--pm)은 초록. 제목 글씨 색과 같은 규칙이다. */
.cv-write .role-block--csr .status-option input:checked + label:before {
	background-color: var(--orange-deep, #5E6475) !important;
	border-color: var(--orange-deep, #5E6475) !important;
}
.cv-write .role-block--csr .status-option input:checked + label { color: var(--orange-deep, #5E6475) !important; }
.cv-write .role-block--pm .status-option input:checked + label:before {
	background-color: var(--lapl-green, #253272) !important;
	border-color: var(--lapl-green, #253272) !important;
}
.cv-write .role-block--pm .status-option input:checked + label { color: var(--lapl-green, #253272) !important; }
/* 고를 수 없는 줄은 색을 빼고 회색으로 — 잠긴 값을 성과처럼 읽으면 안 된다 */
.cv-write .status-option input:disabled:checked + label:before {
	background-color: #B9BBC0 !important; border-color: #B9BBC0 !important;
}
.cv-write .status-option input:disabled:checked + label { color: var(--muted, #9AA0AE) !important; }

/* ── NPAY — 네이버페이 상품권을 건넨 회원 (사용자 지시 2026-09-20) ──
   로고는 대표님이 주신 원본(277×105)을 그대로 쓴다. 가로가 긴 알약 모양이라
   해피박스 상자처럼 네모로 두면 찌그러진다 — 높이만 맞추고 가로는 비율대로 둔다. */
.np-mark { display: inline-block; height: 13px; width: 34px; margin-left: 5px; vertical-align: -2px;
	background: url(../images/icon/npay.png) no-repeat center / contain; }
.np-lb .np-mark { margin: 0 4px 0 0; }
.np-lb { color: #2D3A89; font-weight: 600; }
/* 고르면 네이버 초록 — 다른 조건은 라플 초록이라 색으로 갈린다 */
.cl-card--search td input#c_np:checked + label { color: #2D3A89 !important; }
.cl-card--search td input#c_np:checked + label:before { background-color: #2D3A89 !important; border-color: #2D3A89 !important; }

/* NPAY 알약은 이름 옆에 한 줄로 붙는다 — 조금 줄여 이름이 밀리지 않게 (사용자 지시 2026-09-20) */
.cust-list .np-mark { width: 28px; height: 11px; margin-left: 4px; vertical-align: -1px; }
.cust-list td .customer-link { white-space: nowrap; }

/* NPAY 로고를 키우고 글씨는 뺐다 (사용자 지시 2026-09-20) — 로고 자체가 이름이라 글씨가 겹쳤다.
   거르는 칸은 크게, 이름 옆은 이름이 밀리지 않을 만큼만. */
.cl-card--search td .np-lb .np-mark { width: 50px; height: 19px; margin: 0; vertical-align: -4px; }
.cust-list .np-mark { width: 34px; height: 13px; margin-left: 5px; vertical-align: -2px; }

/* 고객 상세 이름 옆 NPAY 로고 (사용자 지시 2026-09-20) — 제목 글씨가 커서 로고도 그만큼 키운다 */
.cf-head__who .np-mark { width: 44px; height: 17px; margin-left: 7px; vertical-align: -3px; }

/* ── 해피박스 그림을 선물상자로 바꾸고 키웠다 (사용자 지시 2026-09-20) ──
   전에는 선으로 그린 상자였는데 작을 때 리본이 뭉개졌다. 속을 채운 한 덩이로 다시 그린다.
   거르는 칸은 글씨 없이 그림만 — NPAY 와 같은 방식이다. */
.hb-box, .hb-mark {
	display: inline-block; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3.2' y='10.4' width='17.6' height='10.6' rx='1.4' fill='%235E6475'/%3E%3Crect x='2' y='6.4' width='20' height='4.4' rx='1.2' fill='%23FF8A5C'/%3E%3Crect x='10.3' y='6.4' width='3.4' height='14.6' fill='%23FFE1D3'/%3E%3Cpath d='M12 6.6C10.3 3 6.6 3.5 7.1 5.7c.4 1.6 2.8 1.3 4.9.9z' fill='%23FF8A5C'/%3E%3Cpath d='M12 6.6c1.7-3.6 5.4-3.1 4.9-.9-.4 1.6-2.8 1.3-4.9.9z' fill='%23FF8A5C'/%3E%3C/svg%3E") no-repeat center / contain;
	border: 0 !important; box-shadow: none !important;
}
/* 거르는 칸 — 글씨가 없으니 크게 */
.cl-card--search td .hb-lb .hb-box { width: 22px; height: 22px; margin: 0; vertical-align: -6px; }
/* 이름 옆 · 상담기록 — 이름이 밀리지 않을 만큼 */
.cust-list .hb-mark { width: 18px; height: 18px; margin-left: 4px; vertical-align: -4px; }
.cf-head__who .hb-mark { width: 22px; height: 22px; margin-left: 7px; vertical-align: -5px; }
.cust-log .hb-mark, td .hb-mark { width: 18px; height: 18px; vertical-align: -4px; }

/* 목록의 이름 옆 그림 — 이름·TAG·CSR 이 바짝 붙게 자리만큼만 (사용자 지시 2026-09-20) */
.cust-list .hb-mark { width: 16px; height: 16px; margin-left: 3px; vertical-align: -3px; }
.cust-list .np-mark { width: 30px; height: 12px; margin-left: 3px; vertical-align: -1px; }
.cust-list td .schedule-count, .cust-list td .contract-count { margin-left: 2px; }

/* ── 회원 목록 제목줄 색·줄바꿈·여백 · 칸 이름(clc-*)으로 (2026-09-28) ──
   전에는 몇 번째 칸인지(nth-child)로 걸어 칸 차례를 바꿀 때마다 색이 엉뚱한 칸으로 옮겨 갔다.
   CSR 은 퍼미션센터의 일이라 오렌지, CP·TA 는 초록 · 아래 값의 색과 같은 규칙이다. */
.cust-list.table.type--1 > tbody > tr > th.clc-csr,
.cust-list.table.type--1 > tr > th.clc-csr,
.cust-list th.clc-csr { color: var(--orange-deep, #5E6475) !important; }
.cust-list.table.type--1 > tbody > tr > th.clc-cp,
.cust-list.table.type--1 > tbody > tr > th.clc-ta,
.cust-list.table.type--1 > tr > th.clc-cp,
.cust-list.table.type--1 > tr > th.clc-ta,
.cust-list th.clc-cp, .cust-list th.clc-ta { color: var(--lapl-green, #253272) !important; }
/* 접히면 안 되는 칸 — 번호·상담값·사람·연락처·날짜 */
.cust-list th, .cust-list td { white-space: normal; }
.cust-list .clc-no, .cust-list .clc-route, .cust-list .clc-csr, .cust-list .clc-cp, .cust-list .clc-ta, .cust-list .clc-vc,
.cust-list .clc-pm, .cust-list .clc-phone, .cust-list .clc-last, .cust-list .clc-fcdt, .cust-list .clc-insdt { white-space: nowrap; }
.cust-list td.clc-name, .cust-list th.clc-name { padding-right: 2px !important; }
/* 이름 칸 배지는 작게 */
.cust-list .np-mark { width: 26px; height: 10px; margin-left: 2px; }
.cust-list .hb-mark { width: 14px; height: 14px; margin-left: 2px; vertical-align: -3px; }
.cust-list td .schedule-count, .cust-list td .contract-count { margin-left: 1px; font-size: 11px; }

/* ── 말로 찾기 (사용자 지시 2026-09-20) ── */
.nlq-card { margin-bottom: 10px; padding: 14px 18px; }
.nlq-f { display: flex; align-items: center; gap: 8px; }
.nlq-f__ico { width: 20px; height: 20px; flex: 0 0 auto;
	fill: none; stroke: var(--lapl-green, #253272); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nlq-f__in { flex: 1 1 auto; height: 38px; padding: 0 12px;
	border: 1px solid var(--border, #E4E4E7); border-radius: 10px; font-size: 14px; }
.nlq-f__in:focus { border-color: var(--lapl-green, #253272); outline: 0; }
.nlq-f__in::placeholder { color: #B9BCC4; }
.nlq-read { margin: 9px 0 0 28px; font-size: 12.5px; color: var(--muted, #9AA0AE); }
.nlq-read em { display: inline-block; margin-left: 5px; padding: 2px 9px; border-radius: 999px;
	background: #E6E8F4; color: #19214D; font-style: normal; font-weight: 600; }
.nlq-read--none { color: var(--orange-deep, #5E6475); }
@media (max-width: 767px) {
	.nlq-card { border-radius: 0; padding: 12px 14px; }
	.nlq-f__ico { display: none; }
	.nlq-read { margin-left: 0; }
}

/* 말로 찾기 — 클로드가 풀었는지 규칙이 풀었는지 (사용자 지시 2026-09-20) */
.nlq-by { display: inline-block; margin-right: 4px; padding: 1px 7px; border-radius: 999px;
	background: #EEF0F3; color: #6B7080; font-size: 11px; font-weight: 700; }
.nlq-by.is-ai { background: #F0EAFB; color: #6B3FA0; }

/* 클로드 API 설정 화면 (사용자 지시 2026-09-20) */
.ai-msg { margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; background: #E6E8F4; color: #19214D; font-size: 13.5px; font-weight: 600; }
.ai-now { margin: 0; font-size: 14px; }
.ai-now code { margin: 0 8px; padding: 2px 8px; border-radius: 6px; background: #F4F4F6; font-size: 13px; }
.ai-now__src { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #E6E8F4; color: #19214D; font-size: 11.5px; font-weight: 700; }
.ai-now__src--db { background: #FFF3E8; color: #C4610F; }
.ai-now--none { color: var(--orange-deep, #5E6475); font-weight: 600; }
.ai-h { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--navy, #17213A); }
.ai-p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.7; }
.ai-p code, .ai-pre { font-family: ui-monospace, Menlo, Consolas, monospace; }
.ai-pre { margin: 6px 0; padding: 12px 14px; border-radius: 10px; background: #17213A; color: #E8EAF0; font-size: 13px; }
.ai-log { margin: 4px 0; font-size: 13px; color: var(--text-2, #687084); }
.ai-log b { margin-right: 6px; color: var(--navy, #17213A); }

/* ── 말로 찾기가 검색 상자 안으로 들어왔다 (사용자 지시 2026-09-20) ──
   카드 하나를 따로 띄우지 않고 Search 줄 바로 아래 한 줄로 앉는다. */
.nlq-card { display: none; }
.cl-card--search tr.nlq-tr > th, .cl-card--search tr.nlq-tr > td { padding-top: 11px; padding-bottom: 11px; }
.nlq-th span { color: #6B3FA0; }
.nlq-th .cf-ico { stroke: #6B3FA0; }
.cl-card--search .nlq-f { display: flex; align-items: center; gap: 8px; }
.cl-card--search .nlq-f__in { flex: 1 1 auto; height: 36px; padding: 0 12px;
	border: 1px solid var(--border, #E4E4E7); border-radius: 10px; font-size: 14px; }
.cl-card--search .nlq-f__in:focus { border-color: #6B3FA0; outline: 0; }
.cl-card--search .nlq-f__in::placeholder { color: #B9BCC4; }
.cl-card--search .nlq-read { margin: 8px 0 0; font-size: 12.5px; color: var(--muted, #9AA0AE); }
@media (max-width: 767px) { .cl-card--search .nlq-f { flex-wrap: wrap; } }

/* ── AI 상담비서 라플 (사용자 지시 2026-09-20) ──
   얼굴 그림은 라플앱의 로봇 마스코트를 쓴다. 아직 안 들어왔으면 동그라미만 보인다. */
.nlq-face { display: inline-block; width: 22px; height: 22px; margin: 0 7px -6px 0;
	border-radius: 50%; background: #E9E2F7 url(../images/icon/lapl-bot.png) no-repeat center / contain; }
.nlq-th span { color: #6B3FA0; }
.nlq-th .cl-th__sub { color: #9B8AC0 !important; }
.nlq-by.is-ai { background: #F0EAFB; color: #6B3FA0; }

/* ── AI상담비서·라플 (사용자 지시 2026-09-20) ── */
.nlq-face { display: none; }
/* 이름표 — 앞은 회색, 라플만 초록 */
.cl-card--search tr.nlq-tr > th span { color: var(--text-2, #687084) !important; }
.nlq-th .nlq-mid { font-style: normal; margin: 0 3px; color: #C3C7CE; }
.nlq-th .nlq-name { color: var(--lapl-green, #253272) !important; font-weight: 700; }
.nlq-th .cf-ico { stroke: var(--lapl-green, #253272); }

/* 로봇은 줄 오른쪽 끝에 서서 위로 넘친다 — 칸 안에 가두면 뭉개진다 */
.cl-card--search tr.nlq-tr > td { position: relative; overflow: visible; }
.cl-card--search table, .cl-card--search, .cl-card--search tr.nlq-tr { overflow: visible; }
.nlq-bot {
	position: absolute; right: 8px; bottom: -10px;
	width: 66px; height: 76px; pointer-events: none;
	background: url(../images/icon/lapl-bot.png) no-repeat center bottom / contain;
	filter: drop-shadow(0 4px 10px rgba(23, 33, 58, .18));
}

/* 말로 검색하는 칸 — 초록 테두리 둥근 상자, 맨 앞에 말풍선. 남는 자리는 모두 글 칸이 가져간다 */
.cl-card--search .nlq-f { display: flex; align-items: center; gap: 8px; padding-right: 80px; }
.nlq-box {
	flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px;
	height: 40px; padding: 0 16px;
	border: 1.5px solid var(--lapl-green, #253272); border-radius: 999px; background: #fff;
}
.nlq-box:focus-within { box-shadow: 0 0 0 3px rgba(37, 50, 114, .12); }
.nlq-talk { flex: 0 0 auto; width: 18px; height: 18px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23253272' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 01-8 8H7l-4 3v-4.5A8 8 0 1121 12z'/%3E%3Cpath d='M8 11h8M8 14h5'/%3E%3C/svg%3E") no-repeat center / contain; }
.cl-card--search .nlq-f__in {
	flex: 1 1 auto; min-width: 0; width: auto; max-width: none; height: 100%;
	padding: 0 !important; border: 0 !important; border-radius: 0 !important;
	background: none !important; font-size: 14px;
}
.cl-card--search .nlq-f__in:focus { outline: 0; box-shadow: none; border: 0 !important; }
.cl-card--search .nlq-f__in::placeholder { color: #B9BCC4; }
@media (max-width: 1279px) { .nlq-bot { display: none; } .cl-card--search .nlq-f { padding-right: 0; } }

/* Search 줄은 한 줄로 (사용자 지시 2026-09-20).
   AI 줄이 뒤에 붙으면서 '마지막 줄' 을 겨냥하던 규칙이 그쪽으로 옮겨가
   Search 가 두 줄로 접히고 AI 칸은 좁아졌다. 이제 이름표로 잡는다. */
.cl-card--search table tr.search-row > td { display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; }
/* AI 줄은 제 규칙으로 — 남는 자리를 글 칸이 모두 가져간다 */
.cl-card--search table tr.nlq-tr > td { display: table-cell; }

/* ── 라플 로봇 — 그림자 빼고, 더 올라오고, 눈을 깜빡인다 (사용자 지시 2026-09-20) ── */
.nlq-bot {
	position: absolute; right: 6px; bottom: -8px;
	width: 80px; height: 92px; pointer-events: none;
	background: url(../images/icon/lapl-bot.png) no-repeat center bottom / contain;
	filter: none;
}
.cl-card--search .nlq-f { padding-right: 92px; }

/* 눈꺼풀 — 눈 자리를 잠깐 덮었다 뗀다. 자리는 그림에서 눈의 청록 점을 찾아 잡았다
   (원본 282x328 안에서 왼눈 x93~122 y64~109, 오른눈 x123~153 y68~106 → 비율로 옮김). */
.nlq-bot::before, .nlq-bot::after {
	content: ""; position: absolute; background: #0B0D12; border-radius: 45%;
	transform: scaleY(0); transform-origin: center;
	animation: nlqBlink 5.4s ease-in-out infinite;
}
.nlq-bot::before { left: 32%; top: 18.5%; width: 12%; height: 15.5%; }
.nlq-bot::after  { left: 43%; top: 19.5%; width: 12%; height: 14%; animation-delay: .03s; }
@keyframes nlqBlink {
	0%, 90%   { transform: scaleY(0); }
	93%, 95%  { transform: scaleY(1); }
	98%, 100% { transform: scaleY(0); }
}
/* 움직임을 줄여 달라고 한 사람에게는 깜빡이지 않는다 */
/* 움직임 줄이기 설정에서도 눈은 깜빡인다 (사용자 지시 2026-09-20, 두 번 청하심).
   아주 작고 화면을 밀지 않는 움직임이라 읽기를 방해하지 않는다.
   windows 의 "애니메이션 표시" 를 꺼 두면 다른 곳의 움직임은 여전히 멈춘다. */

@media (max-width: 1279px) { .nlq-bot { display: none; } .cl-card--search .nlq-f { padding-right: 0; } }

/* 마이크 — 휴대폰에서만, 초록 상자 안 오른쪽 끝 (사용자 지시 2026-09-20) */
.nlq-mic { flex: 0 0 auto; width: 30px; height: 30px; margin-right: -6px;
	border: 0; border-radius: 50%; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23253272' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0'/%3E%3Cpath d='M12 18v4M9 22h6'/%3E%3C/svg%3E") no-repeat center / 19px;
	cursor: pointer; }
.nlq-mic:hover { background-color: #E6E8F4; }
.nlq-mic.is-on { background-color: #E6E8F4; animation: nlqMic 1s ease-in-out infinite; }
@keyframes nlqMic { 0%, 100% { box-shadow: 0 0 0 0 rgba(37, 50, 114,.35); } 50% { box-shadow: 0 0 0 6px rgba(37, 50, 114,0); } }

/* ── 찾기 단추는 위 검색 단추와 같은 자리·같은 모습으로 (사용자 지시 2026-09-20) ──
   같은 옷(btn-flat btn-flat--on)을 입혀 두 줄의 단추가 세로로 떨어지게 한다.
   오른쪽 여백은 로봇이 설 자리다 — 그만큼만 남기고 글 칸이 나머지를 다 가져간다. */
.cl-card--search .nlq-f { padding-right: 62px; }
#nlqGo { flex: 0 0 auto; height: 40px; }
@media (max-width: 1279px) { .nlq-bot { display: none; } .cl-card--search .nlq-f { padding-right: 0; } }

/* 찾기 단추를 위 검색 단추와 세로로 딱 맞춘다 (사용자 지시 2026-09-20).
   재 보니 16px 왼쪽에 있었다 — 오른쪽 여백을 그만큼 줄인다.
   로봇은 단추 뒤로 물린다. 앞에 서면 단추를 가리고, 옆으로 밀면 줄이 길어진다. */
.cl-card--search .nlq-f { padding-right: 46px; }
#nlqGo { position: relative; z-index: 2; }
.nlq-bot { right: -4px; bottom: -14px; width: 86px; height: 100px; z-index: 1; }
@media (max-width: 1279px) { .nlq-bot { display: none; } .cl-card--search .nlq-f { padding-right: 0; } }

/* 찾기 단추 — 오렌지로 못 박는다 (대표님 지시 2026-09-22: "찾기는 오렌지컬러로").
   2026-09-20 에는 초록으로 박아 뒀는데, 그 바람에 위 검색 단추와 같은 색이 되어 둘이 구분되지 않았다.
   검색은 초록, AI 라플 찾기는 오렌지다. */
.cl-card--search #nlqGo.btn-flat {
	background: #5E6475 !important;
	border: 1px solid #5E6475 !important;
	color: #fff !important; font-weight: 700;
	height: 40px; border-radius: 8px;
}
.cl-card--search #nlqGo.btn-flat:hover {
	background: #E3730F !important; border-color: #E3730F !important;
}

/* 눈 깜빡임을 다시 또렷하게 — 감았다 뜨는 사이가 너무 짧으면 안 보인다 (사용자 지시 2026-09-20) */
.nlq-bot::before, .nlq-bot::after {
	animation: nlqBlink 4.2s linear infinite !important;
}
@keyframes nlqBlink {
	0%, 88%   { transform: scaleY(0); }
	90%, 93%  { transform: scaleY(1); }
	95%, 100% { transform: scaleY(0); }
}

/* 휴대폰 — AI 검색창을 맨 위로 (사용자 지시 2026-09-20).
   작은 화면에서는 조건을 하나씩 고르기보다 말로 묻는 편이 빠르다. 그래서 제일 먼저 만난다. */
@media (max-width: 767px) {
	.cl-card--search table.table { display: flex; flex-direction: column; }
	.cl-card--search table.table > tbody { display: contents; }
	.cl-card--search tr.nlq-tr { order: -1; display: block; }
	.cl-card--search tr.nlq-tr > th { display: none; }
	.cl-card--search tr.nlq-tr > td { display: block; padding: 4px 0 12px !important; border-top: 0 !important; }
	.cl-card--search .nlq-f { padding-right: 0; gap: 6px; }
	.cl-card--search .nlq-box { height: 42px; }
	#nlqGo.btn-flat { height: 42px; padding: 0 16px; }
}

/* ── 휴대폰 — AI 검색창을 맨 위에 (사용자 지시 2026-09-20) ──
   위 규칙이 검색 줄 하나만 남기고 나머지를 감추고 있어 AI 줄까지 같이 사라져 있었다.
   작은 화면에서는 조건을 하나씩 고르기보다 말로 묻는 편이 빠르다 — 제일 먼저 만나게 한다. */
@media (max-width: 767px) {
	.cl-card--search table.table { display: flex; flex-direction: column; }
	.cl-card--search table.table > tbody { display: contents; }
	.cl-card--search table.table tr.nlq-tr { display: block !important; order: -1; border-top: 0; }
	.cl-card--search table.table tr.search-row { display: block; order: 1; }
	.cl-card--search tr.nlq-tr > th { display: none !important; }
	.cl-card--search tr.nlq-tr > td {
		display: block !important; padding: 10px 12px !important; border-top: 0 !important;
	}
	.cl-card--search .nlq-f { padding-right: 0 !important; gap: 6px; }
	.cl-card--search .nlq-box { height: 42px; padding: 0 12px; }
	.cl-card--search .nlq-f__in { font-size: 15px; }
	#nlqGo.btn-flat { height: 42px; padding: 0 14px; }
	/* 로봇은 휴대폰에서 자리를 너무 먹는다 — 글 칸을 다 내준다 */
	.nlq-bot { display: none; }
	.cl-card--search .nlq-read { margin-top: 6px; }
}

/* ── AI상담비서 라플 · 고객 화면 (사용자 지시 2026-09-20) ──────────────
   검색 화면의 라플과 같은 모습으로 맞춘다 — 같은 얼굴이 두 군데서 다르게 보이면
   다른 기능으로 읽힌다. 초록 둥근 칸 · 로봇 · 톡 이모지 모두 거기 것을 그대로 쓴다. */
.cva-card .cust-sec { display: flex; align-items: center; }
.cva-body { padding: 4px 2px 2px; }
.cva-row { position: relative; display: flex; align-items: center; padding-right: 92px; }
.cva-box { flex: 1 1 auto; min-width: 0; }
.cva-bot { position: absolute; right: -2px; bottom: -18px; width: 86px; height: 100px; }

.cva-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cva-chip {
	height: 34px; padding: 0 16px; border: 1.5px solid var(--lapl-green, #253272);
	border-radius: 999px; background: #fff; color: var(--lapl-green, #253272);
	font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer;
	transition: background .15s, color .15s;
}
.cva-chip:hover { background: var(--lapl-green, #253272); color: #fff; }
.cva-chip.is-busy { background: #f2f4f6; border-color: #d5dae0; color: #8b95a1; cursor: default; }
/* 녹취 요약 칩 — 다른 칩과 성격이 달라 오렌지 (사용자 지시 2026-09-21) */
.cva-chip--rec { border-color: var(--lapl-orange, #5E6475); color: var(--lapl-orange, #5E6475); }
.cva-chip--rec:hover { background: var(--lapl-orange, #5E6475); color: #fff; }

.cva-out { margin-top: 14px; }
.cva-out__msg { margin: 0; font-size: 14px; color: #4e5968; }
.cva-out__msg.is-err { color: #d13b3b; }
.cva-out__msg:empty { display: none; }
.cva-out__txt {
	width: 100%; margin-top: 4px; padding: 12px 14px; border: 1px solid #d5dae0;
	border-radius: 10px; background: #fbfcfd; font-size: 14px; line-height: 1.7;
	color: #1f2937; resize: vertical;
	/* 글 길이에 맞춰 늘어난다 (사용자 지시 2026-09-21) — 안에서 스크롤하지 않게.
	   높이는 JS(show)가 scrollHeight 로 잡아 주고, 여기서는 그 값이 잘리지 않게 한다. */
	overflow: hidden; min-height: 96px;
}
.cva-out__act { display: flex; gap: 8px; margin-top: 10px; }

@media (max-width: 767px) {
	.cva-row { padding-right: 0; }
	.cva-bot { display: none; }
	.cva-chip { flex: 1 1 calc(50% - 4px); padding: 0 10px; font-size: 13px; }
}

/* ── 라플 표정 — 라플앱과 같은 방식으로 (사용자 지시 2026-09-20: "라플 세션에 같은 형식으로") ──
   라플은 눈을 감았다 뜨지 않는다. 동그란 눈과 ^^ 웃는 눈을 번갈아 보여 준다 (대표님 2026-09-13 결정).
   원본 그림은 그대로 두고, 그 위에 가림 타원 2개 + ^^ 2개를 그린 SVG 한 장을 얹어 켰다 껐다 한다.
   steps(1,end) 라 섞이지 않고 탁 바뀐다 — 페이드를 넣으면 두 눈이 겹쳐 보인다.
   좌표는 141×164 그림의 눈 자리다. lapl-bot.png(282×328)는 비율이 같아 그대로 맞는다.
   prefers-reduced-motion 은 일부러 걸지 않는다 — 대표님 PC 가 reduce 라 걸면 대표님 화면에서만 안 움직인다. */
.nlq-bot::before { content: none; }
.nlq-bot::after {
	content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
	left: 0; top: 0; right: 0; bottom: 0; width: auto; height: auto; transform: none; border-radius: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 141 164'%3E%3Cg fill='%231f2c31'%3E%3Cellipse cx='50.5' cy='37' rx='8' ry='9.5'/%3E%3Cellipse cx='74' cy='40' rx='9.5' ry='9.5'/%3E%3C/g%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
	animation: lpRobotBlink 4.8s steps(1, end) infinite !important;
}
/* 눈 깜빡임 (대표님 지시 2026-09-22: "눈깜빡이게").
   9월 13일에는 ^^ 웃는 눈과 번갈아 보이게 했는데, 이제 감았다 뜨는 깜빡임으로 바꾼다.
   덮는 그림은 눈 자리의 어두운 타원 두 개뿐이다 — 청록 눈빛이 잠깐 사라지면 감은 것으로 읽힌다.
   4.8초에 0.14초만 감는다. 더 길면 조는 것처럼 보이고, 더 짧으면 눈에 안 띈다. */
@keyframes lpRobotBlink { 0%, 95.5% { opacity: 0 } 95.6%, 98.5% { opacity: 1 } 98.6%, 100% { opacity: 0 } }

/* 고객 화면 검색창을 회원 목록 것과 같은 크기로 (사용자 지시 2026-09-20).
   목록 화면의 초록 칸은 '창 너비 − 385' 로 떨어진다 (이름표 칸 200 + 안쪽 여백들 + 로봇 자리를 재서 얻은 값). */
.cva-box { width: 100%; }
@media (max-width: 767px) { .cva-box { max-width: none; } }

/* AI 줄 — 이름표 칸(회색)과 내용 칸 (사용자 지시 2026-09-20) */
.cva-tb { width: 100%; }
.cva-th span { display: inline-flex; align-items: center; }
.cva-card .cva-body { padding: 6px 0 2px; }

/* ── 단계별 승인사항 (사용자 지시 2026-09-20) ──────────────────────────
   지점장 승인 → 본부장 승인 을 한 줄로 늘어놓는다. 지나간 걸음은 초록, 지금 차례는 오렌지,
   아직 오지 않은 걸음은 회색 — 색만 보고도 어디까지 왔는지 알 수 있게. */
.ap-tl { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 6px; font-size: 12px; line-height: 1.5; }
.ap-tl__ar { color: #b0b8c1; font-style: normal; }
.ap-tl__i { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 1px solid #e5e8eb; border-radius: 999px; background: #fff; }
.ap-tl__i b { font-weight: 700; color: #4e5968; }
.ap-tl__i em { font-style: normal; color: #6b7684; }
.ap-tl__i u { text-decoration: none; font-weight: 600; color: #8b95a1; }
.ap-tl__i.is-ok { border-color: #B7BDE2; background: #F2F4FB; }
.ap-tl__i.is-ok b, .ap-tl__i.is-ok u { color: var(--lapl-green, #253272); }
.ap-tl__i.is-now { border-color: #ffd9a8; background: #fff8ef; }
.ap-tl__i.is-now b, .ap-tl__i.is-now u { color: #d9820a; }
.ap-tl__i.is-no { border-color: #f3c2c2; background: #fdf3f3; }
/* 참조 — 보는 자리라 옅게 (대표님 지시 2026-09-23) */
.ap-tl__i.is-cc { border-style: dashed; background: #fafbfc; }
/* 자리 계정 · 오늘 누가 앉았는지 묻는 창 (대표님 지시 2026-09-23) */
.att-who { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center;
           background: rgba(23, 33, 58, .45); padding: 20px; }
.att-who__box { width: 100%; max-width: 380px; padding: 26px 24px 20px; border-radius: 16px; background: #fff;
                box-shadow: 0 18px 50px rgba(0,0,0,.22); text-align: center; }
.att-who__t { margin: 0 0 6px; font-size: 17px; font-weight: 700; color: #1d1d1f; }
.att-who__d { margin: 0 0 18px; font-size: 12.5px; line-height: 1.6; color: #8b95a1; word-break: keep-all; }
.att-who__btns { display: grid; gap: 8px; }
.att-who__b { padding: 13px; border: 0; border-radius: 10px; background: var(--lapl-green, #253272); color: #fff;
              font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.att-who__b:disabled { opacity: .5; }
.att-who__skip { margin-top: 14px; border: 0; background: none; color: #9a9aa0; font-family: inherit;
                 font-size: 12.5px; cursor: pointer; text-decoration: underline; }
/* 일정등록 팝업의 두 단추는 진한 초록 (대표님 지시 2026-09-23 "둘다 진한 초록으로") · 라플 초록 로고의 진한 쪽 */
.att-who__b--hb, .att-who__b--hb2 { background: #253272; color: #fff; }
.ap-tl__i.is-cc b, .ap-tl__i.is-cc em { color: #8b95a1; }
.ap-tl__i.is-no b, .ap-tl__i.is-no u { color: #d13b3b; }
.ap-tl__i.is-skip { opacity: .5; }
.ap-tl__note { color: #d13b3b; }
.lv-ro .ap-tl { margin-top: 0; }

/* AI상담비서 는 오렌지, 라플 은 초록 (사용자 지시 2026-09-20) —
   하는 일(상담비서)과 이름(라플)을 색으로 갈라 둔다. 오렌지는 로고 삼각형 색이다. */
.nlq-th span, .cva-th span { color: var(--lapl-orange, #5E6475) !important; font-weight: 700; }
.nlq-th .cf-ico, .cva-th .cf-ico { stroke: var(--lapl-orange, #5E6475); }
.nlq-th .nlq-name, .cva-th .nlq-name { color: var(--lapl-green, #253272) !important; font-weight: 700; }
.nlq-th .nlq-mid, .cva-th .nlq-mid { font-style: normal; margin: 0 3px; color: #C3C7CE; }

/* 이름표 칸과 내용 칸 사이에 선 (사용자 지시 2026-09-20) */
.nlq-th, .cva-th { border-right: 1px solid #e5e8eb; }

/* 공지 본문 속 그림 (사용자 지시 2026-09-20) */
.nt-tpl__pic { margin: 8px 0 14px; text-align: center; }
.nt-tpl__pic img { width: 132px; height: auto; }

/* 라플챗봇 — 라플이 정리해 준 답 (사용자 지시 2026-09-20) */
.askbox__bot { display: inline-block; margin-bottom: 4px; padding: 1px 8px; border-radius: 999px;
	background: var(--lapl-green, #253272); color: #fff; font-size: 11px; font-weight: 700; }
.askbox__ai { margin: 2px 0 0; line-height: 1.7; white-space: normal; }
.askbox__src { margin-top: 8px; padding-top: 6px; border-top: 1px dashed #e5e8eb; font-size: 12px; }
.askbox__src b { display: block; margin-bottom: 2px; color: #8b95a1; font-weight: 600; }
.askbox__src .askbox__more { display: block; }
.askbox__act .ibtn--green { background: var(--lapl-green, #253272); border-color: var(--lapl-green, #253272); color: #fff; }

/* 공지 본문 손질 (사용자 지시 2026-09-20) —
   아이콘은 제목 바로 앞에, 로봇은 맨 아래 오른쪽에, ※ 줄은 바탕 없이 회색 글씨로. */
.nt-tpl__st { display: block !important; gap: 0 !important; }
.nt-tpl__b b .nt-tpl__i { display: inline-flex !important; width: 20px; height: 20px; margin-right: 6px;
	border-radius: 6px; background: transparent; vertical-align: -4px; }
.nt-tpl__b b .nt-tpl__i svg { width: 17px; height: 17px; }
.nt-tpl__note { margin: 6px 0 0 !important; padding: 2px 0 !important; border: 0 !important;
	border-radius: 0 !important; background: none !important; color: #8b95a1 !important; }
.nt-tpl__note b { color: #b0b8c1 !important; }
.nt-tpl__pic { margin: 10px 0 0; text-align: right; }
.nt-tpl__pic img { width: 116px; height: auto; }

/* ── AI상담비서·라플 손질 (사용자 지시 2026-09-20) ────────────────────
   AI상담비서 는 늘 회색, 라플 만 초록. 검색창은 반으로 줄이고, 로봇은 오른쪽 끝에 통째로 보이게. */
.nlq-th span, .cva-th span { color: #6B7684 !important; font-weight: 700; }
.nlq-th .cf-ico, .cva-th .cf-ico { stroke: #8B95A1; }
.nlq-th .nlq-name, .cva-th .nlq-name { color: var(--lapl-green, #253272) !important; font-weight: 700; }

/* 검색창을 줄인다 · 너무 넓으면 둥근 테두리가 그냥 선으로 보인다 */
.cva-row { position: relative; display: flex; align-items: center; padding-right: 0; }
.cva-box { width: 100%; max-width: 900px; }
.cva-card { overflow: visible; }
.cva-tb, .cva-tb td { overflow: visible; }

/* 로봇 · 줄 오른쪽 끝에, 잘리지 않게 */
.cva-bot { position: absolute; right: 14px; bottom: -34px; width: 88px; height: 102px; }

/* 이렇게 물어보세요 */
.cva-ex { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.cva-ex__lb { margin-right: 2px; font-size: 12px; color: #8B95A1; }
.cva-ex__i { height: 28px; padding: 0 12px; border: 1px solid #E5E8EB; border-radius: 999px;
	background: #F7F8FA; color: #4E5968; font-size: 12.5px; line-height: 1; cursor: pointer; }
.cva-ex__i:hover { border-color: var(--lapl-green, #253272); background: #fff; color: var(--lapl-green, #253272); }

@media (max-width: 767px) {
	.cva-box { max-width: none; }
	.cva-bot { display: none; }
	.cva-ex__lb { width: 100%; }
}

/* 로봇은 줄이 아니라 박스 전체를 기준으로 (사용자 지시 2026-09-20: "로봇이미지 확인해줘").
   줄(40px)에 매달아 두면 위로 넘쳐 카드 머리에서 잘린다. 박스는 130px 남짓이라 통째로 들어간다. */
.cva-card .cva-body { position: relative; padding: 6px 104px 6px 0; }
.cva-row { padding-right: 0; }
.cva-bot { position: absolute; right: 4px; bottom: 0; top: auto; width: 88px; height: 102px; }
@media (max-width: 767px) { .cva-card .cva-body { padding-right: 0; } }

/* 로봇이 매달릴 곳은 줄이 아니라 박스다 · 줄이 position:relative 면 줄(40px)에 매달려 위로 넘친다 */
.cva-row { position: static !important; }

/* 검색창 테두리 (사용자 지시 2026-09-20: "검색창 테두리 넣어줘").
   안쪽 input 이 제 테두리를 그려서 초록 둥근 테두리를 덮고 있었다 ·
   회원 목록에서는 .cl-card--search 로 이미 벗겨 두었는데, 고객 화면은 카드 이름이 달라 그 규칙이 안 닿았다. */
.cva-card .nlq-f__in {
	flex: 1 1 auto; min-width: 0; width: auto; max-width: none; height: 100%;
	padding: 0 !important; border: 0 !important; border-radius: 0 !important;
	background: none !important; box-shadow: none !important; font-size: 14px;
}
.cva-card .nlq-f__in:focus { outline: 0; box-shadow: none !important; border: 0 !important; }
.cva-card .nlq-f__in::placeholder { color: #B9BCC4; }
.cva-box { border: 1.5px solid var(--lapl-green, #253272) !important; border-radius: 999px !important; background: #fff !important; }
.cva-card .nlq-mic { flex: 0 0 auto; }

/* 아이콘도 회색으로 (사용자 지시 2026-09-20: "AI상담비서(항상회색)") */
.nlq-th .cf-ico, .cva-th .cf-ico { stroke: #8B95A1 !important; }

/* ── 휴대폰 (사용자 지시 2026-09-20: "모바일에도 한줄에 넘치지 않게") ──────────
   이름표 칸이 238px 로 버티고 있어 내용 칸이 60px 만 남았다 · 단추 글씨가 세로로 서 버린다.
   휴대폰에서는 표를 풀어 이름표를 윗줄로 올리고, 단추는 한 줄에 하나씩 놓는다. */
@media (max-width: 767px) {
	.cva-tb, .cva-tb tbody, .cva-tb tr, .cva-tb th, .cva-tb td { display: block; width: 100%; }
	.cva-tb colgroup, .cva-tb col { display: none; }
	.cva-th { border-right: 0 !important; border-bottom: 1px solid #e5e8eb; padding: 10px 12px !important; }
	.cva-card .cva-body { padding: 12px !important; }
	.cva-box { max-width: none; width: 100%; }
	.cva-chip { flex: 1 1 100%; width: 100%; white-space: nowrap; }
	.cva-ex { gap: 6px; }
	.cva-ex__lb { width: 100%; margin-bottom: 2px; }
	.cva-ex__i { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.cva-out__act { flex-wrap: wrap; }
}

/* ── 휴대폰에서는 AI 라플을 맨 위로 · 이름표도 짧게 (사용자 지시 2026-09-20) ──
   손에 쥐고 보는 화면에서는 먼저 묻고 시작한다 · 회원 정보는 그 아래로 내려도 된다.
   이름표는 좁은 칸에서 줄이 접히므로 'AI라플' 한 덩이로 줄인다. */
@media (max-width: 767px) {
	.cv-grid { display: flex !important; flex-direction: column; }
	.cva-card { order: -1; }
	.cva-th span { font-size: 0 !important; }
	.cva-th span::before { content: "AI"; font-size: 15px; font-weight: 700; color: #6B7684; }
	.cva-th .nlq-mid { display: none; }
	.cva-th .nlq-name { font-size: 15px !important; }
}

/* 이름표 칸 옆 선 (사용자 지시 2026-09-20: "옆에 테두리 선 넣어줘").
   표 기본 규칙이 th 의 테두리를 지워 앞서 넣은 선이 안 보였다 · 여기서 다시 세운다. */
.cva-tb th.cva-th { background: #F7F8FA !important; border-right: 1px solid #E5E8EB !important; }
@media (max-width: 767px) { .cva-tb th.cva-th { border-right: 0 !important; } }

/* 휴대폰에서는 이름표가 제목 줄이 된다 · 회색 바탕을 두면 작은 회색 덩이로 떠 보인다 */
@media (max-width: 767px) { .cva-tb th.cva-th { background: transparent !important; padding-left: 0 !important; } }

/* ── 메일함 (사용자 지시 2026-09-20: 하이웍스 메일을 POP3 로) ──────────────
   왼쪽 목록 · 오른쪽 본문. 좁은 화면에서는 위아래로 눕는다. */
.mlb-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mlb-f { display: flex; align-items: center; gap: 6px; margin: 0; }
.mlb-sp { flex: 1 1 auto; }
.mlb-q { height: 34px; padding: 0 12px; border: 1px solid #d5dae0; border-radius: 8px; font-size: 14px; min-width: 240px; }

.mlb { display: grid; grid-template-columns: 380px 1fr; gap: 14px; margin-top: 12px; align-items: start; }
.mlb-list { background: #fff; border: 1px solid #e5e8eb; border-radius: 12px; overflow: hidden; max-height: 76vh; overflow-y: auto; }
.mlb-i { display: block; padding: 11px 14px; border-bottom: 1px solid #f1f3f5; text-decoration: none; color: #4e5968; }
.mlb-i:hover { background: #f7f8fa; text-decoration: none; }
.mlb-i.is-on { background: #F2F4FB; box-shadow: inset 3px 0 0 var(--lapl-green, #253272); }
.mlb-i__top { display: flex; align-items: center; gap: 5px; font-size: 12.5px; }
.mlb-i__who { color: #333d4b; font-weight: 600; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mlb-i__dt { margin-left: auto; font-style: normal; color: #b0b8c1; }
.mlb-i__su { display: block; margin-top: 3px; font-size: 14px; color: #333d4b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mlb-i.is-new .mlb-i__su, .mlb-i.is-new .mlb-i__who { font-weight: 700; color: #111; }
.mlb-i__pk { display: block; margin-top: 2px; font-size: 12.5px; color: #8b95a1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mlb-i__ai { display: block; margin-top: 5px; font-size: 12px; color: var(--lapl-green, #253272); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mlb-i__ai i { font-style: normal; margin-right: 5px; padding: 1px 6px; border-radius: 999px; background: var(--lapl-green, #253272); color: #fff; font-size: 10.5px; font-weight: 700; }
.mlb-tag { font-style: normal; padding: 1px 6px; border-radius: 999px; background: #f1f3f5; color: #6b7684; font-size: 10.5px; }
.mlb-tag--hot { background: #fff1ec; color: var(--lapl-orange, #5E6475); font-weight: 700; }
.mlb-tag--star { background: transparent; color: #f0a800; font-size: 13px; padding: 0; }

.mlb-view { background: #fff; border: 1px solid #e5e8eb; border-radius: 12px; padding: 18px 20px; min-height: 320px; }
.mlv__su { margin: 0 0 8px; font-size: 19px; font-weight: 700; color: #111; line-height: 1.4; }
.mlv__meta { margin: 0; font-size: 13.5px; }
.mlv__meta i { font-style: normal; margin-left: 8px; color: #b0b8c1; }
.mlv__to { margin: 2px 0 0; font-size: 12.5px; }
.mlv__files { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.mlv__file { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border: 1px solid #d5dae0; border-radius: 999px; font-size: 12.5px; color: #4e5968; text-decoration: none; }
.mlv__file:hover { border-color: var(--lapl-green, #253272); color: var(--lapl-green, #253272); text-decoration: none; }
.mlv__file svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mlv__file i { font-style: normal; color: #b0b8c1; }
.mlv__ai { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 14px 0 0; padding: 11px 0; border-top: 1px solid #f1f3f5; border-bottom: 1px solid #f1f3f5; }
.mlv__ai-lb { display: inline-flex; align-items: center; gap: 4px; margin-right: 4px; color: #6B7684; font-weight: 700; font-size: 13.5px; }
.mlv__ai-lb .cf-ico { width: 17px; height: 17px; stroke: #8B95A1; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mlv__body { margin-top: 16px; font-size: 14.5px; line-height: 1.85; color: #333d4b; word-break: break-word; }
.mls-body { padding: 12px 14px; border: 1px solid #d5dae0; border-radius: 10px; font-size: 14.5px; line-height: 1.8; }

@media (max-width: 1199px) { .mlb { grid-template-columns: 320px 1fr; } }
@media (max-width: 899px) {
	.mlb { grid-template-columns: 1fr; }
	.mlb-list { max-height: 44vh; }
	.mlb-q { min-width: 0; flex: 1 1 auto; }
	.mlb-f { flex: 1 1 100%; }
	.mlv__ai { gap: 6px; }
	.mlv__ai .cva-chip { flex: 1 1 calc(50% - 3px); }
}

/* ── 상단 초록 줄 · 메일과 팩스 한 박스 (사용자 지시 2026-09-20) ── */
.hdr-mf { display: inline-flex; align-items: center; gap: 0; padding: 0; }
.hdr-mf__a { display: inline-flex; align-items: center; gap: 5px; padding: 0 10px; color: inherit; text-decoration: none; line-height: 1; }
.hdr-mf__a:hover { text-decoration: none; opacity: .75; }
.hdr-mf__a svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hdr-mf__bar { font-style: normal; opacity: .45; }

/* ── 푸터 · 제휴사이트 흐르는 줄 (사용자 지시 2026-09-20) ── */
.ft { margin-top: 28px; padding: 14px 0; border-top: 1px solid #e5e8eb; background: #fbfcfd; }
.ft__in { display: flex; align-items: center; gap: 14px; }
.ft__lb { flex: 0 0 auto; font-size: 12.5px; font-weight: 700; color: #8b95a1; }
.ft-links { flex: 1 1 auto; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.ft-links__run { display: inline-flex; align-items: center; gap: 30px; white-space: nowrap; animation: ftRun 36s linear infinite; }
.ft-links:hover .ft-links__run { animation-play-state: paused; }   /* 읽으려는데 도망가면 안 된다 */
.ft-link { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: #4e5968; text-decoration: none; }
.ft-link:hover { color: var(--lapl-green, #253272); text-decoration: none; }
.ft-link b { font-weight: 700; }
.ft-link i { font-style: normal; color: #d5dae0; }
.ft-link span { color: #8b95a1; }
.ft-link:hover span { color: var(--lapl-green, #253272); }
@keyframes ftRun { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 767px) {
	.ft__in { flex-direction: column; align-items: flex-start; gap: 6px; }
	.ft-links { width: 100%; }
	.ft-links__run { gap: 22px; animation-duration: 26s; }
}

/* ── 푸터 제휴사이트 · 눌러서 펼치기 (사용자 지시 2026-09-21) ──────────
   흐르던 줄을 걷어냈다. 읽으려는 순간 글자가 지나가 버려 아무도 못 읽는다.
   평소에는 단추 하나, 누를 때만 목록이 내려온다. */
.ft-links, .ft-links__run, .ft__lb { display: none !important; }
.ft__in { display: flex; align-items: center; gap: 10px; }
.ft-dd { position: relative; }
.ft-dd__btn {
	display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px;
	border: 1px solid #d5dae0; border-radius: 999px; background: #fff;
	font-size: 13px; font-weight: 600; color: #4e5968; cursor: pointer;
}
.ft-dd__btn:hover { border-color: var(--lapl-green, #253272); color: var(--lapl-green, #253272); }
.ft-dd__ico { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ft-dd__ar { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
	border-top: 5px solid currentColor; transition: transform .15s; }
.ft-dd.is-open .ft-dd__ar { transform: rotate(180deg); }
.ft-dd.is-open .ft-dd__btn { border-color: var(--lapl-green, #253272); color: var(--lapl-green, #253272); }
.ft-dd__list {
	position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; min-width: 260px;
	padding: 6px; border: 1px solid #e5e8eb; border-radius: 12px; background: #fff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .10);
}
.ft-dd__list .ft-link {
	display: flex; align-items: center; gap: 7px; padding: 8px 11px; border-radius: 8px;
	font-size: 13px; color: #4e5968; text-decoration: none; white-space: nowrap;
}
.ft-dd__list .ft-link:hover { background: #F2F4FB; color: var(--lapl-green, #253272); text-decoration: none; }
.ft-dd__list .ft-link b { font-weight: 700; }
.ft-dd__list .ft-link i { font-style: normal; color: #d5dae0; }
.ft-dd__list .ft-link span { margin-left: auto; color: #8b95a1; font-size: 12px; }
.ft-dd__list .ft-link:hover span { color: var(--lapl-green, #253272); }
@media (max-width: 767px) { .ft-dd__list { min-width: 0; width: calc(100vw - 40px); } }

/* ── 상단 메일·팩스 박스는 걷어냈다 (사용자 지시 2026-09-21: 메일 하나로) ── */
.hdr-mf { display: none !important; }

/* ── 메일 ㅣ 팩스 ㅣ 웹하드 줄 (사용자 지시 2026-09-21) ── */
.mtabs { display: flex; align-items: center; gap: 4px; margin: 0 0 12px; padding: 0 2px; font-size: 14.5px; }
.mtabs__a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; color: #6b7684; font-weight: 600; text-decoration: none; }
.mtabs__a svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.mtabs__a:hover { background: #f2f4f6; color: #333d4b; text-decoration: none; }
.mtabs__a.is-on { color: var(--lapl-green, #253272); background: #F2F4FB; }
.mtabs__bar { color: #d5dae0; font-style: normal; }

/* ── 푸터 · 저작권은 왼쪽 그대로, 오른쪽 끝에 제휴사이트 선택 상자 (사용자 지시 2026-09-21) ── */
.ft, .ft-dd { display: none !important; }
.site-footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ft-sel { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.ft-sel__lb { font-size: 12.5px; font-weight: 700; color: #8b95a1; white-space: nowrap; }
.ft-sel__s { height: 30px; padding: 0 28px 0 10px; border: 1px solid #d5dae0; border-radius: 8px; background: #fff; font-size: 12.5px; color: #4e5968; max-width: 260px; }
.ft-sel__s:focus { outline: 0; border-color: var(--lapl-green, #253272); }
@media (max-width: 767px) { .site-footer__inner { flex-direction: column; align-items: flex-start; } .ft-sel { margin-left: 0; } .ft-sel__s { max-width: 100%; } }

/* ── 웹하드 (사용자 지시 2026-09-20) ── */
.dr-up__drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 16px; border: 2px dashed #d5dae0; border-radius: 14px; background: #fbfcfd; cursor: pointer; text-align: center; }
.dr-up__drop:hover, .dr-up__drop.is-over { border-color: var(--lapl-green, #253272); background: #F2F4FB; }
.dr-up__drop svg { width: 30px; height: 30px; fill: none; stroke: var(--lapl-green, #253272); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dr-up__drop b { font-size: 14.5px; color: #333d4b; }
.dr-up__drop span { font-size: 12.5px; color: #8b95a1; }
.dr-up__drop em { margin-top: 6px; font-style: normal; font-size: 13px; font-weight: 700; color: var(--lapl-green, #253272); }
.dr-up__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.dr-in { height: 34px; padding: 0 12px; border: 1px solid #d5dae0; border-radius: 8px; font-size: 14px; min-width: 200px; }
.dr-in--wide { flex: 1 1 260px; }
.dr-gauge { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.dr-gauge__bar { flex: 1 1 auto; height: 8px; border-radius: 999px; background: #eef0f3; overflow: hidden; }
.dr-gauge__bar i { display: block; height: 100%; background: var(--lapl-green, #253272); border-radius: 999px; }
.dr-gauge__t { flex: 0 0 auto; font-size: 12.5px; color: #8b95a1; }
.dr-file { display: inline-flex; align-items: center; gap: 8px; color: #333d4b; text-decoration: none; }
.dr-file:hover { color: var(--lapl-green, #253272); text-decoration: none; }
.dr-ext { display: inline-block; min-width: 38px; padding: 2px 6px; border-radius: 6px; background: #f1f3f5; color: #6b7684; font-style: normal; font-size: 10.5px; font-weight: 700; text-align: center; }
@media (max-width: 767px) { .dr-in { min-width: 0; width: 100%; } }

/* 메일 편집기 · 화면과 어울리게 */
.ck-editor__editable_inline { min-height: 320px; }

/* ── 푸터 원래 크기로 (사용자 지시 2026-09-21) ───────────────────────
   앞서 넣은 규칙이 푸터 안을 양끝 정렬로 바꿔 저작권이 왼쪽으로 가고 높이도 늘었다.
   원래대로 가운데 정렬로 되돌리고, 제휴사이트 상자는 흐름 밖(절대 위치)에 두어
   푸터 높이에 아무 영향도 주지 않게 한다. 어두운 바탕에 맞춰 작고 얇게. */
.site-footer { position: relative; }
.site-footer__inner { justify-content: center !important; gap: 8px 18px !important; }
.site-footer__copy { margin-top: 16px !important; }
.ft-sel {
	position: absolute; right: var(--page-pad, 20px); top: 50%; transform: translateY(-50%);
	margin: 0; gap: 6px;
}
.ft-sel__lb { font-size: 11px; font-weight: 600; color: #6F7787; }
.ft-sel__s {
	height: 24px; padding: 0 22px 0 8px; border: 1px solid #2B3340; border-radius: 6px;
	background: #1A2029; color: #C3C8D2; font-size: 11.5px; max-width: 210px;
}
.ft-sel__s:focus { border-color: var(--lapl-green, #253272); }
@media (max-width: 767px) {
	.ft-sel { position: static; transform: none; justify-content: center; width: 100%; margin-top: 8px; }
	.site-footer__inner { flex-direction: column !important; align-items: center !important; }
}

/* 푸터가 밝은 바탕이라 상자도 밝게 · 저작권 글씨(11px 회색)와 같은 톤 */
.ft-sel__lb { color: #9A9AA0; }
.ft-sel__s { height: 22px; padding: 0 20px 0 7px; border: 1px solid #E4E4E7; border-radius: 5px; background: #fff; color: #6B7080; font-size: 11px; }

/* 푸터 세로를 더 줄인다 (사용자 지시 2026-09-21) · 65px → 40px 안팎 */
.site-footer { padding: 11px var(--page-pad, 20px) 12px !important; }
.site-footer__copy { margin-top: 0 !important; line-height: 1.4; }
.site-footer__inner { line-height: 1.4 !important; gap: 4px 14px !important; }

/* ── 메일 안 작은 줄 · 받은 ㅣ 보낸 ㅣ 수신확인 ㅣ 주소록 ㅣ 쓰기 (사용자 지시 2026-09-21) ── */
.mtabs-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: -6px 0 12px; padding: 0 4px; font-size: 13.5px; }
.mtabs-sub__a { padding: 4px 8px; border-radius: 6px; color: #8b95a1; text-decoration: none; }
.mtabs-sub__a:hover { color: #333d4b; background: #f2f4f6; text-decoration: none; }
.mtabs-sub__a.is-on { color: var(--lapl-green, #253272); font-weight: 700; }
.mlb-tag--ok { background: #F2F4FB; color: var(--lapl-green, #253272); font-weight: 700; }

/* ── 주소록 (사용자 지시 2026-09-21) ── */
.addr-cnt { font-size: 13px; color: #6b7684; }
.addr-hq__t { display: flex; align-items: center; gap: 8px; }
.addr-br { margin-top: 8px; }
.addr-br__t { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; font-size: 13.5px; font-weight: 700; color: #4e5968; }
.addr-all { display: inline-flex; align-items: center; cursor: pointer; }
.addr-all input { width: 15px; height: 15px; margin: 0; accent-color: var(--lapl-green, #253272); }
.addr-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 4px 12px; }
.addr-p { display: flex; align-items: center; gap: 7px; padding: 6px 8px; border-radius: 8px; font-size: 13.5px; cursor: pointer; }
.addr-p:hover { background: #f7f8fa; }
.addr-p input { width: 15px; height: 15px; margin: 0; accent-color: var(--lapl-green, #253272); }
.addr-p b { font-weight: 700; color: #333d4b; white-space: nowrap; }
.addr-p i { font-style: normal; font-size: 11px; color: #8b95a1; white-space: nowrap; }
.addr-p span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #6b7684; font-size: 12.5px; }
.addr-p.is-me b { color: var(--lapl-orange, #5E6475); }
.addr-one { flex: 0 0 auto; color: #b0b8c1; text-decoration: none; font-size: 14px; }
.addr-one:hover { color: var(--lapl-green, #253272); text-decoration: none; }
@media (max-width: 767px) { .addr-list { grid-template-columns: 1fr; } }

/* ── Freesentation · 메일 쓰기 글꼴 (사용자 지시 2026-09-21) ──
   라플앱에서 쓰는 글꼴을 그대로 가져왔다(C:\LAPL\gm\f). 메일 편집기와 미리보기에만 쓴다.
   받는 쪽에는 글꼴이 없을 수 있어 Pretendard · 기본 글꼴로 이어 둔다. */
@font-face { font-family: 'Freesentation'; font-weight: 400; font-display: swap; src: url(../fonts/freesentation/Freesentation-4Regular.ttf) format('truetype'); }
@font-face { font-family: 'Freesentation'; font-weight: 500; font-display: swap; src: url(../fonts/freesentation/Freesentation-5Medium.ttf) format('truetype'); }
@font-face { font-family: 'Freesentation'; font-weight: 700; font-display: swap; src: url(../fonts/freesentation/Freesentation-7Bold.ttf) format('truetype'); }
@font-face { font-family: 'Freesentation'; font-weight: 800; font-display: swap; src: url(../fonts/freesentation/Freesentation-8ExtraBold.ttf) format('truetype'); }
.ck-editor__editable, .mlv__body, .mls-body { font-family: 'Freesentation', 'Pretendard Variable', Pretendard, -apple-system, sans-serif; font-size: 15px; }

/* 양식 줄 · 상자는 알맞게, 관리 단추는 같은 줄에 (사용자 지시 2026-09-21 "메일쓰기 페이지확인") */
.mls-tpl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mls-tpl .dr-in { width: 260px; min-width: 0; flex: 0 0 auto; }
.mls-tpl .lv-hint { width: 100%; margin: 2px 0 0; }
/* 내용 칸 이름표는 위에 붙인다 · 편집기가 길어서 가운데 오면 멀다 */
.mls-form tr.mls-row--body th { vertical-align: top; padding-top: 14px; }

/* 메일 쓰기·양식 표 · 편집기가 표를 카드 밖으로 밀어내지 못하게 (사용자 지시 2026-09-21 "기존 정렬방식으로") */
.mls-form { table-layout: fixed; width: 100%; }
.mls-form td { overflow: hidden; }
.mls-form .ck.ck-editor, .mls-form .ck-editor__main, .mls-form .ck-editor__editable { max-width: 100%; box-sizing: border-box; }
.mls-form .ck-editor__editable_inline { min-height: 300px; }

/* 메일ㅣ팩스ㅣ웹하드 줄은 오른쪽으로 (사용자 지시 2026-09-21 "우측으로") · 아래 작은 줄은 그대로 왼쪽 */
.mtabs { justify-content: flex-end; }

/* 주소록 · 메일주소를 감췄으니 이름 칸이 자리를 채운다 (사용자 지시 2026-09-21) */
.addr-p b { flex: 0 1 auto; }
.addr-p i { flex: 1 1 auto; }

/* 메일 쓰기 · 각 항목 아이콘 (사용자 지시 2026-09-21) */
.mls-th { display: inline-flex; align-items: center; gap: 6px; }
.mls-th svg { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: #8b95a1; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.mlv__ai--send { margin: 0; padding: 0; border: 0; }
/* 서명 미리보기 · 메일에서 보이는 그대로 */
.sig-prev { padding: 8px 0; overflow-x: auto; }
.sig-prev img { max-width: 100%; height: auto; }

/* 탭은 음영 없이 글자색만 (사용자 지시 2026-09-21) */
.mtabs__a:hover { background: transparent; color: var(--lapl-green, #253272); }
.mtabs__a.is-on { background: transparent; color: var(--lapl-green, #253272); font-weight: 700; }
.mtabs-sub__a:hover { background: transparent; color: var(--lapl-green, #253272); }

/* 메일 쓰기 · 받는 사람 옆 주소록 단추 */
.mls-to { display: flex; align-items: center; gap: 8px; }
.mls-to input { flex: 1 1 auto; min-width: 0; }

/* 주소록 고르기 창 (사용자 지시 2026-09-21) */
.mad-dim { position: fixed; inset: 0; z-index: 1200; background: rgba(15, 19, 25, .45); display: flex; align-items: center; justify-content: center; padding: 20px; }
.mad { display: flex; flex-direction: column; width: 620px; max-width: 100%; max-height: 80vh; border-radius: 16px; background: #fff; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.mad__hd { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #e5e8eb; }
.mad__hd b { font-size: 15px; white-space: nowrap; }
.mad__q { flex: 1 1 auto; min-width: 0; height: 32px; padding: 0 12px; border: 1px solid #d5dae0; border-radius: 8px; font-size: 13.5px; }
.mad__x { border: 0; background: none; font-size: 22px; line-height: 1; color: #8b95a1; cursor: pointer; }
.mad__body { flex: 1 1 auto; overflow-y: auto; padding: 8px 16px 16px; }
.mad__g { margin-top: 12px; }
.mad__gt { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 13.5px; font-weight: 700; color: #4e5968; }
.mad__gt label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.mad__gt i { font-style: normal; font-weight: 400; color: #b0b8c1; font-size: 12px; }
.mad__gt input, .mad__p input { width: 15px; height: 15px; margin: 0; accent-color: var(--lapl-green, #253272); }
.mad__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 2px 10px; }
.mad__p { display: flex; align-items: center; gap: 6px; padding: 5px 7px; border-radius: 7px; font-size: 13.5px; cursor: pointer; }
.mad__p:hover { background: #f7f8fa; }
.mad__p b { font-weight: 600; color: #333d4b; }
.mad__p i { font-style: normal; font-size: 11px; color: #8b95a1; }
.mad__ft { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid #e5e8eb; }
.mad__ft span { flex: 1 1 auto; font-size: 13px; color: #6b7684; }
@media (max-width: 767px) { .mad { max-height: 88vh; } .mad__list { grid-template-columns: 1fr 1fr; } }

/* 주소록 창이 안 닫히던 까닭 (사용자 지시 2026-09-21 "메일쓰기하면 주소록이 안닫혀")
   · [hidden] 은 브라우저 기본 규칙이라 .mad-dim 의 display:flex 에 밀린다. 여기서 이긴다. */
.mad-dim[hidden] { display: none !important; }

/* 켜기 단추 · 꺼진 상태가 그냥 흰 이름표로 보여 눌러야 하는 줄 모른다 (2026-09-21 확인).
   꺼져 있으면 흐린 테두리와 '꺼짐' 느낌이 나게 둔다. */
.route-opt input:not(:checked) + span { border-style: dashed; color: #9aa0ae; }

/* 메일 쓰기 창을 옆으로 넓게 (사용자 지시 2026-09-21)
   · 이름표 칸을 줄이고 남는 자리를 전부 내용 칸이 가져간다. 편집기도 카드 끝까지. */
.mls-form { table-layout: fixed; width: 100% !important; max-width: none !important; }
.mls-form > tbody > tr > th { width: 96px !important; }
.mls-form td input[type=text],
.mls-form td input[type=email] { width: 100% !important; max-width: none !important; }
.mls-form .ck.ck-editor { width: 100%; }
.mls-form .ck-editor__editable_inline { min-height: 420px; }
/* 메일 화면들은 카드 폭을 꽉 채운다 */
.admin-content__body .cv-card > form > .mls-form { max-width: none; }

/* 받은편지함을 넓게 (사용자 지시 2026-09-21) · 목록은 조금 줄이고 본문이 자리를 가져간다.
   큰 화면에서는 카드 폭을 꽉 채운다 — 메일은 글이 길어서 좁으면 줄이 자주 끊긴다. */
.mlb { grid-template-columns: minmax(300px, 26%) 1fr; gap: 16px; }
.mlb-list { max-height: 78vh; }
.mlb-view { padding: 22px 26px; }
.mlv__body { max-width: none; font-size: 15px; }
.mlb-view .mlv { max-width: none; }
@media (min-width: 1600px) { .mlb { grid-template-columns: 360px 1fr; } }
@media (max-width: 1199px) { .mlb { grid-template-columns: minmax(260px, 32%) 1fr; } }

/* 전자결재함 · 진행단계 칸 (사용자 지시 2026-09-21 "지점장, 본부장 승인 날짜로") */
.apb-trail { padding: 8px 6px !important; }
.apb-trail .ap-tl { margin: 0; gap: 3px 4px; }
.apb-trail .ap-tl__i { padding: 2px 7px; font-size: 11.5px; }
.apb-trail .ap-tl__i em { display: none; }        /* 좁은 칸에서는 이름을 접는다 · 아래 줄에서 보인다 */
.apb-tbl th:nth-child(6), .apb-tbl td:nth-child(6) { min-width: 210px; }
@media (min-width: 1400px) { .apb-trail .ap-tl__i em { display: inline; } }

/* MY페이지 우상단 · 공지·알림 (사용자 지시 2026-09-21) */
.mp-topmenu__i--notice .mp-topmenu__a { color: var(--lapl-green, #253272); font-weight: 700; }
.mp-topmenu__n { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px;
	margin-left: 4px; padding: 0 5px; border-radius: 999px; background: var(--lapl-orange, #5E6475);
	color: #fff; font-style: normal; font-size: 11px; font-weight: 700; vertical-align: 1px; }

/* DB신청서 · 장기보험 3개월 평균 (사용자 지시 2026-09-21) */
.db-avg { display: inline-flex; align-items: center; gap: 7px; }
.db-avg b { font-size: 17px; font-weight: 800; }
.db-avg em { font-style: normal; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.db-avg--ok b { color: var(--lapl-green, #253272); }
.db-avg--ok em { background: #F2F4FB; color: var(--lapl-green, #253272); }
.db-avg--low b { color: #d13b3b; }
.db-avg--low em { background: #fdf3f3; color: #d13b3b; }
.db-avg__m { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.db-avg__m i { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid #e5e8eb;
	border-radius: 8px; background: #fbfcfd; font-style: normal; font-size: 12.5px; color: #4e5968; }
.db-avg__m u { text-decoration: none; color: #8b95a1; font-size: 11.5px; }

/* 아직 못 쓰는 항목 · 왜 안 되는지 적어 준다 (사용자 지시 2026-09-21) */
.memo-kind__off { display: inline-flex; align-items: center; gap: 5px; color: #b0b8c1; font-size: 13.5px; cursor: default; }
.memo-kind__off em { font-style: normal; padding: 1px 7px; border-radius: 999px; background: #f2f4f6; color: #8b95a1; font-size: 11px; }

/* 참조 확인 단추 (사용자 지시 2026-09-21) */
.apb-ref { margin: 0; }
.apb-ref button { white-space: nowrap; }

/* 알림 보내기 · 본부 › 지점 고르기 (사용자 지시 2026-09-21) */
.mad__b { margin: 4px 0 8px 10px; padding-left: 10px; border-left: 2px solid #eef0f3; }
.mad__bt { display: flex; align-items: center; gap: 7px; margin: 0 0 3px; font-size: 13px; font-weight: 600; color: #6b7684; }
.mad__bt label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.mad__bt i { font-style: normal; font-weight: 400; color: #b0b8c1; font-size: 11.5px; }
.mad__bt input { width: 14px; height: 14px; margin: 0; accent-color: var(--lapl-green, #253272); }
.al-picked { flex: 1 1 auto; min-width: 0; font-size: 13.5px; color: #4e5968; }

/* 알림 발송 단추 · 공지 등록 옆 (사용자 지시 2026-09-21) */
.nb-tabs__new--alarm { margin-right: 6px; background: #fff !important; color: var(--lapl-green, #253272) !important; border: 1px solid var(--lapl-green, #253272) !important; }
.nb-tabs__new--alarm:hover { background: #F2F4FB !important; }

/* 공지 오른쪽 끝 "공지 등록 ㅣ 알림 발송" (사용자 지시 2026-09-21)
   두 번째 단추까지 margin-left:auto 를 받으면 둘이 벌어진다 · 알림 발송은 auto 를 끄고
   상자 모양(흰 바탕·초록 테두리)을 걷어 왼쪽 탭처럼 글자만 ㅣ 로 나뉘어 읽히게 한다 */
.nb-tabs__new--alarm { margin-left: 0 !important; margin-right: 0; background: none !important; border: 0 !important; color: var(--text, #17213A) !important; }
.nb-tabs__new--alarm:hover { color: var(--lapl-green, #253272) !important; background: none !important; }
.nb-tabs__new + .nb-tabs__bar { margin: 0 9px; }

/* MY PAGE 머리줄 · 이름 ㅣ 소속 ㅣ 위촉일 을 붙여 쓴다 (사용자 지시 2026-09-21: "너무 벌어져있어")
   .mp-me--ph 의 margin-left:94px 은 줄이 접혔을 때 사진 너비만큼 들여 쓰라고 넣은 값이다.
   한 줄로 늘어설 때는 그냥 104px 짜리 빈 칸이 되어 세 토막이 멀찍이 떨어져 보였다.
   한 줄일 때만 여백을 걷고 ㅣ 로 잇는다. 좁은 화면은 줄이 접히므로 ㅣ 를 넣지 않는다. */
.mp-title .mp-me--ph { margin-left: 0; }
.mp-title .mp-me--ph::before { content: "ㅣ"; margin: 0 7px 0 1px; color: #DFE2E7; font-weight: 400; }
@media (max-width: 767px) { .mp-title .mp-me--ph::before { content: none; } }

/* 오늘의 라플 · 숫자를 누르면 펼쳐지는 이름 줄 (사용자 지시 2026-09-21) */
.td-who__b { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.td-who__b:hover { color: var(--lapl-green, #253272); }
.td-who { display: block; padding: 6px 0 8px; }
.td-who__hint { display: block; font-size: 11.5px; color: var(--lapl-green, #253272); margin-bottom: 3px; }
.td-who__list { display: block; font-size: 12px; line-height: 1.7; color: #6E6E73; word-break: keep-all; }

/* 오늘의 라플 · 숫자를 누르면 뜨는 이름 창 (사용자 지시 2026-09-21: "사람클릭시 팝업으로")
   [hidden] 을 !important 로 눌러 둔다 — display:flex 가 hidden 을 이겨 창이 안 닫히는 일을 막는다 */
.tdw-dim { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center;
           background: rgba(23,33,58,.42); padding: 20px; }
.tdw-dim[hidden] { display: none !important; }
.tdw { width: 100%; max-width: 420px; max-height: 76vh; display: flex; flex-direction: column;
       background: #fff; border-radius: 14px; box-shadow: 0 18px 48px rgba(23,33,58,.22); overflow: hidden; }
.tdw__hd { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid #EEF0F3; }
.tdw__hd b { font-size: 15px; font-weight: 700; color: var(--text, #17213A); }
.tdw__hd i { font-style: normal; font-size: 12px; font-weight: 600; color: var(--lapl-green, #253272);
             background: #E9EBF5; border-radius: 999px; padding: 2px 9px; }
.tdw__x { margin-left: auto; background: none; border: 0; font-size: 22px; line-height: 1; color: #9A9AA0; cursor: pointer; padding: 0 2px; }
.tdw__x:hover { color: var(--text, #17213A); }
.tdw__hint { margin: 0; padding: 9px 16px 0; font-size: 12px; color: #9A9AA0; }
.tdw__bd { padding: 12px 16px 16px; overflow-y: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.tdw__n { font-size: 12.5px; color: #17213A; background: #F4F6F8; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
@media (max-width: 767px) { .tdw { max-width: none; max-height: 82vh; } }

/* 이름표 테두리 — 대면 초록 · 비대면(센터본부) 오렌지 (사용자 지시 2026-09-21).
   바탕을 칠하지 않고 테두리로만 가른다 — 칠하면 이름이 안 읽힌다 */
.tdw__n--f2f { background: #fff; border: 1px solid var(--lapl-green, #253272); color: #17213A; }
.tdw__n--tm  { background: #fff; border: 1px solid #5E6475; color: #17213A; }
/* CSR 금일 성공건수 — 대면 초록 · TM성공 오렌지 (사용자 지시 2026-09-21) */
.csr-f2f { color: var(--lapl-green, #253272); font-weight: 700; }
.csr-tm  { color: #5E6475; font-weight: 700; }

/* 해피박스·네이버페이 신청 글자는 초록 (사용자 지시 2026-09-21)
   누를 수 있는 자리라는 표시다 — 다른 탭은 회색이라 눈에 바로 갈린다 */
.memo-kind__a--hb { color: var(--lapl-green, #253272); font-weight: 700; }
.memo-kind__a--hb:hover { color: #161E45; }
.memo-kind__a--hb.is-on { color: #161E45; }

/* 수령증 업로드 안내 (사용자 지시 2026-09-21) — 단추 옆, 한 줄 */
.visit-shot__tip { display: inline-block; margin-left: 8px; font-style: normal;
                   font-size: 12px; color: #9A9AA0; line-height: 1.5; word-break: keep-all; }
@media (max-width: 767px) { .visit-shot__tip { display: block; margin: 5px 0 0; } }

/* 초록 상단바 · 출근 글자도 흰색 (사용자 지시 2026-09-21)
   살구색이라 초록 바탕에서 혼자 떠 보였다. 퇴근·휴무는 회색 그대로 — 끝난 상태로 읽힌다 */
.connection-status .conn-att--in { color: #fff; }

/* MY페이지 정착지원금 카드 (사용자 지시 2026-09-21) */
.mp-card--sub .sub-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.mp-card--sub .sub-top b.sub-na { font-size: 14px; font-weight: 600; color: #A7A7AD; }
.sub-memo { margin: 10px 0 0; font-size: 12px; color: #6E6E73; word-break: keep-all; }
.mp-card--sub .sub-top > div { background: #F7F8FA; border-radius: 10px; padding: 10px 8px; text-align: center; }
.mp-card--sub .sub-top em { display: block; font-style: normal; font-size: 11.5px; color: #8A8A90; margin-bottom: 3px; }
.mp-card--sub .sub-top b { font-size: 17px; font-weight: 800; color: var(--text, #17213A); }
.mp-card--sub .sub-top small { font-size: 11.5px; color: #9A9AA0; margin-left: 2px; }
.sub-rate { margin-top: 13px; }
.sub-rate__h { margin: 0 0 6px; font-size: 13px; color: #6E6E73; }
.sub-rate__h b { font-size: 18px; font-weight: 800; color: var(--lapl-green, #253272); margin-left: 4px; }
.sub-rate__h small { display: block; margin-top: 3px; font-size: 11.5px; color: #9A9AA0; }
.sub-bar { height: 8px; border-radius: 99px; background: #EDEFF2; overflow: hidden; }
.sub-bar i { display: block; height: 100%; border-radius: 99px; background: var(--lapl-green, #253272); }
.sub-warn { margin: 8px 0 0; font-size: 11.5px; font-style: normal; color: #C4611F; word-break: keep-all; }
.sub-warn small { color: #A7A7AD; margin-left: 4px; }
.sub-h { margin: 16px 0 7px; font-size: 13px; font-weight: 700; color: var(--text, #17213A); }
.sub-h small { font-weight: 500; font-size: 11.5px; color: #9A9AA0; margin-left: 5px; }
.sub-ms { list-style: none; margin: 0; padding: 0; border: 1px solid #EEF0F3; border-radius: 10px; overflow: hidden; }
.sub-ms__i { display: grid; grid-template-columns: 62px 72px 1fr 150px; align-items: center;
             gap: 6px; padding: 9px 12px; font-size: 13px; border-top: 1px solid #F1F1F3; }
.sub-ms__i:first-child { border-top: 0; }
.sub-ms__m { font-weight: 700; color: var(--text, #17213A); }
.sub-ms__p { font-size: 12px; color: #8A8A90; }
.sub-ms__a { text-align: right; font-weight: 700; color: var(--text, #17213A); }
.sub-ms__s { text-align: right; font-size: 11.5px; color: #9A9AA0; }
.sub-ms__s em { font-style: normal; font-weight: 700; }
.sub-ms__s em.ok { color: var(--lapl-green, #253272); }
.sub-ms__s em.no { color: #D8562F; }
.sub-ms__i.is-past { background: #FAFBFC; }
.sub-ms__i.is-past .sub-ms__m, .sub-ms__i.is-past .sub-ms__a { color: #9A9AA0; font-weight: 500; }
.sub-ms__i.is-now { background: #F2F4FB; }
.sub-ms__i.is-now .sub-ms__m, .sub-ms__i.is-now .sub-ms__a { color: var(--lapl-green, #253272); }
.sub-note { list-style: none; margin: 14px 0 0; padding: 0; }
.sub-note li { position: relative; padding-left: 11px; font-size: 12px; line-height: 1.75; color: #6E6E73; word-break: keep-all; }
.sub-note li::before { content: "·"; position: absolute; left: 2px; }
@media (max-width: 767px) {
  .sub-ms__i { grid-template-columns: 56px 1fr; row-gap: 3px; padding: 10px 12px; }
  .sub-ms__p { grid-column: 1; font-size: 11px; }
  .sub-ms__s { grid-column: 2; text-align: right; }
}

/* MY페이지 정착지원금 카드 — 세 줄 (사용자 지시 2026-09-21) */
.sub-rows { list-style: none; margin: 0; padding: 0; border: 1px solid #EEF0F3; border-radius: 10px; overflow: hidden; }
.sub-rows li { display: grid; grid-template-columns: 110px 1fr auto; align-items: baseline;
               gap: 8px; padding: 11px 13px; border-top: 1px solid #F1F1F3; }
.sub-rows li:first-child { border-top: 0; }
.sub-rows em { font-style: normal; font-size: 12.5px; color: #8A8A90; }
.sub-rows b { font-size: 16px; font-weight: 800; color: var(--text, #17213A); }
.sub-rows small { font-size: 11.5px; color: #9A9AA0; text-align: right; }
.sub-rows .sub-na { font-weight: 600; color: #B3B3B9; }
@media (max-width: 767px) {
  .sub-rows li { grid-template-columns: 100px 1fr; row-gap: 2px; }
  .sub-rows small { grid-column: 2; }
}

/* MY페이지 만족도조사 카드 (사용자 지시 2026-09-21) */
.mp-card--sv .sv-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.mp-card--sv .sv-row > div { background: #F7F8FA; border-radius: 10px; padding: 10px 8px; text-align: center; }
.mp-card--sv .sv-row em { display: block; font-style: normal; font-size: 11.5px; color: #8A8A90; margin-bottom: 3px; }
.mp-card--sv .sv-row b { font-size: 18px; font-weight: 800; color: var(--text, #17213A); }
.mp-card--sv .sv-row b.ok { color: var(--lapl-green, #253272); }
.mp-card--sv .sv-row b.no { color: #D8562F; }
.mp-card--sv .sv-row b.new { color: #C4611F; }
.mp-card--sv .sv-row small { font-size: 11.5px; color: #9A9AA0; margin-left: 2px; }
.mp-card--sv .sv-h { margin: 15px 0 7px; font-size: 13px; font-weight: 700; color: var(--text, #17213A); }
.mp-card--sv .sv-note { margin: 8px 0 0; font-size: 11.5px; color: #9A9AA0; word-break: keep-all; }
.mp-card--sv .sv-go { display: block; margin-top: 11px; padding: 11px; border-radius: 10px; background: #F7F8FA;
                      text-align: center; font-size: 13.5px; font-weight: 700; color: var(--text, #17213A); text-decoration: none; }

/* 녹취 첨부파일 고르기 (사용자 지시 2026-09-21) */
.cva-rec { margin-top: 12px; padding: 13px 15px; border: 1px solid #EEF0F3; border-radius: 12px; background: #fff; }
.cva-rec__t { margin: 0 0 9px; font-size: 13px; font-weight: 700; color: #17213A; }
.cva-rec__msg { margin: 0; font-size: 13px; color: #6E6E73; word-break: keep-all; }
.cva-rec__msg--no { color: #D8562F; }
.cva-rec__ul { list-style: none; margin: 0; padding: 0; }
.cva-rec__ul li + li { margin-top: 6px; }
.cva-rec__b { display: flex; width: 100%; align-items: baseline; justify-content: space-between; gap: 10px;
              padding: 11px 13px; border: 1px solid #EEF0F3; border-radius: 9px; background: #F7F8FA;
              font: inherit; font-size: 13.5px; color: #17213A; cursor: pointer; text-align: left; }
.cva-rec__b:hover { border-color: var(--lapl-orange, #5E6475); background: #FFF6F2; }
.cva-rec__b[disabled] { opacity: .5; cursor: default; }
.cva-rec__b em { font-style: normal; font-weight: 600; word-break: break-all; }
.cva-rec__b i { font-style: normal; font-size: 11.5px; color: #9A9AA0; white-space: nowrap; }

/* 상담내역 · AI 가 쓴 줄의 작성자 이름표 (사용자 지시 2026-09-22) */
/* 테두리·바탕 없이 글자만 (사용자 지시 2026-09-22) — 사람 이름 칸과 같은 무게로 읽히게 */
.log-ai { color: var(--lapl-green, #253272); font-size: 12.5px; font-weight: 700; white-space: nowrap; }

/* 배정 겹침창 — 넓게 (대표님 지시 2026-09-22: "csr배정 PM배정 화면 크게 넓혀주고") */
.assign-pop{min-width:min(560px,92vw)}
.assign-pop__ttl{margin:0 0 4px;font-size:18px;font-weight:700;color:#1B1C1E;border:0}
.assign-pop__cnt{margin:0;font-size:13px;color:#8B8D94}
.assign-pop__sel{width:100%;max-width:none;height:44px;padding:0 12px;font-size:15px;
	border:1px solid #E3E4E8;border-radius:8px;background:#fff}
.assign-pop__sel:focus{border-color:#1F6FEB;outline:0}
.assign-pop__none{margin:8px 0 0;font-size:13px;color:#D64545}
.assign-pop .table.type--1 th{width:120px;white-space:nowrap}
.assign-pop .btn-bx{display:flex;justify-content:flex-end}

/* 겹침창 세로 가운데 (대표님 지시 2026-09-22: "팝업창 너무 높지않게 가운데로") */
#Popup.is-open{display:flex !important;align-items:center;justify-content:center}
/* 가운데보다 조금 위로 (대표님 지시 2026-09-22) — 아래 여백을 더 주면 그만큼 올라간다 */
#Popup.is-open{padding-bottom:12vh !important}
#Popup.is-open .cnt_bx{margin:auto !important}

/* 주간 업무보고 쓰는 화면 (사용자 지시 2026-09-22) */
.wk-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.wk-bar__wk{font-size:16px;font-weight:700;color:#1B1C1E;padding:0 6px}
.wk-bar__wk small{font-size:12px;font-weight:500;color:#8B8D94;margin-left:6px}
.wk-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px;border-bottom:1px solid #E3E4E8;padding-bottom:10px}
.wk-tabs__t{display:inline-block;padding:8px 16px;border-radius:999px;font-size:14px;
	font-weight:600;color:#5B5D66;background:#F3F4F6;text-decoration:none}
.wk-tabs__t:hover{background:#E8EAEE}
.wk-tabs__t.on{background:#16233A;color:#fff}
.wk-msg{margin:0 0 12px;padding:10px 14px;border-radius:10px;font-size:14px}
.wk-msg--ok{background:#E9EBF6;color:#1E285E}
.wk-msg--no{background:#FCEBEB;color:#C0392B}
.wk-msg--warn{background:#FFF6E5;color:#9A6700}
.wk-kpi{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:0 0 6px}
.wk-kpi__b{background:#F8F9FB;border:1px solid #E3E4E8;border-radius:12px;padding:12px 10px;text-align:center}
.wk-kpi__b span{display:block;font-size:12px;color:#8B8D94;margin-bottom:4px}
.wk-kpi__b b{font-size:21px;font-weight:800;letter-spacing:-.5px}
.wk-kpi__b b small{font-size:11px;font-weight:600;color:#8B8D94;margin-left:2px}
.wk-note{margin:0 0 16px;font-size:12px;color:#8B8D94}
.wk-tbl__zero td{color:#1B1C1E}   /* 0인 줄도 흐리지 않는다 (대표님 지시 2026-09-22) */
.wk-form{margin:0 0 24px}
.wk-form__l{display:block;margin:14px 0 6px;font-size:14px;font-weight:700;color:#1B1C1E}
.wk-form__l small{font-weight:500;color:#8B8D94}
.wk-form textarea{width:100%;padding:12px 14px;font-size:14px;line-height:1.6;
	border:1px solid #E3E4E8;border-radius:10px;resize:vertical;font-family:inherit}
.wk-form textarea:focus{border-color:#1F6FEB;outline:0}
.wk-form textarea[readonly]{background:#F8F9FB;color:#5B5D66}
.wk-form__btn{display:flex;justify-content:flex-end;margin-top:10px}
@media (max-width:900px){.wk-kpi{grid-template-columns:repeat(3,1fr)}}

/* 주간보고 — 낸 곳·안 낸 곳 (대표님 공지 2026-09-22) */
.wk-tabs__dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px;
	background:#D3D5DA;vertical-align:middle}
.wk-tabs__dot.on{background:#2B3883}
.wk-tabs__t.on .wk-tabs__dot{background:rgba(255,255,255,.35)}
.wk-tabs__t.on .wk-tabs__dot.on{background:#6472C4}
.wk-done{display:inline-block;margin-left:8px;padding:2px 10px;border-radius:999px;
	background:#E9EBF6;color:#1E285E;font-size:12px;font-weight:700}
.wk-yet{display:inline-block;margin-left:8px;padding:2px 10px;border-radius:999px;
	background:#F3F4F6;color:#8B8D94;font-size:12px;font-weight:700}

/* MY페이지 주간회의 칸 — 표 하나 (대표님 지시 2026-09-22: "현황을 테이블 한개로") */
.mp-wk__tbl{width:100%;border-collapse:collapse;margin:0 0 14px;font-size:13px}
.mp-wk__tbl th,.mp-wk__tbl td{padding:8px 10px;border-bottom:1px solid #F0F0F3;text-align:center}
.mp-wk__tbl thead th{background:#F8F9FB;color:#8B8D94;font-weight:600;font-size:12px}
.mp-wk__tbl td.nm{text-align:left;font-weight:700}
.mp-wk__tbl td.nm a{color:#1B1C1E;text-decoration:none}
.mp-wk__tbl td.nm a:hover{text-decoration:underline}
.mp-wk__tbl td.dt{color:#8B8D94}
.mp-wk__ok{color:#1E285E;font-weight:700}
.mp-wk__no{color:#B9BBC2;font-weight:600}
.mp-wk__btn{display:flex;flex-wrap:wrap;gap:8px}
.mp-wk__b{display:inline-block;padding:9px 16px;border-radius:10px;font-size:13px;font-weight:700;
	text-decoration:none;background:#F3F4F6;color:#1B1C1E}
.mp-wk__b:hover{background:#E8EAEE}
.mp-wk__b--on{background:#16233A;color:#fff}
.mp-wk__b--on:hover{background:#25344F;color:#fff}
/* HELP DESK 아래 줄 — 옆의 글자 링크와 같은 모양으로 (대표님 지시 2026-09-22:
   "그냥 옆에 처럼 텍스트로 · 주간업무보고 ㅣ STAFF회의").
   둥근 상자로 해 봤더니 그 줄에서 저 둘만 떠 보였다. 색으로만 가른다. */
.mp-topmenu__i--weekly .mp-topmenu__a{color:#5E6475}
.mp-topmenu__i--staff .mp-topmenu__a{color:#2B3883}

/* 주간보고 윗줄 여덟 칸 (대표님 지시 2026-09-22) */
.wk-kpi--8{grid-template-columns:repeat(8,1fr)}
.wk-kpi--8 .wk-kpi__b{padding:11px 8px}
.wk-kpi--8 .wk-kpi__b b{font-size:18px}
.wk-kpi__b--g{background:#EEF3F8;border-color:#CBD7E6}
.wk-kpi__b b.up{color:#1E285E}
.wk-kpi__b b.dn{color:#C0392B}
@media (max-width:1100px){.wk-kpi--8{grid-template-columns:repeat(4,1fr)}}

/* 지점 줄을 글자로 (대표님 지시 2026-09-22: "이것도 텍스트로 · 밸류업 ㅣ 블루도어") */
.wk-tabs{align-items:center}
.wk-tabs__t{background:none !important;padding:4px 6px !important;border-radius:0 !important;
	font-size:14px;font-weight:600;color:#B9BBC2}
.wk-tabs__t:hover{background:none !important;color:#1B1C1E}
.wk-tabs__t.done{color:#1E285E}
.wk-tabs__t.on{color:#1B1C1E;font-weight:800;text-decoration:underline;text-underline-offset:5px}
.wk-tabs__t.on.done{color:#1E285E}
.wk-tabs__bar{color:#E3E4E8;font-size:13px}
.wk-tabs__dot{display:none}

/* 전체보기 표 안의 달성률 (2026-09-22) */
.wk-tbl td b.up{color:#1E285E}
.wk-tbl td b.dn{color:#C0392B}

/* 주간보고 표 · 금액은 오른쪽 정렬 (대표님 지시 2026-09-22) */
.wk-tbl td.r,.wk-tbl th.r{text-align:right !important;padding-right:14px !important}

/* 결재함 · 확인완료함과 삭제 (대표님 지시 2026-09-22) */
.apb-ref{display:inline-flex;gap:4px}
.apb-del{color:#C0392B !important}
.apb-st--acked.is-on{background:#E9EBF6;color:#1E285E}

/* 대시보드 숫자 카드 — 제목과 큰 숫자 가운데 (대표님 지시 2026-09-22). 아래 두 줄(항목·값)은 그대로 */
.dash-grid .card__title{justify-content:center;text-align:center}
.dash-grid .metric{justify-content:center;text-align:center}
.dash-grid .card__title .sec-ico{margin-right:6px}

/* 공지 본문 아래 대상 한 줄 (대표님 지시 2026-09-22) */
.nb-view__to{margin:16px 0 0;padding-top:10px;border-top:1px dashed #E3E4E8;font-size:12.5px;color:#8B8D94}

/* CSR 주간보고 (대표님 지시 2026-09-22) */
.wk-tabs__t--csr{color:#5E6475}
.wk-tabs__t--csr.on{color:#DB6F12}
.wk-att-wrap{overflow-x:auto}
.wk-att{font-size:12px}
.wk-att th,.wk-att td{padding:6px 4px !important;white-space:nowrap}
.wk-att th small{display:block;font-size:10px;font-weight:500;color:#8B8D94}
.wk-att th.today{background:#FFF3E8 !important;color:#DB6F12}
.wk-att td.lv{color:#DB6F12;font-weight:700}
.wk-att td.no{color:#C9CDD4}
.wk-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:900px){.wk-two{grid-template-columns:1fr}}

/* MY PAGE 알림 카드 (대표님 지시 2026-09-22) — 공지와 따로. 보낸 사람 표시 */
.mp-nt__tag--alert{background:#FFF3E8;color:#DB6F12}
.mp-nt__by{font-style:normal;font-size:12px;color:#8B8D94;margin-left:8px;white-space:nowrap}
.mp-card--alert .mp-card__t small{font-weight:500;margin-left:8px}

/* 확인서 올리기 단추 — 아이콘이 규칙 없이 화면을 덮던 것 (2026-09-22). 다른 화면에서 붙여 와도 크기가 잡히게 */
.mls-fbtn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid #E3E4E8;border-radius:8px;background:#fff;font-size:13px;font-weight:600;cursor:pointer}
.mls-fbtn svg{width:16px;height:16px;fill:none;stroke:#5E6475;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin:0}
.mls-file{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.mls-fname{margin-left:8px;font-size:13px;color:#8B8D94}

/* MY PAGE 전자결재 카드의 진행 칸 (대표님 지시 2026-09-22) */
.ac-table .ac-trail{font-size:12px;line-height:1.5;white-space:normal;min-width:180px}
.ac-table .ac-trail .apb-st,.ac-table .ac-trail b{font-weight:700}

/* CSR 업무현황 — 큰 숫자 위의 어제 (대표님 지시 2026-09-22) */
.csr-yday{margin:0 0 2px;text-align:center;font-size:12.5px;color:#8B8D94}
.csr-yday b{font-weight:700;color:#5B5D66}

/* 공지 본문의 단추 (대표님 지시 2026-09-22: "샘플 버튼 만들고 링크로") */
.nt-tpl__btnwrap{margin:12px 0 4px}
.nt-tpl__btn{display:inline-block;padding:10px 18px;border-radius:10px;background:#16233A;color:#fff !important;
	font-size:13px;font-weight:700;text-decoration:none}
.nt-tpl__btn:hover{background:#25344F}

/* 센터본부 표는 하루 기준 미달을 색으로 짚지 않는다 (대표님 지시 2026-09-22: "센터에 주황색 검은색으로") */
.pa-grid--ctr .pa-low{color:inherit;font-weight:400}

/* 오늘 출근한 PM — 퇴근한 분은 회색 (대표님 지시 2026-09-22) */
/* 퇴근한 사람은 회색 테두리 (대표님 지시 2026-09-23 "퇴근하면 오늘 출근한 PM 회색으로 · 테두리를").
   전에는 테두리 색만 바꾸고 테두리 자체가 없어서(초록·오렌지 칸만 테두리가 있다) 회색 바탕만 보였다. */
.tdw__n--off{border:1px solid #B5BAC2 !important;color:#8A909A !important;background:#F4F5F7 !important}

/* 신규 위촉 환영 — 이름 앞 이모지 (대표님 지시 2026-09-22) */
.wc-emo{margin-right:5px;font-size:13px;line-height:1}


/* CSR 근무현황 · 승인된 휴가는 오렌지 (대표님 지시 2026-09-22) */
.wk-att td.lv--v{background:#FFF1E3 !important;color:#5E6475 !important;font-weight:700}

/* 하루 한 번 인사 — 공지 팝업과 같은 크기·같은 자리 (대표님 지시 2026-09-22: "알림처럼 크게") */
.dg-dim{position:fixed;inset:0;z-index:950;display:flex;align-items:center;justify-content:center;
	padding:20px;background:rgba(17,18,22,.45);opacity:0;transition:opacity .26s ease}
.dg-dim--in{opacity:1}
.dg-dim--out{opacity:0}
.dg-box{width:100%;max-width:460px;background:#fff;border-radius:14px;overflow:hidden;
	box-shadow:0 18px 50px rgba(0,0,0,.25);transform:translateY(8px);transition:transform .26s ease}
.dg-dim--in .dg-box{transform:translateY(0)}
.dg-box__head{position:relative;overflow:hidden;padding:18px 20px;background:var(--lapl-green);color:#fff}
.dg-box__head::after{content:"";position:absolute;inset:0;background:var(--lapl-green-2);
	clip-path:polygon(66% 0,100% 0,100% 100%,24% 100%)}
.dg-box__head > *{position:relative;z-index:1}
.dg-box__tag{display:inline-block;margin-bottom:6px;padding:2px 8px;border-radius:999px;
	background:rgba(255,255,255,.22);font-size:11px;font-weight:700;letter-spacing:.2px}
.dg-box__head b{display:block;font-size:19px;font-weight:800;letter-spacing:-.3px}
.dg-box__body{padding:22px 20px 6px}
.dg-box__wish{margin:0;font-size:16px;color:#16233A}
.dg-box__wish b{color:var(--lapl-green);font-weight:800}
.dg-box__late{margin:16px 0 0;padding:14px 16px;border-radius:10px;background:#FFF4E8;
	color:#A0530A;font-size:15px;font-weight:700}
.dg-box__late b{color:#5E6475}
.dg-box__late span{display:block;margin-top:4px;font-size:13px;font-weight:500;color:#8A6034}
.dg-box__meta{margin:18px 0 0;font-size:12px;color:#9AA0AA}
.dg-box__act{padding:14px 20px 18px;text-align:right}
.dg-btn{min-width:96px;padding:11px 20px;border:0;border-radius:10px;background:var(--lapl-green);
	color:#fff;font-size:14px;font-weight:700;cursor:pointer}
.dg-btn:hover{filter:brightness(1.06)}
@media (max-width:640px){.dg-box__head b{font-size:17px}.dg-box__wish{font-size:15px}}

/* 지원금 확인서 펼쳐 보기 (대표님 지시 2026-09-22: "수령확인증, 회원 화면에서 캡춰") */
.sub-prev__b{margin-left:8px;padding:2px 9px;border:1px solid var(--border);border-radius:6px;
	background:#fff;color:var(--text-2);font-size:12px;cursor:pointer}
.sub-prev__b:hover{border-color:var(--lapl-green);color:var(--lapl-green)}
.sub-prev{margin-top:10px;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:#fff}
.sub-prev iframe{display:block;width:100%;height:760px;border:0}
@media (max-width:640px){.sub-prev iframe{height:520px}}

/* CSR 대시보드 · 어제와 견준 만큼 (대표님 지시 2026-09-22) */
.csr-gap{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;
	background:#EFF1F4;color:#8A93A1;font-size:11px;font-weight:700;vertical-align:1px}
.csr-gap--up{background:rgba(30, 40, 94,.12);color:#1E285E}
.csr-gap--dn{background:#EFF1F4;color:#98A0AC}

/* 검색은 초록, AI 라플 찾기는 오렌지 (대표님 지시 2026-09-22: "검색은 초록, ai라플은 찾기를 오렌지 컬러로 구분") */
.btn-flat--find{background:var(--lapl-green,#1E285E);border-color:var(--lapl-green,#1E285E);color:#fff}
.btn-flat--find:hover{filter:brightness(1.08);color:#fff}
.btn-flat--ai{background:#5E6475;border-color:#5E6475;color:#fff}
.btn-flat--ai:hover{background:#E3730F;border-color:#E3730F;color:#fff}

/* MY 페이지 · 월별 현황 (대표님 지시 2026-09-22) */
.mp-mm th,.mp-mm td{font-size:13px;white-space:nowrap}
.mp-mm th small{display:block;font-size:10px;font-weight:600;color:#8A93A1;margin-top:1px}
.mp-mm .r{text-align:right}
.mp-mm--z td{color:#B9BFC8}

/* 계약 그림은 오렌지 (대표님 지시 2026-09-22: "Npay옆에 계약 아이콘은 오렌지컬러로").
   설계서전송은 초록으로 두고 계약만 오렌지 — 둘이 나란히 있어 같은 색이면 구분이 안 된다. */
.vc-doc{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%235E6475' d='M13.6 2H6.6A2.6 2.6 0 0 0 4 4.6v14.8A2.6 2.6 0 0 0 6.6 22h10.8a2.6 2.6 0 0 0 2.6-2.6V8.4L13.6 2z'/%3E%3Cpath fill='%23ffffff' opacity='.5' d='M13.6 2L20 8.4h-4.9a1.5 1.5 0 0 1-1.5-1.5V2z'/%3E%3Cpath stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' d='M8.2 12.6h7.6M8.2 16.1h5.2'/%3E%3C/svg%3E") no-repeat center / contain}

/* 모바일 손질 (대표님 지시 2026-09-22) */
@media (max-width:640px){
	/* 주간회의·월별 현황은 표가 넓어 좁은 화면에서 뭉갠다 — 아예 뺀다 */
	.mp-card--wk,
	.mp-card--wide:has(.mp-mm),
	/* 매출현황은 칸이 여섯이라 좁은 화면에서 읽히지 않는다 — PC 에서 본다 (대표님 지시 2026-09-22 "모바일은 간단하게") */
	#sales{display:none !important}
	/* 알림은 제목만 — 보낸 사람과 날짜는 뺀다 */
	.mp-nt__by,
	.mp-nt__i small{display:none !important}
	/* 맨 위 이름 상자와 상단 로고 사이 여백 없애기 */
	.admin-content{padding-top:0 !important}
	.admin-content__head{padding-top:0 !important;margin-top:0 !important}
	.mp-title{padding-top:0 !important;margin-top:0 !important}
}

/* 이름 아래 명언 · 모바일에서도 (대표님 지시 2026-09-22) */
.mp-quote{margin:4px 0 0;font-size:12px;line-height:1.5;color:#7A828E;letter-spacing:-.2px}
/* 이름 옆 메뉴에서 주간업무보고·STAFF회의는 모바일에서 뺀다 (대표님 지시 2026-09-22) */
@media (max-width:640px){.mp-topmenu__i--weekly,.mp-topmenu__i--staff{display:none !important}}

/* 목표 승인 차례 — 초록 (대표님 지시 2026-09-22: "지점장 승인단계 넣어줘") */
.tg-alert--todo{background:rgba(30, 40, 94,.08);border-color:rgba(30, 40, 94,.30);color:#1E285E}
.tg-alert--todo svg{stroke:#1E285E}
.tg-alert--todo .tg-alert__go{background:#1E285E;border-color:#1E285E;color:#fff}

/* 룰렛 전송 — 에이스 지점만 (대표님 지시 2026-09-22) */
.memo-kind__a--rl{color:#7A3FF2}
.memo-kind__a--rl .mk-ico{stroke:#7A3FF2}
.memo-kind__a--rl:hover{color:#5F2BD0}
.memo-kind__a--rl.is-off{opacity:.45;cursor:not-allowed}
.memo-kind__a--rl .mk-sent{margin-left:5px;padding:1px 6px;border-radius:999px;background:rgba(122,63,242,.12);
	font-style:normal;font-size:11px;font-weight:700;color:#7A3FF2}

/* 기울임은 쓰지 않는다 (대표님 지시 2026-09-22: "이탤릭은 앞으로 사용하지 말아줘").
   em·i 는 뜻을 나타내는 표시로만 쓰고 모양은 세우지 않는다. 칸마다 font-style:normal 을
   따로 적어 오던 것을 여기 한 줄로 모은다 — 새로 만드는 곳에서 빠뜨릴 일이 없어진다. */
em, i, cite, address, dfn, var { font-style: normal; }

/* 해피박스 신청 잠김 안내 (대표님 신고 2026-09-23) — 단추 대신 까닭을 적는다 */
.hb-lock { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; padding: 4px 10px; border-radius: 8px; background: #FFF5EC; color: #C4611F; font-size: 12.5px; font-weight: 600; }
.hb-lock a { color: #C4611F; text-decoration: underline; font-weight: 700; }

/* PM배정현황 · 달별 흐름 (대표님 지시 2026-09-23 "월별 db/박스/방문/계약 그래프" · "대면조직만") */
.pa-trend { margin: 16px 0 6px; padding: 16px 18px 12px; border: 1px solid #e6e8ec; border-radius: 12px; background: #fff; }
.pa-trend__t { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: #1d1d1f; }
.pa-trend__chart { position: relative; height: 260px; }
.pa-trend__tbl { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 12.5px; }
.pa-trend__tbl th, .pa-trend__tbl td { padding: 5px 8px; border-top: 1px solid #f0f1f4; text-align: right; white-space: nowrap; }
.pa-trend__tbl thead th { border-top: 0; color: #8b95a1; font-weight: 600; }
.pa-trend__tbl .pa-l { text-align: left; }
.pa-trend__tbl .is-on { background: #F2F3FA; font-weight: 700; }
.pa-trend__k::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; vertical-align: middle; }
.pa-trend__k--db::before    { background: #253272; border-radius: 2px; }
.pa-trend__k--box::before   { background: #5E6475; }
.pa-trend__k--visit::before { background: #2F5DA8; }
.pa-trend__k--con::before   { background: #C0392B; }
@media (max-width: 767px) { .pa-trend { padding: 12px; } .pa-trend__chart { height: 220px; } }

/* PM배정현황 · 마우스를 올린 줄을 좌우 끝까지 음영 (대표님 지시 2026-09-23 "해당 줄 볼 수 있게").
   배경을 덮지 않고 안쪽 그림자로 얹는다 — 오렌지(기준 미달)·박스 칸의 색이 그대로 비친다.
   이름 칸은 가로로 밀어도 붙어 있는 칸(sticky)이라 흰 바탕을 따로 바꿔 줘야 음영이 끊기지 않는다. */
table.pa-grid tbody tr:hover > td,
table.pa-grid tbody tr:hover > th { box-shadow: inset 0 0 0 9999px rgba(37, 50, 114, .08); }
table.pa-grid tbody tr:hover > .pa-name { background: #EDEEF6; }
table.pa-grid tbody tr:hover > td:first-child { box-shadow: inset 3px 0 0 #253272, inset 0 0 0 9999px rgba(37, 50, 114, .08); }
.pa-trend__tbl tbody tr:hover > th, .pa-trend__tbl tbody tr:hover > td { box-shadow: inset 0 0 0 9999px rgba(37, 50, 114, .07); }
/* 닫힌 달까지의 합계 칸 (대표님 지시 2026-09-23 "8월까지 합계도 넣어줘 마지막에") */
.pa-trend__tbl .pa-trend__tot { border-left: 2px solid #e6e8ec; background: #F7F8FA; font-weight: 700; }
.pa-trend__tbl thead .pa-trend__tot { color: #1d1d1f; }

/* 처리한 결재 · 결과 칸을 한 줄로 (대표님 지시 2026-09-23 "각 한줄로") — 딱지 › 1차 › 대표 가 옆으로 이어진다 */
.apr-one { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.apr-one .ap-tl { margin-top: 0; flex-wrap: nowrap; }
.apr-one .ap-tl__i { white-space: nowrap; }

/* 상담내역 상태 칸 · AI 녹취요약 줄 (대표님 지시 2026-09-23) — 작성자 칸의 'AI라플💬상담요약' 과 같은 초록 */
.log-tag--ai { color: var(--lapl-green, #253272); font-weight: 700; }
/* 상담내역 · PM배정 줄의 이름 (대표님 지시 2026-09-23) — 대면 초록 · 비대면 오렌지 */
.pm-nm { font-weight: 400; }   /* 이름은 굵게 하지 않는다 (대표님 지시 2026-09-23 "윤현용지점장 볼드도 제외") · 색만 */
.pm-nm--f2f { color: var(--lapl-green, #253272); }
.pm-nm--tm  { color: #5E6475; }
/* 상담내역 · PM배정 줄 뒤의 알림톡 표시 (대표님 지시 2026-09-23) */
.pm-tail { color: #6E6E73; }

/* 자리 계정(CSR센터장) · 그때 앉은 사람의 글자 (대표님 지시 2026-09-23) — 송정아 C · 이수정 S */
.sh-mark { color: #5E6475; font-weight: 800; }

/* 상담내역 · ①CSR 배정 ②PM배정 굵게 (대표님 지시 2026-09-23) */
.log-step { font-weight: 700; color: #17213A; }

/* 회원 목록 · 경로·CSR·PM·연락처는 값도 가운데 (대표님 지시 2026-09-23 "경로, CSR, PM, 연락처 타이틀 가운데 정렬").
   제목은 가운데인데 값이 왼쪽에서 시작해 제목과 값이 어긋나 보였다. 칸 차례: □ No 이름 TAG 경로(5) CSR(6) CP TA VC PM(10) 연락처(11) */
/* 이름·TA 도 가운데 (대표님 지시 2026-09-28 "상단 이름, ta도 가운데 정렬") */
.cust-list td.clc-name, .cust-list td.clc-ta,
.cust-list td.clc-route, .cust-list td.clc-csr, .cust-list td.clc-pm, .cust-list td.clc-phone, .cust-list td.clc-last { text-align: center !important; }
@media (max-width: 767px) {
	.cust-list td.clc-name, .cust-list td.clc-ta,
	.cust-list td.clc-route, .cust-list td.clc-csr, .cust-list td.clc-pm, .cust-list td.clc-phone, .cust-list td.clc-last { text-align: left !important; }
}

/* 상담내역 작성자 칸은 보통 굵기 (대표님 지시 2026-09-23 "작성자는 볼드제외") — 칸이 th 라 굵게 나왔다.
   'AI라플💬상담요약' 초록 딱지와 CSR센터장의 오렌지 글자(C·S)만 굵게 남는다. */
.cust-log--left > tbody > tr > th, .cust-log--left > tr > th { font-weight: 400 !important; }
.cust-log--left tr:first-child th { font-weight: 600 !important; }
.cust-log--left th .log-ai, .cust-log--left th .sh-mark { font-weight: 700; }

/* 회원관리 목록 · 마우스를 올린 줄을 좌우 끝까지 음영 (대표님 지시 2026-09-23) — PM배정현황과 같은 모양.
   배경을 덮지 않고 안쪽 그림자로 얹어 CP·TA 색 글자와 NEW 표시가 그대로 보인다. 제목 줄(th)은 빼고 값 줄(td)만. */
.cust-list tr:hover > td { box-shadow: inset 0 0 0 9999px rgba(37, 50, 114, .07); }
.cust-list tr:hover > td:first-child { box-shadow: inset 3px 0 0 #253272, inset 0 0 0 9999px rgba(37, 50, 114, .07); }
@media (hover: none) { .cust-list tr:hover > td, .cust-list tr:hover > td:first-child { box-shadow: none; } }

/* PM 배정창 · 이름으로 찾기 칸 (대표님 지시 2026-09-23) — 명단 바로 위 */
.assign-pop__find { display: block; width: 100%; box-sizing: border-box; height: 38px; margin-bottom: 8px; padding: 0 12px;
                    border: 1px solid #cfd4db; border-radius: 8px; font-size: 14px; font-family: inherit; }
.assign-pop__find:focus { outline: none; border-color: var(--lapl-green, #253272); box-shadow: 0 0 0 3px rgba(37, 50, 114, .12); }

/* ── 모든 표 · 마우스를 올린 줄에 음영 (대표님 지시 2026-09-23 "모든 테이블은 마우스 오버시 음영") ──
   PM배정현황·회원 목록과 같은 모양 — 바탕을 덮지 않고 안쪽 그림자로 얹어 칸마다의 색(오렌지·초록 글자, 칸 바탕)이 그대로 비친다.
   값 줄(td 만 있는 줄)만 칠한다. 제목 줄과, 왼쪽 이름표(th)+입력칸(td)으로 된 입력 표는 칠하지 않는다 — 입력 중에 칸이 번쩍이면 거슬린다.
   달력(일정·날짜 고르기)은 뺀다 — 한 줄이 한 주라 줄 음영이 뜻이 없다. */
@media (hover: hover) {
	table tr:not(:has(> th)):hover > td { box-shadow: inset 0 0 0 9999px rgba(37, 50, 114, .06); }
	/* 상담내역은 작성자 칸이 th 라 위 규칙에서 빠진다 — 따로 넣는다 */
	.cust-log tr:has(> td):hover > th, .cust-log tr:has(> td):hover > td { box-shadow: inset 0 0 0 9999px rgba(37, 50, 114, .06); }
	.fc table tr:hover > td, .ui-datepicker table tr:hover > td, .flatpickr-calendar table tr:hover > td,
	table.no-hover tr:hover > td, table.no-hover tr:hover > th { box-shadow: none; }
}

/* 회원 화면 라플 · [찾기] 단추 (대표님 지시 2026-09-23) — 입력칸 바로 옆, 회원 목록과 같은 모양 */
.cva-row #cvaGo { flex: 0 0 auto; margin-left: 8px; white-space: nowrap; }
.cva-row .cva-box { flex: 1 1 auto; min-width: 0; }

/* ── 회원 목록 · 노출 칸 고르기 (대표님 지시 2026-09-28 "게시판 우상단에 노출/비노출 선택하도록") ──
   줄 수 고르기 왼쪽에 단추 하나. 누르면 칸 이름 네모가 펼쳐진다. 휴대폰은 세 칸만 보이니 감춘다. */
.cl-cols { position: relative; margin-right: 8px; }
.cl-cols__btn { height: 40px; padding: 0 14px; border: 1px solid var(--border, #E4E4E7); border-radius: 8px;
	background: #fff; color: var(--text, #1F2328); font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.cl-cols__btn::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; vertical-align: 3px;
	border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.cl-cols__btn:hover, .cl-cols__btn[aria-expanded="true"] { border-color: var(--lapl-green, #253272); color: var(--lapl-green, #253272); }
.cl-cols__pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; width: 240px; padding: 14px 16px 12px;
	background: #fff; border: 1px solid var(--border, #E4E4E7); border-radius: 12px; box-shadow: 0 10px 28px rgba(15, 23, 42, .12); }
.cl-cols__pop[hidden] { display: none; }
.cl-cols__t { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--text-2, #3F4450); }
/* 한 줄에 한 칸 · 손잡이(끌기) · 네모 · ▲▼ (2026-09-28 "순서도 정할수 있게") */
.cl-cols__list { list-style: none; margin: 0; padding: 0; max-height: min(72vh, 520px); overflow-y: auto; }
.cl-cols__list li { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 8px; cursor: grab; user-select: none; }
.cl-cols__list li:hover { background: rgba(37, 50, 114, .06); }
.cl-cols__list li.is-drag { opacity: .45; background: rgba(37, 50, 114, .1); }
.cl-cols__grip { flex: 0 0 auto; width: 8px; height: 14px; opacity: .45;
	background: radial-gradient(circle, #3F4450 1.2px, transparent 1.4px) 0 0 / 4px 4.6px; }
.cl-cols__list label { flex: 1 1 auto; display: flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; cursor: pointer; white-space: nowrap; }
.cl-cols__list input:disabled + * , .cl-cols__list input:disabled { cursor: default; opacity: .6; }
.cl-cols__mv { flex: 0 0 auto; display: flex; gap: 2px; }
.cl-cols__mv button { width: 24px; height: 22px; padding: 0; border: 1px solid var(--border, #E4E4E7); border-radius: 5px;
	background: #fff; color: var(--muted, #9AA0AE); font-size: 9px; line-height: 1; cursor: pointer; }
.cl-cols__mv button:hover { border-color: var(--lapl-green, #253272); color: var(--lapl-green, #253272); }
.cl-cols__list li:first-child .cl-cols__mv button[data-mv="-1"],
.cl-cols__list li:last-child  .cl-cols__mv button[data-mv="1"] { visibility: hidden; }
.cl-cols__list input { width: 16px; height: 16px; margin: 0; accent-color: var(--lapl-green, #253272); }
.cl-cols__reset { margin-top: 12px; padding: 0; border: 0; background: none; font-size: 12.5px; color: var(--muted, #9AA0AE); text-decoration: underline; cursor: pointer; }
.cl-cols__reset:hover { color: var(--lapl-green, #253272); }
@media (max-width: 767px) { .cl-cols { display: none; } }

/* 회원 목록 이름 · 석 자까지, 긴 이름은 … (대표님 지시 2026-09-28 "이름칸이 넓으니 이름 3자 정도 들어가고 긴 이름은 ...") */
.cust-list .cl-nm { display: inline-block; max-width: 3.15em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.cust-list td.clc-name { overflow: hidden; text-overflow: clip; }

/* 회원 목록 오른쪽 위 · 회원등록 단추 (대표님 지시 2026-09-28) · 노출칸 선택·줄 수와 같은 높이, 초록 한 가지 */
.cl-new { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; margin-right: 8px; border-radius: 8px;
	background: var(--lapl-green, #253272); color: #fff !important; font-size: 14px; font-weight: 700; white-space: nowrap; text-decoration: none !important; }
.cl-new:hover { background: #19214E; }
@media (max-width: 767px) { .cl-new { height: 36px; padding: 0 12px; font-size: 13px; } }

/* 인스타그램 새 글 팝업 (대표님 지시 2026-09-29) · 공지 팝업 틀에 머리만 오렌지 투톤(라플 사각로고 색) */
.ig-pop .np-box__head { background: #D95019; }
.ig-pop .np-box__head::after { background: #5E6475; }
.ig-pop__img { display: block; width: 100%; max-height: 300px; object-fit: cover; margin: 0 0 12px; }
.ig-pop__cap { font-weight: 700; }

/* 알림 쪽지 (대표님 지시 2026-09-29) — 이름을 누르면 창 · 받는 쪽은 팝업 */
.np-dim[hidden] { display: none !important; }
/* 보낼 수 있는 사람 화면에만 눌리는 모양 (html.can-note 는 tail.php 가 붙인다) */
.can-note [data-note-mb] { cursor: pointer; }
.can-note [data-note-mb]:hover { text-decoration: underline; text-underline-offset: 3px; }
.note-msg { width: 100%; min-height: 96px; padding: 10px 12px; border: 1px solid var(--border, #E4E4E7); border-radius: 10px;
	font-size: 14.5px; line-height: 1.6; resize: vertical; }
.note-msg:focus { outline: none; border-color: var(--lapl-green, #253272); }
.note-res { margin: 8px 0 0; min-height: 1em; font-size: 13px; color: var(--lapl-green, #253272); }

/* ── 로그인 화면 (대표님 지시 2026-09-29 "member.ndsoft.co.kr 처럼 · 그림자배경, 초록 투톤") ──
   옅은 바탕 위에 그림자 진 큰 카드 하나. 왼쪽은 라플 초록 투톤(사각로고와 같은 대각선), 오른쪽은 로그인·가입·찾기. */
.lg-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px;
	background: radial-gradient(1200px 600px at 20% 10%, #EAECF6 0, transparent 60%), #F3F5F4; }
.lg-card { width: 100%; max-width: 1080px; min-height: 600px; display: grid; grid-template-columns: 1.08fr 1fr;
	background: #fff; border-radius: 26px; overflow: hidden;
	box-shadow: 0 30px 70px rgba(17, 23, 54, .16), 0 6px 18px rgba(17, 23, 54, .08); }
.lg-side { position: relative; overflow: hidden; padding: 56px 52px; color: #fff; background: #253272;
	display: flex; flex-direction: column; }
.lg-side::after { content: ""; position: absolute; inset: 0; background: #5E6475;
	clip-path: polygon(10% 100%, 100% 8%, 100% 100%); }
.lg-side > * { position: relative; z-index: 1; }
.lg-side__logo { display: flex; align-items: center; gap: 14px; }
.lg-side__logo img { height: 30px; width: auto; }
.lg-side__logo span { width: 1px; height: 24px; background: rgba(255, 255, 255, .5); }
.lg-side__kicker { margin: auto 0 14px; font-size: 16px; font-weight: 700; color: #FFE08A; letter-spacing: -.01em; }
.lg-side__title { margin: 0 0 18px; font-size: 44px; line-height: 1.22; font-weight: 900; letter-spacing: -.04em; color: #fff; }
.lg-side__sub { margin: 0 0 8px; font-size: 16px; color: rgba(255, 255, 255, .88); }

.lg-main { display: flex; align-items: center; justify-content: center; padding: 48px 56px; }
.lg-pane { width: 100%; max-width: 380px; }
.lg-pane[hidden] { display: none; }
#lgJoin { max-width: 440px; }
.lg-badge { display: table; margin: 0 auto 10px; padding: 4px 12px; border-radius: 999px; background: #E6E8F4; color: #253272; font-size: 12.5px; font-weight: 700; }
.lg-h { margin: 0 0 26px; text-align: center; font-size: 28px; font-weight: 800; letter-spacing: -.03em; color: #111; }
.lg-in { position: relative; display: flex; align-items: center; height: 54px; margin: 0 0 12px; padding: 0 14px;
	background: #F4F6F5; border: 1px solid transparent; border-radius: 12px; }
.lg-in[hidden] { display: none; }
.lg-in:focus-within { background: #fff; border-color: #253272; }
.lg-in > svg { flex: 0 0 auto; width: 20px; height: 20px; fill: none; stroke: #8A9290; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lg-page .lg-in input { flex: 1 1 auto; height: 100%; margin: 0 0 0 10px; padding: 0; border: 0 !important; background: transparent !important;
	font-size: 15.5px; color: #111; outline: none; box-shadow: none; }
.lg-eye { flex: 0 0 auto; width: 34px; height: 34px; padding: 6px; border: 0; background: none; cursor: pointer; }
.lg-eye svg { width: 22px; height: 22px; fill: none; stroke: #9AA19F; stroke-width: 1.8; }
.lg-eye.is-on svg { stroke: #253272; }
.lg-save { display: flex; align-items: center; gap: 6px; margin: 4px 0 18px; font-size: 14px; color: #55605C; cursor: pointer; }
.lg-save input { width: 16px; height: 16px; accent-color: #253272; }
.lg-btn { display: block; width: 100%; height: 56px; border: 0; border-radius: 12px; background: #253272; color: #fff;
	font-size: 17px; font-weight: 800; cursor: pointer; box-shadow: 0 10px 22px rgba(37, 50, 114, .25); }
.lg-btn:hover { background: #19214E; }
.lg-btn:disabled { opacity: .6; cursor: default; }
.lg-links { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 22px; font-size: 14px; }
.lg-links a { color: #55605C; text-decoration: none; }
.lg-links a:hover { color: #253272; }
.lg-links i { width: 1px; height: 12px; background: #D5DAD8; }
.lg-links a[data-lg="lgJoin"] { color: #253272; font-weight: 700; }
.lg-back { display: inline-block; margin-bottom: 14px; font-size: 14px; color: #6B7370; text-decoration: none; }
.lg-back:hover { color: #253272; }
.lg-note { margin: -14px 0 18px; text-align: center; font-size: 13.5px; line-height: 1.6; color: #6B7370; }
#lgFind .lg-note { margin: 4px 0 16px; }
.lg-res { min-height: 1.2em; margin: 12px 0 0; text-align: center; font-size: 14px; line-height: 1.6; color: #253272; white-space: pre-line; }
.lg-res.is-err { color: #D9480F; }
/* 가입 칸 — 두 줄씩 */
.lg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin-bottom: 18px; }
.lg-f { display: flex; flex-direction: column; gap: 5px; margin: 0; }
.lg-f--wide { grid-column: 1 / -1; }
.lg-f > span { font-size: 12.5px; font-weight: 700; color: #3F4845; }
.lg-page .lg-f input, .lg-page .lg-f select { width: 100%; height: 44px; padding: 0 12px; border: 1px solid #E1E5E3 !important; border-radius: 10px;
	background: #F8FAF9; font-size: 14.5px; color: #111; outline: none; }
.lg-page .lg-f input:focus, .lg-page .lg-f select:focus { background: #fff; border-color: #253272 !important; }
/* 찾기 탭 */
.lg-tabs { display: flex; margin: -8px 0 18px; border-bottom: 1px solid #E6EAE8; }
.lg-tabs button { flex: 1; height: 42px; border: 0; background: none; font-size: 15px; font-weight: 700; color: #8A9290; cursor: pointer;
	border-bottom: 2px solid transparent; margin-bottom: -1px; }
.lg-tabs button.is-on { color: #253272; border-bottom-color: #253272; }

@media (max-width: 900px) {
	.lg-page { padding: 16px; align-items: flex-start; min-height: 0; }
	.lg-card { grid-template-columns: 1fr; min-height: 0; border-radius: 20px; }
	.lg-side { padding: 26px 24px 30px; }
	.lg-side__kicker { margin: 22px 0 8px; font-size: 14px; }
	.lg-side__title { font-size: 28px; margin-bottom: 8px; }
	.lg-side__sub { font-size: 14px; }
	.lg-main { padding: 28px 20px 32px; }
	.lg-h { font-size: 24px; margin-bottom: 20px; }
}
@media (max-width: 480px) {
	.lg-grid { grid-template-columns: 1fr; }
	.lg-side__title br { display: none; }
}

/* 신규직원 가입 승인 (2026-09-29) — 첫 화면 한 줄 · 승인 화면 */
.ja-bar { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 12px 18px; border-radius: 12px;
	background: #E6E8F4; color: #141B3F !important; font-size: 14.5px; text-decoration: none !important; border: 1px solid #BFC4E3; }
.ja-bar b { color: #253272; }
.ja-bar span { margin-left: auto; font-weight: 800; color: #253272; }
.ja-card { padding: 24px 26px; }
.ja-h { margin: 0 0 6px; font-size: 22px; font-weight: 800; }
.ja-h small { margin-left: 8px; font-size: 14px; color: #253272; font-weight: 700; }
.ja-hint { margin: 0 0 16px; font-size: 13.5px; color: #6B7370; }
.ja-empty { padding: 40px 0; text-align: center; color: #8A9290; }
.ja-act { white-space: nowrap; }
/* 로그인 화면 손질 (2026-09-29) — 위 빈 띠·카드 잘림·흰 로고·모바일 넘침·저장 네모 */
body.is-login { padding-top: 0 !important; margin-top: 0 !important; background: #F3F5F4; }
body.is-login > main.main.lg-page { margin: 0 !important; padding: 32px 20px !important; min-height: 100vh; box-sizing: border-box; width: 100%; }
.lg-card { min-height: 560px; max-height: none; }
.lg-card > * { min-width: 0; }
.lg-side__logo img:first-child { filter: brightness(0) invert(1); }   /* INSURANET 글자 로고를 흰색으로 — 상단바와 같다 */
.lg-page .lg-save input[type="checkbox"] { -webkit-appearance: auto !important; appearance: auto !important; display: inline-block !important;
	position: static !important; opacity: 1 !important; visibility: visible !important; margin: 0 !important; }
.lg-links { flex-wrap: wrap; row-gap: 6px; }
@media (max-width: 900px) {
	body.is-login > main.main.lg-page { padding: 14px 12px 24px !important; min-height: 0; }
	.lg-links { gap: 8px; font-size: 13.5px; }
}
.lg-page .lg-f input, .lg-page .lg-f select { border-radius: 10px !important; box-shadow: none !important; outline: none !important; }
.lg-page .lg-f input:focus, .lg-page .lg-f select:focus { border-color: #253272 !important; box-shadow: 0 0 0 3px rgba(37, 50, 114, .12) !important; }

/* 로그인 왼쪽 = 라플 사각로고 하나 (대표님 지시 2026-09-29 "좌측엔 그냥 라플 사각로고로").
   카드 높이를 고정해 왼쪽 판이 늘 정사각에 가깝게 · 긴 가입 폼은 오른쪽 안에서 스크롤한다. */
.lg-card { height: 560px; min-height: 0; }
.lg-side { padding: 0; background: #253272; display: block; }
.lg-side::after { display: none; }
.lg-side__sq { display: block; width: 100%; height: 100%; object-fit: cover; }
.lg-main { overflow-y: auto; align-items: flex-start; padding: 40px 48px; }
.lg-main > .lg-pane { margin: auto; }   /* 짧으면 가운데, 길면 위부터 */
@media (max-width: 900px) {
	.lg-card { height: auto; }
	.lg-side { background: #fff; padding: 26px 0 0; text-align: center; }
	.lg-side__sq { width: 96px; height: 96px; margin: 0 auto; border-radius: 0; }
	.lg-main { overflow: visible; padding: 20px 20px 30px; }
}
/* 로그인 폼 위 · 인슈라넷 글자 로고만 (2026-09-29) */
.lg-logo { margin: 0 0 34px; text-align: center; line-height: 0; }
.lg-logo img { height: 40px; width: auto; }
@media (max-width: 900px) { .lg-logo { margin-bottom: 24px; } .lg-logo img { height: 32px; } }
/* 흰 상자 맨 아래 저작권 (2026-09-29) · 폼은 가운데, 저작권은 바닥 */
.lg-main { flex-direction: column; align-items: center; padding-bottom: 22px; }
.lg-copy { flex: 0 0 auto; margin: 18px 0 0; font-size: 12px; color: #A3AAA7; letter-spacing: .01em; text-align: center; }
@media (max-width: 900px) { .lg-copy { margin-top: 24px; } }
/* 가입 폼을 흰 상자(560) 안에 더 담기게 조금 촘촘히 (2026-09-29) */
#lgJoin .lg-h { font-size: 24px; margin-bottom: 8px; }
#lgJoin .lg-back { margin-bottom: 6px; }
#lgJoin .lg-note { margin: 0 0 12px; font-size: 12.5px; }
#lgJoin .lg-grid { gap: 7px 12px; margin-bottom: 12px; }
#lgJoin .lg-f { gap: 3px; }
.lg-page #lgJoin .lg-f input, .lg-page #lgJoin .lg-f select { height: 38px; }
#lgJoin .lg-btn { height: 48px; }
.lg-main { scroll-behavior: auto; }
/* 가입 폼이 길면 상자 전체가 세로로 늘어난다 (대표님 지시 2026-09-29) · 안에서 스크롤하지 않는다.
   왼쪽 사각로고는 늘어난 판을 채우고(가운데 기준) · 로그인일 때는 560 정사각 */
.lg-card { height: auto; min-height: 560px; }
.lg-main { overflow: visible; justify-content: center; }
.lg-side__sq { object-position: center; }
/* 본인인증 — 번호 칸 옆 단추 · 인증번호 줄 */
.lg-row { display: flex; gap: 8px; }
.lg-row input { flex: 1 1 auto; min-width: 0; }
.lg-sub { flex: 0 0 auto; height: 38px; padding: 0 14px; border: 1px solid #253272; border-radius: 10px; background: #fff;
	color: #253272; font-size: 13.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.lg-sub:hover { background: #E6E8F4; }
.lg-sub:disabled { opacity: .6; cursor: default; }
.lg-sub.is-ok { background: #253272; color: #fff; opacity: 1; }
.lg-f > span em { font-style: normal; font-weight: 700; color: #D9480F; margin-left: 6px; }
.lg-ver { grid-column: 1 / -1; margin: -2px 0 0; min-height: 0; font-size: 12.5px; color: #253272; }
.lg-ver:empty { display: none; }
.lg-ver.is-err { color: #D9480F; }
#lgJoin .lg-back { margin-bottom: 14px; }
.lg-f[hidden] { display: none !important; }   /* 인증번호 줄은 받기 전엔 숨김 */
/* 로그인 링크 아래 · 접속 IP (2026-09-29) */
.lg-ip { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 14px 0 0; font-size: 12.5px; color: #8A9290; }
.lg-ip svg { width: 15px; height: 15px; fill: none; stroke: #253272; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lg-ip b { font-weight: 700; color: #3F4845; letter-spacing: .02em; }

/* 로그인 화면 맨 아래 사이트 카피라이트 줄은 숨긴다 · 흰 상자 안에 한 줄이 있다 (대표님 지시 2026-09-29) */
body.is-login > .site-footer { display: none !important; }

/* 로그인 인사 팝업 · 오늘 확인할 일 — 전자결재 · 공지 (대표님 지시 2026-09-29) */
.dg-todo { margin: 14px 0 4px; padding: 12px 14px; border-radius: 12px; background: #F4F5F8; text-align: left; }
.dg-todo__h { margin: 0 0 6px; font-size: 13.5px; font-weight: 800; color: #1F2A26; }
.dg-todo__h b { margin-left: 4px; color: #253272; }
.dg-todo__none { margin: 0; font-size: 13px; color: #6B7370; }
.dg-todo__g { margin: 10px 0 4px; font-size: 13px; font-weight: 700; color: #3F4845; }
.dg-todo__g b { color: #D9480F; }
.dg-todo ul { list-style: none; margin: 0; padding: 0; }
.dg-todo li a { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px dashed #DDE5E1;
	font-size: 13px; color: #1F2A26; text-decoration: none; }
.dg-todo li:last-child a { border-bottom: 0; }
.dg-todo li a:hover { color: #253272; }
.dg-todo li em { flex: 0 0 auto; font-style: normal; font-size: 11.5px; font-weight: 700; color: #253272; background: #E3E5F2; padding: 1px 7px; border-radius: 999px; }
.dg-todo li span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-todo li i { flex: 0 0 auto; font-style: normal; font-size: 12px; color: #8A9290; }
.dg-todo__more a { justify-content: flex-end; color: #253272 !important; font-weight: 700; }

/* 명함 · 모바일 명함 · 전문가 칼럼 신청 (2026-09-29) */
.rq-tabs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; }
.rq-tabs a { padding: 8px 16px; border-radius: 999px; background: #F1F4F3; color: #3F4845; font-size: 14px; font-weight: 700; text-decoration: none; }
.rq-tabs a.is-on { background: #253272; color: #fff; }
.rq-tabs a:hover { color: #253272; }
.rq-tabs a.is-on:hover { color: #fff; }
.rq-tabs__list { margin-left: auto; background: none !important; color: #253272 !important; }
.rq-form { padding: 24px 26px; }
.rq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.rq-f { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.rq-f--wide { grid-column: 1 / -1; }
.rq-f > span { font-size: 13px; font-weight: 700; color: #3F4845; }
.rq-f > span b { color: #D9480F; }
.rq-f input, .rq-f select, .rq-f textarea { width: 100%; padding: 10px 12px; border: 1px solid #E1E5E3; border-radius: 10px; font-size: 14.5px; background: #fff; }
.rq-f input[type=file] { padding: 8px; background: #F8FAF9; }
.rq-f textarea { resize: vertical; line-height: 1.6; }
.rq-act { display: flex; gap: 8px; justify-content: center; margin-top: 22px; }
.rq-err { margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; background: #FFF1EB; color: #D9480F; font-size: 14px; }
.rq-card { padding: 18px 20px; }
.rq-empty { padding: 36px 0; text-align: center; color: #8A9290; }
.rq-tbl td { vertical-align: top; }
.rq-tbl tr.is-new td { background: #F1F2FA; }
.rq-d summary { cursor: pointer; font-weight: 600; }
.rq-d dl { display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px; margin: 10px 0 4px; font-size: 13.5px; }
.rq-d dt { color: #6B7370; font-weight: 700; }
.rq-d dd { margin: 0; word-break: break-all; }
.rq-st { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; background: #F1F4F3; color: #55605C; }
.rq-st--0 { background: #FFF4E5; color: #D9480F; }
.rq-st--1 { background: #E8F1FF; color: #2F5BB7; }
.rq-st--2 { background: #E3E5F2; color: #253272; }
.rq-st--9 { background: #F3F3F5; color: #8A9290; }
.rq-do { display: flex; gap: 6px; align-items: center; }
.rq-do select { width: 86px; }
.rq-do input { width: 180px; }
.rq-mini { display: flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; }
.rq-mini__t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 767px) { .rq-grid { grid-template-columns: 1fr; } .rq-do { flex-wrap: wrap; } .rq-do input { width: 100%; } .rq-d dl { grid-template-columns: 80px 1fr; } }
/* 각종 신청 · 고르는 화면 (2026-09-29) */
.rq-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 18px; }
.rq-pick__i { display: flex; flex-direction: column; gap: 8px; padding: 24px 22px; border-radius: 16px; background: #fff; border: 1px solid #E4E9E7;
	box-shadow: 0 6px 18px rgba(17, 23, 54, .06); text-decoration: none !important; color: #1F2A26; transition: transform .15s, box-shadow .15s, border-color .15s; }
.rq-pick__i:hover { transform: translateY(-2px); border-color: #253272; box-shadow: 0 12px 26px rgba(37, 50, 114, .14); }
.rq-pick__i svg { width: 40px; height: 40px; padding: 8px; border-radius: 12px; background: #E6E8F4; fill: none; stroke: #253272; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rq-pick__i b { font-size: 18px; font-weight: 800; }
.rq-pick__i span { font-size: 13.5px; line-height: 1.55; color: #6B7370; min-height: 2.9em; }
.rq-pick__i em { margin-top: auto; font-style: normal; font-size: 14px; font-weight: 800; color: #253272; }
.rq-card--mine { padding: 18px 22px; }
.rq-mine__h { display: flex; justify-content: space-between; margin: 0 0 8px; font-size: 15px; font-weight: 800; }
.rq-mine__h a { font-size: 13.5px; color: #253272; text-decoration: none; }
.rq-mine { list-style: none; margin: 0; padding: 0; }
.rq-mine li { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid #F0F2F1; font-size: 14px; }
.rq-mine li:last-child { border-bottom: 0; }
.rq-mine__k { flex: 0 0 auto; font-weight: 700; color: #3F4845; }
.rq-mine__t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #55605C; }
.rq-mine__d { flex: 0 0 auto; font-size: 12.5px; color: #9AA19F; }
@media (max-width: 767px) { .rq-pick { grid-template-columns: 1fr; } }
.rq-ai { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.rq-ai em { font-style: normal; font-size: 12.5px; color: #6B7370; }
/* 모바일 명함 · 경력 줄 (2026-09-29) */
.rq-list { display: flex; flex-direction: column; gap: 8px; }
.rq-list__i { display: flex; align-items: center; gap: 8px; }
.rq-list__i i { flex: 0 0 auto; width: 22px; height: 22px; line-height: 20px; text-align: center; border: 1.5px solid #253272; border-radius: 50%; color: #253272; font-style: normal; font-size: 12px; font-weight: 800; }
.rq-list__i input { flex: 1 1 auto; min-width: 0; }
.rq-list__x { flex: 0 0 auto; width: 30px; height: 30px; border: 0; border-radius: 8px; background: #F3F5F4; color: #8A9290; font-size: 18px; line-height: 1; cursor: pointer; }
.rq-list__x:hover { color: #D9480F; }
.rq-list__add { align-self: flex-start; padding: 6px 14px; border: 1px dashed #253272; border-radius: 8px; background: #fff; color: #253272; font-size: 13.5px; font-weight: 700; cursor: pointer; }
/* 각종 신청 카드 4장 (촬영신청 더함 · 2026-09-29) */
.rq-pick { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .rq-pick { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .rq-pick { grid-template-columns: 1fr; } }
/* DB신청까지 5장이면 5칸 (2026-09-29) */
.rq-pick { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
/* 각종 신청 · 촬영 안내 · 칼럼 샘플 · 완성본 (2026-09-29) */
.rq-guide { margin: 0 0 14px; padding: 16px 20px; border-radius: 14px; background: #F3F4FA; border: 1px solid #CFD3E7; }
.rq-guide__h { margin: 0 0 8px; font-size: 15px; font-weight: 800; color: #141B3F; }
.rq-guide ul { margin: 0; padding: 0 0 0 18px; }
.rq-guide li { margin: 4px 0; font-size: 14px; line-height: 1.6; color: #2F3A36; }
.rq-guide b { color: #141B3F; margin-right: 4px; }
.rq-guide a { color: #253272; font-weight: 800; text-decoration: none; }
.rq-sample { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin: -4px 0 12px; font-size: 13.5px; color: #6B7370; }
.rq-sample .board-btn { text-decoration: none; }
.rq-confirm { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; padding: 12px 14px; border-radius: 10px; background: #FFF8EC; font-size: 14px; font-weight: 700; color: #7A4B00; cursor: pointer; }
.rq-confirm input { width: 18px; height: 18px; accent-color: #253272; opacity: 1; position: static; appearance: auto; -webkit-appearance: checkbox; }
.rq-res { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; padding: 8px 12px; border-radius: 10px; background: #E3E5F2; font-size: 13px; }
.rq-res b { color: #253272; font-weight: 800; }
.rq-res a { color: #141B3F; font-weight: 700; text-decoration: underline; word-break: break-all; }
.rq-do__up { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: #253272; white-space: nowrap; }
.rq-do .rq-do__up input { width: 170px; font-size: 12px; }
.rq-mine__res { flex: 0 0 auto; padding: 2px 10px; border-radius: 999px; background: #253272; color: #fff !important; font-size: 12px; font-weight: 700; text-decoration: none !important; }
/* 월별 주요공지 · MY PAGE 왼쪽 카드와 게시판 (2026-09-29) */
.mbd-mp { display: flex; flex-direction: column; gap: 12px; }
.mbd-mp__g { padding-bottom: 10px; border-bottom: 1px solid #F0F2F1; }
.mbd-mp__g:last-child { border-bottom: 0; padding-bottom: 0; }
.mbd-mp__h { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 14.5px; font-weight: 800; color: #141B3F !important; text-decoration: none !important; }
.mbd-mp__h svg { width: 26px; height: 26px; padding: 4px; border-radius: 8px; background: #E6E8F4; fill: none; stroke: #253272; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mbd-mp__h em { margin-left: auto; font-style: normal; font-size: 13px; color: #253272; }
.mbd-mp__i { display: flex; align-items: center; gap: 8px; padding: 5px 2px 5px 34px; font-size: 14px; color: #2F3A36 !important; text-decoration: none !important; }
.mbd-mp__i:hover .mbd-mp__t { text-decoration: underline; }
.mbd-mp__ym { flex: 0 0 auto; min-width: 34px; font-size: 12.5px; font-weight: 700; color: #6B7370; }
.mbd-mp__t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbd-mp__new { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; background: #5E6475; color: #fff; font-size: 10px; line-height: 16px; text-align: center; }
.mbd-mp__none { margin: 0; padding: 4px 0 0 34px; font-size: 13px; color: #9AA19F; }
.mbd-new { font-weight: 800; }
.mbd-tbl__t { font-weight: 700; color: #1F2A26; }
.mbd-view { padding: 26px 30px; }
.mbd-view__ym { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: #253272; }
.mbd-view__t { margin: 0 0 6px; font-size: 22px; font-weight: 800; color: #1F2A26; }
.mbd-view__by { margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid #E4E9E7; font-size: 13px; color: #8A9290; }
.mbd-view__b { margin-bottom: 18px; font-size: 15px; line-height: 1.8; color: #2F3A36; word-break: break-all; }
.mbd-view__b a { color: #253272; }
.mbd-view__img { display: block; margin: 0 0 14px; }
.mbd-view__img img { display: block; max-width: 100%; height: auto; border: 1px solid #E4E9E7; }
.mbd-view__f { margin-bottom: 6px; }
.mbd-del { display: inline; margin: 0; }
.mbd-old { display: flex; align-items: center; gap: 6px; margin: 2px 0 6px; font-size: 13px; color: #55605C; }
@media (max-width: 767px) { .mbd-view { padding: 18px 16px; } }
/* DB신청서 · 최근 3개월 표 (2026-09-29) */
.lv-form td.db3-wrap { padding: 14px 16px !important; }
.db3 { width: 100%; max-width: 720px; border-collapse: collapse; font-size: 14px; }
.db3 th, .db3 td { padding: 9px 10px; border: 1px solid #E4E9E7 !important; text-align: center; }
.db3 thead th { background: #F3F4FA; color: #141B3F; font-weight: 800; }
.db3 tbody th { background: #FAFBFA; font-weight: 700; color: #3F4845; width: 70px; }
.db3 td b { font-size: 15px; color: #1F2A26; margin-right: 1px; }
.db3 td small { display: block; font-size: 12px; color: #6B7370; }
.db3__sum th, .db3__sum td { background: #E3E5F2 !important; }
.db3__sum td b { color: #253272; }
.db3-note { margin: 8px 0 0; }
@media (max-width: 767px) { .db3 { font-size: 13px; } .db3 th, .db3 td { padding: 7px 4px; } }
/* 월별 주요공지 · 가로로 길게 세 칸 (대표님 지시 2026-09-29) */
.mp-card--mbd .mbd-mp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }   /* 시책 · 수수료 · 자격시험 · 위촉일정 */
@media (min-width: 768px) and (max-width: 1199px) {
	.mp-card--mbd .mbd-mp { grid-template-columns: repeat(2, 1fr); row-gap: 14px; }
	.mp-card--mbd .mbd-mp__g:nth-child(3) { border-left: 0; padding-left: 2px; }
}
.mp-card--mbd .mbd-mp__g { padding: 2px 18px 4px; border-bottom: 0; border-left: 1px solid #F0F2F1; min-width: 0; }
.mp-card--mbd .mbd-mp__g:first-child { border-left: 0; padding-left: 2px; }
.mp-card--mbd .mbd-mp__i, .mp-card--mbd .mbd-mp__none { padding-left: 0; }
@media (max-width: 767px) {
	.mp-card--mbd .mbd-mp { grid-template-columns: 1fr; gap: 12px; }
	.mp-card--mbd .mbd-mp__g { padding: 0 0 10px; border-left: 0; border-bottom: 1px solid #F0F2F1; }
	.mp-card--mbd .mbd-mp__g:last-child { border-bottom: 0; }
}
/* 상담내역 · 보낸 문자 보기 (2026-09-30) */
.log-sms { padding: 0; border: 0; background: none; font: inherit; color: #253272; text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.log-sms:hover { color: #141B3F; }
.sms-view { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(17, 23, 54, .45); }
.sms-view[hidden] { display: none !important; }
.sms-view__box { width: 100%; max-width: 420px; max-height: 80vh; display: flex; flex-direction: column; border-radius: 16px; background: #fff; box-shadow: 0 18px 50px rgba(0, 0, 0, .25); overflow: hidden; }
.sms-view__h { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #E4E9E7; font-size: 15px; }
.sms-view__x { border: 0; background: none; font-size: 24px; line-height: 1; color: #6B7370; cursor: pointer; }
.sms-view__b { padding: 16px 18px 20px; overflow-y: auto; white-space: pre-wrap; word-break: break-all; font-size: 14px; line-height: 1.7; color: #1F2A26; background: #F7F7FA; }
.sms-view__b.is-none { color: #8A9290; background: #fff; }