:root{color:#12324a;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f7fbff;font-family:Pretendard,Noto Sans KR,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:400;line-height:1.5}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:#f7fbff;min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button{transition:transform .2s,box-shadow .2s}button:hover{transform:translateY(-1px)}#root{min-height:100vh}.app-shell{color:#12324a;background:linear-gradient(#f7fbff 0%,#f1f6fb 100%);min-height:100vh}.page-content{flex-direction:column;gap:24px;max-width:1160px;margin:0 auto;padding:24px 20px 48px;display:flex}.site-header{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffff5;border-bottom:1px solid #dceaf5}.header-inner{justify-content:space-between;align-items:center;gap:16px;max-width:1160px;margin:0 auto;padding:16px 20px;display:flex}.brand{color:#0f3b57;flex-direction:column;gap:2px;text-decoration:none;display:flex}.brand-mark{font-size:1.3rem;font-weight:800}.brand-subtitle{color:#5e7a90;font-size:.85rem}.header-nav{align-items:center;gap:20px;display:flex}.header-nav a{color:#234c63;font-weight:600;text-decoration:none}.menu-toggle{cursor:pointer;background:0 0;border:0;flex-direction:column;gap:4px;display:none}.menu-toggle span{background:#12324a;border-radius:999px;width:24px;height:2px}.hero-card,.content-section{background:#fff;border:1px solid #e3edf6;border-radius:24px;box-shadow:0 12px 32px #0f3b5714}.hero-card{background:linear-gradient(135deg,#f1f8ff 0%,#e8f7f6 100%);padding:40px}.hero-copy{max-width:760px}.eyebrow{color:#0f7c6f;background:#0f7c6f1a;border-radius:999px;margin-bottom:12px;padding:6px 10px;font-size:.8rem;font-weight:700;display:inline-block}.hero-copy h1{color:#12324a;margin-bottom:10px;font-size:clamp(1.9rem,3vw,2.8rem);line-height:1.2}.hero-description{color:#5e7a90;max-width:700px;font-size:1rem}.search-box{background:#fff;border:1px solid #dfeef7;border-radius:999px;align-items:center;gap:12px;margin-top:24px;padding:10px 12px 10px 18px;display:flex;box-shadow:0 10px 24px #0f3b5714}.search-box input{color:#12324a;background:0 0;border:0;outline:none;flex:1;font-size:1rem}.search-box button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#1678c8 0%,#1eb5b0 100%);border:0;border-radius:999px;padding:12px 22px;font-weight:700}.search-hint{color:#5e7a90;margin-top:12px;font-size:.95rem}.content-section{padding:24px}.section-heading{justify-content:space-between;align-items:center;margin-bottom:18px;display:flex}.section-heading h2{color:#12324a;font-size:1.2rem}.category-grid,.example-grid{gap:14px;display:grid}.category-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.example-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.category-card,.example-card{cursor:pointer;text-align:left;color:#12324a;background:#f8fbff;border:1px solid #dfeef7;border-radius:18px;padding:16px;transition:transform .2s,box-shadow .2s,border-color .2s}.category-card:hover,.example-card:hover{border-color:#7cc3e4;transform:translateY(-3px);box-shadow:0 10px 24px #1678c81f}.category-card{align-items:center;gap:10px;font-weight:700;display:flex}.category-icon{font-size:1.2rem}.example-card{font-size:.95rem;line-height:1.5}.recent-list{flex-direction:column;gap:10px;list-style:none;display:flex}.recent-item{background:#f8fbff;border:1px solid #e5f0f8;border-radius:14px;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;display:flex}.recent-item button,.link-button{cursor:pointer;color:#0f7c6f;background:0 0;border:0;font-weight:700}.empty-state{color:#6b8598;padding:12px 0}.site-footer{text-align:center;color:#6b8598;padding:24px 20px 40px;font-size:.95rem}@media (width<=900px){.category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.example-grid{grid-template-columns:1fr}}@media (width<=720px){.menu-toggle{display:flex}.header-nav{background:#fff;border:1px solid #e3edf6;border-radius:16px;flex-direction:column;align-items:flex-start;padding:12px;display:none;position:absolute;top:64px;right:20px;box-shadow:0 12px 30px #0f3b571a}.header-nav.open{display:flex}.hero-card,.content-section{padding:20px}.search-box{border-radius:20px;flex-direction:column;align-items:stretch;padding:12px}.search-box button{width:100%}}@media (width<=480px){.page-content{padding:16px 12px 32px}.header-inner{padding:14px 12px}.hero-card,.content-section{border-radius:18px;padding:16px}.section-heading{flex-direction:column;align-items:flex-start;gap:8px}.category-grid{grid-template-columns:1fr}.category-card{padding:14px}}