/* ══════════════════════════════════════════════════════════
   📷 청취담 카메라 — 서식

   찍는 화면은 사진이 주인공이라 검게 간다.
   ⚠️ 보이는 대로 찍혀야 한다 — 미리 보는 칸을 비율에 맞춰 잘라 두고,
      저장할 때도 같은 자리를 잘라 낸다(스크립트 참고).
   ══════════════════════════════════════════════════════════ */
.cam-wrap {
    position: fixed; inset: 0; z-index: 2147483640;
    background: #000000; display: none; flex-direction: column;
    font-family: 'Pretendard', -apple-system, sans-serif; letter-spacing: -0.02em;
    color: #FFFFFF; overscroll-behavior: contain;
}
.cam-wrap.on { display: flex; }
.cam-wrap * { -webkit-tap-highlight-color: transparent; }

.cam-top {
    position: absolute; left: 0; right: 0; top: 0; z-index: 3;
    background: linear-gradient(180deg, rgba(0,0,0,0.55), transparent);
    flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
    padding: calc(env(safe-area-inset-top, 0px) + 12px) 14px 12px;
}
.cam-top .ttl { flex: 1; text-align: center; font-size: 0.9rem; font-weight: 800; }
.cam-top .x {
    width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255, 255, 255, 0.14); color: #FFFFFF; font-size: 0.95rem;
    display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.cam-top .x:hover { background: rgba(255, 255, 255, 0.26); }

/* 찍힐 만큼만 보여 준다 — 넘치는 쪽은 잘라서 감춘다.
   ⚠️ 만들기 화면(full)에서는 테두리 없이 화면을 꽉 채운다.
      검은 여백이 남으면 '덜 만든 화면' 처럼 보인다. */
.cam-frame {
    position: relative; width: 100%; max-width: 460px;
    aspect-ratio: 9 / 16; max-height: 100%;
    background: #0A0A0A; border-radius: 18px; overflow: hidden;
    margin: auto;
}
.cam-wrap.has-tabs .cam-foot { bottom: calc(env(safe-area-inset-bottom, 0px) + 62px); }
.cam-wrap.full .cam-frame {
    position: absolute; inset: 0; width: 100%; max-width: none;
    aspect-ratio: auto; max-height: none; border-radius: 0; margin: 0;
}
.cam-frame video, .cam-frame img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.cam-frame img { display: none; }
/* 찍은 뒤에는 사진을 보여 준다 */
.cam-wrap.shot .cam-frame video { display: none; }
.cam-wrap.shot .cam-frame img { display: block; }
/* 앞 카메라는 거울처럼 — 그래야 손이 가는 대로 움직인다 */
.cam-wrap.mirror .cam-frame video { transform: scaleX(-1); }

.cam-msg {
    position: absolute; left: 16px; right: 16px; top: 50%; transform: translateY(-50%); z-index: 3;
    display: none; margin: 0 auto; max-width: 460px; text-align: center;
    font-size: 0.84rem; font-weight: 600; line-height: 1.7;
    color: rgba(255, 255, 255, 0.82); word-break: keep-all;
    /* ⚠️ 줄바꿈을 넣은 안내가 한 줄로 뭉치면 읽기 어렵다 */
    white-space: pre-line;
}

