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

* { box-sizing: border-box; font-family: 'Noto Sans KR', sans-serif; }

html, body { width: 100%; height: 100%; margin: 0; }
html { padding: 0; }
body { overflow: hidden; }

div.header {
  display: flex; flex-direction: row; justify-content: center; align-items: center;
  background: rgb(0,102,0); background: linear-gradient(0deg, rgba(0,102,0,1) 0%, rgba(0,153,0,1) 100%);
}
div.header * { color: #fff; }

#left-button, #right-button { width: 64px; height: 64px; display: flex; flex-direction: row; justify-content: center; align-items: center; }
button {
  border: 0; border-radius: 4px; padding: 4px 8px; font-size: 16px; color: white;
  background: rgb(102,102,102); background: linear-gradient(180deg, rgba(102,102,102,1) 0%, rgba(51,51,51,1) 100%);
  transition-duration: 0.2s;
}
button:hover {
  background: rgb(51,51,51); background: linear-gradient(180deg, rgba(51,51,51,1) 0%, rgba(0,0,0,1) 100%);
}
div.button-hide button { display: none; }
#title {
  width: calc(100% - 128px); padding: 0 0 1px 0; text-align: center;
  text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
}

#navigator { display: flex; flex-direction: column; height: 100%; }
#navigator>div { padding: 16px 8px; border-bottom: 1px solid #999; cursor: pointer; }
#essay { display: flex; flex-direction: column; height: 100%; }
#essay-read { width: 100%; height: 100%; }

iframe { border: 0; }
#wrapper { display: flex; flex-direction: row; }

#password-wrapper {
  position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
div.password-dialog {
  border: 3px #999 solid; background-color: #ccc; padding: 16px; border-radius: 8px;
  display: flex; flex-direction: column; align-items: center;
}
div.password-dialog>div { margin-top: 8px; }
div.password-dialog>div:first-child { margin-top: 0; }
div.title { font-size: 24px; }
#error { color: red; }

@media only screen and (min-width: 737px) {
  div.header { display: none; }
  #wrapper { width: 100%; height: 100%; }
  body { padding: 8px; }
  #navigator { width: 160px; }
  #essay { width: calc(100% - 160px); }
}

@media only screen and (max-width: 736px) {
  div.header { font-size: 24px; width: 100%; height: 64px; }
  #wrapper {
    width: 200%; height: calc(100% - 64px); position: fixed; top: 64px;
    transition-duration: 0.2s;
  }
  div.skewed { transform: translateX(-50%); }
  body { padding: 0; }
  #essay { width: 50%; }
  #navigator { padding: 8px; width: 50%; }
  #navigator>div { font-size: 24px; }
}