@import url('https://rsms.me/inter/inter.css');

:root {
  --bg:#0e1512; --stage:#fafafa; --surface:#fff; --well:#f4f4f5;
  --ink:#18181b; --body:#3f3f46; --muted:#71717a; --faint:#a1a1aa;
  --accent:#14b8a6; --accent-ink:#0a5f58; --accent-2:#0d7d74;
  --accent-soft:#e6f4f2; --accent-ring:rgba(13,125,116,.28);
  --m1:#0d7d74; --m1-soft:#e6f4f2; --m2:#b45309; --m2-soft:#fbeee0;
  --warn:#b45309; --warn-soft:#fdf3e7;
  --hair:rgba(24,24,27,.10); --hair2:rgba(24,24,27,.06);
  --radius:14px; --radius-sm:9px;
  --shadow:0 1px 2px rgba(24,24,27,.05), 0 18px 50px -24px rgba(24,24,27,.35);
}
*{box-sizing:border-box;} html,body{height:100%;}
body{margin:0;font-family:'Inter',system-ui,-apple-system,'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',sans-serif;
  font-feature-settings:'cv11','ss01';background:var(--stage);color:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;}
@supports(font-variation-settings:normal){body{font-family:'Inter var',system-ui,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;}}
a{color:var(--accent-ink);text-decoration:none;} a:hover{text-decoration:underline;text-underline-offset:2px;}
h1,h2,h3,h4{color:var(--ink);font-weight:600;letter-spacing:-0.015em;line-height:1.25;margin:0;}
p{margin:0 0 0.9rem;text-wrap:pretty;} strong{font-weight:600;color:var(--ink);}
code:not(pre code){font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.88em;background:var(--well);color:var(--accent-ink);padding:.1rem .35rem;border-radius:5px;}

