@charset "utf-8";
/* ============================================================
   쟈쟈서버 공통 스킨 — 게임정보 포털형 (2026-09-12)

   이 파일은 각 페이지의 인라인 <style> 보다 **뒤에** 실린다
   (theme/sa_two_server/tail.php 에서 마지막에 불러온다).
   그래서 !important 를 거의 쓰지 않고도 겉모습만 덮어쓴다.
   마크업과 JS 는 한 줄도 건드리지 않으므로 기능은 그대로다.

   되돌릴 때: tail.php 의 sa_skin.css 한 줄만 지우면 원래 모습으로 돌아온다.
   ============================================================ */

:root {
  --sa-page:    #eff0f3;   /* 본문 통 바탕 */
  --sa-mod:     #ffffff;   /* 모듈(카드) 바탕 */
  --sa-band:    #f6f7f9;   /* 머리띠·보조 바탕 */
  --sa-line:    #dcdfe5;
  --sa-line-2:  #eceef2;

  --sa-deep:    #1b2231;   /* 바깥 바탕 */
  --sa-chrome:  #161b26;   /* 상단바·강조 버튼 */
  --sa-chrome-2:#1f2635;

  --sa-ink:     #161b24;   /* 제목 */
  --sa-text:    #2b313d;   /* 본문 */
  --sa-sub:     #4e5665;   /* 보조 */
  --sa-sub-2:   #666e7e;   /* 흐린 글자 (AA 5.7:1) */

  --sa-gold:    #c8960c;
  --sa-gold-hi: #ffd84d;
  --sa-gold-bg: #fff7e0;
  --sa-red:     #c0392b;
  --sa-blue:    #1f6fa8;
  --sa-green:   #3f7a1e;
}

/* ════════════════════════════════════════════════════════
   글꼴 통일 — 모든 글자를 Noto Sans KR 로 (2026-09-12)

   왜 여태 안 먹었나:
     theme/NewTheme/css/main.css 가
       * { font-family: 'Malgun Gothic','Nanum Gothic','Noto Sans KR',sans-serif }
       body { …같은 목록… !important }
     로 전체 선택자에 맬건고딕을 먼저 놓는다. 한글은 맬건고딕에서 다 찍히니
     뒤에 적힌 Noto Sans KR 까지 갈 일이 없었다.
     또 'Noto Sans' 는 라틴 전용이라 한글은 나눔고딕으로 떨어진다.

   그래서 여기서 전체 선택자로 다시 덮는다.
     html body      (0,0,2) + !important  > body (0,0,1) + !important
     html body *    (0,0,2) + !important  > *    (0,0,0)
   아이콘 글꼴은 바로 아래에서 되돌린다 (클래스라 무게가 더 크다).
   ════════════════════════════════════════════════════════ */

html body,
html body * {
  font-family: "Noto Sans KR", "Apple SD Gothic Neo", system-ui,
               "Malgun Gothic", sans-serif !important;
}

/* 아이콘 글꼴은 예외 — 덮으면 아이콘이 네모로 깨진다 (Font Awesome 5) */
html body .fa,
html body .fas {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
}
html body .far,
html body .fal {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 400 !important;
}
html body .fab {
  font-family: "Font Awesome 5 Brands" !important;
  font-weight: 400 !important;
}

/* 고정폭이 필요한 곳은 그대로 둔다 */
html body code,
html body pre,
html body kbd,
html body samp,
html body tt {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", "Courier New", monospace !important;
}

/* ── 바탕 ───────────────────────────────────────────────── */
body {
  background: var(--sa-deep);
  color: var(--sa-text);
  font-family: "Noto Sans KR", system-ui, "Malgun Gothic", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: -0.02em;
}
input, button, select, textarea { font-family: inherit; }
li { list-style: none; }

/* 기존 배경 그림은 그대로 쓰되 더 가라앉히고, 금·청 번짐은 뺀다 */
.sa-global-bg {
  background-image:
    linear-gradient(180deg, rgba(21,27,38,.80), rgba(21,27,38,.86)),
    url("../img/page_bg.png");
}
.sa-global-bg:after { display: none; }

