@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');

html, body {	margin: 0; padding: 0;
			height: auto;
			min-height: 100%;
			width: 100%;
			overflow-y: visible;
			overflow-x: hidden;
			font-family: "Noto Sans KR", sans-serif;
			font-size: 10pt;
			font-style: normal; }

midi-player { display: none; }
#bgm-toggle {
  font-family: Dotum, monospace;
  font-size: 12px;
  background: #f1f1f1;
  color: #ff0000;
  border: 0px;
  padding: 5px 10px;}

#bgm-toggle:hover {  background: #ffffff;
  color: black; }

#pn {
    width: 100%;
    max-width: 100%; /* 부모인 .main을 절대 넘지 못하게 함 */
    box-sizing: border-box; /* 패딩값이 너비에 영향을 주지 않게 함 */
}

/* [2] PC 버전 (기본 설정) */
.container { 
	display: grid;
	grid-template-columns: 450px auto 200px;
	grid-template-rows: 1fr auto;
	min-height: 100vh;
        width: 100%; }

.header {
	position: sticky;
	top: 0;
	height: calc(100vh - 44px);
	background-image: url('img/bg.gif');
	background-repeat: no-repeat;
	background-position: center bottom; 
	background-size: cover;
	font-size: 30px;
	display: grid;
	place-items: center;
	writing-mode: vertical-rl; }

.header h1 {
	font-family: "Lato", sans-serif;
	font-weight: 100;
	color: #FF0000;
  text-shadow:
    -1px -1px 0 white,
     1px -1px 0 white,
    -1px  1px 0 white,
     1px  1px 0 white;
	z-index: 100; }

.main { 
	padding-top:50px;
	padding-left: 20px;
	overflow: visible;
	box-sizing: border-box; }

.main em { font-style: normal;
              background-color: #f1f1f1; }

.footer {	grid-column: 1 / 4;
	background-color: #eee; 
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: Dotum, sans-serif;
	font-size: 8pt;
	font-style: normal;
	height: 44px; }
.footer a { color: #FF0000;
	 text-decoration: none; }

/* PC 스타일: 메뉴 상시 노출 */
.menu { display: block; grid-column: 3 / 4; background: #fff; padding-top:80px; }
.menu-toggle { display: none; } 

/* [4] 태블릿 버전 레이아웃 (768px ~ 1365px) */
@media (max-width: 1365px) and (min-width: 768px) {
    .container { grid-template-columns: 300px auto;
		    grid-template-rows: 1fr 44px; }
    .header { background-size: contain; }
    .footer { grid-column: 1 / 3; }
}

/* [5] 모바일 버전 레이아웃 (767px 이하) */
@media (max-width: 767px) {
    .container { 
        display: flex; 
        flex-direction: column;
	height: 100%;
	min-height: 100vh; }
    .header {
        width: 100%;
	flex-shrink: 0;
        height: 200px;
        writing-mode: horizontal-tb;
        background-position: center;
        background-size: 450px; }
    .main {
	flex: 1;
	padding: 20px;
	overflow: visible; }
    .footer { flex-shrink: 0;
		height: 44px; }
}