:root{--bg:#f7f6f2;--ink:#363631;--mute:#62625c;--line:#dcdad3;--line2:#cfccc3;--soft:#eeece6;--card:#f7f6f2;--scrim:rgba(54,54,49,.24);--red:#363631;--err:#8d2019;--shadow:none;--edge:16px;color-scheme:light}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.6 "Helvetica Neue",Helvetica,Arial,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;letter-spacing:0;word-break:keep-all;min-height:100vh;overflow-wrap:anywhere;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit;background:none;border:1px solid var(--line2);border-radius:0;padding:12px 14px;width:100%;min-width:0;outline:none}
input:focus,textarea:focus,select:focus{border-color:var(--ink)}
textarea{resize:none;display:block}
h1,h2,h3,p{margin:0}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:8px;top:-60px;background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:0;z-index:200}.skip:focus{top:8px}
:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
::selection{background:#d8d6ce}
.muted{color:var(--mute)}.one{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.err{color:var(--err);font-size:14px;min-height:0}.err:empty{display:none}.ok:empty{display:none}
.c{text-align:center}.center{text-align:center;padding:12px}.pad{padding:12px 16px}.grow{flex:1}
.row{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}.row.end{justify-content:flex-end}
.stack{display:grid;gap:14px;padding:16px}
.fld{display:grid;gap:6px;font-size:14px;color:var(--mute)}.fld input,.fld textarea,.fld select{color:var(--ink)}
.emptyline{color:var(--mute);text-align:center;padding:56px 16px;font-size:15px}
.endnote{color:var(--mute);text-align:center;font-size:13px;padding:28px 16px 40px}
.notice{padding:32px 16px;display:grid;gap:14px;text-align:center;justify-items:center}

/* icons and buttons */
.ic{display:block;flex:none}
.ib{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;color:var(--ink)}
.ib{color:var(--mute)}.ib:hover{color:var(--ink)}
.tbtn{font-size:14px;color:var(--mute);padding:10px 8px;font-weight:500}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 18px;border-radius:0;font-weight:500;font-size:15px;border:1px solid transparent;white-space:nowrap}
.btn.sm{min-height:34px;padding:0 14px;font-size:14px;border-radius:0}.btn.sm::after{content:"";position:absolute;inset:-5px -3px}
.btn.solid{background:var(--ink);color:var(--bg)}
.btn.ghost{border-color:var(--line2);color:var(--ink)}
.btn.danger{background:var(--err);color:#fff}
.btn.pill{border-radius:0}.btn.wide{width:100%}
.btn:disabled,.ib:disabled{opacity:.45;cursor:default}
.dot{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--red);display:inline-block}
[data-badge]{display:none;top:8px;right:calc(50% - 20px)}[data-badge].has{display:block}
.crow .dot,.chip .dot{position:static;display:inline-block;margin-left:6px;background:var(--ink)}

/* avatars */
.av{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--line);color:var(--mute);font-weight:500;object-fit:cover;flex:none;overflow:hidden}

