@import "https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap";
:root{--ink:#16221d;--paper:#f6f3ec;--paper-pure:#fff;--hanji:#efe9dc;--hanji-deep:#e2dac9;--noerok:#5e7355;--noerok-deep:#3d4f39;--cheong:#2c5f8a;--jusa:#c0362c;--stone:#6f6a5e;--hairline:#16221d24;--hairline-light:#f6f3ec2e;--ob-cheong:#0b6e99;--ob-jeok:#c0392b;--ob-hwang:#e1b12c;--ob-baek:#f4f1ea;--ob-heuk:#1a1a1a;--serif:"Playfair Display", "Iowan Old Style", Garamond, Georgia, serif;--sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;--mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;--grid-margin:25px;--grid-gutter:10px;--container:calc(100vw - 2 * var(--grid-margin));--section-pad:5rem;--font-size:15px}@media (min-width:700px){:root{--grid-margin:4vw;--grid-gutter:2vw;--section-pad:11rem;--font-size:16px}}@media (min-width:1000px){:root{--grid-margin:3vw}}@media (min-width:2000px){:root{--font-size:18px}}*,:before,:after{box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{margin:0;padding:0}html{font-size:var(--font-size);line-height:1.6;font-family:var(--sans);color:var(--ink);scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{background:var(--paper);overflow-x:hidden}::selection{background:var(--noerok);color:var(--paper)}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}h1,h2,h3,h4,h5,h6{font-size:1rem;font-weight:400;line-height:1.05}ul{list-style:none}.container{padding-left:var(--grid-margin);padding-right:var(--grid-margin);margin:0 auto}.grid{gap:var(--grid-gutter);grid-template-columns:repeat(4,1fr);display:grid}@media (min-width:700px){.grid{grid-template-columns:repeat(8,1fr)}}.section{padding-top:var(--section-pad);padding-bottom:var(--section-pad);position:relative}.section--dark{background:var(--ink);color:var(--paper)}.section--hanji{background:var(--hanji);color:var(--ink)}.section--paper{background:var(--paper);color:var(--ink)}.section--noerok{background:var(--noerok-deep);color:var(--paper)}.backdrop{z-index:0;pointer-events:none;background:var(--ink);position:fixed;inset:0}.backdrop:before{content:"";opacity:.85;filter:saturate(1.05)contrast(1.02);background:url(/img/dancheong.jpg) 50%/cover no-repeat;position:absolute;inset:0;-webkit-mask-image:linear-gradient(100deg,#0000 0% 30%,#0000008c 58%,#000000e6 100%);mask-image:linear-gradient(100deg,#0000 0% 30%,#0000008c 58%,#000000e6 100%)}.backdrop:after{content:"";background:linear-gradient(90deg,#16221df7 0%,#16221dd1 36%,#16221d57 70%,#16221d80 100%),radial-gradient(1100px 760px at 82% -8%,#5e735557,#0000 60%),radial-gradient(820px 640px at 4% 110%,#0b6e9942,#0000 62%);position:absolute;inset:0}@media (max-width:760px){.backdrop:before{opacity:.6;-webkit-mask-image:linear-gradient(#0000 0%,#00000080 42%,#000000e6 100%);mask-image:linear-gradient(#0000 0%,#00000080 42%,#000000e6 100%)}.backdrop:after{background:linear-gradient(#16221deb 0%,#16221db3 45%,#16221ddb 100%),radial-gradient(700px 500px at 80% 100%,#5e73554d,#0000 60%)}}.serif{font-family:var(--serif)}.mono{font-family:var(--mono)}.eyebrow{font-family:var(--mono);letter-spacing:.18em;text-transform:uppercase;font-size:.72rem;font-weight:500}.display{font-family:var(--serif);letter-spacing:-.015em;font-size:clamp(2.75rem,9vw,8.5rem);font-weight:400;line-height:1}.h2{font-family:var(--serif);letter-spacing:-.01em;font-size:clamp(1.75rem,4.5vw,3.75rem);font-weight:400;line-height:1.08}.h3{font-family:var(--serif);font-size:clamp(1.4rem,2.8vw,2.4rem);font-weight:500;line-height:1.12}.lead{font-size:clamp(1.05rem,1.6vw,1.5rem);font-weight:300;line-height:1.5}.body-text{color:var(--stone);font-size:1rem;line-height:1.7}.section--dark .body-text,.section--noerok .body-text{color:#f6f3eca8}.reveal{opacity:0;will-change:opacity, transform;transition:opacity .9s cubic-bezier(.19,1,.22,1),transform .9s cubic-bezier(.19,1,.22,1);transform:translateY(28px)}.reveal.is-inview{opacity:1;transform:translateY(0)}@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transition:none;transform:none}html{scroll-behavior:auto}}.btn{font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;border:1px solid;border-radius:100px;align-items:center;gap:.7em;padding:1.1em 1.6em;font-size:.78rem;transition:background .4s,color .4s;display:inline-flex}.btn:hover{background:var(--ink);color:var(--paper)}.section--dark .btn:hover,.section--noerok .btn:hover{background:var(--paper);color:var(--ink)}.btn__bullet{background:currentColor;border-radius:50%;width:6px;height:6px}.obangsaek-strip{border-radius:6px;gap:0;display:flex;overflow:hidden;box-shadow:0 18px 50px #00000059}.obangsaek-swatch{aspect-ratio:3/4;flex:1;align-items:flex-end;padding:.7rem .6rem;transition:flex .4s cubic-bezier(.2,.8,.2,1);display:flex;position:relative}.obangsaek-swatch:hover{flex:1.7}.obangsaek-swatch .hanja{font-family:var(--serif);mix-blend-mode:difference;color:#fff;opacity:.92;font-size:1.5rem;line-height:1}.obangsaek-swatch .meta{font-family:var(--mono);letter-spacing:.08em;color:#fff;mix-blend-mode:difference;opacity:0;font-size:.56rem;transition:opacity .3s;position:absolute;top:.65rem;left:.6rem}.obangsaek-swatch:hover .meta{opacity:.95}.status-pill{font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--hairline);border-radius:999px;align-items:center;gap:.6rem;padding:.65rem 1.1rem;font-size:.74rem;display:inline-flex}.section--dark .status-pill,.section--noerok .status-pill{border-color:var(--hairline-light);color:var(--paper)}.status-dot{background:var(--noerok);border-radius:50%;width:7px;height:7px;animation:2.4s infinite pulse;box-shadow:0 0 #8caa7d8c}.section--dark .status-dot,.section--noerok .status-dot{background:#cdd9c4}@keyframes pulse{0%{box-shadow:0 0 #8caa7d8c}70%{box-shadow:0 0 0 9px #8caa7d00}to{box-shadow:0 0 #8caa7d00}}.color-card{transition:transform .4s cubic-bezier(.19,1,.22,1);display:block}.color-card:hover{transform:translateY(-4px)}.color-card__swatch{aspect-ratio:3/2;border:1px solid var(--hairline);border-radius:4px;position:relative;overflow:hidden}.color-card__swatch:after{content:"";pointer-events:none;background:linear-gradient(#0000 60%,#00000008 100%);position:absolute;inset:0}@media (max-width:680px){.site-brand__name{font-size:1rem}.site-nav{gap:1.1rem}}@media (max-width:460px){.site-brand__name{display:none}.site-nav{gap:.9rem}}
