/* ═══════════════════════════════════════════════════════════════
   SOKCHOPEAK · board_view.css
   게시글 뷰 (fv-*) + 댓글 (vc-*) 통합 스타일
   Palette: Obsidian #0a0d12 · Cyan #00c6ff · Food-Orange #ff6b35
═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&family=Noto+Serif+KR:wght@400;700&display=swap');

/* ══════════════════════════════════════
   1. 전역 변수 & 리셋
══════════════════════════════════════ */
:root {
  --fv-bg:       #0a0d12;
  --fv-bg2:      #0d1118;
  --fv-surf:     #131a24;
  --fv-surf2:    #1a2333;
  --fv-border:   rgba(255,255,255,.07);
  --fv-border2:  rgba(255,255,255,.13);
  --fv-text:     #dde8f5;
  --fv-body:     #b0c2d8;
  --fv-muted:    #556070;
  --fv-cyan:     #00c6ff;
  --fv-food:     #ff6b35;
  --fv-green:    #4ade80;
  --fv-r:        12px;
  --fv-r-sm:     8px;
  --fv-max:      1180px;
  --fv-ko:       'Noto Sans KR', sans-serif;
  --fv-serif:    'Noto Serif KR', serif;
}

.fv-page *, .fv-page *::before, .fv-page *::after,
.vc-wrap *, .vc-wrap *::before, .vc-wrap *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.fv-page a { text-decoration: none; color: inherit; }
.fv-page button { background: none; border: none; cursor: pointer; font: inherit; color: inherit; }
.fv-page svg, .vc-wrap svg { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.fv-page ul, .fv-page ol { list-style: none; }

/* ══════════════════════════════════════
   2. 페이지 베이스
══════════════════════════════════════ */
.fv-page {
  background: var(--fv-bg);
  color: var(--fv-text);
  font-family: var(--fv-ko);
  min-height: 100vh;
}

/* ══════════════════════════════════════
   3. 읽기 진행 바
══════════════════════════════════════ */
.fv-progress-bar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--fv-cyan), var(--fv-food));
  z-index: 9999;
  transition: width .1s linear;
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 10px rgba(0,198,255,.5);
}

/* ══════════════════════════════════════
   4. 관리 버튼 바
══════════════════════════════════════ */
.fv-admin-bar {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 8px;
  max-width: var(--fv-max); margin: 0 auto;
  padding: 16px 24px 0;
  position: absolute;right:0; z-index: 10;
}
.fv-admin-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .78rem; font-weight: 600; color: var(--fv-muted);
  background: var(--fv-surf); border: 1px solid var(--fv-border);
  padding: 7px 14px; border-radius: 100px;
  transition: color .2s, border-color .2s; cursor: pointer;
}
.fv-admin-btn:hover { color: var(--fv-text); border-color: var(--fv-border2); }
.fv-admin-btn svg { stroke: currentColor; }

.fv-admin-more { position: relative; display: none;}
.fv-more-menu {
  display: none; position: absolute; top: calc(100% + 6px); right: 0;
  background: var(--fv-surf2); border: 1px solid var(--fv-border2);
  border-radius: var(--fv-r); overflow: hidden; z-index: 200;
  min-width: 100px; box-shadow: 0 8px 24px rgba(0,0,0,.55);
  list-style: none;
}
.fv-more-menu.is-open { display: block; }
.fv-more-menu li a {
  display: block; padding: 10px 16px;
  font-size: .82rem; color: var(--fv-text);
  transition: background .15s;
}
.fv-more-menu li a:hover { background: rgba(255,255,255,.06); }

/* ══════════════════════════════════════
   5. 히어로
══════════════════════════════════════ */
.fv-hero {
  position: relative; overflow: hidden;
  min-height: 460px;
  display: flex; align-items: flex-end;
}
.fv-hero--no-img {
  min-height: 260px;
  background: linear-gradient(135deg, #0d1520, #0a1a2e);
  border-bottom: 1px solid var(--fv-border);
}

.fv-hero__img-wrap { position: absolute; inset: 0; }
.fv-hero__img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
  transition: transform 8s ease;
}
.fv-hero:hover .fv-hero__img { transform: scale(1.03); }

.fv-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(10,13,18,.15) 0%,
    rgba(10,13,18,.55) 40%,
    rgba(10,13,18,.93) 100%
  );
}

