/* 템플릿 1 — 가상 바탕화면.
 *
 * 스크롤이 없는 100vh 안에서 아이콘을 끌고 창을 여는 OS 은유.
 * 드래그는 데스크톱에서만 산다. 폰에서는 손가락으로 끌면 페이지가 움직여야 할지
 * 아이콘이 움직여야 할지 모호해지고, 결국 둘 다 어색해진다. 그래서 좁은 화면은
 * 아이콘을 가운데 정렬하고 창을 90vw 팝업으로 강제한다.
 */

.t1 {
  --chrome: #f6f6f6;
  --chrome-fg: #1a1a1a;
  --win-bg: #ffffff;
  --win-radius: 12px;
  --shadow: 0 24px 70px rgba(0, 0, 0, .3);
  position: fixed; inset: 0; overflow: hidden;
  font-family: var(--font-body);
  color: #fff;
}
.t1[data-os="win"] {
  --chrome: #c0c0c0;
  --chrome-fg: #000;
  --win-radius: 0;
  --shadow: 4px 4px 0 rgba(0, 0, 0, .35);
  font-family: var(--font-mono, ui-monospace, monospace);
}
.t1[data-modalbg="translucent"] { --win-bg: rgba(255, 255, 255, .82); }

/* ── 배경 ───────────────────────────────────────────────────────────── */
.t1-bg { position: absolute; inset: 0; z-index: 0; background: var(--bg); }
.t1-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.t1-bg::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .12); }

/* ── 메뉴바 ─────────────────────────────────────────────────────────── */
.t1-menubar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; gap: 1.1rem;
  padding: .32rem .8rem;
  background: color-mix(in srgb, var(--chrome) 92%, transparent);
  color: var(--chrome-fg);
  font-size: .74rem;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, .12);
}
.t1-menubar .brand { font-weight: 800; font-family: var(--font-head) }
.t1-menubar .m {
  opacity: .7; background: none; border: 0; color: inherit; font: inherit;
  cursor: pointer; padding: 0; text-decoration: none;
}
.t1-menubar .m:hover { opacity: 1 }
.t1-menubar .clock { margin-left: auto; font-variant-numeric: tabular-nums; opacity: .8 }

/* ── 아이콘 ─────────────────────────────────────────────────────────── */
.t1-icon {
  position: absolute; z-index: 10;
  width: 6.2rem; padding: .4rem;
  background: none; border: 0; color: #fff; font: inherit;
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
  cursor: grab; user-select: none; -webkit-user-select: none;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
  touch-action: none;
}
.t1-icon.dragging { cursor: grabbing; z-index: 50 }
.t1-icon .art {
  width: 3.6rem; height: 3.6rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.1rem; line-height: 1;
  background: rgba(255, 255, 255, .92); color: #222;
  border-radius: .7rem; overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
}
.t1[data-os="win"] .t1-icon .art { border-radius: 0 }
.t1-icon .art img { width: 100%; height: 100%; object-fit: cover }
.t1-icon .label { font-size: .7rem; line-height: 1.3; max-width: 100%;
                  white-space: nowrap; overflow: hidden; text-overflow: ellipsis }

/* ── 스티키 노트 ────────────────────────────────────────────────────── */
.t1-note {
  position: absolute; z-index: 12;
  width: min(19rem, 42vw); padding: 1.2rem 1.25rem;
  /* 글이 한 줄이면 납작한 띠가 되어 포스트잇으로 보이지 않는다. 종이 한 장의
     최소 크기를 정해 둔다 — 짧게 적어도 붙여 둔 쪽지처럼 보이게. */
  min-height: 13rem;
  background: #fdf3a7; color: #1a1a1a;
  font-size: .8rem; line-height: 1.7; white-space: pre-line; word-break: keep-all;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .25);
  cursor: grab; touch-action: none;
  max-height: 42vh; overflow: hidden;
  /* 종이의 접힌 귀퉁이 — 큰 여백이 생기니 그 자리에 결을 하나 준다. */
  background-image: linear-gradient(135deg, transparent calc(100% - 1.4rem),
                                    rgba(0, 0, 0, .12) calc(100% - 1.4rem));
}
/* 넓은 화면에서는 조금 더 큰 종이. 바탕이 넓어 작은 쪽지는 묻힌다. */
@media (min-width: 1024px) {
  .t1-note { width: min(21rem, 34vw); min-height: 15rem; font-size: .84rem; }
}

/* ── 창 ─────────────────────────────────────────────────────────────── */
/* display 를 껐다 켜면 닫힐 때 애니메이션이 돌 틈이 없다 — 창이 툭 사라진다.
   보이기/투명도만 바꾸고, visibility 는 전환이 끝난 뒤에 꺼지도록 미룬다. */
