/* 명예의 전당 (hof-) · C:/홈페이지/UI/명예의전당 시안. 색은 dnd2.css 의 --hof-* 토큰, 사진은 img/hof/hNN */
body:has(.hof) .page-art { display: none; } /* 머리에 자체 그림 벽이 있어 페이지 배경 그림은 끔 */
.hof { max-width: var(--container, 1280px); margin: 0 auto; padding-left: var(--gutter, 24px); padding-right: var(--gutter, 24px); box-sizing: border-box; --gold: var(--hof-gold); --gold-d: var(--hof-gold-deep); --silver: var(--hof-silver); --bronze: var(--hof-bronze); --serif: var(--hof-font); --plate: var(--hof-plate); --plate-2: var(--hof-plate-3); padding-bottom: 40px; }
.hof button { font: inherit; color: inherit; }
.hof button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ── 히어로 ── */
.hof-hero { position: relative; margin-top: 18px; padding: 0 24px; overflow: hidden; border: 1px solid rgba(var(--hof-gold-rgb),.2); border-radius: 24px; }
.hof-hero__wall { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(10, 1fr); grid-auto-rows: 50%; opacity: .22; filter: grayscale(.6) sepia(.35) blur(1px); }
.hof-ph { display: block; width: 100%; height: 100%; background: var(--art-bg-deep) center / cover no-repeat; }
.hof-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse 60% 70% at 50% 40%, rgba(var(--scrim-rgb),.55), rgba(var(--scrim-rgb),.94) 75%), linear-gradient(transparent 60%, var(--bg) 100%); }
.hof-hero__in { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; max-width: 820px; margin: 0 auto; padding: 72px 0 56px; text-align: center; }
.hof-hero .bx-eyebrow { justify-content: center; }
.hof-title { margin: 14px 0 0; font-family: var(--font-display); font-size: clamp(48px, 9vw, 104px); font-weight: 700; line-height: .95; letter-spacing: .02em; background: linear-gradient(180deg, var(--hof-gold-light) 0%, var(--gold) 45%, var(--hof-gold-darker) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 24px rgba(var(--hof-gold-rgb),.25)); }
.hof-sub { margin: 10px 0 0; font-family: var(--serif); font-size: 22px; font-weight: 700; letter-spacing: .4em; color: var(--gold); }
.hof-sub::before, .hof-sub::after { content: ""; display: inline-block; width: 48px; height: 1px; margin: 0 16px; vertical-align: middle; background: linear-gradient(90deg, transparent, var(--gold)); }
.hof-sub::after { transform: scaleX(-1); }
.hof-lead { max-width: 56ch; margin: 22px 0 0; font-size: 16px; line-height: 1.85; color: var(--text-sub); }
.hof-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; width: 100%; max-width: 620px; margin-top: 30px; overflow: hidden; border: 1px solid rgba(var(--hof-gold-rgb),.25); border-radius: 14px; background: rgba(var(--hof-gold-rgb),.18); }
.hof-stats > div { padding: 14px 8px; background: rgba(var(--scrim-rgb),.85); }
.hof-stats b { display: block; font-family: var(--serif); font-size: 28px; color: var(--gold); }
.hof-stats span { font-size: 12.5px; color: var(--muted); }
.hof-note { max-width: 620px; width: 100%; margin-top: 16px; text-align: left; background: rgba(var(--scrim-rgb),.8); }

