@charset "utf-8";
/* ============================================================
   FASEECOM - Portfolio 게시판 스킨 style.css  (웹진/매거진형 · 1열 가로카드)
   모든 게시물 = 좌 이미지 + 우 텍스트 가로 카드 / 위→아래 1열 / 보라 포인트·다크 배경
   ※ 이 파일은 기존 style.css 의 "목록(list)" 영역을 대체합니다.
     write/view/댓글 영역은 기존 파일에서 그대로 이어 붙이세요.
   ============================================================ */

/* ---------- 변수 ---------- */
:root{
    --pf-bg:#070607;
    --pf-card:#121113;
    --pf-card2:#161416;
    --pf-point:#6633ee;
    --pf-point2:#6a4cf0;
    --pf-text:#ffffff;
    --pf-sub:#a9a4b6;
    --pf-sub2:#9a98a3;
    --pf-line:#201e22;
}

#pf_gall.pf_skin{ margin:0 auto; color:var(--pf-text); }
#pf_gall.pf_skin * { box-sizing:border-box; }
#pf_gall .sound_only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); border:0; }
#pf_gall a{ color:inherit; text-decoration:none; }

/* ---------- 상단 정보/버튼 ---------- */
#pf_gall #bo_btn_top{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1em; margin-bottom:1.6em; }
#pf_gall #bo_list_total{ font-size:.92em; color:var(--pf-sub); }
#pf_gall #bo_list_total span{ color:var(--pf-text); font-weight:700; margin-right:.6em; }
#pf_gall .btn_bo_user{ display:flex; gap:.5em; list-style:none; margin:0; padding:0; position:relative; }
#pf_gall .btn_bo_user .btn{ display:inline-flex; align-items:center; gap:.4em; padding:.7em 1.2em; border-radius:50px; background:var(--pf-card); color:var(--pf-sub); font-size:.86em; transition:all .3s; line-height:1; height:auto; }
#pf_gall .btn_bo_user .btn:hover{ background:var(--pf-point); color:#fff; }
#pf_gall .btn_admin:hover{ background:var(--pf-point2); }
#pf_gall .more_opt.is_list_btn{ display:none; position:absolute; right:0; top:calc(100% + 6px); background:var(--pf-card); border:1px solid var(--pf-line); border-radius:8px; padding:.4em 0; min-width:130px; z-index:30; list-style:none; }
#pf_gall .more_opt.is_list_btn li button{ display:block; width:100%; text-align:left; padding:.6em 1.1em; background:none; border:0; color:var(--pf-sub); font-size:.86em; cursor:pointer; }
#pf_gall .more_opt.is_list_btn li button:hover{ background:#201e20; color:#fff; }

/* ---------- 분류 탭 (포트폴리오 필터) ---------- */
#pf_gall .portfolio-tabs{ margin-bottom:2.4em; }
#pf_gall .portfolio-tabs ul{ display:flex; flex-wrap:wrap; gap:.8em; list-style:none; margin:0; padding:0; }
#pf_gall .portfolio-tabs li a{
    display:inline-block; font-size:.92em; font-weight:600;
    padding:.75em 1.6em; border-radius:50px;
    background:var(--pf-card2); color:var(--pf-sub); transition:all .3s;
}
#pf_gall .portfolio-tabs li a:hover{ background:#201e20; color:#fff; }
#pf_gall .portfolio-tabs li a#bo_cate_on{ background:var(--pf-point); color:#fff; }

/* ---------- 전체선택 ---------- */
#pf_gall #gall_allchk{ margin-bottom:1em; font-size:.86em; color:var(--pf-sub); }

/* ============================================================
   웹진 카드 리스트
   ============================================================ */

/* ---- 그리드 컨테이너 : 4열 ---- */
#pf_gall .mz-list{
    display:grid; grid-template-columns:repeat(4,1fr); gap:1.4em;
    list-style:none; margin:0; padding:0;
}
#pf_gall .mz_li{ min-width:0; display:flex; flex-direction:column; }

/* ---- 카드 (세로형 · 이미지 위 + 텍스트 아래) ---- */
#pf_gall .mz-card{
    position:relative; display:flex; flex-direction:column; height:100%;
    background:var(--pf-card); border:1px solid var(--pf-line);
    border-radius:14px; overflow:hidden;
    transition:transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}
#pf_gall .mz-card:hover{ transform:translateY(-8px); border-color:#322b46; box-shadow:0 20px 44px rgba(102,51,238,.25); }
#pf_gall .mz_li.gall_now .mz-card{ outline:2px solid var(--pf-point); }

/* ---- 썸네일 (상단, 3:4 세로 비율) ---- */
#pf_gall .mz-thumb{
    display:block; position:relative; overflow:hidden;
    width:100%; aspect-ratio:3/4; flex-shrink:0;
}
#pf_gall .mz-thumb img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
#pf_gall .mz-card:hover .mz-thumb img{ transform:scale(1.06); }
#pf_gall .mz-thumb .no_imgbox{
    width:100%; height:100%; background:var(--pf-card2);
    display:flex; align-items:center; justify-content:center;
}
#pf_gall .mz-thumb .no_imgbox img{ width:30%; height:auto; opacity:.35; }

