@font-face {
  font-family: "Cardo";

  src:
    url("fonts/Cardo-Regular.ttf") format("truetype");

  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Cardo";

  src:
    url("fonts/Cardo-Bold.ttf") format("truetype");

  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Cardo";

  src:
    url("fonts/Cardo-Italic.ttf") format("truetype");

  font-style: italic;
  font-weight: 400;
  font-display: swap;
}


* {
  box-sizing: border-box;
}

:root {
  --ink: #171717;
  --paper: #ffffff;
  --page-background: #e9e9e9;
  --soft-gray: #e8e6e1;
  --line-color: #6d6d6d;

  --profile-width: 23%;
  --transition-time: 700ms;
}

html,
body {
  width: 100%;
  height: 100%;
}

html {
  overflow: hidden;
}

body {
  margin: 0;
  overflow: hidden;

  color: var(--ink);
  background: var(--page-background);

  font-family:
    "Cardo",
    Cardo,
    "Cardo Linotype",
    "Book Antiqua",
    Georgia,
    serif;
}

button,
a,
input,
textarea,
select {
  color: inherit;
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  text-decoration: none;
}

::selection {
  color: #ffffff;
  background: var(--ink);
}


.site-track {
  width: 200vw;
  height: 100vh;

  display: flex;

  transform: translateX(0);

  transition:
    transform var(--transition-time) cubic-bezier(0.76, 0, 0.24, 1);
}

body.show-articles .site-track {
  transform: translateX(-100vw);
}


.home-screen {
  flex: 0 0 100vw;

  width: 100vw;
  height: 100vh;

  display: grid;

  grid-template-columns:
    var(--profile-width) calc(100% - var(--profile-width));

  background: var(--paper);
}


.profile-panel {
  min-width: 0;
  height: 100vh;

  overflow-x: hidden;
  overflow-y: auto;

  background: var(--paper);
  border-right: 1px solid var(--line-color);

  scrollbar-width: none;

  -ms-overflow-style: none;
}

/* Chrome, Safari, Edge */

.profile-panel::-webkit-scrollbar {
  display: none;

  width: 0;
  height: 0;
}

.profile-content {
  padding: 42px 28px 100px;
}

.profile-image {
  width: 165px;
  aspect-ratio: 1 / 1;
  margin: 0 0 26px;

  overflow: hidden;
}

.profile-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}

.profile-name {
  padding: 0 4px 24px;

  border-bottom: 1px solid #aaaaaa;
}

.profile-name h1 {
  margin: 0;

  font-size: 17px;
  font-weight: 400;
}

.profile-name p {
  margin: 8px 0 0;

  color: #777777;

  font-size: 12px;
}

.profile-section {
  padding: 26px 4px;

  border-bottom: 1px solid #aaaaaa;
}

.profile-section h2 {
  margin: 0 0 20px;

  font-size: 15px;
  font-weight: 700;
}

.profile-section>p {
  margin: 0 0 18px;

  font-size: 15px;
  line-height: 1.2;
}

.cv-entry {
  margin-bottom: 30px;
}

.cv-entry:last-child {
  margin-bottom: 0;
}

.cv-entry .cv-date {
  margin: 0 0 7px;

  color: #666666;

  font-size: 12px;
}

.cv-entry h3 {
  margin: 0 0 9px;

  font-size: 15px;
  font-weight: 400;
}

.cv-entry p {
  margin: 0 0 12px;

  font-size: 14px;
  line-height: 1.2;
}

.profile-list {
  margin: 0;
  padding-left: 18px;
}

.profile-list li {
  margin-bottom: 9px;

  font-size: 14px;
  line-height: 1.25;
}

.contact-section {
  display: flex;
  flex-direction: column;

  gap: 10px;
}

.contact-section h2 {
  margin-bottom: 10px;
}

.contact-section a {
  width: fit-content;

  font-size: 14px;

  border-bottom: 1px solid transparent;
}

.contact-section a:hover,
.contact-section a:focus-visible {
  border-bottom-color: var(--ink);

  outline: none;
}


.network-panel {
  position: relative;

  min-width: 0;
  height: 100vh;

  overflow: hidden;

  background: var(--paper);
}

/* See All */

.see-all-button {
  position: absolute;
  top: 22px;
  right: 28px;
  z-index: 30;

  padding: 5px;

  background: transparent;
  border: 0;

  font-size: 15px;
}

.see-all-button:hover,
.see-all-button:focus-visible {
  text-decoration: underline;

  outline: none;
}

/* Archive */

.archive-label {
  position: absolute;
  right: 22px;
  bottom: 14px;
  z-index: 20;

  margin: 0;

  font-size: 13px;
}


.network-connections {
  position: absolute;
  inset: 0;
  z-index: 1;

  display: block;

  width: 100%;
  height: 100%;

  overflow: visible;

  pointer-events: none;

  shape-rendering: geometricPrecision;
}