/* ── 섹션 머리 ── */
.hof-sec { padding-top: 64px; }
.hof-h { text-align: center; margin-bottom: 30px; }
.hof-h .en { display: block; font-family: var(--font-display); font-size: 13px; letter-spacing: .32em; color: var(--gold-d); }
.hof-h h2 { margin: 6px 0 0; font-family: var(--serif); font-size: clamp(28px, 3.6vw, 38px); font-weight: 700; color: var(--text-strong); }
.hof-h p { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.hof-h::after { content: ""; display: block; width: 72px; height: 2px; margin: 18px auto 0; background: linear-gradient(90deg, transparent, var(--gold), transparent); }

/* ── 명판(카드) ── */
.hof-card { --t: var(--bronze); position: relative; display: flex; flex-direction: column; padding: 0; border: 1px solid color-mix(in srgb, var(--t) 45%, transparent); border-radius: 14px; background: linear-gradient(180deg, var(--plate-2), var(--plate)); text-align: left; cursor: pointer; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s; box-shadow: inset 0 0 0 4px var(--plate), inset 0 0 0 5px color-mix(in srgb, var(--t) 22%, transparent); }
.hof-card:hover { transform: translateY(-4px); border-color: var(--t); box-shadow: inset 0 0 0 4px var(--plate), inset 0 0 0 5px color-mix(in srgb, var(--t) 40%, transparent), 0 18px 40px -18px color-mix(in srgb, var(--t) 60%, transparent); }
.hof-gold { --t: var(--gold); } .hof-silver { --t: var(--silver); } .hof-bronze { --t: var(--bronze); }
.hof-card::before { content: ""; position: absolute; inset: 9px; z-index: 2; pointer-events: none; --c: var(--t); --l: 14px; --w: 2px;
  background: linear-gradient(var(--c),var(--c)) top left / var(--l) var(--w) no-repeat, linear-gradient(var(--c),var(--c)) top left / var(--w) var(--l) no-repeat,
  linear-gradient(var(--c),var(--c)) top right / var(--l) var(--w) no-repeat, linear-gradient(var(--c),var(--c)) top right / var(--w) var(--l) no-repeat,
  linear-gradient(var(--c),var(--c)) bottom left / var(--l) var(--w) no-repeat, linear-gradient(var(--c),var(--c)) bottom left / var(--w) var(--l) no-repeat,
  linear-gradient(var(--c),var(--c)) bottom right / var(--l) var(--w) no-repeat, linear-gradient(var(--c),var(--c)) bottom right / var(--w) var(--l) no-repeat; opacity: .85; }
.hof-card__img { position: relative; display: block; margin: 5px 5px 0; aspect-ratio: 226 / 186; overflow: hidden; border-radius: 10px 10px 4px 4px; }
.hof-card__img .hof-ph { transition: transform .35s ease; }
.hof-card:hover .hof-card__img .hof-ph { transform: scale(1.04); }
.hof-card__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(var(--scrim-rgb),.85)); }
.hof-gen { position: absolute; left: 12px; bottom: 10px; z-index: 1; padding: 3px 9px; border-radius: 999px; background: rgba(var(--scrim-rgb),.8); border: 1px solid color-mix(in srgb, var(--t) 60%, transparent); color: var(--t); font-size: 11.5px; font-weight: 700; }
.hof-card__body { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 16px 14px; text-align: center; flex: 1; }
.hof-power { position: absolute; top: -30px; right: 14px; z-index: 2; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--t) 70%, var(--text-strong)), color-mix(in srgb, var(--t) 70%, var(--art-bg-deep)) 75%); color: var(--hof-ink); box-shadow: 0 0 0 3px var(--plate), 0 8px 18px rgba(0,0,0,.5); line-height: 1; }
.hof-power b { font-family: var(--serif); font-size: 21px; }
.hof-power small { font-size: var(--fs-micro); font-weight: 800; margin-top: -8px; opacity: .8; }
.hof-name { font-family: var(--serif); font-size: 22px; font-weight: 700; color: var(--text-strong); letter-spacing: .01em; }
.hof-ids { font-size: 12.5px; color: var(--muted); }
.hof-tag { margin-top: 4px; font-size: 13.5px; color: var(--t); font-weight: 600; }
.hof-meta { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; width: 100%; border-top: 1px solid rgba(255,255,255,.07); }
.hof-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.hof-cls { padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: rgba(255,255,255,.06); color: var(--c, var(--text-sub)); border: 1px solid color-mix(in srgb, var(--c, var(--text-sub)) 35%, transparent); }
.hof-cls--fighter { --c: var(--cls-fighter); } .hof-cls--cleric { --c: var(--cls-cleric); } .hof-cls--elf { --c: var(--cls-elf); } .hof-cls--dwarf { --c: var(--cls-dwarf); } .hof-cls--muser { --c: var(--cls-muser); } .hof-cls--thief { --c: var(--cls-thief); } .hof-cls--etc { --c: var(--cls-etc); }
.hof-since { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.hof-bar { display: block; height: 4px; margin: 0 5px 5px; border-radius: 0 0 8px 8px; background: rgba(255,255,255,.06); overflow: hidden; }
.hof-bar i { display: block; width: calc(var(--v) * 1%); height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--t) 50%, transparent), var(--t)); }