/* 썸네일 hover 오버레이 VIEW */
#pf_gall .mz-thumb-ov{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    background:rgba(7,6,7,.52); opacity:0; transition:opacity .35s ease;
}
#pf_gall .mz-card:hover .mz-thumb-ov{ opacity:1; }
#pf_gall .mz-view{
    display:inline-flex; align-items:center; gap:.5em;
    padding:.65em 1.3em; border:1.5px solid #fff; border-radius:50px;
    font-family:'Presentation', sans-serif; font-size:.78em; font-weight:600; letter-spacing:.14em; color:#fff;
    transform:translateY(8px); transition:transform .35s ease;
}
#pf_gall .mz-card:hover .mz-view{ transform:translateY(0); }

/* ---- 본문 (하단) ---- */
#pf_gall .mz-body{
    display:flex; flex-direction:column; flex:1;
    padding:1.1em 1.2em 1.3em; min-width:0;
}
#pf_gall .mz-cate{
    font-size:.75em; font-weight:600; letter-spacing:.03em; color:var(--pf-point);
    margin-bottom:.4em;
}
#pf_gall .mz-tit-link{ display:block; }
#pf_gall .mz-tit{
    font-family:'Presentation', sans-serif;
    font-size:1.05em; font-weight:700; line-height:1.3; color:#fff; margin:0 0 .4em;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    transition:color .25s ease;
}
#pf_gall .mz-tit-link:hover .mz-tit{ color:var(--pf-point2); }
#pf_gall .mz-excerpt{
    font-size:.82em; line-height:1.5; color:var(--pf-sub2); margin:0 0 .6em;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* ---- 메타 (기간/연출/디자인) — 구분선 위 세로 나열 ---- */
#pf_gall .mz-meta{
    margin:0 0 .7em; padding:.7em 0 0;
    border-top:1px solid var(--pf-line);
    display:flex; flex-direction:column; gap:.3em;
}
#pf_gall .mz-meta-row{ display:flex; gap:.5em; font-size:.77em; line-height:1.4; }
#pf_gall .mz-meta-row dt{
    flex:0 0 5em; color:var(--pf-point2); font-weight:600; margin:0;
}
#pf_gall .mz-meta-row dd{ margin:0; color:#cfcdd6; min-width:0; word-break:keep-all; }

/* ---- 더보기 (카드 하단 고정) ---- */
#pf_gall .mz-more{
    margin-top:auto;
    display:inline-flex; align-items:center; gap:.5em;
    font-family:'Presentation', sans-serif; font-size:.78em; font-weight:600; color:#fff;
}
#pf_gall .mz-more .mz-more-txt{ position:relative; padding-bottom:3px; }
#pf_gall .mz-more .mz-more-txt::after{
    content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
    background:var(--pf-point); transform:scaleX(0); transform-origin:left; transition:transform .35s ease;
}
#pf_gall .mz-card:hover .mz-more .mz-more-txt::after{ transform:scaleX(1); }
#pf_gall .mz-more::after{
    content:""; width:14px; height:8px; flex:0 0 auto; background:var(--pf-point);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3Cpath d='M11.3 0l-.9.9 2.6 2.6H0v1.3h13l-2.6 2.6.9.9L15.4 4.5z'/%3E%3C/svg%3E") no-repeat center/contain;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3Cpath d='M11.3 0l-.9.9 2.6 2.6H0v1.3h13l-2.6 2.6.9.9L15.4 4.5z'/%3E%3C/svg%3E") no-repeat center/contain;
    transition:transform .35s ease;
}
#pf_gall .mz-card:hover .mz-more::after{ transform:translateX(5px); }

/* 체크박스 */
#pf_gall .gall_chk{ position:absolute; top:10px; left:10px; z-index:5; }

/* 빈 목록 */
#pf_gall .mz_empty{
    grid-column:1 / -1; text-align:center; padding:5em 0;
    color:var(--pf-sub); background:var(--pf-card); border:1px solid var(--pf-line); border-radius:14px;
}

/* ---------- 하단 버튼 ---------- */
#pf_gall .bo_fx{ margin-top:2.5em; display:flex; justify-content:flex-end; }
#pf_gall .bo_fx .btn_bo_user{ flex-wrap:wrap; }

/* ---------- 페이지네이션 (그누보드 기본) ---------- */
#pf_gall .pg_wrap{ margin-top:3em; text-align:center; }
#pf_gall .pg{ display:inline-flex; gap:.35em; }
#pf_gall .pg_page, #pf_gall .pg_current{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:40px; height:40px; padding:0 .6em; border-radius:6px;
    font-size:.9em; background:var(--pf-card); color:var(--pf-sub); transition:all .25s; line-height:1;
}
#pf_gall .pg_page:hover{ background:#201e20; color:#fff; }
#pf_gall .pg_current{ background:var(--pf-point); color:#fff; font-weight:700; }

