/* 프로그램 페이지 전용 (홈페이지 장면·버튼·목록 모양을 그대로 쓰고, 폰 화면·영상 창만 더함) */
.pgm .scene{min-height:auto;padding:calc(var(--hd) + 56px) 0 72px}
.pgm .scene .wrap{min-height:0}
.pgm .scene:nth-of-type(even){background:var(--ivory)}
.pgm .scene.l .wrap{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
.pgm .scene.r .wrap{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr)}
.pgm .scene .body{margin-top:22px;font-size:clamp(16px,1.2vw,19px);color:var(--sub);line-height:1.75}
.pgm .state{display:inline-block;margin-top:18px;font-size:14px;font-weight:700;padding:6px 14px;border-radius:999px;background:var(--gr-l);color:var(--gr-d)}
.pgm .state.soon{background:var(--or-l);color:var(--or-d)}
.pgm .state.dev{background:#EAEAE7;color:var(--mute)}
.pgm .lines b{color:var(--ink);font-weight:700}
.pgm .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.pgm .scene.r .acts{justify-content:flex-end}
.pgm .scene.r .lines{width:fit-content;margin-left:auto;text-align:left}
.pgm .acts .btn{min-height:52px;padding:0 24px;font-size:16px}
.pgm .note{margin-top:14px;font-size:13px;color:var(--mute)}
.pgm .note a{text-decoration:underline;text-underline-offset:3px}
.pgm .media{justify-self:center;width:min(300px,100%)}
.pgm .scene.r .media{order:-1}
.pgm .intro .art{max-height:min(62vh,640px)}

.phone{position:relative;display:block;width:100%;aspect-ratio:9/19;border-radius:40px;padding:10px;background:#141413;border:0;cursor:pointer;font:inherit;box-shadow:0 40px 60px -30px rgba(0,0,0,.5),inset 0 0 0 2px #2c2c2a;transition:transform .3s cubic-bezier(.23,1,.32,1)}
.phone .sc{position:absolute;inset:10px;border-radius:31px;overflow:hidden;background:#fff}
.phone .sc img{width:100%;height:100%;object-fit:cover;object-position:top}
.phone .play{position:absolute;left:50%;top:50%;translate:-50% -50%;width:74px;height:74px;border-radius:50%;background:var(--or);display:grid;place-items:center;box-shadow:0 14px 30px -10px rgba(240,120,38,.7);transition:transform .25s cubic-bezier(.23,1,.32,1)}
.phone .play::after{content:"";margin-left:6px;border-left:22px solid #fff;border-top:14px solid transparent;border-bottom:14px solid transparent}
.phone .cap{position:absolute;left:50%;bottom:26px;translate:-50% 0;white-space:nowrap;font-size:13px;font-weight:700;color:#fff;background:rgba(17,17,17,.82);padding:7px 14px;border-radius:999px}
@media (hover:hover) and (pointer:fine){ .phone:hover{transform:translateY(-6px)} .phone:hover .play{transform:scale(1.08)} }
.eps{display:flex;gap:8px;margin-top:16px;justify-content:center}
.eps button{font:inherit;font-size:14px;font-weight:700;padding:9px 15px;border-radius:999px;border:1.5px solid #d6d6d2;background:#fff;cursor:pointer;transition:border-color .2s ease,color .2s ease}
.eps button:hover{border-color:var(--or);color:var(--or-d)}

.vm{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;background:rgba(17,17,17,.78);opacity:0;visibility:hidden;transition:opacity .22s cubic-bezier(.23,1,.32,1),visibility 0s .22s}
.vm.on{opacity:1;visibility:visible;transition:opacity .22s cubic-bezier(.23,1,.32,1)}
.vm-box{position:relative;width:min(420px,100%);transform:scale(.96);transition:transform .25s cubic-bezier(.23,1,.32,1)}
.vm.on .vm-box{transform:none}
.vm video{width:100%;max-height:calc(100dvh - 120px);border-radius:22px;background:#000;object-fit:contain}
.vm-t{color:#fff;font-weight:700;margin-bottom:10px;padding-right:48px}
.vm-x{position:absolute;right:0;top:-6px;width:40px;height:40px;border-radius:50%;border:0;background:#fff;cursor:pointer}
.vm-x::before,.vm-x::after{content:"";position:absolute;left:12px;top:19px;width:16px;height:2px;background:#111;rotate:45deg}
.vm-x::after{rotate:-45deg}
.quick a.q-prog.on{background:var(--gr-l)}

@media (max-width:1023px){
  .pgm .scene.l .wrap,.pgm .scene.r .wrap{grid-template-columns:1fr}
  .pgm .scene.r .txt{text-align:left} .pgm .scene.r .tag{margin-left:0} .pgm .scene.r .acts{justify-content:flex-start}
  .pgm .scene.r .media{order:0}
  .pgm .scene.r .lines{margin-left:0}
  .pgm .media{width:min(280px,76%);margin-top:28px}
  .pgm .intro .art{display:none}
}
@media (prefers-reduced-motion:reduce){ .phone,.phone .play,.vm,.vm-box{transition:none} }

/* ── 차별화 모음 (special.html) ── */
.sp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,24px);margin-top:clamp(28px,5vh,56px)}
.sp-item{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 18px 40px -30px rgba(0,0,0,.35);transition:transform .3s cubic-bezier(.23,1,.32,1),box-shadow .3s cubic-bezier(.23,1,.32,1),border-color .2s ease}
.sp-item .ph{aspect-ratio:16/10;overflow:hidden;background:var(--ivory)}
.sp-item .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.23,1,.32,1)}
.sp-item .ph.contain img{object-fit:contain;padding:14px}
.sp-item .bd{display:flex;flex-direction:column;gap:8px;padding:20px 22px 22px;flex:1}
.sp-item .kd{font-size:12.5px;font-weight:800;letter-spacing:.08em;color:var(--or)}
.sp-item h3{font-size:clamp(19px,1.5vw,23px);letter-spacing:-.03em;line-height:1.35}
.sp-item p{font-size:15px;color:var(--sub);line-height:1.6}
.sp-item .go{margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:15px;color:var(--ink)}
.sp-item .go::after{content:"";width:8px;height:8px;border-top:2px solid currentColor;border-right:2px solid currentColor;rotate:45deg;transition:translate .25s cubic-bezier(.23,1,.32,1)}
.sp-item.page .go{color:var(--or-d)}
@media (hover:hover) and (pointer:fine){
  .sp-item:hover{transform:translateY(-6px);border-color:var(--or);box-shadow:0 30px 50px -30px rgba(0,0,0,.45)}
  .sp-item:hover .ph img{transform:scale(1.04)}
  .sp-item:hover .go::after{translate:4px 0}
}
.pgm .sp .wrap{display:block}
.pgm .sp h2{max-width:900px}

/* ── 사진 모음 (wrap.html) ── */
.gal{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px;margin-top:clamp(24px,4vh,44px)}
.gal button{position:relative;border:0;padding:0;cursor:zoom-in;border-radius:18px;overflow:hidden;background:#ddd;font:inherit}
.gal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.23,1,.32,1)}
.gal figcaption,.gal .cp{position:absolute;left:12px;bottom:12px;font-size:13px;font-weight:700;color:#fff;background:rgba(17,17,17,.7);padding:6px 12px;border-radius:999px}
@media (hover:hover) and (pointer:fine){ .gal button:hover img{transform:scale(1.04)} }
.gal .w8{grid-column:span 8;aspect-ratio:16/11}.gal .w4{grid-column:span 4;min-height:100%}.gal .w6{grid-column:span 6;aspect-ratio:16/7.5}.gal .w12{grid-column:span 12;aspect-ratio:16/6}
.views{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:clamp(24px,4vh,44px)}
.views figure{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 18px 14px;display:flex;flex-direction:column;align-items:center;gap:10px}
.views figure.sm img{max-height:300px;width:auto}
.views img{width:100%;height:auto;cursor:zoom-in}
.views figcaption{font-size:14px;font-weight:700;color:var(--sub)}
.vm img{display:block;max-width:min(1200px,100%);max-height:calc(100dvh - 120px);border-radius:16px;margin:0 auto;background:#fff}
.vm-box.wide{width:min(1200px,100%)}
@media (max-width:1023px){
  .sp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gal .w8,.gal .w4,.gal .w6,.gal .w12{grid-column:span 12;aspect-ratio:16/11}
  .gal .w4{aspect-ratio:4/5}
  .views{grid-template-columns:1fr}
}
@media (max-width:640px){ .sp-grid{grid-template-columns:1fr} }

/* ── 줄눈학원 고르는 법 (guide.html) ── */
.gd-list{list-style:none;display:grid;gap:12px;margin-top:clamp(28px,5vh,52px);counter-reset:none}
.gd-list li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:18px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px 24px}
.gd-n{width:44px;height:44px;border-radius:50%;background:var(--or);color:#fff;font-weight:800;font-size:19px;display:grid;place-items:center}
.gd-b h3{font-size:clamp(19px,1.5vw,23px);letter-spacing:-.02em}
.gd-how{margin-top:6px;color:var(--sub);line-height:1.7}
.gd-our{margin-top:12px;padding:12px 16px;border-radius:12px;background:var(--ivory);line-height:1.7;font-size:15.5px}
.gd-our b{color:var(--or-d);margin-right:4px}
.gd-our a{font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
@media (max-width:640px){ .gd-list li{grid-template-columns:1fr;gap:10px;padding:18px} }

/* ── 자주 묻는 질문 30 (faq.html) ── */
.fq .fq-h{margin:clamp(32px,5vh,52px) 0 14px;font-size:clamp(19px,1.5vw,23px);letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
.fq .fq-h::before{content:"";width:22px;height:3px;border-radius:2px;background:var(--or)}
.fq .faq-list{max-width:900px}

/* ── 줄눈 이야기 (story) ── */
.st-crumb{font-size:13.5px;color:var(--mute);margin-bottom:18px}
.st-crumb a{text-decoration:underline;text-underline-offset:3px}
.st-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(24px,4vw,64px);align-items:center}
.st h1{font-size:clamp(32px,4vw,58px);line-height:1.2;letter-spacing:-.04em;font-weight:700;text-wrap:balance}
.st .st-list-h{font-size:clamp(30px,3.6vw,54px);font-weight:600}
.st-lead{margin-top:18px;font-size:clamp(18px,1.5vw,23px);line-height:1.6;color:var(--or-d);font-weight:600;letter-spacing:-.02em}
.st-by{margin-top:12px;font-size:14px;color:var(--mute)}
.st-head .acts{margin-top:26px}
.st-cover{aspect-ratio:5/7;width:min(240px,100%);margin-left:auto;border-radius:10px 18px 18px 10px;background:#1C1B19;color:#F3F3F1;padding:28px 24px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:inset 6px 0 0 var(--or),0 30px 50px -28px rgba(0,0,0,.6)}
.st-cover.sm{width:100%;margin:0;padding:16px 14px;border-radius:6px 12px 12px 6px;box-shadow:inset 4px 0 0 var(--or)}
.st-cover .st-cv-k{font-size:12px;letter-spacing:.06em;color:#FFB27A;font-weight:700}
.st-cover b{font-size:clamp(20px,1.9vw,28px);line-height:1.35;letter-spacing:-.03em}
.st-cover.sm b{font-size:15px}
.st-cover .st-cv-a{font-size:12px;color:rgba(243,243,241,.65)}
.st-cover-img{width:min(240px,100%);height:auto;margin-left:auto;border-radius:8px;box-shadow:0 30px 50px -28px rgba(0,0,0,.6)}
.st-body{max-width:760px;margin-top:clamp(40px,6vh,72px)}
.st-body h2{font-size:clamp(21px,1.7vw,27px);letter-spacing:-.03em;line-height:1.4;margin:42px 0 12px;font-weight:700}
.st-body h2:first-child{margin-top:0}
.st-body p{font-size:17px;line-height:1.9;color:#333;margin-top:12px}
.st-small{margin-top:48px;max-width:760px;padding:20px 24px;border-radius:18px;background:var(--or-l);display:flex;flex-direction:column;gap:4px}
.st-small b{color:var(--or-d);font-size:clamp(17px,1.4vw,21px);letter-spacing:-.02em}
.st-small span{color:var(--sub);font-size:15px;line-height:1.7}
.st-rels{margin-top:56px}
.st-rels h2{font-size:20px;letter-spacing:-.02em;margin-bottom:14px}
.st-rel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.st-rel{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border-radius:16px;background:#fff;border:1px solid var(--line);transition:border-color .2s ease,transform .25s cubic-bezier(.23,1,.32,1)}
.st-rel b{font-size:16.5px;letter-spacing:-.02em}
.st-rel span{font-size:14px;color:var(--sub);line-height:1.6}
@media (hover:hover) and (pointer:fine){ .st-rel:hover{border-color:var(--or);transform:translateY(-3px)} }
.st-book{margin-top:56px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,3vw,48px);padding:clamp(26px,3.4vw,46px);border-radius:24px;background:#1C1B19;color:#F3F3F1;scroll-margin-top:100px}
.st-book h2{font-size:clamp(22px,2vw,30px);letter-spacing:-.03em}
.st-book p{margin-top:10px;color:rgba(243,243,241,.75);line-height:1.7}
.st-form{display:grid;gap:12px;min-width:0}
.st-form label{display:grid;gap:6px;font-size:14px;font-weight:600;color:#F3F3F1}
.st-form small{font-weight:400;color:rgba(243,243,241,.6)}
.st-form input[name=name],.st-form input[name=phone]{width:100%;min-width:0;box-sizing:border-box;font:inherit;font-size:16px;padding:13px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff}
.st-form input:focus-visible{outline:2px solid var(--or);outline-offset:2px}
.st-form .st-agree{display:flex;align-items:center;gap:10px;font-weight:600}
.st-form .st-agree input{width:20px;height:20px;accent-color:var(--or)}
.st-agree-d{font-size:13px;color:rgba(243,243,241,.7)}
.st-agree-d summary{cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.st-agree-d p{margin-top:6px;line-height:1.7;font-size:13px}
.st-agree-d a{color:#FFB27A}
.st-form .btn{min-height:54px;font-size:17px;border:0;cursor:pointer;font-family:inherit}
.st-form .btn:disabled{opacity:.6;cursor:wait}
.st-msg{font-size:14.5px;min-height:1.4em;color:#9FE3B0;line-height:1.6}
.st-msg.bad{color:#FFB27A}
.st-msg a{color:#fff;text-decoration:underline}
.st-end{margin-top:32px;display:flex;flex-wrap:wrap;gap:10px}
.st-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:clamp(24px,4vh,44px)}
.st-card{display:grid;grid-template-columns:96px minmax(0,1fr);gap:18px;align-items:center;padding:16px;border-radius:18px;background:#fff;border:1px solid var(--line);transition:border-color .2s ease,transform .25s cubic-bezier(.23,1,.32,1)}
.st-card-c .st-cover-img{width:96px;margin:0;border-radius:4px}
.st-card-b{display:flex;flex-direction:column;gap:6px}
.st-card-b b{font-size:clamp(17px,1.3vw,20px);letter-spacing:-.02em;line-height:1.4}
.st-card-b span{font-size:14.5px;color:var(--sub);line-height:1.6}
.st-card-b em{font-style:normal;font-weight:700;font-size:14px;color:var(--or-d)}
@media (hover:hover) and (pointer:fine){ .st-card:hover{border-color:var(--or);transform:translateY(-3px)} }
.st-bar{position:fixed;left:50%;bottom:14px;translate:-50% 0;z-index:60;display:flex;align-items:center;gap:8px;padding:8px 8px 8px 18px;border-radius:999px;background:rgba(28,27,25,.94);color:#F3F3F1;box-shadow:0 18px 40px -18px rgba(0,0,0,.6);max-width:calc(100% - 24px);backdrop-filter:blur(8px)}
.st-bar span{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-bar b{color:#FFB27A}
.st-bar em{font-style:normal;color:rgba(243,243,241,.65);font-size:12.5px}
.st-bar a{flex:none;font-size:13.5px;font-weight:700;padding:9px 14px;border-radius:999px;background:var(--or);color:#111}
.st-bar a+a{background:#fff}
body.pgm:has(.st-bar) .ft{padding-bottom:90px}
@media (max-width:1023px){
  .st-head{grid-template-columns:1fr}
  .st-cover,.st-cover-img{margin:0 auto;width:min(150px,40%)}
  .st-rel-grid,.st-grid,.st-book{grid-template-columns:minmax(0,1fr)}
  .st-bar em{display:none}
}
@media (max-width:640px){ .st-bar span{display:none} .st-bar{padding:8px} }
.st-book h2{color:#fff}
.st-cover.sm{aspect-ratio:5/7;justify-content:space-between}
.st-cover.sm .st-cv-k{font-size:10.5px;line-height:1.35}
.st-cover.sm .st-cv-n{font-size:28px;color:#FFB27A;letter-spacing:-.02em}
.st-msg .st-open{display:inline-block;margin-top:8px;padding:9px 16px;border-radius:999px;background:var(--or);color:#111;font-weight:700;text-decoration:none}
/* 하위 페이지 첫 제목은 검색용 h1이지만 모양은 장면 제목(h2)과 같게 */
.scene h1.h1-as-h2{font-size:clamp(28px,3.7vw,70px);font-weight:500;line-height:1.3;letter-spacing:-.04em;text-wrap:balance}
.pgm .sp h1.h1-as-h2{max-width:900px}
.scene h1.h1-as-h2{color:#141210}.scene h1.h1-as-h2 em{font-weight:700}
.st-author{margin-top:40px;max-width:760px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:16px 20px;border-radius:16px;border:1px solid var(--line);background:#fff}
.st-author .st-au-k{font-size:12.5px;font-weight:700;color:var(--or-d);letter-spacing:.04em}
.st-author b{font-size:17px}
.st-author span:not(.st-au-k){flex:1 1 100%;font-size:14.5px;color:var(--sub);line-height:1.7}
.st-author a{font-weight:700;font-size:14.5px;color:var(--or-d)}
.st-same{font-size:13px;line-height:1.6;color:var(--mute,#6b665f);margin-top:8px}
/* 폰(글자 크게 설정한 갤럭시 포함)에서 책 받기 칸이 화면 밖으로 넘치지 않게 (10/22 서대표님 캡처) */
.st-book,.st-book-l,.st-form label{min-width:0}
.st-book p,.st-book h2,.st-agree span{overflow-wrap:anywhere}
.st-form .st-agree{align-items:flex-start}.st-form .st-agree input{flex:none;margin-top:2px}
@media (max-width:640px){ .st-book{padding:22px 18px;border-radius:20px} }
.st-book .st-same{color:rgba(243,243,241,.6)}
/* 책 받기 칸이 보이면 아래 띠를 숨김 — 주황 버튼을 덮지 않게 */
.st-bar{transition:opacity .2s ease,translate .2s cubic-bezier(.23,1,.32,1)}
.st-bar.off{opacity:0;translate:-50% 140%;pointer-events:none}
@media (prefers-reduced-motion:reduce){ .st-bar{transition:opacity .2s ease} .st-bar.off{translate:-50% 0} }
.st-book{margin-bottom:24px}
/* 책 전체 구매 버튼 (래피드, 홈페이지 쿠폰 HIGHEND7700 · 2026-10-23) */
.st-buy{margin-top:16px;display:grid;gap:8px;justify-items:start}
.st-buy-b{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:999px;font-weight:800;text-decoration:none}
.st-coupon{margin:0!important;font-size:13.5px;line-height:1.6;color:rgba(243,243,241,.72)!important}
.st-coupon b{color:#fff;letter-spacing:.04em;font-family:ui-monospace,Menlo,monospace}
.st-copy{margin-left:6px;font:700 12.5px/1 inherit;padding:7px 10px;border-radius:8px;border:1px solid rgba(243,243,241,.35);background:transparent;color:#fff;cursor:pointer;vertical-align:1px}
.st-copy:focus-visible,.st-buy-b:focus-visible{outline:2px solid #F07826;outline-offset:2px}
.st-msg .st-buy{margin-top:12px}
.st-msg .st-buy-b{text-decoration:none;color:#fff}