/* community.css — 커뮤니티 (2026-09-17 v3 하이브리드, 시안 A 피드형 확정)
   토큰은 라이브 사이트와 동일: 팔레트 SFE_PALETTE_V1(기본=갈색) · 표면 SFE_SURFACE_V1(직각 0 · 선 #d9d2cc · 후광 --glow-lift)
   · 본문 직각 SFE_CONTENT_SQUARE_V1. 원형은 아바타·FAB·**헤더 반전 칩**(2026-09-18 사용자 지시)만. 폭: 데스크톱 / ≤900 태블릿 / ≤640 모바일.
   2026-09-17 헤더·페이지 띠·푸터는 본관(메인 페이지) 실측값 그대로 재현 — 헤더 = Vuetify v-toolbar(≥960 64px + 가운데 1/3 검색 알약 48px r28,
   <960 56px + 돋보기·계정 48px 버튼 · 액션 아이콘 clamp(24~26px)) · 띠 = .page-header-section(헤드라인 clamp(35~40px)/1.15/800 --c,
   캡션 12px/20px Roboto ls .4px --c) · 푸터 = .v-footer #eee + 12px/21.6px #999 ls .4px(줄바꿈도 홈과 같게 — 항목 nowrap 금지).
   ⚠ 이 수치들의 SSOT 는 «라이브 실측» 이고, 지키는 것은 `_test\parity_gate.py` 다(블록 소스를 베끼지 말 것).
   칩(.mh/.tag)은 목록 22px · 글쓰기 폼 36px 한 높이. ⚠ 폼 필드 래퍼는 .fld — 예전 .f 는 자유 말머리 칩(.mh.f)과 충돌해 높이가 깨졌다. */
