/*
Theme Name: Blocksy Child (daehak)
Theme URI: https://daehak.theonzu.com/
Description: daehak.theonzu.com 전용 자식 테마. 세로 영상 임베드와 랭킹 표 서식을 담는다.
Author: TheOnZu
Template: blocksy
Version: 1.2.0
Text Domain: blocksy-child
*/

/* ============================================================
   팔레트
   ============================================================ */
:root{
  --dh-ink:#12172a;
  --dh-ink2:#3d4560;
  --dh-mute:#767f99;
  --dh-line:#e3e7f0;
  --dh-soft:#f4f6fb;
  --dh-card:#ffffff;
  --dh-accent:#2b4c9b;
  --dh-accent2:#5a7fd6;
  --dh-gold:#b8860b;
  --dh-good:#1c7a52;
}

/* ============================================================
   본문 제목 — 왼쪽에 짧은 세로 바
   ============================================================ */
.entry-content h2{
  display:flex;
  align-items:center;
  gap:.55rem;
  margin-top:2.6rem;
  letter-spacing:-.01em;
}
.entry-content h2::before{
  content:"";
  flex:0 0 4px;
  align-self:stretch;
  min-height:1.1em;
  background:var(--dh-accent);
  border-radius:2px;
}

/* ============================================================
   히어로 — 글 첫머리 요약 배너
   ============================================================ */
.dh-hero{
  position:relative;
  overflow:hidden;
  border-radius:20px;
  padding:36px 38px 32px;
  margin:0 0 2rem;
  color:#fff;
  background:#1d2f5e;
  box-shadow:0 18px 40px -22px rgba(29,47,94,.75);
}
.dh-hero__bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
}
.dh-hero__veil{
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(29,47,94,.94) 0%,rgba(43,76,155,.86) 55%,rgba(63,104,189,.76) 100%);
}
.dh-hero__inner{ position:relative; z-index:2; }
.dh-hero__eyebrow{
  font-size:12px;
  letter-spacing:.2em;
  font-weight:700;
  opacity:.78;
}
.dh-hero__lead{
  margin:.7rem 0 0;
  font-size:1.06rem;
  line-height:1.62;
  opacity:.95;
  color:#fff;
}
.dh-hero__lead strong{ color:#fff; }
.dh-hero__chips{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:1.15rem;
}
.dh-chip{
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  padding:5px 13px;
  font-size:12.5px;
  font-weight:600;
}

/* ============================================================
   KPI 카드
   ============================================================ */
.dh-kpis{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:12px;
  margin:-2.6rem 0 2rem;
  position:relative;
  z-index:3;
  padding:0 12px;
}
.dh-kpi{
  background:var(--dh-card);
  border:1px solid var(--dh-line);
  border-radius:14px;
  padding:16px 16px 14px;
  box-shadow:0 8px 24px -16px rgba(18,23,42,.45);
}
.dh-kpi__lab{
  font-size:11.5px;
  color:var(--dh-mute);
  font-weight:700;
  letter-spacing:.02em;
}
.dh-kpi__val{
  font-size:26px;
  font-weight:800;
  letter-spacing:-.03em;
  margin-top:3px;
  color:var(--dh-accent);
  font-variant-numeric:tabular-nums;
  line-height:1.15;
}
.dh-kpi__val small{ font-size:14px; font-weight:700; color:var(--dh-mute); }
.dh-kpi__sub{ font-size:11.5px; color:var(--dh-mute); margin-top:2px; }

/* ============================================================
   사진
   ============================================================ */
.dh-figure{ margin:1.9rem 0; }
.dh-figure img{
  width:100%;
  height:auto;
  display:block;
  border-radius:14px;
  border:1px solid var(--dh-line);
}
.dh-figure figcaption{
  margin-top:.55rem;
  font-size:.85rem;
  color:var(--dh-mute);
  text-align:center;
}

/* ============================================================
   세로 영상(쇼츠·릴스) 임베드
   ============================================================ */
.dh-shorts{ max-width:380px; margin:2rem auto; }
.dh-shorts__frame{
  position:relative;
  width:100%;
  padding-top:177.78%;
  border-radius:14px;
  overflow:hidden;
  background:#000;
  box-shadow:0 6px 24px rgba(0,0,0,.18);
}
.dh-shorts__frame iframe,
.dh-shorts__frame video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
.dh-shorts__caption{
  margin-top:.6rem;
  font-size:.9rem;
  line-height:1.5;
  text-align:center;
  opacity:.75;
}
.dh-shorts__facade{
  position:absolute;
  inset:0;
  cursor:pointer;
  background-size:cover;
  background-position:center;
}
.dh-shorts__facade::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:64px;
  height:64px;
  border-radius:50%;
  background:rgba(0,0,0,.55);
  transition:background-color .2s ease;
}
.dh-shorts__facade::before{
  content:"";
  position:absolute;
  top:50%;
  left:calc(50% + 3px);
  transform:translate(-50%,-50%);
  z-index:2;
  border-style:solid;
  border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent #fff;
}
.dh-shorts__facade:hover::after{ background:rgba(0,0,0,.75); }

