@charset "UTF-8";
@import url("/assets/css/common/reset-reverse.css");

.sec-post-detail {
  padding: 0 var(--size-inline);
}
.sec-post-detail .post-hgroup {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  margin: 6rem auto 3.2rem;
  padding-bottom: 3.2rem;
  --dot-gap: 0.7rem;
  --dot-size: 0.15rem;
  --border-height: calc(var(--dot-size) * 2);
  --dot-color: var(--color-carrot);
  background-repeat: repeat-x;
  background-position: bottom center;
  background-size: calc(var(--dot-size) + var(--dot-gap)) var(--border-height);
  background-image: radial-gradient(circle, var(--dot-color) var(--dot-size), transparent var(--dot-size));
}
.sec-post-detail .post-hgroup time {
  margin-top: 0.2em;
  padding: 0.2rem 1.6rem;
  background: var(--color-carrot);
  border-radius: 999rem;
  font-size: 0.9em;
  white-space: nowrap;
  color: #fff;
}
.sec-post-detail .post-hgroup h1 {
  font-size: 1.4em;
}
.post-nav {
  display: flex;
  justify-content: space-between;
  margin: var(--size-block) auto;
  padding: var(--size-inline);
  background: var(--color-emerald-ultralight);
  background: #eee;
  border-radius: var(--size-border-radius);
}
.post-nav a:not(.disabled) {
  transition: all 0.2s ease-in-out;
}
.post-nav a:hover {
  opacity: 1 !important;
  color: var(--color-emerald);
}
.post-nav i {
  margin: 0 0.4rem;
  color: var(--color-emerald);
}
.post-nav .disabled {
  opacity: 0.65 !important;
  pointer-events: none;
}
.post-nav .disabled i {
  color: #666;
}
@media screen and (max-width: 768px) {
  .sec-post-detail .post-hgroup {
    display: block;
    margin: 4rem auto 2.4rem;
    padding-bottom: 2.4rem;
  }
  .sec-post-detail .post-hgroup h1 {
    margin-top: 0.8rem;
  }
  .post-nav {
    padding: var(--size-inline) .8rem;
    margin-inline: var(--size-inline);
    font-size: 1.2rem;
  }
  .post-nav i{
    margin: 0 .2rem;
  }
}