/* 맞춤 제작(/maker/, 한국어만) — 2026-10-12 대성님 시안 확정. site.css·programs.css·page.css 다음에 읽는다. 색은 site.css 토큰만.
   10/13 글자 정리(대성님 "타이포그래피 개선"): 크기 12가지 → 아래 단계만. 기준 03_공통/웹도구/v2/디자인기준표.md '글자'(본문 PC 17·휴대폰 16, 보조 15, 최소 14) */
.mk{
  --t-h1:clamp(40px,5vw,64px);   /* 페이지 제목 */
  --t-h2:clamp(28px,3vw,40px);   /* 구역 제목 */
  --t-lead:19px;                 /* 첫 화면 소개 */
  --t-h3:21px;                   /* 카드·항목 제목 */
  --t-body:17px;                 /* 설명 문장 */
  --t-small:15px;                /* 보조 문장 */
  --t-min:14px;                  /* 꼬리표·번호 */
  --t-num:28px;                  /* 큰 숫자 */
  max-width:1120px;margin:0 auto;padding:calc(var(--head,72px) + 16px) var(--gutter) 96px;letter-spacing:-.01em
}
.mk h1,.mk h2,.mk h3{text-wrap:balance}
.mk p,.mk li,.mk summary{text-wrap:pretty}
.mk b,.mk-when,.mk-price-num{font-variant-numeric:tabular-nums}

/* 첫 화면 */
.mk-hero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:48px;align-items:center;padding-top:40px}
.mk-eyebrow{margin:0;font-size:var(--t-small);font-weight:700;letter-spacing:.02em;color:var(--blue-strong)}
.mk h1{margin:12px 0 0;font-size:var(--t-h1);line-height:1.12;letter-spacing:-.045em;font-weight:800}
.mk-sub{margin:16px 0 0;font-size:24px;line-height:1.4;font-weight:700;letter-spacing:-.025em;color:var(--ink)}
.mk-lead{margin:16px 0 0;font-size:var(--t-lead);line-height:1.7;color:var(--ink-2);max-width:32em}
.mk-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.mk-cta .pill{min-height:48px;padding:0 24px;font-size:var(--t-small)}

.mk-card{padding:32px 28px;border-radius:var(--r-card);background:var(--surface);box-shadow:0 18px 50px rgba(27,34,49,.08);display:grid;gap:4px;text-align:center}
.mk-card-logo{display:grid;place-items:center;height:120px;border-radius:20px;background:var(--blue-soft);margin-bottom:16px}
.mk-card-logo img{width:156px;height:auto}
.mk-card-name{margin:0;font-size:var(--t-h3);font-weight:700;letter-spacing:-.02em}
.mk-card-role{margin:0;font-size:var(--t-small);color:var(--muted)}
.mk-card-facts{list-style:none;margin:20px 0 0;padding:20px 0 0;border-top:1px solid var(--line);display:grid;gap:14px;text-align:left}
.mk-card-facts li{display:grid;grid-template-columns:76px minmax(0,1fr);align-items:baseline;gap:12px}
.mk-card-facts b{font-size:var(--t-num);font-weight:750;line-height:1.1;color:var(--blue);letter-spacing:-.02em}
.mk-card-facts span{font-size:var(--t-small);color:var(--ink-2)}

/* 구역 공통 */
.mk-sec{margin-top:104px}
.mk-sec h2{margin:0;font-size:var(--t-h2);line-height:1.2;font-weight:750;letter-spacing:-.035em}
.mk-sec-lead{margin:12px 0 0;font-size:var(--t-body);line-height:1.6;color:var(--ink-2);max-width:40em}
.mk-note{margin:16px 0 0;padding:16px 20px;border-radius:16px;background:var(--pill);font-size:var(--t-small);line-height:1.6;color:var(--ink-2)}

/* 다른 곳과 무엇이 다른가요(10/13) */
.mk-diff{list-style:none;margin:28px 0 0;padding:0;border-radius:var(--r-card);background:var(--surface);overflow:hidden}
.mk-diff li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:32px;align-items:baseline;padding:24px 32px;border-top:1px solid var(--line)}
.mk-diff li:first-child{border-top:0}
.mk-diff h3{margin:0;font-size:var(--t-body);line-height:1.5;font-weight:700;color:var(--ink)}
.mk-diff h3 span{display:inline-grid;place-items:center;width:28px;height:28px;margin-right:10px;border-radius:50%;background:var(--blue-soft);color:var(--blue-strong);font-size:var(--t-min);font-weight:700;vertical-align:1px}
.mk-diff p{margin:0;font-size:var(--t-body);line-height:1.7;color:var(--ink-2)}
.mk-diff p b{color:var(--ink);font-weight:700}
.mk-diff a{color:var(--blue);font-weight:700}

