/* 사이트 소개 (/about). 본문 HTML 은 DB(site_page 'about', 처음 값 resources/pages/about.html), 모양은 여기
   매거진 머리(About us · 사이트 소개 + 제목 | 소개 문단) → 숫자 4칸 → 연대기 메달 → 공략 영상 명판(순위 ↔ 보스 카드, 숨긴 라디오 + :checked) → 만든 사람 명판
   명판 모양은 명예의 전당(--hof-*) 것을 쓰고 .about--g 안에서 색만 사이트 보라로 바꿔 끼움 */
.about { display: flex; flex-direction: column; gap: var(--section-gap); }
.about img[src*="/img/about/"] { image-rendering: pixelated; }
.about-heat-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-solid); }
.about-heat { width: 100%; min-width: 760px; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.about-heat th, .about-heat td { padding: var(--sp-2) var(--sp-3); text-align: center; border-bottom: 1px solid var(--line); }
.about-heat thead th { position: sticky; top: 0; background: var(--surface-solid); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-sub); }
.about-heat thead th img { display: block; width: 24px; height: 24px; margin: 0 auto 2px; object-fit: contain; }
.about-heat tbody th, .about-heat tfoot th { text-align: left; white-space: nowrap; font-weight: var(--fw-semibold); color: var(--text-strong); }
.about-heat tbody td { background: color-mix(in srgb, var(--primary) calc(var(--v, 0) * 70%), transparent); color: var(--text-strong); }
.about-heat td.is-empty { color: var(--muted); background: transparent; }
.about-heat td.is-sum { font-weight: var(--fw-bold); color: var(--accent); background: var(--surface); }
.about-heat tfoot td, .about-heat tfoot th { border-bottom: 0; font-weight: var(--fw-bold); background: var(--surface); }
.about-heat tbody tr:hover th, .about-heat tbody tr:hover td.is-sum { color: var(--text-strong); }
.about-more { margin-top: var(--sp-4); }
.about-more > summary { cursor: pointer; font-size: var(--fs-sm); color: var(--accent); }
.about-more[open] > summary { margin-bottom: var(--sp-3); }
.aa-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); margin: var(--sp-4) 0 0; }
.aa-stats > div { padding: var(--sp-4) var(--sp-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-solid); }
.aa-stats dt { font-size: var(--fs-xs); color: var(--muted); }
.aa-stats dd { margin: var(--sp-1) 0 0; font-family: var(--font-display); font-size: var(--fs-4xl); font-weight: var(--fw-bold); color: var(--text-strong); }
.aa-stats dd small { margin-left: 2px; font-family: var(--font); font-size: var(--fs-sm); color: var(--muted); }
@media (max-width: 768px) {
  .aa-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.about--b .eyebrow { color: var(--hof-gold); }
.ab-ribbon { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-4); margin: 0; padding: 0; list-style: none; }
.ab-ribbon::before { content: ""; position: absolute; left: 10%; right: 10%; top: 36px; border-top: 1px solid color-mix(in srgb, var(--hof-gold) 50%, transparent); }
.ab-ribbon__item { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); text-align: center; }
.ab-ribbon__medal { display: grid; place-items: center; align-content: center; width: 72px; height: 72px; margin-bottom: var(--sp-2); border-radius: 50%; background: var(--hof-plate); border: 1px solid var(--hof-gold-deep); box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px color-mix(in srgb, var(--hof-gold) 35%, transparent); }
.ab-ribbon__medal b { font-family: var(--font-display); font-size: var(--fs-lg); line-height: var(--lh-none); color: var(--hof-gold); }
.ab-ribbon__medal small { font-size: var(--fs-2xs); color: var(--hof-cream); }
.ab-ribbon__item.is-now .ab-ribbon__medal { background: var(--hof-gold); }
.ab-ribbon__item.is-now .ab-ribbon__medal b, .ab-ribbon__item.is-now .ab-ribbon__medal small { color: var(--hof-ink); }
.ab-ribbon__item h3 { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--text-strong); }
.ab-ribbon__item p { font-size: var(--fs-xs); line-height: var(--lh-snug); color: var(--text-sub); }
.ab-ribbon__who { font-size: var(--fs-xs); color: var(--hof-gold); }
.ab-plate { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-8); border: 1px solid color-mix(in srgb, var(--hof-gold) 30%, transparent); border-radius: var(--radius-lg); background: var(--hof-plate); box-shadow: inset 0 0 0 6px var(--hof-plate-2), inset 0 0 0 7px color-mix(in srgb, var(--hof-gold) 18%, transparent); }
.ab-plate__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.ab-plate__head h2 { font-family: var(--hof-font); font-size: var(--fs-section-title); font-weight: var(--fw-bold); color: var(--hof-cream); }
.ab-plate__total { font-size: var(--fs-md); color: var(--hof-cream); }
.ab-plate__total b { margin-right: 2px; font-family: var(--font-display); font-size: var(--fs-4xl); color: var(--hof-gold); }
.ab-plate__note { font-size: var(--fs-xs); color: var(--muted); }
.ab-legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin: 0; padding: 0; list-style: none; font-size: var(--fs-xs); color: var(--text-sub); }
.ab-legend li { display: inline-flex; align-items: center; gap: 6px; }
.about--b .about-more > summary { color: var(--hof-gold); }
.ab-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.ab-top__card { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); border-radius: var(--radius); background: var(--hof-plate-3); border: 1px solid color-mix(in srgb, var(--hof-gold) 40%, transparent); }
.ab-top__card b { font-family: var(--hof-font); font-size: var(--fs-2xl); color: var(--hof-gold-light); }
.ab-top__card span:last-child { margin-left: auto; font-size: var(--fs-md); color: var(--hof-gold); }
.ab-who { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.ab-who li { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2); border-radius: var(--radius-sm); background: var(--hof-plate-2); font-size: var(--fs-sm); color: var(--hof-cream); }
.ab-who li b { color: var(--hof-gold); font-variant-numeric: tabular-nums; }
@media (max-width: 1024px) {
  .ab-ribbon { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .ab-ribbon::before { left: 36px; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 1px solid color-mix(in srgb, var(--hof-gold) 50%, transparent); }
  .ab-ribbon__item { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: var(--sp-4); align-items: start; text-align: left; }
  .ab-ribbon__medal { grid-row: span 3; margin: 0; }
}
@media (max-width: 768px) {
  .ab-plate { padding: var(--sp-5); }
  .ab-top { grid-template-columns: minmax(0, 1fr); }
}
.about--b .about-heat-wrap { border-color: color-mix(in srgb, var(--hof-gold) 22%, transparent); background: var(--hof-plate-2); }
.about--b .about-heat thead th { background: var(--hof-plate-2); color: var(--hof-cream); }
.about--b .about-heat tbody td { background: color-mix(in srgb, var(--hof-gold) calc(var(--v, 0) * 55%), transparent); }
.about--b .about-heat td.is-empty { background: transparent; }
.about--b .about-heat td.is-sum, .about--b .about-heat tfoot td, .about--b .about-heat tfoot th { color: var(--hof-gold); background: var(--hof-plate-3); }
.about--b .about-heat th, .about--b .about-heat td { border-bottom-color: color-mix(in srgb, var(--hof-gold) 10%, transparent); }
.ab-sub { margin-top: var(--sp-2); font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--hof-cream); }
.ab1-cls { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.ab1-cls li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--sp-3) var(--sp-2); border-radius: var(--radius); background: var(--hof-plate-2); border: 1px solid color-mix(in srgb, var(--hof-gold) 15%, transparent); }
.ab1-cls .about-face { width: 40px; height: 40px; }
.ab1-cls span { font-size: var(--fs-xs); color: var(--text-sub); }
.ab1-cls b { font-family: var(--font-display); font-size: var(--fs-2xl); color: var(--hof-gold); }
.ab1-team { display: grid; place-items: center; width: 32px; height: 32px; font-size: var(--fs-2xs); font-weight: var(--fw-black); color: var(--hof-ink); background: var(--hof-gold); border-radius: var(--radius-sm); }
.ab1-boss { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(11, auto); column-gap: var(--sp-8); margin: 0; padding: 0; list-style: none; }
.ab1-boss li { display: grid; grid-template-columns: 24px 140px minmax(0, 1fr) 36px; align-items: center; gap: var(--sp-2); min-height: 32px; border-bottom: 1px solid color-mix(in srgb, var(--hof-gold) 10%, transparent); font-size: var(--fs-sm); }
.ab1-boss__no { font-family: var(--font-display); font-size: var(--fs-xs); color: var(--muted); text-align: center; }
.ab1-boss li:nth-child(-n+3) .ab1-boss__no { color: var(--hof-gold); font-size: var(--fs-sm); }
.ab1-boss__name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--hof-cream); }
.ab1-boss i { display: block; height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--hof-gold-deep) var(--w), var(--hof-plate-3) var(--w)); }
.ab1-boss b { text-align: right; color: var(--hof-gold); font-variant-numeric: tabular-nums; }
.ab3-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.ab3-card { overflow: hidden; border-radius: var(--radius); background: var(--hof-plate-2); border: 1px solid color-mix(in srgb, var(--hof-gold) 18%, transparent); transition: border-color .2s ease; }
.ab3-card:hover { border-color: color-mix(in srgb, var(--hof-gold) 55%, transparent); }
.ab3-card img { display: block; width: 100%; aspect-ratio: 350 / 110; object-fit: cover; image-rendering: pixelated; }
.ab3-card__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-1) var(--sp-2); padding: var(--sp-3); }
.ab3-card__name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--hof-cream); }
.ab3-card__sum { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--hof-gold); }
.ab3-card__sum small { margin-left: 1px; font-family: var(--font); font-size: var(--fs-2xs); color: var(--muted); }
.ab3-card__dots { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.ab3-card__dots span { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--hof-cream); font-variant-numeric: tabular-nums; }
.ab3-card__dots .is-empty { color: var(--muted); } .ab3-card__dots .is-empty .about-face { filter: grayscale(1) brightness(.5); }
@media (max-width: 1024px) {
  .ab1-cls { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ab1-boss { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; grid-template-rows: none; }
}
@media (max-width: 768px) {
  .ab1-boss li { grid-template-columns: 20px 110px minmax(0, 1fr) 32px; }
}
/* 바탕은 사이트 카드와 같은 색(--surface-solid), 보라는 선·글씨·숫자에만 */
.about--g { gap: var(--sp-8); --hof-gold: var(--accent); --hof-gold-deep: var(--primary); --hof-gold-light: var(--text-strong); --hof-cream: var(--text); --hof-plate: var(--surface-solid); --hof-plate-2: color-mix(in srgb, var(--text-strong) 3%, var(--surface-solid)); /* 명판 안 칸: 카드보다 아주 살짝 밝게 */ --hof-plate-3: var(--surface-2); --hof-ink: var(--bg); --hof-font: var(--font-heading); }
.ag-stats { margin: 0; }
.about--g .ab-ribbon { margin-block: var(--sp-8) var(--sp-6); }
.ag-stats > div { background: var(--surface-solid); border-color: var(--line); }
.ag-stats dd { color: var(--accent); }
.ag-ava--lg { width: 56px; height: 56px; font-size: var(--fs-xl); }
.about--g .ab-who .avatar { flex: none; }
.ag-tabs .pill { min-height: 36px; font-size: var(--fs-sm); cursor: pointer; border-color: color-mix(in srgb, var(--hof-gold) 30%, transparent); color: var(--hof-cream); }
.ag-tabs .pill:hover { border-color: var(--hof-gold); color: var(--hof-gold-light); }
#ag-view-rank:checked ~ .ag-tabs label[for="ag-view-rank"], #ag-view-card:checked ~ .ag-tabs label[for="ag-view-card"] { background: var(--hof-gold); border-color: transparent; color: var(--hof-ink); font-weight: var(--fw-semibold); }
#ag-view-rank:focus-visible ~ .ag-tabs label[for="ag-view-rank"], #ag-view-card:focus-visible ~ .ag-tabs label[for="ag-view-card"] { box-shadow: 0 0 0 3px color-mix(in srgb, var(--hof-gold) 45%, transparent); }
.ag-panel { display: flex; flex-direction: column; gap: var(--sp-4); }
#ag-view-rank:checked ~ .ag-panel--card, #ag-view-card:checked ~ .ag-panel--rank { display: none; }
.ab-who li > span:not(.avatar) { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* 이름이 칸을 채워 숫자가 오른쪽 끝으로 */
/* 금빛 포인트: 보라 바탕 위에 몇 군데만 (영문 머리글 · 지금(2026) 메달 · 큰 합계 숫자 · 보스 순위 1~3 · 위 두 분 명판) */
.about--g .eyebrow { color: var(--gold); }
.about--g .ab-ribbon__item.is-now .ab-ribbon__medal { background: var(--medal-gold); border-color: transparent; box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px color-mix(in srgb, var(--gold) 45%, transparent); }
.about--g .ab-ribbon__item.is-now .ab-ribbon__medal b, .about--g .ab-ribbon__item.is-now .ab-ribbon__medal small { color: var(--medal-gold-ink); }
.about--g .ab-plate__total b { color: var(--gold); }
.about--g .ab1-boss li:nth-child(-n+3) .ab1-boss__no { color: var(--gold); }
.about--g .ab-top__card { border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.about--g .ab-top__card span:last-child { color: var(--gold); }

/* 캐릭터 얼굴 동그라미 (img/characters/face-*.webp, 캐릭터 공략과 같은 그림). 팀플레이는 금빛 4P 동그라미 */
.about-face { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; object-fit: cover; background: var(--surface-2); box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 75%, transparent); } /* 얇은 금테 */
.ab1-team.about-face { background: var(--medal-gold); color: var(--medal-gold-ink); font-size: var(--fs-micro); font-weight: var(--fw-black); font-style: normal; box-shadow: none; }
.ab1-cls .ab1-team.about-face { font-size: var(--fs-2xs); }
.ab3-card__dots .about-face { width: 20px; height: 20px; }
/* 보스 카드: 영상이 가장 많은 직업 한 줄 */
.ab3-card__best { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--text-sub); }
.ab3-card__best > span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ab3-card__best b { color: var(--gold); font-variant-numeric: tabular-nums; }
.ab3-card__best .about-face { width: 22px; height: 22px; }
/* 보스 카드 슬라이드 (메인 시안 넷플릭스형 줄): 한 줄로 옆으로 넘김, 양옆 화살표(js/about.js) · 화살표 없이도 가로 스크롤로 넘어감 */
.ab3-slider { position: relative; }
.ab3-slider .ab3-grid { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - var(--sp-3) * 3) / 4); grid-template-columns: none; gap: var(--sp-3); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: var(--sp-1); }
.ab3-slider .ab3-grid::-webkit-scrollbar { display: none; }
.ab3-slider .ab3-card { scroll-snap-align: start; }
.ab3-arr { position: absolute; z-index: 2; top: 24%; /* 보스 그림 높이 가운데 (이름·숫자를 가리지 않게) */ transform: translateY(-50%); padding: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent); background: color-mix(in srgb, var(--bg) 85%, transparent); color: var(--gold); cursor: pointer; transition: background .2s ease, opacity .2s ease; }
.ab3-arr:hover { background: var(--hof-plate-3); }
.ab3-arr:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--focus-rgb), .45); }
.ab3-arr--l { left: calc(var(--sp-4) * -1); }
.ab3-arr--r { right: calc(var(--sp-4) * -1); }
.ab3-arr.is-end { opacity: 0; pointer-events: none; }
@media (max-width: 1024px) { .ab3-slider .ab3-grid { grid-auto-columns: calc((100% - var(--sp-3) * 2) / 3); } }
@media (max-width: 768px) {
  .ab3-slider .ab3-grid { grid-auto-columns: 72%; }
  .ab3-arr { display: none; }
}
/* 머리글 한 줄 "ABOUT US · 사이트 소개": 한 색(금빛)으로, 보통 영문 머리글보다 크게 */
.ag-hero__kicker { font-size: var(--fs-lg); letter-spacing: .12em; }
.about-heat thead th .about-face { width: 28px; height: 28px; margin: 0 auto 4px; }
/* 머리 (매거진 카드 모양): 왼쪽 머리글 · 제목, 오른쪽 소개 문단, 아래 줄 맞춤 */
.ah-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; gap: var(--sp-8); padding: 0 0 var(--sp-6); } /* 위 여백 없이: 첫 글자가 다른 화면 머리말과 같은 높이 */
.ah-hero__head { display: flex; flex-direction: column; gap: var(--sp-3); }
.ah-hero__title { font-size: var(--fs-hero); font-weight: var(--fw-black); letter-spacing: var(--ls-display); line-height: var(--lh-display); color: var(--text-strong); }
.ah-hero__desc { font-size: var(--fs-base); line-height: var(--lh-reading); color: var(--text-sub); }
@media (max-width: 768px) { .ah-hero { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); } }

/* 영상을 만들어 주신 분: 명전·보스 얼굴(가로로 긴 그림)은 얼굴이 보이게 조금 위쪽 · 폰은 5위까지만 보이고 나머지는 '더 보기' */
.avatar--hof { object-position: 50% 22%; }
.ab-who-more { display: none; }
@media (max-width: 768px) {
  #ab-who-all:not(:checked) ~ .ab-who li:nth-child(n+4) { display: none; }
  .ab-who-more { display: flex; margin-top: var(--sp-3); border-color: var(--line-strong); }
  #ab-who-all:checked ~ .ab-who-more .ab-who-more__open, #ab-who-all:not(:checked) ~ .ab-who-more .ab-who-more__close { display: none; }
  #ab-who-all:focus-visible ~ .ab-who-more { box-shadow: 0 0 0 3px rgba(var(--focus-rgb), .45); }
}