/* ============================================================
   templates/board_post_youtube_v1/view.css — 유튜브형 게시판 글 상세
   board_post_v1/view.css와 색상 토큰은 동일하게(사이트 전체 통일감), 다른 점은
   EDIT모드 관련 스타일(.mod/.slot 등)이 전혀 필요 없다는 것뿐.
   ============================================================ */
:root{
  --navy:#1f3760; --blue:#5b8fd6; --sky:#dbe8f8; --bg:#f4f2ed; --ink:#1b2b4b; --sub:#6b7690; --line:#e4e0d6; --red:#e8492a;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Pretendard,'Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic',sans-serif;line-height:1.7}
a{color:var(--blue)}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

.topbar{background:#fff;border-bottom:1px solid var(--line);padding:16px 0}
.topbar .wrap{display:flex;align-items:center;gap:12px}
.topbar .brand{font-weight:800;color:var(--navy);text-decoration:none}
.btn{border:0;border-radius:999px;padding:9px 18px;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit}
.btn-ghost{background:#fff;color:var(--navy);border:1px solid var(--line)}

.editbar{background:#1a1a1a;color:#fff;font-size:13px;padding:8px 0}
.editbar .wrap{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.editbar a{color:#ffb4a4;text-decoration:underline;cursor:pointer}

.page-wrap{padding-top:36px;padding-bottom:60px}
.page-title{font-size:26px;font-weight:800;letter-spacing:-.6px;margin:0 0 8px}
.page-meta{color:var(--sub);font-size:13.5px;margin-bottom:20px}
.page-meta .sep{margin:0 6px;opacity:.5}

.video-box{position:relative;aspect-ratio:16/9;background:#000;border-radius:16px;overflow:hidden;margin-bottom:18px}
.video-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-broken{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#aaa;font-size:14px}

/* 말씀요약(2026-09-24) — 회원/비회원 공개 글쓰기에서 채우는 에디터 본문. */
.summary-box{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:18px}
.summary-title{font-size:13px;font-weight:700;color:var(--sub);margin-bottom:8px}
.summary-body{font-size:15px}
.summary-body img{max-width:100%;height:auto;border-radius:10px}
.summary-body{overflow-wrap:anywhere}

.share-row{display:flex;gap:10px}

#toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:#111;color:#fff;padding:11px 20px;border-radius:999px;font-size:14px;opacity:0;transition:.25s;z-index:200;pointer-events:none;white-space:nowrap}
#toast.show{opacity:1;transform:translateX(-50%)}

@media(max-width:480px){
  .share-row{flex-direction:column}
  .share-row .btn{width:100%}
}