/* ==========================================================================
   MATEGYM · 실시간 락커 현황
   모바일 우선 (디자인 기준 폭 402px). PC는 동일 컬럼을 가운데 정렬.
   ========================================================================== */

:root {
  /* surface */
  --bg:          #0B0B0B;
  --card:        #171717;
  --card-2:      #1F1F1F;
  --line:        #2E2E2E;
  --track:       #FFFFFF;   /* 진행바 빈 영역 */
  --track-dark:  #3A3A3A;   /* 요일별 막대 빈 영역 */

  /* text */
  --text:        #FFFFFF;
  --text-dim:    #9B9B9B;
  --text-on-fill:#0A2314;

  /* accent */
  --green:       #22C55E;
  --green-deep:  #0E3A20;
  --orange:      #F5A623;
  --orange-deep: #4A2E00;
  --red:         #E8514F;
  --yellow:      #F2C94C;

  /* metrics */
  --radius:      20px;
  --radius-sm:   14px;
  --gap:         12px;

  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
          "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --font-display: "Archivo Black", var(--font);
}

/* 밝은 테마 자리 (구조는 동일, 색만 교체) — data-theme="light" 로 활성화 */
[data-theme="light"] {
  --bg: #F4F4F5;  --card: #FFFFFF;  --card-2: #F7F7F8;  --line: #E4E4E7;
  --track: #E9E9EC; --track-dark: #E4E4E7;
  --text: #101012; --text-dim: #71717A; --text-on-fill: #0A2314;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }

/* ---------- layout ---------- */
.page {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
  padding: 18px 12px calc(28px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  overflow: hidden;
}

.page__watermark {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
/* 모바일: 기존 팔 이미지 그대로 */
.page__watermark--mobile {
  top: 150px;
  left: 50%;
  width: 92%;
  max-width: 420px;
  transform: translateX(-42%);
}
.page__watermark--pc { display: none; }   /* PC에서만 노출 */
[data-theme="light"] .page__watermark { opacity: .35; }

.topbar, .card, .updated { position: relative; z-index: 1; }

/* 모바일에서는 컬럼 래퍼가 없는 것처럼 동작 (시안 순서 그대로) */
.col { display: contents; }

/* ---------- header ---------- */
.topbar { margin-bottom: 2px; }

.wordmark {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.5px;
  text-align: center;
  margin: 6px 0 14px;
}

.now {
  text-align: right;
  font-size: 15px;
  letter-spacing: -0.2px;
}
.now__label { font-weight: 800; }
.now__time  { color: var(--text-dim); font-weight: 600; margin-left: 4px; }

/* ---------- 휴무 안내 배너 (D-2 이내에만 노출) ---------- */
.notice[hidden] { display: none !important; }   /* hidden 우선 (display:flex 무력화) */
.notice {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: rgba(232, 81, 79, .12);
  border: 1px solid rgba(232, 81, 79, .45);
  color: #F3A9A8;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.2px;
  line-height: 1.45;
}
.notice__label { color: #F3A9A8; }
.notice b { font-weight: 800; color: #F7C6C5; white-space: nowrap; }
.notice--today {
  background: rgba(232, 81, 79, .18);
  border-color: var(--red);
  color: #F7C6C5;
}

/* ---------- card ---------- */
.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 16px 14px;
}

.card__title {
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  letter-spacing: -0.3px;
}
.card__title--left { text-align: left; }

.card__sub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-dim);
}

.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* ---------- 혼잡도 / 추천 시간 ---------- */
.card--split {
  display: flex;
  align-items: center;
  padding: 18px 10px;
}

.split__col {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
}

.split__icon {
  width: 34px;
  height: 34px;
  flex: none;
  fill: var(--green);
  color: var(--green);
}
.split__icon--stroke { width: 30px; height: 30px; }

.split__divider {
  width: 1px;
  align-self: stretch;
  background: var(--line);
  margin: 2px 4px;
}

.split__text { min-width: 0; }

.label {
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: -0.2px;
  white-space: nowrap;
}

.value {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.6px;
  white-space: nowrap;
}
#quietWindow { font-size: 20px; }

/* ---------- 탈의실 카드 ---------- */
.rooms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

/* 클릭 유도 안내 문구 */
.rooms-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--green);
  letter-spacing: -0.2px;
}
.rooms-hint__icon { width: 15px; height: 15px; flex: none; }
.room--female ~ * .rooms-hint { color: inherit; }

.room {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 12px 30px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--green);
  background: var(--card-2);
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .12s ease;
}
.room--female { border-color: var(--orange); }

.room:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.room__name {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: -0.3px;
}
.room--female .room__name { color: var(--orange); }

.room__figures {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-top: 10px;
}
.room__free  { font-size: 30px; font-weight: 800; letter-spacing: -1px; line-height: 1; }
.room__total { font-size: 14px; font-weight: 600; color: var(--text-dim); }
.room__rate  { margin-left: auto; font-size: 13px; font-style: normal; font-weight: 600; }

