*{box-sizing:border-box}
:root{
  /* dark palette */
  --bg:#0B0F14; --sea:#0E1620; --land:#1A2430; --border-soft:#232F3D;
  --surface-solid:#141B24;
  --txt:#EAEEF2; --txt-2:#9AA6B2; --txt-cap:#6B7683;
  --divider:rgba(255,255,255,.07);
  --edge:rgba(255,255,255,.06);
  /* glass chrome */
  --glass:rgba(16,22,32,.66);
  --glass-strong:rgba(16,22,32,.72);
  /* bright temperature spectrum (glowing) */
  --g-cool:#34D07A; --g-mid:#4FB8E0; --g-warm:#F0B23E; --g-hot:#F2704A;
  --accent:#F0B23E; --coral:#F2704A; --blue:#4FB8E0;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--txt);font-family:'Pretendard',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden}
a{color:inherit;text-decoration:none}
.num{font-family:'Space Grotesk',system-ui,sans-serif;font-feature-settings:'tnum' 1}
button{font-family:inherit}

/* ===== APP SHELL — full-bleed climate dial ===== */
.dial-app{position:fixed;inset:0;overflow:hidden;background:var(--bg)}

/* ---- Full-bleed map ---- */
#dialMap{position:absolute;inset:0;background:var(--sea)}
#dialMap svg{width:100%;height:100%;display:block;cursor:grab}
#dialMap svg.grabbing{cursor:grabbing}
.pin{cursor:pointer;transition:filter .18s ease}
.pin-scale{transition:none}
.map-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--txt-2);font-size:14px;text-align:center;padding:24px}
.map-fallback button{border:1px solid var(--edge);background:var(--surface-solid);border-radius:11px;padding:9px 20px;font-size:13px;font-weight:600;cursor:pointer;color:var(--txt)}

/* ===== SEASONAL CANVAS TINT — very subtle warmth overlay (JS sets background) ===== */
#seasonTint{position:absolute;inset:0;z-index:5;pointer-events:none;
  mix-blend-mode:screen;transition:background .3s linear}

/* ===== TOP BAR — dark glass material ===== */
.topbar{position:absolute;top:0;left:0;right:0;z-index:30;
  background:var(--glass);
  -webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);
  border-bottom:1px solid var(--divider);
  box-shadow:inset 0 1px 0 var(--edge)}
.topbar-in{display:flex;align-items:center;gap:1rem;padding:.72rem 1.1rem;flex-wrap:wrap}
/* 대륙 필터 — 검색줄 아래, 같은 글래스 chrome 안 */
.pillrow{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;padding:0 1.1rem .7rem}
.brand{display:flex;align-items:baseline;gap:.5rem;flex:none}
.brand b{font-weight:800;font-size:1.32rem;letter-spacing:-.02em;color:var(--txt)}
.brand span{font-size:.75rem;color:var(--txt-2);font-weight:500}
.srchwrap{position:relative;flex:1;max-width:19rem}
.srchbox{display:flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.05);border:1px solid var(--divider);border-radius:.7rem;padding:0 .5rem 0 .35rem;transition:border-color .15s,background .15s}
.srchbox:focus-within{border-color:var(--blue);background:rgba(255,255,255,.08)}
.srch-btn{display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--txt-2);padding:.4rem;border-radius:.5rem;cursor:pointer;transition:color .15s,background .15s,transform .1s}
.srch-btn:hover{color:var(--txt);background:rgba(255,255,255,.06)}
.srch-btn:active{transform:scale(.9)}
.srch{flex:1;border:none;background:transparent;padding:.56rem 0;font-size:.84rem;font-family:inherit;color:var(--txt);letter-spacing:.01em;min-width:0}
.srch::placeholder{color:var(--txt-cap)}
.srch:focus{outline:none}
.srch-clear{border:none;background:transparent;color:var(--txt-cap);font-size:1.1rem;line-height:1;cursor:pointer;padding:.1rem .3rem;border-radius:999px;transition:color .15s,background .15s}
.srch-clear:hover{color:var(--txt);background:rgba(255,255,255,.08)}
/* 자동완성 추천 드롭다운 — 다크 글래스, origin-aware pop */
.suggest{position:absolute;top:calc(100% + .45rem);left:0;right:0;z-index:40;
  background:var(--glass-strong);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid var(--edge);border-radius:.8rem;padding:.3rem;overflow:hidden;
  box-shadow:0 18px 50px -18px rgba(0,0,0,.7);
  transform-origin:top center;animation:sugPop .18s var(--ease-out)}
