/* 공통 상단: Google 로그인 · 계정 메뉴 · 모바일 브랜드 */
.site-glogin{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:36px;padding:0 12px;border-radius:999px;
  border:1px solid #e2e4ee;background:#fff;color:#1B1F2E;
  font-size:13px;font-weight:800;cursor:pointer;white-space:nowrap;
  font-family:inherit;line-height:1;flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
}
.site-glogin:hover{border-color:#C9D2FF;color:#4d5bf0;background:#F8F9FF}
.site-glogin:disabled{opacity:.65;cursor:wait}
.site-glogin .gicon{width:16px;height:16px;flex-shrink:0;display:block}
.site-glogin .lab{font-weight:800}

.site-nav-auth{
  display:inline-flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto;
  position:relative;z-index:60;
}
.site-nav-menu{
  display:none;position:relative;align-items:center;
}
.site-nav-menu.is-on{display:inline-flex}
/* body 클래스 정본 — 로그인인데 로그인 버튼 잔존 방지 */
body.site-logged-in [data-site-login]{display:none !important;pointer-events:none !important}
body.site-logged-in .site-nav-menu,
body.site-logged-in [data-site-menu]{display:inline-flex !important}
body.site-guest .site-nav-menu.is-on{display:none !important}
.site-nav-avbtn{
  width:36px;height:36px;padding:0;border:0;border-radius:50%;
  background:transparent;cursor:pointer;display:inline-flex;
  align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
.site-nav-avbtn:hover{filter:brightness(.97)}
.site-nav-avbtn .av{
  width:32px;height:32px;border-radius:50%;overflow:hidden;
  background:#eef0fe;color:#4d5bf0;border:1px solid #dfe2fb;
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:800;font-size:12px;flex-shrink:0;
}
.site-nav-avbtn .av img{
  width:100%;height:100%;object-fit:cover;display:none;
}
.site-nav-avbtn .av img.has-src{display:block !important}
.site-nav-avbtn .av img.has-src + [data-site-letter]{display:none !important}

/* ══════════════════════════════════════════════════════════════════════════
 * 계정 드롭다운 — **스타일 정본 한 벌** (2026-08-22)
 *
 * 마크업은 site-nav-auth.js 의 AccountMenu.html() 한 곳에서 나오고,
 * 그 **내용** 스타일은 여기 한 곳에서만 준다. /app 도 이 파일을 싣는다.
 * ⛔ assets/app-shell.css 에 `.app-user-dropdown .nav-dd-*` 를 다시 쓰지 말 것 —
 *   거기 한 벌 · 여기 한 벌이던 시절이 「허브는 빨간 로그아웃, 앱은 주황」의 원인이었다.
 * · 여기 = 내용(헤드·아바타·등급줄·항목·색)  · 화면별 = **배치**뿐
 *   허브·랜딩은 아래 `.site-nav-dropdown`(absolute), 앱은 app-shell.css 의
 *   `.app-user-dropdown`(fixed + 포털).
 * ══════════════════════════════════════════════════════════════════════════ */

/* 배치 — 허브·랜딩 (앱은 app-shell.css) */
.site-nav-dropdown{
  position:absolute;top:calc(100% + 8px);right:0;
  width:min(92vw,320px);max-width:calc(100vw - 20px);
  background:#fff;border:1px solid #e8e8ee;border-radius:18px;
  box-shadow:0 16px 48px rgba(20,24,40,.18),0 2px 8px rgba(20,24,40,.06);
  padding:0;z-index:80;
  overflow-x:hidden;overflow-y:auto;max-height:min(82vh,620px);
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}
.site-nav-menu.open .site-nav-dropdown{display:block}

/* ── 내용 (앱·허브·랜딩 공용) ─────────────────────────────────────────────── */
.acct-dd .nav-dd-head{padding:16px 16px 12px;border-bottom:1px solid #efeff4;}
.acct-dd .nav-dd-profile{display:flex;align-items:center;gap:12px;min-width:0;}
.acct-dd .nav-dd-av{
  position:relative;width:44px;height:44px;border-radius:50%;flex-shrink:0;overflow:hidden;
  background:linear-gradient(145deg,#f0a3b8,#d4567a);
  display:inline-flex;align-items:center;justify-content:center;
}
.acct-dd .nav-dd-av-img{
  width:44px;height:44px;border-radius:50%;object-fit:cover;display:none;position:absolute;inset:0;
}
.acct-dd .nav-dd-av-img.has-src{display:block;}
.acct-dd .nav-dd-av-letter{
  font-size:18px;font-weight:900;color:#fff;letter-spacing:-.02em;line-height:1;user-select:none;
}
.acct-dd .nav-dd-av-img.has-src + .nav-dd-av-letter{display:none;}
.acct-dd .nav-dd-profile-txt{min-width:0;flex:1;}
.acct-dd .nav-dd-name{font-size:15.5px;font-weight:800;color:#1b1f2e;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.acct-dd .nav-dd-email{margin-top:2px;font-size:12.5px;font-weight:600;color:#8b90a5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.acct-dd .nav-dd-rankline{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin-top:10px;
  font-size:12px;font-weight:600;color:#8b90a5;
}
.acct-dd .nav-dd-rankline:empty{display:none;}
.acct-dd .nav-dd-rankline .rank-badge{margin:0;}
.acct-dd .nav-dd-rank-meta{font-size:12px;font-weight:600;color:#8b90a5;}
.acct-dd .nav-dd-section{padding:4px 0 8px;border-bottom:1px solid #efeff4;}
.acct-dd .nav-dd-section:last-child{border-bottom:0;padding-bottom:10px;}
.acct-dd .nav-dd-sec-lab{padding:10px 16px 4px;font-size:11.5px;font-weight:800;color:#9aa0b4;letter-spacing:.02em;}
.acct-dd .nav-dd-item{
  display:flex;align-items:center;gap:12px;width:100%;padding:11px 16px;border:0;border-radius:0;
  background:transparent;color:#1b1f2e;font-weight:700;font-size:14.5px;text-decoration:none;
  cursor:pointer;font-family:inherit;text-align:left;line-height:1.25;box-sizing:border-box;
}
.acct-dd .nav-dd-item.plain{gap:0;}
.acct-dd .nav-dd-item:hover{background:#f4f6ff;color:var(--indigo,#4d5bf0);text-decoration:none;}
.acct-dd .nav-dd-item svg{width:18px;height:18px;flex-shrink:0;opacity:.72;}
.acct-dd .nav-dd-item.plain svg{display:none;}
/* ⛔ 로그아웃은 **주황**이다 (#c2410c). 빨강(#b91c1c)으로 되돌리지 말 것 —
 *   허브만 빨강이던 것이 「페이지마다 메뉴가 다르다」의 눈에 띄는 신호였다. */
.acct-dd .nav-dd-item.logout{color:#c2410c;font-weight:800;}
.acct-dd .nav-dd-item.logout:hover{background:#fef2f2;color:#b91c1c;}
.acct-dd .nav-dd-item.nav-dd-admin{color:#b45309;font-weight:800;}
.acct-dd .nav-dd-item.nav-dd-admin:hover{background:#fffbeb;color:#92400e;}
.acct-dd .nav-dd-item.nav-dd-admin svg{color:#d97706;opacity:1;}

/* 활동 등급 뱃지 — 앱·허브 공용 (app-shell.css 에서 옮겨 왔다) */
.rank-badge{
  display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;
  font-size:11px;font-weight:800;line-height:1.3;border:1px solid transparent;vertical-align:middle;
}
.rank-badge.newbie{background:#eaf7f0;color:#118049;border-color:#c6ebd6;}
.rank-badge.rookie{background:#eef1ff;color:var(--indigo,#4d5bf0);border-color:#c9d2ff;}
.rank-badge.regular{background:#ecfdf5;color:#047857;border-color:#a7f3d0;}
.rank-badge.veteran{background:#fff7ed;color:#c2410c;border-color:#fed7aa;}
.rank-badge.master{
  background:linear-gradient(120deg,#eef1ff 0%,#fae8ff 40%,#f5f3ff 60%,#e0e7ff 100%);
  background-size:200% 100%;
  color:#6d28d9;border-color:#d8b4fe;
  animation:rankMasterShine 3.2s ease-in-out infinite;
  box-shadow:0 0 0 1px rgba(167,139,250,.25),0 2px 10px rgba(109,40,217,.12);
}
@keyframes rankMasterShine{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
.acct-dd .nav-dd-head .rank-badge{margin-top:0;}

/* 모바일: CHEMTOP 워드마크 숨김 → 아이콘 + 문제은행 배지만 */
@media(max-width:720px){
  .td-brand .nm,
  .el-brand .nm,
  .brand-word,
  .app-brand .brand-word,
  .brand-divider,
  .app-brand .brand-divider,
  .td-brand .brand-word,
  .el-brand .brand-word{display:none !important}

  .td-nav-crumb{display:none !important}
  .td-nav-links{display:none !important}

  .el-nav-links{display:none !important}
  .el-search{display:none !important}
  .el-brand .badge{display:inline-flex !important}

  .td-brand .badge,
  .el-brand .badge,
  .brand-badge,
  .app-brand .brand-badge{
    font-size:13px;padding:5px 10px;
  }
  .td-brand img,
  .el-brand img,
  .brand-icon,
  .app-brand .brand-icon{width:30px;height:30px}
}