/*
 * 곰곰 데모 튜토리얼 — 공용 디자인 레이어 (단일 소스)
 *
 * 이 파일 하나가 데모 튜토리얼의 네 모먼트를 모두 스타일링한다.
 *   1) Archive 진입 스포트라이트   #guelArchiveDemoLayer      (guel_archive_demo_overlay.js)
 *   2) Reader 펜 튜토리얼          #guelReaderTutorial*       (view.skin.php)
 *   3) 정지 전환 화면              #guelDemoStopTransition    (view.skin.php)
 *   4) Archive 복귀 G-LAB 가이드   #gomgomGlabGuide*          (gomgom_demo_ux_flow.js)
 * 토스트 3종(#guelDemoToastInline, #guelOnboardingReaderToast, #gomgomGlabGuideToast)도
 * 여기서 한 벌로 관리한다.
 *
 * 시각 언어는 glab.php 상단의 "G·LAB Design System v2" 토큰을 따른다.
 * 표시 조건·좌표 계산·상태값 등 동작 로직은 각 JS가 그대로 담당하며,
 * JS가 인라인으로 쓰는 값은 위치(left/top/width/height/border-radius)와 표시 토글뿐이다.
 */

:root {
    --gg-tut-accent: #7b4bd8;
    --gg-tut-accent-deep: #5f35b8;
    --gg-tut-ink: #17121f;
    --gg-tut-dim-strong: rgba(15, 11, 20, .78); /* 차단용: 강조 대상 외 조작 불가 */
    --gg-tut-dim: rgba(15, 11, 20, .6);         /* 안내용: 스포트라이트 컷아웃 */
    --gg-tut-ease: cubic-bezier(.22, .72, .24, 1);
    --gg-tut-toast-bg: rgba(23, 18, 31, .95);
    --gg-tut-toast-line: rgba(255, 255, 255, .09);
    --gg-tut-shadow: 0 12px 28px rgba(0, 0, 0, .28);
    /* 하위 호환: 구 guel_archive_demo_overlay.css가 노출하던 변수명 */
    --gomgom-demo-accent: var(--gg-tut-accent);
}

/* ---------- 공용 키프레임 ---------- */
@keyframes ggTutGlow {
    0%, 100% { border-color: rgba(123, 75, 216, .85); }
    50% { border-color: rgba(123, 75, 216, .42); }
}
@keyframes ggTutHalo {
    0% { box-shadow: 0 0 0 0 rgba(123, 75, 216, .42); }
    70%, 100% { box-shadow: 0 0 0 14px rgba(123, 75, 216, 0); }
}
@keyframes ggTutOrb {
    0%, 100% { transform: translateY(0); opacity: .4; }
    50% { transform: translateY(-8px); opacity: 1; }
}
/* ---------- 공용 토스트 필 ----------
   다크 필 + 브랜드 보라 점. 표시 토글과 위치 보정은 각 JS가 담당한다. */
#guelDemoToastInline,
#guelOnboardingReaderToast,
#gomgomGlabGuideToast {
    position: fixed;
    z-index: 100024;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: max-content;
    max-width: calc(100vw - 56px);
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid var(--gg-tut-toast-line);
    border-radius: 999px;
    background: var(--gg-tut-toast-bg);
    color: #fff;
    font-family: 'Pretendard', sans-serif;
    font-size: 12.5px;
    font-weight: 850;
    line-height: 1.35;
    letter-spacing: -.025em;
    text-align: center;
    white-space: nowrap;
    word-break: keep-all;
    box-shadow: var(--gg-tut-shadow), inset 0 1px 0 rgba(255, 255, 255, .06);
}
#guelDemoToastInline::before,
#guelOnboardingReaderToast::before,
#gomgomGlabGuideToast::before {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--gg-tut-accent);
    box-shadow: 0 0 0 4px rgba(123, 75, 216, .22);
}
#guelDemoToastInline,
#guelOnboardingReaderToast {
    left: 50%;
    bottom: calc(var(--app-bottom-nav-height, 64px) + 24px);
    transform: translateX(-50%);
}
#guelDemoToastInline.is-show,
#guelOnboardingReaderToast.is-show { display: flex; }
#gomgomGlabGuideToast { display: flex; pointer-events: none; }

