/* 꾸벅 공연단 홈페이지 — 게임 그림 규칙 '토이박스 극장 + 바느질'(체리 벨벳 커튼 · 크림 바느질 카드 · 무드등 보라 밤하늘) */
:root {
  --cream: #fff4e6; --cream2: #ffeedd; --beige: #e7cba5; --plum: #3a2340; --muted: #8a6a80;
  --cherry: #e8475b; --cherry-d: #b8283e; --mint: #2fb7a8; --spot: #ffc93c; --spot-d: #e09a12;
  --led: #5b3f94; --led-d: #3b2768; --night: #2a1f4a; --pink: #f9c6d3;
  --r: 28px; --stitch: rgba(232, 71, 91, .32);
  --shadow: 0 10px 0 var(--beige), 0 18px 30px rgba(58, 35, 64, .18);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: "Troupe", ui-rounded, system-ui, sans-serif; color: var(--plum); background: var(--cream);
  line-height: 1.55; overflow-x: hidden;
  background-image: radial-gradient(rgba(232, 71, 91, .07) 2px, transparent 2.5px);
  background-size: 26px 26px;
}
img { display: block; max-width: 100%; height: auto; }
p, h1, h2, h3, figcaption, li { text-wrap: pretty; }
.lead, .tagline, .section-sub { text-wrap: balance; }
.lang-ko { word-break: keep-all; } .lang-ja, .lang-zh-TW { line-break: strict; }
a { color: inherit; }
.lang-ja, .lang-zh-TW { line-height: 1.7; }

