/* =============================================
* ddadadac wrapper — embed widget CSS (portal hosted)
*
* 호스팅: https://portal.ddadadac.com/wrapper.css
* 동반 JS: https://portal.ddadadac.com/wrapper.js
*
* 게임 wrapper HTML 에:
*
*
*
* 게임 wrapper HTML 에:
*
*
*
*
* 출처: ~/svn/GoStop/Matgo/wrapper.html 54-108 inline style.
* 변경: body class 통일 (browser/standalone — 맞고 네이밍).
* 레터박스 배경은 CSS custom property `--ddadadac-letterbox-bg` 로 노출,
* wrapper.js 가 window.DDADADAC_GAME.letterboxBg 를 받아 set.
* ============================================= */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* Browser (PC/Mobile): 9:16 iframe 고정 + 배경 레터박스
position: relative — .game-container 가 absolute 로 수동 centering */
body.browser {
background: var(--ddadadac-letterbox-bg, #000000);
position: relative;
}
/* Standalone (PWA/App): 풀스크린 */
body.standalone {
background: #000;
position: fixed;
inset: 0;
}
/* Keyboard 열린 상태 — virtual keyboard 떠 있는 동안 레이아웃 freeze.
wrapper.js 가 body.keyboard-open 토글. 별도 시각 효과 없음 (state marker). */
body.keyboard-open {
/* 향후 keyboard 안내 UI 등이 필요하면 여기 추가 */
}
/* Game iframe container */
.game-container {
position: relative;
z-index: 1;
overflow: hidden;
}
.game-container iframe {
display: block;
border: none;
background: #302842; /* splash 배경과 동일 — 로딩 시 깜빡임 방지 */
}
/* Browser: no rounded corners on iframe */
body.browser .game-container iframe {
border-radius: 0;
}
/* Standalone: fullscreen iframe tracking real viewport */
body.standalone .game-container {
position: fixed;
inset: 0;
}
body.standalone .game-container iframe {
width: 100%;
height: 100%;
border-radius: 0;
}