/* ===========================================
   나인뷰 (NineView) 전용 스타일시트
   나주다 인사이트 뷰 — 프리미엄 콘텐츠 서비스
   =========================================== */

/* Google Fonts — 사용자가 Lexical floating toolbar 에서 선택한 서체.
   font-display: swap + unicode-range subset 으로 사용 글자만 lazy 다운로드.
   글에 해당 폰트를 적용하지 않은 사용자는 다운로드 0. */
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700&family=Nanum+Myeongjo:wght@400;700&display=swap');

/* ============ Base / Reset ============ */
.nv-page {
    font-family: var(--nj-font-body);
    color: var(--nj-text-primary);
    background: var(--nj-bg-page);
    line-height: var(--nj-line-height-base);
    -webkit-font-smoothing: antialiased;
}
.nv-page *, .nv-page *::before, .nv-page *::after {
    box-sizing: border-box;
}
.nv-page a { color: inherit; text-decoration: none; }
.nv-page img { max-width: 100%; height: auto; }
.nv-page video { max-width: 100%; height: auto; }
.nv-container {
    max-width: var(--nj-max-width);
    margin: 0 auto;
    padding: 0 var(--nj-padding-container);
}
.nv-container.narrow {
    max-width: 800px;
}

/* ============ 2-Tier Navigation ============ */

/* --- 1st Tier: Service Selection Bar --- */
.nv-service-bar {
    background: var(--nj-bg-page);
    border-bottom: 1px solid var(--nj-border);
    height: 52px;
    position: sticky;
    top: 0;
    z-index: var(--nj-z-modal);
    font-family: var(--nj-font-body);
}
.nv-service-bar-inner {
    max-width: var(--nj-max-width);
    margin: 0 auto;
    padding: 0 var(--nj-padding-container);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}
.nv-service-bar-left {
    display: flex;
    align-items: center;
    gap: 0;
    height: 100%;
}
.nv-service-bar-logo {
    margin-right: 24px;
    display: flex;
    align-items: center;
}
.nv-service-bar-logo img {
    height: 18px;
}
.nv-service-bar-logo span {
    color: var(--nj-dark);
    font-family: var(--nj-font-heading);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.5px;
}
.nv-service-tab {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 20px;
    font-size: 15px;
    font-weight: 500;
    color: var(--nj-text-tertiary);
    cursor: pointer;
    transition: color var(--nj-transition-normal);
    position: relative;
}
.nv-service-tab:hover { color: #666; }
.nv-service-tab.active-school {
    color: var(--nj-dark);
    font-weight: 700;
}
.nv-service-tab.active-school::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 16px;
    right: 16px;
    height: 2px;
    background: var(--nj-school-primary);
}
.nv-service-tab.active-nineview {
    color: var(--nj-dark);
    font-weight: 700;
}
.nv-service-tab.active-nineview::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 16px;
    right: 16px;
    height: 2px;
    background: var(--nj-nineview-primary);
}
.nv-service-bar-right {
    display: flex;
    align-items: center;
    gap: 14px;
}
.nv-service-bar-right a {
    font-size: 12px;
    color: var(--nj-text-tertiary);
    transition: color var(--nj-transition-normal);
}
.nv-service-bar-right a:hover { color: var(--nj-dark); }

/* --- 2nd Tier: Service Menu --- */
.nv-nav-bar {
    background: var(--nj-bg-page);
    border-bottom: 1px solid var(--nj-border-light);
    height: 52px;
    position: sticky;
    top: 52px;
    z-index: var(--nj-z-overlay);
}
.nv-nav-bar-inner {
    max-width: var(--nj-max-width);
    margin: 0 auto;
    padding: 0 var(--nj-padding-container);
    display: flex;
    align-items: center;
    height: 100%;
    gap: 32px;
}
.nv-nav-item {
    font-size: 14px;
    font-weight: 500;
    color: #666;
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
    transition: color var(--nj-transition-normal);
}
.nv-nav-item:hover { color: var(--nj-dark); }
.nv-nav-item.active {
    color: var(--nj-dark);
    font-weight: 700;
}
.nv-nav-item.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--nj-nineview-primary);
}

/* --- Mobile Navigation --- */
/* 좁은 모바일에서 [로고][탭][햄버거] 가 viewport 초과해 줄바꿈/깨짐 발생.
   common.css 의 스쿨 모바일 헤더와 동일 패턴 — flex-wrap nowrap + min-width 0 + 가로 스크롤 허용. */
.nv-mobile-header {
    display: none;
    background: var(--nj-bg-page);
    border-bottom: 1px solid var(--nj-border);
    height: 52px;
    position: sticky;
    top: 0;
    z-index: var(--nj-z-modal);
    padding: 0 var(--nj-padding-container-mobile);
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    overflow: hidden;
}
.nv-mobile-header-left {
    display: flex;
    align-items: center;
    height: 100%;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}
.nv-mobile-header-logo {
    display: flex;
    align-items: center;
    height: 100%;
    flex-shrink: 0;
    text-decoration: none;
}
.nv-mobile-header-logo span {
    color: var(--nj-dark);
    font-family: var(--nj-font-heading);
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}
.nv-mobile-header-svc-tabs {
    display: flex;
    align-items: center;
    height: 100%;
    margin-left: 8px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.nv-mobile-header-svc-tabs::-webkit-scrollbar {
    display: none;
}
.nv-mobile-header-svc-tab {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--nj-text-tertiary);
    position: relative;
    white-space: nowrap;
    flex-shrink: 0;
}
.nv-mobile-header-svc-tab.active {
    color: var(--nj-dark);
    font-weight: 700;
}
.nv-mobile-header-svc-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 8px;
    right: 8px;
    height: 2px;
    background: var(--nj-nineview-primary);
}
.nv-hamburger {
    width: 24px;
    height: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 8px;
}
.nv-hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--nj-dark);
    border-radius: 1px;
}
.nv-mobile-menu {
    /* 항상 layout 에 존재시키되 right:-100% 로 화면 밖에 두고 .open 시 슬라이드 인.
       기존 `display:none` 은 transition 무력화 + .open 으로도 표시 안 되는 버그였음. */
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    background: var(--nj-bg-page);
    z-index: 2000;
    transition: right var(--nj-transition-slow), visibility 0s linear var(--nj-transition-slow);
    box-shadow: -4px 0 20px rgba(0,0,0,0.15);
    overflow-y: auto;
    visibility: hidden;
}
.nv-mobile-menu.open {
    right: 0;
    visibility: visible;
    transition: right var(--nj-transition-slow), visibility 0s linear 0s;
}
.nv-mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--nj-bg-overlay);
    z-index: 1999;
}
.nv-mobile-overlay.open { display: block; }
.nv-mobile-menu-header {
    padding: 20px var(--nj-padding-container-mobile);
    border-bottom: 1px solid var(--nj-border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nv-mobile-menu-close {
    width: 24px;
    height: 24px;
    cursor: pointer;
    font-size: 20px;
    color: var(--nj-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}
.nv-mobile-service-tabs {
    display: none; /* moved to mobile header bar */
    border-bottom: 1px solid var(--nj-border-light);
}
.nv-mobile-service-tab {
    flex: 1;
    text-align: center;
    padding: 14px 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--nj-text-muted);
    border-bottom: 2px solid transparent;
}
.nv-mobile-service-tab.active {
    color: var(--nj-nineview-primary);
    font-weight: 700;
    border-bottom-color: var(--nj-nineview-primary);
}
.nv-mobile-menu-list a {
    display: block;
    padding: 14px 20px;
    font-size: 14px;
    color: var(--nj-text-primary);
    border-bottom: 1px solid var(--nj-border-lightest);
}
.nv-mobile-menu-list a:active { background: var(--nj-border-lightest); }

/* ============ Guide Banner ============ */
.nv-guide-banner {
    background: #F0F2F8;
    border-bottom: 1px solid #E2E5EE;
}
a.nv-guide-banner-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    color: #333;
    transition: opacity 0.15s;
}
a.nv-guide-banner-inner:hover { opacity: 0.75; }
.nv-guide-banner-icon {
    font-size: 28px;
    flex-shrink: 0;
}
.nv-guide-banner-text { flex: 1; min-width: 0; }
.nv-guide-banner-title {
    font-size: 14px;
    font-weight: 700;
    color: #1A1A1A;
    margin: 0 0 2px;
}
.nv-guide-banner-desc {
    font-size: 12px;
    color: #888;
}
.nv-guide-banner-arrow {
    font-size: 18px;
    color: #999;
    flex-shrink: 0;
}

/* ============ Course Grid (Main) ============ */
.nv-grid-section {
    padding: 48px 0 64px;
}
.nv-grid-section-title {
    font-size: 20px;
    font-weight: 700;
    color: #1A1A1A;
    margin: 0 0 24px;
}
.nv-course-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.nv-course-card {
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}
.nv-course-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.nv-course-card-thumb {
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: flex-end;
    padding: 16px;
    position: relative;
    overflow: hidden;
}
.nv-course-card-thumb::after {
    display: none;
}
.nv-course-card-info {
    padding: 16px;
}
.nv-course-card-name {
    font-size: 16px;
    font-weight: 700;
    color: #1A1A1A;
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nv-course-card-trader {
    font-size: 13px;
    color: #888;
    display: flex;
    align-items: center;
    gap: 6px;
}
.nv-badge-subscribed {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    color: #2D5BFF;
    background: #E8EEFF;
    padding: 1px 6px;
    border-radius: 3px;
    letter-spacing: -0.3px;
}
/* 비공개(is_open=0) 인사이트 뷰 — 어드민/담당 전문가에게만 노출되는 시각 표식. */
.nv-badge-private {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    color: #B26A00;
    background: #FFF3E0;
    padding: 1px 6px;
    border-radius: 3px;
    letter-spacing: -0.3px;
}
.nv-course-card-private {
    opacity: 0.78;
}
/* 인사이트 뷰 hero 영역의 큰 비공개 pill (어드민/전문가 사전 진입용 안내) */
.nv-course-hero-private-pill {
    display: inline-block;
    margin-bottom: 8px;
    padding: 4px 10px;
    background: #FFF3E0;
    color: #B26A00;
    border: 1px solid #FFC58A;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

/* ============ Course Home ============ */

/* --- Hero (세션 7: 기존 Context Bar + Overview Title 통합) ---
   인사이트 뷰이 두 블록에 중복 노출되던 이슈 해소. 제목·슬로건·트레이더·CTA
   를 단일 블록에 정리 — 시각적 무게감은 히어로에만 집중되고 리스트·탭
   영역과의 경계는 border-bottom 한 줄로 구분. */
.nv-course-hero {
    padding: 28px 0 22px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    border-bottom: 1px solid #EBEBEB;
}
.nv-course-hero-main {
    width: 100%;
    min-width: 0;
}
.nv-course-hero-title {
    font-size: 26px;
    font-weight: 800;
    color: #1A1A1A;
    margin: 0 0 8px;
    letter-spacing: -0.5px;
    line-height: 1.25;
}
.nv-course-hero-slogan {
    font-size: 15px;
    color: #555;
    margin-bottom: 8px;
    line-height: 1.55;
}
.nv-course-hero-trader {
    font-size: 13px;
    color: #888;
}
.nv-course-hero-action {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Lexical ImageNode/VideoNode width="0" placeholder 가 시각적으로 0 픽셀이 되어 안 보이는
   문제 응급 패치. 번들의 default 가 number 0 일 때 setAttribute("width","0") + style.width="0px"
   를 출력 — VideoNode 는 별도 저장소에서 fix 됐으나 ImageNode 미완성. attribute selector 로
   width=0 케이스만 fallback (사용자가 의도적으로 resize 한 경우의 width 값은 보존). */
.editor-image img[width="0"],
.editor-image video[width="0"],
.editor-image img[style*="width:0px"],
.editor-image img[style*="width: 0px"],
.editor-image video[style*="width:0px"],
.editor-image video[style*="width: 0px"],
.nv-course-hero-rich img[width="0"],
.nv-course-hero-rich video[width="0"],
.nv-course-hero-rich img[style*="width:0px"],
.nv-course-hero-rich img[style*="width: 0px"],
.nv-course-hero-rich video[style*="width:0px"],
.nv-course-hero-rich video[style*="width: 0px"] {
    width: auto !important;
    height: auto !important;
    max-width: 100%;
}

.nv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    white-space: nowrap;
}
a.nv-btn-primary,
.nv-btn-primary {
    background: #2D5BFF;
    color: #ffffff;
}
a.nv-btn-primary:hover,
.nv-btn-primary:hover { background: #1A3FA0; color: #ffffff; }
.nv-btn-subscribed {
    background: #F5F5F5;
    color: #999;
    cursor: default;
}
.nv-btn-outline {
    background: #fff;
    color: #2D5BFF;
    border: 1px solid #2D5BFF;
}
.nv-btn-outline:hover {
    background: #E8EEFF;
}

/* --- Hero Price Card (세션 7 v2) — 히어로 action 영역의 비구독자 전용 카드.
       이전 .nv-monthly-plan 별도 섹션은 제거 (중복 CTA + 피로감). 가격·레이블·
       버튼을 한 카드에 집약해 의사결정 단순화.
       primary accent 테두리 + 연한 배경 + 약한 그림자로 주목도만 주되 요란하지 않게. */
.nv-course-hero-pricecard {
    width: 100%;
    padding: 20px 28px;
    background: #F5F7FF;
    border: 1px solid #D6E1FF;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(45, 91, 255, 0.05);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.nv-course-hero-pricecard-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.nv-course-hero-pricecard-label {
    font-size: 12px;
    font-weight: 600;
    color: #6B7380;
    letter-spacing: 0.3px;
}
.nv-course-hero-pricecard-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.nv-course-hero-pricecard-amount {
    font-size: 26px;
    font-weight: 800;
    color: #1A1A1A;
    letter-spacing: -0.5px;
    line-height: 1.1;
}
.nv-course-hero-pricecard-unit {
    font-size: 13px;
    color: #8A93A3;
    font-weight: 500;
}
.nv-course-hero-pricecard-cta {
    flex-shrink: 0;
    text-align: center;
    padding: 14px 32px;
    font-size: 15px;
}

/* --- 표 셀 한 줄 truncate (작성자 / 긴 이름) — title 속성으로 hover 시 전체 노출 --- */
.nv-cell-truncate {
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- 탭 숨김 배지 (course.php / post_list 양쪽 공용) --- */
.nv-tab-hidden-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 600;
    color: #C62828;
    background: #FFEBEE;
    border-radius: 8px;
    vertical-align: middle;
    line-height: 1.5;
}

/* --- 공통 페이지네이션 (post_list / course.php / 향후 추가 진입점) --- */
.nv-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    margin: 24px 0;
}
.nv-pagination-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    font-size: 13px;
    color: #4A5264;
    background: #fff;
    border: 1px solid #E1E6F0;
    border-radius: 4px;
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
}
a.nv-pagination-item:hover {
    background: #F5F7FB;
    color: #1A1F2E;
    border-color: #C8D1E0;
}
.nv-pagination-current {
    background: #1A1F2E;
    color: #fff;
    border-color: #1A1F2E;
    font-weight: 600;
}
.nv-pagination-disabled {
    color: #C8D1E0;
    background: #FAFBFD;
    cursor: not-allowed;
}
.nv-pagination-ellipsis {
    border: 0;
    background: transparent;
    color: #7A8294;
    min-width: 20px;
    padding: 0 4px;
}

/* --- ADR-040 공개 기간 (작성 폼 + 어드민 행 배지) --- */
.nv-publish-range {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.nv-publish-range-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.nv-publish-range-sublabel {
    font-size: 12px;
    font-weight: 600;
    color: #4A5264;
    margin: 0;
}
.nv-publish-range-hint {
    font-size: 11px;
    color: #7A8294;
}
.nv-publish-unlimited-toggle {
    margin-top: 4px;
}
.nv-publish-until-row {
    display: flex;
    gap: 6px;
    align-items: center;
}
.nv-publish-until-row .nv-form-input {
    flex: 1 1 auto;
    min-width: 0;
}
.nv-publish-plus-btn {
    flex: 0 0 auto;
    padding: 6px 12px;
    font-size: 12px;
    white-space: nowrap;
}
@media (max-width: 720px){
    .nv-publish-range { grid-template-columns: 1fr; }
}

.nv-publish-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 4px;
    white-space: nowrap;
    line-height: 1.5;
}
.nv-publish-badge-pending {
    background: #FFF4E5;
    color: #B45309;
    border: 1px solid #FED7AA;
}
.nv-publish-badge-active {
    background: #E8F5E9;
    color: #2E7D32;
    border: 1px solid #C8E6C9;
}
.nv-publish-badge-ended {
    background: #FFEBEE;
    color: #C62828;
    border: 1px solid #FFCDD2;
}

/* --- ADR-030 §확장 (YouTube embed) — 16:9 반응형 wrapper.
       에디터 내부(별도 저장소 styles.css 와 동일 정의) + 본문 렌더 양쪽에서 사용.
       Purifier 가 .nv-youtube-embed 만 class 화이트리스트 통과시킴. --- */
.nv-youtube-embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    margin: 16px 0;
    max-width: 100%;
    background: #000;
    border-radius: 6px;
    overflow: hidden;
}
.nv-youtube-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* --- 운영자 패널 (course.php — 어드민/전문가 직진입 버튼 묶음) --- */
.nv-course-manage-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 14px 0;
    padding: 10px 14px;
    background: #F5F7FB;
    border: 1px solid #E1E6F0;
    border-radius: 6px;
}
.nv-course-manage-bar-label {
    font-size: 12px;
    font-weight: 600;
    color: #4A5264;
    letter-spacing: 0.3px;
}
.nv-course-manage-bar-btn {
    font-size: 13px;
    padding: 6px 14px;
}
.nv-course-manage-bar-hint {
    color: #7A8294;
    font-size: 12px;
    margin-left: auto;
}
@media (max-width: 720px){
    .nv-course-manage-bar-hint { width: 100%; margin-left: 0; }
}

