@import url('https://fonts.googleapis.com/css2?family=Didact+Gothic&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:white;
  color:#333;
  flex-direction:column;
}

#navbar {
  height:67px;
  position:relative;
  width:100%;
  max-width:850px;
  margin:0 auto;
  background-color:white;
  z-index:999;
}

.logo {
  position:absolute;
  left:20px;
  bottom:7px;
  font-size:32px;
  font-family:'Didact Gothic', sans-serif;
  font-weight:normal;
  line-height:1;
}

.logo a:link,
.logo a:visited {
  text-decoration:none;
  color:gray;
  background-color:white;
}

.logo a:hover {
  color:#FF6688;
  background-color:white;
}

.nav-links {
  position:absolute;
  left:180px;
  bottom:10px;

  list-style:none;
  padding:0;
  margin:0;

  display:flex;
  align-items:center;

  font-size:11px;
  font-family:Verdana, sans-serif;
  font-weight:normal;
  font-style:normal;
  line-height:1;
}

.nav-links li {
  display:flex;
  align-items:center;
  margin:0;
}

.nav-links li:not(:last-child)::after {
  content:"•";
  color:gray;
  margin:0 6px;
}

.nav-links a:link,
.nav-links a:visited {
  text-decoration:none;
  color:gray;
  background-color:transparent;
  padding:0;
}

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

.nav-links a.active {
  color:white;
  background-color:gray;
}

.container{
  position:relative;
  width:100%;
  max-width:850px;
  padding:10px 20px;
  background:white;
  height:auto;
  margin:0 auto; /* centering */
  min-height:calc(100vh - 67px); /* 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;}

#bottom{border-top:1px dashed gray;
margin:12px auto 40px auto;
padding-top:3px;
position:relative;
font-size:10px;font-family:'Didact Gothic',sans-serif;
letter-spacing:1ex;
clear:both;}

.subpage {
  font-family:'Lucida Grande', Tahoma, Verdana, Arial, sans-serif;
  font-size:13px;
  color:gray;
  line-height:1.38;
  text-align:left;
}

.subpage::before {
  content:"";
  display:block;
  border-top:1px dashed gray;
  margin-bottom:10px;
}

h1, h2, h3, h4, h5, h6 {
  font-family:'Noto Sans KR', sans-serif;
  color:gray;
}

h1 { font-size:2em;    margin:.67em 0; }
h2 { font-size:1.5em;  margin:.83em 0; }
h3 { font-size:1.25em; margin:1em 0; }
h4 { font-size:1.1em;  margin:1em 0; }
h5 { font-size:1em;    margin:1em 0; }
h6 { font-size:.9em;   margin:1em 0; }

.subsection {
  margin-bottom:30px;
}

.subsection a:link,
.subsection a:visited {
  text-decoration:none;
  color:#FF6688;
}

.subsection a:hover {
  text-decoration:underline;
  color:#FF6688;
  background-color:white;
}

.plogo {
  text-align:center;
  vertical-align:middle;
  font-family:'Noto Sans KR', sans-serif;
  font-size:14px;
  padding-right:20px;
}

table td {
  border:0;
  vertical-align:top;
}

.hrin{border-style:dotted none none;border-color:#ccc black black;border-width:2px 0px 0px;height:1px;display:block;margin:15px 0;}

.profile-art{float:left;width:200px;}
.profile-img{border-radius:5px;width:200px;height:200px;margin-bottom:9px;}
.profile-desc{
  margin-left:220px;
}

.isch{border:1px dotted #a0a0a0;
border-radius:5px;}

.sns_contnr{float:left;
margin-top:5px;
padding:10px;
box-shadow: 2px 2px 5px #ddd;
border:1px dotted #a0a0a0;
border-radius:5px;}

.sns_inbox{width:260px;height:370px;overflow:hidden;text-align:center;}
.sns_contnr h2{margin:3px 0 7px 0;}
.empty20{width:20px;float:left;min-height:1px;}

.imgFlipH{-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";}


.album-art{float:left;width:200px;}
.album-art img{width:200px;height:200px;}
.album-desc{
  margin-left:220px;
}

.album-desc b{display:inline-block;width:110px;
font-family:'Jeju Gothic',sans-serif;color:#999;
font-weight:normal;}
.album-desc tt{display:inline-block;
font-family:'Jeju Gothic',sans-serif;color:#ddd;background-color:inherit;
font-weight:normal;}

.album-desc ul, 
.album-desc ol{
margin:5px 0 -5px 15px;
padding:0;}
.album-desc li{
width:100%;display:inline-block;}
.album-desc li:after{clear:both;}
.album-desc li .trckttl{float:left;margin-top:2px;}
.album-desc li .sndcld{float:left;margin-left:15px;}

a.buylink-itunes{
float:left;margin:2px 10px 0 15px;
background-repeat:no-repeat;
background-position:0 0;
background-image:url(/releases/buyitunes.png);
text-indent:18px;
line-height:16px;
height:14px;
font-family:"Lucida Grande","Lucida Sans Unicode","Lucida Sans",Garuda,Verdana,Tahoma,sans-serif;
font-size:11px;}

a.buylink-itunes:link,
a.buylink-itunes:visited{text-decoration:none;color:#444;}
a.buylink-itunes:hover{text-decoration:underline;color:#444;}


@media (max-width: 480px) {
  .container{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%;}

  #navbar {
    height:72px;
  }

  .logo {
    bottom:29px;
  }

  .nav-links {
    left:20px;
    bottom:8px;
  }

  .container {
    min-height:calc(100vh - 72px);
  }
  
  .profile-art,
  .album-art {
    float:none;
    width:100%;
  }

  .profile-desc,
  .album-desc {
    margin-left:0;
    margin-top:10px;
  }
}