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

* {margin:0;padding:0;box-sizing:border-box;}

body{
  font-family: 'Noto Sans KR', sans-serif;
  display:flex;
  justify-content:center;
  background-color:#f4f4f4;
  color:#333;
  flex-direction:column;
}

.navbar {
  height:22px;
  padding:10px 0;
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
  width:100%;
  background-color:white;
  max-width:850px;
  box-shadow:5px 0 10px rgba(0, 0, 0, 0.05), -5px 0 10px rgba(0, 0, 0, 0.05);
  z-index:999;
  margin:0 auto; /* centering */
  font-family: 'Noto Sans KR', sans-serif;
  font-size:.9em;
}

.nav-links {
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
}

.nav-links li {
  margin:0 5px;
}

.nav-links a {
  text-decoration:none;
  color:white;
  padding:2px 7px 1px 7px;
}

.nav-links a:hover {
  text-decoration:none;
  background-color:#555;
  color:white;
}

.nav-links a.active {
  background-color:#ccc;
}

.container{
  position:relative;
  width:100%;
  max-width:850px;
  padding:10px 20px;
  background:white;
  height:auto;
  box-shadow:0 0 10px rgba(0, 0, 0, 0.1);
  margin:0 auto; /* centering */
  min-height:calc(100vh - 22px); /* 100vh - .navbar height */
  font-size: 15px;
  line-height: 1.5;
  font-family: 'Noto Serif KR', serif;
  text-align:justify;
  hyphens:auto;
}

a:link{text-decoration:none;color:#555;}
a:visited{text-decoration:none;color:#555;}
a:hover{text-decoration:underline;color:#555;background-color:transparent;}

h1, h2, h3, h4{text-align:start;hyphens:manual;}
h1 { font-size: 2em;    margin: 0.6em 0; }
h2 { font-size: 1.75em; margin: 0.6em 0; }
h3 { font-size: 1.5em;  margin: 0.6em 0; }
h4 { font-size: 1.25em; margin: 0.6em 0; }
.ss{ font-family: 'Noto Sans KR', sans-serif; }

p { margin: 1em 0; }

sup{color:#a0a0a0;
vertical-align: baseline;
font-size: 0.72em;
position: relative;
top: -0.6em;
line-height: 0;}

sub{
vertical-align: baseline;
font-size: 0.72em;
position: relative;
bottom: -0.35em;
line-height: 0;}

ul, ol{
  margin:10px 0;
  padding-left:20px;
  /* font-family: 'Noto Sans KR', sans-serif; */
}
ul {
  list-style-type:square;
}
ol li::marker{
  font-family: sans-serif;
}

li{margin-bottom:5px;}

blockquote{
  margin:2em 3em 1.5em 3em;position:relative;
  font-style:italic;line-height:1.2;
  background:transparent;
  z-index:0;
}

blockquote::before{
  position:absolute;
  content:"\201C"; /*Unicode for Left Double Quote*/
  font:italic bold 60px Georgia, serif;color:#ddd;
  z-index:-1;
  left:-20px;top:-20px;
}

table {border-collapse:collapse;border:0;width:100%;margin:.75em 0em;}
thead th {
  border: 1px solid black;
  font-weight: bold;
  line-height: 1.2;
  padding: .2em .3em;
}
tbody td {
  border: 1px solid black;
  line-height: 1.2;
  padding: .2em .3em;
  vertical-align: top;
}

.author{
  text-align:right;
  margin:10px 0px;
}

.img-title{
  width:500px;
  max-width:100%;
  height:auto;
}

.show-img-v{width:50%;}
.show-img-h{width:75%;}

.a-btn{
  display:inline-block;
  padding:1px 4px 2px 4px;
  margin:0px;
  border-radius:4px;
  background-color:#888;
  line-height:1;
  color:white !important;
  text-decoration: none;
  font-family: 'Noto Sans KR', sans-serif;
}
.a-btn:hover {
  text-decoration:none;
  background-color:#555;
}

/* LaTeX-like font size scale in HTML */
.tiny{font-size:0.5em;}
.scriptsize{font-size:0.6em;}
.footnotesize{font-size:0.7em;}
.small{font-size:0.85em;}
.normalsize{font-size:1em;}
.large{font-size:1.2em;}
.Large{font-size:1.44em;}
.LARGE{font-size:1.728em;}
.huge{font-size:2.074em;}
.Huge{font-size:2.488em;}

.hr-note{border: none; border-top: 1px solid black; width: 40%; margin:1.5em 0 1em 0;}

.hr-break {
  border: none;
  margin: 1.5em 0;
  text-align: center;
}

.hr-break::before {
  content: "* * *";
  font-family: serif;
  font-size: 1.1em;
  letter-spacing: .5em;
  color: #666;
}

.thumb {
  flex-shrink:0;
  cursor:pointer;
}

.lightbox {
  display:none;
  position:fixed;
  top:0;left:0;width:100%;height:100%;
  background:rgba(0,0,0,0.9);
  z-index:9999;
  justify-content:center;
  align-items:center;
}

.lightbox-img {
  max-width:90%;
  max-height:90%;
}

.exhibition-info{
  font-family: 'Noto Sans KR', sans-serif;
  font-size:.8em;color:white;background:#808080;
  border:none;border-radius:10px;
  padding:5px 10px;
}

@media (max-width: 480px) {
  .container{width:100%;}
  .navbar{width:100%;}
  h1{font-size:1.5em;}
  h2{font-size:1.4em;}
  h3{font-size:1.3em;}
  h4{font-size:1.2em;}
  p{font-size:1em;}
  ul,ol{font-size:1em;}
  .img-title{width:100%;}
  .show-img-v{width:100%;}
  .show-img-h{width:100%;}
}