/* ===== 디자인 토큰 이름표 (CHART1 차트 화면도 같이 씀 — 값은 아래 body.x10 / body.x10[data-theme="light"]) =====
   바탕 --x-bg · 카드 --x-card · 카드2 --x-card2 · 카드 그라데이션 --x-card-grad · 글 --x-text · 흐린 글 --x-muted · 더 흐린 글 --x-faint · 선 --x-line
   강조(호박색) --x-accent · 강조 위 글 --x-accent-ink · 오름(빨강) --x-up · 내림(파랑) --x-down · 트랙/막대 바닥 --x-track · 테두리 빛 --x-rim
   그림자 --x-sh-1 · --x-sh-2 · 모서리 --r-sm(10) --r-md(12) --r-lg(12) · 글자 --fs-1(14) … --fs-11(38)
   예전 이름(style.css 와 같은 이름, body.x10 이면 같은 값으로 덮음): --bg --bg2 --bg3 --line --fg --fg2 --fg3 --up --dn --accent --chart-bg --chart-grid
   테마 = body[data-theme="dark"|"light"] (app.js 「화면 밝게」 단추가 바꿈) */
/* UX10 2026-10-13 (진석 14:5x 「UI/UX가 전체적으로 ㅂㅅ 같다. 다른 세션 mazip UI/UX 참고해서 수정해라」)
   mazip 화면(D:\mazip\app\web\service.css · dz.css)의 색·글꼴·간격·모서리·그림자를 가져온 '모양 층'.
   style.css 는 그대로 두고 body.x10 일 때만 덮어쓴다(이 파일·ux10.js 를 빼면 예전 화면).
   글·숫자·id·기존 스크립트는 안 바꿈 — 새 머리줄·아래 탭 3개·결과·성적 화면만 더함(ux10.js). */

/* ---------- 색 — UX10-B 2026-10-13 15:1x 진석 「완전 똑같이 하지 말고 좀 다르게, 조금 변형」 → 코디네이터 결정:
   짙은 남색 바탕 + 호박색(앰버) 강조 · 오름 빨강/내림 파랑 그대로 · 모서리 12px (어둡게 = 기본, 밝게 = body[data-theme="light"]) ---------- */
