// 시안 1 — 정제된 리스트 행 (상태 레일 · 듀얼 사용량 미니바 · 펼침 상세) -------
function V1Meter({ ch, label, ended }) {
  const fill = fillColor(ch.pct, label === '수강신청' ? 'enroll' : 'video', ended);
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '52px 1fr auto', alignItems: 'center', gap: 9 }}>
      <span style={{ fontSize: 11.5, color: 'var(--faint)', fontWeight: 600 }}>{label}</span>
      <div style={{ position: 'relative', height: 7, borderRadius: 4, background: 'var(--track)', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, width: Math.max(ch.pct, 2) + '%', borderRadius: 4, background: fill }} />
      </div>
      <span className="tnum" style={{ fontSize: 11.5, fontWeight: 700, color: ended ? 'var(--faint)' : 'var(--ink-2)', minWidth: 92, textAlign: 'right' }}>
        {ch.unlimited
          ? <>{ch.used}{ch.unit} <span style={{ color: 'var(--faint)', fontWeight: 600 }}>/ {ch.total}</span></>
          : <><span style={{ color: ch.pct >= 90 ? 'var(--warn-ink)' : 'inherit' }}>{ch.used}{ch.unit}({ch.pct}%)</span> <span style={{ color: 'var(--faint)', fontWeight: 600 }}>/ {ch.total}</span></>}
      </span>
    </div>
  );
}

