/* ============================================================
   HANS MUSIC — MASTER STYLESHEET
   Mobile-first dark theme, musician's basecamp feel
============================================================ */

:root {
  --black:   #080810;
  --dark:    #0f0f18;
  --dark2:   #16161f;
  --dark3:   #1e1e2a;
  --card:    #13131c;
  --border:  rgba(255,255,255,0.07);
  --red:     #e91e63;
  --red2:    #ff4081;
  --orange:  #ff6f00;
  --purple:  #7c3aed;
  --gold:    #f59e0b;
  --green:   #10b981;
  --blue:    #0284c7;
  --yt:      #ff0000;
  --yt2:     #cc0000;
  --w:       #ffffff;
  --w80:     rgba(255,255,255,0.80);
  --w60:     rgba(255,255,255,0.60);
  --w30:     rgba(255,255,255,0.30);
  --w10:     rgba(255,255,255,0.10);
  --w05:     rgba(255,255,255,0.05);
  --kr:      'Noto Sans KR', sans-serif;
  --en:      'Bebas Neue', sans-serif;
  --r:       16px;
  --rs:      10px;
  --shadow:  0 24px 64px rgba(0,0,0,0.55);
  --t:       all 0.32s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--kr);background:var(--black);color:var(--w);overflow-x:hidden;line-height:1.6}
a{text-decoration:none;color:inherit}
ul,ol{list-style:none}
img{max-width:100%;display:block;object-fit:cover}
button{cursor:pointer;border:none;background:none;font-family:inherit}
h1,h2,h3,h4{line-height:1.2;font-weight:700}

::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--dark)}
::-webkit-scrollbar-thumb{background:var(--red);border-radius:3px}

/* ============================================================
   STICKY CTA
============================================================ */
#sticky-cta{
  position:fixed;bottom:24px;right:20px;z-index:1000;
  transform:translateY(120px);opacity:0;transition:var(--t);
}
#sticky-cta.visible{transform:translateY(0);opacity:1}
.sticky-cta-btn{
  display:flex;align-items:center;gap:9px;
  background:linear-gradient(135deg,var(--red),var(--red2));
  color:#fff;padding:14px 24px;border-radius:50px;
  font-size:.9rem;font-weight:700;
  box-shadow:0 8px 32px rgba(233,30,99,.5);
  transition:var(--t);white-space:nowrap;
}
.sticky-cta-btn:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 14px 44px rgba(233,30,99,.65)}

/* ============================================================
   NAVIGATION
============================================================ */
#navbar{
  position:fixed;top:0;left:0;right:0;z-index:900;
  height:62px;padding:0 20px;
  display:flex;align-items:center;transition:var(--t);
}
#navbar.scrolled{
  background:rgba(8,8,16,.96);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border);
  box-shadow:0 4px 30px rgba(0,0,0,.5);
}
.nav-inner{
  width:100%;max-width:1200px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
}
.nav-logo{font-family:var(--en);font-size:1.55rem;letter-spacing:2px;line-height:1}
.logo-hans{color:var(--w)}
.logo-red{color:var(--red)}

.hamburger{display:flex;flex-direction:column;gap:5px;padding:6px;border-radius:8px}
.hamburger span{display:block;width:24px;height:2px;background:var(--w);border-radius:2px;transition:var(--t)}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav-links{
  display:none;position:fixed;
  top:62px;left:0;right:0;
  background:rgba(8,8,16,.98);backdrop-filter:blur(20px);
  flex-direction:column;padding:20px;gap:4px;
  border-bottom:1px solid var(--border);
}
.nav-links.open{display:flex}
.nav-links li a{
  display:block;padding:12px 16px;border-radius:var(--rs);
  font-size:1rem;font-weight:500;color:var(--w80);transition:var(--t);
}
.nav-links li a:hover{background:var(--w10);color:var(--w)}
.nav-links li a.nav-cta{
  background:var(--red);color:#fff;text-align:center;
  margin-top:8px;font-weight:700;border-radius:var(--rs);
}
.nav-links li a.nav-cta:hover{background:var(--red2)}

@media(min-width:768px){
  .hamburger{display:none}
  .nav-links{
    display:flex!important;position:static;
    flex-direction:row;padding:0;gap:4px;
    background:none;backdrop-filter:none;border:none;
  }
  .nav-links li a{padding:8px 14px;font-size:.9rem}
  .nav-links li a.nav-cta{margin-top:0;padding:8px 18px}
}

/* ============================================================
   SECTION SHARED
============================================================ */
section{position:relative;overflow:hidden}

.sec-header{text-align:center;padding:80px 20px 40px;max-width:700px;margin:0 auto}
.sec-header.light .sec-title{color:var(--black)!important}
.sec-header.light .sec-desc{color:rgba(0,0,0,.6)!important}