/* --- Course Overview (세션 7 에 .nv-course-hero 로 통합, 구 규칙 제거) --- */
.nv-category-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    color: #555;
    background: #F0F0F0;
    padding: 4px 12px;
    border-radius: 16px;
}

/* --- Pinned Card News --- */
.nv-pinned-section {
    padding: 32px 0 24px;
}
.nv-pinned-section-title {
    font-size: 14px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 16px;
}
.nv-pinned-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.nv-pinned-card {
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    background: #fff;
    border: 1px solid #EBEBEB;
}
.nv-pinned-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.nv-pinned-card-thumb {
    aspect-ratio: 16 / 10;
    position: relative;
    display: flex;
    align-items: flex-end;
}
.nv-pinned-card-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
}
.nv-pinned-card-thumb-title {
    position: relative;
    z-index: 1;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 16px;
    line-height: 1.4;
    word-break: keep-all;
}
.nv-pinned-card-meta {
    padding: 10px 16px;
    font-size: 12px;
    color: #999;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nv-pinned-card-tab-badge {
    font-size: 11px;
    color: #2D5BFF;
    background: #E8EEFF;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 500;
}

/* --- Content Tabs --- */
.nv-tabs-section {
    border-bottom: 1px solid #EBEBEB;
    position: sticky;
    top: 54px; /* service-bar 52px height + border/anti-aliasing 여유. nv-nav-bar 는 2026-04-27 ADR-034 후속에서 제거됨 — 이전 104px 은 잠복 회귀. */
    background: #fff;
    z-index: 50;
}
.nv-tabs {
    display: flex;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.nv-tabs::-webkit-scrollbar { display: none; }
.nv-tab {
    padding: 14px 20px;
    font-size: 14px;
    font-weight: 500;
    color: #999;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    transition: color 0.2s;
    border: none;
    background: none;
}
.nv-tab:hover { color: #333; }
.nv-tab.active {
    color: #1A1A1A;
    font-weight: 700;
}
.nv-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20px;
    right: 20px;
    height: 2px;
    background: #2D5BFF;
}

/* --- Content Card List --- */
.nv-content-list {
    padding: 8px 0 48px;
}
.nv-content-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    border-bottom: 1px solid #F5F5F5;
    cursor: pointer;
    transition: background 0.15s;
    gap: 12px;
}
.nv-content-card:hover {
    background: #FAFAFA;
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
    border-radius: 8px;
}
.nv-content-card-body {
    flex: 1;
    min-width: 0;
}
.nv-content-card-title {
    font-size: 15px;
    font-weight: 600;
    color: #1A1A1A;
    margin: 0 0 6px;
    line-height: 1.5;
    word-break: keep-all;
}
.nv-content-card-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #999;
}
.nv-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
}
.nv-badge-tab {
    background: #F5F5F5;
    color: #666;
}
.nv-badge-public {
    background: #E8F5E9;
    color: #2E7D32;
}
.nv-badge-lock {
    background: #FFF3E0;
    color: #E65100;
    font-size: 11px;
}
.nv-content-card-date {
    font-size: 13px;
    color: #999;
    flex-shrink: 0;
}

/* 잠금 카드 — 비구독자에게 비공개 글을 "제목 가림 + 자물쇠" 로 노출 */
.nv-content-card-locked {
    cursor: default;
    background: #FAFBFD;
    user-select: none;
}
.nv-content-card-locked:hover {
    background: #FAFBFD; /* hover 효과 제거 */
}
.nv-content-card-title-locked {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #8B95A1;
    font-weight: 500;
}
.nv-lock-icon {
    font-size: 14px;
    filter: grayscale(0.2);
}
.nv-lock-text {
    letter-spacing: 0.02em;
}
.nv-content-card-locked .nv-content-card-date {
    color: #B0B8C1;
}

/* ============ Subscribe Page ============ */
.nv-subscribe-page {
    padding-bottom: 80px; /* space for sticky CTA */
}
.nv-section {
    padding: 48px 0;
    border-bottom: 1px solid #F5F5F5;
}
.nv-section:last-child { border-bottom: none; }
.nv-section-title {
    font-size: 18px;
    font-weight: 700;
    color: #1A1A1A;
    margin: 0 0 24px;
}

/* Subscribe Hero (full-width) */
.nv-subscribe-hero {
    padding: 64px 24px;
    text-align: center;
    color: #fff;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nv-subscribe-hero .nv-summary-name {
    font-size: 32px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 12px;
    letter-spacing: -0.5px;
}
.nv-subscribe-hero .nv-summary-slogan {
    font-size: 16px;
    color: rgba(255,255,255,0.8);
    margin: 0 0 8px;
}
.nv-subscribe-hero .nv-summary-trader {
    font-size: 14px;
    color: rgba(255,255,255,0.6);
    margin: 0;
}

/* 2-column layout: main + sticky side */
.nv-subscribe-layout {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    padding-top: 8px;
}
.nv-subscribe-main {
    flex: 1;
    min-width: 0;
}
.nv-subscribe-side {
    width: 280px;
    flex-shrink: 0;
    align-self: start;
    position: sticky;
    top: 112px; /* 52px service bar + 52px nav bar + 8px gap */
}
.nv-subscribe-side-card {
    background: #FAFAFA;
    border: 1px solid #EBEBEB;
    border-radius: 12px;
    padding: 28px 24px;
    text-align: center;
}
.nv-subscribe-side-price {
    font-size: 26px;
    font-weight: 800;
    color: #1A1A1A;
    margin: 0 0 4px;
}
.nv-subscribe-side-cycle {
    font-size: 13px;
    color: #999;
    margin: 0 0 20px;
}
.nv-subscribe-side-card .nv-btn-subscribe-main {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}
.nv-subscribe-side-benefits {
    list-style: none;
    padding: 0;
    /* 위 요소(버튼 1~2개 또는 form+변경 링크) 와 숨쉬는 공간 확보 —
       앞에 무엇이 오든 일관된 여백 (세션 7: 계좌 신청 버튼 추가로 margin-bottom
       누락된 경우에도 대응) */
    margin: 22px 0 0;
    text-align: left;
}
.nv-subscribe-side-benefits li {
    font-size: 13px;
    color: #666;
    padding: 6px 0;
    padding-left: 20px;
    position: relative;
}
.nv-subscribe-side-benefits li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #2D5BFF;
    font-weight: 700;
}

.nv-btn-subscribe-main {
    font-size: 16px;
    padding: 14px 32px;
}

/* PC: hide sticky bottom bar (side panel handles it) */
.nv-sticky-cta { display: none; }

/* Section 2: Course Intro */
.nv-intro-subsection {
    margin-bottom: 32px;
}
.nv-intro-subsection:last-child { margin-bottom: 0; }
.nv-intro-subtitle {
    font-size: 15px;
    font-weight: 700;
    color: #1A1A1A;
    margin: 0 0 12px;
}
.nv-intro-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.nv-intro-list li {
    padding: 8px 0;
    padding-left: 24px;
    position: relative;
    font-size: 14px;
    color: #555;
    line-height: 1.6;
}
.nv-intro-list li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: #2D5BFF;
}
.nv-intro-list.check li::before {
    content: '✓';
    color: #32C387;
}
.nv-intro-html {
    font-size: 14px;
    color: #555;
    line-height: 1.8;
}

