/* 도움말 화면(#help) — 정본 기획 = claudedocs/help_screen_spec.md (§6 화면 · §12.4 화면 계약)
   ⚠️ `@layer`로 감싸지 않는다 (14-walk-find.css 헤더 참조: 레이어 안의 규칙은 레이어 없는 styles/ui.css에
      무조건 진다 — 게다가 ui.css가 index.html에서 이 파일보다 뒤에 링크된다).
   ⚠️ 새 색을 만들지 않는다. 여기 쓰는 값은 전부 이미 있는 재질·문자색의 재사용이다:
        · 배경 = 배지 화면(#achievements)과 같은 assets/stage/bg.webp
        · 구역 제목 = `.achSectionHead`(09-daily-badges-shop.css) 그대로 — 이 파일은 여백만 얹는다
        · 카드/상세 표면 = 설정 화면의 석판 줄 assets/setting/row.png (06-settings.css `.setItem::before`)
        · 글자색 = 그 석판 줄이 쓰는 크림(#f7eed3 / #e7dcbf)과 금빛(--gold 계열) */

/* 라우터 표시 규칙 — daily/outing과 같은 방식으로 **자기 파일에서** 켠다
   (04-screens-title.css의 화면 목록은 그 파일 소유라 건드리지 않는다). */
body[data-screen="help"] #help { display: flex; }

#help {
  position: fixed; inset: 0;
  flex-direction: column;
  background: url('../../assets/stage/bg.webp') center / cover no-repeat;
  overflow: hidden;
  isolation: isolate;
}

/* 상단: 뒤로 + 석판 제목(설정·갤러리와 같은 `.galleryTopHud` 문법). 스크롤 위에 떠 있고, 아래 목록의
   상단 여백(118px)이 그만큼을 비워 둔다. */
#help .helpTopHud {
  position: fixed;
  top: 0;
  left: env(safe-area-inset-left, 0px);
  right: env(safe-area-inset-right, 0px);
  z-index: 9;
}

/* 위 여백은 배지 화면(#achList)과 **같은 값**이다 — 떠 있는 상단 바를 피하는 집안 표준이라 여기서
   새로 정하지 않는다.
   ⚠️ 아래 여백은 다르다. 처음엔 배지 화면의 132px을 그대로 베껴 왔고 "하단 내비를 피하는 값이니
   줄이지 말 것"이라 적어 뒀는데, **도움말 화면엔 그 내비가 뜨지 않는다** — 04-screens-title.css의
   표시 목록(map·gallery·achievements·wardrobe·shop·daily)에 help가 없다. 피할 것이 없는 자리에
   피하는 값이 남아 목록 끝에 빈 띠가 생겼다(오너 지적). 그래서 마지막 카드가 숨 쉴 만큼만 둔다.
   되돌릴 조건은 하나뿐이다: help가 저 표시 목록에 들어가면 그때 다시 132px. */
#help #helpList {
  padding-top: calc(env(safe-area-inset-top, 0px) + 118px);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  padding-left: 14px; padding-right: 14px;
  gap: 0;
  /* 카드가 떠 있는 상단 바 **밑으로 녹아 들어가게** — 맵·상점과 같은 기법·같은 수치 */
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0,
    transparent calc(env(safe-area-inset-top,0px) + 106px),
    #000 calc(env(safe-area-inset-top,0px) + 142px),
    #000 calc(100% - 40px),
    transparent 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0,
    transparent calc(env(safe-area-inset-top,0px) + 106px),
    #000 calc(env(safe-area-inset-top,0px) + 142px),
    #000 calc(100% - 40px),
    transparent 100%);
}

/* ⚠️ `flex: none` 필수 — `.mapScroll`은 column flex 컨테이너라, 없으면 목록이 길어질 때 항목들이
   눌려 찌그러진다(05-map.css의 같은 함정 주석 참조). */
#help .helpSectionHead { flex: none; margin: 0 4px 10px; }
#help .helpSectionHead:not(:first-child) { margin-top: clamp(18px, 4.5vw, 26px); }

/* ── 카드 ────────────────────────────────────────────────────────────────────────────────────
   계약(§12.4): 카드 = `<button class="helpCard" data-help-id>`. 「가서 보기」도 버튼이라 카드 안에
   중첩할 수 없어, 카드(버튼)와 상세를 `.helpItem`이 형제로 감싼다. */