.sec-tag{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--w10);border:1px solid var(--border);
  color:var(--w60);font-size:.7rem;font-weight:700;
  letter-spacing:3px;text-transform:uppercase;
  padding:6px 14px;border-radius:50px;margin-bottom:16px;
}
.sec-tag.dark{background:rgba(255,255,255,.06);color:var(--w60)}
.sec-tag.accent{background:rgba(233,30,99,.12);border-color:rgba(233,30,99,.3);color:var(--red)}
.sec-tag.yt-tag{background:rgba(255,0,0,.12);border-color:rgba(255,0,0,.3);color:#ff4444}
.sec-tag.yt-tag i{color:#ff0000}

.sec-title{font-size:clamp(1.6rem,5vw,2.6rem);font-weight:900;color:var(--w);margin-bottom:12px}
.sec-title.dark{color:#111}
.sec-desc{font-size:1rem;color:var(--w60);line-height:1.7}
.sec-desc.dark{color:rgba(0,0,0,.6)}

/* ============================================================
   BUTTONS
============================================================ */
.btn-primary{
  display:inline-flex;align-items:center;gap:10px;
  background:linear-gradient(135deg,var(--red),var(--red2));
  color:#fff;padding:15px 30px;border-radius:50px;
  font-size:1rem;font-weight:700;letter-spacing:.4px;
  transition:var(--t);box-shadow:0 8px 28px rgba(233,30,99,.4);
  cursor:pointer;border:none;
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 14px 42px rgba(233,30,99,.6)}
.btn-primary.large{padding:18px 38px;font-size:1.1rem}
.btn-primary.small{padding:10px 20px;font-size:.84rem}

.btn-ghost{
  display:inline-flex;align-items:center;gap:10px;
  background:transparent;color:var(--w);
  padding:14px 28px;border-radius:50px;
  font-size:1rem;font-weight:600;
  border:1.5px solid var(--w30);transition:var(--t);cursor:pointer;
}
.btn-ghost:hover{background:var(--w10);border-color:var(--w60);transform:translateY(-2px)}
.btn-ghost.large{padding:17px 36px;font-size:1.1rem}

.btn-insta{
  display:inline-flex;align-items:center;gap:9px;
  background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
  color:#fff;padding:13px 26px;border-radius:50px;
  font-size:.93rem;font-weight:700;
  transition:var(--t);box-shadow:0 6px 22px rgba(220,39,67,.35);
}
.btn-insta:hover{transform:translateY(-3px);box-shadow:0 12px 34px rgba(220,39,67,.5)}
.btn-insta.small{padding:10px 18px;font-size:.82rem}

/* YouTube Button */
.btn-yt{
  display:inline-flex;align-items:center;gap:10px;
  background:linear-gradient(135deg,#ff0000,#cc0000);
  color:#fff;padding:14px 28px;border-radius:50px;
  font-size:1rem;font-weight:700;
  transition:var(--t);box-shadow:0 8px 28px rgba(255,0,0,.35);
  cursor:pointer;border:none;
}
.btn-yt:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(255,0,0,.55)}
.btn-yt.large{padding:17px 36px;font-size:1.1rem}
.btn-yt.small{padding:10px 18px;font-size:.82rem}

.btn-yt-sub{
  display:inline-flex;align-items:center;gap:9px;
  background:#ff0000;color:#fff;
  padding:13px 26px;border-radius:50px;
  font-size:.93rem;font-weight:700;
  transition:var(--t);box-shadow:0 6px 22px rgba(255,0,0,.3);
  white-space:nowrap;
}
.btn-yt-sub:hover{background:#cc0000;transform:translateY(-2px);box-shadow:0 10px 30px rgba(255,0,0,.5)}
.btn-yt-sub.small{padding:10px 18px;font-size:.82rem}

.btn-lesson{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--w10);color:var(--w);padding:12px 22px;
  border-radius:50px;font-size:.88rem;font-weight:600;
  border:1px solid var(--border);transition:var(--t);margin-top:16px;
}
.btn-lesson:hover{background:var(--red);border-color:var(--red);transform:translateY(-2px)}

/* Utility colors */
.yt-red{color:#ff0000!important}

/* ============================================================
   HERO
============================================================ */
#hero{min-height:100svh;display:flex;align-items:center;justify-content:center;position:relative}

.hero-bg{position:absolute;inset:0;overflow:hidden}
.hero-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center top;
  opacity:0;transition:opacity 1.2s ease;
}
.hero-img.active{opacity:1}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(
    180deg,
    rgba(8,8,16,.25) 0%,
    rgba(8,8,16,.45) 40%,
    rgba(8,8,16,.85) 85%,
    rgba(8,8,16,1) 100%
  );
}

.hero-content{
  position:relative;z-index:10;text-align:center;
  padding:90px 24px 130px;max-width:900px;margin:0 auto;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(12px);
  padding:7px 16px;border-radius:50px;
  font-size:.76rem;font-weight:600;color:var(--w80);
  margin-bottom:26px;letter-spacing:1px;
  animation:fadeUp .7s ease .2s both;
}
.hero-badge i{color:#e1306c;font-size:.95rem}
.hero-badge .yt-red{color:#ff0000!important}
.badge-sep{color:var(--w30);font-size:.7rem}

.hero-title{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.line1{
  font-size:clamp(1.1rem,3.5vw,1.8rem);font-weight:400;
  color:var(--w80);letter-spacing:.5px;
  animation:fadeUp .7s ease .35s both;
}
.line2{
  font-size:clamp(1.9rem,6vw,3.8rem);font-weight:900;
  background:linear-gradient(135deg,var(--red),var(--orange),var(--red2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  letter-spacing:-1px;line-height:1.15;
  animation:fadeUp .7s ease .5s both;
}
.hero-sub{
  color:var(--w60);font-size:.95rem;margin-bottom:34px;
  letter-spacing:2px;animation:fadeUp .7s ease .65s both;
}
.hero-actions{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:center;
  margin-bottom:46px;animation:fadeUp .7s ease .8s both;
}


@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}

.hero-scroll{
  position:absolute;bottom:30px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;z-index:10;
  animation:fadeUp .8s ease 1.2s both;
}
.scroll-mouse{
  width:22px;height:34px;border:2px solid var(--w30);
  border-radius:11px;display:flex;align-items:flex-start;justify-content:center;padding-top:5px;
}
.scroll-dot{width:4px;height:7px;background:var(--w60);border-radius:2px;animation:scrollBounce 2s ease-in-out infinite}
@keyframes scrollBounce{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(8px);opacity:.3}}

.hero-socials{
  position:absolute;right:18px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:12px;z-index:10;
}
.hero-socials a{
  width:40px;height:40px;border-radius:50%;
  background:var(--w10);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:.95rem;color:var(--w60);transition:var(--t);
}
.hero-socials a:hover{background:var(--red);border-color:var(--red);color:#fff;transform:scale(1.15)}
.hero-socials a.yt-social:hover{background:#ff0000;border-color:#ff0000}

.hero-dots{
  position:absolute;bottom:70px;left:50%;transform:translateX(-50%);
  display:flex;gap:8px;z-index:10;
}
.hdot{
  width:8px;height:8px;border-radius:50%;
  background:var(--w30);border:none;cursor:pointer;transition:var(--t);
}
.hdot.active{background:var(--red);width:22px;border-radius:4px}

/* ============================================================
   SNS SECTION
============================================================ */
#sns{background:var(--dark);padding-bottom:80px}

.tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:0 20px 32px}
.tab{
  display:flex;align-items:center;gap:6px;
  padding:9px 20px;border-radius:50px;font-size:.84rem;font-weight:600;
  color:var(--w60);background:var(--dark3);border:1px solid var(--border);
  transition:var(--t);font-family:var(--kr);
}
.tab:hover{background:var(--dark2);color:var(--w)}
.tab.active{background:var(--red);color:#fff;border-color:var(--red);box-shadow:0 4px 20px rgba(233,30,99,.35)}

/* Reels */
.reels-wrap{position:relative;overflow:hidden;padding:0 16px 24px}
.reels-track{
  display:flex;gap:12px;overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  padding:6px 4px 10px;scrollbar-width:none;
}
.reels-track::-webkit-scrollbar{display:none}

.reel{
  flex:0 0 155px;height:270px;border-radius:14px;
  scroll-snap-align:start;position:relative;overflow:hidden;
  cursor:pointer;transition:var(--t);
  border:1px solid rgba(255,255,255,.1);
}
.reel img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:var(--t)}
.reel:hover img{transform:scale(1.06)}
.reel:hover{box-shadow:var(--shadow)}
.reel-overlay{
  position:absolute;bottom:0;left:0;right:0;
  padding:36px 12px 14px;
  background:linear-gradient(0deg,rgba(0,0,0,.9) 0%,transparent 100%);
}
.rtag{
  display:inline-block;background:var(--red);color:#fff;
  font-size:.62rem;font-weight:700;letter-spacing:1px;
  padding:2px 8px;border-radius:10px;margin-bottom:4px;text-transform:uppercase;
}
.reel-overlay h4{font-size:.8rem;color:#fff;font-weight:700;line-height:1.3}
.reel-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.15);border:2px solid rgba(255,255,255,.5);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:.9rem;
  opacity:0;transition:var(--t);
}
.reel:hover .reel-play{opacity:1}

.reel-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:38px;height:38px;border-radius:50%;
  background:rgba(0,0,0,.7);border:1px solid var(--border);
  color:var(--w);display:flex;align-items:center;justify-content:center;
  transition:var(--t);z-index:5;backdrop-filter:blur(10px);
}
.reel-arrow:hover{background:var(--red);border-color:var(--red)}
.reel-arrow.prev{left:4px}
.reel-arrow.next{right:4px}

/* Instagram grid */
.insta-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:3px;padding:0 16px;
  max-width:1100px;margin:0 auto;
}
.ig-item{
  position:relative;overflow:hidden;cursor:pointer;
  aspect-ratio:1;border-radius:4px;
}
.ig-item.ig-large{grid-column:span 2;grid-row:span 2}
.ig-item img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:var(--t)}
.ig-item:hover img{transform:scale(1.06)}
.ig-hover{
  position:absolute;inset:0;
  background:rgba(0,0,0,.65);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;opacity:0;transition:var(--t);
  color:#fff;font-size:.84rem;font-weight:600;text-align:center;padding:12px;
}
.ig-hover i{font-size:1.4rem}
.ig-item:hover .ig-hover{opacity:1}
.ig-badge{
  position:absolute;top:8px;left:8px;
  background:rgba(0,0,0,.65);backdrop-filter:blur(6px);
  color:#fff;font-size:.62rem;font-weight:700;
  padding:3px 9px;border-radius:20px;letter-spacing:1px;z-index:2;
  border:1px solid rgba(255,255,255,.15);text-transform:uppercase;
}
.sns-foot{text-align:center;padding:36px 20px 0}

/* ============================================================
   YOUTUBE SECTION
============================================================ */
#youtube-section{background:var(--black);padding-bottom:80px}

/* Channel Banner */
.yt-channel-banner{
  max-width:960px;margin:0 auto 32px;padding:0 20px;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
  background:linear-gradient(135deg,rgba(255,0,0,.08),rgba(204,0,0,.04));
  border:1px solid rgba(255,0,0,.2);
  border-radius:20px;padding:22px 26px;
}
.yt-ch-left{display:flex;align-items:center;gap:16px}
.yt-ch-avatar{
  width:62px;height:62px;border-radius:50%;
  background:linear-gradient(135deg,#ff0000,#880000);
  display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;color:#fff;flex-shrink:0;
  box-shadow:0 4px 20px rgba(255,0,0,.35);
}
.yt-ch-info h3{font-size:1.05rem;font-weight:800;color:var(--w);margin-bottom:2px}
.yt-ch-info p{font-size:.8rem;color:var(--w60);margin-bottom:6px}
.yt-ch-stats{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--w60)}
.yt-ch-stats strong{color:var(--w);font-weight:700}
.yt-dot{color:var(--w30)}

/* YouTube Tabs */
.yt-tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:0 20px 28px}
.yt-tab{
  display:flex;align-items:center;gap:6px;
  padding:9px 20px;border-radius:50px;font-size:.84rem;font-weight:600;
  color:var(--w60);background:var(--dark3);border:1px solid var(--border);
  transition:var(--t);font-family:var(--kr);
}
.yt-tab:hover{background:var(--dark2);color:var(--w)}
.yt-tab.active{
  background:linear-gradient(135deg,#ff0000,#cc0000);
  color:#fff;border-color:#ff0000;
  box-shadow:0 4px 20px rgba(255,0,0,.35);
}

/* YouTube Grid */
.yt-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:14px;padding:0 16px;
  max-width:960px;margin:0 auto 36px;
}
@media(min-width:640px){.yt-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.yt-grid{grid-template-columns:repeat(4,1fr)}}

/* YouTube Card */
.yt-card{
  background:var(--dark2);border:1px solid var(--border);
  border-radius:14px;overflow:hidden;cursor:pointer;
  transition:var(--t);position:relative;
}
.yt-card:hover{transform:translateY(-5px);box-shadow:0 16px 48px rgba(0,0,0,.5);border-color:rgba(255,0,0,.25)}

.yt-card.yt-featured{
  grid-column:span 2;
  background:linear-gradient(135deg,rgba(255,0,0,.06),var(--dark2));
  border-color:rgba(255,0,0,.2);
}
@media(min-width:900px){.yt-card.yt-featured{grid-column:span 2}}

/* Shorts cards are narrower by default */
.yt-card.yt-short .yt-thumb{aspect-ratio:9/16;height:auto}

.yt-thumb{
  position:relative;overflow:hidden;
  background:var(--dark3);
  aspect-ratio:16/9;
}
.yt-thumb img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .4s ease;
}
.yt-card:hover .yt-thumb img{transform:scale(1.06)}

