Pico CSS 디자인 시스템.

<main class="container"><header><p class="kicker">PICO CSS / READING ROOM</p><h1>A calmer reading setup</h1><p>Adjust a local reading profile. Semantic HTML does most of the work.</p></header><div class="reading-layout"><article><header><h2>Reading preferences</h2></header><form id="preferences"><label for="reader">Profile name<input id="reader" name="reader" required minlength="2" placeholder="Weekend reader" aria-describedby="name-help"></label><small id="name-help">At least two characters. Saved only for this open preview.</small><label for="measure">Reading width<select id="measure"><option value="48">Narrow — 48 characters</option><option value="62" selected>Balanced — 62 characters</option><option value="72">Wide — 72 characters</option></select></label><label for="scale">Text size <output id="size-label">100%</output><input id="scale" type="range" min="90" max="125" step="5" value="100"></label><label><input id="night" type="checkbox" role="switch"> Dark appearance</label><div class="grid"><button type="submit">Review profile</button><button type="reset" class="secondary outline">Reset</button></div></form><footer id="saved" role="status">No profile applied yet.</footer></article><section class="reading-copy"><p class="kicker">A SHORT SAMPLE</p><h2>Make space for attention.</h2><div id="sample"><p>The margin is not leftover space. It gives each paragraph a clear beginning and lets the eye return to the next line without effort.</p><p>A reading interface can be quiet without becoming empty. Descriptive headings, useful contrast, and a predictable rhythm let the content remain in charge.</p></div><details><summary>What changes in this preview?</summary><p>Width changes the maximum line measure, text size scales only this sample, and the appearance switch changes Pico’s theme. These are local preferences, not browser accessibility settings.</p></details></section></div><small>Official Pico CSS 2.1.1. Native form, details, and dialog elements; original application behavior.</small></main><dialog id="review" aria-labelledby="review-title"><article><header><button id="close" aria-label="Close review" rel="prev"></button><h2 id="review-title">Review reading profile</h2></header><p id="review-text"></p><footer><button id="cancel" class="secondary">Keep editing</button><button id="apply">Apply locally</button></footer></article></dialog>

const $=id=>document.getElementById(id);let pending=null;
function update(){ $('sample').style.maxWidth=$('measure').value+'ch';$('sample').style.fontSize=$('scale').value+'%';$('size-label').value=$('scale').value+'%';document.documentElement.dataset.theme=$('night').checked?'dark':'light';}
for(const id of ['measure','scale','night'])$(id).addEventListener('input',update);
$('preferences').addEventListener('submit',event=>{event.preventDefault();pending={name:$('reader').value.trim(),width:$('measure').value,size:$('scale').value,dark:$('night').checked};if(pending.name.length<2){$('reader').setCustomValidity('Use at least two non-space characters.');$('reader').reportValidity();return;}$('review-text').textContent=`${pending.name}: ${pending.width}-character maximum, ${pending.size}% sample text, ${pending.dark?'dark':'light'} appearance. This will apply only to this preview.`;$('review').showModal();});
$('reader').addEventListener('input',()=>{$('reader').setCustomValidity('');$('reader').removeAttribute('aria-invalid')});$('reader').addEventListener('invalid',()=>{$('reader').setAttribute('aria-invalid','true')});
for(const id of ['close','cancel'])$(id).addEventListener('click',()=>$('review').close());
$('apply').addEventListener('click',()=>{$('saved').textContent=`Applied ${pending.name} locally (${pending.width}ch, ${pending.size}%, ${pending.dark?'dark':'light'}). Reloading clears this profile.`;$('review').close();});
$('preferences').addEventListener('reset',()=>{setTimeout(()=>{$('reader').setCustomValidity('');$('reader').removeAttribute('aria-invalid');$('saved').textContent='No profile applied yet.';update()},0)});update();

main.container{max-width:1120px;padding:2rem 1rem}.kicker{font-size:.7rem;letter-spacing:.13em;font-weight:700;color:var(--pico-primary)}.reading-layout{display:grid;grid-template-columns:minmax(260px,.95fr) minmax(0,1.05fr);gap:2rem;align-items:start}.reading-copy{padding-top:1rem}#sample{transition:font-size .15s}output{float:right}#review article{max-width:560px}#review footer{display:flex;flex-wrap:wrap;gap:.5rem}#review footer button{flex:1}h1{max-width:20ch}header>p{max-width:65ch}@media(max-width:800px){.reading-layout{grid-template-columns:1fr;gap:1rem}}