/* Global variables */
:root{
  --card-scale: 1;
  --card-width: 420px;
}

/* 연구실 로고 및 타이틀 */
#sega-lab-logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 36px;
  gap: 6px;
}
.sega-logo-circle {
  background: linear-gradient(135deg, #ffd700 60%, #ffb300 100%);
  color: #18181c;
  font-weight: bold;
  font-size: 28px;
  border-radius: 50%;
  width: 74px;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.13);
  letter-spacing: 2px;
  margin-bottom: 2px;
}
.sega-lab-title {
  font-size: 16px;
  color: #ffd700;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.13);
  white-space: nowrap;
}

/* Layout basics */
html,body{height:100%; overflow-x:hidden; overflow-y:auto;}
body{
  margin:0;
  padding:12px 12px 24px 12px;
  font-family:Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background:#0b0b0d;
  color:#fff;
}

#canvas-container{margin-top:12px;}

/* Shared card sizing: ensures professor and student cards match exactly */
.student-card{ background:none; box-shadow:none; padding:0; margin-top:32px; margin-bottom:15px; }
.student-row{ display:flex; gap:24px; overflow:visible; }

.student-profile{
  display:flex;
  align-items:center;
  background:#20202a;
  border-radius:10px;
  padding:13px 18px;
  box-shadow:0 1px 6px rgba(0,0,0,0.10);
  width: var(--card-width);
  max-width: 100%;
  box-sizing: border-box;
  overflow: visible;
}
.student-photo{ width:90px; height:90px; border-radius:50%; object-fit:cover; margin-right:18px; border:2px solid #555; }
.student-info{ display:flex; flex-direction:column; min-width:0; }
.student-name{ margin:0 0 4px 0; font-size:18px; }
.student-title{ margin:0 0 4px 0; font-size:14px; color:#b0b0b0; }
.student-email{ margin:0; font-size:13px; color:#a0a0a0; }

/* Professor card uses same width for exact match */
#professor-card{
  display:flex;
  align-items:center;
  background:#18181c;
  border-radius:12px;
  padding:16px 20px;
  margin-bottom:18px;
  box-shadow:0 2px 8px rgba(0,0,0,0.12);
  width: var(--card-width);
  max-width:100%;
  box-sizing: border-box;
  position: relative;
  z-index: 800;
}
#professor-photo{ width:100px; height:100px; border-radius:50%; object-fit:cover; margin-right:18px; border:2px solid #444; }
#professor-card h2{ margin:0 0 4px 0; font-size:22px; }
#professor-title{ margin:0 0 4px 0; font-size:15px; color:#b0b0b0; }
#professor-email{ margin:0; font-size:14px; color:#a0a0a0; }

/* profile wrappers & button overlays */
.profile-wrap{ position:relative; display:inline-block; }
.profile-wrap > div[id$="-buttons"]{ position:absolute; left:0; top:100%; display:none; gap:8px; z-index:10; }
#professor-buttons{ display:none; z-index:9999 !important; }

/* minor responsive/scale support (kept simple) */
.profile-wrap, #professor-card { transform-origin: top center; transform: scale(var(--card-scale)); transition: transform 180ms ease; will-change: transform; }

/* Fade-in overlay for button groups */
.buttons-overlay{ opacity:0; transform:translateY(6px); transition: opacity 220ms ease, transform 220ms ease; visibility:hidden; display:flex; gap:8px; }
.buttons-overlay.visible{ opacity:1; transform:translateY(0); visibility:visible; }
.buttons-overlay button{ background:#ffd700; color:#23232b; border:none; padding:8px 12px; border-radius:6px; cursor:pointer; }

/* Professor intro panel (hidden by default) */
#professor-intro{ display:none; background:#23232b; color:#fff; padding:36px 32px; border-radius:18px; max-width:480px; width:90%; box-shadow:0 4px 32px #0008; text-align:left; margin:32px auto 0 auto; }

/* utility */
.student-name, .student-title, .student-email{ overflow-wrap: break-word; }

/* end of stylesheet */