.deck{height:100dvh;display:flex;flex-direction:column;overflow:hidden;}
.deck-bar{flex:none;display:flex;align-items:center;gap:1rem;padding:.7rem 1.1rem;color:#e8ecea;
  background:linear-gradient(180deg,#10201c 0%,#0e1512 100%);border-bottom:1px solid rgba(255,255,255,.07);}
.deck-brand{display:flex;align-items:center;gap:.6rem;color:#fff;font-weight:600;font-size:14px;}
.deck-brand:hover{text-decoration:none;}
.deck-brand .logo{width:28px;height:28px;border-radius:8px;flex:none;background:linear-gradient(135deg,var(--accent) 0%,var(--accent-2) 100%);
  color:#052e2a;display:grid;place-items:center;font-size:12px;font-weight:800;letter-spacing:-0.03em;}
.deck-brand .mod-tag{font-size:11px;font-weight:700;letter-spacing:.04em;padding:.15rem .5rem;border-radius:999px;margin-left:.15rem;}
.deck.m1 .mod-tag{background:rgba(20,184,166,.18);color:#5eead4;}
.deck.m2 .mod-tag{background:rgba(245,158,11,.18);color:#fcd34d;}
.deck-title{font-size:13.5px;color:#cdd5d2;font-weight:500;margin-left:.25rem;}
@media(max-width:680px){.deck-title{display:none;}}
.deck-tools{margin-left:auto;display:flex;align-items:center;gap:.4rem;}
.tool-btn{display:inline-flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.06);color:#dce3e0;
  border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:.4rem .65rem;font-size:13px;font-weight:500;cursor:pointer;transition:background .15s ease;}
.tool-btn:hover{background:rgba(255,255,255,.12);text-decoration:none;color:#fff;}
.tool-btn svg{width:15px;height:15px;}
#counter{font-variant-numeric:tabular-nums;min-width:52px;text-align:center;}
.deck-progress{flex:none;height:3px;background:rgba(255,255,255,.06);}
#bar{height:100%;width:0;background:linear-gradient(90deg,var(--accent-2),var(--accent));transition:width .35s cubic-bezier(.4,0,.2,1);}
.deck.m2 #bar{background:linear-gradient(90deg,#b45309,#f59e0b);}
.stage{position:relative;flex:1;overflow:hidden;background:var(--stage);}

.slide{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  display:block;
  opacity:0;visibility:hidden;transform:translateX(24px);transition:opacity .38s ease,transform .38s ease,visibility .38s;}
.slide.active{opacity:1;visibility:visible;transform:translateX(0);position:relative;}
.slide.prev{transform:translateX(-24px);}
.slide-inner{width:100%;max-width:60rem;margin-inline:auto;padding:clamp(1.75rem,4vw,3.5rem) clamp(1.5rem,5vw,4rem) 1.5rem;}
.slide-foot{max-width:60rem;margin-inline:auto;width:100%;padding:.75rem clamp(1.5rem,5vw,4rem) calc(1.25rem + env(safe-area-inset-bottom,0px));
  display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--faint);border-top:1px solid var(--hair2);}
.foot-num{font-variant-numeric:tabular-nums;}
.s-kicker{display:inline-flex;align-items:center;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-2);margin-bottom:.85rem;}
.deck.m2 .s-kicker{color:var(--m2);}
.s-title{font-size:clamp(1.5rem,3.4vw,2.35rem);letter-spacing:-0.025em;text-wrap:balance;max-width:24ch;}
.slide-body{margin-top:1.25rem;} .slide-body>*:first-child{margin-top:0;}
.slide-body p{color:var(--body);}
.s-lead{font-size:clamp(1.05rem,2vw,1.3rem);color:var(--body);max-width:54ch;}
.slide-body h3{font-size:1.15rem;margin:1.5rem 0 .5rem;letter-spacing:-0.01em;}
.slide-body ul,.slide-body ol{padding-left:1.2rem;margin:.5rem 0 1rem;color:var(--body);}
.slide-body li{margin-bottom:.4rem;} .slide-body li::marker{color:var(--faint);}

.slide-cover .slide-inner{display:flex;flex-direction:column;justify-content:center;min-height:calc(100dvh - 220px);
  background:radial-gradient(760px 340px at 12% 6%,var(--accent-soft) 0%,transparent 60%),var(--stage);}
.deck.m2 .slide-cover .slide-inner{background:radial-gradient(760px 340px at 12% 6%,var(--m2-soft) 0%,transparent 60%),var(--stage);}
.cover-badge{display:inline-flex;align-items:center;gap:.45rem;width:fit-content;font-size:12.5px;font-weight:700;letter-spacing:.03em;
  padding:.4rem .8rem;border-radius:999px;margin-bottom:1.4rem;background:var(--accent-soft);color:var(--accent-2);box-shadow:inset 0 0 0 1px var(--accent-ring);}
.deck.m2 .cover-badge{background:var(--m2-soft);color:var(--m2);box-shadow:inset 0 0 0 1px rgba(180,83,9,.28);}
.slide-cover h1{font-size:clamp(2rem,5.5vw,3.4rem);letter-spacing:-0.03em;line-height:1.12;max-width:20ch;color:var(--ink);font-weight:600;}
.cover-lead{font-size:clamp(1.05rem,2vw,1.25rem);color:var(--body);max-width:52ch;margin-top:1.2rem;}
.cover-meta{display:flex;flex-wrap:wrap;gap:.5rem 1.75rem;margin-top:2rem;font-size:14px;color:var(--muted);}
.cover-meta span{display:inline-flex;align-items:center;gap:.5rem;} .cover-meta svg{width:16px;height:16px;color:var(--accent-2);}
.deck.m2 .cover-meta svg{color:var(--m2);}
.cover-hint{margin-top:2.5rem;font-size:13px;color:var(--faint);display:inline-flex;align-items:center;gap:.5rem;}
.cover-hint kbd{font-family:inherit;font-size:11px;font-weight:600;color:var(--body);background:var(--surface);
  border:1px solid var(--hair);border-bottom-width:2px;border-radius:6px;padding:.1rem .4rem;}

.tbl-wrap{overflow-x:auto;margin:1rem 0 1.25rem;border-radius:var(--radius-sm);}
table.data{width:100%;border-collapse:collapse;font-size:14px;min-width:440px;}
table.data th,table.data td{text-align:left;padding:.6rem .8rem;vertical-align:top;border-bottom:1px solid var(--hair2);}
table.data thead th{font-weight:600;color:var(--ink);font-size:13px;border-bottom:1.5px solid var(--hair);white-space:nowrap;}
table.data tbody tr:hover{background:var(--well);} table.data td strong{color:var(--ink);}
.steps{display:grid;gap:.7rem;margin:1rem 0 1.25rem;}
.step{display:flex;gap:.85rem;align-items:flex-start;}
.step-n{flex:none;width:26px;height:26px;border-radius:8px;background:var(--accent-soft);color:var(--accent-2);
  display:grid;place-items:center;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;}
.deck.m2 .step-n{background:var(--m2-soft);color:var(--m2);}
.step>div{padding-top:2px;font-size:14.5px;color:var(--body);}
.prompt{margin:1rem 0 1.25rem;background:#1b1b1f;border-radius:var(--radius-sm);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);}
.prompt-head{display:flex;align-items:center;justify-content:space-between;padding:.5rem .6rem .5rem .9rem;border-bottom:1px solid rgba(255,255,255,.08);}
.prompt-head .label{font-size:11.5px;font-weight:600;letter-spacing:.04em;color:#a1a1aa;text-transform:uppercase;display:inline-flex;align-items:center;gap:.4rem;}
.prompt-head .label svg{width:13px;height:13px;}
.copy-btn{display:inline-flex;align-items:center;gap:.35rem;background:rgba(255,255,255,.08);color:#d4d4d8;border:none;border-radius:6px;cursor:pointer;font-size:12px;font-weight:500;padding:.32rem .55rem;transition:background .15s ease,color .15s ease;}
.copy-btn:hover{background:rgba(255,255,255,.16);color:#fff;} .copy-btn svg{width:13px;height:13px;} .copy-btn.done{color:#6ee7b7;}
.prompt pre{margin:0;padding:1rem 1.1rem;overflow-x:auto;font-family:ui-monospace,'SF Mono','JetBrains Mono',Menlo,Consolas,monospace;font-size:13px;line-height:1.65;color:#e4e4e7;white-space:pre-wrap;word-break:break-word;}
.callout{display:flex;gap:.7rem;margin:1rem 0;padding:.85rem 1.05rem;border-radius:var(--radius-sm);font-size:14.5px;line-height:1.55;}
.callout .c-ico{flex:none;margin-top:1px;} .callout .c-ico svg{width:18px;height:18px;}
.callout p{margin:0;} .callout p+p{margin-top:.5rem;} .callout strong{color:inherit;}
.callout.tip{background:var(--accent-soft);color:var(--accent-ink);} .callout.tip .c-ico{color:var(--accent-2);}
.callout.warn{background:var(--warn-soft);color:#7c4a06;} .callout.warn .c-ico{color:var(--warn);}
.callout.expect{background:var(--well);color:var(--body);} .callout.expect .c-ico{color:#16a34a;}
.practice{border:1px solid var(--hair);border-left:3px solid var(--accent-2);border-radius:var(--radius);padding:1.15rem 1.3rem;margin:1.4rem 0;background:var(--surface);}
.deck.m2 .practice{border-left-color:var(--m2);}
.practice-tag{display:inline-flex;align-items:center;gap:.4rem;font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--accent-2);background:var(--accent-soft);padding:.28rem .6rem;border-radius:999px;margin-bottom:.7rem;}
.deck.m2 .practice-tag{color:var(--m2);background:var(--m2-soft);} .practice-tag svg{width:13px;height:13px;}
.practice h4{margin:0 0 .6rem;font-size:1.05rem;}
.s-files{display:grid;gap:.7rem;margin:1.1rem 0;}
.s-file{display:flex;align-items:center;gap:.9rem;background:var(--surface);border:1px solid var(--hair2);border-radius:var(--radius-sm);padding:.85rem 1rem;transition:box-shadow .18s ease,border-color .18s ease,transform .18s ease;}
.s-file:hover{box-shadow:var(--shadow);border-color:var(--hair);text-decoration:none;transform:translateY(-1px);}
.s-file-ico{width:42px;height:42px;border-radius:9px;flex:none;display:grid;place-items:center;font-weight:800;font-size:11px;color:#fff;letter-spacing:-0.02em;}
.s-file-ico.pdf{background:#c0392b;} .s-file-ico.xlsx{background:#1e7145;} .s-file-ico.docx{background:#2b579a;}
.s-file-meta{min-width:0;flex:1;display:flex;flex-direction:column;}
.s-file-meta .nm{font-weight:600;color:var(--ink);font-size:14.5px;} .s-file-meta .use{font-size:12.5px;color:var(--muted);margin-top:1px;}
.s-file-arrow{width:17px;height:17px;color:var(--accent-2);flex:none;}

.deck-nav{flex:none;display:flex;align-items:center;gap:1rem;padding:.6rem 1.1rem;background:#0e1512;border-top:1px solid rgba(255,255,255,.07);}
.nav-arrow{display:inline-flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.06);color:#e8ecea;border:1px solid rgba(255,255,255,.09);border-radius:9px;padding:.5rem .85rem;font-size:13.5px;font-weight:500;cursor:pointer;transition:background .15s ease,opacity .15s ease;}
.nav-arrow:hover:not(:disabled){background:rgba(255,255,255,.13);} .nav-arrow:disabled{opacity:.35;cursor:not-allowed;} .nav-arrow svg{width:16px;height:16px;}
.nav-arrow.primary{background:var(--accent-2);border-color:transparent;color:#fff;} .nav-arrow.primary:hover:not(:disabled){background:#0a6b63;}
.deck.m2 .nav-arrow.primary{background:var(--m2);} .deck.m2 .nav-arrow.primary:hover:not(:disabled){background:#92400e;}
.dots{display:flex;gap:.4rem;margin-inline:auto;flex-wrap:wrap;justify-content:center;max-width:60%;}
.dot{width:8px;height:8px;border-radius:999px;border:none;padding:0;background:rgba(255,255,255,.2);cursor:pointer;transition:background .15s ease,transform .15s ease;}
.dot:hover{background:rgba(255,255,255,.4);} .dot.active{background:var(--accent);transform:scale(1.35);}
.deck.m2 .dot.active{background:#f59e0b;}
@media(max-width:680px){.dots{display:none;}}

.menu{position:absolute;top:0;right:0;bottom:0;width:min(340px,84vw);z-index:60;background:var(--surface);box-shadow:-20px 0 50px -20px rgba(0,0,0,.4);transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);overflow-y:auto;}
.menu.open{transform:translateX(0);}
.menu-head{position:sticky;top:0;background:var(--surface);padding:1.1rem 1.25rem .75rem;border-bottom:1px solid var(--hair2);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);}
.sec-item{display:flex;align-items:center;gap:.7rem;width:100%;text-align:left;background:none;border:none;border-bottom:1px solid var(--hair2);padding:.7rem 1.25rem;font-size:14px;color:var(--body);cursor:pointer;font-family:inherit;transition:background .12s ease;}
.sec-item:hover{background:var(--well);} .sec-item.active{color:var(--accent-2);background:var(--accent-soft);font-weight:600;}
.deck.m2 .sec-item.active{color:var(--m2);background:var(--m2-soft);}
.sec-n{font-size:11.5px;font-weight:700;color:var(--faint);font-variant-numeric:tabular-nums;flex:none;} .sec-item.active .sec-n{color:inherit;}

@media(max-width:560px){.slide-inner{padding:1.5rem 1.25rem 1.25rem;} .nav-arrow span.txt{display:none;} .nav-arrow{padding:.5rem .7rem;}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;} .slide{transform:none!important;}}

.lp{background:var(--stage);min-height:100dvh;}
.lp-nav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--hair);}
.lp-nav-inner{max-width:68rem;margin-inline:auto;padding:.7rem 1.5rem;display:flex;align-items:center;gap:1rem;}
.lp-brand{display:flex;align-items:center;gap:.6rem;font-weight:600;color:var(--ink);} .lp-brand:hover{text-decoration:none;}
.lp-brand .logo{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--accent) 0%,var(--accent-2) 100%);color:#052e2a;display:grid;place-items:center;font-size:13px;font-weight:800;letter-spacing:-0.03em;}
.lp-brand small{display:block;font-size:11px;color:var(--muted);font-weight:500;}
.lp-links{margin-left:auto;display:flex;align-items:center;gap:.4rem;}
.lp-links a{color:var(--body);font-size:14px;font-weight:500;padding:.4rem .7rem;border-radius:8px;} .lp-links a:hover{background:var(--well);text-decoration:none;color:var(--ink);}
.container{max-width:68rem;margin-inline:auto;padding-inline:1.5rem;} .lp-section{padding-block:3.5rem;}
.lp-hero{position:relative;overflow:hidden;background:radial-gradient(1100px 380px at 15% -10%,var(--accent-soft) 0%,transparent 62%),linear-gradient(180deg,#fff 0%,var(--stage) 100%);border-bottom:1px solid var(--hair);}
.lp-hero-inner{padding-block:4.5rem 3.5rem;}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--accent-2);background:var(--accent-soft);padding:.35rem .7rem;border-radius:999px;box-shadow:inset 0 0 0 1px var(--accent-ring);margin-bottom:1.25rem;}
.eyebrow svg{width:14px;height:14px;}
.lp-hero h1{font-size:clamp(2rem,5vw,3.1rem);letter-spacing:-0.03em;line-height:1.12;max-width:20ch;}
.lp-hero .lead{font-size:clamp(1.05rem,2vw,1.2rem);color:var(--body);max-width:58ch;margin-top:1.1rem;}
.lp-meta{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;margin-top:1.75rem;font-size:14px;color:var(--muted);}
.lp-meta span{display:inline-flex;align-items:center;gap:.45rem;} .lp-meta svg{width:16px;height:16px;color:var(--accent-2);}
.lp-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem;}
.btn{display:inline-flex;align-items:center;gap:.5rem;font-size:14px;font-weight:500;line-height:1;padding:.7rem 1.05rem;border-radius:9px;border:1px solid transparent;cursor:pointer;transition:background-color .18s ease;}
.btn svg{width:16px;height:16px;flex:none;}
.btn-primary{background:var(--accent-2);color:#fff;} .btn-primary:hover{background:#0a6b63;text-decoration:none;}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--hair);} .btn-ghost:hover{background:var(--well);text-decoration:none;}
.btn:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px;}
.sec-head{margin-bottom:1.75rem;}
.sec-head .kicker{font-size:13px;font-weight:600;color:var(--accent-2);letter-spacing:.03em;text-transform:uppercase;margin-bottom:.5rem;}
.sec-head h2{font-size:clamp(1.5rem,3vw,2rem);max-width:30ch;} .sec-head p{color:var(--muted);margin-top:.6rem;max-width:62ch;}
.module-grid{display:grid;gap:1.25rem;grid-template-columns:repeat(2,1fr);}
@media(max-width:760px){.module-grid{grid-template-columns:1fr;}}
.module-card{position:relative;background:var(--surface);border-radius:var(--radius);border:1px solid var(--hair2);padding:1.75rem;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease;box-shadow:0 1px 2px rgba(24,24,27,.04);}
.module-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);text-decoration:none;}
.module-card.m1{border-top:3px solid var(--m1);} .module-card.m2{border-top:3px solid var(--m2);}
.module-card .tag{display:inline-flex;align-items:center;font-size:12px;font-weight:700;letter-spacing:.02em;padding:.3rem .65rem;border-radius:999px;width:fit-content;}
.module-card.m1 .tag{background:var(--m1-soft);color:var(--m1);} .module-card.m2 .tag{background:var(--m2-soft);color:var(--m2);}
.module-card h3{font-size:1.3rem;margin-top:.9rem;} .module-card .desc{color:var(--muted);font-size:14.5px;margin-top:.5rem;}
.module-card ul.goals{list-style:none;padding:0;margin:1.1rem 0 1.4rem;display:grid;gap:.5rem;}
.module-card ul.goals li{position:relative;padding-left:1.4rem;font-size:14px;color:var(--body);}
.module-card ul.goals li::before{content:'';position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:2px;}
.module-card.m1 ul.goals li::before{background:var(--m1);} .module-card.m2 ul.goals li::before{background:var(--m2);}
.module-card .go{margin-top:auto;display:inline-flex;align-items:center;gap:.4rem;font-weight:600;font-size:14px;}
.module-card.m1 .go{color:var(--m1);} .module-card.m2 .go{color:var(--m2);}
.module-card .go svg{width:16px;height:16px;transition:transform .2s ease;} .module-card:hover .go svg{transform:translateX(3px);}
.feature-grid{display:grid;gap:1.5rem 2rem;grid-template-columns:repeat(3,1fr);}
@media(max-width:860px){.feature-grid{grid-template-columns:1fr;}}
.feature .ico{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:var(--accent-2);background:var(--accent-soft);margin-bottom:.9rem;}
.feature .ico svg{width:20px;height:20px;} .feature h4{font-size:1.05rem;} .feature p{color:var(--muted);font-size:14.5px;margin-top:.4rem;margin-bottom:0;}
.files-band{background:var(--well);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);}
.file-list{display:grid;gap:.75rem;}
.file-row{display:flex;align-items:center;gap:1rem;background:var(--surface);border:1px solid var(--hair2);border-radius:var(--radius-sm);padding:1rem 1.25rem;transition:box-shadow .18s ease,border-color .18s ease;}
.file-row:hover{box-shadow:var(--shadow);border-color:var(--hair);}
.file-ico{width:44px;height:44px;border-radius:10px;flex:none;display:grid;place-items:center;font-weight:800;font-size:12px;color:#fff;letter-spacing:-0.02em;}
.file-ico.pdf{background:#c0392b;} .file-ico.xlsx{background:#1e7145;} .file-ico.docx{background:#2b579a;}
.file-meta{min-width:0;flex:1;} .file-meta .name{font-weight:600;color:var(--ink);font-size:15px;} .file-meta .sub{font-size:13px;color:var(--muted);margin-top:2px;}
.file-row .btn{flex:none;} .file-row.missing{opacity:.72;} .file-row.missing .file-ico{background:var(--faint);}
.lp-footer{border-top:1px solid var(--hair);background:var(--surface);}
.lp-footer-inner{display:flex;flex-wrap:wrap;gap:1.5rem 2rem;justify-content:space-between;align-items:flex-end;padding-block:2.25rem;font-size:13px;color:var(--muted);}
.lp-footer-brand{display:flex;align-items:center;gap:.6rem;font-weight:600;color:var(--ink);font-size:15px;margin-bottom:.5rem;}
.lp-footer-desc{color:var(--muted);}
.lp-footer-corp{text-align:right;line-height:1.7;color:var(--faint);}
@media(max-width:640px){.lp-footer-corp{text-align:left;}}


/* ── 2026-09 추가: 과정 허브 · 에이전트 카드 · 접기 · 교차링크 · 글자 크기 ── */

/* 글자 크기 3단 (빔프로젝터) */
:root[data-size="lg"] .slide-body { font-size: 1.09em; }
:root[data-size="xl"] .slide-body { font-size: 1.2em; }
:root[data-size="lg"] .s-title { font-size: 1.06em; }
:root[data-size="xl"] .s-title { font-size: 1.14em; }
.size-ctl { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.size-ctl .lbl { font-size: 11px; opacity: .55; margin-right: 2px; }
.size-ctl button { font: inherit; font-size: 12px; padding: 4px 9px; border-radius: 7px;
  border: 1px solid rgba(255,255,255,.18); background: transparent; color: inherit; cursor: pointer; }
.size-ctl button.active { background: rgba(255,255,255,.16); border-color: transparent; }
@media (max-width: 720px) { .size-ctl { display: none; } }

/* 에이전트 설정 카드 */
.agent-card { border: 1px solid var(--line, #e3e5ea); border-radius: 12px; overflow: hidden; margin: 14px 0; }
.ac-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 13px; background: #f6f7f9; border-bottom: 1px solid var(--line, #e3e5ea); }
.ac-head .label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; letter-spacing: -.01em; }
.ac-head .label svg { width: 15px; height: 15px; }
.ac-spec { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ac-spec th { width: 92px; text-align: left; padding: 8px 13px; background: #fbfbfc;
  font-weight: 600; color: #5b6070; border-bottom: 1px solid #eef0f3; vertical-align: top; }
.ac-spec td { padding: 8px 13px; border-bottom: 1px solid #eef0f3; }
.ac-spec tr:last-child th, .ac-spec tr:last-child td { border-bottom: 0; }
.agent-card .prompt { margin: 0; border: 0; border-top: 1px solid var(--line, #e3e5ea); border-radius: 0; }

/* 접기 — 결과 예시 · 막히는 지점 */
.fold { border: 1px solid var(--line, #e3e5ea); border-radius: 10px; margin: 12px 0; background: #fcfcfd; }
.fold > summary { cursor: pointer; padding: 10px 14px; font-size: 13.5px; font-weight: 650;
  list-style: none; display: flex; align-items: center; gap: 8px; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: "▸"; font-size: 11px; opacity: .5; transition: transform .15s; }
.fold[open] > summary::before { transform: rotate(90deg); }
.fold[open] > summary { border-bottom: 1px solid #eef0f3; }
.fold-body { padding: 4px 14px 12px; }

/* 다른 과정으로 보내는 링크 */
.xref { border-left: 3px solid #8b93a7; background: #f7f8fa; border-radius: 0 9px 9px 0;
  padding: 11px 14px; margin: 14px 0; }
.xref-tag { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  color: #6b7183; margin-bottom: 6px; }
.xref ul { margin: 0; padding-left: 17px; font-size: 13.5px; }
.xref li { margin: 3px 0; }
.xref a { color: #2f3646; text-underline-offset: 3px; }

/* 과정 허브 */
.hub-wrap { max-width: 960px; margin: 0 auto; padding: 64px 22px 80px;
  background: var(--stage); min-height: 100dvh; }
.hub-h1 { font-size: 30px; letter-spacing: -.03em; margin: 0 0 6px; }
.hub-sub { color: #6b7183; font-size: 14.5px; margin: 0 0 40px; }
.hub-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.hub-card { display: block; border: 1px solid var(--line, #e3e5ea); border-radius: 14px;
  padding: 22px 22px 24px; text-decoration: none; color: inherit; background: #fff;
  transition: border-color .15s, transform .15s, box-shadow .15s; }
a.hub-card:hover { border-color: #b9bfcd; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(20,25,40,.07); }
.hub-card .state { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  padding: 3px 9px; border-radius: 999px; margin-bottom: 11px; }
.state.done { background: #eef1f5; color: #6b7183; }
.state.next { background: #1f2633; color: #fff; }
.state.soon { background: #f4f5f7; color: #9aa0ad; }
.hub-card h2 { font-size: 19px; letter-spacing: -.02em; margin: 0 0 5px; }
.hub-card .when { font-size: 12.5px; color: #8b91a0; margin-bottom: 11px; }
.hub-card p { font-size: 13.5px; line-height: 1.62; color: #545a68; margin: 0; }
.hub-card.soon { opacity: .62; }
.hub-note { margin-top: 40px; border-left: 3px solid #c9cedb; background: #f8f9fb;
  padding: 15px 18px; border-radius: 0 10px 10px 0; font-size: 13.5px; line-height: 1.68; color: #4c5262; }
.hub-files { margin-top: 34px; }
.hub-files h3 { font-size: 14px; margin: 0 0 10px; color: #6b7183; letter-spacing: -.01em; }


/* ── 스크롤 수정 ──────────────────────────────────────────
   .slide.active 가 position:relative 로 바뀌면서 inset:0 이 풀려
   내용이 stage 높이를 넘어도 잘리기만 하고 스크롤되지 않던 문제. */
.stage{ overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
.slide.active{ min-height:100%; overflow:visible; }
.stage::-webkit-scrollbar{ width:10px; }
.stage::-webkit-scrollbar-thumb{ background:rgba(20,25,40,.18); border-radius:99px;
  border:3px solid transparent; background-clip:content-box; }
.stage::-webkit-scrollbar-thumb:hover{ background:rgba(20,25,40,.3); background-clip:content-box; }
.stage{ scrollbar-width:thin; scrollbar-color:rgba(20,25,40,.22) transparent; }

/* 화면이 낮을 때 여백을 줄여 한 화면에 더 들어가게 */
@media (max-height: 780px){
  .slide-inner{ padding-top:1.4rem; padding-bottom:1rem; }
  .s-title{ font-size:clamp(1.35rem,2.8vw,1.9rem); }
  .slide-body{ margin-top:.9rem; }
  .slide-cover .slide-inner{ min-height:calc(100dvh - 200px); }
}
@media (max-height: 620px){
  .slide-inner{ padding-top:1rem; }
  .slide-foot{ display:none; }
}


/* 도해 */
.fig{ margin:1.1rem 0 1.3rem; }
.fig img{ display:block; width:100%; max-width:760px; height:auto; cursor:zoom-in;
  border:1px solid var(--hair); border-radius:var(--radius-sm); background:#fff; }
.fig img.shot{ max-width:100%; max-height:50vh; width:auto; margin:0 auto;
  box-shadow:0 2px 14px rgba(16,24,32,.10); }
@media (max-height: 780px){ .fig img.shot{ max-height:44vh; } }
.fig figcaption{ margin-top:.55rem; font-size:12.5px; color:var(--faint); }
:root[data-size="xl"] .fig img{ max-width:100%; }
dialog.lightbox{ border:0; padding:0; background:transparent; max-width:94vw; max-height:92vh; }
dialog.lightbox::backdrop{ background:rgba(12,16,22,.72); }
dialog.lightbox img{ max-width:94vw; max-height:92vh; border-radius:10px; background:#fff; cursor:zoom-out; }


/* 로고 — img/logo.svg 또는 logo.png 를 넣으면 표시됩니다 (없으면 자동으로 숨김) */
.brandmark{ height:19px; width:auto; margin-right:10px; vertical-align:middle; opacity:.95; }
.hub-logo{ display:block; height:30px; width:auto; margin:0 0 18px; }
@media (max-width:720px){ .brandmark{ height:17px; margin-right:6px; } }
.slide-cover .cover-logo{ height:26px; width:auto; margin-bottom:20px; opacity:.85; }

/* 밝은 배경(허브·표지)에서는 흰색 로고를 검게 */
.hub-logo, .slide-cover .cover-logo{ filter:brightness(0); opacity:.86; }

/* 허브는 문서 흐름대로 스크롤 */
html:has(.hub-wrap), body:has(.hub-wrap){ height:auto; min-height:100%; overflow-y:auto; }