/* 쌍둥이 마스코트: 누나 얼굴 스탬프가 흐르는 배경, 빼꼼 내다보는 쌍둥이 자리(말풍선), 사용법 안내
   이미지: img/ (moonkimvision.com assets/images/twins 사본). 캐릭터 설정: marketing-studio projects/twins CHARACTER.md */

/* ---------- 배경: 스탬프 흐름 (사이트 .stamp-drift, 영상 bg_face_loop 와 같은 연출) ---------- */
body::before{
  content:"";position:fixed;inset:-240px;z-index:-1;pointer-events:none;
  background:url("../img/stamp-tile.webp") 0 0/240px 240px repeat;opacity:.13;
  animation:drift 30s linear infinite;
}
@keyframes drift{to{transform:translate(-240px,240px)}}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) body::before{opacity:.06}}
:root[data-theme="dark"] body::before{opacity:.06}

/* ---------- 쌍둥이 자리 ---------- */
.twins{position:relative;height:196px;flex:none;pointer-events:none}
.twins::after{                                   /* 둘이 기대는 선반 */
  content:"";position:absolute;left:0;right:0;bottom:0;height:16px;border-radius:999px;
  background:var(--ink);box-shadow:3px 3px 0 var(--orange);
}
.tw-peek{
  position:absolute;bottom:10px;width:auto;height:118px;padding:0;border:0;background:none;pointer-events:auto;cursor:pointer;
  transform-origin:50% 100%;transition:transform .25s cubic-bezier(.3,1.6,.5,1);
}
.tw-peek img{display:block;height:100%;width:auto}
.tw-sister{left:10%}
.tw-sister img{transform:scaleX(-1)}             /* 동생 쪽을 보게 */
.tw-brother{right:10%;bottom:4px;height:124px}
.tw-peek:hover{transform:translateY(-6px)}
.tw-peek.hop{animation:twHop .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes twHop{0%{transform:translateY(0)}35%{transform:translateY(-22px) rotate(-4deg)}70%{transform:translateY(3px)}100%{transform:translateY(0)}}
.tw-bubble{
  position:absolute;z-index:2;margin:0;max-width:62%;
  background:var(--panel);color:var(--ink);border:2px solid var(--ink);border-radius:16px;
  padding:6px 12px 7px;font-weight:700;font-size:14px;line-height:1.35;box-shadow:2px 2px 0 var(--shade);
  opacity:0;transform:translateY(6px) scale(.92);transition:opacity .2s,transform .25s cubic-bezier(.3,1.6,.5,1);
}
.tw-bubble.show{opacity:1;transform:none}
.tw-bubble::after{
  content:"";position:absolute;bottom:-8px;width:12px;height:12px;background:inherit;
  border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg) skew(8deg,8deg);
}
.tw-sis{left:0;top:0;border-bottom-left-radius:4px}
.tw-sis::after{left:22%}
.tw-bro{right:0;top:12px;background:var(--bro-bubble);border-bottom-right-radius:4px}
.tw-bro::after{right:22%}
@media (prefers-reduced-motion: reduce){
  body::before{animation:none}
  .tw-peek,.tw-bubble{transition:none}
  .tw-peek.hop{animation:none}
}
/* 판이 화면을 꽉 채우는 배치에서는 자리가 없으면 숨김 */
@media (orientation: landscape) and (max-height: 520px){
  .twins{display:none}
  .tbtn{box-shadow:2px 2px 0 var(--shade)}
  .panel{box-shadow:3px 3px 0 var(--shade);border-width:2px}
}
@media (min-width:761px) and (min-height:521px){
  body.is-fs .twins{grid-area:teams;align-self:end;height:170px}
}
@media (min-width:761px) and (max-height:760px){
  body.is-fs .twins{display:none}
}
@media (max-width:760px){
  .twins{height:176px}
  .tw-peek{height:104px}
  .tw-brother{height:110px}
}