/* =========================================================
   PATCH 2026-05-21 / SONYA V3 REPACKAGE / MAIN CSS BUNDLE
   목적: 최종 index.html 내부 CSS를 순서 보존형 외부 파일로 분리
   보호 범위: 모바일 로고/타이틀 균형, 가격 10/20/50, 모달/메뉴/앵커 기존 동작 유지
   ========================================================= */



/* =========================================================
   LANDINGPAGER FEEDHOME INTEGRATED / CSS MAP & WORK NOTES
   작성일: 2026-05-19
   기준 파일: landingpager_feedhome_integrated_v25_anchor_offset_fix.html

   [작업 원칙]
   1. 이 파일은 랜딩페이저 feedhome 메인 통합본입니다.
   2. 기존 안정 기능은 직접 수정하지 않고, 하단 PATCH 블록으로 덮어쓰는 방식으로 관리합니다.
   3. 새 작업 시 기존 CSS를 삭제하기보다, 목적/날짜/보호 범위를 적은 PATCH 주석을 추가한 뒤 최소 범위만 수정합니다.
   4. 모바일/PC가 함께 영향을 받는 값은 반드시 media query를 같이 확인합니다.

   [주요 CSS 영역]
   01. HEADER / MENU
       - .fm-header
       - .fm-container.fm-nav
       - .fm-logo / .fm-logo-image / .fm-logo-text
       - .fm-menu / .fm-cta
       - 주의: 로고는 이미지 + 타이틀 + 카피 구조입니다.
       - 주의: 일반 메뉴의 '문의하기'는 제거하고 우측 '제작 문의하기' CTA만 유지합니다.

   02. HERO
       - .fm-hero
       - .fm-hero-copy
       - .fm-hero-title / .fm-hero-title-line
       - .fm-hero-actions / .fm-btn
       - 주의: 히어로 우측 설명 박스(.fm-hero-side)는 현재 숨김 처리되어 있습니다.
       - 주의: 히어로 버튼은 '시작하기' → #brand-intro, '제작가이드' → #production-guide 입니다.

   03. HERO INFO BADGE
       - .lp-hero-info-trigger
       - .lp-feed-info-modal
       - 역할: 히어로 제목 옆 작은 느낌표 안내 버튼 및 피드형 랜딩페이지 설명 모달
       - 주의: 버튼은 제목 폭 계산에 포함되지 않도록 .fm-hero-title-line 내부 absolute 배치입니다.
       - 주의: 모바일 클릭 문제 방지를 위해 JS는 querySelectorAll("[data-lp-feed-info-open]") 방식입니다.

   04. SECTION SPACING
       - .feedhome-integrated-sections
       - .feedhome-section
       - .feedhome-section-head
       - 역할: 통합 섹션별 상하 간격을 동일 기준으로 정리합니다.
       - 주의: 섹션별 개별 padding을 새로 추가하면 전체 리듬이 다시 깨질 수 있습니다.

   05. ANCHOR / SCROLL OFFSET
       - html scroll-padding-top
       - section[id] scroll-margin-top
       - V25 ANCHOR OFFSET OVERRIDE JS
       - 역할: 고정 헤더에 섹션 제목이 걸리지 않도록 실제 섹션 헤더 기준으로 이동합니다.
       - 주의: 메뉴 높이나 헤더 구조 변경 시 V25 스크립트의 headerHeight/extraGap도 함께 확인합니다.

   06. BRAND INTRO / GUIDE / PORTFOLIO / PRICE / FAQ / INSIGHT
       - 각 섹션은 기존 독립 시안 소스를 통합한 구조입니다.
       - 기능형 요소는 각 섹션별 기존 class를 유지합니다.
       - 주의: 카드/슬라이더/FAQ/인사이트 모달 관련 CSS는 섹션 내부 구조에 의존합니다.

   07. CONTACT CTA + WIZARD MODAL
       - .lp-contact-cta
       - .lp-contact-modal
       - .lp-contact-step
       - .lp-privacy-modal
       - 역할: 제작·운영 문의 CTA와 단계형 문의 모달입니다.
       - 주의: 실제 메일 발송/DB 저장 연결 전까지는 데모 완료 처리 구조입니다.

   [다음 작업 시 체크리스트]
   - PC 메뉴: 로고 왼쪽 / 메뉴 중앙 / 제작 문의하기 오른쪽 유지
   - 히어로: 카피 중앙 정렬 유지, 느낌표 뱃지가 텍스트 정렬을 밀지 않는지 확인
   - 버튼: PC/모바일 크기와 줄바꿈 확인
   - 앵커: 시작하기/메뉴 클릭 시 섹션 제목이 헤더에 걸리지 않는지 확인
   - 모바일: 햄버거 메뉴, 모달 열기/닫기, 문의 위저드 다음/이전 버튼 확인
   ========================================================= */


/* =========================================================
   BRANDINGTIME COMPANY INTRO STANDARD / 2026-05-17
   목적: 고객이 직접 열어볼 수 있는 회사소개서형 브랜드 페이지
   기준: 랜딩페이저 시안 표준 (모바일 우선, 표준 타이포그래피, 화이트/샌드톤)
   보호: 본 파일은 독립 시안용 HTML, 실제 서비스용으로 재활용 가능
========================================================= */
:root{
  --fm-container:1160px;
  --fm-bg:#fcfaf7;
  --fm-paper:#ffffff;
  --fm-soft:#f5efe8;
  --fm-soft-2:#efe5d8;
  --fm-line:#e7dfd4;
  --fm-title:#201a1d;
  --fm-text:#625b62;
  --fm-deep:#111315;
  --fm-rose:#8f4d5a;
  --fm-sand:#b89262;
  --fm-brown:#5a4334;
  --fm-shadow:0 16px 40px rgba(24,20,22,.08);
  --fm-radius-xl:32px;
  --fm-radius-lg:24px;
  --fm-radius-md:18px;

  --fm-font-hero:clamp(38px,4.25vw,62px);
  --fm-font-section:clamp(28px,3vw,42px);
  --fm-font-card-title:20px;
  --fm-font-body:15.5px;
  --fm-font-small:13px;
  --fm-font-button:15px;

  --fm-section-pc:96px;
  --fm-section-mo:36px;
  --fm-side-pc:36px;
  --fm-side-mo:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* PATCH 2026-05-17 / BRANDINGTIME V17 MOBILE ANCHOR OFFSET */
html{scroll-padding-top:78px}
section[id], .fm-section[id]{scroll-margin-top:78px}
body{
  margin:0;
  font-family:Pretendard,"Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;
  background:var(--fm-bg);
  color:var(--fm-title);
  letter-spacing:-.035em;
  line-height:1.68;
  word-break:keep-all;
  font-size:var(--fm-font-body);
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
button{font:inherit}

.fm-container{width:min(var(--fm-container),calc(100% - var(--fm-side-pc)));margin:0 auto}
.fm-section{padding:var(--fm-section-pc) 0}
.fm-section.white{background:#fff}
.fm-section.soft{background:#fbf7f2}
.fm-badge{
  display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 12px;
  border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.12);
  color:#fff;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
}
.fm-chip{
  display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:0 12px;
  border-radius:999px;background:#fff4f6;color:var(--fm-rose);font-size:12px;font-weight:800;
}
.fm-mini{
  display:inline-block;margin-bottom:10px;color:var(--fm-rose);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;
}
.fm-title h2,
.fm-split-head h2{
  margin:0;font-size:var(--fm-font-section);line-height:1.22;letter-spacing:-.05em;
}
.fm-title p,
.fm-split-head p{margin:12px 0 0;color:var(--fm-text);font-size:15.5px;line-height:1.75}
.fm-title.center{text-align:center}
.fm-title.center p{max-width:720px;margin:12px auto 0}

/* HEADER */
/* PATCH 2026-05-17 / BRANDINGTIME V11 TRANSPARENT HEADER
   목적: 히어로 배경이 메뉴 영역 뒤까지 이어지고, 스크롤 시 헤더 배경/글자색 전환 */
.fm-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:transparent;
  border-bottom:1px solid transparent;
  color:#fff;
  transition:background .28s ease,border-color .28s ease,box-shadow .28s ease,color .28s ease,backdrop-filter .28s ease;
}
.fm-header.is-scrolled,
body.is-menu-open .fm-header{
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(214,204,193,.75);
  color:#201a1d;
  box-shadow:0 10px 28px rgba(24,20,22,.08);
}
.fm-nav{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.fm-logo{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.fm-logo-mark{
  width:42px;height:42px;border-radius:14px;background:rgba(255,255,255,.16);color:#fff;display:grid;place-items:center;
  font-size:16px;font-weight:900;box-shadow:0 12px 30px rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.22);
  transition:background .28s ease,color .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.fm-header.is-scrolled .fm-logo-mark,
body.is-menu-open .fm-logo-mark{
  background:#1b1719;
  color:#fff;
  border-color:#1b1719;
  box-shadow:var(--fm-shadow);
}
.fm-logo-text{line-height:1.06}
.fm-logo-text b{display:block;font-size:21px;letter-spacing:-.055em}
.fm-logo-text small{display:block;margin-top:4px;color:rgba(255,255,255,.72);font-size:11px;letter-spacing:.08em;transition:color .28s ease}
.fm-header.is-scrolled .fm-logo-text small,
body.is-menu-open .fm-logo-text small{color:var(--fm-text)}
.fm-menu{display:flex;align-items:center;gap:22px;font-size:14px;font-weight:850;color:rgba(255,255,255,.9);transition:color .28s ease}
.fm-header.is-scrolled .fm-menu,
body.is-menu-open .fm-menu{color:#43393d}
.fm-menu a{position:relative;padding:24px 0}
.fm-menu a:hover{color:#fff}
.fm-header.is-scrolled .fm-menu a:hover,
body.is-menu-open .fm-menu a:hover{color:var(--fm-rose)}

/* PATCH 2026-05-17 / BRANDINGTIME V12 MENU ACTIVE
   목적: 현재 섹션에 도착하면 메뉴 색상/밑줄 활성화 */
.fm-menu a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:17px;
  height:2px;
  border-radius:999px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:center;
  opacity:0;
  transition:transform .22s ease,opacity .22s ease,color .22s ease;
}
.fm-menu a.is-active{
  color:#f3dac8;
}
.fm-menu a.is-active::after{
  transform:scaleX(1);
  opacity:.95;
}
.fm-header.is-scrolled .fm-menu a.is-active,
body.is-menu-open .fm-menu a.is-active{
  color:var(--fm-rose);
}
.fm-mobile-panel a.is-active{
  color:var(--fm-rose);
  font-weight:950;
}
.fm-mobile-panel a.is-active::after{
  content:"현재";
  font-size:11px;
  font-weight:900;
  color:var(--fm-rose);
}

.fm-cta{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:999px;
  background:#fff;color:#111315;font-size:14px;font-weight:900;
  border:1px solid rgba(255,255,255,.18);
  transition:background .28s ease,color .28s ease,border-color .28s ease
}
.fm-header.is-scrolled .fm-cta,
body.is-menu-open .fm-cta{
  background:#111315;
  color:#fff;
  border-color:#111315;
}
.fm-menu-btn{display:none;width:44px;height:44px;border:1px solid rgba(255,255,255,.28);border-radius:14px;background:rgba(255,255,255,.12);cursor:pointer;flex-direction:column;gap:5px;justify-content:center;align-items:center;transition:background .28s ease,border-color .28s ease}
.fm-menu-btn span{display:block;width:18px;height:2px;border-radius:99px;background:#fff;transition:background .28s ease}
.fm-header.is-scrolled .fm-menu-btn,
body.is-menu-open .fm-menu-btn{border-color:var(--fm-line);background:#fff}
.fm-header.is-scrolled .fm-menu-btn span,
body.is-menu-open .fm-menu-btn span{background:#201a1d}
.fm-mobile-panel{display:none;position:fixed;left:0;right:0;top:74px;z-index:49;background:#fff;border-bottom:1px solid var(--fm-line);padding:16px var(--fm-side-mo) 22px;box-shadow:0 20px 44px rgba(0,0,0,.08)}
.fm-mobile-panel a{display:flex;align-items:center;justify-content:space-between;min-height:50px;border-bottom:1px solid #f0e7dd;font-weight:850;color:#342d30}
.fm-mobile-panel .panel-cta{margin-top:12px;justify-content:center;border:0;border-radius:16px;background:#111315;color:#fff}
body.is-menu-open{overflow:hidden}
body.is-menu-open .fm-mobile-panel{display:block}

/* HERO */
.fm-hero{position:relative;min-height:100vh;overflow:hidden;background:#171315;color:#fff}
.fm-hero-slide-wrap{position:absolute;inset:0}
.fm-hero-slide{
  position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;animation:heroFade 18s infinite;
}
.fm-hero-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(19,16,18,.62) 0%,rgba(19,16,18,.42) 24%,rgba(19,16,18,.54) 48%,rgba(19,16,18,.76) 100%)}
/* PATCH 2026-05-17 / BRANDINGTIME V14 HERO STABLE DIRECT IMAGES
   목적: 검정 화면 방지를 위해 2·3번 히어로 이미지를 고정 images.unsplash.com URL로 교체 */
.fm-hero-slide.s1{animation-delay:0s;background-image:url('https://brandingtime.landingpager.kr/images/btime001.png')}
.fm-hero-slide.s2{animation-delay:6s;background-image:url('https://brandingtime.landingpager.kr/images/btime002.png')}
.fm-hero-slide.s3{animation-delay:12s;background-image:url('https://brandingtime.landingpager.kr/images/btime003.png')}
@keyframes heroFade{
  0%,28%{opacity:1} 33%,95%{opacity:0} 100%{opacity:1}
}
.fm-hero-inner{position:relative;z-index:1;min-height:100vh;display:flex;align-items:center;padding:146px 0 92px}
.fm-hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,430px);gap:40px;align-items:end;width:100%}
.fm-hero-copy h1{margin:14px 0 0;font-size:var(--fm-font-hero);line-height:1.08;letter-spacing:-.065em}
.fm-hero-copy p{max-width:660px;margin:18px 0 0;color:rgba(255,255,255,.82);font-size:17px;line-height:1.82}
.fm-mobile-copy{display:none}
.fm-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.fm-btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 22px;border-radius:999px;
  font-size:var(--fm-font-button);font-weight:900;transition:.2s ease
}
.fm-btn.primary{background:#fff;color:#171315}
.fm-btn.secondary{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.26)}
.fm-hero-side{
  border:1px solid rgba(255,255,255,.16);border-radius:26px;background:rgba(255,255,255,.08);backdrop-filter:blur(16px);
  padding:26px 24px;box-shadow:0 20px 60px rgba(0,0,0,.16)
}
.fm-hero-side h3{margin:0;font-size:22px;line-height:1.3;letter-spacing:-.045em}
.fm-hero-side p{margin:10px 0 0;color:rgba(255,255,255,.78);font-size:14px;line-height:1.72}
.fm-hero-list{display:grid;gap:10px;margin-top:18px}
.fm-hero-item{display:flex;gap:10px;align-items:flex-start;padding:12px 0;border-top:1px solid rgba(255,255,255,.12)}
.fm-hero-item:first-child{border-top:0;padding-top:0}
.fm-hero-item i{display:inline-flex;width:24px;justify-content:center;color:#f3dac8;font-style:normal;font-weight:900}
.fm-hero-item b{display:block;font-size:15px}
.fm-hero-item span{display:block;margin-top:2px;color:rgba(255,255,255,.72);font-size:13px;line-height:1.55}

/* CARDS */
.fm-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.fm-grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.fm-card{
  border:1px solid var(--fm-line);border-radius:var(--fm-radius-lg);background:#fff;padding:24px;box-shadow:var(--fm-shadow)
}
.fm-card.icon-card{padding-top:22px}
.fm-icon{
  width:52px;height:52px;border-radius:16px;background:#f7efe7;color:var(--fm-brown);display:grid;place-items:center;
  font-size:22px;font-weight:900;margin-bottom:16px
}
.fm-card h3{margin:0;font-size:var(--fm-font-card-title);line-height:1.3;letter-spacing:-.045em}
.fm-card p{margin:10px 0 0;color:var(--fm-text);font-size:14.5px;line-height:1.72}
.fm-card ul{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.fm-card li{position:relative;padding-left:16px;color:var(--fm-text);font-size:14px}
.fm-card li::before{content:"·";position:absolute;left:0;top:0;color:var(--fm-rose);font-weight:900}
.fm-card.emphasis{background:#f8f3ee;border-color:#e2d7ca}
.fm-card.dark{background:#1d181a;color:#fff;border-color:#1d181a;box-shadow:none}
.fm-card.dark p,.fm-card.dark li{color:rgba(255,255,255,.78)}
.fm-card.dark li::before{color:#f1d5bf}

/* SPLIT SECTION */
.fm-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,460px);gap:28px;align-items:center}
.fm-panel{
  border:1px solid var(--fm-line);border-radius:var(--fm-radius-xl);background:#fff;padding:28px;box-shadow:var(--fm-shadow)
}
.fm-panel img{width:100%;height:100%;object-fit:cover;border-radius:22px;min-height:420px}
.fm-keypoints{display:grid;gap:12px;margin-top:18px}
.fm-keypoint{display:flex;gap:14px;padding:16px 18px;border:1px solid var(--fm-line);border-radius:18px;background:#fff}
.fm-keypoint strong{display:block;font-size:16px;line-height:1.35}
.fm-keypoint span{display:block;margin-top:4px;color:var(--fm-text);font-size:14px;line-height:1.65}
.fm-k-num{flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:#f8f3ee;color:var(--fm-brown);display:grid;place-items:center;font-size:14px;font-weight:900}

/* PROCESS */
.fm-process{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;position:relative}
.fm-process::before{content:"";position:absolute;left:12%;right:12%;top:28px;height:1px;background:#dfd4c7;z-index:0}
.fm-step{position:relative;z-index:1;padding-top:0}
.fm-step-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.fm-step-no{width:56px;height:56px;border-radius:50%;background:#fff;border:1px solid #dfd4c7;display:grid;place-items:center;color:var(--fm-rose);font-size:16px;font-weight:900;box-shadow:var(--fm-shadow)}
.fm-step h3{margin:0;font-size:18px;line-height:1.3}
.fm-step p{margin:8px 0 0;color:var(--fm-text);font-size:14px;line-height:1.72}

/* SERVICE PPT STYLE */
.fm-showcase{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.fm-showcase-card{
  overflow:hidden;border:1px solid var(--fm-line);border-radius:28px;background:#fff;box-shadow:var(--fm-shadow)
}
.fm-showcase-thumb{aspect-ratio:16/10;overflow:hidden;background:#ece5de}
.fm-showcase-thumb img{width:100%;height:100%;object-fit:cover}
.fm-showcase-body{padding:24px}
.fm-showcase-body h3{margin:0;font-size:24px;line-height:1.22;letter-spacing:-.045em}
.fm-showcase-body p{margin:12px 0 0;color:var(--fm-text);font-size:15px;line-height:1.76}
.fm-tag-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.fm-tag{display:inline-flex;min-height:28px;align-items:center;padding:0 10px;border-radius:999px;background:#f6efe8;color:var(--fm-brown);font-size:12px;font-weight:800}

/* METRICS */
.fm-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:24px}
.fm-metric{padding:22px;border:1px solid var(--fm-line);border-radius:22px;background:#fff;text-align:center;box-shadow:var(--fm-shadow)}
.fm-metric b{display:block;font-size:28px;line-height:1;color:var(--fm-deep)}
.fm-metric span{display:block;margin-top:10px;color:var(--fm-text);font-size:13px;line-height:1.55}

/* PRICE POLICY */
.fm-price-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:34px;
}
.fm-price-card{
  position:relative;
  border:1px solid var(--fm-line);
  border-radius:28px;
  background:#fff;
  padding:28px;
  box-shadow:var(--fm-shadow);
  overflow:hidden;
}
.fm-price-card.featured{
  border-color:#d9b88f;
  background:linear-gradient(180deg,#fff 0%,#fff8f0 100%);
}
.fm-price-badge{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  background:#f8ecf0;
  color:var(--fm-rose);
  font-size:12px;
  font-weight:900;
  margin-bottom:12px;
}
.fm-price-card h3{
  margin:0;
  font-size:24px;
  line-height:1.2;
  letter-spacing:-.045em;
}
.fm-price-desc{
  min-height:74px;
  margin:12px 0 0;
  color:var(--fm-text);
  font-size:14.5px;
  line-height:1.7;
}
.fm-price-benefits{
  display:grid;
  gap:10px;
  margin-top:18px;
}
.fm-benefit-row{
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  gap:12px;
  align-items:center;
  min-height:48px;
  padding:0 15px;
  border-radius:16px;
  border:1px solid #ead8c4;
  background:#fff8ef;
  color:#6f4322;
  font-size:13.5px;
  font-weight:900;
}
.fm-benefit-row.after{
  border-color:#e1e5ea;
  background:#f8fafc;
  color:#142033;
}
.fm-benefit-row b{
  font-size:13.5px;
  color:inherit;
}
.fm-benefit-row span{
  text-align:right;
  color:inherit;
  font-weight:900;
}

.fm-price{
  margin:20px 0 0;
  display:flex;
  align-items:flex-end;
  gap:6px;
}
.fm-price strong{
  font-size:34px;
  line-height:1;
  letter-spacing:-.05em;
}
.fm-price span{
  color:var(--fm-text);
  font-size:14px;
  font-weight:800;
}
.fm-price-list{
  list-style:none;
  margin:22px 0 0;
  padding:18px 0 0;
  border-top:1px solid var(--fm-line);
  display:grid;
  gap:9px;
}
.fm-price-list li{
  position:relative;
  padding-left:20px;
  color:#4e474c;
  font-size:14px;
  line-height:1.55;
}
.fm-price-list li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color:var(--fm-rose);
  font-weight:900;
}
.fm-price-note{
  margin-top:22px;
  padding:18px 20px;
  border:1px solid #e7d6c5;
  border-radius:22px;
  background:#fffaf5;
  color:#63564d;
  font-size:14px;
  line-height:1.75;
}
.fm-price-note b{
  color:#2b2227;
}

/* PORTFOLIO */
.fm-portfolio-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:34px;
}
.fm-work-card{
  overflow:hidden;
  border:1px solid var(--fm-line);
  border-radius:28px;
  background:#fff;
  box-shadow:var(--fm-shadow);
}
.fm-work-img{
  height:230px;
  background-size:cover;
  background-position:center;
}
.fm-work-body{
  padding:22px;
}
.fm-work-body small{
  display:block;
  color:var(--fm-rose);
  font-size:12px;
  font-weight:900;
  margin-bottom:7px;
}
.fm-work-body h3{
  margin:0;
  font-size:21px;
  line-height:1.26;
  letter-spacing:-.045em;
}
.fm-work-body p{
  margin:10px 0 0;
  color:var(--fm-text);
  font-size:14px;
  line-height:1.72;
}
.fm-work-tags{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-top:14px;
}
.fm-work-tags span{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:0 9px;
  border-radius:999px;
  background:#f6efe8;
  color:var(--fm-brown);
  font-size:11.5px;
  font-weight:850;
}
.fm-portfolio-caption{
  margin-top:22px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:20px 22px;
  border-radius:24px;
  background:#1d181a;
  color:#fff;
}
.fm-portfolio-caption p{
  margin:0;
  color:rgba(255,255,255,.78);
  font-size:14px;
  line-height:1.7;
}
.fm-portfolio-caption .fm-btn{
  flex:0 0 auto;
  min-height:46px;
}

/* SAMPLE SITES */
.fm-sample-wrap{
  position:relative;
  margin-top:34px;
  overflow:hidden;
  padding-bottom:64px;
}
.fm-sample-track{
  display:flex;
  gap:18px;
  will-change:transform;
  transition:transform .55s ease;
}
.fm-sample-card{
  flex:0 0 360px;
  border:1px solid var(--fm-line);
  border-radius:28px;
  background:#fff;
  overflow:hidden;
  box-shadow:var(--fm-shadow);
}
.fm-sample-shot{
  position:relative;
  height:240px;
  overflow:hidden;
  background:#efe7df;
}
.fm-sample-shot img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.fm-sample-type{
  position:absolute;
  left:14px;
  top:14px;
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 11px;
  border-radius:999px;
  background:#fff;
  color:var(--fm-rose);
  font-size:12px;
  font-weight:900;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.fm-sample-body{
  padding:22px;
}
.fm-sample-body h3{
  margin:0;
  font-size:21px;
  line-height:1.28;
  letter-spacing:-.045em;
}
.fm-sample-body p{
  margin:9px 0 0;
  color:var(--fm-text);
  font-size:14px;
  line-height:1.7;
}
.fm-sample-actions{
  display:flex;
  gap:8px;
  margin-top:16px;
}
.fm-sample-btn{
  flex:1;
  min-height:42px;
  border-radius:999px;
  border:1px solid var(--fm-line);
  background:#fff;
  color:#2d272b;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
}
.fm-sample-btn.primary{
  background:#111315;
  color:#fff;
  border-color:#111315;
}
.fm-sample-controls{
  position:absolute;
  right:0;
  bottom:0;
  display:flex;
  gap:8px;
}
.fm-sample-arrow{
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid var(--fm-line);
  background:#fff;
  color:#111315;
  font-size:20px;
  font-weight:900;
  cursor:pointer;
}
.fm-sample-note{
  margin-top:4px;
  color:var(--fm-text);
  font-size:13px;
  line-height:1.7;
}

/* SAMPLE MODAL */
.fm-site-modal{
  position:fixed;
  inset:0;
  z-index:100;
  display:none;
  align-items:stretch;
  justify-content:stretch;
  padding:0;
  background:rgba(14,12,13,.86);
}
.fm-site-modal.is-open{
  display:flex;
}
.fm-site-modal-card{
  position:relative;
  width:100%;
  height:100%;
  border-radius:0;
  overflow:hidden;
  background:#fff;
  box-shadow:none;
}
.fm-site-modal-head{
  height:62px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:0 22px;
  border-bottom:1px solid var(--fm-line);
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(14px);
}
.fm-site-modal-title{
  min-width:0;
}
.fm-site-modal-title b{
  display:block;
  font-size:15px;
  line-height:1.2;
}
.fm-site-modal-title span{
  display:block;
  margin-top:2px;
  color:var(--fm-text);
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.fm-site-modal-actions{
  display:flex;
  gap:8px;
  flex:0 0 auto;
}
.fm-site-open,
.fm-site-close{
  min-height:38px;
  padding:0 13px;
  border-radius:999px;
  border:1px solid var(--fm-line);
  background:#fff;
  color:#111315;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  text-align:center;
}
.fm-site-open{
  background:#111315;
  border-color:#111315;
  color:#fff;
}
.fm-site-frame{
  width:100%;
  height:calc(100% - 62px);
  border:0;
  background:#f7f3ef;
}

/* MANAGEMENT POLICY */
.fm-management-box{
  margin-top:34px;
  border:1px solid #e7d6c5;
  border-radius:28px;
  background:#fffaf5;
  padding:28px;
  box-shadow:var(--fm-shadow);
}
.fm-management-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:20px;
  align-items:center;
}
.fm-management-head h3{
  margin:0;
  font-size:26px;
  line-height:1.28;
  letter-spacing:-.05em;
}
.fm-management-head h3 .highlight{
  color:var(--fm-rose);
}
.fm-management-head p{
  margin:10px 0 0;
  color:var(--fm-text);
  font-size:15px;
  line-height:1.75;
}
.fm-management-price{
  min-width:210px;
  border-radius:22px;
  background:#111315;
  color:#fff;
  padding:20px;
  text-align:center;
}
.fm-management-price small{
  display:block;
  color:rgba(255,255,255,.7);
  font-size:12px;
  font-weight:800;
  margin-bottom:8px;
}
.fm-management-price strong{
  display:block;
  font-size:30px;
  line-height:1;
  letter-spacing:-.04em;
}
.fm-management-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top:22px;
}
.fm-management-item{
  border:1px solid #eadccc;
  border-radius:18px;
  background:#fff;
  padding:16px;
}
.fm-management-item b{
  display:block;
  font-size:14px;
  line-height:1.35;
  color:#251f22;
}
.fm-management-item span{
  display:block;
  margin-top:5px;
  color:var(--fm-text);
  font-size:12.5px;
  line-height:1.55;
}
.fm-maintenance-scope{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin-top:22px;
}
.fm-scope-card{
  border:1px solid var(--fm-line);
  border-radius:24px;
  background:#fff;
  padding:22px;
}
.fm-scope-card h3{
  margin:0;
  font-size:20px;
  line-height:1.3;
}
.fm-scope-card h3 .accent{
  color:var(--fm-rose);
}
.fm-scope-card p{
  margin:10px 0 0;
  color:var(--fm-text);
  font-size:14px;
  line-height:1.7;
}
.fm-scope-list{
  list-style:none;
  margin:16px 0 0;
  padding:0;
  display:grid;
  gap:7px;
}
.fm-scope-list li{
  position:relative;
  padding-left:20px;
  color:#4c4449;
  font-size:14px;
  line-height:1.55;
}
.fm-scope-list li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color:var(--fm-rose);
  font-weight:900;
}
.fm-scope-card.extra .fm-scope-list li::before{
  content:"+";
  color:var(--fm-sand);
}
.fm-option-table{
  margin-top:22px;
  border:1px solid var(--fm-line);
  border-radius:24px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 10px 24px rgba(24,20,22,.04);
}
.fm-option-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 160px;
  gap:16px;
  padding:16px 20px;
  border-top:1px solid #f0e8de;
  align-items:center;
}
.fm-option-row:first-child{
  border-top:0;
}
.fm-option-row b{
  font-size:14.5px;
  color:#2b2529;
}
.fm-option-row span{
  justify-self:end;
  color:var(--fm-brown);
  font-weight:900;
  font-size:14px;
}
.fm-notice-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:22px;
}
.fm-notice-card{
  border:1px solid var(--fm-line);
  border-radius:22px;
  background:#fff;
  padding:20px;
  box-shadow:0 8px 22px rgba(24,20,22,.035);
}
.fm-notice-card h3{
  margin:0;
  font-size:18px;
  line-height:1.3;
}
.fm-notice-card h3 .accent{
  color:var(--fm-rose);
}
.fm-notice-card p{
  margin:10px 0 0;
  color:var(--fm-text);
  font-size:13.8px;
  line-height:1.72;
}

/* FAQ */
.fm-faq-wrap{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:28px;
  align-items:start;
  margin-top:34px;
}
.fm-faq-side{
  position:sticky;
  top:102px;
  border:1px solid var(--fm-line);
  border-radius:28px;
  background:#fff;
  padding:26px;
  box-shadow:var(--fm-shadow);
}
.fm-faq-side h3{
  margin:0;
  font-size:24px;
  line-height:1.26;
  letter-spacing:-.045em;
}
.fm-faq-side p{
  margin:12px 0 0;
  color:var(--fm-text);
  font-size:14.5px;
  line-height:1.75;
}
.fm-faq-points{
  display:grid;
  gap:10px;
  margin-top:18px;
}
.fm-faq-point{
  display:flex;
  gap:10px;
  align-items:flex-start;
  color:#3d353a;
  font-size:14px;
  line-height:1.6;
}
.fm-faq-point i{
  flex:0 0 22px;
  width:22px;
  height:22px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:#f8ecf0;
  color:var(--fm-rose);
  font-style:normal;
  font-size:12px;
  font-weight:900;
}
.fm-faq-list{
  display:grid;
  gap:12px;
}
.fm-faq-item{
  border:1px solid var(--fm-line);
  border-radius:22px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 10px 24px rgba(24,20,22,.045);
}
.fm-faq-item summary{
  list-style:none;
  cursor:pointer;
  padding:20px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  font-size:17px;
  font-weight:900;
  line-height:1.35;
  color:#211b1f;
}
.fm-faq-item summary::-webkit-details-marker{
  display:none;
}
.fm-faq-item summary::after{
  content:"+";
  flex:0 0 30px;
  width:30px;
  height:30px;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:1px solid var(--fm-line);
  color:var(--fm-rose);
  font-size:20px;
  line-height:1;
}
.fm-faq-item[open] summary::after{
  content:"–";
}
.fm-faq-answer{
  padding:0 22px 20px;
  color:var(--fm-text);
  font-size:14.5px;
  line-height:1.78;
}
.fm-faq-answer b{
  color:#231c20;
}
.fm-faq-answer ul{
  margin:10px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:5px;
}
.fm-faq-answer li{
  position:relative;
  padding-left:16px;
}
.fm-faq-answer li::before{
  content:"·";
  position:absolute;
  left:0;
  top:0;
  color:var(--fm-rose);
  font-weight:900;
}

/* OFFICIAL BLOG */
.fm-blog-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:34px;
}
.fm-blog-card{
  display:block;
  border:1px solid var(--fm-line);
  border-radius:24px;
  background:#fff;
  padding:24px;
  box-shadow:var(--fm-shadow);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.fm-blog-card:hover{
  transform:translateY(-3px);
  box-shadow:0 20px 52px rgba(24,20,22,.12);
  border-color:#d9cabb;
}
.fm-blog-date{
  display:block;
  color:#7a7077;
  font-size:12px;
  font-weight:850;
  margin-bottom:12px;
}
.fm-blog-card h3{
  margin:0;
  font-size:19px;
  line-height:1.38;
  letter-spacing:-.045em;
}
.fm-blog-card p{
  margin:10px 0 0;
  color:var(--fm-text);
  font-size:14px;
  line-height:1.72;
}
.fm-blog-foot{
  margin-top:24px;
  display:flex;
  justify-content:flex-end;
}
.fm-blog-more{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 18px;
  border-radius:999px;
  border:1px solid #f0c7d1;
  background:#fff;
  color:var(--fm-rose);
  font-size:13px;
  font-weight:900;
}
.fm-blog-note{
  margin-top:18px;
  color:var(--fm-text);
  font-size:13px;
  line-height:1.7;
  text-align:center;
}

/* CONTACT SECTION SEPARATION */
/* PATCH 2026-05-17 / BRANDINGTIME V5
   목적: 공식 블로그와 문의 CTA 섹션 바탕색 분리 */
.fm-contact-section{
  border-top:1px solid var(--fm-line);
}
.fm-contact-section .fm-cta-box{
  box-shadow:0 18px 50px rgba(17,19,21,.14);
}

/* CTA */
.fm-cta-box{
  padding:34px;border-radius:32px;background:#111315;color:#fff;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center
}
.fm-cta-box h2{margin:0;font-size:clamp(28px,4vw,40px);line-height:1.18;letter-spacing:-.05em}
.fm-cta-box p{margin:12px 0 0;color:rgba(255,255,255,.78);font-size:15px;line-height:1.72;max-width:680px}
.fm-cta-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.fm-btn.light{background:#fff;color:#111315}
.fm-btn.outline{background:transparent;border:1px solid rgba(255,255,255,.28);color:#fff}

/* FOOTER */
.fm-footer{padding:42px 0 54px;background:#fff;border-top:1px solid var(--fm-line)}
.fm-footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:24px}
.fm-footer h3{margin:0 0 10px;font-size:14px}
.fm-footer p,.fm-footer li{margin:0;color:var(--fm-text);font-size:13px;line-height:1.8}
.fm-footer ul{list-style:none;margin:0;padding:0}
.fm-footer-bottom{margin-top:22px;padding-top:16px;border-top:1px solid var(--fm-line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--fm-text);font-size:12px}

/* PATCH 2026-05-17 / BRANDINGTIME V23 HEADER BREAKPOINT
   목적: 메뉴 영역 기준 반응형 전환. 본문 모바일 전환과 별개로 1180px 이하에서 햄버거 메뉴 사용 */
@media (max-width:1180px){
  .fm-nav{
    min-height:74px;
  }
  .fm-menu,
  .fm-header .fm-cta{
    display:none;
  }
  .fm-menu-btn{
    display:flex;
  }
  .fm-mobile-panel{
    top:74px;
  }
}

/* 1180px 이하에서도 모바일 패널은 헤더 상태와 어울리도록 고정 */
@media (min-width:721px) and (max-width:1180px){
  .fm-mobile-panel{
    left:50%;
    right:auto;
    width:min(420px, calc(100% - 48px));
    transform:translateX(-50%);
    border:1px solid var(--fm-line);
    border-top:0;
    border-radius:0 0 22px 22px;
  }
}

@media (max-width:1024px){
  .fm-hero-grid,.fm-split,.fm-showcase,.fm-grid-4,.fm-process,.fm-metrics,.fm-footer-grid,.fm-price-grid,.fm-portfolio-grid,.fm-blog-grid{grid-template-columns:1fr 1fr}
  .fm-grid-3{grid-template-columns:1fr}
  .fm-process::before{display:none}
  .fm-cta-box{grid-template-columns:1fr}
  .fm-cta-actions{justify-content:flex-start}
}
@media (max-width:720px){
  /* PATCH 2026-05-17 / BRANDINGTIME V19 MOBILE SECTION GAP TUNE
     목적: 모바일 섹션 이동 시 제목 위 공백 최소화 */
  html{scroll-padding-top:74px}
  section[id], .fm-section[id]{scroll-margin-top:74px}

  /* PATCH 2026-05-17 / BRANDINGTIME V17
     목적: 모바일 메뉴 클릭 시 고정 헤더에 걸리지 않도록 최소 여백만 두고 섹션 시작 */
  html{scroll-padding-top:74px}
  section[id]{scroll-margin-top:74px}
  .fm-section[id]{scroll-margin-top:74px}

  :root{
    --fm-font-hero:34px;
    --fm-font-section:26px;
    --fm-font-body:15px;
  }
  .fm-container{width:min(var(--fm-container),calc(100% - var(--fm-side-mo)))}
  .fm-section{padding:var(--fm-section-mo) 0}
  .fm-menu,.fm-cta{display:none}
  .fm-menu-btn{display:flex}
  /* PATCH 2026-05-17 / BRANDINGTIME V15 MOBILE HERO
     목적: 모바일 첫 화면은 간결한 히어로만 노출하고, 핵심 방식 카드는 풀페이지 아래 배치 */
  .fm-hero{min-height:auto}
  .fm-hero-slide{background-position:center center}
  .fm-hero-inner{min-height:auto;padding:0 0 58px}
  .fm-hero-grid{display:flex;flex-direction:column;gap:0;width:100%}
  .fm-hero-copy{
    min-height:100svh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:112px 0 54px;
    width:100%;
  }
  .fm-desktop-copy{display:none}
  .fm-mobile-copy{display:inline}
  .fm-hero-copy h1{
    font-size:clamp(30px,9vw,38px);
    line-height:1.13;
    letter-spacing:-.07em;
    text-align:center;
    width:min(100%,340px);
    margin-left:auto;
    margin-right:auto;
  }
  .fm-hero-copy p{
    font-size:15.5px;
    line-height:1.72;
    max-width:320px;
    margin:16px auto 0;
    text-align:center;
  }
  .fm-hero-copy .fm-badge{
    align-self:center;
    max-width:100%;
    padding-left:16px;
    padding-right:16px;
  }
  .fm-hero-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin:28px auto 0;
    width:min(100%,320px);
  }
  .fm-hero-actions .fm-btn{
    width:100%;
    min-height:50px;
    padding:0 12px;
    text-align:center;
  }
  .fm-hero-side{
    width:min(100%,360px);
    margin:0 auto;
    padding:24px 22px;
    border-radius:24px;
    background:rgba(255,255,255,.10);
    backdrop-filter:blur(18px);
    text-align:left;
  }
  .fm-hero-side h3{font-size:21px}
  .fm-hero-side p{font-size:14px}
  .fm-hero-grid,.fm-split,.fm-showcase,.fm-grid-3,.fm-grid-4,.fm-process,.fm-metrics,.fm-footer-grid,.fm-price-grid,.fm-portfolio-grid,.fm-blog-grid{grid-template-columns:1fr}
  .fm-panel img{min-height:280px}
  .fm-showcase-body h3{font-size:21px}
  .fm-price-desc{min-height:auto}
  .fm-price strong{font-size:30px}
  .fm-benefit-row{grid-template-columns:54px minmax(0,1fr);font-size:12.5px;padding:0 12px}
  .fm-benefit-row span{text-align:right}
  .fm-work-img{height:220px}
  .fm-sample-card{flex-basis:82vw}
  .fm-sample-shot{height:220px}
  .fm-site-modal{padding:0}
  .fm-site-modal-card{height:100%;border-radius:0}
  .fm-site-modal-head{height:auto;min-height:62px;align-items:flex-start;padding:12px 14px}
  .fm-site-modal-actions{flex-direction:row}
  .fm-site-open,.fm-site-close{min-height:36px;font-size:12px;padding:0 12px}
  .fm-site-frame{height:calc(100% - 62px)}
  .fm-portfolio-caption{display:block}
  .fm-portfolio-caption .fm-btn{width:100%;margin-top:16px}
  .fm-management-head{grid-template-columns:1fr}
  .fm-management-price{min-width:0}
  .fm-management-grid{grid-template-columns:1fr 1fr}
  .fm-maintenance-scope{grid-template-columns:1fr}
  .fm-option-row{grid-template-columns:1fr;gap:4px}
  .fm-option-row span{justify-self:start}
  .fm-notice-grid{grid-template-columns:1fr}
  .fm-faq-wrap{grid-template-columns:1fr}
  .fm-faq-side{position:relative;top:auto}
  .fm-faq-item summary{font-size:16px;padding:18px}
  .fm-faq-answer{padding:0 18px 18px}
  .fm-cta-box{padding:28px 24px;border-radius:26px}
  .fm-btn{width:100%;min-height:50px}
  .fm-hero-actions{grid-template-columns:1fr 1fr}
}

/* PATCH 2026-05-17 / BRANDINGTIME V20 MOBILE ANCHOR DIRECT TARGET
   목적: 모바일 섹션 이동 시 제목 위 과한 공백 제거 */
@media (max-width:720px){
  :root{--fm-section-mo:36px;}
  html{scroll-padding-top:74px;}
  section[id], .fm-section[id]{scroll-margin-top:74px;}
}

/* PATCH 2026-05-17 / BRANDINGTIME V21
   목적: PC 앵커는 여유 있게, 모바일은 v20 기준으로 유지 */
@media (max-width:720px){
  html{scroll-padding-top:74px;}
  section[id], .fm-section[id]{scroll-margin-top:74px;}
}

/* PATCH 2026-05-17 / BRANDINGTIME V22
   목적: PC는 콘텐츠 시작점 기준 이동, 모바일은 v20 기준 유지 */
@media (max-width:720px){
  html{scroll-padding-top:74px;}
  section[id], .fm-section[id]{scroll-margin-top:74px;}
}

/* PATCH 2026-05-17 / BRANDINGTIME V25 FULLSCREEN SAMPLE MODAL
   목적: 샘플사이트 미리보기는 화면 전체를 사용하는 풀스크린 모달로 표시 */
.fm-site-modal{align-items:stretch;justify-content:stretch;padding:0;background:rgba(14,12,13,.86)}
.fm-site-modal-card{width:100%;height:100%;border-radius:0;box-shadow:none}
.fm-site-modal-head{height:62px;background:rgba(255,255,255,.96);backdrop-filter:blur(14px)}
.fm-site-frame{height:calc(100% - 62px)}
@media (max-width:720px){
  .fm-site-modal{padding:0}
  .fm-site-modal-card{height:100%;border-radius:0}
  .fm-site-modal-head{min-height:62px;padding:12px 14px}
  .fm-site-frame{height:calc(100% - 62px)}
}

/* PATCH 2026-05-17 / BRANDINGTIME V26 MODAL TOP BAR EMPHASIS
   목적: 샘플사이트 미리보기 상단바를 더 눈에 띄게 하고, 버튼 텍스트 중앙 정렬 */
.fm-site-modal-head{
  background:#111315 !important;
  border-bottom:1px solid rgba(255,255,255,.12) !important;
  color:#fff !important;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.fm-site-modal-title b{
  color:#fff !important;
}
.fm-site-modal-title span{
  color:rgba(255,255,255,.72) !important;
}
.fm-site-modal-actions{
  align-items:center;
}
.fm-site-open,
.fm-site-close{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  line-height:1 !important;
  white-space:nowrap;
}
.fm-site-open{
  background:#fff !important;
  border-color:#fff !important;
  color:#111315 !important;
  min-width:104px;
}
.fm-site-close{
  background:rgba(255,255,255,.12) !important;
  border-color:rgba(255,255,255,.22) !important;
  color:#fff !important;
  min-width:72px;
}
.fm-site-open:hover,
.fm-site-close:hover{
  transform:translateY(-1px);
}
@media (max-width:720px){
  .fm-site-modal-head{
    gap:10px;
  }
  .fm-site-modal-title span{
    white-space:normal;
    line-height:1.35;
  }
  .fm-site-open,
  .fm-site-close{
    min-height:36px;
    padding:0 12px;
  }
  .fm-site-open{
    min-width:86px;
  }
  .fm-site-close{
    min-width:58px;
  }
}

/* PATCH 2026-05-17 / BRANDINGTIME V27 MODAL TITLE ONLY
   목적: 샘플사이트 모달 상단에는 제목만 노출하고 설명문은 숨김 */
.fm-site-modal-title{
  min-width:0;
  display:flex;
  align-items:center;
}
.fm-site-modal-title b{
  display:block;
  max-width:min(52vw, 720px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:16px;
  line-height:1.2;
}
.fm-site-modal-title span{
  display:none !important;
}
@media (max-width:720px){
  .fm-site-modal-title b{
    max-width:42vw;
    font-size:15px;
  }
}

/* PATCH 2026-05-17 / BRANDINGTIME V28 COLLAPSIBLE POLICY BLOCKS
   목적: 가격정책 내부의 세부 정책/옵션/면책 영역을 접힘형으로 압축 */
.fm-collapse-area{
  display:grid;
  gap:14px;
  margin-top:24px;
}
.fm-collapse{
  border:1px solid var(--fm-line);
  border-radius:24px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 10px 26px rgba(24,20,22,.045);
}
.fm-collapse.featured{
  border-color:#e5cdb5;
  background:#fffaf5;
}
.fm-collapse summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:20px 22px;
}
.fm-collapse summary::-webkit-details-marker{
  display:none;
}
.fm-collapse-title{
  min-width:0;
}
.fm-collapse-kicker{
  display:block;
  margin-bottom:4px;
  color:var(--fm-rose);
  font-size:11px;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.fm-collapse-title b{
  display:block;
  color:#211b1f;
  font-size:18px;
  line-height:1.32;
  letter-spacing:-.045em;
}
.fm-collapse-title span{
  display:block;
  margin-top:5px;
  color:var(--fm-text);
  font-size:13.5px;
  line-height:1.55;
}
.fm-collapse summary::after{
  content:"+";
  flex:0 0 34px;
  width:34px;
  height:34px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:#f8ecf0;
  color:var(--fm-rose);
  font-size:22px;
  font-weight:700;
  line-height:1;
}
.fm-collapse[open] summary::after{
  content:"–";
}
.fm-collapse-body{
  padding:0 22px 22px;
}
.fm-collapse-body .fm-management-grid,
.fm-collapse-body .fm-maintenance-scope,
.fm-collapse-body .fm-option-table,
.fm-collapse-body .fm-notice-grid{
  margin-top:0;
}
@media (max-width:720px){
  .fm-collapse summary{
    padding:18px;
    align-items:flex-start;
  }
  .fm-collapse-title b{
    font-size:16px;
  }
  .fm-collapse-title span{
    font-size:13px;
  }
  .fm-collapse-body{
    padding:0 18px 18px;
  }
}


/* PATCH 2026-05-17 / BRANDINGTIME V30 HERO TITLE SIZE TUNE
   목적: PC 히어로 타이틀을 약 10% 축소해 안정적인 첫 화면 구성 */
@media (min-width:721px){
  .fm-hero-copy h1{
    font-size:clamp(44px,5.05vw,76px);
    line-height:1.1;
    letter-spacing:-.06em;
  }
}


/* PATCH 2026-05-17 / BRANDINGTIME V31 HERO TITLE TRUE REDUCE
   목적: PC 히어로 타이틀을 실제로 축소하고, 줄바꿈을 안정화 */
@media (min-width:721px){
  .fm-hero-copy h1{
    font-size:clamp(38px,4.25vw,62px) !important;
    line-height:1.12 !important;
    letter-spacing:-.055em !important;
    max-width:780px;
  }
  .fm-hero-copy p{
    max-width:760px;
  }
}


/* PATCH 2026-05-17 / BRANDINGTIME V32 INQUIRY MODAL FORM
   목적: 제작 문의하기 클릭 시 열리는 사전 기획 접수 모달 */
.fm-inquiry-modal{
  position:fixed;
  inset:0;
  z-index:120;
  display:none;
  background:rgba(15,13,14,.72);
  backdrop-filter:blur(10px);
}
.fm-inquiry-modal.is-open{
  display:block;
}
.fm-inquiry-dialog{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(960px, calc(100% - 40px));
  height:min(88vh, 860px);
  border-radius:30px;
  background:#fff;
  box-shadow:0 30px 100px rgba(0,0,0,.36);
  overflow:hidden;
  display:grid;
  grid-template-rows:auto 1fr auto;
}
.fm-inquiry-head{
  min-height:76px;
  padding:18px 24px;
  border-bottom:1px solid var(--fm-line);
  background:#111315;
  color:#fff;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}
.fm-inquiry-title{
  min-width:0;
}
.fm-inquiry-title span{
  display:block;
  color:#f2d9c5;
  font-size:11px;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:4px;
}
.fm-inquiry-title b{
  display:block;
  font-size:22px;
  line-height:1.22;
  letter-spacing:-.045em;
}
.fm-inquiry-close{
  flex:0 0 auto;
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.1);
  color:#fff;
  font-size:24px;
  line-height:1;
  cursor:pointer;
}
.fm-inquiry-body{
  overflow:auto;
  padding:26px;
  background:#fbf7f2;
}
.fm-inquiry-intro{
  border:1px solid #ead8c4;
  border-radius:24px;
  background:#fffaf5;
  padding:22px;
  margin-bottom:18px;
}
.fm-inquiry-intro h3{
  margin:0;
  font-size:22px;
  line-height:1.32;
  letter-spacing:-.045em;
}
.fm-inquiry-intro p{
  margin:10px 0 0;
  color:var(--fm-text);
  font-size:14.5px;
  line-height:1.75;
}
.fm-inquiry-steps{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-top:16px;
}
.fm-inquiry-step{
  border:1px solid #eadfd3;
  border-radius:16px;
  background:#fff;
  padding:12px;
  font-size:12.5px;
  line-height:1.45;
  color:#554a50;
  font-weight:800;
}
.fm-inquiry-step b{
  display:block;
  color:var(--fm-rose);
  font-size:12px;
  margin-bottom:3px;
}
.fm-form-section{
  border:1px solid var(--fm-line);
  border-radius:24px;
  background:#fff;
  padding:22px;
  margin-top:14px;
}
.fm-form-section h3{
  margin:0 0 14px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:19px;
  line-height:1.32;
  letter-spacing:-.04em;
}
.fm-form-section h3 em{
  flex:0 0 auto;
  width:30px;
  height:30px;
  border-radius:50%;
  background:#f8ecf0;
  color:var(--fm-rose);
  display:grid;
  place-items:center;
  font-style:normal;
  font-size:13px;
  font-weight:950;
}
.fm-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.fm-form-field{
  display:grid;
  gap:7px;
}
.fm-form-field.full{
  grid-column:1/-1;
}
.fm-form-field label,
.fm-choice-label{
  color:#2d272b;
  font-size:13px;
  font-weight:900;
}
.fm-form-field input,
.fm-form-field select,
.fm-form-field textarea{
  width:100%;
  min-height:48px;
  border:1px solid #ded4ca;
  border-radius:14px;
  background:#fff;
  padding:0 14px;
  color:#211b1f;
  font:inherit;
  font-size:14px;
  outline:none;
}
.fm-form-field textarea{
  min-height:112px;
  padding:14px;
  resize:vertical;
  line-height:1.65;
}
.fm-form-field input:focus,
.fm-form-field select:focus,
.fm-form-field textarea:focus{
  border-color:#b78a62;
  box-shadow:0 0 0 4px rgba(183,138,98,.12);
}
.fm-choice-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.fm-choice{
  position:relative;
}
.fm-choice input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.fm-choice span{
  min-height:50px;
  border:1px solid #ded4ca;
  border-radius:16px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:10px;
  color:#4f454a;
  font-size:13px;
  font-weight:850;
  line-height:1.35;
  cursor:pointer;
}
.fm-choice input:checked + span{
  border-color:#111315;
  background:#111315;
  color:#fff;
}
.fm-file-box{
  border:1px dashed #d7c2ad;
  border-radius:18px;
  background:#fffaf5;
  padding:18px;
  display:grid;
  gap:8px;
}
.fm-file-box input{
  padding:12px;
  height:auto;
  border-radius:12px;
  background:#fff;
}
.fm-file-note{
  color:#6d5f66;
  font-size:12.5px;
  line-height:1.6;
}
.fm-confirm-box{
  border:1px solid #ead8c4;
  border-radius:18px;
  background:#fffaf5;
  padding:18px;
  color:#4e4248;
  font-size:14px;
  line-height:1.75;
}
.fm-checkline{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:14px;
  color:#2d272b;
  font-size:13.5px;
  font-weight:850;
  line-height:1.55;
}
.fm-checkline input{
  flex:0 0 auto;
  width:18px;
  height:18px;
  margin-top:2px;
}
.fm-inquiry-foot{
  min-height:72px;
  padding:14px 22px;
  border-top:1px solid var(--fm-line);
  background:#fff;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
}
.fm-inquiry-foot small{
  color:var(--fm-text);
  font-size:12.5px;
  line-height:1.5;
}
.fm-inquiry-actions{
  display:flex;
  gap:8px;
  flex:0 0 auto;
}
.fm-inquiry-btn{
  min-height:44px;
  padding:0 18px;
  border-radius:999px;
  border:1px solid var(--fm-line);
  background:#fff;
  color:#111315;
  font-size:14px;
  font-weight:950;
  cursor:pointer;
}
.fm-inquiry-btn.primary{
  background:var(--fm-rose);
  border-color:var(--fm-rose);
  color:#fff;
}
.fm-inquiry-btn.dark{
  background:#111315;
  border-color:#111315;
  color:#fff;
}
body.is-inquiry-open{
  overflow:hidden;
}
@media (max-width:720px){
  .fm-inquiry-dialog{
    width:100%;
    height:100%;
    border-radius:0;
  }
  .fm-inquiry-head{
    min-height:66px;
    padding:14px 16px;
  }
  .fm-inquiry-title b{
    font-size:19px;
  }
  .fm-inquiry-body{
    padding:18px 14px;
  }
  .fm-inquiry-steps,
  .fm-form-grid,
  .fm-choice-grid{
    grid-template-columns:1fr;
  }
  .fm-form-section{
    padding:18px;
    border-radius:20px;
  }
  .fm-inquiry-foot{
    align-items:stretch;
    flex-direction:column;
    padding:12px 14px;
  }
  .fm-inquiry-actions{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .fm-inquiry-btn{
    width:100%;
  }
}


/* PATCH 2026-05-17 / BRANDINGTIME V33B INQUIRY WIZARD SAFE
   기준: 정상 v32 파일
   목적: 긴 스크롤 문의폼을 단계형 위저드 문의폼으로 안전하게 전환 */
.fm-inquiry-dialog{
  width:min(920px, calc(100% - 40px)) !important;
  height:auto !important;
  max-height:min(88vh,760px) !important;
  display:grid !important;
  grid-template-rows:auto auto 1fr auto !important;
}
.fm-inquiry-form{
  display:contents;
}
.fm-inquiry-body{
  overflow:hidden !important;
  padding:0 !important;
  background:#fbf7f2;
}
.fm-wizard-progress{
  padding:13px 24px;
  border-bottom:1px solid var(--fm-line);
  background:#fff;
  display:flex;
  align-items:center;
  gap:12px;
}
.fm-wizard-bar{
  flex:1;
  height:7px;
  border-radius:999px;
  background:#eee5dc;
  overflow:hidden;
}
.fm-wizard-bar span{
  display:block;
  width:0%;
  height:100%;
  border-radius:999px;
  background:var(--fm-rose);
  transition:width .24s ease;
}
.fm-wizard-count{
  flex:0 0 auto;
  min-width:72px;
  text-align:right;
  color:#5e5359;
  font-size:12.5px;
  font-weight:950;
}
.fm-wizard-step{
  display:none;
  min-height:460px;
  padding:28px;
}
.fm-wizard-step.is-active{
  display:block;
}
.fm-wizard-card{
  min-height:404px;
  height:100%;
  border:1px solid #ead8c4;
  border-radius:26px;
  background:#fffaf5;
  padding:28px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.fm-wizard-card.white{
  background:#fff;
  border-color:var(--fm-line);
  justify-content:flex-start;
}
.fm-wizard-kicker{
  display:block;
  color:var(--fm-rose);
  font-size:12px;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:10px;
}
.fm-wizard-title{
  margin:0;
  color:#211b1f;
  font-size:31px;
  line-height:1.24;
  letter-spacing:-.055em;
}
.fm-wizard-desc{
  margin:14px 0 0;
  max-width:720px;
  color:var(--fm-text);
  font-size:15.5px;
  line-height:1.78;
}
.fm-wizard-flow{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-top:24px;
}
.fm-wizard-flow-item{
  border:1px solid #eadfd3;
  border-radius:18px;
  background:#fff;
  padding:15px;
  color:#554a50;
  font-size:13px;
  line-height:1.45;
  font-weight:850;
}
.fm-wizard-flow-item b{
  display:block;
  color:var(--fm-rose);
  font-size:13px;
  margin-bottom:5px;
}
.fm-wizard-note{
  margin-top:22px;
  padding:15px 18px;
  border-radius:18px;
  background:#111315;
  color:rgba(255,255,255,.84);
  font-size:14px;
  line-height:1.7;
}
.fm-wizard-form-title{
  margin:0 0 18px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:23px;
  line-height:1.3;
  letter-spacing:-.045em;
}
.fm-wizard-form-title em{
  flex:0 0 auto;
  width:34px;
  height:34px;
  border-radius:50%;
  background:#f8ecf0;
  color:var(--fm-rose);
  display:grid;
  place-items:center;
  font-style:normal;
  font-size:14px;
  font-weight:950;
}
.fm-wizard-step .fm-form-grid,
.fm-wizard-step .fm-choice-grid{
  margin-top:0;
}
.fm-wizard-step .fm-form-field textarea{
  min-height:96px;
}
.fm-inquiry-btn[hidden]{
  display:none !important;
}
.fm-inquiry-btn:disabled{
  opacity:.48;
  cursor:not-allowed;
}
@media (max-width:720px){
  .fm-inquiry-dialog{
    width:100% !important;
    height:100% !important;
    max-height:none !important;
    border-radius:0 !important;
    grid-template-rows:auto auto 1fr auto !important;
  }
  .fm-wizard-progress{
    padding:11px 14px;
  }
  .fm-wizard-count{
    min-width:58px;
  }
  .fm-wizard-step{
    min-height:auto;
    height:100%;
    padding:14px;
  }
  .fm-wizard-card{
    min-height:calc(100vh - 220px);
    padding:20px;
    justify-content:flex-start;
    border-radius:22px;
  }
  .fm-wizard-title{
    font-size:25px;
  }
  .fm-wizard-desc{
    font-size:14px;
  }
  .fm-wizard-flow{
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .fm-wizard-flow-item{
    padding:12px;
    font-size:12.5px;
  }
  .fm-wizard-form-title{
    font-size:20px;
  }
  .fm-inquiry-foot small{
    display:none;
  }
}


/* PATCH 2026-05-17 / BRANDINGTIME V34 INQUIRY REVIEW PRIVACY COMPLETE
   목적: 최종 확인 요약, 개인정보 취급방침, 접수 완료 화면 */
.fm-review-box{
  display:grid;
  gap:12px;
  margin-top:16px;
}
.fm-review-row{
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  gap:14px;
  align-items:start;
  padding:12px 14px;
  border:1px solid #eee3d8;
  border-radius:14px;
  background:#fff;
}
.fm-review-row b{
  color:#2d272b;
  font-size:13px;
  line-height:1.45;
}
.fm-review-row span{
  color:#5b5157;
  font-size:13.5px;
  line-height:1.55;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.fm-review-empty{
  color:#9b8d96 !important;
}
.fm-policy-box{
  margin-top:14px;
  border:1px solid #ead8c4;
  border-radius:18px;
  background:#fffaf5;
  overflow:hidden;
}
.fm-policy-box summary{
  cursor:pointer;
  list-style:none;
  padding:14px 16px;
  font-size:14px;
  font-weight:950;
  color:#2b2227;
  display:flex;
  justify-content:space-between;
  gap:14px;
}
.fm-policy-box summary::-webkit-details-marker{display:none}
.fm-policy-box summary::after{
  content:"+";
  color:var(--fm-rose);
  font-size:20px;
  line-height:1;
}
.fm-policy-box[open] summary::after{content:"–"}
.fm-policy-content{
  border-top:1px solid #ead8c4;
  padding:14px 16px;
  color:#665a61;
  font-size:13px;
  line-height:1.72;
}
.fm-policy-content ul{
  margin:8px 0 0;
  padding-left:18px;
}
.fm-complete-card{
  min-height:404px;
  border:1px solid #ead8c4;
  border-radius:26px;
  background:#fffaf5;
  padding:34px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
}
.fm-complete-icon{
  width:64px;
  height:64px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#111315;
  color:#fff;
  font-size:30px;
  font-weight:900;
  margin-bottom:18px;
}
.fm-complete-card h3{
  margin:0;
  font-size:30px;
  line-height:1.25;
  letter-spacing:-.055em;
}
.fm-complete-card p{
  margin:14px 0 0;
  max-width:620px;
  color:var(--fm-text);
  font-size:15px;
  line-height:1.78;
}
.fm-complete-next{
  margin-top:22px;
  width:min(100%,560px);
  border-radius:18px;
  background:#111315;
  color:rgba(255,255,255,.86);
  padding:18px;
  font-size:14px;
  line-height:1.7;
  text-align:left;
}
.fm-complete-next b{
  display:block;
  color:#fff;
  margin-bottom:4px;
}
@media (max-width:720px){
  .fm-review-row{
    grid-template-columns:1fr;
    gap:4px;
  }
  .fm-complete-card{
    min-height:calc(100vh - 220px);
    padding:24px 20px;
  }
  .fm-complete-card h3{
    font-size:25px;
  }
}


/* PATCH 2026-05-17 / BRANDINGTIME V35 INQUIRY FINAL SCROLL + COMPLETE MODAL
   목적: 최종 확인 단계 스크롤 보정 + 별도 접수 완료 모달 */
.fm-inquiry-body{
  overflow:auto !important;
}
.fm-wizard-step{
  min-height:auto !important;
}
.fm-wizard-card.white{
  min-height:404px;
}
.fm-wizard-step[data-step="6"] .fm-wizard-card{
  justify-content:flex-start;
}
.fm-wizard-step[data-step="6"]{
  padding-bottom:32px;
}
.fm-complete-modal{
  position:fixed;
  inset:0;
  z-index:140;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(15,13,14,.74);
  backdrop-filter:blur(10px);
}
.fm-complete-modal.is-open{
  display:flex;
}
.fm-complete-dialog{
  width:min(520px,100%);
  border-radius:30px;
  background:#fff;
  box-shadow:0 30px 100px rgba(0,0,0,.36);
  overflow:hidden;
}
.fm-complete-head{
  background:#111315;
  color:#fff;
  padding:20px 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
}
.fm-complete-head b{
  font-size:20px;
  line-height:1.2;
  letter-spacing:-.04em;
}
.fm-complete-x{
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.1);
  color:#fff;
  font-size:22px;
  line-height:1;
  cursor:pointer;
}
.fm-complete-body{
  padding:34px 28px 30px;
  text-align:center;
  background:#fffaf5;
}
.fm-complete-bigicon{
  width:66px;
  height:66px;
  margin:0 auto 18px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#111315;
  color:#fff;
  font-size:30px;
  font-weight:900;
}
.fm-complete-body h3{
  margin:0;
  color:#211b1f;
  font-size:28px;
  line-height:1.25;
  letter-spacing:-.055em;
}
.fm-complete-body p{
  margin:12px 0 0;
  color:var(--fm-text);
  font-size:15px;
  line-height:1.75;
}
.fm-complete-actions{
  padding:18px 24px 24px;
  background:#fff;
  display:flex;
  justify-content:center;
}
.fm-complete-close{
  min-height:48px;
  padding:0 28px;
  border-radius:999px;
  border:1px solid #111315;
  background:#111315;
  color:#fff;
  font-size:15px;
  font-weight:950;
  cursor:pointer;
}
@media (max-width:720px){
  .fm-inquiry-body{
    overflow:auto !important;
  }
  .fm-wizard-card.white{
    min-height:auto;
  }
  .fm-complete-modal{
    padding:16px;
  }
  .fm-complete-body h3{
    font-size:24px;
  }
}


/* PATCH 2026-05-17 / BRANDINGTIME V36 IN-MODAL COMPLETE STATE
   목적: 접수 완료를 별도 모달이 아니라 현재 문의 모달 내부 완료 화면으로 표시 */
.fm-wizard-step[data-step="7"] .fm-complete-card{
  min-height:404px;
}
.fm-wizard-complete-close{
  margin-top:24px;
  min-height:48px;
  padding:0 30px;
  border-radius:999px;
  border:1px solid #111315;
  background:#111315;
  color:#fff;
  font-size:15px;
  font-weight:950;
  cursor:pointer;
}
.fm-wizard-complete-close:hover{
  transform:translateY(-1px);
}
@media (max-width:720px){
  .fm-wizard-step[data-step="7"] .fm-complete-card{
    min-height:calc(100vh - 220px);
  }
}


/* PATCH 2026-05-17 / BRANDINGTIME V38 REMOVE CANCEL BUTTON
   목적: 하단 취소 버튼 제거 후 이전/다음 버튼 정렬 안정화 */
.fm-inquiry-actions{
  justify-content:flex-end;
}
@media (max-width:720px){
  .fm-inquiry-actions{
    grid-template-columns:1fr 1fr;
  }
  .fm-inquiry-actions .fm-inquiry-btn:only-child{
    grid-column:1/-1;
  }
}


/* PATCH 2026-05-17 / BRANDINGTIME V39 MOBILE START BUTTON CENTER
   목적: 모바일 안내 화면에서 시작하기 버튼 중앙 정렬 */
@media (max-width:720px){
  .fm-inquiry-actions{
    display:flex !important;
    justify-content:center !important;
    align-items:center;
    width:100%;
  }

  /* 안내 단계: 시작하기 버튼만 보이는 상태 */
  .fm-inquiry-actions #wizardNext:not([hidden]){
    margin-left:auto;
    margin-right:auto;
  }

  /* 시작하기 버튼은 모바일에서 너무 넓지 않게 중앙 배치 */
  .fm-inquiry-actions #wizardNext{
    width:min(100%, 220px);
  }

  /* 이전/다음이 함께 보이는 단계에서는 2열 균형 유지 */
  .fm-inquiry-actions #wizardPrev:not([hidden]) + #wizardNext:not([hidden]){
    width:auto;
    flex:1;
  }

  .fm-inquiry-actions #wizardPrev:not([hidden]){
    flex:1;
  }

  .fm-inquiry-actions #wizardSubmit:not([hidden]){
    width:min(100%, 220px);
    margin-left:auto;
    margin-right:auto;
  }
}


/* PATCH 2026-05-17 / BRANDINGTIME V41 BOTTOM KAKAO BUTTON STYLE
   목적: 하단 CTA 카톡문의하기 버튼을 명확한 버튼으로 강조 */
.fm-contact .fm-btn.kakao,
.fm-btn.kakao{
  background:#FEE500 !important;
  border-color:#FEE500 !important;
  color:#191600 !important;
  box-shadow:0 14px 32px rgba(254,229,0,.18);
}
.fm-contact .fm-btn.kakao:hover,
.fm-btn.kakao:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 38px rgba(254,229,0,.25);
}
@media (max-width:720px){
  .fm-contact .fm-btn.kakao,
  .fm-btn.kakao{
    width:100%;
  }
}


/* PATCH 2026-05-17 / BRANDINGTIME V42 INQUIRY MODAL KAKAO BUTTON
   목적: 제작 문의 모달 안내 화면에 카카오톡 상담 버튼 추가 */
.fm-wizard-kakao-row{
  display:flex;
  justify-content:flex-start;
  margin-top:14px;
}
.fm-wizard-kakao-btn{
  min-height:46px;
  padding:0 22px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#FEE500;
  border:1px solid #FEE500;
  color:#191600;
  font-size:14px;
  font-weight:950;
  text-decoration:none;
  box-shadow:0 12px 28px rgba(254,229,0,.22);
}
.fm-wizard-kakao-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 34px rgba(254,229,0,.28);
}
@media (max-width:720px){
  .fm-wizard-kakao-row{
    justify-content:center;
  }
  .fm-wizard-kakao-btn{
    width:min(100%, 240px);
  }
}


/* =========================================================
   PATCH 2026-05-17 / BRANDINGTIME V45 HERO BACKGROUND URL UPDATE
   목적: 히어로 배경 3장을 landingpager.kr 서버 이미지로 교체
   보호: 기존 문의 모달/카톡 버튼/샘플사이트/메뉴 기능 유지
   ========================================================= */
.fm-hero-slide.s1{
  background-image:url('https://brandingtime.landingpager.kr/images/btime001.png') !important;
}
.fm-hero-slide.s2{
  background-image:url('https://brandingtime.landingpager.kr/images/btime002.png') !important;
}
.fm-hero-slide.s3{
  background-image:url('https://brandingtime.landingpager.kr/images/btime003.png') !important;
}


/* =========================================================
   PATCH 2026-05-17 / BRANDINGTIME V46 MOBILE HERO CLOCK POSITION
   목적: 모바일에서 우측에 있는 시계가 화면 안에 보이도록 1번 슬라이드 위치 보정
   보호: PC 배경 위치와 기존 슬라이드 URL/문의 기능 유지
   ========================================================= */
@media (max-width:720px){
  .fm-hero-slide.s1{
    background-position:72% center !important;
  }
  .fm-hero-slide.s2{
    background-position:center center !important;
  }
  .fm-hero-slide.s3{
    background-position:center center !important;
  }
}


/* =========================================================
   PATCH 2026-05-17 / BRANDINGTIME V47 HERO CORE CARD TYPOGRAPHY
   목적: 히어로 우측 핵심 방식 카드의 숫자/제목/설명 가독성 강화
   보호: 배경 슬라이드/문의모달/카톡버튼/샘플사이트 기능 유지
   ========================================================= */
.fm-hero-card li,
.fm-hero-card .fm-hero-card-item{
  gap:18px;
}

.fm-hero-card li b:first-child,
.fm-hero-card .num,
.fm-hero-card .fm-num{
  color:#f6ddc8 !important;
  font-size:22px !important;
  line-height:1 !important;
  font-weight:950 !important;
  letter-spacing:-.035em !important;
  min-width:44px !important;
  text-shadow:0 2px 14px rgba(246,221,200,.32);
}

.fm-hero-card li strong,
.fm-hero-card li h3,
.fm-hero-card .fm-hero-card-title{
  color:#fff !important;
  font-size:18px !important;
  line-height:1.38 !important;
  font-weight:950 !important;
  letter-spacing:-.035em !important;
}

.fm-hero-card li p,
.fm-hero-card .fm-hero-card-desc{
  margin-top:7px !important;
  color:rgba(255,255,255,.84) !important;
  font-size:15px !important;
  line-height:1.68 !important;
  font-weight:700 !important;
  letter-spacing:-.025em !important;
}

/* 실제 마크업이 div/span 구조일 때도 잡히도록 보강 */
.fm-hero-card .fm-step-no,
.fm-hero-card .fm-step-number{
  color:#f6ddc8 !important;
  font-size:22px !important;
  line-height:1 !important;
  font-weight:950 !important;
  min-width:44px !important;
}

.fm-hero-card .fm-step-title{
  color:#fff !important;
  font-size:18px !important;
  line-height:1.38 !important;
  font-weight:950 !important;
}

.fm-hero-card .fm-step-desc{
  color:rgba(255,255,255,.84) !important;
  font-size:15px !important;
  line-height:1.68 !important;
  font-weight:700 !important;
}

@media (max-width:720px){
  .fm-hero-card li b:first-child,
  .fm-hero-card .num,
  .fm-hero-card .fm-num,
  .fm-hero-card .fm-step-no,
  .fm-hero-card .fm-step-number{
    font-size:19px !important;
    min-width:38px !important;
  }

  .fm-hero-card li strong,
  .fm-hero-card li h3,
  .fm-hero-card .fm-hero-card-title,
  .fm-hero-card .fm-step-title{
    font-size:16px !important;
  }

  .fm-hero-card li p,
  .fm-hero-card .fm-hero-card-desc,
  .fm-hero-card .fm-step-desc{
    font-size:14px !important;
    line-height:1.62 !important;
  }
}


/* =========================================================
   PATCH 2026-05-17 / BRANDINGTIME V48 HERO POINT NUMBER FIX
   목적: 실제 마크업(.fm-hero-point .no/.txt)에 맞춰 숫자/제목/설명 가독성 강화
   보호: 배경 슬라이드/문의모달/카톡버튼/샘플사이트 기능 유지
   ========================================================= */

/* 실제 히어로 핵심 방식 항목 구조 보정 */
.fm-hero-point{
  display:grid !important;
  grid-template-columns:58px minmax(0, 1fr) !important;
  gap:16px !important;
  align-items:start !important;
}

.fm-hero-point .no{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  min-width:58px !important;
  color:#f7dcc3 !important;
  font-size:28px !important;
  line-height:1.05 !important;
  font-weight:950 !important;
  letter-spacing:-.045em !important;
  text-shadow:0 2px 18px rgba(247,220,195,.42) !important;
}

.fm-hero-point .txt,
.fm-hero-point .txt b,
.fm-hero-point .txt strong{
  color:#fff !important;
  font-size:18px !important;
  line-height:1.35 !important;
  font-weight:950 !important;
  letter-spacing:-.035em !important;
}

.fm-hero-point .txt span,
.fm-hero-point .txt p,
.fm-hero-point small{
  display:block !important;
  margin-top:7px !important;
  color:rgba(255,255,255,.86) !important;
  font-size:15.5px !important;
  line-height:1.68 !important;
  font-weight:750 !important;
  letter-spacing:-.025em !important;
}

/* 혹시 다른 클래스명으로 저장된 경우까지 보강 */
.fm-hero-card .fm-hero-point-number,
.fm-hero-card .point-no,
.fm-hero-card .no{
  color:#f7dcc3 !important;
  font-size:28px !important;
  line-height:1.05 !important;
  font-weight:950 !important;
  min-width:58px !important;
}

.fm-hero-card .point-title,
.fm-hero-card .txt{
  font-size:18px !important;
  line-height:1.35 !important;
  font-weight:950 !important;
}

.fm-hero-card .point-desc{
  font-size:15.5px !important;
  line-height:1.68 !important;
  font-weight:750 !important;
}

@media (max-width:720px){
  .fm-hero-point{
    grid-template-columns:46px minmax(0, 1fr) !important;
    gap:12px !important;
  }

  .fm-hero-point .no,
  .fm-hero-card .fm-hero-point-number,
  .fm-hero-card .point-no,
  .fm-hero-card .no{
    min-width:46px !important;
    font-size:24px !important;
  }

  .fm-hero-point .txt,
  .fm-hero-point .txt b,
  .fm-hero-point .txt strong,
  .fm-hero-card .point-title,
  .fm-hero-card .txt{
    font-size:16.5px !important;
  }

  .fm-hero-point .txt span,
  .fm-hero-point .txt p,
  .fm-hero-point small,
  .fm-hero-card .point-desc{
    font-size:14.5px !important;
    line-height:1.62 !important;
  }
}


/* =========================================================
   PATCH 2026-05-17 / BRANDINGTIME V49 HERO CARD DIRECT MARKUP FIX
   목적:
   - 히어로 핵심 카드 숫자 01/02/03 직접 강조
   - 제목/설명 텍스트 확대
   - 모바일 3번째 배경 이미지 우측 중심 보정
   ========================================================= */

/* 직접 삽입한 숫자 클래스 */
.fm-hero-core-no{
  display:inline-flex !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  min-width:52px !important;
  color:#f8dcc4 !important;
  font-size:30px !important;
  line-height:1 !important;
  font-weight:950 !important;
  letter-spacing:-.05em !important;
  text-shadow:0 2px 18px rgba(248,220,196,.45) !important;
}

/* 직접 삽입한 제목/설명 클래스 */
.fm-hero-core-copy{
  display:block !important;
}
.fm-hero-core-title{
  display:block !important;
  color:#fff !important;
  font-size:19px !important;
  line-height:1.35 !important;
  font-weight:950 !important;
  letter-spacing:-.035em !important;
}
.fm-hero-core-desc{
  display:block !important;
  margin-top:8px !important;
  color:rgba(255,255,255,.87) !important;
  font-size:15.8px !important;
  line-height:1.7 !important;
  font-weight:750 !important;
  letter-spacing:-.025em !important;
}

/* 기존 구조가 남은 경우까지 강제 보강 */
.fm-hero-card .fm-hero-points > div,
.fm-hero-card .fm-hero-point{
  display:grid !important;
  grid-template-columns:52px minmax(0,1fr) !important;
  gap:16px !important;
  align-items:start !important;
}

.fm-hero-card .fm-hero-points > div > span:first-child,
.fm-hero-card .fm-hero-point > span:first-child,
.fm-hero-card .fm-hero-point .no,
.fm-hero-card [class*="no"]{
  color:#f8dcc4 !important;
  font-size:30px !important;
  line-height:1 !important;
  font-weight:950 !important;
  min-width:52px !important;
  text-shadow:0 2px 18px rgba(248,220,196,.45) !important;
}

.fm-hero-card .fm-hero-points > div > b,
.fm-hero-card .fm-hero-point > b{
  color:#fff !important;
  font-size:19px !important;
  line-height:1.35 !important;
  font-weight:950 !important;
}

.fm-hero-card .fm-hero-points > div > p,
.fm-hero-card .fm-hero-point > p{
  color:rgba(255,255,255,.87) !important;
  font-size:15.8px !important;
  line-height:1.7 !important;
  font-weight:750 !important;
}

/* 모바일에서는 1번 시계와 3번 산맥 모두 우측 중심 보정 */
@media (max-width:720px){
  .fm-hero-slide.s1{
    background-position:72% center !important;
  }
  .fm-hero-slide.s3{
    background-position:70% center !important;
  }

  .fm-hero-core-no,
  .fm-hero-card .fm-hero-points > div > span:first-child,
  .fm-hero-card .fm-hero-point > span:first-child,
  .fm-hero-card .fm-hero-point .no,
  .fm-hero-card [class*="no"]{
    font-size:26px !important;
    min-width:44px !important;
  }

  .fm-hero-card .fm-hero-points > div,
  .fm-hero-card .fm-hero-point{
    grid-template-columns:44px minmax(0,1fr) !important;
    gap:12px !important;
  }

  .fm-hero-core-title,
  .fm-hero-card .fm-hero-points > div > b,
  .fm-hero-card .fm-hero-point > b{
    font-size:17px !important;
  }

  .fm-hero-core-desc,
  .fm-hero-card .fm-hero-points > div > p,
  .fm-hero-card .fm-hero-point > p{
    font-size:14.6px !important;
    line-height:1.65 !important;
  }
}


/* =========================================================
   PATCH 2026-05-17 / BRANDINGTIME V50 HERO ITEM EXACT SELECTOR FIX
   문제 원인:
   - 실제 마크업은 .fm-hero-list > .fm-hero-item > i + div 구조
   - 이전 패치는 .fm-hero-point 계열을 잡아서 적용되지 않음
   목적:
   - 숫자 i, 제목/설명 div를 실제 선택자로 직접 보정
   ========================================================= */

.fm-hero-list{
  gap:20px !important;
}

.fm-hero-item{
  display:grid !important;
  grid-template-columns:64px minmax(0, 1fr) !important;
  gap:18px !important;
  align-items:start !important;
  width:auto !important;
  justify-content:start !important;
}

.fm-hero-item i{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  width:64px !important;
  min-width:64px !important;
  height:auto !important;
  color:#f8dcc4 !important;
  font-size:34px !important;
  line-height:1 !important;
  font-style:normal !important;
  font-weight:950 !important;
  letter-spacing:-.055em !important;
  text-shadow:0 3px 20px rgba(248,220,196,.48) !important;
}

.fm-hero-item div{
  color:rgba(255,255,255,.88) !important;
  font-size:16px !important;
  line-height:1.7 !important;
  font-weight:750 !important;
  letter-spacing:-.025em !important;
}

/* div 안 첫 줄(제목) 강조: HTML 구조가 텍스트+br인 경우 대응 */
.fm-hero-item div::first-line{
  color:#fff !important;
  font-size:20px !important;
  line-height:1.35 !important;
  font-weight:950 !important;
  letter-spacing:-.04em !important;
}

/* 모바일에서는 카드 폭 안에서 균형 있게 축소 */
@media (max-width:720px){
  .fm-hero-slide.s1{
    background-position:72% center !important;
  }
  .fm-hero-slide.s3{
    background-position:70% center !important;
  }

  .fm-hero-list{
    gap:18px !important;
  }

  .fm-hero-item{
    grid-template-columns:52px minmax(0, 1fr) !important;
    gap:13px !important;
  }

  .fm-hero-item i{
    width:52px !important;
    min-width:52px !important;
    font-size:28px !important;
  }

  .fm-hero-item div{
    font-size:14.8px !important;
    line-height:1.64 !important;
  }

  .fm-hero-item div::first-line{
    font-size:17px !important;
    line-height:1.35 !important;
  }
}


/* =========================================================
   PATCH 2026-05-17 / BRANDINGTIME V51 HERO ITEM BALANCE FIX
   목적:
   1) 숫자와 내용 사이 간격 축소
   2) 제목 과대/과굵음 보정
   3) 숫자 강조는 유지하되 카드 안 균형 개선
   ========================================================= */

/* v50보다 숫자 열과 간격을 줄여 오른쪽 내용이 가까이 붙도록 보정 */
.fm-hero-item{
  grid-template-columns:42px minmax(0, 1fr) !important;
  gap:10px !important;
  align-items:start !important;
}

/* 숫자는 강조 유지하되 폭을 줄여 과한 빈 공간 제거 */
.fm-hero-item i{
  width:42px !important;
  min-width:42px !important;
  font-size:32px !important;
  line-height:1 !important;
  font-weight:950 !important;
  color:#f8dcc4 !important;
  text-shadow:0 2px 14px rgba(248,220,196,.36) !important;
}

/* 설명 기본 텍스트는 또렷하게 유지 */
.fm-hero-item div{
  color:rgba(255,255,255,.86) !important;
  font-size:15px !important;
  line-height:1.62 !important;
  font-weight:650 !important;
  letter-spacing:-.025em !important;
}

/* 제목 첫 줄은 v50보다 작고 덜 두껍게 */
.fm-hero-item div::first-line{
  color:#fff !important;
  font-size:17px !important;
  line-height:1.34 !important;
  font-weight:850 !important;
  letter-spacing:-.035em !important;
}

/* 모바일에서도 숫자와 내용 간격을 더 촘촘하게 */
@media (max-width:720px){
  .fm-hero-slide.s1{
    background-position:72% center !important;
  }
  .fm-hero-slide.s3{
    background-position:70% center !important;
  }

  .fm-hero-item{
    grid-template-columns:38px minmax(0, 1fr) !important;
    gap:9px !important;
  }

  .fm-hero-item i{
    width:38px !important;
    min-width:38px !important;
    font-size:25px !important;
  }

  .fm-hero-item div{
    font-size:14px !important;
    line-height:1.58 !important;
    font-weight:650 !important;
  }

  .fm-hero-item div::first-line{
    font-size:15.5px !important;
    font-weight:850 !important;
  }
}


/* =========================================================
   PATCH 2026-05-17 / BRANDINGTIME V52 LOGO ICON IMAGE
   목적:
   - 로고 텍스트는 HTML 텍스트로 유지해 가독성 확보
   - BT 아이콘만 PNG 이미지로 교체
   - 동일 이미지를 favicon으로도 사용
   보호:
   - 기존 헤더 레이아웃, 메뉴, CTA, 반응형 구조 유지
   ========================================================= */
.fm-logo .fm-logo-icon{
  width:42px !important;
  height:42px !important;
  border-radius:14px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
  padding:0 !important;
}
.fm-logo .fm-logo-icon img{
  display:block !important;
  width:42px !important;
  height:42px !important;
  object-fit:contain !important;
}
.fm-header.is-scrolled .fm-logo .fm-logo-icon,
body.is-menu-open .fm-logo .fm-logo-icon{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
@media (max-width:720px){
  .fm-logo .fm-logo-icon,
  .fm-logo .fm-logo-icon img{
    width:42px !important;
    height:42px !important;
  }
}


/* =========================================================
   PATCH 2026-05-17 / BRANDINGTIME V53 MOBILE SAMPLE SWIPE
   목적: 모바일 샘플사이트 영역에서 카드 좌우 스와이프 이동 지원
   보호: PC 화살표/자동 슬라이드/미리보기 모달 기능 유지
   ========================================================= */
@media (max-width:720px){
  .fm-sample-wrap{
    touch-action:pan-y;
    overscroll-behavior-x:contain;
  }
  .fm-sample-track{
    touch-action:pan-y;
  }
}


/* =========================================================
   PATCH 2026-05-17 / BRANDINGTIME V56 SAMPLE CASE CLEANUP
   목적:
   - 제작사례 좌우 슬라이딩 카드 그림자 제거
   - 내부용 안내 텍스트 노출 제거
   보호:
   - 모바일 스와이프/모달 미리보기/사이트 이동/자동 슬라이드 기능 유지
   ========================================================= */
.fm-sample-card{
  box-shadow:none !important;
}
.fm-sample-note{
  display:none !important;
}


/* =========================================================
   PATCH 2026-05-17 / BRANDINGTIME V57 HERO TYPOGRAPHY + ASSET URL
   목적:
   - PC·모바일 히어로 타이틀과 본문 폰트 과대감 완화
   - 줄간격을 넓혀 화면 호흡 개선
   - 실제 운영 도메인 이미지 경로로 정리
   보호:
   - 기존 히어로 레이아웃/문의 모달/제작사례 스와이프 기능 유지
   ========================================================= */
@media (min-width:721px){
  .fm-hero-copy h1{
    font-size:clamp(36px,3.85vw,56px) !important;
    line-height:1.18 !important;
    letter-spacing:-.052em !important;
    max-width:740px !important;
  }
  .fm-hero-copy p{
    max-width:760px !important;
    font-size:16px !important;
    line-height:1.95 !important;
    letter-spacing:-.03em !important;
  }
  .fm-hero-side h3{
    font-size:20px !important;
    line-height:1.42 !important;
  }
  .fm-hero-side p{
    font-size:13.8px !important;
    line-height:1.86 !important;
  }
  .fm-hero-list{
    gap:18px !important;
  }
  .fm-hero-item{
    grid-template-columns:40px minmax(0,1fr) !important;
    gap:10px !important;
  }
  .fm-hero-item i{
    width:40px !important;
    min-width:40px !important;
    font-size:29px !important;
    line-height:1.08 !important;
  }
  .fm-hero-item div{
    font-size:14.2px !important;
    line-height:1.78 !important;
    font-weight:650 !important;
  }
  .fm-hero-item div::first-line{
    font-size:16px !important;
    line-height:1.5 !important;
    font-weight:850 !important;
  }
}

@media (max-width:720px){
  .fm-hero-copy h1{
    font-size:clamp(27px,7.8vw,33px) !important;
    line-height:1.22 !important;
    letter-spacing:-.06em !important;
    width:min(100%,330px) !important;
  }
  .fm-hero-copy p{
    max-width:310px !important;
    font-size:14.5px !important;
    line-height:1.92 !important;
    letter-spacing:-.03em !important;
  }
  .fm-hero-side h3{
    font-size:19px !important;
    line-height:1.46 !important;
  }
  .fm-hero-side p{
    font-size:13.5px !important;
    line-height:1.84 !important;
  }
  .fm-hero-list{
    gap:17px !important;
  }
  .fm-hero-item{
    grid-template-columns:36px minmax(0,1fr) !important;
    gap:9px !important;
  }
  .fm-hero-item i{
    width:36px !important;
    min-width:36px !important;
    font-size:23px !important;
    line-height:1.12 !important;
  }
  .fm-hero-item div{
    font-size:13.4px !important;
    line-height:1.78 !important;
    font-weight:650 !important;
  }
  .fm-hero-item div::first-line{
    font-size:14.8px !important;
    line-height:1.48 !important;
    font-weight:850 !important;
  }
}


/* =========================================================
   PATCH 2026-05-17 / BRANDINGTIME V58 HERO YOUTUBE BACKGROUND
   목적:
   - 히어로 3장 이미지 교차 배경을 YouTube 무음 자동재생 배경 영상으로 교체
   - /images/thurm.jpg를 커버 이미지 및 로딩 대체 이미지로 사용
   보호:
   - 히어로 텍스트/CTA/핵심 카드/문의 모달/제작사례 기능 유지
   참고:
   - 일부 모바일 브라우저/저전력 모드에서는 자동재생이 제한될 수 있어 커버 이미지가 대체 노출됨
   ========================================================= */
.fm-hero-video-wrap{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:#171315;
}
.fm-hero-video-poster{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  z-index:0;
  opacity:1;
}
.fm-hero-video{
  position:absolute;
  left:50%;
  top:50%;
  width:100vw;
  height:56.25vw;
  min-width:177.78vh;
  min-height:100vh;
  transform:translate(-50%,-50%);
  border:0;
  pointer-events:none;
  z-index:1;
}
.fm-hero-video-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:linear-gradient(180deg,rgba(19,16,18,.62) 0%,rgba(19,16,18,.42) 24%,rgba(19,16,18,.54) 48%,rgba(19,16,18,.76) 100%);
}
@media (max-width:720px){
  .fm-hero-video-poster{
    object-position:center center;
  }
  .fm-hero-video{
    width:177.78vh;
    height:100vh;
    min-width:100vw;
    min-height:56.25vw;
  }
}


/* =========================================================
   PATCH 2026-05-17 / BRANDINGTIME V59 HERO VIDEO LAYER FIX
   문제:
   - YouTube iframe과 영상 오버레이가 히어로 텍스트/카드보다 위에 겹쳐 보임
   해결:
   - 배경 영상 래퍼 z-index:0
   - 영상/포스터 z-index:0
   - 어두운 오버레이 z-index:1
   - 히어로 실제 콘텐츠 z-index:3
   보호:
   - 유튜브 자동재생/무음/반복, 문의 모달, 제작사례 스와이프 기능 유지
   ========================================================= */
.fm-hero{
  isolation:isolate;
}
.fm-hero-video-wrap{
  z-index:0 !important;
}
.fm-hero-video-poster,
.fm-hero-video{
  z-index:0 !important;
}
.fm-hero-video-wrap::after{
  z-index:1 !important;
  pointer-events:none !important;
}
.fm-hero-inner{
  position:relative !important;
  z-index:3 !important;
}
.fm-hero-copy,
.fm-hero-side{
  position:relative !important;
  z-index:4 !important;
}
.fm-hero-video{
  pointer-events:none !important;
}


/* =========================================================
   PATCH 2026-05-17 / BRANDINGTIME V60 MOBILE YOUTUBE BACKGROUND FIX
   문제:
   - 모바일에서 YouTube iframe은 브라우저/기기 정책과 iframe 내부 비율 때문에
     상단 검정 영역이나 플레이어 잔상이 노출될 수 있음
   해결:
   - PC: YouTube 무음 자동재생 배경 유지
   - 모바일: iframe을 숨기고 커버 이미지를 cover 배경처럼 안정적으로 사용
   보호:
   - 히어로 텍스트/CTA/핵심 카드/문의 모달/제작사례 기능 유지
   ========================================================= */
@media (max-width:720px){
  .fm-hero-video-wrap{
    background:#171315 url('https://brandingtime.landingpager.kr/images/thurm.jpg') center center / cover no-repeat !important;
  }
  .fm-hero-video{
    display:none !important;
  }
  .fm-hero-video-poster{
    display:block !important;
    opacity:1 !important;
    object-fit:cover !important;
    object-position:center center !important;
    width:100% !important;
    height:100% !important;
  }
  .fm-hero-video-wrap::after{
    background:linear-gradient(180deg,rgba(19,16,18,.58) 0%,rgba(19,16,18,.40) 30%,rgba(19,16,18,.54) 58%,rgba(19,16,18,.76) 100%) !important;
  }
}


/* =========================================================
   PATCH 2026-05-17 / BRANDINGTIME V61 MOBILE YOUTUBE ENABLE
   목적:
   - 모바일에서도 YouTube iframe을 배경 영상으로 재생
   - v60의 모바일 iframe 숨김(display:none)을 override
   - iframe을 크게 확대해 검정 여백/플레이어 가장자리 노출 최소화
   보호:
   - PC 배경 영상/히어로 텍스트/문의 모달/제작사례 기능 유지
   ========================================================= */
@media (max-width:720px){
  .fm-hero-video-wrap{
    background:#171315 url('https://brandingtime.landingpager.kr/images/thurm.jpg') center center / cover no-repeat !important;
  }

  .fm-hero-video{
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    width:220vh !important;
    height:124vh !important;
    min-width:220vw !important;
    min-height:124vw !important;
    transform:translate(-50%,-50%) scale(1.08) !important;
    border:0 !important;
    pointer-events:none !important;
    z-index:0 !important;
  }

  .fm-hero-video-poster{
    display:block !important;
    opacity:1 !important;
    z-index:0 !important;
  }

  .fm-hero-video-wrap::after{
    z-index:1 !important;
    pointer-events:none !important;
    background:linear-gradient(180deg,rgba(19,16,18,.62) 0%,rgba(19,16,18,.38) 32%,rgba(19,16,18,.56) 62%,rgba(19,16,18,.78) 100%) !important;
  }

  .fm-hero-inner{
    position:relative !important;
    z-index:3 !important;
  }
}


/* =========================================================
   PATCH 2026-05-17 / BRANDINGTIME V62 MOBILE HERO VIDEO POSITION FIX
   문제:
   - 모바일에서 YouTube 배경 영상이 과하게 확대/상단 정렬되어
     헤더 아래에 의미 없는 빈 영역처럼 보임
   해결:
   - 모바일 iframe을 16:9 cover 기준으로 다시 정렬
   - 영상 중심을 약간 위로 올려 핵심 장면이 헤더 아래부터 자연스럽게 보이게 함
   - 히어로 텍스트 블록을 과하게 아래로 밀지 않도록 상단 여백 조정
   보호:
   - PC 영상 배경/문의 모달/제작사례 스와이프/파비콘 유지
   ========================================================= */
@media (max-width:720px){
  .fm-hero{
    min-height:100svh !important;
  }

  .fm-hero-video-wrap{
    inset:0 !important;
    background:#171315 url('https://brandingtime.landingpager.kr/images/thurm.jpg') center center / cover no-repeat !important;
  }

  .fm-hero-video{
    display:block !important;
    position:absolute !important;
    left:50% !important;
    top:46% !important;
    width:177.78vh !important;
    height:100vh !important;
    min-width:100vw !important;
    min-height:56.25vw !important;
    transform:translate(-50%,-50%) scale(1.12) !important;
    border:0 !important;
    pointer-events:none !important;
    z-index:0 !important;
  }

  .fm-hero-video-poster{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
  }

  .fm-hero-inner{
    min-height:100svh !important;
    padding:0 0 42px !important;
  }

  .fm-hero-copy{
    min-height:100svh !important;
    justify-content:center !important;
    padding:88px 0 40px !important;
  }

  .fm-hero-video-wrap::after{
    background:
      linear-gradient(180deg,
        rgba(19,16,18,.68) 0%,
        rgba(19,16,18,.46) 24%,
        rgba(19,16,18,.54) 55%,
        rgba(19,16,18,.78) 100%) !important;
  }
}


/* =========================================================
   PATCH 2026-05-17 / BRANDINGTIME V63 MOBILE HERO HEADER OVERLAY FIX
   문제:
   - 모바일에서 헤더 영역이 히어로 배경 위에 겹치는 것이 아니라
     별도 상단 블록처럼 공간을 차지해 영상 시작점을 아래로 밀어냄
   해결:
   - 모바일 헤더를 fixed overlay로 고정
   - 헤더 배경을 투명/그라데이션으로 처리
   - 히어로 영상은 화면 최상단부터 깔리게 유지
   - 히어로 본문은 헤더 높이만큼 내부 padding으로만 안전거리 확보
   보호:
   - PC 레이아웃, YouTube 배경, 문의 모달, 제작사례 기능 유지
   ========================================================= */
@media (max-width:720px){
  body{
    padding-top:0 !important;
  }

  .fm-header{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    top:0 !important;
    width:100% !important;
    z-index:90 !important;
    background:linear-gradient(180deg,rgba(17,19,21,.78) 0%,rgba(17,19,21,.42) 62%,rgba(17,19,21,0) 100%) !important;
    border-bottom:0 !important;
    box-shadow:none !important;
  }

  .fm-header-inner{
    min-height:86px !important;
    padding-top:14px !important;
    padding-bottom:14px !important;
  }

  .fm-hero{
    margin-top:0 !important;
    padding-top:0 !important;
    min-height:100svh !important;
    overflow:hidden !important;
  }

  .fm-hero-video-wrap{
    top:0 !important;
    bottom:0 !important;
    height:100% !important;
  }

  .fm-hero-inner{
    min-height:100svh !important;
    padding-top:0 !important;
  }

  .fm-hero-copy{
    min-height:100svh !important;
    justify-content:center !important;
    padding-top:98px !important;
    padding-bottom:42px !important;
  }
}


/* =========================================================
   PATCH 2026-05-17 / BRANDINGTIME V64 MOBILE HEADER + HERO SAFE FIX
   문제:
   - v63에서 모바일 헤더를 fixed overlay로 바꾸면서 검은 그라데이션 띠가 상단에 남음
   - 스크롤 후에도 헤더 배경이 흰색으로 돌아오지 않음
   해결:
   - 모바일 헤더는 원래 카드형 fixed/sticky 느낌으로 복구
   - 헤더 배경은 기본/스크롤 상태 모두 흰색 계열로 강제
   - 히어로는 헤더 높이를 고려해 자체 padding으로 시작 위치만 보정
   - 유튜브 영상은 배경 최하위 레이어 유지
   보호:
   - PC 영상 배경/문의 모달/제작사례 스와이프/파비콘 유지
   ========================================================= */
@media (max-width:720px){
  body{
    padding-top:0 !important;
  }

  .fm-header{
    position:fixed !important;
    left:50% !important;
    top:0 !important;
    right:auto !important;
    width:min(100%, 430px) !important;
    transform:translateX(-50%) !important;
    z-index:90 !important;
    background:#fff !important;
    border-bottom:1px solid rgba(231,223,212,.92) !important;
    box-shadow:0 10px 28px rgba(24,20,22,.08) !important;
  }

  .fm-header.is-scrolled,
  .fm-header.scrolled,
  body.is-scrolled .fm-header{
    background:#fff !important;
    border-bottom:1px solid rgba(231,223,212,.92) !important;
    box-shadow:0 10px 28px rgba(24,20,22,.10) !important;
  }

  .fm-header-inner{
    min-height:86px !important;
    padding:14px 14px !important;
  }

  .fm-brand strong,
  .fm-brand span,
  .fm-nav a{
    color:#211b1f !important;
  }

  .fm-menu-btn{
    background:#fff !important;
    border-color:#e3d8cc !important;
    color:#111315 !important;
  }

  .fm-hero{
    margin-top:0 !important;
    padding-top:86px !important;
    min-height:100svh !important;
    overflow:hidden !important;
  }

  .fm-hero-video-wrap{
    top:86px !important;
    bottom:0 !important;
    height:auto !important;
  }

  .fm-hero-video{
    display:block !important;
    left:50% !important;
    top:48% !important;
    width:177.78vh !important;
    height:100vh !important;
    min-width:100vw !important;
    min-height:56.25vw !important;
    transform:translate(-50%,-50%) scale(1.08) !important;
    z-index:0 !important;
    pointer-events:none !important;
  }

  .fm-hero-video-wrap::after{
    z-index:1 !important;
    pointer-events:none !important;
    background:linear-gradient(180deg,
      rgba(19,16,18,.48) 0%,
      rgba(19,16,18,.38) 32%,
      rgba(19,16,18,.56) 64%,
      rgba(19,16,18,.78) 100%) !important;
  }

  .fm-hero-inner{
    min-height:calc(100svh - 86px) !important;
    padding:0 0 38px !important;
    position:relative !important;
    z-index:3 !important;
  }

  .fm-hero-copy{
    min-height:calc(100svh - 86px) !important;
    justify-content:center !important;
    padding:28px 0 40px !important;
    position:relative !important;
    z-index:4 !important;
  }
}


/* =========================================================
   PATCH 2026-05-17 / BRANDINGTIME V65 MOBILE YOUTUBE CROP FIX
   문제:
   - PC에서는 정상이나 모바일에서 YouTube 영상의 상단 빈 장면이 크게 잡힘
   - 헤더 아래 영상 시작 부분이 비어 보이고 히어로 완성도가 떨어짐
   해결:
   - 모바일에서 iframe을 더 크게 확대하고 위로 당겨 실제 장면이 바로 보이도록 crop
   - 헤더는 흰색 고정 상태 유지
   - 히어로 텍스트는 기존 위치를 과하게 건드리지 않음
   보호:
   - PC 영상 배경/문의 모달/제작사례 스와이프/파비콘 유지
   ========================================================= */
@media (max-width:720px){
  .fm-header{
    background:#fff !important;
    border-bottom:1px solid rgba(231,223,212,.92) !important;
    box-shadow:0 8px 22px rgba(24,20,22,.08) !important;
  }

  .fm-hero{
    padding-top:86px !important;
    min-height:100svh !important;
  }

  .fm-hero-video-wrap{
    top:86px !important;
    bottom:0 !important;
    height:auto !important;
    overflow:hidden !important;
    background:#171315 url('https://brandingtime.landingpager.kr/images/thurm.jpg') center center / cover no-repeat !important;
  }

  .fm-hero-video{
    display:block !important;
    position:absolute !important;
    left:50% !important;
    top:31% !important;
    width:235vh !important;
    height:132.2vh !important;
    min-width:235vw !important;
    min-height:132.2vw !important;
    transform:translate(-50%,-50%) scale(1.08) !important;
    border:0 !important;
    pointer-events:none !important;
    z-index:0 !important;
  }

  .fm-hero-video-poster{
    object-fit:cover !important;
    object-position:center 38% !important;
  }

  .fm-hero-video-wrap::after{
    background:linear-gradient(180deg,
      rgba(19,16,18,.42) 0%,
      rgba(19,16,18,.38) 28%,
      rgba(19,16,18,.56) 64%,
      rgba(19,16,18,.78) 100%) !important;
  }

  .fm-hero-inner{
    min-height:calc(100svh - 86px) !important;
    padding:0 0 32px !important;
  }

  .fm-hero-copy{
    min-height:calc(100svh - 86px) !important;
    justify-content:center !important;
    padding:18px 0 34px !important;
  }
}


/* =========================================================
   PATCH 2026-05-17 / BRANDINGTIME V66 MOBILE YOUTUBE IMWEB STYLE
   문제:
   - 이전 방식은 모바일에서 iframe을 vh 기준으로 과하게 확대하고 top 값을 여러 번 보정하면서
     장면 위치가 불안정해지고 상단이 빈 영역처럼 보임
   해결:
   - 아임웹 방식처럼 16:9 iframe을 모바일 히어로 영역보다 크게 깔고 중앙 crop
   - width: max(100vw, sectionHeight * 16 / 9)
   - height: max(sectionHeight, 100vw * 9 / 16)
   - transform으로 중앙 정렬 후 scale만 살짝 추가
   보호:
   - PC 영상 배경/문의 모달/제작사례 스와이프/파비콘 유지
   ========================================================= */
@media (max-width:720px){
  :root{
    --bt-mobile-header-h:86px;
    --bt-mobile-hero-h:calc(100svh - var(--bt-mobile-header-h));
  }

  body{
    padding-top:0 !important;
  }

  .fm-header{
    position:fixed !important;
    left:50% !important;
    top:0 !important;
    right:auto !important;
    width:min(100%,430px) !important;
    transform:translateX(-50%) !important;
    z-index:90 !important;
    background:#fff !important;
    border-bottom:1px solid rgba(231,223,212,.92) !important;
    box-shadow:0 8px 22px rgba(24,20,22,.08) !important;
  }

  .fm-header.is-scrolled,
  .fm-header.scrolled,
  body.is-scrolled .fm-header{
    background:#fff !important;
    border-bottom:1px solid rgba(231,223,212,.92) !important;
    box-shadow:0 8px 22px rgba(24,20,22,.10) !important;
  }

  .fm-header-inner{
    min-height:var(--bt-mobile-header-h) !important;
    padding:14px 14px !important;
  }

  .fm-brand strong,
  .fm-brand span{
    color:#211b1f !important;
  }

  .fm-menu-btn{
    width:48px !important;
    height:48px !important;
    background:#fff !important;
    border:1px solid #e3d8cc !important;
    color:#111315 !important;
    box-shadow:none !important;
    opacity:1 !important;
  }

  .fm-menu-btn span,
  .fm-menu-btn::before,
  .fm-menu-btn::after{
    background:#111315 !important;
    opacity:1 !important;
  }

  .fm-hero{
    margin-top:0 !important;
    padding-top:var(--bt-mobile-header-h) !important;
    min-height:100svh !important;
    height:100svh !important;
    overflow:hidden !important;
  }

  .fm-hero-video-wrap{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:var(--bt-mobile-header-h) !important;
    bottom:0 !important;
    height:var(--bt-mobile-hero-h) !important;
    overflow:hidden !important;
    background:#171315 url('https://brandingtime.landingpager.kr/images/thurm.jpg') center center / cover no-repeat !important;
    z-index:0 !important;
  }

  .fm-hero-video{
    display:block !important;
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    width:max(100vw, calc(var(--bt-mobile-hero-h) * 1.7778)) !important;
    height:max(var(--bt-mobile-hero-h), calc(100vw * .5625)) !important;
    min-width:0 !important;
    min-height:0 !important;
    transform:translate(-50%,-50%) scale(1.12) !important;
    border:0 !important;
    pointer-events:none !important;
    z-index:0 !important;
  }

  .fm-hero-video-poster{
    display:block !important;
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
    opacity:1 !important;
    z-index:0 !important;
  }

  .fm-hero-video-wrap::after{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;
    pointer-events:none !important;
    background:linear-gradient(180deg,
      rgba(19,16,18,.54) 0%,
      rgba(19,16,18,.38) 28%,
      rgba(19,16,18,.54) 62%,
      rgba(19,16,18,.78) 100%) !important;
  }

  .fm-hero-inner{
    min-height:var(--bt-mobile-hero-h) !important;
    height:var(--bt-mobile-hero-h) !important;
    padding:0 0 32px !important;
    position:relative !important;
    z-index:3 !important;
  }

  .fm-hero-copy{
    min-height:var(--bt-mobile-hero-h) !important;
    height:var(--bt-mobile-hero-h) !important;
    justify-content:center !important;
    padding:18px 0 34px !important;
    position:relative !important;
    z-index:4 !important;
  }
}


/* =========================================================
   PATCH 2026-05-17 / BRANDINGTIME V67 MOBILE HERO STRUCTURE RESET
   문제:
   - v60~v66 모바일 YouTube 보정이 누적되면서 히어로 높이/영상 위치/콘텐츠 배치가 충돌
   - 모바일에서 핵심 카드(.fm-hero-side)가 히어로 내부 아래로 붙어 첫 화면이 길어지고 엉킴
   - 아임웹 참고 구조처럼 영상은 배경, 텍스트는 op 영역 위에 별도 콘텐츠로 둬야 함
   해결:
   - 모바일 첫 화면은 "영상 배경 + 타이틀 + 설명 + 버튼"만 노출
   - .fm-hero-side는 모바일 히어로에서 숨김
   - 히어로 높이는 100svh, 헤더 아래 영상 영역은 calc(100svh - 86px)로 고정
   - iframe은 중앙 cover 방식으로 배경 처리
   보호:
   - PC 히어로/PC 핵심 카드/문의 모달/제작사례 스와이프 기능 유지
   ========================================================= */
@media (max-width:720px){
  :root{
    --bt-mobile-header-h:86px;
    --bt-mobile-hero-h:calc(100svh - var(--bt-mobile-header-h));
  }

  body{
    padding-top:0 !important;
  }

  .fm-header{
    position:fixed !important;
    left:50% !important;
    top:0 !important;
    right:auto !important;
    width:min(100%,430px) !important;
    transform:translateX(-50%) !important;
    z-index:90 !important;
    background:#fff !important;
    border-bottom:1px solid rgba(231,223,212,.92) !important;
    box-shadow:0 8px 22px rgba(24,20,22,.08) !important;
    color:#211b1f !important;
  }

  .fm-header.is-scrolled,
  .fm-header.scrolled,
  body.is-scrolled .fm-header,
  body.is-menu-open .fm-header{
    background:#fff !important;
    color:#211b1f !important;
    border-bottom:1px solid rgba(231,223,212,.92) !important;
    box-shadow:0 8px 22px rgba(24,20,22,.10) !important;
  }

  .fm-header-inner,
  .fm-nav{
    min-height:var(--bt-mobile-header-h) !important;
    height:var(--bt-mobile-header-h) !important;
    padding:14px 14px !important;
  }

  .fm-logo-text b,
  .fm-logo-text small{
    color:#211b1f !important;
  }

  .fm-menu-btn{
    display:flex !important;
    width:48px !important;
    height:48px !important;
    border:1px solid #e3d8cc !important;
    border-radius:14px !important;
    background:#fff !important;
    color:#111315 !important;
    box-shadow:none !important;
    opacity:1 !important;
  }

  .fm-menu-btn span{
    background:#111315 !important;
    opacity:1 !important;
  }

  .fm-hero{
    position:relative !important;
    margin-top:0 !important;
    padding-top:var(--bt-mobile-header-h) !important;
    height:100svh !important;
    min-height:100svh !important;
    max-height:100svh !important;
    overflow:hidden !important;
  }

  .fm-hero-video-wrap{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:var(--bt-mobile-header-h) !important;
    bottom:0 !important;
    width:100% !important;
    height:var(--bt-mobile-hero-h) !important;
    overflow:hidden !important;
    z-index:0 !important;
    background:#171315 url('https://brandingtime.landingpager.kr/images/thurm.jpg') center center / cover no-repeat !important;
  }

  .fm-hero-video-poster{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
    z-index:0 !important;
    opacity:1 !important;
  }

  .fm-hero-video{
    display:block !important;
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    width:max(100vw, calc(var(--bt-mobile-hero-h) * 1.7778)) !important;
    height:max(var(--bt-mobile-hero-h), calc(100vw * .5625)) !important;
    min-width:0 !important;
    min-height:0 !important;
    transform:translate(-50%,-50%) scale(1.22) !important;
    border:0 !important;
    pointer-events:none !important;
    z-index:0 !important;
  }

  .fm-hero-video-wrap::after{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;
    pointer-events:none !important;
    background:linear-gradient(180deg,
      rgba(19,16,18,.52) 0%,
      rgba(19,16,18,.36) 34%,
      rgba(19,16,18,.56) 68%,
      rgba(19,16,18,.78) 100%) !important;
  }

  .fm-hero-inner{
    position:relative !important;
    z-index:3 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:min(var(--fm-container),calc(100% - var(--fm-side-mo))) !important;
    height:var(--bt-mobile-hero-h) !important;
    min-height:var(--bt-mobile-hero-h) !important;
    max-height:var(--bt-mobile-hero-h) !important;
    padding:0 !important;
  }

  .fm-hero-grid{
    display:block !important;
    width:100% !important;
    height:auto !important;
  }

  .fm-hero-copy{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    padding:0 0 10px !important;
    text-align:center !important;
  }

  .fm-hero-copy .fm-badge{
    align-self:center !important;
    min-height:30px !important;
    padding:0 14px !important;
    font-size:11px !important;
    line-height:1 !important;
  }

  .fm-hero-copy h1{
    margin:16px auto 0 !important;
    width:min(100%,330px) !important;
    font-size:clamp(27px,7.7vw,32px) !important;
    line-height:1.18 !important;
    letter-spacing:-.065em !important;
    text-align:center !important;
  }

  .fm-hero-copy p{
    margin:18px auto 0 !important;
    max-width:300px !important;
    font-size:14.5px !important;
    line-height:1.85 !important;
    text-align:center !important;
    color:rgba(255,255,255,.86) !important;
  }

  .fm-hero-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
    width:min(100%,320px) !important;
    margin:28px auto 0 !important;
  }

  .fm-hero-actions .fm-btn{
    width:100% !important;
    min-height:50px !important;
    padding:0 12px !important;
    font-size:14px !important;
    line-height:1 !important;
  }

  .fm-hero-side{
    display:none !important;
  }
}


/* =========================================================
   PATCH 2026-05-17 / BRANDINGTIME V68 MOBILE HEADER TRANSPARENT
   목적:
   - 모바일 첫 진입 화면에서 헤더 흰색 배경 제거
   - PC처럼 히어로 영상이 헤더 뒤까지 이어지도록 투명 헤더 적용
   - 스크롤 후에는 흰색 헤더로 전환
   보호:
   - PC 구조/문의 모달/제작사례 스와이프/파비콘 유지
   ========================================================= */
@media (max-width:720px){
  :root{
    --bt-mobile-header-h:86px;
    --bt-mobile-hero-h:100svh;
  }

  .fm-header{
    position:fixed !important;
    left:50% !important;
    top:0 !important;
    right:auto !important;
    width:min(100%,430px) !important;
    transform:translateX(-50%) !important;
    z-index:90 !important;
    background:transparent !important;
    color:#fff !important;
    border-bottom:1px solid transparent !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
  }

  .fm-header.is-scrolled,
  .fm-header.scrolled,
  body.is-scrolled .fm-header,
  body.is-menu-open .fm-header{
    background:#fff !important;
    color:#211b1f !important;
    border-bottom:1px solid rgba(231,223,212,.92) !important;
    box-shadow:0 8px 22px rgba(24,20,22,.10) !important;
    backdrop-filter:blur(14px) !important;
  }

  .fm-header-inner,
  .fm-nav{
    min-height:var(--bt-mobile-header-h) !important;
    height:var(--bt-mobile-header-h) !important;
    padding:14px 14px !important;
  }

  .fm-logo-text b,
  .fm-logo-text small{
    color:#fff !important;
  }

  .fm-header.is-scrolled .fm-logo-text b,
  .fm-header.is-scrolled .fm-logo-text small,
  .fm-header.scrolled .fm-logo-text b,
  .fm-header.scrolled .fm-logo-text small,
  body.is-scrolled .fm-header .fm-logo-text b,
  body.is-scrolled .fm-header .fm-logo-text small,
  body.is-menu-open .fm-header .fm-logo-text b,
  body.is-menu-open .fm-header .fm-logo-text small{
    color:#211b1f !important;
  }

  .fm-menu-btn{
    display:flex !important;
    width:48px !important;
    height:48px !important;
    border:1px solid rgba(255,255,255,.34) !important;
    border-radius:14px !important;
    background:rgba(255,255,255,.12) !important;
    color:#fff !important;
    box-shadow:none !important;
    opacity:1 !important;
  }

  .fm-menu-btn span{
    background:#fff !important;
    opacity:1 !important;
  }

  .fm-header.is-scrolled .fm-menu-btn,
  .fm-header.scrolled .fm-menu-btn,
  body.is-scrolled .fm-header .fm-menu-btn,
  body.is-menu-open .fm-header .fm-menu-btn{
    background:#fff !important;
    border:1px solid #e3d8cc !important;
    color:#111315 !important;
  }

  .fm-header.is-scrolled .fm-menu-btn span,
  .fm-header.scrolled .fm-menu-btn span,
  body.is-scrolled .fm-header .fm-menu-btn span,
  body.is-menu-open .fm-header .fm-menu-btn span{
    background:#111315 !important;
  }

  .fm-hero{
    padding-top:0 !important;
    height:100svh !important;
    min-height:100svh !important;
    max-height:100svh !important;
  }

  .fm-hero-video-wrap{
    top:0 !important;
    height:100svh !important;
    bottom:auto !important;
  }

  .fm-hero-inner{
    height:100svh !important;
    min-height:100svh !important;
    max-height:100svh !important;
    padding-top:var(--bt-mobile-header-h) !important;
  }

  .fm-hero-copy{
    padding:0 0 10px !important;
  }
}


/* =========================================================
   PATCH 2026-05-17 / BRANDINGTIME V69 MOBILE/TABLET HEADER WIDTH FIX
   목적:
   - v68에서 모바일 헤더 투명 처리는 성공
   - 다만 430px 제한 때문에 태블릿/좁은 브라우저에서 헤더 가로 폭이 고정되어 우측 여백 발생
   - 모바일/태블릿 구간에서 헤더를 화면 전체 폭으로 다시 확장
   보호:
   - 모바일 첫 화면 투명 헤더 유지
   - 스크롤 후 흰색 헤더 전환 유지
   - PC 히어로/문의 모달/제작사례 스와이프/파비콘 유지
   ========================================================= */
@media (max-width:720px){
  .fm-header{
    left:0 !important;
    right:0 !important;
    width:100% !important;
    max-width:none !important;
    transform:none !important;
  }

  .fm-header-inner,
  .fm-nav{
    width:100% !important;
  }
}

/* 태블릿/좁은 브라우저에서 햄버거 전환 시 헤더가 일부 폭으로 고정되지 않도록 보정 */
@media (min-width:721px) and (max-width:1180px){
  .fm-header{
    left:0 !important;
    right:0 !important;
    width:100% !important;
    max-width:none !important;
    transform:none !important;
  }

  .fm-nav{
    width:min(var(--fm-container),calc(100% - var(--fm-side-pc))) !important;
    margin:0 auto !important;
  }
}


/* =========================================================
   PATCH 2026-05-18 / BRANDINGTIME V72C HERO VIDEO UNDER POSTER LAYER FIX
   기준 파일:
   - 사용자가 다시 업로드한 v70 정상본
   문제:
   - v72B에서 .fm-hero-video-wrap을 relative로 바꾸면서 썸네일 레이어가
     히어로 텍스트 영역 위를 덮고 영상/타이틀 레이어가 꼬임
   해결:
   - 영상 래퍼는 반드시 absolute + inset:0 + z-index:0 유지
   - YouTube iframe은 처음부터 로드/재생
   - 썸네일은 영상 위, 오버레이/텍스트 아래 레이어로 3초간만 표시
   - 3초 후 썸네일만 페이드아웃
   보호:
   - v68 모바일 투명 헤더 유지
   - v69 모바일/태블릿 헤더 폭 보정 유지
   - v70 영상 주소 유지
   - 문의 모달/제작사례 스와이프/파비콘 유지
   ========================================================= */
.fm-hero{
  isolation:isolate !important;
}

.fm-hero-video-wrap{
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  overflow:hidden !important;
  background:#171315 url('https://brandingtime.landingpager.kr/images/thurm.jpg') center center / cover no-repeat !important;
}

.fm-hero-video{
  z-index:0 !important;
  pointer-events:none !important;
}

.fm-hero-video-poster{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  z-index:1 !important;
  opacity:1 !important;
  visibility:visible !important;
  transition:opacity .85s ease, visibility .85s ease !important;
  pointer-events:none !important;
}

.fm-hero-video-wrap::after{
  z-index:2 !important;
  pointer-events:none !important;
}

.fm-hero-inner{
  position:relative !important;
  z-index:3 !important;
}

.fm-hero-copy,
.fm-hero-side{
  position:relative !important;
  z-index:4 !important;
}

.fm-hero-video-wrap.is-poster-hidden .fm-hero-video-poster{
  opacity:0 !important;
  visibility:hidden !important;
}

/* 모바일 성공 구조 유지: 영상은 헤더 뒤까지 깔리고, 헤더는 투명으로 시작 */
@media (max-width:720px){
  .fm-hero-video-wrap{
    top:0 !important;
    height:100svh !important;
    bottom:auto !important;
  }
}


/* =========================================================
   PATCH 2026-05-18 / BRANDINGTIME V72D MOBILE VIDEO SCALE TUNE
   기준 파일:
   - v72C 영상 선재생 + 썸네일 레이어 성공본
   목적:
   - 모바일에서 썸네일이 사라진 뒤 YouTube 영상이 과하게 확대되어 보이는 현상 완화
   - 기존 scale(1.22) 계열을 최종 override로 scale(1.12)로 조정
   - 썸네일 → 영상 전환 시 크기 차이를 줄여 자연스럽게 보정
   보호:
   - YouTube iframe 즉시 로드/재생 유지
   - 썸네일 3초 후 페이드아웃 유지
   - 모바일 투명 헤더/태블릿 헤더 폭 보정 유지
   - 문의 모달/제작사례 스와이프/파비콘 유지
   ========================================================= */
@media (max-width:720px){
  .fm-hero-video{
    transform:translate(-50%,-50%) scale(1.12) !important;
  }

  .fm-hero-video-mount .fm-hero-video{
    transform:translate(-50%,-50%) scale(1.12) !important;
  }
}


/* =========================================================
   PATCH 2026-05-18 / BRANDINGTIME V72E MOBILE VIDEO SCALE 1_0
   기준 파일:
   - v72D 모바일 영상 확대율 조정본
   목적:
   - 모바일에서 YouTube 배경 영상을 확대하지 않고 1:1 비율(scale 1.0)로 표시
   - 썸네일 → 영상 전환 시 확대감 제거
   보호:
   - 영상 선재생 + 썸네일 3초 후 제거 구조 유지
   - 모바일 투명 헤더 / 태블릿 헤더 폭 보정 유지
   - 문의 모달 / 제작사례 스와이프 / 파비콘 유지
   ========================================================= */
@media (max-width:720px){
  .fm-hero-video{
    transform:translate(-50%,-50%) scale(1.0) !important;
  }

  .fm-hero-video-mount .fm-hero-video{
    transform:translate(-50%,-50%) scale(1.0) !important;
  }
}


/* =========================================================
   PATCH 2026-05-18 / BRANDINGTIME V72H MOBILE HEADER COMPACT
   기준 파일:
   - v72G 히어로 가격정책 버튼명 보정본
   목적:
   - 모바일 상단 메뉴 영역 높이 축소
   - 로고 아이콘/브랜드 텍스트 크기 축소
   - 햄버거 메뉴 버튼 크기 축소
   - 햄버거 메뉴 테두리 제거
   보호:
   - PC 헤더 구조 유지
   - 모바일 투명 헤더 / 스크롤 후 흰색 헤더 전환 유지
   - YouTube 영상 선재생 + 썸네일 지연 제거 구조 유지
   - 모바일 scale(1.0), 태블릿 헤더 폭 보정, 문의 모달, 제작사례 스와이프 유지
   ========================================================= */
@media (max-width:720px){
  :root{
    --bt-mobile-header-h:70px !important;
  }

  .fm-header-inner,
  .fm-nav{
    min-height:70px !important;
    height:70px !important;
    padding:9px 12px !important;
  }

  .fm-logo{
    gap:9px !important;
  }

  .fm-logo .fm-logo-icon,
  .fm-logo .fm-logo-icon img{
    width:36px !important;
    height:36px !important;
    border-radius:12px !important;
  }

  .fm-logo-text b{
    font-size:18px !important;
    line-height:1.02 !important;
    letter-spacing:-.055em !important;
  }

  .fm-logo-text small{
    margin-top:3px !important;
    font-size:9.5px !important;
    line-height:1.05 !important;
    letter-spacing:.075em !important;
  }

  .fm-menu-btn{
    width:40px !important;
    height:40px !important;
    border:0 !important;
    border-radius:12px !important;
    background:rgba(255,255,255,.14) !important;
    box-shadow:none !important;
    gap:4px !important;
  }

  .fm-menu-btn span{
    width:17px !important;
    height:2px !important;
  }

  .fm-header.is-scrolled .fm-menu-btn,
  .fm-header.scrolled .fm-menu-btn,
  body.is-scrolled .fm-header .fm-menu-btn,
  body.is-menu-open .fm-header .fm-menu-btn{
    background:#fff !important;
    border:0 !important;
    box-shadow:none !important;
  }

  .fm-mobile-panel{
    top:70px !important;
  }

  .fm-hero-inner{
    padding-top:70px !important;
  }
}


/* =========================================================
   PATCH 2026-05-18 / BRANDINGTIME V74 FONT ONLY STRONG OVERRIDE
   기준:
   - 랜딩페이저 V3 최종 폰트 규정
   - 히어로 34~50px / 섹션 30~38px / 본문 16px / 강조 18px / 카드본문 15px / CTA 26px
   문제:
   - v73은 기존 v57~v72 계열의 세부 선택자와 비슷한 값이 많아 화면상 변화가 작게 보임
   목적:
   - 배경색·박스색·레이아웃·기능은 그대로 두고 폰트 속성만 눈에 보이게 재정렬
   - 기존 CSS 변수까지 함께 재정의하여 var() 기반 영역과 직접 선택자 영역을 동시에 보정
   주의:
   - .fm-card.dark, .fm-cta-box, .fm-management-price, .fm-site-modal-head 등 검정/다크 박스의 배경색은 절대 변경하지 않음
   - 다크 박스 내부 텍스트 색상도 기존 대비가 깨지지 않도록 강제 #333 처리하지 않음
   ========================================================= */

/* 1) 기존 변수 자체를 V3 최종 폰트 규정으로 재정의 */
:root{
  --fm-font-hero:clamp(34px,3.4vw,50px) !important;
  --fm-font-section:clamp(30px,2.25vw,38px) !important;
  --fm-font-card-title:17px !important;
  --fm-font-body:16px !important;
  --fm-font-small:13px !important;
  --fm-font-button:14px !important;

  --bt-v3-hero-pc:clamp(34px,3.4vw,50px);
  --bt-v3-hero-mo:clamp(25px,7.2vw,31px);
  --bt-v3-section-pc:clamp(30px,2.25vw,38px);
  --bt-v3-section-mo:clamp(24px,6.3vw,29px);
  --bt-v3-body-pc:16px;
  --bt-v3-body-mo:14.5px;
  --bt-v3-strong-pc:18px;
  --bt-v3-strong-mo:15.5px;
  --bt-v3-card-title-pc:17px;
  --bt-v3-card-title-mo:16px;
  --bt-v3-card-body-pc:15px;
  --bt-v3-card-body-mo:13.8px;
  --bt-v3-cta-title-pc:26px;
  --bt-v3-cta-title-mo:22px;
  --bt-v3-button-pc:14px;
  --bt-v3-button-mo:13.5px;
}

/* 2) 기본 본문 */
body{
  font-size:var(--bt-v3-body-pc) !important;
  line-height:1.72 !important;
  font-weight:450 !important;
}

/* 3) 히어로 - 기존 여러 패치보다 확실히 낮춤 */
@media (min-width:721px){
  .fm-hero-copy h1,
  .fm-hero-copy h1 span,
  .fm-hero-copy h1 .fm-desktop-copy{
    font-size:var(--bt-v3-hero-pc) !important;
    line-height:1.18 !important;
    letter-spacing:-.055em !important;
    font-weight:760 !important;
  }

  .fm-hero-copy h1{
    max-width:690px !important;
  }

  .fm-hero-copy p,
  .fm-hero-copy p span,
  .fm-hero-copy p .fm-desktop-copy{
    font-size:16px !important;
    line-height:1.82 !important;
    font-weight:460 !important;
  }

  .fm-hero-copy p{
    max-width:690px !important;
  }
}

/* 4) 섹션 제목/설명 */
.fm-title h2,
.fm-split-head h2,
.fm-management-head h3{
  font-size:var(--bt-v3-section-pc) !important;
  line-height:1.28 !important;
  letter-spacing:-.055em !important;
  font-weight:730 !important;
}

.fm-title p,
.fm-split-head p,
.fm-management-head p{
  font-size:var(--bt-v3-body-pc) !important;
  line-height:1.78 !important;
  font-weight:500 !important;
}

/* 5) 강조 문장 */
.fm-title p strong,
.fm-split-head p strong,
.fm-keypoint strong,
.fm-price-note b,
.fm-faq-answer b,
.fm-complete-next b{
  font-size:var(--bt-v3-strong-pc) !important;
  line-height:1.58 !important;
  font-weight:720 !important;
}

/* 6) 카드 제목 */
.fm-card h3,
.fm-step h3,
.fm-showcase-body h3,
.fm-work-body h3,
.fm-sample-body h3,
.fm-scope-card h3,
.fm-notice-card h3,
.fm-faq-side h3,
.fm-blog-card h3,
.fm-management-item b{
  font-size:var(--bt-v3-card-title-pc) !important;
  line-height:1.42 !important;
  letter-spacing:-.04em !important;
  font-weight:700 !important;
}

/* 7) 카드/설명 본문 */
.fm-card p,
.fm-card li,
.fm-keypoint span,
.fm-step p,
.fm-showcase-body p,
.fm-work-body p,
.fm-sample-body p,
.fm-scope-card p,
.fm-scope-list li,
.fm-notice-card p,
.fm-faq-side p,
.fm-faq-point,
.fm-blog-card p,
.fm-portfolio-caption p,
.fm-sample-note,
.fm-management-item span,
.fm-collapse-title span{
  font-size:var(--bt-v3-card-body-pc) !important;
  line-height:1.68 !important;
  font-weight:480 !important;
}

/* 8) 가격 정책 */
.fm-price-card h3{
  font-size:21px !important;
  line-height:1.32 !important;
  font-weight:720 !important;
}

.fm-price-desc{
  min-height:auto !important;
  font-size:15px !important;
  line-height:1.72 !important;
  font-weight:450 !important;
}

.fm-price strong{
  font-size:30px !important;
  line-height:1 !important;
  font-weight:760 !important;
}

.fm-price span,
.fm-price-list li,
.fm-benefit-row,
.fm-benefit-row b,
.fm-benefit-row span,
.fm-option-row b,
.fm-option-row span{
  font-size:14px !important;
  line-height:1.6 !important;
  font-weight:650 !important;
}

/* 9) 히어로 우측 카드 */
.fm-hero-side h3{
  font-size:20px !important;
  line-height:1.38 !important;
  font-weight:760 !important;
}

.fm-hero-side p{
  font-size:14.5px !important;
  line-height:1.76 !important;
  font-weight:450 !important;
}

.fm-hero-item{
  grid-template-columns:38px minmax(0,1fr) !important;
  gap:10px !important;
}

.fm-hero-item i{
  width:38px !important;
  min-width:38px !important;
  font-size:26px !important;
  line-height:1.05 !important;
  font-weight:760 !important;
}

.fm-hero-item div{
  font-size:14px !important;
  line-height:1.68 !important;
  font-weight:450 !important;
}

.fm-hero-item div b{
  display:block !important;
  font-size:16px !important;
  line-height:1.42 !important;
  font-weight:700 !important;
}

.fm-hero-item div span{
  display:block !important;
  margin-top:4px !important;
  font-size:14px !important;
  line-height:1.68 !important;
  font-weight:450 !important;
}

/* 10) FAQ */
.fm-faq-item summary{
  font-size:16px !important;
  line-height:1.42 !important;
  font-weight:720 !important;
}

.fm-faq-answer{
  font-size:15px !important;
  line-height:1.72 !important;
  font-weight:450 !important;
}

/* 11) CTA */
.fm-cta-box h2{
  font-size:var(--bt-v3-cta-title-pc) !important;
  line-height:1.32 !important;
  letter-spacing:-.055em !important;
  font-weight:760 !important;
}

.fm-cta-box p{
  font-size:15px !important;
  line-height:1.7 !important;
  font-weight:450 !important;
}

/* 12) 버튼 */
.fm-btn,
.fm-cta,
.fm-sample-btn,
.fm-site-open,
.fm-site-close,
.fm-inquiry-btn,
.fm-complete-close,
.fm-wizard-kakao-btn,
.fm-blog-more{
  font-size:var(--bt-v3-button-pc) !important;
  line-height:1 !important;
  font-weight:720 !important;
}

/* 13) 문의 모달 */
.fm-inquiry-title b{
  font-size:20px !important;
  line-height:1.28 !important;
  font-weight:730 !important;
}

.fm-inquiry-title span,
.fm-wizard-kicker,
.fm-mini{
  font-size:11px !important;
  line-height:1.15 !important;
  font-weight:740 !important;
  letter-spacing:.13em !important;
}

.fm-wizard-title{
  font-size:28px !important;
  line-height:1.32 !important;
  letter-spacing:-.055em !important;
  font-weight:730 !important;
}

.fm-wizard-desc,
.fm-inquiry-intro p,
.fm-form-field input,
.fm-form-field select,
.fm-form-field textarea,
.fm-confirm-box,
.fm-review-row span,
.fm-policy-content,
.fm-complete-card p,
.fm-complete-body p{
  font-size:15px !important;
  line-height:1.72 !important;
  font-weight:450 !important;
}

.fm-wizard-form-title,
.fm-inquiry-intro h3{
  font-size:21px !important;
  line-height:1.36 !important;
  font-weight:730 !important;
}

.fm-choice span,
.fm-inquiry-step,
.fm-wizard-flow-item,
.fm-form-field label,
.fm-choice-label,
.fm-checkline,
.fm-file-note{
  font-size:13px !important;
  line-height:1.5 !important;
  font-weight:700 !important;
}

.fm-complete-card h3,
.fm-complete-body h3{
  font-size:26px !important;
  line-height:1.32 !important;
  font-weight:760 !important;
}

/* 14) 푸터 */
.fm-footer h3{
  font-size:14px !important;
  font-weight:720 !important;
}

.fm-footer p,
.fm-footer li,
.fm-footer-bottom{
  font-size:13px !important;
  line-height:1.75 !important;
  font-weight:450 !important;
}

/* 15) 모바일 */
@media (max-width:720px){
  :root{
    --fm-font-hero:31px !important;
    --fm-font-section:29px !important;
    --fm-font-body:14.5px !important;
  }

  body{
    font-size:var(--bt-v3-body-mo) !important;
  }

  .fm-hero-copy h1,
  .fm-hero-copy h1 span,
  .fm-hero-copy h1 .fm-mobile-copy{
    font-size:var(--bt-v3-hero-mo) !important;
    line-height:1.22 !important;
    letter-spacing:-.06em !important;
    font-weight:760 !important;
  }

  .fm-hero-copy p,
  .fm-hero-copy p span,
  .fm-hero-copy p .fm-mobile-copy{
    font-size:14.5px !important;
    line-height:1.74 !important;
    font-weight:480 !important;
  }

  .fm-title h2,
  .fm-split-head h2,
  .fm-management-head h3{
    font-size:var(--bt-v3-section-mo) !important;
    line-height:1.32 !important;
    font-weight:730 !important;
  }

  .fm-title p,
  .fm-split-head p,
  .fm-management-head p{
    font-size:var(--bt-v3-body-mo) !important;
    line-height:1.74 !important;
    font-weight:480 !important;
  }

  .fm-title p strong,
  .fm-split-head p strong,
  .fm-keypoint strong,
  .fm-price-note b,
  .fm-faq-answer b{
    font-size:var(--bt-v3-strong-mo) !important;
    line-height:1.56 !important;
    font-weight:700 !important;
  }

  .fm-card h3,
  .fm-step h3,
  .fm-showcase-body h3,
  .fm-work-body h3,
  .fm-sample-body h3,
  .fm-scope-card h3,
  .fm-notice-card h3,
  .fm-blog-card h3{
    font-size:var(--bt-v3-card-title-mo) !important;
    line-height:1.4 !important;
    font-weight:700 !important;
  }

  .fm-card p,
  .fm-card li,
  .fm-keypoint span,
  .fm-step p,
  .fm-showcase-body p,
  .fm-work-body p,
  .fm-sample-body p,
  .fm-scope-card p,
  .fm-scope-list li,
  .fm-notice-card p,
  .fm-blog-card p,
  .fm-portfolio-caption p{
    font-size:var(--bt-v3-card-body-mo) !important;
    line-height:1.66 !important;
    font-weight:460 !important;
  }

  .fm-hero-side h3{
    font-size:18px !important;
  }

  .fm-hero-side p{
    font-size:13.2px !important;
  }

  .fm-hero-item{
    grid-template-columns:34px minmax(0,1fr) !important;
  }

  .fm-hero-item i{
    width:34px !important;
    min-width:34px !important;
    font-size:23px !important;
  }

  .fm-hero-item div b{
    font-size:15.5px !important;
    font-weight:700 !important;
  }

  .fm-hero-item div,
  .fm-hero-item div span{
    font-size:13.5px !important;
    line-height:1.64 !important;
  }

  .fm-price-card h3{
    font-size:19px !important;
  }

  .fm-price strong{
    font-size:28px !important;
  }

  .fm-faq-item summary{
    font-size:15.5px !important;
  }

  .fm-faq-answer{
    font-size:13.8px !important;
  }

  .fm-cta-box h2{
    font-size:var(--bt-v3-cta-title-mo) !important;
    line-height:1.32 !important;
    font-weight:760 !important;
  }

  .fm-cta-box p{
    font-size:13.8px !important;
  }

  .fm-btn,
  .fm-cta,
  .fm-sample-btn,
  .fm-site-open,
  .fm-site-close,
  .fm-inquiry-btn,
  .fm-complete-close,
  .fm-wizard-kakao-btn,
  .fm-blog-more{
    font-size:var(--bt-v3-button-mo) !important;
    font-weight:700 !important;
  }

  .fm-wizard-title{
    font-size:24px !important;
    line-height:1.34 !important;
  }

  .fm-wizard-desc,
  .fm-form-field input,
  .fm-form-field select,
  .fm-form-field textarea{
    font-size:14px !important;
  }

  .fm-wizard-form-title,
  .fm-inquiry-intro h3{
    font-size:19px !important;
  }

  .fm-complete-card h3,
  .fm-complete-body h3{
    font-size:23px !important;
  }
}


/* =========================================================
   PATCH 2026-05-18 / BRANDINGTIME V75 TITLE WIDTH BALANCE
   기준:
   - v74 폰트 전용 강제 적용본
   - 랜딩페이저 V3 최종 폰트 규정
   목적:
   - 큰 타이틀이 가로로 너무 퍼져 보이는 현상 완화
   - 히어로/섹션/CTA 등 큰 제목의 max-width를 96~97% 감각으로 조정
   - 카드 내부 제목은 레이아웃 안정성을 위해 폭 보정하지 않음
   보호:
   - 배경색/박스색/검정 박스 배경/기능/레이아웃 구조는 변경하지 않음
   - 기존 YouTube 히어로 영상, 썸네일 지연 제거, 모바일 헤더, 문의 모달, 제작사례 스와이프 기능 유지
   ========================================================= */

/* 큰 제목 계열만 폭을 살짝 줄여 시각적 안정감 확보 */
.fm-hero-copy h1{
  max-width:min(96%, 680px) !important;
}

.fm-title h2,
.fm-split-head h2{
  max-width:min(97%, 960px) !important;
}

.fm-title.center h2{
  margin-left:auto !important;
  margin-right:auto !important;
}

.fm-cta-box h2{
  max-width:min(96%, 720px) !important;
}

/* 가격정책·관리정책 큰 제목도 과하게 퍼지지 않게 정리 */
.fm-management-head h3{
  max-width:min(97%, 920px) !important;
}

/* 문의 모달의 큰 제목은 모달 내부 폭 기준으로만 안정화 */
.fm-wizard-title,
.fm-complete-card h3,
.fm-complete-body h3{
  max-width:96% !important;
}

/* 카드 내부 제목은 건드리지 않음: 카드 폭 안에서 자연스럽게 100% 사용 */
.fm-card h3,
.fm-work-body h3,
.fm-sample-body h3,
.fm-showcase-body h3,
.fm-blog-card h3{
  max-width:none !important;
}

/* 모바일에서는 큰 제목만 96~97% 폭으로 살짝 좁힘 */
@media (max-width:720px){
  .fm-hero-copy h1{
    max-width:96% !important;
  }

  .fm-title h2,
  .fm-split-head h2,
  .fm-cta-box h2,
  .fm-management-head h3{
    max-width:97% !important;
  }

  .fm-title.center h2{
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .fm-wizard-title,
  .fm-complete-card h3,
  .fm-complete-body h3{
    max-width:97% !important;
  }
}


/* =========================================================
   PATCH 2026-05-18 / BRANDINGTIME V76 PANEL TITLE RULE
   기준:
   - 랜딩페이저 V3 최종 폰트·타이틀 폭 가이드
   - 신규 추가 규정: 박스 대표 타이틀 / 패널 타이틀
   목적:
   - 섹션 제목과 박스 내부 대표 타이틀의 위계 분리
   - 가격정책 내부 '브랜딩타임은 1년 운영관리 포함형...' 타이틀이
     섹션 제목과 같은 크기로 보이는 문제 해결
   규정:
   - 섹션 제목: 30~38px
   - 패널/박스 대표 타이틀: 24~32px
   - 카드 제목: 17px
   보호:
   - 배경색, 박스 배경색, 검정 박스 배경, 버튼 배경색 변경 없음
   - 다크 박스 내부 텍스트 대비 변경 없음
   - 히어로 영상/썸네일/모바일 헤더/문의 모달/제작사례 스와이프 기능 유지
   ========================================================= */

/* 1) 패널 타이틀 토큰 추가 */
:root{
  --bt-v3-panel-title-pc:clamp(24px,2vw,32px);
  --bt-v3-panel-title-mo:clamp(21px,5.8vw,25px);
}

/* 2) 가격정책 상단 운영관리 박스 대표 타이틀
   - 기존 v74에서 .fm-management-head h3를 섹션 제목과 같은 그룹으로 잡았던 것을
     패널 타이틀 단계로 다시 분리 */
.fm-management-head h3{
  font-size:var(--bt-v3-panel-title-pc) !important;
  line-height:1.34 !important;
  font-weight:760 !important;
  letter-spacing:-.05em !important;
  max-width:min(97%,920px) !important;
}

/* 3) 일반 패널/접힘형 박스 대표 타이틀 */
.fm-collapse-title b,
.fm-scope-card h3,
.fm-notice-card h3,
.fm-faq-side h3{
  font-size:clamp(20px,1.55vw,24px) !important;
  line-height:1.36 !important;
  font-weight:730 !important;
  letter-spacing:-.045em !important;
}

/* 4) 문의 모달 내부 큰 폼 타이틀도 섹션 제목보다 한 단계 아래로 정리 */
.fm-wizard-form-title,
.fm-inquiry-intro h3{
  font-size:clamp(20px,1.6vw,23px) !important;
  line-height:1.36 !important;
  font-weight:730 !important;
  letter-spacing:-.045em !important;
}

/* 5) 섹션 제목은 기존 V3 규정 유지 */
.fm-title h2,
.fm-split-head h2{
  font-size:var(--bt-v3-section-pc) !important;
  line-height:1.28 !important;
  letter-spacing:-.055em !important;
  font-weight:730 !important;
  max-width:min(97%,960px) !important;
}

/* 6) 카드 제목은 계속 카드 제목 단계로 유지 */
.fm-card h3,
.fm-step h3,
.fm-showcase-body h3,
.fm-work-body h3,
.fm-sample-body h3,
.fm-blog-card h3,
.fm-management-item b{
  font-size:var(--bt-v3-card-title-pc) !important;
  line-height:1.42 !important;
  font-weight:700 !important;
}

/* 7) 모바일 패널 타이틀 규정 */
@media (max-width:720px){
  .fm-management-head h3{
    font-size:var(--bt-v3-panel-title-mo) !important;
    line-height:1.36 !important;
    font-weight:740 !important;
    max-width:97% !important;
  }

  .fm-collapse-title b,
  .fm-scope-card h3,
  .fm-notice-card h3,
  .fm-faq-side h3{
    font-size:clamp(18px,5vw,21px) !important;
    line-height:1.36 !important;
    font-weight:720 !important;
  }

  .fm-wizard-form-title,
  .fm-inquiry-intro h3{
    font-size:clamp(18px,5vw,21px) !important;
    line-height:1.36 !important;
    font-weight:720 !important;
  }

  .fm-title h2,
  .fm-split-head h2{
    font-size:var(--bt-v3-section-mo) !important;
    line-height:1.32 !important;
    font-weight:730 !important;
    max-width:97% !important;
  }

  .fm-card h3,
  .fm-step h3,
  .fm-showcase-body h3,
  .fm-work-body h3,
  .fm-sample-body h3,
  .fm-blog-card h3,
  .fm-management-item b{
    font-size:var(--bt-v3-card-title-mo) !important;
    line-height:1.4 !important;
    font-weight:700 !important;
  }
}


/* =========================================================
   MERGED FROM 브랜드소개03.html
   ========================================================= */

/* =========================================================
   LANDINGPAGER FEEDHOME BRAND INTRO SECTION V2
   PATCH 2026-05-18 / BRAND-INTRO-SINGLE-FLOW
   목적:
   - 브랜드소개 + 차별점을 하나의 브랜드 소개 섹션으로 통합
   - 제작 가이드와 중복되는 진행방식 설명은 제외
   - 왼쪽에는 요소가 채워지는 CSS 애니메이션 비주얼
   - 오른쪽에는 핵심 정의/박스 3개 배치
   - feedhome-* / --feedhome-* 네이밍 유지
   - 단일 HTML 내부 CSS
   ========================================================= */

:root{color-scheme:light}
html,body{margin:0;min-height:100%;background:#f8f3ec}
body{font-family:Pretendard,"Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif}
*{box-sizing:border-box}

.feedhome-page{
  --feedhome-wide-container:1240px;
  --feedhome-section-pc:92px;
  --feedhome-section-mo:44px;
  --feedhome-side-pc:36px;
  --feedhome-side-mo:24px;

  --feedhome-bg:#f8f3ec;
  --feedhome-paper:#ffffff;
  --feedhome-soft:#f5efe7;
  --feedhome-soft-2:#eee3d5;
  --feedhome-line:#e2d4c5;
  --feedhome-line-strong:#c7a274;

  --feedhome-title:#333333;
  --feedhome-text:#444444;
  --feedhome-muted:#5f6876;
  --feedhome-deep:#111315;

  --feedhome-primary:#8f4d5a;
  --feedhome-primary-soft:#f6e9ed;
  --feedhome-secondary:#b89262;
  --feedhome-secondary-soft:#fff8ef;
  --feedhome-brown:#5a4334;

  --feedhome-badge-bg:#f1f2f4;
  --feedhome-badge-text:#626b78;
  --feedhome-badge-line:#e2e5e9;

  --feedhome-radius-xl:32px;
  --feedhome-radius-lg:28px;
  --feedhome-radius-md:22px;
  --feedhome-radius-sm:16px;
  --feedhome-shadow:0 16px 40px rgba(35,28,22,.065);
  --feedhome-shadow-soft:0 10px 26px rgba(35,28,22,.045);

  --feedhome-section-title-pc:clamp(30px,2.25vw,38px);
  --feedhome-section-title-mo:clamp(24px,6.3vw,29px);
  --feedhome-panel-title-pc:clamp(25px,2.1vw,34px);
  --feedhome-panel-title-mo:clamp(21px,5.8vw,25px);
  --feedhome-body-pc:16px;
  --feedhome-body-mo:14.5px;
  --feedhome-button-pc:14px;
  --feedhome-button-mo:13.5px;

  min-height:100vh;
  background:var(--feedhome-bg);
  color:var(--feedhome-text);
  font-size:var(--feedhome-body-pc);
  line-height:1.72;
  font-weight:450;
  letter-spacing:-.035em;
  word-break:keep-all;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.feedhome-page *,
.feedhome-page *::before,
.feedhome-page *::after{box-sizing:border-box}
.feedhome-page a{color:inherit;text-decoration:none}
.feedhome-page button{font:inherit}

.feedhome-container-wide{
  width:min(var(--feedhome-wide-container),calc(100% - var(--feedhome-side-pc)));
  margin:0 auto;
}
.feedhome-section{
  padding:var(--feedhome-section-pc) 0;
  background:var(--feedhome-bg);
}

/* =========================================================
   COMMON
   ========================================================= */

.feedhome-section-head{
  max-width:860px;
  margin:0 auto 40px;
  text-align:center;
}
.feedhome-kicker,
.feedhome-mini,
.feedhome-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:fit-content;
  min-height:28px;
  padding:0 11px;
  border:1px solid var(--feedhome-badge-line);
  border-radius:999px;
  background:var(--feedhome-badge-bg);
  color:var(--feedhome-badge-text);
  font-size:11.5px;
  font-weight:760;
  line-height:1;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.feedhome-kicker{
  min-height:34px;
  padding:0 16px;
  margin-bottom:14px;
  border-color:#d7c3ad;
  background:#fffaf5;
  color:#5a4334;
  font-size:12px;
  font-weight:820;
  letter-spacing:.08em;
  box-shadow:0 8px 18px rgba(90,67,52,.06);
}
.feedhome-mini{
  border:0;
  background:transparent;
  padding:0;
  min-height:auto;
  color:var(--feedhome-primary);
  letter-spacing:.1em;
}
.feedhome-section-title{
  max-width:min(97%,960px);
  margin:0 auto;
  color:var(--feedhome-title);
  font-size:var(--feedhome-section-title-pc);
  line-height:1.28;
  font-weight:730;
  letter-spacing:-.055em;
}
.feedhome-section-desc{
  max-width:760px;
  margin:14px auto 0;
  color:var(--feedhome-text);
  font-size:var(--feedhome-body-pc);
  line-height:1.78;
  font-weight:500;
}
.feedhome-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 22px;
  border:1px solid transparent;
  border-radius:999px;
  background:var(--feedhome-deep);
  color:#fff;
  font-size:var(--feedhome-button-pc);
  font-weight:720;
  line-height:1;
  letter-spacing:-.035em;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease;
}
.feedhome-button:hover{transform:translateY(-1px)}
.feedhome-button.is-primary{background:var(--feedhome-primary);border-color:var(--feedhome-primary);color:#fff}
.feedhome-button.is-dark{background:var(--feedhome-deep);border-color:var(--feedhome-deep);color:#fff}

/* =========================================================
   BRAND INTRO MAIN PANEL
   ========================================================= */

.feedhome-brand-main{
  border:1px solid var(--feedhome-line);
  border-radius:var(--feedhome-radius-xl);
  background:var(--feedhome-paper);
  padding:30px;
  box-shadow:var(--feedhome-shadow);
}

.feedhome-brand-main-grid{
  display:grid;
  grid-template-columns:minmax(420px,.94fr) minmax(0,1.06fr);
  gap:34px;
  align-items:center;
}

.feedhome-brand-copy{
  min-width:0;
}

.feedhome-brand-title{
  margin:10px 0 0;
  color:var(--feedhome-title);
  font-size:var(--feedhome-panel-title-pc);
  line-height:1.34;
  font-weight:760;
  letter-spacing:-.052em;
}
.feedhome-brand-title .highlight{
  color:var(--feedhome-primary);
}
.feedhome-brand-desc{
  margin:14px 0 0;
  max-width:650px;
  color:var(--feedhome-text);
  font-size:15px;
  line-height:1.78;
  font-weight:500;
}

/* =========================================================
   CSS ANIMATED VISUAL
   ========================================================= */

.feedhome-brand-visual{
  position:relative;
  min-height:405px;
  border:1px solid #d8c2a9;
  border-radius:26px;
  background:#fffaf5;
  overflow:hidden;
  box-shadow:var(--feedhome-shadow-soft);
}

.feedhome-brand-visual::before{
  content:"";
  position:absolute;
  left:24px;
  right:24px;
  top:24px;
  height:22px;
  border-radius:999px;
  background:#f0e4d6;
  transform-origin:left center;
  animation:feedhomeFillX 1.1s ease both;
}

.feedhome-brand-visual-window{
  position:absolute;
  left:24px;
  right:24px;
  top:70px;
  bottom:24px;
  border:1px solid #ead9c6;
  border-radius:22px;
  background:#fff;
  overflow:hidden;
}

.feedhome-brand-visual-hero{
  position:absolute;
  left:20px;
  right:20px;
  top:20px;
  height:78px;
  border-radius:18px;
  background:#f2e6d8;
  transform-origin:left center;
  animation:feedhomeRise .55s ease .15s both;
}
.feedhome-brand-visual-hero::before{
  content:"";
  position:absolute;
  left:18px;
  top:18px;
  width:42%;
  height:10px;
  border-radius:999px;
  background:#c1a074;
  transform-origin:left center;
  animation:feedhomeFillX .7s ease .42s both;
}
.feedhome-brand-visual-hero::after{
  content:"";
  position:absolute;
  left:18px;
  top:40px;
  width:72%;
  height:8px;
  border-radius:999px;
  background:#d9dee5;
  transform-origin:left center;
  animation:feedhomeFillX .7s ease .55s both;
}

.feedhome-brand-visual-grid{
  position:absolute;
  left:20px;
  right:20px;
  top:118px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.feedhome-brand-visual-card{
  height:78px;
  border:1px solid #ead9c6;
  border-radius:16px;
  background:#fffaf5;
  transform:translateY(12px);
  opacity:0;
  animation:feedhomeCardIn .52s ease both;
}
.feedhome-brand-visual-card:nth-child(1){animation-delay:.72s}
.feedhome-brand-visual-card:nth-child(2){animation-delay:.86s}
.feedhome-brand-visual-card:nth-child(3){animation-delay:1s}
.feedhome-brand-visual-card::before{
  content:"";
  display:block;
  width:48%;
  height:9px;
  margin:17px 0 0 14px;
  border-radius:999px;
  background:#c1a074;
}
.feedhome-brand-visual-card::after{
  content:"";
  display:block;
  width:70%;
  height:7px;
  margin:14px 0 0 14px;
  border-radius:999px;
  background:#d9dee5;
}

.feedhome-brand-visual-flow{
  position:absolute;
  left:20px;
  right:20px;
  top:216px;
  display:grid;
  gap:9px;
}
.feedhome-brand-visual-line{
  height:10px;
  border-radius:999px;
  background:#d9dee5;
  transform-origin:left center;
  animation:feedhomeFillX .62s ease both;
}
.feedhome-brand-visual-line:nth-child(1){width:88%;animation-delay:1.18s}
.feedhome-brand-visual-line:nth-child(2){width:72%;animation-delay:1.28s}
.feedhome-brand-visual-line:nth-child(3){width:54%;animation-delay:1.38s}

.feedhome-brand-visual-cta{
  position:absolute;
  left:20px;
  right:20px;
  bottom:22px;
  height:48px;
  border-radius:999px;
  background:var(--feedhome-primary);
  transform-origin:center center;
  animation:feedhomeCTA .62s ease 1.55s both;
}
.feedhome-brand-visual-cta::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:96px;
  height:9px;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  transform:translate(-50%,-50%);
}

.feedhome-brand-visual-badge{
  position:absolute;
  right:18px;
  top:18px;
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  border-radius:999px;
  background:var(--feedhome-deep);
  color:#fff;
  font-size:12px;
  font-weight:850;
  animation:feedhomePop .42s ease 1.65s both;
}

@keyframes feedhomeFillX{
  from{transform:scaleX(0);opacity:.2}
  to{transform:scaleX(1);opacity:1}
}
@keyframes feedhomeRise{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes feedhomeCardIn{
  to{opacity:1;transform:translateY(0)}
}
@keyframes feedhomeCTA{
  from{opacity:0;transform:scaleX(.72)}
  to{opacity:1;transform:scaleX(1)}
}
@keyframes feedhomePop{
  from{opacity:0;transform:scale(.82)}
  to{opacity:1;transform:scale(1)}
}

/* =========================================================
   RIGHT BOXES
   ========================================================= */

.feedhome-brand-box-list{
  display:grid;
  gap:14px;
  margin-top:24px;
}

.feedhome-brand-box{
  display:grid;
  grid-template-columns:54px minmax(0,1fr);
  gap:15px;
  align-items:start;
  padding:18px;
  border:1px solid var(--feedhome-line);
  border-radius:18px;
  background:#fffaf5;
}
.feedhome-brand-box:nth-child(2){
  background:var(--feedhome-paper);
}
.feedhome-brand-box-icon{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border-radius:15px;
  background:var(--feedhome-soft);
  color:var(--feedhome-brown);
  font-size:16px;
  font-weight:850;
  line-height:1;
}
.feedhome-brand-box.is-featured .feedhome-brand-box-icon{
  background:var(--feedhome-primary-soft);
  color:var(--feedhome-primary);
}
.feedhome-brand-box b{
  display:block;
  color:var(--feedhome-title);
  font-size:16px;
  line-height:1.42;
  font-weight:780;
  letter-spacing:-.04em;
}
.feedhome-brand-box span{
  display:block;
  margin-top:4px;
  color:var(--feedhome-muted);
  font-size:13.4px;
  line-height:1.58;
  font-weight:500;
}

.feedhome-brand-bottom{
  margin-top:22px;
  padding:20px 22px;
  border:1px solid var(--feedhome-line);
  border-radius:22px;
  background:var(--feedhome-paper);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px;
  align-items:center;
}
.feedhome-brand-bottom b{
  display:block;
  margin:0 0 5px;
  color:var(--feedhome-title);
  font-size:17px;
  line-height:1.35;
  font-weight:780;
  letter-spacing:-.04em;
}
.feedhome-brand-bottom p{
  margin:0;
  color:var(--feedhome-text);
  font-size:14px;
  line-height:1.68;
  font-weight:500;
}
.feedhome-brand-bottom .feedhome-button{
  min-width:150px;
  min-height:46px;
  padding:0 20px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1024px){
  .feedhome-brand-main-grid{
    grid-template-columns:1fr;
    gap:26px;
  }
  .feedhome-brand-visual{
    min-height:340px;
  }
}

@media(max-width:720px){
  .feedhome-page{font-size:var(--feedhome-body-mo)}
  .feedhome-container-wide{width:min(100%,calc(100% - var(--feedhome-side-mo)))}
  .feedhome-section{padding:var(--feedhome-section-mo) 0}
  .feedhome-section-head{
    margin-bottom:24px;
    text-align:left;
  }
  .feedhome-kicker{
    min-height:30px;
    padding:0 13px;
    font-size:11px;
  }
  .feedhome-section-title{
    margin-left:0;
    margin-right:0;
    font-size:var(--feedhome-section-title-mo);
    line-height:1.32;
    max-width:97%;
  }
  .feedhome-section-desc{
    margin-left:0;
    margin-right:0;
    font-size:var(--feedhome-body-mo);
    line-height:1.74;
  }

  .feedhome-brand-main{
    padding:22px;
    border-radius:26px;
  }
  .feedhome-brand-main-grid{
    gap:22px;
  }
  .feedhome-brand-title{
    font-size:var(--feedhome-panel-title-mo);
    line-height:1.36;
  }
  .feedhome-brand-desc{
    font-size:14px;
    line-height:1.72;
  }

  .feedhome-brand-visual{
    min-height:280px;
    border-radius:22px;
  }
  .feedhome-brand-visual::before{
    left:18px;
    right:18px;
    top:18px;
    height:18px;
  }
  .feedhome-brand-visual-window{
    left:18px;
    right:18px;
    top:52px;
    bottom:18px;
    border-radius:18px;
  }
  .feedhome-brand-visual-hero{
    left:14px;
    right:14px;
    top:14px;
    height:58px;
    border-radius:15px;
  }
  .feedhome-brand-visual-grid{
    left:14px;
    right:14px;
    top:88px;
    gap:7px;
  }
  .feedhome-brand-visual-card{
    height:58px;
    border-radius:12px;
  }
  .feedhome-brand-visual-flow{
    left:14px;
    right:14px;
    top:164px;
    gap:7px;
  }
  .feedhome-brand-visual-line{
    height:7px;
  }
  .feedhome-brand-visual-cta{
    left:14px;
    right:14px;
    bottom:16px;
    height:40px;
  }
  .feedhome-brand-visual-badge{
    right:13px;
    top:13px;
    width:44px;
    height:44px;
    font-size:10px;
  }

  .feedhome-brand-box{
    grid-template-columns:48px minmax(0,1fr);
    gap:13px;
    padding:16px;
  }
  .feedhome-brand-box-icon{
    width:42px;
    height:42px;
    border-radius:13px;
    font-size:14px;
  }
  .feedhome-brand-box b{
    font-size:15px;
  }
  .feedhome-brand-box span{
    font-size:12.8px;
  }

  .feedhome-brand-bottom{
    grid-template-columns:1fr;
    gap:14px;
    padding:18px;
  }
  .feedhome-brand-bottom b{
    font-size:16px;
  }
  .feedhome-brand-bottom p{
    font-size:13.5px;
  }
  .feedhome-brand-bottom .feedhome-button{
    width:100%;
    min-height:48px;
  }
}

/* =========================================================
   PATCH 2026-05-18 / BRAND INTRO V3 DYNAMIC RADAR VISUAL
   목적:
   - 왼쪽 비주얼을 단순 목업이 아니라 동적인 차트/레이더 차트 애니메이션으로 변경
   - 요소가 하나씩 그려지고 채워지는 느낌 구현
   - 기존 feedhome-* 변수/색감 유지
   ========================================================= */

.feedhome-brand-visual-window{
  background:#fffaf5 !important;
}

.feedhome-brand-dashboard{
  position:absolute;
  inset:18px;
  border:1px solid #ead9c6;
  border-radius:20px;
  background:#fff;
  overflow:hidden;
}

.feedhome-brand-dashboard-head{
  position:absolute;
  left:18px;
  right:18px;
  top:16px;
  height:20px;
  display:flex;
  gap:7px;
  align-items:center;
}

.feedhome-brand-dashboard-head span{
  width:8px;
  height:8px;
  border-radius:999px;
  background:#d8c2a9;
  opacity:0;
  animation:feedhomeDotIn .36s ease forwards;
}

.feedhome-brand-dashboard-head span:nth-child(2){animation-delay:.12s}
.feedhome-brand-dashboard-head span:nth-child(3){animation-delay:.24s}

.feedhome-brand-chart-area{
  position:absolute;
  left:20px;
  right:20px;
  top:50px;
  display:grid;
  grid-template-columns:1fr 112px;
  gap:18px;
  align-items:center;
}

.feedhome-brand-radar{
  position:relative;
  height:178px;
  border:1px solid #ead9c6;
  border-radius:18px;
  background:#fffaf5;
  overflow:hidden;
}

.feedhome-brand-radar svg{
  width:100%;
  height:100%;
  display:block;
}

.feedhome-brand-radar .radar-grid{
  fill:none;
  stroke:#e5d7c8;
  stroke-width:1.4;
  opacity:.95;
}

.feedhome-brand-radar .radar-fill{
  fill:rgba(143,77,90,.16);
  transform-origin:center;
  transform:scale(.2);
  opacity:0;
  animation:feedhomeRadarFill .7s ease .55s forwards;
}

.feedhome-brand-radar .radar-line{
  fill:none;
  stroke:var(--feedhome-primary);
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:520;
  stroke-dashoffset:520;
  animation:feedhomeDrawLine 1.25s ease .38s forwards;
}

.feedhome-brand-radar .radar-dot{
  fill:var(--feedhome-deep);
  opacity:0;
  transform-origin:center;
  animation:feedhomePop .34s ease forwards;
}

.feedhome-brand-radar .dot-1{animation-delay:.7s}
.feedhome-brand-radar .dot-2{animation-delay:.86s}
.feedhome-brand-radar .dot-3{animation-delay:1.02s}
.feedhome-brand-radar .dot-4{animation-delay:1.18s}
.feedhome-brand-radar .dot-5{animation-delay:1.34s}

.feedhome-brand-bars{
  height:178px;
  display:flex;
  align-items:end;
  gap:10px;
  padding:18px 14px;
  border:1px solid #ead9c6;
  border-radius:18px;
  background:#fffaf5;
}

.feedhome-brand-bars span{
  flex:1;
  height:var(--bar-h);
  min-height:18px;
  border-radius:999px 999px 8px 8px;
  background:#d8c2a9;
  transform-origin:bottom;
  transform:scaleY(0);
  animation:feedhomeBarRise .65s ease forwards;
}

.feedhome-brand-bars span:nth-child(1){animation-delay:.95s}
.feedhome-brand-bars span:nth-child(2){animation-delay:1.08s;background:#c1a074}
.feedhome-brand-bars span:nth-child(3){animation-delay:1.21s}
.feedhome-brand-bars span:nth-child(4){animation-delay:1.34s;background:var(--feedhome-primary)}

.feedhome-brand-flowline{
  position:absolute;
  left:20px;
  right:20px;
  top:244px;
  height:76px;
  border:1px solid #ead9c6;
  border-radius:18px;
  background:#fffaf5;
  overflow:hidden;
  padding:8px 14px;
}

.feedhome-brand-flowline svg{
  width:100%;
  height:100%;
  display:block;
}

.feedhome-brand-flowline .flow-path{
  fill:none;
  stroke:var(--feedhome-deep);
  stroke-width:4;
  stroke-linecap:round;
  stroke-dasharray:620;
  stroke-dashoffset:620;
  opacity:.86;
  animation:feedhomeDrawLine 1.1s ease 1.35s forwards;
}

.feedhome-brand-flowline .flow-point{
  fill:var(--feedhome-primary);
  opacity:0;
  animation:feedhomePop .32s ease forwards;
}

.feedhome-brand-flowline .p1{animation-delay:1.55s}
.feedhome-brand-flowline .p2{animation-delay:1.78s}
.feedhome-brand-flowline .p3{animation-delay:2.02s}

.feedhome-brand-metric-row{
  position:absolute;
  left:20px;
  right:146px;
  bottom:18px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}

.feedhome-brand-metric-row .metric-card{
  min-height:44px;
  border:1px solid #ead9c6;
  border-radius:14px;
  background:#fffaf5;
  padding:10px;
  opacity:0;
  transform:translateY(10px);
  animation:feedhomeCardIn .42s ease forwards;
}

.feedhome-brand-metric-row .metric-card:nth-child(1){animation-delay:1.72s}
.feedhome-brand-metric-row .metric-card:nth-child(2){animation-delay:1.84s}
.feedhome-brand-metric-row .metric-card:nth-child(3){animation-delay:1.96s}

.feedhome-brand-metric-row .metric-card b,
.feedhome-brand-metric-row .metric-card em{
  display:block;
  height:7px;
  border-radius:999px;
}

.feedhome-brand-metric-row .metric-card b{
  width:48%;
  background:#c1a074;
}

.feedhome-brand-metric-row .metric-card em{
  width:78%;
  margin-top:8px;
  background:#d9dee5;
}

.feedhome-brand-dashboard .feedhome-brand-visual-cta{
  position:absolute;
  right:20px;
  bottom:18px;
  left:auto;
  width:108px;
  height:44px;
  border-radius:999px;
  background:var(--feedhome-primary);
  transform-origin:center;
  animation:feedhomeCTA .62s ease 2.08s both;
}

.feedhome-brand-dashboard .feedhome-brand-visual-cta::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:54px;
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  transform:translate(-50%,-50%);
}

.feedhome-brand-dashboard .feedhome-brand-visual-badge{
  position:absolute;
  right:18px;
  top:18px;
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:999px;
  background:var(--feedhome-deep);
  color:#fff;
  font-size:11px;
  font-weight:850;
  animation:feedhomePop .42s ease 1.58s both;
}

@keyframes feedhomeDotIn{
  to{opacity:1}
}

@keyframes feedhomeRadarFill{
  to{opacity:1;transform:scale(1)}
}

@keyframes feedhomeDrawLine{
  to{stroke-dashoffset:0}
}

@keyframes feedhomeBarRise{
  to{transform:scaleY(1)}
}

@media(max-width:720px){
  .feedhome-brand-dashboard{
    inset:14px;
    border-radius:18px;
  }

  .feedhome-brand-dashboard-head{
    left:14px;
    right:14px;
    top:12px;
  }

  .feedhome-brand-chart-area{
    left:14px;
    right:14px;
    top:42px;
    grid-template-columns:1fr 82px;
    gap:10px;
  }

  .feedhome-brand-radar,
  .feedhome-brand-bars{
    height:126px;
    border-radius:15px;
  }

  .feedhome-brand-bars{
    gap:6px;
    padding:14px 10px;
  }

  .feedhome-brand-flowline{
    left:14px;
    right:14px;
    top:182px;
    height:54px;
    border-radius:15px;
    padding:6px 10px;
  }

  .feedhome-brand-metric-row{
    display:none;
  }

  .feedhome-brand-dashboard .feedhome-brand-visual-cta{
    left:14px;
    right:14px;
    bottom:14px;
    width:auto;
    height:38px;
  }

  .feedhome-brand-dashboard .feedhome-brand-visual-badge{
    width:40px;
    height:40px;
    right:12px;
    top:12px;
    font-size:10px;
  }
}

@media(prefers-reduced-motion:reduce){
  .feedhome-brand-dashboard *,
  .feedhome-brand-dashboard *::before,
  .feedhome-brand-dashboard *::after{
    animation:none !important;
    transition:none !important;
    opacity:1 !important;
    transform:none !important;
    stroke-dashoffset:0 !important;
  }
}


/* =========================================================
   PATCH 2026-05-18 / BRAND INTRO V4 TWO-SCENE LOOP VISUAL
   목적:
   - 왼쪽 비주얼을 2개 장면(scene-1, scene-2)으로 구성
   - 1 -> 2 -> 1 -> 2 부드럽게 반복
   - scene-1: 레이더/그래프/지표형
   - scene-2: 랜딩 구조/카드/CTA 구성형
   ========================================================= */

.feedhome-brand-visual{
  position:relative;
  min-height:405px;
  border:1px solid #d8c2a9;
  border-radius:26px;
  background:#fffaf5;
  overflow:hidden;
  box-shadow:var(--feedhome-shadow-soft);
}

.feedhome-brand-scene{
  position:absolute;
  inset:0;
  padding:18px;
  opacity:0;
  pointer-events:none;
  animation-duration:12s;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
}

.feedhome-brand-scene::before{
  content:"";
  position:absolute;
  inset:18px;
  border:1px solid #ead9c6;
  border-radius:22px;
  background:#fff;
  box-shadow:0 8px 24px rgba(35,28,22,.035);
}

.feedhome-brand-scene-inner{
  position:relative;
  z-index:1;
  height:100%;
  border-radius:18px;
  overflow:hidden;
}

.scene-1{animation-name:feedhomeScene1Loop;}
.scene-2{animation-name:feedhomeScene2Loop;}

@keyframes feedhomeScene1Loop{
  0%, 5%{opacity:0}
  8%, 45%{opacity:1}
  50%, 100%{opacity:0}
}
@keyframes feedhomeScene2Loop{
  0%, 50%{opacity:0}
  55%, 92%{opacity:1}
  97%, 100%{opacity:0}
}

/* ---------------- scene 1 ---------------- */
.scene-1 .feedhome-scene-topline{
  position:absolute;
  left:6px; right:6px; top:6px;
  height:18px; border-radius:999px;
  background:#f0e4d6;
  transform-origin:left center;
  animation:feedhomeFillX 12s ease-in-out infinite;
}

.scene-1 .feedhome-scene-row{
  position:absolute;
  left:0; right:0; top:38px;
  display:grid;
  grid-template-columns:1fr 112px;
  gap:18px;
  align-items:center;
}

.scene-1 .feedhome-scene-radar{
  position:relative;
  height:178px;
  border:1px solid #ead9c6;
  border-radius:18px;
  background:#fffaf5;
  overflow:hidden;
}
.scene-1 .feedhome-scene-radar svg{width:100%; height:100%; display:block;}
.scene-1 .radar-grid{
  fill:none;
  stroke:#e5d7c8;
  stroke-width:1.4;
  opacity:.95;
}
.scene-1 .radar-fill{
  fill:rgba(143,77,90,.16);
  transform-origin:center;
  transform:scale(.2);
  opacity:0;
  animation:feedhomeScene1RadarFill 12s ease-in-out infinite;
}
.scene-1 .radar-line{
  fill:none;
  stroke:var(--feedhome-primary);
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:520;
  stroke-dashoffset:520;
  animation:feedhomeScene1Draw 12s ease-in-out infinite;
}
.scene-1 .radar-dot{
  fill:var(--feedhome-deep);
  opacity:0;
  transform:scale(.7);
}
.scene-1 .dot-1{animation:feedhomeScene1Dot1 12s ease-in-out infinite;}
.scene-1 .dot-2{animation:feedhomeScene1Dot2 12s ease-in-out infinite;}
.scene-1 .dot-3{animation:feedhomeScene1Dot3 12s ease-in-out infinite;}
.scene-1 .dot-4{animation:feedhomeScene1Dot4 12s ease-in-out infinite;}
.scene-1 .dot-5{animation:feedhomeScene1Dot5 12s ease-in-out infinite;}

.scene-1 .feedhome-scene-bars{
  height:178px;
  display:flex;
  align-items:end;
  gap:10px;
  padding:18px 14px;
  border:1px solid #ead9c6;
  border-radius:18px;
  background:#fffaf5;
}
.scene-1 .feedhome-scene-bars span{
  flex:1;
  height:var(--bar-h);
  min-height:18px;
  border-radius:999px 999px 8px 8px;
  background:#d8c2a9;
  transform-origin:bottom;
  transform:scaleY(0);
}
.scene-1 .feedhome-scene-bars span:nth-child(1){animation:feedhomeScene1Bar1 12s ease-in-out infinite;}
.scene-1 .feedhome-scene-bars span:nth-child(2){animation:feedhomeScene1Bar2 12s ease-in-out infinite;background:#c1a074;}
.scene-1 .feedhome-scene-bars span:nth-child(3){animation:feedhomeScene1Bar3 12s ease-in-out infinite;}
.scene-1 .feedhome-scene-bars span:nth-child(4){animation:feedhomeScene1Bar4 12s ease-in-out infinite;background:var(--feedhome-primary);}

.scene-1 .feedhome-scene-flow{
  position:absolute;
  left:0; right:0; top:232px;
  height:76px;
  border:1px solid #ead9c6;
  border-radius:18px;
  background:#fffaf5;
  overflow:hidden;
  padding:8px 14px;
}
.scene-1 .feedhome-scene-flow svg{width:100%; height:100%; display:block;}
.scene-1 .flow-path{
  fill:none;
  stroke:var(--feedhome-deep);
  stroke-width:4;
  stroke-linecap:round;
  stroke-dasharray:620;
  stroke-dashoffset:620;
  opacity:.86;
  animation:feedhomeScene1Flow 12s ease-in-out infinite;
}
.scene-1 .flow-point{
  fill:var(--feedhome-primary);
  opacity:0;
  transform:scale(.7);
}
.scene-1 .p1{animation:feedhomeScene1P1 12s ease-in-out infinite;}
.scene-1 .p2{animation:feedhomeScene1P2 12s ease-in-out infinite;}
.scene-1 .p3{animation:feedhomeScene1P3 12s ease-in-out infinite;}

.scene-1 .feedhome-scene-metrics{
  position:absolute;
  left:0; right:128px; bottom:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}
.scene-1 .metric-card{
  min-height:44px;
  border:1px solid #ead9c6;
  border-radius:14px;
  background:#fffaf5;
  padding:10px;
  opacity:0;
  transform:translateY(10px);
}
.scene-1 .metric-card:nth-child(1){animation:feedhomeScene1Metric1 12s ease-in-out infinite;}
.scene-1 .metric-card:nth-child(2){animation:feedhomeScene1Metric2 12s ease-in-out infinite;}
.scene-1 .metric-card:nth-child(3){animation:feedhomeScene1Metric3 12s ease-in-out infinite;}
.scene-1 .metric-card b,
.scene-1 .metric-card em{
  display:block; height:7px; border-radius:999px;
}
.scene-1 .metric-card b{width:48%; background:#c1a074;}
.scene-1 .metric-card em{width:78%; margin-top:8px; background:#d9dee5;}

.scene-1 .feedhome-scene-cta{
  position:absolute;
  right:0; bottom:0;
  width:108px;
  height:44px;
  border-radius:999px;
  background:var(--feedhome-primary);
  opacity:0;
  transform:scaleX(.72);
  transform-origin:center;
  animation:feedhomeScene1CTA 12s ease-in-out infinite;
}
.scene-1 .feedhome-scene-cta::before{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:54px; height:8px;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  transform:translate(-50%,-50%);
}
.scene-1 .feedhome-scene-badge{
  position:absolute;
  right:6px; top:6px;
  display:grid; place-items:center;
  width:48px; height:48px;
  border-radius:999px;
  background:var(--feedhome-deep);
  color:#fff;
  font-size:11px;
  font-weight:850;
  opacity:0;
  transform:scale(.82);
  animation:feedhomeScene1Badge 12s ease-in-out infinite;
}

/* scene-1 timeline */
@keyframes feedhomeScene1Draw{
  0%, 10%{stroke-dashoffset:520}
  17%, 42%{stroke-dashoffset:0}
  50%, 100%{stroke-dashoffset:0}
}
@keyframes feedhomeScene1RadarFill{
  0%, 14%{opacity:0; transform:scale(.2)}
  20%, 42%{opacity:1; transform:scale(1)}
  50%, 100%{opacity:1; transform:scale(1)}
}
@keyframes feedhomeScene1Dot1{0%,18%{opacity:0;transform:scale(.7)}20%,42%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}
@keyframes feedhomeScene1Dot2{0%,19.5%{opacity:0;transform:scale(.7)}21.5%,42%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}
@keyframes feedhomeScene1Dot3{0%,21%{opacity:0;transform:scale(.7)}23%,42%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}
@keyframes feedhomeScene1Dot4{0%,22.5%{opacity:0;transform:scale(.7)}24.5%,42%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}
@keyframes feedhomeScene1Dot5{0%,24%{opacity:0;transform:scale(.7)}26%,42%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}
@keyframes feedhomeScene1Bar1{0%,20%{transform:scaleY(0)}23%,42%{transform:scaleY(1)}100%{transform:scaleY(1)}}
@keyframes feedhomeScene1Bar2{0%,22%{transform:scaleY(0)}25%,42%{transform:scaleY(1)}100%{transform:scaleY(1)}}
@keyframes feedhomeScene1Bar3{0%,24%{transform:scaleY(0)}27%,42%{transform:scaleY(1)}100%{transform:scaleY(1)}}
@keyframes feedhomeScene1Bar4{0%,26%{transform:scaleY(0)}29%,42%{transform:scaleY(1)}100%{transform:scaleY(1)}}
@keyframes feedhomeScene1Flow{0%,24%{stroke-dashoffset:620}31%,42%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
@keyframes feedhomeScene1P1{0%,28%{opacity:0;transform:scale(.7)}32%,42%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}
@keyframes feedhomeScene1P2{0%,30%{opacity:0;transform:scale(.7)}34%,42%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}
@keyframes feedhomeScene1P3{0%,32%{opacity:0;transform:scale(.7)}36%,42%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}
@keyframes feedhomeScene1Metric1{0%,30%{opacity:0;transform:translateY(10px)}35%,42%{opacity:1;transform:translateY(0)}100%{opacity:1;transform:translateY(0)}}
@keyframes feedhomeScene1Metric2{0%,32%{opacity:0;transform:translateY(10px)}37%,42%{opacity:1;transform:translateY(0)}100%{opacity:1;transform:translateY(0)}}
@keyframes feedhomeScene1Metric3{0%,34%{opacity:0;transform:translateY(10px)}39%,42%{opacity:1;transform:translateY(0)}100%{opacity:1;transform:translateY(0)}}
@keyframes feedhomeScene1CTA{0%,34%{opacity:0;transform:scaleX(.72)}40%,42%{opacity:1;transform:scaleX(1)}100%{opacity:1;transform:scaleX(1)}}
@keyframes feedhomeScene1Badge{0%,28%{opacity:0;transform:scale(.82)}34%,42%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}

/* ---------------- scene 2 ---------------- */
.scene-2 .feedhome-scene2-header{
  position:absolute;
  left:0; right:0; top:0;
  display:flex; justify-content:space-between;
}
.scene-2 .feedhome-scene2-header span{
  width:112px; height:16px; border-radius:999px; background:#efe2d4;
  transform-origin:left center; transform:scaleX(0);
}
.scene-2 .feedhome-scene2-header span:nth-child(1){animation:feedhomeScene2Header1 12s ease-in-out infinite;}
.scene-2 .feedhome-scene2-header span:nth-child(2){animation:feedhomeScene2Header2 12s ease-in-out infinite;}

.scene-2 .feedhome-scene2-hero{
  position:absolute;
  left:0; right:0; top:34px;
  height:86px; border-radius:18px;
  background:#f2e6d8;
  opacity:0; transform:translateY(10px);
  animation:feedhomeScene2Hero 12s ease-in-out infinite;
}
.scene-2 .feedhome-scene2-hero-title,
.scene-2 .feedhome-scene2-hero-subtitle{
  position:absolute; left:18px; border-radius:999px;
  transform-origin:left center;
}
.scene-2 .feedhome-scene2-hero-title{
  top:20px; width:44%; height:10px; background:#c1a074;
  transform:scaleX(0); animation:feedhomeScene2HeroTitle 12s ease-in-out infinite;
}
.scene-2 .feedhome-scene2-hero-subtitle{
  top:44px; width:70%; height:8px; background:#d9dee5;
  transform:scaleX(0); animation:feedhomeScene2HeroSub 12s ease-in-out infinite;
}

.scene-2 .feedhome-scene2-card-grid{
  position:absolute;
  left:0; right:0; top:136px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.scene-2 .scene2-card{
  height:90px;
  border:1px solid #ead9c6;
  border-radius:16px;
  background:#fffaf5;
  opacity:0;
  transform:translateY(10px);
}
.scene-2 .scene2-card:nth-child(1){animation:feedhomeScene2Card1 12s ease-in-out infinite;}
.scene-2 .scene2-card:nth-child(2){animation:feedhomeScene2Card2 12s ease-in-out infinite;}
.scene-2 .scene2-card:nth-child(3){animation:feedhomeScene2Card3 12s ease-in-out infinite;}
.scene-2 .scene2-card::before{
  content:"";
  display:block;
  width:42%; height:8px;
  margin:16px 0 0 12px;
  border-radius:999px;
  background:#c1a074;
}
.scene-2 .scene2-card::after{
  content:"";
  display:block;
  width:68%; height:7px;
  margin:12px 0 0 12px;
  border-radius:999px;
  background:#d9dee5;
}

.scene-2 .feedhome-scene2-info-lines{
  position:absolute;
  left:0; right:0; top:238px;
  display:grid; gap:8px;
}
.scene-2 .feedhome-scene2-info-lines span{
  height:9px; border-radius:999px; background:#d9dee5;
  transform-origin:left center; transform:scaleX(0);
}
.scene-2 .feedhome-scene2-info-lines span:nth-child(1){width:86%; animation:feedhomeScene2Line1 12s ease-in-out infinite;}
.scene-2 .feedhome-scene2-info-lines span:nth-child(2){width:66%; animation:feedhomeScene2Line2 12s ease-in-out infinite;}
.scene-2 .feedhome-scene2-info-lines span:nth-child(3){width:48%; animation:feedhomeScene2Line3 12s ease-in-out infinite;}

.scene-2 .feedhome-scene2-bottom-cta{
  position:absolute;
  left:0; right:0; bottom:0;
  height:48px; border-radius:999px; background:var(--feedhome-primary);
  opacity:0; transform:scaleX(.72);
  animation:feedhomeScene2CTA 12s ease-in-out infinite;
}
.scene-2 .feedhome-scene2-bottom-cta::before{
  content:"";
  position:absolute; left:50%; top:50%;
  width:92px; height:9px; border-radius:999px;
  background:rgba(255,255,255,.72);
  transform:translate(-50%,-50%);
}

/* scene-2 timeline */
@keyframes feedhomeScene2Header1{0%,56%{transform:scaleX(0)}60%,90%{transform:scaleX(1)}100%{transform:scaleX(1)}}
@keyframes feedhomeScene2Header2{0%,58%{transform:scaleX(0)}62%,90%{transform:scaleX(1)}100%{transform:scaleX(1)}}
@keyframes feedhomeScene2Hero{0%,58%{opacity:0;transform:translateY(10px)}64%,90%{opacity:1;transform:translateY(0)}100%{opacity:1;transform:translateY(0)}}
@keyframes feedhomeScene2HeroTitle{0%,64%{transform:scaleX(0)}68%,90%{transform:scaleX(1)}100%{transform:scaleX(1)}}
@keyframes feedhomeScene2HeroSub{0%,66%{transform:scaleX(0)}70%,90%{transform:scaleX(1)}100%{transform:scaleX(1)}}
@keyframes feedhomeScene2Card1{0%,66%{opacity:0;transform:translateY(10px)}71%,90%{opacity:1;transform:translateY(0)}100%{opacity:1;transform:translateY(0)}}
@keyframes feedhomeScene2Card2{0%,68%{opacity:0;transform:translateY(10px)}73%,90%{opacity:1;transform:translateY(0)}100%{opacity:1;transform:translateY(0)}}
@keyframes feedhomeScene2Card3{0%,70%{opacity:0;transform:translateY(10px)}75%,90%{opacity:1;transform:translateY(0)}100%{opacity:1;transform:translateY(0)}}
@keyframes feedhomeScene2Line1{0%,72%{transform:scaleX(0)}77%,90%{transform:scaleX(1)}100%{transform:scaleX(1)}}
@keyframes feedhomeScene2Line2{0%,74%{transform:scaleX(0)}79%,90%{transform:scaleX(1)}100%{transform:scaleX(1)}}
@keyframes feedhomeScene2Line3{0%,76%{transform:scaleX(0)}81%,90%{transform:scaleX(1)}100%{transform:scaleX(1)}}
@keyframes feedhomeScene2CTA{0%,78%{opacity:0;transform:scaleX(.72)}84%,90%{opacity:1;transform:scaleX(1)}100%{opacity:1;transform:scaleX(1)}}

@media(max-width:720px){
  .feedhome-brand-visual{
    min-height:280px;
    border-radius:22px;
  }
  .feedhome-brand-scene{padding:14px}
  .feedhome-brand-scene::before{
    inset:14px;
    border-radius:18px;
  }

  .scene-1 .feedhome-scene-topline{left:0; right:0; top:0; height:14px;}
  .scene-1 .feedhome-scene-row{
    top:28px;
    grid-template-columns:1fr 82px;
    gap:10px;
  }
  .scene-1 .feedhome-scene-radar,
  .scene-1 .feedhome-scene-bars{
    height:122px;
    border-radius:15px;
  }
  .scene-1 .feedhome-scene-bars{gap:6px; padding:12px 8px;}
  .scene-1 .feedhome-scene-flow{
    top:158px;
    height:46px;
    border-radius:14px;
    padding:5px 8px;
  }
  .scene-1 .feedhome-scene-metrics{display:none;}
  .scene-1 .feedhome-scene-cta{
    left:0; right:0; width:auto;
    bottom:0; height:36px;
  }
  .scene-1 .feedhome-scene-badge{
    width:40px; height:40px; right:0; top:0; font-size:10px;
  }

  .scene-2 .feedhome-scene2-header span{width:82px; height:12px;}
  .scene-2 .feedhome-scene2-hero{
    top:24px; height:60px; border-radius:15px;
  }
  .scene-2 .feedhome-scene2-hero-title{top:14px; left:14px; height:8px;}
  .scene-2 .feedhome-scene2-hero-subtitle{top:34px; left:14px; height:6px;}
  .scene-2 .feedhome-scene2-card-grid{
    top:94px;
    gap:7px;
  }
  .scene-2 .scene2-card{
    height:64px;
    border-radius:12px;
  }
  .scene-2 .feedhome-scene2-info-lines{
    top:168px;
    gap:6px;
  }
  .scene-2 .feedhome-scene2-info-lines span{height:7px;}
  .scene-2 .feedhome-scene2-bottom-cta{
    bottom:0; height:36px;
  }
}

@media(prefers-reduced-motion:reduce){
  .feedhome-brand-scene,
  .feedhome-brand-scene *{
    animation:none !important;
    transition:none !important;
  }
  .feedhome-brand-scene{opacity:1 !important}
  .scene-2{display:none}
}


/* =========================================================
   PATCH 2026-05-18 / BRAND INTRO V4.1 SMOOTH CONTINUOUS LOOP
   목적:
   - 장면 전환 시 빈 화면 지속 시간 제거
   - scene-1 <-> scene-2가 겹치며 자연스럽게 crossfade 되도록 조정
   - 다음 장면이 완전히 빈 상태에서 시작하지 않고, 일부 그려진 상태에서 이어지도록 보정
   - 기존 12초 루프 유지
   ========================================================= */

/* 장면 전환: 빈 구간 없이 겹쳐서 페이드 */
@keyframes feedhomeScene1Loop{
  0%, 42%{opacity:1}
  48%, 92%{opacity:0}
  96%, 100%{opacity:1}
}
@keyframes feedhomeScene2Loop{
  0%, 42%{opacity:0}
  48%, 92%{opacity:1}
  96%, 100%{opacity:0}
}

/* scene-1: 완전 빈 상태가 아니라 일부 그려진 상태에서 시작 */
@keyframes feedhomeScene1Draw{
  0%{stroke-dashoffset:260}
  14%, 42%{stroke-dashoffset:0}
  56%{stroke-dashoffset:520}
  92%{stroke-dashoffset:320}
  100%{stroke-dashoffset:260}
}
@keyframes feedhomeScene1RadarFill{
  0%{opacity:.42;transform:scale(.72)}
  14%, 42%{opacity:1;transform:scale(1)}
  56%{opacity:0;transform:scale(.35)}
  92%{opacity:.32;transform:scale(.65)}
  100%{opacity:.42;transform:scale(.72)}
}
@keyframes feedhomeScene1Dot1{
  0%{opacity:.55;transform:scale(.82)}
  10%,42%{opacity:1;transform:scale(1)}
  56%{opacity:0;transform:scale(.7)}
  92%{opacity:.4;transform:scale(.76)}
  100%{opacity:.55;transform:scale(.82)}
}
@keyframes feedhomeScene1Dot2{
  0%{opacity:.45;transform:scale(.78)}
  12%,42%{opacity:1;transform:scale(1)}
  56%{opacity:0;transform:scale(.7)}
  92%{opacity:.34;transform:scale(.74)}
  100%{opacity:.45;transform:scale(.78)}
}
@keyframes feedhomeScene1Dot3{
  0%{opacity:.35;transform:scale(.76)}
  14%,42%{opacity:1;transform:scale(1)}
  56%{opacity:0;transform:scale(.7)}
  92%{opacity:.28;transform:scale(.72)}
  100%{opacity:.35;transform:scale(.76)}
}
@keyframes feedhomeScene1Dot4{
  0%{opacity:.3;transform:scale(.74)}
  16%,42%{opacity:1;transform:scale(1)}
  56%{opacity:0;transform:scale(.7)}
  92%{opacity:.24;transform:scale(.72)}
  100%{opacity:.3;transform:scale(.74)}
}
@keyframes feedhomeScene1Dot5{
  0%{opacity:.28;transform:scale(.72)}
  18%,42%{opacity:1;transform:scale(1)}
  56%{opacity:0;transform:scale(.7)}
  92%{opacity:.22;transform:scale(.7)}
  100%{opacity:.28;transform:scale(.72)}
}

@keyframes feedhomeScene1Bar1{
  0%{transform:scaleY(.28)}
  14%,42%{transform:scaleY(1)}
  56%{transform:scaleY(0)}
  92%{transform:scaleY(.2)}
  100%{transform:scaleY(.28)}
}
@keyframes feedhomeScene1Bar2{
  0%{transform:scaleY(.36)}
  16%,42%{transform:scaleY(1)}
  56%{transform:scaleY(0)}
  92%{transform:scaleY(.26)}
  100%{transform:scaleY(.36)}
}
@keyframes feedhomeScene1Bar3{
  0%{transform:scaleY(.24)}
  18%,42%{transform:scaleY(1)}
  56%{transform:scaleY(0)}
  92%{transform:scaleY(.18)}
  100%{transform:scaleY(.24)}
}
@keyframes feedhomeScene1Bar4{
  0%{transform:scaleY(.42)}
  20%,42%{transform:scaleY(1)}
  56%{transform:scaleY(0)}
  92%{transform:scaleY(.32)}
  100%{transform:scaleY(.42)}
}

@keyframes feedhomeScene1Flow{
  0%{stroke-dashoffset:300}
  18%,42%{stroke-dashoffset:0}
  56%{stroke-dashoffset:620}
  92%{stroke-dashoffset:360}
  100%{stroke-dashoffset:300}
}
@keyframes feedhomeScene1P1{
  0%{opacity:.5;transform:scale(.82)}
  20%,42%{opacity:1;transform:scale(1)}
  56%{opacity:0;transform:scale(.7)}
  92%{opacity:.4;transform:scale(.78)}
  100%{opacity:.5;transform:scale(.82)}
}
@keyframes feedhomeScene1P2{
  0%{opacity:.36;transform:scale(.78)}
  22%,42%{opacity:1;transform:scale(1)}
  56%{opacity:0;transform:scale(.7)}
  92%{opacity:.28;transform:scale(.74)}
  100%{opacity:.36;transform:scale(.78)}
}
@keyframes feedhomeScene1P3{
  0%{opacity:.3;transform:scale(.74)}
  24%,42%{opacity:1;transform:scale(1)}
  56%{opacity:0;transform:scale(.7)}
  92%{opacity:.22;transform:scale(.72)}
  100%{opacity:.3;transform:scale(.74)}
}

@keyframes feedhomeScene1Metric1{
  0%{opacity:.6;transform:translateY(4px)}
  20%,42%{opacity:1;transform:translateY(0)}
  56%{opacity:0;transform:translateY(10px)}
  92%{opacity:.45;transform:translateY(6px)}
  100%{opacity:.6;transform:translateY(4px)}
}
@keyframes feedhomeScene1Metric2{
  0%{opacity:.48;transform:translateY(5px)}
  22%,42%{opacity:1;transform:translateY(0)}
  56%{opacity:0;transform:translateY(10px)}
  92%{opacity:.36;transform:translateY(7px)}
  100%{opacity:.48;transform:translateY(5px)}
}
@keyframes feedhomeScene1Metric3{
  0%{opacity:.38;transform:translateY(6px)}
  24%,42%{opacity:1;transform:translateY(0)}
  56%{opacity:0;transform:translateY(10px)}
  92%{opacity:.28;transform:translateY(8px)}
  100%{opacity:.38;transform:translateY(6px)}
}
@keyframes feedhomeScene1CTA{
  0%{opacity:.65;transform:scaleX(.82)}
  25%,42%{opacity:1;transform:scaleX(1)}
  56%{opacity:0;transform:scaleX(.72)}
  92%{opacity:.5;transform:scaleX(.78)}
  100%{opacity:.65;transform:scaleX(.82)}
}
@keyframes feedhomeScene1Badge{
  0%{opacity:.85;transform:scale(.92)}
  20%,42%{opacity:1;transform:scale(1)}
  56%{opacity:0;transform:scale(.82)}
  92%{opacity:.68;transform:scale(.88)}
  100%{opacity:.85;transform:scale(.92)}
}

/* scene-2: 페이드 인될 때 일부 그려진 상태에서 이어짐 */
@keyframes feedhomeScene2Header1{
  0%,38%{transform:scaleX(0)}
  45%{transform:scaleX(.38)}
  56%,92%{transform:scaleX(1)}
  100%{transform:scaleX(0)}
}
@keyframes feedhomeScene2Header2{
  0%,38%{transform:scaleX(0)}
  45%{transform:scaleX(.26)}
  58%,92%{transform:scaleX(1)}
  100%{transform:scaleX(0)}
}
@keyframes feedhomeScene2Hero{
  0%,38%{opacity:0;transform:translateY(10px)}
  45%{opacity:.46;transform:translateY(5px)}
  58%,92%{opacity:1;transform:translateY(0)}
  100%{opacity:0;transform:translateY(10px)}
}
@keyframes feedhomeScene2HeroTitle{
  0%,38%{transform:scaleX(0)}
  45%{transform:scaleX(.32)}
  62%,92%{transform:scaleX(1)}
  100%{transform:scaleX(0)}
}
@keyframes feedhomeScene2HeroSub{
  0%,38%{transform:scaleX(0)}
  45%{transform:scaleX(.24)}
  64%,92%{transform:scaleX(1)}
  100%{transform:scaleX(0)}
}
@keyframes feedhomeScene2Card1{
  0%,40%{opacity:0;transform:translateY(10px)}
  46%{opacity:.42;transform:translateY(5px)}
  66%,92%{opacity:1;transform:translateY(0)}
  100%{opacity:0;transform:translateY(10px)}
}
@keyframes feedhomeScene2Card2{
  0%,40%{opacity:0;transform:translateY(10px)}
  46%{opacity:.32;transform:translateY(6px)}
  69%,92%{opacity:1;transform:translateY(0)}
  100%{opacity:0;transform:translateY(10px)}
}
@keyframes feedhomeScene2Card3{
  0%,40%{opacity:0;transform:translateY(10px)}
  46%{opacity:.24;transform:translateY(7px)}
  72%,92%{opacity:1;transform:translateY(0)}
  100%{opacity:0;transform:translateY(10px)}
}
@keyframes feedhomeScene2Line1{
  0%,42%{transform:scaleX(0)}
  48%{transform:scaleX(.28)}
  76%,92%{transform:scaleX(1)}
  100%{transform:scaleX(0)}
}
@keyframes feedhomeScene2Line2{
  0%,42%{transform:scaleX(0)}
  48%{transform:scaleX(.2)}
  78%,92%{transform:scaleX(1)}
  100%{transform:scaleX(0)}
}
@keyframes feedhomeScene2Line3{
  0%,42%{transform:scaleX(0)}
  48%{transform:scaleX(.14)}
  80%,92%{transform:scaleX(1)}
  100%{transform:scaleX(0)}
}
@keyframes feedhomeScene2CTA{
  0%,42%{opacity:0;transform:scaleX(.72)}
  50%{opacity:.45;transform:scaleX(.82)}
  82%,92%{opacity:1;transform:scaleX(1)}
  100%{opacity:0;transform:scaleX(.72)}
}


/* =========================================================
   PATCH 2026-05-18 / BRAND INTRO V4.2 TITLE + NUMBER BADGE
   목적:
   - 상단 제목을 "랜딩페이저는?"으로 간결화
   - "서비스" 표현 반복을 줄이기 위해 상단 설명 문구를 제작 방식으로 정리
   - 오른쪽 핵심 박스 1/2/3 숫자 배지의 크기와 중앙 정렬 개선
   ========================================================= */

.feedhome-brand-box{
  grid-template-columns:60px minmax(0,1fr) !important;
  align-items:center !important;
  gap:16px !important;
}

.feedhome-brand-box-icon{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  justify-self:center !important;
  align-self:center !important;
  width:52px !important;
  height:52px !important;
  min-width:52px !important;
  min-height:52px !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:16px !important;
  background:#f1e8dd !important;
  color:#6a4b37 !important;
  font-size:18px !important;
  font-weight:850 !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  text-align:center !important;
  text-indent:0 !important;
}

.feedhome-brand-box.is-featured .feedhome-brand-box-icon{
  background:var(--feedhome-primary-soft) !important;
  color:var(--feedhome-primary) !important;
}

@media(max-width:720px){
  .feedhome-brand-box{
    grid-template-columns:54px minmax(0,1fr) !important;
    gap:14px !important;
  }

  .feedhome-brand-box-icon{
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
    min-height:48px !important;
    font-size:16px !important;
    border-radius:15px !important;
  }
}


/* =========================================================
   PATCH 2026-05-18 / BRAND INTRO V4.3 COPY TUNING
   목적:
   - 상단 설명 문구를 "제작 방식"보다 명확한 "기획·설계·제작·운영관리" 문장으로 정리
   - 오른쪽 정의 문구도 "정리합니다"에서 "설계합니다"로 보정
   보호:
   - 기존 2장면 반복 애니메이션 유지
   - 숫자 배지 보정 유지
   ========================================================= */


/* =========================================================
   PATCH 2026-05-18 / BRAND INTRO V4.4 BRAND COPY FIX
   목적:
   - "랜딩페이저는 서비스입니다"처럼 브랜드명이 서비스 설명으로 끝나는 어색함 보정
   - "원페이지 전문 브랜드"로 정리해 브랜드명 문맥을 자연스럽게 변경
   보호:
   - 기존 2장면 반복 애니메이션 유지
   - 숫자 배지 보정 유지
   ========================================================= */


/* =========================================================
   MERGED FROM 제작가이드07.html
   ========================================================= */

/* =========================================================
   LANDINGPAGER FEEDHOME PRODUCTION GUIDE SECTION V2.1 INLINE IMAGES
   PATCH 2026-05-18 / GUIDE-SERVICE-TYPE-PROCESS
   목적:
   - 가격정책 섹션 디자인/CSS 규칙을 참고한 제작 가이드 섹션 시안
   - 랜딩페이저 정의, 서비스 방식, 제작 유형, 진행방식을 한 섹션으로 통합
   - 모든 CSS를 단일 HTML 내부 포함
   - feedhome-* / --feedhome-* 네이밍 유지
   - 섹션/카드/모달 그라데이션 금지
   ========================================================= */

:root{color-scheme:light}
html,body{margin:0;min-height:100%;background:#f8f3ec}
body{font-family:Pretendard,"Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif}
*{box-sizing:border-box}

.feedhome-page{
  --feedhome-wide-container:1240px;
  --feedhome-section-pc:92px;
  --feedhome-section-mo:44px;
  --feedhome-side-pc:36px;
  --feedhome-side-mo:24px;

  --feedhome-bg:#f8f3ec;
  --feedhome-paper:#ffffff;
  --feedhome-soft:#f5efe7;
  --feedhome-soft-2:#eee3d5;
  --feedhome-line:#e2d4c5;
  --feedhome-line-strong:#c7a274;

  --feedhome-title:#333333;
  --feedhome-text:#444444;
  --feedhome-muted:#5f6876;
  --feedhome-deep:#111315;

  --feedhome-primary:#8f4d5a;
  --feedhome-primary-soft:#f6e9ed;
  --feedhome-secondary:#b89262;
  --feedhome-secondary-soft:#fff8ef;
  --feedhome-brown:#5a4334;

  --feedhome-badge-bg:#f1f2f4;
  --feedhome-badge-text:#626b78;
  --feedhome-badge-line:#e2e5e9;

  --feedhome-radius-xl:32px;
  --feedhome-radius-lg:28px;
  --feedhome-radius-md:22px;
  --feedhome-radius-sm:16px;
  --feedhome-shadow:0 16px 40px rgba(35,28,22,.065);
  --feedhome-shadow-soft:0 10px 26px rgba(35,28,22,.045);

  --feedhome-section-title-pc:clamp(30px,2.25vw,38px);
  --feedhome-section-title-mo:clamp(24px,6.3vw,29px);
  --feedhome-panel-title-pc:clamp(24px,2vw,32px);
  --feedhome-panel-title-mo:clamp(21px,5.8vw,25px);
  --feedhome-body-pc:16px;
  --feedhome-body-mo:14.5px;
  --feedhome-button-pc:14px;
  --feedhome-button-mo:13.5px;

  min-height:100vh;
  background:var(--feedhome-bg);
  color:var(--feedhome-text);
  font-size:var(--feedhome-body-pc);
  line-height:1.72;
  font-weight:450;
  letter-spacing:-.035em;
  word-break:keep-all;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.feedhome-page *,
.feedhome-page *::before,
.feedhome-page *::after{box-sizing:border-box}
.feedhome-page a{color:inherit;text-decoration:none}
.feedhome-page button{font:inherit}
.feedhome-page img{display:block;max-width:100%}

.feedhome-container-wide{
  width:min(var(--feedhome-wide-container),calc(100% - var(--feedhome-side-pc)));
  margin:0 auto;
}
.feedhome-section{
  padding:var(--feedhome-section-pc) 0;
  background:var(--feedhome-bg);
}

/* =========================================================
   SECTION HEAD
   ========================================================= */

.feedhome-section-head{
  max-width:860px;
  margin:0 auto 40px;
  text-align:center;
}
.feedhome-kicker,
.feedhome-mini,
.feedhome-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:fit-content;
  min-height:28px;
  padding:0 11px;
  border:1px solid var(--feedhome-badge-line);
  border-radius:999px;
  background:var(--feedhome-badge-bg);
  color:var(--feedhome-badge-text);
  font-size:11.5px;
  font-weight:760;
  line-height:1;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.feedhome-kicker{
  min-height:34px;
  padding:0 16px;
  margin-bottom:14px;
  border-color:#d7c3ad;
  background:#fffaf5;
  color:#5a4334;
  font-size:12px;
  font-weight:820;
  letter-spacing:.08em;
  box-shadow:0 8px 18px rgba(90,67,52,.06);
}
.feedhome-mini{
  border:0;
  background:transparent;
  padding:0;
  min-height:auto;
  color:var(--feedhome-primary);
  letter-spacing:.1em;
}
.feedhome-section-title{
  max-width:min(97%,960px);
  margin:0 auto;
  color:var(--feedhome-title);
  font-size:var(--feedhome-section-title-pc);
  line-height:1.28;
  font-weight:730;
  letter-spacing:-.055em;
}
.feedhome-section-desc{
  max-width:760px;
  margin:14px auto 0;
  color:var(--feedhome-text);
  font-size:var(--feedhome-body-pc);
  line-height:1.78;
  font-weight:500;
}

/* =========================================================
   BUTTON
   ========================================================= */

.feedhome-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 22px;
  border:1px solid transparent;
  border-radius:999px;
  background:var(--feedhome-deep);
  color:#fff;
  font-size:var(--feedhome-button-pc);
  font-weight:720;
  line-height:1;
  letter-spacing:-.035em;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease;
}
.feedhome-button:hover{transform:translateY(-1px)}
.feedhome-button.is-primary{background:var(--feedhome-primary);border-color:var(--feedhome-primary);color:#fff}
.feedhome-button.is-dark{background:var(--feedhome-deep);border-color:var(--feedhome-deep);color:#fff}
.feedhome-button.is-outline{background:var(--feedhome-paper);border-color:var(--feedhome-line);color:var(--feedhome-title)}

/* =========================================================
   GUIDE INTRO
   ========================================================= */

.feedhome-guide-intro{
  border:1px solid var(--feedhome-line);
  border-radius:var(--feedhome-radius-xl);
  background:var(--feedhome-paper);
  padding:30px;
  box-shadow:var(--feedhome-shadow);
}
.feedhome-guide-intro-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:24px;
  align-items:center;
}
.feedhome-guide-title{
  margin:10px 0 0;
  max-width:min(97%,920px);
  color:var(--feedhome-title);
  font-size:var(--feedhome-panel-title-pc);
  line-height:1.34;
  font-weight:760;
  letter-spacing:-.05em;
}
.feedhome-guide-title .highlight{color:var(--feedhome-primary)}
.feedhome-guide-desc{
  margin:12px 0 0;
  max-width:900px;
  color:var(--feedhome-text);
  font-size:15px;
  line-height:1.75;
  font-weight:500;
}
.feedhome-guide-stamp{
  min-width:220px;
  border-radius:22px;
  background:var(--feedhome-deep);
  color:#fff;
  padding:22px 24px;
  text-align:center;
}
.feedhome-guide-stamp small{
  display:block;
  color:rgba(255,255,255,.72);
  font-size:12px;
  font-weight:800;
  margin-bottom:8px;
}
.feedhome-guide-stamp strong{
  display:block;
  font-size:28px;
  line-height:1.05;
  letter-spacing:-.04em;
  font-weight:800;
}

/* =========================================================
   GUIDE 3 PANELS
   ========================================================= */

.feedhome-guide-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:28px;
}

.feedhome-guide-panel{
  position:relative;
  display:flex;
  flex-direction:column;
  border:1px solid var(--feedhome-line);
  border-radius:28px;
  background:var(--feedhome-paper);
  overflow:hidden;
  box-shadow:var(--feedhome-shadow);
}
.feedhome-guide-panel-top{
  min-height:52px;
  display:grid;
  place-items:center;
  padding:0 18px;
  background:#111315;
  color:#fff;
  font-size:13.5px;
  font-weight:800;
  letter-spacing:-.02em;
  border-bottom:1px solid #111315;
  text-align:center;
}
.feedhome-guide-panel-body{
  display:flex;
  flex:1;
  flex-direction:column;
  padding:24px;
}

/* PATCH 2026-05-18 / INLINE BASE64 IMAGE EMBED
   목적: 이미지 파일 누락으로 액박이 뜨지 않도록 카드 상단 이미지를 HTML 내부 data URI로 직접 포함
*/
.feedhome-guide-visual{
  margin:0 0 18px;
  border:1px solid var(--feedhome-line);
  border-radius:20px;
  overflow:hidden;
  background:#fbf8f3;
  box-shadow:var(--feedhome-shadow-soft);
}
.feedhome-guide-visual img{
  width:100%;
  aspect-ratio:4 / 3;
  object-fit:cover;
  display:block;
  background:#fff;
}

.feedhome-guide-panel .feedhome-badge{
  margin-bottom:12px;
  background:#f4f5f6;
  border-color:#e1e5e9;
  color:#5f6876;
  font-size:11.5px;
  font-weight:780;
}
.feedhome-guide-panel-title{
  margin:0;
  color:var(--feedhome-title);
  font-size:22px;
  line-height:1.3;
  font-weight:760;
  letter-spacing:-.05em;
}
.feedhome-guide-panel-desc{
  min-height:78px;
  margin:11px 0 0;
  color:var(--feedhome-text);
  font-size:14.5px;
  line-height:1.66;
  font-weight:500;
}
.feedhome-guide-divider{
  height:1px;
  margin:20px 0 16px;
  background:var(--feedhome-line);
}
.feedhome-guide-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:9px;
}
.feedhome-guide-list li{
  position:relative;
  padding-left:18px;
  color:var(--feedhome-text);
  font-size:14px;
  line-height:1.58;
  font-weight:500;
}
.feedhome-guide-list li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color:var(--feedhome-primary);
  font-weight:900;
}

/* =========================================================
   TYPE CARDS
   ========================================================= */

.feedhome-type-grid{
  display:grid;
  gap:9px;
}
.feedhome-type-card{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:12px;
  align-items:start;
  padding:13px 14px;
  border:1px solid var(--feedhome-line);
  border-radius:16px;
  background:#fffaf5;
}
.feedhome-type-num{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:999px;
  background:var(--feedhome-deep);
  color:#fff;
  font-size:11px;
  font-weight:800;
}
.feedhome-type-card b{
  display:block;
  color:var(--feedhome-title);
  font-size:14px;
  line-height:1.35;
  font-weight:780;
}
.feedhome-type-card span{
  display:block;
  margin-top:3px;
  color:var(--feedhome-muted);
  font-size:12.8px;
  line-height:1.5;
  font-weight:500;
}
.feedhome-type-card.is-custom{
  background:var(--feedhome-primary-soft);
  border-color:#ead4da;
}
.feedhome-type-card.is-custom .feedhome-type-num{
  background:var(--feedhome-primary);
}

/* =========================================================
   PROCESS TIMELINE
   ========================================================= */

.feedhome-process-list{
  display:grid;
  gap:10px;
}
.feedhome-process-step{
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:12px;
  align-items:start;
  padding:14px;
  border:1px solid var(--feedhome-line);
  border-radius:18px;
  background:var(--feedhome-paper);
}
.feedhome-process-num{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:999px;
  background:var(--feedhome-soft);
  color:var(--feedhome-brown);
  font-size:13px;
  font-weight:850;
}
.feedhome-process-step b{
  display:block;
  color:var(--feedhome-title);
  font-size:15px;
  line-height:1.35;
  font-weight:780;
}
.feedhome-process-step span{
  display:block;
  margin-top:4px;
  color:var(--feedhome-muted);
  font-size:12.8px;
  line-height:1.52;
  font-weight:500;
}

/* =========================================================
   GUIDE CTA
   ========================================================= */

.feedhome-guide-note{
  margin-top:22px;
  padding:20px 22px;
  border:1px solid var(--feedhome-line);
  border-radius:22px;
  background:var(--feedhome-paper);
  color:var(--feedhome-text);
  font-size:14px;
  line-height:1.75;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px;
  align-items:center;
}
.feedhome-guide-note b{
  display:block;
  margin:0 0 5px;
  color:var(--feedhome-title);
  font-size:17px;
  line-height:1.35;
  font-weight:780;
  letter-spacing:-.04em;
}
.feedhome-guide-note p{
  margin:0;
  color:var(--feedhome-text);
  font-size:14px;
  line-height:1.68;
  font-weight:500;
}
.feedhome-guide-note .feedhome-button{
  min-width:150px;
  min-height:46px;
  padding:0 20px;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:1024px){
  .feedhome-guide-grid{grid-template-columns:1fr}
  .feedhome-guide-panel-desc{min-height:auto}
}

@media(max-width:720px){
  .feedhome-page{font-size:var(--feedhome-body-mo)}
  .feedhome-container-wide{width:min(100%,calc(100% - var(--feedhome-side-mo)))}
  .feedhome-section{padding:var(--feedhome-section-mo) 0}
  .feedhome-section-head{
    margin-bottom:24px;
    text-align:left;
  }
  .feedhome-kicker{
    min-height:30px;
    padding:0 13px;
    font-size:11px;
  }
  .feedhome-section-title{
    margin-left:0;
    margin-right:0;
    font-size:var(--feedhome-section-title-mo);
    line-height:1.32;
    max-width:97%;
  }
  .feedhome-section-desc{
    margin-left:0;
    margin-right:0;
    font-size:var(--feedhome-body-mo);
    line-height:1.74;
  }

  .feedhome-guide-intro{
    padding:22px;
    border-radius:26px;
  }
  .feedhome-guide-intro-head{
    grid-template-columns:1fr;
  }
  .feedhome-guide-title{
    font-size:var(--feedhome-panel-title-mo);
    line-height:1.36;
  }
  .feedhome-guide-desc{
    font-size:14px;
    line-height:1.72;
  }
  .feedhome-guide-stamp{
    min-width:0;
    padding:18px 20px;
  }
  .feedhome-guide-stamp strong{
    font-size:25px;
  }

  .feedhome-guide-grid{
    gap:16px;
    margin-top:22px;
  }
  .feedhome-guide-panel{
    border-radius:24px;
  }
  .feedhome-guide-panel-top{
    min-height:48px;
    font-size:13px;
  }
  .feedhome-guide-panel-body{
    padding:22px 20px 20px;
  }
  .feedhome-guide-visual{
    margin-bottom:16px;
    border-radius:18px;
  }
  .feedhome-guide-panel-title{
    font-size:21px;
    line-height:1.35;
  }
  .feedhome-guide-panel-desc{
    font-size:14.2px;
    line-height:1.68;
  }
  .feedhome-guide-note{
    grid-template-columns:1fr;
    gap:14px;
    padding:18px;
  }
  .feedhome-guide-note b{
    font-size:16px;
  }
  .feedhome-guide-note p{
    font-size:13.5px;
  }
  .feedhome-guide-note .feedhome-button{
    width:100%;
    min-height:48px;
  }
}

/* =========================================================
   PATCH 2026-05-18 / GUIDE V2.5 INLINE IMAGE SINGLE BORDER FIX
   목적:
   - 실제 이미지가 포함된 v2.1 inline 버전을 기준으로 재작업
   - 이미지가 비어 보이는 문제 해결
   - 카드 상단 비주얼은 가는 밤색 라인 1개만 보이도록 정리
   - 이미지 내부의 검은 프레임은 확대/크롭으로 최대한 화면 밖 처리
   보호:
   - 이미지 data URI 직접 포함 유지
   - 외부 이미지 파일 불필요
   - feedhome-* 네이밍 유지
   ========================================================= */

.feedhome-guide-visual{
  margin:0 0 18px;
  height:214px;
  min-height:214px;
  border:1px solid #d8c2a9;
  border-radius:20px;
  overflow:hidden;
  background:#fffaf5;
  box-shadow:none;
}

.feedhome-guide-visual img{
  display:block !important;
  width:126% !important;
  height:126% !important;
  max-width:none !important;
  object-fit:cover !important;
  object-position:center center !important;
  transform:translate(-10.3%, -10.3%) !important;
  background:#fffaf5;
}

/* 서비스 방식은 우측 지원 패널이 있어 너무 많이 잘리지 않도록 약간 덜 확대 */
.feedhome-guide-visual-service img{
  width:120% !important;
  height:120% !important;
  transform:translate(-8.3%, -8.3%) !important;
}

/* 제작 유형은 내부 프레임이 가장 강해서 조금 더 확대 */
.feedhome-guide-visual-type img{
  width:130% !important;
  height:130% !important;
  transform:translate(-11.5%, -11.5%) !important;
}

/* 진행방식은 흐름 전체가 보이도록 중간값 */
.feedhome-guide-visual-process img{
  width:124% !important;
  height:124% !important;
  transform:translate(-9.7%, -9.7%) !important;
}

@media(max-width:720px){
  .feedhome-guide-visual{
    height:190px;
    min-height:190px;
    margin-bottom:16px;
    border-radius:18px;
  }

  .feedhome-guide-visual img{
    width:132% !important;
    height:132% !important;
    transform:translate(-12.1%, -12.1%) !important;
  }

  .feedhome-guide-visual-service img{
    width:124% !important;
    height:124% !important;
    transform:translate(-9.7%, -9.7%) !important;
  }

  .feedhome-guide-visual-type img{
    width:136% !important;
    height:136% !important;
    transform:translate(-13.2%, -13.2%) !important;
  }

  .feedhome-guide-visual-process img{
    width:130% !important;
    height:130% !important;
    transform:translate(-11.5%, -11.5%) !important;
  }
}


/* =========================================================
   PATCH 2026-05-18 / GUIDE V2.6 VISUAL POLISH
   목적:
   - 카드 상단 비주얼을 조금 더 정돈
   - 이미지가 너무 강하게 튀지 않도록 높이와 톤 조정
   - 밤색 단일 테두리 유지
   - 내부 검은 프레임 느낌은 크롭과 은은한 오버레이로 완화
   보호:
   - 이미지 data URI 직접 포함 유지
   - 외부 이미지 파일 불필요
   - feedhome-* 네이밍 유지
   ========================================================= */

.feedhome-guide-visual{
  height:188px;
  min-height:188px;
  margin:0 0 18px;
  border:1px solid #d8c2a9;
  border-radius:20px;
  overflow:hidden;
  background:#fffaf5;
  box-shadow:none;
  position:relative;
}

.feedhome-guide-visual::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:rgba(248,243,236,.10);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}

.feedhome-guide-visual img{
  display:block !important;
  width:128% !important;
  height:128% !important;
  max-width:none !important;
  object-fit:cover !important;
  object-position:center center !important;
  transform:translate(-10.9%, -12.2%) !important;
  filter:saturate(.88) contrast(.92) brightness(1.05);
  background:#fffaf5;
}

/* 서비스 방식: 전체 흐름이 보이도록 확대를 조금 덜 적용 */
.feedhome-guide-visual-service img{
  width:122% !important;
  height:122% !important;
  transform:translate(-9%, -10.3%) !important;
}

/* 제작 유형: 내부 프레임이 강해 조금 더 확대 */
.feedhome-guide-visual-type img{
  width:132% !important;
  height:132% !important;
  transform:translate(-12.1%, -13.4%) !important;
}

/* 진행방식: 단계 흐름이 잘리면 안 되므로 중간 크롭 */
.feedhome-guide-visual-process img{
  width:126% !important;
  height:126% !important;
  transform:translate(-10.3%, -11.6%) !important;
}

/* 카드 상단 이미지와 본문 사이 호흡 정리 */
.feedhome-guide-panel .feedhome-badge{
  margin-top:2px;
}

/* 카드 안 설명이 너무 길게 밀리지 않도록 약간 축소 */
.feedhome-guide-panel-desc{
  min-height:64px;
}

@media(max-width:720px){
  .feedhome-guide-visual{
    height:164px;
    min-height:164px;
    margin-bottom:16px;
    border-radius:18px;
  }

  .feedhome-guide-visual img{
    width:136% !important;
    height:136% !important;
    transform:translate(-13.2%, -14.2%) !important;
  }

  .feedhome-guide-visual-service img{
    width:128% !important;
    height:128% !important;
    transform:translate(-10.9%, -11.8%) !important;
  }

  .feedhome-guide-visual-type img{
    width:140% !important;
    height:140% !important;
    transform:translate(-14.3%, -15.2%) !important;
  }

  .feedhome-guide-visual-process img{
    width:134% !important;
    height:134% !important;
    transform:translate(-12.7%, -13.7%) !important;
  }

  .feedhome-guide-panel-desc{
    min-height:auto;
  }
}


/* =========================================================
   PATCH 2026-05-18 / GUIDE V2.7 NUMBER VISIBILITY FIX
   목적:
   - 제작 유형 / 진행방식의 숫자 가독성 개선
   - 숫자가 배경색에 묻히는 문제 해결
   - 숫자 크기와 굵기 상향
   ========================================================= */

.feedhome-type-num{
  width:34px !important;
  height:34px !important;
  font-size:13px !important;
  font-weight:800 !important;
  line-height:1 !important;
  color:#ffffff !important;
  background:#111315 !important;
  box-shadow:0 0 0 1px rgba(17,19,21,.08) inset;
}

.feedhome-type-card.is-custom .feedhome-type-num{
  color:#ffffff !important;
  background:var(--feedhome-primary) !important;
}

.feedhome-process-num{
  width:48px !important;
  height:48px !important;
  font-size:15px !important;
  font-weight:850 !important;
  line-height:1 !important;
  color:#6a4b37 !important;
  background:#efe5d9 !important;
  box-shadow:0 0 0 1px rgba(199,162,116,.18) inset;
}

@media(max-width:720px){
  .feedhome-type-num{
    width:32px !important;
    height:32px !important;
    font-size:12.5px !important;
  }

  .feedhome-process-num{
    width:44px !important;
    height:44px !important;
    font-size:14px !important;
  }
}


/* =========================================================
   PATCH 2026-05-18 / GUIDE V2.8 NUMBER BADGE CENTER FIX
   목적:
   - 제작 유형 숫자 배지가 왼쪽으로 붙거나 일부 잘려 보이는 문제 해결
   - 진행방식 숫자 배지도 중앙 정렬/가독성 강화
   - 숫자 배지를 텍스트 흐름이 아니라 안정적인 flex 중앙 정렬로 고정
   ========================================================= */

.feedhome-type-card{
  grid-template-columns:40px minmax(0,1fr) !important;
  align-items:center !important;
  column-gap:12px !important;
  overflow:visible !important;
}

.feedhome-type-num{
  position:static !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  justify-self:center !important;
  align-self:center !important;
  width:36px !important;
  height:36px !important;
  min-width:36px !important;
  min-height:36px !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:999px !important;
  background:#111315 !important;
  color:#ffffff !important;
  font-size:14px !important;
  font-weight:850 !important;
  line-height:1 !important;
  text-align:center !important;
  letter-spacing:0 !important;
  text-indent:0 !important;
  overflow:hidden !important;
}

.feedhome-type-card.is-custom .feedhome-type-num{
  background:var(--feedhome-primary) !important;
  color:#ffffff !important;
}

.feedhome-process-step{
  grid-template-columns:56px minmax(0,1fr) !important;
  align-items:center !important;
}

.feedhome-process-num{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  justify-self:center !important;
  width:48px !important;
  height:48px !important;
  min-width:48px !important;
  min-height:48px !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:999px !important;
  color:#6a4b37 !important;
  background:#efe5d9 !important;
  font-size:15px !important;
  font-weight:850 !important;
  line-height:1 !important;
  text-align:center !important;
  letter-spacing:0 !important;
  text-indent:0 !important;
  overflow:hidden !important;
}

@media(max-width:720px){
  .feedhome-type-card{
    grid-template-columns:38px minmax(0,1fr) !important;
    column-gap:11px !important;
  }

  .feedhome-type-num{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
    font-size:13px !important;
  }

  .feedhome-process-step{
    grid-template-columns:52px minmax(0,1fr) !important;
  }

  .feedhome-process-num{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
    font-size:14px !important;
  }
}


/* =========================================================
   PATCH 2026-05-18 / GUIDE V2.9 BADGE HEADER
   목적:
   - 카드 상단 검정색 바 제거
   - "서비스 방식 / 제작 유형 / 진행방식"을 뱃지형 라벨로 변경
   - 카드 시작부를 더 가볍고 정돈된 인상으로 정리
   ========================================================= */

.feedhome-guide-panel{
  position:relative !important;
  padding-top:24px !important;
  overflow:visible !important;
}

.feedhome-guide-panel-top{
  position:absolute !important;
  left:50% !important;
  top:14px !important;
  transform:translateX(-50%) !important;
  z-index:3 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  min-height:34px !important;
  padding:0 16px !important;
  border:1px solid #d8c2a9 !important;
  border-radius:999px !important;
  background:#fffaf5 !important;
  color:#5a4334 !important;
  font-size:12px !important;
  font-weight:800 !important;
  line-height:1 !important;
  letter-spacing:-0.02em !important;
  box-shadow:0 6px 16px rgba(90,67,52,.05) !important;
}

.feedhome-guide-panel-body{
  padding-top:62px !important;
}

.feedhome-guide-panel .feedhome-badge{
  margin-top:0 !important;
}

@media(max-width:720px){
  .feedhome-guide-panel{
    padding-top:22px !important;
  }

  .feedhome-guide-panel-top{
    top:12px !important;
    min-height:32px !important;
    padding:0 14px !important;
    font-size:11.5px !important;
  }

  .feedhome-guide-panel-body{
    padding-top:56px !important;
  }
}


/* =========================================================
   PATCH 2026-05-18 / GUIDE V3.0 HALF-OVERLAP BADGE
   목적:
   - 카드 상단 뱃지가 상단 박스 경계선에 반 정도 걸치도록 조정
   - 상단 검정 바 제거 구조는 유지
   - 카드 상단 여백을 자연스럽게 재정리
   ========================================================= */

.feedhome-guide-panel{
  position:relative !important;
  padding-top:18px !important;
  overflow:visible !important;
}

.feedhome-guide-panel-top{
  position:absolute !important;
  left:50% !important;
  top:0 !important;
  transform:translate(-50%, -50%) !important;
  z-index:5 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  min-height:36px !important;
  padding:0 16px !important;
  border:1px solid #d8c2a9 !important;
  border-radius:999px !important;
  background:#fffaf5 !important;
  color:#5a4334 !important;
  font-size:12px !important;
  font-weight:800 !important;
  line-height:1 !important;
  letter-spacing:-0.02em !important;
  box-shadow:0 6px 16px rgba(90,67,52,.06) !important;
}

.feedhome-guide-panel-body{
  padding-top:44px !important;
}

@media(max-width:720px){
  .feedhome-guide-panel{
    padding-top:16px !important;
  }

  .feedhome-guide-panel-top{
    min-height:34px !important;
    padding:0 14px !important;
    font-size:11.5px !important;
  }

  .feedhome-guide-panel-body{
    padding-top:42px !important;
  }
}


/* =========================================================
   PATCH 2026-05-18 / GUIDE V3.1 SECTION GAP TUNING
   목적:
   - 상단 정의 박스와 아래 3개 카드 묶음 사이 간격 확대
   - 섹션 덩어리 구분을 더 명확하게 정리
   - PC와 모바일에서 각각 자연스러운 간격 유지
   ========================================================= */

.feedhome-guide-intro{
  margin-bottom: 0 !important;
}

.feedhome-guide-grid{
  margin-top: 46px !important;
}

@media(max-width:1024px){
  .feedhome-guide-grid{
    margin-top: 38px !important;
  }
}

@media(max-width:720px){
  .feedhome-guide-grid{
    margin-top: 32px !important;
  }
}


/* =========================================================
   PATCH 2026-05-18 / GUIDE V3.2 MOBILE CARD GAP FIX
   목적:
   - 모바일/태블릿에서 제작 가이드 3개 카드가 붙어 보이는 문제 해결
   - 반걸침 뱃지 구조를 유지하면서 카드 간 세로 간격 확보
   ========================================================= */

@media(max-width:1024px){
  .feedhome-guide-grid{
    gap:28px !important;
  }
}

@media(max-width:720px){
  .feedhome-guide-grid{
    gap:32px !important;
    margin-top:32px !important;
  }
}


/* =========================================================
   PATCH 2026-05-18 / GUIDE V3.3 BADGE FONT + VISUAL LIFT
   목적:
   - 카드 상단 뱃지 안의 폰트 크기를 키워 가독성 강화
   - 뱃지 아래 대표 이미지(비주얼 박스)를 조금 더 위로 올려
     상단 여백이 과하게 떠 보이지 않도록 정리
   ========================================================= */

.feedhome-guide-panel-top{
  min-height:40px !important;
  padding:0 18px !important;
  font-size:13.5px !important;
  font-weight:800 !important;
}

.feedhome-guide-panel{
  padding-top:16px !important;
}

.feedhome-guide-panel-body{
  padding-top:34px !important;
}

.feedhome-guide-visual{
  margin-top:0 !important;
  margin-bottom:18px !important;
}

@media(max-width:1024px){
  .feedhome-guide-panel-top{
    min-height:38px !important;
    padding:0 17px !important;
    font-size:13px !important;
  }
  .feedhome-guide-panel-body{
    padding-top:32px !important;
  }
}

@media(max-width:720px){
  .feedhome-guide-panel-top{
    min-height:36px !important;
    padding:0 15px !important;
    font-size:12.5px !important;
  }

  .feedhome-guide-panel{
    padding-top:14px !important;
  }

  .feedhome-guide-panel-body{
    padding-top:30px !important;
  }

  .feedhome-guide-visual{
    margin-bottom:16px !important;
  }
}


/* =========================================================
   PATCH 2026-05-18 / GUIDE V3.4 MORE BUTTON COLLAPSE
   목적:
   - PC/모바일에서 카드가 너무 길어 보이는 문제 해결
   - 기본 화면에서는 핵심 설명까지만 보여주고 상세 목록은 "더보기"로 부드럽게 펼침
   - PC에서는 한 카드 버튼 클릭 시 3개 카드가 함께 펼쳐짐
   - 모바일에서는 클릭한 카드만 개별적으로 펼쳐짐
   ========================================================= */

.feedhome-guide-more-button-wrap{
  margin-top:18px;
}

.feedhome-guide-more-button{
  width:100%;
  min-height:46px;
  border:1px solid var(--feedhome-line);
  border-radius:999px;
  background:#fff;
  color:var(--feedhome-title);
  font-size:14px;
  font-weight:760;
  line-height:1;
  letter-spacing:-.035em;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}

.feedhome-guide-more-button:hover{
  transform:translateY(-1px);
  border-color:#cdb79f;
}

.feedhome-guide-panel.is-open .feedhome-guide-more-button{
  background:var(--feedhome-deep);
  border-color:var(--feedhome-deep);
  color:#fff;
}

.feedhome-guide-more-content{
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition:max-height .42s ease, opacity .28s ease;
}

.feedhome-guide-panel.is-open .feedhome-guide-more-content{
  opacity:1;
}

.feedhome-guide-more-content .feedhome-guide-divider{
  margin-top:22px;
}

@media(max-width:720px){
  .feedhome-guide-more-button-wrap{
    margin-top:16px;
  }

  .feedhome-guide-more-button{
    min-height:44px;
    font-size:13.5px;
  }
}


/* =========================================================
   PATCH 2026-05-18 / GUIDE V3.5 MORE BUTTON LABEL
   목적:
   - 카드 하단 버튼 문구를 "더보기"에서 "자세히 보기"로 변경
   - 기존 PC 전체 펼침 / 모바일 개별 펼침 동작 유지
   ========================================================= */


/* =========================================================
   MERGED FROM 제작사례02.html
   ========================================================= */

/* =========================================================
   LANDINGPAGER FEEDHOME SAMPLE & PORTFOLIO SECTION V3
   PATCH 2026-05-18 / AUTO SLIDER + MOBILE SWIPE + FULL IFRAME MODAL
   목적:
   - V3 feedhome 기준 가로 슬라이드 섹션 HTML 시안
   - 기존 브랜딩타임 제작사례 소스의 링크값/풀스크린 iframe 미리보기 구조 반영
   - PC 자동 왕복 슬라이딩 + 좌우 버튼
   - 모바일 좌우 스와이프
   - 클릭 시 100% 풀스크린 인라인 iframe 모달
   보호:
   - 게시판 기능 없음
   - 관리자 자동 생성 전 정적 카드 시안
   ========================================================= */

:root{color-scheme:light}
html,body{margin:0;min-height:100%;background:#f8f3ec}
body{font-family:Pretendard,"Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif}
*{box-sizing:border-box}

.feedhome-page{
  --feedhome-wide-container:1240px;
  --feedhome-section-pc:92px;
  --feedhome-section-mo:48px;
  --feedhome-side-pc:36px;
  --feedhome-side-mo:24px;
  --feedhome-bg:#f8f3ec;
  --feedhome-paper:#fff;
  --feedhome-soft:#f5efe7;
  --feedhome-line:#e2d4c5;
  --feedhome-line-strong:#c7a274;
  --feedhome-title:#333;
  --feedhome-text:#444;
  --feedhome-muted:#5f6876;
  --feedhome-deep:#111315;
  --feedhome-primary:#8f4d5a;
  --feedhome-brown:#5a4334;
  --feedhome-radius-xl:32px;
  --feedhome-shadow:0 16px 40px rgba(35,28,22,.065);
  --feedhome-shadow-soft:0 10px 26px rgba(35,28,22,.045);
  --feedhome-section-title-pc:clamp(30px,2.25vw,38px);
  --feedhome-section-title-mo:clamp(24px,6.3vw,29px);
  --feedhome-body-pc:16px;
  --feedhome-body-mo:14.5px;
  --feedhome-button-pc:14px;
  --feedhome-button-mo:13.5px;
  min-height:100vh;
  background:var(--feedhome-bg);
  color:var(--feedhome-text);
  font-size:var(--feedhome-body-pc);
  line-height:1.72;
  font-weight:450;
  letter-spacing:-.035em;
  word-break:keep-all;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.feedhome-page a{color:inherit;text-decoration:none}
.feedhome-page button{font:inherit}
.feedhome-page img{display:block;max-width:100%}
.feedhome-modal-lock{overflow:hidden!important}

.feedhome-container-wide{width:min(var(--feedhome-wide-container),calc(100% - var(--feedhome-side-pc)));margin:0 auto}
.feedhome-section{padding:var(--feedhome-section-pc) 0;background:var(--feedhome-bg)}
.feedhome-section-head{max-width:880px;margin:0 auto 34px;text-align:center}
.feedhome-kicker{display:inline-flex;align-items:center;justify-content:center;width:fit-content;min-height:34px;padding:0 16px;margin-bottom:14px;border:1px solid #d7c3ad;border-radius:999px;background:#fffaf5;color:#5a4334;font-size:12px;font-weight:820;line-height:1;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 8px 18px rgba(90,67,52,.06)}
.feedhome-section-title{max-width:min(97%,960px);margin:0 auto;color:var(--feedhome-title);font-size:var(--feedhome-section-title-pc);line-height:1.28;font-weight:730;letter-spacing:-.055em}
.feedhome-section-desc{max-width:760px;margin:14px auto 0;color:var(--feedhome-text);font-size:var(--feedhome-body-pc);line-height:1.78;font-weight:500}
.feedhome-button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border:1px solid transparent;border-radius:999px;background:var(--feedhome-deep);color:#fff;font-size:var(--feedhome-button-pc);font-weight:720;line-height:1;letter-spacing:-.035em;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease}
.feedhome-button:hover{transform:translateY(-1px)}
.feedhome-button.is-primary{background:var(--feedhome-primary);border-color:var(--feedhome-primary);color:#fff}
.feedhome-button.is-dark{background:var(--feedhome-deep);border-color:var(--feedhome-deep);color:#fff}
.feedhome-button.is-outline{background:var(--feedhome-paper);border-color:var(--feedhome-line);color:var(--feedhome-title)}

/* WORK SLIDER */
.feedhome-work-section{overflow:hidden}
.feedhome-work-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px}
.feedhome-work-tabs{display:inline-flex;align-items:center;gap:8px;padding:6px;border:1px solid var(--feedhome-line);border-radius:999px;background:var(--feedhome-paper);box-shadow:var(--feedhome-shadow-soft)}
.feedhome-work-tab{min-height:38px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:var(--feedhome-muted);font-size:13px;font-weight:760;line-height:1;letter-spacing:-.035em;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .18s ease,color .18s ease}
.feedhome-work-tab.is-active{background:var(--feedhome-deep);color:#fff}
.feedhome-work-hint{color:var(--feedhome-muted);font-size:13px;line-height:1.55;font-weight:520}
.feedhome-work-viewport{position:relative;overflow:hidden;margin-left:calc((100vw - min(var(--feedhome-wide-container), calc(100vw - var(--feedhome-side-pc)))) / -2);margin-right:calc((100vw - min(var(--feedhome-wide-container), calc(100vw - var(--feedhome-side-pc)))) / -2);padding-left:calc((100vw - min(var(--feedhome-wide-container), calc(100vw - var(--feedhome-side-pc)))) / 2);touch-action:pan-y;overscroll-behavior-x:contain}
.feedhome-work-track{display:flex;gap:20px;will-change:transform;transition:transform .55s ease;padding:8px max(24px,calc((100vw - var(--feedhome-wide-container)) / 2)) 24px 0}
.feedhome-work-card{position:relative;flex:0 0 370px;border:1px solid var(--feedhome-line);border-radius:26px;background:var(--feedhome-paper);box-shadow:none;overflow:hidden;transition:border-color .18s ease}
.feedhome-work-card:hover{transform:none;border-color:var(--feedhome-line-strong);box-shadow:none}
.feedhome-work-card[hidden]{display:none!important}
.feedhome-work-thumb{position:relative;height:250px;overflow:hidden;background:#efe5d9}
.feedhome-work-thumb img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform .42s ease}
.feedhome-work-card:hover .feedhome-work-thumb img{transform:scale(1.06)}
.feedhome-work-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.12),rgba(0,0,0,0) 48%,rgba(0,0,0,.08));pointer-events:none}
.feedhome-work-badge{position:absolute;left:16px;top:16px;z-index:2;display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 13px;border-radius:999px;background:var(--feedhome-paper);color:var(--feedhome-primary);font-size:12px;font-weight:850;line-height:1;letter-spacing:-.035em;box-shadow:0 8px 18px rgba(0,0,0,.09)}
.feedhome-work-badge.is-sample{color:var(--feedhome-brown)}
.feedhome-work-badge.is-custom{background:var(--feedhome-deep);color:#fff}
.feedhome-work-body{padding:24px}
.feedhome-work-title{margin:0;color:var(--feedhome-title);font-size:20px;line-height:1.35;font-weight:780;letter-spacing:-.05em}
.feedhome-work-desc{min-height:74px;margin:10px 0 0;color:var(--feedhome-text);font-size:14.5px;line-height:1.72;font-weight:500}
.feedhome-work-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.feedhome-work-chip{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:999px;background:var(--feedhome-soft);color:var(--feedhome-muted);font-size:11.5px;font-weight:720;line-height:1}
.feedhome-work-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.feedhome-work-actions .feedhome-button{width:100%;min-height:46px;padding:0 14px}
.feedhome-work-nav{display:flex;justify-content:flex-end;gap:10px;margin-top:2px}
.feedhome-work-arrow{display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--feedhome-line);border-radius:999px;background:var(--feedhome-paper);color:var(--feedhome-deep);cursor:pointer;-webkit-tap-highlight-color:transparent;box-shadow:var(--feedhome-shadow-soft);transition:transform .18s ease,background .18s ease}
.feedhome-work-arrow:hover{transform:translateY(-1px);background:#fffaf5}
.feedhome-work-arrow svg{width:21px;height:21px;stroke:currentColor;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.feedhome-work-note{margin-top:22px;padding:20px 22px;border:1px solid var(--feedhome-line);border-radius:22px;background:var(--feedhome-paper);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;box-shadow:var(--feedhome-shadow-soft)}
.feedhome-work-note b{display:block;margin:0 0 5px;color:var(--feedhome-title);font-size:17px;line-height:1.35;font-weight:780;letter-spacing:-.04em}
.feedhome-work-note p{margin:0;color:var(--feedhome-text);font-size:14px;line-height:1.68;font-weight:500}
.feedhome-work-note .feedhome-button{min-width:150px;min-height:46px}

/* FULLSCREEN IFRAME MODAL */
.feedhome-work-modal{position:fixed;inset:0;z-index:10050;display:none;background:#fff}
.feedhome-work-modal.is-open{display:block}
.feedhome-work-modal-topbar{position:absolute;left:0;right:0;top:0;z-index:3;height:62px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 18px;background:#111315;color:#fff;box-shadow:0 8px 26px rgba(0,0,0,.22)}
.feedhome-work-modal-title{min-width:0;display:flex;flex-direction:column;gap:3px}
.feedhome-work-modal-title b{display:block;font-size:15px;line-height:1.2;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feedhome-work-modal-title span{display:block;max-width:64vw;color:rgba(255,255,255,.68);font-size:12px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feedhome-work-modal-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.feedhome-work-modal-open,.feedhome-work-modal-close{min-height:38px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.18);display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:850;line-height:1;white-space:nowrap;cursor:pointer}
.feedhome-work-modal-open{background:#fff;color:#111315;border-color:#fff}
.feedhome-work-modal-close{background:rgba(255,255,255,.12);color:#fff}
.feedhome-work-frame-wrap{position:absolute;left:0;right:0;top:62px;bottom:0;background:#f7f3ef}
.feedhome-work-frame{display:block;width:100%;height:100%;border:0;background:#fff}
.feedhome-work-loading{position:absolute;inset:0;display:grid;place-items:center;color:#555;font-size:14px;font-weight:700;background:#f7f3ef}
.feedhome-work-modal.is-loaded .feedhome-work-loading{display:none}

@media(max-width:1024px){
  .feedhome-work-toolbar{align-items:flex-start;flex-direction:column}
  .feedhome-work-card{flex-basis:340px}
  .feedhome-work-thumb{height:230px}
}
@media(max-width:720px){
  .feedhome-page{font-size:var(--feedhome-body-mo)}
  .feedhome-container-wide{width:min(100%,calc(100% - var(--feedhome-side-mo)))}
  .feedhome-section{padding:var(--feedhome-section-mo) 0}
  .feedhome-section-head{margin-bottom:24px;text-align:left}
  .feedhome-kicker{min-height:30px;padding:0 13px;font-size:11px}
  .feedhome-section-title{margin-left:0;margin-right:0;max-width:97%;font-size:var(--feedhome-section-title-mo);line-height:1.32}
  .feedhome-section-desc{margin-left:0;margin-right:0;font-size:var(--feedhome-body-mo);line-height:1.74}
  .feedhome-work-toolbar{gap:12px;margin-bottom:16px}
  .feedhome-work-tabs{width:100%;display:grid;grid-template-columns:1fr 1fr 1fr}
  .feedhome-work-tab{min-height:40px;padding:0 8px;font-size:12px}
  .feedhome-work-hint{font-size:12.5px}
  .feedhome-work-viewport{margin-left:calc(var(--feedhome-side-mo) / -2);margin-right:calc(var(--feedhome-side-mo) / -2);padding-left:calc(var(--feedhome-side-mo) / 2)}
  .feedhome-work-track{gap:14px;padding:6px calc(var(--feedhome-side-mo) / 2) 18px 0}
  .feedhome-work-card{flex-basis:min(84vw,330px);border-radius:24px}
  .feedhome-work-thumb{height:210px}
  .feedhome-work-body{padding:20px}
  .feedhome-work-title{font-size:19px}
  .feedhome-work-desc{min-height:68px;font-size:13.8px}
  .feedhome-work-actions{gap:8px}
  .feedhome-work-actions .feedhome-button{min-height:44px;font-size:13px}
  .feedhome-work-nav{justify-content:flex-start;margin-top:0}
  .feedhome-work-arrow{width:42px;height:42px}
  .feedhome-work-note{grid-template-columns:1fr;padding:18px}
  .feedhome-work-note .feedhome-button{width:100%}
  .feedhome-work-modal-topbar{height:58px;padding:0 12px}
  .feedhome-work-modal-title b{font-size:14px}
  .feedhome-work-modal-title span{display:none}
  .feedhome-work-modal-open,.feedhome-work-modal-close{min-height:36px;padding:0 11px;font-size:12px}
  .feedhome-work-frame-wrap{top:58px}
}

/* =========================================================
   PATCH 2026-05-18 / FEEDHOME WORK SLIDER V6 MODAL BUTTON FIX
   목적:
   - 풀스크린 미리보기 모달 상단의 흰색 '사이트 이동' 버튼 글씨가 안 보이는 현상 보정
   - 모바일 좁은 화면에서도 버튼 글씨가 중앙에 또렷하게 보이도록 최소폭/색상 강제
   보호:
   - 기존 자동 슬라이딩, 모바일 스와이프, iframe 미리보기, 닫기 버튼 기능 유지
   ========================================================= */
.feedhome-work-modal-open,
.feedhome-work-modal-open:link,
.feedhome-work-modal-open:visited{
  min-width:92px !important;
  background:#ffffff !important;
  border-color:#ffffff !important;
  color:#111315 !important;
  opacity:1 !important;
  text-indent:0 !important;
  font-size:13px !important;
  font-weight:850 !important;
  line-height:1 !important;
  text-align:center !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
}

.feedhome-work-modal-close{
  min-width:62px !important;
  color:#ffffff !important;
  opacity:1 !important;
}

@media (max-width:720px){
  .feedhome-work-modal-actions{
    gap:7px !important;
  }

  .feedhome-work-modal-open,
  .feedhome-work-modal-open:link,
  .feedhome-work-modal-open:visited{
    min-width:82px !important;
    padding:0 12px !important;
    font-size:12px !important;
  }

  .feedhome-work-modal-close{
    min-width:54px !important;
    padding:0 11px !important;
    font-size:12px !important;
  }
}


/* =========================================================
   PATCH 2026-05-18 / FEEDHOME WORK SLIDER V7 REMOVE BOTTOM NOTE
   목적:
   - 슬라이드 하단 '포트폴리오와 샘플은 계속 추가할 수 있습니다' 안내 박스 삭제
   - 기존 자동 슬라이딩, 모바일 스와이프, iframe 미리보기 모달 기능 유지
   보호:
   - 카드/탭/모달/좌우 버튼 구조는 변경하지 않음
   ========================================================= */
.feedhome-work-note{
  display:none !important;
}


/* =========================================================
   PATCH 2026-05-18 / FEEDHOME WORK SLIDER V8 MOBILE FONT TUNE
   목적:
   - 모바일에서 섹션 타이틀과 탭 버튼 글씨가 크게 보이는 현상 보정
   - 탭 라벨이 2줄로 꺾이지 않도록 모바일 폰트/패딩/높이 조정
   보호:
   - PC 디자인, 자동 슬라이딩, 모바일 스와이프, 100% iframe 미리보기 모달 유지
   ========================================================= */
@media (max-width:720px){
  .feedhome-kicker{
    min-height:28px !important;
    padding:0 12px !important;
    font-size:10.5px !important;
  }

  .feedhome-section-title{
    font-size:clamp(22px,5.7vw,26px) !important;
    line-height:1.34 !important;
    letter-spacing:-.06em !important;
  }

  .feedhome-work-tabs{
    padding:5px !important;
  }

  .feedhome-work-tab{
    min-height:36px !important;
    padding:0 6px !important;
    font-size:11.5px !important;
    letter-spacing:-.045em !important;
    white-space:nowrap !important;
  }
}


/* =========================================================
   PATCH 2026-05-18 / FEEDHOME WORK SLIDER V9 CARD HEIGHT TUNE
   목적:
   - 카드 전체 높이가 길어 보이는 문제 보정
   - 대표 이미지 세로 높이 축소
   - 카드 하단 태그 칩(예: 별도문의, 기능형 등) 영역 삭제
   - 삭제된 태그 영역만큼 버튼 영역을 위로 올림
   보호:
   - 탭 필터, PC 자동 슬라이딩, 모바일 스와이프, 100% iframe 미리보기 모달 유지
   ========================================================= */
.feedhome-work-thumb{
  height:212px !important;
}

.feedhome-work-desc{
  min-height:58px !important;
  margin-top:8px !important;
}

.feedhome-work-meta{
  display:none !important;
}

.feedhome-work-actions{
  margin-top:16px !important;
}

@media (max-width:720px){
  .feedhome-work-thumb{
    height:178px !important;
  }

  .feedhome-work-body{
    padding:18px !important;
  }

  .feedhome-work-desc{
    min-height:54px !important;
    margin-top:7px !important;
  }

  .feedhome-work-actions{
    margin-top:14px !important;
  }
}


/* =========================================================
   PATCH 2026-05-18 / FEEDHOME WORK SLIDER V10 FIT SECTION
   목적:
   - 포트폴리오 아래에 '이런 분들에게 잘 맞습니다' 판단 섹션 추가
   - 검정 카드 3개를 낮은 높이로 구성해 가격정책/제작문의 흐름으로 연결
   보호:
   - 기존 슬라이드/탭/자동 이동/모바일 스와이프/100% iframe 모달 유지
   ========================================================= */
.feedhome-fit-section{
  padding-top:0 !important;
  margin-top:-34px;
}

.feedhome-fit-panel{
  width:min(var(--feedhome-wide-container),calc(100% - var(--feedhome-side-pc)));
  margin:0 auto;
  padding:34px 36px 38px;
  border:1px solid var(--feedhome-line);
  border-radius:30px;
  background:rgba(255,255,255,.72);
  box-shadow:none;
}

.feedhome-fit-head{
  display:grid;
  grid-template-columns:minmax(0,390px) minmax(0,1fr);
  gap:34px;
  align-items:end;
  margin-bottom:24px;
}

.feedhome-fit-kicker{
  display:block;
  margin-bottom:8px;
  color:var(--feedhome-primary);
  font-size:12px;
  line-height:1;
  font-weight:850;
  letter-spacing:.09em;
}

.feedhome-fit-title{
  margin:0;
  color:var(--feedhome-title);
  font-size:clamp(24px,2vw,32px);
  line-height:1.3;
  font-weight:780;
  letter-spacing:-.06em;
}

.feedhome-fit-desc{
  margin:0;
  color:var(--feedhome-text);
  font-size:15px;
  line-height:1.76;
  font-weight:520;
}

.feedhome-fit-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.feedhome-fit-card{
  min-height:178px;
  padding:24px 24px 22px;
  border-radius:24px;
  background:#1b1718;
  color:#fff;
}

.feedhome-fit-card-title{
  margin:0 0 14px;
  color:#fff;
  font-size:17px;
  line-height:1.42;
  font-weight:800;
  letter-spacing:-.045em;
}

.feedhome-fit-list{
  display:grid;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}

.feedhome-fit-list li{
  position:relative;
  padding-left:14px;
  color:rgba(255,255,255,.88);
  font-size:13.8px;
  line-height:1.55;
  font-weight:540;
}

.feedhome-fit-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.7em;
  width:4px;
  height:4px;
  border-radius:999px;
  background:#dcc8b5;
}

.feedhome-fit-bottom{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:center;
  margin-top:18px;
  padding:18px 20px;
  border:1px solid var(--feedhome-line);
  border-radius:22px;
  background:#fffaf5;
}

.feedhome-fit-bottom p{
  margin:0;
  color:var(--feedhome-text);
  font-size:14px;
  line-height:1.65;
  font-weight:560;
}

.feedhome-fit-bottom .feedhome-button{
  min-width:145px;
  min-height:44px;
}

@media(max-width:900px){
  .feedhome-fit-head{
    grid-template-columns:1fr;
    gap:12px;
  }

  .feedhome-fit-grid{
    grid-template-columns:1fr;
  }

  .feedhome-fit-card{
    min-height:auto;
  }
}

@media(max-width:720px){
  .feedhome-fit-section{
    margin-top:-20px;
  }

  .feedhome-fit-panel{
    width:min(100%,calc(100% - var(--feedhome-side-mo)));
    padding:26px 18px 22px;
    border-radius:24px;
  }

  .feedhome-fit-title{
    font-size:clamp(21px,5.6vw,25px);
  }

  .feedhome-fit-desc{
    font-size:13.8px;
  }

  .feedhome-fit-grid{
    gap:10px;
  }

  .feedhome-fit-card{
    padding:20px 18px 18px;
    border-radius:20px;
  }

  .feedhome-fit-card-title{
    font-size:15.8px;
    margin-bottom:10px;
  }

  .feedhome-fit-list li{
    font-size:13.2px;
  }

  .feedhome-fit-bottom{
    display:none;
  }
}


/* =========================================================
   MERGED FROM 가격테이블74.html
   ========================================================= */

/* =========================================================
   LANDINGPAGER FEEDHOME PRICE SECTION V3.11 CLEAN
   PATCH 2026-05-18
   목적:
   - 가격 섹션 최종 검토 반영
   - "운영 및 면책" → "운영 및 유의사항"
   - 카드 안 혜택 문구 축약
   - 누적 patch CSS 정리 / !important 최소화
   - feedhome-* / --feedhome-* 네이밍 유지
   - 섹션·카드·모달 그라데이션 금지
   ========================================================= */

:root{color-scheme:light}
html,body{margin:0;min-height:100%;background:#f8f3ec}
body{font-family:Pretendard,"Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif}
*{box-sizing:border-box}

.feedhome-page{
  --feedhome-container:1160px;
  --feedhome-wide-container:1240px;
  --feedhome-section-pc:92px;
  --feedhome-section-mo:44px;
  --feedhome-side-pc:36px;
  --feedhome-side-mo:24px;

  --feedhome-bg:#f8f3ec;
  --feedhome-paper:#ffffff;
  --feedhome-soft:#f5efe7;
  --feedhome-soft-2:#eee3d5;
  --feedhome-line:#e2d4c5;
  --feedhome-line-strong:#c7a274;

  --feedhome-title:#333333;
  --feedhome-text:#444444;
  --feedhome-muted:#5f6876;
  --feedhome-deep:#111315;

  --feedhome-primary:#8f4d5a;
  --feedhome-primary-soft:#f6e9ed;
  --feedhome-secondary:#b89262;
  --feedhome-secondary-soft:#fff8ef;
  --feedhome-brown:#5a4334;
  --feedhome-info-soft:#f8fafc;

  --feedhome-badge-bg:#f1f2f4;
  --feedhome-badge-text:#626b78;
  --feedhome-badge-line:#e2e5e9;

  --feedhome-radius-xl:32px;
  --feedhome-radius-lg:28px;
  --feedhome-radius-md:22px;
  --feedhome-radius-sm:16px;
  --feedhome-shadow:0 16px 40px rgba(35,28,22,.065);
  --feedhome-shadow-soft:0 10px 26px rgba(35,28,22,.045);
  --feedhome-modal-shadow:0 28px 90px rgba(24,16,10,.25);

  --feedhome-section-title-pc:clamp(30px,2.25vw,38px);
  --feedhome-section-title-mo:clamp(24px,6.3vw,29px);
  --feedhome-panel-title-pc:clamp(24px,2vw,32px);
  --feedhome-panel-title-mo:clamp(21px,5.8vw,25px);
  --feedhome-card-title-pc:17px;
  --feedhome-card-title-mo:16px;
  --feedhome-body-pc:16px;
  --feedhome-body-mo:14.5px;
  --feedhome-card-body-pc:15px;
  --feedhome-card-body-mo:13.8px;
  --feedhome-button-pc:14px;
  --feedhome-button-mo:13.5px;

  min-height:100vh;
  background:var(--feedhome-bg);
  color:var(--feedhome-text);
  font-size:var(--feedhome-body-pc);
  line-height:1.72;
  font-weight:450;
  letter-spacing:-.035em;
  word-break:keep-all;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.feedhome-page *,
.feedhome-page *::before,
.feedhome-page *::after{box-sizing:border-box}
.feedhome-page a{color:inherit;text-decoration:none}
.feedhome-page button{font:inherit}
.feedhome-page img{display:block;max-width:100%}

.feedhome-container-wide{
  width:min(var(--feedhome-wide-container),calc(100% - var(--feedhome-side-pc)));
  margin:0 auto;
}
.feedhome-section{
  padding:var(--feedhome-section-pc) 0;
  background:var(--feedhome-bg);
}

/* =========================================================
   SECTION HEAD
   ========================================================= */

.feedhome-section-head{
  max-width:840px;
  margin:0 auto 40px;
  text-align:center;
}
.feedhome-kicker,
.feedhome-mini,
.feedhome-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:fit-content;
  min-height:28px;
  padding:0 11px;
  border:1px solid var(--feedhome-badge-line);
  border-radius:999px;
  background:var(--feedhome-badge-bg);
  color:var(--feedhome-badge-text);
  font-size:11.5px;
  font-weight:760;
  line-height:1;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.feedhome-kicker{
  min-height:34px;
  padding:0 16px;
  margin-bottom:14px;
  border-color:#d7c3ad;
  background:#fffaf5;
  color:#5a4334;
  font-size:12px;
  font-weight:820;
  letter-spacing:.08em;
  box-shadow:0 8px 18px rgba(90,67,52,.06);
}
.feedhome-mini{
  border:0;
  background:transparent;
  padding:0;
  min-height:auto;
  color:var(--feedhome-primary);
  letter-spacing:.1em;
}
.feedhome-section-title{
  max-width:min(97%,960px);
  margin:0 auto;
  color:var(--feedhome-title);
  font-size:var(--feedhome-section-title-pc);
  line-height:1.28;
  font-weight:730;
  letter-spacing:-.055em;
}
.feedhome-section-desc{
  max-width:720px;
  margin:14px auto 0;
  color:var(--feedhome-text);
  font-size:var(--feedhome-body-pc);
  line-height:1.78;
  font-weight:500;
}

/* =========================================================
   BUTTON
   ========================================================= */

.feedhome-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 22px;
  border:1px solid transparent;
  border-radius:999px;
  background:var(--feedhome-deep);
  color:#fff;
  font-size:var(--feedhome-button-pc);
  font-weight:720;
  line-height:1;
  letter-spacing:-.035em;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease;
}
.feedhome-button:hover{transform:translateY(-1px)}
.feedhome-button.is-primary{background:var(--feedhome-primary);border-color:var(--feedhome-primary);color:#fff}
.feedhome-button.is-dark{background:var(--feedhome-deep);border-color:var(--feedhome-deep);color:#fff}
.feedhome-button.is-outline{background:var(--feedhome-paper);border-color:var(--feedhome-line);color:var(--feedhome-title)}
.feedhome-button.is-sample{background:#fff;border-color:var(--feedhome-line);color:var(--feedhome-title)}
.feedhome-button.is-sample:hover{border-color:#cdb79f}

/* =========================================================
   MANAGED SERVICE PANEL
   ========================================================= */

.feedhome-managed-box{
  border:1px solid var(--feedhome-line);
  border-radius:var(--feedhome-radius-xl);
  background:var(--feedhome-paper);
  padding:30px;
  box-shadow:var(--feedhome-shadow);
}
.feedhome-managed-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:24px;
  align-items:center;
}
.feedhome-managed-title{
  margin:10px 0 0;
  max-width:min(97%,920px);
  color:var(--feedhome-title);
  font-size:var(--feedhome-panel-title-pc);
  line-height:1.34;
  font-weight:760;
  letter-spacing:-.05em;
}
.feedhome-managed-title .highlight{color:var(--feedhome-primary)}
.feedhome-managed-desc{
  margin:12px 0 0;
  max-width:880px;
  color:var(--feedhome-text);
  font-size:15px;
  line-height:1.75;
  font-weight:500;
}
.feedhome-managed-stamp{
  min-width:210px;
  border-radius:22px;
  background:var(--feedhome-deep);
  color:#fff;
  padding:22px 24px;
  text-align:center;
}
.feedhome-managed-stamp small{
  display:block;
  color:rgba(255,255,255,.72);
  font-size:12px;
  font-weight:800;
  margin-bottom:8px;
}
.feedhome-managed-stamp strong{
  display:block;
  font-size:30px;
  line-height:1;
  letter-spacing:-.04em;
  font-weight:800;
}
.feedhome-managed-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.feedhome-managed-item{
  border:1px solid var(--feedhome-line);
  border-radius:18px;
  background:var(--feedhome-paper);
  padding:16px;
}
.feedhome-managed-item b{
  display:block;
  color:var(--feedhome-title);
  font-size:var(--feedhome-card-title-pc);
  line-height:1.42;
  font-weight:700;
  letter-spacing:-.04em;
}
.feedhome-managed-item span{
  display:block;
  margin-top:5px;
  color:var(--feedhome-muted);
  font-size:13px;
  line-height:1.55;
}

/* =========================================================
   COLLAPSE
   ========================================================= */

.feedhome-collapse-area{
  display:grid;
  gap:14px;
  margin-top:24px;
}
.feedhome-collapse{
  border:1px solid var(--feedhome-line);
  border-radius:24px;
  background:var(--feedhome-paper);
  overflow:hidden;
  box-shadow:var(--feedhome-shadow-soft);
}
.feedhome-managed-box .feedhome-collapse{background:var(--feedhome-paper)}
.feedhome-collapse.featured{
  border-color:#e5cdb5;
  background:#fffaf5;
}
.feedhome-collapse summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 22px;
}
.feedhome-collapse summary::-webkit-details-marker{display:none}
.feedhome-collapse-title{min-width:0;display:block}
.feedhome-collapse-kicker{
  display:block;
  margin-bottom:5px;
  color:#5f6876;
  font-size:10.5px;
  line-height:1;
  font-weight:800;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.feedhome-collapse-title b{
  display:block;
  color:var(--feedhome-title);
  font-size:18px;
  line-height:1.36;
  letter-spacing:-.04em;
  font-weight:730;
}
.feedhome-notice-collapse .feedhome-collapse-title b{color:var(--feedhome-primary)}
.feedhome-collapse-title span:not(.feedhome-collapse-kicker){
  display:block;
  margin-top:5px;
  color:var(--feedhome-text);
  font-size:13px;
  line-height:1.55;
  font-weight:480;
}
.feedhome-collapse summary::after{
  content:"+";
  flex:0 0 34px;
  width:34px;
  height:34px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:var(--feedhome-primary-soft);
  color:var(--feedhome-primary);
  font-size:22px;
  font-weight:700;
  line-height:1;
}
.feedhome-collapse[open] summary::after{content:"–"}
.feedhome-collapse-body{padding:0 22px 22px}

/* =========================================================
   PRICE CARDS
   ========================================================= */

.feedhome-price-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  align-items:stretch;
  margin-top:32px;
}
.feedhome-price-card{
  position:relative;
  display:flex;
  flex-direction:column;
  border:1px solid var(--feedhome-line);
  border-radius:28px;
  background:var(--feedhome-paper);
  overflow:hidden;
  box-shadow:var(--feedhome-shadow);
}
.feedhome-price-card.is-featured{border-color:var(--feedhome-line-strong)}
.feedhome-price-card-top{
  min-height:52px;
  display:grid;
  place-items:center;
  padding:0 18px;
  background:#111315;
  color:#fff;
  font-size:13.5px;
  font-weight:800;
  letter-spacing:-.02em;
  border-bottom:1px solid #111315;
  text-align:center;
}
.feedhome-price-card-body{
  position:relative;
  display:flex;
  flex:1;
  flex-direction:column;
  padding:24px;
}
.feedhome-price-label{
  margin-bottom:12px;
  background:#f4f5f6;
  border-color:#e1e5e9;
  color:#5f6876;
  font-size:11.5px;
  font-weight:780;
}
.feedhome-price-recommend{
  position:absolute;
  top:24px;
  right:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:0 11px;
  border-radius:999px;
  background:var(--feedhome-primary);
  color:#fff;
  font-size:12px;
  font-weight:760;
  line-height:1;
}
.feedhome-price-title{
  margin:0;
  color:var(--feedhome-title);
  font-size:22px;
  line-height:1.28;
  font-weight:760;
  letter-spacing:-.05em;
}
.feedhome-price-desc{
  min-height:50px;
  margin:11px 0 0;
  color:var(--feedhome-text);
  font-size:14.5px;
  line-height:1.66;
  font-weight:500;
}
.feedhome-price-divider{
  height:1px;
  margin:20px 0 16px;
  background:var(--feedhome-line);
}
.feedhome-price-label-small{
  color:var(--feedhome-muted);
  font-size:12px;
  font-weight:760;
  margin-bottom:6px;
}
.feedhome-price{
  display:flex;
  align-items:flex-end;
  gap:6px;
  margin:0;
}
.feedhome-price strong{
  color:var(--feedhome-deep);
  font-size:34px;
  line-height:1;
  font-weight:780;
  letter-spacing:-.055em;
}
.feedhome-price span{
  color:var(--feedhome-text);
  font-size:14px;
  font-weight:720;
  line-height:1.25;
}
.feedhome-price-support{
  margin-top:18px;
  min-height:50px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 15px;
  border:1px solid #ead8c2;
  border-radius:16px;
  background:#fff7ee;
  color:var(--feedhome-brown);
}
.feedhome-price-support b{
  flex:0 0 auto;
  color:var(--feedhome-brown);
  font-size:12.5px;
  line-height:1.2;
  font-weight:800;
}
.feedhome-price-support span{
  min-width:0;
  color:var(--feedhome-title);
  font-size:13.5px;
  line-height:1.35;
  font-weight:780;
  text-align:right;
}
.feedhome-price-summary{display:none}
.feedhome-price-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:auto;
  padding-top:20px;
}
.feedhome-price-actions .feedhome-button{
  width:100%;
  min-height:48px;
  padding:0 14px;
  white-space:nowrap;
}
.feedhome-price-card.is-featured .feedhome-price-actions .feedhome-button.is-sample{
  background:#fff;
  color:var(--feedhome-title);
  border-color:#d9c5ad;
}
.feedhome-price-scroll-hint{
  display:none;
  margin:10px 2px 0;
  color:var(--feedhome-muted);
  font-size:12.5px;
  line-height:1.5;
  font-weight:600;
  text-align:left;
}

/* =========================================================
   NOTE / POLICY / OPTION
   ========================================================= */

.feedhome-note-box{
  margin-top:22px;
  padding:18px 20px;
  border:1px solid var(--feedhome-line);
  border-radius:22px;
  background:var(--feedhome-paper);
  color:var(--feedhome-text);
  font-size:14px;
  line-height:1.75;
}
.feedhome-note-box b{
  color:var(--feedhome-title);
  font-weight:760;
}
.feedhome-note-box.feedhome-custom-cta{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px;
  align-items:center;
  padding:20px 22px;
}
.feedhome-custom-cta-title{
  display:block;
  margin:0 0 5px;
  color:var(--feedhome-title);
  font-size:17px;
  line-height:1.35;
  font-weight:780;
  letter-spacing:-.04em;
}
.feedhome-custom-cta-desc{
  margin:0;
  color:var(--feedhome-text);
  font-size:14px;
  line-height:1.68;
  font-weight:500;
}
.feedhome-custom-cta .feedhome-button{
  min-width:150px;
  min-height:46px;
  padding:0 20px;
}
.feedhome-grid-2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.feedhome-policy-card{
  border:1px solid var(--feedhome-line);
  border-radius:24px;
  background:var(--feedhome-paper);
  padding:22px;
}
.feedhome-policy-card h3{
  margin:0;
  color:var(--feedhome-title);
  font-size:clamp(20px,1.55vw,24px);
  line-height:1.36;
  font-weight:730;
  letter-spacing:-.045em;
}
.feedhome-policy-card h3 .accent{color:var(--feedhome-primary)}
.feedhome-policy-card p{
  margin:10px 0 0;
  color:var(--feedhome-text);
  font-size:14px;
  line-height:1.72;
}
.feedhome-list{
  list-style:none;
  margin:16px 0 0;
  padding:0;
  display:grid;
  gap:7px;
}
.feedhome-list li{
  position:relative;
  padding-left:20px;
  color:var(--feedhome-text);
  font-size:14px;
  line-height:1.58;
}
.feedhome-list li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color:var(--feedhome-primary);
  font-weight:900;
}
.feedhome-list.is-plus li::before{
  content:"+";
  color:var(--feedhome-secondary);
}
.feedhome-option-table{
  border:1px solid var(--feedhome-line);
  border-radius:24px;
  overflow:hidden;
  background:var(--feedhome-paper);
}
.feedhome-option-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 170px;
  gap:16px;
  align-items:center;
  padding:16px 20px;
  border-top:1px solid var(--feedhome-soft);
}
.feedhome-option-row:first-child{border-top:0}
.feedhome-option-row b{
  color:var(--feedhome-title);
  font-size:14.5px;
  font-weight:720;
}
.feedhome-option-row span{
  justify-self:end;
  color:var(--feedhome-brown);
  font-size:14px;
  font-weight:760;
  text-align:right;
}

/* =========================================================
   PRICE DETAIL MODAL
   ========================================================= */

.feedhome-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(24,18,14,.58);
}
.feedhome-modal.is-open{display:flex}
.feedhome-modal-panel{
  position:relative;
  width:min(1240px,calc(100vw - 48px));
  max-height:min(86vh,920px);
  border-radius:28px;
  background:var(--feedhome-paper);
  box-shadow:var(--feedhome-modal-shadow);
  overflow:hidden;
  animation:feedhomeModalIn .22s ease both;
}
@keyframes feedhomeModalIn{
  from{opacity:0;transform:translateY(14px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.feedhome-modal-scroll{
  max-height:min(86vh,920px);
  overflow:auto;
  overscroll-behavior:contain;
}
.feedhome-modal-close{
  position:absolute;
  top:18px;
  right:18px;
  z-index:3;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border:1px solid rgba(68,68,68,.12);
  border-radius:50%;
  background:rgba(255,255,255,.92);
  color:var(--feedhome-title);
  font-size:24px;
  line-height:1;
  cursor:pointer;
}
.feedhome-modal-hero{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:24px;
  padding:clamp(28px,4vw,48px);
  background:var(--feedhome-paper);
  border-bottom:1px solid var(--feedhome-line);
}
.feedhome-modal-label{margin-bottom:14px}
.feedhome-panel-title{
  margin:0;
  color:var(--feedhome-title);
  font-size:var(--feedhome-panel-title-pc);
  line-height:1.34;
  font-weight:760;
  letter-spacing:-.05em;
}
.feedhome-modal-desc{
  margin:13px 0 0;
  color:var(--feedhome-text);
  font-size:var(--feedhome-body-pc);
  line-height:1.78;
  font-weight:500;
}
.feedhome-modal-price-box{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:24px;
  border:1px solid var(--feedhome-line);
  border-radius:22px;
  background:var(--feedhome-soft);
}
.feedhome-modal-price-box span{
  color:var(--feedhome-muted);
  font-size:13px;
  font-weight:700;
}
.feedhome-modal-price-box strong{
  display:block;
  margin-top:6px;
  color:var(--feedhome-title);
  font-size:clamp(34px,3.2vw,46px);
  line-height:1;
  font-weight:760;
  letter-spacing:-.06em;
}
.feedhome-modal-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px;
}
.feedhome-modal-tag{
  background:var(--feedhome-soft);
  color:var(--feedhome-muted);
}
.feedhome-modal-body{
  display:block;
  padding:0;
}
.feedhome-modal-accordion-area{
  display:grid;
  gap:12px;
  padding:clamp(24px,3vw,36px) clamp(24px,4vw,48px) clamp(28px,4vw,48px);
}
.feedhome-modal-accordion{
  border:1px solid var(--feedhome-line);
  border-radius:20px;
  background:var(--feedhome-paper);
  overflow:hidden;
}
.feedhome-modal-accordion summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:18px 20px;
}
.feedhome-modal-accordion summary::-webkit-details-marker{display:none}
.feedhome-modal-accordion-title{min-width:0}
.feedhome-modal-accordion-title b{
  display:block;
  color:var(--feedhome-title);
  font-size:18px;
  line-height:1.38;
  font-weight:760;
  letter-spacing:-.04em;
}
.feedhome-modal-accordion-title span{
  display:block;
  margin-top:4px;
  color:var(--feedhome-muted);
  font-size:13px;
  line-height:1.5;
  font-weight:500;
}
.feedhome-modal-accordion summary::after{
  content:"+";
  flex:0 0 32px;
  width:32px;
  height:32px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:var(--feedhome-primary-soft);
  color:var(--feedhome-primary);
  font-size:21px;
  font-weight:760;
  line-height:1;
}
.feedhome-modal-accordion[open] summary::after{content:"–"}
.feedhome-modal-accordion-body{padding:0 20px 20px}
.feedhome-modal-list{
  list-style:none;
  margin:0;
  padding:2px 0 0;
}
.feedhome-modal-list li{
  position:relative;
  padding-left:18px;
  color:var(--feedhome-text);
  font-size:15px;
  line-height:1.7;
  font-weight:500;
}
.feedhome-modal-list li + li{margin-top:7px}
.feedhome-modal-list li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color:var(--feedhome-primary);
  font-weight:760;
}
.feedhome-modal-option-table{
  display:grid;
  margin-top:2px;
  border:1px solid var(--feedhome-line);
  border-radius:20px;
  overflow:hidden;
}
.feedhome-modal-option-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 180px;
  gap:14px;
  align-items:center;
  padding:14px 16px;
  border-top:1px solid var(--feedhome-line);
}
.feedhome-modal-option-row:first-child{border-top:0}
.feedhome-modal-option-row b{
  color:var(--feedhome-title);
  font-size:14.5px;
  font-weight:760;
}
.feedhome-modal-option-row span{
  justify-self:end;
  color:var(--feedhome-brown);
  font-size:14px;
  font-weight:760;
  text-align:right;
}
body.feedhome-modal-lock{overflow:hidden}

/* =========================================================
   SAMPLE FULLSCREEN MODAL
   ========================================================= */

.feedhome-sample-modal{
  position:fixed;
  inset:0;
  z-index:10050;
  display:none;
  background:#fff;
}
.feedhome-sample-modal.is-open{display:block}
.feedhome-sample-topbar{
  position:absolute;
  left:0;
  right:0;
  top:0;
  z-index:3;
  height:62px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 18px;
  background:#111315;
  color:#fff;
  box-shadow:0 8px 26px rgba(0,0,0,.22);
}
.feedhome-sample-title{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.feedhome-sample-title b{
  display:block;
  color:#fff;
  font-size:15px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:-.03em;
}
.feedhome-sample-title span{
  display:block;
  max-width:70vw;
  overflow:hidden;
  color:rgba(255,255,255,.66);
  font-size:11px;
  line-height:1.2;
  font-weight:600;
  white-space:nowrap;
  text-overflow:ellipsis;
  letter-spacing:0;
}
.feedhome-sample-close{
  flex:0 0 auto;
  width:44px;
  height:44px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;
  background:#fff;
  color:#111315;
  display:grid;
  place-items:center;
  font-size:28px;
  line-height:1;
  font-weight:400;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.feedhome-sample-frame-wrap{
  position:absolute;
  left:0;
  right:0;
  top:62px;
  bottom:0;
  background:#f4f4f4;
}
.feedhome-sample-frame{
  display:block;
  width:100%;
  height:100%;
  border:0;
  background:#fff;
}
.feedhome-sample-loading{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 16px;
  border-radius:999px;
  background:#fff;
  color:#333;
  font-size:13px;
  font-weight:760;
  box-shadow:0 10px 26px rgba(0,0,0,.12);
}
.feedhome-sample-modal.is-loaded .feedhome-sample-loading{display:none}
body.feedhome-sample-lock{overflow:hidden}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1024px){
  .feedhome-managed-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feedhome-modal-hero{grid-template-columns:1fr}
}

@media(max-width:720px){
  .feedhome-page{font-size:var(--feedhome-body-mo)}
  .feedhome-container-wide{width:min(100%,calc(100% - var(--feedhome-side-mo)))}
  .feedhome-section{padding:var(--feedhome-section-mo) 0}
  .feedhome-section-head{
    margin-bottom:24px;
    text-align:left;
  }
  .feedhome-kicker{
    min-height:30px;
    padding:0 13px;
    font-size:11px;
  }
  .feedhome-section-title{
    margin-left:0;
    margin-right:0;
    font-size:var(--feedhome-section-title-mo);
    line-height:1.32;
    max-width:97%;
  }
  .feedhome-section-desc{
    margin-left:0;
    margin-right:0;
    font-size:var(--feedhome-body-mo);
    line-height:1.74;
  }

  .feedhome-managed-box{
    padding:22px;
    border-radius:26px;
  }
  .feedhome-managed-head{grid-template-columns:1fr}
  .feedhome-managed-title{
    font-size:var(--feedhome-panel-title-mo);
    line-height:1.36;
  }
  .feedhome-managed-desc{
    font-size:14px;
    line-height:1.72;
  }
  .feedhome-managed-stamp{
    min-width:0;
    padding:18px 20px;
  }
  .feedhome-managed-grid,
  .feedhome-grid-2{grid-template-columns:1fr}

  .feedhome-price-grid{
    display:flex;
    grid-template-columns:none;
    gap:14px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-padding-left:2px;
    -webkit-overflow-scrolling:touch;
    padding:0 2px 12px;
    margin-left:-2px;
    margin-right:-2px;
  }
  .feedhome-price-grid::-webkit-scrollbar{height:0}
  .feedhome-price-card{
    flex:0 0 min(86vw,360px);
    width:min(86vw,360px);
    min-width:min(86vw,360px);
    max-width:360px;
    border-radius:24px;
    scroll-snap-align:start;
    scroll-snap-stop:always;
  }
  .feedhome-price-card-top{
    min-height:48px;
    font-size:13px;
  }
  .feedhome-price-card-body{
    min-height:392px;
    padding:22px 20px 20px;
  }
  .feedhome-price-title{
    font-size:21px;
    line-height:1.35;
  }
  .feedhome-price-desc{
    min-height:auto;
    font-size:14.2px;
    line-height:1.68;
  }
  .feedhome-price strong{font-size:32px}
  .feedhome-price-support{
    min-height:50px;
    padding:12px 13px;
  }
  .feedhome-price-support b{font-size:12.3px}
  .feedhome-price-support span{font-size:13px}
  .feedhome-price-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    padding-top:18px;
  }
  .feedhome-price-actions .feedhome-button{
    width:100%;
    min-width:0;
    min-height:48px;
    padding:0 8px;
    font-size:12.8px;
    letter-spacing:-.04em;
    white-space:nowrap;
  }
  .feedhome-price-scroll-hint{display:block}

  .feedhome-note-box{
    text-align:left;
    font-size:14px;
  }
  .feedhome-note-box.feedhome-custom-cta{
    grid-template-columns:1fr;
    gap:14px;
    padding:18px;
  }
  .feedhome-custom-cta-title{font-size:16px}
  .feedhome-custom-cta-desc{font-size:13.5px}
  .feedhome-custom-cta .feedhome-button{
    width:100%;
    min-height:48px;
  }

  .feedhome-collapse summary{
    padding:17px 18px;
    align-items:flex-start;
  }
  .feedhome-collapse-title b{
    font-size:16px;
    line-height:1.36;
  }
  .feedhome-collapse-title span:not(.feedhome-collapse-kicker){font-size:12.8px}
  .feedhome-collapse-body{padding:0 18px 18px}
  .feedhome-policy-card{
    padding:20px;
    border-radius:20px;
  }
  .feedhome-policy-card h3{font-size:clamp(18px,5vw,21px)}
  .feedhome-option-row{
    grid-template-columns:1fr;
    gap:4px;
    padding:15px 17px;
  }
  .feedhome-option-row span{
    justify-self:start;
    text-align:left;
  }

  .feedhome-modal{
    align-items:stretch;
    padding:0;
  }
  .feedhome-modal-panel{
    width:100%;
    height:100dvh;
    max-height:100dvh;
    border-radius:0;
  }
  .feedhome-modal-scroll{
    max-height:100dvh;
    padding-bottom:24px;
  }
  .feedhome-modal-close{
    top:14px;
    right:14px;
    width:42px;
    height:42px;
  }
  .feedhome-modal-hero{
    padding:60px 20px 24px;
  }
  .feedhome-panel-title{font-size:var(--feedhome-panel-title-mo)}
  .feedhome-modal-desc{
    font-size:15px;
    line-height:1.72;
  }
  .feedhome-modal-accordion-area{
    padding:18px 16px 24px;
    gap:10px;
  }
  .feedhome-modal-accordion{border-radius:18px}
  .feedhome-modal-accordion summary{
    padding:16px 17px;
    align-items:flex-start;
  }
  .feedhome-modal-accordion-title b{
    font-size:16px;
    line-height:1.38;
  }
  .feedhome-modal-accordion-title span{font-size:12.5px}
  .feedhome-modal-accordion-body{padding:0 17px 17px}
  .feedhome-modal-list li{
    font-size:14.5px;
    line-height:1.68;
  }
  .feedhome-modal-option-row{
    grid-template-columns:1fr;
    gap:4px;
  }
  .feedhome-modal-option-row span{
    justify-self:start;
    text-align:left;
  }

  .feedhome-sample-topbar{
    height:58px;
    padding:0 12px 0 14px;
  }
  .feedhome-sample-title b{font-size:14px}
  .feedhome-sample-title span{max-width:64vw}
  .feedhome-sample-close{
    width:42px;
    height:42px;
    font-size:27px;
  }
  .feedhome-sample-frame-wrap{top:58px}
}

@media(max-width:390px){
  .feedhome-container-wide{width:calc(100% - 20px)}
  .feedhome-price-card{
    flex-basis:88vw;
    width:88vw;
    min-width:88vw;
  }
  .feedhome-price-card-body{min-height:388px}
  .feedhome-price-actions{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
  }
  .feedhome-price-actions .feedhome-button{
    min-height:46px;
    padding:0 6px;
    font-size:12.2px;
  }
  .feedhome-price-support{
    align-items:flex-start;
    flex-direction:column;
    gap:4px;
  }
  .feedhome-price-support span{text-align:left}
}


/* =========================================================
   MERGED FROM 자주하는 질문1.html
   ========================================================= */

/* =========================================================
   LANDINGPAGER FEEDHOME FAQ SECTION V1
   PATCH 2026-05-18 / FAQ ACCORDION MOCKUP
   목적:
   - V3 feedhome 기준 FAQ 섹션 HTML 시안
   - 가격/제작/수정/운영/SEO 관련 핵심 FAQ 8개 우선 노출
   - PC 2단 구성 + 모바일 1열 아코디언
   보호:
   - 기존 feedhome 톤앤매너와 CSS 변수 규칙을 따르는 독립형 섹션
   ========================================================= */

:root{color-scheme:light}
html,body{margin:0;min-height:100%;background:#f8f3ec}
body{font-family:Pretendard,"Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif}
*{box-sizing:border-box}

.feedhome-page{
  --feedhome-wide-container:1240px;
  --feedhome-section-pc:92px;
  --feedhome-section-mo:52px;
  --feedhome-side-pc:36px;
  --feedhome-side-mo:24px;

  --feedhome-bg:#f8f3ec;
  --feedhome-paper:#fff;
  --feedhome-soft:#f5efe7;
  --feedhome-line:#e2d4c5;
  --feedhome-line-strong:#c7a274;

  --feedhome-title:#333;
  --feedhome-text:#444;
  --feedhome-muted:#5f6876;
  --feedhome-deep:#111315;
  --feedhome-primary:#8f4d5a;
  --feedhome-primary-soft:#f6e9ed;
  --feedhome-brown:#5a4334;

  --feedhome-radius-xl:32px;
  --feedhome-section-title-pc:clamp(30px,2.25vw,38px);
  --feedhome-section-title-mo:clamp(23px,5.9vw,28px);
  --feedhome-body-pc:16px;
  --feedhome-body-mo:14.5px;

  min-height:100vh;
  background:var(--feedhome-bg);
  color:var(--feedhome-text);
  font-size:var(--feedhome-body-pc);
  line-height:1.72;
  font-weight:450;
  letter-spacing:-.035em;
  word-break:keep-all;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.feedhome-page a{color:inherit;text-decoration:none}
.feedhome-page button{font:inherit}
.feedhome-page strong{font-weight:760;color:var(--feedhome-title)}

.feedhome-container-wide{
  width:min(var(--feedhome-wide-container),calc(100% - var(--feedhome-side-pc)));
  margin:0 auto;
}

.feedhome-section{
  padding:var(--feedhome-section-pc) 0;
  background:var(--feedhome-bg);
}

.feedhome-section-head{
  max-width:820px;
  margin:0 auto 38px;
  text-align:center;
}

.feedhome-kicker{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:fit-content;
  min-height:34px;
  padding:0 16px;
  margin-bottom:14px;
  border:1px solid #d7c3ad;
  border-radius:999px;
  background:#fffaf5;
  color:#5a4334;
  font-size:12px;
  font-weight:820;
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.feedhome-section-title{
  max-width:min(97%,960px);
  margin:0 auto;
  color:var(--feedhome-title);
  font-size:var(--feedhome-section-title-pc);
  line-height:1.28;
  font-weight:730;
  letter-spacing:-.055em;
}

.feedhome-section-desc{
  max-width:760px;
  margin:14px auto 0;
  color:var(--feedhome-text);
  font-size:var(--feedhome-body-pc);
  line-height:1.78;
  font-weight:500;
}

.feedhome-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 20px;
  border:1px solid transparent;
  border-radius:999px;
  background:var(--feedhome-deep);
  color:#fff;
  font-size:14px;
  font-weight:760;
  line-height:1;
  letter-spacing:-.035em;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}

.feedhome-button:hover{transform:translateY(-1px)}
.feedhome-button.is-primary{background:var(--feedhome-primary);border-color:var(--feedhome-primary);color:#fff}
.feedhome-button.is-outline{background:#fff;border-color:var(--feedhome-line);color:var(--feedhome-title)}

/* =========================================================
   FAQ SECTION
   ========================================================= */

.feedhome-faq-layout{
  display:grid;
  grid-template-columns:360px minmax(0,1fr);
  gap:26px;
  align-items:start;
}

.feedhome-faq-aside{
  position:sticky;
  top:24px;
  border:1px solid var(--feedhome-line);
  border-radius:30px;
  background:#fff;
  overflow:hidden;
}

.feedhome-faq-aside-top{
  padding:28px 28px 26px;
  background:#1b1718;
  color:#fff;
}

.feedhome-faq-aside-kicker{
  display:block;
  margin-bottom:14px;
  color:#dcc8b5;
  font-size:11px;
  line-height:1;
  font-weight:850;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.feedhome-faq-aside-title{
  margin:0;
  color:#fff;
  font-size:25px;
  line-height:1.32;
  font-weight:820;
  letter-spacing:-.055em;
}

.feedhome-faq-aside-desc{
  margin:14px 0 0;
  color:rgba(255,255,255,.78);
  font-size:14px;
  line-height:1.75;
  font-weight:500;
}

.feedhome-faq-category{
  padding:20px;
  display:grid;
  gap:10px;
}

.feedhome-faq-category-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:48px;
  padding:0 15px;
  border:1px solid var(--feedhome-line);
  border-radius:16px;
  background:#fffaf5;
  color:var(--feedhome-title);
  font-size:13.5px;
  font-weight:720;
  line-height:1.2;
}

.feedhome-faq-category-item span:last-child{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:26px;
  height:26px;
  border-radius:999px;
  background:var(--feedhome-primary-soft);
  color:var(--feedhome-primary);
  font-size:12px;
  font-weight:850;
}

.feedhome-faq-aside-action{
  padding:0 20px 22px;
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}

.feedhome-faq-list{
  display:grid;
  gap:12px;
}

.feedhome-faq-item{
  border:1px solid var(--feedhome-line);
  border-radius:24px;
  background:#fff;
  overflow:hidden;
}

.feedhome-faq-question{
  width:100%;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:15px;
  align-items:center;
  min-height:78px;
  padding:22px 24px;
  border:0;
  background:transparent;
  color:var(--feedhome-title);
  text-align:left;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.feedhome-faq-num{
  display:inline-grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:999px;
  background:var(--feedhome-soft);
  color:var(--feedhome-brown);
  font-size:13px;
  font-weight:850;
  letter-spacing:-.02em;
}

.feedhome-faq-qtext{
  color:var(--feedhome-title);
  font-size:18px;
  line-height:1.45;
  font-weight:780;
  letter-spacing:-.05em;
}

.feedhome-faq-plus{
  position:relative;
  width:38px;
  height:38px;
  border-radius:999px;
  background:var(--feedhome-primary-soft);
  color:var(--feedhome-primary);
  flex:0 0 auto;
}

.feedhome-faq-plus::before,
.feedhome-faq-plus::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:14px;
  height:2px;
  border-radius:999px;
  background:currentColor;
  transform:translate(-50%,-50%);
  transition:transform .22s ease,opacity .22s ease;
}

.feedhome-faq-plus::after{
  transform:translate(-50%,-50%) rotate(90deg);
}

.feedhome-faq-item.is-open .feedhome-faq-plus::after{
  opacity:0;
  transform:translate(-50%,-50%) rotate(0deg);
}

.feedhome-faq-answer{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .32s ease;
}

.feedhome-faq-item.is-open .feedhome-faq-answer{
  grid-template-rows:1fr;
}

.feedhome-faq-answer-inner{
  overflow:hidden;
}

.feedhome-faq-answer-content{
  padding:0 24px 24px 77px;
  color:var(--feedhome-text);
  font-size:15px;
  line-height:1.82;
  font-weight:500;
}

.feedhome-faq-answer-content p{
  margin:0;
}

.feedhome-faq-answer-content p + p{
  margin-top:10px;
}

.feedhome-faq-answer-content ul{
  margin:10px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:6px;
}

.feedhome-faq-answer-content li{
  position:relative;
  padding-left:13px;
}

.feedhome-faq-answer-content li::before{
  content:"";
  position:absolute;
  left:0;
  top:.75em;
  width:4px;
  height:4px;
  border-radius:999px;
  background:var(--feedhome-primary);
}

.feedhome-faq-bottom{
  margin-top:18px;
  padding:20px 22px;
  border:1px solid var(--feedhome-line);
  border-radius:24px;
  background:#fffaf5;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px;
  align-items:center;
}

.feedhome-faq-bottom b{
  display:block;
  margin-bottom:5px;
  color:var(--feedhome-title);
  font-size:17px;
  line-height:1.35;
  font-weight:790;
  letter-spacing:-.045em;
}

.feedhome-faq-bottom p{
  margin:0;
  color:var(--feedhome-text);
  font-size:14px;
  line-height:1.68;
  font-weight:520;
}

.feedhome-faq-bottom .feedhome-button{
  min-width:142px;
}

@media(max-width:980px){
  .feedhome-faq-layout{
    grid-template-columns:1fr;
  }

  .feedhome-faq-aside{
    position:relative;
    top:auto;
  }

  .feedhome-faq-category{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .feedhome-faq-aside-action{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:720px){
  .feedhome-container-wide{
    width:min(100%,calc(100% - var(--feedhome-side-mo)));
  }

  .feedhome-section{
    padding:var(--feedhome-section-mo) 0;
  }

  .feedhome-section-head{
    margin-bottom:26px;
    text-align:left;
  }

  .feedhome-kicker{
    min-height:29px;
    padding:0 13px;
    font-size:10.5px;
  }

  .feedhome-section-title{
    margin-left:0;
    margin-right:0;
    font-size:var(--feedhome-section-title-mo);
    line-height:1.34;
    letter-spacing:-.06em;
  }

  .feedhome-section-desc{
    margin-left:0;
    margin-right:0;
    font-size:var(--feedhome-body-mo);
    line-height:1.72;
  }

  .feedhome-faq-layout{
    gap:16px;
  }

  .feedhome-faq-aside{
    border-radius:24px;
  }

  .feedhome-faq-aside-top{
    padding:22px 20px;
  }

  .feedhome-faq-aside-title{
    font-size:21px;
  }

  .feedhome-faq-aside-desc{
    font-size:13.4px;
  }

  .feedhome-faq-category{
    display:none;
  }

  .feedhome-faq-aside-action{
    grid-template-columns:1fr;
    padding:18px 18px 20px;
  }

  .feedhome-faq-item{
    border-radius:20px;
  }

  .feedhome-faq-question{
    min-height:66px;
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:10px;
    padding:18px 16px;
  }

  .feedhome-faq-num{
    width:32px;
    height:32px;
    font-size:11.5px;
  }

  .feedhome-faq-qtext{
    font-size:15.6px;
    line-height:1.45;
  }

  .feedhome-faq-plus{
    width:32px;
    height:32px;
  }

  .feedhome-faq-answer-content{
    padding:0 16px 20px 58px;
    font-size:13.8px;
    line-height:1.78;
  }

  .feedhome-faq-bottom{
    display:none;
  }
}

/* =========================================================
   PATCH 2026-05-18 / FEEDHOME FAQ V2 CLEAN
   목적:
   - 상단 설명 문구 삭제
   - 왼쪽 안내 카드 하단의 카테고리/버튼 영역 삭제
   - FAQ 본문 아코디언 구조 유지
   보호:
   - FAQ 질문/답변 내용, 첫 번째 기본 오픈, 클릭 펼침 기능 유지
   ========================================================= */
.feedhome-faq-section .feedhome-section-head{
  margin-bottom:34px !important;
}

.feedhome-faq-aside{
  background:#1b1718 !important;
}

.feedhome-faq-aside-top{
  border-radius:30px !important;
}

.feedhome-faq-category,
.feedhome-faq-aside-action{
  display:none !important;
}

@media(max-width:720px){
  .feedhome-faq-section .feedhome-section-head{
    margin-bottom:24px !important;
  }

  .feedhome-faq-aside-top{
    border-radius:24px !important;
  }
}


/* =========================================================
   MERGED FROM 인사이트1.html
   ========================================================= */

/* =========================================================
   LANDINGPAGER FEEDHOME INSIGHT SECTION V2
   PATCH 2026-05-18 / INSIGHT MIXED CONTENT + MORE + MODAL
   목적:
   - '공식 블로그'를 '랜딩페이저 인사이트'로 변경
   - 외부 블로그 글은 새창 이동
   - 자체 기획노트/제작노트는 모달로 보기
   - 기본 3개 노출 + 더보기 클릭 시 추가 콘텐츠 펼침
   보호:
   - 게시판/DB 기능 없이 정적 HTML 시안으로 구성
   - 추후 콘텐츠 보드/블로그/기획노트 연동 시 카드 데이터만 교체 가능
   ========================================================= */

:root{color-scheme:light}
html,body{margin:0;min-height:100%;background:#f8f3ec}
body{font-family:Pretendard,"Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif}
*{box-sizing:border-box}

.feedhome-page{
  --feedhome-wide-container:1240px;
  --feedhome-section-pc:90px;
  --feedhome-section-mo:50px;
  --feedhome-side-pc:36px;
  --feedhome-side-mo:24px;

  --feedhome-bg:#f8f3ec;
  --feedhome-paper:#fff;
  --feedhome-soft:#f5efe7;
  --feedhome-line:#e2d4c5;
  --feedhome-line-strong:#c7a274;

  --feedhome-title:#333;
  --feedhome-text:#444;
  --feedhome-muted:#5f6876;
  --feedhome-deep:#111315;
  --feedhome-primary:#8f4d5a;
  --feedhome-primary-soft:#f6e9ed;
  --feedhome-brown:#5a4334;

  --feedhome-section-title-pc:clamp(30px,2.25vw,38px);
  --feedhome-section-title-mo:clamp(23px,5.8vw,28px);
  --feedhome-body-pc:16px;
  --feedhome-body-mo:14.5px;

  min-height:100vh;
  background:var(--feedhome-bg);
  color:var(--feedhome-text);
  font-size:var(--feedhome-body-pc);
  line-height:1.72;
  font-weight:450;
  letter-spacing:-.035em;
  word-break:keep-all;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.feedhome-page a{color:inherit;text-decoration:none}
.feedhome-page button{font:inherit}
.feedhome-page strong{font-weight:760;color:var(--feedhome-title)}

.feedhome-container-wide{
  width:min(var(--feedhome-wide-container),calc(100% - var(--feedhome-side-pc)));
  margin:0 auto;
}

.feedhome-section{
  padding:var(--feedhome-section-pc) 0;
  background:var(--feedhome-bg);
}

.feedhome-section-head{
  max-width:860px;
  margin:0 auto 36px;
  text-align:center;
}

.feedhome-kicker{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:fit-content;
  min-height:34px;
  padding:0 16px;
  margin-bottom:14px;
  border:1px solid #d7c3ad;
  border-radius:999px;
  background:#fffaf5;
  color:#5a4334;
  font-size:12px;
  font-weight:820;
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.feedhome-section-title{
  max-width:min(97%,960px);
  margin:0 auto;
  color:var(--feedhome-title);
  font-size:var(--feedhome-section-title-pc);
  line-height:1.28;
  font-weight:730;
  letter-spacing:-.055em;
}

.feedhome-section-desc{
  max-width:780px;
  margin:14px auto 0;
  color:var(--feedhome-text);
  font-size:var(--feedhome-body-pc);
  line-height:1.78;
  font-weight:500;
}

.feedhome-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 20px;
  border:1px solid transparent;
  border-radius:999px;
  background:var(--feedhome-deep);
  color:#fff;
  font-size:14px;
  font-weight:760;
  line-height:1;
  letter-spacing:-.035em;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}

.feedhome-button:hover{transform:translateY(-1px)}
.feedhome-button.is-primary{background:var(--feedhome-primary);border-color:var(--feedhome-primary);color:#fff}
.feedhome-button.is-outline{background:#fff;border-color:var(--feedhome-line);color:var(--feedhome-title)}
.feedhome-button.is-soft{
  background:#fff;
  border-color:#e9b9c3;
  color:var(--feedhome-primary);
}

/* =========================================================
   INSIGHT SECTION
   ========================================================= */

.feedhome-insight-section{
  background:#fff;
}

.feedhome-insight-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.feedhome-insight-card{
  position:relative;
  min-height:220px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:28px 28px 26px;
  border:1px solid var(--feedhome-line);
  border-radius:28px;
  background:#fff;
  overflow:hidden;
  transition:border-color .18s ease,transform .18s ease,opacity .24s ease;
}

.feedhome-insight-card:hover{
  transform:translateY(-2px);
  border-color:var(--feedhome-line-strong);
}

.feedhome-insight-card.is-hidden{
  display:none;
}

.feedhome-insight-card::after{
  content:"";
  position:absolute;
  right:-58px;
  top:-58px;
  width:150px;
  height:150px;
  border-radius:999px;
  background:var(--feedhome-soft);
  opacity:.74;
  pointer-events:none;
}

.feedhome-insight-category{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  width:fit-content;
  min-height:28px;
  padding:0 11px;
  margin-bottom:20px;
  border-radius:999px;
  background:var(--feedhome-primary-soft);
  color:var(--feedhome-primary);
  font-size:11.5px;
  line-height:1;
  font-weight:850;
  letter-spacing:-.025em;
}

.feedhome-insight-category.is-external{
  background:#f5efe7;
  color:#5a4334;
}

.feedhome-insight-title{
  position:relative;
  z-index:1;
  margin:0;
  color:var(--feedhome-title);
  font-size:20px;
  line-height:1.42;
  font-weight:790;
  letter-spacing:-.055em;
}

.feedhome-insight-desc{
  position:relative;
  z-index:1;
  margin:14px 0 0;
  color:var(--feedhome-text);
  font-size:14.5px;
  line-height:1.78;
  font-weight:520;
}

.feedhome-insight-action{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:fit-content;
  margin-top:24px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--feedhome-primary);
  font-size:13px;
  line-height:1;
  font-weight:800;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.feedhome-insight-action::after{
  content:"→";
  font-size:15px;
  line-height:1;
  transform:translateY(-1px);
}

.feedhome-insight-footer{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:24px;
}

.feedhome-insight-footer .feedhome-button{
  min-width:154px;
}

/* =========================================================
   MODAL
   ========================================================= */

.feedhome-insight-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  padding:32px;
  background:rgba(17,19,21,.62);
  backdrop-filter:blur(8px);
}

.feedhome-insight-modal.is-open{
  display:block;
}

.feedhome-insight-modal-box{
  position:relative;
  width:min(920px,100%);
  max-height:calc(100vh - 64px);
  margin:0 auto;
  border-radius:28px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 28px 80px rgba(0,0,0,.24);
}

.feedhome-insight-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:70px;
  padding:0 24px;
  border-bottom:1px solid var(--feedhome-line);
  background:#fff;
}

.feedhome-insight-modal-label{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  background:var(--feedhome-primary-soft);
  color:var(--feedhome-primary);
  font-size:11px;
  line-height:1;
  font-weight:850;
}

.feedhome-insight-modal-close{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border:1px solid var(--feedhome-line);
  border-radius:999px;
  background:#fff;
  color:var(--feedhome-title);
  font-size:22px;
  line-height:1;
  cursor:pointer;
}

.feedhome-insight-modal-body{
  max-height:calc(100vh - 134px);
  overflow:auto;
  padding:34px 38px 38px;
}

.feedhome-insight-modal-title{
  margin:0;
  color:var(--feedhome-title);
  font-size:30px;
  line-height:1.36;
  font-weight:820;
  letter-spacing:-.06em;
}

.feedhome-insight-modal-summary{
  margin:14px 0 24px;
  color:var(--feedhome-text);
  font-size:16px;
  line-height:1.78;
  font-weight:520;
}

.feedhome-insight-modal-content{
  color:var(--feedhome-text);
  font-size:15px;
  line-height:1.88;
  font-weight:500;
}

.feedhome-insight-modal-content p{
  margin:0 0 14px;
}

.feedhome-insight-modal-content h3{
  margin:28px 0 10px;
  color:var(--feedhome-title);
  font-size:18px;
  line-height:1.45;
  font-weight:790;
}

.feedhome-insight-modal-content ul{
  display:grid;
  gap:8px;
  margin:10px 0 18px;
  padding:0;
  list-style:none;
}

.feedhome-insight-modal-content li{
  position:relative;
  padding-left:14px;
}

.feedhome-insight-modal-content li::before{
  content:"";
  position:absolute;
  left:0;
  top:.78em;
  width:4px;
  height:4px;
  border-radius:999px;
  background:var(--feedhome-primary);
}

@media(max-width:980px){
  .feedhome-insight-grid{
    grid-template-columns:1fr;
  }

  .feedhome-insight-card{
    min-height:auto;
  }
}

@media(max-width:720px){
  .feedhome-container-wide{
    width:min(100%,calc(100% - var(--feedhome-side-mo)));
  }

  .feedhome-section{
    padding:var(--feedhome-section-mo) 0;
  }

  .feedhome-section-head{
    margin-bottom:26px;
    text-align:left;
  }

  .feedhome-kicker{
    min-height:29px;
    padding:0 13px;
    font-size:10.5px;
  }

  .feedhome-section-title{
    margin-left:0;
    margin-right:0;
    font-size:var(--feedhome-section-title-mo);
    line-height:1.34;
    letter-spacing:-.06em;
  }

  .feedhome-section-desc{
    margin-left:0;
    margin-right:0;
    font-size:var(--feedhome-body-mo);
    line-height:1.72;
  }

  .feedhome-insight-grid{
    gap:12px;
  }

  .feedhome-insight-card{
    padding:22px 20px 20px;
    border-radius:22px;
  }

  .feedhome-insight-category{
    min-height:26px;
    margin-bottom:14px;
    font-size:10.8px;
  }

  .feedhome-insight-title{
    font-size:17.2px;
    line-height:1.44;
  }

  .feedhome-insight-desc{
    margin-top:10px;
    font-size:13.6px;
    line-height:1.72;
  }

  .feedhome-insight-action{
    margin-top:18px;
    font-size:12.5px;
  }

  .feedhome-insight-footer{
    display:grid;
    grid-template-columns:1fr;
    margin-top:18px;
  }

  .feedhome-insight-footer .feedhome-button{
    width:100%;
  }

  .feedhome-insight-modal{
    padding:14px;
  }

  .feedhome-insight-modal-box{
    max-height:calc(100vh - 28px);
    border-radius:22px;
  }

  .feedhome-insight-modal-head{
    min-height:62px;
    padding:0 16px;
  }

  .feedhome-insight-modal-body{
    max-height:calc(100vh - 90px);
    padding:26px 20px 30px;
  }

  .feedhome-insight-modal-title{
    font-size:23px;
  }

  .feedhome-insight-modal-summary{
    font-size:14.2px;
    line-height:1.74;
  }

  .feedhome-insight-modal-content{
    font-size:13.8px;
    line-height:1.8;
  }
}

/* =========================================================
   MERGED FROM 문의하기1.html
   ========================================================= */

/* =========================================================
LANDINGPAGER CONTACT CTA + WIZARD MODAL V4
범위: .lp-contact-cta / .lp-contact-modal 내부
========================================================= */
.lp-contact-cta,
.lp-contact-modal{
  font-family:Pretendard,"Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;
  letter-spacing:-.035em;
  word-break:keep-all;
}

.lp-contact-cta *,
.lp-contact-modal *{
  box-sizing:border-box;
}

.lp-contact-cta{
  --lp-contact-bg:#111315;
  --lp-contact-text:#ffffff;
  --lp-contact-muted:rgba(255,255,255,.82);
  --lp-contact-line:rgba(255,255,255,.16);
  --lp-contact-primary:#8f4d5a;
  --lp-contact-kakao:#fee500;
  --lp-contact-radius:32px;
  padding:72px 0;
  background:#f8f3ec;
}

.lp-contact-cta__inner{
  width:min(1240px,calc(100% - 36px));
  margin:0 auto;
}

.lp-contact-cta__box{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:40px;
  align-items:center;
  padding:44px 46px;
  border-radius:var(--lp-contact-radius);
  background:var(--lp-contact-bg);
  color:var(--lp-contact-text);
}

.lp-contact-cta__kicker{
  display:block;
  margin-bottom:14px;
  color:#f0d3c4;
  font-size:12px;
  line-height:1;
  font-weight:850;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.lp-contact-cta__title{
  margin:0;
  color:var(--lp-contact-text);
  font-size:clamp(27px,2.2vw,38px);
  line-height:1.32;
  font-weight:820;
  letter-spacing:-.065em;
}

.lp-contact-cta__desc{
  max-width:760px;
  margin:18px 0 0;
  color:var(--lp-contact-muted);
  font-size:16px;
  line-height:1.82;
  font-weight:520;
}

.lp-contact-cta__actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  flex-wrap:wrap;
}

.lp-contact-cta__button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:136px;
  min-height:54px;
  padding:0 22px;
  border:1px solid transparent;
  border-radius:999px;
  background:#fff;
  color:#111315;
  font-size:14px;
  line-height:1;
  font-weight:820;
  text-decoration:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease;
}

.lp-contact-cta__button:hover{
  transform:translateY(-1px);
}

.lp-contact-cta__button--kakao{
  background:var(--lp-contact-kakao);
  color:#111315;
}

/* MODAL */
.lp-contact-modal{
  --lp-modal-primary:#8f4d5a;
  --lp-modal-bg:#f8f3ec;
  --lp-modal-paper:#fff;
  --lp-modal-line:#e2d4c5;
  --lp-modal-title:#222;
  --lp-modal-text:#4b4448;
  --lp-modal-muted:#6f6670;
  --lp-modal-deep:#111315;
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
  background:rgba(17,19,21,.68);
  backdrop-filter:blur(8px);
  padding:28px;
}

.lp-contact-modal.is-open{
  display:block;
}

.lp-contact-modal__dialog{
  width:min(920px,100%);
  max-height:calc(100vh - 56px);
  margin:0 auto;
  border-radius:30px;
  background:var(--lp-modal-paper);
  overflow:hidden;
  box-shadow:0 30px 90px rgba(0,0,0,.32);
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto;
}

.lp-contact-modal__head{
  min-height:74px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:17px 24px;
  background:var(--lp-modal-deep);
  color:#fff;
}

.lp-contact-modal__head small{
  display:block;
  margin-bottom:4px;
  color:#f0d3c4;
  font-size:11px;
  line-height:1;
  font-weight:850;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.lp-contact-modal__head b{
  display:block;
  font-size:21px;
  line-height:1.25;
  font-weight:800;
  letter-spacing:-.045em;
}

.lp-contact-modal__close{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  background:rgba(255,255,255,.1);
  color:#fff;
  font-size:24px;
  line-height:1;
  cursor:pointer;
}

.lp-contact-progress{
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 24px;
  border-bottom:1px solid var(--lp-modal-line);
  background:#fff;
}

.lp-contact-progress__bar{
  flex:1;
  height:7px;
  border-radius:999px;
  background:#eee5dc;
  overflow:hidden;
}

.lp-contact-progress__bar span{
  display:block;
  width:0%;
  height:100%;
  border-radius:999px;
  background:var(--lp-modal-primary);
  transition:width .24s ease;
}

.lp-contact-progress__count{
  flex:0 0 auto;
  min-width:68px;
  text-align:right;
  color:#5e5359;
  font-size:12.5px;
  line-height:1;
  font-weight:900;
}

.lp-contact-modal__body{
  overflow:auto;
  padding:26px;
  background:var(--lp-modal-bg);
}

.lp-contact-step{
  display:none;
  min-height:430px;
}

.lp-contact-step.is-active{
  display:block;
}

.lp-contact-card{
  min-height:430px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:30px;
  border:1px solid #ead8c4;
  border-radius:26px;
  background:#fffaf5;
}

.lp-contact-card--white{
  justify-content:flex-start;
  background:#fff;
  border-color:var(--lp-modal-line);
}

.lp-contact-card__kicker{
  display:block;
  margin-bottom:10px;
  color:var(--lp-modal-primary);
  font-size:12px;
  line-height:1;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.lp-contact-card__title{
  margin:0;
  color:var(--lp-modal-title);
  font-size:30px;
  line-height:1.28;
  font-weight:820;
  letter-spacing:-.06em;
}

.lp-contact-card__desc{
  max-width:720px;
  margin:14px 0 0;
  color:var(--lp-modal-text);
  font-size:15.5px;
  line-height:1.78;
  font-weight:500;
}

.lp-contact-flow{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
  margin-top:24px;
}

.lp-contact-flow__item{
  min-height:76px;
  padding:14px;
  border:1px solid #eadfd3;
  border-radius:16px;
  background:#fff;
  color:#554a50;
  font-size:12.8px;
  line-height:1.45;
  font-weight:760;
}

.lp-contact-flow__item b{
  display:block;
  margin-bottom:5px;
  color:var(--lp-modal-primary);
  font-size:12px;
  line-height:1;
  font-weight:900;
}

.lp-contact-note{
  margin-top:20px;
  padding:15px 18px;
  border-radius:18px;
  background:#111315;
  color:rgba(255,255,255,.84);
  font-size:14px;
  line-height:1.68;
}

.lp-contact-form-title{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 18px;
  color:var(--lp-modal-title);
  font-size:22px;
  line-height:1.34;
  font-weight:790;
  letter-spacing:-.045em;
}

.lp-contact-form-title em{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:34px;
  height:34px;
  border-radius:999px;
  background:#f8ecf0;
  color:var(--lp-modal-primary);
  font-style:normal;
  font-size:14px;
  font-weight:900;
}

.lp-contact-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.lp-contact-field{
  display:grid;
  gap:7px;
}

.lp-contact-field--full{
  grid-column:1/-1;
}

.lp-contact-field label,
.lp-contact-choice__label{
  color:#2d272b;
  font-size:13px;
  font-weight:850;
}

.lp-contact-field input,
.lp-contact-field select,
.lp-contact-field textarea{
  width:100%;
  min-height:48px;
  border:1px solid #ded4ca;
  border-radius:14px;
  background:#fff;
  padding:0 14px;
  color:#211b1f;
  font:inherit;
  font-size:14px;
  outline:none;
}

.lp-contact-field textarea{
  min-height:112px;
  padding:14px;
  line-height:1.65;
  resize:vertical;
}

.lp-contact-field input:focus,
.lp-contact-field select:focus,
.lp-contact-field textarea:focus{
  border-color:#b78a62;
  box-shadow:0 0 0 4px rgba(183,138,98,.12);
}

.lp-contact-choice{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}

.lp-contact-choice label{
  position:relative;
}

.lp-contact-choice input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.lp-contact-choice span{
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
  border:1px solid #ded4ca;
  border-radius:16px;
  background:#fff;
  color:#4f454a;
  text-align:center;
  font-size:13px;
  line-height:1.35;
  font-weight:800;
  cursor:pointer;
}

.lp-contact-choice input:checked + span{
  background:#111315;
  border-color:#111315;
  color:#fff;
}

.lp-contact-filebox{
  padding:18px;
  border:1px dashed #d7c2ad;
  border-radius:18px;
  background:#fffaf5;
}

.lp-contact-filebox input{
  height:auto;
  min-height:0;
  padding:12px;
  background:#fff;
}

.lp-contact-filebox small{
  display:block;
  margin-top:8px;
  color:#6d5f66;
  font-size:12.5px;
  line-height:1.6;
}

.lp-contact-policy{
  margin-top:14px;
  padding:16px;
  border:1px solid #ead8c4;
  border-radius:18px;
  background:#fffaf5;
  color:#5a5055;
  font-size:13px;
  line-height:1.65;
}

.lp-contact-check{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin-top:12px;
  color:#2d272b;
  font-size:13.5px;
  line-height:1.55;
  font-weight:760;
}

.lp-contact-check input{
  width:18px;
  height:18px;
  margin-top:2px;
  flex:0 0 auto;
}

.lp-contact-review{
  display:grid;
  gap:10px;
  margin-top:4px;
}

.lp-contact-review__row{
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  gap:14px;
  align-items:start;
  padding:13px 15px;
  border:1px solid #eee3d8;
  border-radius:14px;
  background:#fff;
}

.lp-contact-review__row b{
  color:#2d272b;
  font-size:13px;
  line-height:1.45;
}

.lp-contact-review__row span{
  color:#5b5157;
  font-size:13.5px;
  line-height:1.55;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

.lp-contact-complete{
  min-height:430px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:34px;
  border:1px solid #ead8c4;
  border-radius:26px;
  background:#fffaf5;
}

.lp-contact-complete__icon{
  width:64px;
  height:64px;
  margin-bottom:18px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:#111315;
  color:#fff;
  font-size:30px;
  font-weight:900;
}

.lp-contact-complete h3{
  margin:0;
  color:#211b1f;
  font-size:29px;
  line-height:1.28;
  font-weight:820;
  letter-spacing:-.055em;
}

.lp-contact-complete p{
  max-width:620px;
  margin:14px 0 0;
  color:#5a5055;
  font-size:15px;
  line-height:1.75;
}

.lp-contact-complete__next{
  width:min(100%,560px);
  margin-top:22px;
  padding:18px;
  border-radius:18px;
  background:#111315;
  color:rgba(255,255,255,.86);
  font-size:14px;
  line-height:1.7;
  text-align:left;
}

.lp-contact-complete__next b{
  display:block;
  margin-bottom:4px;
  color:#fff;
}

.lp-contact-modal__foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:72px;
  padding:14px 22px;
  border-top:1px solid var(--lp-modal-line);
  background:#fff;
}

.lp-contact-modal__foot small{
  color:var(--lp-modal-muted);
  font-size:12.5px;
  line-height:1.5;
}

.lp-contact-actions{
  display:flex;
  gap:8px;
  flex:0 0 auto;
}

.lp-contact-nav{
  min-height:44px;
  padding:0 18px;
  border:1px solid var(--lp-modal-line);
  border-radius:999px;
  background:#fff;
  color:#111315;
  font-size:14px;
  font-weight:850;
  cursor:pointer;
}

.lp-contact-nav--primary{
  border-color:var(--lp-modal-primary);
  background:var(--lp-modal-primary);
  color:#fff;
}

.lp-contact-nav--dark{
  border-color:#111315;
  background:#111315;
  color:#fff;
}

.lp-contact-nav[hidden]{
  display:none !important;
}

.lp-contact-nav:disabled{
  opacity:.45;
  cursor:not-allowed;
}

@media(max-width:820px){
  .lp-contact-cta{
    padding:48px 0;
  }

  .lp-contact-cta__inner{
    width:min(100%,calc(100% - 24px));
  }

  .lp-contact-cta__box{
    grid-template-columns:1fr;
    gap:28px;
    padding:32px 24px;
    border-radius:26px;
  }

  .lp-contact-cta__title{
    font-size:clamp(24px,6.2vw,30px);
  }

  .lp-contact-cta__desc{
    font-size:14.5px;
    line-height:1.76;
  }

  .lp-contact-cta__actions{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }

  .lp-contact-cta__button{
    width:100%;
    min-height:50px;
  }

  .lp-contact-modal{
    padding:0;
  }

  .lp-contact-modal__dialog{
    width:100%;
    height:100%;
    max-height:none;
    border-radius:0;
  }

  .lp-contact-modal__head{
    min-height:66px;
    padding:14px 16px;
  }

  .lp-contact-modal__head b{
    font-size:19px;
  }

  .lp-contact-progress{
    padding:11px 14px;
  }

  .lp-contact-progress__count{
    min-width:58px;
    font-size:12px;
  }

  .lp-contact-modal__body{
    padding:14px;
  }

  .lp-contact-step{
    min-height:auto;
  }

  .lp-contact-card,
  .lp-contact-complete{
    min-height:calc(100vh - 220px);
    padding:20px;
    border-radius:22px;
    justify-content:flex-start;
  }

  .lp-contact-card__title{
    font-size:25px;
  }

  .lp-contact-card__desc{
    font-size:14px;
  }

  .lp-contact-flow{
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  .lp-contact-flow__item{
    min-height:auto;
    padding:12px;
    font-size:12.5px;
  }

  .lp-contact-form-title{
    font-size:20px;
  }

  .lp-contact-grid,
  .lp-contact-choice{
    grid-template-columns:1fr;
  }

  .lp-contact-review__row{
    grid-template-columns:1fr;
    gap:4px;
  }

  .lp-contact-modal__foot{
    align-items:stretch;
    flex-direction:column;
    padding:12px 14px;
  }

  .lp-contact-modal__foot small{
    display:none;
  }

  .lp-contact-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    width:100%;
  }

  .lp-contact-nav{
    width:100%;
  }

  .lp-contact-actions .lp-contact-nav:only-child{
    grid-column:1/-1;
  }
}

/* =========================================================
PATCH 2026-05-18 / CONTACT WIZARD V5 GENERAL INQUIRY + PRIVACY MODAL
목적:
- 문의 범위를 신규 제작뿐 아니라 유지보수/수정/기능개발/기타 문의까지 확장
- 개인정보 취급방침을 별도 모달로 표시
보호:
- 단계형 위저드, 진행바, 최종 확인, 완료 화면 구조 유지
========================================================= */
.lp-contact-policy__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.lp-contact-policy__text{
  margin:0;
}

.lp-contact-policy__button{
  flex:0 0 auto;
  min-height:34px;
  padding:0 12px;
  border:1px solid #d9c5b2;
  border-radius:999px;
  background:#fff;
  color:#8f4d5a;
  font-size:12px;
  font-weight:850;
  cursor:pointer;
}

.lp-privacy-modal{
  position:fixed;
  inset:0;
  z-index:100000;
  display:none;
  padding:30px;
  background:rgba(17,19,21,.54);
  backdrop-filter:blur(6px);
}

.lp-privacy-modal.is-open{
  display:block;
}

.lp-privacy-modal__box{
  width:min(720px,100%);
  max-height:calc(100vh - 60px);
  margin:0 auto;
  border-radius:26px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 26px 70px rgba(0,0,0,.28);
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
}

.lp-privacy-modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:66px;
  padding:0 22px;
  border-bottom:1px solid #e2d4c5;
}

.lp-privacy-modal__head b{
  color:#222;
  font-size:18px;
  line-height:1.35;
  font-weight:850;
  letter-spacing:-.04em;
}

.lp-privacy-modal__close{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border:1px solid #e2d4c5;
  border-radius:999px;
  background:#fff;
  color:#222;
  font-size:22px;
  cursor:pointer;
}

.lp-privacy-modal__body{
  overflow:auto;
  padding:24px;
  color:#4b4448;
  font-size:14px;
  line-height:1.78;
}

.lp-privacy-modal__body h3{
  margin:22px 0 8px;
  color:#222;
  font-size:16px;
  line-height:1.45;
}

.lp-privacy-modal__body h3:first-child{
  margin-top:0;
}

.lp-privacy-modal__body p{
  margin:0 0 12px;
}

.lp-privacy-modal__body ul{
  display:grid;
  gap:6px;
  margin:8px 0 16px;
  padding-left:18px;
}

.lp-privacy-modal__foot{
  display:flex;
  justify-content:flex-end;
  padding:14px 22px;
  border-top:1px solid #e2d4c5;
  background:#fffaf5;
}

.lp-privacy-modal__confirm{
  min-height:40px;
  padding:0 18px;
  border:1px solid #8f4d5a;
  border-radius:999px;
  background:#8f4d5a;
  color:#fff;
  font-size:13px;
  font-weight:850;
  cursor:pointer;
}

@media(max-width:820px){
  .lp-contact-policy__top{
    display:grid;
    gap:10px;
  }

  .lp-contact-policy__button{
    width:100%;
  }

  .lp-privacy-modal{
    padding:12px;
  }

  .lp-privacy-modal__box{
    max-height:calc(100vh - 24px);
    border-radius:22px;
  }

  .lp-privacy-modal__body{
    padding:20px;
    font-size:13.5px;
  }
}


/* =========================================================
PATCH 2026-05-18 / CONTACT CTA V6 MOBILE 2 BUTTONS
목적:
- 모바일 CTA 버튼을 1줄 2개 배열로 변경
- 제작·운영 문의하기 / 카톡문의하기 버튼이 같은 줄에 보이도록 조정
보호:
- 문의 위저드 모달, 개인정보 취급방침 모달, 단계 진행 기능 유지
========================================================= */
@media(max-width:820px){
  .lp-contact-cta__actions{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
    align-items:stretch !important;
  }

  .lp-contact-cta__button{
    width:100% !important;
    min-width:0 !important;
    min-height:50px !important;
    padding:0 10px !important;
    font-size:13px !important;
    white-space:nowrap !important;
  }
}


/* =========================================================
   PATCH 2026-05-18 / LANDINGPAGER FEEDHOME INTEGRATED MAIN V1
   목적:
   - 기존 최종 파일의 메뉴/히어로 구조를 랜딩페이저 메인에 맞게 재구성
   - 섹션별 독립 시안을 하나의 HTML로 통합
   - 앵커 메뉴: 랜딩페이저는? / 제작 가이드 / 샘플·포트폴리오 / 가격정책 / FAQ / 문의하기
   보호:
   - 업로드된 각 섹션의 클래스/모달/스크립트 네임스페이스 유지
   - 기존 feedhome-* / lp-contact-* / fm-* 구조 유지
   ========================================================= */

html{scroll-behavior:smooth;scroll-padding-top:78px}
section[id]{scroll-margin-top:78px}
.fm-logo-mark{
  width:42px;height:42px;border-radius:14px;background:rgba(255,255,255,.16);color:#fff;display:grid;place-items:center;
  font-size:15px;font-weight:950;box-shadow:0 12px 30px rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.22);
  transition:background .28s ease,color .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.fm-header.is-scrolled .fm-logo-mark,
body.is-menu-open .fm-logo-mark{
  background:#111315;color:#fff;border-color:#111315;box-shadow:var(--fm-shadow);
}
.fm-header.is-scrolled .fm-logo-text b,
body.is-menu-open .fm-logo-text b{color:#211b1f}
.fm-hero-copy h1 .fm-desktop-copy,
.fm-hero-copy p .fm-desktop-copy,
.fm-hero-copy h1 .fm-mobile-copy,
.fm-hero-copy p .fm-mobile-copy{display:inline}
.feedhome-integrated-sections{background:#f8f3ec}
.feedhome-integrated-sections .feedhome-section:first-child{padding-top:92px}
.lp-contact-cta{margin-top:0}

@media(max-width:720px){
  html{scroll-padding-top:70px}
  section[id]{scroll-margin-top:70px}
  .fm-logo-mark{width:36px!important;height:36px!important;border-radius:12px!important;font-size:13px!important}
  .fm-hero-copy h1 .fm-desktop-copy,
  .fm-hero-copy p .fm-desktop-copy{display:none!important}
  .fm-hero-copy h1 .fm-mobile-copy,
  .fm-hero-copy p .fm-mobile-copy{display:inline!important}
  .feedhome-integrated-sections .feedhome-section:first-child{padding-top:48px}
}

@media(min-width:721px){
  .fm-hero-copy h1 .fm-mobile-copy,
  .fm-hero-copy p .fm-mobile-copy{display:none!important}
  .fm-hero-copy h1 .fm-desktop-copy,
  .fm-hero-copy p .fm-desktop-copy{display:inline!important}
}



/* =========================================================
   PATCH 2026-05-19 / LANDINGPAGER INTEGRATED V2 SECTION GAP TUNE
   목적:
   - 통합본에서 섹션별 상하 간격이 과하게 벌어지는 문제 보정
   - 브랜드소개 → 제작가이드 사이 여백 축소
   - PC/모바일 공통으로 섹션 흐름을 더 촘촘하게 정리
   보호:
   - 기존 히어로/메뉴/모달/슬라이더/문의 위저드 기능 유지
   - 색상, 카드 디자인, 콘텐츠 구조는 변경하지 않음
   ========================================================= */
.feedhome-integrated-sections{
  --feedhome-section-pc:64px !important;
  --feedhome-section-mo:40px !important;
}

.feedhome-integrated-sections .feedhome-section{
  padding-top:64px !important;
  padding-bottom:64px !important;
}

/* 브랜드 소개 하단 안내 박스 다음 제작가이드까지의 과한 공백 축소 */
.feedhome-integrated-sections .feedhome-brand-section{
  padding-bottom:36px !important;
}

.feedhome-integrated-sections .feedhome-guide-section{
  padding-top:44px !important;
}

/* 연속 섹션은 첫 화면 흐름이 끊기지 않도록 상단 여백을 조금 더 압축 */
.feedhome-integrated-sections .feedhome-section + .feedhome-section{
  padding-top:56px !important;
}

.feedhome-integrated-sections .feedhome-brand-section + .feedhome-guide-section{
  padding-top:44px !important;
}

/* 섹션 헤더 아래쪽도 살짝만 압축 */
.feedhome-integrated-sections .feedhome-section-head{
  margin-bottom:28px !important;
}

/* 문의 CTA는 마지막 전환 영역이므로 너무 멀리 떨어지지 않게 조정 */
.lp-contact-cta{
  padding-top:56px !important;
  padding-bottom:56px !important;
}

@media(max-width:720px){
  .feedhome-integrated-sections .feedhome-section{
    padding-top:42px !important;
    padding-bottom:42px !important;
  }

  .feedhome-integrated-sections .feedhome-brand-section{
    padding-bottom:26px !important;
  }

  .feedhome-integrated-sections .feedhome-guide-section,
  .feedhome-integrated-sections .feedhome-section + .feedhome-section,
  .feedhome-integrated-sections .feedhome-brand-section + .feedhome-guide-section{
    padding-top:34px !important;
  }

  .feedhome-integrated-sections .feedhome-section-head{
    margin-bottom:22px !important;
  }

  .lp-contact-cta{
    padding-top:42px !important;
    padding-bottom:42px !important;
  }
}


/* =========================================================
   PATCH 2026-05-19 / LANDINGPAGER INTEGRATED V3 UNIFORM SECTION SPACING
   목적:
   - 섹션별로 제각각 들어가 있던 padding-top/padding-bottom 값을 최종 통일
   - 브랜드소개 → 제작가이드처럼 특정 구간만 다르게 보이던 예외값 제거
   - 모든 본문 섹션의 상하 간격을 같은 기준으로 정리
   보호:
   - 기존 히어로/메뉴/모달/슬라이더/문의 위저드 기능 유지
   - 카드 내부 디자인, 텍스트, 컬러, 버튼 구조는 변경하지 않음
   적용 범위:
   - .feedhome-integrated-sections 내부의 feedhome-section 전체
   - 마지막 문의 CTA 섹션(.lp-contact-cta)
   ========================================================= */

.feedhome-integrated-sections{
  --lp-uniform-section-y-pc:56px;
  --lp-uniform-section-y-mo:36px;
  --lp-uniform-head-gap-pc:26px;
  --lp-uniform-head-gap-mo:20px;
}

/* 모든 본문 섹션 상하 여백 동일화 */
.feedhome-integrated-sections .feedhome-section,
.feedhome-integrated-sections .feedhome-section:first-child,
.feedhome-integrated-sections .feedhome-section + .feedhome-section,
.feedhome-integrated-sections .feedhome-brand-section,
.feedhome-integrated-sections .feedhome-guide-section,
.feedhome-integrated-sections .feedhome-brand-section + .feedhome-guide-section,
.feedhome-integrated-sections .feedhome-work-section,
.feedhome-integrated-sections .feedhome-price-section,
.feedhome-integrated-sections .feedhome-faq-section,
.feedhome-integrated-sections .feedhome-insight-section{
  padding-top:var(--lp-uniform-section-y-pc) !important;
  padding-bottom:var(--lp-uniform-section-y-pc) !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
}

/* 섹션 제목 영역 하단 간격도 통일 */
.feedhome-integrated-sections .feedhome-section-head,
.feedhome-integrated-sections .feedhome-brand-section .feedhome-section-head,
.feedhome-integrated-sections .feedhome-guide-section .feedhome-section-head,
.feedhome-integrated-sections .feedhome-work-section .feedhome-section-head,
.feedhome-integrated-sections .feedhome-price-section .feedhome-section-head,
.feedhome-integrated-sections .feedhome-faq-section .feedhome-section-head,
.feedhome-integrated-sections .feedhome-insight-section .feedhome-section-head{
  margin-top:0 !important;
  margin-bottom:var(--lp-uniform-head-gap-pc) !important;
}

/* 마지막 문의 CTA도 본문 섹션과 같은 수직 리듬으로 통일 */
.lp-contact-cta{
  padding-top:var(--lp-uniform-section-y-pc) !important;
  padding-bottom:var(--lp-uniform-section-y-pc) !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
}

/* 앵커 이동 시 고정 헤더에 걸리지 않도록 기존 보정 유지 */
.feedhome-integrated-sections section[id],
.lp-contact-cta[id]{
  scroll-margin-top:78px;
}

@media(max-width:720px){
  .feedhome-integrated-sections{
    --lp-uniform-section-y-pc:36px;
    --lp-uniform-section-y-mo:32px;
    --lp-uniform-head-gap-pc:20px;
    --lp-uniform-head-gap-mo:18px;
  }

  .feedhome-integrated-sections .feedhome-section,
  .feedhome-integrated-sections .feedhome-section:first-child,
  .feedhome-integrated-sections .feedhome-section + .feedhome-section,
  .feedhome-integrated-sections .feedhome-brand-section,
  .feedhome-integrated-sections .feedhome-guide-section,
  .feedhome-integrated-sections .feedhome-brand-section + .feedhome-guide-section,
  .feedhome-integrated-sections .feedhome-work-section,
  .feedhome-integrated-sections .feedhome-price-section,
  .feedhome-integrated-sections .feedhome-faq-section,
  .feedhome-integrated-sections .feedhome-insight-section{
    padding-top:var(--lp-uniform-section-y-mo) !important;
    padding-bottom:var(--lp-uniform-section-y-mo) !important;
  }

  .feedhome-integrated-sections .feedhome-section-head,
  .feedhome-integrated-sections .feedhome-brand-section .feedhome-section-head,
  .feedhome-integrated-sections .feedhome-guide-section .feedhome-section-head,
  .feedhome-integrated-sections .feedhome-work-section .feedhome-section-head,
  .feedhome-integrated-sections .feedhome-price-section .feedhome-section-head,
  .feedhome-integrated-sections .feedhome-faq-section .feedhome-section-head,
  .feedhome-integrated-sections .feedhome-insight-section .feedhome-section-head{
    margin-bottom:var(--lp-uniform-head-gap-mo) !important;
  }

  .lp-contact-cta{
    padding-top:var(--lp-uniform-section-y-mo) !important;
    padding-bottom:var(--lp-uniform-section-y-mo) !important;
  }

  .feedhome-integrated-sections section[id],
  .lp-contact-cta[id]{
    scroll-margin-top:70px;
  }
}


/* =========================================================
   PATCH 2026-05-19 / LANDINGPAGER INTEGRATED V4 TEXT COLOR FIX
   목적:
   - 검정 스탬프 박스 1, 2의 strong 텍스트가 전역 strong 색상에 밀려 어둡게 보이는 문제 수정
   - 카카오톡 노란 버튼 3의 텍스트를 검정색으로 고정
   보호:
   - 기존 섹션 간격 통일, 히어로/메뉴/슬라이더/FAQ/문의 위저드 기능 유지
   - 배경색, 버튼 크기, 레이아웃은 변경하지 않음
   ========================================================= */

/* 1. 제작가이드 상단 검정 스탬프 */
.feedhome-integrated-sections .feedhome-guide-stamp,
.feedhome-integrated-sections .feedhome-guide-stamp *{
  color:#fff !important;
}

.feedhome-integrated-sections .feedhome-guide-stamp small{
  color:rgba(255,255,255,.82) !important;
}

.feedhome-integrated-sections .feedhome-guide-stamp strong{
  color:#fff !important;
}

/* 2. 가격정책/운영관리 검정 스탬프 */
.feedhome-integrated-sections .feedhome-managed-stamp,
.feedhome-integrated-sections .feedhome-managed-stamp *{
  color:#fff !important;
}

.feedhome-integrated-sections .feedhome-managed-stamp small{
  color:rgba(255,255,255,.82) !important;
}

.feedhome-integrated-sections .feedhome-managed-stamp strong{
  color:#fff !important;
}

/* 3. 하단 CTA 카카오톡 버튼 */
.lp-contact-cta .lp-contact-cta__button--kakao,
.lp-contact-cta .lp-contact-cta__button--kakao:link,
.lp-contact-cta .lp-contact-cta__button--kakao:visited,
.lp-contact-cta .lp-contact-cta__button--kakao:hover,
.lp-contact-cta .lp-contact-cta__button--kakao:active{
  color:#111315 !important;
}


/* =========================================================
   PATCH 2026-05-19 / LANDINGPAGER INTEGRATED V5 ANCHOR POSITION FIX
   목적:
   - 메뉴 클릭 시 섹션 상단 여백이 과하게 남는 현상 보정
   - section 자체가 아니라 section 내부 콘텐츠 시작점 기준으로 이동하도록 보정
   - 기본 hash 이동 시에도 과도한 scroll-margin 제거
   보호:
   - 기존 섹션 간격 통일, 색상 보정, 히어로/메뉴/슬라이더/FAQ/문의 위저드 기능 유지
   ========================================================= */

html{
  scroll-padding-top:40px !important;
}

.feedhome-integrated-sections section[id],
.lp-contact-cta[id],
section[id],
.fm-section[id]{
  scroll-margin-top:40px !important;
}


/* =========================================================
   PATCH 2026-05-19 / LANDINGPAGER INTEGRATED V6 HEADER LOGO IMAGE
   목적:
   - 상단 메뉴 로고를 텍스트형에서 실제 이미지 로고로 복구
   - 기존 .fm-logo-mark / .fm-logo-text 표시를 비활성화
   - PC/모바일 로고 높이 기준 정리
   보호:
   - 메뉴 앵커 이동, 활성화, 히어로, 섹션, 모달, 슬라이더 기능 유지
   ========================================================= */

.fm-logo.fm-logo-image-link{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:0 !important;
  min-width:0 !important;
  line-height:1 !important;
}

.fm-logo-image{
  display:block !important;
  width:auto !important;
  height:34px !important;
  max-width:190px !important;
  object-fit:contain !important;
}

/* 기존 텍스트/마크형 로고가 남아 있을 경우 숨김 처리 */
.fm-logo.fm-logo-image-link .fm-logo-mark,
.fm-logo.fm-logo-image-link .fm-logo-text{
  display:none !important;
}

.fm-header.is-scrolled .fm-logo-image,
body.is-menu-open .fm-logo-image{
  opacity:1 !important;
}

@media(max-width:720px){
  .fm-logo-image{
    height:28px !important;
    max-width:154px !important;
  }
}


/* =========================================================
   PATCH 2026-05-19 / LANDINGPAGER INTEGRATED V7 LOGO IMAGE + TEXT
   목적:
   - 상단 로고 영역을 이미지 로고 + 타이틀 + 카피 조합으로 복구
   - 이전 V6에서 이미지 로고만 보이도록 숨겼던 .fm-logo-text를 다시 표시
   보호:
   - 메뉴 앵커 이동/활성화, 히어로, 섹션, 모달, 슬라이더 기능 유지
   ========================================================= */

.fm-logo.fm-logo-image-link{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  min-width:0 !important;
  line-height:1 !important;
}

.fm-logo-image{
  display:block !important;
  width:auto !important;
  height:32px !important;
  max-width:150px !important;
  object-fit:contain !important;
  flex:0 0 auto !important;
}

/* V6 숨김 규칙을 덮어써서 타이틀/카피 다시 표시 */
.fm-logo.fm-logo-image-link .fm-logo-text{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  gap:3px !important;
  min-width:0 !important;
}

.fm-logo.fm-logo-image-link .fm-logo-text b{
  display:block !important;
  color:#222 !important;
  font-size:16px !important;
  line-height:1 !important;
  font-weight:850 !important;
  letter-spacing:-.045em !important;
  white-space:nowrap !important;
}

.fm-logo.fm-logo-image-link .fm-logo-text small{
  display:block !important;
  color:#777 !important;
  font-size:10px !important;
  line-height:1 !important;
  font-weight:800 !important;
  letter-spacing:.045em !important;
  white-space:nowrap !important;
}

.fm-header:not(.is-scrolled) .fm-logo.fm-logo-image-link .fm-logo-text b{
  color:#fff !important;
}

.fm-header:not(.is-scrolled) .fm-logo.fm-logo-image-link .fm-logo-text small{
  color:rgba(255,255,255,.72) !important;
}

.fm-header.is-scrolled .fm-logo.fm-logo-image-link .fm-logo-text b,
body.is-menu-open .fm-logo.fm-logo-image-link .fm-logo-text b{
  color:#222 !important;
}

.fm-header.is-scrolled .fm-logo.fm-logo-image-link .fm-logo-text small,
body.is-menu-open .fm-logo.fm-logo-image-link .fm-logo-text small{
  color:#777 !important;
}

@media(max-width:720px){
  .fm-logo.fm-logo-image-link{
    gap:8px !important;
  }

  .fm-logo-image{
    height:26px !important;
    max-width:124px !important;
  }

  .fm-logo.fm-logo-image-link .fm-logo-text b{
    font-size:14px !important;
  }

  .fm-logo.fm-logo-image-link .fm-logo-text small{
    font-size:9px !important;
  }
}


/* =========================================================
   PATCH 2026-05-19 / LANDINGPAGER INTEGRATED V8 LOGO BALANCE
   목적:
   - 상단 로고 이미지를 조금 더 크게 조정
   - 타이틀 '랜딩페이저'를 더 크게 조정
   - 하단 카피 'FEED LANDING PAGE'는 더 작게 조정
   - 이미지/타이틀/카피 비율 균형 보정
   보호:
   - 메뉴 앵커 이동/활성화, 히어로, 섹션, 모달, 슬라이더 기능 유지
   ========================================================= */

.fm-logo.fm-logo-image-link{
  gap:11px !important;
}

.fm-logo-image{
  height:38px !important;
  max-width:174px !important;
}

.fm-logo.fm-logo-image-link .fm-logo-text{
  gap:4px !important;
}

.fm-logo.fm-logo-image-link .fm-logo-text b{
  font-size:19px !important;
  line-height:.98 !important;
  font-weight:880 !important;
  letter-spacing:-.055em !important;
}

.fm-logo.fm-logo-image-link .fm-logo-text small{
  font-size:8.8px !important;
  line-height:1 !important;
  font-weight:850 !important;
  letter-spacing:.065em !important;
}

@media(max-width:720px){
  .fm-logo.fm-logo-image-link{
    gap:8px !important;
  }

  .fm-logo-image{
    height:30px !important;
    max-width:142px !important;
  }

  .fm-logo.fm-logo-image-link .fm-logo-text b{
    font-size:15.5px !important;
  }

  .fm-logo.fm-logo-image-link .fm-logo-text small{
    font-size:8px !important;
    letter-spacing:.055em !important;
  }
}


/* =========================================================
   PATCH 2026-05-19 / LANDINGPAGER INTEGRATED V9 HEADER MENU FIX
   목적:
   - 상단 메뉴 영역을 가로 100% 기준으로 확장
   - 일반 메뉴 폰트 크기를 20px로 조정
   - 일반 메뉴의 '문의하기' 항목 제거 후 우측 '제작 문의하기' CTA만 유지
   보호:
   - 로고 이미지+타이틀+카피 구조 유지
   - 우측 제작 문의하기 버튼 유지
   - 메뉴 앵커 이동/활성화, 히어로, 섹션, 모달, 슬라이더 기능 유지
   ========================================================= */

/* 헤더 내부 폭 100% */
.fm-header-inner,
.fm-header__inner,
.fm-nav-inner,
.fm-nav__inner{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding-left:clamp(32px,4vw,72px) !important;
  padding-right:clamp(32px,4vw,72px) !important;
}

/* 메뉴 영역 중앙 정렬 유지 */
.fm-menu{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:34px !important;
}

/* 일반 메뉴 폰트 20px */
.fm-menu a:not(.fm-cta){
  font-size:20px !important;
  line-height:1 !important;
  font-weight:820 !important;
  letter-spacing:-.045em !important;
  white-space:nowrap !important;
}

/* 우측 CTA는 기존 버튼 역할 유지 */
.fm-cta{
  flex:0 0 auto !important;
  white-space:nowrap !important;
}

/* 혹시 기존 문의하기 메뉴가 남아 있을 경우 숨김 */
.fm-menu a[href="#contact"]:not(.fm-cta),
.fm-mobile-panel a[href="#contact"]:not(.fm-cta){
  display:none !important;
}

@media(max-width:1100px){
  .fm-menu{
    gap:22px !important;
  }

  .fm-menu a:not(.fm-cta){
    font-size:17px !important;
  }

  .fm-header-inner,
  .fm-header__inner,
  .fm-nav-inner,
  .fm-nav__inner{
    padding-left:24px !important;
    padding-right:24px !important;
  }
}

@media(max-width:720px){
  .fm-header-inner,
  .fm-header__inner,
  .fm-nav-inner,
  .fm-nav__inner{
    padding-left:16px !important;
    padding-right:16px !important;
  }

  .fm-menu a:not(.fm-cta){
    font-size:16px !important;
  }
}


/* =========================================================
   PATCH 2026-05-19 / LANDINGPAGER INTEGRATED V10 HEADER FULL WIDTH LAYOUT
   목적:
   - 상단 헤더를 화면 가로 100% 기준으로 재정렬
   - 로고는 화면 왼쪽, 제작 문의하기 버튼은 화면 오른쪽에 배치
   - 메뉴는 중앙 영역에 정렬
   - 메뉴 폰트 크기는 18px 기준으로 조정
   보호:
   - 로고 이미지+타이틀+카피 구조 유지
   - 우측 제작 문의하기 CTA 유지
   - 메뉴 앵커 이동/활성화, 히어로, 섹션, 모달, 슬라이더 기능 유지
   ========================================================= */

.fm-header .fm-container.fm-nav{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding-left:clamp(24px,3.2vw,64px) !important;
  padding-right:clamp(24px,3.2vw,64px) !important;
  display:grid !important;
  grid-template-columns:minmax(260px,1fr) auto minmax(260px,1fr) !important;
  align-items:center !important;
  gap:28px !important;
}

.fm-header .fm-logo{
  justify-self:start !important;
}

.fm-header .fm-menu{
  justify-self:center !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:34px !important;
}

.fm-header .fm-menu a:not(.fm-cta){
  font-size:18px !important;
  line-height:1 !important;
  font-weight:830 !important;
  letter-spacing:-.045em !important;
  white-space:nowrap !important;
}

.fm-header .fm-cta{
  justify-self:end !important;
  min-height:48px !important;
  padding:0 24px !important;
  font-size:15px !important;
  font-weight:860 !important;
  white-space:nowrap !important;
}

/* 기존 V9에서 지정한 header-inner 계열 보정값보다 실제 fm-container.fm-nav를 우선 적용 */
.fm-header-inner,
.fm-header__inner,
.fm-nav-inner,
.fm-nav__inner{
  max-width:none !important;
}

/* 태블릿 폭에서는 메뉴 간격과 폰트만 완화 */
@media(max-width:1180px){
  .fm-header .fm-container.fm-nav{
    grid-template-columns:minmax(220px,1fr) auto minmax(190px,1fr) !important;
    gap:20px !important;
    padding-left:24px !important;
    padding-right:24px !important;
  }

  .fm-header .fm-menu{
    gap:22px !important;
  }

  .fm-header .fm-menu a:not(.fm-cta){
    font-size:16px !important;
  }

  .fm-header .fm-cta{
    min-height:44px !important;
    padding:0 18px !important;
    font-size:14px !important;
  }
}

/* 모바일에서는 기존 햄버거 구조 유지 */
@media(max-width:720px){
  .fm-header .fm-container.fm-nav{
    display:flex !important;
    width:100% !important;
    max-width:none !important;
    padding-left:16px !important;
    padding-right:16px !important;
    gap:12px !important;
  }

  .fm-header .fm-logo{
    justify-self:auto !important;
  }

  .fm-header .fm-menu{
    display:none !important;
  }

  .fm-header .fm-cta{
    display:none !important;
  }
}


/* =========================================================
   PATCH 2026-05-19 / LANDINGPAGER INTEGRATED V11 HEADER ACTIVE + LOGO TUNE
   목적:
   - 첫 진입 히어로 영역에서는 '랜딩페이저는?' 메뉴가 활성화되지 않도록 보정
   - 메뉴 활성 밑줄을 메뉴명 바로 아래가 아니라 조금 더 아래로 이동
   - 로고 타이틀/카피 줄 높이와 비율 재조정
   보호:
   - 로고 이미지+타이틀+카피 구조 유지
   - 우측 제작 문의하기 CTA 유지
   - 메뉴 앵커 이동/히어로/섹션/모달/슬라이더 기능 유지
   ========================================================= */

/* 메뉴 활성 밑줄 위치 보정: 하이퍼링크처럼 붙어 보이지 않도록 아래로 내림 */
.fm-menu a::after{
  bottom:8px !important;
}

/* 로고 비율 재조정 */
.fm-logo.fm-logo-image-link{
  gap:10px !important;
}

.fm-logo-image{
  height:38px !important;
  max-width:174px !important;
}

.fm-logo.fm-logo-image-link .fm-logo-text{
  gap:1px !important;
  line-height:1 !important;
}

.fm-logo.fm-logo-image-link .fm-logo-text b{
  font-size:21px !important;
  line-height:.9 !important;
  font-weight:900 !important;
  letter-spacing:-.065em !important;
}

.fm-logo.fm-logo-image-link .fm-logo-text small{
  margin-top:0 !important;
  font-size:8px !important;
  line-height:.95 !important;
  font-weight:850 !important;
  letter-spacing:.06em !important;
}

@media(max-width:720px){
  .fm-logo-image{
    height:30px !important;
    max-width:142px !important;
  }

  .fm-logo.fm-logo-image-link .fm-logo-text{
    gap:1px !important;
  }

  .fm-logo.fm-logo-image-link .fm-logo-text b{
    font-size:16px !important;
    line-height:.92 !important;
  }

  .fm-logo.fm-logo-image-link .fm-logo-text small{
    font-size:7.5px !important;
    line-height:.95 !important;
  }

  .fm-menu a::after{
    bottom:6px !important;
  }
}


/* =========================================================
   PATCH 2026-05-19 / LANDINGPAGER INTEGRATED V12 LOGO VERTICAL ALIGN FIX
   목적:
   - 로고 이미지 높이에 맞춰 타이틀/카피를 세로 중앙 정렬
   - '랜딩페이저'와 'FEED LANDING PAGE' 줄 간격을 압축하되 뭉개지지 않게 조정
   - 로고 아이콘과 텍스트 묶음의 전체 높이를 자연스럽게 맞춤
   보호:
   - 헤더 100% 배치, 메뉴 활성화, 히어로, 섹션, 모달, 슬라이더 기능 유지
   ========================================================= */

.fm-logo.fm-logo-image-link{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  height:44px !important;
  line-height:1 !important;
}

.fm-logo-image{
  display:block !important;
  height:40px !important;
  width:auto !important;
  max-width:178px !important;
  object-fit:contain !important;
  flex:0 0 auto !important;
}

.fm-logo.fm-logo-image-link .fm-logo-text{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-self:center !important;
  height:40px !important;
  gap:2px !important;
  padding-top:1px !important;
  line-height:1 !important;
  transform:translateY(0) !important;
}

.fm-logo.fm-logo-image-link .fm-logo-text b{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  font-size:20px !important;
  line-height:1.02 !important;
  font-weight:900 !important;
  letter-spacing:-.065em !important;
  white-space:nowrap !important;
}

.fm-logo.fm-logo-image-link .fm-logo-text small{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  font-size:8.2px !important;
  line-height:1 !important;
  font-weight:850 !important;
  letter-spacing:.06em !important;
  white-space:nowrap !important;
}

/* 어두운 히어로 위 / 스크롤 후 색상 유지 */
.fm-header:not(.is-scrolled) .fm-logo.fm-logo-image-link .fm-logo-text b{
  color:#fff !important;
}

.fm-header:not(.is-scrolled) .fm-logo.fm-logo-image-link .fm-logo-text small{
  color:rgba(255,255,255,.72) !important;
}

.fm-header.is-scrolled .fm-logo.fm-logo-image-link .fm-logo-text b,
body.is-menu-open .fm-logo.fm-logo-image-link .fm-logo-text b{
  color:#222 !important;
}

.fm-header.is-scrolled .fm-logo.fm-logo-image-link .fm-logo-text small,
body.is-menu-open .fm-logo.fm-logo-image-link .fm-logo-text small{
  color:#777 !important;
}

@media(max-width:720px){
  .fm-logo.fm-logo-image-link{
    gap:8px !important;
    height:36px !important;
  }

  .fm-logo-image{
    height:32px !important;
    max-width:146px !important;
  }

  .fm-logo.fm-logo-image-link .fm-logo-text{
    height:32px !important;
    gap:1px !important;
    padding-top:0 !important;
  }

  .fm-logo.fm-logo-image-link .fm-logo-text b{
    font-size:16px !important;
    line-height:1 !important;
  }

  .fm-logo.fm-logo-image-link .fm-logo-text small{
    font-size:7.6px !important;
    line-height:1 !important;
  }
}


/* =========================================================
   PATCH 2026-05-19 / LANDINGPAGER INTEGRATED V13 HERO INFO MODAL
   목적:
   - 히어로 우측 핵심 방식 박스 제거
   - 히어로 카피를 중앙 정렬 구조로 재배치
   - 우측 상단 느낌표 뱃지 추가
   - 피드형 랜딩페이지 설명 모달 추가
   보호:
   - 기존 로고/메뉴/섹션/문의 위저드/FAQ/인사이트/슬라이더 기능 유지
   ========================================================= */

/* 히어로 우측 중복 설명 박스 제거 */
.fm-hero-side{
  display:none !important;
}

/* 우측 박스 제거 후 카피 중앙 정렬 */
.fm-hero-grid{
  grid-template-columns:1fr !important;
  justify-items:center !important;
  align-items:center !important;
  gap:0 !important;
}

.fm-hero-copy{
  width:min(100%,920px) !important;
  margin:0 auto !important;
  text-align:center !important;
}

.fm-hero-copy p{
  margin-left:auto !important;
  margin-right:auto !important;
  max-width:760px !important;
}

.fm-hero-copy .fm-badge{
  margin-left:auto !important;
  margin-right:auto !important;
}

.fm-hero-actions{
  justify-content:center !important;
}

/* 느낌표 정보 뱃지 */
.lp-feed-info-badge{
  position:absolute;
  z-index:12;
  top:118px;
  right:clamp(28px,4vw,72px);
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.36);
  border-radius:999px;
  background:rgba(255,255,255,.12);
  color:#fff;
  box-shadow:0 18px 48px rgba(0,0,0,.22);
  backdrop-filter:blur(14px);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}

.lp-feed-info-badge:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.2);
  border-color:rgba(255,255,255,.52);
}

.lp-feed-info-badge span{
  display:block;
  font-size:24px;
  line-height:1;
  font-weight:900;
  transform:translateY(-1px);
}

/* 피드형 랜딩페이지 설명 모달 */
.lp-feed-info-modal{
  position:fixed;
  inset:0;
  z-index:100002;
  display:none;
  padding:28px;
  background:rgba(17,19,21,.64);
  backdrop-filter:blur(8px);
  font-family:Pretendard,"Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;
  letter-spacing:-.035em;
  word-break:keep-all;
}

.lp-feed-info-modal.is-open{
  display:block;
}

.lp-feed-info-modal__box{
  width:min(760px,100%);
  max-height:calc(100vh - 56px);
  margin:0 auto;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  border:1px solid rgba(255,255,255,.18);
  border-radius:28px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 28px 90px rgba(0,0,0,.34);
}

.lp-feed-info-modal__head{
  min-height:66px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:0 22px;
  border-bottom:1px solid #e2d4c5;
  background:#111315;
}

.lp-feed-info-modal__head span{
  color:#f0d3c4;
  font-size:12px;
  line-height:1;
  font-weight:900;
  letter-spacing:.1em;
}

.lp-feed-info-modal__close{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  background:rgba(255,255,255,.1);
  color:#fff;
  font-size:22px;
  line-height:1;
  cursor:pointer;
}

.lp-feed-info-modal__body{
  overflow:auto;
  padding:34px 36px 38px;
  color:#4b4448;
}

.lp-feed-info-modal__body h2{
  margin:0 0 16px;
  color:#222;
  font-size:30px;
  line-height:1.32;
  font-weight:850;
  letter-spacing:-.06em;
}

.lp-feed-info-modal__body p{
  margin:0 0 14px;
  color:#4b4448;
  font-size:15.5px;
  line-height:1.82;
  font-weight:520;
}

.lp-feed-info-points{
  display:grid;
  gap:10px;
  margin-top:24px;
}

.lp-feed-info-points div{
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  gap:12px;
  align-items:center;
  min-height:58px;
  padding:12px 14px;
  border:1px solid #e2d4c5;
  border-radius:18px;
  background:#fffaf5;
}

.lp-feed-info-points b{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:999px;
  background:#111315;
  color:#fff;
  font-size:13px;
  line-height:1;
  font-weight:900;
}

.lp-feed-info-points span{
  color:#2d272b;
  font-size:14px;
  line-height:1.55;
  font-weight:760;
}

/* 모바일 히어로도 정보 뱃지만 유지 */
@media(max-width:720px){
  .fm-hero-copy{
    width:min(100%,340px) !important;
  }

  .lp-feed-info-badge{
    top:86px;
    right:18px;
    width:42px;
    height:42px;
  }

  .lp-feed-info-badge span{
    font-size:21px;
  }

  .lp-feed-info-modal{
    padding:12px;
  }

  .lp-feed-info-modal__box{
    max-height:calc(100vh - 24px);
    border-radius:22px;
  }

  .lp-feed-info-modal__head{
    min-height:60px;
    padding:0 16px;
  }

  .lp-feed-info-modal__body{
    padding:26px 20px 30px;
  }

  .lp-feed-info-modal__body h2{
    font-size:24px;
  }

  .lp-feed-info-modal__body p{
    font-size:14px;
    line-height:1.76;
  }

  .lp-feed-info-points div{
    grid-template-columns:40px minmax(0,1fr);
    border-radius:16px;
  }

  .lp-feed-info-points b{
    width:32px;
    height:32px;
    font-size:11px;
  }

  .lp-feed-info-points span{
    font-size:13.2px;
  }
}


/* =========================================================
   PATCH 2026-05-19 / LANDINGPAGER INTEGRATED V14 HERO BADGE + COPY ALIGN
   목적:
   - 히어로 카피 영역을 완전 중앙 정렬
   - 느낌표 안내 버튼을 우측 상단 absolute 위치에서 제거하고 타이틀 위 작은 안내 뱃지로 변경
   - 관심 있는 사람만 누르는 보조 안내 요소처럼 작게 표시
   보호:
   - 피드형 랜딩페이지 설명 모달, 문의 모달, 섹션, 메뉴 기능 유지
   ========================================================= */

/* 히어로 카피 중앙 정렬 강화 */
.fm-hero-copy{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}

.fm-hero-copy > *{
  text-align:center !important;
}

.fm-hero-copy h1,
.fm-hero-copy p{
  margin-left:auto !important;
  margin-right:auto !important;
}

.fm-hero-copy p{
  max-width:720px !important;
}

/* 안내 뱃지: absolute 해제 후 타이틀 위 작게 배치 */
.lp-feed-info-badge{
  position:static !important;
  z-index:auto !important;
  width:auto !important;
  height:28px !important;
  min-width:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  margin:8px auto 14px !important;
  padding:0 10px 0 8px !important;
  border:1px solid rgba(255,255,255,.28) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.09) !important;
  color:rgba(255,255,255,.78) !important;
  box-shadow:none !important;
  backdrop-filter:blur(10px) !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent !important;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease !important;
}

.lp-feed-info-badge:hover{
  transform:translateY(-1px) !important;
  background:rgba(255,255,255,.16) !important;
  border-color:rgba(255,255,255,.42) !important;
  color:#fff !important;
}

.lp-feed-info-badge span{
  width:16px !important;
  height:16px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.18) !important;
  color:#fff !important;
  font-size:12px !important;
  line-height:1 !important;
  font-weight:900 !important;
  transform:none !important;
}

.lp-feed-info-badge em{
  display:block !important;
  color:inherit !important;
  font-style:normal !important;
  font-size:11px !important;
  line-height:1 !important;
  font-weight:760 !important;
  letter-spacing:-.035em !important;
}

/* 히어로 버튼도 중앙 정렬 고정 */
.fm-hero-actions{
  width:100% !important;
  justify-content:center !important;
}

@media(max-width:720px){
  .fm-hero-copy{
    width:min(100%,360px) !important;
  }

  .lp-feed-info-badge{
    height:26px !important;
    margin:7px auto 12px !important;
    padding:0 9px 0 7px !important;
  }

  .lp-feed-info-badge span{
    width:15px !important;
    height:15px !important;
    font-size:11px !important;
  }

  .lp-feed-info-badge em{
    font-size:10.5px !important;
  }
}


/* =========================================================
   PATCH 2026-05-19 / LANDINGPAGER INTEGRATED V15 FEED INFO ICON RESTORE
   목적:
   - 사라진 피드형 랜딩페이지 안내 아이콘을 히어로 타이틀 아래/버튼 위에 재노출
   - 너무 크지 않게 작은 보조 안내 뱃지로 표시
   - 기존 .lp-feed-info-badge가 숨거나 위치 충돌을 일으켜도 .lp-feed-info-mini는 독립 표시
   보호:
   - 피드형 설명 모달, 문의 모달, 메뉴, 섹션, 슬라이더 기능 유지
   ========================================================= */

.lp-feed-info-mini{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  width:auto !important;
  height:30px !important;
  min-height:30px !important;
  margin:16px auto 20px !important;
  padding:0 12px 0 8px !important;
  border:1px solid rgba(255,255,255,.30) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.10) !important;
  color:rgba(255,255,255,.82) !important;
  box-shadow:none !important;
  backdrop-filter:blur(10px) !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent !important;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease !important;
}

.lp-feed-info-mini:hover{
  transform:translateY(-1px) !important;
  background:rgba(255,255,255,.18) !important;
  border-color:rgba(255,255,255,.46) !important;
  color:#fff !important;
}

.lp-feed-info-mini span{
  display:grid !important;
  place-items:center !important;
  width:17px !important;
  height:17px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.20) !important;
  color:#fff !important;
  font-size:12px !important;
  line-height:1 !important;
  font-weight:900 !important;
}

.lp-feed-info-mini em{
  display:block !important;
  color:inherit !important;
  font-style:normal !important;
  font-size:11px !important;
  line-height:1 !important;
  font-weight:780 !important;
  letter-spacing:-.035em !important;
  white-space:nowrap !important;
}

.fm-hero-copy .lp-feed-info-mini{
  align-self:center !important;
}

/* V14/V13 기존 badge가 남아 있더라도 히어로 우측 상단으로 튀지 않게 숨김 */
.fm-hero > .lp-feed-info-badge{
  display:none !important;
}

@media(max-width:720px){
  .lp-feed-info-mini{
    height:28px !important;
    min-height:28px !important;
    margin:13px auto 18px !important;
    padding:0 10px 0 7px !important;
  }

  .lp-feed-info-mini span{
    width:16px !important;
    height:16px !important;
    font-size:11px !important;
  }

  .lp-feed-info-mini em{
    font-size:10.5px !important;
  }
}


/* =========================================================
   PATCH 2026-05-19 / LANDINGPAGER INTEGRATED V16 HERO INFO ICON TOP POSITION
   목적:
   - 히어로 정보 버튼을 "느낌표 아이콘만" 보이도록 단순화
   - 랜딩페이지 메인 카피의 상단 쪽에 작은 원형 뱃지로 배치
   보호:
   - 클릭 시 기존 피드형 랜딩페이지 설명 모달 유지
   ========================================================= */

.fm-hero-copy{
  position:relative !important;
}

.lp-feed-info-mini{
  position:absolute !important;
  top:72px !important;
  right:-8px !important;
  display:grid !important;
  place-items:center !important;
  width:28px !important;
  height:28px !important;
  min-height:28px !important;
  margin:0 !important;
  padding:0 !important;
  border:1px solid rgba(255,255,255,.34) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.12) !important;
  color:#fff !important;
  box-shadow:none !important;
  backdrop-filter:blur(10px) !important;
  cursor:pointer !important;
  transition:transform .18s ease, background .18s ease, border-color .18s ease !important;
  z-index:4 !important;
}

.lp-feed-info-mini:hover{
  transform:translateY(-1px) scale(1.03) !important;
  background:rgba(255,255,255,.20) !important;
  border-color:rgba(255,255,255,.48) !important;
}

.lp-feed-info-mini span{
  display:grid !important;
  place-items:center !important;
  width:100% !important;
  height:100% !important;
  border-radius:999px !important;
  background:transparent !important;
  color:#fff !important;
  font-size:13px !important;
  line-height:1 !important;
  font-weight:900 !important;
}

.lp-feed-info-mini em{
  display:none !important;
}

@media(max-width:1200px){
  .lp-feed-info-mini{
    right:6px !important;
    top:70px !important;
  }
}

@media(max-width:720px){
  .lp-feed-info-mini{
    top:58px !important;
    right:6px !important;
    width:26px !important;
    height:26px !important;
    min-height:26px !important;
  }

  .lp-feed-info-mini span{
    font-size:12px !important;
  }
}


/* =========================================================
   PATCH 2026-05-19 / LANDINGPAGER INTEGRATED V17 FEED ICON ATTACHED TITLE
   목적:
   - 피드형 안내 느낌표를 히어로 제목 끝에 붙여 자연스럽게 표시
   - 별도 배치처럼 보이던 V16 absolute 위치 제거
   보호:
   - 클릭 시 기존 피드형 랜딩페이지 설명 모달 유지
   ========================================================= */

/* V16/V15용 별도 아이콘이 남아도 숨김 */
.lp-feed-info-mini{
  display:none !important;
}

/* h1 안에 버튼을 인라인 아이콘처럼 붙임 */
.fm-hero-copy h1{
  position:relative !important;
}

.lp-feed-info-title-icon{
  display:inline-grid !important;
  place-items:center !important;
  vertical-align:top !important;
  position:relative !important;
  top:-0.34em !important;
  width:18px !important;
  height:18px !important;
  margin-left:8px !important;
  padding:0 !important;
  border:1px solid rgba(255,255,255,.34) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.10) !important;
  color:#fff !important;
  box-shadow:none !important;
  backdrop-filter:blur(8px) !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent !important;
  transition:transform .18s ease, background .18s ease, border-color .18s ease !important;
}

.lp-feed-info-title-icon:hover{
  transform:translateY(-1px) scale(1.04) !important;
  background:rgba(255,255,255,.18) !important;
  border-color:rgba(255,255,255,.48) !important;
}

.lp-feed-info-title-icon span{
  display:block !important;
  color:#fff !important;
  font-size:10px !important;
  line-height:1 !important;
  font-weight:900 !important;
}

/* 버튼이 제목 끝에 자연스럽게 붙도록 유지 */
.fm-hero-copy h1 .lp-feed-info-title-icon{
  font-family:Pretendard,"Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif !important;
}

@media(max-width:720px){
  .lp-feed-info-title-icon{
    width:16px !important;
    height:16px !important;
    margin-left:6px !important;
    top:-0.30em !important;
  }

  .lp-feed-info-title-icon span{
    font-size:9px !important;
  }
}


/* =========================================================
   PATCH 2026-05-19 / LANDINGPAGER INTEGRATED V20 FEED ICON CIRCLE FIX
   목적:
   - 히어로 제목 끝의 느낌표가 원 밖으로 커 보이는 문제 해결
   - 실제 텍스트 '!' 대신 CSS로 작은 느낌표 막대/점을 그려 원 안에 안정적으로 배치
   - 제목 끝에 붙어 있으면서 살짝 위로 걸치는 위치 유지
   보호:
   - 피드형 랜딩페이지 설명 모달, 문의 모달, 메뉴, 섹션 기능 유지
   ========================================================= */

.lp-feed-info-title-icon{
  display:inline-grid !important;
  place-items:center !important;
  vertical-align:top !important;
  position:relative !important;
  top:-0.36em !important;
  width:17px !important;
  height:17px !important;
  margin-left:7px !important;
  padding:0 !important;
  border:1px solid rgba(255,255,255,.42) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.10) !important;
  color:#fff !important;
  box-shadow:none !important;
  backdrop-filter:blur(8px) !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent !important;
  transition:transform .18s ease, background .18s ease, border-color .18s ease !important;
  overflow:hidden !important;
}

.lp-feed-info-title-icon:hover{
  transform:translateY(-1px) scale(1.04) !important;
  background:rgba(255,255,255,.18) !important;
  border-color:rgba(255,255,255,.54) !important;
}

.lp-feed-info-title-icon span{
  position:relative !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  font-size:0 !important;
  line-height:0 !important;
  color:transparent !important;
}

/* 느낌표 세로 막대 */
.lp-feed-info-title-icon span::before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:3.5px !important;
  width:2px !important;
  height:7px !important;
  border-radius:999px !important;
  background:#fff !important;
  transform:translateX(-50%) !important;
}

/* 느낌표 점 */
.lp-feed-info-title-icon span::after{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  bottom:3.3px !important;
  width:2.5px !important;
  height:2.5px !important;
  border-radius:999px !important;
  background:#fff !important;
  transform:translateX(-50%) !important;
}

@media(max-width:720px){
  .lp-feed-info-title-icon{
    top:-0.32em !important;
    width:15px !important;
    height:15px !important;
    margin-left:6px !important;
  }

  .lp-feed-info-title-icon span::before{
    top:3px !important;
    width:1.8px !important;
    height:6px !important;
  }

  .lp-feed-info-title-icon span::after{
    bottom:3px !important;
    width:2.3px !important;
    height:2.3px !important;
  }
}


/* =========================================================
   PATCH 2026-05-19 / LANDINGPAGER INTEGRATED V21 HERO INFO BADGE ABSOLUTE
   목적:
   - 제목 텍스트 중앙 정렬을 유지하면서 느낌표 뱃지만 우측 상단에 살짝 걸치게 배치
   - 느낌표는 텍스트가 아니라 CSS 막대/점으로 그려 원 안에 안정적으로 표시
   - 기존 lp-feed-info-title-icon / lp-feed-info-mini 계열은 비활성화
   분류:
   - HERO INFO BADGE: 히어로 제목 보조 안내 버튼 전용
   보호:
   - 피드형 설명 모달, 문의 모달, 메뉴, 섹션, 슬라이더 기능 유지
   ========================================================= */

/* 기존 실험용 아이콘 비활성화 */
.lp-feed-info-title-icon,
.lp-feed-info-mini,
.fm-hero > .lp-feed-info-badge{
  display:none !important;
}

/* 제목 중앙 정렬 고정 */
.fm-hero-title,
.fm-hero-copy h1{
  text-align:center !important;
}

.fm-hero-title-line{
  position:relative !important;
  display:inline-block !important;
  text-align:center !important;
}

/* HERO INFO BADGE */
.lp-hero-info-trigger{
  position:absolute !important;
  right:-22px !important;
  top:-7px !important;
  display:grid !important;
  place-items:center !important;
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  min-height:18px !important;
  padding:0 !important;
  margin:0 !important;
  border:1px solid rgba(255,255,255,.42) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.10) !important;
  color:#fff !important;
  box-shadow:none !important;
  backdrop-filter:blur(8px) !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent !important;
  z-index:5 !important;
  overflow:hidden !important;
  transition:transform .18s ease, background .18s ease, border-color .18s ease !important;
}

/* 실제 터치 영역은 조금 더 넓게 확보 */
.lp-hero-info-trigger::before{
  content:"" !important;
  position:absolute !important;
  inset:-8px !important;
  border-radius:999px !important;
}

.lp-hero-info-trigger:hover{
  transform:translateY(-1px) scale(1.04) !important;
  background:rgba(255,255,255,.18) !important;
  border-color:rgba(255,255,255,.54) !important;
}

.lp-hero-info-trigger span{
  position:relative !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  font-size:0 !important;
  line-height:0 !important;
}

/* 느낌표 세로 막대 */
.lp-hero-info-trigger span::before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:3.5px !important;
  width:2px !important;
  height:7px !important;
  border-radius:999px !important;
  background:#fff !important;
  transform:translateX(-50%) !important;
}

/* 느낌표 점 */
.lp-hero-info-trigger span::after{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  bottom:3.2px !important;
  width:2.5px !important;
  height:2.5px !important;
  border-radius:999px !important;
  background:#fff !important;
  transform:translateX(-50%) !important;
}

@media(max-width:720px){
  .lp-hero-info-trigger{
    right:-19px !important;
    top:-6px !important;
    width:16px !important;
    height:16px !important;
    min-width:16px !important;
    min-height:16px !important;
  }

  .lp-hero-info-trigger span::before{
    top:3px !important;
    width:1.8px !important;
    height:6px !important;
  }

  .lp-hero-info-trigger span::after{
    bottom:3px !important;
    width:2.3px !important;
    height:2.3px !important;
  }
}


/* =========================================================
   PATCH 2026-05-19 / LANDINGPAGER INTEGRATED V22 HERO BUTTON FLOW
   목적:
   - 히어로 1번째 버튼: 시작하기 → #brand-intro
   - 히어로 2번째 버튼: 제작가이드 → #production-guide
   보호:
   - 상단 우측 제작 문의하기 CTA, 하단 문의 모달, 피드형 안내 모달 유지
   ========================================================= */

.fm-hero-actions .fm-btn{
  white-space:nowrap !important;
}


/* =========================================================
   PATCH 2026-05-19 / V23 FEED INFO MODAL TEXT TRIM
   목적:
   - 안내 모달 본문 2단락 삭제 후 남은 본문과 핵심 포인트 간격 정리
   보호:
   - 모달 구조, 버튼, JS 동작 유지
   ========================================================= */

.lp-feed-info-modal__body > p + .lp-feed-info-points{
  margin-top:22px !important;
}


/* =========================================================
   PATCH 2026-05-19 / LANDINGPAGER INTEGRATED V24 HERO BUTTON EQUAL PC
   목적:
   - PC 히어로 버튼 2개(시작하기 / 제작가이드)의 가로 크기 통일
   - 좌우 여백을 충분히 확보해 버튼 밸런스 보정
   - 모바일 버튼 정렬은 기존 상태 유지
   보호:
   - 히어로 카피, 피드형 안내 뱃지, 모달, 메뉴, 섹션 기능 유지
   ========================================================= */

@media(min-width:721px){
  .fm-hero-actions{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:14px !important;
  }

  .fm-hero-actions .fm-btn{
    width:150px !important;
    min-width:150px !important;
    height:54px !important;
    min-height:54px !important;
    padding:0 24px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    white-space:nowrap !important;
  }
}


/* =========================================================
   PATCH 2026-05-19 / LANDINGPAGER INTEGRATED V25 ANCHOR OFFSET FIX
   목적:
   - 히어로 '시작하기' / 메뉴 클릭 시 섹션 상단이 고정 메뉴에 걸리는 문제 보정
   - PC/모바일 모두 섹션 제목이 메뉴 아래에 여유 있게 보이도록 scroll offset 확대
   보호:
   - 히어로 버튼, 피드형 안내 뱃지, 모달, 메뉴 활성화, 섹션 기능 유지
   ========================================================= */

html{
  scroll-padding-top:112px !important;
}

.feedhome-integrated-sections section[id],
.lp-contact-cta[id],
section[id],
.fm-section[id]{
  scroll-margin-top:112px !important;
}

@media(max-width:720px){
  html{
    scroll-padding-top:94px !important;
  }

  .feedhome-integrated-sections section[id],
  .lp-contact-cta[id],
  section[id],
  .fm-section[id]{
    scroll-margin-top:94px !important;
  }
}


/* =========================================================
   PATCH 2026-05-19 / LANDINGPAGER INTEGRATED V27 HEADER MENU GAP WIDE
   목적:
   - PC 상단 메뉴와 메뉴 사이 간격을 더 넓게 조정
   - 로고 왼쪽 / 메뉴 중앙 / 제작 문의하기 오른쪽 구조 유지
   - 메뉴가 답답해 보이지 않도록 PC 기준 gap 확대
   보호:
   - 로고 이미지+타이틀+카피 구조 유지
   - 우측 제작 문의하기 CTA 유지
   - 메뉴 앵커 이동/활성화, 히어로, 섹션, 모달, 슬라이더 기능 유지
   적용 범위:
   - PC: 메뉴 gap 54px
   - 태블릿: 메뉴 gap 32px
   - 모바일: 기존 햄버거 구조 유지
   ========================================================= */

@media(min-width:1181px){
  .fm-header .fm-menu,
  .fm-menu{
    gap:54px !important;
  }
}

@media(min-width:721px) and (max-width:1180px){
  .fm-header .fm-menu,
  .fm-menu{
    gap:32px !important;
  }
}


/* =========================================================
   PATCH 2026-05-19 / LANDINGPAGER INTEGRATED V28 INSIGHT BUTTON TRIM
   목적:
   - 인사이트 섹션 하단 "전체 콘텐츠 보기" 버튼 제거 후 남은 버튼 정렬 보정
   보호:
   - 인사이트 더보기 버튼, 카드 더보기/모달 기능 유지
   ========================================================= */

.feedhome-insight-section .insight-actions,
.feedhome-insight-section .lp-insight-actions,
.feedhome-insight-section .feedhome-insight-actions{
  justify-content:center !important;
}

.feedhome-insight-section .insight-actions > *:only-child,
.feedhome-insight-section .lp-insight-actions > *:only-child,
.feedhome-insight-section .feedhome-insight-actions > *:only-child{
  margin-left:auto !important;
  margin-right:auto !important;
}


/* =========================================================
   PATCH 2026-05-19 / LANDINGPAGER INTEGRATED V29 FAQ LEFT TITLE LAYOUT
   목적:
   - FAQ 섹션을 2번 유형으로 정리
   - 왼쪽 컬럼에 FAQ 뱃지/제목/안내카드 배치
   - 오른쪽 컬럼에 FAQ 아코디언 배치
   보호:
   - FAQ 아코디언 JS/HTML 구조 유지
   - 기존 섹션 간격 통일 규칙은 유지하되 FAQ 내부 배치만 조정
   ========================================================= */

.feedhome-faq-section .feedhome-container-wide{
  max-width:1320px !important;
}

.feedhome-faq-layout{
  grid-template-columns:360px minmax(0,1fr) !important;
  gap:42px !important;
  align-items:start !important;
}

.feedhome-faq-left{
  display:grid !important;
  gap:28px !important;
  align-content:start !important;
}

/* 기존 전체 섹션 중앙 헤더 스타일을 FAQ 왼쪽 컬럼용으로 재정의 */
.feedhome-faq-section .feedhome-section-head.feedhome-faq-head-left{
  margin:0 !important;
  text-align:left !important;
  align-items:flex-start !important;
}

.feedhome-faq-section .feedhome-faq-head-left .feedhome-kicker{
  margin-left:0 !important;
  margin-right:0 !important;
}

.feedhome-faq-section .feedhome-faq-head-left .feedhome-section-title{
  max-width:360px !important;
  margin:20px 0 0 !important;
  text-align:left !important;
  font-size:clamp(34px,3.1vw,48px) !important;
  line-height:1.18 !important;
  letter-spacing:-.07em !important;
}

/* 왼쪽 검정 안내 카드 */
.feedhome-faq-aside{
  position:static !important;
  top:auto !important;
  width:100% !important;
  border-radius:28px !important;
  overflow:hidden !important;
}

.feedhome-faq-aside-top{
  min-height:250px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  padding:34px 30px !important;
  border-radius:28px !important;
}

.feedhome-faq-aside-title{
  font-size:26px !important;
  line-height:1.34 !important;
}

.feedhome-faq-aside-desc{
  margin-top:22px !important;
  font-size:14.5px !important;
  line-height:1.82 !important;
}

/* 오른쪽 리스트는 상단부터 자연스럽게 시작 */
.feedhome-faq-main{
  min-width:0 !important;
}

.feedhome-faq-list{
  margin-top:0 !important;
}

/* 모바일에서는 제목 → 안내카드 → FAQ 리스트 순서로 자연스럽게 세로 배치 */
@media(max-width:960px){
  .feedhome-faq-layout{
    grid-template-columns:1fr !important;
    gap:28px !important;
  }

  .feedhome-faq-left{
    gap:22px !important;
  }

  .feedhome-faq-section .feedhome-section-head.feedhome-faq-head-left{
    text-align:center !important;
    align-items:center !important;
  }

  .feedhome-faq-section .feedhome-faq-head-left .feedhome-kicker{
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .feedhome-faq-section .feedhome-faq-head-left .feedhome-section-title{
    max-width:100% !important;
    margin:18px auto 0 !important;
    text-align:center !important;
    font-size:clamp(30px,7vw,40px) !important;
  }

  .feedhome-faq-aside-top{
    min-height:auto !important;
    padding:28px 24px !important;
  }
}


/* =========================================================
   PATCH 2026-05-19 / LANDINGPAGER INTEGRATED V30 FAQ LEFT WIDE RIGHT NARROW
   목적:
   - FAQ 2번 유형 레이아웃에서 왼쪽 제목 영역을 넓게 확보
   - '제작 전 자주 묻는 질문' 타이틀이 PC에서 2줄로 넘어가지 않도록 조정
   - 왼쪽 영역을 넉넉히 잡아 우측 FAQ 리스트 폭을 자연스럽게 좁힘
   보호:
   - FAQ 아코디언 HTML/JS 동작 유지
   - 모바일에서는 기존처럼 제목 줄바꿈 허용
   - 기존 메뉴/히어로/문의/인사이트/슬라이더 기능 유지
   ========================================================= */

@media(min-width:961px){
  .feedhome-faq-section .feedhome-container-wide{
    max-width:1280px !important;
  }

  .feedhome-faq-layout{
    grid-template-columns:440px minmax(0,1fr) !important;
    gap:36px !important;
  }

  .feedhome-faq-left{
    width:440px !important;
  }

  .feedhome-faq-section .feedhome-faq-head-left .feedhome-section-title{
    max-width:440px !important;
    white-space:nowrap !important;
    font-size:clamp(38px,2.65vw,44px) !important;
    line-height:1.16 !important;
  }

  .feedhome-faq-main{
    max-width:804px !important;
  }

  .feedhome-faq-list,
  .feedhome-faq-item{
    width:100% !important;
  }
}

@media(min-width:961px) and (max-width:1180px){
  .feedhome-faq-section .feedhome-container-wide{
    max-width:calc(100% - 48px) !important;
  }

  .feedhome-faq-layout{
    grid-template-columns:390px minmax(0,1fr) !important;
    gap:30px !important;
  }

  .feedhome-faq-left{
    width:390px !important;
  }

  .feedhome-faq-section .feedhome-faq-head-left .feedhome-section-title{
    max-width:390px !important;
    font-size:36px !important;
    white-space:nowrap !important;
  }

  .feedhome-faq-main{
    max-width:none !important;
  }
}

/* 모바일/좁은 화면에서는 넘침 방지를 위해 줄바꿈 허용 */
@media(max-width:960px){
  .feedhome-faq-section .feedhome-faq-head-left .feedhome-section-title{
    white-space:normal !important;
  }
}


/* =========================================================
   PATCH 2026-05-19 / LANDINGPAGER INTEGRATED V31 FAQ TITLE TYPOGRAPHY FIX
   목적:
   - FAQ 타이틀이 전역 .feedhome-section-title 규격을 따르지 않던 문제 수정
   - V29/V30에서 FAQ 전용으로 font-size/line-height/letter-spacing을 따로 지정한 값을 되돌림
   - 왼쪽 컬럼 폭은 유지하되, 타이틀 폰트 규격은 공통 섹션 타이틀 기준으로 통일
   보호:
   - FAQ 2번 유형 레이아웃 유지
   - FAQ 아코디언 기능 유지
   - 메뉴/히어로/문의/인사이트/슬라이더 기능 유지
   기준:
   - font-size: var(--feedhome-section-title-pc)
   - line-height: 1.28
   - font-weight: 730
   - letter-spacing: -.055em
   ========================================================= */

@media(min-width:961px){
  .feedhome-faq-section .feedhome-faq-head-left .feedhome-section-title{
    max-width:none !important;
    width:max-content !important;
    margin:20px 0 0 !important;
    color:var(--feedhome-title) !important;
    font-size:var(--feedhome-section-title-pc) !important;
    line-height:1.28 !important;
    font-weight:730 !important;
    letter-spacing:-.055em !important;
    white-space:nowrap !important;
    text-align:left !important;
  }

  /* 제목 폭을 위해 왼쪽 컬럼은 넉넉하게 유지 */
  .feedhome-faq-layout{
    grid-template-columns:480px minmax(0,1fr) !important;
    gap:34px !important;
  }

  .feedhome-faq-left{
    width:480px !important;
  }

  .feedhome-faq-main{
    max-width:760px !important;
  }
}

@media(min-width:961px) and (max-width:1180px){
  .feedhome-faq-layout{
    grid-template-columns:430px minmax(0,1fr) !important;
    gap:28px !important;
  }

  .feedhome-faq-left{
    width:430px !important;
  }

  .feedhome-faq-section .feedhome-faq-head-left .feedhome-section-title{
    font-size:var(--feedhome-section-title-pc) !important;
    line-height:1.28 !important;
    letter-spacing:-.055em !important;
    white-space:nowrap !important;
  }
}

@media(max-width:960px){
  .feedhome-faq-section .feedhome-faq-head-left .feedhome-section-title{
    width:auto !important;
    max-width:97% !important;
    margin:18px auto 0 !important;
    color:var(--feedhome-title) !important;
    font-size:var(--feedhome-section-title-mo) !important;
    line-height:1.32 !important;
    font-weight:730 !important;
    letter-spacing:-.055em !important;
    white-space:normal !important;
    text-align:center !important;
  }
}


/* =========================================================
   PATCH 2026-05-19 / LANDINGPAGER INTEGRATED V32 FAQ TITLE SPACING STANDARD
   목적:
   - FAQ 뱃지와 타이틀 사이 간격이 공통 섹션 규격을 벗어난 문제 수정
   - V29/V30/V31 과정에서 추가된 FAQ 전용 margin-top 값을 제거
   - 기존 섹션 기준처럼 뱃지 margin-bottom만으로 타이틀 간격을 제어
   보호:
   - FAQ 2번 유형 레이아웃 유지
   - FAQ 아코디언 기능 유지
   - 공통 .feedhome-kicker / .feedhome-section-title 폰트 규격 유지
   기준:
   - .feedhome-kicker margin-bottom: 14px
   - .feedhome-section-title margin-top: 0
   ========================================================= */

@media(min-width:961px){
  .feedhome-faq-layout{
    grid-template-columns:520px minmax(0,1fr) !important;
    gap:34px !important;
  }

  .feedhome-faq-left{
    width:520px !important;
  }

  .feedhome-faq-section .feedhome-section-head.feedhome-faq-head-left{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:0 !important;
    margin:0 !important;
    text-align:left !important;
  }

  .feedhome-faq-section .feedhome-faq-head-left .feedhome-kicker{
    margin:0 0 14px 0 !important;
  }

  .feedhome-faq-section .feedhome-faq-head-left .feedhome-section-title{
    margin:0 !important;
    width:max-content !important;
    max-width:520px !important;
    color:var(--feedhome-title) !important;
    font-size:var(--feedhome-section-title-pc) !important;
    line-height:1.28 !important;
    font-weight:730 !important;
    letter-spacing:-.055em !important;
    white-space:nowrap !important;
    text-align:left !important;
  }

  .feedhome-faq-main{
    max-width:720px !important;
  }
}

@media(min-width:961px) and (max-width:1180px){
  .feedhome-faq-layout{
    grid-template-columns:460px minmax(0,1fr) !important;
    gap:28px !important;
  }

  .feedhome-faq-left{
    width:460px !important;
  }

  .feedhome-faq-section .feedhome-faq-head-left .feedhome-section-title{
    max-width:460px !important;
    margin:0 !important;
    white-space:nowrap !important;
  }

  .feedhome-faq-main{
    max-width:none !important;
  }
}

@media(max-width:960px){
  .feedhome-faq-section .feedhome-section-head.feedhome-faq-head-left{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    gap:0 !important;
    margin:0 !important;
    text-align:center !important;
  }

  .feedhome-faq-section .feedhome-faq-head-left .feedhome-kicker{
    margin:0 auto 14px !important;
  }

  .feedhome-faq-section .feedhome-faq-head-left .feedhome-section-title{
    margin:0 auto !important;
    width:auto !important;
    max-width:97% !important;
    color:var(--feedhome-title) !important;
    font-size:var(--feedhome-section-title-mo) !important;
    line-height:1.32 !important;
    font-weight:730 !important;
    letter-spacing:-.055em !important;
    white-space:normal !important;
    text-align:center !important;
  }
}


/* =========================================================
   PATCH 2026-05-19 / LANDINGPAGER INTEGRATED V34 PORTFOLIO DEFAULT SAMPLE
   목적:
   - 샘플·포트폴리오 섹션의 기본 진입 탭을 '유형별 샘플'로 고정
   - JS 로드 전에도 포트폴리오 카드가 노출되지 않도록 hidden 상태 보조
   보호:
   - 전체/포트폴리오 탭 클릭 시 기존 필터 기능 유지
   ========================================================= */

.feedhome-work-card[hidden]{
  display:none !important;
}


/* =========================================================
   PATCH 2026-05-19 / LANDINGPAGER INTEGRATED V35 FOOTER COMPANY INFO
   목적:
   - 푸터를 4열 회사 정보형 구조로 정리
   - 브랜드 설명, 회사 정보, 주소, 고객센터, 정책 링크를 명확하게 노출
   - PC/모바일 가독성 보정
   보호:
   - 기존 페이지 기능 변경 없음
   적용 범위:
   - .fm-footer
   - .fm-footer-grid
   - .fm-footer-bottom
   - .fm-footer-policy
   ========================================================= */

.fm-footer{
  padding:48px 0 42px !important;
  background:#fff !important;
  border-top:1px solid var(--fm-line) !important;
}

.fm-footer .fm-container{
  width:min(100% - 48px,1280px) !important;
  max-width:1280px !important;
}

.fm-footer-grid{
  display:grid !important;
  grid-template-columns:1.45fr 1fr 1.1fr 1fr !important;
  gap:54px !important;
  align-items:start !important;
}

.fm-footer h3{
  margin:0 0 12px !important;
  color:#151515 !important;
  font-size:14px !important;
  line-height:1.35 !important;
  font-weight:850 !important;
  letter-spacing:-.035em !important;
}

.fm-footer p,
.fm-footer li{
  margin:0 !important;
  color:#3f4652 !important;
  font-size:13px !important;
  line-height:1.82 !important;
  font-weight:450 !important;
  letter-spacing:-.025em !important;
}

.fm-footer-brand p{
  max-width:360px !important;
}

.fm-footer a{
  color:#1f2937 !important;
  text-decoration:none !important;
}

.fm-footer a:hover{
  color:#8f4d5a !important;
}

.fm-footer-bottom{
  margin-top:28px !important;
  padding-top:18px !important;
  border-top:1px solid var(--fm-line) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
  flex-wrap:wrap !important;
  color:#1f2937 !important;
  font-size:12.5px !important;
  line-height:1.6 !important;
  font-weight:520 !important;
}

.fm-footer-policy{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:22px !important;
  flex-wrap:wrap !important;
}

.fm-footer-policy a{
  color:#111315 !important;
  font-size:12.5px !important;
  line-height:1.4 !important;
  font-weight:780 !important;
  text-decoration:none !important;
}

.fm-footer-policy a:hover{
  color:#8f4d5a !important;
}

@media(max-width:960px){
  .fm-footer{
    padding:42px 0 36px !important;
  }

  .fm-footer .fm-container{
    width:min(100% - 36px,1280px) !important;
  }

  .fm-footer-grid{
    grid-template-columns:1fr 1fr !important;
    gap:28px 24px !important;
  }

  .fm-footer-brand{
    grid-column:1 / -1 !important;
  }

  .fm-footer-brand p{
    max-width:none !important;
  }
}

@media(max-width:640px){
  .fm-footer .fm-container{
    width:min(100% - 32px,1280px) !important;
  }

  .fm-footer-grid{
    grid-template-columns:1fr !important;
    gap:24px !important;
  }

  .fm-footer-bottom{
    align-items:flex-start !important;
    flex-direction:column !important;
    gap:12px !important;
  }

  .fm-footer-policy{
    justify-content:flex-start !important;
    gap:16px !important;
  }
}


/* =========================================================
   PATCH 2026-05-19 / LANDINGPAGER INTEGRATED V36 FOOTER POLICY MODALS
   목적:
   - 푸터 이용약관/개인정보처리방침 링크를 모달 버튼으로 표시
   - 기본 안내 모달 디자인 및 모바일 반응형 처리
   보호:
   - 기존 문의 개인정보 모달(.lp-privacy-modal)과 클래스 충돌 없음
   - 기존 푸터 레이아웃 유지
   ========================================================= */

.fm-footer-policy-button{
  appearance:none !important;
  border:0 !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  color:#111315 !important;
  font:inherit !important;
  font-size:12.5px !important;
  line-height:1.4 !important;
  font-weight:780 !important;
  letter-spacing:-.025em !important;
  cursor:pointer !important;
  text-decoration:none !important;
}

.fm-footer-policy-button:hover{
  color:#8f4d5a !important;
}

.lp-footer-policy-modal{
  position:fixed;
  inset:0;
  z-index:100004;
  display:none;
  padding:28px;
  background:rgba(17,19,21,.62);
  backdrop-filter:blur(8px);
  font-family:Pretendard,"Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;
  letter-spacing:-.035em;
  word-break:keep-all;
}

.lp-footer-policy-modal.is-open{
  display:block;
}

.lp-footer-policy-modal__box{
  width:min(760px,100%);
  max-height:calc(100vh - 56px);
  margin:0 auto;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  border:1px solid rgba(255,255,255,.18);
  border-radius:28px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 28px 90px rgba(0,0,0,.34);
}

.lp-footer-policy-modal__head{
  min-height:66px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:0 22px;
  border-bottom:1px solid #e2d4c5;
  background:#111315;
}

.lp-footer-policy-modal__head span{
  color:#f0d3c4;
  font-size:12px;
  line-height:1;
  font-weight:900;
  letter-spacing:.1em;
}

.lp-footer-policy-modal__close{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  background:rgba(255,255,255,.1);
  color:#fff;
  font-size:22px;
  line-height:1;
  cursor:pointer;
}

.lp-footer-policy-modal__body{
  overflow:auto;
  padding:34px 36px 18px;
  color:#4b4448;
}

.lp-footer-policy-modal__body h2{
  margin:0 0 16px;
  color:#222;
  font-size:28px;
  line-height:1.32;
  font-weight:850;
  letter-spacing:-.06em;
}

.lp-footer-policy-modal__body > p{
  margin:0 0 22px;
  color:#4b4448;
  font-size:15px;
  line-height:1.78;
  font-weight:520;
}

.lp-footer-policy-list{
  display:grid;
  gap:10px;
}

.lp-footer-policy-list section{
  padding:16px 18px;
  border:1px solid #e2d4c5;
  border-radius:18px;
  background:#fffaf5;
}

.lp-footer-policy-list b{
  display:block;
  margin:0 0 7px;
  color:#222;
  font-size:14px;
  line-height:1.45;
  font-weight:850;
}

.lp-footer-policy-list p{
  margin:0;
  color:#4b4448;
  font-size:13.5px;
  line-height:1.72;
  font-weight:500;
}

.lp-footer-policy-modal__foot{
  display:flex;
  justify-content:flex-end;
  padding:16px 22px 18px;
  border-top:1px solid #e2d4c5;
  background:#fff;
}

.lp-footer-policy-modal__confirm{
  min-height:42px;
  padding:0 20px;
  border:1px solid #8f4d5a;
  border-radius:999px;
  background:#8f4d5a;
  color:#fff;
  font-size:13px;
  font-weight:850;
  cursor:pointer;
}

@media(max-width:720px){
  .lp-footer-policy-modal{
    padding:12px;
  }

  .lp-footer-policy-modal__box{
    max-height:calc(100vh - 24px);
    border-radius:22px;
  }

  .lp-footer-policy-modal__head{
    min-height:60px;
    padding:0 16px;
  }

  .lp-footer-policy-modal__body{
    padding:26px 20px 16px;
  }

  .lp-footer-policy-modal__body h2{
    font-size:23px;
  }

  .lp-footer-policy-modal__body > p{
    font-size:14px;
    line-height:1.72;
  }

  .lp-footer-policy-list section{
    padding:14px 15px;
    border-radius:16px;
  }

  .lp-footer-policy-modal__foot{
    padding:14px 16px 16px;
  }

  .lp-footer-policy-modal__confirm{
    width:100%;
  }
}


/* =========================================================
   PATCH 2026-05-19 / LANDINGPAGER INTEGRATED V37 STANDARD POLICY MODALS
   목적:
   - 표준 이용약관/개인정보처리방침 모달의 긴 본문 가독성 보정
   - 개인정보 담당자/연락처 정보가 포함된 카드의 줄간격 정리
   보호:
   - 기존 V36 모달 디자인/열기닫기 동작 유지
   ========================================================= */

.lp-footer-policy-modal__body{
  padding-bottom:24px !important;
}

.lp-footer-policy-list{
  gap:9px !important;
}

.lp-footer-policy-list section{
  padding:15px 18px !important;
}

.lp-footer-policy-list b{
  letter-spacing:-.035em !important;
}

.lp-footer-policy-list p{
  word-break:keep-all !important;
}

@media(max-width:720px){
  .lp-footer-policy-list section{
    padding:13px 14px !important;
  }
}


/* =========================================================
   PATCH 2026-05-19 / LANDINGPAGER INTEGRATED V38 SHARED PRIVACY MODAL
   목적:
   - 문의 위저드의 개인정보 버튼이 푸터 표준 개인정보처리방침 모달을 공용 사용하도록 정리
   - 기존 임시 .lp-privacy-modal은 마크업에서 제거됨
   보호:
   - .lp-contact-policy__button 스타일은 기존 문의 위저드 UI를 유지
   - .lp-footer-policy-modal이 공용 정책 모달 역할을 담당
   다음 작업 참고:
   - 개인정보 문구 수정은 .lp-footer-policy-modal 내부 data-footer-policy-panel="privacy"에서만 수정
   - 문의 위저드 쪽에 별도 개인정보 모달을 다시 만들지 말 것
   ========================================================= */

.lp-contact-policy__button[data-footer-policy-open="privacy"]{
  white-space:nowrap !important;
}


/* =========================================================
   PATCH 2026-05-19 / LANDINGPAGER INTEGRATED V39 CONTACT MOBILE BUTTON CENTER
   목적:
   - 모바일 문의 모달 하단 버튼이 왼쪽으로 붙어 보이는 문제 수정
   - 1개 버튼 상태(시작하기/닫기)는 가운데 정렬
   - 2개 버튼 상태(이전/다음)는 같은 크기로 가운데 정렬
   보호:
   - PC 문의 모달 버튼 배치 유지
   - 문의 위저드 단계 진행, 완료 화면, 공용 개인정보처리방침 모달 연결 유지
   - 히어로/메뉴/앵커/슬라이더/FAQ/인사이트 기능 유지
   적용 범위:
   - @media(max-width:820px) 내부 문의 모달 하단 버튼 영역
   ========================================================= */

@media(max-width:820px){
  .lp-contact-modal__foot{
    align-items:center !important;
    justify-content:center !important;
    flex-direction:column !important;
  }

  .lp-contact-actions{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-wrap:wrap !important;
    width:100% !important;
    gap:10px !important;
  }

  .lp-contact-actions .lp-contact-nav{
    width:170px !important;
    max-width:calc(50% - 5px) !important;
    min-height:46px !important;
    flex:0 1 170px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
  }

  .lp-contact-actions .lp-contact-nav[hidden]{
    display:none !important;
  }

  /* 시작하기/닫기처럼 실제 노출 버튼이 1개일 때도 중앙에 오도록 보정 */
  .lp-contact-actions .lp-contact-nav:not([hidden]):only-of-type{
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .lp-contact-actions .lp-contact-nav:not([hidden]):first-child:last-child{
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

@media(max-width:380px){
  .lp-contact-actions .lp-contact-nav{
    width:150px !important;
    flex-basis:150px !important;
  }
}


/* =========================================================
   PATCH 2026-05-19 / LANDINGPAGER INTEGRATED V40 MOBILE MENU CTA
   목적:
   - 모바일 메뉴 하단에 제작 문의하기 CTA 버튼 추가
   - 일반 메뉴 링크와 CTA 버튼 스타일 분리
   보호:
   - PC 메뉴/우측 제작 문의하기 버튼 유지
   - 모바일 메뉴 기존 링크 및 활성화 표시는 유지
   ========================================================= */

.fm-mobile-panel .fm-mobile-panel-cta{
  margin-top:14px !important;
  min-height:50px !important;
  border:0 !important;
  border-radius:999px !important;
  background:#111315 !important;
  color:#fff !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:14px !important;
  font-weight:900 !important;
  letter-spacing:-.035em !important;
  box-shadow:0 14px 30px rgba(17,19,21,.14) !important;
}

.fm-mobile-panel .fm-mobile-panel-cta::after{
  content:none !important;
}

.fm-mobile-panel .fm-mobile-panel-cta.is-active{
  color:#fff !important;
}

@media(max-width:720px){
  .fm-mobile-panel{
    max-height:calc(100vh - 74px) !important;
    overflow:auto !important;
  }
}


/* =========================================================
   PATCH 2026-05-19 / LANDINGPAGER INTEGRATED V41 MOBILE MENU CTA VISIBLE
   목적:
   - V9의 문의하기 메뉴 숨김 규칙 때문에 모바일 CTA가 보이지 않던 문제 해결
   - 모바일 메뉴 하단에 제작 문의하기 버튼을 확실히 노출
   보호:
   - PC 일반 메뉴의 문의하기 제거 상태는 유지
   - 모바일 CTA만 예외 표시
   ========================================================= */

.fm-mobile-panel a.fm-mobile-panel-cta[href="#contact"],
.fm-mobile-panel .fm-mobile-panel-cta[href="#contact"]:not(.fm-cta){
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:52px !important;
  margin-top:16px !important;
  padding:0 18px !important;
  border:0 !important;
  border-radius:999px !important;
  background:#111315 !important;
  color:#fff !important;
  font-size:14px !important;
  font-weight:900 !important;
  letter-spacing:-.035em !important;
  text-align:center !important;
  box-shadow:0 14px 30px rgba(17,19,21,.14) !important;
}

.fm-mobile-panel a.fm-mobile-panel-cta[href="#contact"]::after{
  content:none !important;
}

.fm-mobile-panel a.fm-mobile-panel-cta[href="#contact"].is-active{
  color:#fff !important;
}

@media(max-width:720px){
  .fm-mobile-panel{
    padding-bottom:24px !important;
  }
}


/* =========================================================
   PATCH 2026-05-19 / LANDINGPAGER INTEGRATED V42 MOBILE MENU CTA FULL BLEED
   목적:
   - 모바일 메뉴 하단 '제작 문의하기' 버튼을 박스형 버튼이 아닌 하단 고정 바처럼 정리
   - 좌우 여백 없이 모바일 메뉴 폭에 꽉 차게 표시
   - 아래 여백 없이 메뉴 패널 하단에 붙임
   - 라운드 제거
   보호:
   - PC 메뉴/우측 제작 문의하기 CTA 유지
   - 모바일 메뉴 일반 링크, 로고 클릭 닫힘, 앵커 이동, 모달, FAQ, 슬라이더 기능 유지
   적용 범위:
   - 모바일 메뉴 내부 .fm-mobile-panel-cta 전용
   ========================================================= */

@media(max-width:720px){
  .fm-mobile-panel{
    padding-bottom:0 !important;
  }

  .fm-mobile-panel a.fm-mobile-panel-cta[href="#contact"],
  .fm-mobile-panel .fm-mobile-panel-cta[href="#contact"]:not(.fm-cta){
    width:calc(100% + (var(--fm-side-mo) * 2)) !important;
    min-height:58px !important;
    margin:16px calc(var(--fm-side-mo) * -1) 0 !important;
    padding:0 !important;
    border-radius:0 !important;
    border:0 !important;
    box-shadow:none !important;
    background:#111315 !important;
    color:#fff !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:14px !important;
    font-weight:900 !important;
    letter-spacing:-.035em !important;
  }
}



/* =========================================================
   PATCH 2026-05-20 / LANDINGPAGER V77 LOGO + HERO TITLE TUNE
   목적:
   - PC 헤더 로고 우측 텍스트가 로고 아이콘 높이와 맞지 않아 보이는 문제 보정
   - 히어로 메인 타이틀이 과하게 커 보이는 문제를 1차 축소
   수정 범위:
   - .fm-logo-text b / .fm-logo-text small
   - .fm-hero-copy h1 및 내부 span
   보호 범위:
   - 기존 YouTube 히어로 영상, 썸네일 페이드, 모바일 헤더 투명 전환,
     메뉴/앵커/문의 모달/제작사례 슬라이더/FAQ 기능 유지
   작업 방식:
   - 기존 안정 CSS 삭제 없음
   - 최종 하단 PATCH로만 override
   ========================================================= */

/* 1) 로고 우측 텍스트: 아이콘 42px 기준으로 높이 균형 보정 */
.fm-logo-text{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  line-height:1 !important;
}

.fm-logo-text b{
  font-size:18px !important;
  line-height:1.04 !important;
  font-weight:900 !important;
  letter-spacing:-.055em !important;
}

.fm-logo-text small{
  margin-top:3px !important;
  font-size:9.5px !important;
  line-height:1.08 !important;
  font-weight:800 !important;
  letter-spacing:.075em !important;
}

/* PC 로고 아이콘은 기존 42px 유지, 텍스트만 축소 정렬 */
@media (min-width:721px){
  .fm-logo .fm-logo-icon,
  .fm-logo .fm-logo-icon img{
    width:42px !important;
    height:42px !important;
  }
}

/* 2) 히어로 타이틀 1차 축소: 현재 최대 50px 계열 → 최대 44px 계열 */
@media (min-width:721px){
  :root{
    --bt-v3-hero-pc:clamp(32px,2.95vw,44px) !important;
    --fm-font-hero:clamp(32px,2.95vw,44px) !important;
  }

  .fm-hero-copy h1,
  .fm-hero-copy h1 span,
  .fm-hero-copy h1 .fm-desktop-copy{
    font-size:clamp(32px,2.95vw,44px) !important;
    line-height:1.22 !important;
    letter-spacing:-.052em !important;
    font-weight:760 !important;
  }

  .fm-hero-copy h1{
    max-width:min(96%, 620px) !important;
  }
}

/* 모바일도 과대감 방지를 위해 소폭 축소 */
@media (max-width:720px){
  :root{
    --bt-v3-hero-mo:clamp(24px,6.8vw,29px) !important;
    --fm-font-hero:clamp(24px,6.8vw,29px) !important;
  }

  .fm-hero-copy h1,
  .fm-hero-copy h1 span,
  .fm-hero-copy h1 .fm-mobile-copy{
    font-size:clamp(24px,6.8vw,29px) !important;
    line-height:1.24 !important;
    letter-spacing:-.058em !important;
    font-weight:760 !important;
  }

  .fm-hero-copy h1{
    max-width:94% !important;
  }
}


/* =========================================================
   PATCH 2026-05-20 / LANDINGPAGER V78 LOGO ICON SIZE TUNE
   목적:
   - 헤더 좌측 로고 아이콘이 우측 텍스트 대비 크게 보이는 문제 보정
   - 로고 아이콘 크기를 줄이고, 텍스트와의 간격을 더 촘촘하게 정리
   수정 범위:
   - .fm-logo gap
   - .fm-logo .fm-logo-icon / img
   - .fm-logo-text b / small의 보조 균형값
   보호 범위:
   - 히어로 영상/썸네일/모바일 투명 헤더/메뉴/앵커/문의 모달/슬라이더/FAQ 기능 유지
   작업 방식:
   - 기존 안정 CSS 삭제 없음
   - V77 하단 패치 이후 V78 최종 override
   ========================================================= */

/* PC + 기본: 로고 아이콘 축소 */
.fm-logo{
  gap:8px !important;
}

.fm-logo .fm-logo-icon,
.fm-logo .fm-logo-icon img{
  width:34px !important;
  height:34px !important;
  border-radius:10px !important;
}

/* 아이콘 축소에 맞춰 텍스트도 아주 살짝 정돈 */
.fm-logo-text b{
  font-size:17px !important;
  line-height:1.02 !important;
  font-weight:900 !important;
}

.fm-logo-text small{
  margin-top:2px !important;
  font-size:8.8px !important;
  line-height:1.05 !important;
  font-weight:800 !important;
}

/* 모바일: 헤더가 더 좁으므로 한 단계 더 컴팩트하게 */
@media (max-width:720px){
  .fm-logo{
    gap:7px !important;
  }

  .fm-logo .fm-logo-icon,
  .fm-logo .fm-logo-icon img{
    width:32px !important;
    height:32px !important;
    border-radius:10px !important;
  }

  .fm-logo-text b{
    font-size:16px !important;
    line-height:1.02 !important;
  }

  .fm-logo-text small{
    margin-top:2px !important;
    font-size:8.2px !important;
    line-height:1.04 !important;
  }
}


/* =========================================================
   PATCH 2026-05-20 / LANDINGPAGER V79 LOGO IMAGE ONLY SIZE TUNE
   목적:
   - 헤더 좌측 로고 이미지(.fm-logo-image) 자체 크기만 축소
   - 우측 텍스트 크기/간격/정렬은 변경하지 않음
   수정 범위:
   - .fm-logo-image height / max-width 만 조정
   보호 범위:
   - 로고 텍스트, 메뉴, 히어로 타이틀, 영상/썸네일, 모바일 헤더, 문의 모달, 슬라이더, FAQ 기능 유지
   ========================================================= */

/* PC + 기본: 로고 이미지 자체만 축소 */
.fm-logo-image{
  height:31px !important;
  width:auto !important;
  max-width:138px !important;
}

/* 모바일: 로고 이미지만 한 단계 더 작게 */
@media(max-width:720px){
  .fm-logo-image{
    height:28px !important;
    width:auto !important;
    max-width:124px !important;
  }
}




/* =========================================================
   PATCH 2026-05-20 / LANDINGPAGER V80 PANEL TITLE COMPACT
   목적:
   - 섹션 제목과 박스 안 대표 문장/패널 타이틀의 위계 차이를 명확히 분리
   - 사용자가 표시한 1,2,3,4 영역의 대표 타이틀을 동일 계열로 축소
   - 섹션 타이틀은 기존 크기 유지, 박스 대표 타이틀만 20~24px 계열로 조정
   보호:
   - 기존 배경색/박스색/레이아웃/영상/모달/슬라이더/문의 기능 유지
   - 로고 이미지 크기 V79 패치 유지
   수정 범위:
   - 브랜드소개 대표 타이틀, 제작가이드 대표 타이틀, 가격정책 운영관리 대표 타이틀, 하단 CTA 타이틀
   ========================================================= */
:root{
  --bt-v3-panel-title-pc:clamp(20px,1.45vw,24px) !important;
  --bt-v3-panel-title-mo:clamp(18px,4.7vw,20px) !important;
  --bt-v3-cta-title-pc:clamp(22px,1.6vw,24px) !important;
  --bt-v3-cta-title-mo:20px !important;
}

.feedhome-page{
  --feedhome-panel-title-pc:clamp(20px,1.45vw,24px) !important;
  --feedhome-panel-title-mo:clamp(18px,4.7vw,20px) !important;
}

/* 1. 브랜드소개 박스 대표 문장 */
.feedhome-brand-title,
#feedhome-brand-main-title{
  font-size:var(--bt-v3-panel-title-pc) !important;
  line-height:1.38 !important;
  font-weight:740 !important;
  letter-spacing:-.048em !important;
  max-width:760px !important;
}

/* 2. 제작가이드 상단 안내 박스 대표 문장 */
.feedhome-guide-title,
#feedhome-guide-definition-title{
  font-size:var(--bt-v3-panel-title-pc) !important;
  line-height:1.38 !important;
  font-weight:740 !important;
  letter-spacing:-.048em !important;
  max-width:760px !important;
}

/* 3. 가격정책 운영관리 박스 대표 문장 */
.feedhome-managed-title,
#feedhome-managed-title,
.fm-management-head h3{
  font-size:var(--bt-v3-panel-title-pc) !important;
  line-height:1.38 !important;
  font-weight:740 !important;
  letter-spacing:-.048em !important;
  max-width:760px !important;
}

/* 4. 하단 CTA 대표 문장 */
.lp-contact-cta__title,
.fm-cta-box h2{
  font-size:var(--bt-v3-cta-title-pc) !important;
  line-height:1.36 !important;
  font-weight:740 !important;
  letter-spacing:-.048em !important;
  max-width:720px !important;
}

/* 같은 성격의 접힘형/안내 박스 제목도 과대해 보이지 않게 한 단계 아래로 정리 */
.feedhome-collapse-title b,
.fm-collapse-title b,
.feedhome-custom-cta-title,
.feedhome-faq-aside-title,
.fm-faq-side h3{
  font-size:clamp(18px,1.28vw,20px) !important;
  line-height:1.38 !important;
  font-weight:720 !important;
  letter-spacing:-.043em !important;
}

@media (max-width:720px){
  .feedhome-brand-title,
  #feedhome-brand-main-title,
  .feedhome-guide-title,
  #feedhome-guide-definition-title,
  .feedhome-managed-title,
  #feedhome-managed-title,
  .fm-management-head h3{
    font-size:var(--bt-v3-panel-title-mo) !important;
    line-height:1.38 !important;
    font-weight:720 !important;
    max-width:100% !important;
  }

  .lp-contact-cta__title,
  .fm-cta-box h2{
    font-size:var(--bt-v3-cta-title-mo) !important;
    line-height:1.38 !important;
    font-weight:720 !important;
    max-width:100% !important;
  }

  .feedhome-collapse-title b,
  .fm-collapse-title b,
  .feedhome-custom-cta-title,
  .feedhome-faq-aside-title,
  .fm-faq-side h3{
    font-size:18px !important;
    line-height:1.38 !important;
    font-weight:700 !important;
  }
}



/* =========================================================
   PATCH 2026-05-20 / LANDINGPAGER V81 WORK BUTTON COMPACT
   목적:
   - 샘플·포트폴리오 상단 필터 탭 버튼 크기 축소
   - 샘플 카드 하단 '샘플 보기 / 가격정책' 보조 버튼 크기 축소
   보호:
   - 기존 카드 레이아웃, 슬라이더, 모바일 스와이프, iframe 모달, 링크 동작 유지
   - 전체 공통 버튼(.feedhome-button) 규정은 건드리지 않고 제작사례 섹션 내부 버튼만 조정
   수정 범위:
   - .feedhome-work-tabs / .feedhome-work-tab
   - .feedhome-work-actions / .feedhome-work-actions .feedhome-button
   ========================================================= */

/* 1) 상단 필터 탭: 존재감은 유지하되 전체 높이와 좌우 여백 축소 */
.feedhome-work-tabs{
  gap:6px !important;
  padding:4px !important;
  border-radius:999px !important;
}

.feedhome-work-tab{
  min-height:34px !important;
  padding:0 13px !important;
  font-size:12.5px !important;
  font-weight:720 !important;
  line-height:1 !important;
}

/* 2) 카드 하단 보조 액션 버튼: 카드 내용보다 튀지 않도록 축소 */
.feedhome-work-actions{
  grid-template-columns:142px 142px !important;
  justify-content:start !important;
  gap:8px !important;
  margin-top:18px !important;
}

.feedhome-work-actions .feedhome-button{
  width:100% !important;
  min-height:38px !important;
  padding:0 12px !important;
  font-size:12.8px !important;
  font-weight:700 !important;
  line-height:1 !important;
}

/* 3) 태블릿/모바일에서는 카드 폭에 맞춰 2열 유지하되 높이만 컴팩트하게 */
@media (max-width:720px){
  .feedhome-work-tabs{
    gap:5px !important;
    padding:4px !important;
  }

  .feedhome-work-tab{
    min-height:36px !important;
    padding:0 8px !important;
    font-size:12px !important;
  }

  .feedhome-work-actions{
    grid-template-columns:1fr 1fr !important;
    gap:7px !important;
    margin-top:16px !important;
  }

  .feedhome-work-actions .feedhome-button{
    min-height:38px !important;
    padding:0 10px !important;
    font-size:12.5px !important;
  }
}



/* =========================================================
   PATCH 2026-05-20 / LANDINGPAGER V82 PRICE BUTTON COMPACT
   목적:
   - 가격정책 카드 하단 '자세히 보기 / 샘플 페이지' 버튼을 V81 제작사례 카드 버튼과 같은 컴팩트 크기로 조정
   - 맞춤형 제작 안내 박스의 '제작 문의하기' 버튼도 과하게 커 보이지 않도록 보조 CTA 크기로 축소
   보호:
   - 가격 카드 레이아웃, 모달 열기, 샘플 페이지 iframe, 가격정책 상세 동작 유지
   - 전체 공통 버튼(.feedhome-button) 규정은 건드리지 않고 가격정책 섹션 내부 버튼만 조정
   수정 범위:
   - .feedhome-price-actions / .feedhome-price-actions .feedhome-button
   - .feedhome-custom-cta .feedhome-button
   ========================================================= */

/* 1) 가격 카드 하단 버튼: V81 포트폴리오 카드 버튼과 동일한 38px 기준 */
.feedhome-price-actions{
  grid-template-columns:142px 142px !important;
  justify-content:start !important;
  gap:8px !important;
  margin-top:auto !important;
  padding-top:18px !important;
}

.feedhome-price-actions .feedhome-button{
  width:100% !important;
  min-width:0 !important;
  min-height:38px !important;
  padding:0 12px !important;
  font-size:12.8px !important;
  font-weight:700 !important;
  line-height:1 !important;
  letter-spacing:-.035em !important;
  white-space:nowrap !important;
}

/* 2) 맞춤형 제작 안내 박스 CTA: 하단 보조 CTA라 40px 기준으로 정리 */
.feedhome-custom-cta .feedhome-button{
  min-width:142px !important;
  min-height:40px !important;
  padding:0 16px !important;
  font-size:12.8px !important;
  font-weight:700 !important;
  line-height:1 !important;
  white-space:nowrap !important;
}

/* 3) 모바일에서는 카드 폭에 맞춰 2열 유지, 높이만 컴팩트하게 */
@media (max-width:720px){
  .feedhome-price-actions{
    grid-template-columns:1fr 1fr !important;
    gap:7px !important;
    padding-top:16px !important;
  }

  .feedhome-price-actions .feedhome-button{
    min-height:38px !important;
    padding:0 10px !important;
    font-size:12.5px !important;
  }

  .feedhome-custom-cta .feedhome-button{
    width:100% !important;
    min-width:0 !important;
    min-height:40px !important;
    padding:0 14px !important;
    font-size:12.5px !important;
  }
}


/* =========================================================
   PATCH 2026-05-20 / LANDINGPAGER V83 PRICE BUTTON CENTER ALIGN
   목적:
   - V82에서 축소한 가격정책 카드 하단 버튼을 카드 내부 중앙에 정렬
   - 맞춤형 제작 안내 박스 CTA도 보조 버튼 크기를 유지한 채 정렬 안정화
   보호:
   - 가격 카드 구조, 버튼 크기, 모달/샘플 페이지 연결, 색상/레이아웃 기능 유지
   수정 범위:
   - .feedhome-price-actions 정렬값만 start → center로 보정
   - .feedhome-custom-cta 버튼 정렬 안정화
   ========================================================= */

.feedhome-price-actions{
  justify-content:center !important;
  justify-items:center !important;
  width:100% !important;
}

.feedhome-price-actions .feedhome-button{
  justify-self:center !important;
}

.feedhome-custom-cta{
  align-items:center !important;
}

.feedhome-custom-cta .feedhome-button{
  justify-self:center !important;
}

@media (max-width:720px){
  .feedhome-price-actions{
    justify-content:center !important;
    justify-items:stretch !important;
  }

  .feedhome-custom-cta{
    align-items:stretch !important;
  }
}




/* =========================================================
   PATCH 2026-05-20 / LANDINGPAGER V84 SECTION TITLE + BADGE TUNE
   목적:
   - 섹션 타이틀은 기존보다 살짝 축소해 화면 위계를 안정화
   - 섹션 상단 뱃지는 강조 요소가 아니라 디자인 보조 요소로 보이도록 크게 축소
   보호:
   - 히어로 타이틀/CTA/카드/버튼/모달/슬라이더/영상 구조 유지
   - 배경색, 박스색, 레이아웃 구조 변경 없음
   수정 범위:
   - feedhome 섹션 뱃지(.feedhome-kicker)
   - feedhome 섹션 타이틀(.feedhome-section-title)
   - 기존 fm 계열 섹션 타이틀(.fm-title h2, .fm-split-head h2) 최소 동기화
   ========================================================= */

:root{
  --lp-v84-section-title-pc:clamp(28px,2.05vw,34px);
  --lp-v84-section-title-mo:clamp(23px,5.8vw,26px);
}

/* 섹션 상단 뱃지: 디자인 보조 요소로 축소 */
.feedhome-section-head .feedhome-kicker,
.feedhome-kicker{
  min-height:24px !important;
  padding:0 10px !important;
  margin-bottom:10px !important;
  border-radius:999px !important;
  font-size:10.5px !important;
  line-height:1 !important;
  font-weight:740 !important;
  letter-spacing:.075em !important;
  box-shadow:none !important;
}

/* 섹션 타이틀: 기존 30~38px 계열에서 28~34px 계열로 소폭 축소 */
.feedhome-section-title,
.fm-title h2,
.fm-split-head h2{
  font-size:var(--lp-v84-section-title-pc) !important;
  line-height:1.28 !important;
  font-weight:730 !important;
  letter-spacing:-.055em !important;
}

/* 섹션 설명과의 거리도 뱃지 축소에 맞춰 살짝 정돈 */
.feedhome-section-desc{
  margin-top:12px !important;
}

@media (max-width:720px){
  .feedhome-section-head .feedhome-kicker,
  .feedhome-kicker{
    min-height:22px !important;
    padding:0 9px !important;
    margin-bottom:8px !important;
    font-size:9.8px !important;
    letter-spacing:.065em !important;
  }

  .feedhome-section-title,
  .fm-title h2,
  .fm-split-head h2{
    font-size:var(--lp-v84-section-title-mo) !important;
    line-height:1.32 !important;
  }

  .feedhome-section-desc{
    margin-top:10px !important;
  }
}



/* =========================================================
   PATCH 2026-05-20 / LANDINGPAGER V85 SECTION BADGE 30% SMALLER
   목적:
   - 섹션 상단 뱃지를 현재 V84 기준보다 약 30% 더 축소
   - 뱃지는 강조 문구가 아니라 디자인 보조 요소로만 보이게 정리
   보호:
   - 섹션 타이틀 크기, 본문, 카드, 버튼, 영상, 모달, 슬라이더 기능 유지
   - 배경색/박스색/레이아웃 구조 변경 없음
   수정 범위:
   - feedhome 섹션 뱃지(.feedhome-kicker)
   - fm 계열 소형 뱃지(.fm-mini) 중 섹션 상단에 쓰이는 요소
   ========================================================= */

.feedhome-section-head .feedhome-kicker,
.feedhome-kicker{
  min-height:17px !important;
  padding:0 7px !important;
  margin-bottom:8px !important;
  border-radius:999px !important;
  font-size:7.5px !important;
  line-height:1 !important;
  font-weight:720 !important;
  letter-spacing:.07em !important;
  box-shadow:none !important;
}

/* fm 계열 섹션 상단 미니 라벨도 비슷한 보조 요소 크기로 정돈 */
.fm-title .fm-mini,
.fm-split-head .fm-mini,
.fm-mini{
  font-size:8px !important;
  line-height:1 !important;
  font-weight:720 !important;
  letter-spacing:.075em !important;
  margin-bottom:7px !important;
}

@media (max-width:720px){
  .feedhome-section-head .feedhome-kicker,
  .feedhome-kicker{
    min-height:16px !important;
    padding:0 6px !important;
    margin-bottom:7px !important;
    font-size:7px !important;
    letter-spacing:.06em !important;
  }

  .fm-title .fm-mini,
  .fm-split-head .fm-mini,
  .fm-mini{
    font-size:7.5px !important;
    margin-bottom:6px !important;
  }
}



/* =========================================================
   PATCH 2026-05-20 / LANDINGPAGER V86 MOBILE FAQ HEAD LEFT ALIGN
   목적:
   - 모바일에서 FAQ 섹션의 뱃지/섹션 타이틀만 다른 섹션과 동일하게 좌측 정렬
   - 기존 V29~V32 FAQ 전용 모바일 중앙 정렬 override를 최종 보정
   보호:
   - PC FAQ 2컬럼 레이아웃 유지
   - FAQ 아코디언 JS/HTML 구조 유지
   - 기존 뱃지 축소(V85), 섹션 타이틀 축소(V84), 버튼/영상/모달/슬라이더 기능 유지
   수정 범위:
   - .feedhome-faq-section .feedhome-faq-head-left 모바일 정렬만 조정
   ========================================================= */
@media (max-width:960px){
  .feedhome-faq-section .feedhome-section-head.feedhome-faq-head-left{
    align-items:flex-start !important;
    text-align:left !important;
    margin:0 0 22px 0 !important;
  }

  .feedhome-faq-section .feedhome-faq-head-left .feedhome-kicker{
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .feedhome-faq-section .feedhome-faq-head-left .feedhome-section-title{
    margin-left:0 !important;
    margin-right:0 !important;
    text-align:left !important;
    max-width:97% !important;
  }
}



/* =========================================================
   PATCH 2026-05-20 / LANDINGPAGER V87 MOBILE GUIDE STAMP ONELINE
   목적:
   - 모바일 제작가이드 상단 검정 스탬프 문구를 가로 1줄로 정리
   - 문구가 넘치지 않도록 글자 크기/자간/패딩을 모바일에서만 축소
   보호:
   - 기존 PC 레이아웃, 섹션 구조, 영상, 모달, 슬라이더, 버튼 기능 유지
   - 검정 스탬프 배경색과 전체 카드 구조 유지
   수정 범위:
   - .feedhome-guide-stamp 내부 small/strong 모바일 타이포그래피만 보정
   ========================================================= */

.feedhome-guide-stamp strong{
  white-space:nowrap !important;
}

@media(max-width:720px){
  .feedhome-integrated-sections .feedhome-guide-stamp{
    width:100% !important;
    min-width:0 !important;
    padding:18px 16px !important;
  }

  .feedhome-integrated-sections .feedhome-guide-stamp small{
    margin-bottom:7px !important;
    font-size:10.5px !important;
    line-height:1.1 !important;
    letter-spacing:-.02em !important;
  }

  .feedhome-integrated-sections .feedhome-guide-stamp strong{
    display:block !important;
    max-width:100% !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:clip !important;
    font-size:clamp(17px,5.2vw,20px) !important;
    line-height:1.12 !important;
    letter-spacing:-.07em !important;
    font-weight:800 !important;
  }

  .feedhome-integrated-sections .feedhome-guide-stamp strong br{
    display:none !important;
  }
}



/* =========================================================
   PATCH 2026-05-20 / LANDINGPAGER V88 MOBILE WORK TABS COMPACT
   목적:
   - 모바일 샘플·포트폴리오 섹션의 필터 탭 영역이 과하게 넓어 보이는 문제 보정
   - 기존 PC 탭 크기와 제작사례 카드/슬라이더/iframe 모달 기능은 유지
   - 모바일에서만 탭 박스를 콘텐츠 폭만큼 줄이고, 버튼 높이/폰트/좌우 여백을 추가 축소
   보호:
   - .feedhome-work-card, .feedhome-work-track, 스와이프/필터 JS, 모달 스크립트 유지
   수정 범위:
   - @media (max-width:720px) .feedhome-work-tabs / .feedhome-work-tab
   ========================================================= */
@media (max-width:720px){
  .feedhome-work-toolbar{
    align-items:flex-start !important;
    gap:10px !important;
    margin-bottom:14px !important;
  }

  .feedhome-work-tabs{
    width:auto !important;
    max-width:100% !important;
    display:inline-flex !important;
    grid-template-columns:none !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:4px !important;
    padding:3px !important;
    border-radius:999px !important;
    box-shadow:0 8px 18px rgba(35,28,22,.035) !important;
  }

  .feedhome-work-tab{
    flex:0 0 auto !important;
    min-height:30px !important;
    padding:0 10px !important;
    font-size:11px !important;
    line-height:1 !important;
    font-weight:700 !important;
    letter-spacing:-.035em !important;
    white-space:nowrap !important;
  }

  .feedhome-work-tab.is-active{
    padding-left:12px !important;
    padding-right:12px !important;
  }
}



/* =========================================================
   PATCH 2026-05-20 / LANDINGPAGER V96 HEADER FONT WEIGHT TUNE
   목적:
   - PC 헤더 로고 텍스트가 과하게 두꺼워 보이는 문제 보정
   - PC 상단 메뉴 텍스트를 한 단계 가늘고 살짝 작게 조정
   보호:
   - 로고 이미지 크기(V79), 히어로 카피(V95), 영상/썸네일, 모바일 헤더,
     메뉴 앵커, 문의 모달, 슬라이더, FAQ 기능 유지
   수정 범위:
   - .fm-logo-text b / small 폰트 굵기만 보정
   - .fm-menu 및 .fm-menu a 폰트 크기/굵기만 보정
   ========================================================= */

/* 1) 로고 우측 텍스트: 크기는 유지하고 굵기만 한 단계 완화 */
.fm-logo-text b,
.fm-logo.fm-logo-image-link .fm-logo-text b{
  font-weight:760 !important;
}

.fm-logo-text small,
.fm-logo.fm-logo-image-link .fm-logo-text small{
  font-weight:660 !important;
}

/* 2) PC 상단 메뉴: 살짝 작게, 한 단계 가볍게 */
@media (min-width:721px){
  .fm-header .fm-menu,
  .fm-menu{
    gap:22px !important;
    font-size:13.2px !important;
    font-weight:740 !important;
    letter-spacing:-.035em !important;
  }

  .fm-header .fm-menu a:not(.fm-cta),
  .fm-menu a:not(.fm-cta){
    font-size:13.2px !important;
    font-weight:740 !important;
    letter-spacing:-.035em !important;
  }
}


/* =========================================================
   PATCH 2026-05-20 / LANDINGPAGER V97 HEADER MENU SIZE RESTORE
   목적:
   - V96에서 상단 메뉴 폰트가 과하게 작아진 문제 보정
   - 메뉴 굵기는 한 단계 가볍게 유지하되, 크기는 다시 읽기 좋은 수준으로 복구
   보호:
   - 로고 이미지/로고 텍스트/히어로 카피/영상/모바일 메뉴/문의 모달/슬라이더 기능 유지
   수정 범위:
   - PC 상단 메뉴(.fm-menu, .fm-menu a) font-size만 14px 기준으로 보정
   ========================================================= */
@media (min-width:721px){
  .fm-header .fm-menu,
  .fm-menu{
    font-size:14px !important;
    font-weight:740 !important;
    letter-spacing:-.035em !important;
  }

  .fm-header .fm-menu a:not(.fm-cta),
  .fm-menu a:not(.fm-cta){
    font-size:14px !important;
    font-weight:740 !important;
    letter-spacing:-.035em !important;
  }
}



/* =========================================================
   PATCH 2026-05-20 / LANDINGPAGER V98 HEADER MENU SIZE + GAP PLUS
   목적:
   - V97에서 복구한 상단 메뉴 크기를 한 단계 더 키움
   - 메뉴와 메뉴 사이 간격을 넓혀 PC 헤더 가독성 개선
   보호:
   - 로고 이미지/로고 텍스트/히어로 카피/영상/모바일 메뉴/문의 모달/슬라이더 기능 유지
   수정 범위:
   - PC 상단 메뉴(.fm-menu, .fm-menu a) font-size, gap만 보정
   ========================================================= */
@media (min-width:721px){
  .fm-header .fm-menu,
  .fm-menu{
    gap:30px !important;
    font-size:14.8px !important;
    font-weight:740 !important;
    letter-spacing:-.035em !important;
  }

  .fm-header .fm-menu a:not(.fm-cta),
  .fm-menu a:not(.fm-cta){
    font-size:14.8px !important;
    font-weight:740 !important;
    letter-spacing:-.035em !important;
  }
}


/* =========================================================
   PATCH 2026-05-20 / LANDINGPAGER V99 HEADER MENU SIZE + GAP MORE
   목적:
   - V98 기준 상단 메뉴 폰트를 한 단계 더 키움
   - 메뉴와 메뉴 사이 간격을 조금 더 넓혀 PC 헤더 가독성 개선
   보호:
   - 로고 이미지/로고 텍스트/히어로 카피/영상/모바일 메뉴/문의 모달/슬라이더 기능 유지
   수정 범위:
   - PC 상단 메뉴(.fm-menu, .fm-menu a) font-size, gap만 보정
   ========================================================= */
@media (min-width:721px){
  .fm-header .fm-menu,
  .fm-menu{
    gap:36px !important;
    font-size:15.6px !important;
    font-weight:740 !important;
    letter-spacing:-.035em !important;
  }

  .fm-header .fm-menu a:not(.fm-cta),
  .fm-menu a:not(.fm-cta){
    font-size:15.6px !important;
    font-weight:740 !important;
    letter-spacing:-.035em !important;
  }
}


/* =========================================================
   PATCH 2026-05-20 / LANDINGPAGER V100 HEADER CTA OUTLINE TUNE
   목적:
   - PC 첫 화면의 우측 "제작 문의하기" 버튼이 상대적으로 크게 보이는 문제 보정
   - 히어로 첫 진입 상태에서는 하단 "제작가이드" 버튼처럼 투명 outline 스타일 적용
   - 스크롤 후 흰색 헤더에서는 기존 CTA 역할이 보이도록 다크 버튼 유지
   보호:
   - 로고/메뉴 폰트 V99, 히어로 카피 V95, 영상/썸네일, 모바일 메뉴,
     문의 모달, 슬라이더, FAQ 기능 유지
   수정 범위:
   - PC 헤더 우측 .fm-cta 버튼 크기/배경/테두리만 보정
   ========================================================= */
@media (min-width:721px){
  /* 첫 화면: 히어로 가이드 버튼과 비슷한 투명 outline 스타일 */
  .fm-header .fm-cta{
    min-height:42px !important;
    padding:0 20px !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.08) !important;
    border:1px solid rgba(255,255,255,.38) !important;
    color:#fff !important;
    font-size:14px !important;
    font-weight:740 !important;
    letter-spacing:-.035em !important;
    box-shadow:none !important;
  }

  .fm-header .fm-cta:hover{
    background:rgba(255,255,255,.14) !important;
    border-color:rgba(255,255,255,.56) !important;
    transform:translateY(-1px);
  }

  /* 스크롤 후: 흰색 헤더에서 식별되도록 다크 버튼 유지 */
  .fm-header.is-scrolled .fm-cta,
  .fm-header.scrolled .fm-cta,
  body.is-scrolled .fm-header .fm-cta,
  body.is-menu-open .fm-header .fm-cta{
    min-height:42px !important;
    padding:0 20px !important;
    background:#111315 !important;
    border-color:#111315 !important;
    color:#fff !important;
    font-size:14px !important;
    font-weight:740 !important;
    box-shadow:none !important;
  }
}


/* =========================================================
   PATCH 2026-05-20 / LANDINGPAGER V101 HEADER MENU GAP WIDER
   목적:
   - PC 상단 메뉴가 가운데에 다소 몰려 보이는 문제 보정
   - V99에서 확정한 메뉴 폰트 크기는 유지하고, 메뉴 간 간격만 추가 확대
   보호:
   - 로고/우측 CTA/히어로 카피/영상/모바일 메뉴/문의 모달/슬라이더 기능 유지
   수정 범위:
   - PC 상단 메뉴(.fm-menu) gap만 보정
   ========================================================= */
@media (min-width:1181px){
  .fm-header .fm-menu,
  .fm-menu{
    gap:48px !important;
  }
}



/* =========================================================
   PATCH 2026-05-20 / LANDINGPAGER V103 MOBILE HERO BUTTON + HAMBURGER RESTORE
   목적:
   - V102에서 CSS가 HTML 밖에 붙어 적용되지 않던 문제 보정
   - 모바일 히어로 시작/가이드 버튼을 작게 만들고 중앙 정렬
   - 모바일 우측 햄버거 버튼 표시 상태를 안전하게 복구
   보호:
   - PC 히어로 버튼/상단 메뉴/CTA/영상/모달/슬라이더 기능 유지
   수정 범위:
   - 모바일 .fm-hero-actions / .fm-hero-actions .fm-btn
   - 모바일 .fm-menu-btn 표시 복구 한정
   ========================================================= */
@media (max-width:720px){
  .fm-menu-btn{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    position:relative !important;
    z-index:95 !important;
    flex:0 0 40px !important;
    width:40px !important;
    height:40px !important;
  }

  .fm-menu-btn span{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
  }

  .fm-hero-actions{
    display:grid !important;
    grid-template-columns:128px 128px !important;
    width:fit-content !important;
    max-width:100% !important;
    justify-content:center !important;
    justify-items:stretch !important;
    align-items:center !important;
    gap:10px !important;
    margin:26px auto 0 !important;
  }

  .fm-hero-actions .fm-btn{
    width:128px !important;
    min-width:0 !important;
    max-width:128px !important;
    min-height:44px !important;
    height:44px !important;
    padding:0 12px !important;
    font-size:13px !important;
    line-height:1 !important;
    border-radius:999px !important;
  }
}

@media (max-width:360px){
  .fm-hero-actions{
    grid-template-columns:118px 118px !important;
    gap:9px !important;
  }

  .fm-hero-actions .fm-btn{
    width:118px !important;
    max-width:118px !important;
    min-height:42px !important;
    height:42px !important;
    font-size:12.8px !important;
  }
}


/* =========================================================
   PATCH 2026-05-20 / LANDINGPAGER V104 MOBILE MENU CLEAN
   목적:
   - 모바일 햄버거 버튼의 테두리/반투명 배경 제거
   - 모바일 메뉴 패널 하단의 흰색 라인/여백 제거
   보호:
   - PC 헤더/메뉴/CTA 구조 유지
   - 모바일 메뉴 열기/닫기 JS, 앵커 이동, 히어로 버튼, 모달, 슬라이더 기능 유지
   수정 범위:
   - 모바일 .fm-menu-btn 시각 스타일
   - 모바일 .fm-mobile-panel 하단 라인/여백
   ========================================================= */
@media (max-width:720px){
  .fm-menu-btn,
  .fm-header .fm-menu-btn,
  .fm-header.is-scrolled .fm-menu-btn,
  .fm-header.scrolled .fm-menu-btn,
  body.is-scrolled .fm-header .fm-menu-btn,
  body.is-menu-open .fm-header .fm-menu-btn{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    outline:0 !important;
    backdrop-filter:none !important;
  }

  .fm-menu-btn span,
  .fm-header .fm-menu-btn span{
    background:#fff !important;
  }

  .fm-header.is-scrolled .fm-menu-btn span,
  .fm-header.scrolled .fm-menu-btn span,
  body.is-scrolled .fm-header .fm-menu-btn span,
  body.is-menu-open .fm-header .fm-menu-btn span{
    background:#111315 !important;
  }

  .fm-mobile-panel{
    border-bottom:0 !important;
    box-shadow:none !important;
    padding-bottom:0 !important;
  }

  .fm-mobile-panel::after{
    content:none !important;
    display:none !important;
  }

  .fm-mobile-panel a:last-child,
  .fm-mobile-panel a.fm-mobile-panel-cta[href="#contact"],
  .fm-mobile-panel .fm-mobile-panel-cta[href="#contact"]:not(.fm-cta){
    border-bottom:0 !important;
    margin-bottom:0 !important;
  }
}



/* =========================================================
   PATCH 2026-05-20 / LANDINGPAGER V105 FEED INFO MODAL BORDER DARK
   목적: 히어로 정보 모달 상단/외곽의 흰색 테두리 제거 및 검정 계열로 정리
   보호: 모달 열기/닫기 JS, 본문 구조, 히어로/메뉴/버튼/슬라이더 기능 유지
   수정 범위: .lp-feed-info-modal 계열 테두리/닫기 버튼 테두리만 조정
   ========================================================= */
.lp-feed-info-modal__box{
  border:1px solid rgba(0,0,0,.34) !important;
  box-shadow:0 28px 90px rgba(0,0,0,.38) !important;
}

.lp-feed-info-modal__head{
  border-bottom:1px solid rgba(0,0,0,.42) !important;
}

.lp-feed-info-modal__close{
  border:1px solid rgba(0,0,0,.46) !important;
  background:rgba(255,255,255,.08) !important;
  box-shadow:none !important;
}

.lp-feed-info-modal__close:hover{
  background:rgba(255,255,255,.14) !important;
  border-color:rgba(0,0,0,.58) !important;
}



/* =========================================================
   PATCH 2026-05-20 / LANDINGPAGER V106 FEED INFO MODAL NO WHITE EDGE
   목적: 히어로 '피드형 랜딩페이지' 정보 모달의 상단 흰색/밝은 외곽선 완전 제거
   보호: 모달 열기/닫기 JS, 본문 구조, 히어로/메뉴/버튼/슬라이더 기능 유지
   수정 범위: .lp-feed-info-modal__box / __head / __body / __close 시각 테두리만 보정
   ========================================================= */
.lp-feed-info-modal__box{
  border:0 !important;
  outline:0 !important;
  background:#111315 !important;
  box-shadow:0 30px 92px rgba(0,0,0,.46) !important;
}

.lp-feed-info-modal__head{
  background:#111315 !important;
  border:0 !important;
  border-bottom:0 !important;
}

.lp-feed-info-modal__body{
  background:#fff !important;
}

.lp-feed-info-modal__close{
  border:0 !important;
  outline:0 !important;
  background:rgba(255,255,255,.12) !important;
  box-shadow:none !important;
}

.lp-feed-info-modal__close:hover{
  border:0 !important;
  background:rgba(255,255,255,.18) !important;
}

@media(max-width:720px){
  .lp-feed-info-modal__box{
    border:0 !important;
    background:#111315 !important;
  }
}



/* =========================================================
   PATCH 2026-05-20 / LANDINGPAGER V107 CONTACT CTA BUTTON TEXT UNIFY
   목적:
   - 하단 CONTACT 영역의 '제작문의하기' 버튼 텍스트가 '카톡문의하기' 버튼보다 작고 약해 보이는 문제 보정
   - 1번 버튼(제작문의하기)의 텍스트 스타일을 2번 버튼(카톡문의하기) 기준으로 통일
   보호:
   - 버튼 배경색/배치/문의 모달/카카오 링크/전체 레이아웃 구조 유지
   - 수정 범위: 하단 CONTACT CTA 버튼 텍스트 속성만
   ========================================================= */
.lp-contact-cta .lp-contact-cta__button,
.lp-contact-cta .lp-contact-cta__button:link,
.lp-contact-cta .lp-contact-cta__button:visited{
  font-family:Pretendard,"Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif !important;
  font-size:14px !important;
  font-weight:850 !important;
  line-height:1 !important;
  letter-spacing:-.04em !important;
  text-align:center !important;
  white-space:nowrap !important;
  -webkit-appearance:none !important;
  appearance:none !important;
}

.lp-contact-cta .lp-open-contact-modal{
  font-size:14px !important;
  font-weight:850 !important;
  letter-spacing:-.04em !important;
}

@media (max-width:720px){
  .lp-contact-cta .lp-contact-cta__button,
  .lp-contact-cta .lp-contact-cta__button:link,
  .lp-contact-cta .lp-contact-cta__button:visited{
    font-size:13.5px !important;
    font-weight:850 !important;
  }
}



/* =========================================================
   PATCH 2026-05-20 / LANDINGPAGER V108 MOBILE PRICE MODAL CLOSE DARK
   목적: 모바일 가격 상세 풀페이지 모달의 닫기 버튼 가시성 강화
   보호: 가격 상세 모달 열기/닫기 JS, 모달 본문, 가격 카드, 샘플 페이지 기능 유지
   수정 범위: .feedhome-modal-close 시각 스타일만 보정
   ========================================================= */
@media (max-width:720px){
  .feedhome-modal-close{
    top:14px !important;
    right:14px !important;
    width:42px !important;
    height:42px !important;
    border:0 !important;
    border-radius:50% !important;
    background:#111315 !important;
    color:#ffffff !important;
    font-size:24px !important;
    font-weight:800 !important;
    line-height:1 !important;
    box-shadow:0 10px 26px rgba(0,0,0,.20) !important;
  }

  .feedhome-modal-close:hover,
  .feedhome-modal-close:focus{
    background:#000000 !important;
    color:#ffffff !important;
    outline:0 !important;
  }
}



/* =========================================================
   PATCH 2026-05-20 / LANDINGPAGER V110 PREVIEW LOADING BAR
   목적: 샘플/포트폴리오 미리보기 iframe 로딩 메시지 위에 로딩 바 표시
   보호: iframe URL, 모달 열기/닫기, 링크 이동, 기존 샘플 페이지 연결 구조 유지
   수정 범위: .feedhome-work-loading / .feedhome-sample-loading 표시 스타일만 보정
   ========================================================= */
.feedhome-work-loading,
.feedhome-sample-loading{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:14px !important;
  color:#333 !important;
  font-size:14px !important;
  font-weight:760 !important;
  letter-spacing:-.035em !important;
  text-align:center !important;
}

.feedhome-work-loading::before,
.feedhome-sample-loading::before{
  content:"";
  display:block;
  width:168px;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg,
    rgba(17,19,21,.14) 0%,
    rgba(17,19,21,.14) 28%,
    #111315 46%,
    #111315 58%,
    rgba(17,19,21,.14) 76%,
    rgba(17,19,21,.14) 100%);
  background-size:220% 100%;
  animation:lpPreviewLoadingBar 1.05s ease-in-out infinite;
  box-shadow:0 8px 18px rgba(17,19,21,.08);
}

.feedhome-work-loading{
  inset:0 !important;
  background:#f7f3ef !important;
}

.feedhome-sample-loading{
  min-width:260px !important;
  min-height:86px !important;
  padding:18px 24px !important;
  border-radius:22px !important;
  background:#fff !important;
  box-shadow:0 14px 34px rgba(0,0,0,.12) !important;
}

@keyframes lpPreviewLoadingBar{
  0%{background-position:120% 0; opacity:.72;}
  50%{opacity:1;}
  100%{background-position:-120% 0; opacity:.72;}
}

@media (max-width:720px){
  .feedhome-work-loading,
  .feedhome-sample-loading{
    font-size:13px !important;
    gap:12px !important;
  }

  .feedhome-work-loading::before,
  .feedhome-sample-loading::before{
    width:136px;
    height:4px;
  }

  .feedhome-sample-loading{
    min-width:220px !important;
    min-height:78px !important;
    padding:16px 20px !important;
  }
}



/* =========================================================
   PATCH 2026-05-20 / LANDINGPAGER V111 LOADING BAR HIDE FIX
   목적: V110 로딩바 추가 후 iframe 로드 완료 시 로딩 오버레이가 계속 남는 문제 해결
   원인: V110의 .feedhome-*-loading display:flex !important가 기존 is-loaded 숨김 규칙보다 우선 적용됨
   보호: 샘플 링크, iframe URL, 모달 열기/닫기, 기존 미리보기 기능 유지
   수정 범위: 로드 완료 상태에서 로딩 오버레이 숨김 처리만 보정
   ========================================================= */
.feedhome-work-modal.is-loaded .feedhome-work-loading,
.feedhome-sample-modal.is-loaded .feedhome-sample-loading{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

.feedhome-work-frame,
.feedhome-sample-frame{
  position:relative !important;
  z-index:1 !important;
}

.feedhome-work-loading,
.feedhome-sample-loading{
  z-index:2 !important;
}


/* =========================================================
   PATCH 2026-05-20 / LANDINGPAGER V112 HEADER SIDE PADDING TUNE
   목적:
   - PC 와이드 화면에서 상단 헤더 좌우 여백이 과하게 넓어 보이는 문제 보정
   - 로고와 우측 제작 문의하기 버튼을 화면 안쪽으로 적당히 당겨 균형 개선
   보호:
   - V101 메뉴 간격 유지
   - 로고/CTA/메뉴 폰트/히어로/모바일 메뉴/문의 모달/슬라이더 기능 유지
   수정 범위:
   - PC 상단 헤더 컨테이너 좌우 padding만 조정
   ========================================================= */
@media (min-width:1181px){
  .fm-header .fm-container.fm-nav{
    padding-left:36px !important;
    padding-right:36px !important;
  }
}

@media (min-width:721px) and (max-width:1180px){
  .fm-header .fm-container.fm-nav{
    padding-left:28px !important;
    padding-right:28px !important;
  }
}


/* =========================================================
   PATCH 2026-05-20 / LANDINGPAGER V117 CONTACT VIRTUAL ANCHOR
   목적:
   - 제작문의하기 섹션에는 별도 타이틀 영역이 없어 모바일 앵커 위치가 불안정하게 보이는 문제 보정
   - CONTACT 검정 CTA 박스 바로 위가 아니라 섹션 시작점에 보이지 않는 기준점을 두어 위치 계산 안정화
   보호:
   - 기존 CONTACT 디자인, 문의 모달, 카카오 버튼, PC 레이아웃, 메뉴 활성화 구조 유지
   수정 범위:
   - 모바일 #contact 앵커 최종 스크롤 기준점만 보정
   ========================================================= */
.lp-contact-scroll-anchor{
  display:block;
  width:100%;
  height:0;
  overflow:hidden;
  pointer-events:none;
}
@media (max-width:720px){
  .lp-contact-scroll-anchor{
    scroll-margin-top:86px;
  }
}



/* =========================================================
   PATCH 2026-05-21 / LANDINGPAGER V107 MOBILE LOGO TITLE SIZE
   목적:
   - PC 헤더 로고 텍스트 크기는 유지
   - 모바일에서 로고 오른쪽 타이틀 "랜딩페이저"가 작게 보이는 문제만 보정
   - 하단 영문 카피는 타이틀 확대에 맞춰 아주 살짝 키워 균형 유지
   수정 범위:
   - 모바일 .fm-logo-text b / small
   - 모바일 .fm-logo-image-link 내부 로고 텍스트 한정
   보호 범위:
   - PC 헤더, 로고 이미지 크기, 햄버거 메뉴, 히어로 영상/버튼, 모달/슬라이더/FAQ 기능 유지
   ========================================================= */
@media (max-width:720px){
  .fm-logo-text b,
  .fm-logo.fm-logo-image-link .fm-logo-text b{
    font-size:18px !important;
    line-height:1.02 !important;
    font-weight:820 !important;
    letter-spacing:-.06em !important;
    white-space:nowrap !important;
  }

  .fm-logo-text small,
  .fm-logo.fm-logo-image-link .fm-logo-text small{
    margin-top:2px !important;
    font-size:8.8px !important;
    line-height:1.02 !important;
    font-weight:700 !important;
    letter-spacing:.055em !important;
    white-space:nowrap !important;
  }
}



/* =========================================================
   PATCH 2026-05-21 / LANDINGPAGER V108 MOBILE LOGO IMAGE SIZE
   목적:
   - V107에서 모바일 로고 오른쪽 타이틀을 키운 뒤, 로고 이미지가 상대적으로 작아 보이는 문제 보정
   - PC 로고/헤더는 유지하고 모바일 720px 이하에서만 로고 이미지를 살짝 확대
   수정 범위:
   - 모바일 .fm-logo-image
   - 모바일 .fm-logo.fm-logo-image-link 간격
   보호 범위:
   - PC 헤더, 히어로 영상/버튼, 햄버거 메뉴, 모달/슬라이더/FAQ 기능 유지
   ========================================================= */
@media (max-width:720px){
  .fm-logo.fm-logo-image-link{
    gap:9px !important;
  }

  .fm-logo-image{
    height:34px !important;
    max-width:160px !important;
    width:auto !important;
    object-fit:contain !important;
  }
}


/* =========================================================
   PATCH 2026-05-21 / LANDINGPAGER V109 MOBILE LOGO VISUAL BALANCE
   목적:
   - V107/V108 적용 후 모바일 헤더에서 로고 이미지가 텍스트보다 시각적으로 무거워 보이는 문제 보정
   - 모바일에서 로고 전체 영역은 유지하되 실제 이미지 표시 크기만 상하좌우 약 3px 줄인 느낌으로 조정
   수정 범위:
   - 모바일 .fm-logo-image 표시 높이/최대폭/정렬
   - 모바일 .fm-logo.fm-logo-image-link 간격 및 중앙 정렬
   보호 범위:
   - PC 헤더, 히어로 영상/버튼, 햄버거 메뉴, 모달/슬라이더/FAQ 기능 유지
   ========================================================= */
@media (max-width:720px){
  .fm-logo.fm-logo-image-link{
    gap:8px !important;
    align-items:center !important;
  }

  .fm-logo-image{
    height:31px !important;
    max-width:148px !important;
    width:auto !important;
    object-fit:contain !important;
    object-position:center center !important;
  }
}