.cam-foot {
    position: absolute; left: 0; right: 0; z-index: 3;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
    flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 14px;
    padding: 14px 16px;
}
/* 찍는 단추 — 가운데 크게, 손이 바로 가는 자리 */
.cam-foot .shutter {
    width: 74px; height: 74px; border-radius: 50%; cursor: pointer; padding: 0;
    border: 4px solid rgba(255, 255, 255, 0.9); background: transparent;
    display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.cam-foot .shutter span {
    width: 58px; height: 58px; border-radius: 50%; background: #FFFFFF;
    transition: transform 0.12s ease;
}
.cam-foot .shutter:active span { transform: scale(0.86); }
.cam-foot .sm {
    width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255, 255, 255, 0.14); color: #FFFFFF; font-size: 1rem;
    display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.cam-foot .sm:hover { background: rgba(255, 255, 255, 0.26); }
/* 찍은 뒤 · 못 열었을 때의 두 단추 */
.cam-foot .ln, .cam-foot .go {
    flex: 1 1 auto; max-width: 220px; border: 0; border-radius: 14px; cursor: pointer;
    padding: 14px 12px; font-family: inherit; font-size: 0.86rem; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.cam-foot .ln { background: rgba(255, 255, 255, 0.16); color: #FFFFFF; }
.cam-foot .go { background: #C82433; color: #FFFFFF; }
.cam-foot .ln:hover { background: rgba(255, 255, 255, 0.26); }

/* ══════════════════════════════════════════════════════════
   🗂 아래 갈래 — 무엇으로 올릴지 (일상 스토리 · 모임 스토리)

   ⚠️ 고른 갈래가 한눈에 보여야 한다. 흰 글씨에 아래 밑줄 하나면 충분하다 —
      상자를 두르면 사진 위가 답답해진다.
   ══════════════════════════════════════════════════════════ */
.cam-tabs {
    position: absolute; left: 0; right: 0; z-index: 3;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 6px);
    display: flex; align-items: center; justify-content: center; gap: 26px;
    padding: 10px 16px 12px;
}
.cam-tabs button {
    position: relative; border: 0; background: transparent; cursor: pointer;
    padding: 6px 2px; font-family: inherit;
    font-size: 0.86rem; font-weight: 700; color: rgba(255, 255, 255, 0.55);
    transition: color 0.15s ease;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
.cam-tabs button.on { color: #FFFFFF; font-weight: 900; }
.cam-tabs button.on::after {
    content: ''; position: absolute; left: 50%; bottom: 0;
    transform: translateX(-50%);
    width: 5px; height: 5px; border-radius: 50%; background: #C82433;
}

/* 🅰 왼쪽 연장 줄 — 사진 없이 배경만으로 가는 길 */
.cam-side {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%); z-index: 3;
    display: flex; flex-direction: column; gap: 12px;
}
.cam-side button {
    width: 52px; border: 0; background: transparent; color: #FFFFFF; cursor: pointer;
    padding: 0; font-family: inherit;
    display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.cam-side button i {
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(0, 0, 0, 0.34); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.cam-side button span {
    font-size: 0.66rem; font-weight: 700; text-shadow: 0 1px 5px rgba(0, 0, 0, 0.6);
}
.cam-side button:active i { background: rgba(0, 0, 0, 0.55); }
/* 찍은 사진을 보는 중에는 연장이 필요 없다 */
.cam-wrap.shot .cam-side, .cam-wrap.shot .cam-tabs { display: none; }

/* ══════════════════════════════════════════════════════════
   🤏🎯 두 손가락 · 눌러서 초점

   ⚠️ 찍는 화면에서 브라우저의 '화면 확대' 가 걸리면 무엇이 찍히는지 알 수 없다.
      손짓은 우리가 받아 카메라 화각에 쓴다.
   ══════════════════════════════════════════════════════════ */
.cam-wrap, .cam-frame { touch-action: none; }
/* 글을 적는 칸은 예외 — 없더라도 나중에 생길 때를 대비해 열어 둔다 */
.cam-wrap input, .cam-wrap textarea { touch-action: auto; }

/* 눌러서 초점 — 기기가 못 받아 줘도 원은 반드시 그린다.
   ⚠️ 아무 표시가 없으면 '눌러도 안 된다' 고 느낀다. */
.cam-focus {
    position: absolute; z-index: 4; pointer-events: none;
    width: 74px; height: 74px; margin: -37px 0 0 -37px;
    border: 2px solid rgba(255, 255, 255, 0.95); border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28), inset 0 0 0 1px rgba(0, 0, 0, 0.28);
    animation: camFocus 0.9s ease forwards;
}
@keyframes camFocus {
    0%   { transform: scale(1.5); opacity: 0; }
    22%  { transform: scale(1);   opacity: 1; }
    70%  { transform: scale(1);   opacity: 1; }
    100% { transform: scale(0.92); opacity: 0; }
}

/* ══════════════════════════════════════════════════════════
   ⏳ 카메라가 깨어나는 동안

   ⚠️ 검은 화면만 몇 초 두면 '고장 났나' 싶어 뒤로 나가 버린다.
      말 한 줄과 가느다란 띠 하나면 충분하다 — 요란하면 기다림이 더 길게 느껴진다.
   ══════════════════════════════════════════════════════════ */
.cam-wait {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    z-index: 4; display: none; flex-direction: column; align-items: center; gap: 13px;
    pointer-events: none;
}
.cam-wait.on { display: flex; }
.cam-wait .bar {
    display: block; width: 132px; height: 2.5px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.18); overflow: hidden;
}
.cam-wait .bar i {
    display: block; width: 40%; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, rgba(255,255,255,0.25), #FFFFFF, rgba(255,255,255,0.25));
    animation: camWait 1.15s ease-in-out infinite;
}
@keyframes camWait {
    0%   { transform: translateX(-110%); }
    100% { transform: translateX(260%); }
}
.cam-wait .t {
    font-size: 0.78rem; font-weight: 700; letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.72);
}
@media (prefers-reduced-motion: reduce) {
    .cam-wait .bar i { animation-duration: 2.4s; }
}

/* 📷 카메라 권한 안내 — 「어떻게 켜는지」 를 읽히게 (2026-09-02, 대표 요청)

   까만 화면에 흐린 글씨 몇 줄로는 안내가 안 됐다. 스토리를 열 때마다 막히는데
   무엇을 눌러야 하는지 알 수 없어, 그냥 나가 버리는 자리였다.
   ⚠️ 판(카드)으로 세워 「이건 안내다」 를 먼저 알게 한다.
   ⚠️ 글자를 키우고 또렷하게 — 어두운 자리에서 폰을 보는 사람이 읽어야 한다. */
.cam-msg.guide {
    padding: 18px 18px 16px;
    border-radius: 18px;
    background: rgba(20, 22, 21, 0.82);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    color: #FFFFFF;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.75;
    letter-spacing: -0.01em;
    /* ⚠️ 가운데 맞춤을 «푼다» (2026-09-04, 대표 제보).
          「① 사이트 — 자물쇠 → 권한 → 카메라 허용」 처럼 «순서를 적은 줄» 은
          가운데로 모으면 접히는 자리가 줄마다 달라, 화살표 사이에서 끊겨
          다음 줄에 「허용」 만 덩그러니 남는다. 순서는 왼쪽에서 시작해야 읽힌다.
       ⚠️ 접힌 뒷줄은 안으로 들여 준다(hanging indent) — 접혔다는 것이 눈에 보이게. */
    text-align: left;
    padding-left: 20px;
    text-indent: -6px;
}
.cam-msg.guide::before {
    content: '📷';
    display: block;
    margin-bottom: 8px;
    font-size: 1.6rem;
    line-height: 1;
    /* 글은 왼쪽에서 시작하지만 그림표는 가운데 — 판의 얼굴이라 */
    text-align: center;
    text-indent: 0;
}

/* ══════════════════════════════════════════════════════════
   🏷 지금 몇 배인가 — 네이티브 카메라처럼 한 귀퉁이에 적어 준다  (2026-09-07)

   ⚠️ 이것은 꾸밈이 아니라 «알림» 이다. 렌즈가 갈아 끼워졌는지를 눈으로 아는 유일한 길이라,
      확대할 때 잠깐 떴다가 스스로 사라진다.
   ⚠️ 미리보기 «위» 에 뜨되 손짓을 가로채면 안 된다 — 두 손가락이 이 위를 지나가도
      확대가 끊기지 않아야 한다(pointer-events: none).
   ══════════════════════════════════════════════════════════ */
.cam-zoom {
    position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%) scale(0.92);
    z-index: 6; pointer-events: none;
    min-width: 46px; padding: 6px 12px; border-radius: 999px;
    background: rgba(0, 0, 0, 0.52);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
    color: #FFFFFF; text-align: center;
    font-size: 0.82rem; font-weight: 900; letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;   /* 숫자가 바뀌어도 자리가 안 흔들린다 */
    opacity: 0; transition: opacity .18s ease, transform .18s ease;
}
.cam-zoom.on { opacity: 1; transform: translateX(-50%) scale(1); }

/* ══════════════════════════════════════════════════════════
   🩺 카메라 진단 — 머리말을 꾹 누르면 뜬다  (2026-09-07)

   ⚠️ 기기마다 렌즈 사정이 달라, 짐작으로 고치면 이 폰에서 되고 저 폰에서 안 된다.
      여기 적히는 «날것» 을 보고 고치려고 둔 자리다.
   ⚠️ 글이 길어 넘어갈 수 있으므로 안쪽이 스스로 넘어간다.
   ══════════════════════════════════════════════════════════ */
.cam-diag {
    position: absolute; inset: 0; z-index: 40;
    display: flex; align-items: center; justify-content: center; padding: 18px;
    background: rgba(0, 0, 0, 0.78);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.cam-diag .in {
    width: 100%; max-width: 360px; max-height: 82%;
    display: flex; flex-direction: column; gap: 10px;
    padding: 16px; border-radius: 18px;
    background: #10201C; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.cam-diag b { color: #FFFFFF; font-size: 0.92rem; font-weight: 900; }
.cam-diag pre {
    flex: 1 1 auto; margin: 0; overflow: auto; -webkit-overflow-scrolling: touch;
    white-space: pre-wrap; word-break: break-all;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.68rem; line-height: 1.6; color: #CFE3DB;
}
.cam-diag .btns { display: flex; gap: 7px; }
.cam-diag .btns button {
    flex: 1 1 0; border: 0; border-radius: 11px; padding: 10px 6px; cursor: pointer;
    font-family: inherit; font-size: 0.78rem; font-weight: 900;
    background: rgba(255, 255, 255, 0.14); color: #FFFFFF;
}
.cam-diag .btns button[disabled] { opacity: .5; }
.cam-diag .btns button:active { background: rgba(255, 255, 255, 0.24); }

/* ══════════════════════════════════════════════════════════
   🧊 갈아타는 동안 붙들어 두는 «마지막 한 칸»  (2026-09-07)

   ⚠️ 미리보기와 «같은 결»(object-fit: cover)이어야 한다. 다르게 놓으면
      갈아타는 순간 그림이 한 번 튄다.
   ⚠️ 사라질 때만 부드럽게 — 뜰 때는 곧바로여야 검은 참이 안 보인다.
   ══════════════════════════════════════════════════════════ */
.cam-freeze {
    position: absolute; inset: 0; z-index: 2;
    width: 100%; height: 100%; object-fit: cover;
    display: block !important;          /* .cam-frame img 를 감춰 두는 규칙을 넘어선다 */
    opacity: 1; transition: opacity .24s ease;
    pointer-events: none;
}
.cam-freeze.go { opacity: 0; }

/* 🏷 갈아탄 렌즈 이름 — 가운데에 잠깐
   ⚠️ 알약(배지)을 씌우지 않는다. 찍는 화면 한가운데에 상자가 뜨면 그 자체가 가림막이 된다.
      글씨만 두고, 그늘로 또렷하게 만든다 — 밝은 데서도 어두운 데서도 읽힌다(2026-09-07, 대표 요청).
   ⚠️ 그늘은 «두 겹» 이다. 좁고 진한 것이 글자 모서리를 세우고,
      넓고 옅은 것이 바탕과 떼어 놓는다. 한 겹만으로는 흰 벽 앞에서 흐려진다. */
.cam-lens {
    position: absolute; left: 50%; top: 50%; z-index: 7;
    transform: translate(-50%, -50%) scale(0.96);
    color: #FFFFFF; white-space: nowrap;
    font-size: 1.02rem; font-weight: 900; letter-spacing: 0.16em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65), 0 3px 14px rgba(0, 0, 0, 0.55);
    opacity: 0; pointer-events: none;
    transition: opacity .16s ease, transform .16s ease;
}
.cam-lens.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }