@charset "utf-8";

/* ===== 열린토론 — Figma 원본 프레임 라벨: 열린토론 B-④/⑤/⑥ (720px viewport / 375 Figma = 1.92×) ===== */
/* 헤더(검색바+브레드크럼+탭스크롤) 구조는 자유게시글(free-board.css)과 동일 패턴을 따름 */

/* ── 목록 래퍼 ── */
.ol-wrap {display:flex; flex-direction:column; min-height:100%; background:var(--snow);}

/* ── 헤더 ── */
.ol-head {position:sticky; top:0; z-index:20; background:var(--card);}

/* 검색 바 */
.ol-bar {display:flex; align-items:center; gap:14px; padding:17px 22px; border-bottom:1.92px solid var(--line);}
.ol-back {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:58px; height:58px;}
.ol-back img {width:32px; height:32px;}
.ol-search {flex:1; display:flex; align-items:center; gap:16px; height:74px; padding:0 28px; background:var(--snow); border:1.92px solid var(--line); border-radius:42px;}
.ol-search img {width:31px; height:31px;}
.ol-search input {flex:1; min-width:0; border:0; background:transparent; font-size:25px; color:var(--ink);}
.ol-search input::placeholder {color:#6B7280;}

/* 브레드크럼 */
.ol-crumb {display:flex; align-items:center; gap:11px; padding:15px 27px 13px; border-bottom:1.92px solid var(--line); font-size:23px; font-weight:700; color:#6B7280;}
.ol-crumb img {width:25px; height:25px;}

/* 탭 (스크롤 + 좌우 화살표) */
.ol-tabswrap {position:relative;}
.ol-tabs {display:flex; gap:0; padding:0 22px; overflow-x:auto; scrollbar-width:none; border-bottom:3.84px solid var(--line);}
.ol-tabs::-webkit-scrollbar {display:none;}
.ol-tab {flex:0 0 auto; position:relative; padding:21px 20px; background:none; border:0; color:#94A3B8; font-size:25px; font-weight:500; white-space:nowrap; cursor:pointer;}
.ol-tab.on {color:var(--teal); font-weight:700;}
.ol-tab.on::after {content:''; position:absolute; left:0; right:0; bottom:-3.84px; height:3.84px; border-radius:3px 3px 0 0; background:var(--teal);}
.ol-tabarrow {position:absolute; top:0; bottom:3.84px; width:46px; z-index:5; display:flex; align-items:center; justify-content:center; border:0; cursor:pointer; padding:0;}
.ol-tabarrow img {width:16px; height:16px;}
.ol-tabarrow.prev {left:0; background:linear-gradient(to right, var(--card) 55%, transparent);}
.ol-tabarrow.next {right:0; background:linear-gradient(to left, var(--card) 55%, transparent);}

/* ── 게시판 설명 바 ── */
.ol-desc {display:flex; align-items:flex-start; gap:14px; padding:20px 26px; background:#F8FAFC; border-bottom:1.92px solid var(--line);}
.ol-desc-ic {flex:0 0 auto; width:30px; height:30px; margin-top:2px;}
.ol-desc p {margin:0; font-size:22px; font-weight:400; color:#475569; line-height:1.55;}

/* ── 필터 칩 (스크롤 + 좌우 화살표) ── */
.ol-filterswrap {position:relative; border-bottom:1.92px solid var(--line);}
.ol-filters {display:flex; gap:12px; padding:18px 26px; overflow-x:auto; scrollbar-width:none;}
.ol-filters::-webkit-scrollbar {display:none;}
.ol-filter {flex:0 0 auto; display:flex; align-items:center; gap:6px; padding:11px 22px; border:1.92px solid var(--line); border-radius:38px; background:var(--card); font-size:21px; font-weight:500; color:#475569; cursor:pointer; white-space:nowrap;}
.ol-filter.on {background:var(--teal); border-color:var(--teal); color:#fff; font-weight:700;}
.ol-filterarrow {position:absolute; top:0; bottom:0; width:44px; z-index:5; display:flex; align-items:center; justify-content:center; border:0; cursor:pointer; padding:0;}
.ol-filterarrow img {width:15px; height:15px;}
.ol-filterarrow.prev {left:0; background:linear-gradient(to right, var(--snow) 55%, transparent);}
.ol-filterarrow.next {right:0; background:linear-gradient(to left, var(--snow) 55%, transparent);}

/* ── 목록 헤더 (건수) ── */
.ol-lhead {display:flex; align-items:center; justify-content:space-between; padding:22px 26px 14px;}
.ol-lhead-count {font-size:24px; font-weight:600; color:#475569;}
.ol-lhead-count b {font-size:28px; font-weight:800; color:var(--teal);}

/* ── 토론 목록 ── */
.ol-list {display:flex; flex-direction:column; gap:0; padding:0 0 140px;}
.ol-empty {padding:64px 26px; text-align:center; font-size:22px; color:var(--sub); background:var(--card); border-top:1.92px solid var(--line);}
.ol-item {display:flex; flex-direction:column; gap:0; background:var(--card); border-top:1.92px solid var(--line); border-bottom:1.92px solid var(--line);}
.ol-item-link {display:flex; flex-direction:column; gap:8px; padding:26px 26px 18px; text-decoration:none; cursor:pointer;}

.ol-item-row1 {display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.ol-badge {display:inline-flex; align-items:center; gap:5px; padding:5px 16px; border-radius:38px; font-size:20px; font-weight:700; white-space:nowrap; background:#EFF6FF; color:#2563EB;}
.ol-badge.ol-new {background:#FEE2E2; color:#DC2626;}

.ol-item-title {font-size:26px; font-weight:600; color:var(--ink); line-height:1.4; word-break:keep-all;}
.ol-item-excerpt {margin:0; font-size:22px; font-weight:400; color:var(--sub); line-height:1.5; word-break:keep-all; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}

/* 미니 투표 위젯 (목록 카드 내부) */
.ol-poll-mini {padding:6px 26px 20px;}
.ol-poll-mini-bar {display:flex; width:100%; height:16px; border-radius:8px; overflow:hidden; background:var(--line); margin-bottom:10px;}
.ol-poll-mini-bar i {display:block; height:100%;}
.ol-poll-mini-stats {display:flex; align-items:center; justify-content:space-between; font-size:20px; font-weight:600; color:#475569; margin-bottom:14px;}
.ol-poll-mini-btns {display:flex; gap:12px;}
.ol-poll-btn {flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:18px 10px; border-radius:14px; font-size:21px; font-weight:700; cursor:pointer; white-space:nowrap;}
.ol-poll-btn.a {background:#2563EB; border:1.92px solid #2563EB; color:#fff;}
.ol-poll-btn.b {background:var(--card); border:1.92px solid var(--line); color:#475569;}
.ol-poll-btn.b.on {background:#DC2626; border-color:#DC2626; color:#fff;}
.ol-poll-btn.a:not(.on) {background:var(--card); border-color:var(--line); color:#475569;}
.ol-poll-btn.a.on {background:#2563EB; border-color:#2563EB; color:#fff;}

.ol-item-meta {display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:0 26px 22px; font-size:20px; font-weight:400; color:var(--sub);}
.ol-item-meta .dot {color:var(--mute);}

/* 다음 토론 대기 안내 */
.ol-waiting {display:flex; flex-direction:column; align-items:center; gap:14px; padding:64px 26px; color:var(--sub); font-size:22px;}
.ol-waiting-ic {font-size:36px; opacity:.5;}

/* ── 하단 탭바 고정 (목록) ── */
.ol-nav {position:fixed; left:50%; bottom:0; transform:translateX(-50%); z-index:40; width:720px; max-width:100%; display:flex; align-items:center; justify-content:space-between; padding:20px 40px; background:var(--card); border-top:1.85px solid var(--line);}
/* od-nav/ow-nav: od-bottom(입력 영역) 안에 중첩되는 경우 자체 fixed 지정 금지 — 부모가 이미 뷰포트에 고정되어 있음.
   자체 fixed를 주면 입력창과 같은 위치에 겹쳐 그려져 입력창이 가려짐 */
.od-nav {display:flex; align-items:center; justify-content:space-between; width:100%; padding:20px 40px; background:var(--card); border-top:1.85px solid var(--line);}
.ow-nav {position:fixed; left:50%; bottom:0; transform:translateX(-50%); z-index:40; width:720px; max-width:100%; display:flex; align-items:center; justify-content:space-between; padding:20px 40px; background:var(--card); border-top:1.85px solid var(--line);}
.ol-nav .tab, .od-nav .tab, .ow-nav .tab {display:flex; flex-direction:column; align-items:center; gap:5.8px; color:var(--sub); font-size:19.2px;}
.ol-nav .tab img, .od-nav .tab img, .ow-nav .tab img {width:42px; height:42px;}
.ol-nav .tab.on, .od-nav .tab.on, .ow-nav .tab.on {color:var(--teal);}
.ol-nav .tab-fab, .od-nav .tab-fab, .ow-nav .tab-fab {position:relative; align-self:stretch; width:96px;}
.ol-nav .tab-fab .fab, .od-nav .tab-fab .fab, .ow-nav .tab-fab .fab {position:absolute; left:50%; top:0; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; width:96px; height:96px; border-radius:50%; background:linear-gradient(135deg, #0D9488, #1E3A5F); border:5px solid var(--card); box-shadow:0 10px 24px rgba(13,148,136,0.4);}
.ol-nav .tab-fab .fab img, .od-nav .tab-fab .fab img, .ow-nav .tab-fab .fab img {width:48px; height:48px;}

/* =========================================================
   B-⑤ 상세 (od-*)
   ========================================================= */
.od-wrap {display:flex; flex-direction:column; min-height:100%; background:var(--snow);}

/* 헤더 (공유 아이콘 1개만, 더보기/신고 없음 — 운영자 게시물이라 개별 신고 대상 아님) */
.od-head {position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:0; height:88px; padding:0 22px; background:var(--card); border-bottom:1.92px solid var(--line);}
.od-back {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:58px; height:58px;}
.od-back img {width:32px; height:32px;}
.od-head-title {flex:1; font-size:28px; font-weight:700; color:var(--ink); text-align:center;}
.od-hspacer {flex:0 0 auto; width:58px; height:58px;}

/* 브레드크럼 */
.od-crumb {display:flex; align-items:center; gap:8px; padding:18px 26px 14px; font-size:21px; font-weight:500; color:var(--sub);}
.od-crumb img {width:20px; height:20px; opacity:.6;}
.od-crumb span {color:var(--mute);}

/* 본문 영역 — 하단 고정 od-bottom(입장 선택+입력+탭바, 다른 게시판보다 높음)에 가려지지 않도록 여유 있게 확보 */
.od-body {flex:1; padding:0 26px 400px; background:var(--card);}

/* 배지 + 제목 */
.od-badges {display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px;}
.od-badge {display:inline-flex; align-items:center; gap:5px; padding:5px 16px; border-radius:38px; font-size:20px; font-weight:700; white-space:nowrap; background:#EFF6FF; color:#2563EB;}
.od-badge.ongoing {background:#FFEDD5; color:#C2410C;}
.od-badge.topic {background:#DCFCE7; color:#15803D;}
.od-title {font-size:32px; font-weight:800; color:var(--ink); line-height:1.4; margin:0 0 16px; word-break:keep-all;}

/* 토론 메타 캡션 */
.od-meta {display:flex; flex-direction:column; gap:6px; padding:18px 0; border-top:1.92px solid var(--line); border-bottom:1.92px solid var(--line); margin-bottom:24px; font-size:21px; font-weight:500; color:var(--sub);}

/* 투표 위젯 */
.od-poll {padding:26px 24px; background:#1E293B; border-radius:18px; margin-bottom:28px;}
.od-poll-head {font-size:23px; font-weight:700; color:#F1F5F9; margin-bottom:16px;}
.od-poll-bar {display:flex; width:100%; height:20px; border-radius:10px; overflow:hidden; background:rgba(255,255,255,.12); margin-bottom:16px;}
.od-poll-bar i {display:block; height:100%;}
.od-poll-rows {display:flex; flex-direction:column; gap:10px; margin-bottom:12px;}
.od-poll-row {display:flex; align-items:center; gap:8px; font-size:21px; font-weight:500; color:#CBD5E1;}
.od-poll-row .dot {flex:0 0 auto; width:12px; height:12px; border-radius:50%;}
.od-poll-row .dot.a {background:#2563EB;}
.od-poll-row .dot.b {background:#DC2626;}
.od-poll-row b {color:#F1F5F9; font-weight:800;}
.od-poll-deadline {font-size:19px; color:#94A3B8; margin-bottom:20px;}
.od-poll-btns {display:flex; gap:14px;}
.od-poll-btn {flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:22px 10px; border-radius:14px; font-size:22px; font-weight:700; cursor:pointer; white-space:nowrap; border:1.92px solid transparent;}
.od-poll-btn.a {background:rgba(37,99,235,.18); color:#93C5FD; border-color:rgba(37,99,235,.4);}
.od-poll-btn.a.on {background:#2563EB; color:#fff; border-color:#2563EB;}
.od-poll-btn.b {background:rgba(255,255,255,.08); color:#CBD5E1; border-color:rgba(255,255,255,.18);}
.od-poll-btn.b.on {background:#DC2626; color:#fff; border-color:#DC2626;}

/* 본문 내용 */
.od-content {font-size:24px; font-weight:400; color:var(--ink); line-height:1.75; margin-bottom:28px; white-space:pre-wrap; word-break:keep-all;}

/* 태그 */
.od-tags {display:flex; flex-wrap:wrap; gap:12px; padding-bottom:24px;}
.od-tag {padding:9px 20px; border:1.92px solid var(--line); border-radius:38px; font-size:21px; font-weight:500; color:#475569; background:var(--snow); cursor:pointer;}

/* 의견 섹션 */
.od-opsec {padding:8px 0;}
.od-op-head {display:flex; align-items:center; justify-content:space-between; padding:20px 0 18px; border-top:3.84px solid var(--line); flex-wrap:wrap; gap:12px;}
.od-op-head h2 {margin:0; font-size:27px; font-weight:700; color:var(--ink);}
.od-op-seg {display:flex; gap:8px; padding:4px; background:var(--snow); border-radius:38px;}
.od-seg {padding:9px 18px; border-radius:32px; background:none; border:0; font-size:20px; font-weight:600; color:#475569; cursor:pointer;}
.od-seg.on {background:var(--teal); color:#fff;}
.od-op-empty {display:flex; flex-direction:column; align-items:center; gap:10px; padding:48px 0; color:var(--sub); font-size:22px;}
.od-op-list {display:flex; flex-direction:column; gap:0;}
.od-op-item {padding:22px 0; border-bottom:1.92px solid var(--line);}
.od-op-side {display:inline-flex; align-items:center; gap:6px; padding:4px 14px; border-radius:30px; font-size:19px; font-weight:700; margin-bottom:12px;}
.od-op-side.a {background:#EFF6FF; color:#2563EB;}
.od-op-side.b {background:#FEF2F2; color:#DC2626;}
.od-op-row {display:flex; gap:18px;}
.od-op-av {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:54px; height:54px; border-radius:50%; font-size:22px; font-weight:700; color:#fff;}
.od-op-body {flex:1; min-width:0;}
.od-op-top {display:flex; align-items:center; gap:12px; margin-bottom:8px;}
.od-op-nm {font-size:23px; font-weight:700; color:var(--ink);}
.od-op-dt {font-size:20px; font-weight:400; color:var(--sub);}
.od-op-text {font-size:23px; font-weight:400; color:var(--ink); line-height:1.6; margin:0 0 12px; word-break:keep-all;}
.od-op-acts {display:flex; gap:20px;}
.od-op-act {display:flex; align-items:center; gap:6px; font-size:20px; font-weight:500; color:var(--sub); background:none; border:0; cursor:pointer; padding:0;}
.od-op-act img {width:22px; height:22px;}

/* 하단 고정 (입장 선택 + 의견 입력 + 탭바) */
.od-bottom {position:fixed; left:50%; bottom:0; transform:translateX(-50%); width:720px; max-width:100%; z-index:30; background:var(--card); border-top:1.92px solid var(--line);}
.od-stance {display:flex; gap:10px; padding:14px 22px 0;}
.od-stance-btn {flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:10px 8px; border-radius:30px; border:1.92px solid var(--line); background:var(--snow); font-size:19px; font-weight:600; color:#475569; cursor:pointer; white-space:nowrap;}
.od-stance-btn.a.on {background:#EFF6FF; border-color:#2563EB; color:#2563EB;}
.od-stance-btn.b.on {background:#FEF2F2; border-color:#DC2626; color:#DC2626;}
.od-op-write {padding:14px 22px 28px;}
.od-op-input {width:100%; height:64px; padding:0 22px; border:1.92px solid var(--line); border-radius:38px; background:var(--snow); font-size:22px; color:var(--ink); box-sizing:border-box;}
.od-op-input::placeholder {color:var(--sub);}
.od-op-foot {display:flex; align-items:center; justify-content:space-between; margin-top:10px;}
.od-op-count {font-size:19px; color:var(--mute);}
.od-op-submit {padding:0 26px; height:56px; border-radius:32px; background:var(--teal); border:0; font-size:21px; font-weight:700; color:#fff; cursor:pointer; white-space:nowrap;}

/* 삭제 확인 팝업 (window.confirm 대체) */
.od-confirm {position:fixed; left:50%; bottom:0; transform:translateX(-50%); z-index:60; width:720px; max-width:100%; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:38px; background:rgba(0,0,0,.5);}
.od-confirm-card {width:100%; max-width:538px; overflow:hidden; border-radius:28px; background:var(--card); box-shadow:0 15px 77px rgba(0,0,0,.2);}
.od-confirm-head {display:flex; flex-direction:column; align-items:center; gap:8px; padding:35px 35px 23px;}
.od-confirm-head h3 {margin:0; font-size:28px; font-weight:800; color:var(--ink); text-align:center;}
.od-confirm-head p {margin:0; font-size:22px; color:var(--sub); text-align:center;}
.od-confirm-foot {display:flex; gap:12px; padding:0 27px 30px;}
.od-confirm-btn {flex:1; display:flex; align-items:center; justify-content:center; padding:22px 0; border-radius:14px; font-size:23px; font-weight:700; border:0; cursor:pointer;}
.od-confirm-btn.ghost {border:1.92px solid var(--line); background:none; color:var(--body);}
.od-confirm-btn.danger {background:#DC2626; color:#fff;}

/* =========================================================
   B-⑥ 작성 (ow-*) — 운영자 전용
   ========================================================= */
.ow-wrap {display:flex; flex-direction:column; min-height:100%; background:var(--snow);}

/* 헤더 */
.ow-head {position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:0; height:88px; padding:0 22px; background:var(--card); border-bottom:1.92px solid var(--line);}
.ow-back {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:58px; height:58px;}
.ow-back img {width:32px; height:32px;}
.ow-head-title {flex:1; font-size:28px; font-weight:700; color:var(--ink); text-align:center;}
.ow-hspacer {flex:0 0 auto; width:58px; height:58px;}

/* 운영자 전용 안내 배너 */
.ow-banner {padding:16px 26px; background:#F1F5F9; border-bottom:1.92px solid var(--line); font-size:21px; font-weight:600; color:#475569; text-align:center;}

/* 폼 본문 */
.ow-body {flex:1; padding:24px 0 200px;}
.ow-card {margin:0 22px 18px; padding:28px 26px 24px; background:var(--card); border:1.92px solid var(--line); border-radius:19px;}
.ow-label {display:flex; align-items:center; gap:8px; margin-bottom:16px; font-size:24px; font-weight:700; color:var(--ink);}
.ow-label i {color:#EF4444; font-style:normal; font-size:26px;}
.ow-label small {font-size:20px; font-weight:400; color:var(--sub);}

/* 카테고리 드롭다운 */
.ow-dd {position:relative;}
.ow-select {width:100%; height:72px; padding:0 22px; border:1.92px solid var(--line); border-radius:14px; background:var(--snow); font-size:24px; color:var(--ink); display:flex; align-items:center; justify-content:space-between; box-sizing:border-box; cursor:pointer;}
.ow-select .lbl {overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ow-select img {width:20px; height:20px; flex:0 0 auto; transition:transform .2s ease;}
.ow-dd.open .ow-select img {transform:rotate(180deg);}
.ow-dd-menu {position:absolute; top:78px; left:0; right:0; z-index:30; max-height:0; overflow:hidden; opacity:0; background:var(--card); border-radius:14px; box-shadow:0 18px 44px rgba(15,23,42,.18); transition:opacity .15s ease;}
.ow-dd.open .ow-dd-menu {max-height:320px; overflow-y:auto; opacity:1; padding:8px; border:1.92px solid var(--line);}
.ow-dd-menu li {padding:14px 16px; border-radius:10px; font-size:22px; color:var(--ink); cursor:pointer; white-space:nowrap;}
.ow-dd-menu li.on {background:var(--mint); color:var(--teal); font-weight:700;}

/* input */
.ow-input {width:100%; height:72px; padding:0 22px; border:1.92px solid var(--line); border-radius:14px; background:var(--snow); font-size:24px; color:var(--ink); box-sizing:border-box;}
.ow-input::placeholder {color:var(--sub);}
.ow-count {text-align:right; margin-top:8px; font-size:20px; color:var(--sub);}

/* 찬반 선택지 입력 */
.ow-opt-field {display:block; margin-bottom:16px;}
.ow-opt-field:last-child {margin-bottom:0;}
.ow-opt-label {display:inline-flex; align-items:center; gap:6px; margin-bottom:10px; font-size:21px; font-weight:600; color:#475569;}
.ow-opt-label.a {color:#2563EB;}
.ow-opt-label.b {color:#DC2626;}

/* 안내 콜아웃 (파란 정보 박스) */
.ow-notice {display:flex; align-items:flex-start; gap:10px; padding:16px 18px; background:#E0F2FE; border:1.92px solid #BAE6FD; border-radius:12px; margin-bottom:16px;}
.ow-notice p {margin:0; font-size:20px; font-weight:500; color:#0369A1; line-height:1.5;}

/* textarea */
.ow-textarea {width:100%; min-height:220px; padding:20px 22px; border:1.92px solid var(--line); border-radius:14px; background:var(--snow); font-size:24px; color:var(--ink); line-height:1.6; resize:vertical; box-sizing:border-box;}
.ow-textarea::placeholder {color:var(--sub);}

/* 토론 기간 (날짜 2열) */
.ow-date-grid {display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.ow-date-field {display:flex; flex-direction:column; gap:10px;}
.ow-date-field span {font-size:20px; font-weight:600; color:#475569;}
.ow-date-input {width:100%; height:68px; padding:0 18px; border:1.92px solid var(--line); border-radius:14px; background:var(--snow); font-size:22px; color:var(--ink); box-sizing:border-box;}

/* 제출 버튼 */
.ow-submit {display:block; width:calc(100% - 44px); margin:0 22px; height:88px; border-radius:16px; background:var(--teal); border:0; font-size:28px; font-weight:700; color:#fff; cursor:pointer; letter-spacing:.5px;}
.ow-submit:active {background:var(--teal-2);}

/* ── 다크모드 ── */
.churchro.dark-mode .ol-desc {background:#16202E;}
.churchro.dark-mode .ow-select,
.churchro.dark-mode .ow-input,
.churchro.dark-mode .ow-textarea,
.churchro.dark-mode .ow-date-input {background:var(--snow); color:var(--ink);}
.churchro.dark-mode .ow-notice {background:#0C2A3A; border-color:#0369A1;}
.churchro.dark-mode .ow-notice p {color:#7DD3FC;}
.churchro.dark-mode .ow-banner {background:#16202E;}