/* ═══════════════════════════════════════════════════════════
   HERLOOP 헐루프 — 크롤링 기반 여성 커뮤니티 (재등록 공고 재작업)
   도메인 실측: 오늘의집(피드 카드 269×558·이미지 1:1·radius 0·shadow none·
     전역 ls −0.3px·본문 15/22·액션 행 53px·상세 720px+스티키 레일 128px·
     신고 59×32 #828c94 하단 우측) · 화해(잉크 4단 #111/#3d3d3d/#666/#aaa·
     경계 #e8e8e8·bg #f7f7f7) · 더쿠(13px 고밀도·행 37px·댓글수 #dc3545)
   프레임워크 기준선: MUI 실측 — 공식 Dashboard 템플릿조차 ①textTransform none
     ②radius 4→8 ③elevation→1px 보더 ④폰트 교체를 덮어씀 = 토큰 커스텀이 정석
   디자인: Alethia(Awwwards SOTD 26.08.05·7.34 — 대형 ls −0.05em·lh 0.95·
     weight 500/600만·2색+뉴트럴 규율)
   ═══════════════════════════════════════════════════════════ */
:root {
  --bg: #f7f7f7; --paper: #ffffff;
  --ink1: #111111; --ink2: #424242; --ink3: #757575; --ink4: #aaaaaa;
  --line: #e8e8e8; --line2: rgba(0,0,0,.12);
  --primary: #d1477a;            /* 여성향 로즈 [제안] — 실측 accent는 전부 블루라 톤은 설계 판단 */
  --primary-tint: #fdf1f6;
  --danger: #dc3545;             /* 더쿠 댓글수 강조 실측 재사용 */
  --ok: #2c8a3d; --ok-tint: #f6fef6; --warn: #8a6b00; --warn-tint: #fff6dd;
  --info: #1e6fa8; --info-tint: #e8f5fd;
  --r4: 4px; --r8: 8px; --r12: 12px; --pill: 999px;
  --sh-card: none;               /* 국내 3곳 공통: 피드 카드 그림자 금지 */
  --sh-pop: 0 2px 8px rgba(0,0,0,.08);   /* 화해 유일 그림자 실측 */
  --ease: cubic-bezier(.4,0,.2,1);
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { overflow-x:clip; }
body { background:var(--bg); color:var(--ink2); font-family:'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo','Noto Sans KR',sans-serif; font-size:15px; line-height:1.47; letter-spacing:-.3px; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; } button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;letter-spacing:-.3px;} ul,ol{list-style:none;}
::selection { background:var(--primary); color:#fff; }
.mono { font-family:var(--mono); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }

/* 헤더 */
.hdr { position:sticky; top:0; z-index:100; background:rgba(255,255,255,.96); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.hdr-in { max-width:1200px; margin:0 auto; padding:0 20px; height:60px; display:flex; align-items:center; gap:20px; }
.logo { font-weight:800; font-size:20px; letter-spacing:-.03em; color:var(--ink1); }
.logo b { color:var(--primary); }
.gnb { display:flex; gap:2px; flex:1; }
.gnb button { padding:8px 13px; font-weight:600; font-size:14px; color:var(--ink3); border-radius:var(--r8); transition:color .15s var(--ease), background-color .15s var(--ease); }
.gnb button:hover { color:var(--ink1); background:var(--bg); }
.gnb button.on { color:var(--primary); background:var(--primary-tint); }
.pill-note { font-size:11.5px; font-weight:600; color:var(--ink3); border:1px solid var(--line); border-radius:var(--pill); padding:5px 12px; }

/* MUI 문법 버튼 (Dashboard 템플릿 실측: h36·r8·13px/500·transform none) */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:36px; padding:8px 12px; border-radius:var(--r8); font-size:13px; font-weight:500; transition:background-color .15s var(--ease), color .15s, border-color .15s, transform .12s; }
.btn.pri { background:var(--primary); color:#fff; font-weight:700; }
.btn.pri:hover { filter:brightness(1.06); }
.btn.out { border:1px solid var(--line2); color:var(--ink2); background:var(--paper); }
.btn.out:hover { border-color:var(--ink4); }
.btn:active { transform:scale(.98); }
.btn:disabled { background:var(--line) !important; color:var(--ink4) !important; cursor:not-allowed; }

/* MUI Chip (Dashboard 실측: h20·pill·13px·tonal bg+border 쌍) */
.chip { display:inline-flex; align-items:center; height:20px; padding:0 8px; border-radius:var(--pill); font-size:12px; font-weight:500; white-space:nowrap; }
.chip.ok { background:var(--ok-tint); border:1px solid #c5f7c5; color:var(--ok); }
.chip.warn { background:var(--warn-tint); border:1px solid #f0d48a; color:var(--warn); }
.chip.err { background:#fff0f0; border:1px solid #fdcece; color:var(--danger); }
.chip.mute { background:#ebeef4; border:1px solid #dadee7; color:var(--ink3); }
.chip.rose { background:var(--primary-tint); border:1px solid #f2c4d6; color:var(--primary); }
.chip.info { background:var(--info-tint); border:1px solid #bfe0f5; color:var(--info); }

.shell { max-width:1200px; margin:0 auto; padding:0 20px; }
.view { display:none; padding:20px 0 80px; }
.view.on { display:block; animation:vIn .3s var(--ease); }
@keyframes vIn { from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:none;} }

/* ── 노출 방식 4단 토글 (공고 3-2의 답 — R3) ── */
.expose-bar { background:var(--paper); border:1px solid var(--line); border-radius:var(--r8); padding:14px 18px; margin-bottom:16px; }
.expose-bar .row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.expose-bar .lbl { font-size:13px; font-weight:700; color:var(--ink1); }
.seg { display:inline-flex; border:1px solid var(--line2); border-radius:var(--r8); overflow:hidden; }
.seg button { height:34px; padding:0 14px; font-size:12.5px; font-weight:600; color:var(--ink3); transition:all .15s var(--ease); border-left:1px solid var(--line); }
.seg button:first-child { border-left:0; }
.seg button.on { background:var(--ink1); color:#fff; }
.expose-note { font-size:12px; color:var(--ink3); margin-top:10px; line-height:1.65; }
.expose-note b { color:var(--ink1); }
.risk-tag { font-weight:700; }
.risk-tag.low { color:var(--ok); } .risk-tag.mid { color:var(--warn); } .risk-tag.high { color:var(--danger); }
.law-check { display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; font-size:11.5px; color:var(--ink3); }
.law-check span b { font-weight:700; }

/* ── 피드 (오늘의집 문법: 카드 269·1:1·radius 0·그림자 0) ── */
.feed { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.fcard { background:var(--paper); cursor:pointer; }
.fcard .who { display:flex; align-items:center; gap:8px; padding:10px 2px; }
.fcard .avt { width:36px; height:36px; border-radius:100%; background:linear-gradient(135deg,var(--primary),#f0a5c0); color:#fff; display:grid; place-items:center; font-size:13px; font-weight:700; flex:0 0 36px; }
.fcard .nick { font-size:15px; font-weight:500; color:var(--ink2); }
.fcard .sub1 { font-size:12px; color:var(--ink3); line-height:16px; }
.fcard .img { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; background:var(--line); }
.fcard .img-wrap { position:relative; overflow:hidden; }
.fcard .img-wrap .src-badge { position:absolute; left:8px; top:8px; }
.fcard .body { font-size:15px; line-height:22px; color:var(--ink2); padding:10px 2px 0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.fcard .body a.outlink { color:var(--info); font-weight:600; }
.fcard .acts { display:flex; align-items:center; height:53px; border-bottom:1px solid var(--line); }
.fcard .acts button { width:90px; display:flex; align-items:center; gap:5px; font-size:12px; color:var(--ink2); transition:color .15s; }
.fcard .acts button:hover { color:var(--primary); }
.fcard .cmt { display:flex; gap:8px; align-items:baseline; padding:10px 2px 16px; font-size:14px; }
.fcard .cmt .n { font-weight:700; }
.fcard.crawled .body { color:var(--ink3); }
.summary-warn { font-size:11px; color:var(--warn); background:var(--warn-tint); border-radius:var(--r4); padding:4px 8px; margin-top:8px; display:inline-block; }

/* ── 상세 (오늘의집 720 + 스티키 레일 128) ── */
.detail { display:grid; grid-template-columns:minmax(0,720px) 128px; gap:40px; justify-content:center; }
.detail .body-col { background:var(--paper); border:1px solid var(--line); border-radius:var(--r8); padding:28px; }
.detail h1 { font-size:22px; font-weight:700; color:var(--ink1); letter-spacing:-.02em; line-height:1.35; }
.detail .meta { display:flex; gap:10px; font-size:12px; color:var(--ink4); margin:10px 0 18px; flex-wrap:wrap; align-items:center; }
.detail .content { font-size:15px; line-height:1.8; color:var(--ink2); }
.detail .content p { margin-bottom:14px; }
.rail { position:sticky; top:84px; height:fit-content; display:flex; flex-direction:column; gap:10px; }
.rail button { width:60px; height:60px; border-radius:100%; background:var(--paper); border:1px solid var(--line); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size:11px; color:var(--ink2); transition:border-color .15s, color .15s; }
.rail button:hover { border-color:var(--primary); color:var(--primary); }
.rail button .n { font-family:var(--mono); font-size:12px; font-weight:700; }
.report-row { display:flex; justify-content:flex-end; gap:2px; margin-top:22px; border-top:1px solid var(--line); padding-top:14px; }
.report-row button { width:auto; min-width:59px; height:32px; font-size:14px; color:#828c94; padding:0 10px; transition:color .15s; } /* 오늘의집 실측 그대로 */
.report-row button:hover { color:var(--danger); }
.cmt-box { margin-top:20px; }
.cmt-item { display:flex; gap:10px; padding:12px 0; border-top:1px solid var(--line); }
.cmt-item .avt { width:24px; height:24px; border-radius:100%; background:var(--line); flex:0 0 24px; display:grid; place-items:center; font-size:10px; font-weight:700; color:var(--ink3); }
.cmt-item .n { font-size:14px; font-weight:700; }
.cmt-item .t { font-size:14px; line-height:22px; color:var(--ink2); }
.cmt-item .ts { font-family:var(--mono); font-size:11px; color:var(--ink4); }
.cmt-input { display:flex; gap:8px; margin-top:14px; }
.cmt-input input { flex:1; height:44px; border:1px solid var(--line2); border-radius:var(--r8); padding:0 14px; font:inherit; font-size:14px; outline:none; transition:border-color .15s; background:var(--paper); }
.cmt-input input:focus { border-color:var(--primary); }
.origin-box { background:var(--info-tint); border-radius:var(--r8); padding:14px 16px; font-size:13px; margin:16px 0; line-height:1.65; }
.origin-box b { color:var(--info); }
.origin-box.dead { background:#fff0f0; }
.origin-box.dead b { color:var(--danger); }

/* ── 공통 패널·표·토스트 ── */
.panel { background:var(--paper); border:1px solid var(--line); border-radius:var(--r8); overflow:hidden; margin-bottom:14px; }
.panel-hd { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--line); font-size:14px; font-weight:700; color:var(--ink1); }
.panel-hd .meta { font-family:var(--mono); font-size:10.5px; color:var(--ink4); font-weight:400; }
.panel-bd { padding:16px; }
.kv { display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px dashed var(--line); font-size:13.5px; }
.kv:last-child { border-bottom:0; }
.kv .k { color:var(--ink3); } .kv .v { font-weight:600; color:var(--ink1); text-align:right; }
.twrap { overflow-x:auto; }
table.tb { width:100%; border-collapse:collapse; font-size:13px; min-width:560px; }
.tb th { text-align:left; font-size:11.5px; font-weight:700; color:var(--ink3); padding:8px 12px; border-bottom:1px solid var(--line2); white-space:nowrap; }
.tb td { padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
.tb tbody tr:hover { background:var(--bg); }
.toasts { position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:300; display:flex; flex-direction:column; gap:8px; align-items:center; }
.toast { background:var(--ink1); color:#fff; font-size:13px; font-weight:600; padding:12px 20px; border-radius:var(--r8); box-shadow:var(--sh-pop); animation:vIn .3s var(--ease); max-width:min(560px,92vw); }
.toast.warn { background:var(--danger); }
.ftr { border-top:1px solid var(--line); margin-top:40px; padding:24px 0 44px; background:var(--paper); }
.ftr .shell { font-size:12px; color:var(--ink4); line-height:1.8; }
.ftr b { color:var(--ink3); }
.ftr a { color:var(--primary); }

@media (max-width:1080px) { .feed { grid-template-columns:repeat(3,1fr); } }
@media (max-width:820px) {
  .feed { grid-template-columns:1fr; max-width:480px; margin:0 auto; }
  .detail { grid-template-columns:1fr; }
  .rail { position:static; flex-direction:row; }
  .gnb { overflow-x:auto; scrollbar-width:none; } .gnb::-webkit-scrollbar{display:none;}
  .gnb button { white-space:nowrap; }
  .seg { flex-wrap:wrap; }
}
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; } }