/* HOME v7 (2026-10-05) — 디자인 명세: ChatGPT(포스텔러 벤치마크) · 적용: Claude
   원칙: "무엇을 볼까?"보다 "지금 무엇이 궁금한가?"부터. 화이트 + 남색 + 금색, 분야색은 태그·아이콘에만. */
.hv7{--bg:#F7F8FC;--surface:#FFFFFF;--t1:#18213F;--t2:#5D6478;--line:#E3E6EF;--navy:#1F2A55;--navy-p:#151D3D;--gold:#F0D080;--gold-soft:#FFF7DE;--focus:#3158D8;
  --love:#9A2857;--love-bg:#FFF0F5;--money:#765900;--money-bg:#FFF7D7;--job:#285493;--job-bg:#EEF5FF;--exam:#62439A;--exam-bg:#F5F0FF;--health:#24614A;--health-bg:#EDF8F2;--pick:#8B3D28;--pick-bg:#FFF3ED;
  background:var(--bg);color:var(--t1);font-family:'Noto Sans KR',system-ui,sans-serif;letter-spacing:-0.01em;word-break:keep-all;overflow-wrap:break-word;padding-bottom:8px}
.hv7 *{box-sizing:border-box}
.hv7 a{text-decoration:none;color:inherit}
.hv7 a:focus-visible,.hv7 button:focus-visible{outline:3px solid rgba(49,88,216,.28);outline-offset:2px}
.hv7-wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 20px}
.hv7-sec{margin-top:48px}
.hv7-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:16px}
.hv7-head h2{margin:0;font-size:21px;line-height:30px;font-weight:700;letter-spacing:-0.025em;color:var(--t1)}
.hv7-head p{margin:4px 0 0;font-size:14px;line-height:21px;color:var(--t2)}
.hv7-more{flex:0 0 auto;font-size:13px;font-weight:500;color:var(--t2);padding:10px 0}

