/* JJ visual collection — synced to the edited Figma V2 desktop frame. */
.project-detail[data-project="jj-games"]{--jj-v2-accent:#d1a861;--jj-v2-dim:#a6a6a8;--jj-v2-paper:#f5f0e8}
.project-detail[data-project="jj-games"] .project-detail-bar button{border:0}
.project-detail[data-project="jj-games"] .project-detail-nav{top:60px;gap:24px;padding:17px 5%;background:rgba(9,9,9,.92);scrollbar-width:none}
.project-detail[data-project="jj-games"] .project-detail-nav::-webkit-scrollbar{display:none}
.project-detail[data-project="jj-games"] .project-detail-nav button{height:auto;padding:0;border:0;appearance:none;background:none;color:rgba(255,255,255,.66)}
.project-detail[data-project="jj-games"] .project-detail-nav button:hover,.project-detail[data-project="jj-games"] .project-detail-nav button.is-active{color:#fff}
.project-detail[data-project="jj-games"] .project-detail-nav button:after{display:none}
.project-detail[data-project="jj-games"] .project-detail-hero{height:auto;aspect-ratio:5/2}
.project-detail[data-project="jj-games"] .project-detail-cover{object-fit:cover;object-position:center;filter:none}
.jj-profile,.jj-section{width:calc(100% - 192px);max-width:1248px}
.jj-profile{padding:100px 0 0}
.jj-index{font-size:12px;letter-spacing:.08em}
.jj-profile .jj-index span,.jj-v2-section .jj-index span{color:#d6a85c}
.jj-profile-title{margin-top:28px}
.jj-profile-title h2{font-family:"Noto Sans SC",sans-serif;font-size:60px;font-weight:700;line-height:1.05;letter-spacing:0;white-space:normal}
.jj-profile-title>p{margin-top:28px;font-size:12px;line-height:1.5}
.jj-profile-copy{width:100%;margin:28px 0 0;color:var(--jj-v2-dim);font-size:17px;line-height:1.8}
.jj-profile-copy p{margin:0}
.jj-profile-copy p+p{margin-top:30px}
.jj-profile dl{margin-top:28px}
.jj-profile dl>div{min-height:210px;padding:30px 26px 28px 0}
.jj-profile dt{font-size:11px}
.jj-profile dd{margin-top:28px;font-size:15px;line-height:1.6}
.jj-v2-section{display:flex;flex-direction:column;gap:48px;padding:110px 0}
.jj-v2-section .jj-section-head{margin:0}
.jj-v2-section .jj-heading{display:grid;grid-template-columns:minmax(0,1fr) 345px;gap:20px;align-items:center;height:86px;margin-top:48px}
.jj-v2-section .jj-heading h2{padding-left:33px;color:var(--jj-v2-paper);font-family:"Noto Sans SC",sans-serif;font-size:60px;font-weight:500;line-height:1.05;letter-spacing:0}
.jj-v2-section .jj-heading h2:before{width:13px;height:64px;background:var(--jj-v2-accent)}
.jj-v2-section .jj-heading>p{color:#8a8a8c;font-size:11px;letter-spacing:.08em;text-align:right;white-space:nowrap}
.jj-v2-section .jj-image{margin:0}
.jj-v2-section .jj-image img{width:100%;height:auto;object-fit:contain}
.jj-v2-icon-feature{display:grid;grid-template-columns:minmax(0,300fr) minmax(0,438fr) minmax(0,410fr);gap:50px;align-items:center;min-height:526px}
.jj-v2-icon-note{min-height:310px;padding:28px 24px;border:1px solid #363330;color:#b8b5b0}
.jj-v2-icon-note span{color:var(--jj-v2-accent);font:500 11px/1.2 Inter,Arial,sans-serif}
.jj-v2-icon-note h3{margin-top:24px;color:#f5f2eb;font-size:34px;font-weight:500;line-height:1.2}
.jj-v2-icon-note p{margin-top:24px;font-size:16px;line-height:1.75}
.jj-v2-icon-process{display:grid;grid-template-columns:316px minmax(0,1fr);gap:136px;align-items:start;min-height:314px;padding:18px 40px;border:1px solid #5e5e5e;background:#1e1e1e}
.jj-v2-process-source img{display:block;width:316px;height:278px;object-fit:contain}
.jj-v2-process-stages{display:grid;grid-template-columns:minmax(0,442px) minmax(0,189px);gap:79px;padding-top:30px}
.jj-v2-process-stages figure{margin:0;min-width:0}
.jj-v2-process-stages .jj-image img{height:189px;object-fit:contain}
.jj-v2-process-stages figcaption{margin-top:16px;color:#b8b5b0;font-size:16px;line-height:1.5;text-align:center}
.jj-v2-double-caption{display:flex;justify-content:space-around}
.jj-v2-subtitle{margin:0;color:#f5f2eb;font-size:30px;font-weight:500;line-height:1.25}
.jj-v2-outfit-feature{display:grid;grid-template-columns:minmax(0,496px) minmax(0,707px);gap:43px;align-items:start}
.jj-v2-outfit-aside{display:flex;flex-direction:column;gap:28px;min-width:0}
.jj-v2-outfit-aside .jj-image{margin-top:auto}
.jj-v2-outfit-aside .jj-image img{max-height:245px;object-fit:cover}
.jj-v2-copy{color:var(--jj-v2-dim);font-size:16px;line-height:1.5}
.jj-v2-copy h3{margin:0 0 4px;color:var(--jj-v2-accent);font-size:21px;font-weight:700;line-height:30px}
.jj-v2-copy p{margin:0;line-height:1.5}
.jj-v2-detail-strip img{max-height:154px;object-fit:cover}
.jj-v2-spring{display:grid;grid-template-columns:minmax(0,846px) minmax(0,348px);gap:54px;align-items:center}
.jj-v2-spring .jj-image img{aspect-ratio:846/252;object-fit:cover}
.jj-v2-caption{margin:0;color:var(--jj-v2-accent);font-size:21px;font-weight:700;line-height:30px}
.jj-v2-autumn{position:relative;container-type:inline-size}
.jj-v2-intent{position:absolute;top:55.05%;left:47.04%;width:14.26%;color:var(--jj-v2-dim);font-family:"Noto Sans SC",sans-serif;font-size:1.282cqw;font-weight:500;line-height:1.5;overflow-wrap:anywhere}
.jj-v2-intent h3{margin:0;color:var(--jj-v2-accent);font-size:1.683cqw;font-weight:700;line-height:1.43}
.jj-v2-intent p{margin:0}
.jj-v2-intent p+p{margin-top:1.45cqw}
@media(max-width:1100px){
  .jj-profile,.jj-section{width:calc(100% - 64px)}
  .jj-profile-title h2{font-size:clamp(34px,5vw,60px)}
  .jj-v2-section .jj-heading{grid-template-columns:minmax(0,1fr) max-content}
  .jj-v2-section .jj-heading h2{font-size:clamp(36px,5vw,60px)}
  .jj-v2-icon-feature{gap:24px;min-height:0}
  .jj-v2-icon-note{padding:20px}
  .jj-v2-icon-note h3{font-size:25px}
  .jj-v2-icon-note p{font-size:13px}
  .jj-v2-icon-process{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:30px;padding:18px}
  .jj-v2-process-source img{width:100%;height:auto}
  .jj-v2-process-stages{gap:20px;padding-top:8px}
  .jj-v2-outfit-feature{grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:28px}
  .jj-v2-spring{grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:24px}
}
@media(max-width:760px){
  .project-detail[data-project="jj-games"] .project-detail-nav{padding-left:16px;padding-right:16px}
  .project-detail[data-project="jj-games"] .project-detail-hero{aspect-ratio:4/5}
  .project-detail[data-project="jj-games"] .project-detail-cover{object-position:38% center}
  .jj-profile,.jj-section{width:calc(100% - 32px)}
  .jj-profile{padding:68px 0 0}
  .jj-index{font-size:9px}
  .jj-profile-title{margin-top:28px}
  .jj-profile-title h2{font-size:clamp(29px,8vw,48px)}
  .jj-profile-title>p{font-size:9px}
  .jj-profile-copy{font-size:13px;line-height:1.8}
  .jj-profile-copy p+p{margin-top:20px}
  .jj-profile dl{margin-top:40px}
  .jj-profile dl>div{min-height:0;padding:22px 0}
  .jj-v2-section{gap:28px;padding:76px 0}
  .jj-v2-section .jj-heading{grid-template-columns:1fr;gap:8px;height:auto;margin-top:28px}
  .jj-v2-section .jj-heading h2{padding-left:21px;font-size:clamp(32px,8.8vw,52px)}
  .jj-v2-section .jj-heading h2:before{width:8px;height:1.05em}
  .jj-v2-section .jj-heading>p{padding-left:0;font-size:9px}
  .jj-v2-icon-feature{grid-template-columns:1fr 1fr;gap:16px}
  .jj-v2-icon-note{grid-column:1/-1;min-height:0}
  .jj-v2-icon-note p{font-size:13px}
  .jj-v2-icon-process{grid-template-columns:1fr;gap:18px}
  .jj-v2-process-source img{max-height:250px}
  .jj-v2-process-stages{grid-template-columns:2fr 1fr;gap:12px}
  .jj-v2-process-stages .jj-image img{height:120px}
  .jj-v2-process-stages figcaption{font-size:11px}
  .jj-v2-subtitle{font-size:20px}
  .jj-v2-outfit-feature{grid-template-columns:1fr;gap:22px}
  .jj-v2-outfit-aside{gap:20px}
  .jj-v2-outfit-aside .jj-image img{max-height:none}
  .jj-v2-copy{font-size:13px}
  .jj-v2-copy h3,.jj-v2-caption{font-size:17px;line-height:1.4}
  .jj-v2-spring{grid-template-columns:1fr;gap:18px}
  .jj-v2-intent{position:static;width:auto;margin-top:20px;font-size:13px;overflow-wrap:normal}
  .jj-v2-intent h3{font-size:17px;line-height:1.4}
  .jj-v2-intent p+p{margin-top:16px}
}