/* Project RI - style.css (RC3 Sprint1 visual restore) */

:root{
  --bg:#fbf8f1;
  --surface:#fffef9;
  --surface-soft:#f7f3ed;
  --text:#103727;
  --ink:#171b17;
  --muted:#707870;
  --line:#dcefcf;
  --divider:#ece5dc;
  --shadow:0 14px 34px rgba(44,52,43,.11);
  --excellent:#4b8fe8;
  --good:#42ad66;
  --fair:#e4ba46;
  --caution:#ed8b3a;
  --poor:#d95858;
  --tone:var(--good);
  --tone-soft:#eaf7e8;
  --tone-border:#b9dfaa;
  --tone-shadow:rgba(66,173,102,.24);
}

body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 12% 0%, rgba(215,235,198,.4), transparent 28rem),
    linear-gradient(180deg, #fffdf8 0%, var(--bg) 100%);
  color:var(--text);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.app-splash{
  position:fixed;
  inset:0;
  z-index:3000;
  display:grid;
  place-items:center;
  background:#fcf5e5;
  opacity:1;
  transition:opacity .24s ease;
}

.app-splash.is-hidden{
  opacity:0;
  pointer-events:none;
}

.app-splash img{
  width:min(78vw, 25rem);
  max-height:72vh;
  object-fit:contain;
}

.app-header{
  width:100%;
  max-width:58rem;
  margin:0 auto;
  padding:.95rem 1.25rem .75rem;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:.75rem;
}

.app-header h1{
  grid-column:2;
  margin:0;
  color:#113b2a;
  font-size:2rem;
  font-weight:850;
  line-height:1;
  text-align:center;
}

.refresh-button{
  width:2.3rem;
  height:2.3rem;
  display:grid;
  place-items:center;
  border:1px solid #d8eccd;
  border-radius:50%;
  background:rgba(255,254,249,.94);
  color:#295c3b;
  font-size:1.25rem;
  font-weight:850;
  line-height:1;
  box-shadow:0 8px 18px rgba(44,52,43,.1);
}

.refresh-button:disabled{
  opacity:.55;
  cursor:progress;
}

.refresh-controls{
  grid-column:3;
  justify-self:end;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.55rem;
  min-width:0;
}

.refresh-status{
  color:#6f8b73;
  font-size:.78rem;
  font-weight:750;
  white-space:nowrap;
}

.refresh-status.is-active{
  animation:refreshStatusBlink 1s ease-in-out infinite;
}

.refresh-status[hidden]{
  display:none;
}

@keyframes refreshStatusBlink{
  0%, 100%{
    opacity:1;
  }

  50%{
    opacity:.3;
  }
}

@media (prefers-reduced-motion: reduce){
  .refresh-status.is-active{
    animation:none;
    opacity:1;
  }
}

.app-shell{
  width:calc(100% - 2rem);
  max-width:58rem;
  margin:0 auto;
  padding:0 0 2.25rem;
}

#error-message{
  margin:0 0 1rem;
  padding:.8rem 1rem;
  border:1px solid rgba(217,88,88,.22);
  border-radius:1rem;
  background:#fff2f0;
  color:#9d3838;
  font-size:.92rem;
  line-height:1.45;
}

#error-message[hidden]{
  display:none;
}

.running-card,
.recommend-card,
.map-card,
.reason-card,
.share-card{
  background:rgba(255,254,249,.94);
  border:1px solid var(--line);
  border-radius:1.75rem;
  box-shadow:var(--shadow);
}

.running-card{
  --tone:var(--good);
  --tone-soft:#eaf7e8;
  --tone-border:#b9dfaa;
  --tone-shadow:rgba(66,173,102,.24);
  position:relative;
  padding:1.75rem 1.9rem 1.35rem;
  overflow:hidden;
  transition:opacity .2s ease, filter .2s ease;
}

.tone-excellent{
  --tone:var(--excellent);
  --tone-soft:#eef5ff;
  --tone-border:#b4cdf4;
  --tone-shadow:rgba(75,143,232,.24);
  --timeline-tone:var(--excellent);
}

.tone-good{
  --tone:var(--good);
  --tone-soft:#eaf7e8;
  --tone-border:#b9dfaa;
  --tone-shadow:rgba(66,173,102,.24);
  --timeline-tone:var(--good);
}

