:root{--ink:#171717;--muted:#656565;--line:#e6e6e6;--purple:#7d35b2;--page:#fff;font-family:Arial,'Noto Sans KR','Malgun Gothic',sans-serif;color:var(--ink);background:var(--page);font-synthesis:none;scroll-behavior:smooth;scroll-padding-top:28px}
*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:default}a{color:inherit;text-decoration:none}button{color:inherit}svg.icon{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;vertical-align:middle}.sprite{position:absolute;width:0;height:0;overflow:hidden}::selection{background:#e9d9f5;color:#171717}:focus-visible{outline:3px solid var(--purple);outline-offset:5px}input{caret-color:var(--purple)}button{border-radius:0}.wrap{width:min(1440px,calc(100% - 80px));margin-inline:auto}.site-header{display:flex;align-items:center;justify-content:space-between;padding-block:36px 64px}.wordmark{font-size:36px;font-weight:750;letter-spacing:-.045em;line-height:1}.wordmark span,h1>span,.collection-top h2>span,.guide h2>span{color:var(--purple)}.site-header nav{display:flex;gap:32px;font-size:13px;font-weight:600}.site-header nav a{display:flex;gap:8px;align-items:center}.site-header nav a:hover{color:var(--purple)}.intro{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:38px}h1{font-size:clamp(54px,7.4vw,104px);font-weight:750;letter-spacing:-.04em;line-height:1;margin:0 0 19px}.intro-sub{font-size:18px;letter-spacing:-.035em;margin:0}.intro-copy{font-size:14px;color:var(--muted);line-height:1.85;margin:0 0 1px;flex-shrink:0}.intro-copy strong{color:var(--ink);font-weight:600;white-space:nowrap}.hero-swatches{display:grid;grid-template-columns:6fr 3fr 1fr;min-height:240px;border-radius:16px;overflow:hidden;border:1px solid #0000000a}.hero-swatch{border:0;text-align:left;padding:26px 28px;display:flex;flex-direction:column;justify-content:space-between;min-width:0;position:relative;transition:filter .18s}.hero-swatch:hover{filter:brightness(.97)}.hero-swatch:focus-visible{outline-offset:-5px;outline-color:currentColor}.hero-swatch .ratio{font-size:clamp(42px,5.7vw,80px);font-weight:600;line-height:1;letter-spacing:-.045em;display:block}.hero-swatch .ratio small{font-size:15px;letter-spacing:-.02em;margin-left:4px;font-weight:500}.swatch-meta{display:flex;justify-content:space-between;align-items:end;gap:6px;font-size:11px}.swatch-meta strong{font-size:13px;font-family:Consolas,'Courier New',monospace;font-weight:400}.swatch-meta .role{font-size:11px}.hero-swatch:last-child{padding-inline:17px}.hero-swatch:last-child .swatch-meta{flex-direction:column;align-items:start;gap:8px}.hero-swatch:last-child .ratio{font-size:clamp(27px,3.7vw,50px)}.hero-swatch:last-child .ratio small{font-size:12px}.selected-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 0;border-bottom:1px solid var(--line)}.selected-info{display:flex;gap:14px;align-items:center;min-width:0}.mono{font-family:Consolas,'Courier New',monospace;font-variant-numeric:tabular-nums}.selected-info>.mono{font-size:11px;color:var(--muted)}.selected-info h2{font-size:19px;font-weight:600;letter-spacing:-.03em;margin:0}.theory-label{font-size:11px;color:var(--muted);border-left:1px solid var(--line);padding-left:14px;white-space:nowrap}.selected-actions{display:flex;align-items:center;gap:10px}.text-button,.icon-button,.dark-button,.outline-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;background:transparent;padding:11px 14px;font-size:12px;line-height:1.3;white-space:nowrap}.icon-button{padding:10px}.icon-button:hover,.text-button:hover{background:#f3f3f3}.dark-button{color:white;background:var(--ink);border:1px solid var(--ink);border-radius:6px}.dark-button:hover{background:#393939}.outline-button{border:1px solid #d0d0d0;border-radius:5px;font-size:11px}.outline-button:hover{border-color:var(--ink)}#preview-toggle[aria-expanded=true] .icon{transform:rotate(45deg)}.preview-panel{display:grid;grid-template-columns:1fr 1.5fr;gap:44px;padding:34px 0 36px;border-bottom:1px solid var(--line)}[hidden]{display:none!important}.preview-description h3{font-size:23px;margin:0 0 17px;letter-spacing:-.035em}.preview-description p{font-size:13px;line-height:1.9;color:#4c4c4c;margin:0 0 12px}.small-note,.preview-description .small-note{font-size:11px;line-height:1.9;color:var(--muted)}.detail-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}.mockup{border-radius:12px;overflow:hidden;background:var(--base);color:var(--mock-ink);padding:22px}.mock-nav{display:flex;align-items:center;gap:20px;border-bottom:1px solid currentColor;padding-bottom:14px;font-size:11px}.mock-nav b{font-size:21px;letter-spacing:-.04em}.mock-menu{margin-left:auto;display:flex;gap:10px;align-items:center}.mock-menu svg{width:12px;height:12px}.mock-body{display:grid;grid-template-columns:1fr 1fr;min-height:215px;gap:18px;align-items:center}.mock-copy>span:first-child{font-size:19px;letter-spacing:-.025em}.mock-copy h3{font-size:34px;line-height:1.1;letter-spacing:-.04em;margin:2px 0 15px}.mock-copy p{font-size:11px;line-height:1.7}.mock-cta{background:var(--accent);color:var(--on-accent);display:inline-flex;gap:12px;align-items:center;font-size:11px;padding:10px 12px;margin-top:13px;border-radius:3px}.mock-cta svg{width:11px;height:11px}.mock-art{height:180px;background:var(--secondary);border-radius:90px 90px 4px 4px;position:relative;overflow:hidden}.art-circle{position:absolute;width:75%;aspect-ratio:1;border-radius:100%;background:var(--base);bottom:-22%;left:-18%}.art-rect{position:absolute;width:40%;height:72%;background:var(--accent);bottom:0;right:10%;border-radius:50px 50px 0 0}.art-dot{position:absolute;width:22%;aspect-ratio:1;border-radius:50%;background:var(--base);top:18%;left:18%}.mock-bottom{border-top:1px solid currentColor;padding-top:12px;display:flex;justify-content:space-between;font-size:11px}.contrast{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:11px;color:var(--muted);padding-top:12px;line-height:1.7}.contrast strong{font-family:Consolas,monospace;color:var(--ink);font-weight:400}.collection{padding-top:70px;scroll-margin-top:0}.collection-top{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:25px}.collection-top h2,.guide h2{font-size:29px;letter-spacing:-.04em;margin:0;font-weight:650}.collection-top p{font-size:11px;color:var(--muted);margin:0;line-height:1.8}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding-bottom:17px}.tabs{display:flex;gap:4px;flex-wrap:wrap}.tabs button{border:0;background:none;font-size:12px;padding:9px 13px;border-radius:5px;color:var(--muted)}.tabs button:first-child{margin-left:-13px}.tabs button:hover{background:#f4f4f4;color:var(--ink)}.tabs button[aria-pressed=true]{color:var(--ink);background:#f0f0f0;font-weight:700}.saved-filter{display:flex;gap:7px;align-items:center;background:none;border:0;font-size:11px;padding:9px 0 9px 10px;white-space:nowrap}.saved-filter .icon{width:15px;height:15px}.saved-filter span{font-variant-numeric:tabular-nums;color:var(--muted);padding-left:3px}.saved-filter[aria-pressed=true]{color:var(--purple)}.saved-filter[aria-pressed=true] svg{fill:var(--purple)}.search-row{display:flex;align-items:center;gap:23px;padding-block:20px 24px}.search-field{display:flex;gap:8px;align-items:center}.search-field>.icon{width:15px;height:15px;color:var(--muted)}.search-field input{border:0;border-bottom:1px solid transparent;outline-offset:2px;min-width:0;width:210px;padding:5px 0;background:none;font-size:11px;color:var(--ink)}input::placeholder{color:#6b6b6b}.tone-field{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:11px}.tone-field label{color:var(--muted)}.tone-field select{font-size:11px;background:#fff;color:var(--ink);border:0;padding:5px 20px 5px 4px}.result-count{font-size:11px;color:var(--muted);width:58px;text-align:right;font-variant-numeric:tabular-nums}.palette-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 24px}.palette-card{min-width:0}.card-colors{display:grid;grid-template-columns:6fr 3fr 1fr;border-radius:12px;overflow:hidden;height:164px;border:1px solid #0000000a}.card-color{border:0;min-width:0;display:flex;flex-direction:column;align-items:start;justify-content:space-between;padding:15px 16px;transition:filter .15s;text-align:left;position:relative}.card-color:hover{filter:brightness(.94)}.card-color:focus-visible{outline-offset:-4px;outline-color:currentColor}.card-color .percent{font-size:11px;opacity:.9;font-variant-numeric:tabular-nums}.card-color .hex{font-family:Consolas,'Courier New',monospace;font-size:11px;white-space:nowrap}.card-color:nth-child(2) .hex{font-size:11px}.card-color:last-child{padding:15px 6px;align-items:center}.card-color:last-child .hex{writing-mode:vertical-rl;font-size:11px;letter-spacing:.01em}.card-bottom{display:flex;align-items:start;justify-content:space-between;gap:8px;padding-top:13px}.card-open{background:none;border:0;padding:0;text-align:left;max-width:calc(100% - 34px)}.card-title{display:block;font-size:15px;font-weight:600;letter-spacing:-.025em}.card-open:hover .card-title{text-decoration:underline;text-underline-offset:4px}.card-caption{display:block;color:var(--muted);font-size:11px;margin-top:6px;line-height:1.5}.save-button{background:none;border:0;padding:2px 1px 8px 9px;color:#717171}.save-button .icon{width:16px;height:16px}.save-button:hover{color:var(--purple)}.save-button[aria-pressed=true]{color:var(--purple)}.save-button[aria-pressed=true] svg{fill:currentColor}.palette-card.is-selected .card-title{color:var(--purple)}.empty{text-align:center;padding:100px 20px}.empty h3{font-size:23px;letter-spacing:-.035em;margin:0 0 14px}.empty p{font-size:13px;color:var(--muted);line-height:1.8;margin-bottom:22px}.guide{margin-top:100px;border-top:1px solid var(--ink);padding-top:28px}.guide-heading{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:35px}.guide-heading p{font-size:11px;color:var(--muted);margin:0}.guide-row{display:grid;grid-template-columns:1fr 2fr;gap:32px;border-top:1px solid var(--line);padding-block:28px}.guide-row h3{margin:2px 0;font-size:13px;font-weight:500}.guide-row p{font-size:13px;line-height:1.95;margin:0 0 12px;max-width:74ch;color:#3c3c3c}.guide-row .small-note{font-size:11px;color:var(--muted)}.source-link{display:inline-flex;align-items:center;gap:7px;font-size:11px;color:var(--muted);text-decoration:underline;text-underline-offset:4px;line-height:1.8}.source-link .icon{width:11px;height:11px}.source-link:hover{color:var(--purple)}.source-links{display:flex;gap:20px;flex-wrap:wrap}.site-footer{margin-top:85px;border-top:1px solid var(--ink);padding-block:24px 45px}.site-footer nav{display:flex;gap:8px;flex-wrap:wrap}.site-footer nav a{font-size:38px;font-weight:700;letter-spacing:-.045em;line-height:1.2}.site-footer nav a:hover{color:var(--purple)}.footer-meta{display:flex;justify-content:space-between;gap:20px;margin-top:26px;font-size:11px;color:var(--muted)}.toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%,15px);background:#171717;color:#fff;padding:13px 22px;border-radius:7px;font-size:12px;box-shadow:0 6px 22px #0002;opacity:0;pointer-events:none;z-index:20;transition:opacity .2s,transform .2s;max-width:calc(100% - 32px);text-align:center}.toast.visible{opacity:1;transform:translate(-50%,0)}.skip{position:fixed;top:-80px;left:20px;z-index:30;padding:12px;background:var(--ink);color:white}.skip:focus{top:12px}dialog{border:1px solid var(--line);border-radius:12px;width:min(520px,calc(100% - 32px));padding:28px}dialog::backdrop{background:#0005}dialog h2{font-size:22px}dialog p{font-size:13px;line-height:1.8;color:var(--muted)}dialog textarea{width:100%;min-height:180px;font:12px/1.8 Consolas,monospace;padding:12px;margin:12px 0 20px;border:1px solid var(--line);resize:vertical}::-webkit-scrollbar{width:9px}::-webkit-scrollbar-track{background:#fff}::-webkit-scrollbar-thumb{background:#c4c4c4;border:2px solid #fff;border-radius:9px}
@media(min-width:1500px){.hero-swatches{min-height:280px}.card-colors{height:190px}}
@media(max-width:1080px){.wrap{width:calc(100% - 56px)}.intro-copy{font-size:12px}.hero-swatches{min-height:220px}.hero-swatch{padding:23px}.hero-swatch:last-child{padding-inline:10px}.swatch-meta{flex-direction:column;align-items:start;gap:7px}.palette-grid{gap:30px 20px}.card-colors{height:145px}.card-color{padding:13px 12px}.card-color:nth-child(2){padding-inline:9px}.card-color .hex{font-size:11px}.card-color:nth-child(2) .hex{font-size:11px}.preview-panel{gap:26px}.collection-top p{font-size:11px}.tabs button{padding-inline:10px}.tabs button:first-child{margin-left:-10px}}
@media(max-width:800px){.site-header{padding-bottom:53px}.intro{align-items:start;flex-direction:column;gap:18px}.intro-copy br{display:none}.hero-swatches{min-height:215px}.hero-swatch .ratio{font-size:64px}.hero-swatch:last-child .ratio{font-size:36px}.selected-bar{flex-wrap:wrap;gap:16px}.selected-actions{margin-left:auto}.collection{padding-top:48px}.collection-top{align-items:start;flex-direction:column;gap:11px}.collection-top p{font-size:11px}.palette-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}.card-colors{height:165px}.card-color .hex{font-size:11px}.card-color:nth-child(2) .hex{font-size:11px}.toolbar{flex-wrap:wrap;gap:7px}.saved-filter{margin-left:auto}.preview-panel{grid-template-columns:1fr}.preview-description{max-width:550px}.mock-body{min-height:250px}.mock-art{height:220px}.mock-copy h3{font-size:44px}.mock-copy>span:first-child{font-size:23px}.mock-copy p{font-size:11px}.mock-cta{font-size:11px}.guide{margin-top:75px}.guide-heading{align-items:start;flex-direction:column;gap:12px}.guide-row{grid-template-columns:1fr 2fr;gap:22px}}
@media(max-width:520px){.wrap{width:calc(100% - 36px)}.site-header{padding-block:27px 48px}.wordmark{font-size:29px}.site-header nav{gap:18px;font-size:11px}.site-header nav a:last-child{font-size:0;gap:0}.site-header nav a:last-child svg{width:17px;height:17px}.intro{margin-bottom:26px;gap:19px}h1{font-size:57px;margin-bottom:14px}.intro-sub{font-size:15px}.intro-copy{font-size:11px;line-height:1.9}.hero-swatches{min-height:187px;border-radius:12px;grid-template-columns:6fr 3fr 1fr}.hero-swatch{padding:18px 14px}.hero-swatch .ratio{font-size:48px}.hero-swatch .ratio small{font-size:11px;margin-left:2px}.hero-swatch:nth-child(2){padding-inline:12px}.hero-swatch:nth-child(2) .ratio{font-size:39px}.hero-swatch:last-child{padding-inline:4px;align-items:center}.hero-swatch:last-child .ratio{font-size:24px;letter-spacing:-.04em}.hero-swatch:last-child .ratio small{display:none}.hero-swatch:last-child .role{writing-mode:vertical-rl;font-size:11px}.hero-swatch:last-child .swatch-meta{align-items:center;gap:10px}.hero-swatch:last-child .swatch-meta strong{writing-mode:vertical-rl;font-size:11px}.swatch-meta strong{font-size:11px}.swatch-meta .role{font-size:11px}.selected-bar{padding-block:16px;gap:15px}.selected-info{gap:10px;width:100%}.selected-info h2{font-size:18px}.theory-label{font-size:11px;margin-left:auto;padding-left:10px}.selected-actions{width:100%;justify-content:space-between;gap:4px}.selected-actions .icon-button{margin-left:-7px}.selected-actions #copy-css{padding-inline:16px}.text-button{padding-inline:12px;font-size:11px}.collection-top h2,.guide h2{font-size:26px}.collection-top{margin-bottom:20px}.collection-top p{font-size:11px}.toolbar{gap:10px;padding-bottom:12px}.tabs{column-gap:1px;row-gap:4px;width:100%}.tabs button{font-size:11px;padding:8px 9px}.tabs button:first-child{margin-left:0}.saved-filter{font-size:11px;padding-block:4px}.search-row{gap:12px;padding-block:14px 20px;flex-wrap:wrap}.search-field{flex:1;min-width:0}.search-field input{width:100%;font-size:11px}.tone-field{gap:3px;font-size:11px}.tone-field select{padding-right:0;font-size:11px}.result-count{width:auto;font-size:11px}.tone-field label{display:none}.palette-grid{column-gap:14px;row-gap:25px}.card-colors{height:151px;border-radius:10px}.card-color{padding:12px 10px}.card-color:nth-child(2){padding-inline:6px}.card-color .percent{font-size:11px}.card-color .hex{font-size:11px;writing-mode:vertical-rl}.card-color:nth-child(2) .hex{font-size:11px}.card-color:last-child{padding-inline:3px}.card-color:last-child .hex{font-size:11px}.card-bottom{padding-top:10px;gap:4px}.card-open{max-width:calc(100% - 25px)}.card-title{font-size:13px}.card-caption{font-size:11px;line-height:1.7;margin-top:4px}.save-button{padding-left:4px}.save-button svg.icon{width:14px;height:14px}.preview-panel{padding-block:26px;gap:20px}.preview-description h3{font-size:21px}.preview-description p{font-size:12px}.mockup{padding:16px}.mock-nav b{font-size:18px}.mock-nav>span:nth-child(2){font-size:11px}.mock-body{min-height:215px;gap:10px;grid-template-columns:1.15fr 1fr}.mock-copy h3{font-size:31px}.mock-copy>span:first-child{font-size:17px}.mock-copy p{font-size:11px}.mock-cta{font-size:11px;padding:8px;gap:4px}.mock-art{height:175px}.mock-bottom{font-size:7px}.contrast{font-size:11px;gap:6px 12px}.guide-heading{margin-bottom:24px}.guide-row{grid-template-columns:1fr;gap:16px;padding-block:23px}.guide-row h3{font-size:13px}.guide-row p{font-size:12px;line-height:1.95}.site-footer{margin-top:58px;padding-block:20px 30px}.site-footer nav{gap:6px}.site-footer nav a{font-size:29px}.footer-meta{flex-direction:column;gap:9px;font-size:11px}.toast{font-size:11px;bottom:18px;min-width:220px}}
.collection-top p,.guide-heading p,.source-link,.search-field input,.tone-field,.tone-field select,.saved-filter{font-size:12px}.card-caption{font-size:11px}.swatch-meta .role{font-size:12px}.guide-row p{font-size:14px}.guide-row .small-note,.small-note{font-size:12px}.save-button{min-width:30px;min-height:32px}.card-color .percent{opacity:1}.guide-row{padding-top:28px;padding-bottom:28px}
@media(max-width:520px){.intro-copy{font-size:12px}.collection-top p{font-size:12px}.tabs button{font-size:12px;min-height:36px;padding-inline:10px}.search-field input{width:100%;min-height:34px;font-size:12px}.tone-field select{font-size:12px;min-height:34px}.card-title{font-size:14px}.card-caption{font-size:11px}.hero-swatch .swatch-meta .role{font-size:11px}.hero-swatch:last-child .swatch-meta .role{font-size:11px}.hero-swatch:last-child .swatch-meta strong{font-size:11px}.hero-swatch:last-child .swatch-meta{gap:6px}.card-color:nth-child(2) .hex,.card-color:last-child .hex{font-size:11px}.card-color .hex{font-size:11px}.card-color:last-child{padding-inline:1px}.card-color .percent{font-size:11px}.card-colors{height:164px}.card-color:last-child .percent{font-size:10px}.guide-row p{font-size:14px}.guide-row .small-note{font-size:12px}.footer-meta{font-size:11px}.contrast{font-size:11px}.text-button{font-size:12px}.outline-button{min-height:40px}.mock-copy p{font-size:11px}.mock-bottom{font-size:10px;gap:8px}}
@media(max-width:520px){.selected-info{flex-wrap:wrap}.selected-info h2{max-width:calc(100% - 64px)}.theory-label{margin-left:0}.hero-swatch:last-child .swatch-meta .role{display:none}.hero-swatch:last-child .swatch-meta strong{margin-bottom:1px}}
@media(max-width:359px){h1{font-size:49px}.palette-grid{grid-template-columns:1fr}.card-colors{height:176px}.card-color .hex{writing-mode:horizontal-tb}.card-color:last-child .hex{writing-mode:vertical-rl}}
.main-view,.collection-view{min-height:100svh}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:48px;margin-bottom:38px}.page-heading h1{font-size:clamp(52px,6.5vw,88px);margin:0;letter-spacing:-.04em;line-height:1.1}.collection-link{display:inline-flex;align-items:center;gap:12px;padding:12px 0 12px 16px;font-size:13px;font-weight:600;white-space:nowrap}.collection-link:hover{color:var(--purple)}.back-icon{transform:rotate(90deg)}.main-view .hero-swatches{min-height:clamp(340px,57svh,620px)}.main-view .hero-swatch{padding:30px}.main-view .hero-swatch .ratio{font-size:clamp(68px,9vw,112px)}.main-view .hero-swatch:last-child{padding-inline:18px}.main-view .hero-swatch:last-child .ratio{font-size:clamp(38px,5vw,68px)}.main-view .swatch-meta{width:100%;align-items:start}.main-view .swatch-meta strong{font-size:14px}.main-view .selected-bar{padding-block:24px}.main-view .selected-info h2{font-size:20px}.main-view .workbench{padding-bottom:40px}.collection-view .page-heading{margin-bottom:36px}.collection-view .page-heading h1{font-size:clamp(34px,4vw,52px)}.collection-view .collection{padding-top:0;padding-bottom:64px}.collection-view .card-open{min-height:44px}
@media(max-width:800px){.page-heading{padding-top:38px;margin-bottom:30px}.page-heading h1{font-size:64px}.main-view .hero-swatches{min-height:clamp(340px,56svh,540px)}.main-view .hero-swatch{padding:25px}.main-view .hero-swatch:last-child{padding-inline:12px}.main-view .selected-info h2{font-size:19px}}
@media(max-width:520px){.page-heading{padding-top:28px;margin-bottom:26px;gap:14px}.page-heading h1{font-size:49px}.collection-link{font-size:12px;gap:8px;padding-left:0}.collection-link .icon{width:16px;height:16px}.main-view .hero-swatches{min-height:clamp(320px,55svh,490px)}.main-view .hero-swatch{padding:22px 15px}.main-view .hero-swatch .ratio{font-size:57px}.main-view .hero-swatch:nth-child(2){padding-inline:12px}.main-view .hero-swatch:nth-child(2) .ratio{font-size:46px}.main-view .hero-swatch:last-child{padding-inline:4px}.main-view .hero-swatch:last-child .ratio{font-size:28px}.main-view .swatch-meta strong{font-size:12px}.main-view .hero-swatch:last-child .swatch-meta strong{font-size:11px;writing-mode:vertical-rl}.main-view .selected-bar{padding-block:20px;gap:17px}.main-view .selected-info h2{font-size:18px}.collection-view .page-heading h1{font-size:34px}.collection-view .page-heading{margin-bottom:27px}.collection-view .collection-link{font-size:13px}}
@media(max-width:359px){.page-heading h1{font-size:42px}.collection-link{font-size:11px}.main-view .hero-swatch .ratio{font-size:50px}.main-view .hero-swatch:nth-child(2) .ratio{font-size:40px}.main-view .hero-swatch:last-child .ratio{font-size:24px}}
.selected-summary{flex:1;min-width:0}.selected-feeling{margin:10px 0 0;color:#595959;font-size:14px;line-height:1.8;word-break:keep-all}.selected-bar{align-items:center}.card-feeling{margin:10px 0 0;color:#595959;font-size:12px;line-height:1.8;word-break:keep-all}.main-view .swatch-meta strong{font-size:22px;letter-spacing:-.025em}.main-view .hero-swatch:last-child .swatch-meta{align-items:center}.main-view .hero-swatch:last-child .swatch-meta strong{font-size:20px;writing-mode:vertical-rl}
@media(max-width:800px){.selected-summary{flex-basis:100%}.selected-actions{margin-left:auto}.main-view .swatch-meta strong{font-size:20px}.main-view .hero-swatch:last-child .swatch-meta strong{font-size:18px}}
@media(max-width:520px){.selected-feeling{font-size:13px;margin-top:9px}.main-view .swatch-meta strong{font-size:18px}.main-view .hero-swatch:last-child .swatch-meta strong{font-size:17px}.card-feeling{font-size:12px;line-height:1.8}.main-view .selected-info h2{max-width:100%}}
.main-view .hero-swatches{min-height:clamp(227px,38svh,413px)}.palette-values{display:grid;justify-items:start;gap:4px;padding:20px 0;border-bottom:1px solid var(--line)}.palette-value{display:inline-flex;align-items:center;gap:18px;min-height:32px;padding:4px 10px 4px 0;border:0;background:transparent;border-radius:4px}.palette-value:hover{background:#f4f4f4}.ratio-value{width:14px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;text-align:center}.palette-value strong{font-family:Consolas,'Courier New',monospace;font-size:20px;letter-spacing:-.02em;font-weight:400}.palette-value svg{width:15px;height:15px;color:var(--muted)}
@media(max-width:800px){.main-view .hero-swatches{min-height:clamp(227px,37.333svh,360px)}}
@media(max-width:520px){.main-view .hero-swatches{min-height:clamp(213px,36.667svh,327px)}.palette-values{padding:17px 0;gap:5px}.palette-value{min-height:36px}.palette-value strong{font-size:18px}}
.palette-value{gap:14px}.palette-value .ratio-value{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:28px;border:1px solid #00000012;border-radius:5px;font-family:inherit;font-size:15px;font-weight:700;line-height:1}.palette-value strong{font-family:inherit;letter-spacing:0;font-variant-numeric:tabular-nums}
.hero-swatch .hover-hex{position:absolute;bottom:24px;left:24px;visibility:hidden;opacity:0;pointer-events:none;font:600 18px/1 Arial,'Noto Sans KR','Malgun Gothic',sans-serif;letter-spacing:0;transition:opacity .15s ease-out}.hero-swatch:hover .hover-hex,.hero-swatch:focus-visible .hover-hex{visibility:visible;opacity:1}.hero-swatch:last-child .hover-hex{left:50%;transform:translateX(-50%);writing-mode:vertical-rl}
@media(max-width:520px){.hero-swatch .hover-hex{left:15px;bottom:20px;font-size:16px}.hero-swatch:last-child .hover-hex{left:50%}}
.copy-actions{display:flex;flex-direction:column;align-items:stretch;gap:7px;min-width:142px}.copy-actions .outline-button{font-size:12px;padding:11px 14px;gap:10px}.copy-actions .dark-button,.copy-actions .outline-button{justify-content:center}
/* Reserve the scrollbar lane before the expandable preview makes the page scroll. */
:root{scrollbar-gutter:stable}
@supports not (scrollbar-gutter:stable){:root{overflow-y:scroll}}
.empty h2{font-size:23px;letter-spacing:-.035em;margin:0 0 14px}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

/* A quiet link back to the studio at the end of the main page. */
body.main-view{display:flex;flex-direction:column}.studio-return{margin-top:auto;padding-top:24px;padding-bottom:28px;font-size:12px;line-height:1.6;color:var(--muted)}.studio-return a{display:inline-block;padding-block:6px}.studio-return a:hover,.studio-return a:focus-visible{color:var(--ink);text-decoration:underline;text-underline-offset:4px}

/* Keep preview art square: a percentage-sized circle must not outgrow a fixed-height crop. */
.preview-panel{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}
.preview-description,.preview-demo,.mock-copy{min-width:0}
.mock-body{grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:0;padding-block:20px}
.mock-art{display:block;width:min(100%,220px);height:auto;aspect-ratio:1;max-width:100%;justify-self:end;background:none;border-radius:0;overflow:visible}
.mock-bottom{gap:12px;flex-wrap:wrap;line-height:1.6}
@media(max-width:800px){.preview-panel{grid-template-columns:minmax(0,1fr)}}
@media(max-width:520px){.mock-body{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);padding-block:18px}.mock-nav{gap:12px}.mock-copy h3{font-size:30px;overflow-wrap:normal}.mock-copy>span:first-child{font-size:17px}.mock-copy p{font-size:11px}.mock-cta{white-space:normal;line-height:1.5}.mock-bottom{font-size:11px}}
@media(max-width:359px){.mock-nav>span:nth-child(2){display:none}.mock-body{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:8px}.mock-copy h3{font-size:27px}.mock-copy>span:first-child{font-size:15px}}