:root{
  --ink:#18202f;
  --muted:#667085;
  --paper:#ffffff;
  --line:rgba(35,47,63,.12);
  --navy:#17263a;
  --mint:#bfe4d1;
  --sky:#b9ddf1;
  --pink:#ef9ec2;
  --purple:#7862e8;
  --shadow:0 18px 50px rgba(24,32,47,.16);
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:"Pretendard Variable",Pretendard,"Noto Sans KR",Arial,sans-serif;color:var(--ink);background:#dff1f4}
button,input,select{font:inherit}
button{cursor:pointer}
.experience,.scene-shell,.scene-stage{width:100%;height:100%}
.scene-shell{position:relative;overflow:hidden;background:#cfe8f2}
.scene-stage canvas{display:block;width:100%;height:100%;touch-action:none}
.scene-vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 34%,rgba(17,28,43,.08));z-index:1}
.topbar{position:absolute;z-index:20;left:18px;right:18px;top:18px;display:flex;align-items:center;justify-content:space-between;gap:18px;pointer-events:none}
.brand{pointer-events:auto;display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff;padding:10px 14px 10px 10px;border-radius:18px;background:rgba(23,38,58,.88);box-shadow:0 10px 30px rgba(20,30,50,.16);backdrop-filter:blur(14px)}
.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#fff;color:#111827;font-weight:950;letter-spacing:-.08em}
.brand-copy{display:grid;gap:1px}.brand-copy b{font-size:.94rem;letter-spacing:-.02em}.brand-copy small{font-size:.67rem;letter-spacing:.16em;opacity:.68}
.top-actions{display:flex;align-items:center;gap:8px;pointer-events:auto;flex-wrap:wrap;justify-content:flex-end}
.chip{height:42px;padding:0 14px;border:1px solid rgba(255,255,255,.38);border-radius:999px;color:#fff;background:rgba(23,38,58,.86);box-shadow:0 10px 28px rgba(20,30,50,.13);backdrop-filter:blur(12px);font-size:1rem;font-weight:800}
.chip:hover,.chip[aria-pressed="true"]{background:#fff;color:var(--navy)}
.intro-card{position:absolute;z-index:12;left:28px;top:108px;width:min(360px,calc(100vw - 56px));padding:24px;border:1px solid rgba(255,255,255,.72);border-radius:26px;background:rgba(255,255,255,.88);box-shadow:var(--shadow);backdrop-filter:blur(18px)}
.eyebrow,.panel-kicker{font-size:.72rem;line-height:1.4;font-weight:900;letter-spacing:.16em;color:var(--purple)}
.intro-card h1{margin:10px 0 10px;font-size:1.75rem;line-height:1.15;letter-spacing:-.055em}
.intro-card p{margin:0;color:var(--muted);font-size:1rem;line-height:1.5}
.intro-actions{display:flex;gap:8px;margin-top:18px}
.btn{min-height:44px;padding:0 16px;border:0;border-radius:13px;font-size:1rem;font-weight:900}
.btn-primary{background:linear-gradient(135deg,#6e67e8,#9f6ce7);color:#fff;box-shadow:0 10px 24px rgba(110,103,232,.25)}
.btn-light{background:#f3f5f8;color:var(--ink)}
.floor-switcher{position:absolute;right:24px;top:104px;z-index:12;display:grid;gap:8px}
.floor-switcher button{width:142px;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid rgba(255,255,255,.7);border-radius:16px;background:rgba(255,255,255,.9);box-shadow:0 9px 24px rgba(25,38,54,.11);color:var(--ink);backdrop-filter:blur(12px)}
.floor-switcher b{font-size:1rem;color:var(--purple)}.floor-switcher span{font-size:.7rem;font-weight:850;color:#5c6574;letter-spacing:.06em}
.floor-switcher button:hover{transform:translateX(-3px);border-color:rgba(120,98,232,.35)}
.dock{position:absolute;z-index:20;left:50%;bottom:20px;transform:translateX(-50%);display:flex;align-items:center;gap:5px;padding:7px;border:1px solid rgba(255,255,255,.75);border-radius:20px;background:rgba(255,255,255,.9);box-shadow:0 16px 45px rgba(26,38,56,.16);backdrop-filter:blur(16px)}
.dock-item{min-width:98px;height:52px;border:0;border-radius:14px;background:transparent;display:flex;align-items:center;justify-content:center;gap:7px;color:#46505f}
.dock-item span{font-size:1rem}.dock-item b{font-size:.78rem}.dock-item:hover,.dock-item.active{color:#fff;background:linear-gradient(135deg,#735fe4,#ec8fbe)}
.hotspot-layer{position:absolute;inset:0;z-index:10;pointer-events:none}
.hotspot{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;border:1px solid rgba(255,255,255,.9);border-radius:999px;background:rgba(23,38,58,.88);color:#fff;padding:8px 12px;font-size:.7rem;font-weight:900;box-shadow:0 8px 20px rgba(20,30,50,.16);white-space:nowrap;backdrop-filter:blur(10px)}
.hotspot:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#ff9fc7;margin-right:7px;box-shadow:0 0 0 4px rgba(255,159,199,.16)}
.hotspot:hover{background:#fff;color:var(--navy);transform:translate(-50%,-50%) translateY(-2px)}
.detail-panel{position:absolute;z-index:30;top:86px;right:22px;width:min(480px,calc(100vw - 44px));max-height:calc(100vh - 180px);overflow:auto;padding:24px;border:1px solid rgba(255,255,255,.86);border-radius:26px;background:rgba(255,255,255,.96);box-shadow:0 24px 80px rgba(28,37,54,.22);backdrop-filter:blur(20px);transform:translateX(calc(100% + 40px));opacity:0;pointer-events:none;transition:.35s ease}
.detail-panel.open{transform:none;opacity:1;pointer-events:auto}
.panel-close{position:absolute;right:16px;top:14px;width:38px;height:38px;border:0;border-radius:12px;background:#f1f3f7;color:#677080;font-size:1.3rem}
.panel-head{padding-right:46px}.panel-head h2{margin:7px 0 0;font-size:1.45rem;line-height:1.28;letter-spacing:-.04em}
.panel-lead{margin:12px 0 18px;color:var(--muted);font-size:.9rem;line-height:1.65}
.feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.feature-grid article{padding:14px;border:1px solid var(--line);border-radius:16px;background:#fafbfc}.feature-grid article>span{font-size:.7rem;font-weight:900;color:var(--purple)}.feature-grid b{display:block;margin-top:8px;font-size:.9rem}.feature-grid p{margin:5px 0 0;font-size:.78rem;line-height:1.55;color:var(--muted)}
.split-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}.split-cards article{padding:18px;border-radius:18px;background:#f7f5ff;border:1px solid #e8e3fb}.split-cards article:nth-child(2){background:#fff5fa;border-color:#f5dce9}.split-cards span{font-size:.7rem;color:var(--purple);font-weight:900;letter-spacing:.12em}.split-cards h3{margin:7px 0 5px;font-size:1rem}.split-cards p{margin:0;font-size:.8rem;line-height:1.55;color:var(--muted)}
.phone-demo{display:grid;grid-template-columns:190px 1fr;gap:16px;align-items:center}.phone-screen{padding:14px;border:7px solid #1e2a3b;border-radius:28px;background:#faf9ff;box-shadow:0 18px 40px rgba(40,50,70,.15)}.phone-top{display:flex;justify-content:space-between;font-size:.7rem}.phone-top span{font-weight:900}.phone-top b{color:var(--purple)}.today-card{margin-top:12px;padding:12px;border-radius:14px;background:linear-gradient(135deg,#7761e6,#e79ac3);color:#fff}.today-card small,.today-card span{display:block;font-size:.65rem;opacity:.82}.today-card b{display:block;margin:5px 0;font-size:.84rem}.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:7px}.mini-grid div{padding:8px;border:1px solid #e7e8ed;border-radius:10px;background:#fff}.mini-grid small,.mini-grid b{display:block}.mini-grid small{font-size:.62rem;color:#9198a4}.mini-grid b{font-size:.76rem;margin-top:2px}.phone-screen button{width:100%;margin-top:8px;padding:9px;border:0;border-radius:10px;background:#232f42;color:#fff;font-size:.67rem;font-weight:850}.phone-copy{display:grid;gap:8px}.phone-copy>div{padding:10px 12px;border:1px solid var(--line);border-radius:13px}.phone-copy b,.phone-copy span{display:block}.phone-copy b{font-size:.78rem}.phone-copy span{margin-top:3px;font-size:.7rem;color:var(--muted)}
.flow-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}.flow-list li{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--line);border-radius:13px}.flow-list b{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:#f0edff;color:var(--purple);font-size:.7rem}.flow-list span{font-size:.82rem;font-weight:800}.event-sample{margin-top:12px;display:flex;align-items:center;gap:12px;padding:14px;border-radius:15px;background:#f7f9fc}.event-sample>span{font-size:1.05rem;font-weight:900;color:var(--purple)}.event-sample div{flex:1}.event-sample b,.event-sample small{display:block}.event-sample b{font-size:.84rem}.event-sample small{font-size:.7rem;color:var(--muted);margin-top:3px}.event-sample em{font-style:normal;padding:7px 9px;border-radius:999px;background:#e6f7ed;color:#2a7a4d;font-size:.67rem;font-weight:900}
.license-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.license-row button{padding:14px 8px;border:1px solid var(--line);border-radius:14px;background:#fbfcfd}.license-row b,.license-row span{display:block}.license-row b{font-size:.72rem;color:var(--purple)}.license-row span{margin-top:5px;font-size:.72rem;font-weight:800}.steps{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:14px;padding:12px;border-radius:14px;background:#17263a;color:#fff}.steps span{font-size:.65rem;font-weight:900}.steps i{font-style:normal;opacity:.45}
.portfolio-demo{display:grid;grid-template-columns:1fr 1fr;gap:12px}.portfolio-cover{min-height:190px;padding:20px;border-radius:18px;background:linear-gradient(145deg,#111a2a,#28265f);color:#fff}.portfolio-cover small{font-size:.6rem;letter-spacing:.07em;opacity:.72}.portfolio-cover h3{font-size:1.25rem;margin:18px 0 6px}.portfolio-cover p{font-size:.75rem;opacity:.72}.portfolio-cover span{display:inline-block;margin-top:18px;padding:8px 10px;border-radius:9px;background:#fff;color:#121927;font-size:.65rem;font-weight:900}.portfolio-list{display:grid;gap:8px}.portfolio-list article{display:flex;gap:10px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:14px}.portfolio-list article>b{width:31px;height:31px;display:grid;place-items:center;border-radius:9px;background:#f0edff;color:var(--purple);font-size:.7rem}.portfolio-list strong,.portfolio-list small{display:block}.portfolio-list strong{font-size:.75rem}.portfolio-list small{margin-top:3px;font-size:.62rem;color:var(--muted)}.tag-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.tag-row span{padding:7px 9px;border-radius:999px;background:#f2f4f7;color:#5b6472;font-size:.66rem;font-weight:800}
.consult-form{display:grid;gap:10px}.consult-form label{display:grid;gap:5px}.consult-form label span{font-size:.7rem;font-weight:800;color:#5a6473}.consult-form input,.consult-form select{height:44px;border:1px solid var(--line);border-radius:12px;padding:0 12px;background:#fff;color:var(--ink);font-size:.82rem}
.loading{position:absolute;z-index:100;inset:0;display:grid;place-items:center;align-content:center;gap:12px;background:#d9eef2;color:#455263;transition:.35s}.loading.hidden{opacity:0;pointer-events:none}.loading strong{font-size:1rem}.loading-dot{width:38px;height:38px;border:4px solid rgba(115,95,228,.15);border-top-color:#735fe4;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:767px){
  .intro-card{top:86px;left:16px;width:300px;padding:18px}.intro-card h1{font-size:1.55rem}.intro-card p{font-size:.8rem}.floor-switcher{top:86px;right:14px}.floor-switcher button{width:124px;padding:10px 11px}.topbar{left:12px;right:12px;top:12px}.brand-copy{display:none}.brand{padding:8px}.brand-mark{width:38px;height:38px}.top-actions .chip:nth-child(1),.top-actions .chip:nth-child(2){display:none}.dock{bottom:12px;max-width:calc(100vw - 20px);overflow-x:auto;justify-content:flex-start}.dock-item{min-width:86px}}
@media(max-width:767px){
  .intro-card{top:76px;width:calc(100% - 28px);max-width:none}.intro-card p{display:none}.intro-actions{margin-top:12px}.floor-switcher{top:auto;right:12px;bottom:82px;grid-template-columns:repeat(3,1fr);left:12px}.floor-switcher button{width:auto}.floor-switcher span{display:none}.detail-panel{top:70px;right:10px;width:calc(100vw - 20px);max-height:calc(100vh - 150px);padding:20px}.feature-grid,.split-cards,.portfolio-demo{grid-template-columns:1fr}.phone-demo{grid-template-columns:1fr}.phone-screen{width:190px;margin:0 auto}.license-row{grid-template-columns:1fr}.steps{flex-wrap:wrap}.top-actions .chip:nth-child(3){display:none}.dock-item{min-width:76px}.dock-item b{font-size:.7rem}.dock-item span{display:none}
}

/* v1.2 floor-focus interaction */
.intro-card{transition:opacity .3s ease,transform .3s ease}
.scene-shell.floor-focused .intro-card{opacity:0;pointer-events:none;transform:translateX(-16px)}
.floor-switcher button.active{background:linear-gradient(135deg,#735fe4,#ec8fbe);color:#fff;border-color:transparent;box-shadow:0 12px 30px rgba(102,82,211,.25)}
.floor-switcher button.active b,.floor-switcher button.active span{color:#fff}
.detail-panel.floor-mode{top:292px;width:370px;max-height:calc(100vh - 390px);padding:20px;border-radius:20px;box-shadow:0 16px 42px rgba(28,37,54,.15)}
.detail-panel.floor-mode .panel-head h2{font-size:1.18rem}
.detail-panel.floor-mode .panel-lead{font-size:.82rem;margin-bottom:14px}
.detail-panel.floor-mode .feature-grid article{padding:11px}
.detail-panel.floor-mode .feature-grid b{font-size:.82rem}
.detail-panel.floor-mode .feature-grid p{font-size:.72rem}
.field-route li span{display:grid;gap:2px}
.field-route li strong{font-size:.82rem}
.field-route li small{font-size:.7rem;line-height:1.45;color:var(--muted);font-weight:600}
@media(max-width:767px){
  .detail-panel.floor-mode{top:260px;right:14px;width:330px;max-height:calc(100vh - 350px)}
}
@media(max-width:767px){
  .scene-shell.floor-focused .intro-card{display:none}
  .detail-panel.floor-mode{top:auto;left:10px;right:10px;bottom:150px;width:auto;max-height:34vh;padding:16px;border-radius:18px}
  .detail-panel.floor-mode .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .detail-panel.floor-mode .panel-lead{display:none}
}

/* v1.3 field-story simulation */
.field-play-btn{width:100%;margin-top:12px;justify-content:center}
.field-route li{transition:.22s ease}
.field-route li.active{border-color:#8d77f0;background:linear-gradient(135deg,#f4f1ff,#fff5fa);box-shadow:0 8px 24px rgba(115,95,228,.10)}
.field-route li.active b{background:linear-gradient(135deg,#735fe4,#ec8fbe);color:#fff}
.field-route li.active strong{color:#5d49cf}


/* v1.4 always-on living academy + automatic field story */
.live-chip[aria-pressed="true"]{
  background:linear-gradient(135deg,#171f2d,#4d5fd7);
  color:#fff;
  border-color:rgba(255,255,255,.72);
}
.field-live-note{
  margin-top:12px;
  display:grid;
  grid-template-columns:auto auto 1fr;
  gap:8px;
  align-items:center;
  padding:10px 12px;
  border:1px solid #e6e1fb;
  border-radius:13px;
  background:#f7f4ff;
}
.field-live-note span{
  color:#e34b79;
  font-size:.7rem;
  font-weight:950;
  letter-spacing:.08em;
}
.field-live-note b{
  font-size:.75rem;
}
.field-live-note small{
  color:var(--muted);
  font-size:.67rem;
  text-align:right;
}
@media(max-width:767px){
  #liveBtn{display:inline-flex}
}
@media(max-width:767px){
  #autoBtn{display:none}
  #liveBtn{display:inline-flex;font-size:.72rem;padding:0 11px}
  .field-live-note{grid-template-columns:auto 1fr}
  .field-live-note small{grid-column:1/-1;text-align:left}
  .app-device-top>em{font-size:.85rem !important;}
}

/* v1.6 — free pan navigation + SIA MY fixed experience panel */
.topbar{
  left:auto;
  right:18px;
  width:auto;
  justify-content:flex-end;
}
.intro-card{
  top:28px;
}
.floor-switcher,
.dock{
  display:none !important;
}
.my-app-panel{
  position:absolute;
  z-index:18;
  right:24px;
  top:82px;
  width:330px;
  max-height:calc(100% - 138px);
  overflow:auto;
  padding:18px;
  border:1px solid rgba(255,255,255,.78);
  border-radius:22px;
  background:rgba(255,255,255,.91);
  box-shadow:0 18px 50px rgba(24,32,47,.14);
  backdrop-filter:blur(18px);
  transition:opacity .28s ease,transform .28s ease,width .28s ease;
}
.my-app-panel::-webkit-scrollbar{width:5px}
.my-app-panel::-webkit-scrollbar-thumb{background:rgba(91,97,116,.22);border-radius:999px}
.scene-shell.floor-focused .my-app-panel{
  opacity:0;
  pointer-events:none;
  transform:translateX(18px);
}
.my-app-title{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.my-app-title>div{min-width:0}
.my-app-title span{
  display:block;
  color:var(--purple);
  font-size:1rem;
  line-height:1.5;
  font-weight:950;
  letter-spacing:.14em;
}
.my-app-title b{
  display:block;
  margin-top:4px;
  font-size:1.15rem;
  line-height:1.25;
  letter-spacing:-.035em;
}
.my-app-title em{
  flex:0 0 auto;
  padding:6px 8px;
  border-radius:999px;
  background:#171f2d;
  color:#fff;
  font-size:1rem;
  font-style:normal;
  font-weight:900;
}
.my-app-flow>p{
  margin:10px 0 13px;
  color:var(--muted);
  font-size:.76rem;
  line-height:1.55;
}
.my-app-steps{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:7px;
}
.my-app-steps li{
  display:grid;
  grid-template-columns:31px 1fr;
  gap:9px;
  align-items:center;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(250,251,253,.92);
}
.my-app-steps li>b{
  display:grid;
  place-items:center;
  width:31px;
  height:31px;
  border-radius:9px;
  background:#f0edff;
  color:var(--purple);
  font-size:.85rem;
}
.my-app-steps strong,
.my-app-steps small{display:block}
.my-app-steps strong{font-size:1.15rem}
.my-app-steps small{margin-top:2px;color:var(--muted);font-size:1rem}
.my-app-open{
  width:100%;
  min-height:42px;
  margin-top:11px;
  border:0;
  border-radius:12px;
  background:linear-gradient(135deg,#735fe4,#986be4);
  color:#fff;
  font-size:.76rem;
  font-weight:900;
}
.my-app-panel.device-mode{
  width:360px;
  padding:13px;
  background:rgba(248,248,252,.96);
}
.my-app-device{
  overflow:hidden;
  border:6px solid #1c2635;
  border-radius:27px;
  background:#f8f8fc;
  box-shadow:0 12px 30px rgba(24,32,47,.12);
}
.app-device-top{
  height:43px;
  padding:0 12px;
  display:flex;
  align-items:center;
  gap:7px;
  background:#fff;
  border-bottom:1px solid #e9eaf0;
}
.app-device-top>span{font-size:1rem;font-weight:950;letter-spacing:.02em}
.app-device-top>em{padding:4px 7px;border-radius:999px;background:#efeaff;color:#6650d9;font-size:1rem;font-style:normal;font-weight:900}
.app-device-top>button{margin-left:auto;border:0;background:#f0f1f5;border-radius:8px;padding:6px 8px;color:#5b6573;font-size:.58rem;font-weight:900}
.app-profile{
  display:grid;
  grid-template-columns:38px 1fr auto;
  align-items:center;
  gap:9px;
  padding:13px 14px 9px;
}
.app-avatar{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:#171f2d;color:#fff;font-size:1rem;font-weight:950}
.app-profile small,.app-profile b{display:block}.app-profile small{font-size:1rem;color:#8d95a1}.app-profile b{margin-top:2px;font-size:1.15rem}.app-profile>span{font-size:.53rem;color:#949ba7;letter-spacing:.06em}
.app-dashboard{padding:5px 12px 14px}
.app-today{padding:12px;border-radius:14px;background:linear-gradient(135deg,#735fe4,#e792bd);color:#fff}
.app-today small,.app-today b,.app-today span{display:block}.app-today small{font-size:.57rem;opacity:.78}.app-today b{margin:5px 0;font-size:.84rem}.app-today span{font-size:.61rem;opacity:.84}
.app-menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px}
.app-menu-grid article{padding:10px;border:1px solid #e5e7ed;border-radius:12px;background:#fff}.app-menu-grid article>span{font-size:.78rem;color:#745fe1}.app-menu-grid b,.app-menu-grid small{display:block}.app-menu-grid b{margin-top:5px;font-size:.72rem}.app-menu-grid small{margin-top:2px;color:#8d94a0;font-size:.58rem}
.app-notice{margin-top:8px;padding:10px 11px;border-radius:12px;background:#eef7f3}.app-notice b,.app-notice small{display:block}.app-notice b{font-size:.68rem}.app-notice small{margin-top:3px;color:#607268;font-size:.57rem;line-height:1.4}
.app-portfolio{padding:5px 12px 14px}
.portfolio-app-head{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px}.portfolio-app-head span{grid-column:1/-1;color:#7460df;font-size:1rem;font-weight:950;letter-spacing:.13em}.portfolio-app-head b{font-size:1.15rem;letter-spacing:-.04em}.portfolio-app-head em{padding:4px 7px;border-radius:999px;background:#e8f7ee;color:#2f7e55;font-size:1rem;font-style:normal;font-weight:900}
.portfolio-app-event{margin-top:9px;padding:11px;border-radius:13px;background:#fff;border:1px solid #e6e8ee}.portfolio-app-event small,.portfolio-app-event b,.portfolio-app-event p{display:block}.portfolio-app-event small{font-size:.54rem;color:#8e96a4}.portfolio-app-event b{margin-top:4px;font-size:1rem}.portfolio-app-event p{margin:4px 0 0;color:#727b89;font-size:.59rem}
.portfolio-app-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px}
.app-photo{position:relative;min-height:112px;overflow:hidden;padding:8px;border-radius:12px;background:linear-gradient(145deg,#e8f3ff,#d9e7f7)}
.app-photo.makeup{background:linear-gradient(145deg,#fff0f5,#f4d9e7)}
.app-photo:before,.app-photo:after{content:"";position:absolute;border-radius:999px;background:#f0c7b6}
.app-photo:before{left:28%;top:23%;width:25px;height:25px;box-shadow:44px 6px 0 #efc5b6}
.app-photo:after{left:24%;top:44%;width:34px;height:48px;border-radius:12px;background:#6e67e8;box-shadow:47px 7px 0 #273648}
.app-photo.makeup:after{background:#e79ac3;box-shadow:47px 7px 0 #273648}
.app-photo i{position:absolute;left:45%;top:47%;width:42px;height:5px;border-radius:4px;background:#273648;transform:rotate(-22deg);z-index:2}
.app-photo span,.app-photo small{position:relative;z-index:3;display:block}.app-photo span{font-size:1rem;font-weight:950;color:#273648}.app-photo small{position:absolute;left:8px;bottom:7px;font-size:.53rem;font-weight:800;color:#596575}
.app-photo.alt{filter:saturate(.92) brightness(1.02)}
.portfolio-complete{display:grid;grid-template-columns:34px 1fr;gap:9px;align-items:center;margin-top:9px;padding:10px;border-radius:13px;background:#f0ecff;border:1px solid #ddd5ff}.portfolio-complete>span{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#735fe4;color:#fff;font-weight:950}.portfolio-complete b,.portfolio-complete small{display:block}.portfolio-complete b{font-size:1.15rem;color:#5542bf}.portfolio-complete small{margin-top:3px;font-size:1rem;line-height:1.5;color:#6f6886}
.portfolio-mode .my-app-device{box-shadow:0 16px 46px rgba(115,95,228,.28)}
.portfolio-mode .portfolio-complete{animation:portfolioPulse 1.25s ease-in-out infinite alternate}
@keyframes portfolioPulse{to{transform:translateY(-1px);box-shadow:0 7px 20px rgba(115,95,228,.13)}}

@media(max-width:767px){
  .topbar{left:auto;right:10px;top:10px}
  .top-actions{gap:6px}
  .chip{height:38px;padding:0 10px;font-size:.72rem}
  .top-actions .chip:nth-child(1),.top-actions .chip:nth-child(2){display:inline-flex}
  .intro-card{top:64px;left:14px;width:292px;padding:17px}
  .my-app-panel{right:12px;top:64px;width:292px;max-height:calc(100% - 112px)}
  .my-app-panel.device-mode{width:318px}
  .portfolio-complete b{font-size:1rem;}
  }
@media(max-width:767px){
  .topbar{top:8px;right:8px}
  .chip{height:36px;padding:0 9px;font-size:.68rem}
  .intro-card{top:54px;left:10px;width:calc(100% - 20px);padding:14px;border-radius:18px}
  .intro-card h1{font-size:1.28rem;margin:6px 0}
  .intro-card p{display:none}
  .intro-actions{margin-top:9px}
  .btn{min-height:40px;padding:0 13px;font-size:.75rem}
  .my-app-panel{top:auto;right:10px;left:10px;bottom:10px;width:auto;max-height:37%;padding:13px;border-radius:18px}
  .my-app-panel.device-mode{width:auto}
  .my-app-title b{font-size:.88rem}
  .my-app-flow>p{display:none}
  .my-app-steps{grid-template-columns:1fr 1fr;gap:6px}
  .my-app-steps li{grid-template-columns:27px 1fr;padding:7px}
  .my-app-steps li>b{width:27px;height:27px}
  .my-app-steps small{display:none}
  .my-app-open{min-height:38px;margin-top:8px}
  .app-profile{padding:9px 10px 6px}
  .app-dashboard,.app-portfolio{padding:4px 9px 10px}
  .app-photo{min-height:92px}
  .detail-panel.floor-mode{bottom:12px;max-height:42vh}
  .goal-complete span{font-size:.85rem !important;}
}

/* v2.0 · content-first SIA EXPERIENCE */

.official-home-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  white-space:nowrap;
}

.experience-now{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:14px;
  padding:9px 11px;
  border:1px solid rgba(120,98,232,.14);
  border-radius:12px;
  background:rgba(245,243,255,.9);
}
.experience-now span{
  flex:0 0 auto;
  padding:4px 6px;
  border-radius:999px;
  background:#735fe4;
  color:#fff;
  font-size:.85rem;
  font-weight:950;
  letter-spacing:.08em;
}
.experience-now b{
  min-width:0;
  font-size:1rem;
  line-height:1.5;
  color:#4e485f;
}

.my-app-steps li{
  transition:border-color .2s ease,background .2s ease,transform .2s ease;
}
.my-app-steps li.active{
  border-color:rgba(115,95,228,.42);
  background:#f2efff;
  transform:translateX(-2px);
}
.my-app-steps li.active>b{
  color:#fff;
  background:linear-gradient(135deg,#735fe4,#e792bd);
}
.my-app-steps li.active strong{color:#5946cf}

.app-feedback-card{
  margin-top:8px;
  padding:10px 11px;
  border:1px solid #e7e2fb;
  border-radius:12px;
  background:#f8f6ff;
}
.app-feedback-card span,
.app-feedback-card b,
.app-feedback-card small{display:block}
.app-feedback-card span{
  color:#735fe4;
  font-size:.52rem;
  font-weight:950;
  letter-spacing:.1em;
}
.app-feedback-card b{
  margin-top:5px;
  color:#4f5665;
  font-size:.62rem;
  line-height:1.45;
}
.app-feedback-card small{
  margin-top:4px;
  color:#9298a5;
  font-size:.54rem;
}
.app-license-card{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:8px;
  margin-top:8px;
  padding:9px 10px;
  border-radius:12px;
  background:#17263a;
  color:#fff;
}
.app-license-card span{font-size:.55rem;font-weight:950;color:#c9c3f5}
.app-license-card b{font-size:.62rem;line-height:1.35}
.app-license-card em{
  padding:4px 7px;
  border-radius:999px;
  background:#fff;
  color:#17263a;
  font-size:.53rem;
  font-style:normal;
  font-weight:950;
}
.portfolio-career{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:5px;
  margin-top:8px;
}
.portfolio-career span{
  padding:7px 3px;
  border:1px solid #e5e7ed;
  border-radius:9px;
  background:#fff;
  color:#596273;
  text-align:center;
  font-size:.85rem;
  font-weight:900;
}
.goal-complete{
  margin-top:8px;
  padding:9px 10px;
  border-radius:11px;
  background:linear-gradient(135deg,#17263a,#312b65);
  color:#fff;
}
.goal-complete b,
.goal-complete span{display:block}
.goal-complete b{font-size:1rem;color:#ffd5e7}
.goal-complete span{margin-top:3px;font-size:1rem;opacity:.78}

/* SIA MY is part of the experience, so keep it visible while inspecting floors. */
.scene-shell.floor-focused .my-app-panel{
  opacity:1;
  pointer-events:auto;
  transform:none;
}

/* make hotspots quieter as more interactive content has been added */
.hotspot{
  padding:7px 10px;
  font-size:1rem;
  background:rgba(23,38,58,.80);
}
.hotspot:before{
  width:6px;
  height:6px;
  margin-right:6px;
}

@media(max-width:767px){
  .official-home-link{display:inline-flex}
  .experience-now{margin-top:10px}
}
@media(max-width:767px){
  .official-home-link{font-size:.64rem}
  .experience-now{display:none}
  .portfolio-career{grid-template-columns:1fr 1fr}
  .app-feedback-card{display:none}
  .app-license-card{margin-top:6px}
}

.detail-panel{display:none !important}


/* v2.1 · simplified launch UI */
.intro-actions .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  white-space:nowrap;
}

/* The old top homepage shortcut is no longer used. */
.official-home-link{display:none !important;}

/* Mobile: do not cover the 3D scene with the SIA MY flow/dashboard.
   Only reveal the actual portfolio result at the registration moment. */
@media(max-width:767px){
  .my-app-panel{
    display:none !important;
  }
  .my-app-panel.portfolio-mode{
    display:block !important;
    top:auto;
    right:8px;
    left:8px;
    bottom:8px;
    width:auto;
    max-height:58%;
    padding:9px;
    overflow:auto;
    border-radius:17px;
  }
  .my-app-panel.portfolio-mode .my-app-device{
    width:100%;
    max-width:390px;
    margin:0 auto;
  }
  .my-app-panel.portfolio-mode .app-device-top>button{
    display:none;
  }
  .my-app-panel.portfolio-mode .app-profile{
    padding:8px 9px 5px;
  }
  .my-app-panel.portfolio-mode .app-portfolio{
    padding:4px 8px 9px;
  }
  .my-app-panel.portfolio-mode .app-photo{
    min-height:82px;
  }
}


/* v2.2 · final portfolio reveal */
.portfolio-impact{
  margin:2px 4px 12px;
  padding:14px 14px 13px;
  border-radius:16px;
  background:linear-gradient(135deg,#171f2c,#342b68);
  color:#fff;
  text-align:center;
}
.portfolio-impact span{
  display:block;
  margin-bottom:6px;
  color:#cfc7ff;
  font-size:1rem;
  font-weight:950;
  letter-spacing:.13em;
}
.portfolio-impact strong{
  display:block;
  font-size:1.15rem;
  line-height:1.25;
  letter-spacing:-.035em;
}

/* The portfolio result is the climax of the experience: center it on every screen. */
.my-app-panel.portfolio-mode{
  display:block !important;
  position:absolute;
  z-index:50;
  left:50% !important;
  right:auto !important;
  top:50% !important;
  bottom:auto !important;
  width:min(430px,calc(100% - 32px)) !important;
  max-height:calc(100% - 36px) !important;
  padding:12px !important;
  overflow:auto;
  transform:translate(-50%,-50%) !important;
  border-radius:22px;
  background:rgba(248,248,252,.98);
  box-shadow:0 26px 80px rgba(19,27,42,.32),0 0 0 1px rgba(255,255,255,.65);
}
.my-app-panel.portfolio-mode .my-app-device{
  width:100% !important;
  max-width:none !important;
  margin:0 auto;
}
.my-app-panel.portfolio-mode .app-device-top>button{
  display:none;
}

@media(max-width:767px){
  .my-app-panel{
    display:none !important;
  }
  .my-app-panel.portfolio-mode{
    display:block !important;
    left:50% !important;
    right:auto !important;
    top:50% !important;
    bottom:auto !important;
    width:calc(100% - 20px) !important;
    max-height:calc(100% - 20px) !important;
    padding:8px !important;
    border-radius:18px;
    transform:translate(-50%,-50%) !important;
  }
  .my-app-panel.portfolio-mode .app-profile{
    padding:7px 8px 4px;
  }
  .my-app-panel.portfolio-mode .app-portfolio{
    padding:4px 7px 8px;
  }
  .my-app-panel.portfolio-mode .app-photo{
    min-height:74px;
  }
  .portfolio-impact{
    margin:1px 2px 8px;
    padding:10px 9px;
    border-radius:13px;
  }
  .portfolio-impact span{
    margin-bottom:4px;
    font-size:.85rem;
  }
  .portfolio-impact strong{
    font-size:1rem;
    line-height:1.25;
  }
  .goal-complate b{font-size:.85rem;}
  .goal-complate span{font-size:.85rem;}
  .portfolio-complete small{font-size:.85rem;}
  .portfolio-complate b{font-size:1rem;}
  .app-photo span{font-size:.85rem;}
  .portfolio-app-head em{font-size:.85rem;}
  .portfolio-app-head b{font-size:1rem;}
}

/* v2.3 · spacing refinement */
.my-app-steps{
  margin-top:16px;
}

.intro-card h1{
  margin-bottom:16px;
}

.intro-card p{
  margin-top:0;
}

@media(max-width:767px){
  .my-app-steps{
    margin-top:12px;
  }

  .intro-card h1{
    margin-bottom:12px;
  }
}

/* Give the larger app copy enough room on desktop. */
.my-app-panel:not(.portfolio-mode){
  width:390px;
}
.my-app-steps li{
  grid-template-columns:38px 1fr;
  gap:11px;
  padding:11px 12px;
}
.my-app-steps li>b{
  width:38px;
  height:38px;
}
.my-app-steps small{
  margin-top:4px;
  line-height:1.45;
}



/* v2.6 · portfolio result typography follows the SIA global scale too.
   Desktop: large 1.5rem / medium 1.15rem / small 1rem / buttons 1rem
   Mobile <=767px: large 1.25rem / medium 1rem / small .85rem / buttons 1rem */
.my-app-panel.portfolio-mode{
  width:min(560px,calc(100% - 32px)) !important;
}



/* Give the larger type breathing room without changing the content hierarchy. */
.my-app-panel.portfolio-mode .app-device-top{
  min-height:52px;
  height:auto;
  padding-top:8px;
  padding-bottom:8px;
}
.my-app-panel.portfolio-mode .app-profile{
  grid-template-columns:44px 1fr auto;
  gap:11px;
  padding:14px 16px 11px;
}
.my-app-panel.portfolio-mode .app-avatar{
  width:44px;
  height:44px;
}
.my-app-panel.portfolio-mode .app-portfolio{
  padding:8px 16px 16px;
}
.my-app-panel.portfolio-mode .portfolio-app-event,
.my-app-panel.portfolio-mode .portfolio-complete{
  padding:14px;
}
.my-app-panel.portfolio-mode .app-photo{
  min-height:132px;
  padding:11px;
}
.my-app-panel.portfolio-mode .app-photo small{
  left:11px;
  bottom:9px;
}
.my-app-panel.portfolio-mode .portfolio-career span{
  padding:9px 5px;
}
.my-app-panel.portfolio-mode .goal-complete{
  padding:12px 14px;
}

@media(max-width:767px){
  .my-app-panel.portfolio-mode{
    width:calc(100% - 20px) !important;
  }
  .my-app-panel.portfolio-mode .app-device-top{
    min-height:46px;
    padding:6px 10px;
  }
  .my-app-panel.portfolio-mode .app-profile{
    grid-template-columns:38px 1fr auto;
    gap:8px;
    padding:9px 10px 6px;
  }
  .my-app-panel.portfolio-mode .app-avatar{
    width:38px;
    height:38px;
  }
  .app-avatar{font-size:.85rem;}
  .app-profile small{font-size:.85rem;}
  .app-profile b{font-size:1rem;}
  .my-app-panel.portfolio-mode .app-portfolio{
    padding:5px 9px 10px;
  }
  .my-app-panel.portfolio-mode .portfolio-app-event,
  .my-app-panel.portfolio-mode .portfolio-complete{
    padding:10px;
  }
  .my-app-panel.portfolio-mode .app-photo{
    min-height:92px;
    padding:8px;
  }
  .my-app-panel.portfolio-mode .app-photo small{
    left:8px;
    bottom:7px;
  }
  .my-app-panel.portfolio-mode .portfolio-career span{
    padding:7px 4px;
  }
  .my-app-panel.portfolio-mode .goal-complete{
    padding:9px 10px;
  }
}


/* v2.7 · adaptive performance + final portfolio typography */
html.performance-lite .intro-card,
html.performance-lite .my-app-panel{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:0 8px 24px rgba(24,32,47,.10) !important;
}
html.performance-lite .scene-vignette{
  display:none;
}
html.performance-lite .hotspot{
  box-shadow:0 4px 12px rgba(24,32,47,.10) !important;
}


/* v2.9 · compact 3-column portfolio result */
.portfolio-app-grid.portfolio-three-grid{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:8px;
}
.portfolio-app-grid.portfolio-three-grid .app-photo{
  min-height:96px;
  padding:8px 6px;
}
.portfolio-app-grid.portfolio-three-grid .app-photo span{
  display:block;
  white-space:nowrap;
  word-break:keep-all;
  text-align:left;
}
.portfolio-app-grid.portfolio-three-grid .app-photo small{
  display:none !important;
}
.portfolio-app-grid.portfolio-three-grid .app-photo:before{
  left:50%;
  top:26%;
  width:23px;
  height:23px;
  transform:translateX(-50%);
  box-shadow:none;
}
.portfolio-app-grid.portfolio-three-grid .app-photo:after{
  left:50%;
  top:48%;
  width:34px;
  height:46px;
  transform:translateX(-50%);
  box-shadow:none;
}
.portfolio-app-grid.portfolio-three-grid .app-photo i{
  left:58%;
  top:48%;
  width:36px;
}
.portfolio-app-grid.portfolio-three-grid .app-photo.nail{
  background:linear-gradient(145deg,#f4efff,#ece4ff);
}
.portfolio-app-grid.portfolio-three-grid .app-photo.nail:after{
  background:#9a7ce7;
}
.portfolio-app-grid.portfolio-three-grid .app-photo.nail i{
  width:18px;
  height:18px;
  border-radius:50%;
  background:transparent;
  border:3px solid #273648;
  border-top-color:transparent;
  border-left-color:transparent;
  transform:translateX(-50%) rotate(45deg);
}
.my-app-panel.portfolio-mode .portfolio-app-grid.portfolio-three-grid .app-photo{
  min-height:102px;
  padding:9px 7px;
}

@media(max-width:767px){
  .portfolio-app-grid.portfolio-three-grid{
    gap:6px;
  }
  .portfolio-app-grid.portfolio-three-grid .app-photo{
    min-height:74px;
    padding:7px 5px;
  }
  .portfolio-app-grid.portfolio-three-grid .app-photo:before{
    top:28%;
    width:18px;
    height:18px;
  }
  .portfolio-app-grid.portfolio-three-grid .app-photo:after{
    top:49%;
    width:26px;
    height:36px;
  }
  .portfolio-app-grid.portfolio-three-grid .app-photo i{
    width:24px;
    left:59%;
  }
  .portfolio-app-grid.portfolio-three-grid .app-photo.nail i{
    width:12px;
    height:12px;
    border-width:2px;
  }
  .my-app-panel.portfolio-mode .portfolio-app-grid.portfolio-three-grid .app-photo{
    min-height:78px;
    padding:7px 5px;
  }
}


/* v2.10 · simplified final portfolio text */
.my-app-panel.portfolio-mode .app-profile{
  grid-template-columns:44px 1fr !important;
}
.my-app-panel.portfolio-mode .portfolio-app-head{
  grid-template-columns:1fr auto !important;
  gap:8px;
}
.my-app-panel.portfolio-mode .portfolio-app-head b{
  grid-column:auto !important;
}
.my-app-panel.portfolio-mode .portfolio-app-head span,
.my-app-panel.portfolio-mode .app-profile>span,
.my-app-panel.portfolio-mode .portfolio-app-event small,
.my-app-panel.portfolio-mode .portfolio-app-event p{
  display:none !important;
}
.my-app-panel.portfolio-mode .portfolio-app-event{
  margin-top:8px;
}
.my-app-panel.portfolio-mode .portfolio-app-event b{
  margin-top:0 !important;
}
@media(max-width:767px){
  .my-app-panel.portfolio-mode .app-profile{
    grid-template-columns:38px 1fr !important;
  }
}

/* v2.12 · mobile intro copy restore + centered chip labels */
.eyebrow{
  display:none !important;
}

.chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1.5;
}

@media(max-width:767px){
  .top-actions{
    align-items:center;
  }
  .chip{
    justify-content:center;
    text-align:center;
    padding-left:12px;
    padding-right:12px;
  }
  .intro-card{
    top:54px;
    left:10px;
    width:calc(100% - 20px);
    padding:14px;
    border-radius:18px;
  }
  .intro-card h1{
    font-size:1.25rem;
    margin:6px 0 10px;
  }
  .intro-card p{
    display:block !important;
    margin:0;
    font-size:.85rem;
    line-height:1.5 !important;
  }
  .experience-now{
    display:flex !important;
    margin-top:10px;
  }
  .experience-now span{
    font-size:.85rem;
  }
  .experience-now b{
    font-size:.85rem;
    line-height:1.5 !important;
  }
}


/* v2.13 · hide the intro popup while the final portfolio result is open on mobile */
@media(max-width:767px){
  .scene-shell.portfolio-showing .intro-card{
    display:none !important;
  }
}


/* 2026-09-21 · keep intro card visible while inspecting academy hotspots/floors */
.scene-shell.floor-focused .intro-card{
  display:block !important;
  opacity:1 !important;
  pointer-events:auto !important;
  transform:none !important;
}

@media(max-width:767px){
  .scene-shell.floor-focused .intro-card{
    display:block !important;
    opacity:1 !important;
    pointer-events:auto !important;
    transform:none !important;
  }

  /* The final portfolio reveal is the only mobile state that hides the intro card. */
  .scene-shell.portfolio-showing .intro-card{
    display:none !important;
  }
}


/* 2026-09-21 · mobile: hide day / night / auto-experience controls */
@media(max-width:767px){
  .top-actions{
    display:none !important;
  }
}


/* 2026-09-21 · mobile intro moves up after hiding day/night/auto controls */
@media(max-width:767px){
  .intro-card{
    top:10px !important;
  }
}


/* 2026-09-21 · unified rendering UI / mobile compact panels */
.intro-mobile-toggle,
.mobile-flow-panel{
  display:none;
}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .intro-card,
  .my-app-panel,
  .mobile-flow-card{
    background:rgba(255,255,255,.97) !important;
  }
}

.intro-card,
.my-app-panel{
  -webkit-backdrop-filter:blur(18px);
}

.scene-stage canvas{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}

@media(max-width:767px){
  /* Day/night/auto controls stay hidden on mobile. */
  .topbar,
  .top-actions{
    display:none !important;
  }

  /* Compact top panel: only CTA buttons + detail toggle by default. */
  .intro-card{
    top:10px !important;
    left:10px !important;
    width:calc(100% - 20px) !important;
    padding:10px !important;
    display:flex !important;
    flex-direction:column;
    gap:8px;
    border-radius:18px;
    opacity:1 !important;
    pointer-events:auto !important;
    transform:none !important;
  }
  .intro-card .intro-actions{
    order:1;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    width:100%;
    margin:0 !important;
  }
  .intro-card .intro-actions .btn{
    width:100%;
    min-height:40px;
    padding:0 9px;
    font-size:1rem !important;
  }
  .intro-card .experience-now{
    display:none !important;
  }
  .intro-card .intro-copy{
    order:3;
    display:none;
    padding:4px 2px 2px;
  }
  .intro-card.mobile-expanded .intro-copy{
    display:block;
  }
  .intro-card .intro-copy h1{
    margin:0 0 8px !important;
    font-size:1.15rem !important;
    line-height:1.15 !important;
  }

  .hotspot{font-size:.85rem;}

  .intro-card .intro-copy p{
    display:block !important;
    margin:0 !important;
    font-size:1rem !important;
    line-height:1.5 !important;
  }
  .intro-mobile-toggle{
    order:2;
    display:flex;
    width:100%;
    min-height:34px;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:0 8px;
    border:0;
    border-top:1px solid rgba(24,32,47,.08);
    background:transparent;
    color:#596273;
    font-size:.85rem;
    font-weight:850;
  }
  .intro-mobile-toggle i{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:18px;
    font-size:1.05rem;
    font-style:normal;
    line-height:1;
  }

  /* Existing PC SIA MY panel remains hidden on mobile except final portfolio. */
  .my-app-panel:not(.portfolio-mode){
    display:none !important;
  }

  /* One SIA MY step at a time at the bottom. */
  .mobile-flow-panel{
    display:block;
    position:absolute;
    z-index:24;
    left:10px;
    right:10px;
    bottom:10px;
    transition:transform .28s ease;
    -webkit-transition:-webkit-transform .28s ease;
  }
  .mobile-flow-toggle{
    display:flex;
    width:46px;
    height:30px;
    margin:0 auto -1px;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.9);
    border-bottom:0;
    border-radius:13px 13px 0 0;
    background:rgba(255,255,255,.96);
    color:#5c6574;
    box-shadow:0 -7px 18px rgba(24,32,47,.08);
  }
  .mobile-flow-toggle i{
    font-size:1.1rem;
    font-style:normal;
    line-height:1;
  }
  .mobile-flow-card{
    display:grid;
    grid-template-columns:38px 1fr;
    gap:10px;
    align-items:center;
    min-height:66px;
    padding:9px 11px;
    border:1px solid rgba(255,255,255,.88);
    border-radius:16px;
    background:rgba(255,255,255,.94);
    box-shadow:0 12px 30px rgba(24,32,47,.14);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
  }
  .mobile-flow-card>b{
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    border-radius:10px;
    background:linear-gradient(135deg,#735fe4,#e792bd);
    color:#fff;
    font-size:.85rem;
  }
  .mobile-flow-card strong,
  .mobile-flow-card small{
    display:block;
  }
  .mobile-flow-card strong{
    font-size:1.15rem;
    color:#283245;
  }
  .mobile-flow-card small{
    margin-top:2px;
    font-size:1rem;
    color:#70798a;
  }
  .mobile-flow-panel.is-collapsed{
    -webkit-transform:translateY(calc(100% - 30px));
    transform:translateY(calc(100% - 30px));
  }

  /* Final portfolio stays the only full-screen mobile overlay. */
  .scene-shell.portfolio-showing .intro-card,
  .scene-shell.portfolio-showing .mobile-flow-panel{
    display:none !important;
  }
}


/* 2026-09-21 · mobile panel alignment refinement */
@media(max-width:767px){
  /* Top detail toggle: label + arrow sit on exactly the same center line. */
  .intro-mobile-toggle{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    line-height:1.5 !important;
  }
  .intro-mobile-toggle span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:1.5 !important;
  }
  .intro-mobile-toggle i{
    position:relative;
    display:inline-block !important;
    width:8px;
    height:8px;
    min-width:8px;
    font-size:0 !important;
    line-height:0 !important;
    transform:none !important;
  }
  .intro-mobile-toggle i::before{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:6px;
    height:6px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:translate(-50%,-62%) rotate(45deg);
    transform-origin:center;
  }
  .intro-mobile-toggle[aria-expanded="true"] i::before{
    transform:translate(-50%,-34%) rotate(225deg);
  }

  /* Bottom SIA MY card: center the number + copy as one group, both axes. */
  .mobile-flow-card{
    grid-template-columns:38px auto !important;
    justify-content:center !important;
    align-items:center !important;
    align-content:center !important;
    min-height:66px;
  }
  .mobile-flow-card>b{
    align-self:center;
    justify-self:center;
  }
  .mobile-flow-card>span{
    align-self:center;
    justify-self:center;
    text-align:left;
  }
}


/* 2026-09-21 · unify mobile chevrons and keep their center position fixed */
@media(max-width:767px){
  /* Both top and bottom arrows use exactly the same geometry. */
  .intro-mobile-toggle i,
  .mobile-flow-toggle i{
    position:relative !important;
    display:inline-block !important;
    width:8px !important;
    height:8px !important;
    min-width:8px !important;
    font-size:0 !important;
    line-height:0 !important;
    transform:none !important;
    flex:0 0 8px;
  }

  .intro-mobile-toggle i::before,
  .mobile-flow-toggle i::before{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:6px;
    height:6px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform-origin:center;
  }

  /* Top: closed = down / opened = up. Center never moves. */
  .intro-mobile-toggle i::before{
    transform:translate(-50%,-50%) rotate(45deg);
  }
  .intro-mobile-toggle[aria-expanded="true"] i::before{
    transform:translate(-50%,-50%) rotate(225deg);
  }

  /* Bottom: panel open = down / panel collapsed = up. Center never moves. */
  .mobile-flow-toggle i::before{
    transform:translate(-50%,-50%) rotate(45deg);
  }
  .mobile-flow-toggle[aria-expanded="false"] i::before{
    transform:translate(-50%,-50%) rotate(225deg);
  }

  /* Keep the bottom toggle itself horizontally fixed at the exact center.
     Collapsing only moves the panel vertically. */
  .mobile-flow-toggle{
    position:relative !important;
    left:50% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    transform:translateX(-50%) !important;
  }

  .mobile-flow-panel.is-collapsed .mobile-flow-toggle{
    left:50% !important;
    transform:translateX(-50%) !important;
  }
}


/* 2026-09-21 · top mobile toggle: fixed label/arrow geometry */
@media(max-width:767px){
  .intro-mobile-toggle{
    display:grid !important;
    grid-template-columns:72px 8px !important;
    column-gap:7px !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-height:34px !important;
    padding:0 8px !important;
    line-height:1.5 !important;
  }

  .intro-mobile-toggle span{
    display:block !important;
    width:72px !important;
    min-width:72px !important;
    text-align:right !important;
    white-space:nowrap !important;
    line-height:1.5 !important;
  }

  .intro-mobile-toggle i{
    position:relative !important;
    display:block !important;
    width:8px !important;
    height:8px !important;
    min-width:8px !important;
    margin:0 !important;
    padding:0 !important;
    align-self:center !important;
    justify-self:center !important;
    font-size:0 !important;
    line-height:0 !important;
    transform:none !important;
  }

  .intro-mobile-toggle i::before{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:6px;
    height:6px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:translate(-50%,-50%) rotate(45deg) !important;
    transform-origin:center center !important;
  }

  .intro-mobile-toggle[aria-expanded="true"] i::before{
    transform:translate(-50%,-50%) rotate(225deg) !important;
  }
}


/* 2026-09-21 · top toggle final alignment:
   text + chevron sit directly next to each other on the same vertical center.
   The group stays centered; only the chevron direction changes. */
@media(max-width:767px){
  .intro-mobile-toggle{
    display:grid !important;
    grid-template-columns:64px 8px !important;
    column-gap:4px !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    height:34px !important;
    min-height:34px !important;
    padding:0 8px !important;
    line-height:1.5 !important;
  }

  .intro-mobile-toggle span{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    width:64px !important;
    min-width:64px !important;
    height:34px !important;
    margin:0 !important;
    padding:0 !important;
    text-align:right !important;
    white-space:nowrap !important;
    line-height:1.5 !important;
  }

  .intro-mobile-toggle i{
    position:relative !important;
    display:block !important;
    width:8px !important;
    height:8px !important;
    min-width:8px !important;
    margin:0 !important;
    padding:0 !important;
    align-self:center !important;
    justify-self:start !important;
    font-size:0 !important;
    line-height:0 !important;
    transform:none !important;
  }

  .intro-mobile-toggle i::before{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:6px;
    height:6px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:translate(-50%,-50%) rotate(45deg) !important;
    transform-origin:center center !important;
  }

  .intro-mobile-toggle[aria-expanded="true"] i::before{
    transform:translate(-50%,-50%) rotate(225deg) !important;
  }
}


/* 2026-09-21 · top toggle exact visual centering + 10px horizontal gap */
@media(max-width:767px){
  .intro-mobile-toggle{
    grid-template-columns:64px 12px !important;
    column-gap:10px !important;
  }

  .intro-mobile-toggle i{
    width:12px !important;
    height:10px !important;
    min-width:12px !important;
    position:relative !important;
  }

  /* Two-stroke chevron keeps the exact same visual center for ↓ and ↑. */
  .intro-mobile-toggle i::before,
  .intro-mobile-toggle i::after{
    content:"";
    position:absolute;
    top:50%;
    width:7px;
    height:2px;
    border:0 !important;
    border-radius:2px;
    background:currentColor;
    transform-origin:center center;
  }

  .intro-mobile-toggle i::before{
    left:50%;
    transform:translate(-92%,-50%) rotate(45deg) !important;
  }

  .intro-mobile-toggle i::after{
    left:50%;
    transform:translate(-8%,-50%) rotate(-45deg) !important;
  }

  .intro-mobile-toggle[aria-expanded="true"] i::before{
    transform:translate(-92%,-50%) rotate(-45deg) !important;
  }

  .intro-mobile-toggle[aria-expanded="true"] i::after{
    transform:translate(-8%,-50%) rotate(45deg) !important;
  }
}


/* 2026-09-21 · make top chevron exactly the same shape as bottom chevron */
@media(max-width:767px){
  .intro-mobile-toggle{
    grid-template-columns:64px 8px !important;
    column-gap:10px !important;
  }

  .intro-mobile-toggle i{
    position:relative !important;
    display:block !important;
    width:8px !important;
    height:8px !important;
    min-width:8px !important;
    margin:0 !important;
    padding:0 !important;
    align-self:center !important;
    justify-self:start !important;
    font-size:0 !important;
    line-height:0 !important;
    transform:none !important;
  }

  /* Disable the previous two-piece arrow. */
  .intro-mobile-toggle i::after{
    content:none !important;
    display:none !important;
  }

  /* Reuse the exact continuous border-chevron geometry used below. */
  .intro-mobile-toggle i::before{
    content:"" !important;
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    width:6px !important;
    height:6px !important;
    background:transparent !important;
    border:0 !important;
    border-right:2px solid currentColor !important;
    border-bottom:2px solid currentColor !important;
    border-radius:0 !important;
    transform:translate(-50%,-50%) rotate(45deg) !important;
    transform-origin:center center !important;
  }

  .intro-mobile-toggle[aria-expanded="true"] i::before{
    transform:translate(-50%,-50%) rotate(225deg) !important;
  }
}

/* PC / MOBILE 줄바꿈 */
br.pc {
  display: inline;
}

br.mobile {
  display: none;
}

@media (max-width: 760px) {
  br.pc {
    display: none;
  }

  br.mobile {
    display: inline;
  }
}

/* SEO / text navigation access: a user-visible text alternative to the full-screen 3D experience. */