/* Home(Index) 페이지 전용 스타일 */
.hero-section {
  position: relative;
  overflow: hidden;
}
.hero-section::before {
  content: "";
  position: absolute;
  top: -180px;
  right: -160px;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, var(--color-primary-100) 0%, rgba(238,240,253,0) 70%);
  z-index: -1;
}

/* ===== 홈 개편 2차 (2026-10-12): 브라이트 Q&A 골격 + 벤토 서비스, 라이트 고정 =====
   사이트 공용 스타일(Bootstrap/base.css)과 충돌하지 않도록 모든 규칙을 .home-v2 아래로 묶는다.
   움직임은 /js/home.js(GSAP)가 담당하고, JS가 없거나 동작 줄이기 설정이면 정지 상태로 그대로 보인다. */
.home-v2 {
  --hv-bg: #F4F6F9;
  --hv-surface: var(--color-white);
  --hv-surface2: #F6F8FB;
  --hv-fg: #121722;
  --hv-muted: #5D6777;
  --hv-line: #E2E6ED;
  --hv-bubble: #E9EDF3;
  --hv-ease: cubic-bezier(.16,1,.3,1);
  background: var(--hv-bg);
  color: var(--hv-fg);
  overflow-x: clip;
  /* 한글이 '한 / 잔을'처럼 단어 중간에서 끊기지 않도록 어절 단위 줄바꿈 */
  word-break: keep-all;
  overflow-wrap: break-word;
}
.home-v2 h1, .home-v2 h2, .home-v2 h3 { margin: 0; text-wrap: balance; color: inherit; }
.home-v2 p { margin: 0; }
.home-v2 a { text-decoration: none; }
.home-v2 .hv-eyebrow { font-weight: 700; font-size: var(--fs-small); line-height: 1; color: var(--color-primary); }
.home-v2 .hv-sec-title { font-weight: 900; font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.8rem); letter-spacing: -.035em; line-height: 1.2; }

/* 버튼 */
.home-v2 .hv-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.home-v2 .hv-btn { display: inline-flex; align-items: center; gap: 8px; padding: 15px 22px; border-radius: 16px; font-weight: 700; font-size: 15px; line-height: 1.2; transition: transform .3s var(--hv-ease), background .3s; }
.home-v2 .hv-btn.primary { background: var(--color-primary); color: var(--color-white); }
.home-v2 .hv-btn.primary:hover { background: var(--color-primary-600); transform: translateY(-2px); }
.home-v2 .hv-btn.ghost { background: var(--hv-surface); border: 1px solid var(--hv-line); color: var(--hv-fg); }
.home-v2 .hv-btn.ghost:hover { background: #EEF2F7; }

/* 히어로 */
.home-v2 .hv-hero { padding-top: clamp(56px, 7vw, 100px); }
.home-v2 .hv-hero-head { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,.7fr); gap: 30px; align-items: end; }
.home-v2 .hv-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px; background: var(--hv-surface); border: 1px solid var(--hv-line); font-size: var(--fs-small); font-weight: 500; max-width: 100%; }
.home-v2 .hv-badge b { flex: none; background: var(--color-accent); color: var(--color-white); border-radius: 999px; padding: 3px 10px; font-size: 12px; }
.home-v2 .hv-title { margin-top: 22px; font-weight: 900; font-size: clamp(2.2rem, 1.2rem + 4vw, 4.6rem); line-height: 1.14; letter-spacing: -.045em; }
.home-v2 .hv-title .ln { display: block; overflow: hidden; padding-bottom: .04em; }
.home-v2 .hv-title .ln > span { display: inline-block; }
.home-v2 .hv-title .hl { color: var(--color-primary); }
.home-v2 .hv-side { display: grid; gap: 18px; padding-bottom: 10px; }
/* 데스크톱: 제목은 전체 폭을 써서 첫 줄('여유롭게 커피 한잔을 즐기세요.')을 한 줄로 두고,
   설명·버튼은 짧은 3~4번째 줄 오른쪽 빈자리에 겹쳐 배치한다. */
