/* ══════ base CSS ══════ */
:root{--cold:#1a6fc4;--cool:#2d8ecf;--warm:#e8653a;--hot:#d42e12;--bg:#0a0e1a;--bg2:#111827;--text:#f0f2f5;--text2:#94a3b8;--text3:#e2e8f0;--tc:#1a6fc4;--radius:16px;--gap:120px;--fs-tiny:clamp(9px, 1vw, 11px);--fs-xs:clamp(11px, 1.2vw, 13px);--fs-sm:clamp(13px, 1.5vw, 15px);--fs-base:clamp(15px, 1.6vw, 18px);--fs-md:clamp(16px, 2.5vw, 24px);--fs-lg:clamp(22px, 3vw, 36px);--fs-xl:clamp(28px, 4vw, 48px);--fs-hero:clamp(36px, 5vw, 56px);--fs-display:clamp(100px, 18vw, 220px)}
*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;scrollbar-width:none}html::-webkit-scrollbar{display:none}
body{font-family:'Pretendard Variable',-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden;line-height:1.7}
.max-content{width: 100%;max-width: 1200px;position: relative;margin: 0 auto;display: flex;align-items: center;justify-content: space-between;}
#temp-overlay{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.07;transition:background .3s}
#gp{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.gp{position:absolute;border-radius:50%;opacity:.1;animation:gpF linear infinite;will-change:margin-left,margin-top}
@keyframes gpF{0%{transform:translateY(100vh) rotate(0);opacity:0}5%{opacity:.2}90%{opacity:.15}100%{transform:translateY(-10vh) rotate(720deg);opacity:0}}
#scroll-nav{position:fixed;right:12px;top:50%;transform:translateY(-50%);z-index:1000;display:flex;flex-direction:column;align-items: center;gap:6px}
.tl{font-size: var(--fs-tiny);letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.3);writing-mode:vertical-rl;margin-bottom:8px}
.dn{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;align-items:flex-end}
.dn a{display:flex;align-items:center;gap:0;text-decoration:none;transition:all .3s}
.dn a .dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.15);transition:all .3s;flex-shrink:0}
.dn a.active .dot{background:var(--tc);box-shadow:0 0 8px var(--tc);transform:scale(1.3)}
.dn a .dot-label{max-width:0;overflow:hidden;white-space:nowrap;font-size: var(--fs-tiny);font-weight:600;color:rgba(255,255,255,.7);transition:all .35s cubic-bezier(.16,1,.3,1);opacity:0;padding:0;margin:0}
.dn:hover a .dot-label{max-width:120px;opacity:1;padding-right:10px;margin-right:0}
.dn a.active .dot-label{color:var(--tc)}
.dn a:hover .dot-label{color:var(--tc)!important}
.dn a:hover .dot{background:var(--tc);box-shadow:0 0 8px var(--tc);transform:scale(1.3)}
.tt{width:4px;height:200px;background:rgba(255,255,255,.08);border-radius:4px;position:relative;overflow:hidden}
.tf{position:absolute;bottom:0;width:100%;border-radius:4px;transition:height .15s,background .3s;background:var(--tc)}
.tp{font-size: var(--fs-xs);font-weight:700;letter-spacing:-.02em;color:var(--tc);transition:color .3s;margin-top:4px}
#top-nav{position:fixed;top:0;left:0;right:0;z-index:999;padding:20px;display:flex;justify-content:center;align-items:center;backdrop-filter:blur(10px);background:rgba(var(--bgR,10),var(--bgG,14),var(--bgB,26),.65);border-bottom:1px solid rgba(255,255,255,.04);transition:all .4s}
#top-nav.scrolled{background:rgba(var(--bgR,10),var(--bgG,14),var(--bgB,26),.4)}
#top-nav a{height:40px;}
#top-nav .li{height:100%;width:auto;transition:filter .4s}
#top-nav .cb{padding:10px 28px;border-radius:40px;border:none;font-size: var(--fs-sm);font-weight:600;cursor:pointer;background:var(--tc);color:#fff;transition:all .3s;letter-spacing:-.02em;}
#top-nav .cb:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.3)}
section{position:relative;z-index:1;padding:var(--gap) 48px;max-width:1200px;margin:0 auto}
.sl{font-size: var(--fs-xs);letter-spacing:.15em;text-transform:uppercase;color:var(--tc);font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:10px;transition:color .3s}
.sl::before{content:'';width:32px;height:2px;background:var(--tc);transition:background .3s}
.st{font-size: var(--fs-xl);font-weight:800;letter-spacing:-.04em;line-height:1.25;margin-bottom:20px}
.st em{font-style:normal;color:var(--tc);transition:color .3s}
.sd{font-size: var(--fs-base);color:var(--text2);max-width:740px;line-height:1.8}
.sh{margin-bottom:64px}
.rv{opacity:0;transform:translateY(50px);transition:all .9s cubic-bezier(.16,1,.3,1)}.rv.v{opacity:1;transform:translateY(0)}
.rl{opacity:0;transform:translateX(-60px);transition:all .9s cubic-bezier(.16,1,.3,1)}.rl.v{opacity:1;transform:translateX(0)}
.rr{opacity:0;transform:translateX(60px);transition:all .9s cubic-bezier(.16,1,.3,1)}.rr.v{opacity:1;transform:translateX(0)}
.rs{opacity:0;transform:scale(.85);transition:all .9s cubic-bezier(.16,1,.3,1)}.rs.v{opacity:1;transform:scale(1)}
.sg>*{opacity:0;transform:translateY(30px);transition:all .7s cubic-bezier(.16,1,.3,1)}
.sg.v>*:nth-child(1){transition-delay:0s}.sg.v>*:nth-child(2){transition-delay:.1s}.sg.v>*:nth-child(3){transition-delay:.2s}.sg.v>*:nth-child(4){transition-delay:.3s}.sg.v>*:nth-child(5){transition-delay:.4s}.sg.v>*:nth-child(6){transition-delay:.5s}.sg.v>*:nth-child(7){transition-delay:.6s}.sg.v>*:nth-child(8){transition-delay:.7s}
.sg.v>*{opacity:1;transform:translateY(0)}
.div{width:100%;max-width:1200px;margin:0 auto;height:1px;background:linear-gradient(90deg,transparent,var(--tc),transparent);opacity:.15;position:relative;z-index:1;transition:background .3s}
#hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding-top:100px;position:relative;z-index:1}
.ht{font-size: var(--fs-display);font-weight:900;line-height:1;letter-spacing:-.03em;opacity:0;transform:translateY(60px) scale(.9);animation:hi 1.2s cubic-bezier(.16,1,.3,1) .2s forwards;display:flex;align-items:flex-start;justify-content:center;gap:0}
.ht-num{background:linear-gradient(135deg,var(--cold),var(--cool),#64b5f6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.ht-deg{font-size:.25em;font-weight:700;-webkit-text-fill-color:var(--cool);color:var(--cool);margin-top:.15em;opacity:.6}
@keyframes hi{to{opacity:1;transform:translateY(0) scale(1)}}
.htl{font-size: var(--fs-md);color:var(--text2);margin-top:20px;font-weight:400;letter-spacing:-.02em;opacity:0;animation:fu 1s cubic-bezier(.16,1,.3,1) .6s forwards}
.htt{font-size: var(--fs-hero);font-weight:800;letter-spacing:-.04em;margin-top:32px;line-height:1.3;opacity:0;animation:fu 1s cubic-bezier(.16,1,.3,1) .8s forwards}
.hd{font-size: var(--fs-base);color:var(--text2);margin-top:24px;max-width:560px;line-height:1.8;opacity:0;animation:fu 1s cubic-bezier(.16,1,.3,1) 1s forwards}
.hc{margin-top:48px;padding:16px 48px;border-radius:50px;border:none;font-size: var(--fs-base);font-weight:700;cursor:pointer;background:linear-gradient(135deg,var(--cold),var(--cool));color:#fff;letter-spacing:-.02em;opacity:0;animation:fu 1s cubic-bezier(.16,1,.3,1) 1.2s forwards;transition:all .3s}
.hc:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(26,111,196,.3)}
.hb{margin-top:32px;font-size: var(--fs-xs);color:var(--text2);opacity:0;animation:fu 1s cubic-bezier(.16,1,.3,1) 1.4s forwards}.hb strong{color:var(--text)}
@keyframes fu{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
#ms{padding:60px 0 80px;overflow:hidden;position:relative;z-index:1;max-width:100vw;margin:0}
.ms-top{max-width:1200px;margin:0 auto;padding:0 48px 40px;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}
.ms-top .ms-info{}
.ms-ceo{width:280px;border-radius:20px;overflow:hidden;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);text-align:center;transition:all .4s}
.ms-ceo:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.15);box-shadow:0 20px 50px rgba(0,0,0,.3)}
.ms-ceo img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center top;display:block;filter:brightness(.95) contrast(1.05)}
.ms-ceo .mcn{padding:16px 12px 20px;font-size: var(--fs-base);font-weight:700;color:var(--text3)}
.ms-slider{position:relative;overflow:hidden;margin-top:0}
.ms-slider::before,.ms-slider::after{content:'';position:absolute;top:0;bottom:0;width:160px;z-index:2;pointer-events:none}
.ms-slider::before{left:0;background:linear-gradient(to right,var(--bg),transparent)}
.ms-slider::after{right:0;background:linear-gradient(to left,var(--bg),transparent)}
.mst{display:flex;gap:32px;animation:msl 30s linear infinite;width:max-content}.mst:hover{animation-play-state:paused}
@keyframes msl{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.mc{flex-shrink:0;width:220px;border-radius:20px;overflow:hidden;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);transition:all .45s cubic-bezier(.16,1,.3,1);cursor:default;text-align:center}
.mc:hover{transform:translateY(-10px);border-color:rgba(255,255,255,.15);background:rgba(255,255,255,.06);box-shadow:0 24px 60px rgba(0,0,0,.3)}
.mci{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center top;display:block;filter:brightness(.92) contrast(1.05);transition:filter .4s;border-radius:20px 20px 0 0}
.mc:hover .mci{filter:brightness(1.08) contrast(1.05)}
.mcn{padding:16px 12px 20px;text-align:center;font-size: var(--fs-sm);font-weight:700;color:var(--text3);white-space:nowrap}
.eb{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:48px;margin-top:40px;position:relative;overflow:hidden}
.eb::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;background:linear-gradient(180deg,var(--tc),transparent)}
.bq{font-size: var(--fs-lg);font-weight:800;letter-spacing:-.03em;line-height:1.4;margin-bottom:24px}.bq em{font-style:normal;color:var(--tc)}
.eb p{color:var(--text2);font-size: var(--fs-base);line-height:1.9}
.cg{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:24px;margin-top:48px}
.cc{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:40px;transition:all .4s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden}
.cc::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--tc),transparent);transform:scaleX(0);transform-origin:left;transition:transform .5s}
.cc:hover::after{transform:scaleX(1)}.cc:hover{transform:translateY(-8px);border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.05)}
.vp{width:100%;height:200px;border-radius:12px;background:linear-gradient(135deg,rgba(26,111,196,.15),rgba(45,142,207,.05));display:flex;align-items:center;justify-content:center;font-size: var(--fs-xl);margin-bottom:24px;position:relative;overflow:hidden}
.vp::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 40%,rgba(26,111,196,.2),transparent 70%)}
.cc h4{font-size: var(--fs-md);font-weight:700;margin-bottom:8px}.cc p{font-size: var(--fs-sm);color:var(--text2);line-height:1.7}
.cpg{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:48px}
.cpc{border-radius:var(--radius);padding:48px;position:relative;overflow:hidden}
.cpc.p{background:linear-gradient(135deg,rgba(26,111,196,.06),rgba(45,142,207,.03));border:1px solid rgba(26,111,196,.15)}
.cpc.s{background:linear-gradient(135deg,rgba(232,101,58,.2),rgba(212,46,18,.04));border:1px solid rgb(232 101 58 / 36%);box-shadow:0 0 40px rgba(232,101,58,.06)}
.cpc h3{font-size: var(--fs-md);font-weight:800;margin-bottom:40px;display:flex;align-items:center;gap:12px}
.cpc h3 p {background: rgba(255, 255, 255, .04);height: 38px;width: 38px;display: flex;align-items: center;justify-content: center;border: 1px solid rgb(255 255 255 / 18%);font-size:  var(--fs-base);border-radius: 14px;}
.stl{list-style:none;display:flex;flex-direction:column;gap:14px}
.stl li{font-size: var(--fs-sm);color:var(--text2);display:flex;align-items:baseline;gap:10px}.stl li strong{color:var(--text);font-weight:700}
.time-list li{display:flex;align-items:center;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.04);gap:12px}
.time-list li:last-child{border-bottom:none}
.tl-name{font-size: var(--fs-sm);color:var(--text2);flex-shrink:0;width:50%;}
.tl-bar{flex:1;height:6px;background:rgba(255,255,255,.04);border-radius:4px;overflow:hidden}
.tl-bar-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,rgba(255,255,255,.15),rgba(255,255,255,.3));width:0%;transition:width 1.2s cubic-bezier(.16,1,.3,1)}
.tl-hour{font-size: var(--fs-sm);font-weight:800;color:var(--text);letter-spacing:-.02em;flex-shrink:0;width:36px;text-align:right}
.bs{white-space:nowrap;font-size: var(--fs-hero);font-weight:900;letter-spacing:-.04em;margin:24px 0;display: flex;align-items: center;}
.cpc.p .bs{color:var(--cold)}
.cpc.s .bs{color:var(--hot)}
.cpc.s .bs span {font-size:  var(--fs-base);margin-left: 10px;color: #fff;font-weight: 600;}
.cha{display:flex;flex-direction:column;gap:20px;margin-top:48px}
.chb{display:flex;align-items:center;gap:16px}
.chb .bl{width:60px;font-size: var(--fs-sm);font-weight:700;text-align:right;flex-shrink:0;color:var(--text3)}
.chb .bar-track{flex:1;height:48px;background:rgba(255,255,255,.04);border-radius:12px;overflow:hidden}
.chb .bar{height:100%;border-radius:12px;display:flex;align-items:center;justify-content:flex-end;padding-right:18px;width:0%;transition:width 1.6s cubic-bezier(.16,1,.3,1)}
.chb .bv{font-size: var(--fs-base);font-weight:800;color:#fff}
.pg{display:grid;grid-template-columns:repeat(auto-fit,minmax(460px,1fr));gap:20px;margin-top:48px}
.pc{background:rgba(255, 255, 255, .03);border:1px solid rgba(255, 255, 255, .08);border-radius:var(--radius);padding:0 0 36px;text-align:center;transition:all .4s}
.pc:hover{transform:translateY(-6px);border-color:var(--tc);background:rgba(255,255,255,.04)}
.pc .icon{font-size: var(--fs-xl);margin-bottom:16px}.pc h4{font-size: var(--fs-lg);font-weight:700;margin-bottom:10px}
.pc p{font-size: var(--fs-base);color:var(--text2);line-height:1.7}
.vsc{display:grid;grid-template-columns:1fr auto 1fr;gap:32px;align-items:center;margin-top:48px}
.vsd{display:flex;align-items:center;justify-content:center;font-size: var(--fs-lg);font-weight:900;color:rgb(255 255 255 / 74%)}
.vsb{border-radius:var(--radius);padding:40px}
.vsb.o{height:100%;background:rgba(26,111,196,.04);border:1px solid rgba(26,111,196,.12)}
.vsb.on{background:rgba(232,101,58,.06);border:1px solid rgba(232,101,58,.25);box-shadow:0 0 40px rgba(232,101,58,.06)}
.vsb h3{font-size: var(--fs-md);font-weight:800;margin-bottom:24px}
.vsb ul{list-style:none;display:flex;flex-direction:column;gap:14px}
.vsb ul li{font-size: var(--fs-sm);line-height:1.7;padding-left:24px;position:relative;color:var(--text2)}
.vsb.o ul li::before{content:'✕';position:absolute;left:0;color:var(--cold);font-weight:700;opacity:.5}
.vsb.on ul li::before{content:'✓';position:absolute;left:0;color:var(--warm);font-weight:700}
.vsb.on ul li{color:var(--text3)}
.svt{display:flex;flex-wrap:wrap;gap:12px;margin-top:48px}
.svti{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:40px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.03);font-size: var(--fs-xs);font-weight:500;color:var(--text2);transition:all .3s;cursor:default}
.svti::before{content:'◎';font-size: var(--fs-tiny);color:var(--tc);transition:color .3s}
.svti:hover{border-color:rgba(255,255,255,.15);color:var(--text);transform:translateY(-2px);background:rgba(255,255,255,.06)}
.svm{margin-top:48px;font-size: var(--fs-md);font-weight:700;line-height:1.6;max-width:600px}.svm span{color:var(--tc);transition:color .3s}
.fl{display:flex;flex-direction:column;gap:16px;margin-top:48px}
.fi{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);overflow:hidden;transition:all .3s}
.fi:hover{border-color:rgba(255,255,255,.1)}
.fq{padding:24px 32px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-size: var(--fs-base);font-weight:700;letter-spacing:-.02em;transition:all .3s}
.fq:hover{color:var(--tc)}
.fq .ar{font-size: var(--fs-md);transition:transform .4s cubic-bezier(.16,1,.3,1)}
.fi.op .fq .ar{transform:rotate(180deg)}
.fa{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.16,1,.3,1),padding .5s;padding:0 32px}
.fi.op .fa{max-height:400px;padding:0 32px 24px}
.fa p{font-size: var(--fs-sm);color:var(--text2);line-height:1.8}
#cta{text-align:left;}
.ctl{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;margin-top:48px}
.cmt{font-size: var(--fs-xl);font-weight:900;letter-spacing:-.04em;line-height:1.3;margin-bottom:20px}.cmt strong{color:var(--tc);transition:color .3s}
.cmd{font-size: var(--fs-base);color:var(--text2);line-height:1.8;margin-bottom:32px}.cmd strong{color:var(--text);font-weight:700}
.cgu{display:flex;gap:24px;margin-bottom:36px;flex-wrap:wrap}
.cgu span{font-size: var(--fs-xs);color:var(--text2);display:flex;align-items:center;gap:6px}.cgu span::before{content:'✓';color:#22c55e;font-weight:700}
.cb2{display:inline-block;padding:18px 48px;border-radius:50px;border:none;font-size: var(--fs-base);font-weight:700;cursor:pointer;background:var(--tc);color:#fff;transition:all .4s;text-decoration:none;letter-spacing:-.02em}
.cb2:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(0,0,0,.3)}
.cn{margin-top:20px;font-size: var(--fs-xs);color:var(--tc);display:flex;align-items:center;gap:6px}.cn::before{content:'●';font-size: var(--fs-tiny)}
.ctc{border-radius:24px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);backdrop-filter:blur(12px);padding:40px 36px;position:relative;overflow:hidden}
.ctc::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--tc),transparent);transition:background .3s}
.ctcb{display:inline-block;padding:6px 16px;border-radius:20px;background:rgba(26,111,196,.12);color:var(--tc);font-size: var(--fs-xs);font-weight:700;margin-bottom:24px;transition:all .3s}
.ctc h3{font-size: var(--fs-md);font-weight:800;margin-bottom:28px}
.ctcl{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}
.ctci{display:flex;align-items:center;gap:14px;font-size: var(--fs-sm);color:var(--text)}
.ctci .nm{width:28px;height:28px;border-radius:50%;background:rgba(26,111,196,.12);display:flex;align-items:center;justify-content:center;font-size: var(--fs-xs);font-weight:700;color:var(--tc);flex-shrink:0;transition:all .3s}
.ctcd{height:1px;background:rgba(255,255,255,.06);margin-bottom:24px}
.ctcp{text-align:center}.ctcp .lb{font-size: var(--fs-xs);color:var(--text2);margin-bottom:8px}
.ctcp .ol{font-size: var(--fs-base);color:var(--text2);text-decoration:line-through;margin-right:12px}
.ctcp .nw{font-size: var(--fs-xl);font-weight:900;color:var(--text)}
footer{text-align:center;padding:40px;font-size: var(--fs-xs);color:rgba(255,255,255,.2);position:relative;z-index:1}
@media(max-width:800px){section{padding:80px 17px}#top-nav{padding:16px 24px}#scroll-nav{right:8px}.cpg,.ctl{grid-template-columns:1fr}.cpc{padding: 48px 20px;}.vsc{grid-template-columns:1fr}.mc{width:180px}.ms-top{grid-template-columns:1fr;}.ms-ceo{margin:0 auto}.cgu{flex-direction:column;gap:8px}.eb{padding: 48px 24px;}}

/* ══════ roo-banner-styles ══════ */
/* 1번 배너는 ms-ceo 에서 전용 출력 → 슬라이더에서는 제외 */
.mst .ms-card.roo-slide[data-num="1"] { display: none !important; }
/* 1번 배너 전용 고정 영역 */
.roo-ceo-area img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 12px; }
.roo-ceo-area .mcn { margin-top: 12px; font-weight: 700; font-size:  var(--fs-base); text-align: center; }

