/*
 * Filestation 디자인 토큰
 *
 * 기준: Apple Human Interface Guidelines의 시맨틱 색상과 타입 스케일
 *   - 휴대폰(기본): iOS 파일 앱 밀도, 터치 기준 44pt
 *   - 데스크톱(compact): macOS Finder 밀도, 포인터 기준
 * 테마: 밝게(기본) / 어둡게
 *   - 시스템 설정을 따르고, <html data-theme="light|dark">로 강제할 수 있다
 * 밀도: 넓은 화면 + 정밀 포인터면 자동으로 compact
 *   - <html data-density="regular|compact">로 강제할 수 있다
 *
 * 컴포넌트는 반드시 이 토큰만 참조한다. 리터럴 색상 금지.
 */

:root {
  color-scheme: light;

  /* ---------- 배경 ---------- */
  --fs-bg:                #ffffff;               /* 일반 목록, 창 본문 */
  --fs-bg-elevated:       #ffffff;               /* 시트, 팝오버, 경고창 */
  --fs-bg-grouped:        #f2f2f7;               /* 설정형 그룹 목록의 바탕 */
  --fs-bg-grouped-cell:   #ffffff;               /* 그룹 목록의 셀 */
  --fs-bg-sidebar:        #f5f5f7;               /* 데스크톱 사이드바 */
  --fs-bg-bar:            rgba(249, 249, 249, 0.86); /* 탭 바, 도구 막대 (반투명 재질) */
  --fs-bg-row-alt:        #f5f5f7;               /* 목록 보기 줄무늬 */
  --fs-scrim:             rgba(0, 0, 0, 0.32);   /* 시트, 경고창 뒤 */

  /* ---------- 글자 ---------- */
  --fs-label:             #000000;
  --fs-label-2:           rgba(60, 60, 67, 0.60);
  --fs-label-3:           rgba(60, 60, 67, 0.30);
  --fs-label-4:           rgba(60, 60, 67, 0.18);
  --fs-label-on-accent:   #ffffff;

  /* ---------- 채움 (컨트롤 배경) ---------- */
  --fs-fill:              rgba(120, 120, 128, 0.20);
  --fs-fill-2:            rgba(120, 120, 128, 0.16);
  --fs-fill-3:            rgba(118, 118, 128, 0.12);
  --fs-fill-4:            rgba(116, 116, 128, 0.08);

  /* ---------- 구분선 ---------- */
  --fs-separator:         rgba(60, 60, 67, 0.29);
  --fs-separator-opaque:  #c6c6c8;

  /* ---------- 시스템 색 ---------- */
  --fs-accent:            #007aff;               /* systemBlue */
  --fs-accent-pressed:    #0062cc;
  --fs-accent-tint:       rgba(0, 122, 255, 0.12); /* 틴트 버튼, 드롭 대상 */
  --fs-red:               #ff3b30;
  --fs-orange:            #ff9500;
  --fs-yellow:            #ffcc00;
  --fs-green:             #34c759;
  --fs-teal:              #30b0c7;
  --fs-indigo:            #5856d6;
  --fs-purple:            #af52de;
  --fs-pink:              #ff2d55;
  --fs-gray:              #8e8e93;

  /* ---------- 의미 색 ---------- */
  --fs-danger:            var(--fs-red);
  --fs-success:           var(--fs-green);
  --fs-warning:           var(--fs-orange);
  --fs-unread:            var(--fs-accent);      /* 받지 않은 새 파일 점 */
  --fs-selection:         var(--fs-accent);      /* 데스크톱 활성 선택 */
  --fs-selection-inactive: rgba(120, 120, 128, 0.20); /* 창 포커스 밖 선택 */
  --fs-focus-ring:        rgba(0, 122, 255, 0.50);

  /* ---------- 파일 형식 색 ---------- */
  --fs-type-folder:       #4ba3f2;
  --fs-type-folder-tab:   #2f8be6;
  --fs-type-hwp:          #1fa2d8;
  --fs-type-doc:          #2b5fd9;
  --fs-type-xls:          #1e8a4c;
  --fs-type-ppt:          #d35230;
  --fs-type-pdf:          #e5322d;
  --fs-type-image:        var(--fs-purple);
  --fs-type-video:        var(--fs-pink);
  --fs-type-audio:        var(--fs-orange);
  --fs-type-archive:      #8e8e93;
  --fs-type-text:         #636366;
  --fs-type-other:        #aeaeb2;
  --fs-type-paper:        #ffffff;               /* 문서 아이콘의 종이 */
  --fs-type-paper-edge:   rgba(60, 60, 67, 0.22);

  /* ---------- 그림자 ---------- */
  --fs-shadow-popover:    0 10px 30px rgba(0, 0, 0, 0.16), 0 0 0 0.5px rgba(0, 0, 0, 0.12);
  --fs-shadow-sheet:      0 -2px 20px rgba(0, 0, 0, 0.10);
  --fs-shadow-window:     0 20px 60px rgba(0, 0, 0, 0.22), 0 0 0 0.5px rgba(0, 0, 0, 0.18);
  --fs-shadow-drag:       0 6px 16px rgba(0, 0, 0, 0.18);

  /* ---------- 글꼴 ---------- */
  /* 맥·iOS는 SF + Apple SD Gothic Neo, 윈도우·안드로이드는 Pretendard(자체 호스팅) */
  --fs-font-sans: -apple-system, BlinkMacSystemFont, "Pretendard Variable", Pretendard,
                  "Apple SD Gothic Neo", "Segoe UI", "Malgun Gothic", system-ui, sans-serif;
  --fs-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "D2Coding", monospace;

  /* 글자 크기 배율: 사용자가 기기마다 고른다 (설정 > 화면 표시). 1 = 기본 */
  --fs-text-scale: 1;

  /* 타입 스케일: regular = iOS 기본 Dynamic Type. 한글 가독성 위해 행간을 조금 넉넉하게 */
  --fs-text-large-title: 700 calc(34px * var(--fs-text-scale, 1))/1.2 var(--fs-font-sans);
  --fs-text-title-1:     700 calc(28px * var(--fs-text-scale, 1))/1.22 var(--fs-font-sans);
  --fs-text-title-2:     700 calc(22px * var(--fs-text-scale, 1))/1.27 var(--fs-font-sans);
  --fs-text-title-3:     600 calc(20px * var(--fs-text-scale, 1))/1.3 var(--fs-font-sans);
  --fs-text-headline:    600 calc(17px * var(--fs-text-scale, 1))/1.35 var(--fs-font-sans);
  --fs-text-body:        400 calc(17px * var(--fs-text-scale, 1))/1.4 var(--fs-font-sans);
  --fs-text-callout:     400 calc(16px * var(--fs-text-scale, 1))/1.38 var(--fs-font-sans);
  --fs-text-subhead:     400 calc(15px * var(--fs-text-scale, 1))/1.36 var(--fs-font-sans);
  --fs-text-footnote:    400 calc(13px * var(--fs-text-scale, 1))/1.38 var(--fs-font-sans);
  --fs-text-caption-1:   400 calc(12px * var(--fs-text-scale, 1))/1.35 var(--fs-font-sans);
  --fs-text-caption-2:   400 calc(11px * var(--fs-text-scale, 1))/1.3 var(--fs-font-sans);
  --fs-tracking-tight:   -0.01em;   /* 큰 제목 */
  --fs-tracking-caps:    0.04em;    /* 섹션 머리 */

  /* ---------- 간격 (4pt 격자) ---------- */
  --fs-space-1: 4px;
  --fs-space-2: 8px;
  --fs-space-3: 12px;
  --fs-space-4: 16px;
  --fs-space-5: 20px;
  --fs-space-6: 24px;
  --fs-space-8: 32px;
  --fs-space-10: 40px;
  --fs-gutter: 16px;               /* 화면 좌우 여백 */

  /* ---------- 크기 ---------- */
  --fs-hit: 44px;                  /* 최소 터치 영역 */
  --fs-row-h: 44px;                /* 목록 한 줄 */
  --fs-row-h-detail: 60px;         /* 두 줄 목록 (이름 + 부가 정보) */
  --fs-control-h: 36px;            /* 일반 버튼, 입력 */
  --fs-control-h-lg: 50px;         /* 큰 버튼 (로그인 등) */
  --fs-search-h: 36px;
  --fs-icon: 22px;                 /* 도구 막대 아이콘 */
  --fs-file-icon-list: 32px;       /* 목록 보기 파일 아이콘 */
  --fs-file-icon-grid: 64px;       /* 아이콘 보기 파일 아이콘 */
  --fs-navbar-h: 44px;
  --fs-tabbar-h: 49px;
  /* 하단 막대 아래 여백: 아이폰 홈 표시줄 높이, 없으면(사파리 주소창 등) 최소 8px */
  --fs-bottom-gap: max(env(safe-area-inset-bottom, 0px), 8px);
  --fs-sidebar-w: 220px;
  --fs-inspector-w: 260px;

  /* ---------- 모서리 ---------- */
  --fs-radius-xs: 4px;             /* 체크, 작은 태그 */
  --fs-radius-sm: 6px;             /* 데스크톱 버튼, 메뉴 항목 */
  --fs-radius-md: 10px;            /* 그룹 목록, 입력, 검색 필드 */
  --fs-radius-lg: 14px;            /* 경고창, 컨텍스트 메뉴, 시트 */
  --fs-radius-xl: 20px;            /* 모바일 큰 카드 */
  --fs-radius-full: 999px;

  /* ---------- 움직임 ---------- */
  --fs-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --fs-ease-spring: cubic-bezier(0.32, 0.72, 0, 1); /* 시트, 화면 전환 */
  --fs-dur-fast: 120ms;
  --fs-dur: 220ms;
  --fs-dur-slow: 380ms;

  /* ---------- 층 ---------- */
  --fs-z-bar: 10;
  --fs-z-popover: 100;
  --fs-z-sheet: 200;
  --fs-z-alert: 300;
  --fs-z-toast: 400;
}

