/* 큐록 · features/status-band/status-band.css
   Tier Hero v4 — Speech Bubble + Larger Character (2026-05-24).

   재구성 (사용자 피드백):
     v3: headline (quote 전체 너비) → divider → stage (작은 char + cells)
     v4: stage 안에 char column (말풍선 + 큰 char) + cells + N/4 stat

   직면 / 단련 / 책임 톤:
     - 캐릭터가 명확한 *figure* — 110×132 (이전 90×108)
     - 인용문은 *말풍선* — 캐릭터가 *말하는* 것임을 시각적으로 표현
     - tier color 좌측 stripe (정체성 강조)
*/

/* ── 컨테이너 ─────────────────────────────────────────── */
.sb {
  position: relative;
  /* sticky-header 와 시각적으로 한 카드 — bottom corners flat, 좌우 14px margin */
  margin: var(--space-1h) var(--space-3h) 0;
  /* 2026-05-25 — token: space-2/space-3h/2px (bottom 2 = micro detail 유지) */
  padding: var(--space-2) var(--space-3h) 2px;
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface2) 100%);
  border: 1px solid var(--border);
  border-bottom: 1px solid var(--border2);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  overflow: hidden;
  transition: padding 0.3s cubic-bezier(.32, 1, .42, 1);
}

/* 좌측 tier color accent stripe */
.sb::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 4px;
  width: 2px;
  background: var(--sb-accent, var(--text3));
  opacity: 0.55;
  border-radius: 0 1px 1px 0;
}

/* ── Stage row: char column + ledger ──────────────────── */
.sb-stage {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Character column — 말풍선 + 캐릭터를 세로 stack. gap 1px. */
.sb-char-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  flex-shrink: 0;
  width: 120px;
}

/* 말풍선 — 캐릭터 머리 위, 꼬리는 아래쪽 향함.
   min-height 제거 + width: fit-content → 짧은 대사는 작게, 긴 대사는 col 폭까지 자동 wrap. */
.sb-speech {
  position: relative;
  width: fit-content;
  max-width: 100%;
  padding: var(--space-1) var(--space-2) var(--space-1h);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border2);
  border-radius: 10px;
  cursor: pointer;
  touch-action: manipulation;
  display: block;
  text-align: center;
}
/* 꼬리 — 두 겹 (border outer + bg inner) 으로 보더 연속성 확보. */
.sb-speech::before {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--border2);
}
.sb-speech::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid rgba(255, 255, 255, 0.06);
  filter: brightness(1.05);
}
.sb-speech:active { opacity: 0.7; }

.sb-quote {
  font-family: 'Noto Serif KR', 'Nanum Myeongjo', serif;
  font-size: 13px;
  line-height: 1.35;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
  word-break: keep-all;
  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(.32, 1, .42, 1);
  /* tier color 가 inline style 로 주입됨 */
}
.sb-speech .sb-quote.cycling {
  opacity: 0;
  transform: translateY(-4px);
}

/* ── Character canvas ─────────────────────────────────── */
/* wrap = 시각 박스 (크롭 영역), canvas = 실제 sprite 렌더 영역.
   sprite 자체에 위아래 padding 이 있어서 wrap < canvas 로 두고 overflow:hidden 으로 크롭.
   캐릭터는 *유지*, sprite 의 빈 공간만 잘라냄. (2026-05-25) */
.sb-canvas-wrap {
  position: relative;
  /* 2026-05-26: 80→100 키움 + !important — layout-v2 잔재가 32×38 강제하던 사례 방어 */
  width: 100px !important;
  height: 120px !important;
  flex-shrink: 0;
  cursor: pointer;
  touch-action: manipulation;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(.32, 1.5, .42, 1), filter 0.35s ease;
}
.sb-canvas-wrap:active { transform: scale(0.96); }
.sb-canvas {
  /* 2026-05-26: canvas 110×132 + !important — 외부 잔재 룰 방어 */
  position: absolute;
  width: 110px !important;
  height: 132px !important;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block;
  image-rendering: auto;
}
.sb-canvas-wrap img {
  position: absolute;
  width: 110px !important;
  height: 132px !important;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  object-fit: contain;
  image-rendering: auto;
  pointer-events: none;
}

