/* sic - Physical AI style, copied from kingfax / aiocr */
/* sic - PHYSICAL AX point colors from PSD #7c79f2 / #66caf3 */
._solution.physical .subVis{
    background-image: url('/asset/img/sub/solution/physical_Ax/subVis_bg.png');
}
._solution.physical .subVis .titArea h1{
    background-image: linear-gradient(90deg, #7c79f2, #66caf3);
}
._solution.physical .btns .btn:nth-child(1){
    background: linear-gradient(90deg, #7c79f2, #66caf3);
}
/* sic - AX gradient on btn1 must not block subVis / Contact Us hover */
@media screen and (min-width: 821px){
    ._solution.physical .btns .btn:nth-child(1):hover,
    ._solution.physical .btns .btn:nth-child(2):hover{
        background: #fff;
        border-color: #fff;
    }
    ._solution.physical .btns .btn:hover a{ color: #000; }
}
._solution.physical .subTit h2 span{ color: #7c79f2; }
._solution.physical .subTit._gr h2 span{ color: #66caf3; }
._solution.physical .subTit._grad h2 span{
    color: #7c79f2; background-image: linear-gradient(90deg, #7c79f2, #66caf3);
}
._solution.physical .techWrap .techs .gradient.gr{
    background: radial-gradient(circle, rgba(124,121,242,0.85) 0%, rgba(124,121,242,0.4) 40%, rgba(124,121,242,0) 70%);
}
._solution.physical .techWrap .techs .gradient.blu{
    background: radial-gradient(circle, rgba(102,202,243,0.45) 0%, rgba(102,202,243,0.18) 40%, rgba(102,202,243,0) 70%);
}
._solution.physical .techWrap .techs .tags .tag{
    border-color: #7c79f2; color: #7c79f2;
}
._solution.physical .s1 .techWrap .techs .paging .dot{ background: #7c79f2; }
._solution.physical ._roundSec .bg{
    background: radial-gradient(730px 360px at 50% 100%, rgba(124,121,242,.5) 0%, rgba(102,202,243,.22) 45%, rgba(102,202,243,0) 100%);
}
._solution.physical ._roundSec .bg::after{
    box-shadow: 0 0 30px 0 rgba(124,121,242,.95), 0 0 90px 40px rgba(102,202,243,.55), 0 0 170px 60px rgba(189,230,240,.25);
}


html.jp ._solution.physical .btns .btn{ width: 210px; }


/* Round glow scaled down like solution.css so it is not clipped at section top */
@media screen and (max-width: 1280px){
._solution.physical ._roundSec .bg::after{ box-shadow: 0 0 26px 0 rgba(124,121,242,.95), 0 0 76px 34px rgba(102,202,243,.55), 0 0 140px 50px rgba(189,230,240,.25); }
html.jp ._solution.physical .btns .btn{ width: 180px; }
}
@media screen and (max-width: 820px){
._solution.physical ._roundSec .bg::after{ box-shadow: 0 0 20px 0 rgba(124,121,242,.95), 0 0 60px 24px rgba(102,202,243,.55), 0 0 110px 36px rgba(189,230,240,.25); }
}
@media screen and (max-width: 500px){
._solution.physical ._roundSec .bg::after{ box-shadow: 0 0 14px 0 rgba(124,121,242,.95), 0 0 40px 16px rgba(102,202,243,.55), 0 0 70px 24px rgba(189,230,240,.25); }
}
/* sic - Why/After 강조: PSD FillColor #66caf3 */
._solution.physical .compare .after .inn ul li p span{ color: #66caf3; }
._solution.physical .compare .dots>div{ background: #66caf3; }

._solution.physical .subVis,
._solution.physical .subVis{ z-index: 1; }
._solution.physical .s1,
._solution.physical .s1{ box-sizing: border-box; padding: 92px 0 0; background: #fff; position: relative;z-index: 2; }
._solution.physical .s1>.inner,
._solution.physical .s1>.inner{ box-sizing: border-box; padding: 58px 0 59px; background: #fff; }
/* sic - Core _cardSec inset box (aicc): clip blobs, white 1200 card */
._solution.physical .s1._cardSec .techWrap,
._solution.physical .s1._cardSec .techWrap .techs{ overflow: visible; }
._solution.physical .s1._cardSec .techWrap .techs{
    background: #fff; position: relative; margin: 0 auto;
}
._solution.physical .s1._cardSec .techWrap .techs .gradClip{
    position: absolute; inset: 0; border-radius: 10px; overflow: hidden; pointer-events: none; z-index: 0;
}
._solution.physical .s1 .techWrap .techs .topVis,
._solution.physical .s1 .techWrap .techs .topVis{ position: relative; z-index: 1; }
._solution.physical .s1 .techWrap .techs .txtArea,
._solution.physical .s1 .techWrap .techs .tags,
._solution.physical .s1 .techWrap .techs .paging,
._solution.physical .s1 .techWrap .techs .txtArea,
._solution.physical .s1 .techWrap .techs .tags,
._solution.physical .s1 .techWrap .techs .paging{ position: relative; z-index: 1; margin-top: 32px; }
._solution.physical .s1 .techWrap .techs .tech,
._solution.physical .s1 .techWrap .techs .tech{ position: relative; flex: 1;min-height: 0; z-index: 1; }
._solution.physical .s1 .techWrap .techs .tech .item.on,
._solution.physical .s1 .techWrap .techs .tech .item.on{ pointer-events: auto; opacity: 0; }
/* sic - superseded: guessed % coords → PSD bbox at file end
._solution.physical .s1 .techWrap .techs .topVis .layer,
._solution.physical .s1 .techWrap .techs .topVis .layer{ max-width: 280px; width: 40%; }
._solution.physical .s1 .techWrap .techs .topVis .layer img,
._solution.physical .s1 .techWrap .techs .topVis .layer img{ width: 100%; height: auto; display: block; }
._solution.physical .s1 .techWrap .techs .topVis .layer._1,
._solution.physical .s1 .techWrap .techs .topVis .layer._1{ top: 18%;left: 6%; }
._solution.physical .s1 .techWrap .techs .item:nth-child(2) .topVis .layer._1,
._solution.physical .s1 .techWrap .techs .item:nth-child(2) .topVis .layer._1{ top: 20%; left: 6%; }
._solution.physical .s1 .techWrap .techs .item:nth-child(3) .topVis .layer._1,
._solution.physical .s1 .techWrap .techs .item:nth-child(3) .topVis .layer._1{ top: 12%; left: 4%; }
._solution.physical .s1 .techWrap .techs .item:nth-child(3) .topVis .layer._2,
._solution.physical .s1 .techWrap .techs .item:nth-child(3) .topVis .layer._2{ top: 10%; left: auto; right: 4%; }
._solution.physical .s1 .techWrap .techs .item:nth-child(4) .topVis .layer._1,
._solution.physical .s1 .techWrap .techs .item:nth-child(4) .topVis .layer._1{ top: 10%; left: 6%; }
*/
._solution.physical .s1 .techWrap .tech .txtArea,
._solution.physical .s1 .techWrap .tech .txtArea{ display: flex;flex-direction: column;align-items: center; margin-top: 50px; }
._solution.physical .s1 .techWrap .techs .paging,
._solution.physical .s1 .techWrap .techs .paging{ display: flex;align-items: center;justify-content: center;gap: 4px; margin-top: 23px; flex-shrink: 0; margin-top: 32px; }
._solution.physical .s1 .techWrap .techs .paging .dot,
._solution.physical .s1 .techWrap .techs .paging .dot{ width: 9px;height: 9px; border-radius: 50%; background: #7c79f2; opacity: 0.2; }
._solution.physical .s1 .techWrap .techs .paging .dot.on,
._solution.physical .s1 .techWrap .techs .paging .dot.on{  opacity: 1; }
._solution.physical .s2 .subTit,
._solution.physical .s2 .subTit{ margin-bottom: 150px; position: relative;z-index: 10; }
._solution.physical .s2 .subTit._gr h2,
._solution.physical .s2 .subTit._gr h2{ font-weight: 400; }
._solution.physical .s2 .marqueeWrap,
._solution.physical .s2 .marqueeWrap{ width: 100%; position: relative; }
._solution.physical .s2 .marqueeWrap::after,
._solution.physical .s2 .marqueeWrap::after{ content: ''; position: absolute; z-index: 2; top: 50%; left: 0; width: 100%; aspect-ratio: 1920/1020; transform: translateY(-58.3%); background: url('/asset/img/sub/solution/physical_Ax/gradient.png') center/100% 100% no-repeat; mix-blend-mode: screen; pointer-events: none; }
._solution.physical .s2 .marqueeWrap .marquee,
._solution.physical .s2 .marqueeWrap .marquee{ width: 100%; display: flex;align-items: center; overflow: hidden; white-space: nowrap; position: relative; gap: 80px; }
._solution.physical .s2 .marqueeWrap .marquee::before,
._solution.physical .s2 .marqueeWrap .marquee::before{
    content: ''; display: block; z-index: 1; position: absolute;top: 0;left: 0; width: 18.75vw;height: 100%;
    background: linear-gradient(-90deg, rgba(13, 13, 35, 0) 0%, #0d0d23 70%, #0d0d23 100%); z-index: 1;
}
._solution.physical .s2 .marqueeWrap .marquee::after,
._solution.physical .s2 .marqueeWrap .marquee::after{
    content: '';display: block;z-index: 1;position: absolute;top: 0;right: 0;width: 18.75vw;height: 100%;
    background: linear-gradient(90deg, rgba(13, 13, 35, 0) 0%,  #0d0d23 70%,  #0d0d23 100%); z-index: 1;
}
._solution.physical .s2 .marqueeWrap .marquee>div,
._solution.physical .s2 .marqueeWrap .marquee>div{ display: flex;align-items: center; gap: 80px; animation: marquee 20s linear infinite; }
._solution.physical .s2 .marqueeWrap .marquee>div .ic,
._solution.physical .s2 .marqueeWrap .marquee>div .ic{ display: flex;align-items: center; font-family: 'Archivo'; font-size: 17px; letter-spacing: -0.025em;color: #fff; line-height: 1;  }
._solution.physical .s2 .marqueeWrap .marquee>div p,
._solution.physical .s2 .marqueeWrap .marquee>div p{ font-size: 24px;font-weight: 500;letter-spacing: -0.025em;color: #fff; line-height: 1; }
._solution.physical .s2 .marqueeWrap .marquee>div p span,
._solution.physical .s2 .marqueeWrap .marquee>div p span{ font-size: 32px;font-weight: 700;letter-spacing: -0.025em; }
._solution.physical .s3,
._solution.physical .s3{ background: #0d0d23; padding: 130px 0; }
._solution.physical .s3 .subTit,
._solution.physical .s3 .subTit{ margin-bottom: 72px; }

@media screen and (max-width: 1024px){
    ._solution.physical .s2 .subTit,
    ._solution.physical .s2 .subTit{ margin-bottom: 100px; }
    ._solution.physical .s2 .marqueeWrap .marquee>div p,
    ._solution.physical .s2 .marqueeWrap .marquee>div p{ font-size: 20px; }
    ._solution.physical .s2 .marqueeWrap .marquee>div p span,
    ._solution.physical .s2 .marqueeWrap .marquee>div p span{ font-size: 28px; }
}
@media screen and (max-width: 820px){
    ._solution.physical .s1 .techWrap .techs .paging .dot,
    ._solution.physical .s1 .techWrap .techs .paging .dot{ width: 7px;height: 7px; }
    ._solution.physical .s2 .subTit,
    ._solution.physical .s2 .subTit{ margin-bottom: 60px; }
    ._solution.physical .s2 .marqueeWrap .marquee,
    ._solution.physical .s2 .marqueeWrap .marquee{ gap: 60px; }
    ._solution.physical .s2 .marqueeWrap .marquee>div,
    ._solution.physical .s2 .marqueeWrap .marquee>div{ gap: 60px; }
    ._solution.physical .s2 .marqueeWrap .marquee>div p,
    ._solution.physical .s2 .marqueeWrap .marquee>div p{ font-size: 18px; }
    ._solution.physical .s2 .marqueeWrap .marquee>div p span,
    ._solution.physical .s2 .marqueeWrap .marquee>div p span{ font-size: 24px; }
}
@media screen and (max-width: 500px){
    ._solution.physical .s2 .marqueeWrap .marquee,
    ._solution.physical .s2 .marqueeWrap .marquee{ gap: 40px; }
    ._solution.physical .s2 .marqueeWrap .marquee>div,
    ._solution.physical .s2 .marqueeWrap .marquee>div{ gap: 40px; }
    ._solution.physical .s2 .marqueeWrap .marquee>div p,
    ._solution.physical .s2 .marqueeWrap .marquee>div p{ font-size: 16px; }
    ._solution.physical .s2 .marqueeWrap .marquee>div p span,
    ._solution.physical .s2 .marqueeWrap .marquee>div p span{ font-size: 20px; }
    ._solution.physical .s2 .marqueeWrap .marquee>div .ic,
    ._solution.physical .s2 .marqueeWrap .marquee>div .ic{ font-size: 16px; }
}

/* sic - superseded: light expandable (PSD 00/02 is dark)
._solution.physical ._expandSec{ background:#fff; padding: 100px 0 40px; position:relative; z-index:2; }
._solution.physical ._expandSec .subTit{ margin-bottom: 28px; }
._solution.physical ._expandSec .desc{ max-width: 880px; margin: 0 auto 56px; text-align:center; font-size:18px; line-height:1.7; letter-spacing:-0.025em; color:#57575e; }
._solution.physical ._expandSec .fields{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1520px; margin:0 auto; }
._solution.physical ._expandSec .fields .item{ box-sizing:border-box; border-radius:16px; padding: 36px 32px; background:#f6f8fc; }
._solution.physical ._expandSec .fields .item .num{ display:inline-block; font-family:'Archivo'; font-size:14px; font-weight:600; letter-spacing:0.04em; color:#7c79f2; margin-bottom:14px; }
._solution.physical ._expandSec .fields .item h3{ font-size:22px; font-weight:600; letter-spacing:-0.025em; margin-bottom:12px; }
._solution.physical ._expandSec .fields .item p{ font-size:16px; line-height:1.6; letter-spacing:-0.025em; color:#57575e; }
*/
/* sic - Physical AI Expandable Fields: PSD 00/02 bbox 1:1 */
._solution.physical ._expandSec{ background:#0d0d23; padding: 241px 0 163px; position:relative; z-index:2; }
._solution.physical ._expandSec .subTit{ margin-bottom: 43px; }
._solution.physical ._expandSec .subTit._gr h2{ font-weight: 400; }
._solution.physical ._expandSec .subTit._gr h2 span{ font-weight: 600; color: #66caf3; }
._solution.physical ._expandSec .desc{ max-width: 800px; margin: 0 auto 80px; text-align:center; font-size:20px; line-height: calc(30 / 20); letter-spacing:-0.025em; color:#e3e3e3; }
._solution.physical ._expandSec .fields{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 30px 29px; max-width: 1520px; margin:0 auto; }
._solution.physical ._expandSec .fields .item{ box-sizing:border-box; border-radius:10px; padding: 30px 31px 36px; min-height: 222px; background:#262637; border: 2px solid transparent; }
._solution.physical ._expandSec .fields .item .num{
    display:flex; align-items:center; justify-content:center;
    width:40px; height:40px; border-radius:50%; margin-bottom:35px;
    font-family:'Pretendard'; font-size:16px; font-weight:600; letter-spacing:-0.025em; line-height:1;
    background:#fff; color:#0d0d23; border:0;
}
._solution.physical ._expandSec .fields .item h3{ font-size:26px; font-weight:600; letter-spacing:-0.025em; line-height:21px; color:#fff; margin-bottom:18px; }
._solution.physical ._expandSec .fields .item h3 span{ font-size:17px; font-weight:600; letter-spacing:-0.025em; }
._solution.physical ._expandSec .fields .item p{ font-size:17px; line-height:25px; letter-spacing:-0.025em; color:rgba(255,255,255,0.7); }
/* 호버 시 그라데이션 보더 활성화 (gradient 는 transition 불가 → ::before 로 분리해 opacity 페이드) */
._solution.physical ._expandSec .fields .item{ position:relative; transition: background-color .35s ease; }
._solution.physical ._expandSec .fields .item::before{
    content:''; position:absolute; inset:-2px; border-radius:inherit; padding:2px; pointer-events:none;
    background: linear-gradient(180deg, #66caf3 0%, #7c79f2 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity:0; transition: opacity .35s ease;
}
._solution.physical ._expandSec .fields .item:hover{ background-color:#0d0d23; }
._solution.physical ._expandSec .fields .item:hover::before{ opacity:1; }
@media screen and (max-width: 1024px){
    ._solution.physical ._expandSec{ padding: 100px 0 80px; }
    ._solution.physical ._expandSec .fields{ grid-template-columns: repeat(2, 1fr); }
    ._solution.physical ._expandSec .fields .item h3{ line-height: 1.3; }
}
@media screen and (max-width: 640px){
    ._solution.physical ._expandSec{ padding: 60px 0 40px; }
    ._solution.physical ._expandSec .desc{ font-size:16px; line-height:1.5; }
    ._solution.physical ._expandSec .fields{ grid-template-columns: 1fr; }
    ._solution.physical ._expandSec .fields .item h3{ font-size:20px; }
}

/* sic - superseded */
/* ._solution.physical .s1 .techWrap .techs .item:nth-child(4) .topVis .layer._2{ top: 42%; left: auto; right: 6%; } */

/* sic - Core slider topVis: layer separate, PSD effect PNG, transparent */

/* ---- physical ---- */
/* sic - hang-out overlays: techs visible, blobs in gradClip (aicc Core box) */
._solution.physical .s1 .techWrap{ overflow: visible; }
._solution.physical .s1 .techWrap .techs{ overflow: visible; }
._solution.physical .s1 .techWrap .techs .gradClip{
    position: absolute; inset: 0; border-radius: 10px; overflow: hidden; pointer-events: none; z-index: 0;
}
._solution.physical .s1 .techWrap .techs .topVis{ overflow: visible; }
._solution.physical .s1 .techWrap .techs .topVis > .img{
    overflow: hidden; border-radius: 0; margin: 0 auto; position: relative;
}
._solution.physical .s1 .techWrap .techs .topVis > .img img{
    width: 100%; height: auto; object-fit: contain; display: block; max-width: none; position: static;
}
._solution.physical .s1 .techWrap .techs .topVis .layer{
    max-width: none; width: auto; z-index: 2;
}
._solution.physical .s1 .techWrap .techs .topVis .layer .img{
    max-width: none; width: 100%; aspect-ratio: auto; margin: 0; overflow: visible;
}
._solution.physical .s1 .techWrap .techs .topVis .layer img{
    width: 100%; height: auto; display: block;
}
._solution.physical .s1 .techWrap .techs .item:nth-child(1) .topVis > .img{
    max-width: 634px; width: calc(634 / 1202 * 100%); aspect-ratio: 634/324;
}
._solution.physical .s1 .techWrap .techs .item:nth-child(1) .topVis .layer._1{
    /* sic - PSD 실시간 분석 vis (165,54) 219x196 */
    top: calc(54 / 324 * 100%); left: calc(165 / 1202 * 100%);
    width: calc(219 / 1202 * 100%); max-width: 219px; right: auto; display: block;
}
._solution.physical .s1 .techWrap .techs .item:nth-child(1) .topVis .layer._2{ display: none; }
._solution.physical .s1 .techWrap .techs .item:nth-child(2) .topVis > .img{
    max-width: 865px; width: calc(865 / 1202 * 100%); aspect-ratio: 865/328;
}
._solution.physical .s1 .techWrap .techs .item:nth-child(2) .topVis .layer._1{ display: none; }
._solution.physical .s1 .techWrap .techs .item:nth-child(2) .topVis .layer._2{ display: none; }
._solution.physical .s1 .techWrap .techs .item:nth-child(3) .topVis > .img{
    max-width: 634px; width: calc(634 / 1202 * 100%); aspect-ratio: 634/325;
}
._solution.physical .s1 .techWrap .techs .item:nth-child(3) .topVis .layer._1{
    /* sic - PSD 그룹 37 vis (164,56) 289x198 */
    top: calc(56 / 325 * 100%); left: calc(164 / 1202 * 100%);
    width: calc(289 / 1202 * 100%); max-width: 289px; right: auto; display: block;
}
._solution.physical .s1 .techWrap .techs .item:nth-child(3) .topVis .layer._2{ display: none; }
._solution.physical .s1 .techWrap .techs .item:nth-child(4) .topVis > .img{
    max-width: 634px; width: calc(634 / 1202 * 100%); aspect-ratio: 634/325;
}
._solution.physical .s1 .techWrap .techs .item:nth-child(4) .topVis .layer._1{
    /* sic - PSD title chip 사각형 9 (529,3638,876,3710) pad24 → (505,3614,900,3734) */
    top: calc(37 / 325 * 100%); left: calc(146 / 1202 * 100%);
    width: calc(395 / 1202 * 100%); max-width: 395px; right: auto; display: block;
}
._solution.physical .s1 .techWrap .techs .item:nth-child(4) .topVis .layer._2{
    /* sic - PSD popup 사각형 9 (1050,3770,1394,3924) pad24 → (1026,3746,1418,3948) */
    top: calc(169 / 325 * 100%); left: calc(667 / 1202 * 100%);
    width: calc(392 / 1202 * 100%); max-width: 392px; right: auto; display: block;
}

/* sic - card4 hang-out: do not clip overlays */
._solution.physical .s1 .techWrap,
._solution.physical .s1 .techWrap .techs{ overflow: visible; }

/* sic - Expandable Fields top round = How _roundSec .bg + .bgFill */
._solution.physical ._expandSec._roundSec{
    --round-top: 200px;
    --round-half: max(39.32cqw, 50%);
    background: #fff;
    padding: 520px 0 163px;
}
._solution.physical ._expandSec._roundSec .wrap{ position: relative; z-index: 1; }
._solution.physical ._expandSec._roundSec .bg{ background: none; inset: 0; }
._solution.physical ._expandSec._roundSec .bgFill{
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    top: calc(var(--round-top) + var(--round-half));
    background: #0d0d23;
    z-index: 0;
    pointer-events: none;
}

/* sic - Why BA: 레이아웃은 kingfax 와 동일(solution.css compareWrap._hor), 타이틀 보조 텍스트만 별도 */
/* 줄바꿈으로 좌우 내용 길이가 달라도 큰 박스 높이에 맞춰 늘어나도록 */
._solution.physical .compare{ align-items: stretch; }
._solution.physical .compare .dots{ align-self: center; }
._solution.physical .compare .before .inn > p span,
._solution.physical .compare .after .inn > p span{
    display: inline;
    font-family: 'Pretendard', sans-serif;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: -0.025em;
    color: #fff;
    margin-left: 10px;
    vertical-align: middle;
}

@media screen and (max-width: 1600px){
    ._solution.physical ._expandSec._roundSec{ padding: 480px 0 160px; --round-top: 180px; }
}
@media screen and (max-width: 1440px){
    ._solution.physical ._expandSec._roundSec{ padding: 380px 0 140px; --round-top: 160px; }
}
@media screen and (max-width: 1280px){
    ._solution.physical ._expandSec._roundSec{ padding: 330px 0 120px; --round-top: 140px; }
    ._solution.physical .compare .before .inn > p span,
    ._solution.physical .compare .after .inn > p span{
        font-size: 16px;
    }
}
@media screen and (max-width: 1024px){
    ._solution.physical ._expandSec._roundSec{ padding: 280px 0 100px; --round-top: 120px; }
}
@media screen and (max-width: 820px){
    ._solution.physical ._expandSec._roundSec{ padding: 220px 0 80px; --round-top: 80px; --round-half: max(39.32cqw, 175px); }
    /* Flat dome like kingfax: height from --round-half, not the tall section */
    ._solution.physical ._expandSec._roundSec .bg::after{ top: var(--round-top); height: calc(2 * var(--round-half)); }
    ._solution.physical .compare .before .inn > p span, ._solution.physical .compare .after .inn > p span{ font-size: 14px;}
}
@media screen and (max-width: 500px){
    ._solution.physical ._expandSec._roundSec{ --round-top: 60px; }
}

/* sic - physical tech 배경 창 + layer (prm.php 동일 방식, 모션은 physicalai.php GSAP 담당)
   인라인 svg 배경이 테두리 창 안에서 창보다 긴 만큼 위로 올라와 하단이 창 하단에 닿음, layer 등장 시 배경 어두워짐(--dim 0 → 1) */
._solution.physical .s1 .techWrap .techs .topVis > .img{
    box-sizing: border-box; border: 2px solid rgba(237, 239, 242, calc(1 - var(--dim, 0))); border-radius: 12px; /* #edeff2, 어두워질 때 테두리도 함께 사라짐 */
    align-items: flex-start; /* 공통 align-items:center 해제 → 배경 상단에서 시작 */
    --dim: 0; background-color: #fff;
    background-clip: padding-box; /* 흰 배경이 투명해진 테두리 자리로 비치지 않도록 */
    -webkit-mask-image: linear-gradient(to bottom, #000 75%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 75%, transparent 100%); /* 배경 하단 살짝 페이드 */
}
._solution.physical .s1 .techWrap .techs .topVis > .img > svg,
._solution.physical .s1 .techWrap .techs .topVis > .img > img{ width: 100%; height: auto; max-width: none; display: block; flex-shrink: 0; border: 0; border-radius: 0; position: static; }
._solution.physical .s1 .techWrap .techs .topVis > .img::after{
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: rgba(0, 0, 0, 0.5); opacity: var(--dim);
}
/* layer 카드 인라인 svg: 그림자는 카드 외곽(둥근 모서리)을 따르도록 drop-shadow */
._solution.physical .s1 .techWrap .techs .topVis .layer > svg{
    width: 100%; height: auto; display: block; overflow: visible;
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.12)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.06));
}
/* item 2 overlays: 제목 칩(_1, item 4 칩과 같은 오프셋: 창 왼쪽 밖 138px / 위 37px) + 하단 설명 카드(_2, 창 하단 중앙에서 아래로 걸침) */
._solution.physical .s1 .techWrap .techs .item:nth-child(2) .topVis .layer._1{
    display: block; top: calc(37 / 328 * 100%); left: calc(30 / 1202 * 100%);
    width: calc(305 / 1202 * 100%); max-width: 305px; right: auto;
}
html.jp ._solution.physical .s1 .techWrap .techs .item:nth-child(2) .topVis .layer._1{ width: calc(352 / 1202 * 100%); max-width: 352px; } /* 일문 칩 svg 307px (국문 266px)와 같은 배율 */
._solution.physical .s1 .techWrap .techs .item:nth-child(2) .topVis .layer._2{
    display: block; top: calc(236 / 328 * 100%); left: calc(406 / 1202 * 100%);
    width: calc(390 / 1202 * 100%); max-width: 390px; right: auto;
}
/* item 4 창: 배경 svg(960x424) 비율에 맞춰 창 높이를 줄임 (layer 위치는 PSD px 오프셋 그대로) */
._solution.physical .s1 .techWrap .techs .item:nth-child(4) .topVis > .img{ aspect-ratio: 634/280; }
._solution.physical .s1 .techWrap .techs .item:nth-child(4) .topVis .layer._1{ top: calc(37 / 280 * 100%); }
._solution.physical .s1 .techWrap .techs .item:nth-child(4) .topVis .layer._2{ top: calc(169 / 280 * 100%); }

@media screen and (max-width: 820px){
    ._solution.physical .s1 .techWrap .techs .item:nth-child(n) .topVis > .img{ max-width: 95%; width: 100%; }
    /* layer는 창 중앙 (모션은 .layer 가 아니라 안의 svg 에 걸려 이 transform 과 충돌하지 않음) */
    ._solution.physical .s1 .techWrap .techs .item:nth-child(n) .topVis .layer._1,
    ._solution.physical .s1 .techWrap .techs .item:nth-child(n) .topVis .layer._2{ left: 50%; top: 50%; right: auto; transform: translate(-50%, -50%); width: 64%; max-width: none; } /* PC의 item별 .layer._1 규칙보다 뒤·같은 우선순위로 덮음 */
    /* 칩(_1) + 카드(_2) 두 장인 item 2·4: 칩은 위, 카드는 아래 */
    /* 창이 낮아(865/328·634/280 비율) 칩은 창 상단 테두리에 걸치고, 카드는 창 하단 밖으로 30% 걸침 (아래 txtArea 여백 32px 안) */
    ._solution.physical .s1 .techWrap .techs .item:nth-child(2) .topVis .layer._1,
    ._solution.physical .s1 .techWrap .techs .item:nth-child(4) .topVis .layer._1{ top: 0; transform: translate(-50%, -35%); width: 60%; }
    ._solution.physical .s1 .techWrap .techs .item:nth-child(2) .topVis .layer._2,
    ._solution.physical .s1 .techWrap .techs .item:nth-child(4) .topVis .layer._2{ top: 100%; transform: translate(-50%, -70%); width: 72%; }
}