:root{
  --bg:#F4F7F8; --surface:#FFFFFF; --ink:#10222C; --ink-soft:#51646F;
  --accent:#0B7C7C; --accent-deep:#075B5B; --line:#DCE4E7;
  --danger:#B4463C;
  --mono:'IBM Plex Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:Pretendard,-apple-system,sans-serif;background:var(--bg);color:var(--ink);line-height:1.65}
.wrap{max-width:1040px;margin:0 auto;padding:0 24px}

header{position:sticky;top:0;background:rgba(244,247,248,.88);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:60px;padding:10px 0;gap:12px 16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.01em;text-decoration:none;color:var(--ink);white-space:nowrap;flex-shrink:0}
.nav .links a{color:var(--ink-soft);text-decoration:none;font-size:.88rem;margin-left:14px;white-space:nowrap}
.nav .links a:hover{color:var(--accent)}
.nav .links a.cta{color:#fff;background:var(--accent);padding:8px 16px;border-radius:8px;font-weight:600}
.nav .links a.cta:hover{background:var(--accent-deep)}
.nav .links .who{font-family:var(--mono);font-size:.78rem;color:var(--accent);margin-left:14px;white-space:nowrap}

.btn{display:inline-block;text-decoration:none;font-weight:600;border-radius:9px;padding:12px 22px;font-size:.95rem;border:none;cursor:pointer;font-family:inherit}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-deep)}
.btn-ghost{border:1px solid var(--line);color:var(--ink);background:var(--surface)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-sm{padding:6px 12px;font-size:.82rem;border-radius:7px}
.btn-danger{background:var(--danger);color:#fff}

.eyebrow{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;color:var(--accent);margin-bottom:18px}
h1.display{font-size:clamp(2rem,5vw,3.1rem);font-weight:800;letter-spacing:-.03em;line-height:1.25;max-width:640px}
h1.display em{font-style:normal;color:var(--accent)}
h2{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;margin-bottom:14px}

section{padding:64px 0;border-top:1px solid var(--line)}
.sec-label{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;color:var(--accent);margin-bottom:26px}
.sec-label::before{content:"";width:11px;height:12px;background:var(--accent);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:8px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:24px}
.card h3{font-size:1.02rem;font-weight:700;margin-bottom:8px}
.card p{font-size:.92rem;color:var(--ink-soft)}
.card .tag{font-family:var(--mono);font-size:.72rem;color:var(--accent);display:block;margin-bottom:10px}

/* 로그인/가입 폼 */
.auth-box{max-width:400px;margin:70px auto;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:36px}
.auth-box h1{font-size:1.35rem;font-weight:800;margin-bottom:6px}
.auth-box .sub{color:var(--ink-soft);font-size:.9rem;margin-bottom:24px}
.field{margin-bottom:16px}
.field label{display:block;font-size:.85rem;font-weight:600;margin-bottom:6px}
.field input{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:9px;font-size:.95rem;font-family:inherit;background:var(--bg)}
.field input:focus{outline:2px solid var(--accent);border-color:transparent}
.auth-box .btn{width:100%;margin-top:6px}
.auth-box .alt{margin-top:18px;font-size:.86rem;color:var(--ink-soft);text-align:center}
.auth-box .alt a{color:var(--accent)}
.alert{padding:12px 14px;border-radius:9px;font-size:.87rem;margin-bottom:18px}
.alert.err{background:#FBEDEB;color:var(--danger);border:1px solid #EAC8C4}
.alert.ok{background:#E8F4F1;color:var(--accent-deep);border:1px solid #C6E2DD}

/* 관리자 테이블 */
table.users{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
table.users th,table.users td{padding:12px 14px;text-align:left;font-size:.9rem;border-bottom:1px solid var(--line)}
table.users th{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--ink-soft);background:var(--bg)}
table.users tr:last-child td{border-bottom:none}
.badge{font-family:var(--mono);font-size:.7rem;padding:3px 9px;border-radius:20px}
.badge.wait{background:#FDF3E3;color:#9A6B14}
.badge.ok{background:#E8F4F1;color:var(--accent-deep)}
.badge.admin{background:#EAEFF8;color:#2D4A8A}
.row-actions{display:flex;gap:6px;flex-wrap:wrap}
.row-actions form{display:inline}
.pwform{display:flex;gap:6px;margin-top:6px}
.pwform input{padding:6px 9px;border:1px solid var(--line);border-radius:7px;font-size:.8rem;width:130px}

footer{padding:36px 0;color:var(--ink-soft);font-size:.85rem;border-top:1px solid var(--line)}

.field select{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:9px;font-size:.95rem;font-family:inherit;background:var(--bg);color:var(--ink)}
.field select:focus{outline:2px solid var(--accent);border-color:transparent}

/* ── 소개 페이지 공통 ── */
.page-head{padding:56px 0 8px}
.page-head .lead{margin-top:14px;max-width:640px;color:var(--ink-soft)}
.person-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:8px}
.person{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:22px;text-align:center}
.person img{width:140px;aspect-ratio:13/16;border-radius:10px;object-fit:cover;object-position:center;margin:0 auto 14px;display:block;background:var(--bg)}
.person .ph{width:140px;aspect-ratio:13/16;border-radius:10px;margin:0 auto 14px;background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--line);font-size:2rem}
.person h3{font-size:1.02rem;font-weight:700}
.person .role{font-family:var(--mono);font-size:.72rem;color:var(--accent);margin-top:4px}
.person .info{font-size:.85rem;color:var(--ink-soft);margin-top:8px;line-height:1.5}
.pub-list{list-style:none;margin-top:8px}
.pub-list li{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:18px 20px;margin-bottom:12px}
.pub-list .yr{font-family:var(--mono);font-size:.72rem;color:var(--accent)}
.pub-list .ti{font-weight:700;margin:4px 0 2px}
.pub-list .au{font-size:.87rem;color:var(--ink-soft)}
.pub-list .jo{font-size:.85rem;color:var(--ink-soft);font-style:italic;margin-top:2px}
.pub-list a{color:var(--accent);font-size:.82rem;text-decoration:none}
.pub-list a:hover{text-decoration:underline}
.cv{max-width:720px}
.cv h3{font-size:1.05rem;font-weight:800;margin:28px 0 10px;color:var(--accent-deep)}
.cv ul{list-style:none}
.cv li{padding:7px 0;border-bottom:1px dashed var(--line);font-size:.93rem;display:flex;gap:16px}
.cv li .yr{font-family:var(--mono);font-size:.8rem;color:var(--accent);min-width:96px}
.pi-card{display:flex;gap:32px;align-items:flex-start;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:32px;margin-top:8px}
.pi-card img{width:160px;height:200px;object-fit:cover;border-radius:10px;background:var(--bg)}
.pi-card .ph{width:160px;height:200px;border-radius:10px;background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--line);font-size:3rem}
.pi-card h2{margin-bottom:4px}
.pi-card .role{font-family:var(--mono);font-size:.78rem;color:var(--accent)}
.pi-card .bio{margin-top:14px;color:var(--ink-soft);max-width:520px}
.pi-card .contact{margin-top:14px;font-size:.88rem;color:var(--ink-soft)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:8px}
.contact-info{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:28px}
.contact-info dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--accent);margin-top:18px}
.contact-info dt:first-child{margin-top:0}
.contact-info dd{margin-top:4px;font-size:.95rem}
.map-box{border:1px solid var(--line);border-radius:12px;overflow:hidden;min-height:340px}
.map-box iframe{width:100%;height:100%;min-height:340px;border:0;display:block}
@media (max-width:800px){.contact-grid{grid-template-columns:1fr}}
.nav .links{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:6px 0;row-gap:8px;flex:1;min-width:0}

/* 내비게이션 버튼형 링크 */
.nav .links a.navbtn{margin-left:6px;padding:7px 12px;border:1px solid var(--line);white-space:nowrap;
  border-radius:8px;background:var(--surface);color:var(--ink);font-weight:600;font-size:.88rem}
.nav .links a.navbtn:hover{border-color:var(--accent);color:var(--accent)}
.nav .links a.navbtn.cta{background:var(--accent);border-color:var(--accent);color:#fff}
.nav .links a.navbtn.cta:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff}

/* 현재 페이지 표시: 활성 메뉴만 청록색 채움 */
.nav .links a.navbtn.active{background:var(--accent);border-color:var(--accent);color:#fff}
.nav .links a.navbtn.active:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff}

/* ── 모바일 대응 ─────────────────────────── */
.menu-toggle{display:none;background:var(--surface);border:1px solid var(--line);
  border-radius:8px;padding:7px 10px;cursor:pointer;color:var(--ink)}
.menu-toggle:active{border-color:var(--accent);color:var(--accent)}

@media (max-width:860px){
  .menu-toggle{display:block;margin-left:auto}
  .nav{justify-content:flex-start;flex-wrap:wrap}
  .nav .page-links{display:contents}
  /* 메뉴: 2열 그리드로 압축(세로 길이 절반) + 화면 넘으면 메뉴 자체 스크롤 */
  .nav .links{display:none;width:100%;flex-basis:100%;padding:6px 0 12px;
    max-height:calc(100vh - 80px);overflow-y:auto;-webkit-overflow-scrolling:touch;
    overscroll-behavior:contain}
  /* 2열 배치. 그리드 대신 flex를 써서 항목 수가 홀수여도 마지막 항목이
     한쪽으로 치우치지 않고 가운데 놓이게 한다. */
  .nav .links.open{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
    align-content:flex-start}
  .nav .links.open > *{flex:1 1 calc(50% - 4px);max-width:calc(50% - 4px);
    min-width:0}
  .nav .links a.navbtn{display:block;margin:0;text-align:center;padding:11px 6px;
    font-size:.9rem;width:100%;box-sizing:border-box;white-space:normal}
  .nav .links a:not(.navbtn){margin:0;text-align:center;padding:10px;font-size:.9rem}
  /* 연구실 소개 버튼: 다른 버튼과 같은 한 칸. 하위 드롭다운 목록은 모바일에서 숨김(세로 축소) */
  .nav .links .navdrop{display:block;width:100%}
  .nav .links .navdrop > a.navbtn{display:block;width:100%;box-sizing:border-box}
  .nav .links .navdrop-menu{display:none}
  /* 로그인/유저 영역: 맨 위로(order) — 첫 행 = 이름(왼쪽) | 로그아웃(오른쪽).
     비로그인은 아래 정렬 보정 블록에서 회원가입(왼쪽)·로그인(오른쪽). */
  .nav .user-group{display:contents}
  .nav .user-group a.navbtn,.nav .user-group .navbtn{display:block;
    flex:1 1 calc(50% - 4px);max-width:calc(50% - 4px);
    box-sizing:border-box;text-align:center;margin:0;order:-1;
    background:rgba(11,124,124,.07);border-color:var(--accent);font-weight:700}
  /* 로그인 상태: 이름은 한 줄 전체, 그 아래 로그아웃 */
  .nav .user-group .who{display:block;flex:1 1 100%;max-width:100%;
    text-align:left;padding:10px 0;order:-3;font-size:.85rem;min-width:0;
    align-self:center}
  /* 하위 메뉴를 감춘 드롭다운도 다른 버튼과 같은 한 칸 */
  .nav .links .navdrop{flex:1 1 calc(50% - 4px);max-width:calc(50% - 4px);
    display:block}
  .nav .links .navdrop > a.navbtn{width:100%;max-width:100%}
  /* page-links는 display:contents라 자식이 직접 배치된다 */
  .nav .page-links > *{flex:1 1 calc(50% - 4px);max-width:calc(50% - 4px)}

  .wrap{padding:0 18px}
  .hero{padding:64px 0 56px !important}
  section{padding:44px 0}
  .auth-box{margin:36px 16px;padding:26px 20px;max-width:none}
  .pi-card{padding:22px;gap:20px}
  .pi-card img,.pi-card .ph{width:120px;height:150px}
  .lecture-banner{padding:26px}
  footer .wrap{flex-direction:column;gap:6px}

  /* 표는 가로 스크롤 (회원관리·로그·목록 편집 등 모든 넓은 표) */
  table.users,table.utable,table.logtable,table.ltable{
    display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  table.users th,table.users td{white-space:nowrap}

  /* 관리자 바: 모바일에서 가로 스크롤로 정돈 */
  .admin-bar .wrap{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    justify-content:flex-start;padding-left:16px;padding-right:16px}
  .admin-bar .navbtn{flex-shrink:0}

  /* 히어로 제목이 화면 끝에 붙지 않도록 */
  h1.display{word-break:keep-all;overflow-wrap:break-word}

  /* 연구분야/일반 카드 그리드는 1열 */
  .grid{grid-template-columns:1fr}
}

@media (max-width:600px){
  h1.display{font-size:1.7rem}
  .hero .actions{flex-direction:column}
  .hero .actions .btn{text-align:center}
  .person-grid{grid-template-columns:1fr 1fr}
}


/* 헤더 가로선 바로 아래의 관리자 바 */
.admin-bar{background:rgba(11,124,124,.06);border-bottom:1px solid var(--line)}
.admin-bar .wrap{display:flex;align-items:center;gap:8px;padding-top:8px;padding-bottom:8px;
  justify-content:center;flex-wrap:wrap}
.admin-bar .navbtn{margin-left:0;font-size:.84rem;padding:6px 11px;text-decoration:none;
  background:var(--surface);border:1px solid rgba(11,124,124,.28);border-radius:8px;
  color:var(--ink);font-weight:600}
.admin-bar .navbtn:hover{border-color:var(--accent);color:var(--accent)}
.admin-bar .navbtn.active{background:var(--accent);border-color:var(--accent);color:#fff}
@media (max-width:860px){
  .admin-bar .wrap{justify-content:center}
}

/* ── 헤더 한 줄 유지 (메뉴 중앙 정렬) ── */
@media (min-width:861px){
  .nav{flex-wrap:nowrap}
  .nav .links{flex-wrap:nowrap;gap:5px;min-width:0;justify-content:center}
  .nav .page-links{display:flex;flex-wrap:nowrap;gap:5px;align-items:center;
    margin:0 auto;justify-content:center}   /* 중앙 정렬 */
  .nav .links a.navbtn{padding:6px 10px;font-size:.82rem;margin-left:0}
  .nav .links a.navbtn.ghost{padding:6px 9px;font-size:.8rem}
  .nav .user-group{gap:6px;flex-shrink:0}   /* 오른쪽 끝 고정 */
  .nav .user-group .who{font-size:.76rem}
  .brand{font-size:.98rem;flex-shrink:0}
}
@media (min-width:861px) and (max-width:1180px){
  .nav .links a.navbtn{padding:5px 8px;font-size:.78rem}
  .brand span,.brand{font-size:.92rem}
}

/* ── PI 소개 · 연구분야/키워드/이슈/전문분야 표 ── */
.pi-topics{margin-top:28px;border-top:1px solid var(--line)}
.pi-topics .topic-row{display:flex;gap:20px;padding:16px 4px;border-bottom:1px solid var(--line);align-items:flex-start}
.pi-topics .topic-label{flex:0 0 120px;font-weight:800;color:var(--ink);text-align:center;padding-top:1px}
.pi-topics .topic-val{color:var(--ink-soft);line-height:1.7}
.pi-topics .topic-list{margin:0;padding:0;list-style:none;color:var(--ink-soft);line-height:1.9}
.pi-topics .topic-list li{position:relative;padding-left:20px}
.pi-topics .topic-list li::before{content:'○';position:absolute;left:0;color:var(--accent);font-size:.8rem;top:3px}
@media (max-width:640px){
  .pi-topics .topic-row{flex-direction:column;gap:6px}
  .pi-topics .topic-label{flex-basis:auto;text-align:left}
}

/* ── 홈 히어로 그래픽 반응형 ── */
@media (max-width:820px){
  .hero-art{opacity:.35;width:420px !important;right:-120px !important;top:20px !important}
}
@media (max-width:560px){
  .hero-art{display:none}
}

/* ── 연구실 소개 hover 드롭다운 ── */
.navdrop{position:relative;display:inline-flex;align-items:center}
/* 드롭다운 안의 메뉴 버튼도 다른 버튼과 동일한 높이로 */
.navdrop > a.navbtn{margin-left:6px}
.navdrop-menu{position:absolute;top:100%;left:0;min-width:230px;
  background:rgba(255,255,255,.97);backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid rgba(16,34,44,.10);border-radius:12px;box-shadow:0 12px 32px rgba(16,34,44,.14);
  padding:8px;margin-top:10px;opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;z-index:120}
.navdrop:hover .navdrop-menu,.navdrop:focus-within .navdrop-menu{opacity:1;visibility:visible;transform:translateY(0)}
/* 버튼과 드롭다운 사이 간격에서도 hover가 끊기지 않도록 투명 브릿지 */
.navdrop-menu::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
.navdrop-title{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--accent);
  padding:6px 10px 8px;border-bottom:1px solid rgba(16,34,44,.1);margin-bottom:4px}
.navdrop-menu a{display:block;padding:8px 10px;border-radius:8px;text-decoration:none;
  color:var(--ink);font-size:.86rem;font-weight:600;white-space:nowrap}
.navdrop-menu a:hover{background:rgba(11,124,124,.12);color:var(--accent-deep)}
/* 모바일: 드롭다운을 인라인 세로 목록으로 */
@media (max-width:860px){
  .navdrop-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:none;border-left:2px solid var(--line);border-radius:0;margin:2px 0 6px 14px;padding:2px 0}
  .navdrop-title{display:none}
  .navdrop-menu a{font-size:.82rem;color:var(--ink-soft);padding:6px 10px}
}

/* ── 이미지 유출 방지 (사용자 선택/드래그 억제) ── */
img{-webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none;
  -webkit-user-select:none;user-select:none}

/* ── 서식 텍스트 안의 글머리표: 카드형이 아닌 단순 목록으로 표시 ── */
.pub-list .jo ul{list-style:disc;padding-left:22px;margin:4px 0}
.pub-list .jo ol{list-style:decimal;padding-left:22px;margin:4px 0}
.pub-list .jo li{background:none;border:none;border-radius:0;padding:1px 0;
  margin:0 0 2px;box-shadow:none;display:list-item;font-size:inherit}
.lead ul,.bio ul{list-style:disc;padding-left:22px;margin:6px 0}
.lead ol,.bio ol{list-style:decimal;padding-left:22px;margin:6px 0}
.lead li,.bio li{margin:2px 0}

/* ── 서식 본문 그림(figure)·캡션 기본 스타일 ── */
.post-body figure,.jo figure,.lead figure,.bio figure,section figure{margin:12px auto;text-align:center}
.post-body figcaption,.jo figcaption,.lead figcaption,.bio figcaption,section figcaption{
  font-size:.8rem;color:var(--ink-soft);margin-top:6px}
.post-body img,section .jo img,.lead img,.bio img{max-width:100%;height:auto;border-radius:8px}


/* ---- 증명사진 3:4 크롭 편집기 (연구노트 방식 이식) ---- */
.ph-editor { display: flex; gap: 14px; align-items: flex-start; margin: 8px 0 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.ph-frame { width: 180px; height: 240px; flex: none; overflow: hidden;
  border: 1.5px solid #6B7B84; border-radius: 8px; background: #EDEBE3;
  cursor: grab; touch-action: none; position: relative; }
.ph-frame:active { cursor: grabbing; }
.ph-frame img { position: absolute; left: 0; top: 0; max-width: none; user-select: none; }
.ph-controls { flex: 1; min-width: 0; }
.ph-controls input[type=range] { width: 100%; margin: 4px 0 10px; }
@media (max-width: 560px) { .ph-editor { flex-direction: column; align-items: center; } }

/* 사진 편집기: 폼 그리드 안에서도 전체 폭으로 */
.mi-grid .ph-editor, form .ph-editor { grid-column: 1 / -1; width: 100%; }
.ph-editor[hidden] { display: none !important; }

/* 크롭 프레임 이미지는 어떤 페이지의 img 규칙에도 영향받지 않게 고정 */
.ph-frame img {
  width: auto; height: auto !important; max-width: none !important;
  max-height: none !important; object-fit: unset !important;
  border: none !important; border-radius: 0 !important;
}



/* ---- 상단 메뉴 반응형 개선: 항목이 많아도 넘치지 않게 ---- */
.nav { gap: 16px; }
@media (max-width: 1240px) {
  .nav .links a.navbtn { padding: 6px 10px; margin-left: 4px; font-size: .84rem; }
  .nav .links .who { max-width: 190px; overflow: hidden;
    text-overflow: ellipsis; }
  .brand { font-size: .95rem; }
}
@media (max-width: 1020px) and (min-width: 861px) {
  .nav .links a.navbtn { padding: 5px 8px; margin-left: 3px; font-size: .8rem; }
  .nav .links .who { display: none; }        /* 로그아웃 버튼으로 충분 */
}

/* ── 모바일 메뉴 정렬 보정 ──
   1fr(=minmax(auto,1fr)) 트랙은 내용 최소폭·스팬 항목에 의해 부풀 수 있어
   iOS에서 오른쪽 열이 화면을 벗어난다 → 퍼센트 고정폭 트랙으로 강제해
   어떤 내용물도 그리드 폭을 키울 수 없게 한다. user-group 항목은 DOM상
   .links의 직계가 아니므로(display:contents) 개별 선택자로 직접 보정. */
@media (max-width:860px){
  .nav .links.open{grid-template-columns:calc(50% - 4px) calc(50% - 4px);
    gap:8px;width:100%;max-width:100%;box-sizing:border-box}
  .nav .links a{min-width:0;max-width:100%;box-sizing:border-box}
  /* 뒤쪽 반응형 블록(≤1240px)의 margin-left:4px 가 모바일 리셋을 덮는 것 차단 */
  .nav .links.open a.navbtn{margin:0}
  .nav .links.open .who{margin:0}
  .nav .links .who{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    min-width:0;max-width:100%;box-sizing:border-box}
  /* 비로그인: 회원가입(왼쪽)·로그인(오른쪽) / 로그인 상태: 로그아웃(오른쪽)
     — 어느 상태든 인증 버튼이 햄버거와 같은 오른쪽 방향 */
  .nav .user-group a.navbtn:last-of-type{order:-2}
}

/* ── 모바일 메뉴 2열 그룹 배치 ──
   왼쪽 열 = 공개 페이지(연구주제→연구진→연구성과→사진첩→게시판→오시는 길),
   오른쪽 열 = 회원 도구(로그아웃→강의실→가상컴퓨터→연구노트).
   기본(왼쪽) 규칙은 특이도를 낮게(0,3,1), 오른쪽 지정은 높게(0,4,1 이상)
   두어 열 지정이 반드시 이기게 한다. dense 로 각 열이 독립적으로 쌓인다. */
@media (max-width:860px){
  .nav .links.open{grid-auto-flow:row dense}
  .nav .links.open a,
  .nav .links.open .navdrop{grid-column:1}
  /* 오른쪽 열 — 인증 버튼(로그아웃/로그인) 맨 위, 이어서 강의실·연구 도구 */
  .nav .links.open .user-group a.navbtn:last-of-type{grid-column:2}
  .nav .links.open a.nav-watch{grid-column:2;order:1}
  .nav .links.open .navdrop.nav-tools{grid-column:2;order:2}
  .nav .links.open a.nav-board{grid-column:2;order:3}
}

/* ---- 홈 첫 화면: 게시판(로그인 회원) + 강의실 가로 배치 ---- */
.home-duo { display: flex; gap: 20px; align-items: stretch; }
.home-lecture-card { background: var(--ink); color: #E8F0F2; border-radius: 14px;
  padding: 40px; display: flex; align-items: center;
  justify-content: space-between; gap: 24px; flex-wrap: wrap; flex: 1 1 0; }
.home-board-card { background: var(--card, #fff); border: 1px solid var(--line);
  border-radius: 14px; padding: 32px 36px; flex: 1.15 1 0; min-width: 0; }
.home-board-list { list-style: none; margin: 0; padding: 0; }
.home-board-list li + li { border-top: 1px solid var(--line); }
.home-board-list a { display: flex; align-items: baseline; gap: 8px;
  padding: 9px 2px; text-decoration: none; color: inherit; min-width: 0; }
.home-board-list a:hover .hb-title { color: var(--accent-deep);
  text-decoration: underline; }
.hb-pin { flex: none; font-size: .8rem; }
.hb-cat { flex: none; font-size: .72rem; font-weight: 700;
  color: var(--accent-deep); background: rgba(11,124,124,.08);
  border-radius: 6px; padding: 2px 7px; }
.hb-title { flex: 1 1 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; font-size: .93rem; }
.hb-date { flex: none; font-family: var(--mono); font-size: .74rem;
  color: var(--ink-soft); }
@media (max-width: 900px) {
  .home-duo { flex-direction: column; }
  .home-board-card { order: 2; }        /* 폰: 강의실 먼저, 게시판 아래 */
}

/* 상단 채팅 버튼 미읽음 배지 (v2.32.0) */
.nav-chat-badge { display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: 3px;
  border-radius: 9px; background: #B4483A; color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1; vertical-align: middle; }