body.x10{
  --x-bg:#0A1120; --x-card:#121B2D; --x-card2:#192439; --x-text:#F3F5FA; --x-muted:#B9C2D4; --x-faint:#8E9AB2; --x-line:#24304A;
  --x-accent:#F5B83D; --x-accent-ink:#1A1204; --x-up:#FF6B6B; --x-down:#6EA8FF; --x-ok:#F5B83D; --x-ok-bg:rgba(245,184,61,.14); --x-bad:#FF8A80; --x-warn:#FFD166; --x-warn-bg:#3A2E0C;
  --x-neutral-bg:#1F2940; --x-track:#1C2740;
  --x-glass-tab:rgba(13,20,36,.94);
  --x-card-grad:linear-gradient(180deg,#141E32 0%,#101827 100%); --x-rim:rgba(255,255,255,.07); --x-hi:rgba(255,255,255,.05);
  --x-sh-1:0 0 0 1px rgba(255,255,255,.05); --x-sh-2:0 1px 0 rgba(255,255,255,.04) inset,0 14px 30px -16px rgba(0,0,0,.9);
  --x-glow:rgba(245,184,61,.10);
  --fs-1:14px; --fs-2:15px; --fs-3:17px; --fs-4:17px; --fs-5:19px; --fs-6:20px; --fs-7:22px; --fs-8:25px; --fs-9:30px; --fs-10:34px; --fs-11:38px;
  --fs-big:40px; --fs-dn:38px; --fs-dns:19px; --fs-tag:13px;
  --r-sm:10px; --r-md:12px; --r-lg:12px;
  /* 예전 화면 토큰도 같은 색으로(예전 칸이 새 화면과 어울리게 — 칸 구조는 그대로) */
  --bg:#0A1120; --bg2:#121B2D; --bg3:#192439; --line:#24304A;
  --fg:#F3F5FA; --fg2:#B9C2D4; --fg3:#8E9AB2;
  --hot:#FF6B6B; --up:#FF6B6B; --dn:#6EA8FF; --accent:#F5B83D; --sel:#22304D;
  --chart-bg:#121B2D; --chart-grid:#1E2940;
  --uxd-c1:#141E32; --uxd-c2:#101827; --uxd-edge:rgba(255,255,255,.07); --uxd-hi:rgba(255,255,255,.05);
  --uxd-sh:0 1px 0 rgba(255,255,255,.04) inset,0 14px 30px -16px rgba(0,0,0,.9);
  --uxd-b1:#1C2740; --uxd-b2:#152036;
  color-scheme:dark;
}
body.x10[data-theme="light"]{
  --x-bg:#F2F4F8; --x-card:#FFFFFF; --x-card2:#F6F7FA; --x-text:#121826; --x-muted:#4A5468; --x-faint:#5E6880; --x-line:#E3E7EE;
  --x-accent:#B87A00; --x-accent-ink:#FFFFFF; --x-up:#E5383B; --x-down:#2F6BEB; --x-ok:#B87A00; --x-ok-bg:rgba(184,122,0,.10); --x-bad:#C2292E; --x-warn:#8A5A00; --x-warn-bg:#FFF5DA;
  --x-neutral-bg:#EDF0F5; --x-track:#E6EAF1;
  --x-glass-tab:rgba(255,255,255,.94);
  --x-card-grad:linear-gradient(180deg,#FFFFFF 0%,#FBFBFD 100%); --x-rim:rgba(17,24,39,.08); --x-hi:rgba(255,255,255,.9);
  --x-sh-1:0 1px 2px rgba(17,24,39,.06),0 2px 6px -2px rgba(17,24,39,.06); --x-sh-2:0 1px 2px rgba(17,24,39,.05),0 12px 28px -14px rgba(17,24,39,.22);
  --x-glow:rgba(184,122,0,.06);
  --bg:#F2F4F8; --bg2:#FFFFFF; --bg3:#EEF1F6; --line:#E3E7EE;
  --fg:#121826; --fg2:#4A5468; --fg3:#5E6880;
  --hot:#E5383B; --up:#E5383B; --dn:#2F6BEB; --accent:#B87A00; --sel:#FFF4DC;
  --chart-bg:#FFFFFF; --chart-grid:#ECEFF3;
  --uxd-c1:#FFFFFF; --uxd-c2:#FBFBFD; --uxd-edge:rgba(17,24,39,.08); --uxd-hi:rgba(255,255,255,.9);
  --uxd-sh:0 1px 2px rgba(17,24,39,.05),0 12px 28px -14px rgba(17,24,39,.22);
  --uxd-b1:#FFFFFF; --uxd-b2:#F3F5F8;
  color-scheme:light;
}

/* ---------- 바탕 · 글꼴 ---------- */
body.x10{
  background:radial-gradient(130% 55% at 50% -12%, var(--x-glow), transparent 62%), var(--x-bg) !important;
  background-attachment:fixed !important;
  color:var(--x-text);
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","맑은 고딕","Noto Sans KR",sans-serif;
  letter-spacing:-0.01em; -webkit-font-smoothing:antialiased; word-break:keep-all;
  padding-bottom:calc(84px + env(safe-area-inset-bottom, 0px));   /* = 아래 탭 64px(.x10-tabbar min-height · 실측 64) + 띄움 20px + 폰 안전 여백(탭도 같은 값만큼 커짐) */
  /* FIXA2 2026-10-19 ②: style.css 19줄 html,body{height:100%} 때문에 body 가 화면 높이(844)로 고정 → 글이 body 밖으로 넘쳐 위 아래 여백(84px)이 글 뒤가 아니라
     화면 첫 높이 끝에 붙음 → 맨 아래로 내려도 「정보 제공용 (i)」(top 815·bottom 837)가 탭(top 780) 밑에 가림. body 가 글 길이만큼 늘게 함(짧은 화면은 화면 높이 그대로) */
  height:auto !important; min-height:100%;
}
body.x10 .x10-skip, body.x10 .x10-skip *{font-family:inherit}

/* ---------- 맨 위 막대 (mazip topbar: 반투명 · 오른쪽 아이콘 단추) ---------- */
body.x10 .topbar{background:color-mix(in srgb, var(--x-bg) 62%, transparent) !important; -webkit-backdrop-filter:saturate(1.6) blur(14px); backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:0 !important; box-shadow:none !important; min-height:56px; padding:4px 6px 4px 14px !important; gap:8px !important; flex-wrap:nowrap !important; align-items:center}
body.x10 .topbar .tb-right{gap:2px !important; margin-left:auto; flex:0 0 auto}
body.x10 .topbar #tbConn, body.x10 .topbar #tbMock{display:none !important}
body.x10 .x10-ib{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:0; border-radius:999px; background:transparent;
  color:var(--x-text); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform .18s cubic-bezier(.2,.8,.2,1)}
body.x10 .x10-ib:hover{background:var(--x-card)}
body.x10 .x10-ib:active{transform:scale(.9)}
body.x10 .x10-ib svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
body.x10 .x10-ib[hidden]{display:none !important}
/* 화면 밝게 단추 = 해 아이콘(누르는 일은 app.js 그대로) */
body.x10 #btnTheme{font-size:0 !important; width:44px; height:44px; padding:0 !important; border:0 !important; border-radius:999px; background:transparent !important; color:var(--x-text) !important;
  display:inline-flex; align-items:center; justify-content:center; box-shadow:none !important}
body.x10 #btnTheme::before{content:""; width:24px; height:24px; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E") center/contain no-repeat}
body.x10 #btnTheme:active{transform:scale(.9)}
/* 상세 화면: 왼쪽 = ‹ 이름(뒤로) · 첫 화면: 왼쪽 = 상태 알약(예전 줄 그대로) */
body.x10 .x10-back{display:none; align-items:center; gap:4px; min-width:0; flex:1 1 auto; padding:0; border:0; background:transparent; color:var(--x-text); cursor:pointer;
  font:inherit; font-size:var(--fs-6); font-weight:700; letter-spacing:-.02em; text-align:left; -webkit-tap-highlight-color:transparent}
body.x10 .x10-back svg{flex:0 0 auto; width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
body.x10 .x10-back span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
body.x10 .x10-ttl{display:none; flex:1 1 auto; min-width:0; font-size:var(--fs-6); font-weight:700; letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
body.x10.x10-sub .x10-back{display:flex}
body.x10.x10-tabv .x10-ttl{display:block}
body.x10.x10-sub .topbar .uxr-st, body.x10.x10-tabv .topbar .uxr-st{display:none !important}
body.x10 .topbar .uxr-st{flex:0 1 auto; min-width:0}
/* 예전 탭 줄 = 숨김(지우지 않음 — 관리자 화면은 톱니 단추 안 목록이 같은 탭 단추를 누름) */
body.x10 nav.tabs{display:none !important}

/* ---------- 아래 고정 탭 3개 (mazip tabbar) ---------- */
.x10-tabbar{display:none}
body.x10 .x10-tabbar{display:grid; grid-template-columns:repeat(4,1fr); position:fixed; left:0; right:0; bottom:0; z-index:60; min-height:64px;
  padding-bottom:env(safe-area-inset-bottom, 0px); background:var(--x-glass-tab); border-top:1px solid var(--x-rim); box-shadow:0 -10px 30px -22px rgba(0,0,0,.5);
  -webkit-backdrop-filter:saturate(1.6) blur(16px); backdrop-filter:saturate(1.6) blur(16px)}
body.x10 .x10-tab{display:flex; align-items:center; justify-content:center; min-height:62px; padding:0; border:0; background:transparent; cursor:pointer;
  font:inherit; color:var(--x-faint); -webkit-tap-highlight-color:transparent}
body.x10 .x10-tab > span{display:flex; flex-direction:column; align-items:center; gap:2px; min-width:64px; padding:6px 10px 5px; border-radius:999px; font-size:var(--fs-1);
  transition:background-color .2s, color .2s}
body.x10 .x10-tab svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
body.x10 .x10-tab[aria-current="page"]{color:var(--x-text); font-weight:800}
body.x10 .x10-tab[aria-current="page"] > span{background:color-mix(in srgb, var(--x-accent) 20%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--x-accent) 45%, transparent); color:var(--x-text)}
body.x10 .x10-tab[aria-current="page"] svg{stroke:var(--x-accent); stroke-width:2.4; animation:x10pop .45s cubic-bezier(.3,1.6,.5,1)}
@media (min-width:760px){ body.x10 .x10-tabbar{left:50%; right:auto; width:520px; transform:translateX(-50%); border-radius:12px 12px 0 0; border:1px solid var(--x-rim); border-bottom:0} }
@keyframes x10pop{0%{transform:scale(.6)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes x10rise{from{opacity:0; transform:translateY(14px)}}

/* ---------- 첫 화면 머리 (날짜 한 줄 · 큰 제목 · 처음이세요?) ---------- */
.x10-head{display:none}
body.x10.h2-cards:not(.x10-tabv) #page-home.on .x10-head{display:block}
body.x10 .x10-head{max-width:880px; margin:0 auto; padding:6px 16px 2px; box-sizing:border-box}
body.x10 .x10-date{font-size:var(--fs-2); color:var(--x-muted)}
body.x10 .x10-hrow{display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin-top:2px}
body.x10 .x10-title{margin:0; font-size:var(--fs-11); font-weight:900; letter-spacing:-.045em; line-height:1.25; color:var(--x-text)}
body.x10 .x10-intro{flex:0 0 auto; font:inherit; font-size:var(--fs-2); font-weight:700; min-height:40px; padding:0 14px; border:0; border-radius:var(--r-md); cursor:pointer;
  background:var(--x-card); color:var(--x-text); box-shadow:inset 0 0 0 1px var(--x-rim), var(--x-sh-1); white-space:nowrap; margin-bottom:4px}
body.x10 .x10-intro:active{transform:scale(.96)}
@media (max-width:340px){ body.x10 .x10-title{font-size:var(--fs-9)} }

/* ---------- 첫 화면 카드 — UX10-B 변형: 어두운 카드 + 왼쪽 세로 색 띠 + 아이콘 원 · 맨 위 9시 경주마 = 전체 폭 큰 카드(오늘의 주인공) · 나머지 2열 ---------- */
body.x10.h2-on #page-home .h2-grid-wrap{display:none !important}
.x10-grid{display:none}
body.x10.h2-cards #page-home .x10-grid{display:grid}
body.x10 .x10-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; max-width:880px; margin:16px auto 0; padding:0 16px; box-sizing:border-box}
@media (min-width:760px){ body.x10 .x10-grid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px} }
body.x10 .x10-hb{--c:#F5B83D; position:relative; overflow:hidden; display:flex; flex-direction:column; gap:2px; min-width:0; min-height:184px;
  padding:16px 14px 15px 20px; border-radius:var(--r-lg); color:var(--x-text); text-decoration:none; cursor:pointer; -webkit-tap-highlight-color:transparent;
  background:var(--x-card-grad); box-shadow:inset 5px 0 0 var(--c), inset 0 0 0 1px var(--x-rim), var(--x-sh-2);
  transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s; animation:x10rise .5s cubic-bezier(.2,.8,.2,1) backwards; animation-delay:calc(var(--i,0) * 50ms)}
body.x10 .x10-hb:hover{box-shadow:inset 5px 0 0 var(--c), inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, var(--x-rim)), var(--x-sh-2)}
body.x10 .x10-hb:active{transform:scale(.97)}
body.x10 .x10-hb[hidden]{display:none}
body.x10 .x10-hb:visited, body.x10 .x10-hb:hover{color:var(--x-text); text-decoration:none}
body.x10 .x10-ic{width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:12px; flex:0 0 auto;
  background:color-mix(in srgb, var(--c) 18%, transparent); box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--c) 60%, transparent)}
body.x10 .x10-ic svg{width:24px; height:24px; fill:none; stroke:var(--c); stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round}
body.x10 .x10-nm{font-size:var(--fs-6); font-weight:800; letter-spacing:-.03em; line-height:1.3}
body.x10 .x10-d{font-size:var(--fs-2); color:var(--x-muted); line-height:1.4; text-wrap:balance}
body.x10 .x10-v{font-size:var(--fs-3); font-weight:700; line-height:1.35; padding-top:12px; margin-top:auto; overflow-wrap:anywhere}
body.x10 .x10-hb .x10-nm, body.x10 .x10-hb .x10-v{color:var(--x-text) !important}
body.x10 .x10-hb .x10-d, body.x10 .x10-hb .x10-v2{color:var(--x-muted) !important}
body.x10 .x10-hb .up{color:var(--x-up) !important} body.x10 .x10-hb .dn{color:var(--x-down) !important}
body.x10 .x10-v2{font-size:var(--fs-2); color:var(--x-muted); margin-top:2px; overflow-wrap:anywhere}
body.x10 .x10-v2:empty{display:none}
/* 주인공 카드(9시 경주마): 전체 폭 · 아이콘 왼쪽 · 큰 사실 · 아래 경주 트랙 */
body.x10 .x10-hb.x10-hero{grid-column:1 / -1; min-height:0; padding:18px 16px 16px 22px;
  background:radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--c) 16%, transparent), transparent 60%), var(--x-card-grad)}