:root{
  /* ⬇ 2026-09-21 — 색 값은 여기 적지 않는다. 아래 한 줄은 `deploy_palette.py --community` 가
       sfe_palette.json 에서 **생성**한다(위키 injectCSS·master.pug·learn 과 같은 블록, 같은 마커).
       그전엔 커뮤니티가 과목 18토큰 + 중립 6토큰을 손으로 복제하고 있었다 — 값이 두 곳에 있으면
       어긋난다는 것이 이 팔레트의 전제다(--c-rgb 가 실제로 어긋났던 2026-08-10 실증).
       ⚠ 마커 사이는 손으로 고치지 말 것. 색을 바꾸려면 sfe_palette.json 을 고치고 배포한다. */
  /* SFE_PALETTE_V1 START — 과목 컨셉색 단일 SSOT (level=L0). 편집은 sfe_palette.json + deploy_palette.py 경유. 직접 수정 금지. */--s-phys:#cf335c;--s-phys-d:#be2243;--s-phys-bg:#f8e7ec;--s-phys-rgb:207,51,92;--s-phys-d-rgb:190,34,67;--s-phys-surf:#c8435f;--s-phys-surf-lite:#d65274;--s-chem:#e75f2c;--s-chem-d:#d84709;--s-chem-bg:#fcede6;--s-chem-rgb:231,95,44;--s-chem-d-rgb:216,71,9;--s-chem-surf:#de632e;--s-chem-surf-lite:#eb774c;--s-life:#018855;--s-life-d:#016a55;--s-life-bg:#e1f1eb;--s-life-rgb:1,136,85;--s-life-d-rgb:1,106,85;--s-life-surf:#27806e;--s-life-surf-lite:#279a6e;--s-earth:#015ebf;--s-earth-d:#0143bf;--s-earth-bg:#e1edf7;--s-earth-rgb:1,94,191;--s-earth-d-rgb:1,67,191;--s-earth-surf:#275fc9;--s-earth-surf-lite:#2776c9;--s-math:#7821A7;--s-math-d:#5f1591;--s-math-bg:#f3e8f5;--s-math-rgb:120,33,167;--s-math-d-rgb:95,21,145;--s-math-surf:#7738a2;--s-math-surf-lite:#8c42b4;--s-integ:#5f5f5f;--s-integ-d:#494949;--s-integ-bg:#e6e6e6;--s-integ-rgb:95,95,95;--s-integ-d-rgb:73,73,73;--s-integ-surf:#646464;--s-integ-surf-lite:#777777;--s-base:#826a5b;--s-base-d:#6c5d53;--s-base-bg:#f0edeb;--s-base-rgb:130,106,91;--s-base-d-rgb:108,93,83;--s-base-surf:#82756d;--s-base-surf-lite:#958074;--c-deep:#4a3f35;--line:#d9d2cc;--ink:#2b2b2b;--ink2:#5f5955;--ink3:#8f8781;--paper:#faf8f7;--ff-ui:"Pretendard Variable","Pretendard","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",Roboto,"Segoe UI",Arial,sans-serif;--ff-roboto:Roboto,sans-serif;/* SFE_PALETTE_V1 END */
  /* 별칭 = **기본 팔레트 고정**. 커뮤니티는 과목 테마가 돌지 않는다(본관은 body.subject-* 가 재정의). */
  --c:var(--s-base); --c-dark:var(--s-base-d); --c-rgb:var(--s-base-rgb);
  --c-surf:var(--s-base-surf); --c-surf-lite:var(--s-base-surf-lite); --section-bg:var(--s-base-bg);
  --glow-lift: inset 0 1px 0 rgba(255,255,255,.3), 0 4px 16px rgba(var(--c-rgb),.25), 0 0 0 1px rgba(var(--c-rgb),.22);
  --glow-inlay: inset 0 2px 5px rgba(0,0,0,.22), inset 0 0 0 1px rgba(0,0,0,.06);
  /* ⬆ 폰트 스택(`--ff-ui`·`--ff-roboto`)도 **위 팔레트 블록이 싣는다**(2026-09-21).
     그전엔 여기 손으로 적고 «본사이트 선언과 글자 그대로 같아야 한다» 는 주의만 달아 뒀는데,
     실제로는 본관 최다 스택에 있던 정적 `"Pretendard"` 가 여기엔 없어 **이미 갈려 있었다**.
     이제 같은 토큰이라 갈릴 수가 없다 — 값은 sfe_palette.json `fonts` 하나뿐이다. */
}
/* 본관과 같은 Roboto 웹폰트(Wiki.js 자체 서빙 경로) — 헤더 제목·캡션·푸터가 본관과 같은 글꼴로 */
@font-face{font-family:Roboto;src:url(/_assets/fonts/Roboto-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Roboto;src:url(/_assets/fonts/Roboto-Medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Roboto;src:url(/_assets/fonts/Roboto-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);line-height:1.6;min-height:100vh;display:flex;flex-direction:column;
  font-family:var(--ff-ui);
  word-break:keep-all;overflow-wrap:break-word;-webkit-text-size-adjust:100%}
button,input,textarea,select{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
[hidden]{display:none!important}

/* ── 헤더: 본관 v-toolbar 재현 — 3등분 열(로고+제목 / 검색 / 계정), 좌우 4px + 로고 x=16, 계정 버튼 오른쪽 8px ── */
.hdr{position:sticky;top:0;z-index:20;height:64px;background:var(--c-surf);color:#fff;display:flex;align-items:center;padding:0 4px;font-family:var(--ff-roboto)}
.hdr .col{flex:1 1 0;min-width:0;display:flex;align-items:center;height:100%}
.hdr .col.l{padding-left:0}                      /* 열 패딩은 3등분을 어긋나게 한다 → 여백은 자식 margin 으로 */
.hdr .col.c{justify-content:center}
.hdr .col.r{justify-content:flex-end;gap:4px}   /* 본사이트 헤더와 같은 간격(SFE_HDRICONS_V1 --sfe-hdr-gap:4px) */
.hdr .col.r > :last-child{margin-right:4px}        /* 계정 버튼 오른쪽 = 4 + 4 = 8px (본관 실측) */
.hdr .brand{display:flex;align-items:center;min-width:0;color:#fff;margin-left:12px}   /* 로고 x = 4 + 12 = 16 (본관 실측) */
.hdr .brand img{width:34px;height:34px;flex:none;display:block}
.hdr .brand .t{font-size:20px;font-weight:400;line-height:30px;margin:0 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr .srch{position:relative;width:100%;height:48px;border-radius:28px;background:var(--c-surf-lite);box-shadow:var(--glow-inlay);display:flex;align-items:center;padding:0 24px;margin:0}
.hdr .srch > svg{width:24px;height:24px;flex:none;fill:#fff;margin-right:4px}
.hdr .srch input{flex:1;min-width:0;height:32px;padding:8px 0;background:transparent;border:0;outline:none;color:#fff;font:400 16px/20px var(--ff-ui);caret-color:#fff}
.hdr .srch input::placeholder{color:rgba(255,255,255,.9)}
.hdr .srch .close{display:none}
.hdr .ib{width:48px;height:48px;border-radius:50%;flex:none;display:grid;place-items:center;background:transparent;border:0;padding:0;color:#fff;cursor:pointer}
.hdr .ib:hover{background:rgba(255,255,255,.08)}
.hdr .ib svg{width:24px;height:24px;fill:#fff;display:block}
/* 액션 아이콘(학습·알림·계정)은 본사이트와 **같은 유동 크기** — 블록 SFE_HEADER_ICON_SIZE_V1 의 clamp 를 그대로 옮겼다.
   ⚠ 계단(26/24)으로 흉내 내면 중간 폭에서 어긋난다(768px: 본사이트 24.56 ↔ 계단 24). 2026-09-17 대조로 교체.
   ⚠ 돋보기(.srch-btn)와 ⛶(.fs-btn)은 본사이트에서도 clamp 대상이 아니다 — 각각 24 / 30 고정. */
.hdr .ib.lrn svg,.hdr .ib.bell svg,.hdr .ib.acct svg{width:clamp(24px,calc(22px + 0.333vw),26px);height:clamp(24px,calc(22px + 0.333vw),26px)}
/* «학습» 버튼 = 본사이트 헤더의 커뮤니티 버튼과 **같은 반전 칩**(2026-09-18 사용자 «책 아이콘에도 통일되게»).
   48px 자리는 그대로 두고 그 안에 지름 36 흰 원(inset 6) + 글리프만 헤더색(--c-surf)으로 반전한다.
   ⚠ 규격 SSOT 는 블록 `SFE_COMMUNITY_LINK_V1` 의 CSS — 지름·모양·hover·배지를 고칠 땐 **두 곳을 같은 세션에** 고친다(갈리면 parity_gate ② «전환칩» FAIL).
   ⚠ hover 는 stock 48px 틴트 대신 **칩 자체의 톤 변화** 한 겹 — 본사이트 쪽과 같은 신호. --section-bg 는 본사이트 --s-base-bg 와 같은 값(#f0edeb). */
.hdr .ib.lrn{position:relative}
.hdr .ib.lrn::before{content:"";position:absolute;inset:6px;border-radius:50%;background:#fff;transition:background .12s ease}
.hdr .ib.lrn:hover{background:transparent}
.hdr .ib.lrn:hover::before{background:var(--section-bg)}
.hdr .ib.lrn svg{position:relative;z-index:1;fill:var(--c-surf)}
.hdr .srch-btn{display:none}
/* 헤더 아이콘 단추 — 본사이트 stock 버튼과 같은 48px 투명 원형. 학습·전체 화면·검색·알림·계정이 모두 이 규격
   (⚠ «학습» 만 그 안에 흰 반전 칩이 하나 더 깔린다 — 바로 위 규칙, 본사이트 커뮤니티 버튼과 한 쌍).
   ⚠ 옛 베이지 알약(.go)은 폐기: 아이콘 줄에서 혼자 박스라 이질적이었다(2026-09-17 사용자 지적) */
.hdr .fs-btn svg{width:30px;height:30px}   /* 본사이트 ⛶(#sfe-fsbtn 글리프 30px)와 같은 크기 — 전환해도 아이콘이 달라 보이지 않게 */
.hdr .fs-btn .i-out{display:none}
.hdr .fs-btn.is-on .i-in{display:none}
.hdr .fs-btn.is-on .i-out{display:block}
/* 뒤로(←) — 전체 화면 셸 안에서만(2026-09-27 사용자 결정 — 시안 방안 A). 본사이트 셸 안 ←(#sfe-fsback)와 한 쌍 = 자리·크기·모양·흐림 값이 같다:
   로고 가운데(x 33 = 헤더 4 + 여백 12 + 로고 17)에 48 원을 겹쳐 놓고 로고만 비운다 — 제목·아이콘은 한 칸도 안 움직인다.
   흐림(첫 페이지) = 흰색 .3(본사이트 = Vuetify 다크 비활성 아이콘 값) · 흐릴 때는 틴트 없음 */
.hdr .col.l{position:relative}
.hdr .ib.back{position:absolute;left:5px;top:50%;margin-top:-24px;z-index:1}
.hdr.has-back .brand img{visibility:hidden}
.hdr .ib.back.is-off{cursor:default}
.hdr .ib.back.is-off:hover{background:transparent}
.hdr .ib.back.is-off svg{fill:rgba(255,255,255,.3)}
/* 헤더 툴팁 — 본사이트와 같은 칩(버튼 아래 12px, hover 기기만).
   ⚠ 규격은 «블록 소스» 가 아니라 **라이브 실측**에 맞춘다: #sfe-fstip 은 SFE_SURFACE_V1 이 덮어써 직각 0 · --line 테두리 ·
   --glow-lift 로 나온다(소스의 둥근 8px·베이지 테두리는 라이브에 안 보인다). 2026-09-17 대조로 발견해 맞춤. */
.hdrtip{position:fixed;z-index:60;pointer-events:none;white-space:nowrap;background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:0;padding:4px 10px;color:var(--c-deep);font:600 12.5px/1.35 var(--ff-ui);box-shadow:var(--glow-lift);opacity:0;transition:opacity .15s}
.hdrtip.on{opacity:1}
/* 전체 화면 셸 — 오버레이 안에 같은 사이트를 띄운다(본사이트와 같은 방식). 배경은 흰색: 전체 화면 중에는
   뒤 문서가 안 그려져 UA 기본 ::backdrop(검정)이 드러난다(본사이트 §53 v9 교훈 그대로). */
#cmfs-shell{position:fixed;top:0;left:0;right:0;bottom:0;z-index:2147000000;background:#fff}
#cmfs-shell::backdrop{background:#fff}
#cmfs-shell::-webkit-backdrop{background:#fff}   /* 사파리는 표준 ::backdrop 을 모른다(본사이트 §53 v9.3) */
#cmfs-frame{width:100%;height:100%;border:0;display:block;background:#fff}
/* 헤더 없는 화면 폴백(2026-09-27) — 셸 안에 우리 헤더가 없는 화면(구독 서버 독립 화면·바깥 사이트)이 뜨면 셸이 직접 왼쪽 위 ← · 오른쪽 위 ⛶.
   본사이트 셸 폴백(.sfe-fsfb)과 같은 규격 = FAB 원 48 · 기본 팔레트 --s-base-* · 후광 · 흐림 .45 */
#cmfs-shell .cmfs-fb{position:absolute;top:8px;z-index:2;display:none;place-items:center;width:48px;height:48px;padding:0;margin:0;border:0;border-radius:50%;background:var(--s-base-surf);box-shadow:inset 0 1px 0 rgba(255,255,255,0.3),0 4px 16px rgba(var(--s-base-rgb),0.25),0 0 0 1px rgba(var(--s-base-rgb),0.22);cursor:pointer;-webkit-tap-highlight-color:transparent}
#cmfs-shell .cmfs-fb.on{display:grid}
#cmfs-shell .cmfs-fb svg{width:24px;height:24px;fill:#fff;display:block}
#cmfs-shell .cmfs-fb.back{left:8px}
#cmfs-shell .cmfs-fb.exit{right:8px}
#cmfs-shell .cmfs-fb.is-off{cursor:default}
#cmfs-shell .cmfs-fb.is-off svg{fill:rgba(255,255,255,.45)}
.hdr .noti{position:relative;display:flex;align-items:center}
.hdr .bell .dot{position:absolute;top:6px;right:6px;min-width:16px;height:16px;padding:0 4px;background:#be2243;color:#fff;font:800 10px/16px var(--ff-ui);text-align:center;border-radius:8px;box-shadow:0 0 0 2px var(--c-surf)}   /* 본사이트 커뮤니티 버튼 배지와 같은 규격 */
.notipanel{position:absolute;top:calc(100% + 4px);right:0;width:360px;max-width:calc(100vw - 16px);background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:var(--glow-lift);z-index:30}
.notipanel .hd{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--line);font-size:13px;font-family:var(--ff-ui)}
.notipanel .list{max-height:min(60vh,420px);overflow:auto}
.notipanel .empty-s{padding:18px 14px;line-height:1.6}
.notipanel .ni{display:flex;gap:10px;padding:11px 14px;border-top:1px solid #f1ece8;font-family:var(--ff-ui);align-items:flex-start}
.notipanel .ni:first-child{border-top:none}
.notipanel .ni:hover{background:var(--paper)}
.notipanel .ni.un{background:#fbf7f3}
.notipanel .ni.un .k{background:var(--c-dark);color:#fff;border-color:var(--c-dark)}
.notipanel .ni .k{flex:none;font-size:10.5px;font-weight:800;line-height:1;padding:4px 6px;border:1px solid var(--line);color:var(--ink2);background:#fff}
.notipanel .ni .t{flex:1;min-width:0;font-size:13px;color:var(--ink2);line-height:1.5}
.notipanel .ni .t b{color:var(--ink)}
.notipanel .ni .x{display:block;color:var(--ink);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notipanel .ni .p{display:block;font-size:11.5px;color:var(--ink3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hdr .me{display:flex;align-items:center;min-width:0;color:#fff}
.hdr .me .nm{font:600 14px/1 var(--ff-ui);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hdr .me .sp{margin-left:6px}
.hdr .me .ib{margin-left:4px}
.hdr .me .ava{width:30px;height:30px;font-size:13px;background:rgba(255,255,255,.2);box-shadow:0 0 0 1.5px rgba(255,255,255,.7)}
.hdr .me .ava.adm{background:var(--c-deep)}
.ava{width:28px;height:28px;border-radius:50%;background:var(--c-dark);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800;flex:none}
.ava.adm{background:var(--c-deep)}
.ava.gone{background:#e6e0db;color:var(--ink3)}
.sp{display:inline-flex;align-items:center;height:20px;padding:0 5px;font-size:10px;font-weight:800;line-height:1;margin-left:4px;vertical-align:middle;background:#e1f1eb;color:#016a55;border:1px solid rgba(1,136,85,.3);white-space:nowrap}
.who{color:var(--ink2);font-weight:700;white-space:nowrap}

/* ── 페이지 띠: 본관 .page-header-section 재현 (90px · 헤드라인 35.5px/800 --c · 캡션 12px Roboto --c) — 안쪽 폭은 본문 .wrap 과 같은 컨테이너 ── */
.band{background:var(--section-bg);min-height:90px;display:flex;align-items:center}
.band .in{width:100%;max-width:1180px;margin:0 auto;padding:8px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.band .hd{min-width:0}
/* 띠 제목 = 본사이트 규칙 그대로: clamp(35px, 2.6vw, 40px)/1.15, ls -.02em, 800.
   ⚠ 고정 35.5px 은 1366 에서만 맞고 그 밖의 폭에서 갈렸다(2026-09-17 대조). */
.band h2{margin:8px 0 4px;font:800 clamp(35px,2.6vw,40px)/1.15 var(--ff-ui);letter-spacing:-.02em;color:var(--c)}
.band .caption{margin:0;font:400 12px/20px var(--ff-roboto);letter-spacing:.4px;color:var(--c)}
.band .caption a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.band .caption b{font-weight:700}
.band .btn{flex:none}

/* ── 버튼 (터치 40px) ── */
.btn{height:40px;padding:0 16px;border:1px solid var(--c-dark);background:var(--c-dark);color:#fff;font-size:13.5px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;text-decoration:none}
.btn.ghost{background:#fff;color:var(--c-dark)}
.btn.sm{height:34px;padding:0 12px;font-size:12.5px}
.btn.xs{height:30px;padding:0 9px;font-size:11.5px}
.btn.gray{border-color:var(--line);background:#fff;color:var(--ink2)}
.btn.danger{border-color:#be2243;background:#fff;color:#be2243}
.btn.kakao{background:#FEE500;border-color:#FEE500;color:#191919;font-weight:800;border-radius:4px;height:50px;font-size:15px;justify-content:center}
.btn.kakao.sm{height:40px;font-size:13.5px}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn svg{width:15px;height:15px}

/* ── 레이아웃 ── */
.wrap{max-width:1180px;width:100%;margin:0 auto;padding:22px 24px 40px;display:grid;grid-template-columns:1fr 300px;gap:24px;align-items:start;flex:1}
.wrap.one{grid-template-columns:1fr;max-width:820px}
.wrap.narrow{max-width:560px}
.wrap > main,.wrap > .aside{min-width:0}
.card{background:#fff;border:1px solid var(--line)}
.card.pad{padding:22px 24px}
.card.pad .btn{margin-top:12px}
.aside .card{padding:14px 16px;margin-bottom:14px}
.aside h4{margin:0 0 10px;font-size:13px;font-weight:800;color:var(--ink2);letter-spacing:-.01em}
.aside ol{margin:0;padding:0;list-style:none}
.aside ol li{display:flex;gap:8px;align-items:baseline;padding:6px 0;border-top:1px solid #f1ece8;font-size:13px}
.aside ol li:first-child{border-top:none;padding-top:0}
.aside ol li .n{font-size:11.5px;font-weight:800;color:var(--c);width:14px;flex:none}
.aside ol li .t{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aside ol li .k{font-size:11px;color:var(--ink3);flex:none}
.aside .rule{font-size:12.5px;color:var(--ink2);margin:0;padding-left:16px}
.aside .rule li{margin:3px 0}
.aside .rule a{text-decoration:underline;text-underline-offset:3px;color:var(--c-dark)}
.aside .mine{display:grid;grid-template-columns:1fr 1fr 1fr;text-align:center;gap:6px}
.aside .mine div{padding:8px 0;background:var(--paper);border:1px solid var(--line)}
.aside .mine b{display:block;font-size:16px;color:var(--c-dark)}
.aside .mine span{font-size:11px;color:var(--ink3)}
.aside .kv{font-size:12px;color:var(--ink2)}
.aside .kv div{display:flex;justify-content:space-between;padding:5px 0;border-top:1px solid #f1ece8}
.aside .kv div:first-child{border-top:none}
.aside .kv b{color:#be2243;font-weight:700}
.empty-s{font-size:12.5px;color:var(--ink3);margin:0}

/* ── 필터 ── */
.filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.filters .cat{display:inline-grid;grid-auto-flow:column;border:1px solid var(--line);background:#fff}
.filters .cat a{height:36px;padding:0 13px;font-size:12.5px;font-weight:700;color:var(--ink2);display:grid;place-items:center;border-left:1px solid var(--line)}
.filters .cat a:first-child{border-left:none}
.filters .cat a.on{background:var(--c-dark);color:#fff}
.filters .sort{margin-left:auto;display:flex;gap:2px;font-size:12.5px}
.filters .sort a{padding:8px 6px;color:var(--ink3);font-weight:700}
.filters .sort a.on{color:var(--c-dark);text-decoration:underline;text-underline-offset:4px}
.filters .cnt{font-size:12.5px;color:var(--ink3)}
.qnote{font-size:13px;color:var(--ink2);margin:0 0 12px}
.qnote a{color:var(--c-dark);text-decoration:underline;text-underline-offset:3px;margin-left:6px}

/* ── 칩: 말머리(.mh)·과목(.tag) 은 한 높이 22px (글쓰기 폼에서는 36px) ── */
/* 아래 패딩 `.125em` = 광학 보정. 가운데 맞추는 것은 글리프가 아니라 **strut(폰트 상자)** 이고,
   한글 우선 스택의 계통 편심이 +0.125em(글씨가 아래로) 이라 그만큼 되민다 — 높이 고정 + center 상자는
   패딩의 절반만 반영되므로 정확히 상쇄된다. 판단·상수의 SSOT = 메모리 hangul-vcenter-strut.md.
   ⚠ 홈 블록 `#sfe-cmhome .fld` 가 2026-09-18 에 같은 보정을 받았는데 여기만 빠져 있었다
     (parity_gate ⑥ 가 «색은 같은데 padding 만 다르다» 로 잡아냄). 2026-09-21 실측 A/B:
     보정 전 +1.83px → 후 −0.17px (6배 요소 캡처의 칠해진 픽셀, 강제 Roboto 대조로 기전 확인).
   ⚠ 폼 칩(`.fld .chips .mh`, h36·12.5px)은 padding 을 통째로 덮어써 여기 영향이 없다 — 그쪽은 로그인
     페이지라 익명 실측이 안 돼 이번 회차에서 **미측정**으로 남겼다(추측으로 보정하지 않는다). */
.mh,.tag{display:inline-flex;align-items:center;height:22px;padding:0 7px .125em;font-size:11px;font-weight:800;line-height:1;letter-spacing:.01em;white-space:nowrap;border:1px solid transparent;vertical-align:middle;margin:0}
.mh.f{background:var(--c-dark);color:#fff}      /* 자유 = 기본 말머리(2026-09-17 «질문» 폐지 후 대표색) */
.mh.h{background:#fff;color:var(--c);border-color:var(--c)}          /* 유머 = 선만 있는 칩 */
.mh.i{background:var(--section-bg);color:var(--c-dark);border-color:rgba(var(--c-rgb),.35)}   /* 정보 = 연한 칩 */
.mh.n{background:var(--c-deep);color:#fff}      /* 공지 = 가장 진한 베이지 */
/* ⚠ 네 말머리가 모두 같은 계열이라 **단색 농도만으로는 갈리지 않는다**(자유 --c-dark ↔ 정보/유머 후보 --c 인접 대비 1.25).
   그래서 «채움 방식» 으로 가른다: 자유 = 중간 단색 · 유머 = 선만 · 정보 = 연한 채움 · 공지 = 진한 단색.
   말머리를 더 늘릴 일이 생기면 색을 하나 더 짜내지 말고 이 네 가지 채움 방식 안에서 다시 짜는 편이 낫다. */
/* ⚠ 이 줄이 위 `.mh,.tag` 의 padding 을 **통째로** 덮어쓴다(같은 특이도·뒤에 옴) → 광학 보정도 같이 적는다.
   안 적으면 말머리만 가운데가 맞고 태그는 그대로 아래로 뜬다(2026-09-21 A/B 에서 둘 다 +1.83 이었다). */
.tag{padding:0 6px .125em;background:#fff;border-color:rgba(var(--tr,var(--c-rgb)),.4);color:var(--td,var(--ink3))}
.tag.s-phys{--tr:var(--s-phys-rgb);--td:var(--s-phys-d)} .tag.s-chem{--tr:var(--s-chem-rgb);--td:var(--s-chem-d)}
.tag.s-life{--tr:var(--s-life-rgb);--td:var(--s-life-d)} .tag.s-earth{--tr:var(--s-earth-rgb);--td:var(--s-earth-d)}
.tag.s-math{--tr:var(--s-math-rgb);--td:var(--s-math-d)} .tag.s-integ{--tr:var(--s-integ-rgb);--td:var(--s-integ-d)}
.tag.none{border-style:dashed}
.badge{display:inline-flex;align-items:center;height:20px;padding:0 5px;font-size:10.5px;font-weight:800;line-height:1;background:var(--section-bg);color:var(--c-dark);border:1px solid rgba(var(--c-rgb),.3);vertical-align:middle;white-space:nowrap}
.badge.admin{background:var(--c-deep);color:#fff;border-color:var(--c-deep)}
.badge.warn{background:#fff7f8;color:#be2243;border-color:#be2243}
.meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink3);flex-wrap:wrap}
.meta.ml{margin-left:auto}
.meta .dot::before{content:"·";margin:0 2px;color:var(--line)}
.stats{display:flex;gap:12px;font-size:12px;color:var(--ink3)}
.stats span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.stats .up{color:var(--c-dark)}
.stats .down{color:var(--ink3)}

/* ── 미디어 ── */
.ph{background:linear-gradient(135deg,#e9e2dc,#cfc4bb);display:grid;place-items:center;color:#6c5d53;font-size:11.5px;font-weight:800;position:relative;overflow:hidden;object-fit:cover}
.ph.yt{background:linear-gradient(135deg,#3a3a3a,#111);color:#fff}
.ph.yt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph .play{position:relative;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;color:var(--ink);z-index:1}
.ph .play svg{width:16px;height:16px;margin-left:2px}

/* ── A. 피드형 목록 ── */
.la .post{background:#fff;border:1px solid var(--line);padding:16px 18px 12px;margin-bottom:10px;display:block}
.la .post:hover{border-color:rgba(var(--c-rgb),.5)}
.la .post.pin{background:#fbf9f7;border-color:rgba(var(--c-rgb),.35)}
.la .post.hid{opacity:.7;border-style:dashed}
.la .post .top{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.la .post .top .meta{margin-left:auto}
.la .post h3{margin:0 0 6px;font-size:16px;font-weight:800;line-height:1.35;letter-spacing:-.01em}
.la .post p{margin:0;font-size:13.5px;color:var(--ink2);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.la .strip{display:flex;gap:6px;margin-top:10px;align-items:center}
.la .strip .ph{width:96px;height:96px;object-fit:cover}
.la .strip .more-ph{font-size:12px;font-weight:800;color:var(--ink3);padding:0 6px}
.la .ytcard{display:flex;gap:12px;margin-top:10px;border:1px solid var(--line);background:var(--paper);padding:8px}
.la .ytcard .ph{width:148px;height:84px;flex:none}
.la .ytcard .t{font-size:13px;font-weight:700;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.la .ytcard .s{font-size:11.5px;color:var(--ink3);margin-top:4px}
.la .post .foot{display:flex;align-items:center;margin-top:10px;padding-top:10px;border-top:1px solid #f1ede9}
.la .post .foot .stats{margin-left:auto}
.empty{background:#fff;border:1px dashed rgba(var(--c-rgb),.45);padding:34px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--ink2);font-size:13.5px}
.empty b{font-size:15px;color:var(--ink)}
.empty .btn{margin-top:8px}

/* 페이지네이션 */
.pager{display:flex;justify-content:center;gap:4px;margin-top:18px;flex-wrap:wrap}
.pager a,.pager span{min-width:36px;height:36px;padding:0 8px;display:grid;place-items:center;border:1px solid var(--line);background:#fff;font-size:12.5px;font-weight:700;color:var(--ink2)}
.pager span{border-color:transparent;background:transparent}
.pager a.on{background:var(--c-dark);border-color:var(--c-dark);color:#fff}
.more{display:none;margin-top:14px}
.more .btn{width:100%;justify-content:center;height:44px}

/* ── 상세 ── */
.art{background:#fff;border:1px solid var(--line);padding:22px 24px 18px}
.art.is-hidden{display:none}
.art .top{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.art h1{margin:0 0 10px;font-size:22px;font-weight:800;line-height:1.35;letter-spacing:-.02em}
.art .whorow{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid #f1ede9;margin-bottom:16px;flex-wrap:wrap}
.art .whorow .nm{font-size:13.5px;font-weight:800;color:var(--ink)}
.art .whorow .tm{font-size:12px;color:var(--ink3)}
.art .body{font-size:15px;line-height:1.8}
.art .body a{color:var(--c-dark);text-decoration:underline;text-underline-offset:3px;word-break:break-all}
.art .pics{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0}
.art .pics.n1{grid-template-columns:1fr}
.art .pics a{display:block;background:var(--section-bg)}
.art .pics img{width:100%;height:auto;max-height:520px;object-fit:contain}
.art .yt{display:flex;gap:14px;border:1px solid var(--line);background:var(--paper);padding:10px;margin:14px 0 4px}
.art .yt .ph{width:200px;height:112px;flex:none}
.art .yt .t{font-size:14px;font-weight:800;line-height:1.4}
.art .yt .s{font-size:12px;color:var(--ink3);margin-top:4px}
.art .yt .l{font-size:11.5px;color:var(--c-dark);margin-top:8px;text-decoration:underline;text-underline-offset:3px;word-break:break-all}
.art .frompage{margin-top:14px;font-size:12.5px;color:var(--ink2);background:var(--paper);border:1px solid var(--line);padding:8px 12px}
.art .frompage a{color:var(--c-dark);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.art .acts{display:flex;align-items:center;gap:8px;margin-top:18px;padding-top:14px;border-top:1px solid #f1ede9;flex-wrap:wrap}
.art .acts .r{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
/* 추천·비추천 — 펨코식: 위로 엄지 / 아래로 엄지(수치는 마이너스로) */
.votes{display:inline-flex;gap:6px}
.vt{height:40px;padding:0 14px;border:1px solid var(--line);background:#fff;color:var(--ink2);font-weight:800;font-size:13px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap}
.vt svg{width:16px;height:16px;fill:currentColor;display:block}
/* 색은 베이지 계열로 — 과목색(빨강·파랑)은 너무 진해 본문과 싸웠다(2026-09-17 사용자 지시) */
.vt.up{color:var(--c-dark);border-color:rgba(var(--c-rgb),.45)}
.vt.down{color:var(--ink3);border-color:var(--line)}
.vt.up.on{background:var(--c-dark);border-color:var(--c-dark);color:#fff}
.vt.down.on{background:#9a938d;border-color:#9a938d;color:#fff}
.vt.sm{height:28px;padding:0 8px;font-size:12px;gap:4px;border-color:transparent;background:transparent}
.vt.sm svg{width:13px;height:13px}
.vt.sm:hover{border-color:var(--line);background:#fff}
.vt.sm.on{background:transparent}
.vt.sm.up.on{color:var(--c-dark);background:rgba(var(--c-rgb),.12)}
.vt.sm.down.on{color:var(--ink2);background:#efeae6}
.lnk{background:none;border:none;font-size:12.5px;color:var(--ink3);cursor:pointer;padding:10px 8px;font-weight:700;white-space:nowrap}
.lnk.on{color:var(--c-dark)}
.lnk.danger{color:#be2243}
.hidden-panel{background:#fff;border:1px solid var(--line);padding:22px 24px;margin-bottom:14px}
.hidden-panel h3{margin:0 0 6px;font-size:16px;font-weight:800}
.hidden-panel p{margin:0 0 12px;font-size:13.5px;color:var(--ink2);line-height:1.6}
.admin-banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#fff7f8;border:1px solid #be2243;padding:10px 14px;margin-bottom:14px;font-size:13px;color:#be2243;font-weight:700}
.admin-banner .r{margin-left:auto;display:flex;gap:6px}

.cmts{background:#fff;border:1px solid var(--line);margin-top:14px;padding:18px 24px}
.cmts h3{margin:0 0 14px;font-size:15.5px;font-weight:800}
.cmts h3 b{color:var(--c)}
.cm{display:flex;gap:12px;padding:12px 0;border-top:1px solid #f1ede9}
.cm:first-of-type{border-top:none;padding-top:0}
.cm .bd{flex:1;min-width:0}
.cm .nm{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:800;margin-bottom:3px;flex-wrap:wrap}
.cm .nm .tm{font-size:11.5px;color:var(--ink3);font-weight:500}
.cm .tx{font-size:14px;line-height:1.65;color:var(--ink)}
.cm .tx a{color:var(--c-dark);text-decoration:underline;text-underline-offset:3px;word-break:break-all}
.cm .tx.gone{color:var(--ink3);font-style:italic}
.cm .ac{display:flex;gap:2px;margin-top:2px;margin-left:-8px;flex-wrap:wrap}
/* 답글은 깊이 제한이 없다 — 들여쓰기는 4단에서 멈추고, 그 아래는 본문 앞 «@닉» 이 대상을 밝힌다 */
.cm.reply{padding-left:14px;border-left:2px solid rgba(var(--c-rgb),.3);border-top:none;padding-top:8px}
.cm.reply .ava{width:24px;height:24px;font-size:10.5px}
.cm[data-depth="1"]{margin-left:44px}
.cm[data-depth="2"]{margin-left:66px}
.cm[data-depth="3"]{margin-left:88px}
.cm[data-depth="4"]{margin-left:110px}
.cm .tx .rt{display:inline-block;font-weight:800;color:var(--c-dark);margin-right:5px;text-decoration:none}
.cm .tx .rt:hover{text-decoration:underline;text-underline-offset:3px}
.cform .rt-to{width:100%;display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--c-dark);background:var(--section-bg);border:1px solid var(--line);padding:5px 8px;margin-bottom:6px}
.cform .rt-to .x{position:static;width:18px;height:18px;font-size:11px;background:transparent;color:var(--ink3);border:none;cursor:pointer}
.cm.hid{opacity:.75}
.cm .edit textarea{width:100%;min-height:70px;padding:8px 10px;border:1px solid var(--line);font-size:13.5px}
.cm .edit .row{display:flex;gap:6px;margin-top:6px}
.cform{display:flex;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);flex-wrap:wrap}
.cform.reply{margin-top:8px;padding-top:8px;border-top:none}
.cform textarea{flex:1;min-width:200px;min-height:78px;padding:10px 12px;border:1px solid var(--line);background:#fff;resize:vertical;font-size:13.5px;line-height:1.5}
.cform .btn{height:auto;align-self:stretch;min-height:44px}
.cform.reply .btn{min-height:36px}
.cbar{margin-top:14px;padding:14px;border:1px dashed rgba(var(--c-rgb),.5);background:var(--paper);display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;color:var(--ink2);flex-wrap:wrap}
.cbar.susp{border-style:solid;border-color:#be2243;color:#be2243;font-weight:700}
.cbar.susp a{text-decoration:underline}
.ferr{width:100%;font-size:12.5px;color:#be2243;font-weight:700;margin-top:6px}

/* ── 글쓰기 · 닉네임 (필드 래퍼 = .fld) ── */
.form{background:#fff;border:1px solid var(--line);padding:22px 24px}
.form.nick h3{margin:0 0 6px;font-size:16px;font-weight:800}
.form.nick .lead{margin:0 0 14px;font-size:13px;color:var(--ink2);line-height:1.6}
.form.nick .from{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink3);background:var(--paper);border:1px solid var(--line);padding:8px 10px;margin-bottom:14px}
.form.nick .from .ava{width:22px;height:22px;font-size:10px}
.form.nick .rules{margin:6px 0 14px;padding-left:16px;font-size:12px;color:var(--ink3)}
.form.nick .acts{display:flex;gap:12px;align-items:center}
.form.nick .later{font-size:12px;color:var(--ink3);text-decoration:underline;text-underline-offset:3px}
.nstat{font-size:12.5px;font-weight:800;margin-top:6px;min-height:18px}
.nstat.ok{color:#016a55} .nstat.no{color:#be2243}
.fld{margin-bottom:16px}
.fld label{display:block;font-size:12.5px;font-weight:800;color:var(--ink2);margin-bottom:6px}
.fld label small{font-weight:500;color:var(--ink3);margin-left:6px}
.fld input[type=text],.fld input[type=url],.fld textarea{width:100%;padding:10px 12px;border:1px solid var(--line);background:#fff;font-size:14px;line-height:1.5;min-height:42px}
.fld textarea{min-height:190px;resize:vertical}
.fld input:focus,.fld textarea:focus{outline:none;border-color:var(--c);box-shadow:0 0 0 2px rgba(var(--c-rgb),.18)}
.fld .chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.fld .chips .tag,.fld .chips .mh{height:36px;padding:0 12px;font-size:12.5px;cursor:pointer}
.fld .chips .mh{background:#fff;color:var(--ink2);border-color:var(--line)}   /* 폼에서는 «고르기 전» 이 흰색 — 다 칠해두면 전부 켜진 것처럼 보인다 */
/* 고른 말머리는 **목록에서 보이는 색 그대로** + 앞에 «✓» — 색 농도에 기대지 않는 켜짐 표시라
   연한 칩(정보)·선만 있는 칩(유머)도 골랐는지가 또렷하다(폼에서만 색을 바꾸면 목록과 색코드가 갈린다). */
.fld .chips .mh.sel.f{background:var(--c-dark);color:#fff;border-color:var(--c-dark)}
.fld .chips .mh.sel.h{background:#fff;color:var(--c);border-color:var(--c)}
.fld .chips .mh.sel.i{background:var(--section-bg);color:var(--c-dark);border-color:rgba(var(--c-rgb),.35)}
.fld .chips .mh.sel.n{background:var(--c-deep);color:#fff;border-color:var(--c-deep)}
.fld .chips .mh.sel::before{content:"✓";font-weight:900;margin-right:5px}
.fld .chips .sel{outline:2px solid var(--c);outline-offset:1px}
.fixedrow{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--paper);border:1px solid var(--line);font-size:13px;color:var(--ink2);flex-wrap:wrap}
.fixedrow b{color:var(--ink)}
.fixedrow .note{width:100%;font-size:12px;color:var(--ink3);line-height:1.5}
.fixedrow .note b{color:#016a55}
.drop{border:1px dashed rgba(var(--c-rgb),.55);background:var(--paper);padding:18px;text-align:center;font-size:13px;color:var(--ink2);cursor:pointer}
.drop.over{background:#f3eee9;border-color:var(--c)}
.drop b{color:var(--c-dark)}
.drop small{display:block;color:var(--ink3);margin-top:4px;font-size:11.5px}
.thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.thumbs .th{position:relative;width:88px;height:88px}
.thumbs .th .ph{width:100%;height:100%;object-fit:cover}
.thumbs .th.up{opacity:.5}
.th .x,.prev .x{position:absolute;top:-6px;right:-6px;width:22px;height:22px;background:var(--c-deep);color:#fff;border:none;font-size:11px;font-weight:900;cursor:pointer;display:grid;place-items:center}
.prev{position:relative;display:flex;gap:12px;border:1px solid var(--line);background:var(--paper);padding:8px;margin-top:8px;align-items:center}
.prev .ph{width:120px;height:68px;flex:none}
.prev .t{font-size:13px;font-weight:700;line-height:1.4}
.prev .s{font-size:11.5px;color:var(--ink3);margin-top:3px}
.prev .ok{font-size:11.5px;color:#016a55;font-weight:800;margin-top:4px}
.fbar{display:flex;align-items:center;gap:8px;margin-top:6px;padding-top:16px;border-top:1px solid var(--line);flex-wrap:wrap}
.fbar .tip{font-size:12px;color:var(--ink3);margin-right:auto}
.fbar .tip a{color:var(--c-dark);text-decoration:underline;text-underline-offset:3px}
.susp{background:#fff;border:1px solid #be2243;padding:22px 24px}
.susp h3{margin:0 0 6px;font-size:16px;font-weight:800;color:#be2243}
.susp p{margin:0 0 12px;font-size:13.5px;color:var(--ink2);line-height:1.6}
.susp .acts{display:flex;gap:8px;flex-wrap:wrap}

/* ── 모달 (SFE_SURFACE_V1 표면) ── */
.modal-wrap{position:fixed;inset:0;z-index:40;background:rgba(43,43,43,.45);display:flex;align-items:center;justify-content:center;padding:20px}
.modal{width:100%;max-width:420px;background:#fff;border:1px solid var(--line);box-shadow:var(--glow-lift);padding:22px 22px 18px}
.modal h3{margin:0 0 6px;font-size:15.5px;font-weight:800;letter-spacing:-.01em}
.modal p{margin:0 0 14px;font-size:12.8px;color:var(--ink2);line-height:1.6}
.modal p.fine{margin:12px 0 0;font-size:11.5px;color:var(--ink3)}
.modal .draft{display:flex;gap:10px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);padding:10px 12px;margin-bottom:14px;font-size:12.5px;color:var(--ink2);line-height:1.5}
.modal .draft .ic{flex:none;width:26px;height:26px;background:var(--section-bg);display:grid;place-items:center;font-size:13px}
.modal .draft b{color:var(--ink)}
.modal .acts{display:flex;gap:8px;align-items:center}
.modal .acts .btn{flex:1;justify-content:center}
.modal .later{background:none;border:none;font-size:12px;color:var(--ink3);cursor:pointer;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;padding:0}

/* FAB (모바일 글쓰기) — 원형 유지 */
.fab{display:none;position:fixed;right:16px;bottom:18px;width:52px;height:52px;border-radius:50%;background:var(--c-surf);color:#fff;border:none;box-shadow:var(--glow-lift);place-items:center;cursor:pointer;z-index:15}
.fab svg{width:22px;height:22px}

/* 토스트 */
/* 토스트: 사이트 표면과 같은 밝은 계열(흰 바탕 + 갈색 띠). 예전 검은 알약은 본관 어디에도 없던 색이었다 */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:50;background:#fff;color:var(--ink);font-size:13px;font-weight:700;padding:11px 16px 11px 14px;border:1px solid var(--line);border-left:4px solid var(--c);box-shadow:var(--glow-lift);max-width:calc(100% - 32px)}

/* ── 푸터: 홈과 같은 한 줄 (.v-footer #eee 6px 0 + .sfe-footer-custom 12px/21.6px #999 Roboto 가운데).
   ⚠ 링크 줄(모두의 과학·이용약관·…)은 2026-09-17 폐지 — 홈에는 없던 줄이라 사이트마다 달라 보였다.
   ⚠ 항목(.seg)은 통째로 묶어 «대표전화:» 처럼 한 항목이 두 줄로 쪼개지지 않게 한다. */
.site-foot{margin-top:auto;background:#eee;padding:6px 0;display:flex;flex-direction:column;align-items:center;text-align:center;font:400 12px/21.6px var(--ff-roboto);letter-spacing:.4px;color:#999}   /* 자간도 본사이트와 같게(Vuetify caption) */
.site-foot > div{padding:0 16px}
/* 항목 나눔은 홈과 **같은 방식**으로 둔다 — nowrap 으로 항목을 묶었더니 모바일에서 홈(4줄, 98px)보다
   두 줄 더 내려가 회색 띠가 길어졌다(390px 실측 6줄·142px). 홈도 항목이 공백에서 갈린다. */

/* ── 헤더 <960: 본관과 같이 56px, 검색 알약 대신 돋보기 버튼 (누르면 알약이 헤더 위로 덮임) ── */
@media (max-width:959px){
  .hdr{height:56px}
  .hdr .col.l{flex:1 1 auto}
  .hdr .col.c{display:none}
  .hdr .col.r{flex:0 0 auto}
  .hdr .brand .t{margin:0 4px}
  .hdr .srch-btn{display:grid}
  .hdr.show-search .col.c{display:flex;position:absolute;left:8px;right:8px;top:4px;height:48px;z-index:2}
  .hdr.show-search .col.l,.hdr.show-search .col.r{visibility:hidden}
  .hdr.show-search .srch{padding-right:6px}
  .hdr.show-search .srch .close{display:grid;width:40px;height:40px}
}
/* ⚠ 제목 축소 경계는 **580px** — 본사이트 규칙(`@media (max-width:580px)` 16px/1.15)과 같은 값이다.
   599 로 뒀더니 581~599 구간에서만 본사이트 20px ↔ 커뮤니티 16px 로 갈렸다(2026-09-17 대조로 발견). */
@media (max-width:580px){
  .hdr .brand .t{font-size:16px;line-height:18.4px}
}
@media (max-width:599px){
  .hdr .me .nm,.hdr .me .sp{display:none}
}
@media (max-width:359px){   /* 가장 좁은 폰 — 제목 글자를 접어 아이콘 넉 대가 들어갈 자리를 만든다(로고도 본사이트 홈으로 간다) */
  .hdr .brand .t{display:none}
}
/* ── 태블릿 ≤900 ── */
@media (max-width:900px){
  .wrap{grid-template-columns:1fr;padding:18px 18px 34px;gap:0}
  .band .in{padding:8px 18px}
  .aside{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:18px}  /* minmax(0,…) — 1fr 의 최소가 auto 라 nowrap 항목이 열을 벌린다 */
  .aside .card{margin:0;min-width:0}
  .art .yt .ph{width:160px;height:90px}
}
/* ── 모바일 ≤640 ── */
@media (max-width:640px){
  .band .in{padding:8px 16px;flex-wrap:wrap;gap:8px 16px}
  .notipanel{position:fixed;top:56px;right:8px;left:8px;width:auto;max-width:none}
  .band .btn.write{display:none}
  .wrap{padding:14px 16px 30px}
  .aside{display:none}
  .filters{gap:8px}
  .filters .cat{overflow-x:auto;max-width:100%}
  .filters .cnt{display:none}
  .la .post{padding:14px 14px 10px}
  .la .post h3{font-size:15px}
  .la .post p{font-size:13px}
  .la .strip .ph{width:84px;height:84px}
  .la .ytcard .ph{width:120px;height:68px}
  .pager{display:none} .more{display:block}
  .art{padding:16px 14px 14px}
  .art h1{font-size:19px}
  .art .body{font-size:14.5px}
  .art .pics{grid-template-columns:1fr 1fr}
  .art .yt{flex-direction:column} .art .yt .ph{width:100%;height:170px}
  .cmts{padding:14px 14px}
  .cm.reply{margin-left:22px}
  .cform textarea{min-width:0;width:100%}
  .cform .btn{width:100%;justify-content:center}
  .cbar .btn{width:100%;justify-content:center}
  .form{padding:16px 14px}
  .fbar .tip{width:100%;margin-bottom:6px}
  .fab{display:grid}
  .modal{max-width:100%}
  /* ⚠ 옛 `padding:6px 0 80px` 폐기(2026-09-17) — 떠 있는 글쓰기 단추를 피하려고 넣었지만 그 탓에
     회색 푸터 띠가 홈보다 74px 길었다. 본사이트 홈도 떠 있는 단추가 푸터 위로 그냥 겹친다(390px 실측)
     → 같은 규칙을 따른다. 푸터 자체는 홈과 같은 높이. */
}

/* ── SFE_CM_VCENTER_V1 · 글자 세로 가운데 (2026-09-29 · 사용자 «전부다 고쳐줘») ──
   원인: 칩·버튼·아바타는 글자 모양이 아니라 «첫 글꼴»의 줄 상자(strut)를 가운데 둔다. 안드로이드엔 --ff-ui 앞쪽 한글 글꼴이 없어
   Roboto 가 첫 글꼴이 되고 한글(Noto CJK 대체)이 위로 뜬다 — 위 칩 규칙의 광학 보정 .125em(데스크톱 실측)은 거기서 오히려 더 올린다.
   해법: 글이 든 상자를 대문자 높이~기준선으로 트림(text-box)하고 칸 높이 H 를 화면 화소(--dp · head.ejs 가 넣음) 정수배로 둔 채
   기준선 = 바닥 + round((H − 1cap)/2 + ik) · ik = −.025em(한글 잉크 가운데가 대문자 가운데보다 그만큼 위). 어느 기기 글꼴이든 cap 기준이라 같은 자리.
   · 칩: 테두리는 ::before 덧칠(1px 테두리가 내용을 소수 자리로 밀지 않게) · 가로 패딩 +1px 로 폭 그대로
   · 버튼·폼 칩: 라벨을 span.lab 으로 감싼 것만(:has) — 라벨은 바닥 정렬, 아이콘은 칸 가운데 정수 자리 · 테두리 1px 는 패딩에서 뺀다
   · 댓글 등록(.cform)은 입력칸 높이를 따라 늘어나 H 를 못 박는다 → 라벨만 트림해 가운데 + ik
   트림을 모르는 브라우저는 위 옛 규칙 그대로. 같은 식 = 본관 SFE_KG_LEAD_V1(칩) · SFE_COMMUNITY_HOME_V1(홈 버튼·말머리) · SFE_TRIM_V1(헤더 제목).
   SSOT: 메모리 hangul-vcenter-strut.md 규칙 15.
   [2026-09-30 «남은 것도 모두»] 손식의 ik 자리 = 공용 층 SFE_BTNLAB_V1 이 잰 잉크 z(--sfe-z · 눌리는 칸 안 트림 글) — 없으면 .5cap − ik(옛 식과 같은 값) · 규칙 = 메모리 hangul-vcenter-strut 16 */
@supports (text-box:trim-both cap alphabetic){
  /* 칩(목록·글 머리) — span 만(글쓰기 폼 칩은 button → 아래 따로) */
  span.mh,span.tag,span.badge{--ik:-.025em;--F:round(nearest,22px,var(--dp,1px));display:inline-block;position:relative;border-width:0;height:var(--F);
    text-box:trim-both cap alphabetic;align-content:end;padding-top:0;padding-bottom:round(nearest,calc(var(--F) / 2 - var(--sfe-z,calc(.5cap - var(--ik)))),var(--dp,1px))}
  span.mh{padding-left:8px;padding-right:8px}
  span.tag{padding-left:7px;padding-right:7px}
  span.badge{--F:round(nearest,20px,var(--dp,1px));padding-left:6px;padding-right:6px}
  span.mh::before,span.tag::before,span.badge::before{content:"";position:absolute;left:0;top:0;right:0;bottom:0;border:1px solid;border-color:inherit;border-style:inherit;pointer-events:none}
  /* 분류 탭 */
  .filters .cat a{--ik:-.025em;--H:round(nearest,36px,var(--dp,1px));display:block;height:var(--H);text-align:center;text-box:trim-both cap alphabetic;align-content:end;
    padding-top:0;padding-bottom:round(nearest,calc(var(--H) / 2 - var(--sfe-z,calc(.5cap - var(--ik)))),var(--dp,1px))}
  /* 헤더 사이트 이름 — T = 제 줄 높이 · 말줄임 overflow:hidden 이라 위아래 패딩이 넘치는 한글을 품는다(트림만 하면 윗부분이 잘린다) */
  .hdr .brand .t{--ik:-.025em;--T:round(nearest,1lh,var(--dp,1px));text-box:trim-both cap alphabetic;min-height:var(--T);align-content:end;
    padding-top:calc(var(--T) - round(nearest,calc(var(--T) / 2 - var(--sfe-z,calc(.5cap - var(--ik)))),var(--dp,1px)) - round(up,1cap,var(--dp,1px)));
    padding-bottom:round(nearest,calc(var(--T) / 2 - var(--sfe-z,calc(.5cap - var(--ik)))),var(--dp,1px))}
  /* 아바타(닉네임 첫 글자 원) — 칸 = 원 지름 A */
  .ava{--ik:-.025em;--A:round(nearest,28px,var(--dp,1px));display:block;width:var(--A);height:var(--A);text-align:center;text-box:trim-both cap alphabetic;align-content:end;
    padding-top:0;padding-bottom:round(nearest,calc(var(--A) / 2 - var(--sfe-z,calc(.5cap - var(--ik)))),var(--dp,1px))}
  .hdr .me .ava{--A:round(nearest,30px,var(--dp,1px));width:var(--A);height:var(--A)}
  .cm.reply .ava{--A:round(nearest,24px,var(--dp,1px));width:var(--A);height:var(--A)}
  .form.nick .from .ava{--A:round(nearest,22px,var(--dp,1px));width:var(--A);height:var(--A)}
  /* 버튼 — 라벨을 span.lab 으로 감싼 것만(:has) */
  .btn{--ik:-.025em;--H:round(nearest,40px,var(--dp,1px));--S:round(nearest,15px,var(--dp,1px));--P:round(nearest,calc(var(--H) / 2 - var(--sfe-z,calc(.5cap - var(--ik)))),var(--dp,1px))}
  .btn.sm{--H:round(nearest,34px,var(--dp,1px))}
  .btn.xs{--H:round(nearest,30px,var(--dp,1px))}
  .btn.kakao{--H:round(nearest,50px,var(--dp,1px))}
  .btn.kakao.sm{--H:round(nearest,40px,var(--dp,1px))}
  .more .btn{--H:round(nearest,44px,var(--dp,1px))}
  .btn:has(> .lab),.btn.sm:has(> .lab),.btn.xs:has(> .lab),.btn.kakao:has(> .lab),.btn.kakao.sm:has(> .lab),.more .btn:has(> .lab){
    height:var(--H);padding-top:calc(var(--P) - 1px);padding-bottom:calc(var(--P) - 1px)}
  .btn > .lab{display:block;text-box:trim-both cap alphabetic;align-self:flex-end}
  .btn:has(> .lab) > svg{align-self:flex-start;width:var(--S);height:var(--S);margin-top:round(nearest,calc(var(--H) / 2 - var(--P) - var(--S) / 2),var(--dp,1px))}
  .cform .btn:has(> .lab){height:auto;padding-top:0;padding-bottom:0}
  .cform .btn > .lab{align-self:center;position:relative;top:calc(var(--sfe-z,calc(.5cap - var(--ik))) - .5cap)}
  /* 글쓰기 폼 칩(button) — 켜짐 «✓» 는 라벨 안으로(같은 기준선) */
  .fld .chips .mh:has(> .lab),.fld .chips .tag:has(> .lab){--ik:-.025em;--H:round(nearest,36px,var(--dp,1px));height:var(--H);align-items:flex-end;
    padding-top:0;padding-bottom:calc(round(nearest,calc(var(--H) / 2 - var(--sfe-z,calc(.5cap - var(--ik)))),var(--dp,1px)) - 1px)}
  .fld .chips :is(.mh,.tag) > .lab{display:block;text-box:trim-both cap alphabetic}
  .fld .chips .mh.sel:has(> .lab)::before{content:none}
  .fld .chips .mh.sel > .lab::before{content:"✓";font-weight:900;margin-right:5px}
}