@media (min-width: 992px) {
  .home-v2 .hv-hero-head { grid-template-columns: minmax(0, 1fr); }
  .home-v2 .hv-hero-head > * { grid-area: 1 / 1; }
  .home-v2 .hv-hero-head .hv-side { justify-self: end; align-self: end; width: min(400px, 38%); }
  .home-v2 .hv-title .ln:first-child > span { white-space: nowrap; }
}
/* 일본어는 첫 줄이 길어 1200px 미만에서는 설명·버튼과 겹친다 - 이 구간은 위아래 배치로 되돌린다 */
@media (min-width: 992px) and (max-width: 1199.98px) {
  body.lang-jp .home-v2 .hv-hero-head > * { grid-area: auto; }
  body.lang-jp .home-v2 .hv-hero-head .hv-side { justify-self: start; width: min(560px, 100%); }
}
.home-v2 .hv-side p { color: var(--hv-muted); font-size: 1.05rem; }
.home-v2 .hv-media-wrap { margin-top: clamp(40px, 5vw, 64px); }
.home-v2 .hv-media { position: relative; height: clamp(320px, 62vh, 640px); overflow: hidden; clip-path: inset(0 clamp(16px, 4vw, 40px) round 28px); }
.home-v2 .hv-media .img { position: absolute; inset: -6% 0; background: url("/images/coffee-hero.jpg") 60% 55% / cover no-repeat; will-change: transform; }
.home-v2 .hv-media .tagline { position: absolute; left: clamp(32px, 6vw, 72px); bottom: clamp(28px, 4vw, 48px); display: flex; gap: 10px; align-items: center; margin-right: 32px; color: var(--hv-fg); font-weight: 700; font-size: clamp(.95rem, .9rem + .4vw, 1.2rem); padding: 12px 18px; border-radius: 16px; background: rgba(255,255,255,.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 12px 30px rgba(18,23,34,.15); }
.home-v2 .hv-media .tagline i { color: var(--color-primary); font-size: 1.2em; }

/* 고민 대화 */
.home-v2 .hv-chat { padding-block: clamp(80px, 10vw, 140px); }
.home-v2 .hv-chat-grid { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: clamp(30px, 6vw, 90px); align-items: start; }
.home-v2 .hv-chat-head { position: sticky; top: calc(var(--header-height) + 32px); display: grid; gap: 14px; }
.home-v2 .hv-chat-head p { color: var(--hv-muted); }
.home-v2 .hv-thread { display: grid; gap: 14px; }
.home-v2 .msg { max-width: min(440px, 88%); padding: 14px 18px; border-radius: 22px; font-size: 1.02rem; line-height: 1.55; }
.home-v2 .msg.me { justify-self: end; background: var(--hv-bubble); border-bottom-right-radius: 6px; }
.home-v2 .msg.st { justify-self: start; display: grid; gap: 10px; background: var(--color-primary); color: var(--color-white); border-bottom-left-radius: 6px; }
.home-v2 .msg.st a { justify-self: start; display: inline-flex; gap: 6px; align-items: center; font-size: 13px; font-weight: 700; color: var(--color-white); background: rgba(255,255,255,.18); padding: 7px 12px; border-radius: 999px; transition: background .25s; }
.home-v2 .msg.st a:hover { background: rgba(255,255,255,.3); }
.home-v2 .who { justify-self: start; display: flex; gap: 8px; align-items: center; margin-top: 10px; font-size: 12px; color: var(--hv-muted); }
.home-v2 .who i { width: 22px; height: 22px; border-radius: 50%; background: var(--color-primary); display: inline-block; }
.home-v2 .typing { justify-self: start; display: none; gap: 5px; padding: 14px 16px; border-radius: 22px; background: var(--hv-surface); border: 1px solid var(--hv-line); }
.home-v2 .typing i { width: 7px; height: 7px; border-radius: 50%; background: #9AA4B4; animation: hv-dot 1s infinite; }
.home-v2 .typing i:nth-child(2) { animation-delay: .15s; }
.home-v2 .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes hv-dot { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-4px); opacity: 1; } }

