@charset "utf-8";
/* =========================================================
   꼬망세 보드 온보딩 (helper/ai/board2.htm) 전용 스타일
   - 헤더 없음 / 콘텐츠 폭 1350px
   - 섹션 배경은 화면 full-bleed, 내부 콘텐츠만 1350 중앙정렬
   ========================================================= */
:root{
    --board-onb-width      : 1350px;   /* 콘텐츠 폭 */
    --board-onb-ink        : #2b2b3a;  /* 기본 텍스트 색 */
    --board-onb-purple-dk  : #6c5ce7;  /* 바로가기 버튼 hover 진한 퍼플 */
    --board-onb-line       : #E3E6EA;  /* 구분선/테두리 공통 색 */
}

/* 네비 클릭 시 sticky 네비(81px) 높이만큼 스크롤 오프셋 — .board-onb-section 스코프라 안전.
   ※ body/html/#BodyBox/#header/#div_contents 등 "전역" 오버라이드는 이 파일에 두면
      다른 페이지에서 실수로 include 시 그 페이지가 깨지므로 board2.htm 인라인 <style> 로 이동함. */
.board-onb-section[id]{ scroll-margin-top:81px; }

/* 페이지 : 폭 제한 없음(배경 full-bleed). 콘텐츠 폭은 .board-onb-inner 가 1350 으로 잡음 */
.board-onb{ position:relative; z-index:0; width:100%; overflow-x:clip;   /* 가로 넘침 제거 (clip 이라 sticky 네비 안 깨짐) */
     font-family:'Pretendard','Noto Sans KR','Apple SD Gothic Neo',Malgun Gothic,sans-serif; color:var(--board-onb-ink); line-height:1.5; }
