/* ===== 디자인 스타일: 스튜디오 (디자인 탭 › 디자인 스타일) — 10-22
   기준 = 사내 디자이너 사이트 video.ascendmedia.co.kr 톤:
   검정 두 톤 번갈아(#09090b/#0d0d10) · 빨강 하나(#ce1e25, 어두운 바탕 글씨는 #ff5a60) · Pretendard 800~900 좁은 자간
   · 숫자는 Geist · 카드 = 은은한 그라데이션 + 얇은 테두리 · 빨간 빛 그림자 · 배경 질감
   html[data-preset="studio"] 일 때만 적용 (다른 사이트는 그대로) ===== */
[data-preset="studio"]{
  --bg:#09090b; --bg2:#0d0d10; --surface:#131317; --surface2:#16171a; --line:rgba(255,255,255,.08);
  --text:#fff; --muted:rgba(255,255,255,.72); --faint:rgba(255,255,255,.58);
  --primary:#ce1e25; --primary-lit:#ff5a60; --primary-deep:#a8171d; --on-primary:#fff;
  --radius:16px; --wrap:1240px; --ease:cubic-bezier(.16,1,.3,1);
  --num:"Geist","Pretendard Variable",Pretendard,sans-serif;
  --sh-red:0 2px 8px rgba(96,10,14,.32),0 22px 48px -22px rgba(96,10,14,.55);
  --sh-dark:0 2px 8px rgba(9,9,11,.5),0 24px 56px -24px rgba(9,9,11,.85);
}
[data-preset="studio"] body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/* 아주 옅은 필름 질감 (PC) */
@media (min-width:761px){
  [data-preset="studio"] body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.04;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
}
[data-preset="studio"] .wrap{max-width:var(--wrap);padding:0 clamp(20px,4vw,40px)}
[data-preset="studio"] .hl{color:var(--primary-lit)}

