/* 템플릿 6 — Finder(탐색기).
 *
 * 화면 전체가 하나의 창이다. 왼쪽 목록에서 폴더를 고르면 오른쪽이 바뀐다.
 * 갤러리 묶음이 곧 폴더다 — 작가가 블록을 나눠 담은 방식이 그대로 구조가 된다.
 *
 * 색은 템플릿이 정한다(창은 창처럼 보여야 한다). 작가가 고른 색은 --accent 로만
 * 들어간다: 선택된 항목, 폴더 색조, 링크.
 */

.t6 {
  --paper: #ffffff;
  --chrome: rgba(245, 245, 247, .82);
  --ink: #1c1c1e;
  --muted: rgba(28, 28, 30, .5);
  --line: rgba(0, 0, 0, .1);
  --accent: var(--cv-accent, #007aff);
  --radius: 12px;

  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(0px, 2.2vh, 28px) clamp(0px, 2vw, 32px);
  background: #e9e9ec;
  font-family: var(--font-body);
  color: var(--ink);
}
.t6[data-mode="dark"] {
  --paper: #1c1c1e; --chrome: rgba(40, 40, 42, .82); --ink: #f2f2f7;
  --muted: rgba(242, 242, 247, .5); --line: rgba(255, 255, 255, .12);
  background: #101012;
}
.t6[data-corner="sharp"] { --radius: 0px; }
.t6[data-corner="round"] { --radius: 20px; }

/* ── 창 ─────────────────────────────────────────────────────────────── */
.t6-window {
  width: 100%; height: 100%;
  display: flex; overflow: hidden;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .22), 0 2px 8px rgba(0, 0, 0, .1);
}

/* ── 사이드바 ───────────────────────────────────────────────────────── */
.t6-side {
  width: 250px; flex: none;
  background: var(--chrome);
  backdrop-filter: blur(20px);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  overflow: hidden;
}
/* 목록은 따로 감싼다. 데스크톱에서는 세로 목록이고, 폰에서는 이 덩어리가
   통째로 둘째 줄이 되어 가로로 흐른다. */
.t6-nav { display: flex; flex-direction: column; flex: 1 1 auto;
          overflow-y: auto; padding-bottom: .8rem; }