/* ---------- 검색 ---------- */
#pf_gall .bo_sch_wrap{ display:none; position:fixed; inset:0; z-index:1000; }
#pf_gall .bo_sch_wrap .bo_sch_bg{ position:absolute; inset:0; background:rgba(0,0,0,.6); }
#pf_gall .bo_sch{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:90%; max-width:460px; background:var(--pf-card); border:1px solid var(--pf-line); border-radius:12px; padding:2em; z-index:2; }
#pf_gall .bo_sch h3{ margin:0 0 1em; font-size:1.1em; color:#fff; }
#pf_gall .bo_sch select, #pf_gall .bo_sch .sch_input{ width:100%; padding:.8em 1em; margin-bottom:.7em; background:#070607; border:1px solid var(--pf-line); border-radius:6px; color:#fff; }
#pf_gall .bo_sch .sch_bar{ display:flex; gap:.5em; }
#pf_gall .bo_sch .sch_btn{ flex:0 0 56px; background:var(--pf-point); border:0; border-radius:6px; color:#fff; cursor:pointer; line-height:1; height:auto; }
#pf_gall .bo_sch_cls{ position:absolute; top:1em; right:1em; background:none; border:0; color:var(--pf-sub); font-size:1.2em; cursor:pointer; }

/* ============================================================
   반응형
   ============================================================ */
@media (max-width:1200px){
    #pf_gall .mz-list{ grid-template-columns:repeat(3,1fr); gap:1.2em; }
}
@media (max-width:768px){
    #pf_gall .mz-list{ grid-template-columns:repeat(2,1fr); gap:1em; }
    #pf_gall .portfolio-tabs li a{ font-size:.84em; padding:.6em 1.1em; }
    #pf_gall #bo_btn_top{ margin-bottom:1.4em; }
    #pf_gall .mz-body{ padding:1em 1em 1.2em; }
    #pf_gall .mz-tit{ font-size:1em; }
    #pf_gall .mz-excerpt{ display:none; } /* 모바일 2열에선 발췌 숨김 */
}
@media (max-width:480px){
    #pf_gall .mz-list{ grid-template-columns:repeat(2,1fr); gap:.8em; }
}

/* ============================================================
   글쓰기 / 수정 폼 (write.skin.php)  — refined / trendy
   ============================================================ */
#bo_w{ margin:0 auto; color:var(--pf-text); }
#bo_w *{ box-sizing:border-box; }
#bo_w h2.sound_only,
#bo_w .sound_only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); border:0; }
#bo_w a{ color:inherit; text-decoration:none; }
#bo_w fieldset{ border:0; margin:0; padding:0; }
/* 폼 시작 구분: 제목 영역과 입력 영역 사이에 경계 */
#bo_w #fwrite{ margin-top:1.6em; padding-top:.5em; border-top:1px solid rgba(255,255,255,.10); }
#bo_w #fwrite > .gw_form_control:first-of-type,
#bo_w #fwrite > .write_div:first-of-type{ padding-top:2em; }

/* 한 줄(라벨+입력) — 가로형 유지. 구분선은 더 가늘고 은은하게 */
#bo_w .gw_form_control,
#bo_w .write_div,
#bo_w .bo_w_tit,
#bo_w .autosave_wrapper.gw_form_control,
#bo_w .bo_w_flie,
#bo_w .bo_w_select{
    display:flex; align-items:flex-start; gap:1.6em;
    padding:1.7em 0; margin:0;
    border-bottom:1px solid rgba(255,255,255,.06);
}

/* 라벨 — 트래킹 + 살짝 작게, 차분한 톤 */
#bo_w .gw_label{
    display:block; flex:0 0 120px; padding-top:.85em; margin:0;
    font-size:.8em; font-weight:600; letter-spacing:.02em; color:var(--pf-text); line-height:1.4;
    text-align:left;
}
#bo_w .form_require{ color:var(--pf-point2); margin-left:.25em; font-weight:700; }

/* 입력 래퍼 */
#bo_w .gw_input{ flex:1 1 auto; min-width:0; width:auto; }

