@font-face{font-family:'JinusSUIT';src:url('/fonts/SUIT-Variable.woff2') format('woff2');font-weight:100 900;font-display:swap}

#jinus-portfolio{--j-bg:light-dark(#fff,#131315);--j-ink:light-dark(#17171a,#f5f5f5);--j-muted:light-dark(#62626b,#b0b0ba);--j-line:light-dark(#e5e5e8,#36363c);--j-soft:light-dark(#f6f6f7,#202024);--j-pink:#e5006e;--j-onpink:#fff;--j-radius:3px;font-family:'JinusSUIT','Noto Sans KR',sans-serif;color:var(--j-ink);background:var(--j-bg);container-type:inline-size;isolation:isolate;overflow:clip;font-size:15px;line-height:1.6}
#jinus-portfolio *{box-sizing:border-box}#jinus-portfolio [hidden]{display:none!important}#jinus-portfolio h1,#jinus-portfolio h2,#jinus-portfolio h3,#jinus-portfolio p{margin:0}#jinus-portfolio a{color:inherit;text-decoration:none}#jinus-portfolio button,#jinus-portfolio input,#jinus-portfolio textarea,#jinus-portfolio select{font:inherit}#jinus-portfolio button{cursor:pointer}#jinus-portfolio button:focus-visible,#jinus-portfolio a:focus-visible,#jinus-portfolio input:focus-visible,#jinus-portfolio textarea:focus-visible{outline:3px solid var(--j-pink);outline-offset:4px}#jinus-portfolio .j-wrap{padding-inline:clamp(20px,4.4cqw,56px)}
#jinus-portfolio .j-head{height:82px;border-bottom:1px solid var(--j-line);display:flex;align-items:center;justify-content:space-between;gap:24px}#jinus-portfolio .j-logo{font-weight:900;font-size:33px;letter-spacing:-2px;line-height:1;display:flex;align-items:baseline;gap:5px}#jinus-portfolio .j-dot{width:7px;height:7px;background:var(--j-pink);border-radius:50%;display:inline-block}#jinus-portfolio .j-wordmark{font-size:9px;letter-spacing:.1em;font-weight:600;margin-left:8px;line-height:1.3;max-width:80px}#jinus-portfolio .j-nav{display:flex;align-items:center;gap:23px;font-size:12px;font-weight:650}#jinus-portfolio .j-navbutton{border:0;background:transparent;padding:14px 0;color:var(--j-ink)}#jinus-portfolio .j-active{color:var(--j-pink)!important;border-bottom:2px solid var(--j-pink)!important}#jinus-portfolio .j-contactlink{border:1px solid var(--j-ink);padding:9px 14px;background:transparent;color:var(--j-ink)}#jinus-portfolio .j-mobilemenu{display:none}#jinus-portfolio .j-menu{padding-block:12px;border-bottom:1px solid var(--j-line);display:flex;gap:20px;flex-wrap:wrap}
#jinus-portfolio .j-hero{padding-block:53px 38px;display:grid;grid-template-columns:1.03fr 1fr;gap:35px;align-items:center}#jinus-portfolio .j-eyebrow{font-size:11px;font-weight:750;letter-spacing:.13em;color:var(--j-pink);margin-bottom:17px}#jinus-portfolio .j-hero h1{font-size:clamp(30px,4.4cqw,52px);font-weight:850;letter-spacing:-.055em;line-height:1.25;word-break:keep-all}#jinus-portfolio .j-hero h1 em{font-style:normal;color:var(--j-pink)}#jinus-portfolio .j-lead{color:var(--j-muted);font-size:14px;line-height:1.8;margin-top:20px;word-break:keep-all;max-width:380px}#jinus-portfolio .j-actions{display:flex;gap:12px;margin-top:26px;align-items:center;flex-wrap:wrap}#jinus-portfolio .j-button{border:1px solid var(--j-line);border-radius:var(--j-radius);background:var(--j-bg);color:var(--j-ink);padding:11px 17px;font-size:12px;font-weight:700;display:inline-flex;gap:18px;align-items:center;justify-content:center;min-height:43px}#jinus-portfolio .j-primary{background:var(--j-pink);color:var(--j-onpink);border-color:var(--j-pink)}#jinus-portfolio .j-textbutton{border:0;background:transparent;color:var(--j-ink);padding:11px 0;font-size:12px;font-weight:650}#jinus-portfolio .j-arrow{font-size:20px;line-height:1}
#jinus-portfolio .j-feature{position:relative;min-height:296px;padding:24px;background:#17171b;color:#fff;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;border-radius:var(--j-radius)}#jinus-portfolio .j-featuretop{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.16em;z-index:1}#jinus-portfolio .j-featuretitle{font-size:clamp(46px,7.8cqw,90px);line-height:.91;font-weight:850;letter-spacing:-.07em;z-index:1}#jinus-portfolio .j-featuretitle span{color:#f7278b}#jinus-portfolio .j-orbit{width:160px;height:160px;border:1px solid #63636d;border-radius:50%;position:absolute;right:-45px;top:75px;transform:rotate(-28deg)}#jinus-portfolio .j-orbit:before{content:'';position:absolute;inset:17px -25px;border:1px solid #63636d;border-radius:50%;transform:rotate(40deg)}#jinus-portfolio .j-orbit:after{content:'';position:absolute;left:-10px;top:70px;width:22px;height:22px;border-radius:50%;background:#f7278b}#jinus-portfolio .j-featurebottom{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#c4c4cc;z-index:1}#jinus-portfolio .j-feature .j-play{background:#fff;color:#17171b;border:0;border-radius:50%;width:38px;height:38px;font-size:17px;display:grid;place-items:center}#jinus-portfolio .j-playing .j-orbit{animation:j-orbit 2.4s ease-in-out}#jinus-portfolio .j-playing .j-featuretitle{animation:j-type 1.2s ease-in-out}#jinus-portfolio .j-playing .j-bottle{animation:j-float 2.4s ease-in-out}#jinus-portfolio .j-playing .j-block{animation:j-block 1.8s ease-in-out}#jinus-portfolio .j-strip{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-block:18px;border-top:1px solid var(--j-line);border-bottom:1px solid var(--j-line);font-size:11px;color:var(--j-muted)}#jinus-portfolio .j-strip strong{color:var(--j-ink);font-weight:700;margin-right:8px}#jinus-portfolio .j-small{font-size:11px;color:var(--j-muted)}
#jinus-portfolio .j-gallery{padding-block:38px 40px}#jinus-portfolio .j-sectionhead{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:22px}#jinus-portfolio h2{font-size:26px;letter-spacing:-.045em;font-weight:800;line-height:1.3}#jinus-portfolio .j-sub{font-size:12px;color:var(--j-muted);margin-top:8px}#jinus-portfolio .j-filters{display:flex;gap:6px;flex-wrap:wrap}#jinus-portfolio .j-filter{border:1px solid var(--j-line);border-radius:2px;background:var(--j-bg);color:var(--j-muted);padding:7px 12px;font-size:11px}#jinus-portfolio .j-filter[aria-pressed=true]{background:var(--j-ink);color:var(--j-bg);border-color:var(--j-ink)}#jinus-portfolio .j-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}#jinus-portfolio .j-work{min-width:0}#jinus-portfolio .j-screen{position:relative;width:100%;height:198px;border:0;overflow:hidden;border-radius:var(--j-radius);text-align:left;display:block;padding:20px;color:#fff;background:#202126}#jinus-portfolio .j-screen .j-mininav{font-size:8px;letter-spacing:.08em;display:flex;justify-content:space-between;position:relative;z-index:2}#jinus-portfolio .j-cover-title{font-size:clamp(25px,3.7cqw,43px);font-weight:850;letter-spacing:-.06em;line-height:.98;position:absolute;top:69px;left:20px;z-index:1}#jinus-portfolio .j-cover-lower{position:absolute;left:20px;bottom:17px;font-size:8px;letter-spacing:.08em}#jinus-portfolio .j-lime{color:#d7ff64}#jinus-portfolio .j-rings{position:absolute;right:-23px;top:52px;width:125px;height:125px;border:18px solid #d7ff64;border-radius:50%;transform:rotate(-25deg)}#jinus-portfolio .j-rings:after{content:'';position:absolute;inset:9px -28px;border:1px solid #d7ff64;border-radius:50%}#jinus-portfolio .j-screen-b{background:#e8e2d7;color:#373a2b}#jinus-portfolio .j-screen-b .j-cover-title{font-family:Georgia,serif;font-size:36px;letter-spacing:-.05em;font-weight:400;top:71px}#jinus-portfolio .j-bottle{position:absolute;width:57px;height:111px;border-radius:8px 8px 12px 12px;background:linear-gradient(90deg,#a6a78e,#e5e0c6 35%,#c2c1a3 80%,#969b7e);right:32px;top:65px;box-shadow:18px 20px 17px #736b4b30;transform:rotate(9deg);display:grid;place-items:center;font-size:8px;text-align:center;color:#303627;line-height:1.3}#jinus-portfolio .j-bottle:before{content:'';position:absolute;width:27px;height:15px;background:#373e32;top:-14px;left:15px;border-radius:3px 3px 0 0}#jinus-portfolio .j-screen-c{background:#294fec;color:#fff}#jinus-portfolio .j-screen-c .j-cover-title{font-size:35px;top:68px;line-height:1.03}#jinus-portfolio .j-block{position:absolute;right:13px;top:77px;width:85px;height:85px;border-radius:22px;background:#adcbff;transform:rotate(-20deg);box-shadow:-9px 9px 0 #142eac,inset 0 0 0 2px #d5e3ff}#jinus-portfolio .j-block:after{content:'+';font-size:60px;font-weight:400;position:absolute;inset:-6px 0 0;text-align:center;color:#294fec}#jinus-portfolio .j-worktop{display:flex;justify-content:space-between;margin-top:15px;align-items:center;gap:8px}#jinus-portfolio .j-work h3{font-size:15px;letter-spacing:-.03em;font-weight:750}#jinus-portfolio .j-worknum{font-size:10px;color:var(--j-muted)}#jinus-portfolio .j-workdesc{font-size:11px;color:var(--j-muted);margin-top:4px}#jinus-portfolio .j-workactions{display:flex;justify-content:space-between;margin-top:12px;border-top:1px solid var(--j-line);padding-top:8px}#jinus-portfolio .j-workactions button{border:0;background:transparent;color:var(--j-ink);font-size:11px;padding:5px 0;min-height:32px}#jinus-portfolio .j-workactions .j-choose{color:var(--j-pink);font-weight:700}#jinus-portfolio .j-disclosure{margin-top:19px;font-size:11px;color:var(--j-muted)}
#jinus-portfolio .j-bottom{padding-block:32px 35px;background:var(--j-soft);display:grid;grid-template-columns:1fr 1.8fr;gap:30px}#jinus-portfolio .j-bottom h2{font-size:22px}#jinus-portfolio .j-process{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}#jinus-portfolio .j-processnum{font-size:11px;color:var(--j-pink);font-weight:750}#jinus-portfolio .j-process h3{font-size:13px;margin-top:7px;font-weight:750}#jinus-portfolio .j-process p{font-size:11px;color:var(--j-muted);margin-top:4px}#jinus-portfolio .j-footer{padding-block:20px;font-size:10px;color:var(--j-muted);display:flex;justify-content:space-between;gap:20px}#jinus-portfolio .j-back{border:0;background:transparent;color:var(--j-muted);padding:0 0 20px;font-size:12px}#jinus-portfolio .j-page{padding-block:32px 42px}#jinus-portfolio .j-detailgrid{display:grid;grid-template-columns:1.6fr 1fr;gap:32px;align-items:start}#jinus-portfolio .j-detail-screen{height:390px;padding:30px}#jinus-portfolio .j-detail-screen .j-mininav{font-size:11px}#jinus-portfolio .j-detail-screen .j-cover-title{font-size:clamp(46px,7cqw,78px);top:130px;left:30px}#jinus-portfolio .j-detail-screen .j-cover-lower{left:30px;bottom:27px;font-size:10px}#jinus-portfolio .j-detail-screen .j-rings{width:210px;height:210px;border-width:30px;top:120px;right:-35px}#jinus-portfolio .j-detail-screen .j-bottle{width:100px;height:190px;right:55px;top:140px;font-size:13px}#jinus-portfolio .j-detail-screen .j-bottle:before{width:50px;height:25px;top:-24px;left:25px}#jinus-portfolio .j-detail-screen .j-block{width:150px;height:150px;top:145px;right:20px}#jinus-portfolio .j-detail-screen .j-block:after{font-size:110px}#jinus-portfolio .j-devicebar{display:flex;justify-content:space-between;align-items:center;padding-block:14px;gap:8px}#jinus-portfolio .j-detailtitle{font-size:30px!important;margin-top:8px!important}#jinus-portfolio .j-detailtext{font-size:13px;color:var(--j-muted);margin-block:15px 22px}#jinus-portfolio .j-spec{display:grid;grid-template-columns:75px 1fr;font-size:12px;gap:13px 10px;border-top:1px solid var(--j-line);padding-top:20px;margin:0 0 24px}#jinus-portfolio .j-spec dt{color:var(--j-muted)}#jinus-portfolio .j-spec dd{margin:0}#jinus-portfolio .j-detailnotes{margin-top:25px;padding-top:22px;border-top:1px solid var(--j-line)}#jinus-portfolio .j-detailnotes h3{font-size:15px}#jinus-portfolio .j-detailnotes p{font-size:12px;color:var(--j-muted);margin-top:7px}#jinus-portfolio .j-formgrid{display:grid;grid-template-columns:.9fr 1.3fr;gap:60px}#jinus-portfolio .j-selected{margin-top:25px;border-top:2px solid var(--j-pink);padding-top:18px}#jinus-portfolio .j-selected small{font-size:11px;color:var(--j-muted)}#jinus-portfolio .j-selected strong{display:block;font-size:21px;margin-top:4px}#jinus-portfolio .j-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}#jinus-portfolio .j-field{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:650}#jinus-portfolio .j-field input,#jinus-portfolio .j-field textarea,#jinus-portfolio .j-field select{min-width:0;width:100%;border:1px solid var(--j-line);background:var(--j-bg);color:var(--j-ink);padding:11px 12px;border-radius:2px;font-size:14px;font-weight:400}#jinus-portfolio .j-wide{grid-column:1/-1}#jinus-portfolio .j-formnotice{font-size:11px;color:var(--j-muted);margin-top:16px}#jinus-portfolio .j-success{padding:18px;background:var(--j-soft);margin-top:18px;border-left:3px solid var(--j-pink);font-size:13px}#jinus-portfolio .j-check{display:flex;gap:8px;align-items:center;font-size:12px;margin-top:18px}#jinus-portfolio .j-check input{accent-color:var(--j-pink)}#jinus-portfolio .j-status{font-size:12px;color:var(--j-muted)}#jinus-portfolio .j-pagerlabel{font-size:10px;color:var(--j-muted);letter-spacing:.05em}
@keyframes j-orbit{50%{transform:rotate(150deg)}}@keyframes j-type{0%{transform:translateY(0)}45%{transform:translateY(-12px);letter-spacing:-.02em}100%{transform:translateY(0)}}@keyframes j-float{50%{transform:translateY(-15px) rotate(-7deg)}}@keyframes j-block{50%{transform:rotate(35deg) translateY(-12px)}}
@container(max-width:760px){#jinus-portfolio .j-head{height:72px}#jinus-portfolio .j-nav{gap:16px}#jinus-portfolio .j-desktop{display:none}#jinus-portfolio .j-hero{gap:22px;padding-block:35px 30px}#jinus-portfolio .j-feature{min-height:260px;padding:20px}#jinus-portfolio .j-featuretitle{font-size:55px}#jinus-portfolio .j-lead{font-size:13px}#jinus-portfolio .j-grid{gap:14px}#jinus-portfolio .j-screen{height:172px;padding:15px}#jinus-portfolio .j-cover-title{left:15px;font-size:28px}#jinus-portfolio .j-rings{right:-42px;width:110px;height:110px}#jinus-portfolio .j-screen-b .j-cover-title{font-size:29px;left:15px}#jinus-portfolio .j-bottle{right:12px;width:47px;height:95px;top:62px}#jinus-portfolio .j-bottle:before{left:10px}#jinus-portfolio .j-screen-c .j-cover-title{font-size:28px}#jinus-portfolio .j-block{right:-5px;width:65px;height:65px}#jinus-portfolio .j-sectionhead{align-items:start;flex-direction:column;gap:14px}#jinus-portfolio .j-bottom{grid-template-columns:1fr;gap:22px}#jinus-portfolio .j-detailgrid{grid-template-columns:1fr}#jinus-portfolio .j-formgrid{grid-template-columns:1fr;gap:30px}}
@container(max-width:540px){#jinus-portfolio .j-nav{gap:14px}#jinus-portfolio .j-nav .j-contactlink{display:none}#jinus-portfolio .j-mobilemenu{display:block}#jinus-portfolio .j-wordmark{display:none}#jinus-portfolio .j-logo{font-size:30px}#jinus-portfolio .j-hero{grid-template-columns:1fr;padding-block:30px;gap:25px}#jinus-portfolio .j-hero h1{font-size:36px}#jinus-portfolio .j-lead{font-size:14px;max-width:100%}#jinus-portfolio .j-feature{min-height:265px}#jinus-portfolio .j-featuretitle{font-size:76px}#jinus-portfolio .j-eyebrow{margin-bottom:13px}#jinus-portfolio .j-actions{margin-top:19px}#jinus-portfolio .j-strip{align-items:start;flex-direction:column;gap:7px;padding-block:15px}#jinus-portfolio .j-gallery{padding-top:30px}#jinus-portfolio .j-grid{grid-template-columns:1fr;gap:29px}#jinus-portfolio .j-screen{height:230px;padding:21px}#jinus-portfolio .j-screen .j-mininav{font-size:10px}#jinus-portfolio .j-cover-title{left:21px;font-size:46px;top:80px}#jinus-portfolio .j-screen-b .j-cover-title{font-size:44px;top:80px;left:21px}#jinus-portfolio .j-screen-c .j-cover-title{font-size:43px;top:80px}#jinus-portfolio .j-rings{right:0;width:145px;height:145px;top:65px}#jinus-portfolio .j-bottle{right:38px;width:64px;height:125px;top:80px}#jinus-portfolio .j-bottle:before{left:18px}#jinus-portfolio .j-block{right:20px;top:87px;width:90px;height:90px}#jinus-portfolio .j-work h3{font-size:18px}#jinus-portfolio .j-workdesc,#jinus-portfolio .j-workactions button{font-size:13px}#jinus-portfolio .j-workactions button{min-height:44px}#jinus-portfolio .j-filter{font-size:12px;min-height:40px;padding-inline:12px}#jinus-portfolio .j-process{grid-template-columns:1fr;gap:20px}#jinus-portfolio .j-process>div{display:grid;grid-template-columns:30px 1fr;column-gap:9px}#jinus-portfolio .j-process h3{margin-top:0}#jinus-portfolio .j-process p{grid-column:2}#jinus-portfolio .j-footer{flex-direction:column;gap:5px}#jinus-portfolio .j-detail-screen{height:330px}#jinus-portfolio .j-detail-screen .j-cover-title{font-size:55px;top:110px}#jinus-portfolio .j-detail-screen .j-rings{right:-30px;top:100px;width:170px;height:170px}#jinus-portfolio .j-fields{grid-template-columns:1fr}#jinus-portfolio .j-field input,#jinus-portfolio .j-field textarea,#jinus-portfolio .j-field select{font-size:16px}#jinus-portfolio .j-button{min-height:44px}#jinus-portfolio .j-devicebar{align-items:start;flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){#jinus-portfolio *,#jinus-portfolio *:before,#jinus-portfolio *:after{animation:none!important;transition:none!important}}

#jinus-portfolio .j-screen .j-mininav{position:absolute;top:20px;left:20px;right:20px}
#jinus-portfolio .j-screen .j-rings{right:-45px}
#jinus-portfolio .j-screen-c .j-block{right:-2px;width:72px;height:72px}
#jinus-portfolio .j-detail-screen .j-mininav{top:28px;left:30px;right:30px}
#jinus-portfolio .j-detail-screen .j-rings{right:-35px}
#jinus-portfolio .j-detail-screen.j-screen-c .j-block{right:20px;width:150px;height:150px}
#jinus-portfolio .j-brandimage{width:96px;height:33px;object-fit:contain;display:block}
@container(max-width:540px){#jinus-portfolio .j-screen .j-rings{width:132px;height:132px;right:-40px}#jinus-portfolio .j-screen-c .j-cover-title{font-size:38px}#jinus-portfolio .j-screen-c .j-block{right:6px;top:97px}#jinus-portfolio .j-detail-screen .j-rings{width:170px;height:170px;right:-35px}#jinus-portfolio .j-detail-screen.j-screen-c .j-cover-title{font-size:50px}#jinus-portfolio .j-detail-screen.j-screen-c .j-block{width:100px;height:100px;top:140px;right:0}}


#jinus-portfolio{--j-textpink:light-dark(#c90060,#ff7ab5)}
#jinus-portfolio .j-eyebrow,#jinus-portfolio .j-processnum,#jinus-portfolio .j-workactions .j-choose{color:var(--j-textpink)}
#jinus-portfolio .j-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
#jinus-portfolio .j-brandimage{width:138px;height:44px}
#jinus-portfolio .j-nav,#jinus-portfolio .j-button,#jinus-portfolio .j-textbutton,#jinus-portfolio .j-sub,#jinus-portfolio .j-filter,#jinus-portfolio .j-workdesc,#jinus-portfolio .j-worknum,#jinus-portfolio .j-workactions button,#jinus-portfolio .j-strip,#jinus-portfolio .j-disclosure,#jinus-portfolio .j-small,#jinus-portfolio .j-process p,#jinus-portfolio .j-footer,#jinus-portfolio .j-featurebottom,#jinus-portfolio .j-featuretop,#jinus-portfolio .j-eyebrow,#jinus-portfolio .j-processnum{font-size:13px}
#jinus-portfolio .j-featuretop{letter-spacing:.03em}
#jinus-portfolio .j-bottle{background:#bfc1a4}
#jinus-portfolio .j-detail-screen .j-mininav,#jinus-portfolio .j-detail-screen .j-cover-lower,#jinus-portfolio .j-detailtext,#jinus-portfolio .j-spec,#jinus-portfolio .j-detailnotes p,#jinus-portfolio .j-field,#jinus-portfolio .j-formnotice,#jinus-portfolio .j-check,#jinus-portfolio .j-back,#jinus-portfolio .j-pagerlabel,#jinus-portfolio .j-selected small{font-size:13px}
#jinus-portfolio .j-filters{gap:5px}#jinus-portfolio .j-filter{padding:7px 10px}
@container(max-width:760px){#jinus-portfolio .j-sectionhead{align-items:start}#jinus-portfolio .j-nav{gap:15px}}
@container(max-width:540px){#jinus-portfolio .j-hero h1{font-size:34px}#jinus-portfolio .j-featuretitle{font-size:clamp(45px,18cqw,76px)}#jinus-portfolio .j-featuretop{font-size:11px}#jinus-portfolio .j-nav{gap:12px}#jinus-portfolio .j-navbutton{font-size:12px}#jinus-portfolio .j-filter{font-size:12px;padding-inline:9px}#jinus-portfolio .j-eyebrow{font-size:12px}#jinus-portfolio .j-bottom .j-eyebrow{letter-spacing:.06em}}

#jinus-portfolio .j-work .j-screen{padding:0}#jinus-portfolio .j-work .j-screen img{width:100%;height:100%;object-fit:cover;display:block}
html{color-scheme:light;scroll-behavior:smooth}body{margin:0}#jinus-portfolio .j-wrap{padding-inline:max(clamp(20px,4.4cqw,56px),calc((100% - 1280px)/2))}#jinus-portfolio .j-skip{position:absolute;top:-90px;left:20px;z-index:10;background:#fff;padding:12px;color:#17171a}#jinus-portfolio .j-skip:focus{top:12px}#jinus-portfolio .j-formnotice a{text-decoration:underline}#jinus-portfolio .j-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}#jinus-portfolio .j-button:disabled{opacity:.6;cursor:wait}#jinus-portfolio .j-success[data-tone="error"]{border-left-color:#bc182d}#jinus-portfolio .j-success[data-tone="ok"]{border-left-color:#24703e}#jinus-portfolio .j-menu a{padding:10px 0}#jinus-portfolio .j-brandimage{max-width:100%}
@container(max-width:900px){#jinus-portfolio .j-desktop{display:none}#jinus-portfolio .j-mobilemenu{display:block}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

#jinus-portfolio .j-success.is-error{border-left-color:#bc182d}#jinus-portfolio .j-success.is-success{border-left-color:#24703e}

#jinus-portfolio .j-playing .j-rings{animation:j-orbit 2.4s ease-in-out}#jinus-portfolio .j-playing .j-cover-title{animation:j-type 1.2s ease-in-out}

#jinus-portfolio .j-work .j-screen{height:auto;aspect-ratio:3/2}

#jinus-portfolio .j-lead,#jinus-portfolio .j-sub,#jinus-portfolio .j-workdesc,#jinus-portfolio .j-process p,#jinus-portfolio .j-detailtext,#jinus-portfolio .j-detailnotes p{font-size:16px}#jinus-portfolio .j-work h3{font-size:18px}
/* 상단 메뉴: 메인(jinusinter.com) 헤더와 같은 크기·배치 — 2026-11-01 */
#jinus-portfolio .j-head{height:auto;display:block;padding:0;gap:0;border-bottom:1px solid var(--j-line);background:var(--j-bg)}
#jinus-portfolio .j-head-in{width:100%;max-width:1320px;margin-inline:auto;padding-inline:clamp(1rem,4vw,3.5rem);height:72px;display:flex;align-items:center;justify-content:space-between}
#jinus-portfolio .j-logo{display:inline-flex;align-items:center;min-height:44px;font-size:inherit;letter-spacing:normal;gap:0}
#jinus-portfolio .j-brandimage{width:auto;height:30px;max-width:none}
#jinus-portfolio .j-dnav{display:flex;align-items:center;gap:1.75rem}
#jinus-portfolio .j-dnav ul,#jinus-portfolio .j-menu ul{margin:0;padding:0;list-style:none}
#jinus-portfolio .j-dnav ul{display:flex;gap:.25rem}
#jinus-portfolio .j-dnav ul a,#jinus-portfolio .j-dnav ul button{display:inline-flex;align-items:center;min-height:44px;padding:0 .85rem;border:0;background:transparent;color:light-dark(#4a4a4a,#c8c8cc);font-size:.9688rem;font-weight:600;line-height:1.7;text-decoration:none}
#jinus-portfolio .j-head .j-active{color:var(--j-textpink)!important;border-bottom:0!important}
#jinus-portfolio .j-headcta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 1.15rem;border:0;background:#cf004e;color:#fff;font-size:.9375rem;font-weight:700;line-height:1.7;clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%)}
#jinus-portfolio .j-menubtn{display:none;width:48px;height:48px;margin-right:-10px;padding:0;border:0;background:transparent;color:var(--j-ink);align-items:center;justify-content:center}
#jinus-portfolio .j-menubtn .j-i-close,#jinus-portfolio .j-menubtn[aria-expanded="true"] .j-i-open{display:none}
#jinus-portfolio .j-menubtn[aria-expanded="true"] .j-i-close{display:block}
#jinus-portfolio .j-menu{display:block;padding:0;gap:0;border-top:1px solid var(--j-line);border-bottom:0;background:var(--j-bg)}
#jinus-portfolio .j-menu[hidden]{display:none}
#jinus-portfolio .j-menu ul{padding:.5rem clamp(1rem,4vw,3.5rem) 1.25rem}
#jinus-portfolio .j-menu a,#jinus-portfolio .j-menu button{display:flex;align-items:center;width:100%;min-height:52px;padding:0;border:0;border-bottom:1px solid var(--j-line);background:transparent;color:var(--j-ink);font-size:1.125rem;font-weight:700;line-height:1.7;text-align:left;text-decoration:none}
#jinus-portfolio .j-menu .j-menucta{color:light-dark(#ae002f,#ff7ab5)}
#jinus-portfolio .j-menu .j-menucta{border-bottom:0}
@media (width<=1080px){#jinus-portfolio .j-dnav{display:none}#jinus-portfolio .j-menubtn{display:inline-flex}}
@media (width>1080px){#jinus-portfolio .j-menu{display:none!important}}
#jinus-portfolio .j-brandmark{display:block;overflow:visible;width:auto;height:30px}#jinus-portfolio .j-brandmark .pc.v,#jinus-portfolio .j-brandmark .pc.h{fill:var(--j-ink)}#jinus-portfolio .j-brandmark .pc.f{fill:light-dark(#4a4a4a,#c8c8cc)}#jinus-portfolio .j-brandmark .pc.d{fill:#e5006e}
/* 화면에 보이는 동안 움직임 반복 재생 — 2026-11-01 */
#jinus-portfolio .j-playing .j-orbit,#jinus-portfolio .j-playing .j-rings,#jinus-portfolio .j-playing .j-bottle{animation-iteration-count:infinite}#jinus-portfolio .j-playing .j-block{animation-iteration-count:infinite}#jinus-portfolio .j-playing .j-featuretitle,#jinus-portfolio .j-playing .j-cover-title{animation-duration:2.4s;animation-iteration-count:infinite}
/* ===== 살아 있는 디자인 화면(카드·상세 공용, 화면 폭 비례) — 2026-11-01 ===== */
#jinus-portfolio .j-screen.jl{container-type:inline-size;position:relative;display:block;width:100%;height:auto;aspect-ratio:16/10;padding:0;border:0;overflow:hidden;border-radius:6px;text-align:left;font-family:inherit;cursor:pointer;isolation:isolate}
#jinus-portfolio .jl-motion{background:#1c1d22;color:#fff}
#jinus-portfolio .jl-brand{background:#e8e2d7;color:#373a2b}
#jinus-portfolio .jl-launch{background:#294fec;color:#fff}
#jinus-portfolio .jl-nav{position:absolute;top:4.6cqw;left:5cqw;right:5cqw;display:flex;justify-content:space-between;font-size:max(9px,1.45cqw);letter-spacing:.14em;z-index:4}
#jinus-portfolio .jl-title{position:absolute;left:5cqw;top:17cqw;font-size:10.5cqw;font-weight:850;letter-spacing:-.06em;line-height:.98;z-index:3}
#jinus-portfolio .jl-line{display:block;overflow:hidden;padding-bottom:.06em}
#jinus-portfolio .jl-line>span{display:inline-block}
#jinus-portfolio .jl-lime{color:#d7ff64}
#jinus-portfolio .jl-lower{position:absolute;left:5cqw;bottom:5cqw;font-size:max(9px,1.45cqw);letter-spacing:.14em;z-index:3}
/* 모션 스튜디오 */
#jinus-portfolio .jl-rings{position:absolute;right:-5cqw;top:14cqw;width:34cqw;height:34cqw;border:5cqw solid #d7ff64;border-radius:50%;transform:rotate(-25deg);z-index:1}
#jinus-portfolio .jl-rings i{position:absolute;inset:2.5cqw -8cqw;border:.25cqw solid #d7ff64;border-radius:50%}
#jinus-portfolio .jl-orbit{position:absolute;right:-9cqw;top:10cqw;width:42cqw;height:42cqw;border:.2cqw dashed #d7ff6466;border-radius:50%;z-index:1}
#jinus-portfolio .jl-orbit:after{content:'';position:absolute;left:50%;top:-1.3cqw;width:2.6cqw;height:2.6cqw;margin-left:-1.3cqw;border-radius:50%;background:#f7278b}
#jinus-portfolio .jl-ticker{position:absolute;left:0;right:0;bottom:4.2cqw;display:flex;white-space:nowrap;font-size:max(9px,1.45cqw);letter-spacing:.14em;color:#c9c9d2;z-index:3;padding-left:5cqw}
#jinus-portfolio .jl-ticker>span{flex:none;padding-right:2cqw}
/* 브랜드 스토리 */
#jinus-portfolio .jl-brand .jl-title{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.04em;font-size:9.5cqw;line-height:1.02}
#jinus-portfolio .jl-sun{position:absolute;right:6cqw;top:10cqw;width:34cqw;height:34cqw;border-radius:50%;background:radial-gradient(circle,#f6f0e4 0 55%,#efe7d8 56% 100%);z-index:0}
#jinus-portfolio .jl-bottle{position:absolute;right:17cqw;top:19cqw;width:12cqw;height:25cqw;border-radius:1.6cqw 1.6cqw 2.4cqw 2.4cqw;background:linear-gradient(90deg,#a6a78e,#e5e0c6 35%,#c2c1a3 80%,#969b7e);transform:rotate(9deg);z-index:2;display:grid;place-items:center}
#jinus-portfolio .jl-bottle:before{content:'';position:absolute;width:5.6cqw;height:3cqw;left:3.2cqw;top:-2.8cqw;background:#373e32;border-radius:.6cqw .6cqw 0 0}
#jinus-portfolio .jl-bottle i{position:absolute;inset:0;border-radius:inherit;overflow:hidden}
#jinus-portfolio .jl-bottle i:after{content:'';position:absolute;inset:-10% -60%;background:linear-gradient(100deg,transparent 40%,#ffffff8c 50%,transparent 60%);transform:translateX(-70%)}
#jinus-portfolio .jl-bottle em{position:relative;font-style:normal;text-align:center;font-size:max(7px,1.35cqw);letter-spacing:.08em;line-height:1.4;color:#30362a}
#jinus-portfolio .jl-shadow{position:absolute;right:15.5cqw;top:47cqw;width:15cqw;height:2.4cqw;border-radius:50%;background:#5a4f2a40;filter:blur(.6cqw);z-index:1}
/* 제품 런칭 */
#jinus-portfolio .jl-stripes{position:absolute;inset:-10% -30%;background:repeating-linear-gradient(115deg,#ffffff12 0 2cqw,transparent 2cqw 6cqw);z-index:0}
#jinus-portfolio .jl-arrow{display:inline-block}
#jinus-portfolio .jl-stage{position:absolute;right:9cqw;top:15cqw;width:26cqw;height:26cqw;perspective:70cqw;z-index:2}
#jinus-portfolio .jl-block{position:absolute;inset:0;border-radius:6cqw;background:#adcbff;box-shadow:-2.4cqw 2.4cqw 0 #142eac,inset 0 0 0 .5cqw #d5e3ff;transform:rotateY(-22deg) rotateX(10deg) rotate(-18deg)}
#jinus-portfolio .jl-block:after{content:'+';position:absolute;inset:0;display:grid;place-items:center;font-size:18cqw;font-weight:300;line-height:1;color:#294fec}
#jinus-portfolio .jl-chip{position:absolute;right:37cqw;top:42cqw;width:7cqw;height:7cqw;border-radius:2cqw;background:#d7ff64;transform:rotate(14deg);z-index:2}
#jinus-portfolio .jl-launch .jl-lower{bottom:6.5cqw}
#jinus-portfolio .jl-bar{position:absolute;left:5cqw;bottom:4.2cqw;width:32cqw;height:.35cqw;background:#ffffff4d;overflow:hidden;z-index:3}
#jinus-portfolio .jl-bar:after{content:'';position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left}
/* 움직임: 화면에 보이는 동안 반복 */
@keyframes jl-rise{0%{transform:translateY(110%)}16%,80%{transform:translateY(0)}94%,100%{transform:translateY(-110%)}}
@keyframes jl-fade{0%{opacity:0;transform:translateY(35%)}18%,80%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(-12%)}}
@keyframes jl-spin{from{transform:rotate(-25deg)}to{transform:rotate(335deg)}}
@keyframes jl-spin-r{from{transform:rotate(0)}to{transform:rotate(-360deg)}}
@keyframes jl-marquee{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@keyframes jl-float{0%,100%{transform:translateY(0) rotate(9deg)}50%{transform:translateY(-3.2cqw) rotate(3deg)}}
@keyframes jl-shade{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.78);opacity:.6}}
@keyframes jl-shine{0%,55%{transform:translateX(-70%)}85%,100%{transform:translateX(70%)}}
@keyframes jl-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes jl-tilt{0%,100%{transform:rotateY(-24deg) rotateX(12deg) rotate(-18deg)}50%{transform:rotateY(26deg) rotateX(-8deg) rotate(-6deg) translateY(-3cqw)}}
@keyframes jl-chip{0%,100%{transform:translate(0,0) rotate(14deg)}50%{transform:translate(-2cqw,-3cqw) rotate(-16deg)}}
@keyframes jl-stripes{from{transform:translateX(0)}to{transform:translateX(-12cqw)}}
@keyframes jl-nudge{0%,100%{transform:none}50%{transform:translate(.4em,-.4em)}}
@keyframes jl-bar{0%{transform:scaleX(0)}70%,100%{transform:scaleX(1)}}
#jinus-portfolio .jl.j-playing .jl-line>span{animation:jl-rise 5s cubic-bezier(.16,1,.3,1) infinite}
#jinus-portfolio .jl.j-playing .jl-l2>span{animation-delay:.12s}
#jinus-portfolio .jl-brand.j-playing .jl-line>span{animation:jl-fade 6s cubic-bezier(.16,1,.3,1) infinite}
#jinus-portfolio .jl-brand.j-playing .jl-l2>span{animation-delay:.3s}
#jinus-portfolio .jl.j-playing .jl-rings{animation:jl-spin 9s linear infinite}
#jinus-portfolio .jl.j-playing .jl-orbit{animation:jl-spin-r 6s linear infinite}
#jinus-portfolio .jl.j-playing .jl-ticker>span{animation:jl-marquee 16s linear infinite}
#jinus-portfolio .jl.j-playing .jl-bottle{animation:jl-float 5s ease-in-out infinite}
#jinus-portfolio .jl.j-playing .jl-shadow{animation:jl-shade 5s ease-in-out infinite}
#jinus-portfolio .jl.j-playing .jl-bottle i:after{animation:jl-shine 5s ease-in-out infinite}
#jinus-portfolio .jl.j-playing .jl-sun{animation:jl-breathe 7s ease-in-out infinite}
#jinus-portfolio .jl.j-playing .jl-block{animation:jl-tilt 4.5s ease-in-out infinite}
#jinus-portfolio .jl.j-playing .jl-chip{animation:jl-chip 4.5s ease-in-out infinite}
#jinus-portfolio .jl.j-playing .jl-stripes{animation:jl-stripes 6s linear infinite alternate}
#jinus-portfolio .jl.j-playing .jl-arrow{animation:jl-nudge 1.6s ease-in-out infinite}
#jinus-portfolio .jl.j-playing .jl-bar:after{animation:jl-bar 3s cubic-bezier(.65,0,.35,1) infinite}
/* 크게 보기: 목록은 한 줄에 한 디자인 */
#jinus-portfolio .j-grid{grid-template-columns:1fr;gap:72px}
#jinus-portfolio .j-work{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(0,1fr);gap:44px;align-items:center}
#jinus-portfolio .j-work:nth-child(even) .j-screen{order:2}
#jinus-portfolio .j-workinfo .j-worktop{margin-top:0}
#jinus-portfolio .j-work .j-workinfo h3{font-size:30px;letter-spacing:-.04em}
#jinus-portfolio .j-workinfo .j-worknum{font-size:14px}
#jinus-portfolio .j-workinfo .j-workdesc{font-size:17px;margin-top:10px}
#jinus-portfolio .j-workmotion{margin-top:18px;font-size:16px;color:var(--j-ink);display:flex;flex-direction:column;gap:4px}
#jinus-portfolio .j-workmotion span{font-size:13px;color:var(--j-muted)}
#jinus-portfolio .j-workinfo .j-workactions{margin-top:24px;padding-top:12px}
#jinus-portfolio .j-workinfo .j-workactions button{font-size:15px;min-height:48px}
#jinus-portfolio .j-hero{grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr)}
#jinus-portfolio .j-feature{min-height:clamp(320px,34cqw,460px);padding:32px}
#jinus-portfolio .j-featuretitle{font-size:clamp(56px,8.6cqw,116px)}
#jinus-portfolio .j-feature .j-orbit{width:clamp(180px,20cqw,270px);height:clamp(180px,20cqw,270px);top:22%}
@keyframes jl-orbit-hero{from{transform:rotate(-28deg)}to{transform:rotate(332deg)}}
#jinus-portfolio .j-feature.j-playing .j-orbit{animation:jl-orbit-hero 8s linear infinite}
#jinus-portfolio .j-detailgrid{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr)}
@container(max-width:900px){#jinus-portfolio .j-work{grid-template-columns:1fr;gap:20px}#jinus-portfolio .j-work:nth-child(even) .j-screen{order:0}#jinus-portfolio .j-grid{gap:56px}#jinus-portfolio .j-hero{grid-template-columns:1fr}#jinus-portfolio .j-detailgrid{grid-template-columns:1fr}}
@container(max-width:540px){#jinus-portfolio .j-work .j-workinfo h3{font-size:24px}#jinus-portfolio .j-screen.jl{aspect-ratio:4/3}#jinus-portfolio .jl-title{top:20cqw;font-size:13cqw}#jinus-portfolio .jl-brand .jl-title{font-size:12cqw}#jinus-portfolio .jl-rings{top:30cqw}#jinus-portfolio .jl-orbit{top:26cqw}#jinus-portfolio .jl-sun{top:30cqw}#jinus-portfolio .jl-bottle{top:38cqw}#jinus-portfolio .jl-shadow{top:66cqw}#jinus-portfolio .jl-stage{top:33cqw}#jinus-portfolio .jl-chip{top:60cqw}#jinus-portfolio .jl-ticker,#jinus-portfolio .jl-lower,#jinus-portfolio .jl-nav{font-size:10px}}
#jinus-portfolio .j-work:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,1.85fr)}
@container(max-width:900px){#jinus-portfolio .j-work:nth-child(even){grid-template-columns:1fr}}
@container(max-width:540px){#jinus-portfolio .jl-launch .jl-title{font-size:11.5cqw}#jinus-portfolio .jl-stage{right:4cqw;top:40cqw;width:22cqw;height:22cqw}#jinus-portfolio .jl-chip{right:30cqw;top:58cqw;width:6cqw;height:6cqw}}
/* ===== 실제 제작 사례 — 2026-11-01 ===== */
#jinus-portfolio .j-cases{padding-block:88px 24px}
#jinus-portfolio .j-caselist{display:grid;gap:72px;margin-top:8px}
#jinus-portfolio .j-case{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(0,1fr);gap:44px;align-items:center}
#jinus-portfolio .j-case:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,1.85fr)}
#jinus-portfolio .j-case:nth-child(even) .j-browser{order:2}
#jinus-portfolio .j-browser{container-type:inline-size;border:1px solid var(--j-line);border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 24px 60px -30px #17171a55}
#jinus-portfolio .j-browserbar{display:flex;align-items:center;gap:6px;height:34px;padding:0 14px;background:light-dark(#f2f2f4,#26262b);border-bottom:1px solid var(--j-line)}
#jinus-portfolio .j-browserbar i{width:10px;height:10px;border-radius:50%;background:#d9d9de}
#jinus-portfolio .j-browserbar i:first-child{background:#ff6159}#jinus-portfolio .j-browserbar i:nth-child(2){background:#ffbd2e}#jinus-portfolio .j-browserbar i:nth-child(3){background:#28c941}
#jinus-portfolio .j-browserbar span{margin-left:12px;flex:1;max-width:320px;height:22px;border-radius:6px;background:light-dark(#fff,#18181b);font-size:12px;line-height:22px;padding:0 10px;color:var(--j-muted)}
#jinus-portfolio .j-browserview{position:relative;height:62.5cqw;overflow:hidden}
#jinus-portfolio .j-browserview img{display:block;width:100%;height:auto}
@keyframes jc-scroll{0%,8%{transform:translateY(0)}46%,54%{transform:translateY(calc(-100% + 62.5cqw))}92%,100%{transform:translateY(0)}}
@keyframes jc-rok{0.00%,6.00%{transform:translateY(0.0000%)}7.69%,13.69%{transform:translateY(-7.6923%)}15.38%,21.38%{transform:translateY(-15.3846%)}23.08%,29.08%{transform:translateY(-23.0769%)}30.77%,36.77%{transform:translateY(-30.7692%)}38.46%,44.46%{transform:translateY(-38.4615%)}46.15%,52.15%{transform:translateY(-46.1538%)}53.85%,59.85%{transform:translateY(-53.8462%)}61.54%,67.54%{transform:translateY(-61.5385%)}69.23%,75.23%{transform:translateY(-69.2308%)}76.92%,82.92%{transform:translateY(-76.9231%)}84.62%,90.62%{transform:translateY(-84.6154%)}92.31%,98.31%{transform:translateY(-92.3077%)}100%{transform:translateY(0)}}
#jinus-portfolio .j-browser.j-playing .jc-jciia.is-full{animation:jc-scroll 34s cubic-bezier(.45,0,.55,1) infinite}
#jinus-portfolio .j-browser.j-playing .jc-rok.is-full{animation:jc-rok 41.6s cubic-bezier(.65,0,.35,1) infinite}
#jinus-portfolio .j-casestate{display:inline-block;padding:5px 10px;border-radius:999px;font-size:13px;font-weight:700;background:light-dark(#f1f1f3,#2a2a2f);color:var(--j-muted)}
#jinus-portfolio .j-casestate.j-caseon{background:light-dark(#e7f7ec,#173322);color:light-dark(#137a3a,#7fe0a2)}
#jinus-portfolio .j-caseinfo h3{font-size:30px;letter-spacing:-.04em;font-weight:750;margin-top:14px}
#jinus-portfolio .j-casemeta{font-size:17px;color:var(--j-muted);margin-top:8px}
#jinus-portfolio .j-casetags{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
#jinus-portfolio .j-casetags li{font-size:14px;padding:6px 12px;border:1px solid var(--j-line);border-radius:999px}
#jinus-portfolio .j-caselink{display:inline-flex;align-items:center;min-height:48px;margin-top:22px;padding:0 20px;background:var(--j-ink);color:var(--j-bg);font-size:15px;font-weight:700}
#jinus-portfolio .j-casenote{margin-top:18px;font-size:14px;color:var(--j-muted)}
@container(max-width:900px){#jinus-portfolio .j-case,#jinus-portfolio .j-case:nth-child(even){grid-template-columns:1fr;gap:20px}#jinus-portfolio .j-case:nth-child(even) .j-browser{order:0}#jinus-portfolio .j-cases{padding-block:64px 16px}#jinus-portfolio .j-caseinfo h3{font-size:24px}}
/* ===== 통합 목록: 모든 항목을 실제 웹페이지 화면으로 — 2026-11-01 ===== */
#jinus-portfolio .j-work .j-browser,#jinus-portfolio .j-detail-screen.j-browser{display:block;width:100%;height:auto;padding:0;text-align:left;font:inherit;color:inherit;cursor:default}
#jinus-portfolio button.j-browser{cursor:pointer;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s}
#jinus-portfolio button.j-browser:hover{transform:translateY(-4px);box-shadow:0 34px 70px -30px #17171a77}
#jinus-portfolio button.j-browser:focus-visible{outline:3px solid var(--j-pink);outline-offset:4px}
#jinus-portfolio .j-browserbar{box-sizing:border-box}
#jinus-portfolio .j-browserview{display:block}
#jinus-portfolio .j-work:nth-child(even) .j-browser{order:2}
#jinus-portfolio .j-workinfo .j-casestate{margin-bottom:12px}
#jinus-portfolio .j-workinfo .j-casetags{margin-top:16px}
#jinus-portfolio .j-workactions a{display:inline-flex;align-items:center;min-height:48px;font-size:15px;font-weight:700;color:var(--j-ink)}
#jinus-portfolio .j-workactions .j-caselink{margin-top:0;color:var(--j-bg)}
#jinus-portfolio .j-detail-screen.j-browser .j-browserview{height:62.5cqw}
@container(max-width:900px){#jinus-portfolio .j-work:nth-child(even) .j-browser{order:0}}
/* PREVIEW-KF-START */
@keyframes jc-abcdcos{0.000%{transform:translateY(0.0000%)}3.163%{transform:translateY(0.0000%)}3.169%{transform:translateY(-11.1111%)}6.332%{transform:translateY(-11.1111%)}6.338%{transform:translateY(-22.2222%)}9.501%{transform:translateY(-22.2222%)}9.507%{transform:translateY(-33.3333%)}12.670%{transform:translateY(-33.3333%)}12.676%{transform:translateY(-44.4444%)}15.839%{transform:translateY(-44.4444%)}15.845%{transform:translateY(-55.5556%)}23.436%{transform:translateY(-55.5556%)}23.442%{transform:translateY(-66.6667%)}45.582%{transform:translateY(-66.6667%)}50.642%{transform:translateY(-77.7778%)}72.781%{transform:translateY(-77.7778%)}77.842%{transform:translateY(-88.8889%)}99.981%{transform:translateY(-88.8889%)}100.000%{transform:translateY(0.0000%)}}
#jinus-portfolio .j-browser.j-playing .jc-abcdcos.is-full{animation:jc-abcdcos 15.81s cubic-bezier(.65,0,.35,1) infinite}
@keyframes jc-rok{0.00%,6.00%{transform:translateY(0.0000%)}7.69%,13.69%{transform:translateY(-7.6923%)}15.38%,21.38%{transform:translateY(-15.3846%)}23.08%,29.08%{transform:translateY(-23.0769%)}30.77%,36.77%{transform:translateY(-30.7692%)}38.46%,44.46%{transform:translateY(-38.4615%)}46.15%,52.15%{transform:translateY(-46.1538%)}53.85%,59.85%{transform:translateY(-53.8462%)}61.54%,67.54%{transform:translateY(-61.5385%)}69.23%,75.23%{transform:translateY(-69.2308%)}76.92%,82.92%{transform:translateY(-76.9231%)}84.62%,90.62%{transform:translateY(-84.6154%)}92.31%,98.31%{transform:translateY(-92.3077%)}100%{transform:translateY(0)}}
#jinus-portfolio .j-browser.j-playing .jc-rok.is-full{animation:jc-rok 41.6s cubic-bezier(.65,0,.35,1) infinite}
@keyframes jc-jciia{0.00%,15.60%{transform:translateY(0.0000%)}20.00%,35.60%{transform:translateY(-20.0000%)}40.00%,55.60%{transform:translateY(-40.0000%)}60.00%,75.60%{transform:translateY(-60.0000%)}80.00%,95.60%{transform:translateY(-80.0000%)}100%{transform:translateY(0)}}
#jinus-portfolio .j-browser.j-playing .jc-jciia.is-full{animation:jc-jciia 16.0s cubic-bezier(.65,0,.35,1) infinite}
@keyframes jc-laim{0.00%,7.80%{transform:translateY(0.0000%)}10.00%,17.80%{transform:translateY(-10.0000%)}20.00%,27.80%{transform:translateY(-20.0000%)}30.00%,37.80%{transform:translateY(-30.0000%)}40.00%,47.80%{transform:translateY(-40.0000%)}50.00%,57.80%{transform:translateY(-50.0000%)}60.00%,67.80%{transform:translateY(-60.0000%)}70.00%,77.80%{transform:translateY(-70.0000%)}80.00%,87.80%{transform:translateY(-80.0000%)}90.00%,97.80%{transform:translateY(-90.0000%)}100%{transform:translateY(0)}}
#jinus-portfolio .j-browser.j-playing .jc-laim.is-full{animation:jc-laim 32.0s cubic-bezier(.65,0,.35,1) infinite}
@keyframes jc-export{0.00%,26.00%{transform:translateY(0.0000%)}33.33%,59.33%{transform:translateY(-33.3333%)}66.67%,92.67%{transform:translateY(-66.6667%)}100%{transform:translateY(0)}}
#jinus-portfolio .j-browser.j-playing .jc-export.is-full{animation:jc-export 9.6s cubic-bezier(.65,0,.35,1) infinite}
#jinus-portfolio .j-browser.j-playing .jc-notice.is-full{animation:jc-still 14s ease-in-out infinite;transform-origin:50% 35%}
#jinus-portfolio .j-browser.j-playing .jc-j.is-full{animation:jc-still 14s ease-in-out infinite;transform-origin:50% 35%}
@keyframes jc-wise{0.00%,8.67%{transform:translateY(0.0000%)}11.11%,19.78%{transform:translateY(-11.1111%)}22.22%,30.89%{transform:translateY(-22.2222%)}33.33%,42.00%{transform:translateY(-33.3333%)}44.44%,53.11%{transform:translateY(-44.4444%)}55.56%,64.22%{transform:translateY(-55.5556%)}66.67%,75.33%{transform:translateY(-66.6667%)}77.78%,86.44%{transform:translateY(-77.7778%)}88.89%,97.56%{transform:translateY(-88.8889%)}100%{transform:translateY(0)}}
#jinus-portfolio .j-browser.j-playing .jc-wise.is-full{animation:jc-wise 28.8s cubic-bezier(.65,0,.35,1) infinite}
@keyframes jc-shop{0.00%,13.00%{transform:translateY(0.0000%)}16.67%,29.67%{transform:translateY(-16.6667%)}33.33%,46.33%{transform:translateY(-33.3333%)}50.00%,63.00%{transform:translateY(-50.0000%)}66.67%,79.67%{transform:translateY(-66.6667%)}83.33%,96.33%{transform:translateY(-83.3333%)}100%{transform:translateY(0)}}
#jinus-portfolio .j-browser.j-playing .jc-shop.is-full{animation:jc-shop 19.2s cubic-bezier(.65,0,.35,1) infinite}
#jinus-portfolio .j-browser.j-playing .jc-saver.is-full{animation:jc-still 14s ease-in-out infinite;transform-origin:50% 35%}
#jinus-portfolio .j-browser.j-playing .jc-sailab.is-full{animation:jc-still 14s ease-in-out infinite;transform-origin:50% 35%}
#jinus-portfolio .j-browser.j-playing .jc-lh.is-full{animation:jc-still 14s ease-in-out infinite;transform-origin:50% 35%}
@keyframes jc-aimath{0.00%,19.50%{transform:translateY(0.0000%)}25.00%,44.50%{transform:translateY(-25.0000%)}50.00%,69.50%{transform:translateY(-50.0000%)}75.00%,94.50%{transform:translateY(-75.0000%)}100%{transform:translateY(0)}}
#jinus-portfolio .j-browser.j-playing .jc-aimath.is-full{animation:jc-aimath 12.8s cubic-bezier(.65,0,.35,1) infinite}
@keyframes jc-still{0%,100%{transform:scale(1)}50%{transform:scale(1.08) translateY(-1.5%)}}
/* PREVIEW-KF-END */
/* ===== 상단 쇼케이스: 실제 웹페이지 순환 — 2026-11-01 ===== */
#jinus-portfolio .j-showcase{min-width:0}
#jinus-portfolio .j-showview{position:relative}
#jinus-portfolio .j-showimg{position:absolute;left:0;top:0;width:100%;height:auto;opacity:0;transition:opacity .7s ease}
#jinus-portfolio .j-showimg.is-on{opacity:1}
#jinus-portfolio .j-herobrowser .j-showimg:not(.is-on){animation:none!important}
#jinus-portfolio .j-showbar{display:flex;align-items:center;gap:14px;margin-top:14px}
#jinus-portfolio .j-showname{flex:1;min-width:0;font-size:15px;font-weight:700;color:var(--j-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#jinus-portfolio .j-showdots{display:flex;gap:2px}
#jinus-portfolio .j-showdot{position:relative;width:28px;height:44px;border:0;padding:0;background:transparent}
#jinus-portfolio .j-showdot:after{content:'';position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:light-dark(#c9c9cf,#55555c);transition:transform .3s,background .3s}
#jinus-portfolio .j-showdot[aria-current="true"]:after{background:var(--j-pink);transform:scale(1.5)}
#jinus-portfolio .j-showpause{width:44px;height:44px;border:1px solid var(--j-line);border-radius:50%;background:transparent;color:var(--j-ink);font-size:11px;letter-spacing:-1px}
#jinus-portfolio .j-showpause[aria-pressed="true"]{background:var(--j-ink);color:var(--j-bg)}
@container(max-width:540px){#jinus-portfolio .j-showbar{flex-wrap:wrap;row-gap:0}#jinus-portfolio .j-showname{flex-basis:100%;white-space:normal}#jinus-portfolio .j-showdots{flex:1}}
#jinus-portfolio #j-detail-site{display:inline-flex;align-items:center;min-height:48px;margin-left:20px;vertical-align:middle}
#jinus-portfolio .j-browserview img{background:light-dark(#f2f2f4,#202024)}