/* ===========================================================
   그랩더기타 실용음악학원
   디자인 토큰: 01_기획/디자인토큰.md (v2)
   색은 사진이 만든다. 배경은 색을 갖지 않는다.
   =========================================================== */

:root{
  --bg:#121212;
  --surface:#191919;
  --line:rgba(226,226,226,.13);
  --text:#e2e2e2;
  --sub:rgba(226,226,226,.56);
  --dim:rgba(226,226,226,.38);
  --accent:#2dcb74;

  --font-disp:"Instrument Serif",serif;
  --font-kr:Pretendard,-apple-system,BlinkMacSystemFont,"Malgun Gothic",sans-serif;

  --pad:92px;
  --gut:24px;
  --d1:44px;
  --d2:30px;
  --kr1:20px;
  --body:15px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --hdr-h:70px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--font-kr);font-size:var(--body);line-height:1.85;
  word-break:keep-all;-webkit-font-smoothing:antialiased;
  padding-bottom:62px; /* 모바일 하단 고정 바 */
}
img{display:block;width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none}
strong{color:var(--text);font-weight:600}

section[id]{scroll-margin-top:calc(var(--hdr-h) + 26px)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.gta-skip{position:absolute;left:-9999px;top:0;background:var(--text);color:var(--bg);
  padding:12px 18px;z-index:200}
.gta-skip:focus{left:12px;top:12px}

/* ---------- 헤더 ---------- */
.gta-hdr{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  gap:16px;padding:16px var(--gut);
  background:linear-gradient(180deg,rgba(18,18,18,.92),rgba(18,18,18,0));
}
.gta-wm{font-family:var(--font-disp);font-size:17px;letter-spacing:.01em;white-space:nowrap}
.gta-nav{display:none;gap:26px;font-size:13px;color:var(--sub);letter-spacing:.06em}
.gta-nav a:hover{color:var(--text)}
.gta-mini{font-size:12px;letter-spacing:.06em;color:var(--sub);
  border:1px solid var(--line);padding:7px 14px;border-radius:99px;white-space:nowrap}
.gta-mini:hover{color:var(--text);border-color:rgba(226,226,226,.3)}

/* ---------- 공통 ---------- */
.gta-sec{padding:var(--pad) var(--gut)}
.gta-sec-tight{padding-top:56px}
.gta-inner{max-width:920px;margin:0 auto}

.gta-eyebrow{display:block;font-family:var(--font-disp);font-style:italic;
  font-size:15px;font-weight:400;color:var(--accent);margin-bottom:18px}
.gta-rule{display:block;width:44px;height:1px;background:var(--accent);margin-bottom:26px}
.gta-disp{font-family:var(--font-disp);font-size:var(--d1);line-height:1.08;font-weight:400}
.gta-disp2{font-family:var(--font-disp);font-size:var(--d2);line-height:1.15;
  letter-spacing:-.01em;font-weight:400}
.gta-kr{font-size:var(--kr1);font-weight:600;line-height:1.7;letter-spacing:-.02em;margin-top:22px}
p{color:var(--sub);margin-top:16px}
.gta-dim{color:var(--dim)}
.gta-foot-note{font-size:13px;color:var(--dim)}

/* ---------- 버튼 ---------- */
.gta-btn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--text);color:var(--bg);
  font-size:14px;font-weight:700;letter-spacing:-.01em;
  padding:15px 26px;border-radius:99px;
  transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.gta-btn:hover{opacity:.84;transform:translateY(-1px)}
.gta-ghost{background:none;color:var(--text);border:1px solid rgba(226,226,226,.3)}
.gta-ghost:hover{border-color:var(--text);opacity:1}
.gta-ar{font-family:var(--font-disp);font-size:16px}
.gta-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:34px}

/* ---------- 히어로 ---------- */
.gta-hero{position:relative;min-height:88vh;display:flex;align-items:flex-end;
  padding:0 var(--gut) 72px;overflow:hidden}
.gta-hero-bg{position:absolute;inset:0}
.gta-hero-bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(.25) contrast(1.04)}
.gta-hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,18,18,.72) 0%,rgba(18,18,18,.45) 42%,rgba(18,18,18,.96) 100%)}
.gta-hero-c{position:relative;width:100%;max-width:920px;margin:0 auto}
.gta-hero .gta-disp{font-size:52px}
.gta-hero .gta-btn{margin-top:32px}
.gta-scroll{position:absolute;left:var(--gut);bottom:28px;
  font-size:11px;letter-spacing:.22em;color:var(--dim)}

/* ---------- 사진 ---------- */
.gta-figure{position:relative}
.gta-figure img{filter:grayscale(.2) contrast(1.03)}
.gta-figure::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 45%,rgba(18,18,18,.85))}
.gta-figure figcaption{position:absolute;left:var(--gut);bottom:20px;z-index:1;
  font-size:11px;letter-spacing:.18em;color:rgba(226,226,226,.85)}