/* 옵션 영역 — 토글 스위치형 */
#bo_w .bo_v_option{
    flex:1 1 auto; display:flex; flex-wrap:wrap; align-items:center; gap:1.1em 1.8em;
    list-style:none; margin:0; padding:.55em 0 0;
}
#bo_w .bo_v_option .chk_box{ margin:0; }
#bo_w .chk_box{ display:flex; align-items:center; }
/* 실제 체크박스 숨김 */
#bo_w .chk_box input.selec_chk{ position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
/* label = 스위치 트랙(span) + 텍스트 */
#bo_w .chk_box label{
    display:inline-flex; align-items:center; gap:.6em;
    font-size:.86em; color:var(--pf-sub); cursor:pointer; transition:color .2s; user-select:none;
}
#bo_w .chk_box label:hover{ color:#fff; }
/* 트랙 */
#bo_w .chk_box label span{
    display:inline-block; position:relative; flex:0 0 auto;
    width:38px; height:22px; border-radius:50px;
    background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
    transition:background .25s ease, border-color .25s ease;
}
/* 노브 */
#bo_w .chk_box label span::after{
    content:""; position:absolute; top:50%; left:3px; transform:translateY(-50%);
    width:16px; height:16px; border-radius:50%;
    background:#cfc9da; transition:left .25s ease, background .25s ease;
}
/* 체크 상태 */
#bo_w .chk_box input.selec_chk:checked + label span{ background:var(--pf-point); border-color:var(--pf-point); }
#bo_w .chk_box input.selec_chk:checked + label span::after{ left:18px; background:#fff; }
#bo_w .chk_box input.selec_chk:checked + label{ color:#fff; }
/* 포커스 접근성 */
#bo_w .chk_box input.selec_chk:focus-visible + label span{ box-shadow:0 0 0 3px rgba(102,51,238,.3); }

/* 입력창 공통 — 미니멀: 배경 거의 없이 가는 테두리, 부드러운 라운드/전환 */
#bo_w .frm_input,
#bo_w .gw_select,
#bo_w select,
#bo_w textarea{
    width:100%; padding:.95em 1.1em; margin:0;
    background:rgba(255,255,255,.02); color:#fff;
    border:1px solid rgba(255,255,255,.12); border-radius:10px;
    font-size:.92em; font-family:inherit;
    transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
#bo_w .frm_input::placeholder,
#bo_w textarea::placeholder{ color:#5a5566; }
#bo_w .frm_input:hover,
#bo_w .gw_select:hover,
#bo_w textarea:hover{ border-color:rgba(255,255,255,.22); }
#bo_w .frm_input:focus,
#bo_w .gw_select:focus,
#bo_w select:focus,
#bo_w textarea:focus{
    outline:none; border-color:var(--pf-point);
    background:rgba(102,51,238,.04);
    box-shadow:0 0 0 4px rgba(102,51,238,.12);
}
#bo_w .half_input{ max-width:380px; }

/* 이름/비번 묶음 — 바깥 래퍼 선 제거, 안쪽 각 줄에만 가는 선 */
#bo_w .bo_w_info{ display:block; padding:0; margin:0; border-bottom:0; }
#bo_w .bo_w_info > .gw_form_control{
    display:flex; align-items:flex-start; gap:1.6em;
    padding:1.7em 0; border-bottom:1px solid rgba(255,255,255,.06);
}

/* 제목 + 임시저장 */
#bo_w #autosave_wrapper{ position:relative; flex:1 1 auto; min-width:0; }
#bo_w #autosave_wrapper .frm_input{ width:100%; }
#bo_w #btn_autosave{
    display:inline-flex; align-items:center; gap:.4em; margin-top:.85em; padding:.55em 1.25em; font-size:.78em;
    background:transparent; color:var(--pf-sub);
    border:1px solid rgba(255,255,255,.12); border-radius:50px; cursor:pointer; white-space:nowrap;
    transition:all .2s ease;
 line-height:1; height:auto; }
#bo_w #btn_autosave:hover{ border-color:var(--pf-point); color:#fff; }
#bo_w #autosave_pop{
    display:none; position:absolute; left:0; top:100%; z-index:20;
    width:100%; margin-top:.5em; padding:1.1em;
    background:#121113; border:1px solid rgba(255,255,255,.12); border-radius:12px;
    box-shadow:0 16px 40px rgba(0,0,0,.5);
}
#bo_w #autosave_pop strong{ display:block; margin-bottom:.6em; color:#fff; font-size:.88em; }
#bo_w #autosave_pop ul{ list-style:none; margin:0; padding:0; }
#bo_w .autosave_close{ margin-top:.6em; padding:.4em 1em; font-size:.8em; background:#201e20; color:#fff; border:0; border-radius:8px; cursor:pointer; }

/* 내용 — 래퍼 펴서 textarea 꽉차게 */
#bo_w #gw_se_control{ flex:1 1 auto; min-width:0; width:auto; }
#bo_w #gw_se_control .wr_content{ width:100%; }
#bo_w #gw_se_control .wr_content > textarea,
#bo_w textarea#wr_content{
    width:100%; min-height:360px; resize:vertical; line-height:1.75; display:block;
}
#bo_w #gw_se_control .wr_content iframe,
#bo_w #gw_se_control .wr_content .se2_inputarea,
#bo_w #gw_se_control .wr_content > div{ max-width:100%; }
#bo_w #char_count_desc{ font-size:.82em; color:var(--pf-sub); margin:.5em 0; }
#bo_w #char_count_wrap{ text-align:right; font-size:.8em; color:var(--pf-sub); margin-top:.45em; }