function V1Row({ s, expanded }) {
  const st = STATUS[s.status.type];
  const ended = s.status.type === 'ended';
  const pay = needsPay(s.status.type);
  return (
    <div style={{ borderBottom: '1px solid var(--line-2)' }}>
      <div style={{
        display: 'grid',
        gridTemplateColumns: '4px 218px 116px 1fr 176px 132px auto',
        alignItems: 'center', gap: 0,
        background: pay ? 'var(--bad-soft)' : '#fff',
        opacity: ended ? .62 : 1,
      }}>
        {/* 상태 레일 */}
        <div style={{ alignSelf: 'stretch', background: st.color, borderRadius: '0' }} />

        {/* 사이트 */}
        <div style={{ padding: '16px 18px', minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 5 }}>
            <PlanBadge plan={s.plan} ended={ended} />
            {s.billing && <span style={{ fontSize: 11, color: 'var(--faint)', fontWeight: 600 }}>{s.billing}</span>}
          </div>
          <div style={{ fontSize: 15.5, fontWeight: 800, color: ended ? 'var(--muted)' : 'var(--ink)', letterSpacing: -.2 }}>{s.name}</div>
          <div style={{ fontSize: 12, color: 'var(--faint)', marginTop: 1 }}>{s.domain}</div>
        </div>

        {/* 상태 */}
        <div style={{ padding: '0 12px' }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '4px 10px 4px 8px', borderRadius: 20, background: st.soft, color: st.ink, fontSize: 12.5, fontWeight: 700 }}>
            <span style={{ width: 7, height: 7, borderRadius: 4, background: st.color }} />
            {s.status.label}
          </span>
        </div>

        {/* 사용량 (강조) */}
        <div style={{ padding: '14px 22px', display: 'grid', gap: 9 }}>
          <V1Meter ch={s.usage.video} label="영상 용량" ended={ended} />
          <V1Meter ch={s.usage.enroll} label="수강신청" ended={ended} />
        </div>

        {/* 결제 정보 */}
        <div style={{ padding: '14px 16px' }}>
          <PriceLine price={s.price} size={18} color={ended ? 'var(--muted)' : 'var(--ink)'} />
          <div style={{ fontSize: 11.5, color: 'var(--faint)', marginTop: 5 }}>다음 결제일</div>
          <div className="tnum" style={{ fontSize: 13, fontWeight: 700, color: s.nextUrgent ? 'var(--bad)' : 'var(--ink-2)' }}>{s.next}</div>
        </div>

        {/* 구독 기간 */}
        <div className="tnum" style={{ padding: '14px 12px', fontSize: 12.5, color: ended ? 'var(--faint)' : 'var(--ink-2)', lineHeight: 1.5 }}>
          {s.period
            ? (s.period.unlimited
                ? <>{s.period.start}<br /><span style={{ color: 'var(--faint)' }}>무제한</span></>
                : <>{s.period.start} ~<br />{s.period.end}</>)
            : <span style={{ color: 'var(--faint)' }}>—</span>}
        </div>

        {/* 액션 */}
        <div style={{ padding: '14px 20px 14px 8px', display: 'flex', alignItems: 'center', gap: 8 }}>
          {s.actions.map((a, i) => <ActionBtn key={i} act={a} ended={ended} />)}
          <span style={{
            width: 28, height: 28, borderRadius: 7, border: '1px solid var(--line)', background: '#fff',
            display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--faint)',
          }}>
            <svg width="11" height="11" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ transform: expanded ? 'rotate(180deg)' : 'none' }}><path d="M2 4l4 4 4-4" /></svg>
          </span>
        </div>
      </div>

      {/* 경고 스트립 */}
      {s.warning && (
        <div style={{
          display: 'flex', alignItems: 'center', gap: 7, padding: '9px 18px 9px 22px',
          background: s.warning.tone === 'danger' ? 'var(--bad-soft)' : 'var(--warn-soft)',
          color: s.warning.tone === 'danger' ? 'var(--bad-ink)' : 'var(--warn-ink)',
          fontSize: 12.5, fontWeight: 600, borderTop: '1px solid rgba(0,0,0,.04)',
        }}>{s.warning.text}</div>
      )}

      {/* 펼침 상세 (예시: 한 행) */}
      {expanded && (
        <div style={{ padding: '18px 22px 22px 22px', background: '#FAFBFE', borderTop: '1px solid var(--line-2)', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18 }}>
          {[
            ['결제 수단', '신용카드 · 연간 자동결제'],
            ['구독 시작일', s.period ? s.period.start : '—'],
            ['다음 갱신일', s.next],
            ['플랜 한도', '영상 1TB · 수강생 200명'],
            ['누적 영상 업로드', '1,284개'],
            ['총 수강생', '100명 (활성 87명)'],
            ['최근 결제', '2025.02.13 · 840,000원'],
            ['관리자', 'admin@djtechtree.com'],
          ].map(([k, v], i) => (
            <div key={i}>
              <div style={{ fontSize: 11.5, color: 'var(--faint)', fontWeight: 600, marginBottom: 3 }}>{k}</div>
              <div className="tnum" style={{ fontSize: 13.5, fontWeight: 700, color: 'var(--ink-2)' }}>{v}</div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

function VariantOne() {
  const D = window.SOLSOL_DATA;
  return (
    <div className="solsol" style={{ width: 1080, background: 'var(--surface)', padding: '34px 34px 40px' }}>
      {/* 헤더 */}
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 22 }}>
        <div>
          <h1 style={{ fontSize: 26, fontWeight: 800, letterSpacing: -.6, color: 'var(--ink)' }}>내 사이트 관리하기</h1>
          <p style={{ fontSize: 13.5, color: 'var(--muted)', marginTop: 5 }}>내 사이트를 만들고 손쉽게 관리할 수 있어요</p>
        </div>
        <SortBar active="usage" />
      </div>

      {/* 새 사이트 만들기 배너 */}
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        background: 'linear-gradient(100deg,#fff,#F6F4FF)', border: '1px solid var(--line)',
        borderRadius: 'var(--r-lg)', padding: '18px 22px', marginBottom: 18, boxShadow: 'var(--sh-sm)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <span style={{ width: 40, height: 40, borderRadius: 11, background: 'var(--brand-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--brand)' }}>
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><path d="M10 4v12M4 10h12" /></svg>
          </span>
          <div>
            <div style={{ fontSize: 14.5, fontWeight: 800, color: 'var(--ink)' }}>{D.empty.title}</div>
            <div style={{ fontSize: 12.5, color: 'var(--muted)', marginTop: 2 }}>새 도메인을 연결하고 강의 사이트를 바로 시작하세요.</div>
          </div>
        </div>
        <button style={{ height: 42, padding: '0 22px', borderRadius: 10, border: 'none', background: 'var(--ink)', color: '#fff', fontSize: 14, fontWeight: 700 }}>{D.empty.cta}</button>
      </div>

      {/* 컬럼 헤더 */}
      <div style={{
        display: 'grid', gridTemplateColumns: '4px 218px 116px 1fr 176px 132px auto',
        padding: '0 0 9px 0', fontSize: 11.5, fontWeight: 700, color: 'var(--faint)', letterSpacing: .2,
      }}>
        <div /><div style={{ paddingLeft: 18 }}>사이트</div><div style={{ paddingLeft: 12 }}>상태</div>
        <div style={{ paddingLeft: 22 }}>사용량</div><div style={{ paddingLeft: 16 }}>결제 정보</div>
        <div style={{ paddingLeft: 12 }}>구독 기간</div><div style={{ paddingLeft: 8, textAlign: 'right', paddingRight: 20 }}>관리</div>
      </div>

      {/* 리스트 */}
      <div style={{ background: '#fff', border: '1px solid var(--line)', borderRadius: 'var(--r-lg)', overflow: 'hidden', boxShadow: 'var(--sh)' }}>
        {D.sites.map((s, i) => <V1Row key={s.id} s={s} expanded={i === 2} />)}
      </div>
    </div>
  );
}

Object.assign(window, { VariantOne });