/* v3 */
html {
	max-width: calc(100vw - 3vw);
  margin: auto;
  height: auto;
  margin-top: 5px;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  html, section {
    width: 375px;
  }
}

/* v2 */
/* font */
@import url('//fonts.googleapis.com/earlyaccess/notosanskr.css');
@font-face {
    font-family: 'IntelOneMono';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-1@1.1/intelone-mono-font-family-light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

:root {
  --black: #333;
  --lightgray: #dbdbdb;
  --white: #fff;
  --black-10: rgba(51, 51, 51, 0.1);
  --black-20: rgba(51, 51, 51, 0.2);
  --black-50: rgba(51, 51, 51, 0.5);
  --black-80: rgba(51, 51, 51, 0.8);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 12px;
  font-family: 'Noto Sans KR', sans-serif;
}
/*
html {
  max-width: 378px;
  margin: auto;
  height: auto;
}
*/
body {
  position:relative;
  min-height: 100vh;
}
img {
  width: -webkit-fill-available;
}
select {
  padding: 5px 2px;
  outline: none;
  border: 1px solid var(--lightgray);
  border-radius: 0;
}
ul {
  padding-inline-start: 20px;
}
ol {
  padding-inline-start: 16px;
}

[type="checkbox"] {
  accent-color: var(--black);
}
::selection {
  background: var(--black-20);
  color: var(--black);
}

iframe {
  width: 100%;
}

@media screen and (max-width: 480px) {
  iframe {
    height: 200px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  iframe {
    height: 260px;
  }
}

/* 공통 버튼 */
.btn {
  border-radius: 0;
  padding: 4px 8px 5px 8px;
  border: 1px solid var(--lightgray);
  cursor: pointer;
  background-color: var(--white);
  transition: color 0.2s ease, background-color 0.2s ease;
	font-size: 12px;
}
.btn:hover {
  background-color: var(--black-10);
}
.btn-group {
  text-align: right;
  margin: 30px 0;
}
.btn-group a {
	color: var(--black);
	text-decoration: none;
}

.w-100 {
  width: 100%;
}