/* 서비스 벤토 */
.home-v2 .hv-svc { padding-bottom: clamp(80px, 10vw, 130px); }
.home-v2 .hv-svc-head { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 20px; align-items: end; margin-bottom: 30px; }
.home-v2 .hv-svc-head .hv-sec-title { margin-top: 12px; }
.home-v2 .hv-svc-head > p { color: var(--hv-muted); max-width: 26em; }
.home-v2 .hv-bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(200px, auto); gap: 16px; }
.home-v2 .tile { --k: var(--color-primary); --k-soft: var(--color-primary-100); position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: 26px; background: var(--hv-surface); border: 1px solid var(--hv-line); color: var(--hv-fg); transition: transform .5s var(--hv-ease), box-shadow .5s, border-color .4s; }
.home-v2 .tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(440px circle at var(--mx, 50%) var(--my, -20%), var(--k-soft), transparent 50%); opacity: 0; transition: opacity .4s; }
.home-v2 .tile:hover { transform: translateY(-5px); box-shadow: 0 24px 50px rgba(18,23,34,.09); border-color: color-mix(in srgb, var(--k) 35%, var(--hv-line)); }
.home-v2 .tile:hover::before { opacity: 1; }
.home-v2 .tile .t-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.home-v2 .tile .t-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--k-soft); color: var(--k); font-size: 21px; }
.home-v2 .tile h3 { font-size: 1.4rem; font-weight: 900; letter-spacing: -.03em; }
.home-v2 .tile p { color: var(--hv-muted); font-size: 15px; }
.home-v2 .tile .badge { font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 999px; background: var(--k-soft); color: var(--k); }
.home-v2 .tile .t-link { margin-top: auto; align-self: flex-start; display: inline-flex; gap: 8px; align-items: center; padding: 10px 15px; border-radius: 12px; font-weight: 700; font-size: 14px; background: var(--hv-fg); color: var(--color-white); transition: gap .3s, background .3s; }
.home-v2 .tile:hover .t-link { gap: 12px; background: var(--k); }
.home-v2 .k-boost { --k: var(--color-primary); --k-soft: var(--color-primary-100); }
.home-v2 .k-script { --k: #B4501B; --k-soft: var(--color-accent2-100); }
.home-v2 .k-shorts { --k: var(--color-accent); --k-soft: var(--color-accent-100); }
.home-v2 .k-bridge { --k: #17714A; --k-soft: #E7F6EE; }
.home-v2 .t-booster { grid-column: span 4; grid-row: span 2; }
.home-v2 .t-script { grid-column: span 2; grid-row: span 2; }
.home-v2 .t-shorts, .home-v2 .t-bridge { grid-column: span 3; }
.home-v2 .boost-viz { margin-block: 8px; display: grid; gap: 14px; }
.home-v2 .boost-num { font-weight: 900; font-size: clamp(2.6rem, 2rem + 2.4vw, 4.2rem); line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.home-v2 .boost-num small { font-size: .3em; color: var(--hv-muted); font-weight: 500; margin-left: 8px; letter-spacing: 0; }
.home-v2 .boost-viz svg { width: 100%; height: 120px; display: block; }
.home-v2 .tiers { display: flex; gap: 8px; flex-wrap: wrap; }
.home-v2 .tiers span { font-size: 13px; padding: 7px 12px; border-radius: 10px; background: var(--hv-surface2); border: 1px solid var(--hv-line); color: var(--hv-muted); }
.home-v2 .tiers span b { color: var(--hv-fg); font-weight: 700; margin-left: 4px; }
.home-v2 .script-box { margin-block: 6px; min-height: 160px; padding: 14px; border-radius: 14px; background: #FFF8F3; border: 1px solid #F5DCCB; font: 500 13px/1.7 ui-monospace, Consolas, "D2Coding", monospace; color: #5B4334; white-space: pre-wrap; }
.home-v2 .script-box .cur { display: inline-block; width: 7px; height: 1.05em; background: var(--color-accent2); vertical-align: text-bottom; animation: hv-blink 1s steps(1) infinite; }
@keyframes hv-blink { 50% { opacity: 0; } }
.home-v2 .script-meta { display: flex; gap: 6px; align-items: center; font-size: 12px; font-weight: 500; color: var(--hv-muted); }
.home-v2 .shorts-row { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; height: 100%; }
.home-v2 .shorts-copy { display: flex; flex-direction: column; gap: 10px; }
.home-v2 .phone { position: relative; overflow: hidden; width: 96px; aspect-ratio: 9 / 16; border-radius: 18px; border: 3px solid var(--hv-fg); background: url("/images/coffee-hero.jpg") 58% 60% / cover; box-shadow: 0 14px 30px rgba(18,23,34,.18); }
.home-v2 .phone .pl { position: absolute; inset: 0; display: grid; place-items: center; color: var(--color-white); font-size: 28px; text-shadow: 0 2px 6px rgba(0,0,0,.45); }
.home-v2 .phone .pbar { position: absolute; left: 8px; right: 8px; bottom: 8px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.4); overflow: hidden; }
.home-v2 .phone .pbar i { display: block; height: 100%; background: var(--color-white); transform-origin: left; animation: hv-play 5s linear infinite; }
@keyframes hv-play { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.home-v2 .bars { display: flex; align-items: flex-end; gap: 8px; height: 84px; margin-top: 4px; }
.home-v2 .bars i { flex: 1; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--color-success), rgba(34,163,102,.12)); transform-origin: bottom; }
.home-v2 .hv-marquee { margin-top: 16px; display: flex; gap: 18px; align-items: center; padding: 14px 0; overflow: hidden; border-radius: 20px; background: var(--hv-surface); border: 1px solid var(--hv-line); }
.home-v2 .hv-marquee .lead { flex: none; padding-left: 22px; font-size: 13px; font-weight: 700; color: var(--hv-muted); }
.home-v2 .m-mask { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.home-v2 .m-track { display: flex; gap: 10px; width: max-content; animation: hv-scroll 40s linear infinite; }
.home-v2 .m-track span { flex: none; padding: 7px 14px; border-radius: 999px; background: var(--hv-surface2); border: 1px solid var(--hv-line); font-size: 14px; }
.home-v2 .m-track span::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--color-success); vertical-align: middle; }
@keyframes hv-scroll { to { transform: translateX(-50%); } }

/* 숫자 / FAQ / 마무리 */
.home-v2 .hv-trust { background: var(--hv-surface); border-block: 1px solid var(--hv-line); }
.home-v2 .hv-trust .container-xl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding-block: 44px; }
.home-v2 .hv-trust strong { display: block; font-weight: 900; font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.home-v2 .hv-trust span { color: var(--hv-muted); font-size: var(--fs-small); }
.home-v2 .hv-faq { padding-block: clamp(80px, 10vw, 130px); }
.home-v2 .hv-faq-grid { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: clamp(30px, 6vw, 90px); }
.home-v2 .hv-faq .hv-sec-title { margin-top: 12px; }
.home-v2 .hv-faq details { border-bottom: 1px solid var(--hv-line); }
.home-v2 .hv-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 22px 0; font-weight: 700; font-size: 1.08rem; }
.home-v2 .hv-faq summary::-webkit-details-marker { display: none; }
.home-v2 .hv-faq summary::after { content: "+"; font-weight: 400; font-size: 1.4rem; line-height: 1; color: var(--hv-muted); transition: transform .3s; }
.home-v2 .hv-faq details[open] summary::after { transform: rotate(45deg); }
.home-v2 .hv-faq details p { color: var(--hv-muted); padding-bottom: 22px; max-width: 40em; }
.home-v2 .hv-final { padding-bottom: clamp(60px, 8vw, 110px); }
.home-v2 .hv-final .box { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0,1.4fr) auto; gap: 30px; align-items: center; padding: clamp(40px, 6vw, 80px); border-radius: 32px; background: linear-gradient(135deg, var(--color-primary-100), var(--color-primary-50) 55%, var(--color-white)); border: 1px solid #D3E6F8; }
.home-v2 .hv-final .box::after { content: ""; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(5,110,204,.14), transparent 70%); pointer-events: none; }
.home-v2 .hv-final h2 { font-weight: 900; font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.7rem); letter-spacing: -.035em; line-height: 1.25; }
.home-v2 .hv-final p { color: var(--hv-muted); margin-top: 12px; max-width: 38em; }

@media (max-width: 991.98px) {
  .home-v2 .hv-hero-head, .home-v2 .hv-chat-grid, .home-v2 .hv-faq-grid, .home-v2 .hv-final .box, .home-v2 .hv-svc-head { grid-template-columns: 1fr; }
  .home-v2 .hv-chat-head { position: static; }
  .home-v2 .hv-bento { grid-template-columns: 1fr 1fr; }
  .home-v2 .t-booster, .home-v2 .t-script, .home-v2 .t-shorts, .home-v2 .t-bridge { grid-column: span 2; grid-row: auto; }
  .home-v2 .hv-trust .container-xl { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575.98px) {
  .home-v2 .shorts-row { grid-template-columns: 1fr; }
  .home-v2 .phone { width: 84px; }
  .home-v2 .hv-marquee .lead { display: none; }
  .home-v2 .tile { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-v2 *, .home-v2 *::before, .home-v2 *::after { animation: none !important; transition: none !important; }
}