/* 김해태 부장 개인 홈페이지 — 시안 sample (55) 오른쪽 단 (실측: measurements.md) */
:root {
  --teal: #05666D;
  --teal-deep: #04484B;
  --teal-ink: #013D3B;
  --footer: #003537;
  --tile: rgba(73, 143, 151, .28);
  --tile-line: rgba(143, 200, 204, .28);
  --mint: #E8F2F0;
  --mint-2: #F3F8F7;
  --paper: #FDFDFB;
  --ink: #16302F;
  --muted: #5A6E6D;
  --line: #DCE8E6;
  --sun: #F3C64B;
  --wrap: 1230px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 20px; }
body {
  font-family: Pretendard, -apple-system, "Malgun Gothic", sans-serif;
  color: var(--ink); background: var(--paper);
  font-size: 17px; line-height: 1.7; word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 0; }

/* 빈 사진 자리 */
.ph { position: relative; background: repeating-linear-gradient(135deg, #DCEAE7 0 14px, #E6F0EE 14px 28px); overflow: hidden; }
.ph::after {
  content: attr(data-ph); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 80%; text-align: center; font-size: 13px; line-height: 1.5; color: #5F7F7C;
}

/* 단추 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; padding: 0 26px; border-radius: 999px; font-weight: 600; font-size: 16px;
  transition: background .6s var(--ease), color .6s var(--ease), transform .6s var(--ease), box-shadow .6s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn-teal { background: var(--teal); color: #fff; }
.btn-teal:hover { background: var(--teal-deep); box-shadow: 0 10px 24px rgba(4, 72, 75, .22); }
.btn-sun { background: var(--sun); color: var(--teal-ink); }
.btn-sun:hover { background: #F7D36C; }
.btn-line-w { border: 1.5px solid rgba(255, 255, 255, .7); color: #fff; }
.btn-line { border: 1.5px solid var(--teal); color: var(--teal); }
.btn-line:hover { background: var(--teal); color: #fff; }
.btn-line-w:hover { background: rgba(255, 255, 255, .12); }
.btn-full { width: 100%; height: 58px; font-size: 17px; }
.link { text-decoration: underline; text-underline-offset: 3px; font-size: inherit; color: inherit; }

/* 머리말 — 한 줄 97 (예전 흰 메뉴 줄 자리 · 2026-10-15 미르: 회사 이름 크게 + 상담 신청 단추만) */
.site-header { background: #fff; border-bottom: 1px solid var(--line); }
.header-in { height: 97px; display: flex; align-items: center; justify-content: space-between; }
.logo { font-size: 32px; font-weight: 800; letter-spacing: -.03em; color: var(--teal-ink); }
.header-btn { height: 52px; padding: 0 28px; }
/* 워드프레스 글 화면은 머리말 링크를 검은 글자로 바꾸므로 단추 글자는 흰색으로 지킨다 */
.site-header .header-btn { color: #fff; }

/* 블럭1 첫 화면 — 985 (왼쪽 단 실측) */
.hero { position: relative; min-height: 985px; display: flex; align-items: center; color: #fff; overflow: hidden; }
.hero-photo { position: absolute; inset: 0; background: linear-gradient(120deg, #0B5A5F, #2E8C90 60%, #7DBDBD); }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(1, 45, 46, .78) 0%, rgba(1, 45, 46, .45) 45%, rgba(1, 45, 46, 0) 75%); }
.hero-in { position: relative; padding: 120px 0 190px; }
.hero h1 { font-size: 60px; line-height: 1.28; font-weight: 700; letter-spacing: -.03em; }
.hero h1 em { font-style: normal; color: var(--sun); }
.hero-lead { margin-top: 28px; font-size: 19px; line-height: 1.8; opacity: .9; }
.hero-btns { margin-top: 40px; display: flex; gap: 12px; }
.hero-btns .btn { height: 58px; padding: 0 30px; font-size: 17px; }
.hero-strip {
  position: absolute; left: 0; bottom: 60px; display: flex;
  background: rgba(1, 61, 59, .55); border: 1px solid rgba(255, 255, 255, .18); border-radius: 18px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.hero-strip li { display: flex; align-items: center; gap: 14px; padding: 22px 32px; line-height: 1.4; }
.hero-strip li + li { border-left: 1px solid rgba(255, 255, 255, .16); }
.hero-strip svg { width: 30px; height: 30px; color: var(--sun); }
.hero-strip b { display: block; font-size: 18px; }
.hero-strip span { font-size: 14px; opacity: .75; }

/* AI 사진 (2026-10-15 · images/ai 원본 → images/web 줄인 것) */
.hero-photo img, .case-img img, .hello-photo img, .apply-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-photo img { object-position: 70% center; }
.case-img img { transition: transform 1.2s var(--ease); }
.case:hover .case-img img { transform: scale(1.03); }
.apply-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, rgba(4, 72, 75, .95) 0%, rgba(4, 72, 75, .88) 45%, rgba(5, 102, 109, .62) 100%); }

/* 공통 제목 */
.label { font-size: 14px; font-weight: 700; color: var(--teal); letter-spacing: .04em; }
.label-w { color: var(--sun); }
h2 { margin-top: 12px; font-size: 46px; line-height: 1.3; font-weight: 700; letter-spacing: -.03em; color: var(--teal-ink); }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.sec-side { font-size: 17px; color: var(--muted); text-align: right; }

/* 블럭2 이런 상황이시면 — 1223 / 사진 288×447 · 사이 26 (오른쪽 ① 실측) */
.cases { padding: 135px 0 170px; }
.case-grid { margin-top: 64px; display: grid; grid-template-columns: repeat(4, 288px); gap: 26px; }
.case { display: block; }
.case-img { position: relative; overflow: hidden; background: var(--mint); height: 447px; border-radius: 16px; transition: transform .7s var(--ease), box-shadow .7s var(--ease); }
.case-no { position: absolute; left: 20px; top: 18px; z-index: 1; font-size: 15px; font-weight: 700; color: var(--teal); background: #fff; border-radius: 999px; padding: 4px 12px; }
.case:hover .case-img { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(1, 61, 59, .12); }
.case h3 { min-height: 2.9em; line-height: 1.45; margin-top: 22px; font-size: 21px; font-weight: 700; letter-spacing: -.02em; color: var(--teal-ink); }
.case p { margin-top: 8px; font-size: 16px; color: var(--muted); line-height: 1.65; }
.case-more { margin-top: 56px; padding: 24px 32px; border-radius: 14px; background: var(--mint); font-size: 17px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.case-more a { color: var(--teal); font-weight: 700; white-space: nowrap; }

/* 블럭3 세금 면책 안내 — 795 / 칸 308×300 · 사이 11 (오른쪽 ② 실측) */
.guide { background: var(--teal-deep); color: #fff; position: relative; overflow: hidden; }
.guide::before { content: ""; position: absolute; right: -200px; top: -260px; width: 760px; height: 760px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .06); box-shadow: 0 0 0 120px rgba(255, 255, 255, .015); }
.guide-in { position: relative; min-height: 795px; display: flex; align-items: center; justify-content: space-between; gap: 60px; padding: 100px 0; }
.guide-text { max-width: 500px; }
.guide h2 { color: #fff; }
.guide-text p:not(.label) { margin-top: 22px; font-size: 17px; line-height: 1.85; opacity: .85; }
.guide-text .btn { margin-top: 36px; }
.guide-tiles { display: grid; grid-template-columns: repeat(2, 308px); gap: 11px; }
.tile { min-height: 300px; padding: 36px 32px; border-radius: 18px; background: var(--tile); border: 1px solid var(--tile-line); transition: background .7s var(--ease), transform .7s var(--ease); }
.tile:hover { background: rgba(73, 143, 151, .4); transform: translateY(-3px); }
.tile svg { width: 34px; height: 34px; color: var(--sun); }
.tile h3 { margin-top: 26px; font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.tile p { margin-top: 12px; font-size: 15.5px; line-height: 1.75; opacity: .82; }

/* 블럭4 인사말 — 991 / 사진 686×505 · 글 카드 537 (오른쪽 ③ 실측) */
.hello { padding: 130px 0 120px; }
.quote-mark { font-size: 150px; line-height: .6; font-family: Georgia, serif; color: #CFE3E0; margin-right: 80px; }
.hello-body { margin-top: 56px; position: relative; display: flex; justify-content: flex-end; align-items: center; min-height: 505px; }
.hello-photo { overflow: hidden; background: var(--mint); position: relative; z-index: 3; width: 686px; height: 505px; border-radius: 20px; box-shadow: -18px 0 40px rgba(1, 61, 59, .08); }
/* 시안처럼 글 카드 오른쪽 끝이 사진 밑으로 들어간다 — 보이는 폭 537 */
.hello-card {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 600px; padding: 50px 109px 46px 50px; border-radius: 20px; background: #fff;
  box-shadow: 0 22px 50px rgba(1, 61, 59, .1); border: 1px solid var(--line);
}
.hello-card.reveal { transform: translateY(calc(-50% + 18px)); }
.hello-card.reveal.on { transform: translateY(-50%); }
.hello-card > p { font-size: 18px; line-height: 1.9; color: #34504E; }
.hello-card > p + p { margin-top: 18px; }
.sign { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 14px; line-height: 1.4; }
.sign-pic { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: var(--mint); flex: none; }
.sign-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 78% 70%; display: block; }
.sign b { display: block; font-size: 17px; color: var(--teal-ink); }
.sign span { font-size: 14px; color: var(--muted); }
.steps { margin-top: 64px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: s; }
.step { display: flex; gap: 18px; padding: 28px 28px; border-radius: 16px; border: 1px solid var(--line); background: #fff; transition: transform .7s var(--ease), box-shadow .7s var(--ease); }
.step:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(1, 61, 59, .08); }
.step-no { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--teal); color: #fff; display: grid; place-items: center; font-weight: 700; }
.step h3 { font-size: 19px; color: var(--teal-ink); letter-spacing: -.02em; }
.step p { margin-top: 6px; font-size: 15.5px; color: var(--muted); line-height: 1.65; }

/* 블로그 — 935 / 카드 382 · 사진 382×284 · 카드 높이 503 (오른쪽 ④ 실측) */
.blog { padding: 120px 0 130px; background: var(--mint-2); }
.blog-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 42px; }
.bl-card { min-height: 503px; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid var(--line); transition: transform .7s var(--ease), box-shadow .7s var(--ease); }
.bl-card:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(1, 61, 59, .1); }
.bl-thumb { display: block; height: 284px; }
.bl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bl-body { padding: 26px 28px 30px; }
.bl-card time { font-size: 14px; color: var(--muted); }
.bl-card h3 { margin-top: 8px; font-size: 20px; line-height: 1.45; letter-spacing: -.02em; color: var(--teal-ink); }
.bl-card h3 a:hover { color: var(--teal); }
.bl-card p { margin-top: 10px; font-size: 15.5px; line-height: 1.65; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 블럭5 상담 신청 — 오른쪽 ⑤ 청록 사진 띠 (입력칸이 많아 524보다 높음) */
.apply { position: relative; color: #fff; overflow: hidden; }
.apply-bg { position: absolute; inset: 0; background: linear-gradient(110deg, #04484B 0%, #0A6468 55%, #2A8E8F 100%); }
.apply-in { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 70px; padding: 110px 0; }
.apply-left { max-width: 470px; }
.apply h2 { color: #fff; }
.apply-left > p:not(.label) { margin-top: 18px; font-size: 18px; opacity: .88; }
.apply-contacts { margin-top: 36px; display: grid; gap: 12px; }
.apply-contacts a, .apply-contacts button {
  width: 100%; display: flex; align-items: center; gap: 16px; padding: 16px 22px; border-radius: 14px; text-align: left;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); color: #fff; line-height: 1.4;
  font-size: 19px; font-weight: 700; transition: background .6s var(--ease);
}
.apply-contacts a:hover, .apply-contacts button:hover { background: rgba(255, 255, 255, .15); }
.apply-contacts svg { width: 28px; height: 28px; color: var(--sun); }
.apply-contacts small { display: block; font-size: 13px; font-weight: 400; opacity: .7; }
.apply-form { width: 600px; padding: 44px 44px 36px; border-radius: 22px; background: #fff; color: var(--ink); box-shadow: 0 30px 60px rgba(0, 30, 30, .25); display: grid; gap: 18px; }
.apply-form label { display: grid; gap: 8px; font-size: 15px; font-weight: 600; color: var(--teal-ink); }
.apply-form label em { font-style: normal; font-weight: 400; color: var(--muted); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.apply-form input[type=text], .apply-form input[type=tel], .apply-form select, .apply-form textarea {
  width: 100%; height: 54px; padding: 0 16px; border: 1px solid #CFDDDB; border-radius: 12px; background: var(--mint-2);
  font: inherit; font-size: 16px; font-weight: 400; color: var(--ink); transition: border-color .4s, background .4s;
}
.apply-form textarea { height: auto; padding: 14px 16px; resize: vertical; line-height: 1.6; }
.apply-form input:focus, .apply-form select:focus, .apply-form textarea:focus { outline: none; border-color: var(--teal); background: #fff; }
.apply-form .agree { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; font-weight: 400; color: var(--muted); line-height: 1.6; }
.apply-form .agree input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--teal); flex: none; }
.form-msg { min-height: 0; font-size: 15px; text-align: center; color: var(--teal); font-weight: 600; }
.form-msg.err { color: #B4442F; }

/* 바닥글 */
.site-footer { background: var(--footer); color: rgba(255, 255, 255, .78); font-size: 15px; }
.footer-in { display: grid; grid-template-columns: 1.3fr 1fr 1.2fr; gap: 50px; padding: 80px 0 56px; }
.f-brand .logo-name { color: #fff; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.f-desc { margin-top: 14px; line-height: 1.8; }
.f-title { color: #fff; font-weight: 700; margin-bottom: 14px; }
.f-col li { line-height: 2; }
.f-col a:hover, .f-col button:hover { color: #fff; }
.f-col button { color: inherit; font-size: inherit; padding: 0; }
.f-bottom { border-top: 1px solid rgba(255, 255, 255, .12); padding: 24px 0 30px; display: flex; justify-content: space-between; font-size: 14px; opacity: .8; }

/* 휴대폰 고정 단추 */
.m-bar { display: none; }

/* 개인정보 안내 · 알림 */
.modal { position: fixed; inset: 0; z-index: 100; background: rgba(0, 30, 30, .5); display: grid; place-items: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal-box { width: 100%; max-width: 440px; background: #fff; border-radius: 18px; padding: 34px 32px 28px; }
.modal-box h3 { font-size: 20px; color: var(--teal-ink); }
.modal-box dl { margin-top: 18px; display: grid; grid-template-columns: 90px 1fr; gap: 10px 12px; font-size: 15px; }
.modal-box dt { font-weight: 700; color: var(--teal); }
.modal-box p { margin-top: 16px; font-size: 14px; color: var(--muted); }
.modal-box .btn { margin-top: 22px; width: 100%; }
.toast { position: fixed; left: 50%; bottom: 40px; z-index: 110; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--teal-ink); color: #fff; padding: 14px 24px; border-radius: 999px; font-size: 15px; transition: opacity .5s, transform .5s var(--ease); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* 나타나는 움직임 — 작고 느리게, 차례로 */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* ---------- 좁은 PC ---------- */
@media (max-width: 1290px) {
  .wrap { padding: 0 30px; }
  .hero-strip { left: 30px; }
  .case-grid { grid-template-columns: repeat(4, 1fr); }
  .guide-tiles { grid-template-columns: repeat(2, minmax(0, 300px)); }
  .apply-form { width: 540px; }
}
@media (max-width: 1080px) {
  .case-grid { grid-template-columns: repeat(2, 1fr); }
  .case-img { height: 400px; }
  .guide-in { flex-direction: column; align-items: flex-start; }
  .guide-text { max-width: none; }
  .hello-body { display: block; }
  .hello-card, .hello-card.reveal, .hello-card.reveal.on { position: relative; transform: none; width: auto; top: auto; }
  .hello-card { padding: 44px 40px; }
  .hello-photo { box-shadow: none; }
  .hello-photo { width: 100%; height: 420px; margin-top: 20px; }
  .apply-in { flex-direction: column; align-items: stretch; }
  .blog-grid { gap: 20px; }
  .apply-left, .apply-form { max-width: none; width: auto; }
}

/* ---------- 휴대폰 ---------- */
@media (max-width: 760px) {
  body { font-size: 16px; padding-bottom: 64px; }
  .wrap { padding: 0 20px; }
  .header-in { height: 64px; }
  .logo { font-size: 23px; }
  .header-btn { height: 40px; padding: 0 16px; font-size: 14.5px; }

  .hero { min-height: 640px; align-items: flex-start; }
  .hero-shade { background: linear-gradient(180deg, rgba(1, 45, 46, .7), rgba(1, 45, 46, .55)); }
  .hero-in { padding: 48px 20px 40px; }
  .hero h1 { font-size: 34px; line-height: 1.32; }
  .hero-lead { font-size: 16px; margin-top: 18px; }
  .hero-lead br { display: none; }
  .hero-btns { flex-direction: column; margin-top: 28px; }
  .hero-btns .btn { height: 54px; }
  .hero-strip { display: none; } /* 휴대폰은 아래 고정 단추와 상담 신청 칸에 연락처가 있어 뺀다 */
  .hero-strip li { padding: 14px 18px; }
  .hero-strip li + li { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .16); }
  .hero-strip b { font-size: 16px; }
  .hero-strip span { font-size: 13px; }

  h2 { font-size: 29px; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .sec-side { text-align: left; font-size: 15.5px; }
  .sec-side br { display: none; }

  .cases { padding: 72px 0 64px; }
  .case-grid { margin-top: 36px; gap: 26px 14px; }
  .case-img { height: 230px; border-radius: 12px; }
  .case-no { left: 12px; top: 12px; font-size: 13px; padding: 2px 10px; }
  .case h3 { margin-top: 14px; font-size: 17px; }
  .case p { font-size: 14.5px; }
  .case-more { margin-top: 36px; padding: 18px 20px; flex-direction: column; align-items: flex-start; gap: 8px; font-size: 15.5px; }

  .guide-in { padding: 72px 20px; gap: 36px; min-height: 0; }
  .guide-text p:not(.label) { font-size: 16px; }
  .guide-text .btn { width: 100%; }
  .guide-tiles { grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
  .tile { min-height: 0; padding: 22px 18px; border-radius: 14px; }
  .tile svg { width: 28px; height: 28px; }
  .tile h3 { margin-top: 14px; font-size: 16.5px; }
  .tile p { font-size: 14px; }

  .hello { padding: 72px 0 64px; }
  .quote-mark { display: none; }
  .hello-body { margin-top: 30px; }
  .hello-card { padding: 30px 24px; }
  .hello-card > p { font-size: 16px; }
  .hello-photo { height: 260px; }
  .steps { grid-template-columns: 1fr; margin-top: 36px; gap: 12px; }
  .step { padding: 20px; }

  .blog { padding: 72px 0 64px; }
  .blog .sec-head .btn { height: 44px; font-size: 15px; }
  /* 휴대폰은 옆으로 넘겨 보게 해서 페이지 길이를 줄인다 */
  .blog-grid { display: flex; margin: 30px -20px 0; padding: 0 20px 6px; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 20px; scrollbar-width: none; }
  .blog-grid::-webkit-scrollbar { display: none; }
  .bl-card { flex: 0 0 82%; scroll-snap-align: start; }
  .bl-card { min-height: 0; }
  .bl-thumb { height: 190px; }
  .bl-body { padding: 20px 20px 24px; }
  .bl-card h3 { font-size: 18px; }
  .case h3 { min-height: 0; }

  .apply-in { padding: 72px 20px; gap: 36px; }
  .apply-contacts a, .apply-contacts button { font-size: 17px; padding: 14px 18px; }
  .apply-form { padding: 28px 20px 24px; border-radius: 18px; }
  .row2 { grid-template-columns: 1fr; }

  .footer-in { grid-template-columns: 1fr; gap: 28px; padding: 52px 20px 30px; }
  .f-bottom { flex-direction: column; gap: 8px; padding: 20px 20px 28px; }

  .m-bar { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; height: 64px; box-shadow: 0 -6px 20px rgba(0, 30, 30, .12); }
  .m-bar a { display: grid; place-items: center; font-weight: 700; font-size: 17px; }
  .m-call { background: #fff; color: var(--teal); }
  .m-apply { background: var(--teal); color: #fff; }
  .toast { bottom: 84px; }
}