/* sochung.center design v4 (2026-11-05, proposal)
   The main site's own look, kept apart from case.sochung.center (the case archive):
   - shared with the case site: the logo, the navy, and the first screen matched on 2026-11-03 (header, banner, white credentials card: v38 values)
   - the main site's own, below the first screen: a left column that names each section, ruled lists instead of cards,
     a career line by year, one navy band, 1200px content line. One typeface (Pretendard): large sizes and lighter weights
     (600 for titles, 500 for sentences) below the first screen, where the case site uses heavy bold
   (2026-11-05: the serif titles were tried and dropped, see v4_serif_backup.css)
   Does not use main.css (the old template) or v2.css. */

:root {
    --navy: #16264a;
    --navy-deep: #0e1a33;
    --blue: #2457c5;      /* only in the shared header and banner (v38) */
    --ink: #141a27;
    --text: #464d5c;
    --muted: #626877;     /* 5:1 on white and on stone */
    --line: #e3e7ef;      /* shared header line (v38) */
    --soft: #f4f6fa;      /* shared header hover (v38) */
    --stone: #f3f2ee;
    --rule: #d9d7d0;
    --sans: Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    --wrap: 1200px;
    --head: 76px;
}
@media (max-width: 1023px) { :root { --head: 60px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head) + 16px); }
html.mm-open { overflow: hidden; }
body.v4 {
    margin: 0; padding-top: var(--head); background: #ffffff; color: var(--text);
    font-family: var(--sans); font-size: 16px; line-height: 1.7; word-break: keep-all; -webkit-font-smoothing: antialiased;
}
/* resets carry no weight (:where), so every component rule below wins over them */
:where(.v4) a { color: inherit; text-decoration: none; }
:where(.v4) img { max-width: 100%; }
:where(.v4) :where(h1, h2, h3, p, ul, ol, dl, dd, figure) { margin: 0; }
:where(.v4) :where(ul, ol) { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; top: 12px; z-index: 300; padding: 10px 16px; border-radius: 8px; background: #ffffff; color: var(--navy); font-weight: 700; }
.skip:focus { left: 16px; }
.wrap { width: min(var(--wrap), calc(100% - 48px)); margin: 0 auto; }
@media (max-width: 600px) { .wrap { width: calc(100% - 40px); } }

/* ---------- header (v38 values) ---------- */
.hd {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--head);
    display: flex; align-items: center; gap: 24px;
    padding: 0 max(24px, calc((100% - var(--wrap)) / 2));
    background: rgba(255, 255, 255, 0.97); color: var(--ink); font-size: 16px; line-height: normal;
    border-bottom: 1px solid var(--line); box-shadow: 0 2px 16px rgba(15, 27, 54, 0.05);
}
.hd-logo { flex: 0 0 auto; display: block; line-height: 0; }
.hd-logo img { display: block; width: 150px; max-width: none; height: auto; }
.hd-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.hd-nav > a, .hd-dd > a {
    display: block; padding: 10px 15px; border-radius: 10px;
    color: var(--ink); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.4; white-space: nowrap;
}
.hd-nav > a:hover, .hd-dd:hover > a, .hd-dd:focus-within > a { color: var(--blue); background: var(--soft); }
.hd-dd { position: relative; }
.hd-dd > a::after {
    content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 7px;
    border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); opacity: 0.6;
}
.hd-dd-menu {
    position: absolute; top: 100%; left: 50%; min-width: 250px; padding: 8px;
    background: #ffffff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 40px rgba(15, 27, 54, 0.12);
    opacity: 0; visibility: hidden; transform: translate(-50%, 10px); transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
}
.hd-dd:hover .hd-dd-menu, .hd-dd:focus-within .hd-dd-menu { opacity: 1; visibility: visible; transform: translate(-50%, 4px); }
.hd-dd-menu a {
    display: block; padding: 11px 14px; border-radius: 10px;
    color: var(--ink); font-size: 15px; font-weight: 500; line-height: 1.4; white-space: nowrap;
}
.hd-dd-menu a:hover { background: var(--soft); color: var(--blue); }
.hd-cta {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 999px;
    background: var(--navy); color: #ffffff; font-size: 15px; font-weight: 700; line-height: 1.4; white-space: nowrap;
    transition: background-color 0.2s;
}
.hd-cta:hover { background: var(--blue); }
.hd-burger { display: none; }
@media (max-width: 1023px) {
    .hd { padding: 0 8px 0 20px; gap: 12px; }
    .hd-logo img { width: 124px; }
    .hd-nav, .hd-cta { display: none; }
    .hd-burger {
        display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto;
        padding: 0; border: 0; background: none; cursor: pointer;
    }
    .hd-burger span, .hd-burger span::before, .hd-burger span::after {
        display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--navy);
    }
    .hd-burger span { position: relative; }
    .hd-burger span::before, .hd-burger span::after { content: ""; position: absolute; left: 0; }
    .hd-burger span::before { top: -7px; }
    .hd-burger span::after { top: 7px; }
}

