:root{
  --ink:#2E2A26; --text:#191F27; --sub:#4E5967; --tert:#6B7683; --line:#E5E8EB; --gray:#C7CCD1; --paper:#FAFBF9;
  --kind:#157171;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:var(--paper);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Apple SD Gothic Neo","Noto Sans KR",sans-serif;-webkit-text-size-adjust:100%}
#map{position:fixed;inset:0}
#map .maplibregl-canvas{filter:saturate(.62) contrast(.96) brightness(1.02)}
[hidden]{display:none!important}
.topfade{position:fixed;left:0;right:0;top:0;height:calc(var(--sat) + 150px);z-index:2;pointer-events:none;
  background:linear-gradient(to bottom,rgba(250,251,249,.92),rgba(250,251,249,.6) 55%,rgba(250,251,249,0))}
body.photoview .topfade{height:calc(var(--sat) + 70px)}

/* 상단 — 제목 + 정보 칩 / 재생 칩 */
.top{position:fixed;left:16px;right:16px;top:calc(var(--sat) + 14px);z-index:5;max-width:560px;margin:0 auto}
.sender{margin:0 0 2px;font-size:12px;font-weight:600;color:var(--tert)}
.top h1{margin:0 0 10px;font-size:26px;line-height:1.2;font-weight:700;letter-spacing:-.3px;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.photoview .top h1,body.playing .top h1{font-size:17px;margin:0;white-space:nowrap}
.chip{display:inline-block;max-width:100%;padding:10px 14px;background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:16px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.chip p{margin:0}
.row1{font-size:14px;font-weight:600;color:var(--text);padding-bottom:6px;border-bottom:1px solid var(--line)}
.row2{margin-top:6px;font-size:14px;color:var(--sub)}
.row3{margin-top:2px;font-size:14px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.intro{margin-top:8px!important;font-size:13px;line-height:1.5;color:var(--sub);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.intro.open{-webkit-line-clamp:unset;display:block;max-height:26vh;overflow:auto}
.link{background:none;border:0;padding:4px 0 0;color:var(--tert);font-size:12px;cursor:pointer}
body.playing .chip,body.photoview .chip{display:none}
.pchip{display:none;align-items:center;justify-content:space-between;margin-top:8px;padding:10px 14px;border-radius:16px;
  background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 3px rgba(0,0,0,.08);
  font-size:14px;color:var(--sub);font-variant-numeric:tabular-nums}
.pchip b{color:var(--text);font-weight:600}
body.playing:not(.photoview) .pchip{display:flex}
body.photoview .pchip{display:none!important}
body.photoview .sender{display:none}

/* 필름 스트립 */
.strip{position:fixed;left:0;right:0;z-index:4;overflow:hidden;top:calc(var(--sat) + 48px);height:min(28vh,280px)}
.track{display:flex;gap:6px;height:100%;will-change:transform;transition:transform .45s cubic-bezier(.3,.7,.2,1)}
.fi{position:relative;flex:0 0 auto;height:100%;border-radius:14px;overflow:hidden;background:#e9ecef;
  box-shadow:0 2px 10px rgba(0,0,0,.14);cursor:pointer}
.fi img{display:block;width:100%;height:100%;object-fit:cover}
.fi .cap{position:absolute;left:10px;bottom:10px;max-width:calc(100% - 20px);padding:3px 9px;border-radius:999px;
  background:rgba(0,0,0,.45);color:#fff;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-variant-numeric:tabular-nums;opacity:0;transition:opacity .25s}
.fi.cur .cap{opacity:1}

/* 하단 재생 바 — 항상 보임, 크기·위치 고정 */
.bar{position:fixed;left:16px;right:16px;bottom:calc(var(--sab) + 12px);z-index:6;max-width:560px;margin:0 auto;
  padding:6px 14px 6px;border-radius:28px;background:rgba(250,251,249,.9);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);
  box-shadow:0 2px 14px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.05);user-select:none;-webkit-user-select:none}
.scrub-wrap{padding:0 22px}
.scrub{position:relative;height:56px;touch-action:none;cursor:pointer}
.ticks{position:absolute;left:0;right:0;top:4px;height:8px}
.ticks i{position:absolute;top:0;width:2px;height:8px;margin-left:-1px;border-radius:1px;background:var(--ink);opacity:.75}
.track-bg{position:absolute;left:0;right:0;top:30px;height:6px;margin-top:-3px;border-radius:3px;background:#DADCDD;overflow:hidden}
.fill{height:100%;width:0;background:var(--kind)}
.thumb{position:absolute;top:30px;left:0;width:44px;height:28px;margin:-14px 0 0 -22px;border-radius:14px;background:#fff;
  box-shadow:0 1px 5px rgba(0,0,0,.28),0 0 0 .5px rgba(0,0,0,.06)}
.btns{display:flex;align-items:center;justify-content:space-between;height:60px;padding:0 4px}
.b{width:52px;height:52px;border:0;background:none;padding:0;color:var(--text);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;border-radius:12px}
.b.lab{font-size:11px;gap:2px;font-weight:500}
.b.play{width:56px;height:56px}
.b svg{display:block}
body.playing #modeBtn{opacity:.3;pointer-events:none}
.vm{position:relative}
.menu{position:absolute;right:-8px;bottom:62px;min-width:128px;padding:6px;border-radius:16px;background:rgba(255,255,255,.97);
  box-shadow:0 4px 22px rgba(0,0,0,.18)}
.menu button{display:block;width:100%;text-align:left;border:0;background:none;padding:11px 12px;font-size:15px;color:var(--text);border-radius:10px;cursor:pointer}
.menu button.on{background:#F2F4F5;font-weight:700}
.cta{display:block;text-align:center;padding:2px 0 4px;font-size:12px;color:var(--tert);text-decoration:none}

/* 지도 마커 */
.pin{width:30px;height:30px;border-radius:50%;border:2px solid #fff;background:#ddd center/cover;box-shadow:0 1px 5px rgba(0,0,0,.3)}
.pin.dot{width:11px;height:11px;border:2px solid;box-shadow:none;background:var(--gray);border-color:#a3a8ad}
.head{width:20px;height:20px;border-radius:50%;background:var(--kind);border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.message{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--paper);text-align:center;padding:16px;color:var(--tert)}
.message p{margin:4px 0}
#messageTitle{font-size:18px;font-weight:700;color:var(--text)}
.maplibregl-ctrl-bottom-left,.maplibregl-ctrl-bottom-right{display:none}
.b[hidden]{display:flex!important;visibility:hidden}