/* LUSION '꿈의 바다' 세계 디자인 (2026-10-13 대표님: 꿈의 바다 콘셉트 그대로, 글씨체와 각종 창 전부 맞춰서)
   공부: 어워즈·FWA 수상작(Lusion, Igloo, Cerebrium, Lando Norris 등) → 기준: 세계가 화면 전체 배경, 큰 제목은 얇게, 작은 코드 글씨 표시·+ 모서리,
   버튼·창은 평평하고 얇은 선(입체 그림자 없음), 강조색은 청록 하나. 시니어: 본문 18px 이상, 버튼 48px 이상, 글 뒤는 어둡게.
   build-static.js가 모든 화면 </head> 앞에 넣는다(예전 fx3d.css 대신). 각 화면 파일은 그대로 두고 겉모습만 덮는다. */
:root{--w-bg:#000;--w-ink:#f4fbfc;--w-mut:rgba(226,242,245,.74);--w-line:rgba(255,255,255,.16);--w-line2:rgba(255,255,255,.42);--w-ac:#3fd8e8;--w-ac2:#bff6fb;--w-glass:rgba(3,9,12,.66);
  --w-mono:'JetBrains Mono','Pretendard Variable',Pretendard,monospace;--w-lat:'Sora','Pretendard Variable',Pretendard,sans-serif;
  --ac:#3fd8e8;--acs:rgba(63,216,232,.14);--line:rgba(255,255,255,.14);--line2:rgba(255,255,255,.32);--tx:#f4fbfc;--mu:rgba(226,242,245,.76);--mu2:rgba(210,230,234,.62)}

/* ---------- 배경: 세계(world.js가 #wbg를 깐다) ---------- */
html{background:#000}
body{background:transparent!important;background-image:none!important}
#wbg{position:fixed;inset:0;z-index:-2;overflow:hidden;background:#000 url(/samples/world-ocean.webp) center/cover no-repeat;pointer-events:none}
#wbg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%;transition:opacity 1.2s}
#wbg:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.38) 45%,rgba(0,0,0,.25)),linear-gradient(0deg,rgba(0,0,0,.55),transparent 40%)}
html.w-app #wbg{filter:saturate(.9)}
html.w-app #wbg:after{background:rgba(0,4,6,.72)}
html.w-app #wbg video{filter:saturate(.85) brightness(.9)}
#fx3d-stars,.amb,.grain{display:none!important}
#w-hud{position:fixed;inset:0;z-index:4;pointer-events:none;font:400 12px/1.8 var(--w-mono);letter-spacing:.22em;text-transform:uppercase;color:rgba(226,244,247,.62)}
#w-hud i{position:absolute;width:20px;height:20px}
#w-hud i:before,#w-hud i:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(232,248,250,.62)}
#w-hud i:before{width:20px;height:1px}#w-hud i:after{width:1px;height:20px}
#w-hud span{position:absolute;white-space:pre}
#w-hud span:after{content:"";display:block;width:16px;height:1px;background:rgba(226,244,247,.5);margin-top:10px}
#w-hud .r{text-align:right}#w-hud .r:after{margin-left:auto}
@media(max-width:900px){#w-hud{display:none}}

/* ---------- 글씨 ---------- */
body{font-family:'Pretendard Variable',Pretendard,-apple-system,'Malgun Gothic',system-ui,sans-serif!important;color:var(--w-ink)}
h1,h2,h3,.big{text-shadow:none!important;filter:none!important;font-weight:300!important;letter-spacing:-.035em!important;color:#fff}
h1 *,h2 *{text-shadow:none!important;filter:none!important}
h1 b,h2 b,h1 strong,h2 strong{font-weight:500}
.big{font-weight:300!important}
.logo,.brand{font-family:var(--w-lat)!important;letter-spacing:.02em;gap:10px}
.logo b{margin:0 0 0 6px!important}.logo i.st{margin-left:8px!important;font-weight:300!important}
.logo b,.ai-mk{color:var(--w-ac)!important}

/* ---------- 버튼: 흰 직사각형 + 얇은 선 ---------- */
.btn,button.btn,a.btn{border-radius:6px!important;box-shadow:none!important;transform:none!important;font-weight:600!important;letter-spacing:-.005em}
.btn.p,a.btn.p,button.btn.p,.p.btn{background:#fff!important;color:#000!important;-webkit-text-fill-color:#000;border:1px solid #fff!important}
.btn.p:hover{background:#eafdff!important;box-shadow:0 0 0 1px var(--w-ac),0 0 28px rgba(63,216,232,.45)!important}
.btn.g,a.btn.g,button.btn.g,.g.btn{background:rgba(0,0,0,.28)!important;color:#fff!important;border:1px solid var(--w-line2)!important;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.btn.g:hover{border-color:var(--w-ac)!important;color:var(--w-ac2)!important}
.btn:active{opacity:.85}
.btn:disabled,.btn[disabled]{opacity:.4}
.chip,.tool,.mic,.trust a,.opt,.cbtn,.sx,.attach{border-radius:6px!important;box-shadow:none!important;transform:none!important;background:rgba(0,0,0,.3)!important;border:1px solid var(--w-line2)!important;color:#fff}
.chip:hover,.tool:hover,.mic:hover,.trust a:hover,.sx:hover,.cbtn:hover{border-color:var(--w-ac)!important;color:var(--w-ac2)!important}
.chip.on,.chip.sel,.type.on,.tile.on,.opt.sel{border-color:var(--w-ac)!important;background:rgba(63,216,232,.1)!important;box-shadow:inset 0 0 0 1px rgba(63,216,232,.35)!important}
.go{border-radius:6px!important;box-shadow:none!important}
.go:not(:disabled){background:#fff!important;color:#000!important}

/* ---------- 창: 어두운 유리 + 얇은 선 + 청록 모서리 ---------- */
.box,dialog,.composer,.msg.ai,.ai,.setup,.sugg,.menu,.tile,.type,.room.on,.helper,.hold,.send,.show,.plan,.card,.qa details,.faq details{
  background:var(--w-glass)!important;border:1px solid var(--w-line)!important;border-radius:10px!important;box-shadow:none!important;transform:none!important;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.box,dialog,.composer,.setup,.menu,.ai{background-image:linear-gradient(var(--w-ac),var(--w-ac)),linear-gradient(var(--w-ac),var(--w-ac)),linear-gradient(var(--w-ac),var(--w-ac)),linear-gradient(var(--w-ac),var(--w-ac))!important;
  background-size:14px 1px,1px 14px,14px 1px,1px 14px!important;background-position:0 0,0 0,100% 100%,100% 100%!important;background-repeat:no-repeat!important}
.composer:focus-within{border-color:rgba(63,216,232,.6)!important;box-shadow:0 0 0 1px rgba(63,216,232,.25),0 0 40px -12px rgba(63,216,232,.5)!important}
dialog{border-color:var(--w-line2)!important}
dialog::backdrop{background:rgba(0,0,0,.72)!important;backdrop-filter:blur(6px)}
.me,.msg.me{background:rgba(6,22,26,.82)!important;color:#fff!important;border:1px solid rgba(63,216,232,.55)!important;border-radius:10px!important;box-shadow:none!important;backdrop-filter:blur(10px)}
.me *{color:#fff}
.top{background:rgba(0,0,0,.86)!important;border:1px solid var(--w-line)!important;border-radius:8px!important;box-shadow:none!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.side{background:rgba(0,0,0,.6)!important;border-right:1px solid var(--w-line)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.room{border-radius:6px!important}
.bar,.dock{background:linear-gradient(0deg,rgba(0,0,0,.82),rgba(0,0,0,.4))!important;border-top:1px solid var(--w-line)!important}
.ic{background:rgba(63,216,232,.1)!important;border:1px solid rgba(63,216,232,.35);border-radius:8px!important;box-shadow:none!important;color:var(--w-ac2)!important}
.steps i:not([style]){background:rgba(255,255,255,.14)!important;border-radius:1px!important} /* 2026-10-13: 예시 그림 칸(i style=배경그림)까지 덮어 휴대폰 "이런 장면" 3칸이 회색으로 비던 고장 → 진행 점만 */
.steps i.on:not([style]){background:var(--w-ac)!important;box-shadow:0 0 12px rgba(63,216,232,.6)!important}
.prog,.prog i{border-radius:1px!important}
.badge,.tag,.credit{border-radius:4px!important}

/* 루봇 말풍선: 밝은 판에 진한 글씨(어두운 배경 위에서 가장 잘 읽히게) */
.bubble{background:rgba(236,252,255,.95)!important;color:#03161a!important;border:1px solid rgba(255,255,255,.9)!important;border-radius:10px!important;box-shadow:0 0 40px -12px rgba(63,216,232,.55)!important}
.bubble *{color:#03161a}
.bubble:before{border-right-color:rgba(236,252,255,.95)!important}

/* ---------- 입력칸 ---------- */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{background:rgba(0,0,0,.42)!important;border:1px solid var(--w-line2)!important;border-radius:6px!important;box-shadow:none!important;color:#fff!important}
.composer textarea,#t,.comp textarea{background:transparent!important;border:0!important}
input:focus,select:focus,textarea:focus{border-color:var(--w-ac)!important;box-shadow:0 0 0 3px rgba(63,216,232,.18)!important}
input::placeholder,textarea::placeholder{color:rgba(220,238,242,.55)!important}

/* ---------- 첫 화면(landing) ---------- */
header.nav{background:rgba(0,0,0,.28)!important;border:1px solid rgba(255,255,255,.1)!important;border-radius:8px!important;box-shadow:none!important}
header.nav.scrolled,header.nav.sc{background:rgba(0,0,0,.55)!important;backdrop-filter:blur(12px)!important}
header.nav .brand span{font-family:var(--w-lat);font-weight:500;letter-spacing:.06em}
header.nav .nl a{font-weight:400;opacity:.92}
header.nav .tool{background:transparent!important;border:1px solid transparent!important}
header.nav .tool:hover{border-color:var(--w-line2)!important}
section.hero{position:relative;min-height:100vh!important;display:flex!important;align-items:center!important;grid-template-columns:none!important;padding-top:max(96px,11vh)!important;padding-bottom:max(56px,7vh)!important;max-width:none!important;margin:0!important;padding-left:5vw!important;padding-right:5vw!important}
section.hero>div:first-child{max-width:min(760px,48vw);position:relative;z-index:2}
section.hero .stage,section.hero .hthumbs{display:none!important}
section.hero .live{background:transparent!important;border:0!important;padding:0!important;font:500 15px/1.6 'Pretendard Variable',Pretendard,sans-serif!important;letter-spacing:.06em!important;color:rgba(232,248,250,.82)!important;display:flex!important;align-items:center;gap:16px;box-shadow:none!important}
section.hero .live b{display:none!important}
section.hero .live:after{content:"";width:56px;height:1px;background:rgba(232,248,250,.7)}
section.hero h1{font-size:clamp(34px,min(4.1vw,6.6vh),80px)!important;font-weight:200!important;line-height:1.1!important;letter-spacing:-.035em!important;margin:min(2.4vh,24px) 0 min(2vh,20px)!important}
section.hero h1 span{display:block}
section.hero h1 .l2{color:#fff!important;background:none!important;-webkit-text-fill-color:#fff!important}
section.hero .lead{font-size:clamp(17px,min(1.15vw,2vh),20px)!important;color:rgba(236,248,250,.86)!important;max-width:600px;margin-bottom:min(3vh,28px)!important}
section.hero .comp{background:rgba(0,0,0,.38)!important;border:1px solid rgba(255,255,255,.55)!important;border-radius:6px!important;box-shadow:none!important;backdrop-filter:blur(6px);max-width:640px}
section.hero .comp label{font:500 15px/1.4 'Pretendard Variable',Pretendard,sans-serif!important;letter-spacing:.02em;color:rgba(232,248,250,.78)!important}
section.hero .comp .go{border-radius:4px!important}
section.hero .facts{font-size:16px;color:rgba(232,246,249,.78)}
.sec,section.final{position:relative;z-index:1}
.sec .kick,.kick{font:500 15px/1.6 'Pretendard Variable',Pretendard,sans-serif!important;letter-spacing:.08em!important;color:var(--w-ac2)!important}
.sec h2,section.final h2{font-weight:200!important;letter-spacing:-.035em!important}
.sec h2 em,section.final h2 em{font-style:normal;color:var(--w-ac2)!important;-webkit-text-fill-color:var(--w-ac2)!important;background:none!important}
footer{background:rgba(0,0,0,.6)!important;border-top:1px solid var(--w-line)!important}

/* ---------- 휴대폰 ---------- */
@media(max-width:700px){
  #wbg video{object-position:66% 50%}
  section.hero{padding-left:20px!important;padding-right:20px!important;align-items:flex-end!important;padding-bottom:40px!important}
  section.hero h1{font-size:clamp(32px,9.2vw,46px)!important}
  section.hero>div:first-child{max-width:100%}
  #wbg:after{background:linear-gradient(0deg,rgba(0,0,0,.86) 25%,rgba(0,0,0,.35) 70%,rgba(0,0,0,.2))}
}
@media(pointer:coarse){.box,dialog,.composer,.ai,.setup,.sugg,.menu,.tile,.type,.top,.side{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background-color:rgba(3,9,12,.86)!important}}
@media(prefers-reduced-motion:reduce){#wbg video{display:none}}
@media print{#wbg,#w-hud{display:none}}

/* ---------- 교차 검수 반영(클대리, 2026-10-13) ---------- */
/* 누를 수 없는 버튼도 글씨는 읽히게: 색은 그대로, 전체만 흐리게 */
.btn:disabled,.btn[disabled],.go:disabled{opacity:1!important;cursor:not-allowed}
.btn.p:disabled,.btn.p[disabled],.go:disabled{background:rgba(255,255,255,.12)!important;color:rgba(255,255,255,.88)!important;-webkit-text-fill-color:rgba(255,255,255,.88);border:1px dashed rgba(255,255,255,.45)!important}
/* 작업 따라다니는 알림창 */
#jdock>*{background:rgba(3,9,12,.9)!important;border:1px solid rgba(63,216,232,.4)!important;border-radius:10px!important;box-shadow:0 0 40px -14px rgba(63,216,232,.5)!important}
/* 안내 글 밝고 크게 */
.note,.sub,small,.menu small,.opt small{color:rgba(228,240,243,.86)!important}
.note{font-size:16.5px!important}
/* 체크 상자: 청록 테두리 */
input[type=checkbox]{appearance:none;-webkit-appearance:none;width:26px!important;height:26px!important;flex:none;border:1.5px solid var(--w-ac);border-radius:4px;background:rgba(0,0,0,.45);display:inline-grid;place-content:center;cursor:pointer;margin-top:2px}
input[type=checkbox]:checked{background:var(--w-ac)}
input[type=checkbox]:checked:after{content:"";width:7px;height:13px;border:solid #021014;border-width:0 3px 3px 0;transform:rotate(45deg) translate(-1px,-1px)}
input[type=checkbox]:focus-visible{outline:3px solid rgba(63,216,232,.5);outline-offset:2px}
/* 간편 제작실: 준비 중 카드도 읽히게, 카드 모양 하나로 */
.menu{background:var(--w-glass)!important;border:1px solid var(--w-line)!important}
.menu.on{border-color:rgba(63,216,232,.7)!important;background-color:rgba(3,14,18,.72)!important}
.menu.off{opacity:.78!important}
.menu.off .badge{border-color:var(--w-line2)!important;color:#fff!important}
/* 템플릿 카드 미리보기: 색 판 대신 바다 세계 색으로 통일 */
.card{background:var(--w-glass)!important;border:1px solid var(--w-line)!important;border-radius:10px!important;overflow:hidden}
.card:hover{border-color:rgba(63,216,232,.6)!important}
.card .pv{background:radial-gradient(120% 90% at 70% 0%,rgba(63,216,232,.32),transparent 60%),linear-gradient(170deg,#06222a 0%,#020709 100%)!important}
.card .pv .k{background:rgba(0,0,0,.55)!important;border:1px solid var(--w-line2);border-radius:4px!important}
.cat{border-radius:6px!important;background:rgba(0,0,0,.3)!important;border:1px solid var(--w-line2)!important}
.cat.sel{border-color:var(--w-ac)!important;background:rgba(63,216,232,.12)!important}

/* 배경음악 버튼(첫 화면 왼쪽 아래, 2026-10-13) */
#w-snd{position:fixed;left:3vw;bottom:22px;z-index:30;min-height:46px;padding:0 18px;border-radius:6px;background:rgba(0,0,0,.45);color:#eafcff;border:1px solid rgba(255,255,255,.4);font:500 16px/1 'Pretendard Variable',Pretendard,sans-serif;letter-spacing:.02em;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#w-snd:hover{border-color:var(--w-ac);color:var(--w-ac2)}
#w-snd.on{border-color:var(--w-ac);color:var(--w-ac2);box-shadow:0 0 22px -6px rgba(63,216,232,.6)}
#w-snd.on:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--w-ac);margin-right:10px;vertical-align:2px;animation:wsnd 1.6s ease-in-out infinite}
@keyframes wsnd{50%{opacity:.25}}
@media(max-width:700px){#w-snd{left:auto;right:12px;bottom:90px;font-size:15px;min-height:44px;padding:0 14px}}
@media print{#w-snd{display:none}}
/* 2026-10-13 전체 화면 검수: 위 메뉴 안의 음악 버튼(다른 메뉴 버튼과 같은 모양) */
header.nav #w-snd.innav{position:static;flex:none;min-height:40px;padding:0 14px;margin:0;border-radius:6px;background:transparent;border:1px solid transparent;backdrop-filter:none;-webkit-backdrop-filter:none;font-size:15px;white-space:nowrap}
header.nav #w-snd.innav:hover{border-color:var(--w-line2)}
header.nav #w-snd.innav.on{border-color:var(--w-ac);box-shadow:none}
/* 2026-10-13 전체 화면 검수: '쉬운 이유' 칸과 요금 아래 안내줄이 배경 기둥에 비쳐 글씨가 안 읽혀서 다른 창과 같은 유리판 바탕 */
.bento .cell:not(.vis),.payline{background:var(--w-glass)!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}

/* 2026-10-13 전체 화면 검수 2차(대표님 "창하고 글자가 붙어 있다, 두 번째 줄이 안 맞는다"): 유리판을 씌운 '작품' 상자·질문 상자에 안쪽 여백, 첫 화면 글자 왼쪽 선을 아래 구역(가운데 1160px)과 위 메뉴 로고에 맞춤 */
section.hero{padding-left:max(clamp(18px,4vw,40px),calc((100% - 1160px)/2))!important;padding-right:max(clamp(18px,4vw,40px),calc((100% - 1160px)/2))!important}
@media(min-width:701px){header.nav#nav{padding-left:40px!important;padding-right:8px!important}}
#works .show{padding:clamp(24px,3vw,40px)!important}
.guide.show{background:none!important;border:0!important;padding:0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.faq details{padding:0 clamp(18px,2vw,26px)!important}
@media(max-width:700px){section.hero{padding-left:20px!important;padding-right:20px!important}}
section.final{max-width:1160px!important;margin-left:auto!important;margin-right:auto!important}
.sec .lead:not(.faq .lead){text-wrap:balance}
.plan .pill{padding:7px 14px!important}
@media(min-width:961px){.payline{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px 32px!important}}

/* 2026-10-13 3차(대표님 "자주 묻는 질문 글자가 창에 다 닿아 있다"): 질문 상자끼리 테두리가 붙어 한 덩어리처럼 보여서 사이를 띄우고 위아래 여백도 넉넉히 */
.faq details{margin:0 0 12px!important}
.faq details summary{padding-top:22px!important;padding-bottom:22px!important}
.faq details p{padding-bottom:24px!important}

/* 2026-10-13 최신형 휴대폰 (대표님 지시: '만드는 법' 휴대폰을 최신형으로). 얇은 검은 테두리 + 티타늄 테두리 + 가운데 알약 카메라 + 상태 표시줄 + 옆 버튼 */
.phone{width:300px!important;height:624px!important;border-radius:58px!important;padding:4px!important;background:linear-gradient(140deg,#a7adb5 0%,#5b6169 14%,#23272d 36%,#15181c 55%,#3c424a 78%,#b3b9c1 100%)!important;box-shadow:0 0 0 1px rgba(255,255,255,.18) inset,0 1px 0 rgba(255,255,255,.35) inset,0 70px 120px -30px rgba(0,0,0,.92),0 0 140px -30px rgba(63,216,232,.35)!important}
.phone:before,.phone:after{content:"";position:absolute;width:4px;border-radius:3px;background:linear-gradient(180deg,#9aa1aa,#4b5159)}
.phone:before{right:-3px;top:168px;height:76px}
.phone:after{left:-3px;top:132px;height:52px;box-shadow:0 70px 0 #6c737b,0 0 0 0 transparent}
.phone .scr{border-radius:54px!important;border:4px solid #030405;background:#07090c!important}
.phone .scr:before{content:"9:41";position:absolute;z-index:4;top:15px;left:30px;font:600 13px/1 -apple-system,"Pretendard Variable",system-ui,sans-serif;letter-spacing:.01em;color:#f2f6f8}
.phone .scr:after{content:"";position:absolute;z-index:4;top:14px;right:24px;width:62px;height:14px;background:no-repeat right center/62px 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 14'%3E%3Cg fill='%23f2f6f8'%3E%3Crect x='0' y='9' width='3' height='4' rx='1'/%3E%3Crect x='4.5' y='6.5' width='3' height='6.5' rx='1'/%3E%3Crect x='9' y='4' width='3' height='9' rx='1'/%3E%3Crect x='13.5' y='1.5' width='3' height='11.5' rx='1'/%3E%3Cpath d='M27 4.2a8.5 8.5 0 0 1 11.6 0l-1.3 1.4a6.6 6.6 0 0 0-9 0zM29.4 6.8a5 5 0 0 1 6.8 0l-1.3 1.4a3.1 3.1 0 0 0-4.2 0zM32.8 12.4l-1.8-1.9a2.6 2.6 0 0 1 3.6 0z'/%3E%3Crect x='42.5' y='2.5' width='16' height='9' rx='2.6' fill='none' stroke='%23f2f6f8' stroke-opacity='.45'/%3E%3Crect x='44' y='4' width='11.5' height='6' rx='1.4'/%3E%3Crect x='59.5' y='5.5' width='1.5' height='3' rx='.7' fill-opacity='.45'/%3E%3C/g%3E%3C/svg%3E")}
.phone .notch{top:10px!important;width:92px!important;height:27px!important;background:#000!important;box-shadow:0 0 0 1px rgba(255,255,255,.04)}
.phone .notch:after{content:"";position:absolute;right:13px;top:8px;width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#3a4a63 0,#141a26 45%,#05070b 70%)}
.phone .sv{padding-top:76px!important}
.phone .tag.demo{top:44px!important;right:18px!important;left:auto!important;font-size:.75rem}
@media (max-width:560px){.phone{width:290px!important;height:604px!important}}
.phone .bot{min-width:0}.phone .bot .bub{min-width:0;flex:1 1 auto;max-width:calc(100% - 50px);overflow-wrap:anywhere}

/* 2026-10-13 휴대폰 최적화 (대표님: "모바일 화면이 최적화가 안 돼 있다, 너무 쓰기 불편").
   기준: 누르는 곳 44px 이상(애플 44pt·구글 48dp), 버튼 사이 8px, 옆으로 밀리는 화면 0, 입력 글자 16px(아이폰 확대 방지), 주요 버튼은 엄지 닿는 아래쪽에 크게. 390px 폭에서 실측함. */
@media (max-width:600px){
  html,body{overflow-x:clip}
  /* 모든 화면 위 막대: 한 줄로 들어가게 줄임 (뒤로=화살표만, 언어=지구본만, 로고 글자 'studio' 숨김) */
  .top{gap:6px!important;padding:6px 8px!important;flex-wrap:nowrap!important}
  .top .logo .st{display:none!important}
  #luBack{font-size:0!important;width:44px;min-width:44px;min-height:44px!important;padding:0!important;display:inline-grid;place-items:center}
  #luBack:before{content:"←";font-size:22px;line-height:1}
  #lui-lang{width:52px!important;min-width:52px;max-width:52px;min-height:44px!important;padding:0 0 0 13px!important;margin-right:0!important;font-size:18px!important;overflow:hidden;text-overflow:clip;white-space:nowrap}
  .top a.btn,.top .btn{min-height:44px!important;padding-left:12px!important;padding-right:12px!important;font-size:15px!important}
  /* 작업실 위 막대: 로고·방 이름은 숨기고 '☰ 작업실'·'내 계정'만 */
  .top .row .logo,.top .rtitle{display:none!important}
  /* 작업실 입력창: '만들기'를 아래쪽에 넓고 크게, 선택 버튼은 한 줄 위 */
  .composer{padding:8px!important;border-radius:20px!important}
  .composer textarea,#t{font-size:16px!important;min-height:44px}
  .composer .row{flex-wrap:wrap!important;gap:8px!important;row-gap:8px!important}
  .composer .go{flex:1 1 100%!important;margin-left:0!important;min-height:50px!important;font-size:17px!important;order:9}
  .composer .opt,.composer .attach{min-height:44px!important}
  /* 첫 화면: '요금표 보기·실패 환급·환불 정책·사업자' 줄을 옆으로 밀지 않고 2칸씩 */
  .trust{flex-wrap:wrap!important;overflow:visible!important;gap:8px!important}
  .trust>a{flex:1 1 calc(50% - 8px)!important;min-height:44px;justify-content:center}
  /* '배경음악' 버튼(대표님: 걸리적거림): 화면 위에 떠 있지 않게. 첫 화면은 위 메뉴 줄 안의 ♪ 아이콘, 위 메뉴가 없는 작업 화면에서는 숨김 */
  #w-snd:not(.innav){display:none!important}
  header.nav #w-snd.innav{font-size:0!important;width:44px!important;min-width:44px;height:44px!important;min-height:44px!important;padding:0!important;border-radius:50%!important;display:inline-grid!important;place-items:center;border:1px solid var(--w-line2,rgba(255,255,255,.2))!important}
  header.nav #w-snd.innav:before{content:"♪"!important;font-size:20px;line-height:1;width:auto!important;height:auto!important;background:none!important;margin:0!important;animation:none!important}
  header.nav #w-snd.innav.on{color:var(--w-ac2)!important;border-color:var(--w-ac)!important}
  /* 글자 크기(대표님: 글자만 커서 서비스 칸이 안 보임): 큰 제목 28, 구역 제목 24, 소제목 18, 본문 15~16 */
  html body h1,html body h1 *{font-size:24px!important;line-height:1.3!important;letter-spacing:-.02em!important}
  html body h2,html body h2 *{font-size:21px!important;line-height:1.35!important;letter-spacing:-.015em!important}
  html body h3{font-size:17px!important;line-height:1.4!important}
  html body p,html body .lead,html body .sub,html body li{font-size:15px!important;line-height:1.6!important}
  html body .kicker,html body .eyebrow,html body section.hero .kick{display:none!important}
  section.hero{padding-top:84px!important;padding-bottom:28px!important;min-height:0!important}
  .sec,section.final{padding-top:40px!important;padding-bottom:40px!important}
  /* 요금(대표님: 작게, 한 화면에 다): 카드를 한 줄짜리(이름·가격·핵심 1줄 | 버튼)로, 가격 20px, 나머지 설명 숨김 */
  html body .pmode{display:flex!important;flex-wrap:nowrap!important;gap:6px!important;margin:12px 0!important}
  html body .pmode button{flex:1 1 0!important;min-height:44px!important;padding:0 6px!important;font-size:14px!important;white-space:nowrap}
  html body .plans{gap:8px!important;grid-template-columns:1fr!important}
  html body .plan{display:grid!important;grid-template-columns:1fr auto!important;grid-template-areas:"nm bt" "pr bt" "yd bt"!important;align-items:center;column-gap:10px!important;row-gap:2px!important;padding:12px 14px!important;min-height:0!important;border-radius:16px!important}
  html body .plan .nm{grid-area:nm;margin:0!important}html body .plan .nm .pt{font-size:15px!important;font-weight:700}
  html body .plan .nm .en,html body .plan .pill,html body .plan .best,html body .plan .cr,html body .plan .sp2,html body .plan ul{display:none!important}
  html body .plan .pr{grid-area:pr;font-size:20px!important;line-height:1.2!important;margin:0!important}
  html body .plan .pr .krw{display:inline!important;font-size:12.5px!important;margin-left:6px}
  html body .plan .yield{grid-area:yd;font-size:13.5px!important;margin:0!important;line-height:1.35!important}
  html body .plan .btn{grid-area:bt;min-height:44px!important;padding:0 12px!important;font-size:14px!important;white-space:nowrap;margin:0!important;width:auto!important}
  #plans{padding-top:28px!important}
  /* 작품 영상은 화면 절반 높이까지만 */
  html body #works .sh-stage{aspect-ratio:auto!important;height:min(48vh,420px)!important;max-width:100%!important;margin-left:auto!important;margin-right:auto!important}
  html body #works .sh-stage video{height:100%!important;max-height:none!important;object-fit:cover}
  .top #menu{min-height:44px!important;font-size:15px!important;white-space:nowrap;padding:0 12px!important;line-height:1!important}
  html body section.hero .live{display:none!important}
  /* 루봇 만들기 위 막대: 말소리 버튼은 스피커 아이콘만 */
  #voice{font-size:0!important;width:48px;min-width:48px;flex:none!important;padding:0!important}
  #voice[aria-pressed=true]:before{content:'🔊';font-size:20px}
  #voice[aria-pressed=false]:before{content:'🔈';font-size:20px}
  .toolbar{width:auto!important;gap:6px!important}
  /* 작은 글씨(13px)는 14px로 */
  .tag,.chip,.note small{font-size:14px}
}

/* 2026-10-13 고장 고침: 휴대폰(손가락 화면)에서 루봇 말풍선 배경을 어둡게 덮어써서(위 pointer:coarse 규칙) 어두운 글자가 안 보였음 → 말풍선을 그 규칙에서 빼고, 혹시 모를 덮어쓰기에도 밝은 배경을 고정 */
@media(pointer:coarse){.bubble{background:rgba(236,252,255,.97)!important;color:#03161a!important}.bubble *{color:#03161a!important}}
/* 2026-10-13 키보드가 입력칸을 가리지 않게: 아래 고정 입력창은 키보드 높이(--kb)만큼 위로, 입력 중에는 루봇 그림을 작게 */
@media (pointer:coarse),(max-width:600px){
  .dock{bottom:var(--kb,0px)!important;transition:bottom .15s}
  html.kb-open .helper .bot,html.kb-open .bot{width:44px!important;height:50px!important}
  html.kb-open .helper{margin:2px 0 8px!important}
  html.kb-open .bubble{font-size:16px!important;padding:10px 14px!important}
  html.kb-open #mbar,html.kb-open .mbar{display:none!important}
}
/* 2026-10-13 작은 휴대폰(400px 이하, 360px 실측): 위 막대 버튼이 잘리지 않게 로고 글자는 숨기고 기능 버튼 우선, 표는 칸 안에서 옆으로 밀기 */
@media (max-width:400px){
  .top .logo{display:none!important}
  .top .toolbar .btn,.top a.btn{padding-left:10px!important;padding-right:10px!important;font-size:14px!important}
}
@media (max-width:600px){
  main table,.wrap table,.box table{display:block!important;max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch}
}
/* 2026-10-13 대표님: 휴대폰에서 스크롤을 올리면 같이 따라 올라가는 증상 → 휴대폰에서는 화면에 붙어 따라다니는 요소를 없앰(위 메뉴 막대는 맨 위에만, 작품 영상·질문 제목·휴대폰 그림은 제자리). 아래 '만들기 시작' 막대만 남김 */
@media (max-width:600px){
  html body header.nav,html body .nav{position:absolute!important;top:8px!important}
  html body .show .sh-stage,html body .faq>div:first-child,html body .phone-wrap,html body .steps,html body .steps li{position:relative!important;top:auto!important}
}
/* 2026-10-13 대표님: '큰 글씨' 버튼 필요 없음(전체 글씨가 이미 큼) → 위 메뉴의 큰 글씨 버튼과 '지금 글씨 크게 해 보기' 버튼 숨김(배경음악 버튼 자리 기준으로 요소는 남겨 둠) */
#big,#trybig{display:none!important}
/* 2026-10-13 대표님: 휴대폰에서 따라다니는 아래 '만들기 시작 / 요금' 막대 필요 없음 → 없앰(첫 화면 입력칸·만들기 버튼이 이미 맨 위에 있음) */
@media (max-width:600px){html body #mbar,html body .mbar{display:none!important}}