/* uinvited — 템플릿 고르기 */

/* ---------- 고르는 화면 ---------- */

.picker {
  position: fixed; inset: 0; z-index: 110;
  background: var(--bg);
  overflow-y: auto;
  animation: picker-in .25s ease;
}
.picker[hidden] { display: none; }
@keyframes picker-in { from { opacity: 0; transform: translateY(8px); } }

.picker__head {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface); border-bottom: 1px solid var(--line);
  padding: 16px 20px 12px;
}
.picker__title {
  max-width: 1080px; margin: 0 auto 12px;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.picker__title h1 { font-family: var(--font-display); font-size: var(--fs-heading2); letter-spacing: var(--ls-heading2); margin: 0; }
.picker__title p {
  margin: 0; font-size: var(--fs-label2); letter-spacing: var(--ls-label2); color: var(--ink-2);
  /* 좁은 화면에서 세로로 길쭉하게 짜부라지지 않도록 아예 줄을 바꾼다 */
  flex: 1 1 240px; min-width: 240px;
}
.picker__close {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  border-radius: var(--radius-sm); padding: 7px 13px; font-size: var(--fs-label2); letter-spacing: var(--ls-label2); cursor: pointer;
}

.picker__filters {
  max-width: 1080px; margin: 0 auto;
  display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px;
  scrollbar-width: thin;
}
.picker__filters button {
  flex: none; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink-2);
  border-radius: 999px; padding: 6px 13px; font-size: var(--fs-label2); letter-spacing: var(--ls-label2);
}
.picker__filters button.is-on {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600;
}

.picker__grid {
  max-width: 1080px; margin: 0 auto; padding: 20px;
  display: grid; gap: 16px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 620px) { .picker__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .picker__grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- 템플릿 카드 ---------- */

.tplc {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); overflow: hidden; cursor: pointer;
  padding: 0; text-align: left; width: 100%; font: inherit; color: inherit;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.tplc:hover { transform: translateY(-2px); border-color: var(--ink-3); box-shadow: var(--shadow); }
.tplc:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tplc.is-on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }

.tplc__paper {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  aspect-ratio: 3 / 4; position: relative; overflow: hidden; padding: 14px;
  background-color: var(--bg);
}
.tplc__paper.has-photo { padding: 0; justify-content: flex-end; }

.tplc__frame {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  border: 1px solid var(--accent); padding: 14px 10px; width: 100%;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
}
.tplc__paper.has-photo .tplc__frame { border: 0; background: none; padding: 12px 10px; }

