/* ============================================================
   권우상 변호사 — 광장(Lee&Ko)식 라이트 그레이 베이스
   공통 언어: flat · radius 0 · shadow none · 블루블랙 텍스트 + 포인트 1색(골드)
   본문 Pretendard / 히어로·포스트 제목 Noto Serif KR / 섹션 대형 숫자 마커
   ============================================================ */
:root {
  --bk: #121619;          /* 블루블랙 (광장 주 텍스트) */
  --navy: #182e4e;        /* 딥 네이비 (광장 body) */
  --navy-soft: #3d5276;
  --gold: #a98b4f;        /* 포인트 1색 */
  --gold-deep: #8f7338;
  --bg: #ffffff;
  --bg-gray: #f6f8fa;     /* 광장 카드 배경 */
  --bg-band: #eef1f5;
  --bg-foot: #f3f4f8;     /* 광장 푸터 */
  --line: #e2e7ed;
  --num: #d4dfec;         /* 대형 숫자 마커 (연 스틸블루) */
  --ink-soft: #51606f;
  --ink-mute: #8b97a3;
  --serif: "Noto Serif KR", "Nanum Myeongjo", serif;
  --sans: "Pretendard", -apple-system, sans-serif;
  --wrap: 1180px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--sans); color: var(--bk); background: var(--bg); line-height: 1.7; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* ── GNB (라이트) ── */
