:root{
  --bg:#fbf2ff;
  --bg2:#eef5ff;
  --panel:rgba(255,255,255,.48);
  --panel-2:rgba(255,246,253,.64);
  --line:rgba(191,151,230,.22);
  --line-strong:rgba(155,190,240,.28);
  --text:#25172f;
  --muted:#70517d;
  --dim:#a58ab1;
  --cyan:#5fcdf2;
  --sky:#9ed8ff;
  --pink:#ef8bbc;
  --peach:#ffb99a;
  --violet:#a985ee;
  --shadow:0 18px 60px rgba(190,128,205,.16);
  --radius:28px;
  --maxw:min(1380px, calc(100% - 40px));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;font-family:"Pretendard","SUIT","Inter","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic","Segoe UI",system-ui,sans-serif;color:var(--text);background:
radial-gradient(circle at 16% 10%, rgba(238,154,215,.24), transparent 28%),
radial-gradient(circle at 78% 5%, rgba(255,184,138,.25), transparent 30%),
radial-gradient(circle at 66% 58%, rgba(132,197,255,.28), transparent 36%),
radial-gradient(circle at 22% 76%, rgba(215,137,229,.20), transparent 34%),
linear-gradient(135deg,#fbecfb 0%,#f6eefb 32%,#eaf5ff 70%,#fff0e4 100%);
line-height:1.6;font-weight:500;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;}
a{color:inherit;text-decoration:none}img{max-width:100%}code{padding:.14rem .4rem;border-radius:8px;background:rgba(220,120,200,.10)}

/* ── 배경 블롭 ── */
.site-bg{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.site-bg span,.site-bg i{position:absolute;border-radius:50%;filter:blur(100px);opacity:.55}
.site-bg span:nth-child(1){left:-5%;top:-2%;width:35vw;height:35vw;background:rgba(240,120,200,.22)}
.site-bg span:nth-child(2){right:-8%;top:8%;width:30vw;height:30vw;background:rgba(80,200,240,.26)}
.site-bg span:nth-child(3){left:26%;bottom:-12%;width:38vw;height:38vw;background:rgba(200,100,230,.14)}
.site-bg i:nth-of-type(1){left:60%;top:28%;width:12rem;height:12rem;background:rgba(255,200,240,.18);filter:blur(35px)}
.site-bg i:nth-of-type(2){right:14%;top:26%;width:8rem;height:8rem;background:rgba(100,200,240,.18);filter:blur(20px)}

/* ── 글래스 패널 ── */
.glass-panel{position:relative;overflow:hidden;border-radius:var(--radius);
  background:linear-gradient(160deg, rgba(255,255,255,.72), rgba(255,240,252,.44));
  border:1px solid rgba(220,150,210,.28);
  backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);
  box-shadow:0 8px 40px rgba(210,120,200,.14),0 0 0 1px rgba(255,255,255,.5) inset}
.glass-panel:before{content:"";position:absolute;inset:0;background:linear-gradient(160deg, rgba(255,255,255,.55), rgba(255,255,255,.05) 50%, transparent 100%);pointer-events:none}
.glass-panel>*{position:relative;z-index:1}

/* ── 헤더 ── */
.glass-header{position:fixed;left:50%;top:8px;transform:translateX(-50%);z-index:100;width:var(--maxw);height:66px;padding:0 14px 0 20px;display:flex;align-items:center;justify-content:space-between;border-radius:24px;
  background:linear-gradient(160deg, rgba(255,255,255,.78), rgba(255,235,250,.68));
  border:1px solid rgba(220,160,215,.30);
  box-shadow:0 8px 32px rgba(200,100,200,.14),0 0 0 1px rgba(255,255,255,.6) inset;
  backdrop-filter:blur(22px)}
.glass-header.is-scrolled{background:linear-gradient(160deg, rgba(255,255,255,.88), rgba(255,240,252,.80));box-shadow:0 12px 44px rgba(200,100,200,.20)}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand-mark{width:44px;height:44px;border-radius:16px;display:grid;place-items:center;font-weight:900;background:linear-gradient(135deg, #f06ab0 0%, #9b60e0 52%, #38c8e8 100%);color:#fff;letter-spacing:-.06em;box-shadow:0 8px 24px rgba(220,100,180,.30)}
.brand-text{display:flex;flex-direction:column;line-height:1.05}.brand-text strong{font-size:16px;letter-spacing:-.03em;color:#2a1a30}.brand-text small{font-size:11px;color:#a070b0;white-space:nowrap}
.desktop-nav{display:flex;align-items:center;gap:6px}
.nav-item{position:relative}
.nav-item>a{position:relative;display:block;padding:11px 13px;border-radius:12px;color:#3a1a40;font-size:14px;font-weight:700;transition:background .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease}
.nav-item>a:hover{background:rgba(220,120,200,.10);color:#2d1238}
.nav-item.is-active>a{color:#2d1238;background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,234,249,.66));box-shadow:inset 0 0 0 1px rgba(220,140,210,.24),0 8px 20px rgba(185,105,195,.10)}
.nav-item.is-active>a:after{content:"";position:absolute;left:15px;right:15px;bottom:6px;height:2px;border-radius:999px;background:linear-gradient(90deg, rgba(240,106,176,.72), rgba(155,96,224,.62), rgba(56,200,232,.58));box-shadow:0 0 12px rgba(220,120,200,.22)}
.nav-menu{position:absolute;left:0;top:48px;display:grid;gap:4px;min-width:220px;padding:12px;border-radius:18px;
  background:rgba(255,248,254,.94);border:1px solid rgba(220,150,210,.28);
  opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s ease;
  box-shadow:0 20px 40px rgba(200,100,200,.18)}
.has-menu:hover .nav-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav-menu a{padding:10px 12px;border-radius:12px;color:#4a2050;transition:background .18s ease,color .18s ease,box-shadow .18s ease}.nav-menu a:hover{background:rgba(220,120,200,.10);color:#2d1238}.nav-menu a.is-active,.nav-menu a[aria-current="page"]{background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,235,250,.70));color:#2d1238;box-shadow:inset 3px 0 0 rgba(240,106,176,.54),inset 0 0 0 1px rgba(220,140,210,.18)}
.header-actions{display:flex;align-items:center;gap:12px}
.lang-switch{display:flex;align-items:center;padding:4px;border-radius:14px;background:rgba(220,140,210,.08);border:1px solid rgba(220,140,210,.18)}
.lang-switch button,.lang-switch .lang-option{border:0;background:transparent;color:#8a5098;font-weight:800;padding:9px 13px;border-radius:10px;cursor:pointer;line-height:1;text-decoration:none;font-size:13px}
.lang-switch .is-active{background:linear-gradient(180deg, rgba(240,120,200,.22), rgba(180,100,220,.18));color:#3a1040;box-shadow:inset 0 0 0 1px rgba(220,140,210,.18)}
.social-links{display:flex;align-items:center;gap:6px}
.social-links a{width:32px;height:32px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(180deg, rgba(255,255,255,.70), rgba(240,220,248,.50));border:1px solid rgba(220,150,210,.22);color:#7a4090;font-size:14px}
.menu-toggle{display:none;width:42px;height:42px;border:0;background:rgba(220,120,200,.10);border-radius:12px}
.menu-toggle span{display:block;width:20px;height:2px;background:#7a4090;margin:4px auto}
.mobile-drawer{position:fixed;right:18px;top:84px;z-index:120;width:min(340px, calc(100% - 36px));display:none;gap:8px;padding:0 18px 18px;border-radius:20px;
  background:rgba(255,248,254,.94);border:1px solid rgba(220,150,210,.28);
  box-shadow:0 18px 50px rgba(200,100,200,.18);max-height:min(78vh, 720px);overflow:auto;overscroll-behavior:contain}
.mobile-drawer.is-open{display:grid}
.drawer-head{position:sticky;top:0;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 -18px 6px;padding:16px 18px 12px;border-radius:20px 20px 0 0;background:linear-gradient(180deg, rgba(255,248,254,.98), rgba(255,248,254,.90));backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid rgba(220,150,210,.18)}
.drawer-head-actions{display:flex;align-items:center;gap:8px;min-width:0}
.drawer-head button{border:0;background:rgba(220,120,200,.10);color:#4a2058;border-radius:999px;padding:8px 12px;white-space:nowrap;cursor:pointer}
.drawer-lang-switch{display:flex;padding:3px;border-radius:12px}
.drawer-lang-switch .lang-option{padding:8px 10px;font-size:12px}
.mobile-drawer a{padding:12px 14px;border-radius:14px;background:rgba(240,200,235,.08);color:#3a1a40}.mobile-drawer a.is-active,.mobile-drawer a[aria-current="page"]{background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,235,250,.66));box-shadow:inset 3px 0 0 rgba(240,106,176,.54),inset 0 0 0 1px rgba(220,140,210,.18);color:#2d1238;font-weight:850}

/* ── 페이지 쉘 ── */
.page-shell{width:var(--maxw);margin:0 auto;padding:90px 0 34px}

/* ── 히어로 ── */
.concept-hero{margin-top:4px}
.hero-frame{position:relative;min-height:600px;padding:26px;
  background:linear-gradient(160deg, rgba(255,255,255,.60), rgba(255,235,252,.42));
  border-radius:30px;overflow:hidden}
.hero-frame:after{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 68% 54%, rgba(80,210,240,.22), transparent 14%),
  radial-gradient(circle at 59% 44%, rgba(240,100,180,.26), transparent 8%),
  radial-gradient(circle at 83% 20%, rgba(160,100,230,.22), transparent 10%),
  linear-gradient(180deg, transparent 70%, rgba(100,210,248,.12) 100%);pointer-events:none}
.hero-overlay{position:absolute;inset:0;background:
  radial-gradient(circle at 72% 26%, rgba(220,120,200,.16), transparent 16%),
  radial-gradient(circle at 78% 60%, rgba(80,200,240,.12), transparent 26%),
  linear-gradient(180deg, rgba(255,255,255,.18), transparent 35%)}
.hero-left-card{position:relative;width:min(430px, 100%);min-height:390px;padding:28px 30px 24px;border-radius:28px;
  background:linear-gradient(160deg, rgba(255,255,255,.72), rgba(255,230,248,.52));
  box-shadow:0 16px 50px rgba(210,120,200,.18),0 0 0 1px rgba(255,255,255,.6) inset}
.hero-kicker{display:inline-flex;margin:0 0 18px;padding:8px 14px;border-radius:999px;
  background:rgba(240,120,180,.12);border:1px solid rgba(220,140,200,.22);
  font-size:12px;font-weight:800;color:#b04880}
.hero-left-card h1{margin:0;line-height:.94;font-size:clamp(56px, 7vw, 88px);letter-spacing:-.06em;
  background:linear-gradient(90deg, #38c8e8 0%, #9b60e0 42%, #f06ab0 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero-subtitle{margin:18px 0 0;font-size:18px;line-height:1.35;color:#4a2858}
.hero-divider{width:100%;height:1px;margin:18px 0;background:linear-gradient(90deg, rgba(220,140,200,.50), rgba(100,210,248,.30), transparent)}
.hero-desc{margin:0;color:#7a4888;font-size:15px;line-height:1.55}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.primary-btn,.ghost-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 22px;border-radius:14px;font-weight:800;border:1px solid transparent;transition:.18s ease}
.primary-btn{background:linear-gradient(90deg, #38c8e8, #9b60e0 52%, #f06ab0);color:#fff;box-shadow:0 12px 30px rgba(180,100,200,.30)}
.ghost-btn{background:rgba(255,255,255,.60);border-color:rgba(220,150,210,.28);color:#5a2868;backdrop-filter:blur(8px)}
.primary-btn:hover,.ghost-btn:hover{transform:translateY(-1px)}
.hero-meta{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px;color:#8a4878;font-size:13px}
.hero-meta span{position:relative;padding-right:14px}
.hero-meta span:not(:last-child):after{content:"";position:absolute;right:0;top:50%;width:1px;height:12px;background:rgba(220,140,200,.30);transform:translateY(-50%)}

/* ── 히어로 비주얼 ── */
.hero-visual{position:absolute;inset:0;display:flex;justify-content:flex-end;align-items:flex-start;padding:34px 24px 24px 24px}
.energy-orb{position:absolute;right:28%;top:36%;width:84px;height:84px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.95), rgba(100,220,248,.60) 30%, rgba(240,120,200,.28) 60%, transparent 70%);
  filter:blur(.1px);box-shadow:0 0 38px rgba(100,200,240,.55),0 0 60px rgba(220,120,200,.30)}
.network-ring{position:absolute;right:26%;top:62px;width:360px;height:360px;border-radius:50%;opacity:.90}
.network-ring:before,.network-ring:after{content:"";position:absolute;inset:0;border-radius:50%}
.network-ring:before{background:radial-gradient(circle at 50% 50%, transparent 26%, rgba(200,140,230,.18) 26.8%, transparent 27.8%, transparent 38%, rgba(80,210,240,.16) 39%, transparent 40.2%, transparent 54%, rgba(220,110,190,.18) 55%, transparent 56.2%)}
.network-ring:after{clip-path:polygon(50% 0%,61% 7%,72% 5%,83% 12%,92% 22%,100% 34%,95% 47%,100% 59%,94% 73%,83% 83%,73% 94%,60% 100%,49% 95%,38% 100%,27% 93%,16% 83%,5% 73%,0% 60%,5% 46%,0% 34%,8% 23%,17% 12%,28% 5%,39% 8%);border:2px solid rgba(220,130,200,.60);filter:drop-shadow(0 0 8px rgba(200,120,200,.40));transform:scale(1.02)}
.wave-lines{position:absolute;left:32%;right:-4%;bottom:14px;height:180px;background:
  radial-gradient(ellipse at 30% 70%, rgba(220,110,200,.24), transparent 44%),
  linear-gradient(180deg, transparent 32%, rgba(80,200,240,.10) 100%)}
.wave-lines:before,.wave-lines:after{content:"";position:absolute;left:-2%;right:-2%;bottom:0;height:160px;background-repeat:no-repeat;background-size:100% 100%}
.wave-lines:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 220' preserveAspectRatio='none'%3E%3Cpath d='M0,170 C120,150 160,65 290,88 C420,111 486,196 620,180 C785,160 770,64 935,52 C1035,45 1098,76 1200,38' fill='none' stroke='rgba(240,110,180,0.8)' stroke-width='3'/%3E%3Cpath d='M0,190 C110,160 210,120 330,128 C470,138 540,204 680,196 C820,188 900,92 1030,92 C1105,92 1145,115 1200,96' fill='none' stroke='rgba(80,210,240,0.75)' stroke-width='2.5'/%3E%3C/svg%3E");opacity:.95;filter:drop-shadow(0 0 14px rgba(220,110,200,.35))}
.wave-lines:after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 220' preserveAspectRatio='none'%3E%3Cpath d='M0,205 C120,168 200,185 335,165 C455,148 527,110 660,123 C828,140 872,210 1010,183 C1080,169 1142,136 1200,117' fill='none' stroke='rgba(180,100,230,0.60)' stroke-width='2.4'/%3E%3Cpath d='M0,210 C100,196 162,118 304,121 C453,124 512,202 660,192 C792,183 918,115 1033,135 C1098,146 1142,170 1200,149' fill='none' stroke='rgba(100,210,248,0.40)' stroke-width='1.5'/%3E%3C/svg%3E");opacity:.8}
.feature-stack{position:relative;z-index:2;display:grid;gap:18px;margin-left:auto;width:min(270px, 26vw);margin-top:32px}
.feature-float{display:grid;grid-template-columns:54px 1fr;gap:14px;align-items:center;padding:16px 18px;
  background:linear-gradient(160deg, rgba(255,255,255,.68), rgba(255,230,248,.48));
  border-radius:22px;border:1px solid rgba(220,150,210,.22);box-shadow:0 4px 20px rgba(210,120,200,.12)}
.feature-float-icon{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;font-weight:800;
  background:linear-gradient(160deg, rgba(240,130,200,.20), rgba(80,210,240,.12));
  border:1px solid rgba(220,150,210,.22);color:#7a3888}
.feature-float strong{display:block;font-size:19px;letter-spacing:-.03em;color:#2a1a30}
.feature-float span{display:block;margin-top:6px;font-size:13px;color:#8a5090;line-height:1.5}

/* ── 섹션 공통 ── */
.section-heading.center{text-align:center;margin:20px 0 24px}
.section-heading p,.section-title p{margin:0;color:#c070c0;font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
.section-heading h2,.section-title h2{margin:6px 0 10px;font-size:clamp(30px,4vw,48px);line-height:1.05;letter-spacing:-.05em;color:#2a1a30}
.section-heading span{color:#7a4888}
.concept-section{padding:14px 0 4px}

/* ── 인포 카드 ── */
.info-card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.info-link-card{display:grid;grid-template-columns:58px 1fr;gap:18px;align-items:start;padding:22px 20px;
  background:linear-gradient(160deg, rgba(255,255,255,.64), rgba(255,225,248,.44))}
.info-icon{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;
  background:linear-gradient(160deg, rgba(240,120,190,.20), rgba(80,210,240,.14));
  border:1px solid rgba(220,150,210,.22);font-size:26px}
.info-link-card strong{display:block;font-size:24px;letter-spacing:-.04em;color:#2a1a30}
.info-link-card p{margin:10px 0 14px;color:#7a5088;font-size:14px;line-height:1.55}
.info-link-card em{font-style:normal;color:#b050a0;font-weight:700}

/* ── 서브 히어로 ── */
.sub-hero{display:grid;grid-template-columns:1.18fr .82fr;align-items:center;gap:24px;min-height:280px;padding:34px 36px;margin-bottom:26px;
  background:linear-gradient(160deg, rgba(255,255,255,.62), rgba(255,230,250,.44))}
.sub-hero h1{margin:0 0 12px;font-size:clamp(34px,5vw,62px);line-height:1.03;letter-spacing:-.06em;color:#2a1030}
.sub-hero p:not(.eyebrow){margin:0;color:#6a3878;font-size:17px;max-width:760px}
.eyebrow{margin:0 0 10px;color:#c060b0;font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
.chip-list{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.chip{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:0 13px;border-radius:999px;
  background:rgba(240,130,200,.10);border:1px solid rgba(220,150,210,.22);color:#7a3888;font-size:13px;font-weight:700}
.hero-orb{display:grid;place-items:center}
.hero-orb-card{width:min(290px,100%);padding:28px;border-radius:26px;
  background:linear-gradient(160deg, rgba(255,255,255,.70), rgba(255,230,248,.50));
  border:1px solid rgba(220,150,210,.24);transform:rotate(-6deg)}
.hero-orb-card strong{display:block;font-size:30px;color:#2a1030}
.hero-orb-card small{display:block;margin-top:8px;color:#8a5090}

/* ── 섹션 블록 ── */
.section-block{margin:28px 0}
.section-title{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:18px}
.section-note{max-width:420px;text-align:right;color:#9a6098;font-size:13px}
.feature-grid,.card-grid,.license-grid,.insight-grid,.steps-grid,.service-grid,.partner-grid,.contact-layout,.mini-stat-grid,.board-status-grid{display:grid;gap:18px}
.feature-grid,.card-grid,.insight-grid,.service-grid{grid-template-columns:repeat(3,1fr)}

/* ── 피처 카드 ── */
.feature-card,.license-card,.insight-card,.contact-panel,.faq-panel,.map-card{padding:26px;
  background:linear-gradient(160deg, rgba(255,255,255,.62), rgba(255,225,248,.40))}
.feature-card span,.license-card span{display:inline-grid;place-items:center;min-width:48px;height:34px;padding:0 10px;border-radius:999px;
  background:rgba(220,120,200,.12);border:1px solid rgba(220,150,210,.20);font-size:12px;font-weight:800;color:#8a3888}
.feature-card h3,.license-card h3{margin:18px 0 10px;font-size:24px;line-height:1.14;letter-spacing:-.04em;color:#2a1030}
.feature-card p,.license-card p,.insight-card p,.step-card span,.mini-stat span,.map-row span,.faq-card p{margin:0;color:#7a4888}
.insight-grid{grid-template-columns:repeat(3,1fr)}
.insight-card strong{display:block;font-size:22px;margin-bottom:8px;color:#2a1030}

/* ── 스플릿 섹션 ── */
.split-section{display:grid;grid-template-columns:1fr auto;align-items:center;gap:24px;padding:28px 30px;margin:24px 0;
  background:linear-gradient(160deg, rgba(255,255,255,.60), rgba(255,225,248,.40))}
.split-section h2{margin:8px 0 10px;font-size:36px;line-height:1.08;letter-spacing:-.04em;color:#2a1030}
.split-section p{margin:0;color:#7a4888}

/* ── 스텝 카드 ── */
.steps-grid{grid-template-columns:repeat(4,1fr)}
.steps-grid.compact{grid-template-columns:repeat(2,1fr);width:min(420px,100%)}
.step-card{padding:22px;border-radius:22px;background:rgba(255,255,255,.50);border:1px solid rgba(220,150,210,.20)}
.step-card b{display:block;margin-bottom:10px;color:#c060a0;letter-spacing:.15em;font-size:12px}
.step-card strong{display:block;font-size:22px;letter-spacing:-.04em;color:#2a1030}
.mini-stat-grid{grid-template-columns:repeat(3,1fr)}
.mini-stat{padding:16px;border-radius:18px;background:rgba(255,255,255,.50);border:1px solid rgba(220,150,210,.20)}
.mini-stat strong{display:block;font-size:20px;color:#2a1030}

/* ── 서비스/파트너 ── */
.service-grid a,.partner-card,.image-card,.license-card,.info-link-card{border-radius:24px}
.service-grid a{padding:24px;
  background:linear-gradient(160deg, rgba(255,255,255,.60), rgba(255,220,248,.38));
  border:1px solid rgba(220,150,210,.22)}
.service-grid a strong{display:block;font-size:24px;letter-spacing:-.04em;color:#2a1030}
.service-grid a span{display:block;margin-top:10px;color:#8a5090}
.license-grid.two-col,.two-col-grid{grid-template-columns:repeat(2,1fr)}
.bullet-list{margin:18px 0 20px;padding-left:18px;color:#7a4888}
.bullet-list li+li{margin-top:6px}

/* ── U4A Workspace 라이선스 페이지 ── */
.license-u4aide-page .license-card{display:flex;flex-direction:column;align-items:stretch}
.license-u4aide-page .license-card .bullet-list{flex:1}
.license-u4aide-page .license-card .primary-btn,
.license-u4aide-page .license-card .ghost-btn{width:100%;min-height:52px}

/* ── 응용기술 라이선스 페이지 ── */
.license-skill-page .sub-hero .hero-orb-card strong{font-size:28px}
.skill-license-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.skill-license-card{display:grid;grid-template-rows:auto 1fr;overflow:hidden;padding:0;border-radius:28px;
  background:linear-gradient(160deg, rgba(255,255,255,.68), rgba(255,229,249,.45), rgba(237,248,255,.38));
  box-shadow:0 22px 52px rgba(118,64,148,.10), inset 0 0 0 1px rgba(255,255,255,.54)}
.skill-license-logo{position:relative;display:grid;place-items:center;min-height:190px;margin:18px 18px 0;border-radius:24px;
  background:linear-gradient(135deg, rgba(255,255,255,.74), rgba(241,224,255,.42) 52%, rgba(218,246,255,.36));
  border:1px solid rgba(218,160,222,.24);overflow:hidden}
.skill-license-logo:before{content:"";position:absolute;inset:-40%;background:radial-gradient(circle at 35% 34%, rgba(93,202,238,.18), transparent 24%), radial-gradient(circle at 72% 58%, rgba(234,125,190,.16), transparent 28%);transform:rotate(-10deg)}
.skill-license-logo img{position:relative;z-index:1;display:block;max-width:68%;max-height:112px;object-fit:contain;filter:drop-shadow(0 18px 30px rgba(70,30,100,.12))}
.skill-license-logo.is-empty:after{content:attr(data-placeholder);position:relative;z-index:1;display:grid;place-items:center;width:118px;height:118px;border-radius:28px;
  background:rgba(255,255,255,.58);border:1px dashed rgba(188,123,205,.38);color:#8a5090;font-size:13px;font-weight:900;letter-spacing:-.02em}
.skill-license-copy{padding:24px 26px 26px}
.skill-license-copy span{display:inline-grid;place-items:center;min-height:32px;padding:0 11px;border-radius:999px;background:rgba(220,120,200,.12);border:1px solid rgba(220,150,210,.20);font-size:11px;font-weight:900;letter-spacing:.08em;color:#8a3888}
.skill-license-copy h3{margin:16px 0 10px;font-size:26px;line-height:1.12;letter-spacing:-.055em;color:#2a1030}
.skill-license-copy p{margin:0;color:#704482;line-height:1.68;word-break:keep-all}
.skill-license-copy dl{display:grid;gap:8px;margin:18px 0 0}
.skill-license-copy dl div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px;border-radius:16px;background:rgba(255,255,255,.50);border:1px solid rgba(220,150,210,.18)}
.skill-license-copy dt{color:#b050a0;font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.skill-license-copy dd{margin:0;color:#4a2458;font-size:13px;font-weight:800;text-align:right}
@media (max-width:768px){.skill-license-grid{grid-template-columns:1fr}.skill-license-logo{min-height:160px}.skill-license-copy{padding:20px}.skill-license-copy dl div{display:grid;gap:4px}.skill-license-copy dd{text-align:left}}
.card-grid{grid-template-columns:repeat(3,1fr)}
.image-card a{display:block;aspect-ratio:16/10;background:linear-gradient(135deg, rgba(80,200,240,.14), rgba(220,110,190,.14));position:relative}
.image-card img{width:100%;height:100%;display:block;object-fit:cover}
.image-card figcaption{padding:16px}
.image-card figcaption strong{display:block;color:#2a1030}
.image-card figcaption span{display:block;margin-top:4px;color:#8a5090;font-size:13px}
.image-card.is-missing a:before{content:"이미지 자료 필요";position:absolute;inset:0;display:grid;place-items:center;font-weight:800;color:#9a5090}
.image-card.is-missing img,.partner-card.is-missing img{display:none}
.board-status-grid{grid-template-columns:repeat(3,1fr)}
.board-status-card{padding:18px;border-radius:18px;background:rgba(255,255,255,.50);border:1px solid rgba(220,150,210,.20)}
.board-status-card strong{display:block;margin-bottom:6px;color:#2a1030}
.board-status-card span{color:#8a5090;font-size:13px}
.partner-grid{grid-template-columns:repeat(5,1fr)}
.partner-card{padding:16px;display:grid;place-items:center;text-align:center;gap:8px;
  background:linear-gradient(160deg, rgba(255,255,255,.60), rgba(255,220,248,.38));
  border:1px solid rgba(220,150,210,.22)}
.partner-card img{height:42px;object-fit:contain}
.partner-card span{font-weight:800;color:#2a1030}
.partner-card small{font-size:11px;color:#9a6098}

/* ── 파트너 페이지: 로고 전용 그룹 레이아웃 ── */
.partner-page .partner-logo-section{margin-top:30px}
.partner-page .partner-dynamic-list{min-height:120px}
.partner-page .partner-list-loading{margin:0;padding:26px;border-radius:24px;background:rgba(255,255,255,.48);border:1px solid rgba(220,150,210,.20);color:#8a5090;font-size:14px;font-weight:800;text-align:center}
.partner-page .partner-group{margin-top:26px}
.partner-page .partner-group-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin:0 0 14px;padding:0 4px}
.partner-page .partner-group-head p{margin:0;color:#c060b0;font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
.partner-page .partner-group-head h3{margin:6px 0 0;font-size:clamp(24px,3vw,34px);line-height:1.08;letter-spacing:-.05em;color:#2a1030}
.partner-page .partner-logo-grid{grid-template-columns:repeat(5,1fr);gap:16px}
.partner-page .partner-card{min-height:104px;padding:22px 18px;transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease}
.partner-page .partner-card:hover{transform:translateY(-4px);border-color:rgba(220,120,200,.34);box-shadow:0 20px 42px rgba(118,64,148,.14)}
.partner-page .partner-card img{width:100%;height:54px;max-width:160px;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(70,30,100,.08))}
.partner-page .partner-card span,.partner-page .partner-card small{display:none}
@media (max-width:1200px){.partner-page .partner-logo-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:900px){.partner-page .partner-logo-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:768px){.partner-page .partner-group{margin-top:22px}.partner-page .partner-logo-grid{grid-template-columns:repeat(2,1fr)}.partner-page .partner-card{min-height:96px;padding:18px}.partner-page .partner-card img{height:48px}}
@media (max-width:420px){.partner-page .partner-logo-grid{grid-template-columns:1fr}}

/* ── 문의 ── */
.contact-layout{grid-template-columns:1.2fr .8fr;align-items:start}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contact-form label{display:grid;gap:8px;font-weight:700;color:#3a1a40}
.contact-form label.full{grid-column:1/-1}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;padding:14px 16px;border-radius:14px;border:1px solid rgba(220,150,210,.28);background:rgba(255,255,255,.60);color:#2a1030;font:inherit;backdrop-filter:blur(8px)}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:none;border-color:rgba(80,200,240,.50);box-shadow:0 0 0 4px rgba(80,200,240,.08)}
.form-footer{grid-column:1/-1;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.form-status{margin:0;color:#8a5090}.form-status.is-ok{color:#38a8c8}.form-status.is-error{color:#e050a0}
.contact-info{display:grid;gap:10px}
.contact-info span{padding:12px 16px;border-radius:999px;background:rgba(255,255,255,.50);border:1px solid rgba(220,150,210,.20);color:#6a3878}
.faq-panel{display:grid;gap:16px}
.faq-card{padding:22px;border-radius:22px;background:rgba(255,255,255,.50);border:1px solid rgba(220,150,210,.20)}
.faq-card strong{display:block;font-size:22px;letter-spacing:-.03em;color:#2a1030}

/* ── 지도 ── */
.map-placeholder{display:grid;place-items:center;min-height:340px;border-radius:24px;
  background:linear-gradient(135deg, rgba(80,200,240,.12), rgba(220,110,190,.12));
  border:1px dashed rgba(220,150,210,.30);text-align:center}
.map-placeholder span{display:block;font-size:52px;font-weight:900}
.map-placeholder small{display:block;margin-top:12px;color:#8a5090}
.map-details{display:grid;gap:16px;margin-top:12px}
.map-row{padding:18px;border-radius:18px;background:rgba(255,255,255,.50);border:1px solid rgba(220,150,210,.20)}
.map-row strong{display:block;margin-bottom:6px;color:#c060a0;font-size:13px;letter-spacing:.12em;text-transform:uppercase}

/* ── 푸터 ── */
.site-footer{width:var(--maxw);margin:0 auto 30px;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 24px;border-radius:24px;
  background:linear-gradient(160deg, rgba(255,255,255,.62), rgba(255,228,250,.44));
  border:1px solid rgba(220,150,210,.24);color:#8a5090}
.site-footer p{margin:0;font-size:13px}
.top-button{position:fixed;right:20px;bottom:20px;width:60px;height:60px;display:grid;place-items:center;border-radius:22px;border:1px solid rgba(220,150,210,.26);background:linear-gradient(160deg, rgba(255,255,255,.84), rgba(255,231,247,.58));color:transparent;opacity:0;pointer-events:none;cursor:pointer;transform:translateY(14px) scale(.92);transition:transform .22s ease, opacity .22s ease, box-shadow .22s ease, background .22s ease;backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);box-shadow:0 12px 28px rgba(204,121,192,.20),0 0 0 1px rgba(255,255,255,.55) inset;overflow:hidden}
.top-button:before{content:"↑";font-size:24px;line-height:1;font-weight:900;background:linear-gradient(180deg, #f067b3 0%, #a05fe5 50%, #39c9e9 100%);-webkit-background-clip:text;background-clip:text;color:transparent;transform:translateY(-1px)}
.top-button:after{content:"TOP";position:absolute;left:50%;bottom:9px;transform:translateX(-50%);font-size:10px;font-weight:900;letter-spacing:.12em;color:#9657ab;opacity:.92}
.top-button:hover{transform:translateY(0) scale(1.02);box-shadow:0 18px 34px rgba(204,121,192,.26),0 0 0 1px rgba(255,255,255,.62) inset;background:linear-gradient(160deg, rgba(255,255,255,.92), rgba(245,225,245,.70))}
.top-button.is-visible{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}
.top-button:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(167,103,232,.18),0 12px 28px rgba(204,121,192,.20)}

/* ── reveal 애니메이션 ── */
.reveal{opacity:1;transform:none}

/* ── 반응형 ── */
@media (max-width:1200px){.info-card-grid,.feature-grid,.card-grid,.partner-grid,.service-grid,.insight-grid{grid-template-columns:repeat(2,1fr)}.steps-grid{grid-template-columns:repeat(2,1fr)}.feature-stack{width:250px}.network-ring{width:310px;height:310px}}
@media (max-width:1024px){.desktop-nav,.lang-switch,.social-links{display:none}.menu-toggle{display:block}.glass-header{width:min(100% - 20px, 1380px)}.hero-frame{min-height:unset;padding:20px}.hero-visual{position:relative;display:block;min-height:280px;padding:0;margin-top:18px}.hero-left-card{width:100%}.feature-stack{position:relative;width:100%;margin-top:156px}.network-ring{right:unset;left:50%;top:30px;width:290px;height:290px;transform:translateX(-50%)}.energy-orb{right:auto;left:50%;top:126px;transform:translateX(-50%)}.wave-lines{left:0;right:0;bottom:2px;height:120px}.contact-layout,.split-section,.sub-hero{grid-template-columns:1fr}}
@media (max-width:768px){:root{--maxw:calc(100% - 18px)}.page-shell{padding-top:80px;padding-bottom:22px}.glass-header{top:6px;height:60px;padding:0 10px 0 14px;border-radius:20px}.brand-mark{width:40px;height:40px;border-radius:14px}.brand-text small{display:none}.brand-text strong{font-size:14px}.hero-frame{padding:16px;border-radius:26px}.hero-left-card{padding:22px;border-radius:24px;min-height:auto}.hero-left-card h1{font-size:52px}.hero-subtitle{font-size:17px}.hero-desc{font-size:14px}.hero-divider{margin:16px 0}.cta-row{gap:10px;margin-top:16px}.primary-btn,.ghost-btn{min-height:44px;padding:0 18px}.hero-meta{gap:10px 14px;margin-top:18px}.hero-meta span:after{display:none}.hero-visual{min-height:190px;margin-top:10px}.network-ring{top:16px;width:210px;height:210px;opacity:.82}.energy-orb{top:78px;width:58px;height:58px}.wave-lines{height:82px;bottom:-6px;opacity:.86}.feature-stack{gap:12px;margin-top:110px}.feature-float{padding:14px 15px;border-radius:18px}.feature-float-icon{width:44px;height:44px}.concept-section{padding:6px 0 0}.section-heading.center{margin:8px 0 18px}.section-heading h2,.section-title h2{font-size:clamp(28px,8vw,40px)}.section-block{margin:18px 0}.section-title{display:block;margin-bottom:14px}.section-note{text-align:left;display:block;margin-top:8px}.info-card-grid,.feature-grid,.card-grid,.license-grid.two-col,.two-col-grid,.partner-grid,.service-grid,.insight-grid,.contact-layout,.contact-form,.board-status-grid,.mini-stat-grid,.steps-grid,.steps-grid.compact{grid-template-columns:1fr}.info-link-card,.feature-card,.license-card,.insight-card,.contact-panel,.faq-panel,.map-card,.service-grid a,.partner-card{padding:20px}.site-footer{display:grid;padding:18px 18px 22px;margin-bottom:18px}.top-button{right:14px;bottom:14px;width:56px;height:56px;border-radius:20px}}
@media (max-width:560px){.glass-header{height:58px}.hero-left-card h1{font-size:46px}.hero-subtitle{font-size:16px}.hero-visual{min-height:168px}.network-ring{width:184px;height:184px}.energy-orb{top:70px;width:52px;height:52px}.feature-stack{margin-top:98px}.feature-float{grid-template-columns:44px 1fr;gap:12px;padding:13px 14px}.section-block{margin:16px 0}.top-button:after{font-size:9px;bottom:8px}}


/* ─────────────────────────────────────────────
   U4A Workspace final polish
   - pastel frosted glass tone
   - refined font stack
   - animated hero background
   - custom scrollbar / top button
   - compact mobile hero spacing
───────────────────────────────────────────── */
.brand-text strong,.hero-left-card h1,.section-heading h2,.section-title h2,.sub-hero h1,
.feature-card h3,.license-card h3,.info-link-card strong,.service-grid a strong{
  letter-spacing:-.055em;
}
.brand-text strong{font-weight:900}
.brand-text small{font-weight:700}
.nav-item>a{font-weight:800}
.hero-left-card h1{font-weight:900}
.hero-subtitle{font-weight:650}
.hero-desc{font-weight:550}

/* soft sheet-glass background similar to the attached reference */
.site-bg:before{
  content:"";
  position:absolute;
  left:8%;
  top:10%;
  width:72vw;
  height:38vw;
  border-radius:46px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.34), rgba(255,255,255,.08)),
    radial-gradient(circle at 22% 68%, rgba(118,178,255,.20), transparent 28%),
    radial-gradient(circle at 82% 24%, rgba(255,170,138,.18), transparent 26%),
    radial-gradient(circle at 52% 50%, rgba(228,133,220,.16), transparent 34%);
  border:1px solid rgba(255,255,255,.38);
  box-shadow:
    0 28px 70px rgba(178,137,204,.16),
    inset 0 0 0 1px rgba(255,255,255,.34);
  transform:perspective(900px) rotateX(58deg) rotateZ(-18deg) translateY(-8%);
  filter:blur(.2px);
  opacity:.76;
}
.site-bg:after{
  content:"";
  position:absolute;
  right:-6%;
  top:-6%;
  width:48vw;
  height:30vw;
  border-radius:40px;
  background:linear-gradient(135deg, rgba(255,197,151,.25), rgba(255,255,255,.04));
  transform:perspective(900px) rotateX(58deg) rotateZ(-18deg);
  border:1px solid rgba(255,255,255,.24);
  opacity:.55;
}

.glass-header{
  background:linear-gradient(160deg, rgba(255,255,255,.78), rgba(250,235,255,.58), rgba(236,247,255,.54));
  border-color:rgba(203,169,230,.25);
}
.glass-header.is-scrolled{
  background:linear-gradient(160deg, rgba(255,255,255,.88), rgba(252,240,255,.72), rgba(235,248,255,.68));
}
.brand-mark{
  background:linear-gradient(135deg,#df74d6 0%,#9c7eea 48%,#65c9f1 100%);
  box-shadow:0 10px 26px rgba(170,110,210,.24);
}
.hero-frame{
  background:
    radial-gradient(circle at 28% 24%, rgba(255,255,255,.62), transparent 24%),
    linear-gradient(135deg, rgba(255,255,255,.64), rgba(255,238,251,.42) 54%, rgba(233,247,255,.40));
}
.hero-left-card{
  background:linear-gradient(145deg, rgba(255,255,255,.78), rgba(255,239,251,.52), rgba(239,248,255,.45));
}
.hero-left-card h1{
  background:linear-gradient(90deg,#42bee7 0%,#7397e8 44%,#a585e7 72%,#e785bd 100%);
  -webkit-background-clip:text;
  background-clip:text;
}
.hero-kicker{
  background:rgba(238,131,186,.12);
  color:#b34881;
  border-color:rgba(225,143,204,.22);
}
.primary-btn{
  background:linear-gradient(90deg,#45c4e8,#8d7fea 48%,#ec83b7);
  box-shadow:0 13px 30px rgba(173,116,205,.22);
}
.ghost-btn{
  background:rgba(255,255,255,.62);
}

/* animated background behind the UI5 title/card */
.hero-left-card:after{
  content:"";
  position:absolute;
  inset:-35%;
  z-index:0;
  background:
    radial-gradient(circle at 25% 35%, rgba(99,202,242,.24), transparent 18%),
    radial-gradient(circle at 72% 30%, rgba(230,119,194,.20), transparent 20%),
    linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 45%, transparent 60%);
  opacity:.72;
  animation:u4aHeroAura 11s ease-in-out infinite alternate;
  pointer-events:none;
}
.hero-left-card > *{position:relative;z-index:1}
@keyframes u4aHeroAura{
  0%{transform:translate3d(-5%, -3%, 0) rotate(0deg) scale(1)}
  50%{transform:translate3d(5%, 4%, 0) rotate(6deg) scale(1.05)}
  100%{transform:translate3d(-2%, 6%, 0) rotate(-5deg) scale(1.02)}
}
.energy-orb{animation:u4aFloatOrb 5.5s ease-in-out infinite alternate}
.network-ring{animation:u4aSlowRotate 18s linear infinite}
.wave-lines:before{animation:u4aWaveMove 8s ease-in-out infinite alternate}
.wave-lines:after{animation:u4aWaveMove 10s ease-in-out infinite alternate-reverse}
@keyframes u4aFloatOrb{
  from{transform:translate3d(0, -6px, 0) scale(.98)}
  to{transform:translate3d(10px, 10px, 0) scale(1.04)}
}
@keyframes u4aSlowRotate{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
@keyframes u4aWaveMove{
  from{transform:translateX(-12px)}
  to{transform:translateX(16px)}
}

/* pastel scrollbar */
html{scrollbar-color:rgba(178,111,213,.72) rgba(255,255,255,.28);scrollbar-width:thin}
body::-webkit-scrollbar, .mobile-drawer::-webkit-scrollbar{width:12px;height:12px}
body::-webkit-scrollbar-track, .mobile-drawer::-webkit-scrollbar-track{
  background:linear-gradient(180deg, rgba(255,255,255,.38), rgba(241,225,248,.54));
  border-radius:999px;
}
body::-webkit-scrollbar-thumb, .mobile-drawer::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#ef91c3 0%,#ad8aec 50%,#6bc8ef 100%);
  border:2px solid rgba(255,255,255,.64);
  border-radius:999px;
  box-shadow:0 4px 14px rgba(176,113,203,.24);
}

/* prettier top button */
.top-button{
  width:60px;
  height:60px;
  border-radius:22px;
  color:transparent;
  background:linear-gradient(145deg, rgba(255,255,255,.86), rgba(255,236,249,.62), rgba(233,247,255,.58));
  border:1px solid rgba(215,162,220,.28);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 12px 28px rgba(198,132,205,.20), inset 0 0 0 1px rgba(255,255,255,.54);
  transform:translateY(14px) scale(.92);
}
.top-button:before{
  content:"↑";
  font-size:24px;
  font-weight:900;
  line-height:1;
  background:linear-gradient(180deg,#e777bd 0%,#a279e8 52%,#48c3e8 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.top-button:after{
  content:"TOP";
  position:absolute;
  left:50%;
  bottom:9px;
  transform:translateX(-50%);
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
  color:#8c5fa6;
}
.top-button.is-visible{transform:translateY(0) scale(1)}
.top-button:hover{
  transform:translateY(0) scale(1.03);
  box-shadow:0 18px 34px rgba(198,132,205,.26), inset 0 0 0 1px rgba(255,255,255,.62);
}

/* compact mobile landing spacing */
@media (max-width:1024px){
  .hero-visual{min-height:280px;margin-top:18px}
  .feature-stack{margin-top:150px}
  .network-ring{top:30px;width:290px;height:290px}
  .energy-orb{top:126px}
  .wave-lines{height:120px;bottom:2px}
}
@media (max-width:768px){
  .page-shell{padding-top:80px;padding-bottom:22px}
  .hero-frame{padding:16px;border-radius:26px}
  .hero-left-card{padding:22px;border-radius:24px;min-height:auto}
  .hero-left-card h1{font-size:52px}
  .hero-subtitle{font-size:17px}
  .hero-desc{font-size:14px}
  .hero-divider{margin:16px 0}
  .hero-visual{min-height:190px;margin-top:10px}
  .network-ring{top:16px;width:210px;height:210px;opacity:.82}
  .energy-orb{top:78px;width:58px;height:58px}
  .wave-lines{height:82px;bottom:-6px;opacity:.86}
  .feature-stack{gap:12px;margin-top:110px}
  .feature-float{padding:14px 15px;border-radius:18px}
  .concept-section{padding:6px 0 0}
  .section-heading.center{margin:8px 0 18px}
  .section-block{margin:18px 0}
  .info-link-card,.feature-card,.license-card,.insight-card,.contact-panel,.faq-panel,.map-card,.service-grid a,.partner-card{padding:20px}
  .top-button{right:14px;bottom:14px;width:56px;height:56px;border-radius:20px}
}
@media (max-width:560px){
  .hero-left-card h1{font-size:46px}
  .hero-visual{min-height:168px}
  .network-ring{width:184px;height:184px}
  .energy-orb{top:70px;width:52px;height:52px}
  .feature-stack{margin-top:98px}
}


/* ─────────────────────────────────────────────
   Main page legacy image path binding
   원본 PHP 메인에서 바라보던 경로:
   ../images/main/visual-txt_h2.png
   ../images/main/main_u4aide_img01.png
   ../images/main/main_u4aide_img02.png
   ../images/main/main_u4aide_img03.png
   ../images/main/main_service_img01.png
   ../images/main/main_service_img02.png
   ../images/main/main_service_img03.png
   ../images/main/main_service_img04.png
───────────────────────────────────────────── */
.legacy-hero-title{
  position:relative;
  display:grid;
  gap:0;
}
.legacy-hero-title-img{
  display:block;
  width:min(330px, 100%);
  max-height:150px;
  object-fit:contain;
  object-position:left center;
  margin:0 0 6px;
  filter:drop-shadow(0 10px 24px rgba(151,114,216,.12));
}
.legacy-hero-title:not(.is-missing) h1{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  clip-path:inset(50%);
}
.legacy-hero-title.is-missing .legacy-hero-title-img{
  display:none;
}
.legacy-thumb{
  overflow:hidden;
}
.legacy-thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.legacy-thumb span{
  display:none;
}
.legacy-asset-card.is-missing .legacy-thumb img{
  display:none;
}
.legacy-asset-card.is-missing .legacy-thumb span{
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
}
.legacy-main-grid .info-link-card{
  min-height:156px;
}
.service-thumb{
  width:100%;
  min-height:112px;
  display:grid;
  place-items:center;
  margin-bottom:14px;
  border-radius:20px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.54), rgba(255,237,250,.32)),
    radial-gradient(circle at 28% 70%, rgba(106,204,240,.16), transparent 38%),
    radial-gradient(circle at 72% 20%, rgba(230,134,195,.16), transparent 36%);
  border:1px solid rgba(220,150,210,.20);
  overflow:hidden;
}
.service-thumb img{
  max-width:78%;
  max-height:86px;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 10px 20px rgba(160,100,190,.14));
}
.service-thumb b{
  display:none;
  font-size:18px;
  color:#8a5090;
}
.legacy-service-grid .legacy-asset-card.is-missing .service-thumb img{
  display:none;
}
.legacy-service-grid .legacy-asset-card.is-missing .service-thumb b{
  display:block;
}
@media (max-width:768px){
  .legacy-hero-title-img{
    width:min(270px, 100%);
    max-height:118px;
  }
  .service-thumb{
    min-height:88px;
    margin-bottom:12px;
  }
  .service-thumb img{
    max-height:70px;
  }
}


/* ─────────────────────────────────────────────
   Home main detail refactor
   1) information 이미지 박스 테두리 제거
   2) Quick Navigation 이미지형 카드 → 모던 텍스트/아이콘 카드
   3) Hero title: Workspace 소형 표기
───────────────────────────────────────────── */

/* Hero: 기존 visual-txt_h2.png는 원본 경로 보존용으로만 두고 텍스트 타이틀 사용 */
.legacy-hero-title.is-text-title .legacy-hero-title-img{
  display:none !important;
}
.legacy-hero-title.is-text-title h1{
  position:relative !important;
  width:auto !important;
  height:auto !important;
  overflow:visible !important;
  clip:auto !important;
  white-space:normal !important;
  clip-path:none !important;
}
.hero-left-card h1 small{
  display:inline-block;
  margin-left:.16em;
  font-size:clamp(18px, 2.4vw, 32px);
  line-height:1;
  letter-spacing:-.04em;
  vertical-align:baseline;
  background:linear-gradient(90deg,#b08bec 0%,#e88ec4 58%,#69c9ef 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  opacity:.94;
}

/* U4A Workspace information: 이미지 뒤쪽 내부 박스 느낌 제거 */
.legacy-main-grid .info-link-card{
  align-items:center;
}
.legacy-main-grid .legacy-thumb{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  width:72px;
  height:72px;
}
.legacy-main-grid .legacy-thumb:before{
  display:none !important;
}
.legacy-main-grid .legacy-thumb img{
  width:72px;
  height:72px;
  object-fit:contain;
  filter:drop-shadow(0 14px 22px rgba(160,100,190,.16));
}
.legacy-main-grid .legacy-asset-card.is-missing .legacy-thumb{
  border-radius:20px !important;
  background:rgba(255,255,255,.38) !important;
  border:1px solid rgba(220,150,210,.18) !important;
}

/* Quick Navigation: 기존 이미지 자산 대신 현재 리뉴얼 톤에 맞는 카드 */
.modern-service-grid{
  grid-template-columns:repeat(4, minmax(0, 1fr));
}
.modern-service-grid .modern-menu-card{
  position:relative;
  min-height:210px;
  padding:24px;
  overflow:hidden;
  border-radius:26px;
  border:1px solid rgba(220,150,210,.22);
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.72), transparent 26%),
    radial-gradient(circle at 82% 8%, rgba(108,201,239,.16), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.58), rgba(255,230,248,.36), rgba(235,248,255,.36));
  box-shadow:0 14px 38px rgba(190,128,205,.12), inset 0 0 0 1px rgba(255,255,255,.42);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.modern-service-grid .modern-menu-card:before{
  content:"";
  position:absolute;
  inset:auto -18% -36% 28%;
  height:120px;
  border-radius:50%;
  background:linear-gradient(90deg, rgba(232,137,197,.18), rgba(105,201,239,.16));
  filter:blur(20px);
  transform:rotate(-12deg);
}
.modern-service-grid .modern-menu-card:hover{
  transform:translateY(-4px);
  border-color:rgba(208,132,214,.32);
  box-shadow:0 20px 48px rgba(190,128,205,.18), inset 0 0 0 1px rgba(255,255,255,.54);
}
.modern-menu-icon{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  margin-bottom:22px;
  border-radius:20px;
  color:#ffffff;
  font-size:24px;
  font-weight:900;
  letter-spacing:-.04em;
  background:linear-gradient(135deg,#df74d6 0%,#9c7eea 48%,#65c9f1 100%);
  box-shadow:0 12px 26px rgba(170,110,210,.22);
}
.modern-service-grid .modern-menu-card strong{
  display:block;
  margin-bottom:10px;
  color:#26162f;
}
.modern-service-grid .modern-menu-card span:not(.modern-menu-icon){
  color:#7a5088;
  line-height:1.58;
}

/* 기존 service-thumb 이미지 카드 스타일은 홈에서는 더 이상 사용하지 않음 */
.modern-service-grid .service-thumb{
  display:none;
}

@media (max-width:1200px){
  .modern-service-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
@media (max-width:768px){
  .legacy-main-grid .legacy-thumb,
  .legacy-main-grid .legacy-thumb img{
    width:62px;
    height:62px;
  }
  .modern-service-grid{
    grid-template-columns:1fr;
  }
  .modern-service-grid .modern-menu-card{
    min-height:170px;
    padding:20px;
  }
  .modern-menu-icon{
    width:52px;
    height:52px;
    margin-bottom:18px;
    border-radius:18px;
  }
}


/* ─────────────────────────────────────────────
   Home main fix #2
   1) Header brand spacing
   2) Hero title size/gap refinement
   3) Quick menu image overlay cards
───────────────────────────────────────────── */

/* Header brand spacing */
.brand-text{
  line-height:1.18 !important;
  gap:4px;
}
.brand-text strong{
  display:block;
  margin-bottom:2px;
}
.brand-text small{
  display:block;
  line-height:1.25;
}

/* Hero title refinement */
.hero-left-card h1{
  font-size:clamp(40px, 5.4vw, 66px) !important;
  line-height:.96 !important;
  letter-spacing:-.062em !important;
}
.hero-left-card h1 span{
  display:block;
}
.hero-left-card h1 small{
  display:block !important;
  margin:4px 0 0 !important;
  font-size:clamp(20px, 2.8vw, 34px) !important;
  line-height:1.02 !important;
  letter-spacing:-.045em !important;
}

/* Quick Navigation image overlay cards */
.overlay-service-grid{
  grid-template-columns:repeat(4, minmax(0, 1fr));
}
.overlay-menu-card{
  position:relative;
  min-height:240px;
  display:block;
  overflow:hidden;
  border-radius:28px;
  border:1px solid rgba(220,150,210,.24);
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.72), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,.62), rgba(255,230,248,.38), rgba(235,248,255,.38));
  box-shadow:0 14px 38px rgba(190,128,205,.14), inset 0 0 0 1px rgba(255,255,255,.42);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.overlay-menu-card:hover{
  transform:translateY(-4px);
  border-color:rgba(208,132,214,.34);
  box-shadow:0 22px 50px rgba(190,128,205,.20), inset 0 0 0 1px rgba(255,255,255,.58);
}
.overlay-menu-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  padding:26px 26px 82px;
  opacity:.96;
  filter:drop-shadow(0 18px 24px rgba(155,100,185,.18));
  transform:scale(1.02);
  transition:transform .25s ease, opacity .25s ease;
}
.overlay-menu-card:hover .overlay-menu-img{
  transform:scale(1.07);
  opacity:1;
}
.overlay-menu-footer{
  position:absolute;
  left:14px;
  right:14px;
  bottom:14px;
  min-height:70px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:14px 16px;
  border-radius:20px;
  background:linear-gradient(145deg, rgba(255,255,255,.74), rgba(255,238,251,.58), rgba(236,248,255,.52));
  border:1px solid rgba(220,150,210,.22);
  box-shadow:0 10px 24px rgba(172,112,190,.14), inset 0 0 0 1px rgba(255,255,255,.48);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
}
.overlay-menu-footer strong{
  display:block;
  margin:0 0 3px !important;
  color:#25172f !important;
  font-size:20px !important;
  letter-spacing:-.04em;
}
.overlay-menu-footer span{
  display:block;
  color:#7a5088 !important;
  font-size:13px;
  line-height:1.45;
}

/* When image file is not copied yet */
.overlay-menu-card.is-missing:before{
  content:"";
  position:absolute;
  inset:26px 26px 96px;
  border-radius:22px;
  background:
    radial-gradient(circle at 28% 28%, rgba(255,255,255,.52), transparent 30%),
    linear-gradient(135deg, rgba(232,137,197,.18), rgba(105,201,239,.16));
  border:1px dashed rgba(202,140,210,.24);
}
.overlay-menu-card.is-missing:after{
  content:"이미지 준비중";
  position:absolute;
  left:50%;
  top:42%;
  transform:translate(-50%, -50%);
  color:#9a6098;
  font-size:13px;
  font-weight:800;
  letter-spacing:.04em;
}
.overlay-menu-card.is-missing .overlay-menu-img{
  display:none;
}

@media (max-width:1200px){
  .overlay-service-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
@media (max-width:768px){
  .brand-text{
    gap:2px;
  }
  .hero-left-card h1{
    font-size:clamp(36px, 11vw, 48px) !important;
  }
  .hero-left-card h1 small{
    margin-top:2px !important;
    font-size:clamp(18px, 6vw, 28px) !important;
  }
  .overlay-service-grid{
    grid-template-columns:1fr;
  }
  .overlay-menu-card{
    min-height:210px;
  }
  .overlay-menu-img{
    padding:22px 22px 78px;
  }
}


/* ─────────────────────────────────────────────
   Home main fix #3
   1) UI5 For ABAP 한 줄 유지
   2) 핵심 메뉴 카드 하단 문구 박스 경계 제거
───────────────────────────────────────────── */

/* Hero title: UI5 For ABAP을 한 줄로 붙여서 표현 */
.hero-left-card h1{
  max-width:none !important;
  font-size:clamp(42px, 5.1vw, 64px) !important;
  line-height:.98 !important;
  white-space:nowrap;
}
.hero-left-card h1 span{
  display:inline !important;
  white-space:nowrap;
}
.hero-left-card h1 small{
  display:inline-block !important;
  margin-left:.28em !important;
  margin-top:0 !important;
  font-size:clamp(18px, 2.2vw, 28px) !important;
  vertical-align:baseline;
  white-space:nowrap;
}

/* 핵심 메뉴: 문구 영역 박스 느낌 제거, 이미지 위에 자연스럽게 오버레이 */
.overlay-menu-footer{
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  min-height:96px !important;
  padding:42px 22px 20px !important;
  border:0 !important;
  border-radius:0 !important;
  background:linear-gradient(
    180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,245,253,.50) 38%,
    rgba(255,245,253,.82) 100%
  ) !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.overlay-menu-footer strong{
  margin:0 0 4px !important;
  text-shadow:0 1px 0 rgba(255,255,255,.45);
}
.overlay-menu-footer span{
  text-shadow:0 1px 0 rgba(255,255,255,.38);
}
.overlay-menu-img{
  padding:26px 26px 92px !important;
}
.overlay-menu-card:hover .overlay-menu-footer{
  background:linear-gradient(
    180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,243,253,.56) 36%,
    rgba(255,243,253,.88) 100%
  ) !important;
}

/* 이미지 없는 경우도 경계선 박스보다 부드럽게 */
.overlay-menu-card.is-missing:before{
  border:0 !important;
  background:
    radial-gradient(circle at 32% 35%, rgba(255,255,255,.62), transparent 34%),
    linear-gradient(135deg, rgba(232,137,197,.15), rgba(105,201,239,.14)) !important;
}
.overlay-menu-card.is-missing:after{
  top:38% !important;
}

@media (max-width:768px){
  .hero-left-card h1{
    white-space:normal;
    font-size:clamp(36px, 10vw, 48px) !important;
  }
  .hero-left-card h1 span{
    display:block !important;
  }
  .hero-left-card h1 small{
    display:block !important;
    margin-left:0 !important;
    margin-top:2px !important;
    font-size:clamp(18px, 5.5vw, 26px) !important;
  }
  .overlay-menu-footer{
    min-height:88px !important;
    padding:36px 18px 18px !important;
  }
  .overlay-menu-img{
    padding:22px 22px 84px !important;
  }
}


/* ─────────────────────────────────────────────
   Home main fix #4
   Hero title clipping / Workspace spacing refinement
───────────────────────────────────────────── */

/* P가 우측에서 살짝 잘리는 현상 방지 */
.hero-left-card{
  overflow:hidden;
}
.legacy-hero-title{
  max-width:100%;
  overflow:visible;
}
.hero-left-card h1{
  width:100%;
  max-width:100%;
  padding-right:.12em;
  padding-bottom:.04em;
  overflow:visible;
  font-size:clamp(38px, 4.75vw, 58px) !important;
  line-height:.94 !important;
}

/* PC에서는 UI5 For ABAP과 Workspace가 한 문맥처럼 붙어 보이도록 */
.hero-left-card h1 span{
  display:inline !important;
  white-space:nowrap;
}
.hero-left-card h1 small{
  display:inline-block !important;
  margin-left:.24em !important;
  margin-top:0 !important;
  font-size:clamp(19px, 2.05vw, 26px) !important;
  line-height:.95 !important;
  vertical-align:baseline;
  white-space:nowrap;
  transform:translateY(-.02em);
}

/* 좁은 화면에서만 줄바꿈하되, 줄 간격은 붙여서 한 문맥처럼 보이게 */
@media (max-width:768px){
  .hero-left-card h1{
    font-size:clamp(36px, 10vw, 48px) !important;
    line-height:.92 !important;
    padding-right:.08em;
  }
  .hero-left-card h1 span{
    display:block !important;
    white-space:normal;
  }
  .hero-left-card h1 small{
    display:block !important;
    margin-left:0 !important;
    margin-top:-.08em !important;
    font-size:clamp(19px, 5.8vw, 27px) !important;
    line-height:.9 !important;
    transform:none;
  }
}

@media (max-width:480px){
  .hero-left-card h1{
    font-size:clamp(34px, 11vw, 44px) !important;
  }
  .hero-left-card h1 small{
    margin-top:-.12em !important;
  }
}


/* ─────────────────────────────────────────────
   Home main fix #5
   Workspace subtitle tighter to UI5 For ABAP
───────────────────────────────────────────── */

/* Workspace가 UI5 For ABAP과 더 붙어 보이도록 위로 당김 */
.hero-left-card h1{
  line-height:.88 !important;
}
.hero-left-card h1 small{
  margin-top:-.22em !important;
  transform:translateY(-.12em) !important;
}

/* PC에서 한 줄로 들어갈 수 있는 경우에도 Workspace가 아래로 벌어지지 않게 */
@media (min-width:769px){
  .hero-left-card h1 small{
    margin-left:.24em !important;
    vertical-align:baseline;
  }
}

/* 모바일/좁은 화면: 줄바꿈 상태에서 더 강하게 붙임 */
@media (max-width:768px){
  .hero-left-card h1{
    line-height:.86 !important;
  }
  .hero-left-card h1 small{
    margin-top:-.26em !important;
    transform:translateY(-.08em) !important;
  }
}

@media (max-width:480px){
  .hero-left-card h1 small{
    margin-top:-.30em !important;
  }
}


/* ─────────────────────────────────────────────
   Footer polish
   Copyright / SAP trademark 영역을 가운데 정렬하고
   홈페이지 톤에 맞는 프리미엄 글래스 푸터로 정리
───────────────────────────────────────────── */
.site-footer{
  position:relative;
  justify-content:center !important;
  text-align:center;
  padding:28px 32px 30px !important;
  border-radius:30px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.58), transparent 38%),
    linear-gradient(145deg, rgba(255,255,255,.66), rgba(255,234,249,.45), rgba(235,248,255,.42)) !important;
  border:1px solid rgba(220,150,210,.24) !important;
  box-shadow:0 16px 46px rgba(190,128,205,.13), inset 0 0 0 1px rgba(255,255,255,.48);
  overflow:hidden;
}
.site-footer:before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:220px;
  height:3px;
  transform:translateX(-50%);
  border-radius:999px;
  background:linear-gradient(90deg, rgba(69,196,232,0), rgba(69,196,232,.75), rgba(141,127,234,.72), rgba(236,131,183,.74), rgba(236,131,183,0));
}
.site-footer:after{
  content:"U4A Workspace";
  display:block;
  position:absolute;
  left:50%;
  top:22px;
  transform:translateX(-50%);
  font-size:11px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#b35f9a;
  opacity:.72;
}
.site-footer > div{
  display:grid;
  justify-items:center;
  gap:8px;
  padding-top:20px;
  max-width:900px;
}
.site-footer p{
  margin:0 !important;
  color:#7f5a8b;
  font-size:13px !important;
  line-height:1.65;
}
.site-footer p:first-child{
  color:#3b243f;
  font-size:14px !important;
  font-weight:850;
  letter-spacing:.02em;
}
.site-footer p:nth-child(2){
  max-width:760px;
  color:#8b6a96;
}
.site-footer .footer-map-link{
  position:absolute;
  right:22px;
  top:50%;
  transform:translateY(-50%);
  min-height:38px;
  padding:0 15px;
  border-radius:999px;
  font-size:12px;
  background:rgba(255,255,255,.52);
}
.site-footer .footer-map-link:hover{
  transform:translateY(-50%) translateY(-1px);
}
@media (max-width:768px){
  .site-footer{
    padding:26px 20px 24px !important;
  }
  .site-footer:after{
    position:relative;
    left:auto;
    top:auto;
    transform:none;
    order:-1;
    margin-bottom:6px;
  }
  .site-footer > div{
    padding-top:0;
  }
  .site-footer .footer-map-link{
    position:relative;
    right:auto;
    top:auto;
    transform:none;
    justify-self:center;
    margin-top:14px;
  }
  .site-footer .footer-map-link:hover{
    transform:translateY(-1px);
  }
}


/* ─────────────────────────────────────────────
   Home motion polish
   1) information 카드 hover 확대 애니메이션
   2) footer 찾아오시는 길 버튼 사이즈 개선
   3) Hero title 빛 반사 애니메이션
   4) Hero 하단 wave 라인 전체 폭 연결
───────────────────────────────────────────── */

/* 1. U4A Workspace information 카드 hover 모션 */
.info-card-grid .info-link-card{
  transform:translateY(0) scale(1);
  transition:
    transform .24s cubic-bezier(.2,.8,.2,1),
    box-shadow .24s ease,
    border-color .24s ease,
    background .24s ease;
  will-change:transform;
}
.info-card-grid .info-link-card:hover{
  transform:translateY(-6px) scale(1.025);
  border-color:rgba(211,132,213,.36);
  box-shadow:
    0 22px 52px rgba(190,128,205,.20),
    inset 0 0 0 1px rgba(255,255,255,.60);
}
.info-card-grid .info-link-card:hover .legacy-thumb img,
.info-card-grid .info-link-card:hover .info-icon{
  transform:scale(1.08);
}
.info-card-grid .legacy-thumb img,
.info-card-grid .info-icon{
  transition:transform .24s cubic-bezier(.2,.8,.2,1), filter .24s ease;
}
.info-card-grid .info-link-card:hover .legacy-thumb img{
  filter:drop-shadow(0 18px 26px rgba(160,100,190,.22));
}

/* 2. Footer 찾아오시는 길 버튼 사이즈 및 존재감 개선 */
.site-footer .footer-map-link{
  min-height:46px !important;
  padding:0 22px !important;
  font-size:13px !important;
  font-weight:850;
  border-radius:16px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.74), rgba(255,234,249,.58), rgba(235,248,255,.54)) !important;
  border:1px solid rgba(220,150,210,.28) !important;
  box-shadow:
    0 10px 24px rgba(190,128,205,.15),
    inset 0 0 0 1px rgba(255,255,255,.56);
}
.site-footer .footer-map-link:after{
  content:" ↗";
  font-weight:900;
  color:#b25b9c;
}
.site-footer .footer-map-link:hover{
  background:
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,229,248,.70), rgba(228,247,255,.68)) !important;
  box-shadow:
    0 16px 30px rgba(190,128,205,.20),
    inset 0 0 0 1px rgba(255,255,255,.64);
}

/* 3. Hero 타이틀 빛 반사 효과 */
.hero-left-card h1{
  position:relative;
  display:inline-block;
  overflow:hidden;
  isolation:isolate;
}
.hero-left-card h1:after{
  content:"";
  position:absolute;
  z-index:2;
  top:-20%;
  bottom:-20%;
  left:-45%;
  width:34%;
  background:linear-gradient(
    105deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.18) 34%,
    rgba(255,255,255,.78) 50%,
    rgba(255,255,255,.18) 66%,
    rgba(255,255,255,0) 100%
  );
  transform:skewX(-18deg) translateX(-130%);
  filter:blur(.2px);
  opacity:.78;
  animation:u4aTitleShine 4.8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes u4aTitleShine{
  0%, 18%{transform:skewX(-18deg) translateX(-140%);opacity:0}
  32%{opacity:.84}
  52%{transform:skewX(-18deg) translateX(430%);opacity:.50}
  63%, 100%{transform:skewX(-18deg) translateX(430%);opacity:0}
}
.hero-left-card h1 span,
.hero-left-card h1 small{
  position:relative;
  z-index:1;
}

/* 4. Hero 하단 물결 라인이 박스 끝까지 이어지게 확장 */
.wave-lines{
  left:0 !important;
  right:0 !important;
  bottom:-2px !important;
  width:100% !important;
  height:210px !important;
  opacity:.96;
  mask-image:linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
}
.wave-lines:before,
.wave-lines:after{
  left:-8% !important;
  right:-8% !important;
  width:116% !important;
  height:190px !important;
  background-size:100% 100% !important;
}
.hero-frame{
  overflow:hidden;
}

/* 카드 확대 시 모바일에서 과하지 않게 */
@media (max-width:768px){
  .info-card-grid .info-link-card:hover{
    transform:translateY(-3px) scale(1.012);
  }
  .site-footer .footer-map-link{
    min-height:44px !important;
    padding:0 20px !important;
    border-radius:15px !important;
  }
  .hero-left-card h1:after{
    animation-duration:5.6s;
  }
  .wave-lines{
    height:110px !important;
  }
  .wave-lines:before,
  .wave-lines:after{
    left:-12% !important;
    right:-12% !important;
    width:124% !important;
    height:105px !important;
  }
}


/* ─────────────────────────────────────────────
   Home motion fix #2
   1) information hover 시 이미지 라운드 유지
   2) Hero title 빛 반사 효과를 텍스트 자체 shimmer로 복구
   3) 스크롤 시 상단 메뉴 border 강조
───────────────────────────────────────────── */

/* 1. U4A Workspace information: hover 확대 시 이미지 각짐 방지 */
.legacy-main-grid .legacy-thumb{
  border-radius:50% !important;
  overflow:hidden !important;
  isolation:isolate;
}
.legacy-main-grid .legacy-thumb img{
  border-radius:50% !important;
  clip-path:circle(50% at 50% 50%);
  transform-origin:center center;
}
.info-card-grid .info-link-card:hover .legacy-thumb{
  border-radius:50% !important;
}
.info-card-grid .info-link-card:hover .legacy-thumb img{
  border-radius:50% !important;
  clip-path:circle(50% at 50% 50%);
}

/* 2. Hero title: pseudo shine 때문에 타이틀이 가려지는 문제 방지 */
/* 기존 ::after 빛 반사는 끄고, 글자 그라데이션 자체를 움직여 빛 반사처럼 표현 */
.hero-left-card h1{
  overflow:visible !important;
}
.hero-left-card h1:after{
  display:none !important;
  content:none !important;
}
.hero-left-card h1 span,
.hero-left-card h1 small{
  background:
    linear-gradient(
      100deg,
      #42bee7 0%,
      #7397e8 22%,
      #a585e7 38%,
      #ffffff 48%,
      #e785bd 58%,
      #a585e7 72%,
      #42bee7 100%
    );
  background-size:260% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;
  animation:u4aTitleTextShimmer 5.2s ease-in-out infinite;
}
.hero-left-card h1 small{
  animation-delay:.08s;
}
@keyframes u4aTitleTextShimmer{
  0%, 20%{
    background-position:0% 50%;
    filter:drop-shadow(0 0 0 rgba(255,255,255,0));
  }
  42%{
    background-position:100% 50%;
    filter:drop-shadow(0 0 10px rgba(255,255,255,.24));
  }
  62%, 100%{
    background-position:0% 50%;
    filter:drop-shadow(0 0 0 rgba(255,255,255,0));
  }
}

/* 3. 스크롤 시 상단 메뉴 영역 border 강조 */
.glass-header.is-scrolled{
  border-color:rgba(180,112,210,.46) !important;
  box-shadow:
    0 14px 44px rgba(190,128,205,.24),
    0 0 0 1px rgba(255,255,255,.62) inset,
    0 0 0 1px rgba(139,197,240,.16) !important;
}
.glass-header.is-scrolled:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(69,196,232,.34), rgba(236,131,183,.26), rgba(169,133,238,.30));
  opacity:.16;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  padding:1px;
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}

@media (max-width:768px){
  .hero-left-card h1 span,
  .hero-left-card h1 small{
    animation-duration:6.2s;
  }
}


/* ─────────────────────────────────────────────
   Home motion fix #3
   1) ABAP P clipping 완전 방지
   2) 타이틀 shimmer 한쪽 방향으로만 흐르게 변경
   3) wave line이 hero title 카드 뒤로 지나가도록 z-index 정리
───────────────────────────────────────────── */

/* 1. UI5 For ABAP의 P가 잘리지 않도록 타이틀 영역 여유 확보 */
.hero-left-card{
  overflow:visible !important;
}
.hero-left-card h1{
  display:block !important;
  width:max-content !important;
  max-width:calc(100% + 28px) !important;
  padding-right:.42em !important;
  padding-bottom:.08em !important;
  margin-right:-.28em !important;
  overflow:visible !important;
  contain:none !important;
}
.hero-left-card h1 span,
.hero-left-card h1 small{
  overflow:visible !important;
  padding-right:.06em;
}

/* 2. 빛 반사 방향을 좌 → 우 한 방향으로만 */
.hero-left-card h1 span,
.hero-left-card h1 small{
  background:
    linear-gradient(
      105deg,
      #42bee7 0%,
      #7397e8 26%,
      #a585e7 40%,
      #ffffff 50%,
      #e785bd 60%,
      #a585e7 76%,
      #42bee7 100%
    );
  background-size:260% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;
  animation:u4aTitleShimmerOneWay 4.8s cubic-bezier(.4,0,.2,1) infinite !important;
}
.hero-left-card h1 small{
  animation-delay:.08s !important;
}
@keyframes u4aTitleShimmerOneWay{
  0%{
    background-position:-160% 50%;
    filter:drop-shadow(0 0 0 rgba(255,255,255,0));
  }
  18%{
    background-position:-160% 50%;
    filter:drop-shadow(0 0 0 rgba(255,255,255,0));
  }
  52%{
    background-position:120% 50%;
    filter:drop-shadow(0 0 10px rgba(255,255,255,.24));
  }
  100%{
    background-position:120% 50%;
    filter:drop-shadow(0 0 0 rgba(255,255,255,0));
  }
}

/* 3. 중앙 wave line을 hero card 뒤 레이어로 정리 */
.hero-frame{
  isolation:isolate;
}
.hero-overlay{
  z-index:0 !important;
}
.hero-visual{
  z-index:1 !important;
  pointer-events:none;
}
.wave-lines{
  z-index:1 !important;
  opacity:.52 !important;
  mix-blend-mode:multiply;
}
.network-ring,
.energy-orb{
  z-index:2 !important;
}
.feature-stack{
  z-index:4 !important;
  pointer-events:auto;
}
.hero-left-card{
  z-index:5 !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,239,251,.46), rgba(239,248,255,.40)) !important;
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
}
/* 카드 뒤쪽에서 선이 살짝 비치도록 너무 불투명한 내부 shine은 약하게 */
.hero-left-card:after{
  opacity:.46 !important;
  z-index:0 !important;
}
.hero-left-card > *{
  position:relative;
  z-index:2;
}

@media (max-width:768px){
  .hero-left-card h1{
    width:auto !important;
    max-width:100% !important;
    margin-right:0 !important;
    padding-right:.16em !important;
  }
  .wave-lines{
    opacity:.44 !important;
  }
}


/* ─────────────────────────────────────────────
   Home CTA link refactor
   Hero 버튼을 실제 페이지 이동 링크로 정리
───────────────────────────────────────────── */
.hero-actions .btn{
  text-decoration:none;
  cursor:pointer;
  user-select:none;
}
.hero-actions .btn.primary{
  color:#fff;
}
.hero-actions .btn.ghost{
  color:#6d4280;
}
.hero-actions .btn:focus-visible{
  outline:3px solid rgba(80,190,230,.36);
  outline-offset:3px;
}


/* ─────────────────────────────────────────────
   Mobile menu desktop reset
   모바일 팝업 메뉴가 열린 상태로 데스크톱 폭에 진입했을 때
   CSS 레벨에서도 강제로 데스크톱 네비게이션 상태로 복구
───────────────────────────────────────────── */
@media (min-width:1025px){
  .mobile-menu,
  .mobile-nav,
  .nav-drawer,
  .drawer{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:none !important;
  }

  .site-nav,
  .global-nav,
  .header-nav{
    display:flex !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:none !important;
  }

  .menu-toggle,
  .nav-toggle,
  .hamburger{
    display:none !important;
  }

  body.menu-open,
  body.nav-open,
  body.drawer-open,
  body.is-menu-open{
    overflow:auto !important;
  }
}


/* ─────────────────────────────────────────────
   Mobile drawer desktop force reset
   .mobile-drawer.is-open이 남아 있어도 PC 폭에서는 무조건 숨긴다.
───────────────────────────────────────────── */
@media (min-width:1025px){
  [data-mobile-menu],
  .mobile-drawer,
  .mobile-drawer.is-open{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translateX(16px) !important;
  }

  [data-menu-toggle],
  .menu-toggle{
    display:none !important;
  }

  .desktop-nav{
    display:flex !important;
  }
}


/* ─────────────────────────────────────────────
   Mobile hero title spacing fix
   모바일에서 UI5 For ABAP / Workspace가 겹쳐 보이는 문제 보정
───────────────────────────────────────────── */
@media (max-width:768px){
  .hero-left-card h1{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    line-height:.96 !important;
    padding-bottom:.12em !important;
  }

  .hero-left-card h1 span{
    display:block !important;
    line-height:.96 !important;
    white-space:nowrap !important;
  }

  .hero-left-card h1 small{
    display:block !important;
    margin-left:0 !important;
    margin-top:.10em !important;
    line-height:1.05 !important;
    transform:none !important;
    white-space:nowrap !important;
  }
}

@media (max-width:480px){
  .hero-left-card h1{
    font-size:clamp(36px, 12vw, 52px) !important;
    line-height:.96 !important;
  }

  .hero-left-card h1 small{
    margin-top:.12em !important;
    font-size:clamp(20px, 6.5vw, 30px) !important;
    line-height:1.05 !important;
  }
}

/* ─────────────────────────────────────────────
   U4A Workspace guide document launcher
   u4aide_guide.html 전용: 이미지 갤러리 대신 공식 도움말 문서 진입 카드 구성
───────────────────────────────────────────── */
.guide-doc-card{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(280px,.95fr);
  gap:26px;
  align-items:center;
  overflow:hidden;
  padding:30px;
}

.guide-doc-card:before{
  content:"";
  position:absolute;
  inset:-45% -18% auto auto;
  width:420px;
  height:420px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(150,225,255,.34), rgba(225,120,210,.16) 48%, transparent 72%);
  pointer-events:none;
}

.guide-doc-copy,
.guide-doc-preview{
  position:relative;
  z-index:1;
}

.guide-doc-kicker{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 12px;
  border-radius:999px;
  background:rgba(255,255,255,.56);
  color:#8a3f9a;
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);
}

.guide-doc-copy h3{
  margin:16px 0 10px;
  color:#2a1030;
  font-size:clamp(26px,3.2vw,42px);
  line-height:1.12;
  letter-spacing:-.045em;
}

.guide-doc-copy p{
  margin:0;
  max-width:660px;
  color:#6a3878;
  font-size:16px;
  line-height:1.72;
}

.guide-doc-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:22px;
}

.guide-doc-actions .primary-btn,
.guide-doc-actions .ghost-btn{
  border:0;
  cursor:pointer;
  text-decoration:none;
}

.guide-doc-preview{
  min-height:300px;
  padding:24px;
  border-radius:28px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.74), rgba(255,255,255,.34)),
    radial-gradient(circle at 78% 16%, rgba(98,210,255,.28), transparent 42%),
    radial-gradient(circle at 18% 88%, rgba(223,106,204,.24), transparent 42%);
  box-shadow:0 24px 70px rgba(126,60,140,.16), inset 0 0 0 1px rgba(255,255,255,.66);
}

.guide-doc-browser{
  display:flex;
  gap:8px;
  padding:0 0 20px;
}

.guide-doc-browser span{
  width:11px;
  height:11px;
  border-radius:999px;
  background:rgba(130,70,150,.28);
}

.guide-doc-lines{
  display:grid;
  gap:12px;
  margin:2px 0 24px;
}

.guide-doc-lines i{
  display:block;
  height:14px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(80,200,240,.24), rgba(220,110,190,.18), rgba(255,255,255,.34));
}

.guide-doc-lines i:nth-child(1){width:82%;height:22px}
.guide-doc-lines i:nth-child(2){width:96%}
.guide-doc-lines i:nth-child(3){width:76%}
.guide-doc-lines i:nth-child(4){width:88%}
.guide-doc-lines i:nth-child(5){width:58%}

.guide-doc-preview strong{
  display:block;
  color:#2a1030;
  font-size:26px;
  letter-spacing:-.035em;
}

.guide-doc-preview small{
  display:block;
  margin-top:6px;
  color:#8a5090;
  font-weight:800;
}

@media (max-width:1024px){
  .guide-doc-card{
    grid-template-columns:1fr;
  }
}

@media (max-width:768px){
  .guide-doc-card{
    padding:20px;
    border-radius:24px;
  }

  .guide-doc-preview{
    min-height:220px;
    padding:20px;
    border-radius:22px;
  }

  .guide-doc-actions .primary-btn,
  .guide-doc-actions .ghost-btn{
    width:100%;
    justify-content:center;
  }
}

/* ─────────────────────────────────────────────
   U4A Workspace guide page renewal
   Workspace 2.0 / 3.0 도움말 카드 분리
───────────────────────────────────────────── */
.guide-doc-split{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:24px;
  align-items:stretch;
}

.guide-version-card{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:100%;
  padding:28px;
  border-radius:30px;
}

.guide-version-card:before{
  content:"";
  position:absolute;
  inset:-120px -120px auto auto;
  width:320px;
  height:320px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(151,220,255,.36), rgba(224,113,202,.15) 52%, transparent 72%);
  pointer-events:none;
}

.guide-version-card:after{
  content:"";
  position:absolute;
  inset:auto auto -90px -80px;
  width:240px;
  height:240px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(255,255,255,.64), rgba(115,207,245,.14) 48%, transparent 70%);
  pointer-events:none;
}

.guide-version-copy,
.legacy-guide-gallery,
.guide-version-card .guide-doc-preview{
  position:relative;
  z-index:1;
}

.guide-version-copy h3{
  margin:16px 0 10px;
  color:#2a1030;
  font-size:clamp(25px, 2.5vw, 36px);
  line-height:1.14;
  letter-spacing:-.045em;
}

.guide-version-copy p{
  margin:0;
  color:#6a3878;
  font-size:16px;
  line-height:1.72;
  word-break:keep-all;
}

.legacy-guide-gallery{
  margin-top:24px;
  max-height:430px;
  overflow:auto;
  display:grid;
  gap:16px;
  padding:6px 8px 6px 0;
  scrollbar-width:thin;
  scrollbar-color:rgba(142,77,170,.46) rgba(255,255,255,.38);
}

.legacy-guide-gallery::-webkit-scrollbar{
  width:10px;
}

.legacy-guide-gallery::-webkit-scrollbar-track{
  border-radius:999px;
  background:rgba(255,255,255,.42);
}

.legacy-guide-gallery::-webkit-scrollbar-thumb{
  border:2px solid rgba(255,255,255,.58);
  border-radius:999px;
  background:linear-gradient(180deg, rgba(92,198,242,.72), rgba(202,93,193,.68));
}

.legacy-guide-gallery figure{
  margin:0;
  padding:12px;
  border-radius:22px;
  background:rgba(255,255,255,.55);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.58), 0 16px 34px rgba(98,43,120,.08);
}

.legacy-guide-gallery img{
  display:block;
  width:100%;
  max-height:320px;
  object-fit:contain;
  border-radius:16px;
  background:#fff;
}

.legacy-guide-gallery figcaption{
  margin-top:9px;
  color:#70407c;
  font-size:13px;
  font-weight:800;
}

.guide-version-30 .guide-doc-preview{
  margin-top:24px;
  min-height:330px;
}

.guide-new-window-btn{
  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:46px;
  padding:0 18px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(255,255,255,.76), rgba(255,255,255,.46));
  box-shadow:0 16px 34px rgba(99,43,126,.12), inset 0 0 0 1px rgba(255,255,255,.76);
  color:#73368b;
  font-weight:900;
  transition:transform .2s ease, box-shadow .2s ease;
}

.guide-new-window-btn:before{
  content:"";
  position:absolute;
  inset:0 auto 0 -45%;
  width:42%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.68), transparent);
  transform:skewX(-18deg);
  transition:left .42s ease;
}

.guide-new-window-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 42px rgba(99,43,126,.16), inset 0 0 0 1px rgba(255,255,255,.9);
}

.guide-new-window-btn:hover:before{
  left:112%;
}

.guide-new-window-btn i{
  display:inline-grid;
  place-items:center;
  width:26px;
  height:26px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(86,196,242,.22), rgba(221,97,195,.22));
  font-style:normal;
}

@media (max-width:1100px){
  .guide-doc-split{
    grid-template-columns:1fr;
  }

  .legacy-guide-gallery{
    max-height:360px;
  }
}

@media (max-width:768px){
  .guide-version-card{
    padding:20px;
    border-radius:24px;
  }

  .guide-version-30 .guide-doc-preview{
    min-height:230px;
  }
}

/* ─────────────────────────────────────────────
   U4A Workspace 2.0 guide thumbnail preview
   기존 PHP → HTML 변환본의 개발 가이드 미리보기 썸네일을 2.0 카드 내부로 이전
───────────────────────────────────────────── */
.guide-version-card .guide-doc-kicker{
  display:block;
  min-height:0;
  padding:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  color:#8a3f9a;
  font-size:clamp(23px, 2.1vw, 34px);
  font-weight:950;
  line-height:1.08;
  letter-spacing:-.035em;
  text-transform:none;
}

.legacy-guide-preview{
  position:relative;
  z-index:1;
  margin-top:26px;
  padding:18px;
  border-radius:26px;
  background:linear-gradient(135deg, rgba(255,255,255,.64), rgba(255,255,255,.36));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.62), 0 18px 42px rgba(98,43,120,.08);
}

.legacy-guide-preview-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:16px;
}

.legacy-guide-preview-head span{
  display:block;
  color:#9c55a4;
  font-size:12px;
  font-weight:900;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.legacy-guide-preview-head strong{
  display:block;
  margin-top:5px;
  color:#2a1030;
  font-size:clamp(22px, 2.05vw, 30px);
  line-height:1.18;
  letter-spacing:-.035em;
}

.legacy-guide-preview-head p{
  margin:0;
  max-width:280px;
  color:#7c4a88;
  font-size:14px;
  line-height:1.55;
  text-align:right;
  word-break:keep-all;
}

.legacy-guide-gallery{
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
  max-height:470px;
  padding:4px 8px 4px 0;
}

.legacy-guide-thumb{
  margin:0;
  overflow:hidden;
  border-radius:22px;
  background:rgba(255,255,255,.68);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.64), 0 14px 30px rgba(98,43,120,.08);
}

.legacy-guide-thumb a{
  display:block;
  aspect-ratio:16/10;
  background:linear-gradient(135deg, rgba(80,200,240,.12), rgba(220,110,190,.12));
}

.legacy-guide-thumb img{
  display:block;
  width:100%;
  height:100%;
  max-height:none;
  object-fit:cover;
  border-radius:0;
  transition:transform .28s ease, filter .28s ease;
}

.legacy-guide-thumb:hover img{
  transform:scale(1.035);
  filter:saturate(1.06) contrast(1.02);
}

.legacy-guide-thumb figcaption{
  margin:0;
  padding:12px 13px 14px;
}

.legacy-guide-thumb figcaption strong{
  display:block;
  color:#2a1030;
  font-size:15px;
  letter-spacing:-.015em;
}

.legacy-guide-thumb figcaption span{
  display:block;
  margin-top:4px;
  color:#8a5090;
  font-size:12px;
  line-height:1.4;
}

@media (max-width:640px){
  .guide-version-card .guide-doc-kicker{
    font-size:22px;
  }

  .legacy-guide-preview{
    padding:14px;
    border-radius:22px;
  }

  .legacy-guide-preview-head{
    display:block;
  }

  .legacy-guide-preview-head p{
    max-width:none;
    margin-top:8px;
    text-align:left;
  }

  .legacy-guide-gallery{
    grid-template-columns:1fr;
    max-height:420px;
  }
}
.legacy-guide-gallery .legacy-guide-thumb{padding:0;}

.guide-expire-note{
  margin-top:16px;
  color:#7a3c84;
  font-size:15px;
  line-height:1.72;
  font-weight:850;
  word-break:keep-all;
}

.workspace-preview-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:28px;
  background:rgba(6, 12, 28, .74);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.workspace-preview-modal.is-open{
  display:flex;
}

.workspace-preview-modal__inner{
  position:relative;
  width:min(1120px, 96vw);
  max-height:92vh;
  padding:16px;
  border-radius:28px;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 30px 100px rgba(0,0,0,.45);
  animation:workspacePreviewZoom 180ms ease-out;
}

.workspace-preview-modal__img{
  display:block;
  width:100%;
  max-height:calc(92vh - 32px);
  object-fit:contain;
  border-radius:20px;
  background:rgba(255,255,255,.08);
}

.workspace-preview-modal__close{
  position:absolute;
  top:-14px;
  right:-14px;
  width:44px;
  height:44px;
  border:0;
  border-radius:50%;
  color:#fff;
  font-size:24px;
  line-height:1;
  cursor:pointer;
  background:rgba(18,24,42,.92);
  box-shadow:0 12px 34px rgba(0,0,0,.34);
}

body.workspace-preview-lock{
  overflow:hidden;
}

@keyframes workspacePreviewZoom{
  from{opacity:0; transform:scale(.96);}
  to{opacity:1; transform:scale(1);}
}

@media (max-width:640px){
  .workspace-preview-modal{
    padding:14px;
  }

  .workspace-preview-modal__inner{
    padding:10px;
    border-radius:20px;
  }

  .workspace-preview-modal__close{
    top:8px;
    right:8px;
  }
}


/* ─────────────────────────────────────────────
   License Skill page polish
   - 기술 카드 라이선스 외부 링크 버튼 정렬
───────────────────────────────────────────── */
.skill-license-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}
.skill-license-actions .ghost-btn{
  min-height:42px;
  padding:0 16px;
  border-radius:14px;
  font-size:12px;
  letter-spacing:.02em;
  text-transform:uppercase;
}
@media (max-width:768px){
  .skill-license-actions .ghost-btn{
    width:100%;
  }
}

/* ─────────────────────────────────────────────
   Technology page
   관련기술 페이지 전용 카드/링크 뷰
───────────────────────────────────────────── */
.technology-page .sub-hero{
  overflow:hidden;
}
.technology-page .sub-hero p:not(.eyebrow){
  max-width:820px;
  line-height:1.72;
  word-break:keep-all;
}
.technology-overview-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
}
.technology-overview-card{
  position:relative;
  min-height:210px;
  padding:26px;
  overflow:hidden;
  border-radius:28px;
}
.technology-overview-card:before{
  content:"";
  position:absolute;
  inset:auto -18% -38% 30%;
  height:132px;
  border-radius:50%;
  background:linear-gradient(90deg, rgba(232,137,197,.18), rgba(105,201,239,.16));
  filter:blur(22px);
  transform:rotate(-12deg);
  pointer-events:none;
}
.technology-overview-card span{
  position:relative;
  display:inline-grid;
  place-items:center;
  min-width:54px;
  height:36px;
  padding:0 12px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(229,126,197,.22), rgba(98,201,239,.18));
  border:1px solid rgba(220,150,210,.24);
  color:#8a3888;
  font-size:12px;
  font-weight:950;
  letter-spacing:.12em;
}
.technology-overview-card h3{
  position:relative;
  margin:22px 0 10px;
  color:#2a1030;
  font-size:26px;
  line-height:1.12;
  letter-spacing:-.052em;
}
.technology-overview-card p{
  position:relative;
  margin:0;
  color:#744582;
  line-height:1.68;
  word-break:keep-all;
}
.technology-dynamic-list{
  display:grid;
  gap:28px;
  min-height:160px;
}
.technology-list-loading{
  margin:0;
  padding:28px;
  border-radius:26px;
  background:rgba(255,255,255,.50);
  border:1px solid rgba(220,150,210,.20);
  color:#8a5090;
  font-size:14px;
  font-weight:850;
  text-align:center;
}
.technology-group{
  display:grid;
  gap:14px;
}
.technology-group-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  padding:0 4px;
}
.technology-group-head p{
  margin:0;
  color:#c060b0;
  font-size:12px;
  font-weight:950;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.technology-group-head h3{
  margin:6px 0 0;
  color:#2a1030;
  font-size:clamp(24px,3vw,34px);
  line-height:1.08;
  letter-spacing:-.052em;
}
.technology-group-head > span{
  max-width:520px;
  color:#7a5088;
  font-size:14px;
  line-height:1.62;
  text-align:right;
  word-break:keep-all;
}
.technology-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
}
.technology-card{
  position:relative;
  min-height:148px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:18px;
  padding:22px;
  border-radius:26px;
  text-decoration:none;
  overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.technology-card:before{
  content:"";
  position:absolute;
  inset:-42% auto auto -18%;
  width:180px;
  height:180px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.64), rgba(109,200,238,.14) 48%, transparent 70%);
  pointer-events:none;
}
.technology-card:hover{
  transform:translateY(-4px);
  border-color:rgba(220,120,200,.34);
  box-shadow:0 20px 44px rgba(118,64,148,.14), inset 0 0 0 1px rgba(255,255,255,.54);
}
.technology-mark{
  position:relative;
  z-index:1;
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  border-radius:22px;
  background:linear-gradient(135deg,#df74d6 0%,#9c7eea 48%,#65c9f1 100%);
  color:#fff;
  font-size:18px;
  font-weight:950;
  letter-spacing:-.04em;
  box-shadow:0 14px 28px rgba(170,110,210,.22);
}
.technology-copy{
  position:relative;
  z-index:1;
  display:grid;
  gap:7px;
  min-width:0;
}
.technology-copy small{
  color:#c060b0;
  font-size:11px;
  font-style:normal;
  font-weight:950;
  letter-spacing:.14em;
}
.technology-copy strong{
  color:#271530;
  font-size:22px;
  line-height:1.16;
  letter-spacing:-.045em;
}
.technology-copy em{
  color:#775087;
  font-size:14px;
  font-style:normal;
  line-height:1.58;
  word-break:keep-all;
}
.technology-open{
  position:relative;
  z-index:1;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:rgba(255,255,255,.58);
  border:1px solid rgba(220,150,210,.22);
  color:#9d61c8;
  font-weight:950;
  transition:transform .22s ease, background .22s ease;
}
.technology-card:hover .technology-open{
  transform:translate(2px,-2px);
  background:rgba(255,255,255,.78);
}
@media (max-width:1200px){
  .technology-overview-grid,
  .technology-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
@media (max-width:768px){
  .technology-overview-grid,
  .technology-grid{
    grid-template-columns:1fr;
  }
  .technology-overview-card{
    min-height:auto;
    padding:22px;
  }
  .technology-group-head{
    display:grid;
    gap:8px;
  }
  .technology-group-head > span{
    max-width:none;
    text-align:left;
  }
  .technology-card{
    grid-template-columns:auto 1fr;
    min-height:auto;
    padding:20px;
  }
  .technology-open{
    grid-column:1 / -1;
    width:100%;
    height:38px;
    border-radius:14px;
  }
}

/* ─────────────────────────────────────────────
   U4A Workspace changelog page
   JSON 기반 변경 로그 타임라인
───────────────────────────────────────────── */
.u4aide-log-page .sub-hero{
  overflow:hidden;
}
.u4aide-log-page .sub-hero p:not(.eyebrow){
  max-width:780px;
  line-height:1.72;
  word-break:keep-all;
}
.changelog-section{
  position:relative;
}
.changelog-title .section-note{
  max-width:520px;
}
.changelog-toolbar{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:14px;
  margin:8px 0 18px;
  padding:14px;
  border-radius:26px;
  background:linear-gradient(160deg, rgba(255,255,255,.60), rgba(255,225,248,.40));
}
.changelog-search{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:12px;
  min-height:54px;
  padding:0 18px;
  border-radius:20px;
  background:rgba(255,255,255,.56);
  border:1px solid rgba(220,150,210,.22);
}
.changelog-search span{
  color:#c060b0;
  font-size:12px;
  font-weight:950;
  letter-spacing:.16em;
}
.changelog-search input{
  width:100%;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:#2a1030;
  font-size:15px;
  font-weight:800;
}
.changelog-search input::placeholder{
  color:#a774ad;
  font-weight:700;
}
.changelog-clear{
  min-height:54px;
  white-space:nowrap;
}
.changelog-summary-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 18px;
  padding:0 4px;
  color:#7a5088;
  font-size:14px;
  word-break:keep-all;
}
.changelog-summary-row strong{
  color:#2a1030;
  font-size:18px;
}
.changelog-summary-row em{
  color:#a458a0;
  font-style:normal;
  font-weight:850;
}
.changelog-timeline{
  position:relative;
  display:grid;
  gap:18px;
  padding-left:34px;
}
.changelog-timeline:before{
  content:"";
  position:absolute;
  left:12px;
  top:12px;
  bottom:12px;
  width:2px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(222,102,202,.58), rgba(102,201,239,.18));
}
.changelog-loading{
  margin:0;
  padding:28px;
  border-radius:26px;
  background:rgba(255,255,255,.50);
  border:1px solid rgba(220,150,210,.20);
  color:#8a5090;
  font-size:14px;
  font-weight:850;
  text-align:center;
}
.changelog-item{
  position:relative;
  display:grid;
  width:100%;
  padding:0;
  border:0;
  background:transparent;
  text-align:left;
  cursor:default;
}
.changelog-dot{
  position:absolute;
  left:-31px;
  top:30px;
  z-index:1;
  width:24px;
  height:24px;
  border-radius:50%;
  background:linear-gradient(135deg,#df74d6 0%,#9c7eea 52%,#65c9f1 100%);
  border:4px solid rgba(255,255,255,.88);
  box-shadow:0 10px 24px rgba(158,88,190,.28);
}
.changelog-card{
  position:relative;
  display:grid;
  gap:9px;
  min-height:154px;
  padding:24px 26px;
  border-radius:28px;
  overflow:hidden;
  background:linear-gradient(160deg, rgba(255,255,255,.66), rgba(255,225,248,.42));
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.changelog-card:before{
  content:"";
  position:absolute;
  inset:-55% auto auto -8%;
  width:220px;
  height:220px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.76), rgba(120,202,239,.16) 48%, transparent 72%);
  pointer-events:none;
}
.changelog-item:hover .changelog-card,
.changelog-item:focus-visible .changelog-card{
  transform:translateY(-4px);
  border-color:rgba(220,120,200,.34);
  box-shadow:0 20px 44px rgba(118,64,148,.14), inset 0 0 0 1px rgba(255,255,255,.54);
}
.changelog-item:focus-visible{
  outline:0;
}
.changelog-card-top,
.changelog-card strong,
.changelog-card em,
.changelog-card small,
.changelog-tags{
  position:relative;
  z-index:1;
}
.changelog-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.changelog-badge{
  display:inline-grid;
  place-items:center;
  min-width:58px;
  height:34px;
  padding:0 12px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(229,126,197,.22), rgba(98,201,239,.18));
  border:1px solid rgba(220,150,210,.24);
  color:#8a3888;
  font-size:11px;
  font-weight:950;
  letter-spacing:.12em;
}
.changelog-card time{
  color:#9a6098;
  font-size:13px;
  font-weight:850;
}
.changelog-card strong{
  color:#2a1030;
  font-size:26px;
  line-height:1.08;
  letter-spacing:-.052em;
}
.changelog-card em{
  color:#3a213d;
  font-size:19px;
  font-style:normal;
  font-weight:900;
  line-height:1.28;
  letter-spacing:-.03em;
}
.changelog-card small{
  max-width:880px;
  color:#775087;
  font-size:14px;
  line-height:1.66;
  word-break:keep-all;
}
.changelog-details{
  position:relative;
  z-index:1;
  display:grid;
  gap:8px;
  margin:4px 0 0;
  padding-left:20px;
  color:#604070;
  font-size:14px;
  line-height:1.68;
  word-break:keep-all;
}
.changelog-details li::marker{
  color:#c060b0;
}
.changelog-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:4px;
}
.changelog-tags span,
.changelog-modal__tags span{
  display:inline-grid;
  place-items:center;
  min-height:30px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(240,130,200,.10);
  border:1px solid rgba(220,150,210,.20);
  color:#8a3888;
  font-size:12px;
  font-weight:850;
}
.changelog-more-wrap{
  margin-top:24px;
}
.changelog-more[hidden]{
  display:none;
}
.changelog-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:28px;
}
.changelog-modal.is-open{
  display:flex;
}
.changelog-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(6,12,28,.72);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.changelog-modal__panel{
  position:relative;
  z-index:1;
  width:min(760px, 96vw);
  max-height:88vh;
  overflow:auto;
  padding:30px;
  border-radius:30px;
  background:linear-gradient(160deg, rgba(255,255,255,.86), rgba(255,232,250,.76));
  animation:workspacePreviewZoom 180ms ease-out;
}
.changelog-modal__close{
  position:absolute;
  top:16px;
  right:16px;
  z-index:5;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  padding:0;
  border:0;
  border-radius:50%;
  color:#fff;
  font-size:25px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  background:rgba(42,16,48,.88);
  box-shadow:0 12px 34px rgba(74,24,86,.24);
  touch-action:manipulation;
}
.changelog-modal__close::before{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:50%;
}
.changelog-modal__close:hover,
.changelog-modal__close:focus-visible{
  background:rgba(42,16,48,.96);
}
.changelog-modal__head{
  padding-right:48px;
}
.changelog-modal__head > span{
  display:inline-grid;
  place-items:center;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(229,126,197,.22), rgba(98,201,239,.18));
  border:1px solid rgba(220,150,210,.24);
  color:#8a3888;
  font-size:11px;
  font-weight:950;
  letter-spacing:.12em;
}
.changelog-modal__head h3{
  margin:16px 0 8px;
  color:#2a1030;
  font-size:clamp(28px,4vw,42px);
  line-height:1.08;
  letter-spacing:-.055em;
}
.changelog-modal__head p{
  margin:0;
  color:#9655a0;
  font-size:14px;
  font-weight:850;
}
.changelog-modal__body{
  margin-top:22px;
  color:#674174;
  font-size:15px;
  line-height:1.78;
  word-break:keep-all;
}
.changelog-modal__body ul{
  display:grid;
  gap:12px;
  margin:0;
  padding-left:20px;
}
.changelog-modal__body li::marker{
  color:#c060b0;
}
.changelog-modal__tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:22px;
}
body.changelog-modal-lock{
  overflow:hidden;
}
@media (max-width:768px){
  .changelog-toolbar{
    grid-template-columns:1fr;
    padding:12px;
  }
  .changelog-search{
    grid-template-columns:1fr;
    gap:6px;
    min-height:auto;
    padding:14px 16px;
  }
  .changelog-clear{
    width:100%;
  }
  .changelog-summary-row{
    display:grid;
    gap:6px;
  }
  .changelog-timeline{
    padding-left:24px;
  }
  .changelog-timeline:before{
    left:8px;
  }
  .changelog-dot{
    left:-24px;
    top:28px;
    width:16px;
    height:16px;
  }
  .changelog-card{
    min-height:auto;
    padding:22px;
  }
  .changelog-card-top{
    align-items:flex-start;
    flex-direction:column;
  }
  .changelog-card strong{
    font-size:23px;
  }
  .changelog-card em{
    font-size:17px;
  }
  .changelog-modal{
    padding:16px;
  }
  .changelog-modal__panel{
    padding:24px 20px;
    border-radius:26px;
  }
  .changelog-modal__head{
    padding-right:42px;
  }
}


/* ─────────────────────────────────────────────
   U4A Workspace example page
   JSON 기반 구현 예제 카드 갤러리 + 상세 팝업 탐색
───────────────────────────────────────────── */
.u4aide-example-page .sub-hero{
  overflow:hidden;
}
.u4aide-example-page .sub-hero p:not(.eyebrow){
  max-width:820px;
  line-height:1.72;
  word-break:keep-all;
}
.example-showcase{
  padding:26px;
  margin:24px 0 28px;
  overflow:hidden;
  background:
    radial-gradient(circle at 12% 10%, rgba(96,205,242,.16), transparent 28%),
    radial-gradient(circle at 84% 6%, rgba(239,139,188,.20), transparent 32%),
    linear-gradient(160deg, rgba(255,255,255,.66), rgba(255,232,250,.42));
}
.example-showcase-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:22px;
  margin-bottom:18px;
}
.example-showcase-head h2{
  margin:6px 0 10px;
  color:#2a1030;
  font-size:clamp(30px,4vw,48px);
  line-height:1.05;
  letter-spacing:-.055em;
}
.example-showcase-head span{
  display:block;
  max-width:760px;
  color:#765086;
  line-height:1.68;
  word-break:keep-all;
}
.example-feature-btn{
  flex:0 0 auto;
  min-width:118px;
}
.example-help{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:14px;
  align-items:start;
  max-height:0;
  opacity:0;
  overflow:hidden;
  margin:0;
  padding:0 18px;
  border-radius:22px;
  background:rgba(255,255,255,.50);
  border:1px solid transparent;
  transition:max-height .28s ease, opacity .22s ease, padding .22s ease, margin .22s ease, border-color .22s ease;
}
.example-help.is-open{
  max-height:180px;
  opacity:1;
  margin:0 0 18px;
  padding:16px 18px;
  border-color:rgba(220,150,210,.22);
}
.example-help strong{
  color:#c060b0;
  font-size:12px;
  font-weight:950;
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
}
.example-help p{
  margin:0;
  color:#7a5088;
  line-height:1.62;
  word-break:keep-all;
}
.example-toolbar{
  display:grid;
  grid-template-columns:auto minmax(260px, 1fr);
  gap:14px;
  align-items:center;
  margin:16px 0 16px;
  padding:14px;
  border-radius:26px;
  background:linear-gradient(160deg, rgba(255,255,255,.58), rgba(255,230,248,.36));
  border:1px solid rgba(220,150,210,.18);
}
.example-category-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.example-category-tabs button{
  min-height:46px;
  padding:0 18px;
  border:1px solid rgba(220,150,210,.22);
  border-radius:999px;
  background:rgba(255,255,255,.54);
  color:#684278;
  font:inherit;
  font-size:14px;
  font-weight:900;
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.example-category-tabs button:hover,
.example-category-tabs button.is-active{
  transform:translateY(-1px);
  color:#fff;
  border-color:rgba(255,255,255,.42);
  background:linear-gradient(90deg, #38c8e8, #9b60e0 52%, #f06ab0);
  box-shadow:0 14px 28px rgba(180,100,200,.22);
}
.example-search{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:12px;
  min-height:54px;
  padding:0 18px;
  border-radius:20px;
  background:rgba(255,255,255,.58);
  border:1px solid rgba(220,150,210,.22);
}
.example-search span{
  color:#c060b0;
  font-size:12px;
  font-weight:950;
  letter-spacing:.16em;
}
.example-search input{
  width:100%;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:#2a1030;
  font-size:15px;
  font-weight:800;
}
.example-search input::placeholder{
  color:#a774ad;
  font-weight:700;
}
.example-summary-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 14px;
  padding:0 4px;
}
.example-summary-row p{
  margin:0;
  color:#7a5088;
  font-size:14px;
  word-break:keep-all;
}
.example-summary-row strong{
  color:#2a1030;
  font-size:19px;
}
.example-rail-actions{
  display:flex;
  gap:8px;
}
.example-rail-actions button{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border:1px solid rgba(220,150,210,.24);
  border-radius:16px;
  background:rgba(255,255,255,.62);
  color:#704086;
  font-size:34px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(180,100,200,.12);
  transition:transform .18s ease, opacity .18s ease, background .18s ease;
}
.example-rail-actions button:hover:not(:disabled){
  transform:translateY(-2px);
  background:rgba(255,255,255,.84);
}
.example-rail-actions button:disabled{
  opacity:.38;
  cursor:not-allowed;
}
.example-rail-wrap{
  position:relative;
  margin:0 -26px;
  padding:0 26px 8px;
}
.example-rail-wrap:before,
.example-rail-wrap:after{
  content:"";
  position:absolute;
  top:0;
  bottom:8px;
  z-index:2;
  width:76px;
  pointer-events:none;
}
.example-rail-wrap:before{
  left:0;
  background:linear-gradient(90deg, rgba(255,242,252,.96), rgba(255,242,252,0));
}
.example-rail-wrap:after{
  right:0;
  background:linear-gradient(270deg, rgba(255,242,252,.96), rgba(255,242,252,0));
}
.example-rail{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(320px, 32.5%);
  gap:18px;
  min-height:438px;
  padding:6px 0 18px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-padding:0 26px;
  overscroll-behavior-x:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(156,126,234,.44) rgba(255,255,255,.44);
}
.example-rail::-webkit-scrollbar{
  height:12px;
}
.example-rail::-webkit-scrollbar-track{
  border-radius:999px;
  background:rgba(255,255,255,.46);
}
.example-rail::-webkit-scrollbar-thumb{
  border:3px solid rgba(255,255,255,.46);
  border-radius:999px;
  background:linear-gradient(90deg, rgba(95,205,242,.72), rgba(169,133,238,.72), rgba(239,139,188,.72));
}
.example-card{
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  height:442px;
  min-height:442px;
  border-radius:24px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,238,250,.54));
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.example-card:hover{
  transform:translateY(-5px);
  border-color:rgba(220,120,200,.34);
  box-shadow:0 22px 48px rgba(118,64,148,.16), inset 0 0 0 1px rgba(255,255,255,.58);
}
.example-shot{
  position:relative;
  display:block;
  width:100%;
  height:230px;
  overflow:hidden;
  border:0;
  padding:0;
  text-align:left;
  cursor:zoom-in;
  background:linear-gradient(135deg, #f8fbff, #f4e9ff);
}
.example-shot:focus-visible{
  outline:3px solid rgba(96,205,242,.72);
  outline-offset:-3px;
}
.example-preview-modal .example-preview-modal__inner{
  display:grid;
  grid-template-columns:minmax(0, 1.42fr) minmax(300px, .58fr);
  gap:18px;
  width:min(1240px, 96vw);
  padding:18px;
  overflow:hidden;
}
.example-preview-media{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
  border-radius:22px;
  background:rgba(255,255,255,.10);
  overflow:hidden;
}
.example-preview-modal .workspace-preview-modal__img{
  max-height:calc(92vh - 36px);
  cursor:default;
}
.example-preview-copy{
  min-height:0;
  max-height:calc(92vh - 36px);
  padding:22px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,238,250,.82));
  border:1px solid rgba(255,255,255,.48);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.36);
  overflow:hidden;
}
.example-preview-copy .eyebrow{
  margin:0 0 10px;
}
.example-preview-copy h3{
  margin:0 0 16px;
  color:#2a1030;
  font-size:clamp(24px, 3vw, 34px);
  line-height:1.14;
  letter-spacing:-.055em;
  word-break:keep-all;
}
.example-preview-description{
  max-height:calc(92vh - 176px);
  padding-right:10px;
  overflow-y:auto;
  color:#684278;
  font-size:15px;
  line-height:1.76;
  font-weight:760;
  word-break:keep-all;
  scrollbar-width:thin;
  scrollbar-color:rgba(156,126,234,.46) rgba(255,255,255,.48);
}
.example-preview-description::-webkit-scrollbar{
  width:8px;
}
.example-preview-description::-webkit-scrollbar-track{
  border-radius:999px;
  background:rgba(255,255,255,.48);
}
.example-preview-description::-webkit-scrollbar-thumb{
  border:2px solid rgba(255,255,255,.48);
  border-radius:999px;
  background:linear-gradient(180deg, rgba(95,205,242,.68), rgba(169,133,238,.68), rgba(239,139,188,.68));
}
.example-download.is-disabled{
  opacity:.48;
  pointer-events:none;
  filter:grayscale(.35);
}
.example-shot img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:top center;
  transform:scale(1.01);
  transition:transform .35s ease, filter .35s ease;
}
.example-card:hover .example-shot img{
  transform:scale(1.045);
  filter:saturate(1.04) contrast(1.02);
}
.example-badge{
  position:absolute;
  left:16px;
  top:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:0 12px;
  border-radius:999px;
  background:rgba(30,18,44,.66);
  color:#fff;
  font-size:12px;
  font-weight:900;
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.24);
}
.example-card-body{
  display:flex;
  flex:1;
  min-height:0;
  flex-direction:column;
  padding:22px;
}
.example-card-body h3{
  margin:0 0 12px;
  color:#2a1030;
  font-size:23px;
  line-height:1.18;
  letter-spacing:-.048em;
  word-break:keep-all;
}
.example-card-body p{
  margin:0 0 18px;
  color:#765086;
  line-height:1.62;
  word-break:keep-all;
}
.example-card-description{
  flex:0 1 auto;
  max-height:86px;
  padding-right:8px;
  overflow-y:auto;
  white-space:normal;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(156,126,234,.42) rgba(255,255,255,.45);
}
.example-card-description::-webkit-scrollbar{
  width:8px;
}
.example-card-description::-webkit-scrollbar-track{
  border-radius:999px;
  background:rgba(255,255,255,.45);
}
.example-card-description::-webkit-scrollbar-thumb{
  border:2px solid rgba(255,255,255,.45);
  border-radius:999px;
  background:linear-gradient(180deg, rgba(95,205,242,.62), rgba(169,133,238,.62), rgba(239,139,188,.62));
}
.example-download{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  margin-top:auto;
  min-height:48px;
  border-radius:15px;
  color:#fff;
  font-size:14px;
  font-weight:950;
  background:linear-gradient(90deg, #38c8e8, #9b60e0 52%, #f06ab0);
  box-shadow:0 12px 26px rgba(180,100,200,.22);
  transition:transform .18s ease, box-shadow .18s ease;
}
.example-download:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 30px rgba(180,100,200,.28);
}
.example-list-loading,
.example-empty{
  margin:0;
  padding:30px;
  border-radius:24px;
  background:rgba(255,255,255,.52);
  border:1px solid rgba(220,150,210,.22);
  color:#8a5090;
  font-size:14px;
  font-weight:850;
  text-align:center;
}
.example-empty{
  margin-top:12px;
}

@media (max-width:900px){
  .example-preview-modal .example-preview-modal__inner{
    grid-template-columns:1fr;
    overflow-y:auto;
  }
  .example-preview-modal .workspace-preview-modal__img{
    max-height:56vh;
  }
  .example-preview-copy{
    max-height:none;
  }
  .example-preview-description{
    max-height:32vh;
  }
}

@media (max-width:1200px){
  .example-rail{
    grid-auto-columns:minmax(300px, 48%);
  }
}
@media (max-width:900px){
  .example-showcase-head{
    display:grid;
  }
  .example-feature-btn{
    width:100%;
  }
  .example-toolbar{
    grid-template-columns:1fr;
  }
  .example-rail{
    grid-auto-columns:minmax(286px, 78%);
  }
}
@media (max-width:768px){
  .example-showcase{
    padding:20px;
    border-radius:24px;
  }
  .example-toolbar{
    padding:12px;
    border-radius:22px;
  }
  .example-category-tabs button{
    flex:1 1 auto;
    min-height:44px;
    padding:0 14px;
  }
  .example-search{
    grid-template-columns:1fr;
    gap:2px;
    padding:10px 14px;
  }
  .example-summary-row{
    align-items:flex-start;
  }
  .example-rail-wrap{
    margin:0 -20px;
    padding:0 20px 8px;
  }
  .example-rail-wrap:before,
  .example-rail-wrap:after{
    width:36px;
  }
  .example-rail{
    grid-auto-columns:minmax(270px, 86%);
    min-height:404px;
    scroll-snap-type:x proximity;
  }
  .example-card{
    height:410px;
    min-height:410px;
  }
  .example-shot{
    height:190px;
  }
  .example-card-body{
    padding:19px;
  }
  .example-card-description{
    max-height:78px;
  }
  .example-card-body h3{
    font-size:21px;
  }
  .example-help{
    grid-template-columns:1fr;
  }
}
@media (max-width:460px){
  .example-summary-row{
    display:grid;
  }
  .example-rail-actions{
    width:100%;
  }
  .example-rail-actions button{
    flex:1;
  }
  .example-rail{
    grid-auto-columns:92%;
  }
}

/* ─────────────────────────────────────────────
   U4A Workspace Example popup refinement
   - 상세 팝업 X 버튼 잘림 방지
   - 긴 설명은 팝업 자체 스크롤로 자연스럽게 확인
───────────────────────────────────────────── */
.example-preview-modal .example-preview-modal__inner{
  max-height:92vh;
  overflow-x:hidden;
  overflow-y:auto;
  align-items:start;
  padding:22px;
  scrollbar-width:thin;
  scrollbar-color:rgba(156,126,234,.48) rgba(255,255,255,.20);
}
.example-preview-modal .example-preview-modal__inner::-webkit-scrollbar{
  width:10px;
}
.example-preview-modal .example-preview-modal__inner::-webkit-scrollbar-track{
  border-radius:999px;
  background:rgba(255,255,255,.20);
}
.example-preview-modal .example-preview-modal__inner::-webkit-scrollbar-thumb{
  border:2px solid rgba(255,255,255,.22);
  border-radius:999px;
  background:linear-gradient(180deg, rgba(95,205,242,.70), rgba(169,133,238,.70), rgba(239,139,188,.70));
}
.example-preview-modal .workspace-preview-modal__close{
  top:18px;
  right:18px;
  z-index:5;
  width:42px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.38);
  border-radius:999px;
  color:#fff;
  font-size:24px;
  font-weight:700;
  line-height:1;
  background:rgba(22,24,38,.78);
  box-shadow:0 14px 34px rgba(0,0,0,.30), inset 0 0 0 1px rgba(255,255,255,.08);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.example-preview-modal .workspace-preview-modal__close:hover{
  transform:translateY(-1px);
  background:rgba(42,28,58,.92);
}
.example-preview-modal .workspace-preview-modal__close:focus-visible{
  outline:3px solid rgba(96,205,242,.72);
  outline-offset:3px;
}
.example-preview-modal .workspace-preview-modal__img{
  max-height:72vh;
}
.example-preview-copy{
  max-height:none;
  overflow:visible;
  padding-top:28px;
}
.example-preview-description{
  max-height:none;
  overflow:visible;
  padding-right:0;
}
@media (max-width:900px){
  .example-preview-modal .example-preview-modal__inner{
    padding:16px;
  }
  .example-preview-modal .workspace-preview-modal__close{
    top:14px;
    right:14px;
  }
  .example-preview-modal .workspace-preview-modal__img{
    max-height:54vh;
  }
}

/* ─────────────────────────────────────────────
   U4A Workspace example modal final refinement
   - 팝업 전체 스크롤 대신 우측 상세 내역 영역만 스크롤
   - 창 크기 변화 시 이미지/상세 영역이 튀어나가지 않도록 고정 높이 기준 정리
───────────────────────────────────────────── */
.example-preview-modal .example-preview-modal__inner{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0, 1.35fr) minmax(320px, .65fr);
  gap:18px;
  width:min(1220px, calc(100vw - 40px));
  max-height:calc(100vh - 44px);
  padding:22px;
  overflow:hidden;
  align-items:stretch;
}
.example-preview-modal .workspace-preview-modal__close{
  top:16px;
  right:16px;
  z-index:10;
}
.example-preview-media{
  min-width:0;
  min-height:0;
  height:100%;
  max-height:calc(100vh - 88px);
}
.example-preview-modal .workspace-preview-modal__img{
  width:100%;
  max-width:100%;
  max-height:calc(100vh - 88px);
  object-fit:contain;
}
.example-preview-copy{
  display:flex;
  min-width:0;
  min-height:0;
  max-height:calc(100vh - 88px);
  flex-direction:column;
  overflow:hidden;
}
.example-preview-copy h3{
  flex:0 0 auto;
}
.example-preview-description{
  flex:1 1 auto;
  min-height:0;
  max-height:none;
  padding-right:10px;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(156,126,234,.50) rgba(255,255,255,.48);
}
.example-preview-description::-webkit-scrollbar{
  width:8px;
}
.example-preview-description::-webkit-scrollbar-track{
  border-radius:999px;
  background:rgba(255,255,255,.48);
}
.example-preview-description::-webkit-scrollbar-thumb{
  border:2px solid rgba(255,255,255,.48);
  border-radius:999px;
  background:linear-gradient(180deg, rgba(95,205,242,.68), rgba(169,133,238,.68), rgba(239,139,188,.68));
}
@media (max-width:1100px){
  .example-preview-modal .example-preview-modal__inner{
    grid-template-columns:minmax(0, 1.25fr) minmax(280px, .75fr);
    width:min(1000px, calc(100vw - 28px));
    max-height:calc(100vh - 32px);
    padding:18px;
  }
  .example-preview-media,
  .example-preview-modal .workspace-preview-modal__img,
  .example-preview-copy{
    max-height:calc(100vh - 68px);
  }
  .example-preview-copy{
    padding:20px;
  }
  .example-preview-copy h3{
    font-size:clamp(23px, 3.2vw, 32px);
  }
}
@media (max-width:760px){
  .example-preview-modal .example-preview-modal__inner{
    grid-template-columns:1fr;
    grid-template-rows:minmax(180px, 42vh) minmax(0, 1fr);
    width:calc(100vw - 24px);
    max-height:calc(100vh - 28px);
    padding:14px;
  }
  .example-preview-media{
    max-height:42vh;
  }
  .example-preview-modal .workspace-preview-modal__img{
    max-height:42vh;
  }
  .example-preview-copy{
    max-height:none;
    padding:18px;
  }
}

/* ─────────────────────────────────────────────
   U4A Workspace example modal fullscreen refinement
   - 샘플 이미지를 브라우저 영역 기준으로 최대한 크게 표시
   - 우측 상세 영역은 고정 폭 + 내부 스크롤 유지
───────────────────────────────────────────── */
.example-preview-modal.workspace-preview-modal{
  padding:20px;
}
.example-preview-modal .example-preview-modal__inner{
  width:calc(100vw - 40px);
  height:calc(100vh - 40px);
  max-width:none;
  max-height:none;
  grid-template-columns:minmax(0, 1fr) clamp(340px, 28vw, 460px);
  gap:18px;
  padding:20px;
  overflow:hidden;
}
.example-preview-modal .workspace-preview-modal__close{
  top:18px;
  right:18px;
}
.example-preview-media{
  width:100%;
  height:100%;
  max-height:none;
  align-self:stretch;
}
.example-preview-modal .workspace-preview-modal__img{
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}
.example-preview-copy{
  height:100%;
  max-height:none;
  align-self:stretch;
  overflow:hidden;
}
.example-preview-description{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
}
@media (max-width:1100px){
  .example-preview-modal.workspace-preview-modal{
    padding:14px;
  }
  .example-preview-modal .example-preview-modal__inner{
    width:calc(100vw - 28px);
    height:calc(100vh - 28px);
    grid-template-columns:minmax(0, 1fr) clamp(300px, 34vw, 390px);
    gap:14px;
    padding:16px;
  }
  .example-preview-media,
  .example-preview-modal .workspace-preview-modal__img,
  .example-preview-copy{
    max-height:none;
  }
}
@media (max-width:760px){
  .example-preview-modal.workspace-preview-modal{
    padding:10px;
  }
  .example-preview-modal .example-preview-modal__inner{
    width:calc(100vw - 20px);
    height:calc(100vh - 20px);
    grid-template-columns:1fr;
    grid-template-rows:minmax(220px, 58vh) minmax(0, 1fr);
    gap:12px;
    padding:12px;
  }
  .example-preview-media,
  .example-preview-modal .workspace-preview-modal__img{
    height:100%;
    max-height:none;
  }
  .example-preview-copy{
    height:100%;
    max-height:none;
    padding:16px;
  }
}

/* ─────────────────────────────────────────────
   Inquiry page renewal
   - 메일 발송 폼 대신 간단한 이메일 안내형 화면으로 구성
───────────────────────────────────────────── */
.inquiry-page .sub-hero{margin-bottom:24px}
.inquiry-page .contact-layout{grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr);gap:20px;align-items:start}
.inquiry-page .contact-panel{padding:30px}
.inquiry-page .contact-form{gap:18px 20px}
.inquiry-page .contact-form label{font-size:14px;letter-spacing:-.02em}
.inquiry-page .contact-form .field-label{display:inline-flex;align-items:center;gap:4px;line-height:1.2;white-space:nowrap}
.inquiry-page .contact-form label em{font-style:normal;color:#f0609f;font-weight:900}
.inquiry-page .contact-form input,
.inquiry-page .contact-form textarea{border-radius:12px;background:rgba(255,255,255,.70)}
.inquiry-page .contact-form textarea{min-height:210px;resize:vertical;line-height:1.65}
.inquiry-page .form-hidden{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.inquiry-page .privacy-box{padding:18px 20px;border-radius:18px;background:rgba(255,255,255,.46);border:1px solid rgba(220,150,210,.20)}
.inquiry-page .privacy-box strong{display:block;margin-bottom:8px;color:#2a1030;font-size:15px}
.inquiry-page .privacy-box p{margin:0;color:#6f4b7c;font-size:14px;line-height:1.75}
.inquiry-page .agree-row{display:flex!important;grid-template-columns:none!important;align-items:center;gap:10px;width:max-content;max-width:100%;font-weight:800;color:#3a1a40}
.inquiry-page .agree-row input{width:18px;height:18px;padding:0;accent-color:#d95eb6}
.inquiry-page .form-footer{justify-content:center;margin-top:4px}
.inquiry-page .form-footer .primary-btn{min-width:170px;border:0;cursor:pointer}
.inquiry-page .form-footer .primary-btn[disabled]{opacity:.62;cursor:progress;transform:none}
.inquiry-page .form-status{width:100%;text-align:center;font-size:14px;font-weight:800}
.inquiry-page .inquiry-side-panel{padding:24px}
.inquiry-page .faq-panel{position:sticky;top:94px}
.inquiry-page .faq-card p{margin-bottom:0;color:#7a4d86}
.inquiry-page .faq-card .ghost-btn{margin-top:14px}
@media (max-width:1024px){.inquiry-page .contact-layout{grid-template-columns:1fr}.inquiry-page .faq-panel{position:relative;top:auto}}
@media (max-width:768px){.inquiry-page .contact-panel,.inquiry-page .inquiry-side-panel{padding:20px}.inquiry-page .contact-form{gap:15px}.inquiry-page .agree-row{width:100%}.inquiry-page .form-footer .primary-btn{width:100%}}
.inquiry-page .contact-form .full{grid-column:1/-1}

.inquiry-page .inquiry-contact-panel{display:grid;gap:24px;min-height:320px;align-content:start}
.inquiry-page .inquiry-contact-copy{display:grid;gap:10px}
.inquiry-page .inquiry-contact-copy h2{margin:0;color:#2a1030;font-size:clamp(30px,4vw,46px);line-height:1.08;letter-spacing:-.055em}
.inquiry-page .inquiry-contact-copy p:not(.eyebrow){margin:0;color:#765083;font-size:16px;line-height:1.75;font-weight:700}
.inquiry-page .inquiry-email-list{display:grid;gap:14px}
.inquiry-page .inquiry-email-card{display:grid;gap:8px;padding:22px 24px;border-radius:24px;background:rgba(255,255,255,.58);border:1px solid rgba(220,150,210,.24);box-shadow:inset 0 0 0 1px rgba(255,255,255,.46);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.inquiry-page .inquiry-email-card:hover{transform:translateY(-3px);border-color:rgba(220,120,200,.34);box-shadow:0 18px 36px rgba(118,64,148,.12),inset 0 0 0 1px rgba(255,255,255,.52)}
.inquiry-page .inquiry-email-card span{color:#c060b0;font-size:12px;font-weight:950;letter-spacing:.14em;text-transform:uppercase}
.inquiry-page .inquiry-email-card strong{color:#2a1030;font-size:clamp(22px,3vw,34px);line-height:1.1;letter-spacing:-.04em;word-break:break-all}
.inquiry-page .inquiry-contact-lines{display:grid;gap:12px;margin-top:2px}
.inquiry-page .inquiry-contact-line{display:grid;gap:5px}
.inquiry-page .inquiry-contact-line em{color:#9b5aa8;font-size:13px;font-style:normal;font-weight:950;line-height:1.35}
.inquiry-page .inquiry-email-card small{color:#765083;font-size:14px;font-weight:800;line-height:1.55}
.inquiry-page .inquiry-email-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.inquiry-page .inquiry-email-actions .ghost-btn{min-height:44px;padding:0 16px;border-color:rgba(220,150,210,.30);font-size:13px;font-weight:950;text-decoration:none;cursor:pointer}
.inquiry-page .inquiry-email-actions .inquiry-email-copy{background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(255,246,253,.68));color:#5a2868}
.inquiry-page .inquiry-email-actions .inquiry-email-copy.is-copied{border-color:rgba(92,190,150,.36);background:linear-gradient(135deg,rgba(235,255,247,.86),rgba(255,255,255,.72));color:#1f7a5b}
.inquiry-page .inquiry-email-actions .inquiry-email-copy:focus-visible{outline:3px solid rgba(220,120,200,.28);outline-offset:3px}
@media (max-width:520px){.inquiry-page .inquiry-email-actions{display:grid}.inquiry-page .inquiry-email-actions .ghost-btn{width:100%;justify-content:center}}

/* ─────────────────────────────────────────────
   Index header logo/social icon refinement
   - Brand text mark -> image logo
   - Social links -> Facebook / Kakao image icon buttons
───────────────────────────────────────────── */
.brand-logo-wrap{
  width:44px;
  height:44px;
  border-radius:16px;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:rgba(255,255,255,.66);
  border:1px solid rgba(220,150,210,.24);
  box-shadow:0 8px 24px rgba(220,100,180,.18);
  flex:0 0 auto;
}
.brand-logo{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  padding:4px;
}
.social-links{
  gap:4px;
}
.social-links a{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
  text-decoration:none;
}
.social-links a:hover{
  transform:translateY(-1px);
  background:transparent;
  box-shadow:none;
}
.social-links a img{
  display:block;
  width:27px;
  height:27px;
  object-fit:contain;
}
@media (max-width:768px){
  .brand-logo-wrap{
    width:40px;
    height:40px;
    border-radius:14px;
  }
  .brand-logo{
    padding:4px;
  }
}


/* ─────────────────────────────────────────────
   Mobile drawer sticky header / language actions refinement
───────────────────────────────────────────── */
.mobile-drawer .drawer-lang-switch{display:flex !important;align-items:center}
@media (max-width:420px){
  .drawer-head{align-items:flex-start;flex-direction:column}
  .drawer-head-actions{width:100%;justify-content:space-between}
}


/* ─────────────────────────────────────────────
   EN header compact layout
   - 영문 메뉴는 단어 길이가 길어지는 특성이 있어 상단 메뉴만 짧고 안정적으로 배치한다.
   - KO 메뉴 레이아웃은 기존 감각을 유지한다.
───────────────────────────────────────────── */
.glass-header[data-lang="en"] .desktop-nav{
  flex:1 1 auto;
  justify-content:center;
  min-width:0;
  gap:4px;
}
.glass-header[data-lang="en"] .nav-item>a{
  white-space:nowrap;
  font-size:13px;
  line-height:1.15;
  padding:10px 10px;
}
.glass-header[data-lang="en"] .brand{
  flex:0 1 auto;
  min-width:210px;
}
.glass-header[data-lang="en"] .brand-text small{
  font-size:10px;
}
.glass-header[data-lang="en"] .header-actions{
  flex:0 0 auto;
  gap:10px;
}
@media (max-width:1280px) and (min-width:1025px){
  .glass-header[data-lang="en"]{
    padding-left:14px;
    padding-right:10px;
  }
  .glass-header[data-lang="en"] .brand{
    min-width:190px;
  }
  .glass-header[data-lang="en"] .brand-text small{
    display:none;
  }
  .glass-header[data-lang="en"] .nav-item>a{
    font-size:12.5px;
    padding-left:8px;
    padding-right:8px;
  }
  .glass-header[data-lang="en"] .lang-switch .lang-option{
    padding-left:10px;
    padding-right:10px;
  }
  .glass-header[data-lang="en"] .social-links a img{
    width:25px;
    height:25px;
  }
}

/* ── 찾아오시는 길 페이지 ── */
.map-page .sub-hero{margin-bottom:24px}
.map-page .sub-hero p:not(.eyebrow){max-width:680px;word-break:keep-all}
.map-location-layout{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;margin-bottom:18px}
.map-location-panel{display:flex;flex-direction:column;min-height:100%}
.map-location-panel .map-details{flex:1}
.map-location-panel .cta-row{margin-top:22px}
.map-location-panel .primary-btn{width:100%}
.map-section{margin-top:0}
.map-section .map-card{padding:28px}
.map-guide-text{margin:-8px 0 18px;color:var(--text-muted);font-size:.96rem;line-height:1.7;word-break:keep-all}
.map-frame-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.map-frame-card{display:flex;flex-direction:column;gap:14px;min-width:0}
.map-frame-title{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border-radius:20px;background:rgba(255,255,255,.56);border:1px solid rgba(255,255,255,.62);box-shadow:0 14px 28px rgba(26,32,44,.07)}
.map-frame-title strong{color:var(--text-main);font-size:1.02rem}
.map-frame-title span{color:var(--text-muted);font-size:.92rem;line-height:1.55;word-break:keep-all}
.google-map-frame{position:relative;overflow:hidden;min-height:430px;border-radius:24px;background:linear-gradient(135deg, rgba(80,200,240,.14), rgba(220,110,190,.14));border:1px solid rgba(220,150,210,.24);box-shadow:inset 0 0 0 1px rgba(255,255,255,.50)}
.google-map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:saturate(1.02) contrast(1.01)}
@media (max-width:1024px){.map-location-layout,.map-frame-grid{grid-template-columns:1fr}.google-map-frame{min-height:380px}}
@media (max-width:768px){.map-section .map-card{padding:20px}.map-guide-text{margin-top:-4px}.map-frame-grid{gap:16px}.map-frame-title{padding:14px 15px;border-radius:18px}.google-map-frame{min-height:320px;border-radius:20px}.map-location-panel .primary-btn{width:100%}}

/* ─────────────────────────────────────────────
   U4A Workspace example vertical layout refinement
   - u4aide_example.html: 가로 레일 → 세로 카드 그리드
   - 유형/검색 영역 sticky 처리 + 10개 단위 더보기
───────────────────────────────────────────── */
.u4aide-example-page .example-showcase{
  overflow:visible;
}
.u4aide-example-page .example-showcase-head{
  margin-bottom:16px;
}
.u4aide-example-page .example-showcase-head > div{
  width:100%;
}
.u4aide-example-page .example-toolbar{
  position:sticky;
  top:82px;
  z-index:20;
  grid-template-columns:minmax(0, auto) minmax(320px, 1fr);
  margin:18px 0 16px;
  padding:16px;
  border:1px solid rgba(172,96,196,.22);
  background:linear-gradient(160deg, rgba(255,255,255,.88), rgba(255,238,251,.78));
  box-shadow:0 18px 46px rgba(124,72,148,.13), inset 0 0 0 1px rgba(255,255,255,.44);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.u4aide-example-page .example-search{
  position:relative;
  min-height:58px;
  padding:7px 16px 7px 52px;
  border:2px solid rgba(146,84,210,.34);
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,249,255,.88));
  box-shadow:0 12px 30px rgba(140,80,170,.12), inset 0 0 0 1px rgba(255,255,255,.74);
}
.u4aide-example-page .example-search:before{
  content:"⌕";
  position:absolute;
  left:18px;
  top:50%;
  transform:translateY(-52%);
  color:#8d50d4;
  font-size:28px;
  font-weight:900;
  line-height:1;
}
.u4aide-example-page .example-search span{
  color:#8b44c0;
  font-size:11px;
  letter-spacing:.18em;
}
.u4aide-example-page .example-search input{
  min-height:28px;
  font-size:16px;
  font-weight:850;
}
.u4aide-example-page .example-search:focus-within{
  border-color:rgba(56,200,232,.68);
  box-shadow:0 18px 38px rgba(92,154,220,.18), 0 0 0 4px rgba(96,205,242,.15), inset 0 0 0 1px rgba(255,255,255,.86);
}
.u4aide-example-page .example-summary-row{
  margin:0 0 16px;
}
.u4aide-example-page .example-rail-wrap{
  margin:0;
  padding:0;
}
.u4aide-example-page .example-rail-wrap:before,
.u4aide-example-page .example-rail-wrap:after{
  display:none;
}
.u4aide-example-page .example-rail{
  display:grid;
  grid-auto-flow:row;
  grid-auto-columns:initial;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
  min-height:0;
  padding:0;
  overflow:visible;
  scroll-snap-type:none;
  scroll-padding:0;
}
.u4aide-example-page .example-card{
  height:auto;
  min-height:0;
  scroll-snap-align:none;
}
.u4aide-example-page .example-shot{
  height:220px;
}
.u4aide-example-page .example-card-description{
  max-height:92px;
}
.u4aide-example-page .example-image-count{
  position:absolute;
  right:14px;
  bottom:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:0 11px;
  border-radius:999px;
  color:#fff;
  font-size:12px;
  font-weight:950;
  background:rgba(42,18,58,.70);
  border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.u4aide-example-page .example-more-row{
  display:flex;
  justify-content:center;
  margin-top:22px;
}
.u4aide-example-page .example-more-row[hidden]{
  display:none;
}
.u4aide-example-page .example-more-btn{
  min-width:220px;
  min-height:52px;
  border-radius:18px;
  font-weight:950;
  background:rgba(255,255,255,.68);
}
.u4aide-example-page .example-more-btn:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.88);
}
.u4aide-example-page .example-preview-modal .example-preview-modal__inner{
  grid-template-columns:minmax(0, 1fr) clamp(340px, 28vw, 460px);
}
.u4aide-example-page .example-preview-media{
  display:block;
  padding:0;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:thin;
  scrollbar-color:rgba(156,126,234,.50) rgba(255,255,255,.20);
}
.u4aide-example-page .example-preview-media::-webkit-scrollbar{
  width:10px;
}
.u4aide-example-page .example-preview-media::-webkit-scrollbar-track{
  border-radius:999px;
  background:rgba(255,255,255,.20);
}
.u4aide-example-page .example-preview-media::-webkit-scrollbar-thumb{
  border:2px solid rgba(255,255,255,.22);
  border-radius:999px;
  background:linear-gradient(180deg, rgba(95,205,242,.70), rgba(169,133,238,.70), rgba(239,139,188,.70));
}
.u4aide-example-page .example-preview-figure{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100%;
  margin:0 0 14px;
  padding:0;
  border-radius:22px;
  background:rgba(255,255,255,.10);
  overflow:hidden;
}
.u4aide-example-page .example-preview-figure:last-child{
  margin-bottom:0;
}
.u4aide-example-page .example-preview-figure figcaption{
  position:absolute;
  left:16px;
  top:16px;
  min-height:30px;
  display:inline-flex;
  align-items:center;
  padding:0 12px;
  border-radius:999px;
  color:#fff;
  font-size:12px;
  font-weight:950;
  background:rgba(24,20,36,.68);
  border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.u4aide-example-page .example-preview-figure .workspace-preview-modal__img{
  width:100%;
  height:100%;
  max-width:100%;
  max-height:none;
  object-fit:contain;
}
@media (max-width:1200px){
  .u4aide-example-page .example-rail{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
@media (max-width:900px){
  .u4aide-example-page .example-toolbar{
    top:72px;
    grid-template-columns:1fr;
  }
  .u4aide-example-page .example-preview-modal .example-preview-modal__inner{
    grid-template-columns:1fr;
    grid-template-rows:minmax(220px, 58vh) minmax(0, 1fr);
  }
}
@media (max-width:768px){
  .u4aide-example-page .example-showcase{
    overflow:visible;
  }
  .u4aide-example-page .example-toolbar{
    top:66px;
    margin-left:-8px;
    margin-right:-8px;
  }
  .u4aide-example-page .example-rail{
    grid-template-columns:1fr;
  }
  .u4aide-example-page .example-shot{
    height:210px;
  }
  .u4aide-example-page .example-search{
    grid-template-columns:1fr;
    padding:11px 14px 11px 48px;
  }
}
@media (max-width:460px){
  .u4aide-example-page .example-category-tabs button{
    flex:1 1 100%;
  }
  .u4aide-example-page .example-more-btn{
    width:100%;
  }
}

/* U4A Workspace example search/detail refinement */
.u4aide-example-page .example-search{
  display:grid;
  grid-template-columns:34px minmax(82px, auto) minmax(0, 1fr);
  align-items:center;
  column-gap:12px;
  min-height:64px;
  padding:8px 10px 8px 16px;
}
.u4aide-example-page .example-search:before{
  position:static;
  transform:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:12px;
  font-size:24px;
  line-height:1;
  background:rgba(151,91,214,.10);
}
.u4aide-example-page .example-search span{
  display:flex;
  align-items:center;
  height:40px;
  padding:0 2px;
  white-space:nowrap;
}
.u4aide-example-page .example-search input{
  min-height:44px;
  padding:0 16px;
  border-radius:15px;
  border:1px solid rgba(146,84,210,.24);
  background:rgba(255,255,255,.92);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92), 0 8px 20px rgba(120,72,160,.08);
}
.u4aide-example-page .example-search input:focus{
  border-color:rgba(56,200,232,.72);
  background:#fff;
  box-shadow:0 0 0 4px rgba(96,205,242,.14), 0 10px 24px rgba(120,72,160,.10);
}
.u4aide-example-page .example-preview-download{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:50px;
  margin-top:22px;
  border-radius:16px;
  color:#fff;
  font-size:14px;
  font-weight:950;
  text-decoration:none;
  background:linear-gradient(90deg, #38c8e8, #9b60e0 52%, #f06ab0);
  box-shadow:0 14px 28px rgba(180,100,200,.22);
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.u4aide-example-page .example-preview-download:hover,
.u4aide-example-page .example-preview-download:focus-visible{
  transform:translateY(-1px);
  box-shadow:0 18px 34px rgba(180,100,200,.28);
}
.u4aide-example-page .example-preview-download.is-disabled{
  pointer-events:none;
  opacity:.48;
  background:linear-gradient(90deg, rgba(146,130,160,.72), rgba(170,150,180,.68));
  box-shadow:none;
}
@media (max-width:640px){
  .u4aide-example-page .example-search{
    grid-template-columns:30px 1fr;
    row-gap:8px;
  }
  .u4aide-example-page .example-search input{
    grid-column:1 / -1;
  }
}


/* U4A Workspace example mobile sticky toolbar refinement
   - 모바일/좁은 창에서 필터 영역이 화면을 과도하게 차지하지 않도록 압축
   - 세로 버튼 나열 대신 가로 스크롤 칩 형태로 유지 */
@media (max-width:768px){
  .u4aide-example-page .example-toolbar{
    top:58px;
    grid-template-columns:1fr;
    gap:10px;
    margin:12px -4px 14px;
    padding:10px;
    border-radius:20px;
    max-height:none;
  }
  .u4aide-example-page .example-category-tabs{
    display:flex;
    flex-wrap:nowrap;
    gap:8px;
    width:100%;
    padding:0 2px 4px;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .u4aide-example-page .example-category-tabs::-webkit-scrollbar{
    display:none;
  }
  .u4aide-example-page .example-category-tabs button{
    flex:0 0 auto;
    min-height:38px;
    padding:0 14px;
    font-size:13px;
    white-space:nowrap;
    box-shadow:none;
  }
  .u4aide-example-page .example-category-tabs button:hover,
  .u4aide-example-page .example-category-tabs button.is-active{
    transform:none;
    box-shadow:0 8px 18px rgba(180,100,200,.18);
  }
  .u4aide-example-page .example-search{
    grid-template-columns:28px 1fr;
    row-gap:7px;
    column-gap:9px;
    min-height:0;
    padding:9px 10px;
    border-radius:17px;
  }
  .u4aide-example-page .example-search:before{
    width:28px;
    height:28px;
    border-radius:10px;
    font-size:20px;
  }
  .u4aide-example-page .example-search span{
    height:28px;
    font-size:10px;
    letter-spacing:.14em;
  }
  .u4aide-example-page .example-search input{
    grid-column:1 / -1;
    min-height:38px;
    padding:0 14px;
    border-radius:13px;
    font-size:14px;
  }
  .u4aide-example-page .example-summary-row{
    margin-top:4px;
  }
}
@media (max-width:460px){
  .u4aide-example-page .example-category-tabs button{
    flex:0 0 auto;
    width:auto;
  }
}
@media (max-width:768px) and (max-height:720px){
  .u4aide-example-page .example-toolbar{
    position:relative;
    top:auto;
  }
}

/* ─────────────────────────────────────────────
   U4A Workspace video page
   JSON 기반 교육영상 카드 + YouTube / mp4 재생 팝업
───────────────────────────────────────────── */
.u4aide-video-page .sub-hero{
  overflow:hidden;
}
.u4aide-video-page .sub-hero p:not(.eyebrow){
  max-width:820px;
  line-height:1.72;
  word-break:keep-all;
}
.video-showcase{
  padding:26px;
  margin:24px 0 28px;
  overflow:hidden;
  background:
    radial-gradient(circle at 12% 10%, rgba(96,205,242,.16), transparent 28%),
    radial-gradient(circle at 84% 6%, rgba(239,139,188,.20), transparent 32%),
    linear-gradient(160deg, rgba(255,255,255,.66), rgba(255,232,250,.42));
}
.video-showcase-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:22px;
  margin-bottom:18px;
}
.video-showcase-head h2{
  margin:6px 0 10px;
  color:#2a1030;
  font-size:clamp(30px,4vw,48px);
  line-height:1.05;
  letter-spacing:-.055em;
}
.video-showcase-head span{
  display:block;
  max-width:820px;
  color:#765086;
  line-height:1.68;
  word-break:keep-all;
}
.video-toolbar{
  display:grid;
  grid-template-columns:auto minmax(260px, 1fr);
  gap:14px;
  align-items:center;
  margin:16px 0 16px;
  padding:14px;
  border-radius:26px;
  background:linear-gradient(160deg, rgba(255,255,255,.58), rgba(255,230,248,.36));
  border:1px solid rgba(220,150,210,.18);
}
.video-category-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.video-category-tabs button{
  min-height:46px;
  padding:0 18px;
  border:1px solid rgba(220,150,210,.22);
  border-radius:999px;
  background:rgba(255,255,255,.54);
  color:#684278;
  font:inherit;
  font-size:14px;
  font-weight:900;
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.video-category-tabs button:hover,
.video-category-tabs button.is-active{
  transform:translateY(-1px);
  color:#fff;
  border-color:rgba(255,255,255,.42);
  background:linear-gradient(90deg, #38c8e8, #9b60e0 52%, #f06ab0);
  box-shadow:0 14px 28px rgba(180,100,200,.22);
}
.video-search{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:12px;
  min-height:54px;
  padding:0 18px;
  border-radius:20px;
  background:rgba(255,255,255,.58);
  border:1px solid rgba(220,150,210,.22);
}
.video-search span{
  color:#c060b0;
  font-size:12px;
  font-weight:950;
  letter-spacing:.16em;
}
.video-search input{
  width:100%;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:#2a1030;
  font-size:15px;
  font-weight:800;
}
.video-search input::placeholder{
  color:#a774ad;
  font-weight:700;
}
.video-summary-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 14px;
  padding:0 4px;
}
.video-summary-row p{
  margin:0;
  color:#7a5088;
  font-size:14px;
  word-break:keep-all;
}
.video-summary-row strong{
  color:#2a1030;
  font-size:19px;
}
.video-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
}
.video-card{
  display:flex;
  min-height:426px;
  flex-direction:column;
  overflow:hidden;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,238,250,.54));
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.video-card:hover{
  transform:translateY(-5px);
  border-color:rgba(220,120,200,.34);
  box-shadow:0 22px 48px rgba(118,64,148,.16), inset 0 0 0 1px rgba(255,255,255,.58);
}
.video-shot{
  position:relative;
  display:block;
  width:100%;
  height:224px;
  overflow:hidden;
  border:0;
  padding:0;
  text-align:left;
  cursor:pointer;
  background:linear-gradient(135deg, #f8fbff, #f4e9ff);
}
.video-shot:focus-visible{
  outline:3px solid rgba(96,205,242,.72);
  outline-offset:-3px;
}
.video-shot img,
.video-shot video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  transform:scale(1.01);
  transition:transform .35s ease, filter .35s ease;
}
.video-card:hover .video-shot img,
.video-card:hover .video-shot video{
  transform:scale(1.045);
  filter:saturate(1.04) contrast(1.02);
}
.video-shot:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(14,16,30,0) 38%, rgba(14,16,30,.44));
  pointer-events:none;
}
.video-play-mark{
  position:absolute;
  left:50%;
  top:50%;
  z-index:2;
  width:70px;
  height:70px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:rgba(255,255,255,.82);
  box-shadow:0 20px 44px rgba(55,30,80,.26), inset 0 0 0 1px rgba(255,255,255,.48);
  transform:translate(-50%, -50%);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.video-play-mark:before{
  content:"";
  margin-left:5px;
  border-top:14px solid transparent;
  border-bottom:14px solid transparent;
  border-left:22px solid #9b60e0;
}
.video-badge,
.video-provider,
.video-duration{
  position:absolute;
  z-index:3;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:0 11px;
  border-radius:999px;
  color:#fff;
  font-size:12px;
  font-weight:900;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.24);
}
.video-badge{
  left:15px;
  top:15px;
  background:rgba(30,18,44,.66);
}
.video-provider{
  right:15px;
  top:15px;
  background:rgba(28,105,125,.66);
}
.video-duration{
  right:15px;
  bottom:15px;
  background:rgba(30,18,44,.70);
}
.video-card-body{
  display:flex;
  flex:1;
  min-height:0;
  flex-direction:column;
  padding:22px;
}
.video-card-body h3{
  margin:0 0 12px;
  color:#2a1030;
  font-size:23px;
  line-height:1.18;
  letter-spacing:-.048em;
  word-break:keep-all;
}
.video-card-body p{
  margin:0 0 18px;
  color:#765086;
  line-height:1.62;
  word-break:keep-all;
}
.video-card-description{
  flex:0 1 auto;
  max-height:92px;
  padding-right:8px;
  overflow-y:auto;
  white-space:normal;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(156,126,234,.42) rgba(255,255,255,.45);
}
.video-card-description::-webkit-scrollbar{
  width:8px;
}
.video-card-description::-webkit-scrollbar-track{
  border-radius:999px;
  background:rgba(255,255,255,.45);
}
.video-card-description::-webkit-scrollbar-thumb{
  border:2px solid rgba(255,255,255,.45);
  border-radius:999px;
  background:linear-gradient(180deg, rgba(95,205,242,.62), rgba(169,133,238,.62), rgba(239,139,188,.62));
}
.video-action-group{
  display:grid;
  grid-template-columns:1.25fr .8fr .8fr;
  gap:8px;
  width:100%;
  margin-top:auto;
}
.video-watch-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:48px;
  border:0;
  border-radius:15px;
  color:#fff;
  font:inherit;
  font-size:13px;
  font-weight:950;
  line-height:1.1;
  cursor:pointer;
  white-space:nowrap;
  background:linear-gradient(90deg, #38c8e8, #9b60e0 52%, #f06ab0);
  box-shadow:0 12px 26px rgba(180,100,200,.22);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.video-watch-btn--sub{
  color:#653a74;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(204,140,216,.28);
  box-shadow:0 10px 22px rgba(124,74,150,.10), inset 0 0 0 1px rgba(255,255,255,.52);
}
.video-watch-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 30px rgba(180,100,200,.28);
}
.video-watch-btn--sub:hover{
  color:#2a1030;
  background:rgba(255,255,255,.92);
  box-shadow:0 14px 28px rgba(124,74,150,.16), inset 0 0 0 1px rgba(255,255,255,.62);
}
.video-watch-btn:focus-visible{
  outline:3px solid rgba(96,205,242,.72);
  outline-offset:3px;
}
.video-list-loading,
.video-empty{
  grid-column:1 / -1;
  margin:0;
  padding:30px;
  border-radius:24px;
  background:rgba(255,255,255,.52);
  border:1px solid rgba(220,150,210,.22);
  color:#8a5090;
  font-size:14px;
  font-weight:850;
  text-align:center;
}
.video-empty{
  margin-top:12px;
}
.video-more-row{
  display:flex;
  justify-content:center;
  margin-top:18px;
}
.video-more-btn{
  min-width:180px;
}
.video-preview-modal{
  position:fixed;
  inset:0;
  z-index:1200;
  display:none;
  padding:20px;
  background:rgba(17,12,28,.72);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.video-preview-modal.is-open{
  display:grid;
  place-items:center;
}
.video-preview-modal__inner{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0, 1fr) clamp(320px, 28vw, 450px);
  gap:18px;
  width:calc(100vw - 40px);
  height:calc(100vh - 40px);
  padding:20px;
  overflow:hidden;
  border-radius:30px;
  background:linear-gradient(160deg, rgba(31,25,48,.96), rgba(74,48,90,.86));
  border:1px solid rgba(255,255,255,.20);
  box-shadow:0 30px 90px rgba(0,0,0,.38);
}
.video-preview-modal__close{
  position:absolute;
  top:18px;
  right:18px;
  z-index:10;
  width:42px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.38);
  border-radius:999px;
  color:#fff;
  font-size:24px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  background:rgba(22,24,38,.78);
  box-shadow:0 14px 34px rgba(0,0,0,.30), inset 0 0 0 1px rgba(255,255,255,.08);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.video-preview-modal__close:hover{
  transform:translateY(-1px);
  background:rgba(42,28,58,.92);
}
.video-preview-modal__close:focus-visible{
  outline:3px solid rgba(96,205,242,.72);
  outline-offset:3px;
}
.video-preview-player{
  display:flex;
  min-width:0;
  min-height:0;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:22px;
  background:rgba(0,0,0,.26);
}
.video-preview-player iframe,
.video-preview-player video,
.video-preview-fallback{
  width:100%;
  height:100%;
  display:block;
  border:0;
  object-fit:contain;
}
.video-preview-copy{
  display:flex;
  min-width:0;
  min-height:0;
  height:100%;
  flex-direction:column;
  padding:26px;
  overflow:hidden;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,238,250,.84));
  border:1px solid rgba(255,255,255,.48);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.36);
}
.video-preview-copy .eyebrow{
  margin:0 0 10px;
}
.video-preview-copy h3{
  flex:0 0 auto;
  margin:0 0 12px;
  color:#2a1030;
  font-size:clamp(24px, 3vw, 34px);
  line-height:1.14;
  letter-spacing:-.055em;
  word-break:keep-all;
}
.video-preview-meta{
  flex:0 0 auto;
  margin:0 0 16px;
  color:#c060b0;
  font-size:13px;
  font-weight:950;
  letter-spacing:-.02em;
}
.video-preview-description{
  flex:1 1 auto;
  min-height:0;
  padding-right:10px;
  overflow-y:auto;
  overflow-x:hidden;
  color:#684278;
  font-size:15px;
  line-height:1.76;
  font-weight:760;
  word-break:keep-all;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(156,126,234,.50) rgba(255,255,255,.48);
}
.video-preview-description::-webkit-scrollbar{
  width:8px;
}
.video-preview-description::-webkit-scrollbar-track{
  border-radius:999px;
  background:rgba(255,255,255,.48);
}
.video-preview-description::-webkit-scrollbar-thumb{
  border:2px solid rgba(255,255,255,.48);
  border-radius:999px;
  background:linear-gradient(180deg, rgba(95,205,242,.68), rgba(169,133,238,.68), rgba(239,139,188,.68));
}

.video-pip-notice{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:1260;
  max-width:min(420px, calc(100vw - 44px));
  padding:14px 16px;
  border:1px solid rgba(255,255,255,.62);
  border-radius:18px;
  color:#43234e;
  font-size:13px;
  font-weight:850;
  line-height:1.55;
  letter-spacing:-.02em;
  background:linear-gradient(135deg, rgba(255,255,255,.94), rgba(249,242,255,.90));
  box-shadow:0 18px 48px rgba(61,34,91,.22);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  opacity:0;
  transform:translateY(14px);
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}
.video-pip-notice.is-open{
  opacity:1;
  transform:translateY(0);
}
body.video-modal-lock{
  overflow:hidden;
}
@media (max-width:1200px){
  .video-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .video-preview-modal__inner{
    grid-template-columns:minmax(0, 1fr) clamp(300px, 34vw, 390px);
    gap:14px;
    padding:16px;
  }
}
@media (max-width:900px){
  .video-showcase-head{
    display:grid;
  }
  .video-toolbar{
    grid-template-columns:1fr;
  }
  .video-grid{
    grid-template-columns:1fr;
  }
  .video-preview-modal{
    padding:10px;
  }
  .video-preview-modal__inner{
    width:calc(100vw - 20px);
    height:calc(100vh - 20px);
    grid-template-columns:1fr;
    grid-template-rows:minmax(220px, 58vh) minmax(0, 1fr);
    gap:12px;
    padding:12px;
  }
  .video-preview-copy{
    padding:18px;
  }
}
@media (max-width:768px){
  .video-showcase{
    padding:20px;
    border-radius:24px;
  }
  .video-toolbar{
    padding:12px;
    border-radius:22px;
  }
  .video-category-tabs button{
    flex:1 1 auto;
    min-height:44px;
    padding:0 14px;
  }
  .video-search{
    grid-template-columns:1fr;
    gap:2px;
    padding:10px 14px;
  }
  .video-card{
    min-height:400px;
  }
  .video-shot{
    height:196px;
  }
  .video-card-body{
    padding:19px;
  }
  .video-action-group{
    grid-template-columns:1fr;
  }
  .video-watch-btn{
    min-height:44px;
  }
  .video-card-description{
    max-height:82px;
  }
  .video-card-body h3{
    font-size:21px;
  }
}
@media (max-width:480px){
  .video-badge,
  .video-provider,
  .video-duration{
    font-size:11px;
    padding:0 9px;
  }
  .video-play-mark{
    width:60px;
    height:60px;
  }
  .video-preview-modal__close{
    top:14px;
    right:14px;
  }
  .video-pip-notice{
    right:10px;
    bottom:10px;
    max-width:calc(100vw - 20px);
  }
}

/* 교육영상: YouTube 임시/잘못된 ID 안내 */
.video-preview-message{
  display:flex;
  width:100%;
  height:100%;
  min-height:320px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:14px;
  padding:28px;
  color:#fff;
  text-align:center;
  background:linear-gradient(135deg, rgba(42,16,48,.94), rgba(88,55,125,.86));
}
.video-preview-message strong{
  font-size:clamp(22px, 3vw, 32px);
  line-height:1.2;
  letter-spacing:-.045em;
}
.video-preview-message span{
  max-width:520px;
  color:rgba(255,255,255,.78);
  font-size:15px;
  font-weight:760;
  line-height:1.7;
}
.video-preview-message .video-watch-btn{
  width:auto;
  min-width:180px;
  margin-top:4px;
}


/* U4A Workspace video page: match u4aide_example filter/search/sticky behavior */
.u4aide-video-page .video-showcase{
  overflow:visible;
}
.u4aide-video-page .video-toolbar{
  position:sticky;
  top:82px;
  z-index:20;
  display:grid;
  grid-template-columns:minmax(0, auto) minmax(320px, 1fr);
  gap:14px;
  align-items:center;
  margin:18px 0 16px;
  padding:16px;
  border-radius:26px;
  border:1px solid rgba(172,96,196,.22);
  background:linear-gradient(160deg, rgba(255,255,255,.88), rgba(255,238,251,.78));
  box-shadow:0 18px 46px rgba(124,72,148,.13), inset 0 0 0 1px rgba(255,255,255,.44);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.u4aide-video-page .video-search{
  position:relative;
  display:grid;
  grid-template-columns:34px minmax(82px, auto) minmax(0, 1fr);
  align-items:center;
  column-gap:12px;
  min-height:64px;
  padding:8px 10px 8px 16px;
  border:2px solid rgba(146,84,210,.34);
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,249,255,.88));
  box-shadow:0 12px 30px rgba(140,80,170,.12), inset 0 0 0 1px rgba(255,255,255,.74);
}
.u4aide-video-page .video-search:before{
  content:"⌕";
  position:static;
  transform:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:12px;
  color:#8d50d4;
  font-size:24px;
  font-weight:900;
  line-height:1;
  background:rgba(151,91,214,.10);
}
.u4aide-video-page .video-search span{
  display:flex;
  align-items:center;
  height:40px;
  padding:0 2px;
  color:#8b44c0;
  font-size:11px;
  font-weight:950;
  letter-spacing:.18em;
  white-space:nowrap;
}
.u4aide-video-page .video-search input{
  width:100%;
  min-width:0;
  min-height:44px;
  padding:0 16px;
  border:1px solid rgba(146,84,210,.24);
  border-radius:15px;
  outline:0;
  background:rgba(255,255,255,.92);
  color:#2a1030;
  font-size:16px;
  font-weight:850;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92), 0 8px 20px rgba(120,72,160,.08);
}
.u4aide-video-page .video-search input:focus{
  border-color:rgba(56,200,232,.72);
  background:#fff;
  box-shadow:0 0 0 4px rgba(96,205,242,.14), 0 10px 24px rgba(120,72,160,.10);
}
.u4aide-video-page .video-search:focus-within{
  border-color:rgba(56,200,232,.68);
  box-shadow:0 18px 38px rgba(92,154,220,.18), 0 0 0 4px rgba(96,205,242,.15), inset 0 0 0 1px rgba(255,255,255,.86);
}
.u4aide-video-page .video-search input::placeholder{
  color:#a774ad;
  font-weight:700;
}
.u4aide-video-page .video-more-row[hidden]{
  display:none !important;
}
@media (max-width:900px){
  .u4aide-video-page .video-toolbar{
    top:72px;
    grid-template-columns:1fr;
  }
}
@media (max-width:768px){
  .u4aide-video-page .video-showcase{
    overflow:visible;
  }
  .u4aide-video-page .video-toolbar{
    position:sticky;
    top:58px;
    grid-template-columns:1fr;
    gap:10px;
    margin:12px -4px 14px;
    padding:10px;
    border-radius:20px;
    max-height:none;
  }
  .u4aide-video-page .video-category-tabs{
    display:flex;
    flex-wrap:nowrap;
    gap:8px;
    width:100%;
    padding:0 2px 4px;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .u4aide-video-page .video-category-tabs::-webkit-scrollbar{
    display:none;
  }
  .u4aide-video-page .video-category-tabs button{
    flex:0 0 auto;
    min-height:38px;
    padding:0 14px;
    font-size:13px;
    white-space:nowrap;
    box-shadow:none;
  }
  .u4aide-video-page .video-category-tabs button:hover,
  .u4aide-video-page .video-category-tabs button.is-active{
    transform:none;
    box-shadow:0 8px 18px rgba(180,100,200,.18);
  }
  .u4aide-video-page .video-search{
    grid-template-columns:28px 1fr;
    row-gap:7px;
    column-gap:9px;
    min-height:0;
    padding:9px 10px;
    border-radius:17px;
  }
  .u4aide-video-page .video-search:before{
    width:28px;
    height:28px;
    border-radius:10px;
    font-size:20px;
  }
  .u4aide-video-page .video-search span{
    height:28px;
    font-size:10px;
    letter-spacing:.14em;
  }
  .u4aide-video-page .video-search input{
    grid-column:1 / -1;
    min-height:38px;
    padding:0 14px;
    border-radius:13px;
    font-size:14px;
  }
  .u4aide-video-page .video-summary-row{
    margin-top:4px;
  }
}
@media (max-width:460px){
  .u4aide-video-page .video-category-tabs button{
    flex:0 0 auto;
    width:auto;
  }
  .u4aide-video-page .video-more-btn{
    width:100%;
  }
}
@media (max-width:768px) and (max-height:720px){
  .u4aide-video-page .video-toolbar{
    position:relative;
    top:auto;
  }
}

/* U4A Workspace 자료실: 기존 PHP 게시판 스타일 기반 리뉴얼 */
.sound-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
.u4aide-data-page .data-room-shell{
  max-width:1540px;
  padding-top:118px;
}
.u4aide-data-page .data-room{
  width:100%;
}
.u4aide-data-page .data-room-title{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  margin:18px 0 36px;
  text-align:center;
}
.u4aide-data-page .data-room-title h1{
  margin:0;
  color:#24242a;
  font-size:clamp(30px, 3vw, 42px);
  font-weight:950;
  letter-spacing:.12em;
}
.u4aide-data-page .data-room-title span{
  width:2px;
  height:36px;
  border-radius:999px;
  background:linear-gradient(180deg, #0589ff, rgba(5,137,255,0));
}
.u4aide-data-page .data-search-bar{
  position:sticky;
  top:88px;
  z-index:20;
  display:grid;
  grid-template-columns:160px minmax(220px, 1fr) 48px auto;
  gap:10px;
  justify-content:end;
  align-items:center;
  width:min(520px, 100%);
  margin:0 0 14px auto;
  padding:10px;
  border:1px solid rgba(150,150,160,.18);
  border-radius:0;
  background:rgba(255,255,255,.86);
  box-shadow:0 12px 30px rgba(26,32,44,.05);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.u4aide-data-page .data-search-bar select,
.u4aide-data-page .data-search-bar input{
  width:100%;
  min-height:38px;
  border:0;
  border-bottom:1px solid rgba(40,40,50,.15);
  outline:0;
  background:rgba(255,255,255,.78);
  color:#2b2b31;
  font-size:14px;
  font-weight:700;
}
.u4aide-data-page .data-search-bar select{
  padding:0 30px 0 10px;
}
.u4aide-data-page .data-search-bar input{
  padding:0 12px;
  border:1px solid rgba(40,40,50,.14);
}
.u4aide-data-page .data-search-bar select:focus,
.u4aide-data-page .data-search-bar input:focus{
  border-color:#0589ff;
  box-shadow:0 0 0 3px rgba(5,137,255,.10);
}
.u4aide-data-page .data-search-bar button{
  min-height:38px;
  border:1px solid rgba(35,35,42,.18);
  background:#fff;
  color:#4f5964;
  font-weight:950;
  cursor:pointer;
}
.u4aide-data-page .data-search-bar button[type="submit"]{
  width:48px;
  color:#1676d7;
  font-size:20px;
}
.u4aide-data-page .data-reset-btn{
  padding:0 13px;
  white-space:nowrap;
}
.u4aide-data-page .data-board-wrap{
  position:relative;
  overflow:hidden;
  padding:0;
  border-radius:0;
  border:0;
  border-top:2px solid #d91cff;
  border-bottom:2px solid #d91cff;
  background:rgba(255,255,255,.82);
  box-shadow:none;
}
.u4aide-data-page .data-loading-bar{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:3px;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
  background:rgba(5,137,255,.10);
}
.u4aide-data-page .data-loading-bar:before{
  content:"";
  position:absolute;
  top:0;
  left:-35%;
  width:35%;
  height:100%;
  background:linear-gradient(90deg, rgba(5,137,255,0), rgba(5,137,255,.85), rgba(217,28,255,0));
  animation:u4aDataLoading 1s linear infinite;
}
.u4aide-data-page .data-room.is-loading .data-loading-bar{
  opacity:1;
}
@keyframes u4aDataLoading{
  to{left:100%;}
}
.u4aide-data-page .data-board-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  color:#202025;
  font-size:16px;
}
.u4aide-data-page .data-board-table th,
.u4aide-data-page .data-board-table td{
  height:48px;
  border-bottom:1px solid rgba(40,40,46,.10);
  text-align:center;
  vertical-align:middle;
}
.u4aide-data-page .data-board-table th{
  color:#202025;
  font-size:15px;
  font-weight:850;
  background:rgba(255,255,255,.74);
}
.u4aide-data-page .data-col-number{width:148px;}
.u4aide-data-page .data-col-writer{width:180px;}
.u4aide-data-page .data-col-date{width:180px;}
.u4aide-data-page .data-board-table tr.is-notice td{
  background:rgba(255,241,244,.78);
}
.u4aide-data-page .data-board-table tbody tr:hover td{
  background:rgba(246,249,255,.96);
}
.u4aide-data-page .data-number{
  color:#68717b;
}
.u4aide-data-page .data-number-notice{
  color:#da314f;
  font-weight:950;
}
.u4aide-data-page .data-subject{
  text-align:left!important;
}
.u4aide-data-page .data-subject button{
  display:inline-flex;
  max-width:100%;
  align-items:center;
  gap:8px;
  border:0;
  background:transparent;
  color:#0f1115;
  font:inherit;
  font-weight:820;
  text-align:left;
  cursor:pointer;
}
.u4aide-data-page .data-subject button:hover,
.u4aide-data-page .data-subject button:focus-visible{
  color:#116ed1;
  text-decoration:underline;
}
.u4aide-data-page .data-file-mark{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  color:#64717d;
  font-size:18px;
  line-height:1;
}
.u4aide-data-page .data-writer,
.u4aide-data-page .data-date{
  color:#68717b;
  font-weight:700;
}
.u4aide-data-page .data-empty{
  margin:0;
  padding:64px 20px;
  color:#68717b;
  font-weight:850;
  text-align:center;
}
.u4aide-data-page .data-board-footer{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  margin-top:28px;
}
.u4aide-data-page .data-board-footer p{
  margin:0;
  color:#68717b;
  font-weight:800;
}
.u4aide-data-page .data-pager{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px;
}
.u4aide-data-page .data-pager button{
  min-width:42px;
  height:40px;
  border:1px solid rgba(35,35,42,.14);
  background:#fff;
  color:#4f5964;
  font-weight:850;
  cursor:pointer;
}
.u4aide-data-page .data-pager button.is-active{
  background:#202126;
  border-color:#202126;
  color:#fff;
}
.u4aide-data-page .data-pager button:disabled{
  opacity:.45;
  cursor:not-allowed;
}
.u4aide-data-page .data-detail-view{
  position:relative;
  max-width:1440px;
  margin:0 auto;
  padding:0 28px 30px;
  border-radius:4px;
  border:1px solid rgba(33,38,45,.12);
  background:rgba(255,255,255,.88);
  box-shadow:0 22px 70px rgba(26,32,44,.08);
}
.u4aide-data-page .data-detail-head{
  padding:30px 0 22px;
  border-bottom:1px solid rgba(33,38,45,.12);
}
.u4aide-data-page .data-detail-head h2{
  margin:0 0 18px;
  color:#1f2328;
  font-size:clamp(21px, 2.1vw, 30px);
  font-weight:900;
  letter-spacing:-.035em;
}
.u4aide-data-page .data-detail-meta{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  color:#6a737d;
  font-size:14px;
  font-weight:780;
}
.u4aide-data-page .data-detail-files{
  display:grid;
  gap:8px;
  margin-top:18px;
}
.u4aide-data-page .data-attachment{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:42px;
  padding:0 12px;
  border-bottom:1px solid rgba(33,38,45,.08);
  color:#111318;
  font-weight:900;
  text-decoration:none;
}
.u4aide-data-page .data-attachment:before{
  content:"▣";
  color:#5f717c;
  font-size:13px;
}
.u4aide-data-page .data-attachment span{
  flex:1 1 auto;
}
.u4aide-data-page .data-attachment small,
.u4aide-data-page .data-no-file{
  color:#5d6872;
  font-size:13px;
  font-weight:780;
}
.u4aide-data-page .data-detail-content{
  min-height:240px;
  padding:30px 0 54px;
  border-bottom:1px solid rgba(33,38,45,.12);
  color:#4f5964;
  font-size:17px;
  font-weight:650;
  line-height:1.9;
}
.u4aide-data-page .data-detail-content a{
  color:#111318;
  font-weight:900;
}
.u4aide-data-page .data-detail-content img{
  max-width:100%;
  height:auto;
}
.u4aide-data-page .data-neighbor-nav{
  display:grid;
  grid-template-columns:1fr;
  border-bottom:1px solid rgba(33,38,45,.10);
}
.u4aide-data-page .data-neighbor-nav button{
  display:grid;
  grid-template-columns:80px minmax(0, 1fr);
  gap:12px;
  min-height:58px;
  padding:0;
  border:0;
  border-top:1px solid rgba(33,38,45,.10);
  background:transparent;
  text-align:left;
  cursor:pointer;
}
.u4aide-data-page .data-neighbor-nav button:disabled{
  cursor:default;
}
.u4aide-data-page .data-neighbor-nav span{
  display:flex;
  align-items:center;
  color:#1f2328;
  font-weight:900;
}
.u4aide-data-page .data-neighbor-nav strong,
.u4aide-data-page .data-neighbor-nav em{
  display:flex;
  min-width:0;
  align-items:center;
  overflow:hidden;
  color:#24292f;
  font-style:normal;
  font-weight:780;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.u4aide-data-page .data-neighbor-nav em{
  color:#8b949e;
}
.u4aide-data-page .data-detail-actions{
  display:flex;
  justify-content:center;
  margin-top:34px;
}
.u4aide-data-page .data-list-btn{
  min-width:116px;
  min-height:48px;
  border:0;
  background:#202126;
  color:#fff;
  font-size:16px;
  font-weight:950;
  cursor:pointer;
}
.u4aide-data-page .data-list-btn:hover,
.u4aide-data-page .data-list-btn:focus-visible{
  background:#0589ff;
}
@media (max-width:900px){
  .u4aide-data-page .data-room-shell{
    padding-top:92px;
  }
  .u4aide-data-page .data-search-bar{
    top:70px;
    grid-template-columns:120px minmax(0, 1fr) 44px;
    width:100%;
  }
  .u4aide-data-page .data-reset-btn{
    grid-column:1 / -1;
  }
  .u4aide-data-page .data-col-number{width:70px;}
  .u4aide-data-page .data-col-writer{width:90px;}
  .u4aide-data-page .data-col-date{width:104px;}
  .u4aide-data-page .data-board-table{
    font-size:14px;
  }
  .u4aide-data-page .data-board-table th,
  .u4aide-data-page .data-board-table td{
    height:46px;
  }
  .u4aide-data-page .data-writer{
    display:none;
  }
  .u4aide-data-page .data-col-writer{
    width:0;
  }
  .u4aide-data-page .data-detail-view{
    padding:0 18px 24px;
  }
}
@media (max-width:640px){
  .u4aide-data-page .data-room-title{
    margin-bottom:24px;
  }
  .u4aide-data-page .data-search-bar{
    position:relative;
    top:auto;
    grid-template-columns:1fr 44px;
    margin-bottom:12px;
  }
  .u4aide-data-page .data-search-bar select,
  .u4aide-data-page .data-reset-btn{
    grid-column:1 / -1;
  }
  .u4aide-data-page .data-board-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .u4aide-data-page .data-board-table{
    min-width:620px;
  }
  .u4aide-data-page .data-detail-meta{
    gap:10px;
  }
  .u4aide-data-page .data-attachment{
    align-items:flex-start;
    flex-direction:column;
    padding:10px 0;
  }
  .u4aide-data-page .data-neighbor-nav button{
    grid-template-columns:58px minmax(0, 1fr);
  }
}

/* ─────────────────────────────────────────────
   U4A Workspace 자료실 renewal design
   - 이전 PHP 자료실의 목록/상세 사용 흐름은 유지
   - 화면 스타일은 현재 리뉴얼 사이트의 glass/gradient 톤으로 적용
───────────────────────────────────────────── */
.u4aide-data-page .data-room-shell{
  max-width:var(--maxw);
  padding-top:90px;
}
.u4aide-data-page .data-room-hero{
  margin-bottom:22px;
}
.u4aide-data-page .data-room{
  width:100%;
  overflow:visible;
  padding:28px;
  border-radius:34px;
  background:linear-gradient(160deg, rgba(255,255,255,.74), rgba(255,238,251,.52));
  border:1px solid rgba(220,150,210,.30);
  box-shadow:0 22px 70px rgba(190,128,205,.16), inset 0 0 0 1px rgba(255,255,255,.46);
}
.u4aide-data-page .data-room-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  margin-bottom:18px;
}
.u4aide-data-page .data-room-head h2{
  margin:2px 0 6px;
  color:#25172f;
  font-size:clamp(26px, 3vw, 38px);
  line-height:1.12;
  letter-spacing:-.045em;
}
.u4aide-data-page .data-room-head span{
  display:block;
  max-width:720px;
  color:#70517d;
  font-size:15px;
  line-height:1.65;
  word-break:keep-all;
}
.u4aide-data-page .data-search-bar{
  position:sticky;
  top:82px;
  z-index:20;
  display:grid;
  grid-template-columns:150px minmax(300px, 1fr) 54px auto;
  gap:10px;
  align-items:center;
  margin:0 0 18px;
  padding:14px;
  border:1px solid rgba(172,96,196,.22);
  border-radius:24px;
  background:linear-gradient(160deg, rgba(255,255,255,.90), rgba(255,238,251,.78));
  box-shadow:0 18px 46px rgba(124,72,148,.12), inset 0 0 0 1px rgba(255,255,255,.48);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.u4aide-data-page .data-search-bar select{
  width:100%;
  min-height:54px;
  padding:0 38px 0 16px;
  border:1px solid rgba(146,84,210,.24);
  border-radius:18px;
  outline:0;
  background:rgba(255,255,255,.76);
  color:#4a2058;
  font-size:14px;
  font-weight:900;
}
.u4aide-data-page .data-search-input{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  align-items:center;
  gap:12px;
  min-height:54px;
  padding:7px 14px 7px 16px;
  border:2px solid rgba(146,84,210,.30);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,249,255,.88));
  box-shadow:0 12px 30px rgba(140,80,170,.10), inset 0 0 0 1px rgba(255,255,255,.70);
}
.u4aide-data-page .data-search-input span{
  color:#8b44c0;
  font-size:11px;
  font-weight:950;
  letter-spacing:.18em;
  white-space:nowrap;
}
.u4aide-data-page .data-search-input input{
  width:100%;
  min-height:36px;
  border:0;
  outline:0;
  background:transparent;
  color:#25172f;
  font-size:16px;
  font-weight:780;
}
.u4aide-data-page .data-search-input input::placeholder{
  color:#a58ab1;
}
.u4aide-data-page .data-search-input:focus-within,
.u4aide-data-page .data-search-bar select:focus{
  border-color:rgba(56,200,232,.68);
  box-shadow:0 18px 38px rgba(92,154,220,.16), 0 0 0 4px rgba(96,205,242,.14), inset 0 0 0 1px rgba(255,255,255,.86);
}
.u4aide-data-page .data-search-submit,
.u4aide-data-page .data-reset-btn{
  min-height:54px;
  border:1px solid rgba(220,150,210,.26);
  border-radius:18px;
  background:rgba(255,255,255,.68);
  color:#5a2868;
  font-weight:950;
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.u4aide-data-page .data-search-submit{
  width:54px;
  color:#8d50d4;
  font-size:26px;
  line-height:1;
}
.u4aide-data-page .data-reset-btn{
  padding:0 18px;
  white-space:nowrap;
}
.u4aide-data-page .data-search-submit:hover,
.u4aide-data-page .data-reset-btn:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.90);
  box-shadow:0 10px 26px rgba(180,100,200,.14);
}
.u4aide-data-page .data-board-wrap{
  position:relative;
  overflow:hidden;
  padding:0;
  border:1px solid rgba(220,150,210,.26);
  border-radius:28px;
  background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,248,254,.66));
  box-shadow:0 18px 52px rgba(190,128,205,.12), inset 0 1px 0 rgba(255,255,255,.72);
}
.u4aide-data-page .data-board-wrap:before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:4px;
  background:linear-gradient(90deg, #5fcdf2, #a985ee 52%, #ef8bbc);
  pointer-events:none;
}
.u4aide-data-page .data-loading-bar{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:4px;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
  z-index:3;
  background:rgba(95,205,242,.12);
}
.u4aide-data-page .data-loading-bar:before{
  content:"";
  position:absolute;
  top:0;
  left:-35%;
  width:35%;
  height:100%;
  background:linear-gradient(90deg, rgba(95,205,242,0), rgba(95,205,242,.90), rgba(239,139,188,0));
  animation:u4aDataLoading 1s linear infinite;
}
.u4aide-data-page .data-room.is-loading .data-loading-bar{
  opacity:1;
}
.u4aide-data-page .data-board-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  color:#25172f;
  font-size:15px;
}
.u4aide-data-page .data-board-table th,
.u4aide-data-page .data-board-table td{
  height:58px;
  padding:0 16px;
  border-bottom:1px solid rgba(121,72,142,.11);
  text-align:center;
  vertical-align:middle;
}
.u4aide-data-page .data-board-table th{
  height:60px;
  color:#5a2868;
  font-size:13px;
  font-weight:950;
  letter-spacing:.05em;
  background:linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,241,253,.62));
}
.u4aide-data-page .data-col-number{width:110px;}
.u4aide-data-page .data-col-writer{width:170px;}
.u4aide-data-page .data-col-date{width:160px;}
.u4aide-data-page .data-board-table tbody tr{
  transition:background .18s ease, transform .18s ease;
}
.u4aide-data-page .data-board-table tr.is-notice td{
  background:linear-gradient(90deg, rgba(255,236,246,.86), rgba(255,248,254,.72));
}
.u4aide-data-page .data-board-table tbody tr:hover td{
  background:rgba(255,255,255,.78);
}
.u4aide-data-page .data-number{
  color:#8b6a95;
  font-weight:850;
}
.u4aide-data-page .data-number-notice{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:48px;
  min-height:26px;
  border-radius:999px;
  background:rgba(239,139,188,.16);
  color:#d84686;
  font-size:13px;
  font-weight:950;
}
.u4aide-data-page .data-subject{
  text-align:left!important;
}
.u4aide-data-page .data-subject button{
  display:inline-flex;
  max-width:100%;
  align-items:center;
  gap:9px;
  border:0;
  background:transparent;
  color:#25172f;
  font:inherit;
  font-size:16px;
  font-weight:850;
  text-align:left;
  cursor:pointer;
}
.u4aide-data-page .data-subject button:hover,
.u4aide-data-page .data-subject button:focus-visible{
  color:#8d50d4;
  text-decoration:none;
}
.u4aide-data-page .data-file-mark{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:25px;
  padding:0 9px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(95,205,242,.18), rgba(169,133,238,.18));
  color:#6c48bd;
  font-size:11px;
  font-weight:950;
  line-height:1;
}
.u4aide-data-page .data-writer,
.u4aide-data-page .data-date{
  color:#7b6286;
  font-weight:760;
}
.u4aide-data-page .data-empty{
  margin:0;
  padding:70px 20px;
  color:#70517d;
  font-weight:900;
  text-align:center;
}
.u4aide-data-page .data-board-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-top:20px;
}
.u4aide-data-page .data-board-footer p{
  margin:0;
  color:#70517d;
  font-weight:850;
}
.u4aide-data-page .data-pager{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:7px;
}
.u4aide-data-page .data-pager button{
  min-width:42px;
  height:42px;
  border:1px solid rgba(220,150,210,.28);
  border-radius:14px;
  background:rgba(255,255,255,.68);
  color:#5a2868;
  font-weight:900;
  cursor:pointer;
}
.u4aide-data-page .data-pager button.is-active{
  border-color:transparent;
  background:linear-gradient(90deg, #5fcdf2, #a985ee 52%, #ef8bbc);
  color:#fff;
  box-shadow:0 10px 24px rgba(169,133,238,.24);
}
.u4aide-data-page .data-pager button:disabled{
  opacity:.44;
  cursor:not-allowed;
}
.u4aide-data-page .data-detail-view{
  position:relative;
  overflow:hidden;
  margin:0;
  padding:0 28px 30px;
  border:1px solid rgba(220,150,210,.26);
  border-radius:28px;
  background:linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,248,254,.68));
  box-shadow:0 18px 52px rgba(190,128,205,.12), inset 0 1px 0 rgba(255,255,255,.72);
}
.u4aide-data-page .data-detail-view:before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:4px;
  background:linear-gradient(90deg, #5fcdf2, #a985ee 52%, #ef8bbc);
}
.u4aide-data-page .data-detail-head{
  padding:28px 0 22px;
  border-bottom:1px solid rgba(121,72,142,.12);
}
.u4aide-data-page .data-detail-head h2{
  margin:4px 0 18px;
  color:#25172f;
  font-size:clamp(23px, 2.3vw, 34px);
  font-weight:950;
  line-height:1.24;
  letter-spacing:-.045em;
}
.u4aide-data-page .data-detail-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  color:#70517d;
  font-size:14px;
  font-weight:800;
}
.u4aide-data-page .data-detail-meta span{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:32px;
  padding:0 12px;
  border-radius:999px;
  background:rgba(255,255,255,.66);
  border:1px solid rgba(220,150,210,.22);
}
.u4aide-data-page .data-detail-meta b{
  color:#8d50d4;
  font-size:12px;
  font-weight:950;
}
.u4aide-data-page .data-detail-files{
  display:grid;
  gap:10px;
  margin-top:18px;
}
.u4aide-data-page .data-attachment{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:54px;
  padding:0 16px;
  border:1px solid rgba(146,84,210,.18);
  border-radius:18px;
  background:rgba(255,255,255,.62);
  color:#25172f;
  font-weight:900;
  text-decoration:none;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.u4aide-data-page .data-attachment:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.88);
  box-shadow:0 12px 28px rgba(140,80,170,.12);
}
.u4aide-data-page .data-attachment:before{
  content:"다운로드";
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:0 9px;
  border-radius:999px;
  color:#6c48bd;
  font-size:11px;
  font-weight:950;
  background:linear-gradient(90deg, rgba(95,205,242,.18), rgba(169,133,238,.18));
}
.u4aide-data-page .data-attachment span{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.u4aide-data-page .data-attachment small,
.u4aide-data-page .data-no-file{
  color:#70517d;
  font-size:13px;
  font-weight:800;
}
.u4aide-data-page .data-detail-content{
  min-height:250px;
  padding:32px 0 56px;
  border-bottom:1px solid rgba(121,72,142,.12);
  color:#4e365b;
  font-size:17px;
  font-weight:620;
  line-height:1.95;
  word-break:keep-all;
}
.u4aide-data-page .data-detail-content a{
  color:#8d50d4;
  font-weight:900;
  text-decoration:underline;
  text-underline-offset:3px;
}
.u4aide-data-page .data-detail-content img{
  max-width:100%;
  height:auto;
  border-radius:18px;
}
.u4aide-data-page .data-neighbor-nav{
  display:grid;
  grid-template-columns:1fr;
  margin-top:0;
  border-bottom:1px solid rgba(121,72,142,.10);
}
.u4aide-data-page .data-neighbor-nav button{
  display:grid;
  grid-template-columns:88px minmax(0, 1fr);
  gap:14px;
  min-height:62px;
  padding:0;
  border:0;
  border-top:1px solid rgba(121,72,142,.10);
  background:transparent;
  text-align:left;
  cursor:pointer;
}
.u4aide-data-page .data-neighbor-nav button:disabled{
  cursor:default;
}
.u4aide-data-page .data-neighbor-nav span{
  display:flex;
  align-items:center;
  color:#8d50d4;
  font-weight:950;
}
.u4aide-data-page .data-neighbor-nav strong,
.u4aide-data-page .data-neighbor-nav em{
  display:flex;
  min-width:0;
  align-items:center;
  overflow:hidden;
  color:#25172f;
  font-style:normal;
  font-weight:850;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.u4aide-data-page .data-neighbor-nav em{
  color:#a58ab1;
}
.u4aide-data-page .data-detail-actions{
  display:flex;
  justify-content:center;
  margin-top:30px;
}
.u4aide-data-page .data-list-btn{
  min-width:128px;
  min-height:52px;
  border:0;
  border-radius:18px;
  background:linear-gradient(90deg, #5fcdf2, #a985ee 52%, #ef8bbc);
  color:#fff;
  font-size:16px;
  font-weight:950;
  cursor:pointer;
  box-shadow:0 14px 30px rgba(169,133,238,.24);
}
.u4aide-data-page .data-list-btn:hover,
.u4aide-data-page .data-list-btn:focus-visible{
  transform:translateY(-1px);
}
@media (max-width:1024px){
  .u4aide-data-page .data-search-bar{
    grid-template-columns:130px minmax(0,1fr) 54px;
  }
  .u4aide-data-page .data-reset-btn{
    grid-column:1 / -1;
  }
  .u4aide-data-page .data-col-number{width:78px;}
  .u4aide-data-page .data-col-writer{width:110px;}
  .u4aide-data-page .data-col-date{width:116px;}
}
@media (max-width:768px){
  .u4aide-data-page .data-room-shell{
    padding-top:80px;
  }
  .u4aide-data-page .data-room{
    padding:20px;
    border-radius:28px;
  }
  .u4aide-data-page .data-room-head{
    display:block;
  }
  .u4aide-data-page .data-search-bar{
    position:relative;
    top:auto;
    grid-template-columns:1fr 54px;
    margin-top:14px;
    padding:12px;
    border-radius:22px;
  }
  .u4aide-data-page .data-search-bar select,
  .u4aide-data-page .data-reset-btn{
    grid-column:1 / -1;
  }
  .u4aide-data-page .data-search-input{
    grid-template-columns:1fr;
    gap:2px;
    padding:8px 12px;
  }
  .u4aide-data-page .data-board-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .u4aide-data-page .data-board-table{
    min-width:660px;
    font-size:14px;
  }
  .u4aide-data-page .data-board-table th,
  .u4aide-data-page .data-board-table td{
    height:52px;
    padding:0 12px;
  }
  .u4aide-data-page .data-board-footer{
    flex-direction:column;
    justify-content:center;
  }
  .u4aide-data-page .data-detail-view{
    padding:0 18px 24px;
    border-radius:24px;
  }
  .u4aide-data-page .data-attachment{
    align-items:flex-start;
    flex-direction:column;
    padding:12px 14px;
  }
  .u4aide-data-page .data-attachment span{
    white-space:normal;
  }
  .u4aide-data-page .data-neighbor-nav button{
    grid-template-columns:62px minmax(0, 1fr);
  }
}

/* ─────────────────────────────────────────────
   U4A Workspace 자료실 final layout guard
   - 리뉴얼 공통 톤 유지
   - 목록/검색/제목 영역 넘침 방지
───────────────────────────────────────────── */
.u4aide-data-page .data-room-shell{
  width:min(1180px, calc(100% - 40px));
  max-width:1180px;
  margin:0 auto;
  padding-top:96px;
}
.u4aide-data-page .data-room-hero,
.u4aide-data-page .data-room{
  width:100%;
  box-sizing:border-box;
}
.u4aide-data-page .data-room{
  padding:30px;
  border-radius:32px;
}
.u4aide-data-page .data-room-head{
  margin-bottom:20px;
}
.u4aide-data-page .data-room-head h2{
  margin:0 0 8px;
  font-size:clamp(28px, 3.2vw, 42px);
  word-break:keep-all;
}
.u4aide-data-page .data-room-head span{
  max-width:760px;
}
.u4aide-data-page .data-search-bar{
  grid-template-columns:142px minmax(0, 1fr) 56px 92px;
  width:100%;
  box-sizing:border-box;
  margin:0 0 20px;
}
.u4aide-data-page .data-search-bar > *,
.u4aide-data-page .data-search-input,
.u4aide-data-page .data-search-input input{
  min-width:0;
  box-sizing:border-box;
}
.u4aide-data-page .data-search-input{
  grid-template-columns:82px minmax(0, 1fr);
  overflow:hidden;
}
.u4aide-data-page .data-search-input span{
  overflow:hidden;
  text-overflow:ellipsis;
}
.u4aide-data-page .data-search-input input{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.u4aide-data-page .data-board-wrap{
  width:100%;
  box-sizing:border-box;
}
.u4aide-data-page .data-board-table{
  table-layout:fixed;
}
.u4aide-data-page .data-col-number{width:86px;}
.u4aide-data-page .data-col-writer{width:132px;}
.u4aide-data-page .data-col-date{width:132px;}
.u4aide-data-page .data-board-table th,
.u4aide-data-page .data-board-table td{
  box-sizing:border-box;
}
.u4aide-data-page .data-subject,
.u4aide-data-page .data-subject button{
  min-width:0;
}
.u4aide-data-page .data-subject button{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
}
.u4aide-data-page .data-subject-text{
  flex:0 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.u4aide-data-page .data-file-mark{
  flex:0 0 auto;
}
.u4aide-data-page .data-empty{
  min-height:160px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 20px;
  box-sizing:border-box;
}
.u4aide-data-page .data-detail-head h2{
  overflow-wrap:anywhere;
  word-break:keep-all;
}
@media (max-width:1024px){
  .u4aide-data-page .data-room-shell{
    width:min(100% - 32px, 980px);
  }
  .u4aide-data-page .data-search-bar{
    grid-template-columns:126px minmax(0, 1fr) 56px;
  }
  .u4aide-data-page .data-reset-btn{
    grid-column:1 / -1;
  }
}
@media (max-width:768px){
  .u4aide-data-page .data-room-shell{
    width:min(100% - 24px, 720px);
    padding-top:82px;
  }
  .u4aide-data-page .data-room{
    padding:18px;
    border-radius:26px;
  }
  .u4aide-data-page .data-search-bar{
    position:relative;
    top:auto;
    grid-template-columns:minmax(0, 1fr) 56px;
  }
  .u4aide-data-page .data-search-bar select,
  .u4aide-data-page .data-reset-btn{
    grid-column:1 / -1;
  }
  .u4aide-data-page .data-search-input{
    grid-template-columns:1fr;
  }
  .u4aide-data-page .data-board-table{
    min-width:640px;
  }
}

/* ─────────────────────────────────────────────
   U4A Workspace 자료실 precision refactor
   - 검색 영역은 구현 예제(u4aide_example.html) 공통 검색 컨셉을 그대로 사용
   - 제목/검색/테이블 넘침 방지
   - /ko/api/data_room.php 기준 PHP 연결 대응
───────────────────────────────────────────── */
.u4aide-data-page .data-room-shell{
  width:min(100% - 40px, var(--maxw));
  max-width:var(--maxw);
  margin:0 auto;
  padding-top:90px;
}
.u4aide-data-page .data-room-hero{
  margin-bottom:22px;
}
.u4aide-data-page .data-room{
  width:100%;
  max-width:100%;
  overflow:visible;
  box-sizing:border-box;
  padding:28px;
  border-radius:34px;
  background:linear-gradient(160deg, rgba(255,255,255,.74), rgba(255,238,251,.52));
  border:1px solid rgba(220,150,210,.30);
  box-shadow:0 22px 70px rgba(190,128,205,.16), inset 0 0 0 1px rgba(255,255,255,.46);
}
.u4aide-data-page .data-room-head{
  display:block;
  margin-bottom:16px;
}
.u4aide-data-page .data-room-head h2{
  margin:2px 0 6px;
  color:#25172f;
  font-size:clamp(26px, 3vw, 38px);
  line-height:1.12;
  letter-spacing:-.045em;
  word-break:keep-all;
}
.u4aide-data-page .data-room-head span{
  display:block;
  max-width:760px;
  color:#70517d;
  font-size:15px;
  line-height:1.65;
  word-break:keep-all;
}
.u4aide-data-page .data-search-bar.example-toolbar{
  position:sticky;
  top:82px;
  z-index:20;
  display:grid;
  grid-template-columns:150px minmax(0, 1fr) 58px 96px;
  align-items:center;
  gap:12px;
  width:100%;
  max-width:100%;
  margin:18px 0 18px;
  padding:16px;
  box-sizing:border-box;
  border:1px solid rgba(172,96,196,.22);
  border-radius:28px;
  background:linear-gradient(160deg, rgba(255,255,255,.88), rgba(255,238,251,.78));
  box-shadow:0 18px 46px rgba(124,72,148,.13), inset 0 0 0 1px rgba(255,255,255,.44);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  overflow:hidden;
}
.u4aide-data-page .data-search-bar > *,
.u4aide-data-page .data-search-input,
.u4aide-data-page .data-search-input input{
  min-width:0;
  box-sizing:border-box;
}
.u4aide-data-page .data-search-field{
  width:100%;
  min-height:64px;
  padding:0 42px 0 18px;
  border:2px solid rgba(146,84,210,.30);
  border-radius:20px;
  outline:0;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,249,255,.88));
  color:#4a2058;
  font-size:15px;
  font-weight:950;
  box-shadow:0 12px 30px rgba(140,80,170,.10), inset 0 0 0 1px rgba(255,255,255,.70);
}
.u4aide-data-page .data-search-input.example-search{
  display:grid;
  grid-template-columns:34px minmax(82px, auto) minmax(0, 1fr);
  align-items:center;
  column-gap:12px;
  width:100%;
  min-height:64px;
  padding:8px 10px 8px 16px;
  border:2px solid rgba(146,84,210,.34);
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,249,255,.88));
  box-shadow:0 12px 30px rgba(140,80,170,.12), inset 0 0 0 1px rgba(255,255,255,.74);
  overflow:hidden;
}
.u4aide-data-page .data-search-input.example-search:before{
  content:"⌕";
  position:static;
  transform:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:12px;
  color:#8d50d4;
  font-size:24px;
  font-weight:900;
  line-height:1;
  background:rgba(151,91,214,.10);
}
.u4aide-data-page .data-search-input.example-search span{
  display:flex;
  align-items:center;
  height:40px;
  padding:0 2px;
  color:#8b44c0;
  font-size:11px;
  font-weight:950;
  letter-spacing:.18em;
  white-space:nowrap;
}
.u4aide-data-page .data-search-input.example-search input{
  width:100%;
  min-height:44px;
  padding:0 16px;
  border-radius:15px;
  border:1px solid rgba(146,84,210,.24);
  outline:0;
  background:rgba(255,255,255,.92);
  color:#25172f;
  font-size:16px;
  font-weight:850;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92), 0 8px 20px rgba(120,72,160,.08);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.u4aide-data-page .data-search-input.example-search input:focus,
.u4aide-data-page .data-search-field:focus{
  border-color:rgba(56,200,232,.72);
  background:#fff;
  box-shadow:0 0 0 4px rgba(96,205,242,.14), 0 10px 24px rgba(120,72,160,.10);
}
.u4aide-data-page .data-search-submit,
.u4aide-data-page .data-reset-btn{
  min-width:0;
  width:100%;
  min-height:58px;
  border-radius:18px;
  font-weight:950;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.u4aide-data-page .data-search-submit{
  border:0;
  color:#fff;
  font-size:22px;
  background:linear-gradient(90deg, #5fcdf2, #a985ee 52%, #ef8bbc);
  box-shadow:0 13px 28px rgba(169,133,238,.25);
}
.u4aide-data-page .data-reset-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(146,84,210,.22);
  color:#5a2868;
  background:rgba(255,255,255,.64);
  text-decoration:none;
}
.u4aide-data-page .data-search-submit:hover,
.u4aide-data-page .data-reset-btn:hover{
  transform:translateY(-1px);
}
.u4aide-data-page .data-board-wrap{
  position:relative;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  overflow:hidden;
  border:1px solid rgba(220,150,210,.26);
  border-radius:28px;
  background:linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,248,254,.68));
  box-shadow:0 18px 52px rgba(190,128,205,.12), inset 0 1px 0 rgba(255,255,255,.72);
}
.u4aide-data-page .data-board-table{
  width:100%;
  table-layout:fixed;
  border-collapse:collapse;
}
.u4aide-data-page .data-col-number{width:86px;}
.u4aide-data-page .data-col-writer{width:132px;}
.u4aide-data-page .data-col-date{width:132px;}
.u4aide-data-page .data-board-table th,
.u4aide-data-page .data-board-table td{
  box-sizing:border-box;
  height:58px;
  padding:0 18px;
  border-bottom:1px solid rgba(121,72,142,.08);
  vertical-align:middle;
}
.u4aide-data-page .data-board-table th{
  color:#4b2459;
  font-size:14px;
  font-weight:950;
  background:rgba(255,255,255,.46);
}
.u4aide-data-page .data-board-table td{
  color:#52365e;
  font-size:15px;
  font-weight:760;
}
.u4aide-data-page .data-subject,
.u4aide-data-page .data-subject button{
  min-width:0;
}
.u4aide-data-page .data-subject button{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  width:100%;
  max-width:100%;
  min-height:58px;
  padding:0;
  border:0;
  background:transparent;
  color:#24142d;
  text-align:left;
  font:inherit;
  font-weight:900;
  cursor:pointer;
  overflow:hidden;
}
.u4aide-data-page .data-subject button:hover{
  color:#8d50d4;
}
.u4aide-data-page .data-subject-text{
  flex:0 1 auto;
  min-width:0;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.u4aide-data-page .data-file-mark{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 8px;
  border-radius:999px;
  color:#6c48bd;
  font-size:11px;
  font-weight:950;
  background:linear-gradient(90deg, rgba(95,205,242,.18), rgba(169,133,238,.18));
}
.u4aide-data-page .data-empty{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:180px;
  margin:0;
  padding:32px 20px;
  color:#70517d;
  font-size:16px;
  font-weight:850;
  text-align:center;
  word-break:keep-all;
}
.u4aide-data-page .data-board-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:18px;
  color:#70517d;
  font-weight:850;
}
@media (max-width:1024px){
  .u4aide-data-page .data-search-bar.example-toolbar{
    grid-template-columns:138px minmax(0, 1fr) 58px;
  }
  .u4aide-data-page .data-reset-btn{
    grid-column:1 / -1;
  }
}
@media (max-width:768px){
  .u4aide-data-page .data-room-shell{
    width:min(100% - 24px, 720px);
    padding-top:82px;
  }
  .u4aide-data-page .data-room{
    padding:18px;
    border-radius:26px;
  }
  .u4aide-data-page .data-search-bar.example-toolbar{
    position:relative;
    top:auto;
    grid-template-columns:minmax(0, 1fr) 58px;
    gap:10px;
    padding:12px;
    border-radius:22px;
  }
  .u4aide-data-page .data-search-field,
  .u4aide-data-page .data-reset-btn{
    grid-column:1 / -1;
  }
  .u4aide-data-page .data-search-input.example-search{
    grid-template-columns:34px minmax(0, 1fr);
  }
  .u4aide-data-page .data-search-input.example-search span{
    display:none;
  }
  .u4aide-data-page .data-board-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .u4aide-data-page .data-board-table{
    min-width:640px;
  }
  .u4aide-data-page .data-board-footer{
    flex-direction:column;
    justify-content:center;
  }
}
@media (max-width:460px){
  .u4aide-data-page .data-search-bar.example-toolbar{
    grid-template-columns:1fr;
  }
  .u4aide-data-page .data-search-submit,
  .u4aide-data-page .data-reset-btn{
    min-height:52px;
  }
}

/* ─────────────────────────────────────────────
   U4A Workspace 자료실 final UX patch
   - loading/empty message hidden 처리 보강
   - 자료 목록 테이블 UX 보정
   - 상세 본문 개행/뒤로가기 사용 흐름 보정용 스타일
───────────────────────────────────────────── */
.u4aide-data-page [hidden],
.u4aide-data-page .data-empty[hidden]{
  display:none!important;
}
.u4aide-data-page .data-board-wrap{
  min-height:0;
}
.u4aide-data-page .data-board-table tbody tr{
  cursor:pointer;
  transition:background .16s ease, transform .16s ease;
}
.u4aide-data-page .data-board-table tbody tr:hover td{
  background:linear-gradient(90deg, rgba(95,205,242,.10), rgba(169,133,238,.08), rgba(239,139,188,.08));
}
.u4aide-data-page .data-board-table tbody tr:active{
  transform:scale(.999);
}
.u4aide-data-page .data-subject-text{
  line-height:1.35;
}
.u4aide-data-page .data-file-mark{
  width:auto!important;
  height:auto!important;
  line-height:1!important;
  white-space:nowrap!important;
  writing-mode:horizontal-tb!important;
  text-orientation:mixed!important;
}
.u4aide-data-page .data-board-footer p:empty{
  display:none;
}
.u4aide-data-page .data-detail-content{
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:keep-all;
}
.u4aide-data-page .data-detail-content p,
.u4aide-data-page .data-detail-content div{
  margin-top:0;
  margin-bottom:1.05em;
}
.u4aide-data-page .data-detail-content br{
  line-height:1.9;
}
.u4aide-data-page .data-detail-empty{
  margin:0;
  color:#8a6a96;
  font-weight:850;
}
.u4aide-data-page .data-pager button{
  border-radius:14px;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.u4aide-data-page .data-pager button:not(:disabled):hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(124,72,148,.12);
}
.u4aide-data-page .data-pager button.is-active{
  border-color:transparent;
  background:linear-gradient(90deg, #5fcdf2, #a985ee 52%, #ef8bbc);
  color:#fff;
  box-shadow:0 12px 26px rgba(169,133,238,.24);
}

/* --------------------------------------------------------------------------
   U4A 자료실 최종 UX 보정
   - 기존 PHP 자료실 흐름은 유지하고, 목록/검색/상세 표현만 리뉴얼 톤으로 정리
--------------------------------------------------------------------------- */
.u4aide-data-page .data-board-table{
  table-layout: fixed;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.u4aide-data-page .data-board-table thead th{
  height: 58px;
  padding: 0 22px;
  color: #4a2d63;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -.02em;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,244,255,.84));
  border-bottom: 1px solid rgba(111,74,150,.12);
  white-space: nowrap;
}

.u4aide-data-page .data-board-table tbody td{
  height: 58px;
  padding: 0 22px;
  border-bottom: 1px solid rgba(108,77,130,.09);
  vertical-align: middle;
}

.u4aide-data-page .data-col-number{ width: 96px; }
.u4aide-data-page .data-col-date{ width: 160px; }

.u4aide-data-page .data-board-table tbody tr{
  cursor: pointer;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.u4aide-data-page .data-board-table tbody tr:hover{
  background: rgba(255,255,255,.68);
  box-shadow: inset 4px 0 0 rgba(130,101,244,.35);
}

.u4aide-data-page .data-number,
.u4aide-data-page .data-number-notice{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  color: #654579;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(118,80,155,.16);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.u4aide-data-page .data-board-table tr.is-notice .data-number,
.u4aide-data-page .data-number-notice{
  color: #fff;
  background: linear-gradient(135deg, #7bd9ff, #8d71f2 52%, #f07cc8);
  border-color: transparent;
  box-shadow: 0 10px 22px rgba(137,103,232,.22);
}

.u4aide-data-page .data-subject button{
  max-width: 100%;
  gap: 10px;
}

.u4aide-data-page .data-subject-text{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.u4aide-data-page .data-file-mark{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  color: #7652d5;
  background: rgba(132,101,235,.10);
  border: 1px solid rgba(132,101,235,.18);
  font-size: 12px;
  font-weight: 900;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
}

.u4aide-data-page .data-search-bar.example-toolbar{
  grid-template-columns: minmax(132px, 180px) minmax(0, 1fr) 64px 118px;
  align-items: stretch;
}

.u4aide-data-page .data-search-submit,
.u4aide-data-page .data-reset-btn{
  height: 58px;
  min-height: 58px;
  align-self: stretch;
}

.u4aide-data-page .data-search-submit{
  width: 64px;
  min-width: 64px;
  font-size: 22px;
  line-height: 1;
}

.u4aide-data-page .data-reset-btn{
  width: 118px;
  min-width: 118px;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
}

.u4aide-data-page .data-detail-content{
  color: #32243f;
  font-size: 16px;
  line-height: 2.05;
  letter-spacing: -.02em;
  word-break: keep-all;
}

.u4aide-data-page .data-detail-content > *:first-child{ margin-top: 0; }
.u4aide-data-page .data-detail-content > *:last-child{ margin-bottom: 0; }

@media (max-width: 760px){
  .u4aide-data-page .data-search-bar.example-toolbar{
    grid-template-columns: 1fr;
  }
  .u4aide-data-page .data-search-submit,
  .u4aide-data-page .data-reset-btn{
    width: 100%;
    min-width: 0;
  }
  .u4aide-data-page .data-col-number{ width: 72px; }
  .u4aide-data-page .data-col-date{ width: 112px; }
  .u4aide-data-page .data-board-table thead th,
  .u4aide-data-page .data-board-table tbody td{
    padding: 0 12px;
  }
}

/* --------------------------------------------------------------------------
   U4A 자료실 재보정
   - 번호/공지 셀은 테이블 형태에 맞게 네모 반듯한 텍스트 영역으로 통일
   - 기존 PHP 브릿지 목록을 10건 페이지 단위로 다시 나누는 API 변경에 맞춰 목록 UX 고정
--------------------------------------------------------------------------- */
.u4aide-data-page .data-board-wrap{
  border-radius:24px;
  overflow:hidden;
}

.u4aide-data-page .data-board-table{
  border-collapse:collapse!important;
  border-spacing:0!important;
}

.u4aide-data-page .data-board-table thead th{
  height:56px;
  padding:0 22px;
  color:#3d234f;
  background:rgba(255,255,255,.82)!important;
  border-bottom:1px solid rgba(108,77,130,.16)!important;
  text-align:left;
}

.u4aide-data-page .data-board-table thead th:first-child,
.u4aide-data-page .data-board-table tbody td:first-child{
  text-align:center;
}

.u4aide-data-page .data-board-table tbody td{
  height:58px;
  background:rgba(255,255,255,.34);
}

.u4aide-data-page .data-board-table tbody tr.is-notice td{
  background:rgba(255,246,252,.76)!important;
}

.u4aide-data-page .data-number,
.u4aide-data-page .data-number-notice,
.u4aide-data-page .data-board-table tr.is-notice .data-number{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  min-width:46px!important;
  height:28px!important;
  padding:0 10px!important;
  border-radius:8px!important;
  color:#4e315e!important;
  background:rgba(255,255,255,.70)!important;
  border:1px solid rgba(118,80,155,.15)!important;
  box-shadow:none!important;
  font-size:13px!important;
  font-weight:900!important;
  line-height:1!important;
}

.u4aide-data-page .data-board-table tr.is-notice .data-number,
.u4aide-data-page .data-number-notice{
  color:#8f2f72!important;
  background:rgba(255,238,249,.88)!important;
  border-color:rgba(224,132,194,.26)!important;
}

.u4aide-data-page .data-file-mark{
  border-radius:8px!important;
}

/* --------------------------------------------------------------------------
   U4A 자료실 안정화 보정
   - 번호 컬럼은 td 자체를 깨뜨리지 않고 가운데 정렬
   - 공지/번호 표시는 네모 반듯한 badge 스타일로 통일
   - 상세 본문은 기존 PHP 개행 느낌에 가깝게 과한 줄간격 제거
--------------------------------------------------------------------------- */
.u4aide-data-page .data-board-table th:first-child,
.u4aide-data-page .data-board-table td.data-number-cell{
  text-align:center!important;
}

.u4aide-data-page .data-board-table td.data-number-cell{
  display:table-cell!important;
  padding-left:12px!important;
  padding-right:12px!important;
  vertical-align:middle!important;
}

.u4aide-data-page .data-number-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  height:28px;
  padding:0 10px;
  border-radius:6px;
  color:#4e315e;
  background:rgba(255,255,255,.76);
  border:1px solid rgba(118,80,155,.16);
  box-shadow:none;
  font-size:13px;
  font-weight:900;
  line-height:1;
  white-space:nowrap;
}

.u4aide-data-page .data-number-cell.is-notice-number .data-number-badge{
  color:#8f2f72;
  background:rgba(255,238,249,.88);
  border-color:rgba(224,132,194,.28);
}

.u4aide-data-page .data-detail-content{
  font-size:16px;
  line-height:1.78!important;
}

.u4aide-data-page .data-detail-content br{
  line-height:1.78!important;
}

.u4aide-data-page .data-detail-content p,
.u4aide-data-page .data-detail-content div{
  margin-top:0!important;
  margin-bottom:.85em!important;
}

/* --------------------------------------------------------------------------
   U4A 자료실 최종 보정: 기존 PHP 상세 본문/번호 컬럼 정렬 안정화
   -------------------------------------------------------------------------- */
.u4aide-data-page .data-board-table th:first-child,
.u4aide-data-page .data-board-table td.data-number-cell{
  text-align:center !important;
  vertical-align:middle !important;
}

.u4aide-data-page .data-board-table td.data-number-cell{
  padding-left:12px !important;
  padding-right:12px !important;
}

.u4aide-data-page .data-number-badge{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:48px !important;
  height:28px !important;
  margin:0 auto !important;
  border-radius:8px !important;
  box-sizing:border-box !important;
}

.u4aide-data-page .data-detail-content{
  padding-top:28px !important;
  font-size:16px !important;
  line-height:1.78 !important;
  letter-spacing:-.015em !important;
}

.u4aide-data-page .data-detail-content p,
.u4aide-data-page .data-detail-content div{
  margin:0 0 12px !important;
  line-height:1.78 !important;
}

.u4aide-data-page .data-detail-content p:empty,
.u4aide-data-page .data-detail-content div:empty{
  display:none !important;
}

.u4aide-data-page .data-detail-content p:has(> br:only-child),
.u4aide-data-page .data-detail-content div:has(> br:only-child){
  min-height:10px !important;
  margin-bottom:8px !important;
}


/* --------------------------------------------------------------------------
   U4A 자료실 검색 영역 마감 보정
   - 검색 조건 select / 검색 아이콘 / 초기화 버튼 / 모바일 배치 최종 안정화
--------------------------------------------------------------------------- */
.u4aide-data-page .data-search-bar.example-toolbar{
  grid-template-columns:minmax(148px, 190px) minmax(0, 1fr) 72px 132px !important;
  gap:14px !important;
  align-items:center !important;
  padding:16px 18px !important;
}

.u4aide-data-page .data-search-field{
  appearance:none !important;
  -webkit-appearance:none !important;
  min-height:62px !important;
  height:62px !important;
  padding:0 54px 0 22px !important;
  border-radius:19px !important;
  border:1px solid rgba(147,91,204,.28) !important;
  color:#3b214e !important;
  background-color:rgba(255,255,255,.82) !important;
  background-image:
    linear-gradient(45deg, transparent 50%, #6d3b87 50%),
    linear-gradient(135deg, #6d3b87 50%, transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,248,255,.88)) !important;
  background-position:
    calc(100% - 27px) 50%,
    calc(100% - 20px) 50%,
    0 0 !important;
  background-size:7px 7px, 7px 7px, 100% 100% !important;
  background-repeat:no-repeat !important;
  box-shadow:0 12px 30px rgba(140,80,170,.09), inset 0 1px 0 rgba(255,255,255,.88) !important;
  letter-spacing:-.02em !important;
}

.u4aide-data-page .data-search-field:hover,
.u4aide-data-page .data-search-field:focus{
  border-color:rgba(142,80,212,.48) !important;
  box-shadow:0 0 0 4px rgba(151,91,214,.10), 0 12px 30px rgba(140,80,170,.12) !important;
}

.u4aide-data-page .data-search-input.example-search{
  min-height:62px !important;
  height:62px !important;
  grid-template-columns:42px minmax(84px, auto) minmax(0, 1fr) !important;
  padding:8px 10px 8px 16px !important;
}

.u4aide-data-page .data-search-input.example-search:before{
  width:42px !important;
  height:42px !important;
  border-radius:15px !important;
  font-size:0 !important;
  background:linear-gradient(135deg, rgba(95,205,242,.22), rgba(169,133,238,.18)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78) !important;
  content:"" !important;
  position:relative !important;
}

.u4aide-data-page .data-search-input.example-search:after{
  content:"";
  position:absolute;
  left:31px;
  top:50%;
  width:14px;
  height:14px;
  margin-top:-9px;
  border:3px solid #8d50d4;
  border-radius:50%;
  box-sizing:border-box;
  pointer-events:none;
}

.u4aide-data-page .data-search-input.example-search span:after{
  content:"";
  position:absolute;
  left:44px;
  top:50%;
  width:9px;
  height:3px;
  margin-top:5px;
  border-radius:999px;
  background:#8d50d4;
  transform:rotate(45deg);
  pointer-events:none;
}

.u4aide-data-page .data-search-input.example-search span{
  position:relative !important;
  font-size:12px !important;
  letter-spacing:.22em !important;
}

.u4aide-data-page .data-search-submit,
.u4aide-data-page .data-reset-btn{
  height:62px !important;
  min-height:62px !important;
  border-radius:19px !important;
}

.u4aide-data-page .data-search-submit{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:72px !important;
  min-width:72px !important;
  color:#fff !important;
}

.u4aide-data-page .data-search-submit-icon{
  position:relative;
  display:block;
  width:27px;
  height:27px;
}

.u4aide-data-page .data-search-submit-icon:before{
  content:"";
  position:absolute;
  left:2px;
  top:2px;
  width:15px;
  height:15px;
  border:3px solid currentColor;
  border-radius:50%;
  box-sizing:border-box;
}

.u4aide-data-page .data-search-submit-icon:after{
  content:"";
  position:absolute;
  right:3px;
  bottom:5px;
  width:12px;
  height:4px;
  border-radius:999px;
  background:currentColor;
  transform:rotate(45deg);
  transform-origin:center;
}

.u4aide-data-page .data-reset-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  width:132px !important;
  min-width:132px !important;
  font-size:14px !important;
  color:#4f2b61 !important;
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,250,255,.72)) !important;
  border:1px solid rgba(137,83,184,.22) !important;
  box-shadow:0 12px 28px rgba(140,80,170,.08), inset 0 1px 0 rgba(255,255,255,.82) !important;
}

.u4aide-data-page .data-reset-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:8px;
  color:#8d50d4;
  background:rgba(151,91,214,.10);
  font-size:15px;
  font-weight:950;
  line-height:1;
}

@media (max-width: 900px){
  .u4aide-data-page .data-search-bar.example-toolbar{
    grid-template-columns:minmax(128px, 160px) minmax(0, 1fr) 66px !important;
  }
  .u4aide-data-page .data-reset-btn{
    grid-column:1 / -1 !important;
    width:100% !important;
    min-width:0 !important;
  }
  .u4aide-data-page .data-search-submit{
    width:66px !important;
    min-width:66px !important;
  }
}

@media (max-width: 760px){
  .u4aide-data-page .data-room-shell{
    width:min(100% - 20px, 720px) !important;
  }
  .u4aide-data-page .data-room{
    padding:20px !important;
  }
  .u4aide-data-page .data-search-bar.example-toolbar{
    grid-template-columns:minmax(0, 1fr) 62px !important;
    gap:10px !important;
    padding:12px !important;
    border-radius:24px !important;
  }
  .u4aide-data-page .data-search-field{
    grid-column:1 / -1 !important;
    height:58px !important;
    min-height:58px !important;
  }
  .u4aide-data-page .data-search-input.example-search{
    grid-column:1 / 2 !important;
    height:58px !important;
    min-height:58px !important;
    grid-template-columns:42px minmax(0, 1fr) !important;
  }
  .u4aide-data-page .data-search-input.example-search span{
    display:none !important;
  }
  .u4aide-data-page .data-search-submit{
    grid-column:2 / 3 !important;
    width:62px !important;
    min-width:62px !important;
    height:58px !important;
    min-height:58px !important;
  }
  .u4aide-data-page .data-reset-btn{
    grid-column:1 / -1 !important;
    width:100% !important;
    min-width:0 !important;
    height:56px !important;
    min-height:56px !important;
  }
}

@media (max-width: 460px){
  .u4aide-data-page .data-room{
    padding:16px !important;
  }
  .u4aide-data-page .data-search-bar.example-toolbar{
    grid-template-columns:minmax(0, 1fr) 58px !important;
    padding:10px !important;
  }
  .u4aide-data-page .data-search-field,
  .u4aide-data-page .data-search-input.example-search,
  .u4aide-data-page .data-search-submit{
    height:54px !important;
    min-height:54px !important;
  }
  .u4aide-data-page .data-reset-btn{
    height:52px !important;
    min-height:52px !important;
  }
}

/* 검색 input 앞 돋보기 아이콘 위치 재보정 */
.u4aide-data-page .data-search-input.example-search{
  position:relative !important;
}
.u4aide-data-page .data-search-input.example-search:before{
  content:"⌕" !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#8d50d4 !important;
  font-size:28px !important;
  line-height:1 !important;
}
.u4aide-data-page .data-search-input.example-search:after,
.u4aide-data-page .data-search-input.example-search span:after{
  display:none !important;
}
.u4aide-data-page .data-search-field option{
  color:#3b214e;
  background:#fff;
  font-weight:800;
}

/* --------------------------------------------------------------------------
   U4A 자료실 검색 UI 아이콘 최종 보정
   - 검색 입력 좌측 돋보기는 박스 중앙에 고정
   - 조회 버튼 돋보기 아이콘 복구 및 크기 보정
   - 초기화 버튼 아이콘/텍스트 비율 보정
--------------------------------------------------------------------------- */
.u4aide-data-page .data-search-input.example-search{
  position:relative !important;
  display:grid !important;
  grid-template-columns:48px max-content minmax(0, 1fr) !important;
  align-items:center !important;
  column-gap:16px !important;
  overflow:hidden !important;
}

.u4aide-data-page .data-search-input.example-search:before{
  content:"" !important;
  position:static !important;
  display:block !important;
  width:46px !important;
  height:46px !important;
  margin:0 !important;
  align-self:center !important;
  justify-self:center !important;
  border-radius:16px !important;
  background-color:rgba(151,91,214,.10) !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%238d50d4' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.2'/%3E%3Cpath d='m16.2 16.2 4.2 4.2'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:25px 25px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78) !important;
}

.u4aide-data-page .data-search-input.example-search:after,
.u4aide-data-page .data-search-input.example-search span:after{
  content:none !important;
  display:none !important;
}

.u4aide-data-page .data-search-input.example-search span{
  align-self:center !important;
  display:inline-flex !important;
  align-items:center !important;
  height:100% !important;
  margin:0 !important;
  line-height:1 !important;
}

.u4aide-data-page .data-search-input.example-search input{
  align-self:center !important;
  height:100% !important;
  line-height:1.2 !important;
}

.u4aide-data-page .data-search-submit{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  border:0 !important;
  background:linear-gradient(135deg, #63cdf1 0%, #9d75ef 48%, #e477c4 100%) !important;
  box-shadow:0 16px 34px rgba(139,91,218,.24), inset 0 1px 0 rgba(255,255,255,.45) !important;
}

.u4aide-data-page .data-search-submit::before{
  content:"" !important;
  display:block !important;
  width:30px !important;
  height:30px !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16.2 16.2 4.3 4.3'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:30px 30px !important;
}

.u4aide-data-page .data-search-submit-icon{
  display:none !important;
}

.u4aide-data-page .data-reset-btn{
  gap:10px !important;
  font-size:17px !important;
  font-weight:900 !important;
  letter-spacing:-.02em !important;
}

.u4aide-data-page .data-reset-icon{
  width:30px !important;
  height:30px !important;
  border-radius:10px !important;
  font-size:20px !important;
  font-weight:950 !important;
  line-height:1 !important;
}

@media (max-width: 760px){
  .u4aide-data-page .data-search-input.example-search{
    grid-template-columns:46px minmax(0, 1fr) !important;
    column-gap:12px !important;
  }
  .u4aide-data-page .data-search-input.example-search:before{
    width:42px !important;
    height:42px !important;
    background-size:23px 23px !important;
  }
  .u4aide-data-page .data-search-input.example-search span{
    display:none !important;
  }
  .u4aide-data-page .data-search-submit::before{
    width:28px !important;
    height:28px !important;
    background-size:28px 28px !important;
  }
  .u4aide-data-page .data-reset-btn{
    font-size:16px !important;
  }
}


.nav-menu{
  min-width:260px;
}
.nav-menu a{
  white-space:nowrap;
}
.brand-text strong{
  white-space:nowrap;
}
@media (max-width:1180px) and (min-width:1025px){
  .brand-text small{
    display:none;
  }
  .nav-item>a{
    padding-left:10px;
    padding-right:10px;
  }
}


/* ─────────────────────────────────────────────
   U4A PWA install prompt
   - 헤더 버튼 없이, 설치 가능한 환경에서만 상단 안내 팝업을 표시한다.
───────────────────────────────────────────── */
.pwa-install-prompt{
  position:fixed;
  left:50%;
  top:18px;
  z-index:260;
  width:min(720px, calc(100% - 32px));
  opacity:0;
  pointer-events:none;
  transform:translate(-50%, -16px);
  transition:opacity .22s ease, transform .22s ease;
}
.pwa-install-prompt.is-visible{
  opacity:1;
  pointer-events:auto;
  transform:translate(-50%, 0);
}
.pwa-install-prompt__inner{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 15px;
  border:1px solid rgba(220,150,210,.34);
  border-radius:22px;
  background:linear-gradient(160deg, rgba(255,255,255,.94), rgba(255,237,252,.90));
  box-shadow:0 22px 58px rgba(120,60,140,.22), inset 0 1px 0 rgba(255,255,255,.82);
  backdrop-filter:blur(20px);
}
.pwa-install-prompt__icon{
  flex:0 0 42px;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:linear-gradient(135deg, rgba(142,84,198,.95), rgba(232,121,214,.92));
  color:#fff;
  font-size:18px;
  font-weight:1000;
  box-shadow:0 12px 26px rgba(160,80,190,.22);
}
.pwa-install-prompt__copy{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
  color:#3a1a40;
}
.pwa-install-prompt__copy strong{
  font-size:15px;
  font-weight:1000;
  letter-spacing:-.03em;
}
.pwa-install-prompt__copy span{
  font-size:13px;
  font-weight:750;
  line-height:1.45;
  color:#72406f;
}
.pwa-install-prompt__actions{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:8px;
}
.pwa-install-prompt__primary,
.pwa-install-prompt__ghost{
  min-height:38px;
  padding:0 14px;
  border-radius:13px;
  font-size:13px;
  font-weight:950;
  letter-spacing:-.02em;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pwa-install-prompt__primary{
  border:1px solid rgba(160,82,190,.22);
  background:linear-gradient(135deg, #8e54c6, #df78cf);
  color:#fff;
  box-shadow:0 12px 26px rgba(160,80,190,.24);
}
.pwa-install-prompt__ghost{
  border:1px solid rgba(220,150,210,.34);
  background:rgba(255,255,255,.64);
  color:#683176;
}
.pwa-install-prompt__primary:hover,
.pwa-install-prompt__ghost:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 30px rgba(180,100,200,.18), inset 0 1px 0 rgba(255,255,255,.52);
}
.pwa-install-toast{
  position:fixed;
  left:50%;
  bottom:24px;
  z-index:240;
  max-width:min(520px, calc(100% - 32px));
  padding:14px 18px;
  border-radius:18px;
  background:linear-gradient(160deg, rgba(255,255,255,.94), rgba(255,237,252,.90));
  border:1px solid rgba(220,150,210,.34);
  color:#3a1a40;
  font-size:14px;
  font-weight:800;
  line-height:1.55;
  text-align:center;
  box-shadow:0 18px 46px rgba(120,60,140,.20), inset 0 1px 0 rgba(255,255,255,.82);
  backdrop-filter:blur(18px);
  opacity:0;
  pointer-events:none;
  transform:translate(-50%, 14px);
  transition:opacity .22s ease, transform .22s ease;
}
.pwa-install-toast.is-visible{opacity:1;transform:translate(-50%, 0)}
@media (max-width:768px){
  .pwa-install-prompt{top:12px;width:calc(100% - 24px)}
  .pwa-install-prompt__inner{align-items:flex-start;padding:13px;border-radius:20px}
  .pwa-install-prompt__icon{display:none}
  .pwa-install-prompt__actions{flex-direction:column;align-items:stretch}
  .pwa-install-prompt__primary,
  .pwa-install-prompt__ghost{min-height:36px;padding:0 12px;white-space:nowrap}
  .pwa-install-toast{bottom:16px;font-size:13px;border-radius:16px}
}
@media (max-width:520px){
  .pwa-install-prompt__inner{flex-direction:column;gap:10px}
  .pwa-install-prompt__actions{width:100%;flex-direction:row}
  .pwa-install-prompt__primary,
  .pwa-install-prompt__ghost{flex:1 1 0}
}

/* ─────────────────────────────────────────────
   Admin entry & admin pages
───────────────────────────────────────────── */
.site-footer .footer-admin-link{
  position:absolute;
  right:168px;
  top:50%;
  transform:translateY(-50%);
  display:inline-grid !important;
  place-items:center;
  width:46px !important;
  height:46px !important;
  min-width:46px !important;
  min-height:46px !important;
  padding:0 !important;
  border-radius:16px !important;
  font-size:0 !important;
  line-height:1 !important;
  background:linear-gradient(135deg, rgba(255,255,255,.74), rgba(239,248,255,.56), rgba(255,234,249,.58)) !important;
  border:1px solid rgba(160,190,240,.30) !important;
  box-shadow:0 10px 24px rgba(120,150,210,.12), inset 0 0 0 1px rgba(255,255,255,.56);
}
.site-footer .footer-admin-link:after{
  content:"";
}
.site-footer .footer-admin-icon{
  width:20px;
  height:20px;
  fill:none;
  stroke:#7e3f91;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.site-footer .footer-admin-link:hover{
  transform:translateY(-50%) translateY(-1px);
  background:linear-gradient(135deg, rgba(255,255,255,.90), rgba(230,247,255,.68), rgba(255,229,248,.72)) !important;
}
.admin-page{min-height:100vh;}
.admin-login-shell{width:min(560px, calc(100% - 36px));min-height:100vh;margin:0 auto;display:grid;place-items:center;padding:48px 0;}
.admin-login-card{width:100%;padding:34px;border-radius:32px;}
.admin-back-link{display:inline-flex;align-items:center;min-height:34px;margin-bottom:24px;padding:0 13px;border-radius:999px;background:rgba(255,255,255,.52);border:1px solid rgba(220,150,210,.22);color:#774084;font-size:13px;font-weight:850;}
.admin-login-brand{display:grid;grid-template-columns:70px 1fr;gap:18px;align-items:center;}
.admin-brand-mark{display:grid;place-items:center;width:70px;height:70px;border-radius:24px;background:linear-gradient(135deg,#38c8e8,#9b60e0 54%,#f06ab0);color:#fff;font-size:22px;font-weight:950;box-shadow:0 18px 36px rgba(180,100,200,.28);}
.admin-login-brand p,.admin-topbar p{margin:0;color:#c060b0;font-size:12px;font-weight:950;letter-spacing:.16em;text-transform:uppercase;}
.admin-login-brand h1,.admin-topbar h1{margin:6px 0 0;font-size:clamp(32px,4vw,46px);line-height:1.05;letter-spacing:-.06em;color:#2a1030;}
.admin-login-desc{margin:22px 0 24px;color:#765083;line-height:1.65;}
.admin-login-form{display:grid;gap:16px;}
.admin-login-form label{display:grid;gap:8px;}
.admin-login-form label span{color:#5a2868;font-size:13px;font-weight:900;}
.admin-login-form input{width:100%;height:54px;border:1px solid rgba(220,150,210,.28);border-radius:18px;padding:0 16px;background:rgba(255,255,255,.66);color:#2a1030;font:inherit;font-weight:750;outline:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);}
.admin-login-form input:focus{border-color:rgba(155,120,230,.55);box-shadow:0 0 0 4px rgba(155,120,230,.10), inset 0 0 0 1px rgba(255,255,255,.62);}
.admin-login-form .admin-secret-input:not(:placeholder-shown){-webkit-text-security:disc;text-security:disc;}
.admin-login-message{min-height:22px;margin:0;color:#7a5088;font-size:13px;font-weight:800;}
.admin-login-message[data-type="error"]{color:#c43f77;}
.admin-login-message[data-type="success"]{color:#347f88;}
.admin-login-submit{width:100%;border:0;cursor:pointer;}
.admin-login-submit:disabled{opacity:.62;cursor:wait;}

/* 관리자 화면은 서버 세션 확인이 완료되기 전까지 표시하지 않는다.
   로그아웃 후 브라우저 뒤로가기로 BFCache 화면이 복원되는 경우도 이 규칙으로 차단한다. */
.admin-shell[data-admin-page]{visibility:hidden;}
.admin-shell[data-admin-page].is-session-ready,
.admin-shell[data-admin-page].is-session-check-failed{visibility:visible;}

.admin-shell{width:min(1440px, calc(100% - 36px));min-height:100vh;margin:0 auto;padding:28px 0;display:grid;grid-template-columns:300px 1fr;gap:22px;}
.admin-sidebar{position:sticky;top:28px;align-self:start;min-height:calc(100vh - 56px);padding:22px;display:flex;flex-direction:column;border-radius:30px;}
.admin-side-logo{display:flex;align-items:center;gap:14px;padding-bottom:20px;border-bottom:1px solid rgba(220,150,210,.20);}
.admin-side-logo span{display:grid;place-items:center;width:52px;height:52px;border-radius:18px;background:linear-gradient(135deg,#38c8e8,#9b60e0 54%,#f06ab0);color:#fff;font-weight:950;box-shadow:0 14px 28px rgba(180,100,200,.24);}
.admin-side-logo strong{font-size:24px;letter-spacing:-.04em;color:#2a1030;}
.admin-side-nav{display:grid;gap:10px;margin-top:22px;}
.admin-side-nav a{display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:center;min-height:54px;padding:8px 12px;border-radius:18px;color:#70447a;font-weight:900;transition:.18s ease;}
.admin-side-nav a i{display:grid;place-items:center;width:34px;height:34px;border-radius:12px;background:rgba(220,120,200,.12);font-style:normal;font-size:12px;color:#9a4a93;}
.admin-side-nav a:hover,.admin-side-nav a.is-active{background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(255,232,249,.58));box-shadow:inset 0 0 0 1px rgba(220,150,210,.24);}
.admin-side-footer{margin-top:auto;display:grid;grid-template-columns:1fr;gap:10px;padding-top:18px;}
.admin-side-footer .ghost-btn{width:100%;border:0;cursor:pointer;}
.admin-content{min-height:calc(100vh - 56px);padding:28px;border-radius:30px;}
/* 관리자 콘텐츠는 우측 상세 sticky가 브라우저 스크롤 기준으로 동작해야 하므로 overflow를 열어둔다. */
.admin-dashboard-page .admin-content{overflow:visible;}
.admin-dashboard-page .admin-content:before{border-radius:inherit;}
.admin-topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-bottom:22px;border-bottom:1px solid rgba(220,150,210,.20);}
.admin-user-badge{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 15px;border-radius:999px;background:rgba(255,255,255,.60);border:1px solid rgba(220,150,210,.24);color:#6a3476;font-size:13px;font-weight:900;}
.admin-welcome-card,.admin-ready-panel{margin-top:24px;padding:28px;border-radius:26px;background:linear-gradient(135deg,rgba(255,255,255,.62),rgba(255,232,249,.42),rgba(235,248,255,.42));border:1px solid rgba(220,150,210,.22);}
.admin-welcome-card strong,.admin-ready-panel strong{display:block;font-size:26px;line-height:1.25;letter-spacing:-.04em;color:#2a1030;}
.admin-welcome-card p,.admin-ready-panel p{max-width:760px;margin:12px 0 22px;color:#7a5088;line-height:1.7;}
.admin-ready-icon{display:grid;place-items:center;width:58px;height:58px;margin-bottom:18px;border-radius:20px;background:linear-gradient(135deg,rgba(56,200,232,.20),rgba(240,106,176,.18));border:1px solid rgba(220,150,210,.22);font-size:24px;color:#8a3888;}
.admin-ready-actions{display:flex;gap:12px;flex-wrap:wrap;}
@media (max-width:900px){
  .admin-shell{grid-template-columns:1fr;padding:18px 0;}
  .admin-sidebar{position:relative;top:auto;min-height:auto;}
  .admin-side-footer{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:768px){
  .site-footer .footer-admin-link{position:absolute;right:16px;top:16px;transform:none;width:38px !important;height:38px !important;min-width:38px !important;min-height:38px !important;border-radius:14px !important;margin-top:0;}
  .site-footer .footer-admin-icon{width:18px;height:18px;}
  .site-footer .footer-admin-link:hover{transform:translateY(-1px);}
  .admin-login-card,.admin-content,.admin-sidebar{padding:20px;border-radius:24px;}
  .admin-login-brand{grid-template-columns:56px 1fr;}
  .admin-brand-mark{width:56px;height:56px;border-radius:20px;font-size:18px;}
  .admin-topbar{align-items:flex-start;flex-direction:column;}
  .admin-ready-actions .primary-btn,.admin-ready-actions .ghost-btn{width:100%;}
}

/* -----------------------------------------------------------------------------
 * U4A Admin - Data Room Management
 * -------------------------------------------------------------------------- */
.admin-side-nav a.is-active{
  position:relative;
  background:linear-gradient(135deg,rgba(255,255,255,.86),rgba(255,228,248,.72),rgba(232,248,255,.62));
  box-shadow:0 14px 34px rgba(171,91,183,.16), inset 0 0 0 1px rgba(213,111,205,.32);
  color:#2f1238;
}
.admin-side-nav a.is-active:before{
  content:"";
  position:absolute;
  left:0;
  top:12px;
  bottom:12px;
  width:4px;
  border-radius:0 999px 999px 0;
  background:linear-gradient(180deg,#38c8e8,#b46be6 58%,#f06ab0);
}
.admin-side-nav a.is-active i{
  background:linear-gradient(135deg,rgba(56,200,232,.24),rgba(240,106,176,.22));
  color:#6a247a;
}
.admin-data-toolbar{
  margin-top:24px;
  display:grid;
  grid-template-columns:minmax(220px,.7fr) minmax(360px,1.3fr) auto;
  gap:14px;
  align-items:center;
  padding:16px;
  border-radius:26px;
  background:linear-gradient(135deg,rgba(255,255,255,.62),rgba(255,238,251,.42));
  border:1px solid rgba(220,150,210,.20);
}
.admin-data-summary{display:grid;gap:4px;}
.admin-data-summary span{font-size:12px;font-weight:950;letter-spacing:.12em;color:#bd66b4;text-transform:uppercase;}
.admin-data-summary strong{font-size:22px;color:#2a1030;letter-spacing:-.04em;}
.admin-data-search{display:grid;grid-template-columns:112px 1fr auto auto;gap:10px;align-items:center;}
.admin-data-search select,.admin-data-search input,.admin-data-form input,.admin-data-form select,.admin-data-form textarea,.admin-data-html-editor{
  width:100%;
  border:1px solid rgba(220,150,210,.28);
  border-radius:16px;
  background:rgba(255,255,255,.68);
  color:#2a1030;
  font:inherit;
  font-weight:750;
  outline:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.52);
}
.admin-data-search select,.admin-data-search input{height:46px;padding:0 13px;}
.admin-data-search select:focus,.admin-data-search input:focus,.admin-data-form input:focus,.admin-data-form select:focus,.admin-data-form textarea:focus,.admin-data-html-editor:focus{
  border-color:rgba(155,120,230,.55);
  box-shadow:0 0 0 4px rgba(155,120,230,.10), inset 0 0 0 1px rgba(255,255,255,.62);
}
.admin-data-new-btn{min-height:46px;white-space:nowrap;border:0;cursor:pointer;}
.admin-data-layout{margin-top:18px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);gap:18px;align-items:start;}
.admin-data-list-card,.admin-data-preview{
  min-width:0;
  border-radius:26px;
  padding:20px;
  background:linear-gradient(135deg,rgba(255,255,255,.58),rgba(255,242,252,.38),rgba(235,248,255,.30));
  border:1px solid rgba(220,150,210,.20);
}
.admin-data-list-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;}
.admin-data-list-head strong{font-size:20px;color:#2a1030;letter-spacing:-.04em;}
.admin-data-list-head span{font-size:12px;font-weight:900;color:#865191;}
.admin-data-table-wrap{position:relative;overflow:auto;border-radius:20px;border:1px solid rgba(220,150,210,.20);background:rgba(255,255,255,.45);}
.admin-data-table{width:100%;border-collapse:separate;border-spacing:0;min-width:720px;}
.admin-data-table th{height:46px;padding:0 14px;background:rgba(255,232,249,.52);color:#774084;font-size:12px;font-weight:950;text-align:left;white-space:nowrap;}
.admin-data-table td{padding:12px 14px;border-top:1px solid rgba(220,150,210,.16);color:#5d3a68;font-size:14px;vertical-align:middle;}
.admin-data-table tr{transition:.16s ease;}
.admin-data-table tr:hover,.admin-data-table tr.is-selected{background:rgba(255,255,255,.68);}
.admin-data-table tr.is-selected td:first-child{box-shadow:inset 4px 0 0 rgba(188,93,206,.70);}
.admin-data-number{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:30px;padding:0 9px;border-radius:999px;background:rgba(220,120,200,.12);font-size:12px;font-weight:950;color:#85458e;}
.admin-data-number.is-notice{background:rgba(56,200,232,.16);color:#257f91;}
.admin-data-title-btn{width:100%;display:flex;align-items:center;gap:8px;border:0;background:transparent;color:#2a1030;text-align:left;cursor:pointer;font:inherit;font-weight:900;}
.admin-data-title-btn strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.admin-data-file-mark{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border-radius:999px;background:rgba(56,200,232,.14);color:#2b7c91;font-size:11px;font-style:normal;font-weight:950;white-space:nowrap;}
.admin-data-row-actions{display:flex;gap:7px;justify-content:flex-end;}
.admin-data-row-actions button{height:34px;padding:0 11px;border-radius:999px;border:1px solid rgba(220,150,210,.24);background:rgba(255,255,255,.62);color:#70447a;font:inherit;font-size:12px;font-weight:950;cursor:pointer;}
.admin-data-row-actions button:hover{background:rgba(255,232,249,.68);}
.admin-data-empty{padding:34px 18px;color:#7a5088;text-align:center;font-weight:850;}
.admin-data-pager{display:flex;justify-content:center;gap:7px;flex-wrap:wrap;margin-top:16px;}
.admin-data-pager button{min-width:38px;height:38px;padding:0 12px;border-radius:999px;border:1px solid rgba(220,150,210,.24);background:rgba(255,255,255,.60);color:#70447a;font:inherit;font-size:13px;font-weight:950;cursor:pointer;}
.admin-data-pager button.is-active{background:linear-gradient(135deg,#38c8e8,#9b60e0 54%,#f06ab0);color:#fff;border-color:transparent;box-shadow:0 12px 24px rgba(180,100,200,.20);}
.admin-data-pager button:disabled{opacity:.45;cursor:not-allowed;}
.admin-data-preview{position:sticky;top:28px;max-height:calc(100vh - 56px);overflow:auto;}
.admin-data-preview-empty{min-height:340px;display:grid;place-items:center;text-align:center;align-content:center;padding:26px;color:#7a5088;}
.admin-data-preview-empty span{display:grid;place-items:center;width:58px;height:58px;margin-bottom:16px;border-radius:20px;background:linear-gradient(135deg,rgba(56,200,232,.20),rgba(240,106,176,.18));font-size:24px;color:#8a3888;}
.admin-data-preview-empty strong{font-size:22px;line-height:1.3;letter-spacing:-.04em;color:#2a1030;}
.admin-data-preview-empty p{margin:10px auto 0;max-width:320px;line-height:1.65;}
.admin-data-preview-head span,.admin-data-form-head p{margin:0;color:#c060b0;font-size:12px;font-weight:950;letter-spacing:.16em;text-transform:uppercase;}
.admin-data-preview-head h2{margin:7px 0 8px;color:#2a1030;font-size:clamp(24px,3vw,34px);line-height:1.2;letter-spacing:-.05em;}
.admin-data-preview-head p{margin:0;color:#7a5088;font-weight:800;}
.admin-data-preview-actions{display:flex;gap:9px;flex-wrap:wrap;margin:18px 0;}
.admin-data-preview-actions .primary-btn,.admin-data-preview-actions .ghost-btn{min-height:40px;padding:0 14px;border:0;cursor:pointer;}
.admin-data-preview-section{margin-top:16px;padding-top:16px;border-top:1px solid rgba(220,150,210,.18);}
.admin-data-preview-section>strong{display:block;margin-bottom:10px;color:#4a2556;font-size:14px;font-weight:950;}
.admin-data-preview-content{max-height:360px;overflow:auto;padding:16px;border-radius:18px;background:rgba(255,255,255,.52);border:1px solid rgba(220,150,210,.16);color:#55305f;line-height:1.72;font-size:14px;}
.admin-data-file-link{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 13px;border-radius:16px;background:rgba(255,255,255,.58);border:1px solid rgba(220,150,210,.18);color:#4d2458;font-weight:900;}
.admin-data-file-link+ .admin-data-file-link{margin-top:8px;}
.admin-data-file-link small{color:#8a5b96;font-weight:800;white-space:nowrap;}
.admin-data-muted{margin:0;color:#8a5b96;font-weight:800;}
.admin-data-modal{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:24px;}
.admin-data-modal[hidden]{display:none;}
.admin-data-modal-backdrop{position:absolute;inset:0;background:rgba(34,14,42,.36);backdrop-filter:blur(10px);}
.admin-data-form-card{position:relative;width:min(760px,100%);max-height:calc(100vh - 48px);overflow:auto;border-radius:30px;padding:26px;}
.admin-data-form-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding-bottom:18px;border-bottom:1px solid rgba(220,150,210,.20);}
.admin-data-form-head h2{margin:6px 0 0;font-size:clamp(28px,4vw,40px);line-height:1.08;letter-spacing:-.06em;color:#2a1030;}
.admin-data-icon-btn{display:grid;place-items:center;width:42px;height:42px;border-radius:16px;border:1px solid rgba(220,150,210,.22);background:rgba(255,255,255,.62);color:#6a3476;font-size:28px;line-height:1;cursor:pointer;}
.admin-data-form{display:grid;gap:15px;margin-top:18px;}
.admin-data-form label{display:grid;gap:8px;}
.admin-data-form label span{color:#5a2868;font-size:13px;font-weight:950;}
.admin-data-form input,.admin-data-form select{height:50px;padding:0 14px;}
.admin-data-form select{cursor:pointer;}
.admin-data-form textarea{min-height:230px;padding:14px;resize:vertical;line-height:1.65;}
.admin-data-category-field small,.admin-data-editor-field small{color:#8a5b96;font-weight:800;line-height:1.45;}
.admin-data-editor-field .tox-tinymce{border-radius:18px!important;border-color:rgba(220,150,210,.28)!important;box-shadow:0 14px 36px rgba(78,40,92,.08);overflow:hidden;}
.admin-data-editor-field .tox .tox-toolbar,.admin-data-editor-field .tox .tox-toolbar__primary,.admin-data-editor-field .tox .tox-edit-area__iframe{background:rgba(255,255,255,.82)!important;}
.admin-data-editor-field .tox .tox-statusbar{background:rgba(255,248,253,.88)!important;}
.tox.tox-tinymce-aux{z-index:2100!important;}
.admin-data-editor-toolbar{display:flex;gap:7px;flex-wrap:wrap;padding:8px;border-radius:16px;background:rgba(255,255,255,.48);border:1px solid rgba(220,150,210,.18);}
.admin-data-editor-toolbar button{height:32px;padding:0 11px;border-radius:999px;border:1px solid rgba(220,150,210,.22);background:rgba(255,255,255,.72);color:#653070;font:inherit;font-size:12px;font-weight:950;cursor:pointer;}
.admin-data-editor-toolbar button:hover{background:rgba(255,232,249,.74);}
.admin-data-html-editor{min-height:250px;max-height:420px;overflow:auto;padding:16px;line-height:1.72;font-weight:700;}
.admin-data-html-editor:empty:before{content:attr(data-placeholder);color:#9c7aa5;font-weight:800;}
.admin-data-file-field input{padding:12px;height:auto;}
.admin-data-file-field small{color:#8a5b96;font-weight:800;}
.admin-data-check{display:flex!important;grid-template-columns:none!important;align-items:center;gap:10px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.52);border:1px solid rgba(220,150,210,.18);}
.admin-data-check input{width:18px;height:18px;box-shadow:none;}
.admin-data-check span{font-size:13px;color:#5a2868;font-weight:900;}
.admin-data-message{min-height:20px;margin:0;color:#7a5088;font-size:13px;font-weight:850;}
.admin-data-message[data-type="error"]{color:#c43f77;}
.admin-data-message[data-type="success"]{color:#347f88;}
.admin-data-form-actions{display:flex;justify-content:flex-end;gap:10px;padding-top:4px;}
.admin-data-form-actions .primary-btn,.admin-data-form-actions .ghost-btn{border:0;cursor:pointer;}
.is-admin-modal-open{overflow:hidden;}
.is-admin-data-loading .admin-data-table-wrap,.is-admin-data-loading .admin-data-preview{opacity:.72;}
@media (max-width:1180px){
  .admin-data-toolbar{grid-template-columns:1fr;}
  .admin-data-new-btn{width:100%;}
  .admin-data-layout{grid-template-columns:1fr;}
  .admin-data-preview{position:relative;top:auto;max-height:none;}
}
@media (max-width:720px){
  .admin-data-search{grid-template-columns:1fr 1fr;}
  .admin-data-search input{grid-column:1/-1;}
  .admin-data-search .ghost-btn{width:100%;}
  .admin-data-row-actions{justify-content:flex-start;}
  .admin-data-modal{padding:12px;}
  .admin-data-form-card{padding:20px;border-radius:24px;max-height:calc(100vh - 24px);}
  .admin-data-form-actions{display:grid;grid-template-columns:1fr;}
}

/* --------------------------------------------------------------------------
   U4A Admin refinement - API page menu visibility
-------------------------------------------------------------------------- */
.admin-side-nav a.is-active,
.admin-side-nav a[aria-current="page"]{
  position:relative;
  color:#fff!important;
  background:linear-gradient(135deg,#38c8e8 0%,#9b60e0 48%,#f06ab0 100%)!important;
  box-shadow:0 18px 34px rgba(155,96,224,.26), inset 0 0 0 1px rgba(255,255,255,.34)!important;
  transform:translateX(4px);
}
.admin-side-nav a.is-active:before,
.admin-side-nav a[aria-current="page"]:before{
  content:"";
  position:absolute;
  left:-13px;
  top:12px;
  bottom:12px;
  width:5px;
  border-radius:999px;
  background:linear-gradient(180deg,#38c8e8,#f06ab0);
  box-shadow:0 0 18px rgba(240,106,176,.48);
}
.admin-side-nav a.is-active i,
.admin-side-nav a[aria-current="page"] i{
  background:rgba(255,255,255,.24)!important;
  color:#fff!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
}
.admin-side-nav a.is-active span,
.admin-side-nav a[aria-current="page"] span{
  color:#fff!important;
  text-shadow:0 1px 8px rgba(60,20,80,.18);
}
.admin-data-table tr.is-selected{
  background:linear-gradient(90deg,rgba(56,200,232,.16),rgba(240,106,176,.12))!important;
}
.admin-data-table tr.is-selected td:first-child{
  box-shadow:inset 6px 0 0 #9b60e0!important;
}

/* --------------------------------------------------------------------------
   U4A Admin refinement - large data-room editor modal
-------------------------------------------------------------------------- */
.admin-data-modal{
  padding:24px!important;
  align-items:center!important;
  justify-items:center!important;
}
.admin-data-form-card{
  width:min(1380px,calc(100vw - 48px))!important;
  height:calc(100vh - 48px)!important;
  max-height:calc(100vh - 48px)!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
}
.admin-data-form{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow:auto!important;
  padding-right:6px!important;
}
.admin-data-editor-field{
  min-height:0!important;
}
.admin-data-editor-field .tox-tinymce{
  min-height:520px!important;
  border-radius:18px!important;
  border-color:rgba(220,150,210,.26)!important;
  overflow:hidden!important;
}
.admin-data-editor-field textarea[data-admin-data-content]{
  min-height:520px!important;
}
.admin-data-form-actions{
  position:sticky!important;
  bottom:0!important;
  z-index:5!important;
  margin:0 -6px -6px!important;
  padding:14px 6px 6px!important;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.88) 28%,rgba(255,255,255,.96))!important;
  backdrop-filter:blur(10px)!important;
}
@media (max-width:720px){
  .admin-data-modal{padding:10px!important;}
  .admin-data-form-card{
    width:calc(100vw - 20px)!important;
    height:calc(100vh - 20px)!important;
    max-height:calc(100vh - 20px)!important;
  }
  .admin-data-editor-field .tox-tinymce,
  .admin-data-editor-field textarea[data-admin-data-content]{
    min-height:420px!important;
  }
}

/* --------------------------------------------------------------------------
   U4A Admin refinement - fullscreen data-room form modal usability fix
   - Keep attachment selector and save buttons visible on desktop-sized screens.
   - Use almost the full browser viewport as requested.
-------------------------------------------------------------------------- */
.admin-data-modal{
  padding:8px!important;
  align-items:stretch!important;
  justify-items:stretch!important;
  place-items:stretch!important;
}
.admin-data-form-card{
  width:calc(100vw - 16px)!important;
  height:calc(100dvh - 16px)!important;
  max-width:none!important;
  max-height:none!important;
  border-radius:28px!important;
  padding:28px!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
}
.admin-data-form-head{
  flex:0 0 auto!important;
}
.admin-data-form{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow:hidden!important;
  display:grid!important;
  grid-template-columns:minmax(300px,420px) minmax(0,1fr)!important;
  grid-auto-rows:min-content!important;
  gap:16px 22px!important;
  padding:18px 2px 0!important;
  margin-top:0!important;
}
.admin-data-form > input[type="hidden"]{
  display:none!important;
}
.admin-data-form > label:not(.admin-data-editor-field),
.admin-data-form > .admin-data-check,
.admin-data-form > .admin-data-message{
  grid-column:1!important;
}
.admin-data-editor-field{
  grid-column:2!important;
  grid-row:1 / span 6!important;
  min-height:0!important;
  height:100%!important;
  display:flex!important;
  flex-direction:column!important;
}
.admin-data-editor-field > span,
.admin-data-editor-field > small{
  flex:0 0 auto!important;
}
.admin-data-editor-field .tox-tinymce{
  flex:1 1 auto!important;
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
}
.admin-data-editor-field textarea[data-admin-data-content]{
  flex:1 1 auto!important;
  min-height:360px!important;
}
.admin-data-file-field{
  margin-top:4px!important;
}
.admin-data-file-field input[type="file"]{
  min-height:58px!important;
  display:flex!important;
  align-items:center!important;
  background:rgba(255,255,255,.78)!important;
}
.admin-data-form-actions{
  grid-column:1 / -1!important;
  align-self:end!important;
  position:relative!important;
  bottom:auto!important;
  z-index:6!important;
  margin:0!important;
  padding:14px 0 0!important;
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.92))!important;
  border-top:1px solid rgba(220,150,210,.18)!important;
  backdrop-filter:blur(10px)!important;
}
.admin-data-form-actions .ghost-btn,
.admin-data-form-actions .primary-btn{
  min-width:86px!important;
  min-height:46px!important;
}
@media (max-width:980px), (max-height:760px){
  .admin-data-modal{padding:8px!important;}
  .admin-data-form-card{
    width:calc(100vw - 16px)!important;
    height:calc(100dvh - 16px)!important;
    padding:22px!important;
  }
  .admin-data-form{
    display:block!important;
    overflow:auto!important;
    padding:18px 4px 0!important;
  }
  .admin-data-form > label,
  .admin-data-form > .admin-data-check,
  .admin-data-form > .admin-data-message,
  .admin-data-form-actions{
    margin-top:14px!important;
  }
  .admin-data-editor-field{
    height:auto!important;
    min-height:0!important;
    display:grid!important;
  }
  .admin-data-editor-field .tox-tinymce,
  .admin-data-editor-field textarea[data-admin-data-content]{
    height:46vh!important;
    min-height:320px!important;
  }
  .admin-data-form-actions{
    position:sticky!important;
    bottom:0!important;
  }
}
@media (max-width:720px){
  .admin-data-modal{padding:6px!important;}
  .admin-data-form-card{
    width:calc(100vw - 12px)!important;
    height:calc(100dvh - 12px)!important;
    border-radius:22px!important;
    padding:18px!important;
  }
}

/* --------------------------------------------------------------------------
   U4A Admin refinement - TinyMCE save footer and editor viewport
   - Safe UI-only override. API/save/delete/download logic is untouched.
-------------------------------------------------------------------------- */
.admin-data-modal.is-open,
.admin-data-modal:not([hidden]){
  padding:8px!important;
}
.admin-data-form-card{
  position:relative!important;
  width:calc(100vw - 16px)!important;
  height:calc(100dvh - 16px)!important;
  max-width:none!important;
  max-height:none!important;
  overflow:hidden!important;
}
.admin-data-form{
  min-height:0!important;
  height:100%!important;
  overflow:hidden!important;
  padding-bottom:88px!important;
}
.admin-data-editor-field .tox-tinymce{
  height:calc(100dvh - 265px)!important;
  min-height:420px!important;
}
.admin-data-editor-field .tox .tox-edit-area,
.admin-data-editor-field .tox .tox-edit-area__iframe{
  min-height:0!important;
}
.admin-data-form-actions{
  position:absolute!important;
  left:28px!important;
  right:28px!important;
  bottom:24px!important;
  display:flex!important;
  justify-content:flex-end!important;
  gap:10px!important;
  padding:14px 0 0!important;
  margin:0!important;
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.96))!important;
  border-top:1px solid rgba(220,150,210,.22)!important;
  backdrop-filter:blur(12px)!important;
}
@media (max-width:980px), (max-height:760px){
  .admin-data-form{
    overflow:auto!important;
    padding-bottom:92px!important;
  }
  .admin-data-editor-field .tox-tinymce{
    height:46vh!important;
    min-height:320px!important;
  }
  .admin-data-form-actions{
    position:sticky!important;
    left:auto!important;
    right:auto!important;
    bottom:0!important;
  }
}

/* U4A Workspace example media/view-count refinement */
.u4aide-example-page .example-toolbar{
  grid-template-columns:minmax(0, 1.1fr) minmax(280px, .9fr);
}
.u4aide-example-page .example-category-tabs button[data-example-category="popular"]{
  border-color:rgba(240,106,176,.30);
}
.u4aide-example-page .example-search:before{
  align-self:center;
  transform:none;
  font-size:27px;
  line-height:1;
}
.u4aide-example-page .example-shot video,
.u4aide-example-page .example-shot img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:top center;
}
.u4aide-example-page .example-shot video{
  background:#120a1b;
}
.u4aide-example-page .example-play-mark{
  position:absolute;
  left:50%;
  top:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  width:58px;
  height:58px;
  transform:translate(-50%, -50%);
  border-radius:999px;
  color:#fff;
  font-size:22px;
  font-weight:950;
  background:rgba(28,18,42,.68);
  border:1px solid rgba(255,255,255,.34);
  box-shadow:0 16px 34px rgba(40,16,60,.28);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  pointer-events:none;
}
.u4aide-example-page .example-card-meta{
  display:flex;
  justify-content:flex-end;
  margin:-4px 0 8px;
}
.u4aide-example-page .example-card-meta span{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:0 10px;
  border-radius:999px;
  color:#8b44c0;
  font-size:12px;
  font-weight:950;
  background:rgba(151,91,214,.10);
  border:1px solid rgba(151,91,214,.14);
}
.u4aide-example-page .example-preview-figure--youtube,
.u4aide-example-page .example-preview-figure--video{
  aspect-ratio:16 / 9;
  min-height:0;
}
.u4aide-example-page .example-preview-video{
  display:block;
  width:100%;
  height:100%;
  min-height:360px;
  border:0;
  border-radius:22px;
  background:#120a1b;
}
@media (max-width:900px){
  .u4aide-example-page .example-toolbar{
    grid-template-columns:1fr;
  }
  .u4aide-example-page .example-preview-video{
    min-height:260px;
  }
}
@media (max-width:460px){
  .u4aide-example-page .example-play-mark{
    width:50px;
    height:50px;
    font-size:19px;
  }
}

/* --------------------------------------------------------------------------
   U4A Admin - Example manager
   -------------------------------------------------------------------------- */
.admin-example-toolbar .admin-data-search{
  min-width:min(100%, 560px);
}
.admin-example-layout .admin-data-list-card{
  min-width:0;
}
.admin-example-layout .admin-example-preview{
  align-self:start;
  position:sticky;
  top:28px;
  z-index:3;
}
.admin-example-table .admin-data-title-btn{
  gap:7px;
}
.admin-example-media-count{
  display:inline-flex;
  width:max-content;
  margin-top:4px;
  padding:3px 9px;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(211,148,207,.24);
  color:#8a5a98;
  font-size:12px;
  font-style:normal;
  font-weight:800;
}
.admin-example-preview .admin-data-preview-content{
  white-space:normal;
}
.admin-example-media-link{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:11px 12px;
  margin-top:8px;
  border-radius:16px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(210,145,210,.22);
  color:#4a2358;
  text-decoration:none;
  word-break:break-all;
}
.admin-example-media-link:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(142,76,150,.12);
}
.admin-example-media-link span{
  font-weight:900;
  color:#572467;
}
.admin-example-media-link small{
  color:#8b6896;
  line-height:1.45;
}
.admin-example-keyword-preview{
  margin:8px 0 0;
  color:#7a5088;
  line-height:1.7;
  word-break:break-word;
}
.admin-example-form textarea{
  min-height:116px;
  resize:vertical;
}
.admin-example-form input[readonly]{
  background:rgba(244,236,247,.7);
  color:#7e6288;
  cursor:not-allowed;
}
.admin-example-modal .admin-data-form-card{
  max-width:min(920px, calc(100vw - 32px));
}
.is-admin-example-loading .admin-data-list-card,
.is-admin-example-loading .admin-example-preview{
  opacity:.72;
  pointer-events:none;
}
@media (max-width: 900px){
  .admin-example-toolbar .admin-data-search{
    min-width:0;
  }
  .admin-example-table col:nth-child(1),
  .admin-example-table th:nth-child(1),
  .admin-example-table td:nth-child(1),
  .admin-example-table col:nth-child(4),
  .admin-example-table th:nth-child(4),
  .admin-example-table td:nth-child(4){
    display:none;
  }
}

/* --------------------------------------------------------------------------
   U4A Admin - Example manager table/media form refinement
   - Keep the data-room modal overrides intact, but make the example form wide,
     scrollable, and header-action based.
-------------------------------------------------------------------------- */
.admin-example-table{
  min-width:1040px;
}
.admin-example-table-media{
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#6d3a78;
  font-size:12px;
  font-weight:850;
  text-decoration:none;
}
.admin-example-table-media:hover{
  color:#a4449b;
  text-decoration:underline;
}
.admin-example-form-head-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex:0 0 auto;
}
.admin-example-form-head-actions .ghost-btn,
.admin-example-form-head-actions .primary-btn{
  min-height:42px;
  padding:0 18px;
  border:0;
  cursor:pointer;
}
.admin-example-modal.admin-data-modal{
  padding:18px!important;
  align-items:stretch!important;
  justify-items:stretch!important;
  place-items:stretch!important;
}
.admin-example-modal .admin-data-form-card{
  width:calc(100vw - 36px)!important;
  height:calc(100dvh - 36px)!important;
  max-width:none!important;
  max-height:none!important;
  border-radius:28px!important;
  padding:28px!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
}
.admin-example-modal .admin-data-form-head{
  flex:0 0 auto!important;
  align-items:center!important;
  gap:18px!important;
}
.admin-example-modal .admin-data-form{
  flex:1 1 auto!important;
  min-height:0!important;
  height:auto!important;
  overflow:auto!important;
  display:grid!important;
  grid-template-columns:minmax(320px, 1fr) minmax(320px, 1fr)!important;
  grid-auto-rows:min-content!important;
  gap:18px 22px!important;
  margin-top:0!important;
  padding:22px 6px 8px 2px!important;
}
.admin-example-modal .admin-example-form > label:not(.admin-data-editor-field),
.admin-example-modal .admin-example-form > .admin-data-check,
.admin-example-modal .admin-example-form > .admin-data-message{
  grid-column:auto!important;
  margin-top:0!important;
}
.admin-example-modal .admin-example-form > .admin-example-field-wide,
.admin-example-modal .admin-example-form > .admin-data-message{
  grid-column:1 / -1!important;
}
.admin-example-modal .admin-example-form input,
.admin-example-modal .admin-example-form select{
  width:100%!important;
  min-width:0!important;
}
.admin-example-modal .admin-example-form textarea{
  width:100%!important;
  min-width:0!important;
  min-height:124px!important;
}
.admin-example-modal .admin-example-form textarea[data-admin-example-description]{
  min-height:150px!important;
}
.admin-example-modal .admin-data-form-actions{
  display:none!important;
}
.admin-example-modal .admin-data-message{
  min-height:28px;
  padding:2px 0 0;
}
@media (max-width:980px){
  .admin-example-modal.admin-data-modal{
    padding:10px!important;
  }
  .admin-example-modal .admin-data-form-card{
    width:calc(100vw - 20px)!important;
    height:calc(100dvh - 20px)!important;
    padding:22px!important;
    border-radius:24px!important;
  }
  .admin-example-modal .admin-data-form-head{
    align-items:flex-start!important;
  }
  .admin-example-form-head-actions{
    gap:7px;
  }
  .admin-example-form-head-actions .ghost-btn,
  .admin-example-form-head-actions .primary-btn{
    padding:0 13px;
  }
  .admin-example-modal .admin-data-form{
    grid-template-columns:1fr!important;
    gap:15px!important;
  }
  .admin-example-modal .admin-example-form > label,
  .admin-example-modal .admin-example-form > .admin-data-message{
    grid-column:1!important;
  }
}
@media (max-width:720px){
  .admin-example-table col:nth-child(2),
  .admin-example-table th:nth-child(2),
  .admin-example-table td:nth-child(2){
    display:none;
  }
  .admin-example-form-head-actions{
    flex-wrap:wrap;
  }
  .admin-example-form-head-actions .admin-data-icon-btn{
    width:40px;
    height:40px;
  }
}

/* --------------------------------------------------------------------------
   U4A Admin - Example manager thumbnail/row selection refinement
-------------------------------------------------------------------------- */
.admin-example-table tbody tr[data-admin-example-id]{
  cursor:pointer;
}
.admin-example-table tbody tr[data-admin-example-id] .admin-data-row-actions,
.admin-example-table tbody tr[data-admin-example-id] button,
.admin-example-table tbody tr[data-admin-example-id] a{
  cursor:pointer;
}
.admin-example-table-thumb{
  width:86px;
  height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(211,148,207,.26);
  border-radius:14px;
  background:linear-gradient(135deg,rgba(255,255,255,.86),rgba(246,232,250,.76));
  box-shadow:0 10px 22px rgba(110,65,130,.10);
  padding:0;
  color:#743d85;
  font-size:11px;
  font-weight:950;
}
.admin-example-table-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.admin-example-table-thumb span{
  position:absolute;
  left:6px;
  bottom:5px;
  max-width:calc(100% - 12px);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding:2px 7px;
  border-radius:999px;
  background:rgba(255,255,255,.84);
  color:#613070;
  box-shadow:0 6px 14px rgba(70,35,90,.12);
}
.admin-example-table-thumb.is-placeholder span,
.admin-example-table-thumb.is-empty span{
  position:static;
  max-width:100%;
  background:transparent;
  box-shadow:none;
  padding:0;
}
.admin-example-table-thumb.is-empty{
  color:#9b7aa6;
  background:rgba(255,255,255,.58);
  box-shadow:none;
}
.admin-example-table-thumb:hover{
  transform:translateY(-1px);
  border-color:rgba(202,91,190,.42);
  box-shadow:0 14px 28px rgba(110,65,130,.16);
}

/* --------------------------------------------------------------------------
   U4A Admin - Example manager pagination/form final refinement
-------------------------------------------------------------------------- */
.admin-example-more-wrap{
  display:flex;
  justify-content:center;
  padding:18px 10px 4px;
}
.admin-example-more-btn{
  min-width:180px;
  min-height:44px;
  font-weight:950;
}
.admin-example-more-btn[hidden]{
  display:none!important;
}
.admin-example-modal .admin-data-form-card{
  max-width:min(1040px, calc(100vw - 36px))!important;
  margin:auto!important;
}
.admin-example-modal .admin-data-form{
  display:flex!important;
  flex-direction:column!important;
  grid-template-columns:none!important;
  gap:18px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:22px 10px 14px 2px!important;
}
.admin-example-modal .admin-example-form > label,
.admin-example-modal .admin-example-form > div,
.admin-example-modal .admin-example-form > p{
  width:100%!important;
  max-width:none!important;
  grid-column:auto!important;
}
.admin-example-modal .admin-example-form input,
.admin-example-modal .admin-example-form select,
.admin-example-modal .admin-example-form textarea{
  width:100%!important;
  box-sizing:border-box!important;
}
.admin-example-media-manager{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:16px;
  border-radius:22px;
  border:1px solid rgba(211,148,207,.25);
  background:rgba(255,255,255,.42);
}
.admin-example-media-manager-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
}
.admin-example-media-manager-head span{
  display:block;
  color:#673071;
  font-size:13px;
  font-weight:950;
  margin-bottom:6px;
}
.admin-example-media-manager-head small{
  display:block;
  color:#8e679a;
  line-height:1.5;
}
.admin-example-media-table-wrap{
  width:100%;
  overflow-x:auto;
  border-radius:18px;
  border:1px solid rgba(211,148,207,.22);
  background:rgba(255,255,255,.58);
}
.admin-example-media-table{
  width:100%;
  min-width:620px;
  border-collapse:separate;
  border-spacing:0;
}
.admin-example-media-table th,
.admin-example-media-table td{
  padding:10px;
  border-bottom:1px solid rgba(211,148,207,.16);
  text-align:left;
  vertical-align:middle;
}
.admin-example-media-table th{
  color:#744181;
  font-size:12px;
  font-weight:950;
  background:rgba(246,232,250,.58);
}
.admin-example-media-table tr:last-child td{
  border-bottom:0;
}
.admin-example-media-table input{
  min-height:44px!important;
  padding:0 14px!important;
  border-radius:14px!important;
}
.admin-example-media-del{
  width:100%;
  min-height:38px;
  padding:0 12px!important;
}
@media (max-width:720px){
  .admin-example-media-manager{
    padding:12px;
  }
  .admin-example-media-manager-head{
    align-items:stretch;
    flex-direction:column;
  }
  .admin-example-media-manager-head .ghost-btn{
    width:100%;
  }
  .admin-example-media-table{
    min-width:520px;
  }
}


/* --------------------------------------------------------------------------
   U4A Admin - Example manager stability fixes
   -------------------------------------------------------------------------- */
.admin-example-table .admin-data-title-btn{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:6px!important;
  min-width:0!important;
  width:100%!important;
}
.admin-example-table .admin-data-title-btn strong{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.admin-example-table .admin-example-media-count{
  flex:0 0 auto!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.admin-example-table td:nth-child(3){
  min-width:0!important;
}


/* --------------------------------------------------------------------------
   U4A Admin - Example form representative media preview
-------------------------------------------------------------------------- */
.admin-example-form-media-preview{
  display:grid;
  grid-template-columns:minmax(180px, 280px) minmax(0, 1fr);
  align-items:center;
  gap:14px;
  margin-top:12px;
  padding:12px;
  border:1px solid rgba(211,148,207,.25);
  border-radius:20px;
  background:rgba(255,255,255,.52);
}
.admin-example-form-media-preview.is-empty{
  display:block;
}
.admin-example-form-media-preview-box{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  overflow:hidden;
  border-radius:16px;
  border:1px solid rgba(211,148,207,.22);
  background:linear-gradient(135deg, rgba(255,255,255,.9), rgba(246,232,250,.76));
  box-shadow:0 12px 26px rgba(110,65,130,.12);
}
.admin-example-form-media-preview-box img,
.admin-example-form-media-preview-box video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.admin-example-form-media-preview-box > span{
  position:absolute;
  left:10px;
  bottom:9px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.88);
  color:#623171;
  font-size:12px;
  font-weight:950;
  box-shadow:0 8px 18px rgba(70,35,90,.14);
}
.admin-example-form-media-preview-box.is-placeholder{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  color:#744181;
  text-align:center;
}
.admin-example-form-media-preview-box.is-placeholder strong{
  font-size:16px;
  font-weight:950;
}
.admin-example-form-media-preview-box.is-placeholder span{
  position:static;
  padding:0;
  background:transparent;
  box-shadow:none;
  color:#92709d;
  font-size:12px;
}
.admin-example-form-media-preview a{
  min-width:0;
  color:#6e3c7e;
  font-size:12px;
  font-weight:800;
  line-height:1.5;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-decoration:none;
}
.admin-example-form-media-preview a:hover{
  color:#c24fb3;
  text-decoration:underline;
}
.admin-example-form-media-preview-empty{
  display:flex;
  flex-direction:column;
  gap:5px;
  color:#8b6696;
  font-size:12px;
  line-height:1.45;
}
.admin-example-form-media-preview-empty strong{
  color:#673071;
  font-size:13px;
  font-weight:950;
}
@media (max-width:720px){
  .admin-example-form-media-preview{
    grid-template-columns:1fr;
  }
}

/* --------------------------------------------------------------------------
   U4A Admin - Example form primary media first refinement
-------------------------------------------------------------------------- */
.admin-example-primary-media-field{
  order:-20;
  padding:16px!important;
  border:1px solid rgba(211,148,207,.28);
  border-radius:24px;
  background:linear-gradient(135deg, rgba(255,255,255,.72), rgba(248,232,250,.54));
  box-shadow:0 14px 34px rgba(96,53,118,.08);
}
.admin-example-primary-media-field > span{
  display:flex;
  align-items:center;
  gap:8px;
}
.admin-example-primary-media-field > span::before{
  content:'대표';
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:22px;
  padding:0 9px;
  border-radius:999px;
  background:rgba(198,82,188,.12);
  color:#8b3a92;
  font-size:11px;
  font-weight:950;
  letter-spacing:-.02em;
}
.admin-example-primary-media-field .admin-example-form-media-preview{
  margin-top:14px;
}
@media (max-width:720px){
  .admin-example-primary-media-field{
    padding:13px!important;
    border-radius:20px;
  }
}

/* U4A Workspace example SQLite search refinement */
.u4aide-example-page .example-search-group{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  gap:10px;
  min-width:0;
}
.u4aide-example-page .example-search-group .example-search{
  min-width:0;
  width:100%;
}
.u4aide-example-page .example-search-submit{
  min-height:54px;
  padding:0 22px;
  border:0;
  border-radius:18px;
  color:#fff;
  font:inherit;
  font-size:14px;
  font-weight:950;
  letter-spacing:.02em;
  cursor:pointer;
  background:linear-gradient(90deg, #38c8e8, #9b60e0 52%, #f06ab0);
  box-shadow:0 14px 28px rgba(180,100,200,.22);
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.u4aide-example-page .example-search-submit:hover,
.u4aide-example-page .example-search-submit:focus-visible{
  transform:translateY(-1px);
  box-shadow:0 18px 34px rgba(180,100,200,.28);
  outline:0;
}
.u4aide-example-page.is-example-loading .example-search-submit,
.u4aide-example-page.is-example-loading .example-more-btn{
  opacity:.72;
  cursor:wait;
}
@media (max-width:768px){
  .u4aide-example-page .example-search-group{
    grid-template-columns:1fr;
    gap:8px;
  }
  .u4aide-example-page .example-search-submit{
    width:100%;
    min-height:42px;
    border-radius:14px;
  }
}
.u4aide-example-page .example-showcase.is-example-loading .example-search-submit,
.u4aide-example-page .example-showcase.is-example-loading .example-more-btn{
  opacity:.72;
  cursor:wait;
}

/* ─────────────────────────────────────────────
   U4A Workspace license / guide visual refinement
   라이선스 CTA 위계와 개발 가이드 버전 카드 경계 보강
───────────────────────────────────────────── */
.license-u4aide-page .license-card .license-pilot-btn{
  background:rgba(255,255,255,.66);
  border-color:rgba(145,88,172,.20);
  box-shadow:0 12px 28px rgba(95,54,125,.08), inset 0 0 0 1px rgba(255,255,255,.62);
  color:#6d377e;
}

.license-u4aide-page .license-card .license-full-btn{
  position:relative;
  overflow:hidden;
  border:0;
  background:linear-gradient(95deg, #32c4e8 0%, #8559df 46%, #ed66ad 100%);
  box-shadow:0 18px 38px rgba(144,76,194,.28), 0 10px 28px rgba(236,100,172,.18);
}

.license-u4aide-page .license-card .license-full-btn:before{
  content:"";
  position:absolute;
  inset:0 auto 0 -42%;
  width:38%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.58), transparent);
  transform:skewX(-18deg);
  transition:left .45s ease;
}

.license-u4aide-page .license-card .license-full-btn:hover:before{
  left:112%;
}

.guide-version-card{
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 22px 58px rgba(82,42,120,.13), inset 0 0 0 1px rgba(255,255,255,.62);
}

.guide-version-30{
  background:
    linear-gradient(160deg, rgba(255,255,255,.78), rgba(235,248,255,.62) 48%, rgba(251,231,255,.52)),
    radial-gradient(circle at 80% 10%, rgba(80,203,240,.25), transparent 38%);
}

.guide-version-20{
  background:
    linear-gradient(160deg, rgba(255,255,255,.74), rgba(255,241,248,.62) 46%, rgba(246,235,255,.54)),
    radial-gradient(circle at 78% 8%, rgba(221,108,190,.20), transparent 40%);
}

.guide-version-30:before{
  background:radial-gradient(circle, rgba(104,213,255,.42), rgba(139,96,224,.16) 52%, transparent 72%);
}

.guide-version-20:before{
  background:radial-gradient(circle, rgba(238,132,196,.34), rgba(153,93,210,.13) 52%, transparent 72%);
}

.guide-version-30 .guide-doc-kicker,
.guide-version-20 .guide-doc-kicker{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  min-height:34px;
  align-items:center;
  padding:0 14px;
  border-radius:999px;
  font-size:clamp(18px, 1.7vw, 24px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.72), 0 12px 24px rgba(94,48,130,.08);
}

.guide-version-30 .guide-doc-kicker{
  background:linear-gradient(135deg, rgba(78,199,239,.18), rgba(147,95,224,.14));
  color:#573c99;
}

.guide-version-20 .guide-doc-kicker{
  background:linear-gradient(135deg, rgba(235,111,181,.16), rgba(150,88,202,.12));
  color:#85428e;
}

@media (max-width:768px){
  .guide-doc-split{
    gap:30px;
  }

  .guide-version-card{
    box-shadow:0 20px 48px rgba(82,42,120,.16), inset 0 0 0 1px rgba(255,255,255,.74);
  }

  .guide-version-card + .guide-version-card{
    margin-top:2px;
  }

  .guide-version-30 .guide-doc-kicker,
  .guide-version-20 .guide-doc-kicker{
    font-size:20px;
  }
}

/* Guide document PIP button visibility safeguard */
[data-guide-doc-pip][hidden]{
  display:none!important;
}

/* ─────────────────────────────────────────────
   Workspace 3.0 help new-window CTA refinement
   PIP 버튼 미지원 환경에서도 새 창 열기 버튼이 주요 동작으로 보이도록 보강한다.
───────────────────────────────────────────── */
.guide-doc-actions .guide-new-window-btn{
  min-height:52px;
  padding:0 22px;
  border:0;
  background:linear-gradient(135deg, rgba(76,197,241,.98), rgba(217,96,194,.98));
  box-shadow:0 18px 42px rgba(114,55,146,.22), inset 0 1px 0 rgba(255,255,255,.38);
  color:#fff;
  letter-spacing:-.015em;
}

.guide-doc-actions .guide-new-window-btn:before{
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
}

.guide-doc-actions .guide-new-window-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 24px 52px rgba(114,55,146,.28), inset 0 1px 0 rgba(255,255,255,.48);
}

.guide-doc-actions .guide-new-window-btn:active{
  transform:translateY(0);
  box-shadow:0 14px 30px rgba(114,55,146,.2), inset 0 1px 0 rgba(255,255,255,.34);
}

.guide-doc-actions .guide-new-window-btn:focus-visible{
  outline:3px solid rgba(94,199,242,.45);
  outline-offset:4px;
}

.guide-doc-actions .guide-new-window-btn i{
  background:rgba(255,255,255,.24);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.32);
  color:#fff;
}

@media (max-width:640px){
  .guide-doc-actions .guide-new-window-btn{
    width:100%;
    justify-content:center;
  }
}

/* Partner admin */
.admin-partner-table-logo img{
  max-width:92px;
  max-height:54px;
  object-fit:contain;
}
.admin-partner-logo-preview-box img{
  max-width:220px;
  max-height:92px;
  object-fit:contain;
  background:rgba(255,255,255,.72);
  border-radius:16px;
  padding:14px;
}
.admin-partner-preview-logo{
  display:grid;
  place-items:center;
  min-height:118px;
  padding:18px;
  border-radius:22px;
  background:rgba(255,255,255,.58);
  border:1px solid rgba(220,150,210,.22);
}
.admin-partner-preview-logo img{
  max-width:100%;
  max-height:86px;
  object-fit:contain;
}
@media (max-width:900px){
  .admin-partner-table col:nth-child(1),
  .admin-partner-table th:nth-child(1),
  .admin-partner-table td:nth-child(1),
  .admin-partner-table col:nth-child(4),
  .admin-partner-table th:nth-child(4),
  .admin-partner-table td:nth-child(4){
    display:none;
  }
}

/* 관리자 로그인 - Telegram 2차 인증 */
.admin-login-form.is-telegram-pending{display:none;}
.admin-telegram-panel{margin-top:22px;padding:22px;border:1px solid rgba(220,150,210,.28);border-radius:24px;background:rgba(255,255,255,.58);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);}
.admin-telegram-panel[hidden]{display:none!important;}
.admin-telegram-copy{display:grid;gap:8px;margin-bottom:18px;color:#765083;line-height:1.55;}
.admin-telegram-copy strong{color:#2a1030;font-size:18px;font-weight:950;letter-spacing:-.03em;}
.admin-telegram-copy span{font-size:13px;font-weight:800;}
.admin-telegram-widget{display:grid;justify-items:center;min-height:44px;margin:10px 0 18px;}
.admin-telegram-back{width:100%;height:48px;border:1px solid rgba(220,150,210,.32);border-radius:16px;background:rgba(255,255,255,.72);color:#5a2868;font-weight:950;cursor:pointer;}
.admin-telegram-back:hover{background:rgba(255,255,255,.92);}

/* 교육영상 카드 액션 및 설명 보기 모달 보강 */
.video-action-group{
  grid-template-columns:repeat(auto-fit, minmax(112px, 1fr));
}
.video-watch-btn--primary{
  color:#fff;
  background:linear-gradient(90deg, #38c8e8, #9b60e0 52%, #f06ab0);
  box-shadow:0 12px 26px rgba(180,100,200,.22);
}
.video-preview-actions{
  display:grid;
  flex:0 0 auto;
  grid-template-columns:repeat(auto-fit, minmax(130px, 1fr));
  gap:10px;
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid rgba(204,140,216,.24);
}
.video-detail-poster{
  position:relative;
  width:100%;
  height:100%;
  display:block;
  padding:0;
  overflow:hidden;
  border:0;
  border-radius:22px;
  cursor:pointer;
  background:rgba(0,0,0,.18);
}
.video-detail-poster img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  object-position:center;
  transition:transform .28s ease, filter .28s ease;
}
.video-detail-poster:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(14,16,30,0) 42%, rgba(14,16,30,.34));
  pointer-events:none;
}
.video-detail-poster:hover img{
  transform:scale(1.018);
  filter:saturate(1.04) contrast(1.02);
}
@media (max-width:768px){
  .video-preview-actions{
    grid-template-columns:1fr;
  }
}

/* --------------------------------------------------------------------------
   U4A Example - Version filter
   -------------------------------------------------------------------------- */
.example-version-filter{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:18px 0 10px;
  padding:14px 16px;
  border-radius:24px;
  border:1px solid rgba(172,96,196,.20);
  background:linear-gradient(160deg, rgba(255,255,255,.86), rgba(238,250,255,.66));
  box-shadow:0 14px 34px rgba(124,72,148,.10), inset 0 0 0 1px rgba(255,255,255,.48);
}
.example-version-filter label{
  display:grid;
  grid-template-columns:auto minmax(180px, 260px);
  align-items:center;
  gap:12px;
  margin:0;
}
.example-version-filter span{
  font-size:12px;
  font-weight:950;
  letter-spacing:.12em;
  color:#7f4c92;
}
.example-version-filter select{
  width:100%;
  min-height:46px;
  padding:0 42px 0 14px;
  border:1px solid rgba(211,148,207,.30);
  border-radius:16px;
  background:rgba(255,255,255,.86);
  color:#4f2b61;
  font:inherit;
  font-weight:900;
  outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.74);
}
.example-version-filter select:focus{
  border-color:rgba(150,100,225,.48);
  box-shadow:0 0 0 4px rgba(150,100,225,.12), inset 0 1px 0 rgba(255,255,255,.78);
}
.example-version-filter p{
  margin:0;
  color:#7b5b87;
  font-size:13px;
  font-weight:750;
  line-height:1.5;
  word-break:keep-all;
}
.example-card-version{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:3px 9px;
  border-radius:999px;
  background:rgba(238,250,255,.86);
  border:1px solid rgba(76,183,221,.22);
  color:#365d77;
  font-weight:950;
}
.admin-example-version-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:54px;
  min-height:30px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(76,183,221,.24);
  background:rgba(238,250,255,.76);
  color:#365d77;
  font-size:12px;
  font-weight:950;
  white-space:nowrap;
}
.admin-example-toolbar .admin-data-search{
  grid-template-columns:118px 126px minmax(190px,1fr) auto auto;
  min-width:min(100%, 760px);
}
@media (max-width: 860px){
  .example-version-filter{
    align-items:stretch;
    flex-direction:column;
    gap:10px;
  }
  .example-version-filter label{
    grid-template-columns:1fr;
    gap:7px;
  }
  .example-version-filter p{
    font-size:12px;
  }
  .admin-example-toolbar .admin-data-search{
    grid-template-columns:1fr 1fr;
  }
  .admin-example-toolbar .admin-data-search input{
    grid-column:1 / -1;
  }
  .admin-example-toolbar .admin-data-search .ghost-btn{
    width:100%;
  }
}
@media (max-width: 560px){
  .example-version-filter{
    margin-top:14px;
    padding:12px;
    border-radius:20px;
  }
  .example-version-filter select{
    min-height:44px;
  }
}

/* Example admin table column correction after version column was added */
@media (max-width: 900px){
  .admin-example-table col:nth-child(4),
  .admin-example-table th:nth-child(4),
  .admin-example-table td:nth-child(4){
    display:table-cell;
  }
  .admin-example-table col:nth-child(5),
  .admin-example-table th:nth-child(5),
  .admin-example-table td:nth-child(5){
    display:none;
  }
}
@media (max-width:720px){
  .admin-example-table col:nth-child(2),
  .admin-example-table th:nth-child(2),
  .admin-example-table td:nth-child(2){
    display:table-cell;
  }
  .admin-example-table col:nth-child(3),
  .admin-example-table th:nth-child(3),
  .admin-example-table td:nth-child(3){
    display:none;
  }
}