/* PMIS 간단 레이아웃 모양. 색은 맨 위 변수만 바꾸면 전체가 바뀐다. */
.pmis-wrap {
	--pmis-main: #1f6feb;
	--pmis-main-dark: #1858c4;
	--pmis-design: #e8710a;
	--pmis-design-dark: #c25d06;
	--pmis-bg: #f4f6f9;
	--pmis-text: #1d2330;
	--pmis-sub: #5b6475;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--pmis-bg);
	color: var(--pmis-text);
	font-family: "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}
body { margin: 0; }

/* 위쪽 띠 */
.pmis-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 20px;
	background: #fff;
	border-bottom: 1px solid #dde2ea;
}
.pmis-name {
	font-size: 18px;
	font-weight: 700;
	color: var(--pmis-text);
	text-decoration: none;
	white-space: nowrap;
}
.pmis-side {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 6px 14px;
	font-size: 14px;
}
.pmis-side a { color: var(--pmis-sub); text-decoration: none; }
.pmis-side a:hover { color: var(--pmis-text); text-decoration: underline; }
.pmis-user { color: var(--pmis-text); font-weight: 600; }

/* 버튼 */
.pmis-side a.pmis-btn,
.pmis-btn {
	display: inline-block;
	background: var(--pmis-main);
	color: #fff;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 700;
}
.pmis-side a.pmis-btn:hover,
.pmis-btn:hover { background: var(--pmis-main-dark); color: #fff; text-decoration: none; }
.pmis-btn-sm { padding: 6px 12px; font-size: 14px; }
.pmis-btn-lg { padding: 18px 48px; font-size: 22px; box-shadow: 0 4px 14px rgba(31, 111, 235, .3); }
.pmis-side a.pmis-btn-design,
.pmis-btn-design { background: var(--pmis-design); }
.pmis-side a.pmis-btn-design:hover,
.pmis-btn-design:hover { background: var(--pmis-design-dark); }

/* 메인 입구 두 개 (일반 자료 분석 / 설계모드) */
.pmis-entries {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 18px;
	width: 100%;
	max-width: 760px;
}
.pmis-entry {
	flex: 1 1 300px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 24px 26px;
	border-radius: 12px;
	background: var(--pmis-main);
	color: #fff;
	text-decoration: none;
	text-align: left;
	box-shadow: 0 4px 14px rgba(31, 111, 235, .3);
	box-sizing: border-box;
}
.pmis-entry:hover { background: var(--pmis-main-dark); color: #fff; text-decoration: none; }
.pmis-entry-design { background: var(--pmis-design); box-shadow: 0 4px 14px rgba(232, 113, 10, .3); }
.pmis-entry-design:hover { background: var(--pmis-design-dark); }
.pmis-entry-title { font-size: 22px; font-weight: 700; }
.pmis-entry-desc { font-size: 14px; line-height: 1.5; opacity: .92; }

/* 본문 */
.pmis-main { flex: 1; width: 100%; box-sizing: border-box; }
.pmis-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 22px;
	min-height: 60vh;
	padding: 40px 16px;
	text-align: center;
}
.pmis-hero h1 { margin: 0; font-size: 30px; }
.pmis-desc { margin: 0; color: var(--pmis-sub); font-size: 15px; }
.pmis-content {
	max-width: 1100px;
	margin: 0 auto;
	padding: 20px 16px 40px;
	box-sizing: border-box;
}
.pmis-sub .pmis-content { background: #fff; margin-top: 20px; border-radius: 8px; }

/* 휴대폰 */
@media (max-width: 640px) {
	.pmis-top { padding: 8px 12px; }
	.pmis-name { font-size: 16px; }
	.pmis-side { gap: 4px 10px; font-size: 13px; }
	.pmis-hero h1 { font-size: 24px; }
	.pmis-btn-lg { padding: 16px 32px; font-size: 19px; width: 100%; max-width: 320px; box-sizing: border-box; }
	.pmis-entry { padding: 18px 20px; }
	.pmis-entry-title { font-size: 19px; }
}


/* 오른쪽 위 로그인 상자 (2026-10-22). 웹 GIS 지도 화면의 base_login.js와 같은 모양 */
.pmis-login { position: relative; }
.pmis-login > summary { list-style: none; }
.pmis-login > summary::-webkit-details-marker { display: none; }
.pmis-login-btn {
	display: inline-block;
	padding: 6px 12px;
	border: 1px solid #cfd6e0;
	border-radius: 8px;
	background: #fff;
	color: var(--pmis-text);
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	user-select: none;
}
.pmis-login-btn:hover { background: #f0f3f8; }
.pmis-login[open] > .pmis-login-btn { border-color: var(--pmis-main); }
.pmis-login-pop {
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	z-index: 100;
	width: 240px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 14px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 8px 28px rgba(20, 30, 50, .18);
	text-align: left;
}
.pmis-login-pop input[type=text],
.pmis-login-pop input[type=password] {
	width: 100%;
	box-sizing: border-box;
	padding: 7px 9px;
	border: 1px solid #cfd6e0;
	border-radius: 6px;
	font-size: 14px;
}
.pmis-login-keep { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--pmis-sub); }
.pmis-login-pop button[type=submit] {
	padding: 8px;
	border: 0;
	border-radius: 6px;
	background: var(--pmis-main);
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
}
.pmis-login-pop button[type=submit]:hover { background: var(--pmis-main-dark); }
.pmis-side .pmis-login-pop a { color: var(--pmis-main); font-size: 13px; }
.pmis-login-links { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pmis-side .pmis-login-menu a { display: block; padding: 6px 4px; color: var(--pmis-text); border-radius: 4px; font-size: 14px; }
.pmis-side .pmis-login-menu a:hover { background: #f0f3f8; text-decoration: none; }
.pmis-login-who { font-weight: 700; padding-bottom: 6px; border-bottom: 1px solid #e6eaf0; }
@media (max-width: 640px) {
	.pmis-login-btn { padding: 5px 9px; }
	.pmis-login-pop { width: min(240px, calc(100vw - 24px)); }
}

/* 사용법·대시보드 링크와 기능 소개 카드 (2026-10-22, 1.3) */
.pmis-side a.pmis-link { color: var(--pmis-text); font-weight: 600; white-space: nowrap; }
.pmis-start { margin: 0; color: var(--pmis-sub); font-size: 15px; }
.pmis-start a { color: var(--pmis-main); font-weight: 700; text-decoration: none; }
.pmis-start a:hover { text-decoration: underline; }
.pmis-hero { min-height: 46vh; }
.pmis-features { max-width: 980px; margin: 0 auto; padding: 0 16px 48px; box-sizing: border-box; }
.pmis-features h2 { text-align: center; font-size: 20px; margin: 0 0 16px; }
.pmis-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.pmis-card {
	display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 12px; background: #fff;
	color: var(--pmis-text); text-decoration: none; border: 1px solid #e3e8ef; box-shadow: 0 1px 3px rgba(20, 30, 50, .05);
	transition: transform .12s, box-shadow .12s, border-color .12s;
}
.pmis-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(20, 30, 50, .1); border-color: var(--pmis-main); text-decoration: none; }
.pmis-card-design:hover { border-color: var(--pmis-design); }
.pmis-card b { font-size: 16px; }
.pmis-card span:last-child { color: var(--pmis-sub); font-size: 13.5px; line-height: 1.5; }
.pmis-ic { font-size: 24px; }
@media (max-width: 640px) {
	.pmis-side a.pmis-link { font-size: 13px; }
	.pmis-hero { min-height: auto; padding: 28px 16px; }
}

/* ===== 화면 맞춤 (2026-10-22, 폰·폴드·태블릿) =====
   폰: 위쪽 띠가 두 줄로 흩어지지 않게 한 줄(넘치면 옆으로 밀기), 누르는 곳은 손가락 크기(44px), 노치·홈 막대 자리 비움.
   본문: 넓은 표·그림이 화면을 넘지 않게. 입구 카드는 폰에서 한 줄에 하나, 위쪽 여백을 줄임. */
.pmis-top { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
.pmis-content img, .pmis-content video, .pmis-content iframe { max-width: 100%; height: auto; }
.pmis-content table { max-width: 100%; }
.pmis-content .xe_content, .pmis-content .rd_body { overflow-x: auto; }
.pmis-entry { transition: transform .12s ease, box-shadow .12s ease; }
@media (hover: hover) { .pmis-entry:hover { transform: translateY(-2px); } }
@media (pointer: coarse) {
	.pmis-side a.pmis-btn-sm, .pmis-login-btn { min-height: 40px; display: inline-flex; align-items: center; box-sizing: border-box; }
	.pmis-login-pop input[type=text], .pmis-login-pop input[type=password] { font-size: 16px; padding: 10px; } /* 16px 이상: 아이폰이 입력 때 확대하지 않음 */
	.pmis-login-pop button[type=submit] { padding: 12px; font-size: 15px; }
	.pmis-side .pmis-login-menu a { padding: 10px 6px; }
}
@media (max-width: 640px) {
	.pmis-top { padding: 8px 10px; padding-top: max(8px, env(safe-area-inset-top)); gap: 8px; }
	.pmis-side { flex-wrap: nowrap; justify-content: flex-start; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
	.pmis-side::-webkit-scrollbar { display: none; }
	.pmis-side a.pmis-btn-sm { padding: 6px 10px; font-size: 13px; white-space: nowrap; flex: none; }
	.pmis-login { flex: none; position: static; }
	.pmis-login-pop { position: fixed; right: 10px; left: auto; top: 56px; width: min(280px, calc(100vw - 20px)); }
	.pmis-hero { min-height: 0; padding: 28px 14px 32px; gap: 16px; }
	.pmis-entries { gap: 12px; }
	.pmis-entry { flex-basis: 100%; }
	.pmis-sub .pmis-content { margin-top: 0; border-radius: 0; padding: 14px 12px 28px; padding-bottom: max(28px, env(safe-area-inset-bottom)); }
}
@media (max-width: 420px) {
	.pmis-name { font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
	.pmis-side { flex: none; max-width: 76vw; }
	.pmis-side a.pmis-btn-sm { padding: 6px 8px; font-size: 12px; }
	.pmis-login-btn { padding: 5px 7px; font-size: 13px; }
}

/* 폰: 위쪽 띠가 한 줄이라 로그인 단추가 밀려나지 않게 📊·📘 글자 링크는 숨긴다(로그인 메뉴와 첫 화면 문장에 같은 링크가 있음) */
@media (max-width: 640px) {
	.pmis-side a.pmis-link { display: none; }
}
/* 광고 자리(2026-10-25, 1.4): 칸만. 채우기·숨기기는 웹 GIS lib/ads.js(비어 있으면 자리를 차지하지 않음) */
.pmis-ad { max-width: 948px; height: 90px; margin: 0 auto 32px; width: calc(100% - 32px); }
.pmis-sub .pmis-ad { margin-top: 20px; }
@media (max-width: 640px) { .pmis-ad { height: 60px; margin-bottom: 20px; } }