/* Finder 폴더(rare-ui folder-component 이식) · 태그·폴더 7색 토큰 — DESIGN.md(Framer 다크) 준수 · body.shell-v2 스코프.
 *   구조·치수·자세 값은 원본 그대로다(321×270 · 카드 164×214 · 앞판 321×241 + 16px · rotateX −15/−45/−55).
 *   움직임은 transition 이고, 이징·길이는 folderIcon.js 가 원본 스프링(stiffness 120 · damping 13|14)을 적분해 변수로 넣는다.
 *   ⚠️ 콘텐츠층이다 — backdrop-filter 를 쓰지 않는다(HIG · liquidGlassLayer.test.mjs). 원본 앞판의 blur(6px) 는 알파 채움으로 바꿨다.
 *
 * ── 7색 대비 근거 ── 캔버스 #090909 · WCAG 2.2 1.4.11(비텍스트 3:1). finderFolderColors.test.mjs 가 아래 값을 다시 계산해 잠근다.
 *   색      점·테두리 --fd-c   vs 캔버스 | vs 선택판(#082030) | 앞판 면(뒤판 위 88%) vs 캔버스
 *   빨강    #ff5a52           6.48      | 5.43              | 3.43
 *   주황    #ff9f0a           9.69      | 8.11              | 4.81
 *   노랑    #ffd60a          14.10      | 11.80             | 6.65
 *   초록    #30d158           9.85      | 8.24              | 4.88
 *   파랑    #5b8cff           6.30      | 5.27              | 3.40   ← 선택 파랑(#0099ff)과 다른 색상(보랏빛 쪽)이라 태그가 선택으로 읽히지 않는다
 *   보라    #bf5af2           5.65      | 4.73              | 3.10
 *   회색    #98989d           6.93      | 5.80              | 3.68
 *   기본    #8e8e93           6.11      | 5.11              | 1.70   ← 무색 폴더는 면이 아니라 **테두리**가 형체를 진다(6.11)
 *   유도: 뒤판 = 색 50% + 캔버스 50%, 앞판 = 색 70% + 캔버스 30% 를 뒤판 위에 88% 로 겹친 값.
 *   색은 작은 점·폴더 면·테두리에만 쓴다 — 글자·버튼 색으로 쓰지 않는다(Framer 의 강조색 하나 규칙).
 */
body.shell-v2 {
  --fd-c-red: #ff5a52;    --fd-back-red: #84322e;    --fd-flap-red: rgba(181, 66, 60, 0.88);
  --fd-c-orange: #ff9f0a; --fd-back-orange: #84540a; --fd-flap-orange: rgba(181, 114, 10, 0.88);
  --fd-c-yellow: #ffd60a; --fd-back-yellow: #84700a; --fd-flap-yellow: rgba(181, 152, 10, 0.88);
  --fd-c-green: #30d158;  --fd-back-green: #1d6d31;  --fd-flap-green: rgba(36, 149, 64, 0.88);
  --fd-c-blue: #5b8cff;   --fd-back-blue: #324b84;   --fd-flap-blue: rgba(66, 101, 181, 0.88);
  --fd-c-purple: #bf5af2; --fd-back-purple: #64327e; --fd-flap-purple: rgba(136, 66, 172, 0.88);
  --fd-c-gray: #98989d;   --fd-back-gray: #515153;   --fd-flap-gray: rgba(109, 109, 113, 0.88);
  --fd-c-none: #8e8e93;   --fd-back-none: #26262a;   --fd-flap-none: rgba(58, 58, 63, 0.88);
  /* 폴더 안 글자 카드 = 종이(원본 검정 테마의 흰 카드). 짙은 잉크 #1c1c1c 는 종이 위 15.1:1. */
  --fd-paper: #f1f1f1;
  --fd-paper-ink: #1c1c1c;
}

