/* ==========================================================================
   캐릭터 목록 · 쇼케이스 (sc-)  시안 C를 사이트 톤으로
   - 직업마다 --cc(강조색)과 --cc-rgb 를 바꿔 빛과 막대 색이 따라감
   - "공략 보기"를 누르면 그림이 앞으로 다가오며 상세(허브)로 들어감
   ========================================================================== */
.sc { --cc: var(--cls-fighter, #FFD08A); --cc-rgb: 255,208,138; }
.sc > .page-head { margin-bottom: var(--sp-6); } /* 공통 머리말 아래 쇼케이스 */
.sc-show {
  /* 한 화면 안에: 위는 왼쪽 소개 · 오른쪽 전신 그림 (그림 높이는 남은 칸에 맞춤), 맨 아래 한 줄은 직업 고르기 */
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(560px, calc(100svh - var(--header-h) - 96px), 820px); /* 최소 높이: 글이 더 길면 늘어나 잘리지 않음. 화면 끝보다 조금 짧게 해서 아래 직업 줄이 위로 올라옴 */
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; column-gap: 24px;
  align-items: stretch;
}
.sc-show::before { /* 직업색 빛 */
  content: ""; position: absolute; z-index: -2; inset: 0;
  background: radial-gradient(ellipse 40% 62% at 66% 56%, rgba(var(--cc-rgb), .22), rgba(var(--cc-rgb), .05) 55%, transparent 80%); /* 빛이 칸 오른쪽 끝(overflow: hidden) 전에 다 사라지게 (66% + 40%×.8 ≈ 98%). 넘으면 수직으로 잘려 보였음 */
  transition: background .8s ease;
}
.sc-word {
  position: absolute; z-index: -1; right: 0; top: 9%; margin: 0; /* 폭이 넘치면 showcase.js 가 글자 크기를 줄임 */
  font: 700 clamp(96px, 13vw, 220px)/.8 var(--font-display); /* 뒤 글씨는 그림·제목을 덮지 않게 작게 */ white-space: nowrap; letter-spacing: -.01em;
  color: rgba(255,255,255,.02); -webkit-text-stroke: 1.5px rgba(255,255,255,.14); pointer-events: none; user-select: none; /* 배경 그림에 묻히지 않게 테두리를 조금 진하게 + 아주 옅게 채움 */
}
.sc-text { position: relative; z-index: 2; align-self: center; padding: var(--sp-4) 0 var(--sp-6); max-width: 600px; }
.sc-role { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--cc); }
.sc-role::before { content: ""; width: 18px; height: 1px; background: currentColor; }
.sc-en { margin: 10px 0 4px; font: 700 clamp(44px, 5.4vw, 80px)/.9 var(--font-display); letter-spacing: .015em; color: #fff; text-shadow: 0 6px 40px rgba(0,0,0,.6); }
.sc-ko { margin: 0; font-size: clamp(20px, 2.2vw, 26px); font-weight: 900; letter-spacing: -.03em; color: var(--text-strong); }
.sc-ko span { margin-left: 10px; font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.sc-desc { margin: 14px 0 0; max-width: 44ch; color: var(--text-sub); font-size: var(--fs-base); line-height: var(--lh-base); min-height: 3.2em; }
.sc-bars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 22px; max-width: 460px; margin: 26px 0 0; padding: 0; list-style: none; }
.sc-bars li { display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; font-size: 12.5px; color: var(--muted); }
.sc-bars abbr { text-decoration: none; }
.sc-bars b { color: var(--text-strong); font-size: 14px; font-variant-numeric: tabular-nums; }
.sc-bars i { grid-column: 1 / -1; height: 4px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.sc-bars i::before { content: ""; display: block; height: 100%; width: calc(var(--v, 0) / 18 * 100%); border-radius: inherit; background: rgba(255,255,255,.5); transition: width .7s cubic-bezier(.2,.8,.2,1); }
.sc-bars .hi { color: var(--text-sub); }
.sc-bars .hi b { color: var(--cc); }
.sc-bars .hi i::before { background: var(--cc); }
.sc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 30px; }
.sc-actions .soon { font-size: 13px; color: var(--muted); }
.sc-actions .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
/* 공략 보기: 보라 대신 공략실 · 탭과 같은 금빛 (캐릭터 상세 '공략 들어가기'와 같음) */
.sc-actions .btn--primary { background: var(--medal-gold); color: var(--medal-gold-ink); box-shadow: 0 0 0 1px color-mix(in srgb, var(--hof-gold) 60%, transparent), 0 10px 24px -10px color-mix(in srgb, var(--hof-gold) 55%, transparent); }
.sc-actions .btn--primary:hover { background: var(--medal-gold); color: var(--medal-gold-ink); filter: brightness(1.08); }

.sc-stage { position: relative; z-index: 1; min-height: 0; }
.sc-fig {
  position: absolute; left: 50%; bottom: 8%; height: calc(86% * var(--fig-k, 1)); width: auto; max-width: 100%; object-fit: contain; /* 아래 직업 줄에서 띄워 조금 위로, 발끝까지. --fig-k: 직업별 크기 (드워프는 작게, showcase.js) */
  transform: translateX(-50%);
  /* 외곽선: 진한 먹선(--fig-line 굵기, 네 방향) + 직업 색 옅은 빛 → 뒤 던전 그림과 또렷하게 나뉨. 마지막은 원래 있던 아래 그림자 */
  --fig-line: 1px; --fig-ink: rgba(var(--scrim-rgb), .5);
  filter: drop-shadow(var(--fig-line) 0 0 var(--fig-ink)) drop-shadow(calc(var(--fig-line) * -1) 0 0 var(--fig-ink))
          drop-shadow(0 var(--fig-line) 0 var(--fig-ink)) drop-shadow(0 calc(var(--fig-line) * -1) 0 var(--fig-ink))
          drop-shadow(0 0 6px rgba(var(--cc-rgb), .28)) drop-shadow(0 30px 40px rgba(0,0,0,.65));
}
.sc-floor { position: absolute; left: 22%; right: 22%; bottom: calc(8% - 22px); height: 40px; /* 발밑 그림자: 그림과 같이 올라감. 가로 위치·폭은 showcase.js 가 직업별 발 위치(foot)로 맞춤 */ background: radial-gradient(closest-side, rgba(0,0,0,.7), transparent); }
.sc-names { position: absolute; right: 0; bottom: 34px; margin: 0; text-align: right; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.sc-names b { font-family: var(--font-display); font-size: 15px; color: var(--text-sub); font-weight: 700; margin: 0 4px 0 2px; }
/* 주 캐릭터 인기: 그림 오른쪽 아래, 1P·2P 이름 위 */
.sc-pop { position: absolute; right: 0; bottom: 64px; margin: 0; display: flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid rgba(var(--cc-rgb), .45); border-radius: 999px; background: color-mix(in srgb, var(--surface-solid) 80%, transparent); font-size: var(--fs-xs); color: var(--text-sub); }
.sc-pop[hidden] { display: none; }
.sc-pop b { color: var(--cc); font-weight: var(--fw-bold); }
@media (prefers-reduced-motion: no-preference) {
  .sc-fig { transition: opacity .35s ease, transform .55s cubic-bezier(.2,.8,.2,1); }
  .sc-fig.is-out { opacity: 0; transform: translateX(calc(-50% + 40px)); }
  .sc-text > * { transition: opacity .3s ease; }
  .sc.is-swap .sc-text > :not(.sc-actions) { opacity: .15; }
  /* 공략 보기: 그림이 다가오고 화면이 어두워지며 상세로 */
  .sc.is-enter .sc-fig { transform: translateX(-50%) scale(1.12); transition: transform .5s cubic-bezier(.4,0,.2,1), opacity .5s; opacity: .0; }
  .sc.is-enter .sc-text, .sc.is-enter .sc-pick, .sc.is-enter .sc-word { opacity: 0; transition: opacity .3s; }
}

/* 직업 고르기: 쇼케이스 맨 아래 한 줄, 얼굴 + 이름 (오락실 캐릭터 고르기처럼) */
.sc-pick { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-3); padding: var(--sp-4) 0 var(--sp-6); }
.sc-text, .sc-stage { grid-row: 1; }
.sc-pick button {
  position: relative; display: block; height: 104px; padding: 0; border-radius: var(--radius); overflow: hidden; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--art-bg); opacity: .6; transition: opacity .2s, transform .25s, border-color .2s;
}
/* 직업 카드 그림: 눈높이가 카드 세로 가운데에 오게 (--eye = 그림 높이 대비 눈 위치, 패널마다 다름).
   top 50% 에 그림을 두고 자기 높이의 --eye 만큼 끌어올림. 폭은 카드보다 좁아지지 않게 하되, 좁은 폰 카드에서도 눈 위가 비지 않게 최소 124px. --fx = 얼굴 가로 위치 (폰처럼 그림이 카드보다 넓을 때만 의미가 있음) */
.sc-pick button img { position: absolute; left: 50%; top: 50%; width: max(100%, 124px); max-width: none; height: auto; /* 공통 img { max-width: 100% } 를 풀어야 폰에서 최소 폭이 먹음 */
  transform: translate(calc(var(--fx, .5) * -100%), calc(var(--eye, .17) * -100%)); display: block; }
.sc-pick button img[src*="panel-fighter"] { --eye: .181; --fx: .36; }
.sc-pick button img[src*="panel-cleric"]  { --eye: .124; }
.sc-pick button img[src*="panel-elf"]     { --eye: .174; }
.sc-pick button img[src*="panel-dwarf"]   { --eye: .294; }
.sc-pick button img[src*="panel-muser"]   { --eye: .166; }
.sc-pick button img[src*="panel-thief"]   { --eye: .137; }
@media (min-width: 769px) { .sc-pick button img[src] { --fx: .5; } } /* 넓은 카드는 그림 폭 = 카드 폭이라 가로는 가운데 그대로 (위 직업별 --fx 보다 뒤에 둬서 이김) */
.sc-pick button::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(var(--scrim-rgb), .85)); } /* 이름이 읽히게 아래만 어둡게 */
.sc-pick__n { position: absolute; z-index: 1; left: 10px; right: 10px; bottom: 8px; display: flex; align-items: baseline; gap: 6px; font-size: var(--fs-md); font-weight: var(--fw-heavy); color: var(--text-strong); text-align: left; white-space: nowrap; }
.sc-pick__n small { overflow: hidden; text-overflow: ellipsis; font: var(--fw-bold) var(--fs-2xs) var(--font-display); letter-spacing: .06em; color: var(--muted); }
.sc-pick button:hover { opacity: .9; }
/* 마우스를 올리면: 살짝 떠오르고 얼굴이 조금 커지며 밝아지고, 빛이 왼쪽에서 스윽 지나감 (공략실 명판과 같은 느낌) */
.sc-pick button img { transition: scale .35s ease, filter .35s ease; }
.sc-pick button::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.08) 50%, transparent 70%); transform: translateX(-120%); pointer-events: none; }
@media (hover: hover) {
  .sc-pick button:hover { opacity: .85; transform: translateY(-1px); border-color: rgba(var(--cc-rgb), .35); }
  .sc-pick button:hover img { scale: 1.03; filter: brightness(1.05); }
  .sc-pick button:hover::before { transform: translateX(120%); transition: transform .9s ease; }
}
@media (prefers-reduced-motion: reduce) { .sc-pick button img, .sc-pick button::before { transition: none; } .sc-pick button:hover img { scale: 1; } .sc-pick button:hover::before { display: none; } }
.sc-pick button[aria-pressed="true"] { opacity: 1; border-color: var(--cc); box-shadow: 0 0 0 2px rgba(var(--cc-rgb), .35); transform: translateY(-3px); }
.sc-pick button[aria-pressed="true"] .sc-pick__n small { color: var(--cc); }
.sc-pick button .dot { position: absolute; z-index: 1; top: 8px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--state-ok, #8BE28B); box-shadow: 0 0 0 2px rgba(0,0,0,.5); }

/* 아래: 이 캐릭터로 볼 공략 */
.sc-guides { padding: var(--sp-12) 0 var(--sp-16); border-top: 1px solid var(--line); }
/* 직업별 커뮤니티 글 (공략 칸 아래) */
.sc-related { padding: 0 0 var(--sp-10); }
.sc-media { padding: 0 0 var(--sp-16); }
.sc-media__block + .sc-media__block { margin-top: var(--sp-10); }
.sc-related__set[hidden] { display: none; }
.sc-related__more { font-size: var(--fs-sm); color: var(--accent); white-space: nowrap; }
.sc-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sc-card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; min-height: 168px; padding: 16px 18px;
  border-radius: var(--radius-lg); border: 1px solid var(--line-strong); background: var(--art-bg); overflow: hidden; isolation: isolate; color: var(--text); text-decoration: none;
  transition: border-color .2s;
}
.sc-card:hover { border-color: rgba(var(--cc-rgb), .55); color: var(--text); }
.sc-card img { position: absolute; z-index: -2; top: 47px; left: 50%; transform: translate(-50%, -50%); min-height: 36px; max-width: calc(100% - 24px); max-height: 70px; image-rendering: pixelated; mix-blend-mode: lighten; opacity: .65; transition: opacity .2s; } /* 그림은 위 70px 칸 한가운데. 작은 그림(장비 칼)은 높이 36px 로 키움 (48px 이면 칼이 2.7배로 너무 컸음, 파이터 · 시프 칼은 딱 2배) (예전엔 오른쪽 위 구석에 작게 붙었음) */
.sc-card:hover img { opacity: 1; }
.sc-card::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(var(--bg-rgb), .9)); }
.sc-card small { font-size: 12px; color: var(--cc); font-weight: 700; }
.sc-card b { font-size: 18px; font-weight: 900; letter-spacing: -.03em; color: var(--text-strong); }
.sc-card span { font-size: 13px; color: var(--text-sub); }
.sc-empty { padding: 34px 24px; border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); text-align: center; color: var(--muted); font-size: 14.5px; }
.sc-empty b { display: block; margin-bottom: 4px; color: var(--text-strong); font-size: 16px; }