.main-connector {
  stroke: var(--line-color);
  stroke-width: 1;

  vector-effect: non-scaling-stroke;
}


.submenu-connector {
  display: none;

  stroke: #888888;
  stroke-width: 1;

  stroke-dasharray: 1 4;
  stroke-linecap: round;

  vector-effect: non-scaling-stroke;
}


.network-panel.research-open .research-connector {
  display: block;
}


.network-panel.projects-open .project-connector {
  display: block;
}


.network-panel.all-open .submenu-connector {
  display: block;
}

.research-child,
.project-child,
.submenu-link {
  color: inherit;
  font: inherit;
  text-decoration: none;
}

.network-button {
  position: absolute;
  z-index: 10;

  display: flex;
  align-items: center;
  justify-content: center;

  min-width: 120px;
  min-height: 58px;

  padding: 12px 22px;

  background: var(--paper);
  border: 1px solid var(--line-color);

  font-size: 17px;

  transform:
    translate(-50%, -50%);

  transition:
    color 180ms ease,
    background-color 180ms ease,
    transform 180ms ease;
}

.network-button:hover,
.network-button:focus-visible,
.network-button.menu-active {
  background: var(--soft-gray);

  outline: none;

  transform:
    translate(-50%, -50%) scale(1.035);
}

.oval-button {
  border-radius: 50%;
}


.research-button {
  top: 43%;
  left: 48%;
}

.projects-button {
  top: 30%;
  left: 78%;
}

.articles-button {
  top: 61%;
  left: 79%;

  border-radius: 0;
}


.articles-button::after {
  content: "";

  position: absolute;
  inset: 6px -7px -7px 6px;
  z-index: -1;

  border: 1px solid var(--line-color);

  pointer-events: none;
}

/* Videos 오각형 */

.videos-button {
  top: 70%;
  left: 25%;

  min-width: 118px;
  min-height: 70px;

  border: 0;

  background: transparent;

  clip-path:
    polygon(50% 0%,
      100% 38%,
      82% 100%,
      18% 100%,
      0% 38%);
}

.videos-button::before {
  content: "";

  position: absolute;
  inset: 0;
  z-index: -2;

  background: var(--line-color);

  clip-path:
    polygon(50% 0%,
      100% 38%,
      82% 100%,
      18% 100%,
      0% 38%);
}

.videos-button::after {
  content: "";

  position: absolute;
  inset: 1px;
  z-index: -1;

  background: var(--paper);

  clip-path:
    polygon(50% 0%,
      100% 38%,
      82% 100%,
      18% 100%,
      0% 38%);

  transition: background-color 180ms ease;
}

.videos-button:hover::after,
.videos-button:focus-visible::after {
  background: var(--soft-gray);
}


.network-submenu {
  position: absolute;
  inset: 0;
  z-index: 8;

  visibility: hidden;
  opacity: 0;

  pointer-events: none;

  transition:
    visibility 200ms ease,
    opacity 200ms ease;
}

.network-submenu.submenu-visible {
  visibility: visible;
  opacity: 1;

  pointer-events: none;
}

.network-submenu.submenu-visible .submenu-link {
  pointer-events: auto;
}

.network-submenu a {
  position: absolute;

  padding: 5px;

  font-size: 15px;
  line-height: 1.15;

  background:
    rgba(255, 255, 255, 0.9);

  transform:
    translate(-50%, -50%);
}

.network-submenu a:hover,
.network-submenu a:focus-visible {
  text-decoration: underline;

  outline: none;
}

/* Research 하위 메뉴 좌표 */

.topic-inclusion {
  top: 43%;
  left: 18%;

  text-align: left;
}

.topic-value-chains {
  top: 31%;
  left: 22%;
}

.topic-state-market {
  top: 21%;
  left: 37%;
}

.topic-methodology {
  top: 30%;
  left: 53%;
}


.topic-sustainability {
  top: 14%;
  left: 81%;
}

.topic-public-affairs {
  top: 30%;
  left: 92%;
}


.video-url-link {
  position: absolute;
  top: 77%;
  left: 25%;
  z-index: 15;

  visibility: hidden;
  opacity: 0;

  color: #245cff;

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

  font-size: 12px;
  text-decoration: underline;

  transform:
    translate(-50%, -50%);

  pointer-events: none;

  transition:
    visibility 200ms ease,
    opacity 200ms ease;
}

.network-panel.all-open .video-url-link {
  visibility: visible;
  opacity: 1;

  pointer-events: auto;
}

.video-url-link:hover,
.video-url-link:focus-visible {
  color: #0037c7;

  outline: none;
}