body.x10 .x10-hero .x10-hr{display:flex; align-items:center; gap:14px; min-width:0}
body.x10 .x10-hero .x10-ic{width:56px; height:56px; margin:0}
body.x10 .x10-hero .x10-ic svg{width:28px; height:28px}
body.x10 .x10-hero .x10-nm{font-size:var(--fs-8); font-weight:900}
body.x10 .x10-hero .x10-v{font-size:var(--fs-7); font-weight:800; padding-top:14px}
body.x10 .x10-hero .x10-trk{margin-top:14px}
body.x10 .x10-new{position:absolute; top:14px; right:12px; font-size:var(--fs-tag); font-weight:800; color:var(--x-accent-ink); background:var(--x-accent); border-radius:999px; padding:2px 9px}
body.x10 .x10-hb.x10-hot{box-shadow:inset 5px 0 0 var(--c), inset 0 0 0 2px var(--x-accent), var(--x-sh-2)}
@media (max-width:360px){ body.x10 .x10-hb{padding:15px 12px 14px 17px} body.x10 .x10-nm{font-size:var(--fs-5)} body.x10 .x10-ic{width:42px; height:42px} }
body.x10 .x10-legal{max-width:880px; margin:26px auto 8px; padding:0 16px; box-sizing:border-box; text-align:center; font-size:var(--fs-1); color:var(--x-muted)}
/* 첫 화면의 예전 「그 밖의 칸」 안내 · 카드 바로 아래 예전 머리 줄은 숨김(지우지 않음) */
body.x10.h2-cards #page-home .h2-more{display:none !important}
body.x10.h2-on #page-home .h2-back{display:none !important}

/* ---------- 상세 화면 머리 (mazip: 파란 안내 상자 한 줄 → 큰 숫자 → (9시) 진행 막대) ---------- */
.x10-dh{display:none}
body.x10.h2-detail:not(.x10-tabv) #page-home.on .x10-dh{display:block}
body.x10 .x10-dh{max-width:880px; margin:0 auto; padding:4px 16px 0; box-sizing:border-box}
body.x10 .x10-band{padding:14px 16px; border-radius:var(--r-md); background:var(--x-card2); box-shadow:inset 4px 0 0 var(--x-accent), inset 0 0 0 1px var(--x-rim);
  font-size:var(--fs-3); line-height:1.45; color:var(--x-text)}
body.x10 .x10-sec{display:flex; align-items:center; justify-content:space-between; gap:8px; margin:24px 2px 12px}
body.x10 .x10-sec .x10-sl{display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 8px; min-width:0; padding-left:10px; box-shadow:inset 4px 0 0 var(--x-accent)}
body.x10 .x10-sec b{font-size:var(--fs-9); font-weight:800; letter-spacing:-.035em; line-height:1.2}
body.x10 .x10-sec b{color:var(--x-text) !important} body.x10 .x10-sec b.up{color:var(--x-up) !important} body.x10 .x10-sec b.dn{color:var(--x-down) !important}
body.x10 .x10-sec small{font-size:var(--fs-2); color:var(--x-muted)}
body.x10 .x10-q{position:relative; width:30px; height:30px; flex:0 0 auto; border-radius:50%; border:0; padding:0; cursor:pointer; font:inherit; font-size:var(--fs-2); font-weight:700;
  background:var(--x-card2); color:var(--x-text); box-shadow:inset 0 0 0 1px var(--x-rim); display:inline-flex; align-items:center; justify-content:center}
body.x10 .x10-q::after{content:""; position:absolute; inset:-7px}
body.x10 .x10-box{border-radius:var(--r-lg); background:var(--x-card-grad); box-shadow:inset 0 0 0 1px var(--x-rim), var(--x-sh-2); padding:18px 16px}
/* 경주 트랙(UX10-B 시그니처): 말이 「고름 → 결과」 트랙 위를 달림 · 다 달리면 결승 칸이 호박색 */
body.x10 .x10-trk{position:relative}
body.x10 .x10-tr{position:relative; height:34px; margin:0 2px; border-radius:var(--r-md); overflow:hidden;
  background:repeating-linear-gradient(90deg, transparent 0 18px, color-mix(in srgb, var(--x-text) 12%, transparent) 18px 26px) center/100% 2px no-repeat, var(--x-track);
  box-shadow:inset 0 0 0 1px var(--x-rim)}
body.x10 .x10-tr em{position:absolute; left:0; top:0; bottom:0; background:linear-gradient(90deg, color-mix(in srgb, var(--x-accent) 8%, transparent), color-mix(in srgb, var(--x-accent) 40%, transparent));
  transition:width .8s cubic-bezier(.2,.8,.2,1)}
body.x10 .x10-tr i{position:absolute; right:0; top:0; bottom:0; width:12px;
  background:repeating-conic-gradient(var(--x-text) 0 25%, transparent 0 50%) 0 0/6px 6px; opacity:.5}
body.x10 .x10-tr.done i{opacity:1; background:repeating-conic-gradient(var(--x-accent) 0 25%, transparent 0 50%) 0 0/6px 6px}
body.x10 .x10-tr b{position:absolute; top:50%; transform:translate(-50%,-52%) scaleX(-1); font-size:var(--fs-7); line-height:1; font-weight:400;
  transition:left .8s cubic-bezier(.2,.8,.2,1); filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))}
body.x10 .x10-tl{display:flex; justify-content:space-between; gap:10px; margin-top:8px; font-size:var(--fs-2); color:var(--x-muted)}
body.x10 .x10-tl b{display:block; font-size:var(--fs-3); color:var(--x-text); font-weight:700}
body.x10 .x10-tl > :last-child{text-align:right}
body.x10 .x10-tl .now{color:var(--x-accent)}
/* ---------- 9시 칸(#pePanel · picks_embed 그림 그대로)을 mazip 줄 목록 모양으로 ---------- */
body.x10.h2-c-nine #page-home #pePanel{border-radius:var(--r-lg) !important; background:var(--x-card-grad) !important; border:0 !important;
  box-shadow:inset 0 0 0 1px var(--x-rim), var(--x-sh-2) !important; padding:16px 14px 16px !important}
body.x10.h2-c-nine #pePanel .pk9-h{display:none !important}   /* 제목·날짜·개수는 위 머리(큰 숫자)에 · (i) 는 위 「?」 단추가 대신 누름 */
body.x10.h2-c-nine #pePanel .pk9-s{display:block; margin:0 0 8px !important; font-size:var(--fs-3) !important; font-weight:700 !important}
body.x10.h2-c-nine #pePanel .pk9-s::before{content:""; display:inline-block; vertical-align:1px; margin-right:8px; width:12px; height:12px; border-radius:50%; background:var(--x-ok)}
body.x10.h2-c-nine #pePanel .pk9-s.pk9-w::before{background:var(--x-faint)}
body.x10.h2-c-nine #pePanel .pk9-s small{display:block !important; margin:2px 0 0 20px !important; font-size:var(--fs-1) !important; font-weight:400 !important}
body.x10.h2-c-nine #pePanel .pk9-list{gap:0 !important}
body.x10 #pePanel .pk9-row{display:grid !important; grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"lg n1 now" "lg n2 now" "lg bt bt";
  column-gap:12px; row-gap:2px; align-items:center; padding:14px 6px 14px 12px !important; border-radius:2px !important; background:transparent !important;
  border:0 !important; box-shadow:inset 4px 0 0 var(--x-line) !important}
