// 그란데 독서타임 — 메인 라우터 + 홈 + 책 상세
// 디자인: nav 좌측 비움, 규 아바타 제거, 관리탭 제거 → ©grandeclip 푸터의 ©가 admin 진입
// 운영: window.bookStore (localStorage) state + 자동 보강 + cm 카운터 애니메이션

const App = () => {
  const t = window.tokens;
  const store = window.bookStore;

  const [books, setBooks] = React.useState(() => store.load());

  // 새로고침해도 머물던 탭 유지 — 마지막 화면을 localStorage에 저장/복원
  const SCREEN_KEY = 'grandeReadingTime.screen';
  const [screen, setScreen] = React.useState(() => {
    try { return localStorage.getItem(SCREEN_KEY) || 'home'; } catch (e) { return 'home'; }
  });
  React.useEffect(() => {
    try { localStorage.setItem(SCREEN_KEY, screen); } catch (e) {}
  }, [screen]);

  // 홈에서 책탑 클릭 시 띄울 모달 (아카이브 모달과 같은 BookModal 컴포넌트 사용)
  const [homeBookId, setHomeBookId] = React.useState(null);

  // 반응형 — viewport 기반 모바일 감지 (< 768px)
  const [isMobile, setIsMobile] = React.useState(() =>
    typeof window !== 'undefined' && window.innerWidth < 768
  );
  React.useEffect(() => {
    const onResize = () => setIsMobile(window.innerWidth < 768);
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);

  React.useEffect(() => {
    store.save(books);
  }, [books]);

  // 마운트 시 공용 시트(Apps Script)에서 최신 책 목록을 가져와 덮어씀.
  // 실패/미배포면 시드(24권) 그대로 유지 → 어디서 누가 봐도 동일.
  React.useEffect(() => {
    let alive = true;
    store.fetchRemote().then(remote => {
      if (alive && Array.isArray(remote) && remote.length) setBooks(remote);
    }).catch(() => {});
    return () => { alive = false; };
  }, []);

  // 파생 데이터 — books 변경 시마다 재계산
  const { members, stats, genres } = React.useMemo(() => store.derive(books), [books]);
  const todayQuote = React.useMemo(() => store.pickTodayQuote(books), [books]);
  const quoteList = React.useMemo(() => store.allQuotes(books), [books]);

  // 홈 진입 시 책탑 쌓기 + cm 카운터 애니메이션
  // 애니메이션은 상위 6권에만 적용. 그 외 책은 처음부터 visible
  // → 책이 많아져도 애니메이션 시간 일정 유지
  const STACK_COUNT = Math.min(books.length, 6);
  const CM_TARGET = stats.totalHeightCm;
  const [animStep, setAnimStep] = React.useState(0);
  const [cmValue, setCmValue] = React.useState(0);

  React.useEffect(() => {
    if (screen !== 'home') {
      setAnimStep(0);
      setCmValue(0);
      return;
    }
    setAnimStep(0);
    setCmValue(0);
    if (STACK_COUNT === 0) return;
    const startDelay = 300;
    // 책 많을 때는 권당 시간 단축해 전체 애니메이션이 너무 길어지지 않게
    const perBook = STACK_COUNT > 8 ? 130 : 220;
    const timers = [];
    for (let k = 1; k <= STACK_COUNT; k++) {
      timers.push(setTimeout(() => setAnimStep(k), startDelay + k * perBook));
    }
    const cmStart = performance.now() + startDelay;
    const cmDuration = STACK_COUNT * perBook + 200;
    let raf;
    const tick = (now) => {
      const elapsed = now - cmStart;
      if (elapsed < 0) { raf = requestAnimationFrame(tick); return; }
      const p = Math.min(1, elapsed / cmDuration);
      const eased = 1 - Math.pow(1 - p, 3);
      setCmValue(eased * CM_TARGET);
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => {
      timers.forEach(clearTimeout);
      cancelAnimationFrame(raf);
    };
  }, [screen, STACK_COUNT, CM_TARGET]);

  const screens = [
    { id: 'home', label: '홈' },
    { id: 'archive', label: '서재' },
    { id: 'expedition', label: '원정대' },
    // { id: 'stats', label: '통계' }, // 임시 숨김 — 수정 후 노출 예정
  ];

  const goBook = (id) => setHomeBookId(id);
  const goHome = () => setScreen('home');
  const goArchive = () => setScreen('archive');
  const goAdmin = () => setScreen('admin');
  const homeBook = homeBookId != null ? books.find(b => b.id === homeBookId) || null : null;

  // 책탑 cm 비유 — 일상·사무용품 기준, 같은 cm는 항상 같은 문구
  const heightCompare = (cm) => {
    if (!cm) return '텅 빈 책상';
    if (cm < 2) return '포스트잇 한 묶음';
    if (cm < 5) return '스카치테이프 한 롤 지름';
    if (cm < 9) return '종이컵 한 잔';
    if (cm < 12) return '캔콜라 한 캔';
    if (cm < 16) return '빼빼로 한 개';
    if (cm < 20) return '아이폰 한 대 세로';
    if (cm < 25) return '콜라 500ml 페트병';
    if (cm < 30) return 'A4 용지 긴 변';
    if (cm < 35) return '노트북 13인치 가로';
    if (cm < 45) return '노트북 15인치 가로';
    if (cm < 55) return '24인치 모니터 가로';
    if (cm < 70) return '27인치 모니터 가로';
    if (cm < 85) return '사무 책상 높이';
    if (cm < 105) return '1m 자 한 자루';
    if (cm < 135) return '사무실 파티션 절반';
    if (cm < 165) return '사무실 파티션 한 장';
    if (cm < 180) return '어른 한 명 키';
    return '어른 키를 넘었어요!';
  };


  // 공통 크롬: nav 좌측 비움 + 우측 탭 3개 + (홈만) 좌하단 ©grandeclip 푸터
  // 모바일: 전체 폭, 컴팩트 nav. 데스크탑: 1440 고정 + minHeight 900
  const Chrome = ({ children, isAdmin = false, showFooter = false, fluid = false }) => (
    <div style={{
      width: (isMobile || fluid) ? '100%' : 1440,
      // 원정대(fluid·스케일러 OFF)는 서재처럼 max-width 1280 중앙 정렬로 좌우 여백 확보
      maxWidth: fluid && !isMobile ? 1280 : undefined,
      marginLeft: fluid && !isMobile ? 'auto' : undefined,
      marginRight: fluid && !isMobile ? 'auto' : undefined,
      // 홈(히어로)은 화면 높이를 꽉 채워 푸터를 바닥에 고정 → 아래 빈 공간 제거.
      // var(--app-scale)는 index.html이 단계별로 주입(태블릿 0.533 / PC 0.889).
      // 폰트·스케일엔 영향 없고, 콘텐츠가 더 길면 900px가 유지됨.
      minHeight: isMobile
        ? '100vh'
        : (showFooter ? 'max(900px, calc(100vh / var(--app-scale, 1)))' : 900),
      background: isAdmin ? '#FAFAF8' : t.color.bg,
      fontFamily: t.font.sans, color: t.color.ink,
      position: 'relative',
      display: 'flex', flexDirection: 'column',
    }}>
      <nav style={{
        padding: isMobile ? '14px 16px' : '28px 64px',
        display: 'flex', justifyContent: isMobile ? 'center' : 'space-between', alignItems: 'center',
        position: 'relative', zIndex: 10, background: isAdmin ? '#FAFAF8' : '#fff',
      }}>
        {!isMobile && (
          <div onClick={goHome} style={{ width: 80, height: 28, cursor: 'pointer' }} />
        )}
        <div style={{ display: 'flex', gap: isMobile ? 4 : 4, alignItems: 'center' }}>
          {screens.map(s => (
            <div key={s.id} onClick={() => setScreen(s.id)} style={{
              fontSize: isMobile ? 14 : 18, letterSpacing: '-0.015em', cursor: 'pointer',
              padding: isMobile ? '8px 16px' : '12px 26px',
              color: screen === s.id ? '#fff' : t.color.ink,
              background: screen === s.id ? t.color.ink : 'transparent',
              fontWeight: 600,
              borderRadius: 999,
              transition: 'all 0.15s',
            }}>{s.label}</div>
          ))}
        </div>
      </nav>
      <div style={{ position: 'relative', zIndex: 1, minHeight: isMobile ? 'auto' : 816 }}>{children}</div>
      {/* 푸터 — 좌측 하단, 눈에 안 띄게. ©는 admin 진입 트리거 */}
      {showFooter && (
        <div style={{
          position: 'absolute', bottom: 16, left: 16,
          fontSize: 10, color: t.color.mutedLight, letterSpacing: '0.06em',
          zIndex: 20, fontFamily: t.font.sans, userSelect: 'none',
          opacity: 0.7,
        }}>
          <span
            onClick={goAdmin}
            title="관리자"
            style={{ cursor: 'pointer', transition: 'color 0.15s' }}
            onMouseEnter={e => { e.currentTarget.style.color = t.color.ink; }}
            onMouseLeave={e => { e.currentTarget.style.color = t.color.mutedLight; }}
          >©</span>
          <span style={{ marginLeft: 3 }}>grandeclip</span>
        </div>
      )}
    </div>
  );

  // === HOME (모바일) ===
  if (screen === 'home' && isMobile) {
    const stackBooks = [...books].sort((a, b) =>
      (b.date || '').localeCompare(a.date || '') || b.id - a.id
    );
    const now = new Date();
    const todayLabel = `${now.getFullYear()}. ${String(now.getMonth() + 1).padStart(2, '0')}. ${String(now.getDate()).padStart(2, '0')}`;
    const cmStr = stats.totalHeightCm.toFixed(1);
    const spineColors = ['#0A0A0A','#1F1F1F','#2F2F2F','#454545','#5A5A5A','#737373','#8E8E8E','#A8A8A8'];
    return (
      <Chrome showFooter>
        <div style={{ padding: '24px 20px 80px', position: 'relative' }}>
          {/* 우측 상단 클립 데코 — viewport 폭에 반응
              clamp(최소 160px, 화면폭의 50%, 최대 280px)
              → iPhone SE(375): 188 / 일반 모바일(390): 195 / 태블릿 직전(767): 280 */}
          <img src="assets/clip.png" alt="" style={{
            position: 'absolute',
            top: 16, right: -32,
            width: 'clamp(160px, 50vw, 280px)',
            opacity: 0.7,
            pointerEvents: 'none',
            filter: 'drop-shadow(0 10px 20px rgba(0,0,0,0.12))',
            zIndex: 0,
          }} />

          <div style={{ position: 'relative', zIndex: 1 }}>
            <div style={{ fontSize: 14, fontWeight: 500, color: t.color.muted, marginBottom: 12 }}>{todayLabel}</div>
            <div style={{ fontSize: 40, fontWeight: 700, lineHeight: 1.05, letterSpacing: '-0.04em', marginBottom: 28 }}>
              팀그란데가<br />
              <span style={{ color: t.color.mutedLight }}>쌓아온 </span><span style={{ color: t.color.blue }}>책</span>
            </div>
            <div style={{ marginBottom: 36 }}>
              <div style={{ fontSize: 96, fontWeight: 800, letterSpacing: '-0.05em', lineHeight: 0.92, color: t.color.ink, fontVariantNumeric: 'tabular-nums' }}>
                {cmStr}<span style={{ fontSize: 32, color: t.color.muted, fontWeight: 600, marginLeft: 8, letterSpacing: '0.01em' }}>cm</span>
              </div>
              <div style={{ fontSize: 16, fontWeight: 500, color: t.color.muted, marginTop: 12, lineHeight: 1.4 }}>
                {heightCompare(stats.totalHeightCm)}
              </div>
            </div>
          </div>

          {/* 모바일 책탑 — 가운데 정렬 + 좌우 stagger로 PC뷰 같은 쌓이는 느낌 */}
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 0, position: 'relative', zIndex: 1, marginTop: 12 }}>
            {stackBooks.map((b, i) => {
              const pages = b.pages || 200;
              const h = Math.max(34, Math.round(pages * 0.14));
              const w = 240 + (b.id * 17) % 60;  // 240-300
              // 좌우 stagger: -12 ~ +12 (가운데 기준)
              const stagger = ((b.id * 7) % 24) - 12;
              const c = i === 1 ? t.color.blue : i === 3 ? t.color.blueMid : spineColors[i % spineColors.length];
              const isLight = false;
              const titleFont = h >= 56 ? 15 : h >= 44 ? 14 : 13;
              // 진행중 책 — 우측을 알파 0.25까지 페이드 (책탑 위 한눈 신호)
              const pagesTotal = b.pages || 0;
              const pagesRead = b.pagesRead != null ? b.pagesRead : pagesTotal;
              const isInProgress = pagesTotal > 0 && pagesRead < pagesTotal;
              const readPct = isInProgress
                ? Math.max(5, Math.min(100, Math.round((pagesRead / pagesTotal) * 100)))
                : 100;
              const maskCss = isInProgress
                ? `linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) ${readPct}%, rgba(0,0,0,0.25) 100%)`
                : null;
              return (
                <div key={b.id} onClick={() => goBook(b.id)} style={{
                  width: w, height: h, background: c, color: isLight ? t.color.ink : 'rgba(255,255,255,0.92)',
                  position: 'relative',
                  transform: `translateX(${stagger}px)`,
                  boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.10)',
                  display: 'flex', alignItems: 'center', paddingLeft: 18,
                  fontSize: titleFont, fontWeight: 600, letterSpacing: '-0.02em',
                  whiteSpace: 'nowrap', overflow: 'hidden',
                  cursor: 'pointer',
                  fontFamily: t.font.sans,
                  ...(maskCss ? { WebkitMaskImage: maskCss, maskImage: maskCss } : {}),
                }}>
                  {b.title || '(제목 미입력)'}
                </div>
              );
            })}
            {/* 책탑 바닥 그림자 — 가운데 정렬 */}
            <div style={{
              height: 12, width: 280,
              background: 'radial-gradient(ellipse at center, rgba(0,0,0,0.22), transparent 72%)',
              marginTop: 2,
            }} />
          </div>
        </div>
        <window.BookModal book={homeBook} isMobile={isMobile} onClose={() => setHomeBookId(null)} />
      </Chrome>
    );
  }

  // === HOME (데스크탑) ===
  if (screen === 'home') {
    // 책탑 정렬 — 최신 먼저 (date desc, id desc). 자연 column으로 source[0]=최신=시각적 top
    const stackBooks = [...books].sort((a, b) =>
      (b.date || '').localeCompare(a.date || '') || b.id - a.id
    );
    const spineColors = ['#0A0A0A','#1F1F1F','#2F2F2F','#454545','#5A5A5A','#737373','#8E8E8E','#A8A8A8','#C2C2C2','#D8D8D8','#E6E6E6','#EFEFEF'];
    const now = new Date();
    const todayLabel = `${now.getFullYear()}. ${String(now.getMonth() + 1).padStart(2, '0')}. ${String(now.getDate()).padStart(2, '0')}`;

    // 책탑 두께 — 실제 페이지수 비례 (약 0.15px/page, 최소 26px)
    const naturalH = (b) => Math.max(26, Math.round((b.pages || 200) * 0.15));
    const totalNaturalH = stackBooks.reduce((s, b) => s + naturalH(b), 0);

    // 책탑 박스 736px (top:56 ~ bottom:24). 책은 항상 바닥(그림자 바로 위)에서부터 쌓임.
    // 적으면 위에 빈공간 두고 자연 두께, 736 초과 시에만 비례 축소
    const CONTAINER_H = 736;
    const SHADOW_H = 14;
    const targetH = CONTAINER_H - SHADOW_H; // 722
    const fillScale = totalNaturalH > targetH ? targetH / totalNaturalH : 1;
    const stackScale = fillScale; // 책 두께 계산에 사용 (축소 전용)

    // cm 숫자 동적 폰트 — 자릿수에 따라 축소
    // "30.7" 4자 → 160, "100.0" 5자 → 130, "1000.0" 6자 → 110
    const cmStr = cmValue.toFixed(1);
    const cmFontSize = cmStr.length >= 6 ? 110 : cmStr.length >= 5 ? 130 : 160;
    // cm 단위는 비율 0.33으로 조금 더 크게 + weight 600 (이전 500)
    const cmUnitFontSize = Math.round(cmFontSize * 0.33);
    const cmCompareFontSize = cmFontSize >= 160 ? 26 : cmFontSize >= 130 ? 22 : 18;

    return (
      <Chrome showFooter>
        <div style={{ position: 'relative' }}>
          <div style={{ padding: '56px 64px 24px', position: 'relative', minHeight: 816, display: 'flex', gap: 28 }}>
            <div style={{ flex: 1, position: 'relative' }}>
              <div style={{ marginBottom: 20 }}>
                <div style={{ fontFamily: t.font.sans, fontSize: 24, fontWeight: 500, letterSpacing: '-0.02em', color: t.color.muted }}>
                  {todayLabel}
                </div>
              </div>

              <div style={{ fontSize: 96, fontWeight: 700, lineHeight: 0.96, letterSpacing: '-0.055em', maxWidth: 720, position: 'relative', zIndex: 2 }}>
                팀그란데가<br />
                <span style={{ color: t.color.mutedLight }}>쌓아온 </span><span style={{ color: t.color.blue }}>책</span>
              </div>
            </div>

            {/* 데코 클립 — 다른 요소와 겹치지 않는 위치 (스택·타이틀·cm 모두 회피) */}
            {/* row 영역 y:119-389, 클립을 그 아래 y:430~ 배치 */}
            <img src="assets/clip.png" alt="" style={{
              position: 'absolute',
              width: 720,
              left: 32, top: 430,
              filter: 'drop-shadow(0 20px 40px rgba(0,0,0,0.10))',
              pointerEvents: 'none',
              zIndex: 1,
              opacity: 0.85,
            }} />

            {/* cm 히어로 — 단독 absolute, 타이틀 상단(y=105)과 정렬 */}
            {/* 날짜 24 + lineHeight 1.2 ≈ 29 + marginBottom 20 + padding-top 56 = 105 */}
            {/* right:472 = 책탑 좌측(996) - gap(28) = 968 → 1440-968 */}
            <div style={{
              position: 'absolute',
              right: 472, top: 105,
              zIndex: 2,
              display: 'flex', flexDirection: 'column', alignItems: 'flex-end',
            }}>
              <div style={{ fontSize: cmFontSize, fontWeight: 800, letterSpacing: '-0.06em', lineHeight: 0.92, color: t.color.ink, fontVariantNumeric: 'tabular-nums' }}>
                {cmStr}<span style={{ fontSize: cmUnitFontSize, color: t.color.muted, fontWeight: 600, marginLeft: Math.round(cmFontSize * 0.09), letterSpacing: '0.01em' }}>cm</span>
              </div>
              <div style={{ fontFamily: t.font.sans, fontSize: cmCompareFontSize, fontWeight: 500, letterSpacing: '-0.015em', color: t.color.muted, marginTop: 20, lineHeight: 1.3, textAlign: 'right' }}>
                {heightCompare(stats.totalHeightCm)}
              </div>
            </div>

            {/* 책탑 — 항상 바닥(그림자) 정렬. 최신이 위, 오래된 게 아래.
                컬럼 높이 고정 → 책 적어도 첫 책은 책상 위에 놓인 느낌. 736 초과 시 비례 축소 */}
            <div style={{
              width: 380, zIndex: 2, flexShrink: 0,
              height: CONTAINER_H,
              display: 'flex', flexDirection: 'column', gap: 0,
              justifyContent: 'flex-end',
            }}>
              {stackBooks.map((b, i) => {
                const w = 240 + (b.id * 17) % 100;
                // 최소 두께 36px (책 제목 가독성 확보)
                const h = Math.max(36, Math.round(naturalH(b) * stackScale));
                // 인덱스 3 = 메인 포인트 블루, 인덱스 1 = 서브 포인트 블루미드, 나머지는 모노톤
                const c = i === 3 ? t.color.blue : i === 1 ? t.color.blueMid : spineColors[Math.floor(i * 11 / 7) % spineColors.length];
                const offset = ((b.id * 7) % 28) - 14;
                const isLight = c === '#D8D8D8' || c === '#E6E6E6' || c === '#EFEFEF' || c === '#C2C2C2';
                // 애니메이션: 상위 6권만 등장 시퀀스 적용 (시각적 6번째부터 → 최상위 순)
                // 7권째부터는 처음부터 visible
                const visible = i >= STACK_COUNT || (STACK_COUNT - 1 - i) < animStep;
                // 책 두께에 따라 폰트 단계 조정 (최소 14px 가독성 확보)
                const titleFont = h >= 70 ? 17 : h >= 56 ? 16 : h >= 44 ? 15 : 14;
                // 진행중 책 — 우측을 알파 0.25까지 페이드 (mask-image)
                // spine 두께 자체는 b.pages 기반 그대로 유지 → "잠재적 두께"는 보이고 안 읽은 영역만 페이드
                const pagesTotal = b.pages || 0;
                const pagesRead = b.pagesRead != null ? b.pagesRead : pagesTotal;
                const isInProgress = pagesTotal > 0 && pagesRead < pagesTotal;
                const readPct = isInProgress
                  ? Math.max(5, Math.min(100, Math.round((pagesRead / pagesTotal) * 100)))
                  : 100;
                const maskCss = isInProgress
                  ? `linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) ${readPct}%, rgba(0,0,0,0.25) 100%)`
                  : null;
                return (
                  <div
                    key={b.id}
                    onClick={() => goBook(b.id)}
                    style={{
                      width: w, height: h, background: c,
                      marginLeft: offset + 24, position: 'relative',
                      flexShrink: 0,
                      boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.10)',
                      display: 'flex', alignItems: 'center', paddingLeft: 24,
                      fontSize: titleFont,
                      color: isLight ? 'rgba(0,0,0,0.72)' : 'rgba(255,255,255,0.90)',
                      fontFamily: t.font.sans, fontWeight: 600, letterSpacing: '-0.02em',
                      whiteSpace: 'nowrap', overflow: 'hidden',
                      cursor: 'pointer',
                      opacity: visible ? 1 : 0,
                      transform: visible ? 'translateY(0)' : 'translateY(18px)',
                      transition: 'opacity 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.15s',
                      ...(maskCss ? { WebkitMaskImage: maskCss, maskImage: maskCss } : {}),
                    }}
                    onMouseEnter={e => { e.currentTarget.style.filter = 'brightness(1.12)'; }}
                    onMouseLeave={e => { e.currentTarget.style.filter = 'brightness(1)'; }}
                  >
                    {b.title || '(제목 미입력)'}
                  </div>
                );
              })}
              {/* 책탑 맨 아래 그림자 */}
              <div style={{
                height: SHADOW_H, width: '94%', alignSelf: 'center',
                background: 'radial-gradient(ellipse at center, rgba(0,0,0,0.22), transparent 72%)',
                marginTop: 2, flexShrink: 0,
              }} />
            </div>
          </div>
        </div>
        <window.BookModal book={homeBook} isMobile={isMobile} onClose={() => setHomeBookId(null)} />
      </Chrome>
    );
  }

  // === ARCHIVE ===
  if (screen === 'archive') {
    return (
      <Chrome>
        <window.Archive books={books} stats={stats} quotes={quoteList} goBook={goBook} isMobile={isMobile} />
      </Chrome>
    );
  }

  // === EXPEDITION (도끼책 원정대) ===
  if (screen === 'expedition') {
    return (
      <Chrome>
        <window.Expedition isMobile={isMobile} />
      </Chrome>
    );
  }

  // === STATS ===
  if (screen === 'stats') {
    return (
      <Chrome>
        <window.Stats books={books} members={members} stats={stats} genres={genres} isMobile={isMobile} />
      </Chrome>
    );
  }

  // === ADMIN ===
  if (screen === 'admin') {
    return (
      <Chrome isAdmin>
        <window.Admin books={books} setBooks={setBooks} members={members} stats={stats} goHome={goHome} />
      </Chrome>
    );
  }

  return <Chrome><div style={{ padding: 64 }}>화면을 찾을 수 없어요.</div></Chrome>;
};

window.App = App;