/* 디자인 토큰 — 따뜻한 종이색 바탕 · 먹색 글씨 · 주황은 강조에만 */
:root {
  --page: #e9e7e2; --page-text: #1f2328; --page-muted: #5f6670; --page-card: #f7f6f3; --page-line: #d6d3cc;
  --bg: #f5f4f1; --card: #ffffff; --text: #17181c; --muted: #74767e; --hair: #eceae5; --soft: #f1f0ec; --ink: #17181c;
  --brand: #f04e1a; --brand-soft: #ffefe8; --ok: #12a150; --ok-soft: #e6f6ec;
  --warn: #b45309; --warn-soft: #fff5e0; --bad: #e03131; --bad-soft: #fdecec; --blue: #2f6bff; --blue-soft: #eaf0ff;
  --shadow: 0 1px 2px rgba(23,24,28,.04), 0 8px 24px rgba(23,24,28,.05);
  --mark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23FF7A3D'/><stop offset='1' stop-color='%23E23F0B'/></linearGradient></defs><rect width='64' height='64' rx='18' fill='url(%23g)'/><path d='M9 32c5.8-9.8 13.8-15.2 23-15.2S49.2 22.2 55 32c-5.8 9.8-13.8 15.2-23 15.2S14.8 41.8 9 32z' fill='%23fff'/><circle cx='32' cy='32' r='9.6' fill='%2317181C'/><circle cx='35.6' cy='28.4' r='3.1' fill='%23fff'/></svg>");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --page: #141517; --page-text: #e8e6e3; --page-muted: #a3a8ae; --page-card: #1d1f22; --page-line: #2c2f33; }
}
:root[data-theme="dark"] { --page: #141517; --page-text: #e8e6e3; --page-muted: #a3a8ae; --page-card: #1d1f22; --page-line: #2c2f33; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--page); color: var(--page-text);
  font-family: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  -webkit-font-smoothing: antialiased; letter-spacing: -.01em; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
input { font: inherit; color: inherit; }

.stage { min-height: 100%; display: flex; gap: 32px; justify-content: center; align-items: flex-start; padding: 28px 16px; flex-wrap: wrap; }
.phone { width: 390px; height: 820px; border-radius: 46px; background: #0d0e10; padding: 11px; box-shadow: 0 20px 50px rgba(0,0,0,.2); flex: none; }
.screen { width: 100%; height: 100%; border-radius: 36px; overflow: hidden; background: var(--bg); color: var(--text);
  position: relative; font-size: 14px; line-height: 1.5; }
#app { position: absolute; inset: 0; display: flex; flex-direction: column; }

/* 시연 도구 */
.demo { width: 320px; background: var(--page-card); border: 1px solid var(--page-line); border-radius: 18px; padding: 18px; font-size: 13.5px; line-height: 1.6; }
.demo h1 { font-size: 1.15rem; margin: 0 0 2px; }
.demo h2 { font-size: .95rem; margin: 16px 0 6px; }
.demo p { margin: 4px 0; color: var(--page-muted); }
.demo .dbtn { display: block; width: 100%; margin: 6px 0; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--page-line); background: var(--page); font-weight: 600; text-align: left; }
.demo .dbtn:hover { border-color: var(--brand); }
.demo .danger { color: var(--bad); }
.devsel { display: flex; gap: 6px; }
.devsel button { flex: 1; padding: 8px; border-radius: 10px; border: 1px solid var(--page-line); background: var(--page); font-weight: 600; text-align: center; }
.devsel button.on { border-color: var(--brand); color: var(--brand); background: var(--page-card); box-shadow: inset 0 0 0 1px var(--brand); }
.demo ul { margin: 4px 0; padding-left: 18px; color: var(--page-muted); }
.demo kbd { border: 1px solid var(--page-line); border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; font-size: 12px; background: var(--page); }
.tagreal { color: var(--ok); font-weight: 700; } .tagsim { color: var(--warn); font-weight: 700; }

@media (max-width: 480px), (pointer: coarse) and (max-height: 500px) {
  .stage { padding: 0; gap: 0; }
  .phone { width: 100%; height: 100dvh; border-radius: 0; padding: 0; box-shadow: none; }
  .screen { border-radius: 0; }
  .demo { width: 100%; border-radius: 0; margin: 0; }
  .tabbar { height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
  /* 진짜 폰에서는 가짜 상태 표시줄(시간·카메라 구멍·5G)을 숨기고 여백만 남긴다 */
  .status { padding-top: env(safe-area-inset-top); height: calc(10px + env(safe-area-inset-top)); }
  .status > * { display: none; }
}

/* 첫 화면 (간편 로그인) */
.auth { justify-content: center; gap: 18px; padding: 16px 20px 20px; }
.auth-top { text-align: center; }
.auth-top .eye { width: 64px; height: 64px; border-radius: 19px; box-shadow: 0 12px 28px rgba(240,78,26,.3); }
.auth-top h1 { margin: 18px 0 6px; font-size: 24px; font-weight: 800; letter-spacing: -.04em; }
.auth-top p { margin: 0; color: var(--muted); font-size: 14px; }
.auth-card { background: var(--card); border-radius: 24px; padding: 20px 18px; box-shadow: var(--shadow); border: 1px solid rgba(23,24,28,.04); display: flex; flex-direction: column; gap: 10px; }
.pbtn { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; height: 52px; border-radius: 14px; font-weight: 600; font-size: 15px; letter-spacing: -.02em; transition: transform .12s; }
.pbtn:active { transform: scale(.985); }
.pbtn[disabled] { background: var(--soft) !important; color: #a3a5ab !important; box-shadow: none !important; cursor: default; }
.divider { display: flex; align-items: center; gap: 10px; color: #a3a5ab; font-size: 11.5px; margin: 4px 0 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--hair); }

/* 간편 로그인 버튼 로고 */
.plogo { width: 20px; height: 20px; display: inline-grid; place-items: center; flex: none; }
.plogo svg { width: var(--s, 18px); height: var(--s, 18px); display: block; }
button[disabled] .plogo svg path { fill: currentColor; }   /* 준비 중이면 회색 로고 */

/* 앱 공통 */
.status { height: 34px; flex: none; display: flex; justify-content: space-between; align-items: center; padding: 0 26px; font-size: 12px; font-weight: 600; }
.status .notch { width: 96px; height: 24px; background: #0d0e10; border-radius: 14px; }
.body { flex: 1; overflow-y: auto; padding: 4px 16px 14px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: none; }
.body::-webkit-scrollbar { display: none; }
.tabbar { flex: none; height: 64px; border-top: 1px solid var(--hair); background: rgba(255,255,255,.94); backdrop-filter: blur(12px); display: flex; justify-content: space-around; align-items: center; font-size: 10.5px; font-weight: 600; color: #9a9ca3; padding-bottom: 6px; }
.tabbar button { text-align: center; position: relative; min-width: 56px; }
.tabbar .on { color: var(--ink); font-weight: 700; }
.tabbar .on svg { color: var(--brand); }
.tabbar i { display: grid; place-items: center; height: 26px; font-style: normal; }
.tabbar i svg { width: 23px; height: 23px; }
.tabbar .dot { position: absolute; top: -3px; right: 10px; min-width: 16px; height: 16px; border-radius: 99px; background: var(--bad); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; padding: 0 4px; }

.title { display: flex; justify-content: space-between; align-items: center; min-height: 34px; }
.title h2 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.03em; }
.back { font-size: 26px; line-height: 1; color: var(--text); padding: 0 8px 2px 0; }
.icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--text); background: var(--card); box-shadow: var(--shadow); }
.icon svg { width: 20px; height: 20px; }
.logo { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 21px; letter-spacing: -.04em; }
.eye { display: inline-block; flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--mark) center / cover no-repeat; box-shadow: 0 4px 10px rgba(240,78,26,.25); }
.c { background: var(--card); border-radius: 20px; padding: 16px; border: 1px solid rgba(23,24,28,.04); box-shadow: var(--shadow); display: block; width: 100%; }
button.c { transition: transform .12s; }
button.c:active { transform: scale(.99); }
.hero { position: relative; overflow: hidden; background: radial-gradient(120% 140% at 100% 0%, #3a2a24 0%, #1d1e23 55%, #17181c 100%); color: #fff; border: none; padding: 18px; }
.hero-top { display: flex; justify-content: space-between; align-items: center; }
.hero-tag { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; opacity: .85; }
.hero-tag .live { width: 8px; height: 8px; border-radius: 50%; background: #ff4d2e; box-shadow: 0 0 0 4px rgba(255,77,46,.25); animation: blink 1.4s infinite; }
.hero-go { width: 34px; height: 34px; border-radius: 50%; background: var(--brand); display: grid; place-items: center; font-size: 17px; box-shadow: 0 6px 16px rgba(240,78,26,.45); }
.hero-title { font-size: 24px; font-weight: 800; letter-spacing: -.04em; margin: 14px 0 12px; }
.hero-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.hero-meta span { font-size: 11.5px; padding: 4px 9px; border-radius: 99px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.88); }
.row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.big { font-size: 28px; font-weight: 800; letter-spacing: -.04em; }
.pill { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.p-ok { background: var(--ok-soft); color: var(--ok); } .p-warn { background: var(--warn-soft); color: var(--warn); }
.p-blue { background: var(--blue-soft); color: var(--blue); } .p-brand { background: var(--brand-soft); color: var(--brand); }
.p-gray { background: var(--soft); color: var(--muted); } .p-bad { background: var(--bad-soft); color: var(--bad); }
.btn { display: block; width: 100%; border-radius: 14px; padding: 15px 14px; text-align: center; font-weight: 700; font-size: 15px; letter-spacing: -.02em; transition: transform .12s, filter .12s; }
.btn:active { transform: scale(.985); }
.btn-brand { background: var(--brand); color: #fff; box-shadow: 0 8px 18px rgba(240,78,26,.22); }
.btn-brand:hover { filter: brightness(1.06); }
.btn-line { border: 1.5px solid var(--hair); background: var(--card); color: var(--text); }
.btn[disabled] { opacity: .45; cursor: not-allowed; filter: none; }
.toggle { width: 44px; height: 26px; border-radius: 99px; background: var(--ok); position: relative; flex: none; transition: background .15s; }
.toggle::after { content: ""; position: absolute; right: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: all .15s; }
.toggle.off { background: #d9d8d3; }
.toggle.off::after { right: 21px; }
.list > * { padding: 10px 0; border-bottom: 1px solid var(--hair); }
.list > *:last-child { border-bottom: none; padding-bottom: 2px; }
.empty { text-align: center; color: var(--muted); padding: 20px 0; font-size: 12.5px; }
.bar { height: 6px; border-radius: 99px; background: var(--hair); overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--brand); border-radius: 99px; transition: width .4s; }
.kv { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 3px 0; }
.kv > span:last-child { text-align: right; word-break: break-all; }
.mono { font-family: Consolas, monospace; font-size: 11px; }
.note { font-size: 11.5px; color: var(--muted); }

/* 입력 */
.field { border: 1.5px solid var(--hair); background: var(--card); border-radius: 14px; padding: 10px 14px; display: block; }
.field:focus-within { border-color: var(--brand); }
.field .lab { font-size: 11px; color: var(--muted); display: block; }
.field input { border: 0; outline: 0; width: 100%; background: transparent; font-size: 15px; padding: 2px 0; }
.steps { display: flex; gap: 4px; }
.steps span { flex: 1; height: 4px; border-radius: 99px; background: var(--hair); }
.steps span.on { background: var(--brand); }
.chk { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; width: 100%; }
.chk i { flex: none; width: 19px; height: 19px; border-radius: 5px; background: var(--brand); color: #fff; font-style: normal; font-size: 12px; display: grid; place-items: center; margin-top: 1px; }
.chk i.off { background: var(--card); border: 1.5px solid #d4d3ce; color: transparent; }
.perm { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--hair); }
.perm:last-child { border-bottom: none; }
.perm .ic { flex: none; width: 38px; height: 38px; border-radius: 12px; background: var(--soft); display: grid; place-items: center; font-size: 17px; }
.perm > div { flex: 1; }

/* 녹화 */
.cam { background: #0b0d10; color: #fff; }
.cam .status { color: #fff; position: relative; z-index: 2; }
.cam canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }   /* 녹화되는 16:9 화면 전체를 그대로 (남는 곳은 검은 여백) */
.cam-layer { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 6px; padding: 6px 14px; }
.rec { display: inline-flex; align-items: center; gap: 6px; background: rgba(0,0,0,.5); padding: 4px 10px; border-radius: 99px; font-weight: 700; font-size: 12px; }
.rec::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.3); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .3; } }
.glass { background: rgba(0,0,0,.5); backdrop-filter: blur(4px); border-radius: 12px; padding: 6px 10px; font-size: 12px; }
.glass button { text-decoration: underline; }
.cam-layer > .glass, #lastReports .glass > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#lastReports .glass > span:last-child { flex: none; }
@media (max-height: 640px) {
  #lastReports .glass:nth-child(n+2), #voiceInfo { display: none; }
  .shot { width: 72px; height: 72px; font-size: 15px; }
  .cam-bottom { padding: 12px 16px 16px; gap: 6px; }
}
/* 가로로 녹화할 때: 신고 버튼을 오른쪽 세로 줄로 옮겨 영상을 가리지 않게 */
@media (orientation: landscape) and (max-height: 500px) {
  .cam .cam-layer { margin-right: 150px; }
  .cam .cam-bottom { left: auto; top: 0; width: 150px; justify-content: center; padding: 10px 12px; background: linear-gradient(to right, transparent, rgba(0,0,0,.75)); }
  .cam #shotHelp, .cam #voiceInfo { display: none; }
  .cam .shot { width: 76px; height: 76px; font-size: 15px; }
}
.cam-bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 20px 16px 26px; background: linear-gradient(transparent, rgba(0,0,0,.8)); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.shot { width: 96px; height: 96px; border-radius: 50%; background: var(--brand); border: 5px solid rgba(255,255,255,.9); display: grid; place-items: center; font-weight: 800; font-size: 17px; color: #fff; text-align: center; box-shadow: 0 0 0 8px rgba(232,89,12,.35); transition: transform .1s; }
.shot:active { transform: scale(.95); }
.shot[disabled] { background: #6b7280; box-shadow: none; }
.buffer { width: 100%; display: flex; align-items: center; gap: 6px; font-size: 11.5px; }
.buffer .seg { flex: 1; height: 6px; border-radius: 99px; }
/* 버튼만 띄우기 */
.otherapp { display: none; position: absolute; inset: 0; z-index: 3; background: var(--bg); color: var(--text); flex-direction: column; }
.cam.mini .otherapp { display: flex; }
.cam.mini > .status, .cam.mini .cam-layer, .cam.mini .cam-bottom { display: none; }
.cam.mini canvas { visibility: hidden; }
.otherapp.ios-min { background: #000; color: #fff; }
.ios-min-top { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; }
.ios-min-note { margin: auto 24px 40px; text-align: center; font-size: 14px; font-weight: 600; opacity: .55; line-height: 1.6; }
.ios-min-note span { font-size: 12px; font-weight: 400; }
.oa-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 16px 8px; }
.oa-map { flex: 1; width: 100%; min-height: 0; display: block; }
.oa-card { margin: 10px 14px 18px; background: var(--card); border: 1px solid var(--hair); border-radius: 16px; padding: 12px 14px; font-size: 13px; }
.float { display: none; position: absolute; z-index: 10; flex-direction: column; align-items: center; gap: 6px; touch-action: none; }
.cam.mini .float { display: flex; }
.float-btn { width: 68px; height: 68px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 800; font-size: 15px; text-align: center;
  display: grid; place-items: center; position: relative; cursor: grab; touch-action: none; user-select: none;
  box-shadow: 0 8px 22px rgba(0,0,0,.35), 0 0 0 4px rgba(255,255,255,.95); }
.float-btn:active { transform: scale(.94); }
.float-btn.done { background: #6b7280; }
.fdot { position: absolute; top: 9px; left: 50%; margin-left: -3.5px; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: blink 1s infinite; }
.fbadge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: #111317; color: #fff; font-size: 11px; display: grid; place-items: center; }
.float-exp { width: 30px; height: 30px; border-radius: 50%; background: rgba(17,19,23,.82); color: #fff; font-size: 14px; display: grid; place-items: center; text-align: center; }
.float-stat { position: absolute; right: 80px; top: 20px; white-space: nowrap; background: rgba(17,19,23,.92); color: #fff; font-size: 12px; padding: 6px 10px; border-radius: 10px;
  opacity: 0; transition: opacity .2s; pointer-events: none; }
.float.left .float-stat { right: auto; left: 80px; }
.float-stat.show { opacity: 1; }
.shotstat { background: rgba(0,0,0,.6); border-radius: 99px; padding: 6px 14px; font-size: 12.5px; font-weight: 600; opacity: 0; transform: translateY(6px); transition: all .25s; }
.shotstat.show { opacity: 1; transform: none; }
.srcsel { display: flex; gap: 6px; }
.srcsel button { background: rgba(0,0,0,.5); border-radius: 99px; padding: 4px 10px; font-size: 11.5px; }
.srcsel button.on { background: #fff; color: #111; font-weight: 700; }

/* 신고 작성 */
/* 영상 모양 그대로 재생: 가로 영상은 폭에 맞추고, 세로 영상은 화면 높이의 62%까지 세로로 */
video.clip { display: block; width: auto; height: auto; max-width: 100%; max-height: 62vh; margin: 0 auto; border-radius: 14px; background: #111; }

/* 진행 상황 */
.tl { position: relative; padding-left: 26px; display: flex; flex-direction: column; gap: 10px; }
.tl::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: var(--hair); }
.tl > div { position: relative; }
.tl > div::before { content: ""; position: absolute; left: -24px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--card); border: 2px solid #cfd3da; }
.tl .done::before { background: var(--ok); border-color: var(--ok); }
.tl .now::before { background: var(--brand); border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.tl .fail::before { background: var(--muted); border-color: var(--muted); }
.tl b { display: block; font-size: 13.5px; }
.tl .skip { opacity: .5; }

/* 검토 */
.timer { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--brand); }
.vote { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vote .yes { background: var(--ok); color: #fff; }
.vote .no { background: #374151; color: #fff; }
.reviewcv { width: 100%; aspect-ratio: 16/10; border-radius: 14px; display: block; background: #111; }

/* 포인트 */
.tabs2 { display: flex; background: #ebe9e4; border-radius: 12px; padding: 3px; font-size: 13px; font-weight: 600; }
.tabs2 button { flex: 1; text-align: center; padding: 7px; border-radius: 10px; color: var(--muted); }
.tabs2 .on { background: var(--card); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.amt { display: flex; gap: 6px; }
.amt button { flex: 1; border: 1.5px solid var(--hair); border-radius: 10px; padding: 6px; text-align: center; font-size: 12.5px; background: var(--card); }
.amt button.on { border-color: var(--brand); color: var(--brand); font-weight: 700; }
.ring { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.ring::after { content: ""; width: 20px; height: 20px; border-radius: 50%; background: var(--card); }

/* 설정 */
.set > * { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--hair); gap: 10px; width: 100%; }
.set > *:last-child { border-bottom: none; }
.hours { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; margin-top: 8px; }
.hours button { height: 24px; border-radius: 5px; background: var(--hair); font-size: 9.5px; text-align: center; color: var(--muted); }
.hours button.on { background: var(--ok); color: #fff; }
input[type=range] { width: 100%; accent-color: var(--brand); }

/* 대화 */
.chat { display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 84%; padding: 9px 12px; border-radius: 16px; font-size: 13px; white-space: pre-wrap; }
.msg .who { font-size: 10.5px; color: var(--muted); margin-bottom: 2px; }
.msg.them { background: var(--card); border: 1px solid var(--hair); border-bottom-left-radius: 4px; align-self: flex-start; }
.msg.me { background: var(--brand); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.msg.me .who { color: rgba(255,255,255,.8); }
.sys { align-self: center; font-size: 11px; color: var(--muted); background: var(--soft); padding: 4px 10px; border-radius: 99px; text-align: center; }
.inputbar { flex: none; display: flex; gap: 8px; align-items: center; padding: 8px 12px 16px; background: var(--card); border-top: 1px solid var(--hair); }
.inputbar input { flex: 1; background: var(--bg); border-radius: 99px; padding: 9px 14px; border: 0; outline: 0; font-size: 13px; }
.inputbar .send { width: 36px; height: 36px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 15px; flex: none; }
.inputbar .plus { font-size: 22px; color: var(--muted); padding: 0 2px; }

/* 영상 게시판 */
.chipbar { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; flex: none; }
.chipbar::-webkit-scrollbar { display: none; }
.fchip { flex: none; padding: 7px 13px; border-radius: 99px; background: var(--card); box-shadow: inset 0 0 0 1px var(--hair); font-size: 12.5px; font-weight: 600; color: var(--muted); }
.fchip.on { background: var(--ink); color: #fff; box-shadow: none; }
.post { display: block; width: 100%; }
.post .thumb { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 16/9; background: #1d2230; }
.post .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-own { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 700; background: linear-gradient(135deg, #3b4a63, #1d2230); }
.post .dur { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.7); color: #fff; font-size: 11px; padding: 1px 6px; border-radius: 5px; }
.post-meta { padding: 8px 2px 4px; }
.liked { color: var(--brand); font-weight: 700; }

/* 시트·배너·토스트 */
.dim { position: absolute; inset: 0; background: rgba(10,12,16,.55); display: flex; align-items: flex-end; z-index: 20; }
.sheet { background: var(--card); width: 100%; border-radius: 28px 28px 0 0; padding: 18px 18px 26px; display: flex; flex-direction: column; gap: 10px; }
.sheet .grab { width: 40px; height: 4px; border-radius: 99px; background: var(--hair); margin: 0 auto 4px; }
#banner { position: absolute; top: 40px; left: 10px; right: 10px; z-index: 30; background: rgba(255,255,255,.97); color: var(--text); border-radius: 18px;
  padding: 11px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.25); display: flex; gap: 10px; align-items: center; transform: translateY(-140%); transition: transform .3s; cursor: pointer; }
#banner:not(.show) { visibility: hidden; transition: transform .3s, visibility 0s .3s; }
#banner.show { transform: translateY(0); }
#banner > div { flex: 1; min-width: 0; }
#banner .bi { width: 36px; height: 36px; border-radius: 11px; background: var(--mark) center / cover no-repeat; color: transparent !important; flex: none; display: grid; place-items: center; color: #fff; font-weight: 800; }
#banner .bi { overflow: hidden; }
#banner .bt-title { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#banner .bt-body { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#toast { position: absolute; left: 50%; bottom: 84px; transform: translate(-50%, 20px); z-index: 40; background: rgba(17,19,23,.92); color: #fff; padding: 9px 16px; border-radius: 99px;
  font-size: 12.5px; opacity: 0; transition: all .25s; pointer-events: none; white-space: nowrap; max-width: 92%; overflow: hidden; text-overflow: ellipsis; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }