/* Shared presentation for the switchable 3D architecture models. */
.exam-3d-section{padding:clamp(28px,5vw,72px) clamp(16px,3vw,40px);background:var(--page-bg)}
#exam-3d{scroll-margin-top:5rem}
.architecture-card-link{display:inline-flex;margin-top:18px;color:#ffcc00;font-size:13px;font-weight:800;text-decoration:underline;text-underline-offset:3px}
.architecture-card-link:hover,.architecture-card-link:focus-visible{color:#fff;outline-color:#ffcc00}
html.light .architecture-card-link{color:#805e00}
.exam-3d-shell{max-width:1760px;margin:auto;perspective:1400px}
.architecture-intro{max-width:970px;margin:0 0 18px}
.architecture-eyebrow{display:block;margin-bottom:10px;color:#50cfdc;font-size:11px;font-weight:800;letter-spacing:.18em}
.architecture-intro h2{margin:0;color:var(--text-main,#f8fafc);font-size:clamp(25px,3.2vw,42px);font-weight:800;line-height:1.23;letter-spacing:-.04em}
.architecture-intro h2 em{font-style:normal;color:#ffcc00}
.architecture-tabs{display:flex;gap:8px;margin:0 0 13px}
.architecture-tab{padding:11px 17px;border:1px solid rgba(117,172,195,.32);border-radius:10px;background:#102438;color:#abc3d0;font:700 13px/1.25 Pretendard,system-ui,sans-serif;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.architecture-tab:hover,.architecture-tab:focus-visible{border-color:#69dce8;color:#fff;outline:none}
.architecture-tab[aria-selected="true"]{background:#145265;border-color:#6adce8;color:#fff;box-shadow:inset 0 0 0 1px #6adce842}
.architecture-panel[hidden]{display:none}
.exam-3d-frame{position:relative;height:clamp(490px,56vw,710px);overflow:hidden;border:1px solid rgba(255,204,0,.34);border-radius:24px;background:radial-gradient(ellipse at 50% 60%,#102b41,#080c14 70%);box-shadow:0 38px 70px rgba(0,0,0,.28),inset 0 0 55px rgba(255,204,0,.04)}
.enterprise-3d-frame{border-color:rgba(85,217,232,.4);background:radial-gradient(ellipse at 50% 60%,#133345,#07111e 72%)}
.exam-3d-frame:before,.exam-3d-frame:after{content:"";position:absolute;z-index:3;width:52px;height:52px;pointer-events:none}
.exam-3d-frame:before{top:14px;left:14px;border-top:2px solid #ffcc00;border-left:2px solid #ffcc00;border-radius:9px 0 0 0}
.exam-3d-frame:after{right:14px;bottom:14px;border-right:2px solid #a855f7;border-bottom:2px solid #a855f7;border-radius:0 0 9px 0}
.exam-3d-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity .5s}
.exam-3d-frame.is-ready iframe{opacity:1}
.exam-2d-flow{display:block;position:absolute;left:50%;top:50%;width:min(90%,1000px);height:auto;transform:translate(-50%,-50%);filter:drop-shadow(0 12px 22px rgba(0,0,0,.28))}
.exam-3d-frame.is-ready .exam-2d-flow{display:none}
.exam-3d-frame.is-fallback iframe{display:none}
.exam-mobile-map{display:none}
.enterprise-mobile-map{display:none;color:#eaf3f8;padding:28px;font-family:Pretendard,system-ui,sans-serif}
.enterprise-mobile-map>h3{font-size:19px;font-weight:800;margin:0 0 6px}
.enterprise-mobile-map>p{font-size:12px;line-height:1.6;color:#a8c3d0;margin:0 0 17px}
.enterprise-map-group{border:1px solid #30536b;border-radius:12px;padding:15px;background:#0d2436;margin:10px 0}
.enterprise-map-group h3{font-size:11px;letter-spacing:.07em;color:#6adce8;margin:0 0 10px}
.enterprise-map-chain{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.enterprise-map-node{min-width:0;border:1px solid #385b6b;border-radius:8px;background:#112d40;padding:10px}
.enterprise-map-node strong{display:block;color:#f4fbfe;font-size:12px;line-height:1.35}
.enterprise-map-node small{display:block;color:#a9c3cf;font-size:10px;line-height:1.4;margin-top:4px}
.enterprise-mobile-map .enterprise-map-note{margin:14px 0 0;color:#88b6c2;font-size:10px}
.enterprise-3d-frame.is-fallback .enterprise-mobile-map{display:block;max-width:900px;margin:auto;max-height:100%;overflow:auto}
html.light .exam-3d-section{background:#f6f8fa}
html.light .exam-3d-frame{box-shadow:0 24px 65px rgba(3,33,48,.16)}
html.light .architecture-intro h2{color:#123045}
html.light .architecture-intro h2 em{color:#a86b00}
html.light .architecture-eyebrow{color:#0b7186}
html.light .architecture-tab{background:#e9f2f5;color:#234555;border-color:#b6d1da}
html.light .architecture-tab[aria-selected="true"]{background:#166174;color:#fff}

@media(min-width:768px){
  #hero-visual article,.about-stat,#about .glow-card,#about .glass.rounded-2xl,.fintech-card,.fintech-stack-grid article,#solutions .glow-card,#stack .glow-card,#projects article{
    transform:perspective(1000px) rotateX(3deg) rotateY(-2deg) translateZ(0);
    transform-origin:center;
    box-shadow:9px 12px 0 rgba(10,53,72,.32),0 22px 40px rgba(0,0,0,.18);
    transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
    backface-visibility:hidden;
  }
  #hero-visual article:hover,.about-stat:hover,#about .glow-card:hover,#about .glass.rounded-2xl:hover,.fintech-card:hover,.fintech-stack-grid article:hover,#solutions .glow-card:hover,#stack .glow-card:hover,#projects article:hover{
    transform:perspective(1000px) rotateX(0) rotateY(0) translateY(-7px) translateZ(12px);
    box-shadow:5px 6px 0 rgba(10,53,72,.45),0 28px 48px rgba(0,0,0,.24);
  }
  #flow-canvas-wrap{box-shadow:10px 15px 0 rgba(14,54,73,.42),0 28px 55px rgba(0,0,0,.22)}
  #hero-visual{box-shadow:12px 18px 0 rgba(29,52,67,.45),0 35px 65px rgba(0,0,0,.24)}
  html.light #hero-visual article,html.light .about-stat,html.light #about .glow-card,html.light #about .glass.rounded-2xl,html.light .fintech-card,html.light .fintech-stack-grid article,html.light #solutions .glow-card,html.light #stack .glow-card,html.light #projects article{box-shadow:7px 9px 0 rgba(53,95,112,.13),0 20px 32px rgba(3,33,48,.1)}
  html.light #flow-canvas-wrap,html.light #hero-visual{box-shadow:10px 14px 0 rgba(53,95,112,.13),0 24px 44px rgba(3,33,48,.13)}
}
@media(max-width:767px){
  .exam-3d-section{padding:22px 16px 42px}
  .architecture-intro{margin-bottom:18px}
  .architecture-intro h2{font-size:26px}
  .architecture-tabs{gap:6px}
  .architecture-tab{flex:1;padding:10px 7px;font-size:11px}
  .exam-3d-frame{height:auto;min-height:0;border-radius:16px;box-shadow:none}
  .exam-3d-frame iframe{display:none!important}
  .exam-3d-frame .exam-2d-flow{display:none!important}
  .exam-3d-frame:before,.exam-3d-frame:after{width:25px;height:25px}
  .enterprise-3d-frame:before,.enterprise-3d-frame:after{display:none}
  .exam-mobile-map{display:block;max-width:560px;margin-inline:auto;padding:22px 16px 24px;color:#eaf3f8;font-family:Pretendard,system-ui,sans-serif}
  .enterprise-mobile-map{display:block;padding:20px 14px}
  .enterprise-map-chain{grid-template-columns:1fr}
  .enterprise-map-node{display:flex;justify-content:space-between;align-items:center;gap:10px}
  .enterprise-map-node small{text-align:right;max-width:45%;margin-top:0}
  .exam-mobile-map h2{font-size:17px;font-weight:800;line-height:1.4;margin:0 0 18px;color:#fff;letter-spacing:-.02em}
  .exam-map-group{padding:14px 12px;border:1px solid rgba(102,159,184,.24);border-radius:12px;background:rgba(13,30,48,.72);margin-top:12px}
  .exam-map-group>p{margin:0 0 10px;color:#8facbd;font-size:10px;font-weight:800;letter-spacing:.06em}
  .exam-map-access{display:grid;grid-template-columns:minmax(0,1fr) 15px minmax(0,1fr);gap:5px;align-items:center}
  .exam-map-access>span{color:#7bd7df;text-align:center;font-size:17px}
  .exam-map-access .exam-map-node{min-height:47px;padding:8px 6px;justify-content:center;text-align:center}
  .exam-map-access .exam-map-node strong{font-size:10px}
  .exam-map-access-note{margin:11px 0 0;color:#a5d4da;font-size:10px;line-height:1.4;text-align:center}
  .exam-map-node{--node:#5eb8c8;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:45px;padding:8px 10px;border:1px solid color-mix(in srgb,var(--node) 55%,transparent);border-left:3px solid var(--node);border-radius:8px;background:#101e30;text-align:left}
  .exam-map-node strong{color:#f2f8fa;font-size:11px;line-height:1.35;font-weight:700}
  .exam-map-node small{color:#9fb7c2;font-size:9px;line-height:1.3;text-align:right;max-width:90px}
  .exam-map-node.device{--node:#94a3b8}.exam-map-node.storage{--node:#eab308}.exam-map-node.watcher{--node:#f59e0b}.exam-map-node.api{--node:#3b82f6}.exam-map-node.queue{--node:#ef4444}.exam-map-node.worker{--node:#a855f7}.exam-map-node.database{--node:#6366f1}.exam-map-node.gateway{--node:#10b981}.exam-map-node.web{--node:#06b6d4}
  .exam-map-arrow{height:18px;display:grid;place-items:center;color:#76c9d5;font-size:16px;line-height:1}
  .exam-map-links>div{font-size:10px;line-height:1.45;color:#bed3da;padding:7px 9px;background:#11273a;border-radius:7px;margin-top:6px;word-break:break-word}
  .exam-map-links>div span{color:#f7c44b;font-size:14px;margin-right:4px}
}
@media(prefers-reduced-motion:reduce){.exam-3d-frame iframe,#hero-visual article,.about-stat,#about .glow-card,#about .glass.rounded-2xl,.fintech-card,.fintech-stack-grid article,#solutions .glow-card,#stack .glow-card,#projects article{transition:none!important}}