/* ─────────────────────────────────────────────────────────────
 * layouts/tour.css
 * 체험(투어) 모드 — 페이지 공통 가이드 UI 스타일.
 *   여러 페이지의 tour.js 가 동일한 .care-tour-* 클래스를 사용.
 *   ring + 점선 연결선 + 콜아웃 + 진행률 모달 + 토스트.
 * ───────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────
 * 중앙 모달 가이드 — 화면 한가운데 흰 카드 + 타겟 버튼으로 향하는 초록 점선.
 *   documents/tour.js 의 STEP 6 (문서 작성 안내) 가 사용. 다른 페이지에서도 재활용 가능.
 *   레이어: spotlight(99996) → connector(99997) → ring(99998) → card(99999)
 * ───────────────────────────────────────────────────────────── */
.care-tour-guide-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    pointer-events: none;  /* 카드 외 영역은 클릭 통과 (버튼 클릭 가능) */
}
.care-tour-guide-card {
    background: #fff;
    width: 100%;
    max-width: 580px;
    padding: 38px 36px 36px;
    border-radius: 18px;
    border: 2px solid #10b981;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.38),
                0 0 0 4px rgba(16, 185, 129, 0.18);
    text-align: center;
    pointer-events: auto;
    transform: translateY(14px);
    opacity: 0;
    animation: care-tour-guide-card-in 360ms cubic-bezier(.2, .7, .2, 1.2) forwards;
}
@keyframes care-tour-guide-card-in {
    to { transform: translateY(0); opacity: 1; }
}
.care-tour-guide-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #34d399, #10b981);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 8px 22px rgba(16, 185, 129, 0.40);
}
.care-tour-guide-title {
    font-size: 20px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}
.care-tour-guide-sub {
    font-size: 14px;
    color: #4b5563;
    line-height: 1.75;
}
.care-tour-guide-sub strong {
    color: #10b981;
    font-weight: 700;
}
/* 큰 안내 카드의 버튼 — «다음»처럼 사람이 눌러 넘어가는 단계에만 붙는다.
   버튼이 없는 카드(다음 동작이 화면 안 버튼인 경우)는 이 줄이 아예 안 그려진다. */
.care-tour-guide-actions {
    margin-top: 24px;
    display: flex;
    justify-content: center;
}
.care-tour-guide-btn {
    min-width: 132px;
    padding: 12px 26px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #34d399, #10b981);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.01em;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.34);
    transition: filter .12s, transform .08s, box-shadow .12s;
}
.care-tour-guide-btn:hover  { filter: brightness(1.06); }
.care-tour-guide-btn:active { transform: translateY(1px); box-shadow: 0 4px 12px rgba(16, 185, 129, 0.30); }

/* 클릭 블로커 — 타겟 버튼 외 영역 클릭 차단. 시각적으로는 투명 (spotlight 가 dim 담당).
   4 개 div 가 버튼 사각형을 둘러싸 cutout 효과. z-index 는 spotlight 와 같은 레이어. */
.care-tour-blocker {
    position: fixed;
    background: transparent;
    pointer-events: auto;
    z-index: 99996;
}

/* 카드 모서리 → 타겟 버튼 으로 그어지는 초록 점선 (SVG). */
.care-tour-guide-connector {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 99997;
}
.care-tour-guide-connector path {
    stroke: #10b981;
    stroke-width: 2;
    stroke-dasharray: 7 6;
    stroke-linecap: round;
    fill: none;
    filter: drop-shadow(0 2px 4px rgba(16, 185, 129, 0.35));
}
.care-tour-guide-connector circle { fill: #10b981; }

/* ─────────────────────────────────────────────────────────────
 * 스포트라이트 오버레이 — 타겟 주변만 밝게 두고 나머지는 dim.
 *   기법: 작은 fixed div 의 box-shadow 를 9999px 로 키워 화면 밖까지 채움.
 *         pointer-events: none → 타겟 버튼 클릭은 그대로 통과.
 *   z-index 는 ring(99998) / callout(99999) 보다 낮아야 함.
 * ───────────────────────────────────────────────────────────── */
.care-tour-spotlight {
    position: fixed;
    border-radius: 14px;
    background: transparent;
    box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.62);
    pointer-events: none;
    z-index: 99996;
    transition: top 200ms ease, left 200ms ease, width 200ms ease, height 200ms ease;
}