body.x10 #pePanel .pk9-row.pk9-hit{box-shadow:inset 4px 0 0 var(--x-up) !important}
body.x10 #pePanel .pk9-it + .pk9-it{border-top:1px solid var(--x-line)}
body.x10 #pePanel .pk9-row > .u3d-logo{grid-area:lg; width:46px !important; height:46px !important; font-size:var(--fs-2) !important}
body.x10 #pePanel .pk9-nm, body.x10 #pePanel .pk9-n2{display:contents !important}
body.x10 #pePanel .pk9-n1{grid-area:n1}
body.x10 #pePanel .pk9-n1 b{font-size:var(--fs-5) !important; letter-spacing:-.02em}
body.x10 #pePanel .pk9-n1 small{font-size:var(--fs-2) !important}
body.x10 #pePanel .pk9-c{grid-area:n2; justify-self:start; font-size:var(--fs-1) !important; line-height:1.7 !important; padding:0 10px !important; border:0 !important}
body.x10 #pePanel .pk9-c.hit{background:color-mix(in srgb, var(--x-up) 16%, transparent) !important}
body.x10 #pePanel .pk9-now{grid-area:now; display:flex; flex-direction:column; align-items:flex-end; text-align:right; font-size:var(--fs-2) !important; color:var(--x-muted); line-height:1.25}
body.x10 #pePanel .pk9-now b{font-size:var(--fs-7) !important; font-weight:800 !important; letter-spacing:-.02em}
body.x10 #pePanel .pk9-bt{grid-area:bt; justify-content:flex-start; margin-top:6px}
body.x10 #pePanel .pk9-bt a.ub-btn{flex-direction:row !important; width:auto !important; min-height:34px !important; padding:0 12px !important; gap:5px !important; font-size:var(--fs-1) !important;
  border-radius:999px !important; background:var(--x-card2) !important; border:0 !important; box-shadow:inset 0 0 0 1px var(--x-rim) !important}
body.x10 #pePanel .pk9-bt a.ub-btn .ub-lab{font-size:var(--fs-1) !important}
body.x10 #pePanel .pk9-bt a.ub-btn svg{order:0 !important}
body.x10 #pePanel .pk9-more{position:absolute; right:6px; bottom:16px}
body.x10 #pePanel .pk9-row.pk9-tap{position:relative}
body.x10 #pePanel .pk9-wk{margin:14px 2px 0 !important; padding-top:12px; border-top:1px solid var(--x-line); font-size:var(--fs-2) !important}
body.x10 #pePanel .pk9-wk a{color:var(--x-accent) !important; font-weight:600; text-decoration:none}

/* ---------- 결과 · 성적 화면 ---------- */
.x10-view{display:none}
body.x10.x10-v-res #x10Res, body.x10.x10-v-perf #x10Perf{display:block}
body.x10.x10-tabv section.page{display:none !important}
body.x10.x10-tabv .x10-head, body.x10.x10-tabv .x10-dh{display:none !important}
body.x10 .x10-view{max-width:560px; margin:0 auto; padding:4px 16px 0; box-sizing:border-box}
body.x10 .x10-view > *{animation:x10rise .5s cubic-bezier(.2,.8,.2,1) backwards}
body.x10 .x10-dn{display:flex; align-items:center; justify-content:space-between; gap:8px; margin:6px 0 14px}
body.x10 .x10-dn button{min-width:84px; height:48px; padding:0 14px; border:0; border-radius:var(--r-md); cursor:pointer; font:inherit; font-size:var(--fs-3); font-weight:700;
  color:var(--x-text); background:var(--x-card); box-shadow:inset 0 0 0 1px var(--x-rim)}
body.x10 .x10-dn button:disabled{opacity:.35; cursor:default}
body.x10 .x10-dn .x10-dc{text-align:center; min-width:0}
body.x10 .x10-dn .x10-dc b{display:block; font-size:var(--fs-6); font-weight:800}
body.x10 .x10-dn .x10-dc span{font-size:var(--fs-2); color:var(--x-muted)}
body.x10 .x10-sum{display:flex; gap:20px; align-items:center; border-radius:var(--r-lg); padding:24px 18px 20px;
  background:radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--x-accent) 14%, transparent), transparent 60%), var(--x-card-grad);
  box-shadow:inset 5px 0 0 var(--x-accent), inset 0 0 0 1px var(--x-rim), var(--x-sh-2)}
body.x10 .x10-sum.zero{background:var(--x-card-grad); box-shadow:inset 0 0 0 1px var(--x-rim), var(--x-sh-2)}
body.x10 .x10-donut{position:relative; width:112px; height:112px; flex:0 0 auto}
body.x10 .x10-donut svg{width:112px; height:112px; transform:rotate(-90deg)}
body.x10 .x10-donut circle{fill:none; stroke-width:13}
body.x10 .x10-donut .bg{stroke:var(--x-track)}
body.x10 .x10-donut .fg{stroke:var(--x-ok); stroke-linecap:round; transition:stroke-dasharray .8s ease}
body.x10 .x10-donut .t{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:var(--fs-dn); font-weight:800; letter-spacing:-.04em}
body.x10 .x10-donut .t small{font-size:var(--fs-dns); color:var(--x-muted); font-weight:700}
body.x10 .x10-bub{position:absolute; top:-12px; right:-16px; padding:3px 9px; border-radius:10px 10px 10px 2px; background:var(--x-accent); color:var(--x-accent-ink);
  font-size:var(--fs-tag); font-weight:800; white-space:nowrap; box-shadow:0 6px 12px -6px rgba(0,0,0,.6)}