.tone-fair{
  --tone:var(--fair);
  --tone-soft:#fff7dc;
  --tone-border:#ecd789;
  --tone-shadow:rgba(228,186,70,.24);
  --timeline-tone:var(--fair);
}

.tone-caution{
  --tone:var(--caution);
  --tone-soft:#fff0e4;
  --tone-border:#f2bd83;
  --tone-shadow:rgba(237,139,58,.24);
  --timeline-tone:var(--caution);
}

.tone-poor{
  --tone:var(--poor);
  --tone-soft:#fff0f0;
  --tone-border:#efa4a4;
  --tone-shadow:rgba(217,88,88,.24);
  --timeline-tone:var(--poor);
}

.running-card__content{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(13rem, 18.5rem);
  align-items:center;
  gap:1.5rem;
}

.title-row{
  display:flex;
  align-items:center;
  gap:.65rem;
}

.title-copy{
  display:grid;
  gap:.18rem;
}

.title-row h2{
  margin:0;
  color:#123a29;
  font-size:2.15rem;
  font-weight:900;
  line-height:1.15;
}

.title-copy p{
  margin:0;
  color:#8a948c;
  font-size:.92rem;
  font-weight:650;
  line-height:1.2;
}

.info-button{
  width:1.72rem;
  height:1.72rem;
  display:grid;
  place-items:center;
  border:.14rem solid #a7aaa5;
  border-radius:50%;
  background:#fffef9;
  color:#8b8f8a;
  font-size:.98rem;
  font-weight:850;
  line-height:1;
}

.score-line{
  margin:1.15rem 0 .95rem;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.85rem 1.15rem;
}

#running-score{
  min-width:15rem;
  display:inline-flex;
  align-items:baseline;
  gap:.04em;
  color:var(--tone);
  font-size:7.6rem;
  font-weight:950;
  line-height:.82;
  white-space:nowrap;
}

.score-number{
  font:inherit;
  line-height:.82;
}

.score-unit{
  font-size:.42em;
  line-height:1;
}

.grade-pill{
  min-height:3.05rem;
  padding:.45rem 1.25rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(255,255,255,.2), transparent), var(--tone);
  color:#fff;
  font-size:1.35rem;
  font-weight:850;
  letter-spacing:0;
  box-shadow:0 .55rem 1.1rem var(--tone-shadow);
}

.grade-pill::after{
  content:"";
  width:1.05rem;
  height:1.05rem;
  margin-left:.55rem;
  border:.18rem solid currentColor;
  border-left:0;
  border-bottom:0;
  transform:rotate(45deg);
}

.running-summary{
  margin:1.05rem 0 .85rem;
  color:var(--tone);
  font-size:1.35rem;
  font-weight:700;
  line-height:1.45;
}

.weather-adjustment{
  margin:-.42rem 0 .8rem;
  color:#6f796f;
  font-size:.86rem;
  font-weight:700;
  line-height:1.35;
}

.score-timeline{
  max-width:30rem;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:.45rem;
}