/* ---------- phone and tablet menu (navy, like the v38 menu) ---------- */
.mm { position: fixed; inset: 0; z-index: 200; background: rgba(10, 18, 36, 0.5); }
.mm[hidden] { display: none; }
.mm-panel {
    position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(320px, 86vw);
    overflow-y: auto; background: var(--navy); color: #ffffff; box-shadow: -24px 0 48px rgba(10, 18, 36, 0.22);
}
.mm-top { display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 8px 0 22px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.mm-top img { display: block; width: 124px; height: auto; }
.mm-close { position: relative; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.mm-close::before, .mm-close::after {
    content: ""; position: absolute; left: 12px; right: 12px; top: 21px; height: 2px; border-radius: 2px; background: #ffffff; transform: rotate(45deg);
}
.mm-close::after { transform: rotate(-45deg); }
.mm-nav { padding: 14px 10px; }
.mm-nav a { display: block; padding: 12px 12px; border-radius: 8px; color: #ffffff; font-size: 17px; font-weight: 700; }
.mm-nav a.sub { padding: 8px 12px 8px 22px; color: rgba(255, 255, 255, 0.78); font-size: 15px; font-weight: 500; }
.mm-nav a:active { background: rgba(255, 255, 255, 0.08); }
.mm-group { margin: 10px 12px 2px; color: rgba(255, 255, 255, 0.55); font-size: 13px; font-weight: 700; }
.mm-call { display: grid; gap: 8px; margin-top: auto; padding: 16px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.mm-call a { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 16px; border-radius: 8px; background: rgba(255, 255, 255, 0.08); }
.mm-call span { color: rgba(255, 255, 255, 0.66); font-size: 13px; font-weight: 700; }
.mm-call strong { font-size: 18px; font-weight: 800; }

/* ---------- buttons of the first screen (v38) ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 54px; padding: 0 26px;
    border-radius: 999px; font-size: 15.5px; font-weight: 700; line-height: 1; white-space: nowrap;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.btn-light { background: #ffffff; color: var(--navy); }
.btn-light .num { font-weight: 800; letter-spacing: 0.01em; }
.btn-ghost { border: 1.5px solid rgba(255, 255, 255, 0.75); color: #ffffff; }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.1); }

/* ---------- first screen (v38 values, matched to case.sochung.center) ---------- */
.hero {
    position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden;
    height: clamp(560px, calc(100vh - var(--head) - 70px), 760px); padding: 0 24px 56px;
    background: #0f1b36 url(../../images/main.jpg) center 38% / cover no-repeat fixed; color: #ffffff; text-align: center;
}
.hero::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(9, 18, 40, 0.55) 0%, rgba(9, 18, 40, 0.62) 60%, rgba(9, 18, 40, 0.78) 100%);
}
.hero-in { position: relative; z-index: 1; animation: hero-in 1s ease 0.1s both; }
/* the v38 entrance: the banner words fade in once, 1 second, after the page opens */
@keyframes hero-in { from { opacity: 0; transform: scale(0.99); } to { opacity: 1; transform: scale(1); } }
.hero-logo { display: block; width: 460px; max-width: 100%; height: auto; margin: 0 auto; }
.hero-line { display: block; width: 460px; max-width: 100%; height: 0; margin: 18px auto; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.5); }
.hero-title { width: 460px; max-width: 100%; margin: 0 auto; color: #ffffff; font-weight: inherit; }
.hero-title > span { display: block; white-space: nowrap; }
.hero-title .t1 { color: rgba(255, 255, 255, 0.92); font-size: 27.76px; font-weight: 600; letter-spacing: 0.02em; line-height: 33px; }
.hero-title .t1 .d { color: #8fb0ff; }
.hero-title .t2 { margin-top: 3px; font-size: 48.42px; font-weight: 800; letter-spacing: -0.035em; line-height: 53px; }
.hero-lead {
    width: 460px; max-width: 100%; margin: 18px auto 0; color: rgba(255, 255, 255, 0.8);
    font-size: 15.25px; font-weight: 400; line-height: 1.65; letter-spacing: -0.01em; white-space: nowrap;
    text-align: justify; text-align-last: justify;
}
.hero-cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 460px; max-width: 100%; margin: 34px auto 0; }
.hero-cta .btn { width: 100%; padding: 0 8px; }
@media (max-width: 1023px) { .hero { background-attachment: scroll; } }
@media (max-width: 736px) {
    .hero { height: auto; padding: 72px 20px 100px; }
    .hero-logo, .hero-line, .hero-title, .hero-lead, .hero-cta { width: 240px; }
    .hero-line { margin: 16px auto; }
    .hero-title .t1 { font-size: 14.48px; line-height: 18px; }
    .hero-title .t2 { margin-top: 3px; font-size: 25.26px; line-height: 28px; }
    .hero-lead { margin-top: 14px; font-size: 15.85px; line-height: 1.55; }
    .hero-lead span { display: block; text-align: justify; text-align-last: justify; }
    .hero-lead span:first-child { letter-spacing: 0.39px; }
    .hero-lead span:last-child { letter-spacing: -0.49px; }
    .hero-cta { gap: 8px; margin-top: 26px; }
    .hero-cta .btn { height: 48px; font-size: 14.5px; }
    .hero-cta .num { display: none; }
}
@media (max-width: 600px) { .hero { padding-bottom: 88px; } }

/* ---------- white credentials card (v38) ---------- */
.cred { position: relative; z-index: 3; margin-top: -64px; }
.cred-list { display: grid; grid-template-columns: repeat(4, 1fr); background: #ffffff; border-radius: 20px; box-shadow: 0 24px 60px rgba(15, 27, 54, 0.13); }
.cred-list li { position: relative; padding: 34px 28px 32px; text-align: center; }
.cred-list li + li::before { content: ""; position: absolute; left: 0; top: 30px; bottom: 30px; width: 1px; background: var(--line); }
.cred-list .k { display: block; margin-bottom: 8px; color: #7b8496; font-size: 15px; font-weight: 600; line-height: 1.4; }
.cred-list strong { display: block; color: var(--navy); font-size: 21px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.4; }
@media (max-width: 1023px) {
    .cred-list { grid-template-columns: repeat(2, 1fr); }
    .cred-list li:nth-child(3)::before { content: none; }
    .cred-list li:nth-child(n + 3) { border-top: 1px solid var(--line); }
}
@media (max-width: 600px) {
    .cred { margin-top: -52px; }
    .cred-list { border-radius: 16px; }
    .cred-list li { padding: 20px 12px 19px; }
    .cred-list li + li::before { top: 18px; bottom: 18px; }
    .cred-list .k { margin-bottom: 4px; font-size: 12.5px; }
    .cred-list strong { font-size: 15px; }
}

/* =====================================================================
   Below the first screen: the main site's own look
   ===================================================================== */

/* sections: the left column names the section and stays in view while the right column scrolls */
.sec { padding: 136px 0; }
.cols { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 48px; align-items: start; }
.sh { position: sticky; top: calc(var(--head) + 48px); }
.sh-t {
    color: var(--ink); font-size: 38px; font-weight: 600;
    letter-spacing: -0.035em; line-height: 1.4;
}
.sh-t::before { content: ""; display: block; width: 28px; height: 3px; margin-bottom: 22px; border-radius: 2px; background: var(--blue); }
.sh-d { max-width: 330px; margin-top: 22px; color: var(--text); font-size: 16px; line-height: 1.8; }
.fine { margin-top: 18px; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.btn-line {
    display: inline-flex; align-items: center; justify-content: center; height: 52px; margin-top: 36px; padding: 0 26px;
    border: 1px solid var(--navy); border-radius: 6px; color: var(--navy); font-size: 15.5px; font-weight: 700; white-space: nowrap;
    transition: background-color 0.15s, color 0.15s;
}
.btn-line:hover { background: var(--navy); color: #ffffff; }
.btn-line.on-navy { border-color: rgba(255, 255, 255, 0.62); color: #ffffff; }
.btn-line.on-navy:hover { background: #ffffff; color: var(--navy); }

/* practice areas: a table of contents */
.areas { padding-top: 144px; }
.idx { border-top: 2px solid var(--navy); }
.idx > li { border-bottom: 1px solid var(--rule); }
.idx-row {
    display: grid; grid-template-columns: minmax(0, 1fr) 236px 28px; grid-template-rows: auto auto;
    column-gap: 32px; align-items: center; padding: 30px 6px 32px 0; color: var(--ink);
}
.idx-who { grid-column: 1; grid-row: 1; color: var(--muted); font-size: 14px; font-weight: 600; line-height: 1.5; }
.idx-name {
    grid-column: 1; grid-row: 2; margin-top: 2px; color: var(--ink); font-size: 36px; font-weight: 600;
    letter-spacing: -0.035em; line-height: 1.3; transition: color 0.15s;
}
.idx-desc { grid-column: 2; grid-row: 1 / 3; color: var(--text); font-size: 15.5px; line-height: 1.75; }
.idx-go {
    grid-column: 3; grid-row: 1 / 3; justify-self: end; width: 28px; height: 28px;
    fill: none; stroke: var(--navy); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s;
}
.idx-row:hover .idx-name { color: var(--navy); }
.idx-row:hover .idx-go { transform: translateX(4px); }

/* attorney */
.att { background: var(--stone); }
.who { margin-top: 44px; }
.who-img { display: block; width: 200px; height: 200px; border-radius: 50%; }
.who figcaption { margin-top: 22px; }
.who-name { display: block; color: var(--ink); font-size: 26px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.3; }
.who-name span { margin-left: 4px; color: var(--muted); font-size: 16px; font-weight: 600; letter-spacing: 0; }
.who-org { display: block; margin-top: 8px; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.att-say { color: var(--ink); font-size: 26px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.65; }
.att-p { max-width: 680px; margin-top: 24px; color: var(--text); font-size: 17px; line-height: 1.9; }
.tl-h { margin-top: 64px; padding-bottom: 14px; border-bottom: 2px solid var(--navy); color: var(--navy); font-size: 15px; font-weight: 700; line-height: 1.4; }
.tl > li { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 24px; padding: 17px 0 18px; border-bottom: 1px solid var(--rule); }
.tl-y { color: var(--navy); font-size: 20px; font-weight: 700; line-height: 1.5; }
.tl-e li { color: var(--ink); font-size: 16.5px; line-height: 1.85; }
.tl-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 26px; }
.tl-more dt { color: var(--muted); font-size: 13.5px; font-weight: 700; line-height: 1.5; }
.tl-more dd { margin-top: 4px; color: var(--ink); font-size: 16px; font-weight: 600; line-height: 1.6; }
.att .btn-line { margin-top: 44px; }

/* case results: the way into the case archive */
.cases { background: var(--navy); color: #ffffff; }
.cases .sh-t { color: #ffffff; }
.cases .sh-t::before { background: #8fb0ff; }
.cases .sh-d { color: rgba(255, 255, 255, 0.76); }
.cases .fine { color: rgba(255, 255, 255, 0.6); }
.cs-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid rgba(255, 255, 255, 0.3); }
.cs-list > li { display: flex; border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.cs-list > li:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, 0.16); }
.cs { flex: 1; display: flex; flex-direction: column; padding: 30px 32px 30px 0; }
.cs-list > li:nth-child(even) .cs { padding: 30px 0 30px 32px; }
.cs-cat { color: #aebfe4; font-size: 13.5px; font-weight: 700; line-height: 1.5; }
.cs-q { margin-top: 12px; color: #ffffff; font-size: 19px; font-weight: 500; letter-spacing: -0.025em; line-height: 1.75; }
.cs-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: auto; padding-top: 22px; font-size: 14.5px; line-height: 1.5; }
.cs-who { color: rgba(255, 255, 255, 0.64); }
.cs-res { color: #ffffff; font-weight: 700; white-space: nowrap; }
.cs-res i { font-style: normal; }
.cs-more {
    margin-left: auto; color: #ffffff; font-weight: 600; white-space: nowrap;
    text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.4); text-underline-offset: 4px;
}
.cs:hover .cs-q { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(255, 255, 255, 0.45); text-underline-offset: 7px; }
.cases :focus-visible { outline-color: #ffffff; }

/* consultation and location */
.ct-lines { display: grid; gap: 26px; margin-top: 40px; }
.ct-lines a, .ct-lines .addr { display: block; }
.ct-lines span { display: block; color: var(--muted); font-size: 14px; font-weight: 600; line-height: 1.5; }
.ct-lines strong { display: block; margin-top: 2px; color: var(--navy); font-size: 30px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.35; }
.ct-lines a:hover strong { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.ct-lines .addr strong {
    max-width: 300px; margin-top: 6px; color: var(--ink); font-size: 16px; font-weight: 600;
    letter-spacing: 0; line-height: 1.65;
}
.fm { position: relative; }
.fm-t { color: var(--ink); font-size: 22px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.4; }
.fm-sub { margin: 8px 0 30px; color: var(--muted); font-size: 15.5px; }
.fm-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.field { margin-bottom: 20px; }
.field label { display: block; margin-bottom: 8px; color: var(--ink); font-size: 14.5px; font-weight: 700; }
.field input, .field textarea {
    display: block; width: 100%; height: 54px; padding: 0 16px; border: 1px solid #cdd1d9; border-radius: 6px;
    background: #ffffff; color: var(--ink); font: inherit; font-size: 16px; -webkit-appearance: none; appearance: none;
}
.field textarea { height: auto; min-height: 196px; padding: 14px 16px; line-height: 1.7; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #9aa0ab; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(22, 38, 74, 0.14); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.agree { margin: 4px 0 24px; padding: 20px 22px; border-radius: 6px; background: var(--stone); }
.check { display: flex; align-items: center; gap: 10px; color: var(--ink); cursor: pointer; font-size: 15px; font-weight: 700; }
.check input { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: var(--navy); }
.check em { color: var(--navy); font-style: normal; }
.agree-list { margin: 12px 0 0 30px; }
.agree-list li { color: var(--text); font-size: 13.5px; line-height: 1.75; }
.agree-list b { display: inline-block; min-width: 66px; color: var(--ink); font-weight: 700; }
.agree-list a { color: var(--navy); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.fm-submit {
    display: block; width: 100%; height: 58px; border: 0; border-radius: 6px; background: var(--navy); color: #ffffff;
    cursor: pointer; font: inherit; font-size: 17px; font-weight: 700; -webkit-appearance: none; appearance: none; transition: background-color 0.15s;
}
.fm-submit:hover { background: var(--navy-deep); }
.fm-submit:disabled { opacity: 0.6; cursor: default; }
.v2-form-status { margin-top: 14px; padding: 14px 16px; border-radius: 6px; font-size: 15px; line-height: 1.6; }
.v2-form-status.ok { background: #e9f6ee; color: #1d6b3a; }
.v2-form-status.err { background: #fdeeee; color: #a12c2c; }
.v2-form-status a { color: inherit; font-weight: 700; text-decoration: underline; }
.ct-map { height: 400px; margin-top: 88px; background: #e7e6e1; }

/* footer */
.ft { padding: 56px 0 52px; background: var(--navy-deep); color: rgba(255, 255, 255, 0.6); }
.ft-in { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 40px; align-items: start; }
.ft-logo { display: block; width: 150px; height: auto; margin-top: 3px; }
.ft-links { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-bottom: 14px; }
.ft-links a { color: rgba(255, 255, 255, 0.86); font-size: 14.5px; font-weight: 600; }
.ft-links a.b { color: #ffffff; font-weight: 800; }
.ft-links a:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; }
.ft-info { font-size: 13.5px; line-height: 1.9; }
.ft-info span { display: inline-block; white-space: nowrap; }
.ft-info span + span::before { content: "|"; margin: 0 10px; color: rgba(255, 255, 255, 0.25); }
.ft-copy { margin-top: 10px; color: rgba(255, 255, 255, 0.42); font-size: 13px; }

/* quick consultation (v38 items): side card only where it does not cover the 1200px content line */
.qk {
    position: fixed; right: 12px; top: 50%; z-index: 90; transform: translateY(-50%);
    display: none; flex-direction: column; width: 96px; overflow: hidden;
    background: #ffffff; border-radius: 16px; box-shadow: 0 14px 40px rgba(15, 27, 54, 0.16);
}
.qk a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 15px 6px 14px; color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.3; text-align: center; }
.qk a + a { border-top: 1px solid var(--line); }
.qk a:hover { background: var(--soft); color: var(--blue); }
.qk svg { width: 24px; height: 24px; }
.qk a.call { padding: 16px 6px; background: var(--navy); color: #ffffff; }
.qk a.call:hover { background: var(--blue); color: #ffffff; }
.qk a.call b { font-size: 12px; font-weight: 800; white-space: nowrap; }
@media (min-width: 1440px) { .qk { display: flex; } }

/* phone bar (v38) */
.mbar { display: none; }

/* ---------- smaller screens ---------- */
@media (max-width: 1199px) {
    .sec { padding: 120px 0; }
    .cols { column-gap: 40px; }
    .sh-t { font-size: 30px; }
    .idx-name { font-size: 32px; }
    .idx-row { grid-template-columns: minmax(0, 1fr) 210px 24px; column-gap: 24px; }
    .att-say { font-size: 24px; }
    .cs-q { font-size: 18px; }
}
@media (max-width: 1023px) {
    .sec, .areas { padding: 96px 0; }
    .cols { grid-template-columns: minmax(0, 1fr); }
    .sh { position: static; margin-bottom: 44px; }
    .sh-t { font-size: 32px; }
    .sh-d { max-width: 560px; }
    .who { display: flex; align-items: center; gap: 22px; margin-top: 32px; }
    .who-img { width: 120px; height: 120px; }
    .who figcaption { margin-top: 0; }
    .cases .sh { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; align-items: end; }
    .cases .sh-t, .cases .sh-d { grid-column: 1; }
    .cases .btn-line { grid-column: 2; grid-row: 1 / 3; margin-top: 0; }
    .cases .fine { grid-column: 1 / -1; }
    .ct-lines { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 32px; }
    .ct-lines .addr { grid-column: 1 / -1; }
    .ct-lines .addr strong { max-width: none; }
    .ct-map { margin-top: 64px; }
    body.v4 { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
    .mbar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: grid; grid-template-columns: 1fr 1fr 1.25fr;
        padding-bottom: env(safe-area-inset-bottom); background: #ffffff; border-top: 1px solid var(--line);
        box-shadow: 0 -6px 24px rgba(15, 27, 54, 0.08);
    }
    .mbar a {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 64px;
        color: var(--ink); font-size: 12.5px; font-weight: 700; line-height: 1.2;
    }
    .mbar a + a { border-left: 1px solid var(--line); }
    .mbar svg { width: 22px; height: 22px; }
    .mbar a.main { border-left: 0; background: var(--navy); color: #ffffff; font-size: 14px; }
    .ft-info span { display: block; white-space: normal; }
    .ft-info span + span::before { content: none; }
}
@media (max-width: 767px) {
    .idx-row { grid-template-columns: minmax(0, 1fr) 24px; grid-template-rows: auto auto auto; column-gap: 16px; padding: 24px 0 26px; }
    .idx-desc { grid-column: 1; grid-row: 3; margin-top: 8px; font-size: 15px; }
    .idx-go { grid-column: 2; grid-row: 1 / 4; }
    .cs-list { grid-template-columns: minmax(0, 1fr); }
    .cs-list > li:nth-child(even) { border-left: 0; }
    .cs, .cs-list > li:nth-child(even) .cs { padding: 26px 0; }
    .cases .sh { display: block; }
    .cases .btn-line { margin-top: 28px; }
    .ft { padding: 44px 0 40px; }
    .ft-in { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .ft-info span { display: block; }
    .ft-info span + span::before { content: none; }
}
@media (max-width: 600px) {
    .sec, .areas { padding: 72px 0; }
    .sh { margin-bottom: 32px; }
    .sh-t { font-size: 26px; line-height: 1.45; }
    .sh-d { margin-top: 14px; font-size: 15.5px; }
    .idx-name { font-size: 25px; }
    .who { gap: 18px; margin-top: 26px; }
    .who-img { width: 96px; height: 96px; }
    .who-name { font-size: 22px; }
    .who-org { font-size: 13.5px; }
    .att-say { font-size: 19.5px; line-height: 1.7; }
    .att-p { margin-top: 18px; font-size: 15.5px; line-height: 1.85; }
    .tl-h { margin-top: 44px; }
    .tl > li { grid-template-columns: 60px minmax(0, 1fr); column-gap: 14px; padding: 14px 0 15px; }
    .tl-y { font-size: 17px; }
    .tl-e li { font-size: 15px; line-height: 1.75; }
    .tl-more { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .tl-more dd { font-size: 15px; }
    .btn-line, .att .btn-line { width: 100%; margin-top: 32px; }
    .cs-q { font-size: 17px; line-height: 1.75; }
    .ct-lines { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 30px; }
    .ct-lines strong { font-size: 26px; }
    .fm-t { font-size: 20px; }
    .fm-sub { margin-bottom: 24px; }
    .fm-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .agree { padding: 16px; }
    .agree-list { margin-left: 0; }
    .ct-map { height: 280px; margin: 48px -20px 0; }
}

/* =====================================================================
   Sub pages (2026-11-05): the same header, footer, quick consultation and section system as the home
   ===================================================================== */
.hd-nav > a[aria-current="page"], .hd-dd > a[aria-current="page"] { color: var(--blue); }
.mm-nav a[aria-current="page"] { background: rgba(255, 255, 255, 0.08); }
.nw { white-space: nowrap; }

/* page head: the sub pages' own photo (sub-bg.jpg) under the navy shade of the current sub pages, the title on the content line
   (11-05 17:30 "배경이 없네": the white head without a background is replaced) */
.ph {
    position: relative; display: flex; align-items: center; min-height: 360px; padding: 64px 0; overflow: hidden;
    background: #16264a url(../../images/sub-bg.jpg) no-repeat 70% center / cover; color: #ffffff;
}
.ph::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(11, 21, 44, 0.94) 0%, rgba(15, 28, 58, 0.88) 34%, rgba(20, 36, 72, 0.55) 62%, rgba(22, 38, 74, 0.2) 100%);
}
.ph > .wrap { position: relative; animation: hero-in 0.8s ease 0.05s both; }
.ph-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 22px; color: rgba(255, 255, 255, 0.62); font-size: 14px; font-weight: 600; line-height: 1.4; }
.ph-crumb a { color: rgba(255, 255, 255, 0.62); transition: color 0.15s; }
.ph-crumb a:hover { color: #ffffff; }
.ph-crumb i { color: rgba(255, 255, 255, 0.36); font-style: normal; }
.ph-crumb [aria-current] { color: rgba(255, 255, 255, 0.88); }
.ph-k { margin-bottom: 12px; color: rgba(255, 255, 255, 0.66); font-size: 15px; font-weight: 600; line-height: 1.5; }
.ph-t { color: #ffffff; font-size: 52px; font-weight: 600; letter-spacing: -0.035em; line-height: 1.25; }
.ph-d { margin-top: 18px; color: rgba(255, 255, 255, 0.8); font-size: 18px; line-height: 1.65; }
.sub-first { padding-top: 96px; }

/* attorney page */
.who-creds { display: grid; gap: 14px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--rule); }
.who-creds dt { color: var(--muted); font-size: 13.5px; font-weight: 600; line-height: 1.5; }
.who-creds dd { margin-top: 2px; color: var(--navy); font-size: 16.5px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.5; }
.att-body .att-p + .att-p { margin-top: 14px; }
.att-body .att-say + .att-p { margin-top: 28px; }
.cv { margin-top: 64px; border-top: 2px solid var(--navy); }
.cv-row { display: grid; grid-template-columns: 132px minmax(0, 1fr); column-gap: 24px; padding: 22px 0 23px; border-bottom: 1px solid var(--rule); }
.cv-h { color: var(--navy); font-size: 16px; font-weight: 700; line-height: 1.85; }
.cv-list li { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; color: var(--ink); font-size: 16.5px; line-height: 1.85; }
.cv-y { color: var(--navy); font-weight: 700; font-variant-numeric: tabular-nums; }

/* practice-area pages: the four areas on the left (in view while reading), the text on the right */
.svc-toc { border-top: 2px solid var(--navy); }
.svc-toc a { display: block; padding: 15px 4px 16px 0; border-bottom: 1px solid var(--rule); color: var(--ink); transition: color 0.15s; }
.svc-toc .k { display: block; color: var(--muted); font-size: 13px; font-weight: 600; line-height: 1.5; }
.svc-toc b { display: block; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.45; }
.svc-toc a:hover b { color: var(--navy); }
.svc-toc a[aria-current="page"] { padding-left: 16px; box-shadow: inset 3px 0 0 var(--navy); }
.svc-toc a[aria-current="page"] b { color: var(--navy); font-weight: 700; }
.svc-block + .svc-block { margin-top: 64px; }
.svc-h { color: var(--ink); font-size: 28px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.42; }
.svc-block p { max-width: 720px; color: var(--text); font-size: 17px; line-height: 1.95; }
.svc-block .svc-h + p { margin-top: 18px; }
.svc-block p + p { margin-top: 16px; }
.svc-more { display: none; }
.svc-lead {
    max-width: 760px; margin-bottom: 56px; padding-bottom: 48px; border-bottom: 1px solid var(--rule);
    color: var(--ink); font-size: 23px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.7;
}
.svc-rc { max-width: 760px; margin-top: 80px; }
.svc-rc-h { margin-bottom: 16px; color: var(--ink); font-size: 18px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.4; }
.rc { border-top: 2px solid var(--navy); }
.rc li { border-bottom: 1px solid var(--rule); }
.rc a { display: grid; grid-template-columns: minmax(0, 1fr) 24px; align-items: center; column-gap: 16px; padding: 18px 4px 19px 0; color: var(--ink); }
.rc span { grid-column: 1; color: var(--muted); font-size: 13px; font-weight: 600; line-height: 1.5; }
.rc b { grid-column: 1; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.45; transition: color 0.15s; }
.rc svg { grid-column: 2; grid-row: 1 / 3; width: 22px; height: 22px; fill: none; stroke: var(--navy); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s; }
.rc a:hover b { color: var(--navy); }
.rc a:hover svg { transform: translate(2px, -2px); }
.rc-in a:hover svg { transform: translateX(4px); }
@media (min-width: 768px) { .rc-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } }
.svc-rc .fine { margin-top: 14px; }
.lw { margin-top: 40px; }
.lw-k { margin-bottom: 12px; color: var(--muted); font-size: 13.5px; font-weight: 700; line-height: 1.5; }
.lw-card { display: flex; align-items: center; gap: 16px; padding: 18px; border: 1px solid var(--rule); border-radius: 6px; background: #ffffff; transition: border-color 0.15s; }
.lw-card:hover { border-color: var(--navy); }
.lw-card img { flex: 0 0 auto; display: block; width: 64px; height: 64px; border-radius: 50%; }
.lw-t strong { display: block; color: var(--ink); font-size: 17px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.45; }
.lw-t span { display: block; margin-top: 2px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.lw-inline { display: none; }
.pf .who-img { width: 220px; height: 220px; }

/* practice pages (11-05 17:52 "심심하고 밋밋"): the four areas as tabs along the bottom of the photo band,
   one band per section (heading on the left, text on the right, white and stone in turn), related case lists as navy tiles */
.ph-has-tabs { min-height: 430px; padding-bottom: 124px; }
.ph-tabs { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.ph-tabs .wrap { display: flex; gap: 40px; overflow-x: auto; scrollbar-width: none; }
.ph-tabs .wrap::-webkit-scrollbar { display: none; }
.ph-tabs a {
    flex: 0 0 auto; padding: 19px 0 16px; border-bottom: 3px solid transparent; color: rgba(255, 255, 255, 0.7);
    font-size: 16px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.4; white-space: nowrap; transition: color 0.15s, border-color 0.15s;
}
.ph-tabs a:hover { color: #ffffff; }
.ph-tabs a[aria-current="page"] { border-bottom-color: #ffffff; color: #ffffff; font-weight: 700; }
/* 11-05 18:04: tabs under the photo band, all sections on white with a line between them */
.svc-tabs { border-bottom: 1px solid var(--rule); background: #ffffff; }
.svc-tabs .wrap { display: flex; gap: 40px; overflow-x: auto; scrollbar-width: none; }
.svc-tabs .wrap::-webkit-scrollbar { display: none; }
.svc-tabs a { flex: 0 0 auto; margin-bottom: -1px; padding: 22px 0 19px; border-bottom: 3px solid transparent; color: var(--muted); font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.4; white-space: nowrap; transition: color 0.15s, border-color 0.15s; }
.svc-tabs a:hover { color: var(--ink); }
.svc-tabs a[aria-current="page"] { border-bottom-color: var(--navy); color: var(--navy); font-weight: 700; }
.svc-row { padding: 0; }
.svc-row > .wrap { padding: 88px 0; }
.svc-row + .svc-row > .wrap { border-top: 1px solid var(--rule); }
.band-stone { background: var(--stone); }
.svc-row-h { font-size: 32px; }
.svc-text p { max-width: 720px; color: var(--text); font-size: 17px; line-height: 1.95; }
.svc-text p + p { margin-top: 18px; }
.rc-sec { padding: 0 0 104px; }
.rc-sec > .wrap { padding-top: 88px; border-top: 1px solid var(--rule); }

/* closing contact strip of the sub pages */
.cta-sub { padding: 104px 0; background: var(--stone); }

/* notice board: the class names come from board.js and stay as they are */
.board-sec { padding: 72px 0 112px; }
.board-wrap [hidden] { display: none !important; }
.auth { display: none; }
.v2-admin .auth { display: block; }
.board-admin { margin-bottom: 20px; color: var(--muted); font-size: 14px; }
.board-admin #lblemail { color: var(--ink); font-weight: 700; }
.board-admin a { margin-left: 12px; color: var(--navy); font-weight: 700; text-decoration: underline; cursor: pointer; }
.v2-board-loading { padding: 48px 0; color: var(--muted); font-size: 15px; text-align: center; }
.v2-board-head {
    display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; gap: 24px; padding: 0 4px 14px;
    border-bottom: 2px solid var(--navy); color: var(--muted); font-size: 14px; font-weight: 600; line-height: 1.4;
}
.v2-post { border-bottom: 1px solid var(--rule); }
.v2-post-head {
    display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; align-items: center; gap: 24px; width: 100%;
    padding: 24px 4px; border: 0; background: transparent; color: var(--ink); cursor: pointer; font: inherit; text-align: left;
}
.v2-post-head:focus-visible { outline-offset: -2px; }
.v2-post-title { color: var(--ink); font-size: 18px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.55; overflow-wrap: anywhere; transition: color 0.15s; }
/* old titles were saved as HTML from a web editor: one line of text in the list's size and colour (as in v2) */
.v2-post-title :where(*) {
    display: inline !important; margin: 0 !important; padding: 0 !important; color: inherit !important;
    font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important;
}
.v2-post-title :where(title, meta, style, script, br, img) { display: none !important; }
.v2-post-head:hover .v2-post-title { color: var(--navy); }
.v2-post-head[aria-expanded="true"] .v2-post-title { color: var(--navy); font-weight: 700; }
.v2-post-date { color: var(--muted); font-size: 15px; font-weight: 500; line-height: 1.55; font-variant-numeric: tabular-nums; white-space: nowrap; }
.v2-post-icon {
    justify-self: center; width: 9px; height: 9px; margin-top: -4px;
    border-right: 2px solid #8a90a0; border-bottom: 2px solid #8a90a0; transform: rotate(45deg); transition: transform 0.2s, margin 0.2s;
}
.v2-post-head[aria-expanded="true"] .v2-post-icon { margin-top: 4px; border-color: var(--navy); transform: rotate(-135deg); }
.v2-post-body { padding: 4px 4px 44px; }
/* an open notice: old notices came from a blog, so one typeface and size throughout (as in v2) */
.v2-post-content { max-width: 760px; color: var(--text); font-size: 16.5px; line-height: 1.85; overflow-wrap: anywhere; }
.v2-post-content :where(p, span, font, div, li, td, a, b, strong, em, i, u) { font-family: inherit !important; }
.v2-post-content :where(p, span, font, div, li, td) { font-size: inherit !important; line-height: inherit !important; }
.v2-post-content :where(b, strong) { color: inherit; font-weight: 700; }
.v2-post-content :where(h1, h2, h3, h4) {
    margin: 1.8em 0 0.6em; color: var(--ink); font-family: inherit !important; font-size: 20px !important; font-weight: 700;
    letter-spacing: -0.02em; line-height: 1.45;
}
.v2-post-content p { margin: 0 0 1em; }
.v2-post-content :where(ul, ol) { margin: 0 0 1em; padding-left: 1.3em; list-style: disc; }
.v2-post-content ol { list-style: decimal; }
.v2-post-content hr { height: 0; margin: 28px 0; border: 0; border-top: 1px solid var(--rule); }
.v2-post-content a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.v2-post-content img { max-width: 100%; height: auto; }
.v2-post-content iframe { display: block; width: 100% !important; max-width: 100%; height: auto !important; aspect-ratio: 16 / 9; margin: 24px 0; border: 0; }
.v2-post-content :where(title, meta, style, script) { display: none !important; }
.v2-board-write { margin: 0 0 48px; padding: 26px; border-radius: 6px; background: var(--stone); }
.v2-post-admin { margin-top: 32px; padding: 22px; border-radius: 6px; background: var(--stone); }
.v2-board-write-t, .v2-post-admin-t { margin-bottom: 12px; color: var(--navy); font-size: 15px; font-weight: 700; line-height: 1.4; }
.v2-board-write-t span, .v2-post-admin-t span { margin-left: 8px; color: var(--muted); font-size: 13px; font-weight: 500; }
.board-wrap input[type="text"], .board-wrap textarea {
    display: block; width: 100%; margin: 0 0 12px; border: 1px solid #cdd1d9; border-radius: 6px; background: #ffffff;
    color: var(--ink); font: inherit; font-size: 16px; line-height: 1.6;
}
.board-wrap input[type="text"] { height: 50px; padding: 0 14px; }
.board-wrap textarea { min-height: 200px; padding: 12px 14px; resize: vertical; }
.board-wrap input[type="text"]:focus, .board-wrap textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(22, 38, 74, 0.14); }
.v2-post-admin-b { display: flex; flex-wrap: wrap; gap: 8px; }
.board-wrap .auth button {
    display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 20px; border: 0; border-radius: 6px;
    background: var(--navy); color: #ffffff; cursor: pointer; font: inherit; font-size: 15px; font-weight: 700; line-height: 1;
}
.board-wrap .auth button:hover { background: var(--navy-deep); }
.board-wrap .auth .delete_bn { background: #ffffff; box-shadow: inset 0 0 0 1px #d9b1ad; color: #a12c2c; }
.board-wrap .auth .delete_bn:hover { background: #fdf2f1; }
.v2-board-more { text-align: center; }
#viewAll_bn {
    display: inline-flex; align-items: center; justify-content: center; height: 52px; margin-top: 40px; padding: 0 32px;
    border: 1px solid var(--navy); border-radius: 6px; background: #ffffff; color: var(--navy); cursor: pointer; font: inherit; font-size: 15.5px; font-weight: 700;
}
#viewAll_bn:hover { background: var(--navy); color: #ffffff; }
.v2-board-empty { padding: 64px 0; border-top: 2px solid var(--navy); border-bottom: 1px solid var(--rule); color: var(--muted); font-size: 16px; text-align: center; }

/* consultation page */
.ct-page .ct-lead { color: var(--ink); font-size: 19px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.6; }
.ct-page .ct-lines { margin-top: 32px; }

/* privacy policy: the section list on the left, the text on the right (the words are unchanged) */
.policy-toc { border-top: 2px solid var(--navy); }
.policy-toc a { display: block; padding: 10px 0 11px; border-bottom: 1px solid var(--rule); color: var(--ink); font-size: 14.5px; font-weight: 600; line-height: 1.5; }
.policy-toc a:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.policy-body { max-width: 760px; color: var(--text); font-size: 16px; line-height: 1.9; overflow-wrap: anywhere; }
.policy-body h2 { margin-top: 56px; color: var(--ink); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.45; scroll-margin-top: calc(var(--head) + 24px); }
.policy-body > p:first-child { color: var(--ink); font-size: 17px; }
.policy-body p, .policy-body ul, .policy-body .v2-table { margin-top: 14px; }
.policy-body h2 + p, .policy-body h2 + ul, .policy-body h2 + .v2-table { margin-top: 16px; }
.policy-body ul { padding-left: 1.3em; list-style: disc; }
.policy-body li + li { margin-top: 4px; }
.policy-body strong { color: var(--ink); font-weight: 700; }
.policy-body a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.v2-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.v2-table table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.6; }
.v2-table th, .v2-table td { padding: 12px 14px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.v2-table thead th { border-top: 2px solid var(--navy); background: var(--stone); color: var(--ink); font-weight: 700; white-space: nowrap; }

@media (max-width: 1199px) {
    .ph-t { font-size: 44px; }
    .svc-lead { font-size: 21px; }
}
@media (max-width: 1023px) {
    .ph { min-height: 300px; padding: 56px 0; }
    .ph-has-tabs { min-height: 370px; padding-bottom: 108px; }
    .ph-tabs .wrap { gap: 28px; }
    .svc-row > .wrap { padding: 72px 0; }
    .rc-sec { padding-bottom: 88px; }
    .rc-sec > .wrap { padding-top: 72px; }
    .svc-tabs .wrap { gap: 28px; }
    .svc-row-h { font-size: 28px; }
    .ph-t { font-size: 40px; }
    .svc-side.sh { margin-bottom: 0; }
    .lw-side { display: none; }
    .lw-inline { display: block; max-width: 520px; margin-top: 56px; }
    .pf .who-img { width: 120px; height: 120px; }
    .sub-first { padding-top: 64px; }
    .svc-toc {
        display: flex; gap: 4px 24px; margin: 0 -24px 40px; padding: 0 24px; overflow-x: auto; border-top: 0; border-bottom: 1px solid var(--rule);
        scrollbar-width: none;
    }
    .svc-toc::-webkit-scrollbar { display: none; }
    .svc-toc a { flex: 0 0 auto; padding: 12px 0 13px; border-bottom: 2px solid transparent; }
    .svc-toc .k { display: none; }
    .svc-toc b { font-size: 16px; }
    .svc-toc a[aria-current="page"] { padding-left: 0; box-shadow: none; border-bottom-color: var(--navy); }
    .svc-more { display: block; }
    .cta-sub { padding: 88px 0; }
    .cta-sub .sh { margin-bottom: 32px; }
    .policy-toc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
    .board-sec { padding: 56px 0 88px; }
}
@media (max-width: 600px) {
    .ph { min-height: 240px; padding: 44px 0; background-position: 64% center; }
    .ph-has-tabs { min-height: 310px; padding-bottom: 92px; }
    .ph-tabs .wrap { gap: 22px; }
    .ph-tabs a { padding: 15px 0 12px; font-size: 15px; }
    .svc-row > .wrap { padding: 52px 0; }
    .rc-sec { padding-bottom: 64px; }
    .rc-sec > .wrap { padding-top: 52px; }
    .svc-tabs .wrap { gap: 22px; }
    .svc-tabs a { padding: 16px 0 13px; font-size: 15px; }
    .svc-row-h { font-size: 23px; }
    .sh-t::before { width: 24px; margin-bottom: 16px; }
    .svc-text p { font-size: 15.5px; line-height: 1.9; }
    .ph-crumb { margin-bottom: 14px; font-size: 13px; gap: 4px 8px; }
    .svc-lead { margin-bottom: 40px; padding-bottom: 32px; font-size: 18.5px; line-height: 1.7; }
    .svc-rc { margin-top: 56px; }
    .rc b { font-size: 18px; }
    .pf .who-img { width: 96px; height: 96px; }
    .ph::before { background: linear-gradient(90deg, rgba(11, 21, 44, 0.93) 0%, rgba(15, 28, 58, 0.86) 55%, rgba(22, 38, 74, 0.52) 100%); }
    .sub-first { padding-top: 44px; }
    .ph-k { margin-bottom: 8px; font-size: 14px; }
    .ph-t { font-size: 30px; line-height: 1.32; }
    .ph-d { margin-top: 12px; font-size: 15.5px; }
    .ph-d span { display: block; }
    .who-creds { margin-top: 20px; padding-top: 18px; }
    .cv { margin-top: 44px; }
    .cv-row { grid-template-columns: minmax(0, 1fr); row-gap: 6px; padding: 18px 0 19px; }
    .cv-list li { grid-template-columns: 52px minmax(0, 1fr); column-gap: 12px; font-size: 15px; line-height: 1.75; }
    .svc-toc { margin: 0 -20px 32px; padding: 0 20px; gap: 4px 20px; }
    .svc-block + .svc-block { margin-top: 44px; }
    .svc-h { font-size: 22px; }
    .svc-block p { font-size: 15.5px; line-height: 1.9; }
    .cta-sub { padding: 64px 0; }
    .policy-toc { grid-template-columns: minmax(0, 1fr); }
    .policy-body { font-size: 15.5px; }
    .policy-body h2 { margin-top: 40px; font-size: 19px; }
    .v2-table th, .v2-table td { padding: 9px 10px; font-size: 14px; }
    .board-sec { padding: 40px 0 64px; }
    .v2-board-head { display: none; }
    .v2-board-list { border-top: 2px solid var(--navy); }
    .v2-post-head { grid-template-columns: minmax(0, 1fr) 16px; grid-template-areas: "title icon" "date icon"; row-gap: 6px; column-gap: 14px; padding: 20px 2px; }
    .v2-post-title { grid-area: title; font-size: 16px; }
    .v2-post-date { grid-area: date; font-size: 13.5px; }
    .v2-post-icon { grid-area: icon; }
    .v2-post-content { font-size: 15.5px; line-height: 1.8; }
    .v2-post-content :where(h1, h2, h3, h4) { font-size: 18px !important; }
    .v2-board-write, .v2-post-admin { padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .ph > .wrap { animation: none; }
    .hero-in { animation: none; }
    *, *::before, *::after { transition: none !important; }
}

/* =====================================================================
   Sub pages, 11-05 evening ("A 기준으로 더 고급스럽고 세련되게"; 21:10 "조금 어둡다, 메인이랑 맞게"; 21:33 home's attorney band stays as it is):
   same structure as before, a stronger type scale, a lighter page head like the home's first screen,
   recent cases on a beige band. Only sub-page classes are touched here, so the home is unchanged.
   ===================================================================== */

/* page head: taller band, the photo in its own colours under a lighter navy shade, the title low on the band */
.ph { align-items: stretch; min-height: 440px; padding: 0; background-color: #16264a; }
.ph::before { background: linear-gradient(90deg, rgba(9, 18, 40, 0.8) 0%, rgba(9, 18, 40, 0.6) 50%, rgba(9, 18, 40, 0.36) 100%); }
.ph > .wrap { display: flex; flex-direction: column; padding: 44px 0 76px; }
.ph-crumb { margin-bottom: auto; padding-bottom: 48px; font-weight: 500; }
.ph-t { font-size: 48px; font-weight: 700; letter-spacing: -0.04em; line-height: 1.25; text-wrap: balance; }
/* the same accent line as the section headings, in the light blue used on navy */
.ph-t::before { content: ""; display: block; width: 28px; height: 3px; margin-bottom: 22px; border-radius: 2px; background: #8fb0ff; }
.ph-d { margin-top: 20px; color: rgba(255, 255, 255, 0.72); font-size: 18px; letter-spacing: -0.01em; }

/* practice tabs: four equal cells across the content line, short dividers, the current one underlined in navy */
.svc-tabs .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; overflow: visible; }
.svc-tabs a {
    position: relative; display: flex; align-items: center; justify-content: center; min-height: 76px; padding: 0 12px;
    color: #707685; font-size: 17px; font-weight: 600; letter-spacing: -0.02em;
}
.svc-tabs a + a::before { content: ""; position: absolute; left: 0; top: 26px; bottom: 26px; width: 1px; background: #e3e1db; }
.svc-tabs a[aria-current="page"] { color: var(--navy); }
.svc-tabs a:hover { color: var(--ink); }

/* practice sections: navy headings, darker text, the page's first paragraph set as the lead */
.svc-row.sub-first { padding-top: 0; }
.svc-row > .wrap { padding: 104px 0; }
.svc-row + .svc-row > .wrap { border-top-color: #e3e1db; }
.svc-row-h { color: var(--navy); font-size: 34px; font-weight: 700; letter-spacing: -0.045em; line-height: 1.4; text-wrap: balance; }
.svc-text p { max-width: 720px; color: #353c4b; font-size: 18.5px; line-height: 1.88; letter-spacing: -0.01em; }
.sub-first .svc-text p:first-child { max-width: 760px; color: #1f2633; font-size: 20px; font-weight: 400; letter-spacing: -0.02em; line-height: 1.8; }
.sub-first .svc-text p:first-child + p { margin-top: 28px; }
@media (min-width: 1024px) {
    /* the first line of the text sits on the baseline of the heading's first line */
    .svc-text { padding-top: 36px; }
    .sub-first .svc-text { padding-top: 35px; }
    /* sections after the first: one step down from the first heading */
    .svc-row + .svc-row > .wrap { padding: 88px 0 96px; }
    .svc-row + .svc-row .svc-row-h { font-size: 28px; line-height: 1.45; }
    .svc-row + .svc-row .svc-text { padding-top: 31px; }
    .rc-sec .sh-t { font-size: 28px; line-height: 1.45; }
}

/* related cases (21:10 "배경을 베이지 톤으로", "남색 배너가 너무 횡하다"): a beige band on the practice pages only,
   with recent cases from the case site in the home's case-list layout */
/* 22:59 "베이지 배경은 관련 해결 사례로": the lower band (related cases) in beige, the contact card on the same beige */
.rc-sec { padding: 0; background: #f4efe6; }
.rc-sec > .wrap { padding: 104px 0 112px; border-top: 0; }
.rc-sec + .cta-sub { background: #f4efe6; }
.rc-sec .sh-t, .cta-sub .sh-t { color: var(--navy); font-weight: 700; letter-spacing: -0.045em; }
.rc-all { display: grid; justify-items: start; gap: 12px; margin-top: 30px; }
.rc-all a { display: inline-flex; align-items: center; gap: 6px; color: var(--navy); font-size: 15px; font-weight: 700; line-height: 1.5; transition: color 0.15s; }
.rc-all svg { flex: 0 0 auto; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rc-all a:hover { color: var(--blue); }
.rc-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 2px solid var(--navy); }
.rc-list > li { display: flex; border-bottom: 1px solid #dcd5c8; }
.rc-list > li:nth-child(even) { border-left: 1px solid #dcd5c8; }
.rc-case { display: flex; flex-direction: column; width: 100%; padding: 30px 32px 30px 0; color: var(--ink); }
.rc-list > li:nth-child(even) .rc-case { padding: 30px 0 30px 32px; }
.rc-cat { margin-bottom: 10px; color: var(--blue); font-size: 13.5px; font-weight: 700; line-height: 1.5; }
.rc-res { color: var(--navy); font-size: 21px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.45; }
.rc-res i { color: var(--blue); font-style: normal; }
.rc-q { margin-top: 10px; color: var(--text); font-size: 15.5px; line-height: 1.7; }
.rc-more { margin-top: auto; padding-top: 20px; color: var(--muted); font-size: 14px; font-weight: 600; line-height: 1.5; transition: color 0.15s; }
.rc-case:hover .rc-res { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.rc-case:hover .rc-more { color: var(--navy); }
.rc-case:focus-visible { outline-offset: 4px; }

/* closing strip: stone on its own (attorney page), white right after the beige related-cases band */
.cta-sub { padding: 112px 0; }

@media (max-width: 1199px) {
    .ph-t { font-size: 44px; }
}
@media (max-width: 1023px) {
    .ph { min-height: 340px; }
    .ph > .wrap { padding: 32px 0 56px; }
    .ph-crumb { padding-bottom: 36px; }
    .ph-t { font-size: 38px; }
    .svc-row > .wrap { padding: 80px 0; }
    .svc-row-h { font-size: 30px; }
    .sub-first .svc-text p:first-child { font-size: 19px; }
    .rc-sec > .wrap { padding: 80px 0 88px; }
    .rc-all { grid-auto-flow: column; justify-content: start; gap: 12px 28px; margin-top: 22px; }
    .cta-sub { padding: 88px 0; }
}
@media (max-width: 767px) {
    .svc-tabs .wrap { display: flex; gap: 26px; overflow-x: auto; }
    .svc-tabs a { flex: 0 0 auto; min-height: 0; padding: 18px 0 15px; justify-content: flex-start; }
    .svc-tabs a + a::before { display: none; }
    .rc-list { grid-template-columns: minmax(0, 1fr); }
    .rc-list > li:nth-child(even) { border-left: 0; }
    .rc-case, .rc-list > li:nth-child(even) .rc-case { padding: 24px 0; }
    .rc-all { grid-auto-flow: row; }
}
@media (max-width: 600px) {
    .ph { min-height: 280px; }
    .ph > .wrap { padding: 24px 0 40px; }
    .ph-crumb { padding-bottom: 28px; }
    .ph-t { font-size: 29px; line-height: 1.3; }
    .ph-t::before { width: 24px; margin-bottom: 16px; }
    .ph-d { margin-top: 14px; font-size: 15.5px; }
    .svc-tabs a { font-size: 15.5px; }
    .svc-row > .wrap { padding: 56px 0; }
    .svc-row-h { font-size: 24px; }
    .svc-text p { font-size: 17px; line-height: 1.85; }
    .sub-first .svc-text p:first-child { font-size: 18px; line-height: 1.75; }
    .sub-first .svc-text p:first-child + p { margin-top: 20px; }
    .rc-sec > .wrap { padding: 56px 0 64px; }
    .rc-res { font-size: 19px; }
    .rc-q { font-size: 15px; }
    .cta-sub { padding: 64px 0; }
}

/* 11-05 22:46: other practice areas on every screen, and the contact strip as a navy card.
   22:57 order: the page's sections, other areas, related cases, contact card; 22:59 the other areas on white with a line above */
.svc-more { display: block; padding: 0; background: #ffffff; }
.svc-more > .wrap { padding: 104px 0; border-top: 1px solid #e3e1db; }
.svc-more .sh-t { color: var(--navy); font-weight: 700; letter-spacing: -0.045em; }
.svc-more .idx-name { font-size: 28px; font-weight: 700; letter-spacing: -0.04em; }
.svc-more .idx-row { padding: 26px 6px 28px 0; }
.cta-sub { padding: 0 0 112px; background: #ffffff; }
.cta-sub > .wrap {
    padding: 72px 80px; border-radius: 8px; color: #ffffff;
    background: linear-gradient(115deg, #16264a 0%, #1b3060 100%);
}
.cta-sub .sh-t { color: #ffffff; }
.cta-sub .sh-t::before { background: #8fb0ff; }
.cta-sub .sh-d { color: rgba(255, 255, 255, 0.74); }
.cta-sub a:focus-visible { outline-color: #ffffff; }
@media (min-width: 1024px) {
    .svc-more .sh-t, .cta-sub .sh-t { font-size: 28px; line-height: 1.45; }
    .svc-more .idx-row { grid-template-columns: minmax(0, 1fr) 236px 28px; }
}
@media (max-width: 1023px) {
    .svc-more > .wrap { padding: 80px 0; }
    .cta-sub { padding: 0 0 88px; }
    .cta-sub > .wrap { padding: 56px 48px; }
}
@media (max-width: 600px) {
    .svc-more > .wrap { padding: 56px 0; }
    .svc-more .idx-name { font-size: 23px; }
    .cta-sub { padding: 0 0 56px; }
    .cta-sub > .wrap { width: calc(100% - 32px); padding: 40px 24px; border-radius: 6px; }
}

/* 11-06 00:10 "pc는 c판 모바일은 b판": on PC (1024px and up) the title between the two releases on a slightly lower band,
   and the first paragraph set like the rest of the text; tablets and phones keep the 23:13 release */
@media (min-width: 1024px) {
    .ph { min-height: 400px; }
    .ph > .wrap { padding: 40px 0 68px; }
    .ph-t { font-size: 52px; }
    .sub-first .svc-text { padding-top: 36px; }
    .sub-first .svc-text p:first-child { max-width: 720px; color: #353c4b; font-size: 18.5px; letter-spacing: -0.01em; line-height: 1.88; }
    .sub-first .svc-text p:first-child + p { margin-top: 18px; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
    .ph-t { font-size: 46px; }
}

/* contact card. 00:37 "너무 심심하지 않나" -> 00:42 2안 (three ways to reach the office, the phone one in white) -> 00:50 two lines a tile
   -> 01:00 "전화번호는 왜 두개가 사이즈가 다른거야": back to 2안, every number the same size, refined:
   the line under the title, icons in round chips, thinner tile edges, nested corners (card 10px, tiles 6px), even figures */
.cta-sub > .wrap {
    padding: 64px 72px 72px; border-radius: 10px;
    background:
        radial-gradient(circle at 90% -30%, rgba(143, 176, 255, 0.2) 0%, rgba(143, 176, 255, 0) 55%),
        linear-gradient(115deg, #16264a 0%, #1b3060 100%);
}
.cta-sub .sh { position: static; display: block; margin: 0 0 36px; }
.cta-sub .sh-d { max-width: none; margin-top: 14px; color: rgba(255, 255, 255, 0.72); font-size: 16px; line-height: 1.7; }
.cta-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cta-ways a {
    display: grid; grid-template-columns: 44px minmax(0, 1fr) 20px; column-gap: 16px; align-items: center; height: 100%;
    padding: 22px 24px 22px 22px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 6px;
    background: rgba(255, 255, 255, 0.04); color: #ffffff; transition: background-color 0.15s, border-color 0.15s;
}
.cta-ways a:hover { border-color: rgba(255, 255, 255, 0.26); background: rgba(255, 255, 255, 0.08); }
.cta-ways a > svg:not(.cta-go) {
    grid-column: 1; grid-row: 1 / 3; width: 44px; height: 44px; padding: 11px; border-radius: 50%;
    background: rgba(143, 176, 255, 0.14); color: #a9c0ff;
}
.cta-ways span { grid-column: 2; grid-row: 1; color: rgba(255, 255, 255, 0.62); font-size: 13.5px; font-weight: 600; letter-spacing: 0.01em; line-height: 1.4; }
.cta-ways strong {
    grid-column: 2; grid-row: 2; margin-top: 3px; font-size: 23px; font-weight: 700; letter-spacing: -0.005em; line-height: 1.3;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cta-ways .cta-go {
    grid-column: 3; grid-row: 1 / 3; width: 20px; height: 20px;
    fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
    color: rgba(255, 255, 255, 0.45); transition: transform 0.15s, color 0.15s;
}
.cta-ways a:hover .cta-go { color: #ffffff; transform: translateX(3px); }
.cta-ways .main a { border-color: #ffffff; background: #ffffff; color: var(--navy); }
.cta-ways .main a > svg:not(.cta-go) { background: #eef2fb; color: var(--blue); }
.cta-ways .main span { color: var(--muted); }
.cta-ways .main .cta-go, .cta-ways .main a:hover .cta-go { color: var(--navy); }
.cta-ways .main a:hover { border-color: #eef2fb; background: #f3f6fc; }
.cta-sub a:focus-visible { outline-color: #ffffff; outline-offset: 3px; }
@media (min-width: 1024px) and (max-width: 1199px) {
    .cta-sub > .wrap { padding: 56px 48px 60px; }
    .cta-ways a { grid-template-columns: 40px minmax(0, 1fr) 18px; column-gap: 14px; padding: 20px; }
    .cta-ways a > svg:not(.cta-go) { width: 40px; height: 40px; padding: 10px; }
    .cta-ways strong { font-size: 21px; }
}
@media (max-width: 1023px) {
    .cta-sub > .wrap { padding: 48px 40px 44px; }
    .cta-sub .sh { margin-bottom: 28px; }
    .cta-ways { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .cta-ways strong { font-size: 22px; }
}
@media (max-width: 600px) {
    .cta-sub > .wrap { padding: 36px 20px 22px; border-radius: 8px; }
    .cta-ways a { grid-template-columns: 40px minmax(0, 1fr) 18px; column-gap: 14px; padding: 16px 18px 16px 16px; }
    .cta-ways a > svg:not(.cta-go) { width: 40px; height: 40px; padding: 10px; }
    .cta-ways strong { font-size: 21px; }
}