/* ==================================================
   HEADER LAYOUT
   - depends on theme.css variables
   - header / nav / responsive only
================================================== */


/* ==================================================
   1. BASE STRUCTURE (DESKTOP)
================================================== */

.site-header {
  width: 100%;
  position: relative;
}

/* ----- TOP HEADER ----- */

.top-header {
  background: var(--brand);
}

.top-inner {
  max-width: 1200px;
  height: 175px;
  margin: 0 auto;
  padding: 0 16px;

  display: flex;
  align-items: stretch;
}

/* 3-column grid */
.top-left,
.top-center,
.top-right {
  flex: 1;
}

/* left block */
.top-left {
  display: flex;
  align-items: center;
}

/* center logo */
.top-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* right block: vertical stack */
.top-right {
  position: relative;
  padding: 16px 0 20px;

  display: flex;
  flex-direction: column;
  align-items: flex-end; /* 오른쪽 정렬 */
}


/* ==================================================
   2. LANGUAGE SWITCH
================================================== */

.lang {
  font-size: 13px;
  line-height: 1;
  margin-bottom: 6px;
}

.lang a {
  margin-left: 16px;
  color: #fff;
  text-decoration: none;
  opacity: 0.85;
}

.lang a.active {
  opacity: 1;
  font-weight: 600;
}


/* ==================================================
   3. MAIN NAV (bottom anchored)
================================================== */

.main-nav {
  position: absolute;
  right: 0;
  bottom: 18px;

  display: flex;
  gap: 30px;
}

.main-nav a {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
}


/* ==================================================
   4. SUB NAV
================================================== */

.sub-nav {
  background: var(--bg);
  border-bottom: 1px solid var(--line-strong);
}

.sub-inner {
  position: relative;
  max-width: 1200px;
  height: 55px;
  margin: 0 auto;
  padding: 0 16px;
}

.sub-left {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
}

.sub-left span {
  margin: 0 12px;
  color: var(--text-muted);
}

.sub-right {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}


/* ==================================================
   5. INTERNAL PORTAL USER INFO
================================================== */

/* 전체 블록 */
.portal-user-info {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.4;

  text-align: right;
}

/* --- 1줄: 이름 + 로그아웃 --- */
/* 기존 space-between 제거 */
/* 이름과 버튼을 자연스럽게 붙이고 오른쪽 정렬 유지 */

.portal-user-line1 {
  display: flex;
  align-items: center;
  gap: 12px;          /* 이름과 버튼 간격 */
  justify-content: flex-end;  /* 오른쪽 정렬 */
}

.portal-user-main {
  font-weight: 600;
}

/* --- 2줄: 망 + 권한 --- */
.portal-user-line2 {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 500;
  opacity: 0.9;
}

/* --- 3줄: 이메일 --- */
.portal-user-line3 {
  margin-top: 2px;
  font-size: 11px;
  opacity: 0.7;
}

/* 이메일 자동 링크 차단 */
.portal-user-line3 a,
.portal-user-line3 a:link,
.portal-user-line3 a:visited,
.portal-user-line3 a:hover,
.portal-user-line3 a:active {
  color: inherit !important;
  text-decoration: none !important;
  pointer-events: none;
  cursor: default;
}

/* 네트워크 상태 점 */
.net-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}

.net-dot.internal { background: #2ecc71; }
.net-dot.external { background: #3498db; }


/* --- 로그아웃 버튼 --- */

.logout-btn {
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 16px;
  border: none;
  cursor: pointer;

  background: #7a1f1f;
  color: #ffffff;

  transition: all .15s ease;
}

.logout-btn:hover { background: #d00000; }
.logout-btn:active { transform: scale(0.97); }


/* --- 세션 타이머 영역 --- */

.portal-action-row {
  margin-top: 2px;

  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.portal-session-timer {
  font-size: 12px;
  opacity: 0.75;
  display: flex;
  align-items: center;
}

/* 연장 버튼 */
.extend-btn{
  padding:4px 12px;
  font-size:11px;
  font-weight:600;
  border-radius:16px;
  cursor:pointer;

  background:rgba(255,255,255,0.15);
  color:#ffffff;
  border:1px solid rgba(255,255,255,0.7);

  transition:all .15s ease;
}

.extend-btn:hover{
  background:#ffffff;
  color:var(--brand);
}


/* ==================================================
   6. MOBILE
================================================== */

.desktop-only { display: block; }
.mobile-only  { display: none; }

@media (max-width: 900px) {

  .desktop-only { display: none; }
  .mobile-only  { display: block; }

  .mobile-header {
    background: var(--brand);
    position: relative;
    z-index: 10000;
  }

  .mobile-bar {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
  }

  .mobile-menu {
    display: none;
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid var(--line);
    flex-direction: column;
  }

  .mobile-menu.open {
    display: flex;
  }
}

/* ==================================================
   SUB NAV BUTTON IMAGES
================================================== */

.sub-btn {
  width: 258px;
  height: 55px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: inline-block;
}

/* 기본 이미지 */
.btn-01 { background-image: url("/img/mm_01.png"); }
.btn-02 { background-image: url("/img/mm_02.png"); }

/* 오버 이미지 */
.btn-01:hover { background-image: url("/img/mm_01_ov.png"); }
.btn-02:hover { background-image: url("/img/mm_02_ov.png"); }

/* ===============================
   Admin Session Timer (Header)
================================ */
.admin-timer {
  margin-top:6px;
  font-size:12px;
  color:#fff;
  opacity:0.9;
}
.admin-timer span{
  font-weight:600;
}
.admin-extend-btn{
  padding:4px 8px;
  font-size:11px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,0.8);
  background:transparent;
  color:#ffffff;
  cursor:pointer;
  transition:all .15s ease;
}

.admin-extend-btn:hover{
  background:var(--brand-hover);
  color:#fff;
}

.admin-extend-btn:active{
  transform:translateY(1px);
}

.admin-logout-btn{
  padding:4px 8px;
  font-size:11px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,0.6);
  background:rgba(255,255,255,0.15);
  color:#ffffff;
  cursor:pointer;
  transition:all .15s ease;
}

.admin-logout-btn:hover{
  background:#ffffff;
  color:#c53030;
}