/* ════════════════════════════════════════════════════════════════════
   링크 허브 — 메타 광고가 처음 닿는 화면 (lp/hub.html · lp/hub-en.html)

   ⚠ 두 페이지가 이 파일 하나를 쓴다. 페이지에 스타일을 따로 두지 말 것.

   방향
     여백을 넉넉히, 선은 가늘게, 색은 금색 하나만.
     아이콘은 «이모지가 아니라» 선 아이콘 — 이모지는 기기마다 그림이 달라
     같은 화면이 사람마다 다르게 보이고, 그게 촌스러움의 절반이다.
   ════════════════════════════════════════════════════════════════════ */

:root{
  --hb-paper:#FBF9F6;      /* 바닥 — 따뜻한 미색 */
  --hb-card:#FFFFFF;
  --hb-line:#EAE4DA;       /* 실선은 아주 가늘게 */
  --hb-ink:#1F1C18;
  --hb-mute:#8A8177;
  --hb-mute-2:#B6ADA1;
  --hb-gold:#A88C64;
  --hb-gold-soft:#F2EBE0;
  --hb-kakao:#FEE500;      /* 카카오 브랜드 짝 — 토큰화 금지 */
  --hb-kakao-ink:#3A1D1D;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--ava-font-body,'Pretendard Variable','Pretendard',-apple-system,sans-serif);
  background:var(--hb-paper); color:var(--hb-ink);
  font-size:16px; line-height:1.65; word-break:keep-all;
  -webkit-font-smoothing:antialiased; padding-bottom:40px;
}
.wrap{max-width:460px;margin:0 auto;padding:0 22px}

/* ── 머리 ─────────────────────────────────────────────── */
.hb-top{padding:46px 0 34px;text-align:center}
.hb-logo{width:52px;height:auto;display:block;margin:0 auto 14px}
.hb-mark{
  font-family:var(--ava-font-display,'Prata',Georgia,serif);
  font-size:21px; letter-spacing:.2em; line-height:1.3; color:var(--hb-ink);
}
.hb-mark--en{font-size:20px;letter-spacing:.26em;text-transform:uppercase}
.hb-rule{width:26px;height:1px;background:var(--hb-gold);margin:15px auto 13px;opacity:.55}
.hb-sub{font-size:12.5px;color:var(--hb-mute);letter-spacing:.02em;line-height:1.7}

/* ── 묶음 ─────────────────────────────────────────────── */
.hb-sec{padding:26px 0 0}
.hb-eyebrow{
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--hb-gold); font-weight:600; margin-bottom:9px;
}
.hb-h{font-size:17.5px;font-weight:700;letter-spacing:-.012em;line-height:1.45}
.hb-p{font-size:13px;color:var(--hb-mute);margin-top:5px;line-height:1.65}
.hb-list{margin-top:14px;display:flex;flex-direction:column;gap:8px}

