.community-actions{display:flex;align-items:center;gap:9px;position:relative;z-index:3;flex:0 1 auto}
.community-trigger{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--theme-surface,#fff);color:var(--ink);font-size:13px;font-weight:700;white-space:nowrap;transition:background-color .16s,border-color .16s,color .16s}
.community-trigger svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.social-links{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.social-links a{display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;flex:0 0 40px;border:1px solid var(--line);border-radius:12px;background:var(--theme-surface,#fff);color:var(--ink);transition:background-color .16s,border-color .16s,color .16s,transform .16s}
.social-links a:hover{transform:translateY(-1px);border-color:#a9c4ff;background:var(--theme-soft,#f1f5ff);color:var(--blue)}
.social-links a:focus-visible{outline:3px solid #a4c4ff;outline-offset:3px}
.social-links svg{display:block;width:22px;height:22px;flex:none;overflow:visible}
.social-links a[aria-label="Instagram 열기"] svg *{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.social-links a[aria-label="YouTube 채널 열기"] svg rect{fill:#ff0033;stroke:none}
.social-links a[aria-label="YouTube 채널 열기"] svg path{fill:#fff;stroke:none}
.community-trigger:hover,.community-trigger[aria-expanded="true"]{border-color:#a9c4ff;background:var(--theme-soft,#f1f5ff);color:var(--blue)}
.community-trigger:focus-visible,.community-popover-close:focus-visible{outline:3px solid #a4c4ff;outline-offset:3px}
.community-popover{position:absolute;top:calc(100% + 10px);left:24px;z-index:30;width:min(560px,calc(100vw - 48px));max-height:min(78vh,760px);overflow:auto;padding:19px 20px 21px;border:1px solid var(--line);border-radius:16px;background:var(--theme-surface,#fff);color:var(--ink);box-shadow:0 18px 55px #141b2b26;overscroll-behavior:contain}
.community-popover[hidden]{display:none}
.community-popover-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin:0 0 15px;padding:0 0 14px;border-bottom:1px solid var(--line)}
.community-popover-heading-copy{display:grid;gap:4px;min-width:0}
.community-popover-heading-copy small{color:var(--blue);font-size:9px;font-weight:800;letter-spacing:.13em}
.community-popover-heading h2{margin:0;font-size:19px;line-height:1.3;letter-spacing:-.3px}
.community-popover-heading p{margin:0;color:var(--muted);font-size:12px;line-height:1.55}
.community-popover-close{flex:0 0 36px;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:50%;color:var(--muted);font-size:23px;line-height:1}
.community-popover-close:hover{background:var(--theme-soft,#f1f5ff);color:var(--ink)}
.community-popover .guestbook-shell,.community-popover .support-shell{width:100%;max-width:none;margin:0;padding:0;color:var(--ink)}
.community-popover .guestbook-toggle{display:none}
.community-popover .guestbook-body{margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.community-popover .guestbook-heading{margin:0 0 13px}
.community-popover .guestbook-heading h2{display:none}
.community-popover .guestbook-heading p{font-size:11px}
.community-popover .support-content{padding:0}
html[data-theme="dark"] .community-popover{background:var(--theme-surface,#171a21);box-shadow:0 18px 55px #0007}
html[data-theme="dark"] .community-trigger{background:var(--theme-surface,#171a21)}
html[data-theme="dark"] .community-trigger:hover,html[data-theme="dark"] .community-trigger[aria-expanded="true"]{background:var(--theme-soft,#20242d)}
@media(max-width:800px){.community-actions{gap:6px}.community-trigger{min-height:36px;padding:0 9px;font-size:11px;gap:5px}.community-trigger svg{width:14px;height:14px}.social-links{gap:5px}.social-links a{width:36px;height:36px;flex-basis:36px;border-radius:10px}.social-links svg{width:20px;height:20px}.community-popover{left:14px;width:min(560px,calc(100vw - 28px));padding:16px}}
@media(max-width:520px){.header{gap:8px;padding:0 12px}.community-trigger{width:36px;height:36px;min-height:36px;padding:0}.community-trigger-label,#themeLabel{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.theme-toggle{width:36px;min-width:36px;height:36px;padding:0;justify-content:center}.header-right{gap:5px}.social-links{gap:4px}}
@media(max-width:380px){.community-actions{gap:5px}.community-trigger{width:36px;height:36px;min-height:36px;padding:0}.community-trigger-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.community-popover{left:10px;width:calc(100vw - 20px);padding:14px}.community-popover-heading h2{font-size:17px}}
@media(prefers-reduced-motion:reduce){.community-trigger{transition:none}}

.social-links a.naver-link{background:var(--theme-surface,#fff);border-color:var(--line);color:#03c75a}
.social-links a.naver-link:hover{background:var(--theme-soft,#f1f5ff);border-color:#a9c4ff;color:#03c75a}
.social-links .naver-mark{font:900 18px/1 Arial,sans-serif;letter-spacing:-1.5px;transform:translateX(-.5px)}

/* Keep the brand and controls in separate rows on narrow screens. */
@media (max-width:1279px){
  body .header,body[data-page="tool"] .header{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:"community brand ." "features actions actions";grid-template-rows:auto auto;align-items:center;gap:8px;height:auto;min-height:0;padding:8px 16px 10px}
  .header>.community-actions{grid-area:community;justify-self:start;min-width:0}
  .header>.brand{grid-area:brand;position:static;left:auto;top:auto;transform:none;margin:0;justify-self:center}
  .header .brand-logo,body[data-page="tool"] .header .brand-logo{width:72px}
  .header>.feature-tabs{grid-area:features;justify-self:start;min-width:0}
  .header>.header-right{grid-area:actions;justify-self:end;margin:0;min-width:0;gap:6px}
  .header .theme-toggle{min-height:36px;height:36px}
}
@media (max-width:520px){
  body .header,body[data-page="tool"] .header{padding:8px 10px 10px;gap:6px}
  .header .brand-logo,body[data-page="tool"] .header .brand-logo{width:64px}
  .header>.header-right{gap:4px}
  .header .tool-guide-button{width:36px;height:36px;min-width:36px;min-height:36px;flex:0 0 36px;padding:0;overflow:hidden;font-size:0}
  .header .tool-guide-button::before{content:"?";font-size:18px;line-height:1;font-weight:700}
}