.fv-hero__content {
  position: relative; z-index: 2;
  max-width: var(--fv-max); width: 100%;
  margin: 0 auto;
  padding: 48px 24px 52px;
}

.fv-hero__meta-top {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
}
.fv-cat-badge {
  display: inline-block;
  background: var(--fv-food); color: #fff;
  font-size: .68rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 100px;
}
.fv-read-time {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .72rem; color: rgba(255,255,255,.5);
}
.fv-read-time svg { stroke: rgba(255,255,255,.5); }

.fv-hero__title {
  font-size: clamp(1.5rem, 4vw, 2.8rem);
  font-weight: 900; line-height: 1.22;
  letter-spacing: -.03em; color: #fff;
  margin-bottom: 24px;
  text-shadow: 0 2px 14px rgba(0,0,0,.5);
}

.fv-hero__author { display: flex; align-items: center; gap: 12px; }
.fv-author-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  object-fit: cover; border: 2px solid rgba(255,255,255,.2); flex-shrink: 0;
}
.fv-author-avatar--txt {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--fv-cyan), var(--fv-food));
  font-size: .9rem; font-weight: 800; color: #fff;
}
.fv-author-info strong { display: block; font-size: .88rem; color: #fff; font-weight: 700; }
.fv-author-info span  { font-size: .72rem; color: rgba(255,255,255,.5); }
.fv-dot { margin: 0 4px; opacity: .4; }

/* ══════════════════════════════════════
   6. 레이아웃 (사이드바 + 메인)
══════════════════════════════════════ */
.fv-layout {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 40px;
  max-width: var(--fv-max); margin: 0 auto;
  padding: 40px 24px 80px;
  align-items: start;
}

/* ── 사이드바 ── */
.fv-sidebar { position: relative; }
.fv-sidebar__inner { display: flex; flex-direction: column; gap: 14px; }
.fv-sidebar--stuck { position: sticky; top: 24px; }

.fv-sidebar__card {
  background: var(--fv-surf); border: 1px solid var(--fv-border);
  border-radius: var(--fv-r); padding: 18px 20px;
}
.fv-sidebar__card-label {
  font-size: .63rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fv-muted); margin-bottom: 14px;
}

.fv-quick-info { display: flex; flex-direction: column; gap: 10px; }
.fv-quick-info li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: .78rem; color: var(--fv-body); line-height: 1.4;
}
.fv-quick-info svg { stroke: var(--fv-cyan); margin-top: 1px; }

