/*
 * fx 고객지원(화면키 support) — 얇은 어두운 머리 / 밝은 읽기 구간 / 어두운 마지막 안내. 접두사 fx-sup-.
 * 구획: 1 머리 / 2 문의 입구 / 3 지원 정책 / 4 FAQ / 5 마지막 안내 / 6 반응형.
 * 값은 전부 --fx-* 토큰. 라임은 「무료」 칩·주 버튼·머리 강조어에만. 읽는 열은 680px·18px/1.8.
 */

.fx-sup{overflow-x:clip;background:var(--fx-bg);color:var(--fx-fg)}
.fx-sup-h2{font-size:clamp(28px,3.4vw,40px);line-height:1.25;font-weight:700;letter-spacing:-.025em;text-wrap:balance}
.fx-sup-sub{margin-top:var(--fx-sp-4);max-width:680px;font-size:18px;line-height:1.8;color:var(--fx-fg-2)}
.fx-sup-sub strong{color:var(--fx-fg);font-weight:700}
.fx-sup-arrow{width:20px;height:20px;flex:none;transition:transform var(--fx-time-mid) var(--fx-ease-std)}

/* ===== 1. 머리 (얇게, 어둡게) ===== */
.fx-sup-head{padding:124px 0 48px;background:var(--fx-s0)}
.fx-sup-h1{font-size:clamp(32px,5.2vw,56px);line-height:1.2;font-weight:700;letter-spacing:-.03em;text-wrap:balance}
.fx-sup-lead{margin-top:var(--fx-sp-6);max-width:620px;font-size:18px;line-height:1.7;color:var(--fx-fg-2)}

/* ===== 2. 문의 입구 — 문의하기는 어두운 큰 면, 게시판은 줄 목록 ===== */
.fx-sup-routes{padding:var(--fx-sp-12) 0 var(--fx-sp-16);background:var(--fx-bg)}
.fx-sup-routes__grid{display:grid;gap:var(--fx-sp-6)}
.fx-sup-ask{
  display:flex;flex-direction:column;gap:var(--fx-sp-3);min-height:260px;padding:var(--fx-sp-8);
  border-radius:var(--fx-radius-l);background:var(--fx-s1);
  box-shadow:inset 0 0 0 1px var(--fx-edge-ink-strong);
  transition:transform var(--fx-time-mid) var(--fx-ease-out),box-shadow var(--fx-time-mid) var(--fx-ease-std);
}
.fx-sup-ask:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--fx-brand-deep),var(--fx-shadow-m)}
.fx-sup-ask:hover .fx-sup-arrow{transform:translateX(4px)}
.fx-sup-ask__t{font-size:var(--fx-size-h3);font-weight:700;line-height:1.3;letter-spacing:-.02em}
.fx-sup-ask__d{max-width:440px;font-size:18px;line-height:1.7;color:var(--fx-fg-2)}
.fx-sup-ask__go{display:inline-flex;align-items:center;gap:var(--fx-sp-2);margin-top:auto;min-height:44px;font-size:18px;font-weight:700;color:var(--fx-brand)}
.fx-sup-rows{border-top:1px solid var(--fx-edge-strong);align-self:start}
.fx-sup-row{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px var(--fx-sp-4);
  min-height:84px;padding:var(--fx-sp-4) var(--fx-sp-3);margin:0 calc(var(--fx-sp-3) * -1);
  border-bottom:1px solid var(--fx-edge);border-radius:var(--fx-radius-s);
  transition:background-color var(--fx-time-fast) var(--fx-ease-std);
}
.fx-sup-row:hover{background:var(--fx-tint)}
.fx-sup-row:hover .fx-sup-arrow{transform:translateX(4px)}
.fx-sup-row__t{grid-column:1;font-size:20px;font-weight:700;letter-spacing:-.02em}
.fx-sup-row__d{grid-column:1;font-size:16px;color:var(--fx-fg-2)}
.fx-sup-row__go{grid-column:2;grid-row:1/3;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--fx-fg-2)}

/* ===== 3. 지원 정책 — 무료는 어두운 면, 유상은 윤곽 ===== */
.fx-sup-policy{padding:var(--fx-sp-16) 0 var(--fx-sp-24);background:var(--fx-paper-2)}
.fx-sup-sechead{margin-bottom:var(--fx-sp-8)}
.fx-sup-policy__cols{display:grid;gap:var(--fx-sp-4)}
.fx-sup-pol{padding:var(--fx-sp-8);border-radius:var(--fx-radius-l)}
.fx-sup-pol--free{background:var(--fx-s1)}
.fx-sup-pol--paid{background:transparent;box-shadow:inset 0 0 0 1px var(--fx-edge-strong)}
.fx-sup-pol__t{display:flex;flex-wrap:wrap;align-items:center;gap:var(--fx-sp-3);font-size:22px;font-weight:700;line-height:1.35;letter-spacing:-.02em}
.fx-sup-pol__t .fx-pill{font-size:var(--fx-size-small);padding:4px 12px}
.fx-sup-pol__list{margin-top:var(--fx-sp-6);display:grid;gap:var(--fx-sp-4)}
.fx-sup-pol__list li{display:grid;grid-template-columns:20px 1fr;gap:var(--fx-sp-3);font-size:17px;line-height:1.65;color:var(--fx-fg-2)}
.fx-sup-pol__list b{display:block;margin-bottom:2px;font-size:18px;font-weight:700;color:var(--fx-fg)}
.fx-sup-ck{width:20px;height:20px;margin-top:3px}
.fx-sup-pol--free .fx-sup-ck{color:var(--fx-brand)}
.fx-sup-pol--paid .fx-sup-ck{color:var(--fx-fg-3)}
.fx-sup-note{margin-top:var(--fx-sp-6);font-size:16px;line-height:1.7;color:var(--fx-fg-2)}