/* 강조 ring — 버튼 주변 펄스 */
.care-tour-ring {
    position: fixed;
    border-radius: 14px;
    border: 2px solid #10b981;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.25),
                0 0 20px rgba(16, 185, 129, 0.55);
    pointer-events: none;
    z-index: 99998;
    animation: care-tour-ring-pulse 1.6s ease-in-out infinite;
}
@keyframes care-tour-ring-pulse {
    0%, 100% {
        box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.25),
                    0 0 20px rgba(16, 185, 129, 0.55);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(16, 185, 129, 0.15),
                    0 0 28px rgba(16, 185, 129, 0.75);
    }
}

/* 콜아웃 — 버튼 아래쪽에 위치, 점선으로 연결되는 모습 */
.care-tour-callout {
    position: fixed;
    transform: translateX(-50%);
    width: 320px;
    max-width: calc(100vw - 32px);
    padding: 16px 18px 14px;
    background: #fff;
    color: #1f2937;
    border-radius: 14px;
    border: 1px solid #c7d2fe;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.18),
                0 0 0 1px rgba(99, 102, 241, 0.12);
    z-index: 99999;
    animation: care-tour-callout-in 280ms cubic-bezier(.2, .7, .2, 1.2);
}
@keyframes care-tour-callout-in {
    from { opacity: 0; transform: translate(-50%, -8px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
.care-tour-callout::before {
    content: '';
    position: absolute;
    top: -24px;
    left: var(--care-tour-arrow-x, 50%);
    width: 0;
    height: 22px;
    border-left: 2px dashed #6366f1;
    transform: translateX(-50%);
}
.care-tour-callout::after {
    content: '';
    position: absolute;
    top: -7px;
    left: var(--care-tour-arrow-x, 50%);
    width: 12px;
    height: 12px;
    background: #fff;
    border-left: 1px solid #c7d2fe;
    border-top: 1px solid #c7d2fe;
    transform: translateX(-50%) rotate(45deg);
}
.care-tour-callout-step {
    font-size: 11px;
    font-weight: 700;
    color: #6366f1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.care-tour-callout-step i { margin-right: 4px; }
.care-tour-callout-title {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    line-height: 1.4;
    margin-bottom: 4px;
}
.care-tour-callout-sub {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.5;
}
.care-tour-callout-sub strong { color: #6366f1; font-weight: 700; }
.care-tour-callout-end {
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 12px;
    background: transparent;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 12px;
    color: #6b7280;
    cursor: pointer;
    font-family: inherit;
    transition: background 140ms, border-color 140ms;
}
.care-tour-callout-end:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

/* ─────────────────────────────────────────────────────────────
 * 콜아웃을 타겟의 *위*쪽에 배치할 때 — 점선·화살표가 아래로 향함.
 *   사용 예: 모달 하단의 "확인/생성" 버튼 안내. JS 가 left/top 을 직접 설정.
 * ───────────────────────────────────────────────────────────── */
.care-tour-callout--above {
    animation: care-tour-callout-above-in 280ms cubic-bezier(.2, .7, .2, 1.2);
}
@keyframes care-tour-callout-above-in {
    from { opacity: 0; transform: translate(-50%, 8px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
.care-tour-callout--above::before {
    top: auto;
    bottom: -24px;
}
.care-tour-callout--above::after {
    top: auto;
    bottom: -7px;
    border-left: 0;
    border-top: 0;
    border-right: 1px solid #c7d2fe;
    border-bottom: 1px solid #c7d2fe;
}

/* ─────────────────────────────────────────────────────────────
 * 사이드바 메뉴 등 좌측 타겟을 가리킬 때 — 콜아웃을 우측에 배치.
 *   JS 가 left/top 을 직접 설정하므로 transform 의 X 평행이동은 0.
 *   점선과 화살표를 왼쪽으로 옮김.
 * ───────────────────────────────────────────────────────────── */
.care-tour-callout--side {
    transform: translateY(-50%);
    width: 300px;
}
@keyframes care-tour-callout-side-in {
    from { opacity: 0; transform: translate(8px, -50%); }
    to   { opacity: 1; transform: translate(0,   -50%); }
}
.care-tour-callout--side {
    animation: care-tour-callout-side-in 280ms cubic-bezier(.2, .7, .2, 1.2);
}
.care-tour-callout--side::before {
    top: 50%;
    left: -24px;
    width: 22px;
    height: 0;
    border-left: 0;
    border-top: 2px dashed #6366f1;
    transform: translateY(-50%);
}
.care-tour-callout--side::after {
    top: 50%;
    left: -7px;
    border-left: 1px solid #c7d2fe;
    border-top: 1px solid #c7d2fe;
    border-right: 0;
    border-bottom: 0;
    transform: translateY(-50%) rotate(-45deg);
}

/* 가짜 행은 실제 데이터 row 와 동일한 마크업·스타일을 사용 (별도 강조 없음).
 * 데이터 속성(data-tour-mock="1") 으로만 식별 가능. */

/* 진행률 모달 (실제 공단 동기화 UX 미러링) */
.care-tour-progress-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 220ms ease-out;
    backdrop-filter: blur(2px);
}
.care-tour-progress-overlay.is-show { opacity: 1; }
.care-tour-progress-overlay.is-done { opacity: 0; }
.care-tour-progress-card {
    width: min(440px, 92vw);
    background: #fff;
    border-radius: 16px;
    padding: 26px 26px 22px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.30),
                0 0 0 1px rgba(99, 102, 241, 0.12);
    transform: scale(0.96);
    transition: transform 220ms cubic-bezier(.2, .7, .2, 1.2);
}
.care-tour-progress-overlay.is-show .care-tour-progress-card { transform: scale(1); }
.care-tour-progress-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.care-tour-progress-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #6366f1, #7c3aed);
    color: #fff;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    box-shadow: 0 6px 14px rgba(99, 102, 241, 0.35);
}
.care-tour-progress-headtext { flex: 1; min-width: 0; }
.care-tour-progress-title {
    margin: 0 0 2px;
    font-size: 16px;
    font-weight: 700;
    color: #111827;
}
.care-tour-progress-sub { font-size: 12px; color: #6b7280; }
.care-tour-progress-bar {
    height: 10px;
    background: #f1f5f9;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 12px;
}
.care-tour-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #34d399, #10b981);
    border-radius: 999px;
    transition: width 80ms linear;
    background-image: linear-gradient(90deg, #34d399, #10b981),
                      repeating-linear-gradient(45deg,
                          rgba(255,255,255,0.15) 0,
                          rgba(255,255,255,0.15) 8px,
                          transparent 8px,
                          transparent 16px);
    background-blend-mode: overlay;
    animation: care-tour-progress-stripe 1.2s linear infinite;
}
@keyframes care-tour-progress-stripe {
    from { background-position: 0 0, 0 0; }
    to   { background-position: 0 0, 32px 0; }
}
.care-tour-progress-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 13px;
}
.care-tour-progress-status { color: #374151; font-weight: 500; }
.care-tour-progress-count {
    color: #6b7280;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    white-space: nowrap;
}
.care-tour-progress-count b { color: #10b981; font-weight: 700; }

/* 토스트 — 화면 하단, "체험 중" 배지 위쪽 */
.care-tour-toast {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    padding: 12px 20px;
    background: #111827;
    color: #fff;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.35);
    opacity: 0;
    z-index: 2147483700;
    transition: opacity 280ms, transform 280ms;
}
.care-tour-toast.is-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* 체험 모드 동안 숨길 요소들 — JS 가 .is-care-tour 를 <body> 에 부여 */
body.is-care-tour .care-tour-hide { display: none !important; }

/* ─────────────────────────────────────────────────────────────
 * 카드 클릭 시 뜨는 모달 내부 — "모두 체험모드입니다" 안내
 *   recipient-management/tour.js → showMockModal() 가 #rcOvModalBody
 *   에 .care-tour-mock-modal-body 를 주입.
 * ───────────────────────────────────────────────────────────── */
.care-tour-mock-modal-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 56px 32px 64px;
    text-align: center;
    min-height: 280px;
}
.care-tour-mock-modal-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #818cf8, #6366f1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 18px;
    box-shadow: 0 8px 24px rgba(99, 102, 241, .35);
}
.care-tour-mock-modal-title {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
}
.care-tour-mock-modal-sub {
    font-size: 13.5px;
    color: #64748b;
    line-height: 1.65;
    max-width: 420px;
}

/* ─────────────────────────────────────────────────────────────
 * 체험 편집 페이지 진입 모달 — 직접 체험 / 자동 체험 선택
 *   documents/care-records-edit.php?tour=1 진입 시 표시.
 * ───────────────────────────────────────────────────────────── */
.care-tour-entry-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    animation: care-tour-entry-fade-in 220ms ease-out forwards;
}
@keyframes care-tour-entry-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.care-tour-entry-card {
    background: #fff;
    border-radius: 18px;
    width: 100%;
    max-width: 540px;
    padding: 32px 32px 28px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.32);
    transform: translateY(20px);
    animation: care-tour-entry-slide-in 280ms cubic-bezier(.2, .7, .2, 1.2) forwards;
}
@keyframes care-tour-entry-slide-in {
    to { transform: translateY(0); }
}
.care-tour-entry-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}
.care-tour-entry-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #818cf8, #6366f1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 6px 18px rgba(99, 102, 241, 0.35);
    flex-shrink: 0;
}
/* 진입 모달 제목 — 모바일 (600px 이하) 에서는 dash 숨기고 br 활성화
   "체험 모드 — 새 업무수행일지" → "체험 모드 ↵ 새 업무수행일지" */
.care-tour-title-br { display: none; }
@media (max-width: 600px) {
    .care-tour-title-dash { display: none; }
    .care-tour-title-br { display: inline; }
}
.care-tour-entry-title {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    color: #0f172a;
}
.care-tour-entry-desc {
    margin: 0 0 22px;
    font-size: 14px;
    line-height: 1.65;
    color: #475569;
}
.care-tour-entry-desc strong { color: #6366f1; }
.care-tour-entry-choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.care-tour-entry-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 18px 18px 16px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    text-decoration: none;   /* <a> 로 써도 밑줄이 안 생기게 (layouts/trial-gate.php) */
    transition: background 160ms, border-color 160ms, transform 160ms;
}
.care-tour-entry-btn:hover {
    background: #eef2ff;
    border-color: #c7d2fe;
    transform: translateY(-1px);
}
.care-tour-entry-btn i { font-size: 20px; color: #6366f1; }
.care-tour-entry-btn strong {
    font-size: 14.5px;
    font-weight: 700;
    color: #0f172a;
}
.care-tour-entry-btn span {
    font-size: 12.5px;
    color: #64748b;
    line-height: 1.5;
}
.care-tour-entry-btn--primary {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    border-color: #4f46e5;
}
.care-tour-entry-btn--primary i,
.care-tour-entry-btn--primary strong,
.care-tour-entry-btn--primary span { color: #fff; }
.care-tour-entry-btn--primary:hover {
    background: linear-gradient(135deg, #818cf8, #6366f1);
    border-color: #6366f1;
}
@media (max-width: 540px) {
    .care-tour-entry-choices { grid-template-columns: 1fr; }
}

/* 자동 체험 진행 배지 — 화면 상단 중앙 고정 */
.care-tour-auto-badge {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99997;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px 10px 14px;
    background: rgba(15, 23, 42, 0.92);
    color: #f8fafc;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.28);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: care-tour-auto-badge-in 320ms cubic-bezier(.2, .7, .2, 1.2);
    pointer-events: none;
}
.care-tour-auto-badge i {
    color: #c7d2fe;
    animation: care-tour-auto-spin 2.2s linear infinite;
}
@keyframes care-tour-auto-spin {
    to { transform: rotate(360deg); }
}
@keyframes care-tour-auto-badge-in {
    from { opacity: 0; transform: translate(-50%, -8px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* 자동 체험 — 항목 선택 펄스 효과 (체크박스/라디오/select 강조) */
.care-tour-tick {
    animation: care-tour-tick-flash 720ms ease-out;
    border-radius: 10px;
    position: relative;
}
/* 배경색이 아니라 배경 «이미지»(반투명 겹) 로 번쩍인다.
   background-color 를 애니메이션하면 «선택되면 파란 바탕 + 흰 글자» 인 칩(인지기능 양호/저하 등)의
   파란 바탕을 0.7초 동안 덮어 흰 글자가 사라진다 — 빈 상자로 보이던 버그. */
@keyframes care-tour-tick-flash {
    0%   {
        background-image: linear-gradient(rgba(99, 102, 241, 0), rgba(99, 102, 241, 0));
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.55);
    }
    25%  {
        background-image: linear-gradient(rgba(99, 102, 241, 0.20), rgba(99, 102, 241, 0.20));
        box-shadow: 0 0 0 5px rgba(99, 102, 241, 0.35);
    }
    100% {
        background-image: linear-gradient(rgba(99, 102, 241, 0), rgba(99, 102, 241, 0));
        box-shadow: 0 0 0 14px rgba(99, 102, 241, 0);
    }
}

/* 자동 체험 — 섹션 진입 시 제목 강조 */
.care-tour-section-enter {
    animation: care-tour-section-flash 1400ms ease-out;
    border-radius: 8px;
}
@keyframes care-tour-section-flash {
    0%   { background-color: rgba(99, 102, 241, 0); }
    20%  { background-color: rgba(99, 102, 241, 0.25); }
    100% { background-color: rgba(99, 102, 241, 0); }
}

/* 체험 모드 진입 시 — 케어 AI / 개선문의 플로팅 버튼 숨김
 *   체험 가이드와 화면 가독성을 위해 페이지의 우하단 부유 UI 들을 제거. */
body.is-tour-active .cb-fab-wrap,
body.is-tour-active .cp-fab-wrap {
    display: none !important;
}

/* ─────────────────────────────────────────────────────────────
 * 자동 체험 인트로 — 풀스크린 카운트다운 + 흐름 미리보기
 *   care-records-edit.php startAutoTour() 진입 시 표시.
 * ───────────────────────────────────────────────────────────── */
.care-tour-intro-overlay {
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at 50% 35%,
        rgba(52, 211, 153, 0.94) 0%,
        rgba(5, 150, 105, 0.95) 55%,
        rgba(6, 78, 59, 0.97) 100%);
    z-index: 100020;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 320ms ease-out;
}
.care-tour-intro-overlay.is-show { opacity: 1; }
.care-tour-intro-overlay.is-done { opacity: 0; }

.care-tour-intro-card {
    width: min(540px, 92vw);
    padding: 36px 32px 28px;
    color: #fff;
    text-align: center;
    transform: translateY(12px);
    opacity: 0;
    transition: transform 380ms cubic-bezier(.2, .7, .2, 1.2),
                opacity 320ms ease-out;
}
.care-tour-intro-overlay.is-show .care-tour-intro-card {
    transform: translateY(0);
    opacity: 1;
}
.care-tour-intro-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 14px;
}
.care-tour-intro-title {
    margin: 0 0 8px;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
}
.care-tour-intro-desc {
    margin: 0 0 26px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.6;
}
.care-tour-intro-flow {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    margin-bottom: 28px;
}
.care-tour-intro-flow-step {
    padding: 14px 10px 12px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    text-align: center;
}
.care-tour-intro-flow-step i {
    font-size: 18px;
    margin-bottom: 6px;
    display: block;
    color: #a7f3d0;
}
.care-tour-intro-flow-step strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}
.care-tour-intro-flow-arrow {
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
}
.care-tour-intro-countdown {
    width: 150px;
    height: 150px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    border: 2px solid rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 82px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}
.care-tour-intro-countdown.is-tick {
    animation: care-tour-intro-tick 800ms ease-out;
}
@keyframes care-tour-intro-tick {
    0%   { transform: scale(1.15); background: rgba(255, 255, 255, 0.28); }
    100% { transform: scale(1);    background: rgba(255, 255, 255, 0.14); }
}
.care-tour-intro-cancel {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: rgba(255, 255, 255, 0.85);
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 160ms, color 160ms;
}
.care-tour-intro-cancel:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}
@media (max-width: 560px) {
    .care-tour-intro-flow {
        grid-template-columns: 1fr;
    }
    .care-tour-intro-flow-arrow {
        transform: rotate(90deg);
    }
}

/* ─────────────────────────────────────────────────────────────
 * 상단 진행 stepper — 자동 체험 중 현재 단계 안내
 * ───────────────────────────────────────────────────────────── */
.care-tour-stepper {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%) translateY(-12px);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: rgba(17, 24, 39, 0.94);
    color: #fff;
    border-radius: 999px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35),
                0 0 0 1px rgba(255, 255, 255, 0.08);
    z-index: 100015;
    opacity: 0;
    transition: opacity 280ms, transform 280ms cubic-bezier(.2, .7, .2, 1.2);
    backdrop-filter: blur(6px);
    max-width: calc(100vw - 24px);
    overflow: hidden;
}
.care-tour-stepper.is-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.care-tour-stepper-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    font-weight: 600;
    transition: background 200ms, color 200ms;
    white-space: nowrap;
}
.care-tour-stepper-item .care-tour-stepper-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.care-tour-stepper-item.is-active {
    background: linear-gradient(135deg, #6366f1, #7c3aed);
    color: #fff;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.45);
}
.care-tour-stepper-item.is-active .care-tour-stepper-dot {
    background: rgba(255, 255, 255, 0.28);
    color: #fff;
    animation: care-tour-stepper-pulse 1.6s ease-in-out infinite;
}
.care-tour-stepper-item.is-done {
    color: rgba(167, 243, 208, 0.95);
}
.care-tour-stepper-item.is-done .care-tour-stepper-dot {
    background: rgba(16, 185, 129, 0.92);
    color: #fff;
}
.care-tour-stepper-sep {
    color: rgba(255, 255, 255, 0.25);
    font-size: 10px;
    margin: 0 -2px;
}
@keyframes care-tour-stepper-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.45); }
    50%      { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
}
@media (max-width: 640px) {
    .care-tour-stepper-item .care-tour-stepper-label {
        display: none;
    }
    .care-tour-stepper-item.is-active .care-tour-stepper-label {
        display: inline;
    }
}

