/* ════════════════════════════════════════════════════════════
   고리 — PHASE 2 컴포넌트 스타일
   요청서 3단계 / 견적 비교 / 당일알바 / 업체 상세 / 거래관리
   index.html 의 디자인 토큰(--gn, --ink, --bd …)을 그대로 사용합니다.
   ════════════════════════════════════════════════════════════ */

/* ── 공통 ── */
.gp{max-width:760px;margin:0 auto;padding:18px 16px 90px;}
.gp-wide{max-width:1080px;}
/* 업체 상세는 예전부터 조금 좁게 썼습니다 (index.html 인라인에서 옮김) */
#sp-body{max-width:680px;margin:0 auto;}
.gp-hd{display:flex;align-items:center;gap:10px;margin-bottom:18px;}
.gp-hd .back-btn{flex-shrink:0;white-space:nowrap;}
.gp-title{font-size:20px;font-weight:800;color:var(--ink);letter-spacing:-.3px;}
.gp-sub{font-size:14px;color:var(--ink3);margin-top:3px;}
.gbtn{border:none;border-radius:9px;font-size:15px;font-weight:700;cursor:pointer;font-family:var(--font);padding:13px 22px;white-space:nowrap;flex-shrink:0;transition:background .15s,border-color .15s;}
/* 주요 CTA 는 딥레드로 통일합니다 (헤더 "요청 올리기" · 히어로 "검색하기" 와
   같은 색). 브랜드색(--gn)은 링크·아이콘·구간 강조에 남겨 둡니다 — 빨강이
   여기저기 퍼지면 이벤트 페이지처럼 보입니다. */
