/* ══════════════════════════════════════════════════════════
   첫 화면

   예전 첫 화면은 기능 열한 가지를 세로로 늘어놓은 소개 페이지였다. 정보는
   많았지만 무엇부터 보아야 할지 알 수 없었고, 휴대폰에서는 끝이 보이지 않았다.

   이제 세 가지만 말한다.
     1. 여기가 무엇을 하는 곳인가 (처음 온 사람) / 오늘 무엇을 하면 되는가 (회원)
     2. 지금 이 책방에서 실제로 오가는 것 — 글, 책, 모임
     3. 온라인에서 끝나지 않는다는 것 — 지도에 남는 자리

   그림책방이다. 영어 라벨과 통계 나열 대신 문장을 쓴다.
   ══════════════════════════════════════════════════════════ */

/* ── 처음 온 사람 ──────────────────────────────────────── */
.hm-hero {
    padding: 84px 0 18px;
    background:
        radial-gradient(60% 45% at 50% 0%, rgba(16,185,129,.14), transparent 70%),
        var(--hbc-dark);
    text-align: center;
}
.hm-hero-in { max-width: 680px; margin: 0 auto; }
.hm-hero-art { width: 240px; max-width: 64%; margin-bottom: .6rem; }
.hm-hero h1 {
    color: #fff; font-weight: 900; letter-spacing: -.03em;
    font-size: clamp(1.75rem, 7vw, 3rem); line-height: 1.22; margin: 0;
    word-break: keep-all;
}
.hm-hero h1 em { font-style: normal; color: var(--hbc-gold-light); }
.hm-hero p {
    color: var(--hbc-muted); margin: 1rem auto 0; max-width: 34rem;
    font-size: clamp(.92rem, 3.6vw, 1.05rem); line-height: 1.85; word-break: keep-all;
}
.hm-hero p b { color: var(--hbc-text); }

.hm-hero-acts { display: flex; gap: .5rem; justify-content: center; margin-top: 1.4rem; flex-wrap: wrap; }
.hm-hero-acts .btn { min-height: 48px; padding: 0 1.4rem; border-radius: 12px;
                     font-weight: 700; display: inline-flex; align-items: center; }