/* --- 섹션 배경: 기본·어둡게 = 검정, 연한 회색 = 한 톤 밝은 검정 + 질감, 포인트색 = 깊은 빨강, 흰 바탕 = 읽기용 */
[data-preset="studio"] .sec{padding:clamp(4.5rem,7.5vw,7.5rem) 0}
[data-preset="studio"] .sec.compact{padding:clamp(2.5rem,4vw,4rem) 0}
[data-preset="studio"] .sec,[data-preset="studio"] .tone-dark{--bg:#09090b;--surface:#131317;--surface2:#16171a;--line:rgba(255,255,255,.08);--text:#fff;--muted:rgba(255,255,255,.72);background:#09090b;color:#fff}
[data-preset="studio"] .tone-surface{background:#0d0d10}
[data-preset="studio"] .tone-surface::before,[data-preset="studio"] .tone-gradient::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("studio/dark-2.jpg") center/cover;filter:saturate(.7);opacity:.85}
[data-preset="studio"] .tone-surface::after,[data-preset="studio"] .tone-gradient::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 90% at 76% 22%,rgba(10,10,12,.42) 0%,rgba(10,10,12,.78) 46%,rgba(10,10,12,.95) 78%)}
[data-preset="studio"] .tone-gradient::before{background-image:url("studio/dark-1.jpg")}
[data-preset="studio"] .sec > .wrap,[data-preset="studio"] .sec > .marquee{position:relative;z-index:1}
/* 첫 화면은 배경(사진·영상·질감)이 화면 전체를 덮어야 하므로 안쪽 상자를 기준으로 삼지 않음 (글·사진은 각자 z-index 로 위에) */
[data-preset="studio"] .sec-hero > .wrap{position:static}
[data-preset="studio"] .tone-primary{background:radial-gradient(120% 130% at 50% 0%,#4a080c 0%,#1a0204 58%,#0d0102 100%);--muted:rgba(255,255,255,.8)}
[data-preset="studio"] .tone-primary .hl{color:#fff;text-decoration:none}
[data-preset="studio"] .tone-light{--bg:#fff;--surface:#f5f5f7;--surface2:#ededf0;--line:#e4e4e7;--text:#0a0a0a;--muted:#48494e;background:#fff;color:#0a0a0a}
[data-preset="studio"] .tone-light .hl{color:var(--primary)}
[data-preset="studio"] .tone-light .card,[data-preset="studio"] .tone-light .pain,[data-preset="studio"] .tone-light .faq details,[data-preset="studio"] .tone-light .bar{background:#fff;border-color:#e4e4e7;box-shadow:0 1px 2px rgba(24,24,27,.05),0 20px 44px -22px rgba(24,24,27,.22)}
[data-preset="studio"] .tone-light .card:hover{border-color:rgba(206,30,37,.35)}
[data-preset="studio"] .tone-light .cards-numbered .card{background:none;box-shadow:none;border-top-color:rgba(10,10,10,.14)}
[data-preset="studio"] .tone-light .step{border-top-color:rgba(10,10,10,.14)}
[data-preset="studio"] .tone-light .step:first-child{border-top-color:var(--primary)}
[data-preset="studio"] .tone-light .step-no{color:#6b6b73}
[data-preset="studio"] .tone-light .step:first-child .step-no,[data-preset="studio"] .tone-light .card-no{color:var(--primary)}
[data-preset="studio"] .tone-light .bar > span{color:#2a2b2f}
[data-preset="studio"] .tone-light .bar strong{color:var(--primary)}
[data-preset="studio"] .tone-light .bar strong::before{color:#999aa0}
[data-preset="studio"] .tone-light .card-ic.is-line{color:#2a2b2f}
[data-preset="studio"] .tone-light .ic-svg .ic-acc{stroke:var(--primary)}

/* --- 제목 */
[data-preset="studio"] .sec-head{margin-bottom:clamp(2.25rem,3.6vw,3.5rem)}
[data-preset="studio"] .eyebrow{font-family:var(--num);color:var(--primary-lit);font-size:13px;font-weight:800;letter-spacing:.08em;margin-bottom:14px}
[data-preset="studio"] .tone-light .eyebrow{color:var(--primary)}
[data-preset="studio"] .sec-title{font-size:clamp(1.9rem,3.7vw,3.25rem);font-weight:800;line-height:1.34;letter-spacing:-.026em}
[data-preset="studio"] .sec-sub{font-size:clamp(.95rem,1.05vw,1.0625rem);font-weight:500;line-height:1.6;color:var(--muted);max-width:680px;margin-left:auto;margin-right:auto}
[data-preset="studio"] .split-txt .sec-sub,[data-preset="studio"] .sc-txt .sec-sub,[data-preset="studio"] .form-intro .sec-sub{margin-left:0}
[data-preset="studio"] .st{letter-spacing:-.03em}
[data-preset="studio"] .st-xl{font-size:clamp(2.1rem,4.6vw,4rem);font-weight:900;letter-spacing:-.04em;line-height:1.25}
[data-preset="studio"] .st-lg{font-size:clamp(1.75rem,3.4vw,3rem);font-weight:800;line-height:1.34}
[data-preset="studio"] .st-sm{color:var(--muted)}
[data-preset="studio"] .fine{color:var(--faint)}

/* --- 버튼: 각진 빨강 (둥근 알약 → 8px) */
[data-preset="studio"] .btn{border-radius:8px;height:56px;padding:0 28px;font-size:clamp(1rem,1.1vw,1.0625rem);font-weight:800;letter-spacing:-.01em;
  transition:background .25s,transform .3s var(--ease),box-shadow .3s}
[data-preset="studio"] .btn:hover{background:var(--primary-deep);transform:translateY(-1px);box-shadow:var(--sh-red)}
[data-preset="studio"] .btn:active{transform:scale(.985)}
[data-preset="studio"] .btn::after{content:"→";display:inline-grid;place-items:center;width:28px;height:28px;border-radius:999px;margin-right:-10px;background:rgba(0,0,0,.2);font-size:14px;transition:transform .4s var(--ease)}
[data-preset="studio"] .btn:hover::after{transform:translateX(3px)}
[data-preset="studio"] .btn-lg{height:60px;padding:0 32px}
[data-preset="studio"] .btn-ghost{background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);border:0}
[data-preset="studio"] .btn-ghost:hover{background:rgba(255,255,255,.06);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
[data-preset="studio"] .tone-primary .btn{background:#fff;color:var(--primary)}
[data-preset="studio"] .tone-primary .btn::after{background:rgba(10,10,10,.08)}
[data-preset="studio"] .dk{border-radius:8px}
[data-preset="studio"] .dock .dk{border-radius:10px}

/* --- 상단 */
[data-preset="studio"] .hdr{background:rgba(9,9,11,.72);border-bottom-color:rgba(255,255,255,.07)}
[data-preset="studio"] .hdr-cta{border-radius:8px;padding:9px 18px}
[data-preset="studio"] .nav{color:rgba(255,255,255,.66)}
[data-preset="studio"] .nav-sub{background:#131317;border-color:rgba(255,255,255,.1)}

/* --- 첫 화면 */
[data-preset="studio"] .sec-hero{background:#0a0908}
[data-preset="studio"] .hero-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;letter-spacing:-.01em;line-height:1.3;
  padding:8px 14px 8px 8px;border-radius:999px;background:rgba(206,30,37,.12);border:1px solid rgba(255,90,96,.35);margin-bottom:26px}
[data-preset="studio"] .hero-eyebrow::before{content:"NEW";font-family:var(--num);font-size:11px;font-weight:800;letter-spacing:.06em;padding:3px 8px;border-radius:999px;background:var(--primary);color:#fff}
[data-preset="studio"] .hero-title{font-size:clamp(2.25rem,5vw,4.25rem);font-weight:900;letter-spacing:-.042em;line-height:1.18}
[data-preset="studio"] .hero-sub{font-size:clamp(1rem,1.4vw,1.25rem);font-weight:500;color:var(--muted);line-height:1.65}
[data-preset="studio"] .hero-points{list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:34px;font-size:14px;font-weight:700;color:rgba(255,255,255,.78)}
[data-preset="studio"] .hero-points li{display:flex;align-items:center;gap:8px}
[data-preset="studio"] .hero-points li::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--primary-lit);box-shadow:0 0 12px var(--primary)}
/* 글 왼쪽 + 사진·영상 오른쪽 */
[data-preset="studio"] .sec-hero:has(.hero-visual) > .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center;text-align:left;width:100%}
[data-preset="studio"] .sec-hero:has(.hero-visual) .hero-in{max-width:none;padding:0}
[data-preset="studio"] .sec-hero:has(.hero-visual) .btn-row,[data-preset="studio"] .sec-hero:has(.hero-visual) .roller{justify-content:flex-start}
[data-preset="studio"] .hero-visual{margin:0;position:relative;z-index:1}
[data-preset="studio"] .hero-visual img,[data-preset="studio"] .hero-visual video{width:100%;max-height:78vh;object-fit:contain;filter:drop-shadow(0 40px 60px rgba(0,0,0,.6))}
/* 배경 사진이 없는 첫 화면: 빨간 빛 번짐(기본 디자인용) 대신 영상 페이지와 같은 어두운 스튜디오 배경 — 10-22 */
[data-preset="studio"] .hero-bg.glow{background:url("studio/studio3.jpg") center/cover}
[data-preset="studio"] .hero-bg.glow span{display:none}
[data-preset="studio"] .hero-bg.glow::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,9,11,.92) 0%,rgba(9,9,11,.6) 55%,rgba(9,9,11,.35) 100%)}
[data-preset="studio"] .sec-hero:not(:has(.hero-visual)) .hero-bg.glow::after{background:linear-gradient(180deg,rgba(9,9,11,.55) 0%,rgba(9,9,11,.7) 60%,rgba(9,9,11,.95) 100%)}
/* 휴대폰 화면 안 영상: 사진·영상을 같은 상자에 겹침 (마스크 = 화면 모양) */
.hero-visual.has-screen{display:grid;width:min(100%,calc(78vh * .577));margin:0 auto;aspect-ratio:auto}
.hero-visual.has-screen > *{grid-area:1/1;width:100%;height:100%}
.hero-visual.has-screen img{position:relative;z-index:1;max-height:none!important;object-fit:fill!important}
.hv-screen{object-fit:cover;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
@media (max-width:760px){.hero-visual.has-screen{width:min(70%,calc(56vh * .577))}}
[data-preset="studio"] .hero-dim{background:linear-gradient(90deg,rgba(9,9,11,.92) 0%,rgba(9,9,11,.6) 55%,rgba(9,9,11,.35) 100%)}
[data-preset="studio"] .roller,[data-preset="studio"] .stat-num,[data-preset="studio"] .step-no,[data-preset="studio"] .split-no,[data-preset="studio"] .a-no,[data-preset="studio"] .plan .price{font-family:var(--num)}
[data-preset="studio"] .digit{border-radius:8px;box-shadow:inset 0 -6px 12px rgba(0,0,0,.25),var(--sh-red)}

/* --- 카드: 분홍 상자 아이콘 없애고, 은은한 검정 카드 + 빨간 선 아이콘 */
[data-preset="studio"] .card,[data-preset="studio"] .pain,[data-preset="studio"] .step,[data-preset="studio"] .stat,[data-preset="studio"] .cmp-l,[data-preset="studio"] .faq details,[data-preset="studio"] .bar{
  background:linear-gradient(180deg,#131317 0%,#0e0e12 100%);border:1px solid rgba(255,255,255,.07);box-shadow:none}
[data-preset="studio"] .card{padding:clamp(1.6rem,2.6vw,2.4rem);transition:border-color .3s var(--ease),transform .4s var(--ease)}
[data-preset="studio"] .card:hover{border-color:rgba(255,90,96,.34);transform:translateY(-4px)}
[data-preset="studio"] .card h3{font-size:clamp(1.2rem,1.6vw,1.45rem);font-weight:800;letter-spacing:-.028em;line-height:1.38}
[data-preset="studio"] .card p{color:var(--muted);font-size:15px;line-height:1.6}
[data-preset="studio"] .pain-ic.is-line,[data-preset="studio"] .card-ic.is-line{width:auto;height:auto;border:0;background:none;border-radius:0;color:rgba(255,255,255,.66);justify-content:flex-start}
[data-preset="studio"] .ic-svg{width:30px;height:30px;stroke-width:1.4}
[data-preset="studio"] .ic-svg .ic-acc{stroke:var(--primary-lit)}
[data-preset="studio"] .ic-svg .ic-dot{fill:var(--primary-lit)}
[data-preset="studio"] .card-ic{margin-bottom:22px}
/* 카드 아래 장면 사진/영상 + 작은 태그 */
[data-preset="studio"] .card.has-shot{display:flex;flex-direction:column;padding-bottom:clamp(1.2rem,2vw,1.6rem)}
.card-shot{position:relative;margin:22px 0 0;border-radius:12px;overflow:hidden;aspect-ratio:16/11;background:var(--surface2)}
.card-shot img,.card-shot video{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.card:hover .card-shot img,.card:hover .card-shot video{transform:scale(1.04)}
.chips{position:absolute;left:12px;bottom:12px;display:grid;gap:6px;justify-items:start;z-index:2}
.chip{display:inline-block;font-size:12px;font-weight:700;padding:.38em .7em;border-radius:7px;background:rgba(10,10,12,.82);color:#fff;border:1px solid rgba(255,255,255,.14)}
.chip-red{background:var(--primary);border-color:transparent}
.card-no{display:block;font-family:var(--num,inherit);font-size:13px;font-weight:800;letter-spacing:.1em;color:var(--primary);margin-bottom:10px}
[data-preset="studio"] .card-no{color:var(--primary-lit)}
/* 번호형: 상자 없이 위 선 + 큰 번호 */
[data-preset="studio"] .cards-numbered .card{background:none;border:0;border-top:1px solid rgba(255,255,255,.16);border-radius:0;padding:26px 0 0}
[data-preset="studio"] .cards-numbered .card:hover{transform:none}
[data-preset="studio"] .cards-numbered .card-no{font-size:clamp(2rem,3vw,2.75rem);letter-spacing:-.02em;margin-bottom:14px}

/* --- 고민: 한 줄 목록 / 카드형 (사진 + 번호) */
[data-preset="studio"] .pain{border-radius:14px;font-weight:600}
[data-preset="studio"] .pain .hl{color:var(--primary-lit)}
.pain-body{display:flex;flex-direction:column;gap:6px}
.pain-sub{font-size:14px;font-weight:500;color:var(--muted)}
.pain-list.pain-cards{display:grid;max-width:none;gap:20px}
.pain-cards.cols-2{grid-template-columns:repeat(2,1fr)}.pain-cards.cols-3{grid-template-columns:repeat(3,1fr)}.pain-cards.cols-4{grid-template-columns:repeat(4,1fr)}
.pain-cards .pain{position:relative;flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden;text-align:center}
.pain-cards .pain-body{padding:22px 22px 26px;align-items:center}
.pain-cards .pain-body > span:first-child{font-size:clamp(1.05rem,1.4vw,1.2rem);font-weight:800;letter-spacing:-.02em}
.pain-shot{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--surface2)}
.pain-shot img{width:100%;height:100%;object-fit:cover}
.pain-no{position:absolute;left:18px;top:14px;z-index:2;font-family:var(--num,inherit);font-size:clamp(1.4rem,2vw,1.8rem);font-weight:800;letter-spacing:-.02em;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.pain-no::after{content:"";display:block;width:22px;height:2px;margin-top:6px;background:var(--primary)}
.pain-cards .pain:not(.has-shot){padding-top:64px}
.pain-cards .pain:not(.has-shot) .pain-ic{align-self:center}

/* --- 진행 과정: 상자 대신 위 선 + 번호 (첫 단계 빨강) */
[data-preset="studio"] .steps{gap:clamp(16px,2vw,28px)}
[data-preset="studio"] .step{background:none;border:0;border-top:2px solid rgba(255,255,255,.16);border-radius:0;padding:18px 0 0}
[data-preset="studio"] .step:first-child{border-top-color:var(--primary)}
[data-preset="studio"] .step-no{font-size:13px;font-weight:800;letter-spacing:.08em;color:rgba(255,255,255,.5)}
[data-preset="studio"] .step:first-child .step-no{color:var(--primary-lit)}
[data-preset="studio"] .step-no::before{content:"STEP "}
[data-preset="studio"] .step h3{font-size:clamp(1.05rem,1.3vw,1.2rem);font-weight:800}

/* --- 큰 숫자 */
[data-preset="studio"] .stat-num{color:var(--primary-lit);font-weight:800;letter-spacing:-.035em}

/* --- 데이터 강조 줄 → 질문 → 답 행 */
[data-preset="studio"] .bar{align-items:center;border-radius:14px;padding:20px 26px}
[data-preset="studio"] .bar > span{color:rgba(255,255,255,.78);font-weight:600}
[data-preset="studio"] .bar strong{color:var(--primary-lit);font-weight:800}
[data-preset="studio"] .bar strong::before{content:"→";margin-right:12px;color:rgba(255,255,255,.4);font-weight:600}

/* --- 비교·FAQ·가격 */
[data-preset="studio"] .cmp-r{background:linear-gradient(160deg,rgba(206,30,37,.22) 0%,rgba(206,30,37,.06) 70%);border-color:rgba(255,90,96,.5);box-shadow:var(--sh-red)}
[data-preset="studio"] .cmp-r li::before{color:var(--primary-lit)}
[data-preset="studio"] .faq details{border-radius:12px}
[data-preset="studio"] .faq summary::after{color:var(--primary-lit)}
[data-preset="studio"] .plan-hl{background:linear-gradient(160deg,rgba(206,30,37,.22) 0%,rgba(206,30,37,.06) 70%);border-color:rgba(255,90,96,.5);box-shadow:var(--sh-red)}
[data-preset="studio"] .checks li::before{border-color:var(--primary-lit)}
[data-preset="studio"] .badge{background:rgba(255,90,96,.14);color:var(--primary-lit);border-radius:6px}

/* --- 쇼케이스·증빙·글+영상 */
[data-preset="studio"] .sc-tabs button{border-radius:8px;background:rgba(255,255,255,.05)}
[data-preset="studio"] .sc-frame{background:#131317;border-color:rgba(255,255,255,.08);box-shadow:var(--sh-dark)}
[data-preset="studio"] .sc-bar{background:#16171a}
[data-preset="studio"] .split-media video,[data-preset="studio"] .split-media img{border-radius:14px;box-shadow:var(--sh-dark)}
[data-preset="studio"] .pr-lesson{background:rgba(206,30,37,.1)}
[data-preset="studio"] .pr-lesson b,[data-preset="studio"] .pr-ba strong{color:var(--primary-lit)}

/* --- 문의폼·하단 */
[data-preset="studio"] .sec-form{background:#0d0d10}
[data-preset="studio"] .lead-form{background:#131317;border-color:rgba(255,255,255,.08);border-radius:16px}
[data-preset="studio"] .fld input,[data-preset="studio"] .fld select,[data-preset="studio"] .fld textarea{background:#0e0e12;border-color:rgba(255,255,255,.12);border-radius:8px}
[data-preset="studio"] .ftr{background:#09090b;border-top-color:rgba(255,255,255,.07);color:rgba(255,255,255,.5)}

/* ===== 성과 비교 블록 (A vs B) — 디자인 스타일과 무관하게 쓸 수 있게 기본 모양도 여기 ===== */
.duel{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.25rem,2.4vw,2rem)}
.duel-card{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1rem,2vw,1.75rem);align-items:center;padding:clamp(1rem,1.8vw,1.5rem);
  border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.duel-card:not(:has(.duel-shot)){grid-template-columns:1fr}
.duel-right{background:linear-gradient(160deg,color-mix(in srgb,var(--primary) 22%,transparent) 0%,color-mix(in srgb,var(--primary) 6%,transparent) 70%);
  border-color:color-mix(in srgb,var(--primary) 55%,transparent);box-shadow:0 2px 8px rgba(96,10,14,.32),0 22px 48px -22px rgba(96,10,14,.55)}
.duel-shot{margin:0;aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:var(--surface2)}
.duel-shot img,.duel-shot video{width:100%;height:100%;object-fit:cover}
.duel-body{min-width:0}
.duel-tag{display:inline-block;font-size:13px;font-weight:800;padding:.36em .75em;border-radius:6px;background:color-mix(in srgb,var(--text) 10%,transparent);color:var(--text)}
.duel-right .duel-tag{background:var(--primary);color:#fff}
.duel-k{margin-top:clamp(1rem,1.6vw,1.4rem);font-family:var(--num,inherit);font-size:13px;font-weight:800;letter-spacing:.08em;color:var(--muted)}
.duel-num{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;font-family:var(--num,inherit);font-size:clamp(2.75rem,5.4vw,4.75rem);font-weight:800;letter-spacing:-.035em;line-height:1.05;color:var(--muted)}
.duel-num small{font-size:.46em;font-weight:700;margin-left:-.35rem;letter-spacing:0;align-self:flex-end;padding-bottom:.2em}
.duel-right .duel-num{color:var(--primary-lit,var(--primary))}
.duel-up{display:inline-block;font-style:normal;font-family:inherit;font-size:12px;font-weight:800;line-height:1;padding:.4em .5em;border-radius:5px;background:var(--primary);color:#fff;letter-spacing:-.01em}
.duel-num .duel-up{font-size:clamp(.875rem,1.1vw,1.0625rem)}
.duel-track{height:8px;margin-top:.9rem;border-radius:999px;background:color-mix(in srgb,var(--text) 8%,transparent);overflow:hidden}
.duel-track i{display:block;height:100%;border-radius:999px;background:color-mix(in srgb,var(--text) 40%,transparent);transform-origin:left;transform:scaleX(var(--p,1));transition:transform .9s cubic-bezier(.16,1,.3,1)}
.duel-right .duel-track i{background:var(--primary)}
.js .duel-card.reveal:not(.in) .duel-track i{transform:scaleX(.02)}
.duel-list{margin:clamp(1rem,1.6vw,1.4rem) 0 0}
.duel-list > div{display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:.7rem 0;border-top:1px solid var(--line)}
.duel-list dt{font-size:clamp(.8125rem,.95vw,.9375rem);font-weight:600;color:var(--muted)}
.duel-list dd{margin:0;display:flex;align-items:center;gap:.45rem;font-size:clamp(.9375rem,1.1vw,1.0625rem);font-weight:800;white-space:nowrap}
.duel-vs{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:999px;display:grid;place-items:center;
  font-family:var(--num,inherit);font-size:15px;font-weight:900;background:var(--bg);border:1px solid var(--line);box-shadow:0 0 0 6px var(--bg)}
.duel-proof{margin:clamp(1.75rem,3vw,2.5rem) 0 0}
.duel-proof figcaption{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem .9rem;margin-bottom:.9rem;color:var(--muted);font-size:15px}
.duel-proof-img{border-radius:12px;overflow-x:auto;background:#fff;box-shadow:0 2px 8px rgba(9,9,11,.5),0 24px 56px -24px rgba(9,9,11,.85)}
.duel-proof-img img{width:100%;min-width:720px;height:auto}
@media (max-width:760px){
  .duel{grid-template-columns:1fr}
  .duel-vs{position:relative;left:auto;top:auto;transform:none;justify-self:center;margin:-.4rem 0}
  .duel-card{grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:.9rem;padding:.9rem}
  .duel-list > div{flex-direction:column;align-items:flex-start;gap:.2rem;padding:.5rem 0}
  .duel-list dt{font-size:12.5px}
}

/* ===== 이미지 타일 ===== */
.tiles{gap:14px}
.tile{position:relative;margin:0;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:var(--surface2)}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.tile:hover img{transform:scale(1.05)}
.tile figcaption{position:absolute;inset:auto 0 0 0;padding:44px 18px 16px;background:linear-gradient(transparent,rgba(0,0,0,.78));color:#fff;display:flex;flex-direction:column;gap:4px}
.tile b{font-size:clamp(1rem,1.3vw,1.15rem);font-weight:800;letter-spacing:-.02em}
.tile span{font-size:13px;opacity:.8}

/* 흰 바탕 섹션(읽기용) — 기본 디자인에서도 고를 수 있게 */
.tone-light{--bg:#fff;--surface:#f5f5f7;--surface2:#ededf0;--line:#e4e4e7;--text:#0a0a0a;--muted:#48494e;background:#fff;color:#0a0a0a}

/* --- 모바일 */
@media (max-width:960px){
  [data-preset="studio"] .sec-hero:has(.hero-visual) > .wrap{grid-template-columns:1fr;gap:36px}
  .pain-cards.cols-3,.pain-cards.cols-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  [data-preset="studio"] .sec-hero .hero-eyebrow{font-size:13px;color:#fff;letter-spacing:-.01em;margin-bottom:22px}
  [data-preset="studio"] .sec-hero .hero-title{font-size:clamp(1.9rem,8.4vw,2.4rem)}
  [data-preset="studio"] .hero-visual img,[data-preset="studio"] .hero-visual video{max-height:56vh}
  [data-preset="studio"] .btn{height:54px}
  .pain-cards.cols-2,.pain-cards.cols-3,.pain-cards.cols-4{grid-template-columns:1fr}
  .pain-cards .pain.has-shot{display:grid;grid-template-columns:40% minmax(0,1fr);text-align:left}
  .pain-cards .pain.has-shot .pain-shot{aspect-ratio:auto;height:100%}
  .pain-cards .pain.has-shot .pain-body{align-items:flex-start;padding:16px}
  .pain-cards .pain.has-shot .pain-no{font-size:1.1rem;left:10px;top:8px}
  [data-preset="studio"] .cards-numbered .card{padding-top:18px}
  .tiles.cols-3,.tiles.cols-4{grid-template-columns:repeat(2,1fr)}
}

/* ===== 10-22 2차: 아이콘·이모지·반복 카드 정리 ===== */
/* 아이콘: Lucide 24칸 · 얇은 선 */
[data-preset="studio"] .ic-svg{width:28px;height:28px;stroke-width:1.5}
[data-preset="studio"] .pain .ic-svg{width:26px;height:26px}
[data-preset="studio"] .ic-emoji{display:none}
/* 쇼케이스 탭: 이모지 대신 01·02·03 */
[data-preset="studio"] .sc-ic{display:none}
[data-preset="studio"] .sc-tabs{counter-reset:sc}
[data-preset="studio"] .sc-tabs button::before{counter-increment:sc;content:counter(sc,decimal-leading-zero);font-family:var(--num);font-size:12px;font-weight:800;letter-spacing:.04em;opacity:.55;margin-right:4px}
[data-preset="studio"] .sc-tabs button.on::before{opacity:.9}
/* 체크리스트형 카드: 한 줄씩 번호 · 질문 · 오른쪽 '네' */
.cards-checklist{grid-template-columns:1fr!important;max-width:880px;margin:0 auto;gap:12px}
.cards-checklist .card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:22px;padding:22px 26px}
.cards-checklist .card:hover{transform:none}
.cards-checklist .card-no{grid-row:1/span 2;margin:0;font-size:clamp(1.3rem,2vw,1.6rem);letter-spacing:-.02em}
.cards-checklist .card h3,.cards-checklist .card p{grid-column:2;margin:0}
.cards-checklist .card h3{font-size:clamp(1.02rem,1.4vw,1.2rem)}
.card-yes{grid-column:3;grid-row:1/span 2;display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:14px;padding:7px 14px;border-radius:999px;
  background:color-mix(in srgb,var(--primary) 14%,transparent);color:var(--primary)}
.card-yes::before{content:"✓";font-weight:900}
[data-preset="studio"] .card-yes{background:rgba(255,90,96,.14);color:var(--primary-lit)}
@media (max-width:760px){
  .cards-checklist .card{column-gap:14px;padding:16px 16px}
  .card-yes{padding:5px 10px;font-size:12.5px}
}

/* ===== 성장 막대 그래프 ===== */
.growth{display:grid;gap:clamp(28px,4vw,56px);align-items:end}
.growth.has-points{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
.growth-points{list-style:none;display:grid;gap:14px;align-self:center}
.growth-points li{position:relative;padding:18px 20px 18px 50px;border-radius:14px;background:var(--surface);border:1px solid var(--line);font-size:clamp(.95rem,1.2vw,1.05rem);line-height:1.55;color:var(--muted)}
.growth-points li::before{content:"";position:absolute;left:20px;top:21px;width:18px;height:18px;border-radius:50%;
  background:var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat}
.growth-points li b,.growth-points li strong{color:var(--text)}
.growth-chart{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:clamp(12px,2.4vw,28px);align-items:end;height:clamp(300px,34vw,420px);
  padding:0 4px;border-bottom:1px solid var(--line)}
.g-col{display:flex;flex-direction:column;align-items:center;height:100%;gap:10px;min-width:0}
.g-val{font-family:var(--num,inherit);font-size:clamp(1.05rem,1.9vw,1.6rem);font-weight:800;letter-spacing:-.03em;white-space:nowrap;color:var(--muted)}
.g-col.top .g-val{color:var(--primary-lit,var(--primary));font-size:clamp(1.25rem,2.3vw,2rem)}
.g-track{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center}
.g-bar{position:relative;width:min(96px,72%);height:var(--h);border-radius:10px 10px 0 0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--text) 34%,transparent),color-mix(in srgb,var(--text) 12%,transparent));
  transform-origin:bottom;transition:transform 1.1s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0) * 140ms)}
.g-col.top .g-bar{background:linear-gradient(180deg,var(--primary-lit,var(--primary)),var(--primary));box-shadow:0 0 0 1px color-mix(in srgb,var(--primary) 40%,transparent),0 24px 60px -18px color-mix(in srgb,var(--primary) 70%,transparent)}
.g-col.est .g-bar{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--primary) 55%,transparent) 0 8px,color-mix(in srgb,var(--primary) 30%,transparent) 8px 16px);
  outline:1.5px dashed var(--primary-lit,var(--primary));outline-offset:-1.5px}
.g-bar em{position:absolute;top:10px;left:50%;transform:translateX(-50%);font-style:normal;font-size:11px;font-weight:800;padding:3px 8px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;white-space:nowrap}
.g-lab{font-family:var(--num,inherit);font-size:14px;font-weight:800;letter-spacing:.04em;color:var(--muted);padding-bottom:2px}
.g-note{font-size:12px;color:var(--muted);text-align:center;margin-top:-6px}
.js .growth-chart.reveal:not(.in) .g-bar{transform:scaleY(0)}
@media (max-width:960px){.growth.has-points{grid-template-columns:1fr}}
@media (max-width:760px){
  .growth-chart{height:280px}
  .g-val{font-size:15px}.g-col.top .g-val{font-size:18px}
  .growth-points li{padding:15px 16px 15px 44px}.growth-points li::before{left:16px;top:18px}
}

/* ===== 비교 카드 (카드 블록 '가운데 표시' — 예: 잘 만든 영상 ≠ 성과를 내는 영상) — 디자이너 원본 neq 모양 ===== */
.cards-versus{position:relative;container-type:inline-size;--ng:clamp(1rem,2vw,1.75rem);gap:var(--ng);max-width:1080px;margin-inline:auto}
.cards-versus .card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5rem;padding:0 0 clamp(1.4rem,2.2vw,1.9rem);border-radius:20px;overflow:hidden}
.cards-versus .card:hover{transform:none}
.cards-versus .card-shot{order:-1;width:100%;margin:0 0 clamp(.9rem,1.4vw,1.2rem);border-radius:0;aspect-ratio:4/3}
.cards-versus .card h3{font-size:clamp(1.25rem,2.2vw,1.875rem);font-weight:800;letter-spacing:-.03em;line-height:1.3;margin:0;padding:0 18px}
.cards-versus .card p{font-size:clamp(13px,1.05vw,15px);margin:0;padding:0 18px}
.cards-versus .card:first-of-type{background:var(--surface);border:1px solid var(--line)}
.cards-versus .card:first-of-type h3{color:var(--muted)}
.cards-versus .card:first-of-type img,.cards-versus .card:first-of-type video{filter:saturate(.85)}
.cards-versus .card:nth-of-type(2){background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 16%,transparent),color-mix(in srgb,var(--primary) 6%,transparent));
  border:1px solid color-mix(in srgb,var(--primary) 60%,transparent)}
.cards-mark{position:absolute;z-index:2;left:50%;top:calc((100cqw - var(--ng)) / 2 * .75 / 2);transform:translate(-50%,-50%);display:grid;place-items:center;
  width:clamp(48px,5vw,68px);aspect-ratio:1;border-radius:999px;background:var(--primary);color:#fff;font-size:clamp(1.5rem,2.6vw,2.2rem);font-weight:800;line-height:1;
  box-shadow:0 0 0 6px var(--bg),0 10px 30px -6px color-mix(in srgb,var(--primary) 70%,transparent)}
[data-preset="studio"] .cards-versus .card:first-of-type{background:#141418;border-color:rgba(255,255,255,.1)}
[data-preset="studio"] .cards-versus .card:first-of-type h3{color:rgba(255,255,255,.72)}
@media (max-width:760px){
  .cards-versus{grid-template-columns:1fr 1fr!important;gap:10px;--ng:10px}
  .cards-versus .card h3{font-size:15px;padding:0 10px}.cards-versus .card p{font-size:12px;padding:0 10px}
  .cards-mark{width:40px;font-size:1.3rem;box-shadow:0 0 0 4px var(--bg)}
}

/* ===== 첫 화면 AI 채팅창 (디자이너 aicont 원본 모양) — 질문·입력 중·AI 추천 답변이 차례로 반복 ===== */
.chat-mock{position:relative;z-index:1;margin:0;width:100%;max-width:520px;justify-self:end;background:#fff;color:#222;border-radius:14px;overflow:visible;
  box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.05);text-align:left;font-size:14.5px;letter-spacing:-.005em}
.chat-mock::before{content:"";position:absolute;inset:-2px;z-index:-1;border-radius:14px;background:linear-gradient(135deg,var(--primary),transparent 50%);filter:blur(20px);opacity:.5}
.chat-mock > *{position:relative}
.cm-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:#f8f8f8;border-bottom:1px solid #ececec;border-radius:14px 14px 0 0}
.cm-dots{display:flex;gap:6px}.cm-dots i{width:11px;height:11px;border-radius:50%;background:#ff5f56}.cm-dots i:nth-child(2){background:#ffbd2e}.cm-dots i:nth-child(3){background:#27c93f}
.cm-title{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:#333}
.cm-title svg{width:16px;height:16px;color:var(--primary)}
.cm-live{display:flex;align-items:center;gap:6px;font-size:12px;color:#666;font-weight:500}
.cm-live i{width:8px;height:8px;border-radius:50%;background:#27c93f;animation:cmPulse 1.5s ease infinite}
@keyframes cmPulse{50%{opacity:.35}}
.cm-body{height:420px;padding:16px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;background:#fff}
.cm-msg{max-width:88%;padding:11px 15px;border-radius:12px;line-height:1.65;margin:0}
.cm-user{align-self:flex-end;background:#0a0a0a;color:#fff;border-bottom-right-radius:4px}
.cm-ai{align-self:flex-start;background:#f1f1f1;color:#222;border-bottom-left-radius:4px}
.cm-ai p{margin:0}
.cm-ai ol{margin:8px 0 0;padding-left:20px;font-size:14px}
.cm-ai li{margin-bottom:5px;line-height:1.6}
.cm-ai strong{color:#0a0a0a}
.cm-ai li span{display:block;font-size:12.5px;color:#777;margin-top:3px;padding-left:4px;line-height:1.55}
.cm-ai .hl{color:var(--primary)}
.cm-typing{align-self:flex-start;background:#f1f1f1;padding:14px 18px;border-radius:14px;border-bottom-left-radius:4px;display:inline-flex;gap:4px}
.cm-typing i{width:8px;height:8px;background:#bbb;border-radius:50%;animation:cmType 1.2s infinite ease-in-out}
.cm-typing i:nth-child(2){animation-delay:.15s}.cm-typing i:nth-child(3){animation-delay:.3s}
@keyframes cmType{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}
.chat-mock.playing .cm-msg{display:none}
.chat-mock.playing .cm-msg.on{display:block;animation:cmIn .4s ease forwards}
@keyframes cmIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.cm-input{display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid #ececec;background:#fafafa;color:#888;font-size:14px}
.cm-input span{flex:1}
.cm-input i{width:34px;height:34px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center}
.cm-input svg{width:15px;height:15px}
.cm-warn{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;background:var(--primary);color:#fff;font-size:15.5px;font-weight:700;letter-spacing:.3px;border-radius:0 0 14px 14px}
.cm-warn svg{width:18px;height:18px}
@media (max-width:960px){.chat-mock{justify-self:center}}
@media (max-width:760px){.cm-body{height:340px;padding:12px}.chat-mock{font-size:13.5px}.cm-warn{font-size:14px;padding:12px}}
/* 체크리스트: 설명 줄이 없으면 한 줄 자리만 (빈 둘째 줄 때문에 질문이 위로 밀리던 것) · 번호 줄 높이 1 로 가운데 맞춤 — 10-29 */
.cards-checklist .card:not(:has(p)) .card-no,.cards-checklist .card:not(:has(p)) .card-yes{grid-row:1}
.cards-checklist .card-no{line-height:1}
.cards-checklist .card h3{line-height:1.45}
/* 진행 과정: 평소엔 모든 단계 같은 회색, 마우스를 올린(휴대폰은 누른) 단계만 빨강 — STEP 글자 + 위 선 (10-29) */
[data-preset="studio"] .step{transition:border-color .3s var(--ease)}
[data-preset="studio"] .step-no,[data-preset="studio"] .step:first-child .step-no{color:rgba(255,255,255,.5);transition:color .3s var(--ease)}
[data-preset="studio"] .step:first-child{border-top-color:rgba(255,255,255,.16)}
[data-preset="studio"] .step:hover,[data-preset="studio"] .step:active{border-top-color:var(--primary)}
[data-preset="studio"] .step:hover .step-no,[data-preset="studio"] .step:active .step-no{color:var(--primary-lit)}
[data-preset="studio"] .tone-light .step-no,[data-preset="studio"] .tone-light .step:first-child .step-no{color:#6b6b73}
[data-preset="studio"] .tone-light .step:first-child{border-top-color:rgba(10,10,10,.14)}
[data-preset="studio"] .tone-light .step:hover,[data-preset="studio"] .tone-light .step:active{border-top-color:var(--primary)}
[data-preset="studio"] .tone-light .step:hover .step-no,[data-preset="studio"] .tone-light .step:active .step-no{color:var(--primary)}

/* ===== 고민 블록 '따옴표' 모양: 아이콘 대신 빨간 큰 따옴표 — 고객이 한 말처럼 (10-30) ===== */
/* 따옴표 모양: 여는·닫는 따옴표를 같은 줄 안에 같은 크기·같은 높이로 (글자 크기 기준 em) — 두 줄이 되면 둘째 줄은 글자에 맞춰 들여씀 */
.pain-quote .pain-line{display:block;padding-left:.85em;text-indent:-.85em}
.pain-qm,.pain-qe{display:inline-block;text-indent:0;font-family:Georgia,"Times New Roman",serif;font-size:1.25em;font-weight:700;line-height:0;vertical-align:-.1em;color:var(--primary)}
.pain-qm{width:.68em}
.pain-qe{margin-left:.15em}
[data-preset="studio"] .pain-qm,[data-preset="studio"] .pain-qe{color:var(--primary-lit)}