@charset "utf-8";
/* ============================================================
   셀러클럽 목록형 게시판 스킨 확장
   (community / support 공용)
   ============================================================ */
:root{
  --m-brand:var(--blue,#FF7A2F);
  --m-brand-dark:var(--blue-dark,#E8621A);
  --m-brand-light:var(--blue-light,#FFF1E8);
  --m-accent:var(--blue,#FF7A2F);
  --m-ink:var(--text,#111827);
  --m-ink-2:var(--text,#374151);
  --m-muted:var(--text-muted,#6b7280);
  --m-line:#e5e7eb;
  --m-white:var(--white,#fff);
  --m-bg:var(--bg-gray,#f8fafc);
  --m-radius:14px;
  --m-radius-sm:10px;
}
html[data-theme="dark"]{
  --m-brand:#FF8A4A;
  --m-brand-dark:#FF7A2F;
  --m-brand-light:#3b2416;
  --m-accent:#FF8A4A;
  --m-ink:#f3f4f6;
  --m-ink-2:#e5e7eb;
  --m-muted:#9ca3af;
  --m-line:#374151;
  --m-white:#1f2937;
  --m-bg:#111827;
}

/* ---------- 행 목록 ---------- */
#bo_list .sc-rows { margin: 14px 0; padding: 0; list-style: none; border-top: 2px solid var(--m-ink); }
#bo_list .sc-row { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 18px 14px; border-bottom: 1px solid var(--m-line); transition: background .15s; }
#bo_list .sc-row:hover { background: var(--m-bg); }
#bo_list .sc-row.is-notice { background: #fafafa; }
#bo_list .sc-row.is-current { box-shadow: inset 3px 0 0 var(--m-brand); }

/* 커뮤니티 : PC 3 · 태블릿 2 · 모바일 1 카드 그리드 */
#bo_list.sc-comm ul.sc-rows {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  border-top: 0;
}
#bo_list.sc-comm ul.sc-rows > li.sc-row {
  height: 100%;
  align-items: center;
  gap: 12px;
  padding: 18px 16px;
  border: 1px solid var(--m-line);
  border-radius: 12px;
  background: var(--m-white);
  box-sizing: border-box;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s, border-color .2s, background .2s;
}
#bo_list.sc-comm ul.sc-rows > li.sc-row:hover {
  background: var(--m-white);
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(37, 99, 235, .12);
  border-color: #666;
}
#bo_list.sc-comm ul.sc-rows > li.sc-row.is-notice { background: #fafafa; }
#bo_list.sc-comm ul.sc-rows > li.sc-row.is-current { box-shadow: 0 0 0 2px rgba(37, 99, 235, .18); }
#bo_list.sc-comm ul.sc-rows > li.sc-row-empty {
  grid-column: 1 / -1;
  border: 1px dashed var(--m-line);
  border-radius: 12px;
  background: var(--m-white);
}
@media (max-width: 1024px) {
  #bo_list.sc-comm ul.sc-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 640px) {
  #bo_list.sc-comm ul.sc-rows { grid-template-columns: 1fr; }
}

#bo_list .sc-row-chk { flex: 0 0 auto; padding-top: 4px; }
#bo_list .sc-row-chk label span { float: none; display: block; }

#bo_list .sc-row-thumb { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; overflow: hidden; background: var(--m-bg); border: 1px solid var(--m-line); display: inline-flex; align-items: center; justify-content: center; color: var(--m-muted); font-size: 20px; }
#bo_list .sc-row-thumb img { width: 100%; height: 100%; object-fit: cover; }

#bo_list .sc-row-main { flex: 1 1 auto; min-width: 0; }
#bo_list .sc-row-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 5px; }
#bo_list .sc-row-cate { display: inline-block; padding: 3px 10px; border-radius: 20px; background: var(--m-brand-light); color: var(--m-brand); font-size: 12px; font-weight: 700; }
#bo_list .sc-row-cate.is-notice { background: var(--m-accent); color: #fff; }
#bo_list .sc-row-state { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 800; }
#bo_list .sc-row-state.is-wait { background: #fef3c7; color: #b45309; }
#bo_list .sc-row-state.is-ing { background: #dbeafe; color: #1d4ed8; }
#bo_list .sc-row-state.is-done { background: #dcfce7; color: #15803d; }
#bo_list .sc-row-state.is-hold { background: #f1f5f9; color: #64748b; }
#bo_list .sc-row-answered { display: inline-flex; align-items: center; gap: 3px; padding: 3px 9px; border-radius: 20px; background: #dcfce7; color: #15803d; font-size: 12px; font-weight: 700; }

#bo_list .sc-row-tit { margin: 0 0 6px; font-size: 16px; font-weight: 700; line-height: 1.45; }
#bo_list .sc-row-tit a { color: var(--m-ink); }
#bo_list .sc-row:hover .sc-row-tit a { color: var(--m-brand); }
#bo_list .sc-row-tit .new_icon { display: inline-block; margin-left: 5px; padding: 2px 6px; border-radius: 5px; background: #16a34a; color: #fff; font-size: 10px; font-weight: 800; vertical-align: middle; }

#bo_list .sc-row-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--m-muted); }
#bo_list .sc-row-meta li { display: inline-flex; align-items: center; gap: 4px; }
#bo_list .sc-row-meta li + li::before { content: ""; display: inline-block; width: 1px; height: 11px; margin-right: 5px; background: var(--m-line); }
#bo_list .sc-row-meta .sc-row-name { font-weight: 700; color: var(--m-ink-2); }

#bo_list .sc-row-cmt { flex: 0 0 auto; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 52px; padding: 8px 0; border-radius: 10px; background: var(--m-white); color: var(--m-brand); font-size: 12px; }
#bo_list .sc-row-cmt b { font-size: 15px; font-weight: 800; }
#bo_list .sc-row-cmt.is-zero { color: var(--m-muted); }

#bo_list .sc-row-empty { padding: 60px 0; border-bottom: 1px solid var(--m-line); text-align: center; color: var(--m-muted); }

@media (max-width: 768px) {
    #bo_list .sc-row { gap: 10px; padding: 15px 8px; }
    #bo_list.sc-comm .sc-row { padding: 16px 14px; }
    #bo_list .sc-row-thumb { width: 34px; height: 34px; font-size: 17px; }
    #bo_list .sc-row-tit { font-size: 15px; }
    #bo_list .sc-row-cmt { width: 44px; }
}

html[data-theme="dark"] #bo_list .sc-rows { border-top-color: var(--m-line); }
html[data-theme="dark"] #bo_list.sc-comm .sc-rows { border-top: 0; }
html[data-theme="dark"] #bo_list.sc-comm .sc-row {
  background: #1f2937;
  border-color: #374151;
}
html[data-theme="dark"] #bo_list.sc-comm .sc-row:hover {
  background: #1f2937;
  border-color: #4b5563;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .45);
}
html[data-theme="dark"] #bo_list .sc-row-tit a { color: #f3f4f6; }
html[data-theme="dark"] #bo_list .sc-row:hover .sc-row-tit a { color: #FF8A4A; }
html[data-theme="dark"] #bo_list .sc-row-meta .sv_member,
html[data-theme="dark"] #bo_list .sc-row-name .sv_member { color: #e5e7eb; }
html[data-theme="dark"] #bo_list .sc-row-chk.chk_box input[type="checkbox"] + label span {
  background: #0b1220;
  border: 1px solid #555;
  box-sizing: border-box;
}
html[data-theme="dark"] #bo_list .sc-row-chk.chk_box input[type="checkbox"]:checked + label span {
  background: var(--blue, #FF7A2F) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M2.2 6.2l2.6 2.6 5-5.4'/%3E%3C/svg%3E") no-repeat center;
  background-size: 10px 10px;
  border-color: var(--blue, #FF7A2F);
}
html[data-theme="dark"] #bo_list .sc-row-cate { background: #3b2416; color: #FF8A4A; }
html[data-theme="dark"] #bo_list .sc-row.is-notice,
html[data-theme="dark"] #bo_list.sc-comm ul.sc-rows > li.sc-row.is-notice { background: #252d3a; }
html[data-theme="dark"] #bo_list .sc-row-state.is-wait { background: rgba(245, 158, 11, .18); color: #fbbf24; }
html[data-theme="dark"] #bo_list .sc-row-state.is-ing { background: rgba(59, 130, 246, .18); color: #93c5fd; }
html[data-theme="dark"] #bo_list .sc-row-state.is-done { background: rgba(34, 197, 94, .18); color: #4ade80; }
html[data-theme="dark"] #bo_list .sc-row-state.is-hold { background: rgba(148, 163, 184, .16); color: #cbd5e1; }
html[data-theme="dark"] #bo_list .sc-row-answered { background: rgba(34, 197, 94, .18); color: #4ade80; }

/* ============================================================
   문의 · 신청 폼 (support)
   ============================================================ */
.sc-form-box { border: 1px solid var(--m-line); border-radius: var(--m-radius); background: var(--m-bg); padding: 20px 22px; margin: 10px 0 18px; }
.sc-form-box > h3 { margin: 0 0 16px; font-size: 16px; font-weight: 800; color: var(--m-ink); }
.sc-form-box > h3 i { color: var(--m-brand); margin-right: 6px; }
.sc-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 18px; }
.sc-form-field { display: flex; flex-direction: column; }
.sc-form-field.is-full { grid-column: 1 / -1; }
.sc-form-field label { margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--m-ink-2); }
.sc-form-box .frm_input { width: 100%; height: 46px; padding: 0 12px; border: 1px solid var(--m-line); border-radius: var(--m-radius-sm); background: var(--m-white); color: var(--m-ink); font-size: 14px; font-family: inherit; }
.sc-form-box .frm_input:focus { outline: 0; border-color: var(--m-brand); box-shadow: 0 0 0 3px rgba(37, 124, 252, .15); }
@media (max-width: 768px) { .sc-form-grid { grid-template-columns: 1fr; } }

/* 읽기 페이지 문의 정보 */
.sc-info-view { border: 1px solid var(--m-line); border-radius: var(--m-radius); overflow: hidden; margin: 16px 0; }
.sc-info-view h3 { margin: 0; padding: 14px 18px; border-bottom: 1px solid var(--m-line); background: var(--m-bg); font-size: 16px; font-weight: 800; color: var(--m-ink); }
.sc-info-view h3 i { color: var(--m-brand); margin-right: 6px; }
.sc-info-view dl { display: grid; grid-template-columns: 150px 1fr; margin: 0; }
.sc-info-view dt { padding: 12px 18px; border-bottom: 1px solid var(--m-line); background: var(--m-bg); font-weight: 700; color: var(--m-ink-2); }
.sc-info-view dd { padding: 12px 18px; margin: 0; border-bottom: 1px solid var(--m-line); color: var(--m-ink); word-break: break-all; }
.sc-info-view dt:last-of-type, .sc-info-view dd:last-of-type { border-bottom: 0; }
.sc-state-badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 13px; font-weight: 800; }
.sc-state-badge.is-wait { background: #fef3c7; color: #b45309; }
.sc-state-badge.is-ing { background: #dbeafe; color: #1d4ed8; }
.sc-state-badge.is-done { background: #dcfce7; color: #15803d; }
.sc-state-badge.is-hold { background: #f1f5f9; color: #64748b; }
@media (max-width: 640px) { .sc-info-view dl { grid-template-columns: 1fr; } .sc-info-view dt { border-bottom: 0; padding-bottom: 0; background: transparent; } }

/* 칩 버튼 (문의유형 선택) */
.sc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-chip { padding: 8px 15px; border: 1px solid var(--m-line); border-radius: 20px; background: var(--m-white); color: var(--m-ink-2); font-size: 13px; line-height: 1.2; cursor: pointer; transition: .12s; font-family: inherit; }
.sc-chip:hover { border-color: var(--m-brand); color: var(--m-brand); }
.sc-chip.on { border-color: var(--m-brand); background: var(--m-brand); color: #fff; font-weight: 700; }
html[data-theme="dark"] .sc-chip { background: transparent; }