/* 홈 랜딩 추가분(2026-11-01 대표님 「인터렉티브 강화」 · 「스크롤 다운할 때도 효과」 · 「주요 기능을 굉장히 상세하게」).
   접두어 lx- — portal.css 의 짧은 전역 클래스와 겹치지 않게. 움직임은 전부 prefers-reduced-motion 을 존중하고, 숨김은 JS 가 붙인 lx-rv 에서만 일어난다(JS 가 죽어도 본문은 보인다). */
.pub .lx-top{position:fixed;left:0;top:0;z-index:90;height:3px;width:100%;background:var(--brand);transform:scaleX(var(--p,0));transform-origin:0 50%;pointer-events:none}

/* 파란 동그라미 위 번호는 흰색(2026-11-01 대표님 「숫자가 잘 안 보여」) */
.pub .scene .n{color:var(--paper)}

/* 스크롤 등장 */
.pub .lx-rv{opacity:0;translate:0 26px;transition:opacity .6s cubic-bezier(.2,.8,.2,1) var(--dl,0s),translate .6s cubic-bezier(.2,.8,.2,1) var(--dl,0s),scale .7s cubic-bezier(.2,.8,.2,1) var(--dl,0s)}
.pub .pfig.lx-rv{scale:.96}
.pub .lx-rv.lx-in{opacity:1;translate:0 0;scale:1}

/* 첫 그림 — 커서와 스크롤에 따라 겹이 다르게 움직인다 */
.pub .pfig.hero img{translate:calc(var(--mx,0)*-6px) calc(var(--sy,0)*.05px + var(--my,0)*-5px);transition:translate .18s ease-out}
.pub .pfig.hero .plive{translate:calc(var(--mx,0)*8px) calc(var(--my,0)*6px);transition:translate .18s ease-out}
.pub .pfig.hero .pphone{translate:calc(var(--mx,0)*14px) calc(var(--sy,0)*-.07px + var(--my,0)*10px);transition:translate .18s ease-out}
.pub .pphone .pr i{display:inline-flex;gap:0;letter-spacing:0}
.pub .pphone .pr{position:relative;cursor:pointer}
.pub .pphone .pr::before{content:"";position:absolute;inset:-4px 0}   /* 줄 전체가 누름 칸(44px 높이) — 눌린 자리에서 가까운 별로 친다 */
.pub .lx-star{position:relative;appearance:none;border:0;background:none;padding:0 .5px;margin:0;font:inherit;line-height:1;color:var(--line);cursor:pointer;transition:color .12s,scale .12s}
.pub .lx-star.on{color:var(--link)}
.pub .lx-star:hover{scale:1.3}
.pub button.pok::after{content:"";position:absolute;inset:-5px 0}   /* 모양은 그대로, 누름 칸만 44px */
.pub button.pok{position:relative;display:block;width:100%;border:0;font:inherit;font-weight:800;cursor:pointer}
.pub .pphone .pok.sent{background:var(--brand-ink)}
.pub .lx-jump{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.pub .lx-jump button{appearance:none;display:inline-flex;align-items:center;gap:5px;min-height:34px;padding:5px 11px;border:1px solid var(--line);border-radius:8px;background:var(--paper);font:inherit;font-size:.85rem;font-weight:700;color:var(--ink);cursor:pointer;transition:border-color .12s,color .12s,translate .12s}
.pub .lx-jump button:hover{border-color:var(--brand);color:var(--link);translate:0 -2px}
.pub .lx-jump svg{width:14px;height:14px}

/* 강사의 고민 */
.pub .lx-pains{display:grid;gap:12px;margin-top:22px}
.pub .lx-pain{padding:18px 18px 16px;border:1px solid var(--line);border-radius:10px;background:var(--paper);transition:border-color .15s,box-shadow .15s}
.pub .lx-pain:hover{border-color:var(--brand);box-shadow:0 10px 26px rgba(30,35,64,.09)}
.pub .lx-pain h3{display:flex;gap:8px;align-items:flex-start;font-size:1.04rem;line-height:1.4;margin:0}
.pub .lx-pain h3 svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--link)}
.pub .lx-pain p{margin:8px 0 0;font-size:.96rem;line-height:1.6;color:var(--ink-soft)}
.pub .lx-pain .lx-ans{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);color:var(--ink)}
.pub .lx-pain .lx-ans b{color:var(--link)}

/* AI */
.pub .lx-ai{display:grid;gap:22px;align-items:start}
.pub .lx-models{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.pub .lx-models span{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:8px;background:var(--brand-ink);color:var(--paper);font-size:.9rem;font-weight:800}
.pub .lx-models svg{width:15px;height:15px}
.pub .lx-does{display:grid;gap:10px;margin-top:18px}
.pub .lx-does div{display:flex;gap:10px;align-items:flex-start;font-size:.97rem;line-height:1.55;color:var(--ink-soft)}
.pub .lx-does svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--link)}
.pub .lx-does b{color:var(--ink)}
.pub .lx-term{border:1px solid var(--line);border-radius:10px;background:var(--paper);padding:16px;box-shadow:0 14px 34px rgba(30,35,64,.1)}
.pub .lx-term-h{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.84rem;font-weight:800;color:var(--ink-soft);margin-bottom:10px}
.pub .lx-term-in{padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:.95rem;font-weight:600;color:var(--ink);min-height:44px}
.pub .lx-caret{display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-2px;background:var(--brand);animation:lxCaret 1s steps(1) infinite}
@keyframes lxCaret{50%{opacity:0}}
.pub .lx-log{margin:12px 0 0;padding:0;list-style:none;font-size:.9rem;min-height:92px}
.pub .lx-log li{display:flex;gap:7px;align-items:center;padding:3px 0;color:var(--ink-soft)}
.pub .lx-log svg{width:14px;height:14px;color:var(--link);flex:none}
.pub .lx-ths{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:10px}
.pub .lx-th{aspect-ratio:16/9;padding:5px;border:1px solid var(--line);border-radius:5px;background:var(--surface);font-size:.56rem;font-weight:800;line-height:1.25;color:var(--ink);opacity:0;scale:.86;transition:opacity .3s,scale .3s;overflow:hidden}
.pub .lx-th.on{opacity:1;scale:1}
.pub .lx-th i{display:block;height:3px;margin-top:3px;border-radius:2px;background:var(--line)}
.pub .lx-th.cov{background:var(--brand);color:var(--paper)}
.pub .lx-th.pic{background:var(--brand-soft)}
.pub .lx-term-f{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:12px}
.pub .lx-term-f small{color:var(--ink-soft);font-size:.8rem}
.pub .lx-mini{appearance:none;min-height:36px;padding:6px 12px;border:1px solid var(--line);border-radius:8px;background:var(--paper);font:inherit;font-size:.85rem;font-weight:700;color:var(--ink);cursor:pointer;flex:none}
.pub .lx-mini:hover{border-color:var(--brand);color:var(--link)}
.pub .lx-mini.on{background:var(--brand);border-color:var(--brand);color:var(--paper)}

