@charset "UTF-8";
/* ============================================================================
   실버홈 모바일 공통 스타일 — /WEB-INF/pages/mobile/*.jsp 전 화면이 이 파일 하나를 공유한다.
   색·폰트는 아래 :root 토큰만 고치면 전 화면에 반영된다.
   화면마다 조금씩 다를 때는 새 클래스 대신 수식 클래스를 붙인다:
     .avatar / .avatar.on-brand / .avatar.lg · .badge / .badge.orange · .card / .card.login · .list / .list.grid(태블릿 다단)
   ── 값의 척도 (벗어난 값을 새로 쓰지 말 것) ──
   글자 크기  11 · 12 · 13 · 14 · 15 · 16 · 17 · 20 · 24 (입력칸은 16 아래로 내리면 iOS 가 화면을 확대한다)
   모서리     10(작은 칩·버튼) · 14(카드 안 요소) · 20(카드) · 999(알약)
   간격 gap   4 · 6 · 8 · 10 · 12 · 14
   그림자     --sh-1 / --sh-2 / --sh-brand  세 가지만
   ========================================================================== */

/* ---------- 디자인 토큰 ----------
   색은 반드시 여기 있는 토큰으로 쓴다. 화면 코드에 색값을 직접 박으면
   아래 다크 모드에서 그 부분만 뒤집히지 않아 글자가 안 보이게 된다.

   --brand-dark 와 --brand-text 는 역할이 다르다:
     --brand-dark  배너 그라데이션의 어두운 끝 (항상 배경으로만)
     --brand-text  연한 배경 위에 얹는 초록 글자/아이콘
   라이트 모드에서는 값이 같지만, 다크 모드에서는 글자 쪽이 밝아져야 해서 갈린다. */
:root{
	--brand:#78a50a;
	--brand-light:#9ccc3c;
	--brand-dark:#5d8007;
	--brand-text:#5d8007;
	--brand-tint:#eef4e2;
	--brand-border:#d7e4bd;
	--orange:#e07800;
	--orange-tint:#fff3e0;
	--red:#d24545;
	--blue:#3868b8;            /* 달력 토요일. 흰 카드 대비 5.47:1 — 4.5:1 아래로 내리지 말 것 */
	--text-main:#373737;
	--text-sub:#757575;   /* 보조 글자 — 흰 배경 대비 4.6:1(접근성 충족). 모든 화면 공통. */
	--bg-page:#f4f5f1;
	--card-bg:#ffffff;
	--border:#d9d9d3;   /* 카드·구분·칩·버튼 테두리 — 살짝 또렷하게(진하지 않게) */
	--input-bg:#fafaf8;
	--surface-2:#f4f4f0;
	--placeholder:#b7b7b2;
	--foot-text:#a9a9a4;
	--grip:#dcdcd6;
	--toast-bg:#373737;
	--danger-bg:#fdecec;
	--danger-border:#f3b9b9;
	--skel-hi:rgba(255,255,255,0.75);   /* 뼈대 위를 훑는 빛 */
	--radius-lg:20px;
	--radius-md:14px;

	/* 그림자는 아래 셋만 쓴다. 상황마다 새로 지어내면 화면끼리 미묘하게 어긋난다.
	   --sh-1     목록·카드처럼 바닥에 놓인 것
	   --sh-2     떠 있는 것 (바텀시트, 로그인 카드)
	   --sh-brand 초록 버튼 */
	--sh-1:0 8px 18px -14px rgba(30,32,30,0.38);
	--sh-2:0 16px 34px -18px rgba(30,32,30,0.32);
	--sh-brand:0 12px 24px -12px rgba(120,165,10,0.5);
}

/* ---------- 다크 모드 ----------
   미디어쿼리가 아니라 <html data-theme="dark"> 로 켠다 — 브라우저 다크 모드가 prefers-color-scheme 를
   안 바꾸는 경우가 있어, inc_head.jsp 의 인라인 스크립트가 기기 설정·사용자 선택을 읽어
   data-theme 을 항상 light/dark 중 하나로 박는다(meta 도 같은 값).
   color-scheme 은 지금 쓰는 테마 하나만 적는다. "light dark" 로 두면 브라우저가 기기 설정대로
   다크로 취급해(삼성 브라우저에서 밝게를 골라도 어둡게) 스크롤바·입력 컨트롤이 어두워지고
   크로미움 자동 다크가 끼어든다.
   초록 배너 위의 흰 글씨(color:#fff)는 다크에서도 초록 위라 그대로 둔다. */
:root[data-theme="light"]{color-scheme:light;}
:root[data-theme="dark"]{color-scheme:dark;}

/* ---------- 테마 색상(스킨) 12종 ----------
   브랜드 색 계열만 갈아 끼운다 — 배경·글자·경고색은 공통이다.
   <html data-skin="blue"> 로 켠다(inc_head.jsp 의 인라인 스크립트,
   저장은 localStorage m_skin, 고르는 곳은 설정 > 화면 테마).
   초록(green)은 기본값이라 블록이 없다.
   대비 기준(WCAG 상대휘도) — 값을 바꾸면 다섯을 다시 잰다:
     흰 글자/브랜드 면 ≥ 2.9 · 라이트 글자색/흰 카드 ≥ 4.5 · 라이트 글자색/틴트 ≥ 4.0
     다크 글자색/다크 카드 ≥ 4.5 · 다크 글자색/다크 틴트 ≥ 4.0
   주황·노랑 계열은 일부러 없다 — '작성중' 표시(--orange)와 헷갈린다.
   빨강 대신 와인(자주빛)을 둔 것도 삭제 버튼(--red)과 구분하기 위해서다. */

/* 숲 — 기본 초록보다 차분하고 짙은 녹색 */
:root[data-skin="forest"]{
	--brand:#3e7d4f; --brand-light:#63a173; --brand-dark:#2e6140; --brand-text:#2e6140;
	--brand-tint:#e8f2ea; --brand-border:#c5ddca;
	--sh-brand:0 12px 24px -12px rgba(62,125,79,0.5);
}
:root[data-skin="forest"][data-theme="dark"]{
	--brand:#3e7d4f; --brand-light:#63a173; --brand-dark:#245034; --brand-text:#8cc79c;
	--brand-tint:#1d2b20; --brand-border:#2f4a36;
}
/* 청록 */
:root[data-skin="teal"]{
	--brand:#1f9e8e; --brand-light:#46c2b1; --brand-dark:#17796d; --brand-text:#17796d;
	--brand-tint:#e4f5f2; --brand-border:#bfe5df;
	--sh-brand:0 12px 24px -12px rgba(31,158,142,0.5);
}
:root[data-skin="teal"][data-theme="dark"]{
	--brand:#1f9e8e; --brand-light:#46c2b1; --brand-dark:#115c53; --brand-text:#6cd3c4;
	--brand-tint:#16302c; --brand-border:#234a44;
}
/* 하늘 */
:root[data-skin="sky"]{
	--brand:#2e97c6; --brand-light:#5cb8dd; --brand-dark:#1e6f94; --brand-text:#1e6f94;
	--brand-tint:#e6f4fa; --brand-border:#bfe2f0;
	--sh-brand:0 12px 24px -12px rgba(46,151,198,0.5);
}
:root[data-skin="sky"][data-theme="dark"]{
	--brand:#2e97c6; --brand-light:#5cb8dd; --brand-dark:#175a77; --brand-text:#7fcdec;
	--brand-tint:#16323e; --brand-border:#245064;
}
/* 파랑 */
:root[data-skin="blue"]{
	--brand:#3b7cc4; --brand-light:#63a0dd; --brand-dark:#2c62a0; --brand-text:#2c62a0;
	--brand-tint:#e8f0fa; --brand-border:#c2d7ef;
	--sh-brand:0 12px 24px -12px rgba(59,124,196,0.5);
}
:root[data-skin="blue"][data-theme="dark"]{
	--brand:#3b7cc4; --brand-light:#63a0dd; --brand-dark:#24507f; --brand-text:#8ab8ec;
	--brand-tint:#1c2836; --brand-border:#2c415c;
}
/* 남색 */
:root[data-skin="navy"]{
	--brand:#4f5fc9; --brand-light:#7787dd; --brand-dark:#38489f; --brand-text:#38489f;
	--brand-tint:#ebedfa; --brand-border:#ccd2f1;
	--sh-brand:0 12px 24px -12px rgba(79,95,201,0.5);
}
:root[data-skin="navy"][data-theme="dark"]{
	--brand:#4f5fc9; --brand-light:#7787dd; --brand-dark:#2c3880; --brand-text:#a6b1f2;
	--brand-tint:#202438; --brand-border:#333b60;
}
/* 보라 */
:root[data-skin="purple"]{
	--brand:#7b68c9; --brand-light:#9d8ee0; --brand-dark:#5f4fa8; --brand-text:#5f4fa8;
	--brand-tint:#efecfa; --brand-border:#d6cef0;
	--sh-brand:0 12px 24px -12px rgba(123,104,201,0.5);
}
:root[data-skin="purple"][data-theme="dark"]{
	--brand:#7b68c9; --brand-light:#9d8ee0; --brand-dark:#473b80; --brand-text:#b3a5ee;
	--brand-tint:#262138; --brand-border:#3c3560;
}
/* 자주 */
:root[data-skin="plum"]{
	--brand:#96519f; --brand-light:#b57cc0; --brand-dark:#773f80; --brand-text:#773f80;
	--brand-tint:#f5ecf7; --brand-border:#e2cbe7;
	--sh-brand:0 12px 24px -12px rgba(150,81,159,0.5);
}
:root[data-skin="plum"][data-theme="dark"]{
	--brand:#96519f; --brand-light:#b57cc0; --brand-dark:#5e3266; --brand-text:#d4a3dd;
	--brand-tint:#2e2231; --brand-border:#4a3650;
}
/* 로즈 */
:root[data-skin="rose"]{
	--brand:#d05a7c; --brand-light:#e4839e; --brand-dark:#ad3f60; --brand-text:#ad3f60;
	--brand-tint:#fbe9ee; --brand-border:#f2c6d2;
	--sh-brand:0 12px 24px -12px rgba(208,90,124,0.5);
}
:root[data-skin="rose"][data-theme="dark"]{
	--brand:#d05a7c; --brand-light:#e4839e; --brand-dark:#8a2f4c; --brand-text:#ee9db4;
	--brand-tint:#331e25; --brand-border:#542f3b;
}
/* 와인 */
:root[data-skin="wine"]{
	--brand:#a3465c; --brand-light:#c26e80; --brand-dark:#83364a; --brand-text:#83364a;
	--brand-tint:#f8eaee; --brand-border:#ebc7d0;
	--sh-brand:0 12px 24px -12px rgba(163,70,92,0.5);
}
:root[data-skin="wine"][data-theme="dark"]{
	--brand:#a3465c; --brand-light:#c26e80; --brand-dark:#6b2c3d; --brand-text:#e494a6;
	--brand-tint:#321f24; --brand-border:#513039;
}
/* 모카 */
:root[data-skin="mocha"]{
	--brand:#8b6b4f; --brand-light:#ab8a6c; --brand-dark:#6d5138; --brand-text:#6d5138;
	--brand-tint:#f4ede6; --brand-border:#e0d0c0;
	--sh-brand:0 12px 24px -12px rgba(139,107,79,0.5);
}
:root[data-skin="mocha"][data-theme="dark"]{
	--brand:#8b6b4f; --brand-light:#ab8a6c; --brand-dark:#57402b; --brand-text:#cfae8f;
	--brand-tint:#2e2820; --brand-border:#4a3e30;
}
/* 차콜 — 차분한 무채색 */
:root[data-skin="graphite"]{
	--brand:#5a6570; --brand-light:#7d8894; --brand-dark:#434c55; --brand-text:#434c55;
	--brand-tint:#eef0f2; --brand-border:#d3d8dd;
	--sh-brand:0 12px 24px -12px rgba(90,101,112,0.5);
}
:root[data-skin="graphite"][data-theme="dark"]{
	--brand:#5a6570; --brand-light:#7d8894; --brand-dark:#333a41; --brand-text:#aeb9c4;
	--brand-tint:#262b30; --brand-border:#3c444c;
}

:root[data-theme="dark"]{
	/* 버튼·배너 같은 "초록 면"은 라이트와 같은 값을 쓴다.
	   다크라고 초록을 밝히면 그 위의 흰 글씨 대비가 오히려 나빠진다
	   (흰글자/#8fbf1a = 2.18:1 < 흰글자/#78a50a = 2.92:1). */
	--brand:#78a50a;
	--brand-light:#9ccc3c;
	--brand-dark:#4d6b06;      /* 배너 그라데이션은 다크에서도 어두운 초록 */
	--brand-text:#b7dc55;      /* 어두운 배경 위 초록 글자는 밝아야 읽힌다 */
	--brand-tint:#2a3318;
	--brand-border:#3f5222;
	--orange:#ffab4d;
	--orange-tint:#3a2a12;
	--red:#ff8080;
	--blue:#8ab4f8;            /* 다크 카드 배경 대비 4.5:1 이상이어야 한다 */
	--text-main:#e8e9e6;
	--text-sub:#9aa0a3;
	--bg-page:#16181a;
	--card-bg:#1f2225;
	--border:#3b4147;   /* 카드·구분·칩·버튼 테두리 — 다크에서도 살짝 또렷하게 */
	--input-bg:#26292c;
	--surface-2:#2b2f33;
	--placeholder:#6f7478;
	--foot-text:#71767a;
	--grip:#3d4348;
	--toast-bg:#3a3f44;
	--danger-bg:#3a2224;
	--danger-border:#5c3034;
	/* 어두운 배경에 흰 빛을 그대로 쓰면 너무 튄다 */
	--skel-hi:rgba(255,255,255,0.07);
}
/* 흰 카드 전제로 잡아 둔 그림자는 다크에서 보이지 않으므로 테두리로 대신한다 */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .sheet,
:root[data-theme="dark"] .tabbar{box-shadow:none;}
/* 탭바 배경은 반투명이라 변수로 못 쓴다(rgba 필요) */
:root[data-theme="dark"] .tabbar{background:rgba(31,34,37,0.92);}
/* 로고 칩은 흰 배경이라 다크에서도 그대로 둔다(로고가 어두운 글씨) */

/* ---------- 인라인 SVG 색 ----------
   JSP 안의 아이콘은 stroke="#373737" 처럼 색이 박혀 있는데, 그대로 두면 다크 모드에서
   어두운 배경에 어두운 선이 되어 보이지 않는다.
   CSS 의 stroke 속성이 SVG presentation attribute 보다 우선하므로, JSP 를 고치지 않고
   여기서 토큰으로 덮는다. 새 아이콘을 넣을 때도 색은 여기서 정하는 편이 낫다. */
.iconbtn svg,
.month-nav a svg,
.font-ctl button svg{stroke:var(--text-main);}
.search-input-wrap svg,
.pw-eye svg{stroke:var(--text-sub);}
/* 줄 오른쪽 꺾쇠(누르면 이동한다는 신호) — 마크업 svg 에 width/height 속성이
   없어서 CSS 로 크기를 안 주면 0×0 으로 사라진다. 색은 흐린 테두리색이 아니라
   보이는 회색(text-sub)으로. */
.cust-item .arrow, .fall-item .arrow{flex:none; color:var(--text-sub); display:flex;}
.cust-item .arrow svg, .fall-item .arrow svg{width:17px; height:17px; stroke:currentColor;}
.info-btn svg,
.call-btn.sub svg,
.attach-item .ico svg,
.menu-tile .ico svg{stroke:var(--brand-text);}
/* 카드 위에 얹히는 아이콘이라 --brand 가 아니라 글자용 초록을 쓴다
   (다크 모드에서 --brand 는 어두워서 카드 배경에 묻힌다) */
.field .input-shell > svg{stroke:var(--brand-text);}
.call-btn svg{stroke:#fff;}                 /* 초록 버튼 위라 항상 흰색 */
.call-btn.sub svg{stroke:var(--brand-text);}

/* ---------- 기본 ---------- */
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
	margin:0;
	min-height:100vh;
	min-height:100dvh;
	/* 'Pretendard Variable' 은 /mobile/css/pretendard.css 에서 자체 호스팅한다(가변 폰트, 굵기 45~920).
	   바꾸려면 inc_head 링크 + 이 font-family 두 곳. 뜨기 전 대체 폰트는 기기별 기본 한글 폰트 순서 —
	   Malgun Gothic·dotum 은 윈도우 전용이라 폰·태블릿에서는 sans-serif 로 떨어진다. */
	font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic',dotum,sans-serif;
	color:var(--text-main);
	background:var(--bg-page);
	padding:calc(20px + env(safe-area-inset-top)) 18px calc(32px + env(safe-area-inset-bottom));
}
/* 상단 배너를 쓰는 화면은 배너가 좌우/상단 여백을 직접 관리한다.
   배너 아래로 옅은 초록빛을 깔아 배너와 본문이 뚝 끊기지 않게 한다(로그인 화면과 같은 처리). */
body.has-banner{
	padding:0 0 calc(28px + env(safe-area-inset-bottom));
	background:
		radial-gradient(circle at 80% 12%, rgba(120,165,10,0.10), transparent 42%),
		var(--bg-page);
}

.container{max-width:1000px; margin:0 auto;}
.container.narrow{max-width:820px;}

@keyframes rise{
	from{opacity:0; transform:translateY(14px);}
	to{opacity:1; transform:translateY(0);}
}

/* ---------- 상단 초록 배너 ----------
   로그인·메인이 함께 쓴다. 초록 그라데이션이 아주 천천히 흐르고, 그 위를
   반투명 원(.blob)이 떠다닌다. 움직이는 것은 background-position 과 transform
   뿐이라 레이아웃을 다시 계산하지 않는다.

   ::after 로 장식 원을 그리면 오른쪽 위 로그아웃 버튼을 덮어 클릭이 먹지
   않는다 — 그래서 .blob 요소로 그리고, .blob 에는 pointer-events:none 이
   걸려 있다. 반드시 유지할 것. */
.top-banner{
	background:linear-gradient(120deg,
		var(--brand-dark) 0%,
		var(--brand) 32%,
		var(--brand-light) 52%,
		var(--brand) 72%,
		var(--brand-dark) 100%);
	background-size:220% 220%;
	animation:banner-flow 18s ease-in-out infinite;
	padding:calc(20px + env(safe-area-inset-top)) 20px 40px;
	border-radius:0 0 28px 28px;
	box-shadow:var(--sh-brand);
	position:relative;
	overflow:hidden;
}
@keyframes banner-flow{
	0%,100%{background-position:0% 50%;}
	50%   {background-position:100% 50%;}
}

/* 배너 안을 떠다니는 원. 주기를 다르게 줘서 같이 움직이는 티가 안 나게 한다.
   장식이므로 절대 클릭을 먹지 않아야 한다(pointer-events:none). */
.blob{
	position:absolute;
	border-radius:50%;
	background:rgba(255,255,255,0.12);
	pointer-events:none;
}
.blob.b1{width:190px; height:190px; right:-62px; top:-72px;  animation:blob-a 14s ease-in-out infinite;}
.blob.b2{width:130px; height:130px; left:-46px;  bottom:6px; background:rgba(255,255,255,0.08); animation:blob-b 19s ease-in-out infinite;}
/* 메인 배너는 로그인보다 낮아서 아래쪽 원이 화면을 다 덮는다 — 작게 줄인다 */
.top-banner:not(.tall) .blob.b2{width:104px; height:104px; left:-36px; bottom:-20px;}
@keyframes blob-a{
	0%,100%{transform:translate(0,0) scale(1);}
	50%    {transform:translate(-18px,14px) scale(1.08);}
}
@keyframes blob-b{
	0%,100%{transform:translate(0,0) scale(1);}
	50%    {transform:translate(16px,-12px) scale(1.12);}
}

.banner-content{padding:0 18px; margin-top:-22px; position:relative; z-index:2;}
/* 배너 안의 상단 줄도 떠다니는 원 위로 올린다(반투명 흰 원에 아이콘이 묻히지 않게) */
.top-banner .topbar{position:relative; z-index:2;}
/* 인사말·로그아웃이 배너와 함께 부드럽게 나타난다 */
.top-banner .who{animation:rise .5s cubic-bezier(.2,.8,.2,1) both;}
.top-banner .iconbtn,
.top-banner .logout-btn{animation:rise .5s cubic-bezier(.2,.8,.2,1) .08s both;}

/* ---------- 뒤로가기 줄 ---------- */
.topbar{
	display:flex;
	align-items:center;
	gap:12px;
	margin-bottom:16px;
}
.topbar h1{font-size:17px; font-weight:800; margin:0;}
.topbar h1.sm{font-size:16px;}
.topbar h1.grow{flex:1;}
.iconbtn{
	width:38px;height:38px;
	border-radius:10px;
	background:var(--card-bg);
	border:1px solid var(--border);
	display:flex;align-items:center;justify-content:center;
	text-decoration:none;
	flex:none;
	/* <button> 에도 쓴다(공지 목록의 돋보기) — 버튼 기본 여백을 죽여야 a 와 같아진다 */
	padding:0;
	cursor:pointer;
}
/* 뒤로가기 — 전 화면 공통.
   일정관리의 이전/다음 달 화살표(네모 버튼 + ◀)와 헷갈리지 않게 셋을 다
   다르게 한다: **원형** + **테마 틴트 배경** + **꼬리 달린 화살표(←)**.
   달 이동은 네모 + 민무늬 꺾쇠 그대로라 구분된다. */
.iconbtn.back{
	border-radius:999px;
	background:var(--brand-tint);
	border-color:var(--brand-border);
	color:var(--brand-text);
}
.iconbtn.back svg{stroke:currentColor;}
.iconbtn.back:active{opacity:.7;}

/* 초록 배너 위에 얹는 아이콘 버튼(메인의 로그아웃).
   흰색을 옅게 깔면 배너와 색이 비슷해져 버튼 모양이 안 보인다 — 배너 그라데이션이
   흐르는 동안 밝은 구간에서는 흰 아이콘 대비가 1.7:1 까지 떨어진다.
   그래서 밝게가 아니라 **어둡게** 깐다. 검정 26% 면 가장 밝은 구간에서도 3.39:1 이라
   테두리 없이도 아이콘이 읽히고, 흰 테두리가 버튼 모양을 확실히 잡아 준다. */
.iconbtn.on-brand{
	background:rgba(0,0,0,0.26);
	border:1px solid rgba(255,255,255,0.38);
}
.iconbtn svg{width:18px;height:18px;}
/* 위 '인라인 SVG 색' 절에서 .iconbtn svg 를 글자색으로 덮는데, 배너 위에서는
   그러면 진회색 아이콘이 초록 위에 놓인다. 여기서 다시 흰색으로 세운다. */
.iconbtn.on-brand svg{stroke:#fff;}
.iconbtn:active{opacity:.6;}
.iconbtn.on-brand:active{background:rgba(0,0,0,0.4); opacity:1;}

/* 아이콘 + 그 아래 글자 (메인의 로그아웃).
   글자는 배너 위에 얹히는데 배너 그라데이션이 흐르면서 밝아지는 구간이 있어
   흰 글씨만으로는 묻힌다. 옅은 그림자로 어느 구간에서도 읽히게 한다. */
.logout-btn{
	flex:none;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:4px;
	text-decoration:none;
}
.logout-btn .cap{
	font-size:11px;
	font-weight:700;
	color:#fff;
	letter-spacing:-0.2px;
	white-space:nowrap;
	text-shadow:0 1px 2px rgba(0,0,0,0.45);
}
.logout-btn:active .iconbtn.on-brand{background:rgba(0,0,0,0.4);}
.logout-btn:active .cap{opacity:.75;}

/* ---------- 카드 ---------- */
.card{
	background:var(--card-bg);
	border:1px solid var(--border);
	border-radius:var(--radius-lg);
	padding:22px;
	margin-bottom:14px;
	box-shadow:var(--sh-1);
}
.card.login{
	max-width:400px;
	margin:0 auto;
	padding:26px 22px 24px;
	border-radius:20px;
	box-shadow:var(--sh-2);
	animation:rise .5s cubic-bezier(.2,.8,.2,1);
}

/* ---------- 제목·라벨 ---------- */
.card-title{font-size:15px; font-weight:800; color:var(--text-main); margin:0 0 18px;}
.block-title{font-size:13px; font-weight:800; color:var(--brand-text); margin:0 0 10px;}
.count{font-size:13px; color:var(--text-sub); margin:0 2px 12px;}

/* ---------- 뱃지 ---------- */
.badge{
	flex:none;
	font-size:11px;
	font-weight:800;
	padding:3px 10px;
	border-radius:999px;
	background:var(--brand-tint);
	color:var(--brand-text);
	white-space:nowrap;
}
.badge.orange{background:var(--orange-tint); color:var(--orange);}

/* ---------- 등급 배지 색 ----------
   중증일수록 따뜻한 색: 1등급 빨강 -> 2 주황 -> 3 호박 -> 4 초록 -> 5 파랑,
   인지지원 보라, 없음(g0) 회색. 클래스는 서버(MobileBase.gradeClass)가 붙인다.
   테마 색상(스킨)과 무관한 **의미색**이다 — 스킨을 바꿔도 등급 색은 그대로.
   글자/바탕 대비는 라이트·다크 전부 4.5:1 이상으로 계산해 골랐다. */
.badge.g1{background:#fdeaea; color:#c03636;}
.badge.g2{background:#fdf0e3; color:#a8510a;}
.badge.g3{background:#faf3da; color:#7d6507;}
.badge.g4{background:#eaf4e6; color:#376f2c;}
.badge.g5{background:#e8f0fa; color:#2c62a0;}
.badge.gcog{background:#f1ecfa; color:#6a4fb0;}
.badge.g0{background:var(--surface-2); color:var(--text-sub);}
/* 만 나이 배지 (평가 수급자 고르기, 등급 옆). 등급 의미색과 헷갈리지 않게
   색을 칠하지 않고 테두리만 — 값은 서버(addDisplayFields 의 cust_age)가 준다. */
.badge.age{background:transparent; color:var(--text-sub); border:1px solid var(--border); padding:2px 9px;}
:root[data-theme="dark"] .badge.g1{background:#3a2020; color:#ff9d9d;}
:root[data-theme="dark"] .badge.g2{background:#3a2a16; color:#ffab5e;}
:root[data-theme="dark"] .badge.g3{background:#36301a; color:#e6c94f;}
:root[data-theme="dark"] .badge.g4{background:#20301d; color:#93cc84;}
:root[data-theme="dark"] .badge.g5{background:#1c2836; color:#8ab8ec;}
:root[data-theme="dark"] .badge.gcog{background:#292138; color:#bda7f0;}

/* ---------- 이름 첫 글자 아바타 ---------- */
.avatar{
	width:42px;height:42px;
	border-radius:14px;
	background:var(--brand-tint);
	color:var(--brand-text);
	display:flex;align-items:center;justify-content:center;
	font-size:16px;
	font-weight:800;
	flex:none;
}
.avatar.on-brand{width:44px;height:44px;border-radius:14px;background:#fff;color:var(--brand);font-size:17px;}
.avatar.lg{width:54px;height:54px;border-radius:14px;font-size:20px;}

/* ---------- 버튼 ----------
   버튼 안에 아이콘(svg)을 넣으므로 전부 flex 다(글자만 있는 버튼도 결과는 같다).
   svg 에 flex:none 이 필요하다 — 없으면 긴 글귀가 두 줄이 될 때 아이콘이 눌려 찌그러진다. */
.btn-primary{
	width:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	border:0;
	padding:15px 0;
	border-radius:999px;
	font-family:inherit;
	font-size:16px;
	font-weight:800;
	color:#fff;
	background:linear-gradient(135deg, var(--brand-light), var(--brand));
	box-shadow:var(--sh-brand);
	cursor:pointer;
	transition:transform .12s ease, box-shadow .12s ease;
}
.btn-primary > svg{width:18px; height:18px; flex:none;}
.btn-primary:active{transform:scale(0.98);}
.list-btn{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	text-align:center;
	margin-top:14px;
	/* 좌우 여백 0 이면 긴 글귀가 알약 둥근 끝에 닿아 잘린다 */
	padding:14px 16px;
	border-radius:999px;
	background:linear-gradient(135deg, var(--brand-light), var(--brand));
	color:#fff;
	font-size:14px;
	font-weight:800;
	text-decoration:none;
	box-shadow:var(--sh-brand);
}
.list-btn > svg{width:17px; height:17px; flex:none;}
.act{
	flex:1 1 auto;
	min-width:72px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:6px;
	padding:9px 0;
	border-radius:10px;
	border:1.5px solid var(--border);
	background:var(--input-bg);
	font-family:inherit;
	font-size:12px;
	font-weight:800;
	color:var(--text-main);
	text-decoration:none;
	cursor:pointer;
}
.act svg{width:13px;height:13px;}
.act:active{opacity:.75;}
/* 그 카드에서 가장 중요한 동작 하나 (본인부담금 카드의 수납처리) */
.act.primary{
	background:var(--brand-tint);
	border-color:var(--brand-border);
	color:var(--brand-text);
}
/* 이름 옆 상세보기 아이콘 */
.info-btn{
	flex:none;
	width:24px;height:24px;
	margin-left:-2px;
	border-radius:10px;
	background:var(--brand-tint);
	display:inline-flex;
	align-items:center;
	justify-content:center;
	text-decoration:none;
}
.info-btn svg{width:14px;height:14px;}
.info-btn:active{opacity:.6;}

/* ---------- 검색 / 필터 ---------- */
.search-form{margin-bottom:10px;}
.search-shell{display:flex; align-items:center; gap:8px;}
.search-input-wrap{position:relative; flex:1;}
.search-input-wrap svg{
	position:absolute;
	left:13px;top:50%;
	transform:translateY(-50%);
	width:16px;height:16px;
}
.search-shell input[type=search]{
	width:100%;
	background:var(--card-bg);
	border:1px solid var(--border);
	color:var(--text-main);
	font-family:inherit;
	/* 16px 아래로 내리지 말 것 — iOS 는 그보다 작은 글자의 입력에 포커스하면
	   화면을 자동으로 확대하고, 확대된 채로 남아 레이아웃이 깨져 보인다.
	   (select 는 네이티브 피커를 띄우므로 해당 없음) */
	font-size:16px;
	padding:12px 12px 12px 38px;
	border-radius:999px;
	outline:none;
	-webkit-appearance:none;
}
.search-shell input[type=search]:focus{border-color:var(--brand);}
.search-shell button{
	border:0;
	flex:none;
	padding:12px 18px;
	border-radius:999px;
	font-family:inherit;
	font-size:14px;
	font-weight:800;
	color:#fff;
	background:linear-gradient(135deg, var(--brand-light), var(--brand));
	cursor:pointer;
}
/* 최근 본 수급자 줄 (수급자 목록 상단) */
.recent-row{margin-bottom:12px;}
.recent-title{font-size:12px; font-weight:700; color:var(--text-sub); margin:0 2px 7px;}
.recent-row .chip{background:var(--brand-tint); border-color:var(--brand-border); color:var(--brand-text);}

.filter-row{display:flex; align-items:center; gap:8px; margin-bottom:12px;}
.chips{
	display:flex;
	gap:8px;
	overflow-x:auto;
	flex:1;
	padding-bottom:4px;
	-webkit-overflow-scrolling:touch;
	scrollbar-width:none;
}
.chips::-webkit-scrollbar{display:none;}
/* <a> 와 <button> 둘 다로 쓰인다 — 서버로 다시 갔다 와야 하는 필터는 링크,
   화면 안에서 바로 걸리는 필터는 버튼 */
.chip{
	flex:none;
	font-family:inherit;
	font-size:13px;
	font-weight:800;
	padding:8px 14px;
	border-radius:999px;
	background:var(--card-bg);
	border:1.5px solid var(--border);
	color:var(--text-main);
	text-decoration:none;
	white-space:nowrap;
	cursor:pointer;
}
.chip.on{background:var(--brand); border-color:var(--brand); color:#fff;}
.sort-sel{
	flex:none;
	font-family:inherit;
	font-size:13px;
	font-weight:700;
	color:var(--text-sub);
	background:var(--card-bg);
	border:1px solid var(--border);
	border-radius:999px;
	padding:8px 10px;
	outline:none;
}

/* ---------- 입력 폼 (로그인) ---------- */
.field{margin-bottom:14px;}
.field label{
	display:block;
	font-size:12px;
	font-weight:700;
	color:var(--text-sub);
	margin-bottom:6px;
	padding-left:2px;
}
.field .input-shell{position:relative; display:flex; align-items:center;}
/* 자식 선택자여야 한다 — 그냥 하위 선택자로 두면 .pw-eye 버튼 안의 아이콘까지
   왼쪽에 겹쳐 붙어 버린다 */
.field .input-shell > svg{position:absolute; left:14px; width:17px;height:17px;}
.field input{
	width:100%;
	background:var(--input-bg);
	border:1px solid var(--border);
	color:var(--text-main);
	font-family:inherit;
	/* iOS 포커스 확대 방지 — 16px 아래로 내리지 말 것 */
	font-size:16px;
	padding:13px 14px 13px 42px;
	border-radius:var(--radius-md);
	outline:none;
	/* transition 은 아래 로그인 화면 절에서 그림자까지 넣어 한 번에 준다 */
}
.field input::placeholder{color:var(--placeholder);}
.field input:focus{border-color:var(--brand); background:var(--card-bg);}
/* 비밀번호 입력칸 오른쪽의 보기/가리기 버튼.
   :has() 는 구형 안드로이드 웹뷰에 없어서 클래스로 표시한다 */
.field .input-shell.has-eye input{padding-right:44px;}
/* 아이콘은 그대로 두고 누를 수 있는 범위만 44px 로 넓힌다(권장 터치 크기) */
.pw-eye{
	position:absolute;
	right:0;
	width:44px; height:44px;
	border:0;
	background:none;
	padding:0;
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
}
.pw-eye svg{width:19px;height:19px;}
.pw-eye.on svg{stroke:var(--brand);}

.row-between{display:flex; align-items:center; gap:14px; margin:2px 2px 14px; flex-wrap:wrap;}
.chk{
	display:flex;
	align-items:center;
	gap:8px;
	font-size:13px;
	color:var(--text-sub);
	cursor:pointer;
	user-select:none;
}
/* 아이디 저장이 꺼져 있어 같이 잠긴 상태 */
.chk.off{opacity:.45; cursor:default;}
.chk input{width:17px;height:17px; accent-color:var(--brand);}
/* 비밀번호 저장을 켰을 때만 보이는 안내 */
.pw-warn{
	display:none;
	font-size:12px;
	line-height:1.5;
	color:var(--orange);
	background:var(--orange-tint);
	border-radius:10px;
	padding:9px 11px;
	margin:0 0 16px;
}
.pw-warn.show{display:block;}
.error-box{
	display:none;
	background:var(--danger-bg);
	border:1px solid var(--danger-border);
	color:var(--red);
	font-size:13px;
	padding:10px 14px;
	border-radius:var(--radius-md);
	margin-bottom:16px;
	font-weight:700;
}
.error-box.show{display:block;}
/* 오류가 아니라 상황 설명(세션 만료 등). 붉은색을 쓰면 사용자가 잘못한 것처럼 보인다 */
.info-box{
	display:none;
	background:var(--brand-tint);
	border:1px solid var(--brand-border);
	color:var(--brand-text);
	font-size:13px;
	line-height:1.5;
	border-radius:var(--radius-md);
	padding:11px 13px;
	margin:0 0 16px;
}
.info-box.show{display:block;}
/* Caps Lock 안내 — 비밀번호 칸 바로 아래 */
.caps-warn{
	display:none;
	font-size:12px;
	font-weight:700;
	color:var(--orange);
	margin:7px 2px 0;
}
.caps-warn.show{display:block;}

/* ---------- 목록 ---------- */
.list{display:grid; grid-template-columns:1fr; gap:10px; align-items:start;}
.empty, .no-access{
	text-align:center;
	padding:60px 20px;
	color:var(--text-sub);
	font-size:14px;
	line-height:1.6;
	/* 목록(.list.grid)이 태블릿·와이드에서 2~3열이 되면 빈 상태가 첫 칸에만 들어가
	   왼쪽으로 쏠린다. 그리드 안에서는 항상 전체 열을 차지하게 해 화면 기준 가운데로.
	   그리드 밖(hr 등)에서는 이 속성이 무시된다. */
	grid-column:1 / -1;
}

/* ---------- 더 보기 (목록 이어붙이기) ----------
   목록 화면(공지·수급자·쪽지)은 모두 이 방식이다(이전/다음 페이저 없음). */
.more-row{display:flex; justify-content:center; margin-top:16px;}
.btn-more{
	display:inline-flex;
	align-items:center;
	gap:6px;
	padding:13px 26px;
	border-radius:999px;
	border:1px solid var(--border);
	background:var(--card-bg);
	font-family:inherit;
	font-size:14px;
	font-weight:800;
	color:var(--brand-text);
	cursor:pointer;
}
.btn-more > svg{width:16px; height:16px; flex:none;}
.btn-more:active{background:var(--brand-tint);}
.btn-more:disabled{opacity:.55;}
.btn-more .rest{font-size:12px; font-weight:700; color:var(--text-sub);}

/* ---------- 로그인 화면 ----------
   움직이는 것들이 몇 가지 있는데 전부 transform / opacity / background-position 만
   건드린다(레이아웃을 다시 계산하지 않아 저사양 폰에서도 부담이 적다).
   맨 아래 prefers-reduced-motion 블록에서 한꺼번에 끌 수 있게 해 두었다. */
body.login-page{
	background:var(--brand-dark);   /* 전면 그라데이션(.login-bg)이 그리기 전 잠깐의 바탕 */
	display:flex;
	flex-direction:column;
	padding:0 0 calc(28px + env(safe-area-inset-bottom));
}

/* ---------- 로그인 전면 배경 (login.jsp 의 .login-bg) ----------
   화면 전체를 브랜드 그라데이션이 천천히 흐르고(메인 배너와 같은 방식), 그 위로
   반투명 빛망울(orb)이 떠다니며 작은 점(rise-dot)이 아래에서 위로 오른다.
   로고·카드가 이 위에 뜨는 전면(full-bleed) 구성이라 배경이 곧 화면 전부다.
   움직임은 background-position(그라데이션)과 transform(orb·점) 뿐이라 저사양 폰에서도
   가볍고, blur 필터는 안 쓴다(GPU 부담) — 부드러운 가장자리는 radial-gradient 로 낸다.
   색은 브랜드 변수라 스킨·다크를 그대로 따른다. 점은 화면 밖에서 출발해 밖(-112vh)으로
   나가므로 불투명도 키프레임 없이도 튀지 않는다. 카드 뒤(z-index)로만 지나간다. */
.login-bg{
	/* inset 단축은 iOS 14.4 이하·구형 웹뷰가 몰라서 롱핸드로 쓴다 */
	position:fixed; top:0; right:0; bottom:0; left:0; z-index:0; overflow:hidden; pointer-events:none;
	background:linear-gradient(135deg,
		var(--brand-dark) 0%,
		var(--brand) 34%,
		var(--brand-light) 58%,
		var(--brand) 78%,
		var(--brand-dark) 100%);
	background-size:240% 240%;
	animation:banner-flow 16s ease-in-out infinite;
}
.orb{
	position:absolute;
	border-radius:50%;
	color:#fff;
	background:radial-gradient(closest-side, currentColor, transparent 72%);
	opacity:.14;
}
.orb.o1{width:380px; height:380px; right:-110px; top:-90px;     animation:orb-a 13s ease-in-out infinite;}
.orb.o2{width:300px; height:300px; left:-100px;  top:30%;       animation:orb-b 17s ease-in-out infinite;}
.orb.o3{width:460px; height:460px; right:-120px; bottom:-160px; animation:orb-c 15s ease-in-out infinite;}
.orb.o4{width:240px; height:240px; left:14%;     bottom:-80px;  animation:orb-b 19s ease-in-out infinite reverse;}
@keyframes orb-a{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-48px,36px) scale(1.16);}}
@keyframes orb-b{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(42px,-46px) scale(1.2);}}
@keyframes orb-c{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-38px,-42px) scale(1.1);}}
:root[data-theme="dark"] .orb{opacity:.09;}

/* ---------- 계절 분위기 층 ----------
   ::before 에 계절별 빛(봄 분홍빛 하늘·여름 햇빛·가을 노을·겨울 서리)을 아주 옅게 얹고,
   ::after 로 가장자리를 살짝 어둡게(비네팅) 해 카드가 떠 보이게 한다. 둘 다 정적이라 비용이 없다.
   빛망울(orb)도 계절색을 띤다 — 조각만 바꾸면 배경이 늘 같은 초록이라 계절이 구분되지 않는다. */
.login-bg::before, .login-bg::after{content:""; position:absolute; top:0; right:0; bottom:0; left:0; pointer-events:none;}
.login-bg::after{background:radial-gradient(120% 90% at 50% 38%, rgba(0,0,0,0) 52%, rgba(0,24,8,.30) 100%);}
:root[data-season="spring"] .login-bg::before{
	background:radial-gradient(70% 48% at 50% -6%, rgba(255,214,232,.55), rgba(255,214,232,0) 70%),
	           linear-gradient(180deg, rgba(255,240,246,.10), rgba(255,255,255,0) 45%);
}
:root[data-season="summer"] .login-bg::before{
	background:radial-gradient(55% 42% at 88% -4%, rgba(255,250,200,.62), rgba(255,250,200,0) 72%),
	           linear-gradient(180deg, rgba(210,245,255,.14), rgba(255,255,255,0) 55%);
}
:root[data-season="autumn"] .login-bg::before{
	background:radial-gradient(70% 50% at 50% -8%, rgba(255,190,90,.50), rgba(255,190,90,0) 70%),
	           linear-gradient(180deg, rgba(255,150,60,.10), rgba(255,255,255,0) 50%, rgba(110,45,10,.28) 100%);
}
:root[data-season="winter"] .login-bg::before{
	background:radial-gradient(80% 55% at 50% -10%, rgba(226,240,255,.55), rgba(226,240,255,0) 70%),
	           linear-gradient(180deg, rgba(200,225,255,.12), rgba(255,255,255,0) 45%, rgba(255,255,255,.34) 100%);
}
:root[data-season="spring"] .orb{color:#ffd9ea; opacity:.20;}
:root[data-season="summer"] .orb{color:#fff7c2; opacity:.18;}
:root[data-season="autumn"] .orb{color:#ffd6a3; opacity:.18;}
:root[data-season="winter"] .orb{color:#e6f1ff; opacity:.22;}
:root[data-theme="dark"] .login-bg::before{opacity:.45;}
:root[data-theme="dark"][data-season] .orb{opacity:.10;}
/* 여름 — 오른쪽 위 햇살. 빛망울 o1 뒤에서 아주 옅은 빛줄기가 천천히 돈다(회전 = transform 뿐).
   가장자리는 radial 마스크로 녹여 «부채꼴 줄무늬»가 아니라 «비치는 햇살»로 보이게 한다. */
:root[data-season="summer"] .orb.o1::before{
	content:""; position:absolute; left:-60%; top:-60%; width:220%; height:220%; border-radius:50%;
	background:repeating-conic-gradient(from 0deg, rgba(255,255,255,.22) 0 5deg, rgba(255,255,255,0) 5deg 22deg);
	-webkit-mask-image:radial-gradient(circle, #000 0%, rgba(0,0,0,.5) 35%, transparent 68%);
	mask-image:radial-gradient(circle, #000 0%, rgba(0,0,0,.5) 35%, transparent 68%);
	opacity:.7;
	animation:sun-rays 70s linear infinite;
}
@keyframes sun-rays{to{transform:rotate(360deg);}}

/* 여름 — 물속에서 피어오르는 물방울.
     · 속은 비치고 가장자리만 밝은 테두리 + 왼쪽 위 반짝임. blur 는 안 쓰고(GPU 부담) radial-gradient 로 낸다(orb 와 같은 규칙).
     · 좌우로 흔들리며 오르고, 오르면서 살짝 커지며, 나타날 때·사라질 때 서서히.
   투명도는 --bub-o 로 두어 다크에서 한 값만 낮춘다 — opacity 를 키프레임이 잡으므로 규칙 하나로
   덮을 수 없다(var 를 모르는 옛 웹뷰는 아래 opacity 로 내려간다). */
.rise-dot{
	position:absolute; bottom:-5vh;
	border-radius:50%;
	--bub-o:.72;
	/* 속은 거의 비우고 가장자리 링을 또렷하게 — 링을 흐리게 두면 그냥 흰 점으로 보인다 */
	background:radial-gradient(circle at 32% 28%,
		rgba(255,255,255,.98) 0 9%,     /* 왼쪽 위 반짝임 */
		rgba(255,255,255,.26) 20%,
		rgba(255,255,255,.04) 46%,      /* 속 — 배경이 비쳐 보인다 */
		rgba(255,255,255,.05) 68%,
		rgba(255,255,255,.88) 88%,      /* 가장자리 링 */
		rgba(255,255,255,.32) 97%,
		rgba(255,255,255,0) 100%);
	/* 초록 바탕에서 링이 묻히지 않게 아주 옅은 번짐 하나. 크기가 고정이라
	   프레임마다 다시 그리지 않는다(움직임은 transform 뿐 — orb 와 같은 규칙) */
	box-shadow:0 0 6px rgba(255,255,255,.18);
	opacity:.4;                        /* var() 를 모르는 옛 웹뷰용 기본값 */
	animation:bubble-a linear infinite;
	will-change:transform;
}
:root[data-theme="dark"] .rise-dot{--bub-o:.36; opacity:.28;}
/* 흔들리는 두 갈래 — 물방울마다 번갈아 줘서 나란히 오르는 티가 안 나게 한다
   (계절 조각 fall-a/b 와 같은 방식). */
@keyframes bubble-a{
	0%   {transform:translate3d(0,0,0) scale(.88); opacity:0;}
	7%   {opacity:var(--bub-o);}
	25%  {transform:translate3d(9px,-28vh,0) scale(1);}
	50%  {transform:translate3d(-7px,-56vh,0) scale(1.05);}
	75%  {transform:translate3d(8px,-84vh,0) scale(1.09);}
	90%  {opacity:var(--bub-o);}
	100% {transform:translate3d(-4px,-116vh,0) scale(1.13); opacity:0;}
}
@keyframes bubble-b{
	0%   {transform:translate3d(0,0,0) scale(.9); opacity:0;}
	7%   {opacity:var(--bub-o);}
	25%  {transform:translate3d(-11px,-29vh,0) scale(1.02);}
	50%  {transform:translate3d(6px,-57vh,0) scale(1.06);}
	75%  {transform:translate3d(-9px,-85vh,0) scale(1.1);}
	90%  {opacity:var(--bub-o);}
	100% {transform:translate3d(5px,-116vh,0) scale(1.15); opacity:0;}
}
.rise-dot.d2, .rise-dot.d4, .rise-dot.d6, .rise-dot.d8,
.rise-dot.d10, .rise-dot.d12, .rise-dot.d14{animation-name:bubble-b;}
/* 위치·크기·주기를 다 다르게 줘서 같이 오르는 티가 안 나게 한다. 음수 delay 로 처음부터 화면 곳곳에 퍼져 있게 한다.
   크기는 12~34px — 물방울은 테두리로 보이는 모양이라 더 작으면 무늬가 안 읽힌다.
   큰 방울일수록 빨리(가까이), 작을수록 천천히(멀리) 올라가 원근감을 준다. */
.rise-dot.d1{left:7%;  width:15px; height:15px; animation-duration:12s; animation-delay:-2s;}
.rise-dot.d2{left:18%; width:28px; height:28px; animation-duration:9s;  animation-delay:-5s;}
.rise-dot.d3{left:31%; width:13px; height:13px; animation-duration:15s; animation-delay:-8s;}
.rise-dot.d4{left:44%; width:22px; height:22px; animation-duration:11s; animation-delay:-12s;}
.rise-dot.d5{left:57%; width:34px; height:34px; animation-duration:8s;  animation-delay:-3s;}
.rise-dot.d6{left:69%; width:12px; height:12px; animation-duration:16s; animation-delay:-7s;}
.rise-dot.d7{left:80%; width:19px; height:19px; animation-duration:12s; animation-delay:-11s;}
.rise-dot.d8{left:89%; width:26px; height:26px; animation-duration:9s;  animation-delay:-6s;}
.rise-dot.d9{left:96%; width:14px; height:14px; animation-duration:14s; animation-delay:-1s;}
.rise-dot.d10{left:12%; width:20px; height:20px; animation-duration:11s; animation-delay:-8s;}
.rise-dot.d11{left:26%; width:12px; height:12px; animation-duration:15s; animation-delay:-4s;}
.rise-dot.d12{left:38%; width:30px; height:30px; animation-duration:8s;  animation-delay:-5s;}
.rise-dot.d13{left:51%; width:16px; height:16px; animation-duration:13s; animation-delay:-10s;}
.rise-dot.d14{left:63%; width:24px; height:24px; animation-duration:10s; animation-delay:-4s;}
.rise-dot.d15{left:75%; width:13px; height:13px; animation-duration:15s; animation-delay:-9s;}

/* ---------- 계절 배경 효과 (login.jsp 의 .fall-p) ----------
   봄 꽃잎 · 가을 낙엽 · 겨울 눈이 위에서 내린다. 세 계절이 같은 조각(.fall-p)을 함께 쓰고
   모양·색만 :root[data-season] 으로 갈아 끼운다 — 계절마다 조각을 따로 두면 markup 이 세 배가
   되고 한쪽만 고치는 일이 생긴다. 여름은 같은 조각을 제자리 햇빛 반짝임으로 쓴다(아래 여름 절).
   계절 값은 <html data-season>(inc_head.jsp — 저장값 m_season, 없으면 그 달로 판정).
   움직임은 transform 뿐이라 가볍다. 빛망울(orb)은 계절과 무관하게 남긴다. */
.fall-p{
	position:absolute; top:-12vh; left:0;
	pointer-events:none;
	/* 크기는 조각마다 --w, 계절마다 --sz(배수). 꽃잎·낙엽은 «모양»으로 읽혀야 해서
	   눈보다 커야 한다 — 계절 규칙에서 --sz 한 줄만 바꾸면 18개가 함께 커진다. */
	--sz:1;
	width:calc(var(--w) * var(--sz));
	height:calc(var(--w) * var(--sz));
	background-repeat:no-repeat;
	background-position:center;
	background-size:100% 100%;
	animation:fall-a linear infinite;
	will-change:transform;
}
/* 나머지 계절은 피어오르는 점 대신 내리는 조각을 쓴다(둘이 겹치면 산만하다) */
:root[data-season="spring"] .rise-dot,
:root[data-season="autumn"] .rise-dot,
:root[data-season="winter"] .rise-dot{display:none;}

/* ===== 조각의 원근·움직임·모양 =====
   1. 원근: 조각 18개를 셋으로 나눈다(nth-child 3n / 3n+1 / 3n+2 — 조각은 형제라 번호로 갈린다).
      가까운 것은 크고 또렷하고 빠르게, 먼 것은 작고 흐리고 느리게.
   2. 움직임: 꽃잎·낙엽은 rotateY/rotateX 로 뒤집히며 떨어지고 좌우로 크게 흔들린다. 눈은 돌지 않고
      천천히 흔들리며 내린다. 전부 transform 뿐 — blur·box-shadow 애니메이션은 안 쓴다.
   3. 모양: 낙엽은 두 가지 색(주황·진홍), 눈은 큰 것만 여섯 가닥 눈송이 실루엣, 여름은 네 갈래 별 햇빛 반짝임.
   조각 하나의 모양·크기는 --w(조각별)·--sz(계절별 배수)·--dp(원근 배수)로 정한다. ===== */
:root[data-season="spring"] .fall-p,
:root[data-season="autumn"] .fall-p,
:root[data-season="winter"] .fall-p{
	width:calc(var(--w) * var(--sz) * var(--dp, 1));
	height:calc(var(--w) * var(--sz) * var(--dp, 1));
}
/* 원근 셋 — 가까운 것(3n+1) 크고 또렷, 먼 것(3n) 작고 흐릿. 속도는 조각별 주기(아래 .fall-p.fN, 9~19s)가 그대로다 —
   nth-child 로 지정한 조각 번호는 .login-bg 의 형제 순서(orb 4 + rise-dot 15 뒤)라 f1 부터가 아니지만 어차피 무작위면 된다. */
.fall-p:nth-child(3n+1){--dp:1.35; --op:1;}
.fall-p:nth-child(3n+2){--dp:1;    --op:.85;}
.fall-p:nth-child(3n)  {--dp:.68;  --op:.55;}

/* 봄 — 벚꽃 잎. 모양은 SVG 실루엣이다 — border-radius 로는 둥근 얼룩으로 보인다.
   끝이 오목한 벚꽃잎 윤곽에 흰빛→분홍 그라데이션을 넣어 뒤집힐 때 결이 보인다.
   그림 파일이 아니라 data URI 라 요청이 늘지 않는다(#은 %23 로 적어야 한다). */
:root[data-season="spring"] .fall-p{
	--sz:1.75;
	border-radius:0;
	background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3ClinearGradient id='p' x1='0' y1='0' x2='.9' y2='1'%3E%3Cstop offset='0' stop-color='%23fff2f7'/%3E%3Cstop offset='.5' stop-color='%23ffc3da'/%3E%3Cstop offset='1' stop-color='%23ff8fb9'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23p)' d='M12 23C5.5 19.4 2.4 12.9 5.6 6.4 7.1 3.2 9.7 2.5 12 5.7c2.3-3.2 4.9-2.5 6.4.7 3.2 6.5.1 13-6.4 16.6z'/%3E%3Cpath d='M12 7.8c-.3 4.6-.2 9.2.4 13.6' fill='none' stroke='%23e2749b' stroke-opacity='.45' stroke-width='.9' stroke-linecap='round'/%3E%3C/svg%3E");
	opacity:var(--op, .92);
	animation-name:petal-a;
}
:root[data-season="spring"] .fall-p:nth-child(2n){animation-name:petal-b;}
/* 진분홍 겹꽃잎 — 셋 중 하나는 색을 달리해 «같은 도장» 느낌을 없앤다 */
:root[data-season="spring"] .fall-p:nth-child(3n+2){
	background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3ClinearGradient id='p' x1='0' y1='0' x2='.9' y2='1'%3E%3Cstop offset='0' stop-color='%23ffe3ee'/%3E%3Cstop offset='.5' stop-color='%23ffa9cc'/%3E%3Cstop offset='1' stop-color='%23f26aa0'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23p)' d='M12 23C5.5 19.4 2.4 12.9 5.6 6.4 7.1 3.2 9.7 2.5 12 5.7c2.3-3.2 4.9-2.5 6.4.7 3.2 6.5.1 13-6.4 16.6z'/%3E%3Cpath d='M12 7.8c-.3 4.6-.2 9.2.4 13.6' fill='none' stroke='%23d4508a' stroke-opacity='.45' stroke-width='.9' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* 가을 — 낙엽. 봄과 같은 이유로 SVG 실루엣이다.
   잎맥(가운데 줄기 + 곁줄기)까지 넣어야 잎으로 읽힌다 — 윤곽만으로는 주황 얼룩이다. */
:root[data-season="autumn"] .fall-p{
	--sz:1.6;
	border-radius:0;
	background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3ClinearGradient id='l' x1='0' y1='0' x2='.8' y2='1'%3E%3Cstop offset='0' stop-color='%23ffd88a'/%3E%3Cstop offset='.55' stop-color='%23f0913a'/%3E%3Cstop offset='1' stop-color='%23c2521f'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23l)' d='M12.4 2.2c5.8 4.6 7.9 10.6 5.2 15.4-2.3 4.1-8.7 4.1-11 0C4 12.8 6.3 6.8 12.4 2.2z'/%3E%3Cpath d='M12.4 4.2C11.5 10 10.6 16 9.5 22' fill='none' stroke='%238a3c12' stroke-opacity='.5' stroke-width='1.1' stroke-linecap='round'/%3E%3Cpath d='M12.1 8.6l3.3-1.5M11.6 12.1l3.5-1.7M11.1 15.5l3.1-1.7M12.3 9.2L9.4 7.6M11.8 12.7L8.9 11.1M11.3 16.1L8.6 14.7' fill='none' stroke='%238a3c12' stroke-opacity='.3' stroke-width='.9' stroke-linecap='round'/%3E%3C/svg%3E");
	opacity:var(--op, .95);
	animation-name:leaf-a;
}
:root[data-season="autumn"] .fall-p:nth-child(2n){animation-name:leaf-b;}
/* 진홍 단풍 — 둘 중 하나. 색이 하나뿐이면 주황 종이가 흩날리는 것처럼 보인다 */
:root[data-season="autumn"] .fall-p:nth-child(3n+1){
	background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3ClinearGradient id='l' x1='0' y1='0' x2='.8' y2='1'%3E%3Cstop offset='0' stop-color='%23ff9a6a'/%3E%3Cstop offset='.5' stop-color='%23d9442e'/%3E%3Cstop offset='1' stop-color='%238e1f1a'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23l)' d='M12.4 2.2c5.8 4.6 7.9 10.6 5.2 15.4-2.3 4.1-8.7 4.1-11 0C4 12.8 6.3 6.8 12.4 2.2z'/%3E%3Cpath d='M12.4 4.2C11.5 10 10.6 16 9.5 22' fill='none' stroke='%23561010' stroke-opacity='.55' stroke-width='1.1' stroke-linecap='round'/%3E%3Cpath d='M12.1 8.6l3.3-1.5M11.6 12.1l3.5-1.7M11.1 15.5l3.1-1.7M12.3 9.2L9.4 7.6M11.8 12.7L8.9 11.1M11.3 16.1L8.6 14.7' fill='none' stroke='%23561010' stroke-opacity='.35' stroke-width='.9' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* 겨울 — 눈. 작은 것은 흰 동그라미(가장자리는 radial 로 부드럽게 — blur 는 GPU 부담이라 안 쓴다),
   가까운 큰 것(3n+1)은 여섯 가닥 눈송이 실루엣 — 점만 내리면 눈이 아니라 먼지로 읽힌다. */
:root[data-season="winter"] .fall-p{
	--sz:1.15;
	border-radius:50%;
	background-image:radial-gradient(closest-side, #fff 0 38%, rgba(255,255,255,.85) 60%, rgba(255,255,255,0) 100%);
	opacity:var(--op, .92);
	animation-name:snow-a;
}
:root[data-season="winter"] .fall-p:nth-child(2n){animation-name:snow-b;}
:root[data-season="winter"] .fall-p:nth-child(3n+1){
	--sz:1.6;
	border-radius:0;
	background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M12 2v20M3.3 7l17.4 10M3.3 17L20.7 7'/%3E%3Cpath d='M12 5l-2.2-2.2M12 5l2.2-2.2M12 19l-2.2 2.2M12 19l2.2 2.2M5.8 8.5L4 7.7M5.8 8.5l-.1-2.9M18.2 15.5l1.8.8M18.2 15.5l.1 2.9M5.8 15.5L4 16.3M5.8 15.5l-.1 2.9M18.2 8.5l1.8-.8M18.2 8.5l.1-2.9'/%3E%3Ccircle cx='12' cy='12' r='1.6' fill='%23ffffff' stroke='none'/%3E%3C/svg%3E");
	animation-name:flake-a;
}
:root[data-season="winter"] .fall-p:nth-child(6n+4){animation-name:flake-b;}

/* 여름 — 햇빛 반짝임. 내리지 않고 제자리에서 켜졌다 꺼진다(네 갈래 별, 크기·박자 제각각).
   위치는 아래 «자리표»가 조각마다 정한다. 물방울(rise-dot)과 겹쳐 «물빛 위 햇살»이 된다. */
:root[data-season="summer"] .fall-p{
	--sz:1.5;
	top:auto; border-radius:0;
	background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3CradialGradient id='g' cx='.5' cy='.5' r='.5'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%23ffffff' stop-opacity='0'/%3E%3C/radialGradient%3E%3Ccircle cx='12' cy='12' r='11' fill='url(%23g)' opacity='.55'/%3E%3Cpath fill='%23ffffff' d='M12 1.5c.9 6.4 4.1 9.6 10.5 10.5-6.4.9-9.6 4.1-10.5 10.5C11.1 16.1 7.9 12.9 1.5 12 7.9 11.1 11.1 7.9 12 1.5z'/%3E%3C/svg%3E");
	width:calc(var(--w) * var(--sz) * var(--dp, 1));
	height:calc(var(--w) * var(--sz) * var(--dp, 1));
	opacity:0;
	animation:twinkle 4.5s ease-in-out infinite;
	will-change:transform, opacity;
}
:root[data-season="summer"] .fall-p:nth-child(2n){animation-duration:6s;}
:root[data-season="summer"] .fall-p:nth-child(3n){animation-duration:7.5s;}
:root[data-season="summer"] .fall-p.f1 {top:8%;}  :root[data-season="summer"] .fall-p.f2 {top:26%;}
:root[data-season="summer"] .fall-p.f3 {top:15%;} :root[data-season="summer"] .fall-p.f4 {top:64%;}
:root[data-season="summer"] .fall-p.f5 {top:5%;}  :root[data-season="summer"] .fall-p.f6 {top:78%;}
:root[data-season="summer"] .fall-p.f7 {top:40%;} :root[data-season="summer"] .fall-p.f8 {top:12%;}
:root[data-season="summer"] .fall-p.f9 {top:70%;} :root[data-season="summer"] .fall-p.f10{top:33%;}
:root[data-season="summer"] .fall-p.f11{top:9%;}  :root[data-season="summer"] .fall-p.f12{top:84%;}
:root[data-season="summer"] .fall-p.f13{top:22%;} :root[data-season="summer"] .fall-p.f14{top:56%;}
:root[data-season="summer"] .fall-p.f15{top:90%;} :root[data-season="summer"] .fall-p.f16{top:47%;}
:root[data-season="summer"] .fall-p.f17{top:18%;} :root[data-season="summer"] .fall-p.f18{top:73%;}
@keyframes twinkle{
	0%,100%{opacity:0; transform:scale(.4) rotate(0deg);}
	45%    {opacity:var(--op, .9); transform:scale(1.05) rotate(25deg);}
	60%    {opacity:calc(var(--op, .9) * .8); transform:scale(.9) rotate(35deg);}
}

/* 흔들리며 내려오는 갈래들 — 조각마다 번갈아 줘서 같이 움직이는 티가 안 나게 한다.
   fall-a/b 는 기본 갈래(다른 데서 참조하므로 이름을 바꾸지 말 것). 계절별 키프레임:
     petal — 좌우로 넓게 흔들리며 rotateY 로 뒤집힌다(앞면 분홍·뒷면이 얇게 보인다)
     leaf  — 더 크게 흔들리고 rotateX 까지 섞어 «팔랑» 뒤집힌다, 끝에서 살짝 느려진다
     snow  — 돌지 않고 작게 흔들리며 곧게 내린다(눈은 회전이 안 보인다)
     flake — 눈송이 실루엣만 천천히 돈다 */
@keyframes fall-a{
	0%   {transform:translate3d(0,0,0) rotate(0deg);}
	50%  {transform:translate3d(26px,60vh,0) rotate(180deg);}
	100% {transform:translate3d(-10px,124vh,0) rotate(360deg);}
}
@keyframes fall-b{
	0%   {transform:translate3d(0,0,0) rotate(0deg);}
	50%  {transform:translate3d(-30px,60vh,0) rotate(-200deg);}
	100% {transform:translate3d(14px,124vh,0) rotate(-400deg);}
}
@keyframes petal-a{
	0%   {transform:translate3d(0,0,0) rotate(-10deg) rotateY(0deg);}
	25%  {transform:translate3d(34px,30vh,0) rotate(40deg) rotateY(160deg);}
	50%  {transform:translate3d(-18px,60vh,0) rotate(95deg) rotateY(340deg);}
	75%  {transform:translate3d(30px,92vh,0) rotate(150deg) rotateY(520deg);}
	100% {transform:translate3d(-12px,124vh,0) rotate(200deg) rotateY(720deg);}
}
@keyframes petal-b{
	0%   {transform:translate3d(0,0,0) rotate(12deg) rotateY(0deg);}
	25%  {transform:translate3d(-38px,31vh,0) rotate(-45deg) rotateY(-170deg);}
	50%  {transform:translate3d(20px,61vh,0) rotate(-100deg) rotateY(-350deg);}
	75%  {transform:translate3d(-34px,93vh,0) rotate(-160deg) rotateY(-540deg);}
	100% {transform:translate3d(10px,124vh,0) rotate(-220deg) rotateY(-720deg);}
}
@keyframes leaf-a{
	0%   {transform:translate3d(0,0,0) rotate(0deg) rotateX(0deg) rotateY(0deg);}
	20%  {transform:translate3d(48px,22vh,0) rotate(70deg) rotateX(40deg) rotateY(120deg);}
	45%  {transform:translate3d(-30px,52vh,0) rotate(160deg) rotateX(-30deg) rotateY(300deg);}
	70%  {transform:translate3d(40px,86vh,0) rotate(250deg) rotateX(35deg) rotateY(460deg);}
	100% {transform:translate3d(-16px,124vh,0) rotate(330deg) rotateX(0deg) rotateY(600deg);}
}
@keyframes leaf-b{
	0%   {transform:translate3d(0,0,0) rotate(0deg) rotateX(0deg) rotateY(0deg);}
	20%  {transform:translate3d(-52px,20vh,0) rotate(-80deg) rotateX(-35deg) rotateY(-110deg);}
	45%  {transform:translate3d(26px,50vh,0) rotate(-170deg) rotateX(30deg) rotateY(-290deg);}
	70%  {transform:translate3d(-44px,84vh,0) rotate(-260deg) rotateX(-40deg) rotateY(-470deg);}
	100% {transform:translate3d(18px,124vh,0) rotate(-340deg) rotateX(0deg) rotateY(-600deg);}
}
@keyframes snow-a{
	0%   {transform:translate3d(0,0,0);}
	30%  {transform:translate3d(16px,36vh,0);}
	60%  {transform:translate3d(-14px,74vh,0);}
	100% {transform:translate3d(8px,124vh,0);}
}
@keyframes snow-b{
	0%   {transform:translate3d(0,0,0);}
	30%  {transform:translate3d(-18px,37vh,0);}
	60%  {transform:translate3d(12px,75vh,0);}
	100% {transform:translate3d(-8px,124vh,0);}
}
@keyframes flake-a{
	0%   {transform:translate3d(0,0,0) rotate(0deg);}
	50%  {transform:translate3d(20px,62vh,0) rotate(90deg);}
	100% {transform:translate3d(-12px,124vh,0) rotate(180deg);}
}
@keyframes flake-b{
	0%   {transform:translate3d(0,0,0) rotate(0deg);}
	50%  {transform:translate3d(-22px,61vh,0) rotate(-100deg);}
	100% {transform:translate3d(10px,124vh,0) rotate(-200deg);}
}
/* 위치·크기·주기·지연을 전부 다르게. 음수 delay 로 화면 곳곳에서 이미 내리는 중이게 한다.
   큰 조각일수록 빨리(가까이), 작을수록 천천히(멀리) — rise-dot 과 같은 원근 규칙. */
.fall-p.f1 {left:4%; --w:14px; animation-duration:11s; animation-delay:-1s;}
.fall-p.f2 {left:11%; --w:9px;  animation-duration:15s; animation-delay:-6s;  animation-name:fall-b;}
.fall-p.f3 {left:18%; --w:17px; animation-duration:9s;  animation-delay:-12s;}
.fall-p.f4 {left:25%; --w:7px;  animation-duration:17s; animation-delay:-3s;  animation-name:fall-b;}
.fall-p.f5 {left:32%; --w:12px; animation-duration:12s; animation-delay:-9s;}
.fall-p.f6 {left:39%; --w:15px; animation-duration:10s; animation-delay:-14s; animation-name:fall-b;}
.fall-p.f7 {left:46%; --w:8px;  animation-duration:16s; animation-delay:-5s;}
.fall-p.f8 {left:53%; --w:11px; animation-duration:13s; animation-delay:-11s; animation-name:fall-b;}
.fall-p.f9 {left:60%; --w:16px; animation-duration:9s;  animation-delay:-2s;}
.fall-p.f10{left:67%; --w:6px;  animation-duration:18s; animation-delay:-8s;  animation-name:fall-b;}
.fall-p.f11{left:74%; --w:13px; animation-duration:11s; animation-delay:-15s;}
.fall-p.f12{left:81%; --w:9px;  animation-duration:14s; animation-delay:-4s;  animation-name:fall-b;}
.fall-p.f13{left:88%; --w:15px; animation-duration:10s; animation-delay:-10s;}
.fall-p.f14{left:94%; --w:7px;  animation-duration:16s; animation-delay:-7s;  animation-name:fall-b;}
.fall-p.f15{left:8%; --w:10px; animation-duration:13s; animation-delay:-16s;}
.fall-p.f16{left:29%; --w:5px;  animation-duration:19s; animation-delay:-13s; animation-name:fall-b;}
.fall-p.f17{left:57%; --w:12px; animation-duration:12s; animation-delay:-18s;}
.fall-p.f18{left:85%; --w:6px;  animation-duration:17s; animation-delay:-6s;  animation-name:fall-b;}
/* 다크에서는 조금 낮춘다 — 어두운 바탕에서 흰 눈·밝은 꽃잎이 너무 튄다.
   (원근 --op 를 낮춰서 — opacity 를 직접 쓰면 계절 규칙의 var(--op) 가 이긴다) */
:root[data-theme="dark"] .fall-p{--op:.55;}
:root[data-theme="dark"] .fall-p:nth-child(3n){--op:.35;}

/* 로고·문구 자리 — 전면 그라데이션 위에 바로 얹는다. 배경 위로 오도록 position 을 가진다. */
.login-hero{
	position:relative; z-index:1;
	padding:calc(30px + env(safe-area-inset-top)) 24px 26px;
}

.login-wrap{
	flex:1;
	padding:0 20px calc(28px + env(safe-area-inset-bottom));
	position:relative;
	z-index:2;
}
.brand-row{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:13px;
	position:relative;
	z-index:1;
}
.logo-chip{
	background:#fff;
	border-radius:16px;
	padding:15px 26px;
	box-shadow:var(--sh-1);
	display:inline-flex;
	align-items:center;
	max-width:100%;
	animation:rise .5s cubic-bezier(.2,.8,.2,1) both;
}
.logo-chip img{
	display:block;
	height:60px; width:auto; max-width:100%;
}
.brand-row .txt p{
	margin:0;
	font-size:13.5px;
	color:rgba(255,255,255,0.92);
	font-weight:700;
}
.brand-row .txt{animation:rise .5s cubic-bezier(.2,.8,.2,1) .08s both;}

/* 카드는 한 덩어리로 한 번만 올라온다 */
.login-page .card.login{animation:rise .5s cubic-bezier(.2,.8,.2,1) .12s both;}

/* 카드 머리 — 제목을 키우고 보조 문구를 붙여 위계를 준다 */
.card.login .card-title{font-size:19px; margin:0 0 4px;}
.card.login .card-sub{font-size:12.5px; color:var(--text-sub); margin:0 0 18px;}

/* 입력 중인 칸을 또렷하게 — 아이콘에 색이 들어오고 살짝 떠오른다 */
.field .input-shell{transition:transform .18s ease;}
.field .input-shell:focus-within{transform:translateY(-1px);}
.field .input-shell:focus-within > svg{stroke:var(--brand-text);}
.field input{transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;}
.field input:focus{box-shadow:0 0 0 4px rgba(120,165,10,0.15);}

/* 로그인 실패하면 카드가 한 번 흔들린다 (JS 가 .shake 를 붙였다 뗀다) */
@keyframes shake{
	10%,90%      {transform:translateX(-2px);}
	20%,80%      {transform:translateX(4px);}
	30%,50%,70%  {transform:translateX(-7px);}
	40%,60%      {transform:translateX(7px);}
}
.login-page .card.login.shake{animation:shake .5s cubic-bezier(.36,.07,.19,.97) both;}

/* 전송 중 버튼 안에서 도는 표시 */
.btn-spin{
	display:inline-block;
	width:15px; height:15px;
	margin-right:8px;
	border:2px solid rgba(255,255,255,0.45);
	border-top-color:#fff;
	border-radius:50%;
	vertical-align:-2px;
	animation:btn-spin .7s linear infinite;
}
@keyframes btn-spin{to{transform:rotate(360deg);}}
.btn-primary:disabled{opacity:.8; cursor:default;}

.foot{text-align:center; margin-top:22px; font-size:12px; color:var(--foot-text);}
/* 로그인은 전면 그라데이션 위라 회색이 안 보인다 — 반투명 흰색으로 */
.login-page .foot{color:rgba(255,255,255,0.8);}

/* ---------- 로그인 카드 선명하게 (login.jsp) ----------
   화려한 계절 배경 위에서 카드가 흐려 보이지 않게 이 화면(.login-page)에서만 글자를 한 치수 키우고
   진하게, 입력칸은 흰 바탕 + 1.5px 테두리 + 진한 자리표시자, 카드는 짙은 그림자 + 얇은 윤곽,
   로그인 버튼은 진한 초록 그라데이션(흰 글씨 대비).
   색은 변수(--lg-*)로 두고 다크에서만 값을 바꾼다 — 카드 바탕(--card-bg)은 테마를 그대로 따른다. */
.login-page{
	--lg-ink:#1f2a1c;      /* 본문·입력 글자 */
	--lg-sub:#55604f;      /* 보조 글자(부제·안내) — 흰 바탕 대비 6.5:1 */
	--lg-line:#b3bcac;     /* 입력칸 테두리 */
	--lg-ph:#8a938a;       /* 자리표시자 — 4.5:1 */
	--lg-icon:#5d8007;
}
:root[data-theme="dark"] .login-page{
	--lg-ink:#f2f4ef; --lg-sub:#b9c2b3; --lg-line:#5a6553; --lg-ph:#8a948a; --lg-icon:#9ccc3c;
}
.login-page .card.login{
	padding:28px 24px 26px;
	border:1px solid rgba(255,255,255,0.9);
	box-shadow:0 22px 48px rgba(16,36,8,0.38), 0 0 0 1px rgba(0,0,0,0.05);
}
.login-page .card.login .card-title{font-size:23px; font-weight:800; color:var(--lg-ink); letter-spacing:-0.3px;}
.login-page .card.login .card-sub{font-size:13.5px; color:var(--lg-sub); margin-bottom:20px;}
.login-page .field{margin-bottom:16px;}
.login-page .field label{font-size:14px; font-weight:800; color:var(--lg-ink); margin-bottom:7px;}
.login-page .field label .lb-or{font-size:13px; font-weight:600; color:var(--lg-sub);}
.login-page .field .input-shell > svg{stroke:var(--lg-icon); width:19px; height:19px; left:15px; stroke-width:2;}
.login-page .field input{
	background:var(--card-bg);
	border:1.5px solid var(--lg-line);
	color:var(--lg-ink);
	font-size:17px; font-weight:600;
	padding:14px 14px 14px 46px;
	letter-spacing:.2px;
}
.login-page .field input::placeholder{color:var(--lg-ph); font-weight:500;}
.login-page .field input:focus{border-color:var(--brand-dark); box-shadow:0 0 0 4px rgba(120,165,10,0.22);}
.login-page .pw-eye svg{width:21px; height:21px; stroke:var(--lg-sub);}
.login-page .field-help{font-size:13px; color:var(--lg-sub);}
.login-page .field-help b{color:var(--lg-ink);}
.login-page .chk{font-size:14.5px; font-weight:600; color:var(--lg-ink); gap:9px;}
.login-page .chk input{width:19px; height:19px;}
.login-page .auto-chk .auto-sub{font-size:12.5px; font-weight:500; color:var(--lg-sub);}
/* 자동 로그인 줄과 로그인 단추 사이 간격은 단추가 아니라 이 줄에 준다 —
   비밀번호 저장을 켜면 사이에 끼는 경고 상자(.pw-warn) 위도 같이 벌어진다. */
.login-page .auto-chk{margin-bottom:18px;}
/* 자동 로그인 글은 login.jsp 에서 한 덩어리(.auto-txt)로 묶여 있어 좁은 폰·큰 글자에서 낱말 단위로 접힌다(넓으면 한 줄). */
.login-page .auto-chk .auto-txt{min-width:0; word-break:keep-all; line-height:1.4;}
.login-page .pw-warn{font-size:12.5px; font-weight:600; color:#b95e00; background:#fff1dc; border:1px solid #f4d3a6;}
.login-page .error-box, .login-page .info-box{font-size:14px;}
.login-page .caps-warn{font-size:13px;}
/* 로그인 버튼 — 흰 글씨 대비를 위해 짙은 초록 두 톤(연두 쪽은 약 2.3:1 로 모자란다) */
.login-page .card.login .btn-primary{
	padding:16px 0; font-size:17px; letter-spacing:.2px;
	background:linear-gradient(135deg, #7fae12, #5d8007);
	box-shadow:0 8px 20px rgba(93,128,7,0.38);
	text-shadow:0 1px 1px rgba(0,0,0,0.12);
}
.login-page .card.login .btn-primary > svg{width:20px; height:20px;}

/* ---------- 홈 화면에 추가 (login.jsp #a2hsPeek · #a2hsCard · #a2hsAgain · #a2hsSheet) ----------
   로그인 카드 아래 카드: 홈 화면 그림 + 제목 + 좋은 점 세 줄 + 큰 단추 + 「이미 추가했어요」.
   바탕·글자는 로그인 카드와 같은 변수(--card-bg · --lg-*)라 다크 테마에서도 두 카드가 한 벌로 보인다.
   카드는 폰에서 스크롤해야 보이므로 첫 화면 문구 자리에 알림 한 줄(.a2hs-peek). 누구에게 보일지는 mobile-install.js 머리말.
   [hidden] 을 반드시 이기게 한다 — 아래 규칙들이 display 를 정하면 브라우저 기본 [hidden]{display:none} 이 져서 늘 보인다. */
.a2hs-peek[hidden], .a2hs-card[hidden], .a2hs-again[hidden]{display:none !important;}

/* 첫 화면 알림 — 로고 아래 문구(«언제 어디서나…») 자리. 알림이 보일 때만 그 문구를 접고 아래 여백을 줄여
   로그인 카드가 거의 같은 자리에 머물게 한다. */
body.a2hs-on .brand-row .txt{display:none;}
body.a2hs-on .login-hero{padding-bottom:12px;}
body.a2hs-on .brand-row{gap:10px;}
body.a2hs-on .logo-chip{padding:12px 24px;}          /* 로고를 살짝 줄여 알림 자리를 낸다 */
body.a2hs-on .logo-chip img{height:54px;}
.a2hs-peek{
	display:flex; align-items:center; gap:10px; max-width:100%;
	padding:6px 8px 6px 6px; border:0; border-radius:999px;
	background:rgba(255,255,255,0.96); color:#1f2a1c;
	font-family:inherit; text-align:left; cursor:pointer;
	box-shadow:0 8px 22px rgba(16,36,8,0.32), 0 0 0 1px rgba(255,255,255,0.7);
	animation:rise .5s cubic-bezier(.2,.8,.2,1) .08s both;
}
.a2hs-peek:active{transform:scale(0.98);}
.a2hs-peek > img{width:34px; height:34px; border-radius:9px; flex:none; box-shadow:0 1px 4px rgba(0,0,0,0.2);}
.a2hs-peek .tx{min-width:0;}
.a2hs-peek .tx b{display:block; font-size:15px; font-weight:800; line-height:1.25; letter-spacing:-0.2px; white-space:nowrap;}
.a2hs-peek .tx em{display:block; font-style:normal; font-size:12.5px; font-weight:600; color:#55604f; line-height:1.3; margin-top:1px; white-space:nowrap;}
.a2hs-peek > svg{
	width:28px; height:28px; flex:none; padding:6px; box-sizing:border-box;
	border-radius:50%; background:#5d8007; color:#fff;
}

/* 카드 — 로그인 카드와 같은 폭(max 400px)·같은 바탕 */
.a2hs-card{
	width:100%; max-width:400px; margin:14px auto 0; padding:20px 20px 12px; box-sizing:border-box;
	background:var(--card-bg); color:var(--lg-ink); border-radius:var(--radius-lg);
	border:1px solid rgba(255,255,255,0.9);
	box-shadow:0 18px 40px rgba(16,36,8,0.32), 0 0 0 1px rgba(0,0,0,0.05);
	animation:rise .5s cubic-bezier(.2,.8,.2,1) .18s both;
}
.a2hs-head{display:flex; align-items:center; gap:16px;}
/* 홈 화면 그림 — 폰 테두리 안에 3×3 앱 아이콘, 가운데가 실버홈. 손가락 고리(::after)가 퍼진다 */
.a2hs-phone{
	position:relative; flex:none; width:92px; height:120px; box-sizing:border-box;
	padding:20px 10px 10px; border:3px solid var(--lg-ink); border-radius:20px;
	background:linear-gradient(165deg, #e4f2cf 0%, #c3e19b 100%);
	display:grid; grid-template-columns:repeat(3, 1fr); gap:7px; align-content:start;
}
.a2hs-phone::before{
	content:""; position:absolute; top:7px; left:50%; width:22px; height:4px; margin-left:-11px;
	border-radius:4px; background:var(--lg-ink); opacity:.45;
}
.a2hs-phone i{display:block; aspect-ratio:1/1; border-radius:6px; background:rgba(255,255,255,0.75);}
.a2hs-phone i:nth-child(1){background:#f3c9c4;} .a2hs-phone i:nth-child(2){background:#c9dcf5;}
.a2hs-phone i:nth-child(3){background:#f6e3b0;} .a2hs-phone i:nth-child(4){background:#d9cff1;}
.a2hs-phone i:nth-child(6){background:#bfe6df;} .a2hs-phone i:nth-child(7){background:#f7d6e6;}
.a2hs-phone i:nth-child(8){background:#d5e3c6;} .a2hs-phone i:nth-child(9){background:#f2d2b8;}
.a2hs-phone i.me{
	position:relative; z-index:1; background:#fff; transform:scale(1.35);
	box-shadow:0 0 0 2px #5d8007, 0 4px 10px rgba(0,0,0,0.28);
	animation:a2hs-press 2.6s ease-in-out infinite;
}
.a2hs-phone i.me img{display:block; width:100%; height:100%; border-radius:6px;}
.a2hs-phone i.me::after{
	content:""; position:absolute; top:50%; left:50%; width:30px; height:30px; margin:-15px 0 0 -15px;
	border-radius:50%; border:2px solid #5d8007; opacity:0;
	animation:a2hs-ring 2.6s ease-out infinite;
}
@keyframes a2hs-press{0%,62%,100%{transform:scale(1.35);} 70%{transform:scale(1.18);} 80%{transform:scale(1.4);}}
@keyframes a2hs-ring{0%,62%{opacity:0; transform:scale(.6);} 70%{opacity:.9; transform:scale(.8);} 100%{opacity:0; transform:scale(1.7);}}
.a2hs-copy{min-width:0;}
.a2hs-tag{
	display:inline-block; padding:2px 10px; border-radius:999px; margin-bottom:6px;
	background:#eef6df; color:#4a6b06; font-size:12.5px; font-weight:800;
}
.a2hs-copy b{display:block; font-size:19px; font-weight:800; line-height:1.35; letter-spacing:-0.4px; word-break:keep-all;}
/* 좋은 점 세 줄 — 초록 동그라미 안 ✓ */
.a2hs-merits{list-style:none; margin:16px 0 0; padding:0;}
.a2hs-merits li{
	position:relative; padding:5px 0 5px 30px; font-size:15.5px; line-height:1.45;
	color:var(--lg-ink); word-break:keep-all;
}
.a2hs-merits li::before{
	content:"✓"; position:absolute; left:0; top:6px; width:21px; height:21px; border-radius:50%;
	background:#5d8007; color:#fff; font-size:12px; font-weight:900; line-height:21px; text-align:center;
}
.a2hs-merits li b{color:var(--lg-icon);}
/* 큰 단추 — 로그인 단추와 같은 초록(이 카드의 주인공) */
.a2hs-btn{
	display:flex; align-items:center; justify-content:center; gap:8px;
	width:100%; min-height:54px; margin:16px 0 0; padding:0 16px; box-sizing:border-box;
	border:0; border-radius:14px; cursor:pointer;
	background:linear-gradient(135deg, #7fae12, #5d8007); color:#fff;
	font-family:inherit; font-size:17px; font-weight:800; letter-spacing:.2px;
	box-shadow:0 8px 20px rgba(93,128,7,0.32); text-shadow:0 1px 1px rgba(0,0,0,0.12);
}
.a2hs-btn:active{transform:scale(0.985);}
.a2hs-btn > svg{width:22px; height:22px; flex:none;}
/* 「이미 추가했어요」 — 글자 단추. 흐리게 두되 손가락이 닿는 크기(44px) */
.a2hs-done{
	display:block; margin:4px auto 0; min-height:44px; padding:0 14px;
	border:0; background:none; cursor:pointer;
	color:var(--lg-sub); font-family:inherit; font-size:14.5px; font-weight:700;
	text-decoration:underline; text-underline-offset:3px;
}
/* 이미 추가한 기기 — 카드 대신 초록 배경 위 작은 줄 하나 */
.a2hs-again{
	display:block; margin:16px auto 0; min-height:40px; padding:0 12px;
	border:0; background:none; cursor:pointer;
	color:rgba(255,255,255,0.88); font-family:inherit; font-size:13.5px; font-weight:700;
	text-decoration:underline; text-underline-offset:3px;
}
/* 안내 시트의 순서 목록 — 번호 동그라미 + 큰 글씨(주 사용자가 50~60대 이상) */
.a2hs-sheet .sheet-sub b{color:var(--brand-text);}
.a2hs-steps{list-style:none; margin:0 0 6px; padding:0; counter-reset:a2hs;}
.a2hs-steps li{
	position:relative; padding:9px 0 9px 40px; font-size:15px; line-height:1.55;
	border-bottom:1px solid var(--border); counter-increment:a2hs;
}
.a2hs-steps li:last-child{border-bottom:0;}
.a2hs-steps li::before{
	content:counter(a2hs); position:absolute; left:0; top:9px;
	width:28px; height:28px; border-radius:50%; background:var(--brand); color:#fff;
	font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:center;
}
.a2hs-steps li b{color:var(--brand-text);}
.a2hs-steps li small{display:block; font-size:12.5px; color:var(--text-sub); margin-top:2px;}
/* http 안내는 두 문장(굵게)이라 조금 크게·줄 간격 넉넉히 */
.a2hs-sheet .sheet-hint{font-size:13.5px; line-height:1.6; margin-top:10px;}
.a2hs-sheet .sheet-hint b{color:var(--text-main);}
.a2hs-steps .ico{
	display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:24px; padding:0 6px;
	margin:0 4px; border-radius:7px; background:var(--surface-2); color:var(--text-main);
	font-size:15px; font-weight:800; vertical-align:-3px;
}

/* 움직임을 줄여 달라고 설정한 기기에서는 전부 끈다.
   새 애니메이션을 추가하면 여기에도 반드시 넣을 것. */
@media (prefers-reduced-motion: reduce){
	.ripple,
	.skel-line::after,
	.to-top,
	.top-banner,
	.blob,
	.top-banner .who,
	.top-banner .iconbtn,
	.top-banner .logout-btn,
	.menu-tile,
	.logo-chip,
	.brand-row .txt,
	.login-page .card.login,
	.login-page .card.login.shake,
	.login-bg,
	.orb,
	.rise-dot,
	.fall-p,
	.btn-spin,
	.a2hs-peek,
	.a2hs-card,
	.a2hs-phone i.me,
	.a2hs-phone i.me::after{
		animation:none;
	}
	/* 계절 조각은 멈추면 화면 위쪽(top:-12vh)에 걸린 채 남는다 — 아예 감춘다 */
	.fall-p{display:none;}
	.field .input-shell:focus-within{transform:none;}
	/* 멈춘 점이 화면 곳곳에 흩어져 있으면 얼룩처럼 보인다 — 아예 숨긴다
	   (orb 는 멈춰도 은은한 빛이라 그대로 둔다) */
	.rise-dot{display:none;}
}

/* ---------- 메인 화면 ---------- */
/* flex:1 로 남는 폭을 다 차지해서 옆의 로그아웃 버튼을 오른쪽 끝으로 밀어낸다.
   min-width:0 이 있어야 안쪽의 사업장명·이름이 넘칠 때 말줄임이 먹는다. */
.who{display:flex; align-items:center; gap:12px; flex:1; min-width:0;}
.who > div{min-width:0;}
.who .greet{font-size:13px; color:rgba(255,255,255,0.85); margin:0 0 2px;}
.who .comp{
	font-size:13px;
	font-weight:700;
	color:rgba(255,255,255,0.9);
	margin:0 0 3px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.who .name{
	font-size:16px;
	font-weight:800;
	margin:0;
	color:#fff;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.menu-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:24px;}
.menu-tile{
	background:var(--card-bg);
	border:1px solid var(--border);
	border-radius:var(--radius-md);
	padding:18px 16px;
	text-decoration:none;
	color:var(--text-main);
	display:flex;
	flex-direction:column;
	gap:14px;
	box-shadow:var(--sh-1);
	animation:rise .5s ease both;
	cursor:pointer;
	transition:transform .12s ease;
}
/* 누르는 동안 확실히 반응하도록 배경까지 바꾼다(축소만으로는 눈에 잘 안 띈다) */
.menu-tile:active{transform:scale(0.97); background:var(--brand-tint); border-color:var(--brand-border);}
/* 아이콘 위에 얹는 개수 배지(안 읽은 쪽지). .ico 가 기준이 되도록 position 을 준다 */
.menu-tile .ico{position:relative;}
.tile-n{
	position:absolute;
	top:-5px; right:-5px;
	min-width:19px;
	height:19px;
	padding:0 5px;
	border-radius:999px;
	background:var(--red);
	color:#fff;
	font-size:11px;
	font-weight:800;
	line-height:19px;
	text-align:center;
	box-shadow:0 0 0 2px var(--card-bg);
}
.menu-tile .ico{
	width:42px;height:42px;
	border-radius:14px;
	display:flex;align-items:center;justify-content:center;
	background:var(--brand-tint);
}
.menu-tile .ico svg{width:20px;height:20px;}
.menu-tile .label{font-size:15px; font-weight:700;}
.menu-tile .desc{font-size:12px; color:var(--text-sub); margin-top:-8px;}
.toast{
	position:fixed;
	left:50%;
	/* 하단 탭바(60px) 위로 띄운다 — .tabbar 높이를 바꾸면 여기도 같이 */
	bottom:calc(74px + env(safe-area-inset-bottom));
	transform:translateX(-50%) translateY(20px);
	background:var(--toast-bg);
	color:#fff;
	font-size:13px;
	padding:12px 18px;
	border-radius:999px;
	opacity:0;
	pointer-events:none;
	transition:all .25s ease;
	white-space:nowrap;
	box-shadow:var(--sh-2);
	z-index:60;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ---------- 공지 목록 ---------- */
.notice-item{
	display:block;
	background:var(--card-bg);
	border:1px solid var(--border);
	border-radius:var(--radius-md);
	padding:15px 16px;
	text-decoration:none;
	color:var(--text-main);
	box-shadow:var(--sh-1);
	transition:transform .12s ease;
}
.notice-item:active{transform:scale(0.98);}
.notice-item .title{
	font-size:15px;
	font-weight:700;
	line-height:1.5;
	margin-bottom:7px;
	word-break:break-word;
}
.badge-new{
	display:inline-block;
	vertical-align:2px;
	font-size:11px;
	font-weight:800;
	padding:2px 7px;
	border-radius:999px;
	background:#ff9900;
	color:#fff;
	margin-left:6px;
	letter-spacing:0.03em;
}
.notice-item .meta{display:flex; align-items:center; gap:12px; font-size:12px; color:var(--text-sub);}
.notice-item .meta span{display:inline-flex; align-items:center; gap:4px;}
.notice-item .meta svg{width:13px;height:13px;}

/* ---------- 공지 상세 ---------- */
.font-ctl{display:flex; gap:6px;}
.font-ctl button{
	/* 폭을 고정하지 않는다 — '가+' 가 '가-' 보다 넓어 고정 폭에서는 넘친다.
	   글자에 맞춰 늘어나게 두고 최소 폭만 잡으면 글꼴이 바뀌어도 안 깨진다.
	   높이는 옆의 .iconbtn(38px)과 맞춘다. */
	min-width:46px;
	height:38px;
	padding:0 10px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	white-space:nowrap;
	border-radius:10px;
	border:1px solid var(--border);
	background:var(--card-bg);
	font-family:inherit;
	font-weight:800;
	color:var(--text-main);
	cursor:pointer;
}
.font-ctl button.small{font-size:11px;}
/* 더 못 키우거나 더 못 줄이면 버튼을 꺼서 한계에 닿았음을 보인다.
   안 끄면 눌러도 아무 일이 없어 고장인지 한계인지 알 수 없다. */
.font-ctl button:disabled{opacity:.35; cursor:default;}
.font-ctl button.big{font-size:15px;}
.card .title{font-size:17px; font-weight:800; margin:0 0 12px; line-height:1.45; word-break:break-word;}
.card .meta{
	display:flex;
	flex-wrap:wrap;
	gap:6px 14px;
	font-size:12px;
	color:var(--text-sub);
	padding-bottom:16px;
	border-bottom:1px solid var(--border);
}
.card .meta span{display:inline-flex; align-items:center; gap:6px;}
.card .meta svg{width:13px;height:13px;}
.img-hint{
	display:none;
	align-items:center;
	gap:6px;
	margin:16px 0 0;
	padding:9px 12px;
	background:var(--brand-tint);
	border-radius:10px;
	font-size:12px;
	font-weight:700;
	color:var(--brand-text);
}
.img-hint.show{display:flex;}
.img-hint svg{width:14px;height:14px;flex:none;}
.content-wrap{padding-top:18px; overflow-x:auto;}
.content{font-size:15px; line-height:1.85; color:var(--text-main); word-break:break-word;}
/* 본문 HTML이 인라인으로 크기를 박아두는 경우가 많아 강제로 비율을 살린다 */
.content img{
	max-width:100% !important;
	width:auto !important;
	height:auto !important;
	display:block;
	margin:10px auto;
	border-radius:10px;
	cursor:zoom-in;
}
.content iframe, .content video, .content embed, .content object{max-width:100% !important;}
.content table{max-width:100%; border-collapse:collapse;}
.content td, .content th{border:1px solid var(--border); padding:6px 8px; font-size:0.9em;}
.content a{color:var(--brand-text); font-weight:700;}
.content p{margin:0 0 1em;}
.attach-item{
	display:flex;
	align-items:center;
	gap:10px;
	padding:11px 0;
	border-bottom:1px solid var(--border);
	text-decoration:none;
	color:var(--text-main);
	font-size:14px;
}
.attach-item:last-child{border-bottom:0; padding-bottom:2px;}
.attach-item .ico{
	width:34px;height:34px;
	border-radius:10px;
	background:var(--brand-tint);
	display:flex;align-items:center;justify-content:center;
	flex:none;
}
.attach-item .ico svg{width:16px;height:16px;}
.attach-item .fname{flex:1; min-width:0; font-weight:700; word-break:break-all; line-height:1.4;}
.attach-item .fsize{flex:none; font-size:12px; color:var(--text-sub);}
.nav{display:flex; flex-direction:column; gap:8px;}
.nav-item{
	display:flex;
	align-items:center;
	gap:10px;
	background:var(--card-bg);
	border:1px solid var(--border);
	border-radius:var(--radius-md);
	padding:13px 15px;
	text-decoration:none;
	color:var(--text-main);
	font-size:13px;
}
.nav-item:active{background:var(--brand-tint);}
.nav-item .dir{flex:none; font-weight:800; color:var(--text-sub); font-size:12px; width:46px;}
.nav-item .ntitle{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:700;}

/* 이미지 확대 보기 */
.lightbox{
	position:fixed;
	top:0; left:0; right:0; bottom:0;
	background:rgba(0,0,0,0.94);
	z-index:100;
	display:none;
}
.lightbox.open{display:block;}
.lb-stage{
	position:absolute;
	top:0; left:0; right:0; bottom:0;
	overflow:auto;
	-webkit-overflow-scrolling:touch;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:14px;
}
.lb-stage img{max-width:100%; max-height:100%; width:auto; height:auto; display:block; cursor:zoom-in;}
.lb-stage.zoom{display:block; padding:0;}
.lb-stage.zoom img{max-width:none; max-height:none; cursor:zoom-out;}
.lb-close{
	position:absolute;
	top:calc(12px + env(safe-area-inset-top));
	right:14px;
	width:42px;height:42px;
	border-radius:50%;
	border:0;
	background:rgba(255,255,255,0.18);
	color:#fff;
	font-size:20px;
	font-family:inherit;
	line-height:1;
	cursor:pointer;
	z-index:2;
}
.lb-hint{
	position:absolute;
	left:0; right:0;
	bottom:calc(18px + env(safe-area-inset-bottom));
	text-align:center;
	color:rgba(255,255,255,0.72);
	font-size:12px;
	font-weight:700;
	pointer-events:none;
	z-index:2;
}

/* ---------- 수급자 목록 ---------- */
/* 한 행 = [상세로 가는 영역 .cust-main] + [전화·문자 .cust-acts]
   바깥은 div 다. 행 전체를 <a> 로 두면 안쪽에 링크를 넣을 수 없다. */
.cust-item{
	display:flex;
	align-items:center;
	gap:10px;
	background:var(--card-bg);
	border:1px solid var(--border);
	border-radius:var(--radius-md);
	padding:12px 12px 12px 15px;
	color:var(--text-main);
	box-shadow:var(--sh-1);
}
.cust-main{
	flex:1;
	min-width:0;
	display:flex;
	align-items:center;
	gap:12px;
	text-decoration:none;
	color:inherit;
	transition:opacity .12s ease;
}
.cust-main:active{opacity:.6;}
.cust-item .info{flex:1; min-width:0;}
/* min-width:0 이 없으면 태블릿 좁은 칸에서 이름+배지가 칸 폭을 넘쳐 삐져나온다.
   이름은 길면 말줄임(…)으로 줄이고, 등급·나이 배지(flex:none)는 항상 보이게 둔다. */
.cust-item .row1{display:flex; align-items:center; gap:8px; margin-bottom:5px; min-width:0;}
.cust-item .name{font-size:15px; font-weight:800; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cust-item .meta{
	font-size:12px;
	color:var(--text-sub);
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
/* 행 오른쪽 끝 동작 버튼. 전화는 브랜드색, 문자는 중립색으로 구분해
   급할 때 잘못 누르는 걸 줄인다. */
.cust-acts{display:flex; gap:6px; flex:none;}
.rowbtn{
	width:42px; height:42px;
	border-radius:10px;
	display:flex;
	align-items:center;
	justify-content:center;
	text-decoration:none;
	flex:none;
}
.rowbtn svg{width:18px; height:18px; fill:none;}
.rowbtn:active{opacity:.55;}

/* [일정]·[부담금] — 행 오른쪽 끝의 라벨 있는 정사각 버튼. 일정=브랜드(초록, 누르면 그 수급자 당월 일정을
   레이어로 띄운다), 부담금=중립색. 전화·문자(중립 아이콘)와 구분된다. */
.cust-plan, .cust-pay{
	flex:none;
	display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
	width:44px; height:44px;
	border-radius:11px;
	font-family:inherit; font-size:10px; font-weight:800;
	cursor:pointer; text-decoration:none;
}
.cust-plan{border:1.5px solid var(--brand-border); background:var(--brand-tint); color:var(--brand-text);}
.cust-pay {border:1.5px solid var(--border);       background:var(--surface-2);  color:var(--text-main);}
.cust-plan svg, .cust-pay svg{width:18px; height:18px; stroke:currentColor; fill:none;}
.cust-plan .bl, .cust-pay .bl{line-height:1;}
.cust-plan:active, .cust-pay:active{filter:brightness(.95);}

/* 수급자 일정 레이어(오버레이). [일정] 버튼이 iframe 으로 그 수급자 당월 일정관리를 띄운다.
   탭바(50)·시트(70/80) 위로 오도록 z-index 를 높인다. */
.cust-layer{
	/* inset 단축은 iOS 14.4 이하·구형 웹뷰가 몰라서 롱핸드로 쓴다 */
	position:fixed; top:0; right:0; bottom:0; left:0; z-index:150;
	display:none; box-sizing:border-box;
	align-items:center; justify-content:center;
	padding:26px 16px;
	padding-top:max(26px, env(safe-area-inset-top,0px));
	padding-bottom:max(26px, env(safe-area-inset-bottom,0px));
	background:rgba(18,22,28,0.52);   /* 백드롭: 뒤 화면을 어둡게 덮어 "위에 뜬 창"임을 분명히 한다 */
	-webkit-tap-highlight-color:transparent;
}
.cust-layer.show{display:flex; animation:plFade .18s ease;}
@keyframes plFade{from{opacity:0;} to{opacity:1;}}
/* 실제 창(카드) — 화면을 꽉 채우지 않고 가장자리에 뒤 화면이 비치게, 둥근 모서리+그림자로 떠 있게 */
.pl-card{
	display:flex; flex-direction:column;
	width:100%; max-width:560px;
	height:100%; max-height:860px;
	background:var(--card-bg);
	border:1px solid var(--border);
	border-radius:var(--radius-lg);
	box-shadow:var(--sh-2);
	overflow:hidden;
	animation:plLayerUp .2s ease;
}
@keyframes plLayerUp{from{opacity:0; transform:translateY(14px) scale(.98);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion:reduce){.cust-layer.show, .pl-card{animation:none;}}
.pl-head{
	flex:none;
	display:flex; align-items:center; justify-content:space-between; gap:10px;
	padding:12px 14px;
	background:var(--brand); color:#fff;
}
.pl-title{font-size:16px; font-weight:800;}
.pl-close{
	flex:none; width:38px; height:38px; border:0; border-radius:10px;
	background:rgba(255,255,255,0.18); color:#fff; cursor:pointer;
	display:flex; align-items:center; justify-content:center;
}
.pl-close svg{width:20px; height:20px;}
.pl-body{flex:1; min-height:0;}
.pl-body iframe{width:100%; height:100%; border:0; display:block; background:var(--bg-page);}

/* plan.htm·selfpay.htm 이 레이어(iframe)로 열렸을 때 — 상단바가 없으니 위·옆 여백만 살짝 준다 */
body.in-layer .container{padding:10px 12px 22px;}
/* 부담금 레이어는 단일 수급자라 검색·필터·수납률(집계)은 감춘다 — 요약·목록만 남긴다.
   (요소는 그대로 두고 감추기만 — mobile-selfpay.js 가 참조하는 id 가 사라지지 않게) */
body.in-layer .rate-card,
body.in-layer .search-form,
body.in-layer .filter-row{display:none;}

/* ---------- 수급자 상세 ---------- */
.profile{display:flex; align-items:center; gap:14px;}
.profile .cust-name{font-size:20px; font-weight:800; margin:0 0 4px; display:flex; align-items:center; gap:8px;}
.profile .sub{font-size:13px; color:var(--text-sub); margin:0;}
.call-row{display:flex; gap:10px; margin-bottom:14px;}
.call-btn{
	flex:1;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:6px;
	padding:13px 0;
	border-radius:var(--radius-md);
	text-decoration:none;
	font-size:14px;
	font-weight:800;
	color:#fff;
	background:linear-gradient(135deg, var(--brand-light), var(--brand));
	box-shadow:var(--sh-brand);
}
.call-btn.sub{background:var(--card-bg); color:var(--brand-text); border:1px solid var(--border); box-shadow:none;}
.call-btn svg{width:16px;height:16px;}
/* ---------- 업무수행일지(.swj) — 제목·설명·선택지를 큼직하게 ----------
   어르신 곁에서 훑으며 적는 화면이라 다른 화면보다 글씨를 키운다.
   .swj 는 eval_swj_input / eval_swj_view 의 컨테이너에만 붙는다 —
   다른 화면의 .block-title 등에는 영향이 없다. */
.swj .block-title{font-size:17px;}
.swj .block-title .lbl-sub{font-size:12.5px;}
.swj .sheet-field label{font-size:14px;}
.swj .sheet-field label .lbl-sub{font-size:12px;}
/* 단계 안내·평가 기준 설명 — 본문 크기로 또렷하게 */
.swj-note{margin:0 2px 10px; font-size:15px; font-weight:700; line-height:1.65; color:var(--text-main); word-break:keep-all;}
/* 일상생활기능 선택지의 원문자 — 유난히 작게 보여 글자를 키운다. 글자 하나뿐이라 min-width 를 풀어
   네 칸이 항상 한 줄에 선다. .swj 를 앞에 붙인 이유: 이 절이 .score-seg 기본 규칙보다 앞에 있어서
   특이도가 같으면 뒤의 기본 규칙이 이긴다 — 한 단계 올려 둔다. */
.swj .adl-seg span{font-size:22px; padding:8px 6px;}
.swj .adl-seg label{min-width:0;}

/* 작성요령 버튼(업무수행일지 마법사 머리줄) — 서식 3쪽 작성요령을 시트로 띄운다 */
.wiz-step .guide-btn{float:right;}
.guide-btn{
	display:inline-flex; align-items:center; gap:4px;
	flex:none;
	padding:5px 11px;
	border-radius:999px;
	border:1px solid var(--brand-border);
	background:var(--brand-tint);
	color:var(--brand-text);
	font-size:12px; font-weight:800;
}
.guide-btn svg{width:13px; height:13px; flex:none;}
/* 작성요령 시트 본문 — 서식 원문 줄글 */
.guide-sheet .guide-body{padding:4px 18px 24px;}
.guide-body p{margin:0 0 10px; font-size:14px; line-height:1.7; color:var(--text-main); word-break:keep-all;}
.guide-body .g-eg{font-size:12.5px; color:var(--text-sub);}
.guide-body .g-note{font-size:12.5px; color:var(--text-sub); margin:0 0 4px;}

/* 이 어르신의 다른 화면 지름길 — [일정 보기] [평가 이력] */
.jump-row{display:flex; gap:10px; margin-bottom:14px;}
.jump-btn{
	flex:1;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:7px;
	padding:12px 0;
	border-radius:var(--radius-md);
	text-decoration:none;
	font-size:14px;
	font-weight:800;
	color:var(--text-main);
	background:var(--card-bg);
	border:1px solid var(--border);
}
.jump-btn svg{width:17px; height:17px; stroke:var(--brand); flex:none;}
.info-list{display:flex; flex-direction:column;}
.info-row{display:flex; padding:11px 0; border-bottom:1px solid var(--border); font-size:14px;}
.info-row:last-child{border-bottom:0; padding-bottom:2px;}
.info-row .k{width:92px; flex:none; color:var(--text-sub); font-weight:700;}
.info-row .v{color:var(--text-main); word-break:break-all; line-height:1.5;}
/* 값 안에서 눌러 쓰는 것들 — 전화 걸기, 지도 열기 */
.linkish{color:var(--brand-text); font-weight:700; text-decoration:none;}
.linkish:active{opacity:.6;}
.ico-inline{width:13px; height:13px; vertical-align:-2px; margin-left:2px;}
/* 값 옆에 붙는 작은 보조 버튼 (복사 / 주민번호 보기) */
.mini-btn{
	display:inline-flex;
	align-items:center;
	gap:4px;
	margin-left:6px;
	padding:3px 8px;
	border:1px solid var(--border);
	border-radius:999px;
	background:var(--input-bg);
	font-family:inherit;
	font-size:11px;
	font-weight:700;
	color:var(--text-sub);
	cursor:pointer;
	white-space:nowrap;
	vertical-align:1px;
}
.mini-btn > svg{width:12px; height:12px; flex:none;}
.mini-btn:active{background:var(--brand-tint); color:var(--brand-text);}
.memo{font-size:14px; line-height:1.7; color:var(--text-main); white-space:pre-line; word-break:break-word;}
.detail-grid{display:block;}

/* ---------- 본인부담금 ---------- */
.month-nav{display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:14px;}
.month-nav a{
	width:36px;height:36px;
	border-radius:10px;
	background:var(--card-bg);
	border:1px solid var(--border);
	display:flex;align-items:center;justify-content:center;
	text-decoration:none;
	flex:none;
}
.month-nav a svg{width:16px;height:16px;}
.month-nav select{
	font-family:inherit;
	font-size:15px;
	font-weight:800;
	color:var(--text-main);
	background:var(--card-bg);
	border:1px solid var(--border);
	border-radius:10px;
	padding:9px 6px 9px 10px;
	outline:none;
	-webkit-appearance:none;
	appearance:none;
	text-align:center;
}
.month-nav select:focus{border-color:var(--brand);}
.rate-card{
	background:var(--card-bg);
	border:1px solid var(--border);
	border-radius:var(--radius-lg);
	padding:18px 20px;
	margin-bottom:10px;
	box-shadow:var(--sh-1);
}
.rate-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px;}
.rate-head .lbl{font-size:13px; font-weight:700; color:var(--text-sub);}
.rate-head .pct{font-size:24px; font-weight:800; color:var(--brand-text);}
.rate-head .pct small{font-size:13px; margin-left:2px;}
/* 진행바 표준 — 트랙 surface-2 · 알약 라운드 · 채움은 브랜드 그라데이션 + width 전환.
   다른 진행바(wiz-bar·ing-bar·bs-bar·bc-prog)도 같은 결로 맞춰져 있다(굵기만 다르다). */
.bar{height:9px; border-radius:999px; background:var(--surface-2); overflow:hidden;}
.bar > span{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg, var(--brand-light), var(--brand)); transition:width .3s ease;}
.rate-foot{margin-top:9px; font-size:12px; color:var(--text-sub);}
.summary{display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-bottom:14px;}
.sum-card{
	background:var(--card-bg);
	border:1px solid var(--border);
	border-radius:var(--radius-md);
	padding:13px 12px;
	text-align:center;
	box-shadow:var(--sh-1);
}
.sum-card .k{font-size:11px; font-weight:700; color:var(--text-sub); margin-bottom:6px;}
.sum-card .v{font-size:15px; font-weight:800; word-break:break-all;}
.sum-card.self .v{color:var(--brand-text);}
.sum-card.unpaid .v{color:var(--orange);}
.pay-item{
	background:var(--card-bg);
	border:1px solid var(--border);
	border-radius:var(--radius-md);
	padding:15px 16px;
	box-shadow:var(--sh-1);
}
.pay-item .row1{display:flex; align-items:center; gap:8px; margin-bottom:11px;}
.pay-item .name{
	font-size:15px;
	font-weight:800;
	min-width:0;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.row1 .spacer{flex:1;}
.grade{flex:none; font-size:11px; font-weight:700; color:var(--text-sub);}
.amounts{display:flex; border-top:1px solid var(--border); padding-top:11px;}
.amt{flex:1; min-width:0;}
.amt .k{font-size:11px; font-weight:700; color:var(--text-sub); margin-bottom:3px;}
.amt .v{font-size:14px; font-weight:800;}
.amt .v.orange{color:var(--orange);}
.warn{
	margin-top:10px;
	background:var(--danger-bg);
	border:1px solid var(--danger-border);
	border-radius:10px;
	padding:8px 11px;
	font-size:12px;
	font-weight:700;
	color:var(--red);
	display:flex;
	align-items:center;
	gap:6px;
}
.warn svg{width:14px;height:14px;flex:none;}
.recv-info{margin-top:10px; font-size:12px; color:var(--text-sub); line-height:1.6;}
/* 카드 하단 버튼 줄. 수납·전화·문자가 붙으면서 4개까지 늘어나므로 줄바꿈을 허용한다 */
.actions{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px;}
.detail{display:none; margin-top:12px; border-top:1px solid var(--border); padding-top:12px;}
.detail.open{display:block;}
.detail table{width:100%; border-collapse:collapse; font-size:12px;}
.detail th{
	text-align:right;
	font-weight:700;
	color:var(--text-sub);
	padding:5px 0;
	border-bottom:1px solid var(--border);
	font-size:11px;
}
.detail th:first-child{text-align:left;}
.detail td{text-align:right; padding:7px 0; border-bottom:1px solid var(--border);}
.detail td:first-child{text-align:left; font-weight:700;}
.detail td.self{font-weight:800; color:var(--brand-text);}
.detail tr:last-child td{border-bottom:0;}
.detail .etc-title{font-size:11px; font-weight:700; color:var(--text-sub); margin:12px 0 4px;}

/* ---------- 쪽지함 ----------
   안 읽은 쪽지는 왼쪽 초록 띠 + 굵은 보낸이로 구분한다(점 하나보다 훑기 쉽다). */
.chip-n{
	display:inline-block;
	min-width:16px;
	padding:0 5px;
	margin-left:3px;
	border-radius:999px;
	background:var(--red);
	color:#fff;
	font-size:11px;
	font-weight:800;
	line-height:16px;
	text-align:center;
}
.chip.on .chip-n{background:rgba(255,255,255,0.32);}
.memo-item{
	display:block;
	background:var(--card-bg);
	border:1px solid var(--border);
	border-left:3px solid transparent;
	border-radius:var(--radius-md);
	padding:13px 15px;
	text-decoration:none;
	color:var(--text-main);
	box-shadow:var(--sh-1);
	/* 내용이 어떤 모양이어도 카드가 화면 폭을 넘지 못하게 가둔다
	   (서식 쪽지 미리보기 마크업이 깨져도 카드 밖으로 안 나간다) */
	overflow:hidden;
}
.memo-item:active{opacity:.65;}
.memo-item.unread{border-left-color:var(--brand);}
.memo-item .row1{display:flex; align-items:center; gap:6px; margin-bottom:5px;}
.memo-item .who{font-size:14px; font-weight:700; color:var(--text-main); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.memo-item.unread .who{font-weight:800;}
.memo-item .clip{flex:none; display:inline-flex; color:var(--text-sub);}
.memo-item .clip svg{width:13px; height:13px;}
.memo-item .spacer{flex:1;}
.memo-item .when{flex:none; font-size:11px; color:var(--text-sub);}
.memo-item .prev{
	display:block;
	font-size:13px;
	color:var(--text-sub);
	line-height:1.5;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.memo-item.unread .prev{color:var(--text-main);}

/* 쪽지 상세 */
.memo-head{display:flex; align-items:center; gap:12px; margin-bottom:16px;}
.memo-meta{min-width:0;}
.memo-meta .who{font-size:16px; font-weight:800; margin:0 0 3px;}
.memo-meta .when{font-size:12px; color:var(--text-sub); margin:0;}
/* 쪽지 본문은 사용자가 친 줄바꿈을 그대로 살린다 */
.memo-body{
	font-size:15px;
	line-height:1.75;
	color:var(--text-main);
	white-space:pre-wrap;
	word-break:break-word;
	border-top:1px solid var(--border);
	padding-top:16px;
}
.memo-file-note{font-size:12px; color:var(--text-sub); margin:0 0 8px;}
.memo-file{font-size:13px; color:var(--text-main); margin:0 0 4px; word-break:break-all;}
.btn-danger{
	width:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:6px;
	border:1px solid var(--danger-border);
	background:var(--danger-bg);
	border-radius:999px;
	padding:13px 0;
	font-family:inherit;
	font-size:14px;
	font-weight:800;
	color:var(--red);
	cursor:pointer;
}
.btn-danger svg{width:16px; height:16px;}
.btn-danger:active{opacity:.7;}
/* 목록 오른쪽 "쓰기" */
.btn-write{
	flex:none;
	display:inline-flex;
	align-items:center;
	gap:6px;
	padding:8px 14px;
	border-radius:999px;
	background:linear-gradient(135deg, var(--brand-light), var(--brand));
	color:#fff;
	font-size:13px;
	font-weight:800;
	text-decoration:none;
	box-shadow:var(--sh-brand);
}
.btn-write svg{width:14px; height:14px;}
.btn-write:active{opacity:.8;}
/* 상세의 답장 버튼 — .btn-primary 를 링크로 쓰므로 정렬만 맞춘다 */
.btn-reply{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:6px;
	text-decoration:none;
	margin-bottom:10px;
}
.btn-reply svg{width:16px; height:16px;}
/* 답장 화면의 원본 인용 */
.quote{
	background:var(--card-bg);
	border:1px solid var(--border);
	border-radius:var(--radius-md);
	padding:12px 15px;
	margin-bottom:14px;
}
.quote summary{
	cursor:pointer;
	font-size:13px;
	font-weight:700;
	color:var(--text-sub);
	list-style:none;
	outline:none;
}
.quote summary::-webkit-details-marker{display:none;}
.quote summary:before{content:"\25B8  ";}
.quote[open] summary:before{content:"\25BE  ";}
.quote .qmeta{font-size:12px; color:var(--text-sub); margin:12px 0 6px;}
.quote .qbody{
	font-size:13px;
	line-height:1.7;
	color:var(--text-main);
	white-space:pre-wrap;
	word-break:break-word;
	border-top:1px solid var(--border);
	padding-top:10px;
	max-height:200px;
	overflow-y:auto;
}
/* 쪽지 받는사람 고르기 — 사업장에 지정된 담당자 목록 */
.pick-title{font-size:12px; font-weight:700; color:var(--text-sub); margin:0 0 8px;}
.pick-list{display:flex; flex-direction:column; gap:6px;}
.pick-opt{display:flex; align-items:center; gap:10px; cursor:pointer;}
/* margin:0 이 중요하다 — 이 CSS 에는 전역 margin 리셋이 없어서 라디오가
   브라우저 기본 여백(크롬 위 3px·왼쪽 5px)을 달고 나온다. 그대로 두면
   동그라미가 글줄보다 살짝 아래·오른쪽으로 밀려 "약간씩 어긋나" 보인다. */
.pick-opt input{flex:none; width:18px; height:18px; margin:0; accent-color:var(--brand);}
.pick-body{
	flex:1;
	min-width:0;
	display:flex;
	align-items:center;
	gap:8px;
	border:1px solid var(--border);
	border-radius:var(--radius-md);
	background:var(--input-bg);
	padding:11px 13px;
}
/* 라디오 동그라미가 보이는 줄형 선택지는 채움 대신 테두리를 브랜드색으로
   한 겹 더 둘러 강조한다(채우면 네이티브 라디오가 배경에 묻힌다) */
.pick-opt input:checked + .pick-body{
	background:var(--brand-tint);
	border-color:var(--brand);
	box-shadow:inset 0 0 0 1px var(--brand);
}
.pick-role{
	flex:none;
	font-size:11px;
	font-weight:800;
	color:var(--brand-text);
	background:var(--card-bg);
	border-radius:999px;
	padding:3px 9px;
}
.pick-name{font-size:14px; font-weight:700; color:var(--text-main); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* 쪽지 입력칸 — .sheet-field 규칙을 쓰되 textarea 만 따로 잡는다 */
.sheet-field textarea{
	width:100%;
	background:var(--input-bg);
	border:1px solid var(--border);
	border-radius:var(--radius-md);
	color:var(--text-main);
	font-family:inherit;
	/* iOS 포커스 확대 방지 — 16px 아래로 내리지 말 것 */
	font-size:16px;
	line-height:1.6;
	padding:12px 14px;
	outline:none;
	resize:vertical;
	-webkit-appearance:none;
}
.sheet-field textarea:focus{border-color:var(--brand); background:var(--card-bg);}

/* ---------- 설정 목록 ----------
   설정이 늘어나도 스크롤이 길어지지 않게 목록 -> 개별 화면으로 나눈다. */
.menu-list{display:flex; flex-direction:column; gap:8px;}
.menu-row{
	display:flex;
	align-items:center;
	gap:12px;
	background:var(--card-bg);
	border:1px solid var(--border);
	border-radius:var(--radius-md);
	padding:14px 14px;
	text-decoration:none;
	color:var(--text-main);
	box-shadow:var(--sh-1);
}
.menu-row:active{opacity:.65;}
.menu-row .ico{
	flex:none;
	width:38px; height:38px;
	border-radius:12px;
	background:var(--brand-tint);
	color:var(--brand-text);
	display:flex; align-items:center; justify-content:center;
}
.menu-row .ico svg{width:19px; height:19px;}
.menu-row .body{flex:1; min-width:0; display:flex; flex-direction:column; gap:4px;}
.menu-row .t{font-size:15px; font-weight:800;}
.menu-row .d{font-size:12px; color:var(--text-sub); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.menu-row .arrow{flex:none; color:var(--border); display:flex;}
.menu-row .arrow svg{width:17px; height:17px;}
/* 아직 화면이 없는 줄 — 눌러 보기 전에 알 수 있게 흐리게 둔다.
   지금은 모든 줄에 화면이 있어 쓰이지 않는다(준비중 줄이 생기면 붙일 것). */
.menu-row.soon{opacity:.6; cursor:default;}

/* ---------- 설정 · 서명 입력판 ---------- */
.sign-note{font-size:12px; color:var(--text-sub); line-height:1.6; margin:0 0 12px;}
.sign-wrap{
	position:relative;
	border:1px solid var(--border);
	border-radius:var(--radius-md);
	background:#fff;          /* 서명은 서식에 인쇄되므로 다크에서도 흰 바탕 */
	overflow:hidden;
}
.sign-pad{
	display:block;
	width:100%;
	/* 높이는 아래 "서명 화면" 절에서 220px 로 정한다 */
	/* 이게 없으면 서명하는 동안 화면이 같이 스크롤된다. 반드시 유지할 것. */
	touch-action:none;
	cursor:crosshair;
}
/* 서명 위치를 알려 주는 밑줄 */
.sign-line{
	position:absolute;
	left:24px; right:24px; bottom:44px;
	height:1px;
	background:#e0e0da;
	pointer-events:none;
}
.sign-ph{
	position:absolute;
	left:0; right:0; bottom:52px;
	text-align:center;
	font-size:13px;
	color:#bdbdb6;
	pointer-events:none;
}
/* 본인 이름 워터마크(설정>서명 등록) — 흐리게 깔아 따라 그릴 수 있게 한다.
   캔버스가 아니라 뒤에 놓인 글자 층이라 저장되는 서명 PNG 에는 절대 안 들어간다.
   서명판 바탕은 다크에서도 흰색 고정이라 색도 고정값을 쓴다. 획(불투명)이
   7% 워터마크 위로 또렷이 겹쳐 보이므로 따라 그리기에 지장이 없다. */
.sign-wm{
	position:absolute;
	left:8px; right:8px;
	top:50%;
	transform:translateY(-50%);   /* 판 정가운데 */
	text-align:center;
	font-size:76px;
	font-size:clamp(48px, 22vw, 84px);
	font-weight:800;
	letter-spacing:10px;
	text-indent:10px;   /* letter-spacing 은 글자 오른쪽에만 붙어 중앙이 틀어진다 — 보정 */
	color:#1b1b1b;
	opacity:.07;
	white-space:nowrap;
	overflow:hidden;
	pointer-events:none;
}
/* 이름이 정가운데를 차지하므로 "여기에 서명" 문구는 워터마크가 있을 때만 숨긴다
   (상태변화 서명판 등 워터마크 없는 화면은 그대로 문구가 나온다) */
.sign-wm ~ .sign-ph{display:none;}
/* 파일 입력은 보이지 않게 두고 <label> 을 버튼처럼 쓴다 (기본 파일 버튼은 꾸밀 수 없다).
   display:none 이 아니라 화면 밖으로 밀어야 라벨 클릭이 안전하게 전달된다. */
.sr-only{
	position:absolute;
	width:1px; height:1px;
	margin:-1px; padding:0;
	overflow:hidden;
	clip:rect(0 0 0 0);
	white-space:nowrap;
	border:0;
}
/* 서명 화면은 판이 넓을수록 쓰기 편해 카드 여백을 줄인다 */
.sign-card{padding:16px 14px;}
.sign-pad{height:220px;}
/* 버튼이 둘(등록 서명 넣기 / 이미지 불러오기) 나란히 설 수 있어 간격을 준다 */
.sign-load{display:flex; gap:8px; margin:12px 0 0;}
/* 불러오기는 자주 쓰는 진입점이라 한 줄을 다 쓴다 */
.act.wide{flex:1; padding:12px 0; font-size:13px;}
.act.wide svg{width:15px; height:15px;}
.sign-chk{font-size:12px; margin:10px 2px 0;}
.sign-btns{display:flex; gap:8px; margin:12px 0;}
.sign-todo{
	font-size:11px;
	color:var(--text-sub);
	line-height:1.6;
	text-align:center;
	margin:12px 0 0;
}
/* ---------- 일정관리 달력 ----------
   칸은 7열 고정 격자. 일정이 있는 날에만 아래에 점을 찍는다.
   고른 날(.on)과 오늘(.today)은 표시가 겹칠 수 있어 서로 다른 방식으로 구분한다
   — 고른 날은 채운 배경, 오늘은 테두리. */
/* 직원 선택과 그 달 합계를 한 줄에 같이 둔다 — 줄 하나로 두 가지를 알려 준다 */
.plan-bar{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	margin-bottom:12px;
}
.emp-pick{min-width:0;}
/* 폭을 꽉 채우지 않고 고른 이름만큼만 차지하게 해서 화면이 가벼워 보이게 한다 */
.emp-pick select{
	max-width:100%;
	background:var(--card-bg);
	border:1px solid var(--border);
	border-radius:999px;
	color:var(--text-main);
	font-family:inherit;
	font-size:14px;
	font-weight:700;
	padding:9px 32px 9px 14px;
	outline:none;
	-webkit-appearance:none;
	appearance:none;
	background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:right 12px center;
	background-size:15px;
	text-overflow:ellipsis;
}
.plan-total{
	flex:none;
	font-size:12px;
	color:var(--text-sub);
	white-space:nowrap;
}
.plan-total b{color:var(--brand-text); font-weight:800;}
.cal{
	/* 참조 서식처럼 화면 꽉 차게 — 카드 껍데기(패딩·테두리·그림자)를 벗기고
	   격자만 남긴다. 테두리·괘선은 .cal-grid 가 그린다. */
	background:transparent;
	border:0;
	border-radius:0;
	padding:0;
	margin-bottom:14px;
	box-shadow:none;
}
/* 요일 머리줄 — 격자와 같은 7열. 열이 격자와 맞아야 한다. */
.cal-head{
	display:grid;
	grid-template-columns:repeat(7, 1fr);
	gap:1px;
	margin-bottom:5px;
}
.cal-head span{
	text-align:center;
	font-size:13.5px;
	font-weight:800;
	color:var(--text-main);
	padding:6px 0;
}
.cal-head .sun{color:var(--red);}
.cal-head .sat{color:var(--blue);}
/* 격자선 — 칸 사이 1px 틈으로 선 색이 비치고, 바깥도 같은 색 테두리로 감싼다.
   선 색은 --border 보다 진하게 따로 둔다(다크 값은 아래 테마 규칙). */
.cal-grid{
	display:grid;
	grid-template-columns:repeat(7, 1fr);
	gap:1px;
	background:#c3c8d0;
	border:1px solid #c3c8d0;
	border-radius:12px;
	overflow:hidden;
}
.cal-cell{
	border:0;
	/* 칸이 배경을 채워야 틈만 선으로 남는다 */
	background:var(--card-bg);
	padding:3px 3px 4px;
	font-family:inherit;
	cursor:pointer;
	/* 날짜(좌상단) 위, 서비스 뱃지(전체폭) 아래. 높이는 아래 블록에서 min-height 로. */
	display:flex;
	flex-direction:column;
	align-items:stretch;
	gap:3px;
	text-align:left;
	border-radius:0;
	transition:background .12s ease, filter .12s ease;
}
/* 격자 칸은 줄어들면 틈이 벌어져 보여서 눌림은 밝기로 표현한다 */
.cal-cell:active{filter:brightness(.94);}
/* 지난달·다음달 날짜 — 흐리게 채워 두고, 누르면 그 달로 넘어간다(gotoMonth) */
.cal-cell.out{background:var(--surface-2);}
.cal-cell.out .d{color:var(--placeholder); font-weight:600;}
/* 날짜 숫자 — 칸 좌상단(참조 서식과 같은 자리) */
.cal-cell .d{
	align-self:flex-start;
	padding:0 2px;
	font-size:14px;
	font-weight:800;
	color:var(--text-main);
	line-height:1.15;
}
.cal-cell .d.sun{color:var(--red);}
.cal-cell .d.sat{color:var(--blue);}
/* 휴일(hday 테이블에 있는 날)은 요일과 상관없이 빨강 */
.cal-cell .d.hol{color:var(--red);}
/* 오늘 = 연한 초록 칸(참조 이미지처럼), 고른 날 = 브랜드 틴트 + 테두리 링.
   둘이 겹치면(오늘을 고름) 고른 날 표시가 이긴다(뒤에 와서). */
.cal-cell.today{background:#e8f4e2;}
.cal-cell.today .d{color:#2f7d20;}
.cal-cell.on{background:var(--brand-tint); box-shadow:inset 0 0 0 2px var(--brand);}
.cal-cell.on .d{color:var(--brand-text);}
/* 격자선·오늘 초록의 다크/라이트 값 — data-theme 로만 가른다
   (inc_head 가 항상 박으므로 @media prefers-color-scheme 는 안 쓴다) */
:root[data-theme="dark"] .cal-grid{background:#434a56; border-color:#434a56;}
:root[data-theme="dark"] .cal-cell.today{background:#1e2c1b;}
:root[data-theme="dark"] .cal-cell.today .d{color:#8fc47c;}
:root[data-theme="light"] .cal-grid{background:#c3c8d0; border-color:#c3c8d0;}
:root[data-theme="light"] .cal-cell.today{background:#e8f4e2;}
:root[data-theme="light"] .cal-cell.today .d{color:#2f7d20;}

/* 고른 날짜 머리글 — 왼쪽 날짜, 오른쪽 건수 */
.plan-date{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	font-size:14px;
	font-weight:800;
	color:var(--text-main);
	background:var(--brand-tint);
	border-radius:var(--radius-md);
	padding:11px 15px;
	margin:0 0 12px;
}
.plan-date .n{font-size:13px; font-weight:800; color:var(--brand-text);}
/* 휴일 이름 — 달력 칸이 좁아 넣지 못한 hday_text 를 여기서 보여 준다 */
.hday-name{
	display:none;
	font-size:13px;
	font-weight:800;
	color:var(--red);
	text-align:center;
	margin:-6px 0 12px;
}
/* 일정 한 줄 — 왼쪽에 직종 칩, 가운데 시간·수급자, 오른쪽 전화 */
.plan-item{
	display:flex;
	align-items:stretch;
	gap:12px;
	background:var(--card-bg);
	border:1px solid var(--border);
	border-radius:var(--radius-md);
	padding:12px 12px 12px 0;
	overflow:hidden;
	box-shadow:var(--sh-1);
}
.plan-item .gbn{
	flex:none;
	/* 폭은 아래 "상세 줄의 왼쪽 서비스 라벨" 절에서 60px 로 정한다 */
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	background:var(--brand-tint);
	color:var(--brand-text);
	font-size:12px;
	font-weight:800;
	line-height:1.35;
	padding:10px 6px;
	margin:-12px 0;
	word-break:keep-all;
}
.plan-item .body{flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:4px;}
.plan-item .time{font-size:15px; font-weight:800; color:var(--text-main);}
/* 수급자명은 또렷하게, 급여종류는 옆에 옅게 — 한 줄에 들어가는 길이다.
   display:block 이 중요하다 — 상단 배너용 전역 .who 가 display:flex + gap 이라,
   되돌리지 않으면 "수급자 : 이름 / 전화" 조각들이 flex 아이템으로 벌어져
   글자 사이가 들쭉날쭉해진다(넓은 화면일수록 티가 난다). */
.plan-item .who{display:block; font-size:13px; color:var(--text-sub); line-height:1.45; word-break:keep-all;}
/* 전화번호는 중간에서 꺾지 않는다 — 자리가 모자라면 번호 전체가 다음 줄로 */
.plan-item .who .linkish{white-space:nowrap;}
.plan-item .emp{font-size:12px; color:var(--text-sub); line-height:1.4;}
.plan-item .rowbtn{align-self:center;}

/* ---------- 바텀 시트 ----------
   화면을 넘기지 않고 그 자리에서 입력받을 때 쓴다(본인부담금 수납처리).
   .sheet-back 과 .sheet 는 항상 한 쌍으로 열고 닫는다. */
.sheet-back{
	position:fixed;
	top:0; left:0; right:0; bottom:0;
	background:rgba(0,0,0,0.42);
	opacity:0;
	pointer-events:none;
	transition:opacity .22s ease;
	z-index:70;
}
.sheet-back.open{opacity:1; pointer-events:auto;}
.sheet{
	position:fixed;
	left:0; right:0; bottom:0;
	z-index:80;
	background:var(--card-bg);
	border-radius:24px 24px 0 0;
	padding:10px 20px calc(20px + env(safe-area-inset-bottom));
	max-height:88vh;
	overflow-y:auto;
	/* 시트 스크롤이 끝에 닿아도 터치가 뒤 페이지로 안 넘어가게 —
	   넘어가면 당겨서-새로고침이 발동해 화면이 초기화된다 */
	overscroll-behavior:contain;
	transform:translateY(100%);
	transition:transform .26s cubic-bezier(.2,.8,.2,1);
	box-shadow:var(--sh-2);
}
.sheet.open{transform:translateY(0);}
.sheet-grip{width:40px; height:4px; border-radius:999px; background:var(--grip); margin:0 auto 14px;}
.sheet-title{font-size:16px; font-weight:800; margin:0 0 4px;}
.sheet-sub{font-size:13px; color:var(--text-sub); margin:0 0 18px;}
.sheet-field{margin-bottom:14px;}
.sheet-field label{display:block; font-size:12px; font-weight:700; color:var(--text-sub); margin-bottom:6px;}
.sheet-field input,
.sheet-field select{
	width:100%;
	background:var(--input-bg);
	border:1px solid var(--border);
	border-radius:var(--radius-md);
	color:var(--text-main);
	font-family:inherit;
	/* iOS 포커스 확대 방지 — 16px 아래로 내리지 말 것 */
	font-size:16px;
	padding:12px 14px;
	outline:none;
	-webkit-appearance:none;
	appearance:none;
}
.sheet-field select{
	background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:right 12px center;
	background-size:16px;
	padding-right:38px;
}
.sheet-field input:focus,
.sheet-field select:focus{border-color:var(--brand); background:var(--card-bg);}
.sheet-hint{font-size:12px; color:var(--text-sub); margin:6px 2px 0;}
.sheet-err{
	display:none;
	background:var(--danger-bg);
	border:1px solid var(--danger-border);
	color:var(--red);
	font-size:13px;
	border-radius:var(--radius-md);
	padding:10px 12px;
	margin:0 0 12px;
}
.sheet-err.show{display:block;}
.sheet-btns{display:flex; gap:10px; margin-top:18px;}
.sheet-btns .btn-primary{flex:1; padding:14px 0; font-size:15px;}
.btn-ghost{
	flex:none;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:6px;
	border:1px solid var(--border);
	background:var(--card-bg);
	border-radius:999px;
	padding:14px 18px;
	font-family:inherit;
	font-size:14px;
	font-weight:700;
	color:var(--text-sub);
	cursor:pointer;
}
.btn-ghost > svg{width:16px; height:16px; flex:none;}
.btn-ghost:active{background:var(--surface-2);}
.btn-ghost:disabled,
.sheet-btns .btn-primary:disabled{opacity:0.55;}


/* 확인창으로 쓰는 시트는 내용이 짧아 아래쪽 여백을 조금 더 준다 */
.confirm-sheet{padding-bottom:calc(26px + env(safe-area-inset-bottom));}
.confirm-sheet .sheet-title{margin-bottom:6px; line-height:1.5;}

/* ---------- 화면 이동 표시줄 / 당겨서 새로고침 ----------
   js/mobile.js 가 만들어 붙인다. */
.navbar-progress{
	position:fixed;
	top:0; left:0;
	height:2.5px;
	width:0;
	z-index:200;
	background:linear-gradient(90deg, var(--brand-light), var(--brand));
	opacity:0;
	pointer-events:none;
}
/* 실제 진행률은 알 수 없으므로 90% 까지 천천히 차오르다 멈춘다 */
.navbar-progress.on{opacity:1; width:90%; transition:width 8s cubic-bezier(.05,.7,.1,1), opacity .1s;}
.navbar-progress.done{opacity:0; width:100%; transition:width .18s ease, opacity .3s ease .1s;}

.pull-refresh{
	position:fixed;
	top:calc(6px + env(safe-area-inset-top));
	left:50%;
	z-index:190;
	width:34px; height:34px;
	margin-top:-44px;
	border-radius:50%;
	background:var(--card-bg);
	border:1px solid var(--border);
	box-shadow:var(--sh-1);
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--text-sub);
	opacity:0;
	transform:translate(-50%, 0);
	pointer-events:none;
}
.pull-refresh svg{width:17px;height:17px;}
.pull-refresh.ready{color:var(--brand-text); border-color:var(--brand-light);}
.pull-refresh.spin svg{animation:pull-spin .7s linear infinite;}
@keyframes pull-spin{to{transform:rotate(360deg);}}

/* ---------- 누름 효과 ----------
   전역에서 -webkit-tap-highlight-color 를 껐기 때문에 브라우저 기본 반응이 없다.
   그 자리를 물결(js/mobile.js 가 .ripple 을 넣어 준다)과 "눌린 상태 유지"로 메운다.

   물결이 모서리 밖으로 새지 않으려면 대상에 position·overflow 가 있어야 한다. */
.menu-tile,
.tabbar a,
.tabbar button,
.menu-row{position:relative; overflow:hidden;}

.ripple{
	position:absolute;
	border-radius:50%;
	background:currentColor;
	opacity:.22;
	pointer-events:none;
	transform:scale(0);
	animation:ripple-out .5s ease-out forwards;
}
@keyframes ripple-out{
	to{transform:scale(1); opacity:0;}
}

/* 눌린 채로 다음 화면을 기다리는 상태.
   :active 만으로는 손을 떼는 순간 풀려서 "눌린 게 맞나" 싶은 구간이 생긴다. */
.menu-tile.pressing,
.menu-row.pressing{
	transform:scale(0.97);
	background:var(--brand-tint);
	border-color:var(--brand-border);
}
.tabbar a.pressing{color:var(--brand-text);}

/* ---------- 뼈대(스켈레톤) 로딩 ----------
   「더 보기」로 다음 쪽을 불러오는 동안 목록 아래가 비어 보이지 않게 깔아 둔다.
   응답이 200ms 넘게 걸릴 때만 나온다(js/mobile.js 의 SKEL_DELAY) — 빨리 오는데도
   깔면 깜빡이고 사라져 오히려 어수선하다.

   이 앱의 나머지 화면은 JSP 가 내용을 다 채워 보내므로 뼈대가 필요 없다.
   비동기로 채워지는 곳은 여기뿐이다. */
.skel-item{
	background:var(--card-bg);
	border:1px solid var(--border);
	border-radius:var(--radius-md);
	padding:14px 15px;
	box-shadow:var(--sh-1);
}
.skel-line{
	display:block;
	height:12px;
	border-radius:999px;
	background:var(--surface-2);
	position:relative;
	overflow:hidden;
}
.skel-line + .skel-line{margin-top:9px;}
.skel-line.w40{width:40%;}
.skel-line.w60{width:60%;}
.skel-line.w85{width:85%;}
/* 왼쪽에서 오른쪽으로 훑고 지나가는 빛 */
.skel-line::after{
	content:"";
	position:absolute;
	top:0; left:0; right:0; bottom:0;
	background:linear-gradient(90deg, transparent, var(--skel-hi), transparent);
	transform:translateX(-100%);
	animation:skel-sweep 1.2s ease-in-out infinite;
}
@keyframes skel-sweep{
	to{transform:translateX(100%);}
}

/* ---------- 맨 위로 ----------
   js/mobile.js 가 만들어 붙인다. 스크롤이 일정 이상 내려가면 나타난다.
   탭바가 있는 화면은 .above-tabbar 가 붙어 그만큼 위로 올라간다. */
.to-top{
	position:fixed;
	right:16px;
	bottom:calc(20px + env(safe-area-inset-bottom));
	z-index:45;                 /* 탭바(50)·토스트(60)·시트(70/80) 보다 아래 */
	width:44px; height:44px;
	border:1px solid var(--border);
	border-radius:50%;
	background:var(--card-bg);
	color:var(--text-main);
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	box-shadow:var(--sh-2);
	/* 평소에는 없는 셈 치고, 나타날 때만 받는다 */
	opacity:0;
	visibility:hidden;
	transform:translateY(8px);
	transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.to-top.above-tabbar{bottom:calc(74px + env(safe-area-inset-bottom));}
.to-top.show{opacity:1; visibility:visible; transform:translateY(0);}
.to-top:active{background:var(--brand-tint); color:var(--brand-text);}
.to-top svg{width:20px; height:20px;}

/* ---------- 하단 탭바 ----------
   inc_tabbar.jsp 가 .tabbar-space 와 .tabbar 를 한 쌍으로 찍는다.
   .tabbar 는 fixed 라 문서 흐름에서 빠지므로, 마지막 콘텐츠가 탭바에 가리지
   않도록 같은 높이의 .tabbar-space 를 함께 둔다. 두 높이는 반드시 같이 고친다. */
.tabbar-space{height:calc(60px + env(safe-area-inset-bottom));}
.tabbar{
	position:fixed;
	left:0; right:0; bottom:0;
	z-index:50;
	display:flex;
	background:rgba(255,255,255,0.92);
	-webkit-backdrop-filter:saturate(180%) blur(12px);
	backdrop-filter:saturate(180%) blur(12px);
	border-top:1px solid var(--border);
	padding-bottom:env(safe-area-inset-bottom);
}
/* 아직 화면이 없는 탭은 <button> 으로 두고 눌렀을 때 안내만 띄운다.
   화면이 생기면 <a href> 로 바꾸고 .soon 만 떼면 된다. */
.tabbar a,
.tabbar button{
	flex:1;
	min-width:0;
	height:60px;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:4px;
	border:0;
	background:none;
	padding:0;
	text-decoration:none;
	color:var(--text-sub);
	font-family:inherit;
	font-size:11px;
	font-weight:700;
	letter-spacing:-0.2px;
	cursor:pointer;
}
.tabbar .soon{opacity:.45;}
.tabbar svg{
	width:22px; height:22px;
	fill:none;
	stroke:currentColor;
	stroke-width:1.7;
	stroke-linecap:round;
	stroke-linejoin:round;
}
.tabbar a.on{color:var(--brand-text);}
.tabbar a.on svg{stroke-width:2.2;}
.tabbar a:active,
.tabbar button:active{background:var(--brand-tint); color:var(--brand-text);}

/* ---------- 태블릿 ----------
   폰 기준으로 만든 화면을 넓은 기기에서 그대로 두면 한 줄이 지나치게 길어져
   눈이 좌우로 크게 움직인다. 그래서 넓어지면 "칸을 늘리고", 폭이 커져도
   의미가 없는 것(버튼·바텀시트·탭바)은 "적당한 폭에서 멈춘다".

   기준점 두 개
     700px  세로로 든 태블릿 / 큰 폰 가로
     1000px 가로로 든 태블릿 이상
   ========================================================================== */
@media (min-width:700px){
	/* 목록은 전부 2단. .list 는 이미 grid 라 열 수만 바꾸면 된다
	   (공지·쪽지·일정 상세는 .list, 수급자·본인부담금은 .list.grid)
	   같은 행 카드를 같은 높이로 늘려(stretch) 아래쪽 선이 맞게 한다 — 폰(1단)에선 영향 없다. */
	.list,
	.list.grid{grid-template-columns:repeat(2, 1fr); align-items:stretch;}

	/* 메인 메뉴는 2개 -> 3개 */
	.menu-grid{grid-template-columns:repeat(3, 1fr); gap:14px;}

	/* 달력도 넓어진 만큼 날짜를 키운다 (칸 높이는 뒤쪽 "달력 칸" 절에서 70px 고정) */
	.cal-cell .d{font-size:15px;}

	/* 폭이 넓어져도 커질 이유가 없는 것들 — 가운데로 모으고 최대 폭을 둔다 */
	.btn-primary,
	.btn-danger,
	.list-btn,
	.more-row .btn-more{max-width:360px; margin-left:auto; margin-right:auto;}
	/* 평가서식 이전/저장 줄 — 저장 버튼이 위 360px 에 묶이는 순간 줄이
	   flex-start 라 버튼들이 왼쪽에 뭉친다. 묶음째 가운데로 모은다.
	   (.wiz-nav .btn-primary 가 margin:0 이라 margin:auto 가운데 정렬은 안 먹는다) */
	.wiz-nav{justify-content:center;}
	/* margin:auto 로 가운데 두려면 블록 레벨이어야 한다(button 은 기본 inline-block).
	   flex 도 블록 레벨이라 아이콘 정렬을 유지한 채 가운데로 모을 수 있다. */
	.btn-primary{display:flex;}
	.btn-reply{max-width:360px;}

	/* 바텀시트가 화면 전체 폭을 덮으면 어색하다 — 가운데 카드처럼 띄운다 */
	.sheet{
		left:50%;
		right:auto;
		width:520px;
		max-width:92vw;      /* min() 은 구형 웹뷰에 없어서 두 줄로 쓴다 */
		border-radius:24px;
		bottom:24px;
		transform:translate(-50%, calc(100% + 24px));
	}
	.sheet.open{transform:translate(-50%, 0);}

	/* 탭바도 전체 폭에 4칸을 늘리면 간격이 허전하다 */
	.tabbar{justify-content:center;}
	.tabbar a,
	.tabbar button{max-width:150px;}

	.sum-card .v{font-size:17px;}
	.detail-grid{
		display:grid;
		grid-template-columns:1fr 1fr;
		gap:14px;
		align-items:start;
		margin-bottom:14px;
	}
	.detail-grid .card{margin-bottom:0;}
}

@media (min-width:1000px){
	/* 단순 목록(.list: 공지·쪽지)만 3열까지. 수급자·본인부담금(.list.grid)은 카드에
	   이름·등급·나이 배지 + [일정][부담금] 버튼이 많아 3열이면 칸이 좁아 넘친다 —
	   2열로 둔다(위 700px 의 .list.grid 2열 규칙이 더 구체적이라 그대로 유지된다). */
	.list{grid-template-columns:repeat(3, 1fr);}

	/* 메뉴는 3개 -> 4개 */
	.menu-grid{grid-template-columns:repeat(4, 1fr);}
}

/* ---------- PC(넓은 화면) 정렬 ----------
   메인은 .container 를 안 쓰고 배너가 전폭이라, 안의 내용(인사말·로그아웃·메뉴)만
   다른 화면과 같은 1000px 기둥에 맞춰 가운데로 모은다. 1036 = 1000 + 좌우 여백 18x2 */
@media (min-width:1036px){
	.top-banner .topbar,
	.banner-content{max-width:1000px; margin-left:auto; margin-right:auto;}
}

/* ---------- PC 호버 피드백 ----------
   마우스가 있는 기기에서만 건다(hover:hover + pointer:fine) — 터치 기기에서
   hover 가 첫 탭을 먹거나 눌린 상태로 남는 문제를 피한다. */
@media (hover:hover) and (pointer:fine){
	.menu-tile, .menu-row, .cust-main, .fall-item, .attach-item{
		transition:transform .12s ease, box-shadow .12s ease;
	}
	.menu-tile:hover, .menu-row:hover, .cust-main:hover, .fall-item:hover, .attach-item:hover{
		transform:translateY(-2px);
		box-shadow:var(--sh-2);
	}
	.btn-primary:hover, .list-btn:hover, .btn-danger:hover{filter:brightness(1.05);}
	.btn-wiz-prev:hover, .btn-wiz-next:hover{border-color:var(--brand); color:var(--brand-text);}
	.iconbtn:hover, .date-pick:hover, .act:hover{background:var(--surface-2);}
	.na-chip:hover span, .na-pill:hover span, .score-seg label:hover span,
	.recog-chip:hover span, .word-chip:hover, .pick-opt:hover .pick-name{border-color:var(--brand);}
	.pick-opt:hover .pick-name{border-color:transparent; color:var(--brand-text);}
	.skin-sw:hover .sw{border-color:var(--brand);}
	.sec-edit:hover{text-decoration:underline;}
	.tabbar a:hover, .tabbar button:hover{color:var(--brand-text);}
}


/* ---------- 평가 · 상태변화기록지 ---------- */

/* 수급자를 고르는 화면 맨 위 안내 */
.lead-note{font-size:13px; color:var(--text-sub); margin:0 0 12px 2px;}

/* 누구의 기록인지 늘 보이게 두는 카드.
   수급자나 달을 잘못 고르면 기록 전체가 잘못되므로 관련 화면마다 맨 위에 둔다. */
.who-card{
	display:flex;
	align-items:center;
	gap:12px;
	background:var(--card-bg);
	border:1px solid var(--border);
	border-radius:var(--radius-md);
	padding:12px 14px;
	margin-bottom:14px;
	box-shadow:var(--sh-1);
}
.who-body{min-width:0;}
/* 이름 옆에 등급 배지가 들어간다. 이름이 길면 배지가 밀려나지 않게 flex 로 둔다. */
.who-name{display:flex; align-items:center; gap:8px; font-size:16px; font-weight:800; min-width:0;}
.who-name .badge{flex:none;}
.who-meta{display:block; font-size:12px; color:var(--text-sub); margin-top:3px;}

/* ---------- 달 고르기 ---------- */
.month-pick{
	background:var(--card-bg);
	border:1px solid var(--border);
	border-radius:var(--radius-md);
	padding:14px;
	margin-bottom:14px;
	box-shadow:var(--sh-1);
}
.month-row{display:flex; gap:8px;}
.month-row select{
	flex:1;
	min-width:0;
	font-family:inherit;
	font-size:16px;          /* 16px 아래로 내리면 iOS 가 포커스 때 확대한다 */
	padding:11px 10px;
	border:1px solid var(--border);
	border-radius:10px;
	background:var(--input-bg);
	color:var(--text-main);
}
.month-go{
	flex:none;
	padding:0 18px;
	border:0;
	border-radius:10px;
	font-family:inherit;
	font-size:14px;
	font-weight:800;
	color:#fff;
	background:linear-gradient(135deg, var(--brand-light), var(--brand));
	cursor:pointer;
}
.month-go:active{opacity:.75;}

/* ---------- 월 목록 ---------- */
.sheet-item{
	display:flex;
	align-items:center;
	gap:12px;
	background:var(--card-bg);
	border:1px solid var(--border);
	border-radius:var(--radius-md);
	padding:14px;
	color:var(--text-main);
	text-decoration:none;
	box-shadow:var(--sh-1);
	transition:opacity .12s ease;
}
.sheet-item:active{opacity:.6;}
.sheet-when{flex:none; width:52px; text-align:center;}
.sw-y{display:block; font-size:11px; color:var(--text-sub);}
.sw-m{display:block; font-size:17px; font-weight:800; color:var(--brand-text); letter-spacing:-0.3px;}
.sheet-body{flex:1; min-width:0;}

/* 5칸 중 몇 칸을 채웠는지. 숫자만 두면 한눈에 안 들어와 점을 같이 찍는다. */
.sheet-prog{display:flex; align-items:center; gap:4px; margin-bottom:5px;}
.sheet-prog .dot{
	width:8px; height:8px;
	border-radius:999px;
	background:var(--border);
	flex:none;
}
.sheet-prog .dot.on{background:var(--brand);}
.sheet-cnt{font-size:12px; font-weight:700; color:var(--text-sub); margin-left:4px;}
.sheet-remark{
	display:block;
	font-size:12px;
	color:var(--text-sub);
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

/* ---------- 한 달 시트의 주차 5칸 ---------- */
.week-list{display:grid; grid-template-columns:1fr; gap:8px; margin-bottom:4px;}
.week-item{
	display:flex;
	align-items:flex-start;
	gap:12px;
	background:var(--card-bg);
	border:1px solid var(--border);
	border-radius:var(--radius-md);
	padding:13px 14px;
	color:var(--text-main);
	text-decoration:none;
	box-shadow:var(--sh-1);
	transition:opacity .12s ease;
}
.week-item:active{opacity:.6;}
/* 안 쓴 주차는 눈에 띄되 완성된 칸보다 가라앉게 — 빠뜨린 주가 바로 보여야 한다 */
.week-item.empty-slot{
	background:var(--surface-2);
	border-style:dashed;
	box-shadow:none;
}
.week-no{
	flex:none;
	width:46px;
	font-size:13px;
	font-weight:800;
	color:var(--brand-text);
	padding-top:1px;
}
.week-item.empty-slot .week-no{color:var(--text-sub);}
.week-body{flex:1; min-width:0;}
.week-blank{font-size:13px; color:var(--placeholder);}
.week-date{display:inline-block; font-size:12px; font-weight:700; color:var(--text-sub); margin-bottom:3px;}
/* 내용은 서술형이라 길다. 시트에서는 두 줄까지만 보이고 나머지는 작성 화면에서 본다. */
.week-cont{
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
	font-size:13px;
	line-height:1.55;
	white-space:pre-wrap;
	word-break:break-all;
}
.week-meta{display:block; font-size:11px; color:var(--text-sub); margin-top:5px;}

/* 서명 미리보기. 흰 배경을 지운 PNG 라서 판을 깔지 않으면 다크 모드에서
   검은 글씨가 검은 배경에 묻힌다. 그래서 항상 흰 판 위에 얹는다. */
.week-sign{
	flex:none;
	width:52px;
	height:32px;
	border-radius:8px;
	background:#fff;
	border:1px solid var(--border);
	display:flex;
	align-items:center;
	justify-content:center;
	overflow:hidden;
}
.week-sign img{max-width:100%; max-height:100%; object-fit:contain;}

/* 수정 화면에서 이미 저장돼 있는 서명 (같은 이유로 흰 판) */
.sign-saved{
	background:#fff;
	border:1px solid var(--border);
	border-radius:var(--radius-md);
	padding:10px;
	margin-bottom:12px;
	text-align:center;
}
.sign-saved img{max-width:100%; max-height:90px; object-fit:contain;}
.sign-saved-note{display:block; font-size:11px; color:var(--text-sub); margin-top:6px;}

/* 라벨 옆 보조 설명 ("이 달에 하나" 처럼) */
.lbl-sub{font-size:11px; font-weight:600; color:var(--text-sub); margin-left:6px;}

/* 저장·삭제 결과. 오류가 아니므로 붉은색(.error-box)을 쓰지 않는다. */
.ok-box{
	display:none;
	background:var(--brand-tint);
	border:1px solid var(--brand-border);
	color:var(--brand-text);
	font-size:13px;
	font-weight:700;
	padding:10px 14px;
	border-radius:var(--radius-md);
	margin-bottom:16px;
}
.ok-box.show{display:block;}

/* 서식에 대한 안내 한 줄 */
.form-note{font-size:12px; color:var(--text-sub); line-height:1.6; text-align:center; margin:14px 0 0;}

/* 작성일 — 입력칸 + 달력 버튼.
   input[type=date] 만 두면 달력을 여는 지점이 오른쪽 끝 작은 아이콘뿐이라
   눈에 안 띈다. 손으로 치는 것도 그대로 되므로 두 방법을 같이 둔다. */
.date-row{display:flex; gap:8px; align-items:stretch;}
.date-row input[type="date"]{flex:1; min-width:0;}
.date-pick{
	flex:none;
	display:inline-flex;
	align-items:center;
	gap:5px;
	padding:0 13px;
	border:1px solid var(--border);
	border-radius:10px;
	background:var(--card-bg);
	color:var(--brand-text);
	font-family:inherit;
	font-size:13px;
	font-weight:700;
	cursor:pointer;
}
.date-pick svg{width:16px; height:16px;}
.date-pick:active{opacity:.6;}

/* 비고는 필수가 아니라서 주차 기록 아래에 둔다. 위쪽 기록과 살짝 떼어 놓는다. */
.remark-card{margin-top:16px;}

/* 되돌리기 어려운 버튼(삭제)을 두는 자리.
   저장 바로 아래에 붙여 두면 저장을 누르려다 손가락이 조금만 내려가도 삭제가
   눌린다. 확인창이 한 번 더 뜨지만 그 전에 막는 편이 낫다.
   여백만으로는 "그냥 아래 버튼"으로 보여서 구분선을 함께 둔다. */
.danger-zone{
	margin-top:44px;
	padding-top:22px;
	border-top:1px solid var(--border);
}

/* ---------- 평가 · 낙상위험 측정기록지 ---------- */

/* 측정 이력 한 줄. 이 서식은 점수가 결론이라 합계를 왼쪽에 크게 둔다. */
.fall-item{
	display:flex;
	align-items:center;
	gap:12px;
	background:var(--card-bg);
	border:1px solid var(--border);
	border-radius:var(--radius-md);
	padding:13px 14px;
	color:var(--text-main);
	text-decoration:none;
	box-shadow:var(--sh-1);
	transition:opacity .12s ease;
}
.fall-item:active{opacity:.6;}
.fall-score{
	flex:none;
	width:56px;
	height:52px;
	border-radius:12px;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	line-height:1.05;
}
.fall-score .fs-num{font-size:21px; font-weight:800;}
.fall-score .fs-unit{font-size:10px; opacity:.75;}
/* 위험도 3단계. 낮음은 초록, 높음은 주황, 아주 높음은 빨강 —
   이 프로젝트가 이미 쓰는 색 토큰을 그대로 쓴다. */
.fall-score.low{background:var(--brand-tint); color:var(--brand-text);}
.fall-score.mid{background:var(--orange-tint); color:var(--orange);}
.fall-score.high{background:var(--danger-bg); color:var(--red);}
.fall-body{flex:1; min-width:0;}
.fall-risk{display:block; font-size:14px; font-weight:800;}
.fall-risk.low{color:var(--brand-text);}
.fall-risk.mid{color:var(--orange);}
.fall-risk.high{color:var(--red);}
.fall-meta{display:block; font-size:12px; color:var(--text-sub); margin-top:4px;}

/* 측정 화면 — 항목 하나가 카드 하나 */
.fall-item-card{padding-bottom:6px;}
.fall-q{
	display:flex;
	align-items:center;
	gap:8px;
	font-size:14px;
	font-weight:800;
	margin:0 0 10px;
}
.fall-qno{
	flex:none;
	width:22px; height:22px;
	border-radius:999px;
	background:var(--brand-tint);
	color:var(--brand-text);
	font-size:11px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
}
/* 선택지 오른쪽 끝 배점. 어떤 칸이 몇 점인지 종이 양식처럼 보여야 한다. */
.pick-score{
	flex:none;
	font-size:12px;
	font-weight:800;
	color:var(--text-sub);
	margin-left:8px;
}
/* "해당 없음"은 양식의 X 칸이다. 실제 항목보다 가라앉게 둔다. */
.pick-opt.none .pick-name{color:var(--text-sub);}

/* 합계 카드 — 고를 때마다 숫자와 색이 바뀐다 */
.total-card{text-align:center;}
.total-row{margin:0; display:flex; align-items:baseline; justify-content:center; gap:4px;}
.total-num{font-size:34px; font-weight:800; letter-spacing:-1px;}
.total-unit{font-size:13px; color:var(--text-sub);}
.total-risk{margin:6px 0 0; font-size:14px; font-weight:800;}
.total-card.low .total-num, .total-card.low .total-risk{color:var(--brand-text);}
.total-card.mid .total-num, .total-card.mid .total-risk{color:var(--orange);}
.total-card.high .total-num, .total-card.high .total-risk{color:var(--red);}

/* 양식 아래쪽의 "측정결과 해석" */
.risk-guide{margin-top:16px;}
.rg-row{display:flex; align-items:center; gap:10px; margin:0 0 8px; font-size:13px;}
.rg-row:last-child{margin-bottom:0;}
.rg-band{
	flex:none;
	min-width:64px;
	text-align:center;
	font-size:11px;
	font-weight:800;
	padding:3px 8px;
	border-radius:999px;
}
.rg-band.low{background:var(--brand-tint); color:var(--brand-text);}
.rg-band.mid{background:var(--orange-tint); color:var(--orange);}
.rg-band.high{background:var(--danger-bg); color:var(--red);}

/* ---------- 평가 · 욕창위험 측정기록지(Braden) ---------- */

/* 욕창 선택지 아래 붙는 설명 — 종이 양식의 "내용" 칸 */
.bs-desc{
	display:block;
	font-size:11.5px;
	line-height:1.55;
	color:var(--text-sub);
	margin-top:4px;
	word-break:keep-all;
}

/* 아직 안 고른 항목이 남았을 때의 안내 */
.total-todo{margin:6px 0 0; font-size:12px; color:var(--text-sub);}
.total-todo:empty{display:none;}

/* 판정 5단계. 낙상은 높을수록 위험이라 3단계였지만 여기는 반대이고 5단계다.
   lv1 이 가장 안전(초록), lv5 가 가장 위험(진한 빨강). */
.fall-score.lv1, .rg-band.lv1{background:var(--brand-tint); color:var(--brand-text);}
.fall-score.lv2, .rg-band.lv2{background:var(--surface-2); color:var(--text-main);}
.fall-score.lv3, .rg-band.lv3{background:var(--orange-tint); color:var(--orange);}
.fall-score.lv4, .rg-band.lv4{background:var(--danger-bg); color:var(--red);}
/* 가장 위험한 단계만 색을 채운다 — 흐린 배경 넷으로는 마지막 단계가 안 두드러진다.
   흰 글씨 대비 7.1:1 이라 작은 글씨에도 충분하다(--red 는 4.49:1 로 모자란다). */
.fall-score.lv5, .rg-band.lv5{background:#a32c2c; color:#fff;}

.fall-risk.lv1{color:var(--brand-text);}
.fall-risk.lv2{color:var(--text-main);}
.fall-risk.lv3{color:var(--orange);}
.fall-risk.lv4{color:var(--red);}
.fall-risk.lv5{color:#a32c2c;}

.total-card.lv1 .total-num, .total-card.lv1 .total-risk{color:var(--brand-text);}
.total-card.lv2 .total-num, .total-card.lv2 .total-risk{color:var(--text-main);}
.total-card.lv3 .total-num, .total-card.lv3 .total-risk{color:var(--orange);}
.total-card.lv4 .total-num, .total-card.lv4 .total-risk{color:var(--red);}
.total-card.lv5 .total-num, .total-card.lv5 .total-risk{color:#a32c2c;}

/* 다크에서는 진한 빨강 글자가 배경에 묻힌다 — 밝은 쪽으로 올린다 */
:root[data-theme="dark"] .fall-risk.lv5,
:root[data-theme="dark"] .total-card.lv5 .total-num,
:root[data-theme="dark"] .total-card.lv5 .total-risk{color:#ff9a9a;}

/* ---------- 평가 서식 선택지 (낙상·욕창 공통) ----------
   .pick-opt / .pick-body / .pick-name 은 쪽지 화면 "받는 사람 고르기"용이라 한 줄 가로 배치 + 말줄임이다.
   평가 서식의 척도명은 훨씬 길고(욕창은 설명까지 붙는다) 그대로 두면 잘리므로
   이 화면에서만 세로로 쌓고 줄바꿈을 허용한다. */
.fall-item-card .pick-opt{align-items:flex-start;}
/* flex-start 라 라디오가 상자 맨 위에 붙는다 — 첫 줄 글자 가운데로 내린다.
   첫 줄 중심 = 상자 위 테두리 1 + 패딩 11 + 첫 줄(14px×1.45≈20px)의 절반 ≈ 22px,
   라디오(18px)의 중심이 거기 오려면 위 여백이 13px. 척도명이 여러 줄로
   접혀도 라디오는 첫 줄 옆에 남는다(가운데 정렬로 되돌리면 떠 보인다). */
.fall-item-card .pick-opt input{margin-top:13px;}
.fall-item-card .pick-body{flex-direction:column; align-items:stretch; gap:0;}
.fall-item-card .pick-name{
	white-space:normal;
	overflow:visible;
	text-overflow:clip;
	line-height:1.45;
	word-break:keep-all;
}

/* 척도명과 배점을 한 줄에 둔다. 배점을 상자 밖에 두면 폭이 좁을 때 밀려서 잘린다. */
.opt-head{display:flex; align-items:baseline; gap:8px;}
.opt-head .pick-name{flex:1; min-width:0;}
.opt-head .pick-score{flex:none; margin-left:0;}
/* 배점이 상자 안에 있으므로 선택 표시는 + .pick-body 를 거친다
   (input:checked ~ .pick-score 는 형제일 때만 먹는다) */
.pick-opt input:checked + .pick-body .pick-score{color:var(--brand-text);}

/* ============================================================
   인지선별검사(CIST) — 마법사 입력 · 결과 화면
   ============================================================ */

/* 진행 표시 — 지금 몇 단계인지 한눈에 보여야 중간에 끊겨도 어디까지 했는지 안다 */
.wiz-head{margin:2px 2px 12px;}
.wiz-bar{height:8px; border-radius:999px; background:var(--surface-2); overflow:hidden;}
.wiz-fill{height:100%; border-radius:999px; background:linear-gradient(90deg, var(--brand-light), var(--brand)); transition:width .3s ease;}
.wiz-step{margin:8px 2px 0; display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; font-size:14px;}
.wiz-step b{font-size:19px; font-weight:800; color:var(--brand-text);}
.wiz-of{font-size:12px; color:var(--text-sub);}
.wiz-name{font-weight:800;}
.wiz-hint{margin-left:auto; font-size:12px; color:var(--text-sub);}
.wiz-done-hint{margin:0 2px 10px; font-size:12.5px; font-weight:700; color:var(--orange);}

/* 검사자가 소리 내어 읽어 줄 말 */
.quote-card{border-left:4px solid var(--brand); font-size:14.5px; line-height:1.65; word-break:keep-all;}
.say-guide{margin:14px 0 2px; font-size:13px; line-height:1.6; color:var(--text-sub); word-break:keep-all;}
.say-box{margin:10px 0; padding:12px; border-radius:10px; background:var(--surface-2); font-size:15px; font-weight:700; line-height:1.6; word-break:keep-all;}
.say-box.num{font-size:20px; letter-spacing:2px; text-align:center;}

/* 서술 문항 블록 — 반응(글) + 점수(알약) */
.cq{margin-top:14px;}
.cq + .cq{border-top:1px dashed var(--border); padding-top:14px;}
.cq-t{margin:0 0 8px; font-size:13.5px; font-weight:800;}
/* 16px 아래로 내리면 iOS 가 포커스 때 화면을 확대한다 — 입력류 공통 규칙 */
.cq-resp{display:block; width:100%; box-sizing:border-box; border:1px solid var(--border); border-radius:10px; padding:11px 12px; font-size:16px; font-family:inherit; background:var(--input-bg); color:inherit;}
.cq-resp::placeholder{color:var(--placeholder);}
textarea.cq-resp{resize:vertical; line-height:1.5;}

/* 점수 알약 — 라디오를 숨기고 알약 전체를 누르게 한다 */
.score-seg{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap;}
.score-seg label{flex:1; min-width:64px; position:relative;}
.score-seg input{position:absolute; opacity:0; pointer-events:none;}
.score-seg span{display:flex; align-items:center; justify-content:center; padding:11px 6px; border:1.5px solid var(--border); border-radius:10px; font-size:14px; font-weight:800; color:var(--text-sub); background:var(--card-bg); text-align:center; word-break:keep-all;}
/* 고른 것은 채워서 보여 준다 — 틴트만으로는 고령 사용자가 "골랐는지"를 한눈에 확신하기 어렵다. */
.score-seg input:checked + span{border-color:var(--brand); background:var(--brand); color:#fff; box-shadow:var(--sh-brand);}
/* 안 고른 채 저장을 눌렀을 때 — 서버 검사 전에 여기서 먼저 보여 준다 */
.req-seg.miss{border-radius:10px; box-shadow:0 0 0 2px var(--danger-border);}
.req-seg.miss span{border-color:var(--red);}
input.miss{border-color:var(--red) !important;}

/* 1단계 — 검사장소·학력 */
.place-seg label{min-width:88px;}
.edu-row{display:flex; align-items:center; gap:8px;}
.edu-row .cq-resp{flex:1; min-width:0;}
.edu-row .edu-year{flex:none; width:84px;}
.edu-unit{flex:none; font-size:14px; color:var(--text-sub);}

/* 3단계 — 기억등록 ○표 칩 */
.word-chips{display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 2px;}
.word-chip{border:1.5px solid var(--border); border-radius:999px; background:var(--card-bg); color:var(--text-sub); font-family:inherit; font-size:14px; font-weight:700; padding:9px 14px; cursor:pointer;}
.word-chip.on{border-color:var(--brand); background:var(--brand-tint); color:var(--brand-text);}
.word-chip.on::before{content:'\25CB  '; font-weight:800;}

/* 7단계 — 기억회상·재인 */
.recall-q{display:block; margin-top:2px; font-size:12.5px; font-weight:400; color:var(--text-sub);}
.recog-box{margin-top:12px; border-top:1px dashed var(--border); padding-top:12px;}
.recog-box[hidden], #placeEtcWrap[hidden]{display:none !important;}
.recog-opts{display:flex; flex-wrap:wrap; gap:8px;}
.recog-chip{position:relative; flex:1; min-width:72px;}
.recog-chip input{position:absolute; opacity:0; pointer-events:none;}
.recog-chip span{display:flex; align-items:center; justify-content:center; padding:10px 6px; border:1.5px solid var(--border); border-radius:10px; font-size:14px; font-weight:700; color:var(--text-sub); background:var(--card-bg);}
.recog-chip input:checked + span{border-color:var(--blue); color:var(--blue); background:var(--input-bg);}
.recog-chip.none span{border-style:dashed;}

/* 9단계 — 유창성 */
.count-row{display:flex; align-items:center; gap:10px;}
.count-row input{width:110px; box-sizing:border-box; border:1px solid var(--border); border-radius:10px; padding:11px 12px; font-size:17px; font-weight:800; font-family:inherit; background:var(--input-bg); color:inherit; text-align:center;}
.count-unit{font-size:14px; color:var(--text-sub);}
.count-score{margin-left:auto; font-size:16px; font-weight:800; color:var(--brand-text);}

/* 문항 카드 안의 채점 기준·안내 글 */
.crit-note{margin:8px 0 0; font-size:12.5px; line-height:1.55; color:var(--text-sub); word-break:keep-all;}

/* 그림 문항 안내 — 그림은 화면에 없고 별도 출력물로 보여 준다 */
.pic-note{margin:10px 0 0; padding:10px 12px; border-radius:10px; background:var(--orange-tint); color:var(--orange); font-size:12.5px; font-weight:700; line-height:1.5; word-break:keep-all;}

/* 결과요약표 */
.sum-table{width:100%; border-collapse:collapse;}
.sum-table th{padding:9px 2px; text-align:left; font-size:14px; font-weight:700; color:var(--text-sub); border-bottom:1px solid var(--surface-2);}
.sum-table td{padding:9px 2px; text-align:right; font-size:14px; border-bottom:1px solid var(--surface-2);}
.sum-table td b{font-size:16px; font-weight:800;}
.sum-max{color:var(--text-sub); font-size:12.5px;}
.sum-total th, .sum-total td{border-bottom:0; padding-top:12px;}
.sum-total th{color:inherit; font-weight:800;}
.sum-total td b{font-size:20px; color:var(--brand-text);}

/* 마법사 아래 버튼 — 이전/다음(작게) + 저장(크게).
   완료본 수정에서는 저장 버튼이 DOM 맨 앞이라(엔터 제출 대비) order 로 순서를 맞춘다. */
.wiz-nav{display:flex; gap:10px; margin-top:16px; align-items:stretch;}
.btn-wiz-prev, .btn-wiz-next{flex:none; display:flex; align-items:center; justify-content:center; gap:3px; min-width:76px; padding:0 12px; border:1.5px solid var(--border); border-radius:999px; background:var(--card-bg); color:var(--text-sub); font-size:15px; font-weight:800; text-decoration:none; font-family:inherit; cursor:pointer;}
/* 화살표는 글자보다 한 톤 흐리게 — 방향만 알려주면 되고 글귀를 이겨선 안 된다 */
.btn-wiz-prev > svg, .btn-wiz-next > svg{width:16px; height:16px; flex:none; opacity:.75;}
.wiz-nav .btn-wiz-prev{order:1;}
.wiz-nav .btn-primary{flex:1; margin:0; order:2;}
.wiz-nav .btn-wiz-next{order:3;}

/* 목록 — 작성중 표시 */
.fall-score.ing{background:var(--surface-2); color:var(--text-sub);}
.fall-risk.ing{color:var(--text-sub);}
.ing-mark{color:var(--orange); font-weight:700;}

/* 결과 화면 */
.cist-status .cist-meta{margin:8px 0 0; font-size:12.5px; color:var(--text-sub);}
/* .btn-primary 가 flex 라 여기서 display 를 다시 정하면 아이콘 정렬이 깨진다 */
.cist-resume{text-align:center; text-decoration:none; box-sizing:border-box; margin-top:14px;}
.total-risk.low{color:var(--brand-text);}
.total-risk.high{color:var(--red);}
.vsec .block-title{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;}
.sec-pts{font-size:12.5px; font-weight:700; color:var(--text-sub);}
.sec-edit{margin-left:auto; font-size:13px; font-weight:700; color:var(--blue); text-decoration:none;}
.vrow{display:flex; flex-wrap:wrap; gap:2px 10px; padding:9px 0; border-top:1px dashed var(--surface-2);}
.vrow:first-of-type{border-top:0;}
.vl{flex:1; min-width:0; font-size:13.5px; font-weight:700; color:var(--text-sub);}
/* 값 자리 — 병원명·기타 글처럼 긴 서술이 올 수 있다. max-width 가 없으면
   flex:none 이라 줄어들지 않고 화면 오른쪽 밖으로 밀려 나간다. */
.vscore{flex:none; max-width:100%; font-size:13.5px; font-weight:800; word-break:break-all;}
.vresp{width:100%; font-size:13px; color:var(--text-sub); word-break:break-all;}

/* ---------- CIST 검사지 사진 (5·6단계 입력 카드 + 결과 화면) ---------- */

/* 입력 — 붙이기 전: 점선 큰 단추 */
.att-add{display:flex; flex-direction:column; align-items:center; gap:8px; width:100%; padding:22px 12px; border:1.5px dashed var(--border); border-radius:12px; background:var(--input-bg); color:var(--text-sub); font-size:14.5px; font-weight:700; font-family:inherit; cursor:pointer;}
.att-add svg{width:30px; height:30px;}
.att-note{margin:10px 2px 0; font-size:13px; font-weight:700; color:var(--brand-text);}
/* 입력 — 붙인 뒤: 미리보기 + 단추 둘. 사진 바탕은 다크에서도 흰색 —
   종이 검사지를 찍은 사진이라 어두운 바탕에 뜨면 더 어색하다. */
.att-thumb{display:block; width:100%; max-height:340px; object-fit:contain; border:1px solid var(--border); border-radius:12px; background:#fff;}
.att-btns{display:flex; gap:8px; margin-top:10px;}
.att-btn{flex:1; padding:11px 0; border:1.5px solid var(--border); border-radius:10px; background:var(--card-bg); color:var(--text-main); font-size:14px; font-weight:700; font-family:inherit; cursor:pointer;}
.att-btn.danger{color:var(--red);}

/* 결과 화면 — 영역 카드 안 썸네일. 누르면 원본을 새 창으로 연다 */
.vatt{display:block; margin-top:10px; text-decoration:none;}
.vatt-img{display:block; width:100%; max-height:300px; object-fit:contain; border:1px solid var(--border); border-radius:12px; background:#fff;}
.vatt-cap{display:block; margin-top:6px; font-size:12.5px; font-weight:700; color:var(--blue); text-align:center;}

/* ============================================================
   욕구사정 기록지(재가용) — 체크 서식 (점수 없음)
   ============================================================ */

/* 섹션 제목·안내 */
.na-sectitle{margin:4px 2px 10px; font-size:16px; font-weight:800;}
.na-secnote{margin:-4px 2px 12px;}
.na-lead{margin-bottom:10px;}
.na-cat{margin:16px 4px 6px; font-size:12.5px; font-weight:800; color:var(--brand-text); letter-spacing:1px;}
.na-group .na-name{margin:0 0 2px; font-size:14.5px; font-weight:800;}
/* 입력 방식 배지 — 체크·선택(초록 계열) / 서술(파랑 계열) */
.na-type{display:inline-block; vertical-align:2px; margin-left:6px; padding:2px 8px; border-radius:999px; background:var(--brand-tint); color:var(--brand-text); font-size:10.5px; font-weight:800; letter-spacing:0;}
.na-type.txt{background:var(--input-bg); color:var(--blue); border:1px solid var(--border);}

/* 여러 개 체크 — 칩. 켜지면 체크 표시가 붙는다. */
.na-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
.na-chip{position:relative; display:block;}
.na-chip input{position:absolute; opacity:0; pointer-events:none;}
.na-chip span{display:flex; align-items:center; padding:9px 13px; border:1.5px solid var(--border); border-radius:999px; font-size:14px; font-weight:700; color:var(--text-sub); background:var(--card-bg); word-break:keep-all;}
.na-chip input:checked + span{border-color:var(--brand); background:var(--brand-tint); color:var(--brand-text);}
.na-chip input:checked + span::before{content:'\2713  '; font-weight:800;}
/* "있음" 같은 머리 체크는 도드라지게 */
.na-chip.head span{border-style:solid; font-weight:800;}
.na-chip.head input:checked + span{background:var(--brand); color:#fff; border-color:var(--brand);}

/* 하나만 고르기 — 알약. 다시 누르면 해제된다(JS). */
.na-pills{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
.na-pill{position:relative; flex:1; min-width:64px;}
.na-pill input{position:absolute; opacity:0; pointer-events:none;}
.na-pill span{display:flex; align-items:center; justify-content:center; padding:10px 8px; border:1.5px solid var(--border); border-radius:10px; font-size:13.5px; font-weight:700; color:var(--text-sub); background:var(--card-bg); text-align:center; word-break:keep-all; line-height:1.4;}
.na-pill input:checked + span{border-color:var(--brand); background:var(--brand); color:#fff;}
/* 있음/없음 두 칸(335차) — 없음은 회색으로 눌러 둔다(점수 없는 선택) */
.na-yn .na-pill.no input:checked + span{border-color:var(--text-sub); background:var(--text-sub);}

/* 괄호 글·병원명 입력 */
.na-txt{margin-top:8px;}
.na-txt2{margin-top:8px;}
.na-sublbl{margin:12px 0 0; font-size:13px; font-weight:800; color:var(--text-sub);}
.na-sub[hidden], .na-nums[hidden], .na-txt[hidden]{display:none !important;}

/* 숫자 입력 줄 (키·체중, 아들·딸, 약복용 횟수) */
.na-nums{display:flex; align-items:center; flex-wrap:wrap; gap:6px 8px; margin-top:10px;}
.na-numlbl{font-size:13.5px; font-weight:700; color:var(--text-sub);}
.na-num{width:76px; box-sizing:border-box; border:1px solid var(--border); border-radius:10px; padding:10px 8px; font-size:16px; font-weight:800; font-family:inherit; background:var(--input-bg); color:inherit; text-align:center;}
.na-numunit{font-size:13.5px; color:var(--text-sub); margin-right:6px;}

/* 목록 — 완료 동그라미 / 지난 기록 복사 버튼 */
.fs-done{font-size:13px; font-weight:800;}
.list-btn.ghost{background:var(--card-bg); color:var(--brand-text); border:1.5px solid var(--brand-border); box-shadow:none; margin-top:10px;}
/* button 으로 쓴 list-btn — a 와 달리 block 이어도 저절로 안 늘어나고 글꼴도 물려받지 않는다 */
button.list-btn{width:100%; box-sizing:border-box; font-family:inherit; font-size:14px; cursor:pointer; line-height:1.4; word-break:keep-all;}
/* 급여명세서 문자발송 — 세부내역(채움)과 위계를 나눈다. 주 동작은 명세서를 보는 것이고
   문자는 보조라 테두리형으로 둔다. 누르는 중(aria-busy)에는 흐리게 잠근다. */
.ps-sms-btn{background:none; color:var(--brand-text); box-shadow:inset 0 0 0 1.5px var(--brand-border);}
.ps-sms-btn[aria-busy="true"]{opacity:.55; pointer-events:none;}
/* 미마감 — 눌리지 않는다. 흐리고 회색으로, "지금은 안 됨"이 보이게. */
.ps-sms-btn:disabled{color:var(--text-sub); box-shadow:inset 0 0 0 1.5px var(--border); opacity:.6; cursor:not-allowed;}
/* 본인부담금 문자발송 — 문서 종류 선택 시트의 세 버튼(세로 목록: 글자가 길어 가로는 좁다) */
.sms-doc-btns{display:flex; flex-direction:column; gap:9px; margin-top:6px;}
.sms-doc-btns .doc-btn{display:flex; flex-direction:column; align-items:flex-start; gap:2px;
	padding:13px 15px; border:1.5px solid var(--border); border-radius:13px;
	background:var(--card-bg); cursor:pointer; font-family:inherit; text-align:left;}
.sms-doc-btns .doc-btn:hover{border-color:var(--brand-light); background:var(--brand-tint);}
.sms-doc-btns .doc-btn b{font-size:15px; color:var(--text-main);}
.sms-doc-btns .doc-btn span{font-size:12px; color:var(--text-sub);}
/* 목록 줄의 [문자] 액션 버튼 — 상세/수납과 같은 .act 톤 */
.pay-item .act.js-smsbtn{color:var(--brand-text);}

/* 수급자 일정표 문자발송 묶음 — 수가 체크 + 버튼 */
.plan-sms{margin:10px 0 4px;}
.plan-sms .list-btn{margin-top:8px;}
.plan-sms-suga{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--text-sub); padding:2px 2px;}
.plan-sms-suga input{width:17px; height:17px; accent-color:var(--brand);}
/* 설정 > 테마 색상 — 색 견본 격자 (12종이라 세로 목록 대신 3열 격자다).
   견본 색은 마크업 인라인(style)로 준다: 스킨 정의(mobile.css)·주소창 색(inc_head)과
   달리 여기는 "그 스킨의 색"을 현재 스킨과 무관하게 보여줘야 해서 변수로 못 쓴다. */
.skin-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:10px;}
.skin-sw{position:relative; display:block;}
.skin-sw input{position:absolute; opacity:0; pointer-events:none;}
.skin-sw .sw{display:flex; flex-direction:column; align-items:center; gap:7px; padding:13px 6px 11px; border:1.5px solid var(--border); border-radius:12px; background:var(--card-bg); cursor:pointer;}
.skin-sw .dot{display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; color:#fff; font-size:16px; font-weight:800; box-shadow:inset 0 0 0 2px rgba(255,255,255,0.4), 0 2px 5px rgba(0,0,0,0.22);}
.skin-sw .nm{font-size:12.5px; font-weight:700; color:var(--text-sub); display:flex; align-items:baseline; gap:3px;}
.skin-sw .nm small{font-size:10px; font-weight:700; color:var(--placeholder);}
/* 고른 것 — 테두리에 지금 스킨 색이 돌고 점에 체크가 찍힌다 */
.skin-sw input:checked + .sw{border-color:var(--brand); background:var(--brand-tint);}
.skin-sw input:checked + .sw .nm{color:var(--brand-text);}
.skin-sw input:checked + .sw .dot::after{content:'\2713';}

/* ---------- 원본 양식 미리보기 (/mobile/eval_form.htm) ----------
   HWP/PDF 원본을 쪽 단위 PNG(images/mobile/forms/)로 그대로 보여 준다.
   종이라서 **다크 모드에서도 흰 바탕** — 변수 대신 고정색을 쓴다. */
.org-pages img{display:block; width:100%; margin-bottom:12px; border:1px solid #c9c9c4; border-radius:10px; background:#fff;}

/* 서식 진입 화면의 미리보기 버튼 */
.form-preview{display:inline-flex; align-items:center; gap:6px; margin:0 0 14px; padding:8px 14px; border:1.5px solid var(--brand-border); border-radius:999px; background:var(--brand-tint); color:var(--brand-text); font-size:13px; font-weight:700; text-decoration:none;}

/* 설정 — 로그아웃 줄(버튼이라 a 와 달리 글꼴·폭을 물려받지 않는다) + 앱 정보 */
button.menu-row{width:100%; font-family:inherit; font-size:inherit; text-align:left; cursor:pointer;}
.menu-out .t{color:var(--red);}
.menu-out .ico{color:var(--red);}
.app-info{margin:18px 2px 0; text-align:center; font-size:12px; color:var(--foot-text);}

/* 로그인 — 자동 로그인 줄 (.chk.off 흐림은 기존 규칙을 그대로 쓴다) */
.auto-chk{margin-top:10px;}
.auto-chk .auto-sub{font-size:11.5px; color:var(--placeholder);}

/* 작성중 기록이 있어 불러오기 버튼을 숨겼을 때의 안내.
   맨글자로 두면 바로 아래 "기록 N회"와 한 덩어리로 보여서 상자로 구분한다
   (목록의 작성중 표시와 같은 주황 계열). */
.copy-hint{margin:10px 0 18px; padding:11px 13px; border-radius:10px; background:var(--orange-tint); color:var(--orange); font-size:12.5px; font-weight:700; line-height:1.55; word-break:keep-all;}

/* 결과 화면 — 체크 요약 */
.vrow-multi{display:block;}
.vrow-multi .vl{display:block; margin-bottom:6px;}
.na-vchips{display:flex; flex-wrap:wrap; gap:6px;}
/* keep-all 만 두면 띄어쓰기 없는 긴 괄호 글("기타 · 긴글...")을 못 끊어
   칩이 화면 밖으로 나간다 — overflow-wrap:anywhere 로 넘칠 때만 끊는다 */
.na-vchip{display:inline-flex; align-items:center; max-width:100%; padding:5px 10px; border-radius:999px; background:var(--brand-tint); color:var(--brand-text); font-size:12.5px; font-weight:700; word-break:keep-all; overflow-wrap:anywhere;}
.na-vchip.head{background:var(--brand); color:#fff;}
.na-vempty{margin:8px 0 0; font-size:13px; color:var(--text-sub);}
.na-vop{margin:10px 0 0; padding:10px 12px; border-radius:10px; background:var(--surface-2); font-size:13.5px; line-height:1.6; white-space:pre-wrap; word-break:break-all;}
.na-vop.final{font-size:14px;}
.na-voplbl{display:block; margin-bottom:4px; font-size:12px; font-weight:800; color:var(--text-sub);}
/* 설정 > 테마 색상 견본 — 넓은 화면에서 3열이면 카드가 넓적해진다.
   (주의: .skin-grid 기본 정의보다 뒤여야 이긴다 — 같은 특이도라 순서 싸움. 위로 옮기지 말 것.) */
@media (min-width:700px){
	.skin-grid{grid-template-columns:repeat(4, 1fr);}
}
@media (min-width:1000px){
	.skin-grid{grid-template-columns:repeat(6, 1fr);}
}

/* ==========================================================================
   인쇄 미리보기 화면 (eval_fall_print / eval_bedsore_print / eval_cist_print /
   eval_need_print)

   네 서식이 같은 껍데기를 쓰므로 여기 한곳에 둔다. 각 JSP 에는 그 서식의
   **좌표**만 남긴다.

   보이는 것을 종이처럼 만드는 것이 요점이다 — 어두운 바탕 위에 흰 장, 장마다
   그림자와 쪽 번호, 위에는 고정 도구막대. 그래야 "지금 보는 것이 곧 인쇄물"
   이라는 게 한눈에 전해진다.

   **여기 있는 것은 전부 화면 장식이라 인쇄에는 하나도 안 나간다.** 각 JSP 의
   @media print 가 `.container > *:not(.form-paper)` 로 도구막대·안내문을 지우고,
   아래 @media print 블록이 종이 장식(그림자·쪽번호·바탕)을 되돌린다.
   ========================================================================== */

/* 바탕을 한 톤 어둡게 — 흰 종이가 떠 보이게 하려는 것이다 */
body.pv-body{background:var(--surface-2);}
:root[data-theme="dark"] body.pv-body{background:#0e0f10;}

/* ---------- 위쪽 고정 도구막대 ---------- */
/* 인쇄 버튼 색 — **테마 색상(스킨)을 쓰지 않는다.**
   스킨이 12종이라 브랜드색으로 두면 어떤 스킨에서는 다른 초록·파랑 버튼과
   똑같이 보여 "이게 인쇄 버튼인지" 구분이 안 된다.
   그래서 스킨과 무관한 먹색으로 고정한다 — 인쇄라는 뜻과도 맞고, 12종 어느
   스킨에서도 절대 겹치지 않는다. 다크에서는 뒤집어 밝은 버튼으로 쓴다. */
:root{
	--pv-ink:#31373c;
	--pv-ink-on:#ffffff;
	--pv-ink-hover:#454c52;
}
:root[data-theme="dark"]{
	--pv-ink:#e9ecee;
	--pv-ink-on:#1a1c1e;
	--pv-ink-hover:#ffffff;
}
.pv-bar{
	position:-webkit-sticky;   /* iOS 12 이하 */
	position:sticky;
	top:0;
	z-index:30;
	margin:0 0 8px;
	padding:10px;
	background:var(--card-bg);
	border:1px solid var(--border);
	border-radius:var(--radius-md);
	box-shadow:var(--sh-1);
}
/* 버튼 글자가 "낙상위험 측정기록지 인쇄"처럼 길어서 한 줄을 통째로 쓴다 */
.pv-bar .pv-print{
	display:flex;
	width:100%;
	align-items:center;
	justify-content:center;
	gap:8px;
	padding:13px 14px;
	border:0;
	border-radius:11px;
	background:var(--pv-ink);
	color:var(--pv-ink-on);
	font-family:inherit;
	font-size:15px;
	font-weight:800;
	line-height:1.3;
	word-break:keep-all;
	cursor:pointer;
	box-shadow:0 10px 20px -12px rgba(20,22,24,0.55);
}
.pv-bar .pv-print svg{
	flex:none;
	width:18px; height:18px;
	fill:none;
	stroke:currentColor;
	stroke-width:1.9;
	stroke-linecap:round;
	stroke-linejoin:round;
}
@media (hover:hover) and (pointer:fine){
	.pv-bar .pv-print:hover{background:var(--pv-ink-hover);}
}
/* 버튼 아래 설명 — 종이 규격과 장수 */
.pv-bar .pv-meta{
	display:block;
	margin:9px 2px 1px;
	font-size:12.5px;
	line-height:1.5;
	color:var(--text-sub);
	word-break:keep-all;
}
.pv-bar .pv-meta b{color:var(--text-main); font-size:13px;}

/* PC(새 창)에서 연 인쇄 미리보기 — eval_*_print.jsp 가 pc=1 일 때 .pc 를 붙인다.
   버튼이 [인쇄]·[닫기] 둘이라 한 줄에 반반으로 놓는다. 설명(.pv-meta)은 그 아래 줄로
   내려간다(flex-basis:100%).
   모바일은 버튼이 하나이고 글자가 길어("낙상위험 측정기록지 인쇄") 한 줄을 통째로
   쓰는 편이 낫다 — 그래서 위 기본값은 건드리지 않고 .pc 에서만 바꾼다. */
.pv-bar.pc{display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.pv-bar.pc .pv-print{flex:1 1 0; width:auto; min-width:0;}
.pv-bar.pc .pv-meta{flex:1 0 100%; margin:0 2px 1px;}
/* 닫기는 보조 동작이라 테두리만 준다(인쇄가 주 동작인 것이 보이게) */
.pv-bar.pc .pv-close{
	background:transparent;
	color:var(--text-main);
	box-shadow:inset 0 0 0 1px var(--border);
}
@media (hover:hover) and (pointer:fine){
	.pv-bar.pc .pv-close:hover{background:var(--surface-2);}
}

/* ---------- 종이 ---------- */
/* 쪽 번호를 얹을 자리를 위쪽에 비워 둔다 */
.pv-stack .form-paper{margin-top:26px;}
.pv-stack .form-paper:first-of-type{margin-top:20px;}
.pv-stack .form-paper-bg{
	border:0;
	border-radius:2px;
	box-shadow:var(--sh-2), 0 0 0 1px rgba(0,0,0,0.07);
}
/* 쪽 번호 — 요소를 새로 만들지 않고 ::before 로 그린다.
   .container 의 인쇄 규칙이 `:not(.form-paper)` 로 자식을 지우기 때문에
   여기에 <span> 을 더하면 인쇄에서 사라질 뿐 아니라 구조도 흐트러진다. */
.pv-stack .form-paper::before{
	content:attr(data-page);
	position:absolute;
	right:2px;
	top:-19px;
	font-size:11.5px;
	font-weight:800;
	letter-spacing:0.02em;
	color:var(--text-sub);
}

/* ---------- 양식 위의 작성자 서명 ----------
   서명이 있는 서식은 전부 이 규칙을 쓴다 — 서식마다 다른 것은 자리와 크기뿐이라 그 넷만 인라인 style 로 준다.
   쓰는 법 (자리·크기는 그 양식에서 재서 넣는다):
       <c:if test="${not empty xxx.sign_file}">
           <span class="pv-sign-box" style="left:87.646%; top:11.483%; width:9.917%; height:1.680%;">
               <img class="pv-sign" src="/mobile/eval_xxx_sign.htm?xx_no=${...}" alt="작성자 서명">
           </span>
       </c:if>
   자리는 left/top 이 판의 한가운데다(translate -50%,-50%). width/height 는 서명칸 안쪽에서
   작성자 이름 자리를 뺀 나머지로 잡되, 괘선을 덮지 않게 안쪽으로 물릴 것.
   서명이 안 보이게 되는 원인 셋을 여기서 막는다:
   (1) 양식이 그 자리에 "서명 또는 (인)" 을 인쇄해 두어 투명 배경의 획과 뒤엉킨다
       -> 흰 판으로 덮고 그 위에 그린다(종이에 사인할 때도 그 글자 위에 겹쳐 쓴다).
   (2) 서명 PNG 는 획이 캔버스 세로의 절반쯤만 채운다(사람이 서명판 가운데에 쓴다)
       -> scale(1.5) 로 여백만 걷어낸다. 판이 넘치는 부분을 자르므로 더 키우면 칸 끝까지 꽉 채워 쓴 서명이 잘린다.
   (3) 작게 줄이면 붓 굵기 2.2px(mobile-sign.js)의 얇은 획이 1px 아래로 내려가며 알파가 옅어진다 —
       contrast/brightness 로는 안 살아난다 -> 0 오프셋 그림자 세 번으로 알파를 겹친다(2겹은 연하고 4겹은 차이 없음).
   print-color-adjust 는 인쇄할 때 브라우저가 흰 판과 획을 옅게 만드는 것을 막는다. */
.pv-sign-box{
	position:absolute;
	transform:translate(-50%,-50%);
	background:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
	overflow:hidden;
	-webkit-print-color-adjust:exact;
	print-color-adjust:exact;
}
.pv-sign{
	width:100%;
	height:100%;
	object-fit:contain;
	transform:scale(1.5);
	filter:drop-shadow(0 0 0 #000) drop-shadow(0 0 0 #000) drop-shadow(0 0 0 #000);
	-webkit-print-color-adjust:exact;
	print-color-adjust:exact;
}

/* ---------- 인쇄할 때는 장식을 전부 되돌린다 ----------
   (도구막대·안내문 자체를 지우는 것은 각 JSP 의 @media print 가 한다) */
@media print{
	body.pv-body{background:#fff !important;}
	.pv-stack .form-paper{margin-top:0 !important;}
	.pv-stack .form-paper::before{display:none !important;}
	.pv-stack .form-paper-bg{box-shadow:none !important; border-radius:0 !important;}
}

/* ---------- 평가 메뉴의 "작성 중인 기록" ----------
   욕구사정 13단계·CIST 10단계는 한 번에 끝내기 어렵다. 이 칸이 없으면 쓰다 만
   기록을 서식 -> 수급자 -> 이력 순으로 파고들어야 찾는다. 메뉴 맨 위에서 바로
   잇도록 둔 칸이다. 작성 중인 것이 없으면 JSP 가 아예 안 그린다. */
.ing-box{
	margin:0 0 16px;
	padding:12px 12px 6px;
	background:var(--brand-tint);
	border:1px solid var(--brand-border);
	border-radius:var(--radius-md);
}
.ing-title{
	margin:0 2px 8px;
	font-size:13px;
	font-weight:800;
	color:var(--brand-text);
}
.ing-title .ing-cnt{
	display:inline-block;
	min-width:18px;
	margin-left:4px;
	padding:1px 6px;
	border-radius:9px;
	background:var(--brand);
	color:#fff;
	font-size:11.5px;
	text-align:center;
}
.ing-row{
	display:flex;
	/* stretch 로 두면 삭제 버튼이 줄 높이만큼 늘어나 "이어서 작성"보다 커진다 */
	align-items:center;
	gap:8px;
	padding:10px;
	margin-bottom:6px;
	background:var(--card-bg);
	border-radius:11px;
}
/* 줄의 본문(누르면 이어서 작성). 삭제 버튼과 나란히 두려고 안쪽에 한 겹 더 있다 */
.ing-main{
	flex:1;
	min-width:0;
	display:flex;
	align-items:center;
	gap:10px;
	text-decoration:none;
	color:inherit;
}
.ing-delform{flex:none; display:flex; align-items:center;}
/* 삭제 — 되돌릴 수 없는 동작이라 빨강으로 분명히 드러낸다.
   --red 는 테마 색상(스킨)과 무관한 고정색이라 12종 어디서도 안 묻힌다. */
/* 크기는 옆의 "이어서 작성"(.ing-go)과 맞춘다 — 둘 다 min-height 로 잡아
   한쪽 글자 수가 달라져도 높이가 어긋나지 않게 한다. */
.ing-del{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:3px;
	min-height:40px;
	width:50px;
	padding:5px 4px;
	border:0;
	border-radius:9px;
	background:var(--red);
	color:#fff;
	font-family:inherit;
	font-size:11px;
	font-weight:800;
	line-height:1.15;
	cursor:pointer;
}
.ing-del svg{width:15px; height:15px;}
.ing-del:disabled{opacity:0.5;}
@media (hover:hover) and (pointer:fine){
	.ing-del:hover{filter:brightness(1.08);}
}
.ing-body{flex:1; min-width:0;}
.ing-who{
	display:block;
	font-size:14.5px;
	font-weight:800;
	color:var(--text-main);
}
.ing-what{
	display:block;
	margin-top:1px;
	font-size:12.5px;
	color:var(--text-sub);
}
.ing-meta{
	display:block;
	margin-top:2px;
	font-size:11.5px;
	color:var(--text-sub);
}
/* 어디까지 왔는지 한눈에 — 단계 숫자만으로는 감이 안 온다 */
.ing-bar{
	display:block;
	margin-top:6px;
	height:4px;
	border-radius:999px;
	background:var(--surface-2);
	overflow:hidden;
}
.ing-fill{
	display:block;
	height:100%;
	border-radius:999px;
	background:var(--brand);
}
.ing-go{
	flex:none;
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:40px;
	padding:5px 10px;
	border-radius:9px;
	background:var(--brand);
	color:#fff;
	font-size:11.5px;
	font-weight:800;
	line-height:1.25;
	text-align:center;
}

/* ---------- 평가 메뉴 · 서식 고르기 ----------
   서식 줄이 전부 같은 모양이면 무엇을 고르는지 눈에 안 들어온다 —
   성격별 묶음 머리글 + 서식별 아이콘 색으로 구분한다. */

/* 묶음 머리글. 목록 사이에 있으므로 위 여백이 아래보다 커야 묶음이 읽힌다. */
.menu-group{
	margin:18px 2px 8px;
	font-size:12px;
	font-weight:800;
	color:var(--text-sub);
	letter-spacing:.02em;
}
.menu-group:first-of-type{margin-top:2px;}

/* 서식별 아이콘 색 — **스킨(테마 색상)과 무관한 의미색**이다(등급 배지와 같은 규칙).
   사정=초록 / 인지=보라 / 낙상=주황 / 욕창=빨강 / 경과기록=파랑.
   색을 고른 기준은 위험의 성격이다 — 낙상·욕창은 경고색, 검사·기록은 중립색. */
.menu-row .ico.c-need   {background:#e9f3e4; color:#3d7a2c;}
.menu-row .ico.c-cist   {background:#efe9fa; color:#6a4fb0;}
.menu-row .ico.c-fall   {background:#fdf0e0; color:#a85c0a;}
.menu-row .ico.c-bedsore{background:#fdeaea; color:#bd3b3b;}
.menu-row .ico.c-state  {background:#e6eefa; color:#35619e;}
.menu-row .ico.c-counsel{background:#e0f2f1; color:#1d7268;}
.menu-row .ico.c-swj    {background:#e8eaf6; color:#3f51a3;}

:root[data-theme="dark"] .menu-row .ico.c-need   {background:#1d2b1c; color:#8fc47c;}
:root[data-theme="dark"] .menu-row .ico.c-cist   {background:#241d38; color:#b39ce8;}
:root[data-theme="dark"] .menu-row .ico.c-fall   {background:#33240f; color:#e0a457;}
:root[data-theme="dark"] .menu-row .ico.c-bedsore{background:#341a1a; color:#e88b8b;}
:root[data-theme="dark"] .menu-row .ico.c-state  {background:#182335; color:#8fb0e8;}
:root[data-theme="dark"] .menu-row .ico.c-counsel{background:#132e2b; color:#7fcfc4;}
:root[data-theme="dark"] .menu-row .ico.c-swj{background:#1e2340; color:#9fa8da;}
:root[data-theme="light"] .menu-row .ico.c-need   {background:#e9f3e4; color:#3d7a2c;}
:root[data-theme="light"] .menu-row .ico.c-cist   {background:#efe9fa; color:#6a4fb0;}
:root[data-theme="light"] .menu-row .ico.c-fall   {background:#fdf0e0; color:#a85c0a;}
:root[data-theme="light"] .menu-row .ico.c-bedsore{background:#fdeaea; color:#bd3b3b;}
:root[data-theme="light"] .menu-row .ico.c-state  {background:#e6eefa; color:#35619e;}
:root[data-theme="light"] .menu-row .ico.c-counsel{background:#e0f2f1; color:#1d7268;}
:root[data-theme="light"] .menu-row .ico.c-swj{background:#e8eaf6; color:#3f51a3;}

/* 안내글 + [원본 양식 미리보기] 를 한 줄로. 좁은 폰에서는 접혀서 두 줄이 된다. */
.eval-lead{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	flex-wrap:wrap;
	margin-bottom:12px;
}
.eval-lead .lead-note{margin:0;}
.eval-lead .form-preview{margin:0; padding:7px 12px; font-size:12px;}

/* ---------- 평가 > 수급자 상담일지 ---------- */

/* 이력 한 줄 — 누구와(대상자) 언제 어떻게(방법) 상담했는지 + 한 줄 미리보기 */
.cs-item{
	display:flex;
	align-items:center;
	gap:10px;
	padding:12px 14px;
	background:var(--card-bg);
	border:1px solid var(--border);
	border-radius:var(--radius-md);
	box-shadow:var(--sh-1);
	text-decoration:none;
	color:inherit;
}
.cs-item .cs-body{flex:1; min-width:0;}
.cs-item .cs-top{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.cs-item .cs-top b{font-size:14.5px; font-weight:800; color:var(--text-main);}
.cs-item .cs-rel{font-size:12px; color:var(--text-sub);}
.cs-item .cs-meta{display:block; margin-top:3px; font-size:11.5px; color:var(--text-sub); font-variant-numeric:tabular-nums;}
/* 미리보기는 한 줄로 자른다 — 길이는 목록이 아니라 상세가 감당할 몫이다 */
.cs-item .cs-preview{
	display:block;
	margin-top:5px;
	font-size:12.5px;
	line-height:1.5;
	color:var(--text-main);
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.cs-item .arrow{flex:none; color:var(--text-sub); display:flex;}
.cs-item .arrow svg{width:17px; height:17px;}

/* 대상자 칩의 건수 — 이름보다 한 톤 흐리게 (누구인지가 주인공이다) */
.chip .c{margin-left:2px; font-size:11px; font-weight:700; opacity:.65;}

/* 상담 시각 — 시작 ~ 종료 두 칸을 한 줄에 */
.cs-time-row{display:flex; align-items:center; gap:8px;}
.cs-time-row input[type="time"]{flex:1; min-width:0;}
.cs-time-sep{flex:none; color:var(--text-sub); font-weight:700;}

/* ---------- 일정관리 달력·상세 ----------

   서비스 의미색 — 스킨과 무관하다(등급 배지와 같은 규칙).
   1 요양=파랑 · 2 목욕=청록 · 3 간호=보라 · 4 주야간=주황 · 6 돌봄=초록 · 기타=회색 */

/* 달 이동 + 연/월 + 직원 선택 한 줄 */
/* 수급자 상세 [일정 보기]로 들어온 상태 표시줄 — 이 수급자 것만 보인다 */
.plan-filter{
	display:flex; align-items:center; gap:7px;
	margin:-6px 0 12px;
	padding:9px 13px;
	border-radius:var(--radius-md);
	background:var(--brand-tint);
	color:var(--text-main);
	font-size:13px;
}
.plan-filter svg{width:15px; height:15px; stroke:var(--brand); flex:none;}
.plan-filter b{font-weight:800;}
.plan-filter a{margin-left:auto; color:var(--brand-text); font-weight:800; text-decoration:none; flex:none;}
.plan-head{display:flex; align-items:center; gap:6px; margin-bottom:14px;}
.plan-head a{
	width:36px; height:36px; flex:none;
	border-radius:10px;
	background:var(--card-bg);
	border:1px solid var(--border);
	display:flex; align-items:center; justify-content:center;
	text-decoration:none;
}
.plan-head a svg{width:18px; height:18px; stroke:var(--text-main);}
.plan-head select{
	min-width:0;
	background:var(--card-bg);
	border:1px solid var(--border);
	border-radius:10px;
	color:var(--text-main);
	font-family:inherit;
	font-size:13.5px;
	font-weight:700;
	padding:8px 6px;
	outline:none;
}
/* 직원 고르기 버튼 — 셀렉트처럼 보이되 누르면 멀티컬럼 시트가 열린다.
   (네이티브 셀렉트는 한 줄짜리라 이름·성별/나이·직종을 못 보여 준다) */
.emp-sel-btn{
	flex:1;
	min-width:0;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:6px;
	background:var(--card-bg);
	border:1px solid var(--border);
	border-radius:10px;
	color:var(--text-main);
	font-family:inherit;
	font-size:13.5px;
	font-weight:700;
	padding:8px 10px;
	cursor:pointer;
}
.emp-sel-btn .nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.emp-sel-btn svg{width:15px; height:15px; flex:none; color:var(--text-sub);}
/* 일정 추가 1단계(sheet-field 안)에서는 입력칸처럼 전폭으로 쓴다 */
.sheet-field .emp-sel-btn{width:100%; justify-content:space-between; font-size:15px; padding:11px 13px; border-radius:var(--radius-md); background:var(--input-bg);}

/* 직원 고르기 시트 — 이름·성별/나이·직종 세 칸 표 */
.emp-sheet{max-height:76vh;}
.emp-sheet-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;}
.emp-sheet-close{
	width:34px; height:34px; flex:none;
	border:0; border-radius:10px;
	background:var(--surface-2);
	color:var(--text-main);
	display:flex; align-items:center; justify-content:center;
	cursor:pointer;
}
.emp-sheet-close svg{width:16px; height:16px;}
.emp-tbl{border:1px solid var(--border); border-radius:12px; overflow:hidden;}
.et-row{
	display:grid;
	grid-template-columns:1fr 86px 112px;
	gap:6px;
	align-items:center;
	padding:11px 12px;
	border-top:1px solid var(--border);
	text-decoration:none;
	color:var(--text-main);
	font-size:14px;
}
.et-row:first-child{border-top:0;}
/* 시트 목록 검색 — 직원 목록 시트(일정관리·일정입력) 머리글 아래. 이름·성별/나이·직종 어느 칸이든 맞으면 남긴다(mobile.js). */
.et-search{position:relative; margin:0 0 10px;}
.et-search svg{position:absolute; left:13px; top:50%; transform:translateY(-50%); width:16px; height:16px; stroke:var(--text-sub);}
.et-search input[type=search]{
	width:100%; box-sizing:border-box; padding:11px 12px 11px 38px;
	border:1px solid var(--border); border-radius:999px;
	background:var(--card-bg); color:var(--text-main);
	font-family:inherit; font-size:16px;   /* 16px 아래로 내리지 말 것 — iOS 가 확대한다 */
	-webkit-appearance:none; appearance:none;
}
.et-search input[type=search]:focus{border-color:var(--brand); outline:none;}
.et-row.et-empty .n{color:var(--text-sub); font-weight:600;}
.et-row span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.et-row span:nth-child(2), .et-row span:nth-child(3){font-size:12.5px; color:var(--text-sub);}
.et-row .n{font-weight:700;}
.et-row.et-head{
	background:var(--surface-2);
	font-size:12px;
	font-weight:800;
	color:var(--text-sub);
	padding:9px 12px;
}
.et-row.et-head span{font-size:12px; color:var(--text-sub);}
/* 지금 고른 줄 — 참조 화면의 연두 강조 자리다. 테마색 틴트로 낸다. */
.et-row.on{background:var(--brand-tint);}
.et-row.on .n{color:var(--brand-text);}
.et-row:active{background:var(--surface-2);}

/* 달력 칸 — 날짜(좌상단) 아래 서비스별 건수 뱃지("요양"/"20건", 최대 2 + "+N종").
   참조 서식처럼 칸을 키워 뱃지가 두 줄(이름+건수)로 들어간다. 건수 없는 날은 자리만 비운다. */
.cal-cell{min-height:88px;}
.si-wrap{
	display:flex;
	flex-direction:column;
	gap:3px;
	flex:1;
	min-height:0;
	overflow:hidden;
}
.si{
	display:block;
	text-align:center;
	padding:3px 3px;
	border-radius:6px;
	color:#fff;                 /* 진한 단색 위 흰 글자 — 대비를 최대로 */
	font-weight:800;
	line-height:1.18;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
/* 이름(요양)과 건수(20건)를 두 줄로 — 흰 글자로 시인성을 확보한다 */
.si .nm{display:block; font-size:11.5px; letter-spacing:-.01em;}
.si .cnt{display:block; font-size:11px; font-weight:800;}
.si.more{background:var(--surface-2); color:var(--text-sub); font-size:10px; font-weight:800; padding:3px;}

/* 서비스 색 — 진한 단색 + 흰 글자(시인성). 캘린더 뱃지(.si-N)와 목록 라벨(.gbn.si-bg-N)이
   같은 색을 쓴다. 흰 글자 대비 4.5:1 이상이라 라이트·다크 어느 칸 배경에서도 또렷하다 —
   테마별로 색을 바꾸지 않는다(단색 자체가 양쪽에서 잘 보인다). */
.si-1, .gbn.si-bg-1{background:#2f5fc4; color:#fff;}   /* 요양 파랑 */
.si-2, .gbn.si-bg-2{background:#107268; color:#fff;}   /* 목욕 청록 */
.si-3, .gbn.si-bg-3{background:#6a4bb0; color:#fff;}   /* 간호 보라 */
.si-4, .gbn.si-bg-4{background:#a85009; color:#fff;}   /* 주야 주황 */
.si-6, .gbn.si-bg-6{background:#337a22; color:#fff;}   /* 돌봄 초록 */
.si-5, .si-7, .si-8, .si-9{background:#5b6672; color:#fff;}

/* 상세 줄의 왼쪽 서비스 라벨 — 캘린더 뱃지와 같은 색, 조금 더 크고 굵게 */
.plan-item .gbn{width:60px; font-size:13px; font-weight:800;}
.plan-item .time small{font-size:12px; font-weight:700; color:var(--text-sub);}
.plan-item .who b{color:var(--text-main); font-weight:800;}
.plan-item .who.addr{font-size:12px;}

/* ---------- 일정 입력/수정 (/mobile/plan_input.htm) ---------- */

/* 선택 날짜 줄 + [일정 추가] 를 한 줄에 */
.plan-date-row{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.plan-date-row .plan-date{margin:0; flex:1; min-width:0;}
/* [오늘] — 다른 날짜를 보고 있을 때만 나온다(JS). 한 번에 오늘로 돌아온다 */
.plan-today{
	flex:none;
	padding:8px 13px;
	border:1.5px solid var(--brand);
	border-radius:999px;
	background:var(--card-bg);
	color:var(--brand-text);
	font-family:inherit;
	font-size:12.5px;
	font-weight:800;
	cursor:pointer;
	transition:transform .12s ease;
}
.plan-today:active{transform:scale(.95);}
.plan-add{
	flex:none;
	display:inline-flex;
	align-items:center;
	gap:5px;
	padding:8px 13px;
	border-radius:999px;
	background:linear-gradient(135deg, var(--brand-light), var(--brand));
	color:#fff;
	font-size:12.5px;
	font-weight:800;
	text-decoration:none;
	box-shadow:var(--sh-brand);
}
.plan-add svg{width:14px; height:14px; flex:none;}

/* 일정 줄의 편집·복사 버튼 — 아이콘 아래 작은 글씨(일정복사/일정편집)를 함께 쓴다(아이콘만으로는 뜻을 모른다). */
.rowbtn.edit{color:var(--brand-text);}
.rowbtn.copy{color:var(--text-sub);}
.rowbtn.copy svg, .rowbtn.edit svg{stroke:currentColor;}
.rowbtn.copy, .rowbtn.edit{
	width:auto;
	min-width:48px;
	height:auto;
	padding:7px 5px 6px;
	flex-direction:column;
	gap:3px;
}
.rowbtn .bl{font-size:10px; font-weight:700; line-height:1; white-space:nowrap;}

/* "전체 수급자에서 고르기" 같은 안내줄 속 링크 — 기본 파랑 대신 테마색 */
.sheet-hint a{color:var(--brand-text); font-weight:700;}

/* 계산 결과 미리보기 */
.pi-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:10px;}
.pi-cell{padding:10px 12px; border-radius:10px; background:var(--surface-2);}
.pi-cell .k{display:block; font-size:11.5px; color:var(--text-sub);}
.pi-cell .v{display:block; margin-top:3px; font-size:15px; font-weight:800; color:var(--text-main); font-variant-numeric:tabular-nums;}
.pi-tags{margin:10px 2px 0; font-size:12px; font-weight:800; color:var(--orange);}

/* ---------- 급여명세서 (/mobile/pay*.htm) ----------
   금액이 주인공인 화면이라 숫자는 tabular-nums 로 자릿수를 맞춘다 —
   비례폭 숫자로 두면 줄마다 자리가 밀려 위아래로 견주기가 어렵다. */

/* 연도 나눔줄에서 "다음 해" 자리를 비울 때 (올해면 넘어갈 곳이 없다).
   빼 버리면 가운데 셀렉트가 왼쪽으로 밀린다. */
.nav-blank{width:36px; height:36px; flex:none;}

/* 월별 목록 한 줄 */
.pay-row{
	display:flex;
	align-items:center;
	gap:12px;
	padding:14px 14px;
	background:var(--card-bg);
	border:1px solid var(--border);
	border-radius:var(--radius-md);
	box-shadow:var(--sh-1);
	text-decoration:none;
	color:inherit;
}
.pay-row .pay-mm{
	flex:none;
	width:44px;
	text-align:center;
	color:var(--brand-text);
	line-height:1.1;
}
.pay-row .pay-mm b{display:block; font-size:22px; font-weight:800; font-variant-numeric:tabular-nums;}
.pay-row .pay-mm small{font-size:11px; font-weight:700; opacity:.8;}
.pay-row .pay-body{flex:1; min-width:0;}
.pay-row .pay-amt{
	display:block;
	font-size:17px;
	font-weight:800;
	color:var(--text-main);
	font-variant-numeric:tabular-nums;
}
.pay-row .pay-amt small{font-size:12px; font-weight:700; margin-left:2px; color:var(--text-sub);}
.pay-row .pay-sub{display:block; margin-top:3px; font-size:11.5px; color:var(--text-sub); font-variant-numeric:tabular-nums;}
.pay-row .arrow{flex:none; width:18px; height:18px; color:var(--text-sub);}
.pay-row .arrow svg{width:18px; height:18px;}

/* 명세서 머리 — 실지급액이 가장 궁금한 값이라 여기서 한 번에 보이게 한다 */
.ps-head{
	padding:16px;
	margin-bottom:12px;
	border-radius:var(--radius-md);
	background:var(--brand-tint);
	border:1px solid var(--brand-border);
}
.ps-who{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
/* 머리 바탕이 brand-tint 라 같은 색 배지는 안 보인다 — 흰 알약으로 띄운다 */
.ps-who .badge{background:var(--card-bg); color:var(--brand-text); border:1px solid var(--brand-border);}
.ps-who .badge.orange{background:var(--orange-tint); color:var(--orange); border-color:transparent;}
.ps-name{font-size:17px; font-weight:800; color:var(--text-main);}
.ps-job{font-size:12px; font-weight:700; color:var(--brand-text);}
.ps-ym{margin:4px 0 0; font-size:12.5px; color:var(--text-sub);}
.ps-total{display:flex; align-items:baseline; justify-content:space-between; margin-top:14px;}
.ps-total .k{font-size:13px; font-weight:800; color:var(--brand-text);}
.ps-total .v{font-size:26px; font-weight:800; color:var(--text-main); font-variant-numeric:tabular-nums;}
.ps-total .v small{font-size:14px; font-weight:700; margin-left:2px;}
.ps-total-sub{
	display:flex;
	gap:14px;
	margin-top:8px;
	padding-top:8px;
	border-top:1px solid var(--brand-border);
	font-size:12px;
	color:var(--text-sub);
	font-variant-numeric:tabular-nums;
}
.ps-total-sub b{color:var(--text-main); font-weight:800;}

/* 근로시간 — 네 칸이 항상 같은 자리에 오도록 격자로 둔다 */
.ps-hours{display:grid; grid-template-columns:repeat(2, 1fr); gap:10px;}
.ps-hour{
	padding:10px 12px;
	border-radius:10px;
	background:var(--surface-2);
}
.ps-hour .k{display:block; font-size:11.5px; color:var(--text-sub);}
.ps-hour .v{display:block; margin-top:3px; font-size:15px; font-weight:800; color:var(--text-main); font-variant-numeric:tabular-nums;}

/* 지급·공제 줄.
   항목이 40개 가까운데 실제로 금액이 붙는 것은 대여섯 개뿐이라 0원은 접어 둔다.
   data-zero="show" 로 바뀌면 다시 보인다(pay_view.jsp 의 toggleZero). */
.ps-items .ps-item{
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	gap:10px;
	padding:8px 0;
	border-bottom:1px solid var(--border);
	font-size:13.5px;
}
.ps-items .ps-item:last-child{border-bottom:0; padding-bottom:0;}
.ps-item .k{color:var(--text-sub);}
.ps-item .v{font-weight:800; color:var(--text-main); font-variant-numeric:tabular-nums; white-space:nowrap;}
.ps-items[data-zero="hide"] .ps-item.zero{display:none;}
.ps-item.zero .v{color:var(--text-sub); font-weight:700;}
/* 소계는 굵게 — 위 항목들과 성격이 다르다 */
.ps-item.sum{margin-top:4px; border-top:1.5px solid var(--brand-border); border-bottom:0; padding-top:10px;}
.ps-item.sum .k{color:var(--brand-text); font-weight:800;}
.ps-item.sum .v{font-size:15px;}
.ps-sub-title{margin:12px 0 2px; font-size:11.5px; font-weight:800; color:var(--brand-text);}

/* 지급총액 / 합계 — 카드 하나를 통째로 쓴다 */
.ps-result{display:flex; align-items:baseline; justify-content:space-between;}
.ps-result .k{font-size:14px; font-weight:800; color:var(--brand-text);}
.ps-result .v{font-size:22px; font-weight:800; color:var(--text-main); font-variant-numeric:tabular-nums;}
.ps-result .v small{font-size:13px; font-weight:700; margin-left:2px; color:var(--text-sub);}

.ps-zero-btn{width:100%; margin-top:12px;}

/* 세부내역 — 날짜가 바뀔 때만 머리를 찍는다(같은 날 여러 건이 흔하다) */
.vd-day{
	margin:14px 0 2px;
	font-size:12px;
	font-weight:800;
	color:var(--brand-text);
}
.vd-day:first-child{margin-top:0;}
.vd-row{
	display:flex;
	align-items:center;
	gap:10px;
	padding:10px 12px;
	background:var(--card-bg);
	border-radius:11px;
}
.vd-time{
	flex:none;
	width:52px;
	font-size:11px;
	font-weight:700;
	color:var(--text-sub);
	line-height:1.5;
	font-variant-numeric:tabular-nums;
}
.vd-body{flex:1; min-width:0;}
.vd-who{display:block; font-size:14px; font-weight:800; color:var(--text-main);}
.vd-what{display:block; margin-top:2px; font-size:11.5px; color:var(--text-sub);}
.vd-tag{
	display:inline-block;
	margin-left:4px;
	padding:1px 6px;
	border-radius:999px;
	font-size:10px;
	font-weight:800;
}
.vd-tag.night{background:#e8eefa; color:#3a5ea8;}
.vd-tag.hol{background:var(--orange-tint); color:var(--orange);}
.vd-min{flex:none; text-align:right; font-size:12px; color:var(--text-sub); font-variant-numeric:tabular-nums;}
.vd-min .min{display:block;}
.vd-min b{font-size:15px; font-weight:800; color:var(--text-main);}
/* 수가금액 — 시급제에서만 붙는다. 근로분보다 한 톤 작게 둬서 줄이 어지럽지 않게 한다 */
.vd-suga{display:block; margin-top:2px; font-size:11.5px; font-weight:800; color:var(--brand-text);}

/* 급여지급방식 배지 — 시급제/월급제는 마감 여부와 성격이 달라 색을 나눈다.
   스킨(테마 색상)과 무관한 의미색이다 — 등급 배지와 같은 규칙. */
.badge.blue{background:#e8eefa; color:#3a5ea8;}
:root[data-theme="dark"] .badge.blue{background:#1c2740; color:#8fb0e8;}
:root[data-theme="light"] .badge.blue{background:#e8eefa; color:#3a5ea8;}

/* 수가금액이 무엇인지 한 줄 설명 */
.ps-note{margin:10px 2px 0; font-size:11.5px; line-height:1.6; color:var(--text-sub);}

:root[data-theme="dark"] .vd-tag.night{background:#1c2740; color:#8fb0e8;}
:root[data-theme="light"] .vd-tag.night{background:#e8eefa; color:#3a5ea8;}


/* ==================== 기초평가 현황판 (eval_board) ====================
   반기 이동 + 서식별 요약 카드 + 두 묶음 탭 + 괘선 표.
   칸 구분이 또렷해야 해서 떠 있는 칸이 아니라 **진짜 표**로 그린다:
   카드 안에 머리행·세로줄·행 가로줄을 긋고 상태색은 칸을 통째로 칠한다.
   상태색·서식색은 스킨과 무관한 의미색(라이트/다크 3중 정의). */
.board-head{display:flex; align-items:center; gap:8px; margin:2px 0 12px;}
.bh-nav{
	flex:none; display:flex; align-items:center; justify-content:center;
	width:40px; height:40px; border-radius:13px;
	background:var(--brand-tint); border:1px solid var(--brand-border); color:var(--brand-text);
}
.bh-nav svg{width:20px; height:20px;}
.bh-title{flex:1; text-align:center; font-size:18px; font-weight:700; color:var(--text-main); letter-spacing:.01em;}
.bh-title b{font-weight:800; color:var(--brand-text);}

/* 서식별 완료 요약 — 색은 평가 메뉴의 서식 의미색과 같은 계열 */
.bsum{display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; margin-bottom:10px;}
.bsum-card{
	display:flex; flex-direction:column; gap:5px; padding:10px 9px 9px;
	border-radius:13px; border:1px solid var(--border); background:var(--card-bg); text-align:left;
}
.bs-top{display:flex; align-items:center; gap:5px; font-size:11px; font-weight:800; color:var(--text-sub);}
.bs-dot{flex:none; width:8px; height:8px; border-radius:50%;}
.bs-num{font-size:17px; font-weight:800; color:var(--text-main); line-height:1;}
.bs-num small{font-size:10.5px; font-weight:700; color:var(--text-sub);}
.bs-bar{height:4px; border-radius:999px; background:var(--surface-2); overflow:hidden;}
.bs-bar i{display:block; height:100%; border-radius:999px; transition:width .3s ease;}
.sc-fall .bs-dot, .sc-fall .bs-bar i{background:#dd8b31;}
.sc-bed  .bs-dot, .sc-bed  .bs-bar i{background:#d95c5c;}
.sc-cist .bs-dot, .sc-cist .bs-bar i{background:#8d6cd9;}
.sc-need .bs-dot, .sc-need .bs-bar i{background:#63a24a;}

.board-seg{display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:8px;}
.board-seg button{
	padding:11px 4px; border-radius:12px; border:1px solid var(--border);
	background:var(--card-bg); color:var(--text-sub); font-size:13.5px; font-weight:700;
}
.board-seg button.on{background:var(--brand); border-color:var(--brand); color:#fff; font-weight:800; box-shadow:0 2px 8px rgba(0,0,0,.12);}

.board-filter{margin-bottom:6px;}

/* 표 본체 — 구분은 세 겹으로: 머리행 배경, 세로 괘선, 행 가로 괘선 + 칸 전체 상태색 */
.board{
	background:var(--card-bg);
	border:1px solid var(--border);
	border-radius:14px;
	overflow:hidden;
}
.b-hrow{
	display:grid; grid-template-columns:1.02fr 1fr 1fr;
	background:var(--surface-2);
	border-bottom:1px solid var(--border);
	font-size:12px; font-weight:800; color:var(--text-sub);
}
.b-hrow span{padding:10px 4px; text-align:center; border-left:1px solid var(--border);}
.b-hrow span:first-child{border-left:0;}
.b-hrow small{font-weight:700; font-size:10px;}
.b-row{display:grid; grid-template-columns:1.02fr 1fr 1fr; border-top:1px solid var(--border);}
.b-hrow + .b-row{border-top:0;}
/* 수급자 상세 [평가 이력]에서 온 줄 — 어느 줄인지 바로 보이게 */
.b-row.focus{outline:2px solid var(--brand); outline-offset:-2px;}
.b-row.focus .bw-name{color:var(--brand-text);}
/* 수급자 칸 — 평가 칸들과 같이 가운데 정렬로 맞춘다 */
.b-who{
	display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
	min-width:0; padding:10px 6px; text-align:center;
}
.bw-name{max-width:100%; font-size:15px; font-weight:800; color:var(--text-main); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.bw-meta{font-size:11px; line-height:1.3; color:var(--text-sub); word-break:keep-all;}
.badge.mini{font-size:10px; padding:2px 8px;}

.b-cell{
	display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
	min-height:66px; padding:9px 5px; text-align:center;
	border-left:1px solid var(--border);
	text-decoration:none;
}
.b-cell:active{filter:brightness(.94);}
.bc-top{display:inline-flex; align-items:center; gap:4px; font-size:12.5px; font-weight:700; color:var(--text-main);}
.bc-top svg{flex:none; width:13px; height:13px;}
.bc-top b{font-size:15px; font-weight:800;}
.bc-date{font-size:10.5px; color:var(--text-sub);}
.bc-badge{font-size:10.5px; font-weight:800; padding:2px 8px; border-radius:999px;}
.bc-hint{font-size:10.5px; font-weight:800;}
.bc-prog{width:72%; height:4px; border-radius:999px; background:rgba(0,0,0,.1); overflow:hidden;}
.bc-prog i{display:block; height:100%; border-radius:999px; background:#e08a2e; transition:width .3s ease;}

/* 상태 채움 — 작성(초록) / 작성중(호박) / 미작성(중립 회색).
   미작성을 색으로 칠하지 않는 이유: 30명 화면에서 대부분이 미작성이라
   노랑으로 칠하면 화면 전체가 소란해진다. 색은 봐야 할 결과(완료 점수·
   위험 배지·작성중)에만 쓰고 미작성은 배경으로 물러난다. */
.b-cell.done{background:#ecf7e5;}
.b-cell.done .bc-top svg{color:#3f8a2b;}
.b-cell.done .bc-top b{color:#2e6e1d;}
.b-cell.ing{background:#fcf0d8;}
.b-cell.ing .bc-top{color:#8a5a06;}
.b-cell.none{background:var(--surface-2);}
.b-cell.none .bc-top{color:var(--placeholder); font-weight:800;}
.b-cell.none .bc-hint{color:var(--text-sub);}

/* 위험 배지 — 등급 배지 팔레트 재사용. 칠해진 칸 위라 흰 테두리 느낌을 살짝 준다 */
.bc-badge.bd-high{background:#fbdddd; color:#b52c2c;}
.bc-badge.bd-mid{background:#fae5cb; color:#9a4a08;}
.bc-badge.bd-cog{background:#eae2f8; color:#634aa8;}

.board-note{margin:12px 2px 0; font-size:11.5px; line-height:1.7; color:var(--text-sub); word-break:keep-all;}
.board-note b{color:var(--text-main);}

/* 허브(평가 메뉴)의 현황판 진입 카드 — menu-row 보다 한 톤 띄운다 */
.board-link{
	display:flex; align-items:center; gap:12px;
	margin:0 0 14px; padding:13px 12px;
	background:var(--brand-tint); border:1px solid var(--brand-border); border-radius:14px;
	/* a 태그 기본 밑줄 제거 — 이 CSS 는 전역 리셋이 없어 컴포넌트마다 직접 끈다 */
	text-decoration:none;
}
.board-link .ico{
	flex:none; display:flex; align-items:center; justify-content:center;
	width:40px; height:40px; border-radius:12px; background:var(--card-bg); color:var(--brand-text);
}
.board-link .ico svg{width:22px; height:22px;}
.board-link .body{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.board-link .t{font-size:15px; font-weight:800; color:var(--text-main);}
.board-link .d{font-size:11.5px; color:var(--text-sub); line-height:1.4; word-break:keep-all;}
.board-link .arrow{flex:none; color:var(--text-sub);}
.board-link .arrow svg{width:18px; height:18px;}

:root[data-theme="dark"] .board, :root[data-theme="dark"] .b-hrow, :root[data-theme="dark"] .b-hrow span, :root[data-theme="dark"] .b-row, :root[data-theme="dark"] .b-cell{border-color:#3b4147;}
:root[data-theme="dark"] .b-cell.done{background:#22371c;}
:root[data-theme="dark"] .b-cell.done .bc-top svg{color:#8ed070;}
:root[data-theme="dark"] .b-cell.done .bc-top b{color:#a5e08a;}
:root[data-theme="dark"] .b-cell.ing{background:#3a2d11;}
:root[data-theme="dark"] .b-cell.ing .bc-top{color:#eebd68;}
:root[data-theme="dark"] .b-cell.none{background:var(--surface-2);}
:root[data-theme="dark"] .b-cell.none .bc-top{color:var(--placeholder);}
:root[data-theme="dark"] .b-cell.none .bc-hint{color:var(--text-sub);}
:root[data-theme="dark"] .bc-prog{background:rgba(255,255,255,.14);}
:root[data-theme="dark"] .bc-badge.bd-high{background:#4a2323; color:#ffa3a3;}
:root[data-theme="dark"] .bc-badge.bd-mid{background:#46301a; color:#ffb668;}
:root[data-theme="dark"] .bc-badge.bd-cog{background:#322847; color:#c3adf5;}
:root[data-theme="light"] .board, :root[data-theme="light"] .b-hrow, :root[data-theme="light"] .b-hrow span, :root[data-theme="light"] .b-row, :root[data-theme="light"] .b-cell{border-color:var(--border);}
:root[data-theme="light"] .b-cell.done{background:#ecf7e5;}
:root[data-theme="light"] .b-cell.done .bc-top svg{color:#3f8a2b;}
:root[data-theme="light"] .b-cell.done .bc-top b{color:#2e6e1d;}
:root[data-theme="light"] .b-cell.ing{background:#fcf0d8;}
:root[data-theme="light"] .b-cell.ing .bc-top{color:#8a5a06;}
:root[data-theme="light"] .b-cell.none{background:var(--surface-2);}
:root[data-theme="light"] .b-cell.none .bc-top{color:var(--placeholder);}
:root[data-theme="light"] .b-cell.none .bc-hint{color:var(--text-sub);}
:root[data-theme="light"] .bc-prog{background:rgba(0,0,0,.1);}
:root[data-theme="light"] .bc-badge.bd-high{background:#fbdddd; color:#b52c2c;}
:root[data-theme="light"] .bc-badge.bd-mid{background:#fae5cb; color:#9a4a08;}
:root[data-theme="light"] .bc-badge.bd-cog{background:#eae2f8; color:#634aa8;}

/* ---------- 낙상·욕창 입력의 떠 있는 미니 합계 ----------
   항목을 고르는 동안 합계 카드는 화면 밖(맨 아래)이라 여기서 피드백을 준다.
   탭바(60px+안전영역) 위에 붙어 따라오고, 합계 카드가 뷰포트에 들어오면
   JS(IntersectionObserver)가 숨긴다 — 같은 정보가 두 번 보이면 어지럽다. */
.total-float{
	position:-webkit-sticky;   /* iOS 12 이하 */
	position:sticky;
	bottom:calc(70px + env(safe-area-inset-bottom, 0px));
	z-index:5;
	width:fit-content;
	margin:0 auto 10px;
	padding:8px 16px;
	border-radius:999px;
	background:var(--card-bg);
	border:1px solid var(--border);
	box-shadow:var(--sh-2);
	font-size:13px; font-weight:700; color:var(--text-sub);
}
.total-float b{font-size:15px; font-weight:800; color:var(--text-main); margin:0 1px;}
.total-float .fr{font-weight:800;}
.total-float.low .fr, .total-float.lv1 .fr, .total-float.lv2 .fr{color:var(--brand-text);}
.total-float.mid .fr, .total-float.lv3 .fr{color:var(--orange);}
.total-float.high .fr, .total-float.lv4 .fr, .total-float.lv5 .fr{color:var(--red);}

/* ============================================================
   공통 인터랙션 — 눌림 · 포커스
   ============================================================ */

/* 누르는 것은 눌렸다고 보여 준다. 여기 목록이 "누를 수 있는 것" 전부다 —
   새 컴포넌트를 만들면 여기에 추가할 것(개별 transition 을 또 만들지 말 것). */
.menu-tile, .menu-row, .cust-item, .fall-item, .memo-item, .notice-item,
.board-link, .bsum-card, .list-btn, .btn-more, .iconbtn, .chip, .date-pick,
.att-btn, .att-add, .emp-sel-btn, .month-nav a, .pv-print, .sort-sel,
.jump-btn, .guide-btn, .score-seg span, .pick-body, .na-chip span, .na-pill span, .word-chip{
	transition:transform .12s ease;
}
.menu-tile:active, .menu-row:active, .cust-item:active, .fall-item:active,
.memo-item:active, .notice-item:active, .board-link:active, .bsum-card:active,
.list-btn:active, .btn-more:active, .iconbtn:active, .chip:active,
.date-pick:active, .att-btn:active, .att-add:active, .emp-sel-btn:active,
.month-nav a:active, .pv-print:active, .word-chip:active, .jump-btn:active,
.guide-btn:active,
.score-seg label:active span, .pick-opt:active .pick-body,
.na-chip:active span, .na-pill:active span{
	transform:scale(.97);
}
/* 전폭 버튼은 조금만 — 크게 줄면 화면이 출렁여 보인다 */
.btn-primary, .btn-danger{transition:transform .12s ease, filter .12s ease;}
.btn-primary:active, .btn-danger:active{transform:scale(.985); filter:brightness(.96);}

/* 키보드·보조기기 포커스 — 마우스/터치에는 안 나온다(focus-visible).
   텍스트 입력칸은 기존 :focus 테두리 강조가 있으므로 여기서 제외한다. */
a:focus-visible, button:focus-visible, select:focus-visible, [tabindex]:focus-visible{
	outline:2.5px solid var(--brand);
	outline-offset:2px;
}
/* 라디오·체크를 숨긴 컴포넌트는 링을 보이는 짝에 그린다 */
.score-seg input:focus-visible + span,
.na-chip input:focus-visible + span,
.na-pill input:focus-visible + span,
.recog-chip input:focus-visible + span,
.skin-sw input:focus-visible + .sw,
.pick-opt input:focus-visible + .pick-body{
	outline:2.5px solid var(--brand);
	outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
	.menu-tile, .menu-row, .cust-item, .fall-item, .memo-item, .notice-item,
	.board-link, .bsum-card, .list-btn, .btn-more, .iconbtn, .chip, .date-pick,
	.att-btn, .att-add, .emp-sel-btn, .month-nav a, .pv-print, .sort-sel,
	.jump-btn, .guide-btn, .score-seg span, .pick-body, .na-chip span, .na-pill span, .word-chip,
	.btn-primary, .btn-danger{transition:none;}
}

/* ---------- 셀렉트 공통 모양 ----------
   네이티브 화살표는 기기·브라우저마다 제각각이라 꺾쇠를 직접 그린다
   (emp-pick·sheet-field 가 쓰던 것과 같은 SVG, #8a8a8a 는 다크에서도 무난).
   개별 규칙들이 background 쇼트핸드로 배경을 칠하므로 **이 절이 그보다
   뒤에 있어야** background-image 가 살아남는다 — 위로 옮기지 말 것. */
.container select, .sheet select{
	-webkit-appearance:none;
	appearance:none;
	background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:right 9px center;
	background-size:13px;
	padding-right:27px;
}

/* 숫자는 고정폭으로 — 목록의 금액·점수·날짜 자릿수가 줄마다 흔들리지 않는다
   (Pretendard 가 tnum 을 지원한다) */
body{font-variant-numeric:tabular-nums;}

/* 브라우저 내장 당겨서-새로고침을 앱 전체에서 끈다(크롬63+·삼성·웨일·사파리16+).
   당겨서 새로고침 UX 는 mobile.js 의 자체 당김이 담당한다 — 내장 것이 살아
   있으면 스크립트(defer)가 붙기 전 잠깐이나 시트 스크롤이 끝에 닿았을 때
   내장 쪽이 발동해 화면이 초기화된다. 일반 스크롤에는 영향이 없다. */
html, body{overscroll-behavior-y:none;}

/* 시트(.sheet)가 열려 있는 동안 뒤 페이지를 통째로 잠근다 — 시트 목록을 끌어올리다 손가락이 새면
   뒤 페이지가 당겨지며 당겨서-새로고침이 발동해 화면이 초기화된다(mobile.js 의 scrollLocked 와 한 짝).
   여닫는 쪽(JS)이 <html> 에 sheet-open 을 넣고 빼 준다 — 시트를 새로 만들면 열 때 add, 닫을 때 remove 를 꼭 같이 할 것. */
html.sheet-open, html.sheet-open body{
	overflow:hidden;
	overscroll-behavior-y:none;
}

/* ============================================================
   빈 상태 — 아이콘 + 주문구 + 보조설명 + (선택) 바로가기
   ============================================================
   글 한 줄짜리 .empty 도 그대로 쓸 수 있다 — 아래 조각(e-*)을 넣은 곳만
   구조형으로 그려진다. 아이콘은 인라인 SVG(stroke:currentColor). */
.empty .e-ico{
	width:64px; height:64px;
	margin:0 auto 14px;
	border-radius:22px;
	background:var(--surface-2);
	display:flex; align-items:center; justify-content:center;
	color:var(--placeholder);
}
.empty .e-ico svg{width:32px; height:32px;}
.empty .e-t1{font-size:15px; font-weight:800; color:var(--text-main); margin:0 0 4px;}
.empty .e-t2{font-size:13px; color:var(--text-sub); margin:0;}
.empty .e-btn{
	display:inline-flex; align-items:center; gap:6px;
	margin-top:16px; padding:11px 20px;
	border:0; border-radius:999px;
	background:var(--brand); color:#fff;
	font-family:inherit; font-size:14px; font-weight:800;
	text-decoration:none; cursor:pointer;
	box-shadow:var(--sh-brand);
	transition:transform .12s ease;
}
.empty .e-btn:active{transform:scale(.97);}

/* ============================================================
   메인 메뉴 타일 — 항목별 의미색 아이콘
   ============================================================
   전부 브랜드 연두면 여섯 개가 똑같아 보여 찾기 느리다. 평가 허브(.menu-row)의
   의미색 방식 그대로 — 스킨과 무관한 고정 파스텔. SVG 는 stroke:currentColor 라 글자색만 바꾸면 된다. */
.menu-tile .ico.c-notice {background:#fdf0e0; color:#a85c0a;}
.menu-tile .ico.c-selfpay{background:#e9f3e4; color:#3d7a2c;}
.menu-tile .ico.c-cust   {background:#fdeaf0; color:#b04a72;}
.menu-tile .ico.c-plan   {background:#e6eefa; color:#35619e;}
.menu-tile .ico.c-pay    {background:#e0f2f1; color:#1d7268;}
.menu-tile .ico.c-memo   {background:#efe9fa; color:#6a4fb0;}
.menu-tile .ico.c-hr     {background:#eceef3; color:#48566b;}
:root[data-theme="dark"] .menu-tile .ico.c-hr     {background:#232833; color:#a5b4c8;}
:root[data-theme="light"] .menu-tile .ico.c-hr    {background:#eceef3; color:#48566b;}
:root[data-theme="dark"] .menu-tile .ico.c-notice {background:#33240f; color:#e0a457;}
:root[data-theme="dark"] .menu-tile .ico.c-selfpay{background:#1d2b1c; color:#8fc47c;}
:root[data-theme="dark"] .menu-tile .ico.c-cust   {background:#33141f; color:#eb96b6;}
:root[data-theme="dark"] .menu-tile .ico.c-plan   {background:#182335; color:#8fb0e8;}
:root[data-theme="dark"] .menu-tile .ico.c-pay    {background:#132e2b; color:#7fcfc4;}
:root[data-theme="dark"] .menu-tile .ico.c-memo   {background:#241d38; color:#b39ce8;}
:root[data-theme="light"] .menu-tile .ico.c-notice {background:#fdf0e0; color:#a85c0a;}
:root[data-theme="light"] .menu-tile .ico.c-selfpay{background:#e9f3e4; color:#3d7a2c;}
:root[data-theme="light"] .menu-tile .ico.c-cust   {background:#fdeaf0; color:#b04a72;}
:root[data-theme="light"] .menu-tile .ico.c-plan   {background:#e6eefa; color:#35619e;}
:root[data-theme="light"] .menu-tile .ico.c-pay    {background:#e0f2f1; color:#1d7268;}
:root[data-theme="light"] .menu-tile .ico.c-memo   {background:#efe9fa; color:#6a4fb0;}
/* ==================== 인사관리 (hr.jsp / hr_view.jsp) ==================== */
/* 목록 머리 — 상태 칩 + 이름 검색 */
.hr-head{margin-bottom:12px;}
.hr-search{display:flex; gap:8px; margin-top:10px;}
.hr-search input{flex:1; min-width:0; padding:11px 13px; border:1px solid var(--border); border-radius:11px;
	background:var(--input-bg); color:inherit; font-size:16px; font-family:inherit;}
.hr-search button{flex:none; width:46px; border:0; border-radius:11px; background:var(--brand); color:#fff; cursor:pointer;}
.hr-search button svg{width:20px; height:20px;}
.hr-count{margin:2px 2px 8px; font-size:13px; color:var(--text-sub);}

/* 직원 목록 줄 */
.hr-item{display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--card-bg);
	border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--sh-1); text-decoration:none; color:inherit;}
/* 줄 왼쪽(상세로 가는 링크) — 아바타+본문. 오른쪽 [일정] 버튼(.cust-plan)과 한 줄. */
.hr-item .hr-main{flex:1; min-width:0; display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit;}
.hr-item .avatar{flex:none;}
.hr-item .body{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.hr-item .nm{font-size:15px; font-weight:700; display:flex; align-items:center; gap:6px;}
/* 월급제/시급제 태그. 상태 배지(휴직·퇴사)보다 한 톤 약하게(700/작은 패딩).
   스킨과 무관한 의미색 — 월급제 파랑, 시급제 호박(등급 배지 색쌍 재사용). */
.pay-tag{flex:none; font-size:11px; font-weight:700; padding:2px 9px; border-radius:999px; white-space:nowrap;}
.pay-tag.month{background:#e8f0fa; color:#2c62a0;}
.pay-tag.hour {background:#fdf0e3; color:#a8510a;}
:root[data-theme="dark"] .pay-tag.month{background:#1c2836; color:#8ab8ec;}
:root[data-theme="dark"] .pay-tag.hour {background:#3a2a16; color:#ffab5e;}
.hr-item .sub{font-size:12.5px; color:var(--text-sub);}
.hr-item .hp{font-size:12.5px; color:var(--brand-text);}
.hr-item .quick{flex:none;}
.hr-item .q-btn{display:flex; align-items:center; justify-content:center; width:40px; height:40px;
	border-radius:50%; background:var(--brand-tint); color:var(--brand-text); cursor:pointer;}
.hr-item .q-btn svg{width:19px; height:19px;}

/* 상세 머리 카드 */
.hr-head-card{display:flex; align-items:center; gap:14px; padding:16px; margin-bottom:14px;
	background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--sh-1);}
.hr-head-card .avatar.lg{flex:none; width:56px; height:56px; font-size:22px;}
.hr-head-card .who{min-width:0;}
.hr-head-card .nm{font-size:19px; font-weight:800; display:flex; align-items:center; gap:8px;}
.hr-head-card .sub{font-size:13.5px; color:var(--text-sub); margin-top:2px;}

/* 상세 전화걸기·문자보내기 — 머리 카드 아래 두 칸. 전화=브랜드(주동작), 문자=중립. */
.hr-actions{display:flex; gap:10px; margin:0 0 14px;}
.hr-act{
	flex:1;
	display:flex; align-items:center; justify-content:center; gap:7px;
	padding:12px 0; border-radius:12px;
	font-family:inherit; font-size:14.5px; font-weight:800;
	text-decoration:none; cursor:pointer; border:1.5px solid transparent;
}
.hr-act svg{width:19px; height:19px; stroke:currentColor; fill:none;}
.hr-act.call{background:var(--brand); color:#fff;}
.hr-act.sms{background:var(--surface-2); color:var(--text-main); border-color:var(--border);}
.hr-act:active{filter:brightness(.96);}

/* 상세 정보 줄 (기본·급여·계좌) */
.info-list{display:flex; flex-direction:column;}
.info-list .info-row{display:flex; gap:12px; padding:9px 0; border-bottom:1px dashed var(--border);}
.info-list .info-row:last-child{border-bottom:0;}
.info-list .info-row .k{flex:0 0 84px; font-size:13.5px; color:var(--text-sub);}
.info-list .info-row .v{flex:1; min-width:0; font-size:14.5px; word-break:break-all;}
.hint-sm{margin:8px 0 0; font-size:12px; color:var(--placeholder);}

/* 연락처 [수정] 버튼 */
.hp-edit{margin-left:8px; padding:2px 9px; font-size:12px; border:1px solid var(--border);
	border-radius:999px; background:var(--card-bg); color:var(--text-sub); cursor:pointer; font-family:inherit;}
.hp-edit:hover{border-color:var(--brand-light); color:var(--brand-text);}

/* 4대보험 가입 칩 */
.ins-chips{display:flex; flex-wrap:wrap; gap:8px;}
.ins-chips .ins{font-size:13px; color:var(--text-sub); padding:8px 12px; border-radius:11px;
	background:var(--surface-2); border:1px solid var(--border);}
.ins-chips .ins b{font-weight:700; margin-left:4px; color:var(--placeholder);}
.ins-chips .ins.on{background:var(--brand-tint); border-color:var(--brand-border); color:var(--brand-text);}
.ins-chips .ins.on b{color:var(--brand-text);}

/* ---------- 상태변화기록지 · 체크식 입력 (mobile-state-check.js, PC state_sheet 와 공용 구조) ----------
   이 판은 .sheet-field 안에 들어간다 — 그 광역 스타일(label 은 display:block·회색 12px,
   input 은 appearance:none·padding 12px)이 여기 체크박스·라벨까지 덮는다.
   그래서 전부 .sc-box 를 앞에 붙여 특이도를 한 단계 높이고, 체크박스 모양을 명시로
   되돌린다. appearance:none 이 덮이면 체크 표시가 아예 그려지지 않아 "눌러도 체크가
   안 되는" 것처럼 보인다(값은 바뀌는데 눈에 안 보인다). */
.sc-box{margin:8px 0 10px;}
.sc-box.folded .sc-body{display:none;}
.sc-box .sc-body{margin-top:10px;}
/* 여닫이·넣기 버튼 — 공용 .act 는 옆 여백이 0 이라 글자가 눌려 보인다. 한 줄을 다 쓴다 */
.sc-box .act{width:100%; padding:12px; font-size:13.5px;}
.sc-box .act svg{width:16px; height:16px; flex:none;}
.sc-box .sc-group{background:var(--surface-2); border:1px solid var(--border);
	border-radius:var(--radius-md); padding:10px 12px; margin-bottom:8px;}
.sc-box .sc-title{margin:0 0 4px; font-size:13px; font-weight:700; color:var(--text-main);}
.sc-box .sc-items{display:grid; grid-template-columns:1fr 1fr; gap:0 10px;}
.sc-box .sc-item{display:flex; align-items:center; gap:8px; margin:0; padding:7px 2px;
	font-size:14px; font-weight:400; color:var(--text-main);}
.sc-box .sc-item input[type=checkbox]{
	-webkit-appearance:checkbox;   /* 광역 appearance:none 되돌리기 (구형 웹뷰용 접두어) */
	appearance:auto;
	width:20px; height:20px; padding:0; margin:0; flex:none;
	border:0; background:none; border-radius:0;
	accent-color:var(--brand);
}
.sc-box .sc-item span{min-width:0; word-break:keep-all;}
.sc-box .sc-etc-row{display:flex; align-items:center; gap:8px; margin:6px 0 0;
	font-size:13px; font-weight:700; color:var(--text-main);}
/* 기타 칸 글자 16px — 폰에서 포커스 확대(iOS)를 막는 입력칸 공통 규칙 */
.sc-box .sc-etc-row .sc-etc{flex:1; min-width:0; width:auto; font-size:16px; font-family:inherit;
	font-weight:400; padding:9px 11px; border:1px solid var(--border);
	border-radius:var(--radius-sm); background:var(--input-bg); color:var(--text-main);
	-webkit-appearance:none; appearance:none;}
.sc-box .sc-hint{font-size:12px; font-weight:400; color:var(--text-sub); margin:8px 2px 0; line-height:1.5;}

/* ---------- 설정 > 일정 공단반영 안내 (config_ltcsync.jsp) ----------
   켜면 공단 기록이 실제로 바뀌는 기능이라, 무엇이 언제 일어나는지를 목록으로
   또렷하게 읽히게 한다. 글머리 점은 가운뎃점 하나로 충분하다 — 기본 list-style
   은 들여쓰기가 카드 안쪽 여백과 어긋난다. */
.ltc-note{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px;}
.ltc-note li{
	position:relative; padding-left:14px;
	font-size:13.5px; line-height:1.65; color:var(--text-sub); word-break:keep-all;
}
.ltc-note li::before{
	content:''; position:absolute; left:2px; top:9px;
	width:5px; height:5px; border-radius:50%; background:var(--brand-light, var(--brand));
}
.ltc-note li b{font-weight:800; color:var(--text-main);}

/* 공단 반영 실패 사유 — 안내문 아래 한 줄 더. 사유는 공단이 준 말이라 길 수 있어
   줄바꿈을 허용하고 글자를 한 단계 줄인다. */
.err-why{display:block; margin-top:5px; font-size:12.5px; font-weight:400;
	line-height:1.55; opacity:.9; word-break:keep-all;}

/* ---------- 「공단연동 가능」 띠 (일정관리) ----------
   경고가 아니라 상태 표시라 빨강·주황은 쓰지 않는다. 옅은 색·작은 글자는 눈에 안 띄어
   브랜드 진한 색 바탕 + 흰 글씨 + 본문 크기의 띠다. 왼쪽 밝은 세로줄과 천천히 도는 동기화 아이콘이
   "지금 켜져 있다"는 느낌을 준다. 12스킨 모두 --brand-dark 가 있어 라이트·다크 어느 쪽에서도 흰 글씨가 읽힌다. */
.ltc-badge{
	display:flex; align-items:center; gap:11px;
	margin:0 0 12px; padding:12px 14px;
	border:0; border-left:5px solid var(--brand-light, var(--brand)); border-radius:12px;
	background:var(--brand-dark, var(--brand));
	font-size:14px; line-height:1.45; font-weight:600; color:#fff;
	box-shadow:0 4px 14px rgba(0,0,0,.14);
	word-break:keep-all;
}
.ltc-badge svg{width:22px; height:22px; flex:none; stroke:currentColor; fill:none; stroke-width:2.1;
	animation:ltc-spin 2.6s linear infinite;}
.ltc-badge b{font-weight:900; font-size:15px; letter-spacing:-.2px;}
@keyframes ltc-spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion: reduce){.ltc-badge svg{animation:none;}}

/* ---------- 일정 연속 등록 · 같은 시간 묶음 (/mobile/plan_input.htm) ----------
   카드 맨 위는 큰 체크 스위치(제목+설명), 켜면 아래 몸통이 펼쳐진다.
   연속 등록: 요일 칸 일곱 개(한꺼번에 고르기) + 이 달 달력(날짜를 눌러 넣고 뺀다) + 고른 날짜 목록.
   묶음: 날짜 목록에 체크(지금 여는 일정은 고정). 일 빨강·토 파랑, 고르면 브랜드 색 — 일정관리 달력과 같은 말. */
.rp-switch{display:flex; align-items:flex-start; gap:10px; cursor:pointer;}
.rp-switch input{flex:none; width:20px; height:20px; margin:2px 0 0; accent-color:var(--brand);}
.rp-sw-body{display:flex; flex-direction:column; gap:3px; min-width:0;}
.rp-sw-title{font-size:15px; font-weight:800; color:var(--text-main); word-break:keep-all;}
.rp-sw-title b{color:var(--brand-text);}
.rp-sw-sub{font-size:12px; line-height:1.45; color:var(--text-sub); word-break:keep-all;}
.rp-body{margin-top:14px; padding-top:14px; border-top:1px dashed var(--border);}
.rp-days{display:grid; grid-template-columns:repeat(7, 1fr); gap:6px;}
.rp-day{
	font-family:inherit; height:40px; padding:0; border-radius:10px;
	border:1.5px solid var(--border); background:var(--card-bg);
	font-size:15px; font-weight:800; color:var(--text-main); cursor:pointer;
}
.rp-day.sun{color:var(--red);}
.rp-day.sat{color:var(--blue);}
.rp-day.half{border-color:var(--brand); box-shadow:inset 0 0 0 1px var(--brand);}   /* 그 요일 중 일부만 골라짐 */
.rp-day.on{background:var(--brand); border-color:var(--brand); color:#fff;}
.rp-day:focus-visible{outline:2px solid var(--brand-light); outline-offset:2px;}
/* 달력 — 날짜를 눌러 고른다. 머리글 일곱 칸 + 앞쪽 빈칸 + 날짜 버튼 */
.rp-cal{display:grid; grid-template-columns:repeat(7, 1fr); gap:4px;}
.rp-cal .h{text-align:center; font-size:11.5px; font-weight:800; color:var(--text-sub); padding:2px 0 4px;}
.rp-cal .h.sun{color:var(--red);}
.rp-cal .h.sat{color:var(--blue);}
.rp-cal .cd{
	position:relative; font-family:inherit; height:42px; padding:0; border-radius:10px;
	border:1.5px solid var(--border); background:var(--card-bg);
	font-size:15px; font-weight:800; color:var(--text-main); cursor:pointer;
	font-variant-numeric:tabular-nums;
}
.rp-cal .cd.sun, .rp-cal .cd.hol{color:var(--red);}
.rp-cal .cd.sat{color:var(--blue);}
.rp-cal .cd.hol::after{content:''; position:absolute; left:50%; bottom:5px; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:var(--red);}
.rp-cal .cd.base{box-shadow:inset 0 0 0 2px var(--brand-light);}   /* 기준 날짜(위 날짜 칸) */
.rp-cal .cd.on{background:var(--brand); border-color:var(--brand); color:#fff;}
.rp-cal .cd.on::after{background:#fff;}
.rp-cal .cd:focus-visible{outline:2px solid var(--brand-light); outline-offset:2px;}
.rp-sum{margin:12px 2px 0; font-size:13px; font-weight:800; color:var(--brand-text);}
.rp-list{margin-top:8px; display:flex; flex-direction:column; gap:6px; max-height:320px; overflow:auto;}
.rp-row{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px; background:var(--surface-2); cursor:pointer;}
.rp-row input{flex:none; width:18px; height:18px; margin:0; accent-color:var(--brand);}
.rp-row.off{opacity:.45;}
.rp-row.plain{cursor:default;}   /* 연속 등록의 고른 날짜 목록 — 체크 없이 보기만(빼기는 달력에서) */
.rp-row.me{box-shadow:inset 0 0 0 1.5px var(--brand-border);}
.rp-date{flex:none; min-width:78px; font-size:14px; font-weight:800; color:var(--text-main); font-variant-numeric:tabular-nums;}
.rp-meta{flex:1; min-width:0; font-size:12.5px; color:var(--text-sub); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.rp-row.me .rp-meta{color:var(--brand-text); font-weight:800;}
.rp-tag{flex:none; font-size:11px; font-weight:800; color:var(--orange);}
/* 묶음 수정 중엔 날짜를 잠근다(날짜는 줄마다 다르다) */
input[type="date"].locked{background:var(--surface-2); color:var(--text-sub);}

/* ---------- 달 단위 공단 반영 (/mobile/ltcsync_month.htm) ----------
   대상 목록은 연속 등록의 줄(.rp-row)을 그대로 쓰고, 진행은 막대 + 현재 수급자 + 합계 + 줄마다 상태 알약. */
.ls-list{max-height:360px;}
.ls-name{min-width:96px;}
.ls-actions{display:flex; flex-direction:column; gap:10px; margin:6px 0 16px;}
.ls-actions .btn-ghost{width:100%; padding:14px 18px;}
.ls-bar{height:10px; border-radius:999px; background:var(--surface-2); overflow:hidden; margin:4px 0 10px;}
.ls-bar i{display:block; height:100%; width:0; background:var(--brand); border-radius:999px; transition:width .3s;}
.ls-cur{margin:0 2px 6px; font-size:14px; font-weight:700; color:var(--text-main); word-break:keep-all;}
.ls-sum{margin:0 2px 12px; font-size:13px; font-weight:800; color:var(--brand-text);}
.ls-state{flex:none; font-size:12px; font-weight:800; padding:3px 9px; border-radius:999px; background:var(--card-bg); border:1px solid var(--border); color:var(--text-sub);}
.ls-state.ok{color:var(--brand-text); border-color:var(--brand-border); background:var(--brand-tint);}
.ls-state.run{color:var(--orange); border-color:var(--orange);}
.ls-state.fail{color:var(--red); border-color:var(--red);}
.ls-row-msg{flex:1; min-width:0; font-size:12.5px; color:var(--text-sub); line-height:1.4; word-break:keep-all;}
.ls-job{border:1.5px solid var(--brand-border); box-shadow:0 6px 18px rgba(0,0,0,.08);}   /* 진행·결과 카드 — 눈에 띄게 */
/* 고를 수 없는 선택지(설정 > 일정 공단반영 「사용함」 — 공동인증서 미등록) */
.pick-opt.off{cursor:not-allowed;}
.pick-opt.off .pick-body{opacity:.5;}
/* 「공단연동 가능」 띠 오른쪽의 「공단 동기화」 링크 */
.ltc-badge a{margin-left:auto; flex:none; color:#fff; font-size:13px; font-weight:800; text-decoration:underline; text-underline-offset:3px;}

/* ── 초대 주소 · 첫 비밀번호 설정 (mobile/join.jsp) ──────────
   로그인 화면의 .card.login / .field / .input-shell / .btn-primary 를 그대로
   쓰고, 여기서는 «누구에게 온 초대인가» 를 보여 주는 줄과 동의 칸만 더한다. */
.join-who{
	display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px;
	margin:2px 0 14px; padding:12px 14px; border-radius:12px;
	background:var(--brand-tint); border:1px solid var(--border);
}
.join-who .join-org{ flex:0 0 100%; font-size:12px; color:var(--text-sub); }
.join-who .join-name{ font-size:17px; font-weight:700; color:var(--text-main); }
.join-who .join-kind{
	padding:2px 8px; border-radius:999px; font-size:12px; font-weight:600;
	background:#78a50a; color:#fff;
}
.join-who .join-hp{ margin-left:auto; font-size:13px; color:var(--text-sub); letter-spacing:.02em; }

/* 동의 칸 — 글씨가 길어 두 줄이 되므로 체크박스를 위에 맞춘다 */
.join-agree{
	display:flex; align-items:flex-start; gap:9px;
	margin:4px 0 16px; font-size:13px; line-height:1.5; color:var(--text-sub);
	cursor:pointer;
}
.join-agree input{ flex:0 0 auto; width:18px; height:18px; margin-top:1px; accent-color:var(--brand-text); }

.join-note{
	margin:14px 0 0; text-align:center;
	font-size:12px; color:var(--text-sub);
}

/* 오류 화면의 «로그인 화면으로» 는 <a> 라 버튼처럼 보이도록 맞춘다 */
.btn-primary.as-link{
	display:flex; align-items:center; justify-content:center;
	text-decoration:none;
}
/* ── 모바일 전용 계정 화면 (pick.jsp · my.jsp) ─────────────
   직원용 메인(main.jsp)과 달리 아래 메뉴 띠가 없다 — 이 계정은 볼 수 있는
   것이 제한돼 있어 오갈 곳이 없기 때문이다. */

/* 대상 고르기 */
.pick-list{ display:flex; flex-direction:column; gap:8px; margin:4px 0 6px; }
.pick-item{
	display:flex; align-items:center; gap:12px; padding:14px;
	border:1px solid var(--border); border-radius:12px;
	background:var(--card-bg); text-decoration:none; color:inherit;
	transition:border-color .15s, transform .12s, box-shadow .15s;
}
.pick-item:active{ transform:scale(.99); }
.pick-item:hover{ border-color:var(--brand-text); box-shadow:0 2px 10px rgba(120,165,10,.12); }
.pick-ico{
	flex:0 0 auto; width:42px; height:42px; border-radius:12px;
	display:flex; align-items:center; justify-content:center;
	background:var(--brand-tint); color:var(--brand-text);
}
.pick-ico svg{ width:22px; height:22px; }
.pick-ico.cust{ background:#fdeef0; color:#d2607a; }
.pick-tx{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px; }
.pick-tx b{ font-size:15px; font-weight:700; }
.pick-tx em{ font-style:normal; font-size:12px; color:var(--text-sub); }
.pick-arrow{ flex:0 0 auto; color:var(--text-sub); }
.pick-arrow svg{ width:18px; height:18px; }










.mwrap{ padding:14px 14px 28px; }











.my-note{
	margin:12px 0 0; padding:12px 14px; border-radius:12px;
	background:var(--brand-tint); border:1px solid var(--border);
	font-size:13px; line-height:1.6; color:var(--text-sub);
}
.my-note p{ margin:0; }

.my-info{ margin-top:14px; }
.my-row{
	display:flex; align-items:center; justify-content:space-between; gap:10px;
	padding:11px 2px; border-bottom:1px solid var(--border); font-size:13.5px;
}
.my-row:last-child{ border-bottom:0; }
.my-row span{ color:var(--text-sub); }
.my-change{ margin-left:8px; font-size:12.5px; color:var(--brand-text); }
/* 내 화면 배너의 이름 옆 「정보수정」 알약 (my.jsp). 이름은 말줄임을 지키고 알약은 줄지 않는다. */
.who .name.has-edit{ display:flex; align-items:center; gap:8px; overflow:visible; }
.who .name.has-edit > span{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.who .my-edit{
	flex:none; display:inline-flex; align-items:center; height:24px; padding:0 10px;
	border:1px solid rgba(255,255,255,0.75); border-radius:999px; background:rgba(255,255,255,0.18);
	color:#fff; font-size:12px; font-weight:700; text-decoration:none; letter-spacing:-0.2px;
}
.who .my-edit:active{ background:rgba(255,255,255,0.32); }
/* ── 모바일 전용 계정 상세 (my_pay · my_pay_view · my_self) ── */







/* 해 고르기 (my_pay.jsp) — 화살표 SVG 는 크기 규칙이 없으면 화면 가득 커진다 */
.yr-nav{ display:flex; align-items:center; justify-content:center; gap:14px; margin:4px 0 14px; }
.yr-nav b{ font-size:17px; font-weight:800; min-width:64px; text-align:center; }
.yr-btn{
	width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
	background:var(--card-bg); border:1px solid var(--border); color:var(--text-main); text-decoration:none;
}
.yr-btn svg{ width:18px; height:18px; stroke:currentColor; }
.yr-btn:active{ background:var(--brand-tint); }
.yr-btn.off{ visibility:hidden; }

/* 급여 월별 목록 */
.pay-list{ list-style:none; margin:0; padding:0; }
.pay-list li{ margin-bottom:8px; }
.pay-list a{
	display:flex; align-items:center; gap:12px; padding:14px;
	border:1px solid var(--border); border-radius:12px;
	background:var(--card-bg); text-decoration:none; color:inherit;
}
.pay-list a:active{ transform:scale(.995); }
.pay-ym{ flex:0 0 auto; min-width:44px; font-size:15px; font-weight:700; color:var(--brand-text); }
.pay-amt{ display:flex; flex-direction:column; gap:2px; }
.pay-amt b{ font-size:16px; }
.pay-amt em{ font-style:normal; font-size:12px; color:var(--text-sub); }
.pay-go{ margin-left:auto; color:var(--text-sub); }
.pay-go svg{ width:18px; height:18px; }

/* 큰 금액 머리 */
.pv-sum{
	position:relative; padding:18px; border-radius:14px; margin-bottom:12px;
	background:var(--card-bg); border:1px solid var(--border);
	display:flex; flex-direction:column; gap:4px;
}
.pv-sum > span{ font-size:12.5px; color:var(--text-sub); }
.pv-sum b{ font-size:28px; font-weight:800; letter-spacing:-.02em; }
.pv-sum b i{ font-style:normal; font-size:16px; font-weight:700; margin-left:2px; }
.pv-sum em{ font-style:normal; font-size:12.5px; color:var(--text-sub); }
.pv-type{
	position:absolute; top:16px; right:16px; padding:3px 9px; border-radius:999px;
	background:var(--brand-tint); color:var(--brand-text); font-size:11.5px; font-weight:700;
}

/* 항목 표 */
.pv-box{
	margin-bottom:10px; padding:4px 14px 8px; border-radius:14px;
	background:var(--card-bg); border:1px solid var(--border);
}
.pv-box h2{ margin:12px 0 6px; font-size:13px; color:var(--text-sub); font-weight:700; }
.pv-row{
	display:flex; align-items:center; justify-content:space-between; gap:10px;
	padding:9px 0; border-bottom:1px solid var(--border); font-size:14px;
}
.pv-row:last-child{ border-bottom:0; }
.pv-row span{ color:var(--text-main); }
.pv-row b{ font-variant-numeric:tabular-nums; }
.pv-tag{
	font-style:normal; margin-left:4px; padding:1px 6px; border-radius:999px;
	background:var(--brand-tint); color:var(--brand-text); font-size:11px; font-weight:700;
}
/* 0원 항목은 기본으로 숨긴다 — 40개가 넘어 그대로 두면 읽을 수 없다 */
.pv-row.zero{ display:none; }
body.pv-showzero .pv-row.zero{ display:flex; }
.pv-row.zero b{ color:var(--text-sub); }

.pv-more{
	display:block; width:100%; margin:2px 0 10px; padding:11px;
	border:1px solid var(--border); border-radius:12px;
	background:var(--card-bg); color:var(--text-sub);
	font-size:13.5px; font-weight:600; cursor:pointer;
}

/* ── 직원 급여명세서 가독성 — body.pay-page(my_pay.jsp · my_pay_view.jsp) 아래로 가둔다 ──
   원칙은 수급자관리(.cust-page)·본인부담금과 같다: 낱말 단위 줄바꿈 · 잔글씨 14~16px ·
   본문 폭을 초록 머리줄과 맞춤 · 금액은 이름표와 함께. */
.pay-page .mwrap{ padding:14px 0 28px; word-break:keep-all; overflow-wrap:anywhere; }
.pay-page .myhead-tx b{ font-size:18px; }
.pay-page .myhead-tx em{ font-size:14px; }
.pay-page .my-note{ font-size:15px; }
.pay-page .pay-note{ margin:14px 4px 0; font-size:14px; line-height:1.6; color:var(--text-sub); }
/* 해 고르기 */
.pay-page .yr-nav{ gap:18px; margin:6px 0 16px; }
.pay-page .yr-nav b{ font-size:20px; }
.pay-page .yr-btn{ width:42px; height:42px; }
.pay-page .yr-btn svg{ width:20px; height:20px; }
/* 달별 줄 — 왼쪽 달 칸(«1월», 옅은 초록) · 실지급액(이름표 + 21px) · 지급·공제 한 줄 */
.pay-page .pay-list li{ margin-bottom:10px; }
.pay-page .pay-list a{ gap:14px; padding:14px 12px 14px 14px; border-radius:16px; box-shadow:var(--sh-1); }
.pay-page .pay-ym{
	flex:none; min-width:58px; padding:8px 4px; border-radius:12px; text-align:center;
	background:var(--brand-tint); color:var(--brand-text); font-size:15px; font-weight:800; line-height:1.1;
}
.pay-page .pay-ym b{ font-size:24px; font-weight:900; font-variant-numeric:tabular-nums; }
.pay-page .pay-amt{ min-width:0; gap:3px; }
.pay-page .pay-amt small{ font-size:13px; font-weight:700; color:var(--text-sub); }
.pay-page .pay-amt b{ font-size:21px; font-weight:800; letter-spacing:-0.3px; font-variant-numeric:tabular-nums; }
.pay-page .pay-amt b i{ font-style:normal; font-size:15px; font-weight:700; margin-left:1px; }
.pay-page .pay-amt em{ font-size:14px; line-height:1.45; }
.pay-page .pay-amt em .nw{ white-space:nowrap; }
/* 줄이 좁으면(큰 글자 + 320px 폰) 달 칸을 줄이고 화살표를 뺀다(줄 전체가 눌리는 곳이라 화살표가 없어도 된다).
   zoom 은 미디어쿼리에 안 잡혀 컨테이너 쿼리로 본다. */
.pay-page .pay-list a{ container-type:inline-size; }
@container (max-width: 250px){
	.pay-page .pay-ym{ min-width:46px; padding:6px 3px; }
	.pay-page .pay-ym b{ font-size:20px; }
	.pay-page .pay-go{ display:none; }
}
.pay-page .pay-go svg{ width:20px; height:20px; }
/* 명세서 머리 — 실지급액 34px + 계산 줄(본인부담금 화면의 .due-calc 와 같은 모양) */
.pay-page .pv-sum{ padding:18px 18px 16px; border-radius:16px; box-shadow:var(--sh-1); gap:2px; }
.pay-page .pv-sum > span:first-child{ font-size:14.5px; font-weight:700; }
.pay-page .pv-sum b{ font-size:34px; line-height:1.2; }
.pay-page .pv-sum b i{ font-size:18px; }
.pay-page .pv-type{ font-size:13px; padding:3px 11px; }
.pay-page .pv-calc{ margin-top:12px; border:1px solid var(--border); border-radius:12px; background:var(--surface-2); overflow:hidden; }
.pay-page .pv-calc p{
	margin:0; padding:9px 12px; display:flex; align-items:baseline; justify-content:space-between; gap:10px;
	font-size:15.5px; border-bottom:1px solid var(--border);
}
.pay-page .pv-calc p:last-child{ border-bottom:0; }
.pay-page .pv-calc p span{ color:var(--text-sub); font-weight:700; }
.pay-page .pv-calc p strong{ font-size:16px; font-weight:800; white-space:nowrap; font-variant-numeric:tabular-nums; }
.pay-page .pv-calc p strong i{ font-style:normal; margin-right:3px; color:var(--text-sub); }
/* 항목 표 — 묶음 제목 오른쪽에 그 묶음 합계, 항목 16px */
.pay-page .pv-box{ padding:4px 16px 8px; border-radius:16px; margin-bottom:12px; box-shadow:var(--sh-1); }
.pay-page .pv-box h2{
	display:flex; align-items:baseline; justify-content:space-between; gap:10px;
	margin:14px 0 6px; font-size:16px; font-weight:800; color:var(--text-main);
}
.pay-page .pv-box h2 .tot{ font-size:16px; font-weight:800; color:var(--brand-text); white-space:nowrap; font-variant-numeric:tabular-nums; }
.pay-page .pv-row{ padding:11px 0; font-size:16px; line-height:1.4; }
.pay-page .pv-row span{ min-width:0; }
.pay-page .pv-row b{ flex:none; white-space:nowrap; }
.pay-page .pv-tag{ font-size:12.5px; padding:1px 8px; vertical-align:1px; }
.pay-page .pv-more{
	min-height:50px; font-size:15.5px; font-weight:700;
	color:var(--brand-text); border-color:var(--brand-border); background:var(--brand-tint);
}














/* ── 알림 받기 (my.jsp) ────────────────────────────────── */
.push-box{
	margin-top:12px; padding:14px; border-radius:14px;
	background:var(--card-bg); border:1px solid var(--border);
}
.push-head{ display:flex; align-items:center; gap:11px; }
.push-ico{
	flex:0 0 auto; width:38px; height:38px; border-radius:11px;
	display:flex; align-items:center; justify-content:center;
	background:var(--brand-tint); color:var(--brand-text);
}
.push-ico svg{ width:20px; height:20px; }
.push-tx{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.push-tx b{ font-size:15px; }
.push-tx em{ font-style:normal; font-size:12px; color:var(--text-sub); }
.push-btn{
	flex:0 0 auto; padding:9px 14px; border-radius:10px; cursor:pointer;
	border:1px solid #6d9509; background:#78a50a; color:#fff;
	font-size:13.5px; font-weight:700;
}
.push-btn.off{ background:var(--card-bg); color:#6d7360; border-color:var(--border); }
.push-btn:disabled{ opacity:.6; cursor:default; }

.push-msg{ margin:10px 0 0; font-size:13px; line-height:1.55; color:var(--text-sub); }
.push-msg:empty{ display:none; }
.push-msg.ok{ color:#4d6b0a; }
.push-msg.err{ color:#b93326; }
.push-note{
	margin:10px 0 0; padding-top:10px; border-top:1px solid var(--border);
	font-size:12px; line-height:1.6; color:var(--text-sub);
}
/* ── 로그인 아이디 칸 안내 (login.jsp) ──────────────────────
   이 칸 하나가 «기관 아이디» 와 «휴대폰번호» 둘 다 받는다. 초대받은 분이
   무엇을 넣어야 할지 몰라 헤매지 않도록 이름표와 한 줄 안내를 둔다. */
.field label .lb-or{
	font-weight:500; font-size:12.5px; color:var(--text-sub); margin-left:2px;
}
.field-help{
	margin:7px 2px 0; font-size:12px; line-height:1.5; color:var(--text-sub);
}
.field-help b{ color:var(--text-main); }
/* ── 수급자 홈 타일 아이콘 (my.jsp) ────────────────────────
   급여제공기록 칸. 나머지 색(.c-selfpay · .c-plan · .c-pay)은 이미 있다. */
.menu-tile .ico.c-rfid{ background:#f3ecfa; color:#6b4a9e; }

/* ══ 수급자 홈 (my.jsp) ══════════
   척도: 글자 12.5 13 14 15 16 20 / 모서리 14 20 999 / 간격 6 8 10 12 14. 색은 토큰으로.
   ── 얇은 배너: 이름 한 줄만. 아래 여백을 줄여 첫 화면에 네 줄이 다 들어오게 한다. */
.top-banner.home-thin{ padding-bottom:22px; }
.top-banner.home-thin .topbar{ margin-bottom:0; }
/* 알림이 없으면 본문은 배너 아래에 그냥 놓인다(.banner-content 의 -22px 를 되돌림). */
.banner-content.home-body{ margin-top:12px; }
/* 알림이 있으면 배너를 조금 더 내리고, 유리 알림이 배너에 절반쯤 걸치게 한다 — 유리 뒤로 초록과 떠다니는 원이 비쳐야 유리로 보인다. */
.top-banner.home-thin.has-glass{ padding-bottom:56px; }   /* 알림 카드(.home-alert)가 배너에 조금만 걸치게 */
.banner-content.home-body.has-glass{ margin-top:-40px; }

/* ── 「이번 달」 유리 알림 .home-glass — my.jsp 는 아래 .home-alert 를 쓴다(되돌리기용으로 남김)
   폰의 알림 배너 문법 그대로: 앱 아이콘(둥근 네모) · 앱 이름 + 종류 · 제목 한 줄 · 작은 안내.
   반투명 흰 유리 + 뒤 배경 흐림(backdrop-filter) + 위쪽 하이라이트 선 + 부드러운 그림자. 메뉴 줄과는 재질부터 다르다. */
.home-glass{
	position:relative; display:flex; align-items:flex-start; gap:12px;
	margin:0 0 16px; padding:13px 14px 13px 13px; border-radius:20px;
	background:rgba(255,255,255,0.62);
	-webkit-backdrop-filter:blur(18px) saturate(170%); backdrop-filter:blur(18px) saturate(170%);
	border:1px solid rgba(255,255,255,0.85);
	box-shadow:0 14px 34px -14px rgba(30,40,20,0.45), inset 0 1px 0 rgba(255,255,255,0.9);
	color:#1f2a1c; text-decoration:none;
	animation:rise .5s ease both;
}
/* 유리 위쪽으로 빛이 비치는 느낌 — 살짝 밝은 사선 */
.home-glass::before{
	content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
	background:linear-gradient(135deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.08) 45%, rgba(255,255,255,0) 100%);
}
/* 흐림을 못 그리는 옛 웹뷰는 유리를 더 불투명하게(글자가 안 묻히게) */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
	.home-glass{ background:rgba(255,255,255,0.9); }
}
.home-glass .app{
	position:relative; flex:none; width:42px; height:42px; border-radius:13px;
	display:flex; align-items:center; justify-content:center; color:#fff;
	background:linear-gradient(145deg, var(--brand-light), var(--brand-dark));
	box-shadow:0 6px 14px -6px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.45);
}
.home-glass .app svg{ width:22px; height:22px; stroke:currentColor; }
.home-glass .tx{ position:relative; flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.home-glass .hd{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.home-glass .hd em{ font-style:normal; font-size:13px; font-weight:800; letter-spacing:0.2px; color:rgba(31,42,28,0.7); }
.home-glass .hd small{ font-size:12.5px; font-weight:700; color:rgba(31,42,28,0.6); white-space:nowrap; }
.home-glass .tx b{ font-size:16px; font-weight:700; line-height:1.4; word-break:keep-all; letter-spacing:-0.2px; }
.home-glass .tx b strong{ font-weight:900; font-variant-numeric:tabular-nums; }
.home-glass .tx i{ font-style:normal; font-size:14px; font-weight:600; color:rgba(31,42,28,0.66); }
.home-glass:active{ background:rgba(255,255,255,0.75); }
/* 납부 완료: 아이콘만 차분한 초록 체크로(유리는 같다) */
.home-glass.paid .app{ background:linear-gradient(145deg, #7fb56a, #3d7a2c); }
/* 다크: 어두운 유리 */
:root[data-theme="dark"] .home-glass{
	background:rgba(28,32,28,0.55); border-color:rgba(255,255,255,0.22); color:var(--text-main);
	box-shadow:0 14px 34px -14px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.18);
}
:root[data-theme="dark"] .home-glass::before{ background:linear-gradient(135deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.03) 45%, rgba(255,255,255,0) 100%); }
:root[data-theme="dark"] .home-glass .hd em{ color:rgba(232,233,230,0.75); }
:root[data-theme="dark"] .home-glass .hd small,
:root[data-theme="dark"] .home-glass .tx i{ color:rgba(232,233,230,0.6); }
:root[data-theme="dark"] .home-glass:active{ background:rgba(28,32,28,0.7); }
/* 유리 폭이 215px 아래면(큰 글자 + 320px 폰) 앱 아이콘을 접어 글 자리를 낸다(아래 목록 줄의 아이콘 접기와 같은 방식).
   그래도 모자라면 낱말 안에서 접는다. */
.home-glass{ container-type:inline-size; }
.home-glass .tx b{ overflow-wrap:anywhere; }
@container (max-width: 215px){
	.home-glass .app{ display:none; }
}

/* ── 홈 알림 카드 .home-alert (my.jsp — 위 유리 .home-glass 대신 쓴다)
   폰 알림 카드 문법: 왼쪽 색 띠 · 종 아이콘(새 알림 빨간 점이 숨 쉰다) · «청구 알림» 꼬리표 · 굵은 제목 · 안내 · 오른쪽 아래 「확인하기 ›」 · 위에서 살짝 내려오며 뜸.
   메뉴 줄(.home-row: 흰 카드 · 둥근 아이콘 · 이름 · 꺾쇠)과 색 · 짜임 · 말투가 달라야 알림으로 읽힌다.
   종류(kind)별 색: bill 주황 · bill_paid 초록(점 없음) · pay 청록 · visit 파랑. */
.home-alert{
	--al:#d9791a; --al-bg:#fff4e3;                    /* 기본 = 청구(주황) */
	position:relative; display:flex; align-items:flex-start; gap:12px;
	margin:0 0 12px; padding:12px 14px 12px 14px; border-radius:16px;
	background:#fff; border:1px solid rgba(31,42,28,0.08);
	box-shadow:0 12px 28px -14px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.06);
	color:var(--text-main); text-decoration:none; overflow:hidden;
	container-type:inline-size;
	animation:alert-in .5s cubic-bezier(.2,.8,.2,1) both;
}
.home-alert + .home-alert{ animation-delay:.08s; }
.home-alert::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--al); }
.home-alert .bell{
	position:relative; flex:none; width:42px; height:42px; border-radius:50%;
	display:flex; align-items:center; justify-content:center; background:var(--al-bg); color:var(--al);
}
.home-alert .bell svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.home-alert .bell .dot{
	position:absolute; top:0; right:0; width:11px; height:11px; border-radius:50%;
	background:#e5484d; border:2px solid #fff; box-shadow:0 0 0 0 rgba(229,72,77,0.45);
	animation:alert-dot 1.8s ease-out infinite;
}
.home-alert .tx{ position:relative; flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.home-alert .hd{ display:flex; align-items:center; gap:6px; }
.home-alert .hd em{ font-style:normal; font-size:11.5px; font-weight:800; letter-spacing:0.2px; line-height:1.5; color:var(--al); background:var(--al-bg); border-radius:999px; padding:2px 9px; white-space:nowrap; }
.home-alert .hd small{ margin-left:auto; font-size:12px; font-weight:600; color:var(--text-sub); white-space:nowrap; }
.home-alert .tx b{ font-size:16px; font-weight:700; line-height:1.4; word-break:keep-all; overflow-wrap:anywhere; letter-spacing:-0.2px; }
.home-alert .tx b strong{ font-weight:900; font-variant-numeric:tabular-nums; }
.home-alert .tx i{ font-style:normal; font-size:13.5px; font-weight:600; color:var(--text-sub); }
.home-alert .cta{ align-self:flex-end; display:inline-flex; align-items:center; gap:1px; margin-top:4px; font-size:13px; font-weight:800; color:var(--al); }
.home-alert .cta svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.home-alert:active{ transform:scale(0.985); }
.home-alert.k-bill_paid{ --al:#2e7d5b; --al-bg:#e5f4ec; }
.home-alert.k-bill_paid .bell .dot{ display:none; }   /* 완료 알림은 빨간 점 없이 */
.home-alert.k-pay{ --al:#1d7268; --al-bg:#dff1ef; }
.home-alert.k-visit{ --al:#35619e; --al-bg:#e6eefa; }
@keyframes alert-in{ from{ opacity:0; transform:translateY(-10px); } to{ opacity:1; transform:none; } }
@keyframes alert-dot{ 0%{ box-shadow:0 0 0 0 rgba(229,72,77,0.45); } 70%{ box-shadow:0 0 0 7px rgba(229,72,77,0); } 100%{ box-shadow:0 0 0 0 rgba(229,72,77,0); } }
/* 글자 «아주 크게» + 320px 폰 — 카드 폭이 215px 아래면 종 아이콘을 접어 글 자리를 낸다(유리 때와 같은 규칙) */
@container (max-width: 215px){
	.home-alert .bell{ display:none; }
}
/* 다크(모바일 계정은 밝게 고정이라 보통 안 탄다 — 기관 계정 미리보기 대비) */
:root[data-theme="dark"] .home-alert{ background:#1e2320; border-color:rgba(255,255,255,0.1); box-shadow:0 14px 34px -14px rgba(0,0,0,0.7); }
:root[data-theme="dark"] .home-alert .bell .dot{ border-color:#1e2320; }

/* ── 큰 글씨 목록: 한 줄에 하나. 76px 줄, 20px 이름, 아래 상태 한 줄. */
.home-list{ display:flex; flex-direction:column; gap:10px; margin-bottom:22px; container-type:inline-size; }   /* container: 아래 «좁은 목록» 규칙이 본다 */
.home-row{
	display:grid; grid-template-columns:48px 1fr 18px; align-items:center; gap:12px;
	min-height:76px; padding:12px 12px 12px 14px;
	background:var(--card-bg); border:1px solid var(--border); border-radius:20px;
	color:var(--text-main); text-decoration:none; box-shadow:var(--sh-1);
	animation:rise .5s ease both; transition:transform .12s ease;
}
.home-row:active{ transform:scale(0.985); background:var(--brand-tint); border-color:var(--brand-border); }
.home-row .ico{
	width:48px; height:48px; border-radius:14px;
	display:flex; align-items:center; justify-content:center;
	background:var(--brand-tint); color:var(--brand-text);
}
.home-row .ico svg{ width:24px; height:24px; stroke:currentColor; }
/* 아이콘 색은 타일과 같은 색표를 쓴다(.menu-tile .ico.c-* 와 나란히) */
.home-row .ico.c-selfpay{ background:#e9f3e4; color:#3d7a2c; }
.home-row .ico.c-plan   { background:#e6eefa; color:#35619e; }
.home-row .ico.c-pay    { background:#e0f2f1; color:#1d7268; }
.home-row .ico.c-memo   { background:#efe9fa; color:#6a4fb0; }
.home-row .ico.c-rfid   { background:#f3ecfa; color:#6b4a9e; }
:root[data-theme="dark"] .home-row .ico.c-selfpay{ background:#1d2b1c; color:#8fc47c; }
:root[data-theme="dark"] .home-row .ico.c-plan   { background:#1c2636; color:#8db3ea; }
:root[data-theme="dark"] .home-row .ico.c-pay    { background:#173432; color:#7fd0c6; }
:root[data-theme="dark"] .home-row .ico.c-memo   { background:#27203a; color:#b9a5ec; }
:root[data-theme="dark"] .home-row .ico.c-rfid   { background:#2a2136; color:#bea3e6; }
.home-row .tx{ min-width:0; display:flex; flex-direction:column; gap:3px; }
.home-row .tx b{ font-size:20px; font-weight:900; line-height:1.2; letter-spacing:-0.3px; word-break:keep-all; overflow-wrap:anywhere; }
/* 상태 한 줄 — «이번 달 무슨 일이 있나» 의 답이라 15px + 낱말 단위 줄바꿈 */
.home-row .tx i{
	font-style:normal; font-size:15px; line-height:1.4; color:var(--text-sub);
	display:flex; align-items:center; flex-wrap:wrap; gap:4px 6px; word-break:keep-all;
}
.home-row .tx i .new{
	display:inline-block; padding:1px 7px; border-radius:999px;
	background:var(--red); color:#fff; font-size:11px; font-weight:800; line-height:16px;
}
/* 직원 홈 줄(my.jsp) — 이름 / 지금 상태 / 자세한 것(.hr-sub) 세 층.
   지금 상태는 짙게(가장 먼저 읽을 값), 자세한 것은 한 치수 작게·옅게. */
.home-row .tx i{ color:var(--text-main); font-weight:600; }
.home-row .tx .hr-sub{ font-style:normal; font-size:14px; line-height:1.45; color:var(--text-sub); word-break:keep-all; }
.home-row .tx i .new{ font-size:12.5px; line-height:18px; padding:1px 8px; }
/* 배너 — 이름은 홈 목록 이름과 같은 20px. home-thin 은 이 화면(my.jsp)만 쓴다. */
.top-banner.home-thin .who .comp{ font-size:14px; }
.top-banner.home-thin .who .name{ font-size:20px; line-height:1.3; }
/* 보호자 계정은 이름 옆에 «대상 바꾸기» 알약이 붙는다 — 자리가 모자라면 알약이 다음 줄로(이름 혼자서도 넘칠 때만 말줄임). */
.top-banner.home-thin .who .name.has-edit{ flex-wrap:wrap; row-gap:6px; }
.top-banner.home-thin .who .my-edit{ height:28px; padding:0 12px; font-size:13px; }
/* 큰 글자 + 320px 폰이면 이름 혼자서도 한 줄을 넘는다 — 자르지 말고 낱말 단위로 두 줄 */
.top-banner.home-thin .who .name,
.top-banner.home-thin .who .name.has-edit > span{ white-space:normal; word-break:keep-all; overflow-wrap:anywhere; }
.home-row.hi{ border:1.5px solid var(--brand-light); }
.home-row .chev{
	width:18px; height:18px; position:relative; justify-self:end;
}
.home-row .chev::before{
	content:""; position:absolute; top:4px; left:2px; width:9px; height:9px;
	border-right:2.2px solid var(--placeholder); border-bottom:2.2px solid var(--placeholder);
	transform:rotate(-45deg);
}
/* 글자 크기 설정(m_font)은 inc_head 가 루트 zoom 으로 통째로 키우므로 여기 px 값도 같이 커진다 — 따로 둘 것 없음. */
/* 큰 글자에서는 쓸 수 있는 폭이 줄어 이름이 낱말 중간에서 접힌다. zoom 은 미디어쿼리에 안 잡히므로(뷰포트는 그대로다)
   컨테이너 쿼리로 본다 — 목록 폭이 240px 아래면 장식 아이콘을 접어 글 자리를 낸다.
   위 .home-row 기본 규칙보다 뒤에 있어야 한다(같은 명시도라 뒤가 이긴다). 컨테이너 쿼리를 모르는 옛 브라우저는 아이콘이 남고 긴 이름이 접힐 뿐이다. */
@container (max-width: 240px){
	.home-row{ grid-template-columns:1fr 18px; }
	.home-row .ico{ display:none; }
}

/* ── 설정 줄 — 알림 · 정보수정 · 로그아웃 세 칸 */
.home-set-title{ margin:0 0 8px 4px; font-size:14.5px; }
/* 줄 폭이 280px 아래면(큰 글자) 세 칸의 작은 글을 말줄임 대신 두 줄로. zoom 은 미디어쿼리에 안 잡혀 컨테이너 쿼리로 본다 —
   아래 .home-set 기본 규칙보다 뒤에 둬야 하므로 이 절 맨 끝(.home-push-msg 뒤)에 있다. */
.home-set{
	display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px;   /* minmax(0,…): 글자를 키웠을 때 전화번호 칸이 화면 밖으로 밀리지 않고 말줄임 */
}
.home-set-item{
	display:flex; flex-direction:column; align-items:center; gap:6px;
	padding:14px 6px 12px; min-height:96px; min-width:0;
	background:var(--card-bg); border:1px solid var(--border); border-radius:20px;
	color:var(--text-main); text-decoration:none; box-shadow:var(--sh-1);
	font-family:inherit; cursor:pointer; -webkit-appearance:none; appearance:none;
	animation:rise .5s ease .15s both; transition:transform .12s ease;
}
.home-set-item:active{ transform:scale(0.97); background:var(--brand-tint); border-color:var(--brand-border); }
.home-set-item:disabled{ opacity:.6; cursor:default; }
.home-set-item .ico{
	width:42px; height:42px; border-radius:14px;
	display:flex; align-items:center; justify-content:center;
	background:var(--surface-2); color:var(--text-sub);
}
.home-set-item .ico svg{ width:22px; height:22px; stroke:currentColor; }
/* 작은 글은 세 칸 폭(320px 폰에서 86px)에 «010-****-1234» 가 들어가는 크기까지만 */
.home-set-item b{ font-size:15px; font-weight:800; line-height:1.2; }
.home-set-item i{ font-style:normal; font-size:13px; color:var(--text-sub); line-height:1.2; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-0.2px; }
/* 알림 켜짐: 종 아이콘이 초록으로, 「켜짐」 글자도 초록 */
.home-set-item.on .ico{ background:var(--brand-tint); color:var(--brand-text); }
.home-set-item.on i{ color:var(--brand-text); font-weight:800; }
/* 정보수정: 사람 아이콘 파랑 계열 */
.home-set-item[href="/mobile/my_edit.htm"] .ico{ background:#e6eefa; color:#35619e; }
:root[data-theme="dark"] .home-set-item[href="/mobile/my_edit.htm"] .ico{ background:#1c2636; color:#8db3ea; }
/* 로그아웃: 붉은 기운 */
.home-set-item.danger .ico{ background:#fdeceb; color:#b93326; }
:root[data-theme="dark"] .home-set-item.danger .ico{ background:#3a2220; color:#ff9a90; }
.home-push-msg{ margin:10px 4px 0; }
.home-set{ container-type:inline-size; }
@container (max-width: 280px){
	.home-set-item{ padding:12px 4px 10px; }
	.home-set-item i{ white-space:normal; overflow:visible; text-overflow:clip; font-size:12.5px; line-height:1.3; text-align:center; word-break:keep-all; overflow-wrap:anywhere; }
}
/* ── 글자 크기 고르기 (정보수정 my_edit.jsp).
   «가» 다섯 개가 고를 크기 그대로 커진다(글을 안 읽어도 고른다). 고른 칸은 브랜드 색으로 채운다.
   루트 zoom 이 커지면 이 카드도 같이 커지므로 칸은 고정 폭 없이 1fr — 320px 폰 + «아주 크게»(쓸 수 있는 폭 237px)에서도 다섯 칸이 들어간다. */
.font-pick .fp-opts{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:6px; }
.font-pick .fp-opts button{
	min-width:0; height:52px; padding:0; border-radius:14px;
	border:1px solid var(--border); background:var(--surface-2); color:var(--text-main);
	font-family:inherit; font-weight:800; line-height:1; cursor:pointer;
	-webkit-appearance:none; appearance:none; transition:transform .12s ease;
}
.font-pick .fp-opts button:active{ transform:scale(0.95); }
.font-pick .fp-opts button.on{
	background:var(--brand-dark); border-color:var(--brand-dark); color:#fff;
	box-shadow:0 6px 14px -8px rgba(0,0,0,0.5);
}
.font-pick .fp-now{ margin:12px 2px 0; font-size:15px; color:var(--text-sub); }
.font-pick .fp-now b{ margin-left:6px; font-size:16px; font-weight:800; color:var(--brand-text); }
.font-pick .fp-note{ margin:4px 2px 0; font-size:13px; line-height:1.5; color:var(--text-sub); word-break:keep-all; }
/* 직원 홈 줄 아이콘 — 수급자관리 */
.home-row .ico.c-cust{ background:#fdeaf0; color:#b04a72; }
:root[data-theme="dark"] .home-row .ico.c-cust{ background:#341f27; color:#e69ab8; }
/* 직원 홈 줄 아이콘 — 상태변화기록지(my_state.jsp) */
.home-row .ico.c-state{ background:#e6f0f8; color:#2c5f8a; }
:root[data-theme="dark"] .home-row .ico.c-state{ background:#1b2a38; color:#8fbce6; }
/* 홈 「내 서명」 줄 아이콘(my.jsp) — 펜, 노란 기운 */
.home-row .ico.c-sign{ background:#fbf1dc; color:#9a6a12; }
:root[data-theme="dark"] .home-row .ico.c-sign{ background:#36301e; color:#e8c46a; }
/* 수급자 상세의 「수급자 서명」「보호자 서명」 단추 «등록» 표시(customer_view.jsp .jump-btn · my_cust_view.jsp .cv-links) */
.sign-mark{ font-style:normal; font-size:11px; font-weight:800; line-height:1.4; color:#2e7d5b; background:#e3f3ea; border-radius:999px; padding:1px 7px; margin-left:4px; flex:none; }
:root[data-theme="dark"] .sign-mark{ color:#9fdcbb; background:#1f3a2d; }

/* ── 직원 홈: 담당 수급자 목록 (my_cust.jsp) ── */
.cl-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.cl-list a{
	display:grid; grid-template-columns:44px 1fr 16px; align-items:center; gap:12px;
	padding:12px 12px 12px 14px; border:1px solid var(--border); border-radius:16px;
	background:var(--card-bg); color:inherit; text-decoration:none; box-shadow:var(--sh-1);
}
.cl-list a:active{ background:var(--brand-tint); border-color:var(--brand-border); }
.cl-av{
	width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center;
	background:var(--brand-tint); color:var(--brand-text); font-size:17px; font-weight:900;
}
.cl-tx{ min-width:0; display:flex; flex-direction:column; gap:4px; }
.cl-tx b{ font-size:16px; font-weight:800; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.cl-tx i{ font-style:normal; font-size:12.5px; color:var(--text-sub); }
.cl-go{ width:16px; height:16px; position:relative; }
.cl-go::before{
	content:""; position:absolute; top:3px; left:1px; width:9px; height:9px;
	border-right:2px solid var(--placeholder); border-bottom:2px solid var(--placeholder); transform:rotate(-45deg);
}
.cl-charge{ font-size:11px; font-weight:800; padding:1px 7px; border-radius:999px; background:var(--brand-tint); color:var(--brand-text); }

/* ── 직원 홈: 수급자 상세 (my_cust_view.jsp) ── */
.cv-name{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:2px 2px 12px; font-size:20px; font-weight:900; }
.my-row b a{ color:var(--brand-text); text-decoration:none; }
.my-row b.wrap{ text-align:right; word-break:keep-all; }
.cv-visit{ display:flex; align-items:flex-start; gap:10px; padding:10px 2px; border-bottom:1px solid var(--border); font-size:13.5px; }
.cv-visit:last-child{ border-bottom:0; }
.cv-visit .d{ flex:none; min-width:60px; font-weight:800; }
.cv-visit .t{ flex:1; min-width:0; }
.cv-visit .t small{ display:block; color:var(--text-sub); font-size:12px; margin-top:2px; }
.cv-links{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
.cv-links a{
	display:flex; align-items:center; justify-content:center; gap:6px; padding:12px 8px; border-radius:14px;
	background:var(--card-bg); border:1px solid var(--border); color:var(--brand-text); font-weight:800; font-size:14px;
	text-decoration:none; box-shadow:var(--sh-1);
}
.cv-links a svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; flex:none; }
.cv-links a:active{ background:var(--brand-tint); }
.cv-links a:only-child{ grid-column:1 / -1; }   /* 단추가 하나뿐이면 한 줄을 채운다 */
.cv-links a:last-child:nth-child(odd){ grid-column:1 / -1; }   /* 홀수 개(사회복지사: 일정표 · 상태변화기록지 · 평가 관리 · 서명 둘)면 마지막 단추가 한 줄을 채운다 */

/* ── 직원 수급자관리 가독성 — 전부 body.cust-page(my_cust.jsp · my_cust_view.jsp) 아래로 가둔다 ──
   .my-row · .block-title · .my-note · .cl-av 는 평가관리·설정·옛 직원 화면도 쓴다. 원칙은 수급자 화면(guardian.css .ev-page 등)과 같다:
     낱말 단위 줄바꿈 · 잔글씨를 14~16px 로 · 값은 왼쪽 정렬 · 전화번호는 누르는 단추. */
/* body 가 이미 좌우 18px 을 주므로 본문은 덧대지 않는다 — 초록 머리줄과 카드 가장자리가 맞고 글 자리가 24px 넓어진다 */
.cust-page .mwrap{ padding:14px 0 28px; word-break:keep-all; overflow-wrap:anywhere; }
.cust-page .myhead-tx b{ font-size:18px; }
.cust-page .myhead-tx em{ font-size:14px; }
.cust-page .my-note{ font-size:15px; }
.cust-page .block-title{ font-size:15px; margin:20px 2px 10px; }
.cust-page .block-title .cnt{ margin-left:4px; color:var(--text-sub); font-weight:700; }
/* 공통 꼬리표 — 등급(.badge) · 급여종류(.cl-item) · 계약 담당/방문 배정(.cl-charge) · 상태 */
.cust-page .cl-tags{ display:flex; flex-wrap:wrap; align-items:center; gap:5px; }
.cust-page .cl-tags .badge{ font-size:13px; padding:2px 9px; }
.cust-page .cl-item{
	display:inline-block; padding:2px 9px; border-radius:999px; font-size:13px; font-weight:700;
	background:#e6eefa; color:#35619e;
}
.cust-page .cl-charge{ font-size:13px; padding:2px 9px; }
.cust-page .cl-charge.visit{ background:var(--surface-2); color:var(--text-sub); }

/* 목록 — 이름 / 꼬리표 / 이달 방문·다음 방문 세 층 */
.cust-page .cl-list{ gap:10px; }
.cust-page .cl-list a{ grid-template-columns:48px 1fr 16px; padding:14px 12px 14px 14px; align-items:center; }
.cust-page .cl-av{ width:48px; height:48px; font-size:19px; }
.cust-page .cl-tx{ gap:6px; }
.cust-page .cl-nm{ display:block; font-size:18px; font-weight:800; line-height:1.3; }
.cust-page .cl-nm small, .cust-page .cv-name b small{ font-size:14px; font-weight:700; color:var(--text-sub); }
.cust-page .cl-when{ font-style:normal; font-size:14.5px; line-height:1.45; color:var(--text-sub); display:flex; flex-wrap:wrap; gap:2px 10px; }
.cust-page .cl-next{ color:var(--brand-text); font-weight:800; }
.cust-page .cl-note{ margin:14px 4px 0; font-size:13.5px; line-height:1.6; color:var(--text-sub); }

/* 상세 — 이름 머리 */
.cust-page .cv-name{ display:block; margin:6px 2px 4px; }
.cust-page .cv-name b{ display:block; font-size:22px; font-weight:900; line-height:1.3; margin-bottom:8px; }
/* 기본 정보 — 이름(작은 회색) 위, 값(16px) 아래로 쌓는다. 옆으로 두면 320px 폰에서 값 칸이 좁아
   날짜가 세 줄이 되고 전화 단추가 카드 밖으로 나간다. */
.cust-page .cv-info{ margin:0; padding:4px 16px; }
.cust-page .cv-row{ display:block; padding:12px 0; border-bottom:1px solid var(--border); }
.cust-page .cv-row:last-child{ border-bottom:0; }
.cust-page .cv-row .k{ display:block; font-size:13.5px; color:var(--text-sub); font-weight:700; line-height:1.4; margin-bottom:4px; }
.cust-page .cv-row .v{ display:block; min-width:0; font-size:16px; font-weight:700; line-height:1.5; color:var(--text-main); }
.cust-page .cv-row .v .nw{ white-space:nowrap; }
.cust-page .cv-row .v .none{ color:var(--text-sub); font-weight:400; }
.cust-page .cv-row .v .rel{
	font-style:normal; font-size:13px; font-weight:700; padding:1px 8px; margin-left:2px; border-radius:999px;
	background:var(--surface-2); color:var(--text-sub); vertical-align:1px;
}
/* 전화 — 누르면 걸린다. 손가락 크기(44px)의 알약 */
.cust-page .cv-call{
	display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:0 14px 0 11px; box-sizing:border-box;
	border-radius:999px; background:var(--brand-tint); border:1px solid var(--brand-border);
	color:var(--brand-text); font-size:16px; font-weight:800; text-decoration:none; white-space:nowrap;
	font-variant-numeric:tabular-nums;
}
.cust-page .cv-call svg{ width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linejoin:round; }
.cust-page .cv-call:active{ transform:scale(0.97); }
/* 카드가 좁으면(큰 글자 + 320px 폰) 전화 단추를 조금 줄인다.
   zoom 은 미디어쿼리에 안 잡혀 컨테이너 쿼리로 본다(카드 자체라 position:fixed 요소를 가두지 않는다). */
.cust-page .cv-info{ container-type:inline-size; }
@container (max-width: 210px){
	.cust-page .cv-call{ font-size:14.5px; gap:5px; padding:0 10px 0 8px; }
	.cust-page .cv-call svg{ width:16px; height:16px; }
}
/* 이달 내 방문 */
.cust-page .cv-visits{ margin:0; padding:4px 16px; }
.cust-page .cv-empty{ margin:0; padding:16px 0; font-size:15px; color:var(--text-sub); }
.cust-page .cv-visit{ gap:12px; padding:13px 0; font-size:15px; }
.cust-page .cv-visit .d{ min-width:72px; font-size:15.5px; font-weight:800; }
.cust-page .cv-visit .t b{ font-size:16.5px; font-weight:800; font-variant-numeric:tabular-nums; }
.cust-page .cv-visit .t em{ font-style:normal; font-size:14px; color:var(--text-sub); }
.cust-page .cv-visit .t small{ font-size:14px; line-height:1.5; margin-top:3px; }
/* 아래 두 단추 — 한 줄에 하나씩(두 칸이면 글이 낱말 중간에서 접힌다) */
.cust-page .cv-links{ margin-top:18px; grid-template-columns:1fr; }
.cust-page .cv-links a{ min-height:52px; font-size:16px; padding:10px 12px; }
.cust-page .cv-links a svg{ width:20px; height:20px; }

/* ── 직원 홈: 평가관리 (my_evalmgr.jsp) ── */
.em-sum{ margin:2px 2px 12px; font-size:13.5px; color:var(--text-sub); line-height:1.5; }
.em-sum b{ color:var(--red); }
.em-card{
	margin-bottom:10px; padding:12px 12px 12px; border-radius:16px;
	background:var(--card-bg); border:1px solid var(--border); box-shadow:var(--sh-1);
}
.em-card.todo{ border-color:var(--brand-border); }
.em-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.em-name{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.em-name b{ font-size:16px; font-weight:800; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.em-name i{ font-style:normal; font-size:12.5px; color:var(--text-sub); }
.em-card.todo .em-name i{ color:var(--red); font-weight:700; }
.em-info{
	flex:none; font-size:12px; font-weight:700; color:var(--brand-text); text-decoration:none;
	padding:5px 10px; border:1px solid var(--brand-border); border-radius:999px; background:var(--brand-tint);
}
.em-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.em-chip{
	display:flex; flex-direction:column; gap:3px; padding:10px 11px; border-radius:12px;
	border:1px solid var(--border); background:var(--surface-2); color:var(--text-main); text-decoration:none;
}
.em-chip b{ font-size:13.5px; font-weight:800; }
.em-chip b small{ font-size:10.5px; font-weight:700; color:var(--text-sub); margin-left:2px; }
.em-chip i{ font-style:normal; font-size:12px; color:var(--text-sub); }
.em-chip.ok{ background:#eaf4e6; border-color:#cfe3c6; }
.em-chip.ok i{ color:#376f2c; font-weight:700; }
.em-chip.no{ background:var(--card-bg); border-color:#f0c9c2; }
.em-chip.no i{ color:#b93326; font-weight:700; }
.em-chip:active{ filter:brightness(0.96); }
:root[data-theme="dark"] .em-chip.ok{ background:#1d2b1c; border-color:#2f4a2c; }
:root[data-theme="dark"] .em-chip.ok i{ color:#8fc47c; }
:root[data-theme="dark"] .em-chip.no{ border-color:#5a2f2a; }
:root[data-theme="dark"] .em-chip.no i{ color:#ff9a90; }

/* ── 직원 평가관리 가독성 — body.evalmgr-page(my_evalmgr.jsp) 아래로 가둔다 ──
   .em-* 는 이 화면만 쓰지만 .cl-av · .badge · .my-note 는 다른 화면도 쓴다.
   원칙은 수급자관리·급여명세서와 같다: 낱말 단위 줄바꿈 · 잔글씨 14~16px · 본문 폭을 초록 머리줄과 맞춤 ·
   상태는 글자와 표시(✓ / !)를 같이(색만으로 가르지 않는다). 모바일 계정은 밝게 고정이라(docs/change_log_2026-09.md 209차) 다크 규칙은 따로 두지 않는다. */
.evalmgr-page .mwrap{ padding:14px 0 28px; word-break:keep-all; overflow-wrap:anywhere; }
.evalmgr-page .myhead-tx b{ font-size:18px; }
.evalmgr-page .myhead-tx em{ font-size:14px; }
.evalmgr-page .my-note, .evalmgr-page .error-box{ font-size:15px; }
/* 맨 위 요약 — 상태 상자(남은 것 있음 = 붉은 기 + «!», 다 마침 = 초록 + «✓») */
.evalmgr-page .em-sum{
	position:relative; margin:2px 0 14px; padding:12px 14px 12px 44px; border-radius:14px; border:1px solid;
	font-size:15px; line-height:1.5; color:var(--text-main);
}
.evalmgr-page .em-sum::before{
	position:absolute; left:14px; top:13px; width:21px; height:21px; border-radius:50%;
	font-size:13px; font-weight:900; line-height:21px; text-align:center; color:#fff;
}
.evalmgr-page .em-sum.todo{ background:#fdf1ef; border-color:#f3cfc8; }
.evalmgr-page .em-sum.todo::before{ content:"!"; background:#c0392b; }
.evalmgr-page .em-sum.done{ background:#eaf4e6; border-color:#cfe3c6; }
.evalmgr-page .em-sum.done::before{ content:"✓"; background:#3d7a2c; }
.evalmgr-page .em-sum b{ color:#b93326; }
/* 어르신 카드 */
.evalmgr-page .em-card{ margin-bottom:12px; padding:14px; border-radius:18px; }
.evalmgr-page .em-head{ gap:12px; margin-bottom:12px; }
.evalmgr-page .em-head .cl-av{ flex:none; width:48px; height:48px; font-size:19px; }
.evalmgr-page .em-name{ gap:5px; }
.evalmgr-page .em-name b{ font-size:18px; line-height:1.3; }
.evalmgr-page .em-name b small{ font-size:14px; font-weight:700; color:var(--text-sub); }
.evalmgr-page .em-name b .badge{ font-size:13px; padding:2px 9px; }
.evalmgr-page .em-name i, .evalmgr-page .em-card.todo .em-name i{ font-size:14.5px; line-height:1.45; color:var(--text-sub); font-weight:600; }
.evalmgr-page .em-name i em{ font-style:normal; color:#b93326; font-weight:800; white-space:nowrap; }   /* «미작성 / 3종» 으로 갈리지 않게 */
.evalmgr-page .em-info{ display:inline-flex; align-items:center; min-height:38px; padding:0 14px; font-size:14px; }
/* 서식 칸 — 이름 / 상태 / (미작성이면) 할 일 */
.evalmgr-page .em-grid{ gap:10px; }
.evalmgr-page .em-chip{ gap:4px; min-height:78px; padding:12px; border-radius:14px; }
.evalmgr-page .em-chip b{ font-size:15.5px; line-height:1.35; }
.evalmgr-page .em-chip b small{
	display:inline-block; margin-left:2px; padding:0 7px; border-radius:999px; vertical-align:1px; white-space:nowrap;
	font-size:12px; font-weight:700; background:#efe9fa; color:#6a4fb0;
}
.evalmgr-page .em-chip .em-st{ font-style:normal; font-size:14px; font-weight:800; }
.evalmgr-page .em-chip.ok .em-st{ color:#376f2c; }
.evalmgr-page .em-chip.ok .em-st::before{ content:"✓ "; }
.evalmgr-page .em-chip.ok .em-st .em-dt{ font-weight:700; font-variant-numeric:tabular-nums; }
.evalmgr-page .em-chip.no .em-st{ color:#b93326; }
.evalmgr-page .em-chip .em-todo{ font-size:14px; font-weight:800; color:var(--brand-text); }
.evalmgr-page .em-chip .em-todo::after{ content:" ›"; }
.evalmgr-page .em-note{ margin:14px 4px 0; font-size:14px; line-height:1.6; color:var(--text-sub); }
/* 카드가 좁으면(큰 글자 + 320px 폰) 서식 칸을 두 칸 대신 한 칸씩.
   zoom 은 미디어쿼리에 안 잡혀 컨테이너 쿼리로 본다(카드라 position:fixed 요소를 가두지 않는다). */
.evalmgr-page .em-card{ container-type:inline-size; }
@container (max-width: 190px){
	.evalmgr-page .em-grid{ grid-template-columns:1fr; }
	.evalmgr-page .em-chip{ min-height:0; }
}
/* 카드 속 230px 이하면 장식인 첫 글자 칸을 뺀다(홈 줄과 같은 처리) — 이름 칸이 「정보」 단추에 닿지 않게 */
@container (max-width: 230px){
	.evalmgr-page .em-head .cl-av{ display:none; }
}
/* ==========================================================================
   모바일 전용 계정 — 수급자·직원 하위 화면

   이 파일 머리의 척도를 지킨다:
     글자 11 12 13 14 15 16 17 20 24 / 모서리 10 14 20 999
     간격 4 6 8 10 12 14 / 그림자 --sh-1 --sh-2 --sh-brand
   색은 반드시 토큰으로. 값을 직접 박으면 다크 모드에서 그 부분만 안 뒤집힌다.
   ========================================================================== */

/* ── 머리줄 (inc_myhead.jsp) ── */
.myhead{
	display:flex; align-items:center; gap:12px;
	padding:calc(14px + env(safe-area-inset-top)) 16px 14px;
	background:linear-gradient(120deg, var(--brand-dark), var(--brand) 55%, var(--brand-light));
	color:#fff; border-radius:0 0 20px 20px; box-shadow:var(--sh-brand);
}
.myhead-back{ flex:0 0 auto; color:#fff; display:flex; padding:4px; margin:-4px; }
.myhead-back svg{ width:24px; height:24px; }
.myhead-tx{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.myhead-tx b{ font-size:17px; font-weight:700; }
.myhead-tx em{ font-style:normal; font-size:12px; opacity:.9; }

/* ── 달 이동 (inc_mymonth.jsp) ── */
.mnav{ display:flex; align-items:center; justify-content:center; gap:14px; margin:14px 0 12px; }
.mnav-t{ font-size:17px; font-weight:700; min-width:120px; text-align:center; }
.mnav-btn{
	width:38px; height:38px; border-radius:999px; flex:0 0 auto;
	display:flex; align-items:center; justify-content:center;
	background:var(--card-bg); border:1px solid var(--border); color:var(--text-sub);
	box-shadow:var(--sh-1);
}
.mnav-btn svg{ width:18px; height:18px; }

/* ── 큰 숫자 카드 ── */
.sum-card{
	padding:20px; border-radius:var(--radius-lg); margin-bottom:12px;
	background:linear-gradient(135deg, var(--brand-dark), var(--brand));
	color:#fff; box-shadow:var(--sh-brand);
}
.sum-cap{ margin:0; font-size:12px; opacity:.9; }
.sum-amt{ margin:6px 0 0; font-size:24px; font-weight:800; letter-spacing:-.02em; }
.sum-amt i{ font-style:normal; font-size:15px; font-weight:700; margin-left:4px; }
.sum-sub{ margin:8px 0 0; font-size:12px; opacity:.9; line-height:1.5; }
.sum-note{ margin:10px 0 0; font-size:12px; opacity:.9; }
.sum-card.sm .sum-amt{ font-size:20px; }
.sum-pay{
	display:flex; align-items:center; gap:8px; margin-top:14px;
	padding-top:12px; border-top:1px solid rgba(255,255,255,.28); font-size:13px;
}
.sum-pay .sp-l{ opacity:.9; }
.sum-pay b{ font-size:15px; }
.sum-pay .tag{ margin-left:auto; padding:4px 10px; border-radius:999px; font-size:11px; font-weight:700; }
.sum-pay .tag.ok{ background:rgba(255,255,255,.92); color:var(--brand-dark); }
.sum-pay .tag.warn{ background:var(--orange-tint); color:var(--orange); }

/* ── 카드 안 제목 ── */
.sec-t{ margin:0 0 10px; font-size:13px; font-weight:700; color:var(--text-sub); }
.sec-n{ margin-left:6px; font-weight:700; color:var(--brand-text); }

/* ── 이름-값 줄 (급여종류별 합계) ── */
.kv{
	display:flex; align-items:center; justify-content:space-between; gap:10px;
	padding:10px 0; border-bottom:1px solid var(--border); font-size:14px;
}
.kv:last-child{ border-bottom:0; }
.kv b{ font-variant-numeric:tabular-nums; }

/* ── 방문 한 건 (본인부담금 상세 · 일정표 공용) ── */
.dv{ padding:12px 0; border-bottom:1px solid var(--border); }
.dv:last-child{ border-bottom:0; }
.dv-d{ display:flex; align-items:center; gap:8px; }
.dv-d b{ font-size:15px; }
.dv-item{
	padding:2px 8px; border-radius:999px; font-size:11px; font-weight:700;
	background:var(--brand-tint); color:var(--brand-text);
}
.dv-m{ display:flex; align-items:center; gap:10px; margin-top:6px; font-size:13px; color:var(--text-sub); }
.dv-time{ font-variant-numeric:tabular-nums; }
.dv-emp::before{ content:'·'; margin-right:10px; }
.dv-a{ display:flex; align-items:baseline; gap:8px; margin-top:6px; }
.dv-a b{ font-size:15px; font-variant-numeric:tabular-nums; }
.dv-a em{ font-style:normal; font-size:12px; color:var(--text-sub); }

























/* ── 비었을 때 · 맺음말 ── */
.empty-card{ padding:32px 20px; text-align:center; }
.empty-card .em-title{ margin:0; font-size:15px; font-weight:700; }
.empty-card .em-sub{ margin:8px 0 0; font-size:13px; color:var(--text-sub); }
.foot-note{ margin:14px 4px 28px; font-size:12px; line-height:1.6; color:var(--text-sub); }
.kv .kv-n{ font-style:normal; margin-left:6px; font-size:12px; color:var(--text-sub); }

/* ══ 일반 모바일(기관 계정) 메인 — main.jsp(body.main-page) 가독성 ══════════════
   낱말 단위 줄바꿈 · 배너의 기관 이름·이름은 자르지 않는다 · 잔글씨를 올린다.
   아래 컨테이너 쿼리가 기본 규칙을 이기도록 이 구역은 기본 규칙보다 뒤에 둔다. */
.main-page .who .comp{ font-size:14px; }
.main-page .who .name{ font-size:18px; line-height:1.3; }
/* 잘라내지 말고 낱말 단위로 두 줄 — 기관 이름이 긴 곳(사회복지법인 …)도 있다 */
.main-page .who .comp,
.main-page .who .name{ white-space:normal; word-break:keep-all; overflow-wrap:anywhere; }
.main-page .logout-btn .cap{ font-size:12.5px; }
/* 두 칸일 때 메뉴 이름은 15px 그대로 — 320px 폰에서 칸 속 글 자리가 104px 이라 «본인부담금관리» 가 16px 이면 넘친다 */
.main-page .menu-tile .label{ word-break:keep-all; overflow-wrap:anywhere; }
.main-page .menu-tile .desc{ font-size:13.5px; line-height:1.35; word-break:keep-all; overflow-wrap:anywhere; }
/* 폭이 좁으면(글자 «더 크게» 이상, 320px 폰은 «크게» 이상) 두 칸 타일 대신 한 줄에 하나 — 아이콘 왼쪽, 글 오른쪽.
   두 칸이면 칸 속 글 자리가 60~90px 라 일곱 글자 메뉴 이름이 들어가지 않는다.
   zoom 은 미디어쿼리에 안 잡혀(뷰포트는 그대로다) 컨테이너 쿼리로 본다. 모르는 옛 브라우저는 두 칸 그대로다. */
.main-page .banner-content{ container-type:inline-size; }
@container (max-width: 270px){
	.main-page .menu-grid{ grid-template-columns:1fr; gap:10px; }
	.main-page .menu-tile{
		display:grid; grid-template-columns:44px 1fr; align-items:center; column-gap:14px; row-gap:2px;
		padding:14px 16px;
	}
	.main-page .menu-tile .ico{ grid-row:1 / span 2; width:44px; height:44px; }
	.main-page .menu-tile .label{ font-size:17px; }
	.main-page .menu-tile .desc{ margin-top:0; font-size:14px; }
}
/* 가장 좁을 때(«아주 크게» + 320px 폰) — 한 줄 타일에서도 이름이 접히지 않게 아이콘·여백·이름을 한 치수씩 줄인다 */
@container (max-width: 205px){
	.main-page .menu-tile{ grid-template-columns:36px 1fr; column-gap:10px; padding:12px 14px; }
	.main-page .menu-tile .ico{ width:36px; height:36px; border-radius:12px; }
	.main-page .menu-tile .label{ font-size:16px; }
}
/* 하단 탭 글자 — 일반 모바일 전 화면 공통(inc_tabbar.jsp). 네 칸이라 «아주 크게» + 320px 에서도 자리가 남는다. */
.tabbar a,
.tabbar button{ font-size:12.5px; }

/* ══ 일반 모바일 공지사항 — notice.jsp · notice_view.jsp(body.notice-page) 가독성 ══════════
   목록 제목·상세 본문은 낱말 단위로(본문은 PC 편집기에서 쓴 글이라 더 잘 끊긴다) · 잔글씨를 올린다 · 이전/다음 글 제목은 두 줄까지. */
.notice-page .notice-item .title,
.notice-page .card .title,
.notice-page .content{ word-break:keep-all; overflow-wrap:anywhere; }
.notice-page .count{ font-size:14px; }
.notice-page .notice-item .meta,
.notice-page .card .meta{ font-size:13.5px; }
.notice-page .notice-item .meta svg,
.notice-page .card .meta svg{ width:15px; height:15px; }
.notice-page .badge-new{ font-size:12px; }
.notice-page .btn-more .rest{ font-size:13.5px; }
.notice-page .img-hint{ font-size:13.5px; }
.notice-page .attach-item .fsize{ font-size:13.5px; }
.notice-page .empty .e-t2{ font-size:14px; }
/* 이전글·다음글 — 한 줄 말줄임 대신 두 줄까지 */
.notice-page .nav-item{ font-size:14.5px; }
.notice-page .nav-item .dir{ font-size:13px; width:50px; }
.notice-page .nav-item .ntitle{
	white-space:normal; word-break:keep-all; overflow-wrap:anywhere; line-height:1.4;
	display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
}
/* 상세 머리줄 — 가-/가+ 단추 자리가 모자라면 단추가 다음 줄 오른쪽으로 내려간다
   (h1.grow 의 flex-basis 를 auto 로 — 그래야 줄이 넘친다고 본다). */
.notice-page .topbar{ flex-wrap:wrap; row-gap:8px; }
.notice-page .topbar h1.grow{ flex:1 1 auto; word-break:keep-all; }
.notice-page .font-ctl{ margin-left:auto; }

/* ══ 일반 모바일 공통 조각 — body.gmob(일반 모바일 화면마다 붙인다) ══════════
   여러 화면이 같이 쓰는 조각의 잔글씨를 한 곳에서 올린다. gmob 이 안 붙은 화면·모바일 전용 계정 화면에는 영향이 없다. */
.gmob .block-title{ font-size:14.5px; }
.gmob .badge{ font-size:12px; }
.gmob .chip{ font-size:14px; }
.gmob .cust-plan, .gmob .cust-pay{ width:48px; height:48px; font-size:12px; }
.gmob .sheet-sub{ font-size:14px; }
.gmob .sheet-field label{ font-size:13.5px; }
.gmob .sheet-hint{ font-size:13px; }
/* 목록(.list 는 grid 1fr) 칸이 줄 속 한 줄 고정 글(전화번호 등) 길이만큼 늘어나 화면 밖으로 나가지 않게 —
   grid 항목의 min-width 기본값은 auto 라 내용만큼 넓어진다. */
.gmob .list > *{ min-width:0; }
/* 정보 줄(이름칸 | 값) — 값은 낱말 단위로, 줄이 좁으면(360px 폰은 «더 크게», 320px 폰은 «크게» 부터) 이름칸 위 · 값 아래로 쌓는다.
   (쌓을 때 이름칸의 flex-basis 84px 가 높이가 되지 않게 flex:none) */
.gmob .info-row .v{ word-break:keep-all; overflow-wrap:anywhere; }
.gmob .info-list{ container-type:inline-size; }
@container (max-width: 230px){
	.gmob .info-list .info-row{ flex-direction:column; gap:2px; }
	.gmob .info-list .info-row .k{ flex:none; width:auto; }
}
.gmob .mini-btn{ font-size:12.5px; }
.gmob .mini-btn > svg{ width:13px; height:13px; }
/* 수급자 줄(.cust-item — 수급자관리 목록 · 평가 서식 7종의 «수급자 고르기»(inc_evalpick)) —
   이름 옆 등급·나이 배지(flex:none)에 밀려 이름이 0 폭까지 줄지 않게: 배지가 모자라면 다음 줄로, 정보 줄은 말줄임 대신
   두 줄까지, 목록 폭 <250px 이면 첫 글자 동그라미를 접는다(docs/change_log_2026-09.md 219차 수급자관리 규칙을 공통으로). */
.gmob .cust-item .row1{ flex-wrap:wrap; row-gap:4px; }
.gmob .cust-item .meta{ font-size:13.5px; line-height:1.45; white-space:normal; overflow:visible; text-overflow:clip; word-break:keep-all; overflow-wrap:anywhere; }
.gmob #custList{ container-type:inline-size; }
@container (max-width: 250px){
	.gmob .cust-main .avatar{ display:none; }
}
/* 고르기 화면 위쪽 — 「원본 양식 미리보기」 · 「최근 본 수급자」 12px */
.gmob .form-preview{ font-size:13.5px; }
.gmob .recent-title{ font-size:13.5px; }
/* 전화번호는 한 줄로 — «010-» / «0000-0000» 으로 갈리지 않게(전화 링크, 목록 줄 속 .nw) */
.gmob a[href^="tel:"],
.gmob .nw{ white-space:nowrap; }
/* 빈 목록 안내 · 바텀시트 · 경고 줄 — 낱말 단위로 */
.gmob .empty, .gmob .sheet, .gmob .warn{ word-break:keep-all; overflow-wrap:anywhere; }
.gmob .empty .e-t2{ font-size:14px; }
/* 달 이동 줄(본인부담금관리 · 급여명세서 · 공단 동기화) — 선택칸 16px: 아이폰은 16px 미만 입력칸을 누르면 화면을 확대한다.
   줄 폭이 250px 아래면 화살표·간격을 줄인다. */
.gmob .month-nav select{ font-size:16px; }
.gmob .month-nav{ container-type:inline-size; }
@container (max-width: 250px){
	.gmob .month-nav a{ width:32px; height:32px; }
	.gmob .month-nav form{ gap:4px !important; }   /* 인라인 style="gap:6px" 를 이긴다 */
	.gmob .month-nav select{ padding:8px 4px 8px 8px; }
}
/* 칩 + 정렬 선택 줄 — 정렬 선택칸 16px(아이폰 확대 방지), 줄이 좁으면 정렬이 다음 줄 오른쪽으로 */
.gmob .sort-sel{ font-size:16px; }
.gmob .filter-row{ container-type:inline-size; flex-wrap:wrap; row-gap:8px; }
@container (max-width: 290px){
	.gmob .filter-row .chips{ flex:1 1 100%; }
	.gmob .filter-row .sort-sel,
	.gmob .filter-row .btn-write{ margin-left:auto; }   /* 쪽지함 [쓰기] 도 같은 자리 */
}
/* 목록 위 건수 · 「더 보기」의 남은 건수 */
.gmob .count{ font-size:14px; }
.gmob .btn-more .rest{ font-size:13.5px; }
/* 메뉴 줄(평가 첫 화면 · 설정) — 설명은 말줄임 대신 줄바꿈해 다 보이게, 이름은 낱말 단위로, 목록 폭이 250px 아래면 아이콘을 접는다. */
.gmob .menu-group{ font-size:13.5px; }
.gmob .menu-row .t, .gmob .board-link .t{ word-break:keep-all; overflow-wrap:anywhere; }
.gmob .menu-row .d, .gmob .board-link .d{ font-size:13.5px; line-height:1.4; white-space:normal; overflow:visible; text-overflow:clip; word-break:keep-all; overflow-wrap:anywhere; }
.gmob .menu-list{ container-type:inline-size; }
@container (max-width: 250px){
	.gmob .menu-row .ico{ display:none; }
}
/* 작성 중인 기록(평가 첫 화면) — 잔글씨를 올린다 */
.gmob .ing-title{ font-size:14px; }
.gmob .ing-who{ word-break:keep-all; overflow-wrap:anywhere; }
.gmob .ing-what{ font-size:13.5px; word-break:keep-all; }
.gmob .ing-meta{ font-size:13px; }
.gmob .ing-go{ font-size:13px; }
.gmob .ing-del{ width:56px; font-size:12.5px; }
/* 직원 고르기 시트 표(일정관리 · 일정 입력) — 표가 좁으면(300px 아래) 이름 | 성별·나이 두 칸 + 직종은 아래 줄로(이름 칸이 잘리지 않게). */
.gmob .et-row span:nth-child(2), .gmob .et-row span:nth-child(3){ font-size:13.5px; }
.gmob .et-row.et-head span{ font-size:13px; }
.gmob .emp-tbl{ container-type:inline-size; }
@container (max-width: 300px){
	.gmob .et-row{ grid-template-columns:minmax(4.5em, 1fr) auto; }
	.gmob .et-row span:nth-child(3){ grid-column:1 / -1; margin-top:-4px; }
	.gmob .et-row.et-head span:nth-child(3){ display:none; }
}
/* 입력 화면 조각(일정 입력 · 평가 입력 등) — 줄이 좁으면 [달력] 을 다음 줄로, 시각은 «시작 / ~ / 끝» 세 줄로 쌓는다
   (옆에 두면 날짜·시각 칸이 잘린다. 줄 자신을 폭 재는 틀로 — 안쪽 칸의 기준 폭만 바꾼다). */
.gmob .date-row{ flex-wrap:wrap; row-gap:8px; container-type:inline-size; }
.gmob .date-pick{ font-size:14px; min-height:44px; }
@container (max-width: 270px){
	.gmob .date-row input[type="date"]{ flex:1 1 100%; }
}
.gmob .cs-time-row{ flex-wrap:wrap; row-gap:6px; container-type:inline-size; }
@container (max-width: 290px){
	.gmob .cs-time-row input[type="time"]{ flex:1 1 100%; }
	.gmob .cs-time-sep{ flex:1 1 100%; text-align:center; line-height:1; }
}
/* 누구 카드(수급자 이름 + 등급·나이 배지) — 배지에 밀려 이름이 세로로 서지 않게 */
.gmob .who-body{ flex:1; }
.gmob .who-name{ flex-wrap:wrap; row-gap:4px; word-break:keep-all; overflow-wrap:anywhere; }
.gmob .who-meta{ font-size:13.5px; word-break:keep-all; }
.gmob .lead-note{ font-size:14px; word-break:keep-all; }
.gmob .lbl-sub{ font-size:12.5px; word-break:keep-all; }
.gmob .rp-sw-sub{ font-size:13.5px; }
/* 입력칸처럼 쓰는 직원 고르기 단추 — 안내 문구가 잘리지 않게 두 줄까지 보인다 */
.gmob .sheet-field .emp-sel-btn .nm{ white-space:normal; text-align:left; word-break:keep-all; overflow-wrap:anywhere; }

/* ══ 일반 모바일 인사관리 — hr.jsp · hr_view.jsp(body.hr-page) 가독성 ══════════
   목록: 이름·직종·전화는 낱말 단위로 접고 잔글씨를 올린다.
   상세: 머리 카드의 .who 가 배너용 공용 .who(가로 flex)를 물려받으므로 block 으로 되돌려 이름 위 · 직종 아래. */
.hr-page .hr-count{ font-size:14px; }
.hr-page .hr-item .nm{ flex-wrap:wrap; row-gap:3px; word-break:keep-all; overflow-wrap:anywhere; }
.hr-page .pay-tag{ font-size:12px; }
.hr-page .hr-item .sub{ font-size:13.5px; word-break:keep-all; overflow-wrap:anywhere; }
.hr-page .hr-item .hp{ font-size:14px; white-space:nowrap; }
/* 줄이 좁으면(360px 폰은 «더 크게», 320px 폰은 «크게» 부터) 첫 글자 동그라미를 접어 글 자리를 낸다 */
.hr-page .hr-item{ container-type:inline-size; }
@container (max-width: 270px){
	.hr-page .hr-item .hr-main .avatar{ display:none; }
}
/* 상세 머리 카드 — 이름 위 · 직종 아래 */
.hr-page .hr-head-card .who{ display:block; flex:1; }
.hr-page .hr-head-card .nm{ flex-wrap:wrap; row-gap:4px; word-break:keep-all; overflow-wrap:anywhere; }
.hr-page .hr-head-card .sub{ font-size:14px; word-break:keep-all; overflow-wrap:anywhere; }
.hr-page .hp-edit{ font-size:13px; padding:3px 10px; }
/* 전화걸기·문자보내기 두 칸 — 가장 좁을 때(«아주 크게» + 320px) 위아래로 쌓는다 */
.hr-page .hr-actions{ container-type:inline-size; flex-wrap:wrap; }
@container (max-width: 220px){
	.hr-page .hr-act{ flex:1 1 100%; }
}
.hr-page .ins-chips .ins{ font-size:14px; }
.hr-page .info-list .info-row .k{ font-size:14px; }

/* ══ 일반 모바일 수급자관리 — customer.jsp · customer_view.jsp(body.custmgr-page) 가독성 ══════════
   (.cust-page 는 직원 모바일 계정의 수급자관리 my_cust 가 쓰고 있어 이름을 달리했다)
   목록 줄이 화면 밖으로 나가지 않게(위 .gmob .list 규칙) · 줄 정보는 두 줄까지 · 상세 이름은 배지에 밀리지 않게 · 잔글씨를 올린다. */
.custmgr-page .recent-title{ font-size:13.5px; }
.custmgr-page .count{ font-size:14px; }
.custmgr-page .btn-more .rest{ font-size:13.5px; }
.custmgr-page .cust-item .row1{ flex-wrap:wrap; row-gap:4px; }
.custmgr-page .cust-item .name{ font-size:16px; }
.custmgr-page .cust-item .meta{
	font-size:13.5px; line-height:1.45;
	white-space:normal; overflow:visible; text-overflow:clip; word-break:keep-all; overflow-wrap:anywhere;
}
/* 줄이 좁으면(320px 폰, 360px 폰은 «크게» 부터) [일정]·[부담금]을 줄 아래로 — 글자를 옆에 붙인 넓은 단추 두 칸 */
.custmgr-page #custList{ container-type:inline-size; }
@container (max-width: 300px){
	.custmgr-page .cust-item{ flex-wrap:wrap; row-gap:10px; }
	.custmgr-page .cust-main{ flex:1 1 100%; }
	.custmgr-page .cust-acts{ flex:1 1 100%; gap:8px; }
	.custmgr-page .cust-acts .cust-plan,
	.custmgr-page .cust-acts .cust-pay{ flex:1; width:auto; height:42px; flex-direction:row; gap:6px; font-size:14px; }
}
/* 더 좁으면(«더 크게» 이상) 첫 글자 동그라미를 접는다 */
@container (max-width: 250px){
	.custmgr-page .cust-main .avatar{ display:none; }
}
/* 상세 머리 — 이름과 배지가 한 줄에 안 들어가면 배지가 다음 줄로(이름은 낱말 단위) */
.custmgr-page .profile > div{ flex:1; min-width:0; }
.custmgr-page .profile .cust-name{ flex-wrap:wrap; row-gap:4px; word-break:keep-all; overflow-wrap:anywhere; }
.custmgr-page .profile .sub{ font-size:14px; word-break:keep-all; }

/* ══ 일반 모바일 본인부담금관리 — selfpay.jsp(body.selfpay-page) 가독성 ══════════
   합계 세 칸은 흰 카드로 되돌린다 — 뒤쪽 «모바일 전용 계정» 구역의 .sum-card(초록 바탕 흰 글씨, 지금은 어느 화면도 안 쓴다)가
   이 화면의 흰 카드 규칙을 덮어쓴다. 달·정렬 선택칸은 위 .gmob 로 16px. 잔글씨를 올린다. */
.selfpay-page .summary .sum-card{
	background:var(--card-bg); color:var(--text-main); border:1px solid var(--border);
	border-radius:var(--radius-md); box-shadow:var(--sh-1); padding:13px 10px; margin-bottom:0;
}
.selfpay-page .sum-card .k{ font-size:13px; word-break:keep-all; overflow-wrap:anywhere; }
.selfpay-page .sum-card .v{ font-size:16px; word-break:normal; overflow-wrap:anywhere; }
/* 폰 폭(합계 줄 400px 미만)이면 세 칸 대신 «이름 ― 금액» 한 줄씩 — 세 칸이면 기관 한 달 합계(수백만~천만 원대)가 접힌다.
   태블릿은 세 칸. 이름·금액은 한 줄 고정, 모자라면 금액이 다음 줄 오른쪽. */
.selfpay-page .sum-wrap{ container-type:inline-size; }
@container (max-width: 400px){
	.selfpay-page .summary{ grid-template-columns:1fr; gap:6px; }
	.selfpay-page .summary .sum-card{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:2px 10px; padding:11px 14px; text-align:left; }
	.selfpay-page .sum-card .k{ margin:0; white-space:nowrap; }
	.selfpay-page .sum-card .v{ margin-left:auto; white-space:nowrap; }
}
.selfpay-page .rate-head .lbl{ font-size:14px; }
.selfpay-page .rate-foot{ font-size:13.5px; }
.selfpay-page .count{ font-size:14px; }
.selfpay-page .pay-item .name{ font-size:16px; white-space:normal; overflow:visible; text-overflow:clip; word-break:keep-all; overflow-wrap:anywhere; }
/* 이름 줄 — 자리가 모자라면 등급·배지가 다음 줄로(이름이 잘리지 않게) */
.selfpay-page .pay-item .row1{ flex-wrap:wrap; row-gap:6px; }
.selfpay-page .grade{ font-size:13px; }
.selfpay-page .amt .k{ font-size:12.5px; }
.selfpay-page .amt .v{ font-size:15px; }
.selfpay-page .warn{ font-size:13.5px; }
.selfpay-page .recv-info{ font-size:13.5px; word-break:keep-all; overflow-wrap:anywhere; }
.selfpay-page .actions .act{ font-size:13.5px; }
/* 상세 표 — 칸 글은 한 줄로(세로로 서지 않게), 표가 넘치면 옆으로 밀어 본다 */
.selfpay-page .detail{ overflow-x:auto; }
.selfpay-page .detail th, .selfpay-page .detail td{ white-space:nowrap; }
.selfpay-page .detail th + th, .selfpay-page .detail td + td{ padding-left:10px; }
.selfpay-page .detail table{ font-size:13.5px; }
.selfpay-page .detail th{ font-size:12.5px; }
.selfpay-page .detail .etc-title{ font-size:13px; }
/* 줄 속 금액 세 칸 — 줄이 좁으면(«더 크게» 이상) «이름 ― 금액» 을 위아래로 쌓는다 */
.selfpay-page .pay-item{ container-type:inline-size; }
@container (max-width: 240px){
	.selfpay-page .amounts{ flex-direction:column; gap:4px; }
	.selfpay-page .amt{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
	.selfpay-page .amt .k{ margin:0; }
}

/* ══ 일반 모바일 일정관리 — plan.jsp(body.planmgr-page) 가독성 ══════════
   (.plan-page 는 수급자·직원 모바일 계정 일정표가 guardian.css 에서 쓰고 있어 이름을 달리했다)
   윗줄(◀ 연 · 월 ▶ · 직원)은 접어서 연·월이 잘리지 않게 · 선택칸 16px(아이폰 확대 방지) · 달력 7칸은 고르게 · 잔글씨를 올린다. */
.planmgr-page .plan-head{ flex-wrap:wrap; justify-content:center; row-gap:8px; column-gap:6px; container-type:inline-size; }
.planmgr-page .plan-head select{ font-size:16px; padding:8px 8px; }
.planmgr-page .emp-sel-btn{ flex:1 1 100%; font-size:15px; padding:10px 12px; }
@container (max-width: 230px){
	.planmgr-page .plan-head a{ width:32px; height:32px; }
	.planmgr-page .plan-head select{ padding:8px 5px; }
}
.planmgr-page .plan-filter{ font-size:14px; word-break:keep-all; }
/* 달력 — 칸이 글(뱃지)만큼 늘어 화면 밖으로 나가지 않게 7칸을 고르게(minmax 0). 좁으면 뱃지의 «건» 을 접고 숫자만 */
.planmgr-page .cal-head,
.planmgr-page .cal-grid{ grid-template-columns:repeat(7, minmax(0, 1fr)); }
.planmgr-page .cal-cell{ min-width:0; }
.planmgr-page .si .nm{ font-size:12px; }
.planmgr-page .si .cnt{ font-size:12px; }
.planmgr-page .si .cnt i{ font-style:normal; }
.planmgr-page .si.more{ font-size:11.5px; }
.planmgr-page .cal{ container-type:inline-size; }
@container (max-width: 260px){
	.planmgr-page .cal-cell{ padding:3px 2px 4px; }
	.planmgr-page .si{ padding:3px 1px; }
	.planmgr-page .si .cnt i{ display:none; }
}
/* 날짜 줄 — «0/건» 이 끊기지 않게, 자리가 모자라면 [오늘]·[일정 추가]가 다음 줄로 */
.planmgr-page .plan-date-row{ flex-wrap:wrap; row-gap:8px; }
.planmgr-page .plan-date-row .plan-date{ flex:1 1 150px; font-size:15px; word-break:keep-all; }
.planmgr-page .plan-date .n{ font-size:14px; white-space:nowrap; }
.planmgr-page .plan-add, .planmgr-page .plan-today{ font-size:14px; }
.planmgr-page .hday-name{ font-size:14px; }
/* 일정 줄 */
.planmgr-page .plan-item .who{ font-size:14px; }
.planmgr-page .plan-item .who.addr{ font-size:13.5px; }
.planmgr-page .plan-item .emp{ font-size:13.5px; word-break:keep-all; overflow-wrap:anywhere; }
.planmgr-page .plan-item .time small{ font-size:13px; white-space:nowrap; }   /* «(180/분)» 으로 갈리지 않게 */
.planmgr-page .pi-acts{ flex:none; display:flex; gap:6px; align-self:center; }
.planmgr-page .rowbtn .bl{ font-size:12.5px; }
/* 폰 폭(목록 330px 미만)이면 복사·편집 묶음을 줄 아래 두 칸으로 — 옆에 두면 본문 자리가 좁아 수급자·주소가 서너 줄로 접힌다. 태블릿은 오른쪽. */
.planmgr-page #planList{ container-type:inline-size; }
@container (max-width: 330px){
	.planmgr-page .plan-item{ flex-wrap:wrap; row-gap:10px; }
	.planmgr-page .plan-item .body{ flex:1 1 0; }
	.planmgr-page .plan-item .gbn{ width:52px; }
	.planmgr-page .pi-acts{ flex:1 1 100%; margin-left:12px; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
	.planmgr-page .pi-acts .rowbtn{ flex-direction:row; justify-content:center; gap:6px; height:40px; padding:0 8px; }
	.planmgr-page .pi-acts .rowbtn .bl{ font-size:14px; }
}

/* ══ 일반 모바일 급여명세서 — pay.jsp · pay_view.jsp · pay_detail.jsp(body.paymgr-page) 가독성 ══════════
   (.pay-page 는 직원 모바일 계정 my_pay 가 쓰고 있어 이름을 달리했다)
   선택칸 16px(아이폰 확대 방지 — 해 선택칸은 .gmob 달 이동 규칙) · 잔글씨를 올린다 · 이름·금액은 낱말 단위로. */
.paymgr-page .emp-pick select{ font-size:16px; }
.paymgr-page .plan-total{ font-size:13.5px; }
.paymgr-page .pay-row .pay-mm small{ font-size:12.5px; }
.paymgr-page .pay-row .pay-amt small{ font-size:13px; }
.paymgr-page .pay-row .pay-sub{ font-size:13.5px; line-height:1.45; word-break:keep-all; overflow-wrap:anywhere; }
.paymgr-page .ps-name{ word-break:keep-all; overflow-wrap:anywhere; }
.paymgr-page .ps-job{ font-size:13.5px; }
.paymgr-page .ps-ym{ font-size:14px; word-break:keep-all; }
.paymgr-page .ps-total .k{ font-size:14px; }
.paymgr-page .ps-total-sub{ font-size:13.5px; flex-wrap:wrap; row-gap:4px; }
.paymgr-page .ps-hour .k{ font-size:13px; }
.paymgr-page .ps-items .ps-item{ font-size:14.5px; }
.paymgr-page .ps-item .k{ word-break:keep-all; overflow-wrap:anywhere; }
.paymgr-page .ps-sub-title{ font-size:13px; }
.paymgr-page .ps-note{ font-size:13px; word-break:keep-all; }
.paymgr-page .ps-result .k{ word-break:keep-all; }
.paymgr-page .vd-day{ font-size:13.5px; }
.paymgr-page .vd-time{ width:60px; font-size:12.5px; }
.paymgr-page .vd-who{ word-break:keep-all; overflow-wrap:anywhere; }
.paymgr-page .vd-what{ font-size:13px; word-break:keep-all; }
.paymgr-page .vd-tag{ font-size:11.5px; }
.paymgr-page .vd-min{ font-size:13px; }
.paymgr-page .vd-suga{ font-size:13px; }
/* 좁을 때(글자 «더 크게» 이상) 월 칸·배지·화살표에 본문이 눌리지 않게 — 금액은 한 줄로 두고,
   목록 폭이 300px 아래면 배지를 본문 아래로 · 화살표는 뺀다(줄 전체가 링크다). */
.paymgr-page .list{ container-type:inline-size; }
.paymgr-page .pay-row .pay-amt{ white-space:nowrap; }
@container (max-width: 300px){
	.paymgr-page .pay-row{ display:grid; grid-template-columns:44px minmax(0, 1fr); column-gap:12px; row-gap:6px; align-items:start; }
	.paymgr-page .pay-row .pay-mm{ grid-row:1 / span 2; align-self:center; }
	.paymgr-page .pay-row .badge{ grid-column:2; justify-self:start; }
	.paymgr-page .pay-row .arrow{ display:none; }
}
/* 세부내역 줄 — 폭이 260px 아래면 분·수가를 아래 줄 오른쪽으로 */
@container (max-width: 260px){
	.paymgr-page .vd-row{ flex-wrap:wrap; row-gap:4px; }
	.paymgr-page .vd-body{ flex:1 1 0; }
	.paymgr-page .vd-min{ flex:1 1 100%; display:flex; justify-content:flex-end; align-items:baseline; gap:8px; }
	.paymgr-page .vd-min .min{ display:inline; }
	.paymgr-page .vd-suga{ display:inline; margin:0; }
}
/* 명세서 — 근로시간 칸은 폭에 따라 두 칸 ↔ 한 칸, 실지급액·합계는 이름과 금액을 한 줄 고정(모자라면 금액이 다음 줄 오른쪽),
   지급·공제 항목은 이름이 길면 금액이 아래 줄로(이름이 금액에 눌리지 않게) */
.paymgr-page .ps-hours{ grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); }
.paymgr-page .ps-total, .paymgr-page .ps-result{ flex-wrap:wrap; gap:2px 10px; }
.paymgr-page .ps-total .k, .paymgr-page .ps-result .k{ white-space:nowrap; }
.paymgr-page .ps-total .v, .paymgr-page .ps-result .v{ margin-left:auto; white-space:nowrap; }
.paymgr-page .ps-items .ps-item{ flex-wrap:wrap; }
.paymgr-page .ps-item .v{ margin-left:auto; }

/* ══ 일반 모바일 쪽지함 — memo.jsp · memo_view.jsp · memo_write.jsp(body.memo-page) 가독성 ══════════
   보낸 사람 이름은 날짜에 밀리지 않게 · 미리보기는 두 줄까지 · 칩 줄의 [쓰기] 는 위 .gmob 칩 줄 규칙 · 잔글씨를 올린다. */
.memo-page .btn-write{ font-size:14px; }
.memo-page .memo-item .row1{ flex-wrap:wrap; row-gap:2px; }
/* 이름은 줄지 않게(min-width:auto) — 자리가 모자라면 날짜가 다음 줄로 간다. overflow-wrap:anywhere 를 주면 이름 칸이 한 글자 폭까지 줄어 «박/재/명» 이 된다 */
.memo-page .memo-item .who{ min-width:auto; white-space:normal; overflow:visible; text-overflow:clip; word-break:keep-all; }
.memo-page .memo-item .when{ font-size:12.5px; }
/* 미리보기 — 한 줄 «…» 대신 두 줄까지 */
.memo-page .memo-item .prev{
	font-size:14px; white-space:normal; word-break:keep-all; overflow-wrap:anywhere;
	display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
}
.memo-page .memo-meta{ flex:1; }
.memo-page .memo-meta .who{ word-break:keep-all; overflow-wrap:anywhere; }
.memo-page .memo-meta .when{ font-size:13.5px; word-break:keep-all; }
.memo-page .memo-body{ word-break:keep-all; overflow-wrap:anywhere; }
.memo-page .memo-file-note{ font-size:13.5px; }
.memo-page .memo-file{ font-size:14px; }
/* 쪽지 쓰기 — 받는 사람 이름이 길면 말줄임 대신 역할 아래 줄로 */
.memo-page .pick-title{ font-size:13.5px; }
.memo-page .pick-role{ font-size:12.5px; }
.memo-page .pick-opt .pick-body{ flex-wrap:wrap; row-gap:4px; }
.memo-page .pick-opt .pick-name{ white-space:normal; overflow:visible; text-overflow:clip; word-break:keep-all; }
.memo-page textarea{ word-break:keep-all; }

/* ══ 일반 모바일 평가 서식 — eval_board · inc_evalpick(서식 7종 수급자 고르기) · eval_*_list/_input/_view(body.evalform-page) ══════════
   이 화면들은 직원 모바일 계정도 MobileStaffBridgeFilter 로 연다(평가 입력) — 같이 바뀐다.
   현황판: 요약 칸·두 묶음 단추·반기 제목은 낱말 단위로, 잔글씨를 올린다. */
.evalform-page .bh-title{ word-break:keep-all; }
.evalform-page .bs-top{ font-size:12.5px; word-break:keep-all; }
.evalform-page .bs-num small{ font-size:12px; }
/* 요약 네 칸 — 틀(.bsum-wrap) 폭이 280px 아래면 두 칸씩 두 줄 */
.evalform-page .bsum-wrap{ container-type:inline-size; }
@container (max-width: 280px){
	.evalform-page .bsum{ grid-template-columns:repeat(2, 1fr); }
}
.evalform-page .board-seg button{ word-break:keep-all; }
.evalform-page .bw-meta{ font-size:12.5px; }
.evalform-page .bc-top{ font-size:13.5px; }
.evalform-page .bc-date, .evalform-page .bc-badge, .evalform-page .bc-hint{ font-size:12px; }
.evalform-page .board-note{ font-size:13px; }
/* 서식 7종의 목록 · 입력 · 결과 보기(docs/change_log_2026-09.md 224차) — 문항 제목·안내·선택지는 낱말 단위로 다 보이게,
   잔글씨를 올리고, 좁은 폰에서 [이전]·[저장]·[다음] 줄과 결과 보기의 이름 칸이 밀리지 않게 한다. */
.gmob .error-box, .gmob .ok-box{ word-break:keep-all; overflow-wrap:anywhere; }
.gmob .sheet-hint{ word-break:keep-all; overflow-wrap:anywhere; }
.gmob .info-row .k{ word-break:keep-all; overflow-wrap:anywhere; }
.evalform-page .block-title,
.evalform-page .sheet-field label{ word-break:keep-all; overflow-wrap:anywhere; }
/* 마법사 머리줄 · 이동 단추(CIST · 욕구사정 · 업무수행일지) */
.evalform-page .wiz-of{ font-size:13px; }
.evalform-page .wiz-hint{ font-size:13px; word-break:keep-all; }
.evalform-page .wiz-done-hint{ font-size:13.5px; word-break:keep-all; overflow-wrap:anywhere; }
.evalform-page .guide-btn{ font-size:13px; }
.evalform-page .wiz-nav{ flex-wrap:wrap; container-type:inline-size; }
/* 줄이 좁으면(360px 폰은 «더 크게», 320px 폰은 «크게» 부터) 저장이 한 줄을 다 쓰고 이전 · 다음은 아래 줄에 반씩 */
@container (max-width: 280px){
	.evalform-page .wiz-nav .btn-primary{ flex:1 1 100%; order:0; }
	.evalform-page .wiz-nav .btn-wiz-prev,
	.evalform-page .wiz-nav .btn-wiz-next{ flex:1 1 0; min-height:48px; }
}
/* 문항 카드(낙상 · 욕창 · CIST) — 여러 줄 문항이면 번호가 첫 줄 옆에 */
.evalform-page .fall-q{ align-items:flex-start; word-break:keep-all; overflow-wrap:break-word; }
.evalform-page .fall-qno{ width:24px; height:24px; font-size:12.5px; margin-top:-1px; }
.evalform-page .pick-score{ font-size:13px; }
.evalform-page .bs-desc{ font-size:13px; }
.evalform-page .total-unit{ font-size:14px; }
.evalform-page .total-todo{ font-size:13.5px; word-break:keep-all; }
.evalform-page .cq-t{ word-break:keep-all; overflow-wrap:anywhere; }
.evalform-page .recall-q{ font-size:13.5px; word-break:keep-all; overflow-wrap:anywhere; }
/* CIST 기억회상 — 낱말 옆에 질문(display:block)이 flex 칸으로 붙으면 낱말이 눌린다. 질문은 낱말 아래 줄로 */
.evalform-page .recall-card .fall-q{ flex-wrap:wrap; }
.evalform-page .recall-card .recall-q{ flex:1 1 100%; margin-left:32px; }
.evalform-page .crit-note,
.evalform-page .pic-note{ font-size:13.5px; }
.evalform-page .say-guide{ font-size:14px; }
.evalform-page .sum-max{ font-size:13px; }
/* 줄형 선택지(업무수행일지 · CIST 판정) — 한 줄 «…» 대신 줄바꿈해 다 보이게(낙상 · 욕창 문항 카드와 같은 규칙) */
.evalform-page .pick-list .pick-name{ white-space:normal; overflow:visible; text-overflow:clip; line-height:1.45; word-break:keep-all; overflow-wrap:anywhere; }
/* 욕구사정 — 배지·분류 이름 잔글씨를 올리고 섹션 제목·항목 이름은 낱말 단위로 */
.evalform-page .na-type{ font-size:12px; }
.evalform-page .na-cat{ font-size:13.5px; }
.evalform-page .na-sublbl{ font-size:13.5px; }
.evalform-page .na-sectitle,
.evalform-page .na-group .na-name{ word-break:keep-all; overflow-wrap:anywhere; }
/* 욕구사정 숫자 칸(키 · 체중, 자녀수, 약복용) — «이름 · 칸 · 단위» 세 칸을 한 벌로 두고 줄 폭에 들어가는 벌 수만큼
   한 줄에 놓는다(단위가 윗줄 끝에 홀로 남지 않게) */
.evalform-page .na-nums{ display:grid; grid-template-columns:repeat(auto-fill, 1.9em 70px 1.4em); align-items:center; justify-content:start; gap:8px 6px; }
.evalform-page .na-nums .na-num{ width:100%; }
.evalform-page .na-numunit{ margin-right:0; }
/* 서명 칸(욕구사정 마지막 단계 · 상태변화 주차 입력) — 단추 글은 낱말 단위로, 두 단추는 한 칸이 130px 아래로 좁아지면 위아래로 */
.evalform-page .sign-saved-note{ font-size:13px; word-break:keep-all; }
.evalform-page .sign-ph{ font-size:14px; }
.evalform-page .sign-chk{ font-size:13.5px; }
.evalform-page .act{ font-size:13.5px; word-break:keep-all; }
.evalform-page .sign-load{ flex-wrap:wrap; }
.evalform-page .sign-load .act.wide{ flex:1 1 130px; font-size:14px; }
/* 목록 — 잔글씨를 올린다 */
.evalform-page .rg-row{ font-size:14px; word-break:keep-all; overflow-wrap:break-word; }
.evalform-page .rg-band{ font-size:12.5px; min-width:72px; }
.evalform-page .fall-risk{ word-break:keep-all; overflow-wrap:anywhere; }
.evalform-page .fall-meta{ font-size:13px; word-break:keep-all; overflow-wrap:anywhere; }
.evalform-page .fall-score .fs-unit{ font-size:11.5px; }
.evalform-page .copy-hint{ font-size:13.5px; }
.evalform-page .form-note{ font-size:13px; word-break:keep-all; }
/* 상태변화기록지 — 달 목록의 «12/12주» 는 한 줄로, 비고는 두 줄까지, 잔글씨를 올린다 */
.evalform-page .sw-y{ font-size:12.5px; }
.evalform-page .sheet-cnt{ font-size:13px; white-space:nowrap; }
.evalform-page .sheet-remark{
	font-size:13px; white-space:normal; word-break:keep-all; overflow-wrap:anywhere;
	display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
}
.evalform-page .week-no{ font-size:14px; }
.evalform-page .week-blank{ font-size:14px; word-break:keep-all; }
.evalform-page .week-date{ font-size:13px; }
.evalform-page .week-cont{ font-size:14px; word-break:keep-all; overflow-wrap:anywhere; }
.evalform-page .week-meta{ font-size:12.5px; word-break:keep-all; }
/* 주차 칸 — 목록 폭이 280px 아래면(360px 폰은 «더 크게», 320px 폰은 «크게» 부터) 주차 · 서명(화살표)을 윗줄에, 내용은 아래 줄 전체로
   (옆에 두면 내용 자리가 좁아 한두 낱말씩 끊긴다) */
/* 달 목록 · 주차 칸의 오른쪽 화살표 — 크기 규칙이 없으면 폭 0 이다(다른 목록 줄과 같게) */
.evalform-page .sheet-item .arrow,
.evalform-page .week-item .arrow{ flex:none; display:flex; align-self:center; color:var(--text-sub); }
.evalform-page .sheet-item .arrow svg,
.evalform-page .week-item .arrow svg{ width:17px; height:17px; }
.evalform-page .week-list{ container-type:inline-size; }
@container (max-width: 280px){
	.evalform-page .week-item{ flex-wrap:wrap; row-gap:6px; }
	.evalform-page .week-item .week-sign,
	.evalform-page .week-item .arrow{ order:1; margin-left:auto; }
	.evalform-page .week-item .week-body{ order:2; flex:1 1 100%; }
}
/* 상담일지 목록 — 잔글씨를 올리고 미리보기는 두 줄까지 */
.evalform-page .chip .c{ font-size:12.5px; }
.evalform-page .cs-item .cs-rel{ font-size:13px; }
.evalform-page .cs-item .cs-meta{ font-size:13px; word-break:keep-all; overflow-wrap:anywhere; }
.evalform-page .cs-item .cs-preview{
	font-size:13.5px; white-space:normal; word-break:keep-all; overflow-wrap:anywhere;
	display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
}
/* 업무수행일지 목록(쪽지 줄 모양을 빌려 쓴다) — 방문일이 배지에 밀리지 않게, 방문 시각 · 방문자는 말줄임 대신 줄바꿈 */
.evalform-page .memo-item .row1{ flex-wrap:wrap; row-gap:4px; }
.evalform-page .memo-item .who{ min-width:auto; white-space:normal; overflow:visible; text-overflow:clip; word-break:keep-all; }
.evalform-page .memo-item .prev{ font-size:13.5px; white-space:normal; word-break:keep-all; overflow-wrap:anywhere; }
/* 결과 보기(CIST · 욕구사정 · 업무수행일지) — 이름 칸이 7em 아래로 줄어들 자리면 값이 다음 줄로 내려간다.
   값 · 반응 글은 낱말 단위로 */
.evalform-page .vl{ flex:1 1 7em; word-break:keep-all; overflow-wrap:anywhere; }
.evalform-page .vscore{ word-break:keep-all; overflow-wrap:anywhere; }
.evalform-page .vresp{ font-size:13.5px; word-break:keep-all; overflow-wrap:anywhere; }
.evalform-page .sec-pts{ font-size:13px; word-break:keep-all; }
.evalform-page .sec-edit{ font-size:13.5px; }
.evalform-page .cist-status .cist-meta{ font-size:13.5px; }
.evalform-page .vatt-cap{ font-size:13.5px; }
.evalform-page .btn-primary,
.evalform-page .list-btn{ word-break:keep-all; }
.evalform-page .na-vchip{ font-size:13.5px; }
.evalform-page .na-vempty{ font-size:13.5px; word-break:keep-all; }
.evalform-page .na-voplbl{ font-size:13px; }
.evalform-page .na-vop{ word-break:keep-all; overflow-wrap:anywhere; }
.evalform-page .memo{ word-break:keep-all; overflow-wrap:anywhere; }
/* 업무수행일지 — 라벨 옆 보조 설명 · 작성요령 시트의 주석 · 예시 잔글씨를 올린다 */
.evalform-page .swj .sheet-field label .lbl-sub{ font-size:12.5px; }
.evalform-page .guide-body .g-note,
.evalform-page .guide-body .g-eg{ font-size:13.5px; }

/* ══ 일반 모바일 설정 — config.jsp · config_theme · config_start · config_pass · config_sign · config_ltcsync(body.cfg-page) 가독성 ══════════
   안내·앱 정보·테마 이름·경고·단추의 잔글씨를 올리고 낱말 단위로 접는다. 줄형 선택지는 말줄임 대신 줄바꿈. 서명판의 이름 워터마크는 판 폭에 맞춘다. */
.cfg-page .sign-todo{ font-size:13.5px; word-break:keep-all; overflow-wrap:anywhere; }
.cfg-page .app-info{ font-size:13px; word-break:keep-all; overflow-wrap:anywhere; }
.cfg-page .warn{ font-size:13.5px; line-height:1.5; }
/* 줄형 선택지(밝기 · 글자 크기 · 시작 화면 · 공단반영) — 한 줄 «…» 대신 줄바꿈 */
.cfg-page .pick-name{ white-space:normal; overflow:visible; text-overflow:clip; line-height:1.45; word-break:keep-all; overflow-wrap:anywhere; }
.cfg-page .pick-body{ flex-wrap:wrap; row-gap:2px; }
.cfg-page .pick-score{ font-size:13px; }
/* 테마 색상 견본 — 이름과 «기본» 이 한 칸에 안 들어가면 «기본» 이 아래 줄로 */
.cfg-page .skin-sw .nm{ font-size:13.5px; flex-wrap:wrap; justify-content:center; column-gap:3px; word-break:keep-all; }
.cfg-page .skin-sw .nm small{ font-size:12px; }
.cfg-page .btn-ghost{ word-break:keep-all; }
/* 서명 등록 — 평가 서식의 서명 칸과 같은 값 */
.cfg-page .sign-note{ font-size:13.5px; word-break:keep-all; overflow-wrap:anywhere; }
.cfg-page .sign-saved-note{ font-size:13px; word-break:keep-all; }
.cfg-page .sign-chk{ font-size:13.5px; }
.cfg-page .act{ font-size:13.5px; word-break:keep-all; }
.cfg-page .sign-load .act.wide{ font-size:14px; }
/* 이름 워터마크 — 크기를 화면 폭(vw)이 아니라 서명판 폭에 맞춘다(글자를 키우면 vw 기준은 판보다 커져 이름이 잘린다).
   컨테이너 단위를 모르는 옛 브라우저는 이 줄을 버리고 위의 vw 값을 쓴다 */
.cfg-page .sign-wrap{ container-type:inline-size; }
.cfg-page .sign-wm{ font-size:clamp(36px, 24cqi, 84px); letter-spacing:min(10px, 3cqi); text-indent:min(10px, 3cqi); }

/* ══ 일반 모바일 급여제공기록 — rfid.jsp · rfid_view.jsp(body.rfmgr-page) ══════════
   (.rfid-page 는 보호자 열람 페이지(guardian.css)가 쓰고 있어 이름을 달리했다. 이 구역의 이름은 전부 rf- 로 시작)
   목록 줄은 수급자관리 줄(.cust-item)을 빌리고 오른쪽에 «기록/일정» 숫자와 충족/부족, 상세는 날짜 묶음 + 줄(기록이 있으면 눌러서 펼침).
   색 뜻은 PC «급여제공기록RFID»와 같다 — 충족 초록(브랜드) · 부족·기록 없음 쪽 빨강 · 수가 불일치 주황. */
.rfmgr-page .rf-hide{ display:none !important; }
.rfmgr-page .rf-fetch{ margin:0 2px 10px; font-size:13.5px; line-height:1.5; color:var(--text-sub); word-break:keep-all; overflow-wrap:anywhere; }
.rfmgr-page .rf-fetch b{ color:var(--text-main); font-weight:700; white-space:nowrap; }
.rfmgr-page .rf-warn{ margin:0 0 12px; font-size:13.5px; line-height:1.5; align-items:flex-start; }
.rfmgr-page .rf-warn svg{ margin-top:3px; }
/* 요약 칸(목록) — 수급자 · 충족 · 부족(· 5등급 인지). 칸이 92px 아래로 좁아지면 줄을 바꾼다 */
.rfmgr-page .rf-sum{ display:grid; grid-template-columns:repeat(auto-fit, minmax(92px, 1fr)); gap:8px; margin-bottom:12px; }
.rfmgr-page .rf-sum-card{ background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--sh-1); padding:10px 8px; text-align:center; }
.rfmgr-page .rf-sum-card b{ display:block; font-size:19px; font-weight:800; line-height:1.25; color:var(--text-main); white-space:nowrap; }
.rfmgr-page .rf-sum-card span{ display:block; margin-top:2px; font-size:13px; color:var(--text-sub); word-break:keep-all; }
.rfmgr-page .rf-sum-card.ok b{ color:var(--brand-text); }
.rfmgr-page .rf-sum-card.bad b{ color:var(--red); }
/* 목록 줄 — 줄 전체가 링크(<a class="cust-item rf-item">) */
.rfmgr-page a.rf-item{ text-decoration:none; transition:opacity .12s ease; }
.rfmgr-page a.rf-item:active{ opacity:.6; }
.rfmgr-page .rf-item .name{ font-size:16px; }
.rfmgr-page .rf-x{ font-style:normal; font-weight:700; color:var(--red); }
.rfmgr-page .rf-cog-ok{ font-weight:700; color:var(--brand-text); }
.rfmgr-page .rf-cog-bad{ font-weight:700; color:var(--orange); }
.rfmgr-page .rf-stat{ flex:none; min-width:58px; text-align:center; }
.rfmgr-page .rf-stat b{ display:block; font-size:18px; font-weight:800; line-height:1.2; white-space:nowrap; font-variant-numeric:tabular-nums; }
.rfmgr-page .rf-stat b small{ font-size:13px; font-weight:700; color:var(--text-sub); }
.rfmgr-page .rf-stat > span{ display:inline-block; margin-top:3px; padding:2px 9px; border-radius:999px; font-size:12.5px; font-weight:800; }
.rfmgr-page .rf-item.ok .rf-stat b{ color:var(--brand-text); }
.rfmgr-page .rf-item.ok .rf-stat > span{ background:var(--brand-tint); color:var(--brand-text); }
.rfmgr-page .rf-item.bad .rf-stat b{ color:var(--red); }
.rfmgr-page .rf-item.bad .rf-stat > span{ background:var(--danger-bg); color:var(--red); }
/* 목록 폭이 250px 아래면(360px 폰은 «더 크게», 320px 폰은 «크게» 부터) 첫 글자 동그라미와 오른쪽 화살표를 접는다(줄 전체가 링크라 화살표가 없어도 된다) */
.rfmgr-page #rfList{ container-type:inline-size; }
@container (max-width: 250px){
	.rfmgr-page .rf-item .avatar,
	.rfmgr-page .rf-item .arrow{ display:none; }
}
.rfmgr-page .rf-note{ margin:16px 2px 0; font-size:13px; line-height:1.6; color:var(--text-sub); word-break:keep-all; overflow-wrap:anywhere; }
/* 상세 — 판정 한 줄 + 상태 칩(누르면 그 상태의 줄만) */
.rfmgr-page .rf-verdict{ margin:0 0 10px; padding:11px 14px; border-radius:var(--radius-md); font-size:14px; font-weight:700; word-break:keep-all; overflow-wrap:anywhere; }
.rfmgr-page .rf-verdict b{ margin-right:8px; font-weight:800; }
.rfmgr-page .rf-verdict.ok{ background:var(--brand-tint); border:1px solid var(--brand-border); color:var(--brand-text); }
.rfmgr-page .rf-verdict.bad{ background:var(--danger-bg); border:1px solid var(--danger-border); color:var(--red); }
.rfmgr-page .chip .rf-n{ margin-left:5px; font-weight:800; }
/* 날짜 묶음과 줄 — 왼쪽 띠 색이 상태(맞음 브랜드 · 수가 불일치 주황 · 일정 없는 기록 빨강 · 기록 없음은 회색 바탕) */
.rfmgr-page .rf-day{ margin-top:14px; }
.rfmgr-page .rf-date{ margin:0 4px 6px; font-size:14.5px; font-weight:800; color:var(--text-main); }
.rfmgr-page .rf-rec{ display:block; margin-bottom:8px; background:var(--card-bg); border:1px solid var(--border); border-left:4px solid var(--brand); border-radius:var(--radius-md); box-shadow:var(--sh-1); }
.rfmgr-page .rf-rec.st-none{ background:var(--surface-2); border-left-color:var(--border); box-shadow:none; }
.rfmgr-page .rf-rec.st-diff{ border-left-color:var(--orange); }
.rfmgr-page .rf-rec.st-noplan{ border-left-color:var(--red); }
.rfmgr-page .rf-rec > summary,
.rfmgr-page .rf-rec > .rf-line{ display:block; padding:11px 12px 11px 13px; list-style:none; }
.rfmgr-page .rf-rec > summary{ cursor:pointer; }
.rfmgr-page .rf-rec > summary::-webkit-details-marker{ display:none; }
.rfmgr-page .rf-head{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; }
.rfmgr-page .rf-kind{ flex:none; padding:2px 8px; border-radius:999px; font-size:12.5px; font-weight:800; }
.rfmgr-page .rf-kind.k-care{ background:var(--brand-tint); color:var(--brand-text); }
.rfmgr-page .rf-kind.k-bath{ background:var(--input-bg); border:1px solid var(--border); color:var(--blue); }
.rfmgr-page .rf-kind.k-fam{ background:var(--orange-tint); color:var(--orange); }
/* 이름은 줄지 않게 — overflow-wrap:anywhere 를 주면 flex 최소 폭이 한 글자가 되어 «김/요/양» 이 된다 */
.rfmgr-page .rf-emp{ font-size:14.5px; font-weight:800; word-break:keep-all; }
.rfmgr-page .rf-right{ margin-left:auto; display:flex; align-items:center; gap:6px; }
.rfmgr-page .rf-state{ padding:2px 9px; border-radius:999px; font-size:12.5px; font-weight:800; white-space:nowrap; }
.rfmgr-page .rf-state.s-none{ background:var(--card-bg); border:1px solid var(--border); color:var(--text-sub); }
.rfmgr-page .rf-state.s-diff{ background:var(--orange-tint); color:var(--orange); }
.rfmgr-page .rf-state.s-noplan{ background:var(--danger-bg); color:var(--red); }
.rfmgr-page .rf-more{ display:flex; color:var(--text-sub); }
.rfmgr-page .rf-more svg{ width:18px; height:18px; transition:transform .15s ease; }
.rfmgr-page .rf-rec[open] .rf-more svg{ transform:rotate(180deg); }
.rfmgr-page .rf-times{ display:block; margin-top:7px; }
.rfmgr-page .rf-t{ display:block; font-size:14.5px; line-height:1.55; font-variant-numeric:tabular-nums; word-break:keep-all; }
.rfmgr-page .rf-t i{ display:inline-block; min-width:2.6em; font-style:normal; font-size:13px; font-weight:700; color:var(--text-sub); }
.rfmgr-page .rf-t small{ font-size:13px; color:var(--text-sub); white-space:nowrap; }
.rfmgr-page .rf-none{ color:var(--text-sub); }
/* 펼친 기록 내용 */
.rfmgr-page .rf-body{ padding:11px 13px 13px; border-top:1px dashed var(--border); }
.rfmgr-page .rf-link{ margin:0 0 10px; padding:9px 11px; border-radius:10px; background:var(--danger-bg); color:var(--red); font-size:13.5px; font-weight:700; line-height:1.5; word-break:keep-all; overflow-wrap:anywhere; }
.rfmgr-page .rf-sub{ margin:14px 0 6px; font-size:13.5px; font-weight:800; color:var(--brand-text); }
.rfmgr-page .rf-link + .rf-sub,
.rfmgr-page .rf-body > .rf-sub:first-child{ margin-top:0; }
.rfmgr-page .rf-sub small{ font-size:13px; font-weight:700; color:var(--text-sub); }
.rfmgr-page .rf-items{ list-style:none; margin:0; padding:0; display:grid; gap:5px; }
.rfmgr-page .rf-items li{ display:flex; justify-content:space-between; gap:10px; font-size:14px; }
.rfmgr-page .rf-items li span{ min-width:0; word-break:keep-all; overflow-wrap:anywhere; }
.rfmgr-page .rf-items li b{ flex:none; font-weight:800; font-variant-numeric:tabular-nums; }
.rfmgr-page .rf-empty{ margin:0; font-size:13.5px; color:var(--text-sub); }
/* 상태 변화 세 칸 — 유지(브랜드) · 호전(파랑) · 악화(빨강) · 없음(회색) */
.rfmgr-page .rf-st3{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; }
.rfmgr-page .rf-st3 > span{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:7px 4px; border:1px solid var(--border); border-radius:10px; }
.rfmgr-page .rf-st3 i{ font-style:normal; font-size:13px; color:var(--text-sub); text-align:center; word-break:keep-all; overflow-wrap:anywhere; }
.rfmgr-page .rf-st3 b{ padding:1px 9px; border-radius:999px; font-size:13.5px; font-weight:800; }
.rfmgr-page .rf-st3 b.c-keep{ background:var(--brand-tint); color:var(--brand-text); }
.rfmgr-page .rf-st3 b.c-up{ background:var(--input-bg); border:1px solid var(--border); color:var(--blue); }
.rfmgr-page .rf-st3 b.c-bad{ background:var(--danger-bg); color:var(--red); }
.rfmgr-page .rf-st3 b.c-no{ color:var(--text-sub); font-weight:700; }
/* 펼친 내용 폭이 190px 아래면(320px 폰 «아주 크게») 세 칸이 «신체기/능» «유/지» 로 끊긴다 — 한 줄씩(이름 왼쪽 · 값 오른쪽) */
.rfmgr-page .rf-body{ container-type:inline-size; }
@container (max-width: 190px){
	.rfmgr-page .rf-st3{ grid-template-columns:1fr; }
	.rfmgr-page .rf-st3 > span{ flex-direction:row; justify-content:space-between; padding:6px 10px; }
}
.rfmgr-page .rf-kv{ margin:12px 0 0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:9px 12px; }
.rfmgr-page .rf-kv > div{ min-width:0; }
.rfmgr-page .rf-kv > div.wide{ grid-column:1 / -1; }
.rfmgr-page .rf-kv dt{ font-size:13px; font-weight:700; color:var(--text-sub); }
.rfmgr-page .rf-kv dd{ margin:2px 0 0; font-size:14px; word-break:keep-all; overflow-wrap:anywhere; }
.rfmgr-page .rf-memo{ white-space:pre-line; line-height:1.6; }
/* 메인 메뉴 칸 아이콘 — 밝은 쪽 색은 수급자 홈 칸이 이미 정했다(.menu-tile .ico.c-rfid). 일반 모바일은 어둡게도 쓴다 */
:root[data-theme="dark"] .menu-tile .ico.c-rfid{ background:#2a2136; color:#bea3e6; }

/* ══ 모바일 배너 이름 앞 표시 — main.jsp(기관 계정) · my.jsp(직원 · 수급자 모바일 계정)의 .who-mark (docs/change_log_2026-09.md 228차) ══════════
   기관 · 직원은 «명찰» 아이콘, 수급자 · 보호자는 «집 속 하트»(재가 돌봄) — 배너 위 반투명 유리 네모 + 흰 선 아이콘.
   배너는 어두운 테마에서도 브랜드 색 그라데이션이라 흰 반투명이 그대로 어울린다. */
.top-banner .who-mark{ flex:none; width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center;
	background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.4); color:#fff; }
.top-banner .who-mark svg{ width:24px; height:24px; }
/* 배너 글 칸(.who)이 좁으면 기관 이름(한 낱말 8글자 남짓)이 명찰에 자리를 뺏긴다 —
   175px 아래(«더 크게» + 320px 폰 · «아주 크게» + 360px 폰)는 한 치수 줄이고, 145px 아래(«아주 크게» + 320px 폰)는 접는다 */
.top-banner .who{ container-type:inline-size; }
@container (max-width: 175px){
	.top-banner .who-mark{ width:34px; height:34px; border-radius:11px; }
	.top-banner .who-mark svg{ width:20px; height:20px; }
}
@container (max-width: 145px){
	.top-banner .who-mark{ display:none; }
}