:root{--color-text:#3d3d3d;--color-text-muted:#6b6b6b;--color-text-heading:#1a1a1a;--color-bg:#fff;--color-bg-muted:#f7f7f5;--color-bg-invert:#1a1a1a;--color-bg-invert-text:#f5f5f3;--color-border:#e8e8e4;--color-accent:#ffd600;--color-accent-dark:#e6c200;--font-sans:"Pretendard", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--space-section-dt:140px;--space-section-mo:72px;--space-inner-dt:80px;--space-inner-mo:40px;--space-gutter-dt:100px;--space-gutter-mo:20px;--max-width:1440px;--header-height:64px;--tab-bar-height:56px;--sticky-cta-height:72px;--radius-sm:6px;--radius-md:12px}.liquid-btn{border-radius:var(--radius-sm);width:100%;min-height:52px;font-family:var(--font-sans);letter-spacing:.02em;color:#1a1a1a;cursor:pointer;background:linear-gradient(145deg, #ffe566 0%, var(--color-accent) 45%, #f5c400 100%);border:none;justify-content:center;align-items:center;padding:14px 24px;font-size:.95rem;font-weight:600;transition:transform .15s,box-shadow .15s;display:inline-flex;position:relative;overflow:hidden;box-shadow:0 2px 8px #ffd60059,inset 0 1px #fff9,inset 0 -2px 4px #0000000f}.liquid-btn:before{content:"";background:linear-gradient(90deg,#0000,#ffffff73,#0000);width:60%;height:100%;transition:left .5s;position:absolute;top:0;left:-100%;transform:skew(-20deg)}.liquid-btn:hover:not(:disabled):before{left:120%}.liquid-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 14px #ffd60073,inset 0 1px #ffffffb3}.liquid-btn:active:not(:disabled){transform:translateY(0)}.liquid-btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none;color:#666;background:#e0e0e0}.liquid-btn--compact{width:auto;min-height:44px;padding:10px 20px;font-size:.875rem}.btn-outline{border:1.5px solid var(--color-border);border-radius:var(--radius-sm);width:100%;min-height:52px;font-family:var(--font-sans);color:var(--color-text-heading);background:var(--color-bg);cursor:pointer;justify-content:center;align-items:center;padding:14px 24px;font-size:.95rem;font-weight:500;transition:border-color .15s,background .15s;display:inline-flex}.btn-outline:hover{background:var(--color-bg-muted);border-color:#ccc}*,:before,:after{box-sizing:border-box}body{font-family:var(--font-sans);color:var(--color-text);background:var(--color-bg);margin:0;font-size:16px;line-height:1.6}#app{min-height:100vh}.pdp{padding-bottom:var(--sticky-cta-height)}.pdp-container{width:100%;max-width:var(--max-width);padding-left:var(--space-gutter-mo);padding-right:var(--space-gutter-mo);margin:0 auto}@media (width>=1024px){.pdp-container{padding-left:var(--space-gutter-dt);padding-right:var(--space-gutter-dt)}}.pdp-section{padding-top:var(--space-section-mo);padding-bottom:var(--space-section-mo);scroll-margin-top:calc(var(--header-height) + var(--tab-bar-height))}@media (width>=1024px){.pdp-section{padding-top:var(--space-section-dt);padding-bottom:var(--space-section-dt);scroll-margin-top:calc(var(--header-height) + var(--tab-bar-height) + 8px)}}.section-label{letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted);margin:0 0 12px;font-size:.75rem;font-weight:600;display:block}.section-headline{letter-spacing:-.02em;color:var(--color-text-heading);white-space:pre-line;margin:0 0 20px;font-size:clamp(1.75rem,5vw,2.5rem);font-weight:600;line-height:1.2}.section-intro{max-width:640px;color:var(--color-text-muted);margin:0 0 32px}.img-placeholder{color:#999;background:#e8e8e4;justify-content:center;align-items:center;font-size:.875rem;font-weight:500;display:flex}.img-placeholder:after{content:"Image"}.chip{border:1px solid var(--color-border);letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-heading);border-radius:4px;padding:6px 12px;font-size:.7rem;font-weight:600;display:inline-flex}.link-anchor{font:inherit;color:inherit;text-underline-offset:3px;cursor:pointer;background:0 0;border:none;padding:0;text-decoration:underline}.link-anchor:hover{color:var(--color-text-heading)}.grid-2{gap:32px;display:grid}@media (width>=1024px){.grid-2{grid-template-columns:1fr 1fr;align-items:start;gap:48px}.grid-2--40-60{grid-template-columns:2fr 3fr}}.grid-3{gap:20px;display:grid}@media (width>=768px){.grid-3{grid-template-columns:repeat(3,1fr)}}.grid-4{gap:20px;display:grid}@media (width>=768px){.grid-4{grid-template-columns:repeat(2,1fr)}}@media (width>=1024px){.grid-4{grid-template-columns:repeat(4,1fr)}}
