@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
@import url("https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.19.0/dist/tabler-icons.min.css");

:root {
  --ink: #111111;
  --sub: #6b6b6b;
  --line: #e4e4e4;
  --soft: #f6f6f4;
  --accent: #f5b800;
  --accent-ink: #8a6500;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; background: #1b1b1b; overflow: hidden; }
body { font-family: "Pretendard", -apple-system, sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased; }

/* 1920x1080 고정 캔버스를 창 크기에 맞춰 축소 */
.stage { position: absolute; top: 50%; left: 50%; width: 1920px; height: 1080px; transform-origin: center; }
.slide { position: absolute; inset: 0; background: #fff; padding: 120px 140px; display: none; flex-direction: column; justify-content: center; }
.slide.on { display: flex; }

.meta { position: absolute; top: 56px; left: 140px; right: 140px; display: flex; justify-content: space-between; font-size: 26px; color: var(--sub); }

/* 캠 자리: 오른쪽 아래 480x480은 비워둔다 */
.cam { position: absolute; right: 0; bottom: 0; width: 480px; height: 480px; }
body.guide .cam { outline: 3px dashed #d33; outline-offset: -3px; }

.bar { width: 72px; height: 8px; background: var(--accent); margin-bottom: 40px; }
.tag { font-size: 30px; font-weight: 700; color: var(--accent-ink); margin-bottom: 20px; letter-spacing: .02em; }
h1 { font-size: 104px; font-weight: 800; line-height: 1.2; letter-spacing: -0.03em; }
h2 { font-size: 76px; font-weight: 800; line-height: 1.25; letter-spacing: -0.03em; }
.lead { font-size: 44px; color: var(--sub); margin-top: 28px; font-weight: 500; }
.hl { box-shadow: inset 0 -0.32em 0 var(--accent); }

/* 표지 */
.cover .art { position: absolute; top: 140px; right: 120px; width: 740px; }
.cover .txt { max-width: 900px; }

/* 한 문장 */
.big { font-size: 120px; font-weight: 800; line-height: 1.25; letter-spacing: -0.04em; }

/* 좌우 비교 */
.vs { display: grid; grid-template-columns: 1fr 4px 1fr; gap: 80px; align-items: center; margin-top: 70px; width: 1200px; }
.vs .col { text-align: center; }
.vs .col i { font-size: 120px; color: #9a9a9a; }
.vs .col.win i { color: var(--accent); }
.vs .name { font-size: 64px; font-weight: 800; margin-top: 16px; }
.vs .desc { font-size: 44px; color: var(--sub); margin-top: 12px; }
.vs .div { height: 300px; background: var(--line); }

/* 카드 */
.cards { display: grid; gap: 36px; margin-top: 70px; width: 1300px; }
.cards.c3 { grid-template-columns: repeat(3, 1fr); }
.cards.c4 { grid-template-columns: repeat(4, 1fr); gap: 28px; }
.cards.c4 .k { font-size: 44px; }
.card { border-top: 8px solid var(--accent); background: var(--soft); padding: 44px 36px 48px; }
.card i { font-size: 72px; }
.card .k { font-size: 46px; font-weight: 800; margin-top: 22px; line-height: 1.25; }
.card .d { font-size: 34px; color: var(--sub); margin-top: 14px; line-height: 1.4; }

/* 실습 순서 */
.steps { display: flex; align-items: center; gap: 22px; margin-top: 64px; flex-wrap: nowrap; }
.step { border: 2px solid var(--line); border-radius: 14px; padding: 26px 34px; font-size: 42px; font-weight: 700; white-space: nowrap; }
.step b { color: var(--accent-ink); margin-right: 14px; }
.steps > i { font-size: 44px; color: #b5b5b5; }
.note { font-size: 34px; color: var(--sub); margin-top: 44px; }
.shot { margin-top: 48px; height: 520px; width: auto; align-self: flex-start; border: 2px solid var(--line); border-radius: 14px; }
.slide.top { justify-content: flex-start; padding-top: 150px; }
.slide.top .steps { margin-top: 40px; }
.slide.top .step { padding: 20px 30px; font-size: 38px; }

/* 그림 + 텍스트 */
.split { display: grid; grid-template-columns: 820px 1fr; gap: 60px; align-items: center; }
.split img { width: 100%; }
.split.art-top { align-items: start; }

/* 요금제 표 */
table.plan { margin-top: 64px; border-collapse: collapse; width: 1260px; font-size: 44px; text-align: center; }
table.plan th, table.plan td { padding: 26px 10px; border-bottom: 2px solid var(--line); }
table.plan th { font-weight: 800; }
table.plan td { color: var(--sub); }
table.plan .pick { background: #fff6d6; color: var(--ink); font-weight: 800; }

/* 진행 표시 */
.progress { position: fixed; left: 0; bottom: 0; height: 4px; background: var(--accent); transition: width .2s; }
.cover .art, .split img { mix-blend-mode: multiply; }
.prompt { margin-top: 56px; align-self: flex-start; max-width: 1240px; padding: 30px 40px; border-left: 8px solid var(--accent); background: var(--soft); font-size: 42px; font-weight: 600; line-height: 1.4; }
.link { margin-top: 28px; font-size: 32px; color: var(--sub); text-decoration: underline; text-underline-offset: 6px; }