/* ─────────────────────────────────────────────────────────────
 * 호흡 ring (breathing) — D. 빠른생성 버튼 강조에 사용
 *   기존 .care-tour-ring 위에 더 큰 후광이 호흡함.
 * ───────────────────────────────────────────────────────────── */
.care-tour-breath {
    position: fixed;
    border-radius: 16px;
    pointer-events: none;
    z-index: 100009;
    border: 2px solid rgba(99, 102, 241, 0.45);
    animation: care-tour-breath-pulse 2.2s ease-in-out infinite;
    background: radial-gradient(ellipse at center,
        rgba(99, 102, 241, 0.08) 0%,
        rgba(99, 102, 241, 0) 70%);
}
@keyframes care-tour-breath-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.35;
        border-color: rgba(99, 102, 241, 0.30);
    }
    50% {
        transform: scale(1.08);
        opacity: 0.85;
        border-color: rgba(99, 102, 241, 0.65);
    }
}

/* Floating 손가락 가이드 — D. 빠른생성 버튼 위에서 톡톡 */
.care-tour-finger {
    position: fixed;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.5),
                0 0 0 4px rgba(255, 255, 255, 0.9);
    pointer-events: none;
    z-index: 100012;
    animation: care-tour-finger-tap 1.6s ease-in-out infinite;
}
@keyframes care-tour-finger-tap {
    0%, 100% { transform: translate(-50%, -8px); }
    50%      { transform: translate(-50%, 4px); }
}