/* ---------- 유튜브 파사드 ---------- */
.gta-video{margin:36px auto 0;max-width:620px}
.gta-yt{position:relative;display:block;width:100%;padding:0;border:0;cursor:pointer;
  background:var(--surface);aspect-ratio:16/9;overflow:hidden}
.gta-yt img{width:100%;height:100%;object-fit:cover;filter:grayscale(.15) contrast(1.03);
  transition:transform .6s var(--ease),filter .4s var(--ease)}
.gta-yt:hover img{transform:scale(1.03);filter:grayscale(0) contrast(1.03)}
.gta-play{position:absolute;inset:0;margin:auto;width:66px;height:66px;border-radius:50%;
  border:1px solid rgba(226,226,226,.7);background:rgba(18,18,18,.42);
  backdrop-filter:blur(3px);transition:background .25s var(--ease)}
.gta-play::after{content:"";position:absolute;inset:0;margin:auto;width:0;height:0;
  border-left:15px solid var(--text);border-top:9px solid transparent;
  border-bottom:9px solid transparent;transform:translateX(3px)}
.gta-yt:hover .gta-play{background:rgba(18,18,18,.66)}
.gta-video iframe{width:100%;aspect-ratio:16/9;border:0;display:block}
.gta-vcap{font-size:11px;letter-spacing:.14em;color:var(--dim);margin-top:12px}

/* ---------- 신뢰 지표 ---------- */
.gta-stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:36px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.gta-stats>div{padding:26px 8px;text-align:center}
.gta-stats>div+div{border-left:1px solid var(--line)}
.gta-stats dd{font-family:var(--font-disp);font-size:32px;line-height:1}
.gta-stats dt{margin-top:9px;font-size:10px;letter-spacing:.16em;color:var(--dim)}

.gta-points{margin-top:36px;border-top:1px solid var(--line)}
.gta-points>div{padding:24px 0;border-bottom:1px solid var(--line)}
.gta-points b{display:block;font-size:16px;font-weight:600;letter-spacing:-.02em}
.gta-points span{display:block;margin-top:7px;font-size:14px;color:var(--sub)}

/* ---------- 클래스 ---------- */
.gta-cards{display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:34px}
.gta-card{background:var(--bg);padding:32px 24px;display:flex;flex-direction:column}
.gta-n{display:block;font-family:var(--font-disp);font-size:13px;color:var(--accent);
  letter-spacing:.14em;margin-bottom:14px}
.gta-card h3{font-size:21px;font-weight:700;letter-spacing:-.02em}
.gta-who{font-size:14px;margin-top:8px}
.gta-course{font-size:13px;color:var(--dim);margin-top:14px;line-height:1.7}
.gta-course strong{color:var(--sub);font-weight:500}

/* 과정·가격 목록 */
.gta-menu{margin-top:auto;padding-top:22px;border-top:1px solid var(--line)}
.gta-menu li{display:flex;justify-content:space-between;align-items:baseline;
  gap:14px;padding:11px 0;font-size:14px}
.gta-menu li+li{border-top:1px solid var(--line)}
.gta-menu span{color:var(--sub);letter-spacing:-.02em}
.gta-menu b{font-family:var(--font-disp);font-size:18px;font-weight:400;
  white-space:nowrap;color:var(--text)}
.gta-free{color:var(--accent)!important}

/* 그 외 과정 */
.gta-extra{display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-top:0;margin-bottom:22px}
.gta-extra>div{background:var(--bg);padding:28px 24px}
.gta-extra h3{font-size:13px;letter-spacing:.06em;color:var(--dim);font-weight:600}
.gta-extra .gta-menu{margin-top:14px;padding-top:0;border-top:0}

/* 후기 수 */
.gta-revcount{font-size:13px;color:var(--dim);margin:0 0 22px}
.gta-revcount strong{font-family:var(--font-disp);font-size:17px;color:var(--text)}

/* 히어로 훅 */
.gta-hook{font-size:13px;color:var(--sub);margin-top:16px}
.gta-hook strong{color:var(--accent);font-weight:600}

/* ---------- 커뮤니티 ---------- */
.gta-lines{margin-top:34px;border-top:1px solid var(--line)}
.gta-lines li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:19px 0;border-bottom:1px solid var(--line)}
.gta-lines b{font-size:16px;font-weight:600;letter-spacing:-.02em}
.gta-lines span{font-size:13px;color:var(--dim);text-align:right}
.gta-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line);margin-top:34px}
.gta-gcell{position:relative;overflow:hidden;background:var(--surface);
  aspect-ratio:4/3;margin:0}
.gta-gcell img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.22) contrast(1.03);
  transition:transform .7s var(--ease),filter .5s var(--ease)}