.suggest[hidden]{display:none}
@keyframes sugPop{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.sug-item{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.5rem .6rem;border-radius:.55rem;cursor:pointer;transition:background .12s}
.sug-item.active,.sug-item:hover{background:rgba(255,255,255,.07)}
.sug-name{font-size:.86rem;font-weight:600;color:var(--txt)}
.sug-co{font-size:.72rem;font-weight:500;color:var(--txt-cap);margin-left:.4rem}
.sug-sc{font-size:.78rem;font-weight:700}
.spacer{flex:1}

/* region pill bar */
.pill{display:inline-flex;align-items:center;gap:.3rem;padding:.36rem .8rem;border-radius:999px;font-size:.8rem;font-weight:600;cursor:pointer;transition:border-color .15s,background .15s,color .15s,transform .1s;user-select:none;
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}
.pill:active{transform:scale(.96)}
.pill-active{background:var(--blue);border:1px solid var(--blue);color:#0B0F14}
.pill-inactive{background:var(--glass);border:1px solid var(--divider);color:var(--txt-2)}
.pill-inactive:hover{border-color:rgba(79,184,224,.5);color:var(--txt)}

/* ===== RIGHT READOUT PANEL (desktop) ===== */
.readout{position:absolute;top:0;right:0;bottom:0;width:23rem;z-index:20;display:flex;flex-direction:column;
  padding:5.4rem 0 8.5rem;pointer-events:none}
.readout-card{margin:0 1rem;pointer-events:auto;display:flex;flex-direction:column;min-height:0;flex:1;
  background:var(--glass-strong);
  -webkit-backdrop-filter:blur(24px) saturate(140%);backdrop-filter:blur(24px) saturate(140%);
  border:1px solid var(--divider);border-radius:1.1rem;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.7),inset 0 1px 0 var(--edge);overflow:hidden}
.readout-head{padding:1rem 1.15rem .75rem;border-bottom:1px solid var(--divider)}
.readout-eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.05em;color:var(--coral);margin-bottom:.4rem}
.readout-title{margin:0;font-size:1.42rem;line-height:1.1;letter-spacing:-.02em;font-weight:800;color:var(--txt)}
.readout-title .num{color:var(--blue)}
.readout-sub{margin:.4rem 0 0;font-size:.72rem;color:var(--txt-2);line-height:1.5}
.readout-clear{display:inline-flex;align-items:center;gap:.3rem;margin-top:.7rem;padding:.4rem .7rem;border:1px solid var(--edge);background:rgba(255,255,255,.05);color:var(--txt);border-radius:999px;font-family:inherit;font-size:.76rem;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,transform .1s}
.readout-clear:hover{background:rgba(255,255,255,.1);border-color:var(--blue)}
.readout-clear:active{transform:scale(.96)}
.readout-clear svg{opacity:.8}
/* peek(모바일) head 내 전체 버튼 */
.peek-head .readout-clear{margin-top:0;padding:.3rem .6rem;font-size:.72rem}
.rank-list{flex:1;overflow-y:auto;padding:.55rem .7rem 1rem;scrollbar-width:thin}
.rank-item{display:flex;align-items:center;gap:.7rem;padding:.55rem .6rem;border-radius:.75rem;cursor:pointer;transition:background .14s;will-change:transform}
.rank-item:active{background:rgba(255,255,255,.06)}
.rank-num{flex:none;width:1.5rem;text-align:center;font-size:.92rem;font-weight:700}
.rank-body{flex:1;min-width:0}
.rank-name{font-size:.92rem;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--txt)}
.rank-name .co{font-size:.72rem;font-weight:500;color:var(--txt-2);margin-left:.3rem}
.rank-meta{margin-top:.15rem;font-size:.72rem;color:var(--txt-cap)}
.rank-score{flex:none;display:flex;align-items:center;gap:.5rem}
.rank-bar{width:2.6rem;height:.35rem;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden}
.rank-bar>i{display:block;height:100%;border-radius:999px}
.rank-val{font-size:.78rem;font-weight:700;min-width:1.6rem;text-align:right}
.rank-empty{padding:2.5rem 1rem;text-align:center;color:var(--txt-2);font-size:.85rem}

