/* 「나의 라이딩 실력」 rideiq.html — 2026-09-30 대시보드 개편(태블릿 화면 속 관리 대시보드 느낌: 옅은 바탕 · 흰 카드 · 부드러운 그림자 · 아이콘 숫자 타일 · 곡선 영역 그래프) */
.riq-page{--rq-bg:#eef0f4;--rq-panel:#f7f8fb;--rq-card:#fff;--rq-ink:#16181d;--rq-sub:#6b7180;--rq-faint:#a3a8b4;--rq-line:#eceef3;
  --rq-o:#ff6a1a;--rq-o2:#fff0e6;--rq-v:#7b6cf6;--rq-v2:#efedff;--rq-g:#1fb86b;--rq-g2:#e5f7ee;--rq-b:#3d8bfd;--rq-b2:#e7f0ff;--rq-r:#f0506e;--rq-r2:#fde8ec;
  --rq-shadow:0 1px 2px #1018280a,0 8px 24px #1018280d;background:var(--rq-bg)}
.legal-nav{display:flex;align-items:center;height:72px;padding:0 5%;background:transparent}
.legal-nav .wordmark-h{display:flex;align-items:center;gap:10px}
.legal-nav .brand-logo{width:40px;height:40px}.legal-nav .brand-word{height:40px;width:auto}
.riq-main{max-width:1280px;margin:0 auto;padding:6px 22px 70px}
.riq-loading{padding:80px 0;text-align:center;color:var(--rq-sub)}
.legal-foot{display:flex;flex-wrap:wrap;gap:16px;align-items:center;max-width:1280px;margin:0 auto;padding:24px 22px;color:var(--rq-faint);font-size:13px}
.legal-foot a{border-bottom:1px solid #d5d9e0}.legal-foot span{margin-left:auto;font:600 10px Arial;letter-spacing:1.2px}

/* 연결 전 화면 */
.riq-hero{margin:10px 0 20px}
.riq-kick{font:800 11px Arial;letter-spacing:2px;color:var(--rq-o);margin:0 0 8px}
.riq-hero h1{font-size:36px;letter-spacing:-1.6px;margin:0 0 10px;font-weight:900;color:var(--rq-ink)}
.riq-sub{color:var(--rq-sub);font-size:15px;line-height:1.75;margin:0;max-width:640px}.riq-sub b{color:var(--rq-ink)}
.riq-gate{background:var(--rq-card);border-radius:22px;box-shadow:var(--rq-shadow);padding:34px;text-align:center;margin-top:14px}
.riq-gate p{color:var(--rq-sub);font-size:15px;line-height:1.8;margin:0 0 16px}
.riq-btn{display:inline-block;background:var(--rq-ink);color:#fff;padding:13px 24px;border-radius:14px;font-weight:800;font-size:14px;border:0;text-decoration:none}
.riq-btn:hover{background:#2b2f38}
.riq-fine{color:var(--rq-faint);font-size:12px;line-height:1.7;margin:12px 0 0}.riq-fine b{color:var(--rq-sub)}

/* ── 대시보드 틀: 둥근 큰 화면 + 왼쪽 메뉴 ── */
.rq-app{display:grid;grid-template-columns:220px minmax(0,1fr);background:var(--rq-panel);border-radius:30px;box-shadow:0 30px 70px #1018281f,0 0 0 1px #10182808;overflow:hidden;min-height:80vh}
.rq-side{position:sticky;top:0;align-self:start;height:100vh;max-height:100%;display:flex;flex-direction:column;gap:6px;padding:26px 16px;background:var(--rq-card);border-right:1px solid var(--rq-line)}
.rq-brand{display:flex;align-items:center;gap:10px;margin:0 8px 22px;font-size:18px;font-weight:900;letter-spacing:-.5px;color:var(--rq-ink)}
.rq-brand span{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--rq-o);color:#fff;font:900 17px Arial}
.rq-side nav{display:grid;gap:4px}
.rq-side nav a{display:flex;align-items:center;gap:11px;height:44px;padding:0 14px;border-radius:13px;color:var(--rq-sub);font-size:14.5px;font-weight:700;text-decoration:none;transition:background .15s,color .15s}
.rq-side nav a:hover{background:var(--rq-panel);color:var(--rq-ink)}
.rq-side nav a.on{background:var(--rq-o);color:#fff;box-shadow:0 6px 16px #ff6a1a40}
.rq-i{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.rq-sfoot{margin-top:auto;display:grid;gap:6px;padding:14px 8px 0;border-top:1px solid var(--rq-line)}
.rq-sfoot img{display:block}.rq-sfoot small{color:var(--rq-faint);font-size:11.5px}
.rq-main{padding:26px 28px 30px;min-width:0;display:grid;gap:18px;align-content:start}

/* 머리 */
.rq-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.rq-top h1{margin:0;font-size:26px;font-weight:900;letter-spacing:-1px;color:var(--rq-ink);overflow-wrap:anywhere}
.rq-top .riq-kick{margin-bottom:4px}
.rq-date{margin:6px 0 0;color:var(--rq-faint);font-size:13px;font-weight:600}
.riq-body{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--rq-card);border-radius:14px;box-shadow:var(--rq-shadow);padding:9px 12px 9px 16px}
.rb-txt{font-size:13px;color:var(--rq-sub)}.rb-txt b{color:var(--rq-ink)}.rb-txt small{color:var(--rq-faint)}
.rb-edit{border:0;background:var(--rq-panel);border-radius:10px;padding:7px 13px;font:inherit;font-size:12.5px;font-weight:800;color:var(--rq-ink);cursor:pointer}
.rb-form[hidden]{display:none}
.rb-form{display:flex;gap:12px;align-items:center;flex-wrap:wrap;width:100%;margin-top:4px}
.rb-form label{font-size:13px;color:var(--rq-sub);display:flex;align-items:center;gap:6px}
.rb-form input,.rb-form select{border:1px solid var(--rq-line);border-radius:10px;padding:8px 10px;font-size:13px;width:90px;background:var(--rq-card);color:var(--rq-ink)}
.rb-save{background:var(--rq-o);color:#fff;border:0;border-radius:10px;padding:9px 16px;font-weight:800;font-size:13px;cursor:pointer}
.riq-note{background:var(--rq-o2);color:#9a4a12;border-radius:14px;padding:11px 16px;font-size:13px;margin:0}

/* 숫자 타일 */
.rq-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.rq-kpi{display:flex;align-items:center;gap:14px;background:var(--rq-card);border-radius:20px;box-shadow:var(--rq-shadow);padding:18px 18px;min-width:0}
.rq-ib{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:15px}
.rq-ib .rq-i{width:22px;height:22px}
.rq-ib.o{background:var(--rq-o2);color:var(--rq-o)}.rq-ib.v{background:var(--rq-v2);color:var(--rq-v)}.rq-ib.g{background:var(--rq-g2);color:var(--rq-g)}.rq-ib.r{background:var(--rq-r2);color:var(--rq-r)}
.rq-kv{min-width:0}
.rq-kv span{display:block;font-size:12.5px;font-weight:700;color:var(--rq-sub)}
.rq-kv b{display:block;font-size:27px;font-weight:900;letter-spacing:-1px;line-height:1.15;color:var(--rq-ink);white-space:nowrap}
.rq-kv b i{font-style:normal;font-size:13px;font-weight:800;color:var(--rq-faint);margin-left:3px}
.rq-kv small{display:block;font-size:11.5px;color:var(--rq-faint);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 카드 공통 */
.rq-card{background:var(--rq-card);border-radius:22px;box-shadow:var(--rq-shadow);padding:20px 22px;min-width:0;scroll-margin-top:16px}
.rq-ch{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:14px}
.rq-ch .rq-i{color:var(--rq-o)}
.rq-ch h2{margin:0;font-size:17px;font-weight:900;letter-spacing:-.4px;color:var(--rq-ink)}
.rq-ch small{font-size:12px;color:var(--rq-faint);font-weight:600}
.riq-streaming{margin-left:auto;font-size:11.5px;color:var(--rq-o);font-weight:700;background:var(--rq-o2);padding:4px 10px;border-radius:99px}
.rq-g21{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:18px}
.rq-g12{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:18px}

/* 파워 커브 */
.pc-box{position:relative}
.pc2{width:100%;height:auto;display:block;touch-action:pan-y}
.pc-grid{stroke:var(--rq-line);stroke-width:1;stroke-dasharray:4 5}
.pc-y{font:600 10.5px Arial;fill:var(--rq-faint);text-anchor:end}
.pc-x{font:700 11px 'Noto Sans KR',sans-serif;fill:var(--rq-sub)}
.pc-line{fill:none;stroke:var(--rq-o);stroke-width:3;stroke-linecap:round}
.pc-s0{stop-color:var(--rq-o);stop-opacity:.28}.pc-s1{stop-color:var(--rq-o);stop-opacity:0}
.pc-key{fill:#fff;stroke:var(--rq-o);stroke-width:2.5}
.pc-guide{stroke:var(--rq-ink);stroke-width:1.2;stroke-dasharray:4 4;opacity:.35;transition:opacity .12s}
.pc-hot{fill:var(--rq-o);stroke:#fff;stroke-width:3;filter:drop-shadow(0 2px 4px #ff6a1a66)}
.pc-tip{position:absolute;z-index:2;padding:7px 11px;border-radius:11px;background:var(--rq-ink);color:#fff;font-size:12.5px;font-weight:700;white-space:nowrap;pointer-events:none;box-shadow:0 8px 20px #10182833}
.pc-tip small{color:#b9bec9;font-weight:600}.pc-tip em{font-style:normal;margin-left:6px;padding:1px 7px;border-radius:99px;background:var(--rq-o);font-size:11.5px}
.pc-tip::after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;background:var(--rq-ink);transform:translateX(-50%) rotate(45deg);border-radius:2px}
.pc-chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 2px}
.pc-chip{font-size:12.5px;color:var(--rq-sub);background:var(--rq-panel);border-radius:10px;padding:7px 11px}
.pc-chip b{color:var(--rq-ink);margin-right:3px}.pc-chip em{font-style:normal;font-weight:800;color:var(--rq-o);margin-left:4px}
.riq-prow{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:12px 0 0}
.pr-it{background:var(--rq-panel);border-radius:14px;padding:12px 14px}
.pr-it span{display:block;font-size:11.5px;font-weight:700;color:var(--rq-sub)}
.pr-it b{display:block;font-size:20px;font-weight:900;color:var(--rq-ink);letter-spacing:-.5px}.pr-it b i{font-style:normal;font-size:12px;color:var(--rq-faint);margin-left:2px}
.riq-np{color:var(--rq-sub);line-height:1.8;font-size:14px;margin:0 0 6px}
.riq-collect{background:var(--rq-o2);color:#9a4a12;border-radius:14px;padding:14px 16px;font-size:14px;margin-bottom:10px}
.riq-prog{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.riq-prog span{font-size:12px;color:var(--rq-sub);white-space:nowrap}
.riq-progbar{flex:1;height:8px;background:var(--rq-panel);border-radius:6px;overflow:hidden}
.riq-progbar i{display:block;height:100%;background:var(--rq-o);border-radius:6px;transition:width .4s;min-width:6%}

/* 내 위치 — 도넛 */
.rq-rings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px}
.rq-ring{position:relative;display:grid;justify-items:center;text-align:center}
.rq-ring svg{width:104px;height:104px}
.rg-bg{fill:none;stroke:var(--rq-panel);stroke-width:9}
.rg-fg{fill:none;stroke:var(--rq-o);stroke-width:9;stroke-linecap:round;transition:stroke-dasharray .6s}
.rq-ring.v .rg-fg{stroke:var(--rq-v)}.rq-ring.g .rg-fg{stroke:var(--rq-g)}.rq-ring.b .rg-fg{stroke:var(--rq-b)}
.rg-c{position:absolute;top:0;left:50%;transform:translateX(-50%);width:104px;height:104px;display:grid;place-content:center;line-height:1.05}
.rg-c b{font-size:21px;font-weight:900;color:var(--rq-ink);letter-spacing:-.5px}.rg-c small{font-size:10.5px;color:var(--rq-faint);font-weight:700}
.rq-ring p{margin:6px 0 0;font-size:13px;font-weight:800;color:var(--rq-ink)}.rq-ring p small{display:block;font-size:10.5px;color:var(--rq-faint);font-weight:600}

/* 보조 숫자 줄 */
.rq-minis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.rq-mini{background:var(--rq-card);border-radius:18px;box-shadow:var(--rq-shadow);padding:14px 16px;min-width:0}
.rq-mini span{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--rq-sub)}.rq-mini span .rq-i{width:15px;height:15px;color:var(--rq-v)}
.rq-mini b{display:block;margin-top:4px;font-size:20px;font-weight:900;color:var(--rq-ink);letter-spacing:-.5px}
.rq-mini small{display:block;font-size:11.5px;color:var(--rq-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 레이더 */
.rd{width:100%;max-width:300px;height:auto;display:block;margin:0 auto}
.rd-ring{fill:none;stroke:var(--rq-line);stroke-width:1}
.rd-spoke{stroke:var(--rq-line)}
.rd-shape{fill:#7b6cf62e;stroke:var(--rq-v);stroke-width:2.2;stroke-linejoin:round}
.rd-vd{fill:#fff;stroke:var(--rq-v);stroke-width:2}
.rd-lab{font:800 11px 'Noto Sans KR',sans-serif;fill:var(--rq-ink)}
.rd-lp{font:700 10px Arial;fill:var(--rq-faint)}
.rd-mid{font:700 11px 'Noto Sans KR',sans-serif;fill:var(--rq-faint)}
.riq-type{text-align:center;color:var(--rq-sub);font-size:13px;line-height:1.7;margin:6px 0 0}

/* 월별 막대 */
.mbars{width:100%;height:auto;display:block}
.mb-track{fill:var(--rq-panel)}
.mb-bar{fill:#c9c2fb}.mb-bar.cur{fill:var(--rq-v)}.mb-bar.hi{fill:var(--rq-o)}
.mb-v{text-anchor:middle;font:800 10.5px Arial;fill:var(--rq-sub)}.mb-v.hi{fill:var(--rq-o)}.mb-v.cur{fill:var(--rq-v)}
.mb-x{text-anchor:middle;font:700 10.5px 'Noto Sans KR',sans-serif;fill:var(--rq-faint)}
.rq-sub2{margin-top:14px;padding-top:14px;border-top:1px solid var(--rq-line)}
.rq-sub2 h3{margin:0 0 10px;font-size:14px;font-weight:900;color:var(--rq-ink)}
.riq-types{display:flex;flex-direction:column;gap:10px}
.ty-row{display:grid;grid-template-columns:10px 56px minmax(0,1fr) auto;gap:10px;align-items:center;font-size:13px}
.ty-dot{width:10px;height:10px;border-radius:50%}
.ty-dot.o,.ty-bar i.o{background:var(--rq-o)}.ty-dot.v,.ty-bar i.v{background:var(--rq-v)}.ty-dot.g,.ty-bar i.g{background:var(--rq-g)}.ty-dot.b,.ty-bar i.b{background:var(--rq-b)}
.ty-l{color:var(--rq-ink);font-weight:800}
.ty-bar{background:var(--rq-panel);border-radius:99px;height:10px;overflow:hidden}
.ty-bar i{display:block;height:100%;border-radius:99px}
.ty-v{color:var(--rq-faint);font-size:12px;white-space:nowrap}.ty-v b{color:var(--rq-ink);margin-right:4px}

/* 코치 */
.rq-coach ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.rq-coach li{background:var(--rq-panel);border-radius:16px;padding:14px 16px;border-left:4px solid var(--rq-v)}
.rq-coach li.cx-headline{grid-column:1/-1;background:linear-gradient(135deg,#1d2029,#2b2f3b);border-left-color:var(--rq-o);color:#fff}
.rq-coach li.cx-headline p{font-size:16px;font-weight:800;color:#fff}.rq-coach li.cx-headline small{color:#b9bec9}
.rq-coach li.cx-weak{border-left-color:var(--rq-r)}.rq-coach li.cx-goal{border-left-color:var(--rq-g)}
.rq-coach li p{margin:0;font-size:14px;line-height:1.7;color:var(--rq-ink)}
.rq-coach li small{display:block;margin-top:6px;color:var(--rq-faint);font-size:11.5px}
.riq-src{color:var(--rq-faint);font-size:11px;line-height:1.7;margin:0 4px}

/* 반응형 */
@media(max-width:1100px){.rq-g21,.rq-g12{grid-template-columns:minmax(0,1fr)}.rq-rings{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:900px){
  .rq-app{grid-template-columns:minmax(0,1fr);border-radius:24px}
  .rq-side{position:sticky;top:0;z-index:5;height:auto;flex-direction:row;align-items:center;padding:10px 12px;border-right:0;border-bottom:1px solid var(--rq-line)}
  .rq-brand{margin:0 6px 0 2px;font-size:0;gap:0}.rq-brand span{width:30px;height:30px;font-size:15px}
  .rq-side nav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}.rq-side nav::-webkit-scrollbar{display:none}
  .rq-side nav a{height:38px;padding:0 12px;font-size:13.5px;white-space:nowrap}
  .rq-sfoot{display:none}
  .rq-kpis,.rq-minis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rq-rings{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){
  .riq-main{padding:4px 10px 60px}
  .rq-main{padding:18px 14px 22px;gap:14px}
  .rq-app{border-radius:20px}
  .rq-top h1{font-size:21px}
  .rq-kpi{padding:14px;gap:10px;border-radius:16px}.rq-ib{width:38px;height:38px;border-radius:12px}.rq-kv b{font-size:21px}
  .rq-card{padding:16px 14px;border-radius:18px}
  .rq-kpis,.rq-minis{gap:10px}
  .riq-hero h1{font-size:27px;letter-spacing:-1.2px}
  .ty-row{grid-template-columns:10px 48px minmax(0,1fr)}.ty-v{grid-column:2/-1}
}

/* ── 다크 모드 ── */
:root[data-theme="dark"] .riq-page{--rq-bg:#0f1311;--rq-panel:#161b17;--rq-card:#1c221d;--rq-ink:#e9ede7;--rq-sub:#a4aca2;--rq-faint:#7f887e;--rq-line:#2a312a;
  --rq-o2:#3a2416;--rq-v2:#262243;--rq-g2:#14301f;--rq-b2:#152640;--rq-r2:#3a1a22;--rq-shadow:0 1px 2px #0006,0 8px 24px #0005}
:root[data-theme="dark"] .rq-app{box-shadow:0 30px 70px #0008,0 0 0 1px #ffffff0a}
:root[data-theme="dark"] .legal-foot a{border-bottom-color:var(--rq-line)}
:root[data-theme="dark"] .pc-key,:root[data-theme="dark"] .rd-vd{fill:var(--rq-card)}
:root[data-theme="dark"] .pc-tip,:root[data-theme="dark"] .pc-tip::after{background:#e9ede7;color:#141813}
:root[data-theme="dark"] .pc-tip small{color:#5d665c}
:root[data-theme="dark"] .mb-bar{fill:#4a4485}
:root[data-theme="dark"] .riq-note,:root[data-theme="dark"] .riq-collect{color:#f6b48a}
:root[data-theme="dark"] .riq-btn{background:#e9ede7;color:#141813}

/* 연결 문이 닫혀 있을 때 */
.riq-btn.riq-off{opacity:.45;filter:grayscale(1);cursor:not-allowed;pointer-events:none}
.riq-review{margin:10px 0 0;font-size:14px;font-weight:700;color:#b0671b}
.riq-pop{position:fixed;inset:0;z-index:1500;background:#1f1c1899;display:grid;place-items:center;padding:16px}
.riq-pop-in{width:min(420px,100%);background:#fffdf9;color:#1f1c18;border-radius:18px;padding:24px 22px 18px;text-align:center;box-shadow:0 30px 80px #0005;display:grid;gap:10px;justify-items:center}
.riq-pop-in b{font-size:19px;font-weight:900}
.riq-pop-in p{margin:0;font-size:15px;line-height:1.7;color:#4a4439}
.riq-pop-in button{margin-top:6px;min-width:120px;height:42px;border:0;border-radius:10px;background:#e0661a;color:#fff;font:inherit;font-weight:800;font-size:15px;cursor:pointer}
:root[data-theme="dark"] .riq-pop-in{background:#24211d;color:#e9e1d3}
:root[data-theme="dark"] .riq-pop-in p{color:#cfc5b4}
:root[data-theme="dark"] .riq-review{color:#f0a860}

/* 파워 데이터 새로 받기(2026-09-30) — 파워 카드 제목 줄 오른쪽 */
.rq-resync{margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border:1.5px solid #f3c9a8;border-radius:999px;background:#fff7f0;color:#c2531a;font:inherit;font-size:13px;font-weight:800;white-space:nowrap;cursor:pointer;transition:background .15s,border-color .15s,transform .15s}
.rq-resync svg{width:15px;height:15px;flex:none}
.rq-resync:hover{background:#ffe9d8;border-color:#e8621a;transform:translateY(-1px)}
.rq-resync:focus-visible{outline:2px solid #e8621a;outline-offset:2px}
.rq-resync[disabled]{cursor:progress;opacity:.8;transform:none}
.rq-resync.on svg{animation:rqSpin .9s linear infinite}
@keyframes rqSpin{to{transform:rotate(360deg)}}
.rq-resync-msg{margin:-4px 0 12px;font-size:12.5px;line-height:1.5;color:#8a8175}
.rq-resync-msg:empty{display:none}
@media (max-width:600px){.rq-resync{margin-left:0;height:32px;padding:0 12px}.rq-ch:has(.rq-resync){flex-wrap:wrap;row-gap:8px}}
@media (prefers-reduced-motion:reduce){.rq-resync.on svg{animation:none}}
html[data-theme=dark] .rq-resync{background:#2a1f16;border-color:#5a3a22;color:#ffae70}
html[data-theme=dark] .rq-resync:hover{background:#3a2818;border-color:#e8621a}
html[data-theme=dark] .rq-resync-msg{color:#a39a8c}