.gnb { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.gnb-in { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.gnb-logo { display: flex; align-items: baseline; gap: 10px; color: var(--bk); min-width: 0; }
.gnb-logo-kr { font-family: var(--serif); font-size: 23px; font-weight: 700; letter-spacing: 0.05em; color: var(--navy); white-space: nowrap; }
.gnb-logo-sub { font-size: 11.5px; color: var(--ink-mute); letter-spacing: 0.06em; white-space: nowrap; }
.gnb-menu { display: flex; align-items: center; gap: 30px; }
.gnb-menu a { color: var(--navy); font-size: 14.5px; font-weight: 500; letter-spacing: 0.01em; transition: color 0.2s; }
.gnb-menu a:hover { color: var(--gold-deep); }
.gnb-cta { border: 1px solid var(--gold); color: var(--gold-deep) !important; padding: 9px 18px; font-weight: 700; }
.gnb-cta:hover { background: var(--gold); color: #fff !important; }
.gnb-cta-m { display: none; }

/* ── 버튼 ── */
.btn { display: inline-block; padding: 13px 30px; font-size: 15px; font-weight: 600; letter-spacing: 0.02em; transition: all 0.2s; }
.btn-gold { background: var(--gold); color: #fff; }
.btn-gold:hover { background: var(--gold-deep); }
.btn-ghost { border: 1px solid rgba(255, 255, 255, 0.55); color: #fff; }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--bk); }
.btn-line { border: 1px solid var(--line); color: var(--ink-soft); }
.btn-line:hover { border-color: var(--navy); color: var(--navy); }

/* ── 섹션 헤더 (광장식 대형 숫자) ── */
.sec-head { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 40px; }
.sec-num { font-family: var(--serif); font-size: 92px; font-weight: 300; line-height: 0.82; color: var(--num); letter-spacing: -0.04em; user-select: none; }
.sec-head-tx { padding-top: 8px; }
.sec-label { font-size: 12px; letter-spacing: 0.3em; color: var(--gold-deep); font-weight: 700; margin-bottom: 10px; }
.sec-h2 { font-family: var(--sans); font-size: 31px; font-weight: 700; letter-spacing: -0.02em; color: var(--navy); line-height: 1.3; }
.sec-desc { color: var(--ink-soft); margin-top: 10px; max-width: 640px; }
.sec-more { text-align: center; margin-top: 44px; }

/* ── 히어로 (풀블리드 배경 영상 — 시안 A 시티 프레스티지, 2026-08) ── */
.hero { position: relative; height: min(88vh, 800px); min-height: 560px; color: #fff; overflow: hidden; background: var(--bk); }
.hero-media { position: absolute; inset: 0; }
.hero-media video { width: 100%; height: 100%; object-fit: cover; display: block; position: relative; z-index: 1; }
.hero-media .hero-poster { position: absolute; inset: 0; background: url('../images/hero/city-night-aerial-poster.jpg') center/cover no-repeat; }
.hero-shade { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(14, 24, 38, 0.55) 0%, rgba(14, 24, 38, 0.32) 45%, rgba(10, 16, 26, 0.72) 100%); }
.hero-in { position: relative; z-index: 3; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.hero-label { font-size: 12px; letter-spacing: 0.34em; color: rgba(255, 255, 255, 0.85); font-weight: 600; margin-bottom: 26px; }
.hero-rule { width: 0; height: 2px; background: var(--gold); margin-bottom: 26px; animation: rule 0.9s 0.35s ease-out forwards; }
@keyframes rule { to { width: 64px; } }
.hero-title { font-family: var(--serif); font-size: clamp(33px, 4.8vw, 54px); font-weight: 600; line-height: 1.34; letter-spacing: -0.005em; margin-bottom: 22px; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35); }
.hero-sub { font-size: 17px; color: rgba(255, 255, 255, 0.88); margin-bottom: 40px; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4); }
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.rv { opacity: 0; transform: translateY(22px); animation: rv 0.8s ease-out forwards; }
.rv-1 { animation-delay: 0.15s; } .rv-2 { animation-delay: 0.3s; } .rv-3 { animation-delay: 0.5s; } .rv-4 { animation-delay: 0.7s; }
@keyframes rv { to { opacity: 1; transform: none; } }
.hero-stats { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; border-top: 1px solid rgba(255, 255, 255, 0.18); background: rgba(10, 16, 26, 0.35); backdrop-filter: blur(6px); }
.hero-stats-in { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; display: flex; }
.hstat { flex: 1; padding: 18px 8px; display: flex; align-items: baseline; gap: 10px; justify-content: center; }
.hstat + .hstat { border-left: 1px solid rgba(255, 255, 255, 0.14); }
.hstat b { font-family: var(--serif); font-size: 26px; font-weight: 600; color: #fff; }
.hstat span { font-size: 12.5px; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.75); }
.hstat b em { font-style: normal; color: var(--gold); font-size: 15px; margin-left: 1px; }
@media (max-width: 680px) { .hstat b { font-size: 20px; } .hstat span { font-size: 11px; } }
.scroll-cue { position: absolute; z-index: 3; left: 50%; bottom: 74px; transform: translateX(-50%); width: 1px; height: 44px; overflow: hidden; }
.scroll-cue i { position: absolute; left: 0; top: -44px; width: 1px; height: 44px; background: linear-gradient(180deg, transparent, #fff); animation: cue 2s ease-in-out infinite; }
@keyframes cue { 60% { top: 44px; } 100% { top: 44px; } }
@media (prefers-reduced-motion: reduce) { .rv, .hero-rule { animation: none; opacity: 1; transform: none; width: 64px; } .scroll-cue { display: none; } }

/* ── 오늘의 사례 ── */
.today { padding: 96px 24px 30px; }
.today-card { display: block; background: var(--bg-gray); border: 1px solid var(--line); border-left: 3px solid var(--gold); padding: 38px 42px; transition: all 0.25s; }
.today-card:hover { background: #fff; border-color: var(--navy); border-left-color: var(--gold); }
.today-meta, .card-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.today-title { font-family: var(--serif); font-size: 26px; font-weight: 600; color: var(--navy); line-height: 1.45; margin-bottom: 12px; }
.today-desc { color: var(--ink-soft); margin-bottom: 18px; }
.today-more { color: var(--gold-deep); font-weight: 700; font-size: 14px; letter-spacing: 0.04em; }
.tag { font-size: 12px; font-weight: 700; color: var(--navy); background: #e8edf3; padding: 4px 10px; letter-spacing: 0.03em; }
.tag-win { color: #fff; background: var(--gold); }
time { font-size: 12.5px; color: var(--ink-mute); }

/* ── 카드 (광장 에디토리얼 그리드 — 썸네일형) ── */
.card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.card-grid-3 { grid-template-columns: repeat(3, 1fr); }
.card { background: #fff; border: 1px solid var(--line); transition: all 0.25s; display: flex; flex-direction: column; overflow: hidden; }
.card:hover { border-color: var(--navy); }
.card:hover .card-img img { transform: scale(1.05); }
.card-img { aspect-ratio: 16 / 9.6; overflow: hidden; background: var(--bg-gray); }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 4px; }
.card-title { font-family: var(--sans); font-size: 16.5px; font-weight: 650; color: var(--bk); line-height: 1.55; }
.card:hover .card-title { color: var(--navy); }

/* ── 승소 밴드 (라이트 그레이) ── */
.wins-band { background: var(--bg-band); padding: 96px 0; margin-top: 80px; }
.wins-band .card { border-color: transparent; }
.wins-band .card:hover { border-color: var(--navy); }

/* ── 업무분야 ── */
.fields { padding: 96px 24px 20px; }
.field-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.field-card { background: var(--bg-gray); border: 1px solid transparent; border-top: 3px solid var(--navy); padding: 32px 30px 28px; transition: all 0.25s; }
.field-card:hover { background: #fff; border-color: var(--line); border-top-color: var(--gold); }
.field-name { font-family: var(--sans); font-size: 20px; font-weight: 700; color: var(--navy); margin-bottom: 10px; }
.field-desc { font-size: 14px; color: var(--ink-soft); line-height: 1.65; margin-bottom: 16px; min-height: 70px; }
.field-count { font-size: 13.5px; font-weight: 700; color: var(--gold-deep); letter-spacing: 0.03em; }

/* ── 인사이트 ── */
.insights { background: #fff; padding: 96px 0 10px; }

/* ── 변호사 소개 ── */
.about { padding: 110px 0 96px; }
.about-in { display: grid; grid-template-columns: 380px 1fr; gap: 64px; align-items: center; }
.about-photo { position: relative; }
.about-photo img { width: 100%; filter: saturate(0.9); }
.about-photo::before { content: ""; position: absolute; top: 20px; left: -20px; right: 20px; bottom: -20px; background: var(--bg-band); z-index: -1; }
.about-lead { font-size: 17px; color: var(--ink-soft); margin-bottom: 22px; }
.about-creds { list-style: none; margin-bottom: 32px; }
.about-creds li { padding: 11px 0 11px 22px; border-bottom: 1px solid var(--line); position: relative; font-size: 15px; color: var(--bk); }
.about-creds li::before { content: ""; position: absolute; left: 0; top: 20px; width: 9px; height: 1.5px; background: var(--gold); }

/* ── 푸터 (광장식 라이트 그레이) ── */
.foot { background: var(--bg-foot); color: var(--ink-soft); padding: 64px 0 42px; margin-top: 60px; border-top: 1px solid var(--line); }
.foot-in { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.foot-brand { margin-bottom: 36px; }
.foot-name { font-family: var(--serif); font-size: 21px; color: var(--navy); font-weight: 700; }
.foot-sub { font-size: 13px; color: var(--ink-mute); letter-spacing: 0.08em; margin-top: 4px; }
.foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding: 32px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.foot-h { font-size: 12px; letter-spacing: 0.22em; color: var(--gold-deep); font-weight: 700; margin-bottom: 14px; }
.foot-col { display: flex; flex-direction: column; gap: 9px; font-size: 14px; }
.foot-col a:hover { color: var(--navy); }
.foot-legal { padding-top: 28px; font-size: 12.5px; color: var(--ink-mute); line-height: 1.8; }

/* ── 목록 페이지 (라이트 히어로) ── */
.list-hero { background: var(--bg-band); padding: 76px 0 58px; border-bottom: 1px solid var(--line); }
.list-title { font-family: var(--sans); font-size: 38px; font-weight: 700; letter-spacing: -0.02em; color: var(--navy); margin: 14px 0 12px; }
.list-desc { color: var(--ink-soft); max-width: 760px; }
.list-desc strong { color: var(--gold-deep); }
.list-body { padding: 56px 24px 70px; }
.crumb { font-size: 13px; color: var(--ink-mute); margin-bottom: 6px; }
.crumb a:hover { color: var(--gold-deep); }
.crumb-light { color: var(--ink-mute); }

/* ── 포스트 페이지 ── */
.post { max-width: 760px; margin: 0 auto; padding: 56px 24px 70px; }
.post-head { border-bottom: 1px solid var(--line); padding-bottom: 30px; margin-bottom: 38px; }
.post-tags { display: flex; align-items: center; gap: 10px; margin: 18px 0 16px; flex-wrap: wrap; }
.post-title { font-family: var(--serif); font-size: clamp(26px, 4vw, 36px); font-weight: 600; line-height: 1.42; color: var(--navy); letter-spacing: -0.01em; }
.post-byline { margin-top: 16px; font-size: 14px; color: var(--ink-mute); }
.post-body { font-size: 16.5px; line-height: 1.95; color: #2a3542; }
.post-body p { margin-bottom: 26px; }
.post-h2 { font-family: var(--serif); font-size: 23px; font-weight: 600; color: var(--navy); margin: 52px 0 20px; padding-left: 16px; border-left: 3px solid var(--gold); line-height: 1.5; }
.post-h3 { font-size: 18px; font-weight: 700; color: var(--navy); margin: 36px 0 16px; }
.post-hr { border: 0; border-top: 1px solid var(--line); margin: 40px auto; width: 120px; }
.p-rel { margin: 26px 0; }
.p-rel a { display: block; background: var(--bg-gray); border: 1px solid var(--line); border-left: 3px solid var(--gold); padding: 16px 20px; font-size: 15px; font-weight: 600; color: var(--navy); transition: all 0.2s; }
.p-rel a:hover { background: #fff; border-color: var(--navy); border-left-color: var(--gold); }
.post-img { margin: 30px 0; }
.post-img img { width: 100%; }
.post-disclaimer { margin-top: 48px; padding: 18px 22px; background: var(--bg-gray); border-left: 3px solid var(--line); font-size: 13.5px; color: var(--ink-mute); line-height: 1.75; }
.post-cta { margin-top: 32px; background: var(--navy); color: #fff; padding: 42px 36px; text-align: center; }
.post-cta-t { font-family: var(--serif); font-size: 23px; font-weight: 600; margin-bottom: 10px; }
.post-cta-d { color: rgba(255, 255, 255, 0.75); margin-bottom: 24px; font-size: 15px; }
.post-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.post-cta .btn-line { border-color: rgba(255, 255, 255, 0.4); color: rgba(255, 255, 255, 0.9); }
.post-rel { margin-top: 60px; }
.post-rel .sec-h2 { font-size: 23px; margin-bottom: 24px; }
.post-rel .card-grid { grid-template-columns: repeat(2, 1fr); }
.post-src { margin-top: 36px; font-size: 13px; color: var(--ink-mute); }
.post-src a { text-decoration: underline; }

/* ── 반응형 ── */
@media (max-width: 920px) {
  .gnb-menu { display: none; }
  .gnb-cta-m { display: inline-block; border: 1px solid var(--gold); color: var(--gold-deep); padding: 7px 14px; font-size: 13.5px; font-weight: 700; white-space: nowrap; }
  .gnb-logo-sub { display: none; }
  .card-grid, .card-grid-3, .field-grid, .post-rel .card-grid { grid-template-columns: 1fr 1fr; }
  .about-in { grid-template-columns: 1fr; gap: 44px; }
  .about-photo { max-width: 340px; }
  .foot-cols { grid-template-columns: 1fr; }
  .sec-num { font-size: 68px; }
}
@media (max-width: 600px) {
  .hero { height: 78vh; }
  .card-grid, .card-grid-3, .field-grid, .post-rel .card-grid { grid-template-columns: 1fr; }
  .today-card { padding: 28px 24px; }
  .sec-h2 { font-size: 25px; }
  .sec-num { font-size: 52px; }
  .sec-head { gap: 14px; margin-bottom: 30px; }
  .field-desc { min-height: 0; }
}