/* ─────────────────────────────────────────────────────────────
 * 완료 모달 (celebration) — E. 친절한 마무리
 * ───────────────────────────────────────────────────────────── */
.care-tour-finish-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.62);
    z-index: 100025;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    transition: opacity 320ms ease-out;
    backdrop-filter: blur(4px);
}
.care-tour-finish-overlay.is-show { opacity: 1; }
.care-tour-finish-card {
    width: min(540px, 100%);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: #fff;
    border-radius: 20px;
    padding: 32px 28px 24px;
    box-shadow: 0 32px 64px rgba(0, 0, 0, 0.35),
                0 0 0 1px rgba(99, 102, 241, 0.12);
    transform: translateY(16px) scale(0.96);
    transition: transform 380ms cubic-bezier(.2, .7, .2, 1.2);
}
.care-tour-finish-overlay.is-show .care-tour-finish-card {
    transform: translateY(0) scale(1);
}

.care-tour-finish-celebrate {
    position: relative;
    width: 64px;
    height: 64px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, #34d399, #10b981);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 12px 28px rgba(16, 185, 129, 0.45);
}
.care-tour-finish-celebrate::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px solid rgba(16, 185, 129, 0.35);
    animation: care-tour-finish-ring 1.6s ease-out infinite;
}
@keyframes care-tour-finish-ring {
    0%   { transform: scale(0.9); opacity: 0.9; }
    100% { transform: scale(1.35); opacity: 0; }
}
.care-tour-finish-title {
    margin: 0 0 6px;
    text-align: center;
    font-size: 22px;
    font-weight: 800;
    color: #111827;
    letter-spacing: -0.01em;
}
.care-tour-finish-sub {
    margin: 0 0 22px;
    text-align: center;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.6;
}
.care-tour-finish-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 20px;
}
.care-tour-finish-stat {
    padding: 12px 8px;
    background: linear-gradient(180deg, #f8fafc, #eef2ff);
    border: 1px solid rgba(99, 102, 241, 0.18);
    border-radius: 12px;
    text-align: center;
}
.care-tour-finish-stat-num {
    display: block;
    font-size: 22px;
    font-weight: 800;
    color: #4f46e5;
    line-height: 1;
    margin-bottom: 4px;
}
.care-tour-finish-stat-label {
    display: block;
    font-size: 11px;
    color: #6b7280;
    font-weight: 500;
}
.care-tour-finish-benefits {
    margin: 0 0 24px;
    padding: 16px 18px;
    background: linear-gradient(135deg,
        rgba(99, 102, 241, 0.06),
        rgba(124, 58, 237, 0.05));
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: 14px;
}
.care-tour-finish-benefits-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #4f46e5;
    margin-bottom: 10px;
    letter-spacing: 0.02em;
}
.care-tour-finish-benefits-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}
.care-tour-finish-benefits-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: #374151;
    line-height: 1.5;
    /* 한국어 어절(단어) 단위로 wrap — 좁은 모바일에서 strong 주위 공백이
       이상하게 늘어나는 현상 방지. text-align 명시로 외부 justify 영향 차단. */
    text-align: left;
    word-break: keep-all;
    overflow-wrap: break-word;
}
.care-tour-finish-benefits-list li > :not(i) {
    /* li 의 텍스트 노드를 한 flex item 으로 묶기 위해 i 외 영역 강제 흐름.
       (strong 만 별도 inline 으로 두지 않게 — 같은 텍스트 흐름 안에 둠) */
    min-width: 0;
}
.care-tour-finish-benefits-list li i {
    color: #10b981;
    font-size: 12px;
    margin-top: 4px;
    flex-shrink: 0;
}
.care-tour-finish-actions {
    display: grid;
    gap: 8px;
}
.care-tour-finish-btn {
    width: 100%;
    padding: 13px 18px;
    border-radius: 12px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 140ms, box-shadow 200ms, background 200ms;
}
.care-tour-finish-btn--primary {
    background: linear-gradient(135deg, #6366f1, #7c3aed);
    color: #fff;
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4);
}
.care-tour-finish-btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(99, 102, 241, 0.5);
}
.care-tour-finish-btn--ghost {
    background: #fff;
    color: #4b5563;
    border-color: #e5e7eb;
}
.care-tour-finish-btn--ghost:hover {
    background: #f9fafb;
    color: #111827;
}