/* Section 3: Trader Profile */
.nv-trader {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}
.nv-trader-photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
    background: #F0F3FA;
    display: block;
}
.nv-trader-info { flex: 1; }
.nv-trader-name {
    font-size: 20px;
    font-weight: 700;
    color: #1A1A1A;
    margin: 0 0 4px;
}
.nv-trader-oneliner {
    font-size: 14px;
    color: #888;
    margin: 0 0 20px;
}
.nv-trader-sub-title {
    font-size: 13px;
    font-weight: 700;
    color: #999;
    margin: 20px 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.nv-trader-text {
    font-size: 14px;
    color: #555;
    line-height: 1.8;
}
.nv-trader-bio {
    margin-top: 12px;
    padding: 14px 16px;
    background: #F8F9FA;
    border-left: 3px solid var(--nj-nineview-primary);
    border-radius: 0 var(--nj-radius-sm) var(--nj-radius-sm) 0;
    font-size: 14px;
    color: #444;
    line-height: 1.7;
    word-break: keep-all;
}

/* (콘텐츠 구성 카드 — ADR-029 §확장 폐기 2026-04-27 — CSS 클래스 일괄 제거) */

/* Section 4: Disclaimer */
.nv-disclaimer-box {
    background: #FFF8E1;
    border: 1px solid #FFE082;
    border-radius: 8px;
    padding: 24px;
}
.nv-disclaimer-title {
    font-size: 15px;
    font-weight: 700;
    color: #F57F17;
    margin: 0 0 12px;
}
.nv-disclaimer-text {
    font-size: 13px;
    color: #5D4037;
    line-height: 1.8;
}
.nv-disclaimer-text ol {
    padding-left: 20px;
    margin: 0;
}
.nv-disclaimer-text ol li {
    margin-bottom: 8px;
}

/* Section 5: Refund (collapsible) */
.nv-refund-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 16px 0;
    font-size: 16px;
    font-weight: 600;
    color: #1A1A1A;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}
.nv-refund-toggle .arrow {
    font-size: 12px;
    color: #999;
    transition: transform 0.2s;
}
.nv-refund-toggle.open .arrow {
    transform: rotate(180deg);
}
.nv-refund-content {
    display: none;
    padding: 16px 0;
    font-size: 14px;
    color: #666;
    line-height: 1.8;
}
.nv-refund-content.open { display: block; }

/* Sticky CTA */
.nv-sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #EBEBEB;
    padding: 12px 24px;
    z-index: 100;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
}
.nv-sticky-cta-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.nv-sticky-cta-info {
    font-size: 14px;
    color: #333;
}
.nv-sticky-cta-info strong {
    font-size: 18px;
    color: #2D5BFF;
}

/* ============ Content View (Article) ============ */
.nv-article {
    padding: 40px 0 64px;
    /* guide 페이지 등 article body wrapper 도 가로 스크롤 차단. .nv-cv-main 과 동일 의도. */
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
}
.nv-article-context {
    font-size: 13px;
    color: #999;
    margin: 0 0 32px;
}
.nv-article-context a {
    color: #2D5BFF;
    font-weight: 500;
}
.nv-article-title {
    font-size: 32px;
    font-weight: 800;
    color: #1A1A1A;
    line-height: 1.4;
    margin: 0 0 16px;
    word-break: keep-all;
    letter-spacing: -0.5px;
}
.nv-article-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    margin: 0 0 32px;
}
.nv-article-author {
    font-weight: 700;
    color: #1A1A1A;
}
.nv-article-date {
    color: #999;
}
.nv-article-meta .dot {
    color: #D4D4D4;
}
.nv-article-divider {
    height: 1px;
    background: #EBEBEB;
    margin: 0 0 40px;
}
.nv-article-body {
    font-size: 17px;
    line-height: 1.85;
    color: #333;
    word-break: keep-all;
    /* 긴 단어/URL 이 줄바꿈 안 돼서 가로 스크롤 유발하는 케이스 차단. */
    overflow-wrap: anywhere;
    /* 가로 스크롤 차단은 wrapper(.nv-cv-main / .nv-article) level 의 overflow-x: clip 으로 처리.
       article-body 자체에 두면 ::before/::after 워터마크(회전 nowrap 텍스트)가 잘림. */
}
.nv-article-body p {
    margin: 0 0 24px;
}
.nv-article-body h3 {
    font-size: 20px;
    font-weight: 700;
    color: #1A1A1A;
    margin: 40px 0 16px;
}
.nv-article-body img {
    max-width: 100% !important;
    /* viewport < 이미지 너비일 때 width 는 max-width 100% 로 줄어듦 (CSS 표준).
       Lexical 의 ImageComponent 가 inline height 를 set 해서 specificity 로 winning,
       모바일에서 비율 깨지므로 !important 로 auto 강제. */
    height: auto !important;
    border-radius: 8px;
    margin: 24px 0;
    cursor: zoom-in;
}
/* 본문 내 미디어 가로 스크롤 차단 — video/iframe/embed 도 동일 max-width 강제.
   (Lexical 본문은 sanitize 후 inline width 가 살아있을 수 있어 !important 필요) */
.nv-article-body video,
.nv-article-body iframe,
.nv-article-body embed,
.nv-article-body object {
    max-width: 100% !important;
}
/* 표는 col 수가 많아 자체적으로 가로가 길어질 수 있다. 본문은 안 넘기되, table 안에서만 가로 스크롤 허용. */
.nv-article-body table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
/* 코드 블록 — 긴 라인이 줄바꿈 안 되는 경우 안에서 가로 스크롤. */
.nv-article-body pre {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: pre;
}
/* Lexical wrapper(.editor-image) — block + 부모 100% 차지. align 은 자식 img margin auto.
   이전 버전(wrapper fit-content + margin auto)은 자식 width:100% 와 circular reference 로
   wrapper 가 부모 100% 까지 늘어나 align 이 무력화됐음. img 자체에 margin auto 가 안전. */
.nv-article-body .editor-image {
    display: block;
    margin: 24px 0;
    position: relative;
    /* wrapper 가 inline style="width:800px" 같은 값을 받아도 viewport 안에 가둠 */
    max-width: 100%;
}
.nv-article-body .editor-image img {
    display: block;
    max-width: 100%;
    /* inline width 미지정(inherit) 시 자연 너비 default. inline width 50%/100%/px 가 들어오면 그 값이 win.
       margin auto 가 그 너비 안에서 작동. */
    width: max-content;
    height: auto !important;
    margin: 0;
    /* 일반 .nv-article-body img 의 margin: 24px 0 + border-radius: 8px 는 그대로 상속. */
}
.nv-article-body .editor-image--align-left img { margin-right: auto; }
.nv-article-body .editor-image--align-center img { margin-left: auto; margin-right: auto; }
.nv-article-body .editor-image--align-right img { margin-left: auto; }
.nv-article-body blockquote {
    border-left: 3px solid #2D5BFF;
    padding: 12px 20px;
    margin: 24px 0;
    background: #F8F9FA;
    border-radius: 0 8px 8px 0;
    color: #555;
    font-style: italic;
}

/* Article Image Placeholder */
.nv-article-img-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #E8EEFF;
    border-radius: 8px;
    margin: 24px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5C6BC0;
    font-size: 14px;
    font-weight: 500;
}

/* Attachments */
.nv-attachments {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid #EBEBEB;
}
.nv-attachments-title {
    font-size: 13px;
    font-weight: 600;
    color: #999;
    margin: 0 0 12px;
}
.nv-attachment-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #F5F5F5;
    border-radius: 6px;
    font-size: 13px;
    color: #555;
    margin-right: 8px;
}

/* Article Navigation */
.nv-article-nav {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid #EBEBEB;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nv-article-nav a {
    font-size: 14px;
    color: #666;
    padding: 8px 16px;
    border-radius: 6px;
    transition: all 0.15s;
}
.nv-article-nav a:hover {
    background: #F5F5F5;
    color: #1A1A1A;
}
.nv-article-nav-center a {
    font-weight: 600;
}

/* Watermark overlay (subtle) */
.nv-watermark {
    position: relative;
}
.nv-watermark::before {
    content: 'najuda@sample.com';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-30deg);
    font-size: 48px;
    color: rgba(0, 0, 0, 0.03);
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
    font-weight: 700;
    letter-spacing: 8px;
}
.nv-watermark::after {
    content: 'najuda@sample.com';
    position: absolute;
    bottom: 15%;
    right: 5%;
    transform: rotate(-20deg);
    font-size: 11px;
    color: rgba(0, 0, 0, 0.015);
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
    font-weight: 400;
    letter-spacing: 2px;
}

/* --- Hidden Watermarks (distributed) --- */
.nv-wm-hidden {
    position: absolute;
    pointer-events: none;
    z-index: 10;
    white-space: nowrap;
    font-weight: 400;
    letter-spacing: 1px;
    color: rgba(0, 0, 0, 0.012);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.nv-wm-hidden.wm-tr {
    top: 8%;
    right: 3%;
    font-size: 10px;
    transform: rotate(-15deg);
}
.nv-wm-hidden.wm-bl {
    bottom: 12%;
    left: 2%;
    font-size: 11px;
    transform: rotate(25deg);
}
.nv-wm-hidden.wm-mr {
    top: 45%;
    right: 8%;
    font-size: 10px;
    transform: rotate(-35deg);
}
.nv-wm-hidden.wm-tl {
    top: 20%;
    left: 5%;
    font-size: 12px;
    transform: rotate(10deg);
}
.nv-wm-hidden.wm-bc {
    bottom: 5%;
    left: 40%;
    font-size: 10px;
    transform: rotate(-5deg);
}

/* ============ Video Placeholder ============ */
.nv-video-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #1A1A1A;
    border-radius: 8px;
    margin: 24px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}
.nv-video-placeholder-inner {
    text-align: center;
}
.nv-video-play-icon {
    font-size: 48px;
    color: rgba(255,255,255,0.7);
    margin-bottom: 8px;
}
.nv-video-label {
    font-size: 14px;
    color: rgba(255,255,255,0.5);
}
.nv-video-constraints {
    position: absolute;
    bottom: 12px;
    font-size: 11px;
    color: rgba(255,255,255,0.35);
    text-align: center;
    padding: 0 16px;
}

/* ============ Best Reviews ============ */
.nv-reviews-section {
    padding: 40px 0;
    border-top: 1px solid #F5F5F5;
}
.nv-reviews-title {
    font-size: 20px;
    font-weight: 800;
    color: #1A1A1A;
    margin: 0 0 24px;
}
.nv-reviews-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.nv-review-card {
    border: 1px solid #F0F0F0;
    border-radius: 12px;
    padding: 20px;
    background: #fff;
}
.nv-review-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
}
.nv-review-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 15px;
    font-weight: 700;
    color: rgba(255,255,255,0.8);
}
.nv-review-user-info {
    flex: 1;
    min-width: 0;
}
.nv-review-nickname {
    font-size: 14px;
    font-weight: 700;
    color: #1A1A1A;
    margin: 0 0 3px;
}
.nv-review-tags {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.nv-review-tag {
    font-size: 11px;
    color: #888;
    background: #F5F5F5;
    padding: 2px 8px;
    border-radius: 3px;
}
.nv-review-text {
    font-size: 13px;
    color: #555;
    line-height: 1.65;
    max-height: 86px;
    overflow: hidden;
    word-break: keep-all;
}
.nv-review-more {
    margin-top: 8px;
    font-size: 12px;
    color: #999;
    text-decoration: underline;
    cursor: pointer;
    text-align: right;
}
.nv-reviews-footer {
    text-align: center;
    margin-top: 24px;
}
.nv-reviews-all-link {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    padding: 10px 24px;
    border: 1px solid #D4D4D4;
    border-radius: 8px;
    display: inline-block;
    transition: all 0.15s;
}
.nv-reviews-all-link:hover {
    background: #F5F5F5;
    border-color: #999;
}

/* ============ Content View — Single Column Layout ============ */
.nv-cv-layout {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 0 64px;
}
.nv-cv-main {
    min-width: 0;
    max-width: 100%;
    /* wrapper level 안전망 — 본문 안 어떤 자식도 가로 스크롤 발생 안 시킴. */
    overflow-x: clip;
}
.nv-cv-sidebar {
    display: none;
}

/* --- Category Badge --- */
.nv-cv-category-badge {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: #1A1A1A;
    padding: 6px 0;
    border-top: 2px solid #1A1A1A;
    border-bottom: 2px solid #1A1A1A;
    margin: 0 0 28px;
}

/* --- Title --- */
.nv-cv-title {
    font-size: 28px;
    font-weight: 800;
    color: #1A1A1A;
    line-height: 1.4;
    margin: 0 0 14px;
    word-break: keep-all;
    letter-spacing: -0.5px;
}

/* --- Date --- */
.nv-cv-date {
    font-size: 13px;
    color: #999;
    margin: 0 0 24px;
}

/* --- Author --- */
.nv-cv-author {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
}
.nv-cv-author-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}
.nv-cv-author-name {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin: 0 0 16px;
}