/* 1. 지금 가장 궁금한 게 뭐예요? */
.hv7-ask{padding-top:28px}
.hv7-eyebrow{margin:0 0 6px;font-size:13px;font-weight:700;color:var(--job)}
.hv7-ask h1{margin:0;font-size:28px;line-height:38px;font-weight:700;letter-spacing:-0.025em;color:var(--t1)}
.hv7-ask .hv7-sub{margin:6px 0 0;font-size:15px;line-height:23px;color:var(--t2)}
.hv7-picks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px;padding:0;list-style:none}
.hv7-pick{display:flex;align-items:center;gap:12px;height:72px;padding:14px;border-radius:18px;background:var(--surface);border:1px solid var(--line);box-shadow:0 2px 8px rgba(31,42,85,.04);font-size:15px;font-weight:700;color:var(--t1);transition:transform .1s ease,background .1s ease}
.hv7-pick:active{background:#F4F6FA;border-color:#CCD2E0;transform:scale(.98)}
.hv7-ico{flex:0 0 40px;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.hv7-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.c-love{color:var(--love);background:var(--love-bg)}.c-money{color:var(--money);background:var(--money-bg)}.c-job{color:var(--job);background:var(--job-bg)}
.c-exam{color:var(--exam);background:var(--exam-bg)}.c-health{color:var(--health);background:var(--health-bg)}.c-pick{color:var(--pick);background:var(--pick-bg)}

/* 2. 상황 칩 */
.hv7-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:22px -20px 0;padding:3px 20px;list-style:none}
.hv7-chips::-webkit-scrollbar{display:none}
.hv7-chip{flex:0 0 auto;display:flex;align-items:center;min-height:44px;padding:0 15px;border-radius:999px;background:var(--surface);border:1px solid #DDE1EB;color:#4E566C;font-size:14px;font-weight:500;white-space:nowrap}
.hv7-chip:active{background:#F1F3F8}
.hv7-chip.on{background:var(--navy);border-color:var(--navy);color:#FFFFFF;font-weight:700}

/* 3. NEW 히어로 */
.hv7-hero{display:grid;grid-template-columns:minmax(0,1fr) 128px;align-items:end;gap:8px;margin-top:22px;min-height:220px;padding:22px;border-radius:24px;background:var(--navy);color:#FFFFFF;box-shadow:0 12px 32px rgba(31,42,85,.14);overflow:hidden;position:relative}
.hv7-badge{display:inline-block;padding:4px 10px;border-radius:8px;background:var(--gold);color:var(--t1);font-size:12px;font-weight:700}
.hv7-hero h2{margin:12px 0 8px;font-size:22px;line-height:31px;font-weight:700;letter-spacing:-0.025em;color:#FFFFFF}
.hv7-hero p{margin:0 0 16px;font-size:14px;line-height:22px;color:#D9DDEC}
.hv7-hero .hv7-btn-gold{display:inline-flex;align-items:center;height:46px;padding:0 18px;border-radius:14px;background:var(--gold);color:var(--t1);font-size:15px;font-weight:700}
.hv7-hero .hv7-btn-gold:active{transform:scale(.98)}
.hv7-hero img{width:150px;height:auto;margin:0 -22px -26px 0;justify-self:end;border-radius:18px}

/* 4. 무료 카드 */
.hv7-free{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;margin:0 -20px;padding:4px 20px 8px;list-style:none;scroll-snap-type:x mandatory}
.hv7-free::-webkit-scrollbar{display:none}
.hv7-free li{flex:0 0 76vw;max-width:286px;scroll-snap-align:start}
.hv7-fcard{display:flex;flex-direction:column;height:100%;min-height:260px;padding:18px;border-radius:22px;background:var(--surface);border:1px solid #ECEEF4;box-shadow:0 4px 16px rgba(31,42,85,.055);transition:transform .1s ease}
.hv7-fcard:active{background:#F9FAFC;transform:scale(.985)}
.hv7-fcard img{width:100%;height:140px;object-fit:cover;border-radius:14px;background:var(--bg)}
.hv7-fcard strong{display:block;margin-top:14px;font-size:17px;line-height:25px;font-weight:700}
.hv7-fcard span.d{display:block;margin-top:4px;font-size:14px;line-height:21px;color:var(--t2)}
.hv7-meta{display:inline-block;margin-top:auto;padding-top:12px;font-size:13px;font-weight:700;color:var(--health)}

/* 5. 질문형 피드 */
.hv7-feed{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding:0;list-style:none}
.hv7-qcard{display:flex;align-items:center;gap:12px;min-height:124px;padding:18px;border-radius:20px;background:var(--surface);border:1px solid #ECEEF4;box-shadow:0 4px 16px rgba(31,42,85,.055);transition:transform .1s ease}
.hv7-qcard:active{background:#F9FAFC;transform:scale(.985)}
.hv7-qcard .b{flex:1 1 auto;min-width:0}
.hv7-tag{display:inline-block;padding:3px 9px;border-radius:8px;font-size:12px;font-weight:700}
.hv7-qcard strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:8px;font-size:17px;line-height:25px;font-weight:700}
.hv7-qcard .go{display:block;margin-top:6px;font-size:13px;font-weight:500;color:var(--t2)}
.hv7-qcard img{flex:0 0 88px;width:88px;height:88px;object-fit:cover;border-radius:16px;background:var(--bg)}

/* 6. 모든 운세 */
.hv7-all{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0;list-style:none}
.hv7-all a{display:flex;flex-direction:column;justify-content:center;min-height:64px;padding:12px 14px;border-radius:14px;background:var(--surface);border:1px solid #ECEEF4}
.hv7-all a b{font-size:15px;font-weight:700}
.hv7-all a span{font-size:12px;line-height:18px;color:var(--t2);margin-top:2px}
.hv7-all a:active{background:#F4F6FA}

/* 7. AI 후속 질문 */
.hv7-ai{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding:24px 20px;border-radius:24px;background:var(--gold-soft)}
.hv7-ai .hv7-badge{background:var(--navy);color:var(--gold)}
.hv7-ai h2{margin:10px 0 6px;font-size:21px;line-height:30px;font-weight:700;letter-spacing:-0.025em}
.hv7-ai p{margin:0;font-size:14px;line-height:22px;color:var(--t2)}
.hv7-bubbles{display:flex;flex-direction:column;gap:8px}
.hv7-bubbles span{align-self:flex-start;max-width:92%;padding:10px 14px;border-radius:16px 16px 16px 4px;background:var(--surface);border:1px solid #F0E3B5;font-size:14px;line-height:21px;color:var(--t1)}
.hv7-btn{display:flex;align-items:center;justify-content:center;height:52px;border-radius:16px;background:var(--navy);color:#FFFFFF !important;font-size:15px;font-weight:700;transition:transform .1s ease}
.hv7-btn:active{background:var(--navy-p);transform:scale(.98)}
.hv7-note{margin:28px 0 0;font-size:12px;line-height:18px;color:var(--t2);text-align:center}

html[lang="ja"] .hv7{word-break:normal;line-break:strict;font-family:'Noto Sans JP','Hiragino Sans','Noto Sans KR',system-ui,sans-serif}
/* 블로그 섹션(기존 hv5 마크업) 배경 맞춤 */
.hv7 .hv5-blog{background:transparent}

@media (hover:hover){
  .hv7-pick:hover,.hv7-fcard:hover,.hv7-qcard:hover{transform:translateY(-2px)}
  .hv7-chip:hover{border-color:#B8BFD1}
}
@media (min-width:768px){
  .hv7-wrap{padding:0 32px}
  .hv7-sec{margin-top:72px}
  .hv7-head h2{font-size:24px;line-height:34px}
  .hv7-ask{padding-top:44px}
  .hv7-ask h1{font-size:34px;line-height:46px}
  .hv7-ask .hv7-sub{font-size:16px}
  .hv7-picks{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
  .hv7-pick{height:94px;flex-direction:column;justify-content:center;gap:8px;border-radius:20px;text-align:center}
  .hv7-chips{flex-wrap:wrap;overflow:visible;margin:24px 0 0;padding:0}
  .hv7-hero{grid-template-columns:55fr 45fr;min-height:290px;padding:36px 40px;align-items:center}
  .hv7-hero h2{font-size:30px;line-height:42px}
  .hv7-hero p{font-size:16px;line-height:25px}
  .hv7-hero img{width:280px;margin:0 0 -40px;justify-self:center}
  .hv7-free{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;margin:0;padding:0}
  .hv7-free li{max-width:none}
  .hv7-feed{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hv7-qcard{min-height:168px}
  .hv7-qcard strong{font-size:18px;line-height:27px}
  .hv7-all{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hv7-ai{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center;padding:36px}
}

/* 가격 배지 (2026-10-05) */
.hv7-price{display:inline-block;margin-top:8px;padding:3px 9px;border-radius:8px;background:#FFF7DE;color:#765900;font-size:12px;line-height:18px;font-weight:700}
.hv7-price:empty{display:none}
.hv7-price.is-free{background:#EDF8F2;color:#24614A}
.hv7-all a .hv7-price{align-self:flex-start;margin-top:6px}
.hv7-meta.hv7-price-meta{color:#24614A}

/* 히어로 v2 (2026-10-05) — 모바일: 글 전체 폭 + 아래 줄에 버튼·마스코트 / PC: 좌 글·버튼, 우 마스코트 */
.hv7 .hv7-hero{display:flex;flex-direction:column;grid-template-columns:none;min-height:0;padding:22px 20px 20px;gap:0}
.hv7 .hv7-hero-t{min-width:0}
.hv7 .hv7-hero .hv7-badge{white-space:nowrap}
.hv7 .hv7-hero h2{font-size:23px;line-height:32px;word-break:keep-all}
.hv7 .hv7-hero p{margin:0 0 4px;max-width:30em}
.hv7 .hv7-hero-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:14px}
.hv7 .hv7-hero .hv7-btn-gold{white-space:nowrap;height:auto;min-height:48px;padding:12px 18px;line-height:1.2;flex:0 1 auto}
.hv7 .hv7-hero img{flex:0 0 auto;width:104px;height:104px;object-fit:cover;margin:0 -6px -6px 0;border-radius:16px;justify-self:auto}
@media (min-width:768px){
  .hv7 .hv7-hero{display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);grid-template-areas:"t img" "btn img";align-items:center;padding:36px 40px;min-height:290px;column-gap:24px}
  .hv7 .hv7-hero-t{grid-area:t;align-self:end}
  .hv7 .hv7-hero-row{display:contents}
  .hv7 .hv7-hero .hv7-btn-gold{grid-area:btn;justify-self:start;align-self:start;margin-top:18px}
  .hv7 .hv7-hero img{grid-area:img;width:260px;height:260px;margin:0;justify-self:center}
  .hv7 .hv7-hero h2{font-size:30px;line-height:42px}
}
/* 좁은 화면·큰 글꼴 기기(2026-10-05 실기기 확인): 고민 버튼 글자 한 줄 유지 */
@media (max-width:400px){
  .hv7 .hv7-pick{gap:8px;padding:12px 10px;font-size:14px;letter-spacing:-0.03em;white-space:nowrap}
  .hv7 .hv7-ico{flex:0 0 32px;width:32px;height:32px;border-radius:10px}
  .hv7 .hv7-ico svg{width:18px;height:18px}
  .hv7 .hv7-ask h1{font-size:25px;line-height:34px}
}

/* 사주로 보는 세상(블로그) v2 (2026-10-05) — 큰 빈 커버 → 질문형 카드와 같은 가로형 카드 + 부자돼지 일러스트 */
.hv7 .hv5-blog{padding:0;margin-top:48px;background:transparent}
.hv7 .hv5-blog .hv5-container{width:100%;max-width:1180px;margin:0 auto;padding:0 20px;box-sizing:border-box}
.hv7 .hv5-blog .hv5-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:0 0 16px}
.hv7 .hv5-blog .hv5-section-heading h2{margin:0;font-size:21px;line-height:30px;font-weight:700;letter-spacing:-0.025em;color:#18213F}
.hv7 .hv5-blog .hv5-section-heading p{margin:4px 0 0;font-size:14px;line-height:21px;color:#5D6478}
.hv7 .hv5-blog .hv5-text-link{flex:0 0 auto;font-size:13px;font-weight:500;color:#5D6478;padding:10px 0;white-space:nowrap}
.hv7 .hv5-blog .hv5-blog-grid{display:grid !important;grid-template-columns:minmax(0,1fr) !important;gap:12px !important}
.hv7 .hv5-blog .hv5-post{display:flex !important;flex-direction:row-reverse;align-items:center;gap:14px;min-height:0;padding:16px !important;border-radius:20px !important;background:#FFFFFF !important;border:1px solid #ECEEF4 !important;box-shadow:0 4px 16px rgba(31,42,85,.055) !important;overflow:hidden;text-decoration:none;color:#18213F;transition:transform .1s ease}
.hv7 .hv5-blog .hv5-post:active{background:#F9FAFC !important;transform:scale(.985)}
.hv7 .hv5-blog .hv5-post > img,.hv7 .hv5-blog .hv5-post-cover{flex:0 0 92px !important;width:92px !important;height:92px !important;aspect-ratio:auto !important;margin:0 !important;border-radius:16px !important;object-fit:cover;overflow:hidden;display:block;padding:0 !important}
.hv7 .hv5-blog .hv5-post-cover img{width:100% !important;height:100% !important;object-fit:cover;border-radius:0;box-shadow:none;margin:0;display:block}
.hv7 .hv5-blog .hv5-post-b{flex:1 1 auto;min-width:0;padding:0 !important;display:flex;flex-direction:column;gap:4px}
.hv7 .hv5-blog .hv5-post-cat{align-self:flex-start;display:inline-block;padding:3px 9px;border-radius:8px;background:#EEF5FF;color:#285493;font-size:12px;font-weight:700;line-height:18px}
.hv7 .hv5-blog .hv5-post-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:4px;font-size:16px;line-height:23px;font-weight:700;color:#18213F}
.hv7 .hv5-blog .hv5-post-d{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;line-height:19px;color:#5D6478}
.hv7 .hv5-blog .hv5-post-m{font-size:12px;color:#7A8095}
@media (hover:hover){.hv7 .hv5-blog .hv5-post:hover{transform:translateY(-2px)}}
@media (min-width:768px){
  .hv7 .hv5-blog{margin-top:72px}
  .hv7 .hv5-blog .hv5-container{padding:0 32px}
  .hv7 .hv5-blog .hv5-section-heading h2{font-size:24px;line-height:34px}
  .hv7 .hv5-blog .hv5-blog-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:16px !important}
  .hv7 .hv5-blog .hv5-post{min-height:148px}
  .hv7 .hv5-blog .hv5-post > img,.hv7 .hv5-blog .hv5-post-cover{flex-basis:112px !important;width:112px !important;height:112px !important}
}

/* 모든 운세 v2 (2026-10-05) — 들쭉날쭉한 2열 카드 → 아이콘 + 이름·설명 한 줄 + 오른쪽 작은 배지의 목록형 */
.hv7 .hv7-all{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.hv7 .hv7-all a.hv7-row{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;min-height:68px;padding:12px 14px;border-radius:16px;background:#FFFFFF;border:1px solid #ECEEF4}
.hv7 .hv7-all a.hv7-row:active{background:#F4F6FA;transform:scale(.99)}
.hv7 .hv7-row-ic{flex:0 0 40px;width:40px;height:40px}
.hv7 .hv7-row-b{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.hv7 .hv7-all a.hv7-row b{font-size:15px;line-height:21px;font-weight:700;color:#18213F;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hv7 .hv7-all a.hv7-row .hv7-row-b span{margin:0;font-size:13px;line-height:18px;color:#5D6478;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hv7 .hv7-all a.hv7-row .hv7-row-price{flex:0 0 auto;align-self:center;margin:0;padding:3px 8px;font-size:11.5px;line-height:17px;white-space:nowrap}
@media (min-width:768px){.hv7 .hv7-all{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
@media (min-width:1024px){.hv7 .hv7-all{grid-template-columns:repeat(3,minmax(0,1fr))}}