/* 나들목 — 미니멀 무채색, 읽기 중심. 시각 기준: design/prototype-blog-app-ui.html
   토큰은 임시값 (Figma 공통 컴포넌트 반영 전). 새 색을 만들지 말고 아래 토큰만 쓰세요. */
:root{
  --bg:#fff;--surface:#f4f4f4;--line:#e4e4e4;--text:#1c1c1c;--sub:#666;--on-strong:#fff;--strong:#1c1c1c;
  --hl:120,120,120;           /* 하이라이트 농도 바탕색 (rgb). 투명도는 화면 코드가 0.1~1.0 으로 지정 */
  --hl-max:.42;               /* 투명도 1.0 일 때 실제 alpha 상한 (글자 가독성 유지) */
  --mine:#1c1c1c;             /* 내 하이라이트 밑줄 */
  --danger:#1c1c1c;
  --sans:"Noto Sans KR",system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --serif:"Noto Serif KR","Apple SD Gothic Neo",Georgia,serif;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s6:24px;--s8:32px;--r:6px;
  --tabbar:52px;
  color-scheme:light;box-sizing:border-box;
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#161616;--surface:#222;--line:#2f2f2f;--text:#ececec;--sub:#9b9b9b;--on-strong:#161616;--strong:#ececec;--hl:170,170,170;--hl-max:.38;--mine:#ececec;--danger:#ececec;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#161616;--surface:#222;--line:#2f2f2f;--text:#ececec;--sub:#9b9b9b;--on-strong:#161616;--strong:#ececec;--hl:170,170,170;--hl-max:.38;--mine:#ececec;--danger:#ececec;color-scheme:dark}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;padding-top:env(safe-area-inset-top,0px)}
body.modal-open{overflow:hidden}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
button:disabled{cursor:not-allowed;opacity:.5}
a{color:inherit}
:focus-visible{outline:2px solid var(--text);outline-offset:2px;border-radius:2px}
[hidden]{display:none!important}
#main:focus,#main:focus-visible{outline:0} /* 화면 이동 후 프로그램으로 주는 포커스 — 테두리 표시 안 함 */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:8px;z-index:50;background:var(--strong);color:var(--on-strong);padding:8px 12px;border-radius:var(--r)}
.skip:focus{left:8px}
svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ───── 셸: 모바일 하단 탭바 / 768px+ 좌측 레일 ───── */
.shell{min-height:100vh}
.brand-bar{position:sticky;top:0;z-index:5;background:var(--bg);border-bottom:1px solid var(--line);height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--s4)}
.brand{font-weight:700;font-size:17px;text-decoration:none}
.account .link{font-size:14px;color:var(--sub);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
nav.tabs{position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex;background:var(--bg);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
nav.tabs a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:var(--s2) 0;font-size:12px;color:var(--sub);text-decoration:none;min-height:var(--tabbar)}
nav.tabs a[aria-current="page"]{color:var(--text);font-weight:500}
nav.tabs svg{width:22px;height:22px}
main{padding:var(--s6) var(--s4) calc(var(--tabbar) + 48px + env(safe-area-inset-bottom,0px));max-width:720px;margin:0 auto;outline:0}
@media(min-width:768px){
  .shell{display:grid;grid-template-columns:208px minmax(0,1fr)}
  aside.rail{position:sticky;top:0;height:100vh;border-right:1px solid var(--line);padding:var(--s6) var(--s4);display:flex;flex-direction:column;gap:var(--s6)}
  .brand-bar{position:static;border:0;height:auto;padding:0;flex-direction:column;align-items:flex-start;gap:var(--s2)}
  nav.tabs{position:static;flex-direction:column;border:0;padding:0;background:none}
  nav.tabs a{flex-direction:row;justify-content:flex-start;gap:var(--s3);font-size:15px;padding:0 var(--s3);border-radius:var(--r);min-height:44px}
  nav.tabs a:hover{background:var(--surface)}
  nav.tabs a[aria-current="page"]{background:var(--surface)}
  main{padding:var(--s8);width:100%;min-width:0}
}
@media(min-width:1100px){main{max-width:1080px}.view-post,.view-write,.view-me,.view-stats,.view-login,.view-signup,.view-onboard,.view-reconsent,.view-terms,.view-privacy{max-width:720px;margin:0 auto}}

/* ───── 글자 ───── */
h1{font-size:24px;line-height:1.35;margin:0 0 var(--s4);font-weight:700}
h2{font-size:17px;margin:0 0 var(--s3);font-weight:700}
@media(min-width:768px){h1{font-size:28px}}
.meta{font-size:13px;color:var(--sub)}
.muted{color:var(--sub)}
.back{display:inline-flex;align-items:center;gap:var(--s1);min-height:44px;color:var(--sub);text-decoration:none;margin-left:-4px}
.back svg{width:20px;height:20px}

/* ───── 버튼·입력 ───── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 var(--s4);border-radius:var(--r);border:1px solid var(--line);font-weight:500;text-decoration:none;background:var(--bg)}
.btn:hover:not(:disabled){border-color:var(--text)}
.btn.strong{background:var(--strong);color:var(--on-strong);border-color:var(--strong)}
.btn.danger{background:var(--bg);color:var(--danger);border-color:var(--danger);font-weight:700}
.btn.small{min-height:36px;padding:0 var(--s3);font-size:14px}
.btn.block{display:flex;width:100%}
.btn[aria-busy="true"]{cursor:progress}
.link{color:var(--sub);text-decoration:underline;text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border-radius:var(--r);color:var(--sub)}
.icon-btn:hover{background:var(--surface);color:var(--text)}
.field{margin-bottom:var(--s4)}
.field label,.label{display:block;font-size:13px;color:var(--sub);margin-bottom:var(--s1)}
.input,.select,.textarea{display:block;width:100%;min-height:44px;padding:0 var(--s3);border:1px solid var(--line);border-radius:var(--r);background:var(--bg);outline:0}
.textarea{padding:var(--s3);min-height:96px;resize:vertical;line-height:1.6}
.input:focus,.select:focus,.textarea:focus{border-color:var(--text)}
.input[aria-invalid="true"]{border-color:var(--text);border-width:2px}
.hint{font-size:13px;color:var(--sub);margin:var(--s1) 0 0}
.err{color:var(--text);font-size:13px;margin:var(--s1) 0 0;min-height:20px}
.err:not(:empty)::before{content:"! ";font-weight:700}
.ok-msg{font-size:13px;margin:var(--s1) 0 0}
.check{display:flex;align-items:flex-start;gap:var(--s2);min-height:44px;padding:var(--s2) 0}
.check input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--strong)}
.form{max-width:420px}
.form .actions-row{display:flex;gap:var(--s2);margin-top:var(--s6)}
.seg{display:flex;gap:var(--s4);border-bottom:1px solid var(--line);margin-bottom:var(--s4)}
.seg button{padding:var(--s3) 0;color:var(--sub);border-bottom:2px solid transparent;margin-bottom:-1px;min-height:44px}
.seg button[aria-selected="true"]{color:var(--text);font-weight:500;border-color:var(--text)}

/* ───── 상태: 로딩 / 빈 / 오류 ───── */
.state{padding:var(--s8) 0;text-align:center;color:var(--sub);display:flex;flex-direction:column;align-items:center;gap:var(--s3)}
.state p{margin:0}
.spinner{width:22px;height:22px;border:2px solid var(--line);border-top-color:var(--text);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{position:fixed;left:50%;bottom:calc(var(--tabbar) + 24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--strong);color:var(--on-strong);padding:var(--s3) var(--s4);border-radius:var(--r);font-size:14px;z-index:40;max-width:calc(100vw - 32px)}
@media(min-width:768px){.toast{bottom:var(--s8)}}

/* ───── 확인창 ───── */
.backdrop{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.45);display:grid;place-items:center;padding:var(--s4)}
.dialog{background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:var(--r);padding:var(--s6);width:min(420px,100%)}
.dialog h2{font-size:18px;margin:0 0 var(--s2)}
.dialog-msg{margin:0 0 var(--s6);color:var(--sub);white-space:pre-line}
.dialog-actions{display:flex;justify-content:flex-end;gap:var(--s2)}

/* ───── 피드 (프로토타입) ───── */
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3);border-bottom:1px solid var(--line);margin-bottom:var(--s4);padding-bottom:var(--s3)}
.top h1{margin:0}
.view-toggle{display:flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.view-toggle button{min-height:44px;padding:0 var(--s3);color:var(--sub);font-size:14px}
.view-toggle button[aria-pressed="true"]{background:var(--strong);color:var(--on-strong);font-weight:500}
.search{display:flex;align-items:center;gap:var(--s2);background:var(--surface);border-radius:var(--r);padding:0 var(--s3);height:44px;margin-bottom:var(--s4)}
.search input{flex:1;background:none;border:0;height:100%;outline:0;min-width:0}
.search:focus-within{outline:2px solid var(--text)}
.list{list-style:none;margin:0;padding:0}
.item{border-bottom:1px solid var(--line)}
.item a{display:block;padding:var(--s4) 0;text-decoration:none}
.item h3{margin:0 0 var(--s1);font-size:18px;line-height:1.4;font-weight:700}
.item p{margin:0 0 var(--s2);color:var(--sub);font-size:15px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gallery{column-count:2;column-gap:var(--s3);list-style:none;margin:0;padding:0}
@media(min-width:1100px){.gallery{column-count:3;column-gap:var(--s6)}}
.cat{margin-bottom:var(--s8)}
.cat-h{display:inline-flex;align-items:center;gap:6px;min-height:44px;font:700 18px/1.4 var(--sans)}
.row{list-style:none;margin:0 calc(var(--s4)*-1);padding:0 var(--s4) var(--s2);display:flex;gap:var(--s3);overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin}
.row .tile{flex:0 0 156px;margin:0;scroll-snap-align:start}
@media(min-width:768px){.row{margin:0 calc(var(--s8)*-1);padding:0 var(--s8) var(--s2)}.row .tile{flex-basis:196px}}
.panels{display:grid;grid-template-columns:1fr;gap:var(--s6);align-items:start}
.panels .cat{margin:0}
@media(min-width:768px){.panels{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.panels{grid-template-columns:repeat(3,1fr)}}
.box{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.pi+.pi{border-top:1px solid var(--line)}
.pi a{display:flex;gap:var(--s3);align-items:center;padding:var(--s3);text-decoration:none}
.pi a:hover{background:var(--surface)}
.pi .th{flex:none;width:44px;height:44px;border-radius:var(--r);overflow:hidden}
.pi.first .th{width:64px;height:64px}
.pi .cover{height:100%}
.pi .cover svg{height:100%}
.tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.tx b{font-size:14px;line-height:1.4;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pi.first .tx b{font-size:15px}
.tx span{font-size:13px;line-height:1.5;color:var(--sub);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.pi.first .tx span{-webkit-line-clamp:2}
.tile{break-inside:avoid;margin-bottom:var(--s6)}
.tile a{display:block;text-decoration:none}
.cover{display:block;border-radius:var(--r);background:var(--surface);overflow:hidden;color:var(--text)}
.cover svg{display:block;width:100%;height:auto;stroke:none;fill:currentColor}
.cover img{display:block;width:100%;height:100%;object-fit:cover}
.tile h3{margin:var(--s2) 0 2px;font-size:15px;line-height:1.4;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.more{display:flex;justify-content:center;margin:var(--s6) 0}

/* ───── 글 읽기 ───── */
.article h1{font-size:28px}
.byline{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s2)}
.post-tools{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s4) 0 var(--s6);padding:var(--s2) 0;border-block:1px solid var(--line)}
.body{font-family:var(--serif);font-size:17px;line-height:1.9;max-width:60ch;overflow-wrap:anywhere}
.body p{margin:0 0 1.2em;white-space:pre-wrap}
.body figure{margin:0 0 1.2em}
.body figure img{display:block;max-width:100%;height:auto;border-radius:var(--r);background:var(--surface)}
.body figcaption{font:13px/1.5 var(--sans);color:var(--sub);margin-top:var(--s1)}
/* 하이라이트: 내 것 = 밑줄 + 옅은 바탕, 다른 독자 농도 = 바탕 투명도 (--a: 0.1~1.0) */
mark.hl{color:inherit;background:none;padding:0;border-radius:2px}
mark.hl-heat{background:rgba(var(--hl),calc(var(--a,0) * var(--hl-max)))}
mark.hl-mine{text-decoration:underline 2px var(--mine);text-underline-offset:4px;background-color:rgba(var(--hl),.14)}
mark.hl-mine.hl-heat{background:rgba(var(--hl),calc(var(--a,0) * var(--hl-max)))}
mark.hl-mine:focus-visible{outline:2px solid var(--text)}
.hl-pop{position:absolute;z-index:30;display:flex;gap:var(--s1);background:var(--strong);color:var(--on-strong);border-radius:var(--r);padding:var(--s1);box-shadow:0 4px 16px rgba(0,0,0,.18)}
.hl-pop button{min-height:40px;padding:0 var(--s3);color:inherit;font-size:14px;font-weight:500;border-radius:4px}
.hl-pop button:hover,.hl-pop button:focus-visible{background:rgba(127,127,127,.25);outline-color:var(--on-strong)}
/* "비판적 사고하기": 좌하단 고정, 모바일은 탭바 위 */
.critical{position:fixed;left:var(--s4);bottom:calc(var(--tabbar) + var(--s4) + env(safe-area-inset-bottom,0px));z-index:20;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 var(--s4);border-radius:22px;border:1px solid var(--line);background:var(--bg);font-size:14px;font-weight:500;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.critical[aria-pressed="true"]{background:var(--strong);color:var(--on-strong);border-color:var(--strong)}
@media(min-width:768px){.critical{left:calc(208px + var(--s6));bottom:var(--s6)}}
.legend{font-size:13px;color:var(--sub);margin:0 0 var(--s4)}
.comments{margin-top:var(--s8)}
.cmt{padding:var(--s3) 0;border-bottom:1px solid var(--line);font-size:15px}
.cmt-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s2)}
.cmt-head b{font-weight:500}
.cmt-body{margin:var(--s1) 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.cmt-form{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s4)}
.cmt-form .row-end{display:flex;justify-content:space-between;align-items:center}

/* ───── 아바타 ───── */
.av{width:64px;height:64px;border-radius:50%;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;font-size:22px;font-weight:700;overflow:hidden;flex:none}
.av img{width:100%;height:100%;object-fit:cover}
.av.sm{width:28px;height:28px;font-size:12px}

/* ───── 글쓰기 ───── */
.editor .ttl{width:100%;border:0;border-bottom:1px solid var(--line);background:none;font:700 24px/1.4 var(--sans);padding:var(--s2) 0;outline:0}
.editor .ttl:focus{border-color:var(--text)}
.blocks{display:flex;flex-direction:column;gap:var(--s3);margin:var(--s4) 0}
.block{position:relative}
.block textarea{width:100%;min-height:96px;resize:vertical;border:1px solid var(--line);background:none;border-radius:var(--r);padding:var(--s3) var(--s4);font:400 17px/1.8 var(--serif);outline:0}
.block textarea:focus{border-color:var(--text)}
.block-img{border:1px solid var(--line);border-radius:var(--r);padding:var(--s2);display:flex;flex-direction:column;gap:var(--s2)}
.block-img img{max-width:100%;max-height:360px;object-fit:contain;border-radius:4px;background:var(--surface)}
.block-tools{display:flex;gap:var(--s1);justify-content:flex-end}
.editor-bar{position:sticky;bottom:calc(var(--tabbar) + env(safe-area-inset-bottom,0px));background:var(--bg);display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:var(--s3) 0;border-top:1px solid var(--line);margin-top:var(--s4)}
@media(min-width:768px){.editor-bar{bottom:0}}
.progress{height:4px;background:var(--line);border-radius:2px;overflow:hidden}
.progress>span{display:block;height:100%;background:var(--text);width:0}

/* ───── 내 블로그·통계 ───── */
.me-head{display:flex;gap:var(--s4);align-items:center;margin-bottom:var(--s4)}
.me-head h1{margin:0}
.stat-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3);margin:var(--s4) 0 var(--s6)}
.stat-card{border:1px solid var(--line);border-radius:var(--r);padding:var(--s4)}
.stat-card b{display:block;font-size:24px;line-height:1.2}
.stat-card span{font-size:13px;color:var(--sub)}
.bar-row{display:grid;grid-template-columns:1fr auto;gap:var(--s1) var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.bar-row q{font-family:var(--serif);quotes:"\201C" "\201D"}
.bar-track{grid-column:1/-1;height:6px;background:var(--surface);border-radius:3px;overflow:hidden}
.bar-track>span{display:block;height:100%;background:rgba(var(--hl),1)}

/* ───── 약관 ───── */
.legal{line-height:1.8}
.legal h2{margin-top:var(--s6)}
.notice{border:1px solid var(--line);border-radius:var(--r);padding:var(--s4);margin:0 0 var(--s6);background:var(--surface)}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── views/auth ── */
.steps{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);margin:0 0 var(--s6);padding:0 0 var(--s3);border-bottom:1px solid var(--line);font-size:13px;color:var(--sub)}
.steps li[aria-current="step"]{color:var(--text);font-weight:700}
.steps-n{font-variant-numeric:tabular-nums}
.fieldset{border:0;margin:0 0 var(--s4);padding:0;min-width:0}
.fieldset legend{padding:0}
.radio-row{display:flex;gap:var(--s6)}
.check label{cursor:pointer}
.check>span{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--s2)}
.check .inline-link{font-size:14px;min-height:44px;margin:-12px 0}
.notice-text{margin:0}
.notice h2{margin-top:0}
.notice .btn{margin-top:var(--s3)}
.auth-alt{margin-top:var(--s6)}

/* ── views/write ── */
.editor .write-cat{margin-top:var(--s4)}
.write-cat-msg{display:flex;align-items:center;gap:var(--s2)}
.write-cat-msg .err:empty{display:none}
.block-p .block-tools,.block-img .block-tools{margin-top:var(--s1)}
.block-img img{display:block;align-self:center;height:auto}
.write-add{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.write-add .btn svg{width:20px;height:20px}
.write-upload{margin:var(--s2) 0 0;min-height:20px}
.write-state{display:flex;align-items:center;gap:var(--s2);min-width:0;flex-wrap:wrap}
.write-state .link{font-size:13px}
.write-actions{display:flex;gap:var(--s2);flex:none}
.editor-bar{z-index:4}
.write-bar-err:empty{display:none}

/* ── views/feed·me·stats ── */
.cat h2{font-size:18px;margin:0 0 var(--s3)}
.cat-h svg{flex:none}
.feed-gallery-h{font-size:18px;margin:var(--s2) 0 var(--s3);outline:0}
.feed-body .gallery{margin-top:var(--s2)}
.feed-body .more .state{padding:0}
.me-id{min-width:0}
.me-bio{margin-top:2px;white-space:pre-line;overflow-wrap:anywhere}
.me-bio .link{min-height:0;display:inline}
.me-stats{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin:var(--s3) 0 var(--s4);font-size:14px;color:var(--sub)}
.me-stats b{color:var(--text);font-weight:700;margin-right:2px}
.me-edit{border:1px solid var(--line);border-radius:var(--r);padding:var(--s4);margin:0 0 var(--s6)}
.me-edit .field:last-child{margin-bottom:0}
.me-actions{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.me-count{text-align:right}
.me-item{display:flex;align-items:flex-start;gap:var(--s2)}
.me-item>a:first-child{flex:1;min-width:0}
.me-stat-link{flex:none;display:inline-flex;align-items:center;gap:var(--s1);min-height:44px;min-width:44px;justify-content:center;margin-top:var(--s3);padding:0 var(--s2);border-radius:var(--r);font-size:13px;color:var(--sub);text-decoration:none}
.me-stat-link:hover{background:var(--surface);color:var(--text)}
.me-account{margin-top:var(--s8);padding-top:var(--s4);border-top:1px solid var(--line);font-size:14px}
.me-account h2{font-size:14px;color:var(--sub);font-weight:500;margin:0 0 var(--s1)}
.me-account p.meta{margin:0}
.stats-post{margin:calc(var(--s3)*-1) 0 0;font-size:15px;overflow-wrap:anywhere}
.stats-list .bar-row q{overflow-wrap:anywhere}
.bar-count{font-size:14px;white-space:nowrap}
.bar-ratio{grid-column:1/-1}
.stats-note{margin:var(--s6) 0 0}

/* ── views/post ── */
.byline-tx{display:flex;flex-direction:column;line-height:1.4;min-width:0}
.byline-tx b{font-weight:500;font-size:15px}
.post-tools .btn svg{width:18px;height:18px}
.post-draft{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2);margin:var(--s4) 0}
.post-draft p{margin:0}
.hl-author-hint{margin:0 0 var(--s4)}
.hl-author-hint .link{min-height:44px}
.legend{border-left:3px solid rgba(var(--hl),var(--hl-max));padding-left:var(--s2)}
mark.hl-mine{cursor:pointer}
mark.hl-heat{-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hl-pop button{display:inline-flex;align-items:center;gap:6px;min-height:44px;white-space:nowrap}
.hl-pop svg{width:18px;height:18px}
.critical svg{width:18px;height:18px}
.view-post{padding-bottom:72px}
.comments h2{margin-bottom:var(--s2)}
.cmt-who{display:flex;align-items:center;gap:var(--s2);min-width:0;flex-wrap:wrap}
.cmt-tools{display:flex;gap:var(--s3);flex:none}
.cmt-tools .link{font-size:13px}
.cmt-empty{padding:var(--s4) 0;margin:0}
.cmt-gate{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);padding:var(--s4) 0}
.cmt-gate p{margin:0}
.cmt-actions{display:flex;gap:var(--s2)}
.cmt-edit{margin-top:var(--s2)}
.cmt-form .err:empty{display:none}
/* 가로 목록: 스크롤 스냅이 첫 타일을 화면 끝에 붙이지 않게 (본문 여백과 맞춤) */
.feed-body .row{scroll-padding-inline:var(--s4)}
@media(min-width:768px){.feed-body .row{scroll-padding-inline:var(--s8)}}