/* sggcoin 공용 추가 스타일.
   기존 style.css 의 다크 팔레트를 그대로 계승한다. 여기서는 style.css 를
   건드리지 않고, 새 화면과 헤더/푸터/모바일 대응만 얹는다. */

:root {
  --bg:        rgb(24, 24, 27);
  --panel:     rgb(39, 39, 42);
  --panel-2:   rgb(51, 51, 51);
  --line:      rgba(63, 63, 70, 0.9);
  --text:      rgb(228, 228, 231);
  --muted:     rgb(161, 161, 170);
  --brand:     #FFBB00;
  --up:        rgb(38, 166, 154);
  --down:      rgb(239, 83, 80);
  --radius:    8px;
}

/* ---------- 헤더: 계정 영역 ---------- */
.navbar .navbar-nav.nav-account {
  margin-left: auto;
  align-items: center;
  flex-direction: row;
}
.navbar .navbar-nav.nav-account .nav-item {
  width: auto;
  padding: 0 .5rem;
}
.navbar .nav-account .nav-link { color: var(--text); font-size: .95rem; }
.navbar .nav-account .pt-badge { color: var(--brand); font-weight: 700; }
.navbar .nav-account .nav-signup {
  color: #1a1a1a;
  background: var(--brand);
  border-radius: 999px;
  padding: .25rem .9rem;
  font-weight: 700;
}
.logout-form { margin: 0; }
.btn-linklike {
  background: none; border: 0; padding: 0;
  color: var(--muted); font: inherit; cursor: pointer;
}
.btn-linklike:hover { color: var(--text); }

/* ---------- 메시지 ---------- */
.msg-list { list-style: none; padding: 0; margin: 0 0 1rem; }
.msg {
  padding: .6rem .9rem; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--panel); margin-bottom: .5rem;
}
.msg.error { border-color: var(--down); color: var(--down); }
.msg.success { border-color: var(--up); color: var(--up); }

/* ---------- 좌측 사이드바 ----------
   기존 style.css 의 .links 규칙(li height 1.75rem 고정 등)은 28px 아이콘
   이미지를 전제로 짜여 있어 텍스트 링크에는 맞지 않는다. 여기서는 .links 를
   쓰지 않고 .sidenav 로 새로 잡아 그 규칙들과 아예 겹치지 않게 한다. */