#help .helpItem { flex: none; position: relative; margin-bottom: clamp(8px, 2.2vw, 12px); }

#help .helpCard {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: clamp(56px, 14.5vw, 70px);
  padding: 0 46px 0 76px;
  border: none; border-radius: 0; box-shadow: none; background: transparent;
  color: #f7eed3; text-align: left; cursor: pointer;
  font-size: clamp(15px, 4.3vw, 19px); font-weight: 900;
}
#help .helpCard::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url('../../assets/setting/row.png') center / 100% 100% no-repeat;
  filter: drop-shadow(0 3px 4px rgba(18,28,12,.4));
}
/* ⚠️ 목록 항목은 CTA가 아니다 — styles/ui.css의 누름 스쿼시를 **일부러** 걷어낸다
   (그 파일 주석의 경계: `.shopRow`·`.dailyPiece` 같은 카드는 누름 위계에서 빠진다. 목록이 통째로
   꿈틀대면 스크롤 중에 계속 들썩인다). 대신 눌린 느낌은 밝기로만 준다. */
#help .helpCard:active { transform: none; box-shadow: none; filter: brightness(1.06); }
#help .helpCard:hover { filter: none; box-shadow: none; }

#help .helpIcon {
  position: absolute; left: 38px; top: 50%; transform: translate(-50%, -50%);
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
}
#help .helpIcon .helpImg { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(30,16,4,.5)); }
#help .helpIcon .helpIco {
  width: 88%; height: 88%; color: #f1c75a; fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 1px 0 #5a3a12) drop-shadow(0 2px 3px rgba(18,10,2,.5));
}
#help .helpIcon .helpIco path[fill="currentColor"] { fill: currentColor; }

#help .helpName {
  flex: 1; min-width: 0; line-height: 1.12;
  text-shadow: 0 2px 0 #3a2810, -1px 0 0 #3a2810, 1px 0 0 #3a2810, 0 2px 4px rgba(0,0,0,.55);
}

/* 펼침 표식 = 아래로 향한 갈매기(글자 대신 도형 — 「글자 최소·아이콘 우선」). */
#help .helpMark {
  position: absolute; right: 22px; top: 50%;
  width: 11px; height: 11px; margin-top: -7px;
  border-right: 2.5px solid #f1c75a; border-bottom: 2.5px solid #f1c75a;
  transform: rotate(45deg);
  transition: transform .18s ease, margin-top .18s ease;
}
#help .helpItem.open .helpMark { transform: rotate(-135deg); margin-top: -2px; }

/* ── 상세(그 자리에서 펼쳐진다) ─────────────────────────────────────────────────────────────── */
/* ⚠️ 작성자 `display`를 준 요소에 `hidden`을 쓰므로 짝 규칙이 **반드시** 있어야 한다 — 없으면
   브라우저 기본 `[hidden]{display:none}`을 이 파일이 이겨 상세가 늘 펼쳐진 채로 보인다
   (이 저장소가 #noDrags에서 이미 한 번 겪은 함정. CLAUDE.md 참조). */
#help .helpDetail[hidden] { display: none; }
#help .helpDetail {
  display: flex; flex-direction: column; gap: 6px;
  margin: 2px 10px 0;
  padding: 12px 16px 14px;
  border: 1px solid rgba(255,236,178,.22);
  border-top: none;
  border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, rgba(28,34,20,.72), rgba(20,26,15,.78));
  box-shadow: inset 0 1px 0 rgba(255,246,205,.14);
  animation: helpDetailIn .2s ease-out both;
}
@keyframes helpDetailIn {
  0%   { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 1; transform: translateY(0); }
}
#help .helpLine {
  margin: 0; padding-left: 16px; position: relative;
  font-size: clamp(14px, 3.8vw, 16px); font-weight: 700; line-height: 1.35;
  color: #e7dcbf;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
/* 두 줄의 역할(얻는 법 / 쓰는 곳)은 라벨이 아니라 **표식 색**으로 가른다(글자 최소).
   금빛 = 받는 것, 옅은 크림 = 쓰는 곳. 색만으로 구분하지 않도록 줄 순서(위=얻는 법)도 고정이다. */
#help .helpLine::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 6px; height: 6px; border-radius: 50%;
}
#help .helpGet::before { background: var(--gold); box-shadow: 0 0 5px rgba(255,224,122,.5); }
#help .helpUse::before { background: rgba(231,220,191,.7); }

