.compare-page{background-color:#000;min-height:100vh;position:relative;color:#f5f5f7;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}.hero-container{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:1;overflow:hidden}.hero-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;filter:brightness(.6)}.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.2) 0,rgba(0,0,0,.5) 70%,rgba(0,0,0,.8))}.hero-text{position:absolute;bottom:25%;left:0;right:0;padding:0 2rem;color:white;text-align:center;z-index:2}.hero-eyebrow{font-size:.875rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:1rem;opacity:.9;color:#ff6b6b}.hero-title{font-size:3.5rem;font-weight:800;line-height:1.1;margin-bottom:.5rem;letter-spacing:-.03em}.hero-subtitle{font-size:1.25rem;font-weight:400;opacity:.9;margin-bottom:1.5rem;max-width:600px;margin-left:auto;margin-right:auto}.scroll-indicator{position:absolute;bottom:8rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.5rem;color:white;opacity:.6;z-index:2}.scroll-text{font-size:.75rem;text-transform:uppercase;letter-spacing:.15em;margin:0}.mouse-scroll-icon{width:24px;height:40px;display:flex;align-items:center;justify-content:center}.mouse-icon{width:100%;height:100%;color:white}.scroll-wheel{animation:scrollWheel 2s infinite}@keyframes scrollWheel{0%,to{cy:12;opacity:1}50%{cy:20;opacity:.3}}.content-layer{position:relative;z-index:10;margin-top:100vh;background-color:#f5f5f7;border-radius:2rem 2rem 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.2);color:#1d1d1f;padding-bottom:4rem}.section{padding:5rem 2rem}.section-white{background-color:white}.section-gray{background-color:#f5f5f7}.container{max-width:64rem;margin:0 auto}.section-header{text-align:center;margin-bottom:3rem}.section-eyebrow{font-size:.875rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem;display:block}.eyebrow-cafe{color:#ff6b6b}.eyebrow-tips{color:#00b894}.eyebrow-compare{color:#6c5ce7}.section-title{font-size:2.25rem;font-weight:700;color:inherit;margin-bottom:1rem;letter-spacing:-.02em}.section-desc{font-size:1.125rem;color:#6b7280;max-width:40rem;margin:0 auto}.grid-2{grid-template-columns:repeat(2,1fr);grid-gap:1.5rem}.grid-2,.grid-3{display:grid;gap:1.5rem}.grid-3{grid-template-columns:repeat(3,1fr);grid-gap:1.5rem}.cafe-card{background-color:white;border-radius:1.5rem;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.05);transition:transform .3s ease;display:flex;flex-direction:column;height:100%}.cafe-card:hover{transform:translateY(-5px);box-shadow:0 12px 30px rgba(0,0,0,.1)}.cafe-image-wrapper{height:180px;width:100%;overflow:hidden;position:relative;background:#f3f4f6}.cafe-image{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.cafe-card:hover .cafe-image{transform:scale(1.05)}.cafe-brand-bar{position:absolute;bottom:0;left:0;right:0;height:4px}.cafe-content{padding:1.5rem;flex:1 1;display:flex;flex-direction:column}.cafe-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}.cafe-badge{display:inline-block;font-size:.6875rem;font-weight:700;letter-spacing:.03em;padding:.25rem .5rem;border-radius:.375rem;text-transform:uppercase}.badge-hot{background:#ff6b6b;color:white}.badge-value{background:#fdd000;color:#1d1d1f}.badge-paik{background:#00498c;color:white}.badge-dessert{background:#cb2331;color:white}.badge-classic{background:#2d3278;color:white}.badge-night{background:#ba0c2f;color:white}.cafe-name{font-size:.75rem;color:#86868b;font-weight:500}.cafe-title{font-size:1.25rem;font-weight:700;margin-bottom:.25rem;color:#1d1d1f}.cafe-korean{font-size:.875rem;color:#86868b;margin-bottom:.75rem}.cafe-desc{font-size:.9375rem;color:#4b5563;line-height:1.6;margin-bottom:1rem;flex:1 1}.cafe-highlight{display:flex;align-items:center;gap:.5rem;background:#f5f5f7;border-radius:.75rem;padding:.75rem 1rem;font-size:.875rem;color:#424245;font-weight:500}.highlight-icon{flex-shrink:0}.tip-card{background-color:#fff;border-radius:1.5rem;padding:2rem;border:1px solid #e5e5e5;transition:all .3s ease}.tip-card:hover{border-color:#00b894;background-color:#f0fdf4}.tip-number{font-size:2rem;font-weight:800;background:linear-gradient(135deg,#00b894,#00cec9);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:.75rem}.tip-title{font-size:1.25rem;font-weight:700;margin-bottom:.5rem;color:#1d1d1f}.tip-desc{font-size:.9375rem;color:#4b5563;line-height:1.6}.compare-card{background-color:#fff;border-radius:1.5rem;padding:2rem;border:1px solid #e5e5e5;transition:all .3s ease}.compare-card:hover{border-color:#6c5ce7;background-color:#f8f7ff}.compare-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:#6c5ce7}.compare-answer,.compare-label{font-weight:700;margin-bottom:.5rem}.compare-answer{font-size:1.25rem;color:#1d1d1f}.compare-reason{font-size:.9375rem;color:#6b7280;line-height:1.5}.reveal{opacity:0;transform:translateY(30px);transition:all .8s cubic-bezier(.4,0,.2,1)}.reveal.active{opacity:1;transform:translateY(0)}@media (max-width:1024px){.grid-2,.grid-3{grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){.hero-title{font-size:2.5rem}.grid-2,.grid-3{grid-template-columns:1fr}.section{padding:3rem 1.5rem}.content-layer{border-radius:1.5rem 1.5rem 0 0}.section-title{font-size:1.75rem}.section-desc{font-size:1rem}.cafe-image-wrapper{height:160px}.cafe-content{padding:1.25rem}.cafe-title{font-size:1.125rem}.cafe-desc{font-size:.875rem}}