/* 소원권 — 글씨는 고풍스럽게(명조 · 넓은 자간 · 증서 배치),
   재질은 파스텔 홀로그램 카드. 손에 든 것처럼 팔랑거린다. */

:root {
  /* 라틴·숫자는 New York(ui-serif), 한글은 애플명조. 글리프 단위로 골라 쓰인다. */
  --font-classic: ui-serif, "New York", Georgia, "AppleMyungjo",
                  "Apple SD Gothic Neo", serif;
  --card: #FFFCFE;
  --ink-deep: #4A3A55;
  --ink-mid: rgba(74, 58, 85, .62);
  --edge: #C9A6DC;
  --seal: #D64070;
}

.tk-float {
  perspective: 900px;
}

.ticket {
  position: relative;
  width: min(100%, 330px);
  padding: 36px 26px 60px;
  border-radius: 8px;
  background: var(--card);
  color: var(--ink-deep);
  font-family: var(--font-classic);
  text-align: center;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 18px 34px -18px rgba(120, 80, 140, .45),
    0 2px 8px rgba(120, 80, 140, .14);
  /* 종이가 아니라 카드다 — 빛을 받으며 천천히 팔랑거린다 */
  animation: flutter 6.5s ease-in-out infinite;
  transform-origin: 50% 60%;
}

/* ── 홀로그램 결 ────────────────────────── */

