/* Extracted from the educational-preview brand dock, 2026-10-10. */
:host { all:initial; font-family:Arial,"Noto Sans KR",sans-serif; font-size:16px; line-height:1.65; color:#102b3e; --ink:#102b3e; --muted:#566b7a; --blue:#175edb; }
.brand-dock,.brand-dock *,.brand-dock *::before,.brand-dock *::after { box-sizing:border-box; }
a { color:inherit; text-decoration:none; }
button { font:inherit; touch-action:manipulation; }
a,button { transition:background .25s,border-color .25s,box-shadow .25s,transform .25s; }
a:focus-visible,button:focus-visible { outline:3px solid #fbc447; outline-offset:4px; }
img { object-fit:contain; }
.brand-dock { font-family:Arial,"Noto Sans KR",sans-serif; font-size:16px; line-height:1.65; word-break:keep-all; zoom:var(--brand-dock-page-scale,.81); }
.brand-dock { position:fixed; z-index:var(--brand-dock-z-index,1000); left:var(--brand-dock-left,16px); top:var(--brand-dock-top,162px); transform:scale(var(--brand-dock-scale,1)); transform-origin:top left; width:104px; }
.brand-dock-panel { background:#ffffffee; backdrop-filter:blur(16px); border:1px solid #dbe5ec; border-radius:22px; padding:12px 7px 6px; box-shadow:0 10px 36px #102b3e20; }
.brand-dock-heading { display:flex; align-items:center; justify-content:center; padding:0 0 7px; font-size:12px; color:var(--muted); font-weight:700; }
.brand-dock-close,.brand-dock-launcher,.brand-dock-expand { display:none; }
.brand-dock nav ul { list-style:none; padding:0; margin:0; display:grid; gap:var(--brand-dock-gap,9px); }
.dock-a2p { --dock-accent:#d94c51; --dock-tint:#fff1f1; --dock-line:#f0cfd0; }
.dock-materials { --dock-accent:#1759a7; --dock-tint:#eef4ff; --dock-line:#cbdcf2; }
.dock-safety { --dock-accent:#087d91; --dock-tint:#eaf9fa; --dock-line:#bde4e8; }
.dock-system { --dock-accent:#314bb7; --dock-tint:#f1f3ff; --dock-line:#d6dcf4; }
.dock-education { --dock-accent:#8b640c; --dock-tint:#fff8e8; --dock-line:#ebdfbb; }
.dock-jubi { --dock-accent:#175edb; --dock-tint:#eef6ff; --dock-line:#c8dcf7; }
.brand-dock-link { display:flex; position:relative; flex-direction:column; align-items:center; justify-content:center; height:var(--brand-dock-card-height,108px); min-height:var(--brand-dock-card-height,108px); padding:clamp(4px,calc(var(--brand-dock-card-height,108px)/18),6px) 4px; border:1px solid var(--dock-line); border-radius:13px; background:var(--dock-tint); color:var(--ink); box-shadow:0 2px 5px #102b3e05; }
.brand-dock-mark { display:grid; place-items:center; flex-shrink:0; width:64px; height:clamp(24px,calc(var(--brand-dock-card-height,108px) - 56px),46px); margin-bottom:clamp(3px,calc(var(--brand-dock-card-height,108px) - 101px),7px); border:1px solid #ffffff; border-radius:9px; background:#fff; }
.brand-dock-mark img { width:56px; height:calc(100% - 4px); max-height:40px; object-fit:contain; }
.dock-safety .brand-dock-mark,.dock-system .brand-dock-mark { overflow:hidden; }
.dock-safety .brand-dock-mark img,.dock-system .brand-dock-mark img { width:clamp(32px,calc(var(--brand-dock-card-height,108px) - 48px),60px); height:clamp(32px,calc(var(--brand-dock-card-height,108px) - 48px),60px); max-height:none; }
.dock-jubi .brand-dock-mark { position:relative; overflow:hidden; }
.dock-jubi .brand-dock-mark img { position:absolute; width:clamp(40px,calc((var(--brand-dock-card-height,108px) - 56px)*1.65),76px); height:clamp(40px,calc((var(--brand-dock-card-height,108px) - 56px)*1.65),76px); max-width:none; max-height:none; left:50%; top:50%; transform:translate(-50%,-50%); }
.brand-dock-label { display:flex; align-items:center; justify-content:center; width:100%; height:clamp(34px,calc(var(--brand-dock-card-height,108px)/2 - 14px),40px); flex-shrink:0; font-size:14px; font-weight:700; line-height:1.2; letter-spacing:-.04em; white-space:pre-line; text-align:center; color:var(--dock-accent); }
.brand-dock-link:hover,.brand-dock-link:focus-visible { background:#fff; border-color:var(--dock-accent); box-shadow:0 4px 12px #102b3e14; }
.brand-dock-tip { position:absolute; top:50%; left:calc(100% + 14px); transform:translate(6px,calc(-50% + var(--brand-tip-shift,0px))); opacity:0; visibility:hidden; pointer-events:none; width:286px; padding:20px 22px; background:#fff; border:1px solid #dbe5ec; border-radius:17px; box-shadow:0 12px 32px #102b3e22; transition:opacity .18s,visibility .18s; }
.brand-dock-tip::before { content:""; position:absolute; top:0; bottom:0; left:-16px; width:16px; }
.brand-dock-tip strong { display:block; font-size:16px; line-height:1.5; }
.brand-dock-tip > span { display:block; margin-top:7px; font-size:15px; color:var(--muted); }
.brand-dock-tip small { display:block; margin-top:13px; color:var(--dock-accent); font-size:14px; font-weight:700; }
.brand-dock-link.is-active .brand-dock-tip { transform:translate(0,calc(-50% + var(--brand-tip-shift,0px))); opacity:1; visibility:visible; pointer-events:auto; }
.brand-dock-item { position:relative; }
.brand-dock-item.is-active > .brand-dock-tip { transform:translate(0,calc(-50% + var(--brand-tip-shift,0px))); opacity:1; visibility:visible; pointer-events:auto; }
.brand-dock-education-tip { width:320px; }
.brand-dock-actions { display:grid; gap:9px; margin-top:16px; }
.brand-dock-action { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 12px; border:1px solid #e6d9b5; border-radius:10px; background:#fff8e8; color:#77560c; font-size:14px; font-weight:700; line-height:1.5; }
.brand-dock-action > span { font-size:11px; font-weight:500; white-space:nowrap; opacity:.7; }
.brand-dock-action:hover,.brand-dock-action:focus-visible { background:#f6eaca; border-color:#a88329; }
.brand-dock-ticket { background:#175edb; border-color:#175edb; color:white; }
.brand-dock-ticket:hover,.brand-dock-ticket:focus-visible { background:#124bad; border-color:#124bad; }
.brand-dock-collapse { display:block; margin-top:6px; width:100%; padding:7px 0; background:transparent; border:0; border-top:1px solid #e4ebf0; color:var(--muted); font-size:14px; cursor:pointer; border-radius:0 0 16px 16px; }
.brand-dock-collapse:hover { color:var(--blue); background:#eef4fa; }
.brand-dock-expand { width:72px; padding:14px 8px; border:1px solid #dbe5ec; border-radius:19px; background:#ffffffee; color:var(--ink); box-shadow:0 8px 25px #102b3e20; cursor:pointer; font-size:14px; font-weight:700; line-height:1.5; }
.brand-dock-expand > span:first-child { display:block; color:var(--blue); font-size:24px; line-height:1.1; margin-bottom:5px; }
.brand-dock.is-collapsed .brand-dock-panel { display:none; }
.brand-dock.is-collapsed .brand-dock-expand { display:block; }
@media(max-width:800px) {
 .brand-dock { top:auto; bottom:max(18px,env(safe-area-inset-bottom)); left:var(--brand-dock-left,16px); transform:none; width:auto; }
 .brand-dock-launcher { display:flex; align-items:center; gap:7px; padding:12px 16px; background:#153d4a; color:white; border:1px solid #ffffff70; border-radius:30px; box-shadow:0 7px 24px #102b3e35; font-size:14px; font-weight:700; cursor:pointer; }
 .brand-dock-launcher > span { font-size:18px; line-height:1; }
 .brand-dock .brand-dock-expand { display:none; }
 .brand-dock .brand-dock-panel { display:none; position:absolute; bottom:58px; left:0; width:min(342px,calc(100vw - 48px)); max-height:calc(100dvh - 100px); overflow-y:auto; padding:16px; border-radius:20px; }
 .brand-dock.is-open .brand-dock-panel { display:block; }
 .brand-dock-heading { justify-content:space-between; font-size:14px; padding-bottom:12px; }
 .brand-dock-close { display:block; background:transparent; border:0; color:var(--muted); padding:5px 7px; font-size:14px; cursor:pointer; }
 .brand-dock nav ul { gap:8px; }
 .brand-dock-link { display:grid; grid-template-columns:64px minmax(0,1fr); gap:0 12px; height:auto; min-height:76px; padding:12px 8px; border-radius:13px; }
 .brand-dock-mark { grid-row:1/3; width:64px; height:46px; margin:0; }
 .dock-safety .brand-dock-mark img,.dock-system .brand-dock-mark img { width:60px; height:60px; }
 .brand-dock-label { display:none; width:auto; height:auto; }
 .brand-dock-tip,.brand-dock-link.is-active .brand-dock-tip { position:static; width:auto; transform:none; opacity:1; visibility:visible; pointer-events:auto; padding:0; border:0; box-shadow:none; background:transparent; }
 .brand-dock-tip::before { display:none; }
 .brand-dock-tip strong { font-size:15px; }
 .brand-dock-tip > span { font-size:14px; margin-top:4px; }
 .brand-dock-tip small { margin-top:5px; font-size:14px; }
 .brand-dock-collapse { display:none; }
 .brand-dock-item { border:1px solid var(--dock-line); border-radius:13px; background:var(--dock-tint); }
 .brand-dock-item > .brand-dock-link { border:0; background:transparent; box-shadow:none; }
 .brand-dock-item .brand-dock-label { display:block; text-align:left; }
 .brand-dock-item > .brand-dock-education-tip,.brand-dock-item.is-active > .brand-dock-education-tip { position:static; width:auto; transform:none; opacity:1; visibility:visible; pointer-events:auto; padding:0 12px 14px; border:0; box-shadow:none; background:transparent; }
 .brand-dock-item > .brand-dock-education-tip::before { display:none; }
}
@media(prefers-reduced-motion:reduce) { .brand-dock-tip { transition:none; } }

.brand-dock-tip strong { overflow-wrap:anywhere; }
@media(max-width:800px) { .brand-dock { zoom:1; } }