/* ============================================
   YOUNGJI SOHN — MAIN STYLESHEET
   ============================================ */

/* --- RESET --- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* --- BASE --- */
body {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 15px;
  line-height: 1.5;
  color: #111;
  background: #333363;
  margin: 0;
  padding: 16px;
}

a { color: #003399; text-decoration: none; }
a:hover { color: #c00; text-decoration: underline; }

/* --- WIDTH CONTROL — change these to resize --- */
.page-wrapper { max-width: fit-content; width: 100%; margin: 0 auto; }
.col-sidebar  { width: 265px; flex-shrink: 0; }
.col-about    { flex: 1; min-width: 0; max-width: 400px; }
.col-papers   { flex: 1; min-width: 0; max-width: 400px; }
.col-wide     { width: 700px; }

/* --- NAVIGATION --- */
.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.nav-btn {
  display: inline-block;
  background: #942193;
  color: #fff;
  border: 1px solid #751a74;
  padding: 2px 8px;
  font-size: 11.5px;
  border-radius: 2px;
  text-decoration: none;
  margin-right: 4px;
}
.nav-btn:hover { background: #751a74; color: #fff; }

.toggle-btn {
  color: #aab;
  font-size: 11px;
  border: 1px solid #aab;
  padding: 2px 8px;
  border-radius: 3px;
  text-decoration: none;
  line-height: 1.2;
}
.toggle-btn:hover { color: #fff; border-color: #fff; text-decoration: none; }

/* --- GRID LAYOUTS --- */
.grid, .grid-2col {
  display: flex;
  gap: 6px;
  align-items: flex-start;
}
.col-about, .col-papers, .col-wide {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* --- SIDEBAR --- */
.box-side {
  background: #0F6068;
  color: #fff;
  border: 2px solid #0c4b51;
  border-bottom: 2.5px solid #09393e;
  border-right: 2.5px solid #09393e;
  padding: 20px 14px;
  text-align: center;
}
.box-side a { color: #ffd700; text-decoration: none; }
.box-side a:hover { color: #fff; text-decoration: underline; }

.name { font-size: 22px; font-weight: bold; margin-bottom: 10px; }

.photo img {
  width: 100%;
  max-width: 210px;
  border: 2px solid #555;
  display: block;
  margin: 0 auto 12px auto;
  -webkit-user-drag: none;
  user-select: none;
}
img, video {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
.affiliation { font-size: 14px; line-height: 1.4; margin-bottom: 16px; }
.contact-info { font-size: 14px; text-align: left; margin-bottom: 4px; }

.sidebar-links {
  font-size: 14px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}
.sidebar-links a { margin: 0 3px; text-decoration: none; }

/* --- CONTENT BOXES --- */
.box-cream {
  background: #f9f1dc;
  border: 2px solid #c4a86a;
  padding: 14px;
}
.box-cream p { margin: 0 0 8px 0; }

.box-light {
  background: #E5F1F1;
  border: 2px solid #8aabab;
  padding: 14px;
}

.box-header {
  background: #E6C843;
  border: 2px solid #b49e34;
  border-bottom: 2.5px solid #8a7a28;
  border-right: 2.5px solid #8a7a28;
  padding: 10px 14px;
  font-weight: bold;
  font-size: 18px;
}

.box-subtle-header {
  background: #f0ead6;
  border: 1px solid #c9b98a;
  padding: 8px 14px;
  font-weight: bold;
  font-size: 16px;
  color: #444;
}
.box-subtle {
  background: #fdfcf8;
  border: 1px solid #ddd;
  padding: 14px;
  font-size: 14px;
  line-height: 1.5;
}
.box-subtle p { margin: 0 0 8px 0; }

/* --- TYPOGRAPHY --- */
h2 {
  font-size: 17px;
  margin: 18px 0 8px 0;
  border-top: 1px solid #999;
  padding-top: 10px;
}
h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }

ul { margin: 6px 0; padding-left: 18px; }
li { margin-bottom: 5px; }

/* --- PAPERS --- */
.paper-entry { margin-bottom: 14px; }
.paper-links { font-size: 13px; }
.paper-status { font-size: 13px; font-style: italic; color: #555; }

.new-tag {
  background: #c00;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  padding: 1px 5px;
  border-radius: 2px;
  vertical-align: middle;
  margin-left: 4px;
}

.paper-links label {
  color: #003399;
  cursor: pointer;
}
.paper-links label:hover {
  color: #c00;
  text-decoration: underline;
}

.abstract {
  display: none;
  font-size: 14px;
  color: #444;
  margin-top: 6px;
  padding: 10px 10px 10px 13px;
  background: #f5f5f0;
  border-left: 3px solid #c9a200;
}

.abstract-toggle {
  display: none;
}
.abstract-toggle:checked + .abstract {
  display: block;
}

/* --- TOOLTIPS --- */
.tooltip-wrap { position: relative; }
.tooltip-text {
  display: none;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 3px;
  white-space: nowrap;
}
.tooltip-wrap:hover .tooltip-text { display: block; }
a.tooltip-wrap { position: relative; }

a.plain { color: inherit; text-decoration: none; }
a.plain:hover { color: #c00; text-decoration: underline; }

/* --- RESPONSIVE --- */
@media (max-width: 800px) {
  .page-wrapper { max-width: 100%; }
  .grid {
    display: grid;
    grid-template-columns: 265px 1fr;
    grid-template-rows: auto auto;
    gap: 6px;
  }
  .col-sidebar { grid-row: 1 / 3; }
  .col-about, .col-papers { min-width: 0; max-width: none; }
  .col-wide { width: auto; }
}

@media (max-width: 600px) {
  .page-wrapper { max-width: 100%; }
  .grid, .grid-2col {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .grid {
    grid-template-columns: none;
  }
  .col-sidebar { width: 100%; max-width: 265px; }
  .col-about, .col-papers, .col-wide { width: 100%; max-width: 500px; }
}

/* --- PRINT --- */
@media print {
  * { color: #000 !important; }
  body { background: #fff; padding: 0; font-size: 12px; }
  .grid, .grid-2col { max-width: 100%; gap: 10px; }
  .box-side, .box-cream, .box-light, .box-header, .box-subtle, .box-subtle-header {
    background: #fff;
    border: 1px solid #000;
  }
  .new-tag { background: #000; color: #fff !important; }
  .paper-status { color: #333 !important; }
  h2 { border-top: 1px solid #000; }
  .photo img { print-color-adjust: exact; }
  .nav-bar { display: none; }
}

/* --- B&W TOGGLE --- */
body.bw { background: #fff; }
body.bw .box-side {
  background: #fff;
  color: #000;
  border: 2px solid #000;
}
body.bw .box-side a { color: #003399; }
body.bw .box-cream {
  background: #fff;
  border: 2px solid #000;
}
body.bw .box-light {
  background: #fff;
  border: 2px solid #000;
}
body.bw .box-header {
  background: #fff;
  border: 2px solid #000;
}
body.bw .box-subtle, body.bw .box-subtle-header {
  background: #fff;
  border: 1px solid #000;
}
body.bw .name { color: #000; }
body.bw .affiliation { color: #000; }
body.bw .contact-info { color: #000; }
body.bw .sidebar-links { border-top: 1px solid #999; }
body.bw .sidebar-links a { color: #003399; }
body.bw .nav-btn { background: #fff; color: #942193; border: 1px solid #942193; }
body.bw .toggle-btn:hover { color: #003399; border-color: #003399; }
body.bw .abstract { background: #fff; border-left: 3px solid #000; }