/* HTML 강의자료 */
.pub .lx-demo{display:grid;gap:14px;margin-top:22px}
.pub .lx-bar{display:flex;align-items:center;gap:6px;margin-bottom:8px;font-size:.84rem;color:var(--ink-soft)}
.pub .lx-bar span{margin-left:6px}
.pub .lx-stagebox{display:flex;justify-content:center;background:var(--brand-ink);border-radius:10px;padding:12px}
.pub .lx-stage{position:relative;aspect-ratio:16/9;width:100%;max-width:100%;background:var(--paper);color:var(--ink);border-radius:4px;overflow:hidden;transition:width .35s cubic-bezier(.2,.8,.2,1)}
.pub .lx-stage.r43{aspect-ratio:4/3;width:min(100%,380px)}
.pub .lx-sl{position:absolute;inset:0;padding:6% 7%;display:flex;flex-direction:column;justify-content:center;animation:lxSl .4s cubic-bezier(.2,.8,.2,1)}
@keyframes lxSl{from{opacity:0;translate:26px 0}}
.pub .lx-sl.cov{background:var(--brand);color:var(--paper)}
.pub .lx-sl h4{margin:0 0 8px;font-size:clamp(1rem,2.6vw,1.45rem);line-height:1.3}
.pub .lx-sl p{margin:0;font-size:clamp(.74rem,1.5vw,.95rem);line-height:1.5}
.pub .lx-sl ul{margin:0;padding-left:18px;font-size:clamp(.74rem,1.5vw,.95rem);line-height:1.6}
.pub .lx-slb{margin-top:5px;font-size:clamp(.68rem,1.3vw,.84rem);font-weight:700}
.pub .lx-slb b{display:block;height:9px;margin-top:2px;border-radius:5px;background:var(--brand);width:0;transition:width .9s cubic-bezier(.2,.8,.2,1) .15s}
.pub .lx-remote{padding:12px;border:4px solid var(--brand-ink);border-radius:20px;background:var(--paper)}
.pub .lx-remote>small{display:block;margin-bottom:6px;font-size:.78rem;font-weight:800;color:var(--ink-soft)}
.pub .lx-now,.pub .lx-next{padding:8px;border:1px solid var(--line);border-radius:6px;font-size:.8rem;font-weight:700;line-height:1.35;min-height:44px}
.pub .lx-now{background:var(--brand-soft);color:var(--link)}
.pub .lx-next{margin-top:6px;color:var(--ink-soft)}
.pub .lx-rb{display:grid;grid-template-columns:1fr 1.6fr;gap:6px;margin-top:9px}
.pub .lx-rb .lx-mini{min-height:44px}
.pub .lx-tabs{display:flex;gap:4px;margin-top:22px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.pub .lx-tabs button{appearance:none;flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 12px;border:0;border-bottom:3px solid transparent;background:none;font:inherit;font-size:.98rem;font-weight:700;color:var(--ink-soft);cursor:pointer}
.pub .lx-tabs svg{width:16px;height:16px}
.pub .lx-tabs button:hover{color:var(--ink)}
.pub .lx-tabs button.on{border-bottom-color:var(--brand);color:var(--link)}
.pub .lx-pane{display:grid;gap:10px 22px;margin-top:16px;animation:lxUp .3s ease-out}
@keyframes lxUp{from{opacity:0;translate:0 10px}}
.pub .lx-pane div{font-size:.97rem;line-height:1.55;color:var(--ink-soft)}
.pub .lx-pane b{display:block;color:var(--ink)}

/* 실습·시연 */
.pub .lx-filter{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.pub .lx-labs{display:grid;gap:12px;margin-top:14px}
.pub .lx-lab{padding:16px;border:1px solid var(--line);border-radius:10px;background:var(--paper);transition:border-color .15s,translate .15s}
.pub .lx-lab:hover{border-color:var(--brand);translate:0 -3px}
.pub .lx-lab[hidden]{display:none}
.pub .lx-lab b{display:flex;align-items:center;gap:7px;font-size:1rem;color:var(--ink)}
.pub .lx-lab b svg{width:17px;height:17px;color:var(--link);flex:none}
.pub .lx-lab span{display:block;margin-top:6px;font-size:.93rem;line-height:1.55;color:var(--ink-soft)}
.pub .fopt.lx-tap::after{content:"";position:absolute;inset:-8.5px 0}
.pub .fopt.lx-tap{position:relative;cursor:pointer;border-radius:5px;transition:background .12s}
.pub .fopt.lx-tap:hover{background:var(--brand-soft)}
.pub .fopt.lx-tap.pick span{color:var(--link)}

@media(min-width:760px){
  .pub .lx-pains{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pub .lx-ai{grid-template-columns:1.05fr .95fr;gap:36px}
  .pub .lx-term{position:sticky;top:18px}
  .pub .lx-demo{grid-template-columns:1fr 190px;align-items:center}
  .pub .lx-pane{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pub .lx-labs{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr}
}
@media print{.pub .lx-top{display:none}.pub .lx-rv{opacity:1;translate:0 0;scale:1}}
@media(prefers-reduced-motion:reduce){
  .pub .lx-rv{opacity:1;translate:0 0;scale:1;transition:none}
  .pub .pfig.hero img,.pub .pfig.hero .plive,.pub .pfig.hero .pphone{translate:none}
  .pub .lx-sl,.pub .lx-pane{animation:none}
  .pub .lx-caret{animation:none}
}

/* ── 2차(2026-11-01 대표님 「더 드라마틱하고 세련되게」 · 「삽화도 더 많이」 · 「IT에 약한 강사도 쉽게」) ── */
/* 첫 화면 등장 */
.pub .phero{position:relative}
.pub .lx-glow{position:absolute;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;background:radial-gradient(circle,var(--brand-soft) 0,transparent 68%);opacity:.9;pointer-events:none;translate:var(--gx,60vw) var(--gy,200px);transition:translate .5s cubic-bezier(.2,.8,.2,1);z-index:0}
.pub .phero .pgrid{position:relative;z-index:1}
.pub .lx-ln{display:block;overflow:hidden;padding-bottom:.08em}
.pub .lx-ln i{display:block;font-style:normal;animation:lxRise .9s cubic-bezier(.16,1,.3,1) both}
.pub .lx-ln+.lx-ln i{animation-delay:.12s}
@keyframes lxRise{from{transform:translateY(105%)}}
.pub .phero .ha .lead,.pub .lx-jump,.pub .hb{animation:lxFade .8s ease-out .35s both}
.pub .phero .eyebrow{animation:lxFade .7s ease-out both}
@keyframes lxFade{from{opacity:0;translate:0 16px}}
.pub .pfig.hero{perspective:1200px;animation:lxHero 1.1s cubic-bezier(.16,1,.3,1) .1s both}
@keyframes lxHero{from{opacity:0;scale:.93;translate:0 30px}}
.pub .pfig.hero img{transform:rotateY(calc(var(--mx,0)*7deg)) rotateX(calc(var(--my,0)*-6deg));transition:translate .25s ease-out,transform .25s ease-out;box-shadow:0 26px 60px rgba(30,35,64,.1)}
.pub .pfig.hero .pphone{transform:translateZ(0) rotate(calc(var(--mx,0)*3deg));transition:translate .25s ease-out,transform .25s ease-out}

/* 흐르는 띠 */
.pub .lx-mqs{display:grid;gap:8px;padding:6px 0 18px;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.pub .lx-mq>div{display:flex;gap:8px;width:max-content;animation:lxMq 46s linear infinite}
.pub .lx-mq.rev>div{animation-direction:reverse;animation-duration:54s}
.pub .lx-mqs:hover .lx-mq>div{animation-play-state:paused}
.pub .lx-mq span{flex:none;padding:7px 13px;border:1px solid var(--line);border-radius:8px;background:var(--paper);font-size:.9rem;font-weight:700;color:var(--ink-soft);white-space:nowrap}
.pub .lx-mq.rev span{background:none}
@keyframes lxMq{to{transform:translateX(-50%)}}

/* 제목 낱말 등장 */
.pub .lx-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.pub .lx-w i{display:inline-block;font-style:normal;transform:translateY(105%);transition:transform .8s cubic-bezier(.16,1,.3,1) calc(var(--i)*38ms)}
.pub .lx-in .lx-w i{transform:none}

/* 등장을 더 깊게 */
.pub .lx-rv{translate:0 40px;filter:blur(5px);transition:opacity .75s cubic-bezier(.16,1,.3,1) var(--dl,0s),translate .75s cubic-bezier(.16,1,.3,1) var(--dl,0s),filter .75s ease-out var(--dl,0s),scale .8s cubic-bezier(.16,1,.3,1) var(--dl,0s)}
.pub .lx-rv.lx-in{filter:none}

/* 그림이 열리며 나타난다 */
.pub .lx-wipe{overflow:hidden;background:var(--paper);clip-path:inset(12% 12% 12% 12% round 18px);transition:clip-path 1.1s cubic-bezier(.16,1,.3,1)}
.pub .lx-wipe.lx-in{clip-path:inset(0 round 18px)}
.pub .lx-wipe img{scale:1.12;translate:0 var(--py,0);transition:scale 1.3s cubic-bezier(.16,1,.3,1)}
.pub .lx-wipe.lx-in img{scale:1.05}

/* 카드 입체 */
.pub .lx-pain,.pub .lx-lab,.pub .cardp,.pub .fear{transform:perspective(900px) rotateX(calc(var(--ty,0)*-5deg)) rotateY(calc(var(--tx,0)*6deg)) translateZ(0);transition:transform .25s ease-out,border-color .15s,box-shadow .2s,opacity .75s cubic-bezier(.16,1,.3,1) var(--dl,0s),translate .75s cubic-bezier(.16,1,.3,1) var(--dl,0s),filter .75s ease-out var(--dl,0s)}
.pub .pbtn{transform:translate(calc(var(--bx,0)*1px),calc(var(--by,0)*1px));transition:transform .2s ease-out,background .15s,box-shadow .2s}

/* 쉬움 칸 */
.pub .lx-sure{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.pub .lx-sure span{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:8px;background:var(--brand-soft);font-size:.95rem;font-weight:700;color:var(--link)}
.pub .lx-sure svg{width:16px;height:16px}
.pub .lx-easy{display:grid;gap:18px;align-items:center;margin-top:34px}
.pub .lx-easy h3{margin:6px 0 0;font-size:1.5rem;line-height:1.3}
.pub .lx-easy p{margin:10px 0 0;font-size:1.1rem;line-height:1.7;color:var(--ink-soft)}
.pub .lx-easy .lx-plus{display:flex;gap:7px;align-items:flex-start;font-size:1rem;font-weight:700;color:var(--ink)}
.pub .lx-plus svg{width:18px;height:18px;flex:none;margin-top:4px;color:var(--link)}
.pub .lx-no{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--brand);color:var(--paper);font-weight:800}

/* 글자가 켜지는 띠 */
.pub .lx-fill{padding:clamp(34px,6vw,70px) clamp(22px,5vw,64px);border-radius:10px;background:var(--brand-ink);font-size:clamp(1.5rem,4vw,2.5rem);font-weight:800;line-height:1.45;letter-spacing:-.02em}
.pub .lx-fill span{color:rgba(255,255,255,.38);transition:color .35s}   /* 켜지기 전 글자도 대비 3:1 이상(웹 접근성 2026-11-04) */
.pub .lx-fill span.on{color:var(--paper)}

/* 강의 하루 */
.pub .lx-story{display:grid;gap:18px;margin-top:22px}
.pub .lx-pile{display:none}
.pub .lx-ch{padding:18px 0}
.pub .lx-chimg{width:100%;height:auto;border-radius:14px;margin-bottom:14px}
.pub .lx-when{display:inline-flex;align-items:center;gap:6px;font-size:.95rem;font-weight:800;color:var(--link)}
.pub .lx-when svg{width:16px;height:16px}
.pub .lx-ch h3{margin:8px 0 0;font-size:1.5rem;line-height:1.3}
.pub .lx-ch ul{margin:14px 0 0;padding:0;list-style:none}
.pub .lx-ch li{display:flex;gap:8px;align-items:flex-start;padding:5px 0;font-size:1.05rem;color:var(--ink-soft)}
.pub .lx-ch li svg{width:17px;height:17px;flex:none;margin-top:5px;color:var(--link)}

@media(min-width:760px){
  .pub .lx-easy{grid-template-columns:1.05fr .95fr;gap:44px;margin-top:56px}
  .pub .lx-easy.flip>:first-child{order:2}
  .pub .lx-story{grid-template-columns:1.15fr .85fr;gap:44px}
  .pub .lx-pile{display:block;position:sticky;top:12vh;height:min(70vh,520px);border-radius:14px;overflow:hidden;background:var(--paper)}
  .pub .lx-pile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;scale:1.06;transition:opacity .7s ease,scale 1.2s cubic-bezier(.16,1,.3,1)}
  .pub .lx-pile img.on{opacity:1;scale:1}
  .pub .lx-chimg{display:none}
  .pub .lx-ch{min-height:72vh;display:flex;flex-direction:column;justify-content:center;opacity:.28;transition:opacity .5s}
  .pub .lx-ch.on{opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .pub .lx-ln i,.pub .phero .ha .lead,.pub .lx-jump,.pub .hb,.pub .phero .eyebrow,.pub .pfig.hero{animation:none}
  .pub .lx-mq>div{animation:none}
  .pub .lx-w i{transform:none;transition:none}
  .pub .lx-rv{filter:none;translate:0 0}
  .pub .lx-wipe{clip-path:none}
  .pub .lx-wipe img{scale:1;translate:0 0}
  .pub .lx-fill span{color:var(--paper)}
  .pub .lx-ch{opacity:1}
  .pub .lx-glow{display:none}
}
@media print{.pub .lx-wipe{clip-path:none}.pub .lx-w i{transform:none}.pub .lx-fill span{color:var(--paper)}}

/* ── 3차: 발표 시연을 극장처럼, 폰은 진짜 스마트폰처럼(2026-11-01 대표님 「훨씬 멋있게」) ── */
.pub .lx-stagebox{position:relative;padding:clamp(20px,3.4vw,40px);border-radius:14px;background:radial-gradient(120% 95% at 50% -8%,#34407A 0,#1B2242 46%,#10152C 100%);box-shadow:0 30px 70px rgba(16,21,44,.32);overflow:hidden}
.pub .lx-stagebox::after{content:"";position:absolute;left:12%;right:12%;bottom:-40px;height:90px;background:radial-gradient(50% 50% at 50% 50%,rgba(47,107,255,.5),transparent);pointer-events:none}
.pub .lx-stage{container-type:inline-size;position:relative;z-index:1;border-radius:6px;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 18px 60px rgba(47,107,255,.34)}
.pub .lx-sl{padding:0;display:block;animation:none;background:var(--paper);color:var(--ink);overflow:hidden}
.pub .lx-sl>*{opacity:0;translate:0 8.89cqh;transition:opacity .55s cubic-bezier(.16,1,.3,1),translate .55s cubic-bezier(.16,1,.3,1)}
.pub .lx-sl.go>*{opacity:1;translate:0 0}
.pub .lx-sl.go>:nth-child(2){transition-delay:.08s}.pub .lx-sl.go>:nth-child(3){transition-delay:.16s}.pub .lx-sl.go>:nth-child(4){transition-delay:.24s}.pub .lx-sl.go>:nth-child(5){transition-delay:.32s}
.pub .lx-sl.still>*{transition:none}
.pub .lx-sl{animation:lxIn .5s cubic-bezier(.16,1,.3,1)}
.pub .lx-sl.bw{animation-name:lxBk}
.pub .lx-sl.still{animation:none}
@keyframes lxIn{from{translate:7% 0;opacity:.2}}
@keyframes lxBk{from{translate:-7% 0;opacity:.2}}
.pub .lx-sl h4{margin:0;font-size:11.38cqh;line-height:1.22;letter-spacing:-.02em;font-weight:800}
.pub .lx-sl p{font-size:5.16cqh;line-height:1.5}
/* 표지 */
.pub .lx-sl.k-cov{padding:16cqh 14.22cqh;background:linear-gradient(125deg,#141A36 0,#23306E 55%,#2E69FC 130%);color:var(--paper)}
.pub .k-cov em{display:inline-block;margin-bottom:5.33cqh;padding:1.24cqh 3.2cqh;border:1px solid rgba(255,255,255,.3);border-radius:1.78cqh;font-style:normal;font-size:4.27cqh;font-weight:700}
.pub .k-cov h4{font-size:16cqh}
.pub .k-cov p{margin-top:5.33cqh;opacity:.72}
.pub .k-cov i{position:absolute;border-radius:50%;opacity:1!important;translate:0 0!important}
.pub .k-cov .o1{right:-16cqh;top:-19.56cqh;width:78.22cqh;height:78.22cqh;background:rgba(47,107,255,.55)}
.pub .k-cov .o2{right:23.11cqh;bottom:-21.33cqh;width:46.22cqh;height:46.22cqh;border:0.89cqh solid rgba(255,255,255,.28)}
.pub .k-cov .o3{right:12.44cqh;top:35.56cqh;width:8.89cqh;height:8.89cqh;background:var(--paper)}
/* 세 칸 */
.pub .lx-sl.k-lst{padding:12.44cqh 12.44cqh}
.pub .k-lst .c3{display:grid;grid-template-columns:repeat(3,1fr);gap:4.27cqh;margin-top:8cqh}
.pub .k-lst .c3 div{padding:5.33cqh;border-radius:2.49cqh;background:var(--surface);border:1px solid var(--line)}
.pub .k-lst .c3 b{display:flex;width:11.38cqh;height:11.38cqh;align-items:center;justify-content:center;border-radius:50%;background:var(--brand);color:var(--paper);font-size:5.69cqh}
.pub .k-lst .c3 span{display:block;margin-top:4.27cqh;font-size:6.04cqh;font-weight:800;line-height:1.3}
/* 투표 */
.pub .lx-sl.k-pol{padding:9.78cqh 12.44cqh}
.pub .k-pol .ph{display:flex;justify-content:space-between;align-items:flex-start;gap:5.33cqh;margin-bottom:4.62cqh}
.pub .k-pol h4{font-size:8.71cqh}
.pub .k-pol .lv{flex:none;display:inline-flex;align-items:center;gap:1.78cqh;padding:1.42cqh 2.84cqh;border-radius:1.78cqh;background:var(--brand-soft);color:var(--link);font-size:3.73cqh;font-weight:800}
.pub .k-pol .lv u{width:2.31cqh;height:2.31cqh;border-radius:50%;background:var(--brand);animation:plive 1.6s ease-in-out infinite}
.pub .k-pol .br{display:grid;grid-template-columns:42.67cqh 1fr;gap:3.56cqh;align-items:center;margin-top:2.67cqh;font-size:4.8cqh;font-weight:700}
.pub .k-pol .br b{height:6.04cqh;border-radius:1.42cqh;background:var(--brand);width:0;transition:width 1.1s cubic-bezier(.16,1,.3,1) calc(var(--i)*.14s + .15s)}
.pub .k-pol.go .br b{width:var(--w)}
.pub .k-pol.still .br b{transition:none}
/* 타이머 */
.pub .lx-sl.k-tmr{padding:12.44cqh;background:var(--brand);color:var(--paper);text-align:center}
.pub .k-tmr p{margin-top:2.49cqh;opacity:.85}
.pub .k-tmr .tm{margin-top:5.33cqh;font-size:30.22cqh;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
/* 레이저 */
.pub .lx-laser{position:absolute;z-index:3;width:3.91cqh;height:3.91cqh;margin:-1.96cqh 0 0 -1.96cqh;border-radius:50%;background:#FF3B30;box-shadow:0 0 0 1.24cqh rgba(255,59,48,.28),0 0 5.33cqh #FF3B30;opacity:0;transition:opacity .15s;pointer-events:none}
.pub .lx-laser.on{opacity:1}

/* 스마트폰 */
.pub .lx-ph{position:relative;justify-self:center;width:228px;padding:9px;border-radius:44px;background:linear-gradient(145deg,#3A4058,#15192B 42%,#262B40);box-shadow:0 0 0 1px #0B0E1B,inset 0 0 0 1.5px rgba(255,255,255,.14),0 34px 60px rgba(16,21,44,.36),0 8px 18px rgba(16,21,44,.2)}
.pub .lx-ph::before,.pub .lx-ph::after{content:"";position:absolute;width:3px;border-radius:2px;background:#2B3048}
.pub .lx-ph::before{left:-3px;top:112px;height:42px;box-shadow:0 54px 0 #2B3048,0 -36px 0 -.5px #2B3048}
.pub .lx-ph::after{right:-3px;top:138px;height:66px}
.pub .lx-isl{position:absolute;z-index:2;left:50%;top:18px;width:74px;height:21px;margin-left:-37px;border-radius:12px;background:#07090F}
.pub .lx-ph-s{position:relative;display:flex;flex-direction:column;min-height:452px;padding:13px 13px 8px;border-radius:35px;background:#0E1224;color:var(--paper);overflow:hidden}
.pub .lx-ph-st{display:flex;justify-content:space-between;align-items:center;padding:0 9px;font-size:.74rem;font-weight:700}
.pub .lx-ph-st b{font-variant-numeric:tabular-nums}
.pub .lx-sig{display:inline-flex;align-items:flex-end;gap:1.5px}
.pub .lx-sig u{width:2.5px;background:var(--paper);border-radius:1px;height:4px}.pub .lx-sig u:nth-child(2){height:6px}.pub .lx-sig u:nth-child(3){height:8px}.pub .lx-sig u:nth-child(4){height:10px}
.pub .lx-sig i{width:19px;height:10px;margin-left:4px;border:1px solid rgba(255,255,255,.7);border-radius:3px;background:linear-gradient(90deg,var(--paper) 72%,transparent 72%);background-clip:content-box;padding:1px}
.pub .lx-ph-h{display:flex;justify-content:space-between;align-items:baseline;margin:18px 2px 8px;font-size:.92rem}
.pub .lx-ph-h em{font-style:normal;font-size:.8rem;font-weight:700;color:rgba(255,255,255,.62);font-variant-numeric:tabular-nums}
.pub .lx-ph-now,.pub .lx-ph-next{padding:0;border:0;min-height:0;background:none;border-radius:8px;overflow:hidden}
.pub .lx-ph-now{outline:2px solid var(--brand);outline-offset:1px;cursor:crosshair;touch-action:none}
.pub .lx-th2{container-type:inline-size;position:relative;aspect-ratio:16/9;background:var(--paper);pointer-events:none}
.pub .lx-ph small{display:block;margin:6px 2px 0;font-size:.72rem;color:rgba(255,255,255,.6)}
.pub .lx-ph-lb{margin:11px 2px 5px;font-size:.74rem;font-weight:700;color:rgba(255,255,255,.72)}
.pub .lx-ph-next{opacity:.86}
.pub .lx-end{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;border:1px dashed rgba(255,255,255,.26);border-radius:8px;font-size:.76rem;color:rgba(255,255,255,.62)}
.pub .lx-ph .lx-rb{margin-top:auto;padding-top:11px}
.pub .lx-ph .lx-mini{min-height:48px;border-color:rgba(255,255,255,.2);border-radius:12px;background:rgba(255,255,255,.08);color:var(--paper)}
.pub .lx-ph .lx-mini.on{background:var(--brand);border-color:var(--brand)}
.pub .lx-ph .lx-mini:hover{border-color:var(--paper);color:var(--paper)}
.pub .lx-home{display:block;width:88px;height:4px;margin:10px auto 0;border-radius:3px;background:rgba(255,255,255,.72)}
@media(min-width:760px){.pub .lx-demo{grid-template-columns:1fr 244px;gap:26px;align-items:end}}

/* 다른 폰 그림도 스마트폰답게 */
.pub .pphone{border-color:#15192B;border-width:5px;border-radius:26px;padding-top:21px;background:var(--paper)}
.pub .pphone::before{content:"";position:absolute;left:50%;top:6px;width:44px;height:11px;margin-left:-22px;border-radius:7px;background:#15192B}
/* 첫 화면 폰(2026-11-01 대표님 「스마트폰으로 바로 인식」) — 세로로 긴 몸체, 얇은 테두리, 상태 표시줄, 옆 단추, 아래 막대 */
.pub .pfig.hero .pphone{box-sizing:border-box;display:flex;flex-direction:column;right:-14px;width:146px;height:306px;bottom:-26px;padding:8px 9px 16px;border:6px solid #15192B;border-radius:36px;background:#fff;box-shadow:0 0 0 1px #4A5070,0 24px 46px rgba(21,25,43,.34)}
.pub .pfig.hero .pphone::before{top:7px;width:50px;height:15px;margin-left:-25px;border-radius:9px}
.pub .pfig.hero .pphone::after{content:"";position:absolute;left:50%;bottom:6px;width:64px;height:4px;margin-left:-32px;border-radius:2px;background:#15192B}
.pub .pside{position:absolute;right:-9px;top:92px;width:3px;height:52px;border-radius:0 2px 2px 0;background:#15192B}
.pub .pside::before{content:"";position:absolute;left:-149px;top:-30px;width:3px;height:26px;border-radius:2px 0 0 2px;background:#15192B;box-shadow:0 36px 0 #15192B}
.pub .pstat{display:flex;justify-content:space-between;align-items:center;height:16px;margin-bottom:12px;padding:0 3px;font-size:11px;font-weight:800;line-height:1;color:#15192B}
.pub .psig{display:inline-flex;align-items:flex-end;gap:1px}.pub .psig b{display:block;width:2px;height:4px;background:#15192B}.pub .psig b:nth-child(2){height:6px}.pub .psig b:nth-child(3){height:8px}.pub .psig b:nth-child(4){height:10px}.pub .psig u{display:block;width:15px;height:9px;margin-left:3px;border-radius:2px;background:#15192B}
.pub .pfig.hero .pphone .pt{margin-bottom:7px;font-size:11px;line-height:1.3;text-align:center}
.pub .pfig.hero .pphone .pr{flex-direction:column;align-items:flex-start;gap:1px;margin-bottom:5px;padding:5px 8px;font-size:11.5px}
.pub .pfig.hero .pphone .pok{width:100%;margin-top:auto;min-height:34px;border:0;font-size:12px}
.pub .frame.phone{position:relative;border-color:#15192B;border-width:6px;border-radius:30px;padding-top:26px}
.pub .frame.phone::before{content:"";position:absolute;left:50%;top:8px;width:52px;height:13px;margin-left:-26px;border-radius:8px;background:#15192B}
@media(prefers-reduced-motion:reduce){.pub .lx-sl{animation:none}.pub .lx-sl>*{opacity:1;translate:0 0;transition:none}}

/* 가치 제안 세 칸 — 눌러서 그 단계로 내려간다 */
.pub .phero h1 em{font-style:normal;color:var(--link)}
.pub .lx-vp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:18px}
.pub .lx-vp button{appearance:none;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--paper);font:inherit;text-align:left;cursor:pointer;transition:border-color .15s,translate .2s,box-shadow .2s}
.pub .lx-vp button:hover{border-color:var(--brand);translate:0 -3px;box-shadow:0 12px 26px rgba(30,35,64,.1)}
.pub .lx-vp span{display:inline-flex;align-items:center;gap:5px;font-size:.8rem;font-weight:800;color:var(--link)}
.pub .lx-vp span svg{width:14px;height:14px}
.pub .lx-vp b{font-size:1rem;line-height:1.3;color:var(--ink)}
.pub .lx-vp small{font-size:.76rem;line-height:1.35;color:var(--ink-soft)}
.pub .lx-demo>*,.pub .lx-room{min-width:0}
.pub .lx-tabs,.pub .lx-labs,.pub .lx-pains{min-width:0}
@media(max-width:600px){.pub .lx-vp{grid-template-columns:1fr}.pub .lx-vp button{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:8px}.pub .lx-vp small{flex-basis:100%}}

/* 공개 머리줄 — 로고 아래 소개 한 줄 */
.pub .pubhead{align-items:flex-start}
body.site .pub .pubhead.pwrap{max-width:none;padding-left:0;padding-right:0}   /* 홈은 본문이 .wrap 폭(1,280)이다 — 머리줄이 본문 폭을 따라간다 */
.pub .pubhead>nav{margin-top:2px}
.pub .pbrand{flex:0 1 auto;min-width:min-content}   /* 메뉴가 먼저다 — 좁으면 소개 한 줄이 접힌다(NA1-258) */
@media(min-width:860px){.pub .pubhead>nav{flex:none}}
.pub .pbrow{display:flex;align-items:center;gap:10px}
.pub .ptag{margin-top:1px}
@media(max-width:899px){.pub .ptag{display:none!important}.pub .pubhead{align-items:center}.pub .pubhead>nav{margin-top:0;min-width:0}}
/* 폰에서는 커서 빛이 없다 */
@media(max-width:759px){.pub .lx-glow{display:none}}
/* 공개 페이지(js/pub-fx.js) — 첫 칸 삽화·칸 안의 넓은 그림·카드 기울임 */
.pub .lx-pgh{display:grid;gap:20px;align-items:center}
.pub .lx-bandfig{margin:16px 0 4px;height:clamp(170px,27vw,300px)}
.pub .lx-bandfig img{width:100%;height:100%;object-fit:cover;object-position:50% 34%;border-radius:0}
.pub .step,.pub .kit-card,.pub .plan,.pub .pcard{transform:perspective(900px) rotateX(calc(var(--ty,0)*-4deg)) rotateY(calc(var(--tx,0)*5deg))}
@media(min-width:760px){.pub .lx-pgh{grid-template-columns:1.15fr .85fr;gap:40px}}

/* AI 네 칸 — 어떤 모델이 무슨 일을 맡는지 */
.pub .lx-models{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:16px}
.pub .lx-models div{padding:12px;border-radius:10px;background:var(--brand-ink);color:var(--paper)}
.pub .lx-models b{display:flex;align-items:center;gap:6px;font-size:.96rem;font-weight:800}
.pub .lx-models b svg{width:15px;height:15px;flex:none}
.pub .lx-models em{display:block;margin-top:4px;font-style:normal;font-size:.8rem;font-weight:700;color:#9DB8FF}
.pub .lx-models span{display:block;margin-top:3px;padding:0;background:none;font-size:.82rem;font-weight:500;line-height:1.4;color:rgba(255,255,255,.76)}
@media(max-width:420px){.pub .lx-models{grid-template-columns:1fr}}

/* 4:3 은 높이를 그대로 두고 폭만 줄인다(대표님 「비율만 바꾸면 되는데」) — 16:9 높이 = 100×9/16, 4:3 폭 = 그 높이×4/3 = 75 */
.pub .lx-stagebox{container-type:inline-size}
.pub .lx-stage{container-type:size;width:100cqw;max-width:none}
.pub .lx-stage.r43{width:75cqw}
.pub .lx-th2{container-type:size}
.pub .lx-ph-next{opacity:1}
/* 머리줄이 첫 화면 빛 아래로 들어가 글자가 흐려지던 것 — 위로 올린다 */
.pub .pubhead{position:relative;z-index:2}
.pub .pubhead nav a:hover{text-decoration:none;color:var(--link)}
.pub .pubhead nav a.go:hover{color:var(--paper)}
.pub .lx-glow{top:0;clip-path:none}
@media(min-width:760px){.pub .lx-easy{margin-top:104px}}
@media(max-width:759px){.pub .lx-easy{margin-top:52px}}

/* 「3분이면 됩니다」 창 두 개 — 같은 크기, 회색 띠는 창 폭 끝까지 붙인다(대표님) */
.pub .fstep .frame.lap{display:flex;flex-direction:column;box-sizing:border-box;height:262px;min-height:0;padding:0}
.pub .frame.lap .fbar{flex:none;align-self:stretch;width:auto;margin:0;border-radius:0}
.pub .frame.lap .fform,.pub .frame.lap .fqr{flex:1;min-height:0;box-sizing:border-box}
.pub .frame.lap .fqr{padding:12px 16px}
.pub .frame.lap .fform{padding:8px 14px 12px}

/* 폰 화면의 장도 같은 비율로 — 높이는 그대로, 폭만 줄어든다 */
.pub .lx-ph-now,.pub .lx-ph-next,.pub .lx-end{transition:width .35s cubic-bezier(.16,1,.3,1)}
.pub .lx-ph.r43 .lx-ph-now,.pub .lx-ph.r43 .lx-ph-next{width:75%;margin-inline:auto}
.pub .lx-ph.r43 .lx-th2,.pub .lx-ph.r43 .lx-end{aspect-ratio:4/3}

/* 더 극적으로(2026-11-01 대표님) — 파란 빛·흐림은 빼고 크기·깊이·움직임으로 */
.pub .lx-glow{display:none}
.pub .lx-rv{filter:none;translate:0 72px;scale:.95;transition:opacity .95s cubic-bezier(.16,1,.3,1) var(--dl,0s),translate .95s cubic-bezier(.16,1,.3,1) var(--dl,0s),scale .95s cubic-bezier(.16,1,.3,1) var(--dl,0s)}
.pub .lx-rv.lx-in{translate:0 0;scale:1}
.pub .lx-pain,.pub .lx-lab,.pub .cardp,.pub .fear,.pub .step,.pub .kit-card,.pub .plan,.pub .pcard{transform-style:preserve-3d;transform:perspective(760px) rotateX(calc(var(--ty,0)*-11deg)) rotateY(calc(var(--tx,0)*13deg)) translateY(calc((var(--tx,0)*var(--tx,0) + var(--ty,0)*var(--ty,0))*-30px))}
.pub .lx-pain:hover,.pub .lx-lab:hover,.pub .cardp:hover,.pub .fear:hover,.pub .step:hover,.pub .kit-card:hover,.pub .plan:hover,.pub .pcard:hover{box-shadow:0 26px 50px rgba(30,35,64,.16)}
.pub .lx-w i{transition-duration:1s}
.pub section:not(.phero) h2{letter-spacing:-.02em}
.pub .lx-models b svg{width:18px;height:18px}
@media(prefers-reduced-motion:reduce){.pub .lx-rv{translate:0 0;scale:1}}

/* 고민 카드 — 그림으로 상황을 먼저 보여 준다 */
.pub .lx-pain{display:grid;grid-template-columns:42% 1fr;gap:14px;align-items:center;padding:12px;overflow:hidden}
.pub .lx-pain img{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;border-radius:8px;background:var(--paper);display:block}
.pub .lx-pain h3{display:block;font-size:1.12rem;line-height:1.35}
.pub .lx-pain .lx-ans{display:flex;gap:6px;align-items:flex-start;margin:8px 0 0;padding:0;border:0;font-size:.97rem;line-height:1.5;color:var(--link);font-weight:700}
.pub .lx-pain .lx-ans svg{width:16px;height:16px;flex:none;margin-top:4px}
@media(max-width:480px){.pub .lx-pain{grid-template-columns:1fr}}
/* 넓은 그림 — 21:9 로 그린 것을 그대로 */
.pub .lx-bandfig{height:auto;aspect-ratio:21/9}
.pub .lx-bandfig img{object-fit:contain;object-position:50% 50%;background:var(--paper)}
.pub .lx-bandfig.lx-wipe img{scale:1}
/* 나리 소개 */
.pub .nr-card{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:18px 0 0;padding:18px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-size:1rem}
.pub .nr-card dt{color:var(--ink-soft);font-weight:700}
.pub .nr-card dd{margin:0;color:var(--ink);font-weight:700}
.pub .nr-note{margin-top:10px;font-size:.88rem;color:var(--ink-soft)}

/* 커서가 올라가면 천천히 — 대표님 「빡빡빡 말고 부드럽게 사아악」. 등장이 끝나면 lx-rv 를 떼어 이 값이 먹는다 */
.pub .lx-pain,.pub .lx-lab,.pub .cardp,.pub .fear,.pub .step,.pub .kit-card,.pub .plan,.pub .pcard,.pub .lx-vp button{transition:transform .75s cubic-bezier(.22,1,.36,1),translate .7s cubic-bezier(.22,1,.36,1),background .6s ease,border-color .6s ease,box-shadow .75s ease}
.pub .pbtn{transition:transform .6s cubic-bezier(.22,1,.36,1),background .4s ease,box-shadow .5s ease}

/* 기울임은 뺐다(대표님 「왜 비틀면서」) — 살짝 떠오르기만. 고민 카드는 노란색도 없이 흰 카드 그대로 */
.pub .lx-pain,.pub .lx-lab,.pub .cardp,.pub .fear,.pub .step,.pub .kit-card,.pub .plan,.pub .pcard{transform:none}
.pub .lx-pain:hover,.pub .lx-lab:hover,.pub .cardp:hover,.pub .fear:hover,.pub .step:hover,.pub .kit-card:hover,.pub .plan:hover,.pub .pcard:hover{translate:0 -4px;box-shadow:0 14px 30px rgba(30,35,64,.1)}
.pub .lx-pain:hover{background:var(--paper)}

/* 폰 머리줄 — 줄이 쌓이지 않게 메뉴 단추로(2026-11-01 대표님 「모바일 디자인도 최적화」) */
.pub .pnav-btn{display:none}
@media(max-width:859px){
  .pub .pubhead{flex-wrap:wrap;gap:8px;padding-block:10px;align-items:center}
  .pub .pbrow{gap:8px}
  .pub .pnav-btn{display:flex;flex-direction:column;justify-content:center;gap:4px;flex:none;width:44px;height:44px;margin-left:auto;padding:0 11px;border:1px solid var(--line);border-radius:8px;background:var(--paper);cursor:pointer}
  .pub .pnav-btn i{display:block;height:2px;border-radius:2px;background:var(--brand-ink);transition:transform .3s ease,opacity .2s ease}
  .pub .pubhead.open .pnav-btn i:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .pub .pubhead.open .pnav-btn i:nth-child(2){opacity:0}
  .pub .pubhead.open .pnav-btn i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .pub .pubhead>nav{display:none;flex:0 0 100%;flex-direction:column;align-items:stretch;gap:2px;margin:4px 0 0;padding-top:8px;border-top:1px solid var(--line);overflow:visible}
  .pub .pubhead.open>nav{display:flex;animation:lxFade .3s ease-out}
  .pub .pubhead>nav>a,.pub .pubhead nav .pmenu>a{display:flex;width:100%;box-sizing:border-box;min-height:48px;padding:10px 12px;border-radius:8px;font-size:1.05rem}
  .pub .pubhead nav .pmenu{display:block;width:100%}
  .pub .pubhead nav a.go{justify-content:center}
  .pub .pubhead nav .pmenu>a::after{right:16px}
  .pub .pdrop{position:static;display:none;min-width:0;width:100%;padding:0 0 6px 8px;border:0;box-shadow:none}
  .pub .pmenu.open .pdrop{display:block}
  .pub .pmenu:hover:not(.open) .pdrop{display:none}
}

/* 넓은 화면인데 메뉴가 넘칠 때(Pub.fitNav 가 글자 폭을 재서 붙인다, NA1-258) — 위 폰 머리줄과 같은 모양 */
.pub .pubhead.fold{flex-wrap:wrap;gap:8px;padding-block:10px;align-items:center}
.pub .pubhead.fold .ptag{display:none!important}
.pub .pubhead.fold .pnav-btn{display:flex;flex-direction:column;justify-content:center;gap:4px;flex:none;width:44px;height:44px;margin-left:auto;padding:0 11px;border:1px solid var(--line);border-radius:8px;background:var(--paper);cursor:pointer}
.pub .pubhead.fold .pnav-btn i{display:block;height:2px;border-radius:2px;background:var(--brand-ink);transition:transform .3s ease,opacity .2s ease}
.pub .pubhead.fold.open .pnav-btn i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.pub .pubhead.fold.open .pnav-btn i:nth-child(2){opacity:0}
.pub .pubhead.fold.open .pnav-btn i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.pub .pubhead.fold>nav{display:none;flex:0 0 100%;flex-direction:column;align-items:stretch;gap:2px;margin:4px 0 0;padding-top:8px;border-top:1px solid var(--line);overflow:visible}
.pub .pubhead.fold.open>nav{display:flex;animation:lxFade .3s ease-out}
.pub .pubhead.fold>nav>a,.pub .pubhead.fold nav .pmenu>a{display:flex;width:100%;box-sizing:border-box;min-height:48px;padding:10px 12px;border-radius:8px;font-size:1.05rem}
.pub .pubhead.fold nav .pmenu{display:block;width:100%}
.pub .pubhead.fold nav a.go{justify-content:center}
.pub .pubhead.fold nav .pmenu>a::after{right:16px}
.pub .pubhead.fold .pdrop{position:static;display:none;min-width:0;width:100%;padding:0 0 6px 8px;border:0;box-shadow:none}
.pub .pubhead.fold .pmenu.open .pdrop{display:block}
.pub .pubhead.fold .pmenu:hover:not(.open) .pdrop{display:none}
.pub .pubhead.fold .pdrop a{display:flex;width:100%;box-sizing:border-box;min-height:46px;padding:7px 8px;font-size:1rem;white-space:normal}

/* 폰 다듬기 */
.pub .lx-more{display:none}
.pub .pubhead nav .pmenu>a{position:relative}
@media(max-width:859px){
  .pub .pubhead .pdrop a{display:flex;width:100%;box-sizing:border-box;min-height:46px;padding:7px 8px;font-size:1rem;white-space:normal}
  .pub .pubhead .pdrop .ic{flex:none;margin:0}
  .pub .pmenu.open>a::after{transform:translateY(-30%) rotate(225deg)}
  .pub .pl-btn{min-height:44px}
  .pub .langsel{min-height:44px}
}
@media(max-width:759px){
  .pub .pgrid.hero3{display:flex;flex-direction:column;gap:14px}
  .pub .pgrid.hero3 .ha{order:1}.pub .pgrid.hero3 .hb{order:2}.pub .pgrid.hero3 .pfig.hero{order:3;margin:8px 0 26px}
  .pub .phero h1{font-size:clamp(1.6rem,7vw,1.95rem);line-height:1.28}
  .pub .lx-vp small{font-size:.82rem}
  .pub .lx-mini{min-height:44px;padding:8px 14px}
  .pub section{padding:34px 0}
  /* 고민 카드 — 폰에서도 그림 옆에 글. 길이를 줄인다 */
  .pub .lx-pains{gap:8px}
  .pub .lx-pain{grid-template-columns:36% 1fr;gap:10px;padding:8px}
  .pub .lx-pain h3{font-size:1rem}
  .pub .lx-pain .lx-ans{font-size:.9rem;margin-top:5px}
  /* 도구 칸 — 처음에는 여섯 개만 */
  .pub .lx-labs:not(.all) .lx-lab:nth-child(n+7){display:none}
  .pub .lx-more{display:block;width:100%;min-height:48px;margin-top:10px;border:1px solid var(--line);border-radius:8px;background:var(--paper);font:inherit;font-weight:800;color:var(--ink);cursor:pointer}
  .pub .lx-more[hidden]{display:none}
  .pub .lx-easy{margin-top:40px}
  .pub .lx-ch{padding:12px 0}
  .lx-root{padding-bottom:6px}
  .lx-root .pcta-fixed{opacity:0;translate:0 90px;pointer-events:none;transition:opacity .35s ease,translate .45s cubic-bezier(.22,1,.36,1)}
  .lx-root .pcta-fixed.on{opacity:1;translate:0 0;pointer-events:auto}
}
/* 일본어·중국어는 띄어쓰기가 없어 keep-all 이면 글이 끊기지 않고 칸이 벌어져 묶음이 오른쪽으로 밀린다(대표님 2026-11-01). 한국어·영어는 그대로 */
html[lang=ja] .pub,html[lang=zh] .pub,html[lang=ja] .pub *,html[lang=zh] .pub *{word-break:normal;line-break:strict;overflow-wrap:anywhere}
.pub .pubhead nav a,.pub .pubhead nav a.go,.pub .pbtn,.pub .pcta-fixed{border-radius:8px}   /* 공개 단추도 8px — 알약 금지(2026-11-01 대표님) */
/* 공개 머리줄 고정(2026-11-01 대표님 「윗부분 고정」) — 공개 페이지는 #phead, 홈은 머리줄만 든 .pub 가 틀이다 */
body.pub>.pubhead,#phead>.pubhead,div.pub:has(>.pubhead){position:sticky;top:0;z-index:40;background:var(--paper,#fff)}
/* 바탕은 양옆으로 넓힌 층이 맡는다 — clip-path 로 자르면 펼침 메뉴까지 잘린다(2026-11-01 1차 감사). 넓힌 층이 가로 스크롤을 만들지 않게 바깥을 clip 한다 */
body.pub>.pubhead::before,#phead>.pubhead::before,div.pub:has(>.pubhead)::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;background:inherit;z-index:-1;pointer-events:none}
html:has(.pubhead),html:has(.pubhead) body{overflow-x:clip}
@media(min-width:860px){.pub .pubhead nav{overflow:visible}}
body.site div.pub:has(>.pubhead){background:var(--bg,#F4F6FA)}   /* 홈 바탕색과 같게 — 흰 띠가 뜨지 않는다(대표님) */
html:has(.pubhead){scroll-padding-top:104px}
/* 비로그인 홈의 꼬리는 Pub.foot 한 벌이다(NA1-264). 홈이 뒤에 붙이는 옛 꼬리는 회원 화면에서만 쓴다 */
.lx-root~.pfoot{display:none}
body.site .pub .pubfoot.pwrap{max-width:none;padding-left:0;padding-right:0}
/* 만든 사람 한 줄(모객 GR-40) — 첫 화면 바로 아래의 얇은 띠. 자세한 소개는 맨 아래 #lx-person */
.pub section.lx-maker{display:flex;align-items:center;gap:14px;padding:18px 0}
.lx-maker img{width:56px;height:56px;border-radius:50%;flex:none}
.lx-maker p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2,#3B4256)}
.lx-maker b{color:var(--ink,#1E2340)}
.lx-link{background:none;border:0;padding:0;font:inherit;color:var(--accent,#2E69FC);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* 체험 투표(모객 GR-33) — 넓은 화면은 설명 | 막대+QR, 폰은 QR 대신 /try/ 단추 */
.pub section.lx-try{padding:36px 0}
.lx-try-in{display:grid;gap:22px;align-items:center}
.lx-try-box{background:#fff;border:1px solid var(--line);border-radius:10px;padding:20px 22px;display:grid;gap:10px}
.lx-try-q{font-weight:800;color:var(--ink,#1E2340);display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.lx-try-q small{font-weight:600;color:var(--accent,#2E69FC);font-size:.85rem;white-space:nowrap}
.lx-try-r{display:grid;grid-template-columns:120px 1fr 36px;gap:10px;align-items:center;font-size:.92rem}
.lx-try-r i{display:block;height:14px;background:var(--line);border-radius:4px;overflow:hidden}
.lx-try-r b{display:block;height:100%;background:var(--accent,#2E69FC);transition:width .6s ease}
.lx-try-r em{font-style:normal;font-weight:700;text-align:right}
.lx-try-qr{display:none;align-items:center;gap:14px;margin-top:6px;padding-top:12px;border-top:1px solid var(--line);font-size:.9rem;color:var(--ink-soft,#5A6275)}
.lx-try-qr svg{width:110px;height:110px;flex:none}
@media(min-width:860px){.lx-try-in{grid-template-columns:1fr 1fr;gap:40px}.lx-try-qr{display:flex}.lx-try-m{display:none!important}}
@media (prefers-reduced-motion:reduce){.lx-try-r b{transition:none}}