.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-primary{color:#3182f6}.text-dark{color:#191f28}.text-light{color:#4e5968}.text-muted{color:#8b95a1}.font-bold{font-weight:700}.font-semibold{font-weight:600}.font-extrabold{font-weight:800}.m-0{margin:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:40px}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}.mb-4{margin-bottom:40px}.p-0{padding:0}.p-1{padding:8px}.p-2{padding:16px}.p-3{padding:24px}.p-4{padding:40px}.d-block{display:block}.d-inline-block{display:inline-block}.d-flex{display:flex}.d-grid{display:grid}.flex-center{display:flex;align-items:center;justify-content:center}.flex-between{display:flex;align-items:center;justify-content:space-between}.flex-column{display:flex;flex-direction:column}@media(max-width:768px){.hide-mobile{display:none}}@media(min-width:768px){.hide-desktop{display:none}}.clickable{cursor:pointer}.design-system-page{min-height:100vh;background:#f9fafb;color:#191f28;font-family:Pretendard,-apple-system,BlinkMacSystemFont,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Helvetica Neue,Segoe UI,Apple SD Gothic Neo,Noto Sans KR,Malgun Gothic,sans-serif}.ds-sidebar{position:fixed;top:24px;left:24px;z-index:1020;display:flex;width:188px;flex-direction:column;gap:12px;padding:20px;border:1px solid #e5e8eb;border-radius:16px;background:#fffffff5;box-shadow:0 2px 8px #0000000a;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.ds-sidebar>strong{color:#191f28;font-size:17px;font-weight:800;letter-spacing:-.02em}.ds-sidebar nav{display:grid;grid-gap:4px;gap:4px}.ds-sidebar a{padding:9px 12px;border-radius:8px;color:#4e5968;font-size:13px;font-weight:600;transition:all .2s cubic-bezier(.2,0,0,1)}.ds-sidebar a:hover,.ds-sidebar a:focus-visible{outline:none;background:#e8f3ff;color:#1b64da}.ds-content{width:calc(100% - 280px);max-width:1240px;margin-left:248px;padding:32px 32px 96px;box-sizing:border-box}.ds-hero{display:grid;grid-template-columns:minmax(0,1fr) 230px;grid-gap:32px;gap:32px;align-items:end;min-height:300px;padding:64px;border:1px solid #f2f4f6;border-radius:24px;background:radial-gradient(circle at 90% 8%,rgba(232,243,255,.82) 0,transparent 34%),#fff;box-shadow:0 2px 8px #0000000a}.ds-hero p,.ds-hero h1,.ds-hero span{margin:0}.ds-hero p{margin-bottom:16px;color:#3182f6;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.ds-hero h1{max-width:760px;color:#191f28;font-size:48px;font-weight:900;letter-spacing:-.02em;line-height:1.12;word-break:keep-all}.ds-hero .ds-hero__description{display:block;max-width:720px;margin-top:20px;color:#4e5968;font-size:15px;line-height:1.625}.ds-hero .ds-hero__description code{margin-right:4px;padding:3px 7px;border-radius:6px;background:#f2f4f6;color:#333d4b;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}.ds-hero__meta{display:grid;grid-template-columns:1fr;grid-gap:12px;gap:12px}.ds-hero__stat{display:grid;grid-gap:4px;gap:4px;padding:20px;border:1px solid #e5e8eb;border-radius:12px;background:#ffffffdb}.ds-hero__stat strong{color:#191f28;font-size:32px;font-weight:900;line-height:1}.ds-hero__stat span{color:#8b95a1;font-size:12px;font-weight:600;text-transform:uppercase}.ds-section{scroll-margin-top:32px;padding-top:80px}.ds-section__heading{max-width:760px;margin-bottom:24px}.ds-section__heading>p{margin:0 0 8px;color:#3182f6;font-size:12px;font-weight:800;letter-spacing:.08em}.ds-section__heading h2{margin:0;color:#191f28;font-size:32px;font-weight:800;letter-spacing:-.02em;line-height:1.2}.ds-section__heading span{display:block;margin-top:12px;color:#4e5968;font-size:15px;line-height:1.625;word-break:keep-all}.ds-section__heading span code{padding:2px 6px;border-radius:6px;background:#f2f4f6;color:#333d4b}.palette-group,.foundation-group,.font-system-card,.typography-guide,.component-showcase,.inventory-table,.principle-card{margin-bottom:24px;padding:32px;border:1px solid #e5e8eb;border-radius:16px;background:#fff;box-shadow:0 2px 8px #0000000a}.palette-group>header,.foundation-group>header,.typography-guide>header,.component-showcase>header{display:flex;justify-content:space-between;gap:24px;margin-bottom:24px}.palette-group>header h3,.foundation-group>header h3,.typography-guide>header h3,.component-showcase>header h3{margin:0;color:#191f28;font-size:20px;font-weight:800;line-height:1.375}.palette-group>header>span,.foundation-group>header>span,.typography-guide>header>span,.component-showcase>header>span,.palette-group>header>code,.foundation-group>header>code,.typography-guide>header>code,.component-showcase>header>code{max-width:560px;color:#8b95a1;font-size:13px;line-height:1.5;text-align:right}.swatch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));grid-gap:12px;gap:12px}.swatch.ds-button{display:grid;height:auto;min-height:164px;padding:12px;border-color:#e5e8eb;background:#fff;color:#191f28;text-align:left;align-content:end;justify-content:stretch;grid-gap:6px;gap:6px;box-shadow:none;white-space:normal}.swatch.ds-button:hover:not(:disabled){border-color:#3182f6;background:#fff;box-shadow:0 4px 16px #00000014;transform:translateY(-2px)}.swatch.ds-button .ds-button__label{display:contents}.swatch.ds-button strong,.swatch.ds-button small,.swatch.ds-button em{display:block;word-wrap:anywhere}.swatch.ds-button strong{font-size:13px;font-weight:800}.swatch.ds-button small{color:#4e5968;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}.swatch.ds-button em{color:#8b95a1;font-size:11px;font-style:normal;font-weight:500}.swatch__sample{display:block;height:54px;margin-bottom:8px;border:1px solid rgba(25,31,40,.08);border-radius:8px}.swatch__copied{color:#3182f6!important;font-weight:700!important}.token-list{display:grid}.token-row{display:grid;grid-template-columns:minmax(155px,.7fr) minmax(170px,1fr) minmax(180px,1.2fr) 96px;grid-gap:16px;gap:16px;align-items:center;min-height:56px;border-top:1px solid #f2f4f6}.token-row:first-child{border-top:0}.token-row code{color:#1b64da;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;font-weight:700}.token-row strong{color:#333d4b;font-size:13px;word-wrap:anywhere}.token-row>span{color:#8b95a1;font-size:13px}.token-row i,.token-row b,.token-row em{display:block;justify-self:end;background:#3182f6}.token-row i{max-width:88px;height:10px;border-radius:9999px}.token-row b{width:58px;height:34px;border:1px solid #e5e8eb;background:#e8f3ff}.token-row em{width:58px;height:34px;border-radius:8px;background:#fff}.font-system-card{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);grid-gap:40px;gap:40px}.font-family-panel p,.font-family-panel h3,.font-family-panel span,.font-family-panel strong{margin:0}.font-family-panel p{color:#3182f6;font-size:12px;font-weight:800;text-transform:uppercase}.font-family-panel h3{margin-top:8px;color:#191f28;font-size:32px;font-weight:900}.font-family-panel span{display:block;margin-top:8px;color:#8b95a1;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;word-wrap:anywhere}.font-family-panel strong{display:block;margin-top:32px;color:#333d4b;font-size:24px;letter-spacing:-.02em}.font-principles{padding:20px;border-radius:12px;background:#f2f4f6}.font-principles>strong{color:#191f28;font-size:13px}.font-principles ul{display:grid;grid-gap:8px;gap:8px;margin:12px 0 0;padding-left:20px;color:#4e5968;font-size:13px;line-height:1.625}.typography-guide-list{display:grid}.type-style-row{display:grid;grid-template-columns:minmax(230px,1.1fr) minmax(250px,1fr) minmax(190px,.7fr);grid-gap:24px;gap:24px;align-items:center;padding:20px 0;border-top:1px solid #f2f4f6}.type-style-row:first-child{border-top:0}.type-style-sample{color:#191f28;letter-spacing:-.02em}.type-style-meta{display:grid;grid-gap:4px;gap:4px}.type-style-meta strong{color:#333d4b;font-size:13px}.type-style-meta span{color:#8b95a1;font-size:12px;line-height:1.5}.type-style-row>code{color:#1b64da;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}.component-showcase{scroll-margin-top:32px}.component-showcase>header{align-items:flex-start}.component-showcase>header p{margin:0 0 4px;color:#3182f6;font-size:12px;font-weight:800;text-transform:uppercase}.component-showcase>header code{padding:6px 9px;border-radius:6px;background:#f2f4f6;color:#4e5968;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.component-showcase>pre{max-width:100%;margin:16px 0 0;padding:20px;overflow-x:auto;border-radius:12px;background:#191f28;color:#e8edf3;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:1.7;white-space:pre}.preview-surface{padding:32px;border:1px solid #f2f4f6;border-radius:12px;background:linear-gradient(90deg,rgba(229,232,235,.28) 1px,transparent 1px),linear-gradient(rgba(229,232,235,.28) 1px,transparent 1px),#f9fafb;background-size:24px 24px}.button-preview,.badge-preview{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.form-preview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:20px;gap:20px;align-items:start}.phone-field-demo{display:grid;grid-gap:8px;gap:8px}.phone-field-demo>p{display:flex;align-items:center;gap:8px;margin:0;color:#8b95a1;font-size:12px;font-weight:500}.phone-field-demo code{padding:3px 7px;border-radius:6px;background:#e8f3ff;color:#1b64da;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600}.file-upload-preview{display:grid;grid-template-columns:minmax(0,680px);justify-content:center}.state-preview,.overlay-preview{display:grid;grid-gap:20px;gap:20px}.overlay-preview__actions{display:flex;flex-wrap:wrap;gap:12px;padding:20px;border:1px solid #e5e8eb;border-radius:12px;background:#fff}.toast-state-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:16px;gap:16px}.toast-state{display:grid;grid-gap:12px;gap:12px;min-width:0;padding:16px;border:1px solid #e5e8eb;border-radius:12px;background:#fff}.toast-state>header{display:flex;align-items:center;justify-content:space-between;gap:12px}.toast-state>header strong{color:#333d4b;font-size:13px;font-weight:700}.toast-state>header code{padding:4px 7px;border-radius:6px;background:#f2f4f6;color:#4e5968;font-size:12px}.overlay-usage{padding:20px;border:1px solid #e5e8eb;border-radius:12px;background:#fff}.overlay-usage>strong{color:#191f28;font-size:13px;font-weight:800}.overlay-usage ul{display:grid;grid-gap:8px;gap:8px;margin:12px 0 0;padding-left:20px;color:#4e5968;font-size:13px;line-height:1.625}.ds-toast-viewport{position:fixed;top:24px;right:24px;z-index:10010;width:400px}.skeleton-preview,.process-loading-preview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:20px;gap:20px;align-items:start}.skeleton-example{display:grid;grid-gap:16px;gap:16px;min-width:0;padding:20px;border:1px solid #e5e8eb;border-radius:12px;background:#fff}.skeleton-example__header{display:flex;align-items:center;justify-content:space-between;gap:12px}.skeleton-example__header>strong{color:#333d4b;font-size:13px;font-weight:700}.skeleton-example__header>code{flex:0 0 auto}.skeleton-example--wide{grid-column-start:1;grid-column-end:-1}.state-strip{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:20px;border:1px solid #e5e8eb;border-radius:12px;background:#fff}.inventory-table{padding:0;overflow:hidden}.inventory-row{display:grid;grid-template-columns:minmax(160px,.8fr) minmax(240px,1.2fr) minmax(250px,1fr) 100px;grid-gap:20px;gap:20px;align-items:center;min-height:66px;padding:0 24px;border-top:1px solid #f2f4f6}.inventory-row:first-child{border-top:0}.inventory-row strong{color:#191f28;font-size:13px}.inventory-row>span{color:#4e5968;font-size:13px;line-height:1.5}.inventory-row code{color:#8b95a1;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;word-wrap:anywhere}.inventory-row--head{min-height:48px;background:#f2f4f6}.inventory-row--head span{color:#8b95a1;font-size:12px;font-weight:700;text-transform:uppercase}.inventory-status{justify-self:start;padding:5px 9px;border-radius:9999px;font-size:11px!important;font-weight:700;white-space:nowrap}.inventory-status--standard{background:#e5f9ee;color:#0d9b4e!important}.inventory-status--existing{background:#e8f3ff;color:#1b64da!important}.inventory-status--legacy{background:#fef0e6;color:#f76707!important}.principle-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:20px;gap:20px}.principle-card{margin:0}.principle-card h3{margin:0 0 16px;color:#191f28;font-size:20px;font-weight:800}.principle-card ul{display:grid;grid-gap:12px;gap:12px;margin:0;padding:0;list-style:none}.principle-card li{position:relative;padding-left:24px;color:#4e5968;font-size:13px;line-height:1.625}.principle-card li:before{position:absolute;top:0;left:0;color:#0d9b4e;font-weight:900;content:"✓"}.principle-card--dont li:before{color:#e8344e;content:"×"}.ds-copy-feedback{position:fixed;right:24px;bottom:24px;z-index:1070;margin:0;padding:12px 16px;border-radius:12px;background:#191f28f0;color:#fff;box-shadow:0 16px 48px #00000029;font-size:13px;font-weight:600}@media(max-width:1024px){.design-system-page{padding-top:72px}.ds-sidebar{top:0;right:0;left:0;width:auto;height:72px;padding:12px 20px;flex-direction:row;align-items:center;border:0;border-bottom:1px solid #e5e8eb;border-radius:0;box-sizing:border-box}.ds-sidebar>strong{flex:0 0 auto}.ds-sidebar nav{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}.ds-sidebar nav::-webkit-scrollbar{display:none}.ds-sidebar a{flex:0 0 auto}.ds-content{width:100%;max-width:100%;margin-left:0}.ds-section,.component-showcase{scroll-margin-top:88px}}@media(max-width:768px){.design-system-page{padding-top:64px}.ds-sidebar{height:64px;padding:8px 16px}.ds-sidebar>strong{font-size:15px}.ds-content{padding:16px 16px 64px}.ds-hero{grid-template-columns:1fr;min-height:auto;padding:32px}.ds-hero h1{font-size:32px}.ds-hero__meta{grid-template-columns:repeat(2,minmax(0,1fr))}.ds-section{padding-top:64px}.ds-section__heading h2{font-size:28px}.palette-group,.foundation-group,.font-system-card,.typography-guide,.component-showcase,.principle-card{padding:20px}.palette-group>header,.foundation-group>header,.typography-guide>header,.component-showcase>header{display:grid}.palette-group>header>span,.foundation-group>header>span,.typography-guide>header>span,.component-showcase>header>span,.palette-group>header>code,.foundation-group>header>code,.typography-guide>header>code,.component-showcase>header>code{text-align:left}.font-system-card,.form-preview,.toast-state-grid,.skeleton-preview,.process-loading-preview,.principle-grid{grid-template-columns:1fr}.token-row,.type-style-row,.inventory-row{grid-template-columns:1fr;gap:8px;padding:16px 0}.token-row i,.token-row b,.token-row em{justify-self:start}.inventory-row{padding-right:16px;padding-left:16px}.inventory-row--head{display:none}.preview-surface{padding:20px}.ds-toast-viewport{top:16px;right:16px;left:16px;width:auto}.ds-copy-feedback{right:16px;bottom:16px;left:16px;text-align:center}}@media(prefers-reduced-motion:reduce){.design-system-page *,.design-system-page *:before,.design-system-page *:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}