body.x10 .x10-bub:empty{display:none}
body.x10 .x10-sw{min-width:0}
body.x10 .x10-sw b{display:block; font-size:var(--fs-7); font-weight:800; line-height:1.3; letter-spacing:-.03em}
body.x10 .x10-sw .g{color:var(--x-ok); font-weight:700; font-size:var(--fs-2); margin-top:6px}
body.x10 .x10-sw .m{color:var(--x-muted); font-size:var(--fs-2); margin-top:2px}
body.x10 .x10-list{margin-top:14px; padding:4px 16px}
body.x10 .x10-it{display:flex; align-items:center; gap:12px; padding:14px 0}
body.x10 .x10-it + .x10-it{border-top:1px solid var(--x-line)}
body.x10 .x10-ck{width:42px; height:42px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:var(--x-ok-bg); box-shadow:inset 0 0 0 1.5px var(--x-ok)}
body.x10 .x10-ck svg{width:22px; height:22px; fill:none; stroke:var(--x-ok); stroke-width:3; stroke-linecap:round; stroke-linejoin:round}
body.x10 .x10-ck.x{background:var(--x-neutral-bg); box-shadow:none} body.x10 .x10-ck.x svg{stroke:var(--x-muted)}
body.x10 .x10-im{flex:1 1 auto; min-width:0}
body.x10 .x10-im .n{font-size:var(--fs-4); font-weight:800; letter-spacing:-.02em; overflow-wrap:anywhere}
body.x10 .x10-im .n small{font-size:var(--fs-2); font-weight:400; color:var(--x-muted); margin-left:5px}
body.x10 .x10-im .s{font-size:var(--fs-2); color:var(--x-muted)}
body.x10 .x10-ir{flex:0 0 auto; text-align:right}
body.x10 .x10-ir span{display:block; font-size:var(--fs-2); color:var(--x-muted)}
body.x10 .x10-ir b{font-size:var(--fs-7); font-weight:800; letter-spacing:-.02em}
body.x10 .x10-ir b.up{color:var(--x-up)} body.x10 .x10-ir b.dn{color:var(--x-down)}
body.x10 .x10-empty{padding:26px 16px; text-align:center; color:var(--x-muted); font-size:var(--fs-3)}
body.x10 .x10-tip{margin:12px 4px 0; font-size:var(--fs-2); color:var(--x-muted); line-height:1.5}
body.x10 .x10-tip a{color:var(--x-accent); font-weight:600; text-decoration:none}
body.x10 .x10-cap{display:flex; align-items:center; justify-content:space-between; gap:8px; margin:22px 4px 12px; font-size:var(--fs-3); font-weight:700; color:var(--x-muted)}
body.x10 .x10-pc{padding:18px 16px}
body.x10 .x10-pc + .x10-pc{border-top:1px solid var(--x-line)}
body.x10 .x10-pc.hl{border-radius:var(--r-md); background:linear-gradient(155deg, color-mix(in srgb, var(--x-accent) 12%, transparent), transparent 75%); box-shadow:inset 4px 0 0 var(--x-accent), inset 0 0 0 1px var(--x-rim)}
body.x10 .x10-pr{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
body.x10 .x10-pr .l{min-width:0}
body.x10 .x10-pr .l b{display:block; font-size:var(--fs-5); font-weight:800; letter-spacing:-.02em}
body.x10 .x10-pr .l span{font-size:var(--fs-2); color:var(--x-muted)}
body.x10 .x10-pr .r{text-align:right; flex:0 0 auto}
body.x10 .x10-pr .r b{display:block; font-size:var(--fs-big); font-weight:800; letter-spacing:-.04em; line-height:1.1; color:var(--x-ok)}
body.x10 .x10-pr .r b small{font-size:var(--fs-6)}
body.x10 .x10-pr .r b.na{font-size:var(--fs-4); color:var(--x-muted); font-weight:700; padding-top:6px}
body.x10 .x10-pr .r span{font-size:var(--fs-2); color:var(--x-muted)}
body.x10 .x10-bar{position:relative; height:10px; border-radius:999px; background:var(--x-track); margin-top:12px; overflow:visible}
body.x10 .x10-bar em{position:absolute; left:0; top:0; bottom:0; border-radius:999px; background:linear-gradient(90deg, color-mix(in srgb, var(--x-ok) 80%, #000), var(--x-ok)); transform-origin:left; animation:x10grow .8s cubic-bezier(.2,.8,.2,1) backwards}
body.x10 .x10-bar i{position:absolute; top:-4px; bottom:-4px; width:3px; margin-left:-1.5px; border-radius:2px; background:var(--x-text)}
@keyframes x10grow{from{transform:scaleX(0)}}

/* ---------- 밑에서 올라오는 판 (처음이세요? · 톱니) ---------- */
.x10-sheet-back{display:none}
body.x10 .x10-sheet-back{display:block; position:fixed; inset:0; z-index:80; background:rgba(0,0,0,.6); opacity:0; pointer-events:none; transition:opacity .25s}
body.x10[data-theme="light"] .x10-sheet-back{background:rgba(10,12,16,.42)}
body.x10 .x10-sheet{position:fixed; left:0; right:0; bottom:0; z-index:81; max-height:86vh; overflow:auto; margin:0 auto; max-width:560px; box-sizing:border-box;
  padding:8px 20px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius:16px 16px 0 0; background:var(--x-card-grad); color:var(--x-text);
  box-shadow:0 -18px 50px -20px rgba(0,0,0,.55); transform:translateY(105%); transition:transform .34s cubic-bezier(.2,.8,.2,1)}
body.x10.x10-sheet-on .x10-sheet-back{opacity:1; pointer-events:auto}
body.x10 .x10-sheet.on{transform:none}
body.x10 .x10-grab{width:40px; height:5px; border-radius:3px; background:var(--x-line); margin:4px auto 14px}
body.x10 .x10-sh-t{font-size:var(--fs-8); font-weight:800; letter-spacing:-.02em; margin:0 0 14px}
body.x10 .x10-sh-li{display:flex; gap:12px; align-items:flex-start; padding:12px 0}
body.x10 .x10-sh-li + .x10-sh-li{border-top:1px solid var(--x-line)}
body.x10 .x10-sh-li .x10-ic{width:44px; height:44px; margin:0}
body.x10 .x10-sh-li .x10-ic svg{width:22px; height:22px}
body.x10 .x10-sh-li b{display:block; font-size:var(--fs-4); font-weight:700}
body.x10 .x10-sh-li span{font-size:var(--fs-2); color:var(--x-muted); line-height:1.45}
body.x10 .x10-sh-x{display:block; width:100%; margin-top:16px; min-height:50px; border:0; border-radius:var(--r-md); cursor:pointer; font:inherit; font-size:var(--fs-4); font-weight:700;
  background:var(--x-neutral-bg); color:var(--x-text)}
body.x10 .x10-menu{display:grid; grid-template-columns:minmax(0,1fr); gap:0}
body.x10 .x10-menu button{display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; min-height:54px; padding:0 4px; border:0; background:transparent;
  font:inherit; font-size:var(--fs-4); font-weight:600; color:var(--x-text); cursor:pointer; text-align:left}
body.x10 .x10-menu button + button{border-top:1px solid var(--x-line)}
body.x10 .x10-menu button::after{content:"›"; color:var(--x-faint); font-size:var(--fs-7)}
body.x10 .x10-mh{font-size:var(--fs-2); color:var(--x-muted); margin:16px 0 4px}

/* ---------- 예전 칸들(상세 화면 안 · 관리자 탭) 모양만 맞춤: 카드 둥글기·그림자 ---------- */
body.x10 #page-home .uxd-card, body.x10 #page-home .hm-card, body.x10 .u3d-card{border-radius:var(--r-lg) !important}
body.x10 .x10-hide{display:none !important}

@media (prefers-reduced-motion: reduce){
  body.x10 .x10-hb, body.x10 .x10-view > *, body.x10 .x10-bar em{animation:none !important}
  body.x10 .x10-sheet, body.x10 .x10-sheet-back, body.x10 .x10-hb{transition:none !important}
}

/* 폰: 맨 위 줄이 좁아 「09:00까지」는 날짜 줄로(ux10.js) — 위 줄엔 점만 */
@media (max-width:520px){ body.x10 .topbar .uxr-cd{display:none !important} }
body.x10 .x10-legal{display:block}
/* body.x10 을 떼면(window.__ux10.toggle(false)) 새로 더한 것은 전부 안 보임 = 예전 화면 그대로 */
body:not(.x10) .x10-back, body:not(.x10) .x10-ttl, body:not(.x10) .x10-ib, body:not(.x10) .x10-legal, body:not(.x10) .x10-tabbar,
body:not(.x10) .x10-sheet, body:not(.x10) .x10-sheet-back, body:not(.x10) .x10-head, body:not(.x10) .x10-grid, body:not(.x10) .x10-dh, body:not(.x10) .x10-view{display:none !important}
body.x10 #pePanel .pk9-list{grid-template-columns:minmax(0,1fr) !important}   /* 넓은 화면에서도 한 줄에 코인 하나(mazip 줄 목록) */

/* ---------- MANUAL1-C 2026-10-14: 장중 단타 칠 코인 줄(.pk9-k1 · picks_embed k1List)을 9시 줄과 같은 꼴로 — 위 #pePanel 규칙 그대로 이름표만 ---------- */
body.x10 .pk9-k1 .pk9-row{display:grid !important; grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"lg n1 now" "lg n2 now" "lg bt bt";
  column-gap:12px; row-gap:2px; align-items:center; padding:14px 6px 14px 12px !important; border-radius:2px !important; background:transparent !important;
  border:0 !important; box-shadow:inset 4px 0 0 var(--x-line) !important}
body.x10 .pk9-k1 .pk9-row.pk9-hit{box-shadow:inset 4px 0 0 var(--x-up) !important}
body.x10 .pk9-k1 .pk9-it + .pk9-it{border-top:1px solid var(--x-line)}
body.x10 .pk9-k1 .pk9-row > .u3d-logo{grid-area:lg; width:46px !important; height:46px !important; font-size:var(--fs-2) !important}
body.x10 .pk9-k1 .pk9-nm, body.x10 .pk9-k1 .pk9-n2{display:contents !important}
body.x10 .pk9-k1 .pk9-n1{grid-area:n1}
body.x10 .pk9-k1 .pk9-n1 b{font-size:var(--fs-5) !important; letter-spacing:-.02em}
body.x10 .pk9-k1 .pk9-n1 small{font-size:var(--fs-2) !important}
body.x10 .pk9-k1 .pk9-c{grid-area:n2; justify-self:start; font-size:var(--fs-1) !important; line-height:1.7 !important; padding:0 10px !important; border:0 !important}
body.x10 .pk9-k1 .pk9-c.hit{background:color-mix(in srgb, var(--x-up) 16%, transparent) !important}
body.x10 .pk9-k1 .pk9-now{grid-area:now; display:flex; flex-direction:column; align-items:flex-end; text-align:right; font-size:var(--fs-2) !important; color:var(--x-muted); line-height:1.25}
body.x10 .pk9-k1 .pk9-now b{font-size:var(--fs-7) !important; font-weight:800 !important; letter-spacing:-.02em}
body.x10 .pk9-k1 .pk9-bt{grid-area:bt; justify-content:flex-start; margin-top:6px}
body.x10 .pk9-k1 .pk9-bt a.ub-btn{flex-direction:row !important; width:auto !important; min-height:34px !important; padding:0 12px !important; gap:5px !important; font-size:var(--fs-1) !important;
  border-radius:999px !important; background:var(--x-card2) !important; border:0 !important; box-shadow:inset 0 0 0 1px var(--x-rim) !important}
body.x10 .pk9-k1 .pk9-bt a.ub-btn .ub-lab{font-size:var(--fs-1) !important}
body.x10 .pk9-k1 .pk9-bt a.ub-btn svg{order:0 !important}
body.x10 .pk9-k1 .pk9-more{position:absolute; right:6px; bottom:16px}
body.x10 .pk9-k1 .pk9-row.pk9-tap{position:relative}

/* ---------- GREET1 2026-10-15: 인사 줄 · 장세별 성적 표 [모양 = 내 발명] (GREET2: 장세 줄·경고 띠·딱지 뺌) ----------
   장세 색: 강한 상승 빨강 → 상승 옅은 빨강 → 보합 회색 → 엇갈림 호박 → 하락 옅은 파랑 → 강한 하락 파랑(진석 지시 「강한 상승 빨강~강한 하락 파랑」) */
body.x10{ --rg-up2:#FF4D57; --rg-up:#FF9A9A; --rg-flat:#A7B1C4; --rg-mixed:#F5B83D; --rg-down:#8DBBFF; --rg-down2:#4C8DFF; --rg-warn:#FFB020; --rg-warn-bg:rgba(255,176,32,.13); --rg-warn-line:rgba(255,176,32,.55) }
body.x10[data-theme="light"]{ --rg-up2:#D91F2B; --rg-up:#E5646A; --rg-flat:#6B7487; --rg-mixed:#A86F00; --rg-down:#4E86E8; --rg-down2:#1F55D6; --rg-warn:#9A5B00; --rg-warn-bg:#FFF1D6; --rg-warn-line:#F0B54A }
body.x10 .rg-up2{color:var(--rg-up2) !important} body.x10 .rg-up{color:var(--rg-up) !important} body.x10 .rg-flat{color:var(--rg-flat) !important}
body.x10 .rg-mixed{color:var(--rg-mixed) !important} body.x10 .rg-down{color:var(--rg-down) !important} body.x10 .rg-down2{color:var(--rg-down2) !important}
body.x10 .x10-greet{font-size:var(--fs-3); font-weight:800; color:var(--x-text); line-height:1.35; margin:2px 0 2px; letter-spacing:-.02em}
body.x10 .x10-rgt{width:100%; border-collapse:collapse; margin-top:8px; font-size:var(--fs-1)}
body.x10 .x10-rgt th, body.x10 .x10-rgt td{padding:4px 4px; text-align:right; border-bottom:1px solid var(--x-line); white-space:nowrap}
body.x10 .x10-rgt th:first-child, body.x10 .x10-rgt td:first-child{text-align:left}
body.x10 .x10-rgt th{font-weight:700; color:var(--x-muted)}
body.x10 .x10-rgt td span{font-weight:800}
body.x10 .x10-rgt tr.on td{background:var(--x-neutral-bg)}
body.x10 .x10-rgt-s{font-size:var(--fs-tag); color:var(--x-muted); margin-top:4px}
body.x10.x10-rg-on .u3d-g-zone, body.x10.x10-rg-on .u3d-g-tick{display:none}
@media (max-width:380px){ body.x10 .x10-greet{font-size:var(--fs-2)} body.x10 .x10-rgt{font-size:13px} body.x10 .x10-rgt th, body.x10 .x10-rgt td{padding:4px 2px} }

/* ---------- GREET2 2026-10-15: mazip 장세 타일 그대로 (D:/mazip/app/web/market.css 166~191 · dz.css 374~421 · stock.css 93~102 · dz.css 195~201)
   토큰만 우리 것으로 바꿈: --up→--x-up · --down→--x-down · --card-2→--x-card2 · --muted→--x-muted · --faint→--x-faint · --text→--x-text · --warn→--x-warn · --line→--x-line
   색 = 빨강 오름 · 파랑 내림만(보합·횡보·엇갈림 = 글 색) — mazip 그대로 ---------- */
body.x10 .x10-mkt-tile{padding:18px 16px 16px; margin-top:4px}
body.x10 .x10-mkt-tile .mk-hd{display:flex; align-items:center; gap:6px; font-size:var(--fs-2); color:var(--x-muted); min-width:0}
body.x10 .x10-mkt-tile .mk-hd .t{flex:none; font-size:var(--fs-6); font-weight:800; color:var(--x-text)}
body.x10 .x10-mkt-tile .mk-hd .bs{margin-left:auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:var(--fs-1); color:var(--x-muted)}
body.x10 .x10-mkt-tile .mk-hd .x10-q{flex:none}
body.x10 .x10-mkt-tile .mk-duo{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:12px}
body.x10 .x10-mkt-tile .mk-bx{background:var(--x-card2); border-radius:16px; padding:12px 12px 11px; min-width:0}
body.x10 .x10-mkt-tile .mk-bx:has(.mk-v.c-down){background:linear-gradient(160deg, color-mix(in srgb, var(--x-down) 18%, transparent), transparent 70%), var(--x-card2)}
body.x10 .x10-mkt-tile .mk-bx:has(.mk-v.c-up){background:linear-gradient(160deg, color-mix(in srgb, var(--x-up) 18%, transparent), transparent 70%), var(--x-card2)}
body.x10 .x10-mkt-tile .mk-k{font-size:var(--fs-2); color:var(--x-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
body.x10 .x10-mkt-tile .mk-v{font-size:var(--fs-10); font-weight:800; letter-spacing:-0.04em; line-height:1.25; margin-top:4px; white-space:nowrap; color:var(--x-text)}
body.x10 .x10-mkt-tile .mk-v.c-up{color:var(--x-up)}
body.x10 .x10-mkt-tile .mk-v.c-down{color:var(--x-down)}
body.x10 .x10-mkt-tile .mk-s{font-size:var(--fs-2); color:var(--x-muted); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
body.x10 .x10-mkt-tile.mk-empty .mk-s{margin-top:10px}
body.x10 .x10-mkt-tile .mk-two{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:8px}
body.x10 .x10-mkt-tile .mk-i{background:var(--x-card2); border-radius:16px; padding:10px 12px 9px; min-width:0}
body.x10 .x10-mkt-tile .mk-i-h{display:flex; flex-direction:column; align-items:flex-start; gap:2px}
body.x10 .x10-mkt-tile .mk-i-h .nm{font-size:var(--fs-3); font-weight:700; color:var(--x-text); max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
body.x10 .x10-mkt-tile .mk-chg{font-size:var(--fs-7); font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--x-text)}
body.x10 .x10-mkt-tile .mk-chg.c-up{color:var(--x-up) !important} body.x10 .x10-mkt-tile .mk-chg.c-down{color:var(--x-down) !important}
body.x10 .x10-mkt-tile .mk-i-v{font-size:var(--fs-3); font-weight:600; letter-spacing:-0.02em; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--x-text); font-variant-numeric:tabular-nums}
body.x10 .x10-mkt-tile .mk-spark{display:block; width:100%; height:26px; margin-top:4px; overflow:visible}
body.x10 .x10-mkt-tile .mk-spark polyline{stroke-width:1.8px; stroke-linejoin:round; stroke-linecap:round}
body.x10 .x10-mkt-tile .mk-spark .ar{stroke:none; opacity:.12}
body.x10 .x10-mkt-tile .mk-sp-up polyline{stroke:var(--x-up)} body.x10 .x10-mkt-tile .mk-sp-up .ar{fill:var(--x-up)}
body.x10 .x10-mkt-tile .mk-sp-down polyline{stroke:var(--x-down)} body.x10 .x10-mkt-tile .mk-sp-down .ar{fill:var(--x-down)}
body.x10 .x10-mkt-tile .mk-sp-flat polyline{stroke:var(--x-faint)} body.x10 .x10-mkt-tile .mk-sp-flat .ar{fill:var(--x-faint)}
@media (max-width:359px){ body.x10 .x10-mkt-tile .mk-v{font-size:var(--fs-7)} }
/* 조심할 점 한 줄 — mazip stock.css 95~101 + dz.css 197~201(세모 = --warn · 왼쪽 띠 · 옅은 바탕) */
body.x10 .x10-mkt-tile .sk-a-h{font-size:var(--fs-2); font-weight:600; color:var(--x-muted); margin:16px 0 6px}
body.x10 .x10-mkt-tile .sk-a-li{display:flex; align-items:flex-start; gap:8px; font-size:var(--fs-3); font-weight:400; line-height:1.4; margin:0 0 6px; padding:10px 12px; min-width:0;
  border-radius:12px; border-left:4px solid var(--x-warn); background:color-mix(in srgb, var(--x-warn) 10%, var(--x-card)); color:var(--x-text)}
body.x10 .x10-mkt-tile .sk-a-li b{font-weight:600; flex:none; white-space:nowrap}
body.x10 .x10-mkt-tile .sk-a-li > span:last-child{min-width:0; word-break:keep-all; overflow-wrap:anywhere}
body.x10 .x10-mkt-tile .sk-a-ic{flex:none; width:14px; height:14px; margin-top:4px}
body.x10 .x10-mkt-tile svg.sk-a-ic.b{color:var(--x-warn)}
body.x10 .x10-mkt-tile .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
/* 맨 아래 회색 시장 한 줄 — mazip stock.css 102 + dz.css 195(.sk-a-mkt: --faint · fs-3 · 위 12px) */
body.x10 .x10-mkl{font-size:var(--fs-3); font-weight:400; color:var(--x-faint); margin:12px 0 0; white-space:normal; line-height:1.4}
body.x10 .x10-hb .x10-mkl{margin:0; padding-top:10px; color:var(--x-faint) !important}
body.x10 .x10-mkl[hidden]{display:none}

/* ===== DESIGN1 2026-10-15 (진석 「글씨들 막 자잘한 거 다 없애고 직관적으로 보기 좋게」) =====
   글자 크기 3단계만 = 큰 숫자 30px(--fs-9) · 보통 15px(--fs-2) · 작게 13px(--fs-tag) · 색 = 오름(--x-up) · 내림(--x-down) · 중립(--x-muted/--x-faint) (+ ★ 금색 기존 #e0b341)
   9시 카드(picks_embed pk9Row) · 단타 카드(k1_embed gItem) 같은 꼴 .d1-* — 결과 = 카드 왼쪽 띠 색(올랐어요 빨강 · 못 올랐어요 회색) */
body.x10 .x10-hb .x10-d:empty, body.x10 .x10-hb .x10-v2:empty{display:none}
body.x10 .x10-hb{min-height:0}
body.x10 .x10-hb .x10-v{font-size:var(--fs-2); padding-top:10px}
body.x10 .x10-hero .x10-v{font-size:var(--fs-2); padding-top:10px}
body.x10 .x10-hb .x10-tl{display:none}
body.x10 .x10-tl, body.x10 .x10-tl b{font-size:var(--fs-tag)}
body.x10.x10 .pk9-list.d1-list, body.x10.x10 #pePanel .pk9-list.d1-list{display:flex !important; flex-direction:column; gap:10px !important}
body.x10.x10 #pePanel .d1-it + .d1-it, body.x10.x10 .pk9-k1 .d1-it + .d1-it{border-top:0}
.d1-card{position:relative; display:block; min-width:0; padding:14px 14px 12px 16px; border-radius:var(--r-md,12px); cursor:pointer;
  background:var(--x-card-grad,var(--bg2,#161c23)); box-shadow:var(--x-sh-1,0 0 0 1px var(--line,#2a323c)); color:var(--x-text,var(--fg,#dde3ea)); -webkit-tap-highlight-color:transparent}
.d1-card.d1-hit{box-shadow:inset 4px 0 0 var(--x-up,var(--up,#ff5252)), var(--x-sh-1,0 0 0 1px var(--line,#2a323c))}
.d1-card.d1-miss{box-shadow:inset 4px 0 0 var(--x-faint,var(--fg3,#6a7787)), var(--x-sh-1,0 0 0 1px var(--line,#2a323c))}
.d1-top{display:flex; align-items:center; gap:8px; min-width:0; font-size:var(--fs-2,15px)}
.d1-top .u3d-logo{flex:0 0 auto; width:28px !important; height:28px !important; font-size:var(--fs-tag,13px) !important}
.d1-nm{display:flex; align-items:center; gap:6px; flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden}
.d1-nm b{font-size:var(--fs-2,15px); font-weight:800; letter-spacing:-.02em}
.d1-nm small{font-size:var(--fs-tag,13px); color:var(--x-faint,var(--fg3,#6a7787)); overflow:hidden; text-overflow:ellipsis}
.d1-st{color:#e0b341; font-weight:900}
.d1-go{flex:0 0 auto; width:7px; height:7px; border-radius:50%; background:var(--x-up,var(--up,#ff5252))}
.d1-tg{flex:0 0 auto; margin-left:auto; padding:2px 4px; border:0; background:transparent; font:inherit; font-size:var(--fs-tag,13px); color:var(--x-faint,var(--fg3,#6a7787)); cursor:pointer}
.d1-big{margin:8px 0 2px; font-size:var(--fs-9,30px); font-weight:800; line-height:1.1; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.d1-big.up{color:var(--x-up,var(--up,#ff5252))} .d1-big.dn{color:var(--x-down,var(--dn,#4a9cf0))}
.d1-big.d1-none{margin:10px 0 2px; font-size:var(--fs-2,15px); font-weight:700; color:var(--x-faint,var(--fg3,#6a7787))}
.d1-line{font-size:var(--fs-2,15px); line-height:1.4; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; color:var(--x-text,var(--fg,#dde3ea))}
.d1-bot{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; min-height:34px}
.d1-now{font-size:var(--fs-tag,13px); color:var(--x-faint,var(--fg3,#6a7787)); font-variant-numeric:tabular-nums}
.d1-bt{display:flex; gap:6px; margin:0 !important}
.d1-ex{margin:10px 0 0 !important; padding:6px 0 0 10px !important; border-left:2px solid var(--x-line,var(--line,#2a323c)); font-size:var(--fs-tag,13px) !important; line-height:1.8 !important; color:var(--x-muted,var(--fg2,#96a3b3)); cursor:default}
.d1-ex b{color:var(--x-text,var(--fg,#dde3ea))} .d1-ex .up{color:var(--x-up,var(--up,#ff5252))} .d1-ex .dn{color:var(--x-down,var(--dn,#4a9cf0))}
.d1-ex small{display:block; font-size:var(--fs-tag,13px); color:var(--x-faint,var(--fg3,#6a7787))}
.d1-sig::before{content:""; display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; vertical-align:1px; background:var(--x-line,var(--line,#2a323c))}
.d1-sig.d1-hit::before{background:var(--x-up,var(--up,#ff5252))} .d1-sig.d1-miss::before{background:var(--x-faint,var(--fg3,#6a7787))}
.d1-links{display:flex !important; gap:6px; margin:8px 0 2px !important; flex-wrap:wrap}
.d1-links a.ub-btn{display:inline-flex !important; flex-direction:row !important; align-items:center; gap:5px; width:auto !important; min-height:34px; padding:0 12px !important; border-radius:10px; font-size:var(--fs-tag,13px) !important}
.d1-links a.ub-btn .ub-lab{display:inline !important; font-size:var(--fs-tag,13px) !important}
.d1-links a.ub-btn svg{order:0 !important; width:14px; height:14px}
body.x10 .x10-sw b .up{color:var(--x-up)}
/* ===== MKT2 2026-10-15 (진석 「글씨하고 이쪽 페이지에 글씨하고 지금 레이아웃이 안 맞잖아. 글씨 크기하고 안 맞잖아.」) =====
   시장 날씨(#mkt) 화면 = 위 칸(장세 타일 .x10-mkt-tile) · 아래 칸(옛 오늘 시장 막대 #u3dMkt, app.js u3dMkBarPaint) 한 틀로:
   폭·여백·모서리·배경 = .x10-box 와 같게 · 제목 = 20px(--fs-6) 하나 · 글자 = DESIGN1 3단계(큰 숫자 30 --fs-9 · 보통 15 --fs-2 · 작게 13 --fs-tag)
   색 = 오름 --x-up · 내림 --x-down · 중립 --x-text/--x-muted/--x-faint. 숫자·글 내용은 그대로(아래 칸 제목만 아래 [내 발명]). */
/* 틀: 아래 칸 줄 여백 16px(위 칸 .x10-dh 와 같은 x·폭) · 카드 모양 = .x10-box */
body.x10.h2-detail.h2-c-mkt #page-home .hm{padding-left:16px !important; padding-right:16px !important; margin-left:auto !important; margin-right:auto !important; box-sizing:border-box}
body.x10.h2-detail.h2-c-mkt #page-home #u3dMkt{border:0 !important; border-radius:var(--r-lg) !important; background:var(--x-card-grad) !important;
  box-shadow:inset 0 0 0 1px var(--x-rim), var(--x-sh-2) !important; padding:18px 16px 16px !important; margin-top:2px !important}
/* 아래 칸 제목: 「오늘 시장 · 강한 하락」 = 위 칸 「오늘 장 강한 하락」과 같은 말 두 번 → 「오른·내린 코인」 [내 발명 MKT2] · 크기 = 위 「장세」 제목과 같은 20px · 색 = 글 색 */
body.x10.h2-detail.h2-c-mkt #u3dMkBarIn .u3d-mbm{font-size:0 !important; color:var(--x-text) !important; line-height:1.3}
body.x10.h2-detail.h2-c-mkt #u3dMkBarIn .u3d-mbm::before{content:"\C624\B978\00B7\B0B4\B9B0  \CF54\C778"; font-size:var(--fs-6); font-weight:800; letter-spacing:-.02em}
body.x10.h2-detail.h2-c-mkt #u3dMkBarIn .u3d-mbt{gap:4px 10px}
body.x10.h2-detail.h2-c-mkt #u3dMkBarIn .u3d-mbg{--sh1-fs:var(--fs-2) !important; font-size:var(--fs-2); color:var(--x-text) !important; width:100%; margin-top:8px}
body.x10.h2-detail.h2-c-mkt #u3dMkBarIn .u3d-mbg em{color:var(--x-up) !important}
/* 막대: 오름 빨강 · 그대로 회색 · 내림 파랑(토큰) · 막대 안 숫자 작게 13 */
body.x10.h2-detail.h2-c-mkt #u3dMkBarIn .u3d-gbar{height:28px; margin:12px 0 6px; border-radius:var(--r-sm); background:var(--x-track); box-shadow:none}
body.x10.h2-detail.h2-c-mkt #u3dMkBarIn .u3d-gs{font-size:var(--fs-tag) !important; font-weight:800; color:var(--x-bg) !important; text-shadow:none !important}
body.x10.h2-detail.h2-c-mkt #u3dMkBarIn .u3d-gs.up{background:var(--x-up) !important}
body.x10.h2-detail.h2-c-mkt #u3dMkBarIn .u3d-gs.z{background:var(--x-faint) !important}
body.x10.h2-detail.h2-c-mkt #u3dMkBarIn .u3d-gs.dn{background:var(--x-down) !important}
/* 오른·그대로·내린 = 보통 15 · 아래 줄(+10%·+5% 개수) = 작게 13 · 자세히 = 작게 13 */
body.x10.h2-detail.h2-c-mkt #u3dMkBarIn .u3d-glg{font-size:var(--fs-2) !important; font-weight:700}
body.x10.h2-detail.h2-c-mkt #u3dMkBarIn .u3d-glg .up{color:var(--x-up) !important}
body.x10.h2-detail.h2-c-mkt #u3dMkBarIn .u3d-glg .dn{color:var(--x-down) !important}
body.x10.h2-detail.h2-c-mkt #u3dMkBarIn .u3d-glg .z{color:var(--x-muted) !important}
body.x10.h2-detail.h2-c-mkt #u3dMkBarIn .u3d-mbs{font-size:var(--fs-tag) !important; color:var(--x-muted) !important; margin-top:12px}
body.x10.h2-detail.h2-c-mkt #u3dMkBarIn .u3d-mbs [data-sh1-s]{--sh1-fs:var(--fs-tag) !important}
body.x10.h2-detail.h2-c-mkt #u3dMkBarIn .u3d-mbc{font-size:var(--fs-tag) !important; font-weight:700; padding:6px 12px !important; color:var(--x-text) !important;
  background:var(--x-card2) !important; box-shadow:inset 0 0 0 1px var(--x-rim) !important}
/* 위 칸(장세 타일)도 같은 3단계: 큰 값 34→30 · 등락 % 22→30 · 칸 이름 17→15 · 원·개수 17→15 · 밑 작은 줄 15→13 · 기준 시각 14→13 · 안쪽 칸 모서리 16→12 */
body.x10 .x10-mkt-tile .mk-hd .bs{font-size:var(--fs-tag)}
body.x10 .x10-mkt-tile .mk-bx, body.x10 .x10-mkt-tile .mk-i{border-radius:var(--r-md)}
body.x10 .x10-mkt-tile .mk-v{font-size:var(--fs-9)}
body.x10 .x10-mkt-tile .mk-s{font-size:var(--fs-tag)}
body.x10 .x10-mkt-tile .mk-i-h .nm{font-size:var(--fs-2)}
body.x10 .x10-mkt-tile .mk-chg{font-size:var(--fs-9); line-height:1.2; letter-spacing:-.03em}
body.x10 .x10-mkt-tile .mk-i-v{font-size:var(--fs-2)}
body.x10 .x10-mkt-tile .sk-a-h{font-size:var(--fs-tag)}
body.x10 .x10-mkt-tile .sk-a-li{font-size:var(--fs-2)}
@media (max-width:359px){ body.x10 .x10-mkt-tile .mk-v, body.x10 .x10-mkt-tile .mk-chg{font-size:var(--fs-7)} }
/* ===== MKT2 끝 ===== */

/* RULE1 2026-10-15 진석 「(9시 화면) 최대한 줄여 · 매집 봐봐」 — 9시 카드 → mazip 줄 꼴(D:/mazip/app/web/service.js resultRow · service.css .sv-row):
   [로고] 이름 / 「기준 ○원」 ······ 오른쪽 작은 「최고」 큰 「+x%」 / 밑 작은 시각 · 왼쪽 띠 = 결과(DESIGN1 그대로).
   9시 상세 맨 밑 picks.html?embed=1 틀(index.html HOME3 · 같은 11개를 한 번 더 그림)은 9시 상세에서만 숨김 — 지난 날은 「지난 날 →」 [내 발명] */
.d1-card.rl1-row{display:flex; align-items:center; gap:10px; padding:10px 12px 10px 14px}
.d1-card.rl1-row > .u3d-logo{flex:0 0 auto; width:28px !important; height:28px !important; font-size:var(--fs-tag,13px) !important}
.rl1-l{flex:1 1 auto; min-width:0}
.rl1-nm{display:flex; align-items:center; gap:6px; min-width:0; white-space:nowrap; overflow:hidden}
.rl1-s{margin-top:2px; font-size:var(--fs-tag,13px); color:var(--x-muted,var(--fg2,#96a3b3)); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rl1-r{flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:2px; text-align:right}
.rl1-big{font-size:var(--fs-5,20px); font-weight:800; line-height:1.15; letter-spacing:-.02em; font-variant-numeric:tabular-nums; white-space:nowrap}
.rl1-big small{margin-right:4px; font-size:var(--fs-tag,13px); font-weight:600; color:var(--x-muted,var(--fg2,#96a3b3))}
.rl1-big.up{color:var(--x-up,var(--up,#ff5252))} .rl1-big.dn{color:var(--x-down,var(--dn,#4a9cf0))}
.rl1-big.rl1-none{font-size:var(--fs-tag,13px); font-weight:700; color:var(--x-faint,var(--fg3,#6a7787))}
.rl1-at{font-size:var(--fs-tag,13px); color:var(--x-faint,var(--fg3,#6a7787)); font-variant-numeric:tabular-nums}
.rl1-bt:empty{display:none}
body.h2-detail.h2-c-nine .h3-ifr{display:none !important}
/* RES1 2026-10-16: 결과 탭 줄(mazip resultRow 꼴) — 둘째 줄 「진입 …」 · 오른쪽 작은 「최고」 + 큰 % · 밑 「청산 09:12」 · 판(resTop 꼴) */
body.x10 .rs1-it{cursor:pointer}
body.x10 .x10-im .s.rs1-in{margin-top:2px; font-size:var(--fs-tag,13px); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
body.x10 .x10-ir.rs1-r b{white-space:nowrap; font-variant-numeric:tabular-nums}
body.x10 .x10-ir.rs1-r b small{margin-right:4px; font-size:var(--fs-tag,13px); font-weight:600; color:var(--x-muted)}
body.x10 .x10-ir span.rs1-out{font-size:var(--fs-tag,13px); color:var(--x-faint,var(--x-muted)); font-variant-numeric:tabular-nums; white-space:nowrap}
body.x10 .x10-sh-t small.rs1-nm{font-size:var(--fs-2); font-weight:400; color:var(--x-muted)}
body.x10 .x10-sh-t small.rs1-dt{display:block; margin-top:2px; font-size:var(--fs-tag,13px); font-weight:400; color:var(--x-muted)}
body.x10 .rs1-big{font-size:var(--fs-9,30px); font-weight:800; letter-spacing:-.03em; line-height:1.15; font-variant-numeric:tabular-nums}
body.x10 .rs1-big.up{color:var(--x-up)} body.x10 .rs1-big.dn{color:var(--x-down)}
body.x10 .rs1-sl{margin:10px 0 0; font-size:var(--fs-3,16px); font-weight:600; font-variant-numeric:tabular-nums}
body.x10 .rs1-sub{margin:6px 0 4px; font-size:var(--fs-2); color:var(--x-muted); font-variant-numeric:tabular-nums}
.rl1-big.rl1-wait{color:var(--x-faint,var(--fg3,#6a7787))}