/* ---------- 파일 첨부 ---------- */
#bo_w .bo_w_flie{ flex-wrap:wrap; }
#bo_w .bo_w_flie > .gw_form_control{ display:flex; align-items:flex-start; gap:1.6em; flex:1 1 100%; padding:0; border:0; }
#bo_w .gw_file_control{ display:flex; flex-direction:column; gap:.7em; flex:1 1 auto; min-width:0; }
#bo_w .gw_file_box{ display:flex; gap:.6em; align-items:center; }
#bo_w .gw_file_origin{
    flex:1 1 auto; min-width:0; padding:.95em 1.1em;
    background:rgba(255,255,255,.02); color:#fff;
    border:1px solid rgba(255,255,255,.12); border-radius:10px; font-size:.9em;
}
#bo_w .gw_upload_file_btn{
    flex:0 0 auto; padding:.95em 1.6em; cursor:pointer;
    background:var(--pf-point); color:#fff; font-size:.86em; font-weight:600;
    border-radius:10px; white-space:nowrap; transition:background .2s ease, transform .15s ease; line-height:1.4;
}
#bo_w .gw_upload_file_btn:hover{ background:var(--pf-point2); transform:translateY(-1px); }
#bo_w .gw_upload_file_btn:active{ transform:translateY(0); }
#bo_w .gw_upload_hidden{ position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; padding:0; margin:-1px; }
#bo_w .gw_file_box:nth-child(2) .frm_input{ width:100%; }
#bo_w .file_del{ display:inline-flex; align-items:center; gap:.45em; margin-top:.9em; font-size:.84em; color:var(--pf-sub); flex:1 1 100%; }
#bo_w .file_del input{ accent-color:var(--pf-point); }

/* 하단 버튼 */
#bo_w .btn_confirm{
    display:flex; justify-content:center; gap:.9em;
    padding:2.8em 0 0; border-bottom:0; margin:0;
}
#bo_w .btn_confirm .btn{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:160px; padding:1.05em 2.2em; border-radius:50px;
    font-size:.92em; font-weight:600; letter-spacing:.01em; cursor:pointer;
    transition:all .25s ease;
 line-height:1; height:auto; }
#bo_w .btn_cancel{ background:transparent; color:var(--pf-sub); border:1px solid rgba(255,255,255,.12); }
#bo_w .btn_cancel:hover{ border-color:rgba(255,255,255,.22); color:#fff; }
#bo_w .btn_submit{ background:var(--pf-point); color:#fff; border:1px solid var(--pf-point); box-shadow:0 8px 24px rgba(102,51,238,.3); }
#bo_w .btn_submit:hover{ background:var(--pf-point2); border-color:var(--pf-point2); transform:translateY(-2px); box-shadow:0 12px 30px rgba(102,51,238,.42); }
#bo_w .btn_submit:active{ transform:translateY(0); }

/* 캡차 */
#bo_w #captcha{ display:flex; gap:.5em; align-items:center; flex-wrap:wrap; }

@media (max-width:768px){
    #bo_w .gw_form_control,
    #bo_w .write_div,
    #bo_w .bo_w_tit,
    #bo_w .autosave_wrapper.gw_form_control,
    #bo_w .bo_w_select,
    #bo_w .bo_w_info > .gw_form_control{
        flex-direction:column; gap:.7em; padding:1.3em 0;
    }
    #bo_w .gw_label{ flex:none; padding-top:0; }
    #bo_w .half_input{ max-width:100%; }
    #bo_w .btn_confirm .btn{ flex:1; min-width:0; }
}

/* ============================================================
   본문 보기 (view.skin.php / view_comment / view_sns)
   ============================================================ */
#bo_v{ margin:0 auto; color:var(--pf-text); }
#bo_v *{ box-sizing:border-box; }
#bo_v a{ color:inherit; text-decoration:none; }
#bo_v .sound_only{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); }

/* 상단 버튼 */
#bo_v #bo_v_top{ display:flex; justify-content:flex-end; margin-bottom:1.6em; }
#bo_v .btn_bo_user{ display:flex; gap:.5em; list-style:none; margin:0; padding:0; position:relative; }
#bo_v .btn_bo_user .btn{ display:inline-flex; align-items:center; gap:.4em; padding:.7em 1.2em; border-radius:50px; background:var(--pf-card); color:var(--pf-sub); font-size:.86em; transition:all .3s; cursor:pointer;  line-height:1; height:auto; }
#bo_v .btn_bo_user .btn:hover{ background:var(--pf-point); color:#fff; }
#bo_v .more_opt.is_view_btn{ display:none; position:absolute; right:0; top:calc(100% + 6px); background:var(--pf-card); border:1px solid var(--pf-line); border-radius:8px; padding:.4em 0; min-width:130px; z-index:30; list-style:none; }
#bo_v .more_opt.is_view_btn li a{ display:flex; align-items:center; gap:.5em; padding:.6em 1.1em; color:var(--pf-sub); font-size:.86em; }
#bo_v .more_opt.is_view_btn li a:hover{ background:#201e20; color:#fff; }

