/* consulting-detail.css — 서비스안내 상세/슬라이드(프레젠테이션) 페이지 전용 스타일 (정적 파일로 이관: src/utils.ts showConsultingDetail) */

.carousel-summary{
display:none;
}
/* 검색어 하이라이트 스타일 */
mark.search-highlight {
    background: #FFE500;
    color: #1a1a1a;
    font-weight: 700;
    border-radius: 2px;
    padding: 0 2px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
/* 마이페이지에서 특정 매치(예: 본문 3/5) 로 이동했을 때 강조되는 '현재 타겟' */
mark.search-highlight.search-highlight-current {
    background: #FF8A00;
    color: #fff;
    outline: 3px solid #FF5500;
    outline-offset: 1px;
    box-shadow: 0 0 0 4px rgba(255, 138, 0, 0.25);
    animation: mark-pulse 1.2s ease-in-out 1;
}
@keyframes mark-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 138, 0, 0.6); }
    60%  { box-shadow: 0 0 0 14px rgba(255, 138, 0, 0); }
    100% { box-shadow: 0 0 0 4px rgba(255, 138, 0, 0.25); }
}

/* ── 관리자 전용 플로팅 버튼 바 (프레젠테이션 시작) ──────── */
.admin-tool-bar {
    position: fixed;
    right: 24px;
    bottom: 28px;
    z-index: 1000;
    display: flex;
    flex-direction: column;   /* 버튼 세로 정렬 */
    align-items: stretch;     /* 버튼 폭을 동일하게 */
    gap: 10px;
}
.admin-tool-bar .admin-tool-btn { justify-content: center; }
.admin-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    background: #1a4d7c;
    color: #fff;
    border: none;
    border-radius: 28px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,0.22);
    transition: background .15s, transform .1s;
}
.admin-tool-btn:hover { background: #143c61; }
.admin-tool-btn:active { transform: translateY(1px); }
.admin-slide-btn { background: #0f766e; }
.admin-slide-btn:hover { background: #0b544e; }
.admin-edit-btn { background: #b45309; }
.admin-edit-btn:hover { background: #92400e; }
@media (max-width: 600px) {
    .admin-tool-bar { right: 12px; bottom: 16px; }
    .admin-tool-btn { padding: 11px 15px; font-size: 13px; }
}

/* ══════════════════════════════════════════════════════════════
   슬라이드(프레젠테이션) 모드 — 화면 전체를 슬라이드로 전환
   각 <section> 을 한 슬라이드로 보여주고, 좌우 화살표/버튼으로 이동,
   ESC 로 종료. (관리자/마이페이지 상세 보기 전용)
   ══════════════════════════════════════════════════════════════ */
.slide-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: #0b1220;
    display: none;
    flex-direction: column;
    overflow: hidden;
}
body.slide-mode { overflow: hidden !important; }
body.slide-mode .slide-overlay { display: flex; }

.slide-stage {
    flex: 1 1 auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3vh 6vw;
    min-height: 0;
}
/* 각 슬라이드: 흰 카드, 콘텐츠는 중앙 정렬 + JS 스케일로 한 화면에 */
.slide-item {
    position: absolute;
    inset: 3vh 6vw;
    display: none;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    overflow: hidden;
    /* 원문과 동일한 기본 글자색/폰트로 강제(오버레이 색 상속 방지) */
    color: var(--text-dark, #1a1a1a);
    font-family: 'Noto Sans KR', sans-serif;
}
.slide-item.active { display: block; }
/* 슬라이드 내용은 카드 정중앙(가로·세로)에 위치.
   - inner 를 카드 정중앙에 절대배치(top/left 50% + translate -50%)하고
     그 위에 JS 스케일(--slide-scale)을 곱한다.
   - 이렇게 하면 콘텐츠가 카드보다 크든 작든, 화면비가 세로로 길어지든
     '항상' 가로·세로 정중앙에 놓인다(하단 쏠림 문제 해결). */
.slide-item-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    /* 콘텐츠 자체 폭(자체 max-width 등)에 맞춰 줄어들되 카드의 92% 를 넘지 않게.
       이렇게 하면 콘텐츠가 좁아도 inner 가 콘텐츠를 감싸 정중앙에 놓인다
       (넓은 화면에서 좌측으로 쏠리던 문제 해결). */
    width: max-content;
    max-width: 92%;
    box-sizing: border-box;
    overflow: visible;
    transform: translate(-50%, -50%) scale(var(--slide-scale, 1));
    transform-origin: center center;
}
/* 내부 콘텐츠(.article-content)는 가로 가운데 정렬 */
.slide-item-inner > .article-content { margin: 0 auto !important; }
/* 슬라이드 내부는 원문(.article-content) 과 '동일한' 렌더링을 위해
   내부에 .article-content 컨텍스트를 복제한다. 아래는 오버레이 배경으로
   인해 색이 뒤바뀌지 않도록 하는 최소한의 기본값 보정. */
.slide-item-inner .article-content {
    background: transparent !important;
    box-shadow: none !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--text-dark, #1a1a1a);
}
/* 원문 섹션 자체가 배경/글자색을 갖고 있으면 그대로 보이도록,
   슬라이드에서만 section 을 카드 안쪽 블록으로 배치 */
.slide-item-inner .article-content > section {
    width: 100%;
    box-sizing: border-box;
    margin: 0 !important;
}
/* 슬라이드 내부 이미지가 카드를 넘지 않도록 */
.slide-item-inner img { max-width: 100%; height: auto; }

/* 좌우 네비게이션 화살표 */
.slide-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 54px;
    height: 54px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.14);
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
    z-index: 2;
}
.slide-nav:hover { background: rgba(255,255,255,0.3); }
.slide-nav:disabled { opacity: .25; cursor: default; }
.slide-nav.prev { left: 1.2vw; }
.slide-nav.next { right: 1.2vw; }

/* 상단 바: 제목 + 페이지표시 + 닫기 */
.slide-topbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    color: #e5eefc;
    font-size: 14px;
    background: rgba(255,255,255,0.04);
}
.slide-topbar .slide-title {
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.slide-topbar .slide-actions { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.slide-counter { font-variant-numeric: tabular-nums; opacity: .9; }
.slide-close {
    border: none;
    background: rgba(255,255,255,0.14);
    color: #fff;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.slide-close:hover { background: rgba(255,255,255,0.3); }

/* 하단 진행 점(도트) */
.slide-dots {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    padding: 14px;
    flex-wrap: wrap;
}
.slide-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.28);
    cursor: pointer;
    padding: 0;
}
.slide-dot.active { background: #34d399; transform: scale(1.25); }
@media (max-width: 600px) {
    .slide-nav { width: 44px; height: 44px; font-size: 18px; }
    .slide-item { inset: 2vh 3vw; }
}

/* ══════════════════════════════════════════════════════════════
   프레젠테이션 도구: 레이저 포인터 / 형광펜·빨간펜 필기 / 확대
   ══════════════════════════════════════════════════════════════ */
/* 슬라이드 모드에서는 무대 위 기본 커서를 숨기고 레이저 포인터로 대체 */
body.slide-mode .slide-stage {
    cursor: none;
    user-select: none;
    -webkit-user-select: none;
}
/* 확대/필기 시 카드 안에서 콘텐츠가 잘리도록(카드 밖으로 안 넘침) */
body.slide-mode .slide-item { overflow: hidden; }

/* 레이저 포인터 점 — 첨부 이미지처럼 밝은 중심 + 선명한 빨간 링 + 부드러운 빛번짐 */
.laser-dot {
    position: fixed;
    left: 0; top: 0;
    width: 22px; height: 22px;
    margin-left: -11px; margin-top: -11px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 100050;
    display: none;
    background: radial-gradient(circle at center,
        #ffe3d8 0%,
        #ff5a4d 26%,
        #ff1a12 42%,
        rgba(255,26,18,0.55) 60%,
        rgba(255,60,60,0.18) 78%,
        rgba(255,80,80,0) 100%);
    box-shadow: 0 0 14px 6px rgba(255,40,40,0.45);
}
body.slide-mode .laser-dot { display: block; }

/* 필기용 캔버스 — 무대(stage) 전체를 덮어 포인터 좌표와 정확히 일치시킴 */
.slide-annot {
    position: absolute;
    inset: 0;                  /* stage 전체 덮음 → 포인터=필기점 일치 */
    width: 100%;
    height: 100%;
    z-index: 3;               /* 슬라이드 카드 위, 화살표 버튼(z-index:2) 위 */
    pointer-events: none;      /* 이벤트는 stage 가 처리(캔버스는 통과) */
}

/* 현재 필기 모드 표시 배지 */
.slide-toolhint {
    position: absolute;
    left: 50%; bottom: 12px;
    transform: translateX(-50%);
    z-index: 100060;
    background: rgba(0,0,0,0.62);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 18px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s;
    white-space: nowrap;
}
.slide-toolhint.show { opacity: 1; }
.slide-toolhint .dot-red { color: #ff4d4d; }
.slide-toolhint .dot-hl  { color: #ffd000; }