@font-face { font-family: "ATTF"; src: url("fonts/ATTFShinGoProDeBold.ttf"); }
@font-face { font-family: "ARIALX"; src: url("fonts/arial.ttf"); }
@font-face { font-family: "GIGAMARU"; src: url("fonts/ZhuangVDL-GigaMaruJr-Ultra_4.ttf"); }

html, body { margin: 0; min-height: 100%; }

body {
  min-height: 100vh;
  background-color: #008080;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-family: "Yu Gothic", "Hiragino Sans", sans-serif;
}

.wrap {
  box-sizing: border-box;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 12px;
  gap: 12px;
}

h1 { margin: 0; font-size: 1.4rem; }

.field { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.box { display: flex; flex-direction: column; gap: 4px; }
.box input { font-size: 1rem; padding: 4px 6px; min-width: 180px; }

#c { max-width: 100%; height: auto; }

#download-btn { font-size: 1rem; padding: 6px 28px; cursor: pointer; }

footer { margin-top: auto; text-align: center; }