.timeline-item{
  min-height:4.7rem;
  padding:.55rem .45rem;
  display:grid;
  align-content:center;
  justify-items:center;
  gap:.14rem;
  border:1px solid var(--tone-border, #e8ece5);
  border-radius:1rem;
  background:rgba(255,255,255,.7);
  text-align:center;
}

.timeline-item.is-today{
  border-color:var(--tone-border);
  background:var(--tone-soft);
}

.timeline-label{
  color:#516157;
  font-size:.78rem;
  font-weight:800;
}

.timeline-score{
  color:var(--timeline-tone, var(--text));
  font-size:1.42rem;
  line-height:1;
}

.timeline-time{
  justify-self:center;
  color:#7d877f;
  font-size:.64rem;
  line-height:1.2;
  text-align:center;
  white-space:nowrap;
}

.running-meta{
  margin-top:.7rem;
  display:flex;
  flex-wrap:wrap;
  gap:.35rem .7rem;
  color:#7a827a;
  font-size:.82rem;
  line-height:1.35;
}

.running-meta span{
  display:inline-flex;
  align-items:center;
}

.running-meta span + span::before{
  content:"";
  width:.28rem;
  height:.28rem;
  margin-right:.7rem;
  border-radius:50%;
  background:#c8d0c8;
}

.mascot-panel{
  min-height:22rem;
  display:grid;
  align-content:center;
  justify-items:center;
  gap:.25rem;
}

.cat-message{
  width:9.6rem;
  min-height:6.1rem;
  padding:1.25rem 1rem .9rem;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.08rem;
  border:.15rem solid #c7b797;
  border-radius:50%;
  background:rgba(255,254,249,.96);
  color:#26372c;
  font-size:1.02rem;
  font-weight:750;
  line-height:1.35;
  word-break:keep-all;
  overflow-wrap:normal;
  line-break:strict;
  text-align:center;
  transform:translateY(.35rem);
  z-index:2;
}

.cat-message-line{
  display:block;
  white-space:nowrap;
}

.cat-message::after{
  content:"";
  position:absolute;
  right:.55rem;
  bottom:.55rem;
  width:1.25rem;
  height:1rem;
  border-right:.15rem solid #c7b797;
  border-bottom:.15rem solid #c7b797;
  background:var(--surface);
  transform:rotate(26deg);
}

.cat-message::before{
  content:none;
}

.cat-mascot{
  width:min(14.85rem, 100%);
  height:auto;
  margin-top:-.55rem;
  object-fit:contain;
  mix-blend-mode:multiply;
  filter:contrast(1.02) saturate(.98);
}

.recommend-card{
  margin-top:1rem;
  padding:1.2rem 1.6rem 1.45rem;
}

.section-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:.9rem;
}

.section-heading h2{
  margin:0;
  color:#111;
  font-size:1.42rem;
  font-weight:850;
}

.text-action{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  color:#202521;
  font-size:1rem;
}

.text-action span{
  font-size:1.55rem;
  line-height:1;
}

.recommend-item{
  width:100%;
  min-height:6.2rem;
  padding:1rem 1.25rem;
  display:grid;
  grid-template-columns:4.35rem minmax(0, 1fr) auto;
  align-items:center;
  gap:1.1rem;
  border-radius:1.25rem;
  background:linear-gradient(135deg, #f8f1eb, #fffdf8);
  color:var(--ink);
  text-align:left;
}

.shoe-icon{
  width:4.2rem;
  height:4.2rem;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#e6f3df;
  color:#47a660;
  font-size:2.4rem;
  font-weight:900;
  transform:rotate(-8deg);
}

.recommend-copy{
  min-width:0;
  display:grid;
  gap:.28rem;
}

.recommend-copy strong{
  color:#101511;
  font-size:1.8rem;
  font-weight:900;
  line-height:1.1;
}

.recommend-copy span{
  color:#3f4540;
  font-size:1rem;
  line-height:1.4;
}

.recommend-arrow{
  color:#222;
  font-size:2.1rem;
  line-height:1;
}

.map-card{
  margin-top:1rem;
  position:relative;
  overflow:hidden;
  border-color:transparent;
}

#map{
  width:100%;
  height:15.2rem;
  background:#e8f3e2;
}

.location-badge{
  position:absolute;
  top:1rem;
  left:1rem;
  z-index:500;
  max-width:20rem;
  padding:.85rem 1.15rem;
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  align-items:center;
  gap:.8rem;
  border-radius:1.05rem;
  background:rgba(255,255,255,.93);
  box-shadow:0 8px 22px rgba(37,44,38,.12);
}

.location-badge > span{
  color:#4b6d54;
  font-size:1.1rem;
}