.fv-share-btns { display: flex; flex-direction: column; gap: 8px; }
.fv-share-btn {
  display: flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 600;
  background: var(--fv-surf2); border: 1px solid var(--fv-border);
  border-radius: var(--fv-r-sm); padding: 9px 14px;
  cursor: pointer; transition: border-color .2s;
}
.fv-share-btn:hover { border-color: var(--fv-border2); }
.fv-share-btn--kakao { color: #3a1e00; background: #fee500; border-color: #fee500; }
.fv-share-btn--kakao:hover { background: #fdd300; border-color: #fdd300; }
.fv-share-btn--copy { color: var(--fv-text); }
.fv-share-btn svg { stroke: currentColor; }

.fv-good-btn {
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px;
  background: rgba(0,198,255,.07); border: 1px solid rgba(0,198,255,.18);
  border-radius: var(--fv-r); padding: 20px;
  color: var(--fv-cyan); font-weight: 800; font-size: 1.4rem;
  transition: background .2s, box-shadow .2s; text-decoration: none;
}
.fv-good-btn small { font-size: .68rem; font-weight: 400; color: var(--fv-muted); }
.fv-good-btn:hover { background: rgba(0,198,255,.13); box-shadow: 0 4px 20px rgba(0,198,255,.2); }

/* ── 메인 ── */
.fv-main { min-width: 0; }

/* ══════════════════════════════════════
   7. 본문 타이포그래피
══════════════════════════════════════ */
.fv-content {
  font-family: var(--fv-serif);
  font-size: 1.05rem; line-height: 1.9;
  color: var(--fv-body);
  margin-bottom: 48px;
}
.fv-content img {
  max-width: 100%; height: auto; display: block;
  border-radius: var(--fv-r); margin: 24px 0;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
.fv-content p { margin-bottom: 1.4em; }
.fv-content h2, .fv-content h3 {
  font-family: var(--fv-ko); font-weight: 800; color: #fff;
  margin: 2em 0 .8em; letter-spacing: -.02em;
}
.fv-content h2 { font-size: 1.35rem; }
.fv-content h3 { font-size: 1.12rem; }
.fv-content a { color: var(--fv-cyan); border-bottom: 1px solid rgba(0,198,255,.3); }
.fv-content a:hover { border-color: var(--fv-cyan); }
.fv-content blockquote {
  border-left: 3px solid var(--fv-food);
  margin: 1.5em 0; padding: 12px 20px;
  background: rgba(255,107,53,.05); border-radius: 0 var(--fv-r) var(--fv-r) 0;
  font-style: italic; color: var(--fv-body);
}
.fv-content table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-family: var(--fv-ko); }
.fv-content th, .fv-content td {
  padding: 10px 14px; border: 1px solid var(--fv-border2); font-size: .88rem;
}
.fv-content th { background: var(--fv-surf2); color: #fff; font-weight: 700; }

/* ══════════════════════════════════════
   8. 공통 섹션 헤더
══════════════════════════════════════ */
.fv-section-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 20px; padding-bottom: 14px;
  border-bottom: 1px solid var(--fv-border);
}
.fv-section-header svg { stroke: var(--fv-cyan); }
.fv-section-header h2 {
  font-size: .95rem; font-weight: 800; color: #fff;
  letter-spacing: -.01em; margin: 0;
}
.fv-comment-count { font-size: .8rem; font-weight: 400; color: var(--fv-muted); margin-left: 6px; }

/* ══════════════════════════════════════
   9. 지도 섹션
══════════════════════════════════════ */
.fv-map-section { margin-bottom: 44px; }
.fv-map-addr {
  display: flex; align-items: center; gap: 6px;
  font-size: .82rem; color: var(--fv-muted); margin-bottom: 14px;
}
.fv-map-addr svg { stroke: var(--fv-food); }
.fv-map-wrap {
  border-radius: var(--fv-r); overflow: hidden;
  border: 1px solid var(--fv-border); margin-bottom: 14px;
}
#map { width: 100%; height: 280px; display: block; }

.fv-navi-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.fv-navi-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .8rem; font-weight: 700; font-family: var(--fv-ko);
  padding: 9px 18px; border-radius: 100px; cursor: pointer;
  border: 1px solid var(--fv-border2); background: var(--fv-surf);
  color: var(--fv-text); transition: background .2s;
}
.fv-navi-btn:hover { background: var(--fv-surf2); }
.fv-navi-btn--naver     { border-color: rgba(3,199,90,.4);  color: #03c75a; }
.fv-navi-btn--kakao-navi{ border-color: rgba(254,229,0,.4); color: #fee500; }
.fv-navi-btn--kakao-map { border-color: rgba(254,229,0,.4); color: #fee500; }

/* ══════════════════════════════════════
   10. 태그
══════════════════════════════════════ */
.fv-tags-section { margin-bottom: 44px; }
.fv-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.fv-tags li a {
  display: inline-block;
  font-size: .78rem; font-weight: 600; color: var(--fv-muted);
  background: var(--fv-surf); border: 1px solid var(--fv-border);
  padding: 6px 14px; border-radius: 100px;
  transition: color .2s, border-color .2s;
}
.fv-tags li a:hover { color: var(--fv-cyan); border-color: rgba(0,198,255,.38); }

/* ══════════════════════════════════════
   11. 관련글
══════════════════════════════════════ */
.fv-related-section { margin-bottom: 44px; }
.fv-related-grid {
  display: grid; grid-template-columns: repeat(2,1fr); gap: 14px;
}
.fv-related-card {
  display: flex; flex-direction: column;
  background: var(--fv-surf); border: 1px solid var(--fv-border);
  border-radius: var(--fv-r); overflow: hidden;
  transition: border-color .2s, transform .25s;
}
.fv-related-card:hover { border-color: rgba(255,107,53,.25); transform: translateY(-3px); }
.fv-related-card__img { aspect-ratio: 16/10; overflow: hidden; background: #111820; }
.fv-related-card__img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s;
}
.fv-related-card:hover .fv-related-card__img img { transform: scale(1.06); }
.fv-related-card__body { padding: 14px; }
.fv-related-card__cat {
  display: inline-block; font-size: .62rem; font-weight: 800;
  color: var(--fv-food); letter-spacing: .06em; margin-bottom: 6px;
}
.fv-related-card__title {
  font-size: .85rem; font-weight: 700; color: var(--fv-text);
  line-height: 1.4; margin-bottom: 8px;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.fv-related-card__date { font-size: .7rem; color: var(--fv-muted); }

/* ══════════════════════════════════════
   12. 응원 섹션
══════════════════════════════════════ */
.fv-cheer-section { margin-bottom: 44px; }
.fv-cheer-box {
  display: flex; align-items: center; gap: 20px;
  background: linear-gradient(135deg, var(--fv-surf), rgba(255,107,53,.06));
  border: 1px solid rgba(255,107,53,.18);
  border-radius: 20px; padding: 26px 30px; flex-wrap: wrap;
}
.fv-cheer-box__avatar {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  overflow: hidden; border: 2px solid rgba(255,255,255,.12);
}
.fv-cheer-box__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fv-cheer-box__avatar-txt {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--fv-cyan), var(--fv-food));
  font-size: 1.1rem; font-weight: 800; color: #fff;
}
.fv-cheer-box__msg { flex: 1; font-size: .88rem; color: var(--fv-body); line-height: 1.6; min-width: 160px; }
.fv-cheer-box__msg strong { color: #fff; }
.fv-cheer-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, var(--fv-food), #e04a16);
  color: #fff; font-size: .88rem; font-weight: 800; font-family: var(--fv-ko);
  padding: 12px 24px; border-radius: 100px;
  box-shadow: 0 4px 20px rgba(255,107,53,.35);
  transition: transform .2s, box-shadow .2s; text-decoration: none;
}
.fv-cheer-btn svg { stroke: #fff; }
.fv-cheer-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(255,107,53,.5); }

/* ══════════════════════════════════════
   13. 첨부파일
══════════════════════════════════════ */
.fv-files-section { margin-bottom: 44px; }
.fv-files { display: flex; flex-direction: column; gap: 8px; }
.fv-file-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--fv-surf); border: 1px solid var(--fv-border);
  border-radius: var(--fv-r); padding: 14px 18px;
  transition: border-color .2s; text-decoration: none;
}
.fv-file-item svg { stroke: var(--fv-cyan); }
.fv-file-item:hover { border-color: var(--fv-border2); }
.fv-file-info strong { display: block; font-size: .85rem; color: var(--fv-text); margin-bottom: 2px; }
.fv-file-info span { font-size: .72rem; color: var(--fv-muted); }

/* ══════════════════════════════════════
   14. 이전/다음글
══════════════════════════════════════ */
.fv-nav-posts {
  display: flex; flex-direction: column;
  border: 1px solid var(--fv-border); border-radius: var(--fv-r);
  overflow: hidden; margin-bottom: 44px;
}
.fv-nav-post {
  display: grid; grid-template-columns: 72px 1fr auto;
  align-items: center; gap: 14px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--fv-border);
  transition: background .15s; text-decoration: none;
}
.fv-nav-post:last-child { border-bottom: none; }
.fv-nav-post:hover { background: var(--fv-surf); }
.fv-nav-post__dir {
  display: flex; align-items: center; gap: 4px;
  font-size: .7rem; font-weight: 700; color: var(--fv-muted); white-space: nowrap;
}
.fv-nav-post__dir svg { stroke: var(--fv-muted); }
.fv-nav-post__title {
  font-size: .87rem; color: var(--fv-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fv-nav-post__date { font-size: .7rem; color: var(--fv-muted); white-space: nowrap; }

/* ══════════════════════════════════════
   15. 댓글 섹션 래퍼 (view.skin.php)
══════════════════════════════════════ */
.fv-comments-section { }

/* ══════════════════════════════════════
   16. 댓글 (vc-*) — view_comment.skin.php
══════════════════════════════════════ */
.vc-wrap {
  font-family: var(--fv-ko);
  color: var(--fv-text);
}

/* 목록 래퍼 */
.vc-list-wrap {
  border: 1px solid var(--fv-border);
  border-radius: var(--fv-r);
  overflow: hidden;
  margin-bottom: 2px;
}

.vc-list { list-style: none; }

/* 댓글 아이템 */
.vc-item {
  position: relative;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--fv-border);
  transition: background .15s;
  flex-wrap: wrap;
}
.vc-item:last-child { border-bottom: none; }
.vc-item:hover { background: rgba(255,255,255,.02); }
.vc-item--reply {
  background: rgba(0,198,255,.025);
  border-left: 3px solid rgba(0,198,255,.2);
}

.vc-reply-icon {
  position: absolute; left: 8px; top: 24px;
  opacity: .45;
}
.vc-reply-icon svg { stroke: var(--fv-cyan); }

/* 아바타 */
.vc-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  object-fit: cover; border: 2px solid rgba(255,255,255,.1);
}
.vc-avatar--txt {
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--fv-cyan), var(--fv-food));
}