.gbtn-p{background:var(--cta);color:#fff;}
.gbtn-p:hover{background:var(--cta-h);}
.gbtn-p:disabled{background:var(--bd2);cursor:not-allowed;}
.gbtn-w{background:#fff;color:var(--ink2);border:1.5px solid var(--bd2);}
.gbtn-w:hover{border-color:var(--gn);color:var(--gn);}
.gbtn-sm{padding:8px 14px;font-size:14px;border-radius:7px;}
.gbtn-full{width:100%;}
.grow{display:flex;gap:10px;}
.grow>*{flex:1;min-width:0;}
.gcard{background:#fff;border:1px solid var(--bd);border-radius:12px;padding:18px;margin-bottom:12px;}
.gcard-t{font-size:15px;font-weight:800;color:var(--ink);margin-bottom:14px;padding-bottom:11px;border-bottom:1px solid var(--bd);}
.glabel{display:block;font-size:13px;font-weight:700;color:var(--ink2);margin:14px 0 6px;}
.glabel:first-child{margin-top:0;}
.greq{color:var(--gn);}
.gin{width:100%;padding:12px 13px;border:1.5px solid var(--bd);border-radius:8px;font-size:15px;color:var(--ink);font-family:var(--font);background:#fff;outline:none;transition:border-color .15s;}
.gin:focus{border-color:var(--gn);}
textarea.gin{min-height:84px;resize:vertical;line-height:1.6;}
.gin.err{border-color:var(--red);background:#FEF6F3;}
.ghint{font-size:13px;color:var(--ink4);margin-top:5px;}
.gmsg{margin-top:12px;padding:12px 14px;border-radius:8px;font-size:14px;font-weight:600;display:none;}
.gmsg.on{display:block;}
.gmsg.ok{background:var(--okl);color:#1B5E20;border:1px solid var(--okb);}
.gmsg.err{background:var(--redbg);color:var(--red);border:1px solid var(--redb);}
.gmsg.info{background:var(--gnl);color:var(--gn2);border:1px solid var(--gnb);}
.gpick{display:flex;gap:7px;flex-wrap:wrap;}
.gpick-i{padding:9px 15px;border:1.5px solid var(--bd);border-radius:999px;font-size:14px;font-weight:600;color:var(--ink2);background:#fff;cursor:pointer;font-family:var(--font);transition:all .15s;}
.gpick-i:hover{border-color:var(--gn);color:var(--gn);}
.gpick-i.on{background:var(--gn);border-color:var(--gn);color:#fff;}
.gempty{background:var(--bg2);border:1px dashed var(--bd2);border-radius:12px;padding:34px 20px;text-align:center;}
.gempty-t{font-size:16px;font-weight:700;color:var(--ink2);margin-bottom:6px;}
.gempty-d{font-size:14px;color:var(--ink3);line-height:1.6;margin-bottom:15px;}
.gbadge{display:inline-block;font-size:12.5px;font-weight:700;padding:3px 8px;border-radius:5px;}
.gb-or{background:var(--gnl);color:var(--gn-on-tint);}
.gb-ok{background:var(--okl);color:#1B5E20;}
.gb-gy{background:var(--bg2);color:var(--ink3);border:1px solid var(--bd);}
.gb-rd{background:var(--redbg);color:var(--red);}
.gb-bl{background:var(--bluebg);color:var(--blue);}

/* ── 3단계 진행바 ── */
.gstep{display:flex;align-items:center;margin-bottom:22px;}
.gstep-i{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;}
.gstep-i::before{content:"";position:absolute;top:14px;left:-50%;width:100%;height:2px;background:var(--bd);z-index:0;}
.gstep-i:first-child::before{display:none;}
.gstep-i.done::before,.gstep-i.on::before{background:var(--gn);}
.gstep-n{width:28px;height:28px;border-radius:50%;background:#fff;border:2px solid var(--bd);color:var(--ink4);font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;}
.gstep-i.on .gstep-n{background:var(--gn);border-color:var(--gn);color:#fff;}
.gstep-i.done .gstep-n{background:var(--gn);border-color:var(--gn);color:#fff;}
.gstep-l{font-size:13px;font-weight:700;color:var(--ink4);white-space:nowrap;}
.gstep-i.on .gstep-l,.gstep-i.done .gstep-l{color:var(--gn);}

/* ── STEP1 대분류·소분류 선택 ── */
.gcat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.gcat-c{background:#fff;border:1.5px solid var(--bd);border-radius:12px;padding:16px 10px;text-align:center;cursor:pointer;font-family:var(--font);transition:all .15s;}
.gcat-c:hover{border-color:var(--gn);}
.gcat-c.on{border-color:var(--gn);background:var(--gnl);}
.gcat-ic{width:40px;height:40px;margin:0 auto 8px;border-radius:10px;background:var(--gnl);display:flex;align-items:center;justify-content:center;color:var(--gn);}
.gcat-c.on .gcat-ic{background:#fff;}
.gcat-n{font-size:13px;font-weight:700;color:var(--ink);line-height:1.35;
  /* 낱말 가운데를 자르지 않습니다 — "창업·인테리 / 어" 처럼 한 글자가
     혼자 내려가면 읽는 데 걸립니다. 좁은 화면 규칙은 아래 미디어쿼리에. */
  word-break:keep-all;letter-spacing:-.03em;}

/* ── STEP3 확인 ── */
.gsum{background:var(--bg2);border:1px solid var(--bd);border-radius:12px;overflow:hidden;}
.gsum-r{display:flex;gap:12px;padding:12px 15px;border-bottom:1px solid var(--bd);font-size:14px;}
.gsum-r:last-child{border-bottom:none;}
.gsum-k{flex-shrink:0;width:104px;color:var(--ink3);font-weight:600;}
.gsum-v{flex:1;color:var(--ink);font-weight:600;word-break:break-all;}

/* ── 견적 비교 ── */
.qcmp{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.qc{background:#fff;border:1.5px solid var(--bd);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:11px;transition:border-color .15s,box-shadow .15s;}
.qc:hover{border-color:var(--bd2);}
.qc.best{border-color:var(--gn);box-shadow:0 0 0 3px var(--gnl);}
.qc.sel{border-color:var(--ok);background:var(--okl);}
.qc-tag{align-self:flex-start;}
.qc-tag.ghost{visibility:hidden;}
.qc-nm{font-size:16px;font-weight:800;color:var(--ink);display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.qc-certs{display:flex;gap:4px;flex-wrap:wrap;}
.qc-price{font-size:24px;font-weight:800;color:var(--gn);letter-spacing:-.6px;}
.qc-price small{font-size:13px;font-weight:600;color:var(--ink3);margin-left:3px;}
.qc-spec{border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);padding:10px 0;display:flex;flex-direction:column;gap:7px;}
.qc-sr{display:flex;justify-content:space-between;gap:10px;font-size:13px;}
.qc-sk{color:var(--ink3);flex-shrink:0;}
.qc-sv{color:var(--ink);font-weight:700;text-align:right;}
.qc-note{font-size:13px;color:var(--ink2);line-height:1.6;background:var(--bg2);border-radius:8px;padding:10px 11px;}
.qc-act{display:flex;gap:7px;margin-top:auto;}
.qc-act button{flex:1;}
.qstar{color:var(--amber-ink);font-weight:800;}

/* ── 견적 요약 바 ── */
.qbar{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--bd);border:1px solid var(--bd);border-radius:12px;overflow:hidden;margin-bottom:16px;}
.qbar-i{background:#fff;padding:14px 12px;text-align:center;}
.qbar-v{font-size:20px;font-weight:800;color:var(--ink);}
.qbar-l{font-size:13px;color:var(--ink3);margin-top:3px;}

/* ── 요청 카드 (목록) ── */
.rlist{display:flex;flex-direction:column;gap:10px;}
.ritem{background:#fff;border:1px solid var(--bd);border-radius:12px;padding:16px;cursor:pointer;transition:border-color .15s,box-shadow .15s;}
.ritem:hover{border-color:var(--gn);box-shadow:var(--sh);}
.ritem-top{display:flex;align-items:center;gap:7px;margin-bottom:8px;flex-wrap:wrap;}
.ritem-t{font-size:17px;font-weight:700;color:var(--ink);margin-bottom:6px;line-height:1.45;}
.ritem-m{display:flex;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--ink3);}
.ritem-f{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--bd);margin-top:12px;padding-top:11px;}

/* ── 당일알바 ── */
.dj{background:#fff;border:1px solid var(--bd);border-radius:12px;padding:16px;display:flex;gap:14px;align-items:flex-start;transition:border-color .15s;}
.dj:hover{border-color:var(--gn);}
.dj-date{flex-shrink:0;width:60px;text-align:center;background:var(--gnl);border-radius:10px;padding:9px 4px;}
.dj-d{font-size:20px;font-weight:800;color:var(--gn);line-height:1;}
.dj-mo{font-size:12.5px;color:var(--gn2);font-weight:700;margin-top:3px;}
.dj-b{flex:1;min-width:0;}
.dj-t{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:5px;}
.dj-m{display:flex;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--ink3);margin-bottom:8px;}
.dj-r{flex-shrink:0;text-align:right;}
.dj-pay{font-size:18px;font-weight:800;color:var(--gn);white-space:nowrap;}
.dj-pt{font-size:12.5px;color:var(--ink4);margin-top:2px;}

/* ── 지원자 카드 ── */
.wk{background:#fff;border:1px solid var(--bd);border-radius:12px;padding:15px;display:flex;gap:13px;align-items:flex-start;}
.wk-av{flex-shrink:0;width:44px;height:44px;border-radius:50%;background:var(--gnl);color:var(--gn);display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:800;}
.wk-b{flex:1;min-width:0;}
.wk-n{font-size:16px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.wk-s{display:flex;gap:5px;flex-wrap:wrap;margin:7px 0;}
.wk-st{display:flex;gap:14px;font-size:13px;color:var(--ink3);}
.wk-st b{color:var(--ink);font-weight:800;}

/* ── 업체 상세 ── */
.sd-hero{background:var(--navy);border-radius:14px;overflow:hidden;margin-bottom:14px;}
.sd-cover{height:150px;position:relative;display:flex;align-items:flex-end;padding:18px;background-size:cover;background-position:center;}
.sd-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.15),rgba(0,0,0,.72));}
.sd-ct{position:relative;z-index:1;}
.sd-nm{font-size:24px;font-weight:800;color:#fff;letter-spacing:-.5px;}
.sd-loc{font-size:14px;color:rgba(255,255,255,.72);margin-top:4px;}
/* 지표가 5개인데 4칸이라 마지막(응답률) 하나만 둘째 줄에 남았습니다 */
.sd-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));background:var(--navy2);}
.sd-si{padding:14px 8px;text-align:center;border-left:1px solid rgba(255,255,255,.07);}
.sd-si:first-child{border-left:none;}
.sd-sv{font-size:17px;font-weight:800;color:#fff;}
.sd-sl{font-size:12.5px;color:rgba(255,255,255,.42);margin-top:3px;}
.sd-certs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;}
.sd-cert{display:flex;align-items:center;gap:5px;background:#fff;border:1.5px solid var(--gnb);color:var(--gn);border-radius:8px;padding:7px 12px;font-size:13px;font-weight:700;}
.sd-cert.off{border-color:var(--bd);color:var(--ink4);background:var(--bg2);}
.sd-cta{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--bd);padding:12px 0;display:flex;gap:9px;z-index:10;}
.sd-imgs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.sd-img{aspect-ratio:4/3;border-radius:9px;background:var(--bg2);background-size:cover;background-position:center;border:1px solid var(--bd);}

/* ── 후기 ── */
.rv{border-bottom:1px solid var(--bd);padding:14px 0;}
.rv:last-child{border-bottom:none;}
.rv-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.rv-a{font-size:14px;font-weight:700;color:var(--ink);}
.rv-d{font-size:13px;color:var(--ink4);}
.rv-c{font-size:14px;color:var(--ink2);line-height:1.65;}
.rv-deal{font-size:13px;color:var(--ink4);margin-top:6px;}
.stars{display:inline-flex;gap:2px;}
.stars span{font-size:17px;color:var(--bd2);cursor:pointer;line-height:1;}
.stars span.on{color:var(--amber-ink);}
.stars.ro span{cursor:default;font-size:14px;}

/* ── 거래관리(마이페이지) ── */
/* 와인 그라디언트 위에 반투명 흰 칸을 얹으니 숫자가 탁하게 보였습니다.
   흰 카드로 바꾸고 브랜드색은 숫자에만 씁니다 — 대비도 같이 올라갑니다. */
.my-hd{background:#fff;border:1px solid var(--bd);border-radius:16px;padding:20px;
  color:var(--ink);margin-bottom:14px;box-shadow:0 1px 2px rgba(18,22,27,.04);}
.my-nm{font-size:21px;font-weight:800;letter-spacing:-.4px;}
.my-em{font-size:13px;color:var(--ink3);margin-top:3px;}
.my-kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--bd);
  border:1px solid var(--bd);border-radius:12px;overflow:hidden;margin-top:16px;}
.my-ki{background:var(--bg2);padding:12px 6px;text-align:center;}
.my-kv{font-size:20px;font-weight:800;color:var(--gn);letter-spacing:-.4px;}
.my-kl{font-size:12.5px;color:var(--ink3);margin-top:2px;font-weight:600;}
.my-tabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:2px solid var(--bd);margin-bottom:16px;scrollbar-width:none;}
.my-tabs::-webkit-scrollbar{display:none;}
.my-tab{flex-shrink:0;padding:11px 14px;font-size:14px;font-weight:700;color:var(--ink3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;white-space:nowrap;background:none;border-top:none;border-left:none;border-right:none;font-family:var(--font);}
.my-tab.on{color:var(--gn);border-bottom-color:var(--gn);}
.my-tab .cnt{display:inline-block;margin-left:5px;background:var(--gnl);color:var(--gn-on-tint);border-radius:999px;padding:1px 7px;font-size:12.5px;}

/* ── 헤더 로그인 상태 ── */
.hdr-user{display:flex;align-items:center;gap:8px;}
.hu-name{font-size:14px;font-weight:700;color:var(--ink2);}
.hu-bell{position:relative;background:none;border:none;cursor:pointer;padding:6px;color:var(--ink2);display:flex;}
.hu-dot{position:absolute;top:1px;right:1px;min-width:18px;height:18px;border-radius:999px;background:var(--red);color:#fff;font-size:12.5px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 4px;}
.notif-panel{position:absolute;top:calc(100% + 6px);right:0;width:330px;max-height:420px;overflow-y:auto;background:#fff;border:1px solid var(--bd);border-radius:12px;box-shadow:var(--sh2);z-index:950;display:none;}
.notif-panel.on{display:block;}
.nt{padding:13px 15px;border-bottom:1px solid var(--bd);cursor:pointer;}
.nt:hover{background:var(--bg2);}
.nt.unread{background:var(--gnl);}
.nt-t{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:3px;}
.nt-b{font-size:13px;color:var(--ink3);line-height:1.5;}
.nt-d{font-size:12.5px;color:var(--ink4);margin-top:4px;}

/* ── DB 준비 안내 ── */
.setup-note{background:var(--amber-tint);border:1px solid var(--amber-br);border-radius:12px;padding:16px 18px;margin-bottom:14px;}
.setup-note b{color:#9A3412;}
.setup-note code{background:#fff;border:1px solid var(--amber-br);border-radius:4px;padding:1px 6px;font-size:13px;}

/* ── 반응형 ── */
@media(max-width:900px){
  .qcmp{grid-template-columns:repeat(2,1fr);}
  .gcat-grid{grid-template-columns:repeat(4,1fr);}
}
@media(max-width:768px){
  .gp{padding:16px 14px 96px;}
  .my-tabs{flex-wrap:nowrap;overflow-x:auto;}
  .hu-name{display:none;}
  .hdr-actions .ha-reg{white-space:nowrap;padding:9px 13px;font-size:13px;}
  .hdr-user{gap:4px;}
  .qcmp{grid-template-columns:1fr;}
  .qbar{grid-template-columns:repeat(2,1fr);}
  .gcat-grid{grid-template-columns:repeat(3,1fr);gap:8px;}
  /* 3열이면 칸이 100px 남짓입니다. 좌우 여백을 줄이고 글자를 한 단계
     내려 "창업·인테리어"(7자) 가 한 줄에 들어가게 합니다. 12.5px 은
     디자인 시스템의 제일 작은 단계이고, 12px 미만 금지에 걸리지 않습니다. */
  .gcat-c{padding:16px 5px;}
  .gcat-n{font-size:12.5px;}
  .grow{flex-direction:column;gap:0;}
  .grow.keep{flex-direction:row;gap:10px;}
  .my-kpi{grid-template-columns:repeat(2,1fr);}
  .sd-stats{grid-template-columns:repeat(2,1fr);}
  .sd-si:nth-child(3){border-left:none;}
  .sd-imgs{grid-template-columns:repeat(2,1fr);}
  .gstep-l{font-size:12.5px;}
  .notif-panel{position:fixed;top:auto;left:8px;right:8px;width:auto;bottom:70px;max-height:60vh;}
  .dj{flex-wrap:wrap;}
  .dj-r{width:100%;text-align:left;display:flex;gap:10px;align-items:baseline;}
}
@media(max-width:480px){
  .gcat-grid{grid-template-columns:repeat(3,1fr);}
  .qbar{grid-template-columns:repeat(2,1fr);}
}

/* ════════════════════════════════════════════════════════════
   PHASE 3 — 채팅 / 거래 진행 / 매칭
   ════════════════════════════════════════════════════════════ */

/* ── 채팅 ── */
.gp-chat{display:flex;flex-direction:column;height:calc(100vh - var(--top-pad) - 20px);max-width:720px;}
.chat-wrap{flex:1;overflow-y:auto;background:var(--bg2);border:1px solid var(--bd);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:12px;min-height:260px;}
.chat-row{display:flex;flex-direction:column;align-items:flex-start;max-width:76%;}
.chat-row.me{align-self:flex-end;align-items:flex-end;}
.chat-who{font-size:13px;font-weight:700;color:var(--ink3);margin-bottom:4px;padding:0 3px;}
.chat-bub{background:#fff;border:1px solid var(--bd);border-radius:14px 14px 14px 4px;padding:11px 14px;font-size:15px;line-height:1.6;color:var(--ink);word-break:break-word;}
.chat-row.me .chat-bub{background:var(--gn);border-color:var(--gn);color:#fff;border-radius:14px 14px 4px 14px;}
.chat-time{font-size:12.5px;color:var(--ink4);margin-top:4px;padding:0 3px;}
.chat-sys{align-self:center;font-size:13px;color:var(--ink4);background:#fff;border:1px solid var(--bd);border-radius:999px;padding:6px 14px;}
.chat-bar{display:flex;gap:8px;align-items:flex-end;margin-top:10px;background:#fff;border:1.5px solid var(--bd);border-radius:14px;padding:8px 8px 8px 14px;}
.chat-bar:focus-within{border-color:var(--gn);}
.chat-in{flex:1;border:none;outline:none;resize:none;font-size:15px;line-height:1.5;font-family:var(--font);color:var(--ink);background:none;padding:8px 0;max-height:120px;}
.chat-send{flex-shrink:0;width:40px;height:40px;border:none;border-radius:10px;background:var(--gn);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.chat-send:hover{background:var(--gn2);}

/* ── 거래 진행 단계 ── */
.ord-flow{display:flex;align-items:flex-start;}
.ord-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;position:relative;}
.ord-step::before{content:"";position:absolute;top:15px;left:-50%;width:100%;height:2px;background:var(--bd);}
.ord-step:first-child::before{display:none;}
.ord-step.done::before,.ord-step.on::before{background:var(--gn);}
.ord-dot{width:30px;height:30px;border-radius:50%;background:#fff;border:2px solid var(--bd);color:var(--ink4);font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;}
.ord-step.on .ord-dot,.ord-step.done .ord-dot{background:var(--gn);border-color:var(--gn);color:#fff;}
.ord-lb{font-size:13px;font-weight:700;color:var(--ink4);white-space:nowrap;}
.ord-step.on .ord-lb,.ord-step.done .ord-lb{color:var(--gn);}

/* ── 견적 카드 보강 ── */
.qc-chat{flex:0 0 auto!important;}
.sd-permit{white-space:nowrap;}

@media(max-width:768px){
  .gp-chat{height:calc(100vh - var(--top-pad) - 76px);}
  .chat-row{max-width:86%;}
  .ord-lb{font-size:12.5px;}
  .qc-act{flex-wrap:wrap;}
  .qc-act .gbtn{flex:1 1 46%;}
}

/* ════════════════════════════════════════════════════════════
   2026 리디자인 — 요청 카드 / 업체 카드 / 하단 네비
   ════════════════════════════════════════════════════════════ */

/* ── 실시간 요청 카드 ── */
.rc{background:#fff;border:1px solid var(--bd);border-radius:var(--r);padding:16px 17px;cursor:pointer;
  display:flex;flex-direction:column;gap:10px;transition:border-color .15s;}
.rc:hover{border-color:var(--gn);}
.rc-top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.rc-tag{font-size:12.5px;font-weight:700;color:var(--gn-on-tint);background:var(--gnl);border-radius:7px;padding:4px 9px;}
.rc-tag-hot{color:var(--red);background:var(--redbg);font-weight:600;}
.rc-ago{font-size:13px;color:var(--ink4);font-weight:400;}
.rc-t{font-size:16px;font-weight:600;color:var(--ink);line-height:1.45;letter-spacing:-.02em;}
.rc-bot{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.rc-loc{font-size:13px;color:var(--ink3);font-weight:400;}
.rc-loc::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--bd2);margin-right:7px;vertical-align:middle;}
.rc-pill{font-size:13px;font-weight:600;color:var(--gn-on-tint);background:var(--gnl);border-radius:999px;padding:5px 11px;white-space:nowrap;}
.rc-list{display:flex;flex-direction:column;gap:10px;}
#rq-widget{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}

/* 실시간 제목 앞 라임 점은 딥그린 배경이 아니므로 그린으로 */
.ldot2{background:var(--gn);}

/* ── 업체 카드 ── */
.sc2{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--bd);
  border-radius:var(--r);padding:15px 16px;cursor:pointer;transition:border-color .15s;}
.sc2:hover{border-color:var(--gn);}
.sc2-ic{flex-shrink:0;width:50px;height:50px;border-radius:var(--r-ico);background:var(--gnl);
  color:var(--gn);display:flex;align-items:center;justify-content:center;}
.sc2-b{flex:1;min-width:0;}
.sc2-nm{font-size:16px;font-weight:600;color:var(--ink);letter-spacing:-.02em;display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:6px;}
.sc2-bd{font-size:12.5px;font-weight:500;border-radius:5px;padding:2px 7px;}
.sc2-bd-mint{background:var(--gnl);color:var(--gn-on-tint);}
.sc2-bd-blue{background:var(--bluebg);color:var(--blue);}
.sc2-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13px;color:var(--ink3);font-weight:400;}
/* 배송 가능 지역 — 값이 있을 때만 그려집니다 (12_redesign) */
.sc2-ship{font-size:12.5px;color:var(--ink4);margin-top:3px;}
.sc2-bd-gy{background:var(--bg2);color:var(--ink3);}
.sc2-star{color:var(--amber-ink);font-weight:600;}
.sc2-new{color:var(--ink4);}
.sc2-dot{color:var(--bd2);}
.sc2-ch{flex-shrink:0;color:var(--ink4);}
.sup-grid{display:flex;flex-direction:column;gap:10px;}

/* ── 하단 네비 ── */
/* 모바일에서 이 동그란 + 가 곧 "요청 올리기" 입니다 — 헤더 CTA 와 같은 딥레드로 */
.bplus{width:52px;height:52px;background:var(--cta);color:#fff;box-shadow:var(--sh-fab);}
.bplus:hover{background:var(--cta-h);}
.bni{color:var(--ink4);}
.bni.on{color:var(--gn);}
.bni-t{font-weight:500;}

@media(max-width:1060px){ #rq-widget{grid-template-columns:repeat(2,1fr);} }
@media(max-width:768px){
  #rq-widget{display:flex;flex-direction:column;gap:10px;overflow:visible;}
  .rc{min-width:0;}
  .sc2-ic{width:46px;height:46px;}
}

/* ════════════════════════════════════════════════════════════
   업체 온보딩 — 사진 업로드 / 완료 화면
   ════════════════════════════════════════════════════════════ */
.ph-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.ph-c{position:relative;aspect-ratio:4/3;border-radius:12px;background:var(--bg2) center/cover no-repeat;
  border:1px solid var(--bd);overflow:hidden;}
.ph-busy{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(20,24,28,.55);color:#fff;font-size:13px;font-weight:600;}
.ph-x{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;border:none;
  background:rgba(20,24,28,.62);color:#fff;font-size:13px;cursor:pointer;line-height:1;display:flex;
  align-items:center;justify-content:center;}
.ph-add{aspect-ratio:4/3;border:1.5px dashed var(--bd2);border-radius:12px;background:#fff;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  font-family:var(--font);font-size:13px;font-weight:600;color:var(--ink3);}
.ph-add:hover{border-color:var(--gn);color:var(--gn);}
.ob-ok{width:60px;height:60px;border-radius:50%;background:var(--okl);color:var(--ok);
  display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:700;margin:0 auto 16px;}
@media(max-width:480px){ .ph-grid{grid-template-columns:repeat(2,1fr);} }

/* ════════════════════════════════════════════════════════════════════
   목록 검색 · 정렬 바
   ════════════════════════════════════════════════════════════════════ */
.gflt{margin:0 0 14px;}
.gflt-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.gflt-search{position:relative;flex:1 1 240px;min-width:0;display:flex;align-items:center;}
.gflt-ico{position:absolute;left:12px;font-size:14px;line-height:1;opacity:.55;pointer-events:none;}
.gflt-in{width:100%;height:42px;padding:0 34px 0 34px;border:1.5px solid var(--bd);border-radius:11px;
  background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;font-weight:500;
  outline:none;transition:border-color .14s,box-shadow .14s;-webkit-appearance:none;appearance:none;}
.gflt-in::placeholder{color:var(--ink4);font-weight:400;}
.gflt-in:focus{border-color:var(--gn);box-shadow:0 0 0 3px var(--gnl);}
.gflt-x{position:absolute;right:6px;width:26px;height:26px;border:none;border-radius:50%;
  background:var(--bg2);color:var(--ink3);font-size:12.5px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;}
.gflt-x:hover{background:var(--bd);color:var(--ink);}
.gflt-x[hidden]{display:none;}
.gflt-sel{height:42px;padding:0 30px 0 12px;border:1.5px solid var(--bd);border-radius:11px;
  background:var(--bg) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%236E7480' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 11px center/11px 7px;
  color:var(--ink);font-family:var(--font);font-size:14px;font-weight:600;cursor:pointer;
  outline:none;-webkit-appearance:none;appearance:none;}
.gflt-sel:focus{border-color:var(--gn);box-shadow:0 0 0 3px var(--gnl);}
.gflt-chk{display:flex;align-items:center;gap:6px;height:42px;padding:0 13px;
  border:1.5px solid var(--bd);border-radius:11px;background:var(--bg);
  font-size:14px;font-weight:600;color:var(--ink2);cursor:pointer;white-space:nowrap;user-select:none;}
.gflt-chk input{width:15px;height:15px;accent-color:var(--gn);cursor:pointer;margin:0;}
.gflt-chk:has(input:checked){border-color:var(--gn);background:var(--gnl);color:var(--gn-on-tint);}
.gflt-n{margin-top:9px;font-size:13px;font-weight:600;color:var(--ink3);}
@media(max-width:520px){
  .gflt-row{gap:7px;}
  .gflt-search{flex:1 1 100%;}
  .gflt-sel{flex:1 1 auto;min-width:0;}
  .gflt-chk{flex:0 0 auto;}
}

/* 요청 수정 화면 안내 */
.gnote{background:var(--amber-tint);border:1px solid var(--amber-br);border-radius:12px;
  padding:12px 14px;margin-bottom:13px;font-size:14px;font-weight:600;color:var(--ink2);line-height:1.6;}

/* 시세 출처 표기 */
.mk-foot{padding:12px 16px 4px;font-size:13px;color:var(--ink4);font-weight:500;}
/* 수집이 멈추면 옛날 값이 오늘 값처럼 읽힙니다 — 며칠 지난 자료인지 적습니다.
   경고가 아니라 사실 표시라 --red 가 아니라 브랜드 주황을 씁니다. */
.mk-old{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;
  background:var(--gnl);color:var(--gn2);font-size:12.5px;font-weight:700;}

/* ════════════════════════════════════════════════════════════════════
   구인구직 — 출처 배지 · 상세 펼침 · 안내 바
   ════════════════════════════════════════════════════════════════════ */
.jobs-split2{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:var(--gnl);border:1px solid var(--gnb);border-radius:12px;padding:13px 16px;margin-bottom:16px;
  font-size:14px;color:var(--gn2);font-weight:600;line-height:1.6;}
.job-src{font-size:12.5px;font-weight:800;padding:2px 7px;border-radius:4px;
  background:var(--gnl);color:var(--gn-on-tint);border:1px solid var(--gnb);}
.job-det{border-top:1px dashed var(--bd);margin:0 14px;padding:11px 0 13px;}
.job-det-r{display:flex;gap:12px;padding:5px 0;font-size:14px;}
.job-det-k{flex:0 0 82px;color:var(--ink4);font-weight:600;}
.job-det-v{flex:1;color:var(--ink2);font-weight:500;line-height:1.6;word-break:break-word;}
.jca-seek{background:var(--blue);}
.jeb-seek{background:var(--bluebg);color:var(--blue);}
.job-stats-bar{flex-wrap:wrap;}
.jsb-item{white-space:nowrap;}
#pg-jobs .ha-btn.ha-reg{white-space:nowrap;}
@media(max-width:520px){
  .jobs-split2{padding:12px 13px;font-size:14px;}
  .job-stats-bar{gap:10px 14px;}
  .job-stats-bar .jsb-item[style*="auto"]{margin-left:0!important;}
}

/* 비활성 버튼 (마감된 요청 등) */
.gbtn-off,.gbtn:disabled{background:var(--bg2)!important;color:var(--ink4)!important;
  border:1.5px solid var(--bd)!important;cursor:not-allowed!important;box-shadow:none!important;}

/* ════════════════════════════════════════════════════════════════════
   홈 화면에 추가 안내
   ════════════════════════════════════════════════════════════════════ */
.a2hs{position:fixed;left:12px;right:12px;bottom:12px;z-index:900;
  display:flex;align-items:center;gap:12px;
  background:var(--bg);border:1px solid var(--bd2);border-radius:16px;
  padding:12px 14px;box-shadow:0 10px 34px rgba(0,0,0,.18);
  transform:translateY(140%);opacity:0;transition:transform .28s cubic-bezier(.2,.8,.3,1),opacity .28s;}
.a2hs.on{transform:translateY(0);opacity:1;}
.a2hs-ic{flex:0 0 auto;width:44px;height:44px;border-radius:11px;overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.14);}
.a2hs-ic img{width:100%;height:100%;display:block;}
.a2hs-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.a2hs-tx b{font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-.3px;}
.a2hs-tx span{font-size:13px;color:var(--ink3);line-height:1.5;}
.a2hs-bt{flex:0 0 auto;display:flex;align-items:center;gap:6px;}
.a2hs-x{width:30px;height:30px;border:none;border-radius:50%;background:var(--bg2);
  color:var(--ink3);font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.a2hs-x:hover{background:var(--bd);color:var(--ink);}
@media(min-width:769px){ .a2hs{left:auto;right:20px;bottom:20px;max-width:400px;} }
@media(max-width:768px){ .a2hs{bottom:70px;} }
@media(max-width:400px){
  .a2hs{gap:10px;padding:11px 12px;}
  .a2hs-ic{width:38px;height:38px;border-radius:9px;}
  .a2hs-tx b{font-size:14px;}
  .a2hs-tx span{font-size:13px;}
}

/* 하단 네비 미읽음 뱃지 · 알림 전체 읽음 */
.bni-dot{position:absolute;top:-4px;right:-9px;min-width:16px;height:16px;padding:0 4px;
  border-radius:999px;background:var(--gn);color:#fff;font-size:12.5px;font-weight:800;
  line-height:16px;text-align:center;box-shadow:0 0 0 2px var(--bg);pointer-events:none;}
.nt-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 14px;border-bottom:1px solid var(--bd);position:sticky;top:0;background:var(--bg);z-index:1;}
.nt-hd span{font-size:14px;font-weight:800;color:var(--ink);}
.nt-all{border:none;background:none;color:var(--gn);font-family:var(--font);
  font-size:13px;font-weight:800;cursor:pointer;padding:4px 6px;border-radius:7px;}
.nt-all:hover{background:var(--gnl);}

/* 아직 채워지지 않은 콘텐츠 칸 */
.ct-soon{padding:22px 14px;text-align:center;font-size:13px;color:var(--ink4);
  line-height:1.7;font-weight:500;}

/* ════════════════════════════════════════════════════════════════════
   접근성 — 본문 바로가기 · 포커스 표시 · 스크린리더 전용
   ════════════════════════════════════════════════════════════════════ */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.skip-link{position:fixed;top:-100px;left:12px;z-index:2147483646;
  background:var(--gn);color:#fff;font-family:var(--font);font-size:15px;font-weight:800;
  padding:11px 18px;border-radius:0 0 12px 12px;text-decoration:none;
  transition:top .16s;box-shadow:0 6px 20px rgba(0,0,0,.25);}
.skip-link:focus{top:0;}
/* index.html 의 .fi / .hs-input / .gh-s-in 이 outline:none 을 걸고 있어
   (검색·입력칸에 포커스 표시가 아예 없었습니다) html 을 붙여 우선순위를 올립니다.
   2px 여백을 둬서 크림슨 버튼 위에서도 링이 배경과 분리돼 보입니다. */
html :focus-visible{outline:3px solid var(--gn);outline-offset:2px;border-radius:4px;}
html .hero :focus-visible,html .footer :focus-visible,html .gh :focus-visible,
html [style*="var(--navy)"] :focus-visible{outline-color:#fff;}
/* 어두운 히어로 안이라도 입력칸은 흰 배경 위에 있으므로 흰 링이면 안 보입니다 */
html .hero input:focus-visible,html .gh input:focus-visible,
html .hero textarea:focus-visible,html .gh textarea:focus-visible,
html .hero select:focus-visible,html .gh select:focus-visible{outline-color:var(--gn);}
.pg:focus{outline:none;}

/* ════════════════════════════════════════════════════════════════════
   연결 실패 안내 띠
   ════════════════════════════════════════════════════════════════════ */
.net-bar{position:fixed;left:0;right:0;bottom:0;z-index:1000;
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  background:var(--ink);color:#fff;font-family:var(--font);
  font-size:14px;font-weight:600;padding:11px 16px;line-height:1.5;
  box-shadow:0 -4px 18px rgba(0,0,0,.2);}
.net-retry{border:1.5px solid rgba(255,255,255,.4);background:none;color:#fff;
  font-family:var(--font);font-size:14px;font-weight:800;
  padding:6px 14px;border-radius:9px;cursor:pointer;white-space:nowrap;}
.net-retry:hover{background:rgba(255,255,255,.12);}
.net-retry:disabled{opacity:.5;cursor:not-allowed;}
/* bottom 값은 JS 가 하단 네비 실제 높이를 재서 넣습니다 */

/* 오래된 요청 표시 */
.stl-tag{margin-left:auto;font-size:12.5px;font-weight:800;padding:2px 7px;border-radius:5px;
  background:var(--bg2);color:var(--ink4);border:1px solid var(--bd);white-space:nowrap;}
.stl-more{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin-top:12px;padding:12px 14px;border:1px dashed var(--bd2);border-radius:12px;
  font-size:14px;color:var(--ink3);font-weight:600;}
.stl-more button{border:none;background:none;color:var(--gn);font-family:var(--font);min-height:40px;
  font-size:14px;font-weight:800;cursor:pointer;padding:4px 8px;border-radius:8px;white-space:nowrap;}
.stl-more button:hover{background:var(--gnl);}

/* ════════════════════════════════════════════════════════════════════
   이용 가이드 · FAQ
   ════════════════════════════════════════════════════════════════════ */
.gu-tabs{display:flex;gap:8px;margin-bottom:16px;}
.gu-tab{flex:1;min-height:46px;border:1.5px solid var(--bd2);background:#fff;color:var(--ink2);
  border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;font-family:var(--font);
  letter-spacing:-.02em;transition:all .15s;}
.gu-tab:hover{border-color:var(--gn);color:var(--gn);}
.gu-tab.on{background:var(--gn);border-color:var(--gn);color:#fff;}

.gu-steps{display:flex;flex-direction:column;gap:10px;margin-bottom:16px;}
.gu-step{display:flex;gap:14px;background:#fff;border:1px solid var(--bd);border-radius:14px;padding:18px;}
.gu-n{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--gn);color:#fff;
  font-size:15px;font-weight:800;display:flex;align-items:center;justify-content:center;}
.gu-b{min-width:0;}
.gu-t{font-size:16px;font-weight:800;color:var(--ink);letter-spacing:-.03em;margin-bottom:6px;}
.gu-d{font-size:15px;color:var(--ink2);line-height:1.7;}
.gu-m{font-size:14px;color:var(--gn-on-tint);background:var(--gnl);border-radius:8px;
  padding:8px 11px;margin-top:10px;line-height:1.6;font-weight:600;}

.gu-faq{border-top:1px solid var(--bd);}
.gu-faq:first-of-type{border-top:none;}
.gu-faq>summary{list-style:none;cursor:pointer;padding:14px 26px 14px 0;position:relative;
  font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1.5;}
.gu-faq>summary::-webkit-details-marker{display:none;}
.gu-faq>summary::after{content:"+";position:absolute;right:2px;top:12px;font-size:21px;
  font-weight:400;color:var(--ink3);line-height:1;}
.gu-faq[open]>summary::after{content:"−";}
.gu-faq>summary:hover{color:var(--gn);}
.gu-faq>p{font-size:15px;color:var(--ink2);line-height:1.75;padding:0 0 16px;margin:0;}

@media(max-width:768px){
  .gu-step{padding:15px;gap:12px;}
  .gu-t{font-size:16px;}
  .gu-d{font-size:14px;}
}

/* 신고 링크 — 눈에 띄되 주 동선을 방해하지 않게 */
.rp-flag{background:none;border:none;font-size:13px;font-weight:600;color:var(--ink4);
  cursor:pointer;font-family:var(--font);padding:8px 4px;border-radius:8px;min-height:36px;}
.rp-flag:hover{color:var(--red);text-decoration:underline;}

/* ════════════════════════════════════════════════════════════════════
   넓은 화면 두 칸 레이아웃 (src/33_layout.js 가 조각을 담습니다)
   1100px 미만에서는 아무 일도 하지 않습니다 — 모바일은 지금 그대로.
   ════════════════════════════════════════════════════════════════════ */
@media(min-width:1100px){
  .lay2{display:grid;gap:26px;align-items:start;}
  .lay2 > .lay-full{grid-column:1 / -1;}
  .lay2 > .lay-side,
  .lay2 > .lay-main{min-width:0;}

  /* 요청 상세 — 왼쪽 요약(따라옴) / 오른쪽 견적 비교 */
  .lay-req.lay2{grid-template-columns:392px minmax(0,1fr);}
  .lay-req.lay2 > .lay-side{position:sticky;top:calc(var(--hdr-h) + 52px);
    max-height:calc(100vh - var(--hdr-h) - 72px);overflow-y:auto;
    scrollbar-width:none;padding-right:2px;}
  .lay-req.lay2 > .lay-side::-webkit-scrollbar{display:none;}
  .lay-req.lay2 .qbar{margin-bottom:14px;}
  .lay-req.lay2 .qbar{grid-template-columns:repeat(2,1fr);}
  .lay-req.lay2 .gbtn-full{width:100%;}
  /* 견적 카드는 좁아진 오른쪽 칸에 맞춰 세 장 → 두 장으로.
     #q-list 자체를 격자로 만들면 안 됩니다 — 그 안의 .qcmp 가 이미
     격자이고, 뒤따르는 안내문(.ghint)이 옆 칸으로 밀려 카드를 덮습니다. */
  .lay-req.lay2 .qcmp{grid-template-columns:repeat(2,minmax(0,1fr));}

  /* 업체 상세 — 오른쪽에 행동 버튼이 따라옴 */
  #sp-body.sp-host{max-width:1080px;}
  /* 넓어진 만큼 항목 이름이 줄바꿈되지 않게 ("최소 주문·작업량") */
  .lay-sp.lay2 .gsum-k{width:120px;}
  .lay-sp.lay2{grid-template-columns:minmax(0,1fr) 320px;}
  .lay-sp.lay2 > .lay-side{position:sticky;top:calc(var(--hdr-h) + 52px);
    display:flex;flex-direction:column;gap:10px;}
  .lay-sp.lay2 .sd-cta{position:static;flex-direction:column;align-items:stretch;
    background:#fff;border:1px solid var(--bd);border-radius:16px;padding:16px;
    box-shadow:0 6px 20px rgba(18,22,27,.06);margin:0;}
  .lay-sp.lay2 .sd-cta .gbtn{flex:none!important;width:100%;}
  .lay-sp.lay2 #rp-sup-link{text-align:center!important;margin:0!important;}

  /* 요청·업체 목록 — 한 줄에 한 장씩이라 카드 안이 텅 비어 보였습니다.
     1100px 부터 두 장씩 놓아 훑어보기 좋게 합니다. */
  .rc-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .sup-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}

  /* 거래관리 — 탭 12개를 왼쪽 세로 목록으로 */
  .lay-my.lay2{grid-template-columns:236px minmax(0,1fr);}
  .lay-my.lay2 > .lay-side{position:sticky;top:calc(var(--hdr-h) + 52px);}
  .lay-my.lay2 .my-tabs{flex-direction:column;flex-wrap:nowrap;gap:2px;border-bottom:none;
    margin-bottom:0;background:var(--bg2);border-radius:14px;padding:8px;}
  .lay-my.lay2 .my-tab{width:100%;text-align:left;justify-content:flex-start;
    border-bottom:none;margin-bottom:0;border-radius:9px;padding:11px 13px;
    display:flex;align-items:center;gap:7px;}
  .lay-my.lay2 .my-tab:hover{background:rgba(255,255,255,.75);color:var(--ink);}
  .lay-my.lay2 .my-tab.on{background:#fff;color:var(--gn);
    box-shadow:0 1px 3px rgba(18,22,27,.10);}
  .lay-my.lay2 .my-tab .n{margin-left:auto;}
}

/* 1100px 미만: 담긴 상태 그대로 한 줄로 흐릅니다 */
.lay-main > *:last-child,
.lay-side > *:last-child{margin-bottom:0;}

/* ════════════════════════════════════════════════════════════════════
   마감 — 로딩 뼈대 · 선택 상자 · 내 요청 액션
   ════════════════════════════════════════════════════════════════════ */

/* ── 로딩 뼈대 ── */
@keyframes skel-sh{0%{background-position:-340px 0;}100%{background-position:340px 0;}}
.skel{background-color:var(--bg2);
  background-image:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.85) 50%,rgba(255,255,255,0) 100%);
  background-size:340px 100%;background-repeat:no-repeat;
  border-radius:7px;animation:skel-sh 1.2s linear infinite;}
@media (prefers-reduced-motion:reduce){ .skel{animation:none;} }
.skel-card{padding:18px;}
.skel-chip{width:76px;height:20px;border-radius:999px;}
.skel-h{height:22px;width:62%;margin-top:13px;}
.skel-l{height:13px;width:100%;margin-top:13px;}
.skel-l.s2{width:44%;margin-top:8px;}

/* ── 선택 상자 ──
   OS 기본 화살표가 붙은 네이티브 select 만 다른 컴포넌트와 따로 놀았습니다.
   화살표를 직접 그려 넣고 버튼과 같은 높이로 맞춥니다. */
select.gin{-webkit-appearance:none;-moz-appearance:none;appearance:none;
  cursor:pointer;padding-right:34px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.7 6 6.4l5-4.7' fill='none' stroke='%235E636A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:11px 8px;}
select.gin::-ms-expand{display:none;}
.gsel{width:auto;padding:8px 32px 8px 12px;font-size:14px;border-radius:7px;
  background-position:right 11px center;font-weight:600;}
.gsel:hover{border-color:var(--bd2);}

/* ── 내 요청 액션 ──
   수정·삭제·마감이 폭을 꽉 채운 버튼으로 따로 쌓여 있어, 정작 봐야 할
   견적보다 먼저 눈에 들어왔습니다. 한 칸에 작게 모읍니다. */
.own-acts{border:1px solid var(--bd);border-radius:14px;background:var(--bg2);
  padding:13px 14px;margin-top:16px;}
.own-acts-t{font-size:13px;font-weight:700;color:var(--ink3);
  letter-spacing:.2px;margin-bottom:9px;}
.own-acts-r{display:flex;flex-wrap:wrap;gap:7px;}
.own-acts-r .gbtn{flex:1 1 auto;background:#fff;}
.own-acts-r .gbtn-q{color:var(--ink3);}
.own-acts-r .gbtn-q:hover{border-color:var(--red);color:var(--red);}

/* ════════════════════════════════════════════════════════════════════
   거래관리 — 한눈에 보기 (src/35_hub.js)
   ════════════════════════════════════════════════════════════════════ */

/* ── 지금 할 일 ── */
.hub-todo{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.hub-td{display:flex;align-items:center;gap:9px;background:var(--gnl);border:1px solid var(--gnb);
  border-radius:12px;padding:11px 15px 11px 13px;cursor:pointer;font-family:var(--font);
  transition:border-color .15s,background .15s;}
.hub-td:hover{border-color:var(--gn);background:#fff;}
.hub-td-n{font-size:20px;font-weight:800;color:var(--gn-on-tint);letter-spacing:-.5px;line-height:1;}
.hub-td-l{font-size:14px;font-weight:700;color:var(--ink2);}
.hub-td.am{background:var(--amber-tint);border-color:var(--amber-br);}
.hub-td.am .hub-td-n{color:var(--amber-on);}

.hub-clear{background:var(--bg2);border:1px solid var(--bd);border-radius:14px;padding:16px 17px;
  font-size:14px;color:var(--ink3);line-height:1.7;margin-bottom:16px;}
.hub-clear-b{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}

/* ── 영역별 최근 몇 줄 ── */
.hub-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.hub-card{background:#fff;border:1px solid var(--bd);border-radius:14px;padding:14px 15px 10px;}
.hub-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;}
.hub-t{font-size:14px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:7px;}
.hub-t b{font-size:16px;font-weight:800;color:var(--gn);letter-spacing:-.3px;}
.hub-t b.z{color:var(--ink4);font-weight:700;}
.hub-all{background:none;border:none;font-family:var(--font);font-size:13px;font-weight:700;
  color:var(--ink3);cursor:pointer;padding:4px 2px;border-radius:6px;white-space:nowrap;}
.hub-all:hover{color:var(--gn);}
.hub-rows{display:flex;flex-direction:column;}
.hub-row{display:flex;align-items:center;gap:9px;width:100%;background:none;border:none;
  border-top:1px solid var(--bd);padding:10px 2px;cursor:pointer;text-align:left;
  font-family:var(--font);min-height:40px;}
.hub-row:hover .hub-row-t{color:var(--gn);}
.hub-row-t{flex:1;min-width:0;font-size:14px;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hub-row-m{flex-shrink:0;font-size:13px;color:var(--ink3);font-weight:500;}
.hub-row-c{flex-shrink:0;color:var(--bd2);font-size:15px;}
.hub-none{border-top:1px solid var(--bd);padding:14px 2px;font-size:13px;color:var(--ink4);}

/* ── 나머지는 칩으로 ── */
.hub-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.hub-chip{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--bd);
  border-radius:999px;padding:9px 15px;font-family:var(--font);font-size:14px;font-weight:600;
  color:var(--ink2);cursor:pointer;transition:border-color .15s;}
.hub-chip:hover{border-color:var(--gn);color:var(--gn);}
.hub-chip b{font-weight:800;color:var(--gn);font-size:13px;}

/* ── 탭 묶음 소제목 ── */
.my-grp{display:none;}

@media(max-width:640px){
  .hub-grid{grid-template-columns:1fr;}
  .hub-td{flex:1 1 calc(50% - 4px);}
}

@media(min-width:1100px){
  /* 세로 목록일 때만 소제목이 의미가 있습니다 (가로 띠에서는 자리만 먹습니다) */
  .lay-my.lay2 .my-grp{display:block;font-size:12.5px;font-weight:700;color:var(--ink4);
    letter-spacing:.4px;padding:12px 13px 5px;}
  .lay-my.lay2 .my-tabs > .my-grp:first-child{padding-top:4px;}
}

/* ════════════════════════════════════════════════════════════════════
   그림 — 두 톤 아이콘 · 빈 자리 · 그림 자리 (src/36_art.js)
   ════════════════════════════════════════════════════════════════════ */

/* ── 두 톤 아이콘 ──
   바깥 <svg fill="none"> 보다 이 규칙이 우선합니다 (상속 < 선택자). */
.du .du-f{fill:currentColor;stroke:none;opacity:.17;}
.du .du-s{fill:none;stroke:currentColor;}
/* 업체 카드 안 아이콘은 <svg> 를 12_redesign 이 직접 씁니다 */
.sc2-ic .du-f,.gcat-ic .du-f,.cat8-ico .du-f{fill:currentColor;stroke:none;opacity:.17;}
.sc2-ic .du-s,.gcat-ic .du-s,.cat8-ico .du-s{fill:none;stroke:currentColor;}

/* 진한 바탕 위(선택된 칩 등)에서는 면이 묻히므로 조금 더 진하게 */
.gcat-c.on .gcat-ic .du-f{opacity:.24;}

/* 아이콘 그릇에 아주 옅은 결을 줍니다 — 납작한 색 덩어리로 보이지 않게 */
.gcat-ic{background:linear-gradient(150deg,var(--gnl) 0%,#FFF8F3 100%);}
.cat8-ico{position:relative;overflow:hidden;}
.cat8-ico::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(150deg,rgba(255,255,255,.55),rgba(255,255,255,0) 62%);}
.cat8-ico > *{position:relative;z-index:1;}

/* ── 업체 카드의 그림 자리 ──
   사진이 없으면 옅은 색 덩어리였습니다. 결이 있는 바탕에 아이콘을
   큼직하게 놓아, 빈 자리가 아니라 만든 자리로 보이게 합니다. */
.sc2-ic[data-k]{
  background:linear-gradient(148deg,var(--gnl) 0%,#FFF6F0 55%,#FFFDFC 100%);
  position:relative;overflow:hidden;}
.sc2-ic[data-k]::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(-45deg,rgba(194,74,12,.045) 0 1px,transparent 1px 9px);}
.sc2-ic[data-k] svg{width:34px;height:34px;position:relative;}

/* ── 빈 화면 ──
   글씨만 있어 허전했습니다. 브랜드 톤의 작은 표시를 얹습니다. */
.gempty::before,.es::before{content:"";display:block;width:50px;height:50px;margin:0 auto 13px;
  background:var(--gnb);
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 17.5 24 9.5l16 8v13L24 38.5 8 30.5z'/%3E%3Cpath d='M8 17.5 24 25.5l16-8'/%3E%3Cpath d='M24 25.5v13'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 17.5 24 9.5l16 8v13L24 38.5 8 30.5z'/%3E%3Cpath d='M8 17.5 24 25.5l16-8'/%3E%3Cpath d='M24 25.5v13'/%3E%3C/svg%3E") center/contain no-repeat;}
/* 카드 안에 들어가는 작은 빈 자리에는 표시를 빼서 답답하지 않게 */
.hub-card .gempty::before,.gcard .gempty::before{width:38px;height:38px;margin-bottom:10px;}

/* ── 업체 상세 표지 ──
   사진이 없으면 그냥 검은 판이었습니다. 브랜드 색을 아주 옅게 섞고
   결을 넣어 사진이 없어도 비어 보이지 않게 합니다. */
.sd-cover:not([style*="url"]){
  background-image:
    radial-gradient(ellipse 420px 200px at 18% 0%,rgba(194,74,12,.34),transparent 62%),
    repeating-linear-gradient(-38deg,rgba(255,255,255,.035) 0 1px,transparent 1px 11px);}

/* ════════════════════════════════════════════════════════════════════
   쓰기 편하게 — 손가락에 맞는 크기 · 움직이지 않는 화면

   축산업 쪽은 연세 있는 분들이 많이 씁니다. 글씨 크기는 전체를 한 단계
   올렸고(9~11px 이 62군데 있었습니다), 여기서는 누르는 것들을 손가락에
   맞춥니다. 44px 은 우연한 숫자가 아니라 성인 손가락 끝 폭입니다.
   ════════════════════════════════════════════════════════════════════ */

/* ── 누르는 것은 최소 44px ── */
.gbtn{min-height:48px;display:inline-flex;align-items:center;justify-content:center;}
.gbtn-sm{min-height:40px;padding:9px 16px;}
.gbtn-full{width:100%;}
.chip,.hc-item,.hub-chip,.gu-tab{min-height:42px;display:inline-flex;align-items:center;}
.my-tab{min-height:46px;}
.hub-row{min-height:46px;}
.hub-all,.more-btn,.rp-flag{min-height:40px;padding-left:8px;padding-right:8px;}
.back-btn{min-height:42px;display:inline-flex;align-items:center;}
.gin{min-height:48px;}
select.gin{min-height:48px;}
select.gsel{min-height:40px;}   /* select.gin(48px)보다 구체적이어야 이깁니다 */
textarea.gin{min-height:110px;}

/* 목록의 한 줄은 줄 전체가 눌리게 — 작은 글씨를 겨냥하지 않아도 되게 */
.ritem,.rc,.sc2,.nt{cursor:pointer;}
.ritem{padding:16px 17px;}

/* ── 숨 쉴 자리 ──
   칸을 촘촘히 붙여 놓으면 어디를 봐야 할지 알기 어렵습니다. */
.gcard{padding:20px;margin-bottom:14px;}
.gsum-r{padding:13px 14px;}
.gp-hd{margin-bottom:20px;}

/* ── 움직이는 글 ──
   실시간 요청 띠가 28초마다 끝없이 흘러갔습니다. 읽는 중에 글자가
   지나가 버리면 따라잡을 수 없습니다. 천천히 흐르게 하고, 손을 올리거나
   키보드로 짚으면 멈춥니다. 애니메이션을 끈 기기에서는 아예 정지합니다.
   (WCAG 2.2.2 — 5초 넘게 움직이는 것은 멈출 수 있어야 합니다) */
.live-slide{animation-duration:52s;}
.live-bar:hover .live-slide,
.live-bar:focus-within .live-slide{animation-play-state:paused;}
@media (prefers-reduced-motion:reduce){
  .live-slide{animation:none;}
  .ldot{animation:none;}
  .live-bar{overflow-x:auto;}
}

/* ── 글자 크게 ──
   더 크게 보고 싶은 분을 위해 한 단계 더 키웁니다.
   px 로 짜여 있어 rem 으로는 안 되므로, 화면 전체를 확대합니다.
   가로 스크롤이 생기지 않도록 폭을 같이 좁힙니다. */
html.txl body{zoom:1.15;}
@supports not (zoom:1){
  html.txl body{font-size:115%;}
}

/* ── 글자 크게 버튼 (src/37_ease.js) ── */
.ez-btn{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-family:var(--font);border-radius:999px;white-space:nowrap;}
.ez-btn .ez-a{font-weight:800;line-height:1;}

/* 머리말 맨 윗줄(어두운 띠) */
.ez-top{background:#fff;border:1.5px solid var(--bd2);color:var(--ink2);
  font-size:13px;font-weight:700;padding:6px 14px;min-height:40px;flex-shrink:0;}
.ez-top:hover{border-color:var(--gn);color:var(--gn);}
.ez-top[aria-pressed="true"]{background:var(--gn);border-color:var(--gn);color:#fff;}
.ez-top .ez-a{font-size:15px;}

/* 모바일 메뉴 서랍 — 손가락으로 누르는 곳이라 큼직하게 */
.ez-mm-wrap{padding:0 0 10px;}
.ez-mm{width:100%;justify-content:center;background:var(--gnl);border:1.5px solid var(--gnb);
  color:var(--gn-on-tint);font-size:16px;font-weight:700;padding:14px;min-height:52px;border-radius:14px;}
.ez-mm[aria-pressed="true"]{background:var(--gn);border-color:var(--gn);color:#fff;}
.ez-mm .ez-a{font-size:19px;}

/* 아직 손가락보다 작았던 것들 — 알림·채팅 종, 머리말 칩 */
.hu-bell,.hu-chat,.gh-bell{min-width:44px;min-height:44px;}
.hchip,.gh-chips .hchip{min-height:42px;display:inline-flex;align-items:center;}

/* ── index.html 안쪽 규칙을 이겨야 하는 것들 ──
   gori-app.css 는 index.html 의 <style> 보다 **먼저** 실립니다.
   같은 굵기면 뒤에 오는 index.html 이 이기므로, 여기서 다시 잡을 때는
   html 을 하나 붙여 굵기를 올려야 합니다. (붙이지 않으면 조용히 무시됩니다) */

/* 머리말의 주요 버튼이 34~36px 이었습니다 — 제일 많이 누르는 곳입니다 */
html .ha-btn{min-height:42px;display:inline-flex;align-items:center;justify-content:center;}
html .mm-act button{min-height:50px;}
html .mm-row a{padding:16px 4px;}

/* 실시간 띠 — 28초마다 끝없이 흘러가 읽는 중에 놓칩니다.
   천천히 흐르게 하고, 손을 올리거나 키보드로 짚으면 멈춥니다. */
html .live-slide{animation-duration:52s;}
html .live-bar:hover .live-slide,
html .live-bar:focus-within .live-slide{animation-play-state:paused;}
@media (prefers-reduced-motion:reduce){
  html .live-slide{animation:none;}
  html .ldot{animation:none;}
  html .live-bar{overflow-x:auto;}
}

/* 아직 작던 두 개 — 홈 지역 선택, 요청 카드의 행동 버튼 */
html .gh-region{min-height:42px;}
html .rc-cta{min-height:42px;}

/* ════════════════════════════════════════════════════════════════════
   분야 아이콘을 선명하게

   큰 파스텔 원 안에 가는 선 아이콘이 작게 떠 있어 흐려 보였습니다.
   재 보니 60px 타일에 27px 아이콘(45%), 선 굵기 1.9px, 면 투명도 0.17 —
   멀리서 보면 무슨 그림인지 알아보기 어려운 조합입니다.

   그림을 바꾸지 않고 무게만 올립니다: 아이콘을 키우고, 선을 굵게,
   면을 진하게. (index.html 안쪽 규칙을 이겨야 해서 html 을 붙입니다)
   ════════════════════════════════════════════════════════════════════ */

/* 타일은 조금 키우고 아이콘은 많이 키웁니다 — 45% → 55% */
html .cat8-ico{width:64px;height:64px;border-radius:20px;}
html .cat8-ico svg{width:35px;height:35px;}
html .cat8-nm{font-size:14px;}

/* 선을 굵게, 면을 진하게 — 이게 "선명하다"의 대부분입니다 */
html .cat8-ico .du-s{stroke-width:2.4;}
html .cat8-ico .du-f{opacity:.3;}

/* 흰 덧칠을 줄입니다 — 진하게 만든 바탕을 다시 흐리게 만들던 규칙입니다 */
html .cat8-ico::after{background:linear-gradient(150deg,rgba(255,255,255,.3),rgba(255,255,255,0) 55%);}

/* 요청서의 분야 고르기 · 업체 카드도 같은 무게로 */
html .gcat-ic{width:48px;height:48px;border-radius:13px;}
html .gcat-ic svg{width:27px;height:27px;}
html .gcat-ic .du-s{stroke-width:2.3;}
html .gcat-ic .du-f{opacity:.26;}
html .sc2-ic[data-k] svg{width:38px;height:38px;}
html .sc2-ic .du-s{stroke-width:2.2;}
html .sc2-ic .du-f{opacity:.26;}
html .trust-ico .du-s{stroke-width:2.1;}
html .trust-ico .du-f{opacity:.24;}

@media(max-width:768px){
  /* 모바일에서 타일이 54px 로 줄면서 제일 흐렸습니다 */
  html .cat8-ico{width:60px;height:60px;}
  html .cat8-ico svg{width:33px;height:33px;}
  html .cat8-nm{font-size:13px;}
}

/* ════════════════════════════════════════════════════════════════════
   홈 접기 (src/38_home.js)
   ════════════════════════════════════════════════════════════════════ */
.hm-fold .hm-fold-body{display:none;}
.hm-fold.open .hm-fold-body{display:block;}

html .hm-fold{padding:22px 0;}
html .hm-fold.open{padding:44px 0;}

html .hm-fold-hd{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:0;}
html .hm-fold.open .hm-fold-hd{margin-bottom:20px;}
html .hm-fold-hd .sec-h2{font-size:20px;}
html .hm-fold-hd .sec-d2{margin:0;font-size:14px;color:var(--ink3);}

.hm-fold-btn{margin-left:auto;display:inline-flex;align-items:center;gap:7px;
  min-height:44px;padding:9px 16px;border:1.5px solid var(--bd2);border-radius:999px;
  background:#fff;color:var(--ink2);font-family:var(--font);font-size:14px;font-weight:700;
  cursor:pointer;white-space:nowrap;transition:border-color .15s,color .15s;}
.hm-fold-btn:hover{border-color:var(--gn);color:var(--gn);}
.hm-fold-c{display:flex;transition:transform .18s;}
.hm-fold.open .hm-fold-c{transform:rotate(180deg);}
@media (prefers-reduced-motion:reduce){ .hm-fold-c{transition:none;} }

@media(max-width:768px){
  html .hm-fold-hd{gap:8px;}
  html .hm-fold-hd .sec-h2{font-size:18px;}
  .hm-fold-btn{padding:9px 14px;font-size:13px;}
}

/* ════════════════════════════════════════════════════════════════════
   전 화면 훑어보고 고친 것들

   화면 12개 × 두 폭을 전수로 재 보니 네 군데가 남아 있었습니다.
   글씨를 한 단계 키운 뒤에 생긴 것들입니다.
   ════════════════════════════════════════════════════════════════════ */

/* 1) 요청 쓰기 — "STEP3. 확인 후 등록" 이 390px 에서 32px 삐져나왔습니다.
      nowrap 이 걸려 있어 줄바꿈도 못 했습니다. */
@media(max-width:420px){
  html .gstep-l{white-space:normal;text-align:center;line-height:1.35;font-size:12.5px;}
  html .gstep{gap:4px;}
  /* 줄바꿈을 허용하고 나니 이번엔 칸마다 높이가 달라졌습니다. align-items:center
     가 각 칸을 세로 가운데로 맞추는 바람에 동그라미 셋이 계단처럼 어긋나고
     글자가 서로 붙어 읽혔습니다 — 위를 기준으로 맞춥니다. */
  html .gstep{align-items:flex-start;}
  html .gstep-i{justify-content:flex-start;}
  /* "STEP1." 은 동그라미의 숫자와 같은 말입니다. 좁은 화면에서는 뺍니다. */
  html .gstep-l .gstep-p{display:none;}
}

/* 2) 업체 상세 — 아래 붙는 버튼 4개가 한 줄에 안 들어가 106px 넘쳤습니다.
      .gbtn 에 flex-shrink:0 이 걸려 있어 줄지도 않았습니다. */
@media(max-width:1099px){
  html .sd-cta{flex-wrap:wrap;}
  html .sd-cta .gbtn{flex:1 1 auto;min-width:0;flex-shrink:1;}
}

/* 3) 구인구직 — 거르기 칩 34px, 지원 버튼 30px */
html .job-filter-btn{min-height:42px;display:inline-flex;align-items:center;}
html .job-apply-btn{min-height:40px;padding:9px 16px;}

/* 4) 당일알바 — 고르는 칩 38px */
html .gpick-i{min-height:42px;display:inline-flex;align-items:center;}

/* ════════════════════════════════════════════════════════════════════
   예시 데이터 표시 (src/39_demo.js)
   진짜처럼 보이면 안 됩니다 — 눈에 띄게 답니다.
   ════════════════════════════════════════════════════════════════════ */
.dm-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--amber-tint);border:1.5px solid var(--amber-br);border-radius:14px;
  padding:13px 16px;margin-bottom:16px;}
.dm-bar-t{flex:1;min-width:200px;font-size:14px;color:var(--amber-on);line-height:1.55;font-weight:500;}
.dm-bar-t b{font-weight:800;}
.dm-bar-x{flex-shrink:0;min-height:42px;padding:9px 16px;border-radius:999px;
  border:1.5px solid var(--amber-br);background:#fff;color:var(--amber-on);
  font-family:var(--font);font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;}
.dm-bar-x:hover{border-color:var(--amber-ink);}

.dm-tag{display:inline-block;vertical-align:middle;margin-right:6px;
  background:var(--amber-tint);border:1px solid var(--amber-br);color:var(--amber-on);
  border-radius:5px;padding:2px 7px;font-size:12.5px;font-weight:800;letter-spacing:.2px;}
/* 카드가 세로 flex 라 배지가 폭을 꽉 채웠습니다 — 글자 크기만큼만 */
.rc > .dm-tag,.ritem > .dm-tag{margin-bottom:8px;align-self:flex-start;width:-moz-fit-content;width:fit-content;}
.sc2 > .dm-tag{position:absolute;top:8px;left:8px;z-index:2;}
.sc2{position:relative;}

/* 초점 테두리는 즉시 보여야 합니다.
   `transition:all` 이 걸린 자리가 24곳인데, all 에는 outline 도 들어갑니다.
   그래서 키보드로 훑으면 테두리가 0 → 3px 로 150ms 에 걸쳐 서서히
   나타났습니다 — 어디 있는지 늦게 알게 됩니다.

   초점을 받을 수 있는 것 전부에서 outline 만 뺍니다. 이 사이트의
   transition:all 은 전부 색·테두리·그림자용이라 아래 목록으로 충분합니다.
   (all 에서 outline 하나만 빼는 CSS 문법은 없습니다)
   `html` 을 붙여도 이길 수 없습니다 — 상대가 .ha-btn 같은 **클래스**라
   원소 선택자로는 굵기가 모자랍니다. 여기서는 !important 가 맞습니다. */
html a,html button,html input,html select,html textarea,html summary,
html [tabindex]:not([tabindex="-1"]){
  transition-property:background-color,border-color,color,box-shadow,transform,opacity !important;
}

/* ════════════════════════════════════════════════════════════════════
   왜 고리인가 (홈) · 고리 소개 (#/about)          — src/43_about.js
   여기 선택자는 index.html 에 없는 새 이름이라 굵기 다툼이 없습니다.
   ════════════════════════════════════════════════════════════════════ */
/* index.html 의 .sec{background:#fff} 가 뒤에 실려서 같은 굵기로는 집니다 —
   html 을 하나 붙여 굵기를 올립니다 (CLAUDE.md 참고) */
/* 밝은 웜그레이 위에 흰 카드 — 브랜드 틴트로 깔면 이 구간만 광고처럼 뜹니다 */
html .why{background:#fff;border-top:1px solid var(--bd);
  border-bottom:1px solid var(--bd);padding:104px 0 108px;}
.why-hd{margin-bottom:44px;max-width:720px;}
.why-eye{font-size:12.5px;font-weight:800;letter-spacing:.2em;color:var(--gn);margin-bottom:12px;}
.why-lead{font-size:15px;line-height:1.7;color:var(--ink2);margin-top:10px;font-weight:500;word-break:keep-all;}

/* 지금까지 → 고리에서는 */
.why-flow{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:stretch;margin-bottom:20px;}
.why-side{background:#fff;border:1px solid var(--bd);border-radius:14px;padding:14px 16px;}
.why-side-t{font-size:13px;font-weight:800;letter-spacing:-.2px;margin-bottom:8px;}
.why-old .why-side-t{color:var(--ink4);}
.why-new .why-side-t{color:var(--gn2);}
.why-side ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
.why-side li{font-size:14px;line-height:1.5;color:var(--ink2);padding-left:15px;position:relative;}
.why-side li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;
  background:var(--bd2);}
.why-old li{color:var(--ink3);}
.why-new li::before{background:var(--gn);}
.why-new{border-color:var(--gnb);background:var(--gnl);}
.why-arw{display:flex;align-items:center;justify-content:center;color:var(--gn);}

.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;}
/* 카드가 아니라 아이콘 줄 — 페이지가 카드의 연속처럼 보이지 않게 (item 18) */
.why-c{background:none;border:none;border-radius:0;padding:0;}
.why-ico{width:40px;height:40px;color:var(--gn2);display:flex;align-items:center;
  justify-content:flex-start;margin-bottom:13px;}
.why-t{font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-.3px;margin-bottom:6px;line-height:1.35;}
.why-d{font-size:13px;line-height:1.62;color:var(--ink3);}
.why-act{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px;}
.why-act .gbtn{flex:0 1 auto;min-width:180px;}

@media(max-width:900px){
  .why-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:640px){
  html .why{padding:40px 0 42px;}
  .why-flow{grid-template-columns:1fr;}
  .why-arw{transform:rotate(90deg);height:24px;}
  .why-grid{grid-template-columns:1fr;gap:10px;}
  .why-c{padding:15px 14px;}
  .why-act .gbtn{flex:1 1 100%;min-width:0;}
}

/* ── 소개 페이지 ── */
.ab-hero{background:var(--gnl);border:1px solid var(--gnb);border-radius:18px;
  padding:24px 22px;margin-bottom:14px;}
.ab-h1{font-size:24px;font-weight:800;line-height:1.35;letter-spacing:-.5px;color:var(--ink);margin-bottom:10px;}
.ab-lead{font-size:15px;line-height:1.72;color:var(--ink2);font-weight:500;}
.ab-lead b{color:var(--gn2);font-weight:800;}
.ab-sec{margin-bottom:12px;}
.ab-p{font-size:14px;line-height:1.75;color:var(--ink2);margin:0 0 10px;}
.ab-p:last-child{margin-bottom:0;}
.ab-p b{color:var(--ink);font-weight:800;}
.ab-p-sm{font-size:13px;color:var(--ink3);}
.ab-it{padding:12px 0;border-top:1px solid var(--bd);}
.ab-it:first-of-type{border-top:0;padding-top:2px;}
.ab-it-t{font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-.25px;margin-bottom:4px;}
.ab-it-d{font-size:13px;line-height:1.68;color:var(--ink3);}
.ab-warn{border-color:var(--amber-br);background:var(--amber-tint);}
.ab-warn .ab-it{border-top-color:var(--amber-br);}
.ab-warn .ab-it-d{color:var(--amber-on);}
.ab-warn .ab-p-sm{color:var(--amber-on);}

.ab-biz{margin:0;display:flex;flex-direction:column;gap:0;}
.ab-biz-r{display:flex;gap:12px;padding:9px 0;border-top:1px solid var(--bd);font-size:13px;}
.ab-biz-r:first-child{border-top:0;}
.ab-biz dt{flex:0 0 130px;color:var(--ink4);font-weight:700;margin:0;}
.ab-biz dd{margin:0;color:var(--ink2);font-weight:600;word-break:break-all;}
/* .biz-none 은 푸터 안에서만 색이 정해져 있어서 여기서 한 번 더 잡습니다 */
.ab-biz .biz-none{color:var(--amber-ink);font-weight:700;}
.ab-note{margin-top:12px;font-size:12.5px;line-height:1.6;color:var(--ink4);
  background:var(--bg2);border-radius:10px;padding:10px 12px;}

@media(max-width:640px){
  .ab-hero{padding:19px 16px;}
  .ab-h1{font-size:20px;}
  .ab-lead{font-size:14px;}
  .ab-biz-r{flex-direction:column;gap:2px;}
  .ab-biz dt{flex:none;}
}

/* ════════════════════════════════════════════════════════════════════
   요청서 2단계 — 필수 먼저, 선택은 접기 (src/47_rwease.js)

   "한우" 를 눌러 들어가면 한 화면에 열다섯 칸이 쏟아졌습니다. 그중 정말
   필요한 건 일곱뿐인데, 별표 유무 말고는 구분이 없어서 전부 채워야 할
   것처럼 보였습니다. 선택 칸은 접고, 라벨에 "선택" 이라고 적습니다.
   ════════════════════════════════════════════════════════════════════ */
.rw-lead{font-size:13px;line-height:1.6;color:var(--ink3);
  background:var(--bg2);border-radius:9px;padding:10px 12px;margin:-4px 0 14px;}
.rw-lead .greq{font-weight:800;}

.rwf-opt-tag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;
  background:var(--bg2);border:1px solid var(--bd);
  font-size:12.5px;font-weight:700;color:var(--ink4);letter-spacing:-.02em;
  vertical-align:1px;}

/* 첫 칸 위 여백은 카드가 이미 갖고 있습니다 — 겉옷이 한 겹 늘었을 뿐입니다 */
.rwf:first-child > .glabel{margin-top:0;}

/* 못 채운 첫 칸 — 안내만 띄우고 말면 긴 화면에서 어디인지 찾아야 합니다.
   47_rwease 의 rwGotoMissing() 이 여기까지 굴려다 놓고 이 겉옷을 입힙니다.
   --red 는 이미 입력 오류(.gin.err)에 쓰는 색이라 CTA 딥레드와 다릅니다. */
.rwf-miss{border-radius:10px;padding:10px 12px;margin:0 -12px;
  background:var(--redbg);box-shadow:inset 0 0 0 1.5px var(--redb);}
.rwf-miss > .glabel{margin-top:0;color:var(--red);}
@media (prefers-reduced-motion:no-preference){
  .rwf-miss{transition:background-color .2s,box-shadow .2s;}
}

html .rw-more{display:flex;align-items:center;gap:8px;width:100%;min-height:46px;
  margin-top:16px;padding:0 14px;
  background:#fff;border:1.5px dashed var(--bd2);border-radius:10px;
  font-family:var(--font);font-size:14px;font-weight:700;color:var(--ink2);
  cursor:pointer;transition:border-color .15s,background-color .15s,color .15s;}
html .rw-more:hover{border-color:var(--gn);background:var(--gnl);color:var(--gn2);}
html .rw-more.on{border-style:solid;background:var(--bg2);}
.rw-more-n{font-size:13px;font-weight:600;color:var(--ink4);}
.rw-more-i{margin-left:auto;flex-shrink:0;transition:transform .18s;}
.rw-more.on .rw-more-i{transform:rotate(180deg);}
.rw-opt{padding-top:4px;}

@media(max-width:520px){
  .rw-more-n{margin-left:auto;}
  .rw-more-i{margin-left:0;}
}

/* ════════════════════════════════════════════════════════════════════
   홈 구간 리듬 (src/45_main.js 의 mnStripe)

   흰 구간이 두 번, 세 번 연달아 붙어서 어디서 구간이 끝나는지 안 보였습니다.
   구간마다 배경을 박아 두는 대신 **보이는 순서대로** 번갈아 칠합니다 —
   MN_OFF 로 구간 하나를 내려도 리듬이 안 깨집니다.
   회색은 한 종류(--bg2)만 씁니다.
   ════════════════════════════════════════════════════════════════════ */
html #pg-h .mn-w{background:#fff;}
html #pg-h .mn-g{background:var(--bg2);}

/* 높이 강약 — 다 비슷하면 전부 같은 무게로 읽힙니다.
   눌러야 하는 구간(업종·시세)은 그대로 두고, 읽기만 하는 구간은 줄입니다. */
html #pg-h .mn-tight{padding-top:64px;padding-bottom:64px;}
@media(max-width:1060px){
  html #pg-h .mn-tight{padding-top:40px;padding-bottom:40px;}
}

/* ════════════════════════════════════════════════════════════════════
   업체 연결 (#/claim/<열쇠>) — 운영자가 대신 등록해 둔 업체를
   사장님이 가져가는 화면. 처음 오는 분이 여는 첫 화면이라, 무엇을
   얻는지부터 보여 주고 로그인은 그 다음에 말합니다.
   ════════════════════════════════════════════════════════════════════ */
.cl-note{margin-top:12px;font-size:13px;line-height:1.65;color:var(--ink3);}
.cl-ul{margin:2px 0 0;padding-left:18px;}
.cl-ul li{font-size:14px;line-height:1.8;color:var(--ink2);}
.cl-ul li b{color:var(--ink);}

.cl-login{background:var(--bg2);border:1px solid var(--bd);border-radius:12px;padding:18px;}
.cl-login-t{font-size:16px;font-weight:700;color:var(--ink);}
.cl-login-d{margin:6px 0 14px;font-size:13px;line-height:1.7;color:var(--ink3);}

.cl-ok{font-size:28px;font-weight:600;color:var(--gn2);letter-spacing:-.03em;}
.cl-sub{margin-top:8px;font-size:15px;color:var(--ink2);}
.cl-next{margin-top:10px;font-size:13px;line-height:1.7;color:var(--ink3);}

/* 가져가기 버튼은 이 화면에서 유일하게 누를 것이라 폭을 다 씁니다.
   ⚠️ .gbtn-full 은 이미 26줄에 있고 다른 화면도 씁니다 — 이 화면
   안에서만 키웁니다. 전체를 건드리면 엉뚱한 데가 같이 커집니다. */
html #pg-claim .gbtn-full{display:flex;min-height:48px;margin-top:16px;
  align-items:center;justify-content:center;font-size:15px;}