@media (max-width: 1024px) { .sc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 화면 높이가 낮을 때(작은 노트북): 육각형·제목을 한 단계 줄여 한 화면에 들어오게 */
@media (max-height: 800px) and (min-width: 769px) {
  .sc-pick { padding: var(--sp-2) 0 var(--sp-3); }
  .sc-pick button { height: 72px; }
  .sc-text { padding: var(--sp-2) 0 var(--sp-3); }
  .sc-en { margin-top: 6px; font-size: clamp(40px, 4.4vw, 60px); }
  .sc-desc { margin-top: 8px; }
  .sc-radar { margin-top: 4px; }
  .sc-radar svg { width: clamp(190px, 15vw, 220px); }
}
@media (max-width: 1024px) {
  .sc-pick button { height: 88px; }
  .sc-pick__n small { display: none; }
}
@media (max-width: 768px) {
  .sc-show { grid-template-columns: 1fr; grid-template-rows: none; height: auto; }
  .sc-stage { order: 1; height: 440px; }
  /* 모바일: 그림 아래 36px 를 비우고 거기에 1P·2P 이름 (그림과 겹치지 않게) */
  .sc-fig { height: calc((100% - 36px) * var(--fig-k, 1)); bottom: 36px; }
  .sc-floor { bottom: 26px; }
  .sc-names { left: 0; right: 0; bottom: 0; text-align: center; }
  .sc-pop { left: 50%; right: auto; bottom: 30px; transform: translateX(-50%); white-space: nowrap; }
  .sc-text { order: 2; padding: var(--sp-6) 0 var(--sp-6); }
  .sc-word { top: 2%; font-size: 30vw; right: auto; left: 50%; transform: translateX(-50%); } /* 가운데 (오른쪽 붙임이면 ELF 처럼 짧은 이름만 오른쪽으로 쏠려 보였음) */
  /* 폰: 아래 한 줄을 옆으로 밀어 보기 */
  .sc-text, .sc-stage { grid-row: auto; }
  .sc-pick { order: 3; grid-row: auto; display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; padding: var(--sp-4) 0 var(--sp-3); }
  .sc-pick::-webkit-scrollbar { display: none; }
  .sc-pick button { flex: 0 0 84px; height: 96px; }
  .sc-bars { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) { .sc-cards { grid-template-columns: 1fr; } .sc-card { min-height: 0; padding-top: 92px; } .sc-card::after { background: linear-gradient(180deg, transparent 45%, rgba(var(--bg-rgb), .9)); } } /* 폰: 그림 칸(위 92px) 아래로 글자 */

/* 능력치 육각형: 소개 글 바로 아래, 글과 같은 왼쪽 선에 맞춤 */
.sc-radar { margin: 14px 0 0; }
.sc-radar svg { display: block; width: clamp(250px, 21vw, 320px); height: auto; overflow: visible; } /* 한 화면에 들어오게 조금 작게 */
.sc-radar .ring { fill: none; stroke: rgba(255,255,255,.09); }
.sc-radar .ring.outer { stroke: rgba(255,255,255,.2); }
.sc-radar .axis { stroke: rgba(255,255,255,.08); }
.sc-radar .poly { fill: rgba(var(--cc-rgb), .22); stroke: var(--cc); stroke-width: 2.5; stroke-linejoin: round; transition: fill .6s, stroke .6s; }
.sc-radar .pt { fill: var(--cc); stroke: var(--bg); stroke-width: 2; transition: fill .6s; }
.sc-radar .lbl { fill: var(--muted); font: 600 12.5px var(--font); }
.sc-radar .val { fill: var(--text-strong); font: 800 17px var(--font); }
.sc-radar .lbl.hi, .sc-radar .val.hi { fill: var(--cc); }
.sc-text .sc-actions { margin-top: 6px; }
@media (max-width: 768px) {
  .sc-radar svg { width: min(360px, 88vw); margin: 0 auto; }
}
/* 시프 '콤보 영상' 카드: 그림(오른쪽 끝 옆 장면 조각을 지운 판 tile-combo-clean.png, showcase.js)을 살짝 오른쪽으로 */
.sc-card[href="/characters/thief#combos"] img { left: calc(50% + 14px); }