:root{--color-primary: #0F4C42;--color-primary-hover: #1A6B5C;--color-primary-light: #2FA599;--color-primary-bg: #F0FAF8;--color-primary-50: #E6F5F2;--color-bg: #FAFBFC;--color-bg-white: #FFFFFF;--color-surface: #F3F4F6;--color-border: #E5E7EB;--color-border-light: #F0F1F3;--color-text: #1A1A2E;--color-text-secondary: #4B5563;--color-text-muted: #9CA3AF;--color-code-bg: #1E1E2E;--color-code-text: #CDD6F4;--color-code-comment: #6C7086;--color-accent: #F59E0B;--color-success: #10B981;--color-warning: #F59E0B;--color-danger: #EF4444;--color-purple: #8B5CF6;--shadow-sm: 0 1px 2px rgba(0,0,0,.05);--shadow-md: 0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -1px rgba(0,0,0,.04);--shadow-lg: 0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -2px rgba(0,0,0,.04);--shadow-xl: 0 20px 25px -5px rgba(0,0,0,.08), 0 10px 10px -5px rgba(0,0,0,.03);--shadow-card-hover: 0 12px 24px -4px rgba(15,76,66,.12);--font-sans: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;--font-mono: "Fira Code", "JetBrains Mono", "Consolas", monospace;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--text-4xl: 2.25rem;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-full: 9999px;--max-width: 1200px;--max-width-narrow: 860px;--header-height: 64px;--nav-height: 48px;--grid-gap: 20px;--transition-fast: .15s ease;--transition-base: .2s ease;--transition-slow: .3s ease}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;scroll-behavior:smooth}body{font-family:var(--font-sans);color:var(--color-text);background:var(--color-bg);line-height:1.6;-webkit-font-smoothing:antialiased}a{color:var(--color-primary);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-primary-hover)}.site-header{position:fixed;top:0;left:0;right:0;height:var(--header-height);background:#ffffffeb;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--color-border);z-index:100}.header-inner{max-width:var(--max-width);margin:0 auto;height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-6)}.header-logo{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-lg);font-weight:700;color:var(--color-primary);text-decoration:none}.header-logo:hover{color:var(--color-primary)}.header-logo-icon{width:30px;height:30px;background:var(--color-primary);color:#fff;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:800;font-family:var(--font-mono)}.header-brand-link{color:var(--color-text-muted);font-weight:400;font-size:var(--text-xs);margin-left:var(--space-2);text-decoration:none;padding:.15rem .5rem;border:1px solid var(--color-border);border-radius:var(--radius-full);transition:all var(--transition-fast)}.header-brand-link:hover{color:var(--color-primary);border-color:var(--color-primary-light);background:var(--color-primary-50)}.header-right{display:flex;align-items:center;gap:var(--space-3)}.header-search{position:relative}.header-search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--color-text-muted);font-size:var(--text-sm);pointer-events:none}.header-search-input{width:240px;padding:.5rem 1rem .5rem 2.2rem;border:1px solid var(--color-border);border-radius:var(--radius-full);font-size:var(--text-sm);font-family:var(--font-sans);background:var(--color-surface);color:var(--color-text);outline:none;transition:all var(--transition-base)}.header-search-input::placeholder{color:var(--color-text-muted)}.header-search-input:focus{border-color:var(--color-primary-light);background:#fff;box-shadow:0 0 0 3px #2fa5991a;width:280px}.top-nav{position:fixed;top:var(--header-height);left:0;right:0;height:var(--nav-height);background:#fffffff2;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--color-border);z-index:90}.top-nav-inner{max-width:var(--max-width);margin:0 auto;height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-6)}.nav-main,.nav-ref{display:flex;gap:var(--space-1)}.nav-link{display:inline-flex;align-items:center;padding:.45rem .9rem;font-size:var(--text-sm);font-weight:500;color:var(--color-text-secondary);border-radius:var(--radius-sm);transition:all var(--transition-fast);text-decoration:none;position:relative}.nav-link:hover{color:var(--color-primary);background:var(--color-primary-50)}.nav-link.active{color:var(--color-primary);font-weight:600;background:transparent}.nav-link.active:after{content:"";position:absolute;bottom:-13px;left:8px;right:8px;height:2px;background:var(--color-primary);border-radius:2px}.nav-group-start{margin-left:.5rem;padding-left:1.1rem;border-left:1px solid var(--color-border)}.nav-link-ref{font-size:var(--text-xs);color:var(--color-text-muted);padding:.4rem .7rem}.nav-link-ref:hover{background:var(--color-surface);color:var(--color-text-secondary)}.nav-link-ref.active{color:var(--color-primary);font-weight:600}.nav-link-ref.active:after{bottom:-13px;left:4px;right:4px}.main-content{padding-top:calc(var(--header-height) + var(--nav-height));min-height:100vh}.content-wide{max-width:var(--max-width);margin:0 auto;padding:0 var(--space-6)}.content-narrow{max-width:var(--max-width-narrow);margin:0 auto;padding:0 var(--space-6)}.hero{background:linear-gradient(135deg,#0f4c42,#1a6b5c,#2fa599);padding:var(--space-16) var(--space-6) var(--space-12);text-align:center;position:relative;overflow:hidden}.hero:before{content:"h2 { text-align: center; border-bottom: 1px solid; } p { line-height: 1.8em; font-size: 1em; } body { font-family: serif; color: #333; } .box { padding: 1em; border-radius: 8px; } span.underline { border-bottom: 2px solid; }";position:absolute;inset:0;font-family:var(--font-mono);font-size:.85rem;color:#ffffff0a;word-break:break-all;line-height:2.2;padding:var(--space-4);pointer-events:none}.hero-inner{position:relative;z-index:1;max-width:640px;margin:0 auto}.hero h1{font-size:var(--text-4xl);font-weight:800;color:#fff;letter-spacing:-.025em;margin-bottom:var(--space-4);line-height:1.2}.hero-desc{font-size:var(--text-lg);color:#ffffffd9;line-height:1.7;margin-bottom:var(--space-8)}.hero-buttons{display:flex;gap:var(--space-3);justify-content:center;margin-bottom:var(--space-10)}.btn-primary{display:inline-flex;align-items:center;gap:var(--space-2);padding:.75rem 1.5rem;background:#fff;color:var(--color-primary);border-radius:var(--radius-md);font-weight:600;font-size:var(--text-base);font-family:var(--font-sans);border:none;cursor:pointer;transition:all var(--transition-base);box-shadow:var(--shadow-md);text-decoration:none}.btn-primary:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg);color:var(--color-primary)}.btn-secondary{display:inline-flex;align-items:center;gap:var(--space-2);padding:.75rem 1.5rem;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:var(--radius-md);font-weight:500;font-size:var(--text-base);font-family:var(--font-sans);cursor:pointer;transition:all var(--transition-base);text-decoration:none}.btn-secondary:hover{background:#ffffff1a;border-color:#fff9;color:#fff}.hero-stats{display:flex;justify-content:center;gap:var(--space-10);padding-top:var(--space-6);border-top:1px solid rgba(255,255,255,.15)}.hero-stat{display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}.hero-stat-icon{font-size:1.5rem}.hero-stat-label{font-size:var(--text-sm);color:#fffc;line-height:1.4}.section-title{font-size:var(--text-xl);font-weight:700;color:var(--color-text);margin-bottom:var(--space-6);display:flex;align-items:center;gap:var(--space-3)}.section-title:after{content:"";flex:1;height:1px;background:var(--color-border)}.category-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:var(--space-4)}.category-card{display:flex;flex-direction:column;align-items:center;padding:var(--space-6) var(--space-4);background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);text-decoration:none;transition:all var(--transition-slow);box-shadow:var(--shadow-sm);text-align:center}.category-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover);border-color:var(--color-primary-light)}.category-icon{width:48px;height:48px;background:var(--color-primary-bg);color:var(--color-primary);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1.3rem;font-weight:800;margin-bottom:var(--space-3);transition:all var(--transition-base)}.category-card:hover .category-icon{background:var(--color-primary);color:#fff}.category-name{font-size:var(--text-base);font-weight:600;color:var(--color-text);margin-bottom:var(--space-1)}.category-count{font-size:var(--text-xs);color:var(--color-text-muted)}.page-header{padding:var(--space-8) 0 var(--space-6)}.page-title{font-size:var(--text-2xl);font-weight:800;color:var(--color-text);margin-bottom:var(--space-2)}.page-desc{color:var(--color-text-secondary);font-size:var(--text-base)}.filter-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-6);padding-bottom:var(--space-4);border-bottom:1px solid var(--color-border-light);flex-wrap:wrap;gap:var(--space-3)}.filter-tabs{display:flex;gap:var(--space-2)}.filter-tab{padding:.35rem .85rem;border:1px solid var(--color-border);border-radius:var(--radius-full);background:transparent;color:var(--color-text-secondary);font-size:var(--text-sm);font-weight:500;font-family:var(--font-sans);cursor:pointer;transition:all var(--transition-fast)}.filter-tab:hover{border-color:var(--color-primary-light);color:var(--color-primary)}.filter-tab.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--grid-gap)}.preview-card{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;transition:all var(--transition-slow);box-shadow:var(--shadow-sm)}.preview-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover);border-color:var(--color-primary-light)}.preview-card.active{border-color:var(--color-primary);box-shadow:0 0 0 2px #0f4c4226,var(--shadow-lg)}.card-preview{height:160px;background:var(--color-surface);border-bottom:1px solid var(--color-border-light);overflow:hidden;display:flex;align-items:center;justify-content:center}.card-preview iframe{width:100%;height:100%;border:none;pointer-events:none}.card-info{padding:var(--space-4)}.card-title{font-size:var(--text-base);font-weight:600;color:var(--color-text);margin-bottom:var(--space-1);line-height:1.3}.card-tags{font-size:var(--text-xs);color:var(--color-text-muted);margin-bottom:var(--space-3)}.card-badges{display:flex;align-items:center;gap:var(--space-1)}.compact-badge{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:var(--radius-full);font-size:10px;font-weight:700}.compact-badge.safe{background:#dcfce7;color:var(--color-success)}.compact-badge.warn{background:#fef3c7;color:var(--color-warning)}.compact-badge.danger{background:#fee2e2;color:var(--color-danger)}.recommend-star{color:var(--color-accent);font-size:14px;margin-left:var(--space-1)}.detail-panel{grid-column:1 / -1;background:#fff;border:1px solid var(--color-primary-light);border-radius:var(--radius-xl);padding:var(--space-8);box-shadow:var(--shadow-xl);margin-top:var(--space-1);margin-bottom:var(--space-3);animation:panelSlideDown .3s ease;display:none}.detail-panel.open{display:block}@keyframes panelSlideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.detail-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-6);padding-bottom:var(--space-4);border-bottom:1px solid var(--color-border-light)}.detail-title{font-size:var(--text-xl);font-weight:700;color:var(--color-text)}.detail-close{width:36px;height:36px;border-radius:var(--radius-md);border:1px solid var(--color-border);background:#fff;color:var(--color-text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:all var(--transition-fast)}.detail-close:hover{background:var(--color-surface);color:var(--color-text);border-color:var(--color-text-muted)}.detail-layout{display:grid;grid-template-columns:3fr 2fr;gap:var(--space-6)}.detail-layout>div{min-width:0}.detail-badges{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-4)}.detail-badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:.25rem .65rem;border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:600;letter-spacing:.02em}.detail-badge.safe{background:#dcfce7;color:#166534}.detail-badge.warn{background:#fef3c7;color:#92400e}.detail-badge.danger{background:#fee2e2;color:#991b1b}.detail-badge.access{background:#ede9fe;color:#5b21b6}.detail-badge.recommend{background:linear-gradient(135deg,#fef9c3,#fde68a);color:#92400e;border:1px solid #FCD34D}.detail-preview{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden}.detail-preview iframe{width:100%;min-height:80px;border:none;display:block;transition:width var(--transition-base);background:#fff;border-radius:var(--radius-sm)}.preview-toolbar{display:flex;align-items:center;justify-content:space-between;padding:var(--space-2) var(--space-3);background:#fff;border-bottom:1px solid var(--color-border-light)}.preview-tabs{display:flex;gap:var(--space-1)}.preview-tab{padding:.3rem .7rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:transparent;font-size:var(--text-xs);font-family:var(--font-sans);cursor:pointer;transition:all var(--transition-fast);color:var(--color-text-secondary)}.preview-tab:hover{border-color:var(--color-primary-light)}.preview-tab.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.preview-text-input-wrapper{padding:var(--space-2) var(--space-3);background:#fff;border-bottom:1px solid var(--color-border-light)}.preview-text-field{display:flex;align-items:center;gap:var(--space-2)}.preview-text-field+.preview-text-field{margin-top:var(--space-2)}.preview-text-label{font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted);white-space:nowrap;min-width:2.5rem}.preview-text-input{flex:1;width:100%;padding:.45rem .75rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:var(--text-sm);font-family:var(--font-sans);color:var(--color-text);background:var(--color-surface);outline:none;transition:all var(--transition-base)}.preview-text-input::placeholder{color:var(--color-text-muted)}.preview-text-input:focus{border-color:var(--color-primary-light);background:#fff;box-shadow:0 0 0 3px #2fa5991a}.preview-iframe-wrapper{padding:var(--space-2);background:var(--color-surface);display:flex;justify-content:center}.preview-iframe-wrapper.device-frame{background:repeating-conic-gradient(var(--color-surface) 0% 25%,#e9ecef 0% 50%) 50% / 16px 16px}.code-block-wrapper{position:relative;margin-bottom:var(--space-3)}.code-label{font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--space-2)}.code-block{background:var(--color-code-bg);color:var(--color-code-text);padding:var(--space-5);border-radius:var(--radius-md);font-family:var(--font-mono);font-size:.82rem;line-height:1.8;overflow-x:auto;white-space:pre;position:relative}.code-block .comment{color:var(--color-code-comment);font-style:italic}.code-buttons{display:flex;gap:var(--space-2);margin-top:var(--space-2)}.btn-copy{padding:.3rem .7rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:#fff;color:var(--color-text-secondary);font-size:var(--text-xs);font-family:var(--font-sans);cursor:pointer;transition:all var(--transition-fast)}.btn-copy:hover{background:var(--color-primary-bg);border-color:var(--color-primary-light);color:var(--color-primary)}.btn-copy.copied{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.explanation-section{margin-top:var(--space-6);border-top:1px solid var(--color-border-light);padding-top:var(--space-4)}.explanation-toggle{display:flex;align-items:center;gap:var(--space-2);background:none;border:none;cursor:pointer;font-size:var(--text-sm);font-family:var(--font-sans);font-weight:600;color:var(--color-text-secondary);transition:color var(--transition-fast);padding:0}.explanation-toggle:hover{color:var(--color-primary)}.explanation-toggle .arrow{transition:transform var(--transition-base);font-size:.7rem}.explanation-toggle.open .arrow{transform:rotate(90deg)}.explanation-content{display:none;padding-top:var(--space-4)}.explanation-content.open{display:block}.explanation-content p{margin-bottom:var(--space-3);font-size:var(--text-sm);line-height:1.7;color:var(--color-text-secondary)}.explanation-content code{background:var(--color-code-bg);color:var(--color-primary-light);padding:.12rem .4rem;border-radius:4px;font-family:var(--font-mono);font-size:.82rem}.explanation-content ul{margin-left:1.2rem;margin-bottom:var(--space-3)}.explanation-content li{font-size:var(--text-sm);line-height:1.7;color:var(--color-text-secondary)}.tip-box{margin:var(--space-3) 0;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);font-size:var(--text-sm);line-height:1.6}.tip-sigil{background:#ede9fe;border-left:3px solid var(--color-purple)}.tip-viewer{background:#fef3c7;border-left:3px solid var(--color-warning)}.tip-box strong{display:block;margin-bottom:var(--space-1)}.mobile-tip{display:none;padding:var(--space-3) var(--space-4);background:var(--color-primary-50);border-radius:var(--radius-md);font-size:var(--text-xs);color:var(--color-primary);text-align:center;margin-bottom:var(--space-4);line-height:1.5}.site-footer{border-top:1px solid var(--color-border);background:#fff;padding:var(--space-8) var(--space-6);text-align:center}.footer-inner{max-width:var(--max-width);margin:0 auto}.footer-brand{font-size:var(--text-sm);font-weight:600;color:var(--color-text);margin-bottom:var(--space-2)}.footer-desc{font-size:var(--text-xs);color:var(--color-text-muted)}.footer-cta{margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--color-border-light);font-size:var(--text-sm);color:var(--color-text-secondary)}.footer-cta a{color:var(--color-primary);font-weight:600;margin-left:var(--space-2)}.footer-cta a:hover{color:var(--color-primary-hover);text-decoration:underline}@keyframes cardAppear{0%{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.card-grid>*{animation:cardAppear .4s ease both}.card-grid>*:nth-child(1){animation-delay:0ms}.card-grid>*:nth-child(2){animation-delay:60ms}.card-grid>*:nth-child(3){animation-delay:.12s}.card-grid>*:nth-child(4){animation-delay:.18s}.card-grid>*:nth-child(5){animation-delay:.24s}.card-grid>*:nth-child(6){animation-delay:.3s}.card-grid>*:nth-child(7){animation-delay:.36s}.card-grid>*:nth-child(8){animation-delay:.42s}@keyframes fadeInUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.fade-in-up{animation:fadeInUp .5s ease both}.menu-toggle{display:none;background:none;border:none;color:var(--color-text);font-size:1.4rem;cursor:pointer;padding:var(--space-1)}@media(min-width:1200px){.card-grid{grid-template-columns:repeat(4,1fr)}}@media(min-width:769px)and (max-width:1199px){.card-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:768px){.top-nav{position:fixed;height:auto;max-height:0;overflow:hidden;transition:max-height var(--transition-slow)}.top-nav.open{max-height:300px}.top-nav-inner{flex-direction:column;align-items:flex-start;padding:var(--space-3) var(--space-6);gap:var(--space-2)}.nav-main,.nav-ref{flex-wrap:wrap;gap:var(--space-2)}.main-content{padding-top:var(--header-height)}.menu-toggle{display:block}.header-search-input{width:160px}.header-search-input:focus{width:160px}.detail-panel{padding:var(--space-5)}.detail-layout{grid-template-columns:1fr}.hero{padding:var(--space-10) var(--space-4) var(--space-8)}.hero h1{font-size:var(--text-3xl)}.card-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-3)}.category-grid{grid-template-columns:repeat(3,1fr);gap:var(--space-3)}.hero-stats{gap:var(--space-6);flex-wrap:wrap;justify-content:center}}@media(max-width:480px){.hero{padding:var(--space-10) var(--space-5) var(--space-8)}.hero h1{font-size:1.75rem;line-height:1.3;letter-spacing:-.02em}.hero-desc{font-size:var(--text-base);margin-bottom:var(--space-6)}.hero-desc-sub,.hero-desc br{display:none}.hero-buttons{flex-direction:column;align-items:stretch;gap:var(--space-3)}.btn-primary,.btn-secondary{font-size:var(--text-base);padding:.85rem 1.5rem;justify-content:center;text-align:center}.btn-primary{font-weight:700;box-shadow:var(--shadow-lg)}.hero-stats,.header-search,.header-brand-link{display:none}.card-grid{grid-template-columns:1fr}.category-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-3)}.detail-layout{grid-template-columns:1fr}.detail-panel{padding:var(--space-4)}.detail-title{font-size:var(--text-base)}.preview-toolbar{padding:var(--space-1) var(--space-2)}.preview-tab{font-size:.7rem;padding:.25rem .5rem}.preview-text-input{font-size:var(--text-xs)}.code-block{font-size:.75rem;padding:var(--space-3)}.code-buttons{flex-wrap:wrap}.mobile-tip{display:block}.footer-cta{font-size:var(--text-xs)}.footer-cta a{display:block;margin-left:0;margin-top:var(--space-2)}}