/* guide.css — ไกด์ซัพพอร์ต (เฉพาะหน้านี้) */

.gd-intro { padding-top: var(--sp-6); margin-bottom: var(--sp-6); }
.gd-intro p { max-width: 70ch; }
.gd-intro__foot { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; justify-content: space-between; }

/* ---------- แท็บช่องทาง: แถบติดใต้แถบบน, 4 ช่องเท่ากัน ---------- */
#guideTabsTop { scroll-margin-top: 0; }
.gd-tabs {
  position: sticky; top: calc(56px + env(safe-area-inset-top)); z-index: 38;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px;
  margin: 0 0 var(--sp-8); padding: 4px;
  background: var(--paper); border-radius: var(--r-pill); box-shadow: var(--shadow-2);
}
@media (min-width: 1024px) { .gd-tabs { top: calc(var(--topbar-h) + 8px); } }
.gd-tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 48px; min-width: 0; padding: 6px 8px;
  border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink-2);
  font: 600 var(--fs-small)/1.15 var(--f-body); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.gd-tab i { font-size: 1.2rem; flex: none; }
.gd-tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) { .gd-tab:hover { background: var(--paper-2); color: var(--ink); } }
.gd-tab[aria-selected="true"] { background: var(--c-pink-deep); color: var(--on-pink-deep); }
@media (max-width: 479px) {
  .gd-tabs { border-radius: var(--r-md); }
  .gd-tab { flex-direction: column; gap: 2px; min-height: 52px; padding: 6px 2px; border-radius: var(--r-sm); font-size: .72rem; }
}

.gd-panel { animation: fade-in var(--t-med) ease; }
.gd-sec { margin-bottom: var(--sp-8); scroll-margin-top: calc(var(--topbar-h) + 84px); }
#itunes { scroll-margin-top: calc(var(--topbar-h) + 84px); }

/* หัวข้อบนพื้นคอร์ก → ใช้ --ink บนแถบกระดาษ */
.gd-h2 {
  display: flex; width: fit-content; max-width: 100%; align-items: center; gap: var(--sp-2);
  padding: 4px 14px; margin: 0 0 var(--sp-3);
  background: var(--paper); color: var(--ink); box-shadow: var(--shadow-1);
  font-size: var(--fs-h3);
}
.gd-h2 i { color: var(--c-pink-text); }
.gd-sec > .gd-sub, .gd-sec > p.gd-sub {
  display: inline; padding: .15em .45em; line-height: 1.95;
  background: var(--paper); color: var(--ink); font-size: var(--fs-small);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.gd-sec > .gd-sub + * { margin-top: var(--sp-6); }
.card .gd-sub { color: var(--ink-2); font-size: var(--fs-small); margin-bottom: var(--sp-3); }
.gd-h3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: 1.0625rem; margin-top: var(--sp-2); }
.gd-h3 i { color: var(--c-pink-text); }

/* รายการจุด */
.gd-list { list-style: none; margin: 0; padding: 0; }
.gd-list li { position: relative; padding: 8px 0 8px 1.35rem; font-size: var(--fs-small); line-height: 1.6; border-bottom: 1px dashed var(--paper-line); }
.gd-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.gd-list li::before { content: ""; position: absolute; left: 2px; top: 1.05rem; width: 7px; height: 7px; border-radius: 50%; background: var(--c-pink-deep); }
.gd-list strong { color: var(--ink); }
.gd-list a { font-weight: 600; }

/* ควรทำ / ไม่ควรทำ — กระดาษสองแผ่นมีหัวสี */
.gd-dodont { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: start; }
.gd-box { position: relative; padding: var(--sp-5); padding-top: var(--sp-4); background: var(--paper); color: var(--ink); border-radius: var(--r-md); box-shadow: var(--shadow-1); border-top: 8px solid var(--c-green); }
.gd-box--dont { border-top-color: var(--c-red); }
.gd-box h3 { display: flex; align-items: center; gap: var(--sp-2); font-size: 1.0625rem; margin: 0 0 var(--sp-2); }
.gd-box--do h3 i { color: var(--c-green); }
.gd-box--dont h3 i { color: var(--c-red); }
.gd-box--do .gd-list li::before { background: var(--c-green); }
.gd-box--dont .gd-list li::before { background: var(--c-red); }

