/* 기본·심화는 모든 화면에서 세로로 쌓고 기존 모드 카드 재질을 재사용한다. */
.dc-hub-entry{--s2-pz-mode-pad:14px;flex:0 0 auto;margin:calc(8px * var(--ls,1)) 0 calc(12px * var(--ls,1));color:var(--s2-text,var(--fs-app-text,var(--fg,#111827)))}
html.fs-skin2 .s2-pz-cols .dc-hub-entry{order:1}
/* 로비 대국방·대국 결과 제목의 margin 좌우4px과 같은 바깥 행 inset. */
.dc-hub-head,html.fs-skin2 .dc-hub-head{display:flex;align-items:center;justify-content:space-between;justify-self:stretch;flex-wrap:nowrap;gap:10px;box-sizing:border-box;width:100%;margin:0 0 6px;padding:16px 4px 0}
.dc-hub-head h2{display:flex;align-items:center;flex:1 1 auto;flex-wrap:nowrap;gap:6px;min-width:0;margin:0;font-family:inherit;font-size:15px;font-weight:900;line-height:1.3;color:inherit}
html.fs-skin2 .dc-hub-head.s2-pz-record-head h2{display:flex}
.dc-hub-head h2>span:first-child{flex:0 1 auto;min-width:0;overflow-wrap:normal;word-break:normal}
.dc-hub-head .puzzle-learn-link__new{flex:none}
.dc-hub-head>.dc-published-at{flex:none;font-size:12px;font-weight:400;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--s2-muted,var(--fs-app-muted,#64748b))}
.dc-hub-head>.dc-published-at[hidden]{display:none}
.wrap .dc-hub-head h2,.dc-hub-head h2{height:auto;padding:0;background:none;color:inherit;text-align:left}
.dc-hub-panel{border:1px solid var(--fs-app-border,#e5e7eb);border-radius:12px;background:var(--fs-app-surface,#fff)}
.dc-hub-panel,html.fs-skin2 .s2-pz-mode.dc-hub-panel{display:block;justify-items:stretch;box-sizing:border-box;width:100%;min-width:0;margin:0;padding:0;border-width:1px;cursor:default}
.dc-hub-grid{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:1fr;gap:1px 0;justify-items:stretch;align-items:stretch;box-sizing:border-box;width:100%}
.dc-hub-card,html.fs-skin2 .dc-hub-card{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);grid-template-areas:"preview details";grid-template-rows:auto;gap:8px;align-items:center;justify-items:stretch;justify-self:stretch;box-sizing:border-box;width:100%;min-width:0;min-height:84px;margin:0;padding:8px 8px 8px 10px;border:0;overflow-wrap:anywhere;text-decoration:none}
.dc-hub-card{color:inherit;font-size:15px;font-weight:600;line-height:1.35}
.dc-hub-card+.dc-hub-card::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:var(--s2-line,var(--fs-app-border,#e5e7eb));pointer-events:none}
html.fs-skin2 .dc-hub-card{--fs-app-link:var(--s2-text)}
.dc-hub-entry a.dc-hub-card:is(:link,:visited,:hover,:active,:focus){color:var(--s2-text,var(--fs-app-text,var(--fg,#111827)));text-decoration:none}
.dc-hub-card:focus-visible{outline:2px solid var(--s2-link,var(--fs-app-link,#2563eb));outline-offset:-2px}
.dc-hub-preview{grid-area:preview;display:block;width:64px;height:64px;align-self:center}
.dc-hub-preview img{display:block;width:64px;height:64px;max-width:100%;object-fit:contain;border-radius:0}
.dc-hub-preview img[hidden]{display:none}
.dc-hub-details{grid-area:details;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto 1fr;row-gap:3px;align-self:center;min-width:0;width:100%}
/* 공용 s2-pz-mode-name의 grid-area:nm이 내부 격자에 암묵 열을 만들지 않도록 명시한다. */
.dc-hub-card .dc-hub-details>.dc-hub-copy{grid-area:1/1/2/2;align-self:end}
/* 대회명 행은 3px 내려 등급·현황 줄 사이 가운데에 둔다(2026-10-30 지적: 실제 화면 글자 간격이 위 8~9px·아래 12px 로 위로 치우쳤다, 예전 1px). 현황 행은 그대로. */
.dc-hub-card .dc-hub-details>.dc-hub-tournament{grid-area:2/1/3/2;position:relative;top:3px}
.dc-hub-card .dc-hub-details>.dc-hub-metrics{grid-area:3/1/4/2;align-self:end;position:relative;top:1px}
.dc-hub-card .dc-hub-copy,html.fs-skin2 .dc-hub-card .dc-hub-copy{display:flex;align-items:center;gap:6px;box-sizing:border-box;min-width:0;width:100%;margin:0;padding:0 calc(var(--s2-pz-mode-pad,14px) - 8px) 0 0;font-size:16px;font-weight:900;line-height:1.25;text-align:left}
.dc-hub-copy strong{position:relative;top:0;display:block;flex:0 1 auto;min-width:0;max-width:100%;font:inherit;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;word-break:normal}
.dc-hub-level-icon{display:inline-flex;align-items:center;flex:none;height:16px;margin-right:2px}
.dc-hub-card[data-daily-level="beginner"] .dc-hub-level-icon{width:16px}
.dc-hub-card[data-daily-level="advanced"] .dc-hub-level-icon{width:24px}
.dc-hub-level-icon img{display:block;flex:none;width:16px;height:16px}
.dc-hub-level-icon img+img{margin-left:-8px}
.dc-hub-card>.dc-hub-check{position:absolute;display:block;top:50%;right:var(--s2-pz-mode-pad,14px);transform:translateY(-50%);width:18px;height:18px;margin:0;padding:0;line-height:1;--fs-app-link:var(--dc-complete,#6f927d);color:var(--dc-complete,#6f927d);pointer-events:none}
.dc-hub-card>.dc-hub-check:not([data-daily-state="complete"]){display:none}
.fs-app-theme-dark .dc-hub-check{--dc-complete:#92b19d}
.dc-hub-check svg{display:block;width:18px;height:18px}
html.fs-skin2 .dc-hub-card .s2-pz-live,.dc-hub-card .puzzle-card__playing{position:static;display:inline-flex;align-items:center;flex:none;width:auto;height:auto;margin:0;padding:0;line-height:1}
html.fs-skin2 .dc-hub-card .s2-pz-live.is-empty,.dc-hub-card .puzzle-card__playing.is-empty{display:none}
html.fs-skin2 .dc-hub-card .s2-pz-live,.dc-hub-card .puzzle-card__playing{margin-left:auto}
.dc-hub-tournament{display:block;min-width:0;box-sizing:border-box;padding-right:calc(var(--s2-pz-mode-pad,14px) + 18px);margin:0;font-size:13px;font-weight:400;line-height:0;white-space:nowrap}
.dc-hub-tournament[hidden]{display:none}
.dc-hub-tournament-flag{display:inline}
.dc-hub-tournament-flag:empty{display:none}
.dc-hub-tournament-name{display:inline-block;vertical-align:middle;line-height:1.35;white-space:nowrap;overflow:visible;text-overflow:clip}
/* 도전·성공·한번에를 한 줄로 유지하고 JS가 캡션·숫자의 공통 글꼴 크기를 실제 폭에 맞춘다. */
.dc-hub-metrics{display:flex;flex-wrap:nowrap;align-items:baseline;gap:10px;min-width:0;width:100%;margin:0;padding:0;border:0;font-size:12px;white-space:nowrap}
.dc-hub-metrics>div{display:flex;flex:none;align-items:baseline;gap:4px;min-width:0}
.dc-hub-metrics dt{margin:0;font-size:inherit;font-weight:400;line-height:1.25;white-space:nowrap;color:var(--s2-muted,var(--fs-app-muted,#64748b))}
.dc-hub-metrics dd{flex:none;margin:0;font-size:inherit;font-weight:700;line-height:1.25;font-variant-numeric:tabular-nums;white-space:nowrap}
.dc-hub-entry [data-daily-breakdown]{cursor:pointer}
.dc-hub-entry [data-daily-breakdown]:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.dc-hub-next{display:inline-flex;align-items:center;gap:3px;margin-left:6px;vertical-align:top}   /* 2/2 와 시계 사이 6px(2026-10-31 사용자 지시: 2/2 를 오른쪽으로 더 붙임, 예전 10px) */
.dc-hub-clock{display:block;flex:none;width:12px;height:12px}
/* 완료 수(2/2)와 다음 문제까지 남은 시간은 제목 줄 오른쪽에 둔다(2026-10-31 사용자 지시, 예전 발행 날짜 자리. 카드 아래 따로 떠 있던 줄은 없앴다).
   '완료' 글자는 화면에서 빼고 숨김 글자·툴팁으로만(문제마다 카드 안 체크 원이 있어 숫자만으로 읽히고, 긴 언어도 한 줄. 체크 글자는 기기마다 모양이 달라 쓰지 않는다) */
.dc-hub-head>.dc-hub-status{display:inline-flex;align-items:center;flex:none;font-size:12px;font-weight:400;line-height:18px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--s2-muted,var(--fs-app-muted,#64748b))}
.dc-hub-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* 모바일 기본 크기만 +1px. 한 줄 맞춤은 실제 계산된 크기에서 필요한 만큼 줄인다. */
@media(max-width:767px){
  .dc-hub-tournament{font-size:14px}
  .dc-hub-metrics{font-size:13px}
  /* 배우기 카드 위와 동일: 공통 flex gap + 공통 margin만 더한다. */
  html.fs-skin2 .s2-pz-cols .dc-hub-entry{margin-top:var(--s2-pz-gap);margin-bottom:0}
  html.fs-skin2 .dc-hub-head{padding-top:0}
  /* 카드 아래 → 모드 캡션 20px = 바깥 gap 10px + 캡션 위 10px(예전엔 아래 완료 줄 24px 를 빼던 값, 2026-10-31 완료 줄을 제목 줄로 옮김). */
  html.fs-skin2 .s2-pz-main>.s2-sec{margin-top:var(--s2-pz-gap)}
}
/* 2단의 섹션 간격은 s2-pz-side gap 하나로 맞춘다. 머리말의 중복 여백은 더하지 않는다. */
@media(min-width:768px){
  html.fs-skin2 .s2-pz-side>.dc-hub-entry{margin:0}
  html.fs-skin2 .s2-pz-layout--guest .s2-pz-side>.dc-hub-entry{position:relative}
  html.fs-skin2 .s2-pz-side:has(.s2-pz-profile)>.dc-hub-entry .dc-hub-head{padding-top:0}
}

/* 카드 밖 하단도 넓은 모드 카드의 기존 오른쪽 정렬선을 유지한다. */
@container (min-width:1000px){html.fs-skin2 .dc-hub-entry{--s2-pz-mode-pad:18px}}