/* 직접 만든 것 */
.mk-work{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:36px;align-items:start;margin-top:28px;padding:32px;border-radius:var(--r-card);background:var(--surface)}
.mk-tag{display:inline-block;margin:0;padding:4px 12px;border-radius:999px;background:var(--blue-soft);color:var(--blue-strong);font-size:var(--t-min);font-weight:700}
.mk-work h3{margin:14px 0 0;font-size:var(--t-h3);line-height:1.35;letter-spacing:-.02em}
.mk-work-text p:not(.mk-tag){margin:10px 0 0;font-size:var(--t-body);line-height:1.7;color:var(--ink-2)}
.mk-link{display:inline-block;margin-top:14px;font-size:var(--t-small);font-weight:700;color:var(--blue)}
/* 큰 그림 1장 + 작은 그림 2장(같은 비율로 위쪽만 보여 주고, 누르면 전체) · 영상은 세로 3장 */
.mk-shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mk-shots.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.mk-shot{display:block;padding:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--ground);cursor:zoom-in;transition:transform .2s,box-shadow .2s}
.mk-shot:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(27,34,49,.12)}
.mk-shot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.mk-shots:not(.three) .mk-shot:first-child{grid-column:1/-1}
.mk-shots.three .mk-shot img{aspect-ratio:9/16}
.mk-shots.photo .mk-shot img{object-position:center}

/* 지나온 일 */
.mk-career{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:10px}
.mk-career li{display:grid;grid-template-columns:140px minmax(0,1fr);gap:24px;padding:24px 28px;border-radius:var(--r-card);background:var(--surface)}
.mk-when{font-size:var(--t-small);font-weight:700;color:var(--muted);line-height:1.6;padding-top:2px}
.mk-career b{font-size:var(--t-h3);line-height:1.35;letter-spacing:-.02em}
.mk-career p{margin:6px 0 0;font-size:var(--t-body);line-height:1.7;color:var(--ink-2)}
.mk-proof{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
.mk-proof div{padding:22px 28px;border-radius:var(--r-card);background:var(--blue-soft);display:grid;gap:6px}
.mk-proof b{font-size:var(--t-small);color:var(--blue-strong)}
.mk-proof span{font-size:var(--t-body);line-height:1.6;color:var(--ink)}

/* 진행 방식(page.css .flow 위에 글자만 맞춤) */
.mk .flow strong{font-size:var(--t-body)}
.mk .flow span{font-size:var(--t-small);line-height:1.6}

/* 얼마나 드나요 */
.mk-price{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}
.mk-price article{padding:28px 26px;border-radius:var(--r-card);background:var(--surface);display:grid;gap:6px;align-content:start}
.mk-price h3{margin:0;font-size:var(--t-h3);letter-spacing:-.02em}
.mk-price-num{margin:0;font-size:var(--t-small);color:var(--ink-2)}
.mk-price-num b{font-size:var(--t-num);font-weight:750;letter-spacing:-.02em;color:var(--blue);margin-right:2px}
.mk-price ul{list-style:none;margin:12px 0 0;padding:16px 0 0;border-top:1px solid var(--line);display:grid;gap:12px}
.mk-price li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:var(--t-small);line-height:1.5;color:var(--ink-2)}
.mk-price li b{flex:none;color:var(--ink);font-weight:700}

/* 자주 묻는 질문 */
.mk-faq{display:grid;gap:10px;margin-top:28px}
.mk-faq details{padding:0 28px;border-radius:18px;background:var(--surface)}
.mk-faq summary{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:64px;font-size:var(--t-body);font-weight:700;cursor:pointer;list-style:none}
.mk-faq summary::-webkit-details-marker{display:none}
.mk-faq summary::after{content:"+";flex:none;font-size:24px;line-height:1;font-weight:400;color:var(--blue)}
.mk-faq details[open] summary::after{content:"−"}
.mk-faq details p{margin:0;padding:0 0 22px;font-size:var(--t-body);line-height:1.7;color:var(--ink-2);max-width:44em}