/* 정상 3인 */
.hof-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; max-width: 1000px; margin: 0 auto; }
.hof-card.is-big .hof-name { font-size: 28px; }
.hof-card.is-big .hof-power { width: 66px; height: 66px; top: -36px; }
.hof-card.is-big .hof-power b { font-size: 26px; }
.hof-card.is-big { box-shadow: inset 0 0 0 4px var(--plate), inset 0 0 0 5px color-mix(in srgb, var(--t) 35%, transparent), 0 30px 60px -30px rgba(var(--hof-gold-rgb),.45); }
.hof-podium__cap { margin: 18px 0 0; text-align: center; }
.hof-laurel { display: inline-flex; align-items: center; gap: 12px; font-family: var(--serif); font-size: 15px; color: var(--gold); letter-spacing: .2em; }
.hof-laurel::before, .hof-laurel::after { content: "❦"; font-size: 18px; opacity: .8; }
.hof-laurel::after { transform: scaleX(-1); }

/* 도구 */
.hof-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 44px 0 16px; padding-top: 24px; border-top: 1px solid rgba(var(--hof-gold-rgb),.14); }
.hof-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.hof-seg button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 9px; background: none; color: var(--muted); font-weight: 700; font-size: 13.5px; cursor: pointer; }
.hof-seg button[aria-pressed="true"] { background: rgba(var(--hof-gold-rgb),.16); color: var(--gold); }
.hof-key { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--muted); font-size: 12.5px; }
.hof-key .k { display: inline-block; width: 10px; height: 10px; margin-left: 8px; border-radius: 50%; }
.hof-key .k.gold { background: var(--gold); } .hof-key .k.silver { background: var(--silver); } .hof-key .k.bronze { background: var(--bronze); }
.hof-wall { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.hof-wall .hof-name { font-size: 19px; }
.hof-wall .hof-power { width: 48px; height: 48px; top: -26px; }
.hof-wall .hof-power b { font-size: 18px; }
.hof-wall .hof-tag { font-size: 12.5px; }

/* ── 공헌자 ── */
.hof-patrons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hof-plaque { position: relative; display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 16px; align-items: center; padding: 12px 18px 12px 12px; border: 1px solid rgba(var(--hof-gold-rgb),.3); border-radius: 14px; background: linear-gradient(135deg, var(--hof-plate-4), var(--hof-plate-edge)); text-align: left; cursor: pointer; transition: border-color .2s, transform .2s; }
.hof-plaque:hover { border-color: var(--gold); transform: translateY(-2px); }
.hof-plaque__img { display: block; aspect-ratio: 226 / 186; overflow: hidden; border-radius: 8px; box-shadow: 0 0 0 2px var(--hof-plate-edge), 0 0 0 3px rgba(var(--hof-gold-rgb),.4); }

.hof-plaque__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hof-plaque__role { font-size: 11.5px; color: var(--gold-d); font-weight: 700; line-height: 1.45; }
.hof-plaque .hof-name { font-size: 20px; }
.hof-plaque .hof-tag { margin: 2px 0; color: var(--hof-cream); font-size: 13px; }

/* ── 연대기 ── */
.hof-tl { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.02); overflow: hidden; }
.hof-tl__col { display: flex; flex-direction: column; gap: 4px; padding: 0 10px 14px; border-right: 1px solid rgba(255,255,255,.07); }
.hof-tl__col:last-child { border-right: 0; }
.hof-tl__col h3 { display: flex; align-items: baseline; justify-content: space-between; margin: 0 -10px 8px; padding: 14px 14px 12px; border-bottom: 2px solid rgba(var(--hof-gold-rgb),.45); background: rgba(var(--hof-gold-rgb),.05); font: 700 18px var(--font-display); letter-spacing: .06em; color: var(--gold); }
.hof-tl__col h3 small { font: 700 12px var(--font); color: var(--muted); }
.hof-tl__col.is-empty h3 { color: var(--muted); font-size: 14px; border-bottom-style: dashed; background: none; }
.hof-tl__none { margin: 8px 4px; color: var(--muted); font-size: 12.5px; }
.hof-tle { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 5px 6px; border: 0; border-radius: 8px; background: none; text-align: left; cursor: pointer; }
.hof-tle:hover { background: rgba(255,255,255,.05); }
.hof-tle__av { display: block; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px rgba(255,255,255,.2); }
.hof-tle.is-patron .hof-tle__av { box-shadow: 0 0 0 2px var(--gold); }
.hof-tle__n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 700; color: var(--text-strong); }
.hof-tle.is-patron .hof-tle__n { color: var(--gold); }
.hof-tle__m { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ── 명판 전문 (모달) ── */
.hof-full { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 26px; }
.hof-full__img img { width: 100%; border-radius: 12px; box-shadow: 0 0 0 3px var(--hof-plate-2), 0 0 0 4px rgba(var(--hof-gold-rgb),.5); display: block; }
.hof-full__power { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; font-family: var(--hof-font); color: var(--hof-gold); }
.hof-full__power b { font-size: 40px; line-height: 1; }
.hof-full__tag { margin: 0 0 12px; font-family: var(--hof-font); font-size: 20px; color: var(--hof-gold); }
.hof-full dl { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 6px 14px; margin: 0 0 16px; font-size: 14px; }
.hof-full dt { color: var(--muted); }
.hof-full dd { margin: 0; color: var(--text); }
.hof-full__desc { margin: 0; padding: 16px 18px; border-left: 3px solid var(--hof-gold-deep); background: rgba(var(--hof-gold-rgb),.06); border-radius: 0 10px 10px 0; font-size: 15px; line-height: 1.9; color: var(--text); }
.hof-full__coda { margin: 12px 0 0; font-family: var(--hof-font); font-style: italic; color: var(--hof-gold-deep); }

@media (max-width: 1180px) { .hof-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } .hof-patrons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1024px) { .hof-podium { grid-template-columns: 1fr; max-width: 420px; gap: 34px; } .hof-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hof-full { grid-template-columns: 1fr; } .hof-tl { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hof-tl__col:nth-child(3) { border-right: 0; } .hof-tl__col:nth-child(-n+3) { border-bottom: 1px solid rgba(255,255,255,.07); } }
@media (max-width: 768px) { .hof-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .hof-patrons { grid-template-columns: 1fr; } .hof-stats { grid-template-columns: repeat(2, 1fr); } .hof-hero__wall { grid-template-columns: repeat(5, 1fr); grid-auto-rows: 25%; } .hof-tools { justify-content: center; } .hof-wall .hof-card__body { padding: 14px 10px 12px; } .hof-plaque { grid-template-columns: 104px minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .hof-card, .hof-card__img .hof-ph, .hof-plaque, .hof-dot { transition: none; } }

@media (max-width: 768px) { .hof-tl { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hof-tl__col { border-right: 1px solid rgba(255,255,255,.07) !important; border-bottom: 1px solid rgba(255,255,255,.07); } .hof-tl__col:nth-child(2n) { border-right: 0 !important; } .hof-hero { padding: 0 14px; } }

/* ── 명예의 전당 연출 (소리 없음) ── */
.hof-stage { position: relative; isolation: isolate; padding-bottom: 8px; }
.hof-stage > .hof-h, .hof-stage > .hof-podium, .hof-stage > .hof-podium__cap { position: relative; z-index: 2; }

/* 레드카펫: 제목 아래에서 시작해 정상 3인 뒤로 넓게 */
.hof-carpet { position: absolute; z-index: 0; left: 50%; top: 150px; bottom: -40px; width: min(1180px, 100%); transform: translateX(-50%);
  background: linear-gradient(90deg, var(--hof-gold-dark), var(--hof-gold) 50%, var(--hof-gold-dark));
  clip-path: polygon(39% 0, 61% 0, 95% 100%, 5% 100%);
  -webkit-mask-image: linear-gradient(transparent, var(--art-bg-deep) 22%, var(--art-bg-deep) 78%, transparent); mask-image: linear-gradient(transparent, var(--art-bg-deep) 22%, var(--art-bg-deep) 78%, transparent); opacity: .9; }
.hof-carpet::before { content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 2px, transparent 2px 7px),
              radial-gradient(ellipse 60% 50% at 50% 55%, rgba(255,120,120,.20), transparent 70%),
              var(--hof-carpet);
  clip-path: polygon(39.8% 0, 60.2% 0, 94% 100%, 6% 100%); }
.hof-carpet::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(var(--scrim-rgb),.55)); }

