.color-detail,.color-play,.color-result{--paper:#f4efdf;--ink:#181510;color:var(--ink);background:var(--paper);font-family:Pretendard,Apple SD Gothic Neo,sans-serif}.color-detail{overflow:hidden}.color-detail-hero{border-bottom:2px solid var(--ink);grid-template-columns:.9fr 1.1fr;min-height:calc(100vh - 58px);display:grid}.color-hero-copy{flex-direction:column;justify-content:center;align-items:flex-start;padding:54px max(5vw,40px) 64px;display:flex;position:relative}.color-hero-copy:before{content:"";opacity:.8;background:#f4cf2f;width:88px;height:22px;position:absolute;top:18%;left:7%;transform:rotate(-8deg)}.color-back{z-index:1;margin-bottom:72px;font-size:14px;font-weight:800}.color-kicker{letter-spacing:.16em;margin:0 0 18px;font-size:11px;font-weight:900}.color-hero-copy h1{letter-spacing:-.065em;margin:0;font-size:clamp(54px,5.6vw,86px);font-weight:950;line-height:1.01}.color-hero-copy h1 em{color:#ed3e35;text-underline-offset:7px;font-style:normal;text-decoration:underline;text-decoration-thickness:7px}.color-lead{margin:30px 0;font-size:17px;line-height:1.72}.color-start{color:#fff6df;border:3px solid var(--ink);box-shadow:7px 7px 0 var(--ink);background:#ed3e35;align-items:center;gap:28px;padding:17px 22px;font-size:17px;font-weight:900;display:inline-flex;transform:rotate(-1deg)}.color-start:hover{box-shadow:4px 4px 0 var(--ink);transform:translate(3px,3px)rotate(-1deg)}.color-start svg{width:22px;height:22px}.color-hero-copy small{margin-top:17px;font-size:12px}.color-hero-art{border-left:2px solid var(--ink);background:#e9e0c8;min-height:620px;margin:0;position:relative;overflow:hidden}.color-hero-art img{object-fit:cover}.color-hero-art figcaption,.color-result-art figcaption{border:2px solid var(--ink);background:#f4cf2f;padding:9px 12px;font-size:11px;font-weight:900;position:absolute;bottom:20px;right:20px;transform:rotate(2deg)}.color-method{grid-template-columns:.8fr 1.2fr;gap:80px;width:min(1220px,100% - 48px);margin:auto;padding:105px 0;display:grid}.color-method header>span,.color-swatch-index header>p{letter-spacing:.15em;font-size:11px;font-weight:900}.color-method h2,.color-swatch-index h2,.color-detail-end h2{letter-spacing:-.055em;margin:16px 0 0;font-size:clamp(38px,4.5vw,66px);line-height:1.06}.color-method ol{border-top:3px solid var(--ink);margin:0;padding:0;list-style:none}.color-method li{border-bottom:1px solid var(--ink);grid-template-columns:60px 1fr;align-items:center;min-height:68px;display:grid}.color-method li b{font-size:11px}.color-method li p{margin:0;font-size:18px;font-weight:800}.color-swatch-index{color:#f8f1df;background:#191713;padding:100px max(24px,50vw - 610px)}.color-swatch-index header{border-bottom:1px solid #766f61;grid-template-columns:1fr 1fr;align-items:end;padding-bottom:34px;display:grid}.color-swatch-index header p{grid-column:1/-1}.color-swatch-index h2{font-size:clamp(36px,4.2vw,58px)}.color-swatch-index>div{grid-template-columns:repeat(3,1fr);display:grid}.color-swatch-index article{border-bottom:1px solid #5d574b;border-right:1px solid #5d574b;grid-template-columns:34px 62px 1fr;align-items:center;gap:15px;min-height:150px;padding:24px 20px;display:grid}.color-swatch-index article:nth-child(3n){border-right:0}.color-swatch-index article>span{align-self:start;font-size:10px}.color-swatch-index article>i{background:var(--swatch);clip-path:polygon(4% 7%,91% 0,100% 87%,11% 100%,0 32%);border:2px solid #0f0e0c;width:58px;height:66px;transform:rotate(-5deg);box-shadow:3px 4px #ffffff1f}.color-swatch-index article:nth-child(2n)>i{transform:rotate(4deg)}.color-swatch-index article b{font-size:21px}.color-swatch-index article p{color:#bfb7a7;margin:7px 0 0;font-size:13px;line-height:1.5}.color-detail-end{text-align:center;border-bottom:2px solid var(--ink);padding:110px 24px 125px}.color-detail-end>p{font-weight:800}.color-detail-end h2{margin:20px auto 38px}.color-detail-end a{border:3px solid var(--ink);box-shadow:7px 7px 0 var(--ink);background:#f4cf2f;align-items:center;gap:20px;padding:18px 24px;font-weight:950;display:inline-flex}.color-detail-end a svg{width:22px;height:22px}body:has(.color-play){padding-bottom:0}body:has(.color-play)>.site-header{display:none}body:has(.color-play)>.mobile-nav{display:none}body:has(.color-play)>footer{display:none}.color-play{min-height:100vh;padding:26px max(3vw,24px) 40px;position:relative}.color-play:before,.color-play:after{content:"";opacity:.65;z-index:0;background:#ee91b4;width:130px;height:26px;position:fixed}.color-play:before{top:22%;left:-22px;transform:rotate(21deg)}.color-play:after{background:#43bcd3;bottom:18%;right:-35px;transform:rotate(-25deg)}.color-play-head{z-index:1;grid-template-columns:52px 1fr auto;align-items:center;gap:18px;max-width:1080px;margin:auto;display:grid;position:relative}.color-play-head button{border:2px solid var(--ink);cursor:pointer;background:0 0;place-items:center;width:48px;height:48px;display:grid}.color-play-head svg{width:21px;height:21px}.color-play-head div span,.color-play-head div b{display:block}.color-play-head div span{letter-spacing:.17em;font-size:9px}.color-play-head div b{margin-top:4px;font-size:14px}.color-play-head strong{font-size:14px}.color-progress{z-index:1;grid-template-columns:repeat(15,1fr);gap:3px;max-width:1080px;height:12px;margin:21px auto 0;display:grid;position:relative}.color-progress i{clip-path:polygon(5% 8%,95% 0,100% 86%,9% 100%,0 32%);background:#d6cfbc;display:block}.color-progress i.done,.color-progress i.active{background:var(--paper-color)}.color-progress i.active{transform-origin:50%;border:1px solid var(--ink);transform:scaleY(1.8)}.color-question{z-index:1;grid-template-columns:115px 1fr;column-gap:38px;width:min(930px,100% - 32px);margin:7vh auto 0;display:grid;position:relative}.color-question-no{border-top:3px solid var(--ink);padding-top:10px}.color-question-no span{font-size:10px;font-weight:900}.color-question-no b{margin-top:10px;font-size:58px;line-height:1;display:block}.color-question-copy{min-height:170px}.color-question-copy p{color:#6e6759;margin:0 0 14px;font-size:12px;font-weight:900}.color-question-copy h1{letter-spacing:-.052em;margin:0;font-size:clamp(33px,4.2vw,57px);line-height:1.12}.color-answers{grid-column:2;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px;display:grid}.color-answers button{border:2px solid var(--ink);text-align:left;cursor:pointer;background:#faf5e7;grid-template-columns:38px 1fr 20px;align-items:start;gap:13px;min-height:112px;padding:17px 17px 15px;transition:transform .12s,box-shadow .12s;display:grid;box-shadow:4px 4px #c5bdac}.color-answers button:nth-child(2){transform:rotate(.4deg)}.color-answers button:nth-child(3){transform:rotate(-.35deg)}.color-answers button:hover,.color-answers button.selected{background:#f4cf2f;transform:translate(3px,3px);box-shadow:1px 1px #c5bdac}.color-answers button>span{border:2px solid var(--ink);place-items:center;width:31px;height:31px;font-weight:950;display:grid}.color-answers button b{font-size:16px;line-height:1.36;display:block}.color-answers button small{color:#71695b;margin-top:7px;font-size:12px;line-height:1.4;display:block}.color-answers button>i{clip-path:polygon(0 12%,100% 0,91% 100%,8% 90%);background:#ee91b4;height:14px;margin-top:6px}.color-answers button:nth-child(2)>i{background:#43bcd3}.color-answers button:nth-child(3)>i{background:#a8d92d}.color-answers button:nth-child(4)>i{background:#ec352e}.color-play-foot{color:#6c6557;width:min(930px,100% - 32px);margin:25px auto 0;padding-left:153px;font-size:12px}.color-play-loading{background:#f4efdf;place-items:center;min-height:100vh;font-weight:900;display:grid}.color-processing{z-index:30;text-align:center;background:#f4efdff0;place-content:center;display:grid;position:fixed;inset:0}.color-processing>div{justify-content:center;align-items:end;gap:5px;height:90px;display:flex}.color-processing i{clip-path:polygon(5% 7%,100% 0,92% 100%,0 88%);background:#ec352e;width:45px;height:55px;animation:.7s infinite alternate color-bob;display:block}.color-processing i:nth-child(2){background:#f4cf2f;height:78px;animation-delay:.15s}.color-processing i:nth-child(3){background:#3473c8;height:61px;animation-delay:.3s}.color-processing b{margin-top:16px;font-size:23px}.color-processing span{margin-top:7px;font-size:13px}@keyframes color-bob{to{transform:translateY(-12px)rotate(5deg)}}.color-result{--energy:#ec352e;--energy-ink:#fff;overflow:hidden}.color-result-hero{border-bottom:3px solid var(--ink);grid-template-columns:1.03fr .97fr;min-height:calc(100vh - 58px);display:grid}.color-result-copy{background:var(--energy);color:var(--energy-ink);flex-direction:column;justify-content:center;padding:58px max(5vw,38px) 64px;display:flex}.color-result-copy>p:first-child{margin:0;font-size:13px;font-weight:900}.color-result-copy h1{letter-spacing:-.08em;margin:23px 0 13px;font-size:clamp(88px,11vw,168px);font-weight:950;line-height:.78}.color-result-copy>span{letter-spacing:.2em;font-size:10px;font-weight:900}.color-result-copy h2{letter-spacing:-.055em;max-width:620px;margin:50px 0 12px;font-size:clamp(30px,3.5vw,52px);line-height:1.04}.color-result-copy blockquote{margin:0;font-size:14px;font-weight:800}.color-result-summary{max-width:590px;margin:24px 0;font-size:17px;line-height:1.7}.color-result-tags{flex-wrap:wrap;gap:14px;margin-bottom:27px;display:flex}.color-result-tags b{border-bottom:2px solid;padding-bottom:3px;font-size:13px}.color-result-copy .result-actions{margin-top:0}.color-result-art{background:#efe7d3;min-height:650px;margin:0;position:relative}.color-result-art img{object-fit:cover}.color-result-art:before{content:"결과 원화 / 만지지 마시오";z-index:2;border:2px solid var(--ink);background:var(--paper);padding:8px;font-size:10px;font-weight:900;position:absolute;top:18px;left:18px;transform:rotate(-2deg)}.color-result-intro,.color-meter,.color-today{width:min(1120px,100% - 48px);margin:auto;padding:100px 0}.color-result-intro>span,.color-meter header>span,.color-life span,.color-today header>span,.color-mix>div:last-child>span{letter-spacing:.16em;font-size:10px;font-weight:900}.color-result-intro>h2,.color-meter h2,.color-today h2,.color-mix h2,.color-result-end h2{letter-spacing:-.055em;margin:15px 0 40px;font-size:clamp(38px,4.6vw,66px);line-height:1.04}.color-result-intro>div{border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);grid-template-columns:1fr 1fr;display:grid}.color-result-intro article{padding:28px}.color-result-intro article+article{border-left:1px solid var(--ink)}.color-result-intro article b{font-size:13px}.color-result-intro article p{margin:12px 0 0;font-size:20px;font-weight:850;line-height:1.45}.color-result-intro blockquote{margin:52px 0 0;padding-left:25%;font-size:21px;line-height:1.75}.color-meter{padding-top:0}.color-meter header{border-bottom:3px solid var(--ink);grid-template-columns:1fr 1fr;align-items:end;padding-bottom:28px;display:grid}.color-meter header>span{grid-column:1/-1}.color-meter h2{margin:12px 0 0}.color-meter header p{justify-self:end;max-width:330px;font-size:13px;line-height:1.6}.color-meter>div{grid-template-columns:1fr 1fr;column-gap:55px;display:grid}.color-meter article{border-bottom:1px solid var(--ink);padding:25px 0}.color-meter article>div:first-child{justify-content:space-between;display:flex}.color-meter article>div:first-child span{font-weight:950}.color-meter-line{grid-template-columns:64px 1fr 64px;align-items:center;gap:10px;margin-top:16px;display:grid}.color-meter-line small:last-child{text-align:right}.color-meter-line small{font-size:10px}.color-meter-line>i{clip-path:polygon(0 15%,100% 0,97% 88%,3% 100%);background:#d5ccba;height:13px;display:block;transform:rotate(-.5deg)}.color-meter-line>i span{background:var(--energy);height:100%;display:block}.color-on-off{color:#f7efdb;background:#1a1814;grid-template-columns:1fr 1fr;display:grid}.color-on-off>article{padding:80px max(4vw,35px)}.color-on-off>article+article{border-left:1px solid #696255}.color-on-off header span{color:var(--energy);font-size:11px;font-weight:900}.color-on-off h2{margin:13px 0 36px;font-size:34px}.color-on-off ol{margin:0;padding:0;list-style:none}.color-on-off li{border-top:1px solid #696255;grid-template-columns:38px 1fr;align-items:center;min-height:64px;display:grid}.color-on-off li:last-child{border-bottom:1px solid #696255}.color-on-off li b{font-size:11px}.color-on-off li p{font-size:16px}.color-life{grid-template-columns:1fr 1fr;display:grid}.color-life article{border-bottom:2px solid var(--ink);min-height:310px;padding:70px max(4vw,40px)}.color-life article+article{border-left:2px solid var(--ink)}.color-life h2{margin:20px 0;font-size:31px}.color-life p{max-width:530px;font-size:17px;line-height:1.75}.color-today>div{border:3px solid var(--ink);grid-template-columns:repeat(3,1fr);display:grid}.color-today article{min-height:190px;padding:24px;position:relative}.color-today article+article{border-left:1px solid var(--ink)}.color-today article b{color:var(--energy);font-size:38px}.color-today article p{margin-top:44px;font-size:18px;font-weight:850;line-height:1.5}.color-today>strong{background:var(--energy);color:var(--energy-ink);border:3px solid var(--ink);border-top:0;padding:20px 24px;font-size:17px;display:block}.color-mix{border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);background:#e5dcc7;grid-template-columns:1fr 1fr;min-height:390px;display:grid}.color-mix>div{flex-direction:column;justify-content:center;padding:65px max(5vw,35px);display:flex}.color-mix-sample{border-right:2px solid var(--ink);align-items:center;gap:22px;flex-direction:row!important}.color-mix-sample i{border:3px solid var(--ink);clip-path:polygon(5% 4%,98% 0,92% 100%,0 90%);width:120px;height:145px;display:block}.color-mix-sample .mix-other{background:#f4efdf}.color-mix-sample b,.color-mix-sample span{font-size:46px}.color-mix h2{margin:12px 0 20px}.color-mix p{max-width:480px;font-size:18px;line-height:1.7}.color-result-end{text-align:center;background:var(--energy);color:var(--energy-ink);padding:110px 24px}.color-result-end>p{letter-spacing:.17em;font-size:11px;font-weight:900}.color-result-end h2{max-width:900px;margin:22px auto 40px}.color-result-end>a{text-underline-offset:6px;align-items:center;gap:13px;margin-top:25px;font-weight:900;text-decoration:underline;display:inline-flex}.color-related{background:var(--paper);padding:70px max(24px,50vw - 560px)}.color-related>h2{font-size:27px}.color-related .test-card{max-width:560px}@media (max-width:820px){.color-detail-hero{flex-direction:column-reverse;min-height:auto;display:flex}.color-hero-art{border-left:0;border-bottom:2px solid var(--ink);min-height:420px}.color-hero-copy{padding:30px 18px 55px}.color-hero-copy:before{top:16px}.color-back{margin-bottom:46px}.color-hero-copy h1{font-size:48px}.color-lead{font-size:15px}.color-start{justify-content:space-between;width:calc(100% - 8px)}.color-method{width:calc(100% - 36px);padding:70px 0;display:block}.color-method h2{margin-bottom:45px;font-size:39px}.color-swatch-index{padding:65px 18px}.color-swatch-index header{display:block}.color-swatch-index h2{font-size:36px}.color-swatch-index>div{grid-template-columns:1fr}.color-swatch-index article,.color-swatch-index article:nth-child(3n){border-right:0}.color-detail-end{padding:80px 18px 90px}.color-detail-end h2{font-size:39px}.color-play{padding:15px 12px 30px}.color-play-head{grid-template-columns:44px 1fr auto;gap:10px}.color-play-head button{width:42px;height:42px}.color-play-head div span{display:none}.color-play-head div b{font-size:12px}.color-progress{gap:2px;height:8px;margin-top:15px}.color-question{width:100%;margin-top:5vh;display:block}.color-question-no{justify-content:space-between;align-items:center;display:flex}.color-question-no b{margin:0;font-size:33px}.color-question-copy{min-height:146px;padding-top:18px}.color-question-copy h1{font-size:34px}.color-answers{grid-template-columns:1fr;margin-top:9px;display:grid}.color-answers button{grid-template-columns:34px 1fr 16px;min-height:92px;padding:13px}.color-answers button b{font-size:15px}.color-answers button small{font-size:11px}.color-play-foot{width:100%;margin-top:20px;padding:0}.color-result-hero{flex-direction:column-reverse;min-height:auto;display:flex}.color-result-art{min-height:430px}.color-result-copy{padding:45px 18px 55px}.color-result-copy h1{font-size:96px}.color-result-copy h2{margin-top:42px;font-size:34px}.color-result-intro,.color-meter,.color-today{width:calc(100% - 36px);padding:70px 0}.color-result-intro>h2,.color-meter h2,.color-today h2,.color-mix h2,.color-result-end h2{font-size:38px}.color-result-intro>div{display:block}.color-result-intro article{padding:22px 4px}.color-result-intro article+article{border-left:0;border-top:1px solid var(--ink)}.color-result-intro blockquote{margin-top:40px;padding:0;font-size:17px}.color-meter{padding-top:0}.color-meter header{display:block}.color-meter header p{margin:18px 0 0}.color-meter>div,.color-on-off{grid-template-columns:1fr}.color-on-off>article{padding:55px 18px}.color-on-off>article+article{border-top:1px solid #696255;border-left:0}.color-life{grid-template-columns:1fr}.color-life article{padding:55px 18px}.color-life article+article{border-left:0}.color-today>div{grid-template-columns:1fr}.color-today article{min-height:130px}.color-today article+article{border-left:0;border-top:1px solid var(--ink)}.color-today article p{margin-top:20px}.color-mix{grid-template-columns:1fr}.color-mix>div{padding:55px 18px}.color-mix-sample{border-right:0;border-bottom:2px solid var(--ink)}.color-mix-sample i{width:82px;height:105px}.color-result-end{padding:80px 18px}.color-related{padding:55px 18px}}@media (max-width:430px){.color-hero-art{min-height:350px}.color-hero-copy h1{font-size:44px}.color-question-copy h1{font-size:31px}.color-answers button{min-height:88px}.color-result-art{min-height:390px}.color-result-copy h1{font-size:84px}.color-progress i.active{transform:scaleY(1.55)}}