/* 제목 */
#bo_v header{ padding:0 0 1.8em; margin-bottom:2em; border-bottom:1px solid var(--pf-line); }
#bo_v #bo_v_title{
    font-family:'Presentation'; font-size:2.4em; font-weight:700; line-height:1.25; color:#fff; margin:0;
    letter-spacing:-.01em; word-break:keep-all;
}
#bo_v .bo_v_cate{
    display:inline-flex; align-items:center; height:auto; line-height:1.4;
    margin:0 0 .9em; padding:.42em 1em;
    font-size:.42em; font-weight:700; letter-spacing:.06em; color:#fff;
    background:var(--pf-point); border-radius:50px; vertical-align:middle; text-transform:uppercase;
}
#bo_v #bo_v_title .bo_v_tit {
    display: block;
}
/* 메타(조회/날짜) — 트렌디 칩 라인 */
#bo_v #bo_v_info{ margin:1.1em 0 2.2em; }
#bo_v #bo_v_info h2{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
#bo_v .profile_info{ display:flex; align-items:center; }
#bo_v .profile_info_ct{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:.9em; font-size:.86em; color:var(--pf-sub); }
#bo_v .profile_info_ct .meta_item{
    display:inline-flex; align-items:center; height:auto; line-height:1;
    gap:.5em; padding:.6em 1.05em;
    background:var(--pf-card); border:1px solid var(--pf-line); border-radius:50px;
    color:#cfc9da; font-weight:500; font-variant-numeric:tabular-nums;
}
#bo_v .profile_info_ct .meta_item i{ color:var(--pf-point2); opacity:.85; font-size:.95em; }
#bo_v .profile_info_ct .meta_sep{ display:none; }

/* 본문 */
#bo_v #bo_v_atc{ padding:1em 0 2em; border-bottom:1px solid var(--pf-line); margin-bottom:2em; }
#bo_v #bo_v_atc_title{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
#bo_v #bo_v_img{ margin-bottom:1.5em; }
#bo_v #bo_v_img img{ max-width:100%; height:auto; border-radius:8px; }
#bo_v #bo_v_con{ font-size:1em; line-height:1.85; color:#d4d4dc; word-break:break-all; }
#bo_v #bo_v_con img{ max-width:100%; height:auto; border-radius:6px; }
#bo_v #bo_v_con a{ color:var(--pf-point2); text-decoration:underline; }

/* 추천 / 비추천 */
#bo_v #bo_v_act{ display:flex; justify-content:center; gap:1em; margin-top:2em; }
#bo_v .bo_v_act_gng, #bo_v #bo_v_act > span{ display:inline-flex; }
#bo_v .bo_v_good, #bo_v .bo_v_nogood{
    display:inline-flex; flex-direction:column; align-items:center; gap:.3em;
    padding:1em 1.6em; border-radius:10px; background:var(--pf-card);
    border:1px solid var(--pf-line); color:var(--pf-sub); font-size:.86em; transition:all .25s;
}
#bo_v a.bo_v_good:hover{ border-color:var(--pf-point); color:#fff; }
#bo_v a.bo_v_nogood:hover{ border-color:#a32d2d; color:#fff; }
#bo_v .bo_v_good strong, #bo_v .bo_v_nogood strong{ font-size:1.3em; color:#fff; }

/* 관련 링크 / 첨부파일 */
#bo_v #bo_v_link, #bo_v #bo_v_file{ padding:1.4em 0; border-bottom:1px solid var(--pf-line); }
#bo_v #bo_v_link h2, #bo_v #bo_v_file h2{ font-size:1em; font-weight:600; color:#fff; margin:0 0 1em; }
#bo_v #bo_v_link ul, #bo_v #bo_v_file ul{ list-style:none; margin:0; padding:0; }
#bo_v #bo_v_link li, #bo_v #bo_v_file li{ padding:.6em 0; font-size:.9em; color:var(--pf-sub); }
#bo_v #bo_v_link li strong, #bo_v #bo_v_file li strong{ color:#fff; font-weight:500; }
#bo_v #bo_v_link i, #bo_v #bo_v_file i{ margin-right:.5em; color:var(--pf-point2); }
#bo_v .view_file_download:hover strong{ color:var(--pf-point2); }
#bo_v .bo_v_link_cnt, #bo_v .bo_v_file_cnt{ display:block; margin-top:.2em; font-size:.84em; color:#666; }

/* SNS 공유 */
#bo_v + .gw_m_sns, .gw_m_sns{ margin:1.8em 0; }
.gw_m_sns .gw_m_sns_con{ font-size:.9em; color:var(--pf-sub); margin:0 0 .8em; }
.gw_m_sns .gw_m_sns_con i{ margin-right:.4em; color:var(--pf-point2); }
#bo_v_sns{ display:flex; gap:.6em; list-style:none; margin:0; padding:0; }
#bo_v_sns li a{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background:var(--pf-card); border:1px solid var(--pf-line); transition:all .25s; }
#bo_v_sns li a:hover{ border-color:var(--pf-point); transform:translateY(-3px); }
#bo_v_sns li a span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
#bo_v_sns li a img{ width:20px; height:20px; }