.location-badge strong{
  display:block;
  overflow:hidden;
  color:#141814;
  font-size:1.08rem;
  font-weight:850;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.location-badge small{
  display:block;
  margin:0 0 .16rem;
  color:#4f6255;
  font-size:.82rem;
  font-weight:750;
}

.locate-button{
  position:absolute;
  right:1.2rem;
  top:8.4rem;
  z-index:500;
  width:4.15rem;
  height:4.15rem;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fffef9;
  color:#171b17;
  font-size:2.2rem;
  font-weight:800;
  box-shadow:0 10px 24px rgba(34,42,35,.14);
}

.environment-card{
  padding:1.35rem .75rem 1.1rem;
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  background:rgba(255,254,249,.96);
  border-top:1px solid #eee7de;
}

.environment-item{
  min-width:0;
  display:grid;
  justify-items:center;
  gap:.22rem;
  padding:.15rem .35rem;
  color:#353b36;
  text-align:center;
  border-right:1px solid #e6dfd6;
}

.environment-item:last-child{
  border-right:0;
}

.environment-icon{
  min-height:1.6rem;
  display:grid;
  place-items:center;
  color:#559fca;
  font-size:.85rem;
  font-weight:900;
}

.environment-item > span:not(.environment-icon){
  font-size:.92rem;
}

.environment-item strong{
  color:#070907;
  font-size:1.45rem;
  line-height:1.1;
}

.environment-item em{
  color:#2786da;
  font-size:.82rem;
  font-style:normal;
  font-weight:750;
}

.environment-item.tone-excellent .environment-icon,
.environment-item.tone-excellent em{
  color:var(--excellent);
}

.environment-item.tone-good .environment-icon,
.environment-item.tone-good em{
  color:var(--good);
}

.environment-item.tone-fair .environment-icon,
.environment-item.tone-fair em{
  color:var(--fair);
}

.environment-item.tone-caution .environment-icon,
.environment-item.tone-caution em{
  color:var(--caution);
}

.environment-item.tone-poor .environment-icon,
.environment-item.tone-poor em{
  color:var(--poor);
}

.reason-card{
  width:100%;
  margin-top:1rem;
  padding:1rem 1.25rem;
  display:grid;
  grid-template-columns:3rem minmax(0, 1fr) auto;
  align-items:center;
  gap:.75rem;
  color:#121713;
  text-align:left;
}

.reason-icon{
  width:2.4rem;
  height:2.4rem;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#e3f3dc;
  color:#4aa75b;
  font-size:1.2rem;
  font-weight:900;
}

.reason-card strong{
  font-size:1.25rem;
  line-height:1.35;
}

.reason-card > span:last-child{
  color:#161b17;
  font-size:1.8rem;
  line-height:1;
}

.share-card{
  margin-top:1rem;
  padding:1rem 1.15rem 1.1rem;
}

.share-card-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.75rem;
  margin-bottom:.75rem;
}

.share-card h2{
  margin:0;
  color:#172d20;
  font-size:1.08rem;
  font-weight:850;
  line-height:1.25;
}

.share-status{
  margin:0;
  color:#758176;
  font-size:.74rem;
  font-weight:700;
  line-height:1.35;
  text-align:right;
}

.share-actions{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:.32rem;
}

.share-action{
  min-width:0;
  min-height:4.75rem;
  padding:.2rem 0;
  display:grid;
  justify-items:center;
  align-content:start;
  gap:.35rem;
  border:0;
  border-radius:0;
  background:transparent;
  color:#244a32;
  font-weight:850;
  line-height:1.2;
  text-align:center;
}

.share-action-icon{
  width:clamp(2.75rem, 10.5vw, 3.25rem);
  height:clamp(2.75rem, 10.5vw, 3.25rem);
  display:grid;
  place-items:center;
  border-radius:50%;
  box-shadow:0 .45rem .9rem rgba(45, 74, 46, .12);
}

.share-action-icon svg{
  width:68%;
  height:68%;
  overflow:visible;
}

.share-action-icon-kakao{
  background:#fee500;
}

.share-action-icon-kakao svg{
  fill:#111111;
}

.share-action-icon-kakao text{
  fill:#fee500;
  font-size:4.4px;
  font-weight:900;
}

.share-action-icon-copy-url{
  background:#2f6f46;
}

.share-action-icon-copy-url svg{
  fill:none;
  stroke:#ffffff;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:2.4;
}

.share-action-icon-message{
  background:#4b8fe8;
}

.share-action-icon-message svg{
  fill:none;
  stroke:#ffffff;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:2.3;
}

.share-action-label{
  max-width:100%;
  color:#244a32;
  font-size:clamp(.58rem, 2.2vw, .76rem);
  font-weight:850;
  line-height:1.15;
  white-space:nowrap;
}

.share-action:disabled{
  opacity:.5;
  cursor:progress;
}

.app-footer{
  padding:1.35rem .4rem .1rem;
  display:grid;
  grid-template-columns:minmax(7rem, 12rem) minmax(0, 1fr);
  align-items:center;
  gap:1.25rem;
  color:#555f58;
}

.app-footer img{
  width:100%;
  height:auto;
  mix-blend-mode:multiply;
}