/* layout: 하야니 가족 머리 — 폰 = 쓰기 · EEDEUM · 나 / 아래 줄 홈 찾기 활동 메시지, 넓은 화면 = 낱말 · 이름 · 쓰기 나 한 줄 */
/* 하야니 가족 문법 — 폰: 위 ≡ · EEDEUM · 그림 하나, 아래 낱말 바, 나머지는 ≡ 메뉴 / 넓은 화면: 위 낱말 한 줄뿐 */
.fam{position:sticky;top:0;z-index:26;display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:"l c r";align-items:center;min-height:52px;padding:env(safe-area-inset-top) calc(var(--edge) - 11px) 0;background:var(--bg);border-bottom:1px solid var(--line)}
.fam .brand{grid-area:c;display:flex;align-items:center;min-height:52px;padding-left:.34em;font-size:14px;letter-spacing:.34em}
.fw{display:none}
.fm-open,.fm-icon,.fm-close{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--ink)}
.fm-open{grid-area:l;justify-self:start}.fm-icon{grid-area:r;justify-self:end}
.fm-icon .dot{top:10px;right:8px;width:5px;height:5px;background:var(--ink)}
.fm{position:fixed;inset:0;z-index:60}
.fm .scrim{position:absolute;inset:0;background:#0006}
.fm-panel{position:absolute;top:0;bottom:0;left:0;width:min(340px,87vw);overflow-y:auto;display:flex;flex-direction:column;align-items:flex-start;padding:calc(4px + env(safe-area-inset-top)) 24px calc(28px + env(safe-area-inset-bottom)) 13px;background:var(--bg)}
.fm .fm-search{align-self:stretch;margin:14px 0 0 7px;padding:0}
.fm-search input{border:0;border-bottom:1px solid var(--ink);padding:10px 0;font-size:14px}
.fm-group{align-self:stretch;display:flex;flex-direction:column;align-items:flex-start;margin:22px 0 0 7px}.fm-group+.fm-group{margin-top:28px}
.fm-group:empty{display:none}
.si{position:relative;display:inline-flex;align-items:center;min-height:46px;font-size:14px;color:var(--ink)}
.si.on::after{content:"";position:absolute;left:0;right:0;bottom:11px;height:1px;background:currentColor}
.si .dot{position:static;width:5px;height:5px;margin:0 0 8px 3px;background:var(--ink)}
body.menu-open{overflow:hidden}
/* 아래 낱말 바: 엄지 자리. 하위 화면(기록 · 대화 · 쓰기 · 설정)에선 숨김 */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:25;display:flex;justify-content:space-around;padding:0 6px env(safe-area-inset-bottom);background:var(--bg);border-top:1px solid var(--line)}
.tabs .si{min-height:52px;padding:0 10px;font-size:13px;color:var(--mute)}
.tabs .si.on{color:var(--ink)}
.tabs .si.on::after{left:10px;right:10px;bottom:14px}
body.subpage .tabs{display:none}
body:not(.subpage) .frame{padding-bottom:calc(53px + env(safe-area-inset-bottom))}
body:not(.subpage) #toast{bottom:calc(72px + env(safe-area-inset-bottom))}
.frame{min-height:100vh}
.head{background:var(--bg)}
.hin{display:flex;align-items:center;gap:8px;min-height:52px;padding:0 var(--edge)}
.head h1{flex:1;min-width:0;font-size:15px;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hb{min-height:44px;font-size:12px;color:var(--mute)}
.head.home .hin{min-height:0}
.hr{display:flex;align-items:center;min-width:44px;justify-content:flex-end}
.r-messages .head,.r-conversation .head{display:none}
.r-profile .head h1{display:none}.r-profile .hr{margin-left:auto}
body.r-post .frame{padding-bottom:84px}
.col{min-height:60vh}
/* 하야니 가족 줄: 세 사이트 꼬리에 같은 줄 */
.foot{margin-top:56px;padding:12px var(--edge) calc(20px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.family{display:flex;gap:22px}
.family a{display:inline-flex;align-items:center;min-height:44px;font-size:11px;letter-spacing:.2em;color:var(--mute)}
.family a[aria-current]{color:var(--ink)}
body.r-messages .foot,body.r-conversation .foot{display:none}

/* feed cell */
.cell{position:relative;display:block;padding:20px var(--edge) 6px;border-bottom:1px solid var(--line)}
.ctop{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;min-height:20px}
.who{display:flex;align-items:baseline;gap:6px;min-width:0;flex-wrap:wrap}
.name{font-size:13px}
.sep,.topic,.ago{color:var(--mute);font-size:12px}.sep{margin:0 -1px}
.ctop .ib{margin:-12px -12px -10px 0}
.ctop .btn{margin:-4px 0 0}
.state{color:var(--mute);font-size:13px;margin-top:2px}
.cbody{display:block;margin-top:8px}
.txt{display:block;white-space:pre-wrap;line-height:1.7}
.cell:not(.big) .txt{display:-webkit-box;-webkit-line-clamp:14;-webkit-box-orient:vertical;overflow:hidden}
.ttl{display:block;font-size:16px;font-weight:400;line-height:1.5;margin-bottom:6px}
.dttl{font-size:18px;font-weight:400;margin-top:8px}
.serial{display:inline-block;color:var(--mute);font-size:13px;margin-top:2px}
.replyto{color:var(--mute);font-size:13px}
.photos{display:flex;gap:4px;overflow-x:auto;scroll-snap-type:x mandatory;margin-top:14px;scrollbar-width:none;border-radius:0;-webkit-overflow-scrolling:touch}
.photos::-webkit-scrollbar{display:none}
.photos img{flex:0 0 auto;border-radius:0;scroll-snap-align:start;object-fit:cover;background:var(--soft)}
.photos.many img{height:300px;min-width:150px;max-width:82%;width:auto}
.photos.one img{width:100%;max-height:520px;height:auto;min-height:140px}
.acts{display:flex;align-items:center;gap:20px;margin-top:8px;min-height:44px}
.act{position:relative;display:inline-flex;align-items:center;gap:4px;padding:8px 0;color:var(--mute);font-size:12px;border-radius:0;min-height:36px}
.act::after{content:"";position:absolute;inset:-4px -2px}
.act.on{color:var(--ink);text-decoration:underline;text-underline-offset:5px}.act .n{font-size:12px}
.act.txt{font-size:12px;color:var(--mute)}
.tn{font-size:13px;margin-top:4px}.tn:empty{display:none}
.cell.cm{border-bottom:0;padding-bottom:0}.cell.cm .cmain{padding-bottom:6px;border-bottom:1px solid var(--line)}
.cell.cm.reply{padding-left:calc(var(--edge) + 24px)}
.cstatus{font-size:13px}.cstatus:empty{display:none}
.thread{padding-bottom:12px}
.more-link,.more{display:block;text-align:center;padding:14px}
.chain{padding:10px 16px;border-bottom:1px solid var(--line);color:var(--mute);font-size:14px}.chain summary{cursor:pointer;min-height:32px;display:flex;align-items:center}.chain ol{margin:8px 0 0;padding-left:20px;color:var(--ink)}
.chips{display:flex;gap:18px;padding:4px var(--edge);overflow-x:auto;scrollbar-width:none;align-items:center}.chips::-webkit-scrollbar{display:none}
.chip{display:inline-flex;align-items:center;white-space:nowrap;min-height:44px;font-size:12px;color:var(--mute)}
.chip.on{color:var(--ink);text-decoration:underline;text-underline-offset:5px}
.chip.rc{gap:0}.chip.rc .ib{width:32px;height:32px}
.tabbar{display:flex;border-bottom:1px solid var(--line)}
.tabbar a{flex:1;text-align:center;padding:14px 4px;color:var(--mute);font-size:12px;border-bottom:1px solid transparent;margin-bottom:-1px}
.tabbar a.on{color:var(--ink);border-bottom-color:var(--ink)}
.grp{font-size:12px;font-weight:400;color:var(--mute);padding:20px var(--edge) 6px}
.sform{padding:0 16px 4px}
.sfield{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--ink);padding:0;min-height:44px;color:var(--mute)}
.sfield input{background:none;border:0;padding:10px 0;color:var(--ink)}
.sfield input::-webkit-search-cancel-button{display:none}
.sfield .ib{width:32px;height:32px;color:var(--mute)}
.sform+.err{padding:6px 16px 0}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:2px 0}
.grid3 .items{display:contents}
#grid,#plist.grid3{display:block}
#grid .items,#plist.grid3 .items{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.g{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1;overflow:hidden;background:var(--soft)}
.g img{width:100%;height:100%;object-fit:cover}.g .multi{position:absolute;top:6px;right:6px;color:#fff;filter:drop-shadow(0 0 2px rgba(0,0,0,.6))}
.vtxt{padding:8px;font-size:13px;text-align:center;color:var(--mute);overflow:hidden}
.prow,.nrow{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.pinfo{display:flex;flex-direction:column;flex:1;min-width:0}
.pinfo strong{font-weight:500}
.nrow{align-items:flex-start}.nrow.unread .ago::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--red);margin-left:6px;vertical-align:middle}
.ninfo{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}.ninfo strong{font-weight:500}.nx{color:var(--ink);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.nrow .btn{align-self:center}
.drow{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-bottom:1px solid var(--line)}.drow strong{font-weight:500}.drow small{font-size:13px}
.srow{display:flex;align-items:center;gap:16px;min-height:48px;font-size:14px;padding:6px 16px;width:100%;text-align:left}
.srow:hover{text-decoration:underline;text-underline-offset:5px}.srow>.muted{margin-left:auto;font-size:14px}.srow .chev{margin-left:auto;color:var(--mute)}.srow>.muted+.chev{margin-left:4px}
.srow.danger{color:var(--err)}.srow.plain span{flex:1}
.sgh{font-size:14px;color:var(--mute);padding:18px 16px 6px;border-top:1px solid var(--line);margin-top:6px}.sgh:first-child{border-top:0;margin-top:0}
.seg{border:0;padding:0;margin:0;display:flex;gap:8px;flex-wrap:wrap}.seg legend{padding:0;color:var(--mute);font-size:14px;margin-bottom:8px}
.seg label{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--line2);border-radius:0}
.seg input{width:auto}.seg.col{flex-direction:column}.seg.col label{width:100%}
input[type=radio],input[type=checkbox]{width:18px;height:18px;padding:0;accent-color:var(--ink)}
.filelab{align-self:flex-start}

/* profile */
.phead{padding:20px var(--edge) 4px}
.pt{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.pname{font-size:20px;font-weight:400;line-height:1.3;margin-top:4px}
.handle{font-size:15px;color:var(--mute);margin-top:2px}
.bio{margin-top:12px;white-space:pre-wrap}.fol{margin-top:10px}
.pbtns{display:flex;gap:8px;margin:16px 0 12px}.pbtns .btn{flex:1}
.vdetail{padding:16px;display:grid;gap:12px}.vdetail img{width:100%;border-radius:0}.vdetail figcaption{padding-top:4px;font-size:13px;color:var(--mute)}.vdetail figure{margin:0}.vdetail .pbtns{flex-wrap:wrap}

/* messages */
.msgs{display:block}
.mlist{display:block}
.mpane{display:none}
.msgs.open .mlist{display:none}.msgs.open .mpane{display:flex;flex-direction:column;min-height:calc(100dvh - 0px)}
.mtop{display:flex;align-items:center;justify-content:space-between;padding:18px 8px 6px var(--edge)}
.mtitle{font-size:15px;font-weight:400}
.mlist>.sfield{margin:4px 16px 4px}
.crow{display:flex;align-items:center;gap:12px;padding:12px 16px}
.crow.active,.crow:hover{background:var(--soft)}.crow.unread strong{font-weight:500}
.cinfo{display:flex;flex-direction:column;flex:1;min-width:0}.cinfo strong{font-weight:500}
.cmeta{display:flex;flex-direction:column;align-items:flex-end;gap:6px;font-size:13px}
.mhead{display:flex;align-items:center;gap:10px;padding:calc(8px + env(safe-area-inset-top)) 8px 8px 4px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:5}
.mhead h2{font-size:17px;font-weight:500}.mname{flex:1}.mname strong{font-weight:500}
.mscroll{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column}
.mintro{display:flex;flex-direction:column;align-items:center;gap:6px;padding:28px 0 20px}
.blist{display:flex;flex-direction:column;gap:3px}
.mday{text-align:center;color:var(--mute);font-size:12px;padding:12px 0 4px}
.bub{display:flex;max-width:78%}.bub.mine{align-self:flex-end}.bub.theirs{align-self:flex-start}
.bub span,.bub .bt{display:block;padding:10px 14px;border-radius:0;white-space:pre-wrap;text-align:left;line-height:1.35}
.bub.mine span{background:var(--ink);color:var(--bg)}.bub.theirs .bt{background:var(--soft)}
.mt{font-size:11px;color:var(--mute);margin:0 6px 6px}.mt.mine{align-self:flex-end}
.mform{display:flex;align-items:flex-end;gap:8px;padding:8px 12px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line);position:sticky;bottom:0;background:var(--bg)}
.mform textarea{border-radius:0;max-height:120px}
.reqbar{padding:14px 16px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line);text-align:center;display:grid;gap:10px}.reqbar .row{justify-content:center}
.newmsg{padding:12px 0}.newmsg .sfield{margin:0 16px 8px}
.empty-pane{display:none}
.hb2{flex:none}
.msgs .mpane .err{padding:0 16px}

