.header .nav{flex-wrap:wrap;gap:10px 18px}
.header .brand{gap:10px}.brand-name{font-size:30px;font-weight:900;letter-spacing:-.06em;color:#145ce6;line-height:1.2}
.header .brand-text{font-size:15px;letter-spacing:-.06em}
.community-nav{display:flex;align-items:center;justify-content:center;gap:22px;order:2;flex:1;min-width:0;white-space:nowrap;font-size:16px;font-weight:800}
.community-nav a{color:#263345;text-decoration:none;padding:10px 0;flex:none}.community-nav a:hover,.community-nav a[aria-current=page]{color:#145ce6}
.header .visitor-stats{order:3;font-size:10px;gap:8px}
.header-account{order:3;margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0}
.header .account-link{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:5px 12px;border-radius:8px;background:#ecf0f4;color:#1f2429;font-size:13px;font-weight:600;line-height:1.4;text-decoration:none;white-space:nowrap}
.header .account-link:hover{background:#e0e7ef}.header .account-link:focus-visible{outline:2px solid #145ce6;outline-offset:3px}
@media(max-width:1200px){.community-nav{order:4;flex-basis:100%;justify-content:flex-start;overflow-x:auto;gap:24px}.header .nav{padding-bottom:6px}}
@media(max-width:640px){.brand-name{font-size:25px}.header .brand-text{font-size:12px}.header .brand{gap:7px}.community-nav{gap:20px;font-size:14px}.community-nav a{padding:6px 0}.header .visitor-stats{font-size:9px;gap:5px}}
.brand-name{display:inline-flex;align-items:center;flex:none}.brand-name svg{display:block;width:2.49em;height:1em;overflow:visible}
@media(max-width:640px){.quick-rail{top:calc(var(--site-header-height,102px) + 12px);bottom:auto;max-height:calc(100dvh - var(--site-header-height,102px) - 100px)}.rail-extra{top:0;bottom:auto;max-height:calc(100dvh - var(--site-header-height,102px) - 100px);overflow-y:auto}}
/* 헤더: '보험을 가볍게'를 보이다 위에 작은 회색 글씨로 */
.header .brand{display:grid;grid-template-columns:auto auto;column-gap:9px;row-gap:2px;align-items:center}
.header .brand .logo-metal{grid-row:1/span 2}
.header .brand .brand-text{grid-column:2;align-self:end;font-size:11px;font-weight:700;line-height:1.1;letter-spacing:-.02em;color:#8b95a1}
.header .brand .brand-text{justify-self:center;text-align:center;padding-top:5px}
.header .brand .brand-text .slogan-dots{text-emphasis:filled dot #8b95a1;-webkit-text-emphasis:filled dot #8b95a1;text-emphasis-position:over right;-webkit-text-emphasis-position:over right}
.header .brand .brand-name{grid-column:2;align-self:start;line-height:1}
@media(max-width:640px){.header .brand .brand-text{font-size:10px}}
/* 플로팅 메뉴: 색과 실제 로고로 눈에 띄게 */
.quick-rail a{transition:transform .15s,filter .15s}.quick-rail a:hover{transform:translateY(-1px);filter:brightness(1.04)}
.quick-rail span{font-weight:800}
.quick-rail a.rail-signup{background:#eaf2ff;color:#145ce6;border:1px solid #c9dcff;box-shadow:none;min-height:64px;gap:4px}
.quick-rail a.rail-signup .signup-lettering{font-size:13px;font-weight:800;line-height:1.3;letter-spacing:-.04em}
.quick-rail a.rail-signup svg{width:27px;height:27px}
.quick-rail a.rail-tv{background:#fff;border:1.5px solid #ffc9c9;color:#c92a2a}.quick-rail a.rail-tv svg{width:28px;height:28px}
.quick-rail a.rail-consult{background:linear-gradient(160deg,#38d9a9,#0ca678);color:#fff;box-shadow:0 4px 10px #0ca67840}
.quick-rail a.rail-kakao{background:#fee500;color:#191919}.quick-rail a.rail-one svg{width:27px;height:27px}
.quick-rail a.rail-cardnews{background:#fff4e6;border:1.5px solid #ffd8a8;color:#d9480f}
.rail-extra a{background:#f5f7fa!important}
.quick-rail>a>svg,.quick-rail>a>img{width:32px;height:32px}
.quick-rail a.rail-tv svg,.quick-rail a.rail-one svg{width:32px;height:32px}
@media(max-width:640px){.quick-rail a.rail-signup{min-height:56px}.quick-rail a.rail-signup .signup-lettering{font-size:12px}}

/* Rounded custom lettering follows the logo's circular forms and soft terminals. */
.brand-name svg.rounded-wordmark{width:2.8em;height:1em;overflow:visible}
.logo-part{animation-duration:7.6s;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.22,.61,.36,1);transform-box:fill-box;transform-origin:center}
.logo-part-0{animation-name:logo-jamo-0}
@keyframes logo-jamo-0{0%,2%{opacity:0;transform:translateY(3px)}12%,86%{opacity:1;transform:translateY(0)}96%,100%{opacity:0;transform:translateY(0)}}
.logo-part-1{animation-name:logo-jamo-1}
@keyframes logo-jamo-1{0%,6%{opacity:0;transform:translateY(3px)}16%,86%{opacity:1;transform:translateY(0)}96%,100%{opacity:0;transform:translateY(0)}}
.logo-part-2{animation-name:logo-jamo-2}
@keyframes logo-jamo-2{0%,10%{opacity:0;transform:translateY(3px)}20%,86%{opacity:1;transform:translateY(0)}96%,100%{opacity:0;transform:translateY(0)}}
.logo-part-3{animation-name:logo-jamo-3}
@keyframes logo-jamo-3{0%,14%{opacity:0;transform:translateY(3px)}24%,86%{opacity:1;transform:translateY(0)}96%,100%{opacity:0;transform:translateY(0)}}
.logo-part-4{animation-name:logo-jamo-4}
@keyframes logo-jamo-4{0%,18%{opacity:0;transform:translateY(3px)}28%,86%{opacity:1;transform:translateY(0)}96%,100%{opacity:0;transform:translateY(0)}}
.logo-part-5{animation-name:logo-jamo-5}
@keyframes logo-jamo-5{0%,22%{opacity:0;transform:translateY(3px)}32%,86%{opacity:1;transform:translateY(0)}96%,100%{opacity:0;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.logo-part{animation:none;opacity:1;transform:none}}

/* Reveal the approved artwork along pen strokes, keeping its original pixels. */
.brand-name svg.approved-wordmark{width:2.8em;height:1em;overflow:hidden}
.logo-brush{stroke-dasharray:1;stroke-dashoffset:0;animation-duration:9s;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.4,0,.2,1)}
.brush-0{animation-name:logo-brush-0}
@keyframes logo-brush-0{0%,2%{stroke-dashoffset:1;opacity:0}2.2%{stroke-dashoffset:1;opacity:1}9%,86%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}
.brush-1{animation-name:logo-brush-1}
@keyframes logo-brush-1{0%,5%{stroke-dashoffset:1;opacity:0}5.2%{stroke-dashoffset:1;opacity:1}12%,86%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}
.brush-2{animation-name:logo-brush-2}
@keyframes logo-brush-2{0%,8%{stroke-dashoffset:1;opacity:0}8.2%{stroke-dashoffset:1;opacity:1}15%,86%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}
.brush-3{animation-name:logo-brush-3}
@keyframes logo-brush-3{0%,11%{stroke-dashoffset:1;opacity:0}11.2%{stroke-dashoffset:1;opacity:1}18%,86%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}
.brush-4{animation-name:logo-brush-4}
@keyframes logo-brush-4{0%,14%{stroke-dashoffset:1;opacity:0}14.2%{stroke-dashoffset:1;opacity:1}21%,86%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}
.brush-5{animation-name:logo-brush-5}
@keyframes logo-brush-5{0%,17%{stroke-dashoffset:1;opacity:0}17.2%{stroke-dashoffset:1;opacity:1}24%,86%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}
.brush-6{animation-name:logo-brush-6}
@keyframes logo-brush-6{0%,20%{stroke-dashoffset:1;opacity:0}20.2%{stroke-dashoffset:1;opacity:1}27%,86%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}
.brush-7{animation-name:logo-brush-7}
@keyframes logo-brush-7{0%,23%{stroke-dashoffset:1;opacity:0}23.2%{stroke-dashoffset:1;opacity:1}30%,86%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}
.brush-8{animation-name:logo-brush-8}
@keyframes logo-brush-8{0%,26%{stroke-dashoffset:1;opacity:0}26.2%{stroke-dashoffset:1;opacity:1}33%,86%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}
@media(prefers-reduced-motion:reduce){.logo-brush{animation:none;stroke-dashoffset:0;opacity:1}}

/* Once the last stroke finishes, reveal every pixel so no letter tip is clipped. */
.logo-brush-complete{animation:logo-brush-complete 9s linear infinite}
@keyframes logo-brush-complete{0%,32%{opacity:0}34%,86%{opacity:1}96%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.logo-brush-complete{animation:none;opacity:1}}