.app-footer p{
  margin:0 0 .35rem;
  color:#444c46;
  font-size:1.12rem;
  line-height:1.35;
}

.app-footer small{
  color:#7a827b;
  font-size:.96rem;
}

.app-source{
  margin:1.1rem auto .35rem;
  padding:0 .35rem max(1.2rem, env(safe-area-inset-bottom));
  color:#768176;
  font-size:.72rem;
  line-height:1.45;
  text-align:left;
}

.app-source p{
  margin:.12rem 0;
  color:inherit;
  font-size:inherit;
  line-height:inherit;
}

.bottom-sheet-backdrop{
  position:fixed;
  inset:0;
  z-index:1900;
  background:rgba(18,24,19,.24);
}

.bottom-sheet-backdrop[hidden],
.bottom-sheet[hidden]{
  display:none;
}

.bottom-sheet{
  position:fixed;
  left:50%;
  bottom:0;
  z-index:1901;
  width:min(100%, 38rem);
  max-height:88vh;
  padding:.75rem 1.25rem 1.35rem;
  overflow-y:auto;
  overscroll-behavior:contain;
  border:1px solid var(--line);
  border-radius:1.5rem 1.5rem 0 0;
  background:var(--surface);
  box-shadow:0 -14px 34px rgba(44,52,43,.16);
  transform:translateX(-50%);
}

.bottom-sheet-handle{
  width:3rem;
  height:.28rem;
  margin:0 auto .85rem;
  border-radius:999px;
  background:#d5ddd3;
}

.bottom-sheet-header{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  gap:1rem;
}

.bottom-sheet-header h2{
  margin:0;
  color:#121713;
  font-size:1.2rem;
  line-height:1.3;
}

#bottom-sheet-close{
  width:2rem;
  height:2rem;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#333a34;
  font-size:1.4rem;
  line-height:1;
}

.bottom-sheet p{
  margin:.7rem 0 1rem;
  color:#5f6861;
  font-size:.95rem;
  line-height:1.45;
}

.bottom-sheet-weather{
  margin:.65rem 0 .7rem;
  padding:.65rem .75rem;
  display:grid;
  gap:.18rem;
  border-radius:.85rem;
  background:#f8fbf5;
  color:#465249;
}

.bottom-sheet-weather span{
  color:#79837b;
  font-size:.72rem;
  font-weight:750;
}

.bottom-sheet-weather strong{
  color:#26372c;
  font-size:.88rem;
  font-weight:850;
  line-height:1.25;
}

.bottom-sheet-detail{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:.35rem;
}

.bottom-sheet-metric{
  min-width:0;
  padding:.5rem .28rem;
  display:grid;
  justify-items:center;
  gap:.16rem;
  border-radius:.75rem;
  background:#f3f8ef;
  color:#365040;
  text-align:center;
}

.bottom-sheet-metric-icon{
  min-height:.95rem;
  display:grid;
  place-items:center;
  color:#559fca;
  font-size:.66rem;
  font-weight:900;
}

.bottom-sheet-metric strong{
  color:#26372c;
  font-size:.72rem;
  font-weight:850;
  line-height:1.15;
}

.bottom-sheet-metric > span:not(.bottom-sheet-metric-icon){
  color:#3e4840;
  font-size:.68rem;
  line-height:1.1;
}

.bottom-sheet-metric em{
  color:var(--tone);
  font-size:.72rem;
  font-style:normal;
  font-weight:850;
  line-height:1.1;
}

.bottom-sheet-metric.tone-excellent .bottom-sheet-metric-icon,
.bottom-sheet-metric.tone-excellent em{
  color:var(--excellent);
}

.bottom-sheet-metric.tone-good .bottom-sheet-metric-icon,
.bottom-sheet-metric.tone-good em{
  color:var(--good);
}

.bottom-sheet-metric.tone-fair .bottom-sheet-metric-icon,
.bottom-sheet-metric.tone-fair em{
  color:var(--fair);
}

.bottom-sheet-metric.tone-caution .bottom-sheet-metric-icon,
.bottom-sheet-metric.tone-caution em{
  color:var(--caution);
}

.bottom-sheet-metric.tone-poor .bottom-sheet-metric-icon,
.bottom-sheet-metric.tone-poor em{
  color:var(--poor);
}