/* 이전글 / 다음글 */
#bo_v .bo_v_nb{
    position:relative; display:flex; align-items:stretch; margin:2.4em 0; list-style:none; padding:0;
    border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); min-height:96px;
}
/* 가운데 세로 구분선 */
#bo_v .bo_v_nb::before{
    content:""; position:absolute; left:50%; top:16px; bottom:16px; width:1px;
    background:rgba(255,255,255,.08); transform:translateX(-50%); z-index:0;
}
#bo_v .bo_v_nb .btn_prv, #bo_v .bo_v_nb .btn_next{
    position:relative; flex:1; display:flex; flex-direction:column; justify-content:center; gap:.2em;
    height:auto; line-height:1.3; min-width:0;
    text-decoration:none;
}
/* 큰 화살표를 좌/우 끝에 배치할 공간 확보 */
#bo_v .bo_v_nb .btn_prv{ padding:1.6em 2em 1.6em 4.4em; }
#bo_v .bo_v_nb .btn_next{ padding:1.6em 4.4em 1.6em 2em; text-align:right; align-items:flex-end; }
#bo_v .bo_v_nb .no_link{ opacity:.35; pointer-events:none; }
/* 라벨(이전글/다음글) — 작은 캡션 */
#bo_v .bo_v_nb .nb_tit{
    font-size:.76em; color:var(--pf-sub); letter-spacing:.08em; text-transform:uppercase;
    display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#bo_v .bo_v_nb .btn_next .nb_tit{ color:var(--pf-point2); }
/* 라벨 안의 화살표 아이콘 → 큰 사이즈로 좌/우 끝에 절대배치 */
#bo_v .bo_v_nb .nb_tit i{
    position:absolute; top:50%; transform:translateY(-50%);
    font-size:1.6em; color:var(--pf-point2); line-height:1; transition:transform .25s ease;
}
#bo_v .bo_v_nb .btn_prv .nb_tit i{ left:1.6em; }
#bo_v .bo_v_nb .btn_next .nb_tit i{ right:1.6em; }
#bo_v .bo_v_nb .btn_prv:hover .nb_tit i{ transform:translateY(-50%) translateX(-4px); }
#bo_v .bo_v_nb .btn_next:hover .nb_tit i{ transform:translateY(-50%) translateX(4px); }
#bo_v .bo_v_nb p{
    margin:.2em 0 0; font-size:1.05em; color:#fff; font-weight:500;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
/* 날짜 숨김 */
#bo_v .bo_v_nb .nb_date{ display:none; }
/* 가운데 목록 버튼 — 보라 원형 플로팅 */
#bo_v .bo_v_nb .nb_list{ flex:0 0 auto; position:relative; z-index:2; display:flex; align-items:center; padding:0 1.2em; }
#bo_v .bo_v_nb .nb_list a{
    width:52px; height:52px; line-height:1; display:flex; align-items:center; justify-content:center;
    background:var(--pf-point); border:0; border-radius:50%; color:#fff;
    box-shadow:0 8px 24px rgba(102,51,238,.4); transition:transform .25s ease, box-shadow .25s ease;
}
#bo_v .bo_v_nb .nb_list a:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 12px 30px rgba(102,51,238,.55); }
#bo_v .bo_v_nb .nb_list_ico{ width:18px; height:18px; display:block; }

