/* 홈페이지 전용 보강 — theme.css(시안 B 승격) 위에 얹는다.
   여기 있는 것은 시안에 없던 "실제로 돌아가는 부분"의 스타일이다:
   두 블로그 글 피드(채널 구분·썸네일·상태 표시), 고정 상담 바, 실제 약도. */

/* ── 블로그 글 피드 ──
   ★임 대표 지시(2026-08-10): 썸네일 위에 아무것도 얹지 않는다. 글의 대표 카드가 온전히 보여야 한다.
     태그는 썸네일 아래, 제목 위에 왼쪽 정렬로 둔다. 어느 블로그인지 표기는 넣지 않는다. */
.post{position:relative;}
.post .thumb{aspect-ratio:1200/630;height:auto;background:var(--bg-2) center/cover no-repeat;padding:0;display:block;
  -webkit-print-color-adjust:exact;print-color-adjust:exact;}  /* 인쇄·PDF 렌더에서도 대표 카드가 나오게 */
.post .thumb.none{aspect-ratio:1200/360;background:var(--dark);}

/* 태그 — 썸네일과 제목 사이, 왼쪽 끝에 */
.post .tags{display:flex;flex-wrap:wrap;gap:.3rem;margin:0 0 .5rem;}
.post .tag{font-size:.72rem;font-weight:800;letter-spacing:-.015em;color:var(--accent);
  background:var(--accent-tint);border-radius:6px;padding:.2rem .5rem;}
:root[data-theme="dark"] .post .tag{color:var(--accent-2);}
.post .body h4{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.post .ex{font-size:.84rem;color:var(--ink-3);line-height:1.6;margin:0 0 .8rem;font-weight:400;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.post .meta{display:flex;align-items:center;justify-content:space-between;gap:.5rem;}
.post .meta .go{font-weight:800;color:var(--accent-2);}
.feed-state{border:1px dashed var(--line-2);border-radius:12px;padding:1.6rem;text-align:center;
  color:var(--ink-3);font-size:.9rem;font-weight:500;}

/* 채널별로 몇 편인지 — 피드 위에 얹는 작은 줄 */
.feed-head{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:0 0 1.1rem;}
.feed-head .n{font-size:.8rem;font-weight:700;color:var(--ink-3);}
.feed-head a.src{font-size:.78rem;font-weight:800;color:var(--accent-2);border:1px solid var(--line-2);
  border-radius:999px;padding:.3rem .7rem;}
.feed-head a.src:hover{border-color:var(--accent-2);}

/* ── 실제 약도 ── */
.mapbox.real{background:var(--dark);padding:0;min-height:0;overflow:hidden;}
.mapbox.real img{display:block;width:100%;height:100%;object-fit:cover;}
.mapbox.real::before{display:none;}
.map-links{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem;}

/* ── 변호사 사진 ──
   ★임 대표 지시(2026-08-11): 세로 비율로 쓴다. 좁은 화면에서 가로 박스(16/8)로 눕히면
   얼굴만 남고 좌우 여백이 크게 벌어져 어색하다. 원본이 800×982(4:5)이므로 어느 화면에서든 4/5를 유지하고,
   모바일에서는 폭만 제한해 인물 사진처럼 보이게 한다. */
.portrait.photo{background:var(--bg-2);aspect-ratio:4/5;}
.portrait.photo img{width:100%;height:100%;object-fit:cover;object-position:center 22%;}
@media(max-width:640px){
  .portrait.photo{aspect-ratio:4/5;width:min(72%,17rem);margin:0 auto;}
}

/* ── 히어로·상담 밴드 버튼 정렬 ──
   ★임 대표 지시(2026-08-11): 전화 상담과 법률정보 보기 버튼의 크기·정렬이 어긋나 보인다.
   원인은 좁은 화면에서 .cta-row 가 줄바꿈되며 버튼이 각자 글자 길이만큼만 넓어지는 것이다.
   → 모바일에서는 세로로 쌓되 폭을 100%로 맞추고, 글자는 가운데 정렬해 높이까지 같게 만든다.
   ★추가 지시(같은 날): 버튼 크기 자체를 서로 같게 만든다. flex 로 두면 글자 길이가 곧 버튼 폭이라
   「전화 상담 051-507-1258」만 길어지고 나머지가 짧아진다 → 격자로 바꿔 칸을 균등 분할한다. */
.cta-row .btn{justify-content:center;text-align:center;min-height:3.2rem;white-space:nowrap;}
.hero .cta-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;max-width:34rem;}
/* 밴드는 칸이 3개다. 전화번호가 들어간 버튼이 한 줄로 떨어지도록 폭을 넉넉히 준다
   (좁게 두면 「전화 상담 051-507-1258」만 두 줄이 되어 버튼 높이가 저 혼자 커진다). */
.ctaband .cta-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;
  max-width:54rem;margin-left:auto;margin-right:auto;}