.articles-direction-arrow {
  position: absolute;
  top: 61%;
  left: 89%;
  z-index: 12;

  visibility: hidden;
  opacity: 0;

  color: var(--line-color);

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

  font-size: clamp(10px, 4.5vw, 27px);
  line-height: 1;
  white-space: nowrap;

  transform: translate(-50%, -50%);

  pointer-events: none;

  transition:
    visibility 200ms ease,
    opacity 200ms ease,
    transform 300ms ease;
}

.network-panel.all-open .articles-direction-arrow {
  visibility: visible;
  opacity: 1;

  transform:
    translate(-45%, -50%);
}


.articles-screen {
  position: relative;

  flex: 0 0 100vw;

  width: 100vw;
  height: 100vh;

  overflow: hidden;

  background: #ffffff;
  border-left: 1px solid #777777;
}



.back-home-button {
  position: absolute;
  top: 17px;
  left: 20px;
  z-index: 50;

  padding: 4px;

  background: rgba(255, 255, 255, 0.9);
  border: 0;

  font-size: 12px;

  cursor: pointer;
}

.back-home-button:hover,
.back-home-button:focus-visible {
  text-decoration: underline;

  outline: none;
}


.articles-screen-label {
  position: absolute;
  top: 18px;
  right: 22px;
  z-index: 50;

  font-size: 10px;
  letter-spacing: 0.06em;
}


.articles-scroll {
  width: 100%;
  height: 100%;

  overflow-x: auto;
  overflow-y: hidden;

  outline: none;

  overscroll-behavior: contain;

  scrollbar-width: none;
}

.articles-scroll::-webkit-scrollbar {
  display: none;

  width: 0;
  height: 0;
}



.articles-rail {
  height: 100%;

  display: flex;
  align-items: stretch;

  width: max-content;
}



.archive-article {

  flex: 0 0 auto;
  flex: 0 0 clamp(820px, 82vw, 1100px);

  width: max-content;
  width: clamp(820px, 82vw, 1100px);
  height: 100%;

  display: flex;
  display: grid;
  grid-template-columns:
    minmax(300px, 36%)
    minmax(480px, 64%);

  border-right: 1px solid #8a8a8a;
}



.archive-overview {
  flex: 0 0 clamp(320px, 31vw, 430px);
  min-width: 0;

  width: clamp(320px, 31vw, 430px);
  min-width: 320px;

  display: flex;
  flex-direction: column;

  padding: 68px 7% 42px;
  padding: 58px 18px 32px;

  background: #ffffff;
}

.archive-title {
  margin: 0 0 3px;

  font-size: clamp(19px, 2vw, 28px);
  font-weight: 700;
  line-height: 1.05;
}

.archive-date {
  margin: 0 0 22px;

  font-size: 10px;
}

.archive-image {
  width: 58%;
  max-width: 250px;

  margin:
    0 0 24px auto;
}

.archive-image img {
  display: block;

  width: 100%;
  height: auto;
  max-height: 310px;

  object-fit: cover;
}

.archive-description {
  max-width: 43ch;
  margin: 0;

  font-size: 13px;
  line-height: 1.3;
}



.archive-summary {
  flex: 0 1 auto;
  min-width: 0;
  width: 100%;
  max-width: none;

  width: fit-content;
  min-width: min(520px, 62vw);
  max-width: min(70vw, 900px);

  padding: 18px 4% 16px;

  text-align: justify;
  text-justify: inter-word;

  hyphens: auto;
  -webkit-hyphens: auto;

  background: #e9e9e9;
}

.archive-summary p {
  width: 100%;
  max-width: none;
  margin: 0 0 12px;

  text-align: justify;
  line-height: 1.35;

  font-size: 13px;

  overflow-wrap: break-word;
}

.archive-summary p:last-child {
  margin-bottom: 0;
}



.articles-scroll-guide {
  position: absolute;
  right: 20px;
  bottom: 14px;
  z-index: 50;

  margin: 0;

  padding: 4px 6px;

  background:
    rgba(255, 255, 255, 0.85);

  font-size: 9px;
  letter-spacing: 0.06em;

  pointer-events: none;
}


.articles-end {
  flex: 0 0 min(38vw, 520px);

  width: min(38vw, 520px);
  height: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 20px;
  padding: 40px;

  color: #171717;
  background: #ffffff;

  border-right: 1px solid #777777;

  text-align: center;
}

.articles-end p {
  margin: 0;

  font-size: clamp(20px, 9vw, 50px);
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: -0.06em;
}

.articles-end span {
  max-width: 28ch;

  font-size: 13px;
  line-height: 1.35;
}