.room__bar {
  display: block;
  height: 10px;
  margin-top: 8px;
  border-radius: 99px;
  background: var(--track);
  overflow: hidden;
}
.room__bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--green);
  transition: width .35s ease;
}
.room--female .room__bar i { background: var(--orange); }

.room__mark {
  position: absolute;
  right: 8px;
  top: 44px;
  width: 30px;
  height: 40px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  opacity: .08;
  pointer-events: none;
}

/* "누르기" 배지 — 클릭 유도 */
.room__tap {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 9px 3px 8px;
  border-radius: 99px;
  background: var(--green);
  color: #06220F;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: -0.2px;
  line-height: 1;
  pointer-events: none;
}
.room__tap::after { content: " ›"; font-weight: 900; }
.room--female .room__tap { background: var(--orange); color: #2A1900; }

/* 펼침 방향 안내 셰브론 */
.room__chevron {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 18px;
  height: 18px;
  color: var(--green);
  opacity: .8;
  transition: transform .2s ease;
  pointer-events: none;
}
.room--female .room__chevron { color: var(--orange); }

/* 선택(펼침) 상태에서는 배지 숨기고 셰브론 회전 */
.room.is-open .room__tap { display: none; }
.room.is-open .room__chevron { transform: rotate(180deg); }
.room.is-open .room__chevron { color: currentColor; }

/* 로드 시 1회 살짝 펄스 (클릭 가능함을 알림) */
@keyframes roomPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(34, 197, 94, .28); }
}
@keyframes roomPulseF {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 166, 35, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(245, 166, 35, .28); }
}
.room--male.pulse   { animation: roomPulse 1.1s ease 2; }
.room--female.pulse { animation: roomPulseF 1.1s ease 2; }

/* 선택(펼침) 상태 */
.room.is-open { background: var(--green); border-color: var(--green); }
.room.is-open .room__name,
.room.is-open .room__free,
.room.is-open .room__rate { color: var(--text-on-fill); }
.room.is-open .room__total { color: rgba(10, 35, 20, .65); }
.room.is-open .room__bar i { background: var(--green-deep); }
.room.is-open .room__mark { opacity: .16; }

.room--female.is-open { background: var(--orange); border-color: var(--orange); }
.room--female.is-open .room__name,
.room--female.is-open .room__free,
.room--female.is-open .room__rate { color: #2A1900; }
.room--female.is-open .room__total { color: rgba(42, 25, 0, .6); }
.room--female.is-open .room__bar i { background: var(--orange-deep); }

/* ---------- 락커 배치도 ---------- */
.card--grid { padding-bottom: 18px; }

.grid-summary {
  display: flex;
  justify-content: space-evenly;
  gap: 8px;
  margin: 14px 0 16px;
  font-size: 14px;
  font-weight: 600;
}
.grid-summary .is-used { color: var(--red); }
.grid-summary .is-free { color: var(--green); }

.lockers {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.locker {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: var(--green);
}
.locker.is-used { background: var(--red); }
.locker.is-blocked {
  background: #4A4A4A;          /* 고장·청소 등 — 비었지만 배정 불가 */
  color: #C8C8C8;
  position: relative;
}
.locker.is-blocked::after {
  content: "▪";
  position: absolute;
  bottom: 2px;
  font-size: 9px;
  opacity: .7;
}

/* ---------- 차트 ---------- */
.chart { margin-top: 10px; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }

.legend {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: var(--text-dim);
}
.legend--center { justify-content: center; gap: 18px; margin-top: 16px; font-size: 12px; }
.legend__item { display: inline-flex; align-items: center; gap: 5px; }

.legend__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
}
.legend__dot--green  { background: var(--green); }
.legend__dot--yellow { background: var(--yellow); }
.legend__dot--red    { background: var(--red); }

.legend__dash {
  width: 14px; height: 0;
  border-top: 2px dotted #7A7A7A;
}

/* ---------- 요일 / 시간대 ---------- */
.days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin: 14px 0 18px;
}