/* ================= 어두운 테마 ================= */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --fs-bg:                #000000;
    --fs-bg-elevated:       #1c1c1e;
    --fs-bg-grouped:        #000000;
    --fs-bg-grouped-cell:   #1c1c1e;
    --fs-bg-sidebar:        #232325;
    --fs-bg-bar:            rgba(22, 22, 22, 0.86);
    --fs-bg-row-alt:        #111113;
    --fs-scrim:             rgba(0, 0, 0, 0.56);
    --fs-label:             #ffffff;
    --fs-label-2:           rgba(235, 235, 245, 0.60);
    --fs-label-3:           rgba(235, 235, 245, 0.30);
    --fs-label-4:           rgba(235, 235, 245, 0.16);
    --fs-fill:              rgba(120, 120, 128, 0.36);
    --fs-fill-2:            rgba(120, 120, 128, 0.32);
    --fs-fill-3:            rgba(118, 118, 128, 0.24);
    --fs-fill-4:            rgba(118, 118, 128, 0.18);
    --fs-separator:         rgba(84, 84, 88, 0.60);
    --fs-separator-opaque:  #38383a;
    --fs-accent:            #0a84ff;
    --fs-accent-pressed:    #409cff;
    --fs-accent-tint:       rgba(10, 132, 255, 0.22);
    --fs-red:               #ff453a;
    --fs-orange:            #ff9f0a;
    --fs-yellow:            #ffd60a;
    --fs-green:             #30d158;
    --fs-teal:              #40c8e0;
    --fs-indigo:            #5e5ce6;
    --fs-purple:            #bf5af2;
    --fs-pink:              #ff375f;
    --fs-gray:              #8e8e93;
    --fs-selection-inactive: rgba(120, 120, 128, 0.36);
    --fs-focus-ring:        rgba(10, 132, 255, 0.60);
    --fs-type-folder:       #3f97e6;
    --fs-type-folder-tab:   #2a7fd4;
    --fs-type-paper:        #2c2c2e;
    --fs-type-paper-edge:   rgba(235, 235, 245, 0.18);
    --fs-shadow-popover:    0 10px 30px rgba(0, 0, 0, 0.50), 0 0 0 0.5px rgba(255, 255, 255, 0.12);
    --fs-shadow-sheet:      0 -2px 20px rgba(0, 0, 0, 0.50);
    --fs-shadow-window:     0 20px 60px rgba(0, 0, 0, 0.60), 0 0 0 0.5px rgba(255, 255, 255, 0.14);
    --fs-shadow-drag:       0 6px 16px rgba(0, 0, 0, 0.50);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --fs-bg:                #000000;
  --fs-bg-elevated:       #1c1c1e;
  --fs-bg-grouped:        #000000;
  --fs-bg-grouped-cell:   #1c1c1e;
  --fs-bg-sidebar:        #232325;
  --fs-bg-bar:            rgba(22, 22, 22, 0.86);
  --fs-bg-row-alt:        #111113;
  --fs-scrim:             rgba(0, 0, 0, 0.56);
  --fs-label:             #ffffff;
  --fs-label-2:           rgba(235, 235, 245, 0.60);
  --fs-label-3:           rgba(235, 235, 245, 0.30);
  --fs-label-4:           rgba(235, 235, 245, 0.16);
  --fs-fill:              rgba(120, 120, 128, 0.36);
  --fs-fill-2:            rgba(120, 120, 128, 0.32);
  --fs-fill-3:            rgba(118, 118, 128, 0.24);
  --fs-fill-4:            rgba(118, 118, 128, 0.18);
  --fs-separator:         rgba(84, 84, 88, 0.60);
  --fs-separator-opaque:  #38383a;
  --fs-accent:            #0a84ff;
  --fs-accent-pressed:    #409cff;
  --fs-accent-tint:       rgba(10, 132, 255, 0.22);
  --fs-red:               #ff453a;
  --fs-orange:            #ff9f0a;
  --fs-yellow:            #ffd60a;
  --fs-green:             #30d158;
  --fs-teal:              #40c8e0;
  --fs-indigo:            #5e5ce6;
  --fs-purple:            #bf5af2;
  --fs-pink:              #ff375f;
  --fs-gray:              #8e8e93;
  --fs-selection-inactive: rgba(120, 120, 128, 0.36);
  --fs-focus-ring:        rgba(10, 132, 255, 0.60);
  --fs-type-folder:       #3f97e6;
  --fs-type-folder-tab:   #2a7fd4;
  --fs-type-paper:        #2c2c2e;
  --fs-type-paper-edge:   rgba(235, 235, 245, 0.18);
  --fs-shadow-popover:    0 10px 30px rgba(0, 0, 0, 0.50), 0 0 0 0.5px rgba(255, 255, 255, 0.12);
  --fs-shadow-sheet:      0 -2px 20px rgba(0, 0, 0, 0.50);
  --fs-shadow-window:     0 20px 60px rgba(0, 0, 0, 0.60), 0 0 0 0.5px rgba(255, 255, 255, 0.14);
  --fs-shadow-drag:       0 6px 16px rgba(0, 0, 0, 0.50);
}

