/*

  레이아웃, 타이포그래피

*/

@import url('/assets/resources/fonts/SuisseIntl/SuisseIntl.css');
@import url('/assets/resources/fonts/SuisseIntl/SuisseIntlMono.css');
@import url('/assets/resources/fonts/OnulSusa60/OnulSusa60-Variable.css');
@import url('/assets/resources/fonts/Pretendard/Pretendard.css');
@import url('/assets/resources/fonts/Pretendard/PretendardJP.css');

:root {
  --emoji:
    'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Android Emoji';
  --sans-serif:
    'SuisseIntl', 'Susa60-Variable', 'OnulSusa60', 'Pretendard',
    'Pretendard-JP', var(--emoji), sans-serif;
  --monospace:
    'SuisseIntlMono', 'SF Mono', 'Consolas', 'Pretendard', 'Pretendard-JP',
    var(--emoji), monospace;
  --font-family: var(--sans-serif);
  --font-family-input: var(--monospace);
}

:root {
  --line-height: 1.8rem;
  --line-space: calc(var(--line-height) - 1rem);
  --half-line-space: calc(var(--line-space) / 2);
  --line-space-gap: calc(var(--line-height) - var(--half-line-space));
  --vertical-gap: var(--line-height);
  --half-vertical-gap: calc(var(--line-height) / 2);

  --scrollbar-bg: var(--light4);
  --scrollbar-fg: var(--gray3);
  --scrollbar-size: var(--half-line-space);
  --scrollbar-radius: 1rem;

  --paragraph-width: 36rem;
}
html {
  font-size: calc(16px + (100vw - 600px) / 600);
  /*font-size: 16px;*/
}
body {
  font-weight: 350;
  color: var(--fg);
  margin: 0;
  padding: 0;
  background: var(--bgt);
  /*
  scrollbar-width: 0.5rem;
  scrollbar-color: var(--scrollbar-fg) var(--scrollbar-bg);
  */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}
body * {
  font-size: 1rem;
  line-height: var(--line-height);
  text-align: left;
  box-sizing: border-box;
  vertical-align: baseline;
  letter-spacing: -0.01rem;
}
@media (max-width: 600px) {
  body * {
    letter-spacing: -0.02rem;
  }
}
/*
::-webkit-scrollbar {
  position: fixed;
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}
::-webkit-scrollbar-track {
  background: var(--scrollbar-bg);
}
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-fg);
  border-radius: var(--scrollbar-radius);
}
*/
[layer] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

p {
  margin: 0;
  display: block;
  font-size: 1rem;
  line-height: var(--line-height);
  text-align: inherit;
  word-break: keep-all;
  word-wrap: break-word;
  color: inherit;
  max-width: var(--paragraph-width);
}
p[wide],
p.wide {
  max-width: unset;
}
.right p {
  max-width: unset;
}
b {
  font-weight: 600;
}
a {
  display: inline-block;
  text-decoration-line: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25rem;
  color: inherit;
}
a[href]:hover {
  color: var(--fgt);
}
a[href]:hover [mixtype] {
  cursor: pointer;
}
.tag {
  display: inline-block;
  height: 1rem;
  padding: 0 0.35rem;
  border-radius: 0.25rem;
  font-size: 0.7rem;
  line-height: 0.93rem;
  background: transparent;
  color: var(--fg);
  vertical-align: baseline;
  position: relative;
  bottom: 0.1rem;
  border: solid 0.07rem var(--fg);
}
.tag:not([desc]):hover,
.tag[selected],
a:hover .tag {
  border-color: var(--fgt);
  color: var(--fgt);
  cursor: pointer;
}
a:hover .tag > [mixtype] {
  text-decoration: none;
}

hr {
  width: 100%;
  height: 1px;
  border: none;
  border-top: solid 1px var(--fg);
  margin-top: var(--half-line-space);
  margin-bottom: var(--half-line-space);
}
h1 {
  margin: 0;
  display: block;
  font-size: 2.5rem;
  line-height: calc(var(--line-height) * 2);
  font-weight: 500;
  text-align: left;
  word-break: keep-all;
  word-wrap: break-word;
  background: rgb(255, 0, 0, 0);
}
h2 {
  font-size: 1.75rem;
}
h3 {
  font-size: 1.5rem;
}
[a] p {
  background: rgba(255, 0, 255, 0.2);
}

img {
  display: block;
  margin-top: var(--half-line-space);
  margin-bottom: var(--half-line-space);
}

pre {
  margin: 0;
  font-family: var(--monospace);
  font-size: 0.9rem;
  line-height: calc(var(--line-height) * 0.75);
  padding-top: var(--half-line-space);
  padding-bottom: var(--half-line-space);
}

.outwrapper {
  width: 100%;
  padding: 0 var(--vertical-gap);
}
.inwrapper.set {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--vertical-gap);
}
.contentwrapper.side {
  width: calc((100% - calc(var(--vertical-gap) * 2)) / 8 * 2);
}
.contentwrapper.sidehalf {
  width: calc(
    (100% - calc(var(--vertical-gap) * 2)) / 8 * 5 + var(--vertical-gap)
  );
}
.contentwrapper.half {
  width: calc((100% - calc(var(--vertical-gap) * 2)) / 8 * 3);
}
.contentwrapper.full {
  width: calc(
    (100% - calc(var(--vertical-gap) * 2)) / 8 * 6 + var(--vertical-gap)
  );
}
.contentwrapper.wide {
  width: 100%;
}

@media (max-width: 900px) {
  .contentwrapper.side,
  .contentwrapper.sidehalf,
  .contentwrapper.full {
    width: 100%;
  }
  .contentwrapper.half {
    width: calc((100% - var(--vertical-gap)) / 2);
  }
}
@media (max-width: 600px) {
  .outwrapper {
    padding: 0 var(--half-vertical-gap);
  }
  .contentwrapper.half {
    width: 100%;
  }
}