@charset "UTF-8";
/* ForYouMES 소개 화면. 색과 글꼴은 로그인 화면과 같다 */

@font-face {
	font-family:"Pretendard";
	src:url("../fonts/PretendardVariable.woff2") format("woff2");
	font-weight:100 900;
	font-style:normal;
	font-display:swap;
}

.lp {
	--lp-blue:#2f6feb;
	--lp-blue-deep:#2058c7;
	--lp-navy:#1d3f82;
	--lp-ink:#10141f;
	--lp-sub:#5b6679;
	--lp-line:#e7ebf1;
	margin:0;
	background:#fff;
	color:var(--lp-ink);
	font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;
	-webkit-font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
	/* 한글이 낱말 가운데서 끊기지 않게 한다 */
	word-break:keep-all;
	overflow-wrap:break-word;
}
.lp * { box-sizing:border-box; }
.lp a { color:inherit; text-decoration:none; }
/* 본문 폭. 한 줄이 너무 길지 않게 1280 에서 멈춘다 */
.lp-wrap { width:100%; max-width:1280px; margin:0 auto; padding:0 32px; }
@media (max-width:900px) { .lp-wrap { padding:0 20px; } }

/* ---------- 머리줄 ---------- */
/* 데모로 넘어가도 같은 제품으로 보이게 앱의 윗줄과 맞춘다 */
.lp-top { position:sticky; top:0; z-index:10; background:#101b2d; }
.lp-top .lp-wrap { display:flex; align-items:center; gap:12px; height:58px; }
.lp-logo { color:#e8edf5; font-size:24px; font-weight:800; letter-spacing:-0.04em; line-height:1; }
.lp-logo span { color:#6ea8ff; }
.lp-top-right { display:flex; align-items:center; gap:10px; margin-left:auto; }
.lp-ask { color:#9aa8bf; font-size:14px; font-weight:600; }
.lp-ask b { color:#9fd0ff; }

/* 언어 고르기 */
.lp-lang { position:relative; display:flex; align-items:center; margin-left:4px; padding-left:14px; border-left:1px solid rgba(255,255,255,.16); }
.lp-lang-now { display:none; }
.lp-lang-list { display:flex; align-items:center; gap:12px; }
.lp-top .lp-lang-list a { display:inline-flex; align-items:center; height:32px; color:#9aa8bf; font-size:13.5px; font-weight:600; line-height:1; white-space:nowrap; }
.lp-top .lp-lang-list a:hover { color:#e8edf5; }
.lp-top .lp-lang-list a[aria-current] { color:#fff; font-weight:800; }
@media (max-width:1040px) { .lp-ask { display:none; } }
/* 폰에서는 머리줄이 두 줄로 깨지지 않게 접어 둔다 */
@media (max-width:640px) {
	.lp-top-right { gap:6px; }
	.lp-lang { margin-left:0; padding-left:0; border-left:0; }
	.lp-lang-now { display:inline-flex; align-items:center; justify-content:center; gap:4px; height:32px; padding:0 8px; border:1px solid rgba(255,255,255,.22); border-radius:6px; background:transparent; color:#e8edf5; font:inherit; font-size:12.5px; font-weight:800; line-height:1; cursor:pointer; }
	.lp-lang-now::after { content:""; width:0; height:0; border:4px solid transparent; border-top-color:#9aa8bf; border-bottom-width:0; }
	.lp-lang-list { display:none; position:absolute; top:calc(100% + 8px); right:0; flex-direction:column; align-items:stretch; gap:0; min-width:128px; padding:4px 0; border:1px solid rgba(255,255,255,.18); border-radius:8px; background:#17243a; box-shadow:0 10px 24px rgba(0,0,0,.35); }
	.lp-lang.is-open .lp-lang-list { display:flex; }
	.lp-top .lp-lang-list a { height:44px; padding:0 16px; font-size:15px; }
}
@media (max-width:374px) { .lp-top .lp-wrap { gap:8px; padding:0 14px; } }

/* 일본어는 띄어쓰기가 없어 keep-all 이면 줄이 넘어가지 않는다. 문절에서 끊는다 */
html[lang="ja"] .lp { font-family:"Pretendard","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo","Noto Sans JP",sans-serif; word-break:normal; word-break:auto-phrase; line-break:strict; }
html[lang="ja"] .lp p, html[lang="en"] .lp p { text-wrap:pretty; }
html[lang="ja"] .lp h1, html[lang="ja"] .lp h2, html[lang="ja"] .lp h3,
html[lang="en"] .lp h1, html[lang="en"] .lp h2, html[lang="en"] .lp h3 { text-wrap:balance; }
html[lang="en"] .lp-hero h1 { letter-spacing:-1.2px; }
html[lang="en"] .lp-band h2 { letter-spacing:-1.4px; }

/* ---------- 버튼 ---------- */
.lp-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:48px; padding:0 24px; border:1px solid transparent; border-radius:6px; font-size:17px; font-weight:800; white-space:nowrap; cursor:pointer; }
.lp-btn.is-main { background:var(--lp-blue); color:#fff; }
.lp-btn.is-main:hover { background:var(--lp-blue-deep); }
.lp-btn.is-line { border-color:#cfd6e1; background:#fff; color:var(--lp-ink); }
.lp-btn.is-line:hover { border-color:var(--lp-blue); color:var(--lp-blue-deep); }
.lp-btn.is-kakao { background:#fee500; color:#181600; }
.lp-btn.is-kakao:hover { background:#f5dd00; }
.lp-btn.is-sm { height:42px; padding:0 16px; font-size:15px; }

/* ---------- 첫 화면 ---------- */
.lp-hero { padding:96px 0 88px; background:linear-gradient(180deg,#f5f8ff 0%,#fff 100%); border-bottom:1px solid var(--lp-line); }
.lp-hero h1 { margin:0 0 16px; font-size:clamp(30px,4.4vw,52px); font-weight:850; line-height:1.22; letter-spacing:-1.8px; }
.lp-hero h1 b { color:var(--lp-blue); }
/* 검색어 줄. h1 안에 두되 kicker 처럼 작게 보인다 */
.lp-hero h1 .lp-hero-kw { display:block; margin-bottom:10px; color:var(--lp-blue-deep); font-size:15px; font-weight:800; line-height:1.4; letter-spacing:.2px; }
.lp-hero h1 .lp-hero-kw + br { display:none; }
.lp-hero p { margin:0 0 30px; color:var(--lp-sub); font-size:20px; line-height:1.7; }
.lp-hero p.lp-hero-lead { margin-bottom:12px; }
.lp-hero p.lp-hero-key { color:var(--lp-ink); font-weight:700; }
.lp-hero p.lp-hero-key b { color:var(--lp-blue-deep); font-weight:800; }
@media (max-width:640px) { .lp-hero p { font-size:17.5px; } }
.lp-hero-cta { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.lp-hero-note { margin-top:14px; color:var(--lp-sub); font-size:14px; }
.lp-hero-note b { color:var(--lp-ink); }

/* ---------- 화면 미리보기 ---------- */
.lp-shot { margin-top:38px; border:1px solid var(--lp-line); border-radius:10px; background:#fff; box-shadow:0 18px 40px rgba(16,20,31,.10); overflow:hidden; }
.lp-shot-bar { display:flex; align-items:center; gap:6px; padding:9px 14px; border-bottom:1px solid var(--lp-line); background:#f7f9fc; }
.lp-shot-dot { width:10px; height:10px; border-radius:50%; background:#d7dde7; }
.lp-shot-url { margin-left:10px; color:#6b7585; font-size:13px; }
.lp-shot img { display:block; width:100%; height:auto; }

/* ---------- 구역 공통과 카드 ---------- */
.lp-sec { padding:72px 0; border-bottom:1px solid var(--lp-line); }
.lp-sec-head { margin-bottom:32px; }
/* 구역 머리 위의 짧은 말 */
.lp-kicker { display:block; margin:0 0 10px; color:var(--lp-blue-deep); font-size:15px; font-weight:800; letter-spacing:.2px; }
.lp-sec-head h2 { margin:0 0 10px; font-size:33px; font-weight:850; letter-spacing:-1.2px; }
.lp-sec-head p { margin:0; color:var(--lp-sub); font-size:18.5px; line-height:1.6; }
@media (max-width:640px) {
	.lp-sec { padding:52px 0; }
	.lp-sec-head h2 { font-size:27px; }
	.lp-sec-head p { font-size:17px; }
}
.lp-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
/* 맨 앞 카드는 한 줄을 다 써서, 나머지가 빈칸 없이 떨어지게 한다 */
.lp-card.is-wide { grid-column:1 / -1; border-color:#c9d8f8; background:#f4f7ff; }
.lp-card.is-wide p { max-width:900px; }
.lp-card.is-wide .lp-tag { background:#fff; }
.lp-card { padding:26px 24px; border:1px solid var(--lp-line); border-radius:8px; background:#fff; }
.lp-card h3 { margin:0 0 9px; font-size:21px; font-weight:800; letter-spacing:-.4px; }
.lp-card p { margin:0; color:var(--lp-sub); font-size:17px; line-height:1.65; }
.lp-card .lp-tag { display:inline-block; margin-bottom:10px; padding:2px 8px; border-radius:3px; background:#eef3fe; color:var(--lp-blue-deep); font-size:14px; font-weight:800; }

/* ---------- 흐름 ---------- */
.lp-flow { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.lp-step { position:relative; padding:22px 16px; border:1px solid var(--lp-line); border-radius:8px; background:#fff; text-align:center; }
/* 다섯 칸이 1초씩 물려 차례로 켜진다. 한 바퀴 5초 */
.lp-step { animation:lpStepOn 5s linear infinite; }
.lp-step:nth-child(1) { animation-delay:0s; }
.lp-step:nth-child(2) { animation-delay:1s; }
.lp-step:nth-child(3) { animation-delay:2s; }
.lp-step:nth-child(4) { animation-delay:3s; }
.lp-step:nth-child(5) { animation-delay:4s; }
@keyframes lpStepOn {
	0%   { border-color:var(--lp-blue); background:#f2f6ff; box-shadow:0 6px 16px rgba(47,111,235,.18); transform:translateY(-3px); }
	16%  { border-color:var(--lp-blue); background:#f2f6ff; box-shadow:0 6px 16px rgba(47,111,235,.18); transform:translateY(-3px); }
	32%  { border-color:var(--lp-line); background:#fff; box-shadow:none; transform:none; }
	100% { border-color:var(--lp-line); background:#fff; box-shadow:none; transform:none; }
}
/* 칸 사이 선. 켜진 칸의 것만 진해진다 */
.lp-step:not(:last-child)::after {
	content:""; position:absolute; top:50%; right:-12px; z-index:1;
	width:12px; height:2px; background:#dbe2ee;
	animation:lpStepLine 5s linear infinite;
}
/* 선은 제 칸이 켜진 뒤에 넘어가게 반 박자 늦춘다 */
.lp-step:nth-child(1)::after { animation-delay:.5s; }
.lp-step:nth-child(2)::after { animation-delay:1.5s; }
.lp-step:nth-child(3)::after { animation-delay:2.5s; }
.lp-step:nth-child(4)::after { animation-delay:3.5s; }
@keyframes lpStepLine {
	0%,16% { background:var(--lp-blue); }
	32%,100% { background:#dbe2ee; }
}
/* 움직임을 줄여 달라고 해 둔 사람에게는 켜 둔 채로 멈춘다 */
@media (prefers-reduced-motion:reduce) {
	.lp-step, .lp-step:not(:last-child)::after { animation:none; }
}
@media (max-width:900px) { .lp-step:not(:last-child)::after { display:none; } }
.lp-step i { display:block; margin-bottom:8px; color:var(--lp-blue); font-size:14.5px; font-weight:800; font-style:normal; letter-spacing:.6px; }
.lp-step b { display:block; margin-bottom:6px; color:var(--lp-navy); font-size:18.5px; }
.lp-step span { color:var(--lp-sub); font-size:15.5px; }

/* ---------- 현장 고민 ---------- */
.lp-pain-sec { background:#fbfcfe; }
/* 넷을 둘씩 두 줄로. 상자 없이 선으로만 나눈다 */
.lp-pains { display:grid; grid-template-columns:1fr 1fr; gap:0; }
.lp-pain { padding:28px 44px; border-left:1px solid #dde4ef; }
.lp-pain:nth-child(odd) { padding-left:0; border-left:0; }
.lp-pain:nth-child(even) { padding-right:0; }
.lp-pain:nth-child(-n+2) { padding-top:4px; }
.lp-pain:nth-child(n+3) { padding-bottom:4px; border-top:1px solid #dde4ef; }
.lp-pain b { display:block; margin-bottom:12px; color:var(--lp-ink); font-size:22px; font-weight:800; line-height:1.5; letter-spacing:-.6px; }
.lp-pain p { margin:0; color:var(--lp-sub); font-size:17px; line-height:1.75; }
@media (max-width:900px) {
	.lp-pains { grid-template-columns:1fr; }
	.lp-pain, .lp-pain:nth-child(n) { padding:20px 0; border-left:0; border-top:1px solid #dde4ef; }
	.lp-pain:first-child { padding-top:0; border-top:0; }
	.lp-pain:last-child { padding-bottom:0; }
	.lp-pain b { font-size:20px; }
}

/* ---------- 실제 화면 ---------- */
.lp-shot-sec { background:#f5f8ff; }

/* ---------- 사진 띠 ---------- */
/* 사진 위 글씨가 흐려지지 않게 어두운 막을 깐다 */
.lp-band { position:relative; padding:84px 0; overflow:hidden; background:#0f1826; color:#fff; }
.lp-band-photo {
	position:absolute; inset:0;
	background:url("../img/lp/factory.jpg") center 58% / cover no-repeat;
	opacity:.5;
}
/* 글씨가 놓이는 왼쪽을 한 번 더 어둡게 눌러 준다 */
.lp-band::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(11,18,30,.86) 0%,rgba(11,18,30,.55) 55%,rgba(11,18,30,.22) 100%); }
.lp-band-in { position:relative; z-index:1; }
.lp-band-lead { margin:0 0 14px; color:#8fb4ff; font-size:17px; font-weight:800; letter-spacing:-.2px; }
/* 넓은 화면에서는 한 줄로 간다 */
.lp-band h2 { margin:0 0 20px; font-size:clamp(27px,4.1vw,54px); font-weight:850; line-height:1.24; letter-spacing:-2px; white-space:nowrap; }
.lp-band-desc { max-width:760px; margin:0; color:#d3dcea; font-size:19px; line-height:1.75; }
@media (max-width:980px) { .lp-band h2 { white-space:normal; } }
@media (max-width:640px) {
	.lp-band { padding:56px 0; }
	.lp-band::after { background:rgba(11,18,30,.8); }
	.lp-band-desc { font-size:17.5px; }
	/* 좁은 화면에서는 정해 둔 줄바꿈을 푼다 */
	.lp-band-desc br, .lp-hero p br, .lp-sec-head p br, .lp-duo-txt > p br, .lp-plan-txt > p br, .lp-end-desc br { display:none; }
}

/* ---------- 사진과 설명을 좌우로 ---------- */
.lp-sec-alt { background:#fbfcfe; }
.lp-duo { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:44px; align-items:center; }
.lp-duo + .lp-duo { margin-top:64px; padding-top:64px; border-top:1px solid var(--lp-line); }
/* 둘째 묶음은 사진을 오른쪽에 둔다 */
.lp-duo.is-flip .lp-duo-pic { order:2; }
.lp-duo-pic { overflow:hidden; border:1px solid var(--lp-line); border-radius:10px; background:#eef1f6; }
/* 사진이 늦게 떠도 칸이 흔들리지 않게 높이를 정해 둔다 */
.lp-duo-pic img { display:block; width:100%; height:400px; object-fit:cover; }
.lp-duo-txt h2 { margin:0 0 14px; font-size:32px; font-weight:850; line-height:1.32; letter-spacing:-1.2px; }
.lp-duo-txt > p { margin:0 0 18px; color:var(--lp-sub); font-size:18.5px; line-height:1.75; }
.lp-duo-list { margin:0; padding:0; list-style:none; border-top:1px solid var(--lp-line); }
.lp-duo-list li { position:relative; padding:11px 0 11px 22px; border-bottom:1px solid var(--lp-line); color:#30394b; font-size:17px; font-weight:600; }
/* 점 대신 짧은 선 */
.lp-duo-list li::before { content:""; position:absolute; top:19px; left:0; width:10px; height:2px; background:var(--lp-blue); }
@media (max-width:900px) {
	.lp-duo { grid-template-columns:minmax(0,1fr); gap:24px; }
	.lp-duo.is-flip .lp-duo-pic { order:0; }
	.lp-duo + .lp-duo { margin-top:44px; padding-top:44px; }
	.lp-duo-pic img { height:240px; }
	.lp-duo-txt h2 { font-size:27px; }
}

/* ---------- 도입 상담 ---------- */
.lp-end { padding:54px 0; background:#f5f8ff; border-top:1px solid var(--lp-line); }
.lp-end-box { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px 48px; align-items:start; }
.lp-end-kicker { margin:0 0 10px; color:var(--lp-blue-deep); font-size:14.5px; font-weight:800; letter-spacing:.4px; }
.lp-end-left h2 { margin:0 0 14px; font-size:32px; font-weight:850; line-height:1.3; letter-spacing:-1.2px; }
@media (min-width:901px) { .lp-end-left h2 { white-space:nowrap; } }
.lp-end-desc { margin:0; color:var(--lp-sub); font-size:17.5px; line-height:1.7; }
.lp-end-list { margin:0 0 20px; padding:0; list-style:none; border-top:1px solid #dde4ef; }
.lp-end-list li { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; padding:11px 2px; border-bottom:1px solid #dde4ef; }
.lp-end-list b { min-width:152px; font-size:17px; font-weight:800; }
.lp-end-list span { color:var(--lp-sub); font-size:16px; }
.lp-end-cta { display:flex; flex-wrap:wrap; gap:10px; }

/* ---------- 바닥글 ---------- */
.lp-foot { padding:26px 0 44px; border-top:1px solid var(--lp-line); background:#f8f9fb; color:#8a93a4; font-size:14.5px; }
.lp-foot-nav { display:flex; flex-wrap:wrap; gap:8px 22px; padding-bottom:18px; border-bottom:1px solid #e5e8ed; color:#5e6879; font-size:15px; }
.lp-foot-bottom { display:flex; flex-wrap:wrap; align-items:flex-start; gap:12px 32px; padding-top:22px; }
.lp-foot-logo { color:#6b7585; font-size:22.5px; font-weight:850; letter-spacing:-.8px; }
.lp-foot-logo span { color:#93a4c2; }
.lp-foot-bottom p { margin:0; color:#929aa8; font-size:14px; line-height:1.8; }

@media (max-width:900px) {
	.lp-cards { grid-template-columns:1fr 1fr; }
	.lp-flow { grid-template-columns:1fr 1fr 1fr; }
}
@media (max-width:640px) {
	.lp-top .lp-wrap { height:58px; }
	.lp-ask { display:none; }
	.lp-hero { padding:56px 0 48px; }
	.lp-cards { grid-template-columns:1fr; }
	.lp-flow { grid-template-columns:1fr 1fr; }
	.lp-btn { flex:1 1 100%; }
	.lp-end-box { grid-template-columns:minmax(0,1fr); gap:22px; }
	.lp-end-cta .lp-btn { flex:1 1 100%; }
}

/* 폰 기준. 본문 15px, 보조 13px 이상, 누르는 것 44px */
@media (max-width:640px) {
	.lp-hero p { font-size:17.5px; }
	.lp-hero-note { font-size:14px; }
	.lp-card .lp-tag { font-size:14px; }
	.lp-step span { font-size:15px; }
	.lp-foot { color:#6b7585; font-size:14.5px; }
	.lp-btn { height:50px; font-size:17px; }
	.lp-btn.is-sm { height:46px; font-size:15.5px; }
	.lp-logo { font-size:21.5px; }
}
/* 바닥글 링크도 손가락으로 누를 수 있게 한다 */
.lp-foot a { display:inline-flex; align-items:center; min-height:36px; padding:0 6px; color:var(--lp-blue-deep); font-weight:700; }
.lp-foot-nav a { color:#5e6879; font-weight:600; white-space:nowrap; }
.lp-foot-nav a:hover { color:var(--lp-blue-deep); }
@media (max-width:640px) { .lp-foot a { min-height:44px; } }

/* ---------- 모니터링 요약 ---------- */
.lpm { border:1px solid #d7deea; border-radius:10px; background:#eef2f8; box-shadow:0 18px 40px rgba(16,20,31,.12); overflow:hidden; }
.lpm-top { display:flex; align-items:center; gap:10px; padding:10px 14px; background:#1d3f82; color:#fff; }
.lpm-top b { font-size:15px; font-weight:800; letter-spacing:-0.3px; }
.lpm-live { display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:3px; background:rgba(255,255,255,.16); font-size:12px; font-weight:700; }
.lpm-live i { width:7px; height:7px; border-radius:50%; background:#46e08a; animation:lpmBlink 1.6s infinite; }
@keyframes lpmBlink { 0%,100% { opacity:1; } 50% { opacity:.25; } }
.lpm-clock { margin-left:auto; font-size:14px; font-variant-numeric:tabular-nums; }
.lpm-kpis { display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:#d7deea; }
.lpm-kpi { padding:12px 14px; background:#fff; }
.lpm-kpi span { display:block; color:#5b6679; font-size:13px; font-weight:700; }
.lpm-kpi b { display:block; margin-top:2px; font-size:28px; font-weight:850; line-height:1.1; font-variant-numeric:tabular-nums; }
.lpm-kpi.is-ing b { color:#2058c7; }
.lpm-kpi.is-late b { color:#b3222e; }
.lpm-kpi.is-done b { color:#0b6b49; }
.lpm-body { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:10px; padding:10px; }
.lpm-panel { border:1px solid #dfe4ec; border-radius:6px; background:#fff; overflow:hidden; }
.lpm-panel h4 { margin:0; padding:9px 12px; border-bottom:1px solid #eef1f6; color:#10141f; font-size:14px; font-weight:800; }
.lpm-load { padding:8px 12px 12px; }
.lpm-load-row { display:grid; grid-template-columns:78px 1fr 34px; align-items:center; gap:8px; padding:5px 0; }
.lpm-load-row span { color:#30394b; font-size:13.5px; font-weight:700; }
.lpm-bar { height:12px; border-radius:2px; background:#eef1f6; overflow:hidden; }
.lpm-bar i { display:block; height:100%; background:#2f6feb; transition:width .8s ease; }
.lpm-bar i.is-high { background:#e0912a; }
.lpm-bar i.is-over { background:#c3303c; }
.lpm-load-row b { color:#10141f; font-size:13.5px; text-align:right; font-variant-numeric:tabular-nums; }
.lpm-list { margin:0; padding:0; list-style:none; }
.lpm-list li { display:grid; grid-template-columns:96px minmax(0,1fr) 84px 80px; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px solid #f1f4f8; font-size:13.5px; }
.lpm-list li.is-new { animation:lpmIn .5s ease; }
@keyframes lpmIn { from { background:#e6f0ff; transform:translateY(-6px); } to { background:transparent; transform:none; } }
.lpm-no { color:#10141f; font-weight:800; font-variant-numeric:tabular-nums; }
.lpm-part { overflow:hidden; color:#30394b; text-overflow:ellipsis; white-space:nowrap; }
.lpm-who { color:#5b6679; }
.lpm-el { color:#2058c7; font-weight:700; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.lpm-foot { padding:8px 14px 12px; color:#6b7585; font-size:12.5px; }

@media (max-width:900px) {
	.lpm-kpis { grid-template-columns:repeat(3,1fr); }
	.lpm-body { grid-template-columns:1fr; }
}
@media (max-width:640px) {
	.lpm-kpis { grid-template-columns:1fr 1fr; }
	.lpm-kpi b { font-size:24px; }
	.lpm-list li { grid-template-columns:82px minmax(0,1fr) 56px; font-size:13px; }
	.lpm-who { display:none; }
	.lpm-foot { font-size:13px; }
}

/* ---------- MES 공정 현황 ---------- */
/* 1920 기준 화면을 칸 너비에 맞춰 통째로 줄인다. 보기 전용이다 */
.lpb { border:1px solid #d7deea; border-radius:10px; background:#eef2f8; box-shadow:0 18px 40px rgba(16,20,31,.12); overflow:hidden; }
.lpb-top { display:flex; align-items:center; gap:10px; padding:10px 14px; background:#1d3f82; color:#fff; }
.lpb-top b { font-size:16.5px; font-weight:800; letter-spacing:-0.3px; }
.lpb-live { display:inline-flex; flex:none; align-items:center; gap:5px; white-space:nowrap; padding:2px 8px; border-radius:3px; background:rgba(255,255,255,.16); font-size:13.5px; font-weight:700; }
.lpb-live i { width:7px; height:7px; border-radius:50%; background:#46e08a; animation:lpbBlink 1.6s infinite; }
@keyframes lpbBlink { 0%,100% { opacity:1; } 50% { opacity:.25; } }
.lpb-clock { margin-left:auto; font-size:14px; font-variant-numeric:tabular-nums; }
.lpb-frame { position:relative; background:#f3f5f9; }
.lpb-frame { overflow:hidden; }
/* 보기 전용이라 마우스가 닿지 않게 한다 */
.lpb-board, .lpb-board * { pointer-events:none !important; cursor:default !important; user-select:none; }
.lpb-board { position:relative; width:1920px; height:1010px; transform-origin:top left; background:#e9edf3; color:#141a26; font-size:17px; line-height:1.35; }
.lpb-board *, .lpb-board *::before, .lpb-board *::after { box-sizing:border-box; }
/* 좁은 뷰포트에서도 1920 배치를 지킨다 */
.lpb-board #view-exec { overflow:hidden; }
.lpb-board .ex-grid {
	flex:1;
	grid-template-columns:minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 0.9fr) minmax(0, 0.9fr);
	grid-template-rows:minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.72fr);
	grid-template-areas:
		"model model status ontime"
		"model model capa   watch"
		"order trend trend  vendor";
	grid-auto-rows:auto;
}
.lpb-board .ex-kpis { margin-left:auto; }
.lpb-board .mon-panel > h3 em, .lpb-board .mon-legend { display:block; }
/* 차트 말풍선은 감춘다 */
.lpb-board div[style*="z-index: 9999999"] { display:none !important; }

.lpb-foot { margin:0; padding:11px 16px 14px; color:#3b4557; font-size:15px; font-weight:700; }
.lpb-foot + .lpb-foot { margin-top:-10px; }
.lpb-langnote:empty { display:none; }
.lpb-board { word-break:keep-all; }


@media (prefers-reduced-motion:reduce) {
	.lpb-live i { animation:none; }
}


/* 머리줄 안의 작은 버튼. 짙은 바탕에 맞춘다 */
.lp-top .lp-btn.is-sm { height:32px; padding:0 14px; font-size:14px; font-weight:700; border-radius:6px; }
.lp-top .lp-btn.is-main { background:#1f5fd8; color:#fff; }
.lp-top .lp-btn.is-main:hover { background:#1a4fb4; }
.lp-top .lp-btn.is-kakao { background:transparent; border-color:rgba(255,255,255,.22); color:#e8edf5; }
.lp-top .lp-btn.is-kakao:hover { background:rgba(255,255,255,.1); }

/* 머리줄 바로 밑에 붙으므로 경계를 없앤다 */
.lp-hero { border-top:0; }

/* ---------- 추천 스케줄링 ---------- */
.lp-plan { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:52px; align-items:center; }
.lp-plan-txt h2 { margin:0 0 16px; font-size:clamp(28px,2.9vw,38px); font-weight:850; line-height:1.3; letter-spacing:-1.4px; text-wrap:balance; }
.lp-plan-txt > p { margin:0 0 20px; color:var(--lp-sub); font-size:18.5px; line-height:1.75; }
.lp-plan-txt .lp-duo-list li { line-height:1.55; }
.lp-plan-txt .lp-duo-list li::before { top:23px; }

/* 화면 예시. 예상은 파랑 점선, 안 될 때 답은 옅은 노랑 */
.lpp { border:1px solid #d7deea; border-radius:10px; background:#fff; box-shadow:0 18px 40px rgba(16,20,31,.12); overflow:hidden; font-variant-numeric:tabular-nums; user-select:none; --lpp-name:92px; }
.lpp-top { display:flex; align-items:center; gap:12px; height:46px; padding:0 16px; background:#1d3f82; color:#fff; }
.lpp-top b { flex:none; font-size:16.5px; font-weight:800; line-height:1; letter-spacing:-.3px; white-space:nowrap; }
.lpp-top > span { display:flex; align-items:center; gap:8px; min-width:0; margin-left:auto; color:#d5e1f7; font-size:13.5px; font-weight:600; line-height:1; white-space:nowrap; }
.lpp-top > span > span:first-child { overflow:hidden; text-overflow:ellipsis; }
.lpp-top > span i { flex:none; width:1px; height:11px; background:rgba(255,255,255,.35); }
.lpp-body { padding:16px; }
.lpp-grid { border:1px solid #dfe4ec; border-radius:6px; overflow:hidden; }
.lpp-axis, .lpp-row { display:grid; grid-template-columns:var(--lpp-name) minmax(0,1fr); }
.lpp-axis { height:30px; border-bottom:1px solid #dfe4ec; background:#f5f7fb; }
.lpp-days { display:grid; grid-template-columns:repeat(8,1fr); }
.lpp-days span { display:flex; align-items:center; justify-content:center; border-left:1px solid #e3e8f0; color:#5b6679; font-size:12px; font-weight:700; line-height:1; }
.lpp-days span i { font-style:normal; }
.lpp-days span.is-off { background:#eceff5; color:#8a93a4; }
.lpp-row { height:56px; border-bottom:1px solid #e9edf3; }
.lpp-row:last-child { border-bottom:0; }
.lpp-name { display:flex; flex-direction:column; justify-content:center; gap:5px; min-width:0; padding:0 8px 0 12px; }
.lpp-name b, .lpp-name span { overflow:hidden; line-height:1.15; text-overflow:ellipsis; white-space:nowrap; }
.lpp-name b { color:#10141f; font-size:14px; font-weight:800; }
.lpp-name span { color:#5b6679; font-size:12px; font-weight:600; }
/* 날짜 칸 선과 휴일 칸(셋째, 넷째)을 바탕으로 깐다 */
.lpp-track {
	position:relative; border-left:1px solid #e3e8f0;
	background:
		linear-gradient(90deg,#e9edf3 1px,transparent 1px) -1px 0 / 12.5% 100%,
		linear-gradient(90deg,transparent 25%,#f3f5f9 25%,#f3f5f9 50%,transparent 50%);
}
.lpp-bar { position:absolute; height:14px; border-radius:3px; }
.lpp-bar.is-plan { top:12px; background:#1d3f82; }
.lpp-bar.is-exp { top:30px; border:1.5px dashed #2f5db3; background:#e6edfa; }
.lpp-busy { position:absolute; top:6px; bottom:6px; border-radius:3px; background:repeating-linear-gradient(135deg,#d3d9e4 0 3px,#eceff5 3px 7px); }
.lpp-legend { display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; margin-top:12px; color:#5b6679; font-size:13px; font-weight:600; }
.lpp-legend > span { display:inline-flex; align-items:center; gap:6px; line-height:1; white-space:nowrap; }
.lpp-legend i { flex:none; width:22px; height:10px; border-radius:2px; }
.lpp-legend i.is-plan { background:#1d3f82; }
.lpp-legend i.is-exp { border:1.5px dashed #2f5db3; background:#e6edfa; }
.lpp-legend i.is-busy { background:repeating-linear-gradient(135deg,#d3d9e4 0 3px,#eceff5 3px 7px); }
.lpp-legend i.is-off { border:1px solid #dfe4ec; background:#f3f5f9; }
.lpp-ans { display:flex; flex-direction:column; gap:10px; margin-top:14px; padding:13px 14px 14px; border-radius:6px; background:#fbf1de; }
.lpp-ans p { margin:0; color:#10141f; font-size:15px; line-height:1.55; }
.lpp-opts { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.lpp-near { flex:1 1 100%; color:#5b6679; font-size:13.5px; font-weight:700; line-height:1.3; }
.lpp-opt { display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 12px; border:1px solid #2f5db3; border-radius:6px; background:#fff; color:#2f5db3; line-height:1; white-space:nowrap; }
.lpp-opt b { font-size:15px; font-weight:800; }
.lpp-opt em { color:#30394b; font-size:13px; font-style:normal; font-weight:700; }
.lpp-foot { margin:0; padding:11px 16px 13px; border-top:1px solid #e7ebf1; background:#f7f9fc; color:#3b4557; font-size:14px; font-weight:600; line-height:1.6; }

/* 덧붙는 사실 넷 */
.lp-plan-facts { display:grid; grid-template-columns:repeat(4,1fr); gap:28px 32px; margin-top:52px; }
.lp-plan-fact { padding-top:18px; border-top:2px solid var(--lp-navy); }
.lp-plan-fact b { display:block; margin-bottom:8px; color:var(--lp-ink); font-size:19px; font-weight:800; line-height:1.4; letter-spacing:-.4px; }
.lp-plan-fact p { margin:0; color:var(--lp-sub); font-size:16.5px; line-height:1.7; }
@media (max-width:1100px) { .lp-plan-facts { grid-template-columns:1fr 1fr; } }
@media (max-width:980px) {
	.lp-plan { grid-template-columns:minmax(0,1fr); gap:28px; }
}
@media (max-width:640px) {
	.lp-plan-facts { grid-template-columns:1fr; gap:22px; margin-top:36px; }
	.lpp { --lpp-name:86px; }
	.lpp-top { padding:0 12px; }
	.lpp-top b { font-size:15px; }
	.lpp-top > span { font-size:13px; }
	.lpp-body { padding:12px; }
	.lpp-name { padding:0 6px 0 10px; }
	.lpp-name b { font-size:13px; }
	.lpp-top > span > span:first-child, .lpp-top > span i { display:none; }
	.lpp-legend { display:grid; grid-template-columns:auto auto; justify-content:start; gap:10px 28px; }
	.lpp-days span i { display:none; }
	.lpp-opt { flex:1 1 100%; justify-content:space-between; }
}
.lp-nb { white-space:nowrap; }