/* Home 탭 */

.home__body {
  padding: var(--section-top) var(--pad-screen) var(--section-top);
  display: flex; flex-direction: column; gap: var(--gap-card);
}

.home__tripbtn {
  display: flex; align-items: center; gap: 5px;
  padding: 8px 13px; border-radius: var(--r-pill);
  border: 1px solid rgba(94, 198, 240, .3); background: rgba(94, 198, 240, .1);
  color: var(--accent-forecast); font-size: 14px; font-weight: 600;
  cursor: pointer; white-space: nowrap; flex-shrink: 0; min-height: 40px;
}

/* 즐겨찾기 예보 그리드 */
.favgrid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px; }
.favgrid--single { display: block; }

.fav-hero {
  background: var(--hero-grad); border: none; border-radius: var(--r-hero);
  padding: 22px; display: flex; flex-direction: column; min-height: 250px;
  text-align: left; cursor: pointer; color: #fff; position: relative; width: 100%;
}
.favgrid--single .fav-hero { min-height: 220px; justify-content: space-between; }

.fav-hero__name { font-size: 22px; font-weight: 700; color: rgba(255, 255, 255, .65); }
.favgrid--single .fav-hero__name { font-size: 24px; }
.fav-hero__row  { display: flex; justify-content: space-between; align-items: center; width: 100%; flex: 1; }
.favgrid--single .fav-hero__row { flex: none; }
.fav-hero__wave { display: flex; align-items: baseline; gap: 2px; font-family: var(--font-num); }
.fav-hero__num  { font-size: 56px; font-weight: 800; color: #fff; letter-spacing: -1px; }
.favgrid--single .fav-hero__num { font-size: 58px; }
.fav-hero__unit { font-size: 25px; color: rgba(255, 255, 255, .55); font-weight: 600; }
.favgrid--single .fav-hero__unit { font-size: 28px; }
.fav-hero__per  { display: flex; align-items: center; gap: 5px; margin-top: 4px; color: rgba(255, 255, 255, .75); font-size: 22px; font-family: var(--font-num); }
.favgrid--single .fav-hero__per { font-size: 24px; }
.fav-hero__pers { font-size: 16px; color: rgba(255, 255, 255, .5); }
.fav-hero__dir  { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.fav-hero__arrow { display: inline-block; font-size: 46px; color: rgba(255, 255, 255, .85); line-height: 1; }
.fav-hero__dirlabel { font-size: 14px; font-weight: 700; color: rgba(255, 255, 255, .65); }
.favgrid--single .fav-hero__dirlabel { font-size: 16px; }

.fav-rest { display: flex; flex-direction: column; gap: 12px; }
.fav-tile {
  background: rgba(56, 189, 248, .10); border: 1px solid rgba(56, 189, 248, .18);
  border-radius: var(--r-card); padding: 18px; flex: 1;
  display: flex; flex-direction: column; justify-content: space-between;
  text-align: left; cursor: pointer;
}
.fav-tile__name { font-size: 15px; font-weight: 700; color: var(--accent-forecast-lt); }
.fav-tile__row  { display: flex; align-items: baseline; gap: 2px; font-family: var(--font-num); }
.fav-tile__num  { font-size: 38px; font-weight: 800; color: var(--text-strong); }
.fav-tile__unit { font-size: 17px; color: var(--text-sub); font-weight: 600; }
.fav-tile__per  { font-size: 15.5px; color: var(--text-sub); margin-left: auto; }

.fav-empty {
  background: rgba(255, 255, 255, .05); border: 1px dashed rgba(255, 255, 255, .2);
  border-radius: var(--r-hero); padding: 24px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 15.5px; color: rgba(255, 255, 255, .6); line-height: 1.5;
}

/* 최근 활동 */
.recent {
  background: var(--accent-recent-bg); border: 1px solid var(--accent-recent-bd);
  border-radius: var(--r-hero); padding: 26px;
}
.recent__head  { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.recent__title { font-size: 15px; font-weight: 700; color: var(--accent-recent); }
.recent__cta {
  font-size: 13.5px; font-weight: 500; color: var(--accent-report);
  background: var(--accent-report-bg); border: none; border-radius: var(--r-pill);
  padding: 8px 12px; cursor: pointer; min-height: 36px;
}
.recent__btn { width: 100%; text-align: left; background: none; border: none; padding: 0; cursor: pointer; }
.recent__line { font-size: 24px; font-weight: 700; color: var(--text-strong); line-height: 1.4; margin-top: 14px; }
.recent__sub  { font-size: 15px; color: var(--text-sub); margin-top: 8px; }

/* 하단 2열 카드 */
.home__duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-card-lg); }

.duo-card { border-radius: var(--r-card); padding: 20px; text-align: left; cursor: pointer; }
.duo-card--pool   { background: var(--accent-pool-bg); border: 1px solid var(--accent-pool-bd); }
.duo-card--market { background: var(--accent-market-bg); border: 1px solid var(--accent-market-bd); }
.duo-card__title  { font-size: 14.5px; font-weight: 700; }
.duo-card--pool   .duo-card__title { color: var(--accent-pool); }
.duo-card--market .duo-card__title { color: var(--accent-market); }
.duo-card__count  { font-size: 28px; font-weight: 800; color: var(--text-strong); margin-top: 12px; }
.duo-card__sub    { font-size: 15px; color: var(--text-sub); margin-top: 6px; }
.duo-card__none   { font-size: 15.5px; color: var(--text-sub); margin-top: 12px; }

.duo-card__inslist { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.duo-card__ins {
  width: 100%; text-align: left; background: none; border: none; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.duo-card__insname { font-size: 16px; font-weight: 700; color: var(--text-strong); }
.duo-card__insrate { font-size: 14px; color: var(--accent-star); font-weight: 600; }

/* 프로필 시트 — 등급 밴드는 여기에만 표시 (레벨 숫자는 어디에도 노출하지 않음) */
.profile__band {
  background: var(--hero-grad); border-radius: var(--r-hero);
  padding: 26px 20px; text-align: center; margin-bottom: 16px;
}
.profile__bandname { font-size: 30px; font-weight: 800; color: #fff; letter-spacing: -.5px; }
.profile__bandline { font-size: 15px; color: rgba(255, 255, 255, .8); line-height: 1.6; margin-top: 8px; }
.profile__row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--line-08); font-size: 14.5px;
}
.profile__row:last-child { border-bottom: none; }
.profile__k { color: var(--text-muted); }
.profile__v { color: var(--text-strong); font-weight: 600; text-align: right; }
/* 평균 세션 정체 안내("(최근 N개월 이상 기록없음)") — 값 자체보다 작고 볼드 없이, 옅은 회색으로 */
.profile__vnote { color: var(--text-dim); font-weight: 400; font-size: 12px; }

/* 해상특보 경고 아이콘 — 즐겨찾기 타일 우측 상단 (2026-09-09 §A-1 확장).
   도형·색·깜빡임은 예보 탭과 같은 .hero__alert 규칙을 그대로 씁니다. 여기서는
   위치만 잡습니다 — 두 화면이 서로 다르게 보이면 같은 경고로 안 읽힙니다.
   .fav-hero는 이미 position:relative라 그대로 얹히고, .fav-tile에만 새로 겁니다. */
.fav-tile { position: relative; }
/* .hero__alert가 padding:0을 갖고 있어 같은 자리에서 이깁니다(forecast.css가 뒤에 로드).
   두 클래스를 함께 걸어 우선순위를 올립니다 — !important를 쓰면 나중에 왜 안 먹는지
   추적하기 어려워집니다. */
.hero__alert.fav-alert {
  position: absolute; top: 6px; right: 6px; margin: 0;
  /* 터치 영역을 44px로 넓힙니다 — 타일 전체가 스팟으로 가는 버튼이라, 아이콘이 작으면
     경고를 누르려다 스팟으로 넘어갑니다. 아이콘 자체는 19px 그대로입니다. */
  padding: 13px; box-sizing: content-box;
}
.fav-hero > .hero__alert.fav-alert { top: 10px; right: 10px; }