/* ================= compact 밀도 (macOS Finder) ================= */
@media (min-width: 768px) and (pointer: fine) {
  :root:not([data-density="regular"]) {
    --fs-text-large-title: 700 calc(26px * var(--fs-text-scale, 1))/1.25 var(--fs-font-sans);
    --fs-text-title-1:     700 calc(22px * var(--fs-text-scale, 1))/1.27 var(--fs-font-sans);
    --fs-text-title-2:     600 calc(17px * var(--fs-text-scale, 1))/1.3 var(--fs-font-sans);
    --fs-text-title-3:     600 calc(15px * var(--fs-text-scale, 1))/1.33 var(--fs-font-sans);
    --fs-text-headline:    600 calc(13px * var(--fs-text-scale, 1))/1.38 var(--fs-font-sans);
    --fs-text-body:        400 calc(13px * var(--fs-text-scale, 1))/1.38 var(--fs-font-sans);
    --fs-text-callout:     400 calc(12px * var(--fs-text-scale, 1))/1.36 var(--fs-font-sans);
    --fs-text-subhead:     400 calc(12px * var(--fs-text-scale, 1))/1.36 var(--fs-font-sans);
    --fs-text-footnote:    400 calc(11px * var(--fs-text-scale, 1))/1.36 var(--fs-font-sans);
    --fs-text-caption-1:   400 calc(11px * var(--fs-text-scale, 1))/1.3 var(--fs-font-sans);
    --fs-text-caption-2:   400 calc(10px * var(--fs-text-scale, 1))/1.3 var(--fs-font-sans);
    --fs-hit: 28px;
    --fs-row-h: 26px;
    --fs-row-h-detail: 40px;
    --fs-control-h: 28px;
    --fs-control-h-lg: 32px;
    --fs-search-h: 28px;
    --fs-icon: 18px;
    --fs-file-icon-list: 18px;
    --fs-file-icon-grid: 64px;
    --fs-navbar-h: 52px;
    --fs-radius-md: 7px;
    --fs-radius-lg: 10px;
    --fs-gutter: 20px;
  }
}
:root[data-density="compact"] {
  --fs-text-large-title: 700 calc(26px * var(--fs-text-scale, 1))/1.25 var(--fs-font-sans);
  --fs-text-title-1:     700 calc(22px * var(--fs-text-scale, 1))/1.27 var(--fs-font-sans);
  --fs-text-title-2:     600 calc(17px * var(--fs-text-scale, 1))/1.3 var(--fs-font-sans);
  --fs-text-title-3:     600 calc(15px * var(--fs-text-scale, 1))/1.33 var(--fs-font-sans);
  --fs-text-headline:    600 calc(13px * var(--fs-text-scale, 1))/1.38 var(--fs-font-sans);
  --fs-text-body:        400 calc(13px * var(--fs-text-scale, 1))/1.38 var(--fs-font-sans);
  --fs-text-callout:     400 calc(12px * var(--fs-text-scale, 1))/1.36 var(--fs-font-sans);
  --fs-text-subhead:     400 calc(12px * var(--fs-text-scale, 1))/1.36 var(--fs-font-sans);
  --fs-text-footnote:    400 calc(11px * var(--fs-text-scale, 1))/1.36 var(--fs-font-sans);
  --fs-text-caption-1:   400 calc(11px * var(--fs-text-scale, 1))/1.3 var(--fs-font-sans);
  --fs-text-caption-2:   400 calc(10px * var(--fs-text-scale, 1))/1.3 var(--fs-font-sans);
  --fs-hit: 28px;
  --fs-row-h: 26px;
  --fs-row-h-detail: 40px;
  --fs-control-h: 28px;
  --fs-control-h-lg: 32px;
  --fs-search-h: 28px;
  --fs-icon: 18px;
  --fs-file-icon-list: 18px;
  --fs-file-icon-grid: 64px;
  --fs-navbar-h: 52px;
  --fs-radius-md: 7px;
  --fs-radius-lg: 10px;
  --fs-gutter: 20px;
}