/* --- Font Size Toggle --- */
.nv-font-size-bar {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 16px;
}
.nv-font-size-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #F5F5F5;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: #555;
    transition: background 0.15s;
    font-family: inherit;
}
.nv-font-size-btn:hover {
    background: #EBEBEB;
}
.nv-font-size-icon {
    font-size: 16px;
    font-weight: 700;
    color: #333;
}
.nv-font-size-label {
    font-size: 11px;
    color: #888;
}
.nv-article-body.nv-fs-small { font-size: 15px !important; }
.nv-article-body.nv-fs-medium { font-size: 17px !important; }
.nv-article-body.nv-fs-large { font-size: 20px !important; }

/* --- Compliance Box (정보글/의견글 본문 하단 자동 면책 안내) --- */
.nv-compliance-box {
    margin: 28px 0 24px;
    padding: 16px 20px;
    background: #FAFBFD;
    border: 1px solid #E4E8EE;
    border-left: 3px solid var(--nj-nineview-primary, #2D5BFF);
    border-radius: 6px;
    font-size: 12.5px;
    line-height: 1.65;
    color: #5A6471;
}
.nv-compliance-box-title {
    font-size: 12.5px;
    font-weight: 700;
    color: #3A4350;
    margin: 0 0 8px;
    letter-spacing: -0.2px;
}
.nv-compliance-box-list {
    margin: 0;
    padding-left: 20px;
}
.nv-compliance-box-list li { margin-bottom: 4px; }
.nv-compliance-box-list li:last-child { margin-bottom: 0; }
.nv-compliance-box-list strong { color: #3A4350; }

/* 글쓰기 폼 — 컴플라이언스 분류 radio */
.nv-compliance-radio-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.nv-compliance-radio-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: #FAFBFD;
    border: 1px solid var(--nj-border-lightest);
    border-radius: 6px;
    cursor: pointer;
    transition: background var(--nj-transition-fast);
}
.nv-compliance-radio-option:hover { background: #F4F7FB; }
.nv-compliance-radio-option input[type="radio"] { margin-top: 3px; flex-shrink: 0; }
.nv-compliance-radio-option strong { font-size: 14px; color: var(--nj-dark); }
.nv-compliance-radio-option .nv-flag-desc {
    display: block;
    font-size: 12px;
    color: #888;
    margin-top: 2px;
    line-height: 1.55;
}

/* --- Action Buttons --- */
.nv-cv-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 0 0 24px;
}
.nv-cv-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.15s;
}
.nv-cv-action-btn:hover {
    background: #F5F5F5;
}
.nv-cv-icon-heart::before {
    content: '\2661';
    font-size: 16px;
}
.nv-cv-icon-share::before {
    content: '\21E7';
    font-size: 16px;
}
.nv-cv-divider {
    height: 1px;
    background: #EBEBEB;
    margin: 0 0 32px;
}

/* --- Sidebar Sections --- */
.nv-cv-sidebar-section {
    margin-bottom: 40px;
}
.nv-cv-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 16px;
}
.nv-cv-sidebar-title {
    font-size: 16px;
    font-weight: 800;
    color: #1A1A1A;
    margin: 0;
}

/* Period Tabs (일간/주간) */
.nv-cv-period-tabs {
    display: flex;
    border: 1px solid #EBEBEB;
    border-radius: 6px;
    overflow: hidden;
}
.nv-cv-period-tab {
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 500;
    color: #999;
    cursor: pointer;
    background: #fff;
    transition: all 0.15s;
}
.nv-cv-period-tab.active {
    background: #1A1A1A;
    color: #fff;
}

/* Popular Content List */
.nv-cv-popular-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.nv-cv-popular-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #F5F5F5;
}
.nv-cv-popular-rank {
    font-size: 16px;
    font-weight: 800;
    color: #1A1A1A;
    min-width: 20px;
    flex-shrink: 0;
    line-height: 1.3;
}
.nv-cv-popular-info {
    flex: 1;
    min-width: 0;
}
.nv-cv-popular-title {
    font-size: 13px;
    font-weight: 600;
    color: #1A1A1A;
    line-height: 1.4;
    margin: 0 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nv-cv-popular-date {
    font-size: 11px;
    color: #999;
}
.nv-cv-popular-thumb {
    width: 64px;
    height: 64px;
    border-radius: 6px;
    flex-shrink: 0;
}

/* Category Content List */
.nv-cv-category-list {
    display: flex;
    flex-direction: column;
}
.nv-cv-category-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #F5F5F5;
    transition: opacity 0.15s;
}
.nv-cv-category-item:hover {
    opacity: 0.7;
}
.nv-cv-category-thumb {
    width: 80px;
    height: 56px;
    border-radius: 6px;
    flex-shrink: 0;
}
.nv-cv-category-info {
    flex: 1;
    min-width: 0;
}
.nv-cv-category-item-title {
    font-size: 13px;
    font-weight: 600;
    color: #1A1A1A;
    line-height: 1.4;
    margin: 0 0 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nv-cv-category-item-meta {
    font-size: 11px;
    color: #999;
    display: flex;
    align-items: center;
    gap: 8px;
}
.nv-cv-like-count {
    color: #999;
}

/* ============ Notice Board ============ */
.nv-notice-page {
    padding: 48px 0 64px;
}
.nv-notice-header {
    margin: 0 0 32px;
}
.nv-notice-page-title {
    font-size: 24px;
    font-weight: 800;
    color: #1A1A1A;
    margin: 0 0 8px;
    letter-spacing: -0.5px;
}
.nv-notice-page-desc {
    font-size: 14px;
    color: #999;
    margin: 0;
}
.nv-notice-list {
    border-top: 2px solid #1A1A1A;
}
.nv-notice-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 12px;
    border-bottom: 1px solid #F0F0F0;
    gap: 16px;
    transition: background 0.15s;
}
.nv-notice-row:hover {
    background: #FAFAFA;
}
.nv-notice-row.pinned {
    background: #F8F9FC;
}
.nv-notice-row.pinned:hover {
    background: #F0F2F8;
}
.nv-notice-row-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}
.nv-notice-pin-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    color: #2D5BFF;
    background: #E8EEFF;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: -0.3px;
}
.nv-notice-row-title {
    font-size: 15px;
    font-weight: 500;
    color: #1A1A1A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nv-notice-row.pinned .nv-notice-row-title {
    font-weight: 600;
}
.nv-notice-row-date {
    font-size: 13px;
    color: #999;
    flex-shrink: 0;
}

/* Notice Pagination */
.nv-notice-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-top: 40px;
}
.nv-notice-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: 14px;
    font-weight: 500;
    color: #666;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}
.nv-notice-page-btn:hover {
    background: #F5F5F5;
    color: #1A1A1A;
}
.nv-notice-page-btn.active {
    background: #2D5BFF;
    color: #fff;
    font-weight: 700;
}
.nv-notice-page-btn.disabled {
    color: #D4D4D4;
    cursor: default;
}
.nv-notice-page-btn.disabled:hover {
    background: transparent;
    color: #D4D4D4;
}