/* 색 배정 — 폴더·태그 점·목록의 폴더 글리프가 같은 변수를 읽는다(색 하나에 한 줄). */
body.shell-v2 :is(.fd-folder, .fd-tag-dot, .fd-glyph--folder) { --fd-edge: var(--fd-c-none); --fd-back: var(--fd-back-none); --fd-flap: var(--fd-flap-none); }
body.shell-v2 :is(.fd-folder, .fd-tag-dot, .fd-glyph--folder)[data-color="red"] { --fd-edge: var(--fd-c-red); --fd-back: var(--fd-back-red); --fd-flap: var(--fd-flap-red); }
body.shell-v2 :is(.fd-folder, .fd-tag-dot, .fd-glyph--folder)[data-color="orange"] { --fd-edge: var(--fd-c-orange); --fd-back: var(--fd-back-orange); --fd-flap: var(--fd-flap-orange); }
body.shell-v2 :is(.fd-folder, .fd-tag-dot, .fd-glyph--folder)[data-color="yellow"] { --fd-edge: var(--fd-c-yellow); --fd-back: var(--fd-back-yellow); --fd-flap: var(--fd-flap-yellow); }
body.shell-v2 :is(.fd-folder, .fd-tag-dot, .fd-glyph--folder)[data-color="green"] { --fd-edge: var(--fd-c-green); --fd-back: var(--fd-back-green); --fd-flap: var(--fd-flap-green); }
body.shell-v2 :is(.fd-folder, .fd-tag-dot, .fd-glyph--folder)[data-color="blue"] { --fd-edge: var(--fd-c-blue); --fd-back: var(--fd-back-blue); --fd-flap: var(--fd-flap-blue); }
body.shell-v2 :is(.fd-folder, .fd-tag-dot, .fd-glyph--folder)[data-color="purple"] { --fd-edge: var(--fd-c-purple); --fd-back: var(--fd-back-purple); --fd-flap: var(--fd-flap-purple); }
body.shell-v2 :is(.fd-folder, .fd-tag-dot, .fd-glyph--folder)[data-color="gray"] { --fd-edge: var(--fd-c-gray); --fd-back: var(--fd-back-gray); --fd-flap: var(--fd-flap-gray); }

/* ── 폴더 ── 겉 상자 = 아이콘 크기(--fd-icon, 단위 없는 64~160) × 원본 비율. 안의 무대는 원본 치수 그대로 두고 줄인다. */
body.shell-v2 .fd-folder {
  position: relative; flex: 0 0 auto;
  width: calc(var(--fd-icon, 96) * 1px);
  height: calc(var(--fd-icon, 96) * 270px / 321);
}
/* 원근은 800 으로 고정 — 원본은 크기에 비례시켰지만 64px 까지 줄이면 원근이 너무 가까워 앞판이 찌그러진다.
 * 무대는 포인터를 받지 않는다 — 열림 자세의 카드가 타일 위로 넘쳐도 끌기의 elementFromPoint 를 가로채지 않게. */
body.shell-v2 .fd-folder-stage {
  position: absolute; left: 50%; top: 50%; width: 321px; height: 270px;
  transform: translate(-50%, -50%) scale(calc(var(--fd-icon, 96) / 321));
  perspective: 800px; pointer-events: none;
}
body.shell-v2 .fd-folder-back {
  position: absolute; inset: 0; border-radius: 25px;
  background: var(--fd-back); box-shadow: inset 0 0 6px 2px rgba(255, 255, 255, 0.14);
}
body.shell-v2 .fd-folder-cards { position: absolute; inset: 0; }

