/* 콘텐츠 패널 공통 — 월간대회·마이페이지·맞춤훈련·해설노트·코스메틱·브레인체크 결과가 전부
   "제목 + 항목 나열" 형태의 패널을 쓴다. 원래 main.css의 .season-panel/.season-line 하나뿐이었으나
   신규 페이지 6개가 같은 패턴을 반복하게 되어 shared로 승격(동일 패턴 2회 이상 → 분리 규칙).

   여기 있는 것: 패널 / 항목줄 / 빈 상태 / 가격 카드 / 유무료 태그 / 주의 박스 / 단계 흐름 */

/* ── 패널 ── */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 28px; display: flex; flex-direction: column; }
.panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.panel__head h4 { font-weight: 700; font-size: 16px; }
.panel__head .more, .panel-line .more { font-size: 12px; font-weight: 700; color: var(--primary); flex-shrink: 0; }
.panel-line__right { display: flex; align-items: center; gap: 10px; }
.panel h4 { font-weight: 700; font-size: 16px; margin-bottom: 14px; }
.panel > p { font-size: 13.5px; color: var(--text-mute); line-height: 1.7; }

/* 항목줄 — 왼쪽 라벨 / 오른쪽 값. 값은 tabular라 여러 줄이 세로로 맞는다. */
.panel-line { display: flex; justify-content: space-between; gap: 14px; font-size: 13.5px; color: var(--text-mute); padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.panel-line:last-child { border-bottom: 0; }
.panel-line b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.panel-line .sub { display: block; font-size: 11.5px; font-weight: 500; color: var(--text-mute); margin-top: 2px; }

.panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.panel-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .panel-grid, .panel-grid--3 { grid-template-columns: 1fr; } }

/* ── 빈 상태 ── 맞춤훈련(브레인체크 미완료)·마이페이지(기록 없음)가 공유.
   비어있는 화면은 사과문이 아니라 다음 행동 안내여야 하므로 항상 CTA를 동반한다. */
.empty-state { text-align: center; padding: 64px 24px; background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius-md); }
.empty-state__ic { width: 40px; height: 40px; color: var(--line); margin: 0 auto 16px; }
.empty-state h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.empty-state p { font-size: 13.5px; color: var(--text-mute); line-height: 1.7; margin-bottom: 22px; }

