:root{
  --app-pad-x:14px;           /* 좌우 여백 */
  --app-gap-sm:6px;
  --app-gap-md:10px;
  --app-gap-lg:16px;
  --app-line:#f0f2f5;         /* 리스트 구분선 */
  --app-ink:#111;             /* 본문 진한 글자 */
  --app-dim:#606770;          /* 본문 보조 */
  --app-meta:#8a8f98;         /* 메타 텍스트 */
  --app-tint:#033760;         /* 브랜드 딥블루 */
  --app-band:#f7f8fb;         /* 섹션 띠 배경 */
}


/* 가로 흔들림 방지 */
html, body{ overflow-x:hidden; }



/* ================================
   Request Write (글쓰기) - 앱 스타일
================================ */
.req_write{ max-width:820px; margin:0 auto; padding:12px 16px 90px; box-sizing:border-box; background:#fff; }

.req_write .form-row{ margin-bottom:14px; }
.req_write .flex-2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }

.req_write .form-label{ display:block; margin-bottom:8px; font-weight:800; color:#0f172a; font-size:14px; }
.req_write .req{ color:#d9534f; }

.req_write .input-text,
.req_write .input-select,
.req_write .input-textarea{
  width:100%; height:44px; padding:10px 12px; font-size:12px; box-sizing:border-box;
  border:1px solid #e2e8f0; border-radius:14px; background:#fff; outline:none;
  transition:border .15s ease, box-shadow .15s ease;
}
.req_write .input-textarea{ min-height:160px; height:auto; line-height:1.5; resize:vertical; }

.req_write .input-text:focus,
.req_write .input-select:focus,
.req_write .input-textarea:focus{ border-color:#033760; box-shadow:0 0 0 3px rgba(3,55,96,.08); }

.req_write .check{ display:inline-flex; align-items:center; gap:8px; font-size:14px; color:#334155; }
.req_write .help{ margin-top:6px; font-size:12px; color:#888; }

/* Buttons (sticky) */
.req_write .write_btns{ display:flex; gap:8px; position:sticky; bottom:calc(16px + env(safe-area-inset-bottom,0px)); margin-top:18px; }
.req_write .btn{ height:48px; padding:0 16px; border-radius:14px; font-weight:600; font-size:13px; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; flex:1 1 auto; border:1px solid transparent; cursor:pointer; }
.req_write .btn.primary{ background:#fe7506; color:#fff; border:none; }
.req_write .btn.line{ background:#f8fafc; color:#033760; border:1px solid #e2e8f0; }

/* Small screens */
@media (max-width:360px){
  .req_write{ padding:10px 12px 80px; }
  .req_write .flex-2{ grid-template-columns:1fr; }
  .req_write .btn{ height:46px; }
}



/* ================================
   Multi Uploader (multiple + preview)
================================ */
.uploader-drop {
  display:block; position:relative; width:100%; height:120px;
  border:1px dashed #cfd6de; border-radius:14px; background:#f8fafc;
  overflow:hidden; cursor:pointer; text-align:center;
}
.uploader-drop.dragging { background:#eef6ff; border-color:#8fbff5; }
.uploader-input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.uploader-guide {
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:6px; color:#5c6672;
}
.uploader-guide strong { font-size:14px; font-weight:800; color:#0f172a; }
.uploader-guide span { font-size:12px; color:#64748b; }

/* previews grid */
.uploader-previews {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px; margin-top:10px; width:100%;
}
.preview-item {
  position:relative;
  width:100%;
  padding-bottom:100%;
  border-radius:12px;
  overflow:hidden;
  background:#f5f6f8;
}
.preview-item img {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

/* Representative badge (default hidden) */
.preview-item .badge-rep {
  position:absolute; top:6px; left:6px;
  background:#033760; color:#fff;
  font-size:11px; font-weight:800;
  padding:3px 7px; border-radius:999px;
  display:none;
}
.preview-item.representative .badge-rep:not([hidden]) {
  display:inline-block;
}
.preview-item.representative {
  outline:2px solid #033760; outline-offset:-2px;
}

/* Helpers */
.help-light { color:#666; font-weight:300; margin-left:10px; font-size:12px;}
.warn { color:#d9534f; margin:6px 0 0; }
.tip { color:#9aa4b2; font-size:12px; margin-top:6px; }

/* responsive */
@media (max-width:360px) {
  .uploader-previews { grid-template-columns:repeat(3,1fr); gap:8px; }
  .uploader-drop { height:110px; }
}
@media (min-width:560px) {
  .uploader-previews { grid-template-columns:repeat(4,1fr); }
}




/* ================================
   기존 첨부 (edit mode thumbnails)
================================ */
.upload-existing-grid { display:flex; flex-wrap:wrap; gap:12px; }
.upload-existing-item { position:relative; width:108px; height:108px; overflow:hidden; background:#fff; }
.upload-thumb {
  width:100%; height:100%;
  border-radius:10px; overflow:hidden; display:block; background:#f5f6f8; padding:0; margin:0; border:0; cursor:pointer;
}
.upload-thumb img { width:100%; height:100%; object-fit:cover; border:0; box-shadow:none; }
.upload-meta .name { display:none !important; }
.upload-meta .del {
  position:absolute; bottom:5px; right:6px;
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 6px; font-size:12px;
  border:1px solid #e5e7eb; border-radius:10px;
  background:rgba(255,255,255,.92);
}
.upload-meta .del input { margin:0; }

/* 대표 배지 */
.upload-existing-item .badge-rep {
  position:absolute; top:8px; left:8px; z-index:5; padding:2px 6px; font-size:12px; line-height:1; border-radius:10px;
  background:#003760; color:#fff; display:none;
}
.upload-existing-item.is-rep .badge-rep:not([hidden]) { display:inline-block; }
.badge-rep[hidden]{ display:none !important; }
.upload-existing-item .upload-thumb:focus { outline:2px solid #93c5fd; outline-offset:2px; }
@media (max-width:480px){ .upload-existing-item{ width:92px; height:92px; } }



/* 삭제 버튼: WebView 안정화 (SVG 배경) */
.preview-item .btn-delete-file{
  position:absolute;top:6px;right:6px;width:28px;height:28px;padding:0;border:0;border-radius:50%;
  background:rgba(0,0,0,.55);-webkit-appearance:none;appearance:none;z-index:10;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='white' stroke-width='2' fill='none'><path d='M6 6l12 12M18 6L6 18'/></svg>");
  background-repeat:no-repeat;background-position:center;background-size:14px 14px;color:transparent;
}



/* 글쓰기 본문이 버튼에 가려지지 않도록 여백 확보 */
.req_write{
  padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
}

/* 하단 고정 버튼 바 */
.req_write .write_btns{
  position: fixed;
  left: 0;
  right: 0;
  bottom: env(safe-area-inset-bottom, 0px);
  z-index: 4000; /* 네비보다 위 */
  display: flex;
  gap: 8px;
  background: rgba(255,255,255,.98);
  backdrop-filter: saturate(120%) blur(6px);
  padding: 10px 16px;
  box-shadow: 0 -8px 24px rgba(0,0,0,.08);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}




/* ================================
   FAB (글쓰기 버튼) & 하단 네비 처리
================================ */
:root{ --tabbar-h: 64px; }

.fab-write{
  position:fixed; right:18px;
  bottom:calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom,0px));
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#ffa21a; color:#fff; text-decoration:none;
  box-shadow:0 10px 24px rgba(0,0,0,0.25); z-index:1100;
}
.navbar, .bottom-nav, .app-bottom-nav{ z-index:1000; }

@media (max-width:360px){
  .fab-write{ bottom:calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom,0px)); }
}


/* ================================
   View (보기) — FINAL (모바일 앱 톤)
================================ */
.req_view{
  box-sizing:border-box;
  padding:16px 16px 24px;     /* 좌우 여백 + 바닥 숨쉬기 */
}

/* 헤더 */

.req_view__header .title{
  margin:4px 0 10px; font-size:17px; line-height:1.35; font-weight:700; color:#000;
}
.req_view__header .postmeta{
  margin:8px 0 0; color:#7a8794; font-size:13px;
  display:flex; align-items:center; gap:8px; line-height:1; font-weight: 400;
}

/* 제목줄 우측 ⋯ */
.req-title-row{ display:flex; align-items:center; gap:10px; margin: 10px 0 10px; }
.req-title-row .title{ flex:1 1 auto; margin:0; }
.req-more{ position:relative; flex:0 0 auto; }
.req-more__btn{
  width:32px; height:32px; border:0; border-radius:8px;
  background:transparent; display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
}
.req-more__btn:hover{ background:#f3f5f8; }
.req-more__btn .dot{ width:4px; height:4px; border-radius:50%; background:#6b7280; display:inline-block; margin:0 1px; }
.req-more__menu{
  position:absolute; top:36px; right:0; min-width:120px; padding:6px; margin:0; list-style:none; z-index:50;
  background:#fff; border:1px solid #e6e9ef; border-radius:10px; box-shadow:0 8px 20px rgba(0,0,0,.08);
}
.req-more__menu a{ display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; color:#222; text-decoration:none; font-size:14px; }
.req-more__menu a:hover{ background:#f5f7fb; }
@media (max-width:480px){ .req-more__btn{ width:36px; height:36px; border-radius:10px; } }


/* ====================
   요청 조건 (타일형 키워드)
==================== */
.kw-grid-view{
  list-style:none; margin:10px 0 30px; padding:0;
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px;
}
@media (max-width:768px){ .kw-grid-view{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
@media (max-width:420px){ .kw-grid-view{ grid-template-columns:repeat(3, minmax(0,1fr)); } }

.kw-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 6px;          /* 내부 여백만 남기고 */
  border: 1px solid #e9eef5;
  border-radius: 14px;
  background: #fff;
  color: #222;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .02);
  text-align: center;
  height: auto;               /* ✅ 높이 자동 */
  min-height: 72px;           /* ✅ 최소 높이만 지정 (디자인 통일용) */
  box-sizing: border-box;
  word-break: keep-all;
}
.kw-tile .kw-label {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  word-wrap: break-word;
  text-align: center;
  max-width: 90%;
}


.kw-tile .kw-ico{ font-size:24px; line-height:1; opacity:.9;
  flex:0 0 auto;
}

.kw-tile.long .kw-label { font-size:11px; }



/* 본문 */
.content{
  margin:12px 0 14px; color:#1f2937; line-height:1.75; word-break:break-word;
}
.content p{ margin:0 0 10px; }
.content img{ max-width:100%; height:auto; border-radius:10px; display:block; }

/* 첨부 이미지를 1장씩 세로로 표시 (그리드 무시) */
.req_view .photo-group{ margin:12px 0; }
.req_view .photo-grid,
.req_view .photo-grid.photo-2,
.req_view .photo-grid.photo-3,
.req_view .photo-grid.photo-many{ display:block !important; }

.req_view .photo-group .photo{
  display:block; width:100%;
  padding:0; border:0; background:transparent;
  border-radius:12px; overflow:hidden;
  margin:0 0 12px;    /* 사진 간 간격 */
  -webkit-appearance:none; appearance:none;
}
.req_view .photo-group .photo img{
  display:block; width:100%; height:auto; border:0; box-shadow:none;
}

/* 선택: 고정 댓글 입력 바(자리만) */
.req_view__cmtbar{
  position: sticky;
  bottom: calc(16px + env(safe-area-inset-bottom,0px));
  height: 0;          /* 실제 입력창을 넣을 때 높이/배경 지정 */
  z-index: 6;
}



/* ==================== 상태 변경 바텀시트 ==================== */
.status-pannel{display:flex;justify-content:flex-end;margin-top:8px;}
.status-trigger{
  display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid #e6e6e6;
  border-radius:12px;background:#fff;font-size:12px;font-weight:500;cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.status-trigger__text{line-height:1;}
.status-trigger i{font-size:12px;opacity:.7}
.status-dot{width:9px;height:9px;border-radius:50%;display:inline-block;box-shadow:0 0 0 1px rgba(0,0,0,.05) inset;}
.status-available{background:#2ecc71;}
.status-pending{background:#f1c40f;}
.status-completed{background:#3498db;}
.status-hidden{background:#bdc3c7;}

.sheet-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:9997;}
.status-sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:9998;background:#fff;
  border-top-left-radius:16px;border-top-right-radius:16px;box-shadow:0 -8px 24px rgba(0,0,0,.2);
  transform:translateY(100%);transition:transform .22s ease;padding:8px 14px 14px;
}
.status-text{font-size:12px;font-weight:500;}

/* ===== 비로그인 또는 타인일 때 상태 텍스트 중앙정렬 ===== */
.view-toolbar .toolbar-left{display:flex;align-items:center;}
/* 기본은 왼쪽 정렬 (내 게시물일 때) */
.view-toolbar.has-manage .toolbar-left{justify-content:flex-start;}
/* 본인이 아니거나 로그아웃 상태일 때는 중앙 정렬 */
.view-toolbar:not(.has-manage) .toolbar-left{justify-content:center;width:100%;}

/* 바텀시트가 CTA(99999)보다 위로 */
.status-sheet{z-index:100050;}
/* 배경 딤도 CTA 위로 */
.sheet-backdrop{z-index:100040;}
/* 시트 안 내용이 CTA나 홈바에 가리지 않게 하단 여백 추가 */
.status-sheet{
  padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px) + var(--cta-height, 4px) /* CTA 높이 가정치 */);
}
.status-sheet.open{transform:translateY(0);}
.sheet-handle{width:44px;height:4px;border-radius:2px;background:#ddd;margin:8px auto 10px;}
.sheet-title{text-align:center;font-weight:700;margin-bottom:6px;font-size:15px;}
.sheet-list{list-style:none;margin:0;padding:0;}
.sheet-item{
  width:100%;padding:14px 10px;border:none;background:#fff;font-size:14px;font-weight:500;
  border-bottom:1px solid #f1f1f1;cursor:pointer;display:flex;align-items:center; /* 세로 가운데 */
  justify-content:center; /* 가로 가운데 ← 핵심 */
  gap:10px;text-align:center; /* 텍스트 줄바꿈 시 중앙 유지 */
}
.sheet-item:last-child{border-bottom:none;}
.sheet-item.danger{color:#d64545;}
/* 점 크기 고정(옵션) — 가운데 정렬 시 폭 흔들림 방지 */
.sheet-item .status-dot{flex:0 0 9px;}
.sheet-item:last-child{border-bottom:none;}
.sheet-item.danger{color:#d64545;}
.sheet-item .sheet-label{margin:0 auto;}

.sheet-cancel{
  width:100%;margin-top:8px;padding:13px 10px;border:none;background:#f5f5f5;
  border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;
}
.sheet-confirm{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px;margin-top:10px;border:1px solid #eee;border-radius:10px;background:#fafafa;
}
.sheet-confirm__text{font-size:14px;line-height:1.4;}
.sheet-confirm__actions{display:flex;gap:8px;}
.btn-outline{padding:8px 14px;border:1px solid #ddd;background:#fff;border-radius:8px;font-weight:600;}
.btn-primary{padding:8px 14px;border:0;background:#2e7dff;color:#fff;border-radius:8px;font-weight:700;}

.status-toast{
  position:fixed;left:50%;top:48vh;transform:translate(-50%, -50%);
  z-index:100200;max-width:min(640px, 96vw);min-width:280px;
  padding:12px 16px;border-radius:14px;background:rgba(0,0,0,.88);color:#fff;
  display:flex;align-items:center;justify-content:center; /* ← 가운데 정렬 */
  gap:0; /* 버튼 없어졌으니 간격 0 */
  box-shadow:0 8px 24px rgba(0,0,0,.28);
}
.status-toast .msg{flex:0 1 auto;text-align:center;line-height:1.4;}
.status-toast[hidden]{display:none !important;}
/* 혹시 CSS만으로 임시로 감추고 싶으면(HTML 수정 못할 때) */
.status-toast .undo{display:none !important;}

.view-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 12px;border-bottom:1px solid #f1f3f5;border-top:1px solid #f1f3f5;
  background:#f7f7f7;position:sticky;top:0;z-index:5; margin-top: 10px;
}
.view-back-btn{position:absolute;top:var(--safe-top,16px);left:12px;z-index:50;}
.view-back-btn button{
  background:transparent;border:0;padding:6px;cursor:pointer;color:#fff;line-height:1;
  text-shadow:0 1px 2px rgba(0,0,0,.6), 0 0 8px rgba(0,0,0,.35);
}
.view-back-btn i{font-size:22px;}
.view-actions{position:absolute;top:var(--safe-top,16px);right:12px;z-index:50;display:flex;gap:14px;}
.view-actions button{
  background:transparent;border:0;cursor:pointer;color:#fff;line-height:1;padding:6px;
  text-shadow:0 1px 2px rgba(0,0,0,.6), 0 0 8px rgba(0,0,0,.35);
}
.view-actions i{font-size:22px;}
.btn-like i.fa-solid{display:none;}
.btn-like.active i.fa-regular{display:none;}
.btn-like.active i.fa-solid{display:inline;color:#fff;}


/* ───────── 풀블리드 상태툴바 ───────── */
.view-toolbar.fullbleed{
  /* 기존 테두리는 가짜 배경으로 대체할 거라 숨김 */
  border-top: none;
  border-bottom: none;
  position:relative
  top: 0;
  z-index: 5;
  margin-bottom: -4px;
}

/* 컨테이너 밖으로 나가는 가짜 배경 레이어 */
.view-toolbar.fullbleed::before{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:100vw;                 /* 화면 가로 전체 */
  top:-1px;                    /* 테두리 두께만큼 보정 */
  bottom:-1px;
  background:#f7f7f7;          /* 기존 배경색과 동일 */
  border-top:1px solid #f1f3f5;    /* 기존과 동일한 상/하단 라인 */
  border-bottom:1px solid #f1f3f5;
  z-index:-1;                  /* 내용 뒤, 페이지 앞 */
}

/* 본인이 아니거나 로그아웃 상태일 때 중앙정렬(기존 규칙 유지) */
.view-toolbar .toolbar-left{display:flex;align-items:center;}
.view-toolbar.has-manage .toolbar-left{justify-content:flex-start;}
.view-toolbar:not(.has-manage) .toolbar-left{justify-content:center;width:100%;}

/* 구해요: 숨김 시 버튼 비활성화 표현 */
.js-like-btn.is-disabled { opacity:.45; pointer-events:none; }

/* ===========================
   댓글 (View) — FINAL Clean
=========================== */

/* 토글 버튼(그누 기본) */
.cmt_btn{border:0;background:transparent;}
.cmt_btn .total{font-size:14px;color:#0f172a;}
.cmt_btn_op .cmt_more{transform:rotate(180deg);}

/* 리스트 컨테이너 */
.cmt_list{list-style:none;margin:8px 0 0;padding:0;}
.cmt_list>.cmt_item{margin-left:0;}
.cmt_list>li[style*="margin-left"]{margin-left:28px!important;}
@media (max-width:480px){
  .cmt_list>li[style*="margin-left"]{margin-left:20px!important;}
}



/* 각 댓글 카드 레이아웃 */
.cmt_item{
  display:grid!important;
  grid-template-columns:44px 1fr auto!important;
  grid-template-areas:
    "avatar head   more"
    "avatar meta   more"
    "avatar body   more"
    "avatar action more";
  gap:6px 12px!important;
  padding:14px 0!important;
  border-bottom:1px solid #f0f2f5!important;
  min-width:0; box-sizing:border-box; overflow:visible;
}
@media (max-width:480px){
  .cmt_item{grid-template-columns:38px 1fr auto; gap:6px 10px;}
}

/* 아바타 */
.cmt_avatar{grid-area:avatar;width:44px;height:44px;border-radius:50%;overflow:hidden;background:#f3f5f8;}
.cmt_avatar img{width:100%;height:100%;object-fit:cover;display:block;}
@media (max-width:480px){ .cmt_avatar{width:38px;height:38px;} }

/* 헤더/메타/본문/액션 공통 */
.cmt_head,.cmt_meta,.cmt_text,.cmt_actions{min-width:0;}
.cmt_head{grid-area:head;display:flex;align-items:center;gap:8px;margin:2px 0 0;}
.cmt_name{font-weight:700;font-size:13px;color:#0f172a;}
.cmt_badge{display:inline-block;padding:2px 6px;border-radius:6px;font-size:12px;line-height:1;}
.cmt_badge--author{background:#eef6ff;color:#0b5fbd;font-weight:600;margin-left:6px;}

.cmt_meta{grid-area:meta;color:#8a8f98;font-size:12.5px;line-height:1;margin:2px 0 2px!important;}


#bo_vc_empty {font-size:12px;}

/* 우측 더보기 */
.cmt_more{grid-area:more;align-self:start;position:relative;}
.cbtn-more{width:32px;height:32px;border:0;background:transparent;color:#9aa4b2;}
.cmt_moremenu{
  position:absolute;right:0;top:34px;min-width:120px;
  background:#fff;border:1px solid #e9ecef;border-radius:8px;
  padding:6px 0;display:none;z-index:5;list-style:none;
}
.cmt_moremenu.is-open{display:block;}
.cmt_moremenu a{display:block;padding:8px 12px;font-size:13px;color:#333;text-decoration:none;}
.cmt_moremenu a:hover{background:#f6f7f9;}

/* 액션(좋아요/답글) */
.cmt_actions{grid-area:action;display:flex;align-items:center;gap:1px;margin-top:8px;}
.cmt_action,.cbtn-like,.cbtn-reply{
  display:inline-flex;align-items:center;gap:1px;height:32px;padding:0 10px;
  border:0;background:transparent;color:#5b6470;font-size:13px;line-height:1;text-decoration:none;
}
.cmt_actions .count{font-weight:600;}
@media (max-width:480px){
  .cmt_action,.cbtn-like,.cbtn-reply{height:30px;padding:0 8px;}
}

/* 댓글 입력 폼(컴포저) */
.req_view #bo_vc_w{margin-top:10px;}
.bo_vc_w{display:block!important;width:100%!important;}

/* 댓글 항목 하위에 폼이 붙을 때 전폭 */
li.cmt_item>.bo_vc_w,
li.cmt_item div.bo_vc_w,
li.cmt_item #fviewcomment{
  grid-column:1 / -1!important; display:block!important; width:100%!important; max-width:100%!important;
}

/* 컴포저 상단 줄(텍스트 영역 + 도구 + 전송) */
.cmt_row{display:flex;flex:1 1 auto;min-width:0;}
.cmt_avatar_sm{display:none!important;} /* 잔재 숨김 */






/* ============================
   댓글 공통
============================ */
.cmt_list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.cmt_item {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  grid-template-areas:
    "avatar head   more"
    "avatar meta   more"
    "avatar body   more"
    "avatar action more";
  gap: 6px 12px;
  padding: 14px 0;
  border-bottom: 1px solid #f0f2f5;
  min-width: 0;
  box-sizing: border-box;
}
@media (max-width: 480px) {
  .cmt_item {
    grid-template-columns: 38px 1fr auto;
    gap: 6px 10px;
  }
}

/* 프로필 */
.cmt_avatar {
  grid-area: avatar;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: #f3f5f8;
}
.cmt_avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 480px) {
  .cmt_avatar { width: 38px; height: 38px; }
}

/* 헤더/메타/본문 */
.cmt_head {
  grid-area: head;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  min-width: 0;
}
.cmt_name {
  font-weight: 700;
  font-size: 13px;
  color: #0f172a;
}
.cmt_badge--author {
  background: #eef6ff;
  color: #0b5fbd;
  border-radius: 999px;
  padding: 2px 8px 3px;
  font-size: 12px;
  line-height: 1;
}
.cmt_meta {
  grid-area: meta;
  font-size: 12.5px;
  color: #8a8f98;
}
.cmt_text {
  grid-area: body;
  font-size: 12px;
  line-height: 1;
  color: #555;
  word-break: break-word;
}
.cmt_text p { margin: 0; }

/* 더보기 */
.cmt_more {
  grid-area: more;
  position: relative;
}
.cbtn-more {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: #9aa4b2;
  cursor: pointer;
}
.cmt_moremenu {
  position: absolute;
  right: 0;
  top: 34px;
  min-width: 120px;
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 6px 0;
  display: none;
  z-index: 5;
}
.cmt_moremenu.is-open { display: block; }
.cmt_moremenu a {
  display: block;
  padding: 8px 12px;
  font-size: 13px;
  color: #333;
  text-decoration: none;
}
.cmt_moremenu a:hover {
  background: #f6f7f9;
}

/* 액션 (좋아요/답글) */
.cmt_actions {
  grid-area: action;
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 6px;
}
.cmt_action,
.cbtn-like,
.cbtn-reply {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 30px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  font-size: 13px;
  color: #5b6470;
  cursor: pointer;
}

/* ============================
   댓글 입력폼(맨 아래)
============================ */
.cmt_wrap {
  margin-top: 10px;
}
.cmt_composer {
  display: block;
  width: 100%;
}
.cmt_row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  min-width: 0;
}

/* 작은 아바타 (선택) */
.cmt_avatar_sm {
  display: none; /* 필요하면 block으로 */
}

/* ===== 댓글 입력 필드 (최종) ===== */
#bo_vc_w .cmt_field,
.req_view .cmt_field {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f5f7fb;
  border: 1px solid rgba(3,55,96,.05);
  border-radius: 16px;
  padding: 6px 10px 6px 12px;
  min-height: 40px;
  box-sizing: border-box;
}

/* 입력창 */
#bo_vc_w #wr_content.cmt_input,
.req_view #wr_content.cmt_input {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;           /* 부모랑 맞추기 */
  line-height: 20px;
  padding: 10px 0;        /* 위아래 가운데 */
  border: 0;
  outline: 0;
  background: transparent;
  resize: none;
  overflow-y: hidden;
  -webkit-appearance: none;
  box-sizing: border-box;
}

/* placeholder 색 */
#bo_vc_w #wr_content.cmt_input::placeholder,
.req_view  #wr_content.cmt_input::placeholder {
  color: #a3acb7;
}

/* 🔒 비밀글 토글 (공통) */
.cmt_tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  flex: 0 0 auto;
  margin-bottom: 0px;
}
.cmt_tool .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
}
.cmt_tool_btn {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 17px;
  color: #dcdee1;
  background: transparent;
  line-height: 1;
  cursor: pointer;
}
.cmt_tool_btn::before {
  content: "\f023"; /* 🔒 */
}
.cmt_tool input:checked + .cmt_tool_btn {
  color: #033760;
}

/* ✈ 전송 버튼 (공통) */
.cmt_send {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  cursor: pointer;
  flex: 0 0 auto;
}
.cmt_send i {
  font-size: 17px;
  line-height: 1;
}
.cmt_send:hover { color: #033760; }
.cmt_send:disabled { color: #cbd2da; cursor: default; }

/* 이 화면에 붙은 아이콘들은 무조건 가운데 */
#bo_vc_w .cmt_tool,
#bo_vc_w .cmt_send,
.req_view .cmt_tool,
.req_view .cmt_send {
  align-self: center;
}

/* 비회원 입력칸 아래로 */
.cmt_actions.cmt_actionsbar {
  flex: 1 1 100%;
  display: block;
  margin-top: 8px;
}

/* 반응형 */
@media (max-width: 480px) {
  .cmt_row {
    flex-wrap: wrap;
  }
  #bo_vc_w .cmt_field,
  .req_view .cmt_field {
    width: 100%;
  }
}


/* ===== 댓글 입력창은 공통폼 스타일에서 제외 ===== */
.req_view #wr_content.cmt_input {
  border: 0 !important;
  padding: 0 !important;
  height: auto !important;
  min-height: 30px !important;
  background: transparent;
  line-height: 20px;
  resize: none;
  overflow: hidden;
}

/* 바깥 래퍼가 테두리/배경 담당 */
.req_view .cmt_field {
  background: #f5f7fb;
  border: 1px solid rgba(3,55,96,.05);
  border-radius: 16px;
  padding: 6px 10px 6px 12px;
}





/* ===== 비회원 폼(이름/비번/캡차) — “입력창 아래 → 전폭” ===== */
.cmt_actions.cmt_actionsbar{
  grid-column:1 / -1; display:block; margin:8px 0 0; padding:0; border:0;
}
#bo_vc_w .cmt_row{display:flex!important;flex-wrap:wrap!important;align-items:flex-start;gap:10px;min-width:0;}
#bo_vc_w .cmt_field{flex:1 1 100%!important;}      /* 입력칸 전폭 */
#bo_vc_w .cmt_actions.cmt_actionsbar{flex:1 1 100%!important;display:block!important;}

.cmt_guest_wrap{display:flex;flex-direction:column;gap:10px;width:100%;}
.cmt_guest{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
@media (max-width:480px){ .cmt_guest{grid-template-columns:1fr;gap:6px;} }

.cmt_guest_input{
  width:100%;height:40px;padding:0 12px;border:1px solid #e2e8f0;border-radius:10px;
  background:#fff;font-size:14px;outline:none;
}
.cmt_guest_input:focus{border-color:#033760;box-shadow:0 0 0 3px rgba(3,55,96,.08);}

.cmt_captcha{display:flex;align-items:center;gap:8px;}
.cmt_captcha img{border-radius:8px;display:block;}
.cmt_captcha audio{display:none;}
.cmt_captcha input[type="text"]{
  flex:1 1 auto;height:40px;padding:0 12px;border:1px solid #e2e8f0;border-radius:10px;font-size:14px;outline:none;
}

/* ===== 레거시 스킨 잔재 숨김 (좌측 동그란 영역 등) ===== */
#bo_vc_w .cmt-writer-photo,
#bo_vc_w .comment-avatar,
#bo_vc_w .icon_pic,
#bo_vc_w .writer-photo,
#bo_vc_w .wr_photo,
#bo_vc_w .comment_writer,
#bo_vc_w .comment_write_left{display:none!important;}




/* ===== 하단 고정 CTA (공통) ===== */
body.view-noheader .bottom_nav, body.view-noheader .fab-write { display:none !important; }
.view-sticky-cta{
  position:fixed; left:0; right:0; bottom:0;
  z-index:99999; background:#fff; border-top:1px solid #eee;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  display:flex; gap:10px; justify-content:space-between; align-items:center;
}
.view-sticky-cta .cta-btn{
  flex:1 1 0; display:flex; align-items:center; justify-content:center; gap:8px;
  height:46px; border-radius:12px; font-size:12px; font-weight:600; border:0; cursor:pointer; position:relative;
}
.view-sticky-cta .cta-like{ background:#f2f3f5; color:#222; }
.view-sticky-cta .cta-like .fa-solid.fa-heart{ display:none; }
.view-sticky-cta .cta-like.active{ background:#ffe8e8; color:#d94141; }
.view-sticky-cta .cta-like.active .fa-regular.fa-heart{ display:none; }
.view-sticky-cta .cta-like.active .fa-solid.fa-heart{ display:inline-block; }
.view-sticky-cta .cta-chat{ background:#fc9703; color:#fff; }
.view-sticky-cta .cta-btn i{ font-size:18px; line-height:1; }

/* 컨텐츠가 CTA에 가리지 않도록 하단 여백 */
@media (max-width: 991.98px){ body.view-noheader { padding-bottom:90px; } }
body.view-noheader { padding-bottom: 90px; }


/* ========== Lightbox 기본 스타일/숨김 ========== */
.lightbox{
  position:fixed; inset:0; display:none;    /* 초기엔 숨김 */
  align-items:center; justify-content:center;
  background:rgba(0,0,0,.85); z-index:100000;  /* CTA(99999)보다 위 */
}
.lightbox[aria-hidden="false"]{ display:flex; }

.lightbox img{ max-width:96vw; max-height:86vh; border-radius:8px; }

.lb-close,.lb-prev,.lb-next{
  position:absolute; width:44px; height:44px; border:0; border-radius:10px;
  background:rgba(0,0,0,.5); color:#fff; font-size:22px; line-height:44px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}

/* 위치(취향에 맞게 조절 가능) */
.lb-close{ top:12px; right:12px; }
.lb-prev { left:12px;  top:50%; transform:translateY(-50%); }
.lb-next { right:12px; top:50%; transform:translateY(-50%); }

/* 화면리더/포커스 품질 */
.lb-close:focus,.lb-prev:focus,.lb-next:focus{ outline:2px solid rgba(255,255,255,.7); }


/* ====== 추천/연관 섹션 ====== */
.rel-title{ font-size:18px; font-weight:900; margin:16px 0 10px; display:flex; align-items:center; gap:8px; }
.rel-subtitle{ font-size:16px; font-weight:800; margin:16px 0 8px; }
.rel-slider{
  display:grid; grid-auto-flow:column; grid-auto-columns: calc(50% - 14px);
  gap:14px; overflow-x:auto; padding:2px 2px 8px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling: touch;
}
.rel-slider::-webkit-scrollbar{ display:none; }
.rel-card{ scroll-snap-align:start; background:#fff; border:1px solid #eef0f2; border-radius:14px; overflow:hidden; box-shadow:0 2px 6px rgba(0,0,0,.04); }
.rel-thumb{ position:relative; width:100%; padding-bottom:66.66%; background:#f5f6f8; }
.rel-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.rel-body{ padding:10px; }
.rel-title2{ font-weight:800; color:#111; font-size:14.5px; line-height:1.35; height:3.6em; overflow:hidden; }
.rel-meta{ display:flex; gap:10px; align-items:center; color:#8a8f98; font-size:12.5px; margin-top:6px; }
.rel-meta i{ font-size:12px; }
.skel{ height:220px; background:linear-gradient(90deg,#f6f7f8 25%,#edeef1 37%,#f6f7f8 63%); background-size:400% 100%; animation:sk 1.2s ease infinite; border-radius:14px; }
@keyframes sk{ 0%{background-position:100% 0} 100%{background-position:0 0} }


/* ========= 섹션 구분 바(뷰 페이지 한정) ========= */
.req_view { position: relative; }
.req_view .cmt-wrap,
.req_view .rel-wrap,
.req_view .rel-list-wrap{
  position: relative; padding-top: 16px; margin-top: 20px; z-index: 1;
}


.req_view .cmt-wrap::before,
.req_view .rel-wrap::before,
.req_view .rel-list-wrap::before{
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  top: -14px; width: 100vw; height: 12px; background: #f7f8fb; border-top: 1px solid #eef2f6; border-bottom: 1px solid #eef2f6; z-index: -1;
}
.req_view .rel-title{ margin: 4px 0 10px; font-size: 16px; font-weight: 800; }
.req_view .content{ margin-bottom: 30px; font-weight: 400;  font-size:15px; color:#212121;}
@media (min-width: 1024px){
  .req_view .cmt-wrap::before, .req_view .rel-wrap::before, .req_view .rel-list-wrap::before{ height: 10px; }
}

/* 뷰페이지 내에 삽입된 '관련 글' 리스트는 좌우 여백 제거 */
.req_list--embed {
  --gutter: 0;               /* 다른 곳에서 var(--gutter) 쓰면 같이 0으로 */
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 카드가 가득 차 보이도록(선택) */
.req_list--embed .feed_item { padding-left: 0; padding-right: 0; }


.rel-wrap {margin-bottom: 10px;}

.rel-wrap .reco-wrap {padding: 0; margin-top: 10px;}

/* "팔아요 전체보기" 영역 — 원래 버튼 스타일 유지, 가운데 정렬만 보장 */
.gal-more-wrap{
  position: relative;
  text-align: center;
  padding: 20px 0 4px;   /* 과한 margin/padding 금지 */
  /* ▼ 아래 두 줄이 있었다면 반드시 제거: margin-bottom / ::after */
  /* margin-bottom: ...  (삭제) */
  /* ::after{ ... }      (삭제) */
}


/* 요청글 전체보기 버튼 */
.req-more-wrap { text-align: center; margin: 12px 0; }
.req-more-btn {
  display: inline-block; padding: 8px 18px; font-size: 14px; font-weight: 500; color: #333;
  background: #f5f6f8; border: 1px solid #e1e4e8; border-radius: 6px; transition: background 0.2s;
}
.req-more-btn:hover { background: #e9ebef; }


/*************************************************
 * Request List (req_list) — MOBILE APP STYLE FINAL PRO
 * -----------------------------------------------------

/* ------------------ 공통 리셋 ------------------ */
.req_list {
 padding-left: var(--gutter);
  padding-right: var(--gutter);
  
}
.req_list .feed { list-style: none; margin: 0; padding: 0; }
.req_list .feed_item { margin: 0; padding: 18px 0; border-bottom: 1px solid #f0f2f5; }
.req_list .feed_item::marker, .req_list .feed_item::before { content: none !important; }

html, body, .req_list { overflow-x: hidden; background: #fff; }

.mbless {margin-top: -10px;}

/* =========================================================
   ① 구해요 상단 롤링 배너 (반응형 + 앱 정렬)
========================================================= */
/* ===== 공통: 컨테이너 밖으로 배경만 확장 ===== */
.fullbleed{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
@supports (width: 100svw){
  .fullbleed{
    width: 100svw;
    margin-left: calc(50% - 50svw);
    margin-right: calc(50% - 50svw);
  }
}
/* 페이지 전체 가로스크롤 방지(풀블리드 사용 시 권장) */
html, body { overflow-x: hidden; }

/* ===== 구해요 상단 배너 ===== */
.rqst-intro-wrap{
  /* 배경은 화면 끝까지 (카드 배경색은 카드별 변수로) */
  background: transparent;
  border-top: 0; border-bottom: 0;
}

/* 내용 트랙은 다시 중앙 max-width로 */
.rqst-intro-track{
  max-width: 1200px;           /* 사이트 컨테이너 폭에 맞춰 조정 */
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;    /* IE/Edge */
  scrollbar-width: none;       /* Firefox */
}
.rqst-intro-track::-webkit-scrollbar{ display:none; }

/* 각 배너 카드(한 화면형) */
.rqst-intro-card{
  --rqst-intro-bg: #F5F7FB;
  --rqst-intro-fg: #0F172A;
  background: var(--rqst-intro-bg);
  color: var(--rqst-intro-fg);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
  min-width: 100%;             /* 모바일: 한 화면 꽉 */
  scroll-snap-align: center;
}
@media (min-width: 768px){
  .rqst-intro-card{ min-width: calc(100% - 32px); } /* 좌우 패딩 보정 */
}

.rqst-intro-card .intro-icon i,
.rqst-intro-card .intro-icon .emoji{ font-size: 20px; opacity:.9; }
.rqst-intro-card .intro-texts{ display:flex; flex-direction:column; gap:2px; line-height:1.3; }
.rqst-intro-card .intro-title{ font-weight: 800; font-size: 13px; }
.rqst-intro-card .intro-desc{ font-size: 11px; opacity:.8; }
.rqst-intro-card .intro-cta{
  margin-left:auto; padding:8px 12px; border-radius:999px;
  border:1px solid rgba(0,0,0,.08); background:#fff; font-weight:700; font-size:13px;
}

/* =========================================================
   ② 검색/필터 영역
========================================================= */
.req_list .rqst-filter { margin: 10px 0 18px;}
.req_list .rqst-filter .row {
  display: grid;
  grid-template-columns: 1fr 1fr 74px;
  gap: 8px;
  align-items: center;
}

.req_list .rqst-filter select,
.req_list .rqst-filter input[type="text"] {
  height: 42px;
  padding: 0 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  outline: none;
  font-size: 14px;
  color: #111;
}

.req_list .rqst-filter .btn_primary {
  height: 42px;
  border-radius: 10px;
  background: #033760;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-block {background:#fff; border:none;}

@media (max-width: 420px) {
  .req_list .rqst-filter .row {
    grid-template-columns: 1fr 1fr;
  }
  .req_list .rqst-filter .row > .col:last-child {
    grid-column: 1 / -1;
  }
  .req_list .rqst-filter .btn_primary {
    width: 100%;
  }
}

/* =========================================================
   구해요 필터 — 한 줄 컴팩트 앱형 (최종)
========================================================= */
.req_list .rqst-filter {
  margin: 10px 0 16px;
}

/* 한 줄 정렬 */
.req_list .rqst-filter .row02 {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* 왼쪽 정렬 */
  gap: 8px;
  flex-wrap: nowrap;
}

/* 셀렉트 — 글자 기준 폭 + pill 스타일 */
.req_list .rqst-filter select {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 14px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background: #fff;
  font-size: 13.5px;
  color: #111;
  white-space: nowrap;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-align: center;
  text-align-last: center;
  box-sizing: border-box;
}
.req_list .rqst-filter select::-ms-expand { display: none; }

/* 돋보기 버튼 (submit 역할) */
.req_list .rqst-filter .btn_search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: #033760;
  border-radius: 50%;
  cursor: pointer;
  flex: 0 0 36px;
}
.req_list .rqst-filter .btn_search i {
  font-size: 17px;
  line-height: 1;
}
.req_list .rqst-filter .btn_search:hover {
  background: rgba(3, 55, 96, 0.06);
}

/* 작은 화면 */
@media (max-width: 360px) {
  .req_list .rqst-filter .row { gap: 6px; }
  .req_list .rqst-filter select {
    font-size: 13px;
    padding: 0 12px;
  }
}





/* =========================================================
   ③ 라벨 및 메타 태그
========================================================= */
.req_list .meta-top {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 6px 0;
  padding: 0 4px;
}
.label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  background: #f1f5f9;
  color: #0f172a;
  border: 1px solid #e2e8f0;
}
.label-type { background: #f19208; border-color: #fd9703; color: #fff; }
.label-type1 { background: #f19208; border-color: #e28702; color: #fff; }
.label-type2 { background: #033760; border-color: #01233e; color: #fff; }

/* =========================================================
   ④ 리스트 카드 (썸네일 + 본문)
========================================================= */
.req_list .feed_link {
  display: grid;
  grid-template-columns: 1fr 90px;
  gap: 10px 14px;
  align-items: start;
  text-decoration: none;
  color: inherit;
  padding: 0 4px;
}
.req_list .feed_link > * { min-width: 0; }

.req_list .feed_link .title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #111;
  line-height: 1.45;
  letter-spacing: -0.3px;
  word-break: break-word;
}
.req_list .feed_link .excerpt {
  margin-top: 4px;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.5;
  color: #1E293B;
  letter-spacing: -0.3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

/* 썸네일 */
.req_list .feed_link .thumb {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 90px;
  height: 90px;
  border-radius: 10px;
  overflow: hidden;
  background: #f3f5f8;
}
.req_list .feed_link .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}

/* 사진 없는 경우 한 줄 정렬 */
.req_list .feed_link:not(:has(.thumb)),
.req_list .feed_item.no-thumb .feed_link {
  grid-template-columns: 1fr;
  gap: 6px 0;
}

/* 썸네일 있는 항목 간격 조정 */
.req_list .feed_item.with-thumb .feed_link {
  gap: 4px 12px;
}
.req_list .feed_item.with-thumb .feed_link .excerpt { margin-top: 2px; }

/* 큰 화면 여유 */
@media (min-width:769px) {
  .req_list .feed_link { grid-template-columns: 1fr 120px; }
  .req_list .feed_link .thumb { width: 120px; height: 120px; }
}

/* =========================================================
   ⑤ 하단 메타 정보 (작성자 / 조회 / 좋아요 / 댓글)
========================================================= */
.req_list .meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 18px;
  padding: 0 4px;
  color: #8a8f98;
  font-size: 12.5px;
}
.req_list .meta-left {
  display: flex;
  gap: 10px;
  align-items: center;
  flex: 1 1 auto;
  overflow: hidden;
}
.req_list .meta-rc {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
}
.req_list .meta-rc .rc,
.req_list .meta-rc .cmt {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.req_list .meta-rc i { font-size: 14px; }

/* 좋아요 하트 상태 */
.rc.like i.fa-solid.fa-heart { display: none; }
.rc.like i.fa-regular.fa-heart { display: inline-block; }
.rc.like.active i.fa-solid.fa-heart { display: inline-block; color: #e74c3c; }
.rc.like.active i.fa-regular.fa-heart { display: none; }

/* =========================================================
   ⑥ 섹션 구분 띠 (ui-aaa)
========================================================= */
.ui-aaa {
  position: relative;
  height: 12px;
  overflow: hidden;
  margin: 4px -16px 10px;
}
.ui-aaa::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 12px;
  background: #f7f8fb;
  border-top: 1px solid #eef2f6;
  border-bottom: 1px solid #eef2f6;
}

.ui-line {
  height: 1px;
  background: #eef2f6;
  margin: 10px -16px; /* 양옆 살짝 늘리고 싶으면 이런 식으로 */
}

.section-title{font-size:14px; font-weight:600; letter-spacing:-.2px; padding:12px 0; margin-bottom:8px; color:#212529;}


/* =========================================================
   ⑦ 플로팅 작성 버튼 (FAB)
========================================================= */
.fab-write {
  position: fixed;
  right: 18px;
  bottom: 86px;
  z-index: 1050;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #ffa21a;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}


/* 배너 트랙: 가로 제스처만 캡처, 세로 스크롤 체인 방지 */
.rqst-intro-track{
  touch-action: pan-x;
  overscroll-behavior-x: contain;
}

/* ===== 팔아요 스타일 바텀시트 (drop-in for .bsheet) ===== */

/* 전체 */
.no-scroll{ overflow:hidden; }
.bsheet{ position:fixed; inset:0; z-index:11000; }
.bsheet[hidden]{ display:none !important; }

/* 뒷배경 */
.bs-backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.45);
  backdrop-filter:saturate(120%) blur(2px);
}

/* 패널: 여백/라운드만 다이어트 */
.bs-panel{
  position:absolute; left:0; right:0;
  bottom: env(safe-area-inset-bottom, 0px);
  background:#fff;
  border-radius:16px 16px 0 0;
  padding: 8px 0 10px;                  /* ← 좌우 패딩 제거, 리스트가 화면 꽉 차게 */
  box-shadow:0 -8px 32px rgba(0,0,0,.18);
  animation:bsUp .20s ease;
  max-height: 60vh;                      /* 스크롤 생김 */
  overflow:hidden;                       /* 상/하단 라운드 유지 */
}
@keyframes bsUp{ from{ transform:translateY(12px); opacity:.85 } to{ transform:none; opacity:1 } }

/* 상단 핸들 + 제목 */
.bs-handle{
  width:44px; height:4px; border-radius:2px; background:#e5e7eb;
  margin:8px auto 8px;
}
.bs-title{
  margin:0 0 4px;
  text-align:center;
  font-weight:800; font-size:16px;      /* 스샷 톤 맞춤 */
  color:#0f172a;
}

/* 리스트: iOS-like 단순 선택 */
.bs-list{
  list-style:none; margin:0; padding:0;
  max-height: calc(60vh - 44px);        /* 제목 영역 제외 */
  overflow:auto;
}
.bs-item{
  width:100%;
  border:0; background:#fff; cursor:pointer;
  text-align:center;
  font-size:14px; font-weight:500;      /* 기본 굵게(팔아요 톤) */
  line-height:1;
  padding:16px 10px;                    /* 터치 타깃 ≈ 48px+ */
  border-bottom:1px solid #f1f5f9;
}
.bs-item:last-child{ border-bottom:none; }

/* 선택 상태: 진한 글자 + 은은한 배경 */
.bs-item.active{
  background:#f6f8fb;
  color:#0f172a;
  box-shadow: inset 0 0 0 1px #eef2f6;
}

/* 누름 피드백 */
.bs-item:active{ background:#f2f4f7; }

/* 하단 액션(리셋/적용)은 팔아요 스타일에선 사용 안 함 → 감춤 */
.bs-actions, .bs-reset, .bs-apply{ display:none !important; }



/* ===== 앱스러운 필터 버튼 (드롭인 패치) ===== */

/* 행 간격 & 정렬 보정 */
.picker-row{
  display:grid;
  grid-template-columns: 1fr 1fr 44px;
  gap:10px;
  align-items:center;
  padding: 0 2px;            /* 좌우 살짝 여유 */
}

/* 트리거 버튼(지역/매물유형) */
.pick-field{
  height: 44px;              /* 살짝 더 키움 */
  padding: 0 14px;
  display:flex; align-items:center; justify-content:space-between;
  border: 1px solid #e6e9ef;         /* 부드러운 경계 */
  border-radius: 9999px;                /* 라운드 강화 */
  background: #003760;
  font-size: 12px; font-weight: 700; color:#003760;
 
}

/* 플레이스홀더 톤 다운 */
.pick-field .val.is-placeholder{ color:#fff; font-weight:500; }

/* 아이콘(화살표) */
.pick-field i{
  font-size: 11px; opacity:.55; transform: rotate(180deg) translateY(-1px); color:#daeefe;
}

/* 눌림/호버/포커스 */
.pick-field:active{ transform: translateY(1px); }
@media (hover:hover){
  .pick-field:hover{ box-shadow: 0 2px 6px rgba(16,24,40,.08); border-color:#dde3ea; }
}
.pick-field:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(3,55,96,.12);  /* JPW 프라이머리 살짝 */
  border-color: #b8c7dc;
}

/* 선택값이 있을 때 약간의 칩 느낌 */
#btn_region:not(:has(.is-placeholder)),
#btn_type:not(:has(.is-placeholder)){
  background: #f8fafc;
  border-color: #dbe2ea;
}

/* 검색 버튼(돋보기) */
.btn_search{
  width: 44px; height: 44px;
  display:flex; align-items:center; justify-content:center; 
}
.btn_search i{ font-size:16px; line-height:1; }
.btn_search:active{ transform: translateY(1px); }
@media (hover:hover){
  .btn_search:hover{ box-shadow: 0 4px 14px rgba(3,55,96,.24); opacity:.96; }
}
.btn_search:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(3,55,96,.22); }

/* 초좁은 화면에서 텍스트 잘림 방지 */
.pick-field .val{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  padding-right:8px;
}

/* 레이아웃 변동 유발 속성의 트랜지션 금지 */
.req_list *{
  transition-property: color, background-color, border-color, box-shadow, opacity, transform !important;
  /* margin/padding/height/line-height/top/left/right/bottom 은 제외(=애니메이션 금지) */
  transition-duration: .15s;
}


.admin-bulk-bar {
  padding: 10px 0;
}

.admin-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}