/* ===== TIME SCRUBBER ===== */
.scrubber{position:absolute;left:0;right:0;bottom:0;z-index:28;padding:0 1.1rem 1.15rem;pointer-events:none}
.scrub-inner{max-width:min(60rem,calc(100% - 24rem));margin-left:1rem;pointer-events:auto;
  background:var(--glass-strong);
  -webkit-backdrop-filter:blur(24px) saturate(140%);backdrop-filter:blur(24px) saturate(140%);
  border:1px solid var(--divider);border-radius:1.2rem;
  box-shadow:0 -4px 40px -12px rgba(0,0,0,.6),0 24px 50px -28px rgba(0,0,0,.7),inset 0 1px 0 var(--edge);
  padding:.85rem 1rem 1rem}
.scrub-lead{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.6rem;padding:0 .2rem}
.scrub-month{display:flex;align-items:baseline;gap:.55rem}
.scrub-month .m{font-size:1.9rem;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--txt)}
.scrub-month .lbl{font-size:.78rem;font-weight:600;color:var(--txt-2)}
.scrub-count{font-size:.8rem;font-weight:600;color:var(--txt-2);text-align:right}
.scrub-count b{color:var(--g-cool);font-size:1rem}
.track{position:relative;height:3.1rem;touch-action:none;user-select:none;-webkit-user-select:none}
.track-rail{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:2.4rem;border-radius:.85rem;
  background:rgba(255,255,255,.04);border:1px solid var(--divider);overflow:hidden}