/* ============ Placeholder Images ============ */
.nv-placeholder-img {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.55);
    font-size: 13px;
    font-weight: 500;
}
.nv-placeholder-img.blue { background: #1E3A6E; }
.nv-placeholder-img.purple { background: #3C2A5C; }
.nv-placeholder-img.teal { background: #1A4A4A; }
.nv-placeholder-img.orange { background: #5C3A2A; }
.nv-placeholder-img.red { background: #5C2A2A; }
.nv-placeholder-img.green { background: #2A4A3A; }
.nv-placeholder-img.navy { background: #0F2137; }
.nv-placeholder-img.gray { background: #3A3F44; }
.nv-placeholder-img.indigo { background: #252D5C; }

/* ============ Instructor Portal — R51 ============ */
.nv-instructor-page {
    padding: 40px 0 64px;
}
.nv-instructor-header {
    margin-bottom: 24px;
}
.nv-instructor-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--nj-dark);
    margin: 0 0 6px;
    letter-spacing: -0.5px;
}
.nv-instructor-desc {
    font-size: 14px;
    color: var(--nj-text-muted);
    margin: 0;
}
.nv-instructor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.nv-instructor-card {
    display: block;
    background: #fff;
    border: 1px solid var(--nj-border-light);
    border-radius: var(--nj-radius-lg);
    padding: 20px;
    text-decoration: none;
    color: inherit;
    transition: all var(--nj-transition-fast);
}
.nv-instructor-card:hover {
    border-color: var(--nj-nineview-primary);
    box-shadow: var(--nj-shadow-md);
    transform: translateY(-2px);
}
.nv-instructor-card-role {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: var(--nj-nineview-primary);
    background: #E8EEFF;
    padding: 2px 8px;
    border-radius: 3px;
    margin-bottom: 10px;
    letter-spacing: 0.2px;
}
.nv-instructor-card-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--nj-dark);
    margin-bottom: 6px;
    letter-spacing: -0.3px;
}
.nv-instructor-card-slogan {
    font-size: 13px;
    color: var(--nj-text-muted);
    margin-bottom: 10px;
    line-height: 1.5;
    word-break: keep-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nv-instructor-card-meta {
    font-size: 12px;
    color: var(--nj-text-tertiary);
    margin-bottom: 14px;
}
.nv-instructor-card-cta {
    font-size: 13px;
    font-weight: 600;
    color: var(--nj-nineview-primary);
    padding-top: 12px;
    border-top: 1px solid var(--nj-border-lightest);
}
@media (max-width: 870px) {
    .nv-instructor-page { padding: 28px 0 48px; }
    .nv-instructor-title { font-size: 20px; }
    .nv-instructor-grid { grid-template-columns: 1fr; }
}

/* ============ Shared admin-style components — 전문가 포털에도 적용 (2026-04-19) ============ */
/* nv_admin.css 는 /NineviewAdmin/ 전용. 전문가 포털(/nineview/instructor/) 은
   이 CSS 를 로드하지 않아 .nv-admin-table / .nv-admin-section / .nv-admin-card*
   클래스가 무스타일로 렌더되던 문제를 해소. */

.nv-admin-section {
    background: #fff;
    border: 1px solid var(--nj-border-light, #E4E8EE);
    border-radius: var(--nj-radius-md, 10px);
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 1px 2px rgba(15, 33, 55, 0.04);
}
.nv-admin-section h2 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--nj-dark, #1a2332);
    letter-spacing: -0.2px;
}
.nv-admin-section p { color: #6B7380; }

.nv-admin-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}
.nv-admin-card {
    background: #fff;
    border: 1px solid var(--nj-border-light, #E4E8EE);
    border-radius: var(--nj-radius-md, 10px);
    padding: 20px;
    box-shadow: 0 1px 2px rgba(15, 33, 55, 0.04);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.nv-admin-card:hover {
    box-shadow: 0 4px 12px rgba(15, 33, 55, 0.08);
    transform: translateY(-1px);
}
.nv-admin-card-label {
    font-size: 12px;
    color: #6B7380;
    margin-bottom: 8px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.nv-admin-card-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--nj-nineview-primary, #2D5BFF);
    line-height: 1.1;
    letter-spacing: -0.5px;
}
.nv-admin-card-unit {
    font-size: 14px;
    font-weight: 500;
    color: #8A93A3;
    margin-left: 2px;
}
.nv-admin-card-sub {
    margin-top: 6px;
    font-size: 12px;
    color: #6B7380;
}
.nv-admin-card-sub a {
    color: var(--nj-nineview-primary, #2D5BFF);
    font-weight: 500;
}
.nv-admin-card-sub a:hover { text-decoration: underline; }
.nv-admin-card-alert {
    border-color: #FFCDD2;
    background: #FFF8F8;
}
.nv-admin-card-alert .nv-admin-card-value { color: #C62828; }

/* Table — 100% 너비 강제 (전문가 포털 post_list 왼쪽 치우침 근본 해소) */
.nv-admin-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}
.nv-admin-table th {
    text-align: left;
    padding: 12px;
    font-size: 12px;
    color: #6B7380;
    border-bottom: 2px solid var(--nj-dark, #1a2332);
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    background: #FAFBFD;
}
.nv-admin-table td {
    padding: 12px;
    border-bottom: 1px solid var(--nj-border-light, #E4E8EE);
    font-size: 14px;
    color: var(--nj-dark, #1a2332);
    vertical-align: middle;
}
.nv-admin-table tr:last-child td { border-bottom: 0; }
.nv-admin-table tr:hover td { background: #F8FAFF; }
/* 일반 링크만 파란색 — .nv-btn* 계열 (배경/텍스트 자체 스타일 보유) 은 제외 */
.nv-admin-table a:not(.nv-btn) { color: var(--nj-nineview-primary, #2D5BFF); text-decoration: none; }
.nv-admin-table a:not(.nv-btn):hover { text-decoration: underline; }

/* .nv-instructor-table-wrap 안의 테이블 은 항상 100% 너비, 둥근 구석 clip */
.nv-instructor-table-wrap { overflow: hidden; }
.nv-instructor-table-wrap > table,
.nv-instructor-table-wrap .nv-admin-table {
    width: 100%;
    margin: 0;
}

@media (max-width: 870px) {
    .nv-admin-section { padding: 18px 16px; }
    .nv-admin-cards { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
    .nv-admin-card { padding: 16px; }
    .nv-admin-card-value { font-size: 22px; }
    .nv-admin-table { font-size: 13px; }
    .nv-admin-table th,
    .nv-admin-table td { padding: 10px 8px; }
}
@media (max-width: 480px) {
    .nv-admin-cards { grid-template-columns: 1fr; }
    .nv-admin-table th,
    .nv-admin-table td { padding: 8px 6px; font-size: 12.5px; }
}

/* ============ Form Controls — 공용 폼 요소 (2026-04-19) ============ */
/* 전문가 포털 (/nineview/instructor/) + 어드민 (/NineviewAdmin/) 양쪽 공용.
   로드 순서상 nv_admin.css 이후에 적용되어 덮어씀. */

.nv-form-group { margin-bottom: 18px; }

.nv-form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #2D3748;
    margin-bottom: 8px;
    letter-spacing: -0.1px;
}

/* ============ Form Inputs ============
   "입력 칸" 임을 시각적으로 명확히 — 흰색 배경 + 옅은 보더로는 disabled/static 과 구분 안 됨.
   - 정상: primary 톤의 옅은 블루 tint + 1.5px 보더 + 안쪽 음영 → 한눈에 띄는 입력 칸
   - hover/focus: 흰색 배경 + primary 보더 + outer ring → 활성 시그널
   - readonly/disabled: 진한 회색 + 음영 제거 → 명확한 비활성 구분 */
.nv-form-input,
.nv-form-textarea,
select.nv-form-input {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #B8C5E8;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    color: var(--nj-dark, #1a2332);
    /* 단축 background 가 아닌 background-color 만 사용 — 단축속성은 background-image/position/size 도 리셋해서
       select 의 caret(background-image + background-position) 이 hover 전환 시 좌측으로 날아가는 회귀 발생. */
    background-color: #E5EDFE;
    line-height: 1.5;
    box-shadow: inset 0 1px 2px rgba(45, 91, 255, 0.08);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    box-sizing: border-box;
}

.nv-form-input::placeholder,
.nv-form-textarea::placeholder {
    color: #8A93A3;
    opacity: 1;
}

.nv-form-input:hover:not(:disabled):not([readonly]),
.nv-form-textarea:hover:not(:disabled):not([readonly]),
select.nv-form-input:hover:not(:disabled):not([readonly]) {
    border-color: var(--nj-primary, #2D5BFF);
    background-color: #fff;
}

/* nv_image_uploader.js — 어드민 이미지 업로드 위젯 */
.nv-image-uploader {
    border: 1px dashed #D5DAE3;
    border-radius: 6px;
    padding: 10px;
    background: #FAFBFD;
}
.nv-image-uploader-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.nv-image-uploader .nv-iu-preview {
    width: 120px;
    height: 70px;
    object-fit: cover;
    border-radius: 4px;
    background: #fff;
    border: 1px solid #E5E8EE;
    flex-shrink: 0;
}
.nv-image-uploader-controls {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
}
.nv-image-uploader .nv-iu-status {
    font-size: 12px;
    color: #6B7380;
}
.nv-image-uploader .nv-iu-url {
    font-size: 12px;
    background: #fff;
}

/* 인사이트 뷰 자산 일람 (course_info 하단 details) */
.nv-image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    padding: 10px 0;
}
.nv-image-card {
    border: 1px solid #E5E8EE;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}
.nv-image-card-label {
    font-size: 11px;
    color: #4A5264;
    padding: 6px 10px;
    background: #F4F6FA;
    border-bottom: 1px solid #E5E8EE;
    font-weight: 600;
}
.nv-image-card-thumb {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
    background: #F4F6FA;
}
.nv-image-card-meta {
    padding: 6px 10px;
    font-size: 11px;
}
.nv-image-card-meta a {
    color: #1a73e8;
    text-decoration: none;
}
.nv-image-card-meta a:hover {
    text-decoration: underline;
}

.nv-form-input:focus,
.nv-form-textarea:focus,
select.nv-form-input:focus {
    border-color: var(--nj-nineview-primary, #2D5BFF);
    background-color: #fff;
    outline: none;
    box-shadow: 0 0 0 4px rgba(45, 91, 255, 0.18);
}

/* 라벨도 함께 강조 — focus 중인 그룹의 라벨이 primary 색으로 바뀌어 사용자 주목점 표시 */
.nv-form-group:focus-within > .nv-form-label {
    color: var(--nj-primary, #2D5BFF);
}

.nv-form-textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.7;
}

/* :read-only 는 native pseudo-class 로, <select> 처럼 텍스트 편집이 불가능한 요소를
   자동으로 :read-only 로 판정한다 (브라우저 사양). select 는 :read-only 매칭에서 명시 제외 —
   readonly 디자인이 select 에 잘못 적용되는 것 방지. select 의 비활성은 :disabled 로 표현. */
.nv-form-input:read-only:not(select),
.nv-form-input[readonly],
.nv-form-textarea:read-only,
.nv-form-textarea[readonly] {
    background-color: #ECEFF4;
    color: #8A93A3;
    border-color: #D5DAE3;
    box-shadow: none;
    /* cursor 는 기본 (텍스트 선택·복사 가능) — readonly 는 비활성 아님.
       완전 비활성은 아래 :disabled 규칙에서만 not-allowed 표시. */
}

.nv-form-input:disabled,
.nv-form-textarea:disabled,
select.nv-form-input:disabled {
    background-color: #E4E8EF;
    color: #B0B8C4;
    cursor: not-allowed;
    opacity: 0.9;
    box-shadow: none;
}

/* Select 전용: 브라우저 기본 chrome 제거 + caret + cursor.
   공통 input 디자인이 강하니 caret 은 차분하게 (다크 그레이) — 너무 튀면 시선 분산.
   hover 도 공통 룰 (border primary + 흰 배경) 만 사용, outer 글로우 없음 → input/textarea 와 일관. */
select.nv-form-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 38px;
    /* caret 다크 그레이 #374151 — 입력 텍스트 톤과 매칭. focus 시 재설정 금지 (열린 드롭다운 option 에 복제 방지) */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%23374151' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    cursor: pointer;
}
select.nv-form-input::-ms-expand { display: none; }

/* placeholder option (value="") 만 회색 — 드롭다운 리스트에서 "선택해주세요" 톤 분리 */
select.nv-form-input option[value=""] {
    color: #8A93A3;
}
/* placeholder 가 선택된 상태(=미선택) 일 때 select 자체 텍스트도 회색 — 선택 vs 미선택 시각 구분.
   :has() 미지원 옛 브라우저(Chrome <105 등)는 진한 색으로 폴백 — 동작 무영향. */
select.nv-form-input:has(option[value=""]:checked) {
    color: #8A93A3;
}

/* 드롭다운이 열렸을 때 각 option 에 부모의 caret SVG 가 상속/반복 렌더되는 버그 차단
   (Firefox 및 일부 Chrome 버전에서 background 가 option 에 전파되어 파란 화살표가
   option 마다 찍히는 현상 방지). background-image: none 을 !important 로 강제. */
select.nv-form-input option {
    background-image: none !important;
    background-color: #fff;
    padding: 6px 10px;
}
select.nv-form-input option:not([value=""]) {
    color: var(--nj-dark, #1a2332);
}
select.nv-form-input option:checked,
select.nv-form-input option:hover {
    background-color: #F5F7FF;
    background-image: none !important;
}

/* Checkbox / Radio — native 요소 색상만 테마화 */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--nj-nineview-primary, #2D5BFF);
    cursor: pointer;
}

/* Number input spinner — 기본 유지 (브라우저 UX 존중) */
.nv-form-input[type="number"] {
    -moz-appearance: textfield;
}
.nv-form-input[type="number"]:focus {
    -moz-appearance: number-input;
}

/* File input — 업로드 버튼 시각 개선 (브라우저별 한계 있음) */
.nv-form-input[type="file"] {
    padding: 8px 12px;
    cursor: pointer;
}
.nv-form-input[type="file"]::-webkit-file-upload-button {
    margin-right: 12px;
    padding: 6px 14px;
    border: 1px solid var(--nj-border-light, #E4E8EE);
    border-radius: 6px;
    background: #F4F6FA;
    color: var(--nj-dark, #1a2332);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.nv-form-input[type="file"]::-webkit-file-upload-button:hover {
    background: #E9EDF3;
}

/* 필터 바 내 select — 약한 그림자로 분리감 */
.nv-instructor-filter-bar select.nv-form-input {
    box-shadow: 0 1px 2px rgba(15, 33, 55, 0.03);
}
.nv-instructor-filter-bar select.nv-form-input:focus {
    box-shadow: 0 0 0 3px rgba(45, 91, 255, 0.14), 0 1px 2px rgba(15, 33, 55, 0.05);
}

/* 에러/유효성 — required 미충족 + touched 상태만 */
.nv-form-input:invalid:not(:placeholder-shown):not(:focus) {
    border-color: #E88080;
}
.nv-form-input:invalid:not(:placeholder-shown):not(:focus):hover {
    border-color: #D06060;
}

/* 폼 input 높이 차 보정 (select 은 row 정렬 시 아래로 삐져나가기 쉬움) */
.nv-instructor-filter-bar .nv-form-input,
.nv-instructor-filter-bar select.nv-form-input {
    height: 40px;
    padding-top: 0;
    padding-bottom: 0;
}

/* ============ Instructor Portal — 콘텐츠 작성 박스 보강 (R72) ============ */

/* 공통 컨테이너 박스 (write_post 폼 wrap / post_list 테이블 wrap) */
.nv-instructor-form-box,
.nv-instructor-table-wrap {
    background: #fff;
    border: 1px solid var(--nj-border-light);
    border-radius: var(--nj-radius-md);
    box-shadow: 0 1px 2px rgba(15, 33, 55, 0.04);
    margin-top: 20px;
}
.nv-instructor-form-box { padding: 28px 28px 24px; }
.nv-instructor-table-wrap { overflow: hidden; }

/* Breadcrumb */
.nv-instructor-breadcrumb {
    font-size: 12px;
    color: var(--nj-text-muted);
    margin-bottom: 8px;
    line-height: 1.6;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
}
.nv-instructor-breadcrumb a {
    color: var(--nj-nineview-primary);
    text-decoration: none;
}
.nv-instructor-breadcrumb a:hover { text-decoration: underline; }
.nv-instructor-breadcrumb-sep {
    color: #ccc;
    margin: 0 6px;
    user-select: none;
}
.nv-instructor-breadcrumb-current {
    color: var(--nj-dark);
    font-weight: 500;
}

/* 섹션 헤더 (제목 + 우측 액션 버튼 정렬) */
.nv-instructor-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 4px;
}
.nv-instructor-section-head .nv-instructor-title {
    margin: 0;
}

/* HTML 태그 가이드 details 박스 (write_post) */
.nv-instructor-html-guide {
    margin-bottom: 10px;
    background: #F8F9FB;
    border: 1px solid var(--nj-border-lightest);
    border-radius: var(--nj-radius-sm, 6px);
    padding: 10px 14px;
    transition: all var(--nj-transition-fast);
}
.nv-instructor-html-guide[open] {
    background: #FCFCFD;
    border-color: #DDE3EE;
}
.nv-instructor-html-guide > summary {
    cursor: pointer;
    font-size: 12px;
    color: #555;
    user-select: none;
    outline: none;
}
.nv-instructor-html-guide > summary::-webkit-details-marker { color: var(--nj-nineview-primary); }
.nv-instructor-html-guide-body {
    margin-top: 10px;
    font-size: 12px;
    color: #555;
    line-height: 1.85;
}
.nv-instructor-html-guide-body code {
    background: #fff;
    padding: 1px 6px;
    border-radius: 3px;
    border: 1px solid #E4E8EE;
    font-family: 'Menlo', 'Consolas', monospace;
    font-size: 11.5px;
    color: #2D5BFF;
}

/* 미리보기 토글 버튼 행 (R66) */
.nv-instructor-preview-toggle-row {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 6px;
}

/* 미리보기 렌더 박스 (R66 nv-post-preview) */
#nv-post-preview {
    min-height: 400px;
    padding: 20px 24px;
    border: 1px dashed var(--nj-nineview-primary);
    border-radius: var(--nj-radius-md);
    background: linear-gradient(180deg, #FAFCFF 0%, #FFFFFF 100%);
    line-height: 1.75;
    color: var(--nj-dark);
}
#nv-post-preview:empty::before {
    content: "본문 내용이 비어 있습니다.";
    color: var(--nj-text-tertiary);
    font-style: italic;
}
#nv-post-preview h3 {
    font-size: 17px;
    font-weight: 700;
    margin: 18px 0 8px;
    color: var(--nj-dark);
}
#nv-post-preview p { margin: 0 0 12px; }
#nv-post-preview blockquote {
    border-left: 3px solid var(--nj-nineview-primary);
    padding: 4px 0 4px 14px;
    margin: 10px 0;
    color: #555;
    background: #F5F8FF;
}
#nv-post-preview img { max-width: 100%; height: auto; border-radius: 4px; margin: 8px 0; }
#nv-post-preview a { color: var(--nj-nineview-primary); }

/* 카운터 (글자수) */
.nv-instructor-counter {
    font-size: 11px;
    color: #999;
    margin-top: 4px;
    text-align: right;
}

/* 공개/고정 체크박스 레이블 박스 */
.nv-instructor-flag-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: #FAFBFD;
    border: 1px solid var(--nj-border-lightest);
    border-radius: var(--nj-radius-sm, 6px);
    cursor: pointer;
    transition: background var(--nj-transition-fast);
}
.nv-instructor-flag-option:hover { background: #F4F7FB; }
.nv-instructor-flag-option input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }
.nv-instructor-flag-option strong { font-size: 14px; color: var(--nj-dark); }
.nv-instructor-flag-option .nv-flag-desc {
    display: block;
    font-size: 12px;
    color: #888;
    margin-top: 2px;
    line-height: 1.55;
}
.nv-instructor-flag-option em {
    font-style: normal;
    color: var(--nj-nineview-primary);
    font-weight: 600;
}

/* 폼 툴바 (작성·취소·프런트에서 보기 버튼 정렬) */
.nv-instructor-form-toolbar {
    display: flex;
    gap: 10px;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--nj-border-lightest);
    align-items: center;
    flex-wrap: wrap;
}
.nv-instructor-form-toolbar .nv-instructor-toolbar-spacer { margin-left: auto; }

/* 위험 영역 (삭제 form) */
.nv-instructor-danger-zone {
    margin-top: 20px;
    padding: 16px 18px;
    background: #FFF6F6;
    border: 1px solid #F9D7D7;
    border-radius: var(--nj-radius-md);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.nv-instructor-danger-zone small { color: #999; font-size: 11.5px; }

/* 자동저장 토스트 (R67 nv-draft-toast)
   화면 가운데 큼직하게 — 디지털 익숙치 않은 사용자 대상으로 한눈에 인식되도록.
   1.8~2.5초 자동 닫힘. pointer-events:none 으로 본문 클릭 차단 안 함. */
#nv-draft-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(15, 33, 55, 0.96);
    color: #fff;
    padding: 28px 48px;
    border-radius: 16px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    z-index: 10000;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.32), 0 8px 24px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    min-width: 280px;
    max-width: 480px;
    pointer-events: none;
    animation: nvToastIn 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes nvToastIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* post_list 필터 바 (인사이트 뷰 드롭다운 + 삭제된 글 포함 체크) */
.nv-instructor-filter-bar {
    margin-top: 16px;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px 14px;
    background: #F8F9FB;
    border: 1px solid var(--nj-border-lightest);
    border-radius: var(--nj-radius-sm, 6px);
}
.nv-instructor-filter-bar label {
    font-size: 13px;
    color: #666;
}
.nv-instructor-filter-bar .nv-instructor-filter-spacer { margin-left: auto; }
.nv-instructor-filter-bar input[type="checkbox"] { margin-right: 4px; vertical-align: middle; }

/* post_list 탭 버튼 바 */
.nv-instructor-tab-bar {
    display: flex;
    gap: 6px;
    margin-top: 16px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--nj-border-lightest);
    padding-bottom: 0;
    margin-bottom: 0;
}
.nv-instructor-tab-bar .nv-btn {
    padding: 8px 16px;
    font-size: 13px;
    border-radius: 6px 6px 0 0;
    margin-bottom: -1px;
}

/* post_list 빈 상태 셀 */
.nv-instructor-empty-cell {
    text-align: center;
    color: #999;
    padding: 48px 20px;
}
.nv-instructor-empty-cell > div { margin-bottom: 14px; font-size: 14px; }

/* post_list 페이지네이션 */
.nv-instructor-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border-top: 1px solid var(--nj-border-lightest);
}
.nv-instructor-pagination-info {
    color: #666;
    font-size: 13px;
}

/* R68 KPI 카드 영역 (instructor/index.php) */
.nv-instructor-kpi-section {
    margin: 20px 0 28px;
}
.nv-instructor-kpi-section .nv-admin-card {
    background: #fff;
    border: 1px solid var(--nj-border-light);
    border-radius: var(--nj-radius-md);
    padding: 18px 20px;
    box-shadow: 0 1px 2px rgba(15, 33, 55, 0.03);
    transition: transform var(--nj-transition-fast), box-shadow var(--nj-transition-fast);
}
.nv-instructor-kpi-section .nv-admin-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(15, 33, 55, 0.06);
}

/* R68 최근 게시물 섹션 */
.nv-instructor-recent-section h2 {
    font-size: 15px;
    margin: 0 0 10px;
    color: var(--nj-dark);
    font-weight: 700;
}
.nv-instructor-recent-table {
    background: #fff;
    border: 1px solid var(--nj-border-light);
    border-radius: var(--nj-radius-md);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 33, 55, 0.03);
}
.nv-instructor-recent-table table { margin: 0; }

/* 폼 라벨 보조 — 필수 별표 */
.nv-instructor-form-box .nv-form-label {
    font-weight: 600;
    color: var(--nj-dark);
}
.nv-instructor-required {
    color: #E74C3C;
    margin-left: 2px;
}
.nv-instructor-label-hint {
    color: #999;
    font-size: 12px;
    font-weight: 400;
    margin-left: 6px;
}

/* textarea 본문 (write_post) — preview와 전환 시 같은 영역 차지 */
.nv-instructor-body-textarea {
    min-height: 400px;
    font-family: 'Menlo', 'Consolas', 'D2Coding', monospace;
    font-size: 13px;
    line-height: 1.6;
}

/* 전문가 포털 반응형 */
@media (max-width: 870px) {
    .nv-instructor-form-box { padding: 20px 18px 18px; }
    .nv-instructor-form-toolbar { gap: 8px; padding-top: 14px; }
    .nv-instructor-form-toolbar .nv-instructor-toolbar-spacer { margin-left: 0; width: 100%; }
    .nv-instructor-filter-bar { padding: 10px; }
    .nv-instructor-kpi-section .nv-admin-card { padding: 14px 16px; }
}
@media (max-width: 480px) {
    .nv-instructor-form-box { padding: 16px 14px; }
    #nv-post-preview { padding: 14px 16px; min-height: 260px; }
    .nv-instructor-danger-zone { padding: 12px 14px; }
    #nv-draft-toast {
        padding: 22px 32px;
        font-size: 17px;
        min-width: 220px;
        max-width: calc(100vw - 32px);
        border-radius: 14px;
    }
}

/* ============ Error Page — R44 ============ */
.nv-error-page {
    padding: 80px 20px;
    text-align: center;
}
.nv-error-code {
    font-size: 72px;
    font-weight: 800;
    color: var(--nj-nineview-primary);
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: -2px;
}
.nv-error-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--nj-dark);
    margin: 0 0 16px;
    letter-spacing: -0.3px;
}
.nv-error-desc {
    font-size: 15px;
    color: var(--nj-text-secondary);
    line-height: 1.7;
    margin: 0 0 32px;
    word-break: keep-all;
}
.nv-error-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.nv-error-hint {
    font-size: 13px;
    color: var(--nj-text-muted);
    padding-top: 24px;
    border-top: 1px solid var(--nj-border-light);
    margin-top: 16px;
}
.nv-error-hint a {
    color: var(--nj-nineview-primary);
    font-weight: 500;
}
.nv-error-hint a:hover { text-decoration: underline; }
@media (max-width: 870px) {
    .nv-error-page { padding: 56px 16px; }
    .nv-error-code { font-size: 56px; }
    .nv-error-title { font-size: 18px; }
}

/* ============ Subscribe Disclaimer Accordion — R26 ============ */
.nv-disclaimer-accordion {
    border: 1px solid var(--nj-border-light);
    border-radius: var(--nj-radius-lg);
    overflow: hidden;
    background: #fff;
}
.nv-disclaimer-accordion .nv-disclaimer-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 16px 20px;
    border: none;
    border-bottom: 1px solid var(--nj-border-light);
    background: var(--nj-bg-muted);
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--nj-dark);
    text-align: left;
    transition: background var(--nj-transition-fast);
}
.nv-disclaimer-accordion .nv-disclaimer-toggle:hover {
    background: var(--nj-bg-light);
}
.nv-disclaimer-accordion .nv-disclaimer-toggle .arrow {
    color: var(--nj-text-muted);
    font-size: 11px;
    transition: transform var(--nj-transition-fast);
    flex-shrink: 0;
    margin-left: 12px;
}
.nv-disclaimer-accordion .nv-disclaimer-toggle.open .arrow {
    transform: rotate(180deg);
}
.nv-disclaimer-accordion .nv-disclaimer-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.nv-disclaimer-accordion .nv-disclaimer-warn {
    color: #F57F17;
}
.nv-disclaimer-accordion .nv-disclaimer-mark {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
}
.nv-disclaimer-accordion .nv-disclaimer-mark-blue {
    background: #E8EEFF;
    color: var(--nj-nineview-primary);
}
.nv-disclaimer-accordion .nv-disclaimer-mark-amber {
    background: #FFF8E1;
    color: #F57F17;
}
.nv-disclaimer-accordion .nv-disclaimer-content {
    display: none;
    padding: 20px 24px;
    border-bottom: 1px solid var(--nj-border-light);
    font-size: 13px;
    color: var(--nj-text-primary);
    line-height: 1.8;
    background: #fff;
}
.nv-disclaimer-accordion .nv-disclaimer-content.open {
    display: block;
}
.nv-disclaimer-accordion .nv-disclaimer-content ol {
    padding-left: 20px;
    margin: 0;
}
.nv-disclaimer-accordion .nv-disclaimer-content ol li {
    margin-bottom: 8px;
}
.nv-disclaimer-accordion > *:last-child {
    border-bottom: none;
}

/* ============ Article Nav 3-column (이전/목록/다음) — R24 ============ */
.nv-article-nav-3col {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    align-items: stretch;
    padding-top: 24px;
    border-top: 1px solid var(--nj-border-light);
    margin-top: 48px;
}
.nv-article-nav-prev,
.nv-article-nav-next {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid var(--nj-border-light);
    border-radius: var(--nj-radius-md);
    text-decoration: none;
    color: var(--nj-text-primary);
    font-size: 14px;
    line-height: 1.4;
    transition: all var(--nj-transition-fast);
    min-width: 0;
}
.nv-article-nav-next {
    text-align: right;
}
a.nv-article-nav-prev:hover,
a.nv-article-nav-next:hover {
    border-color: var(--nj-nineview-primary);
    background: #F5F7FF;
    color: var(--nj-dark);
}
.nv-article-nav-dir {
    font-size: 12px;
    color: var(--nj-text-muted);
    font-weight: 500;
}
.nv-article-nav-title {
    font-weight: 600;
    color: var(--nj-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nv-article-nav-empty {
    opacity: 0.45;
    background: var(--nj-bg-muted);
}
.nv-article-nav-empty .nv-article-nav-title {
    color: var(--nj-text-muted);
    font-weight: 400;
}
.nv-article-nav-3col .nv-article-nav-center {
    align-self: center;
}
@media (max-width: 870px) {
    .nv-article-nav-3col {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    /* 모바일 순서 — 마크업은 [prev, center, next] 인데 [prev, next, center(=목록)] 로 재배치.
       order 만으로 처리 — PHP 마크업/데스크탑 영향 없음. */
    .nv-article-nav-3col .nv-article-nav-prev   { order: 1; }
    .nv-article-nav-3col .nv-article-nav-next   { order: 2; text-align: left; }
    .nv-article-nav-3col .nv-article-nav-center { order: 3; align-self: stretch; }

    /* 이전/다음 — 카드 버튼 느낌 강화 (border 진하게, padding 키움, radius 키움). */
    .nv-article-nav-3col .nv-article-nav-prev,
    .nv-article-nav-3col .nv-article-nav-next {
        border: 1.5px solid #C5CCDA;
        background: #FFFFFF;
        padding: 16px 18px;
        border-radius: 10px;
    }
    .nv-article-nav-3col .nv-article-nav-empty {
        background: #F5F5F7;
        border-color: #E5E5EA;
    }

    /* 목록 — primary 솔리드 버튼으로 강화 (CTA 위계). 데스크탑 14px 텍스트 링크와 분리. */
    .nv-article-nav-3col .nv-article-nav-center a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 14px 16px;
        background: var(--nj-nineview-primary);
        color: #FFFFFF;
        border-radius: 10px;
        font-weight: 700;
        font-size: 15px;
        border: 1.5px solid var(--nj-nineview-primary);
        transition: background var(--nj-transition-fast);
    }
    .nv-article-nav-3col .nv-article-nav-center a:hover {
        background: #1f47d8;
        color: #FFFFFF;
    }
}

/* ============ Nineview Mypage (구독 관리) — R23 ============ */
.nv-mypage {
    padding: 48px 0 64px;
}
.nv-mypage-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--nj-dark);
    margin: 0 0 32px;
    letter-spacing: -0.5px;
}
.nv-mypage-section {
    margin-bottom: 40px;
}
.nv-mypage-section:last-child {
    margin-bottom: 0;
}
.nv-mypage-section-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--nj-dark);
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--nj-dark);
}
.nv-mypage-empty {
    text-align: center;
    color: var(--nj-text-muted);
    padding: 48px 20px;
    font-size: 14px;
    border: 1px dashed var(--nj-border-light);
    border-radius: var(--nj-radius-lg);
    background: var(--nj-bg-muted);
}
.nv-mypage-empty-link {
    display: inline-block;
    margin-left: 8px;
    color: var(--nj-nineview-primary);
    font-weight: 600;
}
.nv-sub-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    border: 1px solid var(--nj-border-light);
    border-radius: var(--nj-radius-lg);
    margin-bottom: 12px;
    background: #fff;
    transition: box-shadow var(--nj-transition-fast);
}
.nv-sub-card:hover {
    box-shadow: var(--nj-shadow-sm);
}
.nv-sub-card-info {
    flex: 1;
    min-width: 0;
}
.nv-sub-card-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--nj-dark);
    margin-bottom: 6px;
}
.nv-sub-card-meta {
    font-size: 13px;
    color: var(--nj-text-muted);
    line-height: 1.5;
}
.nv-sub-card-sep {
    margin: 0 6px;
    color: var(--nj-text-disabled);
}
.nv-sub-card-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
}
.nv-sub-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.nv-sub-badge.active         { background: #E8F5E9; color: #2E7D32; }
.nv-sub-badge.cancelled      { background: #FFF3E0; color: #E65100; }
.nv-sub-badge.expired        { background: var(--nj-border-lightest); color: var(--nj-text-muted); }
.nv-sub-badge.payment_failed { background: #FFEBEE; color: #C62828; }
.nv-sub-cancel-form {
    display: inline;
    margin: 0;
}
.nv-sub-cancel-btn {
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid var(--nj-accent-red);
    color: var(--nj-accent-red);
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--nj-transition-fast);
}
.nv-sub-cancel-btn:hover {
    background: var(--nj-accent-red);
    color: #fff;
}
.nv-billing-table-wrap {
    overflow-x: auto;
}
.nv-billing-table {
    width: 100%;
    border-collapse: collapse;
    border-top: 2px solid var(--nj-dark);
}
.nv-billing-table th {
    text-align: left;
    padding: 12px 10px;
    font-size: 12px;
    color: var(--nj-text-muted);
    border-bottom: 1px solid var(--nj-border-light);
    font-weight: 600;
    letter-spacing: 0.3px;
}
.nv-billing-table td {
    padding: 12px 10px;
    font-size: 14px;
    border-bottom: 1px solid var(--nj-border-lightest);
    color: var(--nj-text-primary);
}

@media (max-width: 870px) {
    .nv-mypage { padding: 32px 0 48px; }
    .nv-mypage-title { font-size: 20px; margin-bottom: 24px; }
    .nv-sub-card { flex-direction: column; align-items: stretch; }
    .nv-sub-card-actions { justify-content: space-between; }
    .nv-billing-table th, .nv-billing-table td { padding: 10px 6px; font-size: 13px; }
}

/* ============ Responsive ============ */
@media (max-width: 870px) {
    .nv-service-bar, .nv-nav-bar { display: none; }
    .nv-mobile-header { display: flex; }

    .nv-course-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .nv-course-card-name { font-size: 14px; }
    .nv-course-card-info { padding: 12px; }

    .nv-pinned-grid { grid-template-columns: 1fr; gap: 12px; }
    .nv-pinned-card { display: flex; }
    .nv-pinned-card-thumb { width: 140px; aspect-ratio: 1; flex-shrink: 0; }
    .nv-pinned-card-meta { padding: 12px; flex-direction: column; align-items: flex-start; gap: 6px; }

    .nv-tabs-section { top: 52px; }

    .nv-course-hero { padding: 22px 0 18px; gap: 14px; }
    .nv-course-hero-title { font-size: 22px; }
    .nv-course-hero-action > .nv-btn { width: 100%; }
    .nv-course-hero-pricecard { flex-direction: column; align-items: stretch; padding: 18px 20px; gap: 12px; }
    .nv-course-hero-pricecard-cta { width: 100%; padding: 12px 16px; font-size: 14px; }

    .nv-subscribe-hero { padding: 40px 16px; min-height: 160px; }
    .nv-subscribe-hero .nv-summary-name { font-size: 24px; }
    .nv-subscribe-layout { flex-direction: column; }
    .nv-subscribe-side { display: none; }
    .nv-sticky-cta { display: block; }
    .nv-btn-subscribe-main { width: 100%; text-align: center; }

    .nv-trader { flex-direction: column; align-items: center; text-align: center; }
    .nv-trader-photo { width: 96px; height: 96px; }

    .nv-reviews-grid { grid-template-columns: 1fr; }

    .nv-cv-layout { padding: 24px 0 48px; }
    .nv-cv-title { font-size: 22px; }
    .nv-cv-popular-thumb { width: 48px; height: 48px; }
    .nv-cv-category-thumb { width: 64px; height: 44px; }

    .nv-article-title { font-size: 22px; }
    .nv-article-body { font-size: 16px; line-height: 1.75; }

    .nv-article-nav { flex-direction: column-reverse; gap: 8px; }
    .nv-article-nav a { width: 100%; text-align: center; }

    .nv-sticky-cta { padding: 10px 16px; }
    .nv-sticky-cta-inner { flex-direction: column; gap: 8px; }
    .nv-sticky-cta .nv-btn { width: 100%; }

    .nv-container { padding: 0 16px; }

    .nv-notice-page { padding: 32px 0 48px; }
    .nv-notice-page-title { font-size: 20px; }
    .nv-notice-row { padding: 16px 8px; flex-direction: column; align-items: flex-start; gap: 6px; }
    .nv-notice-row-date { font-size: 12px; }
    .nv-notice-row-title { font-size: 14px; white-space: normal; }
}

@media (max-width: 500px) {
    .nv-course-card-name { font-size: 13px; }
    .nv-course-card-trader { font-size: 11px; }
    .nv-course-card-info { padding: 10px; }
}

/* ============ Pagination (course 게시물 목록) ============ */
.nv-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin: 16px 0 48px;
    padding: 16px 0;
    font-size: 14px;
}
.nv-pagination a {
    color: #2D5BFF;
    text-decoration: none;
}
.nv-pagination a:hover { text-decoration: underline; }
.nv-pagination-current {
    color: #666;
    font-weight: 500;
}
.nv-pagination-disabled {
    color: #CCC;
}

/* 인사이트 뷰 상세 — 빈 상태 공통 */
.nv-empty-state p { margin: 0; }

/* a11y — 스크린 리더 전용 텍스트 (R59) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 마이페이지 결제 실패 배너 (세션 7) — 크론 자동 결제 실패 감지 알림 */
.nv-mypage-alerts {
    margin-bottom: 22px;
}
.nv-payment-alert {
    border: 1px solid;
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 1.6;
}
.nv-payment-alert-critical {
    background: #FFF4F4;
    border-color: #F5B8B8;
    color: #9C1F1F;
}
.nv-payment-alert-warning {
    background: #FFFBEB;
    border-color: #F5D98A;
    color: #8C5A00;
}
.nv-payment-alert-info {
    background: #F0F7FF;
    border-color: #B6D4FF;
    color: #1E4AB0;
}
.nv-payment-alert-head {
    margin-bottom: 6px;
    font-size: 14px;
}
.nv-payment-alert-list {
    margin: 0;
    padding-left: 22px;
    font-size: 13px;
    color: inherit;
}
.nv-payment-alert-list li {
    margin: 3px 0;
}
.nv-payment-alert-list a {
    color: inherit;
    text-decoration: underline;
    font-weight: 600;
}

/* a11y — 모바일 폼 자동줌 차단 (iOS Safari 는 font-size<16px 인 input focus 시 줌인).
   전역 적용이라 어드민·프런트·전문가 포털 모두 동일 효과. */
@media (max-width: 768px) {
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="search"],
    input[type="url"],
    input[type="date"],
    textarea,
    select {
        font-size: 16px;
    }
}

