/* ---------- 폰트 : 로컬 파일만 사용 (00_작업규칙 3항) ---------- */
@font-face{font-family:Pretendard;font-weight:400;font-style:normal;font-display:swap;
  src:url("fonts/Pretendard-Regular.woff2") format("woff2");}
@font-face{font-family:Pretendard;font-weight:800;font-style:normal;font-display:swap;
  src:url("fonts/Pretendard-ExtraBold.woff2") format("woff2");}

/* ---------- DESIGN.md 토큰 ---------- */
:root{
  --canvas:#FFFFFF; --surface:#F7F7F8; --surface-sunken:#EFEFF1;
  --line:#E3E5EA; --line-strong:#CDD1D9;
  --ink:#16181D; --ink-muted:#5B6070; --ink-faint:#9AA0AE;
  --accent:#1F4FD8; --accent-hover:#1A42B4; --accent-soft:#EAF0FF;
  --ok:#1B7F4B; --ok-text:#166B3F; --ok-soft:#E7F4EC;
  --warn:#B57400; --warn-text:#8A5800; --warn-soft:#FDF3E2;
  --risk:#B4232B; --risk-text:#9C1E25; --risk-soft:#FBEBEC;
  --idle:#5A606B; --idle-soft:#F1F2F4;

  /* 간격 : 4px 배수 (DESIGN.md Layout) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s8:32px; --s10:40px; --s12:48px; --s16:64px;

  /* 모서리 (DESIGN.md Shapes) */
  --r-sm:6px; --r-md:10px; --r-lg:14px;

  /* 공개 소개면 최대 폭 — 🔴 잠정값. DESIGN.md Layout에 행이 없다 */
  --page:1080px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--canvas); color:var(--ink);
  font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  font-size:15px; font-weight:400; line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:var(--accent); text-decoration:none;}
a:hover{color:var(--accent-hover); text-decoration:underline;}
h1,h2,h3{font-weight:800; letter-spacing:-0.02em; line-height:1.3; margin:0;}
p{margin:0;}
.wrap{max-width:var(--page); margin:0 auto; padding:0 var(--s6);}

/* ---------- 헤더 ---------- */
.site-head{
  position:sticky; top:0; z-index:10; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid var(--line);
}
.site-head .wrap{display:flex; align-items:center; gap:var(--s6); height:64px;}
.brand{display:flex; align-items:center; gap:var(--s3);}
.brand img{height:26px; width:auto;}
.brand span{font-weight:800; font-size:18px; letter-spacing:-0.02em;}
.nav{margin-left:auto; display:flex; gap:var(--s6); align-items:center;}
.nav a{color:var(--ink-muted); font-size:14px; text-decoration:none;}
.nav a:hover{color:var(--ink);}
.nav .btn{margin-left:var(--s2);}

/* ---------- 버튼 (DESIGN.md Components > 버튼) ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; padding:0 var(--s6); border-radius:var(--r-sm);
  background:var(--accent); color:#fff; font-weight:800; font-size:15px;
  border:1px solid var(--accent); text-decoration:none; white-space:nowrap;
}
.btn:hover{background:var(--accent-hover); border-color:var(--accent-hover); color:#fff; text-decoration:none;}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line-strong);}
.btn.ghost:hover{background:var(--surface); color:var(--ink);}
.btn.sm{height:38px; padding:0 var(--s5); font-size:14px;}

/* ---------- 히어로 ---------- */
.hero{padding:var(--s16) 0 var(--s12);}
.hero h1{font-size:clamp(30px,5.2vw,46px); max-width:16em;}
.hero .lede{margin-top:var(--s5); font-size:17px; color:var(--ink-muted); max-width:34em;}
.hero .cta{margin-top:var(--s8); display:flex; gap:var(--s3); flex-wrap:wrap;}

/* 여정 */
.journey{
  margin-top:var(--s12); border-top:1px solid var(--line); padding-top:var(--s8);
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4);
}
.journey a{
  display:block; padding:var(--s6); border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--canvas); color:var(--ink); text-decoration:none;
}
.journey a:hover{border-color:var(--line-strong); background:var(--surface); text-decoration:none;}
.journey .step{font-size:12px; font-weight:800; color:var(--accent); letter-spacing:.04em;}
.journey h3{margin-top:var(--s2); font-size:19px;}
.journey p{margin-top:var(--s2); color:var(--ink-muted); font-size:14px;}

/* ---------- 섹션 ---------- */
section{padding:var(--s16) 0; border-top:1px solid var(--line); scroll-margin-top:64px;}
section.alt{background:var(--surface);}
.sec-head{max-width:40em;}
.eyebrow{font-size:12px; font-weight:800; letter-spacing:.08em; color:var(--accent); text-transform:uppercase;}
.sec-head h2{margin-top:var(--s2); font-size:clamp(24px,3.4vw,32px);}
.sec-head p{margin-top:var(--s4); color:var(--ink-muted);}

