:root{--bg:#060805;--ink:#f3f7e7;--muted:rgba(243,247,231,.62);--line:rgba(243,247,231,.12);--lime:#d4ff00;--green:#1b2a14;}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,Arial,'PingFang SC','Microsoft YaHei',sans-serif;overflow-x:hidden;}body:before{content:'';position:fixed;inset:0;pointer-events:none;z-index:100;background:radial-gradient(circle at 50% 15%,rgba(212,255,0,.08),transparent 30%),linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.7));mix-blend-mode:screen;}body:after{content:'';position:fixed;inset:0;pointer-events:none;z-index:101;opacity:.18;background-image:url('assets/broccoli_pierced_frame.jpg');background-repeat:no-repeat;background-position:right -6vw bottom -10vw;background-size:min(42vw,520px);filter:blur(.3px) saturate(.9);}.grain{position:fixed;inset:0;z-index:99;pointer-events:none;opacity:.12;background-image:repeating-radial-gradient(circle at 17% 22%,rgba(255,255,255,.6) 0 1px,transparent 1px 3px);mix-blend-mode:overlay}.top{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;justify-content:space-between;align-items:center;padding:22px 34px;border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:blur(16px);background:rgba(3,5,3,.5)}.top a{color:var(--ink);text-decoration:none;font-size:12px;letter-spacing:.12em;text-transform:uppercase}.top a:hover{color:var(--lime)}.progress{position:fixed;left:0;top:0;height:2px;background:var(--lime);z-index:300;width:0%;box-shadow:0 0 16px rgba(212,255,0,.55)}.hero{min-height:100vh;position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:5vw;align-items:end;padding:14vh 6vw 7vh;isolation:isolate}.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.32) saturate(.8);opacity:.8;z-index:-2}.hero-bg:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,5,3,.94) 0%,rgba(3,5,3,.72) 36%,rgba(3,5,3,.28) 100%)}.num{font-size:clamp(3rem,10vw,9rem);line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(212,255,0,.65);opacity:.75;margin-bottom:2rem}.kicker{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--lime);margin-bottom:1.2rem}.title{font-size:clamp(4rem,11vw,12rem);line-height:.82;letter-spacing:-.08em;margin:0;text-transform:uppercase}.en{font-size:clamp(1.1rem,2.2vw,2rem);color:var(--muted);letter-spacing:.18em;margin-top:1.4rem;text-transform:uppercase}.intro{max-width:720px;color:rgba(243,247,231,.76);font-size:clamp(1rem,1.4vw,1.32rem);line-height:1.8;margin-top:2rem}.player{position:relative;min-height:56vh;border:1px solid rgba(255,255,255,.12);border-radius:28px;overflow:hidden;background:#111;box-shadow:0 50px 140px rgba(0,0,0,.58);transform:rotate(1.5deg)}.player-img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 1s cubic-bezier(.16,1,.3,1),filter .8s ease}.player:hover .player-img{transform:scale(1.06);filter:saturate(1.12) contrast(1.08)}.playmark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:86px;height:86px;border-radius:50%;border:1px solid rgba(212,255,0,.55);display:grid;place-items:center;background:rgba(0,0,0,.28);backdrop-filter:blur(10px);color:var(--lime);font-size:28px;box-shadow:0 0 50px rgba(212,255,0,.12)}.player-caption{position:absolute;left:22px;right:22px;bottom:22px;display:flex;justify-content:space-between;gap:16px;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72)}.info{padding:8vh 6vw;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.06)}.cell{background:#070a05;padding:2rem;border:1px solid rgba(255,255,255,.06);min-height:150px}.cell b{display:block;color:var(--lime);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:1rem}.cell span{font-size:1rem;line-height:1.6;color:rgba(243,247,231,.78)}.concept{padding:10vh 6vw;display:grid;grid-template-columns:.8fr 1.2fr;gap:8vw;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.concept h2{margin:0;font-size:clamp(2rem,5vw,6rem);line-height:.9;letter-spacing:-.07em}.concept p{font-size:clamp(1.06rem,1.7vw,1.55rem);line-height:1.85;color:rgba(243,247,231,.78);margin:0}.tags{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:2rem}.tags span{border:1px solid rgba(212,255,0,.24);border-radius:999px;padding:.55rem .82rem;font-size:.75rem;color:var(--lime);background:rgba(212,255,0,.06)}.gallery{padding:9vh 6vw;display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}.shot{min-height:62vh;border-radius:24px;border:1px solid rgba(255,255,255,.08);background-size:cover;background-position:center;position:relative;overflow:hidden;filter:saturate(.96);transition:transform .7s cubic-bezier(.16,1,.3,1),filter .7s ease}.shot:nth-child(2){transform:translateY(6vh)}.shot:hover{transform:translateY(-10px) scale(1.018);filter:saturate(1.12) contrast(1.06);box-shadow:0 34px 90px rgba(0,0,0,.45)}.shot:nth-child(2):hover{transform:translateY(4vh) scale(1.018)}.shot:after{content:attr(data-label);position:absolute;left:18px;bottom:18px;padding:.45rem .7rem;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(0,0,0,.38);backdrop-filter:blur(8px);font-size:.68rem;letter-spacing:.12em;color:rgba(255,255,255,.72)}.nav-bottom{display:grid;grid-template-columns:1fr 1fr 1fr;border-top:1px solid var(--line);min-height:26vh}.nav-bottom a{display:flex;align-items:center;justify-content:center;text-align:center;color:var(--ink);text-decoration:none;border-right:1px solid var(--line);font-size:clamp(1.2rem,2.6vw,3rem);letter-spacing:-.06em;background:#070a05;transition:background .32s ease,color .32s ease}.nav-bottom a:last-child{border-right:0}.nav-bottom a:hover{background:rgba(212,255,0,.12);color:var(--lime)}.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s ease}.reveal.in{opacity:1;transform:none}@media(max-width:900px){.hero{grid-template-columns:1fr;padding:14vh 5vw 7vh}.player{min-height:48vh;transform:none}.info{grid-template-columns:1fr}.concept{grid-template-columns:1fr}.gallery{grid-template-columns:1fr}.shot,.shot:nth-child(2){min-height:52vh;transform:none}.nav-bottom{grid-template-columns:1fr}.nav-bottom a{min-height:18vh;border-right:0;border-bottom:1px solid var(--line)}body:after{opacity:.08;background-size:75vw}.top{padding:18px 20px}.title{font-size:18vw}}

/* ═══ CASE STUDY WORKFLOW ENRICHMENT ═══ */
.case-method{padding:9vh 6vw;border-top:1px solid var(--line);background:linear-gradient(180deg,#060805,#0a1007 54%,#060805);}
.case-method-head{display:grid;grid-template-columns:.9fr 1.1fr;gap:6vw;align-items:end;margin-bottom:3rem;}
.case-method .kicker{margin-bottom:1rem}.case-method h2{font-size:clamp(2.4rem,6vw,7rem);line-height:.86;letter-spacing:-.075em;margin:0;text-transform:uppercase}.case-method-lead{font-size:clamp(1rem,1.45vw,1.3rem);line-height:1.8;color:rgba(243,247,231,.72);margin:0}.method-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08)}.method-card{background:#070a05;padding:1.5rem;min-height:240px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}.method-card:before{content:'';position:absolute;inset:auto -30% -50% -30%;height:80%;background:radial-gradient(circle,rgba(212,255,0,.12),transparent 62%);opacity:0;transition:opacity .25s ease}.method-card:hover:before{opacity:1}.method-card b{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--lime);position:relative;z-index:1}.method-card p{font-size:.92rem;line-height:1.72;color:rgba(243,247,231,.72);margin:1.2rem 0 0;position:relative;z-index:1}.pipeline{padding:8vh 6vw;border-top:1px solid var(--line);background:#070a05}.pipeline h2{font-size:clamp(2rem,4.8vw,5.5rem);line-height:.9;letter-spacing:-.07em;margin:0 0 2.5rem}.pipeline-steps{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08)}.pipeline-steps div{background:#0b1008;padding:1.1rem;min-height:130px}.pipeline-steps span{display:block;color:var(--lime);font-size:.64rem;letter-spacing:.16em;margin-bottom:.7rem}.pipeline-steps p{margin:0;color:rgba(243,247,231,.68);font-size:.82rem;line-height:1.6}@media(max-width:1100px){.method-grid{grid-template-columns:repeat(2,1fr)}.pipeline-steps{grid-template-columns:repeat(2,1fr)}.case-method-head{grid-template-columns:1fr}}@media(max-width:700px){.method-grid,.pipeline-steps{grid-template-columns:1fr}.method-card{min-height:190px}}


/* 2026-06 image correction: MV detail gallery now respects 16:9 stills instead of forcing vertical crops. */
.gallery{align-items:start;}
.shot{min-height:0!important;aspect-ratio:16/9;background-position:center;}
@media(max-width:900px){.shot,.shot:nth-child(2){min-height:0!important;aspect-ratio:16/9;}}


/* ═══ SOFTWARE + WORKFLOW CARDS FOR EACH MV DETAIL PAGE ═══ */
.software-workflow{padding:8.5vh 6vw;border-top:1px solid var(--line);background:linear-gradient(180deg,#070a05,#0a1007 58%,#060805);}
.sw-head{display:grid;grid-template-columns:.86fr 1.14fr;gap:6vw;align-items:end;margin-bottom:2.6rem;}
.sw-head h2{font-size:clamp(2.2rem,5.4vw,6.4rem);line-height:.86;letter-spacing:-.075em;margin:0;text-transform:uppercase;}
.sw-head p{font-size:clamp(1rem,1.35vw,1.22rem);line-height:1.8;color:rgba(243,247,231,.72);margin:0;max-width:780px;}
.sw-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:1px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);}
.sw-card{background:#070a05;padding:1.5rem;min-height:250px;position:relative;overflow:hidden;}
.sw-card:before{content:'';position:absolute;right:-22%;bottom:-44%;width:80%;height:82%;border-radius:50%;background:radial-gradient(circle,rgba(212,255,0,.12),transparent 62%);opacity:0;transition:opacity .28s ease;}
.sw-card:hover:before{opacity:1;}
.sw-card>b{display:block;color:var(--lime);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:1.15rem;position:relative;z-index:1;}
.sw-icons{display:flex;flex-wrap:wrap;gap:.78rem;position:relative;z-index:1;}
.sw-tool{display:inline-flex;align-items:center;gap:.62rem;border:1px solid rgba(212,255,0,.16);border-radius:999px;padding:.58rem .86rem .58rem .58rem;background:rgba(212,255,0,.04);color:rgba(243,247,231,.82);font-size:.78rem;letter-spacing:.04em;}
.sw-tool img{width:30px;height:30px;object-fit:cover;border-radius:9px;background:rgba(255,255,255,.08);}
.sw-tool.txt{padding-left:.86rem;}
.sw-tool:hover{color:var(--lime);border-color:rgba(212,255,0,.48);background:rgba(212,255,0,.08);}
.sw-process ol{counter-reset:step;margin:0;padding:0;display:grid;gap:.75rem;position:relative;z-index:1;}
.sw-process li{list-style:none;display:grid;grid-template-columns:40px 1fr;gap:.9rem;align-items:start;color:rgba(243,247,231,.72);line-height:1.62;font-size:.92rem;}
.sw-process li:before{counter-increment:step;content:counter(step,decimal-leading-zero);color:var(--lime);font-size:.68rem;letter-spacing:.12em;padding-top:.18rem;}
.sw-process li b{display:block;color:rgba(243,247,231,.95);font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.08rem;}
@media(max-width:900px){.sw-head,.sw-grid{grid-template-columns:1fr}.software-workflow{padding:7vh 5vw}.sw-card{min-height:auto}.sw-process li{grid-template-columns:34px 1fr}}

.sw-note{position:relative;z-index:1;margin:-.35rem 0 1.15rem;color:rgba(243,247,231,.56);font-size:.82rem;line-height:1.7;max-width:820px;}
.sw-tool img,.wf-tool img,.sk-icon img{filter:saturate(.95) contrast(1.02);}


/* ═══ FINAL MV DETAIL WATCH CTA ═══ */
.watch-actions{position:absolute;left:22px;right:22px;bottom:76px;z-index:5;display:flex;flex-wrap:wrap;gap:.68rem;align-items:center;}
.watch-btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:.72rem .95rem;border-radius:999px;border:1px solid rgba(212,255,0,.42);background:rgba(5,8,4,.58);backdrop-filter:blur(12px);color:var(--lime);text-decoration:none;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;transition:transform .28s cubic-bezier(.16,1,.3,1),letter-spacing .28s ease,border-color .28s ease,background .28s ease;}
.watch-btn:hover{transform:translateY(-2px);letter-spacing:.2em;border-color:rgba(212,255,0,.76);background:rgba(212,255,0,.1)}
.watch-btn.secondary{color:rgba(243,247,231,.72);border-color:rgba(243,247,231,.2);background:rgba(243,247,231,.06)}
.watch-btn.secondary:hover{color:var(--ink);border-color:rgba(243,247,231,.42);background:rgba(243,247,231,.1)}
.watch-btn[aria-disabled="true"]{cursor:not-allowed;opacity:.78}.watch-btn[aria-disabled="true"]:hover{transform:none;letter-spacing:.16em}
.video-note{padding:0 6vw 5vh;color:rgba(243,247,231,.55);font-size:.82rem;line-height:1.7;border-bottom:1px solid var(--line)}
.video-note b{color:var(--lime);font-weight:500}.video-note code{color:rgba(243,247,231,.78);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:6px;padding:.12rem .34rem}
@media(max-width:900px){.watch-actions{position:absolute;bottom:80px;left:16px;right:16px}.watch-btn{width:100%;min-height:44px}.video-note{padding:0 5vw 5vh}}


/* === PRIORITY UPDATE: stronger case detail information === */
.info.case-brief{
  grid-template-columns:repeat(6,1fr);
  padding:7vh 6vw;
  background:
    radial-gradient(circle at 50% 0%,rgba(212,255,0,.07),transparent 44%),
    rgba(255,255,255,.06);
}
.info.case-brief .cell{
  background:rgba(7,10,5,.86);
  backdrop-filter:blur(8px);
  min-height:168px;
}
.info.case-brief .cell b{
  color:#d4ff00;
}
.info.case-brief .cell span{
  color:rgba(243,247,231,.82);
  font-size:.92rem;
}
@media(max-width:1280px){
  .info.case-brief{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:760px){
  .info.case-brief{grid-template-columns:1fr;}
}


/* === SITE BGM CONTROL === */
.bgm-toggle{position:fixed;right:2rem;bottom:1.6rem;z-index:80;display:inline-flex;align-items:center;justify-content:center;min-width:92px;min-height:36px;padding:.58rem .78rem;border:1px solid rgba(212,255,0,.34);border-radius:999px;background:rgba(5,8,4,.58);color:#d4ff00;font-family:inherit;font-size:.58rem;line-height:1;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;backdrop-filter:blur(14px);box-shadow:0 12px 34px rgba(0,0,0,.36),0 0 22px rgba(212,255,0,.06);transition:transform .28s cubic-bezier(.16,1,.3,1),border-color .28s ease,background .28s ease,color .28s ease;}
.bgm-toggle:hover{transform:translateY(-2px);border-color:rgba(212,255,0,.72);background:rgba(212,255,0,.095);}
.bgm-toggle.is-off{color:rgba(243,247,231,.54);border-color:rgba(243,247,231,.18);background:rgba(5,8,4,.42);box-shadow:0 12px 34px rgba(0,0,0,.28);}
@media(max-width:760px){.bgm-toggle{right:1rem;bottom:1rem;min-width:82px;min-height:34px;font-size:.52rem;}}