/* ===========================================================================
   nv-post-row — 인사이트 뷰 게시물 Row 디자인 (ADR-035 §4)
   =========================================================================== */
.nv-post-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 0;
    border-bottom: 1px solid #E8EBF1;
    text-decoration: none;
    color: inherit;
    transition: background 0.12s;
}
.nv-post-row:hover { background: #FAFBFD; }
.nv-post-row--locked { cursor: default; }

.nv-post-row__title {
    font-weight: 700;
    font-size: 15px;
    line-height: 1.4;
    color: #1A1F2E;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: keep-all;
}
.nv-post-row__title--locked {
    color: #9AA0AC;
    font-weight: 600;
}

.nv-post-row__snippet {
    color: #6B7380;
    font-size: 13px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nv-post-row__meta {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 12px;
    color: #6B7380;
}

.nv-post-row__badge {
    padding: 2px 6px;
    border-radius: 4px;
    background: #E8F4FE;
    color: #1B6FB7;
    font-size: 11px;
    font-weight: 600;
}
.nv-post-row__badge--locked {
    background: #F0F3FA;
    color: #4A5264;
}

/* 삭제된 글 (어드민/전문가 전용 노출) — R65 후속.
   nv-post-row 가 일반 케이스에서 flex column 인 것을 row 로 override 해 우측에 [복원] 버튼 배치. */
.nv-post-row--deleted {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid #E8EBF1;
}
.nv-post-row--deleted .nv-post-row__main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}
.nv-post-row--deleted .nv-post-row__main:hover { background: #FAFBFD; }
.nv-post-row--deleted .nv-post-row__title {
    text-decoration: line-through;
    color: #9AA0AC;
}
.nv-post-row--deleted .nv-post-row__snippet,
.nv-post-row--deleted .nv-post-row__meta {
    opacity: 0.6;
}
.nv-post-row__deleted-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    background: #FBE8E8;
    color: #C03030;
    font-size: 11px;
    font-weight: 600;
    margin-right: 6px;
    text-decoration: none;
    vertical-align: middle;
}
.nv-post-row__actions {
    display: flex;
    align-items: center;
    margin: 0;
    flex-shrink: 0;
}

/* nv-teaser — 모달 티저 본문 (ADR-035 §5, Q2 옵션 B) */
.nv-teaser__snippet {
    position: relative;
    max-height: 140px;
    overflow: hidden;
    color: #2A3142;
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}
.nv-teaser__snippet::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 48px;
    background: linear-gradient(to bottom, transparent, #fff);
    pointer-events: none;
}
.nv-teaser__notice {
    margin-top: 12px;
    padding: 10px 12px;
    background: #FFF8E1;
    color: #8A6D17;
    border-radius: 6px;
    font-size: 13px;
    text-align: center;
    font-weight: 600;
}

/* ===========================================================================
   nv-notice-segment — 통합 공지 세그먼트 컨트롤 (ADR-034 §4)
   =========================================================================== */
.nv-notice-segment {
    display: flex;
    gap: 6px;
    margin: 16px 0 24px;
    border-bottom: 1px solid #E8EBF1;
}
.nv-notice-segment-item {
    padding: 10px 18px;
    font-size: 14px;
    color: #6B7380;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
}
.nv-notice-segment-item:hover { color: #1A1F2E; }
.nv-notice-segment-item.active {
    color: #1A1F2E;
    font-weight: 700;
    border-bottom-color: #1A1F2E;
}

/* 소스 배지 (스쿨 / 인사이트 뷰) */
.nv-src-badge {
    display: inline-block;
    flex-shrink: 0;
    padding: 2px 8px;
    margin-right: 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    vertical-align: middle;
}
.nv-src-school   { background: #E8F4FE; color: #1B6FB7; }
.nv-src-nineview { background: #E9F7EE; color: #1F7A3E; }

/* 페이지네이션 */
.nv-notice-pagination .nv-notice-page {
    min-width: 32px;
    padding: 6px 10px;
    text-align: center;
    border: 1px solid #E8EBF1;
    border-radius: 4px;
    color: #4A5264;
    text-decoration: none;
    font-size: 13px;
}
.nv-notice-pagination .nv-notice-page:hover { background: #FAFBFD; }
.nv-notice-pagination .nv-notice-page.current {
    background: #1A1F2E;
    color: #fff;
    border-color: #1A1F2E;
    font-weight: 700;
}

/* ===========================================================================
   NvModal — 나인뷰 전용 모달 (ADR-033, Critical Rule 16: 공용 nineview.css)
   =========================================================================== */
.nv-modal-backdrop {
    position: fixed;
    inset: 0;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.nv-modal-backdrop[hidden] { display: none !important; }

.nv-modal {
    background: #fff;
    border-radius: 12px;
    min-width: 320px;
    max-width: 90vw;
    width: 480px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.18);
    animation: nv-modal-enter 150ms ease-out;
}

.nv-modal-header {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #E8EBF1;
}
.nv-modal-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #1A1F2E;
}
.nv-modal-close {
    background: none;
    border: 0;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: #6B7380;
    padding: 4px 8px;
}
.nv-modal-close:hover { color: #1A1F2E; }

.nv-modal-body {
    overflow-y: auto;
    padding: 18px 20px;
    line-height: 1.55;
    font-size: 14px;
    color: #2A3142;
    white-space: pre-wrap;
    word-break: break-word;
}

.nv-modal-actions {
    padding: 12px 20px 16px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    border-top: 1px solid #E8EBF1;
    background: #FAFBFD;
}
.nv-modal-actions .nv-btn { min-width: 72px; }

body.nv-modal-open { overflow: hidden; }

@keyframes nv-modal-enter {
    from { transform: translateY(8px); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}

@media (max-width: 767px) {
    .nv-modal-backdrop { padding: 12px; }
    .nv-modal { width: 100%; border-radius: 8px; }
    .nv-modal-actions { flex-direction: column-reverse; }
    .nv-modal-actions .nv-btn { width: 100%; }
}

/* =====================================================================
   ADR-030 §확장 — 임시저장 슬롯 picker 모달 (NvDraft)
   nv_draft.js 가 NvModal.custom 으로 띄우는 슬롯 목록 + 라벨 입력 + 행별 액션.
   ===================================================================== */
.nv-btn-ghost {
    background: transparent;
    color: #6B7380;
    border: 1px solid transparent;
}
.nv-btn-ghost:hover {
    background: #F0F2F6;
    color: #1A1F2E;
}
.nv-btn-sm {
    padding: 4px 10px;
    font-size: 12px;
    line-height: 1.4;
}

/* 임시저장 슬롯 — 자동/수동 섹션 그룹 (saveBody 모달) */
.nv-draft-slot-section {
    margin-bottom: 14px;
}
.nv-draft-slot-section:last-child {
    margin-bottom: 0;
}
.nv-draft-slot-section-title {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    color: #6B7380;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.nv-draft-slot-section-auto .nv-draft-slot-row {
    background: #F5F7FF;
    border-color: #D6E1FF;
}
.nv-draft-slot-section-auto .nv-draft-slot-row:hover {
    background: #EBF0FF;
    border-color: #B5C2E8;
}

.nv-draft-slot-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 50vh;
    overflow-y: auto;
    padding: 4px 2px;
    margin: 0 -2px;
}
.nv-draft-slot-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #E1E6F0;
    border-radius: 6px;
    background: #FAFBFD;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    position: relative;
}
.nv-draft-slot-row:hover {
    background: #F0F4FF;
    border-color: #B5C2E8;
}
.nv-draft-slot-row > input[type="radio"] {
    margin-top: 4px;
    flex-shrink: 0;
}
.nv-draft-slot-row.nv-draft-slot-empty {
    background: #FFF;
    border-style: dashed;
    color: #9AA1B0;
}
.nv-draft-slot-row.nv-draft-slot-empty:hover {
    background: #F7F9FD;
}
.nv-draft-slot-empty-text {
    font-size: 13px;
    color: #9AA1B0;
}
.nv-draft-slot-body {
    flex: 1;
    min-width: 0;
}
.nv-draft-slot-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.nv-draft-slot-name {
    font-size: 13px;
    color: #1A1F2E;
    font-weight: 600;
}
.nv-draft-slot-time {
    font-size: 11px;
    color: #7A8294;
    font-weight: 400;
}
.nv-draft-slot-snippet {
    font-size: 12px;
    color: #4A5264;
    line-height: 1.5;
    margin-top: 4px;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nv-draft-slot-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.nv-draft-slot-x {
    background: transparent;
    border: none;
    color: #9AA1B0;
    cursor: pointer;
    font-size: 16px;
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1;
    flex-shrink: 0;
}
.nv-draft-slot-x:hover {
    background: #FFE6E6;
    color: #C03030;
}

.nv-draft-label-row {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #E8EBF1;
}
.nv-draft-label-row > label {
    display: block;
    font-size: 12px;
    color: #4A5264;
    margin-bottom: 4px;
    font-weight: 500;
}
.nv-draft-label-row > input[type="text"] {
    width: 100%;
    padding: 8px 10px;
    font-size: 13px;
    border: 1px solid #D5DAE3;
    border-radius: 5px;
    box-sizing: border-box;
}
.nv-draft-label-row > input[type="text"]:focus {
    outline: none;
    border-color: #2D5BFF;
    box-shadow: 0 0 0 2px rgba(45,91,255,0.12);
}

@media (max-width: 600px) {
    .nv-draft-slot-row {
        flex-wrap: wrap;
    }
    .nv-draft-slot-actions {
        width: 100%;
        justify-content: flex-end;
        margin-top: 6px;
    }
}

/* ============ Lexical 에디터 — toolbar sticky ============
   본문이 길어 페이지가 스크롤될 때도 toolbar 가 시야에 머무르게.
   service-bar / nv-admin-header / nv-mobile-header 모두 height 52px sticky → top 동일.
   z-index 는 헤더(--nj-z-header 101 ~ --nj-z-modal 1000) 보다 낮게 두어 헤더가 위로 겹쳐 보이도록.
   부모 .editor-container 의 overflow:hidden 이 sticky 컨텍스트를 가두는 문제도 함께 해제.
   ※ Lexical 번들 CSS 가 <head> 후행 주입이라 동일 specificity 에서 우리 규칙이 밀린다 → !important 로 명시 우선. */
.lexical-editor .toolbar {
    position: sticky !important;
    top: 52px;
    z-index: 50;
    background: #fff;
    border-bottom: 2px solid #A8B0C2;
}
.editor-container {
    overflow: visible !important;
}

/* ============ Lexical 텍스트 포맷 클래스 — content_view 등 번들 미로드 페이지 호환 ============
   Lexical 번들의 TextNode 가 italic/underline/bold/sub/sup/code 를 .editor-text-* 클래스로 emit.
   번들이 로드되는 에디터 페이지에선 번들 인라인 CSS 가 처리하지만, content_view.php 처럼
   번들이 미로드되는 출력 페이지에선 본 저장소의 룰이 시각화 책임.
   sanitize_nv_lexical_html 의 Attr.AllowedClasses 가 이 7 클래스를 보존하므로 article 컬럼에 살아남는다. */
.editor-text-bold          { font-weight: bold; }
.editor-text-italic        { font-style: italic; }
.editor-text-underline     { text-decoration: underline; }
.editor-text-strikethrough { text-decoration: line-through; }
.editor-text-underline.editor-text-strikethrough,
.editor-text-underlineStrikethrough { text-decoration: underline line-through; }
.editor-text-subscript     { vertical-align: sub;   font-size: 0.8em; }
.editor-text-superscript   { vertical-align: super; font-size: 0.8em; }
.editor-text-code {
    background: #F2F4F8;
    padding: 1px 4px;
    border-radius: 3px;
    font-family: 'Source Code Pro', Menlo, Consolas, monospace;
    font-size: 0.92em;
}

/* ============ 인용구 (네이버 스타일 — Lexical .editor-quote) ============
   에디터 페이지에선 Lexical 번들 인라인 CSS 가 처리, 출력 페이지(content_view.php)에선 이 룰이 처리.
   양쪽 동일 디자인 — 위·아래 큰 따옴표 80px 회색 + center 정렬 + italic.
   font-size 80px character 의 visual 영역이 box 위쪽 ~30~70% 라 padding 80px 로 본문 침범 회피. */
.nv-article-body .editor-quote,
.nv-article-body blockquote {
    position: relative;
    margin: 32px auto;
    padding: 80px 32px 80px;
    text-align: center;
    font-size: 17px;
    line-height: 1.7;
    font-style: italic;
    color: #444;
    border: none;
    max-width: 720px;
}
.nv-article-body .editor-quote::before,
.nv-article-body .editor-quote::after,
.nv-article-body blockquote::before,
.nv-article-body blockquote::after {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 80px;
    line-height: 1;
    color: #B0B8C4;
    font-family: Georgia, "Nanum Myeongjo", serif;
    font-style: normal;
    font-weight: 700;
    pointer-events: none;
}
/* opening quote 의 character visual 이 box 위쪽 ascent 영역에 있어 top: 0 면 컨테이너 top 에 너무 붙음.
   closing quote 의 시각 거리(컨테이너 bottom 에서 ~24px)와 균형 맞추려고 위쪽만 살짝 내림. */
.nv-article-body .editor-quote::before,
.nv-article-body blockquote::before { content: "\201C"; top: 12px; }
.nv-article-body .editor-quote::after,
.nv-article-body blockquote::after  { content: "\201D"; bottom: 0; }

/* ============ 구분선 (Lexical HorizontalRule, content_view 출력) ============ */
.nv-article-body hr {
    display: block;
    border: none;
    border-top: 1px solid #C5CCDA;
    margin: 36px 0;
    height: 0;
}

/* ============ NvImageViewer — 본문 이미지 풀스크린 뷰어 (핀치/드래그) ============ */
.nv-image-viewer {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 14, 0.96);
    z-index: 99999;
    display: none;
    /* 모바일 safe-area (notch) — 닫기 버튼/힌트 위치 보정용 */
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.nv-image-viewer.open {
    display: block;
}
.nv-image-viewer__stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
    /* touch-action: none — 브라우저 기본 핀치 줌/스크롤 차단, 모든 제스처를 JS 가 처리 */
    touch-action: none;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nv-image-viewer__stage.dragging {
    cursor: grabbing;
}
.nv-image-viewer__img {
    /* 자연 중앙 정렬 — flex container 가 잡아줌. transform 으로 추가 줌/팬. */
    max-width: 100vw;
    max-height: 100vh;
    width: auto;
    height: auto;
    transform-origin: center center;
    transform: translate(0, 0) scale(1);
    will-change: transform;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
    display: block;
}
.nv-image-viewer__close {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    right: 12px;
    width: 44px;
    height: 44px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    border-radius: 50%;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.nv-image-viewer__close:hover {
    background: rgba(0, 0, 0, 0.75);
}
.nv-image-viewer__hint {
    position: absolute;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    background: rgba(0, 0, 0, 0.45);
    padding: 6px 14px;
    border-radius: 999px;
    pointer-events: none;
    white-space: nowrap;
    max-width: calc(100vw - 32px);
    overflow: hidden;
    text-overflow: ellipsis;
}