/* TOBE Studio 소개 페이지 — 자체 완결 스타일(studio.css 에 의존하지 않음). 토큰은 index.html 과 같은 다크 전용 값.
   외부 글꼴·이미지 없음. 모션은 prefers-reduced-motion 에서 모두 끈다. */
:root{--void:#030306;--white:#F4F6FF;--dim:#9096AC;--cyan:#3CF0FF;--mag:#FF2E88;--gold:#FFC857;--line:rgba(244,246,255,.16);--panel:rgba(244,246,255,.05);
--kr:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;--mono:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;--code:"JetBrains Mono",ui-monospace,Consolas,monospace;color-scheme:dark}
*{box-sizing:border-box;min-width:0}
html,body{margin:0;background:var(--void);color:var(--white);font-family:var(--kr);word-break:keep-all;overflow-wrap:anywhere;-webkit-font-smoothing:antialiased}
body{line-height:1.65;font-size:15px;background:radial-gradient(ellipse at 88% 0%,rgba(255,46,136,.12),transparent 50%),radial-gradient(ellipse at 0% 60%,rgba(60,240,255,.09),transparent 50%),var(--void)}
a{color:inherit}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:8px;top:-60px;background:var(--cyan);color:var(--void);padding:10px 14px;border-radius:8px;z-index:9;font-weight:700}
.skip:focus{top:8px}
.wrap{max-width:1100px;margin:0 auto;padding:20px clamp(16px,4vw,40px) 60px}
.sbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.logo{font:800 20px var(--kr);letter-spacing:.08em;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.logo em{font-style:normal;color:var(--cyan)}
.links{display:flex;gap:2px 12px;font:600 13px var(--mono);color:var(--dim);flex-wrap:wrap;justify-content:flex-end}
.links a{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 4px}
.links a:hover{color:var(--cyan)}
.eyebrow{font:600 13px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);margin:0 0 10px}
h1{margin:0 0 12px;font:800 clamp(34px,8vw,64px)/1.08 var(--kr);letter-spacing:-.035em}
h2{margin:0 0 8px;font:700 clamp(22px,4.4vw,30px)/1.25 var(--kr);letter-spacing:-.02em}
h3{margin:0 0 6px;font:700 16px/1.4 var(--kr)}
p{margin:0 0 12px}
.dim{color:var(--dim)}
.grad{background:linear-gradient(95deg,var(--cyan),var(--white) 40%,var(--mag) 75%,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{font-size:clamp(16px,2.6vw,19px);color:var(--white);max-width:40ch;margin:0 0 6px}
.en{font:500 13px var(--mono);color:var(--dim);margin:0 0 16px}
.lead{color:var(--dim);max-width:62ch}
section{padding:46px 0 0}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 10px}
.cta,.ghost{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;border-radius:999px;font:700 14px var(--kr);text-decoration:none}
.cta{color:var(--void);background:linear-gradient(100deg,var(--cyan),var(--white) 48%,var(--gold))}
.cta::after{content:"→";margin-left:8px}
.ghost{border:1px solid var(--line);color:var(--white)}
.ghost:hover{border-color:var(--cyan)}
.note{font:500 13px/1.6 var(--mono);color:var(--dim);margin:0}

/* ---- AS-IS → TO-BE 모티프(CSS 만) ---- */
.stage{display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);gap:0;align-items:center;margin-top:34px;border:1px solid var(--line);border-radius:18px;background:var(--panel);padding:22px clamp(12px,3vw,26px);overflow:hidden}
.pane h2{font:600 13px var(--mono);letter-spacing:.16em;color:var(--dim);margin:0 0 12px}
.pane.to h2{color:var(--cyan)}
.mess{position:relative;height:200px}
.mess i{position:absolute;display:block;font:normal 600 13px/1.3 var(--mono);color:var(--dim);border:1px dashed rgba(244,246,255,.35);border-radius:6px;padding:8px 10px;background:rgba(3,3,6,.7);animation:drift 6s ease-in-out infinite}
.mess i:nth-child(1){left:2%;top:4%;transform:rotate(-6deg)}
.mess i:nth-child(2){left:42%;top:0;transform:rotate(4deg);animation-delay:-1s}
.mess i:nth-child(3){left:8%;top:36%;transform:rotate(3deg);animation-delay:-2s}
.mess i:nth-child(4){left:50%;top:40%;transform:rotate(-5deg);animation-delay:-3s}
.mess i:nth-child(5){left:18%;top:72%;transform:rotate(5deg);animation-delay:-4s}
.mess i:nth-child(6){left:55%;top:74%;transform:rotate(-3deg);animation-delay:-5s}
@keyframes drift{0%,100%{translate:0 0}50%{translate:4px -5px}}
.arrow{display:flex;align-items:center;justify-content:center;font:700 22px var(--mono);color:var(--gold)}
.built{height:200px;border:1px solid rgba(60,240,255,.45);border-radius:10px;padding:10px;display:grid;grid-template-columns:34% 1fr;grid-template-rows:20px 1fr 1fr;gap:8px;background:rgba(60,240,255,.04)}
.built b{display:block;border-radius:6px;border:1px solid rgba(60,240,255,.5);background:rgba(60,240,255,.1);font:600 13px/1.2 var(--mono);color:var(--white);padding:5px 7px;animation:snap 6s ease-in-out infinite}
.built b:nth-child(1){grid-column:1/3;animation-delay:0s}
.built b:nth-child(2){grid-row:2/4;animation-delay:.3s}
.built b:nth-child(3){animation-delay:.6s}
.built b:nth-child(4){animation-delay:.9s;border-color:rgba(255,200,87,.6);background:rgba(255,200,87,.1)}
@keyframes snap{0%,100%{opacity:1;translate:0 0}8%{opacity:.35;translate:-6px 4px}22%{opacity:1;translate:0 0}}
.flowrow{display:flex;align-items:center;gap:6px;margin-top:10px;font:600 13px var(--mono);color:var(--dim);flex-wrap:wrap}
.flowrow span{border:1px solid var(--line);border-radius:999px;padding:4px 10px}
.flowrow span.ok{color:var(--cyan);border-color:rgba(60,240,255,.5)}
@media (max-width:640px){.stage{grid-template-columns:minmax(0,1fr)}.arrow{transform:rotate(90deg);height:40px}.mess,.built{height:180px}}

