/* 체험센터 — 고객 입장 태블릿 영상 갤러리. 클래스업 보라(#6c60f4). */
@import url('https://cdn.jsdelivr.net/gh/toss/tossface/dist/tossface.css');
.tf{font-family:"Tossface","Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji";line-height:1;display:inline-block;font-style:normal}

.tbl-wrap{margin:4px 0 8px}
.tbl-lead{background:linear-gradient(180deg,#f6f4ff,#fff);border:1px solid #ddd7fb;border-radius:16px;
  padding:20px 22px;margin:6px 0 22px;font-size:15.5px;color:#3a4150;line-height:1.7}
.tbl-lead b{color:#5546e0;font-weight:800}
.tbl-lead .tbl-hint{display:block;font-size:13px;color:#6b7480;margin-top:9px}

/* 그룹 */
.tbl-group{margin:0 0 30px}
.tbl-gtitle{font-size:18px;font-weight:800;color:#1f2430;letter-spacing:-.01em;margin:0 0 4px}
.tbl-gdesc{font-size:13.5px;color:#5b6373;line-height:1.55;margin:0 0 14px}

/* 카드 그리드 — 세로형 태블릿 */
.tbl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:18px}
.tbl-card{margin:0}
.tbl-frame{position:relative;border-radius:18px;overflow:hidden;background:#0d1020;border:1px solid #e4e7ef;
  box-shadow:0 8px 24px rgba(20,24,45,.12);aspect-ratio:720/1152}
.tbl-frame:hover{box-shadow:0 12px 30px rgba(108,96,244,.22);border-color:#c9c2fb}
.tbl-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0d1020;display:block}
.tbl-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border:0;cursor:pointer;
  background:linear-gradient(180deg,rgba(13,16,32,.10),rgba(13,16,32,.34));transition:background .15s}
.tbl-play:hover{background:linear-gradient(180deg,rgba(13,16,32,.04),rgba(13,16,32,.24))}
.tbl-play .tbl-pbtn{width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.94);color:#5546e0;
  display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:0 6px 18px rgba(0,0,0,.3);padding-left:4px}
.tbl-play[hidden]{display:none}
.tbl-dur{position:absolute;right:9px;bottom:9px;background:rgba(13,16,32,.72);color:#fff;font-size:11.5px;font-weight:700;
  border-radius:7px;padding:2px 7px;letter-spacing:.02em;z-index:2;pointer-events:none}
.tbl-card figcaption{padding:11px 3px 0}
.tbl-card figcaption b{display:block;font-size:15px;font-weight:800;color:#1f2430;letter-spacing:-.01em;margin:0 0 3px}
.tbl-card figcaption i{display:block;font-style:normal;font-size:12.5px;color:#5b6373;line-height:1.55}

.tbl-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#f6f4ff;border:1px solid #ddd7fb;
  border-radius:14px;padding:16px 18px;margin:8px 0 6px}
.tbl-foot p{margin:0;font-size:14px;color:#3a4150;line-height:1.6;flex:1;min-width:220px}
.tbl-foot .tbl-cta{display:inline-flex;align-items:center;gap:7px;background:#6c60f4;color:#fff;text-decoration:none;
  border-radius:999px;padding:11px 20px;font-size:14.5px;font-weight:800;box-shadow:0 8px 20px rgba(108,96,244,.32)}
.tbl-foot .tbl-cta:hover{background:#5546e0;text-decoration:none}

/* 사이드바·헤더·문의버튼 보라 통일(이 페이지에서만 로드) */
.sidebar .nav-home.active,.sidebar .nav-home:hover{background:#ece9ff!important;color:#5546e0!important}
.nav-sec-toggle:hover,.nav-section.open>.nav-sec-toggle,.nav-section.here>.nav-sec-toggle{color:#5546e0!important}
.nav-section.here>.nav-sec-toggle::after{color:#6c60f4!important}
.nav-grp-toggle{color:#6c60f4!important}.nav-grp-toggle .dot{background:#6c60f4!important}
.nav-grp-body nav a.active,.nav-ungrouped a.active{background:#ece9ff!important;color:#5546e0!important;box-shadow:inset 2px 0 0 #6c60f4!important}
.inquiry-btn,.iq-fab{background:#6c60f4!important}.inquiry-btn:hover,.iq-fab:hover{background:#5546e0!important}
.breadcrumb a,.page-toc a:hover{color:#5546e0!important}

@media(max-width:640px){
  .tbl-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:13px}
  .tbl-gtitle{font-size:16px}
  .tbl-card figcaption b{font-size:14px}
  .tbl-play .tbl-pbtn{width:48px;height:48px;font-size:18px}
}