/* 경고/차단 토스트: 안내(보라)와 달리 저항 형광펜 색을 쓴다.
   튜토리얼 내내 '거부·차단 = 저항색'이라는 색 언어를 학습시키기 위한 구분. */
#guelDemoToastInline.gg-tut-warn,
#guelOnboardingReaderToast.gg-tut-warn {
    border-color: rgba(252, 165, 165, .28);
}
#guelDemoToastInline.gg-tut-warn::before,
#guelOnboardingReaderToast.gg-tut-warn::before {
    background: var(--hl-negative, #FCA5A5);
    box-shadow: 0 0 0 4px rgba(252, 165, 165, .18);
}

/* 시스템 오류 토스트: 사용자 반응색(코랄)과 분리된 중립 회색.
   네트워크 실패 등은 사용자의 '불편함 표시'와 무관하다는 걸 색으로 구분한다. */
#guelDemoToastInline.gg-tut-error,
#guelOnboardingReaderToast.gg-tut-error {
    border-color: rgba(154, 160, 171, .32);
}
#guelDemoToastInline.gg-tut-error::before,
#guelOnboardingReaderToast.gg-tut-error::before {
    background: #9aa0ab;
    box-shadow: 0 0 0 4px rgba(154, 160, 171, .18);
}

/* ---------- 검증 안내 풍선 ----------
   리더 제목 아래에 삽입되는 검증 단계 안내(gomgom_adaptive_lect_flow.js).
   토스트와 같은 다크 필 + 보라 점 언어를 쓰되, 두 줄 안내라 필 대신
   말풍선(꼬리 포함) 형태를 취한다. */
#gomgomValidationHelpBubble {
    position: relative;
    display: block;
    width: calc(100% - 32px);
    max-width: 520px;
    margin: 18px auto 28px;
    padding: 14px 18px;
    border: 1px solid var(--gg-tut-toast-line);
    border-radius: 16px;
    background: var(--gg-tut-toast-bg);
    color: rgba(255, 255, 255, .88);
    font-family: 'Pretendard', sans-serif;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.62;
    letter-spacing: -.025em;
    word-break: keep-all;
    box-shadow: var(--gg-tut-shadow), inset 0 1px 0 rgba(255, 255, 255, .06);
    z-index: 20;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .22s var(--gg-tut-ease), transform .22s var(--gg-tut-ease);
}
#gomgomValidationHelpBubble::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 32px;
    width: 14px;
    height: 14px;
    background: var(--gg-tut-toast-bg);
    border-left: 1px solid var(--gg-tut-toast-line);
    border-top: 1px solid var(--gg-tut-toast-line);
    transform: rotate(45deg);
}
#gomgomValidationHelpBubble.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* 물러난 상태: DOM에서 제거하면 아래 본문이 당겨져 터치 목표가 움직이므로
   자리는 그대로 두고 흐림으로만 존재감을 줄인다. */
#gomgomValidationHelpBubble.is-dim {
    opacity: .38;
}
#gomgomValidationHelpBubble strong {
    display: block;
    margin-bottom: 4px;
    font-size: 13.5px;
    font-weight: 900;
    letter-spacing: -.03em;
    color: #fff;
}
#gomgomValidationHelpBubble strong::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 8px;
    border-radius: 999px;
    background: var(--gg-tut-accent);
    box-shadow: 0 0 0 4px rgba(123, 75, 216, .22);
    vertical-align: 1px;
}
/* 문구 속 '바이올렛'/'코랄' 단어를 실제 형광펜 색으로 강조 —
   안내 자체가 색 언어 튜토리얼이 되게 한다. */