.sidenav {
  margin-top: 1rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.sidenav-title {
  padding: .5rem .9rem;
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--muted);
  background: rgba(0, 0, 0, .18);
  border-bottom: 1px solid var(--line);
}
.sidenav-title + ul { margin-bottom: .25rem; }
.sidenav ul {
  list-style: none;
  margin: 0;
  padding: .25rem 0;
}
.sidenav li { margin: 0; }
.sidenav a {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem .9rem;
  color: var(--text);
  text-decoration: none;
  font-size: .9rem;
  line-height: 1.3;
  border-left: 2px solid transparent;
}
.sidenav a:hover {
  background: var(--panel-2);
  color: #fff;
}
.sidenav a.on {
  border-left-color: var(--brand);
  color: var(--brand);
  background: rgba(255, 187, 0, .07);
  font-weight: 600;
}
.sidenav .ico {
  width: 1.2rem;
  text-align: center;
  font-size: 1rem;
  flex: 0 0 auto;
}
.sidenav .lbl {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidenav .ext {
  color: var(--muted);
  font-size: .75rem;
  flex: 0 0 auto;
}

/* ---------- 사이드바 랭킹 ---------- */
.sidelb {
  margin-top: 1rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.sidelb-head {
  display: flex; align-items: center; gap: .4rem;
  padding: .45rem .6rem .45rem .9rem;
  background: rgba(0, 0, 0, .18);
  border-bottom: 1px solid var(--line);
}
.sidelb-title { font-size: .72rem; color: var(--muted); letter-spacing: .04em; }
.sidelb-tabs { margin-left: auto; display: flex; gap: .2rem; }
.sidelb-tab {
  background: none; border: 1px solid transparent; color: var(--muted);
  border-radius: 999px; padding: .05rem .45rem; font-size: .68rem; cursor: pointer;
}
.sidelb-tab:hover { color: var(--text); }
.sidelb-tab.active { border-color: var(--brand); color: var(--brand); font-weight: 700; }

.sidelb-list { list-style: none; margin: 0; padding: .3rem 0; }
.sidelb-list li {
  display: flex; align-items: center; gap: .45rem;
  padding: .3rem .9rem; font-size: .8rem; line-height: 1.4;
}
.sidelb-list li + li { border-top: 1px solid rgba(63, 63, 70, .35); }
.sidelb-list .rk {
  width: 1.15rem; flex: 0 0 auto; text-align: center;
  font-size: .72rem; color: var(--muted);
}
.sidelb-list li:nth-child(1) .rk { color: #FCD535; font-weight: 700; }
.sidelb-list li:nth-child(2) .rk,
.sidelb-list li:nth-child(3) .rk { color: var(--text); font-weight: 700; }
.sidelb-list .nm {
  flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text);
}
.sidelb-list .pt { flex: 0 0 auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.sidelb-list .pt.plus { color: rgb(38, 166, 154); }
.sidelb-list .pt.minus { color: rgb(239, 83, 80); }
.sidelb-empty { color: var(--muted); font-size: .76rem; padding: .6rem .9rem !important; }
.sidelb-foot {
  padding: .4rem .9rem .5rem; font-size: .68rem; color: var(--muted);
  border-top: 1px solid var(--line);
}

/* ---------- 사이드바 환율·김프 ---------- */
.sidefx {
  margin-top: 1rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.sidefx-note { margin-left: auto; font-size: .66rem; color: var(--muted); }

.sidefx-list { list-style: none; margin: 0; padding: .25rem 0; }
.sidefx-list li {
  display: flex; align-items: center; gap: .5rem;
  padding: .4rem .9rem; font-size: .8rem;
}
.sidefx-list li + li { border-top: 1px solid rgba(63, 63, 70, .35); }
.sidefx-list .nm {
  flex: 0 0 auto; color: var(--muted); font-size: .74rem;
  min-width: 4.6rem;
}
.sidefx-list .spark { flex: 1 1 auto; min-width: 0; height: 22px; display: block; }
.sidefx-list .val {
  flex: 0 0 auto; text-align: right; font-variant-numeric: tabular-nums;
  min-width: 4.6rem;
}
.sidefx-list .val b { display: block; color: var(--text); font-size: .84rem; }
.sidefx-list .val i {
  display: block; font-style: normal; font-size: .68rem; color: var(--muted);
}
.sidefx-list .val i.up { color: rgb(38, 166, 154); }
.sidefx-list .val i.down { color: rgb(239, 83, 80); }
.sidefx-list .kimp b.up { color: rgb(38, 166, 154); }
.sidefx-list .kimp b.down { color: rgb(239, 83, 80); }
.sidefx-list a.row {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  text-decoration: none;
}
.dark .sidefx-list a.row:link, .dark .sidefx-list a.row:visited { color: inherit; }
.sidefx-list a.row:hover .nm { color: var(--text); }

/* ---------- 푸터 ---------- */
.site-footer {
  margin-top: 2rem; padding: 1.5rem 1rem 5rem;
  background: rgb(31, 31, 34); border-top: 1px solid var(--line);
}
.footer-inner { padding: 0 1rem; }
.footer-note { color: var(--muted); font-size: .8rem; line-height: 1.6; margin: 0; }
.footer-note strong { color: var(--brand); }

/* ---------- 공용 컴포넌트 ---------- */
/* .card 는 부트스트랩에도 있는 클래스다. 부트스트랩 쪽 .card 가
   color: var(--bs-body-color) (#212529) 를 함께 걸기 때문에, 여기서 배경만
   덮고 글자색을 비워 두면 rgb(39,39,42) 배경 위에 rgb(33,37,41) 글자가 얹혀
   본문이 통째로 안 보인다. 배경을 덮을 때는 글자색도 반드시 같이 덮는다. */
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem;
  color: var(--text);
}
.card h2, .card h3 { font-size: 1rem; color: var(--muted); margin: 0 0 .75rem; }

.btn {
  display: inline-block; padding: .5rem 1rem; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
  font-weight: 600; cursor: pointer; text-decoration: none; font-size: .9rem;
}
.btn:hover { filter: brightness(1.15); color: var(--text); }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #1a1a1a; }
.btn-ghost { background: transparent; }
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; filter: none; }

/* style.css 는 .dark a:link / a:hover / a:visited 로 모든 링크를 흰색으로 못박는다.
   그 특이도가 (0,2,1) 이라 .btn-* 류의 (0,1,0) 을 이긴다. 그래서 링크로 만든 버튼은
   글자색을 빼앗긴다 — 구글 버튼은 흰 배경에 흰 글자가 되어 글자가 통째로 사라졌고,
   주요 버튼은 노란 배경에 흰 글자라 잘 안 읽혔다.
   style.css 를 건드리지 않는 것이 이 파일의 원칙이므로, 여기서 같은 무게 이상으로
   되받아친다. 아래 선택자는 모두 (0,3,1) 이다. 새 버튼을 만들 때도 <a> 로 쓸 거라면
   이 블록에 한 줄 추가해야 한다. */
.dark a.btn:link, .dark a.btn:visited, .dark a.btn:hover { color: var(--text); }
.dark a.btn-primary:link, .dark a.btn-primary:visited, .dark a.btn-primary:hover { color: #1a1a1a; }
.dark a.btn-google:link, .dark a.btn-google:visited, .dark a.btn-google:hover { color: #3c4043; }

/* 같은 이유로 색을 빼앗기던 본문 링크들. 안 보이지는 않았지만 의도한 색이 아니었다. */
.dark .post-body a:link, .dark .post-body a:visited { color: var(--brand); }
.dark a.verify-link:link, .dark a.verify-link:visited { color: var(--muted); }

input[type=text], input[type=email], input[type=password], input[type=number],
textarea, select {
  width: 100%; padding: .55rem .7rem; border-radius: var(--radius);
  border: 1px solid var(--line); background: rgb(31, 31, 34); color: var(--text);
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--brand);
}
label { color: var(--muted); font-size: .85rem; display: block; margin-bottom: .3rem; }

.muted { color: var(--muted); }
.up { color: var(--up); }
.down { color: var(--down); }

/* ---------- 로그인 유도 모달 ---------- */
.login-modal-backdrop {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .7);
  display: none; align-items: center; justify-content: center; z-index: 100000;
}
.login-modal-backdrop.open { display: flex; }
.login-modal {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 1.75rem; width: min(380px, 92vw); text-align: center;
}
.login-modal h3 { margin: 0 0 .5rem; color: var(--text); font-size: 1.1rem; }
.login-modal p { color: var(--muted); font-size: .9rem; margin-bottom: 1.25rem; }
.login-modal .btn { width: 100%; margin-bottom: .5rem; }

/* ---------- 인증 화면 ---------- */
.auth-wrap { max-width: 400px; margin: 2rem auto; }
.auth-wrap h1 { font-size: 1.4rem; margin-bottom: 1.25rem; }
.auth-wrap .field { margin-bottom: 1rem; }
.auth-wrap .errorlist {
  list-style: none; padding: 0; margin: .35rem 0 0;
  color: var(--down); font-size: .82rem;
}
.auth-divider {
  display: flex; align-items: center; gap: .75rem;
  color: var(--muted); font-size: .8rem; margin: 1.25rem 0;
}
.auth-divider::before, .auth-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; background: #fff; color: #3c4043; border-color: #dadce0;
}
.btn-google:hover { background: #f5f5f5; color: #3c4043; }
.auth-alt { text-align: center; margin-top: 1.25rem; font-size: .88rem; }

/* ---------- 모바일 ----------
   기존 style.css 의 미디어쿼리는 1279px 에서 끊겨 폰 대응이 아예 없었다.
   여기서 폰 레이아웃을 새로 잡는다. */
.navbar-toggler { border: 1px solid var(--line); color: var(--text); }
.navbar-toggler:focus { box-shadow: none; }

/* 모바일 상단 탭 — 데스크톱에서는 숨긴다 */
.mtabs { display: none; }

@media (max-width: 991px) {
  .navbar .navbar-nav.nav-account {
    margin-left: 0;
    flex-direction: row;
    flex-wrap: wrap;
    padding-top: .5rem;
    border-top: 1px solid var(--line);
    margin-top: .5rem;
  }
  .navbar .navbar-nav .nav-item { width: auto; text-align: left; padding-right: 1rem; }
  .navbar .navbar-nav .nav-item.selected { border-bottom: 0; }
  .navbar .navbar-nav .nav-item.selected .nav-link { color: var(--brand); }
}

@media (max-width: 767px) {
  /* ── 상단 탭을 가장 위로 ── */
  .mtabs {
    display: flex;
    gap: 0;
    background: rgb(10, 10, 10);
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mtabs::-webkit-scrollbar { display: none; }
  .mtabs a {
    flex: 1 0 auto;
    padding: .7rem .9rem;
    text-align: center;
    font-size: .88rem;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
  }
  .dark .mtabs a:link, .dark .mtabs a:visited { color: var(--muted); }
  .mtabs a.on,
  .dark .mtabs a.on:link, .dark .mtabs a.on:visited {
    color: var(--brand);
    border-bottom-color: var(--brand);
  }

  /* 상단 탭이 메뉴 역할을 하므로 햄버거 안의 중복 메뉴는 감춘다 */
  #navbarCollapse .navbar-left { display: none; }
  .navbar-toggler { display: none; }
  #navbarCollapse {
    display: flex !important;      /* collapse 를 쓰지 않고 항상 펼쳐 둔다 */
    flex: 1 1 auto;
    justify-content: flex-end;
  }
  #navbarCollapse .nav-account {
    border-top: 0; margin-top: 0; padding-top: 0;
    flex-wrap: nowrap; gap: .1rem;
  }
  #navbarCollapse .nav-account .nav-item { padding: 0 .35rem; }
  #navbarCollapse .nav-account .nav-link { font-size: .82rem; }
  #navbarCollapse .nav-account .nav-signup { padding: .2rem .7rem; }
  .navbar {
    display: flex; align-items: center; flex-wrap: nowrap;
    padding: .4rem .6rem;
  }
  .navbar .navbar-brand { font-size: 1.15rem; width: auto; margin: 0; }

  /* 티커 테이프는 폰에서 자리만 차지하고 잘린다 */
  .top-bar { display: none; }

  /* ── 본문 ── */
  body .container { padding-left: .6rem; padding-right: .6rem; }
  body .container .center_cont { margin: .6rem 0; }
  .card { padding: .8rem; }
  .site-footer { padding: 1rem .75rem 2.5rem; }
  .footer-note { font-size: .74rem; }

  /* ── 사이드바 ──
     폰에서는 좌우 컬럼의 절대배치를 풀어 본문 아래로 흘려보낸다.
     예전에는 통째로 display:none 이라 랭킹·바로가기가 아예 사라졌었다. */
  body .container .left_cont,
  body .container .right_cont {
    position: static;
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
  }
  body .container .left_fixed,
  body .container .right_fixed {
    position: static;
    width: 100%;
    min-width: 0;
  }
  /* 트위터 타임라인(800px)과 뉴스 위젯은 폰에서 너무 길다 */
  .left_fixed .twitter-timeline,
  .left_fixed iframe[id^="twitter-widget"],
  .right_cont .links { display: none; }

  .sidenav, .sidelb { margin-top: .75rem; }

  /* ── 인증 화면 ── */
  .auth-wrap { margin: 1rem auto; max-width: 100%; }

  /* ── 로그인 모달 ── */
  .login-modal { padding: 1.25rem; }
}

@media (max-width: 380px) {
  .mtabs a { padding: .65rem .6rem; font-size: .82rem; }
  .navbar .navbar-brand { font-size: 1rem; }
  #navbarCollapse .nav-account .nav-link { font-size: .76rem; }
}

/* ---------- 닉네임 뱃지 (역할 · 레벨) ---------- */
.ubadge-wrap {
  display: inline-flex; align-items: center; gap: .28rem;
  white-space: nowrap; min-width: 0;
}
.ubadge-wrap .uname { color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.dark .ubadge-wrap a.uname:link, .dark .ubadge-wrap a.uname:visited { color: var(--text); }
.dark .ubadge-wrap a.uname:hover { color: var(--brand); text-decoration: underline; }

.ubadge {
  display: inline-block; flex: 0 0 auto;
  padding: .05rem .32rem; border-radius: 3px;
  font-size: .66rem; font-weight: 700; line-height: 1.5;
  letter-spacing: .01em;
}

/* 역할 — 레벨보다 눈에 띄게 */
.ubadge.role.owner {
  background: linear-gradient(135deg, #FFBB00, #FF8A00);
  color: #1a1a1a;
  box-shadow: 0 0 0 1px rgba(255, 187, 0, .35);
}
.ubadge.role.staff { background: #4C6FFF; color: #fff; }
.ubadge.role.bot { background: var(--panel-2); color: var(--muted); }

/* 레벨 — 구간별 색 */
.ubadge.lv { background: rgba(255, 255, 255, .07); color: var(--muted); }
.ubadge.lv.t2 { color: #9CA3AF; }
.ubadge.lv.t3 { color: #34D399; background: rgba(52, 211, 153, .12); }
.ubadge.lv.t4 { color: #60A5FA; background: rgba(96, 165, 250, .12); }
.ubadge.lv.t5 { color: #A78BFA; background: rgba(167, 139, 250, .12); }
.ubadge.lv.t6 { color: #F472B6; background: rgba(244, 114, 182, .14); }
.ubadge.lv.t7 {
  color: #1a1a1a; background: linear-gradient(135deg, #FCD535, #FF8A00);
}

/* 경험치 막대 */
.lvbar { margin-bottom: .9rem; }
.lvbar-head {
  display: flex; align-items: baseline; gap: .5rem;
  font-size: .82rem; margin-bottom: .3rem;
}
.lvbar-head span { margin-left: auto; font-size: .74rem; }
.lvbar-head b.t1, .lvbar-head b.t2 { color: var(--muted); }
.lvbar-head b.t3 { color: #34D399; }
.lvbar-head b.t4 { color: #60A5FA; }
.lvbar-head b.t5 { color: #A78BFA; }
.lvbar-head b.t6 { color: #F472B6; }
.lvbar-head b.t7 { color: var(--brand); }
.lvbar-track {
  height: 7px; background: var(--panel-2); border-radius: 999px; overflow: hidden;
}
.lvbar-track i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--brand), #FF8A00);
  transition: width .5s ease;
}

/* 헤더 쪽지 안읽음 */
.nav-notes .note-dot {
  display: inline-block; min-width: 1.05rem; padding: 0 .25rem;
  background: var(--down); color: #fff; border-radius: 999px;
  font-size: .66rem; font-weight: 700; text-align: center; margin-left: .15rem;
}