.tk-holo {
  position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(112deg,
      rgba(255, 255, 255, .5) 0 1.5px, rgba(255, 255, 255, 0) 1.5px 4px),
    linear-gradient(112deg,
      #FFB8DF 0%, #FFDCB4 12%, #CFF3BE 24%, #AEE7F7 37%,
      #C6B9FA 50%, #F7B8EE 63%, #FFCEB2 76%, #BCEFDE 88%, #FFB8DF 100%);
  background-size: 100% 100%, 240% 100%;
  mix-blend-mode: multiply;
  opacity: .92;
  animation: holoShift 9s ease-in-out infinite alternate;
}

/* 각도가 바뀌면 빛이 한 번 훑고 지나간다 */
.ticket::after {
  content: ""; position: absolute; inset: -30%; pointer-events: none;
  background: linear-gradient(102deg,
    transparent 40%, rgba(255, 255, 255, .72) 50%, transparent 60%);
  transform: translateX(-100%);
  animation: sheen 6.5s ease-in-out infinite;
}

@keyframes holoShift {
  0% { background-position: 0 0, 0% 50%; }
  100% { background-position: 0 0, 100% 50%; }
}
@keyframes sheen {
  0%, 30% { transform: translateX(-100%); }
  62%, 100% { transform: translateX(100%); }
}
@keyframes flutter {
  0%, 100% { transform: rotateZ(-.9deg) rotateY(-4.5deg) translateY(2px); }
  50% { transform: rotateZ(.9deg) rotateY(4.5deg) translateY(-5px); }
}

/* ── 무지갯빛 테두리 ────────────────────── */

.tk-frame {
  position: absolute; inset: 11px; border-radius: 4px; pointer-events: none;
  padding: 1.6px;
  background: linear-gradient(118deg, #FFAFD8, #FFD3A8, #B9EBD2, #A9DCF2, #C9BCF5, #FFAFD8);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.tk-frame::after {
  content: ""; position: absolute; inset: 3.5px;
  border: .5px solid var(--edge); opacity: .5; border-radius: 2px;
}

.tk-corners { position: absolute; inset: 11px; pointer-events: none; color: var(--edge); }
.tk-corners svg { position: absolute; width: 22px; height: 22px; }
.tk-corners svg:nth-child(1) { top: 3px; left: 3px; }
.tk-corners svg:nth-child(2) { top: 3px; right: 3px; transform: scaleX(-1); }
.tk-corners svg:nth-child(3) { bottom: 3px; left: 3px; transform: scaleY(-1); }
.tk-corners svg:nth-child(4) { bottom: 3px; right: 3px; transform: scale(-1); }

/* ── 글자 (여기가 고풍스러운 부분) ───────── */

.tk-eyebrow {
  font-size: 11px;
  letter-spacing: .46em;
  text-indent: .46em;          /* 자간 때문에 오른쪽으로 밀리는 걸 되돌린다 */
  color: #8E62A8;
  margin-bottom: 18px;
  position: relative;
}

.tk-title {
  font-family: var(--font-classic);
  font-size: 43px;
  font-weight: 400;            /* 명조는 굵게 하지 않아야 격이 산다 */
  line-height: 1.1;
  letter-spacing: .26em;
  text-indent: .26em;
  color: var(--ink-deep);
  position: relative;
}

.tk-rule {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin: 17px auto 21px; width: 66%; color: var(--edge);
  position: relative;
}
.tk-rule i { flex: 1; height: 1px; background: currentColor; opacity: .75; }
.tk-rule svg { width: 22px; height: 12px; flex: none; }

.tk-body {
  font-size: 12.5px;
  line-height: 2.15;
  letter-spacing: .04em;
  color: var(--ink-mid);
  position: relative;
}

/* 소원을 적는 칸 — 증서의 빈칸처럼 점선 위에 쓴다 */
.tk-wish {
  margin: 28px 4px 30px;
  padding-bottom: 11px;
  border-bottom: 1.5px dotted rgba(74, 58, 85, .34);
  min-height: 50px;
  display: grid;
  place-items: center;
  position: relative;
}
.tk-wish-text {
  font-size: 15px;
  letter-spacing: .02em;
  color: rgba(74, 58, 85, .34);
  line-height: 1.6;
}
.tk-wish.is-written .tk-wish-text { font-size: 20px; color: var(--ink-deep); }

.tk-input {
  width: 100%; border: none; outline: none; background: none;
  font: inherit; font-size: 20px; text-align: center; color: var(--ink-deep);
  letter-spacing: .02em;
}
.tk-input::placeholder { color: rgba(74, 58, 85, .3); font-size: 15px; }

.tk-foot { display: flex; flex-direction: column; gap: 7px; position: relative; }
.tk-date { font-size: 11.5px; letter-spacing: .1em; color: var(--ink-mid); }
.tk-sign { font-size: 12.5px; letter-spacing: .14em; color: var(--ink-deep); }

.tk-no {
  position: absolute; top: 20px; right: 22px;
  font-size: 9px; letter-spacing: .18em; color: #8E62A8;
  font-variant-numeric: tabular-nums;
}

/* 도장 */
.tk-seal {
  position: absolute; right: 24px; bottom: 15px;
  width: 40px; height: 40px; border-radius: 5px;
  background: linear-gradient(150deg, #ED6392, var(--seal));
  color: #FFF6FA;
  display: grid; place-items: center;
  transform: rotate(-7deg);
  box-shadow: 0 2px 5px rgba(190, 80, 120, .35);
}
.tk-seal span { font-size: 13px; line-height: 1.15; letter-spacing: .04em; }

/* 아직 모으는 중 — 디자인은 그대로 두고, 날짜 대신 하트 줄과 흐린 도장으로만 구분한다 */
.ticket.is-draft .tk-seal { opacity: .3; }
.ticket.is-draft .tk-no { opacity: .5; }

.tk-hearts { display: flex; justify-content: center; gap: 6px; }
.tk-hearts i { display: block; width: 17px; height: 16px; }
.tk-h { width: 100%; height: 100%; display: block; fill: rgba(74, 58, 85, .13); }
.tk-hearts i.on .tk-h {
  fill: url(#tkHeart);
  filter: drop-shadow(0 1px 1.5px rgba(214, 64, 112, .3));
}
.tk-count {
  font-size: 10.5px; letter-spacing: .1em; color: var(--ink-mid); margin-top: 3px;
}

/* 사용 완료 소인 */
.tk-cancel { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.tk-cancel span {
  font-size: 24px; letter-spacing: .18em; color: rgba(180, 42, 88, .78);
  border: 3px double rgba(180, 42, 88, .78);
  border-radius: 6px; padding: 7px 18px;
  transform: rotate(-13deg);
}
.ticket.is-used .tk-wish-text { color: var(--ink-mid); }

/* 소인이 찍히는 순간 */
.tk-cancel.is-stamping span { animation: cancelHit .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes cancelHit {
  0% { transform: rotate(-13deg) scale(2.6); opacity: 0; }
  55% { transform: rotate(-13deg) scale(.94); opacity: 1; }
  100% { transform: rotate(-13deg) scale(1); }
}

/* 소원을 적는 동안에는 흔들리지 않는다 */
.ticket:has(.tk-input) { animation: none; transform: none; }