/* Typography and spatial rhythm shared by the field landing pages. */
:root {
  --landing-serif: 'Noto Serif KR', 'Batang', serif;
  --landing-sans: 'Noto Sans KR', sans-serif;
}
body {
  font-family: var(--landing-sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
header { height: 86px; padding-inline: 5.5%; }
header .brand img { width: 162px; }
.brand { gap: 24px; }
.brand span { font-size: 10px; letter-spacing: .05em; padding-left: 23px; }
nav { font-size: 12px; gap: 30px; letter-spacing: .01em; }
.header-call { font-size: 12px; font-weight: 400; border-color: var(--blue); padding-bottom: 9px; }
.wrap { max-width: 1450px; padding: 100px 7.5%; }
.eyebrow { font-size: 9px; font-weight: 500; letter-spacing: .24em; margin-bottom: 25px; }
h1, h2 { font-family: var(--landing-serif); font-weight: 400; letter-spacing: -.05em; line-height: 1.7; }
h2 { font-size: 37px; }
.hero { min-height: 660px; height: calc(100svh - 86px); max-height: 880px; }
.hero-content { padding: 72px 7.5% 100px; max-width: 1120px; }
.hero-photo { object-position: 68% 50%; }
.hero .eyebrow { font-size: 9px; letter-spacing: .28em; margin-bottom: 29px; }
.hero-label { font-size: 12px; font-weight: 400; letter-spacing: .07em; margin-bottom: 28px; }
.hero h1 { font-family: var(--landing-serif); font-size: clamp(37px, 4vw, 60px); font-weight: 400; letter-spacing: -.065em; line-height: 1.65; }
.hero-rule { width: 38px; margin: 31px 0 23px; opacity: .65; }
.hero-desc { font-size: 14px; line-height: 2.1; margin: 0 0 30px; font-weight: 400; }
.button { border-radius: 0; font-size: 12px; letter-spacing: -.01em; padding: 15px 24px; }
.hero .button { font-size: 12px; padding: 15px 23px; min-width: 235px; }
.hero-bottom { padding: 19px 0; font-size: 9px; letter-spacing: .04em; }
.section-head { margin-bottom: 43px; }
.section-head > p { font-size: 13px; line-height: 2.1; }
.text-link { font-size: 12px; padding: 8px 0 11px; font-weight: 400; }
.intro { column-gap: 9%; padding-block: 85px; }
.intro h2 { font-family: var(--landing-serif); font-size: 32px; font-weight: 400; line-height: 1.8; }
.intro > p:last-child { font-size: 14px; line-height: 2.2; }
.support { padding-top: 85px; padding-bottom: 100px; }
.support-layout { grid-template-columns: 36% 64%; }
.tabs { padding: 22px 38px 0 0; }
.tabs button { font-size: 14px; padding: 25px 16px; line-height: 1.9; font-weight: 400; }
.tabs button span { font-family: Georgia, serif; font-size: 10px; letter-spacing: .08em; }
.tabs button b { font-size: 19px; font-weight: 400; }
.situation { padding: 43px 48px; min-height: 420px; }
.situation h3 { font-family: var(--landing-serif); font-size: 29px; line-height: 1.75; font-weight: 400; letter-spacing: -.04em; }
.situation > p:not(.eyebrow), .situation li { font-size: 14px; line-height: 2; }
.situation ul { margin-block: 22px 27px; }
.process .wrap { padding-block: 85px; }
.process h2 { font-family: var(--landing-serif); font-size: 35px; font-weight: 400; line-height: 1.8; }
.steps { margin-top: 43px; gap: 36px; }
.steps article { padding-top: 25px; }
.steps span { font-family: Georgia, serif; font-size: 10px; letter-spacing: .09em; }
.steps h3 { font-family: var(--landing-serif); font-size: 22px; font-weight: 400; line-height: 1.7; margin: 27px 0 17px; }
.steps p { font-size: 13px; line-height: 2.1; }
.people { padding-block: 100px; }
.people-grid { gap: 42px; }
.person { padding-top: 24px; grid-template-columns: 47% 53%; }
.portrait { height: 370px; }
.portrait img { object-fit: contain; object-position: center bottom; }
.person-info { padding: 23px 0 22px 27px; }
.person-info > span { font-size: 10px; letter-spacing: .04em; }
.person h3 { font-family: var(--landing-serif); font-size: 30px; font-weight: 400; margin: 13px 0 23px; }
.person h3 small { font-family: var(--landing-sans); font-size: 10px; }
.person ul { font-size: 12px; line-height: 2; min-height: 130px; margin-bottom: 20px; }
.person .text-link { font-size: 11px; }
.crime-person { grid-template-columns: minmax(250px, 380px) minmax(0, 1fr); gap: clamp(40px, 8vw, 110px); align-items: center; padding-block: 100px; }
.crime-person .portrait { height: 440px; background: #f0f0f0; }
.crime-person h2 { font-family: var(--landing-serif); font-size: 39px; font-weight: 400; }
.crime-person ul { font-size: 14px; line-height: 2.2; padding-left: 18px; margin: 29px 0; }
.crime-person p:last-child { font-size: 11px; margin-top: 24px; line-height: 2; }
.guide-section .wrap { padding-block: 90px 80px; }
.guide-section h2 { font-family: var(--landing-serif); font-size: 34px; font-weight: 400; }
.guide-row { padding: 30px 0; gap: 24px; }
.guide-row > span:first-child { font-family: Georgia, serif; font-size: 11px; }
.guide-row h3 { font-family: var(--landing-serif); font-size: 22px; font-weight: 400; line-height: 1.8; }
.guide-row .tag { font-size: 11px; }
.guide-row b { font-size: 20px; font-weight: 400; }
.crime-guide .guide-row { grid-template-columns: 56px minmax(0, 1fr) 24px; padding-block: 31px; }
.crime-guide .guide-row p { font-size: 13px; line-height: 2; max-width: 810px; margin-top: 11px; }
.reading-note { font-size: 11px; line-height: 2; padding-top: 28px; }
.faq { padding-block: 90px; grid-template-columns: 36% 64%; gap: 0 40px; }
.faq > h2 { font-family: var(--landing-serif); font-size: 31px; font-weight: 400; line-height: 1.8; }
.faq summary { font-size: 14px; font-weight: 400; line-height: 1.9; }
.faq > details { padding-block: 23px; }
.faq details p { font-size: 13px; line-height: 2.1; }
.contact { grid-template-columns: 45% 55%; }
.contact-photo { min-height: 570px; }
.contact-photo img { object-fit: cover; object-position: 32% center; }
.contact-copy { padding: 67px 10%; }
.contact h2, .detail-contact h2 { font-family: var(--landing-serif); font-size: 33px; font-weight: 400; line-height: 1.8; }
.contact p:not(.eyebrow), .detail-contact p { font-size: 13px; line-height: 2.1; }
.phone, .contact .phone { font-family: Georgia, serif; font-size: 31px; letter-spacing: .015em; }
.contact .button { font-size: 12px; padding: 14px 19px; }
.contact small { font-size: 10px; line-height: 2; }
.contact-actions { margin-top: 26px; }
.detail-contact .wrap { padding-block: 65px 70px; }
.detail-contact .button { font-size: 12px; padding: 14px 23px; }
footer { border-top: 1px solid var(--line); padding: 55px 7.5% 40px; }
.footer-top { padding-bottom: 27px; margin-bottom: 24px; }
.footer-top strong { font-family: var(--landing-serif); font-size: 21px; font-weight: 400; }
.footer-top strong span { font-family: var(--landing-sans); font-size: 10px; }
.footer-top > div { font-size: 10px; gap: 22px; }
footer p, footer small { font-size: 10px; line-height: 2.1; }
.detail-hero .wrap { padding-top: 34px; padding-bottom: 74px; }
.detail-hero h1 { font-family: var(--landing-serif); font-size: 43px; font-weight: 400; line-height: 1.75; }
.breadcrumbs { font-size: 10px; gap: 10px; margin-bottom: 44px; }
.detail-desc { font-size: 14px; line-height: 2.1; max-width: 650px; margin-top: 25px; }
.detail-layout { grid-template-columns: 225px minmax(0, 1fr); gap: 75px; padding-block: 70px 80px; }
.detail-layout aside { top: 115px; }
.detail-layout aside nav a { font-size: 12px; padding: 21px 10px; line-height: 1.9; }
.detail-layout aside nav span { font-family: Georgia, serif; font-size: 10px; }
.aside-call { font-size: 11px; line-height: 2; padding-top: 30px; }
.aside-call strong { font-family: Georgia, serif; font-size: 18px; font-weight: 400; }
.detail-article h2 { font-family: var(--landing-serif); font-size: 27px; font-weight: 400; line-height: 1.8; }
.detail-article p { font-size: 15px; line-height: 2.2; word-break: keep-all; }
.detail-overview { padding: 35px 37px; margin-bottom: 43px; }
.detail-overview ul { font-size: 14px; line-height: 2.1; }
.detail-number { font-family: Georgia, serif; font-size: 11px; letter-spacing: .1em; margin-bottom: 16px; }
.detail-block { padding-block: 37px 24px; }
.detail-block h2 { margin-bottom: 26px; }
.detail-block p { margin-block: 20px; }
.detail-check { padding: 37px; margin-top: 29px; }
.detail-check ul { font-size: 14px; line-height: 2.2; }
.detail-check p { font-size: 12px; line-height: 2.1; }
.detail-faq { padding-top: 46px; }
.detail-faq summary { font-size: 14px; line-height: 1.9; }
.detail-faq details p { font-size: 14px; line-height: 2.1; }
.detail-source { padding-top: 25px; margin-top: 40px; }
.detail-source p { font-size: 11px; line-height: 2; }
.detail-source a { font-size: 10px; }
.detail-related { padding-block: 66px 72px; }
.detail-related h2 { font-family: var(--landing-serif); font-size: 30px; font-weight: 400; }
.detail-related > div { gap: 30px; margin-top: 32px; }
.detail-related > div a { font-size: 13px; padding-block: 23px; }
@media(min-width:1600px) {
  .hero-content { padding-top: 95px; }
}
@media(max-width:1100px) {
  header nav { gap: 18px; font-size: 11px; }
  .brand img { width: 145px; }
  .brand span { display: none; }
  .hero h1 { font-size: 43px; }
  .person { display: block; }
  .person .portrait { height: 390px; }
  .person-info { padding: 25px 12px; }
  .person ul { min-height: 90px; }
  .crime-person { gap: 55px; grid-template-columns: 300px minmax(0, 1fr); }
  .contact-copy { padding: 60px 8%; }
  .contact-actions { flex-wrap: wrap; }
  .detail-layout { grid-template-columns: 190px minmax(0, 1fr); gap: 38px; }
}
@media(max-width:700px) {
  header { height: 76px; padding-inline: 6%; }
  header .brand img { width: 140px; }
  .header-call { font-size: 11px; }
  .wrap { padding: 62px 7%; }
  h2 { font-size: 28px; line-height: 1.85; }
  .eyebrow { font-size: 8px; letter-spacing: .18em; margin-bottom: 23px; }
  .hero { height: auto; min-height: 650px; max-height: none; }
  .hero-content { padding: 62px 7% 105px; }
  .hero .eyebrow { font-size: 8px; letter-spacing: .19em; margin-bottom: 28px; }
  .hero-label { font-size: 10px; letter-spacing: .04em; margin-bottom: 26px; }
  .hero h1 { font-size: clamp(28px, 7.4vw, 42px); line-height: 1.85; letter-spacing: -.065em; }
  .hero-rule { width: 31px; margin: 27px 0 22px; }
  .hero-desc { font-size: 12px; line-height: 2.1; margin-bottom: 29px; }
  .hero .button { font-size: 11px; min-width: 218px; padding: 14px 19px; }
  .hero-bottom { font-size: 8px; letter-spacing: 0; padding-block: 17px; }
  .intro { padding-block: 56px; }
  .intro h2 { font-size: 27px; line-height: 1.85; }
  .intro > p:last-child { font-size: 12px; line-height: 2.2; margin-top: 26px; }
  .section-head { margin-bottom: 29px; }
  .section-head > p { font-size: 11px; line-height: 2.1; }
  .support { padding-block: 55px 62px; }
  .support-layout { display: block; }
  .tabs { padding: 13px 0; gap: 7px; }
  .tabs button { font-size: 11px; padding: 17px 10px; gap: 7px; line-height: 1.85; }
  .tabs button span { font-size: 9px; }
  .situation { padding: 30px 23px; min-height: 420px; }
  .situation h3 { font-size: 25px; line-height: 1.8; }
  .situation > p:not(.eyebrow), .situation li { font-size: 12px; line-height: 2.1; }
  .situation ul { margin-block: 20px 24px; }
  .text-link { font-size: 11px; }
  .process .wrap { padding-block: 59px; }
  .process h2 { font-size: 27px; line-height: 1.9; }
  .steps { margin-top: 33px; gap: 27px 24px; }
  .steps span { font-size: 9px; }
  .steps h3 { font-size: 20px; line-height: 1.8; margin: 24px 0 14px; }
  .steps p { font-size: 12px; line-height: 2.1; }
  .people { padding-block: 64px; }
  .people-grid { gap: 20px; }
  .person .portrait { height: 235px; }
  .person-info { padding: 21px 2px; }
  .person-info > span { font-size: 9px; }
  .person h3 { font-size: 25px; margin: 11px 0 19px; }
  .person ul { font-size: 10px; line-height: 2; min-height: 160px; }
  .person .text-link { font-size: 9px; }
  .crime-person { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: 65px; }
  .crime-person .portrait { width: min(100%, 285px); height: 340px; }
  .crime-person h2 { font-size: 31px; }
  .crime-person ul { font-size: 13px; line-height: 2.2; margin-block: 23px; }
  .crime-person p:last-child { font-size: 10px; }
  .guide-section .wrap { padding-block: 62px; }
  .guide-section h2 { font-size: 28px; line-height: 1.85; }
  .guide-row { padding-block: 25px; gap: 12px; }
  .guide-row h3 { font-size: 18px; line-height: 1.9; }
  .crime-guide .guide-row { grid-template-columns: 23px minmax(0, 1fr) 18px; gap: 12px; padding-block: 26px; }
  .crime-guide .guide-row p { font-size: 12px; line-height: 2.1; margin-top: 10px; }
  .reading-note { font-size: 10px; line-height: 2; }
  .faq { display: block; padding-block: 62px; }
  .faq > h2 { font-size: 28px; margin-bottom: 30px; }
  .faq summary { font-size: 13px; line-height: 2; }
  .faq details p { font-size: 12px; line-height: 2.1; }
  .contact { display: flex; }
  .contact-photo { min-height: 0; height: 245px; }
  .contact-copy { padding: 45px 7% 50px; }
  .contact h2, .detail-contact h2 { font-size: 27px; line-height: 1.85; }
  .contact p:not(.eyebrow), .detail-contact p { font-size: 12px; }
  .phone, .contact .phone { font-size: 28px; }
  .contact .button { padding: 14px 16px; font-size: 11px; }
  .contact-actions { gap: 10px; flex-direction: row; flex-wrap: wrap; }
  footer { padding: 44px 7% 95px; }
  .footer-top strong { font-size: 21px; }
  .footer-top > div { font-size: 10px; gap: 13px 20px; }
  .detail-hero .wrap { padding: 25px 7% 48px; }
  .detail-hero h1 { font-size: 29px; line-height: 1.85; }
  .breadcrumbs { font-size: 9px; margin-bottom: 35px; }
  .detail-desc { font-size: 12px; line-height: 2.1; margin-top: 24px; }
  .detail-layout { display: block; padding-top: 32px; padding-bottom: 48px; }
  .detail-layout aside nav a { font-size: 10px; padding: 15px 9px; line-height: 1.9; }
  .detail-article h2 { font-size: 24px; line-height: 1.85; }
  .detail-article p { font-size: 14px; line-height: 2.2; }
  .detail-overview { padding: 28px 24px; margin-bottom: 32px; }
  .detail-overview ul { font-size: 12px; line-height: 2.1; }
  .detail-block { padding: 29px 0 19px; }
  .detail-block h2 { margin-bottom: 22px; }
  .detail-block p { margin-block: 18px; }
  .detail-check { padding: 29px 24px; }
  .detail-check ul { font-size: 13px; line-height: 2.2; }
  .detail-check p { font-size: 11px; line-height: 2.1; }
  .detail-faq { padding-top: 38px; }
  .detail-faq summary { font-size: 13px; line-height: 2; }
  .detail-faq details p { font-size: 13px; line-height: 2.15; }
  .detail-source p { font-size: 10px; }
  .detail-contact .wrap { padding: 48px 7%; }
  .detail-contact .button { font-size: 11px; padding: 14px 17px; }
  .detail-related { padding-block: 49px; }
  .detail-related h2 { font-size: 27px; }
  .detail-related > div { margin-top: 27px; }
  .detail-related > div a { font-size: 12px; padding-block: 21px; }
}