.t1-win {
  position: absolute; z-index: 30;
  width: min(760px, 78vw); max-height: 76vh;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: scale(.97);
  transition: opacity .18s ease, transform .2s cubic-bezier(.2,.9,.3,1.2),
              visibility 0s linear .2s;
  background: var(--win-bg); color: #141414;
  border-radius: var(--win-radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  backdrop-filter: blur(12px);
}
.t1-win.open { opacity: 1; visibility: visible; pointer-events: auto; transform: none;
                transition: opacity .18s ease, transform .2s cubic-bezier(.2,.9,.3,1.2); }
.t1-win.front { z-index: 45 }

.t1-titlebar {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem .8rem;
  background: var(--chrome); color: var(--chrome-fg);
  border-bottom: 1px solid rgba(0, 0, 0, .12);
  font-size: .76rem; cursor: grab; user-select: none; touch-action: none;
}
.t1-titlebar .title { font-family: var(--font-head) }
.t1-titlebar .dots { display: flex; gap: .38rem }
.t1-titlebar .dots i,
.t1-titlebar .dots .dot-close {
  width: 11px; height: 11px; border-radius: 999px; display: block; border: 0; padding: 0;
}
.t1-titlebar .dots .dot-close { background: #ff5f57; cursor: pointer }
.t1-titlebar .dots .dot-close:hover { filter: brightness(.85) }
.t1-titlebar .dots i:nth-child(2) { background: #febc2e }
.t1-titlebar .dots i:nth-child(3) { background: #28c840 }
.t1[data-os="win"] .t1-titlebar { background: #000080; color: #fff }
.t1[data-os="win"] .t1-titlebar .dots { display: none }
.t1-titlebar .title { font-weight: 600 }
.t1-titlebar .x { margin-left: auto; background: none; border: 0; color: inherit;
                  font: inherit; cursor: pointer; opacity: .6; padding: 0 .2rem }
.t1[data-os="win"] .t1-titlebar .x { background: #c0c0c0; color: #000; opacity: 1;
                                     border: 2px outset #fff; line-height: 1; padding: 0 .35rem }
.t1-titlebar .x:hover { opacity: 1 }

.t1-body { padding: 1.4rem 1.6rem 1.8rem; overflow-y: auto; font-size: .84rem; line-height: 1.8 }

/* 이력: 왼쪽 라벨, 오른쪽 내용 (레퍼런스의 About me 창) */
.t1-sec { display: grid; grid-template-columns: 8rem 1fr; gap: 1.2rem;
          padding: 1rem 0; border-top: 1px solid rgba(0, 0, 0, .12) }
.t1-sec:first-child { border-top: 0; padding-top: 0 }
.t1-sec h3 { font-size: .76rem; opacity: .55; font-weight: 600;
              font-family: var(--font-head) }
.t1-sec .r { display: flex; gap: .8rem; padding: .22rem 0 }
.t1-sec .r .y { flex: 0 0 3rem; opacity: .5; font-size: .74rem }
.t1-body a { color: var(--accent) }

/* 폴더 창: 썸네일 그리드 */
.t1-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 1.1rem }
.t1-grid figure { font-size: .7rem; opacity: .8 }
.t1-grid img { width: 100%; height: 7rem; object-fit: cover; display: block;
               background: #eee; border-radius: calc(var(--win-radius) / 2); cursor: zoom-in }
.t1-grid img:hover { opacity: .88 }
.t1-grid figcaption { margin-top: .4rem; line-height: 1.4 }

/* ── 하단 텍스트 ────────────────────────────────────────────────────── */
.t1-foot {
  position: absolute; left: 0; right: 0; bottom: 20px; z-index: 20;
  text-align: center; font-size: .72rem; color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
  pointer-events: none;
}
.t1-foot a { color: #fff; pointer-events: auto }

/* ── 모바일: 드래그 없음, 가운데 정렬, 90vw 팝업 ────────────────────── */
@media (max-width: 720px) {
  .t1-desk {
    position: absolute; inset: 3.2rem 0 6rem; z-index: 10;
    display: flex; flex-wrap: wrap; align-content: center; justify-content: center;
    gap: 1.6rem 1.2rem; padding: 1rem;
    overflow-y: auto;
  }
  .t1-icon { position: static !important; width: 5.4rem; cursor: pointer }
  .t1-note { position: static !important; width: 86vw; min-height: 9rem;
             max-height: 30vh; cursor: default }
  .t1-win { width: 90vw; max-height: 78vh; left: 5vw !important; top: 11vh !important }
  .t1-titlebar { cursor: default }
}

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

/* ── 작품 크게 보기 ─────────────────────────────────────────────────── */
.t1-lightbox {
  position: fixed; inset: 0; z-index: 90; display: flex;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, visibility 0s linear .2s;
  background: rgba(0, 0, 0, .9);
  align-items: center; justify-content: center; padding: 5vh 5vw;
  cursor: zoom-out;
}
.t1-lightbox.open { opacity: 1; visibility: visible; pointer-events: auto;
                     transition: opacity .2s ease; }
.t1-lightbox img { max-width: 100%; max-height: 84vh; object-fit: contain }
.t1-lightbox figcaption { position: absolute; left: 5vw; bottom: 4vh; color: #fff;
                          font-size: .78rem; opacity: .85 }

/* 폰에서는 포스트잇을 감춘다. 아이콘과 겹쳐 화면 절반을 덮는다. */
@media (max-width: 720px) {
  .t1-note { display: none }
}

/* ── 좁은 화면 ────────────────────────────────────────────────────────
 * 메뉴 다섯 개와 긴 날짜가 한 줄에 들어가지 않아 서로 겹쳤다. 이름과 About 만
 * 남기고 양 끝으로 민다 — 나머지는 바탕화면 아이콘으로 이미 갈 수 있다.
 */
@media (max-width: 720px) {
  .t1-menubar { gap: .5rem; }
  .t1-menubar .clock { display: none; }
  .t1-menubar .m { display: none; }
  .t1-menubar .m[data-open="t1-about"] { display: inline; margin-left: auto; }

  /* 창 안의 '라벨 | 내용' 2단은 폰에서 좌우가 심하게 기운다. 라벨을 위로 올려
     위에서 아래로 읽히게 한다. */
  .t1-sec { grid-template-columns: 1fr; gap: .35rem; }
  .t1-sec h3 { font-size: .7rem; letter-spacing: .04em; }
  .t1-sec .r { gap: .5rem; }
  .t1-sec .r .y { flex: 0 0 2.6rem; }

  .t1-win { max-height: 74vh; }
  .t1-body { padding: 1rem 1.1rem 1.4rem; }
  .t1-foot { bottom: 4.2rem; }   /* 협업 버튼과 겹치지 않게 */
}