/* 이용 안내로 가는 한 줄 — 단추 둘보다 한 단계 낮게, 그래도 손가락이 닿게 */
.hm-hero-guide { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; margin-top: .5rem;
                 color: #fdba74; font-size: .88rem; font-weight: 700; text-decoration: none; word-break: keep-all; }
.hm-hero-guide:hover { color: #fed7aa; }
.hm-how-note a + a { margin-left: .6rem; }

.hm-hero-live {
    display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
    margin-top: 1.1rem; font-size: .8rem; color: var(--hbc-muted);
}
.hm-hero-live b { color: var(--hbc-gold-light); }

/* ── 다시 온 사람 — 오늘 한 장 ─────────────────────────── */
.hm-today { padding: 76px 0 8px; }
.hm-today-card {
    border: 1px solid rgba(16,185,129,.28); border-radius: 18px;
    background: linear-gradient(180deg, rgba(16,185,129,.10), rgba(16,185,129,.02));
    padding: 1rem 1.1rem;
}
.hm-today-head { display: flex; align-items: center; gap: .7rem; }
.hm-today-head > div:nth-child(2) { flex: 1; min-width: 0; }
.hm-today-craft { width: 74px; flex: 0 0 auto; }
.hm-today-craft svg { width: 100%; height: auto; display: block; }
.hm-today-hi { color: #fff; font-size: 1.02rem; font-weight: 700; }
.hm-today-hi b { color: var(--hbc-gold-light); }
.hm-today-where {
    font-size: .8rem; color: var(--hbc-muted); margin-top: .15rem;
    /* 두 줄로 넘치면 오른쪽 포인트와 겹친다 — 한 줄로 두고 넘치면 자른다 */
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hm-today-where b { color: var(--hbc-text); }
.hm-today-p {
    margin-left: auto; text-align: right; text-decoration: none; flex: 0 0 auto;
    color: var(--hbc-gold-light); font-weight: 800;
}
.hm-today-p b { font-size: 1.15rem; }
.hm-today-p span { font-size: .78rem; opacity: .8; }

.hm-today-todo {
    display: flex; align-items: center; gap: .6rem; margin-top: .9rem;
    padding: .7rem .8rem; border-radius: 12px; text-decoration: none;
    background: rgba(0,0,0,.25); border: 1px solid var(--hbc-border);
    color: var(--hbc-text);
}
.hm-today-todo > i:first-child { color: var(--hbc-gold); font-size: 1.05rem; }
.hm-today-todo span { min-width: 0; }
.hm-today-todo b { display: block; color: #fff; font-size: .88rem; }
.hm-today-todo small {
    display: block; color: var(--hbc-muted); font-size: .76rem; margin-top: .1rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.hm-today-acts { display: flex; gap: .4rem; margin-top: .7rem; }
.hm-today-acts a {
    flex: 1; min-height: 44px; border-radius: 11px; text-decoration: none;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
    background: rgba(255,255,255,.04); border: 1px solid var(--hbc-border);
    color: var(--hbc-text); font-size: .78rem; font-weight: 600;
}
.hm-today-acts a i { font-size: 1rem; color: var(--hbc-gold-light); }
/* 넷이 한 줄에 서야 한다 — 좁은 휴대폰에서는 글자를 조금 줄이고 꺾이지 않게 둔다 */
.hm-today-acts a { min-width: 0; padding: .3rem .15rem; white-space: nowrap; }
@media (max-width: 380px) {
    .hm-today-acts { gap: .3rem; }
    .hm-today-acts a { font-size: .72rem; }
}

/* ── 진행 중인 하늘 선물 한 줄 ─────────────────────────── */
.hm-drop {
    display: flex; align-items: center; gap: .5rem; margin-top: 1rem;
    padding: .6rem .8rem; border-radius: 12px; text-decoration: none;
    background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.3);
    color: var(--hbc-muted); font-size: .82rem;
}
.hm-drop b { color: #fcd34d; }
.hm-drop .dot {
    width: 8px; height: 8px; border-radius: 50%; background: #fcd34d; flex: 0 0 auto;
    box-shadow: 0 0 0 0 rgba(252,211,77,.6); animation: hmPulse 1.8s infinite;
}
@keyframes hmPulse { 70% { box-shadow: 0 0 0 8px rgba(252,211,77,0); } 100% { box-shadow: 0 0 0 0 rgba(252,211,77,0); } }

/* ── 구역 공통 ─────────────────────────────────────────── */
.hm-sec { padding: 2.2rem 0 .2rem; }
.hm-sec-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 1rem; margin-bottom: .9rem;
}
.hm-sec-head h2 {
    color: #fff; font-weight: 800; letter-spacing: -.02em;
    font-size: clamp(1.15rem, 4.6vw, 1.5rem); margin: .3rem 0 0; word-break: keep-all;
}
.hm-sec-head > a {
    flex: 0 0 auto; color: var(--hbc-gold-light); text-decoration: none;
    font-size: .82rem; font-weight: 700; white-space: nowrap;
}
.hm-label {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .74rem; font-weight: 700; color: var(--hbc-muted);
}
.hm-label i { color: var(--hbc-gold); }

/* ── 광장 ──────────────────────────────────────────────── */
.hm-plaza { display: flex; flex-direction: column; gap: .5rem; }

/* ── 책 — 옆으로 넘긴다 ────────────────────────────────── */
.hm-rail {
    display: flex; gap: .7rem; overflow-x: auto; padding-bottom: .4rem;
    scroll-snap-type: x proximity; scrollbar-width: none;
    margin: 0 -16px; padding-left: 16px; padding-right: 16px;
}
.hm-rail::-webkit-scrollbar { display: none; }
.hm-book {
    flex: 0 0 132px; scroll-snap-align: start; text-decoration: none;
}
.hm-book .cov {
    width: 132px; height: 180px; border-radius: 12px; overflow: hidden;
    background: var(--hbc-dark-3); border: 1px solid var(--hbc-border);
    display: flex; align-items: center; justify-content: center;
}
.hm-book .cov img { width: 100%; height: 100%; object-fit: cover; }
.hm-book .cov i { font-size: 1.8rem; color: var(--hbc-muted); }
.hm-book .ti {
    color: #fff; font-size: .84rem; font-weight: 600; margin-top: .45rem; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hm-book .au { color: var(--hbc-muted); font-size: .74rem; margin-top: .1rem;
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-book .pr { color: var(--hbc-gold-light); font-size: .78rem; font-weight: 700; margin-top: .15rem; }

/* ── 독서토론 ──────────────────────────────────────────── */
.hm-clubs { display: flex; flex-direction: column; gap: .5rem; }
.hm-club {
    display: flex; align-items: center; gap: .7rem; text-decoration: none;
    padding: .65rem .8rem; border-radius: 14px;
    background: var(--hbc-dark-3); border: 1px solid var(--hbc-border);
}
.hm-club .cov {
    width: 52px; height: 52px; flex: 0 0 auto; border-radius: 11px; overflow: hidden;
    background: rgba(56,189,248,.1); display: flex; align-items: center; justify-content: center;
}
.hm-club .cov img { width: 100%; height: 100%; object-fit: cover; }
.hm-club .cov i { color: #7dd3fc; font-size: 1.2rem; }
.hm-club .tx { flex: 1; min-width: 0; }
.hm-club .st {
    display: inline-block; font-size: .68rem; font-weight: 700; border-radius: 999px;
    padding: .05rem .45rem; background: rgba(255,255,255,.07); color: var(--hbc-muted);
}
.hm-club .st.is-open { background: rgba(56,189,248,.16); color: #7dd3fc; }
.hm-club b {
    display: block; color: #fff; font-size: .9rem; margin-top: .2rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hm-club small {
    display: block; color: var(--hbc-muted); font-size: .76rem; margin-top: .1rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hm-club > i { color: var(--hbc-muted); flex: 0 0 auto; }

/* ── 세 걸음 ───────────────────────────────────────────── */
.hm-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.hm-steps li {
    position: relative; display: grid;
    grid-template-columns: 74px 1fr; grid-template-rows: auto auto;
    column-gap: .8rem; align-items: center;
    padding: .8rem .9rem; border-radius: 14px;
    background: var(--hbc-dark-3); border: 1px solid var(--hbc-border);
}
/* 조종사는 세로로, 기체는 가로로 긴 그림이다. 너비만 맞추면 1번 칸만 키가 커져
   석 장이 따로 논다. 높이를 맞추고 안에서 비율대로 앉힌다. */
.hm-steps img { grid-row: 1 / 3; width: 74px; height: 74px; object-fit: contain; }
.hm-steps .n {
    position: absolute; top: .55rem; right: .7rem;
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(16,185,129,.18); color: var(--hbc-gold-light);
    font-size: .74rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.hm-steps b { color: #fff; font-size: .95rem; align-self: end; }
.hm-steps small { color: var(--hbc-muted); font-size: .8rem; line-height: 1.6; align-self: start;
                  word-break: keep-all; }

.hm-how-note {
    margin-top: .9rem; padding: .7rem .9rem; border-radius: 12px;
    background: rgba(16,185,129,.06); border: 1px solid rgba(16,185,129,.2);
    font-size: .84rem; color: var(--hbc-muted); line-height: 1.7;
}
.hm-how-note b { color: var(--hbc-text); }
.hm-how-note a { color: var(--hbc-gold-light); text-decoration: none; font-weight: 700; white-space: nowrap; }

.hm-cta { margin-top: 1.2rem; text-align: center; }
.hm-cta .btn { min-height: 50px; padding: 0 1.6rem; border-radius: 12px; font-weight: 700;
               display: inline-flex; align-items: center; }
.hm-cta span { display: block; margin-top: .6rem; font-size: .8rem; color: var(--hbc-muted); }
.hm-cta b { color: var(--hbc-gold-light); }

/* ── 지도 한 줄 ────────────────────────────────────────── */
.hm-map {
    display: flex; align-items: center; gap: .8rem; text-decoration: none;
    padding: .9rem 1rem; border-radius: 16px;
    background: linear-gradient(120deg, rgba(16,185,129,.10), rgba(56,189,248,.06));
    border: 1px solid var(--hbc-border);
}
.hm-map .tx { flex: 1; min-width: 0; }
.hm-map b { display: block; color: #fff; font-size: .95rem; margin-top: .25rem; word-break: keep-all; }
.hm-map small { display: block; color: var(--hbc-muted); font-size: .8rem; margin-top: .25rem; }
.hm-map small b { display: inline; color: var(--hbc-gold-light); }
.hm-map > i { color: var(--hbc-muted); flex: 0 0 auto; }

/* 방금 오간 글 — 숫자보다 이쪽이 "지금 살아 있다"를 말한다 */
.hm-flights { display: flex; flex-direction: column; gap: .3rem; margin-top: .6rem; }
.hm-flight {
    display: flex; align-items: center; gap: .4rem;
    font-size: .8rem; color: var(--hbc-muted);
    padding: .35rem .6rem; border-radius: 9px; background: rgba(255,255,255,.03);
}
.hm-flight i { color: var(--hbc-gold-light); font-size: .85rem; }
.hm-flight b { color: var(--hbc-text); font-weight: 600;
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-flight .ar { opacity: .5; }
.hm-flights-locked {
    margin-top: .6rem; font-size: .78rem; color: var(--hbc-muted);
    padding: .5rem .7rem; border-radius: 9px;
    background: rgba(255,255,255,.03); border: 1px dashed var(--hbc-border);
}
.hm-flights-locked b { color: var(--hbc-text); }

/* ── 넓은 화면 ─────────────────────────────────────────── */
@media (min-width: 768px) {
    .hm-sec { padding: 3rem 0 .4rem; }
    .hm-steps { grid-template-columns: repeat(3, 1fr); }
    .hm-steps li { grid-template-columns: 1fr; grid-template-rows: auto auto auto; text-align: center; }
    .hm-steps img { grid-row: auto; margin: 0 auto .3rem; width: 88px; height: 88px; }
    .hm-steps .n { top: .6rem; left: .8rem; right: auto; }
    .hm-clubs { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
    .hm-rail { margin: 0; padding-left: 0; padding-right: 0; }
    .hm-today-craft { width: 92px; }
}

/* 넓은 화면의 위쪽 메뉴 줄은 휴대폰 상단 바(56px)보다 높다(로고 두 줄 + 위아래 여백).
   76px 로는 첫 패널이 메뉴 줄 바로 밑에 붙어 보였다 — 메뉴 줄 아래로 한 뼘 띄운다. */
@media (min-width: 992px) {
    .hm-today { padding-top: 104px; }
    .hm-hero  { padding-top: 112px; }
}