/* ─────────────────────────────────────────────────────────────
 * 모바일 안전 영역 — 상단 고정바(.sb-mobile-bar, 58px) 아래로 내려 준다
 *   ≤768px 에서는 사이드바가 접히고 화면 맨 위를 검은 고정바가 차지한다.
 *   가이드 카드·진행 배지·stepper 가 top:16px 이나 세로 가운데에 서면
 *   그 바 뒤로 들어가 안내가 안 보였다(실측: 말풍선 top=16 < 바 하단 58).
 *   말풍선(.care-tour-callout)은 위치를 JS 가 계산하므로 tour.js 의 fitCalloutY 가 같은 규칙을 쓴다.
 * ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .care-tour-auto-badge,
    .care-tour-stepper {
        top: calc(var(--mobile-bar-h, 58px) + 10px);
        /* 안내용 배지다 — 클릭은 통과시킨다. 바 아래로 내려오면서 그 자리의 버튼을 막아 버렸다. */
        pointer-events: none;
    }

    /* 진입 카드(선택 대화상자)는 가운데 — 위쪽 안여백을 바 높이만큼 줘서 «가운데» 기준을 바 아래로 옮긴다 */
    .care-tour-entry-overlay {
        padding: calc(var(--mobile-bar-h, 58px) + 14px) 14px 14px;
    }
    /* 안내 카드는 아래쪽으로 — 가운데 두면 카드가 목록을 덮어 «눌러 보세요» 라 해 놓고
       정작 그 목록을 누를 수가 없었다(모바일 실측). 위는 목록, 아래는 안내. */
    .care-tour-guide-overlay {
        align-items: flex-end;
        padding: calc(var(--mobile-bar-h, 58px) + 14px) 12px 14px;
    }
    /* 화면보다 긴 카드는 카드 안에서 스크롤 — 버튼이 화면 밖으로 밀려나 못 누르던 것 */
    .care-tour-guide-card,
    .care-tour-entry-card {
        max-height: calc(100vh - var(--mobile-bar-h, 58px) - 28px);
        max-height: calc(100dvh - var(--mobile-bar-h, 58px) - 28px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .care-tour-guide-card { padding: 26px 20px 24px; }
    /* 화면이 짧아 tour.js 가 카드에 뚜껑을 씌운 경우 — 여백과 아이콘을 줄여 글을 더 담는다 */
    .care-tour-guide-card.is-capped { padding: 16px 18px 16px; }
    .care-tour-guide-card.is-capped .care-tour-guide-icon {
        width: 40px; height: 40px; margin-bottom: 10px; font-size: 17px;
    }
    .care-tour-guide-card.is-capped .care-tour-guide-title { font-size: 18px; }

    /* 말풍선도 화면 폭 안에 — 이 파일은 border-box 를 안 쓰므로(width 320 + 안여백 36 + 테두리 2 = 358)
       360px 화면에서 오른쪽이 8px 잘렸다. 여기서만 border-box 로 바꿔 폭을 화면에 맞춘다. */
    .care-tour-callout {
        box-sizing: border-box;
        width: calc(100vw - 20px);
        max-width: 380px;
    }
}