/* ---- 단계·카드 ---- */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:18px 0 0;padding:0;list-style:none}
.steps li{counter-increment:s;border:1px solid var(--line);border-radius:14px;padding:18px;background:var(--panel);position:relative}
.steps li::before{content:"0" counter(s);font:700 13px var(--mono);color:var(--gold);display:block;margin-bottom:6px}
.grid{display:grid;gap:14px;margin-top:18px}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.g3{grid-template-columns:repeat(2,minmax(0,1fr))}.steps{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.g3,.g2{grid-template-columns:minmax(0,1fr)}}
.card{border:1px solid var(--line);border-radius:14px;padding:18px;background:var(--panel);display:flex;flex-direction:column}
.card p{color:var(--dim);font-size:14px;flex:1}
.card .go{display:inline-flex;align-items:center;min-height:44px;color:var(--cyan);font:600 13px var(--mono);text-decoration:none;align-self:flex-start}
.card .go:hover{text-decoration:underline}
.card .nolink{font:500 13px var(--mono);color:var(--dim);margin:0;min-height:44px;display:flex;align-items:center}
.tag{display:inline-block;font:600 13px var(--mono);letter-spacing:.08em;padding:3px 9px;border-radius:999px;border:1px solid rgba(60,240,255,.5);color:var(--cyan);margin-bottom:8px;align-self:flex-start}
.limits{border:1px solid rgba(255,200,87,.55);border-radius:14px;padding:20px;background:rgba(255,200,87,.06);margin-top:18px}
.limits ul{margin:8px 0 0;padding-left:20px}
.limits li{margin:4px 0}
details{border:1px solid var(--line);border-radius:12px;background:var(--panel);margin-top:10px}
summary{cursor:pointer;min-height:48px;padding:12px 16px;font-weight:700;display:flex;align-items:center;list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"+";font:700 16px var(--mono);color:var(--cyan);width:22px;flex:none}
details[open] summary::before{content:"−"}
details p{padding:0 16px 4px 38px;color:var(--dim);margin:0 0 12px}
footer{margin-top:56px;padding-top:18px;border-top:1px solid var(--line);font:500 13px/1.8 var(--mono);color:var(--dim);display:flex;gap:6px 16px;flex-wrap:wrap;align-items:center;justify-content:space-between}
footer a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* select 팝업(option): 반투명 배경을 상속하면 브라우저 기본 흰 배경 위에 밝은 글자가 올라가 안 보임 — 전역으로 불투명 어두운 배경·밝은 글자 고정(대비 15:1 이상) */
select{color-scheme:dark}
option,optgroup{background-color:#10101a;color:#F4F6FF}
option:checked,option:hover,option:focus{background-color:#24304a;color:#FFFFFF}
option:disabled,optgroup:disabled{color:#9AA0B4}