*,*::before,*::after{box-sizing:border-box}
html{font-family:var(--base-font);color:var(--base-text);background:var(--base-background);line-height:var(--base-leading)}
body{margin:0;min-width:0}body.base-shell{min-height:100dvh;display:flex;flex-direction:column}
img,video,svg{max-width:100%;height:auto}button,input,textarea,select{font:inherit}
a{color:inherit;text-underline-offset:.2em}button{cursor:pointer}
:where(a,button,input,textarea,select,summary):focus-visible{outline:var(--base-focus-width) solid var(--base-focus);outline-offset:var(--base-focus-offset)}
.base-container{width:100%;max-width:calc(var(--base-container) + 2 * var(--base-gutter));margin-inline:auto;padding-inline:var(--base-gutter);min-width:0;overflow-wrap:anywhere}
.base-skip{position:absolute;inset-block-start:var(--base-space-4);inset-inline-start:var(--base-gutter);transform:translateY(-200%);padding:var(--base-space-3);background:var(--base-background);z-index:2}
.base-skip:focus{transform:none}
.base-header{border-bottom:var(--base-stroke) solid var(--base-border)}
.base-header-row{display:flex;align-items:center;justify-content:space-between;gap:var(--base-space-6);flex-wrap:wrap;padding-block:var(--base-space-6)}
.base-brand{font-weight:650;font-size:var(--base-text-lg);text-decoration:none;min-width:0;max-width:100%;overflow-wrap:anywhere;flex:0 1 auto}
.base-logo{display:block;max-height:var(--base-logo-height);width:auto;object-fit:contain}
.base-nav,.base-social{display:flex;align-items:center;gap:var(--base-space-6);flex-wrap:wrap;min-width:0}
.base-nav a{display:inline-flex;align-items:center;min-height:var(--base-button-height);text-decoration:none;overflow-wrap:anywhere;max-width:100%}
.base-nav a:hover{text-decoration:underline}
.base-main{flex:1;padding-block:var(--base-space-12)}
.base-placeholder{padding-block:var(--base-space-16);max-width:100%}
.base-eyebrow{font-size:var(--base-text-sm);color:var(--base-muted);margin:0 0 var(--base-space-4)}
.base-placeholder h1{font-size:var(--base-heading);line-height:1.2;letter-spacing:-.025em;margin:0 0 var(--base-space-6);font-weight:650}
.base-placeholder>p:last-child{color:var(--base-muted);margin:0}
.base-footer{border-top:var(--base-stroke) solid var(--base-border);background:var(--base-surface);padding-block:var(--base-space-8);font-size:var(--base-text-sm)}
.base-footer-name{font-weight:600;margin:0 0 var(--base-space-4)}
.base-footer-info{display:grid;gap:var(--base-space-2);margin:0;color:var(--base-muted)}
.base-footer-info>div{display:flex;gap:var(--base-space-3);flex-wrap:wrap;min-width:0}
.base-footer-info dt,.base-footer-info dd{margin:0;max-width:100%;overflow-wrap:anywhere}
.base-footer-copy{margin-block:var(--base-space-4);color:var(--base-muted)}
.base-social:empty{display:none}.base-social{margin-top:var(--base-space-4)}
.base-mobile-nav{min-width:0;max-width:100%;flex:1 1 100%}
.base-mobile-nav summary{min-height:var(--base-button-height);cursor:pointer;width:fit-content;padding-block:var(--base-space-2)}
.base-mobile-nav .base-nav{padding-block:var(--base-space-3);align-items:flex-start}
@media(max-width:767px){.base-header-row{gap:var(--base-space-3);padding-block:var(--base-space-4)}.base-nav{gap:var(--base-space-4)}.base-placeholder{padding-block:var(--base-space-12)}}

/* Shell과 native 본문이 동일한 typographic/container 계약을 사용한다. */
.base-shell{font-size:var(--base-text-md);font-weight:var(--base-weight)}
.base-shell .base-main{padding-block:var(--base-section-gap);min-width:0}
.base-shell .base-header-row{gap:var(--base-space-6);min-width:0}
.base-shell .base-brand{max-width:100%;min-width:0;font-weight:var(--base-weight-heading)}
.base-shell .base-nav{min-width:0;max-width:100%}
.base-shell .base-footer{margin-top:var(--base-space-8)}
.base-shell .base-footer :is(p,dl){margin-block:var(--base-space-3)}
.base-shell :is(img,video,iframe){max-width:100%;min-width:0}
.base-shell .base-mobile-nav summary{display:flex;align-items:center;padding-inline:var(--base-space-3);border:var(--base-stroke) solid var(--base-border);border-radius:var(--base-radius)}
.base-shell .base-mobile-nav .base-nav{margin-top:var(--base-space-3)}
