/* ── 반응형 ── */
@media (max-width: 768px) {
  .stage { flex-direction: column; }
  .divider { left: 0; right: 0; top: 50%; bottom: auto; width: 100%; height: 1px; transition: none; }
  .divider::before { writing-mode: horizontal-tb; top: 50%; left: 50%; }
  /* 패널 하나가 화면의 절반뿐이다 — 태그+타이틀 3줄+설명+버튼 2개가
     360~400px 안에 들어가야 한다. 기존 값(합계 388px)은 세로 640~750px
     기기에서 위쪽 태그와 타이틀 첫 줄이 잘려 나갔다. */
  .p-title { font-size: clamp(28px, 7.6vw, 42px); margin-bottom: 10px; }
  .p-tag { margin-bottom: 10px; }
  .p-sub { margin-bottom: 16px; }
  .p-btns { gap: 8px; }
  .panel-content { padding: 18px 20px 20px; }
  .p-tag, .p-sub, .p-btns { opacity: 1; transform: translateY(0); }
  .panel-bg { filter: brightness(.38) saturate(.65); }
  .header { padding: 18px 24px; }
  .header-logo img { height: 26px; }
  .header-logo-t { font-size: 15px; }
  .hint { bottom: 16px; }
}

/* 터치 기기 — hover가 없으므로 패널 내용이 처음부터 보여야 한다.
   768px 이하만 처리하면 태블릿(769px 이상 터치)에서 내용이 안 보인 채 남는다. */
@media (hover: none) {
  .p-tag, .p-sub, .p-btns { opacity: 1; transform: translateY(0); }
  /* 타이틀 셋째 줄이 외곽선만 남아 배경에 묻힌다 — 색을 채운다 */
  .p-title span { -webkit-text-stroke-color: transparent; }
  .panel-raw   .p-title span { color: #5ec97a; }
  .panel-glove .p-title span { color: #7ab4f5; }
  /* 손가락으로 누를 영역 확보 */
  .btn-main { padding: 12px 0; }
  .btn-news { padding: 11px 15px; }
}

@media (max-width: 768px) {
  /* 세로 배치에서는 하단 힌트가 아래 패널 버튼 위에 겹친다.
     패널이 화면을 반씩 채우고 있어 안내 자체가 필요 없다. */
  .hint { display: none; }
  /* hover:none 블록과 같은 내용 — 폭 기준으로도 걸어 실제 폰에서 확실히 적용되게 한다 */
  .p-title span { -webkit-text-stroke-color: transparent; }
  .panel-raw   .p-title span { color: #5ec97a; }
  .panel-glove .p-title span { color: #7ab4f5; }
  .btn-main { padding: 12px 0; }
  .btn-news { padding: 11px 15px; }
  .hint span { font-size: 11.5px; }

  .header-sub { font-size: 12px; }
  .p-tag { font-size: 12px; }
  .p-sub { font-size: 14px; line-height: 1.7; max-width: none; }
  .btn-main { font-size: 14px; }
  .btn-news { font-size: 12.5px; }
}

/* 세로가 짧은 기기(아이폰 SE·구형 안드로이드 등) — 설명 두 줄을 넣을 여유가 없다.
   잘려 보이느니 타이틀·버튼을 온전히 보여준다. */
@media (max-width: 768px) and (max-height: 720px) {
  .p-sub { display: none; }
  .p-title { font-size: clamp(26px, 7.2vw, 34px); }
  .panel-content { padding: 16px 20px 18px; }
}

/* 상단 로고바가 첫 패널의 태그·타이틀 위로 겹친다 — 모바일에서는 최소 높이로 */
@media (max-width: 768px) {
  .header { padding: 14px 18px; }
  .header-logo img { height: 22px; }
  .header-logo-t { font-size: 14px; }
  .header-sub { display: none; }
}

/* 동작 줄이기를 켠 사용자 — .panel은 opacity:0에서 애니메이션으로 나타나므로
   애니메이션을 끄면 화면이 비어버린다. 최종 상태를 그대로 보여준다. */
@media (prefers-reduced-motion: reduce) {
  .panel { opacity: 1; animation: none; }
  .hint { animation: none; opacity: .5; }
  * { transition-duration: .01ms !important; }
}