/* 카드 — 자세마다 좌표·회전·지연(원본 animate/transition 값). 지연은 **가는 자세**의 값이 쓰인다(CSS transition 규칙). */
body.shell-v2 .fd-folder-card {
  --cx: 0px; --cy: 0px; --cr: 0deg; --cd: 0s;
  position: absolute; left: 50%; top: 50%; width: 164px; height: 214px; margin: -107px 0 0 -82px;
  border-radius: 20px; overflow: hidden; background: var(--surface-3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 3px 5px 12px rgba(0, 0, 0, 0.35);
  transform: translate(var(--cx), var(--cy)) rotate(var(--cr));
  transition: transform var(--fd-dur-card, 600ms) var(--fd-ease-card, ease) var(--cd);
}
body.shell-v2 .fd-folder-card[data-slot="1"] { --cx: 40px; --cy: -10px; --cr: 10deg; }
body.shell-v2 .fd-folder-card[data-slot="2"] { --cx: 3px; --cy: -20px; --cr: 2deg; }
body.shell-v2 .fd-folder-card[data-slot="3"] { --cx: -40px; --cy: -22px; --cr: -5deg; }
body.shell-v2 .fd-folder[data-pose="hover"] .fd-folder-card[data-slot="1"] { --cy: -30px; --cr: 14deg; --cd: 0.12s; }
body.shell-v2 .fd-folder[data-pose="hover"] .fd-folder-card[data-slot="2"] { --cy: -35px; --cr: -1deg; --cd: 0.06s; }
body.shell-v2 .fd-folder[data-pose="hover"] .fd-folder-card[data-slot="3"] { --cy: -44px; --cr: -9deg; }
body.shell-v2 .fd-folder[data-pose="open"] .fd-folder-card[data-slot="1"] { --cx: 70px; --cy: -160px; --cr: 18deg; --cd: 0.1s; }
body.shell-v2 .fd-folder[data-pose="open"] .fd-folder-card[data-slot="2"] { --cx: 0px; --cy: -180px; --cr: -3deg; --cd: 0.05s; }
body.shell-v2 .fd-folder[data-pose="open"] .fd-folder-card[data-slot="3"] { --cx: -65px; --cy: -170px; --cr: -14deg; }
/* 돌아가는 길은 더 빠르게 — 전환은 '가는 자세' 의 값을 쓰므로 rest 에서만 길이를 줄인다(같은 스프링 곡선을 60% 로 압축).
 *   원본 스프링(강성 120 · 감쇠 13)은 멈추기까지 약 1초라, 포인터가 떠난 뒤에도 카드가 한참 남아 있었다. 들릴 때는 원본 그대로. */
body.shell-v2 .fd-folder[data-pose="rest"] .fd-folder-card { transition-duration: calc(var(--fd-dur-card, 600ms) * 0.6); }
body.shell-v2 .fd-folder[data-pose="rest"] .fd-folder-flap { transition-duration: calc(var(--fd-dur-flap, 600ms) * 0.6); }
body.shell-v2 .fd-folder-card-media { display: block; width: 100%; height: 100%; object-fit: cover; }
body.shell-v2 .fd-folder-card--paper { background: var(--fd-paper); padding: 22px 18px; }
/* 무대 좌표(321 기준)의 글자 — 아이콘 96 에서 약 7px 로 줄어든다. 읽히라는 글이 아니라 '글 문서' 라는 결이다(카드는 aria-hidden). */
body.shell-v2 .fd-folder-card-text {
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  color: var(--fd-paper-ink); font-family: var(--font-heading); font-size: 24px; font-weight: 700; line-height: 1.25;
  word-break: keep-all; overflow-wrap: anywhere;
}

/* 앞판 — 아래 모서리를 축으로 기운다. 테두리 굵기는 화면 1.5px 을 지키게 줄임 배율을 되갚는다(작은 아이콘에서 형체가 테두리로 선다). */
body.shell-v2 .fd-folder-flap {
  position: absolute; left: 50%; top: 50%; width: 321px; height: 241px; margin: -104.5px 0 0 -160.5px;
  transform-origin: bottom center; transform-style: preserve-3d; transform: rotateX(-15deg);
  transition: transform var(--fd-dur-flap, 600ms) var(--fd-ease-flap, ease);
}
body.shell-v2 .fd-folder[data-pose="hover"] .fd-folder-flap { transform: rotateX(-45deg); }
body.shell-v2 .fd-folder[data-pose="open"] .fd-folder-flap { transform: rotateX(-55deg); }
body.shell-v2 .fd-folder-flap-svg { position: absolute; inset: 0; overflow: visible; }
body.shell-v2 .fd-folder-flap-fill { fill: var(--fd-flap); }
body.shell-v2 .fd-folder-flap-edge { fill: none; stroke: var(--fd-edge); stroke-width: calc(1.5px * 321 / var(--fd-icon, 96)); }
/* 팀 폴더 = 앞판 오른쪽 아래 사람 표시(D17). */
body.shell-v2 .fd-folder-team { position: absolute; right: 22px; bottom: 20px; color: rgba(255, 255, 255, 0.82); }

/* 줄이기 설정 — 스프링 없이 곧바로 그 자세로. */
@media (prefers-reduced-motion: reduce) {
  body.shell-v2 .fd-folder-card, body.shell-v2 .fd-folder-flap { transition: none; }
}