/* Blog chrome uses the supplied reference markup. Do not change other public pages. */
header.blog-chrome, footer.blog-chrome { all: unset; display: block; font-family: Pretendard, 'Apple SD Gothic Neo', sans-serif; font-size: 16px; line-height: 1.6; }
.blog-chrome { color: #1e1e1e; font-family: Pretendard, 'Apple SD Gothic Neo', sans-serif; font-size: 16px; line-height: 1.6; }
.blog-chrome div { box-sizing: content-box; }
.blog-chrome a { color: inherit; text-decoration: none; }
.blog-chrome a:hover { color: inherit; }
.blog-chrome img { max-width: 100%; }
.blog-chrome .bc-kp-mlayer.bc-active, .blog-chrome .bc-hm.bc-on { display: flex; }
/* Header bar height: same as the homepage (main_script.js setHeaders + globals.css .menu-wrapper).
   >=1280px: 80px at the top, 50px once scrolled, animated with `height .3s ease`; below that it stays 50px. */
.blog-chrome .bc-r-hbar, .blog-chrome .bc-gnb { height: 50px; }
@media (min-width: 1280px) {
.blog-chrome .bc-r-hbar, .blog-chrome .bc-gnb { height: 80px; transition: height .3s ease; }
.blog-chrome.bc-scrolled .bc-r-hbar, .blog-chrome.bc-scrolled .bc-gnb { height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
.blog-chrome .bc-r-hbar, .blog-chrome .bc-gnb { transition: none; }
}
/* Footer card: same as the homepage footer (globals.css footer / .footer-wrapper).
   The card spans the same content edges as the header and body (page gutter 16px, content max 1200px).
   Below 1280px the homepage footer is a flat full-width band, so this one is too. */
footer.blog-chrome { padding: 0 16px 80px; box-sizing: border-box; color: #ffffff; }
body .blog-chrome .bc-r-fcard, body footer.blog-chrome.bc-foot > .bc-wrap { box-sizing: border-box; max-width: 1200px; margin: 0 auto; padding: 60px 60px 45px; border-radius: 15px; background: #0e0207; }
@media (max-width: 1279px) {
footer.blog-chrome { padding: 0; background: #0e0207; }
body .blog-chrome .bc-r-fcard, body footer.blog-chrome.bc-foot > .bc-wrap { max-width: none; padding: 60px 16px 45px; border-radius: 0; }
}
/* Blog main header/footer: reference values, scoped to blog pages. */
body:has(.kp-blog) .blog-chrome a {color:inherit;text-decoration:none}
body:has(.kp-blog) .blog-chrome a:hover {color:inherit}
body:has(.kp-blog) .blog-chrome .bc-kp-menu {transition:color .15s}
body:has(.kp-blog) .blog-chrome .bc-kp-menu:hover, body:has(.kp-blog) .blog-chrome .bc-kp-sol:hover>.bc-kp-menu, body:has(.kp-blog) .blog-chrome .bc-kp-sub:hover {color:#dd5e1e!important}
body:has(.kp-blog) .blog-chrome .bc-kp-sol-layer {visibility:hidden;opacity:0;transition:opacity .3s,visibility .3s}
body:has(.kp-blog) .blog-chrome .bc-kp-sol:hover .bc-kp-sol-layer, body:has(.kp-blog) .blog-chrome .bc-kp-sol:focus-within .bc-kp-sol-layer {visibility:visible;opacity:1}
body:has(.kp-blog) .blog-chrome .bc-kp-chev {transition:transform .2s}
body:has(.kp-blog) .blog-chrome .bc-kp-sol:hover .bc-kp-chev {transform:rotate(180deg)}
body:has(.kp-blog) .blog-chrome .bc-kp-mbtn, body:has(.kp-blog) .blog-chrome .bc-kp-mlayer {display:none}
body:has(.kp-blog) .blog-chrome img {max-width:100%}
@media  (max-width:1099px) {
body:has(.kp-blog) .blog-chrome .bc-r-fnav {flex-wrap:wrap;row-gap:36px}
body:has(.kp-blog) .blog-chrome .bc-r-fnav>div {margin-right:48px!important}
body:has(.kp-blog) .blog-chrome .bc-r-flogos {flex-wrap:wrap;gap:20px}
body:has(.kp-blog) .blog-chrome .bc-r-certs {flex-wrap:wrap;gap:16px!important}
}
@media  (max-width:859px) {
body:has(.kp-blog) header.blog-chrome {background:#ffffff!important}
body:has(.kp-blog) .blog-chrome [style*="border-radius: 14px"] {border-radius:12px!important}
body:has(.kp-blog) .blog-chrome .bc-r-fnav {display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
body:has(.kp-blog) .blog-chrome .bc-r-fnav>div {margin-right:0!important}
body:has(.kp-blog) .blog-chrome .bc-r-finfo {align-items:flex-start!important;line-height:1.6!important}
body:has(.kp-blog) .blog-chrome .bc-r-copy {text-align:left!important}
}
@media  (max-width:767px) {
body:has(.kp-blog) .blog-chrome .bc-r-gnb>*:not(:first-child), body:has(.kp-blog) .blog-chrome .bc-kp-hbtn {display:none!important}
body:has(.kp-blog) .blog-chrome .bc-kp-mbtn {display:flex!important}
body:has(.kp-blog) .blog-chrome .bc-kp-mlayer.bc-active {display:flex!important}
body:has(.kp-blog) .blog-chrome .bc-r-notice {height:auto!important;min-height:56px;padding:8px 16px!important;gap:12px}
body:has(.kp-blog) .blog-chrome .bc-r-notice>span:first-child {display:none}
body:has(.kp-blog) .blog-chrome .bc-r-notice>span:nth-child(2) {align-items:flex-start!important;text-align:left!important;flex:1 1 auto}
body:has(.kp-blog) .blog-chrome .bc-r-notice>span:nth-child(2)>span:last-child {font-size:14px!important}
body:has(.kp-blog) .blog-chrome .bc-r-notice>span:last-child {flex:none!important;font-size:13px!important}
body:has(.kp-blog) .blog-chrome .bc-r-fnav {grid-template-columns:minmax(0,1fr)}
body:has(.kp-blog) .blog-chrome .bc-r-finfo>div {word-break:keep-all}
body:has(.kp-blog) .blog-chrome .bc-r-flogos {flex-direction:column;align-items:flex-start!important}
body:has(.kp-blog) .blog-chrome .bc-r-certs img {height:24px!important}
}
body:has(.kp-blog) .blog-chrome .bc-kp-hbtn:hover {background:#fe8848!important;color:#fff!important}

/* Blog_Post Details header/footer: reference values, scoped to blog pages. */
body:has(.kp-post) .blog-chrome a {color:inherit;text-decoration:none}
body:has(.kp-post) .blog-chrome a:hover {color:#dd5e1e}
body:has(.kp-post) .blog-chrome {color:#1e1e1e;font-family:Pretendard,"Apple SD Gothic Neo",sans-serif;font-size:16px;line-height:1.6}
body:has(.kp-post) .blog-chrome .bc-wrap {max-width:1232px;margin:0 auto;padding:0 16px;box-sizing:border-box}
body:has(.kp-post) header.blog-chrome {position:sticky;top:0;z-index:10;background:rgba(255,255,255,.95)}
body:has(.kp-post) .blog-chrome .bc-notice {display:flex;align-items:center;height:70px;box-sizing:border-box;padding:10px max(32px,calc((100% - 1232px) / 2));color:#fff;background:linear-gradient(to right,#e9591c 0%,#fe8848 50%,#737373 100%)}
body:has(.kp-post) .blog-chrome .bc-notice>span:first-child {flex:1 1 0}
body:has(.kp-post) .blog-chrome .bc-notice:hover {color:#fff}
body:has(.kp-post) .blog-chrome .bc-ntxt {display:flex;flex-direction:column;align-items:center;text-align:center}
body:has(.kp-post) .blog-chrome .bc-notice small {font-size:13px;font-weight:500;line-height:1.5}
body:has(.kp-post) .blog-chrome .bc-notice strong {font-size:17px;font-weight:500;line-height:1.5}
body:has(.kp-post) .blog-chrome .bc-nmore {flex:1 1 0;display:flex;justify-content:flex-end;font-size:15px;text-decoration:underline;text-underline-offset:3px}
body:has(.kp-post) .blog-chrome .bc-gnb {position:relative;display:flex;align-items:center;justify-content:space-between;color:#767676;font-size:16px;font-weight:500}
body:has(.kp-post) .blog-chrome .bc-gnb nav {display:flex;align-items:center;height:100%}
body:has(.kp-post) .blog-chrome .bc-hsol {position:relative;display:flex;align-items:center;height:32px;margin-left:44px}
body:has(.kp-post) .blog-chrome .bc-hmenu {display:flex;align-items:center;gap:6px;transition:color .15s}
body:has(.kp-post) .blog-chrome .bc-gnb nav>.bc-hmenu {margin-left:27px}
body:has(.kp-post) .blog-chrome .bc-hmenu:hover, body:has(.kp-post) .blog-chrome .bc-hsol:hover>.bc-hmenu, body:has(.kp-post) .blog-chrome .bc-hsub a:hover, body:has(.kp-post) .blog-chrome .bc-hm a:hover {color:#dd5e1e}
body:has(.kp-post) .blog-chrome .bc-hsub {position:absolute;top:31px;left:0;z-index:30;width:245px;box-sizing:border-box;padding:30px;border-radius:8px;background:#fff;box-shadow:0 0 17px #cfcfcf;text-align:left;visibility:hidden;opacity:0;transition:opacity .3s,visibility .3s}
body:has(.kp-post) .blog-chrome .bc-hsol:hover .bc-hsub, body:has(.kp-post) .blog-chrome .bc-hsol:focus-within .bc-hsub {visibility:visible;opacity:1}
body:has(.kp-post) .blog-chrome .bc-hsub a {display:block;padding-bottom:8px;font-size:14px;font-weight:500;color:#1e1e1e}
body:has(.kp-post) .blog-chrome .bc-hsub i {display:block;width:60px;height:1px;background:#e3e2e2;margin:6px 0 15px}
body:has(.kp-post) .blog-chrome .bc-hchev {transition:transform .2s}
body:has(.kp-post) .blog-chrome .bc-gnb nav .bc-hchev {width:12px;height:8px}
body:has(.kp-post) .blog-chrome .bc-hsol:hover .bc-hchev {transform:rotate(180deg)}
body:has(.kp-post) .blog-chrome .bc-gnb .bc-hcta {display:inline-flex;align-items:center;justify-content:center;flex:none;width:110px;height:35px;padding:0;box-sizing:border-box;border-radius:10px;background:#dd5e1e;color:#fff;font-size:14px;font-weight:500;line-height:1}
body:has(.kp-post) .blog-chrome .bc-gnb .bc-hcta:hover {color:#fff;background:#fe8848}
body:has(.kp-post) .blog-chrome .bc-gnb .bc-ham {display:none;width:50px;height:50px;margin-right:-13px;border:0;background:transparent;cursor:pointer;align-items:center;justify-content:center}
body:has(.kp-post) .blog-chrome .bc-hm {display:none;position:absolute;top:50px;left:0;right:0;z-index:30;flex-direction:column;padding:23px 16px 32px 40px;background:#fff;box-shadow:0 8px 16px rgba(30,30,30,.08);font-size:15px;font-weight:500;line-height:1.2}
body:has(.kp-post) .blog-chrome .bc-hm.bc-on {display:flex}
body:has(.kp-post) .blog-chrome .bc-hcols {display:flex;gap:10vw}
body:has(.kp-post) .blog-chrome .bc-hcols div {display:flex;flex-direction:column;gap:15px;width:160px}
body:has(.kp-post) .blog-chrome .bc-hcols div+div {width:120px}
body:has(.kp-post) .blog-chrome .bc-hm a {color:#1e1e1e}
body:has(.kp-post) .blog-chrome .bc-hm i {display:block;height:1px;background:#e3e2e2;margin:21px 45px 23px 0}
body:has(.kp-post) .blog-chrome.bc-foot {color:#fff}
body:has(.kp-post) .blog-chrome .bc-fnav {display:flex;flex-wrap:wrap;gap:36px 80px;font-size:14px;font-weight:500}
body:has(.kp-post) .blog-chrome .bc-fnav div {display:flex;flex-direction:column;gap:12px}
body:has(.kp-post) .blog-chrome .bc-fnav b {font-weight:500;color:#c1c0c0}
body:has(.kp-post) .blog-chrome .bc-finfo {margin-top:25px;font-size:12px;line-height:1.8;text-align:right}
body:has(.kp-post) .blog-chrome .bc-flogos {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin-top:30px}
body:has(.kp-post) .blog-chrome .bc-certs {display:flex;flex-wrap:wrap;align-items:center;gap:20px}
body:has(.kp-post) .blog-chrome .bc-certs img {height:28px;width:auto;display:block}
body:has(.kp-post) .blog-chrome .bc-copy {margin-top:30px;padding-top:18px;border-top:1px solid #3a3236;text-align:right;font-size:12px;color:#c1c0c0}
@media  (max-width:859px) {
body:has(.kp-post) .blog-chrome .bc-finfo, body:has(.kp-post) .blog-chrome .bc-copy {text-align:left}
}
@media  (max-width:767px) {
body:has(.kp-post) .blog-chrome .bc-notice {height:auto;min-height:56px;padding:8px 16px;gap:12px}
body:has(.kp-post) .blog-chrome .bc-notice>span:first-child {display:none}
body:has(.kp-post) .blog-chrome .bc-ntxt {align-items:flex-start;text-align:left;flex:1 1 auto}
body:has(.kp-post) .blog-chrome .bc-notice strong {font-size:14px}
body:has(.kp-post) .blog-chrome .bc-nmore {flex:none;font-size:13px}
body:has(.kp-post) .blog-chrome .bc-gnb nav>*:not(:first-child), body:has(.kp-post) .blog-chrome .bc-gnb .bc-hcta {display:none}
body:has(.kp-post) .blog-chrome .bc-gnb .bc-ham {display:flex}
body:has(.kp-post) header.blog-chrome {background:#fff}
}
body:has(.kp-post) .blog-chrome [hidden] {display:none!important}
@media (min-width:768px) {
body:has(.kp-post) .blog-chrome .bc-hm.bc-on {display:none}
}

/* Consultation dialog from Blog_Post Details; existing openModal/closeModal hooks are retained. */
.consult-modal.bc-mback { all: unset; font-family: Pretendard, "Apple SD Gothic Neo", sans-serif; font-size: 16px; line-height: 1.6; color: #1e1e1e; }
.consult-modal.bc-mback div { box-sizing: content-box; }
.consult-modal.bc-mback .bc-dialog { box-sizing: border-box; }
.consult-modal a { color: inherit; text-decoration: none; }
@keyframes bc-mdim{from{opacity:0}to{opacity:1}}
@keyframes bc-mrise{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.consult-modal.bc-mback {animation:bc-mdim .6s ease-out both}
.consult-modal .bc-dialog {animation:bc-mrise .7s cubic-bezier(.2,.8,.2,1) .15s both}
@media  (prefers-reduced-motion:reduce) {
.consult-modal.bc-mback, .consult-modal .bc-dialog {animation:none}
}
.consult-modal.bc-mback {position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(20,16,14,.55)}
.consult-modal .bc-dialog {position:relative;width:100%;max-width:514px;box-sizing:border-box;padding:40px 40px 28px;border-radius:20px;background:#faf9f8;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.consult-modal .bc-mx {position:absolute;top:10px;right:10px;width:44px;height:44px;border:0;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer}
.consult-modal .bc-mx span {display:flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:999px;background:#f26b6b}
.consult-modal .bc-dialog h2 {margin:0;font-size:20px;font-weight:700;line-height:1.4;color:#1e1e1e;word-break:keep-all}
.consult-modal .bc-dialog>p {margin:10px 0 0;font-size:14px;color:#4a4540;word-break:keep-all}
.consult-modal .bc-steps {display:flex;align-items:center;justify-content:center;gap:4px;margin-top:32px}
.consult-modal .bc-step {flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px 8px;border:1px solid #ebe6e1;border-radius:14px;background:#fff}
.consult-modal .bc-sico {display:flex;align-items:center;justify-content:center;width:52px;height:52px;margin-bottom:8px;border-radius:999px;background:#fdece2;color:#dd5e1e}
.consult-modal .bc-step b {font-size:11px;font-weight:700;letter-spacing:.06em;color:#b8460f}
.consult-modal .bc-step span {font-size:13px;font-weight:600;line-height:1.5;color:#1e1e1e;word-break:keep-all}
.consult-modal .bc-sarr {flex:none;color:#dd5e1e}
.consult-modal .bc-mcta {display:flex;align-items:center;justify-content:center;min-height:52px;margin-top:36px;border-radius:12px;background:#dd5e1e;color:#fff !important;font-size:17px;font-weight:700}
.consult-modal .bc-mcta:hover {background:#c9531a}
.consult-modal .bc-mnote {margin:14px 0 0;font-size:12px;color:#6b6560}
@media  (max-width:767px) {
.consult-modal.bc-mback {align-items:flex-end;padding:0}
.consult-modal .bc-dialog {max-width:none;padding:32px 20px calc(20px + env(safe-area-inset-bottom));border-radius:20px 20px 0 0;text-align:left;animation-name:bc-msheet}
.consult-modal .bc-dialog h2 {font-size:19px;padding-right:32px}
.consult-modal .bc-dialog>p {font-size:14px}
.consult-modal .bc-steps {flex-direction:column;align-items:stretch;gap:0;margin-top:24px}
.consult-modal .bc-step {display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;row-gap:0;align-items:center;justify-items:start;padding:12px 14px;text-align:left}
.consult-modal .bc-step .bc-sico {grid-row:1 / span 2;width:40px;height:40px;margin:0}
.consult-modal .bc-step b {align-self:end}
.consult-modal .bc-step span {align-self:start;font-size:14px}
.consult-modal .bc-step span br {display:none}
.consult-modal .bc-sarr {align-self:center;transform:rotate(90deg);margin:2px 0}
.consult-modal .bc-mcta {margin-top:24px}
.consult-modal .bc-mnote {text-align:center}
}
@keyframes bc-msheet{from{transform:translateY(100%)}to{transform:none}}
.consult-modal.bc-mback:not(.active) { display: none; }

/* Header container and logo: same as the homepage (globals.css .header / .header .logo).
   Content is 1200px wide (1232px box with 16px gutters); the logo sits in a fixed box with the image contained and centered. */
body .blog-chrome .bc-r-hbar, body .blog-chrome .bc-gnb.bc-wrap { box-sizing: border-box; max-width: 1232px; margin: 0 auto; padding: 0 16px; }
body .blog-chrome img.bc-logo { display: block; width: 105px; height: 32px; max-width: none; object-fit: contain; }
@media (max-width: 1279px) {
body .blog-chrome .bc-r-hbar, body .blog-chrome .bc-gnb.bc-wrap { padding-left: 20px; }
body .blog-chrome img.bc-logo { width: 79px; height: 24px; }
}
@media (max-width: 767px) {
body .blog-chrome .bc-r-hbar, body .blog-chrome .bc-gnb.bc-wrap { padding-left: 14px; }
body .blog-chrome img.bc-logo { width: 94px; height: 28px; }
}

/* Footer link hover: same as the homepage (.footer-menu:hover, color .3s ease, --font-orange). */
.blog-chrome .bc-r-fnav a, .blog-chrome .bc-fnav a { transition: color .3s ease; }
body .blog-chrome .bc-r-fnav a:hover, body .blog-chrome .bc-fnav a:hover { color: #dd5e1e !important; }