/* 퀘스트·레이드·가이드 본문 틀 (2026-09-22)

   쟈쟈 웹에서 옮겨 온 글은 한 틀에서 찍어낸 것이라 덩어리마다 할 일이
   정해져 있다. board_prepare.py 가 원문 색을 보고 이름표를 붙여 주고,
   칠하는 일은 여기서 한다.

     .qg          글 전체
     .qg-badge    맨 위 작은 알약 (Quest Guide …)
     .qg-hero     제목 상자          .qg-eyebrow  제목 위 영문 한 줄
     .qg-tbl      정보 표 (시작장소 · 레벨제한 · 보상 …)
     .qg-sec      소제목(h3)이 있는 절
     .qg-note     노란 알림 상자      .qg-warn     빨간 경고 상자
     .qg-box      그냥 감싸개
     .qg-hi       강조 글자(금)       .qg-em       강조 글자(주황)

   지켜야 할 것 둘 —

   1. **감싸개(.qg-box)에는 테두리도 바탕도 주지 않는다.** 한 글에 스무 개씩
      나오기 때문에, 거기까지 칠하면 화면이 똑같은 상자 더미가 된다.
      꾸밈은 머리·표·절·알림 넷에만 준다.

   2. **선택자는 .sa-iv-con 으로 시작하고 바탕색에는 !important 를 붙인다.**
      g5.css 가 그누보드 쪽 전체에 '바탕 다 지우기' 담요를 !important 로
      깔아 둬서, 그냥 쓰면 표 머리 바탕이 투명해지고 글자색도 밀린다.
      그라데이션은 background-color 가 아니라 살아남는다 — 그래서 제목
      상자만 멀쩡하고 표만 밋밋했다.                                      */

.sa-iv-con .qg{
  font-size:15px; line-height:1.8; color:var(--ink-dim);
}
/*  원문이 제 카드 폭(920px)을 물고 온다. 우리 칸이 이미 폭을 잡는다 */
.sa-iv-con .qg [style*="max-width"]{max-width:none !important}
.sa-iv-con .qg > *:first-child{margin-top:0}
.sa-iv-con .qg > *:last-child{margin-bottom:0}

/*  감싸개는 여백만 */
.sa-iv-con .qg-box{padding:0 !important; margin:0}

.sa-iv-con .qg p{margin:.55em 0}
.sa-iv-con .qg b,
.sa-iv-con .qg strong{color:var(--ink); font-weight:700}
.sa-iv-con .qg .qg-hi{color:var(--gold); font-weight:700}
.sa-iv-con .qg .qg-em{color:var(--ember); font-weight:700}
.sa-iv-con .qg a{color:var(--gold); border-bottom:1px solid rgba(255,200,97,.35)}

.sa-iv-con .qg img{
  max-width:100%; height:auto; margin:12px 0; border-radius:10px;
  border:1px solid var(--line);
}

/* ── 맨 위 알약 ── */
.sa-iv-con .qg .qg-badge{
  display:inline-block !important; margin:0 0 18px !important;
  padding:6px 15px !important; border-radius:999px !important;
  border:1px solid rgba(255,200,97,.45) !important;
  background-color:rgba(255,200,97,.10) !important;
  color:var(--gold); font-size:11.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; line-height:1.6;
}

/* ── 제목 상자 ──
   왼쪽에 금색 기둥을 세우고 오른쪽 위로 옅은 빛을 깔아 판이 살게 한다 */
.sa-iv-con .qg .qg-hero{
  position:relative; overflow:hidden;
  margin:0 0 24px !important; padding:30px 32px 28px !important;
  border:1px solid rgba(255,200,97,.22) !important; border-radius:18px !important;
  background:
    radial-gradient(120% 150% at 88% -25%, rgba(255,200,97,.15), transparent 58%),
    linear-gradient(180deg, rgba(255,200,97,.07), rgba(20,16,12,.45)) !important;
}
.sa-iv-con .qg .qg-hero::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--gold),var(--ember)) !important;
}
.sa-iv-con .qg .qg-hero h2{
  margin:0 !important; font-size:clamp(22px,2.6vw,30px); line-height:1.3;
  color:var(--ink) !important; letter-spacing:-.02em;
}
.sa-iv-con .qg .qg-hero p{
  margin:12px 0 0 !important; font-size:14.5px; color:var(--ink-dim); max-width:64ch;
}
.sa-iv-con .qg .qg-eyebrow{
  display:block !important; margin:0 0 12px !important; padding:0 !important;
  border:0 !important; border-radius:0 !important;
  background:none !important;
  color:var(--gold); font-size:11px; font-weight:700; letter-spacing:.26em;
  text-transform:uppercase; line-height:1.6;
}

