/* 글쓰기 화면 — compose.py / compose.js 짝. 피드를 덮지 않고 같은 폰 안에서 화면이 바뀐다 */
.compose{display:none;min-height:100vh;background:#fff}
.composing .hd,.composing .pagehd,.composing .chips,.composing .pane,.composing .note,.composing .fab{display:none!important}
.composing .compose{display:block}
.cp-top{height:56px;display:flex;align-items:center;gap:10px;padding:0 16px 0 10px;border-bottom:1px solid var(--line)}
.cp-top b{font-size:16px;font-weight:700;letter-spacing:-0.03em}
.cp-x{width:36px;height:36px;border:0;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
.cp-x svg{width:20px;height:20px;stroke:#000;stroke-width:1.9;stroke-linecap:round;fill:none}
.cp-go{margin-left:auto;font:inherit;font-size:13px;font-weight:700;border:0;border-radius:100px;padding:8px 15px;background:#000;color:#fff;cursor:pointer}
.cp-go:disabled{background:#EDEDF0;color:#B5B5BB;cursor:default}
.cp-me{display:flex;align-items:center;gap:7px;font-size:13px;padding:16px 16px 0}
.cp-me .name{font-weight:700}
.cp-sec{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink2);cursor:pointer;user-select:none}
.cp-sec input{position:absolute;opacity:0;pointer-events:none}
.cp-sec i{width:16px;height:16px;border:1.5px solid #C5C5CC;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;transition:background .12s,border-color .12s}
.cp-sec input:checked+i{background:#000;border-color:#000}
.cp-sec input:checked+i:after{content:"";width:8px;height:4px;border-left:1.8px solid #fff;border-bottom:1.8px solid #fff;transform:translateY(-1px) rotate(-45deg)}
.cp-sec input:focus-visible+i{outline:2px solid #000;outline-offset:2px}
.cp-scope{font-size:11px;font-weight:400;color:var(--sub);display:none}
.compose.cp-secret .cp-scope{display:inline}
.compose.cp-secret .cp-sec{color:#000;font-weight:600}
.cp-tx{display:block;width:100%;min-height:180px;border:0;outline:0;resize:none;font:inherit;font-size:15px;line-height:1.6;letter-spacing:-0.02em;color:var(--ink);padding:12px 16px 4px}
.cp-tx::placeholder{color:#BDBDC3}
.cp-att{padding:0 16px;display:flex;flex-direction:column;gap:8px}
.cp-a{display:none}.cp-a.on{display:block}
.cp-a .ticks{margin-top:0}
.cp-a .tk{padding-right:6px}
.cp-a .tk .cp-rm{margin-left:2px;padding:0 2px}
.cp-a .src{margin-top:0;background:var(--card)}
.cp-photo{position:relative;width:120px;height:120px;border-radius:8px;overflow:hidden}
.cp-photo img{width:100%;height:100%;object-fit:cover;display:block}
.cp-rm{border:0;background:none;font:inherit;font-size:15px;line-height:1;color:#999;cursor:pointer;padding:0 4px;margin-left:auto}
.cp-photo .cp-rm{position:absolute;top:5px;right:5px;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:14px;padding:0}
.cp-bp{display:flex;align-items:center;gap:8px;margin:18px 16px 0;padding:10px 12px;border-radius:8px;background:var(--card);font-size:12px;color:var(--ink2)}
.cp-bp b{font-weight:700;color:#000}
.cp-bar{display:flex;align-items:center;gap:4px;margin-top:14px;padding:8px 10px;border-top:1px solid var(--line)}
.cp-bar button{font:inherit;font-size:12px;color:var(--ink2);border:0;background:none;display:inline-flex;align-items:center;gap:5px;padding:7px 8px;border-radius:8px;cursor:pointer}
.cp-bar button:hover{background:var(--card)}
.cp-bar button.on{color:#000;font-weight:700}
.cp-bar svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.cp-cnt{margin-left:auto;font-size:11px;color:var(--sub);font-variant-numeric:tabular-nums}
.cp-cnt em{font-style:normal}
.cp-rule{font-size:11px;color:var(--sub);padding:2px 16px 28px}
/* 귓속말 — 첨부·불판 안내를 접고 잠금 톤으로 */
.compose.cp-secret .cp-bp,.compose.cp-secret .cp-bar button,.compose.cp-secret .cp-att{display:none}
.compose.cp-secret .cp-tx{background:#FAFAFB}
.post.fresh{animation:cpIn .5s ease-out}
@keyframes cpIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* 이모지 반응 — react.js 짝 */
.view-member .rxs > span:not(.ap){cursor:pointer;user-select:none}
.rxs{position:relative}
.rx-pick{position:absolute;left:0;bottom:calc(100% + 6px);z-index:5;display:grid;grid-template-columns:repeat(6,34px);gap:2px;padding:6px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.12)}
.rx-pick button{width:34px;height:34px;border:0;background:none;border-radius:8px;font-size:19px;line-height:1;cursor:pointer}
.rx-pick button:hover{background:var(--card)}
.rx-pop{animation:rxPop .28s ease-out}
@keyframes rxPop{0%{transform:scale(.85)}60%{transform:scale(1.08)}100%{transform:none}}