.bottom-sheet-ai{
  margin-top:.75rem;
  padding:.7rem .8rem;
  border-radius:.85rem;
  background:#f8fbf5;
}

.bottom-sheet-ai strong{
  color:#27382c;
  font-size:.88rem;
  font-weight:850;
}

.bottom-sheet-ai p{
  margin:.24rem 0 0;
  color:#5b655e;
  font-size:.86rem;
  line-height:1.45;
}

.bottom-sheet-grade-guide{
  margin-top:.55rem;
  display:flex;
  flex-wrap:wrap;
  gap:.25rem .55rem;
  color:#6e7770;
  font-size:.72rem;
  line-height:1.35;
}

.bottom-sheet-grade-guide span{
  white-space:nowrap;
}

.bottom-sheet-source{
  margin-top:.65rem;
  padding-top:.55rem;
  border-top:1px solid #ece5dc;
  color:#7a827b;
  font-size:.68rem;
  line-height:1.4;
}

.bottom-sheet-source p{
  margin:.12rem 0;
  color:inherit;
  font-size:inherit;
  line-height:inherit;
}

.user-location-pin{
  display:grid;
  place-items:center;
  border:2px solid rgba(75,143,232,.34);
  border-radius:50%;
  background:rgba(75,143,232,.2);
  box-shadow:0 0 0 .45rem rgba(75,143,232,.12), 0 .25rem .8rem rgba(40,73,118,.18);
}

.user-location-pin span{
  width:.72rem;
  height:.72rem;
  display:block;
  border:2px solid #fff;
  border-radius:50%;
  background:#4b8fe8;
}

body.loading{
  cursor:progress;
}

body.loading .running-card{
  opacity:.55;
  filter:saturate(.78);
  pointer-events:none;
}

