(function () { var root = document.documentElement; var lastHeight = 0; var lastWidth = 0; var lastOrientation = ""; // 같은 실행 세션에서 두 번 일치한 세로 치수와 설치 방식의 상단 여백을 기억합니다. // 첫 실행은 별도 도우미가 해당 설치에서 확인한 정상 치수만 잠깐 재사용합니다. var portraitFrame = null; var portraitCandidate = null; var portraitRestore = null; var portraitRestoreTimer = 0; var portraitHandoffPending = false; // 같은 실행의 방향별 정상 치수만 재사용합니다. CSS 치수가 바뀌면 관측기가 무효화합니다. var measuredFrames = { portrait: null, landscape: null }; var probesDirty = true; var startupFrame = (function () { // cover에서 확인한 전체 높이를 auto의 짧은 웹뷰에 잠깐 적용하지 않습니다. // head 메타데이터는 기존 아이콘의 설치 방식을 증명하지 못하므로 분기 기준이 아닙니다. // 이전 기록은 보존하고, 화면 영역 변경 뒤 실측한 묶음만 새 공간에 기억합니다. var key = "app.viewport-startup-frame.v2"; var ttl = 7 * 24 * 60 * 60 * 1000; var checked = false; var disabled = false; var holding = false; var saved = null; var timer = 0; var signature = ""; var confirmationQueued = false; function valid(value, screenWidth, screenHeight) { return value && value.schema === 2 && Number.isFinite(value.expiresAt) && value.expiresAt > Date.now() && value.expiresAt <= Date.now() + ttl && value.width === screenWidth && value.height === screenHeight && value.userAgent === String(window.navigator.userAgent || "") && value.ratio === (window.devicePixelRatio || 1) && Number.isFinite(value.top) && value.top > 0 && value.top < screenWidth / 2 && Number.isFinite(value.bottom) && value.bottom >= 0 && value.bottom < screenWidth / 2 && Number.isFinite(value.svh) && value.svh > screenWidth && Math.abs(value.svh + value.top - value.height) < 1; } function make(frame, svh) { return { schema: 2, expiresAt: Date.now() + ttl, width: frame.width, height: frame.height, top: frame.top, bottom: frame.bottom, svh: svh, userAgent: String(window.navigator.userAgent || ""), ratio: window.devicePixelRatio || 1 }; } function persist(value) { var nextSignature = [value.width, value.height, value.top, value.bottom, value.svh].join(":"); if (nextSignature === signature) return; try { window.localStorage.setItem(key, JSON.stringify(value)); signature = nextSignature; } catch (_) { /* 저장소가 막혀도 기존 실측 경로는 그대로 사용합니다. */ } } function read(screenWidth, screenHeight) { try { var text = window.localStorage.getItem(key); var value = text && text.length <= 1024 ? JSON.parse(text) : null; if (valid(value, screenWidth, screenHeight)) return value; // 진단 기록에는 화면 영역 정책 식별값이 없습니다. 이전 완료본을 여기로 옮기면 // v1을 분리해도 같은 과거 치수가 다시 살아나므로 실측 학습만 허용합니다. } catch (_) { /* 읽을 수 없으면 실측으로 시작합니다. */ } return null; } function cancel() { disabled = true; if (timer) window.clearTimeout(timer); timer = 0; holding = false; } function restore(svh, top, dynamicHeight, width, height, scale, landscape) { if (disabled) return null; var shortSide = Math.min(window.screen.width, window.screen.height); var longSide = Math.max(window.screen.width, window.screen.height); if (landscape || shortSide > 480 || Math.abs(width - shortSide) > 1 || scale !== 1 || isEditing()) { cancel(); return null; } if (!checked) { checked = true; saved = read(shortSide, longSide); } if (!saved || !valid(saved, shortSide, longSide) || Math.abs(saved.svh - svh) >= 1 || (Math.abs(height - svh) >= 1 && Math.abs(height - saved.height) >= 1) || (Math.abs(dynamicHeight - svh) >= 1 && Math.abs(dynamicHeight - saved.height) >= 1)) { cancel(); return null; } // 실측 상단이 도착하면 같은 호출 안에서 기존 보정기로 넘깁니다. 표시 지연은 없습니다. if (top > 0) { cancel(); return null; } holding = true; if (!timer) timer = window.setTimeout(function () { // 영구 고정하지 않습니다. 600ms 뒤에도 실제 설치가 다르면 기존 짧은 뷰포트로 돌아갑니다. disabled = true; timer = 0; // 모순된 기록을 다음 실행이나 이전 진단에서 다시 살리지 않습니다. try { window.localStorage.setItem(key, JSON.stringify({ schema: 2, rejected: true })); } catch (_) {} signature = ""; probesDirty = true; refresh(); holding = false; }, 600); return saved; } function learn(frame, confirmed) { if (!frame || frame.inset || !lastProbeMeasurements || lastProbeMeasurements[1] <= 0 || Math.abs(lastProbeMeasurements[1] - frame.top) >= 1) return; var value = make(frame, lastProbeMeasurements[0]); if (!valid(value, Math.min(window.screen.width, window.screen.height), Math.max(window.screen.width, window.screen.height))) return; if (confirmed) { persist(value); return; } // 첫 유효 후보 뒤 실측 한 번만 더 요청해 저장을 확정합니다. 반복 타이머/측정은 없습니다. if (!confirmationQueued && document.readyState === "complete") { confirmationQueued = true; scheduleRefresh(); } } return { restore: restore, cancel: cancel, learn: learn, holding: function () { return holding; } }; })(); var startupInsetFrame = (function () { var key = "app.viewport-startup-inset.v1"; var ttl = 7 * 24 * 60 * 60 * 1000; var checked = false, disabled = false, holding = false, saved = null, timer = 0; var signature = "", confirmationQueued = false; function valid(value, width, screenHeight) { return value && value.schema === 1 && Number.isFinite(value.expiresAt) && value.expiresAt > Date.now() && value.expiresAt <= Date.now() + ttl && value.width === width && value.screenHeight === screenHeight && value.userAgent === String(window.navigator.userAgent || "") && value.ratio === (window.devicePixelRatio || 1) && Number.isFinite(value.height) && value.height > width && value.height < screenHeight - 1 && screenHeight - value.height < width / 4 && Number.isFinite(value.bottom) && value.bottom >= 0 && value.bottom < width / 2; } function cancel() { disabled = true; holding = false; if (timer) window.clearTimeout(timer); timer = 0; } function restore(svh, top, dynamicHeight, width, height, scale, landscape) { if (disabled) return null; var shortSide = Math.min(window.screen.width, window.screen.height); var longSide = Math.max(window.screen.width, window.screen.height); if (landscape || shortSide > 480 || Math.abs(width - shortSide) > 1 || scale !== 1 || isEditing() || top !== 0) { cancel(); return null; } if (!checked) { checked = true; try { var text = window.localStorage.getItem(key); saved = text && text.length <= 1024 ? JSON.parse(text) : null; } catch (_) {} } // 이번 실기 기록처럼 저장된 정상 높이 또는 초기 전체 높이만 잠깐 허용합니다. function expected(value) { return Math.abs(value - saved.height) < 1 || Math.abs(value - longSide) < 1; } if (!valid(saved, shortSide, longSide) || !expected(svh) || !expected(height) || !expected(dynamicHeight)) { cancel(); return null; } // 같은 설치의 짧은 높이가 확인됐다면 옛 전체 화면 복원보다 우선합니다. startupFrame.cancel(); if (Math.abs(svh - saved.height) < 1 && Math.abs(height - saved.height) < 1 && Math.abs(dynamicHeight - saved.height) < 1) { cancel(); return null; } holding = true; if (!timer) timer = window.setTimeout(function () { cancel(); try { window.localStorage.setItem(key, JSON.stringify({ schema: 1, rejected: true })); } catch (_) {} signature = ""; probesDirty = true; refresh(); }, 600); return saved; } function learn(frame, confirmed) { // 같은 기기의 다른 설치/설정에서 실제 양수 상단이 확인되면 짧은 기록을 폐기합니다. if (frame && !frame.inset && frame.top > 0 && confirmed) { if (signature !== "rejected") { try { window.localStorage.setItem(key, JSON.stringify({ schema: 1, rejected: true })); signature = "rejected"; } catch (_) {} } return; } if (!frame || !frame.inset || !lastProbeMeasurements || lastProbeMeasurements[1] !== 0 || Math.abs(lastProbeMeasurements[0] - frame.height) >= 1) return; var value = { schema: 1, expiresAt: Date.now() + ttl, width: frame.width, screenHeight: frame.screenHeight, height: frame.height, bottom: frame.bottom, userAgent: String(window.navigator.userAgent || ""), ratio: window.devicePixelRatio || 1 }; if (!valid(value, Math.min(window.screen.width, window.screen.height), Math.max(window.screen.width, window.screen.height))) return; if (confirmed) { var next = [value.width, value.screenHeight, value.height, value.bottom].join(":"); if (next !== signature) { try { window.localStorage.setItem(key, JSON.stringify(value)); signature = next; } catch (_) {} } } else if (!confirmationQueued && document.readyState === "complete") { confirmationQueued = true; scheduleRefresh(); } } return { restore: restore, cancel: cancel, learn: learn, holding: function () { return holding; } }; })(); function isEditing() { var active = document.activeElement; return active && (active.tagName === "INPUT" || active.tagName === "TEXTAREA" || active.isContentEditable); } function samePortraitFrame(left, right) { return left && right && left.height === right.height && left.width === right.width && left.screenHeight === right.screenHeight && left.bottom === right.bottom && left.top === right.top && left.inset === right.inset; } function rememberPortrait(height, dynamicHeight, bottom, top, inset, confirmed) { var screen = window.screen; var shortSide = Math.min(screen.width, screen.height); var longSide = Math.max(screen.width, screen.height); if (isEditing() || (window.visualViewport && Math.abs(window.visualViewport.scale - 1) > 0.001) || shortSide > 480 || Math.abs(window.innerWidth - shortSide) > 4 || height <= shortSide || height > longSide + 1 || Math.abs(height - dynamicHeight) >= 1 || Math.abs(window.innerHeight - dynamicHeight) >= 1 || (inset ? height >= longSide - 1 : Math.abs(height - longSide) > 1 || top <= 0 || top > shortSide / 2)) { portraitCandidate = null; return; } var next = { height: height, width: shortSide, screenHeight: longSide, bottom: bottom, top: top, inset: inset }; // 793/상단0의 초기 기록 뒤 852/상단59가 적용됐어도 이전 캐시가 남으면 // 복귀 첫 화면만 과거 치수로 돌아갔다가 600ms 뒤 다시 내려옵니다. // 새 정상 후보와 모순된 기록은 즉시 폐기하고, 확인된 묶음만 재사용합니다. if (portraitFrame && !samePortraitFrame(portraitFrame, next)) portraitFrame = null; if (confirmed || samePortraitFrame(portraitCandidate, next)) portraitFrame = next; portraitCandidate = next; startupFrame.learn(next, samePortraitFrame(portraitFrame, next)); startupInsetFrame.learn(next, samePortraitFrame(portraitFrame, next)); } /* * **화면 전체로 늘리는 쪽은 한 번 읽은 것만으로 쓰지 않습니다.** * * 그 분기는 되돌리기 어렵습니다 — 한 번 쓰면 문서가 늘어나 다음 측정이 * 그 값을 다시 읽습니다(아래 `apply` 주석). 반대쪽 분기는 그렇지 않아 * 잘못 써도 다음 측정에서 풀립니다. * * 그래서 연달아 두 번 같은 말을 할 때만 씁니다. 초기 로딩의 한 번짜리 * 오독은 여기서 걸러지고, 진짜 전체 화면 웹뷰는 자리잡은 뒤의 재측정에서 * 바로 통과합니다. 쓰기 전까지는 CSS 대체식이 그대로 쓰입니다. */ var fullScreenReads = 0; var fullScreenSample = ""; var probes = []; var lastProbeMeasurements = null; var measuredSafeBottom = 0; var probeObserver = null; function prepareProbes() { if (probes.length) return; // 네 요소를 먼저 붙인 뒤 함께 읽습니다. 매 측정마다 생성/삭제하면서 // 읽기와 쓰기를 네 번 교차하지 않으며, 늦게 바뀐 CSS 단위도 관측합니다. probes = ["100svh", "env(safe-area-inset-top)", "100dvh", "env(safe-area-inset-bottom)"].map(function (expression, index) { var probe = document.createElement("div"); // 선택형 회전 진단이 기존 측정 요소를 읽습니다. 추가 측정 요소는 만들지 않습니다. probe.setAttribute("data-app-viewport-probe", String(index)); probe.style.cssText = "position:fixed;top:0;left:0;width:0;overflow:hidden;visibility:hidden;pointer-events:none;height:" + expression; root.appendChild(probe); return probe; }); if (typeof ResizeObserver === "function") { probeObserver = new ResizeObserver(function (entries) { // 전체 높이를 쓴 결과 dvh가 그 높이를 보고하는 알림은 새 원시 치수가 // 아닙니다. 같은 알림마다 높이를 걷고 다시 쓰면 배치 피드백이 이어질 수 // 있으므로, 확정된 배치와 같은 알림만 건너뜁니다. 추가 layout 읽기는 없습니다. var orientation = root.getAttribute("data-app-landscape") === "true" ? "landscape" : "portrait"; var writtenHeight = Number.parseFloat(root.style.getPropertyValue("--app-frame-height")); if ((measuredFrames[orientation] || startupFrame.holding() || startupInsetFrame.holding()) && lastProbeMeasurements && entries && entries.length && entries.every(function (entry) { var index = probes.indexOf(entry.target); if (index < 0 || !entry.contentRect || !Number.isFinite(entry.contentRect.height)) return false; var expected = index === 2 && Number.isFinite(writtenHeight) ? Math.max(lastProbeMeasurements[index], writtenHeight) : lastProbeMeasurements[index]; return Math.abs(entry.contentRect.height - expected) < 0.01; })) return; probesDirty = true; scheduleRefresh(); }); probes.forEach(function (probe) { probeObserver.observe(probe); }); } } function apply(rotationViewport) { // 홈 화면 앱이 아니면 손대지 않습니다. if (window.navigator.standalone !== true) return; var landscape = root.getAttribute("data-app-landscape") === "true"; var orientation = landscape ? "landscape" : "portrait"; var changedOrientation = lastOrientation !== orientation; // 쓰기 전에 읽습니다. 동일한 resize가 반복되어도 probe를 다시 배치하지 않습니다. var inputWidth = rotationViewport ? rotationViewport.width : window.innerWidth; var inputHeight = rotationViewport ? rotationViewport.height : window.innerHeight; var visualScale = rotationViewport ? rotationViewport.scale : (window.visualViewport ? window.visualViewport.scale : 1); var inputScale = typeof visualScale === "number" ? visualScale : 1; var screenKey = Math.min(window.screen.width, window.screen.height) + ":" + Math.max(window.screen.width, window.screen.height); if (changedOrientation) { if (lastOrientation) { startupFrame.cancel(); startupInsetFrame.cancel(); } probesDirty = true; lastProbeMeasurements = null; var returning = lastOrientation === "landscape" && !landscape; window.clearTimeout(portraitRestoreTimer); portraitRestoreTimer = 0; portraitRestore = null; portraitHandoffPending = false; portraitCandidate = null; root.style.removeProperty("--app-rotation-safe-top"); var screen = window.screen; if (returning && portraitFrame && screen && portraitFrame.width === Math.min(screen.width, screen.height) && portraitFrame.screenHeight === Math.max(screen.width, screen.height)) { portraitRestore = portraitFrame; // 모드 발행/표시를 기다리지 않습니다. 뒤늦은 높이·safe area 값이 // 정상 세로 배치를 잠시 덮지 않도록만 보호하고, 반드시 실측으로 돌아갑니다. portraitRestoreTimer = window.setTimeout(function () { portraitRestore = null; portraitRestoreTimer = 0; portraitHandoffPending = true; probesDirty = true; // 타이머는 보호만 끝냅니다. 기존 배치는 새 실측을 확정한 분기에서 // 높이와 상단 여백을 함께 교체하므로 중간 CSS 대체식이 그려지지 않습니다. refresh(); }, 600); } // 회전으로 낮아진 화면을 키보드로 오해하지 않습니다. 이전 방향의 안전 // 영역도 버려야 세로 34px이 가로 21px보다 큰 값으로 계속 남지 않습니다. lastOrientation = orientation; lastHeight = 0; lastWidth = 0; fullScreenReads = 0; root.style.removeProperty("--app-frame-height"); root.style.removeProperty("--app-frame-safe-top"); root.style.removeProperty("--app-measured-safe-top"); root.style.removeProperty("--app-measured-safe-bottom"); root.style.removeProperty("--app-remembered-safe-bottom"); restoreSafeBottom(); } var screenHeight = window.screen && window.screen.height; if (!screenHeight) return; // 이미 두 축이 가로로 바뀐 창은 방향 스크립트의 쓰기 전 실측을 재사용합니다. // 이전 세로 달력을 probe로 먼저 배치하지 않고, 새 달력 커밋 뒤 기존 프레임에서 // CSS 높이와 안전영역을 확인합니다. 입력·확대·중간 치수는 기존 측정을 유지합니다. var shortSide = Math.min(window.screen.width, screenHeight); var longSide = Math.max(window.screen.width, screenHeight); if (changedOrientation && landscape && rotationViewport && rotationViewport.coarsePointer === true && rotationViewport.editing === false && rotationViewport.scale === 1 && shortSide > 0 && shortSide <= 480 && longSide > shortSide && Number.isFinite(rotationViewport.width) && Number.isFinite(rotationViewport.height) && rotationViewport.width > shortSide + 4 && rotationViewport.width <= longSide + 4 && rotationViewport.height > 0 && rotationViewport.height <= shortSide + 4) { root.style.setProperty("--app-frame-height", rotationViewport.height + "px"); root.style.setProperty("--app-frame-safe-top", "0px"); root.setAttribute("data-ios-inset-viewport", ""); // 직전 세로의 아래 여백을 가로 측정값으로 저장하지 않습니다. measuredSafeBottom = 0; lastHeight = rotationViewport.height; lastWidth = rotationViewport.width; fullScreenReads = 0; return true; } if (portraitRestore) { // 복귀 중간값을 버릴 때는 재측정 자체도 하지 않습니다. 종료 시에는 // 아래의 기존 '쓴 높이를 걷고 읽기' 경로를 통해 실제 치수를 다시 확인합니다. root.style.setProperty("--app-frame-height", portraitRestore.height + "px"); root.style.setProperty("--app-frame-safe-top", portraitRestore.top + "px"); root.style.setProperty("--app-rotation-safe-top", portraitRestore.top + "px"); if (portraitRestore.inset) root.setAttribute("data-ios-inset-viewport", ""); else root.removeAttribute("data-ios-inset-viewport"); root.style.removeProperty("--app-measured-safe-top"); root.style.removeProperty("--app-measured-safe-bottom"); measuredSafeBottom = portraitRestore.bottom; lastHeight = portraitRestore.height; lastWidth = window.innerWidth; return; } var cached = measuredFrames[orientation]; if (probeObserver && !probesDirty && !changedOrientation && !isEditing() && inputScale === 1 && cached && cached.screen === screenKey && cached.width === inputWidth && cached.inner === inputHeight && root.style.getPropertyValue("--app-frame-height") === (cached.height === null ? "" : cached.height + "px")) { measuredSafeBottom = cached.bottom; return; } /* * **재기 전에 우리가 쓴 값을 걷어냅니다. 안 그러면 되먹임 고리에 갇힙니다.** * * `--app-frame-height`는 `html, body`의 `min-height`로 들어가 문서를 * 그만큼 늘립니다. 문서를 화면만큼 늘리면 iOS가 큰 뷰포트로 넘어가 * `dvh`·`lvh`·`%`가 전부 그 값이 됩니다(규칙 7 실측 2026-08-13) — * 그래서 아래 `Math.max(innerHeight, 100dvh)`가 **우리가 쓴 값을 다시 * 읽습니다.** * * 한 번이라도 실제보다 크게 쓰면 그 뒤로는 줄일 길이 없습니다. 초기 * 로딩에 `innerHeight`가 화면 전체로 잠깐 보고되면 틀이 852로 굳고, * 실제 웹뷰는 793이라 하단 캡슐이 59px 아래로 밀려 반쯤 잘립니다. 앱을 * 껐다 켜야 낫는 이유도 이것입니다 — 새로 뜨면 인라인 스타일이 없습니다 * (실기기 2026-09-21). * * 걷어낸 뒤 재면 매번 **처음과 같은 조건**에서 재게 되므로, 잘못 읽은 * 값이 다음 측정에서 스스로 풀립니다. 다시 칠하기 전에 읽기만 하므로 * 중간 프레임이 그려지지 않습니다. */ var written = root.style.getPropertyValue("--app-frame-height"); if (written) root.style.removeProperty("--app-frame-height"); // 첫 실행에서 복원한 상단이 CSS 대체식을 늘려 dvh로 되읽히지 않게 합니다. // 읽기 직후 같은 호출에서 복구하므로 임시 치수는 그려지지 않습니다. var startupTop = startupFrame.holding() ? root.style.getPropertyValue("--app-frame-safe-top") : ""; if (startupTop) root.style.removeProperty("--app-frame-safe-top"); prepareProbes(); var measurements = probes.map(function (probe) { return probe.getBoundingClientRect().height; }); if (startupTop) root.style.setProperty("--app-frame-safe-top", startupTop); if (window.__appStartupDiagnostic) window.__appStartupDiagnostic.viewport(measurements, inputWidth, inputHeight, inputScale); lastProbeMeasurements = measurements; probesDirty = false; var svh = measurements[0]; var safeTop = measurements[1]; var shortfall = screenHeight - (svh + safeTop); var dynamicHeight = measurements[2]; measuredSafeBottom = measurements[3]; var viewportHeight = Math.max(window.innerHeight, dynamicHeight); if (landscape) { // 회전 중 한 측정치가 세로 높이로 늦게 남으면 큰 값을 쓰는 순간 // 객실 행과 하단 버튼이 화면 밖으로 늘어납니다. 가로에서만 작은 // 정상 측정치를 쓰며, 둘 다 늦으면 CSS 크기 관측으로 복구합니다. var heights = [window.innerHeight, dynamicHeight].filter(function (height) { return Number.isFinite(height) && height > 0; }); if (!heights.length) { if (written) root.style.setProperty("--app-frame-height", written); return; } viewportHeight = Math.min.apply(Math, heights); } // 입력 중 같은 폭에서 줄어든 높이는 키보드이므로 틀에 고정하지 않습니다. // 방향 신호보다 실제 폭·높이가 늦게 도착하는 회전은 키보드와 구분합니다. var active = document.activeElement; if (lastHeight && active && (active.tagName === "INPUT" || active.tagName === "TEXTAREA" || active.isContentEditable) && Math.abs(window.innerWidth - lastWidth) < 1 && viewportHeight < lastHeight) { portraitCandidate = null; // 걷어낸 것을 되돌려 놓습니다. 그냥 두면 키보드가 올라온 동안 틀이 튑니다. if (written) root.style.setProperty("--app-frame-height", written); return; } lastWidth = window.innerWidth; var startupInset = startupInsetFrame.restore(svh, safeTop, dynamicHeight, inputWidth, inputHeight, inputScale, landscape); if (startupInset) { root.style.setProperty("--app-frame-height", startupInset.height + "px"); root.style.setProperty("--app-frame-safe-top", "0px"); root.style.setProperty("--app-remembered-safe-bottom", startupInset.bottom + "px"); root.style.removeProperty("--app-measured-safe-top"); root.style.removeProperty("--app-measured-safe-bottom"); root.setAttribute("data-ios-inset-viewport", ""); lastHeight = startupInset.height; measuredSafeBottom = startupInset.bottom; fullScreenReads = 0; return; } var startup = startupFrame.restore(svh, safeTop, dynamicHeight, inputWidth, inputHeight, inputScale, landscape); if (startup) { root.style.setProperty("--app-frame-height", startup.height + "px"); root.style.setProperty("--app-frame-safe-top", startup.top + "px"); root.style.setProperty("--app-remembered-safe-bottom", startup.bottom + "px"); root.style.removeProperty("--app-measured-safe-top"); root.style.removeProperty("--app-measured-safe-bottom"); root.removeAttribute("data-ios-inset-viewport"); lastHeight = startup.height; measuredSafeBottom = startup.bottom; fullScreenReads = 0; return; } // 가로에서 screen.height는 기기에 따라 세로 방향 값으로 남습니다. // 세로 보정식을 재사용하지 않고 실제 웹뷰 높이만 사용합니다. if (landscape) { root.style.setProperty("--app-frame-height", viewportHeight + "px"); root.style.setProperty("--app-frame-safe-top", safeTop + "px"); root.setAttribute("data-ios-inset-viewport", ""); root.style.removeProperty("--app-measured-safe-top"); root.style.removeProperty("--app-measured-safe-bottom"); root.style.removeProperty("--app-rotation-safe-top"); portraitHandoffPending = false; lastHeight = viewportHeight; fullScreenReads = 0; measuredFrames.landscape = !isEditing() && inputScale === 1 && inputHeight === dynamicHeight && inputWidth > shortSide + 4 && inputHeight <= shortSide + 4 ? { width: inputWidth, inner: inputHeight, height: viewportHeight, bottom: measuredSafeBottom, screen: screenKey } : null; return; } // default 설치는 상태표시줄 아래에서 시작합니다. 짧은 높이가 정상인데 // screen.height까지 늘리면 하단 버튼이 화면 밖으로 밀립니다. // 현재 head의 meta는 기존 아이콘의 설치 당시 설정을 알려주지 못하므로, // 짧다고 보정을 포기하면 svh의 더 짧은 값으로 돌아가 하단에 빈 영역이 생깁니다. if (viewportHeight < screenHeight - 1 && safeTop < 1) { root.style.setProperty("--app-frame-height", viewportHeight + "px"); root.style.setProperty("--app-frame-safe-top", "0px"); root.setAttribute("data-ios-inset-viewport", ""); root.style.removeProperty("--app-measured-safe-top"); root.style.removeProperty("--app-measured-safe-bottom"); root.style.removeProperty("--app-rotation-safe-top"); portraitHandoffPending = false; lastHeight = viewportHeight; fullScreenReads = 0; rememberPortrait(viewportHeight, dynamicHeight, measuredSafeBottom, 0, true); measuredFrames.portrait = portraitFrame && portraitFrame.width === shortSide && portraitFrame.screenHeight === longSide && portraitFrame.height === viewportHeight && !isEditing() && inputScale === 1 && inputHeight === dynamicHeight ? { width: inputWidth, inner: inputHeight, height: viewportHeight, bottom: measuredSafeBottom, screen: screenKey } : null; return; } lastHeight = viewportHeight; // 1px 미만은 반올림 오차입니다. 지금까지 멀쩡하던 곳은 여기서 끝납니다. if (shortfall < 1) { root.removeAttribute("data-ios-inset-viewport"); // 겹침 설치에서는 높이뿐 아니라 확인된 상단 여백도 함께 복원합니다. // 기본 설치의 짧은 높이를 화면 전체로 늘리거나 기기별 59px를 고정하지 않습니다. rememberPortrait(svh + safeTop, dynamicHeight, measuredSafeBottom, safeTop, false); // env 상단과 dvh가 서로 다른 프레임에 도착해도 헤더·틀·달력이 // 같은 상단 측정값을 함께 사용합니다. 미확정 기기 값을 추측하지 않습니다. root.style.setProperty("--app-frame-safe-top", safeTop + "px"); root.style.removeProperty("--app-frame-height"); root.style.removeProperty("--app-measured-safe-top"); root.style.removeProperty("--app-measured-safe-bottom"); root.style.removeProperty("--app-rotation-safe-top"); portraitHandoffPending = false; fullScreenReads = 0; measuredFrames.portrait = portraitFrame && !isEditing() && inputScale === 1 && inputHeight === dynamicHeight && portraitFrame.height === svh + safeTop ? { width: inputWidth, inner: inputHeight, height: null, bottom: measuredSafeBottom, screen: screenKey } : null; return; } // 연달아 두 번 같은 말을 할 때만 씁니다(위 `fullScreenReads` 주석). var sample = [screenKey, window.innerWidth, window.innerHeight, svh, dynamicHeight, safeTop, measuredSafeBottom].join(":"); fullScreenReads = sample === fullScreenSample ? fullScreenReads + 1 : 1; fullScreenSample = sample; if (fullScreenReads < 2) { // 복귀 보호를 끝낸 첫 읽기는 전체 화면 보정의 확정값이 아닙니다. // 이때 852/59를 걷고 CSS 793/0을 노출하지 않고 같은 큐에서 딱 한 번 재확인합니다. // 일반 초기화까지 미확정 높이를 되쓰면 이전 높이가 dvh를 늘리는 // 되먹임을 붙들 수 있습니다. 이미 확인한 복귀 배치만 보호합니다. if (written && root.style.getPropertyValue("--app-rotation-safe-top")) { root.style.setProperty("--app-frame-height", written); } if (portraitHandoffPending) { portraitHandoffPending = false; scheduleRefresh(); } return; } root.removeAttribute("data-ios-inset-viewport"); root.style.setProperty("--app-frame-height", screenHeight + "px"); // 작은 뷰포트가 설치 전 Safari 치수를 잠깐 유지할 수 있습니다. 실제 env 상단이 // 있는데도 screen-svh로 덮으면 59px 대신 194px 같은 큰 빈 공간이 고정됩니다. // 양수 실측을 우선하며, 실측이 없을 때도 화면 차이를 무조건 상태표시줄로 보지 않습니다. // 아래 비율은 방향 판정/노치 높이 추정이 아니라 과도한 대체값을 거부하는 상한입니다. var inferredTop = Math.max(0, screenHeight - svh); var frameSafeTop = safeTop > 0 ? safeTop : (inferredTop < shortSide / 4 ? inferredTop : 0); root.style.setProperty("--app-frame-safe-top", frameSafeTop + "px"); /* * 실제 env 상단이 없는 기존 설치에만 차이값을 대체값으로 씁니다. * 정상 치수에서 874−812=62, 852−793=59였지만 모든 초기 차이가 * 상태표시줄은 아닙니다. 큰 초기 차이는 거부하고 다음 실측을 기다립니다. */ root.style.setProperty("--app-measured-safe-top", frameSafeTop + "px"); /* * 아래 여백도 0으로 보고됩니다. 홈 인디케이터는 그대로 있으므로 그냥 두면 * 하단 캡슐이 그 밑에 깔립니다. 위 여백이 어긋나 있다는 것은 아래도 * 믿을 수 없다는 뜻이라, 이때만 기본값을 세웁니다. */ if (measuredSafeBottom < 1) { root.style.setProperty("--app-measured-safe-bottom", "34px"); } root.style.removeProperty("--app-rotation-safe-top"); portraitHandoffPending = false; // 위에서 원시 치수 묶음을 두 번 확인했습니다. 여기서 다시 두 번을 // 요구하면 이미 적용된 새 치수와 복귀 캐시가 서로 다른 상태로 남습니다. rememberPortrait(screenHeight, dynamicHeight, measuredSafeBottom < 1 ? 34 : measuredSafeBottom, frameSafeTop, false, true); measuredFrames.portrait = portraitFrame && !isEditing() && inputScale === 1 && inputHeight === dynamicHeight && portraitFrame.height === screenHeight ? { width: inputWidth, inner: inputHeight, height: screenHeight, bottom: measuredSafeBottom, screen: screenKey } : null; } /* * **아래 안전영역은 첫 그림에 0으로 옵니다. 그래서 기억해 둡니다.** * * 실기기 실측(2026-09-22, 찬 실행): * * parse t=1795 safeB 0 inset 0 도크 top 733 * raf1 t=1931 safeB 34 inset 34 도크 top 711 * * iOS가 파싱 시점에 `env(safe-area-inset-bottom)`을 0으로 주다가 한 프레임 * 뒤에 34로 줍니다. 도크의 아래 여백이 `max(0.75rem, --app-bottom-inset)`이라 * 12px로 그려졌다가 34px이 되고, 그 22px이 **137ms 동안** 눈에 보입니다. * * 기다릴 방법이 없으므로 **그 기기가 지난번에 알려준 값**을 첫 그림에 * 씁니다. 짐작이 아니라 같은 기기가 실제로 보고한 값이라, 홈 인디케이터가 * 없는 기기에서 빈 자리를 만들 일이 없습니다 — 그런 기기는 0을 보고하고 * 우리는 0을 적지 않으므로 지금과 똑같이 동작합니다. * * 아주 처음 설치한 날 한 번은 여전히 22px이 보입니다. 그때 기억해 두므로 * 그다음부터는 없습니다. * * 방향별로 기억합니다. 세로에서 잰 34px을 가로에 계속 적용하면 하단에 * 불필요한 여백이 생기므로 회전할 때 해당 방향의 값만 복원합니다. */ var SAFE_BOTTOM_KEY = "app.safe-bottom"; var lastRememberedKey = ""; var lastRememberedValue = 0; function safeBottomKey() { return root.getAttribute("data-app-landscape") === "true" ? SAFE_BOTTOM_KEY + ".landscape" : SAFE_BOTTOM_KEY; } function rememberSafeBottom() { if (window.navigator.standalone !== true) return; var measured = measuredSafeBottom; if (measured < 1) return; var key = safeBottomKey(); if (root.style.getPropertyValue("--app-remembered-safe-bottom") !== measured + "px") { root.style.setProperty("--app-remembered-safe-bottom", measured + "px"); } if (lastRememberedKey === key && lastRememberedValue === measured) return; try { window.localStorage.setItem(key, String(measured)); lastRememberedKey = key; lastRememberedValue = measured; } catch (error) { /* 사파리 비공개 모드 등. 기억 못 해도 동작은 그대로입니다. */ } } function restoreSafeBottom() { if (window.navigator.standalone !== true) return; try { var saved = Number(window.localStorage.getItem(safeBottomKey())); if (saved >= 1) { root.style.setProperty("--app-remembered-safe-bottom", saved + "px"); } } catch (error) { /* 읽지 못하면 현재 측정값만 씁니다. */ } } apply(); rememberSafeBottom(); /* * **첫 측정만 믿지 않습니다.** 이 스크립트는 틀을 그리기 전에 돌아야 해서 * (서버 HTML의 동기 스크립트) 레이아웃이 자리잡기 전에 한 번 잽니다. 그 값이 * 틀리는 일이 있으므로 자리잡은 뒤에 다시 잽니다. 맞게 읽었으면 같은 값을 * 다시 쓰는 것뿐이라 화면은 그대로입니다. */ if (typeof window.requestAnimationFrame === "function") { window.requestAnimationFrame(function () { apply(); rememberSafeBottom(); }); } window.addEventListener("load", function () { probesDirty = true; apply(); rememberSafeBottom(); }); function refresh(rotationViewport) { var reused = apply(rotationViewport); rememberSafeBottom(); return reused; } var refreshFrame = 0; function scheduleRefresh() { if (refreshFrame) return; refreshFrame = window.requestAnimationFrame(function () { refreshFrame = 0; refresh(); }); } var rotationTimers = []; function refreshAfterRotation(event) { rotationTimers.forEach(function (timer) { window.clearTimeout(timer); }); rotationTimers = []; if (refreshFrame) window.cancelAnimationFrame(refreshFrame); refreshFrame = 0; // React의 새 방향 측정보다 먼저 한 번 반영합니다. var reused = refresh(event && event.detail); // 표시를 지연하지 않고 동기 커밋 뒤 기존 실측을 한 번 예약합니다. if (reused) scheduleRefresh(); // 현재 iOS는 CSS 단위/안전영역이 실제 바뀔 때만 재측정합니다. // 관측 API가 없는 구형 환경에만 유한 재확인을 남깁니다. if (!probeObserver) { rotationTimers = [80, 240, 500].map(function (delay) { return window.setTimeout(refresh, delay); }); } } window.addEventListener("resize", scheduleRefresh); window.addEventListener("app:prepare-orientation", refreshAfterRotation); window.addEventListener("orientationchange", scheduleRefresh); if (window.visualViewport) { window.visualViewport.addEventListener("resize", function () { if (root.getAttribute("data-app-landscape") === "true" || portraitRestore) scheduleRefresh(); }); } window.addEventListener("pageshow", function () { probesDirty = true; refresh(); }); document.addEventListener("focusout", function () { window.setTimeout(function () { probesDirty = true; apply(); }, 350); }); })();

통합 예약관리

세로로 돌려주세요