html, body { margin:0; padding:0; overflow-x:hidden; }

/* ✅ CTA가 콘텐츠를 덮지 않도록 여유 확보 */
:root{ --ctaH: 0px; }

.landing{
  max-width:1080px;
  margin:0 auto;
  padding-bottom: calc(var(--ctaH) + 24px + env(safe-area-inset-bottom));
}

.block img{ width:100%; display:block; }

/* ✅ PC 겹침/경계 이상 완화:
   - 고정 height는 유지하되 "섹션 이미지가 원본비율에서 과도하게 잘리며
     경계가 어색해지는" 케이스를 줄이기 위해 min-height + auto 조합으로 완화
   - 모바일은 기존 그대로(auto)
*/
.block.short{
  height:auto;               /* ✅ 기본은 auto로 */
  overflow:hidden;
}
.block.short img{
  width:100%;
  height:auto;               /* ✅ 기본은 auto로 */
  object-fit:contain;        /* ✅ 기본은 contain으로 */
  display:block;
}

/* ✅ PC(600px 초과)에서만: 원래 한빔처럼 '짧은 섹션' 느낌 유지가 필요하면
   max-height로만 제한 (겹침/잘림 위험 낮춤)
*/
@media (min-width: 601px){
  .block.short img{
    max-height: 985.1337px;  /* ✅ 기존 높이값을 "상한"으로만 사용 */
    width:100%;
    height:auto;
    object-fit:contain;
  }
}

/* 오버레이 섹션 */
.block-overlay{ position:relative; }

/* overlay-layer는 클릭 비활성, 내부 ov만 클릭 활성 */
.overlay-layer{ position:absolute; inset:0; pointer-events:none; }
.overlay-layer .ov,
.overlay-layer a{ pointer-events:auto; }

/* 오버레이 요소 */
.ov{
  position:absolute;
  background:transparent;
  border:none;
  outline:none;
  box-sizing:border-box;
  cursor:pointer;
  z-index: 20;
}

/* Toast */
#toast{
  position:fixed;
  left:50%;
  bottom: calc(160px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  background:rgba(0,0,0,.82);
  color:#fff;
  padding:12px 16px;
  border-radius:12px;
  font-size:14px;
  opacity:0;
  transition:.2s;
  z-index:10000;
  pointer-events:none;
  max-width: min(520px, calc(100vw - 24px));
  text-align:center;
}
#toast.show{ opacity:1; }

/* ==================================================
   ✅ Hanbeam Fixed CTA (Branch + Actions)
   ================================================== */
:root{
  --hbCtaPadX: 14px;
  --hbCtaPadY: 10px;
  --hbGap: 8px;

  --hbBranchH: 44px;
  --hbActionIcon: 54px;
  --hbActionRadius: 18px;

  /* ✅ 와인색 → 은하수 컬러로 교체 (팩트: 이 변수가 타이틀 배경을 결정함) */
  --hbWine: #2c6f7f;
  --hbWineHi: #2c6f7f; /* 그라데이션을 원하면 약간 밝은 톤으로 바꿔도 됨 */
}

.hb-fixed-cta{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: min(520px, calc(100vw - 18px));
  bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 9999;

  display: flex;
  flex-direction: column;
  gap: var(--hbGap);

  padding: var(--hbCtaPadY) var(--hbCtaPadX);
  border-radius: 22px;

  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  box-shadow: 0 18px 60px rgba(0,0,0,0.35);
}

.hb-branchBtn{
  height: var(--hbBranchH);
  width: 100%;
  border: none;
  border-radius: 999px;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  color: #fff;
  font-weight: 900;
  letter-spacing: -0.02em;

  background: linear-gradient(180deg, var(--hbWineHi), var(--hbWine));
  box-shadow:
    0 12px 30px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.22);

  -webkit-tap-highlight-color: transparent;
}
.hb-branchBtn:active{ transform: translateY(1px); }

.hb-branchTxt{
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 78%;
}

.hb-chevron{ width:16px; height:16px; opacity:.95; }
.hb-chevron path{ stroke: rgba(255,255,255,0.95); }

.hb-actionPanel{
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.hb-action{
  flex: 1 1 0;
  text-decoration: none;
  color: rgba(255,255,255,0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;

  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.hb-ico{
  width: var(--hbActionIcon);
  height: var(--hbActionIcon);
  border-radius: var(--hbActionRadius);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  box-shadow:
    0 12px 26px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.18);
}
.hb-action:active .hb-ico{ transform: translateY(1px); }

.hb-lbl{
  font-size: 11px;
  font-weight: 900;
  text-shadow: 0 1px 10px rgba(0,0,0,0.55);
  line-height: 1;
}

/* ==================================================
   ✅ Branch Modal
   ================================================== */
.hb-branchBackdrop{
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  background: rgba(0,0,0,0.55);
}
.hb-branchBackdrop.open{ display:flex; }

.hb-modal{
  width: min(520px, calc(100vw - 18px));
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(255,255,255,0.24);
  box-shadow: 0 20px 80px rgba(0,0,0,0.35);
}

.hb-modalHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 14px;
  color: rgba(15,23,42,0.92);
  font-weight: 900;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  font-size: 14px;
}
.hb-modalHead button{
  border:none;
  background:transparent;
  cursor:pointer;
  font-weight:900;
  font-size: 13px;
  color: rgba(15,23,42,0.65);
}

.hb-modalBody{
  max-height: 62vh;
  overflow:auto;
}

.hb-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  cursor:pointer;
  color: rgba(15,23,42,0.92);
  font-weight:900;
  font-size: 14px;
  background: rgba(255,255,255,0.25);
}
.hb-item:last-child{ border-bottom:none; }
.hb-item:active{ background: rgba(44,111,127,0.10); }

.hb-badge{
  font-size: 11px;
  font-weight:900;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(44,111,127,0.10);
  border: 1px solid rgba(44,111,127,0.18);
  white-space:nowrap;
  color: rgba(44,111,127,0.92);
  line-height: 1;
}