/* =========================================
   GLOBAL UI VARIABLES
   Header controls shared vertical geometry.
========================================= */

:root {
  --site-header-height: 38px;
  --site-horizontal-padding: 14px;

  /*
    Shared content-canvas cap.
    Page content follows the live browser window continuously and stops
    widening at this value; shared navigation remains full-width.
  */
  --site-content-canvas-max-width: 2160px;

  /*
    Secondary toolbar starts in normal flow
    at header height + 18px.
    Change these values here only.
  */
  --secondary-nav-gap-after-header: 12px;
  --secondary-nav-margin-top:
    calc(
      var(--site-header-height)
      +
      var(--secondary-nav-gap-after-header)
    );

  --secondary-nav-margin-bottom: 12px;
  --secondary-nav-sticky-top:
    calc(
      var(--site-header-height)
      +
      1px
    );
}


/* =========================================
   RESET
========================================= */

* {
  box-sizing: border-box;
}


html,
body {
  margin: 0;
  padding: 0;
}


html {
  min-height: 100%;
}


body {
  min-height: 100vh;

  display: flex;
  flex-direction: column;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 16px;

  line-height: 1.25;

  color: #111;
}


a {
  color: inherit;
}



/* =========================================
   PROSE
   shared long-form text wrapping
========================================= */

.prose {
  word-break: normal;

  overflow-wrap: normal;

  hyphens: none;
}


html[lang="ko"] .prose {
  word-break: keep-all;

  overflow-wrap: normal;

  hyphens: none;
}



/* =========================================
   HEADER HOST
========================================= */

#siteHeader {
  position: relative;

  z-index: 30000;

  width: 100%;
}



/* =========================================
   SITE HEADER
   tracing-paper toolbar
========================================= */

.site-header {
  position: fixed;

  top: 0;
  left: 0;
  right: 0;

  z-index: 30000;

  height: var(--site-header-height);

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  padding:
    0 var(--site-horizontal-padding);

  background:
    rgba(
      245,
      245,
      245,
      0.72
    );

  backdrop-filter:
    blur(4px);

  -webkit-backdrop-filter:
    blur(4px);

  border-bottom:
    1px solid
    rgba(
      0,
      0,
      0,
      0.07
    );

  color: #111;

  font-size:
    clamp(
    16px,
    calc(14.1px + 0.134vw),
    17.5px
  );

  line-height: 1;

  pointer-events: none;
}



/* =========================================
   LEFT NAVIGATION
========================================= */

.site-navigation {
  display: flex;

  align-items: center;

  flex-wrap: nowrap;

  gap: 12px;

  min-width: 0;

  white-space: nowrap;

  pointer-events: auto;
}


.site-navigation a {
  display: inline-block;

  margin: 0;

  padding: 0;

  color: inherit;

  text-decoration: none;

  font-size: inherit;

  line-height: 1;

  font-weight: 400;

  white-space: nowrap;
}


.site-navigation a:hover {
  opacity: 0.5;
}



/* =========================================
   HOME
========================================= */

.site-name {
  font-weight: 700 !important;
}



/* =========================================
   RIGHT TOOLS
========================================= */

.site-tools {
  display: flex;

  align-items: center;

  justify-content: flex-end;

  flex-wrap: nowrap;

  flex-shrink: 0;

  gap: 10px;

  margin-left: auto;

  white-space: nowrap;

  pointer-events: auto;
}



/* =========================================
   SOCIAL ICONS
========================================= */

.site-icon-link {
  display: flex;

  align-items: center;

  justify-content: center;

  flex: 0 0 auto;

  width: 17px;
  height: 17px;

  margin: 0;
  padding: 0;

  color: #111;

  text-decoration: none;
}


.site-icon-link:hover {
  opacity: 0.5;
}


.site-icon-link svg {
  display: block;

  width: 16px;
  height: 16px;

  overflow: visible;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.4;

  stroke-linecap: round;

  stroke-linejoin: round;
}


.site-icon-link
.site-icon-fill {
  fill: currentColor;

  stroke: none;
}



/* =========================================
   LANGUAGE
========================================= */

.language-switcher {
  display: flex;

  align-items: center;

  flex-wrap: nowrap;

  gap: 4px;

  margin-left: 2px;

  white-space: nowrap;
}


.language-button {
  appearance: none;

  -webkit-appearance: none;

  display: inline;

  margin: 0;
  padding: 0;

  border: 0;

  background: transparent;

  color: #111;

  font: inherit;

  font-size: inherit;

  line-height: 1;

  cursor: pointer;

  opacity: 0.42;
}


.language-button:hover {
  opacity: 0.7;
}


.language-button.active {
  opacity: 1;
}


.language-separator {
  font-size: inherit;

  line-height: 1;
}



/* =========================================
   FOOTER HOST
========================================= */

#siteFooter {
  width: 100%;

  margin-top: auto;
}



/* =========================================
   SITE FOOTER
========================================= */

.site-footer {
  display: flex;

  justify-content: flex-end;

  width: 100%;

  padding:
    0
    18px
    18px;

  color: #111;

  font-size: 16px;

  line-height: 1.25;
}


.site-footer a {
  color: inherit;

  text-decoration: none;
}


.site-footer a:hover {
  opacity: 0.5;
}



/* =========================================
   TABLET
========================================= */

@media (max-width: 980px) {

  .site-header {
    gap: 12px;

    padding:
      0 10px;
  }


  .site-navigation {
    gap: 9px;
  }


  .site-tools {
    gap: 8px;
  }

}



/* =========================================
   MOBILE
========================================= */

@media (max-width: 760px) {

  .site-header {
    height: 38px;

    padding:
      0 9px;

    overflow: hidden;
  }


  .site-navigation {
    gap: 8px;

    overflow-x: auto;

    overflow-y: hidden;

    scrollbar-width: none;
  }


  .site-navigation::-webkit-scrollbar {
    display: none;
  }


  .site-navigation a {
    font-size: 14px;
  }


  .site-tools {
    gap: 7px;

    padding-left: 8px;

    background:
      rgba(
        245,
        245,
        245,
        0.32
      );
  }


  .site-icon-link {
    width: 15px;
    height: 15px;
  }


  .site-icon-link svg {
    width: 14px;
    height: 14px;
  }


  .language-button,
  .language-separator {
    font-size: 14px;
  }


  .site-footer {
    padding:
      0
      12px
      14px;

    font-size: 14px;
  }
  /* =========================================
     GLOBAL COLOR BACKGROUND
  ========================================= */

  html,
  body {
    min-height: 100%;
  }

  
}

/* =========================================
   SHARED PAGE CONTENT GUTTER
   Aligns page bodies with the fixed header.
========================================= */

.site-page-content {
  width: 100%;

  padding-left:
    var(--site-horizontal-padding);

  padding-right:
    var(--site-horizontal-padding);
}

@media (max-width: 800px) {

  .site-page-content {
    padding-left: 10px;
    padding-right: 10px;
  }

}

/* =========================================
   SHARED LONG-FORM PROSE
========================================= */

.prose {
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

html[lang="ko"] .prose {
  word-break: keep-all;
}