/* 변호사 윤재성 법률사무소 등기 복대리 — 시안 2(사진 가득형) 확정 디자인
   모서리 규칙: 전부 각지게(0). 강조색은 파랑 하나, 바닥 영역은 네이비. */
:root{
  --blue:#1f4fd8; --blue-dark:#173ea8; --navy:#0e1c3a;
  --ink:#121826; --sub:#4b5565; --soft:#f3f5f8; --line:#dfe4eb; --bg:#fdfdfd;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Pretendard,system-ui,sans-serif;color:var(--ink);background:var(--bg);word-break:keep-all;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%}
h1,h2{text-wrap:balance}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.ic{width:1em;height:1em;flex-shrink:0;display:inline-block;vertical-align:-.125em}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.skip{position:fixed;left:16px;top:-60px;z-index:10;background:#fff;color:var(--ink);padding:10px 16px;font-weight:700}
.skip:focus{top:16px}
a,button,label,input,select,textarea,summary{touch-action:manipulation}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:54px;padding:0 26px;font-weight:700;font-size:16px;white-space:nowrap;border:0;cursor:pointer;font-family:inherit;transition:transform .15s ease,background .15s ease}
.btn:active{transform:translateY(1px)}
.btn-white{background:#fff;color:var(--blue-dark)}
.btn-line{border:1px solid rgba(255,255,255,.7);color:#fff}
.btn-line:hover{background:rgba(255,255,255,.1)}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--blue-dark)}

/* 첫 화면 */
.hero{position:relative;min-height:640px;color:#fff;display:flex;flex-direction:column;background:#1b2433 url("img/hero.jpg") center/cover}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,16,28,.84) 0%,rgba(10,16,28,.58) 50%,rgba(10,16,28,.18) 100%)}
.hero>*{position:relative}
.site-header .wrap{height:76px;display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:800;font-size:19px}
.brand span{font-weight:600;opacity:.8;margin-left:8px;font-size:16px}
.site-header nav{display:flex;gap:30px;font-size:15px}
.site-header nav a{opacity:.9}
.site-header nav a:hover{opacity:1}
.hero-body{flex:1;display:flex;align-items:center}
.hero-body .wrap{width:100%}
.hero h1{font-size:54px;line-height:1.24;letter-spacing:-.035em;font-weight:800}
.hero p{margin-top:20px;font-size:19px;line-height:1.65;max-width:31em;color:rgba(255,255,255,.92)}
.hero .cta{display:flex;gap:12px;margin-top:36px}

/* 파란 바로가기 띠 */
.strip{background:var(--blue);color:#fff}
.strip .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.strip .cell{display:flex;align-items:center;gap:14px;padding:26px 24px;border-left:1px solid rgba(255,255,255,.22)}
.strip .wrap>:last-child{border-right:1px solid rgba(255,255,255,.22)}
.strip .ic{font-size:30px}
.strip small{display:block;font-size:13px;opacity:.85}
.strip b{font-size:18px}
.strip a.cell:hover{background:var(--blue-dark)}

/* 맡길 수 있는 등기 */
.services{padding:96px 0 88px}
.services h2{font-size:38px;line-height:1.3;letter-spacing:-.03em}
.tabs{display:grid;grid-template-columns:1fr 1fr;margin-top:36px;border:1px solid var(--line)}
.tab{height:76px;font:inherit;font-size:21px;font-weight:800;background:var(--soft);color:var(--sub);border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:12px;transition:background .15s ease,color .15s ease}
.tab .ic{font-size:28px}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{background:var(--blue);color:#fff}
.tiles{display:grid;grid-template-columns:repeat(5,1fr);margin-top:44px}
.tiles[hidden]{display:none}
.tiles+.tiles{margin-top:28px}
.tile{padding:8px 24px 8px 0}
.tile+.tile{padding-left:24px;border-left:1px solid var(--line)}
.tile .ic{font-size:40px;color:var(--blue)}
.tile b{display:block;font-size:18px;margin:18px 0 8px}
.tile span{font-size:15px;color:var(--sub);line-height:1.55}
.fee{margin-top:48px;font-size:16px;color:var(--sub)}

/* 전화 상담 배너 */
.callband{background:var(--navy);color:#fff;padding:88px 0}
.callband .head{max-width:720px}

.callband h2{font-size:40px;line-height:1.3;letter-spacing:-.03em;margin-top:12px}
.callband .head p{margin-top:16px;font-size:17px;line-height:1.7;color:rgba(255,255,255,.86)}
.callband .head .kicker{margin-top:0;font-size:15px;font-weight:700;color:#a9c1ff}
.callband .row{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px;align-items:stretch}
.callcard{display:block;background:#fff;color:var(--ink);padding:32px;transition:transform .15s ease}
.callcard:active{transform:translateY(1px)}
.callcard .t{display:flex;gap:10px;align-items:center;font-size:20px;font-weight:800}
.callcard .t .ic{color:var(--blue);font-size:26px}
.callcard .d{margin-top:8px;color:var(--sub);font-size:15px}
.callcard .who{margin-top:26px;font-size:15px;font-weight:700;color:var(--sub)}
.callcard .num{margin-top:2px;font-size:36px;font-weight:800;color:var(--blue);letter-spacing:-.01em}
.bizcard{display:grid;grid-template-columns:42% 1fr;gap:20px;align-items:center;background:#fff;color:#151515;padding:26px 30px}
.bizcard img{width:70%;margin:0 auto;height:auto;display:block}
.bizcard .role{font-size:14px;font-weight:600}
.bizcard .name{font-size:28px;font-weight:800;letter-spacing:.4em;margin:2px 0 14px}
.bizcard .info{font-size:13.5px;line-height:1.75;color:#262626}
.bizcard .info b{font-size:16px;color:#151515}

/* 등기 접수 파트너 */
.partner{display:grid;grid-template-columns:1fr 1fr;background:var(--soft)}
.partner img{width:100%;height:100%;min-height:480px;object-fit:cover;display:block}
.partner-text{padding:80px 72px;align-self:center}
.partner h2{font-size:34px;line-height:1.36;letter-spacing:-.03em}
.partner p{margin-top:18px;font-size:17px;line-height:1.75;color:var(--sub);max-width:30em}
.partner ul{list-style:none;margin-top:28px;display:grid;gap:14px;font-size:17px;font-weight:600}
.partner li{display:flex;gap:10px;align-items:center}
.partner li .ic{color:var(--blue);font-size:22px}

/* 진행 절차 */
.process{padding:100px 0}
.process .wrap{display:grid;grid-template-columns:1fr 1.5fr;gap:64px;align-items:start}
.process h2{font-size:38px;line-height:1.3;letter-spacing:-.03em}
.process-head p{margin-top:16px;font-size:17px;color:var(--sub);line-height:1.7}
.steps{list-style:none}
.steps li{display:grid;grid-template-columns:64px 1fr;gap:8px;padding:26px 0;border-top:1px solid var(--line)}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps .n{font-size:34px;font-weight:800;color:var(--blue);line-height:1.1}
.steps b{font-size:20px}
.steps p{margin-top:6px;font-size:16px;color:var(--sub);line-height:1.6}

/* 운영 변호사 */

/* 접수 등기소 */

/* 자주 묻는 질문 */
.faq{background:var(--soft);padding:96px 0}
.faq-list{margin-top:32px;max-width:880px}
.faq h2{font-size:38px;line-height:1.3;letter-spacing:-.03em}
.faq-list details{border-top:1px solid #cdd4de}
.faq-list details:last-child{border-bottom:1px solid #cdd4de}
.faq-list summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:24px 0;font-size:18px;font-weight:700;cursor:pointer}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary .ic{font-size:22px;color:var(--blue);transition:transform .2s ease}
.faq-list details[open] summary .ic{transform:rotate(180deg)}
.faq-list details p{padding:0 0 24px;font-size:16px;line-height:1.75;color:var(--sub)}

/* 마무리 사진 띠 */
.closing{position:relative;color:#fff;padding:112px 0;background:#141c2b url("img/closing.jpg") center/cover}
.closing::before{content:"";position:absolute;inset:0;background:rgba(10,16,28,.74)}
.closing .wrap{position:relative;display:flex;align-items:center;justify-content:space-between;gap:40px}
.closing h2{font-size:40px;line-height:1.3;letter-spacing:-.03em}
.closing p{margin-top:14px;font-size:18px;line-height:1.65;max-width:32em;color:rgba(255,255,255,.9)}
.closing .cta{display:flex;gap:12px;flex-shrink:0}

/* 네이비 하단 */
.site-footer{background:var(--navy);color:rgba(255,255,255,.82);padding:64px 0 40px;font-size:15px;line-height:1.8;border-top:1px solid rgba(255,255,255,.08)}
.site-footer .top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px}
.site-footer .name{color:#fff;font-weight:800;font-size:20px;margin-bottom:12px}
.site-footer .ft-h{color:#fff;font-size:15px;font-weight:700;margin-bottom:12px}
.site-footer .addr{font-style:normal;margin-top:10px}
.site-footer ul{list-style:none}
.site-footer a:hover{color:#fff}
.site-footer .bottom{margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,.16);display:flex;justify-content:space-between;font-size:14px;color:rgba(255,255,255,.7)}

@media (max-width:767px){
  .wrap{padding:0 20px}
  .site-header nav{display:none}
  .hero{min-height:580px}
  .hero h1{font-size:32px}
  .hero p{font-size:17px}
  .hero .cta,.closing .cta{flex-direction:column;width:100%}
  .strip .wrap{grid-template-columns:1fr 1fr}
  .strip .cell{padding:18px 14px;border-left:0;border-bottom:1px solid rgba(255,255,255,.22)}
  .strip .wrap>:last-child{border-right:0}
  .strip b{font-size:14px;white-space:nowrap}
  .strip .ic{font-size:24px}
  .services,.faq,.process{padding:64px 0}
  .tab{height:60px;font-size:17px}
  .tab .ic{font-size:22px}
  .tiles{grid-template-columns:1fr 1fr;gap:28px 0}
  .tile,.tile+.tile{padding:0 16px 0 0;border-left:0}
  .services h2,.partner h2,.callband h2,.closing h2,.process h2,.faq h2{font-size:27px}
  .callband{padding:64px 0}
  .callband .row,.process .wrap{grid-template-columns:1fr;gap:24px}
  .callcard .num{font-size:30px}
  .bizcard{grid-template-columns:36% 1fr;padding:20px}
  .bizcard .name{font-size:22px}
  .partner{grid-template-columns:1fr}
  .partner img{min-height:240px}
  .partner-text{padding:48px 20px}
  .closing{padding:72px 0}
  .closing .wrap{flex-direction:column;align-items:flex-start}
  .site-footer .top{grid-template-columns:1fr;gap:32px}
  .site-footer .bottom{flex-direction:column;gap:8px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}

/* 문의폼 */
.reqform{padding:100px 0;background:var(--soft)}
.reqform .wrap{display:grid;grid-template-columns:1fr 1.35fr;gap:64px;align-items:start}
.req-side{position:sticky;top:32px}
.req-side h2{font-size:38px;line-height:1.3;letter-spacing:-.03em}
.req-side p{margin-top:18px;color:var(--sub);font-size:17px;line-height:1.75}
.side-call{display:flex;gap:14px;align-items:center;margin-top:28px;padding:22px 24px;background:var(--navy);color:#fff}
.side-call .ic{font-size:28px}
.side-call small{display:block;font-size:13px;opacity:.85}
.side-call b{font-size:24px}
.req-side .side-note{margin-top:14px;font-size:15px}
.form{background:#fff;border:1px solid var(--line);padding:36px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.warn{display:flex;gap:8px;align-items:flex-start;font-size:14px;line-height:1.6;color:#7a4300;background:#fff4e5;padding:12px 14px;margin-bottom:24px}
.warn .ic{font-size:18px;margin-top:2px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 18px}
.field{display:grid;gap:8px;align-content:start;border:0;min-width:0}
.field.full{grid-column:1/-1}
.lbl{font-size:14px;font-weight:700;padding:0}
.lbl.req::after{content:" *";color:#c81e2e}
.form input[type=text],.form input[type=tel],.form input[type=email],.form input[type=number],.form input[type=date],.form select,.form textarea{height:52px;border:1px solid #b9c1cc;padding:0 14px;font:inherit;font-size:16px;color:var(--ink);background:#fff;width:100%;border-radius:0}
.form textarea{height:112px;padding:12px 14px;resize:vertical;line-height:1.6}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--blue);outline-offset:-1px;border-color:var(--blue)}
.form ::placeholder{color:#6b7280}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex}
.chip input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;height:46px;padding:0 18px;border:1px solid #b9c1cc;font-size:15px;font-weight:600;background:#fff}
.chip:hover span{border-color:var(--ink)}
.chip input:checked+span{background:var(--blue);border-color:var(--blue);color:#fff}
.chip input:focus-visible+span{outline:2px solid var(--blue);outline-offset:2px}
.other{margin-top:10px}
.agree{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.6;margin:26px 0 20px}
.agree input{width:20px;height:20px;margin-top:2px;accent-color:var(--blue);flex-shrink:0}
.agree a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.form .btn-blue{width:100%;height:58px;font-size:17px}
.form .btn-blue:disabled{opacity:.7;cursor:progress}
.btn-ghost{background:#fff;color:var(--ink);border:1px solid #b9c1cc}
.btn-ghost:hover{border-color:var(--ink)}

/* 접수 완료·실패 창 (여백 초기화 때문에 margin:auto 필수) */
.modal{margin:auto;border:0;padding:40px 36px 32px;width:min(420px,calc(100% - 40px));text-align:center;color:var(--ink);box-shadow:0 24px 64px rgba(10,16,28,.35)}
.modal{overscroll-behavior:contain}
.modal::backdrop{background:rgba(10,16,28,.6)}
.modal>.ic{font-size:56px;color:var(--blue)}
.modal h3{font-size:24px;margin-top:10px;letter-spacing:-.02em}
.modal p{margin-top:12px;color:var(--sub);font-size:16px;line-height:1.7}
.modal .btn{width:100%;margin-top:26px}
.modal .btn+form .btn{margin-top:10px}

/* 다른 페이지 공통 머리글·접수 완료 페이지 */
.site-header.solid{background:var(--navy);color:#fff}
.thanks{padding:120px 0 140px;text-align:center}
.thanks>.wrap>.ic{font-size:64px;color:var(--blue)}
.thanks h1{margin-top:12px;font-size:36px;letter-spacing:-.03em}
.thanks p{margin-top:14px;font-size:17px;color:var(--sub);line-height:1.75}
.thanks .send-to{margin-top:28px;font-size:15px}
.thanks .cta{display:flex;gap:12px;justify-content:center;margin-top:36px}

@media (max-width:767px){
  .reqform{padding:64px 0}
  .reqform .wrap,.grid{grid-template-columns:1fr;gap:28px}
  .grid{gap:18px}
  .req-side{position:static}
  .req-side h2{font-size:27px}
  .form{padding:22px}
  .thanks{padding:72px 0 96px}
  .thanks h1{font-size:28px}
  .thanks .cta{flex-direction:column}
}

/* 개인정보 처리방침 */
.policy{padding:80px 0 120px}
.policy .wrap{max-width:820px}
.policy h1{font-size:36px;letter-spacing:-.03em}
.policy .lead{margin-top:16px;font-size:17px;color:var(--sub);line-height:1.75}
.policy h2{margin-top:48px;font-size:21px;letter-spacing:-.02em}
.policy p,.policy li{font-size:16px;line-height:1.8;color:#2b3340}
.policy p{margin-top:12px}
.policy ul{margin-top:12px;padding-left:20px}
.policy li+li{margin-top:4px}
.policy a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.policy .date{margin-top:56px;padding-top:20px;border-top:1px solid var(--line);color:var(--sub)}
@media (max-width:767px){.policy{padding:56px 0 80px}.policy h1{font-size:28px}}

/* 카카오 상담 플로팅 버튼 (모든 페이지) */
.kakao-float{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));z-index:5;display:flex;align-items:center;gap:8px;height:56px;padding:0 20px;background:#fee500;color:#191600;font-weight:800;font-size:16px;box-shadow:0 8px 24px rgba(10,16,28,.25);transition:transform .15s ease,opacity .15s ease,visibility .15s}
.kakao-float.is-hidden{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px)}
.kakao-float .ic{font-size:24px}
.kakao-float:hover{transform:translateY(-2px)}
.kakao-float:active{transform:translateY(0)}
@media (max-width:767px){.kakao-float{right:16px;bottom:16px;height:52px;padding:0 16px;font-size:15px}}

/* PC용 카톡 QR 안내 창 */
.modal .modal-title{font-size:22px;letter-spacing:-.02em}
.modal .qr{display:block;width:200px;height:200px;margin:20px auto 0}
.modal .small{font-size:15px}
.modal .small a{color:var(--blue);font-weight:700}
.modal p+form .btn{margin-top:10px}

/* 화면에는 숨기고 화면 읽기 프로그램에만 읽히는 글 */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}