/* 라운지 목업 사이트 — lounge/guest/tabs.css 위에 얹는다 */
body{background:#ECECF1;padding:0;margin:0}
.ctl{position:fixed;left:0;top:0;bottom:0;width:300px;background:#fff;border-right:1px solid #E2E2E2;padding:28px 24px;overflow:auto}
.ctl h1{font-size:19px;font-weight:700;letter-spacing:-0.03em}
.ctl .sub{font-size:12px;color:#888;margin-top:4px;line-height:1.5}
.grp{margin-top:22px}
.grp .gt{font-size:11px;font-weight:700;color:#999;letter-spacing:.02em}
.seg{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.seg button{font:inherit;font-size:13px;border:1px solid #E2E2E2;background:#fff;color:#333;border-radius:100px;padding:7px 12px;cursor:pointer}
.seg button.on{background:#000;color:#fff;border-color:#000;font-weight:700}
.desc{font-size:12px;color:#555;line-height:1.55;margin-top:8px;min-height:36px}
.share{margin-top:26px;font-size:11px;color:#999;line-height:1.5}
.share b{color:#000}
.stage{margin-left:300px;padding:28px 0 60px;display:flex;justify-content:center}
.phone{height:auto;min-height:100vh;overflow:clip;border-radius:22px;box-shadow:0 8px 30px rgba(0,0,0,.10)}
.chip{cursor:pointer;border:0;font:inherit;font-size:13px}
.pane{display:none}
.pane.on{display:flex}
.fab{position:sticky;float:right;margin:-70px 16px 0 0;bottom:22px}
.gate{display:none;position:sticky;bottom:0;width:100%}
.view-guest .gate{display:flex}
.view-guest .fab,.view-guest .chip[data-tab="내 글"]{display:none}
.note{padding-bottom:30px}

@media (max-width:760px){
  .ctl{position:sticky;top:0;z-index:20;width:auto;bottom:auto;padding:10px 12px 8px;border-right:0;border-bottom:1px solid #E2E2E2;display:flex;gap:14px;overflow-x:auto;white-space:nowrap}
  .ctl h1,.ctl .sub,.desc,.share{display:none}
  .grp{margin-top:0;flex:none}
  .seg{flex-wrap:nowrap;margin-top:4px}
  .seg button{padding:5px 10px;font-size:12px}
  .stage{margin-left:0;padding:0}
  .phone{width:100%;border-radius:0;box-shadow:none}
}

/* ── B 말풍선 ── */
/* 검색·제목·칩 줄 같은 화면 장치 간격은 카드 모양과 무관하게 A와 같게(8px) — 글↔글 간격만 모양별로 */
.st-b .feed{gap:8px}
.st-b .feed>.post+.post{margin-top:12px}
.st-b .post{background:none;border-radius:0;padding:0 0 0 42px;position:relative}
.st-b .post>.who>.pf{position:absolute;left:0;top:0}
.st-b .post>.who>.pf>.av,.st-b .post>.who>.pf>.eav,.st-b .post>.who>.pf>.pim{width:34px!important;height:34px!important}
.st-b .bub{display:inline-block;max-width:100%;margin-top:6px;background:var(--card);border-radius:4px 18px 18px 18px;padding:2px 13px 11px}
.st-b .writer .bub{background:#F2FAD4}
.st-b .bub .body{margin-top:8px}
.st-b .bub .src{background:#fff}
.st-b .writer .bub .src{background:#fff}
.st-b .acts{margin-top:7px;padding-left:4px}
.st-b .replies{border-top:0;padding-top:2px;gap:6px;align-items:flex-start;margin-top:8px}
.st-b .re{display:inline-flex;align-items:flex-start;flex-wrap:wrap;gap:0 4px;background:var(--card);border-radius:4px 14px 14px 14px;padding:6px 11px;max-width:92%}
.st-b .re.e{background:#F2FAD4}
.st-b .re .pf{margin-left:-2px}
/* 프사 없는 글(귓속말·내 댓글)도 풍선으로 감싸야 글끼리 갈린다. 귓속말은 점선 풍선 = A의 점선 카드와 같은 신호 */
.st-b .post.secret,.st-b .post.cmt{margin-left:42px;padding:11px 14px 12px;border-radius:4px 18px 18px 18px;background:var(--card)}
.st-b .post.secret{background:#fff;border:1px dashed #C9C9C9}
.st-b .secret .ans{border:0;background:var(--card)}
/* 풍선 자체가 42px 들어가 있으니 프사는 풍선 바깥(왼쪽 여백)으로 뺀다. 점선 1px만큼 더 보정 */
.st-b .post.secret>.who>.pf,.st-b .post.cmt>.who>.pf{left:-43px;top:-1px}
/* 알림 줄은 글 위 한 줄로 따로 — 프사 옆에 붙으면 글 내용처럼 읽힌다 */
.st-b .post>.noti{margin:0 0 8px -42px}
.st-b .post:has(>.noti)>.who>.pf{top:40px}

/* ── C 스레드 ── */
.st-c .feed{gap:8px}
.st-c .feed>.post+.post{margin-top:-8px}
.st-c .post{background:none;border-radius:0;padding:14px 0 12px 46px;position:relative;border-bottom:1px solid #EFEFEF}
.st-c .post>.who>.pf{position:absolute;left:0;top:14px}
.st-c .post>.who>.pf>.av,.st-c .post>.who>.pf>.eav,.st-c .post>.who>.pf>.pim{width:36px!important;height:36px!important}
.st-c .post:has(.replies)::before{content:"";position:absolute;left:17px;top:58px;bottom:22px;width:2px;background:#E6E6E6;border-radius:2px}
.st-c .bub .body{margin-top:4px}
.st-c .replies{border-top:0;margin-left:-46px;padding-left:46px;gap:10px;padding-top:6px}
.st-c .re{position:relative}
.st-c .re .pf{position:absolute;left:-36px;top:-1px}
.st-c .re .pf>.av,.st-c .re .pf>.eav,.st-c .re .pf>.pim{width:22px!important;height:22px!important}
.st-c .re b{display:inline}
.st-c .secret{background:none;border:0;border-bottom:1px solid #EFEFEF}  /* 구분선은 다른 글과 같은 실선 — 귓속말 표시는 칩이 맡는다 */
.st-c .post>.noti{margin:0 0 10px -46px}
.st-c .post:has(>.noti)>.who>.pf{top:54px}

/* ── 생동감 레이어 ── */
.lv-on .rxs{display:flex;gap:5px;margin-top:9px;flex-wrap:wrap}
.rxs span{font-size:12px;background:#fff;border:1px solid var(--line);border-radius:100px;padding:3px 9px;color:var(--ink2)}
.rxs span:first-child{border-color:#C8E46B;background:#F7FDE3}
.rxs .add{color:#999}
.st-b .rxs,.st-c .rxs{padding-left:2px}
.lv-on .typing{display:flex;align-items:center;gap:6px;font-size:11px;color:#aaa;margin-top:8px}
.dots{display:inline-flex;gap:3px}
.dots i{width:5px;height:5px;border-radius:50%;background:var(--lime);animation:blink 1.2s infinite}
.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
.toast{display:none;position:sticky;top:10px;z-index:5;align-self:center;background:#000;color:#fff;font-size:13px;font-weight:700;padding:8px 14px;border-radius:100px;box-shadow:0 4px 14px rgba(0,0,0,.2);cursor:pointer}
.toast em{font-style:normal;color:var(--lime)}
.lv-on .toast.show{display:block;animation:drop .35s ease-out}
@keyframes drop{from{transform:translateY(-12px);opacity:0}to{transform:none;opacity:1}}
.lv-on .re.fresh{animation:fresh 2.4s ease-out}
@keyframes fresh{0%{background:#EEF9C4}100%{}}
.bump{animation:bump .4s}
@keyframes bump{50%{color:var(--lime)}}
.gate{left:auto}
.pf-img .ed.fol .pim{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--lime-ink)}
.pf-img .ed .pf{margin-bottom:2px}

.ctl h1 .by{font-size:.6em;font-weight:500;color:var(--sub);letter-spacing:0;margin-left:2px}