@media(max-width:900px) and (min-width:641px){
  .ctaband .cta-row .btn{padding-left:1rem;padding-right:1rem;font-size:.92rem;}
}
@media(max-width:640px){
  .hero .cta-row,.ctaband .cta-row{grid-template-columns:1fr;gap:.6rem;}
}

/* 분야 바(.areabar)는 임 대표 지시(2026-08-11)로 화면에서 뺐다 — 스타일도 함께 지웠다.
   다루는 분야는 「사무소가 다루는 분야」 카드 8장이 담당한다. */

/* ── 히어로 배경 슬라이드 (임 대표 지시 2026-08-12: 사진 3장이 2초마다 롤링) ──
   ★가장 신경 쓴 것은 글자와 사진이 겹쳐 보이지 않게 하는 것이다.
     ①사진은 오른쪽에 붙여 깔고(`center right`) ②왼쪽에서 오른쪽으로 흐려지는 덮개를 얹고
     ③헤드라인 폭 자체를 제한해 사진 영역으로 넘어가지 않게 한다. 세 겹을 다 써야 어느 사진에서도 안전하다.
   모바일은 가로 폭이 없어 같은 방법이 안 통한다 → 세로 방향 덮개로 바꾸고 사진을 더 눌러 배경처럼만 남긴다. */
.hero.has-slides{position:relative;isolation:isolate;overflow:hidden;}
/* ★사진을 화면 전체에 깔고 덮개로 가리는 방식은 실패했다 — 큰 헤드라인이 어차피 인물 위로 올라탄다.
   그래서 넓은 화면에서는 사진이 차지하는 자리를 오른쪽 절반으로 아예 잘라낸다. 글자와 사진이 물리적으로 안 만난다.
   왼쪽 경계는 마스크로 부드럽게 풀어 잘린 티가 나지 않게 한다. */
/* ★사진이 시작하는 자리를 아래 섹션들의 격자에 맞춘다(임 대표 지적 2026-08-12).
   본문 카드는 `.wrap` 안에서 2열(간격 1.3rem)로 놓인다. 그 오른쪽 열이 시작하는 x 좌표는
   화면 중앙 + 간격의 절반이다(= 50% + .65rem). 사진 왼쪽 모서리를 그 선에 맞추면
   스크롤을 내렸을 때 아래 카드의 오른쪽 열과 세로로 딱 떨어진다.
   오른쪽은 화면 끝까지 흘려보낸다 — 배경 사진은 가장자리에서 끊기지 않는 편이 자연스럽다. */