/* ============================================================
   랭킹 표
   ============================================================ */
.dh-rank{
  margin:1.6rem 0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--dh-line);
  border-radius:14px;
  background:var(--dh-card);
}
.dh-rank table{
  width:100%;
  min-width:540px;
  border-collapse:collapse;
  font-size:.93rem;
}
.dh-rank th{
  background:var(--dh-soft);
  color:var(--dh-ink2);
  font-weight:700;
  font-size:.79rem;
  letter-spacing:.01em;
  text-align:left;
  padding:11px 14px;
  border-bottom:1px solid var(--dh-line);
  white-space:nowrap;
}
.dh-rank td{
  padding:10px 14px;
  border-bottom:1px solid #f0f2f8;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.dh-rank tbody tr:last-child td{ border-bottom:0; }
.dh-rank tbody tr:hover{ background:#fafbfe; }
.dh-rank td.num,
.dh-rank th.num{ text-align:right; }
.dh-rank .rank-1 td,
.dh-rank .rank-2 td,
.dh-rank .rank-3 td{ font-weight:700; }
.dh-rank .rank-badge{
  display:inline-block;
  min-width:1.9em;
  padding:.12em .45em;
  border-radius:6px;
  text-align:center;
  font-weight:700;
  font-size:.82em;
  background:var(--dh-soft);
  color:var(--dh-ink2);
}
.dh-rank .rank-1 .rank-badge{ background:#d4af37; color:#fff; }
.dh-rank .rank-2 .rank-badge{ background:#a8b3bd; color:#fff; }
.dh-rank .rank-3 .rank-badge{ background:#c98a5e; color:#fff; }

/* 표 안의 가로 막대 */
.dh-rank td.bar{
  position:relative;
  min-width:190px;
  padding-right:3.6rem;
}
.dh-rank td.bar .fill{
  position:absolute;
  left:.35rem;
  top:50%;
  transform:translateY(-50%);
  height:1.3rem;
  min-width:3px;
  border-radius:4px;
  opacity:.85;
}
.dh-rank td.bar .val{
  position:absolute;
  right:.75rem;
  top:50%;
  transform:translateY(-50%);
  font-variant-numeric:tabular-nums;
  font-weight:700;
  font-size:.92em;
}

/* 권역 점 */
.dh-zone{
  display:inline-block;
  width:.62em;
  height:.62em;
  border-radius:50%;
  margin-right:.4em;
  vertical-align:-1px;
}

/* ============================================================
   상위 3위 카드
   ============================================================ */
.dh-podium{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:.9rem;
  margin:1.8rem 0;
}
.dh-podium__item{
  background:var(--dh-card);
  padding:1.1rem 1rem 1rem;
  border-radius:14px;
  border:1px solid var(--dh-line);
  box-shadow:0 6px 20px -18px rgba(18,23,42,.5);
  text-align:center;
}
.dh-podium__rank{
  display:inline-block;
  padding:.14em .62em;
  border-radius:999px;
  font-size:.78rem;
  font-weight:700;
  color:#fff;
}
.dh-podium__univ{
  margin:.55rem 0 .1rem;
  font-size:1.2rem;
  font-weight:800;
  letter-spacing:-.01em;
  line-height:1.3;
  color:var(--dh-ink);
}
.dh-podium__region{ font-size:.82rem; color:var(--dh-mute); }
.dh-podium__num{
  margin-top:.6rem;
  font-size:2.15rem;
  font-weight:800;
  line-height:1;
  letter-spacing:-.035em;
  color:var(--dh-accent);
  font-variant-numeric:tabular-nums;
}
.dh-podium__num span{ font-size:.46em; font-weight:700; color:var(--dh-mute); }
.dh-podium__unit{ font-size:.83rem; color:var(--dh-mute); margin-top:.3rem; }

/* ============================================================
   권역 분포 막대
   ============================================================ */
.dh-zones{
  margin:1.5rem 0;
  padding:18px 20px;
  background:var(--dh-card);
  border:1px solid var(--dh-line);
  border-radius:14px;
}
.dh-zones__row{
  display:flex;
  align-items:center;
  gap:.7rem;
  margin-bottom:.45rem;
  font-size:.9rem;
}
.dh-zones__row:last-child{ margin-bottom:0; }
.dh-zones__name{ flex:0 0 5.4em; color:var(--dh-ink2); font-weight:600; }
/* span 은 인라인이라 display 를 주지 않으면 width·height 가 통째로 무시된다 */
.dh-zones__track{
  display:block;
  flex:1;
  height:.95rem;
  background:#eef1f7;
  border-radius:99px;
  overflow:hidden;
}
.dh-zones__fill{
  display:block;
  height:100%;
  min-width:4px;
  border-radius:99px;
}
.dh-zones__num{
  flex:0 0 2.8em;
  text-align:right;
  font-variant-numeric:tabular-nums;
  font-weight:700;
  color:var(--dh-ink2);
}

/* 범례 */
.dh-legend{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem 1.1rem;
  margin:.9rem 0 1.2rem;
  font-size:.84rem;
  color:var(--dh-ink2);
}

/* ============================================================
   각주 · 강조 박스
   ============================================================ */
.dh-note{
  margin:1.2rem 0 1.7rem;
  padding:14px 18px;
  background:var(--dh-card);
  border:1px solid var(--dh-line);
  border-left:4px solid var(--dh-gold);
  border-radius:10px;
  font-size:.9rem;
  line-height:1.68;
  color:var(--dh-ink2);
}
.dh-note b,
.dh-note strong{ color:var(--dh-ink); }

.dh-key{
  margin:1.6rem 0;
  padding:20px 22px;
  border-radius:14px;
  background:linear-gradient(135deg,#f6f8fc,#eef2fa);
  border:1px solid var(--dh-line);
  border-left:4px solid var(--dh-accent);
  font-size:1rem;
  line-height:1.7;
  color:var(--dh-ink2);
}
.dh-key strong{ color:var(--dh-accent); }

/* ============================================================
   푸터 링크
   ============================================================ */
.dh-footer-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.4rem 1.6rem;
  padding:1.4rem 1rem .2rem;
  font-size:.9rem;
}
.dh-footer-links a{ text-decoration:none; opacity:.8; }
.dh-footer-links a:hover{ opacity:1; text-decoration:underline; }

/* ============================================================
   좁은 화면
   ============================================================ */
@media (max-width:600px){
  .dh-hero{ padding:26px 22px 24px; border-radius:16px; }
  .dh-hero__lead{ font-size:.98rem; }
  .dh-kpis{ grid-template-columns:repeat(2,1fr); margin-top:-2rem; }
  .dh-kpi__val{ font-size:22px; }
  .dh-shorts{ max-width:320px; }
  .dh-rank table{ font-size:.86rem; }
  .dh-rank td.bar{ min-width:150px; padding-right:3rem; }
  .dh-podium__num{ font-size:1.85rem; }
}