.day {
  height: 34px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: transparent;
  color: #D4D4D4;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.day[aria-selected="true"] { border-color: var(--green); color: var(--green); }
.day:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.slots { display: flex; flex-direction: column; gap: 12px; }

.slot {
  display: grid;
  grid-template-columns: 46px 1fr 36px;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.slot__label { color: #E4E4E4; font-weight: 500; }
.slot__track {
  height: 9px;
  border-radius: 99px;
  background: var(--track-dark);
  overflow: hidden;
}
.slot__fill {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--green);
  transition: width .3s ease;
}
.slot__fill.is-mid  { background: var(--yellow); }
.slot__fill.is-high { background: var(--red); }
.slot__value { text-align: right; color: #E4E4E4; font-weight: 500; }

/* ---------- 안내 ---------- */
.card--info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px;
}

.info {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 8px 14px;
  text-align: center;
}
.info__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 10px;
}
.info__icon { width: 14px; height: 14px; flex: none; color: var(--text); }
.info__body { font-size: 12px; color: #E4E4E4; line-height: 1.5; }
.info__note { color: var(--text-dim); font-size: 11px; }
.info__foot { margin-top: 10px; font-size: 11px; color: var(--text-dim); line-height: 1.5; }
.info__closed { display: block; margin-top: 3px; color: var(--red); font-weight: 700; }

/* 클릭 가능한 안내 카드 */
.info--link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.info--link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* "지도 보기 ›" · "눌러서 자세히 ›" 힌트 */
.info__cue {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--green);
  letter-spacing: -0.2px;
}
.info:has(.benefit-link) { /* 혜택 카드도 링크 있음을 표시 */ }

/* 개별 단어 링크 */
.benefit-link {
  color: #E4E4E4;
  text-decoration: none;
  border-bottom: 1px dashed rgba(34, 197, 94, .55);
  padding-bottom: 1px;
  transition: color .15s ease, border-color .15s ease;
}
.benefit-link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 2px; }

/* ---------- 기타 ---------- */
.updated {
  text-align: center;
  font-size: 11px;
  color: #5F5F5F;
  margin-top: 2px;
}

/* ---------- 푸터 ---------- */
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  padding-top: 4px;
}
.footer__call {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 99px;
  background: var(--green);
  color: #06220F;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.2px;
  transition: filter .15s ease, transform .06s ease;
}
.footer__call:active { transform: scale(.98); }
.footer__call:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.footer__phone { width: 16px; height: 16px; flex: none; }
.footer__call-text b { font-weight: 800; }
.footer__copy {
  font-size: 11px;
  color: #5F5F5F;
  text-align: center;
  letter-spacing: -0.2px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   PC (≥ 900px) — 모바일 시안의 컴포넌트를 그대로 두 컬럼으로 배치
   왼쪽: 혼잡도 · 탈의실 · 락커 배치도 / 오른쪽: 그래프 · 요일별 · 안내
   ========================================================================== */
@media (min-width: 900px) {
  .page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    max-width: 1120px;
    padding: 32px 24px 56px;
  }

  .col {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .topbar, .updated, .notice, .footer { grid-column: 1 / -1; }

  /* PC: 정면 로고를 배경 워터마크로, 모바일 팔 이미지는 숨김 */
  .page__watermark--mobile { display: none; }
  .page__watermark--pc {
    display: block;
    top: 380px;
    left: 50%;
    width: 600px;
    max-width: none;
    transform: translateX(-50%);
    opacity: .06;
  }

  .wordmark { font-size: 52px; margin: 4px 0 16px; }
  .now { font-size: 17px; }

  .card { padding: 22px 20px; }
  .card__title { font-size: 17px; }
  .card__sub { font-size: 13px; }

  .card--split { padding: 26px 16px; }
  .split__icon { width: 42px; height: 42px; }
  .split__icon--stroke { width: 38px; height: 38px; }
  .label { font-size: 13px; }
  .value { font-size: 30px; }
  #quietWindow { font-size: 26px; }

  .rooms { gap: 14px; margin-top: 16px; }
  .room { padding: 16px 16px 34px; }
  .room__name { font-size: 15px; }
  .room__free { font-size: 36px; }
  .room__mark { width: 40px; height: 52px; top: 48px; }
  .room__chevron { bottom: 12px; }   /* 바 아래로 확실히 내림 */
  .room__tap { top: 14px; right: 14px; }

  /* 배치도는 시안의 5열 비율을 유지하고 가운데 정렬 */
  .lockers { max-width: 400px; margin: 0 auto; }
  .grid-summary { font-size: 15px; }

  .slot { grid-template-columns: 56px 1fr 44px; font-size: 13px; }
  .day { height: 40px; font-size: 14px; }

  .info__body, .info__head { font-size: 13px; }
  .info__note { font-size: 12px; }
  .info__foot { font-size: 12px; }

  .updated { margin-top: 8px; font-size: 12px; }
}

@media (min-width: 1200px) {
  .page { max-width: 1200px; }
}

/* 마우스 환경에서만 hover */
@media (hover: hover) {
  .room:hover { filter: brightness(1.08); transform: translateY(-2px); }
  .day:hover { border-color: #5A5A5A; color: #FFFFFF; }
  .day[aria-selected="true"]:hover { border-color: var(--green); color: var(--green); }
  .info--link:hover { border-color: var(--green); background: rgba(34, 197, 94, .06); }
  .info--link:hover .info__cue { text-decoration: underline; }
  .benefit-link:hover { color: var(--green); border-bottom-color: var(--green); }
  .footer__call:hover { filter: brightness(1.06); }
}