/* ── 정보 표 ──
   이 글의 알맹이다. 왼쪽 이름칸은 금빛 바탕에 금색 글자, 오른쪽은 본문색.
   바깥은 둥글게 잘라 한 덩이로 보이게 한다. */
.sa-iv-con .qg .qg-tbl{
  width:100% !important; margin:22px 0 !important;
  border:1px solid var(--line) !important; border-radius:14px;
  border-collapse:separate !important; border-spacing:0;
  overflow:hidden; font-size:14.5px;
  background-color:rgba(20,16,12,.35) !important;
}
.sa-iv-con .qg .qg-tbl th,
.sa-iv-con .qg .qg-tbl td{
  border:0 !important; vertical-align:top; text-align:left;
}
.sa-iv-con .qg .qg-tbl th{
  width:176px; padding:14px 16px !important;
  background-color:rgba(255,200,97,.09) !important;
  border-right:1px solid rgba(255,200,97,.16) !important;
  color:var(--gold) !important; font-size:13px; font-weight:700;
  white-space:nowrap;
}
.sa-iv-con .qg .qg-tbl td{
  padding:14px 18px !important; color:var(--ink) !important; line-height:1.75;
}
.sa-iv-con .qg .qg-tbl tr + tr th,
.sa-iv-con .qg .qg-tbl tr + tr td{border-top:1px solid var(--line) !important}
.sa-iv-con .qg .qg-tbl tr:hover td{background-color:rgba(255,236,200,.04) !important}
/*  머리가 따로 있는 표는 가로 머리띠로 본다 */
.sa-iv-con .qg .qg-tbl thead th{
  width:auto; white-space:normal;
  background-color:rgba(255,200,97,.12) !important;
  border-right:1px solid var(--line) !important;
}

/* ── 소제목이 있는 절 ── */
.sa-iv-con .qg .qg-sec{
  margin:18px 0 !important; padding:24px 26px !important;
  border:1px solid var(--line) !important; border-radius:16px !important;
  background-color:rgba(255,236,200,.03) !important;
}
/*  절 안에 또 절이 오면 판을 겹치지 않는다 */
.sa-iv-con .qg .qg-sec .qg-sec{
  border:0 !important; background:none !important;
  padding:0 !important; margin:14px 0 !important;
}
.sa-iv-con .qg h3{
  margin:0 0 14px !important; padding:0 0 11px !important;
  border:0 !important; border-bottom:1px solid rgba(255,200,97,.25) !important;
  color:var(--ink) !important; font-size:19px; letter-spacing:-.01em;
}
/*  소제목 앞에 마름모를 달지 않는다 — 원문 제목이 이미 '◆ 퀘스트의 시작'
    처럼 스스로 달고 있어 두 개가 겹친다. */
.sa-iv-con .qg h4{margin:16px 0 8px !important; color:var(--gold) !important; font-size:15px}

/* ── 알림 · 경고 ── */
.sa-iv-con .qg .qg-note,
.sa-iv-con .qg .qg-warn{
  margin:16px 0 !important; padding:15px 18px !important;
  border:0 !important; border-left:3px solid var(--gold) !important;
  border-radius:0 12px 12px 0 !important;
  background-color:rgba(255,200,97,.07) !important;
  color:var(--ink-dim); font-size:14px;
}
.sa-iv-con .qg .qg-note b{color:var(--gold)}
.sa-iv-con .qg .qg-warn{
  border-left-color:var(--ember) !important;
  background-color:rgba(255,106,61,.09) !important;
}
.sa-iv-con .qg .qg-warn b{color:var(--ember)}

/* ── 목록 ── */
.sa-iv-con .qg ul,
.sa-iv-con .qg ol{margin:10px 0; padding-left:20px}
.sa-iv-con .qg li{margin:5px 0}
.sa-iv-con .qg ul li::marker{color:var(--gold)}

/* ── 좁은 화면 ── */
@media (max-width:640px){
  .sa-iv-con .qg{font-size:14px}
  .sa-iv-con .qg .qg-hero{padding:22px 20px !important}
  .sa-iv-con .qg .qg-sec{padding:18px 16px !important}
  .sa-iv-con .qg .qg-tbl th{
    width:100px; padding:11px 10px !important; font-size:12px; white-space:normal;
  }
  .sa-iv-con .qg .qg-tbl td{padding:11px 12px !important; font-size:13.5px}
}