/* 창조세무회계 case study 「열한 획으로 쓴 이름」: every rule is scoped to .cj-page / .cj so the shared header, contact and footer stay untouched.
   Ink rooms use the October draft's background #0B0B0D where the logo colour passes as text (8.23:1) and the UI champagne #CFB68E reads at 10.05:1.
   Paper rooms are warm off-white; there the champagne only draws lines and text uses the 600/700 steps (4.5 / 7:1 on white). */
.cj-page{--k0:#0b0b0d;--k1:#121110;--k2:#1a1815;--k3:#26231f;--fg:#f2eee7;--fg2:#cdc7bc;--fg3:#a8a297;--dline:#f2eee71f;--gold:#cfb68e;--logo:#bca486;--sun:#edd6b8;--stamp:#9a7b50;--gold-t:#887359;--gold-7:#68563e;--paper:#f4f2ee;--paper2:#ebe9e4;--paper3:#e1ddd5;--ink:#17171a;--ink2:#46433e;--ink3:#5c5850;--line:#17171a1f;--red:#c8331f;--grad:linear-gradient(100deg,#f4e6cc 0%,#cfb68e 46%,#a98a5e 100%);--mono:'JetBrains Mono','Pretendard Variable',Pretendard,ui-monospace,monospace;--ease:cubic-bezier(.16,1,.3,1);--head:85px;background:var(--k0)}
.cj-page .site-header{position:fixed;inset:0 0 auto;background:rgba(11,11,13,.86);border-bottom-color:#ffffff14}
.cj-page .site-header .container{background:transparent;box-shadow:none}
.cj-page.cj-at-hero .site-consult-bar{visibility:hidden;pointer-events:none}
.cj-skip{position:fixed;z-index:2000;left:12px;top:-60px;padding:12px 18px;border-radius:8px;background:#fff;color:#000;font-weight:700}
.cj-skip:focus{top:12px}
.cj{position:relative;color:var(--ink);background:var(--paper);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}
.cj *{box-sizing:border-box}
.cj [hidden]{display:none!important}
.cj :where(h1,h2,h3,h4,p,figure,dl,dd,ul,ol,blockquote,table){margin:0;padding:0}
.cj :where(h1,h2,h3,h4){font-weight:800;line-height:1.24;letter-spacing:-.04em;text-wrap:balance}
.cj :where(p){text-wrap:pretty}
.cj :where(ul,ol){list-style:none}
.cj :where(a){color:inherit;text-decoration:none}
.cj :where(button){font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
.cj :where(img,video,canvas){display:block;max-width:100%}
.cj :where(img,video){height:auto}
.cj em{font-style:normal;color:var(--gold-t)}
.cj code{font-family:var(--mono);font-size:max(14px,.86em);font-weight:500;letter-spacing:0;white-space:nowrap}
.cj :is(a,button,input,canvas,[tabindex]):focus-visible{outline:3px solid var(--gold-t);outline-offset:5px;border-radius:6px}
.cj section[id]{scroll-margin-top:84px}
.cj-wrap{width:calc(100% - 12vw);max-width:1440px;margin-inline:auto}
.cj-sec{position:relative;padding-block:clamp(96px,10vw,170px)}
.cj-mark{width:28px;height:28px;flex:none;fill:none;stroke:currentColor;stroke-width:6;overflow:visible}
.cj-eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:14px;font-weight:600;line-height:1.5;letter-spacing:.16em;color:var(--gold)}
.cj-eyebrow::before{content:"";width:28px;height:2px;background:currentColor;opacity:.7}
.cj-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(--line);font-size:15px;line-height:1.5;color:var(--ink2)}
.cj-head>span:first-child{display:inline-flex;align-items:center;gap:14px;font-family:var(--mono);font-weight:600;letter-spacing:.12em;color:var(--ink);white-space:nowrap}
.cj-head .cj-mark{color:var(--gold-t)}
.cj h2{font-size:clamp(34px,4vw,64px)}
.cj-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:7vw;align-items:start}
.cj-prose{padding-top:8px}
.cj-prose p{max-width:640px;color:var(--ink2);font-size:19px}
.cj-prose p+p{margin-top:22px}
.cj-pill{display:inline-flex;align-items:center;gap:22px;min-height:62px;padding:0 30px;border-radius:99px;background:var(--gold);color:#17140f!important;font-weight:700;font-size:17px;transition:transform .3s,background .3s}
.cj-pill:hover{transform:translateY(-3px);background:#dcc6a2}
.cj-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}
.cj-textlink span{font-size:22px;transition:transform .3s}
.cj-textlink:hover span{transform:translateX(4px)}
.cj-footnote{margin-top:28px;max-width:880px;font-size:15px;line-height:1.7;color:var(--ink3)}

/* rooms */
:is(.cj-hero,.cj-round1,.cj-emblem,.cj-grid,.cj-light,.cj-sian,.cj-film,.cj-year,.cj-ending){color:var(--fg)}
.cj-round1,.cj-year{background:var(--k1)}
.cj-emblem,.cj-light,.cj-ending{background:var(--k0)}
.cj-grid{background:radial-gradient(60% 50% at 50% 40%,#1c1915 0,transparent 70%),var(--k0)}
.cj-film{background:#000}
.cj-overview,.cj-color,.cj-retro{background:var(--paper)}
.cj-copy,.cj-ia,.cj-credits{background:var(--paper2)}
:is(.cj-round1,.cj-emblem,.cj-grid,.cj-light,.cj-sian,.cj-film,.cj-year,.cj-ending) em{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
:is(.cj-round1,.cj-emblem,.cj-grid,.cj-light,.cj-sian,.cj-film,.cj-year,.cj-ending) .cj-head{border-bottom-color:var(--dline);color:var(--fg2)}
:is(.cj-round1,.cj-emblem,.cj-grid,.cj-light,.cj-sian,.cj-film,.cj-year,.cj-ending) .cj-head>span:first-child{color:var(--fg)}
:is(.cj-round1,.cj-emblem,.cj-grid,.cj-light,.cj-sian,.cj-film,.cj-year,.cj-ending) .cj-head .cj-mark{color:var(--gold)}
:is(.cj-round1,.cj-emblem,.cj-grid,.cj-light,.cj-sian,.cj-film,.cj-year,.cj-ending) .cj-prose p{color:var(--fg2)}
:is(.cj-round1,.cj-emblem,.cj-grid,.cj-light,.cj-sian,.cj-film,.cj-year,.cj-ending) .cj-footnote{color:var(--fg3)}
:is(.cj-hero,.cj-round1,.cj-emblem,.cj-grid,.cj-light,.cj-sian,.cj-film,.cj-year,.cj-ending) :is(a,button,input,canvas,[tabindex]):focus-visible{outline-color:var(--gold)}

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

/* ---------------------------------------------------------------- 00 HERO: Blender frames → flat strokes → numbers */
.cj-hero{position:relative;background:#000}
html.cj-motion .cj-hero{height:430vh}
/* 블렌더 프레임의 바탕이 순수 검정이라 첫 화면 바탕도 검정으로 맞춘다(그라데이션을 깔면 캔버스 정사각형 경계가 보인다) */
.cj-hero__pin{position:sticky;top:0;height:100vh;height:100svh;min-height:620px;overflow:hidden;background:#000}
.cj-hero__visual{position:absolute;top:calc(50% + var(--head) * .5);right:-2vw;width:min(108svh,64vw);aspect-ratio:1;transform:translateY(-50%)}
.cj-hero__poster,.cj-hero__final,.cj-hero__cv{position:absolute;inset:0;width:100%;height:100%}
.cj-hero__final{display:none}
.cj-hero__cv{opacity:0;transition:opacity .4s}
.cj-hero.is-ready .cj-hero__cv{opacity:var(--cv,1);transition:none}
.cj-hero.is-ready .cj-hero__poster{visibility:hidden}
.cj-hero__flat{position:absolute;left:11.28%;top:11.25%;width:77.43%;height:77.43%;pointer-events:none}
.cj-hero__em{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cj-hero__em :is(line,circle){stroke:var(--gold);stroke-width:4.039;stroke-dasharray:1.02 1;stroke-dashoffset:1}
.cj-hero__nos{position:absolute;inset:0}
.cj-hero__nos li{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);padding:1px 7px;border-radius:5px;background:#000000c7;box-shadow:0 0 0 1px #cfb68e66;font-family:var(--mono);font-size:clamp(14px,1vw,16px);font-weight:600;line-height:1.5;color:var(--sun);opacity:0;transform:translate(-50%,-50%) scale(.7);transition:opacity .35s,transform .45s var(--ease)}
.cj-hero__nos li.is-on{opacity:1;transform:translate(-50%,-50%)}
.cj-hud{position:absolute;inset:0;pointer-events:none;font-family:var(--mono);color:#ece5d8;text-shadow:0 1px 10px #000}
.cj-hud__top{position:absolute;left:6vw;top:calc(var(--head) + 3vh);font-size:14px;font-weight:600;letter-spacing:.14em;opacity:.8}
.cj-hud__read{position:absolute;right:4vw;top:calc(var(--head) + 3vh);display:flex;align-items:baseline;gap:10px;font-size:14px;font-weight:600;letter-spacing:.12em}
.cj-hud__read b{min-width:3ch;font-size:24px;font-weight:600;letter-spacing:0;color:#fff;font-variant-numeric:tabular-nums}
.cj-hud__mode{margin-left:6px;padding:0 10px;border-radius:4px;background:var(--gold);color:#17140f}
.cj-hero__title{position:absolute;left:6vw;top:50%;width:min(640px,44vw);transform:translateY(-38%);color:var(--fg);transition:opacity .5s,transform .5s}
.cj-hero__top{display:flex;flex-wrap:wrap;gap:6px 22px;font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.12em;color:var(--gold)}
.cj-hero__top span:first-child{font-family:'Pretendard Variable',Pretendard,sans-serif;letter-spacing:0;font-size:15px}
.cj-hero__title h1{display:grid;margin-top:clamp(20px,3vh,34px);font-size:clamp(58px,6.8vw,124px);font-weight:800;line-height:1.04;letter-spacing:-.055em}
/* 한국어 제목은 두 줄로 고정되고, 번역 제목은 길어서 줄 안에서 접히게 둔다 */
html[lang="ko"] .cj-hero__title h1 span{white-space:nowrap}
html:not([lang="ko"]) .cj-hero__title h1{font-size:clamp(44px,5.4vw,96px);text-wrap:balance}
.cj-hero__title h1 span:last-child{padding-left:.42em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cj-hero__lead{max-width:540px;margin-top:clamp(18px,3vh,30px);font-size:clamp(17px,1.25vw,20px);line-height:1.68;color:var(--fg2)}
.cj-hero__lead span{display:inline-block;margin-top:8px;font-size:15px;color:var(--fg3)}
.cj-hero__down{display:inline-flex;align-items:center;gap:12px;margin-top:26px;padding:10px 18px;border-radius:99px;border:1px solid #f2eee755;font-size:15px;font-weight:700}
.cj-hero__beats{position:absolute;left:6vw;bottom:calc(4vh + 70px);width:min(620px,48vw);height:136px;pointer-events:none}
.cj-beat{position:absolute;left:0;bottom:0;font-size:clamp(19px,1.7vw,27px);font-weight:700;line-height:1.5;letter-spacing:-.02em;color:#faf6ef;text-shadow:0 2px 16px #000;opacity:0;transform:translateY(18px);transition:opacity .6s,transform .6s;text-wrap:balance}
.cj-beat.is-on{opacity:1;transform:none}
.cj-beat em{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cj-beat__tag{display:block;margin-bottom:8px;font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.16em;color:var(--gold)}
/* 오른쪽 아래는 공용 채팅 위젯 자리라 프레임 표시 바로 아래에 둔다 */
.cj-hero__engine{position:absolute;right:4vw;top:calc(var(--head) + 3vh + 44px);font-size:14px;font-weight:600;color:var(--fg3);opacity:var(--eng,1);transition:opacity .5s}
.cj-hero__steps{position:absolute;left:6vw;right:4vw;bottom:3vh;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700}
.cj-hero__steps li[data-h]{padding:3px 12px;border-radius:99px;border:1px solid #f2eee733;color:var(--fg3);transition:background .4s,color .4s,border-color .4s}
.cj-hero__steps li.is-on{background:var(--gold);border-color:var(--gold);color:#17140f}
.cj-hero__hint{margin-left:auto;font-family:var(--mono);font-weight:600;letter-spacing:.2em;color:var(--fg3)}
.cj-hero.is-off .cj-hero__title{opacity:0;transform:translateY(calc(-38% - 30px));pointer-events:none}
html:not(.cj-motion) .cj-hero__pin{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:4vw;height:auto;min-height:100svh;padding:130px 6vw 90px}
html:not(.cj-motion) .cj-hero__visual{position:relative;inset:auto;grid-column:2;grid-row:1;width:100%;transform:none}
html:not(.cj-motion) .cj-hero__poster,html:not(.cj-motion) .cj-hero__cv{display:none}
html:not(.cj-motion) .cj-hero__final{display:block}
html:not(.cj-motion) .cj-hero__title{position:relative;inset:auto;grid-column:1;grid-row:1;width:auto;transform:none}
html:not(.cj-motion) :is(.cj-hud,.cj-hero__beats,.cj-hero__steps,.cj-hero__engine,.cj-hero__flat){display:none}

/* ---------------------------------------------------------------- 01 OVERVIEW */
.cj-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(--line)}
.cj-meta dt{font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.14em;color:var(--gold-t)}
.cj-meta dd{margin:10px 0 0;font-size:16px;line-height:1.65;font-weight:600}
.cj-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(60px,6vw,90px)}
.cj-stats li{display:grid;align-content:start;gap:8px;padding:0 26px;border-right:1px solid var(--line)}
.cj-stats li:first-child{padding-left:0}
.cj-stats li:last-child{border-right:0}
.cj-stats strong{display:flex;align-items:baseline;gap:6px;font-size:clamp(54px,5.4vw,94px);font-weight:300;line-height:1;letter-spacing:-.05em;color:var(--ink);font-variant-numeric:tabular-nums}
.cj-stats small{font-size:20px;font-weight:700;letter-spacing:0;color:var(--gold-t)}
.cj-stats b{font-size:17px}
.cj-stats li>span{font-size:15px;line-height:1.6;color:var(--ink3)}
.cj-logo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-top:clamp(70px,7vw,110px);overflow:hidden;border-radius:24px;box-shadow:inset 0 0 0 1px var(--line)}
.cj-logo__paper,.cj-logo__ink{display:grid;place-items:center;min-height:clamp(170px,16vw,240px);padding:clamp(28px,4vw,60px)}
.cj-logo__paper{background:var(--paper2)}
.cj-logo__ink{background:var(--k0)}
.cj-logo img{width:min(100%,420px)}
.cj-logo figcaption{grid-column:1/-1;padding:18px clamp(20px,3vw,40px);background:#fff;font-size:16px;color:var(--ink2)}
.cj-timeline{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;margin-top:clamp(60px,6vw,90px);position:relative}
.cj-timeline::before{content:"";position:absolute;left:0;right:0;top:9px;height:1px;background:var(--line)}
.cj-timeline li{position:relative;padding-top:34px}
.cj-timeline li::before{content:"";position:absolute;left:0;top:2px;width:16px;height:16px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 2px var(--gold-t)}
.cj-timeline li.is-round::before{background:var(--gold);box-shadow:inset 0 0 0 2px var(--gold-t)}
.cj-timeline time{font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.cj-timeline__round{display:inline-block;margin-left:10px;padding:1px 9px;border-radius:99px;background:var(--ink);color:#fff;font-size:14px;font-weight:700;vertical-align:4px}
.cj-timeline b{display:block;margin-top:6px;font-size:17px}
.cj-timeline p{margin-top:6px;font-size:15px;line-height:1.6;color:var(--ink3)}

/* ---------------------------------------------------------------- 02 COPY: struck old line → new line */
.cj-now{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(56px,6vw,90px)}
.cj-now li{display:grid;gap:6px;padding:22px 24px;border-radius:18px;background:var(--paper)}
.cj-now strong{display:flex;align-items:baseline;gap:4px;font-size:clamp(34px,3vw,48px);font-weight:300;line-height:1.1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.cj-now small{font-size:17px;font-weight:700;color:var(--gold-t)}
.cj-now b{font-size:16px}
.cj-now span{font-size:15px;line-height:1.6;color:var(--ink3)}
.cj-edits{display:grid;gap:0;margin-top:clamp(56px,6vw,90px);border-top:1px solid var(--line)}
.cj-edit{display:grid;grid-template-columns:56px minmax(0,.55fr) minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto;column-gap:24px;row-gap:8px;align-items:start;padding:30px 0;border-bottom:1px solid var(--line)}
.cj-edit__no{grid-row:1/3;font-family:var(--mono);font-size:15px;font-weight:600;color:var(--gold-t)}
.cj-edit__place{grid-row:1/3;font-size:16px;font-weight:800}
.cj-edit__old{grid-column:3;grid-row:1;position:relative;font-size:17px;line-height:1.6;color:var(--ink3)}
.cj-edit__old span{position:relative;background-image:linear-gradient(var(--red),var(--red));background-repeat:no-repeat;background-position:0 58%;background-size:var(--strike,0%) 2px;transition:background-size .9s var(--ease) calc(var(--d,0ms) + 200ms)}
.cj-edit__new{grid-column:4;grid-row:1;font-size:clamp(18px,1.45vw,22px);font-weight:700;line-height:1.5;letter-spacing:-.02em;color:var(--ink);opacity:0;transform:translateX(-14px);transition:opacity .7s var(--ease) calc(var(--d,0ms) + 700ms),transform .7s var(--ease) calc(var(--d,0ms) + 700ms)}
.cj-edit__why{grid-column:3/5;grid-row:2;font-size:15px;line-height:1.65;color:var(--ink3)}
.cj-edit.is-in .cj-edit__old span{--strike:100%}
.cj-edit.is-in .cj-edit__new{opacity:1;transform:none}
html:not(.cj-js) .cj-edit__new,html:not(.cj-motion) .cj-edit__new{opacity:1;transform:none}
html:not(.cj-js) .cj-edit__old span,html:not(.cj-motion) .cj-edit__old span{--strike:100%}

/* ---------------------------------------------------------------- 03 ROUND 1: two heroes · red pen on the long page */
.cj-browser{overflow:hidden;border-radius:14px;background:#f3f3f2;box-shadow:0 50px 100px -40px #0009,0 0 0 1px #f2eee724}
.cj-browser--dark{background:#111}
.cj-browser__bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;height:40px;padding:0 16px;background:#e9e9e7;color:#4b4a48}
.cj-browser--dark .cj-browser__bar{background:#1a1916}
.cj-browser__bar>span:first-child{display:flex;gap:6px}
.cj-browser__bar>span:first-child i{width:10px;height:10px;border-radius:50%;background:#2121212e}
.cj-browser--dark .cj-browser__bar>span:first-child i{background:#ffffff2e}
.cj-browser__url{justify-self:center;max-width:100%;padding:3px 30px;border-radius:99px;background:#fff;color:#4b4a48;font-family:var(--mono);font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cj-browser--dark .cj-browser__url{background:#ffffff12;color:#d9d3c8}
.cj-browser__live{font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.12em;color:#ff9aa8}
.cj-twin{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,36px);margin-top:clamp(60px,6vw,96px)}
.cj-twin img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.cj-twin figcaption{display:flex;align-items:baseline;gap:12px;margin-top:14px;font-size:16px;font-weight:600;color:var(--fg2)}
.cj-twin figcaption b{font-family:var(--mono);color:var(--gold)}
.cj-pen{position:relative;margin-top:clamp(60px,6vw,100px)}
html.cj-motion .cj-pen{height:320vh}
.cj-pen__stage{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(30px,5vw,90px);align-items:center;width:calc(100% - 12vw);max-width:1440px;margin-inline:auto}
html.cj-motion .cj-pen__stage{position:sticky;top:var(--head);height:calc(100vh - var(--head));height:calc(100svh - var(--head));padding-bottom:84px}
.cj-pen__notes{display:grid;gap:6px;counter-reset:pen}
.cj-pen__notes li{padding:14px 0 14px 22px;border-left:2px solid var(--dline);opacity:.42;transition:opacity .45s,border-color .45s}
.cj-pen__notes b{display:flex;align-items:baseline;gap:12px;font-size:clamp(17px,1.35vw,21px);line-height:1.45;letter-spacing:-.02em}
.cj-pen__notes b span{flex:none;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;border:2px solid var(--red);font-family:var(--mono);font-size:14px;font-weight:600;color:#ff8f7f}
.cj-pen__notes p{max-height:0;overflow:hidden;font-size:16px;line-height:1.65;color:var(--fg2);transition:max-height .6s var(--ease),margin-top .4s}
.cj-pen__notes li.is-on{opacity:1;border-color:var(--red)}
.cj-pen__notes li.is-on p{max-height:9em;margin-top:8px}
.cj-pen__frame{justify-self:center;width:min(100%,560px)}
.cj-pen__view{position:relative;height:min(72vh,720px);overflow:hidden;background:#fff}
.cj-pen__strip{position:relative;will-change:transform}
.cj-pen__strip img{width:100%}
.cj-pen__mark{position:absolute;border:3px solid var(--red);border-radius:50%;opacity:0;transform:scale(1.25) rotate(-3deg);transition:opacity .4s,transform .5s var(--ease);box-shadow:0 0 0 1px #ffffff55}
.cj-pen__mark--wide{border-radius:28px}
.cj-pen__mark i{position:absolute;right:-12px;top:-14px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--red);color:#fff;font-family:var(--mono);font-size:14px;font-style:normal;font-weight:600}
.cj-pen__mark.is-on{opacity:1;transform:none}
.cj-pen__mark.is-past{opacity:.55;transform:none}
html:not(.cj-motion) .cj-pen__notes li{opacity:1}
html:not(.cj-motion) .cj-pen__notes p{max-height:none;margin-top:8px}
html:not(.cj-motion) .cj-pen__mark{opacity:1;transform:none}
html:not(.cj-motion) .cj-pen__view{overflow:auto}
.cj-turn{margin-top:clamp(60px,6vw,100px);font-size:clamp(24px,2.4vw,38px);font-weight:700;line-height:1.45;letter-spacing:-.03em;text-align:center;color:var(--fg)}

/* ---------------------------------------------------------------- 04 EMBLEM: pinned construction */
.cj-em{position:relative;margin-top:clamp(40px,5vw,80px)}
html.cj-motion .cj-em{height:calc(var(--steps,8) * 64vh + 100vh)}
.cj-em__stage{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:5vw;align-items:center;width:calc(100% - 12vw);max-width:1440px;margin-inline:auto}
html.cj-motion .cj-em__stage{position:sticky;top:var(--head);height:calc(100vh - var(--head));height:calc(100svh - var(--head));padding-bottom:70px}
.cj-em__fig{position:relative;width:min(100%,calc(100svh - var(--head) - 160px));aspect-ratio:1;justify-self:center}
.cj-em__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cj-em__svg :is(line,circle){stroke:var(--k3);stroke-width:4.039;stroke-dasharray:1.02 1;stroke-dashoffset:1;transition:stroke .6s,stroke-dashoffset 1s var(--ease),opacity .5s}
.cj-em__svg .is-shown{stroke:#8a7b64;stroke-dashoffset:0}
.cj-em__svg .is-hot{stroke:var(--sun);filter:drop-shadow(0 0 1.4px #edd6b8aa)}
.cj-em__svg .is-shared{animation:cj-pulse 1.6s ease-in-out infinite}
@keyframes cj-pulse{50%{stroke:var(--gold);opacity:.6}}
.cj-em__ghost{position:absolute;inset:-4%;border-radius:50%;border:1px dashed #f2eee726;pointer-events:none}
.cj-em__dim{position:absolute;right:-4%;padding:1px 8px;border-radius:99px;background:var(--k2);box-shadow:0 0 0 1px var(--dline);font-family:var(--mono);font-size:14px;font-weight:600;color:var(--gold);opacity:0;transform:translate(100%,-50%);transition:opacity .5s}
.cj-em__dim--a{top:33.9%}
.cj-em__dim--b{top:66%}
.cj-em__dim::before{content:"";position:absolute;right:100%;top:50%;width:40px;border-top:1px dashed #cfb68e88}
.cj-em__jamo{position:absolute;display:grid;place-items:center;width:clamp(36px,3.2vw,52px);height:clamp(36px,3.2vw,52px);border-radius:50%;background:var(--gold);color:#17140f;font-size:clamp(18px,1.6vw,26px);font-weight:800;line-height:1;opacity:0;transform:translate(-50%,-50%) scale(.6);transition:opacity .45s,transform .5s var(--ease)}
.cj-em__jamo[data-j=chieut]{left:12%;top:16%}
.cj-em__jamo[data-j=a]{left:58%;top:84%}
.cj-em__jamo[data-j=ieung]{left:12%;top:90%}
.cj-em__jamo[data-j=jieut]{left:88%;top:16%}
.cj-em__jamo[data-j=o]{left:88%;top:82%}
/* 원에 내접한 정사각형의 빈 모서리(왼쪽 위 · 오른쪽 위)에 두 글자를 놓는다 */
.cj-em__syl{position:absolute;top:-2%;font-size:clamp(46px,5vw,92px);font-weight:800;line-height:1;color:var(--sun);opacity:0;transform:scale(.85);transition:opacity .5s,transform .6s var(--ease);pointer-events:none}
.cj-em__syl--chang{left:-3%}
.cj-em__syl--jo{right:-3%}
.cj-em__nos{position:absolute;inset:0}
.cj-em__nos li{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);padding:1px 7px;border-radius:5px;background:var(--k0);box-shadow:0 0 0 1px #cfb68e77;font-family:var(--mono);font-size:14px;font-weight:600;line-height:1.5;color:var(--sun);opacity:0;transform:translate(-50%,-50%);transition:opacity .4s}
.cj-em__steps{position:relative;display:grid;gap:2px}
.cj-em__steps li{padding:12px 0 12px 22px;border-left:2px solid var(--dline);opacity:.36;transition:opacity .5s,border-color .5s}
.cj-em__steps li b{display:flex;align-items:baseline;gap:12px;font-size:clamp(18px,1.45vw,23px);letter-spacing:-.02em}
.cj-em__steps li b span{flex:none;font-family:var(--mono);font-size:14px;font-weight:600;color:var(--gold)}
.cj-em__steps li p{max-height:0;overflow:hidden;margin-top:0;font-size:16px;line-height:1.7;color:var(--fg2);transition:max-height .7s var(--ease),margin-top .5s}
.cj-em__steps li.is-on{opacity:1;border-color:var(--gold)}
.cj-em__steps li.is-on p{max-height:12em;margin-top:8px}
.cj-em[data-s="1"] .cj-em__dim--a,.cj-em[data-s="3"] .cj-em__dim--b{opacity:1}
.cj-em[data-s="2"] .cj-em__jamo[data-j=chieut],.cj-em[data-s="3"] .cj-em__jamo[data-j=a],.cj-em[data-s="4"] .cj-em__jamo[data-j=ieung],.cj-em[data-s="5"] .cj-em__jamo[data-j=jieut],.cj-em[data-s="6"] .cj-em__jamo[data-j=o]{opacity:1;transform:translate(-50%,-50%)}
.cj-em[data-s="4"] .cj-em__syl--chang,.cj-em[data-s="6"] .cj-em__syl--jo,.cj-em[data-s="7"] .cj-em__syl{opacity:1;transform:none}
.cj-em[data-s="7"] .cj-em__nos li{opacity:1}
html:not(.cj-motion) .cj-em__stage{grid-template-columns:minmax(0,1fr)}
html:not(.cj-motion) .cj-em__steps li{opacity:1}
html:not(.cj-motion) .cj-em__steps li p{max-height:none;margin-top:8px}
.cj-reading{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:clamp(60px,6vw,100px)}
.cj-reading li{display:grid;align-content:start;gap:10px;padding:clamp(24px,2.4vw,36px);border-radius:22px;background:var(--k2);box-shadow:inset 0 0 0 1px var(--dline);transition-delay:var(--d,0ms)}
.cj-reading span{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--gold)}
.cj-reading b{font-size:clamp(21px,1.8vw,28px);letter-spacing:-.03em}
.cj-reading p{font-size:16px;line-height:1.7;color:var(--fg2)}

/* ---------------------------------------------------------------- 05 GRID: extended guides · icons */
.cj-lines{position:relative;width:min(100% - 8vw,1500px);margin:clamp(50px,6vw,90px) auto 0}
.cj-lines__svg{display:block;width:100%;height:auto;overflow:visible}
.cj-lines__guides line{stroke:#f2eee71c;stroke-width:.4;stroke-dasharray:2 2.4}
.cj-lines__guides line.is-mid{stroke:#f2eee70f}
.cj-lines__guides line.is-key{stroke:#cfb68e88;stroke-width:.5;stroke-dasharray:none}
.cj-lines__em{fill:none;stroke:var(--gold);stroke-width:4.039}
.cj-js .cj-lines__guides line{stroke-dashoffset:0;transform-box:fill-box;transform-origin:center;transform:scaleX(.05);transition:transform 1.6s var(--ease) .2s}
.cj-js .cj-lines__guides line[x1="199.8"],.cj-js .cj-lines__guides line[x1="181.8"],.cj-js .cj-lines__guides line[x1="217.9"]{transform:scaleY(.05)}
.cj-js .cj-lines.is-in .cj-lines__guides line{transform:none}
.cj-lines__tag{position:absolute;padding:2px 9px;border-radius:99px;background:var(--k1);box-shadow:0 0 0 1px var(--dline);font-family:var(--mono);font-size:14px;font-weight:600;color:var(--gold);white-space:nowrap}
.cj-lines__tag--a{left:2%;top:39.25%;transform:translateY(-50%)}
.cj-lines__tag--b{left:2%;top:60.67%;transform:translateY(-50%)}
.cj-lines__tag--c{left:50%;top:0;transform:translate(-50%,-110%)}
.cj-lines__tag--d{right:2%;bottom:0}
.cj-icons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:clamp(56px,6vw,96px)}
.cj-icons li{display:grid;gap:14px;transition-delay:var(--d,0ms)}
.cj-icons__tile{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:24px;background:var(--k2);box-shadow:inset 0 0 0 1px var(--dline);overflow:hidden}
.cj-icons__grid{position:absolute;inset:14%;width:72%;height:72%;fill:none;stroke:#f2eee71a;stroke-width:.6;stroke-dasharray:2 2}
.cj-icons__svg{position:relative;width:52%;height:52%;fill:none;stroke:var(--gold);stroke-width:4.039;stroke-linejoin:miter;overflow:visible}
.cj-icons__svg :is(path,circle){stroke-dasharray:420;stroke-dashoffset:420;transition:stroke-dashoffset 1.6s var(--ease) calc(var(--d,0ms) + 200ms)}
.cj-icons li.is-in .cj-icons__svg :is(path,circle){stroke-dashoffset:0}
html:not(.cj-js) .cj-icons__svg :is(path,circle),html:not(.cj-motion) .cj-icons__svg :is(path,circle){stroke-dashoffset:0}
.cj-icons li:hover .cj-icons__svg{stroke:var(--sun)}
.cj-icons b{font-size:16px;font-weight:700;color:var(--fg)}

/* ---------------------------------------------------------------- 06 COLOR */
.cj-try{display:grid;gap:22px;margin-top:clamp(56px,6vw,96px)}
.cj-try__cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.cj-try__card{display:grid;gap:10px;align-content:start;min-height:250px;padding:clamp(22px,2.2vw,32px);border-radius:22px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);color:var(--pick)}
.cj-try__card[data-bg="#0B0B0D"]{box-shadow:none}
.cj-try__bg{font-size:15px;font-weight:700;color:var(--ink2)}
.cj-try__card[data-bg="#0B0B0D"] .cj-try__bg{color:var(--fg3)}
.cj-try__sample{font-size:clamp(34px,3.2vw,52px);font-weight:800;line-height:1.1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
html:not([lang="ko"]) .cj-try__sample{font-size:clamp(28px,2.4vw,40px);letter-spacing:-.02em;line-break:strict;text-wrap:balance}
.cj-try__body{font-size:16px;font-weight:600;line-height:1.6}
.cj-try__read{display:flex;align-items:baseline;gap:12px;margin-top:auto;padding-top:14px;border-top:1px solid currentColor}
.cj-try__read b{font-family:var(--mono);font-size:22px;font-weight:600;color:var(--ink)}
.cj-try__card[data-bg="#0B0B0D"] .cj-try__read b{color:var(--fg)}
.cj-try__read em{padding:1px 10px;border-radius:99px;background:#1e7a4d;color:#fff;font-size:14px;font-weight:700}
.cj-try__card.is-fail .cj-try__read em{background:var(--red)}
.cj-ramp{padding:clamp(18px,2vw,28px);border-radius:22px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.cj-ramp__label{font-size:15px;font-weight:700;color:var(--ink2)}
.cj-ramp__label span{font-family:var(--mono);color:var(--ink)}
.cj-ramp__row{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px;margin-top:14px}
.cj-ramp__cell{position:relative;display:grid;align-content:end;gap:2px;min-height:118px;padding:10px;border-radius:12px;background:var(--c);text-align:left;color:#17171a;transition:transform .3s var(--ease),box-shadow .3s}
.cj-ramp__cell:nth-child(n+6){color:#f2eee7}
.cj-ramp__cell:hover{transform:translateY(-4px)}
.cj-ramp__cell[aria-pressed=true]{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--ink)}
.cj-ramp__step{font-size:15px;font-weight:800}
.cj-ramp__cell code{font-size:14px}
.cj-ramp__cell small{font-family:var(--mono);font-size:14px;opacity:.85}
.cj-ramp__cell em{position:absolute;left:10px;top:9px;padding:0 7px;border-radius:99px;background:#ffffffd9;color:#17171a;font-size:14px;font-weight:700;line-height:1.6}
.cj-ramp__note{margin-top:14px;font-size:15px;line-height:1.65;color:var(--ink3)}
.cj-palette{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:clamp(50px,5vw,80px)}
.cj-palette li{display:grid;gap:4px;transition-delay:var(--d,0ms)}
.cj-palette i{height:clamp(90px,9vw,140px);margin-bottom:8px;border-radius:18px;background:var(--c);box-shadow:inset 0 0 0 1px var(--line)}
.cj-palette b{font-size:17px}
.cj-palette code{font-size:14px;color:var(--ink2)}
.cj-palette span{font-size:15px;line-height:1.5;color:var(--ink3)}
.cj-palette small code{color:var(--gold-t)}
.cj-sun{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px clamp(30px,5vw,80px);align-items:center;margin-top:clamp(60px,6vw,100px);padding:clamp(28px,3.4vw,56px);border-radius:28px;background:var(--k0);color:var(--fg)}
.cj-sun__copy{grid-row:1/3}
.cj-sun__copy h3{font-size:clamp(28px,2.7vw,44px);letter-spacing:-.04em}
.cj-sun__copy h3 em{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cj-sun__copy p{margin-top:18px;font-size:17px;line-height:1.75;color:var(--fg2)}
.cj-sun__bar{display:flex;height:96px;overflow:hidden;border-radius:16px}
.cj-sun__bar span{flex:var(--w) 1 0;min-width:0;background:var(--c)}
.cj-sun__bar span.is-hot{box-shadow:inset 0 0 0 3px #fff}
.cj-sun__legend{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 14px;margin-top:14px}
.cj-sun__legend li{display:grid;grid-template-columns:14px minmax(0,1fr);column-gap:8px;align-items:baseline;font-size:14px;line-height:1.45;color:var(--fg2)}
.cj-sun__legend i{grid-row:1/3;align-self:center;width:14px;height:14px;border-radius:4px;background:var(--c);box-shadow:0 0 0 1px #f2eee733}
.cj-sun__legend b{font-family:var(--mono);font-weight:600;color:var(--fg)}
.cj-sun__legend code{font-size:14px;color:var(--fg3)}
.cj-sun__legend li.is-hot b,.cj-sun__legend li.is-hot code{color:var(--sun)}
.cj-sun__hue{display:grid;gap:10px}
.cj-sun__cap{font-size:14px;font-weight:700;color:var(--fg3)}
.cj-sun__ruler{position:relative;height:64px;border-radius:12px;background:linear-gradient(90deg,#c8a184,#c5a985 33%,#bdad86 66%,#b0b088);background:linear-gradient(90deg,oklch(78% .055 60),oklch(78% .055 70),oklch(78% .055 80),oklch(78% .055 90))}
.cj-sun__mk{position:absolute;left:calc((var(--h) - 60) / 30 * 100%);top:0;bottom:0}
.cj-sun__mk i{position:absolute;left:-1.5px;top:-8px;bottom:-8px;width:3px;border-radius:2px;background:#fff;box-shadow:0 0 0 1px #0007}
.cj-sun__mk b{position:absolute;left:0;top:calc(100% + 12px);transform:translateX(-50%);padding:1px 8px;border-radius:99px;background:var(--c);color:#17140f;font-size:14px;font-weight:700;white-space:nowrap}
.cj-sun__mk--logo b{transform:translateX(-100%)}
.cj-sun__mk--sun b{transform:none}
.cj-sun__mk--ui b{top:auto;bottom:calc(100% + 12px);transform:translateX(-50%)}
.cj-sun__scale{display:flex;justify-content:space-between;margin-top:40px;font-family:var(--mono);font-size:14px;color:var(--fg3)}

/* ---------------------------------------------------------------- 07 LIGHT: sunbeam wipe v1 → v2 */
.cj-swap{position:relative;margin-top:clamp(40px,5vw,80px)}
html.cj-motion .cj-swap{height:260vh}
.cj-swap__stage{display:grid;align-content:center;gap:18px;width:calc(100% - 12vw);max-width:1440px;margin-inline:auto}
html.cj-motion .cj-swap__stage{position:sticky;top:var(--head);height:calc(100vh - var(--head));height:calc(100svh - var(--head));padding-bottom:70px}
/* 4 × 2 카드(4:5)가 고정 무대 높이 안에 들어오는 폭: (무대 높이 − 설명 · 범례 · 여백) ÷ 2행 × 4/5 × 4열 */
.cj-swap__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.2vw,18px);width:min(100%,calc((100svh - var(--head) - 280px) * 1.6 + 48px))}
.cj-swap__grid{justify-self:center}
.cj-swap__grid li{--p:0}
.cj-swap__img{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;border-radius:14px;background:#000}
.cj-swap__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cj-swap__v2{clip-path:polygon(0 0,calc(var(--p) * 160% - 30%) 0,calc(var(--p) * 160% - 60%) 100%,0 100%)}
.cj-swap__beam{position:absolute;inset:-10% auto -10% calc(var(--p) * 160% - 46%);width:22%;background:linear-gradient(100deg,transparent,#ffe6bf55 45%,#fff3dd88 52%,transparent);transform:skewX(-17deg);mix-blend-mode:screen;opacity:calc(1 - (var(--p) - .5) * (var(--p) - .5) * 4);pointer-events:none}
.cj-swap figcaption{display:grid;gap:2px;margin-top:10px;font-size:15px;line-height:1.45}
.cj-swap figcaption b{font-size:15px;color:var(--fg)}
.cj-swap__was,.cj-swap__now{color:var(--fg3);transition:opacity .4s}
.cj-swap__was{text-decoration:line-through;text-decoration-color:#c8331fbb}
.cj-swap__now{display:none;color:var(--gold)}
.cj-swap li.is-now .cj-swap__was{display:none}
.cj-swap li.is-now .cj-swap__now{display:block}
.cj-swap__legend{display:flex;align-items:center;justify-content:center;gap:14px;font-family:var(--mono);font-size:14px;font-weight:600;color:var(--fg3)}
.cj-swap__legend i{width:90px;height:2px;background:linear-gradient(90deg,#5a4a33,var(--sun))}
html:not(.cj-motion) .cj-swap__grid li{--p:1}
html:not(.cj-motion) .cj-swap__beam{display:none}
.cj-rules{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px;margin-top:clamp(60px,6vw,100px);padding-top:30px;border-top:1px solid var(--dline)}
.cj-rules li{display:grid;align-content:start;gap:8px}
.cj-rules span{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--gold)}
.cj-rules b{font-size:18px;letter-spacing:-.02em}
.cj-rules p{font-size:15px;line-height:1.65;color:var(--fg2)}
.cj-wide{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:clamp(50px,5vw,80px)}
.cj-wide img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:18px}
.cj-wide figcaption{margin-top:10px;font-size:15px;color:var(--fg3)}

/* ---------------------------------------------------------------- 08 STRUCTURE: proportional scene bar */
.cj-scenes{margin-top:clamp(56px,6vw,96px)}
.cj-scenes__strip{display:flex;gap:3px;height:44px;margin-bottom:22px}
.cj-scenes__strip i{flex:var(--w) 1 0;min-width:0;display:grid;place-items:center;border-radius:8px;background:var(--k0);transform:scaleY(0);transform-origin:bottom;transition:transform .8s var(--ease) calc(var(--i) * 70ms)}
.cj-scenes__strip i:nth-child(5){background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.cj-scenes__strip b{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--gold)}
.cj-scenes__strip i:nth-child(5) b{color:var(--gold-7)}
.cj-scenes.is-in .cj-scenes__strip i{transform:none}
.cj-scenes__rows{display:grid;border-top:1px solid var(--line)}
.cj-scenes__rows li{display:grid;grid-template-columns:44px minmax(0,1.1fr) minmax(0,1.2fr) minmax(0,1.3fr) 84px;align-items:center;column-gap:18px;padding:14px 0;border-bottom:1px solid var(--line)}
.cj-scenes__no{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--gold-t)}
.cj-scenes__name{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px}
.cj-scenes__name b{font-size:17px}
.cj-scenes__name em{font-size:14px;font-weight:700;color:var(--gold-7)}
.cj-scenes__desc{font-size:15px;line-height:1.55;color:var(--ink2)}
.cj-scenes__meter{position:relative;height:10px;border-radius:99px;background:var(--paper3);overflow:hidden}
.cj-scenes__meter i{position:absolute;inset:0;width:calc(var(--w) * 1%);border-radius:99px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease) calc(var(--i) * 80ms + 200ms)}
.cj-scenes__rows li:nth-child(5) .cj-scenes__meter i{background:#fff;box-shadow:inset 0 0 0 1.5px var(--ink)}
.cj-scenes.is-in .cj-scenes__meter i{transform:none}
.cj-scenes__px{font-family:var(--mono);font-size:14px;color:var(--ink2);text-align:right}
.cj-scenes__sum{margin-top:14px;font-size:15px;color:var(--ink3)}
.cj-scenes__sum b{font-family:var(--mono);color:var(--ink)}
.cj-versions{display:grid;gap:12px;margin-top:clamp(50px,5vw,80px);padding-top:28px;border-top:1px solid var(--line)}
.cj-versions li{display:grid;grid-template-columns:minmax(0,220px) minmax(0,110px) minmax(0,1fr) auto;align-items:center;gap:16px}
.cj-versions b{font-size:16px}
.cj-versions span{font-size:15px;color:var(--ink3)}
.cj-versions i{height:12px;border-radius:99px;background:var(--paper3);overflow:hidden;position:relative}
.cj-versions i::after{content:"";position:absolute;inset:0;width:calc(var(--w) * 1%);border-radius:99px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease) .2s}
.cj-versions li:last-child i::after{background:var(--gold-t)}
.cj-versions.is-in i::after{transform:none}
.cj-versions em{font-family:var(--mono);font-size:15px;color:var(--ink2)}

/* ---------------------------------------------------------------- 09 SIAN recording */
.cj-sian{position:relative;padding-block:clamp(90px,9vw,150px) clamp(70px,7vw,110px);background:radial-gradient(45% 45% at 72% 30%,#2a2216 0,transparent 70%),radial-gradient(40% 40% at 18% 85%,#1d1a14 0,transparent 70%),var(--k0)}
.cj-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}
.cj-sian__status{display:inline-block;padding:6px 14px;border-radius:99px;font-size:14px;font-weight:800;letter-spacing:.04em;background:var(--gold);color:#17140f}
.cj-sian__info h3{margin-top:20px;font-size:clamp(22px,2vw,32px)}
.cj-sian__info h3 small{display:block;margin-bottom:12px;font-size:clamp(26px,2.5vw,44px);font-weight:300;line-height:1.08;letter-spacing:-.02em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cj-sian__info>p{margin-top:20px;font-size:17px;color:var(--fg2)}
.cj-sian__points{display:grid;gap:10px;margin-top:24px}
.cj-sian__points li{position:relative;padding-left:26px;font-size:16px;font-weight:600;line-height:1.55}
.cj-sian__points li::before{content:"";position:absolute;left:2px;top:.4em;width:12px;height:12px;border-radius:50%;border:2px solid var(--gold)}
.cj-sian__chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:26px}
.cj-sian__chips i{width:26px;height:26px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px #f2eee740}
.cj-sian__chips span{margin-left:10px;font-size:14px;font-weight:700;opacity:.9}
.cj-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(--gold);color:#17140f!important;transition:transform .3s}
.cj-sian__open:hover{transform:translateY(-3px)}
.cj-sian__device{position:relative;padding:0 clamp(50px,7vw,130px) 0 0}
.cj-browser__view{position:relative;aspect-ratio:16/10;background:#000}
.cj-browser__view video{width:100%;height:100%;object-fit:cover}
.cj-phone{position:absolute;right:0;bottom:56px;width:200px;margin:0;padding:8px;border-radius:32px;background:#151413;box-shadow:0 40px 80px -30px #000b,0 0 0 1px #ffffff26}
.cj-phone__notch{position:absolute;z-index:2;top:14px;left:50%;width:62px;height:16px;margin-left:-31px;border-radius:99px;background:#151413}
.cj-phone__view{overflow:hidden;width:100%;border-radius:25px;aspect-ratio:390/844;background:#000}
.cj-phone__view video{width:100%;height:100%;object-fit:cover}
.cj-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)}
.cj-chapter-bar__track{grid-column:1/-1;position:relative;height:3px;border-radius:2px;background:#f2eee726}
.cj-chapter-bar__track i{position:absolute;inset:0;background:var(--grad);transform:scaleX(var(--vp,0));transform-origin:left}
.cj-chapter-bar__list{display:flex;flex-wrap:wrap;gap:6px}
.cj-chapter-bar__list button{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 13px;border-radius:99px;border:1px solid #f2eee733;font-size:14px;font-weight:700;line-height:1.4;color:var(--fg2);transition:background .3s,color .3s,border-color .3s}
.cj-chapter-bar__list button b{font-family:var(--mono);font-size:14px;font-weight:600;opacity:.8}
.cj-chapter-bar__list button[aria-current="true"]{background:var(--gold);border-color:var(--gold);color:#17140f}
.cj-chapter-bar__play{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid #f2eee755;font-size:14px;font-weight:700;color:var(--fg)}
.cj-notes{margin-top:clamp(70px,7vw,120px)}
.cj-notes__strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 20px}
.cj-notes__shot{display:block;width:100%;overflow:hidden;border-radius:12px;background:#000;box-shadow:0 0 0 1px #f2eee726}
.cj-notes__shot img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;transition:transform .8s var(--ease)}
.cj-notes__shot:hover img{transform:scale(1.05)}
.cj-notes__strip b{display:block;margin-top:14px;font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--gold)}
.cj-notes__strip p{margin-top:6px;font-size:15px;line-height:1.6;color:var(--fg2)}

/* ---------------------------------------------------------------- 10 FILM: scrubber */
.cj-scrub{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(30px,4vw,70px);align-items:center;margin-top:clamp(56px,6vw,96px)}
.cj-scrub__view{position:relative;aspect-ratio:1;max-width:720px;width:100%;justify-self:center;overflow:hidden;border-radius:24px;background:#000;box-shadow:0 0 0 1px #f2eee71f;cursor:ew-resize;touch-action:pan-y}
.cj-scrub__cv,.cj-scrub__still{position:absolute;inset:0;width:100%;height:100%}
.cj-scrub.is-ready .cj-scrub__still{visibility:hidden}
.cj-scrub__no{position:absolute;left:18px;top:14px;display:flex;align-items:baseline;gap:8px;font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.1em;color:#ece5d8}
.cj-scrub__no b{min-width:3ch;font-size:22px;color:#fff;font-variant-numeric:tabular-nums}
.cj-scrub__hint{position:absolute;right:18px;bottom:14px;padding:3px 12px;border-radius:99px;background:#000a;box-shadow:0 0 0 1px #f2eee733;font-size:14px;font-weight:700;color:var(--fg2)}
.cj-scrub__range{display:grid;gap:8px;font-size:14px;font-weight:700;color:var(--fg2)}
.cj-scrub__range input{width:100%;accent-color:var(--gold)}
.cj-scrub__order{display:grid;gap:2px;margin-top:22px}
.cj-scrub__order li{padding:8px 0 8px 18px;border-left:2px solid var(--dline);transition:border-color .3s}
.cj-scrub__order button{display:flex;align-items:baseline;gap:12px;text-align:left}
.cj-scrub__order button span{flex:none;min-width:5.5ch;font-family:var(--mono);font-size:14px;font-weight:600;color:var(--gold)}
.cj-scrub__order button b{font-size:16px;color:var(--fg2);transition:color .3s}
.cj-scrub__order p{max-height:0;overflow:hidden;font-size:15px;line-height:1.6;color:var(--fg3);transition:max-height .5s var(--ease),margin-top .3s}
.cj-scrub__order li.is-on{border-color:var(--gold)}
.cj-scrub__order li.is-on b{color:var(--fg)}
.cj-scrub__order li.is-on p{max-height:6em;margin-top:4px}
.cj-specs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;margin-top:clamp(56px,6vw,90px);padding-top:28px;border-top:1px solid var(--dline)}
.cj-specs dt{font-size:clamp(20px,1.7vw,26px);font-weight:700;letter-spacing:-.02em;color:var(--fg)}
.cj-specs dd{margin:6px 0 0;font-size:15px;line-height:1.55;color:var(--fg3)}

/* ---------------------------------------------------------------- 11 YEAR: ring calendar */
.cj-cal{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,4vw,70px);align-items:center;margin-top:clamp(56px,6vw,96px)}
.cj-cal__ring{position:relative;width:min(100%,640px);justify-self:center}
.cj-cal__svg{display:block;width:100%;height:auto;overflow:visible}
.cj-cal__track{fill:none;stroke:#f2eee724;stroke-width:4}
.cj-cal__months line{stroke:#f2eee74d;stroke-width:1.2}
.cj-cal__months line.is-on{stroke:var(--gold);stroke-width:2.4}
.cj-cal__wh line{stroke:#cfb68e66;stroke-width:2.2}
.cj-cal__wh line.is-on{stroke:var(--sun)}
.cj-cal__dots circle{stroke:var(--k1);stroke-width:2;transition:r .4s var(--ease)}
.cj-cal__dots circle[data-kind=vat]{fill:#edd6b8}
.cj-cal__dots circle[data-kind=corp]{fill:#cfb68e}
.cj-cal__dots circle[data-kind=inc]{fill:#9a7b50}
.cj-cal__dots circle[data-kind=wh]{fill:#f2eee7}
.cj-cal__dots circle[data-kind=etc]{fill:#7d7466}
.cj-cal__dots circle.is-on{r:7.5}
.cj-cal__hand{transform:rotate(var(--rot,0deg));transition:transform .6s var(--ease)}
.cj-cal__hand line{stroke:var(--gold);stroke-width:2.2}
.cj-cal__hand circle{fill:var(--gold)}
.cj-cal__labels{position:absolute;inset:0;pointer-events:none}
.cj-cal__labels span{position:absolute;transform:translate(-50%,-50%);font-size:14px;font-weight:700;color:var(--fg3);white-space:nowrap;transition:color .3s}
.cj-cal__labels span.is-on{color:var(--gold)}
.cj-cal__now{position:absolute;left:50%;top:58%;display:grid;justify-items:center;gap:2px;transform:translate(-50%,-50%);text-align:center}
.cj-cal__now b{font-size:clamp(34px,3.4vw,54px);font-weight:300;line-height:1;letter-spacing:-.04em}
.cj-cal__now>span{font-size:15px;font-weight:700;color:var(--fg2)}
.cj-cal__now i{font-style:normal;font-family:var(--mono);color:var(--gold)}
.cj-cal__kinds{display:flex;flex-wrap:wrap;gap:8px 16px;margin-bottom:18px}
.cj-cal__kinds li{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--fg2)}
.cj-cal__kinds i{width:12px;height:12px;border-radius:50%}
[data-kind=vat]>i{background:#edd6b8}[data-kind=corp]>i{background:#cfb68e}[data-kind=inc]>i{background:#9a7b50}[data-kind=wh]>i{background:#f2eee7}[data-kind=etc]>i{background:#7d7466}
.cj-cal__list{display:grid;gap:2px;max-height:min(62vh,600px);overflow:auto;padding-right:6px;scrollbar-width:thin;scrollbar-color:#f2eee733 transparent}
.cj-cal__list>li{border-radius:12px;transition:background .3s}
.cj-cal__list>li>button{display:flex;align-items:baseline;justify-content:space-between;gap:12px;width:100%;padding:9px 12px;text-align:left}
.cj-cal__list>li>button b{font-size:16px;color:var(--fg2)}
.cj-cal__wh-day{font-family:var(--mono);font-size:14px;color:var(--fg3)}
.cj-cal__list ul{display:grid;gap:8px;padding:0 12px 12px}
.cj-cal__list ul li{display:grid;grid-template-columns:3.4em minmax(0,1fr);column-gap:10px;font-size:15px;line-height:1.5}
.cj-cal__list ul li::before{content:"";grid-row:1/3;grid-column:1;align-self:start;justify-self:end;width:8px;height:8px;margin-top:.55em;border-radius:50%;background:#7d7466}
.cj-cal__list ul li[data-kind=vat]::before{background:#edd6b8}.cj-cal__list ul li[data-kind=corp]::before{background:#cfb68e}.cj-cal__list ul li[data-kind=inc]::before{background:#9a7b50}.cj-cal__list ul li[data-kind=wh]::before{background:#f2eee7}
.cj-cal__list time{grid-column:1;grid-row:1;padding-right:14px;font-family:var(--mono);font-size:14px;color:var(--fg3);text-align:right}
.cj-cal__list ul b{grid-column:2;font-weight:700;color:var(--fg)}
.cj-cal__list ul span{grid-column:2;font-size:14px;color:var(--fg3)}
.cj-cal__list>li.is-on{background:#ffffff0d}
.cj-cal__list>li.is-on>button b{color:var(--gold)}

/* ---------------------------------------------------------------- 12 RETRO · 13 CREDITS · ENDING */
.cj-rounds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(60px,6vw,96px)}
.cj-rounds li{position:relative;display:grid;gap:8px;padding:clamp(24px,2.6vw,40px);padding-top:clamp(64px,5.4vw,88px);border-radius:24px;background:var(--paper2);overflow:hidden}
.cj-rounds li::before{content:"";position:absolute;left:clamp(24px,2.6vw,40px);top:clamp(22px,2vw,32px);width:28px;height:28px;border-radius:50%;border:3px solid var(--gold-t)}
.cj-rounds li:nth-child(2)::before{background:var(--gold)}
.cj-rounds li:nth-child(3)::before{border-style:dashed}
.cj-rounds__no{font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.06em;color:var(--ink3)}
.cj-rounds b{font-size:clamp(20px,1.7vw,26px)}
.cj-rounds p{font-size:15px;color:var(--ink2)}
.cj-lessons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin-top:clamp(60px,6vw,96px);padding-top:30px;border-top:1px solid var(--line)}
.cj-lessons li{display:grid;gap:10px;transition-delay:var(--d,0ms)}
.cj-lessons span{font-family:var(--mono);font-size:15px;font-weight:600;color:var(--gold-t)}
.cj-lessons b{font-size:clamp(19px,1.6vw,24px);letter-spacing:-.02em}
.cj-lessons p{font-size:16px;color:var(--ink2)}
.cj-card{max-width:1080px;margin:0 auto;padding:clamp(24px,3vw,44px);border-radius:28px;background:#fff;box-shadow:0 40px 90px -50px #17171a66,inset 0 0 0 1px var(--line)}
.cj-card header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-bottom:18px;border-bottom:2px solid var(--ink);font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.1em}
.cj-card header span:first-child{display:inline-flex;align-items:center;gap:12px}
.cj-card header .cj-mark{color:var(--gold-t)}
.cj-card__title{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 28px;align-items:center;padding:28px 0}
.cj-card__sym{grid-row:span 3;display:grid;place-items:center;width:clamp(110px,12vw,160px);aspect-ratio:1;border-radius:24px;background:var(--k0)}
.cj-card__em{width:68%;height:auto;overflow:visible}
.cj-card__em :is(line,circle){stroke:var(--logo);stroke-width:4.039}
.cj-card__kicker{font-family:var(--mono);font-size:14px;letter-spacing:.14em;color:var(--ink3)}
.cj-card__kicker b{color:var(--gold-t)}
.cj-card__title h2{font-size:clamp(40px,4.4vw,72px);line-height:1.04;letter-spacing:-.05em}
.cj-card__sub{font-size:15px;color:var(--ink2)}
.cj-card__table{width:100%;border-collapse:collapse;font-size:16px}
.cj-card__table thead th{padding:10px 12px;border-bottom:1px solid var(--ink);font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.1em;text-align:left;color:var(--ink3)}
.cj-card__table tbody th{width:150px;padding:12px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.06em;text-align:left;vertical-align:top;color:var(--gold-7)}
.cj-card__table td{padding:12px;border-bottom:1px solid var(--line);line-height:1.6}
.cj-card__foot{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;margin-top:22px;padding:16px 18px;border-radius:16px;background:var(--k0);color:var(--fg)}
.cj-card__foot>span:first-child{font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.12em;color:var(--gold)}
.cj-card__foot b{font-size:17px}
.cj-ending{text-align:center;background:radial-gradient(60% 60% at 50% 0,#2a2216 0,var(--k0) 70%)}
.cj-ending h2{margin-top:22px}
.cj-ending .cj-wrap>p{max-width:760px;margin:24px auto 0;font-size:18px;color:var(--fg2)}
.cj-ending__links{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:22px 36px;margin-top:40px}
.cj-others{margin-top:clamp(80px,8vw,130px);text-align:left}
.cj-others__title{font-size:clamp(24px,2vw,32px)!important}
.cj-others ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:26px}
.cj-others a{display:grid;gap:10px}
.cj-others__img{display:block;overflow:hidden;border-radius:16px;aspect-ratio:820/568;background:var(--k2)}
.cj-others__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.cj-others a:hover .cj-others__img img{transform:scale(1.04)}
.cj-others__tag{font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.06em;color:var(--gold)}
.cj-others strong{font-size:20px}
.cj-others__desc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:15px;line-height:1.65;color:var(--fg2)}

/* ---------------------------------------------------------------- index · lightbox */
.cj-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:#ffffffeb;box-shadow:0 18px 40px #17171a33,inset 0 0 0 1px #17171a1a;backdrop-filter:blur(10px);transform:translate(-50%,140%);opacity:0;transition:transform .5s var(--ease),opacity .5s,background .4s;font-family:'Pretendard Variable',Pretendard,sans-serif;overflow-x:auto;scrollbar-width:none}
.cj-index::-webkit-scrollbar{display:none}
.cj-index.is-visible{transform:translate(-50%,0);opacity:1}
.cj-index__gauge{position:relative;display:block;width:34px;height:34px;flex:none;margin-right:10px;border-radius:50%;background:conic-gradient(var(--gold-t) calc(var(--g,0) * 360deg),#17171a1a 0)}
.cj-index__gauge i{position:absolute;inset:4px;border-radius:50%;background:#fff}
.cj-index a{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 9px;border-radius:99px;color:#4b4a48;font-size:14px;font-weight:700;white-space:nowrap;transition:background .3s,color .3s}
.cj-index a b{font-family:var(--mono);font-size:14px;font-weight:600;color:#6b6966}
.cj-index a span{display:none}
.cj-index a:hover{color:#17171a}
.cj-index a[aria-current]{background:#17171a;color:#fff}
.cj-index a[aria-current] b{color:var(--gold)}
.cj-index a[aria-current] span{display:inline}
.cj-index.is-night{background:#0b0b0deb;box-shadow:0 18px 40px #0006,inset 0 0 0 1px #f2eee72e}
.cj-index.is-night .cj-index__gauge{background:conic-gradient(var(--gold) calc(var(--g,0) * 360deg),#f2eee726 0)}
.cj-index.is-night .cj-index__gauge i{background:#0b0b0d}
.cj-index.is-night a{color:#cdc7bc}
.cj-index.is-night a b{color:#a8a297}
.cj-index.is-night a:hover{color:#fff}
.cj-index.is-night a[aria-current]{background:var(--gold);color:#17140f}
.cj-index.is-night a[aria-current] b{color:#17140f}
.cj-lightbox{width:min(1240px,94vw);max-width:none;height:92vh;max-height:none;padding:0;border:0;border-radius:18px;background:#121110;color:#fff;overflow:hidden}
.cj-lightbox::backdrop{background:#000000e0;backdrop-filter:blur(4px)}
.cj-lightbox__bar{display:flex;justify-content:space-between;align-items:center;gap:20px;height:60px;padding:0 20px;border-bottom:1px solid #ffffff1a}
.cj-lightbox__bar p{font-family:'Pretendard Variable',Pretendard,sans-serif;font-size:15px;font-weight:600}
.cj-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}
.cj-lightbox__scroll{height:calc(92vh - 60px);overflow:auto;padding:20px}
.cj-lightbox__list{display:grid;gap:26px;margin:0;padding:0;list-style:none}
.cj-lightbox__list figure{margin:0}
.cj-lightbox__list img{display:block;width:100%;height:auto;border-radius:10px;background:#1b1a18}
.cj-lightbox__list li.is-narrow img{width:auto;max-width:100%;margin-inline:auto}
.cj-lightbox__list figcaption{display:flex;gap:10px;margin-top:10px;font-family:'Pretendard Variable',Pretendard,sans-serif;font-size:15px;font-weight:600}
.cj-lightbox__list figcaption b{color:#cfb68e;font-family:'JetBrains Mono',monospace;font-size:14px}
.cj-lightbox__list li.is-target figure img{box-shadow:0 0 0 3px #cfb68e}

/* ---------------------------------------------------------------- responsive */
@media (min-width:1101px) and (max-height:820px){
  .cj-em__steps li{padding-block:8px}
  .cj-em__steps li.is-on p{font-size:15px}
  .cj-pen__notes li{padding-block:10px}
  .cj-pen__notes b{font-size:17px}
}
@media (max-width:1100px){
  .cj-split,.cj-scrub,.cj-cal{grid-template-columns:minmax(0,1fr);gap:28px}
  .cj-meta,.cj-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cj-stats{gap:34px 0}
  .cj-stats li:nth-child(2){border-right:0}
  .cj-stats li:nth-child(3){padding-left:0}
  .cj-timeline{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:30px}
  .cj-timeline::before{display:none}
  .cj-hero__visual{top:calc(var(--head) + 2vh);right:auto;left:50%;width:min(88vw,64svh);transform:translateX(-50%)}
  .cj-hero__title{top:auto;bottom:calc(4vh + 60px);width:min(680px,88vw);transform:none}
  .cj-hero.is-off .cj-hero__title{transform:translateY(-30px)}
  .cj-hero__beats{width:auto;right:6vw}
  .cj-hud__top{display:none}
  html:not(.cj-motion) .cj-hero__pin{grid-template-columns:minmax(0,1fr)}
  html:not(.cj-motion) .cj-hero__visual{grid-column:1;grid-row:1;left:auto;width:min(100%,520px);justify-self:center}
  html:not(.cj-motion) .cj-hero__title{grid-row:2}
  .cj-edit{grid-template-columns:44px minmax(0,1fr);row-gap:10px}
  .cj-edit__no{grid-row:1}
  .cj-edit__place{grid-column:2;grid-row:1}
  .cj-edit__old,.cj-edit__new,.cj-edit__why{grid-column:2;grid-row:auto}
  .cj-pen__stage{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);align-content:center;gap:16px}
  .cj-pen__notes{min-height:7.5em}
  .cj-pen__notes li{grid-area:1/1;opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s;border-left-color:var(--red)}
  .cj-pen__notes li.is-on{opacity:1;transform:none}
  .cj-pen__notes li p{max-height:none;margin-top:6px}
  html:not(.cj-motion) .cj-pen__notes li{grid-area:auto;opacity:1;transform:none}
  .cj-pen__frame{width:min(100%,460px)}
  .cj-pen__view{height:auto;aspect-ratio:10/11;max-height:52svh}
  .cj-em__stage{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:16px;align-items:end;padding-bottom:92px}
  html.cj-motion .cj-em__stage{align-content:center}
  .cj-em__fig{width:min(70vw,44svh);align-self:end}
  .cj-em__steps{min-height:9em}
  .cj-em__steps li{grid-area:1/1;opacity:0;transform:translateY(12px);transition:opacity .45s,transform .45s;border-left-color:var(--gold)}
  .cj-em__steps li.is-on{opacity:1;transform:none}
  .cj-em__steps li p{max-height:none;margin-top:8px}
  html:not(.cj-motion) .cj-em__steps li{grid-area:auto;opacity:1;transform:none}
  .cj-reading,.cj-rounds,.cj-lessons{grid-template-columns:minmax(0,1fr)}
  .cj-icons{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cj-try__cards{grid-template-columns:minmax(0,1fr)}
  .cj-try__card{min-height:0}
  .cj-ramp__row{grid-template-columns:repeat(5,minmax(0,1fr))}
  .cj-palette{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cj-sun{grid-template-columns:minmax(0,1fr)}
  .cj-sun__copy{grid-row:auto}
  /* 좁은 화면은 고정하지 않고 카드마다 자기 자리에서 햇빛이 지나간다(case-changjotax.js) */
  html.cj-motion .cj-swap{height:auto}
  html.cj-motion .cj-swap__stage{position:relative;top:auto;height:auto;padding-bottom:0}
  .cj-swap__grid{width:100%}
  .cj-rules{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cj-scenes__rows li{grid-template-columns:36px minmax(0,1fr) 76px;row-gap:6px}
  .cj-scenes__name{grid-column:2}
  .cj-scenes__px{grid-column:3;grid-row:1}
  .cj-scenes__desc{grid-column:2/4}
  .cj-scenes__meter{grid-column:2/4}
  .cj-scenes__strip b{display:none}
  .cj-versions li{grid-template-columns:minmax(0,1fr) auto;gap:6px 14px}
  .cj-versions i{grid-column:1/-1}
  .cj-sian__inner{grid-template-columns:minmax(0,1fr)}
  .cj-sian__device{padding-right:0}
  .cj-sian__device .cj-phone{display:none}
  .cj-chapter-bar{max-width:none}
  .cj-notes__strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cj-specs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cj-cal__list{max-height:none;overflow:visible}
  .cj-others ul{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  .cj{font-size:16px}
  .cj-wrap,.cj-em__stage,.cj-pen__stage,.cj-swap__stage{width:calc(100% - 40px)}
  .cj-sec{padding-block:86px}
  .cj h2{font-size:clamp(30px,8.4vw,40px)}
  .cj-head{font-size:14px;margin-bottom:40px}
  .cj-head>span:first-child{letter-spacing:.06em}
  .cj-head>span:last-child{text-align:right}
  .cj-prose p{font-size:17px}
  .cj-meta,.cj-stats,.cj-now{grid-template-columns:minmax(0,1fr)}
  .cj-stats li{padding:0;border-right:0}
  .cj-logo{grid-template-columns:minmax(0,1fr)}
  .cj-timeline{grid-template-columns:minmax(0,1fr)}
  .cj-hero__visual{width:min(100vw,52svh);top:calc(var(--head) + 4px)}
  /* 제목이 겹치는 그림 아래쪽은 검게 녹이고, 제목이 있는 동안에는 프레임 표시를 숨긴다 */
  .cj-hero__visual::after{content:"";position:absolute;inset:auto 0 0;height:42%;background:linear-gradient(transparent,#000 92%);opacity:1;transition:opacity .5s;pointer-events:none}
  .cj-hero.is-off .cj-hero__visual::after{opacity:0}
  .cj-hero:not(.is-off) .cj-hud{opacity:0}
  .cj-hud{transition:opacity .4s}
  .cj-card header>span:last-child{display:none}
  .cj-hero__title h1{font-size:clamp(46px,13vw,64px)}
  html:not([lang="ko"]) .cj-hero__title h1{font-size:clamp(36px,10.4vw,52px)}
  .cj-hero__lead{font-size:16px}
  .cj-hero__lead span{font-size:14px}
  .cj-hud__read{left:20px;right:auto;top:auto;bottom:calc(3vh + 46px);font-size:14px}
  .cj-hud__read b{font-size:18px}
  .cj-hero__beats{left:20px;right:20px;bottom:calc(3vh + 96px);height:150px}
  .cj-beat{font-size:18px}
  .cj-hero__steps{left:20px;right:20px;gap:4px;overflow:hidden}
  .cj-hero__steps li[data-h]{padding:2px 8px}
  .cj-hero__hint,.cj-hero__engine{display:none}
  .cj-hero__title{left:20px;right:20px;width:auto;bottom:calc(3vh + 56px)}
  .cj-hero__nos li{padding:0 5px}
  .cj-twin{grid-template-columns:minmax(0,1fr)}
  /* 고정 장면의 바닥은 하단 안내도(bottom 84px) · 공용 상담 띠 위로 올린다 */
  html.cj-motion :is(.cj-em__stage,.cj-pen__stage,.cj-swap__stage){padding-bottom:168px}
  .cj-pen__notes{min-height:9em}
  .cj-pen__view{max-height:44svh}
  .cj-em__fig{width:min(64vw,36svh)}
  .cj-em__syl{font-size:40px}
  .cj-em__dim{right:0;transform:translate(0,-50%)}
  .cj-em__dim::before{display:none}
  .cj-em__nos li{font-size:14px;padding:0 4px}
  .cj-em__steps{min-height:9.6em}
  .cj-em__steps li{padding-block:8px}
  .cj-em__steps li p{font-size:15px;line-height:1.65}
  .cj-lines{width:calc(100% - 20px)}
  .cj-lines__tag{font-size:14px;padding:1px 6px}
  .cj-lines__tag--c,.cj-lines__tag--d{display:none}
  .cj-icons{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .cj-ramp__row{gap:4px}
  .cj-ramp__cell{min-height:96px;padding:8px}
  .cj-ramp__cell code,.cj-ramp__cell small{display:none}
  .cj-ramp__cell em{left:6px;top:6px;padding:0 5px}
  .cj-palette{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cj-sun__bar{height:72px}
  .cj-sun__legend{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cj-swap__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cj-swap figcaption{font-size:14px}
  .cj-swap figcaption b{font-size:14px}
  .cj-rules{grid-template-columns:minmax(0,1fr)}
  .cj-wide{grid-template-columns:minmax(0,1fr)}
  .cj-notes__strip{grid-template-columns:minmax(0,1fr)}
  .cj-sian__inner{width:calc(100% - 40px)}
  .cj-chapter-bar__list button{min-height:44px}
  .cj-browser__bar{height:34px;padding:0 10px}
  .cj-browser__url{padding:2px 14px}
  .cj-browser__live{display:none}
  .cj-specs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cj-cal__labels span{font-size:14px}
  .cj-index{bottom:84px;padding-left:8px}
  .cj-index__gauge{display:none}
  .cj-card__title{grid-template-columns:minmax(0,1fr)}
  .cj-card__sym{grid-row:auto;width:96px}
  .cj-card__table tbody th{width:96px}
  .cj-card__foot{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .cj *{transition-duration:.01ms!important;animation:none!important}
}