/* ------------------------------------------------------------------
   persona: 페르소나 게임 UI 맛 — 기울어진 슬랩, 삐뚤게 오려낸 스티커, 대각선 줄무늬.
   과하다 싶으면 index.html에서 이 파일 링크만 빼면 원래 모습으로 돌아간다.
   ------------------------------------------------------------------ */
:root {
  --p5-cut: polygon(2% 0, 100% 4%, 98% 100%, 0 95%);
  --p5-cut-2: polygon(0 5%, 97% 0, 100% 93%, 3% 100%);
  --p5-cut-3: polygon(1% 2%, 99% 0, 100% 97%, 2% 100%);
}
html, body { overflow-x: clip; }

/* 네비: 호버·현재 메뉴 뒤에 기울어진 빨간 슬랩 */
.site-nav a { isolation: isolate; }
.site-nav a::after { display: none; }
.site-nav a::before {
  content: ""; position: absolute; inset: 1px -9px; z-index: -1;
  background: var(--accent); clip-path: var(--p5-cut);
  transform: skewX(-14deg) scaleX(0); transform-origin: left center;
  transition: transform var(--fast) var(--ease);
}
.site-nav a:hover::before, .site-nav a[aria-current="page"]::before { transform: skewX(-14deg) scaleX(1); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--accent-fg); }
@media (max-width: 899px) {
  .site-nav a::before { display: none; }
  .site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--accent); }
}

/* 스티커: 빨간 라벨은 삐뚤게 오려낸 종이처럼 */
.tag--accent, .poster__num, .frame__num, .handout__label, .char-art__tag, .hero__art-tag { clip-path: var(--p5-cut); }
.tag--accent, .frame__num, .hero__art-tag { transform: rotate(-2deg); }
.poster__num { transform: rotate(-3deg); }
.poster:nth-child(even) .poster__num { transform: rotate(2.5deg); }
.bar--accent { clip-path: polygon(var(--notch) 0, calc(100% - var(--notch)) 2%, 100% 50%, calc(100% - var(--notch)) 100%, var(--notch) 97%, 0 50%); }

/* 버튼: 호버 때 살짝 기울고 그림자가 튄다 */
.btn { transition: background var(--fast), color var(--fast), transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.btn:hover { transform: skewX(-7deg) translate(-1px, -1px); box-shadow: 3px 3px 0 var(--accent); }
.btn--accent:hover, .sec--accent .btn:hover { box-shadow: 3px 3px 0 var(--ink); }
.btn:active { transform: skewX(-7deg) translate(1px, 1px); box-shadow: none; }

/* 섹션 제목: 아랫줄 왼쪽에 기울어진 슬랩 */
.sec-head { isolation: isolate; }
.sec-head__title { position: relative; display: inline-block; }
.sec-head__title::before {
  content: ""; position: absolute; left: -.14em; width: 62%; bottom: -.02em; height: .5em; z-index: -1;
  background: var(--accent); clip-path: var(--p5-cut-2); transform: skewX(-18deg) rotate(-1deg); opacity: .95;
}

/* 히어로: 셋째 줄은 검은 슬랩 위의 흰 글자 */
.hero__title .l3 {
  display: inline-block; background: var(--ink); color: var(--paper); padding: .04em .16em .02em .12em; margin-top: .08em;
  transform: rotate(-2deg) skewX(-6deg); transform-origin: left bottom; clip-path: var(--p5-cut-3);
}
.hero__title .l2 { display: inline-block; transform: rotate(-.6deg); }

/* 캐릭터 이름: 뒤에 삐딱한 빨간 슬랩 */
.char-hero__name { display: inline-block; position: relative; isolation: isolate; padding: 0 .12em; }
.char-hero__name::before {
  content: ""; position: absolute; left: -.06em; right: -.06em; top: .16em; bottom: .02em; z-index: -1;
  background: var(--accent); clip-path: var(--p5-cut-2); transform: skewX(-12deg) rotate(-1.4deg);
}
.sess-hero__title { display: inline-block; transform: rotate(-1deg); transform-origin: left bottom; }

/* 포스터·카드: 호버 때 비뚤게 */
.poster:hover { transform: translateY(-4px) rotate(-1.3deg); }
.poster:nth-child(even):hover { transform: translateY(-4px) rotate(1.3deg); }
.char-card:hover, .art:hover { transform: translate(-3px, -3px) rotate(-.8deg); }

/* 마퀴 띠: 살짝 기울임 (scaleX로 모서리 빈틈을 덮는다) */
.marquee { transform: rotate(-1.2deg) scaleX(1.04); transform-origin: center; margin-block: 10px; position: relative; z-index: 1; }

/* 먹색·빨간 섹션: 대각선 줄무늬 질감 */
.sec--ink { background-image: repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--paper) 4%, transparent) 14px 16px); }
.sec--accent { background-image: repeating-linear-gradient(135deg, transparent 0 18px, color-mix(in srgb, var(--accent-fg) 7%, transparent) 18px 21px); }
.site-foot { background-image: repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--paper) 3%, transparent) 14px 16px); }

/* 캠페인 헤더·로드비 글 번호·필터 선택 */
.campaign__title { display: inline-block; transform: rotate(-.8deg); transform-origin: left bottom; }
.post__no { font-style: italic; }
.filters .tag[aria-pressed="true"], .filters .tag.is-on { transform: skewX(-8deg); }

@media (prefers-reduced-motion: reduce) {
  .btn:hover, .poster:hover, .char-card:hover, .art:hover { transform: none; }
}