/* 조명: 양쪽에서 무대로 흔들리는 빛줄기 */
.hof-spot { position: absolute; z-index: 1; top: -120px; width: 46%; height: calc(100% + 120px); pointer-events: none; mix-blend-mode: screen; filter: blur(8px); opacity: .55;
  background: linear-gradient(180deg, rgba(var(--hof-gold-light-rgb),.30), rgba(var(--hof-gold-light-rgb),.06) 70%, transparent);
  clip-path: polygon(47% 0, 53% 0, 100% 100%, 0 100%); transform-origin: 50% 0; }
.hof-spot.is-l { left: 2%; transform: rotate(-24deg); animation: hof-sway-l 9s ease-in-out infinite; }
.hof-spot.is-r { right: 2%; transform: rotate(24deg); animation: hof-sway-r 11s ease-in-out infinite; }
@keyframes hof-sway-l { 50% { transform: rotate(-14deg); } }
@keyframes hof-sway-r { 50% { transform: rotate(14deg); } }

/* 정상 3인: 금테 숨쉬기 + 뒤쪽 후광 */
.hof-podium .hof-card { animation: hof-breathe 4.5s ease-in-out infinite; }
.hof-podium .hof-card:nth-child(2) { animation-delay: -1.5s; }
.hof-podium .hof-card:nth-child(3) { animation-delay: -3s; }
@keyframes hof-breathe { 50% { box-shadow: inset 0 0 0 4px var(--plate), inset 0 0 0 5px color-mix(in srgb, var(--t) 55%, transparent), 0 30px 70px -26px rgba(var(--hof-gold-rgb),.7); } }
.hof-podium__cap .hof-laurel { position: relative; }
.hof-podium__cap .hof-laurel::before, .hof-podium__cap .hof-laurel::after { animation: hof-twinkle 2.4s ease-in-out infinite; }
@keyframes hof-twinkle { 50% { opacity: .35; } }

