/* ==========================================================================
   vet.bemypet.kr (BFV) — converted front page (Claude Design redesign).
   The page body is inline-styled (page-templates/page-front.php); this sheet
   only carries the base resets, responsive overrides and a11y bits that can't
   live inline. Behaviour (reveal / count-up / sticky CTA / hover) is in
   assets/js/main.js. Tokens in tokens.css load but the redesign hardcodes its
   palette, so they're inert here.
   ========================================================================== */

/* a11y: visible skip link target used by header.php */
.skip-link.screen-reader-text { position: absolute; left: -9999px; }
.skip-link.screen-reader-text:focus { left: 8px; top: 8px; z-index: 1000; padding: 8px 16px; background: #fff; }

/* --- base resets (scoped to the converted body) --- */
.vf-root *, .vf-root *::before, .vf-root *::after { box-sizing: border-box; }
.vf-root img { max-width: 100%; height: auto; display: block; }
.vf-root input::placeholder, .vf-root textarea::placeholder { color: rgba(255, 255, 255, .45); }
.vf-root summary { list-style: none; }
.vf-root summary::-webkit-details-marker { display: none; }

/* ==========================================================================
   Native site header (.vf-header) — fixed, transparent over the hero.
   z-index ladder keeps the menu ABOVE the hero so the mobile dropdown is
   tappable (fixes the hero-covers-dropdown bug):
     header bar 1000  <  desktop submenu / mobile panel 1001  <  burger 1002
   ========================================================================== */
/* Default (every page except the front hero): solid sticky bar — in normal
   flow so it never overlaps content, white logo/text stay readable. */
/* NB: no backdrop-filter — it would create a containing block for the fixed
   mobile menu panel (a descendant), clipping it to the header box instead of
   the viewport. The .95 background is effectively opaque, so blur added nothing. */
.vf-header { position: sticky; top: 0; z-index: 1000; background: rgba(14, 15, 17, .96); box-shadow: 0 1px 0 rgba(255, 255, 255, .07); font-family: 'Pretendard', 'Pretendard Variable', -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; transition: background .25s ease, box-shadow .25s ease; }
.vf-header *, .vf-header *::before, .vf-header *::after { box-sizing: border-box; }
/* Front page: overlay the dark hero — fixed + transparent until scrolled. */
body.vet-front .vf-header { position: fixed; inset: 0 0 auto 0; }
body.vet-front .vf-header:not(.is-scrolled) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.vf-header__inner { max-width: 1240px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.vf-header__logo { flex: none; display: inline-flex; align-items: center; }
.vf-header__logo img { height: 30px; width: auto; display: block; }
.vf-header.is-scrolled { background: rgba(14, 15, 17, .96); box-shadow: 0 1px 0 rgba(255, 255, 255, .07); }

.vf-header__nav { display: flex; align-items: center; gap: 6px; }
.vf-menu { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.vf-menu > li { position: relative; }
.vf-menu a { display: inline-flex; align-items: center; gap: 6px; color: #fff; text-decoration: none; font-weight: 600; font-size: 15px; line-height: 1; padding: 11px 14px; border-radius: 9px; white-space: nowrap; transition: color .15s ease, background .15s ease; }
.vf-menu a:hover, .vf-menu a:focus-visible { color: #FCD11E; }
/* current page (you-are-here): a yellow dot + bold on the active item. Uses a
   dot (not text colour) so it reads on BOTH the dark mobile panel and the white
   desktop dropdown; the ancestor (e.g. Services) just goes bold. */
.vf-menu .current-menu-item > a, .vf-menu .current_page_item > a,
.vf-menu .current-menu-ancestor > a, .vf-menu a[aria-current="page"] { font-weight: 800 !important; }
.vf-menu .current-menu-item > a::before, .vf-menu .current_page_item > a::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: #FCD11E; }
.vf-menu .menu-item-has-children > a::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .8; transition: transform .2s ease; }

/* desktop dropdown */
.vf-menu .sub-menu { position: absolute; top: 100%; left: 0; min-width: 248px; margin: 0; padding: 8px; list-style: none; background: #fff; border-radius: 14px; box-shadow: 0 24px 60px rgba(10, 11, 12, .22); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 1001; }
.vf-menu > li:hover > .sub-menu, .vf-menu > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.vf-menu .sub-menu a { display: block; color: #16171c; font-size: 14px; font-weight: 500; padding: 11px 14px; border-radius: 9px; }
.vf-menu .sub-menu a:hover, .vf-menu .sub-menu a:focus-visible { background: #F4F4F6; color: #16171c; }

.vf-header__cta { flex: none; display: inline-flex; align-items: center; margin-left: 8px; background: #FCD11E; color: #1A1A1A !important; font-weight: 700; font-size: 15px; text-decoration: none; padding: 11px 22px; border-radius: 999px; white-space: nowrap; transition: transform .18s ease, box-shadow .18s ease; }
.vf-header__cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(252, 209, 30, .35); }

/* burger (mobile only) */
.vf-header__burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; margin-right: -8px; background: none; border: 0; cursor: pointer; z-index: 1002; }
.vf-header__burger span { display: block; width: 100%; height: 2px; background: #fff; border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.vf-header.is-open .vf-header__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.vf-header.is-open .vf-header__burger span:nth-child(2) { opacity: 0; }
.vf-header.is-open .vf-header__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 920px) {
  .vf-header__burger { display: flex; }
  /* backdrop */
  .vf-header.is-open::before { content: ""; position: fixed; inset: 0; background: rgba(8, 9, 10, .5); z-index: 1000; }
  /* slide-in panel */
  .vf-header__nav { position: fixed; top: 0; right: 0; bottom: 0; width: min(86vw, 340px); flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 2px; padding: 86px 20px 32px; background: #0E0F11; box-shadow: -20px 0 60px rgba(0, 0, 0, .4); transform: translateX(100%); transition: transform .3s cubic-bezier(.16, 1, .3, 1); overflow-y: auto; z-index: 1001; }
  .vf-header.is-open .vf-header__nav { transform: translateX(0); }
  .vf-menu { flex-direction: column; align-items: stretch; gap: 2px; width: 100%; }
  .vf-menu a { font-size: 16px; padding: 14px 12px; justify-content: space-between; border-radius: 10px; }
  .vf-menu a:active { background: rgba(255, 255, 255, .06); }
  /* mobile accordion submenu */
  .vf-menu .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; transition: none; box-shadow: none; background: transparent; min-width: 0; margin: 0 0 6px; padding: 0 0 0 8px; display: none; z-index: auto; }
  .vf-menu .menu-item-has-children.is-open > .sub-menu { display: block; }
  .vf-menu .sub-menu a { color: rgba(255, 255, 255, .8); font-size: 14.5px; padding: 11px 12px; }
  .vf-menu .sub-menu a:hover, .vf-menu .sub-menu a:active { background: rgba(255, 255, 255, .06); color: #fff; }
  .vf-menu .menu-item-has-children.is-open > a::after { transform: rotate(225deg) translateY(2px); }
  /* current page is unmistakable in the dark mobile panel: accent the text */
  .vf-menu .current-menu-item > a, .vf-menu .current_page_item > a, .vf-menu a[aria-current="page"] { color: #FCD11E !important; }
  .vf-header__cta { width: 100%; justify-content: center; margin: 14px 0 0; padding: 15px 22px; font-size: 16px; }
}

/* Native (converted) pages: suppress leftover Elementor popups. The front-page
   popup #2332 opens as a full-screen z-9999 overlay that covered the native
   header on mobile (its pink close button landed over the menu controls).
   Passthrough Elementor pages keep their popups (this is scoped to .vet-converted). */
.vet-converted .elementor-popup-modal,
.vet-converted .elementor-popup-modal .dialog-widget-content { display: none !important; }

/* ==========================================================================
   BFV service-page design system (.bfv) — ported from Claude Design handoffs
   (page-website-service.php / page-influencer-marketing.php). Light theme,
   Noto Sans KR + Space Mono. Vars + responsive hooks scoped to .bfv.
   ========================================================================== */
.bfv { --acc: #fcd11e; --ink: #14151a; font-family: "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; word-break: keep-all; overflow-wrap: break-word; }
.bfv .mono { font-family: "Space Mono", ui-monospace, monospace; }
.bfv .gridlines { background-image: linear-gradient(rgba(20, 21, 26, .05) 1px, transparent 1px); background-size: 100% 34px; }
/* override the .vf-root dark-form white placeholder for these light forms */
.bfv input::placeholder { color: #9b9b9b; }
/* CRM hero pulse + FAQ <details> +/− indicator */
@keyframes bfvPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.bfv .faq-sign::before { content: "+"; }
.bfv details[open] .faq-sign::before { content: "−"; }

/* Hide the Elementor footer's fixed floating contact bar (#154 → element
   .elementor-element-ea38334) ONLY on the BFV design pages — it conflicts with
   the design's own sticky CTA. Other pages keep it. */
body.vet-website-service .elementor-element-ea38334,
body.vet-influencer-marketing .elementor-element-ea38334,
body.vet-crm-service .elementor-element-ea38334,
body.vet-insight .elementor-element-ea38334,
body.vet-team .elementor-element-ea38334,
body.vet-tv-ad .elementor-element-ea38334,
body.single-post .elementor-element-ea38334 { display: none !important; }

@media (max-width: 880px) {
  .bfv .hero-grid, .bfv .price-grid, .bfv .two-col, .bfv .form-grid, .bfv .cmp-grid, .bfv .news-grid { grid-template-columns: 1fr !important; }
  .bfv .feat-3, .bfv .feat-2 { grid-template-columns: 1fr !important; }
  .bfv .feat-4, .bfv .why-4, .bfv .proc-4, .bfv .tm-3 { grid-template-columns: 1fr 1fr !important; }
  .bfv .port-3 { grid-template-columns: 1fr !important; }
  .bfv .why-card { padding: 28px 22px !important; }
  .bfv .steps { flex-direction: column !important; gap: 14px !important; }
  .bfv .step-line { display: none !important; }
  .bfv .h-hero { font-size: 32px !important; }
  .bfv .h-sec { font-size: 26px !important; }
  .bfv .sec { padding: 60px 20px !important; }
  .bfv .navlinks { display: none !important; }
  .bfv .sticky-msg { display: none !important; }
  /* the decorative hero glow is too strong over the stacked mobile text — shrink,
     push further into the corner and fade it so it never hurts readability. */
  .bfv [data-hero-glow] { width: 200px !important; height: 200px !important; top: -110px !important; right: -110px !important; opacity: .45 !important; }
  /* keep a wide hero child (CRM phone+stats) from expanding the 1fr grid track
     and clipping the text/pills (section is overflow:hidden). min-width:0 lets the
     track stay at container width; the visual itself is shrunk + allowed to wrap. */
  .bfv .hero-grid > * { min-width: 0; }
  .bfv [data-crm-herovis] { gap: 12px !important; flex-wrap: wrap; max-width: 100%; }
  .bfv [data-crm-herovis] > div:nth-child(1) { width: 166px !important; }
  .bfv [data-crm-herovis] > div:nth-child(2) { width: 118px !important; }
}
@media (max-width: 560px) { .bfv .feat-4, .bfv .why-4, .bfv .proc-4, .bfv .tm-3 { grid-template-columns: 1fr !important; } }

/* Insight / Team — card hover + their responsive hooks (design bp 980/880/600) */
.bfv .card-hov { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.bfv .card-hov:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -28px rgba(20, 21, 26, .28); border-color: #d8d8dc; }
.bfv .feat-hov { transition: transform .2s ease, box-shadow .2s ease; }
.bfv .feat-hov:hover { transform: translateY(-3px); box-shadow: 0 34px 64px -30px rgba(20, 21, 26, .45); }
@media (max-width: 980px) {
  .bfv .feat-grid, .bfv .lead-grid, .bfv .form-grid { grid-template-columns: 1fr !important; }
  .bfv .post-grid { grid-template-columns: 1fr 1fr !important; }
  .bfv .role-4 { grid-template-columns: 1fr 1fr !important; }
  .bfv .lead-card { max-width: 420px; }
}
@media (max-width: 880px) {
  .bfv .feat-pad { padding: 30px 26px !important; }
  .bfv .value-card { padding: 40px 28px !important; }
  /* sections the design intends flush to the previous one (padding-top:0) must
     keep that on mobile — the blanket .sec mobile padding would add a big gap. */
  .bfv [data-flush-top] { padding-top: 0 !important; }
}
@media (max-width: 600px) {
  .bfv .post-grid { grid-template-columns: 1fr !important; }
  .bfv .stat-3, .bfv .role-4 { grid-template-columns: 1fr 1fr !important; }
  .bfv .row-2 { flex-direction: column !important; }
  .bfv .feat-num { font-size: 54px !important; }
  .bfv .feat-img { height: 190px !important; }
  .bfv .form-card, .bfv .lead-card { padding: 24px 20px !important; }
}

/* ---------- Post detail (single.php) — BFV article typography ----------
   `.article` styles the real the_content() (Gutenberg/semantic HTML). */
.bfv .article { font-size: 18px; line-height: 1.85; color: #2c2d33; letter-spacing: -.003em; }
.bfv .article > p { margin: 0 0 28px; }
.bfv .article > p:first-of-type { font-size: 19px; color: #1c1d22; }
.bfv .article strong, .bfv .article b { font-weight: 700; color: var(--ink); }
.bfv .article a { color: #14151a; text-decoration: underline; text-decoration-color: var(--acc); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.bfv .article code { font-family: "Space Mono", monospace; font-size: .86em; background: #f2f2f4; border: 1px solid #e7e7ea; border-radius: 5px; padding: 2px 6px; color: #14151a; }
.bfv .article h2 { font-size: 28px; line-height: 1.35; font-weight: 900; letter-spacing: -.015em; color: var(--ink); margin: 60px 0 20px; padding-top: 8px; }
.bfv .article h3 { font-size: 21px; line-height: 1.45; font-weight: 800; letter-spacing: -.01em; color: var(--ink); margin: 40px 0 14px; }
.bfv .article ul, .bfv .article ol { margin: 0 0 28px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 16px; }
.bfv .article ul > li { position: relative; padding-left: 30px; }
.bfv .article ul > li::before { content: ""; position: absolute; left: 6px; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--acc); }
.bfv .article ol { counter-reset: li; }
.bfv .article ol > li { position: relative; padding-left: 42px; counter-increment: li; }
.bfv .article ol > li::before { content: counter(li, decimal-leading-zero); position: absolute; left: 0; top: 1px; font-family: "Space Mono", monospace; font-size: 13px; font-weight: 700; color: #c0a000; }
.bfv .article figure { margin: 40px 0; }
.bfv .article > figure:first-child { margin-top: 8px; }
.bfv .article img { width: 100%; height: auto; display: block; border-radius: 14px; border: 1px solid #eaedef; }
.bfv .article figcaption { font-size: 13px; color: #9b9b9f; text-align: center; margin-top: 12px; }
.bfv .article blockquote { margin: 40px 0; padding: 4px 0 4px 28px; border-left: 4px solid var(--acc); font-size: 22px; line-height: 1.55; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.bfv .article blockquote p { margin: 0; }
.bfv .figure { margin: 40px 0; }
.bfv .figure img { width: 100%; display: block; border-radius: 14px; border: 1px solid #eaedef; }
.bfv .figure.portrait img { max-width: 360px; margin: 0 auto; }
/* NOTE: single.php deliberately keeps id="content" OFF <main> (the skip-link target
   lives on the first section). The it-service parity layer scopes a whole legacy
   single-post layout to `.single-post main#content` — max-width:600px, forced
   h1-h5/p margins, blue links, wp-block-image padding — which would wreck this native
   template. Keeping <main> free of that id sidesteps every one of those rules. */
.bfv .rel-row { transition: background .15s ease; }
.bfv .rel-row:hover .rel-title { text-decoration: underline; text-decoration-color: var(--acc); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.bfv .rel-row:hover .rel-arrow { transform: translateX(3px); }
.bfv .rel-arrow { transition: transform .15s ease; }
@media (max-width: 880px) {
  .bfv .art-h1 { font-size: 30px !important; }
  .bfv .wrap { padding-left: 20px !important; padding-right: 20px !important; }
  .bfv .article { font-size: 17px !important; }
  .bfv .article h2 { font-size: 23px !important; margin-top: 46px !important; }
  .bfv .article h3 { font-size: 19px !important; }
}
@media (max-width: 600px) {
  .bfv .art-h1 { font-size: 26px !important; }
  .bfv .article blockquote { font-size: 19px !important; }
  .bfv .meta-row { flex-wrap: wrap !important; gap: 12px 14px !important; }
  .bfv .figure.portrait img { max-width: 100% !important; }
}

/* --- responsive overrides (data-attribute hooks in the markup) --- */
@media (max-width: 920px) {
  [data-vs] { grid-template-columns: 1fr !important; }
  [data-vs-badge] { margin: 4px auto !important; }
  [data-feature] { grid-template-columns: 1fr !important; }
  [data-feature] [data-media] { order: 0 !important; }
  [data-faq] { grid-template-columns: 1fr !important; gap: 36px !important; }
  [data-faq-btn] { display: none !important; }
  [data-diag] { grid-template-columns: 1fr !important; }
  [data-diag-media] { min-height: 220px !important; }
}
@media (max-width: 560px) {
  [data-ctabar-text] { display: none !important; }
  [data-hero] { min-height: 84vh !important; padding-top: 92px !important; }
  [data-cta-bar] > div { padding: 14px !important; }
  [data-ctabar-actions] { width: 100%; flex-wrap: wrap; gap: 8px !important; }
  [data-ctabar-actions] [data-ctabar-btn="secondary"] { flex: 1 1 0 !important; min-width: 0; padding-inline: 12px !important; }
  [data-ctabar-actions] [data-ctabar-btn="primary"] { flex: 1 1 100% !important; }
}

/* --- 지역 TV 광고 (page-tv-ad) — responsive hooks for its data-attr markup.
   Shares the unscoped [data-hero] / [data-faq] / [data-cta-bar] rules above
   with the front page; only its own hooks are scoped here. --- */
@media (max-width: 920px) {
  body.vet-tv-ad [data-hero-grid] { grid-template-columns: 1fr !important; text-align: center !important; }
  body.vet-tv-ad [data-hero-copy] { align-items: center !important; }
  body.vet-tv-ad [data-hero-badges] { justify-content: center !important; }
  body.vet-tv-ad [data-sol] { grid-template-columns: 1fr !important; }
  body.vet-tv-ad [data-report] { grid-template-columns: 1fr !important; }
  body.vet-tv-ad [data-final] { grid-template-columns: 1fr !important; }
  body.vet-tv-ad [data-steps] { grid-template-columns: 1fr !important; }
  body.vet-tv-ad [data-step-arrow] { display: none !important; }
  body.vet-tv-ad [data-price-tables] { grid-template-columns: 1fr !important; }
}

/* --- reduced motion: never hide content if the user opted out --- */
@media (prefers-reduced-motion: reduce) {
  .vf-root [data-reveal] { opacity: 1 !important; transform: none !important; }
}