#gomgomValidationHelpBubble .gg-hl-violet,
#gomgomValidationHelpBubble .gg-hl-coral {
    font-style: normal;
    font-weight: 850;
}
#gomgomValidationHelpBubble .gg-hl-violet { color: var(--hl-positive, #C4B5FD); }
#gomgomValidationHelpBubble .gg-hl-coral { color: var(--hl-negative, #FCA5A5); }

#guelOnboardingReaderToast .guel-reader-stop-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    margin-right: 7px;
    vertical-align: -4px;
    color: #fff;
}
#guelOnboardingReaderToast .guel-reader-stop-icon svg { display: block; width: 18px; height: 18px; }

/* ---------- 1) Archive 진입 스포트라이트 ---------- */
.guel-archive-demo-layer {
    position: fixed;
    inset: 0;
    z-index: 100020;
    background: var(--gg-tut-dim-strong);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .38s var(--gg-tut-ease), visibility .38s var(--gg-tut-ease);
}
.guel-archive-demo-layer.is-show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.guel-archive-demo-clone-wrap {
    position: fixed;
    z-index: 100022;
    box-sizing: border-box;
    pointer-events: auto;
    cursor: pointer;
    border: 0;
    box-shadow: 0 24px 60px -10px rgba(10, 6, 18, .55);
    overflow: visible;
    background: transparent;
    opacity: 0;
    transform: scale(.96);
    transition: opacity .42s ease .1s, transform .5s var(--gg-tut-ease) .1s;
}
.guel-archive-demo-layer.is-show .guel-archive-demo-clone-wrap {
    opacity: 1;
    transform: none;
}
.guel-archive-demo-clone-wrap::before,
.guel-archive-demo-clone-wrap::after {
    content: '';
    position: absolute;
    z-index: 2;
    inset: -3px;
    pointer-events: none;
    box-sizing: border-box;
    border-radius: inherit;
}
.guel-archive-demo-clone-wrap::before {
    border: 3px solid rgba(123, 75, 216, .85);
    animation: ggTutGlow 2.2s ease-in-out infinite;
}
.guel-archive-demo-clone-wrap::after {
    animation: ggTutHalo 2.2s ease-out infinite;
}

.guel-archive-demo-clone-surface {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: #fff;
    overflow: hidden;
    border-radius: inherit;
}
/* 복제 카드가 원본 테마 카드 스타일(폭/여백/효과)을 끌고 오지 않도록 고정한다 */
.guel-archive-demo-clone-wrap .guel-archive-demo-cloned-card {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    transform: none !important;
    pointer-events: none !important;
    background: #fff !important;
    opacity: 1 !important;
    filter: none !important;
    border-radius: inherit !important;
    overflow: hidden !important;
}
.guel-archive-demo-clone-wrap .guel-archive-demo-cloned-card::before,
.guel-archive-demo-clone-wrap .guel-archive-demo-cloned-card::after {
    display: none !important;
}

/* ---------- 2) Reader 펜 튜토리얼 ---------- */
#guelReaderTutorialLayer {
    position: fixed;
    inset: 0;
    z-index: 100030;
    display: none;
    pointer-events: auto;
    font-family: 'Pretendard', sans-serif;
    background: transparent;
    cursor: pointer;
}
#guelReaderTutorialLayer.is-show { display: block; }

#guelReaderTutorialFullDim {
    position: fixed;
    inset: 0;
    background: var(--gg-tut-dim);
    display: none;
}
#guelReaderTutorialFullDim.is-show { display: block; }

#guelReaderTutorialSpot {
    position: fixed;
    z-index: 100031;
    background: transparent;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: 0 0 0 9999px var(--gg-tut-dim);
    border-radius: 999px;
    pointer-events: none;
    display: block;
}
#guelReaderTutorialSpot.is-hidden { display: none; }
#guelReaderTutorialSpot::before,
#guelReaderTutorialSpot::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    pointer-events: none;
}
#guelReaderTutorialSpot::before {
    border: 2.5px solid rgba(123, 75, 216, .85);
    animation: ggTutGlow 2.1s ease-in-out infinite;
}
#guelReaderTutorialSpot::after {
    animation: ggTutHalo 2.1s ease-out infinite;
}

