:root{
  --pad: 15px;
  --fs: 16px;
  --lh: 1.5;

  --leftW: 350px;
  --rightW: 350px;
  --rightComp: 8px;
}

*{ box-sizing:border-box; }
html, body{ height:100%; }
html, body { font-family: Helvetica, "Helvetica Neue", Arial, sans-serif; }

body{
  margin:0;
  padding:var(--pad);
  font-size:var(--fs);
  line-height:var(--lh);
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;  /* 예: 300, 400, 500 */  
  color:#000000;
  background:#ffffff;

  /* 핵심: 바깥 스크롤은 막고, 가운데만 스크롤 */
  overflow: hidden;
}

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

/* KO site: keep core UI labels in Helvetica */
html[lang="ko"] .h1,
html[lang="ko"] .h1 a,
html[lang="ko"] .navblock,
html[lang="ko"] .navblock a,
html[lang="ko"] .left .list li:nth-child(-n+2),
html[lang="ko"] .left .list li:nth-child(-n+2) a{
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
}

.shell{
  height: calc(100vh - (var(--pad) * 2));
  display:grid;
  grid-template-columns: var(--leftW) 1fr calc(var(--rightW) - var(--rightComp));
  gap: var(--gap);
  align-items:start;
}

/* Works / Contact pages (2 columns in markup, 3 columns in grid) */
.layout{
  height: calc(100vh - (var(--pad) * 2));
  display:grid;
  grid-template-columns: var(--leftW) 1fr calc(var(--rightW) - var(--rightComp));
  gap: var(--gap);
  align-items:start;
}
.layout > .left{ grid-column: 1; }
.layout > .right{ grid-column: 3; }

/* 왼쪽 칼럼: 고정 + 내부 스크롤 가능 */
.left{
  height: 100%;
  overflow:auto;
  scrollbar-gutter: stable;
  padding-right: 6px;
}

/* 가운데 칼럼: 독립 스크롤 */
.center{
  height: 100%;
  overflow:auto;
  scrollbar-gutter: stable;
  padding-right: 8px;
}

/* 오른쪽 칼럼: 고정 */
.right{
  height: 100%;
  overflow:auto;
  scrollbar-gutter: stable;
  padding-left: 6px;
  text-align:right;
}

.h1{ margin:0; }
.sectiontitle{ margin:0; }

.list{ margin:0; padding:0; list-style:none; }
.list li{ margin:2px 0; }

.navblock{ margin-bottom: 14px; }
.navblock a{ margin-left: 14px; }

.lang a{ display:block; }
.lang .active{ text-decoration: underline; }

.meta p{ margin:0 0 8px 0; }

.media img{
  display:block;
  width:100%;
  height:auto;
  margin: 18px 0;
}

/* CV rows: align year + text without affecting other pages */
.cv p{ margin:2px 0; }
.cv .cv-row{
  display:grid;
  grid-template-columns: 4ch 1fr;
  column-gap: 24px;
  margin: 2px 0;
}

/* Mobile layout */
@media (max-width: 1071px){
  body{ overflow:auto; }

  .shell,
  .layout{
    height:auto;
    display:grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "left right"
      "center center";
    align-items:start;
    gap: 10px;
  }

  .layout > .left{ grid-area:left; }
  .layout > .right{ grid-area:right; }

  .left{ grid-area:left; }
  .center{ grid-area:center; }
  .right{
    grid-area:right;
    text-align:right;
    padding-left: 0;
  }

  /* Layout pages (no center column): keep right visible, hide list */
  .layout > .left{
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }
  .layout > .right{
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }
  .layout.home .list{
    display:block;
  }
  .layout.home .list li:nth-child(n+3){ display:none; }

  .layout.cvpage .list{
    display:block;
  }
  .layout.cvpage .list li:nth-child(n+3){ display:none; }
  .layout.cvpage{ row-gap: calc(1em * var(--lh) + 4px); }

  /* Work detail pages: hide per-work links (enter via Works) */
  .shell .list li:nth-child(n+3){ display:none; }

  /* Work detail pages: match spacing (〇→CV) between Works and title */
  .shell{ row-gap: calc(1em * var(--lh) + 4px); }

  .left,
  .center,
  .right{
    min-width: 0;
    height:auto;
    overflow:visible;
    scrollbar-gutter: auto;
    padding-right: 0;
  }

  .navblock{ margin-bottom: 0; }
  .navblock a{ margin-left: 8px; }
}