/* ── 호버: 등급이 높을수록 강하게 (동 < 은 < 금) ── */
.hof-shine { position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; opacity: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(var(--hof-gold-light-rgb),.32) 48%, rgba(255,255,255,.5) 50%, rgba(var(--hof-gold-light-rgb),.32) 52%, transparent 62%) no-repeat;
  background-size: 260% 100%; background-position: 160% 0; }
.hof-plaque { overflow: hidden; }
.hof-card:hover .hof-shine, .hof-card:focus-visible .hof-shine, .hof-plaque:hover .hof-shine, .hof-plaque:focus-visible .hof-shine { animation: hof-sheen .9s ease-out; }
@keyframes hof-sheen { 0% { opacity: 1; background-position: 160% 0; } 100% { opacity: 1; background-position: -60% 0; } }

/* 공통 틀 */
.hof-aura { position: absolute; top: 0; left: 0; right: 0; aspect-ratio: 226 / 186; margin: 5px 5px 0; z-index: 1; pointer-events: none; border-radius: 10px 10px 4px 4px; opacity: 0; transition: opacity .3s; }
.hof-sparks { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.hof-sparks i { position: absolute; width: 14px; height: 14px; opacity: 0; transform: scale(.2) rotate(0);
  background: radial-gradient(circle, var(--text-strong) 0 12%, transparent 13%), conic-gradient(from 45deg, transparent 0 20%, var(--t) 20% 30%, transparent 30% 45%, var(--t) 45% 55%, transparent 55% 70%, var(--t) 70% 80%, transparent 80% 95%, var(--t) 95%);
  -webkit-mask: radial-gradient(circle, var(--art-bg-deep) 0 30%, transparent 62%); mask: radial-gradient(circle, var(--art-bg-deep) 0 30%, transparent 62%); }
.hof-sparks i:nth-child(1) { top: 6%; left: 8%; } .hof-sparks i:nth-child(2) { top: 20%; right: 6%; } .hof-sparks i:nth-child(3) { top: 44%; left: 4%; }
.hof-sparks i:nth-child(4) { top: 52%; right: 10%; } .hof-sparks i:nth-child(5) { bottom: 18%; left: 12%; } .hof-sparks i:nth-child(6) { bottom: 8%; right: 16%; }
@keyframes hof-spark { 0%, 100% { opacity: 0; transform: scale(.2) rotate(0); } 45% { opacity: 1; transform: scale(1.15) rotate(90deg); } }
.hof-power::after { content: ""; position: absolute; inset: 0; border-radius: 50%; }
@keyframes hof-ring { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--t) 75%, transparent); } to { box-shadow: 0 0 0 18px transparent; } }
.hof-power { transition: transform .3s cubic-bezier(.2,.8,.2,1); }

/* 동: 광택 + 은은한 들림 */
.hof-bronze:hover .hof-power { transform: scale(1.05); }