/* Thumbnail placeholder (when no real thumbnail) */
.yt-thumb-placeholder{
  width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;
  background:linear-gradient(135deg,#1a0008,#330000);
  color:rgba(255,255,255,.4);
  font-size:.78rem;font-weight:600;letter-spacing:1px;
}
.yt-thumb-placeholder i{font-size:2rem;color:rgba(255,0,0,.5)}
.yt-thumb-placeholder.lesson-ph{background:linear-gradient(135deg,#000c1a,#001a33)}
.yt-thumb-placeholder.lesson-ph i{color:rgba(100,160,255,.5)}
.yt-thumb-placeholder.shorts-ph{background:linear-gradient(135deg,#0d0d1a,#1a001a)}
.yt-thumb-placeholder.shorts-ph i{color:rgba(200,100,255,.5)}

.yt-play-btn{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:48px;height:48px;border-radius:14px;
  background:rgba(255,0,0,.9);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:1.35rem;
  opacity:0;transition:var(--t);
  box-shadow:0 4px 20px rgba(255,0,0,.5);
}
.yt-card:hover .yt-play-btn{opacity:1}

.yt-duration{
  position:absolute;top:8px;left:8px;
  background:rgba(255,0,0,.85);color:#fff;
  font-size:.6rem;font-weight:800;letter-spacing:2px;
  padding:2px 8px;border-radius:4px;text-transform:uppercase;
}
.yt-views{
  position:absolute;bottom:8px;right:8px;
  background:rgba(0,0,0,.75);backdrop-filter:blur(6px);
  color:#fff;font-size:.68rem;font-weight:600;
  padding:3px 8px;border-radius:20px;
  display:flex;align-items:center;gap:4px;
}
.yt-views i{font-size:.6rem;color:rgba(255,255,255,.6)}

/* Card Body */
.yt-card-body{padding:12px 14px 16px}
.yt-cat{
  display:inline-block;font-size:.62rem;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;
  padding:2px 8px;border-radius:10px;margin-bottom:6px;
}
.yt-cat.cover{background:rgba(233,30,99,.15);color:var(--red)}
.yt-cat.lesson{background:rgba(2,132,199,.15);color:#38bdf8}
.yt-cat.shorts{background:rgba(124,58,237,.15);color:#a78bfa}
.yt-cat.admit{background:rgba(245,158,11,.15);color:#f59e0b;border:1px solid rgba(245,158,11,.3);text-transform:none;letter-spacing:0}

.yt-card-body h4{
  font-size:.86rem;color:var(--w);font-weight:700;
  line-height:1.35;margin-bottom:5px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.yt-card-body p{
  font-size:.75rem;color:var(--w60);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-bottom:6px;
}
.yt-meta{font-size:.72rem;color:var(--w30);display:flex;align-items:center;gap:5px}

/* YouTube CTA wrap */
.yt-cta-wrap{
  text-align:center;padding:20px 20px 0;
  display:flex;flex-direction:column;align-items:center;gap:16px;
}
.yt-cta-text{
  font-size:.97rem;color:var(--w60);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;
}
.yt-cta-text strong{color:var(--w);font-weight:700}
.yt-cta-text .yt-red{font-size:1.2rem}

/* Timeline YouTube Badge */
.tl-yt-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,0,0,.1);border:1px solid rgba(255,0,0,.25);
  color:#ff4444;font-size:.8rem;font-weight:700;
  padding:7px 14px;border-radius:50px;margin-top:12px;
}
.tl-yt-badge i{font-size:1rem}

/* ============================================================
   STORY / TIMELINE
============================================================ */
#story{background:var(--black);padding-bottom:80px}

.timeline{
  position:relative;max-width:920px;margin:0 auto;
  padding:10px 20px 40px;
}
.tl-line{
  position:absolute;left:50%;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,transparent,var(--red),var(--purple),transparent);
  transform:translateX(-50%);
}

.tl-item{
  display:flex;align-items:flex-start;
  margin-bottom:52px;position:relative;
}
.tl-item.tl-left{flex-direction:row;padding-right:calc(50% + 32px)}
.tl-item.tl-right{flex-direction:row-reverse;padding-left:calc(50% + 32px)}

.tl-dot{
  position:absolute;left:50%;transform:translateX(-50%);
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;color:#fff;
  border:3px solid var(--black);z-index:2;
  box-shadow:0 0 0 2px rgba(255,255,255,.1),0 0 20px rgba(233,30,99,.3);
}

.tl-card{
  background:var(--dark2);border:1px solid var(--border);
  border-radius:var(--r);padding:22px;width:100%;
  transition:var(--t);
}
.tl-card:hover{border-color:rgba(233,30,99,.3);transform:translateY(-2px);box-shadow:0 10px 40px rgba(0,0,0,.35)}
.tl-card.featured{border-color:rgba(233,30,99,.25);background:rgba(233,30,99,.05)}
.tl-year{display:block;font-family:var(--en);font-size:1.7rem;font-weight:700;line-height:1;margin-bottom:6px}
.tl-tag{
  display:inline-block;background:var(--w10);color:var(--w60);
  font-size:.66rem;font-weight:700;letter-spacing:2px;
  padding:2px 10px;border-radius:20px;text-transform:uppercase;margin-bottom:8px;
}
.tl-card h4{font-size:1.05rem;font-weight:700;margin-bottom:8px;color:var(--w)}
.tl-card p{font-size:.87rem;color:var(--w60);line-height:1.65}

.tl-img-wrap{margin-top:14px;border-radius:var(--rs);overflow:hidden;height:160px}
.tl-img-wrap img{width:100%;height:100%;object-fit:cover;object-position:center top}

.tl-photo-row{display:flex;gap:6px;margin-top:14px}
.tl-photo-row img{flex:1;height:110px;border-radius:8px;object-fit:cover;object-position:center top}

/* mobile timeline */
@media(max-width:639px){
  .tl-line{left:22px}
  .tl-item.tl-left,.tl-item.tl-right{flex-direction:row;padding:0 0 0 60px}
  .tl-dot{left:22px;width:40px;height:40px;font-size:.9rem}
  .tl-photo-row img{height:80px}
}

.cred-bar{
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px;
  padding:0 20px;max-width:900px;margin:0 auto;
}
.cred-item{
  display:flex;align-items:center;gap:9px;
  background:var(--dark2);border:1px solid var(--border);
  padding:12px 20px;border-radius:50px;
  font-size:.87rem;font-weight:600;color:var(--w80);transition:var(--t);
}
.cred-item i{color:var(--red)}
.cred-item:hover{border-color:rgba(233,30,99,.35);background:rgba(233,30,99,.06)}

/* ============================================================
   LESSONS
============================================================ */
#lessons{background:#f4f4f8;padding-bottom:80px}

/* Wide single card wrapper */
.lesson-single-wrap{
  padding:0 20px;max-width:900px;margin:0 auto 54px;
}

.lesson-card-wide{
  display:grid;grid-template-columns:1fr;
  background:#fff;border-radius:24px;overflow:hidden;
  box-shadow:0 8px 40px rgba(0,0,0,.12);transition:var(--t);
}
@media(min-width:720px){
  .lesson-card-wide{grid-template-columns:42% 1fr}
}
.lesson-card-wide:hover{box-shadow:0 20px 64px rgba(0,0,0,.18)}

/* Visual side */
.lcw-visual{
  position:relative;min-height:280px;overflow:hidden;
}
@media(min-width:720px){.lcw-visual{min-height:420px}}
.lcw-visual img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s ease;
}
.lesson-card-wide:hover .lcw-visual img{transform:scale(1.05)}
.lcw-visual-overlay{
  position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(233,30,99,.55),rgba(20,0,30,.7));
  display:flex;align-items:flex-end;padding:22px;
}
.lcw-badge{
  font-family:var(--en);font-size:1.1rem;letter-spacing:4px;
  color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.5);
}

/* Body side */
.lcw-body{
  padding:32px 28px;display:flex;flex-direction:column;gap:0;
}
.lcw-top-badge{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(233,30,99,.1);border:1px solid rgba(233,30,99,.25);
  color:var(--red);font-size:.7rem;font-weight:800;letter-spacing:3px;
  text-transform:uppercase;padding:6px 14px;border-radius:50px;
  margin-bottom:16px;width:fit-content;
}
.lcw-title{
  font-size:clamp(1.3rem,3.5vw,1.75rem);
  font-weight:900;color:#111;line-height:1.25;
  margin-bottom:8px;
}
.lcw-tagline{
  font-size:.88rem;color:rgba(0,0,0,.5);
  margin-bottom:22px;
}
.lcw-list{
  display:flex;flex-direction:column;gap:10px;
  margin-bottom:22px;
}
.lcw-list li{
  display:flex;align-items:flex-start;gap:9px;
  font-size:.88rem;color:rgba(0,0,0,.78);line-height:1.45;
}
.lcw-list li i{color:var(--green);margin-top:2px;flex-shrink:0;font-size:.9rem}

.lcw-proof-quote{
  display:flex;gap:10px;align-items:flex-start;
  background:rgba(233,30,99,.05);border-left:3px solid var(--red);
  border-radius:0 var(--rs) var(--rs) 0;
  padding:12px 14px;margin-bottom:24px;
}
.lcw-proof-quote i{color:var(--red);font-size:.9rem;margin-top:3px;flex-shrink:0}
.lcw-proof-quote p{
  font-size:.82rem;color:#555;line-height:1.55;font-style:italic;
}

.lcw-actions{
  display:flex;flex-wrap:wrap;gap:12px;margin-top:auto;
}
.lcw-actions .btn-primary,.lcw-actions .btn-ghost{
  flex:1;min-width:140px;justify-content:center;
  font-size:.88rem;padding:13px 18px;
}
.lcw-actions .btn-ghost{
  color:#333;border-color:rgba(0,0,0,.25);
}
.lcw-actions .btn-ghost:hover{background:rgba(0,0,0,.06);border-color:rgba(0,0,0,.5)}

/* Keep old classes for any remnants, but effectively hidden */
.lesson-grid{display:none}
.lesson-card{display:none}

/* ---- YouTube Lesson Strip ---- */
.lesson-yt-strip{
  max-width:880px;margin:0 20px 40px;
  background:var(--black);border-radius:20px;
  padding:26px 24px;
}
@media(min-width:900px){.lesson-yt-strip{margin:0 auto 40px}}
.lys-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:18px;flex-wrap:wrap;gap:10px;
}
.lys-title{display:flex;align-items:center;gap:10px}
.lys-title i{font-size:1.5rem}
.lys-title h3{font-size:1rem;color:var(--w);font-weight:700}
.lys-more{
  font-size:.82rem;font-weight:600;color:var(--w60);
  display:flex;align-items:center;gap:5px;transition:var(--t);
}
.lys-more:hover{color:#ff4444}
.lys-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:480px){.lys-grid{grid-template-columns:1fr 1fr}}
.lys-card{
  display:flex;flex-direction:column;gap:0;
  border-radius:12px;overflow:hidden;transition:var(--t);
  background:var(--dark2);border:1px solid var(--border);
  text-decoration:none;
}
.lys-card:hover{transform:translateY(-4px);box-shadow:0 12px 36px rgba(0,0,0,.4);border-color:rgba(255,0,0,.25)}
.lys-thumb{position:relative;overflow:hidden;aspect-ratio:16/9;background:var(--dark3)}
.lys-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.lys-card:hover .lys-thumb img{transform:scale(1.06)}
.lys-play{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.3);
  color:#ff0000;font-size:1.8rem;
  opacity:0;transition:var(--t);
}
.lys-card:hover .lys-play{opacity:1}
.yt-more-thumb{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;background:linear-gradient(135deg,#1a0000,#330000);
  color:#ff4444;font-size:2rem;
}
.yt-more-thumb span{font-size:.78rem;font-weight:700;color:rgba(255,255,255,.5)}
.lys-info{padding:10px 12px 12px}
.lys-tag{
  display:inline-block;font-size:.6rem;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;background:rgba(255,0,0,.15);color:#ff4444;
  padding:2px 7px;border-radius:8px;margin-bottom:5px;
}
.lys-tag.shorts-tag{background:rgba(124,58,237,.15);color:#a78bfa}
.lys-info p{font-size:.78rem;color:var(--w);font-weight:600;line-height:1.35;margin-bottom:4px}
.lys-views{font-size:.7rem;color:var(--w60);display:flex;align-items:center;gap:4px}



/* ============================================================
   REPAIR
============================================================ */
#repair{background:var(--dark);padding-bottom:80px}

.repair-ba{
  display:flex;flex-direction:column;
  max-width:840px;margin:0 auto 44px;padding:0 20px;
  gap:0;
}
@media(min-width:640px){.repair-ba{flex-direction:row}}

.ba-side{
  flex:1;padding:28px 24px;
  background:var(--dark2);border:1px solid var(--border);
}
.ba-side.before{border-radius:var(--r) var(--r) 0 0}
.ba-side.after{border-radius:0 0 var(--r) var(--r)}
@media(min-width:640px){
  .ba-side.before{border-radius:var(--r) 0 0 var(--r)}
  .ba-side.after{border-radius:0 var(--r) var(--r) 0}
}
.ba-icon{font-size:2.2rem;margin-bottom:10px}
.ba-icon.red{color:#ef4444}
.ba-icon.green{color:#10b981}
.ba-tag-lbl{
  display:inline-block;font-family:var(--en);font-size:.85rem;letter-spacing:3px;
  padding:3px 12px;border-radius:4px;margin-bottom:14px;
}
.ba-tag-lbl.red{background:rgba(239,68,68,.15);color:#ef4444}
.ba-tag-lbl.green{background:rgba(16,185,129,.15);color:#10b981}
.ba-side ul{display:flex;flex-direction:column;gap:10px}
.ba-side ul li{display:flex;align-items:flex-start;gap:8px;font-size:.87rem;color:var(--w80);line-height:1.4}
.ba-side.before ul li i{color:#ef4444;margin-top:2px}
.ba-side.after ul li i{color:#10b981;margin-top:2px}

.ba-mid{
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;
  padding:14px 16px;background:var(--dark3);
  font-size:1.2rem;color:var(--gold);
}
.ba-mid span{font-size:.66rem;color:var(--w60);letter-spacing:2px}
@media(min-width:640px){.ba-mid{flex-direction:row;padding:0 18px}}

.repair-services{
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px;
  max-width:840px;margin:0 auto 36px;padding:0 20px;
}
@media(min-width:640px){.repair-services{grid-template-columns:repeat(4,1fr)}}
.rs-item{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r);padding:22px 14px;text-align:center;transition:var(--t);
}
.rs-item:hover{border-color:rgba(233,30,99,.3);transform:translateY(-3px)}
.rs-ico{
  width:50px;height:50px;border-radius:14px;
  background:rgba(233,30,99,.1);
  display:flex;align-items:center;justify-content:center;
  font-size:1.25rem;color:var(--red);margin:0 auto 12px;
}
.rs-item h4{font-size:.88rem;color:var(--w);margin-bottom:6px}
.rs-item p{font-size:.76rem;color:var(--w60);line-height:1.5}

.repair-cta{text-align:center;padding:0 20px}
.repair-cta p{color:var(--w80);margin-bottom:14px;font-size:.95rem}
.repair-cta strong{color:var(--gold)}

/* ============================================================
   CONVERSION
============================================================ */
#conversion{min-height:80vh;display:flex;align-items:center;justify-content:center;position:relative}

.conv-bg{position:absolute;inset:0;overflow:hidden}
.conv-bg-img{width:100%;height:100%;object-fit:cover;object-position:center top;filter:brightness(.35) saturate(1.4)}
.conv-overlay{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 70% at 50% 50%,rgba(233,30,99,.22) 0%,rgba(8,8,16,.92) 65%);
}

.conv-content{
  position:relative;z-index:10;text-align:center;
  padding:80px 24px;max-width:780px;margin:0 auto;
}
.conv-icon{font-size:2.8rem;color:var(--red);margin-bottom:18px;animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.8}}
.conv-pre{font-size:.76rem;letter-spacing:4px;text-transform:uppercase;color:var(--w60);margin-bottom:18px}
.conv-title{font-size:clamp(1.7rem,5vw,3rem);font-weight:900;color:var(--w);line-height:1.3;margin-bottom:22px}
.conv-hl{
  background:linear-gradient(135deg,var(--red),var(--orange));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.conv-sub{font-size:.98rem;color:var(--w60);line-height:1.8;margin-bottom:38px}
.conv-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-bottom:26px}
.conv-note{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.3);
  color:var(--green);font-size:.84rem;font-weight:600;
  padding:8px 18px;border-radius:50px;
}

/* ============================================================
   CONTACT
============================================================ */
#contact{background:#f4f4f8;padding-bottom:80px}

.contact-wrap{
  display:grid;grid-template-columns:1fr;gap:22px;
  max-width:980px;margin:0 auto;padding:0 20px;
}
@media(min-width:768px){.contact-wrap{grid-template-columns:1fr 1fr}}

.contact-cards{display:flex;flex-direction:column;gap:12px}
.cc{
  display:flex;align-items:center;gap:15px;
  padding:18px 20px;border-radius:var(--r);
  cursor:pointer;transition:var(--t);
}
.cc:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.18)}
.cc.kakao{background:#FEE500;color:#3A1D1D}
.cc.kakao:hover{background:#ffd600}
.cc.phone{background:var(--black);color:#fff}
.cc.phone:hover{background:var(--dark2)}
.cc.insta{background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);color:#fff}
.cc.fb{background:#1877F2;color:#fff}
.cc.fb:hover{background:#1565C0}
.cc.yt-cc{background:linear-gradient(135deg,#ff0000,#cc0000);color:#fff}
.cc.yt-cc:hover{background:linear-gradient(135deg,#cc0000,#990000)}
.cc-ico{
  width:50px;height:50px;border-radius:13px;
  background:rgba(0,0,0,.1);
  display:flex;align-items:center;justify-content:center;
  font-size:1.45rem;flex-shrink:0;
}
.cc.kakao .cc-ico{background:rgba(0,0,0,.08)}
.cc-body h4{font-size:.93rem;font-weight:700;margin-bottom:2px}
.cc-body p{font-size:.8rem;opacity:.8;margin-bottom:3px}
.cc-body span{font-size:.76rem;font-weight:700;opacity:.9;display:flex;align-items:center;gap:4px}

.contact-info{display:flex;flex-direction:column;gap:16px}
.map-box{
  background:var(--black);border:1px solid var(--border);border-radius:var(--r);
  padding:28px 22px;display:flex;flex-direction:column;align-items:center;
  gap:7px;text-align:center;min-height:180px;justify-content:center;
}
.map-box i{font-size:2rem;color:var(--red)}
.map-box p{font-size:1rem;color:var(--w);font-weight:700}
.map-box span{font-size:.8rem;color:var(--w60)}
.map-btns{display:flex;gap:10px;margin-top:8px}
.map-btn{
  display:flex;align-items:center;gap:6px;
  background:var(--w10);color:#fff;
  padding:8px 14px;border-radius:20px;
  font-size:.76rem;font-weight:600;
  border:1px solid var(--border);transition:var(--t);
}
.map-btn:hover{background:var(--red);border-color:var(--red)}

.hours-box{background:var(--black);border-radius:var(--r);padding:22px}
.hours-box h4{font-size:.97rem;color:var(--w);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.hours-box h4 i{color:var(--red)}
.hours-box ul{display:flex;flex-direction:column;gap:9px;margin-bottom:16px}
.hours-box li{
  display:flex;justify-content:space-between;align-items:center;
  padding-bottom:9px;border-bottom:1px solid var(--border);font-size:.87rem;
}
.hours-box li:last-child{border:none}
.day{color:var(--w60)}
.time{color:var(--w);font-weight:600}
.open-badge{
  display:flex;align-items:center;gap:8px;
  background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.3);
  color:var(--green);font-size:.87rem;font-weight:700;
  padding:11px 15px;border-radius:var(--rs);
}
.open-badge i{font-size:.95rem}

/* ============================================================
   FOOTER
============================================================ */
#footer{background:var(--black);border-top:1px solid var(--border);padding:56px 20px 0}
.foot-inner{
  max-width:980px;margin:0 auto;
  display:grid;grid-template-columns:1fr;gap:36px;
  padding-bottom:36px;border-bottom:1px solid var(--border);
}
@media(min-width:640px){.foot-inner{grid-template-columns:2fr 1fr 1fr}}
.foot-logo{font-family:var(--en);font-size:2rem;letter-spacing:3px;margin-bottom:10px}
.foot-brand p{font-size:.83rem;color:var(--w60);line-height:1.7;margin-bottom:18px;max-width:280px}
.foot-socials{display:flex;gap:11px}
.foot-socials a{
  width:38px;height:38px;border-radius:50%;
  background:var(--w10);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:.95rem;color:var(--w60);transition:var(--t);
}
.foot-socials a:hover{background:var(--red);border-color:var(--red);color:#fff}
.foot-socials a.foot-yt:hover{background:#ff0000;border-color:#ff0000}
.foot-col h5{font-size:.72rem;letter-spacing:3px;text-transform:uppercase;color:var(--w60);margin-bottom:14px}
.foot-col ul{display:flex;flex-direction:column;gap:9px}
.foot-col ul li a{font-size:.87rem;color:var(--w60);transition:var(--t)}
.foot-col ul li a:hover{color:var(--red)}
.foot-col ul li{display:flex;align-items:center;gap:8px;font-size:.87rem;color:var(--w60)}
.foot-col ul li i{color:var(--red);font-size:.78rem}
.foot-bottom{text-align:center;padding:18px;font-size:.76rem;color:rgba(255,255,255,.2)}

/* ============================================================
   MODAL (Photo)
============================================================ */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.88);
  backdrop-filter:blur(14px);z-index:2000;
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal-box{
  background:var(--dark2);border:1px solid var(--border);
  border-radius:22px;max-width:430px;width:100%;
  overflow:hidden;position:relative;
  transform:translateY(22px) scale(.97);transition:transform .3s ease;
  max-height:90svh;overflow-y:auto;
}
.modal-overlay.open .modal-box{transform:translateY(0) scale(1)}
.modal-close{
  position:absolute;top:12px;right:12px;
  width:36px;height:36px;border-radius:50%;
  background:var(--w10);color:var(--w);font-size:1rem;
  display:flex;align-items:center;justify-content:center;z-index:5;transition:var(--t);
}
.modal-close:hover{background:var(--red)}
.modal-img-wrap{height:260px;overflow:hidden;position:relative}
.modal-img-wrap img{width:100%;height:100%;object-fit:cover;object-position:center top}
.modal-body{padding:22px}
.modal-tag{
  display:inline-block;background:var(--w10);color:var(--w60);
  font-size:.66rem;font-weight:700;letter-spacing:2px;
  padding:3px 10px;border-radius:20px;text-transform:uppercase;margin-bottom:9px;
}
.modal-body h3{font-size:1.2rem;color:var(--w);margin-bottom:9px}
.modal-body p{font-size:.87rem;color:var(--w60);line-height:1.7;margin-bottom:18px}
.modal-actions{display:flex;gap:10px;flex-wrap:wrap}

/* ============================================================
   YOUTUBE MODAL
============================================================ */
.yt-modal-overlay{z-index:2100}
.yt-modal-box{
  max-width:600px;
  background:linear-gradient(135deg,rgba(20,0,0,.98),var(--dark2));
  border-color:rgba(255,0,0,.2);
}
.yt-modal-embed{
  position:relative;width:100%;
  background:#000;
}
.yt-modal-embed iframe{
  width:100%;display:block;border:none;
  aspect-ratio:16/9;
}
/* When no embed available, show placeholder */
.yt-embed-placeholder{
  aspect-ratio:16/9;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;background:linear-gradient(135deg,#1a0000,#0a0000);
  color:rgba(255,255,255,.5);padding:30px;text-align:center;
}
.yt-embed-placeholder i{font-size:3rem;color:rgba(255,0,0,.6)}
.yt-embed-placeholder p{font-size:.85rem;line-height:1.6}
.yt-embed-placeholder a{
  display:inline-flex;align-items:center;gap:8px;
  background:#ff0000;color:#fff;padding:10px 20px;
  border-radius:50px;font-size:.85rem;font-weight:700;
  margin-top:6px;transition:var(--t);
}
.yt-embed-placeholder a:hover{background:#cc0000}
.yt-modal-tag{background:rgba(255,0,0,.15);color:#ff4444;border-color:rgba(255,0,0,.2)}

/* ============================================================
   MISSING / EXTRA CLASSES
============================================================ */

/* Nav YouTube link */
.nav-yt{display:flex;align-items:center;gap:6px;color:var(--w80)}
.nav-yt i{color:#ff0000}
.nav-yt:hover{color:#ff4444!important}

/* btn-youtube (footer / SNS foot) */
.btn-youtube{
  display:inline-flex;align-items:center;gap:9px;
  background:#ff0000;color:#fff;
  padding:13px 26px;border-radius:50px;
  font-size:.93rem;font-weight:700;
  transition:var(--t);box-shadow:0 6px 22px rgba(255,0,0,.35);
}
.btn-youtube:hover{background:#cc0000;transform:translateY(-3px);box-shadow:0 12px 34px rgba(255,0,0,.5)}
.btn-youtube.large{padding:17px 36px;font-size:1.05rem}

/* btn-yt-conv (conversion section) */
.btn-yt-conv{
  display:inline-flex;align-items:center;gap:9px;
  background:transparent;color:var(--w);
  padding:14px 26px;border-radius:50px;
  font-size:1rem;font-weight:600;
  border:1.5px solid rgba(255,0,0,.5);transition:var(--t);
}
.btn-yt-conv i{color:#ff0000}
.btn-yt-conv:hover{background:rgba(255,0,0,.12);border-color:#ff0000;transform:translateY(-2px)}

/* sns-foot two-button layout */
.sns-foot{text-align:center;padding:36px 20px 0;display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* tl-yt-thumb (timeline YouTube thumbnail) */
.tl-yt-thumb{
  position:relative;margin-top:14px;border-radius:var(--rs);
  overflow:hidden;cursor:pointer;
}
.tl-yt-thumb img{width:100%;height:130px;object-fit:cover;display:block;transition:var(--t)}
.tl-yt-thumb:hover img{transform:scale(1.04)}
.tl-yt-play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.45);
  transition:var(--t);
}
.tl-yt-play i{font-size:2.2rem;color:#ff0000;filter:drop-shadow(0 2px 8px rgba(0,0,0,.6))}
.tl-yt-thumb:hover .tl-yt-play{background:rgba(0,0,0,.3)}

/* foot-yt red hover (already .foot-yt defined in footer section, add here too) */
.foot-socials a.foot-yt:hover{background:#ff0000!important;border-color:#ff0000!important;color:#fff!important}

/* ============================================================
   UTILITIES
============================================================ */
.tab-hidden{display:none!important}
.yt-tab-hidden{display:none!important}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ============================================================
   HERO — MUSICIAN IDENTITY BADGES
============================================================ */
.hero-identity-badges{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  margin-bottom:18px;animation:fadeUp .6s ease .1s both;
}
.hib{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 18px;border-radius:50px;
  font-size:.72rem;font-weight:800;letter-spacing:3px;text-transform:uppercase;
  border:1.5px solid;backdrop-filter:blur(10px);
}
.hib.guitarist{
  background:rgba(233,30,99,.15);border-color:rgba(233,30,99,.5);color:var(--red2);
}
.hib.musician{
  background:rgba(124,58,237,.15);border-color:rgba(124,58,237,.5);color:#a78bfa;
}
.hib.teacher{
  background:rgba(245,158,11,.15);border-color:rgba(245,158,11,.5);color:var(--gold);
}

/* hero booking button */
.hero-book-btn{
  background:linear-gradient(135deg,#7c3aed,#a78bfa)!important;
  box-shadow:0 8px 28px rgba(124,58,237,.45)!important;
}
.hero-book-btn:hover{box-shadow:0 14px 42px rgba(124,58,237,.65)!important}

/* nav booking link */
.nav-links li a.nav-booking{
  color:#a78bfa;font-weight:700;
}
.nav-links li a.nav-booking:hover{color:#fff;background:rgba(124,58,237,.2)}

/* ============================================================
   BOOKING / PERFORMANCE & COLLAB SECTION
============================================================ */
#booking{
  background:var(--dark);
  padding-bottom:80px;
}

/* Artist Profile */
.artist-profile{
  display:flex;gap:40px;align-items:flex-start;
  max-width:900px;margin:0 auto 56px;padding:0 20px;
  animation:fadeUp .7s ease both;
}
.ap-photo{
  position:relative;flex-shrink:0;
  width:220px;height:280px;border-radius:20px;overflow:hidden;
  border:2px solid rgba(233,30,99,.3);
  box-shadow:0 24px 64px rgba(0,0,0,.6);
}
.ap-photo img{width:100%;height:100%;object-fit:cover}
.ap-photo-badge{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(to top,rgba(8,8,16,.95),transparent);
  padding:28px 14px 12px;
  font-family:var(--en);font-size:.95rem;letter-spacing:3px;
  color:var(--red2);display:flex;align-items:center;gap:8px;
}
.ap-info{flex:1}
.ap-name-row{display:flex;align-items:baseline;gap:14px;margin-bottom:10px;flex-wrap:wrap}
.ap-name{
  font-family:var(--en);font-size:2.4rem;letter-spacing:3px;
  background:linear-gradient(135deg,#fff,#e91e63);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.ap-role{font-size:.78rem;color:var(--w60);letter-spacing:2px;text-transform:uppercase}
.ap-bio{
  font-size:.95rem;line-height:1.8;color:var(--w80);margin-bottom:18px;
}
.ap-tags{display:flex;flex-wrap:wrap;gap:9px}
.aptag{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--w05);border:1px solid var(--border);
  padding:6px 14px;border-radius:50px;
  font-size:.72rem;font-weight:600;color:var(--w60);
}

/* Genre Grid */
.genre-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
  max-width:900px;margin:0 auto 48px;padding:0 20px;
}
.genre-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r);padding:24px 16px;text-align:center;
  transition:var(--t);
}
.genre-card:hover{transform:translateY(-5px);border-color:rgba(233,30,99,.3);box-shadow:0 16px 48px rgba(0,0,0,.4)}
.genre-icon{
  width:54px;height:54px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 14px;font-size:1.4rem;color:#fff;
}
.genre-card h4{font-size:.9rem;font-weight:700;margin-bottom:5px}
.genre-card p{font-size:.72rem;color:var(--w60)}

/* Booking Cards */
.booking-cards{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  max-width:900px;margin:0 auto 56px;padding:0 20px;
}
.bk-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r);padding:28px 22px;
  display:flex;gap:16px;align-items:flex-start;
  transition:var(--t);
}
.bk-card:hover{transform:translateY(-5px);box-shadow:0 20px 50px rgba(0,0,0,.5)}
.bk-perf{border-top:3px solid var(--purple)}
.bk-perf:hover{border-color:var(--purple);box-shadow:0 20px 50px rgba(124,58,237,.2)}
.bk-collab{border-top:3px solid var(--gold)}
.bk-collab:hover{border-color:var(--gold);box-shadow:0 20px 50px rgba(245,158,11,.2)}
.bk-lesson{border-top:3px solid var(--red)}
.bk-lesson:hover{border-color:var(--red);box-shadow:0 20px 50px rgba(233,30,99,.2)}

.bk-card-icon{
  width:48px;height:48px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;
}
.bk-perf .bk-card-icon{background:rgba(124,58,237,.2);color:#a78bfa}
.bk-collab .bk-card-icon{background:rgba(245,158,11,.2);color:var(--gold)}
.bk-lesson .bk-card-icon{background:rgba(233,30,99,.2);color:var(--red2)}

.bk-card-body h4{font-size:1rem;font-weight:700;margin-bottom:5px}
.bk-card-body p{font-size:.78rem;color:var(--w60);margin-bottom:12px;line-height:1.5}
.bk-cta{
  font-size:.78rem;font-weight:700;
  display:inline-flex;align-items:center;gap:6px;
}
.bk-perf .bk-cta{color:#a78bfa}
.bk-collab .bk-cta{color:var(--gold)}
.bk-lesson .bk-cta{color:var(--red2)}

/* Media Appearance Card */
.media-appear{
  max-width:900px;margin:0 auto 48px;padding:0 20px;
}
.media-appear-card{
  display:grid;grid-template-columns:1fr;gap:0;
  background:var(--card);border:1px solid var(--border);
  border-radius:20px;overflow:hidden;
  border-top:3px solid #ff0000;
  transition:var(--t);
}
@media(min-width:700px){.media-appear-card{grid-template-columns:46% 1fr}}
.media-appear-card:hover{box-shadow:0 20px 56px rgba(255,0,0,.15)}

/* Thumbnail side */
.mac-thumb-wrap{
  position:relative;display:block;
  min-height:220px;overflow:hidden;
}
@media(min-width:700px){.mac-thumb-wrap{min-height:280px}}
.mac-thumb-wrap img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease;
}
.media-appear-card:hover .mac-thumb-wrap img{transform:scale(1.04)}
.mac-play{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.35);transition:var(--t);
}
.mac-play i{font-size:3rem;color:#ff0000;filter:drop-shadow(0 2px 12px rgba(0,0,0,.7))}
.mac-thumb-wrap:hover .mac-play{background:rgba(0,0,0,.2)}
.mac-thumb-wrap:hover .mac-play i{transform:scale(1.12)}
.mac-yt-badge{
  position:absolute;top:12px;left:12px;
  background:rgba(0,0,0,.75);backdrop-filter:blur(6px);
  color:#ff4444;font-size:.68rem;font-weight:700;letter-spacing:1px;
  padding:5px 11px;border-radius:20px;
  display:flex;align-items:center;gap:5px;
}

/* Info side */
.mac-info{padding:26px 24px;display:flex;flex-direction:column;gap:0}
.mac-channel-row{margin-bottom:12px}
.mac-channel-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,0,0,.1);border:1px solid rgba(255,0,0,.25);
  color:#ff4444;font-size:.68rem;font-weight:700;letter-spacing:1px;
  padding:5px 12px;border-radius:50px;
}
.mac-title{
  font-size:clamp(1rem,2.8vw,1.3rem);
  font-weight:800;color:var(--w);
  line-height:1.3;margin-bottom:10px;
}
.mac-desc{
  font-size:.85rem;color:var(--w60);line-height:1.7;
  margin-bottom:16px;
}
.mac-desc strong{color:var(--w80)}
.mac-tags{
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;
}
.mac-tag{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--w05);border:1px solid var(--border);
  color:var(--w60);font-size:.68rem;font-weight:600;
  padding:5px 11px;border-radius:50px;
}
.mac-watch-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:#ff0000;color:#fff;
  padding:11px 22px;border-radius:50px;
  font-size:.84rem;font-weight:700;
  width:fit-content;transition:var(--t);
  box-shadow:0 6px 24px rgba(255,0,0,.35);
}
.mac-watch-btn:hover{background:#cc0000;transform:translateY(-2px);box-shadow:0 10px 32px rgba(255,0,0,.5)}

/* Performance Highlight Photos */
.perf-highlight{
  max-width:900px;margin:0 auto;padding:0 20px 20px;
}
.ph-label{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.7rem;font-weight:800;letter-spacing:3px;text-transform:uppercase;
  color:var(--gold);margin-bottom:18px;
}
.ph-photos{
  display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:12px;align-items:stretch;
}
.ph-photo{
  position:relative;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--border);
  height:200px;
}
.ph-photo.ph-featured{height:240px;margin-top:-20px;border-color:rgba(233,30,99,.4)}
.ph-photo img{width:100%;height:100%;object-fit:cover;transition:var(--t)}
.ph-photo:hover img{transform:scale(1.05)}
.ph-photo span{
  position:absolute;bottom:0;left:0;right:0;
  padding:24px 12px 10px;
  background:linear-gradient(to top,rgba(0,0,0,.85),transparent);
  font-size:.72rem;font-weight:600;color:var(--w80);
}

/* booking-tag (section tag) */
.booking-tag{
  background:rgba(124,58,237,.15);
  border:1px solid rgba(124,58,237,.4);
  color:#a78bfa;
}

/* Footer tagline update */
.foot-tagline-main{
  font-size:.78rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--red2);margin-bottom:6px;
}
.foot-tagline-sub{font-size:.85rem;color:var(--w60);line-height:1.7}

/* ============================================================
   RESPONSIVE — BOOKING SECTION
============================================================ */
@media(max-width:900px){
  .genre-grid{grid-template-columns:repeat(2,1fr)}
  .booking-cards{grid-template-columns:1fr}
  .artist-profile{flex-direction:column;align-items:center}
  .ap-photo{width:180px;height:230px}
  .ap-info{width:100%}
  .ph-photos{grid-template-columns:1fr;gap:10px}
  .ph-photo,.ph-photo.ph-featured{height:200px;margin-top:0}
}
@media(max-width:480px){
  .genre-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .genre-card{padding:18px 12px}
  .hib{font-size:.62rem;padding:6px 13px}
  .ap-name{font-size:1.9rem}
}