* { box-sizing:border-box }
body.landing { margin:0; color:#222036; background:#f3f1ed; font:16px/1.7 system-ui,-apple-system,"Noto Sans KR",sans-serif; word-break:keep-all }
.landing header { max-width:1180px; margin:auto; padding:28px 30px }
.logo { text-decoration:none; color:inherit; font-size:28px; font-weight:800; letter-spacing:-.05em }
.logo span { display:inline-block; padding-left:24px; font-size:16px; font-weight:500; color:#625e76; letter-spacing:0 }
.intro { width:min(1120px,calc(100% - 60px)); margin:30px auto 64px; display:grid; grid-template-columns:1.2fr 1fr; gap:80px; align-items:center }
.intro h1 { margin:0 0 28px; font-size:clamp(40px,5vw,68px); line-height:1.2; letter-spacing:-.055em }
.intro em { font-style:normal; color:#482dcc }
.intro p { font-size:20px; line-height:1.75; color:#5a566b; margin:0 0 28px }
.intro button { display:block; padding:18px 22px; border:0; border-radius:12px; font:700 18px/1.5 inherit; font-family:inherit; font-size:18px; font-weight:700; color:white; background:#482dcc; cursor:pointer; text-align:left }
.intro button:hover { background:#332099 }
.intro button:disabled { opacity:.6; cursor:wait }
.intro .note,.intro #start-status { margin:16px 0; font-size:16px }
.intro .secondary { color:#4c426e; text-underline-offset:5px; padding:10px 0; display:inline-block }
.intro figure { margin:0; text-align:center }
.phone { max-width:322px; margin:auto; padding:8px; border:2px solid #d0c8e4; border-radius:35px; background:#ede9f8; box-shadow:18px 28px 65px #2e224624; transform:rotate(2deg); overflow:hidden }
.phone img { display:block; width:100%; height:auto; border-radius:26px }
.intro figcaption { font-size:16px; margin-top:26px; color:#625e76 }
:focus-visible { outline:3px solid #8e6cf4; outline-offset:5px }
/* Only loaded on the portfolio hostname. Keep recording controls in the original demo. */
.tieming-web-scenario-controls,.tieming-web-demo-controls { display:none !important }
.experience-bar { position:fixed; top:24px; left:24px; z-index:99999; max-width:260px; font:16px/1.6 system-ui,sans-serif; color:#39334b; background:#faf8ff; border:1px solid #d5cde8; border-radius:12px; padding:18px }
.experience-bar p { margin:0 0 12px }
.experience-bar a { display:block; color:#4127d1; text-underline-offset:4px; padding:6px 0 }
[class*="text-caption"],[class*="text-label"],[class*="text-body-sm"],[class*="text-body-md"] { font-size:16px !important; line-height:1.5 !important }
.tieming-assistant-chart-guide { display:none }
.tieming-assistant-chart-result text { font-size:16px !important }
@media(max-width:1050px) {
 .experience-bar { top:0; left:0; right:0; max-width:none; border-radius:0; display:flex; gap:12px; padding:8px 16px; align-items:center; justify-content:space-between; min-height:56px }
 .experience-bar p { display:none }
 .experience-bar a { font-size:16px; padding:6px 0 }
 body:not(.landing) { padding-top:62px; height:100dvh; overflow:hidden }
 body:not(.landing) #root { height:100%; margin-top:0 }
 .tieming-web-stage { min-height:0; height:calc(100dvh - 62px) }
 .tieming-web-phone { height:calc(100dvh - 62px); max-height:100% }
 .tieming-ispark-logo { display:none }
}
@media(max-width:700px) { .landing header { padding:20px } .logo span { display:none } .intro { width:calc(100% - 40px); grid-template-columns:1fr; gap:32px; margin-top:12px } .intro h1 { font-size:40px; margin-bottom:20px } .intro p { font-size:18px; margin-bottom:22px } .intro button { width:100%; padding:16px } .intro .note { font-size:16px } .phone { max-width:270px } }
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important } }