.archive-link {
  display: inline-block;

  width: fit-content;
  margin-top: 20px;

  color: var(--ink);

  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.archive-link:hover,
.archive-link:focus-visible {
  opacity: 0.55;
  outline: none;
}



@media (max-width: 1100px) {
  .archive-overview{
    padding-top: 62px;
  }

  .archive-summary {
    padding:
      18px
      4%
      16px;

    text-align: justify;
    text-justify: inter-word;

    hyphens: auto;
    -webkit-hyphens: auto;

  }

  .archive-title {
    font-size: 20px;
  }

  .archive-description,
  .archive-summary p {
    font-size: 12px;
  }
}


@media (max-width: 1100px) {
  :root {
    --profile-width: 28%;
  }

  .network-button {
    min-width: 100px;
    min-height: 50px;

    padding: 10px 17px;

    font-size: 15px;
  }

  .network-submenu a {
    font-size: 13px;
  }

  .video-url-link {
    font-size: 10px;
  }
}


@media (max-width: 760px) {

  html,
  body {
    height: auto;
  }

  html {
    overflow-x: hidden;
    overflow-y: auto;
  }

  body {
    overflow-x: hidden;
    overflow-y: auto;
  }

  .site-track {
    width: 200vw;
    height: auto;
    min-height: 100vh;
  }

  .home-screen {
    height: auto;
    min-height: 100vh;

    display: flex;
    flex-direction: column;
  }

  .profile-panel,
  .profile-content {
    display: contents;
  }

  .profile-image {
    order: 1;

    width: 140px;
    margin: 30px 22px 24px;
  }

  .profile-name {
    order: 2;

    margin: 0 22px;
    padding: 0 4px 24px;
  }

  .about-section {
    order: 3;

    margin: 0 22px;
    padding: 26px 4px;
  }

  .network-panel {
    order: 4;

    width: 100%;
    height: 650px;

    border-top: 1px solid var(--line-color);
    border-bottom: 1px solid var(--line-color);
  }

  .profile-section:not(.about-section) {
    order: 5;

    margin: 0 22px;
    padding: 26px 4px;
  }

  .see-all-button {
    font-size: 10px;
  }


  .research-button {
    top: 43%;
    left: 48%;
  }

  .projects-button {
    top: 30%;
    left: 78%;
  }

  .articles-button {
    top: 61%;
    left: 79%;
  }

  .videos-button {
    top: 75%;
    left: 22%;
  }

  .topic-inclusion {
    top: 43%;
    left: 18%;
  }

  .topic-value-chains {
    top: 31%;
    left: 22%;
  }

  .topic-state-market {
    top: 21%;
    left: 37%;
  }

  .topic-methodology {
    top: 30%;
    left: 53%;
  }

  .topic-sustainability {
    top: 14%;
    left: 81%;
  }

  .topic-public-affairs {
    top: 40%;
    left: 82%;

    width: max-content;
    text-align: center;
  }

  .video-url-link {
    top: 84%;
    left: 22%;

    max-width: 210px;

    overflow-wrap: anywhere;

    font-size: 10px;
  }


  .articles-scroll {
    width: 100%;
    height: 100%;

    overflow-x: hidden;
    overflow-y: auto;

    scroll-snap-type: none;

    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
  }

  .articles-scroll::-webkit-scrollbar {
    display: none;
  }


  /*
    가로 Rail을 세로 방향으로 변경
  */

  .articles-rail {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    width: 100%;
    height: auto;
    min-height: 100%;
  }



  .archive-article {
    flex: none;

    display: block;

    width: 100%;
    max-width: none;
    height: auto;

    overflow: visible;

    border-right: 0;
    border-bottom:
      1px solid var(--line-color);
  }

  .archive-overview {
    width: 100%;
    max-width: none;
    min-height: 0;

    padding:
      64px 16px 32px;

    background: #ffffff;
  }



  .archive-image {
    width: min(72%, 320px);
    max-width: none;

    margin:
      10px auto 28px;
  }

  .archive-image img {
    width: 100%;
    height: auto;
    max-height: none;

    object-fit: contain;
  }



  .archive-title {
    font-size: 22px;
    line-height: 1.08;
  }

  .archive-date {
    margin-bottom: 25px;

    font-size: 10px;
  }



  .archive-description {
    max-width: none;

    font-size: 14px;
    line-height: 1.4;
  }


  .archive-summary {
    flex: none;

    width: 100%;
    max-width: none;
    min-width: 0;
    height: auto;
    min-height: 0;

    padding:
      24px 18px 30px;
    
    overflow: visible;

    background: #e9e9e9;
  }

  .archive-summary p {
    width: 100%;
    max-width: none;
    margin: 0 0 12px;

    font-size: 14px;
    line-height: 1.45;
  }



  .articles-end {
    flex: none;

    width: 100%;
    height: 55vh;
    min-height: 360px;

    border-right: 0;
    border-bottom:
      1px solid var(--line-color);
  }



  .articles-scroll-guide {
    display: none;
  }
}


@media (prefers-reduced-motion: reduce) {
  .site-track {
    transition: none;
  }

  *,
  *::before,
  *::after {
    transition-duration:
      0.01ms !important;
  }
}