:root{--paper:#faf8f4;--surface-raised:#fff;--surface-tint:#e8edf6;--line:#e3e0d9;--line-strong:#8a8d94;--ink:#17191e;--ink-muted:#5a5e66;--jjok:#1d3b6e;--on-jjok:#fff;--jjok-mul:#2f7fb8;--focus:var(--jjok);--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-10:40px;--space-16:64px;--radius-sm:4px;--radius-md:8px;--radius-lg:16px;--radius-pill:999px;--font-sans:Pretendard, "Pretendard Variable", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;--font-serif:"Gowun Batang", "Nanum Myeongjo", serif;--font-mono:"JetBrains Mono", ui-monospace, Menlo, monospace;--gutter:clamp(16px, 4vw, 40px);--content:1120px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--paper:#111316;--surface-raised:#1a1d21;--surface-tint:#1c2740;--line:#2e3238;--line-strong:#6e737c;--ink:#eceae5;--ink-muted:#a2a6ad;--jjok:#8eb0e8;--on-jjok:#0e1a2e;--jjok-mul:#6fb0e0}}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--paper);color:var(--ink);font-family:var(--font-sans);word-break:keep-all;overflow-wrap:anywhere;margin:0;font-size:16px;line-height:26px}a{color:var(--jjok);text-decoration:none}a:hover{text-underline-offset:3px;text-decoration:underline}:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}h1,h2,h3,p,figure,dl,dd{margin:0}img{max-width:100%}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;overflow:hidden;position:absolute!important}.t-display{letter-spacing:-.02em;font-size:40px;font-weight:700;line-height:48px}.t-h1{letter-spacing:-.01em;font-size:28px;font-weight:700;line-height:36px}.t-h2{font-size:20px;font-weight:600;line-height:28px}.t-body-sm{font-size:14px;line-height:22px}.t-caption{color:var(--ink-muted);font-size:12px;font-weight:600;line-height:18px}.t-muted{color:var(--ink-muted)}.t-name-hero{font-family:var(--font-serif);font-size:56px;font-weight:700;line-height:64px}.t-h3{font-size:18px;font-weight:700;line-height:26px}.t-name{font-family:var(--font-serif);font-size:22px;font-weight:700;line-height:30px}.t-hex-lg{font-family:var(--font-mono);font-size:20px;font-weight:500;line-height:28px}.t-hex{font-family:var(--font-mono);font-size:14px;font-weight:500;line-height:20px}.container{max-width:var(--content);padding-inline:var(--gutter);margin:0 auto}.page{gap:var(--space-10);padding-top:var(--space-6);flex-direction:column;display:flex}.stack{flex-direction:column;display:flex}.stack-2{gap:var(--space-2)}.stack-3{gap:var(--space-3)}.stack-4{gap:var(--space-4)}.stack-6{gap:var(--space-6)}.cluster{align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.split{gap:var(--space-6);grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));align-items:start;display:grid}.section-head{justify-content:space-between;align-items:baseline;gap:var(--space-2) var(--space-6);flex-wrap:wrap;display:flex}.prose{max-width:720px}.site-header{border-bottom:1px solid var(--line)}.site-header__inner{justify-content:space-between;align-items:center;gap:var(--space-2) var(--space-6);padding-block:var(--space-3);flex-wrap:wrap;display:flex}.site-header__logo{align-items:center;min-height:44px;display:flex}.site-header__logo img{width:auto;height:32px;display:block}.site-nav{gap:0 var(--space-1);flex-wrap:wrap;font-size:14px;font-weight:600;display:flex}.site-nav a{color:var(--ink);padding:10px 12px}.site-nav a[aria-current=page]{color:var(--jjok);text-underline-offset:3px;text-decoration:underline}.site-footer{border-top:1px solid var(--line);margin-top:96px}.site-footer__inner{justify-content:space-between;align-items:center;gap:var(--space-4);flex-wrap:wrap;padding-block:32px 48px;display:flex}.site-footer__brand{align-items:center;gap:var(--space-3);color:var(--ink-muted);font-size:14px;line-height:22px;display:flex}.site-footer__brand img{width:24px;height:24px}.site-footer nav{gap:0 var(--space-2);flex-wrap:wrap;font-size:14px;display:flex}.site-footer nav a{color:var(--ink-muted);padding:10px 8px}.staging-ribbon{background:var(--surface-tint);color:var(--ink);text-align:center;padding:6px var(--gutter);font-size:12px;font-weight:600;line-height:18px}.btn{height:44px;padding:0 var(--space-4);border-radius:var(--radius-md);border:1px solid var(--line-strong);background:var(--surface-raised);color:var(--ink);font:600 14px/20px var(--font-sans);cursor:pointer;justify-content:center;align-items:center;text-decoration:none;display:inline-flex}.btn:hover{background:var(--surface-tint);text-decoration:none}.btn--primary{background:var(--jjok);border-color:var(--jjok);color:var(--on-jjok)}.btn--primary:hover{background:var(--jjok);filter:brightness(1.12)}.chip{align-items:center;gap:var(--space-2);min-height:36px;padding:0 var(--space-3);border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--surface-raised);color:var(--ink);font:500 14px/20px var(--font-mono);display:inline-flex}.chip:hover{border-color:var(--line-strong);text-decoration:none}.dot{border-radius:var(--radius-pill);flex:none;width:14px;height:14px;box-shadow:inset 0 0 0 1px #00000014}.badge{border-radius:var(--radius-pill);background:var(--surface-tint);height:32px;color:var(--ink);white-space:nowrap;align-items:center;padding:0 14px;font-size:14px;font-weight:600;display:inline-flex}.filter{border-radius:var(--radius-pill);border:1px solid var(--line-strong);background:var(--surface-raised);height:36px;color:var(--ink);font:600 14px/20px var(--font-sans);cursor:pointer;align-items:center;gap:6px;padding:0 14px;display:inline-flex}.filter[aria-pressed=true]{background:var(--jjok);border-color:var(--jjok);color:var(--on-jjok)}.hex-search{gap:var(--space-2);flex-direction:column;display:flex}.hex-search__field{align-items:center;gap:var(--space-3);background:var(--surface-raised);border:1px solid var(--line-strong);border-radius:var(--radius-pill);padding:6px 6px 6px 12px;display:flex}.hex-search__field:focus-within{outline:2px solid var(--focus);outline-offset:2px}.hex-search__swatch{border-radius:var(--radius-pill);border:1px solid var(--line);flex:none;width:32px;height:32px}.hex-search__input{min-width:0;color:var(--ink);background:0 0;border:0;outline:none;flex:120px;padding:8px 0}.hex-search__submit{border-radius:var(--radius-pill);background:var(--jjok);height:44px;color:var(--on-jjok);font:600 16px/20px var(--font-sans);cursor:pointer;border:0;flex:none;padding:0 20px}.hex-search--compact .hex-search__field{gap:var(--space-2);padding:4px 4px 4px 12px}.hex-search--compact .hex-search__swatch{width:20px;height:20px}.hex-search--compact .hex-search__input{font-size:14px;line-height:20px}.hex-search--compact .hex-search__submit{height:36px;padding:0 16px;font-size:14px}.hex-search__error{color:var(--ink);font-size:14px;font-weight:600;line-height:22px}.card{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-6);gap:var(--space-3);flex-direction:column;display:flex}.card--tint{background:var(--surface-tint);border-color:#0000}a.card{color:var(--ink)}a.card:hover{border-color:var(--line-strong);text-decoration:none}.swatch{border-radius:var(--radius-lg);border:1px solid var(--line)}.swatch--hero{height:360px}.color-grid{gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(160px,1fr));display:grid}.color-card{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-lg);color:var(--ink);flex-direction:column;display:flex;overflow:hidden}.color-card:hover{border-color:var(--line-strong);text-decoration:none}.color-card__swatch{height:104px}.color-card__body{padding:var(--space-3) var(--space-4) var(--space-4);flex-direction:column;gap:2px;display:flex}.mini-grid{gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(190px,1fr));display:grid}.mini{align-items:center;gap:var(--space-3);background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-md);color:var(--ink);padding:10px;display:flex}.mini:hover{border-color:var(--line-strong);text-decoration:none}.mini__swatch{border-radius:var(--radius-md);flex:none;width:44px;height:44px;box-shadow:inset 0 0 0 1px #00000014}.mini__name{font-family:var(--font-serif);font-size:18px;font-weight:700;line-height:24px}.mini__hex{font-family:var(--font-mono);color:var(--ink-muted);font-size:12px;line-height:18px}.pair{gap:var(--space-3);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.pair .swatch{height:200px}.values{border-collapse:collapse;width:100%;font-size:14px;line-height:20px}.values th,.values td{text-align:left;border-bottom:1px solid var(--line);padding:10px 12px}.values th:first-child,.values td:first-child{padding-left:0}.values tr:last-child th,.values tr:last-child td{border-bottom:0}.values thead th{color:var(--ink-muted);font-weight:600}.values td{font-family:var(--font-mono)}.contrast{gap:var(--space-3);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.contrast__sample{border-radius:var(--radius-md);justify-content:center;align-items:center;height:72px;font-size:22px;font-weight:700;display:flex}.defs{grid-template-columns:auto 1fr;gap:10px 16px;font-size:14px;line-height:22px;display:grid}.defs dt{color:var(--ink-muted);font-weight:600}.breadcrumb{color:var(--ink-muted);flex-wrap:wrap;gap:6px;font-size:14px;line-height:22px;display:flex}.breadcrumb a{color:var(--ink-muted)}.breadcrumb [aria-current]{color:var(--ink)}.ad-slot{border:1px dashed var(--line-strong);border-radius:var(--radius-md);justify-content:center;align-items:center;height:120px;display:flex}.tabs{gap:var(--space-1);border-bottom:1px solid var(--line);flex-wrap:wrap;display:flex}.tabs a{color:var(--ink-muted);padding:12px 16px;font-weight:600}.tabs a[aria-current=page]{color:var(--ink);border-bottom:2px solid var(--jjok);margin-bottom:-1px;text-decoration:none}@media (max-width:480px){.t-display{font-size:34px;line-height:42px}.t-name-hero{font-size:44px;line-height:52px}.pair .swatch{height:140px}.swatch--hero{height:180px}}.dropzone{justify-content:center;align-items:center;gap:var(--space-3);min-height:280px;padding:var(--space-10) var(--space-6);text-align:center;border:2px dashed var(--line-strong);border-radius:var(--radius-lg);background:var(--surface-raised);flex-direction:column;display:flex}.dropzone--over{border-color:var(--jjok);background:var(--surface-tint)}.photo{align-self:flex-start;max-width:100%;line-height:0;display:inline-block;position:relative}.photo img{border-radius:var(--radius-lg);width:auto;max-width:100%;height:auto;max-height:560px;display:block}.photo__dot{border-radius:var(--radius-pill);width:26px;height:26px;font:700 12px/1 var(--font-sans);border:2px solid #fff;justify-content:center;align-items:center;transition:transform .12s;display:flex;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #00000073,0 2px 6px #00000040}.photo__dot--active{z-index:1;transform:translate(-50%,-50%)scale(1.35)}.palette-list{gap:var(--space-2);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.palette-row{align-items:center;gap:var(--space-3);background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-md);padding:10px 12px 10px 8px;display:flex}.palette-row:hover{border-color:var(--line-strong)}.palette-row__num{text-align:center;flex:none;width:16px}.palette-row__body{flex-direction:column;flex:1;min-width:0;display:flex}.palette-row__name{color:var(--ink)}.palette-row__meta{text-align:right;flex-direction:column;flex:none;align-items:flex-end;display:flex}.btn:disabled{opacity:.6;cursor:progress}@media (prefers-reduced-motion:reduce){.photo__dot{transition:none}}.article{gap:var(--space-4);flex-direction:column;display:flex}.article h2{margin:var(--space-6) 0 0;font-size:24px;font-weight:700;line-height:32px}.article p,.article ul,.article ol,.article dl{margin:0}.article ul,.article ol{gap:var(--space-2);flex-direction:column;padding-left:22px;display:flex}.article ul.mini-grid{padding:0;list-style:none;display:grid}.article .ad-slot{margin-block:var(--space-4)}.answer p{font-size:17px;line-height:28px}.timeline{border-left:2px solid var(--line);list-style:none;padding:0!important}.timeline li{padding:0 0 var(--space-3) var(--space-4);flex-direction:column;gap:2px;display:flex;position:relative}.timeline li:before{content:"";border-radius:var(--radius-pill);background:var(--jjok);width:12px;height:12px;position:absolute;top:6px;left:-7px}.faq{gap:var(--space-4);flex-direction:column;display:flex}.faq dt{font-weight:700}.faq dd{color:var(--ink-muted);margin:4px 0 0}.guide-list{gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));display:grid}.inline-color{white-space:nowrap;align-items:center;gap:6px;font-weight:600;display:inline-flex}.inline-color .dot{align-self:center}.hex-anatomy{gap:var(--space-3);padding:var(--space-6);background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-lg);flex-direction:column;margin:0;display:flex}.hex-anatomy__head{align-items:center;gap:var(--space-3);display:flex}.hex-anatomy__swatch{border-radius:var(--radius-md);width:44px;height:44px;box-shadow:inset 0 0 0 1px #00000014}.hex-anatomy__parts{gap:var(--space-3);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.hex-anatomy__part{flex-direction:column;gap:4px;display:flex}.hex-anatomy__bar{border-radius:var(--radius-pill);background:var(--surface-tint);height:8px;overflow:hidden}.hex-anatomy__bar span{height:100%;display:block}.pal-grid{gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));display:grid}.pal-card{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-lg);color:var(--ink);flex-direction:column;display:flex;overflow:hidden}.pal-card:hover{border-color:var(--line-strong);text-decoration:none}.pal-strip{height:132px;display:flex}.pal-strip>span{flex:1}.pal-card--large .pal-strip{height:220px}.pal-card__body{padding:var(--space-3) var(--space-4) var(--space-4);flex-direction:column;gap:4px;display:flex}.pal-hero{border-radius:var(--radius-lg);border:1px solid var(--line);height:320px;display:flex;overflow:hidden}.pal-hero>span{padding:var(--space-4);flex-direction:column;flex:1;justify-content:flex-end;gap:2px;min-width:0;display:flex}.pal-hero__name{font-family:var(--font-serif);font-size:20px;font-weight:700;line-height:28px}.pal-hero__hex{font-family:var(--font-mono);opacity:.85;font-size:13px;line-height:18px}.pal-pager{justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;display:flex}@media (max-width:640px){.pal-hero{flex-direction:column;height:auto}.pal-hero>span{flex-direction:row;justify-content:space-between;align-items:flex-end;min-height:72px}}.res-grid{gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));margin:0;padding:0;list-style:none;display:grid}.res-grid>li{display:flex}.res-card{color:var(--ink);gap:var(--space-2);flex:1}.res-card:hover{border-color:var(--line-strong);text-decoration:none}.res-card__head{align-items:center;gap:var(--space-2);display:flex}.res-card__head>:last-child{margin-left:auto}.transfer-list{gap:var(--space-3);flex-direction:column;display:flex}.defs dd{margin:0}.answer ul{flex-direction:column;gap:6px;margin:0;padding-left:20px;display:flex}.site-header{position:relative}.menu-button{border-radius:var(--radius-md);width:44px;height:44px;color:var(--ink);cursor:pointer;background:0 0;border:0;justify-content:center;align-items:center;margin-right:-10px;display:none}.menu-button:hover{background:var(--surface-tint)}.mobile-menu{display:none}@media (max-width:760px){.site-header__inner{flex-wrap:nowrap}.site-nav{display:none}.menu-button{display:inline-flex}.mobile-menu:not([hidden]){z-index:20;background:var(--paper);border-bottom:1px solid var(--line);display:block;position:absolute;top:100%;left:0;right:0;box-shadow:0 12px 24px #00000014}.mobile-menu ul{padding:var(--space-2) var(--gutter) var(--space-4);margin:0;list-style:none}.mobile-menu a{min-height:52px;color:var(--ink);border-bottom:1px solid var(--line);align-items:center;font-size:17px;font-weight:600;display:flex}.mobile-menu li:last-child a{border-bottom:0}.mobile-menu a:hover{color:var(--jjok);text-decoration:none}.mobile-menu a[aria-current=page]{color:var(--jjok)}}