.ticks{position:absolute;inset:0;display:flex}
.tick{flex:1;display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-size:.72rem;font-weight:600;color:var(--txt-cap);border-left:1px solid rgba(255,255,255,.05);transition:color .18s}
.tick:first-child{border-left:none}
.tick.on{color:var(--txt);font-weight:700}
.knob{position:absolute;top:50%;width:2.9rem;height:2.9rem;border-radius:.85rem;
  background:linear-gradient(180deg,#2A3644,#1A2430);border:1px solid var(--edge);
  box-shadow:0 6px 18px -6px rgba(0,0,0,.7),0 0 0 1px rgba(79,184,224,.18),0 1px 0 rgba(255,255,255,.08) inset;
  transform:translate(-50%,-50%);will-change:left,transform;cursor:grab;
  display:flex;align-items:center;justify-content:center}
.knob:active,.track.dragging .knob{cursor:grabbing}
.knob .num{font-size:1rem;font-weight:700;color:var(--txt)}
.knob::after{content:"";position:absolute;left:50%;bottom:.32rem;transform:translateX(-50%);width:1rem;height:.16rem;border-radius:999px;background:rgba(255,255,255,.18)}
.knob:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* ===== MOBILE PEEK SHEET (ranking) ===== */
.peek{display:none}

/* ===== DETAIL SHEET ===== */
.sheet-scrim{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.5);opacity:0;transition:opacity .28s var(--ease-out);pointer-events:none}
.sheet-scrim.show{opacity:1;pointer-events:auto}
.sheet{position:fixed;z-index:41;background:var(--surface-solid);color:var(--txt);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
/* desktop: side sheet — dark glass */
.sheet.side{top:0;right:0;bottom:0;width:min(40rem,92vw);
  background:rgba(16,22,32,.82);
  -webkit-backdrop-filter:blur(24px) saturate(140%);backdrop-filter:blur(24px) saturate(140%);
  border-left:1px solid var(--divider);
  box-shadow:-30px 0 70px -30px rgba(0,0,0,.8);
  transform:translateX(100%) scale(.98);opacity:.6;
  transition:transform .28s var(--ease-out),opacity .28s var(--ease-out),backdrop-filter .28s var(--ease-out),-webkit-backdrop-filter .28s var(--ease-out)}
.sheet.side.in{transform:translateX(0) scale(1);opacity:1}
/* mobile: bottom drawer — opaque dark for legibility */
.sheet.bottom{left:0;right:0;bottom:0;max-height:92vh;border-radius:1.3rem 1.3rem 0 0;
  background:var(--surface-solid);
  box-shadow:0 -30px 70px -30px rgba(0,0,0,.8);
  transform:translateY(100%);transition:transform .32s var(--ease-drawer);touch-action:pan-y}
.sheet.bottom.in{transform:translateY(0)}
.sheet-grip{position:sticky;top:0;z-index:2;display:none;justify-content:center;padding:.7rem 0 .4rem;background:linear-gradient(180deg,var(--surface-solid) 70%,transparent);cursor:grab}
.sheet-grip>i{width:2.6rem;height:.28rem;border-radius:999px;background:rgba(255,255,255,.22)}
.sheet.bottom .sheet-grip{display:flex}
.sheet-close{position:sticky;top:.7rem;float:right;margin:.7rem .9rem 0 0;z-index:3;display:flex;align-items:center;justify-content:center;width:2.2rem;height:2.2rem;border-radius:999px;border:1px solid var(--divider);background:rgba(255,255,255,.06);cursor:pointer;color:var(--txt);transition:background .15s,transform .1s}
.sheet-close:hover{background:var(--blue);color:#0B0F14}
.sheet-close:active{transform:scale(.94)}
.sheet-body{padding:0 clamp(1.2rem,3vw,2.2rem) 3rem}

/* detail content */
.hero{position:relative;border-radius:1.25rem;overflow:hidden;height:clamp(13rem,30vh,18rem);background:linear-gradient(135deg,#152232,#0E1620);border:1px solid var(--divider);margin:.5rem 0 1.3rem}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,15,20,.86) 0%,rgba(11,15,20,.5) 48%,rgba(11,15,20,.1) 82%);pointer-events:none}
.hero-cap{position:absolute;left:0;bottom:0;padding:1.6rem 1.8rem;max-width:38rem}
.badge{display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;font-weight:700;color:#0B0F14;padding:.42rem .8rem;border-radius:999px}
.hero-name{margin:.85rem 0 0;display:flex;align-items:flex-end;gap:.7rem}
.hero-name h1{margin:0;font-size:clamp(2rem,5vw,2.7rem);font-weight:800;letter-spacing:-.03em;color:var(--txt);line-height:1.02}
.hero-name span{font-size:1rem;font-weight:600;color:var(--txt-2);margin-bottom:.3rem}
.hero-blurb{margin:.75rem 0 0;font-size:1rem;font-weight:500;color:var(--txt);line-height:1.5}
.hero-temp{margin-top:1rem;display:flex;align-items:baseline;gap:.5rem;color:var(--txt)}
.hero-temp .big{font-size:2rem;font-weight:600;line-height:1}
.hero-temp .u{font-size:1rem;color:var(--txt-2)}
.hero-temp .cap{font-size:.8rem;color:var(--txt-2);margin-left:.3rem}
.desc{margin:0 0 1.5rem;font-size:.92rem;line-height:1.7;color:var(--txt-2);max-width:40rem}
.panel{background:rgba(255,255,255,.04);border:1px solid var(--divider);border-radius:1rem;padding:1.15rem 1.3rem;margin-bottom:1.25rem}
.panel h3{color:var(--txt)}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.4rem}
.panel-head h3{margin:0;font-size:.95rem;font-weight:700}
.panel-head .leg{display:flex;gap:.9rem;align-items:center}
.panel-head .leg span{display:flex;align-items:center;gap:.4rem;font-size:.72rem;color:var(--txt-2);font-weight:500}
#chartDiv{width:100%;height:18rem}
.grid2{display:grid;grid-template-columns:1fr;gap:1.25rem}
@media(min-width:34rem){.grid2{grid-template-columns:1.15fr .85fr}}
.mtable{background:rgba(255,255,255,.04);border:1px solid var(--divider);border-radius:1rem;overflow:hidden}
.mtable-head{padding:.95rem 1.2rem;border-bottom:1px solid var(--divider);display:flex;align-items:baseline;justify-content:space-between;gap:.6rem}
.mtable-head h3{margin:0;font-size:.95rem;font-weight:700;color:var(--txt)}
.mtable-head span{font-size:.72rem;color:var(--txt-2);font-weight:500}
.mtable-cols,.mrow{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1.2fr;padding:.65rem 1.2rem}
.mtable-cols{background:rgba(255,255,255,.03);border-bottom:1px solid var(--divider);font-size:.72rem;font-weight:700;color:var(--txt-2)}
.mrow{border-bottom:1px solid var(--divider);font-size:.82rem;cursor:pointer;transition:background .12s;color:var(--txt)}
.mrow:hover{background:rgba(255,255,255,.05)}
.mrow.cur{background:rgba(242,112,74,.12)}
.side-col{display:flex;flex-direction:column;gap:1.25rem}
.sim{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.7rem .85rem;border:1px solid var(--divider);border-radius:.7rem;cursor:pointer;transition:border-color .15s,background .15s;background:rgba(255,255,255,.03)}
.sim:hover{border-color:rgba(79,184,224,.5);background:rgba(255,255,255,.06)}
.tag{font-size:.82rem;font-weight:500;padding:.44rem .8rem;border-radius:999px;background:rgba(255,255,255,.07);color:var(--txt-2)}
.aff{display:flex;align-items:center;justify-content:space-between;gap:.6rem;font-size:.85rem;font-weight:600;padding:.8rem 1rem;border-radius:.7rem;border:1px solid var(--divider);color:var(--txt);transition:background .15s,color .15s,border-color .15s}
.aff:hover{background:var(--blue);color:#0B0F14;border-color:var(--blue)}
.aff .p{font-weight:700;color:var(--coral)}
.aff:hover .p{color:#0B0F14}

.card:focus-visible,.pill:focus-visible,.mrow:focus-visible,.sim:focus-visible,.rank-item:focus-visible,.sheet-close:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* ===== RESPONSIVE: MOBILE ===== */
@media(max-width:52rem){
  /* 지도: 풀블리드 (뒤에 깔림). peek이 그 위로 올라온다 → 중간 빈 공간 없음 */
  #dialMap{inset:0;height:auto}
  .readout{display:none}
  .scrubber{padding:0;z-index:24}
  .scrub-inner{max-width:none;margin:0;border-radius:1.2rem 1.2rem 0 0}
  /* peek mini-sheet for ranking — CSS-first 3단(collapsed/peek/full).
     높이/노출량을 CSS 기본값으로 견고하게 준다(JS는 보정만). 헤드리스 첫 페인트에서도 head+상위 행이 보임.
     --peek-scrub: 하단 스크러버가 차지하는 높이(겹침 방지, JS가 실측 보정).
     --peek-shown: 현재 화면에 노출된 peek 높이(collapsed/peek/full 상태에 따라 JS가 세팅). */
  .peek{display:flex;flex-direction:column;position:absolute;left:0;right:0;
    bottom:var(--peek-scrub,7.5rem);z-index:22;
    height:var(--peek-full,84vh);
    transform:translateY(calc(100% - var(--peek-shown,62vh)));
    background:var(--surface-solid);
    border-radius:1.2rem 1.2rem 0 0;border:1px solid var(--divider);
    box-shadow:0 -20px 50px -24px rgba(0,0,0,.7);
    transition:transform .34s var(--ease-drawer)}
  .peek.dragging{transition:none}
  .peek-grip,.peek-head{touch-action:none}
  .peek .rank-list{overscroll-behavior:contain}
  .peek-grip{display:flex;justify-content:center;padding:.6rem 0 .35rem;cursor:grab;flex:none}
  .peek-grip>i{width:2.6rem;height:.28rem;border-radius:999px;background:rgba(255,255,255,.22)}
  .peek-head{padding:0 1.1rem .55rem;display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;flex:none}
  .peek-head .t{font-size:.95rem;font-weight:800;letter-spacing:-.01em;color:var(--txt)}
  .peek-head .t .num{color:var(--blue)}
  .peek-head .c{font-size:.78rem;font-weight:600;color:var(--txt-2)}
  .peek-head .c b{color:var(--g-cool)}
  .peek .rank-list{flex:1;overflow-y:auto;padding:.3rem .55rem 1.5rem}
  .topbar-in{padding:.6rem .9rem}
  .brand span{display:none}
  .srchwrap{max-width:none;order:3;flex-basis:100%}
  .spacer{display:none}
}
@media(max-width:52rem) and (min-width:1px){
  .sheet.side{display:none}
}
@media(min-width:52.01rem){
  .sheet.bottom{display:none}
}

/* ===== ACCESSIBILITY MEDIA QUERIES ===== */
/* touch hover false-positive guard */
@media (hover:hover) and (pointer:fine){
  .rank-item:hover{background:rgba(255,255,255,.06)}
  .sim:hover{border-color:rgba(79,184,224,.5);background:rgba(255,255,255,.06)}
}
@media not all and (hover:hover){
  .rank-item:hover,.sim:hover{background:inherit}
}

/* reduced motion: keep scrub + seasonal color shift, drop inertia/spring/hint & tint transition; instant snap; sheets crossfade */
@media (prefers-reduced-motion:reduce){
  .knob{transition:none!important}
  .pin,.pin-scale,.tick{transition:none!important}
  #seasonTint{transition:none!important}
  .sheet.side,.sheet.bottom{transition:opacity .18s ease!important;transform:none!important}
  .sheet.side{opacity:0}
  .sheet.side.in{opacity:1;transform:none!important}
  .sheet.bottom{opacity:0;transform:none!important}
  .sheet.bottom.in{opacity:1}
  .peek{transition:none!important}
  .rank-item{transition:none!important}
  .sheet-scrim{transition:opacity .15s ease!important}
}

/* reduced transparency: solid dark surfaces, no blur, bright solid borders */
@media (prefers-reduced-transparency:reduce){
  .topbar,.pill,.readout-card,.scrub-inner,.peek,.sheet.side{
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .topbar{background:var(--surface-solid);border-bottom:1px solid rgba(255,255,255,.18)}
  .pill-inactive{background:var(--surface-solid);border:1px solid rgba(255,255,255,.2)}
  .readout-card{background:var(--surface-solid);border:1px solid rgba(255,255,255,.18)}
  .scrub-inner{background:var(--surface-solid);border:1px solid rgba(255,255,255,.18)}
  .peek{background:var(--surface-solid);border:1px solid rgba(255,255,255,.18)}
  .sheet.side{background:var(--surface-solid);border-left:1px solid rgba(255,255,255,.18)}
}

/* high contrast: near-white text, bright contrast borders, dimmer tint for legibility */
@media (prefers-contrast:more){
  :root{--txt:#FFFFFF;--txt-2:#C4CCD4}
  #seasonTint{opacity:.55}
  .pill-inactive{border:1.5px solid rgba(255,255,255,.55)}
  .readout-card,.scrub-inner,.panel,.mtable,.sim,.aff{border:1.5px solid rgba(255,255,255,.4)}
  .rank-bar{border:1px solid rgba(255,255,255,.35)}
  .tick{color:#B4BCC6}
  .pin-dot{stroke:#FFFFFF!important}
}