.hero-slides{position:absolute;top:0;right:0;bottom:0;left:calc(50% + .65rem);z-index:0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 14%,#000 100%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 14%,#000 100%);}
.hero-slides .slide{position:absolute;inset:0;background-position:center center;background-size:cover;
  background-repeat:no-repeat;opacity:0;transition:opacity .9s ease-in-out;}
.hero-slides .slide.on{opacity:1;}
.hero.has-slides .wrap{position:relative;z-index:1;}
/* 헤드라인·설명이 사진 자리로 넘어가지 않게 폭을 묶는다 */
/* 왼쪽 절반만 쓰게 됐으니 글자 크기도 그 폭에 맞춘다.
   원래 값(최대 6rem)을 그대로 두면 「달라집 / 니다.」처럼 낱말이 끊겨 읽는 맛이 사라진다. */
.hero.has-slides h1{max-width:none;font-size:clamp(2.3rem,4.6vw,4.1rem);}
.hero.has-slides .dek{max-width:26rem;}
.hero.has-slides .cta-row{max-width:30rem;}
.hero.has-slides .stats{background:color-mix(in srgb,var(--bg) 76%,transparent);border-radius:12px;
  padding:1.1rem 1rem 1rem;margin-top:2.2rem;}
@media(max-width:900px){
  /* ★모바일은 사진을 히어로 배경으로 되돌린다(임 대표 지시 2026-08-12).
     사진을 아래 띠로 내렸더니 글과 사진이 따로 놀았다 → 사진 위에 남색 막을 덮고 글자를 흰색으로 올려
     둘이 한 덩어리로 읽히게 한다. 글자 크기는 그만큼 줄인다.
     사진도 모바일 전용 세로 컷으로 바꿔 끼운다 — 가로 컷을 세로 화면에 cover 로 깔면 좌우가 크게 잘린다.
     세로 컷은 피사체가 오른쪽에 있고 왼쪽이 비어 있어 글자 자리와 겹치지 않는다. */
  .hero-slides{left:0;top:0;bottom:0;height:auto;min-height:0;max-height:none;
    -webkit-mask-image:none;mask-image:none;}
  /* 세로 컷은 피사체가 오른쪽에 있다. 화면이 사진보다 좁으면 좌우가 잘리는데,
     가운데 기준으로 자르면 오른쪽 인물이 먼저 잘려 나간다 → 오른쪽을 기준으로 붙인다. */
  .hero-slides .slide{background-position:right 32%;}
  .hero-slides .slide.v1{background-image:url('/media/hero-m01-corridor.jpg') !important;}
  .hero-slides .slide.v2{background-image:url('/media/hero-m02-desk.jpg') !important;}
  .hero-slides .slide.v3{background-image:url('/media/hero-m03-documents.jpg') !important;}
  .hero-slides::after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(11,17,32,.88) 0%,rgba(11,17,32,.7) 42%,rgba(11,17,32,.92) 100%);}
  .hero.has-slides{padding-bottom:3.4rem;}
  .hero.has-slides h1{font-size:1.86rem;color:#fff;max-width:none;}
  .hero.has-slides h1 .accent{color:#8fb4ff;}
  .hero.has-slides .kicker{color:#b9c9e8;}
  .hero.has-slides .dek{font-size:.94rem;color:#dbe4f5;max-width:none;}
  .hero.has-slides .dek b{color:#fff !important;}
  .hero.has-slides .cta-row{max-width:none;}
  .hero.has-slides .btn.solid{background:#fff;color:#0b1120;}
  .hero.has-slides .btn.line{border-color:rgba(255,255,255,.55);color:#fff;}
  .hero.has-slides .stats{background:none;padding:0;margin-top:1.8rem;
    border-top-color:rgba(255,255,255,.22);}
  .hero.has-slides .hstat .n{color:#fff;}
  .hero.has-slides .hstat .n .u{color:#8fb4ff;}
  .hero.has-slides .hstat .l{color:#c3cee2;}
}
@media(prefers-reduced-motion:reduce){
  .hero-slides .slide{transition:none;}
}

/* 히어로 지표 — 전문분야 칸을 빼고 3칸(도보 5분 · 1:1 · 10분).
   ★임 대표 지시(2026-08-11): 좁은 화면에서도 **두 줄로 접지 말고 한 줄**로 세운다.
   theme.css 는 560px 이하에서 2열로 접게 돼 있어 여기서 되돌린다(같은 특이성이면 나중에 읽히는 이 파일이 이긴다).
   대신 폭이 좁아지는 만큼 숫자·설명 글자와 간격을 함께 줄여 세 칸이 안 넘치게 한다. */
   🧨 격자 칸은 기본이 `min-width:auto` 라 긴 낱말이 칸을 밀어내고 줄 전체가 화면 밖으로 넘친다.
      칸마다 `min-width:0` 을 줘야 1fr 이 실제로 지켜진다 — 이게 세 번째 칸이 잘려 보이던 진짜 원인이다. */
.hero .stats{grid-template-columns:repeat(3,1fr);gap:1.6rem;width:100%;}
.hero .hstat{min-width:0;}
.hero .hstat .l{overflow-wrap:anywhere;}
@media(max-width:700px){
  .hero .stats{grid-template-columns:repeat(3,1fr);gap:.8rem;}
  .hstat .n{font-size:1.5rem;}
  .hstat .l{font-size:.7rem;line-height:1.45;margin-top:.35rem;word-break:keep-all;}
}
@media(max-width:380px){
  .hstat .n{font-size:1.3rem;}
  .hstat .l{font-size:.66rem;}
}

/* 상담 절차 3단 — 「미리 적어 보내면 짧은 상담도 알차다」를 눈에 보이게 */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;}
@media(max-width:820px){.steps{grid-template-columns:1fr;}}
.step{border:1px solid var(--line);border-radius:14px;padding:1.7rem;background:var(--card);box-shadow:var(--shadow);}
.step .sn{font-weight:900;font-size:.9rem;letter-spacing:.06em;color:var(--accent-2);}
.step h4{font-size:1.12rem;margin:.4rem 0 .6rem;letter-spacing:-.02em;}
.step p{margin:0;font-size:.93rem;line-height:1.75;color:var(--ink-2);font-weight:400;}

/* 전문분야 등록 분야(형사·부동산) 카드만 살짝 도드라지게 + 등록일 표기 */
.field.key{border-color:var(--accent-2);}
.field .regmark{margin-top:1rem;padding-top:.7rem;border-top:1px dashed var(--line-2);
  font-size:.76rem;font-weight:700;color:var(--accent-2);}

/* ── 분야 안내 아래 고지 문단 ──
   임 대표 지시(2026-08-11)로 네 문단으로 끊었다. 문단 사이 간격을 줘야 끊은 효과가 난다. */
.fineprint p{margin:0 0 .6rem;}
.fineprint p:last-child{margin-bottom:0;}

/* ── 화면 아래 고정 상담 바 (모바일에서 항상 손에 닿는 자리) ── */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;gap:.5rem;
  padding:.5rem .7rem calc(.5rem + env(safe-area-inset-bottom,0px));
  background:color-mix(in srgb,var(--bg) 92%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);}
.callbar a{flex:1;text-align:center;font-weight:800;font-size:.92rem;padding:.75rem .5rem;border-radius:9px;
  letter-spacing:-.015em;border:1.5px solid transparent;}
.callbar a.tel{background:var(--ink);color:var(--bg);}
:root[data-theme="dark"] .callbar a.tel{background:var(--accent-2);color:#0a0e15;}
.callbar a.sms{border-color:var(--line-2);color:var(--ink);}
@media(max-width:860px){
  .callbar{display:flex;}
  body{padding-bottom:4.2rem;}
}
@media print{.callbar{display:none;}}

/* 변호사 주요 경력 — 두 칸으로 접어 길이를 줄인다(모바일은 한 칸) */
.career{margin-top:1.5rem;padding-top:1.3rem;border-top:1px solid var(--line);}
.career-t{font-size:.78rem;font-weight:800;letter-spacing:.06em;color:var(--ink-3);
  text-transform:uppercase;margin-bottom:.7rem;}
.career ul{margin:0;padding:0;list-style:none;columns:2;column-gap:1.6rem;}
.career li{font-size:.87rem;line-height:1.75;color:var(--ink-2);margin-bottom:.3rem;
  break-inside:avoid;padding-left:.75rem;position:relative;}
.career li::before{content:"";position:absolute;left:0;top:.62em;width:3px;height:3px;
  border-radius:50%;background:var(--ink-4);}
@media (max-width:720px){ .career ul{columns:1;} }