/* 스크롤에 따라 색이 연속 보간되는 뷰포트 고정 배경 (JS가 background-image 갱신) */
.board-onb-bg{ position:fixed; inset:0; z-index:-1; pointer-events:none;
     background-image:linear-gradient(135deg,#F3F0FF 0%,#F7EBD6 53%,#FFF2E6 100%); }
.board-onb *{ box-sizing:border-box; }
.board-onb img{ max-width:100%; display:block; }
.board-onb a, .board-onb a:hover, .board-onb a:focus, .board-onb a:active{ text-decoration:none; color:inherit; }
.board-onb [hidden]{ display:none!important; }   /* hidden 속성이 display 규칙보다 우선 */

/* 섹션 공통 : 배경은 화면 full-bleed, 내부 콘텐츠만 1350 중앙정렬 */
.board-onb-section{ width:100%; }
.board-onb-inner{ width:var(--board-onb-width); max-width:100%; margin:0 auto; padding:0 24px; }

/* 섹션 헤더(라벨 + 타이틀 + 서브) 공통 */
.board-onb-eyebrow{ font-family:'Noto Sans KR',sans-serif; font-size:12px; font-weight:700; line-height:100%; letter-spacing:0; color:#7C6CFF; }
.board-onb-title{ font-family:'Noto Sans KR',sans-serif; font-size:20px; font-weight:700; line-height:100%; letter-spacing:0; color:#1F2430; }
.board-onb-sub{ font-family:'Noto Sans KR',sans-serif; font-size:16px; font-weight:500; line-height:100%; letter-spacing:0; color:#373737; }
.board-onb-sub b{ font-family:'Inter','Noto Sans KR',sans-serif; font-weight:600; color:#7C6CFF; } /* 강조(숫자 등) */

/* ---------- 1. 상단 네비 ---------- */
.board-onb-nav{ position:sticky; top:0; z-index:100; background:#fff; border-bottom:1px solid var(--board-onb-line); }
.board-onb-nav .board-onb-inner{ display:flex; align-items:center; justify-content:flex-start; height:81px; padding:14px 22px; }
.board-onb-nav .board-onb-nav-logo{ font-size:32px; font-weight:700; line-height:100%; letter-spacing:0; color:#7C6CFF; cursor:pointer; }
.board-onb-nav-menu{ display:flex; align-items:center; gap:80px; height:15px; margin-left:54px; }
.board-onb-nav-menu a{ font-size:20px; font-weight:500; line-height:100%; letter-spacing:0; color:#6B7280; }
.board-onb-nav-menu a:hover, .board-onb-nav-menu a.is-active{ color:#7C6CFF; }

/* ---------- 2. Hero ---------- */
.board-onb-hero{ position:relative; overflow:hidden; }   /* 배경은 .board-onb-bg 고정 그라데이션 사용 */
.board-onb-hero > .board-onb-inner{ position:relative; z-index:1; min-height:1138px; display:flex; flex-direction:column; align-items:center;
                    gap:16px; padding:38px 24px 30px; text-align:center; }

/* 배경 데코 : 콘텐츠 뒤(z-index:0), 1350 프레임 기준 좌표.
   창이 1350보다 좁으면 태블릿과 함께 비례축소되도록 scale (JS가 --board-onb-hero-scale 세팅) */
.board-onb-hero-deco{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.board-onb-hero-deco-inner{ position:relative; width:var(--board-onb-width); height:100%; margin:0 auto;
                     transform:scale(var(--board-onb-hero-scale,1)); transform-origin:top center; }
.board-onb-deco{ position:absolute; display:block; }
/* 좌측 막대사탕(지팡이) : 503.49x634.88, rotate 9.74, 불투명도 40%, right 기준 배치 */
.board-onb-deco-candycane{ width:503.49px; height:634.88px; right:1028px; top:228.18px;
                    transform:rotate(9.74deg); opacity:.4; }
/* 우상단 핑크 구름 : Figma export - 438x292, left 1015, top 241 */
.board-onb-deco-cloud{     width:438px; height:292px; left:1015px; top:241px; }
/* 우중단 체리 : Figma export - 227.93x221.86, left 1080, top 521.89, matrix(150.62°+반전), 불투명도 50% */
.board-onb-deco-cherry{    width:227.93px; height:221.86px; left:1120px; top:562.89px;
                    transform:matrix(-0.87,-0.49,-0.49,0.87,0,0); opacity:.5; }
/* 좌하단 구름 : Figma export - 570x380, left -141, top 871 */
.board-onb-deco-cloud2{    width:570px; height:380px; left:-232px; top:748px; }
.board-onb-hero-logo{ height:234px; width:auto; }
.board-onb-hero-headline{ font-family:'Noto Sans KR',sans-serif; font-size:30px; font-weight:700; line-height:100%; letter-spacing:0; text-align:center; color:#1F2430; }
.board-onb-hero-sub{ font-family:'Noto Sans KR',sans-serif; font-size:18px; font-weight:400; line-height:100%; letter-spacing:0; text-align:center; color:#373737; }
.board-onb-hero-sub b{ font-weight:700; }
.board-onb a.board-onb-btn{ display:inline-flex; align-items:center; justify-content:center;
         width:190px; height:45px; padding:9px 20px; border-radius:20px;
         background:#7C6CFF; border:1px solid transparent; color:#FFFFFF; font-weight:700; font-size:16px;
         box-shadow:0 4px 10px rgba(124,108,255,.25);
         transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease; }
.board-onb a.board-onb-btn:hover{ background:#FFFFFF; border-color:#7C6CFF; color:#7C6CFF; transform:translateY(-3px);
         box-shadow:0 10px 20px rgba(124,108,255,.20); }
.board-onb a.board-onb-btn:active{ transform:translateY(-1px); box-shadow:0 5px 12px rgba(124,108,255,.3); }
.board-onb-hero .board-onb-btn{ margin-top:6px; } /* 위 문구와 간격 22 = flex gap16 + 6 */
/* 목업 : 77.38% 폭(원본 배율 유지). stage 로 감싸 아래-가운데 캐릭터 오버레이 */
.board-onb-hero-stage{ position:relative; width:77.38%; }
.board-onb-hero-mockup{ width:100%; height:auto; display:block; }
/* 마스코트(말풍선+쿠킹이) : 아래-가운데, 목업폭의 33%(캡쳐 기준), 둥실둥실 */
.board-onb-hero-mascot{ position:absolute; left:0; right:0; bottom:-16%; width:33%; margin:0 auto; z-index:2; pointer-events:none;
                        display:flex; flex-direction:column; align-items:center;
                        animation:board-onb-float 3s ease-in-out infinite; }
.board-onb-hero-char{ width:100%; height:auto; display:block; }
@keyframes board-onb-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
/* 말풍선 : 이미지 배경 + 텍스트(타이핑) 오버레이 */
.board-onb-hero-bubble{ position:relative; display:inline-block; }
.board-onb-bubble-img{ display:block; width:calc(280px * var(--board-onb-hero-scale,1)); height:auto; }  /* 화면폭 따라 축소 */
.board-onb-bubble-text{ position:absolute; left:0; right:0; top:37%; transform:translateY(-50%); text-align:center;
                        padding:0 calc(16px * var(--board-onb-hero-scale,1));
                        font-family:'Noto Sans KR',sans-serif; font-weight:500; line-height:1.3; color:#a9785e; white-space:nowrap;
                        font-size:calc(23px * var(--board-onb-hero-scale,1)); }

/* ---------- 2.5 사용 가이드 (영상 플레이어) ---------- */
/* 프레임 1350x664, padding 50/30/34, gap30, 배경 그라데이션. hero 아래 배치 */
.board-onb-usage{ margin:-4px 0; }   /* 배경은 .board-onb-bg 고정 그라데이션 사용 */
.board-onb-usage .board-onb-inner{ display:flex; flex-direction:column; align-items:center; gap:30px; padding:50px 30px 34px; }
/* 헤더 (가운데 정렬) */
.board-onb-usage-head{ display:flex; flex-direction:column; align-items:center; gap:8px; width:100%; text-align:center; }
.board-onb-usage-eyebrow{ font-family:'Inter',sans-serif; font-weight:700; font-size:16px; line-height:19px; color:#7C6CFF; }
.board-onb-usage-title{ font-family:'Inter','Noto Sans KR',sans-serif; font-weight:700; font-size:32px; line-height:39px; color:#1F2430; }
/* 영상 스테이지 : 1290x411 비율 고정 → 데코/플레이어 % 절대배치가 균일 축소됨 */
.board-onb-usage-stage{ position:relative; width:100%; max-width:1290px; aspect-ratio:1290 / 411; }
/* 영상 플레이어 (731x411, 중앙) : 썸네일 이미지 + 실제 mp4 */
.board-onb-usage-player{ position:absolute; left:50%; top:0; transform:translateX(-50%); width:56.67%; height:100%; z-index:2;
        overflow:hidden; border-radius:18px; }
.board-onb-usage-video{ position:absolute; top:-1px; left:0; width:100%; height:calc(100% + 1px); object-fit:cover; display:block; }  /* 위로 1px : 영상 검정배경 새는 윗변을 clip 밖으로 */
/* 정중앙 커스텀 재생버튼 (재생 중엔 숨김) */
.board-onb-usage-play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3;
        width:11.5%; aspect-ratio:1 / 1; display:flex; align-items:center; justify-content:center;
        background:rgba(255,255,255,0.95); box-shadow:0 8px 24px rgba(0,0,0,0.25);
        border:none; border-radius:999px; cursor:pointer; transition:transform .2s ease; }
.board-onb-usage-play:hover{ transform:translate(-50%,-50%) scale(1.06); }
.board-onb-usage-play svg{ width:34%; height:auto; margin-left:6%; }            /* ▶ 시각적 중앙 보정 */
.board-onb-usage-play svg path{ fill:#7C6CFF; }
.board-onb-usage-player.is-playing .board-onb-usage-play{ display:none; }
/* 장식 요소 (영상 주변, Figma 좌표를 %로 환산 → 스테이지와 균일 축소) */
/* deco 순번 ↔ Figma 자산 : 1=611 2=595 3=607 4=598 5=597 6=596 7=620 8=608 9=609 */
.board-onb-usage-deco{ position:absolute; height:auto; pointer-events:none; z-index:1; }
/* 플레이어 뒤 (Figma order < player) */
.board-onb-usage-deco-1{ left:14.10%; top:-2.19%;  width:5.32%; aspect-ratio:68.6/74.01; transform:rotate(-24.56deg); }  /* 611 · 영상 왼쪽 gap29 / 바닥위 346 */
.board-onb-usage-deco-2{ left:10.36%; top:33.33%;  width:2.94%; aspect-ratio:37.91/31.03; transform:rotate(17.86deg); }  /* 595 · 영상 왼쪽 gap108 / 바닥위243 */
.board-onb-usage-deco-3{ left:15.36%; top:60.21%;  width:4.91%; aspect-ratio:63.33/25.54; transform:rotate(-15.6deg); }  /* 607 · 영상 왼쪽 gap18 / 바닥위138 */
.board-onb-usage-deco-7{ left:78.76%; top:28.95%;  width:3.95%; aspect-ratio:50.9/49.3;   transform:rotate(-9.27deg); }  /* 620 · 영상 오른쪽 gap5.5 / 위선아래 119 */
/* 플레이어 앞 (Figma order > player) */
.board-onb-usage-deco-4{ left:11.59%; top:84.91%;  width:4.96%; aspect-ratio:64/62;         z-index:3; }  /* 598 · 영상 왼쪽 gap66 / 영상바닥 맞춤 */
.board-onb-usage-deco-5{ left:84.38%; top:0%;      width:1.71%; aspect-ratio:22/18;         transform:rotate(14.5deg); z-index:3; }  /* 597 · 영상 오른쪽 gap78 / 영상위선 맞춤 */
.board-onb-usage-deco-6{ left:85.70%; top:2.92%;   width:2.56%; aspect-ratio:33/27;         transform:rotate(14.5deg); z-index:3; }  /* 596 · 영상 오른쪽 gap95 / 위선아래 12 */
.board-onb-usage-deco-8{ left:84.34%; top:53.53%;  width:5.12%; aspect-ratio:66.09/41.91;   transform:rotate(13.82deg); z-index:3; } /* 608 · 영상 오른쪽 gap77.5 / 위선아래 220 */
.board-onb-usage-deco-9{ left:81.01%; top:84.43%;  width:4.73%; aspect-ratio:61/48;          z-index:3; }  /* 609 · 영상 오른쪽 gap34.5 / 위선아래 347 */

/* ---------- 3. 핵심 콘텐츠 그리드 ---------- */
/* 프레임 : 1350x845, padding 34/30, 세로 flex gap 16 */
.board-onb-content .board-onb-inner{ min-height:845px; display:flex; flex-direction:column; gap:16px; padding:34px 30px; }
/* 섹션 헤더그룹 공통 (eyebrow+title, gap4) */
.board-onb-sec-head{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; width:100%; }
.board-onb-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:48px; } /* 1290x748, 3x2, gap16 */
.board-onb-card{ display:flex; flex-direction:column; gap:16px; }
.board-onb-card-thumb{ width:100%; height:224px; border-radius:12px; object-fit:cover; display:block; } /* 418x224 */
/* 아이콘+텍스트 감싸는 프레임 : 419x78, flex-row, padding14, gap12, border+radius14 */
.board-onb-card-info{ box-sizing:border-box; display:flex; flex-direction:row; align-items:flex-start; gap:12px;
               padding:14px; width:100%; min-height:78px; flex-grow:1;
               background:#fff; border:1px solid #E3E6EA; border-radius:14px; }
.board-onb-card-icon{ flex:none; width:35px; height:35px; border-radius:12px; object-fit:cover; display:block; }
.board-onb-card-badge{ flex:none; display:flex; align-items:center; justify-content:center; width:35px; height:35px;
                border-radius:12px; background:#7C6CFF; font-family:'Inter',sans-serif; font-weight:700; font-size:12px; color:#fff; } /* NEW 배지 */
.board-onb-card-text{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; flex-grow:1; min-width:0; }
.board-onb-card-title{ font-family:'Inter','Noto Sans KR',sans-serif; font-weight:700; font-size:14.5px; line-height:18px; color:#1F2430; }
.board-onb-card-desc{ font-family:'Noto Sans KR',sans-serif; font-weight:400; font-size:12.5px; line-height:15px; color:#6B7280; }

/* ---------- 4. 시작 가이드 (3 step) ---------- */
/* 프레임 : 1350x512, padding 34/30, 세로 flex gap 16 */
.board-onb-guide .board-onb-inner{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; padding:34px 30px; min-height:512px; }
.board-onb-guide .board-onb-sub{ color:#6B7280; }                                    /* 가이드 서브는 회색 */
/* 스텝+썸네일 한 쌍(.board-onb-guide-item)을 3열 그리드로. 반응형에선 쌍 단위로 세로 쌓임 */
.board-onb-guide-body{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding-top:12px; width:100%; }
.board-onb-guide-item{ display:flex; flex-direction:column; gap:16px; }
.board-onb-guide-step{ display:flex; flex-direction:row; align-items:flex-start; gap:10px; padding:0 13px 0 0; min-height:20px; } /* 높이 맞춰 썸네일 정렬 */
.board-onb-guide-num{ flex:none; display:flex; justify-content:center; align-items:center; width:20px; height:20px;
               background:#EEECFF; border-radius:6px;
               font-family:'Inter',sans-serif; font-weight:700; font-size:11px; line-height:13px; color:#7C6CFF; }
.board-onb-guide-steptext{ display:flex; flex-direction:column; gap:10px; }
.board-onb-guide-steptitle{ font-family:'Noto Sans KR',sans-serif; font-weight:700; font-size:15px; line-height:19px; color:#1F2430; }
.board-onb-guide-stepdesc{ font-family:'Noto Sans KR',sans-serif; font-weight:400; font-size:13px; line-height:16px; color:#6B7280; }
.board-onb-guide-thumb{ width:100%; height:272px; border:1px solid #EBEBEB; border-radius:12px; object-fit:cover; display:block; background: #ffffff}

/* 섹션 구분선 (1px #E3E6EA, full-bleed) */
.board-onb-rule{ width:100%; height:1px; background:#E3E6EA; }

/* ---------- 5. 현장의 목소리 (후기) ---------- */
.board-onb-review .board-onb-inner{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; padding:34px 30px; min-height:300px; }
.board-onb-review .board-onb-sub{ font-size:14px; line-height:17px; color:#6B7280; }
/* 자동 무한 롤링(마퀴) : 카드 세트를 JS로 1회 복제 → -50% 이동으로 끊김 없이 순환 */
.board-onb-reviews{ width:100%; overflow:hidden; padding:10px 0 8px; }
.board-onb-reviews-track{ display:flex; width:max-content; animation:board-onb-marquee 35s linear infinite; }
.board-onb-reviews:hover .board-onb-reviews-track{ animation-play-state:paused; }   /* 마우스 올리면 일시정지 */
@keyframes board-onb-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .board-onb-reviews-track{ animation:none; } }
.board-onb-review-card{ box-sizing:border-box; flex:0 0 400px; margin-right:12px;
                 display:flex; flex-direction:column; align-items:flex-start; gap:8px;
                 padding:14px; background:#FBFBFD; border:1px solid #E3E6EA; border-radius:14px; }
.board-onb-stars{ display:flex; align-items:center; gap:2px; font-size:15px; line-height:1; }
.board-onb-stars i{ font-style:normal; color:#FFC73D; }
.board-onb-stars i.board-onb-star-off{ color:#D6DBE3; }
.board-onb-stars i.board-onb-star-half{ background:linear-gradient(90deg,#FFC73D 50%,#D6DBE3 50%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.board-onb-stars .board-onb-star-rate{ margin-left:6px; font-family:'Noto Sans KR',sans-serif; font-weight:700; font-size:13px; line-height:16px; color:#4A5463; }
.board-onb-review-text{ font-family:'Noto Sans KR',sans-serif; font-weight:400; font-size:12.5px; line-height:150%; color:#4A5463; }
.board-onb-review-author{ font-family:'Noto Sans KR',sans-serif; font-weight:400; font-size:11.5px; line-height:14px; color:#6B7280; }

/* ---------- 6. 회원제 안내 (요금 3카드) ---------- */
.board-onb-price .board-onb-inner{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:16px; padding:34px 30px; min-height:424px; }
.board-onb-plans{ display:flex; flex-direction:row; align-items:stretch; gap:14px; padding-top:14px; width:100%; }
.board-onb-plan{ position:relative; box-sizing:border-box; flex:1; display:flex; flex-direction:column; align-items:center; gap:6px;
          padding:18px 16px; background:#fff; border:1px solid #E3E6EA; border-radius:16px; }
.board-onb-plan.is-best{ border:2px solid #7C6CFF; }
.board-onb-plan-name{ font-family:'Noto Sans KR',sans-serif; font-weight:700; font-size:13px; line-height:16px; color:#1F2430; }
.board-onb-plan-disc{ display:flex; align-items:center; gap:8px; }
.board-onb-plan-badge{ display:inline-flex; padding:3px 8px; background:#E63D47; border-radius:6px;
                font-family:'Noto Sans KR',sans-serif; font-weight:700; font-size:11.5px; line-height:14px; color:#fff; }
.board-onb-plan-old{ font-family:'Noto Sans KR',sans-serif; font-weight:400; font-size:13.5px; line-height:16px; text-decoration:line-through; color:#8C919E; }
.board-onb-plan-cycle{ font-family:'Noto Sans KR',sans-serif; font-weight:700; font-size:11.5px; line-height:14px; color:#6B7280; }
.board-onb-plan-price{ display:flex; align-items:baseline; gap:4px; }
.board-onb-plan-price .board-onb-plan-num{ font-family:'Inter',sans-serif; font-weight:700; font-size:22px; line-height:27px; color:#1F2430; }
.board-onb-plan-price .board-onb-plan-unit{ font-family:'Noto Sans KR',sans-serif; font-weight:400; font-size:12px; line-height:14px; color:#6B7280; }
.board-onb-plan-line{ width:100%; height:1px; background:#E3E6EA; margin:2px 0; }
.board-onb-plan-year{ font-family:'Inter',sans-serif; font-weight:700; font-size:20px; line-height:24px; color:#1F2430; }
.board-onb-plan-spacer{ flex-grow:1; }
.board-onb a.board-onb-plan-btn{ display:flex; justify-content:center; align-items:center; width:100%; padding:9px 0;
              background:#fff; border:1px solid #E3E6EA; border-radius:9px;
              font-family:'Noto Sans KR',sans-serif; font-weight:700; font-size:13.5px; line-height:16px; color:#6B7280; }
.board-onb-plan.is-best a.board-onb-plan-btn{ background:#7C6CFF; border-color:#7C6CFF; color:#fff; }
/* BEST 배지 : 가운데 카드 상단 테두리에 걸침 */
.board-onb-price-best{ position:absolute; top:0; left:50%; transform:translate(-50%,-50%); z-index:2;
                display:flex; justify-content:center; align-items:center; padding:2px 14px; background:#7C6CFF; border-radius:999px;
                font-family:'Inter',sans-serif; font-weight:700; font-size:14px; line-height:22px; color:#fff; }

/* ---------- 7. FAQ ---------- */
.board-onb-faq .board-onb-inner{ display:flex; flex-direction:column; align-items:flex-start; gap:24px; padding:50px 30px 34px; min-height:573px; }
.board-onb-faq-tabs{ display:flex; gap:28px; width:100%; border-bottom:1px solid #E3E6EA; }
.board-onb-faq-tab{ padding-bottom:10px; margin-bottom:-1px; border-bottom:2px solid transparent; cursor:pointer;
             font-family:'Noto Sans KR',sans-serif; font-weight:700; font-size:15px; line-height:18px; color:#6B7280; }
.board-onb-faq-tab.is-active{ color:#7C6CFF; border-bottom-color:#7C6CFF; }
.board-onb-faq-list{ display:flex; flex-direction:column; gap:8px; width:100%; }
.board-onb-faq-item{ background:#fff; border:1px solid #E3E6EA; border-radius:10px; }
.board-onb-faq-head{ display:flex; justify-content:space-between; align-items:center; padding:12px 14px; cursor:pointer; }
.board-onb-faq-q{ font-family:'Noto Sans KR',sans-serif; font-weight:700; font-size:13.5px; line-height:16px; color:#4A5463; }
.board-onb-faq-plus{ font-family:'Inter',sans-serif; font-weight:700; font-size:15px; line-height:18px; color:#C9CEDE; transition:transform .2s ease; }
.board-onb-faq-item.is-open .board-onb-faq-plus{ transform:rotate(45deg); }        /* + → × */
.board-onb-faq-answer{ display:none; padding:0 14px 14px; font-family:'Noto Sans KR',sans-serif; font-weight:400; font-size:13px; line-height:1.7; color:#6B7280; }
.board-onb-faq-item.is-open .board-onb-faq-answer{ display:block; }
/* 1:1 문의 패널 */
/* 1:1 문의 폼 (회원/비회원 분기) — 카드=.board-onb-inq */
.board-onb-faq-inquiry{ width:100%; }
.board-onb-inq{ box-sizing:border-box; display:flex; flex-direction:column; align-items:stretch; gap:12px; width:100%;
                padding:20px 22px 22px; background:#fff; border:1px solid #DEE2E7; border-radius:16px; }
.board-onb-inq-field{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; width:100%; }
.board-onb-inq-label{ font-family:'Inter','Noto Sans KR',sans-serif; font-weight:700; font-size:13px; line-height:16px; color:#4A5463; }
.board-onb-inq-label i{ margin-left:2px; font-style:normal; color:#E63D47; }
.board-onb-inq-input{ box-sizing:border-box; width:100%; height:38px; padding:11px 14px;
                      background:#FAFAFC; border:1px solid #DEE2E7; border-radius:8px;
                      font-family:'Inter','Noto Sans KR',sans-serif; font-weight:400; font-size:13px; line-height:16px; color:#1F2430; }
.board-onb-inq-input::placeholder{ color:#9EA3B3!important; }   /* 전역 input[type=text] placeholder 규칙보다 우선 → 전 필드 통일 */
.board-onb-inq-textarea{ box-sizing:border-box; width:100%; min-height:198px; padding:11px 14px; resize:vertical;
                         background:#FAFAFC; border:1px solid #DEE2E7; border-radius:8px;
                         font-family:'Inter','Noto Sans KR',sans-serif; font-weight:400; font-size:13px; line-height:1.6; color:#1F2430; }
.board-onb-inq-textarea::placeholder{ color:#9EA3B3!important; }
.board-onb-inq-hint{ font-family:'Inter','Noto Sans KR',sans-serif; font-weight:500; font-size:10px; line-height:1.3; color:#FF5555; }
.board-onb-inq-pwrow{ display:flex; align-items:center; gap:10px; width:100%; }   /* 비번 입력 + 안내문 한 줄 */
.board-onb-inq-pw{ width:581px; max-width:100%; flex:none; }                       /* 비밀번호 입력 폭 581 */
.board-onb-inq-pwrow .board-onb-inq-hint{ flex:1; }                                /* 안내문 남는 폭 차지(한 줄) */
/* 제목 행 : 카테고리(고정 '보드') + 제목 입력 */
.board-onb-inq-titlerow{ display:flex; align-items:center; gap:6px; width:100%; }
.board-onb-inq-titlerow .board-onb-inq-input{ flex:1; }
.board-onb-inq-select{ box-sizing:border-box; flex:none; width:160px; height:38px; padding:0 12px;
                       background:#FAFAFC; border:1px solid #DEE2E7; border-radius:8px; cursor:not-allowed;
                       font-family:'Inter','Noto Sans KR',sans-serif; font-weight:400; font-size:13px; color:#4A5463;
                       opacity:1; -webkit-text-fill-color:#4A5463; }   /* disabled 여도 흐려보이지 않게 */
.board-onb-inq-privacy{ box-sizing:border-box; width:100%; padding:14px 16px; background:#fff; border:1px solid #DEE2E7; border-radius:8px;
                        font-family:'Inter','Noto Sans KR',sans-serif; font-weight:500; font-size:12px; color:#000; }
.board-onb-inq-privacy p{ margin:0; line-height:1.7; }
.board-onb-inq-privacy .pv-sec{ margin-top:9px; }      /* 섹션 사이 간격(빈 줄 대신) */
.board-onb-inq-privacy .pv-i{ padding-left:12px; }     /* 하위 항목 들여쓰기 */
.board-onb-inq-agree{ box-sizing:border-box; display:flex; align-items:center; gap:8px; width:100%; padding:11px 14px;
                      background:#FAFAFC; border:1px solid #DEE2E7; border-radius:5px; cursor:pointer; }
.board-onb-inq-agree input{ width:14px; height:14px; margin:0; accent-color:#7C6CFF; }
.board-onb-inq-agree span{ font-family:'Inter','Noto Sans KR',sans-serif; font-weight:500; font-size:13px; line-height:16px; color:#000; }
.board-onb-inq-actions{ display:flex; justify-content:center; align-items:center; gap:10px; width:100%; margin-top:4px; }
.board-onb a.board-onb-inq-list{ display:inline-flex; justify-content:center; align-items:center; box-sizing:border-box;
                  min-width:100px; height:39px; padding:11px 20px; background:#fff; border:1px solid #DEE2E7; border-radius:9px;
                  font-family:'Inter','Noto Sans KR',sans-serif; font-weight:700; font-size:14px; line-height:17px; color:#6B7280; }
.board-onb-inq-submit{ display:inline-flex; justify-content:center; align-items:center; box-sizing:border-box;
                  min-width:100px; height:39px; padding:11px 20px; border:none; cursor:pointer;
                  background:#7C6CFF; border-radius:9px; font-family:'Inter','Noto Sans KR',sans-serif; font-weight:700; font-size:14px; line-height:17px; color:#fff; }

/* ---------- 8. Footer : 공용 __COMMON_FOOTER__() 사용 (board.htm 동일) ---------- */

/* =========================================================
   반응형
   - 콘텐츠(.board-onb-inner)는 max-width:100% 라 폭은 자동으로 줄어듦
   - 여기선 그리드 열 수 / 폰트 / 여백 / 히어로 높이만 보정
   ========================================================= */

/* 1350 미만 : 히어로 고정높이(1138) 해제 → 콘텐츠 높이에 맞게 */
@media (max-width:1350px){
    .board-onb-hero .board-onb-inner{ min-height:auto; padding-bottom:60px; }
}

/* 태블릿 (~1024) : 3열 → 2열, 스텝은 1열, 여백/폰트 축소 */
@media (max-width:1024px){
    .board-onb-title{ font-size:24px; }
    .board-onb-hero-headline{ font-size:26px; line-height:1.3; }
    .board-onb-grid{ grid-template-columns:repeat(2,1fr); }
    .board-onb-reviews{ grid-template-columns:repeat(2,1fr); }
    .board-onb-plans{ flex-direction:column; gap:20px; }                /* 요금제 세로 쌓기 */
    .board-onb-guide-body{ grid-template-columns:1fr; gap:44px; }       /* 가이드: 쌍 사이 여백 크게(그룹 구분) — 쌍 내부는 16 유지 */
    .board-onb-nav-menu{ margin-left:40px; gap:26px; }
}

/* 모바일 (~768) : 전부 1열, 네비/히어로 축소 */
@media (max-width:768px){
    .board-onb-inner{ padding:0 16px; }
    .board-onb-title{ font-size:21px; }
    .board-onb-sub{ font-size:14px; }
    .board-onb-hero-logo{ height:150px; }
    .board-onb-hero-headline{ font-size:21px; line-height:1.35; }
    .board-onb-hero-sub{ font-size:15px; line-height:1.4; }
    .board-onb-grid{ grid-template-columns:1fr; gap:44px; }      /* 카드(썸네일+설명) 사이 여백 크게 — 카드 내부 thumb→info는 16 유지 */
    .board-onb-reviews{ grid-template-columns:1fr; gap:20px; }
    .board-onb-nav-menu{ margin-left:20px; gap:16px; }
    .board-onb-nav-menu a{ font-size:12px; }
    .board-onb-deco{ display:none; }              /* 배경 데코는 모바일에서 숨김 */
}

/* 소형 모바일 (~480) : 네비 줄바꿈 허용 */
@media (max-width:480px){
    .board-onb-nav .board-onb-inner{ height:auto; flex-wrap:wrap; padding:12px 16px; }
    .board-onb-nav-menu{ width:100%; margin:8px 0 0; gap:14px; }
    .board-onb-hero .board-onb-inner{ padding-top:28px; }
    .board-onb-hero-logo{ height:120px; }
    .board-onb-hero-headline{ font-size:19px; }
}