@font-face{ font-family: Helvetica-Bold;  src:URL(fonts/HelveticaLTStd-Bold.otf); }
@font-face{ font-family: Helvetica-Roman; src:URL(fonts/HelveticaLTStd-Roman.otf); }
@font-face{ font-family: Helvetica-Italic; src:URL(fonts/HelveticaLTStd-Obl.otf); }

/* ===== 공통 배경 레이어 (전체 화면 고정) ===== */
#backgroundimage,
.hero-bg,
.cover-bg,
#index-hero,
#index-overlay,
#backgroundvideo {
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  position: fixed;
  inset: 0;
  z-index: 0 !important;           /* 항상 뒤 */
  pointer-events: none !important;  /* 터치 막지 않음 */
}

/* 기본 배경(원하면 경로만 바꾸세요) */
#backgroundimage { background-image: url("/Content/Background03.jpg"); }

/* 스크롤바 & 타이포 */
html{ overflow: scroll !important; }
body::-webkit-scrollbar { width: 5px; }
body { scrollbar-width: thin; scrollbar-color: var(--thumbBG) var(--scrollbarBG); overflow: scroll !important; }
body::-webkit-scrollbar-track { background: var(--scrollbarBG); }
body::-webkit-scrollbar-thumb { background-color: var(--thumbBG); border-radius: 6px; border: 3px solid var(--scrollbarBG); }
html{ height:100vh; margin:0; overflow:hidden; --scrollbarBG:#CFD8DC; --thumbBG:#90A4AE; }
body{ height:100vh; min-height:100vh; margin:0; padding:0; }
img{ padding:2px; }
h1{font-family:Helvetica-Bold; margin-bottom:0; font-weight:100;}
h2{font-family:Helvetica-Roman; margin-top:0; font-weight:100; font-size:20px;}
h3{font-family:Helvetica-Bold; margin-bottom:0; font-weight:100; font-size:16pt;}
p {font-family:Helvetica-Roman; font-style:normal; font-weight:100;}
i {font-family:Helvetica-Italic;  font-style:normal;}
a {text-decoration:none;}

.work-item{margin-bottom:20px;}
.flex-container{display:flex; flex-direction:row; height:100%; width:100%}
.flex-container-col{display:block}
.navigation-container{min-width:max-content; padding-right:20px; padding-left:35px;}
.page-content{min-width:250px; overflow:auto; width:100%;}
.menu{margin-right:12px;}
.twentypercent{width:30%;}
.eightypercent{width:70%;}
.page-details{overflow:auto;}
.selected{text-decoration:underline; border-color:white !important; border-width:0;}
.selected:active,
.selected:link,
.selected:visited,
.selected:focus,
.selected:focus-within,
.selected:focus-visible{border-color:white !important; border-width:0;}

a:active, a:link, a:visited, a:focus, a:focus-visible{border-color:white !important; border-width:0;}
.padding{ padding-right:12px; padding-left:12px; }

.videocontainer{ position:relative; width:100%; height:0; padding-bottom:56.25%; }
.video{ position:absolute; top:0; left:0; width:100%; height:100%; }

a:link{ color:black; transition-duration:.5s; }
a:visited{ color:black; }
a:hover{ color:gray; transition-duration:.5s; }
a:active{ color:black; }

/* ===== 터치 가능하도록 상위 레이어 보장 ===== */
header, nav, .navigation-container, .page-content, .index-buttons {
  position: relative;
  z-index: 2;                        /* 배경보다 위 */
}
a, button { pointer-events: auto !important; }

/* ===== Work 목록 크게 + 빨간색 ===== */
#work .work-list{
  list-style:none;
  margin:1.25rem 0;
  padding-left:0;
}
#work .work-list li{ margin: .5rem 0; }
#work .work-list a{
  display:block;
  font-size:1.8rem;
  font-weight:800;
  color:#d10000;
  text-decoration:none;
  line-height:1.15;
}
#work .work-list a:hover,
#work .work-list a:focus{
  color:#a00000;
  text-decoration:underline;
}

/* ===== 모바일 대응 ===== */
@media only screen and (max-width: 800px) {
  #work { display:block !important; }
  .twentypercent{width:100%;}
  .eightypercent{width:100%;}
}
@media only screen and (max-width: 600px) {
  body{ padding:16px; }
  .flex-container{display:flex; flex-direction:column; height:auto;}
  .flex-container-col{display:flex; flex-direction:row; justify-content:flex-start; flex-wrap:wrap}
  .navigation-container{padding:0;}
  .page-content{padding-left:5px; padding-right:5px;}
  .twentypercent{width:100%;}
  .eightypercent{width:100%;}
  .page-details{padding-left:0;}
  .padding{ padding-right:0; padding-left:0; }
  #work .work-list a{ font-size:1.6rem; }
}