/**
* CSS
* 
* @version 2.0
* @author Vaska 
*
* There are also some obscure rules in base.css
*/


/*
 html.wf-loading body {
  visibility: hidden;
}
*/


html.wf-loading body {
  opacity: 0;
  transition: opacity 0.3s ease-in;
}
html.wf-active body {
  opacity: 1;
}


@font-face {
  font-family: 'Sanjak';
  src: url('/font/Sanjak.woff2') format('woff2'),
       url('/fonts/Sanjak.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}


body {

font-family: "source-han-sans-kr-variable", sans-serif;
font-variation-settings: "wght" 400;


}



/* link scheme */
/* you can customize links further down the page too */
a:link { text-decoration: none; color: #000; }
a:visited { text-decoration: none; color: #000; }
a:hover { text-decoration: line-through;  color: #0000af;}
a:active { }
a img { border: none; }
audio:focus { outline: none; }

/* general styles */
small { font-size: 9px; }
code { font-family: monospace; }
blockquote { padding-left: 9px; }

/* headings */
h1 { font-size: 16px; margin-bottom: 1em; font-weight: bold; }
h2 { font-size: 16px; margin-bottom: 1em; font-weight: bold; }
h3 { font-size: 16px; margin-bottom: 1em; }
h4 { font-size: 16px; margin-bottom: 1em; }



/* paragraph width */
#index p {   margin-bottom: 1em;  }
#exhibit p, code, blockquote { width: auto; margin-bottom: 1em;  /* line-height: 1.3em; */ }



@media (max-width: 740px) {
  #exhibit p, code, blockquote {
    width: 90vw;
    font-size: 30px; /* optional */
    line-height: 1.4; /* optional for better readability */
  }
} 



/* highlighter style - maybe you want to change colors? */
.highlight { background: #ccff00; color: #000; }

/* never adjust the margin or padding here unless you seriously know what you are doing */
/* think #index .container and #exhibit .container for only padding adjustments */






#index { 
  width: 100vw;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding-top: 130px;
 
  background: transparent;
  font-size: clamp(17pt, 4vw, 28pt);
  line-height: 1.4em;
  min-height: 0;
  text-align: center; /* optional */

font-family: "source-han-sans-kr-variable", sans-serif;
font-variation-settings: "wght" 400;

}

#exhibit { margin: 0 0 0 0px; 

}

/* styling the index */
#index ul {  }
#index ul.section {  }
#index ul.subsection {  }

/* the follow rules for index are not required */
/* they are mostly for complex customization */
/* for tag display */
#index ul#all_tags { margin-bottom: 1em; }
#index ul#all_tags li { display: inline; margin-right: 3px; }
#index ul#all_tags li a {  }

/* styles for the section titles */
#index ul.section span.section_title, 
#index ul.section span.section_title a 
{  }

/* active section title */
#index span.active_section_title,
#index span.active_section_title a {    }

/* active exhibit title parts */
/* color of active exhibit title link and font-weight */
li.active a:link, li a.active, li.active a:hover, li a.active, li.active a:active, li a.active, 
li.active a:visited, li a.active, li span.active, #index ul.section li.active a:link, 
#index ul.section li.active a:hover, #index ul.section li.active a:active, #index ul.section li.active a:visited
{   }

/* additional #index options */
#index ul li .password a { /* background: url(../img/locked.gif) right center no-repeat; padding-right: 18px; */ }

/* the "new" indicator */
#index ul li sup.new_exhibit { color: #0c0; font-weight: bold; text-transform: uppercase; font-size: 8px; vertical-align: top; }
#index ul li sup.new_exhibit:before { color: #0c0; font-weight: bold; text-transform: uppercase; font-size: 8px; vertical-align: top; content: "New"; }
/* end styling for index */

/* links styles only for the #index region */
#index a:link {  } 
#index a:visited {  }
#index a:hover { } 
#index a:active {  } 

/* links styles only for the #exhibit region */
#exhibit a:link { text-decoration: underline; }
#exhibit a:visited {  }
#exhibit a:hover { text-decoration: none; } 
#exhibit a:active {  } 

/* links styles just for h1 title of site (your name/logo) */
#index h1 a { font-weight: normal; text-decoration: none; color: #000; }

/* this is where you adjust your paddings for #index and #exhibit together */
.container { padding: 15px 9px 15px 15px; }

/* this is where you pad them separately */
#index .container {  }
#exhibit .container {  }

/* size and style of titles and captions (not mobile though) */
.captioning { margin-top: 2px; }
.title { font-size: 0.7em; font-style: italic; line-height: 1.2em; }
.caption { font-size: 0.7em; font-style: italic; line-height: 1.2em; }



/* Applies to all scrollable elements */
::-webkit-scrollbar {
  width: 6px; /* vertical scrollbar width */
  height: 6px; /* horizontal scrollbar height */
}

/* Track (background of scrollbar) */
::-webkit-scrollbar-track {
  background: #fff;
}

/* Thumb (scroll handle) */
::-webkit-scrollbar-thumb {
  background: #0000af;
  border-radius: 0px;
}

/* On hover */
::-webkit-scrollbar-thumb:hover {
  background: #00ff00;
}




/* post it pop up */





















.sticky-note {

  font-family: 'Sanjak', sans-serif;
  
  position: relative;   /*fixed; */
  width: clamp(160px, 70vw, 650px);
  min-height: 150px;
  max-height: 70vh;
  overflow-y: auto;
  font-size: clamp(10px, 3vw, 15px);
 

  background: rgba(255, 255, 255, 0.9); 
  
  
  overflow-y: auto;
  padding: 30px;
  cursor: grab;


  z-index: 1000;
  border: 1px dotted #000;  /* Uncomment if needed */
  
  padding: 0px 30px 30px 30px;  /* Corrected syntax */
 

}



.sticky-note p {
  width: 100%;        /* Full width of the note */
  max-width: 100%;    /* Prevent overflow */
  margin: 0 0 1em 0;  /* Space between paragraphs */
  line-height: 1.55em;   /* Readable line spacing */
  word-wrap: break-word;
}

.sticky-note iframe {
  width: 100%;
  height: 50vh; /* Makes the PDF fit within 50% of the viewport height */
  border: none; /* Removes border around the iframe */

}


.sticky-note .close-btn {
  position: sticky;
  top: 0px;
  right: 0px;
  cursor: pointer;
  font-weight: bold;
  font-size: 40px;
  color: #0000af;
  background: transparent;
  
  line-height: 1;
  padding: 2 2 0px 2px; /* or even smaller like 1px 4px */
  z-index: 1000;
  display: inline-block;
  width: auto;
  height: auto;
}




.sticky-note .close-btn:hover {
  color: #00ff00;
}




.video-background {  background: rgba(38, 38, 38, 0.2);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}



.video-background iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  /* Force the iframe to always be big enough to cover the whole screen */
  min-width: 100vw;
  min-height: 100vh;
  width: 150vw;
  height: 150vh;

  border: none;
  pointer-events: none;
}




/* Disable drag behavior globally */
* {
  -webkit-user-drag: none;  /* Safari */
  -khtml-user-drag: none;   /* Old Konqueror */
  -moz-user-drag: none;     /* Firefox (legacy) */
  -ms-user-drag: none;      /* IE/Edge (legacy) */
  user-drag: none;          /* Standard (not widely supported) */
  
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;

 -webkit-tap-highlight-color: rgba(0,0,0,0); /* Removes tap flash on iOS Safari */
 
}

/* Prevent Safari drag color/opacity flash */
*:active {
  opacity: 1 !important;
  background: inherit !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}


/* Prevent sticky-note from changing appearance when clicked/dragged */
.sticky-note,
.sticky-note:active,
.sticky-note:focus,
.sticky-note:focus-visible {
  background: rgba(255, 255, 255, 0.96) !important;
  opacity: 1 !important;
  -webkit-tap-highlight-color: transparent !important;
}