/* app.css — 매크로웨더 앱 화면 스타일 본체
   2026-09-23 app.html 의 인라인 <style>(401KB · 약 203~5928행) 을 그대로 옮겨왔다.
   왜: app.html 이 562KB 였고 내비게이션은 sw.js 가 network-first 라 앱을 열 때마다 90KB(br) 를
       다시 받았다. 외부 파일이면 SW 가 stale-while-revalidate 로 들고 있어 재방문이 가볍다.
   ⚠ app.html 인라인에 남긴 것 두 가지(이 파일에는 없다): :root{--fs} 배율 규칙 · #app-boot 부팅 화면.
     이유는 app.html 의 그 <style> 주석 참조.
   ⚠ 캐스케이드 순서는 app.html 의 <link> 위치가 정한다 — design-system.css → pages.css → hierarchy.css
     → dual-lens.css → (인라인 폰트/부팅) → **app.css** → 폰트 CDN CSS. 순서를 바꾸면 덮어쓰기가 뒤집힌다.
   ⚠ 갱신 시 app.html 의 ?v= 를 올릴 것. sw.js 프리캐시 목록은 생성기가 app.html 을 읽어 채운다. */

:root{
  /* ── 서체 토큰 (34차 · 타입 시스템 v2) ──────────────────────────
     ⚠ 순서가 곧 규칙이다. Schibsted 는 unicode-range 로 라틴에 잠겨 있어
       한글은 그다음 서체가 그린다. 마지막 Pretendard Variable 은 안전망. */
  /* ⚠ 한글 제목은 MWHeadKR(Gmarket Sans) 가 그린다 — 35차에 되돌린 값이다.
     라틴·숫자는 Schibsted Grotesk 를 유지한다(둥근 Nunito 로 돌아가지는 않는다). */
  --font-hd:'Schibsted Grotesk','MWHeadKR','Pretendard Variable','Apple SD Gothic Neo',sans-serif;
  /* 개념 학습 팝업만 쓰는 스택 — 사용자가 이쪽은 새 서체가 낫다고 했다 */
  --font-hd-modal:'Schibsted Grotesk','Wanted Sans Variable','Pretendard Variable','Apple SD Gothic Neo',sans-serif;
  --font-body:'Schibsted Grotesk','Pretendard Variable','Apple SD Gothic Neo',-apple-system,sans-serif;
  --font-head:var(--font-hd);
  --w-body:550;  /* 한글 본문은 550 부터가 제대로 읽힌다 — 가변축이라 비용 없음 */
  --w-em:760;
  --w-hd:800;

  /* 화이트 미니멀 베이스 — 시인성 강화 */
  /* ⚠ 예전 #F9FAFB는 흰 카드(#FFF) 대비 1.04:1로 카드 경계가 사라졌다.
     1차로 #EEF1F5(1.13)까지 낮췄으나 여전히 약해 한 번 더 조인다(→ 약 1.22).
     라이트 테마는 순백 카드와의 명도차만으로 1.3을 만들면 배경이 탁해지므로,
     나머지는 아래 --bd(테두리)를 진하게 해서 구조를 잡는다. */
  --bg:#E4E9F0;          /* 페이지 배경 (off-white) */
  --bg2:#FFFFFF;         /* 카드 surface (순백) */
  --bg3:#F3F4F6;         /* 옅은 회색 (input, chip) */
  --bg4:#E5E7EB;         /* 더 진한 회색 */
  --bd:rgba(15,23,42,.20);     /* 카드 외곽선 — 보이도록 강화 */
  --bd2:rgba(15,23,42,.30);    /* 강조 외곽선 */
  --t:#0F172A;           /* primary text */
  --t2:#334155;          /* secondary text — 콘트라스트↑ */
  --t3:#4E5D71;          /* tertiary text — 배경을 #E4E9F0으로 낮추면서 #5A6B80이 4.47:1로 AA 미달이 돼 한 단계 더 진하게 (2026-08-10) */
  /* 하단 탭바 비활성 라벨 전용 (25차) — --t3(6.71:1)를 쓰면 조연이 주연보다 진해져
     활성 탭이 대비 싸움에서 진다(활성 5.07 < 비활성 6.71). 한 단계 죽이되
     11px 라벨이라 WCAG AA 4.5:1은 지킨다. #5F6E82 = 흰 배경 대비 5.20:1 */
  --nav-idle:#5F6E82;
  --acc:#E27C1F;         /* Sunrise Amber — 매크로웨더 브랜드 컬러 (채움·테두리용) */
  --acc2:#F2A83E;        /* Sunrise Amber Light — 강조·highlight */
  --acc-soft:#FEF3E2;    /* Amber Cream — 배경 틴트 */
  /* 밝은 배경 위 텍스트용 액센트는 --acc-text (아래 접근성 토큰 블록에서 정의) */
  /* 보조 컬러 (의미 있는 정보용) — 채도 강화 */
  --blue:#1E5FBB;--green:#15803D;--red:#DC2626;
  --purple:#5B5BF6;--coral:#E45A3A;--teal:#0284C7;--pink:#DB2777;
  /* 3D 버튼 그림자 (Duolingo 스타일) */
  --btn-shadow-acc:#8F4507;
  --btn-shadow-green:#0F5E2D;
  --btn-shadow-red:#A41C1C;
  --btn-shadow-blue:#1D4ED8;
  /* 섹터 유니폼 컬러 — 화이트 배경에 깔끔하게 돋보이는 톤 */
  --sec-tech:#6366F1;     /* A: Soft Indigo Purple — IT/빅테크 */
  --sec-defense:#1E40AF;  /* B: Deep Royal Blue — 방산/우주 */
  --sec-money:#B8923A;    /* C: Muted Gold — 금융/리츠 */
  --sec-energy:#6B8E6B;   /* D: Sage Green — 에너지/소비재 */
  /* 섹터 배경 틴트 */
  --sec-tech-bg:rgba(99,102,241,.08);
  --sec-defense-bg:rgba(30,64,175,.08);
  --sec-money-bg:rgba(184,146,58,.10);
  --sec-energy-bg:rgba(107,142,107,.10);
  /* safe-area: env()가 0 을 반환하는 환경(일반 모바일 브라우저)에서도 최소 여백을 보장
     PWA / 노치/Dynamic Island 환경에서는 더 큰 실측값을 사용 */
  --st:max(env(safe-area-inset-top,14px),14px);
  --sb:max(env(safe-area-inset-bottom,12px),12px);
  /* 카드 그림자 — 깊이감 강화 */
  --shadow-sm:0 1px 3px rgba(15,23,42,.08),0 1px 2px rgba(15,23,42,.06);
  --shadow-md:0 4px 12px rgba(15,23,42,.08),0 2px 4px rgba(15,23,42,.06);
  --shadow-lg:0 10px 28px rgba(15,23,42,.12),0 4px 8px rgba(15,23,42,.06);
  /* 무드(날씨) 카드 틴트 강도 — 라이트는 옅게, 다크는 진하게 해야 색이 읽힌다 */
  --mood-tint:14%;
  /* 앰버 위에 올릴 글자색. 흰색은 앰버 대비 2.8:1로 AA 미달이라 진한 갈색을 쓴다
     (랜딩 페이지 .btn-primary와 동일한 처리) */
  --on-acc:#3B2A00;
}

/* ═══════════════════════════════════════════════════════
   다크 테마 — theme.js가 data-theme을 항상 확정값(light|dark)으로
   써주므로 여기서는 dark 한 벌만 정의한다(중복 없음).
   OS 설정 추종은 theme.js가 matchMedia로 처리.
   ═══════════════════════════════════════════════════════ */
:root[data-theme="dark"]{
  --bg:#0F1419;          /* 페이지 배경 — 앰버와 어울리도록 살짝 따뜻한 슬레이트 */
  /* ⚠ 카드 surface — 예전 #1A1F26은 배경 대비 **1.12:1**이라 카드가 배경에
     녹아 구조가 안 보였다. 텍스트 대비(16.9:1)는 충분했는데도 "시인성이 떨어진다"고
     느껴진 진짜 원인이 이 면 구분이었다 (2026-08-10 실측·사용자 신고). */
  --bg2:#242C36;         /* 카드 surface */
  --bg3:#242A33;         /* input · chip */
  --bg4:#2F3641;
  --bd:rgba(255,255,255,.18);
  --bd2:rgba(255,255,255,.28);
  --t:#F1F5F9;
  --t2:#CBD5E1;
  --t3:#94A3B8;
  /* 탭바 비활성 — 다크는 --t3가 6.16:1로 이미 충분히 밝아 활성과 구분이 약했다.
     #8593A8 = 탭바 배경(#1A1F26) 대비 5.31:1 (AA 유지) */
  --nav-idle:#8593A8;
  /* 어두운 배경에서 대비를 확보하려면 앰버를 한 단계 밝게 */
  --acc:#F2A83E;
  --acc2:#FBC56B;
  --acc-soft:rgba(242,168,62,.14);
  /* 보조 컬러도 어두운 배경 기준으로 밝게 (WCAG AA 확보) */
  --blue:#5B9BF5;--green:#4ADE80;--red:#F87171;
  --purple:#A5A5FF;--coral:#FF8A6B;--teal:#38BDF8;--pink:#F472B6;
  --btn-shadow-acc:#B4600E;
  --btn-shadow-green:#166534;
  --btn-shadow-red:#B91C1C;
  --btn-shadow-blue:#1E40AF;
  /* 섹터 유니폼 — 다크에서 식별되도록 채도·명도 상향 */
  --sec-tech:#8B8DF7;
  --sec-defense:#5B84E8;
  --sec-money:#D9B65C;
  --sec-energy:#8FB88F;
  --sec-tech-bg:rgba(139,141,247,.14);
  --sec-defense-bg:rgba(91,132,232,.14);
  --sec-money-bg:rgba(217,182,92,.14);
  --sec-energy-bg:rgba(143,184,143,.14);
  /* 그림자는 검정을 더 진하게 (밝은 그림자는 다크에서 안 보임) */
  --shadow-sm:0 1px 3px rgba(0,0,0,.40),0 1px 2px rgba(0,0,0,.30);
  --shadow-md:0 4px 12px rgba(0,0,0,.45),0 2px 4px rgba(0,0,0,.30);
  --shadow-lg:0 10px 28px rgba(0,0,0,.55),0 4px 8px rgba(0,0,0,.35);
  /* 어두운 표면에선 14%로는 색이 안 읽힌다 — 날씨 정체성이 살도록 대폭 상향 */
  --mood-tint:34%;
  --on-acc:#2A1A05;     /* 다크의 앰버는 더 밝으므로 잉크를 한 단계 더 진하게 */
  color-scheme: dark;   /* 스크롤바·폼 컨트롤도 다크로 */
}

/* 토큰을 안 쓰고 흰색이 직접 박힌 표면들 — 다크에서만 덮어쓴다.
   (저투명도 rgba(255,255,255,.02~.08)는 이미 어두운 패널 위 하이라이트라 그대로 둔다) */
:root[data-theme="dark"] .bnav{background:rgba(26,31,38,.98);}
:root[data-theme="dark"] #weather-hud{background:rgba(26,31,38,.94);}
:root[data-theme="dark"] .macro-live-card{background:rgba(26,31,38,.85) !important;}
:root[data-theme="dark"] .char-wrap{background:rgba(26,31,38,.70);}
:root[data-theme="dark"] .tut-bubble{background:var(--bg2);color:var(--t);}
:root[data-theme="dark"] #amb-relief-toast{background:rgba(26,31,38,.92);}
:root[data-theme="dark"] .lvl-cur-bar{background:rgba(255,255,255,.14);}
/* 앰비언트 장식은 position:absolute·z-index:0이라 정적 콘텐츠 '위'에 그려진다.
   (24차) 과거엔 라이트 전용 아트를 다크에서 filter .25로 눌러버려 배경 날씨가
   아예 안 보였다 → 아래 amb-bg 다크 전용 그라디언트·구름색과 세트로 .75까지 복원.
   opacity는 .amb-hidden 토글·[data-mood] 규칙이 이미 쓰고 있어, 간섭 없는
   filter를 유지한다. */
:root[data-theme="dark"] #ambient-layer{filter:opacity(.75);}
/* 다크에서 밝은 배경(--green·--red·--acc) 위 흰 글씨가 씻겨 보이던 것들 → 진한 잉크색 (24차) */
:root[data-theme="dark"] .btn3d-green{color:#04240E;}
:root[data-theme="dark"] .buy-btn{color:#04240E;}
:root[data-theme="dark"] .sell-btn{color:#3B0A0A;}
:root[data-theme="dark"] .dc-live{color:#3B0A0A;}
:root[data-theme="dark"] .ci-done-ic{color:#04240E;}
:root[data-theme="dark"] .lvl-item.done .lvl-item-num{color:#04240E;}
/* 밝은 앰버 그라디언트 카드는 다크에서 틴트로 대체 */
:root[data-theme="dark"] .lvl-cur,
:root[data-theme="dark"] .topbar-prog{background:linear-gradient(135deg,rgba(242,168,62,.18),rgba(242,168,62,.08));}
:root[data-theme="dark"] .topbar-prog-sep{background:rgba(242,168,62,.35);}
:root[data-theme="dark"] .xp-track{background:rgba(242,168,62,.22);}
:root[data-theme="dark"] .streak-n{text-shadow:none;}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}

/* 접근성 (30차) — 본문 건너뛰기 링크. 화면 밖에 두고 포커스 시에만 나타난다
   (display:none으로 숨기면 키보드로도 도달할 수 없어 스킵 링크로 못 쓴다) */
.skip-link{position:fixed;left:-9999px;top:0;z-index:2147483647;padding:12px 20px;
  background:var(--gold,#E27C1F);color:#fff;font-weight:800;font-size:calc(15px * var(--fs,1));
  border-radius:0 0 12px 0;text-decoration:none;}
.skip-link:focus{left:0;}
/* 키보드 포커스 링 — 마우스 클릭에는 안 뜨고 키보드 이동에만 보인다.
   data-act 요소가 tabindex=0을 받으면서 탭 스톱이 늘었으므로 위치 표시가 필수다 */
:focus-visible{outline:3px solid var(--gold,#E27C1F);outline-offset:2px;border-radius:8px;}
html,body{
  /* 모바일에서 URL바 표시/숨김에 따라 100vh가 흔들리는 문제 방지
     - svh: small viewport height (가장 작은 안정값) → 기본 컨테이너 기준
     - dvh: dynamic viewport height (실시간 변동) → 마지막에 적용해 지원 기기는 dvh로 채움
     - 100%: 미지원 브라우저 폴백 */
  height:100%;
  height:100svh;
  height:100dvh;
  overflow:hidden;
  background:var(--bg);color:var(--t);
  /* 본문 폰트 — 타입 시스템 v2 (34차): 라틴은 Schibsted Grotesk, 한글은 Pretendard Variable */
  font-family:var(--font-body);
  /* ⚠ 한글 본문은 550 부터가 제대로 읽힌다 (34차 · 랜딩에서 검증).
     가변축이라 굵기를 올려도 파일이 안 늘어난다. */
  font-weight:var(--w-body,550);
  font-size:clamp(14px,3.8vw,16px);
  letter-spacing:-0.01em;
  /* iOS 노치/Dynamic Island 영역까지 배경색이 확장되도록 */
  background-color:var(--bg);
}
/* 한글 조판 — palt 로 괄호·따옴표 주변 공백을 줄인다 */
:lang(ko), body{font-feature-settings:"palt";}
.app{
  height:100%;
  height:100svh;
  height:100dvh;
  display:flex;flex-direction:column;
  max-width:430px;margin:0 auto;
  position:relative;
}

/* TOPBAR */
.topbar{
  /* safe-area + 6px 추가 여백. 좁은 화면(<360px)에서는 좌우 패딩 축소 */
  padding:calc(var(--st) + 8px) clamp(12px,4vw,16px) 9px;
  display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;gap:8px;min-height:0;
  /* PWA 상태바 영역까지 배경이 채워지도록 (black-translucent 모드 대응) */
  background:var(--bg);
}
/* 헤더 브랜드 — 심볼 + 이름. 심볼은 무드에 따라 바뀌지 않는 기본형(mood-base)이다.
   무드는 파비콘과 기상도 카드가 알리고, 헤더는 브랜드 고정점이어야 하기 때문. */
.brand-block{display:flex;align-items:center;gap:9px;min-width:0;}
.app-mark{line-height:0;flex:none;}
/* 360px 미만에서는 심볼을 뺀다. 이 폭에서는 심볼이 없어도 topbar가 이미 빠듯해서
   (브랜드 71 + 우측 255 = 326 > 320) 심볼을 더하면 이름이 우측 영역을 파고든다.
   좁을 때 지켜야 하는 건 장식이 아니라 이름이다. */
@media(max-width:359px){ .app-mark{display:none;} .brand-block{gap:0;} }
.logo{font-family:var(--font-hd);font-size:clamp(16px,4vw,21px);letter-spacing:-.3px;white-space:nowrap;}
.logo-sub{font-size:calc(11px * var(--fs,1));color:var(--t3);letter-spacing:.4px;text-transform:uppercase;margin-top:2px;white-space:nowrap;padding:5px 0;min-height:24px;box-sizing:content-box;}
.topbar-right{display:flex;align-items:center;gap:8px;flex-shrink:0;}
/* ── 상단바 아이콘 버튼 공통 (33차) — 학습모드(#age-mode-badge)·알림(#notif-bell)·로그인(#auth-btn.is-icon)
   셋이 같은 34px 원형. 예전엔 30×26 / 32×28 / 45×25 로 제각각이었고 전부 터치 타깃 미달이었다. */
.tb-ib,#notif-bell,#age-mode-badge{
  width:34px;height:34px;min-width:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;padding:0;
  background:transparent;border:1px solid var(--bd2);color:var(--t2);
  cursor:pointer;font-family:inherit;line-height:1;flex:none;
}
.tb-ib:hover,#notif-bell:hover{background:var(--bg3);border-color:var(--acc);color:var(--t);}
.tb-ib:active,#notif-bell:active,#age-mode-badge:active{transform:scale(.94);}
.tb-ib-ic{display:flex;line-height:0;}
/* 로그인 뒤 — 닉네임 pill (auth.js refreshUI 가 .is-icon 을 떼고 텍스트를 넣는다) */
#auth-btn:not(.is-icon){width:auto;min-width:0;border-radius:24px;padding:0 10px;font-size:calc(11px * var(--fs,1));font-weight:600;white-space:nowrap;max-width:92px;overflow:hidden;text-overflow:ellipsis;display:block;line-height:32px;}
/* 진척 pill — 불꽃+연속일수 | XP 막대. 튜토리얼 2단계의 스포트라이트 대상(.topbar-prog) */
.topbar-prog{
  display:flex;align-items:center;gap:8px;cursor:pointer;
  background:linear-gradient(135deg,#FEF3E2,#FDD9A6);
  border:1.5px solid var(--acc);border-radius:24px;padding:3px 10px 3px 8px;white-space:nowrap;
  min-height:32px;box-sizing:border-box;   /* 옆의 34px 아이콘 버튼과 높이 맞춤 */
  box-shadow:0 2px 0 var(--btn-shadow-acc),0 3px 8px rgba(226,124,31,.18);
  transition:transform .12s ease;
}
.topbar-prog:active{transform:scale(.97);}
.topbar-prog-sep{width:1px;height:18px;background:rgba(143,69,7,.22);flex:none;}
/* 큰 글씨 모드 — 상단바가 좁아지므로 보조 요소를 줄여 잘림을 막는다 */
:root[data-font-scale] .topbar{gap:4px;padding-left:8px;padding-right:8px;}
:root[data-font-scale] .topbar-right{gap:4px;}
:root[data-font-scale] .topbar-prog{gap:5px;padding:3px 8px;}
:root[data-font-scale] .logo-sub{display:none;}
/* XP 바는 잘려 보이느니 숨긴다 — 수치는 레벨 모달에서 확인 가능 */
:root[data-font-scale] .xp-wrap,:root[data-font-scale] .topbar-prog-sep{display:none;}
.streak{display:flex;align-items:center;gap:3px;}
.streak-ic{display:flex;line-height:0;margin-right:1px;}
.streak-n{font-size:calc(14px * var(--fs,1));font-weight:800;color:var(--acc-text);text-shadow:0 1px 0 rgba(255,255,255,.6);font-variant-numeric:tabular-nums;}
/* "일 출석" 라벨은 pill 안에선 뜻이 불꽃으로 전달되므로 작게 — 375px 폭 확보 */
.streak-l{font-size:calc(10px * var(--fs,1));color:var(--acc-text);font-weight:700;letter-spacing:.2px;}
/* XP — pill 안에서 막대 위 / 숫자 아래로 쌓는다 */
.xp-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:2px;}
.xp-row{display:flex;align-items:center;gap:5px;}
.xp-track{width:clamp(44px,12vw,72px);height:5px;background:rgba(143,69,7,.18);border-radius:4px;overflow:hidden;}
#xp-bar{height:100%;width:0%;border-radius:4px;transition:width .5s ease,background .3s;}
#xp-text{font-size:calc(11px * var(--fs,1));color:var(--acc-text);font-variant-numeric:tabular-nums;font-weight:700;line-height:1.1;}

/* ── 레벨 진척도 모달 ── */
#lvl-modal{position:fixed;inset:0;z-index:10070;display:none;pointer-events:none;}
#lvl-modal.open{display:block;pointer-events:auto;}
#lvl-modal .lvl-backdrop{position:absolute;inset:0;background:rgba(8,12,24,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
#lvl-modal .lvl-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);animation:arcade-pop-center .42s var(--ease-arcade-step);width:calc(100% - 28px);max-width:420px;max-height:88vh;overflow-y:auto;background:var(--bg2);border:2.5px solid var(--bd2);border-radius:24px;padding:22px 18px;box-shadow:0 24px 56px rgba(8,12,24,.4);-webkit-overflow-scrolling:touch;}
#lvl-modal .lvl-close{position:absolute;top:10px;right:12px;background:transparent;border:none;color:var(--t3);font-size:calc(24px * var(--fs,1));cursor:pointer;padding:0 4px;font-weight:500;line-height:1;}
.lvl-hd{text-align:center;margin-bottom:18px;}
.lvl-hd-ic{font-size:calc(38px * var(--fs,1));margin-bottom:4px;}
.lvl-hd-title{font-family:var(--font-hd);font-size:calc(20px * var(--fs,1));font-weight:700;color:var(--t);margin-bottom:3px;}
.lvl-hd-sub{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:600;}
.lvl-cur{background:linear-gradient(135deg,#FEF3E2,#FDD9A6);border:1.5px solid var(--acc);border-radius:16px;padding:13px 14px;margin-bottom:14px;box-shadow:0 2px 0 var(--btn-shadow-acc);}
.lvl-cur-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;}
.lvl-cur-name{font-size:calc(14px * var(--fs,1));font-weight:800;color:var(--acc-text);}
.lvl-cur-xp{font-size:calc(12px * var(--fs,1));font-weight:800;color:var(--acc-text);font-variant-numeric:tabular-nums;}
.lvl-cur-bar{height:8px;background:rgba(255,255,255,.55);border-radius:4px;overflow:hidden;border:1px solid rgba(226,124,31,.3);margin-bottom:5px;}
.lvl-cur-fill{height:100%;background:linear-gradient(90deg,#F5A652,var(--acc));border-radius:4px;transition:width .5s ease;}
.lvl-cur-next{font-size:calc(11px * var(--fs,1));color:var(--acc-text);font-weight:700;text-align:right;}
.lvl-list{display:flex;flex-direction:column;gap:8px;}
.lvl-item{display:flex;align-items:center;gap:11px;background:var(--bg);border:1.5px solid var(--bd);border-radius:12px;padding:10px 12px;transition:border-color .15s ease;}
.lvl-item.done{border-color:var(--green);background:rgba(21,128,61,.05);}
.lvl-item.current{border-color:var(--acc);background:linear-gradient(135deg,rgba(255,244,214,.5),rgba(255,228,168,.4));box-shadow:0 2px 0 var(--btn-shadow-acc);}
.lvl-item.locked{opacity:.55;}
.lvl-item-num{width:26px;height:26px;border-radius:50%;background:var(--bg3);color:var(--t2);font-size:calc(12px * var(--fs,1));font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1.5px solid var(--bd2);}
.lvl-item.done .lvl-item-num{background:var(--green);color:#fff;border-color:var(--green);}
.lvl-item.current .lvl-item-num{background:var(--acc);color:var(--on-acc);border-color:var(--acc);}
.lvl-item-body{flex:1;min-width:0;}
.lvl-item-name{font-size:calc(13px * var(--fs,1));font-weight:800;color:var(--t);}
.lvl-item-meta{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:600;margin-top:2px;font-variant-numeric:tabular-nums;}
.lvl-item.current .lvl-item-meta{color:var(--acc-text);}
.lvl-item-mark{font-size:calc(14px * var(--fs,1));color:var(--green);font-weight:800;}
.lvl-item.current .lvl-item-mark{color:var(--acc-text);}

/* SCROLL */
.scroll{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  /* 상단 16px: 날씨 띠(#weather-hud)가 이제 흐름 안(topbar 다음)에 있어 자리를 따로 비워둘 필요가 없다
     (예전엔 fixed 띠 밑으로 52px). 좌우 패딩은 화면 폭에 비례, 하단은 bottom-nav + safe-area 만큼 확보 */
  padding:16px clamp(10px,3.5vw,14px) calc(110px + var(--sb));
  min-height:0;
}

/* ── 좁은 화면 보정: 탑바 압축 ──
   ⚠ 예전엔 기준이 360px이었는데, 실측 결과 **375px에서 탑바 내용이 379px**로
     4px 넘쳐 "N일 출석" 배지가 잘렸다. 375px는 아이폰 SE·mini 등 흔한 폭이라
     기준을 400px로 넓힌다. (2026-08-10 사용자 신고 "UI가 잘린다") */
@media (max-width: 400px){
  .topbar{gap:6px;padding-left:8px;padding-right:8px;}
  .logo{font-size:calc(15px * var(--fs,1));}
  .logo-sub{font-size:calc(10px * var(--fs,1));}
  /* 33차: .streak 는 이제 .topbar-prog pill 안의 한 조각 — pill 자체를 좁힌다 */
  .topbar-prog{padding:3px 8px 3px 7px;gap:6px;}
  .streak-n{font-size:calc(13px * var(--fs,1));}
  .streak-l{font-size:calc(10px * var(--fs,1));}
  #auth-btn:not(.is-icon){padding:0 8px;font-size:calc(11px * var(--fs,1));max-width:76px;}
  .xp-track{width:clamp(40px,11vw,56px) !important;}
  #xp-text{font-size:calc(10px * var(--fs,1)) !important;}
  .ni-lb{font-size:calc(10px * var(--fs,1)) !important;}
}
.scroll::-webkit-scrollbar{display:none;}

/* 🍂 계절 배경 스킨 (오라클 상점 아이템) — body 상단 그라디언트 오버레이 */
.mw-season-skin::before{
  content:'';
  position:fixed;
  top:0; left:0; right:0;
  height:180px;
  pointer-events:none;
  z-index:1;
  opacity:.35;
  mix-blend-mode:screen;
}
@media (prefers-color-scheme: dark){
  .mw-season-skin::before{ opacity:.24; }
}
.mw-season-spring::before{ background:linear-gradient(180deg, #FFE4EC 0%, #FFC1CC 40%, transparent 100%); }
.mw-season-summer::before{ background:linear-gradient(180deg, #B9F6FF 0%, #7FE0FF 40%, transparent 100%); }
.mw-season-autumn::before{ background:linear-gradient(180deg, #FFE0B2 0%, #FFAB6B 40%, transparent 100%); }
.mw-season-winter::before{ background:linear-gradient(180deg, #E0F0FF 0%, #B8DFFF 40%, transparent 100%); }

/* ✨ 하이라이트 뱃지 · 프로필 반짝임 (오라클 상점 아이템) */
@keyframes mwHighlightSweep{
  0%   { background-position:-160% 0; }
  100% { background-position:260% 0; }
}
@keyframes mwHighlightGlow{
  0%,100% { box-shadow:0 0 0 0 rgba(242,168,62,.0), 0 0 8px rgba(242,168,62,.35); }
  50%     { box-shadow:0 0 0 3px rgba(242,168,62,.16), 0 0 14px rgba(242,168,62,.6); }
}
.mw-highlight{
  position:relative;
  background:linear-gradient(100deg, rgba(242,168,62,.22) 0%, rgba(255,224,130,.55) 45%, rgba(242,168,62,.22) 90%) !important;
  background-size:260% 100% !important;
  animation: mwHighlightSweep 3.4s linear infinite, mwHighlightGlow 2.2s ease-in-out infinite !important;
  color:#7a5100 !important;
  font-weight:800 !important;
  border-color:rgba(242,168,62,.55) !important;
}
@media (prefers-reduced-motion: reduce){
  .mw-highlight{ animation:none !important; }
}

/* BOTTOM NAV */
.bnav{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:430px;
  padding:6px 2px calc(var(--sb) + 4px);
  background:rgba(255,255,255,.98);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-top:1px solid var(--bd2);
  /* 10개 탭 한 화면에 다 담기 — flex-basis로 균등 분배 */
  display:flex;justify-content:space-between;align-items:flex-end;gap:0;
  /* 넘칠 경우 대비 스크롤 fallback (라벨이 길어질 때 대비) */
  overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  z-index:100;flex-shrink:0;
  box-shadow:0 -4px 16px rgba(15,23,42,.06);
}
.bnav::-webkit-scrollbar{display:none;}
.ni{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  cursor:pointer;padding:4px 2px;border-radius:12px;
  flex:1 1 0;min-width:0;   /* 균등 분배 + 완전 축소 허용 */
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),background .22s ease;
  position:relative;
}
.ni:active{transform:scale(.92);}
.ni-ic{font-size:calc(18px * var(--fs,1));color:var(--nav-idle);transition:color .25s ease,transform .28s cubic-bezier(.34,1.56,.64,1);line-height:1;}
.ni-lb{font-size:calc(11px * var(--fs,1));color:var(--nav-idle);letter-spacing:-.1px;font-weight:600;transition:color .25s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;text-align:center;}
.ni.active{background:rgba(226,124,31,.12);border:1.5px solid var(--acc);box-shadow:0 2px 0 var(--btn-shadow-acc);}
/* 활성 탭 (25차) — 라벨은 액센트가 아니라 거의 검정(--t)으로.
   예전엔 라벨까지 --acc-text라 라이트에서 대비 5.07:1로 비활성(6.71:1)에 밀렸다.
   "색을 칠했는데 안 도드라진다"의 원인. --t로 바꾸면 약 16:1이 돼 확실히 이긴다.
   채도는 아이콘·테두리·알약에만 남긴다 — 면적이 작아야 강한 채도를 써도 눈이 안 아프다.
   (Material 3 내비게이션 바와 같은 구조: 라벨=진한 중성색, 색=알약·아이콘) */
.ni.active .ni-lb{color:var(--t);font-weight:700;}
.ni.active .ni-ic{color:var(--acc-text);}
.ni.active .ni-ic{transform:scale(1.18);}
/* 34차 — 탭을 누른 순간이 가장 자주 보는 피드백이라 아케이드 강도를 따른다 */
@keyframes navPop{0%{transform:scale(.86);}45%{transform:scale(calc(1 + .30 * var(--arc, var(--arcade))));}72%{transform:scale(calc(1 + .10 * var(--arc, var(--arcade))));}100%{transform:scale(1.18);}}
.ni.active .ni-ic{animation:navPop .42s var(--ease-arcade-step);}

/* ── 더보기 바텀 시트 ── */
.more-sheet{position:fixed;inset:0;z-index:9990;display:none;pointer-events:none;}
.more-sheet.open{display:block;pointer-events:auto;}
.more-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;animation:msBg .22s ease forwards;}
.more-panel{position:absolute;left:50%;bottom:0;transform:translateX(-50%) translateY(100%);width:100%;max-width:430px;background:var(--bg2);border-top-left-radius:22px;border-top-right-radius:22px;padding:10px 18px calc(var(--sb) + 24px);box-shadow:0 -12px 40px rgba(15,23,42,.22);animation:msPanel .3s cubic-bezier(.22,.85,.32,1.05) forwards;}
@keyframes msBg{to{opacity:1;}}
@keyframes msPanel{to{transform:translateX(-50%) translateY(0);}}
.more-handle{width:40px;height:4px;border-radius:4px;background:var(--bd2);margin:0 auto 12px;}
.more-title{font-family:var(--font-hd);font-size:calc(16px * var(--fs,1));font-weight:700;color:var(--t);margin-bottom:14px;text-align:center;letter-spacing:-.3px;}
.more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.more-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px 6px;background:var(--bg);border:1.5px solid var(--bd);border-radius:16px;cursor:pointer;font-family:inherit;color:var(--t);transition:transform .12s ease,border-color .15s ease,background .15s ease;}
.more-item:active{transform:scale(.96);background:var(--bg3);border-color:var(--acc);}
.mi-ic{font-size:calc(22px * var(--fs,1));line-height:1;}
.mi-lb{font-size:calc(12px * var(--fs,1));font-weight:700;letter-spacing:-.2px;}

/* ═══════════════════════════════════════════════════════
   적응형 레이아웃 — 기기 폭에 따라 3단계
     ~639px   모바일 : 430px (기존)
     640~1023 태블릿 : 600px
     1024px~  데스크톱: 720px + 배경 연출
   ⚠️ .app / .bnav / .more-panel은 항상 같은 폭이어야 정렬이 맞는다.
   ═══════════════════════════════════════════════════════ */
@media (min-width:640px){
  .app, .bnav, .more-panel{max-width:600px;}
  /* 하단 탭: 폭이 늘면 flex:1이 과하게 벌어지므로 항목 폭을 묶고 가운데 정렬 */
  .bnav{justify-content:center;gap:4px;}
  .ni{flex:0 1 92px;}
  /* 날씨 4-세그먼트도 동일 이유로 폭 제한 */
  #home-weather-hero .hw-spec{max-width:440px;margin-left:auto;margin-right:auto;}
  /* 넓어진 만큼 좌우 여백을 키워 글줄이 늘어지지 않게 */
  .scroll{padding-left:clamp(14px,4vw,28px);padding-right:clamp(14px,4vw,28px);}
}
@media (min-width:640px){
}
@media (min-width:1024px){
  .app, .bnav, .more-panel{max-width:720px;}
  /* 뱃지 그리드는 넓어지면 칸이 과대해지므로 열 수를 늘림 */
  .bdg-grid{grid-template-columns:repeat(6,1fr);}
  .more-grid{grid-template-columns:repeat(4,1fr);}
  /* 양옆 빈 공간에 브랜드 배경 — '깨진 화면'이 아니라 '의도된 앱'으로 보이게 */
  body{
    background:
      radial-gradient(60% 50% at 12% 8%, rgba(226,124,31,.10), transparent 62%),
      radial-gradient(50% 45% at 88% 12%, rgba(242,168,62,.08), transparent 65%),
      var(--bg);
  }
  .app{
    box-shadow:0 0 0 1px var(--bd), 0 24px 60px rgba(15,23,42,.10);
    background:var(--bg);
  }
}

/* ═══════════════════════════════════════════════════════
   가로모드 — 세로 공간이 부족할 때 상하 크롬 압축
   폰 가로(844×390) 기준 topbar+bnav가 화면의 35%를 먹는다.
   높이 기준으로 판정하므로 작은 태블릿 가로에도 자연히 적용된다.
   ═══════════════════════════════════════════════════════ */
@media (orientation:landscape) and (max-height:520px){
  .topbar{padding-top:calc(var(--st) + 2px);padding-bottom:3px;}
  .logo{font-size:calc(15px * var(--fs,1));}
  .logo-sub{display:none;}              /* 부제 생략 */
  .topbar-prog{padding:2px 8px;}

  .bnav{padding:3px 2px calc(var(--sb) + 3px);}
  .ni{padding:3px 2px;gap:0;}
  /* 라벨을 9px로 줄이는 대신 숨기고 아이콘을 키운다 — 가독성 하한선(11px) 유지 */
  .ni-lb{display:none;}
  .ni-ic{font-size:calc(21px * var(--fs,1));}

  .scroll{padding-top:16px;padding-bottom:calc(64px + var(--sb));}
}

/* ── 테마 선택 세그먼트 ── */
.thm-seg{display:flex;gap:6px;background:var(--bg3);padding:4px;border-radius:12px;}
.thm-btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:5px;
  padding:9px 6px;border:none;border-radius:8px;background:transparent;
  color:var(--t2);font-family:inherit;font-size:calc(12px * var(--fs,1));font-weight:700;cursor:pointer;
  transition:background .15s ease,color .15s ease,box-shadow .15s ease;
}
.thm-btn span{font-size:calc(14px * var(--fs,1));line-height:1;}
.thm-btn.active{background:var(--bg2);color:var(--acc-text);box-shadow:var(--shadow-sm);}
.thm-btn:focus-visible{outline:2px solid var(--acc);outline-offset:1px;}

/* ── 집중 모드 (Focus Mode) ── */
.fm-switch{position:relative;width:46px;height:26px;background:var(--bg4);border-radius:16px;flex-shrink:0;cursor:pointer;transition:background .2s ease;border:1.5px solid var(--bd);}
.fm-switch .fm-thumb{position:absolute;top:1.5px;left:1.5px;width:19px;height:19px;background:#fff;border-radius:50%;box-shadow:0 2px 4px rgba(15,23,42,.15);transition:transform .22s cubic-bezier(.34,1.56,.64,1);}
.fm-switch.on{background:var(--acc);border-color:var(--acc);}
.fm-switch.on .fm-thumb{transform:translateX(20px);}
.fm-switch:focus-visible{outline:2px solid var(--acc);outline-offset:2px;}

/* body.focus-mode + 학습/퀴즈 페이지에서만 산만한 UI 억제 */
body.focus-mode[data-page="learn"] #gm-toast,
body.focus-mode[data-page="quiz"] #gm-toast,
body.focus-mode[data-page="learn"] #fx-canvas,
body.focus-mode[data-page="quiz"] #fx-canvas{display:none !important;}
body.focus-mode[data-page="learn"] #home-mascot-widget,
body.focus-mode[data-page="quiz"] #home-mascot-widget{display:none !important;}
/* XP float · 콤보 애니메이션 억제 (전역이지만 학습·퀴즈 컨텍스트에만 유효) */
body.focus-mode[data-page="learn"] [class*="xp-float"],
body.focus-mode[data-page="quiz"] [class*="xp-float"],
body.focus-mode[data-page="learn"] [class*="combo-anim"],
body.focus-mode[data-page="quiz"] [class*="combo-anim"]{display:none !important;}

/* PAGES — Duolingo-style smooth swap */
.page{display:none;}
/* 미리 데운 페이지(app.js warmLearnList): 보이지 않지만 **배치는 된** 상태로 둔다 (2026-09-25).
   display:none 이면 들어갈 때 처음부터 글자 모양을 다 계산해 200ms 넘게 멈춘다(웹폰트·한글).
   화면 밖 절대배치 + visibility:hidden 이라 보이지도, 눌리지도, 스크롤 폭을 늘리지도 않는다. .active 가 붙으면 보통 페이지. */
.page.page-warm:not(.active){display:block;position:absolute;left:-200vw;top:0;width:100%;visibility:hidden;pointer-events:none;contain:layout style;}
/* ↑ (2026-09-26) "높이 0·overflow hidden" 으로 바꿔 봤다가 되돌렸다 — 들어갈 때 높이가 바뀌며 카드 수백 장을 통째로
   다시 재서(실측 480ms 레이아웃 × 3) 더 나빴다. 화면 밖 절대배치는 position 만 바뀌어 첫 진입 150ms 선에서 끝난다. */
.page.active{
  display:block;
  transform-origin:center top;
  will-change:opacity,transform;
}
@keyframes pageEnter{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:translateY(0);}
}
/* ⚠ 전환 애니메이션은 .page-in 이 붙을 때만 돈다 (31차 · 중요).
   페이지를 여는 순간 무거운 렌더가 함께 돈다 — 실측(스테이징)에서 학습 탭은
   218ms·120ms·105ms 짜리 작업이 연달아 메인 스레드를 443ms 잡았다. 애니메이션(440ms)과
   정확히 겹쳐서 "틱틱 끊기는 프레임"이 됐다(사용자 제보).
   그래서 uiPolish.js 가 **렌더가 끝난 다음 프레임에** .page-in 을 붙인다.
   여기(.page.active)에 애니메이션을 도로 걸지 말 것 — 걸면 다시 겹친다.
   ⚠ 거리는 22px 을 넘기지 말 것. 크면 화면이 휙 지나가 산만하다. */
.page.active.page-in{
  animation:pageEnter .42s var(--ease-soft);
  /* ⚠ will-change 가 핵심이다 (31차). 타이밍만으로는 끊김을 못 피한다 — 실측에서
     렌더가 0ms·175ms·494ms 세 번에 나뉘어 돌아, 애니메이션을 언제 시작해도 하나는 겹쳤다.
     transform/opacity 애니메이션을 합성 레이어로 올리면 메인 스레드가 막혀 있어도
     컴포지터가 계속 그려서 부드럽게 유지된다.
     클래스가 0.5초 뒤 제거되므로 레이어도 그때 해제된다 — 상시로 걸지 말 것(메모리 낭비). */
  will-change:transform, opacity;
}
.page.active.page-in.page-from-right{animation:pageSlideR .44s var(--ease-soft);}
.page.active.page-in.page-from-left {animation:pageSlideL .44s var(--ease-soft);}
@keyframes pageSlideR{
  from{opacity:0;transform:translateX(22px);}
  to{opacity:1;transform:translateX(0);}
}
@keyframes pageSlideL{
  from{opacity:0;transform:translateX(-22px);}
  to{opacity:1;transform:translateX(0);}
}
@media (prefers-reduced-motion:reduce){
  .page.active{animation:none;}
}

/* SECTION HEADER */
/* 섹션 헤더 — 브랜드 골드 악센트 바.
   실측 결과 화면에서 브랜드색이 차지하는 비율이 **3.1%**뿐이라 정체성이 안 살았다
   (2026-08-10 사용자 지적). 모든 섹션 앞에 얇은 골드 바를 두어, 가독성을 해치지
   않으면서 브랜드 색을 화면 전체에 규칙적으로 노출한다. */
.sh{margin:16px 0 10px;position:relative;padding-left:11px;}
.sh::before{content:'';position:absolute;left:0;top:2px;bottom:2px;width:3px;border-radius:4px;background:linear-gradient(180deg,var(--acc),var(--acc2,var(--acc)));}
.st{font-family:var(--font-hd);font-size:calc(26px * var(--fs,1));letter-spacing:-.4px;line-height:1.2;font-weight:700;}
.ss{font-size:calc(12px * var(--fs,1));color:var(--t2);margin-top:5px;line-height:1.6;font-weight:400;}

/* ── 모바일 타이포·밀도 (≤430px = 앱 최대 폭) ──
   섹션 제목이 26px로 커서 한 화면에 들어오는 내용이 적고 답답했다
   (2026-08-10 사용자 신고). 제목만 줄이고 본문(11~13px)은 건드리지 않는다 —
   본문을 더 줄이면 가독성·접근성이 나빠진다. */
@media (max-width: 430px){
  .st{font-size:calc(21px * var(--fs,1));letter-spacing:-.3px;}
  .ss{font-size:calc(12px * var(--fs,1));margin-top:3px;line-height:1.5;}
  .sh{margin:12px 0 8px;}
}

/* CARDS — 외곽선·그림자 강화 */
.card{background:var(--bg2);border:1.5px solid var(--bd);border-radius:16px;padding:14px 16px;margin-bottom:10px;box-shadow:var(--shadow-sm);}
.cl{font-size:calc(11px * var(--fs,1));text-transform:uppercase;letter-spacing:.9px;color:var(--acc-text);margin-bottom:5px;font-weight:700;}
.ct{font-size:calc(15px * var(--fs,1));font-weight:700;margin-bottom:3px;}
.cd{font-size:calc(12px * var(--fs,1));color:var(--t2);line-height:1.65;font-weight:400;}

/* METRICS */
.mg{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:10px;}
.metric{background:var(--bg2);border:1.5px solid var(--bd);border-radius:12px;padding:12px 10px;box-shadow:var(--shadow-sm);}
.ml{font-size:calc(11px * var(--fs,1));color:var(--t3);text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px;font-weight:600;}
.mv{font-size:calc(20px * var(--fs,1));font-weight:700;font-variant-numeric:tabular-nums;}
.ms{font-size:calc(11px * var(--fs,1));margin-top:2px;font-weight:600;}
.up{color:var(--up-text);}.dn{color:var(--down-text);}

/* PILLS — 4-tier semantic system + 1 premium marker
   시멘틱 색상 언어:
     • info  (blue)   : 중립 정보, 학습 카테고리, 시장 지표 라벨
     • good  (green)  : 긍정 · 상승 · 완료 · 방어적 시그널
     • warn  (gold)   : 주의 · 브랜드 · 유료 · 정점기 신호  ← 코랄(pc)·오라클(po)·골드(pa) 통합
     • bad   (red)    : 부정 · 하락 · 위험 · 침체 신호  ← 핑크(pk) 통합
     • premium (purple): Pro/AI 등 브랜드 강조용 (시멘틱과 별개, 소량 사용) */
.pill{display:inline-block;padding:3px 10px;border-radius:24px;font-size:calc(11px * var(--fs,1));font-weight:700;letter-spacing:.3px;border:1px solid transparent;}
/* info · 중립 정보 (blue) */
.pb, .pt{background:rgba(37,99,235,.16);color:var(--blue);border-color:rgba(37,99,235,.32);}
/* good · 긍정 (green) */
.pg{background:rgba(21,128,61,.16);color:var(--green);border-color:rgba(21,128,61,.36);}
/* warn · 주의·브랜드 (gold) — pa/po/pc 통합 */
.pa, .po, .pc{background:rgba(242,168,62,.18);color:var(--acc-text);border-color:rgba(226,124,31,.4);}
/* bad · 부정·위험 (red) — pk 통합 */
.pr, .pk{background:rgba(220,38,38,.14);color:var(--red);border-color:rgba(220,38,38,.36);}
/* premium · Pro/AI 강조용 (purple) */
.pp{background:rgba(91,91,246,.16);color:var(--purple);border-color:rgba(91,91,246,.34);}

/* ANIM */
@keyframes fu{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.fa{animation:fu .22s ease;}
/* 34차 — 보상 숫자가 더 크게 솟는다. 세기는 --arcade 를 따른다 */
@keyframes xpFloat{0%{opacity:1;transform:translateY(0) scale(calc(1 - .3 * var(--arc, var(--arcade))))}22%{transform:translateY(-14px) scale(calc(1 + .28 * var(--arc, var(--arcade))))}60%{opacity:1;transform:translateY(-40px) scale(calc(1 + .1 * var(--arc, var(--arcade))))}100%{opacity:0;transform:translateY(-66px) scale(.8)}}
@keyframes comboAnim{0%{opacity:0;transform:translateX(-50%) scale(.5)}30%{opacity:1;transform:translateX(-50%) scale(1.2)}70%{opacity:1;transform:translateX(-50%) scale(1)}100%{opacity:0;transform:translateX(-50%) scale(.8)}}
@keyframes toastOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(10px)}}

/* XP BAR — 추가 미세조정 (중복 정의 제거: 위쪽 .xp-wrap이 단일 소스)
   33차: min-width 46→36 — pill 안으로 들어가 "0 XP"(≈28px)·"1,234 XP"(≈44px) 모두 자연폭이면 된다 */
#xp-text{min-width:36px;text-align:right;}

/* STARS */
.ci-stars{display:flex;gap:2px;margin-top:4px;}
.ci-star{font-size:calc(10px * var(--fs,1));color:var(--t3);line-height:1;transition:color .2s;}
.ci-star.on{color:var(--acc-text);}

/* SW 업데이트 배너 — 자동 새로고침 대신 사용자가 직접 누르게 한다 */
#sw-update-bar{position:fixed;bottom:calc(var(--sb) + 80px);left:50%;transform:translateX(-50%);z-index:9999;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 32px);padding:10px 10px 10px 16px;border-radius:16px;background:var(--bg2);border:0.5px solid var(--bd2);box-shadow:0 6px 20px rgba(15,23,42,.16);animation:arcade-drop-up .46s var(--ease-arcade-step);}
#sw-update-bar .swu-txt{font-size:calc(14px * var(--fs,1));font-weight:600;color:var(--t);white-space:nowrap;}
#sw-update-bar .swu-go{flex-shrink:0;min-height:36px;padding:0 14px;border:0;border-radius:12px;background:var(--acc);color:var(--on-acc);font-size:calc(14px * var(--fs,1));font-weight:700;cursor:pointer;box-shadow:0 2px 0 var(--btn-shadow-acc);}
#sw-update-bar .swu-go:active{transform:translateY(2px);box-shadow:none;}
#sw-update-bar .swu-x{flex-shrink:0;width:36px;height:36px;border:0;border-radius:12px;background:transparent;color:var(--t2);font-size:calc(15px * var(--fs,1));cursor:pointer;}

/* TOAST */
#gm-toast{position:fixed;bottom:calc(var(--sb) + 80px);left:50%;transform:translateX(-50%);background:var(--bg2);border:0.5px solid var(--bd2);border-radius:16px;padding:12px 16px;display:none;align-items:center;gap:10px;z-index:9998;min-width:220px;max-width:300px;box-shadow:0 0 0 0.5px rgba(255,255,255,.06);}
#gm-toast.show{display:flex;animation:arcade-drop-up .46s var(--ease-arcade-step);}  /* 34차 아케이드 */
.gt-emoji{font-size:calc(24px * var(--fs,1));flex-shrink:0;}
.gt-title{font-size:calc(13px * var(--fs,1));font-weight:500;color:var(--t);}
.gt-sub{font-size:calc(11px * var(--fs,1));color:var(--t3);margin-top:1px;}

/* CONFETTI CANVAS */
#fx-canvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9997;}

/* BADGES */
.bdg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px;}
.bdg-item{background:var(--bg2);border:0.5px solid var(--acc);border-radius:12px;padding:10px 6px;text-align:center;transition:transform .15s;}
.bdg-item:active{transform:scale(.96);}
.bdg-item.locked{border-color:var(--bd);opacity:.4;filter:grayscale(1);}
.bdg-e{font-size:calc(22px * var(--fs,1));margin-bottom:4px;}
.bdg-n{font-size:calc(11px * var(--fs,1));color:var(--t2);font-weight:600;line-height:1.3;}

/* HOME ROADMAP */
.rs{display:flex;align-items:center;gap:12px;padding:13px 14px;background:var(--bg2);border:1.5px solid var(--bd);border-radius:16px;margin-bottom:8px;cursor:pointer;transition:transform .12s ease,box-shadow .15s ease,border-color .15s ease;box-shadow:0 2px 0 var(--bd2);}
.rs:active{transform:translateY(2px);box-shadow:0 1px 0 var(--bd2);}
.rn{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:calc(12px * var(--fs,1));font-weight:800;flex-shrink:0;border:2px solid currentColor;}
.rb{flex:1;}
.rt{font-size:calc(14px * var(--fs,1));font-weight:700;}
.rd{font-size:calc(11px * var(--fs,1));color:var(--t2);margin-top:2px;font-weight:500;}

/* LEARN */
.learn-search-wrap{position:relative;margin:8px 0 12px;}
.learn-search-ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:calc(14px * var(--fs,1));opacity:.55;pointer-events:none;}
.learn-search-input{width:100%;box-sizing:border-box;padding:11px 38px 11px 36px;font:600 13.5px/1.4 'Pretendard','Apple SD Gothic Neo',sans-serif;color:var(--t);background:var(--bg3);border:1.5px solid var(--bd);border-radius:12px;outline:none;transition:border-color .15s,box-shadow .15s;}
.learn-search-input::-webkit-search-cancel-button{display:none;}
.learn-search-input:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(226,124,31,.18);background:var(--bg2);}
.learn-search-input::placeholder{color:var(--t3);font-weight:500;}
.learn-search-clear{display:none;position:absolute;right:8px;top:50%;transform:translateY(-50%);width:24px;height:24px;border:none;border-radius:50%;background:rgba(15,23,42,.08);color:var(--t2);font-size:calc(11px * var(--fs,1));align-items:center;justify-content:center;cursor:pointer;padding:0;line-height:1;}
.learn-search-clear:hover{background:rgba(15,23,42,.14);}
.cat-bar{display:flex;gap:6px;overflow-x:auto;padding-bottom:10px;margin:0 -14px;padding-left:14px;padding-right:14px;-webkit-overflow-scrolling:touch;}
.cat-bar::-webkit-scrollbar{display:none;}
.cb{flex-shrink:0;padding:7px 14px;border-radius:24px;border:1.5px solid var(--bd2);background:var(--bg2);color:var(--t2);font-size:calc(12px * var(--fs,1));font-weight:700;cursor:pointer;white-space:nowrap;font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;transition:transform .12s ease,box-shadow .12s ease;}
.cb.active{background:var(--t);color:var(--bg);border-color:var(--t);font-weight:800;box-shadow:0 2px 0 rgba(0,0,0,.3);}
.cb:active{transform:translateY(1px);}
.lv-bar{display:flex;gap:6px;margin:8px 0 12px;overflow-x:auto;padding-bottom:3px;}
/* ── 학습 필터 카드 (2026-09-25) ──
   분야 칩 한 줄과 난이도 칩 한 줄이 라벨 없이 따로 떠 있어 "Lv.몇이 허공에 떠 있다"는 제보.
   두 줄을 한 카드에 넣고 왼쪽에 '분야'·'난이도' 라벨을 달아 무엇을 고르는 줄인지 보이게 한다. */
.learn-filters{background:var(--bg2);border:1.5px solid var(--bd);border-radius:16px;padding:10px 14px 4px;margin:12px 0 14px;}
.lf-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;min-width:0;}
.lf-lb{flex:none;width:40px;font-size:calc(11px * var(--fs,1));font-weight:700;color:var(--t3);letter-spacing:.4px;}
.learn-filters .cat-bar,.learn-filters .lv-bar{flex:1;min-width:0;margin:0;padding:0 0 2px;overflow-x:auto;
  /* 오른쪽 끝을 살짝 흐려 "더 있다"를 말한다 (카드 안이라 화면 밖으로 걸칠 수 없어서) */
  -webkit-mask-image:linear-gradient(90deg,#000 90%,transparent);mask-image:linear-gradient(90deg,#000 90%,transparent);}
.lv-bar::-webkit-scrollbar{display:none;}
.lb{flex-shrink:0;padding:5px 12px;border-radius:8px;border:1.5px solid var(--bd);background:var(--bg2);color:var(--t3);font-size:calc(11px * var(--fs,1));font-weight:700;cursor:pointer;font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;transition:transform .12s ease;}
/* 선택 상태는 .cb.active와 동일한 잉크 칩 — 골드는 행동·보상 전용 */
.lb.active{background:var(--t);color:var(--bg);border-color:var(--t);font-weight:800;box-shadow:0 2px 0 rgba(0,0,0,.3);}

/* ── 대비 전수 스윕 보정 (2026-08-04) ──
   라이트에서 골드(#E27C1F) "텍스트"는 흰 배경 대비 2.3~2.9:1로 미달.
   배경·버튼용 골드(--acc)와 분리된 텍스트 전용 토큰 --acc-text 도입. */
:root{--acc-text:#8F5B0A;}                      /* 라이트: 진한 앰버 ≥4.5:1 */
:root[data-theme="dark"]{--acc-text:var(--acc);} /* 다크: 밝은 골드 그대로 */
/* 같은 이유로 텍스트용 빨강 — 라이트에서 --red(#DC2626)는 4.39:1로 근소 미달 */
:root{--red-text:#B91C1C;--on-purple:#FFFFFF;}
:root[data-theme="dark"]{--red-text:var(--red);--on-purple:#1E1B4B;}

/* ── 상승/하락 의미색 (33차 · 한국 관습 통일) ──
   한국·중국·일본은 상승=빨강 / 하락=파랑, 미국·유럽은 상승=초록 / 하락=빨강.
   앱 안에서 화면마다 달랐다(매크로웨더·MTSI는 빨강 상승, 포트폴리오·오라클·지표 칩은
   초록 상승) → 한 토큰으로 묶고 언어에 따라 한 번만 뒤집는다.
   ⚠ 가격·수익·지표의 "오르고 내림"에만 쓴다. 성공/실패·위험/안전 같은 상태색은
      여전히 --green/--red. 매수/매도 버튼은 한국 증권앱 관습(매수 빨강·매도 파랑)을 따라
      --up/--down 을 쓴다. 새 차트·지표 카드를 만들 때 이 토큰부터 찾을 것. */
:root{
  --up:#DC2626;            --down:#1E5FBB;
  --up-text:#B91C1C;       --down-text:#1E5FBB;     /* 라이트 배경 위 글자(≥4.5:1) */
  --up-soft:rgba(220,38,38,.10);  --down-soft:rgba(30,95,187,.10);
  --btn-shadow-up:#A41C1C; --btn-shadow-down:#164A8F;
}
:root[data-theme="dark"]{
  --up:#F87171;            --down:#5B9BF5;
  --up-text:var(--up);     --down-text:var(--down);
  --up-soft:rgba(248,113,113,.14); --down-soft:rgba(91,155,245,.14);
  --btn-shadow-up:#B91C1C; --btn-shadow-down:#1E4FA0;
}
/* 영어 UI — 서양 관습(상승 초록 / 하락 빨강). i18n.js가 <html lang>을 세팅한다 */
:root[lang="en"]{
  --up:var(--green);       --down:var(--red);
  --up-text:#15803D;       --down-text:#B91C1C;
  --up-soft:rgba(21,128,61,.12);   --down-soft:rgba(220,38,38,.10);
  --btn-shadow-up:#0F5E2D; --btn-shadow-down:#A41C1C;
}
:root[lang="en"][data-theme="dark"]{
  --up-text:var(--green);  --down-text:var(--red);
  --up-soft:rgba(74,222,128,.14);  --down-soft:rgba(248,113,113,.14);
  --btn-shadow-up:#166534; --btn-shadow-down:#B91C1C;
}
/* :root 접두 — 스킨 JS가 나중에 주입하는 동일 특이도 규칙을 이기기 위함 */
:root .cl,:root .dc-label,:root .pg-n,:root .tm-locked-tag,:root .tm-card-sub,
:root .oracle-ind-mybet,:root .oracle-ind-challenge,:root .guild-tag,:root .oracle-ws-tag,
:root .oracle-cmp-btn,:root .oracle-stat-n,:root .pt-rec-tgt,:root .pt-rec-diff,
:root .oracle-ch-cta,:root .oracle-inf-cta{color:var(--acc-text);}
:root .pill.pa,:root .pill.po,:root .pill.pc{color:var(--acc-text);}
:root .pill.pr,:root .pill.pk{color:#B91C1C;}
:root[data-theme="dark"] .pill.pr,:root[data-theme="dark"] .pill.pk{color:var(--red);}
/* 매크로 라이브 — 다크에서 섹터 색 텍스트가 3.78:1 → 흰색과 혼합해 상향 */
:root[data-theme="dark"] .ml-team{color:color-mix(in srgb,var(--sector-point,var(--acc)) 55%,#fff);}
/* (33차) .ml-cta 는 이제 팀색이 아니라 주황 — 다크에선 --acc-text(=밝은 골드)가 그대로 4.5:1 이상이라 별도 보정 불필요 */
:root[data-theme="dark"] .ml-cta{color:var(--acc-text);border-color:var(--acc);}
/* 커뮤니티 마이크로 태그 — 9px 상향 + 테마별 명시 색 (≥4.5:1) */
:root #page-community .cm-card-tag{font-size:calc(10px * var(--fs,1));}
:root #page-community .cm-hero-stat-lb{color:#EDE9FE;}
:root[data-theme="dark"] #page-community .cm-card-forecast .cm-card-tag,
:root[data-theme="dark"] #page-community .cm-card-forecast .cm-card-cta{color:#38BDF8;}
:root[data-theme="dark"] #page-community .cm-card-subscribed .cm-card-tag,
:root[data-theme="dark"] #page-community .cm-card-subscribed .cm-card-cta{color:#A78BFA;}
:root[data-theme="dark"] #page-community .cm-card-workshop .cm-card-tag,
:root[data-theme="dark"] #page-community .cm-card-workshop .cm-card-cta{color:#FBBF24;}
:root[data-theme="dark"] #page-community .cm-card-guild .cm-card-tag,
:root[data-theme="dark"] #page-community .cm-card-guild .cm-card-cta{color:#4ADE80;}
:root[data-theme="dark"] #page-community .cm-card-market .cm-card-tag,
:root[data-theme="dark"] #page-community .cm-card-market .cm-card-cta{color:#F472B6;}
.lb:active{transform:translateY(1px);}

/* PROGRESS */
.pg-row{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:13px;}
.pg-c{background:var(--bg2);border:0.5px solid var(--bd);border-radius:12px;padding:11px;text-align:center;}
.pg-n{font-size:calc(20px * var(--fs,1));font-weight:700;color:var(--acc-text);}
/* 모바일 밀도 — 정의보다 뒤에 두어야 적용된다 (같은 특정도면 나중 규칙이 이김) */
@media (max-width: 430px){ .pg-n{font-size:calc(18px * var(--fs,1));} .pg-row{margin-bottom:10px;} }
.pg-l{font-size:calc(11px * var(--fs,1));color:var(--t3);margin-top:2px;font-weight:600;}
/* 33차: 완료 칸의 달성률(작게 · "12 · 4%") / 연속 칸의 단위("일") */
.pg-sub{font-size:calc(11px * var(--fs,1));font-weight:700;color:var(--t3);margin-left:5px;font-variant-numeric:tabular-nums;}
.pg-sub::before{content:"·";margin-right:5px;color:var(--bd2);}
.pg-unit{font-size:calc(12px * var(--fs,1));font-weight:700;color:var(--t3);margin-left:2px;}
#pg-streak-shield{margin-left:4px;}

/* CONCEPT ITEMS */
/* ⚠ content-visibility — 학습 목록은 개념 카드가 수백 장이라, 화면을 켜고 끌 때
   보이지도 않는 카드까지 전부 레이아웃·페인트를 계산했다. 실측(31차): 학습 탭에
   재진입할 때 goPage 동기 구간이 120ms(7프레임)까지 올라갔다.
   auto 를 주면 뷰포트 밖 카드는 렌더를 건너뛴다. contain-intrinsic-size 로 예상
   높이를 알려 줘야 스크롤바가 요동치지 않는다 — 값을 지우지 말 것.
   ⚠ **실제 카드 높이와 같아야 한다.** 처음에 62px 로 어림잡았더니 카드마다 10px 씩
     어긋나 목록 전체가 밀렸다(학습 탭 진입 시 이동량 0.0688). 실측 72px 로 맞췄다.
     카드 높이를 바꾸면 이 값도 함께 고칠 것. */
.ci{background:var(--bg2);border:1.5px solid var(--bd);border-radius:16px;margin-bottom:8px;overflow:hidden;box-shadow:var(--shadow-sm);
  /* (2026-09-26) 한 번 뺐다가 다시 넣었다. 빼면 카드를 붙일 때마다 목록 전체를 다시 재서(300장 → 450ms) 채우는
     동안 스크롤이 걸렸다. 대신 "늦게 나타남·튐"은 다른 방법으로 막는다: 카드를 붙이는 순간 .ci-fresh 로 한 번 그려
     상태를 남긴 뒤(app.js appendNext) auto 로 돌린다 → 스크롤로 다가올 때는 이미 잰 값을 그대로 쓴다. 높이는 auto 가
     마지막 실제 크기를 기억하므로 튀지 않는다(88px 은 처음 한 번만 쓰는 예상값 · 실측 카드 높이). */
  content-visibility:auto;contain-intrinsic-size:auto 88px;}
.ci.ci-fresh{content-visibility:visible;}
/* 펼친 카드는 실제 높이가 크게 달라지므로 건너뛰기에서 제외한다 */
.ci.open{content-visibility:visible;}
/* 미리 데우기 상자(app.js warmLearnList) 안에서는 내용까지 배치해야 글꼴·shaping 캐시가 찬다 */
#learn-warm .ci{content-visibility:visible !important;contain-intrinsic-size:auto;}
/* (2026-09-26 되돌림) 홈 아래쪽 블록에 content-visibility:auto 를 줬다가 뺐다 — 탭 왕복 뒤 폰에서 스크롤하면
   블록이 늦게 나타나고 자리가 튀었다(사용자 제보). 홈 블록은 몇 개 안 되니 전부 그려 두는 편이 낫다. */
.ci.open{border-color:var(--acc);box-shadow:0 0 0 2px rgba(226,124,31,.10),var(--shadow-md);}
.ci-h{display:flex;align-items:center;gap:10px;padding:13px 14px;cursor:pointer;}
.ci-h:active{background:var(--bg3);}
.ci-ico{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:calc(17px * var(--fs,1));flex-shrink:0;background:var(--bg3);}
.ci-b{flex:1;}
.ci-t{font-size:calc(13px * var(--fs,1));font-weight:500;margin-bottom:1px;}
.ci-s{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:500;}
.ci-r{display:flex;flex-direction:column;align-items:flex-end;gap:4px;}
.ci-arr{color:var(--t3);font-size:calc(13px * var(--fs,1));transition:transform .2s;}
.ci.open .ci-arr{transform:rotate(90deg);}
.ci-done-ic{width:16px;height:16px;border-radius:50%;background:var(--green);display:none;align-items:center;justify-content:center;font-size:calc(11px * var(--fs,1));color:#fff;}
.ci.done .ci-done-ic{display:flex;}
.ci-detail{display:none;padding:0 14px 14px;}
.ci.open .ci-detail{display:block;animation:fu .2s ease;}
.sec-lbl{font-size:calc(10px * var(--fs,1));text-transform:uppercase;letter-spacing:.8px;color:var(--t3);margin:10px 0 4px;font-weight:500;}
.sec-txt{font-size:calc(12px * var(--fs,1));color:var(--t2);line-height:1.7;font-weight:500;}
.case-box{background:var(--bg3);border-left:2px solid var(--acc);border-radius:0 8px 8px 0;padding:9px 11px;font-size:calc(11px * var(--fs,1));color:var(--t2);line-height:1.65;font-style:italic;margin:8px 0;}
.tip-box{background:rgba(76,175,125,.08);border:0.5px solid rgba(76,175,125,.2);border-radius:8px;padding:9px 11px;font-size:calc(11px * var(--fs,1));color:var(--green);line-height:1.65;}
.weather-box{background:linear-gradient(135deg,rgba(147,197,253,.14),rgba(191,219,254,.22));border:1px solid rgba(96,165,250,.32);border-radius:12px;padding:12px 14px;font-size:calc(13px * var(--fs,1));color:var(--t2);line-height:1.72;font-weight:500;margin:4px 0 6px;box-shadow:0 1px 3px rgba(96,165,250,.08);}

/* ── 개념 학습 팝업 모달 ── */
#concept-modal{position:fixed;inset:0;z-index:9995;background:rgba(15,23,42,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:16px;opacity:0;transition:opacity .18s ease;}
#concept-modal.open{display:flex;opacity:1;}
#concept-modal .cm-panel{position:relative;width:100%;max-width:520px;max-height:88vh;background:var(--bg2);border-radius:24px;box-shadow:0 24px 60px rgba(15,23,42,.28),0 8px 20px rgba(15,23,42,.12);overflow:hidden;display:flex;flex-direction:column;animation:arcade-pop .42s var(--ease-arcade-step);   /* 34차 아케이드 (인라인 transform·cmIn 대체 — 키프레임이 0%부터 잡는다) */}
#concept-modal .cm-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border:none;background:rgba(15,23,42,.06);color:var(--t2);border-radius:50%;font-size:calc(15px * var(--fs,1));cursor:pointer;z-index:2;transition:background .15s;display:flex;align-items:center;justify-content:center;padding:0;}
#concept-modal .cm-close:hover{background:rgba(15,23,42,.12);}
/* 헤더 — 카테고리·타이틀 */
#concept-modal .cm-header{padding:22px 24px 18px;background:linear-gradient(135deg,rgba(226,124,31,.09),rgba(226,124,31,.02) 70%,var(--bg2));border-bottom:1px solid rgba(226,124,31,.14);}
#concept-modal .cm-cat{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
#concept-modal .cm-cat-ic{font-size:calc(18px * var(--fs,1));}
#concept-modal .cm-cat-nm{font-size:calc(11px * var(--fs,1));font-weight:700;color:var(--acc-text);letter-spacing:1.3px;text-transform:uppercase;}
#concept-modal .cm-meta{display:flex;align-items:center;gap:9px;margin-bottom:10px;}
#concept-modal .cm-stars{display:flex;gap:2px;}
#concept-modal .cm-title{font-family:var(--font-hd-modal);font-size:calc(22px * var(--fs,1));font-weight:700;color:var(--t);margin:0 40px 6px 0;line-height:1.28;letter-spacing:-.4px;}
#concept-modal .cm-sub{font-size:calc(13px * var(--fs,1));color:var(--t2);margin:0;font-weight:500;line-height:1.5;}
/* 본문 스크롤 */
/* ⚠ .cm-slide는 app.js가 만드는 애니메이션 래퍼인데 **CSS 정의가 없었다.**
   .cm-panel(flex column) → .cm-slide(일반 블록) → .cm-body(flex:1;overflow-y:auto)
   구조라 체인이 끊겨 .cm-body의 flex:1이 무효가 되고, 높이 제약이 없어
   overflow-y:auto도 발동하지 않았다. 결과: 긴 개념은 내용이 잘리고 스크롤 불가.
   (2026-08-10 "학습할 때 스크롤이 안 되고 UI가 잘린다" 신고의 원인)
   min-height:0이 없으면 flex 자식이 내용 크기 밑으로 못 줄어 스크롤이 안 생긴다. */
#concept-modal .cm-slide{display:flex;flex-direction:column;flex:1;min-height:0;}
#concept-modal .cm-body{padding:6px 24px 8px;overflow-y:auto;flex:1;}
#concept-modal .cm-body::-webkit-scrollbar{width:6px;}
#concept-modal .cm-body::-webkit-scrollbar-thumb{background:rgba(15,23,42,.15);border-radius:4px;}
/* PRIMARY — 정의·시사점 (주) */
#concept-modal .cm-primary{margin:20px 0 8px;}
#concept-modal .cm-sec-lbl-main{font-family:var(--font-hd-modal);font-size:calc(15px * var(--fs,1));font-weight:700;color:var(--t);letter-spacing:-.2px;margin-bottom:10px;text-transform:none;}
#concept-modal .cm-sec-lbl-tip{color:var(--acc-text);}
#concept-modal .cm-def{font-size:calc(15px * var(--fs,1));color:var(--t);line-height:1.78;font-weight:500;letter-spacing:-.1px;}
#concept-modal .cm-primary-tip{margin-top:22px;padding-top:20px;border-top:1px dashed rgba(226,124,31,.28);}
#concept-modal .cm-tip{background:linear-gradient(135deg,rgba(226,124,31,.09),rgba(226,124,31,.04));border:1.5px solid rgba(226,124,31,.28);border-radius:16px;padding:14px 16px;font-size:calc(14px * var(--fs,1));color:var(--t2);font-weight:600;line-height:1.72;box-shadow:0 2px 6px rgba(226,124,31,.1);}
/* ASIDE — 날씨·사례 (보조) */
#concept-modal .cm-aside{margin:12px 0;padding:11px 13px 12px;border-radius:12px;border:1px solid var(--bd);background:var(--bg3);position:relative;}
#concept-modal .cm-aside-lbl{font-size:calc(11px * var(--fs,1));font-weight:700;color:var(--t3);letter-spacing:.5px;text-transform:uppercase;margin-bottom:6px;opacity:.85;}
#concept-modal .cm-aside-txt{font-size:calc(13px * var(--fs,1));color:var(--t2);line-height:1.68;font-weight:500;}
#concept-modal .cm-aside-weather{background:linear-gradient(135deg,rgba(147,197,253,.12),rgba(191,219,254,.16));border-color:rgba(96,165,250,.24);}
#concept-modal .cm-aside-weather .cm-aside-lbl{color:var(--blue);}
#concept-modal .cm-aside-weather .cm-aside-txt{color:var(--t2);}
#concept-modal .cm-aside-case{background:rgba(15,23,42,.03);border-color:rgba(15,23,42,.08);}
#concept-modal .cm-aside-case .cm-aside-lbl{color:var(--t3);}
/* 푸터 — 완료 버튼 */
#concept-modal .cm-footer{padding:14px 24px 20px;background:var(--bg2);border-top:1px solid var(--bd);}
#concept-modal .cm-nav-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;}
#concept-modal .cm-nav-btn{flex:0 0 auto;padding:12px 18px;border-radius:12px;border:1px solid var(--bd2);background:var(--bg2);color:var(--t);font-size:calc(14px * var(--fs,1));font-weight:700;cursor:pointer;font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;transition:background .15s,border-color .15s,transform .1s,opacity .15s;letter-spacing:-.1px;min-width:96px;min-height:44px;touch-action:manipulation;}
#concept-modal .cm-nav-btn:hover:not(:disabled){background:var(--bg3);border-color:var(--acc);color:var(--acc-text);}
#concept-modal .cm-nav-btn:active:not(:disabled){transform:translateY(1px);}
#concept-modal .cm-nav-btn:disabled{opacity:.35;cursor:not-allowed;background:var(--bg3);color:var(--t3);}
#concept-modal .cm-nav-pos{font-family:'DM Mono','JetBrains Mono',monospace;font-size:calc(12px * var(--fs,1));color:var(--t3);font-weight:700;letter-spacing:.2px;}
#concept-modal .cm-done-btn{width:100%;padding:14px;border-radius:16px;border:none;background:var(--acc);color:var(--on-acc);font-size:calc(15px * var(--fs,1));font-weight:700;cursor:pointer;font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;box-shadow:0 4px 0 #8F4507,0 6px 14px rgba(226,124,31,.25);transition:transform .1s,box-shadow .1s;letter-spacing:-.1px;}
#concept-modal .cm-done-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #8F4507;}
#concept-modal .cm-done-btn.is-done{background:var(--green);box-shadow:0 4px 0 #0F5E2D,0 6px 14px rgba(21,128,61,.25);}
#concept-modal .cm-done-btn.is-done:active{box-shadow:0 1px 0 #0F5E2D;}
@media (max-width:420px){
  #concept-modal{padding:0;align-items:stretch;}
  #concept-modal .cm-panel{max-width:100%;max-height:100vh;max-height:100dvh;border-radius:0;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);}
  #concept-modal .cm-header{padding:16px 18px 14px;}
  #concept-modal .cm-title{font-size:calc(20px * var(--fs,1));margin-right:44px;}
  #concept-modal .cm-body{padding:6px 18px 8px;}
  #concept-modal .cm-def{font-size:calc(14px * var(--fs,1));line-height:1.7;}
  #concept-modal .cm-nav-btn{padding:14px 16px;min-width:80px;font-size:calc(15px * var(--fs,1));}
  #concept-modal .cm-close{top:calc(env(safe-area-inset-top) + 10px);}
}
.done-btn{margin-top:9px;width:100%;padding:9px;border-radius:8px;border:0.5px solid var(--bd2);background:transparent;color:var(--t2);font-size:calc(12px * var(--fs,1));cursor:pointer;font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;transition:all .15s;}
.ci.done .done-btn{background:rgba(76,175,125,.1);border-color:rgba(76,175,125,.3);color:var(--green);}
.empty{text-align:center;padding:40px 0;color:var(--t3);font-size:calc(13px * var(--fs,1));font-weight:500;}

/* CYCLE */
.cy-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:10px;}
.cy-ph{border-radius:12px;padding:14px;cursor:pointer;transition:all .15s;border:0.5px solid transparent;}
.cy-ph:active{transform:scale(.97);}
.cy-title{font-size:calc(13px * var(--fs,1));font-weight:500;margin-bottom:5px;}
.cy-secs{font-size:calc(10px * var(--fs,1));color:var(--t2);line-height:1.5;font-weight:500;}
.cy-detail{display:none;background:var(--bg2);border:0.5px solid var(--bd);border-radius:16px;padding:15px;margin-bottom:10px;}
.cy-detail.show{display:block;animation:fu .25s ease;}

/* SECTORS */
.sec-it{background:var(--bg2);border:1.5px solid var(--bd);border-radius:16px;padding:13px 14px;cursor:pointer;transition:transform .12s ease,box-shadow .15s ease,border-color .15s ease;display:flex;align-items:center;gap:11px;margin-bottom:8px;box-shadow:0 2px 0 var(--bd2);}
.sec-it:active{transform:translateY(2px);box-shadow:0 1px 0 var(--bd2);}
.sec-it.sel{border-color:var(--acc);background:rgba(226,124,31,.07);box-shadow:0 3px 0 var(--btn-shadow-acc),0 4px 12px rgba(226,124,31,.18);}
.si-ico{font-size:calc(20px * var(--fs,1));width:34px;text-align:center;flex-shrink:0;}
.si-b{flex:1;}
.si-n{font-size:calc(13px * var(--fs,1));font-weight:500;}
.si-t{font-size:calc(10px * var(--fs,1));color:var(--t3);margin-top:1px;font-weight:500;}
.anl-btn{width:100%;background:transparent;border:0.5px solid var(--bd2);border-radius:12px;padding:12px;font-size:calc(13px * var(--fs,1));color:var(--t);cursor:pointer;margin-top:8px;font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;transition:all .15s;display:none;}
.anl-btn.show{display:block;}
.anl-btn:active{background:var(--bg3);}

/* AI BOX */
.ai-box{background:var(--bg3);border:0.5px solid var(--bd2);border-radius:12px;padding:14px;margin-top:9px;font-size:calc(12px * var(--fs,1));color:var(--t2);line-height:1.7;display:none;font-weight:500;}
.ai-box.show{display:block;animation:fu .25s ease;}
.ldot::after{content:'';animation:dots 1s steps(4,end) infinite;}
@keyframes dots{0%,20%{content:'.'}40%{content:'..'}60%{content:'...'}80%,100%{content:''}}

/* QUIZ */
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:13px;}
.mc{background:var(--bg2);border:2px solid var(--bd);border-radius:16px;padding:16px 12px;cursor:pointer;transition:transform .12s ease,box-shadow .15s ease,border-color .15s ease;text-align:center;box-shadow:0 3px 0 var(--bd2);}
.mc:active{transform:translateY(2px);box-shadow:0 1px 0 var(--bd2);}
.mc.sel{border-color:var(--acc);background:rgba(226,124,31,.08);box-shadow:0 3px 0 var(--btn-shadow-acc);}
.mc-n{font-family:var(--font-hd);font-size:calc(36px * var(--fs,1));color:var(--acc-text);line-height:1;}
.mc-l{font-size:calc(11px * var(--fs,1));color:var(--t2);margin-top:5px;font-weight:500;}
.mc-d{font-size:calc(10px * var(--fs,1));color:var(--t3);margin-top:3px;line-height:1.4;}
.start-btn{
  width:100%;background:var(--acc);color:var(--on-acc);border:none;border-radius:16px;
  padding:14px;font-size:calc(15px * var(--fs,1));font-weight:800;letter-spacing:.2px;cursor:pointer;
  font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;
  box-shadow:0 4px 0 var(--btn-shadow-acc),0 6px 14px rgba(226,124,31,.25);
  transition:transform .12s ease,box-shadow .12s ease;
  text-transform:uppercase;
}
.start-btn:disabled{background:var(--bg4);color:var(--t2);cursor:default;box-shadow:0 2px 0 rgba(15,23,42,.08);}
.start-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--btn-shadow-acc),0 2px 6px rgba(226,124,31,.18);}
.qpbar{height:3px;background:var(--bg3);border-radius:4px;margin-bottom:14px;}
.qpf{height:100%;background:var(--acc);border-radius:4px;transition:width .4s ease;}
.qmeta{display:flex;justify-content:space-between;margin-bottom:12px;}
.qcnt{font-size:calc(11px * var(--fs,1));color:var(--t3);}
.qsl{font-size:calc(11px * var(--fs,1));color:var(--acc-text);font-weight:500;}
.qqw{background:var(--bg2);border:0.5px solid var(--bd);border-radius:16px;padding:16px;margin-bottom:9px;}
.qqt{font-size:calc(14px * var(--fs,1));color:var(--t);line-height:1.6;}
.qcase{background:var(--bg3);border-left:2px solid var(--acc);border-radius:0 7px 7px 0;padding:9px 11px;margin:9px 0;font-size:calc(11px * var(--fs,1));color:var(--t2);line-height:1.6;font-style:italic;}
.qopts{display:flex;flex-direction:column;gap:7px;}
.qopt{background:var(--bg2);border:2px solid var(--bd);border-radius:12px;padding:13px 14px;cursor:pointer;font-size:calc(14px * var(--fs,1));color:var(--t);text-align:left;font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;font-weight:600;transition:transform .12s ease,box-shadow .12s ease,border-color .15s ease,background .15s ease;box-shadow:0 3px 0 var(--bd2);}
.qopt:active{transform:translateY(2px);box-shadow:0 1px 0 var(--bd2);}
.qopt.correct{background:rgba(21,128,61,.10);border-color:var(--green);color:var(--green);box-shadow:0 3px 0 var(--btn-shadow-green);font-weight:800;}
.qopt.wrong{background:rgba(220,38,38,.08);border-color:var(--red);color:var(--red);box-shadow:0 3px 0 var(--btn-shadow-red);font-weight:800;}
.qopt:disabled{cursor:default;}
.qexp{background:var(--bg3);border-radius:12px;padding:12px;margin-top:9px;font-size:calc(11px * var(--fs,1));color:var(--t2);line-height:1.7;display:none;font-weight:500;}
.qexp.show{display:block;animation:fu .22s ease;}
.qexp strong{color:var(--t);font-weight:500;}
.qnext{width:100%;background:transparent;border:0.5px solid var(--bd2);border-radius:12px;padding:11px;font-size:calc(13px * var(--fs,1));color:var(--t);cursor:pointer;margin-top:7px;font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;transition:all .15s;display:none;}
.qnext.show{display:block;}
.qnext:active{background:var(--bg3);}
.res-box{text-align:center;padding:26px 0 8px;display:none;}
.res-box.show{display:block;animation:fu .35s ease;}
.res-sc{font-family:var(--font-hd);font-size:calc(56px * var(--fs,1));color:var(--acc-text);line-height:1;}
.res-tt{font-size:calc(12px * var(--fs,1));color:var(--t3);margin-top:3px;}
.res-msg{font-size:calc(15px * var(--fs,1));color:var(--t);margin:13px 0 5px;}
.res-dt{font-size:calc(12px * var(--fs,1));color:var(--t2);line-height:1.6;font-weight:500;margin-bottom:20px;}
/* 면책 (26차) — 눈에 띄되 결과를 가리지 않게. 대비는 --t3(본문 보조색)로 AA 충족 */
.res-disc{margin-top:18px;padding-top:14px;border-top:1px dashed var(--bd);font-size:calc(12px * var(--fs,1));line-height:1.6;color:var(--t3);}
.res-acts{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.rbtn{padding:13px;border-radius:12px;border:1.5px solid var(--bd2);font-size:calc(13px * var(--fs,1));font-weight:700;cursor:pointer;font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;transition:transform .12s ease,box-shadow .12s ease;}
.rbtn-p{background:var(--acc);color:var(--on-acc);border:none;font-weight:800;box-shadow:0 4px 0 var(--btn-shadow-acc),0 6px 12px rgba(226,124,31,.22);}
.rbtn-s{background:var(--bg2);color:var(--t);box-shadow:0 3px 0 var(--bd2);}
.rbtn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--btn-shadow-acc);}
.rbtn-s:active{box-shadow:0 1px 0 var(--bd2);}

/* AI PAGE */
.qa-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:12px;}
.qa-btn{background:var(--bg2);border:0.5px solid var(--bd);border-radius:12px;padding:13px;cursor:pointer;font-size:calc(11px * var(--fs,1));color:var(--t2);line-height:1.5;text-align:left;font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;font-weight:500;transition:all .15s;}
.qa-btn strong{display:block;font-size:calc(12px * var(--fs,1));color:var(--t);font-weight:500;margin-bottom:2px;}
.qa-btn:active{transform:scale(.97);}
.iw{background:var(--bg2);border:0.5px solid var(--bd);border-radius:16px;padding:13px;margin-bottom:9px;}
.il{font-size:calc(10px * var(--fs,1));color:var(--t3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;}
textarea,input[type=text],input[type=password]{width:100%;background:transparent;border:none;color:var(--t);font-size:calc(13px * var(--fs,1));font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;outline:none;line-height:1.6;font-weight:500;}
textarea::placeholder,input::placeholder{color:var(--t3);}
.send-btn{
  width:100%;background:var(--acc);color:var(--on-acc);border:none;border-radius:12px;
  padding:12px;font-size:calc(14px * var(--fs,1));font-weight:800;letter-spacing:.2px;cursor:pointer;
  margin-top:7px;font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;
  box-shadow:0 4px 0 var(--btn-shadow-acc),0 6px 12px rgba(226,124,31,.22);
  transition:transform .12s ease,box-shadow .12s ease;
}
.send-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--btn-shadow-acc);}
.api-notice{background:rgba(242,168,62,.07);border:0.5px solid rgba(242,168,62,.2);border-radius:12px;padding:11px 13px;font-size:calc(11px * var(--fs,1));color:var(--acc2);line-height:1.6;margin-bottom:9px;}

/* DAILY CHALLENGE — 시선강탈 */
.dc-wrap{
  /* ⚠ min-height — 로딩 중('오늘의 챌린지 로딩 중...')엔 한 줄이라 카드가 납작한데,
     challenge.js 가 내용을 채우면 72px 로 커지면서 아래 전체가 밀렸다.
     실측(30차): 이게 진입 직후 첫 흔들림이었다. 미리 자리를 잡아 밀림을 없앤다. */
  min-height:72px;
  /* 콘텐츠 카드 — 골드는 행동·보상 전용이므로 일반 카드 톤으로 (상단 라인만 남김) */
  background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 6%,var(--bg2)) 0%,var(--bg2) 60%);
  border:1.5px solid var(--bd);border-radius:16px;padding:16px;margin-bottom:14px;
  position:relative;overflow:hidden;
  box-shadow:0 1px 3px rgba(15,23,42,.08);
}
.dc-wrap::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--acc);}
.dc-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.dc-label{font-size:calc(11px * var(--fs,1));text-transform:uppercase;letter-spacing:.8px;color:var(--acc-text);font-weight:800;}
.dc-live{background:var(--red);color:#fff;border-radius:8px;padding:2px 7px;font-size:calc(11px * var(--fs,1));font-weight:800;margin-left:5px;letter-spacing:.3px;animation:dcLivePulse 1.3s ease-in-out infinite;}
@keyframes dcLivePulse{0%,100%{opacity:1;}50%{opacity:.55;}}
.dc-xp{font-size:calc(12px * var(--fs,1));font-weight:800;color:var(--on-acc);background:var(--acc);border-radius:8px;padding:3px 10px;box-shadow:0 2px 0 var(--btn-shadow-acc);}
.dc-streak{font-size:calc(11px * var(--fs,1));color:var(--t2);font-weight:600;}
.dc-cat{font-size:calc(10px * var(--fs,1));color:var(--purple);text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px;font-weight:500;}
.dc-q{font-size:calc(14px * var(--fs,1));color:var(--t);line-height:1.6;margin-bottom:12px;}
.dc-opts{display:flex;flex-direction:column;gap:6px;}
.dc-opt{background:var(--bg3);border:0.5px solid var(--bd2);border-radius:12px;padding:10px 13px;font-size:calc(13px * var(--fs,1));color:var(--t2);text-align:left;cursor:pointer;font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;font-weight:500;transition:all .15s;}
.dc-opt:active{transform:scale(.98);}
.dc-opt.dc-correct{background:rgba(76,175,125,.15);border-color:var(--green);color:var(--green);}
.dc-opt.dc-wrong{background:rgba(224,92,92,.1);border-color:var(--red);color:var(--red);}
.dc-done{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;margin-bottom:8px;}
.dc-done.correct{background:rgba(76,175,125,.1);}
.dc-done.wrong{background:rgba(224,92,92,.08);}
.dc-done-icon{font-size:calc(24px * var(--fs,1));}
.dc-exp{font-size:calc(11px * var(--fs,1));color:var(--t2);line-height:1.7;padding:10px 12px;background:var(--bg3);border-radius:8px;font-weight:500;}
.dc-streak-row{font-size:calc(11px * var(--fs,1));color:var(--t3);margin-top:10px;text-align:center;}
.pt-summary{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:10px;}
.pt-metric{background:var(--bg2);border:0.5px solid var(--bd);border-radius:12px;padding:12px 13px;}
.pt-metric-wide{grid-column:span 2;}
.pt-mlabel{font-size:calc(11px * var(--fs,1));text-transform:uppercase;letter-spacing:.5px;color:var(--t3);margin-bottom:4px;}
.pt-mval{font-size:calc(22px * var(--fs,1));font-weight:500;font-variant-numeric:tabular-nums;}
.pt-msub{font-size:calc(11px * var(--fs,1));color:var(--t3);margin-top:2px;}
.pt-chart-wrap{background:var(--bg2);border:0.5px solid var(--bd);border-radius:12px;padding:12px;margin-bottom:10px;}
#pt-chart{width:100%;height:70px;display:block;}
.pt-holding{display:flex;align-items:center;gap:0;padding:11px 14px;background:var(--bg2);border:0.5px solid var(--bd);border-radius:12px;margin-bottom:6px;cursor:pointer;transition:all .15s;}
.pt-holding:active{transform:scale(.98);background:var(--bg3);}
.ph-ico{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:calc(16px * var(--fs,1));flex-shrink:0;margin-right:10px;}
.pt-empty{text-align:center;padding:24px 0;color:var(--t3);font-size:calc(12px * var(--fs,1));font-weight:500;}
.pt-etf-row{display:flex;align-items:center;gap:10px;padding:11px 14px;background:var(--bg2);border:0.5px solid var(--bd);border-radius:12px;margin-bottom:6px;cursor:pointer;transition:all .15s;}
.pt-etf-row:active{transform:scale(.98);}
.pt-etf-row.owned{border-color:rgba(242,168,62,.3);background:rgba(242,168,62,.04);}
.per-ico{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:calc(16px * var(--fs,1));flex-shrink:0;}
#pt-trade-panel{background:var(--bg2);border:0.5px solid var(--acc);border-radius:16px;padding:15px;margin-bottom:10px;display:none;}
.q-amt-btn{padding:5px 10px;border-radius:8px;border:0.5px solid var(--bd2);background:transparent;color:var(--t2);font-size:calc(11px * var(--fs,1));cursor:pointer;font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;}
.q-amt-btn:active{background:var(--bg3);}
.q-amt-btn.sell-hint{color:var(--red);border-color:rgba(224,92,92,.3);}
.trd-btn{flex:1;padding:11px;border-radius:12px;border:none;font-size:calc(13px * var(--fs,1));font-weight:500;cursor:pointer;font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;transition:all .15s;}
.trd-btn:active{transform:scale(.98);}
.buy-btn{background:var(--green);color:#fff;}
.sell-btn{background:var(--red);color:#fff;}
.sig-btn{padding:4px 10px;border-radius:8px;border:none;font-size:calc(11px * var(--fs,1));font-weight:500;cursor:pointer;font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;}
.buy-sig{background:rgba(76,175,125,.15);color:var(--green);}
.avoid-sig{background:rgba(224,92,92,.1);color:var(--red);}
#pt-msg{display:none;font-size:calc(12px * var(--fs,1));margin-top:8px;text-align:center;font-weight:500;}

/* Netlify Identity modal — PWA에서 잘림 방지 */
.netlify-identity-overlay,
.netlify-identity-widget,
.netlify-identity-modal{
  z-index:99999 !important;
}
.netlify-identity-modal{
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
}
/* ── 매크로 라이브 카드 (화이트 미니멀 · 파스텔 톤) ── */
.macro-live-card{
  position:relative;border-radius:16px;padding:16px 18px;margin-bottom:10px;
  overflow:hidden;border:0.5px solid var(--bd);
  background:var(--bg2);
  box-shadow:var(--shadow-md);
  transition:background .5s ease,border-color .5s ease;
}
.macro-live-card.weather-sunny{
  background:linear-gradient(135deg,#FFF9EC 0%,#FFFFFF 100%);
  border-color:rgba(184,146,58,.18);
}
.macro-live-card.weather-cloudy{
  background:linear-gradient(135deg,#F5F7FB 0%,#FFFFFF 100%);
}
.macro-live-card.weather-rainy{
  background:linear-gradient(135deg,#EFF5FF 0%,#FFFFFF 100%);
  border-color:rgba(59,130,246,.20);
}
.macro-live-card.weather-storm{
  background:linear-gradient(135deg,#FFF1F1 0%,#FFFFFF 100%);
  border-color:rgba(220,38,38,.22);
}
.ml-overlay{position:absolute;inset:0;pointer-events:none;}
.ml-overlay-sunny{
  background:radial-gradient(circle at 82% 18%,rgba(255,205,100,.22) 0%,transparent 40%);
}
.ml-overlay-cloudy{
  background:radial-gradient(circle at 30% 25%,rgba(15,23,42,.03) 0%,transparent 55%);
}
.ml-overlay-rainy{
  background:linear-gradient(180deg,transparent 0%,rgba(59,130,246,.08) 100%);
}
.ml-overlay-storm{
  background:
    radial-gradient(circle at 22% 28%,rgba(234,179,8,.14) 0%,transparent 24%),
    radial-gradient(circle at 78% 60%,rgba(220,38,38,.10) 0%,transparent 32%);
  animation:ml-flash 5s infinite;
}
/* 캐릭터에 섹터 컬러 포인트 링 (모자처럼) */
.ml-character-wrap{
  position:relative;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  width:62px;height:62px;border-radius:50%;
  background:var(--bg3);
  border:2.5px solid var(--sector-point,var(--acc));
  box-shadow:0 2px 6px rgba(15,23,42,.05),inset 0 0 0 3px #fff;
}
.ml-character-wrap::before{
  content:'';position:absolute;top:-6px;left:50%;transform:translateX(-50%);
  width:24px;height:8px;border-radius:8px 6px 2px 2px;
  background:var(--sector-point,var(--acc));
}
@keyframes ml-flash{
  0%,88%,100%{opacity:.4;}
  90%,94%{opacity:.95;}
  92%,96%{opacity:.55;}
}
.ml-content{position:relative;z-index:1;}
.ml-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.ml-label{font-size:calc(11px * var(--fs,1));text-transform:uppercase;letter-spacing:1px;color:var(--t3);font-weight:500;}
.ml-weather{font-size:calc(13px * var(--fs,1));color:var(--t);margin-top:3px;font-weight:500;}
.ml-character{will-change:transform; /* ml-float 를 합성기에서만 — 페이지 레이어를 매 프레임 다시 그리지 않게 (2026-09-27) */

  font-size:calc(34px * var(--fs,1));line-height:1;
  animation:ml-float 3.2s ease-in-out infinite;
}
/* 섹터 아이콘은 MacroIcon SVG다 — 이모지 폴백일 때만 font-size가 쓰인다 */
.ml-character svg{display:block;}
@keyframes ml-float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-4px);}
}
.ml-team{font-size:calc(11px * var(--fs,1));color:var(--sector-point,var(--acc));font-weight:600;margin-bottom:8px;letter-spacing:.3px;}
.ml-lines{font-size:calc(13px * var(--fs,1));color:var(--t2);line-height:1.7;margin-bottom:12px;font-weight:400;}
.ml-line+.ml-line{margin-top:1px;}
.ml-sector-row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:12px;
}
.ml-sector-chip{
  background:var(--bg3);border-radius:8px;padding:7px 4px;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  border:0.5px solid var(--bd);
}
.ml-sector-chip-main{
  background:var(--bg2);
  border:1px solid var(--sector-point,var(--acc));
  box-shadow:0 0 0 2px rgba(15,23,42,.03);
}
/* 팀 방어 미니 게이지 (25차 · teamDefense.js) — 칩 탭 → 팀 상세/이적 */
.ml-sector-chip-tap{cursor:pointer;}
.ml-sector-chip-tap:active{transform:scale(.96);}
.ml-chip-gauge{width:100%;height:4px;border-radius:4px;background:var(--bd);overflow:hidden;margin-top:2px;}
.ml-chip-gauge-fill{height:100%;border-radius:4px;transition:width .4s ease;}
.ml-chip-lv{font-size:calc(9px * var(--fs,1));font-weight:800;color:var(--t3);letter-spacing:.3px;}
.ml-actions{display:flex;justify-content:flex-end;}
/* secondary(외곽선) — 홈의 filled primary는 오늘의 항해 "지금 하기" 하나만 (폰 레스토프)
   33차 강조색 규칙: 행동(버튼)은 주황, 팀색(--sector-point)은 팀 정체성(칩 테두리·아바타 링·팀명)에만.
   예전엔 이 버튼까지 팀색이라 한 카드에 보라 버튼, 옆 카드에 청록 버튼, 그 옆에 주황 뱃지가 섞였다 */
.ml-cta{
  background:transparent;color:var(--acc-text);border:1.5px solid var(--acc);border-radius:12px;
  padding:8px 15px;font-size:calc(12px * var(--fs,1));font-weight:700;cursor:pointer;
  font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;
}
.ml-cta:active{transform:scale(.96);}

/* ── 수준 평가 모달 ── */
#level-modal{
  display:none;position:fixed;inset:0;
  background:rgba(15,23,42,.72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  z-index:9999;
  align-items:center;justify-content:center;padding:20px;
}
/* ═══════════════════════════════════════════════════════
   집중 모드 (31차) — 한 가지 일에만 몰입해야 하는 화면의 공통 규칙.
   사용자 지적: "기능 쓸 때마다 집중도가 분산된다 · 경계가 없어 보인다".
   원인은 화면마다 처리가 제각각이었던 것 — 개념 상세·타임머신에는 몰입 처리가
   있었지만 팀 배치 질문(관심분야 평가)에는 없어서 뒤 화면(상단바·탭바·목록)이
   그대로 읽혔다. 배경을 85% 검게 깔아도 뒤가 보이는 이유는 **블러가 없어서**다.
   ⚠ 새로 만드는 몰입 화면은 이 클래스를 쓸 것. 개별 인라인 style 로 다시 흩지 말 것.
   ═══════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════
   전용 화면 (31차) — 한 가지 일에만 몰입하는 기능은 **자기 화면**을 갖는다.
   사용자 지적을 두 번 거쳐 여기까지 왔다:
     ① 반투명+블러 → "뒤가 흐릿하게 있다"는 신호라 여전히 팝업으로 읽혔다
     ② 불투명 단색  → 뒤는 사라졌지만 앱 배경 그대로라 "너무 깜깜하고" 휑했다
   → 배경에 층(그라디언트 + 은은한 브랜드 글로우)을 줘서 **다른 장소**로 느껴지게 한다.
   ⚠ 새로 만드는 몰입 화면은 .ps-screen 을 쓸 것. 개별 인라인 style 로 다시 흩지 말 것.
   ═══════════════════════════════════════════════════════ */
.ps-screen{
  position:fixed; inset:0; z-index:9999;
  flex-direction:column; align-items:stretch;
  padding:0; overflow:hidden;
  /* 세 겹으로 '방'을 만든다. 위→아래 그라디언트만 쓰면 하늘처럼 열린 느낌이 돼서
     아무리 밝기를 맞춰도 공간이 생기지 않는다.
       ① 창 — 우상단에서 비스듬히 드는 빛. 완전히 막으면 갇힌 느낌이라 숨구멍을 하나 낸다
          (다크는 새벽 하늘빛, 라이트는 흰 빛. 앱이 날씨 은유를 쓰니 창밖도 하늘이다)
       ② 가운데 조명 — 지금 할 일이 놓인 자리
       ③ 사방 비네팅 — 벽. 시선이 가장자리에서 안으로 되돌아온다
       ④ 바닥 그라디언트 — 위아래 방향감
     ⚠ 비네팅만 세게 올리면 '갇힘'이 된다. 창(①)과 짝으로 조절할 것. */
  /* ⚠ 색온도를 앱 기본 화면과 **반대로** 둔다 (31차 · 사용자 "더 과감하게").
     앱 배경은 차가운 슬레이트(#0F1419 / #E4E9F0)다. 여기를 따뜻한 톤으로 두면
     들어온 순간 "다른 방"인 게 색으로 먼저 읽힌다 — 밝기만 만지면 아무리 조절해도
     같은 화면으로 보인다(그래서 앞선 두 번의 시도가 "똑같다"는 말을 들었다). */
  background:
    radial-gradient(54% 40% at 87% -5%, rgba(255,252,244,.98), transparent 62%),
    radial-gradient(96% 74% at 50% 42%, rgba(255,249,238,.92), transparent 66%),
    radial-gradient(150% 108% at 50% 50%, transparent 46%, rgba(120,84,42,.16) 100%),
    linear-gradient(180deg, #FDF8F0 0%, #F7EFE3 56%, #F0E6D8 100%);
  box-shadow:inset 0 0 88px rgba(120,84,42,.10);
  animation:psEnter .46s var(--ease-soft);
  will-change:transform, opacity;
}
:root[data-theme="dark"] .ps-screen{
  background:
    radial-gradient(54% 40% at 87% -5%, rgba(255,214,150,.20), transparent 62%),
    radial-gradient(96% 74% at 50% 42%, rgba(226,124,31,.13), transparent 66%),
    radial-gradient(150% 108% at 50% 50%, transparent 44%, rgba(0,0,0,.50) 100%),
    linear-gradient(180deg, #2A2119 0%, #201811 56%, #1A140E 100%);
  box-shadow:inset 0 0 96px rgba(0,0,0,.42);
}
/* 상단 바 — 나갈 길을 항상 열어 둔다. 갇힌 느낌은 몰입이 아니라 불안이다. */
.ps-head{
  flex:none; display:flex; align-items:center; justify-content:flex-end;
  padding:14px 16px 0; min-height:48px;
}
.ps-close{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--bd);
  background:var(--bg2); color:var(--t2); font-size:calc(15px * var(--fs,1)); cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0;
  transition:background .15s, color .15s;
}
.ps-close:hover{ background:var(--bg3); color:var(--t); }
/* 본문 — 카드 껍데기를 벗긴다. 테두리·그림자가 남으면 아무리 키워도 '떠 있는 카드'다. */
.ps-screen > .lv-card{
  flex:1; width:100%; max-width:560px; margin:0 auto;
  height:auto; max-height:none;
  background:transparent; border:0; border-radius:0; box-shadow:none;
  padding:8px 22px 40px; overflow-y:auto;
  animation:none;
  display:flex; flex-direction:column;
}
/* 세로 배분 — 위에 몰리면 '빈 화면에 글이 얹힌' 인상이 된다.
   ⚠ justify-content:center 는 내용이 길 때 위가 잘려 스크롤로도 못 올라간다.
     가짜 여백을 flex 로 나누면 길어질 때 알아서 줄어들어 안전하다. */
.ps-screen > .lv-card::before,
.ps-screen > .lv-card::after{ content:''; flex:1 1 0; min-height:4px; }
.ps-screen > .lv-card::after{ flex-grow:1.5; }
@keyframes psEnter{
  from{ opacity:0; transform:translateY(26px) scale(.985); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){ .ps-screen{ animation:none; } }

.lv-card{
  background:var(--bg2);border:2px solid var(--bd2);
  border-radius:24px;padding:26px 22px;
  /* 31차 — max-width 380 → 480. 좁은 카드는 화면 한가운데 떠 있는 팝업으로 읽혔다.
     개념 상세(520px)와 비슷한 폭으로 키워 '지금은 이 일만 하는 중'이 되게 한다. */
  width:100%;max-width:480px;max-height:90vh;overflow-y:auto;
  animation:arcade-pop .40s var(--ease-arcade-step);   /* 34차 아케이드 — 세기는 --arcade */
  box-shadow:var(--shadow-lg);
}
#level-modal[style*="flex"]{animation:overlayFade .26s ease;}
.lv-title{font-family:var(--font-hd);font-size:calc(24px * var(--fs,1));margin-bottom:6px;font-weight:700;}
.lv-sub{font-size:calc(13px * var(--fs,1));color:var(--t2);line-height:1.6;margin-bottom:18px;font-weight:500;}
.lv-progress{display:flex;align-items:center;gap:8px;margin-bottom:14px;}
.lv-progress-bar{flex:1;height:8px;background:var(--bg3);border-radius:4px;overflow:hidden;border:1px solid var(--bd);}
.lv-progress-fill{height:100%;background:linear-gradient(90deg,var(--acc2),var(--acc));transition:width .4s ease;box-shadow:0 0 8px rgba(226,124,31,.4);}
.lv-progress-text{font-size:calc(11px * var(--fs,1));color:var(--acc-text);font-variant-numeric:tabular-nums;flex-shrink:0;font-weight:800;}
.lv-q{font-size:calc(16px * var(--fs,1));font-weight:700;color:var(--t);margin-bottom:14px;line-height:1.5;}
.lv-options{display:flex;flex-direction:column;gap:8px;}
.lv-opt{
  text-align:left;background:var(--bg2);border:2px solid var(--bd);
  border-radius:12px;padding:13px 14px;color:var(--t);
  font-size:calc(14px * var(--fs,1));font-weight:600;font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;cursor:pointer;
  line-height:1.5;transition:transform .12s ease,box-shadow .12s ease,border-color .15s ease,background .15s ease;
  box-shadow:0 3px 0 var(--bd2);
}
.lv-opt:hover{border-color:var(--acc);}
.lv-opt:active{transform:translateY(2px);box-shadow:0 1px 0 var(--bd2);}
.lv-result{text-align:center;padding:6px 0;}
.lv-result-emoji{font-size:calc(60px * var(--fs,1));margin-bottom:8px;line-height:1;filter:drop-shadow(0 4px 8px rgba(226,124,31,.25));}
.lv-result-lv{font-size:calc(11px * var(--fs,1));color:var(--acc-text);text-transform:uppercase;letter-spacing:.8px;font-weight:800;}
.lv-result-name{font-family:var(--font-hd);font-size:calc(28px * var(--fs,1));margin:4px 0 12px;font-weight:700;}
.lv-result-desc{font-size:calc(13px * var(--fs,1));color:var(--t2);line-height:1.65;margin-bottom:22px;font-weight:500;}
.lv-result-btn{
  width:100%;background:var(--acc);color:var(--on-acc);border:none;
  border-radius:16px;padding:14px;font-size:calc(15px * var(--fs,1));font-weight:800;letter-spacing:.2px;
  box-shadow:0 4px 0 var(--btn-shadow-acc),0 6px 14px rgba(226,124,31,.25);
  transition:transform .12s ease,box-shadow .12s ease;
  cursor:pointer;font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;
}
/* ── 온보딩 튜토리얼 (스포트라이트 + 말풍선) ── */
#tut-overlay{
  position:fixed;inset:0;z-index:9990;pointer-events:none;
  display:none;
}
#tut-overlay.active{display:block;animation:tutOvIn .3s var(--ease-soft);}
@keyframes tutOvIn{from{opacity:0;}to{opacity:1;}}
/* 스포트라이트 구멍이 스텝 사이를 미끄러지듯 옮겨간다 — 툭 튀지 않게 */
#tut-hole{transition:x .42s var(--ease-soft), y .42s var(--ease-soft),
                     width .42s var(--ease-soft), height .42s var(--ease-soft);}
#tut-overlay svg{position:absolute;inset:0;width:100%;height:100%;}
.tut-hole-mask{fill-rule:evenodd;}
/* 말풍선은 스포트라이트 구멍과 **같은 시간·같은 곡선**으로 함께 미끄러진다 (31차).
   ⚠ 구멍만 0.42s 로 움직이고 말풍선은 순간이동하면, 둘이 따로 놀아서 "튄다"고 읽힌다.
     실제로 그 상태였다 — 어긋나 보이던 진짜 이유다.
   ⚠ 첫 등장에서는 tutorial.js 가 transition 을 잠시 꺼서 이전 자리에서 날아오지 않게 한다. */
.tut-bubble{
  transition:top .42s var(--ease-soft), left .42s var(--ease-soft);
  position:fixed;z-index:9992;max-width:300px;
  background:#fff;color:var(--t);
  border:2px solid var(--sector-point,var(--acc));
  border-radius:16px;padding:14px 16px;
  box-shadow:0 4px 0 var(--btn-shadow-acc),0 14px 32px rgba(15,23,42,.24);
  font-size:calc(14px * var(--fs,1));line-height:1.55;font-weight:500;
  pointer-events:auto;
  /* 31차 — 끝에서 튀는 커브(…,1.3)라 카드가 통통 튀어 불안정해 보였다. 감속형으로. */
  animation:arcade-pop .38s var(--ease-arcade-step);  /* 34차 — **첫 등장만**. 스텝 간 이동은 위 transition 이 담당(31차에 튐 제거된 자리) */
  /* ⚠ 여기에 transition 을 다시 선언하지 말 것 — 위쪽 선언을 덮어쓴다.
     예전엔 이 자리에 .38s cubic-bezier(.22,.85,.32,1.05) 가 있었다. 끝값 1.05 는
     목표를 지나쳤다 되돌아오는 곡선이라, 말풍선이 스텝마다 튕겨 보였다(31차 · 사용자 제보).
     이동 곡선은 스포트라이트 구멍(#tut-hole)과 **같은 시간·같은 곡선**이어야 한다. */
}
.tut-bubble-title{
  font-size:calc(11px * var(--fs,1));text-transform:uppercase;letter-spacing:.8px;
  color:var(--sector-point,var(--acc));font-weight:800;margin-bottom:5px;
}
.tut-bubble-body strong{color:var(--t);font-weight:800;}
/* 마지막 단계 — 스포트라이트 안을 직접 누르라는 안내.
   이 단계에는 "다음" 버튼이 없으므로, 눌러야 할 곳이 어디인지 말풍선이 대신 말해줘야 한다. */
.tut-bubble-tap{
  display:flex;align-items:center;gap:6px;margin-top:10px;
  background:rgba(226,124,31,.12);border:1px dashed var(--acc);
  border-radius:12px;padding:7px 10px;
  font-size:calc(12px * var(--fs,1));font-weight:800;color:var(--acc-text);line-height:1.45;
}
.tut-bubble-actions{display:flex;gap:6px;margin-top:10px;justify-content:flex-end;}
.tut-bubble-step{font-size:calc(10px * var(--fs,1));color:var(--t3);}
.tut-bubble-skip{
  background:transparent;border:none;color:var(--t3);font-size:calc(11px * var(--fs,1));
  cursor:pointer;font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;padding:4px 8px;
}
.tut-bubble-next{
  background:var(--sector-point,var(--acc));color:#fff;border:none;
  border-radius:12px;padding:8px 14px;font-size:calc(12px * var(--fs,1));font-weight:800;letter-spacing:.2px;
  cursor:pointer;font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;
  box-shadow:0 3px 0 var(--btn-shadow-acc),0 5px 10px rgba(226,124,31,.22);
  transition:transform .12s ease,box-shadow .12s ease;
}
.tut-bubble-next:active{transform:translateY(2px);box-shadow:0 1px 0 var(--btn-shadow-acc);}
.tut-bubble::before{
  content:'';position:absolute;width:0;height:0;
  border:6px solid transparent;
}
.tut-bubble.arr-up::before{
  top:-12px;left:50%;transform:translateX(-50%);
  border-bottom-color:#fff;
}
.tut-bubble.arr-down::before{
  bottom:-12px;left:50%;transform:translateX(-50%);
  border-top-color:#fff;
}
@keyframes tut-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(99,102,241,.4);}
  50%{box-shadow:0 0 0 10px rgba(99,102,241,0);}
}
/* 튜토리얼 진행 중 nav 버튼 잠금 */
.tut-nav-locked .ni{opacity:.32;pointer-events:none;filter:grayscale(.4);}
/* 메뉴를 소개하는 단계(3단계)에서는 흐림·회색조만 걷는다 — 소개 대상이 흐리면 읽을 수가 없다.
   ⚠ pointer-events 는 일부러 되살리지 않는다. 위 규칙이 계속 잡고 있어야 투어 중 이탈이 막힌다.
     (선택자를 .tut-nav-locked .ni 와 같은 자리로 낮추면 잠금이 풀린다 — 특이도를 낮추지 말 것) */
.tut-nav-locked.tut-nav-showcase .ni{opacity:1;filter:none;}
.tut-nav-locked .ni.tut-nav-active{
  opacity:1;pointer-events:auto;filter:none;
  animation:tut-pulse 1.6s ease-in-out infinite;
  border-radius:8px;
}
.tut-highlight{
  position:relative;z-index:9991;
  border-radius:12px;
  box-shadow:0 0 0 4px rgba(99,102,241,.7),0 0 36px rgba(99,102,241,.55);
  animation:tut-pulse 1.8s ease-in-out infinite;
}

/* ── 닉네임 모달 ── */
#nickname-modal{
  display:none;position:fixed;inset:0;
  background:rgba(15,23,42,.72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  z-index:9999;
  align-items:center;justify-content:center;padding:20px;
}
.nm-card{
  background:var(--bg2);border:2px solid var(--bd2);
  border-radius:24px;padding:28px 22px;width:100%;max-width:340px;
  animation:arcade-pop .40s var(--ease-arcade-step);   /* 34차 아케이드 — 세기는 --arcade */
  box-shadow:var(--shadow-lg);
}
#nickname-modal[style*="flex"],
#group-create-modal[style*="flex"],
#group-invite-modal[style*="flex"],
/* ⚠ overlayFade 는 blur(0) 에서 시작해 4px 로 끝난다. .focus-layer 의 blur(7px) 를
   ID 우선순위로 눌러 버려서 실측 backdrop-filter 가 blur(0px) 로 나왔다(31차).
   집중 모드 모달은 전용 애니메이션을 쓰고 fill-mode both 로 끝값을 유지한다. */
/* 진입 연출은 .focus-layer 의 focusEnter 가 맡는다 — 여기서 따로 걸지 않는다.
   ⚠ 예전에 overlayFade(=blur 0에서 시작)가 ID 우선순위로 덮어써서 블러가 죽은 적이 있다.
     집중 모드 모달에 overlayFade 를 다시 붙이지 말 것. */
.nm-title{font-family:var(--font-hd);font-size:calc(22px * var(--fs,1));margin-bottom:6px;}
.nm-sub{font-size:calc(13px * var(--fs,1));color:var(--t2);line-height:1.6;margin-bottom:20px;font-weight:500;}
.nm-input{
  width:100%;background:var(--bg3);border:2px solid var(--bd2);
  border-radius:12px;padding:13px 14px;color:var(--t);
  font-size:calc(15px * var(--fs,1));font-weight:600;font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;outline:none;
  margin-bottom:12px;transition:border-color .15s ease,box-shadow .15s ease;
}
.nm-input:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(226,124,31,.18);}
.nm-btn{
  width:100%;background:var(--acc);color:var(--on-acc);border:none;
  border-radius:16px;padding:14px;font-size:calc(15px * var(--fs,1));font-weight:800;letter-spacing:.2px;
  cursor:pointer;font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;
  box-shadow:0 4px 0 var(--btn-shadow-acc),0 6px 14px rgba(226,124,31,.25);
  transition:transform .12s ease,box-shadow .12s ease;
}
.nm-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--btn-shadow-acc);}
/* ── 설정 페이지 ── */
.settings-section{background:var(--bg2);border:0.5px solid var(--bd);border-radius:16px;margin-bottom:10px;overflow:hidden;}
.settings-header{padding:13px 16px;border-bottom:0.5px solid var(--bd);}
.settings-header-title{font-size:calc(11px * var(--fs,1));text-transform:uppercase;letter-spacing:.8px;color:var(--t3);font-weight:500;}
.settings-row{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:0.5px solid var(--bd);}
.settings-row:last-child{border-bottom:none;}
.settings-row-label{font-size:calc(13px * var(--fs,1));color:var(--t2);font-weight:500;}
.settings-row-value{font-size:calc(13px * var(--fs,1));font-weight:500;color:var(--t);max-width:55%;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.settings-row-value.muted{color:var(--t3);font-weight:500;}
.settings-edit-btn{font-size:calc(11px * var(--fs,1));color:var(--acc-text);background:transparent;border:0.5px solid var(--acc);border-radius:8px;padding:4px 10px;cursor:pointer;font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;flex-shrink:0;margin-left:8px;}
.settings-danger-btn{width:100%;padding:12px;background:rgba(224,92,92,.08);border:0.5px solid rgba(224,92,92,.25);border-radius:12px;color:var(--red);font-size:calc(13px * var(--fs,1));cursor:pointer;font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;margin-top:4px;}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:12px 14px;}
.stat-item{background:var(--bg3);border-radius:12px;padding:11px 12px;text-align:center;}
.stat-num{font-size:calc(20px * var(--fs,1));font-weight:500;color:var(--acc-text);}
.stat-lbl{font-size:calc(10px * var(--fs,1));color:var(--t3);margin-top:2px;font-weight:500;}
/* ── Ambient 배경 레이어 (Macro-Relief) ── */
#ambient-layer{
  position:absolute;inset:0;z-index:0;
  pointer-events:none;overflow:hidden;border-radius:inherit;
  transition:opacity .4s ease;
  /* 자기 합성층으로 분리(2026-09-24): 앞의 스크롤 영역이 움직여도 이 레이어를 다시 그리지 않게.
     contain:paint 는 안의 SVG 애니메이션이 바깥을 무효화하지 못하게 막는다. */
  will-change:transform;transform:translateZ(0);contain:paint;
}
/* 탭이 뒤로 갔을 때(body.amb-paused)만 배경 애니메이션을 멈춘다 — ambient.js 가 토글한다.
   (스크롤 중 정지 amb-scrolling 은 9/27 에 뺐다: 배경이 합성기에서만 돌게 된 뒤로는 이득 없이 "얼어붙음"만 남아서.
    아래 규칙에 amb-scrolling 이 남아 있는 건 혹시 다른 코드가 클래스를 붙여도 해가 없게 두는 것뿐이다.) */
/* 안 보이는 무드 레이어(opacity:0)의 애니메이션도 돌고 있었다 — 실측 46개 중 보이는 건 16개뿐.
   현재 무드 레이어만 돌리고 나머지는 멈춘다(무드가 바뀌면 그 레이어가 이어서 돈다).
   ⚠ 셋 다 !important 인 이유: ambient.js 가 SVG 요소마다 inline style="animation: …" 을 쓰는데,
   이 축약형이 animation-play-state 를 running 으로 되돌리고 inline 이라 보통 규칙을 이긴다.
   그래서 important 끼리 **특이도**로 겨룬다: 기본 정지(1,1,0) < 현재 무드 재생(1,2,0) < 스크롤 중 정지(1,3,0). */
#ambient-layer .amb-bg *{animation-play-state:paused !important;}
#ambient-layer[data-mood="calm"]   .amb-bg-calm   *,
#ambient-layer[data-mood="cloudy"] .amb-bg-cloudy *,
#ambient-layer[data-mood="rainy"]  .amb-bg-rainy  *,
#ambient-layer[data-mood="crisis"] .amb-bg-crisis *,
#ambient-layer[data-mood="boom"]   .amb-bg-boom   *{animation-play-state:running !important;}
body.amb-scrolling #ambient-layer[data-mood] .amb-bg *, body.amb-paused #ambient-layer[data-mood] .amb-bg *,
body.amb-scrolling #ambient-layer *, body.amb-paused #ambient-layer *{animation-play-state:paused !important;}
@media (prefers-reduced-motion: reduce){ #ambient-layer *{animation:none !important;} }
#ambient-layer.amb-hidden{ opacity:0; }
#ambient-layer .amb-bg{
  position:absolute;inset:0;opacity:0;
  transition:opacity .8s ease;
}
#ambient-layer .amb-bg svg{position:absolute;inset:0;width:100%;height:100%;}
/* (2026-09-27) 애니메이션은 svg 컨테이너에만 — 안쪽 SVG 요소를 움직이면 매 프레임 메인 스레드 레이아웃이 난다(ambient.js 주석).
   구름: 폭 200% 를 -50% 만큼 흘리면 처음과 이어진다 · 비: 높이 200% 를 -50%→0 으로 내리면 이어진다 · 반짝임: 두 장이 번갈아 밝아진다. */
#ambient-layer .amb-bg svg.amb-svg-clouds{width:200%;right:auto;animation:amb-strip-x 90s linear infinite;will-change:transform;}
#ambient-layer .amb-bg svg.amb-svg-rain{height:200%;bottom:auto;animation:amb-strip-y 1.4s linear infinite;will-change:transform;}
#ambient-layer .amb-bg svg.amb-svg-spark{animation:amb-fade 4s ease-in-out infinite;will-change:opacity;}
#ambient-layer .amb-bg svg.amb-svg-spark.b{animation-delay:-2s;}
/* ↑ 선택자에 svg 를 넣은 이유: 바로 위 `#ambient-layer .amb-bg svg{width:100%…}` 가 (1,1,1) 이라 (1,1,0) 인 클래스 규칙을 이겼다(실측: 폭이 100% 로 남아 이음새가 생김). */
@keyframes amb-strip-x{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes amb-strip-y{from{transform:translateY(-50%);}to{transform:translateY(0);}}
@keyframes amb-fade{0%,100%{opacity:.25;}50%{opacity:.9;}}
#ambient-layer[data-mood="calm"]   .amb-bg-calm   { opacity:1; }
#ambient-layer[data-mood="cloudy"] .amb-bg-cloudy { opacity:1; }
#ambient-layer[data-mood="rainy"]  .amb-bg-rainy  { opacity:1; }   /* 33차 · 내 팀 '비' */
#ambient-layer[data-mood="crisis"] .amb-bg-crisis { opacity:1; }
#ambient-layer[data-mood="boom"]   .amb-bg-boom   { opacity:1; }

/* 평온 — 옅은 흰색 */
.amb-bg-calm  { background:linear-gradient(180deg,#FFFFFF 0%,#F9FAFB 100%); }

/* 흐림 — 회색조 + 흐르는 구름 */
.amb-bg-cloudy{
  background:linear-gradient(180deg,#cbd5e1 0%,#dde3eb 45%,#eef2f7 100%);
}

/* 폭풍우 — 어두운 회청색 + 비 + 번개 */
.amb-bg-crisis{
  background:linear-gradient(180deg,#475569 0%,#64748b 35%,#94a3b8 70%,#cbd5e1 100%);
}
/* 비 (33차 · 내 팀 '비') — 흐림보다 어둡고 푸르게, 폭풍우보다는 밝게 + 빗줄기(번개 없음) */
.amb-bg-rainy{
  background:linear-gradient(180deg,#A7B8CB 0%,#C7D2DE 45%,#E4EAF1 100%);
}

/* 호황 — 골드 빛 */
.amb-bg-boom  {
  background:linear-gradient(180deg,rgba(254,243,199,.7) 0%,rgba(255,251,235,.4) 60%,#FFFFFF 100%);
}

/* ── 다크 전용 앰비언트 아트 (24차) — 위 그라디언트·구름색은 전부 라이트 배경 기준이라
   다크에선 안 보이거나 탁한 회색 워시가 됐다. 다크에선 하늘 톤을 어둡게, 구름·비는
   배경보다 살짝 밝게 뒤집는다 (아래는 투명 처리해 카드 영역 간섭 최소화). */
:root[data-theme="dark"] .amb-bg-calm{background:linear-gradient(180deg,rgba(56,72,90,.30) 0%,rgba(15,20,25,0) 65%);}
:root[data-theme="dark"] .amb-bg-cloudy{background:linear-gradient(180deg,rgba(51,65,85,.45) 0%,rgba(36,48,63,.22) 45%,rgba(15,20,25,0) 100%);}
:root[data-theme="dark"] .amb-bg-crisis{background:linear-gradient(180deg,rgba(30,41,59,.62) 0%,rgba(44,58,76,.34) 55%,rgba(15,20,25,0) 100%);}
:root[data-theme="dark"] .amb-bg-rainy{background:linear-gradient(180deg,rgba(37,52,72,.55) 0%,rgba(40,54,72,.28) 50%,rgba(15,20,25,0) 100%);}
:root[data-theme="dark"] .amb-bg-boom{background:linear-gradient(180deg,rgba(242,168,62,.14) 0%,rgba(242,168,62,.06) 55%,rgba(15,20,25,0) 100%);}
:root[data-theme="dark"] .amb-bg-cloudy svg ellipse{fill:rgba(148,163,184,.24);}
:root[data-theme="dark"] .amb-bg-crisis svg ellipse{fill:rgba(129,147,170,.28);}
:root[data-theme="dark"] .amb-bg-crisis svg line{stroke:rgba(151,170,192,.55);}
:root[data-theme="dark"] .amb-bg-rainy svg ellipse{fill:rgba(129,147,170,.26);}
:root[data-theme="dark"] .amb-bg-rainy svg line{stroke:rgba(124,196,242,.5);}

/* 번개 플래시 — 폭풍우에서만 */
.amb-lightning{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 28% 18%,rgba(255,255,255,.95),rgba(255,255,255,0) 55%);
  opacity:0;
  mix-blend-mode:lighten;
  animation:amb-lightning 7s ease-in infinite;
}
@keyframes amb-lightning{
  0%, 88%      { opacity:0; }
  89%, 90%     { opacity:.92; }
  91%          { opacity:.1; }
  92%, 93%     { opacity:.7; }
  94%, 100%    { opacity:0; }
}

/* 천둥 ⚡ 아이콘 (폭풍우 우상단) */
.amb-thunder{
  position:absolute;top:18px;right:18px;font-size:calc(30px * var(--fs,1));opacity:.5;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.4));
  animation:amb-thunder-pulse 3.5s ease-in-out infinite;
}
@keyframes amb-thunder-pulse{
  0%,100% { opacity:.2;  transform:scale(1); }
  50%     { opacity:.85; transform:scale(1.18); }
}

/* 비 — 더 빠르고 진하게 */
@keyframes amb-rain{
  0%   { transform:translateY(0)   translateX(0);   opacity:0; }
  10%  { opacity:.85; }
  100% { transform:translateY(140px) translateX(-22px); opacity:0; }
}

/* 구름 흐름 — 좌→우 */
@keyframes amb-cloud-drift{
  0%   { transform:translateX(0); }
  100% { transform:translateX(140px); }
}

/* 호황 별빛 */
@keyframes amb-sparkle{
  0%,100% { opacity:.2; transform:scale(.8); }
  50%     { opacity:.9; transform:scale(1.4); }
}

/* 폭풍우/흐림 배경에서는 본문이 약간 어둡게 보이도록 페이지 텍스트 컨트라스트 강화 */
#ambient-layer[data-mood="crisis"] ~ .scroll .card,
#ambient-layer[data-mood="rainy"] ~ .scroll .card,
#ambient-layer[data-mood="cloudy"] ~ .scroll .card{
  box-shadow:0 1px 3px rgba(15,23,42,.06);
}
/* 매크로 타임머신 페이지 — 배경 앰비언트/그라데이션 숨김 (콘텐츠 집중) */
body[data-page="timemachine"] #ambient-layer { display:none !important; }
body[data-page="timemachine"] #weather-hud { display:none !important; }
/* 퀴즈도 동일 — 풀이 집중 화면에서 시장 무드 띠는 세로만 차지한다 (2026-08-08 모바일 피드백) */
body[data-page="quiz"] #weather-hud { display:none !important; }
/* 퀴즈 페이지 — 날씨 띠(fixed)를 숨겼으므로 그 자리 보정 패딩(52px)도 회수 */
body[data-page="quiz"] .scroll{padding-top:14px;}
/* 풀이 중 전면화(body.quiz-solving은 quizSkin.js가 #q-active 표시 상태로 동기화) —
   탑바를 숨겨 문제에 화면을 최대로 준다. 탑바가 사라지면 콘텐츠가 노치(안전영역)를
   침범하므로 그만큼 상단 패딩으로 보정한다. */
body.quiz-solving .topbar{display:none;}
body.quiz-solving .scroll{padding-top:calc(var(--st) + 8px);}
/* 헤더도 컴팩트하게: 시나리오 상세가 열리면 헤더 축소 */
body[data-page="timemachine"] #page-timemachine .sh .st { font-size:calc(20px * var(--fs,1)); letter-spacing:-.3px; }
body[data-page="timemachine"] #page-timemachine .sh .ss { font-size:calc(12px * var(--fs,1)); }
body[data-page="timemachine"].tm-scene-open #page-timemachine > .sh { display:none !important; }

/* ── Weather HUD — 현재 기상 + 해결 행동 ── */
/* 날씨 띠 — 상단바 바로 아래에 **붙어 있는** 전폭 띠 (2026-09-25).
   예전엔 fixed 로 상단바와 본문 사이에 둥둥 떠 있는 알림창 꼴이었다(사용자: "위치가 애매").
   ambient.js 가 .app 안 topbar 다음에 끼우므로 흐름 안의 보통 블록이면 된다. */
#weather-hud{
  position:relative; flex:none; width:100%;
  z-index:60; pointer-events:auto;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:0; border-bottom:0.5px solid var(--bd2);
  cursor:pointer;
  font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;
  transition:opacity .25s ease;
  overflow:hidden;
}
#weather-hud.amb-hidden{ display:none; }
#weather-hud[data-mood="crisis"]{
  background:rgba(254,242,242,.96);
  border-color:rgba(220,38,38,.35);
  box-shadow:0 4px 18px rgba(220,38,38,.18);
  animation:wh-pulse 2.4s ease-in-out infinite;
}
#weather-hud[data-mood="cloudy"]{
  background:rgba(241,245,249,.96);
  border-color:rgba(100,116,139,.30);
}
#weather-hud[data-mood="rainy"]{
  background:rgba(239,246,255,.96);
  border-color:rgba(37,99,235,.32);
}
#weather-hud[data-mood="boom"]{
  background:rgba(255,251,235,.96);
  border-color:rgba(184,146,58,.35);
}
@keyframes wh-pulse{
  0%,100% { box-shadow:0 4px 18px rgba(220,38,38,.18); }
  50%     { box-shadow:0 4px 24px rgba(220,38,38,.30); }
}
#weather-hud .wh-mini{ padding:8px 16px; }
#weather-hud .wh-row{ display:flex;align-items:center;gap:8px; }
#weather-hud .wh-ic{ font-size:calc(18px * var(--fs,1)); line-height:1; }
#weather-hud .wh-lb{ font-size:calc(12px * var(--fs,1));font-weight:500;color:var(--t); }
#weather-hud .wh-badge{
  margin-left:6px;background:var(--red);color:#fff;
  border-radius:12px;padding:1px 7px;font-size:calc(10px * var(--fs,1));font-weight:600;
  min-width:18px;text-align:center;
}
#weather-hud .wh-arr{
  margin-left:auto;color:var(--t3);font-size:calc(11px * var(--fs,1));
  transition:transform .25s ease;
}
#weather-hud.expanded .wh-arr{ transform:rotate(180deg); }
#weather-hud .wh-detail{
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .35s ease, opacity .25s ease;
  padding:0 13px;
}
#weather-hud.expanded .wh-detail{
  max-height:400px; opacity:1; padding:0 13px 11px;
}
#weather-hud .wh-section{
  border-top:0.5px solid var(--bd);
  padding-top:9px; margin-top:9px;
}
#weather-hud .wh-section-h{
  font-size:calc(10px * var(--fs,1));text-transform:uppercase;letter-spacing:.5px;
  color:var(--t3);font-weight:500;margin-bottom:6px;
}
#weather-hud .wh-th{
  font-size:calc(11px * var(--fs,1));color:var(--t2);line-height:1.6;
  padding:2px 0;
}
#weather-hud .wh-action{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;margin-top:5px;
  background:var(--bg2);
  border:0.5px solid var(--bd2);
  border-radius:8px;
  cursor:pointer;
  transition:background .15s, transform .15s;
}
#weather-hud .wh-action:hover{
  background:rgba(99,102,241,.06);
  transform:translateX(2px);
}
#weather-hud .wh-act-ico{ font-size:calc(12px * var(--fs,1)); }
#weather-hud .wh-act-lb{ font-size:calc(12px * var(--fs,1));color:var(--t);flex:1; }
#weather-hud .wh-act-go{ font-size:calc(10px * var(--fs,1));color:var(--purple);font-weight:500; }
#weather-hud .wh-foot{
  font-size:calc(10px * var(--fs,1));color:var(--t3);
  margin-top:8px;line-height:1.55;
  font-style:italic;
}

/* 콘텐츠가 ambient 위에 오도록 — z-index만 부여, position은 원본 유지 */
.scroll{position:relative;z-index:1;}
.topbar{position:relative;z-index:2;}
.bnav{z-index:100;}

/* ── Unveiled Hand (Oracle 등급 전용) ── */
.uh-card{
  border-radius:16px;padding:18px;margin:14px 0;
  border:0.5px solid var(--bd2);
  background:linear-gradient(135deg,#0F172A 0%,#1E1B2E 60%,#3D2F4A 100%);
  color:#E5E7EB;position:relative;overflow:hidden;
  box-shadow:0 8px 28px rgba(15,23,42,.18);
}
.uh-card::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 88% 18%,rgba(184,146,58,.18) 0%,transparent 38%);
}
.uh-locked{opacity:.92;}
.uh-lock-emoji{font-size:calc(32px * var(--fs,1));text-align:center;margin-bottom:6px;}
.uh-lock-title{font-family:var(--font-hd);font-size:calc(20px * var(--fs,1));text-align:center;letter-spacing:-.3px;}
.uh-lock-sub{font-size:calc(11px * var(--fs,1));color:#94A3B8;text-align:center;margin:6px 0 12px;font-weight:500;}
.uh-lock-bar{height:5px;background:rgba(255,255,255,.08);border-radius:4px;overflow:hidden;}
.uh-lock-fill{height:100%;background:linear-gradient(90deg,var(--acc),var(--acc2));transition:width .5s;}
.uh-lock-meta{font-size:calc(10px * var(--fs,1));color:#94A3B8;text-align:right;margin-top:5px;font-variant-numeric:tabular-nums;}

.uh-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:14px;position:relative;z-index:1;}
.uh-eyebrow{font-size:calc(11px * var(--fs,1));letter-spacing:1.4px;color:var(--acc2);font-weight:600;text-transform:uppercase;margin-bottom:3px;}
.uh-title{font-family:var(--font-hd);font-size:calc(22px * var(--fs,1));letter-spacing:-.3px;color:#fff;}
.uh-reveal-btn{
  background:var(--acc);color:#0F172A;border:none;border-radius:12px;
  padding:8px 14px;font-size:calc(12px * var(--fs,1));font-weight:600;cursor:pointer;flex-shrink:0;
  font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;
  transition:all .15s;white-space:nowrap;
}
.uh-reveal-btn:active{transform:scale(.97);}
.uh-reveal-btn:disabled{background:rgba(184,146,58,.4);cursor:default;}

.uh-body{position:relative;z-index:1;}
.uh-empty{font-size:calc(12px * var(--fs,1));color:#94A3B8;text-align:center;padding:18px 0;font-weight:500;}
.uh-loading{font-size:calc(12px * var(--fs,1));color:#CBD5E1;text-align:center;padding:24px 0;display:flex;flex-direction:column;align-items:center;gap:10px;}
.uh-loading-pulse{
  width:32px;height:32px;border-radius:50%;
  background:radial-gradient(circle,var(--acc) 0%,transparent 70%);
  animation:uhPulse 1.4s ease-in-out infinite;
}
@keyframes uhPulse{0%,100%{transform:scale(.8);opacity:.5;}50%{transform:scale(1.2);opacity:1;}}

.uh-row{margin-bottom:13px;padding-bottom:11px;border-bottom:0.5px solid rgba(255,255,255,.08);}
.uh-row:last-of-type{border-bottom:none;margin-bottom:6px;padding-bottom:0;}
.uh-row-label{font-size:calc(11px * var(--fs,1));letter-spacing:1.2px;color:var(--acc2);font-weight:600;margin-bottom:5px;}
.uh-row-text{font-size:calc(13px * var(--fs,1));color:#E5E7EB;line-height:1.65;font-weight:500;}

.uh-sentiment{display:flex;flex-direction:column;gap:5px;}
.uh-sent-bar{height:6px;background:rgba(255,255,255,.08);border-radius:4px;overflow:hidden;}
.uh-sent-fill{height:100%;border-radius:4px;transition:width .5s;}
.uh-greed .uh-sent-fill{background:linear-gradient(90deg,#FCD34D,#DC2626);}
.uh-fear  .uh-sent-fill{background:linear-gradient(90deg,#1E40AF,#6366F1);}
.uh-mid   .uh-sent-fill{background:linear-gradient(90deg,var(--acc),var(--acc2));}
.uh-sent-meta{font-size:calc(11px * var(--fs,1));color:#94A3B8;display:flex;align-items:center;gap:6px;}
.uh-sent-num{font-family:var(--font-hd);font-size:calc(18px * var(--fs,1));color:#fff;line-height:1;}

.uh-directive{
  background:rgba(184,146,58,.10);border:0.5px solid rgba(184,146,58,.28);
  border-radius:12px;padding:11px 13px;margin-top:6px;
}
.uh-directive-text{font-size:calc(13px * var(--fs,1));color:#FCD34D;line-height:1.55;font-weight:500;font-style:italic;}
.uh-source{font-size:calc(11px * var(--fs,1));color:#64748B;text-align:right;margin-top:8px;letter-spacing:.4px;text-transform:uppercase;}

/* ── Unveiled Hand: Causality Web + Black Swan (강화) ── */
.uh-sub{margin-top:14px;padding-top:12px;border-top:0.5px dashed rgba(255,255,255,.14);}
.uh-sub-h{font-size:calc(11px * var(--fs,1));letter-spacing:1.4px;color:var(--purple);font-weight:800;text-transform:uppercase;margin-bottom:10px;}
.uh-empty{font-size:calc(12px * var(--fs,1));color:#64748B;text-align:center;padding:10px 0;font-style:italic;}
/* Causality Web */
.uh-caus-row{background:rgba(255,255,255,.03);border:0.5px solid rgba(255,255,255,.08);border-radius:8px;padding:9px 11px;margin-bottom:7px;}
.uh-caus-pair{display:flex;align-items:center;gap:6px;font-size:calc(12px * var(--fs,1));color:#e2e8f0;font-weight:700;margin-bottom:5px;}
.uh-caus-ind{white-space:nowrap;}
.uh-caus-arrow{font-size:calc(14px * var(--fs,1));font-weight:800;}
.uh-caus-r{margin-left:auto;font-family:'DM Mono',monospace;font-size:calc(12px * var(--fs,1));font-weight:800;font-variant-numeric:tabular-nums;}
.uh-caus-bar{height:4px;background:rgba(255,255,255,.06);border-radius:4px;overflow:hidden;margin-bottom:5px;}
.uh-caus-fill{height:100%;transition:width .5s;}
.uh-caus-story{font-size:calc(11px * var(--fs,1));color:#94A3B8;line-height:1.5;font-weight:500;}
/* Black Swan */
.uh-bs-head{display:flex;align-items:center;gap:9px;background:rgba(0,0,0,.35);border:1.5px solid;border-radius:12px;padding:9px 12px;margin-bottom:6px;}
.uh-bs-led{width:12px;height:12px;border-radius:50%;flex-shrink:0;animation:uh-bs-pulse 1.2s ease-in-out infinite;}
@keyframes uh-bs-pulse{0%,100%{opacity:1;}50%{opacity:.4;}}
.uh-bs-name{font-size:calc(14px * var(--fs,1));font-weight:800;letter-spacing:1.4px;flex:1;}
.uh-bs-score{font-size:calc(11px * var(--fs,1));font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.4px;}
.uh-bs-hint{font-size:calc(11px * var(--fs,1));color:#94A3B8;margin-bottom:8px;font-weight:500;font-style:italic;}
.uh-bs-sigs{display:flex;flex-direction:column;gap:5px;}
.uh-bs-sig{display:flex;align-items:center;gap:8px;font-size:calc(11px * var(--fs,1));background:rgba(255,255,255,.03);border-left:2px solid rgba(255,255,255,.15);border-radius:0 6px 6px 0;padding:6px 9px;}
.uh-bs-sig-ic{font-size:calc(13px * var(--fs,1));flex-shrink:0;}
.uh-bs-sig-lb{font-family:'DM Mono',monospace;font-size:calc(11px * var(--fs,1));color:#cbd5e1;font-weight:700;min-width:110px;}
.uh-bs-sig-msg{font-size:calc(11px * var(--fs,1));color:#94A3B8;font-weight:500;flex:1;}

/* ── Macro-Relief 토스트 ── */
#amb-relief-toast{
  position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(20px);
  background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:0.5px solid var(--bd2);border-radius:24px;
  padding:11px 18px;display:flex;align-items:center;gap:10px;
  box-shadow:0 6px 24px rgba(15,23,42,.12);
  opacity:0;pointer-events:none;
  transition:opacity .35s ease,transform .35s ease;
  z-index:99;max-width:88vw;
}
#amb-relief-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.amb-rt-ico{font-size:calc(22px * var(--fs,1));}
.amb-rt-msg{font-size:calc(13px * var(--fs,1));font-weight:500;color:var(--t);}

/* ── 캐릭터 슬롯 ── */
.char-wrap{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;background:rgba(255,255,255,.7);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:0.5px solid var(--bd);border-radius:16px;
  margin-bottom:10px;box-shadow:var(--shadow-sm);
}
/* 아바타는 브랜드 마스코트 '오라'(mascot.js) 를 쓴다 — character.js 주석 참고.
   팀(기술/수호/머니/생존) 구분은 마스코트를 물들이는 대신 뒤에 깔리는 후광 링으로 표시.
   --char-team / --char-team-accent 는 character.js 가 인라인으로 주입한다. */
.char-orb{
  position:relative;width:54px;height:54px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:transform .3s ease;
}
/* 오라 SVG(viewBox 120x120)에서 구슬 중심은 (60,55)·지름 63% — 받침대까지 감싸도록
   링 중심을 48%, 지름을 92%로 잡는다. 링이 이보다 작으면 구슬 테두리와 붙어 이중선처럼 보인다.
   구슬이 불투명해 안쪽 후광은 가려지므로, 글로우는 구슬 바깥(55%~96%)만 칠하는 도넛으로 만든다. */
.char-orb::before{
  content:'';position:absolute;left:50%;top:48%;
  width:92%;height:92%;transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle, transparent 55%, color-mix(in srgb, var(--char-team-accent,#a5b4fc) 80%, transparent) 74%, transparent 96%);
  border:2px solid color-mix(in srgb, var(--char-team,#6366F1) 65%, transparent);
}
.char-orb svg{position:relative;z-index:1;width:100%;height:100%;display:block;}
.char-state-wary{ animation:char-look 3s ease-in-out infinite; }
.char-state-worried{ animation:char-shake 1.6s ease-in-out infinite; }
.char-state-defensive{ transform:scale(.95); }
.char-state-happy{ animation:char-bounce 1.2s ease-in-out infinite; }
.char-state-playing{ animation:char-bounce 0.7s ease-in-out infinite; }
@keyframes char-look{
  0%,100% { transform:rotate(0); }
  25%     { transform:rotate(-3deg); }
  75%     { transform:rotate(3deg); }
}
@keyframes char-shake{
  0%,100% { transform:translateX(0); }
  25%     { transform:translateX(-1.5px) rotate(-2deg); }
  75%     { transform:translateX(1.5px) rotate(2deg); }
}
@keyframes char-bounce{
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-3px); }
}
.char-meta{flex:1;min-width:0;}
.char-team{font-size:calc(11px * var(--fs,1));font-weight:500;text-transform:uppercase;letter-spacing:.5px;}
.char-state-label{font-size:calc(13px * var(--fs,1));font-weight:500;color:var(--t);margin-top:1px;}

/* ── 퀘스트 알림 카드 (홈 상단) ── */
.quest-alert{
  position:relative;display:flex;align-items:center;gap:12px;
  padding:14px 16px;border-radius:16px;margin-bottom:12px;cursor:pointer;
  transition:transform .15s,box-shadow .2s;overflow:hidden;
  font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;
}
.quest-alert:active{transform:scale(.99);}
.quest-alert-crisis{
  background:linear-gradient(135deg,#FEF2F2,#FFFFFF);
  border:1.5px solid var(--red);
  box-shadow:0 4px 14px rgba(220,38,38,.12);
}
.quest-alert-boom{
  background:linear-gradient(135deg,#FFFBEB,#FFFFFF);
  border:1.5px solid var(--acc);
  box-shadow:0 4px 14px rgba(184,146,58,.15);
}
.qa-pulse{
  position:absolute;top:-50%;right:-20%;width:80%;height:200%;
  background:radial-gradient(circle,rgba(220,38,38,.12),transparent 60%);
  animation:qa-pulse 2.5s ease-in-out infinite;pointer-events:none;
}
@keyframes qa-pulse{
  0%,100% { opacity:.4; transform:scale(1); }
  50%     { opacity:.8; transform:scale(1.05); }
}
/* 다크 테마: 밝은 분홍/크림 그라디언트 위에 밝은 글자(var(--t))가 올라가 제목이 안 보였다 (2026-09-25 사용자 제보).
   어두운 붉은/호박 톤으로 바꾸고 글자는 그대로 밝게 — 위험/기회 색 의미는 테두리·CTA 색으로 유지한다. */
:root[data-theme="dark"] .quest-alert-crisis{background:rgba(220,38,38,.16);border-color:rgba(248,113,113,.5);box-shadow:none;}
:root[data-theme="dark"] .quest-alert-boom{background:rgba(184,146,58,.16);border-color:rgba(251,191,36,.5);box-shadow:none;}
:root[data-theme="dark"] .quest-alert .qa-title{color:var(--t);font-weight:700;}
:root[data-theme="dark"] .quest-alert .qa-sub{color:var(--t2);}
:root[data-theme="dark"] .quest-alert-crisis .qa-cta{color:#FCA5A5;font-weight:700;}
:root[data-theme="dark"] .quest-alert-boom .qa-cta{color:#FCD34D;font-weight:700;}
:root[data-theme="dark"] .quest-alert .qa-pulse{opacity:.35;}
.qa-icon{font-size:calc(28px * var(--fs,1));flex-shrink:0;z-index:1;}
.qa-body{flex:1;z-index:1;min-width:0;}
.qa-title{font-size:calc(14px * var(--fs,1));font-weight:500;color:var(--t);}
.qa-sub{font-size:calc(11px * var(--fs,1));color:var(--t2);margin-top:2px;font-weight:500;}
.qa-cta{font-size:calc(12px * var(--fs,1));color:var(--red);font-weight:500;flex-shrink:0;z-index:1;}
.quest-alert-boom .qa-cta{color:var(--acc-text);}

/* ── 인벤토리 뱃지 ── */
#quest-inventory{display:flex;gap:6px;align-items:center;}
.qi-item{
  display:flex;align-items:center;gap:3px;padding:3px 8px;
  background:var(--bg3);border:0.5px solid var(--bd2);border-radius:16px;
  font-size:calc(11px * var(--fs,1));
}
.qi-ico{font-size:calc(13px * var(--fs,1));}
.qi-n{font-weight:500;color:var(--t);font-variant-numeric:tabular-nums;}

/* ── 퀘스트 퀴즈 모달 ── */
#quest-modal{
  display:none;position:fixed;inset:0;background:rgba(15,23,42,.6);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  z-index:9998;align-items:center;justify-content:center;padding:18px;
}
#quest-modal.active{display:flex;animation:overlayFade .26s ease;}
@keyframes overlayFade{from{opacity:0;backdrop-filter:blur(0);}to{opacity:1;backdrop-filter:blur(4px);}}
.qm-card{
  background:var(--bg2);border:2px solid var(--bd2);border-radius:24px;padding:24px 22px;
  width:100%;max-width:400px;max-height:88vh;overflow-y:auto;
  box-shadow:0 18px 56px rgba(15,23,42,.32);
  animation:arcade-pop .42s var(--ease-arcade-step);   /* 34차 아케이드 — 세기는 --arcade */
}
.qm-head{display:flex;align-items:center;gap:11px;margin-bottom:14px;}
.qm-head-ico{font-size:calc(28px * var(--fs,1));filter:drop-shadow(0 2px 4px rgba(226,124,31,.25));}
.qm-head-title{font-family:var(--font-hd);font-size:calc(20px * var(--fs,1));font-weight:700;}
.qm-progress{margin-bottom:14px;}
.qm-progress-bar{height:8px;background:var(--bg3);border-radius:4px;overflow:hidden;margin-bottom:4px;border:1px solid var(--bd);}
.qm-progress-fill{height:100%;background:linear-gradient(90deg,var(--red),var(--acc));border-radius:4px;transition:width .4s;box-shadow:0 0 8px rgba(220,38,38,.4);}
.qm-progress-text{font-size:calc(11px * var(--fs,1));color:var(--acc-text);text-align:right;font-weight:800;font-variant-numeric:tabular-nums;}
.qm-cat{font-size:calc(11px * var(--fs,1));color:var(--acc-text);font-weight:800;text-transform:uppercase;letter-spacing:.7px;margin-bottom:6px;}
.qm-q{font-size:calc(16px * var(--fs,1));font-weight:700;line-height:1.5;margin-bottom:10px;}
.qm-case{font-size:calc(13px * var(--fs,1));color:var(--t2);background:var(--bg3);border-left:3px solid var(--acc);border-radius:0 10px 10px 0;padding:10px 13px;margin-bottom:12px;line-height:1.6;font-weight:500;}
.qm-opts{display:flex;flex-direction:column;gap:8px;}
.qm-opt{
  background:var(--bg2);border:2px solid var(--bd);border-radius:12px;
  padding:13px 14px;text-align:left;font-size:calc(14px * var(--fs,1));font-weight:600;cursor:pointer;
  font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;color:var(--t);
  box-shadow:0 3px 0 var(--bd2);
  transition:transform .12s ease,box-shadow .12s ease,border-color .15s ease;
}
.qm-opt:hover:not(:disabled){border-color:var(--acc);}
.qm-opt:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 var(--bd2);}
.qm-opt:disabled{cursor:not-allowed;opacity:.7;}
.qm-opt-correct{background:rgba(21,128,61,.10)!important;border-color:var(--green)!important;color:var(--green)!important;box-shadow:0 3px 0 var(--btn-shadow-green)!important;font-weight:800!important;}
.qm-opt-wrong  {background:rgba(220,38,38,.08)!important;border-color:var(--red)!important;color:var(--red)!important;box-shadow:0 3px 0 var(--btn-shadow-red)!important;font-weight:800!important;}
.qm-exp{
  background:var(--bg3);border-radius:12px;padding:12px 14px;margin-top:11px;
  font-size:calc(12px * var(--fs,1));color:var(--t2);line-height:1.6;font-weight:500;
}
.qm-exp strong{color:var(--t);font-weight:500;}
.qm-next{
  width:100%;background:var(--acc);color:var(--on-acc);border:none;border-radius:12px;
  padding:12px;font-size:calc(13px * var(--fs,1));font-weight:500;cursor:pointer;
  font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;margin-top:10px;
}
.qm-foot{margin-top:11px;text-align:center;}
.qm-skip{background:transparent;border:none;color:var(--t3);font-size:calc(11px * var(--fs,1));cursor:pointer;font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;text-decoration:underline;}
.qm-result{text-align:center;padding:14px 0;}
.qm-result-emoji{font-size:calc(54px * var(--fs,1));margin-bottom:10px;}
.qm-result-pass .qm-result-emoji{animation:char-bounce 1.2s ease-in-out infinite;}
.qm-result-title{font-family:var(--font-hd);font-size:calc(22px * var(--fs,1));margin-bottom:5px;}
.qm-result-sub{font-size:calc(12px * var(--fs,1));color:var(--t2);margin-bottom:11px;font-weight:500;line-height:1.6;}
.qm-result-reward{
  display:inline-block;padding:7px 14px;background:var(--bg3);
  border-radius:24px;font-size:calc(12px * var(--fs,1));color:var(--acc-text);font-weight:500;margin-bottom:16px;
}
.qm-result-btn{
  width:100%;background:var(--acc);color:var(--on-acc);border:none;border-radius:12px;
  padding:12px;font-size:calc(13px * var(--fs,1));font-weight:500;cursor:pointer;font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;
}

/* ── 늦게 그려지는 카드의 바닥 (2026-09-23) ──
   #macro-live 는 HTML 에서 빈 <div> 로 시작해 macroLive.js 의 DOMContentLoaded 렌더에서 채워진다
   (실측: 참고치 상태 323px@390px · 355px@1024px, 실데이터(해설 3줄) 상태는 더 높다).
   빈 상태가 그려지는 순간이 있으면 아래 카드 전체가 그 높이만큼 밀리므로 바닥을 깔아 둔다.
   값은 실측 최소의 60% 남짓 — 어떤 상태·폭에서도 내용보다 커져 빈 공간을 남기지 않게 보수적으로.
   (부팅 화면 최소 3초 고정을 없애며 넣은 안전망 · app.html 부팅 스크립트 주석 참조) */
#page-home #macro-live{min-height:calc(200px * var(--fs,1));box-sizing:border-box;}

/* ── 매크로 라이브 카드 글래스모피즘 강화 ── */
.macro-live-card{
  position:relative;
  background:rgba(255,255,255,.78)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
  border:0.5px solid rgba(255,255,255,.5)!important;
  box-shadow:0 4px 20px rgba(15,23,42,.06)!important;
}
/* 폰(터치 기기)에서는 뒷배경 흐림을 끈다 (2026-09-24).
   backdrop-filter 는 스크롤 프레임마다 뒤의 배경(움직이는 날씨 레이어)을 다시 흐려야 해서
   안드로이드에서 카드가 한 박자 늦게 따라오는 "떠다님"의 직접 원인이다(사용자 제보).
   대신 배경을 거의 불투명하게 해 유리 느낌만 남긴다. 데스크톱은 그대로. */
@media (pointer: coarse){
  .macro-live-card{
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    background:rgba(255,255,255,.94)!important;
  }
  :root[data-theme="dark"] .macro-live-card{background:rgba(26,31,38,.96)!important;}
  /* 하단 탭바도 같은 이유 — 배경이 이미 98% 불투명이라 흐림은 거의 안 보이면서 비용만 든다 */
  .bnav{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
  #weather-hud{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
}

/* ── Knowledge Map ── */
.km-preview{
  background:var(--bg2);border:0.5px solid var(--bd);border-radius:16px;
  padding:14px 16px 12px;margin-bottom:12px;cursor:pointer;
  transition:all .2s;box-shadow:var(--shadow-sm);
  position:relative;overflow:hidden;
}
.km-preview:active{transform:scale(.99);}
.km-preview::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--purple),var(--sec-tech),var(--acc));
}
.km-preview-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px;}
.km-preview-title{font-family:var(--font-hd);font-size:calc(18px * var(--fs,1));letter-spacing:-.3px;}
.km-preview-stats{font-size:calc(18px * var(--fs,1));font-weight:500;color:var(--purple);font-variant-numeric:tabular-nums;}
.km-preview-svg-wrap{height:120px;margin:4px -4px 6px;}
.km-preview-svg-wrap svg{width:100%;height:100%;}
.km-preview-cta{font-size:calc(11px * var(--fs,1));color:var(--t3);text-align:right;}

.km-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:12px;}
.km-stat{background:var(--bg2);border:0.5px solid var(--bd);border-radius:16px;padding:12px 10px;text-align:center;box-shadow:var(--shadow-sm);}
.km-stat-n{font-size:calc(24px * var(--fs,1));font-weight:700;color:var(--purple);font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.km-stat-l{font-size:calc(10px * var(--fs,1));color:var(--t3);margin-top:2px;font-weight:500;letter-spacing:.3px;}
.km-svg-wrap{
  background:linear-gradient(180deg,#FFFFFF,#FAFBFC);
  border:0.5px solid var(--bd);border-radius:16px;
  padding:18px 14px;margin-bottom:10px;aspect-ratio:1.05;
  box-shadow:var(--shadow-md);
  position:relative;
}
.km-svg-wrap::before{
  content:'';position:absolute;inset:8px;border-radius:16px;
  background:radial-gradient(circle at center,rgba(99,102,241,.04),transparent 70%);
  pointer-events:none;
}
.km-svg-wrap svg{width:100%;height:100%;display:block;}
.km-node{cursor:pointer;transition:all .2s;}
.km-node:hover .km-node-circle{filter:brightness(1.08);}
.km-node-circle{transition:all .3s;}
.km-node-label{
  fill:var(--t);text-anchor:middle;dominant-baseline:central;
  font-weight:600;font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;
  pointer-events:none;letter-spacing:-.02em;
}
.km-node.locked .km-node-label{fill:var(--t3);font-weight:400;}
.km-node.mastered .km-node-circle{filter:drop-shadow(0 0 2px currentColor);}
.km-edge{stroke-width:.45;fill:none;opacity:0;transition:opacity .5s,stroke-width .3s;}
.km-edge.active{opacity:.65;stroke-width:.7;}
.km-edge.active.glow{stroke-width:1.2;opacity:.9;filter:drop-shadow(0 0 1.2px currentColor);}
.km-detail{
  background:var(--bg2);border:0.5px solid var(--bd);border-radius:16px;
  padding:14px 16px;margin-bottom:10px;animation:fu .25s ease;
}
.km-detail-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.km-detail-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:calc(16px * var(--fs,1));flex-shrink:0;}
.km-detail-title{font-size:calc(15px * var(--fs,1));font-weight:500;}
.km-detail-cat{font-size:calc(10px * var(--fs,1));color:var(--t3);text-transform:uppercase;letter-spacing:.6px;}
.km-detail-body{font-size:calc(12px * var(--fs,1));color:var(--t2);line-height:1.65;font-weight:500;margin-bottom:10px;}
.km-detail-progress{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.km-detail-bar{flex:1;height:6px;background:var(--bg3);border-radius:4px;overflow:hidden;}
.km-detail-bar-fill{height:100%;background:linear-gradient(90deg,var(--purple),var(--acc));border-radius:4px;transition:width .4s;}
.km-detail-lvl{font-size:calc(11px * var(--fs,1));color:var(--purple);font-weight:500;}
.km-study-btn{
  width:100%;background:var(--purple);color:#fff;border:none;
  border-radius:12px;padding:11px;font-size:calc(13px * var(--fs,1));font-weight:500;
  cursor:pointer;font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;
}
.km-study-btn:disabled{background:var(--bg4);color:var(--t3);cursor:not-allowed;}
.km-legend{display:flex;justify-content:center;gap:16px;font-size:calc(11px * var(--fs,1));color:var(--t2);font-weight:500;}
.km-legend-item{display:flex;align-items:center;gap:5px;}
.km-legend-dot{width:9px;height:9px;border-radius:50%;display:inline-block;}

/* Grid 뷰 (전체 지식 맵) */
.km-grid{margin-bottom:14px;}
.km-grid-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.km-grid-title{flex:1;font-family:var(--font-hd);font-size:calc(18px * var(--fs,1));}
.km-back-btn{
  background:transparent;border:0.5px solid var(--bd2);border-radius:8px;
  padding:6px 11px;font-size:calc(11px * var(--fs,1));color:var(--t2);cursor:pointer;
  font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;
}
.km-back-btn:hover{border-color:var(--purple);color:var(--purple);}
.km-back-btn.alt{margin-left:6px;}
.km-grid-list{display:flex;flex-direction:column;gap:7px;}
.km-grid-card{
  display:flex;align-items:center;gap:12px;padding:13px 15px;
  background:var(--bg2);border:1.5px solid var(--bd);border-radius:16px;
  cursor:pointer;transition:transform .15s,box-shadow .2s,border-color .2s;
  box-shadow:var(--shadow-sm);
}
.km-grid-card:hover{box-shadow:0 4px 14px rgba(15,23,42,.08);}
.km-grid-card:active{transform:scale(.99);}
.km-grid-icon{
  width:44px;height:44px;border-radius:12px;display:flex;align-items:center;
  justify-content:center;font-size:calc(22px * var(--fs,1));flex-shrink:0;
}
.km-grid-info{flex:1;min-width:0;}
.km-grid-label{font-size:calc(14px * var(--fs,1));font-weight:600;letter-spacing:-.01em;}
.km-grid-hub{font-size:calc(11px * var(--fs,1));color:var(--t3);text-transform:uppercase;letter-spacing:.7px;margin:2px 0 5px;font-weight:500;}
.km-grid-dots{display:flex;gap:4px;}
.km-grid-dot{width:11px;height:11px;border-radius:50%;display:inline-block;transition:background .3s;}
.km-grid-lv{font-size:calc(18px * var(--fs,1));font-weight:700;font-variant-numeric:tabular-nums;flex-shrink:0;letter-spacing:-.02em;}

/* Detail 뷰 (5 레벨 학습) */
.km-back-row{display:flex;justify-content:flex-start;margin-bottom:10px;}
.km-detail-lvl-big{font-size:calc(22px * var(--fs,1));font-weight:500;font-variant-numeric:tabular-nums;flex-shrink:0;}
.km-lv-list{display:flex;flex-direction:column;gap:6px;margin-top:12px;}
.km-lv-row{
  display:grid;grid-template-columns:30px 1fr auto auto;align-items:center;gap:10px;
  padding:10px 12px;background:var(--bg2);border:0.5px solid var(--bd);border-radius:12px;
}
.km-lv-row.pass{border-color:var(--green);background:rgba(22,163,74,.06);}
.km-lv-row.progress{border-color:var(--acc);}
.km-lv-row.locked{opacity:.65;}
.km-lv-num{
  width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:calc(13px * var(--fs,1));font-weight:500;flex-shrink:0;
}
.km-lv-info{min-width:0;}
.km-lv-title{font-size:calc(13px * var(--fs,1));font-weight:500;}
.km-lv-meta{font-size:calc(10px * var(--fs,1));color:var(--t3);font-weight:500;margin-top:1px;}
.km-lv-status{font-size:calc(10px * var(--fs,1));color:var(--t2);text-transform:uppercase;letter-spacing:.5px;}
.km-lv-row.pass .km-lv-status{color:var(--green);}
.km-lv-row.progress .km-lv-status{color:var(--acc-text);}
.km-lv-btn{
  background:var(--purple);color:#fff;border:none;border-radius:12px;
  padding:8px 13px;font-size:calc(11px * var(--fs,1));font-weight:600;cursor:pointer;
  font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;flex-shrink:0;
  transition:transform .12s,box-shadow .2s;
  letter-spacing:-.01em;
}
.km-lv-btn:active{transform:scale(.96);}
/* 인증 퀴즈 활성 강조 */
.km-lv-btn.cert{
  background:linear-gradient(135deg,var(--acc),var(--acc2));
  box-shadow:0 3px 10px rgba(184,146,58,.35);
  animation:cert-pulse 1.8s ease-in-out infinite;
}
@keyframes cert-pulse{
  0%,100% { box-shadow:0 3px 10px rgba(184,146,58,.25); }
  50%     { box-shadow:0 4px 14px rgba(184,146,58,.5); }
}
.km-lv-btn.alt{background:transparent;color:var(--green);border:1px solid var(--green);}
.km-lv-row.pass .km-lv-btn{background:transparent;color:var(--green);border:1px solid var(--green);}
.km-lv-row.locked .km-lv-btn{background:var(--bg4);color:var(--t3);}
.km-lv-row.ready{border-color:var(--acc);background:rgba(184,146,58,.05);box-shadow:0 0 0 0.5px var(--acc) inset;}

/* 인증 퀴즈 모달 — quest-modal 스타일 재사용 */
.cert-modal{
  display:none;position:fixed;inset:0;background:rgba(15,23,42,.6);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  z-index:9998;align-items:center;justify-content:center;padding:18px;
}
.cert-modal.active{display:flex;}
.cert-card{
  background:var(--bg2);border-radius:24px;padding:22px 20px;
  width:100%;max-width:400px;max-height:88vh;overflow-y:auto;
  box-shadow:0 14px 48px rgba(15,23,42,.25);
  animation:fu .25s ease;border-top:3px solid var(--acc);
}
.cert-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.cert-head-ico{font-size:calc(22px * var(--fs,1));}
.cert-head-title{font-family:var(--font-hd);font-size:calc(18px * var(--fs,1));}
.km-tip{
  margin-top:12px;padding:10px 13px;background:var(--bg3);border-radius:12px;
  font-size:calc(11px * var(--fs,1));color:var(--t2);font-weight:500;line-height:1.55;
}

/* 모드 안내 문구 */
#km-mode-hint{font-size:calc(10px * var(--fs,1));color:var(--t3);text-align:center;margin-top:6px;font-weight:500;}

/* 엣지 ready (인증 가능) 시각 */
.km-edge.ready{ opacity:.55; stroke-width:1; stroke-dasharray:1.5 1.5; animation:edge-dash 2s linear infinite; }
@keyframes edge-dash{ to { stroke-dashoffset:-6; } }
.km-edge-marker{ animation:edge-marker-pulse 1.4s ease-in-out infinite; cursor:pointer; }
@keyframes edge-marker-pulse{
  0%,100% { r:1.4; opacity:.7; }
  50%     { r:2.2; opacity:1;  }
}

/* ── Timemachine ── */
#tm-list{display:flex;flex-direction:column;gap:8px;}
.tm-card{
  display:flex;align-items:center;gap:12px;padding:13px 15px;
  background:var(--bg2);border:1px solid var(--bd);border-radius:16px;
  cursor:pointer;transition:transform .15s,box-shadow .2s;box-shadow:var(--shadow-sm);
}
.tm-card:active{transform:scale(.99);}
.tm-card.done{border-color:rgba(21,128,61,.4);background:rgba(21,128,61,.05);}
.tm-card.locked{opacity:.55;background:var(--bg3);cursor:pointer;}
.tm-card.locked .tm-card-title,.tm-card.locked .tm-card-sub{color:var(--t3);}
.tm-card-icon{font-size:calc(28px * var(--fs,1));flex-shrink:0;width:44px;text-align:center;}
.tm-card-info{flex:1;min-width:0;}
.tm-card-title{font-size:calc(14px * var(--fs,1));font-weight:700;letter-spacing:-.01em;}
.tm-card-sub{font-family:var(--font-hd);font-size:calc(13px * var(--fs,1));color:var(--acc-text);font-style:italic;margin-top:1px;letter-spacing:-.2px;}
.tm-card-meta{font-size:calc(10px * var(--fs,1));color:var(--t3);margin-top:3px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;}
.tm-card-status{flex-shrink:0;text-align:right;}
.tm-card-score{font-size:calc(14px * var(--fs,1));font-weight:800;color:var(--green);}
.tm-card-done{font-size:calc(18px * var(--fs,1));}
.tm-card-arr{font-size:calc(18px * var(--fs,1));color:var(--t3);}
.tm-card-lock{font-size:calc(10px * var(--fs,1));color:var(--t3);font-weight:700;text-transform:uppercase;letter-spacing:.5px;}
.tm-section-title{
  font-size:calc(11px * var(--fs,1));font-weight:800;color:var(--acc-text);
  text-transform:uppercase;letter-spacing:.7px;
  margin:14px 0 8px;
}
.tm-section-title:first-child{margin-top:4px;}
.tm-locked-tag{
  display:inline-block;background:var(--bg3);color:var(--t3);
  border:1px solid var(--bd);border-radius:8px;padding:1px 7px;
  font-size:calc(11px * var(--fs,1));font-weight:700;margin-left:6px;letter-spacing:.3px;
}
.tm-scene-sub{font-family:var(--font-hd);font-size:calc(15px * var(--fs,1));color:var(--acc-text);font-style:italic;margin-top:2px;letter-spacing:-.2px;}
.tm-scene-quest{
  background:linear-gradient(180deg,rgba(226,124,31,.10),rgba(226,124,31,.04));
  border:1.5px solid var(--acc);border-radius:12px;
  padding:11px 13px;margin-bottom:12px;
  font-size:calc(13px * var(--fs,1));font-weight:700;color:var(--t);line-height:1.55;
  box-shadow:0 2px 0 var(--btn-shadow-acc);
}

.tm-scene{margin-top:12px;}
.tm-scene-head{display:flex;align-items:center;gap:14px;margin-bottom:14px;}
.tm-scene-icon{font-size:calc(42px * var(--fs,1));flex-shrink:0;}
.tm-scene-tag{font-size:calc(10px * var(--fs,1));color:var(--t3);text-transform:uppercase;letter-spacing:.7px;font-weight:500;}
.tm-scene-title{font-family:var(--font-hd);font-size:calc(22px * var(--fs,1));letter-spacing:-.3px;line-height:1.2;}
.tm-scene-ctx{
  background:var(--bg2);border:0.5px solid var(--bd);border-radius:12px;
  padding:13px 15px;font-size:calc(13px * var(--fs,1));color:var(--t2);line-height:1.65;font-weight:500;
  margin-bottom:14px;
}
.tm-section-h{font-size:calc(10px * var(--fs,1));color:var(--t3);text-transform:uppercase;letter-spacing:.7px;font-weight:500;margin-bottom:7px;}
.tm-news{margin-bottom:14px;}
.tm-news-item{
  background:rgba(15,23,42,.04);border-left:2px solid var(--t3);
  padding:8px 11px;font-size:calc(12px * var(--fs,1));line-height:1.55;color:var(--t2);
  border-radius:0 8px 8px 0;margin-bottom:5px;font-style:italic;
}
.tm-data{
  background:var(--bg2);border:0.5px solid var(--bd);border-radius:12px;
  padding:11px 14px;margin-bottom:16px;
}
.tm-data-row{display:flex;justify-content:space-between;padding:5px 0;font-size:calc(12px * var(--fs,1));border-bottom:0.5px solid var(--bd);}
.tm-data-row:last-child{border-bottom:none;}
.tm-data-k{color:var(--t2);font-weight:500;}
.tm-data-v{font-weight:600;color:var(--t);font-variant-numeric:tabular-nums;}
.tm-q{margin-bottom:14px;}
.tm-q-text{font-size:calc(14px * var(--fs,1));font-weight:600;line-height:1.5;margin-bottom:10px;}
.tm-opts{display:flex;flex-direction:column;gap:7px;}
.tm-opt{
  background:var(--bg2);border:1px solid var(--bd2);border-radius:12px;
  padding:11px 13px;text-align:left;font-size:calc(13px * var(--fs,1));cursor:pointer;
  font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;color:var(--t);transition:all .15s;
}
.tm-opt:hover:not(:disabled){border-color:var(--purple);}
.tm-opt:disabled{cursor:not-allowed;}
.tm-opt-best{background:rgba(76,175,125,.10);border-color:var(--green);color:var(--green);}
.tm-opt-ok{background:rgba(184,146,58,.08);border-color:var(--acc);color:var(--acc-text);}
.tm-opt-bad{background:rgba(220,38,38,.08);border-color:var(--red);color:var(--red);}
/* ── 연속 결정 흐름 (25차 타임머신 개편) ── */
/* 진행 바 — "몇 번째 시점인가 + 지금 내 자금이 얼마인가"를 항상 띄운다.
   자금이 눈앞에서 변해야 "결과를 산다"는 감각이 생긴다. */
.tm-run-bar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--bg2);border:1px solid var(--bd);border-radius:12px;
  padding:9px 12px;margin-bottom:12px;
}
.tm-run-steps{display:flex;align-items:center;gap:5px;}
.tm-run-dot{width:7px;height:7px;border-radius:50%;background:var(--bd2);transition:all .3s ease;}
.tm-run-dot.done{background:var(--green);}
.tm-run-dot.now{background:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 22%,transparent);}
.tm-run-label{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:700;margin-left:5px;}
.tm-run-cash{display:flex;align-items:baseline;gap:6px;}
.tm-run-cash-n{font-family:'DM Mono',monospace;font-size:calc(14px * var(--fs,1));font-weight:500;color:var(--t);}
.tm-run-cash-d{font-family:'DM Mono',monospace;font-size:calc(11px * var(--fs,1));font-weight:500;}
.tm-run-cash-d.up,.tm-data-v.up,.tm-result-ret.up,.tm-result-bench .up{color:var(--up-text);}
.tm-run-cash-d.down,.tm-data-v.down,.tm-result-ret.down,.tm-result-bench .down{color:var(--down-text);}
/* 최종 결과 — 벤치마크 대비가 핵심. "그냥 들고 있기"보다 나았나가 이 게임의 점수다 */
.tm-result-hero{
  text-align:center;padding:20px 16px;border-radius:16px;margin-bottom:14px;
  background:linear-gradient(150deg,color-mix(in srgb,var(--acc) 10%,var(--bg2)),var(--bg2) 70%);
  border:1.5px solid color-mix(in srgb,var(--acc) 34%,transparent);
}
.tm-result-tier{font-size:calc(13px * var(--fs,1));font-weight:800;color:var(--acc-text);letter-spacing:.4px;}
.tm-result-cash{font-family:'DM Mono',monospace;font-size:calc(30px * var(--fs,1));font-weight:500;color:var(--t);margin-top:6px;line-height:1.1;}
.tm-result-ret{font-family:'DM Mono',monospace;font-size:calc(16px * var(--fs,1));font-weight:500;margin-top:2px;}
.tm-result-bench{font-size:calc(12px * var(--fs,1));color:var(--t3);margin-top:9px;line-height:1.6;font-weight:500;}
.tm-feedback{
  background:linear-gradient(135deg,var(--bg2),var(--bg3));
  border:0.5px solid var(--bd);border-radius:16px;padding:14px 16px;margin-top:14px;
  animation:fu .25s ease;
}
.tm-feedback-tier{font-size:calc(14px * var(--fs,1));font-weight:600;margin-bottom:6px;}
.tm-feedback-exp{font-size:calc(12px * var(--fs,1));color:var(--t2);line-height:1.6;font-weight:500;margin-bottom:11px;}
.tm-feedback-actions{display:flex;gap:7px;}

/* ── Oracle ── */
/* 등급 카드 */
.oracle-tier-card{border:1.5px solid;border-radius:16px;padding:13px 14px;margin-bottom:10px;box-shadow:var(--shadow-sm);}
.oracle-tier-row{display:flex;align-items:center;gap:13px;}
.oracle-tier-emoji{font-size:calc(38px * var(--fs,1));flex-shrink:0;line-height:1;filter:drop-shadow(0 2px 8px rgba(0,0,0,.1));}
.oracle-tier-info{flex:1;min-width:0;}
.oracle-tier-name{font-family:var(--font-hd);font-size:calc(17px * var(--fs,1));font-weight:700;letter-spacing:-.3px;margin-bottom:2px;}
.oracle-tier-sub{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:600;margin-bottom:6px;}
.oracle-tier-bar{height:6px;background:var(--bg3);border-radius:4px;overflow:hidden;}
.oracle-tier-fill{height:100%;border-radius:4px;transition:width .5s ease;}

/* 친구 비교 버튼 */
.oracle-cmp-btn{background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;border:none;border-radius:8px;padding:6px 9px;min-height:24px;font-size:calc(11px * var(--fs,1));font-weight:800;cursor:pointer;font-family:inherit;margin-left:8px;letter-spacing:.2px;box-shadow:0 2px 6px rgba(124,58,237,.3);vertical-align:middle;}
.oracle-cmp-btn:active{transform:translateY(1px);}

/* 친구 리그 미니뷰 */
.oracle-league-mini{background:var(--bg2);border:1.5px solid var(--bd);border-radius:12px;padding:10px;margin-bottom:6px;display:flex;flex-direction:column;gap:5px;}
.oracle-league-row{display:flex;align-items:center;gap:9px;background:var(--bg);border:1px solid var(--bd);border-radius:8px;padding:7px 10px;}
.oracle-league-row.me{background:linear-gradient(135deg,rgba(255,244,214,.45),rgba(255,228,168,.35));border-color:var(--acc);}
.oracle-league-medal{font-size:calc(16px * var(--fs,1));width:22px;text-align:center;flex-shrink:0;}
.oracle-league-nick{flex:1;font-size:calc(12px * var(--fs,1));font-weight:800;color:var(--t);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.oracle-league-tag{display:inline-block;font-size:calc(10px * var(--fs,1));font-weight:800;background:var(--acc);color:var(--on-acc);padding:1px 4px;border-radius:4px;margin-left:3px;}
.oracle-league-vals{display:flex;gap:5px;flex-shrink:0;align-items:center;}
.oracle-league-acc{font-size:calc(12px * var(--fs,1));font-weight:800;color:var(--green);font-variant-numeric:tabular-nums;}
.oracle-league-pts{font-size:calc(11px * var(--fs,1));color:var(--t2);font-weight:700;font-variant-numeric:tabular-nums;}
.oracle-league-streak{font-size:calc(11px * var(--fs,1));color:var(--acc-text);font-weight:700;}
.oracle-league-more{font-size:calc(10px * var(--fs,1));color:var(--t3);font-weight:600;text-align:center;padding:4px;}
.oracle-league-empty,.oracle-league-loading{padding:12px;background:var(--bg2);border:1px dashed var(--bd2);border-radius:12px;text-align:center;font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:600;margin-bottom:6px;}

/* 이번 주 챌린지 */
.oracle-challenge{display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,rgba(124,58,237,.07),rgba(168,85,247,.04));border:1.5px solid rgba(124,58,237,.4);border-radius:12px;padding:11px 12px;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease;}
.oracle-challenge:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(124,58,237,.2);}
.oracle-ch-icon{width:36px;height:36px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:calc(18px * var(--fs,1));flex-shrink:0;font-weight:700;}
.oracle-ch-body{flex:1;min-width:0;}
.oracle-ch-name{font-size:calc(13px * var(--fs,1));font-weight:800;color:var(--t);}
.oracle-ch-hint{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:600;margin-top:2px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.oracle-ch-cta{font-size:calc(11px * var(--fs,1));color:#7c3aed;font-weight:800;white-space:nowrap;flex-shrink:0;}

/* 그룹 구분 */
.oracle-group{margin-bottom:14px;}
.oracle-group-head{display:flex;align-items:center;gap:6px;font-size:calc(12px * var(--fs,1));font-weight:800;margin:8px 0 6px;letter-spacing:.2px;text-transform:uppercase;}
.oracle-group-count{margin-left:auto;font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:700;background:var(--bg3);padding:1px 6px;border-radius:4px;}

/* 챌린지 지표 강조 */
.oracle-ind-card.is-challenge{border-color:rgba(124,58,237,.4);background:linear-gradient(135deg,rgba(124,58,237,.04),var(--bg2));}
.oracle-ind-challenge{display:inline-block;font-size:calc(11px * var(--fs,1));font-weight:800;background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;padding:2px 6px;border-radius:4px;margin-left:5px;letter-spacing:.3px;}

/* 친구 리그 전체 모달 */
#oracle-league-modal{position:fixed;inset:0;z-index:10093;display:none;}
#oracle-league-modal.open{display:block;}
.ol-backdrop{position:absolute;inset:0;background:rgba(8,12,24,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.ol-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(100% - 28px);max-width:400px;max-height:88vh;overflow-y:auto;background:var(--bg2);border:2px solid var(--bd2);border-radius:16px;padding:18px 16px;box-shadow:0 24px 56px rgba(8,12,24,.4);}
.ol-close{position:absolute;top:8px;right:12px;background:transparent;border:none;color:var(--t3);font-size:calc(22px * var(--fs,1));cursor:pointer;line-height:1;font-weight:500;padding:0 4px;}
.ol-head{margin-bottom:12px;text-align:center;}
.ol-title{font-family:var(--font-hd);font-size:calc(17px * var(--fs,1));font-weight:700;color:var(--t);}
.ol-sub{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:600;margin-top:2px;}
.ol-loading{text-align:center;padding:30px 12px;font-size:calc(12px * var(--fs,1));color:var(--t3);font-weight:600;}
.ol-empty{text-align:center;padding:24px 14px;}
.ol-empty-ic{font-size:calc(38px * var(--fs,1));margin-bottom:6px;}
.ol-empty-title{font-size:calc(14px * var(--fs,1));font-weight:800;color:var(--t);margin-bottom:3px;}
.ol-empty-sub{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:600;line-height:1.5;}
.ol-mine{display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,#FEF3E2,#FDD9A6);border:1.5px solid var(--acc);border-radius:12px;padding:10px 12px;margin-bottom:10px;}
.ol-mine-l{font-size:calc(11px * var(--fs,1));font-weight:800;color:var(--acc-text);text-transform:uppercase;letter-spacing:.4px;}
.ol-mine-v{font-family:var(--font-hd);font-size:calc(20px * var(--fs,1));font-weight:700;color:var(--acc-text);}
.ol-mine-acc{margin-left:auto;font-size:calc(13px * var(--fs,1));font-weight:800;color:var(--acc-text);}
.ol-list{display:flex;flex-direction:column;gap:4px;margin-bottom:8px;}
.ol-row{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--bd);border-radius:8px;padding:8px 10px;}
.ol-row.me{background:linear-gradient(135deg,rgba(255,244,214,.45),rgba(255,228,168,.35));border-color:var(--acc);}
.ol-rank{width:24px;flex-shrink:0;font-size:calc(14px * var(--fs,1));text-align:center;}
.ol-num{font-family:'DM Mono',monospace;font-size:calc(11px * var(--fs,1));font-weight:800;color:var(--t3);}
.ol-name{flex:1;font-size:calc(12px * var(--fs,1));font-weight:800;color:var(--t);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ol-me-tag{display:inline-block;font-size:calc(11px * var(--fs,1));font-weight:800;background:var(--acc);color:var(--on-acc);padding:1px 5px;border-radius:4px;margin-left:3px;}
.ol-vals{display:flex;gap:5px;flex-shrink:0;}
.ol-v{font-family:var(--font-hd);font-size:calc(13px * var(--fs,1));font-weight:700;font-variant-numeric:tabular-nums;text-align:center;min-width:34px;}
.ol-v.good{color:var(--green);}
.ol-v.mid{color:#f59e0b;}
.ol-v.bad{color:var(--red);}
.ol-v.sub{font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;font-size:calc(11px * var(--fs,1));color:var(--t2);font-weight:700;}
.ol-v.sub span{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:600;margin-left:1px;}
.ol-foot{font-size:calc(10px * var(--fs,1));color:var(--t3);font-weight:600;text-align:center;background:var(--bg3);padding:7px;border-radius:8px;}

/* ════════════════════════════════════════════════
   🏗 오라클 워크샵 (UGC Scenario Builder)
   ──────────────────────────────────────────────── */
.oracle-ws-tag{display:inline-block;font-size:calc(11px * var(--fs,1));font-weight:800;background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;padding:2px 6px;border-radius:4px;margin-left:5px;letter-spacing:.3px;vertical-align:middle;}
.oracle-workshop-card{display:flex;align-items:center;gap:13px;background:linear-gradient(135deg,rgba(124,58,237,.1),rgba(168,85,247,.04));border:1.5px solid rgba(124,58,237,.4);border-radius:16px;padding:13px 14px;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease;box-shadow:0 2px 12px rgba(124,58,237,.15);}
.oracle-workshop-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(124,58,237,.25);}
.oracle-ws-emoji{font-size:calc(32px * var(--fs,1));flex-shrink:0;filter:drop-shadow(0 2px 6px rgba(124,58,237,.4));}
.oracle-ws-body{flex:1;min-width:0;}
.oracle-ws-title{font-family:var(--font-hd);font-size:calc(15px * var(--fs,1));font-weight:700;color:#7c3aed;}
.oracle-ws-desc{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:600;margin-top:2px;line-height:1.5;}
.oracle-ws-cta{color:#7c3aed;font-size:calc(22px * var(--fs,1));font-weight:800;}

/* 워크샵 모달 */
#ow-modal{position:fixed;inset:0;z-index:10095;display:none;}
#ow-modal.open{display:block;}
.ow-backdrop{position:absolute;inset:0;background:rgba(8,12,24,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.ow-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(100% - 24px);max-width:440px;max-height:92vh;overflow-y:auto;background:var(--bg2);border:2px solid var(--bd2);border-radius:24px;padding:20px 18px;box-shadow:0 24px 56px rgba(8,12,24,.4);-webkit-overflow-scrolling:touch;}
.ow-close{position:absolute;top:10px;right:14px;background:transparent;border:none;color:var(--t3);font-size:calc(24px * var(--fs,1));cursor:pointer;line-height:1;font-weight:500;padding:0 4px;}

.ow-loading{text-align:center;padding:30px 12px;font-size:calc(12px * var(--fs,1));color:var(--t3);font-weight:600;}
.ow-head{margin-bottom:14px;}
.ow-eyebrow{font-size:calc(11px * var(--fs,1));color:#a855f7;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:4px;}
.ow-title{font-family:var(--font-hd);font-size:calc(20px * var(--fs,1));font-weight:700;color:var(--t);letter-spacing:-.3px;margin-bottom:3px;}
.ow-sub{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:600;line-height:1.55;}

.ow-create-btn{width:100%;background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;border:none;border-radius:12px;padding:14px;font-size:calc(13px * var(--fs,1));font-weight:800;cursor:pointer;font-family:inherit;margin-bottom:14px;letter-spacing:.3px;box-shadow:0 4px 14px rgba(124,58,237,.4);}
.ow-create-btn:active{transform:translateY(1px);box-shadow:0 2px 8px rgba(124,58,237,.4);}
/* 검색·태그·정렬 (Phase A #4) */
.ow-searchbar{display:flex;gap:6px;margin-bottom:8px;}
.ow-search{flex:1;background:var(--bg);border:1.5px solid var(--bd);border-radius:12px;padding:9px 12px;font-size:calc(13px * var(--fs,1));color:var(--t);font-family:inherit;outline:none;}
.ow-search:focus{border-color:#A855F7;}
.ow-search-btn,.ow-search-clear{background:var(--bg);border:1.5px solid var(--bd);color:var(--t2);border-radius:12px;padding:0 12px;font-size:calc(13px * var(--fs,1));font-weight:800;cursor:pointer;font-family:inherit;}
.ow-search-btn:hover,.ow-search-clear:hover{border-color:#A855F7;color:#A855F7;}
.ow-sortrow{display:flex;align-items:center;gap:6px;margin-bottom:8px;flex-wrap:wrap;}
.ow-sortlb{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:800;letter-spacing:.4px;text-transform:uppercase;margin-right:2px;}
.ow-sortbtn{background:var(--bg);border:1.5px solid var(--bd);color:var(--t2);border-radius:999px;padding:5px 10px;font-size:calc(11px * var(--fs,1));font-weight:800;cursor:pointer;font-family:inherit;transition:all .12s ease;}
.ow-sortbtn:hover{border-color:#A855F7;color:#A855F7;}
.ow-sortbtn.sel{background:rgba(168,85,247,.12);border-color:#A855F7;color:#A855F7;}
.ow-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:11px;}
.ow-tag{background:rgba(6,182,212,.06);border:1px solid rgba(6,182,212,.35);color:#0284C7;border-radius:999px;padding:4px 10px;font-size:calc(11px * var(--fs,1));font-weight:800;cursor:pointer;font-family:inherit;transition:all .12s ease;}
.ow-tag:hover{background:rgba(6,182,212,.14);}
.ow-tag.sel{background:#0284C7;border-color:#0284C7;color:#fff;}
.ow-item-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;}
.ow-item-tag{background:rgba(6,182,212,.08);color:#0284C7;font-size:calc(11px * var(--fs,1));font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:.2px;}

.ow-section-h{font-size:calc(11px * var(--fs,1));font-weight:800;color:var(--t2);text-transform:uppercase;letter-spacing:.4px;margin:14px 0 7px;}
.ow-list{display:flex;flex-direction:column;gap:6px;}
.ow-item{display:flex;align-items:center;gap:11px;background:var(--bg);border:1.5px solid var(--bd);border-radius:12px;padding:11px;cursor:pointer;transition:border-color .15s ease,transform .12s ease;}
.ow-item:hover{border-color:#7c3aed;transform:translateY(-1px);}
.ow-item.draft{background:rgba(245,158,11,.05);border-color:rgba(245,158,11,.3);}
.ow-item-emoji{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:calc(18px * var(--fs,1));flex-shrink:0;background:var(--bg3);}
.ow-item-body{flex:1;min-width:0;}
.ow-item-title{font-size:calc(13px * var(--fs,1));font-weight:800;color:var(--t);margin-bottom:2px;}
.ow-item-meta{font-size:calc(10px * var(--fs,1));color:var(--t3);font-weight:600;}
.ow-played-tag{display:inline-block;font-size:calc(11px * var(--fs,1));font-weight:800;background:rgba(21,128,61,.15);color:var(--green);padding:1px 5px;border-radius:4px;margin-left:4px;}
.ow-item-arr{color:var(--t3);font-size:calc(16px * var(--fs,1));font-weight:700;}
.ow-item-act{background:var(--bg2);border:1px solid var(--bd);color:var(--t2);border-radius:8px;padding:5px 9px;font-size:calc(11px * var(--fs,1));font-weight:700;cursor:pointer;font-family:inherit;}
.ow-item-act.ow-del{color:var(--red);border-color:rgba(220,38,38,.3);}
.ow-empty{text-align:center;padding:20px 14px;background:var(--bg3);border-radius:12px;font-size:calc(12px * var(--fs,1));color:var(--t3);font-weight:600;line-height:1.6;}

/* 잠금 화면 */
.ow-lock{text-align:center;padding:18px 6px;}
.ow-lock-ic{font-size:calc(56px * var(--fs,1));margin-bottom:8px;filter:drop-shadow(0 4px 12px rgba(168,85,247,.4));}
.ow-lock-title{font-family:var(--font-hd);font-size:calc(22px * var(--fs,1));font-weight:700;color:#a855f7;margin-bottom:4px;}
.ow-lock-sub{font-size:calc(12px * var(--fs,1));color:var(--t3);font-weight:600;margin-bottom:14px;}
.ow-lock-bar{height:8px;background:var(--bg3);border-radius:4px;overflow:hidden;border:1px solid rgba(168,85,247,.25);margin-bottom:5px;}
.ow-lock-fill{height:100%;background:linear-gradient(90deg,#7c3aed,#a855f7);border-radius:4px;transition:width .5s ease;}
.ow-lock-meta{font-size:calc(11px * var(--fs,1));color:var(--acc-text);font-weight:800;margin-bottom:16px;font-variant-numeric:tabular-nums;}
.ow-lock-tagline{font-size:calc(12px * var(--fs,1));color:var(--t2);font-style:italic;line-height:1.6;border-left:2px solid #a855f7;padding-left:12px;text-align:left;}
.ow-pass-btn{display:block;width:100%;margin:14px 0 4px;background:linear-gradient(135deg,#10B981,#22C55E);color:#fff;border:none;border-radius:12px;padding:12px 14px;font-size:calc(13px * var(--fs,1));font-weight:800;cursor:pointer;font-family:inherit;letter-spacing:-.2px;box-shadow:0 6px 18px rgba(16,185,129,.28);}
.ow-pass-btn:hover{filter:brightness(1.08);}

/* Try-Before-Unlock · 잠금 화면 미리보기 카드 */
.ow-preview{margin-top:20px;border-top:1px dashed rgba(168,85,247,.25);padding-top:18px;}
.ow-preview-loading,.ow-preview-empty{text-align:center;font-size:calc(12px * var(--fs,1));color:var(--t3);padding:16px;}
.ow-preview-head{text-align:center;margin-bottom:14px;}
.ow-preview-eyebrow{font-family:'DM Mono',monospace;font-size:calc(10px * var(--fs,1));letter-spacing:1.5px;color:#a855f7;font-weight:700;margin-bottom:4px;}
.ow-preview-title{font-family:var(--font-hd);font-size:calc(16px * var(--fs,1));font-weight:700;color:var(--t);margin-bottom:4px;}
.ow-preview-sub{font-size:calc(12px * var(--fs,1));color:var(--t3);line-height:1.5;}
.ow-preview-list{display:flex;flex-direction:column;gap:10px;text-align:left;}
.ow-preview-item{background:var(--bg2);border:1.5px solid var(--bd);border-radius:16px;padding:12px 14px;transition:border-color .18s ease;}
.ow-preview-item.try{border-color:rgba(168,85,247,.5);background:linear-gradient(180deg,rgba(168,85,247,.06),var(--bg2));}
.ow-preview-item.locked{opacity:.72;}
.ow-preview-item-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.ow-preview-tag{font-family:'DM Mono',monospace;font-size:calc(10px * var(--fs,1));font-weight:700;letter-spacing:.5px;color:#a855f7;background:rgba(168,85,247,.12);padding:3px 8px;border-radius:8px;}
.ow-preview-item.locked .ow-preview-tag{color:var(--t3);background:var(--bg3);}
.ow-preview-plays{font-family:'DM Mono',monospace;font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:700;}
.ow-preview-item-title{font-family:var(--font-hd);font-size:calc(14px * var(--fs,1));font-weight:700;color:var(--t);line-height:1.35;margin-bottom:3px;}
.ow-preview-item-author{font-size:calc(11px * var(--fs,1));color:var(--t3);margin-bottom:10px;}
.ow-preview-btn{width:100%;border:none;border-radius:12px;padding:9px;font-family:'Pretendard',sans-serif;font-weight:800;font-size:calc(13px * var(--fs,1));cursor:pointer;background:linear-gradient(90deg,#7c3aed,#a855f7);color:#fff;box-shadow:0 3px 0 rgba(124,58,237,.6);}
.ow-preview-btn:hover{filter:brightness(1.05);}
.ow-preview-btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(124,58,237,.6);}
.ow-preview-btn.locked,.ow-preview-btn.used{background:var(--bg3);color:var(--t3);box-shadow:none;cursor:not-allowed;font-size:calc(12px * var(--fs,1));}

/* 빌더 */
.ow-weather-preview{display:flex;align-items:center;gap:14px;border:2px solid;border-radius:16px;padding:14px;margin-bottom:14px;transition:all .3s ease;}
.ow-weather-emoji{font-size:calc(42px * var(--fs,1));flex-shrink:0;line-height:1;}
.ow-weather-name{font-family:var(--font-hd);font-size:calc(20px * var(--fs,1));font-weight:700;}
.ow-weather-sub{font-size:calc(10px * var(--fs,1));color:var(--t3);font-weight:600;margin-top:2px;}
.ow-field{margin-bottom:11px;}
.ow-label{font-size:calc(11px * var(--fs,1));color:var(--t2);font-weight:800;letter-spacing:.3px;display:block;margin-bottom:5px;text-transform:uppercase;}
.ow-input,.ow-textarea{width:100%;background:var(--bg);border:1.5px solid var(--bd);border-radius:8px;padding:9px 11px;font-size:calc(13px * var(--fs,1));color:var(--t);font-family:inherit;outline:none;transition:border-color .15s ease;}
.ow-input:focus,.ow-textarea:focus{border-color:#7c3aed;}
.ow-textarea{resize:none;line-height:1.5;}

.ow-sliders{display:flex;flex-direction:column;gap:10px;background:var(--bg3);border-radius:12px;padding:11px;}
.ow-slider-row{background:var(--bg2);border:1px solid var(--bd);border-radius:8px;padding:9px 11px;}
.ow-slider-head{display:flex;align-items:center;gap:6px;margin-bottom:5px;flex-wrap:wrap;}
.ow-slider-emoji{font-size:calc(14px * var(--fs,1));}
.ow-slider-name{font-size:calc(12px * var(--fs,1));font-weight:800;color:var(--t);flex:1;}
.ow-slider-val{font-family:var(--font-hd);font-size:calc(16px * var(--fs,1));font-weight:700;font-variant-numeric:tabular-nums;}
.ow-slider-danger{font-size:calc(11px * var(--fs,1));font-weight:800;background:rgba(220,38,38,.12);color:var(--red);padding:1px 5px;border-radius:4px;letter-spacing:.2px;}
.ow-slider{width:100%;-webkit-appearance:none;appearance:none;height:6px;border-radius:4px;background:var(--bg3);outline:none;margin:6px 0 3px;}
.ow-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--c, #7c3aed);border:2px solid #fff;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.ow-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--c, #7c3aed);border:2px solid #fff;cursor:pointer;}
.ow-slider-desc{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:600;line-height:1.4;margin-top:3px;}

.ow-diff-row{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;}
.ow-diff-btn{background:var(--bg);border:1.5px solid var(--bd);color:var(--t2);border-radius:8px;padding:7px 4px;font-size:calc(11px * var(--fs,1));font-weight:800;cursor:pointer;font-family:inherit;transition:all .15s ease;}
.ow-diff-btn.sel{background:rgba(124,58,237,.1);border-color:#7c3aed;color:#7c3aed;}

.ow-choices{display:flex;flex-direction:column;gap:6px;}
.ow-choice{display:flex;align-items:center;gap:6px;background:var(--bg);border:1.5px solid var(--bd);border-radius:8px;padding:7px 9px;}
.ow-choice.correct{background:rgba(245,158,11,.07);border-color:#F59E0B;}
.ow-choice-input{flex:1;background:transparent;border:none;color:var(--t);font-size:calc(12px * var(--fs,1));outline:none;font-family:inherit;font-weight:600;}
.ow-choice-pick{background:var(--bg2);border:1.5px solid var(--bd);color:var(--t3);border-radius:8px;padding:4px 8px;font-size:calc(10px * var(--fs,1));font-weight:800;cursor:pointer;font-family:inherit;white-space:nowrap;flex-shrink:0;}
.ow-choice.correct .ow-choice-pick{background:#F59E0B;border-color:#F59E0B;color:#fff;}

.ow-hint{font-size:calc(10px * var(--fs,1));color:var(--t3);font-weight:600;line-height:1.55;background:var(--bg3);padding:7px 10px;border-radius:8px;margin-top:6px;}

.ow-actions{display:flex;gap:7px;margin-top:14px;}
.ow-btn-primary,.ow-btn-ghost{flex:1;padding:11px;font-size:calc(12px * var(--fs,1));font-weight:800;border-radius:12px;cursor:pointer;font-family:inherit;border:1.5px solid;transition:transform .12s ease;}
.ow-btn-primary{background:linear-gradient(135deg,#7c3aed,#a855f7);border-color:transparent;color:#fff;box-shadow:0 3px 10px rgba(124,58,237,.3);}
.ow-btn-ghost{background:var(--bg);border-color:var(--bd);color:var(--t2);}
.ow-btn-primary:active,.ow-btn-ghost:active{transform:translateY(1px);}

.ow-back-btn{width:100%;background:transparent;border:none;color:var(--t3);font-size:calc(12px * var(--fs,1));font-weight:700;padding:8px;cursor:pointer;margin-top:6px;font-family:inherit;}
.ow-back-btn:hover{color:var(--t2);}

.ow-foot{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:600;line-height:1.7;background:rgba(124,58,237,.05);border:1px dashed rgba(124,58,237,.2);padding:10px 12px;border-radius:8px;margin-top:14px;}

/* 풀이 화면 */
.ow-play-intro{text-align:center;}
.ow-play-weather{display:flex;flex-direction:column;align-items:center;gap:3px;border:2px solid;border-radius:12px;padding:14px;margin-bottom:14px;}
.ow-play-weather-emoji{font-size:calc(50px * var(--fs,1));line-height:1;}
.ow-play-weather-name{font-family:var(--font-hd);font-size:calc(20px * var(--fs,1));font-weight:700;}
.ow-play-title{font-family:var(--font-hd);font-size:calc(18px * var(--fs,1));font-weight:700;color:var(--t);margin-bottom:3px;}
.ow-play-author{font-size:calc(11px * var(--fs,1));color:#a855f7;font-weight:800;margin-bottom:11px;}
.ow-play-desc{font-size:calc(13px * var(--fs,1));color:var(--t2);line-height:1.65;font-weight:500;background:var(--bg3);padding:11px;border-radius:12px;margin-bottom:14px;text-align:left;}
.ow-play-ind-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:14px;}
.ow-play-ind{background:var(--bg);border:1px solid var(--bd);border-radius:8px;padding:7px 5px;text-align:center;}
.ow-play-ind-h{font-size:calc(10px * var(--fs,1));color:var(--t3);font-weight:700;margin-bottom:2px;}
.ow-play-ind-v{font-family:var(--font-hd);font-size:calc(14px * var(--fs,1));font-weight:700;font-variant-numeric:tabular-nums;}
.ow-play-cta{width:100%;padding:13px;font-size:calc(13px * var(--fs,1));font-weight:800;}
.ow-play-head{margin-bottom:12px;text-align:center;}
.ow-play-sub{font-size:calc(12px * var(--fs,1));color:var(--t3);font-weight:600;margin-top:3px;}
.ow-play-choices{display:flex;flex-direction:column;gap:7px;}
.ow-play-choice{display:flex;align-items:center;gap:10px;background:var(--bg);border:1.5px solid var(--bd);border-radius:12px;padding:12px 13px;cursor:pointer;font-family:inherit;text-align:left;transition:all .15s ease;}
.ow-play-choice:hover{border-color:#7c3aed;background:rgba(124,58,237,.04);}
.ow-play-choice-num{width:26px;height:26px;border-radius:8px;background:#7c3aed;color:#fff;display:flex;align-items:center;justify-content:center;font-size:calc(13px * var(--fs,1));font-weight:800;flex-shrink:0;}
.ow-play-choice-label{flex:1;font-size:calc(13px * var(--fs,1));font-weight:700;color:var(--t);}

.ow-play-result{text-align:center;padding:18px;margin-bottom:14px;border-radius:12px;border:2px solid;}
.ow-play-result.won{background:rgba(21,128,61,.07);border-color:var(--green);}
.ow-play-result.lost{background:rgba(220,38,38,.05);border-color:rgba(220,38,38,.4);}
.ow-play-result-emoji{font-size:calc(50px * var(--fs,1));margin-bottom:5px;}
.ow-play-result-text{font-family:var(--font-hd);font-size:calc(17px * var(--fs,1));font-weight:700;color:var(--t);margin-bottom:3px;}
.ow-play-result-score{font-size:calc(13px * var(--fs,1));color:var(--acc-text);font-weight:800;}
.ow-play-section{margin-bottom:11px;}
.ow-play-section-l{font-size:calc(11px * var(--fs,1));color:var(--t2);font-weight:800;letter-spacing:.3px;margin-bottom:5px;text-transform:uppercase;}
.ow-play-correct{background:rgba(245,158,11,.1);border-left:3px solid #F59E0B;padding:8px 11px;border-radius:0 8px 8px 0;font-size:calc(13px * var(--fs,1));font-weight:700;color:var(--t);}
.ow-play-comment{background:var(--bg3);padding:10px 12px;border-radius:8px;font-size:calc(12px * var(--fs,1));color:var(--t);line-height:1.6;font-weight:500;}
.ow-play-author-line{font-size:calc(11px * var(--fs,1));color:#a855f7;font-weight:700;margin-top:5px;text-align:right;}

/* ════════════════════════════════════════════════
   🌤 Oracle Report 예보 보드
   ──────────────────────────────────────────────── */
/* 오라클 페이지 인라인 미니 피드 */
.oracle-report-inline-wrap{display:flex;flex-direction:column;gap:6px;}
.orep-inline-loading,.orep-inline-empty{padding:12px;background:var(--bg2);border:1px dashed var(--bd2);border-radius:12px;text-align:center;font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:600;}
.orep-inline-item{display:flex;align-items:center;gap:10px;background:var(--bg2);border:1.5px solid var(--bd);border-radius:12px;padding:10px 11px;cursor:pointer;transition:transform .12s ease,border-color .12s ease;}
.orep-inline-item:hover{transform:translateY(-1px);border-color:#0284C7;}
.orep-inline-w{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:calc(17px * var(--fs,1));flex-shrink:0;}
.orep-inline-body{flex:1;min-width:0;}
.orep-inline-hook{font-size:calc(13px * var(--fs,1));font-weight:800;color:var(--t);line-height:1.35;margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.orep-inline-meta{font-size:calc(10px * var(--fs,1));color:var(--t3);font-weight:600;}
.orep-inline-arr{color:var(--t3);font-size:calc(16px * var(--fs,1));font-weight:700;flex-shrink:0;}

/* 예보 보드 모달 */
#orep-modal{position:fixed;inset:0;z-index:10096;display:none;}
#orep-modal.open{display:block;}
.orep-backdrop{position:absolute;inset:0;background:rgba(8,12,24,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.orep-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(100% - 24px);max-width:440px;max-height:92vh;overflow-y:auto;background:var(--bg2);border:2px solid var(--bd2);border-radius:24px;padding:20px 18px;box-shadow:0 24px 56px rgba(8,12,24,.4);-webkit-overflow-scrolling:touch;}
.orep-close{position:absolute;top:10px;right:14px;background:transparent;border:none;color:var(--t3);font-size:calc(24px * var(--fs,1));cursor:pointer;line-height:1;font-weight:500;padding:0 4px;}
.orep-loading{text-align:center;padding:30px 12px;font-size:calc(12px * var(--fs,1));color:var(--t3);font-weight:600;}
.orep-empty{text-align:center;padding:24px 14px;background:var(--bg3);border-radius:12px;font-size:calc(12px * var(--fs,1));color:var(--t3);font-weight:600;line-height:1.7;}
.orep-head{margin-bottom:12px;}
.orep-eyebrow{font-size:calc(11px * var(--fs,1));color:#0284C7;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:4px;}
.orep-title{font-family:var(--font-hd);font-size:calc(20px * var(--fs,1));font-weight:700;color:var(--t);letter-spacing:-.3px;margin-bottom:3px;}
.orep-sub{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:600;line-height:1.55;}

/* 작성 버튼 + 안내 */
.orep-write-btn{width:100%;background:linear-gradient(135deg,#0284C7,#06B6D4);color:#fff;border:none;border-radius:12px;padding:13px;font-size:calc(13px * var(--fs,1));font-weight:800;cursor:pointer;font-family:inherit;margin-bottom:12px;letter-spacing:.3px;box-shadow:0 4px 14px rgba(6,182,212,.35);}
.orep-write-btn:active{transform:translateY(1px);}
.orep-tier-hint{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:600;background:var(--bg3);padding:10px 12px;border-radius:12px;margin-bottom:12px;line-height:1.55;}

/* 카테고리 필터 칩 */
.orep-modetabs{display:flex;gap:6px;margin-bottom:8px;}
.orep-modetab{flex:1;background:var(--bg);border:1.5px solid var(--bd);color:var(--t2);border-radius:12px;padding:8px 10px;font-size:calc(12px * var(--fs,1));font-weight:800;cursor:pointer;font-family:inherit;transition:all .15s ease;}
.orep-modetab:hover{border-color:#A855F7;color:#A855F7;}
.orep-modetab.sel{background:rgba(168,85,247,.12);border-color:#A855F7;color:#A855F7;}
.orep-cats{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:11px;}
.orep-cat{background:var(--bg);border:1.5px solid var(--bd);color:var(--t2);border-radius:8px;padding:5px 9px;font-size:calc(11px * var(--fs,1));font-weight:800;cursor:pointer;font-family:inherit;transition:all .15s ease;}
.orep-cat:hover{border-color:var(--c, var(--acc));color:var(--c, var(--t));}
.orep-cat.sel{background:var(--c, var(--acc));border-color:var(--c, var(--acc));color:#fff;}

/* 리포트 목록 아이템 */
.orep-list{display:flex;flex-direction:column;gap:8px;}
.orep-item{background:var(--bg);border:1.5px solid var(--bd);border-radius:12px;padding:11px 12px;cursor:pointer;transition:border-color .15s ease,transform .12s ease;}
.orep-item:hover{border-color:#0284C7;transform:translateY(-1px);}
.orep-it-head{display:flex;align-items:center;gap:5px;margin-bottom:7px;flex-wrap:wrap;}
.orep-it-weather{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:calc(15px * var(--fs,1));font-weight:700;flex-shrink:0;}
.orep-it-cat{font-size:calc(11px * var(--fs,1));font-weight:800;padding:2px 6px;border-radius:4px;letter-spacing:.2px;}
.orep-verdict{font-size:calc(11px * var(--fs,1));font-weight:800;padding:2px 6px;border-radius:4px;letter-spacing:.2px;}
.orep-verdict.hit{background:rgba(21,128,61,.15);color:var(--green);}
.orep-verdict.miss{background:rgba(220,38,38,.12);color:var(--red);}
.orep-verdict.pending{background:var(--bg3);color:var(--t3);}
.orep-mine-tag{font-size:calc(11px * var(--fs,1));font-weight:800;background:#E27C1F;color:#fff;padding:2px 6px;border-radius:4px;margin-left:auto;}
.orep-it-hook{font-size:calc(13px * var(--fs,1));font-weight:800;color:var(--t);line-height:1.4;margin-bottom:6px;}
.orep-it-meta{display:flex;flex-wrap:wrap;gap:6px;font-size:calc(10px * var(--fs,1));color:var(--t3);font-weight:600;margin-bottom:5px;align-items:center;}
.orep-it-author{font-weight:700;color:var(--t2);}
.orep-it-acc{display:inline-block;font-size:calc(11px * var(--fs,1));font-weight:800;background:rgba(21,128,61,.12);color:var(--green);padding:1px 5px;border-radius:4px;margin-left:3px;font-variant-numeric:tabular-nums;}
.orep-it-target{color:#7c3aed;font-weight:700;}
.orep-it-ago{margin-left:auto;}
.orep-it-foot{display:flex;gap:9px;padding-top:6px;border-top:1px dashed var(--bd);font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:700;}
.orep-it-stat.liked{color:var(--red);}

/* 리포트 상세 */
.orep-detail-head{border:2px solid;border-radius:16px;padding:14px;margin-bottom:12px;}
.orep-detail-weather{display:flex;align-items:center;gap:13px;}
.orep-detail-w-emoji{font-size:calc(42px * var(--fs,1));flex-shrink:0;line-height:1;}
.orep-detail-w-name{font-family:var(--font-hd);font-size:calc(22px * var(--fs,1));font-weight:700;letter-spacing:-.3px;}
.orep-detail-w-desc{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:600;margin-top:2px;}
.orep-detail-cat{display:inline-block;font-size:calc(11px * var(--fs,1));font-weight:800;padding:3px 9px;border-radius:8px;letter-spacing:.2px;margin-bottom:6px;margin-right:5px;}
.orep-detail-target{display:inline-block;font-size:calc(11px * var(--fs,1));color:#7c3aed;font-weight:800;background:rgba(124,58,237,.07);padding:3px 9px;border-radius:8px;margin-bottom:8px;}
.orep-detail-hook{font-family:var(--font-hd);font-size:calc(17px * var(--fs,1));font-weight:700;color:var(--t);line-height:1.4;letter-spacing:-.2px;margin-bottom:10px;}
.orep-detail-author{display:flex;align-items:baseline;gap:7px;background:var(--bg3);padding:8px 11px;border-radius:8px;margin-bottom:12px;flex-wrap:wrap;}
.orep-detail-author-nick{font-size:calc(12px * var(--fs,1));font-weight:800;color:#7c3aed;}
.orep-detail-author-stats{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:600;}
.orep-verdict-big{font-size:calc(12px * var(--fs,1));font-weight:800;padding:10px 12px;border-radius:8px;text-align:center;margin-bottom:12px;border:1.5px solid;}
.orep-verdict-big.hit{background:rgba(21,128,61,.08);border-color:var(--green);color:var(--green);}
.orep-verdict-big.miss{background:rgba(220,38,38,.06);border-color:var(--red);color:var(--red);}
.orep-detail-section{margin-bottom:12px;}
.orep-detail-label{font-size:calc(11px * var(--fs,1));color:var(--t2);font-weight:800;letter-spacing:.3px;margin-bottom:5px;text-transform:uppercase;}
.orep-detail-text{font-size:calc(13px * var(--fs,1));color:var(--t);line-height:1.7;font-weight:500;background:var(--bg);border:1px solid var(--bd);padding:11px 13px;border-radius:12px;white-space:pre-wrap;}
.orep-detail-actions{display:flex;gap:7px;margin-bottom:12px;}
.orep-like-btn,.orep-share-btn{flex:1;padding:10px;font-size:calc(12px * var(--fs,1));font-weight:800;border-radius:12px;cursor:pointer;font-family:inherit;border:1.5px solid var(--bd);background:var(--bg);color:var(--t2);transition:all .15s ease;}
.orep-like-btn.liked{background:rgba(220,38,38,.07);border-color:var(--red);color:var(--red);}
.orep-share-btn:hover{border-color:#0284C7;color:#0284C7;}
.orep-own-actions{background:rgba(226,124,31,.05);border:1.5px dashed rgba(226,124,31,.3);border-radius:12px;padding:10px;}
.orep-own-row{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:7px;}
.orep-verdict-btn{background:var(--bg);border:1.5px solid var(--bd);color:var(--t2);border-radius:8px;padding:6px 4px;font-size:calc(11px * var(--fs,1));font-weight:800;cursor:pointer;font-family:inherit;}
.orep-verdict-btn.sel.hit{background:var(--green);border-color:var(--green);color:#fff;}
.orep-verdict-btn.sel.miss{background:var(--red);border-color:var(--red);color:#fff;}
.orep-verdict-btn.sel.pending{background:var(--t3);border-color:var(--t3);color:#fff;}
.orep-del-btn{width:100%;background:rgba(220,38,38,.06);border:1.5px solid rgba(220,38,38,.3);color:var(--red);border-radius:8px;padding:8px;font-size:calc(11px * var(--fs,1));font-weight:800;cursor:pointer;font-family:inherit;margin-top:5px;}
/* 구독 + 팁 (Phase 4a) */
.orep-sub-btn{margin-left:auto;background:var(--bg);border:1.5px solid var(--bd);color:var(--t2);border-radius:999px;padding:5px 12px;font-size:calc(11px * var(--fs,1));font-weight:800;cursor:pointer;font-family:inherit;transition:all .15s ease;}
.orep-sub-btn:hover{border-color:#A855F7;color:#A855F7;}
.orep-sub-btn.on{background:rgba(168,85,247,.10);border-color:#A855F7;color:#A855F7;}
.orep-tip-summary{font-size:calc(12px * var(--fs,1));color:#7C3AED;background:rgba(124,58,237,.06);border:1px solid rgba(124,58,237,.28);border-radius:8px;padding:7px 11px;margin-bottom:10px;font-weight:700;}
.orep-tip-row{background:rgba(242,168,62,.06);border:1.5px dashed rgba(242,168,62,.35);border-radius:12px;padding:10px 12px;margin-top:8px;}
.orep-tip-label{font-size:calc(11px * var(--fs,1));color:#8F4507;font-weight:800;letter-spacing:.4px;text-transform:uppercase;display:block;margin-bottom:7px;}
.orep-tip-btns{display:flex;gap:6px;}
.orep-tip-btn{flex:1;background:#fff;border:1.5px solid rgba(242,168,62,.55);color:#8F4507;border-radius:8px;padding:9px 4px;font-size:calc(13px * var(--fs,1));font-weight:800;cursor:pointer;font-family:inherit;transition:all .12s ease;}
.orep-tip-btn:hover{background:rgba(242,168,62,.10);border-color:#E27C1F;}
.orep-tip-btn:active{transform:translateY(1px);}

/* 예측 마켓: 수치별 기상도 (Prediction Market) */
.orep-pred-row{display:flex;align-items:center;gap:8px;}
.orep-pred-input{flex:1;font-family:'DM Mono',monospace;font-weight:800;text-align:right;}
.orep-pred-unit{font-size:calc(13px * var(--fs,1));color:var(--t2);font-weight:800;padding:0 10px;background:var(--bg3);border-radius:8px;min-width:36px;text-align:center;letter-spacing:.4px;}
.orep-pred-hint{font-size:calc(11px * var(--fs,1));color:var(--t3);background:rgba(6,182,212,.06);border-left:2.5px solid #06B6D4;padding:7px 10px;margin-top:7px;border-radius:0 8px 8px 0;font-weight:600;line-height:1.5;}
.orep-pred-preview{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:12px;margin-top:8px;}
.orep-pred-preview-emoji{font-size:calc(28px * var(--fs,1));line-height:1;}
.orep-pred-preview-body{flex:1;min-width:0;}
.orep-pred-preview-name{font-family:var(--font-hd);font-size:calc(15px * var(--fs,1));font-weight:800;letter-spacing:-.2px;}
.orep-pred-preview-desc{font-size:calc(11px * var(--fs,1));color:var(--t2);font-weight:600;margin-top:2px;line-height:1.4;}
/* 상세 페이지 예측 수치 카드 */
.orep-detail-pred{background:linear-gradient(135deg,rgba(184,146,58,.12),rgba(242,168,62,.06));border:1.5px dashed rgba(184,146,58,.4);border-radius:12px;padding:11px 13px;margin-bottom:11px;}
.orep-detail-pred-eyebrow{font-size:calc(10px * var(--fs,1));color:#8F4507;font-weight:800;letter-spacing:.6px;text-transform:uppercase;margin-bottom:5px;}
.orep-detail-pred-row{display:flex;align-items:center;gap:10px;}
.orep-detail-pred-val{font-family:'DM Mono',monospace;font-size:calc(22px * var(--fs,1));font-weight:800;color:#3a2a05;font-variant-numeric:tabular-nums;letter-spacing:-.2px;}
.orep-detail-pred-wx{padding:5px 11px;border-radius:999px;font-size:calc(12px * var(--fs,1));font-weight:800;letter-spacing:.3px;}
.orep-detail-pred-verdict{font-size:calc(11px * var(--fs,1));color:var(--t2);margin-top:6px;font-weight:700;}

/* 도제식 멘토링 채팅 (Phase 4b) */
#og-mentor-modal{position:fixed;inset:0;z-index:100070;display:none;}
#og-mentor-modal.open{display:block;}
#og-mentor-modal .ogm-back{position:absolute;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
#og-mentor-modal .ogm-panel{position:absolute;left:0;right:0;bottom:0;height:min(78vh,640px);background:var(--bg2);border-top-left-radius:20px;border-top-right-radius:20px;display:flex;flex-direction:column;box-shadow:0 -12px 40px rgba(15,23,42,.22);padding-bottom:env(safe-area-inset-bottom);}
#og-mentor-modal .ogm-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--bd);}
#og-mentor-modal .ogm-title{font-family:var(--font-hd);font-size:calc(15px * var(--fs,1));color:var(--t);}
#og-mentor-modal .ogm-x{background:transparent;border:none;font-size:calc(20px * var(--fs,1));color:var(--t3);cursor:pointer;padding:6px 10px;min-width:40px;border-radius:8px;}
#og-mentor-modal .ogm-x:hover{background:var(--bg3);color:var(--t);}
#og-mentor-modal .ogm-msgs{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:9px;-webkit-overflow-scrolling:touch;}
#og-mentor-modal .ogm-msg{display:flex;flex-direction:column;align-items:flex-start;max-width:78%;}
#og-mentor-modal .ogm-msg.mine{align-self:flex-end;align-items:flex-end;}
#og-mentor-modal .ogm-msg-nick{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:700;margin-bottom:2px;padding:0 4px;}
#og-mentor-modal .ogm-msg-bubble{background:var(--bg3);border:1px solid var(--bd);border-radius:16px;padding:8px 12px;font-size:calc(13px * var(--fs,1));color:var(--t);line-height:1.5;word-break:break-word;white-space:pre-wrap;}
#og-mentor-modal .ogm-msg.mine .ogm-msg-bubble{background:rgba(168,85,247,.10);border-color:#A855F7;color:#5B21B6;}
#og-mentor-modal .ogm-msg-t{font-size:calc(11px * var(--fs,1));color:var(--t3);margin-top:2px;padding:0 4px;font-family:'DM Mono',monospace;}
#og-mentor-modal .ogm-input-row{display:flex;gap:8px;padding:10px 14px 14px;border-top:1px solid var(--bd);background:var(--bg2);}
#og-mentor-modal .ogm-input{flex:1;background:var(--bg);border:1.5px solid var(--bd);border-radius:12px;padding:10px 13px;font-size:calc(14px * var(--fs,1));color:var(--t);font-family:inherit;outline:none;}
#og-mentor-modal .ogm-input:focus{border-color:#A855F7;}
#og-mentor-modal .ogm-send{background:#A855F7;color:#fff;border:none;border-radius:12px;padding:10px 16px;font-size:calc(13px * var(--fs,1));font-weight:800;cursor:pointer;font-family:inherit;box-shadow:0 3px 0 #7E22CE;}
#og-mentor-modal .ogm-send:active{transform:translateY(2px);box-shadow:0 1px 0 #7E22CE;}
@media (min-width:640px){
  #og-mentor-modal .ogm-panel{left:50%;right:auto;bottom:24px;transform:translateX(-50%);width:min(540px,92vw);border-radius:16px;padding-bottom:0;}
}
/* 도제 숙제 배정 (Phase 4b 확장) */
#og-mentor-modal .ogm-assignment{padding:0 14px;background:var(--bg2);}
#og-mentor-modal .ogm-assignment:empty{padding:0;}
#og-mentor-modal .ogm-as-card{background:linear-gradient(135deg,rgba(242,168,62,.12),rgba(184,146,58,.06));border:1.5px solid rgba(184,146,58,.35);border-radius:12px;padding:11px 12px;margin:10px 0;}
#og-mentor-modal .ogm-as-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
#og-mentor-modal .ogm-as-emoji{font-size:calc(24px * var(--fs,1));flex-shrink:0;}
#og-mentor-modal .ogm-as-body{flex:1;min-width:0;}
#og-mentor-modal .ogm-as-eyebrow{font-size:calc(11px * var(--fs,1));color:#8F4507;letter-spacing:.5px;font-weight:800;text-transform:uppercase;}
#og-mentor-modal .ogm-as-title{font-size:calc(14px * var(--fs,1));color:var(--t);font-weight:800;line-height:1.35;margin-top:2px;overflow:hidden;text-overflow:ellipsis;}
#og-mentor-modal .ogm-as-actions{display:flex;gap:6px;}
#og-mentor-modal .ogm-as-btn{flex:1;background:#E27C1F;color:#fff;border:none;border-radius:8px;padding:8px 10px;font-size:calc(12px * var(--fs,1));font-weight:800;cursor:pointer;font-family:inherit;}
#og-mentor-modal .ogm-as-btn.ghost{background:transparent;color:#8F4507;border:1.5px solid rgba(184,146,58,.4);}
#og-mentor-modal .ogm-as-empty{width:100%;background:rgba(168,85,247,.06);border:1.5px dashed #A855F7;color:#7C3AED;border-radius:12px;padding:11px;margin:10px 0;font-size:calc(13px * var(--fs,1));font-weight:800;cursor:pointer;font-family:inherit;text-align:center;}
#og-mentor-modal .ogm-as-empty:hover{background:rgba(168,85,247,.12);}
#og-mentor-modal .ogm-as-hint{font-size:calc(11px * var(--fs,1));color:var(--t3);text-align:center;padding:8px 0 4px;font-style:italic;}
#og-mentor-modal .ogm-msg-system{align-self:center;background:rgba(6,182,212,.10);border:1px solid rgba(6,182,212,.28);color:#0284C7;border-radius:999px;padding:5px 12px;font-size:calc(11px * var(--fs,1));font-weight:700;letter-spacing:.2px;margin:4px 0;max-width:90%;text-align:center;}

/* 작성 폼 */
.orep-field{margin-bottom:11px;}
.orep-label{font-size:calc(11px * var(--fs,1));color:var(--t2);font-weight:800;letter-spacing:.3px;display:block;margin-bottom:5px;text-transform:uppercase;}
.orep-input,.orep-textarea{width:100%;background:var(--bg);border:1.5px solid var(--bd);border-radius:12px;padding:9px 12px;font-size:calc(13px * var(--fs,1));color:var(--t);font-family:inherit;outline:none;transition:border-color .15s ease;}
.orep-input:focus,.orep-textarea:focus{border-color:#0284C7;}
.orep-textarea{resize:vertical;line-height:1.6;min-height:80px;}
.orep-cat-grid,.orep-weather-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;}
.orep-cat-pick,.orep-w-pick{background:var(--bg);border:1.5px solid var(--bd);color:var(--t2);border-radius:8px;padding:8px 10px;font-size:calc(12px * var(--fs,1));font-weight:800;cursor:pointer;font-family:inherit;transition:all .15s ease;text-align:left;}
.orep-cat-pick:hover,.orep-w-pick:hover{border-color:var(--c);color:var(--c);}
.orep-cat-pick.sel{background:color-mix(in srgb, var(--c) 12%, var(--bg)); border-color:var(--c);color:var(--c);}
.orep-w-pick{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;padding:9px 4px;}
.orep-w-pick.sel{background:color-mix(in srgb, var(--c) 12%, var(--bg)); border-color:var(--c);color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent);}
.orep-w-pick-emoji{font-size:calc(22px * var(--fs,1));line-height:1;}
.orep-w-pick-name{font-size:calc(11px * var(--fs,1));}

.orep-writer-actions{display:flex;gap:7px;margin-top:14px;margin-bottom:12px;}
.orep-btn-primary,.orep-btn-ghost{flex:1;padding:11px;font-size:calc(12px * var(--fs,1));font-weight:800;border-radius:12px;cursor:pointer;font-family:inherit;border:1.5px solid;transition:transform .12s ease;}
.orep-btn-primary{background:linear-gradient(135deg,#0284C7,#06B6D4);border-color:transparent;color:#fff;box-shadow:0 3px 10px rgba(6,182,212,.3);}
.orep-btn-ghost{background:var(--bg);border-color:var(--bd);color:var(--t2);}
.orep-btn-primary:active,.orep-btn-ghost:active{transform:translateY(1px);}

/* 임시저장 목록 */
.orep-drafts-h{font-size:calc(11px * var(--fs,1));color:var(--t2);font-weight:800;text-transform:uppercase;letter-spacing:.3px;margin-top:14px;margin-bottom:6px;}
.orep-drafts{display:flex;flex-direction:column;gap:5px;}
.orep-draft-item{display:flex;align-items:center;gap:7px;background:rgba(245,158,11,.05);border:1.5px solid rgba(245,158,11,.25);border-radius:8px;padding:8px 10px;}
.orep-draft-info{flex:1;min-width:0;}
.orep-draft-hook{font-size:calc(12px * var(--fs,1));font-weight:800;color:var(--t);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.orep-draft-meta{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:600;}
.orep-draft-act{background:var(--bg2);border:1px solid var(--bd);color:var(--t2);border-radius:8px;padding:4px 7px;font-size:calc(10px * var(--fs,1));font-weight:800;cursor:pointer;font-family:inherit;}
.orep-draft-act.del{color:var(--red);border-color:rgba(220,38,38,.3);}

.orep-back-btn{width:100%;background:transparent;border:none;color:var(--t3);font-size:calc(12px * var(--fs,1));font-weight:700;padding:8px;cursor:pointer;margin-top:8px;font-family:inherit;}

/* ════════════════════════════════════════════════
   🔧 Oracle Pro Terminal — 프리미엄 다크 터미널
   ──────────────────────────────────────────────── */
/* 오라클 페이지 진입 카드 */
.oracle-pro-card{position:relative;display:flex;align-items:center;gap:13px;background:linear-gradient(135deg,#0a0e1a,#1a1530 80%);border:1.5px solid #06B6D4;border-radius:16px;padding:14px;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease;overflow:hidden;box-shadow:0 4px 16px rgba(6,182,212,.3),inset 0 0 0 1px rgba(255,255,255,.03);margin-top:14px;}
.oracle-pro-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(6,182,212,.4);}
.oracle-pro-bg{position:absolute;inset:0;background:
  radial-gradient(circle at 20% 50%, rgba(6,182,212,.15), transparent 40%),
  radial-gradient(circle at 80% 50%, rgba(168,85,247,.12), transparent 40%);
  pointer-events:none;}
.oracle-pro-emoji{font-size:calc(34px * var(--fs,1));flex-shrink:0;filter:drop-shadow(0 0 8px rgba(6,182,212,.6));position:relative;}
.oracle-pro-body{flex:1;min-width:0;position:relative;}
.oracle-pro-tag{font-size:calc(11px * var(--fs,1));color:#06B6D4;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:2px;}
.oracle-pro-title{font-family:'DM Mono','Courier New',monospace;font-size:calc(18px * var(--fs,1));font-weight:700;color:#fff;letter-spacing:1px;margin-bottom:3px;text-shadow:0 0 12px rgba(6,182,212,.5);}
.oracle-pro-desc{font-size:calc(11px * var(--fs,1));color:#94A3B8;font-weight:600;line-height:1.5;font-family:'DM Mono','Courier New',monospace;}
.oracle-pro-cta{color:#06B6D4;font-size:calc(24px * var(--fs,1));font-weight:800;text-shadow:0 0 8px rgba(6,182,212,.6);}

/* Pro Terminal — 풀스크린 모달 */
#opd-root{position:fixed;inset:0;z-index:10097;display:none;font-family:'DM Mono','Courier New',monospace;}
#opd-root.open{display:block;}
.opd-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.92);}
.opd-shell{position:absolute;inset:0;background:radial-gradient(ellipse at top, #0c1226 0%, #050811 100%);overflow-y:auto;-webkit-overflow-scrolling:touch;padding:max(env(safe-area-inset-top, 14px), 14px) 14px max(env(safe-area-inset-bottom, 14px), 14px);}
.opd-close{position:fixed;top:max(env(safe-area-inset-top, 12px), 12px);right:12px;width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);color:#94A3B8;font-size:calc(20px * var(--fs,1));cursor:pointer;line-height:1;font-weight:500;display:flex;align-items:center;justify-content:center;z-index:10;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.opd-close:hover{color:#fff;border-color:#06B6D4;}

.opd-body{display:flex;flex-direction:column;gap:14px;max-width:520px;margin:0 auto;padding-bottom:20px;}

/* 잠금 화면 */
.opd-lock{text-align:center;padding:60px 16px;color:#94A3B8;}
.opd-lock-ic{font-size:calc(64px * var(--fs,1));margin-bottom:14px;filter:drop-shadow(0 0 16px rgba(6,182,212,.5));}
.opd-lock-title{font-family:'DM Mono',monospace;font-size:calc(22px * var(--fs,1));font-weight:700;color:#06B6D4;letter-spacing:2px;margin-bottom:8px;text-shadow:0 0 16px rgba(6,182,212,.4);}
.opd-lock-sub{font-size:calc(12px * var(--fs,1));font-weight:600;margin-bottom:18px;line-height:1.6;}
.opd-lock-tagline{font-size:calc(12px * var(--fs,1));color:#A855F7;font-style:italic;border-left:2px solid #A855F7;padding:8px 14px;text-align:left;max-width:340px;margin:18px auto 0;line-height:1.7;}

/* Free 잠금 화면 · 흐릿한 미리보기 */
.opd-lock-preview{position:relative;max-width:320px;margin:0 auto 6px;border:1px solid rgba(6,182,212,.25);border-radius:12px;padding:14px 16px;background:linear-gradient(135deg,rgba(6,182,212,.06),rgba(168,85,247,.04));overflow:hidden;}
.opd-lock-blur{filter:blur(2.5px);opacity:.55;display:flex;flex-direction:column;gap:8px;text-align:left;}
.opd-lock-blur-row{display:flex;align-items:center;gap:10px;font-size:calc(12px * var(--fs,1));color:#CBD5E1;font-family:'DM Mono',monospace;}
.opd-lock-blur-row span:first-child{font-size:calc(16px * var(--fs,1));}
.opd-lock-blur-row span:nth-child(2){flex:1;}
.opd-lock-blur-dots{color:#06B6D4;letter-spacing:2px;}
.opd-lock-veil{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:calc(38px * var(--fs,1));background:linear-gradient(180deg,rgba(5,8,17,0) 0%,rgba(5,8,17,.7) 100%);}
.opd-lock-cta{margin-top:22px;background:#06B6D4;border:none;color:#031017;font-family:'DM Mono',monospace;font-weight:800;font-size:calc(13px * var(--fs,1));letter-spacing:.5px;padding:12px 22px;border-radius:12px;cursor:pointer;box-shadow:0 4px 16px rgba(6,182,212,.32);}
.opd-lock-cta:active{transform:translateY(1px);}

/* 항해 여정 (Sailor→Oracle) */
.opd-journey{margin-top:10px;padding:10px 12px;border:1px solid rgba(6,182,212,.2);border-radius:12px;background:rgba(6,182,212,.04);}
.opd-journey.compact{margin:18px auto 6px;max-width:340px;}
.opd-journey-title{font-family:'DM Mono',monospace;font-size:calc(11px * var(--fs,1));color:#94A3B8;margin-bottom:8px;letter-spacing:.5px;}
.opd-journey-track{display:flex;align-items:center;gap:4px;}
.opd-journey-node{flex:none;text-align:center;color:#475569;font-family:'DM Mono',monospace;font-size:calc(10px * var(--fs,1));transition:color .2s ease;}
.opd-journey-node .opd-journey-ic{font-size:calc(20px * var(--fs,1));line-height:1;filter:grayscale(1);opacity:.5;transition:filter .3s ease,opacity .3s ease,transform .3s ease;}
.opd-journey-node.done .opd-journey-ic{filter:grayscale(0);opacity:1;}
.opd-journey-node.done{color:#06B6D4;}
.opd-journey-node.here .opd-journey-ic{transform:scale(1.25);filter:grayscale(0) drop-shadow(0 0 6px rgba(6,182,212,.7));opacity:1;}
.opd-journey-node.here{color:var(--acc-text);font-weight:700;}
.opd-journey-seg{flex:1;height:3px;background:rgba(148,163,184,.18);border-radius:4px;overflow:hidden;position:relative;}
.opd-journey-seg-fill{height:100%;background:linear-gradient(90deg,#06B6D4,#A855F7);border-radius:4px;transition:width .4s ease;}

/* 학습 아이콘 (지표 카드) */
.opd-learn-ic{position:absolute;top:4px;right:4px;width:20px;height:20px;border:none;border-radius:8px;background:rgba(6,182,212,.14);color:#06B6D4;font-size:calc(11px * var(--fs,1));line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background .15s ease,transform .15s ease;}
.opd-learn-ic:hover{background:rgba(6,182,212,.28);transform:scale(1.12);}
.opd-learn-ic.inline{position:static;display:inline-flex;margin-left:6px;vertical-align:middle;width:22px;height:22px;font-size:calc(12px * var(--fs,1));}
.opd-ticker-item{position:relative;}
.opd-section-h-sub{font-size:calc(10px * var(--fs,1));color:#64748B;font-weight:400;letter-spacing:.3px;margin-left:8px;font-family:'DM Mono',monospace;}

/* 학습 팝오버 */
.opd-learn-pop{position:fixed;inset:0;background:rgba(5,8,17,.75);z-index:10098;display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);}
.opd-learn-card{background:linear-gradient(160deg,#0F172A,#1E293B);border:1px solid rgba(6,182,212,.4);border-radius:16px;padding:22px 20px 18px;max-width:340px;width:100%;color:#E2E8F0;box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 40px rgba(6,182,212,.15);}
.opd-learn-eyebrow{font-family:'DM Mono',monospace;font-size:calc(10px * var(--fs,1));letter-spacing:1.4px;color:#06B6D4;text-transform:uppercase;margin-bottom:6px;}
.opd-learn-name{font-family:var(--font-hd);font-size:calc(18px * var(--fs,1));line-height:1.3;margin-bottom:10px;color:#fff;}
.opd-learn-desc{font-size:calc(13px * var(--fs,1));line-height:1.6;color:#CBD5E1;margin-bottom:18px;}
.opd-learn-actions{display:flex;gap:8px;justify-content:flex-end;}
.opd-learn-actions button{border:none;border-radius:8px;padding:9px 14px;font-family:'DM Mono',monospace;font-size:calc(12px * var(--fs,1));font-weight:700;cursor:pointer;}
.opd-learn-close{background:rgba(148,163,184,.15);color:#94A3B8;}
.opd-learn-open{background:#06B6D4;color:#031017;}
.opd-learn-open:active{transform:translateY(1px);}

/* 헤더 */
.opd-header{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-right:40px;border-bottom:1px solid rgba(6,182,212,.2);padding-bottom:10px;flex-wrap:wrap;}
.opd-header-l{flex:1;min-width:200px;}
.opd-brand{font-size:calc(13px * var(--fs,1));font-weight:700;color:#06B6D4;letter-spacing:1.5px;text-shadow:0 0 8px rgba(6,182,212,.5);}
.opd-brand-mark{color:#A855F7;font-size:calc(14px * var(--fs,1));}
.opd-brand-tag{font-size:calc(11px * var(--fs,1));color:#64748B;font-weight:600;margin-left:4px;letter-spacing:.5px;}
.opd-brand-sub{font-size:calc(10px * var(--fs,1));color:#64748B;margin-top:2px;font-variant-numeric:tabular-nums;}
.opd-header-r{display:flex;gap:9px;}
.opd-stat{background:rgba(6,182,212,.05);border:1px solid rgba(6,182,212,.2);border-radius:8px;padding:5px 10px;}
.opd-stat-l{font-size:calc(10px * var(--fs,1));color:#64748B;font-weight:700;letter-spacing:.8px;}
.opd-stat-v{font-size:calc(13px * var(--fs,1));color:#06B6D4;font-weight:700;font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:4px;letter-spacing:.5px;}
.opd-led{width:7px;height:7px;border-radius:50%;display:inline-block;}
.opd-led.on{background:#22C55E;box-shadow:0 0 6px #22C55E;animation:opd-pulse-led 1.5s ease-in-out infinite;}
@keyframes opd-pulse-led{0%,100%{opacity:1;}50%{opacity:.4;}}

/* 섹션 */
.opd-section{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:11px 12px;}
.opd-section-h{font-size:calc(10px * var(--fs,1));color:#06B6D4;font-weight:700;letter-spacing:1.5px;margin-bottom:8px;text-transform:uppercase;}

/* 티커 */
.opd-ticker{display:grid;grid-template-columns:repeat(auto-fill, minmax(82px, 1fr));gap:6px;}
.opd-ticker-item{position:relative;background:rgba(0,0,0,.4);border:1px solid var(--c);border-radius:8px;padding:6px 8px;overflow:hidden;}
.opd-tick-name{font-size:calc(11px * var(--fs,1));color:var(--c);font-weight:800;letter-spacing:.6px;margin-bottom:1px;opacity:.85;}
.opd-tick-val{font-size:calc(14px * var(--fs,1));color:#fff;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.3px;}
.opd-tick-val.opd-tick-update{animation:opd-tick-flash .5s ease-out;}
@keyframes opd-tick-flash{0%{color:#22C55E;}100%{color:#fff;}}
.opd-tick-chg{font-size:calc(11px * var(--fs,1));font-weight:700;font-variant-numeric:tabular-nums;margin-top:1px;}
.opd-pulse{position:absolute;top:3px;right:4px;width:5px;height:5px;border-radius:50%;background:var(--c);box-shadow:0 0 6px var(--c);animation:opd-pulse 1.5s ease-in-out infinite;}
@keyframes opd-pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.3;transform:scale(1.4);}}

/* Black Swan */
.opd-bs{background:rgba(0,0,0,.4);border:1.5px solid;border-radius:8px;padding:10px 12px;}
.opd-bs-row{display:flex;align-items:center;gap:10px;margin-bottom:7px;}
.opd-bs-led{width:14px;height:14px;border-radius:50%;flex-shrink:0;animation:opd-pulse-led 1.2s ease-in-out infinite;}
.opd-bs-info{flex:1;min-width:0;}
.opd-bs-name{font-size:calc(14px * var(--fs,1));font-weight:700;letter-spacing:1.5px;}
.opd-bs-hint{font-size:calc(10px * var(--fs,1));color:#94A3B8;font-weight:600;margin-top:1px;}
.opd-bs-score{font-size:calc(18px * var(--fs,1));font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.5px;}
.opd-bs-bar{height:5px;background:rgba(255,255,255,.06);border-radius:4px;overflow:hidden;}
.opd-bs-fill{height:100%;transition:width .5s ease;}

/* 상관계수 매트릭스 */
.opd-matrix-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.opd-matrix{border-collapse:collapse;font-size:calc(11px * var(--fs,1));color:#94A3B8;width:100%;min-width:340px;}
.opd-matrix th{background:rgba(255,255,255,.04);color:#06B6D4;font-weight:700;padding:5px 4px;border:1px solid rgba(255,255,255,.06);letter-spacing:.5px;text-align:center;}
.opd-matrix td{padding:5px 3px;border:1px solid rgba(255,255,255,.06);text-align:center;font-variant-numeric:tabular-nums;font-weight:700;}
.opd-matrix-legend{display:flex;gap:11px;margin-top:6px;font-size:calc(11px * var(--fs,1));color:#64748B;font-weight:600;}
.opd-mat-leg.pos{color:#67E8F9;}
.opd-mat-leg.neg{color:#F9A8D4;}
.opd-mat-leg.diag{color:#22C55E;}

/* Portfolio Defense (Phase 3) */
.opd-def-wrap{display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:stretch;}
@media (max-width:640px){.opd-def-wrap{grid-template-columns:1fr;}}
.opd-def-score{border:1.5px solid;border-radius:12px;padding:14px 10px 12px;text-align:center;display:flex;flex-direction:column;justify-content:center;}
.opd-def-band{font-size:calc(11px * var(--fs,1));font-weight:800;letter-spacing:1.3px;margin-bottom:2px;}
.opd-def-num{font-family:'DM Mono',monospace;font-size:calc(38px * var(--fs,1));font-weight:800;line-height:1;font-variant-numeric:tabular-nums;}
.opd-def-sub{font-size:calc(10px * var(--fs,1));color:#64748B;font-weight:700;margin-top:2px;letter-spacing:.6px;}
.opd-def-right{display:flex;flex-direction:column;gap:8px;min-width:0;}
.opd-def-weights{display:flex;flex-wrap:wrap;gap:5px;font-size:calc(10px * var(--fs,1));color:#94A3B8;}
.opd-def-w{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:8px;padding:3px 7px;font-weight:600;letter-spacing:.3px;}
.opd-def-w b{color:#cbd5e1;font-weight:700;}
.opd-def-tbl{width:100%;font-size:calc(11px * var(--fs,1));border-collapse:collapse;color:#cbd5e1;}
.opd-def-tbl tr{border-bottom:1px dashed rgba(255,255,255,.05);}
.opd-def-tbl tr:last-child{border-bottom:none;}
.opd-def-name{padding:5px 6px 5px 0;font-weight:700;color:#e2e8f0;font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;}
.opd-def-hint{padding:5px 6px;font-size:calc(11px * var(--fs,1));color:#64748B;font-weight:600;}
.opd-def-imp{padding:5px 0 5px 6px;font-family:'DM Mono',monospace;font-weight:800;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.opd-def-empty{font-size:calc(11px * var(--fs,1));color:#64748B;text-align:center;padding:12px 0;font-style:italic;}

/* Yahoo 실시간 티커 (Phase 6) */
.opd-yt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px;}
.opd-yt-item{background:rgba(0,0,0,.35);border:1px solid;border-radius:8px;padding:7px 9px;position:relative;overflow:hidden;}
.opd-yt-cat{font-size:calc(10px * var(--fs,1));font-weight:800;letter-spacing:.8px;text-transform:uppercase;margin-bottom:2px;opacity:.85;}
.opd-yt-sym{font-family:'DM Mono',monospace;font-size:calc(13px * var(--fs,1));font-weight:800;color:#fff;letter-spacing:.5px;}
.opd-yt-label{font-size:calc(11px * var(--fs,1));color:#94A3B8;font-weight:600;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.opd-yt-price{font-family:'DM Mono',monospace;font-size:calc(15px * var(--fs,1));font-weight:800;color:#fff;font-variant-numeric:tabular-nums;margin-top:4px;letter-spacing:.3px;}
.opd-yt-chg{font-size:calc(11px * var(--fs,1));font-weight:800;font-variant-numeric:tabular-nums;margin-top:1px;letter-spacing:.3px;}
.opd-yt-empty{font-size:calc(11px * var(--fs,1));color:#64748B;text-align:center;padding:14px 0;font-style:italic;}

/* PROS ONLY · Oracle Chat (프로 터미널 채팅) */
.opd-chat-wrap{display:flex;flex-direction:column;gap:8px;}
.opd-chat-messages{background:rgba(0,0,0,.4);border:1px solid rgba(168,85,247,.22);border-radius:8px;padding:9px 10px;height:220px;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:7px;}
.opd-chat-messages::-webkit-scrollbar{width:4px;}
.opd-chat-messages::-webkit-scrollbar-thumb{background:rgba(168,85,247,.35);border-radius:4px;}
.opd-chat-empty{font-size:calc(11px * var(--fs,1));color:#64748B;text-align:center;padding:16px 0;font-style:italic;}
.opd-chat-msg{display:flex;align-items:flex-start;gap:8px;}
.opd-chat-msg.mine{flex-direction:row-reverse;}
.opd-chat-avatar{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#A855F7,#7C3AED);color:#fff;font-family:'DM Mono',monospace;font-size:calc(11px * var(--fs,1));font-weight:800;display:flex;align-items:center;justify-content:center;letter-spacing:.3px;box-shadow:0 0 8px rgba(168,85,247,.4);}
.opd-chat-msg.mine .opd-chat-avatar{background:linear-gradient(135deg,#06B6D4,#0284C7);box-shadow:0 0 8px rgba(6,182,212,.4);}
.opd-chat-body{flex:1;min-width:0;max-width:calc(100% - 40px);}
.opd-chat-msg.mine .opd-chat-body{text-align:right;}
.opd-chat-meta{display:flex;align-items:center;gap:6px;font-size:calc(11px * var(--fs,1));margin-bottom:2px;}
.opd-chat-msg.mine .opd-chat-meta{justify-content:flex-end;}
.opd-chat-nick{color:#C4B5FD;font-weight:800;letter-spacing:.2px;}
.opd-chat-msg.mine .opd-chat-nick{color:#7DD3FC;}
.opd-chat-time{color:#475569;font-family:'DM Mono',monospace;}
.opd-chat-text{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:6px 9px;font-size:calc(12px * var(--fs,1));color:#e2e8f0;line-height:1.45;word-break:break-word;white-space:pre-wrap;display:inline-block;max-width:100%;}
.opd-chat-msg.mine .opd-chat-text{background:rgba(6,182,212,.10);border-color:rgba(6,182,212,.28);color:#67E8F9;}
.opd-chat-input-row{display:flex;gap:6px;}
.opd-chat-input{flex:1;background:rgba(0,0,0,.4);border:1px solid rgba(168,85,247,.28);color:#fff;border-radius:8px;padding:8px 11px;font-size:calc(12px * var(--fs,1));font-family:'DM Mono',monospace;outline:none;letter-spacing:.2px;}
.opd-chat-input:focus{border-color:#A855F7;box-shadow:0 0 10px rgba(168,85,247,.35);}
.opd-chat-input::placeholder{color:#64748B;}
.opd-chat-send{background:linear-gradient(135deg,#A855F7,#7C3AED);color:#fff;border:none;border-radius:8px;padding:0 14px;font-size:calc(11px * var(--fs,1));font-weight:800;cursor:pointer;font-family:'DM Mono',monospace;letter-spacing:.6px;box-shadow:0 0 12px rgba(168,85,247,.35);}
.opd-chat-send:hover{transform:translateY(-1px);}
.opd-chat-send:active{transform:translateY(1px);}
.opd-chat-hint{font-size:calc(11px * var(--fs,1));color:#64748B;text-align:center;font-style:italic;letter-spacing:.3px;}

/* ═════ 커뮤니티 페이지 재디자인 ═════ */
/* 히어로 배너 */
#page-community .cm-hero{position:relative;border-radius:24px;overflow:hidden;margin:6px 0 20px;background:linear-gradient(135deg,#0f172a 0%,#1e1b4b 60%,#4c1d95 100%);color:#fff;box-shadow:0 8px 28px rgba(76,29,149,.28);}
#page-community .cm-hero-bg{position:absolute;inset:0;opacity:.35;background:
  radial-gradient(circle at 20% 30%,rgba(168,85,247,.55),transparent 45%),
  radial-gradient(circle at 80% 70%,rgba(6,182,212,.35),transparent 45%);
  animation:cmHeroPulse 8s ease-in-out infinite alternate;}
@keyframes cmHeroPulse{from{transform:scale(1);}to{transform:scale(1.06);}}
#page-community .cm-hero-body{position:relative;padding:20px 20px 18px;}
#page-community .cm-hero-eyebrow{font-size:calc(11px * var(--fs,1));letter-spacing:2px;color:#C4B5FD;font-weight:800;margin-bottom:6px;}
#page-community .cm-hero-title{font-family:var(--font-hd);font-size:calc(26px * var(--fs,1));font-weight:800;letter-spacing:-.5px;line-height:1.1;margin-bottom:6px;background:linear-gradient(90deg,#fff 0%,#E9D5FF 100%);-webkit-background-clip:text;background-clip:text;color:transparent;}
#page-community .cm-hero-sub{font-size:calc(12px * var(--fs,1));color:#DDD6FE;font-weight:500;line-height:1.5;margin-bottom:14px;}
#page-community .cm-hero-stats{display:flex;gap:8px;}
#page-community .cm-hero-stat{flex:1;background:rgba(255,255,255,.08);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:8px 6px;text-align:center;}
#page-community .cm-hero-stat-emoji{font-size:calc(18px * var(--fs,1));line-height:1;margin-bottom:3px;}
#page-community .cm-hero-stat-lb{font-size:calc(11px * var(--fs,1));color:#C4B5FD;font-weight:700;letter-spacing:.3px;}

/* 카테고리 헤더 */
#page-community .cm-cat-h{display:flex;align-items:center;gap:12px;margin:22px 0 12px;}
#page-community .cm-cat-num{font-family:'DM Serif Display',serif;font-size:calc(32px * var(--fs,1));font-weight:800;background:linear-gradient(135deg,#A855F7,#EC4899);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1;letter-spacing:-1px;min-width:44px;text-align:center;}
#page-community .cm-cat-body{flex:1;min-width:0;}
#page-community .cm-cat-title{font-family:var(--font-hd);font-size:calc(15px * var(--fs,1));font-weight:800;color:var(--t);letter-spacing:-.2px;}
#page-community .cm-cat-sub{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:500;margin-top:2px;line-height:1.4;}

/* 카드 그리드 */
#page-community .cm-card-grid{display:grid;grid-template-columns:1fr;gap:11px;margin-bottom:6px;}
@media (min-width:640px){#page-community .cm-card-grid{grid-template-columns:1fr 1fr;}}
#page-community .cm-card{position:relative;overflow:hidden;background:var(--bg2);border:1.5px solid var(--bd);border-radius:16px;padding:16px 15px 14px;text-align:left;cursor:pointer;font-family:inherit;color:var(--t);transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .22s ease,border-color .2s ease;box-shadow:0 3px 0 var(--bd2);}
#page-community .cm-card:hover{border-color:var(--acc);transform:translateY(-2px);box-shadow:0 6px 16px rgba(15,23,42,.10);}
#page-community .cm-card:active{transform:translateY(1px);box-shadow:0 1px 0 var(--bd2);}
#page-community .cm-card-halo{position:absolute;top:-40px;right:-30px;width:150px;height:150px;border-radius:50%;filter:blur(30px);opacity:.25;pointer-events:none;transition:opacity .35s ease;}
#page-community .cm-card:hover .cm-card-halo{opacity:.45;}
#page-community .cm-card-icon{font-size:calc(34px * var(--fs,1));line-height:1;margin-bottom:8px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.15));}
#page-community .cm-card-tag{display:inline-block;font-size:calc(11px * var(--fs,1));font-weight:800;letter-spacing:1.4px;padding:3px 8px;border-radius:999px;margin-bottom:6px;}
#page-community .cm-card-title{font-family:var(--font-hd);font-size:calc(17px * var(--fs,1));font-weight:800;color:var(--t);letter-spacing:-.3px;margin-bottom:5px;line-height:1.2;}
#page-community .cm-card-desc{font-size:calc(12px * var(--fs,1));color:var(--t2);font-weight:500;line-height:1.55;margin-bottom:10px;}
#page-community .cm-card-desc b{color:var(--t);font-weight:800;}
#page-community .cm-card-chips{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:11px;}
#page-community .cm-chip{background:rgba(0,0,0,.04);border:1px solid var(--bd);color:var(--t2);border-radius:999px;padding:3px 8px;font-size:calc(10px * var(--fs,1));font-weight:700;letter-spacing:.2px;}
#page-community .cm-card-cta{font-size:calc(12px * var(--fs,1));font-weight:800;letter-spacing:.3px;display:inline-flex;align-items:center;gap:4px;}

/* 카드별 컬러 */
#page-community .cm-card-forecast .cm-card-halo{background:#06B6D4;}
#page-community .cm-card-forecast .cm-card-tag{background:rgba(6,182,212,.12);color:#0369A1;}
#page-community .cm-card-forecast .cm-card-cta{color:#0369A1;}
#page-community .cm-card-forecast:hover{border-color:#06B6D4;}

#page-community .cm-card-subscribed .cm-card-halo{background:#A855F7;}
#page-community .cm-card-subscribed .cm-card-tag{background:rgba(168,85,247,.12);color:#7C3AED;}
#page-community .cm-card-subscribed .cm-card-cta{color:#7C3AED;}
#page-community .cm-card-subscribed:hover{border-color:#A855F7;}

#page-community .cm-card-workshop .cm-card-halo{background:#F59E0B;}
#page-community .cm-card-workshop .cm-card-tag{background:rgba(245,158,11,.14);color:#B45309;}
#page-community .cm-card-workshop .cm-card-cta{color:#B45309;}
#page-community .cm-card-workshop:hover{border-color:#F59E0B;}

#page-community .cm-card-guild .cm-card-halo{background:#22C55E;}
#page-community .cm-card-guild .cm-card-tag{background:rgba(34,197,94,.12);color:#15803D;}
#page-community .cm-card-guild .cm-card-cta{color:#15803D;}
#page-community .cm-card-guild:hover{border-color:#22C55E;}

#page-community .cm-card-market .cm-card-halo{background:#EC4899;}
#page-community .cm-card-market .cm-card-tag{background:rgba(236,72,153,.12);color:#BE185D;}
#page-community .cm-card-market .cm-card-cta{color:#BE185D;}
#page-community .cm-card-market:hover{border-color:#EC4899;}

/* 모듈 그리드 */
.opd-modgrid{display:flex;flex-direction:column;gap:9px;}
.opd-mod-group{border-left:2px solid var(--c);padding-left:10px;}
.opd-mod-cat{font-size:calc(11px * var(--fs,1));color:var(--c);font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:5px;}
.opd-mod-row{display:flex;align-items:center;gap:8px;font-size:calc(11px * var(--fs,1));padding:3px 0;border-bottom:1px dashed rgba(255,255,255,.04);}
.opd-mod-row:last-child{border-bottom:none;}
.opd-mod-led{width:7px;height:7px;border-radius:50%;flex-shrink:0;box-shadow:0 0 5px currentColor;}
.opd-mod-row.on .opd-mod-led{box-shadow:0 0 8px var(--c);}
.opd-mod-id{font-size:calc(11px * var(--fs,1));color:#64748B;font-weight:700;letter-spacing:.5px;min-width:110px;font-family:'DM Mono',monospace;}
.opd-mod-name{flex:1;color:#cbd5e1;font-weight:600;font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;}
.opd-mod-st{font-size:calc(11px * var(--fs,1));font-weight:700;letter-spacing:.8px;}
.opd-mod-row.on .opd-mod-st{color:#22C55E;}
.opd-mod-row.off .opd-mod-st{color:#64748B;}
.opd-mod-metric{font-size:calc(11px * var(--fs,1));font-weight:800;letter-spacing:.3px;font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;text-align:right;min-width:88px;padding-left:6px;}
.opd-mod-row.off{opacity:.5;}

/* 이벤트 로그 */
.opd-log{background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.06);border-radius:8px;padding:8px;max-height:160px;overflow-y:auto;font-family:'DM Mono','Courier New',monospace;}
.opd-log-empty{font-size:calc(11px * var(--fs,1));color:#64748B;font-style:italic;text-align:center;padding:18px;}
.opd-log-row{font-size:calc(10px * var(--fs,1));color:#94A3B8;padding:1px 0;line-height:1.6;}
.opd-log-row.warn{color:#F59E0B;}
.opd-log-row.crit{color:#EF4444;font-weight:700;}

/* ════════════════════════════════════════════════
   🏛 Weather Defense Guild — 기상 방어 길드
   ──────────────────────────────────────────────── */
/* 진입 카드 */
.guild-tag{display:inline-block;font-size:calc(11px * var(--fs,1));font-weight:800;background:linear-gradient(135deg,#0E7490,#06B6D4);color:#fff;padding:2px 6px;border-radius:4px;margin-left:5px;letter-spacing:.3px;vertical-align:middle;}
.oracle-guild-card{display:flex;align-items:center;gap:13px;background:linear-gradient(135deg,rgba(14,116,144,.08),rgba(6,182,212,.04));border:1.5px solid rgba(14,116,144,.4);border-radius:16px;padding:13px 14px;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease;box-shadow:0 2px 10px rgba(14,116,144,.15);}
.oracle-guild-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(14,116,144,.25);}
.oracle-guild-emblem{font-size:calc(34px * var(--fs,1));flex-shrink:0;filter:drop-shadow(0 2px 6px rgba(6,182,212,.4));}
.oracle-guild-body{flex:1;min-width:0;}
.oracle-guild-title{font-family:var(--font-hd);font-size:calc(15px * var(--fs,1));font-weight:700;color:#0E7490;}
.oracle-guild-desc{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:600;margin-top:2px;line-height:1.5;}
.oracle-guild-cta{color:#0E7490;font-size:calc(22px * var(--fs,1));font-weight:800;}

/* Guild 모달 */
#og-modal{position:fixed;inset:0;z-index:10098;display:none;}
#og-modal.open{display:block;}
.og-backdrop{position:absolute;inset:0;background:rgba(8,12,24,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.og-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(100% - 24px);max-width:440px;max-height:92vh;overflow-y:auto;background:var(--bg2);border:2px solid var(--bd2);border-radius:24px;padding:20px 18px;box-shadow:0 24px 56px rgba(8,12,24,.4);-webkit-overflow-scrolling:touch;}
.og-close{position:absolute;top:10px;right:14px;background:transparent;border:none;color:var(--t3);font-size:calc(24px * var(--fs,1));cursor:pointer;line-height:1;font-weight:500;padding:0 4px;}

.og-loading{text-align:center;padding:30px 12px;font-size:calc(12px * var(--fs,1));color:var(--t3);font-weight:600;}
.og-head{margin-bottom:14px;}
.og-eyebrow{font-size:calc(11px * var(--fs,1));color:#06B6D4;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:4px;}
.og-title{font-family:var(--font-hd);font-size:calc(20px * var(--fs,1));font-weight:700;color:var(--t);letter-spacing:-.3px;margin-bottom:3px;}
.og-sub{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:600;line-height:1.55;}

.og-create-btn{width:100%;background:linear-gradient(135deg,#0E7490,#06B6D4);color:#fff;border:none;border-radius:12px;padding:13px;font-size:calc(13px * var(--fs,1));font-weight:800;cursor:pointer;font-family:inherit;margin-bottom:12px;letter-spacing:.3px;box-shadow:0 4px 14px rgba(6,182,212,.35);}
.og-create-btn:active{transform:translateY(1px);}
.og-tier-hint{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:600;background:var(--bg3);padding:10px 12px;border-radius:12px;margin-bottom:12px;line-height:1.55;}

.og-empty,.og-empty-list{text-align:center;padding:24px 14px;background:var(--bg3);border-radius:12px;font-size:calc(12px * var(--fs,1));color:var(--t3);font-weight:600;line-height:1.6;}
.og-empty-ic{font-size:calc(40px * var(--fs,1));margin-bottom:8px;}
.og-empty-title{font-size:calc(14px * var(--fs,1));font-weight:800;color:var(--t);margin-bottom:3px;}
.og-empty-sub{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:600;line-height:1.55;}

.og-section{margin-bottom:14px;}
.og-section-h{font-size:calc(11px * var(--fs,1));color:var(--t2);font-weight:800;letter-spacing:.3px;margin-bottom:7px;text-transform:uppercase;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.og-week-label{margin-left:auto;font-size:calc(10px * var(--fs,1));color:var(--acc-text);font-weight:700;text-transform:none;letter-spacing:0;}

/* 길드 목록 카드 */
.og-list{display:flex;flex-direction:column;gap:7px;}
.og-item{display:flex;align-items:center;gap:11px;background:var(--bg);border:1.5px solid var(--bd);border-radius:12px;padding:11px;cursor:pointer;transition:border-color .15s ease,transform .12s ease;}
.og-item:hover{border-color:var(--c, #06B6D4);transform:translateY(-1px);}
.og-it-emblem{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:calc(22px * var(--fs,1));flex-shrink:0;font-weight:700;}
.og-it-body{flex:1;min-width:0;}
.og-it-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:2px;}
.og-it-name{font-size:calc(13px * var(--fs,1));font-weight:800;color:var(--t);}
.og-it-lv{font-size:calc(11px * var(--fs,1));font-weight:800;padding:1.5px 6px;border-radius:4px;letter-spacing:.2px;}
.og-it-cap{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:600;margin-bottom:5px;}
.og-it-quest{font-size:calc(10px * var(--fs,1));color:var(--t2);font-weight:700;font-variant-numeric:tabular-nums;}
.og-it-qbar{height:4px;background:var(--bg3);border-radius:4px;overflow:hidden;margin-top:3px;}
.og-it-qfill{height:100%;border-radius:4px;transition:width .4s ease;}
.og-it-arr{color:var(--t3);font-size:calc(16px * var(--fs,1));font-weight:700;}

/* 길드 상세 헤더 */
.og-detail-head{border:2px solid;border-radius:16px;padding:18px 14px;margin-bottom:14px;text-align:center;}
.og-detail-emblem{font-size:calc(48px * var(--fs,1));margin-bottom:5px;line-height:1;filter:drop-shadow(0 2px 8px rgba(0,0,0,.15));}
.og-detail-name{font-family:var(--font-hd);font-size:calc(22px * var(--fs,1));font-weight:700;color:var(--t);letter-spacing:-.3px;margin-bottom:4px;}
.og-detail-motto{font-size:calc(12px * var(--fs,1));color:var(--t2);font-style:italic;margin-bottom:11px;line-height:1.55;}
.og-detail-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px;}
.og-detail-stat{background:rgba(255,255,255,.05);border-radius:8px;padding:7px 4px;}
.og-detail-stat-l{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-bottom:2px;}
.og-detail-stat-v{font-family:var(--font-hd);font-size:calc(14px * var(--fs,1));font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.2px;}
.og-detail-lv-bar{height:6px;background:rgba(0,0,0,.08);border-radius:4px;overflow:hidden;margin-bottom:4px;}
.og-detail-lv-fill{height:100%;border-radius:4px;transition:width .5s ease;}
.og-detail-lv-meta{font-size:calc(10px * var(--fs,1));color:var(--t3);font-weight:700;font-variant-numeric:tabular-nums;}

/* 퀘스트 카드 */
.og-quest-card{background:var(--bg);border:1.5px solid var(--c);border-radius:12px;padding:13px;}
.og-quest-title{font-family:var(--font-hd);font-size:calc(16px * var(--fs,1));font-weight:700;color:var(--t);margin-bottom:3px;}
.og-quest-desc{font-size:calc(12px * var(--fs,1));color:var(--t2);font-weight:600;line-height:1.6;margin-bottom:9px;}
.og-quest-prog-row{display:flex;align-items:baseline;gap:6px;margin-bottom:5px;}
.og-quest-num{font-family:var(--font-hd);font-size:calc(24px * var(--fs,1));font-weight:700;color:var(--c);font-variant-numeric:tabular-nums;letter-spacing:-.5px;}
.og-quest-target{font-size:calc(13px * var(--fs,1));color:var(--t3);font-weight:700;}
.og-quest-pct{margin-left:auto;font-size:calc(13px * var(--fs,1));color:var(--c);font-weight:800;font-variant-numeric:tabular-nums;}
.og-quest-bar{height:8px;background:var(--bg3);border-radius:4px;overflow:hidden;margin-bottom:7px;}
.og-quest-fill{height:100%;border-radius:4px;transition:width .5s ease;}
.og-quest-reward{font-size:calc(11px * var(--fs,1));color:var(--t2);font-weight:600;background:rgba(245,158,11,.07);border-left:3px solid #F59E0B;padding:7px 10px;border-radius:0 7px 7px 0;line-height:1.55;}

/* 함대원 목록 */
.og-members{display:flex;flex-direction:column;gap:6px;}
.og-member{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--bd);border-radius:12px;padding:9px 11px;}
.og-member.me{background:linear-gradient(135deg,rgba(255,244,214,.4),rgba(255,228,168,.3));border-color:var(--acc);}
.og-mem-rank{font-size:calc(22px * var(--fs,1));flex-shrink:0;width:30px;text-align:center;}
.og-mem-body{flex:1;min-width:0;}
.og-mem-nick{font-size:calc(12px * var(--fs,1));font-weight:800;color:var(--t);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.og-me-tag{display:inline-block;font-size:calc(11px * var(--fs,1));font-weight:800;background:var(--acc);color:var(--on-acc);padding:1px 5px;border-radius:4px;margin-left:3px;}
.og-mem-rank-name{font-size:calc(10px * var(--fs,1));color:var(--t3);font-weight:700;margin-top:1px;}
.og-mem-contrib{text-align:right;flex-shrink:0;}
.og-mem-contrib-v{font-family:var(--font-hd);font-size:calc(14px * var(--fs,1));font-weight:700;font-variant-numeric:tabular-nums;}
.og-mem-contrib-l{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:700;text-transform:uppercase;letter-spacing:.3px;}
.og-mentor-start{margin-left:6px;background:rgba(168,85,247,.10);border:1.5px solid #A855F7;color:#A855F7;border-radius:8px;padding:6px 8px;font-size:calc(14px * var(--fs,1));font-weight:800;cursor:pointer;flex-shrink:0;transition:transform .12s ease;}
.og-mentor-start:hover{background:rgba(168,85,247,.18);transform:scale(1.05);}

/* 공지 */
.og-anns{display:flex;flex-direction:column;gap:6px;}
.og-ann{background:var(--bg);border-left:3px solid #E27C1F;border-radius:0 8px 8px 0;padding:8px 11px;}
.og-ann-text{font-size:calc(12px * var(--fs,1));color:var(--t);line-height:1.6;font-weight:600;}
.og-ann-ts{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:600;margin-top:3px;font-variant-numeric:tabular-nums;}

/* 액션 */
.og-actions{display:flex;gap:7px;margin-top:14px;}
.og-btn-primary,.og-btn-ghost,.og-btn-danger{flex:1;padding:11px;font-size:calc(12px * var(--fs,1));font-weight:800;border-radius:12px;cursor:pointer;font-family:inherit;border:1.5px solid;transition:transform .12s ease;}
.og-btn-primary{background:linear-gradient(135deg,#0E7490,#06B6D4);border-color:transparent;color:#fff;box-shadow:0 3px 10px rgba(6,182,212,.3);}
.og-btn-ghost{background:var(--bg);border-color:var(--bd);color:var(--t2);}
.og-btn-danger{background:rgba(220,38,38,.05);border-color:rgba(220,38,38,.4);color:var(--red);}
.og-btn-primary:active,.og-btn-ghost:active,.og-btn-danger:active{transform:translateY(1px);}

.og-back-btn{width:100%;background:transparent;border:none;color:var(--t3);font-size:calc(12px * var(--fs,1));font-weight:700;padding:8px;cursor:pointer;margin-top:8px;font-family:inherit;}

/* 창설 폼 */
.og-field{margin-bottom:11px;}
.og-label{font-size:calc(11px * var(--fs,1));color:var(--t2);font-weight:800;letter-spacing:.3px;display:block;margin-bottom:5px;text-transform:uppercase;}
.og-input{width:100%;background:var(--bg);border:1.5px solid var(--bd);border-radius:12px;padding:9px 12px;font-size:calc(13px * var(--fs,1));color:var(--t);font-family:inherit;outline:none;transition:border-color .15s ease;}
.og-input:focus{border-color:#06B6D4;}

.og-emblem-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;}
.og-emblem-pick{background:var(--bg);border:1.5px solid var(--bd);border-radius:8px;padding:8px 4px;font-size:calc(20px * var(--fs,1));cursor:pointer;font-family:inherit;transition:all .12s ease;line-height:1;}
.og-emblem-pick:hover{border-color:var(--c);}
.og-emblem-pick.sel{background:color-mix(in srgb, var(--c) 12%, var(--bg));border-color:var(--c);transform:scale(1.05);box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent);}

.og-color-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;}
.og-color-pick{width:100%;aspect-ratio:1;border-radius:8px;border:none;cursor:pointer;transition:transform .12s ease;}
.og-color-pick.sel{transform:scale(1.12);}

/* ════════════════════════════════════════════════
   🌐 Oracle 생태계 (Market/MTSI/Cert) 3-그리드
   ──────────────────────────────────────────────── */
.oracle-eco-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:12px;}
.oracle-eco-card{background:var(--bg2);border:1.5px solid var(--bd);border-radius:12px;padding:11px 9px;text-align:center;cursor:pointer;transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease;}
.oracle-eco-card:hover{transform:translateY(-2px);}
.oracle-eco-card.market{border-color:#10B981;}
.oracle-eco-card.market:hover{box-shadow:0 4px 12px rgba(16,185,129,.25);}
.oracle-eco-card.mtsi{border-color:#A855F7;}
.oracle-eco-card.mtsi:hover{box-shadow:0 4px 12px rgba(168,85,247,.25);}
.oracle-eco-card.cert{border-color:#F59E0B;}
.oracle-eco-card.cert:hover{box-shadow:0 4px 12px rgba(245,158,11,.25);}
.oracle-eco-emoji{font-size:calc(26px * var(--fs,1));margin-bottom:5px;line-height:1;}
.oracle-eco-title{font-size:calc(12px * var(--fs,1));font-weight:800;color:var(--t);margin-bottom:3px;}
.oracle-eco-desc{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:600;line-height:1.45;}

/* ── 워크샵 메타 버튼 ── */
.ow-meta-btn{background:var(--bg);border:1.5px solid var(--bd);color:var(--t2);border-radius:8px;padding:7px 12px;font-size:calc(11px * var(--fs,1));font-weight:700;cursor:pointer;font-family:inherit;}

/* ════════════════════════════════════════════════
   🛡 신고 모달 + 모더레이션 콘솔
   ──────────────────────────────────────────────── */
#mod-reason-modal{position:fixed;inset:0;z-index:10099;display:none;}
#mod-reason-modal.open{display:block;}
.mod-r-backdrop{position:absolute;inset:0;background:rgba(8,12,24,.78);}
.mod-r-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(100% - 28px);max-width:320px;background:var(--bg2);border:2px solid var(--bd2);border-radius:16px;padding:18px;box-shadow:0 24px 56px rgba(8,12,24,.4);}
.mod-r-title{font-family:var(--font-hd);font-size:calc(16px * var(--fs,1));font-weight:700;color:var(--t);margin-bottom:11px;text-align:center;}
.mod-r-list{display:flex;flex-direction:column;gap:5px;margin-bottom:11px;}
.mod-r-btn{background:var(--bg);border:1.5px solid var(--bd);color:var(--t2);border-radius:8px;padding:9px;font-size:calc(12px * var(--fs,1));font-weight:700;cursor:pointer;font-family:inherit;transition:all .12s ease;}
.mod-r-btn:hover{border-color:var(--red);color:var(--red);}
.mod-r-cancel{width:100%;background:transparent;border:none;color:var(--t3);font-size:calc(12px * var(--fs,1));font-weight:700;padding:8px;cursor:pointer;font-family:inherit;}

#mod-admin-modal{position:fixed;inset:0;z-index:10099;display:none;}
#mod-admin-modal.open{display:block;}
.mod-a-backdrop{position:absolute;inset:0;background:rgba(8,12,24,.85);backdrop-filter:blur(6px);}
.mod-a-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(100% - 28px);max-width:440px;max-height:92vh;overflow-y:auto;background:var(--bg2);border:2px solid #A855F7;border-radius:24px;padding:18px;box-shadow:0 24px 56px rgba(168,85,247,.3);}
.mod-a-close{position:absolute;top:10px;right:14px;background:transparent;border:none;color:var(--t3);font-size:calc(24px * var(--fs,1));cursor:pointer;line-height:1;padding:0 4px;}
.mod-a-loading,.mod-a-empty{text-align:center;padding:24px;color:var(--t3);font-size:calc(12px * var(--fs,1));font-weight:600;}
.mod-a-head{margin-bottom:11px;}
.mod-a-title{font-family:var(--font-hd);font-size:calc(18px * var(--fs,1));font-weight:700;color:#A855F7;}
.mod-a-sub{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:600;margin-top:2px;}
.mod-a-list{display:flex;flex-direction:column;gap:7px;}
.mod-a-item{background:var(--bg);border:1px solid var(--bd);border-radius:12px;padding:10px;}
.mod-a-it-head{display:flex;gap:7px;margin-bottom:4px;flex-wrap:wrap;align-items:center;}
.mod-a-it-type{font-size:calc(11px * var(--fs,1));font-weight:800;background:#A855F7;color:#fff;padding:2px 6px;border-radius:4px;letter-spacing:.2px;}
.mod-a-it-reason{font-size:calc(11px * var(--fs,1));font-weight:700;color:var(--red);}
.mod-a-it-ts{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:600;margin-left:auto;}
.mod-a-it-id{font-family:'DM Mono',monospace;font-size:calc(11px * var(--fs,1));color:var(--t3);margin-bottom:6px;word-break:break-all;}
.mod-a-it-acts{display:flex;gap:5px;}
.mod-a-btn{flex:1;border:1px solid var(--bd);background:var(--bg2);color:var(--t2);border-radius:8px;padding:6px;font-size:calc(11px * var(--fs,1));font-weight:700;cursor:pointer;font-family:inherit;}
.mod-a-btn.dismiss:hover{border-color:var(--t2);}
.mod-a-btn.hide{color:#F59E0B;border-color:rgba(245,158,11,.3);}
.mod-a-btn.del{color:var(--red);border-color:rgba(220,38,38,.3);}

/* ════════════════════════════════════════════════
   🛒 Oracle Market
   ──────────────────────────────────────────────── */
#omkt-modal{position:fixed;inset:0;z-index:10097;display:none;}
#omkt-modal.open{display:block;}
.omkt-backdrop{position:absolute;inset:0;background:rgba(8,12,24,.78);backdrop-filter:blur(8px);}
.omkt-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(100% - 24px);max-width:420px;max-height:92vh;overflow-y:auto;background:var(--bg2);border:2px solid #10B981;border-radius:24px;padding:20px 18px;box-shadow:0 24px 56px rgba(16,185,129,.2);}
.omkt-close{position:absolute;top:10px;right:14px;background:transparent;border:none;color:var(--t3);font-size:calc(24px * var(--fs,1));cursor:pointer;line-height:1;padding:0 4px;}
.omkt-loading,.omkt-empty{text-align:center;padding:24px;color:var(--t3);font-size:calc(12px * var(--fs,1));font-weight:600;line-height:1.7;}
.omkt-head{margin-bottom:12px;}
.omkt-eyebrow{font-size:calc(11px * var(--fs,1));color:#10B981;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:3px;}
.omkt-title{font-family:var(--font-hd);font-size:calc(20px * var(--fs,1));font-weight:700;color:var(--t);margin-bottom:3px;}
.omkt-sub{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:600;}
.omkt-wallet{background:linear-gradient(135deg,#10B98115,#10B98105);border:1px solid #10B98155;border-radius:12px;padding:8px 12px;font-size:calc(12px * var(--fs,1));color:var(--t);font-weight:700;margin-bottom:11px;}
.omkt-wallet b{color:#10B981;font-family:var(--font-hd);font-size:calc(14px * var(--fs,1));font-variant-numeric:tabular-nums;}
.omkt-list{display:flex;flex-direction:column;gap:7px;}
.omkt-item{background:var(--bg);border:1.5px solid var(--bd);border-radius:12px;padding:10px 12px;}
.omkt-it-type{font-size:calc(11px * var(--fs,1));font-weight:800;color:#10B981;text-transform:uppercase;letter-spacing:.4px;}
.omkt-it-title{font-size:calc(13px * var(--fs,1));font-weight:800;color:var(--t);margin:3px 0;line-height:1.4;}
.omkt-it-author{font-size:calc(10px * var(--fs,1));color:var(--t3);font-weight:600;margin-bottom:7px;}
.omkt-it-price-row{display:flex;align-items:center;gap:9px;}
.omkt-it-price{font-family:var(--font-hd);font-size:calc(15px * var(--fs,1));font-weight:700;color:#10B981;font-variant-numeric:tabular-nums;}
.omkt-btn-buy{margin-left:auto;background:linear-gradient(135deg,#10B981,#22C55E);color:#fff;border:none;border-radius:8px;padding:7px 16px;font-size:calc(12px * var(--fs,1));font-weight:800;cursor:pointer;font-family:inherit;}
.omkt-btn-own{margin-left:auto;background:var(--bg3);color:var(--t3);border:none;border-radius:8px;padding:7px 14px;font-size:calc(11px * var(--fs,1));font-weight:700;font-family:inherit;cursor:default;}
.omkt-foot{font-size:calc(10px * var(--fs,1));color:var(--t3);font-weight:600;text-align:center;background:var(--bg3);padding:7px;border-radius:8px;margin-top:11px;line-height:1.6;}

/* — 마켓 아이템 상세 모달 — */
#oid-modal{position:fixed;inset:0;z-index:10098;display:none;}
#oid-modal.open{display:block;}
.oid-backdrop{position:absolute;inset:0;background:rgba(8,12,24,.72);backdrop-filter:blur(6px);}
.oid-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(100% - 24px);max-width:400px;max-height:88vh;overflow-y:auto;background:var(--bg2);border:2px solid #10B981;border-radius:16px;padding:22px 18px 16px;box-shadow:0 24px 56px rgba(16,185,129,.24);}
.oid-close{position:absolute;top:10px;right:12px;background:transparent;border:none;color:var(--t3);font-size:calc(24px * var(--fs,1));cursor:pointer;line-height:1;padding:0 4px;}
.oid-type{font-size:calc(10px * var(--fs,1));color:#10B981;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:6px;}
.oid-title{font-family:var(--font-hd);font-size:calc(18px * var(--fs,1));font-weight:700;color:var(--t);margin-bottom:6px;line-height:1.35;letter-spacing:-.3px;padding-right:26px;}
.oid-author{font-size:calc(12px * var(--fs,1));color:var(--t2);font-weight:700;margin-bottom:6px;display:inline-block;padding:2px 6px;border-radius:8px;}
.oid-stat{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:700;margin-bottom:10px;font-variant-numeric:tabular-nums;}
.oid-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:12px;}
.oid-tag{background:var(--bg3);color:var(--t2);font-size:calc(10px * var(--fs,1));font-weight:700;padding:3px 8px;border-radius:12px;}
.oid-preview-label{font-size:calc(11px * var(--fs,1));color:var(--t2);font-weight:800;margin-bottom:6px;}
.oid-preview{background:var(--bg);border:1px solid var(--bd);border-radius:8px;padding:10px 12px;font-size:calc(12px * var(--fs,1));color:var(--t);font-weight:500;line-height:1.6;margin-bottom:14px;max-height:140px;overflow-y:auto;}
.oid-actions{margin-bottom:8px;}
.oid-btn{width:100%;padding:11px;border:none;border-radius:12px;font-size:calc(13px * var(--fs,1));font-weight:800;cursor:pointer;font-family:inherit;letter-spacing:-.2px;}
.oid-btn-buy{background:linear-gradient(135deg,#10B981,#22C55E);color:#fff;box-shadow:0 6px 16px rgba(16,185,129,.28);}
.oid-btn-buy:hover{filter:brightness(1.08);}
.oid-btn-own{background:var(--bg3);color:var(--t3);cursor:default;}
.oid-btn-disabled{background:var(--bg3);color:var(--t3);cursor:not-allowed;}
.oid-note{font-size:calc(10px * var(--fs,1));color:var(--t3);font-weight:600;text-align:center;line-height:1.6;background:var(--bg3);padding:7px;border-radius:8px;}

/* 마켓 아이템 카드 hover (클릭 가능 시) */
.omkt-item-clickable{cursor:pointer;transition:transform .12s ease, border-color .12s ease;}
.omkt-item-clickable:hover{transform:translateY(-1px);border-color:#10B98155;}

/* 티어 뱃지 (작가 리그) — Oracle은 sweep + pulse, Diamond·Platinum은 미묘한 shimmer */
@keyframes omktTierSweep{
  0%   { background-position: -180% 0; }
  100% { background-position:  280% 0; }
}
@keyframes omktTierPulse{
  0%,100% { box-shadow: 0 2px 6px rgba(168,85,247,.35); }
  50%     { box-shadow: 0 2px 12px rgba(168,85,247,.65); }
}
@keyframes omktDiamondShimmer{
  0%,100% { filter: brightness(1); }
  50%     { filter: brightness(1.18); }
}
.omkt-tier-tag{display:inline-block;font-size:calc(11px * var(--fs,1));font-weight:800;padding:1.5px 5px;border-radius:8px;margin-left:4px;letter-spacing:.2px;vertical-align:middle;position:relative;}
.omkt-tier-oracle{
  background: linear-gradient(100deg, #a855f7 0%, #ffffff 45%, #c084fc 60%, #a855f7 100%);
  background-size: 260% 100%;
  color:#fff;
  animation: omktTierSweep 3.6s linear infinite, omktTierPulse 2.4s ease-in-out infinite;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.omkt-tier-diamond{
  background: linear-gradient(135deg,#0ea5e9,#38bdf8,#7dd3fc);
  background-size: 200% 100%;
  color:#fff;
  animation: omktTierSweep 5s linear infinite, omktDiamondShimmer 3s ease-in-out infinite;
}
.omkt-tier-platinum{
  background: linear-gradient(135deg,#94a3b8,#cbd5e1,#e2e8f0);
  background-size: 200% 100%;
  color:#1e293b;
  animation: omktTierSweep 7s linear infinite;
}
.omkt-tier-gold{background:linear-gradient(135deg,#d97706,#f59e0b);color:#fff;}
.omkt-tier-silver{background:var(--bg3);color:var(--t2);}
@media (prefers-reduced-motion: reduce){
  .omkt-tier-oracle, .omkt-tier-diamond, .omkt-tier-platinum{ animation:none !important; }
}

/* 카드 별점 */
.omkt-it-rating{font-size:calc(11px * var(--fs,1));color:var(--t2);font-weight:700;min-height:16px;margin:4px 0 2px;font-variant-numeric:tabular-nums;}
.omkt-it-rating:empty{display:none;}
.omkt-star-mini{color:#F59E0B;}
.omkt-it-rating-cnt{color:var(--t3);font-weight:600;font-size:calc(10px * var(--fs,1));}

/* 상세 모달 · 평점 위젯 */
.oid-rating-slot{background:var(--bg);border:1px solid var(--bd);border-radius:12px;padding:10px 12px;margin-bottom:12px;}
.oid-rating-loading{font-size:calc(11px * var(--fs,1));color:var(--t3);text-align:center;padding:6px;}
.oid-rat-avg{display:flex;align-items:center;gap:6px;font-size:calc(13px * var(--fs,1));font-weight:700;color:var(--t);margin-bottom:6px;}
.oid-rat-stars{color:#F59E0B;letter-spacing:1px;}
.oid-rat-num{font-family:var(--font-hd);font-size:calc(14px * var(--fs,1));}
.oid-rat-cnt{color:var(--t3);font-size:calc(11px * var(--fs,1));font-weight:600;}
.oid-rat-empty,.oid-rat-hint{font-size:calc(11px * var(--fs,1));color:var(--t3);text-align:center;padding:4px;}
.oid-rat-my{margin-top:8px;padding-top:8px;border-top:1px dashed var(--bd);}
.oid-rat-my-lbl{font-size:calc(11px * var(--fs,1));font-weight:800;color:var(--t2);margin-bottom:6px;}
.oid-rat-input{display:flex;gap:2px;margin-bottom:8px;user-select:none;}
.oid-star{font-size:calc(20px * var(--fs,1));color:var(--bg3);cursor:pointer;transition:color .12s ease;}
.oid-star.on{color:#F59E0B;}
.oid-rat-input .oid-star:hover{color:#F59E0B;}
.oid-rat-comment{width:100%;background:var(--bg2);border:1px solid var(--bd);color:var(--t);border-radius:8px;padding:7px 10px;font-size:calc(12px * var(--fs,1));font-family:inherit;resize:vertical;min-height:44px;outline:none;box-sizing:border-box;margin-bottom:8px;}
.oid-rat-comment:focus{border-color:#F59E0B;}
.oid-rat-btnrow{display:flex;gap:6px;}
.oid-rat-submit{background:#F59E0B;color:#fff;border:none;border-radius:8px;padding:7px 14px;font-size:calc(12px * var(--fs,1));font-weight:800;cursor:pointer;font-family:inherit;flex:1;}
.oid-rat-delete{background:transparent;color:var(--t3);border:1px solid var(--bd);border-radius:8px;padding:7px 10px;font-size:calc(11px * var(--fs,1));font-weight:700;cursor:pointer;font-family:inherit;}
.oid-rat-delete:hover{color:var(--red);border-color:var(--red);}
.oid-rat-recent-lbl{font-size:calc(11px * var(--fs,1));font-weight:800;color:var(--t2);margin:10px 0 6px;padding-top:8px;border-top:1px dashed var(--bd);}
.oid-rat-review{background:var(--bg2);border-radius:8px;padding:6px 8px;margin-bottom:4px;font-size:calc(12px * var(--fs,1));color:var(--t);}
.oid-rat-review-hd{color:#F59E0B;font-size:calc(10px * var(--fs,1));letter-spacing:1px;margin-bottom:2px;}
.oid-rat-review-body{font-weight:500;line-height:1.5;}

/* 상세 모달 하단 · 신고 버튼 + 노트 */
.oid-foot-row{display:flex;align-items:center;gap:8px;margin-top:6px;}
.oid-report{background:transparent;color:var(--t3);border:1px solid var(--bd);border-radius:8px;padding:5px 10px;font-size:calc(11px * var(--fs,1));font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap;}
.oid-report:hover{color:var(--red);border-color:var(--red);}
.oid-foot-row .oid-note{flex:1;margin:0;padding:6px 8px;text-align:right;}

/* 신고 미니 모달 */
.oid-report-modal{position:fixed;inset:0;z-index:10100;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6);}
.oid-report-card{background:var(--bg2);border:2px solid var(--red);border-radius:16px;padding:18px;width:calc(100% - 40px);max-width:340px;}
.oid-report-title{font-family:var(--font-hd);font-size:calc(15px * var(--fs,1));color:var(--t);margin-bottom:10px;}
.oid-report-input{width:100%;background:var(--bg);border:1px solid var(--bd);color:var(--t);border-radius:8px;padding:8px 10px;font-size:calc(12px * var(--fs,1));font-family:inherit;resize:vertical;min-height:70px;box-sizing:border-box;margin-bottom:10px;outline:none;}
.oid-report-input:focus{border-color:var(--red);}
.oid-report-actions{display:flex;gap:6px;justify-content:flex-end;}
.oid-report-cancel,.oid-report-submit{border:none;border-radius:8px;padding:7px 14px;font-size:calc(12px * var(--fs,1));font-weight:700;cursor:pointer;font-family:inherit;}
.oid-report-cancel{background:var(--bg3);color:var(--t2);}
.oid-report-submit{background:var(--red);color:#fff;}

/* — 승급 힌트권 모달 — */
#hp-modal{position:fixed;inset:0;z-index:10099;display:none;}
#hp-modal.open{display:block;}
.hp-backdrop{position:absolute;inset:0;background:rgba(8,12,24,.78);backdrop-filter:blur(8px);}
.hp-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(100% - 24px);max-width:420px;max-height:92vh;overflow-y:auto;background:var(--bg2);border:2px solid #10B981;border-radius:24px;padding:22px 20px 18px;box-shadow:0 24px 56px rgba(16,185,129,.22);}
.hp-close{position:absolute;top:10px;right:14px;background:transparent;border:none;color:var(--t3);font-size:calc(24px * var(--fs,1));cursor:pointer;line-height:1;padding:0 4px;}
.hp-eyebrow{font-size:calc(10px * var(--fs,1));color:#10B981;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:4px;}
.hp-title{font-family:var(--font-hd);font-size:calc(20px * var(--fs,1));font-weight:700;color:var(--t);margin-bottom:14px;letter-spacing:-.3px;}
.hp-tier-row{display:flex;align-items:center;gap:12px;background:var(--bg);border:1.5px solid var(--bd);border-radius:16px;padding:14px 12px;margin-bottom:12px;}
.hp-tier-cur,.hp-tier-next{flex:1;text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px;}
.hp-tier-arrow{font-size:calc(22px * var(--fs,1));color:#10B981;font-weight:800;}
.hp-tier-ico{font-size:calc(26px * var(--fs,1));line-height:1;margin-bottom:2px;}
.hp-tier-name{font-family:var(--font-hd);font-size:calc(14px * var(--fs,1));font-weight:700;color:var(--t);}
.hp-tier-pt{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:700;font-variant-numeric:tabular-nums;}
.hp-bar-wrap{height:10px;background:var(--bg3);border-radius:8px;overflow:hidden;margin-bottom:6px;}
.hp-bar-fill{height:100%;background:linear-gradient(90deg,#10B981,#22C55E);border-radius:8px;transition:width .6s ease;}
.hp-bar-meta{font-size:calc(12px * var(--fs,1));color:var(--t2);font-weight:700;text-align:right;margin-bottom:14px;font-variant-numeric:tabular-nums;}
.hp-bar-meta b{color:#10B981;font-family:var(--font-hd);font-size:calc(13px * var(--fs,1));}
.hp-suggest{background:linear-gradient(135deg,#10B98112,#10B98104);border:1px solid #10B98155;border-radius:12px;padding:10px 12px;margin-bottom:14px;}
.hp-suggest-title{font-size:calc(12px * var(--fs,1));font-weight:800;color:#10B981;margin-bottom:6px;}
.hp-suggest-item{font-size:calc(12px * var(--fs,1));color:var(--t);font-weight:600;line-height:1.7;}
.hp-suggest-item b{color:#10B981;font-family:var(--font-hd);font-size:calc(14px * var(--fs,1));}
.hp-breakdown{background:var(--bg);border:1px solid var(--bd);border-radius:12px;padding:8px 10px;margin-bottom:12px;}
.hp-breakdown-title{font-size:calc(12px * var(--fs,1));font-weight:800;color:var(--t2);margin-bottom:6px;letter-spacing:-.2px;}
.hp-breakdown-row{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:calc(12px * var(--fs,1));font-weight:600;color:var(--t);border-bottom:1px dashed var(--bd);}
.hp-breakdown-row:last-child{border-bottom:none;}
.hp-bd-label{flex:1;}
.hp-bd-desc{color:var(--t3);font-size:calc(11px * var(--fs,1));font-weight:600;}
.hp-bd-pts{color:#10B981;font-weight:800;font-variant-numeric:tabular-nums;min-width:60px;text-align:right;font-family:var(--font-hd);}
.hp-close-btn{width:100%;background:var(--bg3);color:var(--t2);border:none;border-radius:12px;padding:10px;font-size:calc(13px * var(--fs,1));font-weight:700;cursor:pointer;font-family:inherit;}
.hp-close-btn:hover{background:var(--bd);}

/* — 창작자 마켓 · 서브탭/검색/카드 개선 — */
.omkt-owned-count{margin-left:8px;font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:700;}
.omkt-subtabs{display:flex;gap:4px;margin-bottom:10px;overflow-x:auto;padding-bottom:2px;}
.omkt-subtabs::-webkit-scrollbar{display:none;}
.omkt-subtab{flex-shrink:0;background:transparent;border:1.5px solid var(--bd);color:var(--t3);border-radius:24px;padding:5px 12px;font-size:calc(11px * var(--fs,1));font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .16s ease;}
.omkt-subtab:hover{border-color:#10B98155;color:var(--t2);}
.omkt-subtab-on{background:#10B981;border-color:#10B981;color:#fff;}
.omkt-searchrow{display:flex;gap:6px;margin-bottom:10px;}
.omkt-search{flex:1;background:var(--bg);border:1.5px solid var(--bd);color:var(--t);border-radius:8px;padding:8px 12px;font-size:calc(12px * var(--fs,1));font-weight:600;font-family:inherit;outline:none;transition:border-color .12s ease;}
.omkt-search:focus{border-color:#10B981;}
.omkt-search::placeholder{color:var(--t3);}
.omkt-sort{background:var(--bg);border:1.5px solid var(--bd);color:var(--t);border-radius:8px;padding:8px 6px;font-size:calc(11px * var(--fs,1));font-weight:700;font-family:inherit;cursor:pointer;outline:none;min-width:100px;}
.omkt-sort:focus{border-color:#10B981;}
.omkt-it-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:3px;}
.omkt-it-stat{font-size:calc(10px * var(--fs,1));color:var(--t3);font-weight:700;font-variant-numeric:tabular-nums;}

/* — 오라클 상점 (시스템 판매) — */
.omkt-tabs{display:flex;gap:6px;margin-bottom:12px;padding-right:24px;}
.omkt-tab{flex:1;background:var(--bg3);border:1.5px solid var(--bd);color:var(--t3);border-radius:8px;padding:8px 6px;font-size:calc(12px * var(--fs,1));font-weight:700;cursor:pointer;font-family:inherit;transition:all .16s ease;}
.omkt-tab:hover{border-color:#10B98155;color:var(--t);}
.omkt-tab-on{background:linear-gradient(135deg,#10B98120,#10B98108);border-color:#10B981;color:#10B981;font-weight:800;}
.omkt-active{margin-left:8px;font-size:calc(11px * var(--fs,1));color:#10B981;font-weight:700;}
.omkt-shop-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:14px;}
.omkt-shop-item{background:var(--bg);border:1.5px solid var(--bd);border-radius:12px;padding:12px 10px 10px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;}
.omkt-si-emoji{font-size:calc(28px * var(--fs,1));line-height:1;margin-bottom:2px;}
.omkt-si-name{font-size:calc(12px * var(--fs,1));font-weight:800;color:var(--t);letter-spacing:-.2px;}
.omkt-si-desc{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:600;line-height:1.45;min-height:30px;}
.omkt-si-meta{font-size:calc(10px * var(--fs,1));color:#10B981;font-weight:700;margin-bottom:4px;}
.omkt-si-buy{width:100%;background:linear-gradient(135deg,#10B981,#22C55E);color:#fff;border:none;border-radius:8px;padding:7px 10px;font-size:calc(12px * var(--fs,1));font-weight:800;cursor:pointer;font-family:inherit;font-variant-numeric:tabular-nums;}
.omkt-si-buy:disabled{background:var(--bg3);color:var(--t3);cursor:not-allowed;}
.omkt-inv-head{font-size:calc(12px * var(--fs,1));font-weight:800;color:var(--t);margin:14px 0 8px;letter-spacing:-.2px;}
.omkt-empty-inv{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:600;text-align:center;padding:14px;background:var(--bg3);border-radius:8px;}
.omkt-inv-list{display:flex;flex-direction:column;gap:5px;margin-bottom:6px;}
.omkt-inv-row{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--bd);border-radius:8px;padding:7px 10px;font-size:calc(12px * var(--fs,1));font-weight:700;color:var(--t);}
.omkt-inv-emoji{font-size:calc(16px * var(--fs,1));line-height:1;display:inline-flex;align-items:center;}
/* 아이템 아이콘은 iconKey 가 있으면 MacroIcon SVG, 없으면 이모지 폴백 —
   두 경우가 섞여 렌더되므로 font-size 규칙은 남겨두고 SVG 정렬만 따로 준다 */
.omkt-si-emoji svg,.omkt-inv-emoji svg,.omkt-buycel-icon svg{display:block;}
.omkt-active svg{display:inline-block;vertical-align:-2px;}
.omkt-inv-name{flex:1;}
.omkt-inv-btn{background:#10B981;color:#fff;border:none;border-radius:8px;padding:5px 12px;font-size:calc(11px * var(--fs,1));font-weight:800;cursor:pointer;font-family:inherit;}
.omkt-inv-active{color:#10B981;font-size:calc(11px * var(--fs,1));font-weight:700;}
.omkt-inv-expired{color:var(--t3);font-size:calc(11px * var(--fs,1));font-weight:700;}
.omkt-stats{margin:12px 0 8px;background:linear-gradient(135deg,#a855f712,#a855f704);border:1px solid #a855f755;border-radius:12px;padding:12px;}
.omkt-stats-title{font-size:calc(12px * var(--fs,1));font-weight:800;color:#a855f7;margin-bottom:8px;letter-spacing:-.2px;}
.omkt-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.omkt-stat{background:var(--bg);border-radius:8px;padding:8px 4px;text-align:center;}
.omkt-stat-v{font-family:var(--font-hd);font-size:calc(15px * var(--fs,1));font-weight:700;color:#a855f7;font-variant-numeric:tabular-nums;line-height:1.1;}
.omkt-stat-l{font-size:calc(10px * var(--fs,1));color:var(--t3);font-weight:700;margin-top:3px;}

/* ════════════════════════════════════════════════
   📊 MTSI & 🏆 Oracle Certificate
   ──────────────────────────────────────────────── */
#mtsi-modal{position:fixed;inset:0;z-index:10097;display:none;}
#mtsi-modal.open{display:block;}
.mtsi-backdrop{position:absolute;inset:0;background:rgba(8,12,24,.78);backdrop-filter:blur(8px);}
.mtsi-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(100% - 24px);max-width:440px;max-height:92vh;overflow-y:auto;background:var(--bg2);border:2px solid #A855F7;border-radius:24px;padding:20px 18px;box-shadow:0 24px 56px rgba(168,85,247,.25);}
.mtsi-close{position:absolute;top:10px;right:14px;background:transparent;border:none;color:var(--t3);font-size:calc(24px * var(--fs,1));cursor:pointer;line-height:1;padding:0 4px;}
.mtsi-loading,.mtsi-empty{text-align:center;padding:24px;color:var(--t3);font-size:calc(12px * var(--fs,1));font-weight:600;}
.mtsi-head{margin-bottom:14px;}
.mtsi-eyebrow{font-size:calc(11px * var(--fs,1));color:var(--purple);font-weight:800;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:3px;}
.mtsi-title{font-family:var(--font-hd);font-size:calc(20px * var(--fs,1));font-weight:700;color:var(--t);}
.mtsi-sub{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:600;margin-top:3px;}

.mtsi-gauge{background:var(--bg);border:2px solid var(--c);border-radius:16px;padding:14px;margin-bottom:14px;text-align:center;}
.mtsi-gauge-emoji{font-size:calc(42px * var(--fs,1));line-height:1;margin-bottom:5px;}
.mtsi-gauge-score{font-family:var(--font-hd);font-size:calc(48px * var(--fs,1));font-weight:700;color:var(--c);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-1px;}
.mtsi-gauge-label{font-size:calc(13px * var(--fs,1));font-weight:800;margin-top:3px;letter-spacing:.2px;}
.mtsi-gauge-bar{position:relative;height:10px;border-radius:4px;background:linear-gradient(90deg,#EF4444,#F59E0B,#22C55E);margin-top:14px;}
.mtsi-gauge-marker{position:absolute;top:-3px;width:4px;height:16px;background:#fff;border-radius:4px;transform:translateX(-50%);box-shadow:0 0 6px rgba(0,0,0,.5);}
.mtsi-gauge-ticks{display:flex;justify-content:space-between;font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:700;margin-top:5px;letter-spacing:.2px;}

.mtsi-section{margin-bottom:12px;}
.mtsi-section-h{font-size:calc(11px * var(--fs,1));font-weight:800;color:var(--t2);text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px;}
.mtsi-dist{display:flex;flex-direction:column;gap:5px;background:var(--bg);border:1px solid var(--bd);border-radius:12px;padding:10px;}
.mtsi-dist-row{display:flex;align-items:center;gap:8px;}
.mtsi-dist-emoji{font-size:calc(14px * var(--fs,1));width:20px;text-align:center;}
.mtsi-dist-label{font-size:calc(11px * var(--fs,1));font-weight:700;color:var(--t);min-width:62px;}
.mtsi-dist-bar{flex:1;height:7px;background:var(--bg3);border-radius:4px;overflow:hidden;}
.mtsi-dist-fill{height:100%;border-radius:4px;transition:width .4s ease;}
.mtsi-dist-n{font-size:calc(11px * var(--fs,1));font-weight:800;color:var(--t2);font-variant-numeric:tabular-nums;min-width:24px;text-align:right;}
.mtsi-sample{font-size:calc(10px * var(--fs,1));color:var(--t3);font-weight:600;text-align:center;margin-top:6px;}
.mtsi-guide{font-size:calc(11px * var(--fs,1));color:var(--t2);line-height:1.7;background:var(--bg3);padding:9px 11px;border-radius:8px;font-weight:500;}
.mtsi-foot{font-size:calc(10px * var(--fs,1));color:var(--t3);font-weight:600;text-align:center;background:rgba(168,85,247,.06);border:1px dashed rgba(168,85,247,.3);padding:8px;border-radius:8px;line-height:1.5;}

/* Oracle Certificate */
.oc-cert-wrap{margin-bottom:12px;border-radius:16px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.4);}
.oc-cert-svg{width:100%;height:auto;display:block;}
.oc-cert-actions{display:flex;gap:7px;margin-bottom:10px;}
.oc-cert-btn{flex:1;padding:10px;font-size:calc(12px * var(--fs,1));font-weight:800;border-radius:12px;cursor:pointer;font-family:inherit;border:1.5px solid;}
.oc-cert-btn.primary{background:linear-gradient(135deg,#F59E0B,#FBBF24);border-color:transparent;color:#000;box-shadow:0 3px 10px rgba(245,158,11,.3);}
.oc-cert-btn.ghost{background:var(--bg);border-color:var(--bd);color:var(--t2);}
.oc-cert-info{font-size:calc(10px * var(--fs,1));color:var(--t3);font-weight:600;text-align:center;background:var(--bg3);padding:8px 11px;border-radius:8px;line-height:1.6;}
.oc-cert-info code{font-family:'DM Mono',monospace;color:var(--acc-text);}

/* ════════════════════════════════════════════════
   🎨 UI 디자인 토큰 + 통일 컴포넌트 (uiPolish.js 연동)
   ──────────────────────────────────────────────── */
:root{
  /* 통일 보더 라디우스 토큰 */
  --r-sm: 8px;
  --r-md: 11px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-2xl: 22px;
  /* 통일 갭 */
  --g-1: 4px; --g-2: 6px; --g-3: 8px; --g-4: 11px; --g-5: 14px; --g-6: 18px;
  /* 전환 표준 */
  --tx-fast: 120ms cubic-bezier(.4,0,.2,1);
  --tx-base: 240ms cubic-bezier(.4,0,.2,1);
  /* 31차 — 부드러운 감속 곡선. 화면 전환·집중 화면·시트가 같은 이징을 쓰면
     앱 전체 움직임이 한 몸처럼 읽힌다. 새 전환을 만들면 이 토큰을 쓸 것. */
  --ease-soft: cubic-bezier(.16,.84,.28,1);
  --tx-slow: 380ms cubic-bezier(.4,0,.2,1);

  /* ── 아케이드 모션 (34차) ─────────────────────────────────────────────
     "기능·팝업·이벤트가 등장할 때 뿅뿅 튀듯이 아케이드처럼" (사용자 요청).
     등장(entrance)만 튄다 — 이동·전환은 그대로 감속곡선(--ease-soft)이다.

     ⚠ **세기는 --arcade 하나로 조절한다.** 0 = 오버슈트 없음(31차 이전 감속과 동일),
       1 = 기본, 1.4 = 과장. "너무 튄다 / 더 튀게" 라는 말이 나오면 이 숫자만 만질 것.
       키프레임 값들이 전부 calc(… * var(--arc, var(--arcade))) 라서 한 곳이 전부를 움직인다.
       ⚠ 개별 키프레임의 숫자를 직접 고치지 말 것 — 그러면 손잡이가 무의미해진다.

     ⚠ 31차와의 관계: 그때 모달의 끝단 오버슈트(…,1.15)를 뺐다. "열릴 때마다 카드가
       한 번 흔들려 보인다"는 이유였는데, 그건 **감속곡선 하나로 끝에서만 튕기는** 모양이라
       불안정하게 읽혔다. 여기서는 키프레임으로 **작게 → 크게 → 살짝 작게 → 제자리**
       라는 완결된 궤적을 그리므로 "흔들림"이 아니라 "착지"로 읽힌다. 접근이 다르다.
     ⚠ 그래도 31차가 잠재운 두 곳은 건드리지 않는다:
       · 페이지 전환(.page.active.page-in) — 무거운 렌더와 겹쳐 프레임이 끊겼던 자리
       · 튜토리얼 말풍선의 **스텝 간 이동** — 목표를 지나쳤다 돌아와 "튄다"고 지적받은 자리
         (첫 등장 팝은 아케이드로 바꿔도 안전하다 — 이동이 아니라 등장이다) */
  /* 34차 후반 — 사용자가 "좀 더 아케이딕하게, 전반적으로" 요청해 1 → 1.3.
     ⚠ 1.6 을 넘기면 등장 시작 크기가 0.2 아래로 내려가 카드가 점처럼 보였다가 튀어나온다.
       화면이 작을수록 어지럽다 — 올리더라도 1.5 를 상한으로 볼 것.
     ⚠ 이건 **전체 배수**다. 팝업마다 성격이 다르므로 각자 `--arc` 로 자기 몫을 다시 정한다
       (아래 "날씨별 등장 성격" 절). 개별 팝업이 과하면 --arcade 가 아니라 그쪽 배수를 만질 것. */
  --arcade: 1.15;
  /* ⚠ 아케이드 키프레임에는 **넘치지 않는** 이징을 쓴다. 넘침은 키프레임에만 둔다.
     처음엔 이징도 오버슈트(…,1.56)를 쓰게 했더니 **두 번 겹쳐** 실측 정점이 1.13 이 아니라
     1.20 이 나왔다. 그러면 --arcade 손잡이가 예측대로 안 먹는다(1.4 로 올리면 폭주한다).
     넘침은 한 곳에서만 — 그래야 숫자 하나로 세기를 정확히 조절할 수 있다. */
  --ease-arcade-step: cubic-bezier(.25, .72, .35, 1);
  /* 아래 둘은 키프레임 없이 transition 으로 튕겨야 하는 자리(칩·버튼)용으로 남겨 둔다 */
  --ease-arcade: cubic-bezier(.34, 1.56, .64, 1);
  --ease-arcade-soft: cubic-bezier(.28, 1.28, .5, 1);
}

/* 등장: 작게 들어와 한 번 크게 부풀었다 살짝 눌리고 제자리 (스쿼시&스트레치의 축약형).
   ⚠ opacity 는 초반에 끝낸다 — 끝까지 페이드하면 튀는 동작이 흐릿해져 아케이드 느낌이 죽는다. */
@keyframes arcade-pop{
  0%  {opacity:0; transform:scale(calc(1 - .34 * var(--arc, var(--arcade))));}
  45% {opacity:1; transform:scale(calc(1 + .085 * var(--arc, var(--arcade))));}
  70% {transform:scale(calc(1 - .04 * var(--arc, var(--arcade))));}
  86% {transform:scale(calc(1 + .018 * var(--arc, var(--arcade))));}
  100%{opacity:1; transform:scale(1);}
}
/* 화면 정중앙에 translate 로 고정된 카드용 — translate 를 잃으면 카드가 구석으로 튄다 */
@keyframes arcade-pop-center{
  0%  {opacity:0; transform:translate(-50%,-50%) scale(calc(1 - .34 * var(--arc, var(--arcade))));}
  45% {opacity:1; transform:translate(-50%,-50%) scale(calc(1 + .085 * var(--arc, var(--arcade))));}
  70% {transform:translate(-50%,-50%) scale(calc(1 - .04 * var(--arc, var(--arcade))));}
  86% {transform:translate(-50%,-50%) scale(calc(1 + .018 * var(--arc, var(--arcade))));}
  100%{opacity:1; transform:translate(-50%,-50%) scale(1);}
}
/* 아래에서 튀어 올라와 착지하며 한 번 눌리는 토스트용 (가로로 중앙 고정) */
@keyframes arcade-drop-up{
  0%  {opacity:0; transform:translateX(-50%) translateY(calc(34px * var(--arc, var(--arcade)))) scale(calc(1 - .18 * var(--arc, var(--arcade))));}
  55% {opacity:1; transform:translateX(-50%) translateY(calc(-7px * var(--arc, var(--arcade)))) scale(calc(1 + .05 * var(--arc, var(--arcade))));}
  78% {transform:translateX(-50%) translateY(calc(2px * var(--arc, var(--arcade)))) scale(calc(1 - .025 * var(--arc, var(--arcade))));}
  100%{opacity:1; transform:translateX(-50%) translateY(0) scale(1);}
}
/* 위에서 떨어져 통 튀는 상단 알림용 */
@keyframes arcade-drop-down{
  0%  {opacity:0; transform:translate(-50%,-140%) scale(calc(1 - .12 * var(--arc, var(--arcade))));}
  60% {opacity:1; transform:translate(-50%, calc(6px * var(--arc, var(--arcade)))) scale(calc(1 + .04 * var(--arc, var(--arcade))));}
  80% {transform:translate(-50%, calc(-3px * var(--arc, var(--arcade)))) scale(1);}
  100%{opacity:1; transform:translate(-50%,0) scale(1);}
}

/* ── 누름 피드백 (34차) ────────────────────────────────────────────────
   눌렀다 뗐을 때 **톡 튀어 돌아온다**. 아케이드 느낌은 큰 연출보다 이 작은 되튐이
   훨씬 크게 만든다 — 화면을 쓰는 내내 매 탭마다 느껴지기 때문이다.
   ⚠ 눌릴 때(:active)는 오버슈트를 주지 않는다. 손가락이 닿아 있는 동안 튀면
     "덜 눌렸나?" 싶어 오히려 불안하다. **뗄 때만** 튄다 — 그래서 transition 은
     평상시 규칙에 걸고, :active 에는 짧고 곧은 곡선을 준다.
   ⚠ 여기에 새 요소를 추가할 때 이미 transition 을 가진 요소인지 볼 것. transform 만
     덮어쓰므로 색·그림자 전환은 각자 규칙이 그대로 살아 있다. */
.cb, .lb, .ni-ic, .bdg-item, .rs, .qopt, .voyage-next, .ml-cta,
.tut-bubble-next, .dc-opt, .lv-opt{
  transition:transform .26s var(--ease-arcade);
}
.cb:active, .lb:active, .ni-ic:active, .bdg-item:active, .rs:active, .qopt:active,
.voyage-next:active, .ml-cta:active, .tut-bubble-next:active, .dc-opt:active, .lv-opt:active{
  transition:transform .06s cubic-bezier(.4,0,1,1);
}

/* 퀴즈 정답 — 통 튀어오르며 확정된다 */
@keyframes arcade-correct{
  0%  {transform:scale(1);}
  35% {transform:scale(calc(1 + .10 * var(--arc, var(--arcade))));}
  60% {transform:scale(calc(1 - .035 * var(--arc, var(--arcade))));}
  80% {transform:scale(calc(1 + .022 * var(--arc, var(--arcade))));}
  100%{transform:scale(1);}
}
/* 퀴즈 오답 — 좌우로 흔든다. ⚠ 세로로 흔들지 말 것(스크롤로 오해된다) */
@keyframes arcade-wrong{
  0%,100%{transform:translateX(0);}
  15%{transform:translateX(calc(-7px * var(--arc, var(--arcade))));}
  32%{transform:translateX(calc(6px * var(--arc, var(--arcade))));}
  50%{transform:translateX(calc(-4px * var(--arc, var(--arcade))));}
  68%{transform:translateX(calc(3px * var(--arc, var(--arcade))));}
  85%{transform:translateX(calc(-1.5px * var(--arc, var(--arcade))));}
}
.qopt.correct, .qm-opt-correct, .dc-done.correct{
  animation:arcade-correct .5s var(--ease-arcade-step);
}
.qopt.wrong, .qm-opt-wrong, .dc-done.wrong{
  animation:arcade-wrong .42s ease;
}

/* 드라마틱 등장 — 기상 이벤트·잠금해제처럼 **집중시켜야 하는** 팝업 전용 (34차).
   ⚠ 일반 모달에 쓰지 말 것. 앱을 쓰다 보면 수십 번 뜨는 창까지 이렇게 튀면 피로해진다.
     "드라마틱하게, 그래야 집중이 되니까"는 **주인공 팝업 한둘**에만 해당한다.
   디즈니 12원칙의 **앤티시페이션** — 커지기 직전에 살짝 더 움츠린다. 그 예비 동작이
   "곧 무슨 일이 일어난다"는 신호가 돼서, 같은 크기 변화라도 훨씬 크게 읽힌다. */
@keyframes arcade-pop-drama{
  0%  {opacity:0; transform:translate(-50%,-50%) scale(calc(1 - .52 * var(--arc, var(--arcade))));}
  16% {opacity:1; transform:translate(-50%,-50%) scale(calc(1 - .60 * var(--arc, var(--arcade))));}
  46% {transform:translate(-50%,-50%) scale(calc(1 + .13 * var(--arc, var(--arcade))));}
  66% {transform:translate(-50%,-50%) scale(calc(1 - .065 * var(--arc, var(--arcade))));}
  83% {transform:translate(-50%,-50%) scale(calc(1 + .028 * var(--arc, var(--arcade))));}
  100%{opacity:1; transform:translate(-50%,-50%) scale(1);}
}
/* 배경이 한 번 훅 들어오며 시선을 가둔다 — 카드보다 먼저 끝나야 카드가 주인공이 된다 */
@keyframes arcade-backdrop-punch{
  0%  {opacity:0;}
  55% {opacity:1;}
  100%{opacity:1;}
}
/* 카드가 착지한 뒤 아이콘이 한 박자 늦게 튀어나온다 (팔로 스루 — 동시에 멈추지 않게) */
@keyframes arcade-hero-pop{
  0%,22%{opacity:0; transform:scale(calc(1 - .5 * var(--arc, var(--arcade))));}
  62%   {opacity:1; transform:scale(calc(1 + .16 * var(--arc, var(--arcade))));}
  80%   {transform:scale(calc(1 - .06 * var(--arc, var(--arcade))));}
  100%  {opacity:1; transform:scale(1);}
}

/* ── 날씨별 등장 성격 (34차 후반) ──────────────────────────────────────
   사용자 지적: "일반 팝업 · 흐림 · 폭풍우가 같은 방식으로 튀어오르면 안 되잖아".
   맞다 — 폭풍우 경보가 쾌청 소식과 똑같이 통통 튀면 경보로 안 읽힌다.
   세기만 다르게 하는 게 아니라 **몸짓 자체를 다르게** 한다:

     쾌청  들뜬 팝    작게 들어와 높이 튄다        (기쁜 소식)
     구름  차분한 안착 거의 안 튄다, 부드럽게 멎음  (중립 정보)
     비    무거운 낙하 위에서 떨어져 눌렸다 펴짐    (압박이 내려앉는 느낌)
     폭풍우 충격       **크게** 들어와 꽂히고 진동   (튀는 게 아니라 내리꽂힌다)

   ⚠ 폭풍우만 방향이 반대다 — 다른 셋은 작게 시작해 커지지만, 폭풍우는 **크게 시작해
     급격히 수축**한다. 그게 "튐"이 아니라 "충격"으로 읽히는 이유다. 뒤집지 말 것.
   ⚠ 세기는 각자 --arc 로 정한다. 전체가 과하면 --arcade, 하나만 과하면 여기 배수를 만진다. */

@keyframes arcade-burst{   /* 쾌청 — 낮게 웅크렸다 가볍게 솟는다 */
  /* ⚠ **정점을 1.08 배 위로 올리지 말 것.** 카드는 좌우 14px 여유뿐이라 360px 폰에서
     허용 최대가 1.084 다(실측: 카드 기본폭 332px). 처음에 정점을 1.135 로 뒀더니
     쾌청만 화면 밖으로 10px 잘렸다. 경쾌함은 정점이 아니라 **낮은 시작점**(0.4배)에서
     나온다 — 높이 튀우고 싶으면 정점 대신 시작을 더 낮출 것. */
  0%  {opacity:0; transform:translate(-50%,-50%) scale(calc(1 - .40 * var(--arc, var(--arcade))));}
  38% {opacity:1; transform:translate(-50%,-50%) scale(calc(1 + .058 * var(--arc, var(--arcade))));}
  58% {transform:translate(-50%,-50%) scale(calc(1 - .05 * var(--arc, var(--arcade))));}
  76% {transform:translate(-50%,-50%) scale(calc(1 + .028 * var(--arc, var(--arcade))));}
  90% {transform:translate(-50%,-50%) scale(calc(1 - .012 * var(--arc, var(--arcade))));}
  100%{opacity:1; transform:translate(-50%,-50%) scale(1);}
}
@keyframes arcade-drift{  /* 구름 — 옆에서 흘러들어 멎는다 (되튐 없음) */
  /* 구름의 개성은 **옆으로 흐르는 것**이다. 위아래로 움직이면 비와 구분이 안 된다.
     ⚠ 되튐은 넣지 말 것 — 흘러들어와 그대로 멎는다. */
  0%  {opacity:0; transform:translate(calc(-50% - 26px * var(--arc, var(--arcade))), -50%) scale(calc(1 - .05 * var(--arc, var(--arcade))));}
  100%{opacity:1; transform:translate(-50%,-50%) scale(1);}
}
@keyframes arcade-sink{   /* 비 — 늘어나며 떨어져 납작하게 착지 (되튐 없음) */
  /* 비의 개성은 **빗방울의 스쿼시&스트레치**다: 떨어지는 동안 세로로 늘어나고,
     닿는 순간 납작해졌다 펴진다. 위로 되튀지 않으므로 "통통"으로 안 읽힌다.
     ⚠ 착지 뒤 1 을 넘겨 되돌아오게 하지 말 것 — 그 순간 경고가 장난스러워진다. */
  0%  {opacity:0; transform:translate(-50%,calc(-50% - 34px * var(--arc, var(--arcade))))
        scaleX(calc(1 - .04 * var(--arc, var(--arcade)))) scaleY(calc(1 + .08 * var(--arc, var(--arcade))));}
  58% {opacity:1; transform:translate(-50%,-50%)
        scaleX(calc(1 + .045 * var(--arc, var(--arcade)))) scaleY(calc(1 - .055 * var(--arc, var(--arcade))));}
  100%{opacity:1; transform:translate(-50%,-50%) scaleX(1) scaleY(1);}
}
@keyframes arcade-quake{   /* 폭풍우 — 충격 후 잔진동. **크기로 튀지 않는다** */
  /* ⚠ 스케일 오버슈트를 넣지 말 것. 크기가 출렁이면 아무리 세게 해도 "통통"으로 읽혀
     경보가 되지 않는다(34차 사용자 지적). 위기감은 **위치의 고주파 진동**에서 나온다 —
     크기는 거의 고정한 채 좌우로 빠르게 떨다가 잦아든다(지진계 파형처럼 감쇠).
     ⚠ 부드러운 이징을 쓰지 말 것 — 쿠션이 들어가면 충격이 물러진다. linear 로 둔다. */
  0%  {opacity:0; transform:translate(-50%,-50%) scale(calc(1 + .035 * var(--arc, var(--arcade))));}
  7%  {opacity:1; transform:translate(calc(-50% + 6px * var(--arc, var(--arcade))), calc(-50% - 3px * var(--arc, var(--arcade)))) scale(1) rotate(calc(.55deg * var(--arc, var(--arcade))));}
  15% {transform:translate(calc(-50% - 5.4px * var(--arc, var(--arcade))), calc(-50% + 2px * var(--arc, var(--arcade)))) rotate(calc(-.5deg * var(--arc, var(--arcade))));}
  23% {transform:translate(calc(-50% + 4.4px * var(--arc, var(--arcade))), -50%) rotate(calc(.4deg * var(--arc, var(--arcade))));}
  32% {transform:translate(calc(-50% - 3.5px * var(--arc, var(--arcade))), calc(-50% + 1.4px * var(--arc, var(--arcade)))) rotate(calc(-.32deg * var(--arc, var(--arcade))));}
  42% {transform:translate(calc(-50% + 2.7px * var(--arc, var(--arcade))), -50%) rotate(calc(.24deg * var(--arc, var(--arcade))));}
  53% {transform:translate(calc(-50% - 2px * var(--arc, var(--arcade))), -50%) rotate(calc(-.17deg * var(--arc, var(--arcade))));}
  65% {transform:translate(calc(-50% + 1.4px * var(--arc, var(--arcade))), -50%) rotate(calc(.11deg * var(--arc, var(--arcade))));}
  78% {transform:translate(calc(-50% - .8px * var(--arc, var(--arcade))), -50%) rotate(calc(-.06deg * var(--arc, var(--arcade))));}
  90% {transform:translate(calc(-50% + .35px * var(--arc, var(--arcade))), -50%) rotate(0);}
  100%{opacity:1; transform:translate(-50%,-50%) scale(1) rotate(0);}
}
/* 폭풍우 배경 — 경보등처럼 두 번 번쩍인다 (시선을 붙잡는 건 카드가 아니라 이 깜빡임이다) */
@keyframes arcade-alarm{
  0%{opacity:0;} 10%{opacity:1;} 20%{opacity:.62;} 30%{opacity:1;} 42%{opacity:.8;} 100%{opacity:1;}
}

/* ── 히어로 아이콘: 카드와 **같은 몸짓**으로 (34차 후반) ────────────────────
   사용자 지적: "날씨를 알려주는 아이콘이랑 팝업이랑 너무 따로 노는 느낌".
   원인이 둘이었다:
     ① 아이콘이 **날씨와 무관하게 항상 같은 팝**(arcade-hero-pop)을 했다
     ② 카드가 끝난 **0.72초 뒤에** 시작해서 별개 사건처럼 보였다
   → 날씨마다 카드와 같은 방향·같은 물리를 쓰고, 시작을 카드에 붙인다.
     쾌청 위로 솟음 · 구름 옆으로 흐름 · 비 아래로 떨어짐 · 폭풍우 흔들림
   ⚠ 지연을 다시 크게 주지 말 것 — 살짝(0.06~0.1초)만 늦어야 "딸려온다"로 읽힌다.
     0.7초쯤 늦으면 "따로 논다"가 된다(그게 이번 제보였다). */
@keyframes hero-sunny{      /* 위로 — 카드보다 더 높이 솟는다 */
  0%  {opacity:0; transform:scale(calc(1 - .62 * var(--arc, var(--arcade)))) translateY(calc(12px * var(--arc, var(--arcade))));}
  44% {opacity:1; transform:scale(calc(1 + .24 * var(--arc, var(--arcade)))) translateY(calc(-7px * var(--arc, var(--arcade))));}
  68% {transform:scale(calc(1 - .07 * var(--arc, var(--arcade)))) translateY(0);}
  85% {transform:scale(calc(1 + .05 * var(--arc, var(--arcade))));}
  100%{opacity:1; transform:scale(1) translateY(0);}
}
@keyframes hero-cloudy{     /* 옆으로 — 카드보다 더 멀리서 흘러온다(시차 = 깊이감) */
  0%  {opacity:0; transform:translateX(calc(-42px * var(--arc, var(--arcade)))) scale(calc(1 - .12 * var(--arc, var(--arcade))));}
  100%{opacity:1; transform:translateX(0) scale(1);}
}
@keyframes hero-rainy{      /* 아래로 — 빗방울처럼 늘어졌다 닿으며 납작 */
  0%  {opacity:0; transform:translateY(calc(-26px * var(--arc, var(--arcade)))) scaleX(calc(1 - .18 * var(--arc, var(--arcade)))) scaleY(calc(1 + .3 * var(--arc, var(--arcade))));}
  46% {opacity:1;}
  62% {transform:translateY(0) scaleX(calc(1 + .2 * var(--arc, var(--arcade)))) scaleY(calc(1 - .22 * var(--arc, var(--arcade))));}
  100%{opacity:1; transform:translateY(0) scaleX(1) scaleY(1);}
}
@keyframes hero-storm{      /* 흔들림 — 카드와 **반대 위상**으로 떨어야 격렬해 보인다 */
  0%  {opacity:0; transform:scale(calc(1 + .12 * var(--arc, var(--arcade))));}
  7%  {opacity:1; transform:translate(calc(-8px * var(--arc, var(--arcade))), calc(4px * var(--arc, var(--arcade)))) rotate(calc(-4deg * var(--arc, var(--arcade))));}
  16% {transform:translate(calc(7px * var(--arc, var(--arcade))), calc(-3px * var(--arc, var(--arcade)))) rotate(calc(3.4deg * var(--arc, var(--arcade))));}
  26% {transform:translate(calc(-5.5px * var(--arc, var(--arcade))), 0) rotate(calc(-2.6deg * var(--arc, var(--arcade))));}
  37% {transform:translate(calc(4.2px * var(--arc, var(--arcade))), 0) rotate(calc(1.9deg * var(--arc, var(--arcade))));}
  49% {transform:translate(calc(-3px * var(--arc, var(--arcade))), 0) rotate(calc(-1.3deg * var(--arc, var(--arcade))));}
  62% {transform:translate(calc(2px * var(--arc, var(--arcade))), 0) rotate(calc(.8deg * var(--arc, var(--arcade))));}
  76% {transform:translate(calc(-1.1px * var(--arc, var(--arcade))), 0) rotate(calc(-.4deg * var(--arc, var(--arcade))));}
  100%{opacity:1; transform:translate(0,0) rotate(0) scale(1);}
}
/* 등장 뒤의 상시 움직임도 날씨를 따른다 — 여기서 성격이 계속 유지된다 */
@keyframes idle-sunny {0%,100%{transform:translateY(0) rotate(-1deg);} 50%{transform:translateY(-6px) rotate(2deg);}}
@keyframes idle-cloudy{0%,100%{transform:translateX(-4px);} 50%{transform:translateX(4px);}}
@keyframes idle-rainy {0%,100%{transform:translateY(0) scaleY(1);} 62%{transform:translateY(4px) scaleY(.97);}}
@keyframes idle-storm {0%,100%{transform:translate(0,0) rotate(0);} 25%{transform:translate(-1.6px,0) rotate(-.9deg);} 75%{transform:translate(1.6px,0) rotate(.9deg);}}

#event-modal[data-weather="sunny"]  .evt-hero-icon{--arc:calc(var(--arcade) * 1.1);
  animation:hero-sunny  .58s var(--ease-arcade-step) .06s both, idle-sunny  3.2s ease-in-out .64s infinite;}
#event-modal[data-weather="cloudy"] .evt-hero-icon{--arc:calc(var(--arcade) * .9);
  animation:hero-cloudy .60s cubic-bezier(.16,.78,.28,1) .06s both, idle-cloudy 5.4s ease-in-out .66s infinite;}
#event-modal[data-weather="rainy"]  .evt-hero-icon{--arc:calc(var(--arcade) * 1);
  animation:hero-rainy  .54s cubic-bezier(.2,.7,.3,1) 0s both,   idle-rainy  2.6s ease-in-out .54s infinite;}
#event-modal[data-weather="storm"]  .evt-hero-icon{--arc:calc(var(--arcade) * 1.25);
  animation:hero-storm  .74s linear .02s both,                    idle-storm  .9s  ease-in-out .76s infinite;}

/* 이벤트 모달은 events.js 가 열 때 #event-modal 에 data-weather 를 붙인다(openEvent).
   ⚠ 이 속성이 사라지면 전부 기본(arcade-pop-drama)으로 떨어진다 — 지우지 말 것. */
#event-modal[data-weather="sunny"]  .evt-card{--arc:calc(var(--arcade) * 1.1);  animation:arcade-burst      .54s var(--ease-arcade-step);}
#event-modal[data-weather="cloudy"] .evt-card{--arc:calc(var(--arcade) * .9);   animation:arcade-drift .52s cubic-bezier(.16,.78,.28,1);}
/* ⚠ 비·폭풍우는 **튀지 않는다**. 이징도 다르다 — 쿠션이 들어가면 경고가 물러진다.
     비는 감속(ease-out)으로 눌러앉고, 폭풍우는 linear 로 기계적으로 떤다. */
#event-modal[data-weather="rainy"]  .evt-card{--arc:calc(var(--arcade) * 1);    animation:arcade-sink  .5s  cubic-bezier(.2,.7,.3,1);}
#event-modal[data-weather="storm"]  .evt-card{--arc:calc(var(--arcade) * 1.25); animation:arcade-quake .72s linear;}

/* 배경도 함께 — 폭풍우는 더 어둡고 빠르게 닫힌다(무대를 급히 어둡게) */
#event-modal[data-weather="storm"]  .evt-backdrop{animation:arcade-alarm .62s linear !important;}
#event-modal[data-weather="cloudy"] .evt-backdrop{animation:arcade-backdrop-punch .46s ease !important;}

/* 상단 알림도 tone 에 따라 — 위기는 짧고 날카롭게, 잔잔한 소식은 순하게 */
.event-pop[data-tone="crisis"]     {--arc:calc(var(--arcade) * 1.25);}
.event-pop[data-tone="warning"]    {--arc:calc(var(--arcade) * 1.0);}
.event-pop[data-tone="opportunity"]{--arc:calc(var(--arcade) * 1.1);}
.event-pop[data-tone="calm"]       {--arc:calc(var(--arcade) * .5);}

/* 일반 팝업(설정·확인·목록 등)은 가장 얌전하게 — 하루에도 수십 번 뜨는 창들이다.
   ⚠ 여기를 올리면 앱 전체가 산만해진다. 튐이 필요한 건 "소식"이지 "도구"가 아니다. */
.ca-modal-card, .lv-card, .nm-card, .qm-card, #lvl-modal .lvl-card,
#age-mode-modal .am-card, #cl-detail-modal .cl-detail-card{--arc:calc(var(--arcade) * .6);}

/* ⚠ 접근성 — 움직임 최소화 설정에서는 튀지 않는다 (필수).
   전정기관 자극에 민감한 사용자에게 오버슈트는 실제로 불편을 준다.
   여기서 --arcade 를 0 으로 낮추면 키프레임을 그대로 두고도 오버슈트만 사라진다. */
@media (prefers-reduced-motion:reduce){
  :root{--arcade: 0;}
}

/* ── 페이지 전환 애니메이션 ── */
/* ⚠ 여기에 .page / .page.active 전환을 다시 정의하지 말 것 (31차).
   예전엔 위쪽(pageEnter)과 이 자리(ui-page-enter) 두 벌이 겹쳐, 나중 것이 이기는 바람에
   위쪽 정의를 아무리 고쳐도 화면에 반영되지 않았다. 전환 정의는 위쪽 한 곳만 쓴다.
   ⚠ .page-leaving 은 살려 둘 수 없다 — uiPolish 가 클래스를 붙인 직후 goPage 가
     display:none 을 걸어서 애니메이션이 시작도 못 한다(죽은 코드였다). 들어오는 쪽만 쓴다. */
@keyframes ui-page-enter{
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes ui-page-leave{
  from{opacity:1;transform:translateY(0);}
  to{opacity:0;transform:translateY(-4px);}
}

/* ── 탑바 스크롤 시 그림자 ── */
.topbar{transition:box-shadow var(--tx-base), border-color var(--tx-base);}
.topbar.topbar-scrolled{
  border-bottom:1px solid var(--bd);
  box-shadow:0 4px 14px rgba(15,23,42,.06);
  background:var(--bg2);
}

/* ── 모달 진입 표준 애니메이션 (모든 카드 동일) ── */
#ow-modal.open .ow-card,
#orep-modal.open .orep-card,
#og-modal.open .og-card,
#omkt-modal.open .omkt-card,
#mtsi-modal.open .mtsi-card,
#mod-admin-modal.open .mod-a-card,
#mod-reason-modal.open .mod-r-card,
#ca-cmp-modal.open .ca-cmp-card,
#lvl-modal.open .lvl-card,
#age-mode-modal.open .am-card,
#oracle-league-modal.open .ol-card,
#cl-detail-modal.open .cl-detail-card,
#ca-modal.open .ca-modal-card{
  /* 34차 — 아케이드 등장으로 교체. 31차엔 감속곡선 끝단만 튕기게 해서(…,1.15)
     "열릴 때마다 한 번 흔들린다"고 뺐는데, 지금은 키프레임으로 작게→크게→살짝눌림→제자리
     라는 완결된 궤적을 그린다. 흔들림이 아니라 착지로 읽힌다. 세기는 --arcade 하나로 조절. */
  animation:arcade-pop-center 420ms var(--ease-arcade-step);
}
/* ── 백드롭 페이드인 ── */
.ow-backdrop, .orep-backdrop, .og-backdrop, .omkt-backdrop, .mtsi-backdrop,
.mod-a-backdrop, .mod-r-backdrop, .ca-cmp-backdrop, .lvl-backdrop,
.am-backdrop, .ol-backdrop, .ca-modal-backdrop, .cl-detail-backdrop,
.opd-backdrop, .unlock-backdrop{
  animation:ui-fade-in 220ms ease-out;
}
@keyframes ui-fade-in{from{opacity:0;}to{opacity:1;}}

/* ════════════════════════════════════════════════
   📦 통일 스켈레톤 로더 (UI_KIT.skeleton)
   ──────────────────────────────────────────────── */
.ui-skel{
  background:linear-gradient(90deg, var(--bg3) 0%, var(--bg2) 50%, var(--bg3) 100%);
  background-size:200% 100%;
  animation:ui-shimmer 1.4s ease-in-out infinite;
  border-radius:var(--r-sm);
}
@keyframes ui-shimmer{
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}
.ui-skel-line{height:11px;margin-bottom:7px;}
.ui-skel-line.w50{width:50%;}
.ui-skel-line.w70{width:70%;}
.ui-skel-line.w90{width:90%;}
.ui-skel-circle{width:36px;height:36px;border-radius:50%;flex-shrink:0;}
.ui-skel-card{background:var(--bg2);border:1px solid var(--bd);border-radius:var(--r-md);padding:13px;margin-bottom:7px;}
.ui-skel-card-sm{height:72px;border-radius:var(--r-md);}
.ui-skel-row{display:flex;align-items:center;gap:11px;background:var(--bg2);border:1px solid var(--bd);border-radius:var(--r-md);padding:11px;margin-bottom:6px;}
.ui-skel-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;}

/* ════════════════════════════════════════════════
   🌱 통일 빈 상태 / 에러 상태
   ──────────────────────────────────────────────── */
.ui-empty{
  text-align:center;
  padding:28px 18px;
  background:var(--bg2);
  border:1.5px dashed var(--bd2);
  border-radius:var(--r-lg);
  color:var(--t3);
  margin-bottom:8px;
}
.ui-empty-ic{font-size:calc(42px * var(--fs,1));margin-bottom:8px;line-height:1;animation:ui-empty-float 3s ease-in-out infinite;}
@keyframes ui-empty-float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-3px);}
}
.ui-empty-title{font-size:calc(14px * var(--fs,1));font-weight:800;color:var(--t);margin-bottom:5px;}
.ui-empty-sub{font-size:calc(12px * var(--fs,1));color:var(--t3);font-weight:600;line-height:1.6;margin-bottom:12px;}
.ui-empty-action{
  background:var(--acc);color:var(--on-acc);border:none;border-radius:var(--r-md);
  padding:9px 18px;font-size:calc(12px * var(--fs,1));font-weight:800;cursor:pointer;
  font-family:inherit;letter-spacing:.2px;
  box-shadow:0 3px 8px rgba(226,124,31,.25);
  transition:transform var(--tx-fast);
}
.ui-empty-action:active{transform:translateY(1px);}
.ui-empty.ui-error{
  border-color:rgba(220,38,38,.3);
  background:rgba(220,38,38,.03);
}

/* ════════════════════════════════════════════════
   ⏳ 통일 로딩 스피너
   ──────────────────────────────────────────────── */
.ui-loading{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:30px 14px;gap:10px;
}
.ui-spinner{
  width:32px;height:32px;border-radius:50%;
  border:3px solid var(--bg3);
  border-top-color:var(--acc);
  animation:ui-spin 0.8s linear infinite;
}
@keyframes ui-spin{to{transform:rotate(360deg);}}
.ui-loading-l{font-size:calc(12px * var(--fs,1));color:var(--t3);font-weight:700;letter-spacing:.2px;}

/* ════════════════════════════════════════════════
   📱 폼 컨트롤 통일 (모든 input/textarea 일관성)
   ──────────────────────────────────────────────── */
input, textarea, select{
  font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;
}
input:focus, textarea:focus, select:focus{outline:none;}

/* ════════════════════════════════════════════════
   ⚡ 카드 호버 표준 (성인 모드만 / 유아·청소년은 제외)
   ──────────────────────────────────────────────── */
@media (hover:hover){
  body.mode-adult .card,
  body.mode-teen .card{
    transition:transform var(--tx-fast), box-shadow var(--tx-fast);
  }
}

/* ════════════════════════════════════════════════
   🚫 reduced motion 사용자 배려
   ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .page, .page.active, .page-leaving,
  .ui-skel, .ui-empty-ic, .ui-spinner,
  #ow-modal.open .ow-card, #orep-modal.open .orep-card,
  #og-modal.open .og-card, #omkt-modal.open .omkt-card,
  #mtsi-modal.open .mtsi-card{
    animation: none !important;
    transition: none !important;
  }
}

/* ════════════════════════════════════════════════
   🔔 알림 벨 + 센터 (notifications.js)
   ──────────────────────────────────────────────── */
/* 크기·테두리는 상단바 아이콘 버튼 공통(.tb-ib,#notif-bell,#age-mode-badge · 34px 원형)에서 — 여기선 뱃지 위치만 */
#notif-bell{position:relative;}
#notif-bell.has-unread{animation:nb-ring 1.5s ease-in-out infinite;}
@keyframes nb-ring{
  0%,100%{transform:rotate(0);}
  10%{transform:rotate(-12deg);}
  20%{transform:rotate(12deg);}
  30%{transform:rotate(-8deg);}
  40%{transform:rotate(8deg);}
  50%{transform:rotate(0);}
}
.nb-ic{font-size:calc(14px * var(--fs,1));line-height:0;display:flex;}
.nb-count{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;border-radius:8px;background:var(--red);color:#fff;font-size:calc(11px * var(--fs,1));font-weight:800;display:none;align-items:center;justify-content:center;padding:0 4px;letter-spacing:.2px;border:1.5px solid var(--bg);box-shadow:0 1px 3px rgba(220,38,38,.5);}

#nc-modal{position:fixed;inset:0;z-index:10092;display:none;}
#nc-modal.open{display:block;}
.nc-backdrop{position:absolute;inset:0;background:rgba(8,12,24,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.nc-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(100% - 24px);max-width:400px;max-height:80vh;overflow-y:auto;background:var(--bg2);border:2px solid var(--bd2);border-radius:var(--r-2xl);padding:18px;box-shadow:0 24px 56px rgba(8,12,24,.4);}
.nc-close{position:absolute;top:10px;right:14px;background:transparent;border:none;color:var(--t3);font-size:calc(22px * var(--fs,1));cursor:pointer;line-height:1;padding:0 4px;}
.nc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:8px;}
.nc-title{font-family:var(--font-hd);font-size:calc(18px * var(--fs,1));font-weight:700;color:var(--t);}
.nc-acts{display:flex;gap:5px;}
.nc-act-btn{background:var(--bg);border:1px solid var(--bd);color:var(--t2);border-radius:8px;padding:5px 9px;font-size:calc(11px * var(--fs,1));font-weight:700;cursor:pointer;font-family:inherit;}
.nc-act-btn.danger{color:var(--red);border-color:rgba(220,38,38,.3);}
.nc-permit-hint{font-size:calc(11px * var(--fs,1));color:var(--t2);background:rgba(245,158,11,.06);border:1px solid rgba(245,158,11,.3);border-radius:8px;padding:9px 11px;margin-bottom:10px;line-height:1.6;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.nc-permit-btn{background:#F59E0B;color:#fff;border:none;border-radius:8px;padding:5px 10px;font-size:calc(11px * var(--fs,1));font-weight:800;cursor:pointer;font-family:inherit;margin-left:auto;}
.nc-list{display:flex;flex-direction:column;gap:5px;}
.nc-item{display:flex;align-items:flex-start;gap:11px;background:var(--bg);border:1px solid var(--bd);border-radius:var(--r-md);padding:10px 12px;cursor:pointer;transition:border-color var(--tx-fast);position:relative;}
.nc-item:hover{border-color:var(--acc);}
.nc-item.read{opacity:.6;}
.nc-item.unread{background:linear-gradient(135deg,rgba(226,124,31,.04),var(--bg));border-color:rgba(226,124,31,.25);}
.nc-it-icon{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:calc(18px * var(--fs,1));flex-shrink:0;background:var(--bg3);}
.nc-it-icon.nc-type-oracle{background:rgba(168,85,247,.15);}
.nc-it-icon.nc-type-guild{background:rgba(14,116,144,.15);}
.nc-it-icon.nc-type-mtsi{background:rgba(168,85,247,.15);}
.nc-it-icon.nc-type-social{background:rgba(59,130,246,.15);}
.nc-it-icon.nc-type-success{background:rgba(21,128,61,.15);}
.nc-it-icon.nc-type-warn{background:rgba(245,158,11,.15);}
.nc-it-body{flex:1;min-width:0;}
.nc-it-title{font-size:calc(13px * var(--fs,1));font-weight:800;color:var(--t);line-height:1.4;margin-bottom:2px;}
.nc-it-sub{font-size:calc(11px * var(--fs,1));color:var(--t2);line-height:1.5;font-weight:500;margin-bottom:3px;}
.nc-it-time{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:700;}
.nc-unread-dot{width:8px;height:8px;border-radius:50%;background:var(--acc);position:absolute;top:12px;right:10px;box-shadow:0 0 6px rgba(226,124,31,.5);}

.oracle-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:14px;}
.oracle-stat{background:var(--bg2);border:0.5px solid var(--bd);border-radius:12px;padding:12px 6px;text-align:center;}
/* 숫자가 주인공 — 라벨과의 크기 차를 벌려 한눈에 값부터 읽히게 한다 */
.oracle-stat-n{font-size:calc(23px * var(--fs,1));font-weight:800;color:var(--acc-text);font-variant-numeric:tabular-nums;letter-spacing:-.03em;line-height:1.1;}
.oracle-stat-l{font-size:calc(11px * var(--fs,1));color:var(--t2);margin-top:3px;font-weight:600;letter-spacing:.1px;line-height:1.25;}
.oracle-dash-btn{
  display:block;width:100%;margin:2px 0 14px;
  background:linear-gradient(135deg,#A855F7,#7C3AED);color:#fff;border:none;border-radius:12px;
  padding:11px 14px;font-size:calc(13px * var(--fs,1));font-weight:800;cursor:pointer;font-family:inherit;letter-spacing:-.2px;
  box-shadow:0 6px 18px rgba(168,85,247,.28);transition:filter .12s ease;
}
.oracle-dash-btn:hover{filter:brightness(1.08);}

/* ═══ 개인 예측 대시보드 (predictionDash.js) ═══ */
#pd-modal{position:fixed;inset:0;z-index:10099;display:none;}
#pd-modal.open{display:block;}
.pd-backdrop{position:absolute;inset:0;background:rgba(8,12,24,.78);backdrop-filter:blur(8px);}
.pd-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(100% - 24px);max-width:440px;max-height:92vh;overflow-y:auto;background:var(--bg2);border:2px solid #A855F7;border-radius:24px;padding:22px 20px 18px;box-shadow:0 24px 56px rgba(168,85,247,.24);}
.pd-close{position:absolute;top:10px;right:14px;background:transparent;border:none;color:var(--t3);font-size:calc(24px * var(--fs,1));cursor:pointer;line-height:1;padding:0 4px;}
.pd-head{margin-bottom:14px;}
.pd-eyebrow{font-size:calc(10px * var(--fs,1));color:#A855F7;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:4px;}
.pd-title{font-family:var(--font-hd);font-size:calc(20px * var(--fs,1));font-weight:700;color:var(--t);letter-spacing:-.3px;margin-bottom:4px;}
.pd-sub{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:600;}

.pd-tier-card{display:flex;align-items:center;gap:12px;background:var(--bg);border:1.5px solid;border-radius:16px;padding:12px;margin-bottom:12px;}
.pd-tier-emoji{font-size:calc(32px * var(--fs,1));line-height:1;}
.pd-tier-info{flex:1;}
.pd-tier-name{font-family:var(--font-hd);font-size:calc(16px * var(--fs,1));font-weight:700;margin-bottom:2px;}
.pd-tier-meta{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:600;margin-bottom:4px;}
.pd-tier-progress-lbl{font-size:calc(11px * var(--fs,1));color:var(--t2);font-weight:700;margin-bottom:3px;}
.pd-tier-bar{height:6px;background:var(--bg3);border-radius:4px;overflow:hidden;}
.pd-tier-fill{height:100%;border-radius:4px;transition:width .5s ease;}

.pd-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:14px;}
.pd-stat{background:var(--bg);border:1px solid var(--bd);border-radius:12px;padding:8px 6px;text-align:center;}
.pd-stat-v{font-family:var(--font-hd);font-size:calc(16px * var(--fs,1));font-weight:700;color:#A855F7;font-variant-numeric:tabular-nums;line-height:1.1;}
.pd-stat-l{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:700;margin-top:3px;}

.pd-section{margin-bottom:14px;background:var(--bg);border:1px solid var(--bd);border-radius:12px;padding:10px 12px;}
.pd-section-h{font-size:calc(12px * var(--fs,1));font-weight:800;color:var(--t2);margin-bottom:8px;letter-spacing:-.2px;}
.pd-empty{font-size:calc(11px * var(--fs,1));color:var(--t3);text-align:center;padding:8px;}
.pd-empty-full{text-align:center;padding:32px 20px;}
.pd-empty-emoji{font-size:calc(48px * var(--fs,1));margin-bottom:12px;}
.pd-empty-title{font-family:var(--font-hd);font-size:calc(15px * var(--fs,1));font-weight:700;color:var(--t);margin-bottom:6px;}
.pd-empty-sub{font-size:calc(12px * var(--fs,1));color:var(--t3);font-weight:500;line-height:1.6;}

.pd-spark{width:100%;height:60px;display:block;background:var(--bg2);border-radius:8px;padding:4px;box-sizing:border-box;}
.pd-spark-empty{font-size:calc(11px * var(--fs,1));color:var(--t3);text-align:center;padding:12px;}
.pd-spark-legend{display:flex;gap:10px;align-items:center;font-size:calc(11px * var(--fs,1));color:var(--t3);margin-top:6px;font-weight:700;}
.pd-legend-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:3px;}
.pd-legend-win{background:#10B981;}
.pd-legend-lose{background:#EF4444;}
.pd-spark-count{margin-left:auto;}

.pd-bar-row{display:flex;align-items:center;gap:8px;margin-bottom:5px;font-size:calc(11px * var(--fs,1));color:var(--t);}
.pd-bar-lbl{width:70px;font-weight:700;font-size:calc(11px * var(--fs,1));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pd-bar-track{flex:1;height:8px;background:var(--bg3);border-radius:4px;overflow:hidden;}
.pd-bar-fill{height:100%;border-radius:4px;transition:width .5s ease;}
.pd-bar-val{font-family:var(--font-hd);font-size:calc(11px * var(--fs,1));font-weight:800;font-variant-numeric:tabular-nums;min-width:70px;text-align:right;}
.pd-bar-cnt{color:var(--t3);font-weight:600;font-size:calc(10px * var(--fs,1));}

.pd-ind-row{display:flex;justify-content:space-between;font-size:calc(12px * var(--fs,1));padding:4px 0;border-bottom:1px dashed var(--bd);}
.pd-ind-row:last-child{border-bottom:none;}
.pd-ind-name{color:var(--t);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pd-ind-stat{color:#A855F7;font-weight:800;font-variant-numeric:tabular-nums;flex-shrink:0;margin-left:8px;}

.pd-two-col{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px;}
.pd-col{background:var(--bg);border:1px solid var(--bd);border-radius:12px;padding:10px 12px;}
.pd-col .pd-section-h{margin-bottom:6px;}

.pd-log{max-height:220px;overflow-y:auto;}
.pd-log-row{display:flex;align-items:center;gap:6px;padding:5px 0;border-bottom:1px dashed var(--bd);font-size:calc(11px * var(--fs,1));}
.pd-log-row:last-child{border-bottom:none;}
.pd-log-when{color:var(--t3);font-weight:700;width:50px;flex-shrink:0;}
.pd-log-ind{flex:1;color:var(--t);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pd-log-dir{font-size:calc(12px * var(--fs,1));}
.pd-log-status{color:var(--t2);font-weight:800;font-variant-numeric:tabular-nums;font-size:calc(11px * var(--fs,1));}

.pd-report-boost{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.pd-boost-item{flex:1;background:var(--bg2);border-radius:8px;padding:8px;text-align:center;}
.pd-boost-lbl{font-size:calc(10px * var(--fs,1));color:var(--t3);font-weight:700;margin-bottom:3px;}
.pd-boost-v{font-family:var(--font-hd);font-size:calc(16px * var(--fs,1));font-weight:800;font-variant-numeric:tabular-nums;}
.pd-boost-with{color:#10B981;}
.pd-boost-without{color:var(--t3);}
.pd-boost-arrow{font-size:calc(18px * var(--fs,1));color:var(--t3);}
.pd-boost-diff{font-weight:800;font-size:calc(12px * var(--fs,1));padding:3px 8px;border-radius:8px;font-variant-numeric:tabular-nums;}
.pd-boost-diff.pos{background:rgba(16,185,129,.15);color:#10B981;}
.pd-boost-diff.neg{background:rgba(239,68,68,.15);color:#EF4444;}
.pd-boost-note{font-size:calc(11px * var(--fs,1));color:var(--t3);text-align:center;font-weight:600;font-style:italic;line-height:1.5;}
.pd-brier-row{display:flex;justify-content:center;margin-bottom:10px;}
.pd-brier-card{background:linear-gradient(135deg,rgba(168,85,247,.10),rgba(168,85,247,.02));border:1.5px solid rgba(168,85,247,.32);border-radius:12px;padding:10px 20px;text-align:center;}
.pd-brier-v{font-family:var(--font-hd);font-size:calc(20px * var(--fs,1));font-weight:800;color:#A855F7;font-variant-numeric:tabular-nums;line-height:1;}
.pd-brier-l{font-size:calc(10px * var(--fs,1));color:var(--t2);font-weight:700;margin-top:3px;}
.pd-brier-sub{font-size:calc(10px * var(--fs,1));color:var(--t3);font-weight:600;margin-top:2px;}
.pd-calib-title{font-size:calc(11px * var(--fs,1));font-weight:800;color:var(--t2);margin-bottom:8px;}
.pd-calib-row{display:flex;align-items:center;gap:6px;font-size:calc(11px * var(--fs,1));margin-bottom:5px;}
.pd-calib-conf{width:36px;font-weight:800;color:var(--t2);font-variant-numeric:tabular-nums;text-align:right;}
.pd-calib-bar{position:relative;flex:1;height:10px;background:var(--bg3);border-radius:4px;overflow:hidden;}
.pd-calib-target{position:absolute;top:0;bottom:0;width:2px;background:var(--acc);z-index:2;box-shadow:0 0 0 1px var(--bg);}
.pd-calib-actual{height:100%;border-radius:4px;transition:width .4s ease;}
.pd-calib-vals{font-size:calc(10px * var(--fs,1));color:var(--t3);font-weight:700;font-variant-numeric:tabular-nums;flex-shrink:0;}
.pd-calib-note{font-size:calc(10px * var(--fs,1));color:var(--t3);font-weight:600;text-align:center;font-style:italic;line-height:1.5;margin-top:6px;}

.pd-foot{font-size:calc(10px * var(--fs,1));color:var(--t3);font-weight:600;text-align:center;background:var(--bg3);padding:7px;border-radius:8px;line-height:1.6;}

.oracle-upcoming{display:flex;flex-direction:column;gap:9px;}
.oracle-ind-card{
  background:var(--bg2);border:0.5px solid var(--bd);border-radius:16px;padding:13px 15px;
  box-shadow:var(--shadow-sm);
}
.oracle-ind-card.has-bet{border-color:var(--acc);background:rgba(184,146,58,.04);}
.oracle-ind-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px;}
.oracle-ind-name{font-size:calc(14px * var(--fs,1));font-weight:600;}
.oracle-ind-date{font-size:calc(11px * var(--fs,1));color:var(--acc-text);font-weight:500;}
.oracle-ind-hint{font-size:calc(11px * var(--fs,1));color:var(--t2);font-weight:500;line-height:1.55;margin-bottom:11px;}
.oracle-ind-mybet{font-size:calc(12px * var(--fs,1));color:var(--acc-text);font-weight:500;margin-top:4px;}
.oracle-bet-row{display:grid;grid-template-columns:75px 1fr 1fr 1fr;gap:5px;}
.oracle-stake-input{
  background:var(--bg3);border:0.5px solid var(--bd2);border-radius:8px;
  padding:8px;font-size:calc(12px * var(--fs,1));color:var(--t);text-align:center;
  font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;outline:none;font-variant-numeric:tabular-nums;
}
.oracle-bet-btn{
  background:var(--bg2);border:1px solid var(--bd2);border-radius:8px;
  padding:8px 4px;font-size:calc(11px * var(--fs,1));font-weight:600;cursor:pointer;
  font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;transition:all .15s;
}
.oracle-bet-btn.high:hover{border-color:var(--green);color:var(--green);}
.oracle-bet-btn.low:hover {border-color:var(--red);color:var(--red);}
.oracle-bet-btn.flat:hover{border-color:var(--t2);color:var(--t);}
.oracle-bet-btn:active{transform:scale(.97);}
.oracle-list{display:flex;flex-direction:column;gap:5px;}
.oracle-pred-row{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:9px 13px;background:var(--bg2);border:0.5px solid var(--bd);border-radius:12px;
}
.oracle-pred-row.won{border-color:rgba(76,175,125,.4);background:rgba(76,175,125,.05);}
.oracle-pred-row.lost{border-color:rgba(220,38,38,.3);background:rgba(220,38,38,.04);}
.oracle-pred-name{font-size:calc(12px * var(--fs,1));font-weight:600;}
.oracle-pred-bet{font-size:calc(10px * var(--fs,1));color:var(--t2);margin-top:1px;font-weight:500;}
.oracle-pred-status{font-size:calc(12px * var(--fs,1));font-weight:600;flex-shrink:0;}
.oracle-pred-row.won .oracle-pred-status{color:var(--green);}
.oracle-pred-row.lost .oracle-pred-status{color:var(--red);}
.oracle-tip{
  margin-top:14px;padding:10px 13px;background:var(--bg3);border-radius:12px;
  font-size:calc(11px * var(--fs,1));color:var(--t2);font-weight:500;line-height:1.55;
}

/* 학습 페이지 필터 배너 (KM에서 deep-link 진입 시) */
.learn-filter-banner{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:linear-gradient(135deg,rgba(99,102,241,.08),rgba(184,146,58,.04));
  border:0.5px solid rgba(99,102,241,.3);border-radius:12px;
  padding:11px 14px;margin-bottom:11px;font-size:calc(12px * var(--fs,1));color:var(--t);
  animation:fu .25s ease;
}

/* ── League ── */
.lg-mycard{
  background:linear-gradient(135deg,var(--bg2),rgba(184,146,58,.05));
  border:0.5px solid var(--acc);border-radius:16px;
  padding:16px;margin-bottom:14px;box-shadow:var(--shadow-md);
}
.lg-tier-row{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.lg-tier-emoji{font-size:calc(36px * var(--fs,1));flex-shrink:0;}
.lg-tier-name{font-family:var(--font-hd);font-size:calc(20px * var(--fs,1));letter-spacing:-.3px;}
.lg-tier-progress{margin-top:4px;}
.lg-tier-bar{height:6px;background:var(--bg3);border-radius:4px;overflow:hidden;margin-bottom:3px;}
.lg-tier-fill{height:100%;background:linear-gradient(90deg,var(--acc),var(--acc2));border-radius:4px;transition:width .5s;}
.lg-tier-next{font-size:calc(10px * var(--fs,1));color:var(--t3);font-weight:500;}
.lg-score{font-size:calc(32px * var(--fs,1));font-weight:500;color:var(--acc-text);font-variant-numeric:tabular-nums;flex-shrink:0;}
.lg-breakdown{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding-top:11px;border-top:0.5px solid var(--bd);}
.lg-bd-item{text-align:center;}
.lg-bd-l{font-size:calc(11px * var(--fs,1));color:var(--t3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px;}
.lg-bd-v{font-size:calc(13px * var(--fs,1));font-weight:500;}
.lg-bd-x{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:500;margin-left:2px;}

.lg-tiers{display:flex;flex-direction:column;gap:6px;margin-bottom:6px;}
.lg-tier-card{
  display:flex;align-items:center;gap:11px;padding:10px 13px;
  background:var(--bg2);border:0.5px solid var(--bd);border-radius:12px;
  transition:all .2s;
}
.lg-tier-card.current{border-color:var(--acc);background:rgba(184,146,58,.06);}
.lg-tier-card-emoji{font-size:calc(22px * var(--fs,1));flex-shrink:0;}
.lg-tier-card-info{flex:1;}
.lg-tier-card-name{font-size:calc(13px * var(--fs,1));font-weight:500;}
.lg-tier-card-perks{font-size:calc(10px * var(--fs,1));color:var(--t3);margin-top:1px;font-weight:500;}
.lg-tier-card-range{font-size:calc(11px * var(--fs,1));color:var(--t2);font-variant-numeric:tabular-nums;flex-shrink:0;}

.lg-ranking{display:flex;flex-direction:column;gap:5px;}
.lg-rank-row{
  display:flex;align-items:center;gap:11px;padding:9px 13px;
  background:var(--bg2);border:0.5px solid var(--bd);border-radius:12px;
}
.lg-rank-row.me{border-color:var(--acc);background:rgba(184,146,58,.06);}
.lg-rank-pos{width:26px;font-size:calc(12px * var(--fs,1));font-weight:500;color:var(--t2);text-align:center;flex-shrink:0;font-variant-numeric:tabular-nums;}
.lg-rank-pos.gold{color:#f59e0b;}.lg-rank-pos.silver{color:#94a3b8;}.lg-rank-pos.bronze{color:#a16207;}
.lg-rank-tier{font-size:calc(18px * var(--fs,1));flex-shrink:0;}
.lg-rank-name{flex:1;font-size:calc(13px * var(--fs,1));font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lg-rank-score{font-size:calc(13px * var(--fs,1));font-weight:500;color:var(--acc-text);font-variant-numeric:tabular-nums;flex-shrink:0;}

/* ── Macro-Lingo 시나리오 모달 ── */
#ml-modal{
  display:none;position:fixed;inset:0;
  background:rgba(15,23,42,.72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  z-index:9998;
  align-items:center;justify-content:center;padding:20px;
}
#ml-modal.active{display:flex;}
.ml-card{
  background:var(--bg2);border:0.5px solid var(--bd2);
  border-radius:24px;padding:24px 22px;width:100%;max-width:420px;
  max-height:85vh;overflow-y:auto;
  box-shadow:0 10px 40px rgba(0,0,0,.5);
}
.ml-card.crisis{border-color:rgba(224,92,92,.6);background:linear-gradient(180deg,rgba(224,92,92,.08),var(--bg2) 60%);}
.ml-card.calm  {border-color:rgba(99,165,234,.6);background:linear-gradient(180deg,rgba(99,165,234,.08),var(--bg2) 60%);}
.ml-card.boom  {border-color:rgba(212,175,55,.7);background:linear-gradient(180deg,rgba(212,175,55,.10),var(--bg2) 60%);}
.ml-mode{font-size:calc(11px * var(--fs,1));text-transform:uppercase;letter-spacing:1.2px;font-weight:600;margin-bottom:6px;}
.ml-mode.crisis{color:var(--red);}
.ml-mode.calm  {color:#69a5ea;}
.ml-mode.boom  {color:#d4af37;}
.ml-title{font-family:var(--font-hd);font-size:calc(22px * var(--fs,1));margin-bottom:14px;line-height:1.3;}
.ml-section{margin-bottom:14px;}
.ml-section-h{font-size:calc(10px * var(--fs,1));text-transform:uppercase;letter-spacing:.8px;color:var(--t3);margin-bottom:5px;font-weight:500;}
.ml-section-b{font-size:calc(13px * var(--fs,1));color:var(--t);line-height:1.6;font-weight:500;}
.ml-section-b strong{font-weight:500;color:var(--t);}
.ml-mission{
  background:var(--bg3);border:0.5px solid var(--bd);border-radius:12px;
  padding:11px 13px;font-size:calc(13px * var(--fs,1));font-style:italic;color:var(--t2);
  margin-bottom:16px;
}
.ml-meta{display:flex;gap:10px;font-size:calc(11px * var(--fs,1));color:var(--t3);margin-bottom:14px;flex-wrap:wrap;}
.ml-meta span{padding:3px 9px;background:var(--bg3);border-radius:8px;}
.ml-close-btn{
  width:100%;background:var(--acc);color:var(--bg);border:none;
  border-radius:12px;padding:12px;font-size:calc(13px * var(--fs,1));font-weight:500;
  cursor:pointer;font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;
}
.ml-loading{font-size:calc(13px * var(--fs,1));color:var(--t2);text-align:center;padding:40px 0;}
.ml-loading .ldot::after{content:'...';animation:ldots 1.2s steps(4,end) infinite;}
@keyframes ldots{0%,20%{content:'';}40%{content:'.';}60%{content:'..';}80%,100%{content:'...';}}
/* 모바일 최적화 — macro-lingo 모달 */
@media (max-width:420px){
  #ml-modal{padding:0;align-items:flex-end;}
  .ml-card{max-width:100%;max-height:92vh;max-height:92dvh;border-radius:24px 22px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom));border-left:none;border-right:none;border-bottom:none;}
  .ml-title{font-size:calc(19px * var(--fs,1));margin-bottom:12px;}
  .ml-section-h{font-size:calc(11px * var(--fs,1));}
  .ml-section-b{font-size:calc(13px * var(--fs,1));}
  .ml-close-btn{padding:14px;font-size:calc(14px * var(--fs,1));min-height:48px;font-weight:700;border-radius:12px;}
}
/* 닉네임 인라인 편집 */
#nick-edit-wrap{display:none;padding:12px 16px;border-top:0.5px solid var(--bd);background:var(--bg3);}
.nick-edit-input{width:100%;background:var(--bg2);border:0.5px solid var(--bd2);border-radius:8px;padding:9px 12px;color:var(--t);font-size:calc(13px * var(--fs,1));font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;outline:none;margin-bottom:8px;}
.nick-edit-input:focus{border-color:var(--acc);}
.nick-edit-actions{display:flex;gap:7px;}
.nick-save-btn{flex:1;padding:9px;background:var(--acc);color:var(--bg);border:none;border-radius:8px;font-size:calc(13px * var(--fs,1));font-weight:500;cursor:pointer;font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;}
.nick-cancel-btn{flex:1;padding:9px;background:transparent;border:0.5px solid var(--bd2);border-radius:8px;font-size:calc(13px * var(--fs,1));color:var(--t2);cursor:pointer;font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;}

/* ── Oracle 무한 퀘스트 + 뱃지 ── */
.oracle-report{
  width:100%;background:var(--bg3);border:1.5px solid var(--bd);border-radius:12px;
  padding:9px 11px;font-size:calc(12px * var(--fs,1));color:var(--t);font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;
  resize:vertical;margin-top:8px;outline:none;font-weight:500;
}
.oracle-report:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(226,124,31,.15);}
.oracle-report::placeholder{color:var(--t3);font-weight:400;}
.oracle-pred-report{
  margin-top:5px;font-size:calc(11px * var(--fs,1));color:var(--t2);line-height:1.5;
  background:var(--bg3);border-radius:8px;padding:7px 10px;font-weight:500;
}
.oracle-pred-row.prophet{border-color:var(--acc);box-shadow:0 3px 0 var(--btn-shadow-acc);}
.oracle-pred-badge{
  display:inline-block;background:linear-gradient(135deg,#FEF3E2,#FDD9A6);
  color:var(--acc-text);border:1px solid var(--acc);border-radius:8px;
  padding:1px 7px;font-size:calc(11px * var(--fs,1));font-weight:800;letter-spacing:.3px;margin-left:6px;
  box-shadow:0 1px 0 var(--btn-shadow-acc);
}
.oracle-badge-row{display:flex;gap:8px;margin:10px 0 6px;flex-wrap:wrap;}
.oracle-badge{
  display:flex;align-items:center;gap:9px;
  background:linear-gradient(135deg,#FEF3E2,#FDD9A6);
  border:1.5px solid var(--acc);border-radius:16px;padding:8px 12px;
  box-shadow:0 2px 0 var(--btn-shadow-acc);
}
.oracle-badge-ic{font-size:calc(20px * var(--fs,1));filter:drop-shadow(0 1px 2px rgba(226,124,31,.3));}
.oracle-badge-name{font-size:calc(12px * var(--fs,1));font-weight:800;color:var(--acc-text);}
.oracle-badge-desc{font-size:calc(10px * var(--fs,1));color:var(--t2);font-weight:600;}

.oracle-infinite{display:flex;flex-direction:column;gap:8px;}
.oracle-inf-card{
  display:flex;align-items:center;gap:12px;padding:13px 15px;
  background:var(--bg2);border:1.5px solid var(--bd);border-radius:16px;
  cursor:pointer;box-shadow:0 3px 0 var(--bd2);
  transition:transform .12s ease,box-shadow .12s ease,border-color .15s ease;
}
.oracle-inf-card:active{transform:translateY(2px);box-shadow:0 1px 0 var(--bd2);}
.oracle-inf-card.locked{opacity:.55;background:var(--bg3);}
.oracle-inf-card.locked .oracle-inf-name{color:var(--t3);}
.oracle-inf-card.soon{border-style:dashed;}
.oracle-inf-icon{font-size:calc(26px * var(--fs,1));flex-shrink:0;width:38px;text-align:center;}
.oracle-inf-body{flex:1;min-width:0;}
.oracle-inf-name{font-size:calc(14px * var(--fs,1));font-weight:800;color:var(--t);}
.oracle-inf-desc{font-size:calc(11px * var(--fs,1));color:var(--t2);font-weight:500;margin-top:2px;line-height:1.4;}
.oracle-inf-cta{font-size:calc(11px * var(--fs,1));font-weight:800;color:var(--acc-text);flex-shrink:0;letter-spacing:.2px;}
.oracle-inf-card.locked .oracle-inf-cta{color:var(--t3);}

/* ── 순환매 레이스 모달 ── */
#rotation-race-modal{position:fixed;inset:0;z-index:10045;display:none;pointer-events:none;}
#rotation-race-modal.open{display:block;pointer-events:auto;}
#rotation-race-modal .rr-backdrop{position:absolute;inset:0;background:rgba(8,12,24,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:evtBackdrop .3s ease;}
#rotation-race-modal .rr-card{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:calc(100% - 28px);max-width:420px;max-height:88vh;overflow-y:auto;
  background:var(--bg2);border:2.5px solid var(--bd2);border-radius:24px;
  box-shadow:0 24px 56px rgba(8,12,24,.4),0 4px 0 var(--btn-shadow-acc);
  animation:arcade-pop-center .38s var(--ease-arcade-step);
  -webkit-overflow-scrolling:touch;
}
#rotation-race-modal .rr-head{display:flex;align-items:flex-start;gap:11px;padding:18px 18px 12px;border-bottom:1.5px solid var(--bd);}
#rotation-race-modal .rr-head-ic{font-size:calc(32px * var(--fs,1));flex-shrink:0;filter:drop-shadow(0 3px 6px rgba(226,124,31,.3));}
#rotation-race-modal .rr-head-body{flex:1;min-width:0;}
#rotation-race-modal .rr-head-title{font-family:var(--font-hd);font-size:calc(20px * var(--fs,1));font-weight:700;letter-spacing:-.3px;line-height:1.2;}
#rotation-race-modal .rr-head-sub{font-size:calc(12px * var(--fs,1));color:var(--t2);font-weight:500;margin-top:2px;line-height:1.4;}
#rotation-race-modal .rr-close{background:transparent;border:none;color:var(--t3);font-size:calc(24px * var(--fs,1));cursor:pointer;padding:0 4px;font-weight:500;line-height:1;}
#rotation-race-modal .rr-body{padding:14px 18px 20px;}
#rotation-race-modal .rr-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px;}
#rotation-race-modal .rr-stat{background:var(--bg3);border:1.5px solid var(--bd);border-radius:12px;padding:10px 8px;text-align:center;}
#rotation-race-modal .rr-stat-n{font-size:calc(17px * var(--fs,1));font-weight:800;color:var(--acc-text);font-variant-numeric:tabular-nums;}
#rotation-race-modal .rr-stat-l{font-size:calc(10px * var(--fs,1));color:var(--t3);font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-top:2px;}
#rotation-race-modal .rr-section-title{font-size:calc(11px * var(--fs,1));font-weight:800;color:var(--acc-text);text-transform:uppercase;letter-spacing:.6px;margin:12px 0 8px;}
#rotation-race-modal .rr-sectors{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
#rotation-race-modal .rr-sec{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  background:var(--bg2);border:2px solid var(--bd);border-radius:16px;padding:14px 8px;
  cursor:pointer;font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;
  box-shadow:0 3px 0 var(--bd2);
  transition:transform .12s ease,box-shadow .12s ease,border-color .15s ease,background .15s ease;
}
#rotation-race-modal .rr-sec:active{transform:translateY(2px);box-shadow:0 1px 0 var(--bd2);}
#rotation-race-modal .rr-sec.sel{border-color:var(--acc);background:rgba(226,124,31,.08);box-shadow:0 3px 0 var(--btn-shadow-acc);}
#rotation-race-modal .rr-sec-ic{font-size:calc(26px * var(--fs,1));line-height:1;}
#rotation-race-modal .rr-sec-name{font-size:calc(12px * var(--fs,1));font-weight:800;color:var(--t);}
#rotation-race-modal .rr-sec-etf{font-size:calc(10px * var(--fs,1));color:var(--t3);font-weight:700;letter-spacing:.4px;}
#rotation-race-modal .rr-resolve{
  width:100%;margin-top:12px;background:var(--acc);color:var(--on-acc);border:none;
  border-radius:16px;padding:13px;font-size:calc(15px * var(--fs,1));font-weight:800;letter-spacing:.2px;
  cursor:pointer;font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;
  box-shadow:0 4px 0 var(--btn-shadow-acc),0 6px 14px rgba(226,124,31,.22);
  transition:transform .12s ease,box-shadow .12s ease;
}
#rotation-race-modal .rr-resolve:disabled{background:var(--bg4);color:var(--t3);box-shadow:0 2px 0 rgba(15,23,42,.08);cursor:default;}
#rotation-race-modal .rr-resolve:not(:disabled):active{transform:translateY(3px);box-shadow:0 1px 0 var(--btn-shadow-acc);}
#rotation-race-modal .rr-hist{display:flex;flex-direction:column;gap:5px;}
#rotation-race-modal .rr-hist-row{display:flex;align-items:center;gap:10px;background:var(--bg3);border:1px solid var(--bd);border-radius:12px;padding:8px 11px;font-size:calc(12px * var(--fs,1));font-weight:600;}
#rotation-race-modal .rr-hist-row.pos{background:rgba(21,128,61,.08);border-color:rgba(21,128,61,.3);color:var(--green);}
#rotation-race-modal .rr-hist-row.neg{background:rgba(220,38,38,.06);border-color:rgba(220,38,38,.28);color:var(--red);}
#rotation-race-modal .rr-hist-r{font-weight:800;letter-spacing:.3px;min-width:32px;}
#rotation-race-modal .rr-hist-s{flex:1;color:var(--t);}
#rotation-race-modal .rr-hist-v{font-weight:800;font-variant-numeric:tabular-nums;}
#rotation-race-modal .rr-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;}
#rotation-race-modal .rr-reset{background:transparent;border:1.5px solid var(--bd2);border-radius:12px;padding:6px 12px;font-size:calc(12px * var(--fs,1));color:var(--t2);font-weight:700;cursor:pointer;font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;}
#rotation-race-modal .rr-tip{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:500;line-height:1.4;text-align:right;flex:1;}
#rotation-race-modal .rr-mode-row{display:flex;justify-content:flex-end;margin-bottom:8px;}
#rotation-race-modal .rr-mode{display:inline-flex;align-items:center;gap:5px;font-size:calc(11px * var(--fs,1));font-weight:800;letter-spacing:.4px;padding:3px 10px;border-radius:24px;border:1.5px solid;}
#rotation-race-modal .rr-mode.live{color:var(--green);border-color:var(--green);background:rgba(21,128,61,.10);}
#rotation-race-modal .rr-mode.sim{color:var(--t3);border-color:var(--bd2);background:var(--bg3);}
/* 개조: 매크로 스냅샷 + 힌트 + 결과 해설 */
#rotation-race-modal .rr-macro{background:linear-gradient(135deg,rgba(6,182,212,.05),rgba(168,85,247,.04));border:1px solid rgba(6,182,212,.22);border-radius:12px;padding:10px 12px;margin:10px 0 4px;}
#rotation-race-modal .rr-macro-h{font-family:var(--font-hd);font-size:calc(12px * var(--fs,1));color:var(--t);margin-bottom:8px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
#rotation-race-modal .rr-macro-hint{font-size:calc(10px * var(--fs,1));color:var(--t3);font-weight:500;letter-spacing:.2px;}
#rotation-race-modal .rr-macro-grid{display:flex;flex-wrap:wrap;gap:6px;}
#rotation-race-modal .rr-mchip{display:flex;align-items:baseline;gap:5px;background:var(--bg2);border:1px solid var(--bd);border-radius:8px;padding:5px 9px;font-family:'DM Mono',monospace;font-size:calc(11px * var(--fs,1));color:var(--t2);}
#rotation-race-modal .rr-mchip span{opacity:.7;font-size:calc(10px * var(--fs,1));}
#rotation-race-modal .rr-mchip b{color:var(--t);font-weight:700;}
#rotation-race-modal .rr-mchip.warn{border-color:rgba(220,38,38,.32);background:rgba(220,38,38,.06);}
#rotation-race-modal .rr-mchip.warn b{color:#DC2626;}
#rotation-race-modal .rr-mchip.good{border-color:rgba(21,128,61,.32);background:rgba(21,128,61,.06);}
#rotation-race-modal .rr-mchip.good b{color:var(--green);}
/* 섹터 카드에 힌트·정합도 표시 */
#rotation-race-modal .rr-sec-hint{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:500;line-height:1.35;margin-top:3px;letter-spacing:-.1px;}
#rotation-race-modal .rr-sec-fit{font-family:'DM Mono',monospace;font-size:calc(11px * var(--fs,1));font-weight:700;letter-spacing:.4px;margin-top:5px;padding:2px 7px;border-radius:24px;display:inline-block;}
#rotation-race-modal .rr-sec.fit-hi{border-color:rgba(21,128,61,.4);}
#rotation-race-modal .rr-sec.fit-hi .rr-sec-fit{background:rgba(21,128,61,.14);color:var(--green);}
#rotation-race-modal .rr-sec.fit-mid .rr-sec-fit{background:var(--bg3);color:var(--t3);}
#rotation-race-modal .rr-sec.fit-lo{opacity:.72;}
#rotation-race-modal .rr-sec.fit-lo .rr-sec-fit{background:rgba(220,38,38,.10);color:#DC2626;}
/* 결과 해설 박스 */
#rotation-race-modal .rr-explain{border-radius:12px;padding:12px 14px;margin:12px 0 4px;border:1px solid;}
#rotation-race-modal .rr-explain.pos{border-color:rgba(21,128,61,.28);background:rgba(21,128,61,.05);}
#rotation-race-modal .rr-explain.neg{border-color:rgba(220,38,38,.28);background:rgba(220,38,38,.04);}
#rotation-race-modal .rr-explain-h{font-family:var(--font-hd);font-size:calc(12px * var(--fs,1));color:var(--t);margin-bottom:5px;}
#rotation-race-modal .rr-explain-verdict{font-size:calc(12px * var(--fs,1));font-weight:700;color:var(--t2);margin-bottom:6px;line-height:1.45;}
#rotation-race-modal .rr-explain-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px;}
#rotation-race-modal .rr-explain-list li{font-size:calc(12px * var(--fs,1));color:var(--t2);line-height:1.5;padding-left:12px;position:relative;}
#rotation-race-modal .rr-explain-list li::before{content:"→";position:absolute;left:0;color:var(--t3);}
/* history fit 배지 */
#rotation-race-modal .rr-hist-fit{display:inline-block;margin-left:6px;font-family:'DM Mono',monospace;font-size:calc(11px * var(--fs,1));font-weight:700;letter-spacing:.3px;padding:1px 6px;border-radius:8px;background:var(--bg3);color:var(--t3);}
#rotation-race-modal .rr-hist-fit.fit-3,#rotation-race-modal .rr-hist-fit.fit-2{background:rgba(21,128,61,.14);color:var(--green);}
#rotation-race-modal .rr-hist-fit.fit-0{background:rgba(220,38,38,.10);color:#DC2626;}
#rotation-race-modal .rr-hist-badge{display:inline-block;font-size:calc(10px * var(--fs,1));font-weight:800;padding:1px 5px;border-radius:4px;margin-left:5px;letter-spacing:.4px;vertical-align:1px;}
#rotation-race-modal .rr-hist-badge.live{background:rgba(21,128,61,.15);color:var(--green);}
#rotation-race-modal .rr-hist-badge.sim{background:var(--bg4);color:var(--t3);}

/* ── 학습 모드 토글 (개념 / 차트) ── */
.learn-mode-toggle{
  display:flex;gap:7px;margin-bottom:13px;
  background:var(--bg3);border:1.5px solid var(--bd);border-radius:16px;padding:4px;
}
.lmt-btn{
  flex:1;background:transparent;border:none;border-radius:12px;
  padding:9px 8px;font-size:calc(13px * var(--fs,1));font-weight:700;color:var(--t2);
  cursor:pointer;font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;
  transition:background .15s ease,color .15s ease,box-shadow .15s ease;
  display:flex;align-items:center;justify-content:center;gap:5px;
}
.lmt-btn.active{background:var(--bg2);color:var(--t);font-weight:800;box-shadow:0 2px 0 var(--bd2);}
.lmt-lock{font-size:calc(11px * var(--fs,1));opacity:.85;}
.lmt-ic{display:flex;line-height:0;opacity:.85;}
.lmt-btn.active .lmt-ic{opacity:1;color:var(--acc-text);}

/* ── 차트 필수 개념 시인성 — 골드는 행동·보상 전용이므로 정보 계열(파랑)으로 ── */
.ci.chart-req{
  border-color:var(--blue)!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--blue) 6%,var(--bg2)),var(--bg2) 40%);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--blue) 18%,transparent), var(--shadow-sm);
}
.ci.chart-req.open{box-shadow:0 0 0 2px rgba(226,124,31,.32), var(--shadow-md);}
.ci-chart-badge{
  display:inline-block;font-size:calc(11px * var(--fs,1));
  background:var(--acc);color:var(--on-acc);
  padding:1px 6px;border-radius:8px;margin-right:4px;
  font-weight:800;letter-spacing:.2px;vertical-align:1px;
  box-shadow:0 1px 0 var(--btn-shadow-acc);
}
.cb.chart-req-pill{
  background:rgba(37,99,235,.10);
  border-color:rgba(37,99,235,.35);color:var(--blue);
  font-weight:800;
}
.cb.chart-req-pill.active{
  background:var(--t);color:var(--bg);border-color:var(--t);
  box-shadow:0 2px 0 rgba(0,0,0,.3);
}

/* ── 차트 분석 퀴즈 ── */
#chart-analysis-root{}
.ca-locked{text-align:center;padding:24px 16px;background:var(--bg2);border:1.5px solid var(--bd);border-radius:16px;box-shadow:var(--shadow-sm);}
.ca-locked-ic{font-size:calc(48px * var(--fs,1));margin-bottom:8px;}
.ca-locked-title{font-family:var(--font-hd);font-size:calc(20px * var(--fs,1));font-weight:700;color:var(--t);margin-bottom:4px;}
.ca-locked-sub{font-size:calc(12px * var(--fs,1));color:var(--t2);font-weight:600;margin-bottom:16px;}
.ca-locked-hint{font-size:calc(11px * var(--fs,1));color:var(--t3);line-height:1.55;margin-top:12px;padding:10px 12px;background:var(--bg3);border-radius:12px;}
.ca-cond{display:flex;flex-direction:column;gap:8px;text-align:left;margin-bottom:4px;}
.ca-cond-row{display:flex;align-items:center;gap:11px;background:var(--bg);border:1.5px solid var(--bd);border-radius:12px;padding:11px 13px;}
.ca-cond-row.met{border-color:var(--green);background:rgba(21,128,61,.06);}
.ca-cond-ic{width:28px;height:28px;border-radius:50%;background:var(--bg3);color:var(--t2);font-size:calc(13px * var(--fs,1));font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1.5px solid var(--bd2);}
.ca-cond-row.met .ca-cond-ic{background:var(--green);color:#fff;border-color:var(--green);}
.ca-cond-body{flex:1;min-width:0;}
.ca-cond-title{font-size:calc(13px * var(--fs,1));font-weight:700;color:var(--t);margin-bottom:5px;}
.ca-cond-bar{height:6px;background:var(--bg3);border-radius:4px;overflow:hidden;margin-bottom:4px;}
.ca-cond-fill{height:100%;background:linear-gradient(90deg,var(--acc),var(--green));transition:width .4s ease;}
.ca-cond-meta{font-size:calc(10px * var(--fs,1));color:var(--t3);font-weight:600;}

.ca-header{background:var(--bg2);border:1.5px solid var(--bd);border-radius:16px;padding:13px 14px;margin-bottom:12px;box-shadow:var(--shadow-sm);}
.ca-header-title{font-family:var(--font-hd);font-size:calc(17px * var(--fs,1));font-weight:700;color:var(--t);}
.ca-header-sub{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:600;margin-top:3px;margin-bottom:8px;}
.ca-header-bar{height:5px;background:var(--bg3);border-radius:4px;overflow:hidden;}
.ca-header-fill{height:100%;background:linear-gradient(90deg,#f59e0b,#16A34A);transition:width .4s ease;}

.ca-alldone{text-align:center;padding:16px;background:linear-gradient(135deg,rgba(22,163,74,.10),rgba(245,158,11,.10));border:1.5px solid var(--green);border-radius:12px;margin-bottom:12px;}
.ca-alldone-ic{font-size:calc(30px * var(--fs,1));margin-bottom:4px;}
.ca-alldone-title{font-size:calc(14px * var(--fs,1));font-weight:800;color:var(--t);margin-bottom:3px;}
.ca-alldone-sub{font-size:calc(11px * var(--fs,1));color:var(--t2);line-height:1.5;}

.ca-case-list{display:flex;flex-direction:column;gap:10px;margin-bottom:12px;}
.ca-case-card{display:flex;align-items:stretch;gap:10px;background:var(--bg2);border:1.5px solid var(--bd);border-radius:12px;padding:11px 12px;text-align:left;cursor:pointer;width:100%;box-shadow:var(--shadow-sm);transition:transform .12s ease, border-color .12s ease;font-family:inherit;}
.ca-case-card:hover{transform:translateY(-1px);border-color:var(--acc);}
.ca-case-card.solved{border-color:var(--green);background:rgba(21,128,61,.04);}
.ca-card-num{width:26px;height:26px;border-radius:50%;background:var(--acc);color:var(--on-acc);font-weight:800;font-size:calc(13px * var(--fs,1));display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ca-case-card.solved .ca-card-num{background:var(--green);}
.ca-card-body{flex:1;min-width:0;}
.ca-card-top{display:flex;align-items:center;gap:6px;margin-bottom:3px;font-size:calc(13px * var(--fs,1));color:var(--t);font-weight:700;}
.ca-card-flag{font-size:calc(14px * var(--fs,1));}
.ca-card-date{margin-left:auto;font-size:calc(10px * var(--fs,1));color:var(--t3);font-weight:600;}
.ca-card-mid{font-size:calc(11px * var(--fs,1));color:var(--t2);margin-bottom:6px;}
.ca-card-bot{display:flex;}
.ca-card-pill{font-size:calc(10px * var(--fs,1));font-weight:800;padding:3px 8px;border-radius:8px;letter-spacing:.3px;}
.ca-card-pending{background:var(--bg3);color:var(--t2);}
.ca-card-perfect{background:rgba(22,163,74,.15);color:var(--green);}
.ca-card-partial{background:rgba(245,158,11,.15);color:#d97706;}
.ca-card-wrong{background:rgba(220,38,38,.12);color:#DC2626;}
.ca-card-arr{align-self:center;color:var(--t3);font-size:calc(18px * var(--fs,1));font-weight:700;}

.ca-disc{font-size:calc(10px * var(--fs,1));color:var(--t3);text-align:center;margin-top:10px;line-height:1.5;padding:0 8px;}

/* 라이브러리 섹션 */
.ca-lib-header{margin:18px 0 8px;padding:0 2px;}
.ca-lib-title{font-family:var(--font-hd);font-size:calc(15px * var(--fs,1));font-weight:700;color:var(--t);}
.ca-lib-sub{font-size:calc(10px * var(--fs,1));color:var(--t3);font-weight:600;margin-top:2px;}
.ca-lib-filters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;}
.ca-filter-group{display:flex;gap:3px;background:var(--bg2);border:1.5px solid var(--bd);border-radius:8px;padding:3px;}
.ca-filter{font-family:inherit;font-size:calc(11px * var(--fs,1));font-weight:700;padding:5px 10px;border-radius:8px;background:transparent;color:var(--t2);border:none;cursor:pointer;transition:all .12s ease;}
.ca-filter:hover{color:var(--t);}
.ca-filter.active{background:var(--acc);color:var(--on-acc);}
.ca-lib-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:8px;}
.ca-lib-card{background:var(--bg2);border:1.5px solid var(--bd);border-radius:12px;padding:9px 10px;text-align:left;cursor:pointer;font-family:inherit;transition:transform .12s ease,border-color .12s ease;box-shadow:var(--shadow-sm);}
.ca-lib-card:hover{transform:translateY(-1px);border-color:var(--acc);}
.ca-lib-card.solved{background:rgba(21,128,61,.04);border-color:rgba(22,163,74,.5);}
.ca-lib-top{display:flex;align-items:center;gap:5px;margin-bottom:4px;min-height:18px;}
.ca-lib-flag{font-size:calc(13px * var(--fs,1));}
.ca-lib-mark{font-size:calc(13px * var(--fs,1));font-weight:800;margin-left:2px;}
.ca-lib-mark.perfect{color:#f59e0b;}
.ca-lib-mark.partial{color:var(--green);}
.ca-lib-mark.wrong{color:#DC2626;}
.ca-lib-daily{margin-left:auto;font-size:calc(11px * var(--fs,1));font-weight:800;padding:2px 6px;background:var(--acc);color:var(--on-acc);border-radius:4px;letter-spacing:.3px;}
.ca-lib-reco{margin-left:auto;font-size:calc(11px * var(--fs,1));font-weight:800;padding:2px 6px;background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;border-radius:4px;letter-spacing:.3px;box-shadow:0 1px 4px rgba(124,58,237,.4);}
.ca-lib-card.recommended{border-color:#7c3aed;box-shadow:0 0 0 1.5px rgba(124,58,237,.18) inset, var(--shadow-sm);}

/* ── 📊 내 분석 실력 카드 (Phase 4) ── */
.ca-skill-card{background:linear-gradient(135deg,var(--bg2),#fafbff);border:1.5px solid var(--bd);border-radius:16px;padding:14px;margin-bottom:12px;box-shadow:var(--shadow-md);}
.ca-skill-card-empty{background:var(--bg2);text-align:center;padding:18px 14px;}
.ca-skill-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;flex-wrap:wrap;gap:8px;}
.ca-skill-title{font-family:var(--font-hd);font-size:calc(16px * var(--fs,1));font-weight:700;color:var(--t);}
.ca-skill-sub{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:600;}
.ca-skill-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px;}
.ca-skill-stat{background:var(--bg);border:1px solid var(--bd);border-radius:8px;padding:8px 6px;text-align:center;}
.ca-skill-stat-l{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:700;margin-bottom:3px;letter-spacing:.2px;text-transform:uppercase;}
.ca-skill-stat-v{font-family:var(--font-hd);font-size:calc(20px * var(--fs,1));font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-0.5px;}
.ca-skill-stat-v.good{color:var(--green);}
.ca-skill-stat-v.mid{color:#f59e0b;}
.ca-skill-stat-v.bad{color:var(--red);}
.ca-skill-stat-sub{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:600;margin-top:2px;font-variant-numeric:tabular-nums;}
.ca-skill-section{margin-top:7px;}
.ca-skill-section-l{font-size:calc(11px * var(--fs,1));font-weight:800;color:var(--t2);margin-bottom:4px;letter-spacing:.2px;}
.ca-skill-chips{display:flex;flex-wrap:wrap;gap:4px;}
.ca-skill-chip{display:inline-block;font-size:calc(10px * var(--fs,1));font-weight:700;padding:3px 7px;border-radius:8px;border:1px solid;letter-spacing:.1px;cursor:help;}
.ca-skill-chip.weak{color:var(--red);border-color:rgba(220,38,38,.4);background:rgba(220,38,38,.06);}
.ca-skill-chip.strong{color:var(--green);border-color:rgba(21,128,61,.4);background:rgba(21,128,61,.05);}

/* ── 🎯 추천 케이스 카드 ── */
.ca-reco-card{background:linear-gradient(135deg,rgba(124,58,237,.08),rgba(168,85,247,.04));border:1.5px solid rgba(124,58,237,.4);border-radius:16px;padding:13px;margin-bottom:12px;box-shadow:0 2px 10px rgba(124,58,237,.12);}
.ca-reco-head{margin-bottom:9px;}
.ca-reco-title{font-family:var(--font-hd);font-size:calc(15px * var(--fs,1));font-weight:700;color:#7c3aed;}
.ca-reco-sub{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:600;margin-top:2px;}
.ca-reco-list{display:flex;flex-direction:column;gap:6px;}
.ca-reco-item{background:var(--bg2);border:1.5px solid rgba(124,58,237,.25);border-radius:12px;padding:9px 11px;cursor:pointer;font-family:inherit;text-align:left;transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease;}
.ca-reco-item:hover{transform:translateY(-1px);border-color:#7c3aed;box-shadow:0 4px 12px rgba(124,58,237,.2);}
.ca-reco-it-top{display:flex;align-items:center;gap:6px;margin-bottom:4px;}
.ca-reco-flag{font-size:calc(14px * var(--fs,1));}
.ca-reco-name{flex:1;font-size:calc(12px * var(--fs,1));font-weight:800;color:var(--t);}
.ca-reco-arr{color:#7c3aed;font-weight:800;font-size:calc(14px * var(--fs,1));}
.ca-reco-it-tags{display:flex;flex-wrap:wrap;gap:4px;}
.ca-reco-tag{font-size:calc(11px * var(--fs,1));font-weight:700;padding:2px 6px;border-radius:4px;background:rgba(220,38,38,.08);color:var(--red);border:1px solid rgba(220,38,38,.3);}

/* ── 👥 친구 비교 (Phase 5 — 가벼운 버전) ── */
.ca-skill-compare-btn{background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;border:none;border-radius:8px;padding:6px 11px;font-size:calc(11px * var(--fs,1));font-weight:800;cursor:pointer;font-family:inherit;box-shadow:0 2px 8px rgba(124,58,237,.3);transition:transform .12s ease;letter-spacing:.2px;white-space:nowrap;}
.ca-skill-compare-btn:active{transform:translateY(1px);}
#ca-cmp-modal{position:fixed;inset:0;z-index:10090;display:none;}
#ca-cmp-modal.open{display:block;}
.ca-cmp-backdrop{position:absolute;inset:0;background:rgba(8,12,24,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.ca-cmp-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(100% - 28px);max-width:400px;max-height:88vh;overflow-y:auto;background:var(--bg2);border:2px solid var(--bd2);border-radius:16px;padding:18px 16px;box-shadow:0 24px 56px rgba(8,12,24,.4);}
.ca-cmp-close{position:absolute;top:8px;right:12px;background:transparent;border:none;color:var(--t3);font-size:calc(22px * var(--fs,1));cursor:pointer;line-height:1;font-weight:500;padding:0 4px;}
.ca-cmp-head{margin-bottom:12px;text-align:center;}
.ca-cmp-title{font-family:var(--font-hd);font-size:calc(17px * var(--fs,1));font-weight:700;color:var(--t);}
.ca-cmp-sub{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:600;margin-top:2px;}
.ca-cmp-loading{text-align:center;padding:30px 12px;font-size:calc(12px * var(--fs,1));color:var(--t3);font-weight:600;}
.ca-cmp-empty{text-align:center;padding:24px 14px;}
.ca-cmp-empty-ic{font-size:calc(38px * var(--fs,1));margin-bottom:6px;}
.ca-cmp-empty-title{font-size:calc(14px * var(--fs,1));font-weight:800;color:var(--t);margin-bottom:3px;}
.ca-cmp-empty-sub{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:600;line-height:1.5;}
.ca-cmp-mine{display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,#FEF3E2,#FDD9A6);border:1.5px solid var(--acc);border-radius:12px;padding:10px 12px;margin-bottom:10px;box-shadow:0 2px 0 var(--btn-shadow-acc);}
.ca-cmp-mine-l{font-size:calc(11px * var(--fs,1));font-weight:800;color:var(--acc-text);text-transform:uppercase;letter-spacing:.4px;}
.ca-cmp-mine-v{font-family:var(--font-hd);font-size:calc(20px * var(--fs,1));font-weight:700;color:var(--acc-text);}
.ca-cmp-mine-acc{margin-left:auto;font-size:calc(13px * var(--fs,1));font-weight:800;color:var(--acc-text);}
.ca-cmp-list{display:flex;flex-direction:column;gap:4px;margin-bottom:8px;}
.ca-cmp-row{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--bd);border-radius:8px;padding:8px 10px;}
.ca-cmp-row.me{background:linear-gradient(135deg,rgba(255,244,214,.45),rgba(255,228,168,.35));border-color:var(--acc);box-shadow:0 1px 4px rgba(226,124,31,.18);}
.ca-cmp-rank{width:24px;flex-shrink:0;font-size:calc(14px * var(--fs,1));text-align:center;}
.ca-cmp-num{font-family:'DM Mono',monospace;font-size:calc(11px * var(--fs,1));font-weight:800;color:var(--t3);}
.ca-cmp-name{flex:1;font-size:calc(12px * var(--fs,1));font-weight:800;color:var(--t);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ca-cmp-me-tag{display:inline-block;font-size:calc(11px * var(--fs,1));font-weight:800;background:var(--acc);color:var(--on-acc);padding:1px 5px;border-radius:4px;margin-left:3px;}
.ca-cmp-vals{display:flex;gap:6px;flex-shrink:0;}
.ca-cmp-v{font-family:var(--font-hd);font-size:calc(13px * var(--fs,1));font-weight:700;font-variant-numeric:tabular-nums;text-align:center;min-width:34px;letter-spacing:-.3px;}
.ca-cmp-v.good{color:var(--green);}
.ca-cmp-v.mid{color:#f59e0b;}
.ca-cmp-v.bad{color:var(--red);}
.ca-cmp-v.sub{font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;font-size:calc(11px * var(--fs,1));color:var(--t2);font-weight:700;}
.ca-cmp-v.sub span{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:600;margin-left:1px;}
.ca-cmp-foot{font-size:calc(10px * var(--fs,1));color:var(--t3);font-weight:600;line-height:1.5;background:var(--bg3);padding:7px 9px;border-radius:8px;margin-top:6px;}

/* ── 🎓 성인 모드 심화 친구 비교 ── */
.ca-cmp-adv{margin-top:10px;background:linear-gradient(135deg,rgba(124,58,237,.06),rgba(168,85,247,.03));border:1.5px solid rgba(124,58,237,.35);border-radius:12px;padding:11px 12px;}
.ca-cmp-adv-head{margin-bottom:9px;}
.ca-cmp-adv-title{font-family:var(--font-hd);font-size:calc(14px * var(--fs,1));font-weight:700;color:#7c3aed;}
.ca-cmp-adv-sub{font-size:calc(10px * var(--fs,1));color:var(--t3);font-weight:600;margin-top:1px;}
.ca-cmp-adv-section{margin-bottom:10px;}
.ca-cmp-adv-section:last-child{margin-bottom:0;}
.ca-cmp-adv-label{font-size:calc(11px * var(--fs,1));font-weight:800;color:var(--t2);margin-bottom:5px;letter-spacing:.2px;}
.ca-cmp-chart-wrap{background:var(--bg);border:1px solid var(--bd);border-radius:8px;padding:6px;}
.ca-cmp-sig-list{display:flex;flex-direction:column;gap:4px;}
.ca-cmp-sig-row{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--bd);border-radius:8px;padding:6px 9px;}
.ca-cmp-sig-name{flex:1;font-size:calc(11px * var(--fs,1));font-weight:700;color:var(--t);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ca-cmp-sig-vals{display:flex;gap:5px;flex-shrink:0;}
.ca-cmp-sig-v{font-size:calc(10px * var(--fs,1));font-weight:800;padding:2px 7px;border-radius:4px;font-variant-numeric:tabular-nums;letter-spacing:.1px;}
.ca-cmp-sig-v.me{background:rgba(226,124,31,.12);color:var(--acc-text);}
.ca-cmp-sig-v.fr{background:var(--bg3);color:var(--t2);}
.ca-cmp-sig-v.win{background:rgba(21,128,61,.15);color:var(--green);}
.ca-cmp-sig-v.lose{background:rgba(220,38,38,.1);color:var(--red);}
.ca-cmp-challenge-box{background:var(--bg);border:1.5px dashed rgba(124,58,237,.5);border-radius:12px;padding:9px 11px;}
.ca-cmp-ch-name{font-size:calc(12px * var(--fs,1));font-weight:800;color:var(--t);margin-bottom:3px;}
.ca-cmp-ch-hint{font-size:calc(10px * var(--fs,1));color:var(--t3);font-weight:600;margin-bottom:7px;line-height:1.5;}
.ca-cmp-ch-btn{width:100%;background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;border:none;border-radius:8px;padding:8px;font-size:calc(12px * var(--fs,1));font-weight:800;cursor:pointer;font-family:inherit;letter-spacing:.2px;box-shadow:0 3px 8px rgba(124,58,237,.3);}
.ca-cmp-ch-btn:active{transform:translateY(1px);}

/* ════════════════════════════════════════════════
   📚 연령별 학습 모드 — 유아 / 청소년 / 성인
   ──────────────────────────────────────────────── */

/* 모드 선택 모달 */
#age-mode-modal{position:fixed;inset:0;z-index:10095;display:none;}
#age-mode-modal.open{display:block;}
#age-mode-modal .am-backdrop{position:absolute;inset:0;background:rgba(8,12,24,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
#age-mode-modal .am-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(100% - 28px);max-width:380px;background:var(--bg2);border:2.5px solid var(--bd2);border-radius:24px;padding:24px 20px 18px;box-shadow:0 24px 56px rgba(8,12,24,.4);animation:arcade-pop-center .4s var(--ease-arcade-step);}
#age-mode-modal .am-close{position:absolute;top:10px;right:14px;background:transparent;border:none;color:var(--t3);font-size:calc(22px * var(--fs,1));cursor:pointer;line-height:1;font-weight:500;}
.am-head{text-align:center;margin-bottom:16px;}
.am-title{font-family:var(--font-hd);font-size:calc(19px * var(--fs,1));font-weight:700;color:var(--t);margin-bottom:3px;}
.am-sub{font-size:calc(12px * var(--fs,1));color:var(--t3);font-weight:600;}
.am-options{display:flex;flex-direction:column;gap:9px;margin-bottom:12px;}
.am-opt{display:flex;align-items:center;gap:13px;background:var(--bg);border:2px solid var(--bd);border-radius:16px;padding:13px 14px;cursor:pointer;font-family:inherit;text-align:left;transition:all .15s ease;width:100%;}
.am-opt:hover{border-color:var(--c);transform:translateY(-1px);}
.am-opt.selected{border-color:var(--c);background:color-mix(in srgb, var(--c) 8%, var(--bg));box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent);}
.am-opt-emoji{font-size:calc(30px * var(--fs,1));flex-shrink:0;}
.am-opt-body{flex:1;min-width:0;}
.am-opt-title{font-size:calc(15px * var(--fs,1));font-weight:800;color:var(--t);margin-bottom:2px;}
.am-opt-sub{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:600;}
.am-opt-check{color:var(--c);font-size:calc(22px * var(--fs,1));font-weight:800;flex-shrink:0;}
.am-foot{text-align:center;font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:600;line-height:1.5;}

/* ── 모드별 노출 제어 ──
   .hide-on-kids → 유아 모드일 때 숨김 (어려운 기능)
   .hide-on-teen → 청소년 모드일 때 숨김
   .hide-on-adult → 성인 모드일 때 숨김 (거의 안 씀)
   .show-on-kids → 유아 모드에서만 보임
   .show-on-teen → 청소년 모드에서만 보임 */
body.mode-kids .hide-on-kids{display:none !important;}
body.mode-teen .hide-on-teen{display:none !important;}
body.mode-adult .hide-on-adult{display:none !important;}
.show-on-kids,.show-on-teen,.show-on-adult{display:none;}
body.mode-kids .show-on-kids{display:revert;}
body.mode-teen .show-on-teen{display:revert;}
body.mode-adult .show-on-adult{display:revert;}

/* ── 유아 모드 (큰 폰트·둥근·이모지 강조 + 분홍 톤) ── */
body.mode-kids{
  font-size:clamp(15px,4.2vw,17px);
  /* 부드러운 분홍 배경으로 시각적 구분 */
  background:linear-gradient(180deg, #FFF5F8 0%, #FFF9FB 50%, #FDFDFE 100%) !important;
}
body.mode-kids .topbar{background:linear-gradient(180deg, #FFF5F8, #FFFFFF) !important;}
body.mode-kids .bnav{background:linear-gradient(180deg, #FFFFFF, #FFF5F8) !important;border-top-color:#FBCFE8 !important;}
body.mode-kids .logo{font-size:clamp(18px,4.5vw,22px);color:#EC4899 !important;}
body.mode-kids .ni-ic{font-size:calc(21px * var(--fs,1));}
body.mode-kids .ni-lb{font-size:calc(11px * var(--fs,1));font-weight:700;}
/* 모드 표시 배너 — 항상 보이는 상단 안내 */
body.mode-kids::before{
  content:'🧸 쉬운 말 모드 (유아)';
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:linear-gradient(90deg, #EC4899, #F472B6);color:#fff;
  text-align:center;padding:3px 8px;font-size:calc(10px * var(--fs,1));font-weight:800;
  letter-spacing:.5px;box-shadow:0 2px 6px rgba(236,72,153,.3);
  pointer-events:none;
}
body.mode-kids .topbar{padding-top:calc(var(--st) + 18px) !important;}
body.mode-kids .sh .st{font-size:clamp(20px,5.5vw,24px);}
body.mode-kids .sh .ss{font-size:calc(12px * var(--fs,1));}
body.mode-kids .ni{padding:8px 12px;border-radius:16px;}
body.mode-kids .ni.active{transform:scale(1.04);}
body.mode-kids button:not(.ni):not(.bnav button){border-radius:16px !important;}
body.mode-kids .ca-locked-title,
body.mode-kids .cl-locked-title{font-size:calc(18px * var(--fs,1));}
body.mode-kids #unlock-modal .unlock-title{font-size:calc(23px * var(--fs,1));}

/* ── 청소년 모드 (살짝 키운 가독성) ── */
body.mode-teen{font-size:clamp(14px,3.9vw,16px);}
body.mode-teen .sh .st{font-size:clamp(18px,5vw,22px);}
.ca-lib-name{font-size:calc(12px * var(--fs,1));font-weight:800;color:var(--t);line-height:1.3;margin-bottom:2px;}
.ca-lib-date{font-family:'DM Mono',monospace;font-size:calc(10px * var(--fs,1));color:var(--t3);font-weight:600;margin-bottom:3px;}
.ca-lib-hint{font-size:calc(10px * var(--fs,1));color:var(--t2);line-height:1.4;}
.ca-lib-empty{text-align:center;padding:24px 12px;color:var(--t3);font-size:calc(12px * var(--fs,1));background:var(--bg2);border:1.5px dashed var(--bd);border-radius:12px;}

/* 모달 */
#ca-modal{position:fixed;inset:0;z-index:9999;display:none;}
#ca-modal.open{display:block;}
.ca-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);}
.ca-modal-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(420px,92vw);max-height:92vh;overflow-y:auto;background:var(--bg);border:1.5px solid var(--bd);border-radius:16px;box-shadow:0 8px 30px rgba(0,0,0,.4);padding:16px;}
.ca-modal-close{position:absolute;top:8px;right:10px;width:30px;height:30px;border-radius:50%;background:var(--bg2);border:1.5px solid var(--bd);color:var(--t);font-size:calc(18px * var(--fs,1));font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;}
.ca-modal-close:hover{background:var(--bg3);}

.ca-step-head{margin-bottom:10px;}
.ca-step-pill{display:inline-block;font-size:calc(10px * var(--fs,1));font-weight:800;padding:3px 9px;background:var(--acc);color:var(--on-acc);border-radius:8px;letter-spacing:.4px;margin-bottom:6px;}
.ca-step-pill-result{background:linear-gradient(90deg,#16A34A,#f59e0b);}
.ca-step-title{font-family:var(--font-hd);font-size:calc(17px * var(--fs,1));font-weight:700;color:var(--t);line-height:1.3;}
.ca-step-ticker{font-family:'DM Mono',monospace;font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:600;margin-left:4px;}
.ca-step-sub{font-size:calc(11px * var(--fs,1));color:var(--t2);margin-top:3px;line-height:1.55;}

/* 보조 지표 토글 바 — 차트 위 */
.ca-overlay-bar{background:var(--bg2);border:1.5px solid var(--bd);border-radius:12px;padding:9px 11px;margin:10px 0 -2px;display:flex;flex-direction:column;gap:7px;box-shadow:var(--shadow-sm);}
.ca-overlay-label{font-size:calc(11px * var(--fs,1));font-weight:800;color:var(--t2);letter-spacing:.3px;}
.ca-overlay-chips{display:flex;flex-wrap:wrap;gap:6px;}
.ca-ov-chip{display:inline-flex;align-items:center;gap:5px;background:var(--bg);border:1.5px solid var(--bd2);color:var(--t3);font-size:calc(11px * var(--fs,1));font-weight:800;padding:5px 9px;border-radius:8px;cursor:pointer;font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;transition:all .12s ease;letter-spacing:.2px;}
.ca-ov-chip:hover{border-color:var(--acc);color:var(--t);}
.ca-ov-chip:active{transform:scale(0.96);}
.ca-ov-chip.on{font-weight:800;box-shadow:inset 0 0 0 1px currentColor;}
.ca-ov-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;display:inline-block;box-shadow:0 0 0 1.5px rgba(255,255,255,.6);}
.ca-ov-auto{display:inline-block;margin-left:4px;font-size:calc(10px * var(--fs,1));font-weight:800;background:#7c3aed;color:#fff;padding:1px 4px;border-radius:4px;letter-spacing:.4px;}

.ca-chart-wrap{background:#0b1220;border:1.5px solid var(--bd);border-radius:12px;padding:6px;margin:10px 0;overflow:hidden;}
.ca-chart{display:block;width:100%;background:transparent;}
.ca-chart-future{position:relative;}
.ca-chart-note{font-size:calc(10px * var(--fs,1));color:#d97706;text-align:center;padding:4px 0 2px;font-weight:700;}

.ca-q{font-size:calc(13px * var(--fs,1));font-weight:700;color:var(--t);margin:10px 0 8px;text-align:center;}
.ca-dir-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-bottom:10px;}
.ca-dir-grid > .ca-dir-btn:nth-child(3){grid-column:1/3;}
.ca-dir-btn{background:var(--bg2);border:1.5px solid var(--bd);border-radius:12px;padding:10px 8px;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;transition:all .12s ease;font-family:inherit;}
.ca-dir-btn:hover{border-color:var(--c,var(--acc));transform:translateY(-1px);}
.ca-dir-btn.picked{border-color:var(--c);background:color-mix(in srgb, var(--c) 12%, var(--bg2));box-shadow:0 0 0 2px color-mix(in srgb, var(--c) 30%, transparent);}
.ca-dir-emoji{font-size:calc(20px * var(--fs,1));}
.ca-dir-label{font-size:calc(12px * var(--fs,1));font-weight:800;color:var(--t);}

.ca-ind-grid{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;}
.ca-ind-btn{background:var(--bg2);border:1.5px solid var(--bd);border-radius:12px;padding:9px 11px;display:flex;align-items:center;gap:9px;cursor:pointer;text-align:left;font-family:inherit;transition:border-color .12s ease;}
.ca-ind-btn:hover{border-color:var(--acc);}
.ca-ind-btn.picked{border-color:var(--acc);background:color-mix(in srgb, var(--acc) 8%, var(--bg2));}
.ca-ind-check{width:18px;height:18px;border-radius:4px;border:1.5px solid var(--bd2);display:flex;align-items:center;justify-content:center;font-size:calc(11px * var(--fs,1));font-weight:800;color:#fff;flex-shrink:0;}
.ca-ind-btn.picked .ca-ind-check{background:var(--acc);border-color:var(--acc);}
.ca-ind-label{font-size:calc(12px * var(--fs,1));color:var(--t);font-weight:600;line-height:1.4;}

.ca-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px;}
.ca-btn{font-family:inherit;font-size:calc(12px * var(--fs,1));font-weight:800;padding:9px 14px;border-radius:12px;cursor:pointer;border:1.5px solid var(--bd);background:var(--bg2);color:var(--t);transition:all .12s ease;}
.ca-btn:hover:not(:disabled){transform:translateY(-1px);}
.ca-btn:disabled{opacity:.45;cursor:not-allowed;}
.ca-btn-primary{background:var(--acc);color:var(--on-acc);border-color:var(--acc);}
.ca-btn-ghost{background:transparent;}

.ca-result-summary{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:12px;margin-bottom:10px;}
.ca-result-summary.win{background:rgba(22,163,74,.10);border:1.5px solid var(--green);}
.ca-result-summary.adj{background:rgba(245,158,11,.10);border:1.5px solid #f59e0b;}
.ca-result-summary.lose{background:rgba(220,38,38,.08);border:1.5px solid #DC2626;}
.ca-result-emoji{font-size:calc(32px * var(--fs,1));flex-shrink:0;}
.ca-result-text{flex:1;min-width:0;font-size:calc(11px * var(--fs,1));}
.ca-result-line{display:flex;align-items:center;gap:8px;margin-bottom:3px;font-weight:700;}
.ca-result-label{color:var(--t3);font-size:calc(10px * var(--fs,1));font-weight:800;letter-spacing:.4px;min-width:30px;}
.ca-result-val{font-size:calc(13px * var(--fs,1));font-weight:800;}
.ca-result-ret{margin-left:auto;font-family:'DM Mono',monospace;font-size:calc(11px * var(--fs,1));color:var(--t2);}
.ca-result-judge{margin-left:auto;font-size:calc(10px * var(--fs,1));font-weight:800;color:var(--t3);}
.ca-result-xp{margin-top:5px;font-size:calc(12px * var(--fs,1));font-weight:800;color:var(--green);}
.ca-result-xp-zero{color:var(--t3);}
.ca-result-xp-bonus{display:inline-block;margin-left:6px;font-size:calc(10px * var(--fs,1));font-weight:800;background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;padding:2px 7px;border-radius:8px;letter-spacing:.3px;box-shadow:0 2px 6px rgba(124,58,237,.45);animation:bonusPulse 1.8s ease-in-out infinite;}
@keyframes bonusPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.06);box-shadow:0 4px 10px rgba(124,58,237,.6);}}

/* ── 🔍 차트 자동 분석 섹션 (Phase 3) ── */
.ca-auto-balance{background:var(--bg);border:1.5px solid var(--bd);border-radius:12px;padding:11px 13px;margin-bottom:10px;}
.ca-auto-bal-row{display:flex;justify-content:space-between;align-items:baseline;font-size:calc(11px * var(--fs,1));font-weight:700;margin-bottom:6px;}
.ca-auto-bal-side{color:var(--t2);font-variant-numeric:tabular-nums;}
.ca-auto-bal-side.bull{color:var(--green);}
.ca-auto-bal-side.bear{color:var(--red);}
.ca-auto-bal-side b{font-size:calc(13px * var(--fs,1));font-weight:800;}
.ca-auto-bal-bar{height:8px;background:var(--bg3);border-radius:4px;overflow:hidden;margin-bottom:7px;position:relative;border:1px solid var(--bd);}
.ca-auto-bal-fill{height:100%;border-radius:4px;transition:width .4s ease;}
.ca-auto-bal-fill.pos{background:linear-gradient(90deg,#34D399,var(--green));}
.ca-auto-bal-fill.neg{background:linear-gradient(90deg,var(--red),#FCA5A5);}
.ca-auto-bal-lean{font-size:calc(11px * var(--fs,1));color:var(--t2);font-weight:600;text-align:center;}
.ca-auto-row-label{font-size:calc(11px * var(--fs,1));font-weight:800;color:var(--t2);margin:8px 0 5px;letter-spacing:.2px;}
.ca-auto-chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px;}
.ca-auto-chip{display:inline-flex;align-items:center;gap:4px;font-size:calc(11px * var(--fs,1));font-weight:700;padding:4px 8px;border-radius:8px;border:1.2px solid;letter-spacing:.1px;cursor:help;}
.ca-auto-chip.auto-bull{color:var(--green);border-color:rgba(21,128,61,.45);background:rgba(21,128,61,.07);}
.ca-auto-chip.auto-bear{color:var(--red);border-color:rgba(220,38,38,.45);background:rgba(220,38,38,.07);}
.ca-auto-chip.auto-neut{color:var(--t2);border-color:var(--bd2);background:var(--bg3);}
.ca-auto-chip.matched{box-shadow:0 0 0 1.5px var(--green) inset;}
.ca-auto-chip.missed-auto{opacity:.85;border-style:dashed;}
.ca-auto-ico{font-size:calc(11px * var(--fs,1));}
.ca-auto-hint{font-size:calc(10px * var(--fs,1));color:var(--t3);font-weight:600;margin-top:6px;line-height:1.5;background:var(--bg3);padding:6px 8px;border-radius:8px;}

.ca-section{background:var(--bg2);border:1.5px solid var(--bd);border-radius:12px;padding:10px 12px;margin-bottom:9px;}
.ca-section-label{font-size:calc(10px * var(--fs,1));font-weight:800;color:var(--t3);letter-spacing:.5px;margin-bottom:5px;}
.ca-section-body{font-size:calc(12px * var(--fs,1));color:var(--t);line-height:1.55;}
.ca-ind-result{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px;}
.ca-ind-chip{font-size:calc(10px * var(--fs,1));font-weight:700;padding:4px 8px;border-radius:8px;border:1px solid var(--bd);}
.ca-ind-chip.got{background:rgba(22,163,74,.12);color:var(--green);border-color:var(--green);}
.ca-ind-chip.missed{background:var(--bg3);color:var(--t3);}
.ca-ind-chip.wrong{background:rgba(220,38,38,.10);color:#DC2626;border-color:#DC2626;}
.ca-ind-note{font-weight:500;opacity:.7;}
.ca-ind-meta{font-size:calc(10px * var(--fs,1));color:var(--t3);font-weight:600;}

.ca-section-stats{display:flex;gap:8px;padding:8px;}
.ca-stat{flex:1;background:var(--bg);border-radius:8px;padding:7px 8px;text-align:center;}
.ca-stat-l{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:700;letter-spacing:.3px;margin-bottom:2px;}
.ca-stat-v{font-family:'DM Mono',monospace;font-size:calc(13px * var(--fs,1));font-weight:800;}
.ca-pos{color:var(--green);}
.ca-neg{color:#DC2626;}

/* ── 차트 패턴 학습 ── */
#chart-learn-root{}
.cl-header{
  background:var(--bg2);border:1.5px solid var(--bd);border-radius:16px;
  padding:13px 14px;margin-bottom:12px;box-shadow:var(--shadow-sm);
}
.cl-header-body{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:8px;}
.cl-header-title{font-family:var(--font-hd);font-size:calc(18px * var(--fs,1));font-weight:700;letter-spacing:-.2px;}
.cl-header-sub{font-size:calc(12px * var(--fs,1));color:var(--t2);font-weight:600;text-align:right;}
.cl-header-bar{height:6px;background:var(--bg3);border-radius:4px;overflow:hidden;border:1px solid var(--bd);}
.cl-header-fill{height:100%;background:linear-gradient(90deg,var(--acc2),var(--acc));border-radius:4px;transition:width .35s ease;}
.cl-cat-section{margin-bottom:16px;}
.cl-cat-title{display:flex;align-items:center;gap:6px;font-size:calc(13px * var(--fs,1));font-weight:800;color:var(--t);margin-bottom:8px;}
.cl-cat-ic{font-size:calc(16px * var(--fs,1));}
.cl-cat-count{margin-left:auto;font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:700;}
.cl-pattern-grid{display:grid;grid-template-columns:1fr;gap:8px;}
.cl-pattern{
  position:relative;display:flex;align-items:center;gap:12px;
  background:var(--bg2);border:1.5px solid var(--bd);border-radius:12px;
  padding:11px 12px;cursor:pointer;box-shadow:0 2px 0 var(--bd2);
  transition:transform .12s ease,box-shadow .12s ease,border-color .15s ease;
}
.cl-pattern:active{transform:translateY(2px);box-shadow:0 0 0 var(--bd2);}
.cl-pattern.seen{border-color:rgba(21,128,61,.4);background:rgba(21,128,61,.04);}
.cl-pattern-svg{width:148px;flex-shrink:0;}
.cl-pattern-svg .cp-svg{width:100%;height:auto;border:1px solid var(--bd);border-radius:8px;background:linear-gradient(180deg,var(--bg),var(--bg2));box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);}
/* 차트 패턴 SVG의 의미색(상승·하락·패턴)을 테마 토큰으로 승격.
   SVG presentation attribute(fill="..."/stroke="...")는 CSS보다 우선순위가 낮아
   속성 선택자로 덮어쓸 수 있다 → chartPatterns.js 수정 없이 다크 대응.
   라이트에선 토큰값이 기존 색과 같아 변화가 없다. */
.cp-svg [fill="#15803D"]{fill:var(--green);}
.cp-svg [stroke="#15803D"]{stroke:var(--green);}
.cp-svg [fill="#DC2626"]{fill:var(--red);}
.cp-svg [stroke="#DC2626"]{stroke:var(--red);}
.cp-svg [fill="#E27C1F"]{fill:var(--acc);}
.cp-svg [stroke="#E27C1F"]{stroke:var(--acc);}

.cl-pattern-info{flex:1;min-width:0;}
.cl-pattern-name{font-size:calc(15px * var(--fs,1));font-weight:800;color:var(--t);line-height:1.35;margin-bottom:5px;}
.cl-pattern-sig{display:inline-block;font-size:calc(12px * var(--fs,1));font-weight:700;padding:3px 8px;border:1px solid;border-radius:8px;letter-spacing:.2px;}
.cl-pattern-done{position:absolute;top:8px;right:10px;width:20px;height:20px;border-radius:50%;background:var(--green);color:#fff;font-size:calc(12px * var(--fs,1));font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(15,23,42,.15);}

/* 잠금 화면 */
.cl-locked{
  background:linear-gradient(180deg,var(--bg2),var(--bg3));
  border:2px dashed var(--bd2);border-radius:16px;padding:22px 18px;text-align:center;
}
.cl-locked-ic{font-size:calc(48px * var(--fs,1));margin-bottom:8px;}
.cl-locked-title{font-family:var(--font-hd);font-size:calc(20px * var(--fs,1));font-weight:700;color:var(--t);margin-bottom:4px;}
.cl-locked-sub{font-size:calc(12px * var(--fs,1));color:var(--t2);font-weight:600;margin-bottom:16px;}
.cl-cond{display:flex;flex-direction:column;gap:8px;text-align:left;margin-bottom:16px;}
.cl-cond-divider{text-align:center;font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:700;letter-spacing:1px;text-transform:uppercase;}
.cl-cond-row{display:flex;align-items:center;gap:11px;background:var(--bg2);border:1.5px solid var(--bd);border-radius:12px;padding:11px 13px;box-shadow:var(--shadow-sm);}
.cl-cond-row.met{border-color:var(--green);background:rgba(21,128,61,.06);}
.cl-cond-ic{width:28px;height:28px;border-radius:50%;background:var(--bg3);color:var(--t2);font-size:calc(13px * var(--fs,1));font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1.5px solid var(--bd2);}
.cl-cond-row.met .cl-cond-ic{background:var(--green);color:#fff;border-color:var(--green);}
.cl-cond-body{flex:1;min-width:0;}
.cl-cond-title{font-size:calc(13px * var(--fs,1));font-weight:800;color:var(--t);margin-bottom:5px;}
.cl-cond-bar{height:5px;background:var(--bg3);border-radius:4px;overflow:hidden;border:1px solid var(--bd);margin-bottom:4px;}
.cl-cond-fill{height:100%;background:linear-gradient(90deg,var(--acc2),var(--acc));border-radius:4px;transition:width .35s ease;}
.cl-cond-row.met .cl-cond-fill{background:linear-gradient(90deg,#34D399,var(--green));}
.cl-cond-meta{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:700;font-variant-numeric:tabular-nums;}
.cl-remaining{text-align:left;}
.cl-remaining-label{font-size:calc(12px * var(--fs,1));color:var(--acc-text);font-weight:800;text-transform:uppercase;letter-spacing:.5px;margin-bottom:7px;}
.cl-remaining-list{display:flex;flex-direction:column;gap:6px;}
.cl-rem-item{display:flex;align-items:center;gap:8px;background:var(--bg2);border:1.5px solid var(--bd);border-radius:12px;padding:9px 11px;cursor:pointer;font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;box-shadow:0 2px 0 var(--bd2);transition:transform .12s ease,box-shadow .12s ease,border-color .15s ease;}
.cl-rem-item:hover{border-color:var(--acc);}
.cl-rem-item:active{transform:translateY(2px);box-shadow:0 0 0 var(--bd2);}
.cl-rem-pill{font-size:calc(11px * var(--fs,1));font-weight:800;background:var(--acc);color:var(--on-acc);padding:2px 6px;border-radius:8px;letter-spacing:.2px;flex-shrink:0;}
.cl-rem-name{flex:1;text-align:left;font-size:calc(13px * var(--fs,1));font-weight:700;color:var(--t);}
.cl-rem-arr{color:var(--acc-text);font-weight:800;font-size:calc(14px * var(--fs,1));}
.cl-remaining-more{margin-top:6px;font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:600;text-align:center;}

/* 패턴 상세 모달 */
#cl-detail-modal{position:fixed;inset:0;z-index:10046;display:none;pointer-events:none;}
#cl-detail-modal.open{display:block;pointer-events:auto;}
#cl-detail-modal .cl-detail-backdrop{position:absolute;inset:0;background:rgba(8,12,24,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:evtBackdrop .3s ease;}
#cl-detail-modal .cl-detail-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(100% - 28px);max-width:440px;max-height:90vh;overflow-y:auto;background:var(--bg2);border:2.5px solid var(--bd2);border-radius:24px;padding:20px 18px;box-shadow:0 24px 56px rgba(8,12,24,.4),0 4px 0 var(--btn-shadow-acc);animation:arcade-pop-center .38s var(--ease-arcade-step);-webkit-overflow-scrolling:touch;}
#cl-detail-modal .cl-detail-close{position:absolute;top:10px;right:12px;background:transparent;border:none;color:var(--t3);font-size:calc(24px * var(--fs,1));cursor:pointer;padding:0 4px;font-weight:500;line-height:1;}
#cl-detail-modal .cl-detail-head{margin-bottom:14px;}
#cl-detail-modal .cl-detail-cat{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px;}
#cl-detail-modal .cl-detail-name{font-family:var(--font-hd);font-size:calc(22px * var(--fs,1));font-weight:700;letter-spacing:-.3px;line-height:1.2;margin-bottom:6px;}
#cl-detail-modal .cl-detail-sig{display:inline-block;font-size:calc(11px * var(--fs,1));font-weight:800;padding:3px 9px;border:1.5px solid;border-radius:8px;letter-spacing:.3px;}
#cl-detail-modal .cl-detail-chart{background:linear-gradient(180deg,var(--bg),var(--bg2));border:1.5px solid var(--bd);border-radius:12px;padding:14px;margin-bottom:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04);}
#cl-detail-modal .cl-detail-chart .cp-svg{width:100%;height:auto;min-height:175px;}
/* 차트 범례 — 색이 무엇을 뜻하는지 차트 바로 아래에서 밝힌다.
   색만으로 정보를 전달하지 않도록 텍스트 레이블을 항상 동반. */
.cl-legend{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:center;margin-top:12px;padding-top:11px;border-top:1px solid var(--bd);}
.cl-lg-item{display:inline-flex;align-items:center;gap:7px;font-size:calc(13px * var(--fs,1));font-weight:700;color:var(--t2);}
.cl-lg-item i{width:16px;height:6px;border-radius:999px;flex-shrink:0;}
#cl-detail-modal .cl-detail-section{margin-bottom:16px;}
#cl-detail-modal .cl-detail-label{font-size:calc(12px * var(--fs,1));color:var(--acc-text);font-weight:800;text-transform:uppercase;letter-spacing:.5px;margin-bottom:7px;}
#cl-detail-modal .cl-detail-text{font-size:calc(15px * var(--fs,1));color:var(--t);line-height:1.7;font-weight:500;}
#cl-detail-modal .cl-detail-example{font-size:calc(14px * var(--fs,1));color:var(--t2);line-height:1.65;font-weight:500;background:rgba(21,128,61,.07);border-left:3px solid var(--green);border-radius:0 9px 9px 0;padding:11px 13px;}
#cl-detail-modal .cl-detail-caution{font-size:calc(14px * var(--fs,1));color:var(--red);line-height:1.65;font-weight:600;background:rgba(220,38,38,.07);border-left:3px solid var(--red);border-radius:0 9px 9px 0;padding:11px 13px;}
#cl-detail-modal .cl-detail-related{display:flex;flex-wrap:wrap;gap:6px;}
#cl-detail-modal .cl-rel-chip{background:var(--bg3);border:1.5px solid var(--bd2);color:var(--t);border-radius:8px;padding:5px 10px;font-size:calc(12px * var(--fs,1));font-weight:700;cursor:pointer;font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;transition:border-color .15s ease;}
#cl-detail-modal .cl-rel-chip:hover{border-color:var(--acc);color:var(--acc-text);}
#cl-detail-modal .cl-detail-mark{width:100%;margin-top:6px;background:var(--acc);color:var(--on-acc);border:none;border-radius:12px;padding:13px;font-size:calc(14px * var(--fs,1));font-weight:800;letter-spacing:.2px;cursor:pointer;font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;box-shadow:0 4px 0 var(--btn-shadow-acc),0 6px 14px rgba(226,124,31,.22);transition:transform .12s ease,box-shadow .12s ease;}
#cl-detail-modal .cl-detail-mark:active{transform:translateY(3px);box-shadow:0 1px 0 var(--btn-shadow-acc);}

/* ── 친구 추천 카드 ── */
.fs-loading{padding:20px 0;text-align:center;color:var(--t3);font-size:calc(12px * var(--fs,1));font-weight:600;}
.fs-empty{padding:22px 12px;text-align:center;}
.fs-empty-ic{font-size:calc(36px * var(--fs,1));margin-bottom:6px;}
.fs-empty-text{font-size:calc(12px * var(--fs,1));color:var(--t2);line-height:1.5;font-weight:500;}
.fs-list{display:flex;flex-direction:column;gap:8px;}
.fs-card{
  background:linear-gradient(135deg,rgba(91,91,246,.05),var(--bg2));
  border:1.5px solid rgba(91,91,246,.25);border-radius:12px;padding:11px 12px;
}
.fs-card-head{display:flex;align-items:center;gap:10px;margin-bottom:9px;}
.fs-card-tier{font-size:calc(22px * var(--fs,1));flex-shrink:0;}
.fs-card-body{flex:1;min-width:0;}
.fs-card-nick{font-size:calc(14px * var(--fs,1));font-weight:800;color:var(--t);line-height:1.2;}
.fs-card-tag{color:var(--purple);font-weight:500;font-size:calc(12px * var(--fs,1));margin-left:2px;}
.fs-card-reasons{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px;}
.fs-reason{
  font-size:calc(11px * var(--fs,1));font-weight:700;color:var(--purple);
  background:rgba(91,91,246,.10);border:1px solid rgba(91,91,246,.3);
  border-radius:8px;padding:1px 6px;letter-spacing:.2px;
}
.fs-card-score{
  background:var(--purple);color:#fff;border-radius:8px;padding:4px 9px;
  font-size:calc(12px * var(--fs,1));font-weight:800;flex-shrink:0;
  box-shadow:0 1px 0 var(--btn-shadow-blue);
}
.fs-card-actions{display:flex;gap:6px;}
.fs-btn-view, .fs-btn-add{
  flex:1;padding:8px;border-radius:8px;font-size:calc(12px * var(--fs,1));font-weight:700;
  cursor:pointer;font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;
}
.fs-btn-view{background:transparent;border:1.5px solid var(--bd2);color:var(--t2);}
.fs-btn-add{background:var(--purple);color:#fff;border:none;box-shadow:0 2px 0 var(--btn-shadow-blue);}
.fs-btn-add:active{transform:translateY(2px);box-shadow:0 0 0 var(--btn-shadow-blue);}

/* ── 언어 토글 ── */
.lang-btn{
  flex:1;background:var(--bg2);border:1.5px solid var(--bd2);
  border-radius:12px;padding:10px;font-size:calc(13px * var(--fs,1));font-weight:700;color:var(--t2);
  cursor:pointer;font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;
  transition:transform .12s,box-shadow .12s,border-color .15s,background .15s;
}
.lang-btn.active{background:var(--acc);color:var(--on-acc);border-color:var(--acc);font-weight:800;box-shadow:0 2px 0 var(--btn-shadow-acc);}
.lang-btn:active{transform:translateY(1px);}

/* ── 친구 활동 피드 ── */
.fa-loading{padding:24px 0;text-align:center;color:var(--t3);font-size:calc(12px * var(--fs,1));font-weight:600;}
.fa-empty{padding:24px 12px;text-align:center;}
.fa-empty-ic{font-size:calc(40px * var(--fs,1));margin-bottom:8px;}
.fa-empty-text{font-size:calc(12px * var(--fs,1));color:var(--t2);line-height:1.55;font-weight:500;}
.fa-feed{display:flex;flex-direction:column;gap:8px;}
.fa-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;background:var(--bg2);border:1px solid var(--bd);
  border-radius:12px;transition:border-color .15s;
}
.fa-item.me{background:linear-gradient(135deg,rgba(226,124,31,.08),var(--bg2));border-color:rgba(226,124,31,.3);}
.fa-item-ic{font-size:calc(22px * var(--fs,1));flex-shrink:0;width:30px;text-align:center;}
.fa-item-body{flex:1;min-width:0;}
.fa-item-text{font-size:calc(13px * var(--fs,1));color:var(--t);line-height:1.45;}
.fa-item-text strong{color:var(--acc-text);font-weight:800;}
.fa-item-name{font-weight:800;color:var(--t);margin-right:4px;}
.fa-item.me .fa-item-name{color:var(--acc-text);}
.fa-item-time{font-size:calc(10px * var(--fs,1));color:var(--t3);font-weight:600;margin-top:3px;}
.fa-item-vs{
  background:transparent;border:1.5px solid var(--bd2);color:var(--acc-text);
  border-radius:8px;padding:5px 9px;font-size:calc(11px * var(--fs,1));font-weight:800;cursor:pointer;
  font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;flex-shrink:0;
  letter-spacing:.3px;
}
.fa-item-vs:hover{border-color:var(--acc);background:rgba(226,124,31,.08);}

/* nav 배지 (미확인 활동) */
.nav-dot{
  position:absolute;top:0;right:-2px;
  min-width:16px;height:16px;padding:0 4px;
  background:var(--red);color:#fff;
  border-radius:8px;border:1.5px solid var(--bg2);
  font-size:calc(11px * var(--fs,1));font-weight:800;line-height:13px;
  display:none;align-items:center;justify-content:center;
  box-shadow:0 1px 3px rgba(220,38,38,.4);
}
.nav-dot.show{display:flex;}

/* ── 친구 비교 모달 ── */
#fc-modal{position:fixed;inset:0;z-index:10050;display:none;pointer-events:none;}
#fc-modal.open{display:block;pointer-events:auto;}
#fc-modal .fc-backdrop{position:absolute;inset:0;background:rgba(8,12,24,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:evtBackdrop .3s ease;}
#fc-modal .fc-card{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:calc(100% - 28px);max-width:460px;max-height:90vh;overflow-y:auto;
  background:var(--bg2);border:2.5px solid var(--bd2);border-radius:24px;
  padding:20px 18px 14px;
  box-shadow:0 24px 56px rgba(8,12,24,.4),0 4px 0 var(--btn-shadow-acc);
  animation:arcade-pop-center .38s var(--ease-arcade-step);
}
#fc-modal .fc-close{
  position:absolute;top:10px;right:12px;background:transparent;border:none;
  color:var(--t3);font-size:calc(24px * var(--fs,1));cursor:pointer;padding:0 4px;font-weight:500;line-height:1;
}
#fc-modal .fc-loading{padding:40px 0;text-align:center;color:var(--t3);font-size:calc(12px * var(--fs,1));font-weight:600;}
#fc-modal .fc-empty{padding:30px 16px;text-align:center;}
#fc-modal .fc-empty-ic{font-size:calc(50px * var(--fs,1));margin-bottom:8px;}
#fc-modal .fc-empty-title{font-size:calc(15px * var(--fs,1));font-weight:800;color:var(--t);margin-bottom:6px;}
#fc-modal .fc-empty-sub{font-size:calc(12px * var(--fs,1));color:var(--t2);font-weight:500;line-height:1.55;}

#fc-modal .fc-header{
  display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:8px;align-items:center;
  margin-bottom:16px;padding-bottom:14px;border-bottom:1.5px solid var(--bd);
}
#fc-modal .fc-side{text-align:center;}
#fc-modal .fc-tier{font-size:calc(32px * var(--fs,1));line-height:1;}
#fc-modal .fc-nick{font-size:calc(13px * var(--fs,1));font-weight:800;color:var(--t);margin-top:5px;line-height:1.2;}
#fc-modal .fc-score{font-size:calc(14px * var(--fs,1));font-weight:800;color:var(--acc-text);font-variant-numeric:tabular-nums;margin-top:3px;}
#fc-modal .fc-vs{text-align:center;}
#fc-modal .fc-vs-emoji{font-size:calc(26px * var(--fs,1));line-height:1;margin-bottom:4px;}
#fc-modal .fc-vs-text{font-size:calc(12px * var(--fs,1));font-weight:800;line-height:1.3;}
#fc-modal .fc-vs-diff{font-size:calc(10px * var(--fs,1));color:var(--t3);font-weight:600;margin-top:3px;}

#fc-modal .fc-bars{display:flex;flex-direction:column;gap:11px;}
#fc-modal .fc-bar-row{}
#fc-modal .fc-bar-label{font-size:calc(12px * var(--fs,1));font-weight:800;color:var(--t);margin-bottom:5px;text-align:center;}
#fc-modal .fc-bar-vals{display:grid;grid-template-columns:1fr 1fr;gap:5px;}
#fc-modal .fc-bar-side{display:flex;align-items:center;gap:6px;}
#fc-modal .fc-bar-me{flex-direction:row;}
#fc-modal .fc-bar-fr{flex-direction:row;}
#fc-modal .fc-bar-val{
  font-size:calc(12px * var(--fs,1));font-weight:800;color:var(--t2);
  min-width:48px;text-align:center;font-variant-numeric:tabular-nums;
}
#fc-modal .fc-bar-val.win{color:var(--acc-text);}
#fc-modal .fc-bar-track{flex:1;height:7px;background:var(--bg3);border-radius:4px;overflow:hidden;border:1px solid var(--bd);position:relative;}
#fc-modal .fc-bar-track.left{display:flex;justify-content:flex-end;}
#fc-modal .fc-bar-track.right{display:flex;justify-content:flex-start;}
#fc-modal .fc-bar-fill{height:100%;background:var(--bg4);border-radius:4px;transition:width .4s ease;}
#fc-modal .fc-bar-fill.win{background:linear-gradient(90deg,var(--acc2),var(--acc));}

#fc-modal .fc-foot{margin-top:16px;}
#fc-modal .fc-close-btn{
  width:100%;background:var(--bg3);border:1.5px solid var(--bd2);
  color:var(--t);border-radius:12px;padding:11px;
  font-size:calc(13px * var(--fs,1));font-weight:800;cursor:pointer;
  font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;
}

/* ── 리그 랭킹 탭 (전체/친구만) ── */
.lg-rank-tabs{
  display:flex;gap:6px;margin-bottom:10px;
  background:var(--bg3);border:1.5px solid var(--bd);border-radius:12px;padding:4px;
}
.lg-rank-tab{
  flex:1;background:transparent;border:none;border-radius:12px;
  padding:8px;font-size:calc(12px * var(--fs,1));font-weight:700;color:var(--t2);cursor:pointer;
  font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;
  transition:background .15s ease,color .15s ease,box-shadow .15s ease;
}
.lg-rank-tab.active{background:var(--bg2);color:var(--t);font-weight:800;box-shadow:0 2px 0 var(--bd2);}
.lg-rank-row.clickable{cursor:pointer;}
.lg-rank-row.clickable:hover{border-color:var(--acc)!important;}

/* ── 포트폴리오 강화: 분산·기여도·추천 ── */
.pt-alloc-row{display:flex;align-items:center;gap:14px;}
.pt-alloc-donut{position:relative;width:120px;height:120px;flex-shrink:0;}
.pt-alloc-donut svg{width:100%;height:100%;}
.pt-alloc-center{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  pointer-events:none;
}
.pt-alloc-score{font-size:calc(28px * var(--fs,1));font-weight:800;line-height:1;font-variant-numeric:tabular-nums;}
.pt-alloc-score-l{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:700;letter-spacing:.3px;text-transform:uppercase;margin-top:3px;}
.pt-alloc-legend{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0;}
.pt-alloc-item{display:flex;align-items:center;gap:7px;font-size:calc(12px * var(--fs,1));}
.pt-alloc-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.pt-alloc-name{flex:1;color:var(--t);font-weight:600;}
.pt-alloc-pct{color:var(--t2);font-weight:700;font-variant-numeric:tabular-nums;}
.pt-alloc-status{margin-top:10px;font-size:calc(12px * var(--fs,1));font-weight:800;text-align:center;letter-spacing:.2px;}

/* 종목 기여도 */
.pt-contrib-list{display:flex;flex-direction:column;gap:7px;}
.pt-contrib-row{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  padding:8px 10px;border-radius:12px;background:var(--bg3);
  border:1px solid var(--bd);transition:border-color .15s;
}
.pt-contrib-row:hover{border-color:var(--acc);}
.pt-contrib-ic{
  width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:calc(16px * var(--fs,1));flex-shrink:0;
}
.pt-contrib-body{flex:1;min-width:0;}
.pt-contrib-name{font-size:calc(12px * var(--fs,1));font-weight:800;color:var(--t);margin-bottom:4px;}
.pt-contrib-bar{height:5px;background:var(--bg4);border-radius:4px;overflow:hidden;}
.pt-contrib-fill{height:100%;border-radius:4px;transition:width .4s ease;}
.pt-contrib-fill.pos{background:linear-gradient(90deg,#34D399,var(--green));}
.pt-contrib-fill.neg{background:linear-gradient(90deg,#FCA5A5,var(--red));}
.pt-contrib-amt{font-size:calc(12px * var(--fs,1));font-weight:800;text-align:right;flex-shrink:0;min-width:75px;font-variant-numeric:tabular-nums;}

/* 추천 배분 */
.pt-rec-phase{
  font-size:calc(12px * var(--fs,1));color:var(--t2);font-weight:600;margin-bottom:9px;
  padding:6px 10px;background:var(--bg3);border-radius:8px;
}
.pt-rec-phase strong{color:var(--acc-text);font-weight:800;}
.pt-rec-list{display:flex;flex-direction:column;gap:6px;}
.pt-rec-row{
  display:grid;grid-template-columns:1fr 90px 80px;align-items:center;gap:8px;
  padding:7px 10px;background:var(--bg3);border:1px solid var(--bd);border-radius:12px;
}
.pt-rec-name{font-size:calc(12px * var(--fs,1));font-weight:700;color:var(--t);}
.pt-rec-vals{display:flex;align-items:center;gap:5px;font-variant-numeric:tabular-nums;justify-content:center;}
.pt-rec-cur{font-size:calc(11px * var(--fs,1));color:var(--t2);font-weight:700;min-width:30px;text-align:right;}
.pt-rec-arrow{font-size:calc(10px * var(--fs,1));color:var(--t3);}
.pt-rec-tgt{font-size:calc(12px * var(--fs,1));color:var(--acc-text);font-weight:800;min-width:30px;}
.pt-rec-diff{font-size:calc(11px * var(--fs,1));font-weight:700;text-align:right;}
.pt-rec-tip{
  margin-top:9px;font-size:calc(11px * var(--fs,1));color:var(--t3);
  background:rgba(99,102,241,.06);border-left:3px solid var(--purple);
  padding:7px 10px;border-radius:0 8px 8px 0;line-height:1.5;font-weight:500;
}

/* ── FCM 알림 토글 ── */
.fcm-toggle{
  position:relative;display:inline-block;width:46px;height:26px;flex-shrink:0;
}
.fcm-toggle input{opacity:0;width:0;height:0;}
.fcm-slider{
  position:absolute;cursor:pointer;inset:0;background:var(--bg4);
  border:1.5px solid var(--bd2);border-radius:24px;transition:.25s;
}
.fcm-slider::before{
  position:absolute;content:'';height:18px;width:18px;left:2px;bottom:2px;
  background:#fff;border-radius:50%;transition:.25s;
  box-shadow:0 1px 3px rgba(15,23,42,.18);
}
.fcm-toggle input:checked + .fcm-slider{background:var(--acc);border-color:var(--acc);}
.fcm-toggle input:checked + .fcm-slider::before{transform:translateX(20px);}

/* ── 분석 대시보드 ── */
.an-summary{margin-bottom:14px;}
.an-sum-row{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:7px;}
.an-sum-card{
  background:var(--bg2);border:1.5px solid var(--bd);border-radius:12px;
  padding:11px 8px;text-align:center;box-shadow:var(--shadow-sm);
}
.an-sum-card.an-sum-acc{
  background:linear-gradient(135deg,#FEF3E2,#FDD9A6);border-color:var(--acc);
  box-shadow:0 2px 0 var(--btn-shadow-acc);
}
.an-sum-n{font-size:calc(20px * var(--fs,1));font-weight:800;color:var(--acc-text);font-variant-numeric:tabular-nums;line-height:1;}
.an-sum-of{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:600;margin-left:1px;}
.an-sum-l{font-size:calc(10px * var(--fs,1));color:var(--t2);font-weight:700;margin-top:5px;letter-spacing:.2px;}

.an-section{
  background:var(--bg2);border:1.5px solid var(--bd);border-radius:16px;
  padding:13px 14px;margin-bottom:11px;box-shadow:var(--shadow-sm);
}
.an-section-title{
  font-size:calc(12px * var(--fs,1));font-weight:800;color:var(--acc-text);
  text-transform:uppercase;letter-spacing:.5px;margin-bottom:11px;
}

/* 학습 페이스 막대 */
.an-pace{display:flex;align-items:flex-end;gap:3px;height:84px;padding:4px 0;}
.an-pace-bar{
  flex:1;background:var(--bg3);border-radius:4px 4px 0 0;
  position:relative;min-height:6px;display:flex;flex-direction:column;justify-content:flex-end;
}
.an-pace-fill{
  background:linear-gradient(180deg,var(--acc2),var(--acc));
  border-radius:4px 4px 0 0;min-height:4px;
  transition:height .4s ease;
}
.an-pace-cnt{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  font-size:calc(11px * var(--fs,1));font-weight:800;color:var(--acc-text);
}
.an-pace-axis{display:flex;justify-content:space-between;font-size:calc(10px * var(--fs,1));color:var(--t3);font-weight:600;margin-top:4px;}

/* 약점 카드 */
.an-weak-list{display:flex;flex-direction:column;gap:7px;}
.an-weak-card{
  display:flex;align-items:center;gap:11px;
  background:linear-gradient(135deg,rgba(220,38,38,.08),rgba(220,38,38,.02));
  border:1.5px solid rgba(220,38,38,.36);border-radius:12px;
  padding:10px 12px;cursor:pointer;
  font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;text-align:left;
  box-shadow:0 2px 0 var(--btn-shadow-red);
  transition:transform .12s ease,box-shadow .12s ease;
}
.an-weak-card:active{transform:translateY(2px);box-shadow:0 0 0 var(--btn-shadow-red);}
.an-weak-ic{font-size:calc(22px * var(--fs,1));flex-shrink:0;}
.an-weak-body{flex:1;min-width:0;}
.an-weak-name{font-size:calc(13px * var(--fs,1));font-weight:800;color:var(--t);}
.an-weak-reason{font-size:calc(11px * var(--fs,1));color:var(--red);font-weight:700;margin-top:2px;}
.an-weak-arr{font-size:calc(18px * var(--fs,1));color:var(--red);font-weight:800;}

/* 카테고리 진척 */
.an-cat-list{display:flex;flex-direction:column;gap:8px;}
.an-cat-row{display:grid;grid-template-columns:24px 1fr 80px 50px;align-items:center;gap:8px;}
.an-cat-ic{font-size:calc(16px * var(--fs,1));text-align:center;}
.an-cat-name{font-size:calc(12px * var(--fs,1));font-weight:700;color:var(--t);}
.an-cat-bar{height:6px;background:var(--bg3);border-radius:4px;overflow:hidden;border:1px solid var(--bd);}
.an-cat-fill{height:100%;background:linear-gradient(90deg,var(--acc2),var(--acc));border-radius:4px;transition:width .35s ease;}
.an-cat-cnt{font-size:calc(11px * var(--fs,1));color:var(--t2);font-weight:700;text-align:right;font-variant-numeric:tabular-nums;}

/* 레벨 그리드 */
.an-lv-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;}
.an-lv-card{background:var(--bg3);border:1.5px solid var(--bd);border-radius:12px;padding:8px 6px;text-align:center;}
.an-lv-num{font-size:calc(11px * var(--fs,1));font-weight:800;color:var(--t2);letter-spacing:.3px;}
.an-lv-pct{font-size:calc(15px * var(--fs,1));font-weight:800;color:var(--acc-text);margin-top:2px;}
.an-lv-bar{height:4px;background:var(--bg2);border-radius:4px;overflow:hidden;border:1px solid var(--bd);margin:4px 0 3px;}
.an-lv-fill{height:100%;background:linear-gradient(90deg,var(--acc2),var(--acc));border-radius:4px;}
.an-lv-cnt{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:600;font-variant-numeric:tabular-nums;}

/* 정답률 */
.an-acc-list{display:flex;flex-direction:column;gap:7px;}
.an-acc-row{display:grid;grid-template-columns:24px 1fr 60px 40px 50px;align-items:center;gap:8px;}
.an-acc-ic{font-size:calc(16px * var(--fs,1));text-align:center;}
.an-acc-name{font-size:calc(12px * var(--fs,1));font-weight:700;color:var(--t);}
.an-acc-bar{height:6px;background:var(--bg3);border-radius:4px;overflow:hidden;border:1px solid var(--bd);}
.an-acc-fill{height:100%;border-radius:4px;transition:width .35s ease;}
.an-acc-fill.good{background:var(--green);}
.an-acc-fill.mid{background:var(--acc);}
.an-acc-fill.bad{background:var(--red);}
.an-acc-pct{font-size:calc(12px * var(--fs,1));font-weight:800;color:var(--t);text-align:right;font-variant-numeric:tabular-nums;}
.an-acc-sub{font-size:calc(10px * var(--fs,1));color:var(--t3);font-weight:600;text-align:right;font-variant-numeric:tabular-nums;}

.an-empty{font-size:calc(12px * var(--fs,1));color:var(--t3);font-weight:500;text-align:center;padding:14px 0;}

/* ── 퀴즈 모드 토글 (복습 / 도전) ── */
/* Quiz 재디자인: 컨텍스트 배너 · 약점 추천 · 카테고리 픽커 */
#q-ctx-banner:empty,#q-weak-recommend:empty{display:none;}
.qcx-banner{display:flex;align-items:flex-start;gap:12px;border:1.5px solid;border-radius:16px;padding:14px 15px;margin-bottom:14px;}
.qcx-banner-body{flex:1;min-width:0;}
.qcx-banner-eyebrow{font-size:calc(11px * var(--fs,1));font-weight:800;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:4px;}
.qcx-banner-title{font-family:var(--font-hd);font-size:calc(15px * var(--fs,1));color:var(--t);letter-spacing:-.2px;margin-bottom:8px;line-height:1.3;}
.qcx-banner-cats{display:flex;flex-wrap:wrap;gap:4px;}
.qcx-chip{font-size:calc(10px * var(--fs,1));font-weight:800;padding:3px 8px;border-radius:999px;letter-spacing:.2px;}
.qcx-banner-actions{display:flex;flex-direction:column;gap:5px;flex-shrink:0;}
.qcx-start{color:#fff;border:none;border-radius:12px;padding:9px 12px;font-size:calc(12px * var(--fs,1));font-weight:800;cursor:pointer;font-family:inherit;white-space:nowrap;box-shadow:0 2px 0 rgba(0,0,0,.1);}
.qcx-start:active{transform:translateY(1px);box-shadow:0 0 0 rgba(0,0,0,.1);}
.qcx-clear{background:transparent;border:1px solid var(--bd2);color:var(--t3);border-radius:8px;padding:5px 8px;font-size:calc(11px * var(--fs,1));cursor:pointer;font-family:inherit;}
/* 약점 추천 카드 */
.qwr-card{display:flex;align-items:center;gap:12px;background:rgba(239,68,68,.05);border:1.5px dashed rgba(239,68,68,.35);border-radius:12px;padding:12px 14px;margin-bottom:14px;cursor:pointer;transition:background .15s ease,transform .12s ease;font-family:inherit;color:var(--t);width:100%;}
.qwr-card:hover{background:rgba(239,68,68,.09);}
.qwr-card:active{transform:translateY(1px);}
.qwr-ico{font-size:calc(26px * var(--fs,1));line-height:1;flex-shrink:0;}
.qwr-body{flex:1;text-align:left;min-width:0;}
.qwr-eyebrow{font-size:calc(11px * var(--fs,1));color:#DC2626;font-weight:800;letter-spacing:.8px;text-transform:uppercase;margin-bottom:2px;}
.qwr-title{font-family:var(--font-hd);font-size:calc(14px * var(--fs,1));color:var(--t);margin-bottom:2px;line-height:1.3;letter-spacing:-.2px;}
.qwr-desc{font-size:calc(11px * var(--fs,1));color:var(--t2);font-weight:500;line-height:1.4;}
.qwr-arrow{font-size:calc(16px * var(--fs,1));color:#DC2626;font-weight:800;flex-shrink:0;}
/* 카테고리 픽커 */
.qcp-h{font-family:var(--font-hd);font-size:calc(13px * var(--fs,1));color:var(--t);margin:0 0 10px 2px;letter-spacing:-.2px;}
.qcp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:16px;}
@media (min-width:640px){.qcp-grid{grid-template-columns:repeat(5,1fr);}}
.qcp-card{background:var(--bg2);border:1.5px solid var(--bd);border-radius:12px;padding:10px 6px;cursor:pointer;font-family:inherit;color:var(--t);transition:transform .12s ease,border-color .15s ease;text-align:center;}
.qcp-card:hover{border-color:var(--c);transform:translateY(-1px);}
.qcp-card:active{transform:translateY(1px);}
.qcp-emoji{font-size:calc(22px * var(--fs,1));line-height:1;margin-bottom:4px;}
.qcp-name{font-family:var(--font-hd);font-size:calc(11px * var(--fs,1));color:var(--t);letter-spacing:-.2px;margin-bottom:2px;}
.qcp-acc{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:600;font-family:'DM Mono',monospace;}

.qmode-toggle{
  display:flex;gap:7px;margin-bottom:14px;
  background:var(--bg3);border:1.5px solid var(--bd);border-radius:16px;padding:4px;
}
.qmt-btn{
  flex:1;background:transparent;border:none;border-radius:12px;
  padding:10px 8px;font-size:calc(13px * var(--fs,1));font-weight:700;color:var(--t2);
  cursor:pointer;font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;
  transition:background .15s ease,color .15s ease,box-shadow .15s ease;
}
.qmt-btn.active{background:var(--bg2);color:var(--t);font-weight:800;box-shadow:0 2px 0 var(--bd2);}

/* 복습 모드 — 통합/날짜별 카드 */
#qreview-list .qr-bundle{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;}
#qreview-list .qr-bundle-btn{
  display:flex;align-items:center;gap:12px;padding:13px 14px;
  background:var(--bg2);border:1.5px solid var(--bd);border-radius:16px;
  cursor:pointer;box-shadow:0 3px 0 var(--bd2);
  transition:transform .12s ease,box-shadow .12s ease,border-color .15s ease;
  font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;text-align:left;
}
#qreview-list .qr-bundle-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--bd2);}
#qreview-list .qr-bundle-btn.qr-acc{
  background:linear-gradient(135deg,#FEF3E2,#FDD9A6);
  border-color:var(--acc);box-shadow:0 3px 0 var(--btn-shadow-acc),0 5px 12px rgba(226,124,31,.18);
}
#qreview-list .qr-bundle-ic{font-size:calc(24px * var(--fs,1));flex-shrink:0;}
#qreview-list .qr-bundle-body{flex:1;min-width:0;}
#qreview-list .qr-bundle-title{font-size:calc(14px * var(--fs,1));font-weight:800;color:var(--t);line-height:1.2;}
#qreview-list .qr-bundle-sub{font-size:calc(12px * var(--fs,1));color:var(--t2);font-weight:600;margin-top:3px;}
#qreview-list .qr-bundle-arr{font-size:calc(18px * var(--fs,1));color:var(--acc-text);font-weight:800;flex-shrink:0;}

#qreview-list .qr-section-title{
  font-size:calc(11px * var(--fs,1));font-weight:800;color:var(--acc-text);text-transform:uppercase;
  letter-spacing:.6px;margin:14px 0 8px;
}
#qreview-list .qr-days{display:flex;flex-direction:column;gap:6px;}
#qreview-list .qr-day{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--bg2);border:1.5px solid var(--bd);border-radius:12px;
  padding:11px 13px;cursor:pointer;
  font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;text-align:left;
  box-shadow:0 2px 0 var(--bd2);
  transition:transform .12s ease,box-shadow .12s ease,border-color .15s ease;
}
#qreview-list .qr-day:active{transform:translateY(2px);box-shadow:0 0 0 var(--bd2);}
#qreview-list .qr-day:hover{border-color:var(--acc);}
#qreview-list .qr-day-label{font-size:calc(13px * var(--fs,1));font-weight:800;color:var(--t);}
#qreview-list .qr-day-sub{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:600;margin-top:2px;}
#qreview-list .qr-day-cnt{
  font-size:calc(12px * var(--fs,1));font-weight:800;color:var(--acc-text);
  background:rgba(226,124,31,.10);border:1px solid var(--acc);
  border-radius:8px;padding:4px 10px;flex-shrink:0;
}

#qreview-list .qr-empty{padding:30px 16px;text-align:center;}
#qreview-list .qr-empty-ic{font-size:calc(54px * var(--fs,1));margin-bottom:10px;}
#qreview-list .qr-empty-title{font-size:calc(15px * var(--fs,1));font-weight:800;color:var(--t);margin-bottom:7px;}
#qreview-list .qr-empty-sub{font-size:calc(12px * var(--fs,1));color:var(--t2);line-height:1.55;font-weight:500;margin-bottom:14px;}
#qreview-list .qr-empty-cta{
  background:var(--acc);color:var(--on-acc);border:none;border-radius:12px;
  padding:11px 18px;font-size:calc(13px * var(--fs,1));font-weight:800;cursor:pointer;
  font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;
  box-shadow:0 4px 0 var(--btn-shadow-acc),0 6px 12px rgba(226,124,31,.22);
  transition:transform .12s ease,box-shadow .12s ease;
}
#qreview-list .qr-empty-cta:active{transform:translateY(3px);box-shadow:0 1px 0 var(--btn-shadow-acc);}

/* ── 퀴즈 페이지: 완료 학습 기반 미리보기 ── */
.q-personal{
  background:linear-gradient(135deg,#FEF3E2,#FDD9A6);
  border:1.5px solid var(--acc);border-radius:12px;
  padding:11px 13px;margin-bottom:11px;
  box-shadow:0 2px 0 var(--btn-shadow-acc);
}
.q-personal .qp-row{display:flex;align-items:center;gap:9px;font-size:calc(13px * var(--fs,1));color:var(--t);font-weight:700;}
.q-personal .qp-row b{color:var(--acc-text);font-weight:800;}
.q-personal .qp-ic{font-size:calc(18px * var(--fs,1));flex-shrink:0;}
.q-personal .qp-text{flex:1;line-height:1.45;}
.q-personal .qp-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;}
.q-personal .qp-chip{
  background:var(--bg2);border:1px solid var(--acc);color:var(--acc-text);
  border-radius:16px;padding:3px 9px;font-size:calc(11px * var(--fs,1));font-weight:700;
  letter-spacing:.2px;
}
.q-personal .qp-empty{display:flex;align-items:center;gap:8px;font-size:calc(12px * var(--fs,1));color:var(--t2);font-weight:600;line-height:1.5;}

/* ── PWA 설치 유도 모달 ── */
#pwa-install-modal{position:fixed;inset:0;z-index:10049;display:none;pointer-events:none;}
#pwa-install-modal.open{display:block;pointer-events:auto;}
#pwa-install-modal .pi-backdrop{position:absolute;inset:0;background:rgba(8,12,24,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:evtBackdrop .3s ease;}
#pwa-install-modal .pi-card{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:calc(100% - 32px);max-width:380px;
  background:var(--bg2);border:2.5px solid var(--blue);border-radius:24px;
  padding:22px 22px 20px;
  box-shadow:0 24px 56px rgba(8,12,24,.4),0 4px 0 var(--btn-shadow-blue);
  animation:arcade-pop-center .38s var(--ease-arcade-step);
  text-align:center;
}
#pwa-install-modal .pi-close{
  position:absolute;top:10px;right:12px;background:transparent;border:none;
  color:var(--t3);font-size:calc(24px * var(--fs,1));cursor:pointer;padding:0 4px;font-weight:500;line-height:1;
}
#pwa-install-modal .pi-icon{
  font-size:calc(48px * var(--fs,1));line-height:1;margin-bottom:8px;
  animation:evtIconFloat 3.2s ease-in-out infinite;
}
#pwa-install-modal .pi-title{
  font-family:var(--font-hd);font-size:calc(21px * var(--fs,1));font-weight:700;
  letter-spacing:-.3px;line-height:1.2;margin-bottom:8px;color:var(--t);
}
#pwa-install-modal .pi-body{
  font-size:calc(13px * var(--fs,1));color:var(--t2);line-height:1.6;font-weight:500;
  margin-bottom:14px;
}
#pwa-install-modal .pi-body strong{color:var(--blue);font-weight:800;}
#pwa-install-modal .pi-steps{
  text-align:left;background:var(--bg3);border:1.5px solid var(--bd);
  border-radius:12px;padding:11px 12px;margin-bottom:14px;
}
#pwa-install-modal .pi-step{
  display:flex;align-items:center;gap:8px;font-size:calc(12px * var(--fs,1));font-weight:600;color:var(--t);
  padding:5px 0;line-height:1.4;
}
#pwa-install-modal .pi-step + .pi-step{border-top:1px solid var(--bd);margin-top:4px;padding-top:8px;}
#pwa-install-modal .pi-step strong{color:var(--blue);font-weight:800;}
#pwa-install-modal .pi-step-n{
  flex-shrink:0;width:20px;height:20px;border-radius:50%;background:var(--blue);color:#fff;
  font-size:calc(11px * var(--fs,1));font-weight:800;display:flex;align-items:center;justify-content:center;
}
#pwa-install-modal .pi-step-auto{
  justify-content:center;color:var(--blue);font-weight:800;text-align:center;padding:8px 0;
}
#pwa-install-modal .pi-share{display:inline-block;background:var(--bg2);border:1px solid var(--bd2);border-radius:4px;padding:1px 6px;font-size:calc(13px * var(--fs,1));font-weight:700;color:var(--blue);margin:0 2px;}
#pwa-install-modal .pi-actions{display:flex;flex-direction:column;gap:7px;}
#pwa-install-modal .pi-cta{
  width:100%;background:var(--blue);color:#fff;border:none;border-radius:12px;
  padding:12px;font-size:calc(14px * var(--fs,1));font-weight:800;letter-spacing:.2px;cursor:pointer;
  font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;
  box-shadow:0 4px 0 var(--btn-shadow-blue),0 6px 14px rgba(37,99,235,.22);
  transition:transform .12s ease,box-shadow .12s ease;
}
#pwa-install-modal .pi-cta:active{transform:translateY(3px);box-shadow:0 1px 0 var(--btn-shadow-blue);}
#pwa-install-modal .pi-skip{
  background:transparent;border:none;color:var(--t3);
  font-size:calc(12px * var(--fs,1));font-weight:600;cursor:pointer;padding:6px;
  font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;
}
#pwa-install-modal .pi-skip:hover{color:var(--t2);text-decoration:underline;}

/* ── What's New 안내 모달 ── */
#wn-modal{position:fixed;inset:0;z-index:10048;display:none;pointer-events:none;}
#wn-modal.open{display:block;pointer-events:auto;}
#wn-modal .wn-backdrop{position:absolute;inset:0;background:rgba(8,12,24,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:evtBackdrop .3s ease;}
#wn-modal .wn-card{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:calc(100% - 32px);max-width:380px;
  background:var(--bg2);border:2.5px solid var(--acc);border-radius:24px;
  padding:24px 22px 20px;
  box-shadow:0 24px 56px rgba(8,12,24,.4),0 4px 0 var(--btn-shadow-acc);
  animation:arcade-pop-center .38s var(--ease-arcade-step);
  text-align:center;
}
#wn-modal .wn-tag{
  display:inline-block;background:linear-gradient(135deg,#FEF3E2,#FDD9A6);
  color:var(--acc-text);border:1.5px solid var(--acc);
  border-radius:24px;padding:3px 12px;
  font-size:calc(11px * var(--fs,1));font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  box-shadow:0 1px 0 var(--btn-shadow-acc);margin-bottom:11px;
}
#wn-modal .wn-icon{
  font-size:calc(54px * var(--fs,1));line-height:1;margin-bottom:8px;
  filter:drop-shadow(0 4px 10px rgba(226,124,31,.3));
  animation:evtIconFloat 3.2s ease-in-out infinite;
}
#wn-modal .wn-title{
  font-family:var(--font-hd);font-size:calc(22px * var(--fs,1));font-weight:700;
  letter-spacing:-.3px;line-height:1.2;margin-bottom:8px;color:var(--t);
}
#wn-modal .wn-body{
  font-size:calc(13px * var(--fs,1));color:var(--t2);line-height:1.65;font-weight:500;
  margin-bottom:16px;
}
#wn-modal .wn-actions{display:flex;gap:8px;}
#wn-modal .wn-skip{
  flex:0 0 auto;background:transparent;border:1.5px solid var(--bd2);
  color:var(--t3);border-radius:12px;padding:11px 14px;
  font-size:calc(12px * var(--fs,1));font-weight:700;cursor:pointer;
  font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;
  transition:border-color .15s ease,color .15s ease;
}
#wn-modal .wn-skip:hover{border-color:var(--t3);color:var(--t2);}
#wn-modal .wn-cta{
  flex:1;background:var(--acc);color:var(--on-acc);border:none;
  border-radius:12px;padding:12px;font-size:calc(14px * var(--fs,1));font-weight:800;letter-spacing:.2px;
  cursor:pointer;font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;
  box-shadow:0 4px 0 var(--btn-shadow-acc),0 6px 14px rgba(226,124,31,.22);
  transition:transform .12s ease,box-shadow .12s ease;
}
#wn-modal .wn-cta:active{transform:translateY(3px);box-shadow:0 1px 0 var(--btn-shadow-acc);}

/* ── 오늘의 학습 미션 (홈 상단 길잡이) ── */
#daily-mission{margin-bottom:12px;}
.dm-card{
  /* 앰버 틴트를 표면색에 섞어 라이트/다크 모두에서 동작 */
  background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 10%,var(--bg2)) 0%,var(--bg2) 60%);
  border:2px solid var(--acc);border-radius:16px;padding:14px 14px 12px;
  box-shadow:0 3px 0 var(--btn-shadow-acc),0 6px 18px rgba(226,124,31,.16);
}
.dm-card.dm-finished{
  background:linear-gradient(180deg,rgba(21,128,61,.10),var(--bg2) 60%);
  border-color:var(--green);
  box-shadow:0 3px 0 var(--btn-shadow-green),0 6px 18px rgba(21,128,61,.18);
}
.dm-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:9px;}
.dm-head-ic{font-size:calc(22px * var(--fs,1));flex-shrink:0;filter:drop-shadow(0 2px 4px rgba(226,124,31,.3));}
.dm-head-body{flex:1;min-width:0;}
.dm-head-title{font-size:calc(14px * var(--fs,1));font-weight:800;color:var(--t);letter-spacing:-.1px;}
.dm-head-sub{font-size:calc(11px * var(--fs,1));color:var(--t2);font-weight:600;margin-top:2px;line-height:1.4;}
.dm-head-pct{font-size:calc(14px * var(--fs,1));font-weight:800;color:var(--acc-text);font-variant-numeric:tabular-nums;flex-shrink:0;}
.dm-card.dm-finished .dm-head-pct{color:var(--green);}
.dm-bar{height:6px;background:var(--bg3);border-radius:4px;overflow:hidden;border:1px solid var(--bd);margin-bottom:10px;}
.dm-bar-fill{height:100%;background:linear-gradient(90deg,var(--acc2),var(--acc));border-radius:4px;transition:width .35s ease;box-shadow:0 0 6px rgba(226,124,31,.4);}
.dm-card.dm-finished .dm-bar-fill{background:linear-gradient(90deg,#34D399,var(--green));}
.dm-steps{display:flex;flex-direction:column;gap:7px;}
.dm-step{
  display:flex;align-items:center;gap:9px;
  background:var(--bg2);border:1.5px solid var(--bd);border-radius:12px;
  padding:9px 11px;box-shadow:0 2px 0 var(--bd2);
  transition:background .15s ease,border-color .15s ease;
}
.dm-step.done{background:rgba(21,128,61,.07);border-color:rgba(21,128,61,.4);box-shadow:0 2px 0 var(--btn-shadow-green);}
.dm-step-num{
  width:22px;height:22px;border-radius:50%;
  background:var(--bg3);color:var(--t3);
  font-size:calc(11px * var(--fs,1));font-weight:800;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  border:1.5px solid var(--bd2);
}
.dm-step.done .dm-step-num{background:var(--green);color:#fff;border-color:var(--green);}
.dm-step-ic{font-size:calc(18px * var(--fs,1));flex-shrink:0;width:24px;text-align:center;}
.dm-step.done .dm-step-ic{color:var(--green);font-weight:800;}
.dm-step-body{flex:1;min-width:0;}
.dm-step-label{font-size:calc(13px * var(--fs,1));font-weight:700;color:var(--t);line-height:1.3;overflow:hidden;text-overflow:ellipsis;}
.dm-step-sub{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:500;margin-top:1px;line-height:1.3;}
.dm-step-cta{
  flex-shrink:0;background:var(--acc);color:var(--on-acc);border:none;border-radius:8px;
  padding:6px 12px;font-size:calc(12px * var(--fs,1));font-weight:800;letter-spacing:.2px;cursor:pointer;
  font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;
  box-shadow:0 2px 0 var(--btn-shadow-acc);
  transition:transform .12s ease,box-shadow .12s ease;
}
.dm-step-cta:active{transform:translateY(2px);box-shadow:0 0 0 var(--btn-shadow-acc);}
.dm-step-tag{
  flex-shrink:0;font-size:calc(11px * var(--fs,1));font-weight:800;color:var(--green);
  padding:3px 9px;background:rgba(21,128,61,.12);border:1px solid rgba(21,128,61,.3);
  border-radius:8px;letter-spacing:.3px;
}
.dm-finish-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:10px;padding-top:10px;border-top:1.5px dashed rgba(21,128,61,.35);
}
.dm-finish-msg{font-size:calc(12px * var(--fs,1));color:var(--green);font-weight:700;line-height:1.4;flex:1;}
.dm-finish-cta{
  flex-shrink:0;background:var(--green);color:#fff;border:none;border-radius:12px;
  padding:8px 13px;font-size:calc(12px * var(--fs,1));font-weight:800;cursor:pointer;
  font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;
  box-shadow:0 3px 0 var(--btn-shadow-green);
  transition:transform .12s ease,box-shadow .12s ease;
}
.dm-finish-cta:active{transform:translateY(3px);box-shadow:0 0 0 var(--btn-shadow-green);}
/* 마스터 상태 (모든 개념 완료) */
.dm-card.dm-master{
  display:flex;align-items:center;gap:11px;
  background:linear-gradient(135deg,#FEF3E2,#FDD9A6);
}
.dm-master-ic{font-size:calc(30px * var(--fs,1));flex-shrink:0;filter:drop-shadow(0 2px 4px rgba(226,124,31,.4));}
.dm-master-body{flex:1;min-width:0;}
.dm-master-title{font-size:calc(14px * var(--fs,1));font-weight:800;color:var(--acc-text);line-height:1.3;}
.dm-master-sub{font-size:calc(11px * var(--fs,1));color:var(--t2);font-weight:600;margin-top:2px;line-height:1.45;}
.dm-master-cta{
  flex-shrink:0;background:var(--acc);color:var(--on-acc);border:none;border-radius:12px;
  padding:9px 13px;font-size:calc(12px * var(--fs,1));font-weight:800;cursor:pointer;
  font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;
  box-shadow:0 3px 0 var(--btn-shadow-acc);
}
.dm-master-cta:active{transform:translateY(2px);box-shadow:0 1px 0 var(--btn-shadow-acc);}
/* 미션 강조 플래시 (학습 카드/매크로 카드 강조) */
.dm-flash{
  animation:dmFlashPulse 1.6s ease-in-out 2;
  box-shadow:0 0 0 3px rgba(226,124,31,.5),0 0 30px rgba(226,124,31,.35)!important;
}
@keyframes dmFlashPulse{
  0%,100%{box-shadow:0 0 0 2px rgba(226,124,31,.4),0 0 20px rgba(226,124,31,.25);}
  50%{box-shadow:0 0 0 5px rgba(226,124,31,.65),0 0 40px rgba(226,124,31,.45);}
}

/* ── UGC 출제자 퀘스트 모달 ── */
#uq-modal{position:fixed;inset:0;z-index:10047;display:none;pointer-events:none;}
#uq-modal.open{display:block;pointer-events:auto;}
#uq-modal .uq-backdrop{position:absolute;inset:0;background:rgba(8,12,24,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:evtBackdrop .3s ease;}
#uq-modal .uq-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(100% - 28px);max-width:440px;max-height:90vh;display:flex;flex-direction:column;background:var(--bg2);border:2.5px solid var(--bd2);border-radius:24px;box-shadow:0 24px 56px rgba(8,12,24,.4),0 4px 0 var(--btn-shadow-acc);animation:arcade-pop-center .38s var(--ease-arcade-step);}
#uq-modal .uq-head{display:flex;align-items:flex-start;gap:11px;padding:18px 18px 12px;border-bottom:1.5px solid var(--bd);flex-shrink:0;}
#uq-modal .uq-head-ic{font-size:calc(30px * var(--fs,1));flex-shrink:0;filter:drop-shadow(0 2px 4px rgba(226,124,31,.3));}
#uq-modal .uq-head-body{flex:1;min-width:0;}
#uq-modal .uq-head-title{font-family:var(--font-hd);font-size:calc(20px * var(--fs,1));font-weight:700;letter-spacing:-.3px;line-height:1.2;}
#uq-modal .uq-head-sub{font-size:calc(12px * var(--fs,1));color:var(--t2);font-weight:500;margin-top:2px;line-height:1.4;}
#uq-modal .uq-close{background:transparent;border:none;color:var(--t3);font-size:calc(24px * var(--fs,1));cursor:pointer;padding:0 4px;font-weight:500;line-height:1;}
#uq-modal .uq-tabs{display:flex;gap:6px;padding:10px 14px;border-bottom:1px solid var(--bd);flex-shrink:0;}
#uq-modal .uq-tab{flex:1;background:var(--bg2);border:1.5px solid var(--bd);border-radius:12px;padding:7px 8px;font-size:calc(12px * var(--fs,1));font-weight:700;color:var(--t2);cursor:pointer;font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;transition:transform .12s ease,box-shadow .12s ease;}
#uq-modal .uq-tab.active{background:var(--acc);color:var(--on-acc);border-color:var(--acc);box-shadow:0 2px 0 var(--btn-shadow-acc);}
#uq-modal .uq-tab:active{transform:translateY(1px);}
#uq-modal .uq-body{flex:1;overflow-y:auto;padding:14px 16px 20px;-webkit-overflow-scrolling:touch;}
#uq-modal .uq-loading{padding:30px 0;text-align:center;color:var(--t3);font-size:calc(12px * var(--fs,1));font-weight:500;}
#uq-modal .uq-empty{padding:24px 16px;text-align:center;}
#uq-modal .uq-empty-ic{font-size:calc(48px * var(--fs,1));margin-bottom:8px;}
#uq-modal .uq-empty-title{font-size:calc(15px * var(--fs,1));font-weight:800;color:var(--t);margin-bottom:6px;}
#uq-modal .uq-empty-sub{font-size:calc(12px * var(--fs,1));color:var(--t2);line-height:1.55;font-weight:500;margin-bottom:14px;}
#uq-modal .uq-empty-cta{background:var(--acc);color:var(--on-acc);border:none;border-radius:12px;padding:11px 18px;font-size:calc(13px * var(--fs,1));font-weight:800;cursor:pointer;font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;box-shadow:0 4px 0 var(--btn-shadow-acc),0 6px 12px rgba(226,124,31,.25);transition:transform .12s ease,box-shadow .12s ease;}
#uq-modal .uq-empty-cta:active{transform:translateY(3px);box-shadow:0 1px 0 var(--btn-shadow-acc);}

#uq-modal .uq-list{display:flex;flex-direction:column;gap:8px;}
#uq-modal .uq-item{display:flex;align-items:center;gap:11px;background:var(--bg2);border:1.5px solid var(--bd);border-radius:16px;padding:12px 13px;cursor:pointer;box-shadow:0 3px 0 var(--bd2);transition:transform .12s ease,box-shadow .12s ease,border-color .15s ease;}
#uq-modal .uq-item:active{transform:translateY(2px);box-shadow:0 1px 0 var(--bd2);}
#uq-modal .uq-item:hover{border-color:var(--acc);}
#uq-modal .uq-item.own{cursor:default;}
#uq-modal .uq-item-ic{font-size:calc(22px * var(--fs,1));flex-shrink:0;}
#uq-modal .uq-item-body{flex:1;min-width:0;}
#uq-modal .uq-item-title{font-size:calc(14px * var(--fs,1));font-weight:800;color:var(--t);line-height:1.3;}
#uq-modal .uq-item-sub{font-family:var(--font-hd);font-size:calc(12px * var(--fs,1));color:var(--acc-text);font-style:italic;margin-top:1px;}
#uq-modal .uq-item-meta{font-size:calc(11px * var(--fs,1));color:var(--t3);margin-top:3px;font-weight:600;}
#uq-modal .uq-item-arr{font-size:calc(18px * var(--fs,1));color:var(--t3);flex-shrink:0;}
#uq-modal .uq-item-del{background:transparent;border:1px solid var(--bd2);color:var(--red);border-radius:8px;padding:5px 10px;font-size:calc(11px * var(--fs,1));font-weight:700;cursor:pointer;font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;flex-shrink:0;}

#uq-modal .uq-form{display:flex;flex-direction:column;gap:6px;}
#uq-modal .uq-form-section{background:var(--bg3);border:1.5px solid var(--bd);border-radius:12px;padding:11px 12px;display:flex;flex-direction:column;gap:6px;}
#uq-modal .uq-label{font-size:calc(11px * var(--fs,1));font-weight:800;color:var(--acc-text);text-transform:uppercase;letter-spacing:.5px;}
#uq-modal .uq-input{width:100%;background:var(--bg2);border:1.5px solid var(--bd);border-radius:12px;padding:9px 11px;font-size:calc(13px * var(--fs,1));color:var(--t);font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;outline:none;font-weight:500;resize:vertical;}
#uq-modal .uq-input:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(226,124,31,.15);}
#uq-modal .uq-input::placeholder{color:var(--t3);font-weight:400;}
#uq-modal .uq-opt-row{display:flex;gap:6px;}
#uq-modal .uq-opt-t{flex:1;}
#uq-modal .uq-opt-s{width:64px;text-align:center;font-variant-numeric:tabular-nums;}
#uq-modal .uq-opt-e{margin-bottom:4px;font-size:calc(12px * var(--fs,1));}
#uq-modal .uq-submit{width:100%;margin-top:6px;background:var(--acc);color:var(--on-acc);border:none;border-radius:16px;padding:13px;font-size:calc(15px * var(--fs,1));font-weight:800;letter-spacing:.2px;cursor:pointer;font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;box-shadow:0 4px 0 var(--btn-shadow-acc),0 6px 14px rgba(226,124,31,.22);transition:transform .12s ease,box-shadow .12s ease;}
#uq-modal .uq-submit:active{transform:translateY(3px);box-shadow:0 1px 0 var(--btn-shadow-acc);}
#uq-modal .uq-form-tip{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:500;line-height:1.55;margin-top:4px;text-align:center;}

#uq-modal .uq-scene-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px;}
#uq-modal .uq-back{background:transparent;border:1.5px solid var(--bd2);border-radius:12px;padding:7px 12px;font-size:calc(12px * var(--fs,1));color:var(--t2);font-weight:700;cursor:pointer;font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;}
#uq-modal .uq-report{background:transparent;border:1.5px solid var(--bd2);border-radius:12px;padding:7px 11px;font-size:calc(14px * var(--fs,1));color:var(--t3);cursor:pointer;font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;transition:border-color .15s ease,color .15s ease;}
#uq-modal .uq-report:hover{border-color:var(--red);color:var(--red);}

/* ── UGC 신고 사유 모달 ── */
#uq-report-modal{position:fixed;inset:0;z-index:10051;display:none;pointer-events:none;}
#uq-report-modal.open{display:block;pointer-events:auto;}
#uq-report-modal .urm-backdrop{position:absolute;inset:0;background:rgba(8,12,24,.65);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:evtBackdrop .25s ease;}
#uq-report-modal .urm-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(100% - 36px);max-width:340px;background:var(--bg2);border:2px solid var(--red);border-radius:16px;padding:18px 16px 14px;box-shadow:0 16px 40px rgba(220,38,38,.25),0 4px 0 var(--btn-shadow-red);animation:arcade-pop-center .32s var(--ease-arcade-step);text-align:center;}
#uq-report-modal .urm-title{font-family:var(--font-hd);font-size:calc(18px * var(--fs,1));font-weight:700;color:var(--red);margin-bottom:5px;}
#uq-report-modal .urm-sub{font-size:calc(12px * var(--fs,1));color:var(--t2);font-weight:500;margin-bottom:14px;line-height:1.5;}
#uq-report-modal .urm-reasons{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;}
#uq-report-modal .urm-reason{background:var(--bg2);border:1.5px solid var(--bd2);border-radius:12px;padding:10px 12px;font-size:calc(13px * var(--fs,1));font-weight:700;color:var(--t);cursor:pointer;font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;text-align:center;box-shadow:0 2px 0 var(--bd2);transition:transform .12s ease,box-shadow .12s ease,border-color .15s ease;}
#uq-report-modal .urm-reason:hover{border-color:var(--red);color:var(--red);}
#uq-report-modal .urm-reason:active{transform:translateY(2px);box-shadow:0 0 0 var(--bd2);}
#uq-report-modal .urm-cancel{background:transparent;border:none;color:var(--t3);font-size:calc(12px * var(--fs,1));font-weight:600;cursor:pointer;padding:6px;font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;width:100%;}
#uq-report-modal .urm-cancel:hover{color:var(--t2);text-decoration:underline;}
#uq-modal .uq-scene{}
#uq-modal .uq-scene-tag{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:700;text-transform:uppercase;letter-spacing:.6px;}
#uq-modal .uq-scene-title{font-family:var(--font-hd);font-size:calc(22px * var(--fs,1));font-weight:700;line-height:1.2;letter-spacing:-.3px;margin-top:2px;}
#uq-modal .uq-scene-sub{font-family:var(--font-hd);font-size:calc(14px * var(--fs,1));color:var(--acc-text);font-style:italic;margin-top:3px;}
#uq-modal .uq-scene-ctx{background:var(--bg2);border:1.5px solid var(--bd);border-radius:12px;padding:12px 14px;font-size:calc(13px * var(--fs,1));color:var(--t2);line-height:1.65;font-weight:500;margin:12px 0;box-shadow:var(--shadow-sm);}
#uq-modal .uq-scene-block{margin-bottom:14px;}
#uq-modal .uq-scene-label{font-size:calc(11px * var(--fs,1));font-weight:800;color:var(--acc-text);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;}
#uq-modal .uq-news-item{background:rgba(15,23,42,.04);border-left:2px solid var(--t3);padding:7px 11px;font-size:calc(12px * var(--fs,1));line-height:1.55;color:var(--t2);border-radius:0 8px 8px 0;margin-bottom:5px;font-style:italic;font-weight:500;}
#uq-modal .uq-data-row{display:flex;justify-content:space-between;background:var(--bg3);border:1px solid var(--bd);border-radius:12px;padding:8px 12px;font-size:calc(12px * var(--fs,1));margin-bottom:5px;font-weight:600;}
#uq-modal .uq-scene-q{font-size:calc(15px * var(--fs,1));font-weight:700;line-height:1.5;margin-bottom:10px;}
#uq-modal .uq-opts{display:flex;flex-direction:column;gap:7px;}
#uq-modal .uq-opt{background:var(--bg2);border:2px solid var(--bd);border-radius:12px;padding:12px 14px;text-align:left;font-size:calc(14px * var(--fs,1));font-weight:600;cursor:pointer;font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;color:var(--t);box-shadow:0 3px 0 var(--bd2);transition:transform .12s ease,box-shadow .12s ease,border-color .15s ease;}
#uq-modal .uq-opt:hover:not(:disabled){border-color:var(--acc);}
#uq-modal .uq-opt:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 var(--bd2);}
#uq-modal .uq-opt:disabled{cursor:not-allowed;}
#uq-modal .uq-opt.best{background:rgba(21,128,61,.10);border-color:var(--green);color:var(--green);box-shadow:0 3px 0 var(--btn-shadow-green);font-weight:800;}
#uq-modal .uq-opt.ok{background:rgba(2,132,199,.08);border-color:var(--teal);color:var(--teal);font-weight:800;}
#uq-modal .uq-opt.bad{background:rgba(220,38,38,.08);border-color:var(--red);color:var(--red);box-shadow:0 3px 0 var(--btn-shadow-red);font-weight:800;}
#uq-modal .uq-feedback{margin-top:14px;background:linear-gradient(180deg,rgba(226,124,31,.10),rgba(226,124,31,.03));border:1.5px solid var(--acc);border-radius:16px;padding:13px 14px;}
#uq-modal .uq-feedback-tier{font-size:calc(14px * var(--fs,1));font-weight:800;color:var(--acc-text);margin-bottom:5px;}
#uq-modal .uq-feedback-exp{font-size:calc(13px * var(--fs,1));color:var(--t);line-height:1.6;font-weight:500;margin-bottom:8px;}
#uq-modal .uq-feedback-foot{font-size:calc(11px * var(--fs,1));color:var(--t3);font-weight:600;margin-bottom:10px;}

/* ── 경제 기상특보 (풀모달 + 상단 팝) ── */
#event-modal{
  position:fixed;inset:0;z-index:10050;
  display:none;pointer-events:none;
}
#event-modal.open{display:block;pointer-events:auto;}
#event-modal .evt-backdrop{
  position:absolute;inset:0;
  background:rgba(8,12,24,.72);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  animation:evtBackdrop .35s ease;
}
@keyframes evtBackdrop{from{opacity:0;}to{opacity:1;}}
/* 기상 이벤트 배경만 더 빠르게 닫히듯 들어온다 — 카드가 터지기 전에 무대를 어둡게 만든다 */
#event-modal .evt-backdrop{animation:arcade-backdrop-punch .34s ease !important;}
#event-modal .evt-card{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:calc(100% - 28px);max-width:400px;max-height:88vh;overflow-y:auto;
  background:var(--bg2);border:2.5px solid var(--bd2);border-radius:24px;
  box-shadow:0 24px 64px rgba(8,12,24,.45),0 4px 0 var(--btn-shadow-acc);
  animation:arcade-pop-drama .62s var(--ease-arcade-step);   /* 34차 — 기상 이벤트는 이 앱의 주인공 팝업 */
  -webkit-overflow-scrolling:touch;
}
#event-modal .evt-hero{
  position:relative;border-radius:24px 22px 0 0;
  padding:24px 22px 20px;color:#fff;overflow:hidden;
  background:linear-gradient(160deg,#1E3A5F,#0F1E33);
}
#event-modal[data-tone="crisis"] .evt-hero{background:linear-gradient(160deg,#7E1D1D,#2A0A0A);}
#event-modal[data-tone="warning"] .evt-hero{background:linear-gradient(160deg,#8F4507,#3A2A08);}
#event-modal[data-tone="opportunity"] .evt-hero{background:linear-gradient(160deg,#0F5E2D,#072A14);}
#event-modal[data-tone="calm"] .evt-hero{background:linear-gradient(160deg,#1E40AF,#0B1F50);}
#event-modal .evt-hero-bg{
  position:absolute;inset:-20% -10%;pointer-events:none;
  background:
    radial-gradient(60% 60% at 80% 20%,rgba(255,255,255,.18),transparent 60%),
    radial-gradient(40% 40% at 20% 80%,rgba(255,255,255,.10),transparent 60%);
  animation:evtHeroPan 14s ease-in-out infinite alternate;
}
@keyframes evtHeroPan{from{transform:translate(-2%,-2%);}to{transform:translate(2%,2%);}}
#event-modal .evt-hero-icon{
  font-size:calc(62px * var(--fs,1));line-height:1;margin-bottom:8px;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.35));
  /* 34차 — 카드가 착지한 뒤 아이콘이 한 박자 늦게 튀어나온다(팔로 스루). 그 다음 떠다니기.
     ⚠ 쉼표 순서를 바꾸지 말 것 — 떠다니기가 팝이 끝난 자리(.72s)에서 시작해야 이어진다. */
  animation:arcade-hero-pop .72s var(--ease-arcade-step), evtIconFloat 3.2s ease-in-out .72s infinite;
}
@keyframes evtIconFloat{0%,100%{transform:translateY(0) rotate(-1deg);}50%{transform:translateY(-5px) rotate(2deg);}}
#event-modal .evt-hero-label{
  font-size:calc(11px * var(--fs,1));font-weight:800;letter-spacing:1.2px;text-transform:uppercase;
  opacity:.85;margin-bottom:4px;display:inline-flex;align-items:center;gap:6px;
}
#event-modal .evt-hero-label::before{
  content:'';width:6px;height:6px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:evtDot 1.4s ease-in-out infinite;
}
@keyframes evtDot{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.7);}50%{box-shadow:0 0 0 10px rgba(255,255,255,0);}}
#event-modal .evt-hero-title{
  font-family:var(--font-hd);font-size:calc(24px * var(--fs,1));line-height:1.2;
  font-weight:700;letter-spacing:-.4px;
}
#event-modal .evt-body{padding:18px 20px 12px;}
#event-modal .evt-section{margin-bottom:14px;}
#event-modal .evt-section:last-child{margin-bottom:6px;}
#event-modal .evt-section-label{
  font-size:calc(11px * var(--fs,1));font-weight:800;color:var(--acc-text);
  text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px;
}
#event-modal .evt-headline{font-size:calc(15px * var(--fs,1));font-weight:700;color:var(--t);margin-bottom:4px;line-height:1.4;}
#event-modal .evt-news{font-size:calc(13px * var(--fs,1));color:var(--t2);line-height:1.65;font-weight:500;}
#event-modal .evt-impact{font-size:calc(13px * var(--fs,1));color:var(--t);line-height:1.6;font-weight:600;background:var(--bg3);border-left:3px solid var(--acc);border-radius:0 10px 10px 0;padding:10px 12px;}
/* 33차 · 내 팀 발전 팝업의 '가상 불황 시나리오' 블록 — 실제 경보와 구분되게 점선 테두리·남색 포인트 */
#event-modal .evt-scenario[hidden]{display:none;}
#event-modal .evt-scn-box{border:1.5px dashed rgba(30,95,187,.45);background:rgba(30,95,187,.06);border-radius:12px;padding:10px 12px;}
#event-modal .evt-scn-title{font-size:calc(14px * var(--fs,1));font-weight:800;color:var(--t);line-height:1.4;margin-bottom:4px;}
#event-modal .evt-scn-body{font-size:calc(13px * var(--fs,1));color:var(--t2);line-height:1.6;font-weight:500;}
:root[data-theme="dark"] #event-modal .evt-scn-box{border-color:rgba(91,155,245,.45);background:rgba(91,155,245,.10);}
#event-modal .evt-actions{display:flex;flex-direction:column;gap:8px;}
#event-modal .evt-action{
  display:flex;align-items:center;gap:11px;text-align:left;width:100%;
  background:var(--bg2);border:2px solid var(--bd);border-radius:16px;
  padding:12px 14px;cursor:pointer;
  font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;
  box-shadow:0 3px 0 var(--bd2);
  transition:transform .12s ease,box-shadow .12s ease,border-color .15s ease,background .15s ease;
}
#event-modal .evt-action:hover{border-color:var(--acc);}
#event-modal .evt-action:active{transform:translateY(2px);box-shadow:0 1px 0 var(--bd2);}
#event-modal .evt-action:first-child{
  background:var(--acc);color:var(--on-acc);border-color:var(--acc);
  box-shadow:0 4px 0 var(--btn-shadow-acc),0 6px 14px rgba(226,124,31,.28);
}
#event-modal .evt-action:first-child:active{box-shadow:0 1px 0 var(--btn-shadow-acc);}
#event-modal .evt-action-emoji{font-size:calc(22px * var(--fs,1));flex-shrink:0;width:32px;text-align:center;}
#event-modal .evt-action-body{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0;}
#event-modal .evt-action-label{font-size:calc(14px * var(--fs,1));font-weight:800;letter-spacing:.1px;}
#event-modal .evt-action-sub{font-size:calc(11px * var(--fs,1));font-weight:500;opacity:.78;}
#event-modal .evt-action-arrow{font-size:calc(16px * var(--fs,1));font-weight:800;opacity:.7;flex-shrink:0;}
#event-modal .evt-snooze{
  display:block;margin:6px auto 16px;background:transparent;border:none;
  color:var(--t3);font-size:calc(12px * var(--fs,1));font-weight:600;letter-spacing:.2px;
  cursor:pointer;padding:8px 14px;text-decoration:underline;text-underline-offset:3px;
  font-family:'Schibsted Grotesk','Pretendard Variable','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;
}
#event-modal .evt-snooze:hover{color:var(--t2);}

/* ── 상단 팝 알림 ── */
.event-pop{
  position:fixed;top:calc(var(--st) + 8px);left:50%;transform:translate(-50%,-140%);
  /* z-index 9980 — 모달·바텀시트(9990~)보다 **아래**. 예전 10040 은 모든 모달 위여서
     개념 학습 모달의 닫기(×)·더보기 시트까지 이 알림이 덮었다(33차 UI 점검). 알림은
     페이지 크롬(상단바 2 · HUD 60)보다만 위에 있으면 된다 */
  width:calc(100% - 24px);max-width:412px;z-index:9980;
  display:flex;align-items:center;gap:11px;
  background:var(--bg2);border:2px solid var(--acc);
  border-radius:16px;padding:11px 14px;cursor:pointer;
  box-shadow:0 4px 0 var(--btn-shadow-acc),0 14px 32px rgba(15,23,42,.22);
  transition:transform .42s var(--ease-soft),opacity .25s ease;
  opacity:0;pointer-events:none;
}
.event-pop.show{transform:translate(-50%,0);opacity:1;pointer-events:auto;
  /* 34차 — 위에서 떨어져 한 번 통 튄 뒤, 1.6초 뒤 흔들어 한 번 더 시선을 끈다 */
  animation:arcade-drop-down .5s var(--ease-arcade-step), evtPopWobble .8s ease 1.6s;}
@keyframes evtPopWobble{0%,100%{transform:translate(-50%,0) rotate(0);}25%{transform:translate(-50%,0) rotate(-.6deg);}75%{transform:translate(-50%,0) rotate(.6deg);}}
.event-pop[data-tone="crisis"]{border-color:var(--red);box-shadow:0 4px 0 var(--btn-shadow-red),0 14px 32px rgba(220,38,38,.28);}
.event-pop[data-tone="warning"]{border-color:var(--acc);box-shadow:0 4px 0 var(--btn-shadow-acc),0 14px 32px rgba(226,124,31,.28);}
.event-pop[data-tone="opportunity"]{border-color:var(--green);box-shadow:0 4px 0 var(--btn-shadow-green),0 14px 32px rgba(21,128,61,.28);}
.event-pop-icon{font-size:calc(26px * var(--fs,1));flex-shrink:0;animation:evtIconFloat 3s ease-in-out infinite;}
.event-pop-body{flex:1;min-width:0;}
.event-pop-title{font-size:calc(13px * var(--fs,1));font-weight:800;color:var(--t);letter-spacing:.1px;line-height:1.3;}
.event-pop-sub{font-size:calc(11px * var(--fs,1));color:var(--t2);font-weight:500;margin-top:2px;line-height:1.4;}
.event-pop-close{
  background:transparent;border:none;color:var(--t3);font-size:calc(18px * var(--fs,1));line-height:1;
  cursor:pointer;padding:0;font-weight:700;flex-shrink:0;border-radius:50%;
  /* 터치 타깃 36px — 시각 크기는 그대로 두고 음수 마진으로 알림 높이를 늘리지 않는다 */
  width:36px;height:36px;margin:-8px -10px -8px -4px;
  display:flex;align-items:center;justify-content:center;
}
.event-pop-close:hover{background:var(--bg3);color:var(--t);}
@media (prefers-reduced-motion:reduce){
  #event-modal .evt-card,#event-modal .evt-backdrop,#event-modal .evt-hero-icon,.event-pop{animation:none!important;}
}