.tplc__kind {
  font-size: var(--fs-caption2); letter-spacing: var(--ls-caption2); letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); font-weight: 700;
}
.tplc__title {
  font-family: var(--font-display); font-size: var(--fs-label2); letter-spacing: var(--ls-label2); font-weight: 700;
  color: var(--ink); text-align: center; line-height: 1.35; word-break: keep-all;
}
.font-sans .tplc__title { font-family: var(--font-body); }
.tplc__rule { width: 22px; height: 1px; background: var(--accent); opacity: .5; }
.tplc .orn { width: 42px; height: 13px; color: var(--accent); opacity: .65; }
.tplc__over .orn { color: #fff; opacity: .8; }
.tplc__meta { font-size: var(--fs-caption2); letter-spacing: var(--ls-caption2); color: var(--ink-2); text-align: center; }

.tplc__photo {
  display: block; width: 100%;
  background-size: cover; background-position: center;
  background-color: color-mix(in srgb, var(--accent) 55%, #8d8378);
  background-image:
    linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 26%, #ffffff) 0%,
      color-mix(in srgb, var(--accent) 68%, #8d8378) 55%,
      color-mix(in srgb, var(--accent) 82%, #2b2723) 100%);
}
.tplc__photo--overlay { position: absolute; inset: 0; }
.tplc__photo--circle {
  width: 52px; height: 52px; border-radius: 50%;
  margin: 0 auto 8px; border: 2px solid var(--surface);
}
.tplc__photo--below { height: 42%; margin-top: 10px; }
.tplc__paper.has-photo .tplc__photo--circle,
.tplc__paper.has-photo .tplc__photo--below { position: static; }

.tplc__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,8,6,.85) 0%, rgba(10,8,6,.35) 55%, rgba(10,8,6,.1) 100%);
}
.tplc__over {
  position: relative; z-index: 2; width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 10px;
}
.tplc__over .tplc__title, .tplc__over .tplc__meta { color: #fff; }
.tplc__over .tplc__kind { color: rgba(255,255,255,.85); }
.tplc__over .tplc__rule { background: rgba(255,255,255,.7); }

.tplc__label {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 11px; border-top: 1px solid var(--line);
}
.tplc__name { font-size: var(--fs-label2); letter-spacing: var(--ls-label2); font-weight: 600; flex: 1; }
.tplc__kindtag { font-size: var(--fs-caption2); letter-spacing: var(--ls-caption2); color: var(--ink-3); }

/* 빈 화면에서 시작 */
.tplc--blank .tplc__paper {
  border: 1.5px dashed var(--line); background: var(--bg);
  gap: 6px; color: var(--ink-3);
}
.tplc--blank .tplc__paper span { font-size: var(--fs-caption1); letter-spacing: var(--ls-caption1); }
.tplc--blank .tplc__paper .big { font-size: var(--fs-title3); letter-spacing: var(--ls-title3); }

/* ---------- 랜딩에 얹는 템플릿 줄 ---------- */

.tpl-strip {
  display: grid; gap: 14px;
  grid-template-columns: repeat(2, 1fr);
  max-width: 720px; margin: 0 auto;
}
@media (min-width: 620px) { .tpl-strip { grid-template-columns: repeat(4, 1fr); } }
.tpl-strip .tplc { cursor: pointer; text-decoration: none; display: block; }

/* 데모 줄 — 종류가 많아 한 줄에 다섯 장씩 */
.tpl-strip--wide { max-width: 100%; }
@media (min-width: 620px)  { .tpl-strip--wide { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 860px)  { .tpl-strip--wide { grid-template-columns: repeat(5, 1fr); } }
.tplc__desc {
  display: block; padding: 0 11px 11px; margin-top: -3px;
  font-size: var(--fs-caption2); letter-spacing: var(--ls-caption2); line-height: 1.55; color: var(--ink-3); word-break: keep-all;
}
.tpl-strip--wide .tplc__label { border-top: 0; padding-bottom: 2px; }

/* 사진을 크게 쓰는 배치의 카드 미리보기 */
.tplc__poster {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 100%; height: 100%; padding: 12px 10px; justify-content: center;
}
.tplc__poster .tplc__photo { flex: 0 1 auto; min-height: 0; }
.tplc__photo--poster, .tplc__photo--filmstrip { aspect-ratio: 1; width: 100%; }
.tplc__photo--filmstrip { aspect-ratio: 3 / 2; border-block: 3px solid #15130f; }
.tplc__photo--magazine { position: absolute; inset: 0; }

.tplc__diary {
  display: flex; flex-direction: column; gap: 5px;
  width: 100%; padding: 9px;
}
.tplc__diaryhead { display: flex; gap: 4px; }
.tplc__diaryhead i {
  flex: 1; height: 11px; border: 1px solid var(--ink-3); border-radius: 2px;
}
.tplc__diaryhead i:last-child { flex: 0 0 34%; }
.tplc__photo--diary {
  aspect-ratio: 4 / 3; border: 1px solid var(--ink-3); border-radius: 2px;
}
.tplc__diarypaper {
  display: block; border: 1px solid var(--ink-3); border-radius: 2px;
  padding: 7px 6px; min-height: 40px;
  background: repeating-linear-gradient(to bottom,
    transparent 0 12px, color-mix(in srgb, var(--ink-3) 34%, transparent) 12px 13px);
}
.tplc__paper.has-photo .tplc__poster,
.tplc__paper.has-photo .tplc__diary { padding: 10px 9px; }