/**
 * 워크스페이스 튜토리얼 오버레이 (2026-08-30)
 *
 * 마스크 4장으로 대상 주변만 덮는다 — 구멍 안은 DOM 이 없으므로 클릭이 그대로
 * 통과한다. `box-shadow: 0 0 0 9999px` 한 장으로 뚫는 방법이 더 짧지만,
 * 그 방식은 요소가 구멍 위에 얹혀 있어 클릭을 먹는다. 2단계(셀 드래그)가 실제
 * 조작을 요구하므로 통과가 가능해야 한다.
 */

.ws-tut {
    position: fixed;
    inset: 0;
    z-index: 20000;        /* 모달(--z-modal)보다 위 — 모달을 설명할 수도 있다 */
    pointer-events: none;  /* 자식이 각자 켠다. 구멍은 계속 통과 상태로 둔다 */
}

/* 대상 바깥을 덮는 4장. 클릭을 막아 튜토리얼 밖 조작을 유도하지 않는다. */
.ws-tut-mask {
    position: fixed;
    background: rgba(17, 24, 39, 0.55);
    pointer-events: auto;
    transition: all .18s ease;
}

/* 구멍 테두리 — 시각 표시만. 클릭은 통과해야 한다. */
.ws-tut-ring {
    position: fixed;
    border: 2px solid #10b981;
    border-radius: 6px;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, .25);
    pointer-events: none;
    transition: all .18s ease;
}

.ws-tut-bubble {
    position: fixed;
    width: 340px;
    max-width: calc(100vw - 24px);
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
    padding: .9rem 1rem;
    pointer-events: auto;
    transition: top .18s ease, left .18s ease;
}

.ws-tut-count {
    font-size: .72rem;
    color: #10b981;
    font-weight: 600;
    margin-bottom: .2rem;
}

.ws-tut-title {
    margin: 0 0 .35rem;
    font-size: .98rem;
    font-weight: 700;
    color: #111827;
}

/* 본문은 줄 배열을 <p> 로 나눠 담는다 — 문장이 길게 붙어 읽기 어려운 걸 막는다. */
.ws-tut-body {
    font-size: .84rem;
    line-height: 1.55;
    color: #4b5563;
}

.ws-tut-body p {
    margin: 0 0 .45rem;
}

/* 마지막 줄 아래 여백은 .ws-tut-hint / .ws-tut-actions 가 이미 준다 */
.ws-tut-body p:last-child {
    margin-bottom: 0;
}

/* ── 본문 강조 두 종류 ────────────────────────────────────────────────
   색을 나눈 이유: "지금 눌러야 할 것" 과 "알아 둘 개념" 은 사용자가 할
   행동이 다르다. 한 색으로 뭉치면 무엇을 찾아야 하는지 안 보인다. */

/* [행/열 설정] — 화면에서 찾아 누를 버튼·메뉴. 하이라이트 링과 같은 초록 계열 */
.ws-tut-ui {
    color: #059669;
    font-weight: 600;
}

/* *반복 세트* — 기능·개념 용어 */
.ws-tut-key {
    color: #2563eb;
    font-weight: 600;
}

/* ── 목(mock) 결과 카드 ─────────────────────────────────────────────────
   가짜라는 사실을 숨기지 않는다. 실제로 눌렀을 때 다르면 신뢰를 잃는다. */
.ws-tut-mock {
    margin-top: .6rem;
}

.ws-tut-mock:empty {
    display: none;
}

.ws-tut-mock-head {
    font-size: .7rem;
    color: #9ca3af;
    margin-bottom: .35rem;
    padding-bottom: .3rem;
    border-bottom: 1px dashed #e5e7eb;
}

.ws-tut-mock-row {
    display: flex;
    gap: .4rem;
    align-items: flex-start;
    font-size: .76rem;
    color: #374151;
    line-height: 1.45;
    padding: .28rem 0;
}

.ws-tut-mock-row small {
    color: #9ca3af;
}

.ws-tut-tag {
    flex: 0 0 auto;
    padding: .05rem .35rem;
    border-radius: 4px;
    font-size: .66rem;
    font-weight: 600;
    white-space: nowrap;
}

.tag-tm      { background: #dbeafe; color: #1e40af; }
.tag-term    { background: #fef3c7; color: #92400e; }
.tag-rag     { background: #ede9fe; color: #5b21b6; }
.tag-style   { background: #dcfce7; color: #166534; }
.tag-pattern { background: #fee2e2; color: #b91c1c; }

.ws-tut-hint {
    margin-top: .5rem;
    font-size: .74rem;
    color: #10b981;
}

.ws-tut-actions {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-top: .75rem;
}

.ws-tut-spacer {
    flex: 1;
}

.ws-tut-btn {
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
    border-radius: 6px;
    padding: .28rem .7rem;
    font-size: .78rem;
    cursor: pointer;
    transition: background .12s ease;
}

.ws-tut-btn:hover:not(:disabled) {
    background: #f9fafb;
}

.ws-tut-btn:focus-visible {
    outline: 2px solid #10b981;
    outline-offset: 1px;
}

.ws-tut-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.ws-tut-next {
    background: #10b981;
    border-color: #10b981;
    color: #fff;
    font-weight: 600;
}

.ws-tut-next:hover:not(:disabled) {
    background: #059669;
}

.ws-tut-skip {
    border-color: transparent;
    color: #9ca3af;
}

@media (max-width: 576px) {
    .ws-tut-bubble {
        width: calc(100vw - 24px);
    }
}