/* 라이더온 — 디자인 시스템 v3 "Midnight Pro". 프리미엄 다크, 단일 웜 액센트, 신뢰형 데이터. */
:root{
  --bg:#0a1120; --panel-a:#152036; --panel-b:#0e1728; --panel-lo:#0c1424;
  --line:rgba(148,163,184,.13); --line-2:rgba(148,163,184,.07);
  --txt:#eef2f8; --sub:#8b98ae; --dim:#5b6b83;
  --ac:#f5a623; --ac-2:#ffcf6b; --ok:#22d3a5; --warn:#fbbf24; --err:#fb7185; --err-dim:rgba(251,113,133,.35);
  --glow:rgba(245,166,35,.14);
  /* 데이터 강조색(골드) — 플랫폼색(--ac)과 분리, 전 플랫폼 공통 고정. 순위·목표바·피크·버튼 등. */
  --em:#f5a623; --em-2:#ffcf6b; --em-glow:rgba(245,166,35,.28);
  --col:520px;   /* 앱 컬럼 최대폭 — PC에서 본문·상단바·하단탭이 같은 폭으로 가운데 정렬 */
}
*{box-sizing:border-box}
*::-webkit-scrollbar{width:0;height:0}
body{
  margin:0;color:var(--txt);padding-bottom:104px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-family:'Inter',system-ui,-apple-system,'Apple SD Gothic Neo',sans-serif;
  background:radial-gradient(1100px 560px at 50% -260px,var(--glow),transparent 62%),var(--bg);
  background-attachment:fixed;
}
.lex{font-family:'Lexend','Inter',sans-serif}
b{font-weight:700}

/* 상단 앱바 */
.top{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:10px;padding:14px 18px;
  max-width:var(--col);margin:0 auto;
  background:rgba(10,17,32,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line-2)}