/* 문의 */
.mk-contact{padding:48px 44px;border-radius:var(--r-card);background:var(--night);color:#fff}
.mk-contact h2{color:#fff}
.mk-contact p{margin:14px 0 0;font-size:var(--t-body);line-height:1.7;color:#D6DCE6;max-width:40em}
.mk-ask{margin:22px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;counter-reset:a}
.mk-ask li{counter-increment:a;display:flex;align-items:center;gap:10px;padding:16px 18px;border-radius:14px;background:rgba(255,255,255,.08);font-size:var(--t-small);font-weight:600;color:#fff}
.mk-ask li::before{content:counter(a);display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:#fff;color:var(--night);font-size:var(--t-min);font-weight:700}
.mk-contact .pill.dark{background:#fff;color:var(--night)}
.mk-contact .pill.dark::after{background:var(--night)}
.mk-contact .pill.soft{background:rgba(255,255,255,.12);color:#fff;overflow-wrap:anywhere;white-space:normal}
.mk-contact .mk-mail{margin-top:16px;font-size:var(--t-small);color:#B9C2D0}

/* 크게 보기 */
.mk-view{max-width:min(1100px,94vw);max-height:92vh;padding:12px;border:0;border-radius:18px;background:var(--surface)}
.mk-view::backdrop{background:var(--scrim)}
.mk-view #mkViewBox img{display:block;max-width:100%;max-height:calc(92vh - 90px);margin:0 auto;height:auto}
.mk-view .pill{display:flex;margin:10px auto 0}

@media (max-width:900px){
  .mk-hero,.mk-work{grid-template-columns:minmax(0,1fr)}
  .mk-hero{padding-top:16px}
  .mk-price{grid-template-columns:minmax(0,1fr)}
  .mk-ask{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mk-diff li{grid-template-columns:minmax(0,1fr);gap:8px}
}
@media (max-width:640px){
  .mk{--t-body:16px;--t-lead:17px;--t-h3:20px;--t-num:26px}
  .mk-sub{font-size:20px}
  .mk-sec{margin-top:80px}
  .mk-work{padding:20px}
  .mk-shots{gap:8px}
  .mk-diff li{padding:20px}
  .mk-career li{grid-template-columns:minmax(0,1fr);gap:4px;padding:20px}
  .mk-proof{grid-template-columns:minmax(0,1fr)}
  .mk-proof div{padding:20px}
  .mk-contact{padding:32px 22px}
  .mk-faq details{padding:0 20px}
  .mk-card-facts li{grid-template-columns:64px minmax(0,1fr)}
}
@media (max-width:480px){ .mk-ask{grid-template-columns:minmax(0,1fr)} }

/* 10/13 만들 수 있는 것 · 포트폴리오 예시 줄 · 항목별 문의 */
.mk-can{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.mk-can li{padding:26px 26px 22px;border-radius:var(--r-card);background:var(--surface);display:grid;gap:8px;align-content:start}
.mk-can h3{margin:0;font-size:var(--t-h3);line-height:1.35;letter-spacing:-.02em}
.mk-can p{margin:0;font-size:var(--t-body);line-height:1.6;color:var(--ink-2)}
.mk-can a,.mk-can span{margin-top:6px;padding-top:12px;border-top:1px solid var(--line);font-size:var(--t-small);font-weight:600;color:var(--muted);text-decoration:none}
.mk-can a{color:var(--blue-strong)}
.mk-can a:hover{text-decoration:underline}
.mk-ex{margin:6px 0 0;font-size:var(--t-small);font-weight:600;color:var(--muted)}
.mk-work-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:18px}
.mk-work-acts .mk-link{margin-top:0}
.mk-ask-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 18px;border-radius:var(--r-pill);background:var(--night);color:#fff;font-size:var(--t-small);font-weight:700;text-decoration:none}
.mk-ask-link:hover{background:var(--blue-strong)}
@media (max-width:900px){ .mk-can{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .mk-can{grid-template-columns:minmax(0,1fr)} }
.mk [id]{scroll-margin-top:96px}

/* 10/13 제품 3D 영상(큰 영상 1 + 작은 영상 2) · 디자인(세로 상세 1 + 썸네일 2) */
.mk-vids{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mk-vid{margin:0;display:grid;gap:6px}
.mk-vid:first-child{grid-column:1/-1}
.mk-vid video{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:14px;background:#0E1118;object-fit:cover}
.mk-vid figcaption{font-size:var(--t-small);color:var(--muted)}
.mk-small{margin:10px 0 0;font-size:var(--t-small) !important;color:var(--muted) !important}
.mk-shots.design{grid-template-columns:minmax(0,.8fr) minmax(0,1fr);grid-template-rows:auto auto}
.mk-shots.design .mk-shot:first-child{grid-column:1;grid-row:1 / span 2;position:relative}
.mk-shots.design .mk-shot:first-child img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:top}
.mk-shots.design .mk-shot:not(:first-child){align-self:start}
.mk-shots.design .mk-shot:not(:first-child) img{aspect-ratio:1304/976}

/* 10/13 시안: 첫 화면 카드에 3D 영상(소리 없음·반복), 가격 5칸(프로그램 3 + 디자인·영상 2) */
.mk-card-reel{position:relative;margin:-12px -8px 16px;border-radius:20px;overflow:hidden;background:#0E1118;aspect-ratio:16/10}
.mk-reel{display:block;width:100%;height:100%;object-fit:cover}
.mk-card-badge{position:absolute;left:14px;top:14px;width:96px;height:auto;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.92);box-sizing:content-box}
.mk-price{grid-template-columns:repeat(6,minmax(0,1fr))}
.mk-price article{grid-column:span 2}
.mk-price article:nth-child(n+4){grid-column:span 3}
.mk-price article:nth-child(n+4) .mk-price-num b{font-size:24px;color:var(--ink)}
@media (max-width:900px){ .mk-price{grid-template-columns:minmax(0,1fr)} .mk-price article,.mk-price article:nth-child(n+4){grid-column:auto} }
@media (prefers-reduced-motion:reduce){ .mk-reel{display:none} .mk-card-reel{background:#0E1118 url(/assets/v/maker/hero-reel.d440a61198.jpg) center/cover} }