@charset "UTF-8";
/* 365 서울챌린지 온보딩 가이드 (하이브리드 코치마크 투어) */

/* ── 우하단 고정 버튼 ─────────────────────────────────────────
   화면 우하단 스택 (아래 → 위)
     TOP      .footer .top-btn : right:10px / bottom:10px  / 70x70 / z-index:5
     문의하기  seoul-widget     : right:10px / bottom:90px  / 70x70 (shadow DOM 내부 고정값)
     가이드    #scQuick         : right:10px / bottom:170px / 70x70   ← 같은 10px 간격으로 그 위
   z-index 5 이므로 레이어팝업(.popup-wrap z-index:50)이 뜨면 팝업 뒤로 가려진다. */
#scQuick{position:fixed;right:10px;bottom:170px;z-index:5;}
#scGuideBtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    width:70px;height:70px;border:none;cursor:pointer;border-radius:50%;
    background:#ffb300;color:#4a3000;font-weight:500;font-size:14px;letter-spacing:0;
    box-shadow:0 3px 8px rgba(0,0,0,0.2);}   /* 문의하기 위젯과 동일한 그림자 */
#scGuideBtn .ic{font-size:20px;line-height:1;}

/* 문의하기 위젯: shadow DOM 안쪽이 z-index:2147483000 으로 고정돼 있어
   host 에 스태킹 컨텍스트를 만들어 그 값을 가둔다 → 레이어팝업 뒤로 내려간다.
   (position:relative 는 내부의 position:fixed 좌표에 영향을 주지 않는다) */
seoul-widget{position:relative;z-index:5;}

/* ── 투어 선택 메뉴 ───────────────────────────────────────── */
#scMenu{position:fixed;right:10px;bottom:250px;z-index:6;/* 가이드 버튼(170+70) + 10 */
    width:400px;max-width:calc(100vw - 20px);background:#fff;border-radius:16px;
    padding:22px;box-shadow:0 10px 40px rgba(0,0,0,.28);display:none;}
#scMenu.show{display:block;}
#scMenu .sc-mtit{font-weight:700;font-size:22px;color:#000;margin-bottom:6px;line-height:1.4;}
#scMenu .sc-msub{font-size:15px;color:#555;margin-bottom:16px;line-height:1.5;}
#scMenu ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
#scMenu button.sc-mitem{width:100%;text-align:left;border:1px solid #d9d9d9;background:#fff;border-radius:12px;
    padding:15px 17px;font-size:17px;font-weight:700;color:#000;cursor:pointer;line-height:1.4;
    display:flex;justify-content:space-between;align-items:center;gap:10px;word-break:keep-all;}
#scMenu button.sc-mitem:hover{border-color:#d1156f;background:#fff5fa;color:#d1156f;}
#scMenu button.sc-mitem .cnt{font-size:15px;font-weight:600;color:#555;flex:0 0 auto;}
#scMenu .sc-mempty{font-size:16px;color:#555;padding:10px 2px;}
#scMenu .sc-mclose{position:absolute;top:14px;right:16px;border:none;background:none;color:#555;
    font-size:15px;cursor:pointer;padding:4px;}

/* ── 오버레이 공통 ───────────────────────────────────────── */
#scOnboard{position:fixed;inset:0;z-index:99999;display:none;}

/* live 모드 — 실제 화면 요소 스포트라이트 */
#scOnboard.mode-live{display:block;background:transparent;}
#scSpot{position:absolute;border-radius:12px;border:3px dashed #ffd54a;
    box-shadow:0 0 0 9999px rgba(0,0,0,.72);transition:all .3s cubic-bezier(.4,0,.2,1);pointer-events:none;}

/* 상태 도장 예시 — 해당 상태의 챌린지가 없을 때 빙고칸 위에 겹쳐 그린다.
   위치·크기는 JS 가 content.css 의 .inner::after 규격(112x82, 우하단)에 맞춰 계산 */
#scFake{position:absolute;display:none;pointer-events:none;z-index:1;}

/* 클릭 위치 안내 커서 — 화살표 끝(좌상단)이 대상 중앙에 오도록 JS 가 좌표를 잡는다.
   흰 채움 + 어두운 외곽선이라 딤 배경과 밝은 카드 어느 쪽에서도 보인다. */
#scCursor{position:absolute;display:none;pointer-events:none;z-index:2;width:34px;height:34px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2 L4 19 L8.5 14.8 L11.2 21.2 L14.4 19.7 L11.7 13.6 L18 13.6 Z' fill='%23fff' stroke='%23222' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat left top / contain;
    filter:drop-shadow(0 2px 5px rgba(0,0,0,.5));}
/* 화살표 끝에서 퍼지는 탭 링 — '누르세요'를 알리는 신호 */
#scCursor::before{content:"";position:absolute;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;
    border:3px solid #ffd54a;border-radius:50%;opacity:0;animation:scTap 1.6s ease-out infinite;}
@keyframes scTap{0%{transform:scale(.3);opacity:.9}70%{transform:scale(1.3);opacity:0}100%{opacity:0}}

