/* storefront sections */

/* ---------- FIND YOUR SOUND: 악기가 막대 위에 선다 ---------- */
.spectrum { --sh: clamp(440px, 34.5vw, 500px); height: var(--sh); }
.bar { height: calc(var(--b) * 1%); justify-content: flex-end; overflow: visible; border-radius: 7px 7px 14px 14px; }
.bar:hover, .bar:focus-visible { height: calc(var(--b) * 1% + 3%); box-shadow: none; }
.bar-ico { display: none; }
.bar-clip { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; z-index: 0; }
.bar::after { border-radius: inherit; background: linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.1) 36%, rgba(0,0,0,.82)); }
.bar img.bar-obj {
  position: absolute; inset: auto; left: 50%; bottom: calc(100% - 1px); z-index: 2;
  width: auto; height: calc(var(--sh) * var(--o)); max-width: none; object-fit: contain;
  opacity: 1; transform: translateX(-50%); transition: transform .55s var(--ease);
  filter: drop-shadow(0 2px 3px rgba(17, 17, 17, .2)); pointer-events: none;
}
.bar:hover img.bar-obj, .bar:focus-visible img.bar-obj { opacity: 1; transform: translateX(-50%) translateY(-2px); }
/* 피아노 회사라 그랜드를 가장 크게. 큰 악기는 낮은 막대 위에 */
.bar[href$="/piano"] { --b: 60; --o: .37; --sl: 12%; }
.bar[href$="/guitar"] { --b: 52; --o: .44; --sl: 32%; }
.bar[href$="/drum"] { --b: 67; --o: .31; --sl: 14%; }
.bar[href$="/audio"] { --b: 47; --o: .23; --sl: 24%; }
.bar[href$="/edu"] { --b: 58; --o: .33; --sl: 36%; }
/* 악기가 닿는 자리의 그림자 */
.bar::before {
  content: ""; position: absolute; z-index: 1; left: var(--sl, 10%); right: var(--sl, 10%); top: -4px; height: 9px;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(17, 17, 17, .28), rgba(17, 17, 17, 0)); pointer-events: none;
}

@media (max-width: 1024px) {
  .spectrum { --sh: 470px; }
}
@media (max-width: 767px) {
  .spectrum { height: auto; }
  .bar, .bar:hover, .bar:focus-visible { overflow: hidden; height: auto; justify-content: flex-start; border-radius: 14px; }
  .bar-clip, .bar::before { display: none; }
  .bar img.bar-obj, .bar:hover img.bar-obj, .bar:focus-visible img.bar-obj {
    display: block; position: static; flex: none; width: 50px; height: 50px; padding: 4px;
    border-radius: 11px; background: #fff; transform: none; filter: none;
  }
}