/* 은: + 차가운 빛 테두리, 메달 파동 1번, 반짝임 3개 */
.hof-silver:hover { box-shadow: inset 0 0 0 4px var(--plate), inset 0 0 0 5px rgba(203,210,220,.55), 0 0 0 1px rgba(203,210,220,.35), 0 20px 44px -18px rgba(203,210,220,.55); }
.hof-silver:hover .hof-power { transform: scale(1.1) rotate(-6deg); }
.hof-silver:hover .hof-power::after { animation: hof-ring .8s ease-out; }
.hof-silver .hof-aura { background: linear-gradient(180deg, rgba(203,210,220,.22), transparent 60%); }
.hof-silver:hover .hof-aura { opacity: 1; }
.hof-silver:hover .hof-sparks i:nth-child(-n+3) { animation: hof-spark 1.3s ease-in-out infinite; }
.hof-silver:hover .hof-sparks i:nth-child(2) { animation-delay: .35s; } .hof-silver:hover .hof-sparks i:nth-child(3) { animation-delay: .7s; }

/* 금: + 금빛 후광 파동, 회전하는 빛살, 이름 금빛 흐름, 반짝임 6개, 메달 연속 파동 */
.hof-gold:hover { transform: translateY(-6px) scale(1.015); border-color: var(--gold); animation: hof-glow 1.6s ease-in-out infinite; }
@keyframes hof-glow { 0%, 100% { box-shadow: inset 0 0 0 4px var(--plate), inset 0 0 0 5px rgba(var(--hof-gold-rgb),.7), 0 0 0 1px rgba(var(--hof-gold-rgb),.5), 0 24px 60px -18px rgba(var(--hof-gold-rgb),.65); }
  50% { box-shadow: inset 0 0 0 4px var(--plate), inset 0 0 0 5px rgba(var(--hof-gold-light-rgb),.95), 0 0 0 2px rgba(var(--hof-gold-rgb),.8), 0 30px 80px -14px rgba(var(--hof-gold-rgb),.9); } }
.hof-gold .hof-aura { overflow: hidden; background: radial-gradient(circle at 50% 110%, rgba(255,214,120,.45), transparent 65%); mix-blend-mode: screen; }
.hof-gold .hof-aura::before { content: ""; position: absolute; left: 50%; top: 100%; width: 260%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(255,236,170,.35) 0 6deg, transparent 6deg 18deg); -webkit-mask: radial-gradient(circle, var(--art-bg-deep) 10%, transparent 55%); mask: radial-gradient(circle, var(--art-bg-deep) 10%, transparent 55%); }
.hof-gold:hover .hof-aura { opacity: 1; }
.hof-gold:hover .hof-aura::before { animation: hof-rays 6s linear infinite; }
@keyframes hof-rays { to { transform: translate(-50%, -50%) rotate(360deg); } }
.hof-gold:hover .hof-card__img .hof-ph { transform: scale(1.06); filter: saturate(1.15) brightness(1.08); }
.hof-gold:hover .hof-power { transform: scale(1.16) rotate(-8deg); }
.hof-gold:hover .hof-power::after { animation: hof-ring 1s ease-out infinite; }
.hof-gold:hover .hof-name { background: linear-gradient(90deg, var(--text-strong) 0%, var(--hof-gold-light) 30%, var(--hof-gold) 50%, var(--hof-gold-light) 70%, var(--text-strong) 100%) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: hof-namegleam 1.8s linear infinite; }
@keyframes hof-namegleam { to { background-position: -200% 0; } }
.hof-gold:hover .hof-sparks i { animation: hof-spark 1.2s ease-in-out infinite; }
.hof-gold:hover .hof-sparks i:nth-child(2) { animation-delay: .2s; } .hof-gold:hover .hof-sparks i:nth-child(3) { animation-delay: .4s; }
.hof-gold:hover .hof-sparks i:nth-child(4) { animation-delay: .6s; } .hof-gold:hover .hof-sparks i:nth-child(5) { animation-delay: .8s; } .hof-gold:hover .hof-sparks i:nth-child(6) { animation-delay: 1s; }
.hof-gold:hover .hof-bar i { animation: hof-barflow 1.4s linear infinite; background: linear-gradient(90deg, var(--hof-gold-dark), var(--hof-gold-light) 50%, var(--hof-gold-dark)) 0 0 / 200% 100%; }
@keyframes hof-barflow { to { background-position: -200% 0; } }
/* 정상 3인은 숨쉬기 대신 호버 금빛 파동이 이어지도록 */
.hof-podium .hof-card.hof-gold:hover { animation: hof-glow 1.6s ease-in-out infinite; }

