/* 템플릿 3 — 다크 런처 & 글래스모피즘.
 *
 * 색은 템플릿이 정한다(다크 또는 반전한 라이트). 작가가 고른 색은 포인트로만
 * 쓴다 — 배경색까지 따라가면 '까만 화면 한가운데 아이콘' 이라는 컨셉이 무너진다.
 *
 * 갤러리 스내핑은 CSS scroll-snap 만으로 만든다. 스크롤을 JS 로 가로채면
 * 트랙패드·터치·휠이 제각각 달라 어느 하나는 반드시 어색해진다.
 */

.t3 {
  --ink: #ededed;
  --paper: #111111;
  --line: rgba(255, 255, 255, .16);
  --glass: rgba(255, 255, 255, .08);
  --blur: 14px;
  position: fixed; inset: 0; overflow: hidden;
  background: var(--paper); color: var(--ink);
  font-family: var(--font-body);
}
.t3[data-mode="light"] {
  --ink: #141414; --paper: #f4f3f0;
  --line: rgba(0, 0, 0, .14);
  --glass: rgba(255, 255, 255, .55);
}
.t3[data-glass="soft"]   { --blur: 6px; }
.t3[data-glass="strong"] { --blur: 26px; }

/* ── GNB ────────────────────────────────────────────────────────────── */
.t3-gnb {
  position: absolute; top: 20px; left: 20px; right: 20px; z-index: 20;
  display: flex; gap: 1rem; align-items: baseline;
  font-size: .74rem;
}
.t3-gnb .name { font-family: var(--font-head); font-weight: 700; }
.t3-gnb a { color: inherit; opacity: .65; text-decoration: underline;
            text-underline-offset: .22em; }
.t3-gnb a:hover { opacity: 1; }
.t3-gnb .invert { margin-left: auto; background: none; border: 0; color: inherit;
                  font: inherit; opacity: .45; cursor: pointer; }
.t3-gnb .invert:hover { opacity: 1; }

/* ── 런처 ───────────────────────────────────────────────────────────── */
.t3-launcher {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  gap: 3.2rem; flex-wrap: wrap; padding: 6rem 2rem;
}
.t3-icon {
  background: none; border: 0; color: inherit; font: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  width: 7rem; padding: .5rem;
  transition: transform .18s cubic-bezier(.2, .7, .3, 1);
}
.t3-icon:hover { transform: translateY(-4px); }
.t3-icon .art {
  width: 5rem; height: 5rem; border-radius: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--glass);
  border: 1px solid var(--line);
  backdrop-filter: blur(var(--blur));
  overflow: hidden;
}
.t3-icon .art img { width: 100%; height: 100%; object-fit: cover; }
.t3-icon .art span { font-size: 1.7rem; opacity: .85; }
.t3-icon .label { font-size: .74rem; opacity: .75; letter-spacing: -.01em;
                  max-width: 100%; white-space: nowrap; overflow: hidden;
                  text-overflow: ellipsis; }
.t3-icon .dot { width: 5px; height: 5px; border-radius: 999px; background: var(--accent); }

/* ── 글래스 창 ──────────────────────────────────────────────────────── */
.t3-win {
  position: absolute; z-index: 40;
  left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.97);
  width: min(760px, 92vw); max-height: 84vh; overflow: hidden;
  /* display 로 여닫으면 닫힐 때 전환이 돌지 않는다 — 창이 툭 사라진다. */
  display: flex; flex-direction: column;
  visibility: hidden; pointer-events: none;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 14px;
  backdrop-filter: blur(var(--blur)) saturate(160%);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .45);
  opacity: 0;
  transition: opacity .18s ease, transform .18s cubic-bezier(.2, .7, .3, 1),
              visibility 0s linear .18s;
}
.t3-win.open { opacity: 1; visibility: visible; pointer-events: auto;
               transform: translate(-50%, -50%) scale(1);
               transition: opacity .18s ease, transform .18s cubic-bezier(.2, .7, .3, 1); }