/* ── Ledger 영역 (cells + stat) ──────────────────────── */
.sb-completion {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2h);
}

.cm-cells {
  flex: 1;
  display: flex;
  gap: 0;
}
.cm-cell {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) 2px;
  border-right: 1px solid var(--border2);
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.25s ease;
}
.cm-cell:last-child {
  border-right: none;
}
.cm-cell:active { background: rgba(255, 255, 255, 0.04); }

/* Progress Ring (wireframe v4, 2026-05-24) — 카테고리별 오늘 진행도 %.
   .cm-cell 에 --ring-dash CSS 변수 주입 (renderCompletion 의 _applyRing). */
.cm-ring {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text3);
  transition: color 0.3s ease, filter 0.3s ease, transform 0.35s cubic-bezier(.32, 1.5, .42, 1);
}
.cm-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg); /* 12시 방향 시작 */
}
.cm-ring .ring-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.10);
  stroke-width: 2.5;
}
.cm-ring .ring-fg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  /* dasharray = "fill rest" — fill 만 보이고 rest 는 빈 공간. */
  stroke-dasharray: var(--ring-dash, 0) var(--ring-rest, 75.4);
  transition: stroke-dasharray 0.55s cubic-bezier(.4, 0, .2, 1), stroke 0.3s ease;
}
.cm-label {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  color: var(--text3);
  letter-spacing: 0.04em;
  transition: color 0.3s ease;
}

/* 상태별 ring 색 — cube color system 그대로 (gold/silver/red/dim) */
.cm-cell.is-done .cm-ring {
  color: #ffd54a;
  transform: scale(1.05);
  filter: drop-shadow(0 0 6px rgba(255, 213, 74, 0.5));
}
.cm-cell.is-done .cm-label {
  color: #ffd54a;
  font-weight: 800;
}

.cm-cell.is-partial .cm-ring {
  color: #d8dfe7;
  filter: drop-shadow(0 0 4px rgba(216, 223, 231, 0.28));
}
.cm-cell.is-partial .cm-label {
  color: #d8dfe7;
  font-weight: 700;
}

.cm-cell.is-fail .cm-ring {
  color: #ff6b6b;
  filter: drop-shadow(0 0 5px rgba(255, 77, 77, 0.4));
}
.cm-cell.is-fail .cm-label {
  color: #ff6b6b;
  font-weight: 700;
}

/* Stat (N/4) — large display, vertical stack */
.cm-stat {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0 2px;
  font-family: 'Archivo Black', sans-serif;
  letter-spacing: -0.02em;
  color: #ffd54a;
  text-shadow: 0 0 10px rgba(255, 213, 74, 0.35);
  transition: text-shadow 0.4s ease;
}
.cm-stat #cm-stat-num {
  font-size: 22px;
  line-height: 1;
}
.cm-stat-denom {
  font-size: 11px;
  color: var(--text3);
  font-weight: 600;
  margin-top: 2px;
  font-family: 'DM Mono', monospace;
  letter-spacing: 0.04em;
}
.cm-stat-denom::before {
  content: '/ ';
}

.cm-stat.is-perfect {
  text-shadow: 0 0 18px rgba(255, 213, 74, 0.7), 0 0 32px rgba(255, 213, 74, 0.35);
}

/* ── Compact mode (yesterday-ribbon 노출 시) ──────────── */
body.has-yr-active .sb {
  padding: var(--space-2h) var(--space-3h) var(--space-3);
}
body.has-yr-active .sb-canvas-wrap {
  width: 64px;
  height: 80px;
}
body.has-yr-active .sb-canvas-wrap .sb-canvas,
body.has-yr-active .sb-canvas-wrap img {
  width: 88px;
  height: 106px;
}
body.has-yr-active .sb-char-col {
  width: 100px;
}
body.has-yr-active .sb-speech {
  padding: var(--space-1) var(--space-1h) var(--space-1);
}
body.has-yr-active .sb-quote {
  font-size: var(--text-sm);
}

/* ── Reduced motion ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sb, .sb-canvas-wrap, .sb-quote { transition: none !important; }
  .sb-quote.cycling { opacity: 0.4; transform: none; }
}