/* Approved home chrome, scoped away from editor controls and canvases. */
.tool-chrome { color:#161921; font-family:Pretendard,"Pretendard Variable","Apple SD Gothic Neo","Malgun Gothic",sans-serif; font-size:14px; line-height:1.6; letter-spacing:normal; word-break:keep-all; overflow-wrap:anywhere; }
.tool-chrome * { box-sizing:border-box; }
.tool-chrome a { color:inherit; text-decoration:none; }
.tool-chrome :is(a,summary):focus-visible { outline:3px solid #007fbf; outline-offset:4px; }
.tool-chrome .tc-brand { display:inline-flex; align-items:center; gap:10px; flex-shrink:0; font-size:19px; font-weight:750; line-height:1.3; letter-spacing:-.04em; }
.tool-chrome .tc-brand img { display:block; width:32px; height:32px; border:0; border-radius:0; object-fit:contain; box-shadow:none; }
.tool-chrome .tc-brand small { display:block; margin-top:3px; font-size:8px; font-weight:600; letter-spacing:.2em; }
.tool-header { position:relative; z-index:45; height:91px; border-bottom:1px solid #e4e7eb; background:rgba(255,255,255,.96); backdrop-filter:blur(14px); }
.tool-header:has(.tc-menu[open]) { z-index:60; }
.tool-chrome .tc-header-inner { position:relative; display:flex; align-items:center; gap:20px; width:min(1200px,calc(100% - 80px)); height:100%; margin:auto; }
.tool-chrome .tc-nav { display:flex; align-items:center; gap:23px; margin-left:auto; }
.tool-chrome .tc-nav a,.tool-chrome .tc-lookup { display:inline-flex; align-items:center; min-height:44px; font-size:14px; font-weight:550; white-space:nowrap; }
.tool-chrome .tc-nav a:hover,.tool-chrome .tc-lookup:hover { color:#007fbf; }
.tool-chrome .tc-header-actions { display:flex; align-items:center; gap:20px; flex-shrink:0; }
.tool-chrome .tc-primary { display:inline-flex; align-items:center; justify-content:center; gap:24px; min-height:44px; padding:10px 19px; border-radius:99px; background:#10141d; color:#fff; font-size:14px; font-weight:600; line-height:1.4; white-space:nowrap; }
.tool-chrome .tc-primary:hover { background:#2c3b4b; }
.tool-chrome .tc-menu { position:static; padding:0; border:0; background:none; }
.tool-chrome .tc-menu summary { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:44px; height:44px; min-height:44px; margin:0; padding:10px; border:1px solid #e4e7eb; border-radius:50%; background:#fff; color:#161921; cursor:pointer; list-style:none; }
.tool-chrome .tc-menu summary::-webkit-details-marker { display:none; }
.tool-chrome .tc-menu summary span { display:block; width:18px; height:1.5px; background:currentColor; transition:transform .2s; }
.tool-chrome .tc-menu[open] summary span:first-child { transform:translateY(3.25px) rotate(45deg); }
.tool-chrome .tc-menu[open] summary span:last-child { transform:translateY(-3.25px) rotate(-45deg); }
.tool-chrome .tc-menu-panel { position:absolute; z-index:80; inset:calc(100% + 10px) 0 auto auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; width:min(810px,calc(100vw - 80px)); max-height:calc(100dvh - 118px); overflow:auto; overscroll-behavior:contain; padding:30px; border:1px solid #e4e7eb; border-radius:22px; background:#fff; box-shadow:0 20px 60px #1526381a; text-align:left; }
.tool-chrome .tc-menu:not([open]) .tc-menu-panel { display:none; }
.tool-chrome .tc-menu-panel p { margin:0 0 12px; color:#70818b; font-size:12px; font-weight:650; }
.tool-chrome .tc-menu-panel a { display:flex; align-items:center; min-height:44px; padding:9px 0; border:0; border-radius:0; font-size:14px; font-weight:550; color:#333e48; background:none; }
.tool-chrome .tc-menu-panel a:hover,.tool-chrome .tc-menu-panel a[aria-current=page] { color:#0076a8; text-decoration:underline; text-underline-offset:4px; }
.tool-chrome .tc-menu-tools { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:6px 22px; padding-top:20px; border-top:1px solid #e4e7eb; }
.tool-chrome .tc-menu-tools p { width:100%; margin:0; }
.tool-chrome .tc-menu-footer { display:none; }
.tool-footer { position:relative; z-index:1; width:100%; background:#fff; color:#161921; }
.tool-chrome .tc-footer-inner { width:min(1200px,calc(100% - 80px)); margin:auto; padding:60px 0 24px; text-align:left; }
.tool-chrome .tc-footer-top { display:flex; align-items:center; gap:29px; padding-bottom:33px; }
.tool-chrome .tc-footer-top > p { margin:0; color:#616774; font-size:11px; }
.tool-chrome .tc-social-links { display:flex; flex-wrap:wrap; gap:6px 22px; margin-left:auto; }
.tool-chrome .tc-social-links a,.tool-chrome .tc-footer-bottom a { display:inline-flex; align-items:center; min-height:44px; font-size:14px; }
.tool-chrome .tc-social-links a:hover,.tool-chrome .tc-footer-bottom a:hover { color:#007fbf; }
.tool-chrome .tc-footer-bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:15px; padding-top:18px; border-top:1px solid #e4e7eb; color:#7e8691; font-size:11px; letter-spacing:.03em; }
/* Keep the existing preview banner clear of footer links. */
main:has(.v4-native-preview) + .tool-footer { padding-bottom:100px; }
/* Mobile editors use the same brand/menu in their existing toolbar row. */
.tool-header--compact { width:100%; height:44px; border:0; background:transparent; backdrop-filter:none; }
.tool-header--compact .tc-header-inner { width:100%; gap:10px; }
.tool-header--compact .tc-brand { gap:6px; font-size:15px; }
.tool-header--compact .tc-brand img { width:28px; height:28px; }
.tool-header--compact .tc-brand small { font-size:7px; letter-spacing:1px; }
.tool-header--compact .tc-header-actions { gap:9px; margin-left:auto; }
.tool-header--compact .tc-menu-panel { position:fixed; inset:56px 12px auto; width:calc(100% - 24px); max-height:calc(100dvh - 80px); }
@media(max-width:1100px) {
  .tool-header:not(.tool-header--compact) .tc-header-inner,.tool-chrome .tc-footer-inner { width:calc(100% - 48px); }
  .tool-chrome .tc-nav,.tool-chrome .tc-lookup { display:none; }
  .tool-chrome .tc-header-actions { margin-left:auto; }
}
@media(max-width:900px) {
  .tool-header:not(.tool-header--compact) { height:75px; }
  .tool-chrome .tc-footer-top > p { display:none; }
}
@media(max-width:767px) {
  .tool-header.tool-desktop-only,.tool-footer.tool-footer--mochi { display:none; }
  .tool-chrome .tc-brand { font-size:17px; }
  .tool-chrome .tc-brand img { width:30px; height:30px; }
  .tool-chrome .tc-brand small { font-size:7px; }
  .tool-chrome .tc-header-actions { gap:12px; }
  .tool-chrome .tc-primary { padding:9px 12px; gap:8px; }
  .tool-chrome .tc-menu-panel { inset:calc(100% + 8px) 0 auto; width:100%; max-height:calc(100dvh - 93px); padding:22px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 18px; border-radius:18px; }
  .tool-chrome .tc-menu-group:last-of-type { grid-column:1/-1; }
  .tool-chrome .tc-menu-tools { display:block; }
  .tool-chrome .tc-menu-footer { grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 14px; padding-top:16px; border-top:1px solid #e4e7eb; color:#616774; font-size:11px; }
  .tool-chrome .tc-menu-footer small { width:100%; font-size:11px; }
  .tool-chrome .tc-footer-inner { padding-top:40px; }
  .tool-chrome .tc-footer-top { flex-wrap:wrap; justify-content:space-between; gap:20px; padding-bottom:24px; }
  .tool-chrome .tc-footer-top .tc-brand { font-size:15px; }
  .tool-chrome .tc-footer-top .tc-brand img { width:27px; height:27px; }
  .tool-chrome .tc-footer-bottom { gap:8px; }
  .tool-header--compact .tc-header-inner { gap:8px; }
  .tool-header--compact .tc-brand { gap:6px; font-size:14px; }
  .tool-header--compact .tc-brand img { width:27px; height:27px; }
  .tool-header--compact .tc-header-actions { gap:9px; }
  .tool-header--compact .tc-menu-panel { inset:56px 12px auto; width:calc(100% - 24px); max-height:calc(100dvh - 80px); }
  .mobile-play-topbar .tool-header--compact { width:calc(100% - 120px); height:100%; }
  .mobile-play-topbar .tool-header--compact .tc-header-actions { margin-left:0; }
  .mobile-play-topbar .tool-header--compact .tc-menu-panel { inset:var(--mobile-top-space) 12px auto; width:calc(100vw - 24px); }
  .mobile-play-topbar:has(.tc-menu[open]) { z-index:30; }
}
@media(max-width:640px) {
  .tool-header:not(.tool-header--compact) { height:70px; }
  .tool-header:not(.tool-header--compact) .tc-header-inner,.tool-chrome .tc-footer-inner { width:calc(100% - 40px); }
}
@media(max-width:360px) {
  .tool-header:not(.tool-header--compact) .tc-header-inner { width:calc(100% - 32px); gap:7px; }
  .tool-chrome .tc-header-actions { gap:7px; }
  .tool-chrome .tc-primary { padding-inline:10px; gap:6px; }
}
@media(prefers-reduced-motion:reduce) { .tool-chrome .tc-menu summary span { transition:none; } }