/* Original campaign artwork in one ad card and two upright phone mockups. */
.jc-cover,.service-work-julies{display:grid;place-items:center;background:#080808}
.jc-ad-scene{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;gap:5%;container-type:inline-size;width:78%;line-height:1.25;color:#fff}
.jc-ad-card{display:flex;flex-direction:column;min-width:0;aspect-ratio:9/20;overflow:hidden;border:1px solid #ffffff30;box-shadow:0 1.4cqw 3cqw #0007}
.jc-ad-card img{display:block;flex:1;min-height:0;width:100%;height:0;object-fit:contain}
.jc-ad-header{display:flex;flex-shrink:0;align-items:center;gap:1cqw;padding:1.3cqw 1.5cqw;min-height:6cqw;font-size:1.45cqw;line-height:1.2}
.jc-ad-avatar{display:grid;place-items:center;flex:0 0 3.4cqw;height:3.4cqw;border:1px solid #e9c9d3;border-radius:50%;background:#f4e7ed;color:#7f324e;font:italic 2cqw/1 Georgia,serif}
.jc-ad-account{display:block;font-weight:600;letter-spacing:-.02em}
.jc-ad-account small{display:block;margin-top:.4cqw;font-size:1.15cqw;font-weight:400;letter-spacing:0;opacity:.7}
.jc-ad-more{margin-left:auto;font-size:1.6cqw;letter-spacing:.1em}
.jc-ad-feed{background:#fff;color:#181818;border-color:#e6e6e6;border-radius:1.5cqw}
.jc-ad-feed-cta{display:flex;flex-shrink:0;justify-content:space-between;align-items:center;padding:1.3cqw 1.5cqw;background:#f3f3f5;font-size:1.4cqw;font-weight:600}
.jc-ad-feed-footer{display:flex;flex-shrink:0;align-items:center;gap:1.2cqw;padding:1.5cqw}
.jc-ad-feed-footer svg{width:2.7cqw;height:2.7cqw;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.jc-ad-feed-footer svg:last-child{margin-left:auto}
.jc-ad-phone{padding:.65cqw;background:linear-gradient(120deg,#707070,#1a1a1a 19%,#171717 80%,#575757);border-radius:3.6cqw;box-shadow:0 1.4cqw 3cqw #0007,0 0 0 .15cqw #080808}
.jc-ad-phone-screen{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;border-radius:2.9cqw;background:#090909}
.jc-ad-phone-top{position:relative;display:flex;flex-shrink:0;justify-content:space-between;align-items:center;height:3.3cqw;padding:0 1.6cqw;font-size:1.1cqw}
.jc-ad-phone-top::before{content:"";position:absolute;left:50%;top:.55cqw;transform:translateX(-50%);width:7cqw;height:1.5cqw;border:1px solid #252525;border-radius:9px;background:#000}
.jc-ad-phone-top::after{content:"";width:3cqw;height:.7cqw;border-radius:9px;background:#aaa}
.jc-ad-phone .jc-ad-header{padding:.9cqw 1.25cqw;min-height:5.5cqw}
.jc-ad-story-cta{display:block;flex-shrink:0;margin:1.2cqw 1.8cqw .5cqw;padding:1.15cqw;border-radius:5cqw;background:#fff;color:#161616;text-align:center;font-size:1.35cqw;font-weight:600;line-height:1.2}
.jc-ad-homebar{display:block;flex-shrink:0;width:32%;height:.35cqw;margin:1cqw auto .45cqw;border-radius:9px;background:#bbb}
.jc-cover .work-overlay{z-index:3}

.lya-cover{background:#080808;display:grid;place-items:center;container-type:inline-size}
.lya-cover-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3%;width:84%;align-items:center}
.lya-cover-grid>span{display:block;box-shadow:0 8px 20px #0001}
.lya-cover-grid img{display:block;width:100%;height:auto}
.lya-cover-post{border-radius:7px;overflow:hidden;background:#fff;border:1px solid #dedde2}.lya-cover-header{display:flex;align-items:center;gap:6px;padding:8px;font-size:8px;color:#191919}.lya-cover-header b{width:18px;height:18px;display:grid;place-items:center;border:1px solid #ddd;border-radius:50%;font:10px/1 Georgia,serif}.lya-cover-header i{margin-left:auto;font-style:normal}.lya-cover-footer{position:relative;display:flex;align-items:center;min-height:clamp(26px,5.5cqw,42px);padding:6px 10px;font-size:18px;line-height:1;color:#171717}.lya-cover-footer i{font-size:8px;letter-spacing:3px;font-style:normal;position:absolute;left:50%;transform:translateX(-50%)}.lya-cover-post{position:relative;line-height:1.4}
#portfolio .project-media.jc-cover,#portfolio .project-media.lya-cover{display:grid;place-items:center;background:#080808;container-type:inline-size}
#portfolio .jc-ad-scene{width:90%}
#portfolio .jc-ad-card img{width:100%;height:0;min-height:0;object-fit:contain;transform:none;animation:none;border-radius:0;box-shadow:none}
#portfolio .lya-cover-grid{width:92%;gap:3%}
#portfolio .lya-cover-grid img{width:100%;height:auto;object-fit:contain;transform:none;animation:none;border-radius:0;box-shadow:none}
#portfolio .lya-cover-header{font-size:2cqw;gap:1cqw;padding:2cqw}
#portfolio .lya-cover-header b{width:4cqw;height:4cqw;font-size:2.5cqw}
#portfolio .lya-cover-footer{min-height:7cqw;font-size:4cqw;padding:1.5cqw 2cqw}
#portfolio .lya-cover-footer i{font-size:1.5cqw}
.hero .sales-pulse{background-image:linear-gradient(105deg,#fff 0%,#fff 28%,#ffe9f5 48%,#ffa2d5 76%,#ff80c9 100%);filter:drop-shadow(0 0 14px #ff70bd33);animation:sales-bright-pulse 2.6s ease-in-out infinite}
@keyframes sales-bright-pulse{0%,100%{opacity:1;filter:brightness(1) drop-shadow(0 0 12px #ff70bd26)}50%{opacity:1;filter:brightness(1.16) drop-shadow(0 0 18px #ff70bd50)}}
.persona-window{-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
#portfolio .phone-device .phone-hero{width:100%;height:auto;max-height:none;object-fit:initial;object-position:top;flex-shrink:0}
#portfolio .detail-strip img{width:100%;height:auto;max-height:none;object-fit:initial;object-position:top}
@media(max-width:600px){.persona-window{-webkit-mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent)}}
@media(prefers-reduced-motion:reduce){.hero .sales-pulse{animation:none}}

/* Disjoint source ranges: phone opening, evidence section, then skin mechanism. */
#portfolio .detail-strips{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
#portfolio .detail-strip img{width:135%;max-width:none;margin-left:-17.5%}
#portfolio .detail-strip:nth-child(1) img{transform:translateY(-35%)}
#portfolio .detail-strip:nth-child(2) img{transform:translateY(-68.75%)}

#portfolio .project-media.jc-cover{background:radial-gradient(ellipse at 15% 15%,#492d42 0%,transparent 64%),linear-gradient(135deg,#1b171e,#09090b 75%)}
#portfolio .project-media.lya-cover{background:radial-gradient(ellipse at 80% 12%,#353347 0%,transparent 67%),linear-gradient(145deg,#181820,#08090c 80%)}

/* One physical handset ratio at every card size. Only the whole device scales. */
#portfolio .phone-detail-scene{container-type:inline-size}
#portfolio .phone-device{left:23%;top:7%;height:86%;width:auto;aspect-ratio:9/19.5;max-width:none;min-width:0;transform:translateX(-50%);border-width:max(2px,.9cqw);border-radius:17% / 8%;flex-shrink:0}
#portfolio .phone-island{top:2.3%;height:2.3%;width:30%}
#portfolio .project-media.jc-cover{container-type:size}
#portfolio .jc-ad-scene{width:min(90cqw,108cqh);height:auto;align-items:center}
#portfolio .jc-ad-card{width:100%;height:auto;min-height:0;aspect-ratio:9/19.5;align-self:center}
#portfolio .jc-ad-phone-screen{min-width:0;min-height:0}
#portfolio .phone-page{display:block;width:100%;flex:none}
#portfolio .phone-page img{display:block;width:100%;height:auto;max-height:none;object-fit:initial;transform:none;border:0;border-radius:0}
#portfolio .drdeep-detail-scene{background:radial-gradient(ellipse at 15% 40%,#e6ecff,#b9c9ed)}
#portfolio .milk-detail-scene{background:radial-gradient(ellipse at 15% 40%,#f2e6e7,#dbc4c8)}
#portfolio :is(.drdeep-detail-scene,.milk-detail-scene) .detail-strip img{display:block;width:100%;max-width:none;height:auto;margin:0;transform:none;object-position:top}
#portfolio .bailor-cover{display:grid;place-items:center;background:radial-gradient(ellipse at 25% 0%,#53604a,#20291f 80%);container-type:inline-size}
.bailor-posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4%;width:90%;align-items:center}
.bailor-post{display:block;overflow:hidden;border-radius:1.3cqw;box-shadow:0 3cqw 5cqw #0004;transform:translateY(2cqw)}
.bailor-post:nth-child(2){transform:translateY(-2cqw)}
#portfolio .bailor-post img{display:block;width:100%;height:auto}
#portfolio .kb-card-scene{background:radial-gradient(ellipse at 35% 25%,#fafcff,#d9e2ef);container-type:inline-size}
.kb-card-front,.kb-card-back{position:absolute;display:block;width:62%;aspect-ratio:1215/767;border-radius:4% / 6%;overflow:hidden;box-shadow:0 4cqw 5cqw #34486330}
.kb-card-back{top:15%;left:10%;transform:rotate(-10deg)}
.kb-card-front{top:38%;left:29%;transform:rotate(8deg)}
#portfolio .kb-card-scene img{display:block;width:100%;height:100%;object-fit:cover}
#portfolio .alepia-book-scene{background:radial-gradient(ellipse at 25% 15%,#f4f2e8,#d8d5c5);perspective:1000px;container-type:inline-size}
.alepia-book-cover,.alepia-book-pages{position:absolute;display:block;width:77%;aspect-ratio:16/9;left:11%;top:24%;transform:rotateX(18deg) rotateY(-12deg) rotateZ(-9deg);box-shadow:0 2px 0 #f8f7ef,0 4px 0 #b9b6a7,0 6px 0 #f8f7ef,0 8px 0 #b9b6a7,0 10px 0 #eee,0 5cqw 6cqw #3c382a38}
.alepia-book-pages{left:17%;top:29%;transform:rotateX(18deg) rotateY(-12deg) rotateZ(1deg)}
#portfolio .alepia-book-scene img{width:100%;height:100%;display:block;object-fit:cover}
#portfolio .leaflet-cover{background:radial-gradient(ellipse at 50% 30%,#fff,#e5e6e9)}
#portfolio .leaflet-cover .hc-leaflet-viewport{perspective:1800px;width:100%;height:100%;display:grid;place-items:center}
#portfolio .leaflet-cover .hc-leaflet-rig{position:relative;width:87%;aspect-ratio:842/595;transform-style:preserve-3d;transform:rotateX(8deg) rotateY(-17deg) rotateZ(-3deg);animation:portfolio-leaflet-turn 12s linear infinite}
#portfolio .hc-leaflet-panel{position:absolute;top:0;width:33.3334%;height:100%;transform-style:preserve-3d}
#portfolio .hc-leaflet-panel-0{left:0;transform-origin:100% 50%;transform:rotateY(-27deg)}
#portfolio .hc-leaflet-panel-1{left:33.3333%}
#portfolio .hc-leaflet-panel-2{left:66.6666%;transform-origin:0 50%;transform:rotateY(27deg)}
#portfolio .hc-leaflet-face{position:absolute;inset:0;display:block;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#fff;box-shadow:0 14px 26px #0000001a}
#portfolio .hc-leaflet-face img{position:absolute;top:0;width:300%;height:100%;max-width:none;display:block}
#portfolio .hc-leaflet-face::after{content:'';position:absolute;inset:0;border-inline:1px solid #00000016;pointer-events:none;background:linear-gradient(90deg,#00000007,transparent 8%,transparent 92%,#0000000d)}
#portfolio .hc-leaflet-back{transform:rotateY(180deg)}
@keyframes portfolio-leaflet-turn{0%{transform:rotateX(8deg) rotateY(-17deg) rotateZ(-3deg);animation-timing-function:ease-in-out}45%,55%{transform:rotateX(8deg) rotateY(163deg) rotateZ(3deg);animation-timing-function:ease-in-out}95%,100%{transform:rotateX(8deg) rotateY(343deg) rotateZ(-3deg)}}
@media(prefers-reduced-motion:reduce){#portfolio .leaflet-cover .hc-leaflet-rig{animation:none}}
#menu-content .nav-cta{font-size:21px;font-weight:650;letter-spacing:-.04em;min-height:56px;padding:15px 18px}
/* Keep physical mockups inside both wide desktop and compact mobile cards. */
#portfolio :is(.leaflet-cover,.kb-card-scene,.alepia-book-scene){container-type:size}
#portfolio .leaflet-cover .hc-leaflet-rig{width:min(87cqw,110cqh)}
#portfolio .kb-card-front,#portfolio .kb-card-back{width:min(62cqw,86cqh)}
#portfolio .kb-card-front{top:35%;left:31%}
#portfolio .kb-card-back{top:16%;left:12%}
#portfolio .alepia-book-cover,#portfolio .alepia-book-pages{width:min(77cqw,105cqh)}
#portfolio .alepia-book-cover{left:13%;top:23%}
#portfolio .alepia-book-pages{left:18%;top:28%}
#portfolio .project-media.imac-scene{container-type:size}
#portfolio .imac-device{width:min(100%,124cqh);flex:none}

/* Compact mobile contact bar, separated from the page by a dark gradient. */
@media(max-width:900px){
 body{padding-bottom:calc(54px + env(safe-area-inset-bottom))}
 .kakao-floating,body:has(.floating-nav.is-open) .kakao-floating{background:linear-gradient(180deg,#29292e 0%,#141416 48%,#08080a 100%);border-top:1px solid #ffffff20;box-shadow:0 -10px 26px #00000045;backdrop-filter:none}
 .kakao-floating .kakao-floating-face{min-height:54px;padding:0 24px;color:#fff;background:transparent;font-size:16px;gap:9px}
 .kakao-floating .kakao-floating-face>span[aria-hidden="true"]{display:none}
 .kakao-floating .kakao-floating-face>span:not([aria-hidden]){position:static;margin:0}
 .kakao-floating svg{width:22px;height:22px;color:#f1a3ac}
}