@media (max-width: 44rem){
  .app-header{
    padding:.55rem .65rem .45rem;
  }

  .app-header h1{
    font-size:1.45rem;
  }

  .refresh-button{
    width:2rem;
    height:2rem;
    font-size:1.05rem;
  }

  .refresh-controls{
    gap:.4rem;
  }

  .refresh-status{
    font-size:.7rem;
  }

  .app-shell{
    width:calc(100% - 1rem);
  }

  .running-card{
    padding:.8rem .8rem .62rem;
    border-radius:1.2rem;
  }

  .running-card__content{
    grid-template-columns:minmax(0, 1fr) 6.8rem;
    align-items:start;
    gap:.45rem;
  }

  .title-row{
    gap:.4rem;
  }

  .title-row h2{
    font-size:1.25rem;
  }

  .title-copy p{
    font-size:.72rem;
  }

  .info-button{
    width:1.35rem;
    height:1.35rem;
    font-size:.76rem;
  }

  .score-line{
    margin:.45rem 0 .45rem;
    gap:.45rem;
  }

  #running-score{
    min-width:6.8rem;
    font-size:3.35rem;
  }

  .grade-pill{
    min-height:1.9rem;
    padding:.28rem .62rem;
    font-size:.78rem;
  }

  .grade-pill::after{
    width:.7rem;
    height:.7rem;
    margin-left:.35rem;
    border-width:.13rem;
  }

  .running-summary{
    margin:.45rem 0 .45rem;
    font-size:.88rem;
    line-height:1.32;
  }

  .weather-adjustment{
    margin:-.2rem 0 .45rem;
    font-size:.62rem;
  }

  .score-timeline{
    max-width:none;
    gap:.25rem;
  }

  .timeline-item{
    min-height:3.05rem;
    padding:.28rem .18rem;
    border-radius:.7rem;
  }

  .timeline-label{
    font-size:.63rem;
  }

  .timeline-score{
    font-size:1rem;
  }

  .timeline-time{
    font-size:.46rem;
  }

  .running-meta{
    margin-top:.45rem;
    gap:.2rem .45rem;
    font-size:.62rem;
  }

  .running-meta span + span::before{
    margin-right:.45rem;
  }

  .mascot-panel{
    min-height:0;
    margin-top:.1rem;
    gap:0;
  }

  .cat-message{
    width:6.5rem;
    min-height:3.55rem;
    padding:.68rem .5rem .5rem;
    border-width:.12rem;
    font-size:.66rem;
    line-height:1.35;
    transform:translateY(.22rem);
  }

  .cat-message::after{
    right:.45rem;
    bottom:.28rem;
    width:.75rem;
    height:.65rem;
    border-width:.12rem;
  }

  .cat-mascot{
    width:6rem;
    margin-top:-.35rem;
  }

  .recommend-card{
    margin-top:.55rem;
    padding:.65rem .75rem .8rem;
    border-radius:1.15rem;
  }

  .section-heading{
    margin-bottom:.45rem;
  }

  .section-heading h2{
    font-size:1.05rem;
  }

  .text-action{
    font-size:.78rem;
  }

  .recommend-item{
    min-height:4.05rem;
    grid-template-columns:2.9rem minmax(0, 1fr) auto;
    gap:.6rem;
    padding:.55rem .7rem;
    border-radius:1rem;
  }

  .shoe-icon{
    width:2.65rem;
    height:2.65rem;
    font-size:1.45rem;
  }

  .recommend-copy strong{
    font-size:1.08rem;
  }

  .recommend-copy span{
    font-size:.72rem;
  }

  .recommend-arrow{
    font-size:1.5rem;
  }

  #map{
    height:8.8rem;
  }

  .map-card{
    margin-top:.55rem;
    border-radius:1.15rem;
  }

  .location-badge{
    max-width:calc(100% - 6.2rem);
    top:.65rem;
    left:.65rem;
    padding:.48rem .65rem;
    gap:.5rem;
    border-radius:.82rem;
  }

  .location-badge strong{
    font-size:.72rem;
  }

  .location-badge small{
    font-size:.62rem;
  }

  .locate-button{
    top:5.65rem;
    right:.7rem;
    width:2.75rem;
    height:2.75rem;
    font-size:1.35rem;
  }

  .environment-card{
    grid-template-columns:repeat(5, minmax(0, 1fr));
    overflow:visible;
    padding:.6rem .2rem .48rem;
  }

  .environment-item{
    gap:.1rem;
    padding:.05rem .12rem;
  }

  .environment-icon{
    min-height:1rem;
    font-size:.55rem;
  }

  .environment-item > span:not(.environment-icon){
    font-size:.62rem;
  }

  .environment-item strong{
    font-size:.78rem;
  }

  .environment-item em{
    font-size:.58rem;
  }

  .reason-card{
    border-radius:1.25rem;
  }

  .reason-card strong{
    font-size:1.02rem;
  }

  .share-card{
    margin-top:.8rem;
    padding:.75rem .75rem .82rem;
    border-radius:1.15rem;
  }

  .share-card-header{
    display:grid;
    gap:.25rem;
    margin-bottom:.55rem;
  }

  .share-status{
    font-size:.68rem;
    text-align:left;
  }

  .share-actions{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:.18rem;
  }

  .share-action{
    min-height:4.25rem;
  }

  .share-action-icon{
    width:clamp(2.35rem, 12vw, 2.75rem);
    height:clamp(2.35rem, 12vw, 2.75rem);
  }

  .share-action-label{
    font-size:clamp(.55rem, 2.35vw, .66rem);
  }

  .app-footer{
    grid-template-columns:6.7rem minmax(0, 1fr);
    gap:.85rem;
  }

  .app-footer p{
    font-size:.95rem;
  }

  .app-footer small{
    font-size:.78rem;
  }

  .bottom-sheet{
    padding:.65rem 1rem 1.15rem;
  }

  .bottom-sheet-detail{
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:.25rem;
  }

  .bottom-sheet-weather{
    padding:.52rem .6rem;
    gap:.16rem;
  }

  .bottom-sheet-weather strong{
    font-size:.76rem;
  }

  .bottom-sheet-weather p{
    font-size:.68rem;
  }

  .bottom-sheet-metric{
    padding:.42rem .16rem;
    gap:.12rem;
  }

  .bottom-sheet-metric-icon{
    font-size:.55rem;
  }

  .bottom-sheet-metric strong,
  .bottom-sheet-metric em{
    font-size:.58rem;
  }

  .bottom-sheet-metric > span:not(.bottom-sheet-metric-icon){
    font-size:.54rem;
  }

  .bottom-sheet-ai{
    margin-top:.55rem;
    padding:.6rem .68rem;
  }

  .bottom-sheet-ai p{
    font-size:.76rem;
  }

  .bottom-sheet-grade-guide{
    font-size:.68rem;
  }
}