/* 약속. v3 — 디자인 토큰 + 전역 base. 시안(README Design Tokens + HTML 인라인 style) 기준. */
:root{
  --yk-blue:#2496ED; --yk-blue-dark:#1676C9; --yk-yellow:#FACE21;
  --yk-ink:#111114; --yk-meta:#657180; --yk-meta2:#5B6676;
  --yk-line:#DCE4EC; --yk-line2:#E6EBF1;
  /* 상태색 */
  --yk-kept:#2496ED; --yk-late:#FF6A00; --yk-broken:#E3302A; --yk-progress:#FACE21; --yk-unknown:#5E636B;
  --yk-ease-head:cubic-bezier(.33,1,.68,1);
  --yk-sh-glass:0 0 0 1px rgba(255,255,255,.9) inset,0 1px 2px rgba(17,17,20,.05),0 12px 32px -16px rgba(30,70,140,.28);
  --yk-sh-panel:0 1px 2px rgba(17,17,20,.04),0 24px 60px -34px rgba(30,70,140,.5);
  --yk-sh-chatbar:0 1px 2px rgba(17,17,20,.05),0 20px 48px -22px rgba(30,70,140,.44);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:#fff;color:var(--yk-ink);
  font-family:"Wanted Sans Variable","Pretendard Variable","Apple SD Gothic Neo","Noto Sans KR",-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;word-break:keep-all}
