/* XTrail 공통 테마 — 삼우 트윈 (DESIGN.md). 각 화면의 <style> 뒤에 불러와 덮어쓴다 */
:root{
  --bg:#0F1418; --bg2:#161D22; --line:#24323A;
  --fg:#EEF3F6; --body:#C3CDD3; --dim:#93A3AC; --dim2:#5B6C76;
  --cy:#26E9FF; --cy-soft:rgba(38,233,255,.12); --cy-line:rgba(38,233,255,.45);
  --trail:#26E9FF; --plan:#EEF3F6; --ok:#26E9FF; --warn:#FFB547; --bad:#FFB547;
  --r:8px; --r-lg:12px;
  --sans:"Pretendard Variable",Pretendard,system-ui,-apple-system,"Segoe UI","Noto Sans KR","Malgun Gothic",sans-serif;
  --mono:"Pretendard Variable",Pretendard,system-ui,sans-serif;
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-reveal:cubic-bezier(.22,1,.36,1);
  --t-press:140ms; --t-ui:200ms;
}
html{color-scheme:dark}
body{
  font-family:var(--sans); background-color:var(--bg); color:var(--fg);
  background-image:linear-gradient(rgba(38,233,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(38,233,255,.045) 1px, transparent 1px);
  background-size:32px 32px; font-variant-numeric:tabular-nums;
}
h1,h2,h3{font-weight:900; letter-spacing:-.01em}
:focus-visible{outline:2px solid var(--cy)!important; outline-offset:2px}

/* 주 버튼(화면당 하나) */
.btn.big, .btn.main, a.new:not(.alt){background:var(--cy)!important; color:var(--bg)!important; border-color:var(--cy)!important; font-weight:800}
button.go, .btn.wide{background:var(--cy)!important; color:var(--bg)!important; border-color:var(--cy)!important; font-weight:800}
/* 보조 버튼 */
.btn{border-color:var(--line)}
/* 선택 상태 */
.seg button[aria-pressed=true], .tabs button[aria-selected=true], .tab[aria-selected=true], .btn[aria-pressed=true], .tag.on{
  background:var(--cy-soft)!important; color:var(--cy)!important; box-shadow:inset 0 0 0 1px var(--cy)}
/* 누름 피드백 */
button, .btn, a.new, a.map{transition:transform var(--t-press) var(--ease-out), border-color var(--t-ui) var(--ease-out)}
button:active:not(:disabled), .btn:active, a.new:active, a.map:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .btn:hover:not(:disabled), a.map:hover, a.new.alt:hover{border-color:var(--cy-line)}
}
input, select, textarea{accent-color:var(--cy)}
@media (prefers-reduced-motion:reduce){
  button:active, .btn:active, a.new:active, a.map:active{transform:none}
}

/* 진행 표시 */
.steps li.done .dot{background:var(--cy)!important; color:var(--bg)!important; border-color:var(--cy)!important}
.meter i{background:var(--cy)!important}

/* 운동 종류 사진 (운동 기록·코스 계획 오른쪽 창) */
.actimg{position:relative; aspect-ratio:16/9; border-radius:8px; overflow:hidden; border:1px solid var(--cy-line); background:#0b1013; flex:none}
.actimg img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 220ms var(--ease-out); filter:saturate(.75) brightness(.92)}
.actimg img.on{opacity:1}
.actimg::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(15,20,24,.88), rgba(15,20,24,0) 55%); pointer-events:none}
.actimg .tk{position:absolute; inset:8px; z-index:1; pointer-events:none;
  background:linear-gradient(var(--cy),var(--cy)) top left/14px 2px no-repeat, linear-gradient(var(--cy),var(--cy)) top left/2px 14px no-repeat,
             linear-gradient(var(--cy),var(--cy)) top right/14px 2px no-repeat, linear-gradient(var(--cy),var(--cy)) top right/2px 14px no-repeat,
             linear-gradient(var(--cy),var(--cy)) bottom left/14px 2px no-repeat, linear-gradient(var(--cy),var(--cy)) bottom left/2px 14px no-repeat,
             linear-gradient(var(--cy),var(--cy)) bottom right/14px 2px no-repeat, linear-gradient(var(--cy),var(--cy)) bottom right/2px 14px no-repeat}
.actimg .cap{position:absolute; left:16px; right:16px; bottom:12px; z-index:2; color:var(--fg); line-height:1.3}
.actimg .cap b{display:block; font-size:18px; font-weight:900}
.actimg .cap span{font-size:12px; color:var(--body)}
@media (max-width:859px){ .actimg{aspect-ratio:auto; height:112px} .actimg .cap b{font-size:16px} }
@media (prefers-reduced-motion:reduce){ .actimg img{transition:none} }