@charset "utf-8";

/* ==========================================================
   VIEW CUSTOM — LAYOUT REDESIGN (Still no HTML change)
   - Selector 유지
   - 기본 틀(max-width/margin) 유지
   - 체감: 배너 타이틀 / 칩 메타 / 시네마 플레이어 / 카드형 SEO
========================================================== */

:root{
  --nl-accent:#ff2b55;
  --nl-accent2:#ffb000;

  --nl-text: rgba(255,255,255,0.92);
  --nl-text1: rgba(255,255,255,0.78);
  --nl-text2: rgba(255,255,255,0.56);

  --nl-line: rgba(255,255,255,0.12);

  --nl-shadow: 0 22px 80px rgba(0,0,0,0.90);
  --nl-shadow2: 0 34px 120px rgba(0,0,0,0.92);
}

/* =========================================
   Wrapper: “페이지 카드” → “프레임드 패널”
   (치수는 유지)
========================================= */
#bo_v.bo_v_wrap{
    max-width:1200px;
    margin:0 auto 70px;
    padding:36px 26px 46px;

    background:
        radial-gradient(1200px 420px at 18% -10%, rgba(255,43,85,0.24), transparent 62%),
        radial-gradient(1100px 420px at 92% -10%, rgba(255,176,0,0.16), transparent 64%),
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
        rgba(0,0,0,0.52);

    border:1px solid rgba(255,255,255,0.14);
    border-radius:24px;
    color:#fff;
    backdrop-filter:none;
    box-shadow: var(--nl-shadow);

    position:relative;
    overflow:hidden;
}

/* 상단 “헤더 띠” (배너 느낌) */
#bo_v.bo_v_wrap::before{
    content:"";
    position:absolute;
    left:0; right:0; top:0;
    height:72px;
    background:
      linear-gradient(90deg, rgba(255,43,85,0.22), rgba(255,176,0,0.10), rgba(0,0,0,0.0));
    opacity:0.95;
    pointer-events:none;
}

/* 바닥 스트립 */
#bo_v.bo_v_wrap::after{
    content:"";
    position:absolute;
    left:26px; right:26px; bottom:18px;
    height:3px;
    border-radius:999px;
    background:linear-gradient(90deg,
      rgba(255,43,85,0.0),
      rgba(255,43,85,0.92),
      rgba(255,176,0,0.62),
      rgba(255,43,85,0.0)
    );
    opacity:.78;
    pointer-events:none;
}

/* =========================================
   Title: 왼쪽 바 + 배너 텍스트
========================================= */
.bo_v_tit{
    font-size:28px;
    font-weight:980;
    line-height:1.35;
    color:rgba(255,255,255,0.96);
    letter-spacing:-0.03em;
    text-shadow: 0 18px 40px rgba(0,0,0,0.85);

    position:relative;
    padding-left:14px; /* “왼쪽 바” 공간 */
    margin-top:10px;
}
.bo_v_tit::before{
    content:"";
    position:absolute;
    left:0;
    top:0.15em;
    bottom:0.15em;
    width:4px;
    border-radius:999px;
    background:linear-gradient(180deg, rgba(255,43,85,0.95), rgba(255,176,0,0.78));
    box-shadow: 0 0 18px rgba(255,43,85,0.22);
}

/* =========================================
   Meta: 기존 “박스” → “칩/태그 바” 느낌
   (padding은 유지, display만 flex로)
========================================= */
#bo_v_info{
    background:transparent; /* 박스감 제거 */
    border:0;
    border-radius:16px;
    padding:14px 18px;
    color:rgba(255,255,255,0.72);

    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
}

/* 메타 내부에 들어있는 span/a/em 같은 것들을 “칩”으로 보이게 (HTML 몰라도 안전하게) */
#bo_v_info *{
    background:rgba(0,0,0,0.42);
    border:1px solid rgba(255,255,255,0.14);
    border-radius:999px;
    padding:6px 12px;
    color:rgba(255,255,255,0.76);
    box-shadow: 0 10px 26px rgba(0,0,0,0.62);
}

/* 링크 hover */
#bo_v_info a:hover{
    color:#fff;
    border-color: rgba(255,43,85,0.28);
}