/* ---------- 댓글 ---------- */
.cmt_btn{ display:inline-flex; align-items:center; gap:.5em; margin:1.5em 0; padding:.8em 1.4em; background:var(--pf-card); border:1px solid var(--pf-line); border-radius:50px; color:var(--pf-sub); font-size:.9em; cursor:pointer;  line-height:1; height:auto; }
.cmt_btn:hover, .cmt_btn.cmt_btn_op{ border-color:var(--pf-point); color:#fff; }
.cmt_btn .total b{ color:#fff; }
#bo_vc{ margin-top:1em; }
#bo_vc > h2{ font-size:1.1em; color:#fff; margin:0 0 1.2em; }
#bo_vc article{ display:flex; gap:1em; padding:1.4em 0; border-bottom:1px solid var(--pf-line); }
#bo_vc article .pf_img img{ width:40px; height:40px; border-radius:50%; object-fit:cover; }
#bo_vc .cm_wrap{ flex:1; min-width:0; }
#bo_vc .cm_wrap header{ border:0; padding:0; margin:0 0 .5em; display:flex; flex-wrap:wrap; align-items:center; gap:.6em; font-size:.85em; color:var(--pf-sub); }
#bo_vc .cm_wrap header h2{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
#bo_vc .bo_vc_hdinfo{ color:#666; }
#bo_vc .cmt_contents p{ margin:0; font-size:.94em; line-height:1.7; color:#d4d4dc; word-break:break-all; }
#bo_vc .bo_vl_opt{ position:relative; flex:0 0 auto; }
#bo_vc .btn_cm_opt{ background:none; border:0; color:var(--pf-sub); cursor:pointer; padding:.3em; }
#bo_vc .bo_vc_act{ display:none; position:absolute; right:0; top:100%; background:var(--pf-card); border:1px solid var(--pf-line); border-radius:8px; padding:.3em 0; list-style:none; margin:0; min-width:90px; z-index:10; }
#bo_vc .bo_vc_act li a{ display:block; padding:.5em 1em; font-size:.84em; color:var(--pf-sub); }
#bo_vc .bo_vc_act li a:hover{ background:#201e20; color:#fff; }
#bo_vc_empty{ padding:2em 0; text-align:center; color:var(--pf-sub); }

/* 댓글 쓰기 */
#bo_vc_w{ margin-top:1.6em; }
#bo_vc_w h2{ font-size:1em; color:#fff; margin:0 0 1em; }
#bo_vc_w .bo_vc_w_form_wrap{ display:flex; gap:1em; flex-wrap:wrap; margin-bottom:1em; }
#bo_vc_w .bo_vc_w_form_control{ flex:1; min-width:200px; }
#bo_vc_w .bo_vc_w_form_control label{ display:block; font-size:.85em; color:var(--pf-sub); margin-bottom:.4em; }
#bo_vc_w .frm_input, #bo_vc_w textarea{ width:100%; padding:.85em 1em; background:#070607; color:#fff; border:1px solid var(--pf-line); border-radius:6px; font-size:.95em; }
#bo_vc_w textarea{ min-height:110px; resize:vertical; line-height:1.6; }
#bo_vc_w .frm_input:focus, #bo_vc_w textarea:focus{ outline:none; border-color:var(--pf-point); box-shadow:0 0 0 3px rgba(102,51,238,.25); }
#bo_vc_w .bo_vc_w_wr{ display:flex; align-items:center; justify-content:space-between; gap:1em; margin-top:.8em; flex-wrap:wrap; }
#bo_vc_w .secret_cm{ display:inline-flex; align-items:center; gap:.4em; font-size:.85em; color:var(--pf-sub); }
#bo_vc_w .secret_cm input{ accent-color:var(--pf-point); }
#bo_vc_w .secret_cm label span{ display:none; }
#bo_vc_w .btn_confirm{ display:flex; align-items:center; gap:.8em; }
#bo_vc_w .btn_submit{ padding:.85em 1.8em; background:var(--pf-point); color:#fff; border:0; border-radius:50px; font-size:.9em; font-weight:600; cursor:pointer;  line-height:1; height:auto; }
#bo_vc_w .btn_submit:hover{ background:var(--pf-point2); }
#bo_vc_w #char_cnt{ font-size:.82em; color:var(--pf-sub); }

@media (max-width:768px){
    #bo_v #bo_v_title{ font-size:1.7em; }
    #bo_v .bo_v_nb{ flex-wrap:wrap; min-height:0; }
    #bo_v .bo_v_nb::before{ display:none; }
    #bo_v .bo_v_nb .btn_prv, #bo_v .bo_v_nb .btn_next{ flex:1 1 100%; padding:1.3em 1.4em; }
    #bo_v .bo_v_nb .btn_next{ flex-direction:row; text-align:left; border-top:1px solid rgba(255,255,255,.08); }
    #bo_v .bo_v_nb .btn_next .nb_tit{ align-items:flex-start; }
    #bo_v .bo_v_nb .nb_list{ order:3; width:100%; justify-content:center; padding:1.2em 0; border-top:1px solid rgba(255,255,255,.08); }
}

/* ============================================================
   포트폴리오 여분필드 (wr_1 수행기간 / wr_2 총괄연출 / wr_3 불꽃디자인)
   ============================================================ */
/* view 본문 상단 정보 박스 */
#bo_v .bo_v_spec{
    margin:0 0 2em; padding:.4em 1.6em;
    background:#0e0d0f; border:1px solid var(--pf-line); border-radius:14px;
}
#bo_v .bo_v_spec .spec_row{
    display:flex; align-items:flex-start; gap:1.2em;
    padding:1.05em 0; border-bottom:1px solid #1a181b;
}
#bo_v .bo_v_spec .spec_row:last-child{ border-bottom:0; }
#bo_v .bo_v_spec dt{
    flex:0 0 7.5em; display:inline-flex; align-items:center; gap:.55em;
    margin:0; color:var(--pf-point2); font-size:.9em; font-weight:600; letter-spacing:.01em;
}
#bo_v .bo_v_spec dt i{ font-size:.95em; opacity:.9; }
#bo_v .bo_v_spec dd{ margin:0; color:#e4e2ea; font-size:.96em; line-height:1.55; word-break:keep-all; }

@media (max-width:768px){
    #bo_v .bo_v_spec{ padding:.2em 1.2em; }
    #bo_v .bo_v_spec .spec_row{ flex-direction:column; gap:.4em; padding:.9em 0; }
    #bo_v .bo_v_spec dt{ flex:none; }
}