/* 로고→타이틀 스왑 슬롯: 로딩 시 '라이더온' 로고 ~1초 → 페이지 타이틀. grid 겹침으로 둘 중 큰 쪽 크기 확보(줄바꿈X). */
.top .hswap{display:grid;align-items:center;min-height:22px}
.top .hswap>span{grid-area:1/1;font-family:'Lexend';font-weight:800;font-size:19px;line-height:1;white-space:nowrap;letter-spacing:-.01em}
.top .hswap .b{background:linear-gradient(90deg,var(--ac),var(--ac-2));-webkit-background-clip:text;background-clip:text;color:transparent;animation:hswapB 1.7s ease forwards}
.top .hswap .t{color:var(--txt);animation:hswapT 1.7s ease forwards}
/* 타이틀 앞 플랫폼(배민=민트 / 쿠팡=코랄 그라데이션 — 배지·로고와 동일 톤) */
.top .hswap .t .tp{margin-right:6px;font-weight:800;-webkit-background-clip:text;background-clip:text;color:transparent}
.top .hswap .t .tp.bm{background:linear-gradient(90deg,#12b3a2,#54d8c4);-webkit-background-clip:text;background-clip:text}
.top .hswap .t .tp.cp{background:linear-gradient(90deg,#f5544e,#ff8a86);-webkit-background-clip:text;background-clip:text}
@keyframes hswapB{0%{opacity:0;transform:translateY(4px)}9%{opacity:1;transform:none}60%{opacity:1;transform:none}78%,100%{opacity:0;transform:translateY(-7px)}}
@keyframes hswapT{0%,60%{opacity:0;transform:translateY(8px)}84%,100%{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.top .hswap .b{display:none}.top .hswap .t{animation:none;opacity:1;transform:none}}
.top .sw{margin-left:auto;display:flex;align-items:center;gap:10px}
.top .out{color:var(--dim);font-size:12px;text-decoration:none;font-weight:600}

/* 협력사 스위처(커스텀 드롭다운 — 플랫폼 배지 내장) */
.top .ctxsw{position:relative}
.top .ctxbtn{display:flex;align-items:center;gap:8px;background:var(--panel-b);color:var(--txt);
  border:1px solid var(--line);border-radius:12px;padding:6px 9px;font:inherit;font-size:13px;font-weight:600;
  cursor:pointer;max-width:210px}
.top .ctxbtn .ctxname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top .ctxbtn .caret{font-size:18px;color:var(--sub);margin:0 -3px 0 -2px;transition:transform .15s}
.top .ctxsw.open .caret{transform:rotate(180deg)}
.top .ctxmenu{position:absolute;top:calc(100% + 6px);right:0;min-width:100%;z-index:60;
  background:var(--panel-lo);border:1px solid var(--line);border-radius:14px;padding:6px;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.8);display:none;flex-direction:column;gap:4px}
.top .ctxsw.open .ctxmenu{display:flex;animation:fade .14s ease}
/* 각 선택지는 메뉴 배경(어두움)보다 밝은 칩으로 — 배경과 확실히 구분 */
.top .ctxitem{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:10px;
  text-decoration:none;color:var(--txt);font-size:13px;font-weight:600;white-space:nowrap;
  background:var(--panel-a);border:1px solid var(--line)}
.top .ctxitem:hover{background:#1e2d4a;border-color:rgba(148,163,184,.28)}
.top .ctxitem.on{border-color:var(--ac);box-shadow:0 0 0 1px var(--ac) inset}
.top .ctxsep{height:1px;background:var(--line);margin:2px 2px}
.top .ctxitem.logout{color:var(--sub)}
.top .ctxitem.logout .material-symbols-outlined{font-size:18px}
/* 플랫폼 배지 — 메뉴엔 배민·쿠팡이 동시에 뜰 수 있어 var(--ac) 대신 플랫폼 고정색. */
.pbadge{font-family:'Lexend';font-weight:800;font-size:10.5px;letter-spacing:.02em;color:#0a1120;
  border-radius:999px;padding:3px 8px;flex:0 0 auto;line-height:1.45}
.pbadge.bm{background:linear-gradient(135deg,#12b3a2,#54d8c4)}
.pbadge.cp{background:linear-gradient(135deg,#f5544e,#ff8a86)}

/* 전 페이지 상단 강조 공지 배너(플랫폼색 틴트) */
/* 배경 틴트는 --glow(rgba) 레이어로. color-mix 미사용 — html2canvas 공유 캡처 호환. */
.notice{position:relative;overflow:hidden;display:flex;gap:10px;align-items:flex-start;padding:13px 15px;border-radius:14px;
  background:linear-gradient(135deg,var(--glow),rgba(0,0,0,0)),var(--panel-b);
  border:1px solid var(--ac);color:var(--txt);font-size:13px;line-height:1.5;font-weight:600;
  box-shadow:0 10px 26px -16px var(--glow)}
/* 카드 중앙을 앵커로 회전하는 광선(플랫폼색). data-html2canvas-ignore로 공유 캡처엔 미포함. */
.notice .beam{position:absolute;top:50%;left:50%;width:260%;aspect-ratio:1;z-index:0;pointer-events:none;opacity:.22;
  transform:translate(-50%,-50%);transform-origin:center;
  background:conic-gradient(from 0deg,transparent 0deg,var(--ac) 22deg,transparent 62deg,transparent 200deg,var(--ac-2) 222deg,transparent 262deg,transparent 360deg);
  animation:noteBeam 7s linear infinite}
@keyframes noteBeam{to{transform:translate(-50%,-50%) rotate(1turn)}}
.notice>:not(.beam){position:relative;z-index:1}
.notice .material-symbols-outlined{color:var(--ac);font-size:20px;flex:0 0 auto;margin-top:1px}
.notice b{color:var(--ac-2);font-weight:800}
@media (prefers-reduced-motion:reduce){.notice .beam{animation:none;opacity:.12}}

.wrap{max-width:var(--col);margin:0 auto;padding:16px;display:flex;flex-direction:column;gap:14px}
/* 스와이프 전환 진입 애니메이션(방향별) */
@keyframes swinR{from{transform:translateX(30px);opacity:.35}to{transform:none;opacity:1}}
@keyframes swinL{from{transform:translateX(-30px);opacity:.35}to{transform:none;opacity:1}}
.wrap.swin-r{animation:swinR .22s ease}
.wrap.swin-l{animation:swinL .22s ease}

/* 카드 */
.card{background:linear-gradient(162deg,var(--panel-a),var(--panel-b));border:1px solid var(--line);
  border-radius:22px;padding:20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 18px 40px -26px rgba(0,0,0,.75)}
.card.lo{background:var(--panel-lo);box-shadow:none}
h2.sec{font-family:'Lexend';font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sub);margin:2px 2px 12px;display:flex;align-items:center;gap:8px}
h2.sec::before{content:'';width:4px;height:14px;border-radius:2px;background:var(--ac)}

/* 뱃지/칩 */
.badge{display:inline-flex;align-items:center;gap:5px;font-family:'Lexend';font-weight:700;font-size:12px;
  color:#0a1120;background:linear-gradient(135deg,var(--ac),var(--ac-2));border-radius:999px;padding:5px 12px;
  box-shadow:0 4px 14px -4px var(--glow)}
.chip{display:inline-flex;align-items:center;gap:5px;font-family:'Lexend';font-weight:700;font-size:12px;
  border-radius:999px;padding:5px 12px;border:1px solid var(--line);color:var(--sub);background:var(--panel-lo);text-decoration:none}
.chip.on{background:linear-gradient(135deg,var(--ac),var(--ac-2));color:#0a1120;border-color:transparent}
/* 액센트 칩(주 이동 등 눈에 띄어야 하는 버튼) */
.chip.ac{color:var(--ac-2);border-color:rgba(245,166,35,.5);background:rgba(245,166,35,.12)}

/* 숫자 스케일 */
.hero{font-family:'Lexend';font-weight:800;font-size:40px;line-height:1;letter-spacing:-.03em}
.snum{font-family:'Lexend';font-weight:700;font-size:24px;line-height:1.05;letter-spacing:-.01em}
.lbl{font-family:'Lexend';font-weight:700;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--sub)}

/* 프로필 카드 + 게이지 */
.profile{position:relative;overflow:hidden}
.profile::after{content:'';position:absolute;inset:0;background:radial-gradient(420px 160px at 100% 0,var(--glow),transparent 70%);pointer-events:none}
.profile .ghost{position:absolute;right:-16px;bottom:-22px;opacity:.06;font-size:128px;pointer-events:none}
.gauge{position:relative;width:132px;height:132px;flex:0 0 132px}
.gauge svg{transform:rotate(-90deg)}
.gauge .ctr{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.gauge .ctr .v{font-family:'Lexend';font-weight:800;font-size:34px;line-height:1;letter-spacing:-.03em}
.gauge .ctr .k{font-family:'Lexend';font-weight:700;font-size:10px;letter-spacing:.14em;color:var(--sub);text-transform:uppercase;margin-top:3px}
.kv{display:flex;flex-direction:column;gap:2px}
.kv .k{font-family:'Lexend';font-weight:700;font-size:10px;letter-spacing:.12em;color:var(--sub);text-transform:uppercase}
.kv .v{font-family:'Lexend';font-weight:800;font-size:26px;line-height:1;letter-spacing:-.02em}

/* 상태 점 */
.dot{width:8px;height:8px;border-radius:50%;background:var(--dim);box-shadow:0 0 0 3px rgba(91,107,131,.18)}
.dot.live{background:var(--ok);box-shadow:0 0 0 3px rgba(34,211,165,.22);animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(34,211,165,.22)}50%{box-shadow:0 0 0 6px rgba(34,211,165,.06)}}

/* 4열 성과 — 상단 액센트 바 */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.metric{position:relative;overflow:hidden;background:var(--panel-lo);border:1px solid var(--line);
  border-radius:16px;padding:14px 6px 12px;text-align:center}
.metric::before{content:'';position:absolute;top:0;left:14%;right:14%;height:3px;border-radius:0 0 4px 4px;background:var(--err);opacity:.9}
.metric.ok::before{background:var(--ok)}
.metric .v{font-family:'Lexend';font-weight:800;font-size:23px;letter-spacing:-.02em}
.metric .l{font-size:10px;font-weight:700;color:var(--sub);text-transform:uppercase;margin-top:3px;letter-spacing:.02em}

/* 행 리스트 */
.row{display:flex;justify-content:space-between;align-items:center;font-size:15px;padding:11px 0;border-bottom:1px solid var(--line-2)}
.row:last-child{border-bottom:0}
.muted{color:var(--sub);font-size:12px}

/* 구간 카드 */
.iv{background:var(--panel-lo);border:1px solid var(--line);border-radius:16px;
  display:flex;justify-content:space-between;align-items:center;padding:14px 16px;position:relative;overflow:hidden}
.iv .n{font-family:'Lexend';font-weight:800;font-size:22px;letter-spacing:-.02em}

/* 기록 일별 행: [요일+일] [완료·거절·수락률] [순위] > */
.rec{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-2)}
.rec:last-child{border-bottom:0}
.rec-d{flex:0 0 auto;width:32px;text-align:center;line-height:1}
.rec-d .dow{display:block;font-family:'Lexend';font-weight:700;font-size:10px;color:var(--sub)}
.rec-d .dn{display:block;font-family:'Lexend';font-weight:800;font-size:19px;letter-spacing:-.02em;margin-top:3px}
.rec.today .dn{color:var(--ac)}
.rec-m{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:2px 12px;font-size:13px;color:var(--sub)}
.rec-m b{font-family:'Lexend';font-weight:800}
.rec-rank{flex:0 0 auto;font-family:'Lexend';font-weight:800;font-size:14px;color:var(--em-2)}
.rec .chev{flex:0 0 auto;color:var(--dim);font-size:18px}
.rec.empty{opacity:.45}

/* 진행바 */
.bar{height:12px;background:var(--panel-lo);border:1px solid var(--line);border-radius:999px;overflow:hidden;margin-top:12px}
.bar>i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--em),var(--em-2));box-shadow:0 0 14px -2px var(--em-glow)}

/* 버튼/입력 */
.btn{display:block;width:100%;background:linear-gradient(135deg,var(--em),var(--em-2));color:#0a1120;
  font-family:'Lexend';font-weight:800;border:0;border-radius:16px;padding:15px;font-size:15px;cursor:pointer;
  text-align:center;text-decoration:none;box-shadow:0 12px 26px -12px var(--em-glow)}
.btn.ghost{background:transparent;color:var(--txt);border:1.5px solid var(--line);box-shadow:none}
.inp{background:var(--panel-lo);color:var(--txt);border:1px solid var(--line);border-radius:12px;padding:11px 13px;font-size:15px;font-family:'Lexend'}
.inp:focus{outline:none;border-color:var(--ac)}

.empty{color:var(--sub);font-size:14px;text-align:center;padding:28px}

/* 하단 내비 */
.nav{position:fixed;bottom:0;left:0;right:0;height:78px;display:flex;justify-content:space-around;
  max-width:var(--col);margin:0 auto;   /* PC에서 화면 전체로 퍼지지 않게 본문과 같은 폭 */
  background:rgba(13,20,36,.9);backdrop-filter:blur(14px);border-top:1px solid var(--line);z-index:50;
  padding-bottom:env(safe-area-inset-bottom)}
.nav a{flex:1;min-width:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;color:var(--dim);text-decoration:none;position:relative;transition:color .15s}
.nav a.on{color:var(--ac)}
.nav a.on::before{content:'';position:absolute;top:0;width:34px;height:3px;border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,var(--ac),var(--ac-2));box-shadow:0 0 12px -1px var(--glow)}
.nav a .material-symbols-outlined{font-size:24px}
.nav a.on .material-symbols-outlined{font-variation-settings:'FILL' 1}
.nav a span.t{font-family:'Lexend';font-weight:700;font-size:10px;letter-spacing:.04em}

/* 플로팅 공유 버튼 */
/* FAB도 컬럼 오른쪽 안쪽에 붙게(PC에서 화면 끝으로 떨어지지 않도록) */
.fab{position:fixed;right:max(18px,calc(50% - var(--col)/2 + 18px));bottom:94px;z-index:40;width:54px;height:54px;border-radius:18px;
  background:linear-gradient(135deg,var(--em),var(--em-2));color:#0a1120;border:0;display:flex;align-items:center;
  justify-content:center;cursor:pointer;box-shadow:0 14px 30px -10px var(--em-glow)}

/* 바텀시트(상세 모달) */
.ov{position:fixed;inset:0;background:rgba(4,8,16,.7);backdrop-filter:blur(4px);z-index:60;display:none;align-items:flex-end}
.ov.open{display:flex;animation:fade .18s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{background:linear-gradient(180deg,var(--panel-a),var(--panel-b));width:100%;max-width:var(--col);margin:0 auto;
  border:1px solid var(--line);border-bottom:0;border-radius:24px 24px 0 0;padding:20px;max-height:86vh;overflow:auto;
  animation:rise .24s cubic-bezier(.2,.9,.3,1)}
@keyframes rise{from{transform:translateY(30px)}to{transform:translateY(0)}}
.sheet .grip{width:38px;height:4px;border-radius:999px;background:var(--line);margin:-6px auto 12px}
.sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;text-align:center;margin:14px 0}
.sgrid .c{background:var(--panel-lo);border:1px solid var(--line);border-radius:14px;padding:13px 6px}
.sgrid .c .v{font-family:'Lexend';font-weight:800;font-size:20px;letter-spacing:-.02em}
.sgrid .c .l{font-size:11px;color:var(--sub);margin-top:3px}

/* 달력(휴무) */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:10px}
.cal .hd{text-align:center;font-family:'Lexend';font-weight:700;font-size:11px;color:var(--sub);padding:2px 0}
.cal a{display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;
  color:var(--txt);background:var(--panel-lo);border:1px solid var(--line);border-radius:12px;padding:9px 0 7px;min-height:50px}
.cal a .dn{font-family:'Lexend';font-weight:700;font-size:15px}
.cal a .tg{font-size:9px;margin-top:2px;font-weight:700}
.cal a.off{background:linear-gradient(135deg,var(--em),var(--em-2));color:#0a1120;border-color:transparent}
.cal a.reg{border-style:dashed;border-color:var(--dim);color:var(--sub)}
.cal a.today{box-shadow:0 0 0 2px #38bdf8}

/* 모드 카드(휴무) */
.mode{flex:1;text-align:center;padding:16px 8px;border-radius:16px;text-decoration:none;
  background:var(--panel-lo);color:var(--sub);border:1px solid var(--line);transition:transform .1s}
.mode:active{transform:scale(.97)}
.mode.on{background:linear-gradient(135deg,var(--em),var(--em-2));color:#0a1120;border-color:transparent;box-shadow:0 12px 26px -12px var(--em-glow)}
.mode .material-symbols-outlined{font-size:28px}
.mode .t{font-family:'Lexend';font-weight:800;font-size:15px;margin-top:3px}
.mode .d{font-size:11px;opacity:.85;margin-top:1px}

/* 링크 폴백(파란 기본링크 방지) */
.out{color:var(--sub);font-size:12px;font-weight:600;text-decoration:none}

/* PWA 바(안드로이드 전용) — 하단 탭·FAB 위. 한 줄: [아이콘][문구][주버튼][닫기/✕]. */
.pwabar{position:fixed;left:50%;bottom:150px;z-index:55;transform:translate(-50%,18px);
  width:calc(min(var(--col),100%) - 24px);display:flex;align-items:center;gap:9px;
  padding:10px 12px 10px 14px;border-radius:16px;border:1px solid var(--ac);
  background:linear-gradient(135deg,var(--panel-a),var(--panel-b));
  box-shadow:0 18px 40px -18px rgba(0,0,0,.8);opacity:0;pointer-events:none;
  transition:opacity .25s ease,transform .25s ease}
.pwabar.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.pwabar>.material-symbols-outlined{color:var(--ac);font-size:21px;flex:0 0 auto}
.pwabar-t{flex:1;min-width:0;font-family:'Lexend';font-weight:700;font-size:13px;color:var(--txt);line-height:1.2}
/* 원래 설치 버튼 크기(작게). 설치/닫기 동일 크기. */
.pwabar-btn{flex:0 0 auto;font-family:'Lexend';font-weight:800;border:0;border-radius:11px;padding:9px 15px;
  font-size:13px;cursor:pointer;text-align:center}
.pwabar-btn.primary{background:linear-gradient(135deg,var(--em),var(--em-2));color:#0a1120}
/* 닫기 = 설치와 같은 색, 채도만 낮춰 보조 느낌 */
.pwabar-btn.ghost{background:linear-gradient(135deg,var(--em),var(--em-2));color:#0a1120;filter:saturate(.5) brightness(.92)}

/* 크롬열기(빨강) 카드 — 같은 1줄, [크롬에서 열기] + 작은 ✕(닫기 버튼 없음) */
.pwabar.ext{border-color:#ef4444;border-width:1.5px;
  background:linear-gradient(135deg,rgba(239,68,68,.22),rgba(239,68,68,.06)),linear-gradient(135deg,var(--panel-a),var(--panel-b));
  box-shadow:0 18px 40px -16px rgba(239,68,68,.45)}
.pwabar.ext>.material-symbols-outlined{color:#ff5a5a}
.pwabar.ext .pwabar-t{color:#ff6b6b}
.pwabar.ext .pwabar-btn.primary{background:linear-gradient(135deg,#ef4444,#ff5c5c);color:#fff;box-shadow:0 8px 20px -8px rgba(239,68,68,.6)}
.pwabar-x{flex:0 0 auto;color:#ff9d9d;font-size:14px;cursor:pointer;padding:2px 4px;line-height:1}

/* 설치 완료 안내 토스트(1회) */
.pwatoast{position:fixed;left:50%;bottom:150px;z-index:70;transform:translate(-50%,18px);
  width:calc(min(var(--col),100%) - 24px);display:flex;gap:10px;align-items:flex-start;
  padding:13px 15px;border-radius:16px;border:1px solid var(--ok);color:var(--txt);
  background:linear-gradient(135deg,var(--panel-a),var(--panel-b));
  box-shadow:0 18px 40px -18px rgba(0,0,0,.85);font-size:13px;line-height:1.5;
  opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease}
.pwatoast.show{opacity:1;transform:translate(-50%,0)}
.pwatoast>.material-symbols-outlined{color:var(--ok);font-size:20px;flex:0 0 auto;margin-top:1px}
.pwatoast b{color:var(--ac-2);font-weight:800}