#guelReaderTutorialActions {
    position: fixed;
    left: 50%;
    bottom: calc(var(--app-bottom-nav-height, 64px) + 34px);
    transform: translateX(-50%);
    z-index: 100034;
    display: none;
    gap: 8px;
    width: min(318px, calc(100vw - 44px));
    pointer-events: auto;
}
#guelReaderTutorialActions.is-show { display: flex; }
#guelReaderTutorialActions button {
    flex: 1;
    min-height: 46px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .22);
    font-family: 'Pretendard', sans-serif;
    font-size: 12.5px;
    font-weight: 900;
    letter-spacing: -.025em;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .24);
    cursor: pointer;
    transition: transform .14s var(--gg-tut-ease), box-shadow .18s var(--gg-tut-ease);
}
#guelReaderTutorialActions button:active { transform: translateY(1px) scale(.985); }
#guelReaderTutorialReplay {
    background: rgba(23, 18, 31, .62);
    color: rgba(255, 255, 255, .92);
}
#guelReaderTutorialStart {
    border-color: transparent !important;
    background: linear-gradient(180deg, #8a5be2 0%, var(--gg-tut-accent) 46%, #6c3cce 100%);
    color: #fff;
    box-shadow: 0 14px 28px -6px rgba(123, 75, 216, .38), inset 0 1px 0 rgba(255, 255, 255, .28);
}
#guelReaderTutorialStart:active {
    box-shadow: 0 8px 18px -6px rgba(123, 75, 216, .34), inset 0 1px 0 rgba(255, 255, 255, .22);
}

#guelReaderTutorialProgress {
    position: fixed;
    left: 50%;
    bottom: calc(var(--app-bottom-nav-height, 64px) + 12px);
    transform: translateX(-50%);
    z-index: 100034;
    display: none;
    align-items: center;
    gap: 7px;
    pointer-events: none;
}
#guelReaderTutorialProgress.is-show { display: flex; }
#guelReaderTutorialProgress .guel-rt-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .32);
    transition: width .24s var(--gg-tut-ease), background .24s ease, box-shadow .24s ease;
}
#guelReaderTutorialProgress .guel-rt-dot.is-active {
    width: 20px;
    background: linear-gradient(90deg, #8a5be2, #9a72ea);
    box-shadow: 0 2px 10px rgba(123, 75, 216, .45);
}
#guelReaderTutorialProgress .guel-rt-hint {
    margin-left: 3px;
    color: rgba(255, 255, 255, .62);
    font-size: 10.5px;
    font-weight: 750;
    letter-spacing: -.02em;
    white-space: nowrap;
}

#guelReaderTutorialSkip {
    position: fixed;
    right: 14px;
    top: calc(env(safe-area-inset-top, 0px) + 14px);
    z-index: 100034;
    min-height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .26);
    background: rgba(23, 18, 31, .62);
    color: rgba(255, 255, 255, .86);
    font-family: 'Pretendard', sans-serif;
    font-size: 11.5px;
    font-weight: 850;
    letter-spacing: -.02em;
    cursor: pointer;
    display: none;
    pointer-events: auto;
}
#guelReaderTutorialSkip.is-show { display: inline-flex; align-items: center; }

#bo_v_con [data-sid].guel-rt-preview { transition: background .45s ease, box-shadow .45s ease; }
/* 튜토리얼이 떠 있는 동안(view.skin.php의 runReaderTutorial~finishTutorial) 문장 탭이
   진짜 형광펜으로 이어지지 않도록 직접 차단한다. 전체화면 튜토리얼 레이어가 클릭을
   가로채는 것과 별개로, 여기서 한 번 더 막아 겹침·스태킹 순서에 기대지 않는다. */