/* ── 가격 카드 ── 참가권·해설노트·코스메틱 공용 */
.price-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 28px; display: flex; flex-direction: column; position: relative; }
.price-card--featured { border-color: var(--game); box-shadow: 0 12px 28px rgba(255,106,61,.14); }
.price-card__flag { position: absolute; top: -10px; left: 24px; font-size: 11px; font-weight: 700; color: #fff; background: var(--game); border-radius: 999px; padding: 3px 10px; }
.price-card .kicker { font-size: 11.5px; font-weight: 700; color: var(--primary); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 12px; }
.price-card h3 { font-weight: 700; font-size: 20px; margin-bottom: 8px; }
.price-card > p { color: var(--text-mute); font-size: 13.5px; line-height: 1.7; flex: 1; margin-bottom: 20px; }
.price-amount { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.price-amount .num { font-size: 30px; font-weight: 800; color: var(--primary-dark); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.price-amount .unit { font-size: 14px; font-weight: 600; color: var(--text-mute); }
.price-note { font-size: 12px; color: var(--text-mute); margin-bottom: 20px; }
.price-note--warn { color: var(--game-dark); font-weight: 600; }

/* ── 유·무료 경계 태그 ──
   이 서비스가 가장 조심해야 하는 지점이 "무료 훈련과 유료 대회의 경계"(기획서 §2 결제=불공정 논란)라,
   경계를 문장으로 설명하는 대신 태그 두 개로 항상 같은 모양·같은 색으로 못박는다.
   무료=테두리만(조용함) / 유료=주황 채움(눈에 띔). 예외적으로 다른 색을 쓰지 않는다. */
.tag-free, .tag-paid { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 3px 9px; white-space: nowrap; letter-spacing: -.01em; }
.tag-free { color: var(--text-mute); border: 1px solid var(--line); background: var(--surface); }
.tag-paid { color: #fff; background: var(--game); }

/* ── 주의 박스 ── 기획서에 ⚠️로 달린 미확정·법률검토 항목을 화면에 그대로 남길 때 */
.notice { display: flex; gap: 12px; background: var(--primary-pale); border-left: 3px solid var(--primary); border-radius: var(--radius-sm); padding: 16px 18px; font-size: 13px; line-height: 1.7; color: var(--text-dim); }
.notice--warn { background: #FFF7ED; border-left-color: var(--game); }
.notice b { color: var(--text); font-weight: 700; }
.notice .notice__ic { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--primary); }
.notice--warn .notice__ic { color: var(--game-dark); }

/* ── 단계 흐름 ── 해설노트 구매 흐름, 브레인체크 진행 순서처럼 "실제로 순서가 있는" 것만 사용.
   순서가 없는 목록에 번호를 붙이지 않는다. */
.step-flow { display: grid; gap: 14px; counter-reset: step; }
.step-flow--row { grid-template-columns: repeat(3, 1fr); }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 22px; }
.step::before { counter-increment: step; content: counter(step); display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--primary-pale); color: var(--primary-dark); font-size: 12px; font-weight: 800; margin-bottom: 12px; font-variant-numeric: tabular-nums; }
.step h4 { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.step p { font-size: 13px; color: var(--text-mute); line-height: 1.65; }
@media (max-width: 760px) { .step-flow--row { grid-template-columns: 1fr; } }

/* ── 검수용 상태 전환기 ──
   ⚠️ 실 서비스에는 없는 컨트롤이다. 맞춤훈련·마이페이지처럼 "데이터가 있느냐 없느냐"로 화면이
   완전히 갈리는 페이지는 서버 없는 프로토타입에서 한쪽만 보여 나머지를 검토할 수 없다.
   개발 이관 시 이 블록과 해당 js의 전환 로직은 삭제하고 API 응답으로 분기한다.
   본문과 확실히 구분되도록 사이트 팔레트 밖의 톤을 쓴다. */
.proto-switch { background: #FFF7ED; border-bottom: 1px solid #FCD9B6; }
.proto-switch .container { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; }
.proto-switch__label { font-size: 12px; font-weight: 700; color: var(--game-dark); }
.proto-switch__btns { display: flex; gap: 6px; }
.proto-switch__btns button { border: 1px solid #FCD9B6; background: var(--surface); color: var(--game-dark); font-size: 12px; font-weight: 700; border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.proto-switch__btns button.is-active { background: var(--game); border-color: var(--game); color: #fff; }

/* ── 페이지네이션 ── 계속 자랄 수 있는 목록 공통(결제내역·훈련이력 등) */
.pager { display: flex; justify-content: center; gap: 6px; margin-top: 20px; flex-wrap: wrap; }
.pager__item { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 4px; border-radius: var(--radius-sm); border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--text-mute); }
.pager__item:hover { border-color: var(--primary); color: var(--primary); }
.pager__item.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ── 페이지 상단 제목 영역 ── 히어로가 없는 하위 페이지 공용 */
.page-head { background: var(--surface); border-bottom: 1px solid var(--line); padding: 52px 0 44px; }
.page-head .eyebrow { display: block; font-size: 13px; font-weight: 700; color: var(--primary); margin-bottom: 12px; }
.page-head h1 { font-weight: 700; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.3; letter-spacing: -.015em; }
.page-head h1 .accent { color: var(--primary); }
.page-head p { font-size: 15px; color: var(--text-mute); line-height: 1.75; margin-top: 16px; max-width: 680px; }
.page-head__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.page-head__cta { margin-top: 20px; }