/* ============================================================
   성공TR (Successful TRain) — Theme Override (v1)
   로고 색상: 네이비 #042160 + 블루 #0B58D0
   common.css / contents.css 뒤에 로드되는 오버라이드 전용 파일.
   마크업·클래스명·JS 로직은 건드리지 않고 스타일만 재정의한다.
   ============================================================ */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

/* ── 1. 디자인 토큰 (기존 변수 재정의 → 전 페이지 공통 적용) ── */
:root {
  --main: #0B58D0;
  --sub: #042160;
  --main_blue: #0B58D0;
  --gradient: linear-gradient(135deg, #042160 0%, #0B58D0 100%);

  --body_bg: #f4f6fb;
  --wrap_bg: #f4f6fb;
  --container_bg: #ffffff;
  --header_bg: #ffffff;
  --card_bg: #ffffff;
  --bottom_tab_bg: #ffffff;

  --hr_bg: #e5e9f2;
  --line: #e5e9f2;
  --line2: #eef1f7;
  --bg: #eef1f7;
  --bg2: #f8fafd;

  --placeholder: #9aa4b8;
  --btn: #eef1f7;

  --confrim: #0B58D0;
  --active: #0B58D0;
  --inactive: #c3cbda;
  --disabled: #9aa4b8;

  --shadow: 0 4px 20px rgba(16, 26, 46, 0.06);

  --str-navy: #042160;
  --str-blue: #0B58D0;
  --str-text: #101a2e;
  --str-dim: #64708a;
  --str-faint: #9aa4b8;
  --str-ring: 0 0 0 3px rgba(11, 88, 208, 0.16);
  --str-lift: 0 12px 32px rgba(11, 88, 208, 0.22);
  --str-soft: linear-gradient(135deg, rgba(4, 33, 96, 0.08), rgba(11, 88, 208, 0.10));
}

/* ── 2. 전역 ── */
html, body {
  font-family: 'Pretendard Variable', Pretendard, 'noto_sans', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  background-color: var(--body_bg);
  color: var(--str-text);
}
.wrap { background-color: var(--body_bg); }

/* ── 3. 헤더 ── */
.header_common_layout {
  background-color: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.header_common_layout::after {
  background: var(--line);
}
.header_logo img {
  width: 30px;
  height: auto;
}
.header_logo p {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--str-text);
}
.btn_url {
  background-color: rgba(11, 88, 208, 0.08);
  color: var(--main);
  border-radius: 8px;
  border: 1px solid transparent;
}
.logout {
  background-color: #eef1f7;
  color: var(--str-dim);
  border-radius: 8px;
}

/* ── 4. 로그인 페이지 ── */
.login_logo { margin: 40px 0 32px; }
.login_logo img { height: auto; }
.login_logo .symbol {
  height: 76px;
  filter: drop-shadow(0 8px 24px rgba(11, 88, 208, 0.22));
}
.login_logo .wordmark {
  display: block;
  width: 210px;
  height: auto;
  margin: 18px auto 0;
}

input,
input.design {
  padding: 15px 18px;
  border-radius: 12px;
  font-size: 15px;
  background-color: #ffffff;
  border: 1.5px solid var(--line);
  box-shadow: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus,
input.design:focus {
  outline: none;
  border-color: var(--main);
  box-shadow: var(--str-ring);
}
input.design::placeholder,
input::placeholder {
  color: var(--placeholder);
}
input:read-only { background-color: #eef1f7; border: 1.5px solid transparent; }

button.design {
  background: var(--gradient);
  border-radius: 12px;
  font-weight: 700;
  box-shadow: var(--str-lift);
  transition: filter 0.15s, transform 0.15s, box-shadow 0.15s;
}
button.design:hover { filter: brightness(1.06); }
button.design:active { transform: translateY(1px); box-shadow: var(--shadow); }
button.design:disabled {
  background: #e0e5ef;
  box-shadow: none;
  color: #fff;
}

.join_btn {
  background: #ffffff;
  color: var(--main);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  font-weight: 700;
  transition: border-color 0.15s, background 0.15s;
}
.join_btn:hover { border-color: var(--main); background: #f5f8ff; }

/* ── 5. 메인 페이지 ── */
.main_card .top .name {
  font-size: 20px;
  font-weight: 800;
  color: var(--str-text);
  letter-spacing: -0.01em;
}
.main_card .top .email {
  font-size: 13px;
  font-weight: 600;
  opacity: 1;
  color: var(--main);
}

/* 포인트 카드: 색상 클래스와 무관하게 브랜드 그라데이션 통일 */
.point_card,
.point_card.green,
.point_card.blue,
.point_card.black {
  background: var(--gradient);
  border-radius: 20px;
  box-shadow: var(--str-lift);
}
.point_card .top {
  padding: 24px 22px;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.point_card .top > .flex {
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
.point_card .top .amount {
  display: block;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.point_card .top .sub_amount {
  display: inline-block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  opacity: 0.9;
  font-variant-numeric: tabular-nums;
}
.pp_hint {
  display: block;
  width: max-content;
  margin-top: 10px;
  padding: 4px 10px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}

/* 공지 마퀴 */
.marquee_box {
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.marguee_noticeb span {
  background: var(--gradient);
  border-radius: 999px;
  font-weight: 700;
}
ul.marquee > li > a { color: var(--str-dim); font-family: inherit; }

/* 다이렉트 링크 */
.direct_link_list { gap: 12px; }
.direct_link_list li {
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transition: transform 0.15s, border-color 0.15s;
}
.direct_link_list li:hover { border-color: var(--main); }
.direct_link_list li:active { transform: scale(0.97); }
.direct_link_list li a { padding: 14px 12px; }
.direct_link_list li .text .title {
  font-size: 15px;
  font-weight: 700;
  color: var(--str-text);
}
.direct_link_list li .text .pre { color: var(--str-faint); }
.direct_link_list li .img {
  width: 40px;
  height: 40px;
  padding: 7px;
  border-radius: 12px;
  background: var(--str-soft);
}

/* 공지사항 카드 */
.notice_list_card {
  padding: 16px 20px;
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.notice_list_card .card_title {
  font-size: 16px;
  font-weight: 800;
  color: var(--str-text);
}
.notice_list_card ul li { border-bottom: 1px solid var(--line2); }
.notice_list_card ul li a .title { font-weight: 600; color: var(--str-text); }
.notice_list_card ul li a .date { color: var(--str-faint); opacity: 1; }
.badge_new {
  background: var(--main);
  border-radius: 6px;
  font-weight: 800;
  font-size: 11px;
  padding: 2px 6px;
}

/* ── 6. 하단 탭 ── */
.bottom_tab {
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.bottom_tab::after { background: var(--line); }
.bottom_tab li a .text {
  font-size: 12px;
  font-weight: 600;
  color: var(--str-faint);
}
.bottom_tab .active a .text { color: var(--main); }

/* ── 7. 팝업 ── */
.popup_box { border-radius: 16px; }
.popup_title { border-bottom-color: var(--line); }
.popup_content { border-bottom-color: var(--line); }
.popup_button_box button.design:first-child:not(:only-child) {
  background: #eef1f7;
  color: var(--str-dim);
  box-shadow: none;
}