/* 데모 화면 틀. 평시에는 중립색만 쓰고, 색은 경고·강조가 필요할 때만 쓴다.
   크기 원칙: 틀(상단 줄, 칸 제목, 버튼)은 고정 px, 실제 화면을 흉내 낸 부분(Agent 창, 복합기 화면, 관리자 화면)은
   고정 설계 크기로 그린 뒤 통째로 축소한다. 창 폭(vw) 기준 크기는 쓰지 않는다(칸이 좁아질 때 넘치기 때문). */
/* 글꼴은 영역마다 하나씩 정해 /fonts/ 의 파일로 불러온다(보는 PC 에 글꼴이 없어도 같은 모양으로 보이게).
   · 화면 틀(상단 줄, 칸 제목, 가이드, 팝업, 버튼, 창, 알림줄) = Pretendard
   · PC Agent 창 = SUIT(실제 Agent 가 쓰는 글꼴, pc.css)
   · 복합기 화면 = Noto Sans KR(실제 장치의 한글 글꼴, panel.css)
   파일이 크므로 보는 PC 에 설치된 글꼴(local)을 먼저 쓰고, 없을 때만 내려받는다. */
@font-face { font-family: 'Pretendard'; font-weight: 400; font-display: swap; src: local('Pretendard Regular'), local('Pretendard-Regular'), url(/fonts/Pretendard-Regular.ttf) format('truetype'); }
@font-face { font-family: 'Pretendard'; font-weight: 500; font-display: swap; src: local('Pretendard Medium'), local('Pretendard-Medium'), url(/fonts/Pretendard-Medium.ttf) format('truetype'); }
@font-face { font-family: 'Pretendard'; font-weight: 600; font-display: swap; src: local('Pretendard SemiBold'), local('Pretendard-SemiBold'), url(/fonts/Pretendard-SemiBold.ttf) format('truetype'); }
@font-face { font-family: 'Pretendard'; font-weight: 700; font-display: swap; src: local('Pretendard Bold'), local('Pretendard-Bold'), url(/fonts/Pretendard-Bold.ttf) format('truetype'); }
@font-face { font-family: 'Noto Sans KR'; font-weight: 400; font-display: swap; src: local('Noto Sans KR Regular'), local('NotoSansKR-Regular'), url(/fonts/NotoSansKR-Regular.ttf) format('truetype'); }
@font-face { font-family: 'Noto Sans KR'; font-weight: 700; font-display: swap; src: local('Noto Sans KR Bold'), local('NotoSansKR-Bold'), url(/fonts/NotoSansKR-Bold.ttf) format('truetype'); }