/* =========================================
   Player: “시네마 프레임”
   - 상/하 블랙바 느낌 + 더 강한 프레임
========================================= */
.bo_v_player{
    position:relative;
    margin-bottom:28px;
    border-radius:18px;
    overflow:hidden;
    background:#000;
    box-shadow: var(--nl-shadow2);
}

/* 시네마 비네팅 + 프레임 */
.bo_v_player::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    box-shadow:
      inset 0 0 0 2px rgba(255,255,255,0.12),
      inset 0 0 0 1px rgba(0,0,0,0.65),
      inset 0 -52px 120px rgba(0,0,0,0.70),
      inset 0 52px 120px rgba(0,0,0,0.55);
}

/* 상/하 시네마 바 */
.bo_v_player::before{
    content:"";
    position:absolute;
    left:0; right:0; top:0; bottom:0;
    pointer-events:none;
    background:
      linear-gradient(180deg, rgba(0,0,0,0.70), transparent 22%),
      linear-gradient(0deg, rgba(0,0,0,0.78), transparent 24%);
    opacity:.95;
}

.bo_v_player iframe,
.bo_v_player video{
    width:100%;
    height:520px;
    border-radius:18px;
    background:#000;
}

/* =========================================
   Content: 본문을 “읽기 모드”로 (가독성/여백 느낌)
========================================= */
#bo_v_con{
    font-size:15px;
    line-height:1.9; /* 살짝 더 읽기 좋게 */
    color:rgba(255,255,255,0.82);
}

/* =========================================
   Top Buttons: 더 ‘컨트롤 바’처럼
========================================= */
#bo_v_top .btn{
    background:rgba(0,0,0,0.46);
    border-radius:999px;
    font-weight:950;
    border:1px solid rgba(255,255,255,0.16);
    color:#fff;
    box-shadow: 0 14px 46px rgba(0,0,0,0.75);
    position:relative;
    overflow:hidden;
}
#bo_v_top .btn::after{
    content:"";
    position:absolute;
    left:12px; right:12px; bottom:6px;
    height:2px;
    border-radius:999px;
    background:linear-gradient(90deg,
      rgba(255,43,85,0.0),
      rgba(255,43,85,0.86),
      rgba(255,176,0,0.52),
      rgba(255,43,85,0.0)
    );
    opacity:.65;
    pointer-events:none;
}

/* =========================================
   Prev/Next: 리스트 박스 → 카드 스택 느낌
========================================= */
.bo_v_nb_wrap{
    border-radius:18px;
    border:1px solid rgba(255,255,255,0.14);
    background:rgba(0,0,0,0.44);
    box-shadow: 0 18px 62px rgba(0,0,0,0.85);
    overflow:hidden;
    position:relative;
}
.bo_v_nb_wrap a{ color:#fff; }
.bo_v_nb_wrap a:hover{ color: var(--nl-accent); }

/* 내부 아이템은 기존 구조 유지 */
.bo_v_nb .nb_item{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;}
.bo_v_nb .nb_tit{flex:0 0 44px;font-weight:980;color: var(--nl-accent);}
.bo_v_nb .nb_link{flex:1;min-width:0;white-space:normal;word-break:break-word;overflow-wrap:anywhere;}

/* =========================================
   SEO 블록: 그냥 박스 → “인용 카드” 느낌
========================================= */
.bo_v_seo_intro,
.bo_v_seo_outro{
    margin:22px 0;
    padding:16px 18px;
    background:
      linear-gradient(90deg, rgba(255,43,85,0.20), rgba(0,0,0,0.0) 30%),
      rgba(0,0,0,0.42);
    border:1px solid rgba(255,255,255,0.14);
    border-radius:14px;
    font-size:14px;
    line-height:1.75;
    color:rgba(255,255,255,0.78);
    backdrop-filter:none;
    box-shadow: 0 18px 62px rgba(0,0,0,0.86);
    position:relative;
}

/* “인용 바” */
.bo_v_seo_intro::before,
.bo_v_seo_outro::before{
    content:"";
    position:absolute;
    left:10px;
    top:12px;
    bottom:12px;
    width:3px;
    border-radius:999px;
    background:linear-gradient(180deg, rgba(255,43,85,0.92), rgba(255,176,0,0.70));
    opacity:.9;
}

.bo_v_seo_intro strong,
.bo_v_seo_outro strong{
    color: var(--nl-accent);
    font-weight:950;
}