/* ================= 영역 단위 밀도 강제 =================
 * 한 화면 안에서 일부만 다른 밀도로 그릴 때 (쇼케이스, 데스크톱 앱 안의 모바일 미리보기 등)
 * 하위 요소의 font 토큰이 새 값을 쓰도록 body 글꼴도 다시 지정한다. */
.fs-density-regular {
  --fs-text-large-title: 700 calc(34px * var(--fs-text-scale, 1))/1.2 var(--fs-font-sans);
  --fs-text-title-1:     700 calc(28px * var(--fs-text-scale, 1))/1.22 var(--fs-font-sans);
  --fs-text-title-2:     700 calc(22px * var(--fs-text-scale, 1))/1.27 var(--fs-font-sans);
  --fs-text-title-3:     600 calc(20px * var(--fs-text-scale, 1))/1.3 var(--fs-font-sans);
  --fs-text-headline:    600 calc(17px * var(--fs-text-scale, 1))/1.35 var(--fs-font-sans);
  --fs-text-body:        400 calc(17px * var(--fs-text-scale, 1))/1.4 var(--fs-font-sans);
  --fs-text-callout:     400 calc(16px * var(--fs-text-scale, 1))/1.38 var(--fs-font-sans);
  --fs-text-subhead:     400 calc(15px * var(--fs-text-scale, 1))/1.36 var(--fs-font-sans);
  --fs-text-footnote:    400 calc(13px * var(--fs-text-scale, 1))/1.38 var(--fs-font-sans);
  --fs-text-caption-1:   400 calc(12px * var(--fs-text-scale, 1))/1.35 var(--fs-font-sans);
  --fs-text-caption-2:   400 calc(11px * var(--fs-text-scale, 1))/1.3 var(--fs-font-sans);
  --fs-hit: 44px;
  --fs-row-h: 44px;
  --fs-row-h-detail: 60px;
  --fs-control-h: 36px;
  --fs-control-h-lg: 50px;
  --fs-search-h: 36px;
  --fs-icon: 22px;
  --fs-file-icon-list: 32px;
  --fs-file-icon-grid: 64px;
  --fs-navbar-h: 44px;
  --fs-radius-md: 10px;
  --fs-radius-lg: 14px;
  --fs-gutter: 16px;
  font: var(--fs-text-body);
}
.fs-density-compact {
  --fs-text-large-title: 700 calc(26px * var(--fs-text-scale, 1))/1.25 var(--fs-font-sans);
  --fs-text-title-1:     700 calc(22px * var(--fs-text-scale, 1))/1.27 var(--fs-font-sans);
  --fs-text-title-2:     600 calc(17px * var(--fs-text-scale, 1))/1.3 var(--fs-font-sans);
  --fs-text-title-3:     600 calc(15px * var(--fs-text-scale, 1))/1.33 var(--fs-font-sans);
  --fs-text-headline:    600 calc(13px * var(--fs-text-scale, 1))/1.38 var(--fs-font-sans);
  --fs-text-body:        400 calc(13px * var(--fs-text-scale, 1))/1.38 var(--fs-font-sans);
  --fs-text-callout:     400 calc(12px * var(--fs-text-scale, 1))/1.36 var(--fs-font-sans);
  --fs-text-subhead:     400 calc(12px * var(--fs-text-scale, 1))/1.36 var(--fs-font-sans);
  --fs-text-footnote:    400 calc(11px * var(--fs-text-scale, 1))/1.36 var(--fs-font-sans);
  --fs-text-caption-1:   400 calc(11px * var(--fs-text-scale, 1))/1.3 var(--fs-font-sans);
  --fs-text-caption-2:   400 calc(10px * var(--fs-text-scale, 1))/1.3 var(--fs-font-sans);
  --fs-hit: 28px;
  --fs-row-h: 26px;
  --fs-row-h-detail: 40px;
  --fs-control-h: 28px;
  --fs-control-h-lg: 32px;
  --fs-search-h: 28px;
  --fs-icon: 18px;
  --fs-file-icon-list: 18px;
  --fs-file-icon-grid: 64px;
  --fs-navbar-h: 52px;
  --fs-radius-md: 7px;
  --fs-radius-lg: 10px;
  --fs-gutter: 20px;
  font: var(--fs-text-body);
}

@media (prefers-reduced-motion: reduce) {
  :root { --fs-dur-fast: 0ms; --fs-dur: 0ms; --fs-dur-slow: 0ms; }
}