.help-button {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px 8px 8px;
  border: 1px solid rgba(21,92,67,.22);
  border-radius: 999px;
  color: #155c43;
  background: rgba(255,254,250,.96);
  box-shadow: 0 10px 30px rgba(23,54,42,.16);
  font: inherit;
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.help-button span { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; color:#fff; background:#155c43; font-weight:900; }
.help-button small { font-size:11px; font-weight:850; }
.help-button:hover { transform: translateY(-2px); }

.guide-modal { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px; }
.guide-backdrop { position:absolute; inset:0; border:0; background:rgba(12,27,21,.58); backdrop-filter:blur(5px); cursor:default; }
.guide-panel { position:relative; width:min(920px,100%); max-height:calc(100vh - 40px); overflow:auto; border:1px solid rgba(255,255,255,.55); border-radius:24px; background:#fffefa; box-shadow:0 30px 90px rgba(8,27,19,.3); }
.guide-header { display:flex; align-items:center; justify-content:space-between; padding:24px 28px 19px; border-bottom:1px solid #e1e7e2; }
.guide-kicker { color:#155c43; font-size:9px; font-weight:900; letter-spacing:.15em; }
.guide-header h2 { margin:4px 0 0; font:700 25px Georgia,"Noto Serif KR",serif; }
.guide-close { display:grid; place-items:center; width:38px; height:38px; border:0; border-radius:50%; color:#66736c; background:#eef2ef; font-size:24px; cursor:pointer; }
.guide-body { display:grid; gap:18px; padding:22px 28px; }
.guide-section { padding:19px; border:1px solid #dce4de; border-radius:16px; background:#fff; }
.guide-section.recommended-guide { border-color:rgba(184,155,84,.48); background:linear-gradient(135deg,#fffdf7,#f2f8f4); box-shadow:0 10px 24px rgba(42,91,69,.08); }
.guide-section.recommended-guide .guide-section-title>span { color:#fff; background:#155c43; }
.guide-section.recommended-guide .guide-section-title strong:after { content:'추천'; display:inline-flex; margin-left:7px; padding:2px 6px; border-radius:999px; color:#fff; background:#d4872f; font-family:"Pretendard","Noto Sans KR",system-ui,sans-serif; font-size:9px; font-weight:900; vertical-align:2px; }
.guide-section.fallback-guide { background:#fafbf9; }
.guide-section.fallback-guide .guide-section-title>span { color:#748079; background:#edf1ee; }
.guide-section-title { display:flex; align-items:center; gap:11px; margin-bottom:16px; }
.guide-section-title>span { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; color:#155c43; background:#e9f3ed; font-size:10px; font-weight:900; }
.guide-section-title strong { display:block; font-size:15px; }
.guide-section-title p { margin:3px 0 0; color:#718078; font-size:11px; }
.guide-flow { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; align-items:center; gap:8px; }
.guide-flow>i { color:#92a198; font-style:normal; font-weight:900; }
.guide-step { min-height:91px; padding:12px; border-radius:12px; background:#f2f5f2; text-align:center; }
.guide-step b { display:grid; place-items:center; width:23px; height:23px; margin:0 auto 7px; border-radius:50%; color:#fff; background:#769184; font-size:10px; }
.guide-step strong { display:block; font-size:11px; }
.guide-step small { display:block; margin-top:4px; color:#75827b; font-size:9px; line-height:1.35; }
.guide-step.accent { border:1px solid rgba(21,92,67,.15); background:#eaf4ee; }
.guide-step.accent b { background:#155c43; }
.guide-tip { display:flex; align-items:center; gap:10px; margin-top:13px; padding:11px 13px; border-radius:10px; color:#6d603f; background:#f7efd9; }
.guide-tip>span { display:grid; place-items:center; flex:0 0 auto; width:23px; height:23px; border-radius:50%; color:#fff; background:#a88438; font-weight:900; }
.guide-tip p,.privacy-guide p { margin:0; font-size:10px; line-height:1.55; }
.privacy-guide { display:flex; align-items:center; gap:9px; padding:12px 15px; border-radius:11px; color:#456455; background:#edf5f0; }
.privacy-guide>span { color:#155c43; font-weight:900; }
.guide-footer { padding:0 28px 24px; text-align:right; }
.guide-footer button { padding:11px 22px; border:0; border-radius:10px; color:#fff; background:#155c43; font:inherit; font-size:12px; font-weight:850; cursor:pointer; }
body.modal-open { overflow:hidden; }

@media(max-width:700px) {
  .help-button { right:14px; bottom:14px; }
  .help-button small { display:none; }
  .help-button { padding:7px; }
  .guide-modal { padding:10px; }
  .guide-panel { max-height:calc(100vh - 20px); border-radius:18px; }
  .guide-header,.guide-body { padding-left:18px; padding-right:18px; }
  .guide-header h2 { font-size:21px; }
  .guide-flow { grid-template-columns:1fr; }
  .guide-flow>i { transform:rotate(90deg); text-align:center; }
  .guide-step { min-height:0; }
  .guide-footer { padding:0 18px 18px; }
  .guide-footer button { width:100%; }
}