/* detail reply bar */
.replybar{position:fixed;left:0;right:0;bottom:0;background:var(--bg);border-top:1px solid var(--line);padding:8px 12px calc(8px + env(safe-area-inset-bottom));z-index:15}
.replybar.guest{text-align:center;padding:16px;font-weight:500}
.rrow{display:flex;align-items:flex-end;gap:8px}.rrow textarea{border-radius:0;max-height:160px;padding:9px 14px}.rrow select{width:auto;padding:9px 6px;border-radius:0;font-size:13px}
.replying{font-size:13px;color:var(--mute);padding:0 4px 6px;display:flex;justify-content:space-between;align-items:center}
.ecm{display:grid;gap:8px;margin-top:6px}

/* compose */
#sheet:not(:empty){position:fixed;inset:0;z-index:60;display:flex;align-items:stretch;justify-content:center}
#sheet .scrim{position:absolute;inset:0;background:var(--scrim)}
.sheet{position:relative;display:flex;flex-direction:column;width:100%;background:var(--bg);height:100dvh;overflow:hidden}
.sh{display:flex;align-items:center;gap:4px;padding:calc(8px + env(safe-area-inset-top)) 8px 8px;border-bottom:1px solid var(--line)}
.sh h2{font-size:15px;font-weight:400;margin-left:6px}
.sform2{display:flex;flex-direction:column;flex:1;min-height:0;position:relative}
.cbox{display:block;padding:16px var(--edge);flex:1;overflow-y:auto}
.who2{display:flex;align-items:center;gap:6px;color:var(--mute)}.who2 strong{color:var(--ink);font-weight:500}
.topicbtn{color:var(--mute);min-height:30px;padding:0 4px;border-radius:0}.topicbtn:hover{background:var(--soft)}
.cm2 textarea{background:none;border:0;padding:4px 0;min-height:80px;font-size:16px;line-height:1.7}.cm2 textarea:focus-visible,.sfield input:focus-visible,.rrow textarea:focus-visible{outline:0}.sfield:focus-within,.rrow textarea:focus-visible{box-shadow:0 0 0 1.5px var(--line2)}
.pprev{display:flex;gap:8px;overflow-x:auto;margin-top:8px}.pprev:empty{display:none}
.pprev figure{position:relative;margin:0;flex:none}.pprev img{height:140px;border-radius:0;display:block}
.pprev .x{position:absolute;top:6px;right:6px;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;display:flex;align-items:center;justify-content:center}
.tools{display:flex;margin:4px 0 0 -10px;color:var(--mute)}.filebtn{cursor:pointer}
.sf{display:flex;align-items:center;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.optbtn{display:inline-flex;align-items:center;gap:8px;color:var(--mute);min-height:44px}
.st{flex:1;text-align:right;font-size:12px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sf .btn{min-width:72px}
.banner{margin:12px 16px 0;padding:12px 14px;background:var(--soft);border-radius:0;font-size:14px;display:grid;gap:8px}
.opts{position:absolute;inset:0;background:var(--bg);z-index:3;overflow-y:auto;padding-bottom:20px}
.oh{display:flex;align-items:center;gap:8px;padding:8px;border-bottom:1px solid var(--line)}.oh h3{font-size:17px}
.opts>*:not(.oh):not(input){margin:14px 16px 0}
.orow{display:flex;align-items:center;justify-content:space-between;min-height:44px}
.newser{display:flex;gap:8px}

/* popups */
#pop .scrim{position:fixed;inset:0;background:var(--scrim);z-index:70}
.menu{position:fixed;z-index:71;left:0;right:0;bottom:0;background:var(--card);border-radius:0 0 0;padding:8px 8px calc(12px + env(safe-area-inset-bottom));border:1px solid var(--line)}
.mi{display:block;width:100%;text-align:left;min-height:50px;padding:0 16px;font-size:14px;border-radius:0}.mi:hover,.mi:focus-visible{background:var(--soft)}.mi.danger{color:var(--err)}
.dlg{position:fixed;z-index:71;left:50%;top:50%;transform:translate(-50%,-50%);width:min(420px,calc(100vw - 32px));max-height:86vh;overflow:auto;background:var(--card);border-radius:0;padding:20px;border:1px solid var(--line);display:grid;gap:12px}
.dlg h2{font-size:18px}
#toast{position:fixed;z-index:90;left:50%;bottom:calc(32px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:11px 20px;border-radius:0;font-weight:500;font-size:14px;max-width:calc(100vw - 32px);text-align:center}
body.subpage #toast,body.composing #toast{bottom:calc(96px + env(safe-area-inset-bottom))}

/* login card */
.authcard{max-width:360px;margin:9vh auto 0;padding:0 16px 40px;display:grid;gap:16px}
.authcard .word{font-size:18px;font-weight:400;letter-spacing:.34em;padding-left:.34em;text-align:center;line-height:1;margin-bottom:24px}
.authcard input{padding:15px 16px;border-radius:0}
.authcard .stack{padding:0}.small{text-align:center;color:var(--mute);font-size:14px}.small a{color:var(--ink);font-weight:500}

/* 넓은 화면: 같은 문법, 머리 한 줄 · 가운데 한 단(600px) */
@media (min-width:700px){
  :root{--edge:32px}
  body.popped{overflow:hidden}
  .fam{min-height:60px;padding-left:var(--edge);padding-right:var(--edge)}
  .fam .brand{font-size:15px}
  .fm-open,.fm-icon,.tabs{display:none}
  .fw{display:flex;gap:28px}.fw-l{grid-area:l;justify-self:start}.fw-r{grid-area:r;justify-self:end}
  .fw .si{min-height:44px;font-size:12px;color:var(--mute)}.fw .si.on{color:var(--ink)}.fw .si.on::after{bottom:9px}
  body:not(.subpage) .frame{padding-bottom:64px}
  body:not(.subpage) #toast{bottom:calc(32px + env(safe-area-inset-bottom))}
  .head .hin,.col,.replybar{max-width:600px;margin-left:auto;margin-right:auto}
  .hin{padding:0}
  .cell,.chips,.grp,.prow,.nrow,.drow,.srow,.sgh{padding-left:0;padding-right:0}
  .cell.cm.reply{padding-left:24px}
  .frame{padding-bottom:64px}
  body.r-post .frame{padding-bottom:40px}
  .replybar{position:sticky;bottom:0;left:auto;right:auto;padding:10px 0}
  /* messages: two panes under the family bar */
  body.r-messages .col,body.r-conversation .col{max-width:none;margin:0;min-height:0}
  .msgs{display:grid;grid-template-columns:340px minmax(0,1fr);height:calc(100vh - 61px);border-top:1px solid var(--line)}
  .mlist,.msgs.open .mlist{display:block;overflow-y:auto;border-right:1px solid var(--line);height:100%}
  .mpane,.msgs.open .mpane{display:flex;flex-direction:column;height:100%;min-height:0}
  .mtop{padding-top:18px}.mhead{padding-top:12px;top:0}
  .empty-pane{display:flex;flex:1;align-items:center;justify-content:center}
  .hb2{display:none}
  .msgs .chips,.msgs .prow{padding-left:16px;padding-right:16px}.msgs .mtop{padding-left:16px}
  /* compose modal */
  #sheet:not(:empty){align-items:center}
  .sheet{width:640px;height:auto;max-height:82vh}
  .cbox{min-height:200px}
  .sh{padding-top:8px}
  .menu{position:fixed;left:0;right:auto;bottom:auto;width:220px;padding:6px}
  .mi{min-height:44px;font-size:14px}
  .grid3{padding:0}
  .authcard{margin-top:12vh}
}
@media (max-width:699px){
  .cell:first-child{border-top:0}
  .mpane .mhead{padding-left:4px}
  body.in-conv .mlist{display:none}
  body.r-conversation .fam{display:none}
  .authcard{margin-top:7vh}
  .r-auth .head{display:none}
}