/* ── 상단바 ─────────────────────────────────────────────── */
.sa-header {
  background: var(--sa-deep);
  border-bottom: 1px solid #2b344a;
  box-shadow: none;
  backdrop-filter: none;
}
.sa-header-inner { max-width: 1200px; height: 60px; gap: 30px; padding: 0 12px; justify-content: flex-start; }
.sa-logo { gap: 10px; flex: 0 0 auto; }
.sa-logo-mark { width: 34px; height: 34px; border-radius: 0; border: 0; box-shadow: none; }
.sa-logo-mark img { object-fit: contain; }
.sa-logo-text strong { font-size: 16px; font-weight: 900; color: #f3e9d2; letter-spacing: -.02em; line-height: 1.25; }
.sa-logo-text em { font-size: 9px; letter-spacing: .14em; color: #6f7a90; }

.sa-nav { display: flex; gap: 4px; flex: 1 1 auto; }
.sa-nav-item { position: relative; }
.sa-nav-link {
  display: flex; align-items: center; gap: 5px;
  height: 60px; padding: 0 13px; border-radius: 0;
  background: none; border-bottom: 2px solid transparent;
  font-size: 14px; font-weight: 500; color: #c6cddb;
}
.sa-nav-link:hover, .sa-nav-item:hover > .sa-nav-link {
  background: none; color: var(--sa-gold-hi); border-bottom-color: var(--sa-gold-hi);
}
.sa-nav-caret { opacity: .4; }
.sa-drop-menu {
  min-width: 182px; padding: 6px; border-radius: 6px;
  background: #212a3c; border: 1px solid #33405a;
  box-shadow: 0 16px 34px rgba(0,0,0,.45);
}
.sa-drop-menu a { padding: 8px 11px; border-radius: 4px; font-size: 13px; font-weight: 500; color: #c6cddb; }
.sa-drop-menu a:hover { background: #2c374d; color: var(--sa-gold-hi); }

.sa-auth-box { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; margin-left: auto; }
.sa-auth-btn {
  height: 32px; padding: 0 16px; border-radius: 4px;
  border: 1px solid #3a4660; background: transparent; color: #c6cddb;
  font-size: 12.5px; font-weight: 700; box-shadow: none;
}
.sa-auth-btn:hover { border-color: var(--sa-gold-hi); color: var(--sa-gold-hi); background: transparent; }
.sa-auth-btn.sa-auth-main { background: var(--sa-gold-hi); border-color: var(--sa-gold-hi); color: #2b2205; font-weight: 900; }
.sa-auth-btn.sa-auth-main:hover { background: #ffe27a; border-color: #ffe27a; color: #2b2205; }
.sa-auth-name { color: #c6cddb; font-size: 12.5px; }

/* ── 옆 바로가기 서랍 ───────────────────────────────────── */
.sa-quicklink-tab, .sa-quicklink-content {
  border-radius: 0; border-color: #2b344a;
  background: var(--sa-chrome); box-shadow: -8px 10px 26px rgba(0,0,0,.4);
  backdrop-filter: none;
}
.sa-quicklink-content { border-radius: 0; }
.sa-quicklink-dock-item { font-size: 12.5px; font-weight: 500; color: #c6cddb; }

/* ── 본문 통 ────────────────────────────────────────────── */
.sa-info-main, .seasonItemPage {
  width: 1200px; max-width: calc(100% - 24px);
  margin: 16px auto 26px; padding: 14px;
  background: var(--sa-page); border: 1px solid #0f1420; border-radius: 4px;
  box-shadow: 0 14px 40px rgba(0,0,0,.42);
  color: var(--sa-text);
}

/* ── 제목줄 — 48px 히어로 대신 한 줄 얼굴띠 ─────────────── */
.sa-info-hero, .siHero {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  min-height: 0; padding: 0 0 11px; margin-bottom: 12px;
  border: 0; border-bottom: 2px solid var(--sa-chrome); border-radius: 0;
  background: none; box-shadow: none; overflow: visible;
}
.sa-info-hero:before, .sa-info-hero:after, .siHero:after { display: none; }
/* 실제 페이지는 제목을 .siHeroInner > div 로 한 겹 더 싸고 있다 */
.siHeroInner, .siHeroInner > div { display: flex; align-items: baseline; gap: 10px; }
.sa-info-kicker, .siBadge {
  height: auto; padding: 2px 8px; border: 0; border-radius: 0;
  background: var(--sa-chrome); color: var(--sa-gold-hi);
  font-size: 10.5px; font-weight: 900; letter-spacing: .08em;
}
.sa-info-hero h1, .siTitle {
  margin: 0; max-width: none;
  color: var(--sa-ink) !important;
  font-size: 21px; line-height: 1.3; letter-spacing: -.03em; font-weight: 900;
}
.sa-info-hero p, .siDesc {
  margin: 0; max-width: none; color: var(--sa-sub-2);
  font-size: 12.5px; font-weight: 400; line-height: 1.6;
}
.sa-info-hero .sa-info-actions { display: flex; gap: 6px; margin-left: auto; }
.sa-info-hero .sa-view-toggle { margin-left: auto; align-self: center; }
.sa-info-hero .sa-pet-summary-grid {
  position: static; display: flex; gap: 6px; margin: 0 0 0 auto; padding: 0;
  width: auto; min-height: 0; grid-template-columns: none;
}
.sa-info-hero .sa-pet-summary {
  display: flex; align-items: baseline; gap: 5px;
  min-height: 0; padding: 3px 9px; border-radius: 0;
  border: 1px solid var(--sa-line); background: var(--sa-mod); box-shadow: none;
}
.sa-info-hero .sa-pet-summary span { color: var(--sa-sub); font-size: 11.5px; font-weight: 400; }
.sa-info-hero .sa-pet-summary strong {
  margin: 0; color: var(--sa-ink); font-size: 12.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ── 본문 모듈 ──────────────────────────────────────────── */
.sa-info-section, .siOuterCard {
  margin-top: 12px; padding: 12px; border-radius: 0;
  border: 1px solid var(--sa-line); background: var(--sa-mod); box-shadow: none;
}
.siOuterCard { padding: 0; border: 0; background: none; }
.sa-section-head { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--sa-line-2); }
.sa-section-head h2 { font-size: 14.5px; letter-spacing: -.02em; color: var(--sa-ink); }
.sa-section-head p { margin: 3px 0 0; color: var(--sa-sub-2); font-size: 11.5px; font-weight: 400; }

/* ── 공용 조각: 칩 · 보기전환 · 검색 · 단추 ──────────────── */
.sa-chip {
  height: 38px; padding: 0 18px; border-radius: 0;
  border: 1px solid var(--sa-line); background: var(--sa-band);
  color: var(--sa-text); font-size: 15px; font-weight: 700;
}
.sa-chip:hover { border-color: var(--sa-gold); color: var(--sa-ink); }
.sa-chip.is-on, .sa-chip.sa-growth-chip.is-on {
  background: var(--sa-chrome); border-color: var(--sa-chrome);
  color: var(--sa-gold-hi); font-weight: 700;
}
.sa-chip.sa-growth-chip { background: var(--sa-mod); }
.sa-chip-wrap { gap: 5px; }
.sa-growth-sort-wrap {
  margin: 0 0 10px; padding: 8px 10px; border-radius: 0;
  border: 1px solid var(--sa-line-2); background: var(--sa-band);
}
.sa-growth-sort-label { height: 38px; padding: 0 10px 0 0; color: var(--sa-sub-2); font-size: 13.5px; font-weight: 700; }

.sa-view-toggle { gap: 0; padding: 0; border-radius: 0; border: 1px solid var(--sa-line); background: var(--sa-mod); }
.sa-view-toggle-btn {
  min-height: 38px; padding: 0 20px; border-radius: 0;
  border-right: 1px solid var(--sa-line); color: var(--sa-text);
  font-size: 15px; font-weight: 700;
}
.sa-view-toggle-btn:last-child { border-right: 0; }
.sa-view-toggle-btn.is-on { background: var(--sa-chrome); color: var(--sa-gold-hi); }

.sa-filter-bar { gap: 10px; margin-bottom: 10px; }
.sa-search-form { gap: 0; border: 2px solid var(--sa-chrome); background: var(--sa-mod); }
.sa-search-form input {
  flex: 1; height: 38px; border: 0; padding: 0 12px; border-radius: 0;
  background: transparent; font: inherit; font-size: 13.5px; outline: none;
}
.sa-search-form select {
  height: 38px; border: 0; border-left: 1px solid var(--sa-line); border-radius: 0;
  background: var(--sa-band); color: var(--sa-ink); padding: 0 10px;
  font: inherit; font-size: 13.5px; font-weight: 400;
}
.sa-search-form button {
  height: 38px; padding: 0 20px; border: 0; border-radius: 0;
  background: var(--sa-chrome); color: #fff; font: inherit; font-size: 13.5px; font-weight: 700;
}
.sa-info-btn, .sa-species-back, .sa-list-more button,
.sa-detail-open, .sa-calc-open, .sa-mount-card-open, .sa-pet-list-btn {
  border-radius: 0; border: 1px solid var(--sa-line); background: var(--sa-band);
  color: var(--sa-ink); font-weight: 700; box-shadow: none;
}
.sa-info-btn:hover, .sa-species-back:hover, .sa-list-more button:hover,
.sa-detail-open:hover, .sa-calc-open:hover, .sa-mount-card-open:hover, .sa-pet-list-btn:hover {
  background: var(--sa-chrome); border-color: var(--sa-chrome); color: var(--sa-gold-hi);
}
.sa-list-more button { height: 34px; padding: 0 26px; font-size: 12.5px; }
.sa-detail-open { min-height: 28px; padding: 0 11px; font-size: 12.5px; }
.sa-empty {
  padding: 40px 20px; border-radius: 0; border: 1px solid var(--sa-line);
  background: var(--sa-mod); color: var(--sa-sub-2); font-size: 12.5px; font-weight: 400;
}
.sa-tag { border-radius: 0; background: var(--sa-chrome); color: var(--sa-gold-hi); font-size: 10.5px; font-weight: 700; }

/* ── 꼬리말 ─────────────────────────────────────────────── */
.sa-footer { background: var(--sa-chrome); border-top: 0; color: #8b93a3; font-size: 13px; }
.sa-footer-inner { max-width: 1200px; padding: 18px 12px 28px; }
.sa-footer strong { color: #c3cad8; }

/* ════════════════════════════════════════════════════════
   페트정보 (info/pet.php)
   ════════════════════════════════════════════════════════ */
.sa-pet-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.sa-pet-card { padding: 10px; border-radius: 0; border: 1px solid var(--sa-line); background: var(--sa-mod); box-shadow: none; }
.sa-pet-card:hover { border-color: var(--sa-gold); box-shadow: none; transform: none; }
/* 그림을 왼쪽에 세워 카드 키를 줄인다. 오른쪽 위에 단추 두 개가 떠 있어 그만큼 비워둔다. */
.sa-pet-top { grid-template-columns: 180px minmax(0,1fr); gap: 12px; padding-right: 128px; }
.sa-detail-open-group { top: 10px; right: 10px; gap: 4px; }
.sa-pet-image { min-height: 176px; margin: 0; border-radius: 0; border: 1px solid var(--sa-line-2); background: var(--sa-band); }
/* 스프라이트는 원본 크기 그대로. max-height 는 드물게 큰 그림만 막는다. */
/* 스프라이트 원본 크기 그대로. 실측 최대 170x168 이라 그만큼은 눌리지 않게 잡는다.
   max-* 는 더 큰 그림만 비율대로 줄일 뿐 작은 것을 늘리지는 않는다. */
.sa-pet-image img { width: auto; height: auto; max-width: 100%; max-height: 168px;
  object-fit: contain; image-rendering: pixelated; filter: none; }
.sa-pet-body { padding: 8px 0 0; }
.sa-pet-name { font-size: 15.5px; letter-spacing: -.02em; color: var(--sa-ink); }
.sa-pet-source { margin-top: 4px; min-height: 0; color: var(--sa-sub); font-size: 12.5px; font-weight: 400; }
.sa-pet-meta { gap: 4px; margin-top: 7px; }
.sa-pet-meta span {
  min-height: 20px; padding: 0 7px; border-radius: 0;
  border: 1px solid #cfdfea; background: #eaf1f6; color: var(--sa-blue);
  font-size: 11.5px; font-weight: 700;
}
.sa-attr-mini { margin-top: 8px; }
.sa-card-table { border-radius: 0; border-color: var(--sa-line-2); background: var(--sa-mod); }
.sa-card-cell { border-right-color: var(--sa-line-2); color: var(--sa-text); }
.sa-card-cell.head { background: var(--sa-band); color: var(--sa-ink); }
.sa-card-row { border-bottom-color: var(--sa-line-2); }
.sa-card-bottom-item { border-radius: 0; border-color: var(--sa-line-2); background: var(--sa-mod); color: var(--sa-sub); }
.sa-card-bottom-item strong { color: var(--sa-ink); }

.sa-pet-list { gap: 0; }
.sa-pet-list-row { padding: 9px 11px; border-radius: 0; border: 1px solid var(--sa-line); border-bottom: 0; background: var(--sa-mod); box-shadow: none; }
.sa-pet-list-row:last-child { border-bottom: 1px solid var(--sa-line); }
.sa-pet-list-row:hover { background: var(--sa-gold-bg); }
.sa-pet-list-img { width: 46px; height: 46px; border-radius: 0; border: 1px solid var(--sa-line-2); background: var(--sa-band); }
.sa-pet-list-name { font-size: 14.5px; font-weight: 700; color: var(--sa-ink); }
.sa-pet-list-meta span { border-radius: 0; background: var(--sa-band); border: 1px solid var(--sa-line-2); color: var(--sa-sub); font-weight: 500; }
.sa-pet-list-stats-table b, .sa-pet-list-stat-val { font-size: 14.5px; color: var(--sa-ink); }

.sa-species-tile { padding: 10px 6px; border-radius: 0; border: 1px solid var(--sa-line); background: var(--sa-mod); box-shadow: none; }
.sa-species-tile:hover { transform: none; border-color: var(--sa-gold); box-shadow: none; }
.sa-species-tile-name { font-size: 13px; font-weight: 700; color: var(--sa-ink); }
.sa-species-tile-count { color: var(--sa-sub-2); font-size: 11.5px; font-weight: 400; }
.sa-species-detail-head, .sa-species-group-head { border-bottom-color: var(--sa-line); }
.sa-species-detail-head h3, .sa-species-group-head h3 { font-size: 14px; color: var(--sa-ink); }

/* 창 셋 — 흰 바탕에 1px 테두리 */
.sa-detail-panel, .sa-calc-panel, .sa-mount-panel {
  border-radius: 0; border: 1px solid var(--sa-line); background: var(--sa-mod);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.sa-detail-head, .sa-mount-head { border-bottom: 1px solid var(--sa-line); background: var(--sa-band); }
.sa-detail-head h3, .sa-mount-head h3, .sa-calc-pet-nameattr h3 { color: var(--sa-ink); font-size: 15px; }
.sa-detail-section { border-radius: 0; border: 1px solid var(--sa-line-2); background: var(--sa-band); }
.sa-detail-section h4 { color: var(--sa-ink); font-size: 13px; }
.sa-detail-close, .sa-mount-close, .sa-calc-close { border-radius: 0; }
.sa-skin-card, .sa-mount-item, .sa-calc-pet-card, .sa-calc-input-card,
.sa-calc-stat-box, .sa-calc-box, .sa-calc-result-item, .sa-rank-box, .sa-growth-panel {
  border-radius: 0; border: 1px solid var(--sa-line-2); background: var(--sa-mod); box-shadow: none;
}
.sa-calc-run-btn, .sa-calc-btn { border-radius: 0; border: 0; background: var(--sa-chrome); color: var(--sa-gold-hi); font-weight: 700; }
.sa-calc-run-btn:hover, .sa-calc-btn:hover { background: #273044; }
.sa-calc-link-btn { border-radius: 0; color: var(--sa-sub); }
.sa-calc-chip, .sa-calc-pill, .sa-calc-sum-pill, .sa-calc-attr-chips > *, .sa-calc-badge-row > * {
  border-radius: 0; border: 1px solid var(--sa-line); background: var(--sa-band);
  color: var(--sa-sub); font-size: 11.5px; font-weight: 700;
}
.sa-calc-hero-badge, .sa-calc-hero-kicker-pill, .sa-calc-dist-bar,
.sa-calc-dist-bar-v2, .sa-calc-dist-bar-wrap, .sa-calc-dist-bar-wrap-v2 { border-radius: 0; }
.sa-calc-stat-big { color: var(--sa-ink); }
.sa-calc-input-title, .sa-calc-result-title { color: var(--sa-ink); font-size: 13px; }
.sa-calc-numinput input, .sa-calc-step, .sa-calc-step-v2 { border-radius: 0; }
.sa-growth-table th, .sa-growth-table td, .sa-rank-table th, .sa-rank-table td { border-color: var(--sa-line-2); }

@media (max-width: 900px) {
  .sa-pet-grid { grid-template-columns: 1fr; }
  .sa-pet-top { padding-right: 0; }
  .sa-detail-open-group { position: static; margin-bottom: 8px; }
}

/* ════════════════════════════════════════════════════════
   아이템정보 (info/item.php)
   ════════════════════════════════════════════════════════ */
.siControl { background: var(--sa-mod); border: 1px solid var(--sa-line); border-radius: 0; padding: 0; margin-bottom: 12px; box-shadow: none; }
/* 분류탭 — 페트정보 칩(.sa-chip)과 같은 문법: 낱개 상자 + 간격 */
.siTabs { display: flex; flex-wrap: wrap; gap: 5px; padding: 10px 11px;
  background: var(--sa-mod); border-bottom: 1px solid var(--sa-line); }
.siTab { display: inline-flex; align-items: center; height: 38px; padding: 0 18px;
  border: 1px solid var(--sa-line); border-radius: 0; background: var(--sa-band);
  color: var(--sa-text); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.siTab:hover { transform: none; box-shadow: none;
  background: var(--sa-band); border-color: var(--sa-gold); color: var(--sa-ink); }
.siTab.on { background: var(--sa-chrome); border-color: var(--sa-chrome); color: var(--sa-gold-hi); }
.siToolbar { padding: 10px 11px; gap: 12px; }
.siMeta { gap: 6px; }
.siPill {
  min-height: 0; padding: 3px 9px; border-radius: 0;
  background: var(--sa-band); border: 1px solid var(--sa-line);
  font-size: 13px; font-weight: 400; color: var(--sa-text);
}
.siPill b { color: var(--sa-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.siSearch { gap: 0; align-items: stretch; border: 2px solid var(--sa-chrome); background: var(--sa-mod); }
.siSelect, .siInput {
  height: 38px; border: 0; border-radius: 0; background: var(--sa-mod);
  color: var(--sa-ink); font: inherit; font-size: 13.5px; font-weight: 400;
}
.siSelect { border-right: 1px solid var(--sa-line); background: var(--sa-band); padding: 0 10px; }
.siInput { width: 290px; max-width: 46vw; padding: 0 12px; }
.siButton {
  height: 38px; border: 0; border-radius: 0; padding: 0 20px;
  background: var(--sa-chrome); color: #fff; font: inherit; font-size: 13.5px; font-weight: 700;
  box-shadow: none;
}
.siButton:hover { filter: none; background: #273044; }

/* 능력치 있는 카드와 없는 카드의 키 차이가 커서 격자로 놓으면
   짧은 쪽 아래에 빈틈이 크게 남는다. 다단(column)으로 흘리면
   카드가 제 키대로 위아래로 채워져 빈틈이 사라진다.
   대신 읽는 순서가 왼쪽 줄을 다 채우고 오른쪽으로 넘어가는 신문식이 된다. */
.siGrid { display: block; columns: 2; column-gap: 12px; }
.siCard { break-inside: avoid; -webkit-column-break-inside: avoid; margin: 0 0 12px; }
.siCard { padding: 12px; border-radius: 0; border: 1px solid var(--sa-line); background: var(--sa-mod); box-shadow: none; }
.siCard:before { display: none; }
.siCard:hover { border-color: var(--sa-gold); box-shadow: none; }
.siCardTop { grid-template-columns: 88px minmax(0,1fr); gap: 12px; }
.siIconBox { width: 88px; height: 88px; border-radius: 0; border: 1px solid var(--sa-line-2); background: var(--sa-band); box-shadow: none; }
/* 아이콘 원본은 대부분 60x60, 큰 것이 75x75 다. 상한을 76 으로 둬야 안 줄어든다. */
.siIconBox img { max-width: 76px; max-height: 76px; }
.siName { margin: 0 0 7px; font-size: 15.5px; font-weight: 700; line-height: 1.3; letter-spacing: 0; color: var(--sa-ink); }
.siChips { gap: 5px; margin-bottom: 7px; }
.siChip {
  min-height: 0; padding: 1px 7px; border-radius: 0;
  background: #eaf1f6; border: 1px solid #cfdfea; color: var(--sa-blue);
  font-size: 11.5px; font-weight: 700;
}
.siChip.siSetChip { background: var(--sa-gold-bg); border-color: #ecd9a4; color: #8a6300; }
.siRouteTitle { margin-bottom: 3px; font-size: 12px; font-weight: 700; color: var(--sa-sub-2); }
/* 획득경로는 카드에서 제일 자주 찾는 줄이라 본문색과 구분되게 파랑을 준다. */
.siRoute { font-size: 12.5px; font-weight: 500; color: var(--sa-blue); line-height: 1.45; }
.siRouteTitle { color: var(--sa-sub-2); }
.siOptionTitle { margin: 13px 0 7px; font-size: 14px; font-weight: 700; color: var(--sa-ink); }
.siHit { min-height: 0; padding: 1px 7px; border-radius: 0; background: var(--sa-gold-bg); border: 1px solid #ecd9a4; color: #8a6300; font-size: 11.5px; font-weight: 700; }

/* 표 셀 — 페트정보 .sa-card-cell 과 같은 규칙 (이름+값 한 줄, 가운데) */
.siStats { border-radius: 0; border: 1px solid var(--sa-line-2); background: var(--sa-mod); border-collapse: collapse; border-spacing: 0; }
.siStats td { height: 42px; padding: 8px 0; border: 1px solid var(--sa-line-2); vertical-align: middle; }
.siStats tr:first-child td { border-top: 1px solid var(--sa-line-2); }
/* 이름은 왼쪽, 수치는 오른쪽. 양끝에 여백을 조금 준다. */
.siStatCell { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 11px; }
.siStatKey { white-space: nowrap; text-align: left; font-size: 15px; font-weight: 800; color: var(--sa-text); }
.siStatVal { font-size: 15px; font-weight: 900; color: var(--sa-ink); text-align: right; font-variant-numeric: tabular-nums; }
.siValPos { color: var(--sa-blue); }
.siValNeg { color: var(--sa-red); }
.siValZero { color: #b3b9c4; }
.siAttr1 { color: var(--sa-green); }
.siAttr2 { color: var(--sa-blue); }
.siAttr3 { color: var(--sa-red); }
.siAttr4 { color: var(--sa-gold); }
.siBottom {
  margin-top: 10px; padding: 9px 10px; border-radius: 0;
  border: 1px solid var(--sa-line-2); border-style: solid; background: var(--sa-band);
  font-size: 13px; font-weight: 400; color: var(--sa-text); line-height: 1.55;
}
.siMagic { color: var(--sa-ink); }
.siMagic b { color: var(--sa-gold); }
.siDescLine { color: var(--sa-sub); margin-top: 3px; }
.siEmpty { padding: 46px 20px; border-radius: 0; border: 1px solid var(--sa-line); background: var(--sa-mod); color: var(--sa-sub-2); font-size: 13.5px; font-weight: 400; }
.siPager { justify-content: center; gap: 6px; margin-top: 12px; }
.siPageBtn {
  height: 36px; min-width: 80px; padding: 0 16px; border-radius: 0;
  border: 1px solid var(--sa-line); background: var(--sa-mod); color: var(--sa-ink);
  font: inherit; font-size: 13.5px; font-weight: 700;
}
.siPageBtn:hover:not(:disabled) { background: var(--sa-chrome); border-color: var(--sa-chrome); color: #fff; }

@media (max-width: 900px) { .siGrid { columns: 1; } }

/* ════════════════════════════════════════════════════════
   페이지별 무리 (family) — 각 페이지가 자기 이름표로 같은 모양을 반복한다.
   -wrap 은 본문 통, -card/-box/-section 은 모듈, -badge 는 꼬리표, -btn 은 단추.
   이름만 다르고 구실이 같으므로 한 벌로 묶어 덮는다.
   ════════════════════════════════════════════════════════ */
.sa-download-wrap,
.sa-install-wrap,
.sa-discord-wrap,
.sa-error-wrap,
.sa-guide-wrap,
.sa-system-wrap,
.sa-mount-wrap,
.sa-promo-wrap {
  width: 1200px; max-width: calc(100% - 24px); margin: 16px auto 26px; padding: 14px;
  background: var(--sa-page); border: 1px solid #0f1420; border-radius: 4px;
  box-shadow: 0 14px 40px rgba(0,0,0,.42); color: var(--sa-text);
}
.sa-download-hero,
.sa-install-hero,
.sa-discord-hero,
.sa-error-hero,
.sa-guide-hero,
.sa-system-hero,
.sa-mount-hero,
.sa-promo-hero {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  min-height: 0; padding: 0 0 11px; margin-bottom: 12px;
  border: 0; border-bottom: 2px solid var(--sa-chrome); border-radius: 0;
  background: none; box-shadow: none;
}
.sa-download-hero:before,
.sa-download-hero:after,
.sa-install-hero:before,
.sa-install-hero:after,
.sa-discord-hero:before,
.sa-discord-hero:after,
.sa-error-hero:before,
.sa-error-hero:after,
.sa-guide-hero:before,
.sa-guide-hero:after,
.sa-system-hero:before,
.sa-system-hero:after,
.sa-mount-hero:before,
.sa-mount-hero:after,
.sa-promo-hero:before,
.sa-promo-hero:after { display: none; }
.sa-download-badge,
.sa-download-kicker,
.sa-install-badge,
.sa-install-kicker,
.sa-discord-badge,
.sa-discord-kicker,
.sa-error-badge,
.sa-error-kicker,
.sa-guide-badge,
.sa-guide-kicker,
.sa-system-badge,
.sa-system-kicker,
.sa-mount-badge,
.sa-mount-kicker,
.sa-promo-badge,
.sa-promo-kicker {
  display: inline-block; height: auto; min-height: 0; padding: 2px 8px;
  border: 0; border-radius: 0; background: var(--sa-chrome); color: var(--sa-gold-hi);
  font-size: 10.5px; font-weight: 900; letter-spacing: .08em;
}
.sa-download-title,
.sa-install-title,
.sa-discord-title,
.sa-error-title,
.sa-guide-title,
.sa-system-title,
.sa-mount-title,
.sa-promo-title {
  margin: 0; color: var(--sa-ink); font-size: 21px; line-height: 1.3;
  letter-spacing: -.03em; font-weight: 900; text-shadow: none;
}
.sa-download-desc,
.sa-download-sub,
.sa-install-desc,
.sa-install-sub,
.sa-discord-desc,
.sa-discord-sub,
.sa-error-desc,
.sa-error-sub,
.sa-guide-desc,
.sa-guide-sub,
.sa-system-desc,
.sa-system-sub,
.sa-mount-desc,
.sa-mount-sub,
.sa-promo-desc,
.sa-promo-sub {
  margin: 0; color: var(--sa-sub); font-size: 13px; font-weight: 400; line-height: 1.6;
}
.sa-download-card,
.sa-download-box,
.sa-download-section,
.sa-download-item,
.sa-download-step,
.sa-download-notice,
.sa-download-flow,
.sa-download-content,
.sa-install-card,
.sa-install-box,
.sa-install-section,
.sa-install-item,
.sa-install-step,
.sa-install-notice,
.sa-install-flow,
.sa-install-content,
.sa-discord-card,
.sa-discord-box,
.sa-discord-section,
.sa-discord-item,
.sa-discord-step,
.sa-discord-notice,
.sa-discord-flow,
.sa-discord-content,
.sa-error-card,
.sa-error-box,
.sa-error-section,
.sa-error-item,
.sa-error-step,
.sa-error-notice,
.sa-error-flow,
.sa-error-content,
.sa-guide-card,
.sa-guide-box,
.sa-guide-section,
.sa-guide-item,
.sa-guide-step,
.sa-guide-notice,
.sa-guide-flow,
.sa-guide-content,
.sa-system-card,
.sa-system-box,
.sa-system-section,
.sa-system-item,
.sa-system-step,
.sa-system-notice,
.sa-system-flow,
.sa-system-content,
.sa-mount-card,
.sa-mount-box,
.sa-mount-section,
.sa-mount-item,
.sa-mount-step,
.sa-mount-notice,
.sa-mount-flow,
.sa-mount-content,
.sa-promo-card,
.sa-promo-box,
.sa-promo-section,
.sa-promo-item,
.sa-promo-step,
.sa-promo-notice,
.sa-promo-flow,
.sa-promo-content {
  border-radius: 0; border: 1px solid var(--sa-line); background: var(--sa-mod);
  box-shadow: none; color: var(--sa-text);
}
.sa-download-card:hover,
.sa-download-item:hover,
.sa-install-card:hover,
.sa-install-item:hover,
.sa-discord-card:hover,
.sa-discord-item:hover,
.sa-error-card:hover,
.sa-error-item:hover,
.sa-guide-card:hover,
.sa-guide-item:hover,
.sa-system-card:hover,
.sa-system-item:hover,
.sa-mount-card:hover,
.sa-mount-item:hover,
.sa-promo-card:hover,
.sa-promo-item:hover { transform: none; box-shadow: none; border-color: var(--sa-gold); }
.sa-download-btn,
.sa-download-button,
.sa-download-open,
.sa-download-main-btn,
.sa-install-btn,
.sa-install-button,
.sa-install-open,
.sa-install-main-btn,
.sa-discord-btn,
.sa-discord-button,
.sa-discord-open,
.sa-discord-main-btn,
.sa-error-btn,
.sa-error-button,
.sa-error-open,
.sa-error-main-btn,
.sa-guide-btn,
.sa-guide-button,
.sa-guide-open,
.sa-guide-main-btn,
.sa-system-btn,
.sa-system-button,
.sa-system-open,
.sa-system-main-btn,
.sa-mount-btn,
.sa-mount-button,
.sa-mount-open,
.sa-mount-main-btn,
.sa-promo-btn,
.sa-promo-button,
.sa-promo-open,
.sa-promo-main-btn {
  border-radius: 0; border: 1px solid var(--sa-line); background: var(--sa-band);
  color: var(--sa-ink); font-weight: 700; box-shadow: none; text-shadow: none;
}
.sa-download-btn:hover,
.sa-download-button:hover,
.sa-download-open:hover,
.sa-download-main-btn:hover,
.sa-install-btn:hover,
.sa-install-button:hover,
.sa-install-open:hover,
.sa-install-main-btn:hover,
.sa-discord-btn:hover,
.sa-discord-button:hover,
.sa-discord-open:hover,
.sa-discord-main-btn:hover,
.sa-error-btn:hover,
.sa-error-button:hover,
.sa-error-open:hover,
.sa-error-main-btn:hover,
.sa-guide-btn:hover,
.sa-guide-button:hover,
.sa-guide-open:hover,
.sa-guide-main-btn:hover,
.sa-system-btn:hover,
.sa-system-button:hover,
.sa-system-open:hover,
.sa-system-main-btn:hover,
.sa-mount-btn:hover,
.sa-mount-button:hover,
.sa-mount-open:hover,
.sa-mount-main-btn:hover,
.sa-promo-btn:hover,
.sa-promo-button:hover,
.sa-promo-open:hover,
.sa-promo-main-btn:hover { background: var(--sa-chrome); border-color: var(--sa-chrome); color: var(--sa-gold-hi); transform: none; }
.sa-download-chip,
.sa-download-pill,
.sa-download-meta,
.sa-install-chip,
.sa-install-pill,
.sa-install-meta,
.sa-discord-chip,
.sa-discord-pill,
.sa-discord-meta,
.sa-error-chip,
.sa-error-pill,
.sa-error-meta,
.sa-guide-chip,
.sa-guide-pill,
.sa-guide-meta,
.sa-system-chip,
.sa-system-pill,
.sa-system-meta,
.sa-mount-chip,
.sa-mount-pill,
.sa-mount-meta,
.sa-promo-chip,
.sa-promo-pill,
.sa-promo-meta {
  border-radius: 0; border: 1px solid var(--sa-line); background: var(--sa-band);
  color: var(--sa-sub); font-size: 12px; font-weight: 700;
}
.sa-download-tab,
.sa-install-tab,
.sa-discord-tab,
.sa-error-tab,
.sa-guide-tab,
.sa-system-tab,
.sa-mount-tab,
.sa-promo-tab {
  border: 0; border-right: 1px solid var(--sa-line); border-radius: 0;
  background: transparent; color: var(--sa-text);
  padding: 0 22px; line-height: 44px; font-size: 15px; font-weight: 700;
}
.sa-download-tab.on,
.sa-install-tab.on,
.sa-discord-tab.on,
.sa-error-tab.on,
.sa-guide-tab.on,
.sa-system-tab.on,
.sa-mount-tab.on,
.sa-promo-tab.on { background: var(--sa-chrome); color: var(--sa-gold-hi); }
.sa-download-tabs,
.sa-install-tabs,
.sa-discord-tabs,
.sa-error-tabs,
.sa-guide-tabs,
.sa-system-tabs,
.sa-mount-tabs,
.sa-promo-tabs { gap: 0; border-radius: 0; border: 1px solid var(--sa-line); background: var(--sa-band); overflow: hidden; }
.sa-download-input,
.sa-download-search-box,
.sa-install-input,
.sa-install-search-box,
.sa-discord-input,
.sa-discord-search-box,
.sa-error-input,
.sa-error-search-box,
.sa-guide-input,
.sa-guide-search-box,
.sa-system-input,
.sa-system-search-box,
.sa-mount-input,
.sa-mount-search-box,
.sa-promo-input,
.sa-promo-search-box {
  height: 38px; border-radius: 0; border: 1px solid var(--sa-line);
  background: var(--sa-mod); color: var(--sa-ink); font-size: 13.5px;
}

/* 안내 페이지 (newbie_guide · yaehobak_guide) — 이름표가 제각각이라 따로 적는다 */
.check-card, .effect-box, .focus-body, .cmd-box, .element-row, .daily-grid > * {
  border-radius: 0; border: 1px solid var(--sa-line); background: var(--sa-mod); box-shadow: none;
}
.element-badge, .badge-mini {
  border-radius: 0; background: var(--sa-band); border: 1px solid var(--sa-line);
  color: var(--sa-sub); font-weight: 700;
}

/* 캐릭터랭킹 · 마일리지 계산기 · 게임도움말 · 페트도구 */
.cr-power, .cr-total-col { font-variant-numeric: tabular-nums; }
.miBadge { border-radius: 0; background: var(--sa-chrome); color: var(--sa-gold-hi); font-weight: 900; }
.miAfterBar, .miActions > * { border-radius: 0; }
.pgh_card, .pgh_cardAbility, .pgh_cardStat {
  border-radius: 0; border: 1px solid var(--sa-line); background: var(--sa-mod); box-shadow: none;
}
.pgh_backBtn, .gf-btn {
  border-radius: 0; border: 1px solid var(--sa-line); background: var(--sa-band);
  color: var(--sa-ink); font-weight: 700; box-shadow: none;
}
.pgh_backBtn:hover, .gf-btn:hover { background: var(--sa-chrome); border-color: var(--sa-chrome); color: var(--sa-gold-hi); }
.gf-base, .gf-field { border-radius: 0; }

/* ── 글자색 강제 ─────────────────────────────────────────
   원래 디자인은 어두운 카드 위 흰 글자였다. 카드를 흰 바탕으로 바꿨으니
   글자색도 같이 뒤집어야 읽힌다. 각 페이지가 자기 규칙에서 색을 더 좁은
   선택자로 박아둬서, 여기서는 !important 로 눌러야 이긴다. */
.sa-download-hero-inner,
.sa-download-hero-inner > div,
.sa-download-head-left,
.sa-download-head-main,
.sa-install-hero-inner,
.sa-install-hero-inner > div,
.sa-install-head-left,
.sa-install-head-main,
.sa-discord-hero-inner,
.sa-discord-hero-inner > div,
.sa-discord-head-left,
.sa-discord-head-main,
.sa-error-hero-inner,
.sa-error-hero-inner > div,
.sa-error-head-left,
.sa-error-head-main,
.sa-guide-hero-inner,
.sa-guide-hero-inner > div,
.sa-guide-head-left,
.sa-guide-head-main,
.sa-system-hero-inner,
.sa-system-hero-inner > div,
.sa-system-head-left,
.sa-system-head-main,
.sa-mount-hero-inner,
.sa-mount-hero-inner > div,
.sa-mount-head-left,
.sa-mount-head-main,
.sa-promo-hero-inner,
.sa-promo-hero-inner > div,
.sa-promo-head-left,
.sa-promo-head-main {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.sa-download-title,
.sa-install-title,
.sa-discord-title,
.sa-error-title,
.sa-guide-title,
.sa-system-title,
.sa-mount-title,
.sa-promo-title { color: var(--sa-ink) !important; text-shadow: none !important; }
.sa-download-desc,
.sa-download-sub,
.sa-install-desc,
.sa-install-sub,
.sa-discord-desc,
.sa-discord-sub,
.sa-error-desc,
.sa-error-sub,
.sa-guide-desc,
.sa-guide-sub,
.sa-system-desc,
.sa-system-sub,
.sa-mount-desc,
.sa-mount-sub,
.sa-promo-desc,
.sa-promo-sub { color: var(--sa-sub) !important; text-shadow: none !important; }
.sa-download-badge,
.sa-download-kicker,
.sa-install-badge,
.sa-install-kicker,
.sa-discord-badge,
.sa-discord-kicker,
.sa-error-badge,
.sa-error-kicker,
.sa-guide-badge,
.sa-guide-kicker,
.sa-system-badge,
.sa-system-kicker,
.sa-mount-badge,
.sa-mount-kicker,
.sa-promo-badge,
.sa-promo-kicker { color: var(--sa-gold-hi) !important; background: var(--sa-chrome) !important; }
.sa-download-btn,
.sa-download-button,
.sa-download-open,
.sa-download-main-btn,
.sa-install-btn,
.sa-install-button,
.sa-install-open,
.sa-install-main-btn,
.sa-discord-btn,
.sa-discord-button,
.sa-discord-open,
.sa-discord-main-btn,
.sa-error-btn,
.sa-error-button,
.sa-error-open,
.sa-error-main-btn,
.sa-guide-btn,
.sa-guide-button,
.sa-guide-open,
.sa-guide-main-btn,
.sa-system-btn,
.sa-system-button,
.sa-system-open,
.sa-system-main-btn,
.sa-mount-btn,
.sa-mount-button,
.sa-mount-open,
.sa-mount-main-btn,
.sa-promo-btn,
.sa-promo-button,
.sa-promo-open,
.sa-promo-main-btn {
  color: var(--sa-ink) !important; background: var(--sa-band) !important;
  border-color: var(--sa-line) !important;
}
.sa-download-btn:hover,
.sa-download-button:hover,
.sa-download-open:hover,
.sa-download-main-btn:hover,
.sa-install-btn:hover,
.sa-install-button:hover,
.sa-install-open:hover,
.sa-install-main-btn:hover,
.sa-discord-btn:hover,
.sa-discord-button:hover,
.sa-discord-open:hover,
.sa-discord-main-btn:hover,
.sa-error-btn:hover,
.sa-error-button:hover,
.sa-error-open:hover,
.sa-error-main-btn:hover,
.sa-guide-btn:hover,
.sa-guide-button:hover,
.sa-guide-open:hover,
.sa-guide-main-btn:hover,
.sa-system-btn:hover,
.sa-system-button:hover,
.sa-system-open:hover,
.sa-system-main-btn:hover,
.sa-mount-btn:hover,
.sa-mount-button:hover,
.sa-mount-open:hover,
.sa-mount-main-btn:hover,
.sa-promo-btn:hover,
.sa-promo-button:hover,
.sa-promo-open:hover,
.sa-promo-main-btn:hover {
  color: var(--sa-gold-hi) !important; background: var(--sa-chrome) !important;
  border-color: var(--sa-chrome) !important;
}
.sa-download-card,
.sa-download-box,
.sa-download-section,
.sa-download-item,
.sa-download-step,
.sa-download-notice,
.sa-download-flow,
.sa-download-content,
.sa-install-card,
.sa-install-box,
.sa-install-section,
.sa-install-item,
.sa-install-step,
.sa-install-notice,
.sa-install-flow,
.sa-install-content,
.sa-discord-card,
.sa-discord-box,
.sa-discord-section,
.sa-discord-item,
.sa-discord-step,
.sa-discord-notice,
.sa-discord-flow,
.sa-discord-content,
.sa-error-card,
.sa-error-box,
.sa-error-section,
.sa-error-item,
.sa-error-step,
.sa-error-notice,
.sa-error-flow,
.sa-error-content,
.sa-guide-card,
.sa-guide-box,
.sa-guide-section,
.sa-guide-item,
.sa-guide-step,
.sa-guide-notice,
.sa-guide-flow,
.sa-guide-content,
.sa-system-card,
.sa-system-box,
.sa-system-section,
.sa-system-item,
.sa-system-step,
.sa-system-notice,
.sa-system-flow,
.sa-system-content,
.sa-mount-card,
.sa-mount-box,
.sa-mount-section,
.sa-mount-item,
.sa-mount-step,
.sa-mount-notice,
.sa-mount-flow,
.sa-mount-content,
.sa-promo-card,
.sa-promo-box,
.sa-promo-section,
.sa-promo-item,
.sa-promo-step,
.sa-promo-notice,
.sa-promo-flow,
.sa-promo-content {
  color: var(--sa-text) !important;
}
.sa-download-card h1,
.sa-download-card h2,
.sa-download-card h3,
.sa-download-card h4,
.sa-download-box h1,
.sa-download-box h2,
.sa-download-box h3,
.sa-download-box h4,
.sa-download-section h1,
.sa-download-section h2,
.sa-download-section h3,
.sa-download-section h4,
.sa-install-card h1,
.sa-install-card h2,
.sa-install-card h3,
.sa-install-card h4,
.sa-install-box h1,
.sa-install-box h2,
.sa-install-box h3,
.sa-install-box h4,
.sa-install-section h1,
.sa-install-section h2,
.sa-install-section h3,
.sa-install-section h4,
.sa-discord-card h1,
.sa-discord-card h2,
.sa-discord-card h3,
.sa-discord-card h4,
.sa-discord-box h1,
.sa-discord-box h2,
.sa-discord-box h3,
.sa-discord-box h4,
.sa-discord-section h1,
.sa-discord-section h2,
.sa-discord-section h3,
.sa-discord-section h4,
.sa-error-card h1,
.sa-error-card h2,
.sa-error-card h3,
.sa-error-card h4,
.sa-error-box h1,
.sa-error-box h2,
.sa-error-box h3,
.sa-error-box h4,
.sa-error-section h1,
.sa-error-section h2,
.sa-error-section h3,
.sa-error-section h4,
.sa-guide-card h1,
.sa-guide-card h2,
.sa-guide-card h3,
.sa-guide-card h4,
.sa-guide-box h1,
.sa-guide-box h2,
.sa-guide-box h3,
.sa-guide-box h4,
.sa-guide-section h1,
.sa-guide-section h2,
.sa-guide-section h3,
.sa-guide-section h4,
.sa-system-card h1,
.sa-system-card h2,
.sa-system-card h3,
.sa-system-card h4,
.sa-system-box h1,
.sa-system-box h2,
.sa-system-box h3,
.sa-system-box h4,
.sa-system-section h1,
.sa-system-section h2,
.sa-system-section h3,
.sa-system-section h4,
.sa-mount-card h1,
.sa-mount-card h2,
.sa-mount-card h3,
.sa-mount-card h4,
.sa-mount-box h1,
.sa-mount-box h2,
.sa-mount-box h3,
.sa-mount-box h4,
.sa-mount-section h1,
.sa-mount-section h2,
.sa-mount-section h3,
.sa-mount-section h4,
.sa-promo-card h1,
.sa-promo-card h2,
.sa-promo-card h3,
.sa-promo-card h4,
.sa-promo-box h1,
.sa-promo-box h2,
.sa-promo-box h3,
.sa-promo-box h4,
.sa-promo-section h1,
.sa-promo-section h2,
.sa-promo-section h3,
.sa-promo-section h4 {
  color: var(--sa-ink) !important; text-shadow: none !important;
}

/* ── 게임도움말 (info/game_help.php) — pgh_ 무리 ──────────── */
.pgh_grid { gap: 10px; }
.pgh_card, .pgh_cardAbility, .pgh_cardStat, .pgh_imgWrap,
.pgh_recipeRow, .pgh_recipeListRow, .pgh_recipeMat, .pgh_recipeMats {
  border-radius: 0 !important; border: 1px solid var(--sa-line) !important;
  background: var(--sa-mod) !important; box-shadow: none !important;
  color: var(--sa-text) !important;
}
.pgh_card:hover { transform: none; border-color: var(--sa-gold) !important; }
.pgh_cardName, .pgh_rlText { color: var(--sa-ink) !important; text-shadow: none !important; }
.pgh_sub, .pgh_recipeRate, .pgh_rlRate { color: var(--sa-sub) !important; }
.pgh_tierBadge { border-radius: 0 !important; background: var(--sa-chrome) !important; color: var(--sa-gold-hi) !important; }
.pgh_backBtn, .pgh_viewToggleBtn {
  border-radius: 0 !important; border: 1px solid var(--sa-line) !important;
  background: var(--sa-band) !important; color: var(--sa-ink) !important;
  font-weight: 700; box-shadow: none !important;
}
.pgh_viewToggleBtn.on, .pgh_viewToggleBtn[aria-pressed="true"],
.pgh_backBtn:hover, .pgh_viewToggleBtn:hover {
  background: var(--sa-chrome) !important; border-color: var(--sa-chrome) !important;
  color: var(--sa-gold-hi) !important;
}
.pgh_viewToggle { border-radius: 0; gap: 0; }

/* ── 마일리지 계산기 (info/mileage_calculator.php) — mi 무리 ── */
.seasonMileagePage {
  width: 1200px; max-width: calc(100% - 24px); margin: 16px auto 26px; padding: 14px;
  background: var(--sa-page); border: 1px solid #0f1420; border-radius: 4px;
  box-shadow: 0 14px 40px rgba(0,0,0,.42);
}
.miHero {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  min-height: 0; padding: 0 0 11px; margin-bottom: 12px;
  border: 0; border-bottom: 2px solid var(--sa-chrome); border-radius: 0;
  background: none !important; box-shadow: none;
}
.miHero:before, .miHero:after { display: none; }
.miHeroInner { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.miBadge { padding: 2px 8px; border: 0; border-radius: 0; background: var(--sa-chrome) !important; color: var(--sa-gold-hi) !important; font-size: 10.5px; font-weight: 900; }
.miTitle { margin: 0; font-size: 21px; font-weight: 900; color: var(--sa-ink) !important; text-shadow: none !important; }
.miDesc, .miSectionDesc, .miFieldHint { color: var(--sa-sub) !important; font-size: 12.5px; }
.miOuterCard, .miInputCard, .miSubCard, .miRewardCard, .miNextCard,
.miDetailCard, .miGuideItem, .miMyStatusItem, .miNotice, .miGuide {
  border-radius: 0 !important; border: 1px solid var(--sa-line) !important;
  background: var(--sa-mod) !important; box-shadow: none !important; color: var(--sa-text) !important;
}
.miSectionTitle, .miDetailTitle, .miGuideTitle, .miRewardTitle, .miResultLabel { color: var(--sa-ink) !important; }
.miInput, .miQuickBtn, .miReset, .miActions > * {
  border-radius: 0 !important; border: 1px solid var(--sa-line) !important;
  background: var(--sa-mod) !important; color: var(--sa-ink) !important; box-shadow: none !important;
}
.miQuickBtn:hover, .miReset:hover { background: var(--sa-chrome) !important; border-color: var(--sa-chrome) !important; color: var(--sa-gold-hi) !important; }
.miExpPill, .miLinkedBadge { border-radius: 0 !important; }
.miAfterBar { border-radius: 0 !important; }
.miMainResult, .miResultValue, .miSubValue, .miMyStatusValue, .miNextAmount, .miRewardPoint {
  font-variant-numeric: tabular-nums;
}

/* ── 페트도구 (info/pet_tool.php) — gf- 무리 ─────────────── */
.gf-wrap {
  width: 1200px; max-width: calc(100% - 24px); margin: 16px auto 26px; padding: 14px;
  background: var(--sa-page); border: 1px solid #0f1420; border-radius: 4px;
  box-shadow: 0 14px 40px rgba(0,0,0,.42);
}
.gf-panel, .gf-tablebox, .gf-result, .gf-form, .gf-base, .gf-field {
  border-radius: 0 !important; border: 1px solid var(--sa-line) !important;
  background: var(--sa-mod) !important; box-shadow: none !important; color: var(--sa-text) !important;
}
.gf-head, .gf-init-title { color: var(--sa-ink) !important; }
.gf-kicker { border-radius: 0 !important; background: var(--sa-chrome) !important; color: var(--sa-gold-hi) !important; }
.gf-input, .gf-select {
  height: 38px; border-radius: 0 !important; border: 1px solid var(--sa-line) !important;
  background: var(--sa-mod) !important; color: var(--sa-ink) !important; font-size: 13.5px;
}
.gf-btn { border-radius: 0 !important; border: 1px solid var(--sa-line) !important; background: var(--sa-band) !important; color: var(--sa-ink) !important; }
.gf-btn:hover { background: var(--sa-chrome) !important; border-color: var(--sa-chrome) !important; color: var(--sa-gold-hi) !important; }
.gf-table th, .gf-table td { border-color: var(--sa-line-2) !important; }
.gf-total, .gf-hp { font-variant-numeric: tabular-nums; color: var(--sa-ink) !important; }

/* game_help 은 바깥 통이 클래스가 아니라 id(#pgh_frame) 다 */
#pgh_frame {
  width: 1200px; max-width: calc(100% - 24px); margin: 16px auto 26px; padding: 14px;
  background: var(--sa-page) !important; border: 1px solid #0f1420 !important;
  border-radius: 4px !important; box-shadow: 0 14px 40px rgba(0,0,0,.42) !important;
  color: var(--sa-text) !important;
}
#pgh_frame h1 {
  margin: 0; padding: 0 0 11px; border-bottom: 2px solid var(--sa-chrome);
  color: var(--sa-ink) !important; font-size: 21px; font-weight: 900;
  letter-spacing: -.03em; text-shadow: none !important;
}
#pgh_frame .pgh_sub { margin: 8px 0 12px; color: var(--sa-sub) !important; font-size: 12.5px; }

/* ════════════════════════════════════════════════════════
   메인 (theme/sa_two_server/index.php) — sa-home-* / sa-bottom-* / sa-rank-mini-*
   ════════════════════════════════════════════════════════ */
.sa-home-main {
  width: 1200px; max-width: calc(100% - 24px); margin: 16px auto 26px; padding: 14px;
  background: var(--sa-page); border: 1px solid #0f1420; border-radius: 4px;
  box-shadow: 0 14px 40px rgba(0,0,0,.42); color: var(--sa-text);
}
/* 머리 그림은 남겨두되 모서리를 깎고 글자를 또렷하게 */
.sa-home-hero {
  border-radius: 0 !important; border: 1px solid var(--sa-line) !important;
  box-shadow: none !important; min-height: 0;
}
.sa-home-kicker {
  border-radius: 0 !important; background: var(--sa-gold) !important;
  color: #241a00 !important; border: 0 !important;
  font-size: 11px; font-weight: 900; letter-spacing: .08em;
}
.sa-home-title { font-size: 30px !important; letter-spacing: -.04em; text-shadow: 0 2px 6px rgba(0,0,0,.7); }
.sa-home-desc { font-size: 13.5px; }

.sa-home-section, .sa-bottom-card, .sa-rank-mini-card, .sa-home-notice {
  border-radius: 0 !important; border: 1px solid var(--sa-line) !important;
  background: var(--sa-mod) !important; box-shadow: none !important; color: var(--sa-text) !important;
}
.sa-home-section-head h2, .sa-bottom-card-head h2, .sa-rank-mini-title {
  color: var(--sa-ink) !important; font-size: 14.5px !important; letter-spacing: -.02em; text-shadow: none !important;
}
.sa-home-section-head p, .sa-rank-mini-sub { color: var(--sa-sub-2) !important; font-size: 12px !important; }
.sa-home-btn, .sa-rank-mini-more {
  border-radius: 0 !important; border: 1px solid var(--sa-line) !important;
  background: var(--sa-band) !important; color: var(--sa-ink) !important;
  font-weight: 700 !important; box-shadow: none !important; text-shadow: none !important;
}
.sa-home-btn:hover, .sa-rank-mini-more:hover {
  background: var(--sa-chrome) !important; border-color: var(--sa-chrome) !important;
  color: var(--sa-gold-hi) !important; transform: none;
}
/* 디스코드·다운로드 두 칸은 원래 색을 살려 눈에 띄게 둔다 */
.sa-bottom-card.card-gold .sa-home-btn { background: var(--sa-gold-hi) !important; border-color: var(--sa-gold-hi) !important; color: #2b2205 !important; }
.sa-bottom-card.card-discord .sa-home-btn { background: #5865f2 !important; border-color: #5865f2 !important; color: #fff !important; }
.sa-home-tag, .sa-home-notice-tag, .sa-home-chip-list > * {
  border-radius: 0 !important; border: 1px solid var(--sa-line) !important;
  background: var(--sa-band) !important; color: var(--sa-sub) !important; font-weight: 700;
}
.sa-rank-mini-banner { border-radius: 0 !important; }
.sa-rank-mini-row { border-radius: 0 !important; border-bottom: 1px solid var(--sa-line-2) !important; background: transparent !important; }
.sa-rank-mini-row:hover { background: var(--sa-gold-bg) !important; }
.sa-rank-mini-name { color: var(--sa-ink) !important; }
.sa-rank-mini-val { color: var(--sa-ink) !important; font-variant-numeric: tabular-nums; }
.sa-home-notice-divider { background: var(--sa-line) !important; }

/* ── 메인 글자색 보정 ────────────────────────────────────
   원래는 어두운 카드 위 흰 글자였다. 카드가 흰 바탕이 됐으니 뒤집는다.
   제목이 h2 가 아니라 h3 인 자리가 있어 둘 다 적는다. */
.sa-home-section h2, .sa-home-section h3, .sa-home-section h4,
.sa-bottom-card h2, .sa-bottom-card h3, .sa-bottom-card h4,
.sa-home-notice h2, .sa-home-notice h3, .sa-home-notice h4,
.sa-rank-mini-card h2, .sa-rank-mini-card h3 {
  color: var(--sa-ink) !important; text-shadow: none !important;
}
.sa-home-section p, .sa-bottom-card p, .sa-home-notice p,
.sa-home-notice-body, .sa-rank-mini-card p {
  color: var(--sa-text) !important; text-shadow: none !important;
}
.sa-home-section li, .sa-bottom-card li, .sa-home-notice li { color: var(--sa-text) !important; }

a.sa-home-btn, a.sa-rank-mini-more, button.sa-home-btn {
  border-radius: 0 !important; border: 1px solid var(--sa-line) !important;
  background: var(--sa-band) !important; color: var(--sa-ink) !important;
  font-weight: 700 !important; box-shadow: none !important; text-shadow: none !important;
}
a.sa-home-btn:hover, a.sa-rank-mini-more:hover, button.sa-home-btn:hover {
  background: var(--sa-chrome) !important; border-color: var(--sa-chrome) !important;
  color: var(--sa-gold-hi) !important;
}
/* 디스코드·다운로드 두 칸만 원래 색을 살린다 */
.sa-bottom-card.card-discord a.sa-home-btn {
  background: #5865f2 !important; border-color: #5865f2 !important; color: #ffffff !important;
}
.sa-bottom-card.card-discord a.sa-home-btn:hover { background: #4752c4 !important; border-color: #4752c4 !important; color: #fff !important; }
.sa-bottom-card.card-gold a.sa-home-btn {
  background: var(--sa-gold-hi) !important; border-color: var(--sa-gold-hi) !important; color: #2b2205 !important;
}
.sa-bottom-card.card-gold a.sa-home-btn:hover { background: #ffe27a !important; border-color: #ffe27a !important; color: #2b2205 !important; }

/* ── 두 칸 단추 마무리 ───────────────────────────────────
   원본이 .sa-bottom-card.card-X .sa-home-btn.Y 에 !important 로 색을 박아둬서
   (선택자 무게 0,4,0) 여기서는 그보다 무거운 선택자로만 이긴다. */
.sa-bottom-card.card-discord a.sa-home-btn.teal {
  background: #5865f2 !important; border-color: #5865f2 !important; color: #ffffff !important;
}
.sa-bottom-card.card-discord a.sa-home-btn.teal:hover {
  background: #4752c4 !important; border-color: #4752c4 !important; color: #ffffff !important;
}
.sa-bottom-card.card-gold a.sa-home-btn.gold {
  background: var(--sa-chrome) !important; border-color: var(--sa-chrome) !important;
  color: var(--sa-gold-hi) !important;
}
.sa-bottom-card.card-gold a.sa-home-btn.gold:hover {
  background: #273044 !important; border-color: #273044 !important; color: var(--sa-gold-hi) !important;
}
.sa-bottom-card.card-discord ul.sa-home-chip-list li,
.sa-bottom-card.card-gold ul.sa-home-chip-list li,
.sa-bottom-card.card-discord ol.sa-home-chip-list li,
.sa-bottom-card.card-gold ol.sa-home-chip-list li {
  background: var(--sa-band) !important; border-color: var(--sa-line) !important;
  color: var(--sa-sub) !important; border-radius: 0 !important;
}
.sa-home-btn.teal, .sa-home-btn.gold { text-shadow: none !important; }

/* ════════════════════════════════════════════════════════
   메인 포털 구조 (sa-hp-*) — 2026-09-12
   왼쪽에 배너·마감·게시물·페트, 오른쪽에 랭킹·버튼.
   ════════════════════════════════════════════════════════ */
.sa-hp { padding: 14px; }
.sa-hp-cols { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 12px; align-items: start; }

/* 검색 띠 */
.sa-hp-search { background: var(--sa-mod); border: 1px solid var(--sa-line); margin-bottom: 12px;
  display: flex; align-items: center; gap: 16px; padding: 10px 12px; flex-wrap: wrap; }
.sa-hp-form { display: flex; border: 2px solid var(--sa-chrome); background: var(--sa-mod); margin: 0; }
.sa-hp-form select { border: 0; border-right: 1px solid var(--sa-line); padding: 0 10px;
  font: inherit; font-size: 13.5px; color: var(--sa-ink); background: var(--sa-band); outline: none; }
.sa-hp-form input { border: 0; padding: 9px 12px; width: 320px; max-width: 42vw;
  font: inherit; font-size: 13.5px; outline: none; background: var(--sa-mod); color: var(--sa-ink); }
.sa-hp-form button { border: 0; background: var(--sa-chrome); color: #fff; padding: 0 20px;
  font: inherit; font-weight: 700; font-size: 13.5px; cursor: pointer; }
.sa-hp-hot { display: flex; gap: 9px; margin: 0; font-size: 12.5px; color: var(--sa-sub-2);
  align-items: center; flex-wrap: wrap; }
.sa-hp-hot a { color: var(--sa-sub); }
.sa-hp-hot a:hover { color: var(--sa-gold); text-decoration: underline; }

/* 배너 */
.sa-hp-bnr { position: relative; display: flex; align-items: center; overflow: hidden;
  min-height: 136px; margin-bottom: 12px; border: 1px solid var(--sa-line);
  background: linear-gradient(96deg, #14171f 0%, #1e2534 46%, #2b3446 100%); }
.sa-hp-bnr-in { position: relative; z-index: 2; padding: 18px 24px; }
.sa-hp-bnr-tag { display: inline-block; padding: 2px 9px; background: var(--sa-gold);
  color: #241a00; font-size: 11px; font-weight: 900; }
.sa-hp-bnr b { display: block; margin-top: 7px; font-size: 24px; font-weight: 900;
  color: var(--sa-gold-hi); text-shadow: 0 2px 5px rgba(0,0,0,.7); }
.sa-hp-bnr-in > span:last-child { display: block; margin-top: 2px; font-size: 13.5px;
  color: #e6ddcb; text-shadow: 0 1px 4px rgba(0,0,0,.8); }
.sa-hp-bnr-art { position: absolute; right: 0; bottom: 0; z-index: 1;
  height: 100%; width: auto; max-width: 52%; object-fit: contain; object-position: right bottom; }

/* 모듈 */
.sa-hp-mod { background: var(--sa-mod); border: 1px solid var(--sa-line); margin-bottom: 12px; }
.sa-hp-mh { display: flex; align-items: center; gap: 7px; padding: 9px 11px;
  background: var(--sa-band); border-bottom: 1px solid var(--sa-line); }
.sa-hp-bar { width: 3px; height: 13px; background: var(--sa-gold); }
.sa-hp-mh h2, .sa-hp-mh h3 { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--sa-ink); }
.sa-hp-cnt { font-size: 12px; font-weight: 400; color: var(--sa-sub-2); }
.sa-hp-more { margin-left: auto; font-size: 12px; color: var(--sa-sub-2); }
.sa-hp-more:hover { color: var(--sa-gold); }
.sa-hp-empty { padding: 28px 12px; text-align: center; color: var(--sa-sub-2); font-size: 12.5px; }

/* 한정 판매 마감 — 본문이 넓으니 2열 */
.sa-hp-cd { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
.sa-hp-cd-item { padding: 11px 13px; border-right: 1px solid var(--sa-line-2); }
.sa-hp-cd-item:last-child { border-right: 0; }
.sa-hp-cd-head { display: flex; align-items: center; gap: 8px; }
.sa-hp-cd-img { width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--sa-band); border: 1px solid var(--sa-line-2); flex: 0 0 auto; }
.sa-hp-cd-img img { max-height: 36px; width: auto; image-rendering: pixelated; }
.sa-hp-cd-head b { display: block; font-size: 14px; font-weight: 700; color: var(--sa-ink); }
.sa-hp-cd-head span span { display: block; font-size: 12.5px; color: var(--sa-sub-2); }
.sa-hp-cd-t { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 4px; margin-top: 8px; }
.sa-hp-cd-t div { background: var(--sa-chrome); color: #fff; text-align: center; padding: 5px 2px; }
.sa-hp-cd-t em { display: block; font-style: normal; font-size: 16px; font-weight: 900;
  font-variant-numeric: tabular-nums; line-height: 1.2; }
.sa-hp-cd-t small { display: block; font-size: 9.5px; color: #9aa3b5; }
.sa-hp-cd-end { margin: 7px 0 0; font-size: 12px; color: var(--sa-sub-2); text-align: right; }

/* 최근 게시물 */
.sa-hp-rows { margin: 0; padding: 0; }
.sa-hp-rows li { border-bottom: 1px solid var(--sa-line-2); }
.sa-hp-rows li:last-child { border-bottom: 0; }
.sa-hp-rows a { display: flex; align-items: center; gap: 8px; padding: 8px 11px; }
.sa-hp-rows a:hover { background: var(--sa-gold-bg); }
.sa-hp-cat { flex: 0 0 auto; font-size: 12.5px; font-weight: 700; }
.sa-hp-cat.nt { color: var(--sa-red); }
.sa-hp-cat.dv { color: var(--sa-blue); }
.sa-hp-cat.ev { color: var(--sa-gold); }
.sa-hp-cat.bl { color: var(--sa-sub-2); }
.sa-hp-tt { flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--sa-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-hp-new { flex: 0 0 auto; font-size: 9.5px; font-weight: 900; color: #fff;
  background: var(--sa-red); padding: 0 3px; }
.sa-hp-dd { flex: 0 0 auto; font-size: 12.5px; color: var(--sa-sub-2); font-variant-numeric: tabular-nums; }

/* 최근 추가된 페트 — 가로 5 세로 4 */
.sa-hp-pets { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 1px; background: var(--sa-line-2); }
.sa-hp-pet { background: var(--sa-mod); padding: 13px 6px 11px; text-align: center; }
.sa-hp-pet:hover { background: var(--sa-gold-bg); }
.sa-hp-pet-img { height: 62px; display: grid; place-items: center; margin-bottom: 6px; }
/* 스프라이트는 원본 크기 그대로 둔다 */
.sa-hp-pet-img img { max-height: 62px; width: auto; image-rendering: pixelated; }
.sa-hp-pet b { display: block; font-size: 14px; font-weight: 700; color: var(--sa-ink); }
.sa-hp-pet span { display: block; font-size: 12px; color: var(--sa-sub-2); margin-bottom: 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-hp-pet i { display: inline-block; padding: 1px 7px; font-style: normal;
  font-size: 11.5px; font-weight: 700; }
.sa-hp-pet i.ok { background: #e7f1e0; color: var(--sa-green); }
.sa-hp-pet i.no { background: #f2f3f5; color: var(--sa-sub-2); }

/* 오른쪽 랭킹표 */
.sa-hp-rk { width: 100%; border-collapse: collapse; }
.sa-hp-rk td { padding: 6px 5px; border-bottom: 1px solid var(--sa-line-2); font-size: 13.5px; }
.sa-hp-rk tr:last-child td { border-bottom: 0; }
.sa-hp-rk .r { width: 22px; text-align: center; font-weight: 900; color: var(--sa-sub-2); font-size: 12.5px; }
/* max-width:0 로 줄이는 수법은 table-layout:fixed 일 때만 먹는다.
   여기선 칸이 한 글자로 찌그러져서 그냥 넘치게 두고 말줄임만 쓴다. */
.sa-hp-rk .nm { width: 100%; color: var(--sa-text); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.sa-hp-rk .v { text-align: right; white-space: nowrap; font-weight: 700; color: var(--sa-ink);
  font-variant-numeric: tabular-nums; }

/* 버튼 3개 */
.sa-hp-dl { background: var(--sa-mod); border: 1px solid var(--sa-line); padding: 11px; }
.sa-hp-dl a { display: block; text-align: center; padding: 11px; margin-bottom: 7px;
  background: linear-gradient(180deg, #ffd84d, #e0a800); color: #2b1d0e;
  font-size: 13.5px; font-weight: 900; border-bottom: 2px solid #9a6d00; }
.sa-hp-dl a.dc { background: #5865f2; color: #fff; border-bottom-color: #3c45a5; }
.sa-hp-dl a.hp { background: #4a5568; color: #fff; border-bottom-color: #2d3648; }
.sa-hp-dl a.gd { background: var(--sa-chrome); color: var(--sa-gold-hi); border-bottom-color: #000; }
.sa-hp-dl a:last-child { margin-bottom: 0; }
.sa-hp-dl a:hover { filter: brightness(1.06); }


@media (max-width: 1000px) {
  .sa-hp-cols { grid-template-columns: 1fr; }
  .sa-hp-pets { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .sa-hp-cd { grid-template-columns: 1fr; }
  .sa-hp-cd-item { border-right: 0; border-bottom: 1px solid var(--sa-line-2); }
}
@media (max-width: 600px) {
  .sa-hp-pets { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sa-hp-form input { width: 100%; max-width: 100%; }
}

/* ════════════════════════════════════════════════════════
   게시판 — 스킨 4종 공통 (s2_board · s2_quest · s2_gallery · s2_PetBoard)
   2026-09-12

   스킨이 무거운 선택자에 !important 로 박아두므로 그보다 한 단계 무겁게 적는다.
   <main> 에 붙는 이름이 스킨마다 달라 앞가지를 세 갈래로 깐다.
   불러오는 자리는 theme/NewTheme/tail.sub.php (스킨 CSS 보다 뒤).
   ════════════════════════════════════════════════════════ */

body .container-1200.mx-auto.my-5,
body main.sa-season-board-list .container-1200.mx-auto.my-5,
body main.sa-season-gallery-list .container-1200.mx-auto.my-5 {
  width: 1200px !important; max-width: calc(100% - 24px) !important;
  margin: 16px auto 26px !important; padding: 14px !important;
  background: var(--sa-page) !important; border: 1px solid #0f1420 !important;
  border-radius: 4px !important; box-shadow: 0 14px 40px rgba(0,0,0,.42) !important;
}

body .container-1200.mx-auto.my-5:before,
body main.sa-season-board-list .container-1200.mx-auto.my-5:before,
body main.sa-season-gallery-list .container-1200.mx-auto.my-5:before,
body .container-1200.mx-auto.my-5:after,
body main.sa-season-board-list .container-1200.mx-auto.my-5:after,
body main.sa-season-gallery-list .container-1200.mx-auto.my-5:after {
  display: none !important;
}

body .sa-list-top,
body main.sa-season-board-list .sa-list-top,
body main.sa-season-gallery-list .sa-list-top {
  margin: 0 0 12px !important; padding: 0 !important;
  background: none !important; border: 0 !important; box-shadow: none !important;
}

body .sa-toolbar,
body main.sa-season-board-list .sa-toolbar,
body main.sa-season-gallery-list .sa-toolbar {
  display: flex !important; align-items: center !important; gap: 12px !important;
  flex-wrap: wrap !important; padding: 0 0 11px !important;
  border-bottom: 2px solid var(--sa-chrome) !important;
}

body .sa-toolbar-left,
body main.sa-season-board-list .sa-toolbar-left,
body main.sa-season-gallery-list .sa-toolbar-left {
  flex: 0 0 auto !important;
}

body .sa-search-form,
body main.sa-season-board-list .sa-search-form,
body main.sa-season-gallery-list .sa-search-form {
  margin-left: auto !important;
}

body .sa-toolbar-write,
body main.sa-season-board-list .sa-toolbar-write,
body main.sa-season-gallery-list .sa-toolbar-write {
  flex: 0 0 auto !important; width: auto !important;
}

body .sa-board-title-wrap,
body main.sa-season-board-list .sa-board-title-wrap,
body main.sa-season-gallery-list .sa-board-title-wrap,
body .sa-board-title-box,
body main.sa-season-board-list .sa-board-title-box,
body main.sa-season-gallery-list .sa-board-title-box {
  display: flex !important; flex-direction: row !important; align-items: baseline !important;
  gap: 10px !important; min-height: 0 !important; margin: 0 !important;
  padding: 0 !important; border: 0 !important;
}

body .sa-board-title-wrap .sa-board-eyebrow,
body main.sa-season-board-list .sa-board-title-wrap .sa-board-eyebrow,
body main.sa-season-gallery-list .sa-board-title-wrap .sa-board-eyebrow,
body .sa-board-title-box > span,
body main.sa-season-board-list .sa-board-title-box > span,
body main.sa-season-gallery-list .sa-board-title-box > span {
  display: inline-block !important; margin: 0 !important; padding: 2px 8px !important;
  border: 0 !important; border-radius: 0 !important;
  background: var(--sa-chrome) !important; color: var(--sa-gold-hi) !important;
  font-size: 10.5px !important; font-weight: 900 !important; letter-spacing: .08em !important;
}

body .sa-board-title-wrap h2,
body main.sa-season-board-list .sa-board-title-wrap h2,
body main.sa-season-gallery-list .sa-board-title-wrap h2,
body .sa-board-title-box > strong,
body main.sa-season-board-list .sa-board-title-box > strong,
body main.sa-season-gallery-list .sa-board-title-box > strong {
  display: inline-block !important; margin: 0 !important; color: var(--sa-ink) !important;
  font-size: 21px !important; line-height: 1.3 !important; font-weight: 900 !important;
  letter-spacing: -.03em !important; text-shadow: none !important;
}

body .sa-custom-search-box,
body main.sa-season-board-list .sa-custom-search-box,
body main.sa-season-gallery-list .sa-custom-search-box,
body .custom-search-box.sa-custom-search-box,
body main.sa-season-board-list .custom-search-box.sa-custom-search-box,
body main.sa-season-gallery-list .custom-search-box.sa-custom-search-box {
  height: 38px !important; min-height: 38px !important; max-height: 38px !important;
  border: 2px solid var(--sa-chrome) !important; border-radius: 0 !important;
  background: var(--sa-mod) !important; box-shadow: none !important; padding: 0 !important;
}

body .sa-search-input,
body main.sa-season-board-list .sa-search-input,
body main.sa-season-gallery-list .sa-search-input {
  height: 34px !important; padding: 0 12px !important; border: 0 !important; border-radius: 0 !important;
  font-size: 13.5px !important; color: var(--sa-ink) !important; background: var(--sa-mod) !important;
  box-shadow: none !important;
}

body .sa-search-button,
body main.sa-season-board-list .sa-search-button,
body main.sa-season-gallery-list .sa-search-button {
  width: 46px !important; min-width: 46px !important; flex: 0 0 46px !important;
  height: 34px !important; border: 0 !important; border-radius: 0 !important;
  background: var(--sa-chrome) !important; box-shadow: none !important;
}

body .sa-search-button .fa-search,
body main.sa-season-board-list .sa-search-button .fa-search,
body main.sa-season-gallery-list .sa-search-button .fa-search,
body .sa-search-button .text-cyan,
body main.sa-season-board-list .sa-search-button .text-cyan,
body main.sa-season-gallery-list .sa-search-button .text-cyan {
  color: #ffffff !important;
}

body .sa-toolbar-write .sa_write_btn,
body main.sa-season-board-list .sa-toolbar-write .sa_write_btn,
body main.sa-season-gallery-list .sa-toolbar-write .sa_write_btn {
  min-height: 38px !important; padding: 0 18px !important;
  border: 0 !important; border-radius: 0 !important;
  background: var(--sa-chrome) !important; color: var(--sa-gold-hi) !important;
  font-size: 13px !important; font-weight: 700 !important;
  box-shadow: none !important; text-shadow: none !important;
}

body .sa-toolbar-write .sa_write_btn:hover,
body main.sa-season-board-list .sa-toolbar-write .sa_write_btn:hover,
body main.sa-season-gallery-list .sa-toolbar-write .sa_write_btn:hover {
  background: #273044 !important;
}

body .sa-category-line,
body main.sa-season-board-list .sa-category-line,
body main.sa-season-gallery-list .sa-category-line {
  display: block !important; margin: 12px 0 0 !important; padding: 0 !important;
  border: 0 !important; border-top: 0 !important; background: none !important;
}

body #sa_cate_ul,
body main.sa-season-board-list #sa_cate_ul,
body main.sa-season-gallery-list #sa_cate_ul {
  display: inline-flex !important; flex-wrap: wrap !important;
  margin: 0 !important; padding: 0 !important;
  font-size: 14px !important; line-height: normal !important;
  border: 1px solid var(--sa-line) !important; background: var(--sa-band) !important;
}

body #sa_cate_ul li,
body main.sa-season-board-list #sa_cate_ul li,
body main.sa-season-gallery-list #sa_cate_ul li {
  display: block !important; list-style: none !important;
}

body #sa_cate_ul li a,
body main.sa-season-board-list #sa_cate_ul li a,
body main.sa-season-gallery-list #sa_cate_ul li a {
  display: block !important; margin: 0 !important; padding: 0 20px !important;
  line-height: 40px !important; min-height: 0 !important;
  border: 0 !important; border-right: 1px solid var(--sa-line) !important; border-radius: 0 !important;
  background: transparent !important; color: var(--sa-text) !important;
  font-size: 14px !important; font-weight: 700 !important; box-shadow: none !important;
}

body #sa_cate_ul li:last-child a,
body main.sa-season-board-list #sa_cate_ul li:last-child a,
body main.sa-season-gallery-list #sa_cate_ul li:last-child a {
  border-right: 0 !important;
}

body #sa_cate_ul li a:hover,
body main.sa-season-board-list #sa_cate_ul li a:hover,
body main.sa-season-gallery-list #sa_cate_ul li a:hover {
  background: var(--sa-gold-bg) !important; color: var(--sa-ink) !important;
}

body #sa_cate_ul a#category_on,
body main.sa-season-board-list #sa_cate_ul a#category_on,
body main.sa-season-gallery-list #sa_cate_ul a#category_on,
body #sa_cate_ul li a#category_on,
body main.sa-season-board-list #sa_cate_ul li a#category_on,
body main.sa-season-gallery-list #sa_cate_ul li a#category_on {
  background: var(--sa-chrome) !important; color: var(--sa-gold-hi) !important;
  border-color: var(--sa-chrome) !important;
}

body .sa-list-body,
body main.sa-season-board-list .sa-list-body,
body main.sa-season-gallery-list .sa-list-body {
  background: var(--sa-mod) !important; border: 1px solid var(--sa-line) !important;
  border-radius: 0 !important; box-shadow: none !important; padding: 0 !important;
}

body .container-1200 > .container-fluid.px-0.mx-0 > .row.mx-0.py-3.px-1,
body main.sa-season-board-list .container-1200 > .container-fluid.px-0.mx-0 > .row.mx-0.py-3.px-1,
body main.sa-season-gallery-list .container-1200 > .container-fluid.px-0.mx-0 > .row.mx-0.py-3.px-1 {
  min-height: 0 !important; margin: 0 !important; padding: 10px 12px !important;
  border: 0 !important; border-bottom: 1px solid var(--sa-line-2) !important;
  border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
}

body .container-1200 > .container-fluid.px-0.mx-0 > .row.mx-0.py-3.px-1:last-child,
body main.sa-season-board-list .container-1200 > .container-fluid.px-0.mx-0 > .row.mx-0.py-3.px-1:last-child,
body main.sa-season-gallery-list .container-1200 > .container-fluid.px-0.mx-0 > .row.mx-0.py-3.px-1:last-child {
  border-bottom: 0 !important;
}

body .container-1200 > .container-fluid.px-0.mx-0 > .row.mx-0.py-3.px-1:hover,
body main.sa-season-board-list .container-1200 > .container-fluid.px-0.mx-0 > .row.mx-0.py-3.px-1:hover,
body main.sa-season-gallery-list .container-1200 > .container-fluid.px-0.mx-0 > .row.mx-0.py-3.px-1:hover {
  transform: none !important; box-shadow: none !important;
  background: var(--sa-gold-bg) !important; border-color: var(--sa-line-2) !important;
}

body .container-1200 .sa-list-body a.sa_wr_title,
body main.sa-season-board-list .container-1200 .sa-list-body a.sa_wr_title,
body main.sa-season-gallery-list .container-1200 .sa-list-body a.sa_wr_title,
body .container-1200 .sa-list-body a.sa_wr_title span,
body main.sa-season-board-list .container-1200 .sa-list-body a.sa_wr_title span,
body main.sa-season-gallery-list .container-1200 .sa-list-body a.sa_wr_title span,
body .container-1200 .sa-list-body a.sa_wr_title .font-weight-bold,
body main.sa-season-board-list .container-1200 .sa-list-body a.sa_wr_title .font-weight-bold,
body main.sa-season-gallery-list .container-1200 .sa-list-body a.sa_wr_title .font-weight-bold {
  font-size: 14.5px !important; line-height: 1.45 !important;
  font-weight: 500 !important; letter-spacing: -.02em !important;
  color: var(--sa-text) !important; text-shadow: none !important;
}

body .sa-list-body > .row:hover a.sa_wr_title span,
body main.sa-season-board-list .sa-list-body > .row:hover a.sa_wr_title span,
body main.sa-season-gallery-list .sa-list-body > .row:hover a.sa_wr_title span {
  color: var(--sa-ink) !important;
}

body .sa_ca_text,
body main.sa-season-board-list .sa_ca_text,
body main.sa-season-gallery-list .sa_ca_text {
  display: inline-block !important; padding: 1px 8px !important;
  border: 1px solid var(--sa-line) !important; border-radius: 0 !important;
  background: var(--sa-band) !important; color: var(--sa-sub) !important;
  font-size: 11.5px !important; font-weight: 700 !important;
}

body .sa-list-body small,
body main.sa-season-board-list .sa-list-body small,
body main.sa-season-gallery-list .sa-list-body small {
  font-size: 12px !important; color: var(--sa-sub-2) !important; line-height: 1.4 !important;
}

body .sa-list-body .text-gray,
body main.sa-season-board-list .sa-list-body .text-gray,
body main.sa-season-gallery-list .sa-list-body .text-gray {
  color: var(--sa-sub-2) !important;
}

body .sa-gallery-grid,
body main.sa-season-board-list .sa-gallery-grid,
body main.sa-season-gallery-list .sa-gallery-grid {
  gap: 10px !important;
}

body .sa-gallery-col,
body main.sa-season-board-list .sa-gallery-col,
body main.sa-season-gallery-list .sa-gallery-col,
body .sa-gallery-link,
body main.sa-season-board-list .sa-gallery-link,
body main.sa-season-gallery-list .sa-gallery-link {
  border-radius: 0 !important; box-shadow: none !important;
}

body .sa-gallery-link,
body main.sa-season-board-list .sa-gallery-link,
body main.sa-season-gallery-list .sa-gallery-link {
  display: block !important; border: 1px solid var(--sa-line) !important;
  background: var(--sa-mod) !important; overflow: hidden !important;
}

body .sa-gallery-link:hover,
body main.sa-season-board-list .sa-gallery-link:hover,
body main.sa-season-gallery-list .sa-gallery-link:hover {
  transform: none !important; box-shadow: none !important;
  border-color: var(--sa-gold) !important;
}

body .sa-gallery-thumb,
body main.sa-season-board-list .sa-gallery-thumb,
body main.sa-season-gallery-list .sa-gallery-thumb,
body .gallery-card-image,
body main.sa-season-board-list .gallery-card-image,
body main.sa-season-gallery-list .gallery-card-image {
  border-radius: 0 !important; background: var(--sa-band) !important;
}

body .sa-gallery-caption,
body main.sa-season-board-list .sa-gallery-caption,
body main.sa-season-gallery-list .sa-gallery-caption,
body .gallery-card-caption,
body main.sa-season-board-list .gallery-card-caption,
body main.sa-season-gallery-list .gallery-card-caption,
body .sa-gallery-footer,
body main.sa-season-board-list .sa-gallery-footer,
body main.sa-season-gallery-list .sa-gallery-footer,
body .gallery-card-footer,
body main.sa-season-board-list .gallery-card-footer,
body main.sa-season-gallery-list .gallery-card-footer {
  border-radius: 0 !important; background: var(--sa-mod) !important;
  color: var(--sa-text) !important;
}

body .sa-gallery-title,
body main.sa-season-board-list .sa-gallery-title,
body main.sa-season-gallery-list .sa-gallery-title {
  font-size: 14px !important; font-weight: 700 !important;
  color: var(--sa-ink) !important; text-shadow: none !important;
}

body .sa-gallery-writer,
body main.sa-season-board-list .sa-gallery-writer,
body main.sa-season-gallery-list .sa-gallery-writer,
body .sa-gallery-category,
body main.sa-season-board-list .sa-gallery-category,
body main.sa-season-gallery-list .sa-gallery-category,
body .text-gray-light,
body main.sa-season-board-list .text-gray-light,
body main.sa-season-gallery-list .text-gray-light {
  font-size: 12px !important; color: var(--sa-sub-2) !important;
}

body .sa-gallery-notice-badge,
body main.sa-season-board-list .sa-gallery-notice-badge,
body main.sa-season-gallery-list .sa-gallery-notice-badge {
  border-radius: 0 !important; background: var(--sa-chrome) !important;
  color: var(--sa-gold-hi) !important; font-size: 11px !important; font-weight: 700 !important;
}

body .sa-empty-list,
body main.sa-season-board-list .sa-empty-list,
body main.sa-season-gallery-list .sa-empty-list {
  border-radius: 0 !important; border: 1px solid var(--sa-line) !important;
  background: var(--sa-mod) !important; color: var(--sa-sub-2) !important;
}

body .pg_wrap { padding: 14px 0 0 !important; }
body .pg_page, body .pg_current, body strong.pg_current {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  min-width: 32px !important; height: 32px !important; margin: 0 2px !important;
  border: 1px solid var(--sa-line) !important; border-radius: 0 !important;
  background: var(--sa-mod) !important; background-image: none !important;
  color: var(--sa-ink) !important; font-size: 13px !important; font-weight: 700 !important;
  box-shadow: none !important;
}
body .pg_current, body strong.pg_current {
  background: var(--sa-chrome) !important; background-image: none !important;
  border-color: var(--sa-chrome) !important; color: var(--sa-gold-hi) !important;
}