@import "https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700;800&display=swap";
:root{--color-primary:#0ea5e9;--color-primary-light:#38bdf8;--color-primary-dark:#0284c7;--color-accent:#f97316;--color-accent-light:#fb923c;--color-mint:#a7f3d0;--color-mint-dark:#6ee7b7;--color-ice:#e0f2fe;--color-bg:#fafbfc;--color-bg-secondary:#f0f9ff;--color-bg-card:#fff;--color-bg-warm:#fff7ed;--color-text:#0f172a;--color-text-secondary:#475569;--color-text-muted:#94a3b8;--color-border:#e2e8f0;--color-border-light:#f1f5f9;--color-success:#10b981;--color-warning:#f59e0b;--color-danger:#ef4444;--gradient-hero:linear-gradient(135deg,#0ea5e9 0%,#6366f1 40%,#a855f7 100%);--gradient-frost:linear-gradient(135deg,#e0f2fe 0%,#f0fdf4 50%,#fef3c7 100%);--gradient-card-hover:linear-gradient(135deg,#f0f9ff 0%,#faf5ff 100%);--gradient-badge-hot:linear-gradient(135deg,#f97316,#ef4444);--gradient-badge-pick:linear-gradient(135deg,#6366f1,#8b5cf6);--gradient-badge-new:linear-gradient(135deg,#10b981,#06b6d4);--max-width:820px;--content-padding:1.5rem;--font-sans:"Noto Sans KR",-apple-system,BlinkMacSystemFont,sans-serif;--shadow-sm:0 1px 3px #0000000a;--shadow-md:0 4px 16px #0000000f;--shadow-lg:0 12px 40px #00000014;--shadow-card:0 2px 12px #0ea5e90f;--shadow-card-hover:0 12px 32px #0ea5e91f;--shadow-glow:0 0 30px #0ea5e926;--radius-sm:.75rem;--radius-md:1rem;--radius-lg:1.25rem;--radius-xl:1.75rem;--radius-2xl:2rem;--transition-fast:.2s cubic-bezier(.4,0,.2,1);--transition-base:.3s cubic-bezier(.4,0,.2,1);--transition-bounce:.5s cubic-bezier(.34,1.56,.64,1)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}body{font-family:var(--font-sans);background:var(--color-bg);color:var(--color-text);min-height:100vh;line-height:1.8}a{color:var(--color-primary);transition:color var(--transition-fast);text-decoration:none}a:hover{color:var(--color-primary-dark)}img{max-width:100%;height:auto;display:block}.site-header{z-index:100;-webkit-backdrop-filter:blur(20px)saturate(180%);background:#ffffffbf;border-bottom:1px solid #e2e8f080;position:sticky;top:0}.header-inner{max-width:var(--max-width);padding:.75rem var(--content-padding);justify-content:space-between;align-items:center;margin:0 auto;display:flex}.site-logo{background:var(--gradient-hero);-webkit-text-fill-color:transparent;letter-spacing:-.02em;-webkit-background-clip:text;background-clip:text;align-items:center;gap:.5rem;font-size:1.3rem;font-weight:800;display:flex}.site-logo .logo-emoji{-webkit-text-fill-color:initial;font-size:1.6rem}.nav-links{gap:.25rem;list-style:none;display:flex}.nav-links a{color:var(--color-text-secondary);border-radius:var(--radius-sm);transition:all var(--transition-fast);padding:.5rem .875rem;font-size:.875rem;font-weight:500}.nav-links a:hover{color:var(--color-primary);background:var(--color-bg-secondary)}.hero{text-align:center;justify-content:center;align-items:center;min-height:420px;display:flex;position:relative;overflow:hidden}.hero-bg{z-index:0;position:absolute;inset:0}.hero-bg img{object-fit:cover;width:100%;height:100%}.hero-overlay{z-index:1;background:linear-gradient(#0f172a59 0%,#0f172ab3 100%);position:absolute;inset:0}.hero-content{z-index:2;color:#fff;padding:3rem var(--content-padding);position:relative}.hero h1{text-shadow:0 2px 20px #0000004d;letter-spacing:-.03em;margin-bottom:1rem;font-size:2.5rem;font-weight:800;line-height:1.25}.hero-subtitle{opacity:.9;max-width:520px;margin:0 auto 1.5rem;font-size:1.1rem;line-height:1.6}.hero-tag{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffff26;border:1px solid #fff3;border-radius:9999px;align-items:center;gap:.375rem;padding:.5rem 1.25rem;font-size:.8125rem;font-weight:500;display:inline-flex}.page-container{max-width:var(--max-width);padding:2.5rem var(--content-padding)5rem;margin:0 auto}.section-title{letter-spacing:-.02em;align-items:center;gap:.625rem;margin-bottom:1.75rem;font-size:1.375rem;font-weight:700;display:flex}.section-title:after{content:"";background:linear-gradient(90deg,var(--color-border),transparent);flex:1;height:2px;margin-left:.5rem}.card-grid{gap:1.25rem;display:grid}@media (min-width:540px){.card-grid{grid-template-columns:repeat(2,1fr)}}.card{background:var(--color-bg-card);border:1px solid var(--color-border-light);border-radius:var(--radius-xl);transition:all var(--transition-base);box-shadow:var(--shadow-card);cursor:pointer;overflow:hidden}.card:hover{box-shadow:var(--shadow-card-hover);border-color:var(--color-primary-light);transform:translateY(-4px)}.card-image{aspect-ratio:16/10;background:var(--gradient-frost);width:100%;position:relative;overflow:hidden}.card-image img{object-fit:cover;width:100%;height:100%;transition:transform var(--transition-base)}.card:hover .card-image img{transform:scale(1.05)}.card-badge{z-index:2;position:absolute;top:.75rem;left:.75rem}.card-body{padding:1.25rem}.card-body h3{letter-spacing:-.01em;margin-bottom:.375rem;font-size:1.0625rem;font-weight:700;line-height:1.4}.card-body p{color:var(--color-text-secondary);margin-bottom:.625rem;font-size:.8125rem;line-height:1.5}.card-meta{color:var(--color-text-muted);align-items:center;gap:.75rem;font-size:.6875rem;display:flex}.badge{letter-spacing:.02em;color:#fff;text-shadow:0 1px 2px #0000001a;border-radius:9999px;align-items:center;padding:.3rem .75rem;font-size:.6875rem;font-weight:700;display:inline-flex}.badge-hot{background:var(--gradient-badge-hot)}.badge-pick{background:var(--gradient-badge-pick)}.badge-new{background:var(--gradient-badge-new)}.badge-brand{background:linear-gradient(135deg,#f59e0b,#d97706)}.badge-review{background:linear-gradient(135deg,#ec4899,#db2777)}.badge-compare{background:linear-gradient(135deg,#14b8a6,#0d9488)}.badge-buy{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}.article-header{margin-bottom:2rem}.article-header h1{letter-spacing:-.03em;margin-bottom:1rem;font-size:2rem;font-weight:800;line-height:1.3}.article-meta{color:var(--color-text-muted);border-bottom:1px solid var(--color-border-light);align-items:center;gap:1rem;padding-bottom:1.5rem;font-size:.8125rem;display:flex}.article-hero-image{border-radius:0;width:calc(100% + 3rem);margin:0 -1.5rem 2rem;overflow:hidden}@media (min-width:540px){.article-hero-image{border-radius:var(--radius-xl);width:100%;margin:0 0 2rem}}.article-hero-image img{width:100%;height:auto;display:block}.article-content{font-size:1rem;line-height:1.9}.article-content h2{border-left:4px solid var(--color-primary);letter-spacing:-.02em;margin:3rem 0 1.25rem;padding-left:.875rem;font-size:1.5rem;font-weight:700}.article-content h3{margin:2rem 0 1rem;font-size:1.25rem;font-weight:600}.article-content p{margin-bottom:1.25rem}.article-content ul,.article-content ol{margin-bottom:1.25rem;padding-left:1.5rem}.article-content li{margin-bottom:.5rem}.article-content blockquote{background:var(--color-bg-secondary);border-left:4px solid var(--color-primary);border-radius:0 var(--radius-md)var(--radius-md)0;color:var(--color-text-secondary);margin:1.5rem 0;padding:1.25rem 1.5rem;font-size:.9375rem}.article-content .inline-image{border-radius:var(--radius-lg);width:100%;box-shadow:var(--shadow-md);margin:2rem 0;overflow:hidden}.article-content .inline-image img{width:100%;height:auto}.article-content .image-caption{text-align:center;color:var(--color-text-muted);margin-top:.5rem;font-size:.75rem;font-style:italic}.tip-box{border-radius:0 var(--radius-md)var(--radius-md)0;color:#065f46;background:linear-gradient(135deg,#ecfdf5 0%,#f0fdf4 100%);border:1px solid #a7f3d0;border-left:4px solid #10b981;margin:1.5rem 0;padding:1.25rem 1.5rem;font-size:.9375rem;line-height:1.7}.tip-box strong{color:#047857}.warning-box{border-radius:0 var(--radius-md)var(--radius-md)0;color:#78350f;background:linear-gradient(135deg,#fffbeb 0%,#fef3c7 100%);border:1px solid #fcd34d;border-left:4px solid #f59e0b;margin:1.5rem 0;padding:1.25rem 1.5rem;font-size:.9375rem;line-height:1.7}.warning-box strong{color:#92400e}.breadcrumbs{color:var(--color-text-muted);flex-wrap:wrap;align-items:center;gap:.375rem;padding:1rem 0;font-size:.8125rem;display:flex}.breadcrumbs a{color:var(--color-text-secondary);font-weight:500}.breadcrumbs a:hover{color:var(--color-primary)}.comparison-table-wrapper{border-radius:var(--radius-lg);border:1px solid var(--color-border);box-shadow:var(--shadow-md);margin:2rem 0;overflow-x:auto}.comparison-table{border-collapse:collapse;width:100%;font-size:.875rem}.comparison-table thead{color:#fff;background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%)}.comparison-table th{text-align:left;white-space:nowrap;padding:1rem;font-size:.8125rem;font-weight:600}.comparison-table td{border-bottom:1px solid var(--color-border-light);vertical-align:middle;padding:1rem}.comparison-table tbody tr{transition:background var(--transition-fast)}.comparison-table tbody tr:hover{background:var(--color-bg-secondary)}.comparison-table .rank-1{background:linear-gradient(90deg,#fef3c7 0%,#fef3c700 80%)}.comparison-table .rank-2{background:linear-gradient(90deg,#f1f5f9 0%,#0000 80%)}.comparison-table .rank-3{background:linear-gradient(90deg,#fff7ed 0%,#0000 80%)}.star-rating{color:#f59e0b;letter-spacing:-1px;font-size:.9375rem}.toc{border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);background:#fff;margin:2rem 0;padding:1.5rem 1.75rem}.toc h3{border-bottom:2px solid var(--gradient-frost);align-items:center;gap:.5rem;margin-bottom:1rem;padding-bottom:.75rem;font-size:.9375rem;font-weight:700;display:flex}.toc ol{counter-reset:toc;padding:0;list-style:none}.toc li{counter-increment:toc;margin-bottom:.5rem}.toc li:before{content:counter(toc)".";color:var(--color-primary);margin-right:.5rem;font-size:.8125rem;font-weight:700}.toc a{color:var(--color-text-secondary);font-size:.875rem;font-weight:500}.toc a:hover{color:var(--color-primary)}.faq-section{margin:2.5rem 0}.faq-item{border:1px solid var(--color-border-light);border-radius:var(--radius-md);transition:all var(--transition-fast);background:#fff;margin-bottom:.625rem;overflow:hidden}.faq-item:hover{border-color:var(--color-primary-light);box-shadow:var(--shadow-sm)}.faq-item summary{cursor:pointer;align-items:center;gap:.75rem;padding:1rem 1.25rem;font-size:.9375rem;font-weight:600;list-style:none;display:flex}.faq-item summary:hover{background:var(--color-bg-secondary)}.faq-item summary:before{content:"Q";background:var(--gradient-hero);color:#fff;border-radius:.5rem;flex-shrink:0;justify-content:center;align-items:center;width:1.75rem;height:1.75rem;font-size:.6875rem;font-weight:800;display:inline-flex}.faq-item[open] summary{border-bottom:1px solid var(--color-border-light)}.faq-answer{color:var(--color-text-secondary);padding:1rem 1.25rem 1rem 3.75rem;font-size:.9375rem;line-height:1.7}.author-box{border-radius:var(--radius-xl);border:1px solid var(--color-border);box-shadow:var(--shadow-sm);background:#fff;align-items:center;gap:1rem;margin:2.5rem 0;padding:1.5rem;display:flex}.author-avatar{border-radius:var(--radius-md);background:var(--gradient-hero);flex-shrink:0;justify-content:center;align-items:center;width:60px;height:60px;font-size:1.5rem;display:flex;box-shadow:0 4px 12px #0ea5e940}.author-info h3{margin-bottom:.25rem;font-size:1rem;font-weight:700}.author-info p{color:var(--color-text-secondary);margin:0;font-size:.8125rem;line-height:1.5}.breadcrumb{color:var(--color-text-muted);flex-wrap:wrap;align-items:center;gap:.5rem;padding:1.25rem 0;font-size:.8125rem;display:flex}.breadcrumb a{color:var(--color-text-secondary);font-weight:500}.breadcrumb a:hover{color:var(--color-primary)}.ad-unit{text-align:center;background:var(--color-border-light);border-radius:var(--radius-md);min-height:90px;color:var(--color-text-muted);border:1px dashed var(--color-border);justify-content:center;align-items:center;margin:2rem 0;font-size:.6875rem;display:flex}.related-posts{border-radius:var(--radius-xl);border:1px solid var(--color-border);box-shadow:var(--shadow-sm);background:#fff;margin:3rem 0;padding:2rem}.related-posts h3{margin-bottom:1rem;font-size:1.125rem;font-weight:700}.related-link{border-radius:var(--radius-md);transition:all var(--transition-fast);color:var(--color-text);align-items:center;gap:.75rem;padding:.875rem 1rem;font-size:.9375rem;font-weight:500;display:flex}.related-link:hover{background:var(--color-bg-secondary);color:var(--color-primary);transform:translate(4px)}.cta-section{border:1px solid var(--color-border);border-radius:var(--radius-xl);text-align:center;box-shadow:var(--shadow-sm);background:#fff;padding:2.5rem;position:relative;overflow:hidden}.cta-section:before{content:"";background:var(--gradient-hero);height:4px;position:absolute;top:0;left:0;right:0}.cta-section h2{margin-bottom:.75rem;font-size:1.375rem;font-weight:700}.cta-section p{color:var(--color-text-secondary);max-width:480px;margin:0 auto;font-size:.9375rem}.site-footer{color:#94a3b8;padding:3rem var(--content-padding);text-align:center;background:#0f172a;font-size:.8125rem;line-height:1.8}.site-footer a{color:var(--color-primary-light)}@media (max-width:640px){:root{--content-padding:1rem}.hero{min-height:340px}.hero h1{font-size:1.75rem}.hero-subtitle{font-size:.9375rem}.nav-links{gap:0}.nav-links a{padding:.5rem .625rem;font-size:.8125rem}.article-header h1{font-size:1.625rem}.article-content h2{font-size:1.3rem}.author-box{text-align:center;flex-direction:column}.card-grid{gap:1rem}}