/* FILE 02 — 蓝图、半透明描图纸与系统反馈标注。 */
.case-ux-space{--bg:#e8edf0;--panel:#f8f8f4;--panel-2:#dfe8eb;--text:#17242a;--muted:#617078;--line:#b9c7cd;--orange:#d66535;--amber:#c28a3b;--cyan:#316f88;color:var(--text);background:var(--bg)}
.case-ux-space .grain{opacity:.045;mix-blend-mode:multiply}.case-ux-space .progress{background:linear-gradient(90deg,#d66535,#316f88)}
.case-ux-space .topbar{background:rgba(232,237,240,.82);border-color:rgba(23,36,42,.12);backdrop-filter:blur(20px)}.case-ux-space .brand,.case-ux-space .topbar nav a{color:var(--text)}.case-ux-space .topbar nav a{color:var(--muted)}.case-ux-space .brand span{border-color:var(--cyan);color:var(--cyan)}.case-ux-space .case-back{color:var(--muted)}.case-ux-space .case-back:hover{color:var(--cyan)}
.case-ux-space .hero{position:relative;isolation:isolate;overflow:hidden;min-height:88svh;background:radial-gradient(circle at 87% 31%,rgba(49,111,136,.18),transparent 24%),linear-gradient(120deg,#f8f7f1,#dae7eb)}.case-ux-space .hero:before{content:"STATE / SIGNAL / RESPONSE";position:absolute;right:6vw;bottom:11%;color:rgba(49,111,136,.16);font:600 clamp(20px,3vw,48px)/1 'Kanit',sans-serif;letter-spacing:.12em;writing-mode:vertical-rl;z-index:-1}.case-ux-space .hero:after{content:"";position:absolute;right:5vw;top:16%;width:min(36vw,500px);height:min(36vw,500px);border:1px solid rgba(49,111,136,.35);background:repeating-linear-gradient(0deg,transparent 0 26px,rgba(49,111,136,.08) 27px),repeating-linear-gradient(90deg,transparent 0 26px,rgba(49,111,136,.08) 27px);transform:rotate(5deg);z-index:-1;animation:ux-map-drift 8s ease-in-out infinite alternate}.case-ux-space h1 em,.case-ux-space h2 span{color:var(--cyan)}.case-ux-space .eyebrow,.case-ux-space .index,.case-ux-space .flow-step i,.case-ux-space .decision-copy>span,.case-ux-space .evidence-card figcaption>span{color:var(--orange)}
.case-ux-space .meta div,.case-ux-space .brief,.case-ux-space .decision,.case-ux-space .learning-list article{border-color:var(--line)}.case-ux-space .context{border-color:var(--line)}.case-ux-space .context-grid{gap:14px}.case-ux-space .context-grid article{min-height:270px;background:rgba(248,248,244,.72);border:1px solid var(--line);box-shadow:8px 9px 0 rgba(49,111,136,.08)}.case-ux-space .context-grid article:nth-child(2){transform:translateY(19px);background:rgba(232,241,243,.86)}.case-ux-space .context-grid h3{margin-top:68px}.case-ux-space .brief{background:rgba(248,248,244,.52);padding-inline:24px}
.case-ux-space .role{background:#dfe8eb}.case-ux-space .role-grid{gap:14px;border:0}.case-ux-space .role-grid article{border:1px solid var(--line);background:rgba(248,248,244,.72);box-shadow:8px 9px 0 rgba(49,111,136,.07)}.case-ux-space .flow-section{background:#e9e1d6}.case-ux-space .flow{gap:10px}.case-ux-space .flow-step{border:1px solid #acb8bc;background:rgba(248,248,244,.58);color:var(--muted)}.case-ux-space .flow-step+button{border-left:1px solid #acb8bc}.case-ux-space .flow-step.active{background:#2e6278;color:#fff;border-color:#2e6278}.case-ux-space .flow-step.active i{color:#f0c176}.case-ux-space .flow-detail{background:#f7f4ed;border:1px solid #aebdc1;box-shadow:14px 14px 0 rgba(49,111,136,.12)}.case-ux-space .flow-detail small{color:var(--cyan)}.case-ux-space .flow-detail img{filter:saturate(.86) contrast(.98)}
.case-ux-space .decision figure{position:relative;padding:12px;background:#fffdf8;box-shadow:12px 13px 0 rgba(49,111,136,.12)}.case-ux-space .decision figure:after{content:"INTERACTION NOTE";position:absolute;right:18px;top:18px;color:var(--cyan);font:600 9px 'Kanit',sans-serif;letter-spacing:.14em;writing-mode:vertical-rl}.case-ux-space .decision figure img{border-color:#cad4d4}.case-ux-space .evidence{background:#d7e2e4}.case-ux-space .evidence-grid{gap:24px}.case-ux-space .evidence-card{background:#f9f8f2;border-color:#aebdc1;box-shadow:10px 10px 0 rgba(49,111,136,.1)}.case-ux-space .evidence-card:nth-child(2){transform:translateY(20px)}.case-ux-space .reflection{background:linear-gradient(120deg,#f7f5ef,#e1ebec)}.case-ux-space footer{border-color:var(--line)}.case-ux-space footer a{color:var(--cyan)}
.case-arrival{position:fixed;inset:0;z-index:200;display:none;place-items:center;background:#dbe7e9;opacity:0;transition:opacity .55s ease}.case-arrival.is-active{display:grid;opacity:1}.case-arrival__folder{position:relative;width:min(74vw,850px);min-height:min(62vh,600px);padding:clamp(26px,5vw,70px);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:#f7f4eb;color:#173a49;box-shadow:20px 22px 0 rgba(49,111,136,.2);transform:translateY(28px) rotate(-2deg);transition:transform .7s cubic-bezier(.2,.8,.2,1)}.case-arrival__folder:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 28px,rgba(49,111,136,.07) 29px),repeating-linear-gradient(90deg,transparent 0 28px,rgba(49,111,136,.07) 29px)}.case-arrival__folder:after{content:"SYSTEM MAP";position:absolute;right:6%;top:9%;color:rgba(49,111,136,.23);font:700 clamp(30px,7vw,96px) 'Kanit',sans-serif;letter-spacing:.12em;writing-mode:vertical-rl}.case-arrival.is-active .case-arrival__folder{transform:translateY(0) rotate(0)}.case-arrival__folder>*{position:relative;z-index:1}.case-arrival__folder span,.case-arrival__folder i{font:600 11px 'Kanit',sans-serif;letter-spacing:.18em;font-style:normal}.case-arrival__folder b{margin:18px 0 14px;font:700 clamp(38px,7vw,90px)/.98 'Noto Sans SC',sans-serif;letter-spacing:-.08em}.case-entering .topbar,.case-entering .hero-copy{opacity:0;transform:translateY(24px)}.case-entered .topbar,.case-entered .hero-copy{opacity:1;transform:none;transition:opacity .65s ease .22s,transform .65s ease .22s}
@keyframes ux-map-drift{to{transform:rotate(-2deg) translateY(16px)}}
@media(max-width:850px){.case-ux-space .hero{min-height:90svh}.case-ux-space .hero:after{width:66vw;height:66vw;right:-11vw;top:13%}.case-ux-space .context-grid article:nth-child(2),.case-ux-space .evidence-card:nth-child(2){transform:none}.case-ux-space .flow{gap:8px}.case-ux-space .flow-step+button{border-left:1px solid #acb8bc}.case-arrival__folder{width:88vw;min-height:54vh}.case-arrival__folder b{font-size:46px}}
@media(prefers-reduced-motion:reduce){.case-arrival{display:none!important}.case-ux-space .hero:after{animation:none}.case-entering .topbar,.case-entering .hero-copy{opacity:1;transform:none}}

/* FILE 02 becomes a soft interaction notebook, not a technical dashboard. */
.case-ux-space{--bg:#f5f5ed;--panel:#fffdf8;--panel-2:#e5eff0;--text:#4a5557;--muted:#7d8888;--line:#d7e0da;--orange:#e6a08a;--amber:#e9c982;--cyan:#89b9c5}.case-ux-space .hero{background:radial-gradient(circle at 84% 24%,rgba(137,185,197,.22),transparent 25%),linear-gradient(120deg,#fffaf0,#e7f0f0)}.case-ux-space .hero:after{border-radius:48% 52% 46% 54%;border-color:rgba(137,185,197,.4);background:repeating-linear-gradient(0deg,transparent 0 26px,rgba(137,185,197,.08) 27px),repeating-linear-gradient(90deg,transparent 0 26px,rgba(137,185,197,.08) 27px);box-shadow:0 18px 42px rgba(137,185,197,.1)}.case-ux-space .context-grid,.case-ux-space .role-grid{gap:18px}.case-ux-space .context-grid article,.case-ux-space .role-grid article{border-radius:20px;border-color:#d4e0da;box-shadow:0 12px 26px rgba(104,131,132,.08)}.case-ux-space .context-grid article:nth-child(2){transform:translateY(14px) rotate(.6deg)}.case-ux-space .role-grid article:nth-child(2){transform:rotate(-.5deg)}.case-ux-space .flow-section{background:#f7eee2}.case-ux-space .flow-step{border-radius:16px}.case-ux-space .flow-detail{border-radius:24px;overflow:hidden;box-shadow:0 16px 34px rgba(104,131,132,.11)}.case-ux-space .decision figure{border-radius:22px;overflow:hidden;box-shadow:0 15px 30px rgba(104,131,132,.12)}.case-ux-space .evidence-card{border-radius:22px;box-shadow:0 14px 30px rgba(104,131,132,.11);transition:transform .42s cubic-bezier(.2,.8,.2,1),box-shadow .42s ease}.case-ux-space .evidence-card:hover{transform:translateY(-9px) rotate(.35deg);box-shadow:0 23px 38px rgba(104,131,132,.16)}.case-ux-space .evidence-card:nth-child(2){transform:translateY(15px) rotate(-.55deg)}.case-ux-space .evidence-card:nth-child(2):hover{transform:translateY(6px) rotate(-.1deg)}.case-ux-space .reflection{background:linear-gradient(120deg,#fffaf1,#e7f1ed)}
@media(max-width:850px){.case-ux-space .context-grid article:nth-child(2),.case-ux-space .role-grid article:nth-child(2),.case-ux-space .evidence-card:nth-child(2){transform:none}}

/* Original abstract diagrams replace every company-owned UI screenshot. */
.case-ux-space .ux-state-sketch{position:relative;display:flex;min-height:250px;padding:30px;flex-direction:column;justify-content:flex-end;gap:12px;overflow:hidden;border:1px dashed rgba(137,185,197,.7);border-radius:18px;background:radial-gradient(circle at 84% 18%,rgba(230,160,138,.28) 0 8px,transparent 9px),radial-gradient(circle at 72% 38%,rgba(137,185,197,.2) 0 14px,transparent 15px),repeating-linear-gradient(0deg,transparent 0 30px,rgba(137,185,197,.08) 31px),#fffdf8;color:#52686d}.case-ux-space .ux-state-sketch:before{content:"";position:absolute;left:11%;right:11%;top:36%;border-top:2px solid rgba(137,185,197,.5);box-shadow:30px 28px 0 -1px rgba(230,160,138,.45),95px -20px 0 -1px rgba(137,185,197,.45)}.case-ux-space .ux-state-sketch span,.case-ux-space .ux-state-sketch b,.case-ux-space .ux-state-sketch i{position:relative;z-index:1}.case-ux-space .ux-state-sketch span{font:600 11px 'Kanit',sans-serif;letter-spacing:.16em;color:#db907a}.case-ux-space .ux-state-sketch b{font:600 clamp(22px,2.6vw,34px)/1.18 'Noto Sans SC',sans-serif}.case-ux-space .ux-state-sketch i{font:13px 'Noto Sans SC',sans-serif;color:var(--muted);font-style:normal}.case-ux-space .flow-sketch{min-height:100%;border-radius:0}.case-ux-space .safe-visual:before{display:none}.case-ux-space .state-overlay:after{background:rgba(255,253,248,.88);color:#7296a1;border-color:rgba(137,185,197,.55)}.case-ux-space .evidence-card{cursor:default}.case-ux-space .evidence-card .ux-state-sketch{min-height:310px;border-radius:0;border:0;border-bottom:1px solid var(--line)}
@media(max-width:850px){.case-ux-space .evidence-card .ux-state-sketch{min-height:240px}}

/* Readable state summaries without decorative empty canvases. */
.case-ux-space .ux-state-sketch{min-height:0;justify-content:center;padding:28px;gap:14px;background:#fffdf8}
.case-ux-space .ux-state-sketch:before{display:none}
.case-ux-space .flow-detail{min-height:0;grid-template-columns:1.1fr .9fr;align-items:center}
.case-ux-space .flow-detail>div{padding:30px}
.case-ux-space .flow-sketch{min-height:0;margin:24px;border:1px solid #b8ccd0;border-radius:14px}
.case-ux-space .flow-step{padding:16px 20px}.case-ux-space .flow-step b{margin:10px 0 5px}
.case-ux-space .evidence-card .ux-state-sketch{min-height:0;padding:24px}
.case-ux-space .evidence-card:hover,.case-ux-space .evidence-card:nth-child(2),.case-ux-space .evidence-card:nth-child(2):hover{transform:none}
@media(max-width:850px){.case-ux-space .flow-detail{grid-template-columns:1fr}.case-ux-space .flow-detail>div{padding:22px}.case-ux-space .flow-sketch{margin:0 22px 22px}}