/* 휴대폰 브라우저의 자동 다크(강제 다크)로 색이 뒤집히지 않게, 이 화면은 밝은 화면만 쓴다고 알린다(head 의 color-scheme 메타와 같은 뜻). */
:root { color-scheme: light only; }
:root {
  --bg: #eceef1; --card: #fff; --line: #d3d8df; --line-strong: #bcc3cd; --text: #1c2330; --muted: #667085;
  --accent: #2563eb; --accent-soft: #eaf1fe; --warn: #9a5b06; --warn-bg: #fdf3dc; --warn-line: #ecd29a; --danger: #b42318;
  --font: 'Pretendard', "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; /* 화면 틀 */
  --font-mfp: 'Noto Sans KR', "Malgun Gothic", sans-serif; /* 복합기 화면. 400·700 두 굵기만 있다 */
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
/* 휴대폰: 화면 높이는 주소창·아래 도구줄을 뺀 실제로 보이는 높이(dvh)로 잡는다(100vh 는 주소창이 숨었을 때의 큰 높이라 아래가 잘린다). */
@supports (height: 100dvh) { body { height: 100dvh; } }
/* font-synthesis: none = 없는 굵기를 브라우저가 억지로 굵게 그리지 않게 한다(한글이 뭉개져 보이는 원인). */
/* 배치: 위에 상단 줄, 가운데에 가이드 창(왼쪽)과 세 칸, 아래에 알림줄. 가이드 창을 접으면 세 칸 위의 한 줄이 된다. */
body { background: var(--bg); color: var(--text); font: 400 14px/1.5 var(--font); font-synthesis: none; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; word-break: keep-all; -webkit-font-smoothing: antialiased; }
/* 폼 요소와 code 는 브라우저 기본 글꼴로 떨어지므로 모두 물려받게 한다. */
button, input, select, textarea, optgroup, code, kbd, pre, table, th, td { font-family: inherit; }
button { cursor: pointer; }
.muted { color: var(--muted); }

/* 버튼: 높이·글자 크기를 두 가지(기본, 작은 것)로만 쓴다. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 12px; border: 1px solid var(--line-strong); background: #fff; border-radius: 4px; font-size: 13px; font-weight: 500; line-height: 1; color: var(--text); white-space: nowrap; }
.btn:hover { border-color: #8c96a6; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; }
.btn:disabled { opacity: .5; cursor: default; }
.btn-small { height: 24px; padding: 0 8px; font-size: 12px; }

/* 상단 줄 */
.topbar { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; height: 44px; padding: 0 14px; background: var(--card); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; color: inherit; font-size: 16px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.brand img { height: 20px; display: block; }
.topbar-tag { min-width: 0; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-note { flex: 1; min-width: 0; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1001px) and (max-width: 1500px) {
  .topbar { height: auto; min-height: 64px; padding-top: 4px; padding-bottom: 4px; flex-wrap: wrap; align-content: center; row-gap: 0; }
  .topbar-note { order: 3; flex: 0 0 100%; text-align: center; line-height: 16px; }
}
.topbar-actions { display: flex; gap: 6px; }
/* 언어 선택: 세 버튼을 한 줄로 붙여 두고, 지금 언어를 표시한다. */
.topbar-actions { flex: none; align-items: center; }
.lang-switch { flex: none; display: flex; gap: 2px; }
.lang-switch .btn.is-active { border-color: var(--accent); color: var(--accent); font-weight: 600; }
/* 휴대폰 폭에서만 쓰는 것: 접힌 언어 단추(.lang-cur), 설명 화면 링크, 관리자 칸의 안내 */
.lang-cur, .ps-short { display: none; }
.lang-list { display: contents; }
.topbar-explain { display: none; text-decoration: none; }
.admin-mobile { display: none; }
/* 최근 알림(shell.js renderRecent): 아래 이벤트 줄이 없는 좁은 화면에서만 상단 줄의 종 단추와 목록을 쓴다 */
.recent-open { display: none; position: relative; }
.recent-open.has-dot::after { content: ""; position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.recent-sheet { position: fixed; top: 52px; left: 8px; right: 8px; z-index: 74; max-height: 60vh; max-height: 60dvh; overflow-y: auto; background: #fff; border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: 0 8px 24px rgba(20, 26, 36, .25); }
.recent-head { position: sticky; top: 0; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; background: #fff; border-bottom: 1px solid var(--line); }
.recent-head b { flex: 1; font-size: 15px; }
.recent-head .btn, .recent-item .btn { height: 40px; padding: 0 14px; font-size: 13px; }
.recent-sheet ul { margin: 0; padding: 0; list-style: none; }
.recent-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.5; }
.recent-item:first-child { border-top: 0; }
.recent-item small { grid-column: 1; color: var(--muted); font-size: 12px; }
.recent-item span { grid-column: 1; }
.recent-item .btn { grid-column: 2; grid-row: 1 / 3; }
.recent-sheet > p { margin: 0; padding: 16px 14px; font-size: 13px; }

/* 세 칸. 격자 칸은 minmax(0, …) 로 잡아야 안쪽의 고정 폭 요소가 칸을 밀어내지 않는다. */
#guide-root { grid-column: 1; grid-row: 2; }
body.guide-collapsed { grid-template-rows: auto auto minmax(0, 1fr) auto; }
body.guide-collapsed #guide-root { grid-column: 1 / -1; }
body.guide-collapsed .zones { grid-column: 1 / -1; grid-row: 3; }
.zones { grid-column: 2; grid-row: 2; min-height: 0; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1.3fr); gap: 10px; padding: 10px; transition: grid-template-columns .2s ease; }
/* 크게 보는 칸이 남는 폭을 모두 쓰고, 나머지 두 칸은 150px(제목 + 축소 그림)로 둔다. */
.zones[data-focus="zone-pc"] { grid-template-columns: minmax(0, 1fr) 150px 150px; }
.zones[data-focus="zone-mfp"] { grid-template-columns: 150px minmax(0, 1fr) 150px; }
.zones[data-focus="zone-admin"] { grid-template-columns: 150px 150px minmax(0, 1fr); }
/* 자유 체험(shell.js focus): 작은 칸 전체를 덮개로 덮어 첫 누름은 칸을 크게 하는 데만 쓰고, 아래쪽에 한 줄 안내를 둔다.
   늘 한 칸이 크게 보이므로 [크게 보기] 단추는 숨긴다. */
.zones.is-free .zone-grow { display: none; }
.zone.is-peek { position: relative; }
.zone.is-peek::before { content: ""; position: absolute; inset: 0; z-index: 20; cursor: pointer; }
.zone.is-peek::after { content: attr(data-hint); position: absolute; left: 0; right: 0; bottom: 0; z-index: 21; padding: 5px 8px; background: rgba(28, 35, 48, .72); color: #fff; font-size: 12px; font-weight: 500; line-height: 1.35; text-align: center; pointer-events: none; }
.zone.is-peek:hover { border-color: var(--line-strong); }
.zone { container: zone / inline-size; display: flex; flex-direction: column; min-height: 0; background: var(--card); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.zone-head { flex: none; display: flex; align-items: center; gap: 8px; height: 40px; cursor: pointer; margin: 0; padding: 0 10px 0 12px; font-size: 15px; font-weight: 700; border-bottom: 1px solid var(--line); white-space: nowrap; }
.zone-no { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--text); color: #fff; font-size: 12px; font-weight: 700; }
.zone-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.zone-grow { flex: none; display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 4px; background: #fff; font-size: 12px; font-weight: 500; color: var(--text); cursor: pointer; }
.zone-grow:hover { border-color: #8c96a6; }
.open-link { flex: none; font-size: 12px; font-weight: 500; color: var(--accent); }
@media (min-width: 1001px) { .open-link { display: inline-flex; align-items: center; height: 40px; padding: 0 8px; } }
.zone-body { flex: 1; min-height: 0; min-width: 0; overflow: hidden; display: flex; flex-direction: column; }
.tabs { flex: none; display: inline-flex; border: 1px solid var(--line-strong); border-radius: 4px; overflow: hidden; }
.tab { height: 22px; border: 0; background: #fff; padding: 0 10px; font-size: 12px; font-weight: 500; color: var(--muted); }
.tab + .tab { border-left: 1px solid var(--line-strong); }
.tab.is-active { background: var(--text); color: #fff; }
/* 다른 칸을 크게 보는 동안 좁아진 칸은 제목과 [크게 보기]만 남긴다. */
@container zone (max-width: 330px) { .tabs, .open-link { display: none; } }
/* 좁아진 복합기 칸: 원고대·배출 트레이 제목 줄의 설명은 숨기고, [팩스 수신 받아보기]가 잘리지 않게 다음 줄로 내린다. */
@container zone (max-width: 330px) {
  .mfp-label small { display: none; }
  .tray .mfp-label { flex-wrap: wrap; height: auto; min-height: 24px; row-gap: 4px; }
}
@container zone (max-width: 190px) { .zone-grow { display: none; } }

/* ── ② 복합기: 원고대 → 조작 패널 → 배출 트레이를 한 대의 장치처럼 세로로 쌓는다 ── */
#zone-mfp .zone-body { container: mfpbody / size; padding: 10px; }
.mfp { flex: 1; min-height: 0; display: flex; flex-direction: column; border: 1px solid #c3c9d1; border-radius: 6px; background: #e3e6ea; overflow: hidden;
  /* 문서 썸네일의 폭(px, 단위 없는 수). 칸이 커지면 썸네일도 키운다. */
  --tw: 38; }
@container mfpbody (min-width: 600px) and (min-height: 600px) { .mfp { --tw: 52; } }
@container mfpbody (min-width: 860px) and (min-height: 780px) { .mfp { --tw: 64; } }
.glass, .tray { flex: none; padding: 6px 10px 8px; min-width: 0; }
.glass { background: #d5d9df; border-bottom: 1px solid #b9c0c9; }
.tray { background: #f2f3f5; border-top: 3px solid #2a2d33; }
.mfp-label { display: flex; align-items: center; gap: 8px; height: 24px; font-size: 12px; white-space: nowrap; }
.mfp-label b { flex: none; font-weight: 700; }
.mfp-label small { flex: 1; min-width: 0; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.mfp-label small.is-on { color: var(--text); font-weight: 600; }
.glass-docs, .tray-items { display: flex; align-items: flex-end; gap: 7px; height: calc(var(--tw) * 1.4142px + 12px); padding: 4px 3px 6px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; font-size: 12px; }
.glass-docs::-webkit-scrollbar, .tray-items::-webkit-scrollbar { display: none; }
.tray-items > .muted { align-self: center; }
/* 원고대는 문서가 한 줄에 모두 보이도록 썸네일을 칸 폭에 맞춰 줄인다(가려져 옆으로 밀어야 보이는 문서가 없게).
   --gn = 문서 수, --gk = 문서 폭 비율의 합(가로 문서는 1.4142, shell.js 가 넣는다). 48px = 테두리와 안쪽 여백(선택 표시 테두리 포함), 7px = 문서 사이 간격. */
.glass { --tg: max(10px, min(calc(var(--tw) * 1px), calc((100cqw - 48px - (var(--gn, 8) - 1) * 7px) / var(--gk, 8.83)))); }
.glass-docs { height: calc(var(--tg) * 1.4142 + 12px); }
.glass-docs .thumb { width: calc(var(--tg) * var(--tr, 1)); height: calc(var(--tg) * var(--tr, 1) * var(--ar, 1.4142)); }
.glass-doc, .tray-sheet { position: relative; flex: none; display: block; padding: 0; border: 0; background: none; line-height: 0; }
.tray-sheet.is-link { cursor: pointer; }
.glass-doc:hover .thumb, .tray-sheet.is-link:hover .thumb { outline: 1px solid var(--accent); }
.glass-doc.is-selected .thumb { outline: 2px solid var(--accent); outline-offset: 1px; }
.glass-doc.is-selected { transform: translateY(-3px); }
.tray-count { position: absolute; right: -4px; top: -4px; min-width: 20px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--text); color: #fff; font-size: 12px; font-weight: 700; line-height: 17px; text-align: center; }
.tray-kind { position: absolute; left: 0; right: 0; bottom: 0; height: 16px; background: rgba(28, 35, 48, .78); color: #fff; font-size: 12px; font-weight: 600; line-height: 16px; text-align: center; }

/* 문서 썸네일: 첫 쪽 그림 한 장. --tw = 세로 문서의 폭(px, 단위 없는 수), --tr = 가로 문서일 때 폭 비율, --ar = 세로/가로 비.
   그림이 없으면(is-blank) 종이 모양에 제목과 쪽수를 적는다. */
.thumb { position: relative; display: block; width: calc(var(--tw) * var(--tr, 1) * 1px); height: calc(var(--tw) * var(--tr, 1) * var(--ar, 1.4142) * 1px); background: #fff; overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.thumb.is-mono img { filter: grayscale(1); }
.thumb.is-blank { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 3px; border-top: 3px solid #9aa3b0; color: var(--text); line-height: 1.2; text-align: center; white-space: normal; }
.thumb.is-blank b { font-size: 12px; font-weight: 600; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: break-all; }
.thumb.is-blank small { font-size: 12px; color: var(--muted); }

/* 조작 패널: 검은 테두리 왼쪽에 홈 버튼(실제 장치의 홈 버튼 자리). 화면 크기는 shell.js 가 남는 자리에 맞춰 정한다. */
.mfp-panel { flex: 1; min-height: 0; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 10px; overflow: hidden; }
.mfp-bezel { flex: none; display: flex; align-items: stretch; background: #16171a; border-radius: 9px; padding: 12px 14px 12px 0; box-shadow: inset 0 0 0 1px #34373d, 0 1px 3px rgba(0, 0, 0, .35); }
.mfp-home { flex: none; width: 42px; border: 0; background: none; position: relative; }
.mfp-home::before { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; transform: translate(-50%, -50%); background: #c9ced6; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 11l9-8 9 8v10h-6v-6H9v6H3z'/></svg>") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 11l9-8 9 8v10h-6v-6H9v6H3z'/></svg>") center/contain no-repeat; }
.mfp-home:hover::before { background: #fff; }
.mfp-rail { display: none; }
.mfp-screen { position: relative; flex: none; width: 512px; height: 300px; background: #fff; overflow: hidden; outline: 1px solid #000; }

/* OXPd 가상 복합기: 홈 화면은 데모 레이어가 그리고, 나머지는 PSL 서버의 실제 패널 화면을 띄운다. 1024×600 으로 그리고 통째로 축소한다. */
.oxpd-stage { position: absolute; left: 0; top: 0; width: 1024px; height: 600px; transform-origin: 0 0; background: #fff; overflow: hidden; display: flex; flex-direction: column; font-family: var(--font-mfp); color: #262626; }
.oxpd-stage[hidden] { display: none; }
.oxpd-stage button { font-family: inherit; }
.oxpd-title { flex: none; height: 72px; display: flex; align-items: center; gap: 16px; padding: 0 24px; background: #e8e8e8; color: #333; font-weight: 400; font-size: 28px; }
.oxpd-home-btn { border: 0; background: none; color: #333; padding: 0; display: flex; }
.oxpd-home-btn svg { width: 38px; height: 38px; }
.oxpd-frame { flex: 1; min-height: 0; width: 100%; border: 0; display: block; }
.oxpd-home { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.oxpd-bar { flex: none; height: 72px; display: flex; align-items: center; background: #e8e8e8; color: #333; }
.oxpd-logo { width: 110px; text-align: center; font-weight: 700; letter-spacing: 1px; color: #333; font-size: 22px; }
.oxpd-sign { height: 100%; padding: 0 34px; border: 0; background: #d4d4d4; color: #333; font-size: 26px; }
.oxpd-who { padding: 0 28px; font-size: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oxpd-tiles { flex: 1; display: flex; align-items: center; justify-content: center; gap: 56px; padding: 0 40px 24px; }
.oxpd-tile { border: 0; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 18px; font-size: 26px; font-weight: 700; color: #000; white-space: nowrap; }
.oxpd-tile img, .oxpd-fax-icon { width: 164px; height: 164px; border-radius: 6px; display: block; }
.oxpd-fax-icon { background: #ab6394; display: flex; align-items: center; justify-content: center; }
.oxpd-fax-icon svg { width: 104px; height: 104px; }
.oxpd-empty { margin: auto; color: #737373; font-size: 24px; }
.oxpd-msg { flex: none; margin: 0 0 20px; text-align: center; color: #D95338; font-size: 22px; }

/* 팩스 보내기 화면(장치 기본 팩스 기능 자리). 복합기 화면과 같은 1024×600 설계 크기로 그려 함께 축소된다. */
.fax-overlay { position: absolute; left: 0; top: 0; width: 1024px; height: 600px; transform-origin: 0 0; background: #fff; display: flex; flex-direction: column; z-index: 5; font-family: var(--font-mfp); color: #262626; }
.fax-overlay button, .fax-overlay input { font-family: inherit; }
.fax-head { flex: none; height: 72px; display: flex; align-items: center; gap: 16px; padding: 0 24px; background: #3a3a3a; color: #fff; font-weight: 400; font-size: 28px; }
.fax-head small { font-weight: 400; font-size: 18px; color: #cfcfcf; }
.fax-close { margin-left: auto; height: 44px; border: 0; background: #666; color: #fff; padding: 0 26px; font-size: 20px; }
.fax-body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 32px 80px; font-size: 22px; }
.fax-label { color: #737373; font-size: 20px; }
.fax-input { height: 60px; padding: 0 20px; border: 1px solid #737373; border-radius: 4px; font-size: 26px; color: #262626; outline: none; }
.fax-doc { margin-top: 6px; color: #303DB1; font-weight: 700; }
.fax-send { align-self: flex-start; height: 60px; margin-top: 10px; border: 0; background: #4483F7; color: #fff; padding: 0 56px; font-size: 22px; font-weight: 700; }
.fax-send:disabled { opacity: .5; }
.fax-msg { min-height: 1.5em; }

/* ── ③ 관리자: 넓은 화면용 관리자 화면을 1440px 폭으로 띄운 뒤 칸에 맞춰 축소한다 ── */
.admin-wrap { flex: 1; min-height: 0; position: relative; overflow: hidden; background: #fff; }
#admin-frame, #uw-frame { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; }
/* ① 직원 PC 칸의 [PC Agent | 사용자 웹]: 고르지 않은 쪽은 숨긴다. 사용자 웹도 관리자 칸과 같은 방식으로 띄운다. */
.zone-body[hidden], .open-link[hidden] { display: none !important; }
/* 직원 PC 칸은 세 칸 중 가장 좁아, 탭은 더 좁은 폭까지 남기고 [새 창으로 열기]는 넓을 때만 보인다. */
@container zone (min-width: 250px) and (max-width: 330px) { #zone-pc .tabs { display: inline-flex; } }
/* 탭과 칸 이름이 한 줄에 함께 들어가지 않는 폭: 이름은 두 줄까지 쓰고 탭 글자 간격을 줄인다. */
@container zone (min-width: 250px) and (max-width: 360px) {
  #zone-pc .zone-name { white-space: normal; font-size: 13px; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  #zone-pc .tab { padding: 0 7px; }
}
@container zone (max-width: 440px) { #zone-pc .open-link { display: none; } }

.admin-block { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; background: #fff; text-align: center; }
.admin-block[hidden] { display: none; }
.admin-block p { margin: 0; max-width: 420px; font-size: 14px; line-height: 1.6; }
.admin-block div { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.admin-note { display: none; }
.zone-tabs { display: none; }

/* 하단 알림줄 */
.eventbar { grid-column: 1 / -1; height: 32px; display: flex; align-items: center; gap: 10px; padding: 0 14px; background: var(--card); border-top: 1px solid var(--line); font-size: 13px; white-space: nowrap; overflow: hidden; }
.eventbar > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.eventbar .btn { flex: none; }

/* ── 창(미리보기, 우리 회사 화면으로 바꿔보기, 워터마크·스탬프 샘플): 모양을 하나로 맞춘다 ── */
.pv-backdrop { position: fixed; inset: 0; background: rgba(20, 26, 36, .5); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 50; }
.pv-modal, .po-modal, .br-modal { background: #fff; border: 1px solid #aab2bf; border-radius: 6px; box-shadow: 0 12px 32px rgba(20, 26, 36, .28); display: flex; flex-direction: column; overflow: hidden; max-width: 100%; max-height: 100%; }
.pv-modal { width: 900px; height: 900px; }
.pv-head { flex: none; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 10px 0 14px; border-bottom: 1px solid var(--line); }
.pv-badge { flex: none; background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-line); border-radius: 3px; padding: 2px 7px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pv-head b { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-facts { flex: none; color: var(--muted); font-size: 12px; white-space: nowrap; }
.pv-frame { flex: 1; min-height: 0; border: 0; width: 100%; background: #8b939f; }
.pv-note { flex: none; display: flex; flex-direction: column; gap: 2px; padding: 8px 14px; font-size: 12px; line-height: 1.5; color: var(--muted); border-top: 1px solid var(--line); }
.pv-note b { font-weight: 500; color: var(--text); }

.br-modal { width: 460px; overflow: auto; }
.br-body { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 16px; }
.br-body p { margin: 0; font-size: 13px; line-height: 1.55; }
.br-row { display: grid; grid-template-columns: 60px minmax(0, 1fr); align-items: center; gap: 4px 10px; font-size: 13px; }
.br-row > span { font-weight: 600; }
.br-row small { grid-column: 2; color: var(--muted); font-size: 12px; }
.br-input { height: 32px; padding: 0 9px; border: 1px solid var(--line-strong); border-radius: 4px; font-size: 13px; color: var(--text); }
.br-logo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.br-logo-preview { width: 110px; height: 40px; border: 1px dashed var(--line-strong); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 12px; flex: none; }
.br-logo-preview img { max-width: 100%; max-height: 100%; }
.br-logo input { min-width: 0; font-size: 12px; }
.br-row input[type=color] { width: 56px; height: 30px; padding: 2px; border: 1px solid var(--line-strong); border-radius: 4px; background: #fff; }
.br-msg { color: var(--danger); font-size: 12px; min-height: 18px; }
.br-actions { display: flex; gap: 6px; }
.br-note { font-size: 12px !important; }

.po-modal { width: 1040px; height: 900px; }
.po-body { flex: 1; min-height: 0; display: flex; }
.po-side { width: 300px; flex: none; padding: 12px 14px; overflow: auto; display: flex; flex-direction: column; gap: 10px; border-right: 1px solid var(--line); font-size: 13px; }
.po-frame { flex: 1; min-width: 0; border: 0; background: #8b939f; }
.po-form h4 { margin: 14px 0 8px; font-size: 13px; font-weight: 700; }
.po-presets { display: flex; flex-wrap: wrap; gap: 5px; }
.po-preset { height: 26px; border: 1px solid var(--line-strong); background: #fff; border-radius: 4px; padding: 0 9px; font-size: 12px; font-weight: 500; color: var(--text); }
.po-preset:hover { border-color: var(--accent); color: var(--accent); }
.po-row { display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: center; gap: 8px; margin-bottom: 6px; }
.po-label { color: var(--muted); font-size: 12px; }
.po-row select { height: 30px; padding: 0 6px; font-size: 13px; border: 1px solid var(--line-strong); border-radius: 4px; min-width: 0; color: var(--text); background: #fff; }
.po-range { display: flex; align-items: center; gap: 6px; }
.po-range input { flex: 1; min-width: 0; }
.po-val { width: 38px; text-align: right; font-size: 12px; color: var(--muted); }
.po-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; margin-bottom: 10px; font-size: 12px; }
.po-fields label { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.po-note { font-size: 12px; line-height: 1.55; margin: 0; }

/* ── 좁은 화면(휴대폰, 태블릿 세로, 가로로 눕힌 휴대폰): 한 번에 한 칸만 보이고, 아래쪽 줄에서 칸을 바꾼다 ──
   기준 폭 1000px 은 guide.css, guide.js(compact), shell.js(compact)와 같아야 한다. */
@media (max-width: 1000px) {
  body, body.guide-collapsed { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; }
  .topbar { height: 48px; gap: 10px; padding: 0 10px; }
  .topbar-note, .topbar-actions > .btn:not(.btn-primary) { display: none; }
  .topbar-actions > .btn.recent-open { display: inline-flex; width: 40px; padding: 0; }
  .lang-switch .btn { padding: 0 6px; }
  /* 좁은 화면에서는 언어 단추와 [도입 상담]을 남기고, 체험 환경 이름과 한 줄 소개는 접는다 */
  .topbar .topbar-tag, .topbar #brand-name { display: none; }
  .topbar .brand { margin-right: auto; }
  .topbar-tag { flex: 1; font-size: 12px; white-space: normal; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .topbar-actions .btn { height: 40px; }
  .topbar-actions > .btn.topbar-explain { display: inline-flex; }
  .product-switch .btn { height: 40px; }
  .zones, body.guide-collapsed .zones, .zones[data-focus] { grid-column: 1; grid-row: 2; display: block; padding: 0; transition: none; }
  #guide-root, body.guide-collapsed #guide-root { grid-column: 1; grid-row: 3; }
  .eventbar { display: none; }
  .zone { display: none; height: 100%; border: 0; border-radius: 0; }
  .zones[data-current="zone-pc"] #zone-pc, .zones[data-current="zone-mfp"] #zone-mfp, .zones[data-current="zone-admin"] #zone-admin { display: flex; }
  .zone-head { height: 44px; cursor: default; }
  .zone-grow { display: none; }
  .tab { height: 40px; padding: 0 14px; font-size: 13px; }
  .open-link { display: inline-flex !important; align-items: center; height: 44px; }
  .tabs { display: inline-flex !important; }
  /* 칸 전환 줄 */
  .zone-tabs { grid-row: 4; display: flex; background: #fff; border-top: 1px solid var(--line); }
  .zone-tab { position: relative; flex: 1; min-width: 0; height: 48px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-top: 2px solid transparent; background: none; font-size: 14px; font-weight: 500; color: var(--muted); white-space: nowrap; }
  .zone-tab i { width: 18px; height: 18px; border-radius: 50%; background: var(--muted); color: #fff; font-style: normal; font-size: 12px; font-weight: 700; line-height: 18px; }
  .zone-tab.is-on { border-top-color: var(--text); color: var(--text); font-weight: 700; }
  .zone-tab.is-on i { background: var(--text); }
  .zone-tab.has-dot::after { content: ""; position: absolute; top: 9px; right: calc(50% - 44px); width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
  /* 복합기: 세로로 쌓고 칸 전체를 스크롤한다. 화면은 읽을 수 있는 크기를 지키고, 넘치면 옆으로 밀어 본다. */
  #zone-mfp .zone-body { overflow-y: auto; padding: 8px; container-type: inline-size; }
  .mfp { flex: none; --tw: 56; }
  .mfp-panel { flex: none; justify-content: flex-start; overflow-x: auto; padding: 10px 8px; }
  .mfp-bezel { margin: 0 auto; padding: 8px 8px 8px 0; }
  .mfp-home { width: 36px; }
  /* 복합기 화면이 칸보다 넓을 때: 지금 보이는 부분을 막대 위 손잡이로 보여준다(shell.js railStage) */
  .mfp-rail { display: block; flex: none; position: relative; height: 8px; margin: 0 14px 8px; border-radius: 4px; background: #c3c9d1; }
  .mfp-rail[hidden] { display: none; }
  .mfp-rail i { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: #5b6472; }
  .mfp-label { height: 40px; }
  .mfp-label small { display: none; }
  .mfp-label b { flex: 1; }
  #fax-receive { height: 44px; padding: 0 12px; font-size: 13px; }
  /* 관리자: 축소 표시 + 안내 한 줄 */
  .admin-note { display: block; flex: none; padding: 8px 12px; background: var(--warn-bg); color: var(--warn); border-bottom: 1px solid var(--warn-line); font-size: 13px; line-height: 1.45; }
  /* 창은 전체 화면 시트로 */
  .pv-backdrop { padding: 0; }
  .pv-modal, .po-modal, .br-modal { width: 100%; height: 100%; border: 0; border-radius: 0; }
  /* 창 머리: 제목은 두 줄까지 쓰고, 닫기 안내 말풍선은 [닫기] 아래에 뜬다(guide.js) */
  .pv-head { height: auto; min-height: 52px; padding: 6px 8px 6px 12px; }
  .pv-head b { white-space: normal; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .pv-head .btn, .br-actions .btn, .po-actions .btn { height: 40px; padding: 0 14px; }
  .pv-facts { display: none; }
  .po-body { flex-direction: column; }
  .po-side { width: auto; max-height: 46%; border-right: 0; border-bottom: 1px solid var(--line); }
  .po-preset { height: 40px; padding: 0 12px; }
  .po-row select { height: 40px; }
  /* 손가락으로 누르는 높이 32px: 스탬프 항목 체크 줄, 크기·투명도 막대 */
  .po-fields label { min-height: 32px; font-size: 13px; }
  .po-range input { height: 32px; }
  .br-input { height: 40px; }
  /* 맨 아래 고지 줄: 한 줄에 다 들어가지 않으므로 두 줄로 접는다(가로로 넘치지 않게).
     첫 줄 = 고지 문구(넘치면 …) + 이용 기간, 둘째 줄 = 링크를 같은 폭으로 나눠 놓고 긴 이름은 칸 안에서 줄을 바꾼다.
     [도입 상담]은 상단 줄에 있으므로 여기서는 뺀다. */
  body > .psl-wm-notice { height: auto; flex-wrap: wrap; align-items: center; gap: 0 10px; padding: 3px 10px 0; white-space: normal; line-height: 1.3; }
  body > .psl-wm-notice::before { content: ""; order: 1; flex: 1 1 100%; height: 0; }
  body > .psl-wm-notice .psl-wm-notice-text { flex: 1 1 0; min-width: 0; white-space: nowrap; line-height: 20px; }
  body > .psl-wm-notice .psl-wm-links { display: contents; }
  body > .psl-wm-notice .pt-trial-until { flex: none; white-space: nowrap; }
  body > .psl-wm-notice .pt-trial-link { order: 2; flex: 1 1 0; min-width: 0; min-height: 40px; padding: 2px 4px; text-align: center; white-space: normal; overflow-wrap: anywhere; }
  body > .psl-wm-notice .pt-trial-consult { display: none; }
}
/* 휴대폰 세로 폭: 상단 줄이 넘치지 않게 제품 전환은 [Pro | Lite]로 줄이고, 언어는 지금 언어 단추 하나로 접는다(누르면 목록이 펼쳐진다).
   설명 화면 링크는 가이드 시트에 있으므로 상단 줄에서는 뺀다. */
@media (max-width: 760px) {
  .topbar { gap: 8px; padding: 0 8px; }
  .topbar-actions { gap: 6px; }
  .ps-long { display: none; }
  .ps-short { display: inline; }
  .product-switch .btn { padding: 0 10px; font-size: 13px; }
  .topbar-actions > .btn.topbar-explain { display: none; }
  .topbar-actions .btn { padding: 0 10px; }
  .lang-switch { position: relative; }
  .lang-cur { display: inline-flex; }
  .lang-cur::after { content: ""; width: 0; height: 0; margin-left: 2px; border: 4px solid transparent; border-top: 5px solid currentColor; border-bottom: 0; }
  .lang-list { display: none; }
  .lang-switch.is-open .lang-list { display: flex; flex-direction: column; gap: 2px; position: absolute; right: 0; top: calc(100% + 4px); z-index: 75; padding: 4px; background: #fff; border: 1px solid var(--line-strong); border-radius: 6px; box-shadow: 0 6px 18px rgba(20, 26, 36, .2); }
  .lang-switch.is-open .lang-list .btn { min-width: 120px; justify-content: flex-start; border-color: transparent; }
  .lang-switch.is-open .lang-list .btn.is-active { border-color: var(--accent); }
  /* 원고대 문서는 손가락으로 고를 수 있게 폭 40px 밑으로 줄이지 않는다(다 들어가지 않으면 옆으로 밀어 본다) */
  .glass { --tg: max(40px, min(calc(var(--tw) * 1px), calc((100cqw - 48px - (var(--gn, 8) - 1) * 7px) / var(--gk, 8.83)))); }
}
/* 아주 좁은 휴대폰(360px 등): [Pro | Lite]와 최근 알림 단추가 함께 있어도 상단 줄이 넘치지 않게 간격을 줄인다 */
@media (max-width: 380px) {
  .topbar { gap: 6px; }
  .topbar-actions { gap: 4px; }
  .topbar-actions > .btn.recent-open { width: 36px; }
}
/* 휴대폰에서도 관리자 실제 화면을 직접 조작한다. 설명 전용 대체 화면은 쓰지 않는다. */
@media (max-width: 760px), (max-width: 1000px) and (max-height: 480px) {
  #zone-admin .admin-note { display: none !important; }
  .admin-mobile { display: none !important; }
}
/* 가로로 눕힌 휴대폰: 세로 공간이 모자라므로 틀의 줄 높이를 조금씩 줄이고 원고대 썸네일을 작게 해 칸에 자리를 더 준다(누르는 곳은 40px 유지) */
@media (max-width: 1000px) and (max-height: 480px) {
  .topbar { height: 44px; }
  .zone-tab { height: 44px; }
  .mfp { --tw: 38; }
}
/* 폭이 넉넉한 좁은 화면(태블릿 세로, 가로로 눕힌 휴대폰): 고지 줄은 한 줄로 두고, 링크는 글자 폭만큼만 쓰며 다 안 들어가면 다음 줄로 넘어간다 */
@media (min-width: 600px) and (max-width: 1000px) {
  body > .psl-wm-notice::before { display: none; }
  body > .psl-wm-notice .psl-wm-notice-text { min-width: 100px; }
  body > .psl-wm-notice .pt-trial-link { flex: none; white-space: nowrap; }
}
/* 세로가 짧은 휴대폰(주소창·아래 도구줄 때문에 보이는 높이가 700px 이하): 칸에 자리를 더 주려고 틀의 줄을 낮춘다.
   고지 줄은 한 줄(문구는 넘치면 …, 링크는 글자 폭만큼), 상단 줄·칸 전환 줄은 44px(누르는 곳 44px 유지). */
@media (max-width: 1000px) and (max-height: 700px) {
  .topbar { height: 44px; }
  .zone-head { height: 44px; }
  .zone-tab { height: 44px; }
  body > .psl-wm-notice { flex-wrap: nowrap; padding: 0 6px 0 10px; }
  body > .psl-wm-notice::before { display: none; }
  body > .psl-wm-notice .psl-wm-notice-text { min-width: 40px; }
  body > .psl-wm-notice .pt-trial-link { flex: none; min-height: 40px; padding: 2px 6px; white-space: nowrap; display: inline-flex; align-items: center; }
  body > .psl-wm-notice .pt-trial-until { display: none; }
}

/* 포털이 붙이는 요소: 화면 전체 격자의 한 칸으로 들어가 열 폭을 밀어내지 않게 한다.
   고지 줄은 맨 아래 한 줄 전체를 쓰고, 만료 안내 띠는 격자 밖에 떠서 상단 줄 위를 덮는다. */
.psl-wm-notice { grid-column: 1 / -1; min-width: 0; overflow: hidden; }
.pt-trial-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 70; }

/* 제품에 없는 언어로 보여 줄 때 가상 제품 화면(PC Agent, Workpath, OXPd 홈) 구석에 붙는 "데모용 번역" 표시. 패널 덧씌우기(overlay-oxpd.js)와 같은 모양 */
.demo-tr-badge { position: absolute; right: 6px; bottom: 4px; z-index: 30; pointer-events: none; font: 11px/1.5 "Segoe UI", "Leelawadee UI", Tahoma, sans-serif; color: #fff; background: rgba(27, 31, 39, .55); padding: 1px 8px; border-radius: 9px; white-space: nowrap; }
/* 복합기 화면은 1024×600 설계 크기를 통째로 축소하므로 글자를 키워 둔다 */
.wp .demo-tr-badge, .oxpd-home .demo-tr-badge { font-size: 18px; padding: 2px 12px; border-radius: 14px; right: 10px; bottom: 8px; }
/* Workpath 화면은 아래쪽에 큰 실행 단추가 있어 위쪽 가운데(빈 자리)에 둔다 */
.wp .demo-tr-badge { top: 6px; bottom: auto; left: 50%; right: auto; transform: translateX(-50%); }
.br-logo > .muted { min-width: 0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* OXPd 홈 타일: 긴 앱 이름(영어·태국어)은 타일 폭 안에서 줄을 바꾼다 */
.oxpd-tile { width: 180px; flex: none; }
.oxpd-tile span { max-width: 100%; white-space: normal; text-align: center; line-height: 1.2; }
html:not([lang="ko"]) .oxpd-tiles { gap: 32px; }
/* 3D 쇼룸에 끼워 넣을 때(shell.js EMBED): 상단 줄·가이드·알림줄·워터마크(쇼룸 쪽에 있다)·다른 칸을 숨기고 그 칸 하나만 화면 전체로. 누를 곳을 짚는 고리(.guide-spot)는 남긴다(guide.js EMBED) */
html.embed body, html.embed body.guide-collapsed { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
html.embed .topbar, html.embed #guide-root, html.embed #guide-popup, html.embed .guide-popup, html.embed .eventbar, html.embed .zone-tabs, html.embed .zone-head, html.embed .psl-wm, html.embed .psl-wm-notice { display: none !important; }
html.embed .zones, html.embed body.guide-collapsed .zones { grid-column: 1; grid-row: 1; display: block; padding: 0; }
html.embed .zone { display: none !important; height: 100%; border: 0; border-radius: 0; }
html[data-embed-zone="pc"] #zone-pc, html[data-embed-zone="mfp"] #zone-mfp, html[data-embed-zone="admin"] #zone-admin { display: flex !important; }