/* accordion บนคอร์ก */
.gd-acc-ic { color: var(--c-pink-text); font-size: 1.15rem; flex: none; }

/* ตั๋ว kit / CTA — ใช้ .ticket กลาง แต่ไม่มี stub */
.gd-kit, .gd-cta { grid-template-columns: 1fr; }
.gd-kit .ticket__main, .gd-cta .ticket__main { padding: var(--sp-5) var(--sp-6); }
.gd-kit .ticket__title, .gd-cta .ticket__title { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; overflow-wrap: anywhere; }
.gd-cta p { font-size: var(--fs-small); margin-bottom: var(--sp-4); }
.gd-kit__chips { margin: var(--sp-3) 0; }
.gd-kit__captions { list-style: none; margin: 0 0 var(--sp-4); padding: 0; }
.gd-kit__captions li { padding: 8px 0; border-bottom: 1.5px dashed rgba(31, 36, 48, .3); font-size: var(--fs-small); }
.gd-kit__captions li:last-child { border-bottom: 0; }
.gd-kit__captions code { font-family: var(--f-mono); font-size: var(--fs-caption); font-weight: 700; padding: 1px 8px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .55); white-space: nowrap; }

/* ---------- YouTube: โพลารอยด์เพลเยอร์ + ยอดวิว ---------- */
.gd-yt { display: grid; gap: var(--sp-6); margin-bottom: var(--sp-8); align-items: start; }
@media (min-width: 900px) { .gd-yt { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.gd-yt__card { padding-bottom: var(--sp-4); transform: rotate(-.8deg); }
@media (max-width: 479px) { .gd-yt__card { transform: none; } }
.gd-yt__embed { border-radius: 0; background: #000; }
.gd-yt__play { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: #000; cursor: pointer; }
.gd-yt__play img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) { .gd-yt__play:hover img { filter: brightness(.85); } }
.gd-yt__embed.is-occupied .gd-yt__play { visibility: hidden; }
.gd-yt__btn {
  position: absolute; left: 50%; top: 46%; translate: -50% -50%;
  display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%;
  background: var(--c-pink-deep); color: #fff; font-size: 1.6rem; border: 3px solid #fff; box-shadow: var(--shadow-2);
}
.gd-yt__label { position: absolute; left: 50%; bottom: 10px; translate: -50% 0; padding: 2px 12px; border-radius: var(--r-pill); background: var(--paper); color: var(--ink); font-size: var(--fs-caption); font-weight: 600; white-space: nowrap; }
.gd-yt__cap { padding: var(--sp-3) var(--sp-1) 0; color: inherit; }   /* โพลารอยด์เป็นกระดาษสว่างทั้งสองโหมด → ใช้สีหมึกของโพลารอยด์ */
.gd-yt__cap small { opacity: .8; }

.gd-views { padding-top: var(--sp-5); }
.gd-views__time { margin-left: auto; }
.gd-views__grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gd-view { display: block; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); background: var(--paper-2); color: var(--ink); text-decoration: none; min-width: 0; }
.gd-view--wide { grid-column: 1 / -1; background: var(--c-pink-soft); }
a.gd-view[href]:hover { box-shadow: inset 0 0 0 2px var(--c-pink-deep); text-decoration: none; }
.gd-view__song { display: block; font-size: var(--fs-caption); font-weight: 600; line-height: 1.35; margin-bottom: 4px; }
.gd-view__count { display: block; font-family: var(--f-mono); font-weight: 700; font-size: 1.35rem; line-height: 1.1; color: var(--c-pink-text); overflow-wrap: anywhere; }
.gd-view__diff { display: block; font-size: var(--fs-caption); font-weight: 600; color: var(--c-green); margin-top: 2px; }
@media (max-width: 359px) { .gd-views__grid { grid-template-columns: 1fr; } }

/* เพลเยอร์ลอย (YouTube API mount ที่นี่ ไม่ให้เพลงหยุดตอนสลับแท็บ) */
.gd-dock { position: fixed; z-index: 35; overflow: hidden; background: #000; border-radius: var(--r-sm); }
.gd-dock__frame { width: 100%; height: 100%; }
.gd-dock__frame iframe, .gd-dock__frame > div { display: block; width: 100%; height: 100%; border: 0; }
.gd-dock__bar { display: none; align-items: center; gap: var(--sp-2); padding: 6px 8px; background: var(--paper); color: var(--ink); }
.gd-dock.is-mini {
  left: max(12px, env(safe-area-inset-left));
  bottom: calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom));
  width: min(260px, calc(100vw - 96px));
  border-radius: var(--r-md); box-shadow: var(--shadow-2);
}
@media (min-width: 1024px) { .gd-dock.is-mini { left: 24px; bottom: 24px; } }
.gd-dock.is-mini .gd-dock__frame { aspect-ratio: 16 / 9; height: auto; }
.gd-dock.is-mini .gd-dock__bar { display: flex; }
.gd-dock__title { flex: 1; min-width: 0; font-size: var(--fs-caption); font-weight: 700; color: var(--c-pink-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gd-dock__bar input[type="range"] { width: 72px; accent-color: var(--c-pink-deep); }
.gd-dock__bar button { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--paper-2); color: var(--ink); cursor: pointer; }

/* ล็อก PDF */
.gd-lock { text-align: center; }
@media (min-width: 640px) { .gd-lock { max-width: 400px; } }
.gd-lock__icon { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto var(--sp-3); border-radius: 50%; background: var(--c-pink-deep); color: #fff; font-size: 1.6rem; }
.gd-lock__field { position: relative; }
.gd-lock__field .input { padding-inline: 48px; }
.gd-lock__eye { position: absolute; top: 50%; right: 4px; translate: 0 -50%; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-3); font-size: 1.15rem; cursor: pointer; }
.gd-lock__hint { display: flex; align-items: center; justify-content: center; gap: 6px; margin: var(--sp-3) 0 0; font-size: var(--fs-small); color: var(--c-pink-text); }
.gd-lock__error { margin: var(--sp-2) 0 0; font-size: var(--fs-small); font-weight: 600; color: var(--c-red); }
.gd-lock form .btn { margin-top: var(--sp-4); }
.gd-lock.is-shake { animation: gd-shake .35s; }
@keyframes gd-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

.gd-foot { margin-top: var(--sp-8); }

/* ชื่อแอค/แฮชแท็กห้ามตัดกลาง */
.gd-intro a, .gd-list a, .gd-kit__captions code { white-space: nowrap; }

/* มือถือ: ระยะกระชับขึ้น หน้าไม่ยาว */
@media (max-width: 599px) {
  .gd-intro { padding: var(--sp-5) var(--sp-4) var(--sp-4); }
  .gd-intro p { font-size: var(--fs-small); margin-bottom: var(--sp-3); }
  .gd-tabs { margin-bottom: var(--sp-6); }
  .gd-sec { margin-bottom: var(--sp-6); }
  .gd-sec > .gd-sub + * { margin-top: var(--sp-4); }
  .gd-list li { padding: 6px 0 6px 1.2rem; line-height: 1.55; }
  .gd-list li::before { top: .95rem; }
  .gd-box { padding: var(--sp-4); padding-top: var(--sp-3); }
  .gd-dodont { gap: var(--sp-4); }
  .gd-kit .ticket__main, .gd-cta .ticket__main { padding: var(--sp-4) var(--sp-5); }
  .gd-kit__chips { margin: var(--sp-2) 0; gap: var(--sp-2); }
  .gd-kit__captions li { padding: 6px 0; }
  .gd-yt { gap: var(--sp-4); margin-bottom: var(--sp-6); }
  .gd-foot { margin-top: var(--sp-6); }
}