#help .helpGoBtn {
  align-self: flex-start; margin-top: 8px;
  min-width: 0; padding: 8px 16px;
  border: 1px solid rgba(255,236,178,.72); border-radius: 12px;
  background: linear-gradient(180deg, #7c7361 0%, #5b5343 100%);
  color: #fff3d6; font-size: 15px; font-weight: 900;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.4), 0 1px 0 rgba(255,240,190,.3);
  text-shadow: 0 1px 2px rgba(20,12,2,.6);
}

/* 배우기 시작 레슨 「다시 보기」 — 라벨 한 개 + 레슨 세 개(v3 §5.2·§8.3의 「선택 재생」).
   ⚠️ 새 버튼 변종을 만들지 않는다. 알약은 `.helpGoBtn` 그대로이고 여기서는 **줄바꿈과 크기만** 손댄다
   (`.helpGoBtn`의 `align-self:flex-start`는 이 줄 안에서 무의미해지므로 부모가 정렬을 맡는다).
   라벨을 따로 두는 이유: 낱말 세 개("그리기·돌리기·뒤집기·숫자만큼")만 있으면 무엇을 하는 버튼인지
   읽히지 않는다 — 「다시 보기」가 그 세 개를 한 문장으로 묶는다. */
#help .helpReplayRow {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px; margin-top: 8px;
}
#help .helpReplayLabel {
  font-size: 13px; font-weight: 900; color: rgba(231,220,191,.82);
  text-shadow: 0 1px 2px rgba(20,12,2,.55);
}
#help .helpReplayBtn {
  margin-top: 0;                      /* 줄이 gap으로 간격을 맡는다 */
  padding: 6px 12px; font-size: 14px; /* 한 줄에 셋이 들어가도록 알약을 한 단 줄인다 */
}

/* 빈 상태 — 아직 아무것도 만나지 않은 사람. 실루엣도 「앞으로 열릴 것」도 두지 않는다(기획서 §1-3). */
#help .helpEmpty {
  margin: 24px 12px 0; text-align: center;
  font-size: clamp(15px, 4vw, 17px); font-weight: 800; line-height: 1.45;
  color: #e7dcbf;
  text-shadow: 0 2px 0 #3a2810, 0 2px 5px rgba(0,0,0,.55);
}

/* 감속 모드: 이동·회전은 걷어내되 상태 변화 자체는 남긴다(연출 헌법 §4.5 — 하드 컷으로 문맥을 끊지 않는다). */
html[data-motion="reduced"] #help .helpDetail { animation: none; }
html[data-motion="reduced"] #help .helpMark { transition: none; }


/* ── 떠 있는 물음표 ──────────────────────────────────────────────────────────────────────────────
   맵의 복습 샤(.reviewSha)와 **같은 규칙**: 하단 내비 바(z-index 6)를 피해 그 위 100px에 뜨고 z-index 7로
   바를 이긴다. ⚠️ 같은 z·같은 높이에 새 요소를 두면 DOM 순서로 가려진다 — 그 사고가 이미 한 번 났다.
   ⚠️ 복습 샤가 왼쪽이라 이건 오른쪽이다. */
#helpFab {
  position: fixed;
  right: calc(12px + env(safe-area-inset-right, 0px));
  bottom: calc(100px + env(safe-area-inset-bottom, 0px));
  z-index: 7;
  width: 44px; height: 44px;            /* 터치 최소 권장 44px */
  display: grid; place-items: center;
  padding: 0; border: none; border-radius: 999px;
  background: url('../../assets/setting/row.png') center / 100% 100% no-repeat;
  color: #fff0a8;                        /* 「권하는 길」 금빛 — 모달 버튼 어휘와 같은 뜻 */
  font-family: 'Jua', system-ui, sans-serif;
  font-size: 22px; font-weight: 400; line-height: 1;
  text-shadow: 0 2px 3px rgba(28,14,4,.6);
  filter: drop-shadow(0 4px 10px rgba(5,18,18,.4));
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  outline: none; box-shadow: none;
}
#helpFab[hidden] { display: none; }      /* 작성자 display를 준 요소에는 짝 규칙이 필요하다(집안 함정) */
#helpFab:active { transform: scaleX(1.06) scaleY(.90); }
#helpFab { transition: transform .32s cubic-bezier(.22,1.7,.38,1); }
html[data-motion="reduced"] #helpFab { transition: none; }