.t6-now { display: none; }              /* 현재 위치 — 폰의 타이틀 바에서만 쓴다 */
.t6-dots { display: flex; gap: .45rem; padding: 1rem 1.1rem .85rem; flex: none; }
.t6-dots button, .t6-dots i {
  width: 12px; height: 12px; border-radius: 999px; border: 0; padding: 0; display: block;
}
.t6-dots .red { background: #ff5f57; cursor: pointer; }
.t6-dots .yellow { background: #febc2e; }
.t6-dots .green { background: #28c840; }

.t6-nav .group { padding: .85rem 1.1rem .3rem; font-size: .68rem; color: var(--muted); }
.t6-nav a, .t6-nav button.item {
  display: flex; align-items: center; gap: .55rem;
  width: calc(100% - 1rem); margin: 0 .5rem; padding: .38rem .55rem;
  border: 0; background: none; border-radius: 7px;
  font: inherit; font-size: .84rem; color: inherit; text-align: left;
  cursor: pointer; text-decoration: none;
}
.t6-nav .item:hover, .t6-nav a:hover { background: rgba(127, 127, 127, .14); }
.t6-nav .item.on { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.t6-nav .ico { width: 16px; height: 16px; flex: none; opacity: .85; }
.t6-nav .item .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 내용 ───────────────────────────────────────────────────────────── */
.t6-main { flex: 1 1 auto; min-width: 0; overflow-y: auto; padding: 1.6rem 1.8rem 3rem; }
/* 폴더를 바꿀 때 잠깐 흐려졌다 선명해진다 — 읽어오는 느낌을 만든다. */
.t6-main { transition: opacity .15s ease; }
.t6-main.loading { opacity: .25; }

.t6-crumb { font-size: .78rem; color: var(--muted); margin-bottom: 1.2rem; }
.t6-crumb b { color: var(--ink); font-weight: 600; font-family: var(--font-head); }

.t6-grid {
  display: grid; gap: 1.6rem 1.2rem;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
}
.t6-cell {
  background: none; border: 0; padding: .4rem; cursor: pointer; font: inherit;
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  color: inherit; text-decoration: none;
  border-radius: 10px;
}
.t6-cell:hover { background: rgba(127, 127, 127, .1); }
.t6-cell .art { width: 100%; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; }
.t6-cell .art img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.t6-cell .name { font-size: .78rem; line-height: 1.35; text-align: center; word-break: keep-all; }
.t6-cell .name .yr { display: block; color: var(--muted); font-size: .72rem; margin-top: .1rem; }
.t6-cell .name .dot { display: inline-block; width: 6px; height: 6px; border-radius: 999px;
                      background: var(--accent); margin-right: .3rem; }

.t6-sep { height: 1px; background: var(--line); margin: 1.6rem 0; }

/* 폴더 아이콘 — 색은 accent 를 따른다. 아이콘 팩은 모양만 바꾼다. */
.t6-folder { width: 76%; aspect-ratio: 4 / 3; border-radius: 8px; position: relative;
             background: linear-gradient(180deg,
               color-mix(in srgb, var(--accent) 78%, #fff),
               color-mix(in srgb, var(--accent) 96%, #000)); }
.t6-folder::before { content: ""; position: absolute; left: 6%; top: -12%; width: 42%; height: 16%;
                     border-radius: 6px 6px 0 0;
                     background: color-mix(in srgb, var(--accent) 70%, #fff); }
.t6[data-icons="win98"] .t6-folder {
  border-radius: 0; background: linear-gradient(180deg, #ffdf7e, #f5b301);
}
.t6[data-icons="win98"] .t6-folder::before { border-radius: 0; background: #ffe9a3; }
.t6[data-icons="y2k"] .t6-folder {
  border-radius: 14px;
  background: linear-gradient(145deg, #fff, color-mix(in srgb, var(--accent) 60%, #fff) 45%,
              color-mix(in srgb, var(--accent) 90%, #000));
  box-shadow: inset 0 2px 6px rgba(255,255,255,.7), 0 6px 14px rgba(0,0,0,.18);
}

/* 문서 아이콘 */
.t6-doc { width: 62%; aspect-ratio: 3 / 4; background: #fff; border-radius: 4px;
          box-shadow: 0 1px 4px rgba(0,0,0,.18); position: relative; overflow: hidden;
          display: flex; align-items: center; justify-content: center;
          font-size: 1.4rem; color: var(--accent); }
.t6[data-mode="dark"] .t6-doc { background: #2c2c2e; }
.t6-doc::after { content: ""; position: absolute; right: 0; top: 0; border-width: 0 14px 14px 0;
                 border-style: solid; border-color: transparent #e6e6e6 transparent transparent; }

/* ── 창(모달) ───────────────────────────────────────────────────────── */
/* display 를 껐다 켜면 닫을 때 애니메이션이 돌 틈이 없다 — 창이 툭 사라진다.
   그래서 항상 flex 로 두고 보이기/투명도만 바꾼다. visibility 는 전환이 끝난
   뒤에 꺼지도록 지연시킨다. */
.t6-modal {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; padding: 4vh 4vw;
  background: rgba(0, 0, 0, 0);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: background .24s ease, opacity .2s ease, visibility 0s linear .24s;
}
.t6-modal.open {
  background: rgba(0, 0, 0, .25);
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: background .24s ease, opacity .18s ease;
}
.t6-sheet {
  width: min(620px, 92vw); max-height: 82vh; overflow: hidden;
  background: var(--paper); border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .3);
  display: flex; flex-direction: column;
  /* 맥 창이 열릴 때의 텐션 — 살짝 작았다가 제자리보다 조금 커진 뒤 앉는다.
     닫을 때는 반대로 제자리에서 살짝 작아지며 물러난다. */
  transform: scale(.95) translateY(8px); opacity: 0;
  transition: transform .26s cubic-bezier(.175, .885, .32, 1.275), opacity .22s ease;
}
.t6-modal.open .t6-sheet { transform: none; opacity: 1; }
.t6-bar { display: flex; align-items: center; gap: .5rem; padding: .8rem 1rem;
          border-bottom: 1px solid var(--line); font-size: .82rem; flex: none; }
.t6-bar .title { font-weight: 600; font-family: var(--font-head); }
.t6-sheet .body .head { font-family: var(--font-head); font-weight: 600; }
.t6-sheet .body { padding: 1.4rem 1.6rem 2rem; overflow-y: auto; font-size: .88rem; line-height: 1.8; }
.t6-sheet .body p + p { margin-top: 1rem; }
.t6-sheet .body a { color: var(--accent); }
.t6-row { display: flex; gap: 1rem; padding: .45rem 0; }
.t6-row .y { flex: 0 0 3.2rem; color: var(--muted); font-size: .78rem; }

/* ── 라이트박스 ─────────────────────────────────────────────────────── */
.t6-light { position: fixed; inset: 0; z-index: 70; display: flex; cursor: zoom-out;
            background: rgba(0, 0, 0, .92); align-items: center; justify-content: center; padding: 5vh 5vw;
            opacity: 0; visibility: hidden; pointer-events: none;
            transition: opacity .22s ease, visibility 0s linear .22s; }
.t6-light.open { opacity: 1; visibility: visible; pointer-events: auto;
                 transition: opacity .2s ease; }
.t6-light img { max-width: 100%; max-height: 84vh; object-fit: contain;
                transform: scale(.97); transition: transform .26s cubic-bezier(.175, .885, .32, 1.275); }
.t6-light.open img { transform: none; }
.t6-light figcaption { position: absolute; left: 5vw; right: 5vw; bottom: 4vh; color: #fff;
                       font-size: .78rem; opacity: .9; display: flex; flex-direction: column; gap: .2rem; }
.t6-light figcaption .yr:empty, .t6-light figcaption .desc:empty { display: none; }
.t6-light figcaption .yr { opacity: .65; }
.t6-light figcaption .desc { opacity: .8; max-width: 46rem; line-height: 1.6; white-space: pre-line; }

/* ── 폰: 사이드바가 '두 줄 헤더'로 접힌다 ───────────────────────────
   한 줄에 신호등·현재 위치·폴더·링크를 다 넣으면 항목이 늘어날수록 반드시
   부딪힌다(갤러리 개수는 작가마다 다르다). 그래서 첫 줄은 창 이름만 두고,
   둘째 줄에 전부를 가로로 흘린다 — 몇 개가 되든 줄이 깨지지 않는다. */
@media (max-width: 760px) {
  .t6 { padding: 0; }
  .t6-window { border-radius: 0; flex-direction: column; }
  .t6-side {
    width: 100%; flex: none; border-right: 0; border-bottom: 1px solid var(--line);
  }
  .t6-dots { padding: .7rem .85rem .5rem; align-items: center; }
  .t6-now {
    /* 신호등 옆에 붙여 두면 제목인지 버튼 이름인지 애매하다. 오른쪽 끝으로
       밀어 두면 맥 창의 제목처럼 읽힌다. */
    display: block; margin-left: auto; text-align: right; min-width: 0;
    font-size: .82rem; font-weight: 600; font-family: var(--font-head);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  .t6-nav {
    flex: none; flex-direction: row; align-items: center; gap: .3rem;
    overflow-x: auto; overflow-y: hidden; padding: 0 .7rem .6rem;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .t6-nav::-webkit-scrollbar { display: none; }
  .t6-nav .group { display: none; }          /* 칩에는 묶음 이름이 필요 없다 */
  .t6-nav a, .t6-nav button.item {
    width: auto; margin: 0; flex: none; white-space: nowrap;
    padding: .34rem .68rem; border-radius: 999px; font-size: .78rem;
    background: rgba(127, 127, 127, .12);
  }
  .t6-nav .item.on { background: color-mix(in srgb, var(--accent) 18%, transparent); }
  .t6-nav .item .ico { display: none; }      /* 폴더 그림까지 붙이면 두세 개밖에 못 앉는다 */
  .t6-nav .item .label { overflow: visible; }

  .t6-main { padding: 1rem .7rem 5rem; }
  .t6-grid { grid-template-columns: repeat(auto-fill, minmax(6.6rem, 1fr)); gap: 1.2rem .8rem; }

  /* 창(모달) — 폰에서도 '창' 이다. 화면을 거의 채우되 가운데에 뜬다.
     연도 칸이 비어 있어도 3.2rem 을 차지해 글을 오른쪽으로 밀던 것은
     연도를 글 위에 올려 없앤다. */
  .t6-modal { padding: 3vh 3vw; }
  .t6-sheet { width: 94vw; max-width: none; max-height: 86vh; }
  .t6-sheet .body { padding: 1.1rem 1rem 2rem; }
  .t6-row { display: block; padding: .4rem 0; }
  .t6-row .y { display: block; flex: none; margin-bottom: .1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .t6-main, .t6-sheet, .t6-modal, .t6-light, .t6-light img { transition: none; }
}