/* img 모드 — 레이어팝업 형태 (딤 배경 + 화면의 약 70% 크기) */
#scOnboard.mode-img{display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:14px;padding:24px;background:rgba(0,0,0,.6);}
#scPanel{display:none;position:static;flex-direction:column;background:#fff;
    width:70vw;min-width:360px;max-width:1200px;max-height:60vh;
    border-radius:16px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.45);}
#scPanel .sc-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:12px 18px;border-bottom:1px solid #f0f0f0;background:#fff;}
#scPanel .sc-head strong{font-size:20px;font-weight:700;color:#000;line-height:1.4;}
#scPanel .sc-skip{border:none;background:none;color:#555;font-size:16px;cursor:pointer;padding:6px 8px;}
.sc-shot{flex:1 1 auto;overflow:auto;background:#f7f7f9;}
.sc-shot .sc-frame{position:relative;display:block;width:100%;line-height:0;}
.sc-shot img{display:block;width:100%;height:auto;}
.sc-shot .sc-box{position:absolute;border:3px solid #ff2d55;border-radius:6px;
    box-shadow:0 0 0 3px rgba(255,45,85,.22);animation:scPulse 1.6s ease-in-out infinite;pointer-events:none;}
@keyframes scPulse{0%,100%{box-shadow:0 0 0 3px rgba(255,45,85,.22)}50%{box-shadow:0 0 0 9px rgba(255,45,85,.10)}}

/* ── 코치마크 (두 모드 공통) ─────────────────────────────── */
#scCoach{position:fixed;width:380px;max-width:calc(100vw - 24px);background:#fff;border-radius:16px;
    padding:18px 20px;box-shadow:0 10px 40px rgba(0,0,0,.35);transition:all .3s cubic-bezier(.4,0,.2,1);}
#scOnboard.mode-img #scCoach{position:static;width:70vw;min-width:360px;max-width:1200px;
    flex:0 0 auto;max-height:28vh;overflow:auto;}
/* 글자 크기·색상은 사이트 규격을 따름
   본문 17px(.b-txt-st2) / 소제목 20px(.h-tit-st4) / 작은글씨 15px(.sm-txt-st1) / 기본색 #000 */
#scCoach .sc-row{display:flex;align-items:flex-end;gap:12px;margin-bottom:10px;}
#scCoach .sc-mascot{width:64px;height:64px;border-radius:50%;flex:0 0 64px;background:#fff5fa;
    border:2px solid #e6187c;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;}
#scCoach .sc-mascot img{width:88%;height:88%;object-fit:contain;object-position:bottom;}
#scCoach .sc-name{font-weight:700;color:#d1156f;font-size:17px;line-height:1.4;}
#scCoach .sc-sub{font-size:15px;color:#555;line-height:1.4;}
#scCoach .sc-title{font-weight:700;font-size:22px;margin:4px 0 8px;color:#000;line-height:1.4;}
#scCoach .sc-desc{font-size:17px;color:#000;line-height:1.6;word-break:keep-all;}
#scCoach .sc-note{display:none;margin-top:10px;padding:10px 12px;background:#fff8e1;
    border:1px solid #ffe082;border-radius:10px;font-size:15px;color:#6b5000;line-height:1.5;word-break:keep-all;}
/* 단계표시와 버튼을 위·아래로 분리 — 한 줄에 두면 버튼에 밀려 점이 줄바꿈된다 */
#scCoach .sc-foot{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin-top:18px;}
#scCoach .sc-steps{display:flex;align-items:center;gap:10px;font-size:15px;color:#555;}
#scCoach .sc-dots{display:flex;gap:5px;flex-wrap:nowrap;align-items:center;}
#scCoach .sc-dots i{width:8px;height:8px;border-radius:50%;background:#c9c9c9;display:inline-block;flex:0 0 auto;}
#scCoach .sc-dots i.on{background:#d1156f;width:20px;border-radius:4px;}
#scCoach .sc-btns{display:flex;gap:6px;flex:0 0 auto;justify-content:flex-end;flex-wrap:wrap;}
#scCoach button{border:none;border-radius:24px;padding:11px 18px;font-size:16px;font-weight:700;cursor:pointer;}
#scCoach .sc-back{background:#fff;color:#555;border:1px solid #c9c9c9;}
#scCoach .sc-prev{background:#ebebeb;color:#333;}
#scCoach .sc-next{background:#d1156f;color:#fff;}

@media (max-width:768px){
  /* 모바일: 문의하기 60x60 @bottom:70px → 70~130px 차지, 10px 띄워 그 위 */
  #scQuick{bottom:140px;}
  #scGuideBtn{width:60px;height:60px;font-size:13px;gap:2px;}
  #scGuideBtn .ic{font-size:17px;}
  #scMenu{right:10px;bottom:210px;width:calc(100vw - 20px);max-width:300px;}
  #scOnboard.mode-img{padding:10px;gap:10px;}
  #scPanel{width:100%;min-width:0;max-height:52vh;}
  #scOnboard.mode-img #scCoach{width:100%;min-width:0;max-height:40vh;}
  #scCoach .sc-title{font-size:20px;}
  #scCoach .sc-desc{font-size:16px;}
  #scMenu .sc-mtit{font-size:20px;}
  #scMenu button.sc-mitem{font-size:16px;}
  #scCoach{padding:16px;}
}