@media (hover: none) { .hof-card:active .hof-shine { animation: hof-sheen .9s ease-out; } }
@media (max-width: 1024px) { .hof-carpet { top: 130px; clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); } .hof-carpet::before { clip-path: polygon(31% 0, 69% 0, 99% 100%, 1% 100%); } .hof-spot { width: 70%; opacity: .4; } .hof-stage { overflow-x: clip; } /* 비스듬한 빛줄기가 좁은 화면 밖으로 삐져나가 가로 스크롤이 생기지 않게 */ }
@media (prefers-reduced-motion: reduce) {
  .hof-spot, .hof-podium .hof-card, .hof-podium__cap .hof-laurel::before, .hof-podium__cap .hof-laurel::after,
  .hof-card:hover, .hof-card:hover *, .hof-card:hover *::before, .hof-card:hover *::after, .hof-plaque:hover .hof-shine { animation: none !important; }
  .hof-card:hover { transform: none; } .hof-card:hover .hof-power { transform: none; }
}

/* ── 마일스톤: 주행계 숫자 ── */
.hof-stats .hof-odo span { font-size: inherit; color: inherit; }
.hof-odo { display: flex !important; justify-content: center; line-height: 1; height: 1.1em; overflow: hidden; vertical-align: bottom; }
.hof-odo__col { display: inline-block; height: 1.1em; overflow: hidden; }
.hof-odo__strip { display: flex; flex-direction: column; transform: translateY(0); }
.hof-odo__strip > span { display: block; height: 1.1em; line-height: 1.1em; text-align: center; }
.hof-stats.is-run .hof-odo__strip { transform: translateY(calc(var(--to) * -1.1em)); transition: transform 2.2s cubic-bezier(.2,.75,.2,1); }
.hof-stats.is-run .hof-odo__col:nth-child(1) .hof-odo__strip { transition-duration: 1.5s; }
.hof-stats.is-run .hof-odo__col:nth-child(2) .hof-odo__strip { transition-duration: 1.8s; }
.hof-stats.is-run .hof-odo__col:nth-child(3) .hof-odo__strip { transition-duration: 2s; }
/* 굴러가는 동안 위아래를 흐리게 → 아래에서 올라오는 느낌 */
.hof-odo__col { -webkit-mask: linear-gradient(transparent, var(--art-bg-deep) 22%, var(--art-bg-deep) 78%, transparent); mask: linear-gradient(transparent, var(--art-bg-deep) 22%, var(--art-bg-deep) 78%, transparent); }
.hof-stats.is-done .hof-odo__col { -webkit-mask: none; mask: none; }
.hof-stats { cursor: default; }
.hof-stats > div { position: relative; overflow: hidden; }
.hof-stats > div::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: linear-gradient(90deg, transparent, var(--gold)); }
.hof-stats.is-run > div::after { width: 100%; transition: width 1.8s cubic-bezier(.15,.85,.25,1); }
.hof-stats.is-done > div { animation: hof-tile-flash .9s ease-out; }
.hof-stats.is-done > div:nth-child(2) { animation-delay: .08s; } .hof-stats.is-done > div:nth-child(3) { animation-delay: .16s; } .hof-stats.is-done > div:nth-child(4) { animation-delay: .24s; }
@keyframes hof-tile-flash { 0% { background: rgba(var(--scrim-rgb),.85); } 30% { background: rgba(var(--hof-gold-rgb),.18); } 100% { background: rgba(var(--scrim-rgb),.85); } }
.hof-stats.is-done b { animation: hof-num-pop .6s cubic-bezier(.2,1.6,.4,1); }
@keyframes hof-num-pop { 40% { transform: scale(1.15); text-shadow: 0 0 18px rgba(255,236,170,.8); } }

