body {
  /*Regular 400, Bold 700, Extra-bold 800*/
  /*font-family: 'Nanum Gothic', sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";*/
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  font-size: 1em;
}


h1 {
  margin-top: 4rem;
  font-weight: 800;

}

h2 {
  margin-top: 4rem;
  font-weight: 700;
}

h3 {
  margin-top: 2rem;
}

ul {
  list-style-type: none;
  padding: 0;
}

.round-image {
  border-radius: 100%;
  border: solid 1px #ccc;
}

a,
a:hover,
a:visited {
  color: #0a6ebd;
}


/* profile ****************************************** */

.profile-item img {
  position: absolute;
  width: 30px;
  height: 30px;
  object-fit: cover;
  margin-top: 2px;
}

.profile-item {
  min-height: 55px;
  margin-bottom: 12px;
  padding-bottom: 0px;
}

.profile-item strong {
  padding-left: 40px;
  display: block;
  font-size: 15px;
  line-height: 30px;
  font-weight: 700;
  color: rgb(51, 51, 51);
  margin-bottom: -4px;
}

.profile-item > span {
  display: block;
  padding-left: 65px;
  font-size: 12px;
  color: rgb(251, 117, 121);
}

.profile-item > span a {
  padding-left: 5px;
  margin-left: 5px;
  border-left: solid 1px rgba(0, 0, 0, 0.2);
}

.profile-item > span i {
  margin-right: 10px;
}

/* board - article ****************************************** */
.container-article > .content > .content-title {
  margin-bottom: 16px;
}

.container-article > .content > .content-title > h1 {
  /* Headline/L_Bold */
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  /* or 140% */

  letter-spacing: -0.02em;
  /* black/black_light */
  color: #424849;
  padding-bottom: 0;
  padding-top: 24px;
  margin-bottom: 0;
}

.container-article > .content > .content-title > .date-publish {
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  /* identical to box height, or 150% */
  letter-spacing: -0.02em;

  /* gray/gray_dark */
  color: #98A2A2;
}

.content img {
  max-width: 100% !important;
  height: auto;
}

ul.article-media {
}

ul.article-media > li {
  text-align: center;
}

.article-media-img {
  max-width: 100%;
}

.article-comment {

}

.article-comment > li {
  text-align: left;
  border-bottom: solid 1px #f6f6f6;
}

.article-list {

}

.article-list > li {
  text-align: left;
  border-bottom: solid 1px #f6f6f6;
  display: inline-block;
  margin: 0;
  padding: 0;
  width: 100%;
}

.article-item > .profile-item {
  margin: 5px 0;
  min-height: auto;
  display: inline-block;
  float: left;
}

.article-item > .profile-item > img {
  width: 24px;
  height: 24px;
  object-fit: cover;
}

.article-item .article-title {
  margin-top: 7px;
  padding-left: 40px;
  float: left;
  padding-bottom: 10px;
}

.article-item-now {
  font-weight: bold;
}

/* comment ****************************************** */
.comment-list {
  border-top: 1px solid rgb(221, 221, 221);
}

.comment-item {
  border-bottom: 1px solid rgb(221, 221, 221);
  padding: 10px 10px;
}

.comment-item > p {
  padding-left: 35px;
  margin: 0;
  margin-bottom: 5px;
}

.comment-item:hover {
  background-color: #f6f6f6;
}

.comment-item-creating {
  background-color: #f0f0f5;
}

.comment-item > .profile-item {
  min-height: 30px;
  margin-bottom: 5px;
  padding-bottom: 0px;
}

.comment-item > .profile-item > img {
  position: absolute;
  width: 24px;
  height: 24px;
  object-fit: cover;
  /*margin-top: -2px;*/
  z-index: 1000;
}

.comment-item > .profile-item > strong {
  padding-left: 35px;
  display: inline-block;
  /*font-size: 0.8rem;*/
  line-height: 26px;

  font-weight: 600;
  color: rgb(51, 51, 51);
}