/* ── 줄 버튼 ───────────────────────────────────────────── */
.hb-row{
  display:flex; align-items:center; gap:13px; width:100%;
  padding:15px 17px; background:var(--hb-card);
  border:1px solid var(--hb-line); border-radius:14px;
  color:var(--hb-ink); text-decoration:none; font-family:inherit;
  text-align:left; cursor:pointer;
  transition:border-color .16s ease, box-shadow .16s ease, transform .07s ease;
}
.hb-row:hover{border-color:#D8CFC1;box-shadow:0 2px 10px rgba(31,28,24,.045)}
.hb-row:active{transform:scale(.995)}
.hb-row:focus-visible{outline:2px solid var(--hb-gold);outline-offset:2px}

.hb-ic{flex:0 0 22px;height:22px;color:var(--hb-mute-2)}
.hb-ic svg{width:22px;height:22px;display:block}
.hb-tx{flex:1;min-width:0}
.hb-tx b{display:block;font-size:15px;font-weight:600;letter-spacing:-.005em;line-height:1.4}
.hb-tx span{display:block;font-size:12.5px;color:var(--hb-mute);margin-top:2px;line-height:1.5}
.hb-arw{flex:0 0 auto;color:var(--hb-mute-2)}
.hb-arw svg{width:15px;height:15px;display:block}

/* 예약 — 이 화면에서 유일하게 채운 버튼 */
.hb-row--go{
  background:var(--hb-gold); border-color:var(--hb-gold); color:#fff;
  box-shadow:0 6px 20px rgba(168,140,100,.26);
}
.hb-row--go:hover{border-color:#9A7F58;background:#9F855F;box-shadow:0 8px 24px rgba(168,140,100,.3)}
.hb-row--go .hb-ic,.hb-row--go .hb-arw{color:rgba(255,255,255,.8)}
.hb-row--go .hb-tx span{color:rgba(255,255,255,.8)}

/* 카카오 — 브랜드 색 그대로 (알아보는 게 값어치다) */
.hb-row--kakao{background:var(--hb-kakao);border-color:var(--hb-kakao);color:var(--hb-kakao-ink)}
.hb-row--kakao:hover{background:#F2DA00;border-color:#F2DA00}
.hb-row--kakao .hb-ic,.hb-row--kakao .hb-arw{color:rgba(58,29,29,.5)}
.hb-row--kakao .hb-tx span{color:rgba(58,29,29,.6)}

/* WhatsApp — 해외용 */
.hb-row--wa{background:#25D366;border-color:#25D366;color:#fff}
.hb-row--wa:hover{background:#1FBF5B;border-color:#1FBF5B}
.hb-row--wa .hb-ic,.hb-row--wa .hb-arw{color:rgba(255,255,255,.8)}
.hb-row--wa .hb-tx span{color:rgba(255,255,255,.82)}

/* LINE — 일본·대만·홍콩용 */
.hb-row--line{background:#06C755;border-color:#06C755;color:#fff}
.hb-row--line:hover{background:#05B04B;border-color:#05B04B}
.hb-row--line .hb-ic,.hb-row--line .hb-arw{color:rgba(255,255,255,.85)}
.hb-row--line .hb-tx span{color:rgba(255,255,255,.85)}

/* ── 예약 폼 — 이 자리에서 펼친다 ─────────────────────── */
.hb-book{display:none;background:var(--hb-card);border:1px solid var(--hb-line);border-radius:16px;padding:20px 17px 17px}
.hb-book.is-open{display:block}
.hb-book label{display:block;font-size:12.5px;font-weight:600;color:var(--hb-ink);margin:15px 0 6px;letter-spacing:-.005em}
.hb-book > form > label:first-of-type{margin-top:0}
.hb-book input,.hb-book select,.hb-book textarea{
  width:100%;padding:12px 13px;border:1px solid var(--hb-line);border-radius:10px;
  font-size:15px;font-family:inherit;background:#fff;color:var(--hb-ink);
}
.hb-book input:focus,.hb-book select:focus,.hb-book textarea:focus{outline:0;border-color:var(--hb-gold)}
.hb-book textarea{min-height:70px;resize:vertical}
.hb-agree{display:flex;gap:9px;align-items:flex-start;font-size:12px;font-weight:400;color:var(--hb-mute);margin-top:16px;line-height:1.6}
.hb-agree input{width:auto;flex:0 0 auto;margin-top:2px;accent-color:var(--hb-gold)}
.hb-agree a{color:var(--hb-gold)}
.hb-send{
  width:100%;margin-top:16px;padding:15px;border:0;border-radius:12px;
  background:var(--hb-gold);color:#fff;font-size:15.5px;font-weight:700;
  font-family:inherit;cursor:pointer;letter-spacing:-.005em;
}
.hb-send:hover{background:#9F855F}
.hb-send:disabled{opacity:.5;cursor:progress}
.hb-fine{font-size:11.5px;color:var(--hb-mute);text-align:center;margin-top:11px;line-height:1.7}
.hb-done{text-align:center;padding:16px 4px}
.hb-done .mk{font-size:30px;line-height:1;color:var(--hb-gold);margin-bottom:13px}
.hb-done h3{font-size:17.5px;font-weight:700;margin-bottom:9px}
.hb-done p{font-size:13.5px;color:var(--hb-mute);line-height:1.75}

/* ── 정보 카드 ─────────────────────────────────────────── */
.hb-info{background:var(--hb-card);border:1px solid var(--hb-line);border-radius:14px;padding:5px 17px}
.hb-info .r{display:flex;gap:12px;padding:11px 0;font-size:14px;border-bottom:1px solid var(--hb-line)}
.hb-info .r:last-child{border-bottom:0}
.hb-info .r b{flex:0 0 68px;color:var(--hb-mute);font-weight:500;font-size:12.5px;padding-top:1px}
.hb-info .off{color:#B0453A}
.hb-addr{font-size:14px;line-height:1.7}
.hb-addr small{display:block;color:var(--hb-mute);font-size:12.5px;margin-top:3px}

/* ── 꼬리 ─────────────────────────────────────────────── */
.hb-foot{margin-top:38px;padding-top:22px;border-top:1px solid var(--hb-line);font-size:11.5px;color:var(--hb-mute);line-height:1.85}
.hb-foot b{display:block;color:var(--hb-ink);font-size:13px;font-weight:600;margin-bottom:4px}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}