/* ---------- 작업물 그리드 ---------- */
.work-grid{margin-top:var(--s10); display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s6);}
.work{border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:var(--canvas);}
.work .thumb{aspect-ratio:4/3; background:var(--surface-sunken); overflow:hidden;}
.work .thumb img{width:100%; height:100%; object-fit:cover; object-position:top center;}
.work .meta{padding:var(--s4) var(--s5) var(--s5);}
.work .meta h3{font-size:15px;}
.work .meta p{margin-top:var(--s1); font-size:13px; color:var(--ink-muted);}
.note{
  margin-top:var(--s6); font-size:13px; color:var(--ink-muted);
  padding:var(--s4) var(--s5); background:var(--surface); border-radius:var(--r-sm);
  border-left:3px solid var(--line-strong);
}
section.alt .note{background:var(--canvas);}

/* ---------- 요금표 ---------- */
.price-wrap{margin-top:var(--s10); overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-md); background:var(--canvas);}
table{border-collapse:collapse; width:100%; min-width:640px;}
thead th{
  background:var(--surface); border-bottom:1px solid var(--line-strong);
  font-size:12px; font-weight:800; color:var(--ink-muted); letter-spacing:.02em;
  text-align:left; padding:var(--s3) var(--s5); white-space:nowrap;
}
thead th.num, tbody td.num{text-align:right;}
tbody td{border-top:1px solid var(--line); padding:var(--s4) var(--s5); font-size:14px; vertical-align:top;}
tbody tr:first-child td{border-top:none;}
tbody td.name{font-weight:800;}
tbody td.num{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px;
  white-space:nowrap; font-variant-numeric:tabular-nums;
}
tbody tr:hover{background:var(--accent-soft);}
.group-row td{background:var(--surface); font-size:12px; font-weight:800; color:var(--ink-muted); letter-spacing:.04em;}

/* ---------- 스튜디오 ---------- */
.studio-grid{margin-top:var(--s10); display:grid; grid-template-columns:2fr 1fr 1fr; gap:var(--s4); grid-auto-rows:200px;}
.studio-grid figure{margin:0; border-radius:var(--r-md); overflow:hidden; background:var(--surface-sunken);}
.studio-grid figure:first-child{grid-row:span 2;}
.studio-grid img{width:100%; height:100%; object-fit:cover;}
.studio-grid figure.plan{background:var(--canvas); border:1px solid var(--line);}
.studio-grid figure.plan img{object-fit:contain; padding:var(--s3);}
.studio-facts{margin-top:var(--s8); display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4);}
.fact{border:1px solid var(--line); border-radius:var(--r-md); padding:var(--s5); background:var(--canvas);}
.fact dt{font-size:12px; font-weight:800; color:var(--ink-muted); letter-spacing:.02em;}
.fact dd{margin:var(--s2) 0 0; font-size:15px;}
.fact dd.pending{color:var(--warn-text); font-size:14px;}

/* ---------- 회사 ---------- */
.people{margin-top:var(--s10); display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s6);}
.person{text-align:left;}
.person .pic{
  width:100%; aspect-ratio:1/1; border-radius:var(--r-lg); overflow:hidden;
  background:var(--surface-sunken); border:1px solid var(--line);
}
.person .pic img{width:100%; height:100%; object-fit:cover; object-position:center top;}
.person h3{margin-top:var(--s4); font-size:17px;}
.person .role{margin-top:var(--s1); font-size:13px; color:var(--accent); font-weight:800;}
.person p{margin-top:var(--s2); font-size:14px; color:var(--ink-muted);}

.activity{margin-top:var(--s12); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s8); background:var(--canvas);}
.activity h3{font-size:18px;}
.activity ul{margin:var(--s5) 0 0; padding:0; list-style:none;}
.activity li{display:flex; gap:var(--s5); padding:var(--s3) 0; border-top:1px solid var(--line); font-size:14px;}
.activity li:first-child{border-top:none;}
.activity li .when{
  flex:0 0 92px; color:var(--ink-muted); font-size:13px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ---------- 강의 ---------- */
.teachers{margin-top:var(--s10); display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4);}
.teacher.feature{border-color:var(--line-strong); box-shadow:0 1px 2px rgba(22,24,29,.05);}
.teacher .pic.initial{display:flex; align-items:center; justify-content:center; background:var(--accent-soft);}
.teacher .pic.initial span{font-size:40px; font-weight:800; color:var(--accent); letter-spacing:-0.02em;}
.teacher{border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--canvas); display:flex; flex-direction:column;}
.teacher .pic{aspect-ratio:4/3; background:var(--surface-sunken); overflow:hidden;}
.teacher .pic img{width:100%; height:100%; object-fit:cover; object-position:center 20%;}
.teacher .body{padding:var(--s5) var(--s5) var(--s6); display:flex; flex-direction:column; flex:1;}
.teacher h3{font-size:17px;}
.teacher .role{margin-top:var(--s1); font-size:13px; font-weight:800; color:var(--accent);}
.teacher p{margin-top:var(--s3); font-size:14px; color:var(--ink-muted);}
.creds{margin:var(--s4) 0 0; padding:0; list-style:none; border-left:2px solid var(--accent-soft); padding-left:var(--s3);}
.creds li{font-size:13px; color:var(--ink); line-height:1.65;}
.topics{margin:var(--s4) 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:var(--s2);}
.topics li{
  font-size:12px; font-weight:800; color:var(--ink-muted);
  background:var(--surface); border:1px solid var(--line); border-radius:999px;
  padding:var(--s1) var(--s3);
}
.teach-cta{
  margin-top:var(--s10); border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--surface); padding:var(--s8);
  display:flex; align-items:center; gap:var(--s8); flex-wrap:wrap;
}
.teach-cta h3{font-size:16px;}
.teach-cta .done{margin-top:var(--s2); font-size:14px; color:var(--ink-muted);}
.teach-cta .btn{margin-left:auto;}

