/**
 * demo.css — AI 체험(홍보용 데모) 공개 셸 스타일
 *
 * ★ 화면 자체는 손대지 않는다.
 *   최초 화면은 analytics/ai.html, 대화는 ai_feedback.html · ai_coaching.html 을 그대로 렌더한다.
 *   홍보물이라 **여기서 본 화면이 실제 제품 화면이어야** 신뢰가 생긴다. (설계 §6.2)
 *   이 파일은 회원 레이아웃(GNB·사이드바)이 없는 상태를 메우고,
 *   데모에만 있는 것(레일·고지·마무리·이어보기)만 담당한다.
 */

/* ── 공개 셸 ────────────────────────────────────────────── */
html, body {
    height: 100%;
    margin: 0;
}
body.demo-body {
    background: #f8f9fa;
    font-family: "Malgun Gothic", "맑은 고딕", -apple-system, BlinkMacSystemFont, sans-serif;
    overflow: hidden;
}

/* ── 최초 화면 : 회원 #ai 랜딩을 레이아웃 없이 ───────────── */
/*
 * 회원 화면은 상단 헤더(90px) 아래에 들어가지만 데모는 화면 전체를 쓴다.
 * 스크롤은 이 컨테이너가 맡는다 — body 는 overflow:hidden 이다.
 */
#demo-landing {
    height: 100vh;
    overflow-y: auto;
}
.demo-body .ai-landing-page {
    min-height: 0;
    overflow: visible;     /* 회원 랜딩의 overflow:hidden 이 아래 붙인 고지문을 자른다 */
    padding-bottom: 24px;
}
/* 회원 랜딩 푸터는 "1년 보관" 안내다. 체험 대화는 30일이라 그대로 두면 틀린 말이 된다. */
.demo-body .ai-footer { display: none; }

/* 준비되지 않은 서비스 카드 — 눌러보고 알게 하지 않는다 */
.demo-card-disabled { opacity: .55; }
.demo-card-disabled:hover { transform: none; box-shadow: 0 20px 60px rgba(0,0,0,.15); }
.demo-card-disabled .ai-card-btn.disabled {
    background: #c9d1d9;
    cursor: default;
    pointer-events: none;
}

/* 데모 고지 — 체험 조건을 숨기지 않는다 (설계 §5.3) */
.demo-note {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 24px 8px;
    font-size: 12.5px;
    color: #8b95a1;
    line-height: 1.7;
    text-align: center;
}
.demo-error {
    max-width: 900px;
    margin: 16px auto;
    background: #fff5f5;
    border: 1px solid #ffd4d4;
    border-radius: 8px;
    padding: 18px 20px;
    color: #a9491f;
    font-size: 14px;
}

