/* 통합 앱 첫 화면 디자인 — 리스닝 첫 화면 규칙을 단어장·영작에 그대로(2026-10-26, 규칙 _규칙상세/09 [10-25 2차]·[10-26]·[10-26 3차]·[10-26 4차])
   - 설명 문장은 빼고 제목·버튼만, 인사 2줄(.hello)
   - 같은 크기의 접힌 섹션 카드(.hc, 최소 104px) → 누르면 그 섹션만 펼친 화면 + '← 처음으로'
   - 번호 = 네이비 원(.hc-n), 아이콘 배지(.hc-i), 카드 왼쪽 4px 네이비 줄, 1번 카드 = 네이비 바탕·흰 글씨
   - 색은 브랜드 팔레트 하나(네이비 #1E2761 · 아이스블루 #CADCFC · 아이스라이트 #EDF3FC · 선 #D5E2F5) — 섹션별 다른 색(10-25)은 폐기된 지시라 쓰지 않음
   - 버튼 46px 이상, 버튼 글자 = 누르면 할 일
   클래스 이름을 리스닝(.scard)과 다르게 둔 것은 단어장 카드의 .sec·.sub, 영작의 .card·.step과 겹치지 않게 하려는 것(모양은 같다). */
.hub-top { position: sticky; top: 0; z-index: 20; background: #1E2761; color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 52px; padding: env(safe-area-inset-top) calc(14px + env(safe-area-inset-right)) 0 calc(14px + env(safe-area-inset-left)); }
.hub-top .name { font-weight: 800; font-size: 1rem; white-space: nowrap; }
.hub-top .links { display: flex; gap: 6px; }
.hub-top a { color: #1E2761; background: #CADCFC; text-decoration: none; font-size: 0.8rem; font-weight: 700; padding: 7px 11px; border-radius: 99px; white-space: nowrap; }

.hub-ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hello { padding: 6px 2px 14px; word-break: keep-all; }
.hello h1 { font-size: 1.3rem; color: #1a1a2e; line-height: 1.35; margin: 0; font-weight: 800; }
.hello p { font-size: 0.88rem; color: #66738C; margin: 2px 0 0; line-height: 1.5; }
.hello .hl { background: linear-gradient(transparent 55%, #fef3c7 55%); }

.hc { --bg: #fff; --bd: #D5E2F5; --ib: #EDF3FC; --ic: #1E2761;
  position: relative; display: block; width: 100%; min-height: 104px; margin: 0 0 12px; padding: 12px 16px 16px; text-align: left;
  border: 1.5px solid var(--bd); border-left: 4px solid #1E2761; border-radius: 16px; background: var(--bg); color: #1a1a2e;
  box-shadow: 0 1px 3px rgba(30, 39, 97, 0.06); font: inherit; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.hc:active { filter: brightness(0.97); }
.hc.main { --bg: #EDF3FC; --bd: #CADCFC; --ib: #fff; }
.hc.lead { --bg: #1E2761; --bd: #1E2761; --ib: rgba(255, 255, 255, 0.14); --ic: #fff; color: #fff; }
.hc-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 46px; margin: 0 0 6px; }
.hc-t { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 1.05rem; font-weight: 800; line-height: 1.3; word-break: keep-all; letter-spacing: -0.01em; color: inherit; }
.hc.lead .hc-t { font-size: 1.2rem; }
.hc-n { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #1E2761; color: #fff; font-size: 0.86rem; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.hc.lead .hc-n { background: #fff; color: #1E2761; }
.hc-i { flex: none; width: 27px; height: 27px; border-radius: 8px; background: var(--ib); color: var(--ic); display: inline-flex; align-items: center; justify-content: center; }
.hc-i .hub-ico { width: 17px; height: 17px; }
.hc-a { flex: none; width: 22px; height: 46px; display: inline-flex; align-items: center; justify-content: flex-end; color: var(--ic); font-size: 1.6rem; font-weight: 700; line-height: 1; }
.hc-l { display: block; font-size: 0.86rem; color: #66738C; line-height: 1.5; margin-top: 6px; }
.hc.lead .hc-l { color: #CADCFC; }
@media (hover: hover) { .hc:hover { border-color: var(--ic); border-left-color: #1E2761; } .hc.lead:hover { border-color: #1E2761; } }

/* 펼친 화면 위 '← 처음으로' + 그 섹션 제목 */
.hub-back { display: inline-flex; align-items: center; gap: 6px; min-height: 46px; margin: -6px 0 4px -4px; padding: 0 6px; border: none; background: none;
  color: #1a1a2e; font: inherit; font-size: 0.95rem; font-weight: 700; cursor: pointer; }
.hub-sh { display: flex; align-items: center; gap: 7px; margin: 0 0 12px; font-size: 1.15rem; font-weight: 800; color: #1a1a2e; line-height: 1.3; word-break: keep-all; }
.hub-sh .hc-i { --ib: #EDF3FC; --ic: #1E2761; }

/* 11-06 사용자 "문장이 끊겨서 다음줄로 내려가잖아. 문장단위로 깔끔하게": 한글은 띄어쓰기에서만 줄바꿈(단어 중간 끊김 없음), 긴 영어·주소만 넘칠 때 끊음, 마지막 줄에 한 단어만 남지 않게 */
body { word-break: keep-all; overflow-wrap: anywhere; }
body { text-wrap: pretty; }   /* 모든 글(문장·영어 대사·설명)에 적용 */
.nw { white-space: nowrap; }   /* 작품 이름 등 한 덩어리 */