/* 비디모아 소개 페이지 — 전달본(styles.css 등)에 더한 것만 (2026-10-20). 체험하기 버튼 · 에이전트 메모 · 쿠키 설정 · 후기 */

/* 히어로: 소개 보러가기 + 로그인 없이 체험해 보기 */
.lp-hero-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 18px}
.lp-hero-demo{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 6px;font-size:15px;font-weight:570;color:#2d333d;text-decoration:underline;text-decoration-color:#ff5c2866;text-underline-offset:5px}
.lp-hero-demo .icon{width:16px;height:16px;color:var(--accent)}
.lp-hero-demo:hover{color:var(--accent)}

/* 머리: 체험하기 (로그인 옆) */
.lp-demo-link{color:var(--accent)}

/* 마지막 CTA: 시작하기 + 먼저 체험해 보기 */
.lp-final-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:28px}
.lp-final-actions .button{margin-top:0}
.button.lp-ghost{background:#fff;color:var(--ink);border-color:#e3d5cd}
.button.lp-ghost:hover{border-color:var(--accent)}
@media(max-width:560px){.lp-final-actions{flex-direction:column;align-items:stretch;width:100%;max-width:340px;margin-inline:auto}.lp-final-actions .button{justify-content:space-between}}

/* 에이전트 메모 — 왜 이렇게 썼는지 (채널 특성) */
.lp-memo{margin:4px 12px 14px;padding:11px 13px;border-radius:12px;background:#fff6f1;border:1px solid #ffe1d4;font-size:12.5px;line-height:1.6;color:#4b3a33}
.lp-memo>b{display:block;font-size:12px;font-weight:650;color:#b5411c;margin-bottom:3px}
.lp-memo>p{margin:0;word-break:keep-all}
.lp-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.lp-chips>i{font-style:normal;font-size:11.5px;line-height:1.3;padding:4px 8px;border-radius:99px;background:#fff;border:1px solid #ffd2bf;color:#9c3a17;white-space:nowrap}
.make-thread-post .lp-memo{margin-inline:15px}
.tour-writing-note .lp-chips{margin-top:9px}
.lp-scene-note{margin-top:12px}
.c-ref-post-analysis em{display:block;font-style:normal;color:#b5411c;margin-top:3px}

/* 자동으로 모으지 않는 채널 표시 (릴스·틱톡·네이버 클립 — 링크로 저장) */
[data-ref-manual] .c-ref-collected{opacity:1;background:#f1f3f6;color:#4b5563}

/* 푸터: 쿠키 설정 버튼을 링크처럼 */
.lp-cookie{background:none;padding:0;font-size:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px}

/* 후기 — 관리자가 실제 후기를 등록했을 때만 (가짜 후기 금지) */
.lp-reviews-section{padding:90px 0 20px}
.lp-reviews-section h2{margin-bottom:28px}
.lp-reviews{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,340px);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
.lp-review{scroll-snap-align:start;margin:0;padding:24px;border:1px solid var(--line);border-radius:20px;background:#fff;display:flex;flex-direction:column;gap:16px}
.lp-review blockquote{margin:0;font-size:15px;line-height:1.8;color:#2b313b}
.lp-review figcaption{margin-top:auto;font-size:13px;color:var(--muted)}
.lp-review figcaption b{color:var(--ink)}


/* 루트 레이아웃의 쿠키 동의 창은 Tailwind 로 그린다 — 전달본의 전역 button·a 규칙(색·테두리 상속)이 덮지 않게 원래 값으로 */
[role=dialog][aria-label="쿠키 사용 동의"] :is(button,a){color:revert-layer;border:revert-layer;background:revert-layer}

/* ── 2026-10-21 진수 님: 투어 글 줄이기 · 단계 뜻 한 줄 · 성과 그래프 낮게 · 요금 1개월만 ── */
/* 투어 단계 탭 — 이름만(2026-10-21 진수 님: 한 줄 뜻 삭제), 휴대폰은 세 칸 같은 폭(오른쪽 잘림 없음) */
/* 단계마다 덜 중요한 설명 줄은 뺌 — 무엇을 하는 단계인지만 남김 */
.tour-request-context,.tour-agent-heading p,.tour-agent-task p{display:none}
@media(max-width:680px){
  .tour-tabs{gap:0}
  .tour-tab{flex:1;justify-content:center;padding:0 2px}
  .tour-review-account br,.tour-review-account{display:none}
  .tour-writing-note,.tour-interact-hint p{display:none}
}
/* 휴대폰 — 투어 화면을 네모 카드 대신 화면 폭 꽉 차게, 단계 칸 최소 높이를 낮춰 '확인하기' 아래 빈칸을 줄임([수정 화면 열어보기] 줄은 삭제) */
@media(max-width:640px){
  .tour-app{margin-inline:-20px;border-radius:0;border-inline:0;box-shadow:none}
  .tour-stage-stack{--tour-stage-min-height:540px}
}
/* 성과 — 그래프를 낮춰서 '비디모아의 분석'까지 한 화면에 */
@media(max-width:680px){.ap-chart{height:168px}.ap-chart-header{margin-top:16px}}
/* 요금 — 1개월 이용권 한 장 (3·6개월은 결제 화면에서 고름) */
.pricing-grid.lp-pricing-one{grid-template-columns:minmax(0,460px);justify-content:center}
.lp-price-pitch{margin:4px 0 18px;padding:12px 14px;border-radius:12px;background:#fff6f1;color:#4b3a33;font-size:14.5px;line-height:1.6;word-break:keep-all}
.lp-price-more{margin:12px 0 0;font-size:13px;line-height:1.6;color:#65707d;word-break:keep-all}

/* 투어 '확인하기' — 게시물 미리보기 한 장만 가운데 */
.tour-approval.tour-approval-solo{grid-template-columns:minmax(0,300px);justify-content:center}
/* 업종 섹션(휴대폰) — 탭·글·그림 사이 여백을 줄이고 그림 칸을 낮춰 한 화면에 (진수 님 2026-10-21)
   글 칸·그림 칸 높이는 탭을 바꿔도 흔들리지 않게 고정값 — 글은 위에서부터, 겹치는 설명 띠(.business-float)는 글 칸 한 줄과 같아서 뺌 */
@media(max-width:640px){
  .business-tabs{margin-bottom:12px}
  .business-panel{--business-copy-height:250px;--business-art-height:430px;height:calc(var(--business-copy-height) + var(--business-art-height))}
  .business-scene{grid-template-rows:var(--business-copy-height) var(--business-art-height)}
  .business-copy{padding:18px 22px 10px;justify-content:flex-start}
  .business-art{padding:18px 16px}
  .business-scene .business-art .business-float{display:none}
}
@media(min-width:481px) and (max-width:640px){.business-panel{--business-copy-height:250px}}
@media(max-width:360px){.business-panel{--business-copy-height:285px}}

/* ── 색 정리 (2026-10-21 진수 님) — 흰색·주황·검정·옅은 주황이 섞여 어수선 → 세 가지만
   ① 누르는 버튼·고른 것 = 주황 한 가지(--accent, [1개월 시작하기]와 같은 색)
   ② 안 고른 것·이름표 = 회색 한 가지(#f3f4f6 바탕 · #56606e 글자)
   ③ 옅은 주황 바탕은 쓰지 않음(회색 바탕 또는 흰 바탕 + 주황 테두리) */
:root{--lp-gray-bg:#f3f4f6;--lp-gray-fg:#56606e;--lp-accent-hover:#e74817}
/* ① 버튼 */
.button-dark,.hero-cta,.start-cta,.ap-plan-button,.tour-btn-dark,.tour-submit-arrow{background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important}
.button-dark:hover,.hero-cta:hover,.start-cta:hover,.ap-plan-button:hover,.tour-btn-dark:hover{background:var(--lp-accent-hover)!important;border-color:var(--lp-accent-hover)!important}
.hero-cta>span{color:var(--accent)}
/* ① 고른 것 */
.tour-tab.is-active>span{background:var(--accent);color:#fff}
.business-tabs button[aria-selected=true]{background:var(--accent);color:#fff}
.business-tabs button[aria-selected=true]>span{background:#ffffff80}
.tour-fix-chip.is-active{background:var(--accent);border-color:var(--accent);color:#fff}
.tour-channel.is-active{background:#fff;border-color:var(--accent)}
.desk-count{background:var(--accent);color:#fff}
.desk-task-dot{background:var(--accent)}
.desk-task-row.is-active{background:#fff;box-shadow:inset 0 0 0 1.5px var(--accent);border-radius:10px}
.desk-task-row button{color:var(--accent)}
.desk-task-row button:hover{color:var(--lp-accent-hover)}
/* ② 회색 한 가지 */
.tour-example,.tour-tab>span,.business-tabs button{background:var(--lp-gray-bg);color:var(--lp-gray-fg)}
/* ③ 옅은 주황 바탕 → 회색 */
.lp-price-pitch{background:var(--lp-gray-bg);color:var(--ink)}
.final-section{background:var(--lp-gray-bg)}
.button.lp-ghost{border-color:#dfe2e7}
/* 요청 칸 보내기 버튼 — 글자 화살표(↑)는 글꼴 줄 높이 때문에 위로 뜸 → 작은 그림 화살표를 가로·세로 가운데 */
.tour-submit-arrow{display:flex;align-items:center;justify-content:center;font-size:0;line-height:0}
.tour-submit-arrow svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* PC 도 같은 배치 (진수 님 2026-10-21: 레이아웃은 PC 도 같이, 레퍼런스 흐름 속도만 그대로)
   ① 투어 — 네모 카드 대신 화면 폭 꽉 차게(안 내용은 본문 폭 1160px 안에 그대로)
   ② 업종 — 탭 아래 여백 줄이고, 그림 위 설명 띠는 아이콘 옆 한 줄과 같아서 뺌
   ③ 성과 — 그래프를 낮춰 분석까지 한눈에 */
@media(min-width:641px){
  .tour-section>.wrap{width:100%;max-width:none}
  .tour-app{border-radius:0;border-inline:0;box-shadow:none}
  .tour-app>.tour-appbar,.tour-app>.tour-toolbar{padding-inline:max(24px,calc((100% - 1160px)/2 + 30px))}
  .tour-app .tour-panel{padding-inline:max(24px,calc((100% - 1160px)/2 + 34px))}
  .business-tabs{margin-bottom:12px}
  .business-scene .business-art .business-float{display:none}
  .ap-chart{height:200px}
}