/* 셀르디엠(CellREDM) × 이레라움 case study: every rule is scoped to .cr-page / .cr so the shared header, contact and footer stay untouched.
   Night rooms are the landing's plum (#0E0610) with one line of champagne light; day rooms are IRERAUM ivory, never pure white.
   The gradient only lives on the keyhole rim and one emphasised word; box colours only point at boxes. */
.cr-page{--cr-n0:#0e0610;--cr-n1:#160a18;--cr-n2:#211024;--cr-n3:#2d1733;--cr-fg:#f7f2f5;--cr-fg2:#cfc2d6;--cr-fg3:#a99bb1;--cr-dline:#f7f2f524;--cr-champ:#ead0a8;--cr-gold:#d6aa68;--cr-orchid:#c49be6;--cr-lilac:#dfc6f0;--cr-amethyst:#9a6bd6;--cr-rose:#e597bf;--cr-ivory:#f5f0e9;--cr-ivory2:#ebe2d6;--cr-paper:#fdfaf6;--cr-ink:#1d1822;--cr-ink2:#4c4453;--cr-ink3:#6f6676;--cr-line:#1d18221f;--cr-navy:#2c3963;--cr-plum:#6b3c7b;--cr-grad:linear-gradient(100deg,#f3dcc0 0%,#e7c3f2 48%,#c9a2ee 100%);--cr-rim:linear-gradient(90deg,#f6e2c2 0,#c79a5c 45%,#9fd4d8 72%,#e7c5f0 100%);--cr-mono:'JetBrains Mono','Pretendard Variable',Pretendard,ui-monospace,monospace;--cr-disp:'Inter Tight','Pretendard Variable',Pretendard,sans-serif;--cr-ease:cubic-bezier(.16,1,.3,1);background:var(--cr-n0)}
.cr-page .site-header{position:fixed;inset:0 0 auto;background:rgba(14,6,16,.86);border-bottom-color:#ffffff14}
.cr-page .site-header .container{background:transparent;box-shadow:none}
.cr-page.cr-at-hero .site-consult-bar{visibility:hidden;pointer-events:none}
.cr-sprite{position:absolute;width:0;height:0;overflow:hidden}
.cr-skip{position:fixed;z-index:2000;left:12px;top:-60px;padding:12px 18px;border-radius:8px;background:#fff;color:#000;font-weight:700}
.cr-skip:focus{top:12px}
.cr{position:relative;color:var(--cr-ink);background:var(--cr-ivory);font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',sans-serif;font-size:18px;line-height:1.75;word-break:keep-all;overflow-wrap:anywhere;overflow-x:clip;-webkit-font-smoothing:antialiased}
.cr *{box-sizing:border-box}
.cr [hidden]{display:none!important}
.cr :where(h1,h2,h3,h4,p,figure,dl,dd,ul,ol,blockquote,table){margin:0;padding:0}
.cr :where(h1,h2,h3,h4){font-weight:800;line-height:1.24;letter-spacing:-.04em;text-wrap:balance}
.cr :where(p){text-wrap:pretty}
.cr :where(ul,ol){list-style:none}
.cr :where(a){color:inherit;text-decoration:none}
.cr :where(button){font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
.cr :where(img,video,canvas){display:block;max-width:100%}
.cr :where(img,video){height:auto}
.cr em{font-style:normal;color:var(--cr-plum)}
.cr code{font-family:var(--cr-mono);font-size:max(14px,.88em);font-weight:500;letter-spacing:0;white-space:nowrap}
.cr :is(a,button,input,canvas,[tabindex]):focus-visible{outline:3px solid var(--cr-plum);outline-offset:5px;border-radius:6px}
.cr section[id]{scroll-margin-top:84px}
.cr-wrap{width:calc(100% - 12vw);max-width:1440px;margin-inline:auto}
.cr-sec{position:relative;padding-block:clamp(96px,10vw,170px)}
.cr-eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--cr-mono);font-size:14px;font-weight:600;line-height:1.5;letter-spacing:.16em;color:var(--cr-plum)}
.cr-eyebrow::before{content:"";width:28px;height:2px;background:currentColor;opacity:.7}
.cr-head{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-bottom:22px;margin-bottom:clamp(48px,6vw,90px);border-bottom:1px solid var(--cr-line);font-size:15px;line-height:1.5;color:var(--cr-ink2)}
.cr-head>span:first-child{display:inline-flex;align-items:center;gap:14px;font-family:var(--cr-mono);font-weight:600;letter-spacing:.12em;color:var(--cr-ink);white-space:nowrap}
.cr-head svg,.cr-card header svg{width:18px;height:24px;flex:none;overflow:visible}
.cr-head svg path,.cr-card header svg path{fill:none;stroke:var(--cr-plum);stroke-width:2;stroke-linejoin:round}
.cr h2{font-size:clamp(34px,4vw,64px)}
.cr-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:7vw;align-items:start}
.cr-split h3{font-size:clamp(28px,2.8vw,44px)}
.cr-prose{padding-top:8px}
.cr-prose p{max-width:640px;color:var(--cr-ink2);font-size:19px}
.cr-prose p+p{margin-top:22px}
.cr-lede{max-width:760px;margin-top:clamp(28px,3vw,44px);font-size:19px;color:var(--cr-fg2)}
.cr-pill{display:inline-flex;align-items:center;gap:22px;min-height:62px;padding:0 30px;border-radius:99px;background:var(--cr-champ);color:#1d1822!important;font-weight:700;font-size:17px;transition:transform .3s,background .3s}
.cr-pill:hover{transform:translateY(-3px);background:#f3dcc0}
.cr-textlink{display:inline-flex;align-items:center;gap:32px;padding:12px 0;border-bottom:1.5px solid currentColor;font-size:17px;font-weight:600;line-height:1.5}
.cr-textlink span{font-size:22px;transition:transform .3s}
.cr-textlink:hover span{transform:translateX(4px)}
.cr-footnote{margin-top:28px;max-width:880px;font-size:15px;line-height:1.7;color:var(--cr-ink3)}

/* rooms: plum night · ivory day */
:is(.cr-hero,.cr-question,.cr-brands,.cr-color,.cr-directions,.cr-sian,.cr-making,.cr-ending){background:var(--cr-n0);color:var(--cr-fg)}
:is(.cr-question,.cr-brands,.cr-color,.cr-directions,.cr-sian,.cr-making,.cr-ending) em{background:var(--cr-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
:is(.cr-question,.cr-brands,.cr-color,.cr-directions,.cr-making,.cr-ending) .cr-head{border-bottom-color:var(--cr-dline);color:var(--cr-fg2)}
:is(.cr-question,.cr-brands,.cr-color,.cr-directions,.cr-making,.cr-ending) .cr-head>span:first-child{color:var(--cr-fg)}
:is(.cr-question,.cr-brands,.cr-color,.cr-directions,.cr-making,.cr-ending) .cr-head svg path{stroke:var(--cr-champ)}
:is(.cr-question,.cr-brands,.cr-color,.cr-directions,.cr-making,.cr-ending) .cr-prose p{color:var(--cr-fg2)}
:is(.cr-question,.cr-brands,.cr-color,.cr-directions,.cr-sian,.cr-making,.cr-ending) .cr-eyebrow{color:var(--cr-champ)}
:is(.cr-question,.cr-brands,.cr-color,.cr-directions,.cr-making,.cr-ending) .cr-footnote{color:var(--cr-fg3)}
:is(.cr-hero,.cr-question,.cr-brands,.cr-color,.cr-directions,.cr-sian,.cr-making,.cr-ending) :is(a,button,input,canvas,[tabindex]):focus-visible{outline-color:var(--cr-lilac)}
:is(.cr-overview,.cr-shape,.cr-words,.cr-ads,.cr-consult,.cr-mobile,.cr-credits){background:var(--cr-ivory)}

/* reveal */
.cr-js .cr-rv{opacity:0;transform:translateY(34px);transition:opacity .9s var(--cr-ease),transform .9s var(--cr-ease);transition-delay:var(--d,0ms)}
.cr-js .cr-rv.is-in{opacity:1;transform:none}

/* ---------------------------------------------------------------- 00 HERO: keyhole → ECM → arch → light */
.cr-hero{position:relative}
html.cr-motion .cr-hero{height:560vh}
.cr-hero__pin{position:sticky;top:0;height:100vh;height:100svh;min-height:600px;overflow:hidden;background:var(--cr-n0)}
.cr-hero__cv{position:absolute;inset:0;width:100%;height:100%}
.cr-hero__still{display:none}
.cr-hero__shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#0e0610f2 0,#0e0610bf 26%,#0e061040 50%,#0e061000 62%),linear-gradient(0deg,#0e0610d9 0,#0e061066 18%,#0e061000 36%);opacity:var(--sh,1)}
.cr-hud{position:absolute;inset:0;pointer-events:none;font-family:var(--cr-mono);color:#efe2f4;text-shadow:0 1px 10px #0e0610}
.cr-hud__top{position:absolute;left:4vw;top:calc(85px + 3vh);display:flex;gap:16px;font-size:14px;font-weight:600;letter-spacing:.14em;opacity:.85}
.cr-hud__mode{padding:0 10px;border-radius:4px;background:#ead0a8;color:#1d1822}
.cr-hud__read{position:absolute;right:4vw;top:calc(85px + 3vh);display:flex;align-items:baseline;gap:10px;font-size:14px;font-weight:600;letter-spacing:.12em}
.cr-hud__read b{font-size:24px;font-weight:600;letter-spacing:0;color:#fff}
.cr-hero__title{position:absolute;left:6vw;top:50%;width:min(660px,48vw);transform:translateY(calc(-46% + var(--ty,0px)));color:var(--cr-fg)}
.cr-hero__top{display:flex;flex-wrap:wrap;gap:6px 22px;font-family:var(--cr-mono);font-size:14px;font-weight:600;letter-spacing:.12em;color:var(--cr-champ)}
.cr-hero__top span:first-child{font-family:'Pretendard Variable',Pretendard,sans-serif;letter-spacing:0;font-size:15px}
.cr-hero__title h1{display:grid;margin-top:clamp(20px,3vh,34px);font-size:clamp(64px,8.4vw,150px);font-weight:800;line-height:1.02;letter-spacing:-.055em}
.cr-hero__title h1 span:last-child{padding-left:.55em;background:var(--cr-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cr-hero__lead{max-width:560px;margin-top:clamp(18px,3vh,30px);font-size:clamp(17px,1.3vw,20px);line-height:1.65;color:var(--cr-fg2)}
.cr-hero__lead span{display:inline-block;margin-top:8px;font-size:15px;color:var(--cr-fg3)}
.cr-hero__down{display:inline-flex;align-items:center;gap:12px;margin-top:26px;padding:10px 18px;border-radius:99px;border:1px solid #f7f2f555;font-size:15px;font-weight:700}
.cr-hero__beats{position:absolute;left:6vw;bottom:calc(4vh + 66px);width:min(640px,58vw);height:118px}
.cr-beat{position:absolute;left:0;bottom:0;font-size:clamp(19px,1.7vw,26px);font-weight:700;line-height:1.5;letter-spacing:-.02em;color:#fbf6fa;text-shadow:0 2px 14px #0e0610;opacity:0;transform:translateY(18px);transition:opacity .6s,transform .6s;text-wrap:balance}
.cr-beat.is-on{opacity:1;transform:none}
.cr-beat em{background:var(--cr-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cr-beat__tag{display:block;margin-bottom:8px;font-family:var(--cr-mono);font-size:14px;font-weight:600;letter-spacing:.16em;color:var(--cr-champ)}
.cr-hero__steps{position:absolute;left:6vw;right:calc(6vw + 150px);bottom:3vh;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700}
.cr-hero__steps li[data-h]{padding:3px 12px;border-radius:99px;border:1px solid #f7f2f533;color:var(--cr-fg3);transition:background .4s,color .4s,border-color .4s}
.cr-hero__steps li.is-on{background:var(--cr-champ);border-color:var(--cr-champ);color:#1d1822}
.cr-hero__hint{margin-left:auto;font-family:var(--cr-mono);font-weight:600;letter-spacing:.2em;color:var(--cr-fg3)}
.cr-hero.is-film .cr-hero__title{pointer-events:none}
html:not(.cr-motion) .cr-hero__pin{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:4vw;height:auto;min-height:100svh;padding:130px 6vw 90px}
html:not(.cr-motion) .cr-hero__still{display:block;grid-column:2;grid-row:1;justify-self:center;width:min(100%,360px)}
html:not(.cr-motion) .cr-hero__still svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 0 40px #ead0a840)}
html:not(.cr-motion) .cr-hero__title{position:relative;inset:auto;grid-column:1;grid-row:1;width:auto;transform:none;opacity:1}
html:not(.cr-motion) :is(.cr-hero__cv,.cr-hero__shade,.cr-hud,.cr-hero__beats,.cr-hero__steps){display:none}

/* ---------------------------------------------------------------- 01 OVERVIEW */
.cr-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-top:clamp(60px,6vw,96px);padding-top:30px;border-top:1px solid var(--cr-line)}
.cr-meta dt{font-family:var(--cr-mono);font-size:14px;font-weight:600;letter-spacing:.14em;color:var(--cr-plum)}
.cr-meta dd{margin:10px 0 0;font-size:16px;line-height:1.65;font-weight:600}
.cr-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(60px,6vw,90px)}
.cr-stats li{display:grid;align-content:start;gap:8px;padding:0 26px;border-right:1px solid var(--cr-line)}
.cr-stats li:first-child{padding-left:0}
.cr-stats li:last-child{border-right:0}
.cr-stats strong{display:flex;align-items:baseline;gap:6px;font-family:var(--cr-disp);font-size:clamp(52px,5.4vw,92px);font-weight:300;line-height:1;letter-spacing:-.04em;color:var(--cr-ink)}
.cr-stats small{font-family:'Pretendard Variable',Pretendard,sans-serif;font-size:20px;font-weight:700;letter-spacing:0;color:var(--cr-plum)}
.cr-stats b{font-size:17px}
.cr-stats li>span{font-size:15px;line-height:1.6;color:var(--cr-ink3)}
.cr-logos{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-rows:auto auto;align-items:stretch;gap:0;margin-top:clamp(70px,7vw,110px);overflow:hidden;border-radius:24px;box-shadow:inset 0 0 0 1px var(--cr-line)}
.cr-logos__night,.cr-logos__day{display:grid;place-items:center;min-height:clamp(180px,18vw,260px);padding:clamp(28px,4vw,60px)}
.cr-logos__night{background:radial-gradient(70% 90% at 50% 100%,#3a1d44 0,#0e0610 70%)}
.cr-logos__night img{width:min(100%,360px)}
.cr-logos__day{display:flex;align-items:center;justify-content:center;gap:clamp(14px,1.6vw,24px);background:var(--cr-paper)}
.cr-logos__flower{width:clamp(34px,3.4vw,52px);height:auto;fill:var(--cr-navy)}
.cr-logos__word{width:min(70%,300px);height:auto;fill:var(--cr-navy)}
.cr-logos__x{display:grid;place-items:center;width:clamp(44px,5vw,72px);background:linear-gradient(90deg,#0e0610 50%,var(--cr-paper) 50%);font-family:var(--cr-disp);font-size:28px;font-weight:300;color:var(--cr-gold)}
.cr-logos figcaption{grid-column:1/-1;padding:18px clamp(20px,3vw,40px);background:#fff;font-size:16px;color:var(--cr-ink2)}
.cr-timeline{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;margin-top:clamp(60px,6vw,90px);position:relative}
.cr-timeline::before{content:"";position:absolute;left:0;right:0;top:34px;height:1px;background:var(--cr-line)}
.cr-timeline li{position:relative;display:grid;align-content:start;gap:8px;padding-top:56px}
.cr-timeline li::before{content:"";position:absolute;left:0;top:28px;width:13px;height:13px;border-radius:50%;background:var(--cr-ivory);box-shadow:inset 0 0 0 2px var(--cr-plum)}
.cr-timeline li:nth-child(4)::before{background:var(--cr-plum)}
.cr-timeline time{position:absolute;left:0;top:0;font-family:var(--cr-mono);font-size:15px;font-weight:600;color:var(--cr-plum)}
.cr-timeline b{font-size:17px;line-height:1.4}
.cr-timeline p{font-size:15px;line-height:1.6;color:var(--cr-ink2)}

/* ---------------------------------------------------------------- 02 QUESTION: three questions on a landing spine */
.cr-quote{max-width:1180px;font-size:clamp(34px,4.4vw,72px);font-weight:800;line-height:1.24;letter-spacing:-.045em}
.cr-quote span{color:#f7f2f52e;transition:color .5s}
.cr-quote span.is-on{color:var(--cr-fg)}
.cr-quote span.is-on:nth-last-child(-n+2){color:var(--cr-champ)}
.cr-qmap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);gap:6vw;margin-top:clamp(60px,6vw,100px)}
.cr-qmap__list{display:grid;gap:clamp(30px,4vw,56px)}
.cr-qcard{position:relative;display:grid;align-content:start;gap:14px;min-height:min(78vh,720px);padding:clamp(26px,3vw,44px);border-radius:24px;background:linear-gradient(180deg,#1b0d1f 0,#120814 100%);box-shadow:inset 0 0 0 1px #f7f2f51c;transition:box-shadow .5s,background .5s}
.cr-qcard.is-active{box-shadow:inset 0 0 0 1px #ead0a880,0 40px 90px -50px #c49be680}
.cr-qcard__no{font-family:var(--cr-mono);font-size:15px;font-weight:600;letter-spacing:.14em;color:var(--cr-champ)}
.cr-qcard h3{font-size:clamp(30px,3vw,48px)}
.cr-qcard p{max-width:560px;font-size:18px;color:var(--cr-fg2)}
.cr-qcard__at{justify-self:start;padding:6px 14px;border-radius:99px;background:#f7f2f514;font-size:15px;font-weight:700;color:var(--cr-lilac)}
.cr-qcard__img{width:100%;margin-top:10px;border-radius:14px;aspect-ratio:16/10;object-fit:cover;box-shadow:0 30px 60px -30px #000}
.cr-qcard--start{min-height:min(60vh,540px)}
.cr-spine{position:sticky;top:110px;align-self:start;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:16px;height:calc(100vh - 170px);max-height:760px}
.cr-spine__bar{display:flex;flex-direction:column;gap:3px;width:min(100%,360px);padding:10px;border-radius:18px;background:#160a18;box-shadow:inset 0 0 0 1px #f7f2f51f}
.cr-spine__bar li{flex:var(--h) 1 0;min-height:24px;display:flex;align-items:center;padding:0 12px;border-radius:6px;font-size:14px;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;transition:opacity .5s,box-shadow .5s,transform .5s;opacity:.5}
.cr-spine__bar li.is-night{background:#2d1733;color:#e8dbee}
.cr-spine__bar li.is-pearl{background:#e9dff0;color:#2d1733}
.cr-spine__bar li.is-day{background:#ebe2d6;color:#2d2530}
.cr-spine__bar li.is-on{opacity:1;box-shadow:0 0 0 2px var(--cr-champ);transform:translateX(6px)}
.cr-spine figcaption{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;color:var(--cr-fg3)}
.cr-spine figcaption i{display:inline-block;width:12px;height:12px;margin-right:6px;border-radius:3px;vertical-align:-1px}
.cr-spine figcaption i.is-night{background:#2d1733;box-shadow:inset 0 0 0 1px #f7f2f540}
.cr-spine figcaption i.is-day{background:#ebe2d6}

/* ---------------------------------------------------------------- 03 TWO BRANDS: product night, clinic day */
.cr-duo{position:relative;margin-top:clamp(60px,6vw,96px)}
html.cr-motion .cr-duo{height:240vh}
.cr-duo__pin{position:sticky;top:0;height:100vh;height:100svh;min-height:560px;overflow:hidden}
html:not(.cr-motion) .cr-duo__pin{position:relative;height:auto;min-height:0;display:grid;grid-template-columns:1fr 1fr}
.cr-duo__night,.cr-duo__day{position:absolute;inset:0;display:flex;align-items:center}
html:not(.cr-motion) .cr-duo__night,html:not(.cr-motion) .cr-duo__day{position:relative;min-height:640px}
.cr-duo__night{justify-content:flex-start;background:radial-gradient(60% 70% at 25% 60%,#3a1d44 0,#160a18 55%,#0e0610 100%)}
.cr-duo__day{justify-content:flex-end;background:radial-gradient(60% 70% at 75% 40%,#fdfaf6 0,#f5f0e9 55%,#ebe2d6 100%);color:var(--cr-ink);clip-path:inset(0 0 0 calc(var(--x,1) * 100%))}
html:not(.cr-motion) .cr-duo__day{clip-path:none}
.cr-duo__in{display:grid;align-content:center;justify-items:start;gap:18px;width:min(46vw,620px);padding:120px 6vw 100px}
.cr-duo__day .cr-duo__in{justify-items:end;text-align:right}
.cr-duo__day .cr-eyebrow{color:var(--cr-plum)}
.cr-duo__mark{width:min(100%,380px)}
.cr-duo__flower{width:54px;height:auto;fill:var(--cr-navy)}
.cr-duo__logo{width:min(100%,300px);height:auto;fill:var(--cr-navy)}
.cr-duo__words{font-size:clamp(20px,1.8vw,28px);font-weight:700;line-height:1.5;letter-spacing:-.02em}
.cr-duo__night .cr-duo__words{color:var(--cr-fg2)}
.cr-duo__day .cr-duo__words{color:var(--cr-ink2)}
.cr-duo__boxes{position:relative;width:min(100%,520px);height:clamp(150px,15vw,230px);margin-top:10px}
.cr-duo__boxes img{position:absolute;width:44%;border-radius:4px;box-shadow:0 30px 50px -20px #000;transform:rotate(var(--br))}
.cr-duo__boxes img:nth-child(1){left:0;top:30%;--br:-8deg;z-index:2}
.cr-duo__boxes img:nth-child(2){left:28%;top:2%;--br:0deg;z-index:1}
.cr-duo__boxes img:nth-child(3){left:56%;top:32%;--br:8deg;z-index:3}
.cr-duo__arch{width:min(100%,300px);aspect-ratio:3/4;overflow:hidden;border-radius:999px 999px 10px 10px;box-shadow:0 30px 60px -30px #2d1733aa}
.cr-duo__arch img{width:100%;height:100%;object-fit:cover}
.cr-duo__line{position:absolute;top:0;bottom:0;left:calc(var(--x,1) * 100%);display:grid;grid-template-rows:auto 1fr auto;justify-items:center;width:0;pointer-events:none}
.cr-duo__line i{width:1px;background:linear-gradient(180deg,transparent,#ead0a8 20%,#ead0a8 80%,transparent)}
.cr-duo__line span{transform:translateX(-50%);margin-left:0;padding:110px 0 0;font-family:var(--cr-mono);font-size:14px;font-weight:600;letter-spacing:.2em;color:var(--cr-champ);white-space:nowrap}
.cr-duo__line span:first-child{transform:translateX(calc(-100% - 14px))}
.cr-duo__line span:last-child{padding:0 0 90px;transform:translateX(14px);color:var(--cr-plum)}
html:not(.cr-motion) .cr-duo__line{display:none}
.cr-brandcols{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:clamp(70px,7vw,110px)}
.cr-brandcol{padding:clamp(26px,3vw,44px);border-radius:24px}
.cr-brandcol--night{background:#160a18;box-shadow:inset 0 0 0 1px #f7f2f51f}
.cr-brandcol--day{background:var(--cr-ivory);color:var(--cr-ink)}
.cr-brandcol h3{font-size:clamp(24px,2.2vw,34px)}
.cr-brandcol h3 small{display:block;margin-bottom:8px;font-family:var(--cr-mono);font-size:14px;font-weight:600;letter-spacing:.16em;color:var(--cr-champ)}
.cr-brandcol--day h3 small{color:var(--cr-plum)}
.cr-brandcol ul{display:grid;gap:18px;margin-top:26px}
.cr-brandcol li{display:grid;gap:4px;padding-top:16px;border-top:1px solid #f7f2f51f}
.cr-brandcol--day li{border-top-color:var(--cr-line)}
.cr-brandcol b{font-size:18px}
.cr-brandcol p{font-size:16px;line-height:1.65;color:var(--cr-fg2)}
.cr-brandcol--day p{color:var(--cr-ink2)}
.cr-switch{margin-top:clamp(56px,6vw,90px)}
.cr-switch ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.cr-switch li{position:relative}
.cr-switch img{width:100%;border-radius:12px;aspect-ratio:16/10;object-fit:cover;box-shadow:0 0 0 1px #f7f2f51c}
.cr-switch li span{display:block;margin-top:10px;font-family:var(--cr-mono);font-size:14px;font-weight:600;letter-spacing:.08em;color:var(--cr-champ)}
.cr-switch figcaption{max-width:860px;margin-top:22px;font-size:17px;color:var(--cr-fg2)}

/* ---------------------------------------------------------------- 04 SHAPE: keyhole ⇄ arch */
.cr-morph{position:relative;margin-top:clamp(56px,6vw,90px)}
html.cr-motion .cr-morph{height:280vh}
.cr-morph__pin{position:sticky;top:0;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:5vw;align-items:center;width:calc(100% - 12vw);max-width:1440px;height:100vh;height:100svh;min-height:600px;margin-inline:auto;padding:100px 0 60px}
html:not(.cr-motion) .cr-morph__pin{position:relative;height:auto;min-height:0;padding:0}
.cr-morph__stage{position:relative;display:grid;place-items:center;height:min(76vh,720px);border-radius:28px;background:radial-gradient(60% 60% at 50% 45%,color-mix(in srgb,#3a1d44 calc((1 - var(--m,0)) * 100%),#d8c7b4) 0,color-mix(in srgb,#0e0610 calc((1 - var(--m,0)) * 100%),#c9b8a6) 100%);overflow:hidden}
html:not(.cr-motion) .cr-morph__stage{height:min(80vw,600px)}
.cr-morph__svg{width:min(78%,560px);height:auto;overflow:visible}
.cr-morph__grid path{fill:none;stroke:#f7f2f51f;stroke-width:.5;stroke-dasharray:2 3}
.cr-morph__fill{fill:color-mix(in srgb,#ead0a8 calc((1 - var(--m,0)) * 100%),#fdfaf6);filter:drop-shadow(0 0 18px #ead0a8aa)}
.cr-morph__rim{fill:none;stroke:url(#cr-rim);stroke-width:1.2}
.cr-morph__dims line{stroke:var(--cr-champ);stroke-width:.8}
.cr-morph__dims text{fill:#f7f2f5;font-family:var(--cr-mono);font-size:8px;font-weight:600;text-anchor:middle}
.cr-morph__c{fill:var(--cr-champ)}
.cr-morph__read{position:absolute;left:24px;top:20px;display:flex;align-items:baseline;gap:6px;font-family:var(--cr-mono);font-size:14px;font-weight:600;letter-spacing:.12em;color:#f7f2f5;mix-blend-mode:difference}
.cr-morph__read span:first-child{margin-right:8px;font-family:'Pretendard Variable',Pretendard,sans-serif;font-size:16px;letter-spacing:0}
.cr-morph__read b{font-size:24px}
.cr-morph__range{position:absolute;left:24px;right:24px;bottom:22px;width:auto;accent-color:var(--cr-champ)}
.cr-morph__steps{display:grid;gap:12px}
.cr-morph__steps li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 18px;padding:22px 24px;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1px var(--cr-line);opacity:.5;transition:opacity .5s,box-shadow .5s}
.cr-morph__steps li.is-on{opacity:1;box-shadow:inset 0 0 0 2px var(--cr-plum)}
.cr-morph__steps span{grid-row:span 2;font-family:var(--cr-mono);font-size:15px;font-weight:600;color:var(--cr-plum)}
.cr-morph__steps h3{font-size:22px}
.cr-morph__steps p{font-size:16px;line-height:1.65;color:var(--cr-ink2)}
.cr-uses{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:clamp(56px,6vw,90px)}
.cr-uses li{display:grid;gap:4px}
.cr-uses img{width:100%;margin-bottom:8px;border-radius:12px;aspect-ratio:16/10;object-fit:cover;box-shadow:0 20px 40px -24px #2d1733aa}
.cr-uses b{font-size:17px}
.cr-uses span{font-size:15px;color:var(--cr-ink3)}

/* ---------------------------------------------------------------- 05 COLOR */
.cr-mood{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:clamp(120px,11vw,180px);gap:14px;margin-top:clamp(56px,6vw,90px)}
.cr-mood__item{position:relative;overflow:hidden;border-radius:16px;background:#160a18}
.cr-mood__item img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--cr-ease)}
.cr-mood__item:hover img{transform:scale(1.05)}
.cr-mood__item figcaption{position:absolute;left:0;right:0;bottom:0;display:grid;gap:2px;padding:40px 18px 16px;background:linear-gradient(0deg,#0e0610e6,#0e061000);font-size:15px;line-height:1.5;color:var(--cr-fg2)}
.cr-mood__item figcaption b{font-size:17px;color:#fff}
.cr-mood__item figcaption span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cr-mood__item--1{grid-column:1/4;grid-row:span 2}
.cr-mood__item--2{grid-column:4/6;grid-row:span 2}
.cr-mood__item--3{grid-column:6/7;grid-row:span 2}
.cr-mood__item--4{grid-column:1/3;grid-row:span 2}
.cr-mood__item--5{grid-column:3/5;grid-row:span 2}
.cr-mood__item--6{grid-column:5/7;grid-row:span 2}
.cr-rimbar{display:grid;gap:14px;margin-top:clamp(56px,6vw,90px)}
.cr-rimbar p{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px}
.cr-rimbar p b{font-family:var(--cr-mono);font-size:16px;font-weight:600;letter-spacing:.12em;color:var(--cr-champ)}
.cr-rimbar p span{font-size:16px;color:var(--cr-fg2)}
.cr-rimbar__bar{height:clamp(56px,6vw,90px);border-radius:16px;background:var(--cr-rim)}
.cr-rimbar ol{display:flex;justify-content:space-between;gap:10px;color:var(--cr-fg2)}
.cr-swatches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:clamp(56px,6vw,90px)}
.cr-swatches__group{padding:clamp(22px,2.4vw,34px);border-radius:22px;background:#160a18;box-shadow:inset 0 0 0 1px #f7f2f51c}
.cr-swatches__title{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.cr-swatches__title b{font-family:var(--cr-mono);font-size:15px;font-weight:600;letter-spacing:.14em;color:var(--cr-champ)}
.cr-swatches__title span{font-size:22px;font-weight:800}
.cr-swatches__desc{margin-top:8px;font-size:16px;line-height:1.65;color:var(--cr-fg2)}
.cr-swatches ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:20px}
.cr-swatches button{display:grid;align-content:space-between;gap:16px;width:100%;min-height:128px;padding:14px;border-radius:14px;background:var(--c);color:var(--fg);text-align:left;box-shadow:inset 0 0 0 1px #f7f2f524;transition:transform .3s}
.cr-swatches button:hover{transform:translateY(-4px)}
.cr-swatches button b{font-size:15px;font-weight:800;line-height:1.3}
.cr-swatches button code{font-size:14px}
.cr-swatches button span{font-size:14px;font-weight:600;opacity:.88}
.cr-ratio{margin-top:clamp(56px,6vw,90px)}
.cr-ratio__title,.cr-contrast__title,.cr-review__title,.cr-revs__title{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px}
.cr-ratio__title b,.cr-contrast__title b,.cr-review__title b,.cr-revs__title b{font-family:var(--cr-mono);font-size:16px;font-weight:600;letter-spacing:.12em;color:var(--cr-champ)}
.cr-ratio__title span,.cr-contrast__title span{font-size:16px;color:var(--cr-fg2)}
.cr-ratio__bar{display:flex;gap:4px;margin-top:16px;min-height:96px}
.cr-ratio__bar li{flex:var(--w) 1 0;min-width:70px;display:flex;align-items:flex-end;padding:12px;border-radius:12px;background:var(--c);color:var(--fg);box-shadow:inset 0 0 0 1px #f7f2f51f}
.cr-ratio__bar span{display:grid;font-family:var(--cr-mono);font-size:14px;font-weight:600;line-height:1.4}
.cr-ratio__bar b{font-family:'Pretendard Variable',Pretendard,sans-serif;font-size:14px;font-weight:800}
.cr-contrast{margin-top:clamp(56px,6vw,90px)}
.cr-contrast__table{display:grid;margin-top:16px;border-top:1px solid #f7f2f52e}
.cr-contrast__row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 110px 120px;gap:20px;align-items:center;padding:12px 0;border-bottom:1px solid #f7f2f51c;font-size:16px}
.cr-contrast__row--head{font-family:var(--cr-mono);font-size:14px;font-weight:600;letter-spacing:.1em;color:var(--cr-fg3)}
.cr-contrast__row i{display:inline-flex;align-items:center;padding:6px 14px;border-radius:8px;background:var(--bg);color:var(--fg);font-style:normal;font-weight:800;box-shadow:inset 0 0 0 1px #f7f2f524}
.cr-contrast__row b{font-family:var(--cr-mono);font-size:16px;font-weight:600}
.cr-contrast__row .is-ok{color:#bfe8c8;font-weight:700}
.cr-contrast__row .is-no{color:#f0b3c4;font-weight:700}
.cr-rules{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:clamp(56px,6vw,90px)}
.cr-rules li{display:grid;align-content:start;gap:8px;padding:24px;border-radius:18px;background:#160a18;box-shadow:inset 0 0 0 1px #f7f2f51c}
.cr-rules span{font-family:var(--cr-mono);font-size:14px;font-weight:600;color:var(--cr-champ)}
.cr-rules b{font-size:18px;line-height:1.4}
.cr-rules p{font-size:15px;line-height:1.65;color:var(--cr-fg2)}

/* ---------------------------------------------------------------- 06 WORDS */
.cr-pairs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:clamp(56px,6vw,90px)}
.cr-pair{display:grid;align-content:start;gap:12px;padding:clamp(24px,2.6vw,36px);border-radius:22px;background:#fff;box-shadow:inset 0 0 0 1px var(--cr-line)}
.cr-pair:last-child:nth-child(odd){grid-column:1/-1}
.cr-pair__no{font-family:var(--cr-mono);font-size:14px;font-weight:600;color:var(--cr-plum)}
.cr-pair__kind{font-size:15px;font-weight:700;color:var(--cr-ink3)}
.cr-pair__bad{font-size:19px;font-weight:600;color:var(--cr-ink3)}
.cr-pair__bad s{text-decoration:none;background:linear-gradient(#c0496f,#c0496f) no-repeat 0 55%/0 2px;transition:background-size .8s var(--cr-ease) .4s}
.cr-pair.is-in .cr-pair__bad s{background-size:100% 2px}
.cr-pair__good{padding:14px 16px;border-radius:12px;background:#f3ecf6;font-size:19px;font-weight:700;line-height:1.55;color:var(--cr-ink);box-shadow:inset 3px 0 0 var(--cr-plum)}
.cr-pair__why{font-size:15px;line-height:1.65;color:var(--cr-ink2)}
.cr-review{margin-top:clamp(56px,6vw,90px);padding:clamp(24px,3vw,44px);border-radius:24px;background:var(--cr-paper);box-shadow:inset 0 0 0 1px var(--cr-line)}
.cr-review__title b{color:var(--cr-plum)}
.cr-review__title span{font-size:16px;color:var(--cr-ink2)}
.cr-review ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:22px;counter-reset:rv}
.cr-review li{position:relative;display:grid;align-content:start;gap:6px;padding:18px 18px 18px 0;border-top:2px solid var(--cr-plum)}
.cr-review li:nth-child(3){border-top-style:dashed}
.cr-review li span{font-family:var(--cr-mono);font-size:14px;font-weight:600;color:var(--cr-plum)}
.cr-review li b{font-size:18px}
.cr-review li p{font-size:15px;line-height:1.65;color:var(--cr-ink2)}

/* ---------------------------------------------------------------- 07 DIRECTIONS */
.cr-dirs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,36px);margin-top:clamp(56px,6vw,90px)}
.cr-dir{display:grid;align-content:start;gap:24px}
.cr-dir__phone{position:relative;width:min(100%,300px);margin:0 auto;padding:9px;border-radius:40px;background:#1a121c;box-shadow:0 40px 80px -36px #000,inset 0 0 0 1px #f7f2f52a;transition:transform .6s var(--cr-ease),box-shadow .6s}
.cr-dir.is-pick .cr-dir__phone{box-shadow:0 40px 90px -30px #c49be699,0 0 0 2px var(--cr-champ)}
.cr-dir:not(.is-pick) .cr-dir__phone{transform:scale(.95)}
.cr-dir__screen{overflow:hidden;border-radius:32px;aspect-ratio:390/844;background:#000}
.cr-dir__screen>img{width:100%;height:100%;object-fit:cover;object-position:top}
.cr-mock{position:relative;height:100%;display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;font-family:'Pretendard Variable',Pretendard,sans-serif}
.cr-mock__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cr-mock__bar{position:relative;display:flex;justify-content:space-between;align-items:center;padding:34px 16px 10px}
.cr-mock__bar svg{width:76px;height:auto}
.cr-mock__bar span{padding:5px 11px;border-radius:99px;font-size:14px;font-weight:700}
.cr-mock__copy{position:relative;display:grid;align-content:start;gap:10px;padding:22px 18px 0}
.cr-mock__kicker{font-family:var(--cr-mono);font-size:14px;font-weight:600;letter-spacing:.1em}
.cr-mock__h{font-size:clamp(22px,2.2vw,28px);font-weight:800;line-height:1.28;letter-spacing:-.04em}
.cr-mock__s{font-size:14px;font-weight:600;line-height:1.5}
.cr-mock__chips{display:flex;flex-wrap:wrap;gap:6px}
.cr-mock__chips span{padding:4px 10px;border-radius:99px;font-size:14px;font-weight:700}
.cr-mock__cta{position:relative;justify-self:stretch;margin:0 16px 30px;padding:14px;border-radius:99px;text-align:center;font-size:15px;font-weight:800}
.cr-mock--a{color:#1b2a44}
.cr-mock--a .cr-mock__bar svg{fill:#1b2a44}
.cr-mock--a .cr-mock__bar span{background:#1b2a44;color:#fff}
.cr-mock--a .cr-mock__kicker{color:#4a6283}
.cr-mock--a .cr-mock__chips span{box-shadow:inset 0 0 0 1.5px #1b2a4466;color:#1b2a44;background:#ffffffb3}
.cr-mock--a .cr-mock__cta{background:#1b2a44;color:#fff}
.cr-mock--b{color:#2b231d}
.cr-mock--b .cr-mock__bar svg{fill:#2b231d}
.cr-mock--b .cr-mock__bar span{background:#2b231d;color:#f5ede2}
.cr-mock--b .cr-mock__kicker{color:#7a5f45}
.cr-mock--b .cr-mock__cta{background:#2b231d;color:#f5ede2}
.cr-dir__body{display:grid;gap:12px}
.cr-dir__tag{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-family:var(--cr-mono);font-size:14px;font-weight:600;letter-spacing:.1em;color:var(--cr-fg3)}
.cr-dir__tag b{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#f7f2f51a;color:var(--cr-fg);font-size:15px}
.cr-dir.is-pick .cr-dir__tag b{background:var(--cr-champ);color:#1d1822}
.cr-dir__tag em{padding:4px 12px;border-radius:99px;background:var(--cr-champ);-webkit-background-clip:border-box;background-clip:border-box;color:#1d1822!important;-webkit-text-fill-color:#1d1822;font-family:'Pretendard Variable',Pretendard,sans-serif;font-size:14px;font-weight:800;letter-spacing:0}
.cr-dir h3{font-size:clamp(24px,2.2vw,32px)}
.cr-dir__good,.cr-dir__bad{display:grid;gap:4px;font-size:16px;line-height:1.65;color:var(--cr-fg2)}
.cr-dir__good span,.cr-dir__bad span{font-size:14px;font-weight:800;color:var(--cr-champ)}
.cr-dir__bad span{color:var(--cr-rose)}
.cr-dir.is-pick .cr-dir__bad span{color:var(--cr-lilac)}
.cr-score{display:grid;max-width:880px;margin-top:clamp(56px,6vw,90px);border-top:1px solid #f7f2f52e}
.cr-score__row{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,90px);gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid #f7f2f51c;font-size:16px}
.cr-score__row--head{font-family:var(--cr-mono);font-size:14px;font-weight:600;letter-spacing:.1em;color:var(--cr-fg3)}
.cr-score__row--head span:not(:first-child),.cr-score__dot{justify-self:center}
.cr-score__row--head span:last-child{color:var(--cr-champ)}
.cr-score__dot{display:inline-flex;gap:5px}
.cr-score__dot i{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #f7f2f566}
.cr-score__dot[data-v="1"] i:first-child,.cr-score__dot[data-v="2"] i{background:var(--cr-champ);box-shadow:none}
.cr-return{max-width:880px;margin-top:clamp(48px,5vw,80px);padding:28px 30px;border-radius:20px;background:linear-gradient(120deg,#2a1830,#160a18);font-size:18px;line-height:1.7;color:var(--cr-fg)}
.cr-return .cr-eyebrow{display:flex;margin-bottom:10px}

/* ---------------------------------------------------------------- 08 ADS */
.cr-feed{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,30px);width:calc(100% - 8vw);max-width:1600px;margin:clamp(56px,6vw,90px) auto 0}
.cr-feed li{display:grid;align-content:start;gap:10px}
.cr-feed img{width:100%;filter:drop-shadow(0 30px 40px #2d173340)}
.cr-feed b{margin-top:10px;font-size:18px}
.cr-feed p{font-size:15px;line-height:1.65;color:var(--cr-ink2)}
.cr-reels{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(18px,3vw,48px);align-items:start;margin-top:clamp(70px,7vw,120px)}
.cr-reel{display:grid;gap:18px}
.cr-reel__phone{position:relative;width:min(100%,300px);padding:9px;border-radius:40px;background:#1a121c;box-shadow:0 40px 80px -36px #2d1733b3}
.cr-reel__phone video{width:100%;aspect-ratio:9/16;border-radius:32px;background:#000;object-fit:cover}
.cr-reel figcaption{display:grid;justify-items:start;gap:8px;font-size:15px;line-height:1.65;color:var(--cr-ink2)}
.cr-reel figcaption b{font-size:19px;color:var(--cr-ink)}
.cr-safe{position:absolute;inset:9px;border-radius:32px;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .4s}
.cr-reel.is-safe .cr-safe{opacity:1}
.cr-safe i{position:absolute;display:grid;place-items:center;background:repeating-linear-gradient(135deg,#e597bf55 0 6px,#e597bf22 6px 12px);font-style:normal;font-size:14px;font-weight:800;color:#fff;text-shadow:0 1px 6px #000}
.cr-safe__t{left:0;right:0;top:0;height:14%}
.cr-safe__b{left:0;right:0;bottom:0;height:35%}
.cr-safe__l{left:0;top:14%;bottom:35%;width:6%}
.cr-safe__r{right:0;top:14%;bottom:35%;width:6%}
.cr-safe__btn,.cr-reel__sound{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:99px;box-shadow:inset 0 0 0 1.5px var(--cr-plum);font-size:15px;font-weight:800;color:var(--cr-plum)}
.cr-safe__btn[aria-pressed="true"],.cr-reel__sound[aria-pressed="true"]{background:var(--cr-plum);color:#fff}
.cr-revs{padding:clamp(22px,2.6vw,36px);border-radius:22px;background:#fff;box-shadow:inset 0 0 0 1px var(--cr-line)}
.cr-revs__title b{color:var(--cr-plum)}
.cr-revs__title span{font-size:16px;color:var(--cr-ink2)}
.cr-revs ol{display:grid;gap:2px;margin-top:16px}
.cr-revs li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;padding:12px 0;border-top:1px solid var(--cr-line)}
.cr-revs li span{font-family:var(--cr-mono);font-size:14px;font-weight:600;color:var(--cr-plum)}
.cr-revs li p{font-size:15px;line-height:1.65;color:var(--cr-ink2)}
.cr-board{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:12px;margin-top:clamp(56px,6vw,90px)}
.cr-board li{display:grid;align-content:start;gap:6px}
.cr-board img{width:100%;border-radius:12px;aspect-ratio:9/16;object-fit:cover;background:#1a121c}
.cr-board time{font-family:var(--cr-mono);font-size:14px;font-weight:600;color:var(--cr-plum)}
.cr-board span{font-size:14px;line-height:1.5;color:var(--cr-ink2)}

/* ---------------------------------------------------------------- 09 LANDING: recording */
.cr-sian{position:relative;padding-block:clamp(90px,9vw,150px) clamp(70px,7vw,110px);background:radial-gradient(45% 45% at 72% 30%,#3a1d44 0,transparent 70%),radial-gradient(40% 40% at 20% 85%,#3a2a0c55 0,transparent 70%),var(--cr-n0)}
.cr-sian__inner{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.6fr);gap:clamp(30px,4vw,72px);align-items:center;width:calc(100% - 8vw);max-width:1600px;margin-inline:auto}
.cr-sian__info{position:relative}
.cr-sian__letter{position:absolute;right:0;top:-48px;font-family:var(--cr-disp);font-size:clamp(130px,13vw,220px);font-weight:200;line-height:.8;opacity:.12;pointer-events:none;color:var(--cr-champ)}
.cr-sian__status{display:inline-block;padding:6px 14px;border-radius:99px;font-size:14px;font-weight:800;letter-spacing:.04em;background:var(--cr-champ);color:#1d1822}
.cr-sian__info h3{margin-top:20px;font-size:clamp(22px,2vw,32px)}
.cr-sian__info h3 small{display:block;margin-bottom:12px;font-family:var(--cr-disp);font-size:clamp(34px,3.2vw,56px);font-weight:300;line-height:1;letter-spacing:-.03em;background:var(--cr-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cr-sian__info>p{margin-top:20px;font-size:17px;color:var(--cr-fg2)}
.cr-sian__points{display:grid;gap:10px;margin-top:24px}
.cr-sian__points li{position:relative;padding-left:24px;font-size:16px;font-weight:600;line-height:1.55}
.cr-sian__points li::before{content:"";position:absolute;left:2px;top:.36em;width:9px;height:13px;border-radius:5px 5px 1px 1px;border:2px solid var(--cr-champ)}
.cr-sian__chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:26px}
.cr-sian__chips i{width:26px;height:26px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px #f7f2f540}
.cr-sian__chips span{margin-left:10px;font-size:14px;font-weight:700;opacity:.9}
.cr-sian__open{display:inline-flex;align-items:center;gap:14px;min-height:48px;margin-top:30px;padding:0 22px;border-radius:99px;font-size:16px;font-weight:800;background:var(--cr-champ);color:#1d1822!important;transition:transform .3s}
.cr-sian__open:hover{transform:translateY(-3px)}
.cr-sian__device{position:relative;padding:0 clamp(50px,7vw,130px) 0 0}
.cr-browser{overflow:hidden;border-radius:16px;background:#111;box-shadow:0 50px 100px -40px #000,0 0 0 1px #f7f2f524}
.cr-browser__bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;height:40px;padding:0 16px;background:#1d1520}
.cr-browser__bar>span:first-child{display:flex;gap:6px}
.cr-browser__bar>span:first-child i{width:10px;height:10px;border-radius:50%;background:#ffffff2e}
.cr-browser__url{justify-self:center;padding:3px 40px;border-radius:99px;background:#ffffff12;color:#ddd3e2;font-family:var(--cr-mono);font-size:14px;font-weight:500}
.cr-browser__live{font-family:var(--cr-mono);font-size:14px;font-weight:600;letter-spacing:.12em;color:#ff9aa8}
.cr-browser__view{position:relative;aspect-ratio:16/10;background:#000}
.cr-browser__view video{width:100%;height:100%;object-fit:cover}
.cr-phone{position:relative;width:200px;margin:0;padding:8px;border-radius:32px;background:#151017;box-shadow:0 40px 80px -30px #000b,0 0 0 1px #ffffff26}
.cr-phone__notch{position:absolute;z-index:2;top:14px;left:50%;width:62px;height:16px;margin-left:-31px;border-radius:99px;background:#151017}
.cr-phone__view,.cr-phone>img{overflow:hidden;width:100%;border-radius:25px;aspect-ratio:390/844;background:#000}
.cr-phone>img{object-fit:cover;object-position:top}
.cr-phone__view video{width:100%;height:100%;object-fit:cover}
.cr-sian__device .cr-phone{position:absolute;right:0;bottom:56px}
.cr-chapter-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 16px;align-items:center;margin-top:22px;max-width:calc(100% - 120px)}
.cr-chapter-bar__track{grid-column:1/-1;position:relative;height:3px;border-radius:2px;background:#f7f2f526}
.cr-chapter-bar__track i{position:absolute;inset:0;background:var(--cr-rim);transform:scaleX(var(--vp,0));transform-origin:left}
.cr-chapter-bar__list{display:flex;flex-wrap:wrap;gap:6px}
.cr-chapter-bar__list button{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 13px;border-radius:99px;border:1px solid #f7f2f533;font-size:14px;font-weight:700;line-height:1.4;color:var(--cr-fg2);transition:background .3s,color .3s,border-color .3s}
.cr-chapter-bar__list button b{font-family:var(--cr-mono);font-size:14px;font-weight:600;opacity:.8}
.cr-chapter-bar__list button[aria-current="true"]{background:var(--cr-champ);border-color:var(--cr-champ);color:#1d1822}
.cr-chapter-bar__play{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid #f7f2f555;font-size:14px;font-weight:700;color:var(--cr-fg)}
.cr-notes{margin-top:clamp(70px,7vw,120px)}
.cr-notes__head{display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:center}
.cr-notes__head p{max-width:640px;font-size:16px;color:var(--cr-fg2)}
.cr-notes__strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 18px;width:calc(100% - 12vw);max-width:1440px;margin:34px auto 0}
.cr-notes__shot{display:block;width:100%;overflow:hidden;border-radius:12px;background:#000;box-shadow:0 0 0 1px #f7f2f526}
.cr-notes__shot img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .8s var(--cr-ease)}
.cr-notes__shot:hover img{transform:scale(1.05)}
.cr-notes__strip b{display:block;margin-top:14px;font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--cr-champ)}
.cr-notes__strip p{margin-top:6px;font-size:15px;line-height:1.6;color:var(--cr-fg2)}

/* ---------------------------------------------------------------- 10 MAKING */
.cr-film{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-areas:"head view" "head range";gap:18px clamp(28px,4vw,64px);align-items:start;margin-top:clamp(56px,6vw,90px)}
.cr-film__head{grid-area:head;display:grid;align-content:start;gap:14px}
.cr-film__head h3,.cr-vase__body h3,.cr-boxlab__body h3{font-size:clamp(26px,2.4vw,38px)}
.cr-film__head>p,.cr-vase__body>p,.cr-boxlab__body>p{font-size:17px;color:var(--cr-fg2)}
.cr-film__tabs,.cr-boxlab__tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.cr-film__tabs button{display:inline-flex;align-items:baseline;gap:8px;min-height:44px;padding:0 18px;border-radius:99px;border:1px solid #f7f2f540;font-size:15px;font-weight:800;color:var(--cr-fg2)}
.cr-film__tabs button small{font-family:var(--cr-mono);font-size:14px;font-weight:500;opacity:.8}
.cr-film__tabs button[aria-pressed="true"]{background:var(--cr-champ);border-color:var(--cr-champ);color:#1d1822}
.cr-film__desc{font-size:16px;line-height:1.65;color:var(--cr-fg3)}
.cr-film__view{grid-area:view;position:relative;aspect-ratio:1;max-height:72vh;justify-self:end;width:min(100%,72vh);overflow:hidden;border-radius:50%;background:#0e0610;box-shadow:0 0 0 1px #ead0a855,0 0 80px -10px #c49be655;touch-action:pan-y;cursor:grab}
.cr-film__view canvas{width:100%;height:100%}
.cr-film__counter{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);padding:4px 12px;border-radius:99px;background:#0e0610b3;font-family:var(--cr-mono);font-size:14px;font-weight:600;color:var(--cr-fg2);white-space:nowrap}
.cr-film__counter b{color:#fff}
.cr-film__hint{position:absolute;left:50%;top:8%;transform:translateX(-50%);padding:4px 12px;border-radius:99px;background:#0e0610b3;font-size:14px;font-weight:700;color:var(--cr-fg2);white-space:nowrap;transition:opacity .4s}
.cr-film.is-used .cr-film__hint{opacity:0}
.cr-film__range{grid-area:range;justify-self:end;width:min(100%,72vh);accent-color:var(--cr-champ)}
.cr-vase{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,64px);align-items:center;margin-top:clamp(70px,7vw,120px)}
.cr-vase__view{position:relative;aspect-ratio:4/5;max-height:76vh;width:min(100%,60vh);overflow:hidden;border-radius:999px 999px 18px 18px;background:#1b0d22;box-shadow:0 0 0 1px #ead0a855}
.cr-vase__view canvas{width:100%;height:100%}
.cr-vase__body{display:grid;gap:14px}
.cr-vase__body .cr-film__range{grid-area:auto;justify-self:stretch;width:100%}
.cr-boxlab{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,4vw,64px);align-items:center;margin-top:clamp(70px,7vw,120px)}
.cr-boxlab__stage{position:relative;display:grid;place-items:center;height:min(60vh,520px);border-radius:28px;background:radial-gradient(50% 50% at 50% 55%,color-mix(in srgb,var(--glow,#22406a) 55%,#0e0610) 0,#0e0610 75%);perspective:1400px;touch-action:pan-y;cursor:grab;overflow:hidden}
.cr-box{--ry:-24deg;--rx:12deg;--bw:min(64vw,440px);--bh:calc(var(--bw) * .6664);--bd:calc(var(--bw) * .085);position:relative;width:var(--bw);height:var(--bh);transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry))}
.cr-box__f{position:absolute;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.cr-box__front,.cr-box__back{inset:0;border-radius:3px}
.cr-box__front{transform:translateZ(calc(var(--bd) / 2));background-position:center;background-size:cover;box-shadow:inset 0 0 0 1px #ffffff14}
.cr-box__back{transform:rotateY(180deg) translateZ(calc(var(--bd) / 2));background:var(--edge-d)}
.cr-box__left,.cr-box__right{top:0;height:100%;width:var(--bd);left:calc(50% - var(--bd) / 2)}
.cr-box__right{transform:rotateY(90deg) translateZ(calc(var(--bw) / 2));background:linear-gradient(90deg,var(--edge),var(--edge-d))}
.cr-box__left{transform:rotateY(-90deg) translateZ(calc(var(--bw) / 2));background:linear-gradient(90deg,var(--edge-d),var(--edge))}
.cr-box__top,.cr-box__bottom{left:0;width:100%;height:var(--bd);top:calc(50% - var(--bd) / 2)}
.cr-box__top{transform:rotateX(90deg) translateZ(calc(var(--bh) / 2));background:linear-gradient(180deg,var(--edge-l),var(--edge))}
.cr-box__bottom{transform:rotateX(-90deg) translateZ(calc(var(--bh) / 2));background:var(--edge-d)}
.cr-boxlab__hint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);padding:4px 12px;border-radius:99px;background:#0e0610b3;font-size:14px;font-weight:700;color:var(--cr-fg2);transition:opacity .4s}
.cr-boxlab.is-used .cr-boxlab__hint{opacity:0}
.cr-boxlab__body{display:grid;gap:14px}
.cr-boxlab__tabs{display:grid;gap:8px}
.cr-boxlab__tabs button{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;align-items:center;padding:12px 16px;border-radius:14px;box-shadow:inset 0 0 0 1px #f7f2f533;font-size:16px;font-weight:800;text-align:left}
.cr-boxlab__tabs button i{grid-row:span 2;width:22px;height:22px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px #f7f2f540}
.cr-boxlab__tabs button small{font-size:14px;font-weight:600;color:var(--cr-fg3)}
.cr-boxlab__tabs button[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--cr-champ);background:#f7f2f50d}
.cr-load{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:clamp(70px,7vw,120px)}
.cr-load li{display:grid;align-content:start;gap:8px;padding:24px;border-radius:18px;background:#160a18;box-shadow:inset 0 0 0 1px #f7f2f51c}
.cr-load span{font-family:var(--cr-mono);font-size:14px;font-weight:600;color:var(--cr-champ)}
.cr-load b{font-size:18px}
.cr-load p{font-size:15px;line-height:1.65;color:var(--cr-fg2)}

/* ---------------------------------------------------------------- 11 CONSULT */
.cr-flow{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,64px);align-items:start;margin-top:clamp(56px,6vw,90px)}
.cr-form{display:grid;gap:16px;padding:clamp(22px,2.6vw,36px);border-radius:24px;background:var(--cr-paper);box-shadow:0 40px 80px -50px #2d1733aa,inset 0 0 0 1px var(--cr-line)}
.cr-form__title{display:grid;gap:2px;font-size:22px;font-weight:800}
.cr-form__title span{font-size:15px;font-weight:500;color:var(--cr-ink3)}
.cr-form__field{position:relative;display:grid;gap:8px;padding:2px;border-radius:12px;transition:box-shadow .4s,background .4s}
.cr-form__field.is-hot{box-shadow:0 0 0 2px var(--cr-plum);background:#f3ecf6}
.cr-form__field label{font-size:15px;font-weight:700}
.cr-form__field label i{margin-left:2px;font-style:normal;color:#c0496f}
.cr-form__input{display:block;padding:12px 14px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px #1d182226;font-size:16px;color:var(--cr-ink3)}
.cr-form__seg{display:flex;flex-wrap:wrap;gap:6px}
.cr-form__seg span{padding:8px 12px;border-radius:99px;box-shadow:inset 0 0 0 1px #1d182233;font-size:14px;font-weight:600;color:var(--cr-ink2)}
.cr-form__seg span.is-on{background:#1d1822;color:#fff;box-shadow:none}
.cr-form__agree{grid-template-columns:auto minmax(0,1fr);align-items:center;padding:12px;background:var(--cr-ivory);font-size:15px}
.cr-form__check{width:20px;height:20px;border-radius:5px;box-shadow:inset 0 0 0 1.5px #1d182266}
.cr-form__check.is-on{background:#2d1733;box-shadow:none}
.cr-form__btn{display:block;padding:15px;border-radius:99px;background:linear-gradient(100deg,#2d1733,#5b2f6b);color:#fff;text-align:center;font-weight:800}
.cr-fields{display:grid;gap:10px}
.cr-fields li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:2px 14px;padding:16px 18px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1px var(--cr-line);cursor:default;transition:box-shadow .3s}
.cr-fields li:hover,.cr-fields li.is-hot{box-shadow:inset 0 0 0 2px var(--cr-plum)}
.cr-fields span{grid-row:span 2;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--cr-plum);color:#fff;font-family:var(--cr-mono);font-size:14px;font-weight:600}
.cr-fields b{font-size:17px}
.cr-fields p{font-size:15px;line-height:1.65;color:var(--cr-ink2)}
.cr-admin{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:16px;margin-top:clamp(56px,6vw,90px);padding:clamp(16px,2vw,26px);border-radius:26px;background:#e7e1ea;box-shadow:inset 0 0 0 1px var(--cr-line)}
.cr-admin__list,.cr-admin__panel{padding:clamp(18px,2vw,28px);border-radius:18px;background:#fff;box-shadow:0 20px 40px -30px #2d173366}
.cr-admin__title{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;font-size:22px;font-weight:800}
.cr-admin__title span{font-size:14px;font-weight:600;color:var(--cr-ink3)}
.cr-admin__filters{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.cr-admin__filters button{display:inline-flex;gap:8px;align-items:center;min-height:40px;padding:0 14px;border-radius:10px;box-shadow:inset 0 0 0 1px #1d182226;font-size:15px;font-weight:700;color:var(--cr-ink2)}
.cr-admin__filters button[aria-pressed="true"]{background:#efe8f4;box-shadow:inset 0 0 0 1.5px var(--cr-plum);color:var(--cr-plum)}
.cr-admin__table{display:grid;margin-top:14px}
.cr-admin__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 92px;gap:12px;align-items:center;width:100%;padding:14px 12px;border-bottom:1px solid var(--cr-line);font-size:15px;text-align:left;border-radius:0;transition:background .3s}
.cr-admin__row--head{font-size:14px;font-weight:700;color:var(--cr-ink3)}
button.cr-admin__row:hover{background:#faf6fb}
button.cr-admin__row.is-active{background:#f3ecf6;box-shadow:inset 3px 0 0 var(--cr-plum)}
.cr-admin__row span:first-child{font-weight:700}
.cr-st{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:99px;font-style:normal;font-size:14px;font-weight:700;-webkit-text-fill-color:currentColor}
.cr-st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.cr-st--new{background:#fbe8ec;color:#b3264e}
.cr-st--contacted{background:#e9edfb;color:#2c3e9c}
.cr-st--done{background:#ecebee;color:#4c4453}
.cr-admin__panel{display:grid;align-content:start;gap:14px}
.cr-admin__ptitle{display:flex;justify-content:space-between;font-size:17px;font-weight:800}
.cr-admin__ptitle span{font-family:var(--cr-mono);font-size:14px;font-weight:600;color:var(--cr-ink3)}
.cr-admin__name{font-size:24px;font-weight:800}
.cr-admin__phone{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-radius:12px;background:#efe8f4;font-family:var(--cr-mono);font-size:18px;font-weight:600;color:var(--cr-plum)}
.cr-admin__phone span:last-child{font-family:'Pretendard Variable',Pretendard,sans-serif;font-size:14px;font-weight:700}
.cr-admin__dl{display:grid;gap:8px}
.cr-admin__dl div{display:grid;grid-template-columns:90px minmax(0,1fr);font-size:15px}
.cr-admin__dl dt{color:var(--cr-ink3)}
.cr-admin__dl dd{margin:0;font-weight:700}
.cr-admin__status{display:flex;gap:6px}
.cr-admin__status button{flex:1;min-height:42px;border-radius:10px;box-shadow:inset 0 0 0 1px #1d182226;font-size:15px;font-weight:700;color:var(--cr-ink2)}
.cr-admin__status button[aria-pressed="true"]{background:var(--cr-plum);color:#fff;box-shadow:none}
.cr-admin__memo{display:grid;gap:6px;font-size:15px;font-weight:700}
.cr-admin__memo span{padding:12px 14px;border-radius:10px;background:var(--cr-ivory);font-weight:500;color:var(--cr-ink2)}
.cr-admin__btns{display:grid;grid-template-columns:1fr 1.4fr;gap:8px}
.cr-admin__btns button{min-height:48px;border-radius:12px;box-shadow:inset 0 0 0 1px #1d182233;font-size:15px;font-weight:800}
.cr-admin__btns .is-primary{background:var(--cr-plum);color:#fff;box-shadow:none}
.cr-admin.is-saving .cr-admin__panel{animation:cr-flash .6s var(--cr-ease)}
@keyframes cr-flash{0%{box-shadow:0 0 0 0 #6b3c7b66}50%{box-shadow:0 0 0 8px #6b3c7b26}100%{box-shadow:0 20px 40px -30px #2d173366}}

/* ---------------------------------------------------------------- 12 MOBILE */
.cr-phones{display:flex;gap:28px;width:max-content;margin-top:clamp(56px,6vw,90px);padding:0 6vw 30px;transform:translateX(calc(var(--px,0) * -1px))}
.cr-phones .cr-phone{flex:none;width:clamp(200px,17vw,250px);transform:translateY(calc(var(--sp) * var(--pp,0) * 1px));background:#1a121c}
.cr-phones figcaption{margin-top:14px;text-align:center;font-size:15px;font-weight:700;color:var(--cr-ink2)}
html:not(.cr-motion) .cr-phones{width:auto;overflow-x:auto;transform:none}

/* ---------------------------------------------------------------- 13 CREDITS · ENDING */
.cr-card{max-width:1080px;margin:0 auto;padding:clamp(24px,3vw,44px);border-radius:28px;background:#fff;box-shadow:0 40px 90px -50px #2d1733aa,inset 0 0 0 1px var(--cr-line)}
.cr-card header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-bottom:18px;border-bottom:2px solid var(--cr-ink);font-family:var(--cr-mono);font-size:14px;font-weight:600;letter-spacing:.1em}
.cr-card header span:first-child{display:inline-flex;align-items:center;gap:12px}
.cr-card__title{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 28px;align-items:center;padding:28px 0}
.cr-card__key{grid-row:span 3;display:grid;place-items:center;width:clamp(110px,12vw,160px);aspect-ratio:1;border-radius:24px;background:radial-gradient(60% 60% at 50% 40%,#3a1d44,#0e0610)}
.cr-card__key svg{width:44%;height:auto;overflow:visible}
.cr-card__key path{fill:#ead0a8;filter:drop-shadow(0 0 12px #ead0a8aa)}
.cr-card__kicker{font-family:var(--cr-mono);font-size:14px;letter-spacing:.14em;color:var(--cr-ink3)}
.cr-card__kicker b{color:var(--cr-plum)}
.cr-card__title h2{font-size:clamp(40px,4.4vw,72px);line-height:1.04;letter-spacing:-.05em}
.cr-card__sub{font-size:15px;color:var(--cr-ink2)}
.cr-card__table{width:100%;border-collapse:collapse;font-size:16px}
.cr-card__table thead th{padding:10px 12px;border-bottom:1px solid var(--cr-ink);font-family:var(--cr-mono);font-size:14px;font-weight:600;letter-spacing:.1em;text-align:left;color:var(--cr-ink3)}
.cr-card__table tbody th{width:150px;padding:12px;border-bottom:1px solid var(--cr-line);font-family:var(--cr-mono);font-size:14px;font-weight:600;letter-spacing:.06em;text-align:left;vertical-align:top;color:var(--cr-plum)}
.cr-card__table td{padding:12px;border-bottom:1px solid var(--cr-line);line-height:1.6}
.cr-card__foot{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;margin-top:22px;padding:16px 18px;border-radius:16px;background:var(--cr-n0);color:var(--cr-fg)}
.cr-card__foot>span:first-child{font-family:var(--cr-mono);font-size:14px;font-weight:600;letter-spacing:.12em;color:var(--cr-champ)}
.cr-card__foot b{font-size:17px}
.cr-card__glow{position:relative;width:30px;height:30px}
.cr-card__glow i{position:absolute;inset:0;border-radius:50%;background:radial-gradient(closest-side,#ead0a8,#ead0a800);animation:cr-glow 2.6s var(--cr-ease) infinite}
@keyframes cr-glow{0%,100%{transform:scale(.6);opacity:.5}50%{transform:scale(1);opacity:1}}
.cr-ending{text-align:center;background:radial-gradient(60% 60% at 50% 0,#3a1d44 0,#0e0610 70%)}
.cr-ending h2{margin-top:22px}
.cr-ending .cr-wrap>p{max-width:760px;margin:24px auto 0;font-size:18px;color:var(--cr-fg2)}
.cr-ending__links{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:22px 36px;margin-top:40px}
.cr-others{margin-top:clamp(80px,8vw,130px);text-align:left}
.cr-others__title{font-size:clamp(24px,2vw,32px)!important}
.cr-others ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:26px}
.cr-others a{display:grid;gap:10px}
.cr-others__img{display:block;overflow:hidden;border-radius:16px;aspect-ratio:820/568;background:#160a18}
.cr-others__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--cr-ease)}
.cr-others a:hover .cr-others__img img{transform:scale(1.04)}
.cr-others__tag{font-family:var(--cr-mono);font-size:14px;font-weight:600;letter-spacing:.06em;color:var(--cr-champ)}
.cr-others strong{font-size:20px}
.cr-others__desc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:15px;line-height:1.65;color:var(--cr-fg2)}

/* ---------------------------------------------------------------- index · lightbox · toast */
.cr-index{position:fixed;z-index:1001;left:50%;bottom:22px;display:flex;align-items:center;gap:2px;max-width:calc(100vw - 40px);padding:6px 6px 6px 16px;border-radius:99px;background:#fdfaf6eb;box-shadow:0 18px 40px #2d173333,inset 0 0 0 1px #1d18221a;backdrop-filter:blur(10px);transform:translate(-50%,140%);opacity:0;transition:transform .5s var(--cr-ease),opacity .5s,background .4s;font-family:'Pretendard Variable',Pretendard,sans-serif}
.cr-index.is-visible{transform:translate(-50%,0);opacity:1}
.cr-index__gauge{display:inline-grid;gap:3px;margin-right:12px}
.cr-index__gauge i{position:relative;display:block;width:30px;height:4px;border-radius:2px;background:#1d182221;overflow:hidden}
.cr-index__gauge i::after{content:"";position:absolute;inset:0;background:var(--cr-plum);transform:scaleX(var(--g,0));transform-origin:left}
.cr-index a{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 9px;border-radius:99px;color:#4c4453;font-size:14px;font-weight:700;white-space:nowrap;transition:background .3s,color .3s}
.cr-index a b{font-family:var(--cr-mono);font-size:14px;font-weight:600;color:#6f6676}
.cr-index a span{display:none}
.cr-index a:hover{color:#1d1822}
.cr-index a[aria-current]{background:#1d1822;color:#fff}
.cr-index a[aria-current] b{color:#ead0a8}
.cr-index a[aria-current] span{display:inline}
.cr-index.is-night{background:#0e0610eb;box-shadow:0 18px 40px #0006,inset 0 0 0 1px #f7f2f52e}
.cr-index.is-night .cr-index__gauge i{background:#f7f2f526}
.cr-index.is-night .cr-index__gauge i::after{background:var(--cr-champ)}
.cr-index.is-night a{color:#cfc2d6}
.cr-index.is-night a b{color:#a99bb1}
.cr-index.is-night a:hover{color:#fff}
.cr-index.is-night a[aria-current]{background:var(--cr-champ);color:#1d1822}
.cr-index.is-night a[aria-current] b{color:#1d1822}
.cr-lightbox{width:min(1240px,94vw);max-width:none;height:92vh;max-height:none;padding:0;border:0;border-radius:18px;background:#120814;color:#fff;overflow:hidden}
.cr-lightbox::backdrop{background:#000000e0;backdrop-filter:blur(4px)}
.cr-lightbox__bar{display:flex;justify-content:space-between;align-items:center;gap:20px;height:60px;padding:0 20px;border-bottom:1px solid #ffffff1a}
.cr-lightbox__bar p{font-family:'Pretendard Variable',Pretendard,sans-serif;font-size:15px;font-weight:600}
.cr-lightbox__close{min-height:44px;padding:0 16px;border-radius:99px;border:1px solid #ffffff4d;background:none;color:#fff;font-family:'Pretendard Variable',Pretendard,sans-serif;font-size:15px;font-weight:700;cursor:pointer}
.cr-lightbox__scroll{height:calc(92vh - 60px);overflow:auto;padding:20px}
.cr-lightbox__list{display:grid;gap:26px;margin:0;padding:0;list-style:none}
.cr-lightbox__list figure{margin:0}
.cr-lightbox__list img{display:block;width:100%;height:auto;border-radius:10px;background:#1b1420}
.cr-lightbox__list figcaption{display:flex;gap:10px;margin-top:10px;font-family:'Pretendard Variable',Pretendard,sans-serif;font-size:15px;font-weight:600}
.cr-lightbox__list figcaption b{color:#ead0a8;font-family:'JetBrains Mono',monospace;font-size:14px}
.cr-lightbox__list li.is-target figure img{box-shadow:0 0 0 3px #ead0a8}
.cr-toast{position:fixed;z-index:2001;left:50%;bottom:90px;padding:12px 20px;border-radius:99px;background:#1d1822;color:#fff;font-family:'Pretendard Variable',Pretendard,sans-serif;font-size:15px;font-weight:700;transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
.cr-toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1440px){
  .cr-index a{padding:0 7px}
  .cr-index__gauge i{width:22px}
}
@media (max-width:1280px){
  .cr-index a{padding:0 5px}
  .cr-index__gauge{margin-right:6px}
  .cr-index__gauge i{width:16px}
  .cr-rules,.cr-load{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cr-reels{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cr-revs{grid-column:1/-1}
  .cr-board{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:1101px) and (max-height:820px){
  .cr-hero__beats{bottom:calc(3vh + 50px);height:100px}
  .cr-beat{font-size:clamp(18px,1.5vw,22px)}
  .cr-hero__title h1{font-size:clamp(56px,7.2vw,124px)}
  .cr-morph__steps li{padding:14px 18px}
  .cr-morph__steps p{font-size:15px}
}
@media (max-width:1100px){
  .cr-index{display:none}
  .cr-split{grid-template-columns:1fr;gap:26px}
  .cr-meta{grid-template-columns:1fr 1fr}
  .cr-stats{grid-template-columns:1fr 1fr}
  .cr-stats li:nth-child(2){border-right:0}
  .cr-stats li:nth-child(3){padding-left:0}
  .cr-stats li:nth-child(n+3){margin-top:26px;padding-top:26px;border-top:1px solid var(--cr-line)}
  .cr-timeline{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:34px}
  .cr-timeline::before{display:none}
  .cr-qmap{grid-template-columns:1fr}
  .cr-spine{display:none}
  .cr-qcard{min-height:0}
  .cr-brandcols{grid-template-columns:1fr}
  .cr-duo__in{width:min(50vw,520px);padding:100px 5vw 92px}
  .cr-morph__pin{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;align-content:stretch;gap:14px;padding:90px 0 92px}
  .cr-morph__stage{height:auto;min-height:0}
  .cr-morph__steps{position:relative;height:150px}
  .cr-morph__steps li{position:absolute;inset:0;opacity:0;transform:translateY(16px);transition:opacity .5s,transform .5s}
  .cr-morph__steps li.is-on{opacity:1;transform:none}
  html:not(.cr-motion) .cr-morph__steps{height:auto}
  html:not(.cr-motion) .cr-morph__steps li{position:relative;opacity:1;transform:none}
  .cr-uses{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cr-mood{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(140px,26vw,220px)}
  .cr-mood__item--1,.cr-mood__item--2,.cr-mood__item--3,.cr-mood__item--4,.cr-mood__item--5,.cr-mood__item--6{grid-column:auto;grid-row:span 2}
  .cr-mood__item--1{grid-column:1/-1}
  .cr-swatches{grid-template-columns:1fr}
  .cr-contrast__row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 90px;gap:12px}
  .cr-contrast__row>span:nth-child(4){grid-column:1/-1;margin-top:-6px}
  .cr-contrast__row--head span:nth-child(4){display:none}
  .cr-pairs{grid-template-columns:1fr}
  .cr-review ol{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cr-dirs{grid-template-columns:1fr;gap:56px}
  .cr-dir{grid-template-columns:minmax(0,.8fr) minmax(0,1fr);align-items:center;gap:30px}
  .cr-feed{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:46px}
  .cr-sian__inner{grid-template-columns:minmax(0,1fr)}
  .cr-sian__device{padding-right:clamp(70px,16vw,150px)}
  .cr-sian__device .cr-phone{width:clamp(120px,22vw,190px)}
  .cr-notes__head{grid-template-columns:1fr;gap:14px}
  .cr-notes__strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cr-film{grid-template-columns:1fr;grid-template-areas:"head" "view" "range"}
  .cr-film__view,.cr-film__range{justify-self:center}
  .cr-vase,.cr-boxlab{grid-template-columns:1fr}
  .cr-vase__view{justify-self:center}
  .cr-flow{grid-template-columns:1fr}
  .cr-admin{grid-template-columns:1fr}
}
/* 세로로 긴 태블릿: 열쇠구멍이 위 가운데에 놓이므로 제목은 아래로 내린다(캔버스의 세로 배치와 같은 기준 0.9) */
@media (min-width:721px) and (max-aspect-ratio:9/10){
  .cr-hero__title{left:6vw;right:6vw;top:auto;bottom:calc(96px + 3vh);width:auto;transform:translateY(var(--ty,0px))}
  .cr-hero__shade{background:linear-gradient(0deg,#0e0610f2 0,#0e0610b3 30%,#0e061000 56%)}
  .cr-hero__beats{left:6vw;right:6vw;width:auto;bottom:calc(80px + 3vh)}
}
@media (max-width:720px){
  .cr{font-size:17px}
  .cr-wrap{width:calc(100% - 40px)}
  .cr-head{flex-direction:column;align-items:flex-start;gap:8px}
  .cr-prose p,.cr-lede{font-size:17px}
  html.cr-motion .cr-hero{height:520vh}
  .cr-hud__top{left:20px;top:calc(70px + 2vh)}
  .cr-hud__read{right:20px;top:calc(70px + 2vh)}
  .cr-hud__top span:first-child{display:none}
  .cr-hero__title{left:20px;right:20px;top:auto;bottom:calc(92px + 2vh);width:auto;transform:translateY(var(--ty,0px))}
  .cr-hero__title h1{font-size:clamp(50px,14vw,76px)}
  .cr-hero__title h1 span:last-child{padding-left:.4em}
  .cr-hero__lead{font-size:16px}
  .cr-hero__lead span{display:none}
  .cr-hero__down{display:none}
  .cr-hero__shade{background:linear-gradient(0deg,#0e0610f2 0,#0e0610b3 30%,#0e061000 56%)}
  .cr-hero__beats{left:20px;right:20px;width:auto;bottom:calc(92px + 3vh);height:150px}
  .cr-beat{font-size:19px}
  .cr-hero__steps{left:20px;right:20px;bottom:calc(30px + 2vh);gap:6px}
  .cr-hero__hint{display:none}
  html:not(.cr-motion) .cr-hero__pin{grid-template-columns:1fr;padding:110px 20px 70px}
  html:not(.cr-motion) .cr-hero__still{grid-column:1;grid-row:1;width:min(64vw,260px)}
  html:not(.cr-motion) .cr-hero__title{grid-row:2}
  .cr-meta,.cr-stats{grid-template-columns:1fr}
  .cr-stats li{padding:0!important;border-right:0!important}
  .cr-stats li+li{margin-top:22px;padding-top:22px!important;border-top:1px solid var(--cr-line)}
  .cr-logos{grid-template-columns:1fr;grid-template-rows:auto}
  .cr-logos__x{width:auto;height:44px;background:linear-gradient(180deg,#0e0610 50%,var(--cr-paper) 50%)}
  .cr-logos figcaption{grid-column:1}
  .cr-timeline{grid-template-columns:1fr;row-gap:20px}
  .cr-timeline li{padding:0 0 0 70px}
  .cr-timeline li::before{display:none}
  .cr-timeline time{top:2px}
  .cr-quote{font-size:clamp(30px,8.4vw,44px)}
  .cr-qcard{padding:22px}
  .cr-qcard h3{font-size:28px}
  html.cr-motion .cr-duo{height:auto}
  .cr-duo__pin,html.cr-motion .cr-duo__pin{position:relative;height:auto;min-height:0;display:grid;grid-template-columns:1fr}
  .cr-duo__night,.cr-duo__day{position:relative;inset:auto;min-height:0;clip-path:none!important}
  .cr-duo__in{width:100%;padding:56px 20px}
  .cr-duo__line{display:none}
  .cr-switch ol{grid-template-columns:1fr}
  .cr-uses{grid-template-columns:1fr 1fr;gap:12px}
  .cr-uses span{font-size:14px}
  .cr-mood{grid-template-columns:1fr;grid-auto-rows:220px}
  .cr-mood__item--1{grid-column:auto}
  .cr-swatches ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cr-ratio__bar{flex-wrap:wrap}
  .cr-ratio__bar li{min-width:calc(50% - 4px);min-height:64px}
  .cr-contrast__row{grid-template-columns:minmax(0,1fr) 86px}
  .cr-contrast__row>span:nth-child(2){grid-column:1/-1;grid-row:2}
  .cr-contrast__row>span:nth-child(3){grid-row:1;grid-column:2;text-align:right}
  .cr-contrast__row>span:nth-child(4){grid-row:3;grid-column:1/-1;margin-top:0}
  .cr-contrast__row--head{display:none}
  .cr-rules,.cr-load{grid-template-columns:1fr}
  .cr-review ol{grid-template-columns:1fr}
  .cr-dir{grid-template-columns:1fr}
  .cr-dir__phone{width:min(76vw,280px)}
  .cr-score__row{grid-template-columns:minmax(0,1fr) repeat(3,44px);gap:8px;font-size:15px}
  .cr-feed{width:calc(100% - 40px);grid-template-columns:1fr 1fr;gap:28px 14px}
  .cr-feed b{font-size:16px}
  .cr-feed p{display:none}
  .cr-reels{grid-template-columns:1fr}
  .cr-reel__phone{width:min(76vw,280px);margin:0 auto}
  .cr-board{grid-template-columns:repeat(8,46vw);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px}
  .cr-board li{scroll-snap-align:start}
  .cr-sian__inner{width:calc(100% - 40px)}
  .cr-sian__device{padding:0}
  .cr-sian__device .cr-phone{display:none}
  .cr-browser__url{padding:3px 14px}
  .cr-chapter-bar{max-width:none}
  .cr-chapter-bar__list{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
  .cr-chapter-bar__list li{flex:none}
  .cr-notes__strip{width:calc(100% - 40px);grid-template-columns:1fr}
  .cr-film__view{width:min(86vw,420px)}
  .cr-film__range{width:min(86vw,420px)}
  .cr-vase__view{width:min(80vw,380px)}
  .cr-boxlab__stage{height:min(80vw,360px)}
  .cr-box{--bw:min(70vw,320px)}
  .cr-admin{padding:10px}
  .cr-admin__row{grid-template-columns:minmax(0,1fr) 78px;gap:6px}
  .cr-admin__row>span:nth-child(2),.cr-admin__row>span:nth-child(3){display:none}
  .cr-phones .cr-phone{width:62vw}
  .cr-card header span:last-child{display:none}
  .cr-card header span:first-child{white-space:nowrap}
  .cr-card__title{grid-template-columns:1fr}
  .cr-card__key{grid-row:auto;width:96px}
  .cr-card__table tbody th{width:96px}
  .cr-others ul{grid-template-columns:1fr}
  .cr-sec,.cr-sian{padding-bottom:clamp(110px,24vw,150px)}
}
@media (prefers-reduced-motion:reduce){
  .cr-js .cr-rv{opacity:1;transform:none;transition:none}
  .cr-quote span{color:var(--cr-fg)}
  .cr-pair__bad s{background-size:100% 2px;transition:none}
}