/* ── 마일스톤: 연대기 채우기 ── */
.hof-tl__total { display: grid; grid-template-columns: auto auto auto; justify-content: center; align-items: baseline; gap: 8px; max-width: 420px; margin: -8px auto 22px; color: var(--muted); font-size: 14px; }
.hof-tl__total b { min-width: 2ch; font-family: var(--serif); font-size: 40px; line-height: 1; color: var(--gold); text-align: right; font-variant-numeric: tabular-nums; }
.hof-tl__total i { grid-column: 1 / -1; height: 6px; border-radius: 99px; background: rgba(255,255,255,.06); overflow: hidden; }
.hof-tl__total em { display: block; height: 100%; width: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--hof-gold-dark), var(--gold), var(--hof-gold-light)); transition: width .25s ease-out; }
.hof-tl__total.is-tick b { animation: hof-tick .25s ease-out; }
@keyframes hof-tick { 40% { transform: translateY(-3px); color: var(--hof-gold-light); } }
.hof-tl__total.is-done b { animation: hof-num-pop .7s cubic-bezier(.2,1.6,.4,1); }
.hof-tl__total.is-done em { box-shadow: 0 0 14px rgba(255,236,170,.8); }
.hof-tl__col h3 { position: relative; border-bottom-color: rgba(var(--hof-gold-rgb),.18) !important; }
.hof-tl__col h3::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 100%; background: var(--gold); }
.hof-tl.is-pending .hof-tl__col h3::after { width: 0; transition: width .5s ease-out; }
.hof-tl.is-pending .hof-tl__col.is-on h3::after { width: 100%; }
.hof-tl.is-pending .hof-tl__col.is-empty h3::after { background: repeating-linear-gradient(90deg, var(--muted) 0 6px, transparent 6px 10px); }
.hof-tl.is-pending .hof-tle { opacity: 0; transform: translateY(10px); transition: opacity .35s ease-out, transform .35s ease-out; }
.hof-tl.is-pending .hof-tle.is-in { opacity: 1; transform: none; }
.hof-tl.is-pending .hof-tle.is-in .hof-tle__av { animation: hof-av-in .5s ease-out; }
@keyframes hof-av-in { 0% { box-shadow: 0 0 0 0 rgba(var(--hof-gold-rgb),.9); } 100% { box-shadow: 0 0 0 10px transparent; } }
.hof-tl.is-pending .hof-tl__none { opacity: 0; transition: opacity .4s; }
.hof-tl.is-pending .is-on .hof-tl__none { opacity: 1; }

/* 숫자 굴리기 (연대기 누적 · 해마다 수) */
.hof-roll { display: inline-flex; justify-content: flex-end; vertical-align: bottom; }
.hof-roll__d { position: relative; display: inline-block; width: .56em; height: 1.05em; line-height: 1.05em; overflow: hidden; text-align: center; }
.hof-roll__d > span { position: absolute; left: 0; right: 0; top: 0; }
.hof-roll__d > .is-new { animation: hof-up-in .38s cubic-bezier(.2,.9,.3,1.2) both; }
.hof-roll__d > .is-out { animation: hof-up-out .38s ease-in both; }
@keyframes hof-up-in { from { transform: translateY(100%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes hof-up-out { from { transform: none; opacity: 1; } to { transform: translateY(-100%); opacity: 0; } }
.hof-tl__col h3 small.hof-roll { font-size: 12px; }

/* 명판 사진 (img/hof/hNN, 번호 = hof-data 의 키) */
.hof-p-1 { background-image: url(/img/hof/h01.jpg); }
.hof-p-2 { background-image: url(/img/hof/h02.jpg); }
.hof-p-3 { background-image: url(/img/hof/h03.jpg); }
.hof-p-4 { background-image: url(/img/hof/h04.jpg); }
.hof-p-5 { background-image: url(/img/hof/h05.jpg); }
.hof-p-6 { background-image: url(/img/hof/h06.jpg); }
.hof-p-7 { background-image: url(/img/hof/h07.jpg); }
.hof-p-8 { background-image: url(/img/hof/h08.jpg); }
.hof-p-9 { background-image: url(/img/hof/h09.png); }
.hof-p-10 { background-image: url(/img/hof/h10.png); }
.hof-p-11 { background-image: url(/img/hof/h11.jpg); }
.hof-p-12 { background-image: url(/img/hof/h12.jpg); }
.hof-p-13 { background-image: url(/img/hof/h13.jpg); }
.hof-p-14 { background-image: url(/img/hof/h14.jpg); }
.hof-p-15 { background-image: url(/img/hof/h15.png); }
.hof-p-16 { background-image: url(/img/hof/h16.jpg); }
.hof-p-17 { background-image: url(/img/hof/h17.jpg); }
.hof-p-18 { background-image: url(/img/hof/h18.png); }
.hof-p-19 { background-image: url(/img/hof/h19.jpg); }