.t3-bar {
  display: flex; align-items: center; gap: .5rem;
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--line);
  font-size: .74rem;
}
.t3-bar .dots { display: flex; gap: .4rem; }
.t3-bar .dots i { width: 11px; height: 11px; border-radius: 999px; display: block; }
.t3-bar .dots i:nth-child(1) { background: #ff5f57 }
.t3-bar .dots i:nth-child(2) { background: #febc2e }
.t3-bar .dots i:nth-child(3) { background: #28c840 }
.t3-bar .title { opacity: .8; margin-left: .3rem; }
.t3-bar .x { margin-left: auto; background: none; border: 0; color: inherit;
             font: inherit; opacity: .5; cursor: pointer; }
.t3-bar .x:hover { opacity: 1 }

.t3-body { padding: 1.4rem 1.5rem 2rem; overflow-y: auto; }
/* 레퍼런스의 1:2 — 왼쪽에 라벨, 오른쪽에 내용. */
.t3-sec { display: grid; grid-template-columns: 1fr 2fr; gap: 1.5rem;
          padding: 1.1rem 0; border-top: 1px solid var(--line); }
.t3-sec:first-child { border-top: 0; padding-top: 0 }
.t3-sec h3 { font-family: var(--font-head); font-size: .78rem; font-weight: 700; opacity: .75 }
.t3-sec .content { font-size: .84rem; line-height: 1.75; white-space: pre-line; word-break: keep-all }
.t3-sec .r { display: flex; gap: .9rem; padding: .3rem 0; font-size: .82rem }
.t3-sec .r .y { flex: 0 0 3rem; opacity: .5; font-size: .74rem }
.t3-sec a { color: var(--accent) }

/* ── 풀스크린 갤러리 ────────────────────────────────────────────────── */
.t3-gallery {
  position: fixed; inset: 0; z-index: 60; display: none;
  background: var(--paper);
  overflow-y: auto; overscroll-behavior: contain;
  scroll-snap-type: y mandatory;
}
.t3[data-snap="off"] .t3-gallery { scroll-snap-type: none; }
.t3-gallery.open { display: block; }
.t3-shot {
  height: 100vh; height: 100dvh;
  scroll-snap-align: start; scroll-snap-stop: always;
  display: flex; align-items: center; justify-content: center;
  padding: 6vh 6vw;
}
.t3-shot img { max-width: 100%; max-height: 88vh; object-fit: contain; }
/* 캡션은 왼쪽 아래 'Powered by INVITE' 배지를 피해 앉는다. 겹치면 앞쪽
   글자가 통째로 가려지는데, 출처나 이용 조건을 적어 둔 캡션이라면 그건
   못 읽는 정도가 아니라 표시하지 않은 것이 된다. */
.t3-cap {
  position: fixed; left: 9.5rem; right: 5rem; bottom: 24px; z-index: 2;
  font-size: .76rem; opacity: .7;
}
.t3-count { position: fixed; right: 24px; bottom: 24px; z-index: 2;
            font-size: .72rem; opacity: .45; font-variant-numeric: tabular-nums }
.t3-close-g { position: fixed; top: 20px; right: 20px; z-index: 3;
              background: none; border: 0; color: var(--ink); font: inherit;
              opacity: .6; cursor: pointer }
.t3-close-g:hover { opacity: 1 }

/* ── 모바일 ─────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .t3-launcher { gap: 2rem 2.5rem; align-content: center; }
  .t3-icon { width: 5.5rem }
  .t3-icon .art { width: 4.2rem; height: 4.2rem }
  .t3-win { width: 94vw; max-height: 88vh }
  .t3-sec { grid-template-columns: 1fr; gap: .4rem }
  .t3-gnb { font-size: .7rem }
  .t3-cap { left: 24px; right: 24px; bottom: 4.6rem }   /* 협업 버튼·배지 위로 */
  .t3-shot { padding: 8vh 4vw }
}

@media (prefers-reduced-motion: reduce) {
  .t3-icon, .t3-win { transition: none }
}