.comment-item > .profile-item > div.toolbox {
  padding-left: 0px;
  display: inline-block;
  float: right;
  font-size: 0.6rem;
  line-height: 26px;
}

.comment-item > .profile-item > div.toolbox > a {
  padding-right: 10px;
}

.comment-item > .profile-item > div.toolbox > span.created {
  display: inline-block;
  font-size: 0.6rem;
  line-height: 26px;
  color: #ccc;
}

.comment-item-level-0 {

}

.comment-item-level-1 {
  padding-left: 50px;
}

.comment-item-reply {
  padding-left: 50px;
}

.comment-item .reply-indent {
  position: absolute;

  left: 30px;
  top: 18px;
}

.comment-item .profile-name {
  padding-left: 45px;
  display: block;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  color: rgb(144, 144, 144);
  /*margin-top: -4px;*/
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  /* Always Design for Mobile First */
  /* - https://www.w3schools.com/css/css_rwd_mediaqueries.asp */
}

.editor-view {
  padding: 10px 0px;
  font-size: 14px;
  max-width: 720px !important;
}

.editor-view h1 {
  font-weight: 700;
  font-style: normal;
  font-size: 20px;
  line-height: 28px;
  /* or 140% */
  letter-spacing: -0.02em;

  padding: 10px 0 0 0;
  margin: 0 0 5px 0;
}

.editor-view h2 {
  font-weight: 500;
  font-style: normal;
  font-size: 18px;
  line-height: 25px;
  /* or 140% */
  letter-spacing: -0.02em;

  padding: 10px 0 0 0;
  margin: 0 0 5px 0;
}

.editor-view h3 {
  font-weight: 500;
  font-style: normal;
  font-size: 16px;
  line-height: 24px;
  /* or 140% */
  letter-spacing: -0.02em;

  padding: 10px 0 0 0;
  margin: 0 0 5px 0;
}

.editor-view h4 {
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 24px;
  /* or 140% */
  letter-spacing: -0.02em;

  padding: 0px;
  margin: 0px;
}

.editor-view p {
  margin-bottom: 10px;

  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  line-height: 21px;
  /* or 140% */
  letter-spacing: -0.02em;
}

.editor-view table {
  margin-bottom: 10px;
  font-size: 12px;
}

.editor-view ol, .editor-view ul {
  margin-bottom: 10px;
}

.editor-view ol ol, .editor-view ol ul, .editor-view ul ul, .editor-view ul ol {
  margin-top: 0;
  margin-bottom: 0;
}

.editor-view ol > li {
  list-style: decimal;
  margin-left: 20px;
  padding: 3px 0;
}

.editor-view ul > li {
  list-style: disc;
  margin-left: 20px;
  padding: 3px 0;
}

.editor-view ol > li > p, .editor-view ul > li > p {
  padding: 0;
  margin: 0;
}

.editor-view table p {
  margin: 0;
  padding: 5px 0;
  font-size: 12px;
}

.editor-view table {
  border: 1px solid #444444;
  border-collapse: collapse;
}

.editor-view table th {
  border: 1px solid #444444;
  text-align: center;
  padding: 5px;
}

.editor-view table td {
  border: 1px solid #444444;
  padding: 5px;
}

.editor-view img {
  max-width: 100%;
  max-height: 100%;
  margin-bottom: 10px;
}

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
  padding: 0px 16px;
}


.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #B675FF;
  --bs-btn-border-color: #B675FF;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #ae67fd;
  --bs-btn-hover-border-color: #ae67fd;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #ae67fd;
  --bs-btn-active-border-color: #ae67fd;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #B675FF;
  --bs-btn-disabled-border-color: #B675FF;
}


.magazine-page {
  margin: 0 auto;
  max-width: 640px;
}

.magazine-page img {
  max-width: 100%;
  height: auto;
}

.block-paragraph p {
  padding: 0 20px;
}