/* ---------- SAMICK'S PICK: 카드 폭 전체를 바닥으로 ---------- */
.stage.on-plinth .stage-obj { position: absolute; left: 12%; bottom: 8.6%; width: 76%; }
.plinth {
  position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 15.5%;
  background: linear-gradient(180deg, #e8dccf 0, #f1e7dd 100%);
}
.plinth::before {
  content: ""; position: absolute; left: 12%; right: 12%; top: 34%; height: 26%;
  background: radial-gradient(closest-side, rgba(17, 17, 17, .26), rgba(17, 17, 17, 0));
}

/* ---------- MUSIC FOR BUSINESS: 등급별 가격 ---------- */
.biz-v2 { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(28px, 4.4vw, 72px); align-items: center; }
.biz-left .sec-head { display: block; margin-bottom: clamp(22px, 2.4vw, 34px); }
.biz-left .sec-sub { margin-top: 12px; }
.biz-who { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(18px, 2vw, 32px); }
.biz-who li { padding: 15px 0 16px; border-top: 1px solid rgba(255, 255, 255, .28); }
.biz-who b { display: block; font-size: clamp(18px, 1.5vw, 21px); font-weight: 700; line-height: 1.3; }
.biz-who span { display: block; margin-top: 3px; font-size: 14.5px; line-height: 1.45; color: rgba(255, 255, 255, .88); }
.biz-links { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin-top: clamp(20px, 2.2vw, 30px); }
.biz-links .btn svg { width: 18px; height: 18px; }
.biz-link { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 18px; border: 1px solid rgba(255, 255, 255, .62); border-radius: 99px; font-size: 15px; font-weight: 600; color: #fff; transition: background-color .2s, color .2s; }
.biz-link:hover { background: #fff; color: var(--ink); }
.biz-price { background: #fff; color: var(--ink); border-radius: 20px; padding: clamp(18px, 1.9vw, 26px); box-shadow: 0 24px 60px rgba(17, 17, 17, .22); }
.bp-item { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.bp-item img { width: 92px; height: 64px; object-fit: contain; flex: none; }
.bp-item small { display: block; font-size: 13.5px; color: var(--ink-3); }
.bp-item b { display: block; font-family: var(--display); font-stretch: 108%; font-size: clamp(19px, 1.6vw, 23px); font-weight: 700; letter-spacing: -.012em; margin-top: 2px; }
.bp-who { flex: 1; min-width: 0; }
.bp-mark { flex: none; width: 18px; height: 18px; border: 1.5px solid #b5aea6; border-radius: 50%; background: #fff; transition: border .2s; }
.bp-row:hover .bp-mark { border-color: var(--wine); }
.bp-row.on .bp-mark { border: 5.5px solid var(--wine); }
.bp-go { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; margin-top: 12px; border-radius: 99px; background: var(--wine); color: #fff; font-size: 15px; font-weight: 700; transition: background-color .2s; }
.bp-go:hover { background: var(--ink); }
.bp-go svg { width: 18px; height: 18px; }
.bp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 13px 16px; margin-top: 8px; text-align: left; font: inherit; color: inherit; cursor: pointer; background: #f9f5f1; border: 1.5px solid transparent; border-radius: 13px; transition: border-color .2s, background-color .2s; }
.bp-row:hover { border-color: var(--wine-soft); }
.bp-row.on { background: #fff; border-color: var(--ink); }
.bp-row b { display: block; font-size: 15.5px; font-weight: 700; line-height: 1.3; }
.bp-row small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: var(--ink-3); }
.bp-price { flex: none; display: flex; align-items: baseline; gap: 8px; }
.bp-price em { font-style: normal; font-size: 15px; font-weight: 700; color: var(--wine); }
.bp-price strong { font-size: clamp(18px, 1.55vw, 22px); font-weight: 700; }
.bp-row:not([data-role="guest"]) strong { color: var(--wine); }
.bp-note { margin: 12px 2px 0; font-size: 13px; line-height: 1.45; color: var(--ink-3); }
.bp-go + .bp-note { margin-top: 8px; text-align: center; }
@media (max-width: 1024px) {
  /* 좁은 화면에서는 가격 카드를 제목 바로 아래로 */
  .biz-v2 { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .biz-left { display: contents; }
  .biz-left .sec-head { order: 1; }
  .biz-price { order: 2; margin-bottom: 22px; }
  .biz-links { order: 3; margin-top: 0; }
  .biz-who { order: 4; margin-top: 24px; }
}
@media (max-width: 767px) {
  .biz-links { display: grid; grid-template-columns: 1fr 1fr; }
  .biz-links .btn { grid-column: 1 / -1; justify-content: center; }
  .biz-link { padding: 0 8px; font-size: 14px; }
  .bp-item small, .bp-row small, .bp-note { font-size: 14px; }
}

/* ---------- 폰 화면 아래 고정 탭 ---------- */
.m-tab { display: none; }
@media (max-width: 767px) {
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  /* 첫 화면 건반이 탭에 가려지지 않게 */
  .hero { height: calc(100vh - 60px); height: calc(100svh - 60px - env(safe-area-inset-bottom)); min-height: 540px; }
  .m-tab {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 85; display: grid; grid-template-columns: repeat(5, 1fr);
    height: calc(60px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(17, 17, 17, .06);
  }
  .m-tab a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--ink-2); font-size: 11px; font-weight: 500; line-height: 1; }
  .m-tab a svg { width: 21px; height: 21px; }
  .m-tab a.on { color: var(--wine); font-weight: 700; }
  .m-tab em { position: absolute; top: 7px; left: calc(50% + 7px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: var(--wine); color: #fff; font-size: 10px; font-style: normal; font-weight: 700; line-height: 16px; text-align: center; }
  .m-tab .m-find { color: var(--wine); font-weight: 700; }
  .m-tab .m-find i { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-top: -19px; border-radius: 50%; background: var(--wine); color: #fff; box-shadow: 0 6px 14px rgba(116, 30, 54, .35); }
  /* 떠 있는 단추는 탭 높이만큼 올린다 */
  .guide-btn { bottom: calc(72px + env(safe-area-inset-bottom)); }
  .guide-btn.over-keys { bottom: calc(60px + clamp(62px, 9vh, 92px) + 14px + env(safe-area-inset-bottom)); }
  .guide { bottom: calc(136px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .draft-mark { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .tour-hint { bottom: calc(196px + env(safe-area-inset-bottom)); }
  .tour-hint.mini { bottom: calc(136px + env(safe-area-inset-bottom)); }
}

/* 관리자 미리보기: 글자를 칠 때마다 다시 그려지므로 올라오는 효과를 끈다. 켜 두면 깜빡여 떨려 보인다 */
.fd.embed .fd-main h1, .fd.embed .fd-opts { animation: none; }

/* 폰: 영상 안내가 첫 화면 버튼을 가리지 않게 머리글 아래로 올린다(폭 360 갤럭시는 높이와 상관없이 겹침) */
@media (max-width: 767px) {
  .tour-hint:not(.mini) { top: calc(68px + env(safe-area-inset-top)); bottom: auto; }
}

/* 폭이 좁은 폰: 첫 화면 슬라이드 표시 셋째 칸이 오른쪽에서 잘리지 않게 줄인다 */
@media (max-width: 767px) {
  .hero-side { gap: 14px; }
  .hero-side .btn { flex: none; }
  .hero-dots { flex: 0 1 148px; min-width: 0; gap: 6px; }
  .hero-dots button { flex: 1 1 0; width: auto; min-width: 0; }
}