/* ---------- 위 커튼 띠(폼폼) ---------- */
.valance {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px max(16px, env(safe-area-inset-left)) 18px; color: var(--cream);
  background:
    radial-gradient(circle at 13px 0, var(--cream) 6px, transparent 6.5px) 0 100% / 26px 12px repeat-x,
    radial-gradient(circle at 13px -2px, var(--cherry-d) 13px, transparent 13.5px) 0 calc(100% - 4px) / 26px 14px repeat-x,
    linear-gradient(var(--cherry), var(--cherry-d));
  background-origin: border-box;
  box-shadow: 0 6px 18px rgba(58, 35, 64, .25);
}
.valance::after { content: ""; position: absolute; left: 0; right: 0; bottom: 22px; border-top: 2px dashed rgba(255, 244, 230, .55); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: 1.15rem; letter-spacing: .01em; }
.brand img { border-radius: 11px; box-shadow: 0 2px 0 var(--cherry-d), 0 0 0 2px rgba(255, 244, 230, .7); }
.langs { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.langs a, .langs span {
  text-decoration: none; font-size: .85rem; padding: 4px 11px 5px; border-radius: 999px;
  background: rgba(255, 244, 230, .16); border: 1.5px dashed rgba(255, 244, 230, .5); white-space: nowrap;
}
.langs a:hover { background: rgba(255, 244, 230, .3); }
.langs [aria-current] { background: var(--cream); color: var(--cherry-d); border-color: var(--cream); }

/* ---------- 무대(첫 화면) ---------- */
.stage {
  position: relative; text-align: center; color: var(--cream); overflow: hidden;
  padding: 34px 20px 0; margin-top: -14px;
  background:
    radial-gradient(ellipse 60% 45% at 50% 30%, rgba(255, 214, 140, .28), transparent 70%),
    radial-gradient(ellipse 90% 60% at 50% 110%, rgba(232, 71, 91, .25), transparent 70%),
    linear-gradient(180deg, var(--night) 0%, var(--led-d) 38%, var(--led) 78%, #6d4fa8 100%);
}
.sky i {
  position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #ffeec4;
  box-shadow: 0 0 10px 2px rgba(255, 220, 150, .7); animation: twinkle 3.2s ease-in-out infinite;
}
.sky i:nth-child(1) { left: 8%; top: 12%; } .sky i:nth-child(2) { left: 22%; top: 30%; animation-delay: .6s; }
.sky i:nth-child(3) { left: 85%; top: 16%; animation-delay: 1.2s; } .sky i:nth-child(4) { left: 74%; top: 38%; animation-delay: 1.8s; }
.sky i:nth-child(5) { left: 33%; top: 8%; animation-delay: .3s; width: 4px; height: 4px; } .sky i:nth-child(6) { left: 64%; top: 7%; animation-delay: 2.1s; width: 4px; height: 4px; }
.sky i:nth-child(7) { left: 12%; top: 52%; animation-delay: 1.5s; } .sky i:nth-child(8) { left: 90%; top: 55%; animation-delay: .9s; }
.sky i:nth-child(9) { left: 47%; top: 4%; animation-delay: 2.6s; width: 4px; height: 4px; } .sky i:nth-child(10) { left: 4%; top: 72%; animation-delay: 1.1s; }
.sky i:nth-child(11) { left: 95%; top: 78%; animation-delay: 2.3s; } .sky i:nth-child(12) { left: 57%; top: 46%; animation-delay: .4s; width: 4px; height: 4px; }
@keyframes twinkle { 0%, 100% { opacity: .35; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.15); } }

.moon {
  position: absolute; right: 13%; top: 52px; width: 64px; height: 64px; border-radius: 50%;
  box-shadow: -14px 8px 0 0 #ffe08a; transform: rotate(-18deg); filter: drop-shadow(0 0 14px rgba(255, 224, 138, .65));
  animation: bob 6s ease-in-out infinite;
}
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

.curtain {
  position: absolute; top: 0; bottom: 0; width: clamp(54px, 14vw, 190px); z-index: 1;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .18) 0 4px, transparent 4px 22px, rgba(255, 255, 255, .1) 22px 26px, transparent 26px 34px),
    linear-gradient(90deg, var(--cherry-d), var(--cherry) 55%, var(--cherry-d));
  box-shadow: inset 0 -30px 40px rgba(58, 35, 64, .35);
}
.curtain.left { left: 0; border-bottom-right-radius: 70% 22%; }
.curtain.right { right: 0; border-bottom-left-radius: 70% 22%; }
/* 커튼 묶는 띠(바느질) + 민트 술 — 게임 커튼과 같게 */
.tie { position: absolute; top: 46%; left: 0; right: 0; height: 20px; background: var(--cream); box-shadow: 0 4px 0 var(--beige), 0 6px 10px rgba(58, 35, 64, .25); }
.tie::before { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; border-top: 2px dashed var(--stitch); }
.tie::after {
  content: ""; position: absolute; top: 14px; width: 16px; height: 34px; border-radius: 6px 6px 9px 9px;
  background: repeating-linear-gradient(90deg, #4fc9b9 0 3px, #2fb7a8 3px 6px); box-shadow: 0 3px 0 #1f8c80;
}
.curtain.left .tie::after { right: 12px; } .curtain.right .tie::after { left: 12px; }

.sign { --sw: min(560px, 86vw); position: relative; z-index: 2; width: var(--sw); margin: 0 auto; filter: drop-shadow(0 18px 26px rgba(20, 8, 40, .45)); }
/* 글자는 넘치지 않게 간판 폭에 맞춘 크기 + 그림에서 잰 가운데(보라 판 49.9% · 빨간 띠 48.8% — 2026-11-03, 영어가 넘쳐 오른쪽으로 밀렸음) */
.sign-title {
  position: absolute; left: 49.9%; top: 66.4%; translate: -50% -50%; width: max-content; white-space: nowrap;
  font-weight: 400; font-size: calc(var(--sw) * .108); line-height: 1; color: var(--cream);
  -webkit-text-stroke: .055em var(--cherry); paint-order: stroke fill; text-shadow: 0 .06em 0 var(--cherry-d);
}
.sign-sub {
  position: absolute; left: 48.8%; top: 89.3%; translate: -50% -50%; width: max-content; white-space: nowrap;
  font-size: calc(var(--sw) * .044); line-height: 1; color: #fff;
}
.lang-en .sign-title { font-size: calc(var(--sw) * .094); }
.lang-en .sign-sub { font-size: calc(var(--sw) * .036); }
.tagline { position: relative; z-index: 2; margin: 22px auto 6px; font-size: clamp(1.15rem, 3.6vw, 1.6rem); color: var(--spot); text-shadow: 0 2px 0 rgba(58, 35, 64, .5); }
.lead { position: relative; z-index: 2; max-width: 34em; margin: 0 auto; font-size: clamp(.98rem, 2.6vw, 1.12rem); color: rgba(255, 244, 230, .92); padding: 0 6vw; }
.stores { position: relative; z-index: 3; margin: 24px 0 8px; display: grid; justify-items: center; gap: 10px; }
/* 공식 스토어 배지(바꾸지 않고 크기만) — 출시 전엔 '곧 만나요' 표 */
.soon-tag { font-size: .85rem; color: var(--plum); background: var(--spot); padding: 3px 14px 4px; border-radius: 999px; box-shadow: 0 3px 0 var(--spot-d); }
.badges { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.badge { height: 54px; width: auto; filter: drop-shadow(0 6px 12px rgba(20, 8, 40, .35)); }
.store {
  display: inline-flex; flex-direction: column; align-items: center; min-width: 168px; padding: 8px 22px 11px; border-radius: 22px;
  background: var(--cream); color: var(--plum); font-size: 1.15rem; line-height: 1.15;
  box-shadow: 0 6px 0 var(--beige), 0 12px 22px rgba(20, 8, 40, .35); outline: 2px dashed var(--stitch); outline-offset: -7px;
}
.store small { font-size: .72rem; color: var(--cherry); letter-spacing: .04em; }

/* 무대 바닥: 한 이불 덮고 조는 단원들(누르면 꾸벅) */
.quilt { position: relative; z-index: 2; margin-top: 30px; }
.sleepers { position: relative; z-index: 0; display: flex; justify-content: center; align-items: flex-end; gap: clamp(0px, 1vw, 10px); padding: 0 4vw; flex-wrap: nowrap; }
.sleeper { all: unset; cursor: pointer; width: clamp(54px, 10vw, 104px); flex: 0 1 auto; transform-origin: 50% 100%; animation: breathe 3.4s ease-in-out infinite; position: relative; -webkit-tap-highlight-color: transparent; }
.sleeper:nth-child(2n) { animation-delay: -1.1s; } .sleeper:nth-child(3n) { animation-delay: -2.2s; }
.sleeper:hover img, .sleeper:focus-visible img { transform: translateY(-10px) rotate(-4deg); }
.sleeper:focus-visible { outline: 3px dashed var(--spot); outline-offset: 4px; border-radius: 12px; }
.sleeper img { transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.sleeper.dozing::after { content: "z z Z"; position: absolute; right: -4px; top: -12px; font-size: 15px; color: #9fd0ff; text-shadow: 0 1px 0 var(--led-d); animation: zzz 1.8s ease-out forwards; }
@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.02, .975); } }
@keyframes zzz { from { opacity: 0; translate: 0 6px; } 20% { opacity: 1; } to { opacity: 0; translate: 6px -16px; } }
.quilt::after {
  content: ""; display: block; height: 70px; margin-top: -34px; position: relative; z-index: 1;   /* 단원들이 이불을 덮고 빼꼼 */
  background:
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(255, 255, 255, .55) 46px 48px),
    repeating-linear-gradient(90deg, #f9c6d3 0 48px, #fff1f4 48px 96px);
  border-top: 10px solid var(--cream); border-radius: 40px 40px 0 0;
  box-shadow: inset 0 8px 0 rgba(255, 255, 255, .35), 0 -6px 18px rgba(58, 35, 64, .25);
}

/* ---------- 공통: 극장 표 제목 · 바느질 카드 ---------- */
section:not(.stage) { width: min(1100px, 100% - 32px); margin: 0 auto; padding: 64px 0 8px; }
.ticket {
  width: fit-content; margin: 0 auto 26px; padding: 8px 30px 10px; position: relative;
  background: var(--spot); color: var(--plum); border-radius: 14px; font-weight: 400; font-size: clamp(1.35rem, 3.8vw, 1.9rem); line-height: 1.2;
  box-shadow: 0 5px 0 var(--spot-d), 0 10px 18px rgba(224, 154, 18, .25);
}
.ticket::before, .ticket::after { content: ""; position: absolute; top: 50%; width: 16px; height: 16px; translate: 0 -50%; border-radius: 50%; background: var(--cream); }
.ticket::before { left: -8px; } .ticket::after { right: -8px; }
.section-sub { text-align: center; color: var(--muted); margin: -12px auto 26px; max-width: 30em; }
.card { background: #fff; border-radius: var(--r); box-shadow: var(--shadow); position: relative; }
/* 바느질 점선은 카드 안쪽 층에 — 위로 튀어나온 그림(방석)을 가로지르지 않게(테두리 선은 늘 맨 위에 그려짐) */
.card::before { content: ""; position: absolute; inset: 9px; border: 2px dashed var(--stitch); border-radius: calc(var(--r) - 9px); pointer-events: none; }
.card > * { position: relative; z-index: 1; }

/* 이렇게 놀아요 */
.how-grid { display: grid; grid-template-columns: 1fr minmax(220px, 300px); gap: 40px; align-items: center; }
.steps { list-style: none; display: grid; gap: 22px; }
.steps .card { display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: center; padding: 18px 22px 18px 18px; }
.steps h3 { font-weight: 400; font-size: 1.3rem; color: var(--cherry-d); }
.steps p { color: var(--muted); font-size: .98rem; }
.num {
  position: absolute !important; left: -10px; top: -12px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--cherry); color: #fff; font-size: 1.15rem; box-shadow: 0 4px 0 var(--cherry-d);
}
.steps img { width: 84px; transform-origin: 50% 100%; }
.steps .card:hover img { animation: hop .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes hop { 40% { transform: translateY(-14px) scale(1.04, .96); } }
.phone {
  border-radius: 34px; padding: 9px; background: var(--cream); box-shadow: 0 10px 0 var(--beige), 0 24px 40px rgba(58, 35, 64, .22);
  outline: 2px dashed var(--stitch); outline-offset: -5px;
}
.phone img { border-radius: 26px; }
.tilt { transform: rotate(3deg); }

/* 무대 뒤 엿보기: 옆으로 넘기는 사진 */
.shot-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(196px, 236px); gap: 22px; overflow-x: auto;
  padding: 12px 4px 30px; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--pink) transparent;
}
.shot { scroll-snap-align: center; text-align: center; }
.shot figcaption { margin-top: 16px; font-size: 1rem; line-height: 1.35; color: var(--plum); white-space: pre-line; }
.shot:nth-child(odd) .phone { transform: rotate(-2deg); } .shot:nth-child(even) .phone { transform: rotate(2deg); }