.gta-gcell::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(18,18,18,.78))}
.gta-gcell figcaption{position:absolute;left:13px;bottom:11px;z-index:1;
  font-size:10px;letter-spacing:.16em;color:rgba(226,226,226,.92)}
.gta-gcell:hover img{transform:scale(1.05);filter:grayscale(0) contrast(1.03)}

/* ---------- 후기 ---------- */
.gta-quote{padding:30px 0;border-bottom:1px solid var(--line)}
.gta-quote p{font-family:var(--font-disp);font-size:19px;line-height:1.55;
  color:var(--text);margin:0}
.gta-quote cite{display:block;margin-top:14px;font-size:12px;
  color:var(--dim);letter-spacing:.04em;font-style:normal}
#voices .gta-btn{margin-top:30px}

/* ---------- FAQ ---------- */
.gta-faq{margin-top:26px;border-top:1px solid var(--line)}
.gta-faq details{border-bottom:1px solid var(--line)}
.gta-faq summary{padding:21px 0;font-size:15px;font-weight:600;cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;gap:16px;letter-spacing:-.02em}
.gta-faq summary::-webkit-details-marker{display:none}
.gta-faq summary::after{content:"+";color:var(--accent);font-weight:400;font-size:17px}
.gta-faq details[open] summary::after{content:"\2013"}
.gta-faq p{margin:0 0 21px;font-size:14px}

/* ---------- 오시는 길 ---------- */
.gta-map{background:var(--surface);aspect-ratio:16/10;margin-top:30px;
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  overflow:hidden}
.gta-mapfallback{color:var(--sub);font-size:14px;text-align:center;line-height:2;margin:0}
.gta-mapbtns{margin-top:20px}
.gta-info{margin-top:26px;border-top:1px solid var(--line)}
.gta-info>div{display:flex;gap:20px;padding:15px 0;
  border-bottom:1px solid var(--line);font-size:14px}
.gta-info dt{color:var(--dim);min-width:62px;font-size:12px;letter-spacing:.08em}
.gta-info a{border-bottom:1px solid var(--line)}
.gta-info a:hover{color:var(--accent);border-color:var(--accent)}

/* ---------- 예약 ---------- */
.gta-book{text-align:center}

/* ---------- 푸터 ---------- */
.gta-foot{padding:52px var(--gut) 44px;border-top:1px solid var(--line);
  font-size:12px;color:var(--dim);line-height:2}
.gta-flinks{display:flex;gap:20px;margin-bottom:22px;flex-wrap:wrap;color:var(--sub)}
.gta-flinks a:hover{color:var(--text)}
.gta-foot a{border-bottom:1px solid transparent}

/* ---------- 모바일 하단 고정 ---------- */
.gta-bar{position:fixed;bottom:0;left:0;right:0;z-index:60;display:flex;
  background:rgba(18,18,18,.94);backdrop-filter:blur(12px);
  border-top:1px solid var(--line)}
.gta-bar a{flex:1;padding:18px;text-align:center;font-size:14px;font-weight:600}
.gta-bar-cta{background:var(--text);color:var(--bg);font-weight:700}

/* ---------- 진입 애니메이션 ---------- */
.gta-rv{opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.gta-rv.is-in{opacity:1;transform:none}

/* ===========================================================
   반응형
   =========================================================== */
@media (min-width:768px){
  :root{--pad:120px;--gut:40px;--d1:64px;--d2:40px;--kr1:24px;--body:16px}
  .gta-hero .gta-disp{font-size:78px}
  .gta-cards{grid-template-columns:1fr 1fr}
  .gta-card{padding:42px 34px}
  .gta-grid{grid-template-columns:repeat(4,1fr)}
  .gta-stats dd{font-size:44px}
  .gta-points{display:grid;grid-template-columns:repeat(3,1fr);gap:0 36px}
  .gta-points>div{border-bottom:none;border-top:1px solid var(--line)}
  .gta-quote p{font-size:22px}
  .gta-extra{grid-template-columns:1fr 1fr}
}

@media (min-width:1024px){
  :root{--pad:150px;--gut:56px;--d1:82px;--d2:48px;--kr1:26px;--hdr-h:90px}
  body{padding-bottom:0}
  .gta-inner,.gta-hero-c{max-width:1120px}
  .gta-hero .gta-disp{font-size:104px}
  .gta-nav{display:flex}
  .gta-hdr{padding:26px var(--gut)}
  .gta-two{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
  .gta-two p{margin-top:0}
  .gta-card{padding:52px 44px}
  .gta-stats dd{font-size:52px}
  .gta-points{gap:0 44px}
  .gta-bar{display:none}
  .gta-video{margin-top:48px}
}

/* ---------- 접근성 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .gta-rv{opacity:1;transform:none}
}