/* ---------- 문의 ---------- */
.contact-box{
  margin-top:var(--s10); border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--canvas); padding:var(--s10); text-align:center;
}
.contact-box h3{font-size:22px;}
.contact-box p{margin-top:var(--s4); color:var(--ink-muted);}
.contact-box .cta{margin-top:var(--s8); display:flex; gap:var(--s3); justify-content:center; flex-wrap:wrap;}
.contact-box .cta .btn{font-size:19px; height:56px; padding:0 var(--s10); font-variant-numeric:tabular-nums; letter-spacing:.01em;}
.contact-hours{margin-top:var(--s5) !important; font-size:13px; color:var(--ink-muted);}
.pending-chip{
  display:inline-flex; align-items:center; gap:var(--s2);
  background:var(--warn-soft); color:var(--warn-text); border:1px solid var(--warn);
  border-radius:999px; padding:var(--s2) var(--s4); font-size:13px; font-weight:800;
}

/* ---------- 푸터 ---------- */
.site-foot{background:var(--ink); color:#fff; padding:var(--s12) 0 var(--s10); border-top:none;}
.site-foot .wrap{display:flex; gap:var(--s10); flex-wrap:wrap; align-items:flex-start;}
.site-foot img{height:24px; width:auto;}
.site-foot .legal{margin-left:auto; text-align:right; font-size:13px; color:#B6BAC4; line-height:1.9;}
.site-foot .legal a{color:#fff; font-weight:800; font-variant-numeric:tabular-nums;}
.site-foot .legal a:hover{color:#fff;}
.site-foot .tag{margin-top:var(--s4); font-size:14px; color:#B6BAC4; max-width:24em;}
.site-foot .biz{display:flex; flex-direction:column; gap:var(--s1);}
.site-foot .biz em{font-style:normal; color:#80869A; margin-right:var(--s2);}
.site-foot .biz .todo{color:#F0C98A;}
.site-foot .copy{margin-top:var(--s5); color:#80869A; font-size:12px;}

/* ---------- 반응형 ---------- */
@media (max-width:900px){
  .work-grid{grid-template-columns:repeat(2,1fr);}
  .teachers{grid-template-columns:repeat(2,1fr); gap:var(--s4);}
  .journey{grid-template-columns:1fr;}
  .people{grid-template-columns:repeat(3,1fr); gap:var(--s4);}
  .studio-grid{grid-template-columns:repeat(2,1fr); grid-auto-rows:160px;}
  .studio-facts{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .nav a:not(.btn){display:none;}
  .hero{padding:var(--s12) 0 var(--s10);}
  .journey{grid-template-columns:1fr;}
  .work-grid{grid-template-columns:1fr;}
  .teachers{grid-template-columns:1fr;}
  .teach-cta{flex-direction:column; align-items:flex-start;}
  .teach-cta .btn{margin-left:0;}
  .people{grid-template-columns:1fr;}
  .studio-grid figure:first-child{grid-row:span 1;}
  .site-foot .legal{margin-left:0; text-align:left;}
  .contact-box{padding:var(--s8) var(--s5);}
}

/* ---------- v11 : 랜딩의 더 보기 링크 ---------- */
.more{margin-top:var(--s5) !important;}
.more a{color:var(--accent); font-weight:800; text-decoration:none; font-size:15px;}
.more a:hover{color:var(--accent-hover); text-decoration:underline;}
/* 외부 링크 표시가 붙은 내비 항목 */
.nav a[target="_blank"]{white-space:nowrap;}

/* ---------- v11 수정 : 헤더 CTA 대비 ----------
   `.nav a`(0,1,1)가 `.btn`(0,1,0)을 이겨서 파란 버튼에 회색 글자가 나왔다.
   v1부터 있던 문제다. 내용만 보고 대비를 안 봐서 못 잡았다. */
.nav a.btn{color:#fff;}
.nav a.btn:hover{color:#fff;}