*{word-break:keep-all}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
::selection{background:var(--yk-yellow)}
nav::-webkit-scrollbar{display:none}
:focus{outline:none}
:focus-visible{outline:2px solid var(--yk-blue);outline-offset:2px}
.yk-num{font-family:"Archivo",system-ui,sans-serif;font-weight:700;letter-spacing:-.02em}
/* 헤더 nav 링크 */
.yk-navlink{flex:none;font-size:15px;text-decoration:none;padding:20px 0 18px;border-bottom:2px solid transparent;white-space:nowrap;transition:color .15s;color:#3E4A59;font-weight:500}
.yk-navlink.on{color:var(--yk-ink);font-weight:700;border-bottom-color:var(--yk-blue)}
.yk-navlink:hover{color:var(--yk-blue-dark)}
@media(max-width:860px){#demo-tag{display:none!important}}

/* 대시보드 오버레이 보조 — 회전 점 은은한 맥동, details 마커 숨김 */
.yk-read summary::-webkit-details-marker{display:none}
.yk-spindot{animation:ykPulse 1.8s ease-in-out infinite}
@keyframes ykPulse{0%,100%{opacity:1}50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.yk-spindot{animation:none}}

/* 이슈 상세 맨 아래 '약속의 여정 보기' — 펼친 끝에 있어서 눈에 안 들어온다.
   세 번만 가볍게 튀고 멈춘다(무한 반복은 읽는 데 방해가 된다). 화살표만 움직이고
   버튼 자체는 가만히 둬서 누르는 자리가 흔들리지 않게 한다. */
.yk-bounce>span:last-child{display:inline-block;animation:ykNudge 1.1s ease-in-out 3}
@keyframes ykNudge{0%,100%{transform:translateX(0)}40%{transform:translateX(5px)}70%{transform:translateX(1px)}}
.yk-bounce:hover>span:last-child{animation:none;transform:translateX(4px);transition:transform .15s ease}
@media(prefers-reduced-motion:reduce){.yk-bounce>span:last-child{animation:none}}

/* 홈 도입 화면 '아래로 스크롤' 안내(10-30). 위 .yk-bounce 와 같은 원칙으로 화살표만 세 번 가볍게 내려갔다 멈춘다
   (모두 5초 안에 끝난다). 동그라미는 여정 01 의 '스크롤' 버튼과 같은 모양이다. */
.yk-scroll-ic{width:34px;height:34px;box-sizing:border-box;border:1.5px solid #111114;border-radius:50%;background:#FFFFFF;color:#111114;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700}
.yk-scroll-ic>span{display:inline-block;animation:ykDrop 1.3s ease-in-out .6s 3}
@keyframes ykDrop{0%,100%{transform:translateY(0)}40%{transform:translateY(5px)}70%{transform:translateY(1px)}}
#home-hint:hover .yk-scroll-ic>span,#home-hint:focus-visible .yk-scroll-ic>span{animation:none;transform:translateY(3px);transition:transform .15s ease}
@media(prefers-reduced-motion:reduce){.yk-scroll-ic>span{animation:none}}

/* 토스식 자릿수 롤링 숫자 */
.yk-roll{display:inline-flex;align-items:flex-end;line-height:1}
.yk-roll-sep{display:inline-block}
.yk-roll-d{display:inline-block;height:1em;overflow:hidden;vertical-align:bottom}
.yk-roll-col{display:flex;flex-direction:column;will-change:transform}
.yk-roll-col>span{height:1em;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:reduce){.yk-roll-col{transition:none!important}}

/* ===================================================================
   모바일 반응형 보강 (2026-11-02) — CSS 최소 수정. app.js/데이터/판정 로직 불변.
   PC(>=768px)는 영향 없음. 실제 재현된 모바일 문제만 타겟.
   =================================================================== */
@media(max-width:767px){
  /* ① 헤더: 로고+메뉴5개가 좁은 폭에 안 들어감 → 간격·폰트 축소 + 가로 스크롤 유지(이미 overflow-x:auto).
     스크롤바는 숨겨져 '더 있다'는 신호가 없으니 우측에 옅은 페이드로 암시. */
  #header > div{ gap:12px !important; padding:0 14px !important; }
  .yk-navlink{ font-size:14px !important; padding:18px 0 16px !important; }
  #nav{ -webkit-overflow-scrolling:touch; position:relative;
        -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
        mask-image:linear-gradient(90deg,#000 88%,transparent); }

  /* ② 대시보드 통계바: 인라인 nowrap+overflow:hidden 이라 모바일에서 숫자가 잘렸다.
     statBar 는 #terrain-ui 안의 top:18px 절대배치 pill(data-pin-avoid + translateX(-50%) 로 특정).
     #terrain-ui 한정이라 #main 의 지금이슈 상세 연도 뱃지(top:18px)에는 영향 없음.
     모바일 설계: '가로 한 줄 바'를 유지하되(값·라벨·순서·색 그대로), 좁은 폭에 다 안 들어가므로
     가로 스크롤 + 우측 페이드 마스크로 '더 있다'는 신호를 준다. 세로로 길어지지 않아 도트 지형을 가장 적게 가린다. */
  #terrain-ui [data-pin-avoid][style*="top:18px"][style*="translateX(-50%)"]{
    top:12px !important;
    width:calc(100vw - 24px) !important;
    max-width:none !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:space-between !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:2px !important;
    padding:7px 10px !important;
    border-radius:16px !important;
  }
  #terrain-ui [data-pin-avoid][style*="top:18px"][style*="translateX(-50%)"]::-webkit-scrollbar{ display:none; }
  /* 항목 폭 압축: 5개 수치 + 머리글 + 뱃지를 좁은 폭에 최대한 한 화면에 */
  #terrain-ui [data-pin-avoid][style*="top:18px"][style*="translateX(-50%)"] > *{ flex:none !important; }
  /* 머리글(● 전체 분야): 패딩/폰트 축소 */
  #terrain-ui [data-pin-avoid][style*="top:18px"][style*="translateX(-50%)"] > div:first-child{
    gap:5px !important; padding-right:4px !important;
  }
  #terrain-ui [data-pin-avoid][style*="top:18px"][style*="translateX(-50%)"] > div:first-child span:last-child{
    font-size:12px !important;
  }
  #terrain-ui [data-pin-avoid][style*="top:18px"][style*="translateX(-50%)"] > div:first-child span:first-child{
    width:7px !important; height:7px !important;
  }
  /* 각 수치 항목: 좌우 패딩·구분선 폭 압축, 값/라벨 폰트 축소 */
  #terrain-ui [data-pin-avoid][style*="top:18px"][style*="translateX(-50%)"] > div[style*="border-left"]{
    padding:2px 6px !important; gap:1px !important;
  }
  #terrain-ui [data-pin-avoid][style*="top:18px"][style*="translateX(-50%)"] > div[style*="border-left"] .stat-num{
    font-size:15px !important;
  }
  #terrain-ui [data-pin-avoid][style*="top:18px"][style*="translateX(-50%)"] > div[style*="border-left"] > span:last-child{
    font-size:10px !important;
  }
  /* 실데이터 뱃지: 폰트·패딩 압축 */
  #terrain-ui [data-pin-avoid][style*="top:18px"][style*="translateX(-50%)"] > span:last-child{
    font-size:10px !important; padding:3px 7px !important; margin-left:4px !important;
  }

  /* ④ 대시보드 하단 겹침 제거: '이 지형 읽는 법'(왼쪽 bottom)과 안내문구+재생버튼(오른쪽 bottom)이
     좁은 폭에서 x축으로 겹쳐 지저분했다. 모바일에선 긴 안내문구를 숨기고 재생버튼만 남겨,
     왼쪽 읽는법 / 오른쪽 재생버튼이 겹치지 않게 분리한다(기능·접근성 유지, 문구는 이미 '이 지형 읽는 법'에 설명 있음). */
  #terrain-ui [data-pin-avoid][style*="right"][style*="bottom:24px"]{
    max-width:none !important;
    gap:0 !important;
    bottom:20px !important;
  }
  #terrain-ui [data-pin-avoid][style*="right"][style*="bottom:24px"] > span{
    display:none !important;   /* 긴 회전 안내문구 숨김 — 재생버튼 title/aria 로 의미 유지 */
  }
  #terrain-ui details.yk-read{ bottom:20px !important; max-width:min(60vw,220px) !important; }

  /* ③ 본문 컨테이너·히어로 가로 넘침 방지(의도치 않은 가로 스크롤 차단) */
  html,body{ overflow-x:hidden; }
  #main h1{ overflow-wrap:anywhere; }
}

/* 아주 좁은 화면(<=360px) 추가 축소 */
@media(max-width:360px){
  .yk-navlink{ font-size:13px !important; }
  #header > div{ gap:10px !important; }
}