/* ══════════════════════════════════════════════════════════
   📸 청취담 스토리 — 서식 (만들기 · 보기)

   화면을 꽉 채우는 검은 판이다. 사진이 주인공이라 다른 색을 거의 쓰지 않는다.
   ══════════════════════════════════════════════════════════ */
.st-wrap {
    position: fixed; inset: 0; z-index: 2147483610;
    background: #06110F; display: none; flex-direction: column;
    font-family: 'Pretendard', -apple-system, sans-serif; letter-spacing: -0.02em;
    color: #FFFFFF; overscroll-behavior: contain;
}
.st-wrap.on { display: flex; }
/* ⚠️ 꾹 누르면 브라우저가 '이미지 복사 · 다운로드' 판을 띄운다.
      멈추려던 손짓이 그 판에 가로채인다. 창 안에서는 아예 못 뜨게 한다.
   ⚠️ touch-action: none 이라야 두 손가락으로 화면이 확대되지 않는다 —
      두 손가락은 스티커를 키우고 돌리는 데 쓴다. */
.st-wrap, .st-wrap * {
    -webkit-touch-callout: none;
    -webkit-user-select: none; user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.st-wrap { touch-action: none; }
/* ⚠️ 확대를 막았다고 굴러야 할 것까지 막으면 안 된다 —
      본 사람 목록 · 친구 고르는 칸 · 연장 줄은 손가락으로 굴릴 수 있어야 한다. */
.st-wrap .st-seen, .st-wrap .st-seen .body,
.st-wrap .st-sheet, .st-wrap .st-sheet .pickbox,
.st-wrap .st-tools, .st-wrap .emo .grid,
.st-wrap .st-edit, .st-wrap .ed-stage, .st-wrap .ed-pop .row { touch-action: pan-x pan-y; }
/* 글을 적는 칸만은 고를 수 있어야 한다.
   ⚠️ 글 편집기의 적는 자리(.ed-text)는 textarea 가 아니라 contenteditable 이다 —
      여기 안 적어 두면 위의 user-select: none 에 걸려 글자를 고를 수도, 커서를 옮길 수도 없다. */
.st-wrap input, .st-wrap textarea, .st-wrap .ed-text {
    -webkit-user-select: text; user-select: text; touch-action: auto;
}
.st-wrap img { pointer-events: none; }
/* 스티커 속 그림은 지나가게 — 스티커 상자가 손짓을 받는다 */
.st-wrap .st-pic img { pointer-events: none; }
.st-wrap .st-pic { pointer-events: auto; }

/* 사진이 앉는 무대 — 어느 화면에서든 세로로 긴 한 칸 */
.st-stage {
    flex: 1 1 auto; position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
/* ⚠️ 사진을 '안에 맞추면' 위아래나 양옆에 검은 여백이 남는다.
      스토리는 화면을 꽉 채우는 것이 결이라, 넘치는 쪽을 잘라 내고 가득 채운다. */
.st-stage img.st-photo {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    display: block; user-select: none; -webkit-user-drag: none;
}
/* 스티커는 사진 위에 비율대로 앉는다 — 사진과 정확히 같은 칸을 쓴다.
   ⚠️ z-index 를 여기서 못 박아 층을 가둔다. 손댄 스티커를 맨 위로 올릴 때
      번호가 계속 커지는데, 가둬 두지 않으면 그 번호가 무대 밖으로 새어 나가
      위 이름줄(6) · 아래 답장줄(7) · 연장 줄(30)까지 스티커가 덮어 버린다. */
.st-layer { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
/* ⚠️ 층 전체가 손짓을 받으면 그 아래 바탕 사진까지 닿지 못한다.
      실제로 이것 때문에 바탕이 옮겨지지도 · 돌아가지도 않았다.
      층은 지나가게 두고, 얹어 둔 글 · 사진 · 설문만 손짓을 받는다. */
.st-layer.live { pointer-events: none; }
.st-layer.live > * { pointer-events: auto; }
.st-layer.edit { pointer-events: none; }
.st-layer.edit > * { pointer-events: auto; }

.st-text {
    position: absolute; transform: translate(-50%, -50%);
    font-weight: 800; line-height: 1.3; text-align: center;
    max-width: 84%; word-break: keep-all; white-space: pre-wrap;
    text-shadow: 0 2px 10px rgba(0,0,0,0.45);
}
.st-text.box {
    background: rgba(0,0,0,0.42); padding: 6px 12px; border-radius: 12px;
    text-shadow: none;
}

/* 설문 */
.st-poll {
    position: absolute; left: 50%; transform: translate(-50%, -50%);
    width: 78%; max-width: 330px;
    background: rgba(12, 22, 20, 0.62); backdrop-filter: blur(8px);
    border-radius: 18px; padding: 14px 14px 12px; text-align: center;
}
.st-poll .q { font-size: 0.9rem; font-weight: 800; margin-bottom: 11px; word-break: keep-all; }
.st-poll .row { display: flex; gap: 8px; }
.st-poll button {
    flex: 1; position: relative; overflow: hidden;
    border: 0; border-radius: 12px; padding: 11px 8px; cursor: pointer;
    background: rgba(255,255,255,0.16); color: #FFFFFF;
    font-family: inherit; font-size: 0.82rem; font-weight: 800;
}
.st-poll button:hover:not(:disabled) { background: rgba(255,255,255,0.26); }
.st-poll button .bar {
    position: absolute; left: 0; top: 0; bottom: 0; width: 0;
    background: rgba(255,255,255,0.26); transition: width 0.45s ease;
}
.st-poll button.mine .bar { background: rgba(242, 89, 107, 0.55); }
.st-poll button .txt { position: relative; z-index: 1; }
.st-poll button .pc { position: relative; z-index: 1; display: block; font-size: 0.72rem; opacity: 0.85; margin-top: 2px; }
.st-poll .sum { font-size: 0.68rem; opacity: 0.6; margin-top: 8px; font-weight: 600; }

/* 위쪽 — 진행 막대 · 올린 사람 */
.st-top {
    position: absolute; left: 0; right: 0; top: 0; z-index: 6;
    padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.5), transparent);
}
.st-bars { display: flex; gap: 4px; }
.st-bars span { flex: 1; height: 2.5px; border-radius: 2px; background: rgba(255,255,255,0.3); overflow: hidden; }
.st-bars span i { display: block; height: 100%; width: 0; background: #FFFFFF; border-radius: 2px; }
.st-bars span.done i { width: 100%; }
.st-who { display: flex; align-items: center; gap: 9px; padding: 11px 2px 0; }
.st-who .f {
    width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
    background: rgba(255,255,255,0.16); display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; color: rgba(255,255,255,0.7);
}
.st-who .f img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-who .n { flex: 1; min-width: 0; font-size: 0.85rem; font-weight: 800;
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-who .t { font-size: 0.72rem; opacity: 0.65; font-weight: 600; flex: 0 0 auto; }
.st-who button {
    border: 0; background: transparent; color: #FFFFFF; font-size: 1.05rem;
    cursor: pointer; padding: 4px 6px; flex: 0 0 auto;
}

/* 좌우 누르는 자리 — 눈에 보이지 않는다 */
.st-tap { position: absolute; top: 0; bottom: 0; width: 32%; z-index: 5; }
.st-tap.l { left: 0; } .st-tap.r { right: 0; width: 68%; }

/* 아래쪽 — 스토리에서 할 수 있는 일 (답장 · 좋아요 · 알려주기 · 지우기)

   ⚠️ 키보드가 뜰 때 브라우저(삼성 인터넷 등)가 화면을 줄여 버리면 무대까지 쪼그라들어
      사진이 다시 잘린다. 그래서 무대 높이는 자바스크립트로 붙박아 두고(--kb 참고),
      아래 줄만 키보드 높이(--kb)만큼 올린다. 스토리는 그대로 있고 답장칸만 올라온다. */
.st-dock {
    position: absolute; left: 0; right: 0; bottom: var(--kb, 0px); z-index: 7;
}
/* 답장칸을 누르면 뜨는 빠른 반응 — 길게 쓰지 않고 하나 눌러 보내는 자리 */
.st-quick {
    display: none; gap: 10px; justify-content: center; flex-wrap: wrap;
    padding: 10px 12px 4px;
}
.st-quick.on { display: flex; }
.st-quick button {
    border: 0; background: transparent; cursor: pointer; padding: 4px;
    font-size: 1.9rem; line-height: 1; transition: transform 0.15s ease;
}
.st-quick button:active { transform: scale(1.35); }
/* 한 번 보내고 나면 — 고른 것만 또렷하게 남기고 나머지는 물러난다.
   눌러도 안 먹는다는 것이 눈에 보여야 또 누르지 않는다. */
.st-quick.done button { opacity: 0.3; cursor: default; }
.st-quick.done button:active { transform: none; }
.st-quick.done button.picked { opacity: 1; transform: scale(1.12); }
.st-foot {
    position: relative; left: 0; right: 0;
    padding: 26px 12px calc(env(safe-area-inset-bottom, 0px) + 12px);
    background: linear-gradient(0deg, rgba(0,0,0,0.6), transparent);
    display: flex; align-items: center; gap: 8px;
}
/* ⚠️ min-width: 0 이 없으면 입력칸이 제 글자 길이만큼 자리를 우겨,
      오른쪽 공유 단추가 화면 밖으로 밀려 잘린다. */
.st-foot .freply { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px;
                   background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.28);
                   border-radius: 999px; padding: 4px 4px 4px 13px; }
.st-foot .freply input {
    flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
    color: #FFFFFF; font-family: inherit; font-size: 0.84rem; font-weight: 500; padding: 8px 0;
}
.st-foot .freply input::placeholder { color: rgba(255,255,255,0.55); }
.st-foot .freply button {
    flex: 0 0 auto; width: 34px; height: 34px; border: 0; border-radius: 50%;
    background: #C82433; color: #FFFFFF; cursor: pointer; font-size: 0.82rem;
}
.st-foot .fbtn {
    flex: 0 0 auto; border: 0; background: rgba(255,255,255,0.16); color: #FFFFFF; cursor: pointer;
    border-radius: 999px; min-height: 40px; min-width: 40px; padding: 0 11px; font-family: inherit;
    font-size: 0.8rem; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
}
/* 좁은 화면에서는 글자를 줄이고 그림만 남긴다 — 잘리는 것보다 낫다 */
@media (max-width: 400px) {
    .st-foot { gap: 6px; padding-left: 10px; padding-right: 10px; }
    .st-foot .fbtn { padding: 0 9px; font-size: 0.74rem; }
    .st-foot .fbtn.kill span, .st-foot .fbtn.kill { font-size: 0.74rem; }
}
.st-foot .fbtn:hover { background: rgba(255,255,255,0.26); }
.st-foot .fbtn.on { background: #C82433; }
.st-foot .fbtn.on i { color: #FFFFFF; }
.st-foot .fbtn.kill { background: rgba(200,36,51,0.8); }
.st-foot .fbtn:disabled { opacity: 0.6; cursor: default; }
.st-foot .note { flex: 1; font-size: 0.72rem; opacity: 0.6; font-weight: 600; text-align: right; }

/* 🖼 사진 스티커 — 끌어 옮기고, 두 손가락으로 키우고 돌리고, 누르면 모양이 바뀐다 */
.st-pic {
    position: absolute; transform: translate(-50%, -50%);
    overflow: hidden; line-height: 0;
    box-shadow: 0 6px 22px -6px rgba(0,0,0,0.5);
}
.st-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-pic.round  { border-radius: 14px; }
.st-pic.square { border-radius: 2px; aspect-ratio: 1 / 1; }
.st-pic.circle { border-radius: 50%; aspect-ratio: 1 / 1; }
.st-layer.edit .st-pic { cursor: grab; }
.st-layer.edit .st-pic.picked { outline: 2px dashed rgba(255,255,255,0.85); outline-offset: 4px; }

/* ✋ 꾹 눌러 '들었다' — 지금부터 아래로 끌면 지워진다는 것을 눈으로 알린다 */
.st-layer.edit .lifted {
    filter: drop-shadow(0 14px 26px rgba(0,0,0,0.6));
    outline: 2px solid rgba(255,255,255,0.95); outline-offset: 5px;
}
.st-layer.edit .doomed { opacity: 0.45; outline-color: #F2596B; }

/* 🗑 지우개 자리 — 들었을 때만 아래에서 올라온다.
      ⚠️ 늘 떠 있으면 꾸미는 화면이 좁아지고, 실수로 스쳐 지나가기만 해도 겁이 난다. */
.st-trash {
    position: absolute; left: 50%; bottom: 18px; transform: translate(-50%, 26px);
    z-index: 40; pointer-events: none;
    display: flex; align-items: center; gap: 9px;
    padding: 11px 20px; border-radius: 999px;
    background: rgba(15,15,15,0.82); backdrop-filter: blur(8px);
    border: 1.5px dashed rgba(255,255,255,0.5);
    color: rgba(255,255,255,0.88); font-size: 0.79rem; font-weight: 800;
    opacity: 0; visibility: hidden;
    transition: opacity 0.16s ease, transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}
.st-trash.on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.st-trash.hot {
    background: #C82433; border-color: #FFFFFF; border-style: solid; color: #FFFFFF;
    transform: translate(-50%, 0) scale(1.08);
}
.st-trash i { font-size: 1.02rem; }

/* ── 만들기 ── */
.st-make { flex: 1 1 auto; display: flex; flex-direction: column; }
.st-pick {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; padding: 24px;
}
.st-pick .big { font-size: 2.6rem; opacity: 0.35; }
.st-pick h3 { margin: 0; font-size: 1.05rem; font-weight: 900; }
.st-pick p { margin: 0; font-size: 0.8rem; opacity: 0.6; text-align: center; line-height: 1.65; font-weight: 500; }
.st-pick .two { display: flex; gap: 10px; width: 100%; max-width: 320px; margin-top: 6px; }
.st-pick button {
    flex: 1; border: 0; border-radius: 14px; padding: 14px 10px; cursor: pointer;
    font-family: inherit; font-size: 0.86rem; font-weight: 800;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.st-pick .cam { background: #C82433; color: #FFFFFF; }
.st-pick .gal { background: rgba(255,255,255,0.14); color: #FFFFFF; }
.st-pick .cam i, .st-pick .gal i { font-size: 1.2rem; }

/* ══════════════════════════════════════════════════════════
   🧰 연장 줄 — 두 단

     윗단  꾸미는 연장 (글 · 사진 · 설문 · 배경 · 맞춤 · 다시) — 옆으로 굴러도 된다
     아랫단 매듭짓는 단추 (임시저장 · 보관함 · 올리기)        — 굴러서는 안 된다

   ⚠️ 한 줄에 다 늘어놓았더니 「올리기」가 오른쪽 화면 밖으로 밀려났다.
      다 만들어 놓고 올릴 데를 못 찾는 것은 그냥 못 올리는 것과 같다.
      매듭짓는 단추는 늘 제자리에 다 보이게 못 박는다.
   ══════════════════════════════════════════════════════════ */
.st-tools {
    flex: 0 0 auto; display: block; padding: 10px 12px calc(env(safe-area-inset-bottom, 0px) + 10px);
    background: rgba(0,0,0,0.35);
}
/* 윗단 — ＋ 를 눌렀을 때만 펼쳐진다. ＋ 자리에서 자라 나오는 결.
   ⚠️ 늘 펼쳐 두면 그만큼 사진이 가려진다 — 무엇을 꾸미는 중인지 안 보이면 꾸밀 수가 없다.
   ⚠️ display:none 으로 여닫으면 움직임을 붙일 수 없다. 높이와 크기로 접어 둔다. */
.st-tools .row-make {
    display: flex; gap: 8px; overflow-x: auto;
    scrollbar-width: none;
    /* 붉은 바탕 — ＋ 에서 나온 줄이라는 것을 빛깔로 잇는다 */
    background: #C82433; border-radius: 16px;
    max-height: 0; opacity: 0; padding: 0 8px; margin-bottom: 0;
    transform: scale(0.9); transform-origin: 22px bottom;
    transition: max-height 0.24s cubic-bezier(.2,.9,.3,1.2), opacity 0.18s ease,
                transform 0.24s cubic-bezier(.2,.9,.3,1.2),
                padding 0.24s ease, margin-bottom 0.24s ease;
}
.st-tools.more-on .row-make {
    max-height: 72px; opacity: 1; padding: 8px; margin-bottom: 9px;
    transform: scale(1);
}
.st-tools .row-make::-webkit-scrollbar { display: none; }
.st-tools .row-make button { background: rgba(255,255,255,0.2); }
.st-tools .row-make button:hover { background: rgba(255,255,255,0.32); }

/* 아랫단 — ＋ 와 셋이 자리를 나눠 갖는다. 굴리지 않는다. */
.st-tools .row-done {
    display: grid; grid-template-columns: auto 1fr 1fr 1.35fr; gap: 8px;
    padding-top: 9px; border-top: 1px solid rgba(255,255,255,0.14);
}
/* ＋ — 여기서 윗줄이 나온다 */
.st-tools .row-done .add {
    width: 44px; padding: 12px 0; background: #C82433; color: #FFFFFF;
    font-size: 0.92rem;
    transition: transform 0.24s cubic-bezier(.2,.9,.3,1.2), background 0.16s ease;
}
.st-tools .row-done .add:hover { background: #F2596B; }
.st-tools.more-on .row-done .add { transform: rotate(45deg); }
.st-tools button {
    flex: 0 0 auto; border: 0; border-radius: 999px; padding: 9px 14px; cursor: pointer;
    background: rgba(255,255,255,0.14); color: #FFFFFF;
    font-family: inherit; font-size: 0.79rem; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.st-tools .row-done button {
    padding: 12px 8px; min-width: 0; white-space: nowrap;
}
.st-tools button:hover { background: rgba(255,255,255,0.24); }
.st-tools button.go { background: #C82433; }
.st-tools button.go:hover { background: #F2596B; }
.st-tools button:disabled { opacity: 0.5; cursor: default; }
/* 담아 둔 것이 있으면 보관함에 개수를 붙인다 — 있는 줄 알아야 열어 본다 */
.st-tools .row-done .n {
    background: rgba(255,255,255,0.28); border-radius: 999px;
    padding: 1px 6px; font-size: 0.68rem; font-weight: 900;
}
/* 아주 좁은 화면에서는 아랫단 글씨만 줄인다 — 줄바꿈이 생기면 단추가 들쭉날쭉해진다 */
@media (max-width: 360px) {
    .st-tools .row-done button { font-size: 0.73rem; padding: 12px 5px; gap: 4px; }
    .st-tools .row-done .add { width: 38px; padding: 12px 0; }
}

/* 드래그로 옮기는 스티커 */
.st-layer.edit .st-text, .st-layer.edit .st-poll { pointer-events: auto; cursor: grab; }
.st-layer.edit .st-text.picked, .st-layer.edit .st-poll.picked {
    outline: 2px dashed rgba(255,255,255,0.7); outline-offset: 4px; border-radius: 8px;
}

/* 만들기 안 작은 창 (글 입력 · 설문 입력) */
/* ══════════════════════════════════════════════════════════
   ⌨️ 판은 키보드 위에 선다

   ⚠️ 예전에는 판이 화면 한가운데 붙박여 있어, 키보드가 올라오면
      빛깔 · 크기 · 「넣기」 가 통째로 키보드 뒤에 깔렸다. 적기는 하는데 끝낼 수가 없었다.
   ⚠️ 위쪽에는 여백을 남긴다(padding-top) — 판이 화면 꼭대기까지 차오르면
      무엇을 꾸미는 중이었는지 사진이 하나도 안 보인다.
      담긴 것이 그 여백을 넘길 만큼 길어지면 판 안에서 굴러간다.
   ══════════════════════════════════════════════════════════ */
.st-sheet {
    position: absolute; left: 0; right: 0; top: 0; bottom: var(--kb, 0px);
    z-index: 20; background: rgba(6, 17, 15, 0.86);
    backdrop-filter: blur(6px);
    display: none; align-items: flex-end; justify-content: center;
    padding: 46px 18px 18px;
    transition: bottom 0.16s ease;
}
.st-sheet.on { display: flex; }
.st-sheet .in {
    width: 100%; max-width: 360px;
    max-height: 100%; overflow-y: auto; overscroll-behavior: contain;
}
/* 묻는 판(버릴까요?)은 예전처럼 가운데에 — 짧아서 키보드와 겹칠 일이 없다 */
.st-sheet.leave { align-items: center; }
.st-sheet h4 { margin: 0 0 12px; font-size: 0.98rem; font-weight: 900; }
.st-sheet input, .st-sheet textarea {
    width: 100%; border: 1.5px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.08);
    border-radius: 13px; padding: 12px 14px; font-family: inherit; font-size: 0.9rem;
    color: #FFFFFF; outline: none; font-weight: 600; margin-bottom: 9px; resize: none;
}
.st-sheet input::placeholder, .st-sheet textarea::placeholder { color: rgba(255,255,255,0.4); }
.st-sheet input:focus, .st-sheet textarea:focus { border-color: rgba(255,255,255,0.55); }
.st-sheet .colors { display: flex; gap: 8px; margin: 4px 0 12px; }
.st-sheet .colors button {
    width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; cursor: pointer;
}
.st-sheet .colors button.on { border-color: #FFFFFF; }
.st-sheet .two { display: flex; gap: 8px; }
.st-sheet .two button {
    flex: 1; border: 0; border-radius: 13px; padding: 13px; cursor: pointer;
    font-family: inherit; font-size: 0.88rem; font-weight: 900;
}
.st-sheet .two .no { background: rgba(255,255,255,0.14); color: #FFFFFF; }
.st-sheet .two .yes { background: #C82433; color: #FFFFFF; }
/* 알려 줄 친구 고르기 */
.st-sheet .pickbox {
    max-height: 210px; overflow-y: auto; display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 12px; padding: 2px;
}
.st-sheet .pk {
    border: 1px solid rgba(255,255,255,0.24); background: rgba(255,255,255,0.08); color: #FFFFFF;
    border-radius: 999px; padding: 8px 13px; cursor: pointer;
    font-family: inherit; font-size: 0.79rem; font-weight: 700;
}
.st-sheet .pk.on { background: #C82433; border-color: #C82433; }

/* 본 사람 목록 */
.st-seen {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 30;
    background: #0E1A18; border-radius: 22px 22px 0 0; max-height: 66%;
    display: none; flex-direction: column;
    padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
}
.st-seen.on { display: flex; }
.st-seen h4 { margin: 0 0 10px; font-size: 0.95rem; font-weight: 900; display: flex; align-items: center; gap: 8px; }
.st-seen h4 button { margin-left: auto; border: 0; background: transparent; color: rgba(255,255,255,0.6);
                     font-size: 1rem; cursor: pointer; }
.st-seen .body { overflow-y: auto; }
.st-seen .row { display: flex; align-items: center; gap: 10px; padding: 9px 2px; }
.st-seen .row .f { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
                   background: rgba(255,255,255,0.14); display: flex; align-items: center; justify-content: center;
                   font-size: 0.8rem; color: rgba(255,255,255,0.6); }
.st-seen .row .f img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-seen .row .n { flex: 1; min-width: 0; font-size: 0.85rem; font-weight: 700;
                   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-seen .row .p { font-size: 0.72rem; font-weight: 800; opacity: 0.75; flex: 0 0 auto; }
.st-seen .none { padding: 26px 8px; text-align: center; font-size: 0.8rem; opacity: 0.55; font-weight: 600; }

/* ⚠️ 아래 줄(답장칸 · 이모지) 높이만큼 띄운다.
      숫자를 박아 두면 이모지 줄이 열릴 때 그 뒤로 숨는다 — 실제로 재서 넣는다. */
/* ⚠️ 안내쪽지는 위쪽에 뜬다.
      아래에 두었더니 꾸미기 연장 줄 · 임시저장 · 올리기 단추를 번번이 가렸다.
      알리려던 것이 도리어 하려던 일을 막았다. 위는 늘 비어 있는 자리다. */
.st-toast {
    position: fixed; left: 50%;
    top: calc(env(safe-area-inset-top, 0px) + 14px);
    transform: translateX(-50%) translateY(-14px);
    background: rgba(255,255,255,0.95); color: #142421; padding: 11px 18px; border-radius: 999px;
    font-size: 0.82rem; font-weight: 800; opacity: 0; pointer-events: none;
    transition: 0.22s; z-index: 2147483612;
    max-width: calc(100vw - 28px); text-align: center; word-break: keep-all;
    box-shadow: 0 8px 24px -8px rgba(0,0,0,0.5);
    font-family: 'Pretendard', -apple-system, sans-serif;
}
.st-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ══════════════════════════════════════════════════════════
   🖼 바탕 사진을 움직인다 — 옮기고 · 키우고 · 돌린다

   ⚠️ 못 박아 두면(inset:0) 사진이 어디서 잘릴지 멤버가 고를 수 없다.
      가운데 기준으로 놓고, 비켜난 자리는 배경색이 받는다.
   ⚠️ 만들 때만 손가락을 받는다. 볼 때는 사진이 손짓을 먹으면 안 넘어간다.
   ══════════════════════════════════════════════════════════ */
.st-stage img.st-photo.movable {
    position: absolute; inset: auto; left: 50%; top: 50%;
    width: 100%; height: 100%; object-fit: cover;
    transform: translate(-50%, -50%);
    touch-action: none; pointer-events: auto;
    will-change: transform;
}
.st-layer.edit ~ * { }   /* (자리 지킴 — 아래 규칙의 순서를 분명히 하려고 둔다) */

/* 🎨 배경색 고르는 판 */
.st-sheet .bgrow {
    display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 16px;
}
.st-sheet .bgrow button {
    width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.35); padding: 0;
}
.st-sheet .bgrow button.on {
    border-color: #FFFFFF; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
}
.st-sheet .hint {
    margin: 0; font-size: 0.78rem; font-weight: 600; line-height: 1.6;
    color: rgba(255, 255, 255, 0.6); word-break: keep-all;
}

/* ══════════════════════════════════════════════════════════
   ⚠️ 만들던 것을 두고 나갈지 묻는 판 — 청취담 안내 팝업 결

   ⚠️ 사진을 고르고 글을 얹은 것이 뒤로가기 한 번에 사라지면
      멤버는 다시 만들 마음이 안 난다. 반드시 한 번 묻는다.
   ══════════════════════════════════════════════════════════ */
.st-sheet.leave .box { text-align: center; }
.st-sheet.leave h4 {
    margin: 2px 0 8px; font-size: 1.02rem; font-weight: 900; color: #FFFFFF;
}
.st-sheet.leave .hint {
    margin: 0 0 18px; font-size: 0.83rem; font-weight: 600; line-height: 1.7;
    color: rgba(255, 255, 255, 0.66); word-break: keep-all;
}
.st-sheet.leave button {
    width: 100%; border: 0; border-radius: 14px; cursor: pointer;
    padding: 14px 12px; font-family: inherit; font-size: 0.88rem; font-weight: 800;
}
/* 나가기는 되돌릴 수 없다 — 레드로 두되 아래 '계속 만들기' 를 더 크게 눈에 띄게 */
.st-sheet.leave .kill {
    background: rgba(200, 36, 51, 0.18); color: #FF8A94; margin-bottom: 9px;
}
.st-sheet.leave .ln { background: #FFFFFF; color: #10221E; }

/* ══════════════════════════════════════════════════════════
   ↔️ 줄맞춤 단추 — 왼쪽 · 가운데 · 오른쪽
   ══════════════════════════════════════════════════════════ */
.st-sheet .aligns button { padding: 11px; }
.st-sheet .aligns button i { font-size: 0.95rem; }
.st-sheet .aligns button.on { background: #C82433; color: #FFFFFF; }

/* ══════════════════════════════════════════════════════════
   ✍️ 글 편집기 — 적는 자리가 곧 미리보기

   ⚠️ 판 전체가 키보드 위에 선다(bottom: --kb).
      고를 것을 한 화면에 다 늘어놓았더니 키보드가 올라오는 순간 절반이 뒤로 깔렸다.
      연장은 아래 한 줄에 모으고, 누르면 그 자리에 작은 판이 뜬다.
   ══════════════════════════════════════════════════════════ */
.st-edit {
    position: absolute; left: 0; right: 0; top: 0; bottom: var(--kb, 0px);
    z-index: 22; display: none; flex-direction: column;
    background: rgba(6, 17, 15, 0.9); backdrop-filter: blur(8px);
    transition: bottom 0.16s ease;
}
.st-edit.on { display: flex; }

.ed-top {
    flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
    padding: calc(env(safe-area-inset-top, 0px) + 12px) 14px 12px;
}
.ed-top span {
    flex: 1; text-align: center; font-size: 0.92rem; font-weight: 900; color: #FFFFFF;
}
.ed-top button {
    flex: 0 0 auto; border: 0; border-radius: 999px; cursor: pointer;
    padding: 9px 15px; font-family: inherit; font-size: 0.82rem; font-weight: 800;
}
.ed-top .x { background: rgba(255,255,255,0.14); color: #FFFFFF; }
.ed-top .ok { background: #C82433; color: #FFFFFF; }

/* 적는 자리 — 얹힐 모습 그대로. 글 바탕은 글자 둘레에만 깔린다. */
.ed-stage {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    display: flex; align-items: center; justify-content: center;
    padding: 14px 18px;
    /* 투명한 자리라는 것을 격자로 알린다 — 사진 위에 얹힐 글이다 */
    background-image:
        linear-gradient(45deg, rgba(255,255,255,0.045) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255,255,255,0.045) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.045) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.045) 75%);
    background-size: 18px 18px;
    background-position: 0 0, 0 9px, 9px -9px, -9px 0;
    transition: background-color 0.2s ease;
}
/* ⚠️ 검은 글씨를 고르면 검은 바탕에 묻혀 무엇을 골랐는지 알 수 없다.
      글자색이 어두우면 뒤판을 밝게 뒤집는다. */
.ed-stage.onlight { background-color: rgba(255,255,255,0.88); }

.ed-text {
    max-width: 86%; outline: none;
    line-height: 1.35; letter-spacing: -0.02em;
    word-break: keep-all; white-space: pre-wrap; overflow-wrap: anywhere;
    text-shadow: 0 2px 10px rgba(0,0,0,0.45);
    caret-color: #F2596B;
}
/* 실제 스토리의 글 바탕(.st-text.box)과 똑같이 — 글자 둘레에만 */
.ed-text.box {
    background: rgba(0,0,0,0.42); padding: 6px 12px; border-radius: 12px;
    text-shadow: none;
}
.ed-text.empty::before {
    content: attr(data-ph);
    color: rgba(255,255,255,0.34); font-weight: 600; text-shadow: none;
}
.ed-stage.onlight .ed-text.empty::before { color: rgba(20,36,33,0.34); }

/* ── 연장 줄 — 키보드 바로 위 ── */
.ed-bar {
    flex: 0 0 auto; display: flex; gap: 6px;
    padding: 9px 10px calc(env(safe-area-inset-bottom, 0px) + 9px);
    background: rgba(0,0,0,0.42); border-top: 1px solid rgba(255,255,255,0.1);
}
.ed-bar button {
    flex: 1 1 0; min-width: 0; border: 0; border-radius: 13px; cursor: pointer;
    background: transparent; color: rgba(255,255,255,0.86);
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 8px 2px; font-family: inherit; font-size: 0.68rem; font-weight: 700;
}
.ed-bar button i { font-size: 1.02rem; }
.ed-bar button.on { background: rgba(255,255,255,0.16); color: #FFFFFF; }

/* ── 연장을 누르면 그 자리에 뜨는 작은 판 ── */
.ed-pop {
    flex: 0 0 auto; display: none;
    padding: 13px 14px 12px; background: rgba(0,0,0,0.5);
    border-top: 1px solid rgba(255,255,255,0.1);
}
.ed-pop.on { display: block; }
.ed-pop h5 {
    margin: 0 0 10px; font-size: 0.74rem; font-weight: 800;
    color: rgba(255,255,255,0.55); display: flex; align-items: baseline; gap: 7px;
}
.ed-pop h5 em {
    font-style: normal; font-size: 0.68rem; font-weight: 600;
    color: rgba(255,255,255,0.38);
}
.ed-pop .row {
    display: flex; gap: 8px; align-items: center;
    overflow-x: auto; scrollbar-width: none;
    /* ⚠️ 슬라이더 손잡이는 줄(5px)보다 훨씬 커서 위아래로 삐져나온다.
          padding 없이 두었더니 overflow 에 걸려 손잡이가 위아래로 잘렸다. */
    padding: 12px 2px;
}
.ed-pop .row::-webkit-scrollbar { display: none; }

.ed-pop .colors button {
    flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; padding: 0;
    border: 2px solid rgba(255,255,255,0.35); cursor: pointer;
}
.ed-pop .colors button.on {
    border-color: #FFFFFF; box-shadow: 0 0 0 3px rgba(255,255,255,0.32);
}

.ed-pop .fonts button {
    flex: 0 0 auto; border: 1.5px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.08); color: #FFFFFF;
    border-radius: 11px; padding: 9px 15px; cursor: pointer;
    font-size: 0.95rem; font-weight: 700; white-space: nowrap;
}
.ed-pop .fonts button.on { background: #C82433; border-color: #C82433; }

.ed-pop .fx button {
    flex: 1 1 0; min-width: 0; border: 1.5px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.08); color: #FFFFFF;
    border-radius: 12px; padding: 11px 6px; cursor: pointer;
    font-family: inherit; font-size: 0.78rem; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    white-space: nowrap;
}
.ed-pop .fx button.on { background: #C82433; border-color: #C82433; }

.ed-pop .aligns button {
    flex: 1 1 0; border: 0; border-radius: 12px; padding: 12px; cursor: pointer;
    background: rgba(255,255,255,0.12); color: #FFFFFF; font-size: 0.95rem;
}
.ed-pop .aligns button.on { background: #C82433; }

.ed-pop input.sz {
    flex: 1; margin: 4px 0; -webkit-appearance: none; appearance: none;
    height: 5px; border-radius: 999px; background: rgba(255,255,255,0.2); outline: none;
}
.ed-pop input.sz::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
    background: #C82433; border: 3px solid #FFFFFF;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.ed-pop input.sz::-moz-range-thumb {
    width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
    background: #C82433; border: 3px solid #FFFFFF;
}

/* ══════════════════════════════════════════════════════════
   🎯 골라 둔 것 — 한 번 누르면 골라지고, 그다음은 화면 아무 데서나

   ⚠️ 작게 줄여 둔 스티커는 그 위를 정확히 짚기가 어렵고,
      두 손가락을 올릴 자리조차 안 나와 키우기 · 돌리기가 아예 안 먹었다.
   ══════════════════════════════════════════════════════════ */
.st-layer.edit .sel {
    outline: 1.5px solid rgba(255,255,255,0.55); outline-offset: 5px;
    border-radius: 6px;
}
.st-layer.edit .st-pic.sel { border-radius: inherit; }

/* 골라 두었을 때만 뜨는 한 줄 — 지금 화면 손짓이 무엇을 다루는지 알린다 */
.st-selhint {
    position: absolute; left: 12px; right: 12px; bottom: 14px; z-index: 8;
    display: flex; align-items: center; gap: 8px;
    padding: 9px 14px; border-radius: 999px;
    background: rgba(15,15,15,0.72); backdrop-filter: blur(6px);
    color: rgba(255,255,255,0.86); font-size: 0.73rem; font-weight: 700;
    line-height: 1.4; word-break: keep-all;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity 0.16s ease, transform 0.16s ease;
    pointer-events: none;
}
.st-selhint.on { opacity: 1; visibility: visible; transform: translateY(0); }
.st-selhint i { flex: 0 0 auto; font-size: 0.85rem; color: #F2596B; }

/* 어느 판에서나 쓰는 '닫기' 결 */
.st-sheet .ln {
    width: 100%; border: 0; border-radius: 13px; cursor: pointer;
    padding: 13px 12px; font-family: inherit; font-size: 0.86rem; font-weight: 800;
    background: rgba(255,255,255,0.14); color: #FFFFFF;
}

/* ══════════════════════════════════════════════════════════
   📦 보관함 — 이 폰에 담아 둔 만들다 만 스토리들
   ══════════════════════════════════════════════════════════ */
.st-sheet .draftbox {
    max-height: 46vh; overflow-y: auto; margin-bottom: 12px;
    display: flex; flex-direction: column; gap: 8px;
}
.st-sheet .dr {
    display: flex; align-items: center; gap: 10px; padding: 8px;
    background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14);
    border-radius: 14px;
}
.st-sheet .dr img {
    width: 42px; height: 56px; flex: 0 0 auto; object-fit: cover;
    border-radius: 8px; display: block; background: rgba(255,255,255,0.1);
}
.st-sheet .dr .w { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.st-sheet .dr .w b { font-size: 0.82rem; font-weight: 800; }
.st-sheet .dr .w em {
    font-style: normal; font-size: 0.72rem; font-weight: 600;
    color: rgba(255,255,255,0.55);
}
.st-sheet .dr button {
    flex: 0 0 auto; border: 0; border-radius: 999px; cursor: pointer;
    font-family: inherit; font-weight: 800;
}
.st-sheet .dr .op {
    background: #C82433; color: #FFFFFF; padding: 9px 14px; font-size: 0.78rem;
}
.st-sheet .dr .rm {
    background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.7);
    width: 34px; height: 34px; font-size: 0.82rem;
}

/* ══════════════════════════════════════════════════════════
   🎉 「스토리가 올라갔어요」 — 갔다는 매듭

   ⚠️ 창이 닫히며 안내쪽지 한 줄이 스칠 뿐이면 '올라간 게 맞나' 싶어 또 올리게 된다.
      스토리 창(2147483610)보다 위에 떠야 닫히는 순간에도 가려지지 않는다.
   ══════════════════════════════════════════════════════════ */
.st-cheer {
    position: fixed; inset: 0; z-index: 2147483614;
    display: flex; align-items: center; justify-content: center; padding: 24px;
    background: rgba(6, 17, 15, 0.62); backdrop-filter: blur(4px);
    font-family: 'Pretendard', -apple-system, sans-serif; letter-spacing: -0.02em;
    opacity: 0; transition: opacity 0.22s ease;
}
.st-cheer.on { opacity: 1; }
.st-cheer .in {
    width: 100%; max-width: 320px; text-align: center;
    background: #10221E; color: #FFFFFF; border-radius: 22px;
    padding: 26px 22px 20px;
    box-shadow: 0 26px 60px -18px rgba(0,0,0,0.7);
    transform: translateY(14px) scale(0.96); transition: transform 0.24s cubic-bezier(.2,.9,.3,1.2);
}
.st-cheer.on .in { transform: translateY(0) scale(1); }
.st-cheer .mk {
    display: inline-flex; align-items: center; justify-content: center;
    width: 54px; height: 54px; border-radius: 50%; margin-bottom: 13px;
    background: #123C36; color: #6FE0BC; font-size: 1.35rem;
}
.st-cheer b { display: block; font-size: 1.04rem; font-weight: 900; margin-bottom: 8px; }
.st-cheer p {
    margin: 0 0 18px; font-size: 0.83rem; font-weight: 600; line-height: 1.7;
    color: rgba(255,255,255,0.66); word-break: keep-all;
}
.st-cheer button {
    width: 100%; border: 0; border-radius: 14px; cursor: pointer;
    padding: 13px; font-family: inherit; font-size: 0.88rem; font-weight: 800;
}
/* 올린 것을 바로 보러 가는 길 — 여기가 지금 갈 길이다 */
.st-cheer .go { background: #C82433; color: #FFFFFF; }
/* 그냥 닫기 — 뒤로 물러나 있다 */
.st-cheer .ln {
    background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.82); margin-top: 8px;
}

/* 🧲 반듯한 자리에 붙었을 때 — 가운데 십자선이 잠깐 뜬다.
   ⚠️ 손끝만으로는 붙었는지 알 수 없다. 눈으로도 알려 줘야 '맞췄다' 는 매듭이 지어진다. */
.st-stage::before,
.st-stage::after {
    content: ''; position: absolute; z-index: 2; pointer-events: none;
    background: rgba(255, 255, 255, 0.55);
    opacity: 0; transition: opacity 0.12s ease;
}
.st-stage::before { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); }
.st-stage::after  { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); }
.st-stage.snapped::before, .st-stage.snapped::after { opacity: 1; }

/* 💪 굵게 — 글씨체마다 굵은 벌이 따로 있는 것이 아니다.
   ⚠️ 「동글」·「굵게」 처럼 한 벌만 있는 글씨체는 font-weight 를 올려도 아무 일이 없다.
      브라우저가 흉내 내 주기도 하고 안 해 주기도 해서, 되는 글씨체와 안 되는 글씨체가 갈렸다.
      글자 테두리를 아주 얇게 덧그어 어느 글씨체에서나 똑같이 굵어지게 한다. */
.st-text.bold, .ed-text.bold {
    -webkit-text-stroke: 0.022em currentColor;
    paint-order: stroke fill;
}

/* 「다시 촬영하기」 — 버리고 나가는 것과 계속 만드는 것 사이. 둘 다 아닌 세 번째 길이다. */
.st-sheet.leave .again {
    background: rgba(255,255,255,0.14); color: #FFFFFF; margin-bottom: 9px;
}

/* ══════════════════════════════════════════════════════════
   🖼 사진을 «불러오는 중» 과 «못 불러온» 것을 갈라 보여 준다  (2026-09-05, 대표 지적)

   여태는 못 받아 오면 까만 바탕에 글자만 남았다. 올린 사람은 사진이 사라진 줄 알고,
   보는 사람은 무엇을 보라는 것인지 알 수가 없었다. 둘을 갈라 말해 준다.

   ⚠️ 글자만 남는 것과 «까맣게 두는 것» 은 다르다. 까만 것은 스토리의 결이라
      그대로 두고, 그 위에 무슨 일인지만 얹는다.
   ══════════════════════════════════════════════════════════ */
@keyframes stSpin { to { transform: rotate(360deg); } }
.st-stage.st-loading::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 30px; height: 30px; margin: -15px 0 0 -15px;
    border-radius: 50%; z-index: 2; pointer-events: none;
    border: 3px solid rgba(255, 255, 255, 0.22);
    border-top-color: rgba(255, 255, 255, 0.85);
    animation: stSpin .8s linear infinite;
}
/* ⚠️ 무대에는 십자 안내선(::before · ::after)이 이미 걸려 있다. 그것은 «만들 때» 만
      뜨므로(.snapped) 볼 때는 겹치지 않는다. */
.st-stage.st-nopic::after {
    content: '사진을 불러오지 못했어요';
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    z-index: 2; pointer-events: none; white-space: nowrap;
    padding: 10px 15px; border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.8rem; font-weight: 800; letter-spacing: -0.01em;
    animation: none; border: 0;
}

/* ══════════════════════════════════════════════════════════
   📤 올리는 동안 — 스토리 «아래» 에 뜨는 진행 띠  (2026-09-05, 대표 요청)

   ⚠️ 아래에 둔다. 사진 한가운데를 가리면 무엇을 올리는 중인지 안 보인다.
   ⚠️ 연장 줄(.st-tools)보다 위에 뜬다 — 올리는 동안에는 이것이 가장 중요한 소식이다.
   ⚠️ 작은 사진에서는 아예 안 나타난다(350ms 넘게 걸릴 때만). 눈 깜짝할 새
      번쩍이는 띠는 알림이 아니라 잡음이다.
   ══════════════════════════════════════════════════════════ */
.st-up {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 13px 16px calc(15px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.72) 34%);
    pointer-events: none;
    opacity: 0; transform: translateY(10px);
    transition: opacity .22s ease, transform .22s ease;
}
.st-up.on { opacity: 1; transform: none; }
.st-up .bar {
    height: 6px; border-radius: 999px; overflow: hidden;
    background: rgba(255, 255, 255, 0.22);
}
.st-up .bar i {
    display: block; height: 100%; width: 0; border-radius: 999px;
    background: linear-gradient(90deg, #6FD39A, #FFFFFF);
    /* ⚠️ 너비는 자주 바뀐다 — 옮겨 가는 결만 부드럽게 하고 길이는 짧게 둔다.
          길게 두면 실제보다 늦게 따라와 「멈춘 것처럼」 보인다. */
    transition: width .18s linear;
}
.st-up .say {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 7px; color: #FFFFFF;
}
.st-up .say b { font-size: 0.82rem; font-weight: 900; letter-spacing: -0.01em; }
.st-up .say span {
    font-size: 0.82rem; font-weight: 900;
    font-variant-numeric: tabular-nums;   /* 숫자가 바뀌어도 자리가 안 흔들린다 */
    color: rgba(255, 255, 255, 0.82);
}