/* 단원 소개 */
.troupe-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 26px 22px; }
.member { padding: 18px 18px 22px; text-align: center; }
.member .cushion { width: 124px; height: 124px; margin: -46px auto 6px; border-radius: 40px; display: grid; place-items: end center; background: var(--c, #ffe3ea); box-shadow: 0 6px 0 rgba(58, 35, 64, .12); }
.member button { all: unset; cursor: pointer; display: block; position: relative; -webkit-tap-highlight-color: transparent; }
.member button img { width: 112px; transform-origin: 50% 100%; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.member button:hover img, .member button:focus-visible img { transform: translateY(-8px) rotate(3deg); }
.member button.dozing::after { content: "z z Z"; position: absolute; right: 4px; top: -6px; font-size: 15px; color: var(--led); animation: zzz 1.8s ease-out forwards; }
.member h3 { font-weight: 400; font-size: 1.35rem; color: var(--cherry-d); margin-top: 4px; }
.member p { color: var(--muted); font-size: .95rem; }
.troupe-grid { padding-top: 40px; }

/* 이런 것도 있어요 */
.feat-list { list-style: none; padding: 26px 30px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 30px; }
.feat-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 1.04rem; }
.feat-list i { flex: 0 0 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-style: normal; color: #fff; font-size: 15px; line-height: 1; }
.b-moon { background: var(--led); } .b-moon::before { content: "☾"; }
.b-note { background: var(--mint); } .b-note::before { content: "♪"; }
.b-heart { background: var(--cherry); } .b-heart::before { content: "♥"; }
.b-star { background: var(--spot-d); } .b-star::before { content: "★"; }

/* 도움 */
.help { padding-bottom: 70px; }
.help-card { display: grid; grid-template-columns: 120px 1fr; gap: 22px; align-items: center; padding: 26px 30px; }
.help-card h2 { font-weight: 400; font-size: 1.5rem; color: var(--cherry-d); }
.help-card p { color: var(--muted); margin: 4px 0 14px; }
.btn {
  display: inline-block; text-decoration: none; padding: 10px 22px 12px; border-radius: 18px; background: var(--cherry); color: #fff; font-size: 1.05rem;
  box-shadow: 0 5px 0 var(--cherry-d); transition: transform .15s, box-shadow .15s; word-break: break-all;
}
.btn:hover { transform: translateY(2px); box-shadow: 0 3px 0 var(--cherry-d); }

/* 바닥 */
.foot { background: var(--led-d); color: rgba(255, 244, 230, .85); text-align: center; padding: 34px 16px calc(30px + env(safe-area-inset-bottom)); display: grid; gap: 14px; justify-items: center; }
.legal { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; font-size: .95rem; }
.legal .soon { opacity: .6; cursor: help; }
.foot .langs.small a, .foot .langs.small span { font-size: .8rem; }
.copy { font-size: .8rem; opacity: .7; font-family: "Troupe-en", "Troupe", sans-serif; }

/* 들어올 때 차례로 */
.rise { animation: rise .8s cubic-bezier(.2, 1.3, .4, 1) both; }
.d1 { animation-delay: .15s; } .d2 { animation-delay: .3s; } .d3 { animation-delay: .45s; }
@keyframes rise { from { opacity: 0; transform: translateY(24px) scale(.96); } }

/* 휴대폰 */
@media (max-width: 760px) {
  .how-grid { grid-template-columns: 1fr; }
  .how-grid .phone { width: min(260px, 70%); margin: 6px auto 0; }
  .feat-list { grid-template-columns: 1fr; padding: 22px; }
  .help-card { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .help-card img { width: 96px; }
  .brand span { font-size: 1rem; }
  .moon { right: 6%; top: 30px; width: 44px; height: 44px; box-shadow: -10px 6px 0 0 #ffe08a; }
  .troupe-grid { grid-template-columns: repeat(2, 1fr); gap: 46px 14px; }
  .member { padding: 14px 12px 18px; } .member .cushion { width: 100px; height: 100px; border-radius: 32px; } .member button img { width: 92px; }
  .member h3 { font-size: 1.2rem; } .member p { font-size: .88rem; }
  .curtain { width: 34px; } .tie::after { display: none; }
  .lead, .tagline { padding: 0 40px; } .stores { padding: 0 34px; } .badge { height: 46px; }   /* 글이 커튼 위로 걸치지 않게 */
  .sleepers { gap: 2vw; } .sleeper { width: 17vw; } .sleeper:nth-child(n+6) { display: none; }   /* 휴대폰: 5명만 크게 */
  .quilt::after { margin-top: -14px; height: 54px; border-top-width: 8px; }   /* 휴대폰: 단원이 작아 덜 덮음 */
}
@media (max-width: 420px) { .brand span { display: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- 정책 페이지(개인정보·약관·지원) ---------- */
.doc { width: min(820px, 100% - 32px); margin: 0 auto; padding: 70px 0 70px; }
.doc-card { padding: 54px clamp(22px, 5vw, 56px) 40px; }
.doc-mascot { position: absolute !important; left: 50%; top: -58px; translate: -50% 0; width: 104px; }
.doc h1 { font-weight: 400; text-align: center; color: var(--cherry-d); font-size: clamp(1.7rem, 4.6vw, 2.3rem); line-height: 1.2; }
.doc-date { text-align: center; color: var(--muted); font-size: .9rem; margin: 6px 0 22px; }
.doc-intro { background: var(--cream2); border-radius: 18px; padding: 14px 18px; margin-bottom: 8px; }
.doc h2 { font-weight: 400; font-size: 1.22rem; color: var(--plum); margin: 26px 0 8px; padding-left: 14px; border-left: 5px solid var(--spot); line-height: 1.3; }
.doc p { margin: 6px 0; overflow-wrap: anywhere; }
.doc ul { margin: 6px 0 6px 1.2em; } .doc li { margin: 4px 0; }
.legal a[aria-current] { color: var(--spot); text-decoration: none; }
.legal .group { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.legal .group b { font-weight: 400; opacity: .7; }