/* 2026-10-02 — 문구와 실제 결과물을 먼저 보여 주는 홍보 구성 */
:root { --promo-green:#36523c; --promo-paper:#f6f3eb; }
html { scroll-padding-top:140px; }
.promo-hero { padding:76px 0 34px; text-align:center; }
.promo-hero .eyebrow { font-size:26px;line-height:1.4;font-weight:700; background:transparent; padding:0; letter-spacing:.09em; }
.promo-hero h1 { font-size:clamp(31px,4.4vw,52px); line-height:1.42; letter-spacing:-.055em; margin:0 auto 18px; max-width:950px; }
.promo-hero h1 em { font-style:normal; color:var(--promo-green); }
.promo-hero .lead { max-width:650px; margin:0 auto; font-size:17px; color:var(--sub); }
.promo-hero .hero-actions { justify-content:center; margin-top:24px; }
.promo-proof { padding:12px 0 62px; }
.proof-frame { border:1px solid var(--line); padding:26px; background:var(--promo-paper); border-radius:22px; }
.proof-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:22px; }
.proof-heading span { font-size:12px; letter-spacing:.07em; color:var(--sub); }
.proof-heading b { font-family:var(--serif); font-size:20px; }
.result-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:24px; align-items:start; }
.result-card { display:block; text-decoration:none; color:var(--ink); min-width:0; margin:0; }
.result-image { background:#fff; border:1px solid var(--line); border-radius:12px; padding:18px; overflow:hidden; }
.result-image img { width:100%; display:block; max-height:390px; object-fit:contain; }
.result-card figcaption { padding-top:14px; color:var(--sub); font-size:14px; }
.result-card figcaption strong { display:block; color:var(--ink); font-size:18px; margin-bottom:3px; }
.proof-caption { max-width:710px; text-align:center; color:var(--sub); margin:26px auto 0; font-size:16px; }
.promo-kicker { display:block; font-size:12px; text-transform:uppercase; letter-spacing:.13em; color:var(--sprout-tx); margin-bottom:12px; font-weight:700; }
.promo-section { padding:64px 0; border-top:1px solid var(--line); }
.promo-section h2 { font-size:clamp(25px,3vw,34px); line-height:1.5; letter-spacing:-.04em; margin-bottom:14px; }
.promo-section .section-intro { color:var(--sub); max-width:650px; margin:0 0 28px; }
.promise-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.promise-card { display:flex; flex-direction:column; padding:28px; border:1px solid var(--line); border-radius:15px; background:#fff; color:var(--ink); text-decoration:none; }
.promise-card .number { font-family:var(--serif); font-size:30px; color:var(--sprout-tx); margin-bottom:20px; }
.promise-card h3 { font-size:22px; line-height:1.5; margin-bottom:12px; }
.promise-card p { font-size:15px; color:var(--sub); margin:0 0 18px; }
.promise-card .go { margin-top:auto; color:var(--sprout-tx); font-size:14px; font-weight:700; }
.auto-journey { list-style:none; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin:30px 0 20px; padding:0; }
.auto-journey li { padding:22px 12px; background:var(--card-g); border:1px solid var(--line); border-radius:12px; text-align:center; position:relative; }
.auto-journey li:not(:last-child)::after { content:'→'; position:absolute; right:-13px; top:40%; color:var(--sprout-tx); z-index:1; }
.auto-journey small { display:block; color:var(--sprout-tx); font-size:11px; margin-bottom:6px; }
.auto-journey strong { font-family:var(--serif); font-size:19px; }
.quiet-copy { color:var(--sub); font-size:15px; max-width:720px; }
.course-overview { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.course-overview a { display:flex; flex-direction:column; padding:24px 20px; border:1px solid var(--line); border-radius:14px; background:#fff; color:var(--ink); text-decoration:none; }
.course-overview a:last-child { background:var(--card-g); border-color:#b9c9ae; }
.course-overview span { font-size:12px; color:var(--sprout-tx); margin-bottom:18px; font-weight:700; }
.course-overview h3 { font-size:20px; margin-bottom:12px; }
.course-overview p { font-size:14px; color:var(--sub); margin:0; }
.course-overview b { font-size:13px; color:var(--sprout-tx); margin-top:auto; padding-top:18px; }
.feature-pair { display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center; }
.feature-pair figure { margin:0; }
.feature-pair img { width:100%; max-height:450px; object-fit:contain; border:1px solid var(--line); background:white; border-radius:12px; }
.feature-pair figcaption { color:var(--sub); font-size:13px; margin-top:10px; }
.flow-preview { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.flow-preview a { text-decoration:none; color:var(--ink); border:1px solid var(--line); background:white; border-radius:14px; overflow:hidden; }
.flow-preview .flow-cover { height:210px; background:var(--promo-paper); overflow:hidden; display:flex; align-items:center; justify-content:center; }
.flow-cover img { width:100%; height:100%; object-fit:cover; }
.flow-preview .flow-copy { padding:24px; }
.flow-preview h3 { font-size:22px; margin-bottom:10px; }
.flow-preview p { margin:0; color:var(--sub); font-size:15px; }
.flow-preview .go { display:block; margin-top:16px; font-size:14px; color:var(--sprout-tx); font-weight:700; }
.flow-letter { font-family:var(--serif); font-size:30px; text-align:center; line-height:1.7; color:var(--promo-green); }
.promo-quote { font-family:var(--serif); font-size:clamp(23px,3vw,32px); text-align:center; line-height:1.8; max-width:780px; margin:0 auto 22px; }
.promo-quote + p { text-align:center; color:var(--sub); max-width:680px; margin:0 auto; }
.shot-pair { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.shot-pair figure { margin:0; padding:18px; background:#fff; border:1px solid var(--line); border-radius:14px; }
.shot-pair img { display:block; width:100%; height:250px; object-fit:contain; }
.shot-pair figcaption { font-size:14px; color:var(--sub); margin-top:14px; }
.promo-details { border:1px solid var(--line); padding:0 24px; border-radius:12px; background:white; margin-top:20px; }
.promo-details > summary { cursor:pointer; padding:18px 0; font-weight:700; }
.promo-details[open] { padding-bottom:22px; }
.promo-details .grid { margin-top:10px; }
.book-sec { padding-top:28px; }
.book-sec .sec-head { text-align:center; margin-bottom:28px; }
.book-sec .sec-head p { margin:auto; }
.bkview { gap:40px; }
.bk-spread { border-bottom:5px solid #d7c9ae; border-radius:8px; }
.bk-sheet::after { content:''; position:absolute; inset:0; pointer-events:none; }
.bk-sheet.left::after { background:linear-gradient(90deg,rgba(255,255,255,.16) 0%,transparent 80%,rgba(83,61,34,.10) 100%); }
.bk-sheet.right::after { background:linear-gradient(90deg,rgba(83,61,34,.10),transparent 20%,rgba(255,255,255,.13)); }
.bk-sheet.blank { display:flex; background:#faf6ec; }
.bk-end { font-size:clamp(11px,1.6vw,16px); }
.bk-end b { font-size:clamp(14px,2vw,24px); }
.bk-end .book-end-label { display:block; letter-spacing:.12em; font-family:var(--sans); font-size:11px; color:#8a7f68; margin-bottom:20px; }
.bk-end a { display:inline-block; margin-top:20px; color:#16512f; font-size:13px; }
.proof-book { max-width:750px; margin:auto; }
.proof-book .bkview { gap:0; }
.proof-book .bk-end { display:none; }
.post-proof { text-align:center; max-width:760px; margin:28px auto 0; color:var(--sub); }
.page-hero.promo-hero { border-bottom:0; }
.promo-section .grid-2 { align-items:start; }
@media(max-width:900px) {
 .course-overview { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .bk-spread { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; filter:drop-shadow(0 12px 15px rgba(74,62,51,.18)); }
 .bk-spread::after { display:block; width:24px; }
 .bk-sheet { width:100%; max-width:none; margin:0; box-shadow:none; }
 .bk-sheet.left { border-radius:7px 0 0 7px!important; }
 .bk-sheet.right { border-radius:0 7px 7px 0!important; }
 .bkview { gap:28px; }
 .bk-sheet.blank { display:flex; }
}
@media(max-width:680px) {
 .top-in { padding:12px 20px 8px!important; }
 .top-in > .brand { padding:0; }
 nav.main-nav { width:calc(100% + 40px)!important; margin:0 -20px; }
 .promo-hero { padding:42px 0 24px; }
 .promo-hero h1 { font-size:30px; }
 .promo-hero .lead { font-size:15px; }
 .promo-proof { padding-bottom:40px; }
 .proof-frame { padding:18px 12px; border-radius:14px; }
 .proof-heading { align-items:flex-start; flex-direction:column; gap:5px; }
 .result-grid,.promise-grid,.flow-preview,.feature-pair,.shot-pair { grid-template-columns:1fr; }
 .promo-section { padding:42px 0; }
 .auto-journey { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
 .auto-journey li:nth-child(3)::after { display:none; }
 .auto-journey li { padding:16px 7px; }
 .auto-journey strong { font-size:17px; }
 .course-overview a { padding:20px 14px; }
 .course-overview h3 { font-size:18px; }
 .proof-caption { font-size:15px; }
 .bk-end { padding:0 10%; font-size:10px; line-height:1.7; }
 .bk-end b { font-size:14px; }
 .bk-end .book-end-label { font-size:8px; margin-bottom:8px; }
 .bk-end a { margin-top:8px; font-size:10px; }
 .book-note { font-size:12px; }
}

/* 페이퍼아트 설명 이미지와 실제 화면 */
.paper-scene{margin:28px auto 36px;max-width:940px}.paper-scene img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:18px;border:1px solid #e8e0d0}.paper-scene figcaption,.orev-screen figcaption{margin-top:12px;text-align:center;font-size:14px;color:var(--sub);line-height:1.7}.paper-card{margin:16px 0 20px}.paper-card img{border-radius:12px}.paper-card figcaption{display:none}.syllabus-card>.paper-scene{max-width:790px;padding:0 24px}.stage-body>.paper-scene{max-width:850px}.orev-screen{margin:32px auto;max-width:1120px}.orev-screen img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 35px #342e2112}.proof-frame>.orev-screen{margin:0}.promise-card .paper-scene{padding:0}@media(max-width:680px){.paper-scene{margin:22px auto 28px}.paper-scene img{border-radius:12px}.syllabus-card>.paper-scene{padding:0 12px}.paper-scene figcaption,.orev-screen figcaption{font-size:12px}.orev-screen{margin:24px auto}}

@media(max-width:680px){
.bk-spread{grid-template-columns:1fr!important;gap:18px!important}
.bk-sheet.blank{display:none!important}
.bk-sheet{border-radius:10px!important;width:100%!important}
.bkview{gap:18px!important}
}