#bo_v_con.guel-reader-tutorial-locking [data-sid] { pointer-events: none; }
#guel-reader-toolbar.guel-reader-tutorial-force {
    display: inline-flex !important;
    opacity: 1 !important;
    pointer-events: none !important;
    transform: translate(-50%, 0) !important;
}

/* ---------- 3) 정지 전환 화면 — G-LAB 로딩 딤과 동일 ---------- */
#guelDemoStopTransition {
    position: fixed;
    inset: 0;
    z-index: 200100;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding:
        calc(28px + env(safe-area-inset-top, 0px))
        24px
        calc(28px + env(safe-area-inset-bottom, 0px));
    background: rgba(7, 6, 10, .78);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: #fff;
    font-family: Pretendard, sans-serif;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity .32s ease,
        visibility .32s ease;
}

#guelDemoStopTransition.is-show {
    opacity: 1;
    visibility: visible;
}

#guelDemoStopTransition .glab-journey-gate-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 360px);
    min-height: 440px;
    color: #fff;
    text-align: center;
}

#guelDemoStopTransition .glab-journey-gate-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

#guelDemoStopTransition .glab-journey-gate-spinner {
    width: 30px;
    height: 30px;
    border: 3px solid rgba(255, 255, 255, .22);
    border-top-color: #fff;
    border-radius: 50%;
    animation: gomgomReaderResultSpin .8s linear infinite;
}

@keyframes gomgomReaderResultSpin {
    to {
        transform: rotate(360deg);
    }
}

#guelDemoStopTransition .glab-journey-gate-loading-title {
    margin: 20px 0 0;
    color: #fff;
    font-size: 16px;
    font-weight: 850;
    line-height: 1.4;
    letter-spacing: -.025em;
    word-break: keep-all;
}

#guelDemoStopTransition .glab-journey-gate-loading-copy {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, .68);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: -.015em;
    word-break: keep-all;
}

/* ---------- 4) Archive 복귀 G-LAB 탭 가이드 ---------- */
#gomgomGlabGuideLayer {
    position: fixed;
    inset: 0;
    z-index: 100026;
    font-family: 'Pretendard', sans-serif;
    opacity: 0;
    transition: opacity .38s var(--gg-tut-ease);
    cursor: pointer;
}
#gomgomGlabGuideLayer.is-show { opacity: 1; }
#gomgomGlabGuideSpot {
    position: fixed;
    pointer-events: none;
    border-radius: 18px;
    box-shadow: 0 0 0 9999px var(--gg-tut-dim);
}
#gomgomGlabGuideSpot::before,
#gomgomGlabGuideSpot::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    pointer-events: none;
}
#gomgomGlabGuideSpot::before {
    border: 2.5px solid rgba(123, 75, 216, .85);
    animation: ggTutGlow 2.1s ease-in-out infinite;
}
#gomgomGlabGuideSpot::after {
    animation: ggTutHalo 2.1s ease-out infinite;
}

/* ---------- 모션 최소화 환경 ---------- */
@media (prefers-reduced-motion: reduce) {
    .guel-archive-demo-layer,
    .guel-archive-demo-clone-wrap,
    #gomgomGlabGuideLayer,
    #guelDemoStopTransition,
    #guelReaderTutorialActions button,
    #guelReaderTutorialProgress .guel-rt-dot,
    #gomgomValidationHelpBubble,
    #bo_v_con [data-sid].guel-rt-preview {
        transition: none;
    }
    .guel-archive-demo-clone-wrap::before,
    .guel-archive-demo-clone-wrap::after,
    #guelReaderTutorialSpot::before,
    #guelReaderTutorialSpot::after,
    #gomgomGlabGuideSpot::before,
    #gomgomGlabGuideSpot::after,
    .guel-demo-stop-orbs i {
        animation: none;
    }
    .guel-demo-stop-orbs i { opacity: .85; }
}