/* ============================================================================
   honor-stadium.css — 명예의 전당 "조선 어영청" 테마 (한글판, honor-pro.css 뒤)
   자체 완결(다크 라커) 섹션 → 사이트 라이트/다크 어느 쪽이든 동일하게 격조 유지.
   한자 미사용. 일월오봉도·단청·현판·어보·월대·직첩(호위대) 편제.
   ============================================================================ */

.gj{
  --ink:#17100A; --wood:#3E2A1C; --wood2:#4E3624; --lacquer:#241610;
  --cheong:#2E8B78; --cheong-d:#1C5D50; --gung:#2B5A86;
  --hong:#B4362E; --gold:#E3B24A; --gold-hi:#F5DA8C; --gold-d:#8A6620;
  --baek:#F3ECDB; --paper:#E9DEC4; --muted:#B49B76;
  --myeong:"Nanum Myeongjo","Batang","Georgia",serif;
  --sans:"Malgun Gothic","Segoe UI",system-ui,sans-serif;
  font-family:var(--sans); color:var(--paper);
  background:
    radial-gradient(60% 30% at 50% 5%, rgba(227,178,74,.15), transparent 62%),
    linear-gradient(180deg,#1A1109 0%, #20150C 46%, #150E07 100%);
  border-radius:18px; overflow:hidden; padding-bottom:clamp(28px,4vw,48px);
  margin:20px auto 0; max-width:900px;
}
.gj *{box-sizing:border-box}

.gj .eave{ display:block; width:100%; height:auto;}
.gj .beam{ height:10px; background:repeating-linear-gradient(90deg,var(--wood) 0 26px,var(--wood2) 26px 52px); border-top:2px solid var(--gold-d); border-bottom:2px solid var(--gold-d);}

.gj .hyeon{ position:relative; margin:clamp(18px,3vw,30px) auto 0; width:max-content; max-width:88%;
  background:linear-gradient(180deg,#211008,#160B05); border:2px solid var(--gold);
  box-shadow:0 0 0 4px var(--lacquer),0 10px 26px rgba(0,0,0,.5),inset 0 1px 0 rgba(245,218,140,.2); border-radius:8px; padding:14px clamp(26px,6vw,64px); text-align:center;}
.gj .hyeon .t{ font-family:var(--myeong); font-weight:700; color:var(--gold-hi); font-size:clamp(24px,5.4vw,40px); letter-spacing:.24em; text-shadow:0 2px 0 rgba(0,0,0,.55); margin:0;}
.gj .hyeon .sub{ margin-top:8px; color:var(--muted); letter-spacing:.34em; font-size:10.5px;}
.gj .hyeon .stud{ position:absolute; width:6px; height:6px; border-radius:50%; background:var(--gold); opacity:.85;}
.gj .hyeon .s1{left:8px;top:8px}.gj .hyeon .s2{right:8px;top:8px}.gj .hyeon .s3{left:8px;bottom:8px}.gj .hyeon .s4{right:8px;bottom:8px}

.gj .throne{ position:relative; padding:clamp(26px,4vw,44px) clamp(14px,3vw,30px) 0;}
.gj .champ{ position:relative; text-align:center; max-width:600px; margin:0 auto;}
.gj .embers{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:1;}
.gj .embers i{ position:absolute; bottom:-8px; width:4px; height:4px; border-radius:50%; background:radial-gradient(circle,var(--gold-hi),var(--gold-d)); box-shadow:0 0 6px rgba(245,218,140,.7); opacity:0; animation:gj-ember linear infinite;}
@keyframes gj-ember{0%{transform:translateY(0);opacity:0}15%{opacity:.85}100%{transform:translateY(-260px);opacity:0}}
.gj .screen{ display:block; width:min(500px,100%); margin:0 auto; border-radius:6px; box-shadow:0 12px 30px rgba(0,0,0,.5); position:relative; z-index:1;}
.gj .cwrap{ position:relative; margin-top:-50px; z-index:3;}
.gj .seal{ position:absolute; right:clamp(2px,5vw,44px); top:-4px; width:70px; height:70px; border-radius:8px; z-index:4;
  border:3px solid var(--hong); color:var(--hong); font-family:var(--myeong); font-weight:700; font-size:24px; line-height:1;
  display:flex; align-items:center; justify-content:center; flex-direction:column; letter-spacing:.06em;
  background:rgba(180,54,46,.06); box-shadow:inset 0 0 0 1.5px var(--hong); transform:rotate(-10deg); animation:gj-stamp .5s cubic-bezier(.2,1.4,.5,1) both; animation-delay:.9s;}
@keyframes gj-stamp{0%{opacity:0;transform:rotate(-24deg) scale(2.6)}70%{opacity:.95;transform:rotate(-7deg) scale(.92)}100%{opacity:.9;transform:rotate(-10deg) scale(1)}}
.gj .emblem{ position:relative; width:100px; height:100px; margin:0 auto 2px;}
.gj .emblem svg{width:100%;height:100%;display:block}
.gj .emblem .num{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--myeong); font-size:36px; color:#3E2D08; font-weight:700;}
.gj .role{ color:var(--gold-hi); letter-spacing:.2em; font-size:12px; font-weight:700; font-family:var(--myeong);}
.gj .cname{ font-family:var(--myeong); color:var(--baek); font-weight:700; font-size:clamp(28px,6vw,46px); letter-spacing:.02em; margin:8px 0 2px; line-height:1.06;}
.gj .punch{ font-family:var(--myeong); font-style:italic; color:var(--gold-hi); font-size:clamp(13px,2.7vw,16px); margin-top:2px;}
.gj .cdist{ font-family:var(--myeong); font-weight:700; line-height:1; font-size:clamp(54px,12vw,92px); letter-spacing:-.01em; margin:10px 0 0; font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 55%,var(--gold-d)); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--gold);}
.gj .cdist .u{ font-family:var(--sans); font-size:.27em; -webkit-text-fill-color:var(--gold); color:var(--gold); letter-spacing:.05em; vertical-align:.42em; margin-left:.16em;}
.gj .woldae{ display:block; width:min(430px,92%); margin:12px auto 0;}
.gj .plate{ margin:16px auto 0; max-width:460px; display:flex; justify-content:center; gap:24px; flex-wrap:wrap;
  background:linear-gradient(180deg,#2A1A10,#1D1109); border:1px solid rgba(227,178,74,.3); border-radius:6px; padding:12px 20px; box-shadow:inset 0 1px 0 rgba(245,218,140,.14);}
.gj .plate .k{ color:var(--muted); font-size:10.5px; letter-spacing:.14em; text-align:center;}
.gj .plate .v{ color:var(--gold-hi); font-family:var(--myeong); font-size:16px; margin-top:3px; text-align:center; font-variant-numeric:tabular-nums;}

.gj .stelae{ display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:clamp(30px,5vw,46px) clamp(14px,3vw,30px) 0; max-width:760px; margin:0 auto;}
@media(max-width:520px){ .gj .stelae{grid-template-columns:1fr} }
.gj .stele{ position:relative; display:flex; align-items:center; gap:14px; padding:18px 20px;
  background:linear-gradient(180deg,#2C2116,#20160D); border:1px solid rgba(227,178,74,.16); border-radius:12px; box-shadow:inset 0 1px 0 rgba(245,218,140,.08);}
.gj .stele::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; border-radius:12px 0 0 12px;}
.gj .stele.two::before{ background:linear-gradient(180deg,#eef2f6,#9aa4b3);}
.gj .stele.three::before{ background:linear-gradient(180deg,#ffd9b0,#a5642f);}
.gj .badge{ flex:0 0 auto; width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--myeong); font-size:24px; font-weight:700; color:#241a12; box-shadow:inset 0 2px 3px rgba(255,255,255,.5),inset 0 -5px 8px rgba(0,0,0,.28);}
.gj .stele.two .badge{ background:radial-gradient(circle at 34% 28%,#fff,#c6cdd8 50%,#8a94a3);}
.gj .stele.three .badge{ background:radial-gradient(circle at 34% 28%,#ffd9b0,#c4894f 50%,#8c5729);}
.gj .stele .who{flex:1; min-width:0;}
.gj .stele .rank-t{ color:var(--gold-hi); font-family:var(--myeong); font-size:12.5px; font-weight:700; letter-spacing:.06em;}
.gj .stele .sn{ color:var(--baek); font-family:var(--myeong); font-weight:700; font-size:19px; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.gj .stele .sg{ color:var(--muted); font-size:11.5px; margin-top:3px;}
.gj .stele .sd{ font-family:var(--myeong); color:var(--paper); font-size:22px; font-weight:700; text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;}
.gj .stele .sd small{ font-family:var(--sans); font-size:11.5px; color:var(--muted); margin-left:3px; font-weight:400;}

.gj .corps{ padding:clamp(30px,5vw,46px) clamp(14px,3vw,30px) 0; max-width:760px; margin:0 auto;}
.gj .corps h3{ font-family:var(--myeong); color:var(--baek); font-size:19px; letter-spacing:.26em; font-weight:700; text-align:center; margin:0;}
.gj .corps .cc-sub{ text-align:center; color:var(--muted); letter-spacing:.2em; font-size:10.5px; margin:6px 0 16px;}
.gj .grid6{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
@media(max-width:560px){ .gj .grid6{grid-template-columns:1fr 1fr} }
@media(max-width:380px){ .gj .grid6{grid-template-columns:1fr} }
.gj .tier{ background:linear-gradient(180deg,#241A11,#1A120B); border:1px solid rgba(227,178,74,.16); border-radius:10px; padding:13px 14px; position:relative;}
.gj .tier .tt{ font-family:var(--myeong); color:var(--gold-hi); font-size:15px; font-weight:700;}
.gj .tier .tr{ color:var(--muted); font-size:11px; margin:2px 0 8px; letter-spacing:.04em;}
.gj .tier .tg{ color:var(--paper); font-size:12.5px; line-height:1.5;}
.gj .tier .rib{ position:absolute; right:12px; top:14px; width:9px; height:9px; border-radius:2px; transform:rotate(45deg);}

.gj .roll{ padding:clamp(28px,5vw,44px) clamp(14px,3vw,30px) 0; max-width:760px; margin:0 auto;}
.gj .roll h3{ font-family:var(--myeong); color:var(--baek); font-size:20px; letter-spacing:.3em; font-weight:700; text-align:center; margin:0;}
.gj .roll .rs{ text-align:center; color:var(--muted); letter-spacing:.22em; font-size:10.5px; margin:6px 0 14px;}
.gj .tablet{ background:linear-gradient(180deg,#241A11,#1A120B); border:1px solid rgba(227,178,74,.16); border-radius:12px; padding:2px clamp(14px,2.5vw,26px); box-shadow:inset 0 1px 0 rgba(245,218,140,.07);}
.gj table.rt2{ width:100%; border-collapse:collapse;}
.gj .rt2 tr{ border-bottom:1px solid rgba(227,178,74,.10);} .gj .rt2 tr:last-child{border-bottom:none;}
.gj .rt2 td{ padding:12px 6px; vertical-align:middle;}
.gj .rt2 tr.band td{ padding:18px 4px 8px;}
.gj .band-in{ display:flex; align-items:center; gap:12px;}
.gj .band-in .l{ flex:1; height:1px; background:linear-gradient(90deg,transparent,rgba(227,178,74,.4),transparent);}
.gj .band-in .b{ font-family:var(--myeong); color:var(--gold-hi); font-size:13.5px; font-weight:700; white-space:nowrap; text-align:center;}
.gj .band-in .b small{ display:block; font-family:var(--sans); color:var(--muted); font-size:10.5px; font-weight:400; margin-top:2px; letter-spacing:.02em;}
.gj .rt2 .rk{ width:44px; text-align:center; font-family:var(--myeong); font-size:18px; color:var(--gold); font-variant-numeric:tabular-nums;}
.gj .rt2 .nm{ color:var(--baek); font-family:var(--myeong); font-size:15.5px;}
.gj .rt2 .nm small{ display:block; font-family:var(--sans); color:var(--muted); font-size:11px; margin-top:2px;}
.gj .rt2 .meter{ width:26%;}
.gj .rt2 .bar{ height:4px; border-radius:999px; background:rgba(243,236,219,.10); overflow:hidden;}
.gj .rt2 .bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--cheong-d),var(--gold)); transition:width .9s cubic-bezier(.3,.9,.3,1);}
.gj .rt2 .vl{ text-align:right; font-family:var(--myeong); font-size:16px; color:var(--paper); font-variant-numeric:tabular-nums; white-space:nowrap;}
.gj .rt2 .vl small{ font-family:var(--sans); font-size:11px; color:var(--muted); margin-left:3px;}
.gj .rt2 tr.me{ background:rgba(227,178,74,.10);}
.gj .rt2 tr.me .nm{ color:var(--gold-hi);}
@media(max-width:520px){ .gj .rt2 .meter{display:none} }

.gj .hall-foot{ text-align:center; padding:clamp(24px,4vw,36px) 20px 0; }
.gj .hall-foot a{ display:inline-block; margin:0 6px; color:var(--gold-hi); font-size:13px; text-decoration:none; border-bottom:1px solid rgba(227,178,74,.4); padding-bottom:2px;}
.gj .hall-foot .note{ color:var(--muted); font-size:11.5px; margin-top:14px; line-height:1.6;}

@keyframes gj-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.gj .anim{opacity:0;animation:gj-rise .7s cubic-bezier(.2,.7,.2,1) forwards;}
@media(prefers-reduced-motion:reduce){ .gj .anim{opacity:1;animation:none} .gj .embers i{animation:none} .gj .seal{animation:none;opacity:.9} }