/* ── 이어보기 (진행 중인 체험이 있을 때만) ───────────────── */
.demo-resume {
    max-width: 900px;
    margin: 0 auto 24px;
    padding: 16px 20px;
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.demo-resume-info strong {
    display: block;
    font-size: 14.5px;
    color: #1a1a2e;
}
.demo-resume-info span {
    font-size: 12.5px;
    color: #8b95a1;
}
.demo-resume-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.demo-resume-actions .demo-btn-primary,
.demo-resume-actions .demo-btn-ghost {
    padding: 8px 14px;
    font-size: 13px;
}

/* ── 고지 배지 (설계 §5.3) ─────────────────────────────── */
/* "미리 써둔 글"임을 숨기지 않는다. 두 번째 문장이 있어야 오히려 신뢰가 올라간다. */
.demo-sample-badge {
    display: block;
    margin: 0 0 10px;
    padding: 6px 10px;
    background: #f4f6f8;
    border-left: 3px solid #c7d0da;
    border-radius: 3px;
    font-size: 12px;
    color: #6b7684;
    line-height: 1.6;
}

/* ── 샘플 결과 선택 버튼 (회원의 진단 선택과 같은 자리) ──── */
/* 목록 틀(.assess-list)은 css/ai-chat.css 것을 그대로 쓴다. 이름·설명 2줄만 여기서 잡는다. */
.btn-select-persona {
    flex-wrap: wrap;
}
.btn-select-persona .persona-name {
    font-weight: 600;
    color: #1a1a2e;
}
.btn-select-persona .persona-desc {
    width: 100%;
    padding-left: 28px;
    margin-top: 2px;
    color: #8b95a1;
    font-size: 12.5px;
    white-space: normal;
}

/* ── 우측 레일 : 도입문의 + 처음으로 (설계 §8.3) ────────── */
/*
 * 버튼을 채팅 영역 '위에' 띄우면 우하단에서는 전송 버튼을 가리고,
 * 그 위로 올리면 대화를 가린다. 그래서 겹치는 대신 세 번째 컬럼으로 공간을 만든다.
 * .ai-chat-area 가 flex:1 이므로 레일 폭만큼 자동으로 줄어든다 → 구조적으로 겹칠 수 없다.
 *
 * 좌측 히스토리를 감춘 화면이라 되돌아갈 길이 여기밖에 없다.
 * 두 버튼을 하나의 스택으로 묶어 아래쪽 baseline(입력창 하단)에 맞춘다.
 */
.ai-demo-rail {
    width: 96px;
    flex-shrink: 0;
    position: relative;      /* fixed 는 스크롤·모바일 주소창에서 튄다 */
    background: #f8f9fa;
    border-left: 1px solid #e9ecef;
}
.ai-demo-rail-actions {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.btn-demo-contact,
.btn-demo-back {
    width: 72px;
    border-radius: 14px;
    border: 1px solid #d7dee4;
    background: #fff;
    color: #46525f;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-weight: 600;
    line-height: 1.2;
    transition: all .18s ease;
    padding: 0;
}
.btn-demo-contact {
    height: 72px;
    font-size: 11.5px;
}
.btn-demo-back {
    height: 54px;
    font-size: 11px;
    background: #f2f4f6;
    color: #6b7684;
}
.btn-demo-contact:hover {
    border-color: #4A90D9;
    color: #2f6ea8;
    box-shadow: 0 4px 14px -6px rgba(74, 144, 217, .5);
}
.btn-demo-back:hover {
    border-color: #b9c3cd;
    background: #fff;
    color: #46525f;
}
/* 턴 상한 도달 시 강조로 전환 — 미세 펄스 1회 (설계 §8.4) */
.btn-demo-contact.emphasize {
    background: linear-gradient(135deg, #4A90D9, #667eea);
    border-color: transparent;
    color: #fff;
    animation: demoPulse .9s ease-out 1;
}
@keyframes demoPulse {
    0%   { box-shadow: 0 0 0 0 rgba(74, 144, 217, .55); }
    100% { box-shadow: 0 0 0 16px rgba(74, 144, 217, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .btn-demo-contact.emphasize { animation: none; }
    .demo-body .ai-service-card:hover { transform: none; }
}

/* 모바일: 컨테이너가 세로로 바뀌어 레일이 하단을 가로로 먹는다 → 헤더로 옮긴다 */
@media (max-width: 768px) {
    .ai-demo-rail { display: none; }
}
.demo-header-actions {
    display: none;
    margin-left: auto;
    white-space: nowrap;
}
/* 코칭 헤더는 .chat-header 가 flex(space-between) 라 .chat-header-left 가 폭을 다 먹지 않는다.
   그대로 두면 버튼이 제목 바로 옆에 붙는다 — 우측 끝으로 밀어낸다. */
.demo-body .ai-coaching-page .chat-header-left { flex: 1; }
.btn-demo-contact-mobile {
    background: none;
    border: 1px solid #d7dee4;
    border-radius: 16px;
    padding: 5px 10px;
    margin-left: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #46525f;
    cursor: pointer;
    white-space: nowrap;
}
@media (max-width: 768px) {
    .demo-header-actions { display: inline-block; }
}

/* ── 남은 턴 표시 ──────────────────────────────────────── */
.demo-turn-left {
    font-size: 11.5px;
    color: #8b95a1;
    margin-top: 2px;
}

/* ── 마무리 화면 ───────────────────────────────────────── */
.demo-finish {
    margin: 18px auto;
    max-width: 620px;
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: 10px;
    padding: 24px;
    text-align: center;
}
.demo-finish h3 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    color: #1a1a2e;
}
.demo-finish p {
    margin: 0 0 18px;
    font-size: 14px;
    color: #6b7684;
    line-height: 1.7;
}
.demo-finish .demo-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
.demo-btn-primary,
.demo-btn-ghost {
    border-radius: 8px;
    padding: 11px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    display: inline-block;
}
.demo-btn-primary {
    background: linear-gradient(135deg, #4A90D9, #667eea);
    color: #fff;
}
.demo-btn-primary:hover { color: #fff; opacity: .92; }
.demo-btn-ghost {
    background: #fff;
    border-color: #d7dee4;
    color: #46525f;
}
.demo-btn-ghost:hover { border-color: #b9c3cd; color: #46525f; }

/* 추천 질문 칩 — 실시간 구간으로 빨리 넘기는 장치 (설계 §5.3) */
.demo-suggests {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 4px 46px;
}
.demo-suggest {
    background: #fff;
    border: 1px solid #dbe3ea;
    border-radius: 16px;
    padding: 7px 14px;
    font-size: 13px;
    color: #46525f;
    cursor: pointer;
    transition: all .15s ease;
}
.demo-suggest:hover { border-color: #4A90D9; color: #2f6ea8; }
@media (max-width: 768px) {
    .demo-suggests { margin-left: 0; }
}

/* ── 회원 템플릿을 그대로 쓰면서 데모에서만 감추는 것 ───── */
/*
 * 화면은 analytics/ai.html · ai_feedback.html · ai_coaching.html 을 통째로 렌더한다.
 * 마크업을 복사하지 않으므로 디자인 수정이 양쪽에 자동 반영된다. (설계 §6.2)
 * 데모에 없는 요소만 여기서 감춘다 — 템플릿은 건드리지 않는다.
 */
.demo-body .ai-sidebar { display: none; }          /* 세션 목록(히스토리)이 없다 */
.demo-body .btn-sidebar-toggle { display: none; }  /* 그 토글도 필요 없다 */

/* 회원 화면은 상단 헤더 90px 를 빼지만 데모는 전체를 쓴다 */
.demo-body .ai-chat-page {
    height: 100vh;
    min-height: 0;
}
/*
 * 모바일도 같은 이유로 손봐야 한다.
 * 회원 화면은 position:fixed; top:45px 로 상단 GNB 자리를 비워 두는데(css/ai-chat.css:790),
 * 데모에는 GNB 가 없다. 그대로 두면 위에 45px 빈칸이 생기고 **그만큼 아래가 잘려 입력창이 화면 밖으로 나간다.**
 * top:0 + height:auto (top/bottom 0 인 fixed) 로 화면을 정확히 채운다.
 */
@media (max-width: 768px) {
    .demo-body .ai-chat-page {
        top: 0;
        height: auto;
    }
}