/* 본문 */
.vc-item__body { flex: 1; min-width: 0; }
.vc-item__meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.vc-nick { font-size: .84rem; font-weight: 700; color: var(--fv-text); }
.vc-nick--member { color: var(--fv-cyan); }
.vc-nick a { color: inherit; text-decoration: none; }
.vc-nick a:hover { text-decoration: underline; }
.vc-date { font-size: .7rem; color: var(--fv-muted); }
.vc-ip { font-size: .66rem; color: var(--fv-muted); font-family: monospace; }

.vc-item__content {
  font-size: .9rem; color: var(--fv-body); line-height: 1.72;
  word-break: break-word; margin-bottom: 10px;
}
.vc-item__content p { margin: 0; }
.vc-item__content img { max-width: 100%; border-radius: var(--fv-r-sm); margin: 6px 0; }

.vc-secret-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .7rem; color: var(--fv-muted);
  background: rgba(255,255,255,.05); border: 1px solid var(--fv-border2);
  padding: 3px 10px; border-radius: 100px; margin-bottom: 6px;
}
.vc-secret-badge svg { stroke: var(--fv-muted); }

/* 액션 버튼 */
.vc-item__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.vc-action-btn {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .72rem; color: var(--fv-muted);
  background: none; border: none; cursor: pointer; padding: 0;
  transition: color .18s; text-decoration: none;
}
.vc-action-btn svg { stroke: currentColor; }
.vc-action-btn:hover { color: var(--fv-cyan); }
.vc-action-btn--del:hover { color: #ff4444; }

/* 인라인 폼 자리 */
.vc-inline-form { display: none; width: 100%; }
.bo_vc_w { display: none; }
.vc-save-textarea { display: none; }

/* 빈 댓글 */
.vc-empty {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 52px 24px; color: var(--fv-muted); text-align: center;
  border: 1px solid var(--fv-border); border-radius: var(--fv-r);
  margin-bottom: 2px;
}
.vc-empty svg { stroke: var(--fv-muted); opacity: .35; }
.vc-empty p { font-size: .88rem; }

/* ── 댓글 입력 폼 ── */
.vc-form-wrap {
  background: var(--fv-surf);
  border: 1px solid var(--fv-border);
  border-radius: var(--fv-r);
  padding: 24px;
  margin-top: 10px;
}

/* 인라인 답글/수정으로 이동된 폼 */
.vc-inline-form .vc-form-wrap {
  margin-top: 12px; border-radius: var(--fv-r-sm);
}

.vc-form-author {
  display: flex; align-items: center; gap: 10px; margin-bottom: 18px;
}
.vc-form-author__img {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  overflow: hidden; border: 2px solid rgba(255,255,255,.1);
  display: block;
}
.vc-form-author__img--txt {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--fv-cyan), var(--fv-food));
  font-size: .78rem; font-weight: 800; color: #fff;
}
.vc-form-author__name { font-size: .82rem; font-weight: 700; color: var(--fv-text); }

