/* css/member-training.css
   Training Choice Card — 오늘의 훈련 (순한맛/매운맛 × 1단계/2단계).

   상태 축 2개:
     [data-stage="1"|"2"]
     [data-completion="none"|"mild"|"spicy"|"both"]
   2 × 4 = 8 조합이 CSS 조합만으로 나온다.

   ⚠️ preferred 축(내 기본 맛 배지 + 초록/주황 강조)은 걷어냈다.
      "내가 지난번에 뭘 골랐는지"를 화면이 기억해 보여 주면 그 맛을 계속 고르게
      떠밀게 되고, 두 타일이 대등하다는 인상이 깨진다. preferred_flavor 값 자체는
      서버가 계속 기록하므로 되살릴 일이 생기면 표시만 다시 붙이면 된다.

   기준 뷰포트 390px. 모든 인터랙티브 타깃 최소 44px. */

.training-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    margin-bottom: 8px;
}

/* ── 헤더 ── */
.training-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.training-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
}

/* 완료 시 제목 문구 교체 — 기본은 '오늘의 훈련', 완료면 '오늘 훈련 완료' */
.training-title-done { display: none; }
.training-card:not([data-completion="none"]) .training-title-default { display: none; }
.training-card:not([data-completion="none"]) .training-title-done { display: inline; color: var(--color-success-600); }

.training-stage-badge {
    flex: 0 0 auto;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    background: var(--color-primary-50, #EFF6FF);
    color: var(--color-primary-600);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.training-stage-toggle {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 10px;
    border: 0;
    background: none;
    color: var(--color-text-sub);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* ── 인라인 단계 선택 (카드 안에서만, 별도 페이지 없음) ── */
.training-stage-picker {
    display: none;
    gap: 8px;
    margin-top: 10px;
}
.training-card.stage-picker-open .training-stage-picker { display: flex; }

.training-stage-opt {
    flex: 1 1 0;
    min-height: 44px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}
.training-stage-opt[aria-pressed="true"] {
    border-color: var(--color-primary-600);
    background: var(--color-primary-50, #EFF6FF);
    color: var(--color-primary-600);
}

.training-stage-note {
    margin-top: 6px;
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1.45;
}
.training-stage-note-hidden { display: none; }

/* ── 이번 주 훈련 요약 (카드 안, 타일 위) ──
   '자주 쓰는 기능' 카드 상단에 있던 것을 여기로 옮겼다. 이번 주 몇 일 했는지는
   오늘 훈련할지 정하는 근거라, 훈련 타일 바로 위에 있어야 읽힌다. */
.training-week {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 36px;
    padding: 0 12px;
    margin-top: 12px;
    border-radius: var(--radius-md);
    background: var(--color-success-50);
}

.training-week-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
}

.training-week-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-success-600);
    white-space: nowrap;
}

/* ── 맛 타일 2개 (같은 깊이, 동시 노출) ── */
.training-tiles {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.training-tile {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 10px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    color: inherit;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    position: relative;
}

.training-tile-img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    display: block;
}

.training-tile-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
}

.training-tile-desc {
    font-size: 12px;
    color: var(--color-text-sub);
    text-align: center;
    word-break: keep-all;
    line-height: 1.4;
}

/* ── 완료 표시 — completion 축 ── */
.training-tile-state {
    margin-top: 2px;
    font-size: 12px;
    font-weight: 700;
    min-height: 16px;
}

/* 아직 아무 맛도 안 한 날은 상태 줄에 들어갈 글자가 없다(둘 다 display:none).
   그래도 min-height 16 + margin 2 가 남아 아래 여백만 18px 더 커 보였다
   (위 14 / 아래 32). 그 날은 줄 자체를 접어 상하 14px 로 맞춘다.
   ⚠️ 완료가 하나라도 있으면(mild/spicy/both) 두 타일 다 글자가 차므로 그대로 둔다. */
.training-card[data-completion="none"] .training-tile-state { display: none; }

.training-tile-state-done { display: none; color: var(--color-success-600); }
.training-tile-state-more { display: none; color: var(--color-primary-600); }

/* 완료한 타일 = '완료' */
.training-card[data-completion="mild"]  .training-tile[data-flavor="mild"]  .training-tile-state-done,
.training-card[data-completion="spicy"] .training-tile[data-flavor="spicy"] .training-tile-state-done,
.training-card[data-completion="both"]  .training-tile-state-done { display: block; }

/* 아직 안 한 타일 = '다른 맛도 훈련하기' (계속 접근 가능) */
.training-card[data-completion="mild"]  .training-tile[data-flavor="spicy"] .training-tile-state-more,
.training-card[data-completion="spicy"] .training-tile[data-flavor="mild"]  .training-tile-state-more { display: block; }

/* 완료 타일 시각 처리 — 비활성이 아니라 '완료됨'. 재진입은 계속 허용한다.
   [data-flavor] 를 붙여 둔다: 경쟁하던 preferred 규칙(명시도 0,4,0)은 사라졌지만
   같은 자리에 다른 축이 다시 생겨도 명시도로 지지 않게 형태를 유지한다. */
.training-card[data-completion="mild"]  .training-tile[data-flavor="mild"],
.training-card[data-completion="spicy"] .training-tile[data-flavor="spicy"],
.training-card[data-completion="both"]  .training-tile[data-flavor] {
    border-color: var(--color-success-500);
    background: var(--color-success-50);
}

.training-tile-check {
    display: none;
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    background: var(--color-success-600);
    color: #fff;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    font-weight: 700;
}
.training-card[data-completion="mild"]  .training-tile[data-flavor="mild"]  .training-tile-check,
.training-card[data-completion="spicy"] .training-tile[data-flavor="spicy"] .training-tile-check,
.training-card[data-completion="both"]  .training-tile[data-flavor] .training-tile-check { display: block; }