/* ── 슬라이더 (ms section) ── */
.ms-slider { overflow: hidden; position: relative; }
.mst { display: flex; gap: 20px; animation: rooSlide 30s linear infinite; }
.ms-card { width: 280px; max-width: 280px; flex: 0 0 280px; border-radius: 20px; overflow: hidden; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); text-align: center; transition: all .4s; }
.ms-card:hover { transform: translateY(-6px); border-color: rgba(255,255,255,.15); box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.ms-card img { width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: center top; display: block; filter: brightness(.95) contrast(1.05); }
.ms-card-name { padding: 16px 12px 6px; font-weight: 700; font-size:  var(--fs-base); color: var(--text3); text-align: center; }
.ms-card-text { padding: 0 12px 20px; font-size:  var(--fs-xs); color: var(--text2); line-height: 1.6; text-align: center; }
@keyframes rooSlide { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ── 블로그 그리드 ── */
.roo-grid-adaptive { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.roo-grid-item:nth-child(n+11) { display: none; }
.roo-grid-item { transition: transform .3s; }
.roo-grid-item:hover { transform: translateY(-4px); }
.roo-grid-item a { text-decoration: none; color: inherit; display: block; }
.roo-grid-item img { width: 100%; height: auto; display: block; }
/* [BLOG-FADEUP] 블로그 그리드 2~4열 + 아이템 페이드업 (blog-focus 섹션 전용) */
.roo-blog-grid .roo-grid-item{opacity:0;transform:translateY(30px);transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1);will-change:opacity,transform}
.roo-blog-grid .roo-grid-item.v{opacity:1;transform:translateY(0)}



/* ── criteria 카드 이미지 ── */
.roo-criteria-img { width: 100%;  border-radius: 10px; overflow: hidden; margin-bottom: 16px; }
.roo-criteria-img img { width: 100%; height:auto; object-fit: cover;border-radius: var(--radius) var(--radius) 0 0 ; }
.roo-criteria-card .icon { display: none; }

/* ── medical-law 카드 이미지 ── */
.roo-law-img { width: 100%; aspect-ratio: 16/10; border-radius: 10px; overflow: hidden;  }
.roo-law-img img { width: 100%; height: 100%; object-fit: cover; }
.roo-law-card .icon { display: none; }
/* === MEDICAL-LAW 지그재그 카드 (데스크톱 좌우 반전, 모바일 세로) === */
.roo-law-cards { display: grid !important; grid-template-columns: 1fr !important; gap: 64px !important; max-width: 1100px; margin-left: auto; margin-right: auto; }
.roo-law-card { display: flex; align-items: center; gap: 48px; background: transparent; border: none; padding: 0; text-align: left; }
.roo-law-card:nth-child(even) { flex-direction: row-reverse; }
.roo-law-card .roo-law-img { flex: 0 0 60%; aspect-ratio: 16/10; margin-bottom: 0; border-radius: 14px; overflow: hidden; }
.roo-law-card .roo-law-text { flex: 1; min-width: 0; }
.roo-law-card h4 { font-size:  var(--fs-lg); font-weight: 800; margin-bottom: 16px; line-height: 1.35; color: var(--text); text-align: left; }
.roo-law-card p { font-size:  var(--fs-base); line-height: 1.75; color: var(--text2); margin: 0; text-align: left; }
.roo-law-card:hover { background: transparent !important; border-color: transparent !important; transform: none !important; box-shadow: none !important; }
/* ── 의료법 순서번호 박스 ── */
.roo-law-text > span { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background:var(--tc);font-size: var(--fs-sm); font-weight: 700;margin-bottom: 16px; }

/* ── 반응형 ── */

@media (max-width: 768px) {


  .svt {display: grid;grid-template-columns: repeat(3, 1fr); gap: 7px;}
  .svti {letter-spacing: -0.05em;justify-content: center;padding: 8px; gap: 0; display: grid;}
  .svti::before {display:none;}
  .ms-card { width: 200px; max-width: 200px; flex: 0 0 200px; min-width: 200px; }
  .mst { gap: 12px; }
  .roo-criteria-grid { grid-template-columns: 1fr 1fr !important; }
  .roo-criteria-grid p { padding:0 20px; }
  .roo-law-cards { gap: 48px !important; }
  .roo-law-card, .roo-law-card:nth-child(even) { flex-direction: column-reverse; gap: 16px; align-items: stretch; }
  .roo-law-card .roo-law-img { flex: none; width: 100%; }
  .roo-law-card p { font-size:  var(--fs-base); }
  /* [M-POLISH] */
  /* [A] medical-law 카드 구분선 — 모바일에서 각 카드 사이 얇은 divider + 여백 */
  .roo-law-card { padding-bottom: 36px; border-bottom: 1px solid rgba(255, 255, 255, .10); }
  .roo-law-card:last-child { padding-bottom: 0; border-bottom: none; }
  .roo-law-cards { gap: 36px !important; }

  /* [B] scroll-nav 호버 효과 제거 (모바일은 호버 컨셉 없음) */
  .dn:hover a .dot-label { max-width: 0 !important; opacity: 0 !important; padding-right: 0 !important; margin-right: 0 !important; }
  .dn a:hover .dot-label { color: rgba(255,255,255,.7) !important; }
  .dn a:hover .dot { background: rgba(255,255,255,.15) !important; box-shadow: none !important; transform: none !important; }

  /* [C] scroll-nav 도트 세로 간격 축소 */
  .dn { gap: 2px; margin-bottom: 6px; }

  /* [D] .tt (세로 온도 바) 높이 반으로 */
  .tt { height: 100px; }

  .chb .bv{display:none;}
}
@media (max-width: 480px) {
  .roo-criteria-grid { grid-template-columns: 1fr !important; }
  .roo-law-cards { grid-template-columns: 1fr !important; }
}

/* ── 빈 배너 area 숨김 ── */
.roo-banner-area[data-empty="1"] { display: none; }
.rs:has([data-empty="1"]) { display: none; }