/* 비회원 */
.vc-guest-row { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.vc-input {
  flex: 1; min-width: 140px;
  background: var(--fv-surf2); border: 1px solid var(--fv-border2);
  border-radius: var(--fv-r-sm); color: var(--fv-text);
  font-size: .85rem; font-family: var(--fv-ko);
  padding: 10px 14px; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.vc-input:focus { border-color: rgba(0,198,255,.4); box-shadow: 0 0 0 3px rgba(0,198,255,.09); }
.vc-input::placeholder { color: var(--fv-muted); }

/* 글자수 */
.vc-charcount { font-size: .7rem; color: var(--fv-muted); text-align: right; margin-bottom: 6px; }
#char_count { color: var(--fv-cyan); font-weight: 700; }

/* 텍스트에리어 */
.vc-textarea-wrap { margin-bottom: 14px; }
.vc-textarea {
  width: 100%; min-height: 110px;
  background: var(--fv-surf2); border: 1px solid var(--fv-border2);
  border-radius: var(--fv-r-sm); color: var(--fv-text);
  font-size: .9rem; line-height: 1.65; font-family: var(--fv-ko);
  padding: 14px 16px; resize: vertical; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.vc-textarea:focus {
  border-color: rgba(0,198,255,.38);
  box-shadow: 0 0 0 3px rgba(0,198,255,.08);
}
.vc-textarea::placeholder { color: var(--fv-muted); }

/* 캡차 */
.vc-captcha { margin-bottom: 14px; }

/* 하단 행 */
.vc-form-footer {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}

/* 비밀댓글 토글 */
.vc-secret-toggle { display: inline-flex; align-items: center; cursor: pointer; }
.vc-secret-toggle input[type="checkbox"] { display: none; }
.vc-secret-toggle__pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .78rem; color: var(--fv-muted);
  background: var(--fv-surf2); border: 1px solid var(--fv-border2);
  padding: 7px 14px; border-radius: 100px;
  transition: border-color .2s, color .2s, background .2s;
  user-select: none;
}
.vc-secret-toggle__pill svg { stroke: currentColor; }
.vc-secret-toggle input:checked + .vc-secret-toggle__pill {
  border-color: rgba(0,198,255,.4); color: var(--fv-cyan);
  background: rgba(0,198,255,.08);
}

/* 등록 버튼 */
.vc-submit-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, var(--fv-food), #e04a16);
  color: #fff; font-size: .88rem; font-weight: 800; font-family: var(--fv-ko);
  padding: 11px 24px; border-radius: 100px; border: none; cursor: pointer;
  box-shadow: 0 4px 18px rgba(255,107,53,.35);
  transition: transform .2s, box-shadow .2s;
}
.vc-submit-btn svg { stroke: #fff; }
.vc-submit-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(255,107,53,.5); }
.vc-submit-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ══════════════════════════════════════
   17. 반응형
══════════════════════════════════════ */
@media (max-width: 1024px) {
  .fv-layout { grid-template-columns: 1fr; gap: 0; padding: 0 20px 60px; }
  .fv-sidebar { display: none; }
  .fv-main { padding-top: 28px; }
  .fv-hero { min-height: 360px; }
}
@media (max-width: 680px) {
  .fv-hero { min-height: 280px; }
  .fv-hero__content { padding: 28px 16px 32px; }
  .fv-hero__title { font-size: 1.3rem; }
  .fv-layout { padding: 0 14px 48px; }
  .fv-related-grid { grid-template-columns: 1fr; }
  .fv-cheer-box { flex-direction: column; text-align: center; }
  .fv-cheer-btn { width: 100%; justify-content: center; }
  .fv-nav-post { grid-template-columns: 60px 1fr; }
  .fv-nav-post__date { display: none; }
  .fv-navi-btns { flex-direction: column; }
  .fv-navi-btn { justify-content: center; }
  .fv-admin-bar { padding: 12px 14px 0; }
  /* 댓글 */
  .vc-form-footer { flex-direction: column; align-items: stretch; }
  .vc-submit-btn { justify-content: center; }
  .vc-guest-row { flex-direction: column; }
  .vc-item { padding: 16px 14px; }
  .vc-form-wrap { padding: 16px; }
}

/* ══════════════════════════════════════
   18. 인쇄
══════════════════════════════════════ */
@media print {
  .fv-admin-bar, .fv-sidebar, .fv-progress-bar,
  .fv-navi-btns, .fv-cheer-section, .fv-nav-posts,
  .vc-form-wrap, .vc-item__actions { display: none !important; }
  .fv-layout { display: block; }
  .fv-content { color: #111; }
  .vc-item { border-color: #ddd; }
  .vc-nick, .vc-item__content { color: #111; }
}