/* ===== 4. FAQ — 좌: 제목·분류, 우: 680px 열 ===== */
.fx-sup-faq{padding:var(--fx-sp-24) 0;background:var(--fx-bg);scroll-margin-top:96px}
.fx-sup-faq__grid{display:grid;gap:var(--fx-sp-8)}
.fx-sup-faq__nav{display:flex;flex-wrap:wrap;gap:var(--fx-sp-2);margin-top:var(--fx-sp-6)}
.fx-sup-faq__nav a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:var(--fx-radius-pill);
  box-shadow:inset 0 0 0 1px var(--fx-edge-strong);font-size:16px;font-weight:600;color:var(--fx-fg-2);
  transition:background-color var(--fx-time-fast) var(--fx-ease-std),color var(--fx-time-fast);
}
.fx-sup-faq__nav a:hover{background:var(--fx-fg);color:var(--fx-bg);box-shadow:none}
.fx-sup-faq__list{max-width:680px}
.fx-sup-qg{scroll-margin-top:96px}
.fx-sup-qg+.fx-sup-qg{margin-top:var(--fx-sp-12)}
.fx-sup-qg__t{padding-bottom:var(--fx-sp-3);border-bottom:2px solid var(--fx-fg);font-size:20px;font-weight:700;letter-spacing:-.02em}
.fx-sup-q{border-bottom:1px solid var(--fx-edge)}
.fx-sup-q__btn{
  display:flex;align-items:center;justify-content:space-between;gap:var(--fx-sp-4);width:100%;
  min-height:64px;padding:var(--fx-sp-4) 0;text-align:left;font-size:18px;font-weight:600;line-height:1.5;letter-spacing:-.01em;color:var(--fx-fg);
}
.fx-sup-q__btn:hover{color:var(--fx-fg-2)}
.fx-sup-q__ic{flex:none;color:var(--fx-fg-3)}
.fx-sup-q__v{transform-origin:center;transition:transform var(--fx-time-mid) var(--fx-ease-std),opacity var(--fx-time-mid)}
.fx-sup-q__btn[aria-expanded="true"] .fx-sup-q__v{transform:scaleY(0);opacity:0}
.fx-sup-q__a{padding:0 0 var(--fx-sp-6)}
.fx-sup-q__a[hidden]{display:none}
.fx-sup-q__a p{max-width:680px;font-size:18px;line-height:1.8;color:var(--fx-fg-2)}

/* ===== 5. 마지막 안내 (어둡게) ===== */
.fx-sup-cta{padding:var(--fx-sp-24) 0;background:var(--fx-s0)}
.fx-sup-cta__h{font-size:clamp(32px,4.4vw,56px);line-height:1.2;font-weight:700;letter-spacing:-.03em}
.fx-sup-cta__d{margin-top:var(--fx-sp-4);max-width:560px;font-size:18px;line-height:1.7;color:var(--fx-fg-2)}
.fx-sup-cta__act{display:flex;flex-wrap:wrap;gap:var(--fx-sp-3);margin-top:var(--fx-sp-8)}

/* ===== 6. 반응형 (모바일 먼저 → 768 → 1024) ===== */
@media (min-width:768px){
  .fx-sup-head{padding:140px 0 64px}
  .fx-sup-routes__grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--fx-sp-8)}
  .fx-sup-routes__grid--solo{grid-template-columns:1fr}
  .fx-sup-routes__grid--solo .fx-sup-ask{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;gap:var(--fx-sp-2) var(--fx-sp-8);min-height:0;padding:var(--fx-sp-8) var(--fx-sp-12)}
  .fx-sup-routes__grid--solo .fx-sup-ask__t{grid-column:1;grid-row:1}
  .fx-sup-routes__grid--solo .fx-sup-ask__d{grid-column:2;grid-row:1/3}
  .fx-sup-routes__grid--solo .fx-sup-ask__go{grid-column:1;grid-row:2;margin-top:0}
  .fx-sup-policy__cols{grid-template-columns:1fr 1fr}
}
@media (min-width:1024px){
  .fx-sup-faq__grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--fx-sp-16)}
  .fx-sup-faq__side{position:sticky;top:112px;align-self:start}
}
@media (max-width:480px){
  .fx-sup-ask,.fx-sup-pol{padding:var(--fx-sp-6)}
}
@media (prefers-reduced-motion:reduce){
  .fx-sup-ask:hover,.fx-sup-ask:hover .fx-sup-arrow,.fx-sup-row:hover .fx-sup-arrow{transform:none}
  .fx-sup-ask,.fx-sup-arrow,.fx-sup-q__v{transition:none}
}

/* ===== 7. 문서형 화면(가이드·공지·업데이트·FAQ, .fxd — page-plugin.php 가 문서 분기로 그린다) =====
   fx 헤더는 떠 있는(fixed) 알약이라 1024 이상(.fxd-bar 가 없는 폭)에서 첫 줄이 가려진다. 머리 높이만큼 내려 준다. */
@media (min-width:1024px){
  .fxd{padding-top:calc(var(--fx-header-h,88px) - 40px)}
}