/* 특허법인 다옴 - site.css
   DAOM IP Design System(조직 기본 디자인 시스템) 적용.
   - 토큰: 디자인 시스템 tokens.css 값을 그대로 옮김 (오렌지 #E97132, 따뜻한 잉크 램프, Pretendard 단일 서체)
   - 구조: 왼쪽 정렬 편집형, 1px 헤어라인 격자(lattice), 섹션 96px, 컨테이너 1240px
   - 장식: 히어로 모서리의 '다옴' 고스트 워드마크 하나뿐 (그라데이션·패턴·무한 애니메이션 없음) */
:root {
  /* Brand orange */
  --orange-50: #fef4ee; --orange-100: #fde3d1; --orange-200: #fac6a3; --orange-300: #f5a270; --orange-400: #ef8449;
  --orange-500: #e97132; --orange-600: #d25a20; --orange-700: #a8451a; --orange-800: #7a3214; --orange-900: #4d1f0c;
  /* Warm ink */
  --ink-0: #ffffff; --ink-50: #fafaf8; --ink-100: #f4f3ef; --ink-200: #e7e5de; --ink-300: #d2cfc5; --ink-400: #a8a499;
  --ink-500: #7a776d; --ink-600: #56534b; --ink-700: #3a3833; --ink-800: #24231f; --ink-900: #141311;
  /* Status */
  --success: #2f8f5c; --warning: #c98a1a; --danger: #c0392b; --info: #2f6bb3;
  /* Semantic */
  --fg-1: var(--ink-900); --fg-2: var(--ink-700); --fg-3: var(--ink-500); --fg-4: var(--ink-400);
  --fg-accent: var(--orange-600); --fg-on-accent: var(--ink-0); --fg-inverse: var(--ink-0);
  --bg-1: var(--ink-0); --bg-2: var(--ink-50); --bg-3: var(--ink-100);
  --bg-accent-soft: var(--orange-50); --bg-accent: var(--orange-500); --bg-inverse: var(--ink-900);
  --line-1: var(--ink-200); --line-2: var(--ink-300); --line-strong: var(--ink-700); --line-accent: var(--orange-500);
  --focus-ring: #e9713266; --selection-bg: var(--orange-100); --selection-fg: var(--ink-900);
  --shadow-xs: 0 1px 2px rgba(36, 35, 31, 0.06);
  --shadow-sm: 0 2px 6px rgba(36, 35, 31, 0.06), 0 1px 2px rgba(36, 35, 31, 0.04);
  --shadow-md: 0 6px 16px rgba(36, 35, 31, 0.08), 0 2px 4px rgba(36, 35, 31, 0.04);
  --shadow-lg: 0 16px 32px rgba(36, 35, 31, 0.10), 0 4px 8px rgba(36, 35, 31, 0.04);
  /* Spacing · layout */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
  --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --sp-32: 128px;
  --container-max: 1240px; --container-gutter: 24px; --grid-gap: 24px;
  --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 16px; --radius-pill: 999px;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 360ms;
  /* Type */
  --tracking-tight: -0.02em; --tracking-normal: -0.01em; --tracking-wide: 0.02em; --tracking-caps: 0.08em;
  --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-16: 16px; --fs-18: 18px; --fs-20: 20px; --fs-24: 24px;
  --fs-28: 28px; --fs-32: 32px; --fs-40: 40px; --fs-48: 48px; --fs-56: 56px; --fs-72: 72px; --fs-96: 96px;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --fw-black: 900;
  --lh-tight: 1.15; --lh-snug: 1.3; --lh-normal: 1.5; --lh-relaxed: 1.7;
  /* 디자인 시스템과 같은 Pretendard. 속도를 위해 한글 분할(dynamic subset) 가변 글꼴을 사이트에 포함 */
  --font-sans: "Pretendard Variable", "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --header-h: 64px;
  --gut-l: max(var(--container-gutter), env(safe-area-inset-left, 0px));
  --gut-r: max(var(--container-gutter), env(safe-area-inset-right, 0px));
  --sec: var(--sp-24);
  color-scheme: light;
}
@media (min-width: 1024px) { :root { --header-h: 72px; } }
@media (max-width: 639px) { :root { --container-gutter: 20px; --sec: 72px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg-1); color: var(--fg-2);
  font-family: var(--font-sans); font-size: var(--fs-16); line-height: var(--lh-relaxed);
  word-break: keep-all; overflow-wrap: break-word; -webkit-font-smoothing: antialiased;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--bg-1); }
::selection { background: var(--selection-bg); color: var(--selection-fg); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5 { margin: 0; color: var(--fg-1); text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
address { font-style: normal; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: calc(var(--header-h) + 72px); }
:focus-visible { outline: 2px solid var(--orange-500); outline-offset: 3px; border-radius: 2px; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.container { max-width: calc(var(--container-max) + var(--container-gutter) * 2); margin-inline: auto; padding-left: var(--gut-l); padding-right: var(--gut-r); }
.skip { position: absolute; left: 16px; top: -120px; z-index: 100; background: var(--ink-900); color: var(--ink-0); padding: 10px 16px; border-radius: var(--radius-md); font-weight: 600; }
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + 12px); }
main:focus { outline: none; }

/* ---------- 디자인 시스템 타입 헬퍼 ---------- */
.d-eyebrow { display: inline-block; font-weight: var(--fw-semibold); font-size: var(--fs-13); line-height: 1.2; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-accent); }
.d-eyebrow.on-dark { color: var(--orange-400); }
.d-caps { font-size: var(--fs-12); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-3); }
.d-num { font-variant-numeric: tabular-nums; letter-spacing: 0; }
.d-link { color: var(--fg-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--dur-fast) var(--ease-standard); }
.d-link:hover { color: var(--orange-700); }
.ic { flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Button (dui-btn) ---------- */
.dui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: var(--radius-md); min-height: 44px;
  font-weight: var(--fw-semibold); font-size: var(--fs-14); letter-spacing: var(--tracking-normal); line-height: 1;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.dui-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.dui-btn--primary { background: var(--orange-500); color: var(--fg-on-accent); }
.dui-btn--primary:hover { background: var(--orange-600); }
.dui-btn--secondary { background: var(--ink-0); color: var(--fg-1); border-color: var(--line-2); }
.dui-btn--secondary:hover { border-color: var(--ink-700); background: var(--ink-50); }
.dui-btn--ghost { background: transparent; color: var(--fg-1); padding: 8px 0; min-height: 0; }
.dui-btn--ghost .dui-btn__u { border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.dui-btn--ghost:hover { color: var(--orange-700); }
.dui-btn--inverse { background: var(--ink-0); color: var(--ink-900); }
.dui-btn--inverse:hover { background: var(--ink-100); }
.dui-btn--sm { padding: 8px 14px; font-size: var(--fs-13); min-height: 36px; }
.dui-btn--lg { padding: 15px 26px; font-size: var(--fs-16); min-height: 50px; }
.dui-btn--block { width: 100%; }
.dui-btn .ic { width: 16px; height: 16px; }

/* ---------- Badge ---------- */
.dui-badge { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-semibold); font-size: var(--fs-12); line-height: 1; letter-spacing: var(--tracking-wide); padding: 6px 10px; border-radius: var(--radius-pill); white-space: nowrap; }
.dui-badge--neutral { background: var(--bg-3); color: var(--fg-2); }
.dui-badge--accent { background: var(--bg-accent-soft); color: var(--orange-700); }
.dui-badge--outline { background: transparent; color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.badges { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Card ---------- */
.dui-card { background: var(--bg-1); border: 1px solid var(--line-1); border-radius: var(--radius-lg); padding: var(--sp-6); transition: box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard); min-width: 0; }
.dui-card--accent { border-left: 3px solid var(--orange-500); }

/* ---------- Field · Inputs ---------- */
.dui-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dui-field__label { font-size: var(--fs-12); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-2); }
.dui-field__hint { font-size: var(--fs-12); color: var(--fg-3); }
.dui-input, .dui-select, .dui-textarea {
  font-size: 16px; color: var(--fg-1); padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  background: var(--ink-0); outline: none; width: 100%; line-height: 1.5;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.dui-input::placeholder, .dui-textarea::placeholder { color: var(--fg-4); }
.dui-input:focus, .dui-select:focus, .dui-textarea:focus { border-color: var(--orange-500); box-shadow: 0 0 0 3px var(--focus-ring); }
.dui-input[aria-invalid="true"], .dui-textarea[aria-invalid="true"] { border-color: var(--danger); }
.dui-textarea { min-height: 160px; resize: vertical; line-height: var(--lh-relaxed); }
.dui-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237A776D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 38px; }

/* ---------- Brand wordmark (다옴 + 오렌지 점) ---------- */
.brand { display: inline-flex; align-items: baseline; gap: 10px; flex: none; }
.brand-word { display: inline-flex; align-items: flex-start; font-size: 24px; font-weight: var(--fw-extrabold); letter-spacing: -0.03em; line-height: 1; color: var(--fg-1); }
.brand-dot { width: 6.5px; height: 6.5px; border-radius: 50%; background: var(--orange-500); margin: 1px 0 0 2px; flex: none; }
.brand-en { font-size: 12px; font-weight: var(--fw-semibold); letter-spacing: 0.16em; color: var(--fg-3); white-space: nowrap; }
.brand--inverse .brand-word { color: var(--ink-0); }
.brand--inverse .brand-en { color: var(--ink-400); }
/* 영문 페이지 워드마크 (DAOM.): 라틴 대문자는 자간을 덜 좁힌다 */
.brand--latin .brand-word { letter-spacing: -0.015em; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line-1); }
.bar { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.gnb { display: none; }
@media (min-width: 1024px) {
  .gnb { display: block; margin-left: auto; }
  .gnb > ul { display: flex; gap: 6px; }
  .gnb li { position: relative; }
  .gnb > ul > li > a { position: relative; display: block; padding: 10px 11px; font-size: var(--fs-14); font-weight: var(--fw-medium); color: var(--fg-2); transition: color var(--dur-fast) var(--ease-standard); }
  .gnb > ul > li > a:hover, .gnb > ul > li:focus-within > a { color: var(--orange-600); }
  .gnb > ul > li > a[aria-current="page"] { color: var(--fg-1); font-weight: var(--fw-semibold); }
  .gnb > ul > li > a[aria-current="page"]::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: -16px; height: 2px; background: var(--orange-500); }
  .gnb .sub { position: absolute; top: calc(100% + 12px); left: 0; min-width: 168px; padding: 6px; background: var(--bg-1); border: 1px solid var(--line-1); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard), visibility var(--dur-base); }
  .gnb .sub::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
  .gnb .has-sub:hover .sub, .gnb .has-sub:focus-within .sub { opacity: 1; visibility: visible; transform: none; }
  .gnb .sub a { display: block; padding: 9px 12px; font-size: var(--fs-14); color: var(--fg-2); border-radius: var(--radius-sm); }
  .gnb .sub a:hover { background: var(--ink-50); color: var(--fg-1); }
}
.tools { display: flex; align-items: center; gap: 14px; margin-left: auto; }
@media (min-width: 1024px) { .tools { margin-left: 18px; } }
.lang { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-size: var(--fs-12); font-weight: var(--fw-semibold); letter-spacing: 0.1em; color: var(--fg-3); }
.lang b { color: var(--fg-1); font-weight: var(--fw-bold); }
.lang:hover span { color: var(--orange-600); }
.header-cta { display: none; }
@media (min-width: 640px) { .header-cta { display: inline-flex; } }
.menu-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; border: 0; background: none; cursor: pointer; color: var(--fg-1); border-radius: var(--radius-md); }
.menu-btn .ic { width: 24px; height: 24px; grid-area: 1 / 1; }
.menu-btn .ic:last-child { display: none; }
.menu-btn[aria-expanded="true"] .ic:first-of-type { display: none; }
.menu-btn[aria-expanded="true"] .ic:last-child { display: block; }
@media (min-width: 1024px) { .menu-btn { display: none; } }
.mnav { position: fixed; left: 0; right: 0; bottom: 0; top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); z-index: 49; background: var(--bg-1); overflow-y: auto; padding-block: 8px calc(32px + env(safe-area-inset-bottom, 0px)); animation: dui-fade var(--dur-base) var(--ease-standard); }
@media (min-width: 1024px) { .mnav { display: none !important; } }
.m-list > li { border-bottom: 1px solid var(--line-1); padding-block: 16px; }
.m-main { display: block; font-size: 22px; font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.m-main[aria-current="page"] { color: var(--orange-600); }
.m-sub { display: flex; gap: 20px; margin-top: 8px; }
.m-sub a { font-size: var(--fs-14); font-weight: var(--fw-medium); color: var(--fg-2); padding-block: 4px; }
.m-foot { display: grid; gap: 10px; margin-top: 24px; }
body.menu-open { overflow: hidden; }

/* ---------- 공통 섹션 ---------- */
.section { padding-block: var(--sec); border-bottom: 1px solid var(--line-1); }
.band { background: var(--bg-2); }
.sec-head { max-width: 780px; margin-bottom: var(--sp-12); }
.sec-head h2 { margin-top: 14px; font-size: clamp(28px, 2vw + 16px, var(--fs-40)); font-weight: var(--fw-bold); letter-spacing: -0.03em; line-height: 1.18; }
.sec-head .sub { margin-top: 14px; font-size: var(--fs-16); line-height: var(--lh-relaxed); color: var(--fg-2); max-width: 620px; }
.head-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 20px; }
.head-row h2, .head-row h3 { font-size: clamp(22px, 1vw + 16px, 26px); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); }
.head-row + .lattice, .block + .head-row { margin-top: 0; }
.block { margin-top: var(--sp-16); }
.more-row { margin-top: var(--sp-8); }

/* 1px 헤어라인 격자 */
.lattice { display: grid; gap: 1px; background: var(--line-1); border: 1px solid var(--line-1); border-radius: var(--radius-md); overflow: hidden; }
.lattice > * { background: var(--bg-1); min-width: 0; }
.cell { padding: 28px 24px; display: flex; flex-direction: column; gap: 14px; }
.cell h3, .cell h4 { font-size: var(--fs-18); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); line-height: var(--lh-snug); }
.cell ul { display: flex; flex-direction: column; gap: 8px; }
.cell li { font-size: var(--fs-14); color: var(--fg-2); line-height: var(--lh-normal); }
.l-2, .l-3 { grid-template-columns: 1fr; }
.l-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 639px) { .l-4 .cell { padding: 20px 16px; } .l-4 .cell h3, .l-4 .cell h4 { font-size: var(--fs-16); } .l-4 .cell li { font-size: var(--fs-13); } }
@media (min-width: 640px) { .l-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .l-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .l-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--bg-2); border-bottom: 1px solid var(--line-1); padding-block: clamp(64px, 8vw, 100px) clamp(72px, 9vw, 108px); }
.hero .container { position: relative; z-index: 1; }
.hero h1 { margin: 22px 0 18px; max-width: 900px; font-size: clamp(38px, 4.6vw + 14px, 84px); font-weight: var(--fw-extrabold); line-height: 1.04; letter-spacing: -0.035em; }
html[lang="en"] .hero h1 { font-size: clamp(36px, 3.6vw + 14px, 72px); }
.hero h1 span { display: block; }
.hero h1 em { font-style: normal; color: var(--orange-500); }
.hero .slogan { font-size: 15px; font-weight: var(--fw-medium); letter-spacing: var(--tracking-wide); color: var(--fg-3); margin-bottom: 28px; }
.hero .lede { max-width: 640px; font-size: clamp(16px, 0.4vw + 15px, 18px); line-height: var(--lh-relaxed); color: var(--fg-2); text-wrap: pretty; }
.hero .badges { margin-top: 24px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 36px; }
.ghost-mark { position: absolute; right: -0.12em; bottom: -0.16em; z-index: 0; font-size: clamp(240px, 38vw, 520px); font-weight: var(--fw-black); letter-spacing: -0.04em; line-height: 0.8; color: rgba(36, 35, 31, 0.035); pointer-events: none; user-select: none; white-space: nowrap; }
.ghost-mark--latin { font-size: clamp(170px, 27vw, 380px); letter-spacing: -0.03em; }

/* ---------- 핵심 분야 ---------- */
.focus-cell { padding: 32px 28px; gap: 12px; }
.focus-cell .d-caps { color: var(--fg-3); }
.focus-cell h3, .focus-cell h4 { font-size: clamp(22px, 0.6vw + 18px, 26px); letter-spacing: -0.02em; }
.focus-cell .sum { font-size: var(--fs-14); line-height: var(--lh-relaxed); color: var(--fg-2); }
.focus-cell .items { margin-top: 4px; gap: 9px; }
.focus-cell .items li { position: relative; padding-left: 22px; font-size: var(--fs-14); }
.focus-cell .items li .ic { position: absolute; left: 0; top: 2px; width: 15px; height: 15px; color: var(--orange-500); }
.cell .badges { flex-direction: row; flex-wrap: wrap; gap: 6px; }
.cell .badges li { font-size: var(--fs-12); white-space: normal; line-height: 1.3; }
.lead-line { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line-1); font-size: var(--fs-13); color: var(--fg-3); }
.lead-line b { font-weight: var(--fw-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; font-size: var(--fs-12); margin-right: 6px; }
.lead-line a { color: var(--fg-accent); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.lead-line a:hover { color: var(--orange-700); }
.lead-line.standalone { margin-top: var(--sp-8); padding-top: 0; border-top: 0; }

/* ---------- 다옴 이야기 ---------- */
.story-in { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .story-in { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 64px; } }
.story-photo { border-radius: var(--radius-lg); overflow: hidden; background: var(--ink-100); border: 1px solid var(--line-1); }
.story-photo img { width: 100%; }
.story-copy h2 { margin-top: 14px; font-size: clamp(28px, 2vw + 16px, var(--fs-40)); font-weight: var(--fw-bold); letter-spacing: -0.03em; line-height: 1.18; }
.story-copy .txt { margin-top: 18px; font-size: var(--fs-16); color: var(--fg-2); }
.quote { margin: 24px 0 0; padding: 4px 0 4px 18px; border-left: 2px solid var(--line-accent); }
.quote p { margin: 0; font-size: var(--fs-18); font-weight: var(--fw-semibold); color: var(--fg-1); line-height: 1.6; }

/* ---------- 구성원 카드 (작은 사진 + 주요 이력) ---------- */
.pcard { display: flex; flex-direction: column; gap: 18px; padding: 26px 24px 24px; }
.pc-top { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; align-items: center; }
.pc-top img { width: 88px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-sm); background: var(--ink-50); }
.pc-top .org { font-size: var(--fs-12); color: var(--fg-3); }
.pc-top h3 { margin: 4px 0 6px; font-size: 22px; font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); line-height: 1.2; }
.pc-top h3 small { font-size: var(--fs-14); font-weight: var(--fw-medium); color: var(--fg-2); letter-spacing: 0; }
.pc-top .fx { font-size: var(--fs-13); line-height: 1.5; color: var(--fg-2); }
.pc-hl { padding-top: 16px; border-top: 1px solid var(--line-1); }
.pc-hl .d-caps { margin-bottom: 10px; }
.pc-hl ul { display: flex; flex-direction: column; gap: 8px; }
.pc-hl li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 4px; font-size: var(--fs-14); line-height: 1.5; color: var(--fg-2); }
.pc-hl li .ic { margin-top: 3px; color: var(--orange-500); }
.pcard .go { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding-top: 4px; font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--fg-accent); }
.pcard .go:hover { color: var(--orange-700); text-decoration: underline; text-underline-offset: 3px; }
.pcard .go .ic { transition: transform var(--dur-fast) var(--ease-standard); }
.pcard .go:hover .ic { transform: translateX(3px); }

/* ---------- 고객사 로고 격자 ---------- */
.clients { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 640px) { .clients { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 960px) { .clients { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* 고객사 격자: 칸 수가 줄 끝을 채우지 못해도 빈자리가 회색 면으로 보이지 않게 선을 칸마다 그린다 */
.clients.lattice { gap: 0; background: var(--bg-1); border-width: 1px 0 0 1px; }
.clients.lattice > li { box-shadow: inset -1px -1px 0 var(--line-1); }
.clients li > div { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 100%; padding: 12px 10px; }
.clients img { width: 84%; max-width: 150px; aspect-ratio: 200 / 97; object-fit: contain; mix-blend-mode: multiply; }
/* 로고 이미지가 없는 고객사: 이름을 글자 로고처럼 표시 */
.cl-word { display: flex; align-items: center; justify-content: center; width: 84%; max-width: 150px; aspect-ratio: 200 / 97; font-size: clamp(13px, 0.3vw + 11.5px, 15px); font-weight: var(--fw-bold); letter-spacing: -0.01em; line-height: 1.25; color: var(--fg-1); text-align: center; word-break: keep-all; }
.clients .cap { font-size: var(--fs-12); line-height: 1.4; color: var(--fg-3); text-align: center; word-break: keep-all; overflow-wrap: anywhere; }
.clients .cap .brands { display: block; margin-top: 3px; font-size: 11px; letter-spacing: 0.02em; color: var(--fg-3); }
.clients.has-cap li > a, .clients.has-cap li > div { justify-content: flex-start; padding: 14px 10px 18px; }

/* ---------- CTA 밴드 (bg-inverse) ---------- */
.cta { background: var(--bg-inverse); color: var(--ink-0); padding-block: var(--sec) 88px; }
.cta h2 { margin-top: 18px; max-width: 900px; color: var(--ink-0); font-size: clamp(32px, 3vw + 18px, var(--fs-56)); font-weight: var(--fw-extrabold); letter-spacing: -0.035em; line-height: 1.08; }
.cta .text { max-width: 560px; margin: 24px 0 0; font-size: var(--fs-16); line-height: 1.75; color: var(--ink-300); }
.cta .actions { margin: 36px 0 var(--sp-16); }
.cta-info { display: grid; gap: 32px; padding-top: 40px; border-top: 1px solid var(--ink-700); }
@media (min-width: 800px) { .cta-info { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } }
.cta-info h3 { font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange-400); margin-bottom: 14px; }
.cta-info .tel { display: block; font-size: var(--fs-18); font-weight: var(--fw-semibold); color: var(--ink-0); margin-bottom: 6px; }
.cta-info .tel:hover { color: var(--orange-400); }
.cta-info .mail { font-size: 15px; color: var(--ink-200); }
.cta-info .mail:hover { color: var(--ink-0); text-decoration: underline; text-underline-offset: 3px; }
.cta-info p { font-size: 15px; line-height: 1.65; color: var(--ink-200); }

/* ---------- Footer ---------- */
.site-footer { background: var(--bg-inverse); color: var(--ink-300); padding-block: 56px calc(40px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--ink-800); }
.f-top { display: grid; gap: 36px; padding-bottom: 44px; border-bottom: 1px solid var(--ink-700); }
@media (min-width: 720px) { .f-top { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; } }
.f-brand p { margin-top: 14px; max-width: 320px; font-size: var(--fs-13); line-height: 1.75; color: var(--ink-400); }
.site-footer h2 { font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-0); margin-bottom: 16px; }
.site-footer ul { display: flex; flex-direction: column; gap: 10px; }
.site-footer ul a { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-13); color: var(--ink-300); }
.site-footer ul a:hover { color: var(--ink-0); }
.site-footer ul .ic { width: 15px; height: 15px; }
.f-offices { display: grid; gap: 6px; padding-top: 26px; font-size: var(--fs-12); line-height: 1.7; color: var(--ink-400); }
.f-offices p { display: flex; flex-wrap: wrap; gap: 0 14px; }
.f-offices b { color: var(--ink-200); font-weight: var(--fw-semibold); }
.f-offices a:hover { color: var(--ink-0); }
.f-bot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 22px; font-size: 11px; letter-spacing: 0.04em; color: var(--ink-400); }

/* ---------- 하위 페이지 머리 ---------- */
.page-head { background: var(--bg-2); border-bottom: 1px solid var(--line-1); padding-block: clamp(40px, 5vw, 72px) clamp(44px, 5vw, 64px); position: relative; overflow: hidden; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--fs-12); color: var(--fg-3); margin-bottom: 22px; }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line-2); }
.crumbs a:hover { color: var(--fg-1); text-decoration: underline; text-underline-offset: 3px; }
.page-head h1 { margin: 18px 0 0; max-width: 820px; font-size: clamp(34px, 2.6vw + 22px, 60px); font-weight: var(--fw-extrabold); letter-spacing: -0.035em; line-height: 1.08; }
.page-head .lede { margin-top: 18px; max-width: 640px; font-size: 17px; line-height: var(--lh-relaxed); color: var(--fg-2); text-wrap: pretty; }
.page-head .actions { margin-top: 28px; }
.nf-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 28px; }
.nf-links a { color: var(--fg-accent); text-decoration: underline; text-underline-offset: 3px; font-weight: var(--fw-semibold); }

/* ---------- 지식재산권 / 법무 탭 ---------- */
.subnav { position: sticky; top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); z-index: 40; background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line-1); }
.subnav ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.subnav a { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 8px; padding: 16px 8px 14px; text-align: center; font-size: 15px; font-weight: var(--fw-semibold); color: var(--fg-3); border-bottom: 2px solid var(--line-1); transition: color var(--dur-fast) var(--ease-standard); }
.subnav a small { font-size: var(--fs-13); font-weight: var(--fw-medium); color: var(--fg-3); }
.subnav a:hover { color: var(--orange-600); }
.subnav a[aria-current="true"] { color: var(--fg-1); border-bottom-color: var(--orange-500); }

/* ---------- 진행 절차 · FAQ (행 목록) ---------- */
.rows { border-bottom: 1px solid var(--line-1); }
.row { display: grid; gap: 6px 20px; padding: 22px 4px; border-top: 1px solid var(--line-1); }
.row .idx { font-size: var(--fs-12); color: var(--fg-3); padding-top: 3px; }
.row h3, .row h4 { font-size: var(--fs-18); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-normal); }
.row p { font-size: 15px; color: var(--fg-2); line-height: var(--lh-relaxed); }
.steps .row { grid-template-columns: 40px minmax(0, 1fr); }
.steps .row p { grid-column: 2; }
@media (min-width: 860px) { .steps .row { grid-template-columns: 60px minmax(0, 0.8fr) minmax(0, 1.4fr); align-items: baseline; } .steps .row p { grid-column: auto; } }
@media (min-width: 860px) { .faq .row { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 40px; } }

/* ---------- 구성원 프로필 ---------- */
.profile { display: grid; gap: 28px; padding-block: 48px; border-top: 2px solid var(--ink-900); }
@media (min-width: 860px) { .profile { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 56px; } }
.pf-photo img { width: 100%; max-width: 280px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-sm); background: var(--ink-50); }
@media (max-width: 859px) { .pf-photo img { max-width: 200px; } }
@media (min-width: 860px) { .pf-photo { position: sticky; top: calc(var(--header-h) + 84px); align-self: start; } }
.pf-body { min-width: 0; }
.pf-body h3 { font-size: clamp(28px, 1vw + 22px, 32px); font-weight: var(--fw-bold); letter-spacing: -0.03em; margin-bottom: 10px; }
.pf-body h3 small { font-size: var(--fs-18); font-weight: var(--fw-medium); color: var(--fg-2); letter-spacing: 0; }
.pf-meta { font-size: var(--fs-14); color: var(--fg-3); margin-bottom: 8px; }
.pf-mail { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pf-mail a { font-size: 15px; font-weight: var(--fw-medium); color: var(--fg-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.pf-mail a:hover { color: var(--orange-700); }
.pf-sum { margin-top: 18px; font-size: var(--fs-16); color: var(--fg-2); max-width: 46em; }
.pf-body .badges { margin-top: 16px; }
.pf-lists { display: grid; gap: 32px 48px; margin-top: 34px; }
@media (min-width: 720px) { .pf-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pf-lists .wide { grid-column: 1 / -1; } .pf-lists .wide ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 48px; } }
.pf-lists h4 { font-size: var(--fs-12); font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line-1); }
.pf-lists ul { display: flex; flex-direction: column; gap: 9px; }
.pf-lists li { font-size: var(--fs-14); line-height: 1.55; color: var(--fg-2); }
.copy { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; min-height: 28px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--ink-0); font-size: var(--fs-12); font-weight: var(--fw-semibold); color: var(--fg-2); cursor: pointer; transition: border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); }
.copy .ic { width: 13px; height: 13px; }
.copy:hover { border-color: var(--ink-700); color: var(--fg-1); }
.copy.done { border-color: var(--orange-500); color: var(--orange-700); }
.copy:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }

/* ---------- 다옴 소개 ---------- */
.name-in { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .name-in { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; } }
.name-word { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 18px; }
.name-word .brand-word { font-size: clamp(64px, 6vw + 32px, 112px); letter-spacing: -0.04em; }
.name-word .brand--latin .brand-word { letter-spacing: -0.025em; }
.name-word .brand-dot { width: clamp(16px, 1.6vw + 8px, 30px); height: clamp(16px, 1.6vw + 8px, 30px); margin: 0.06em 0 0 0.04em; }
.name-meaning { margin: 22px 0 12px; font-size: clamp(22px, 1vw + 16px, 28px); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-normal); line-height: var(--lh-snug); color: var(--fg-1); }
.name-photo { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line-1); background: var(--ink-100); }
.values { display: grid; gap: 48px; }
@media (min-width: 860px) { .values { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; } }
.value h3 { font-size: clamp(26px, 0.8vw + 20px, 32px); font-weight: var(--fw-bold); letter-spacing: -0.03em; line-height: 1.2; margin-bottom: 22px; }
.value p { font-size: clamp(16px, 0.3vw + 15px, 18px); line-height: 1.85; color: var(--fg-2); }
.value p:last-child { color: var(--fg-1); font-weight: var(--fw-semibold); }
.role { display: grid; gap: 28px; }
@media (min-width: 860px) { .role { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 56px; align-items: start; } }
.role h2 { margin-top: 14px; font-size: clamp(26px, 1vw + 20px, 32px); font-weight: var(--fw-bold); letter-spacing: -0.03em; }
.role .quote { margin: 0; padding-left: clamp(16px, 2vw, 24px); }
.role .quote p { font-size: clamp(18px, 0.6vw + 15px, 22px); font-weight: var(--fw-semibold); line-height: 1.6; }
.role .quote p + p { margin-top: 10px; }

/* ---------- 연락처 카드 · 오시는 길 ---------- */
.offices { display: grid; gap: 20px; }
@media (min-width: 800px) { .offices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.office { display: flex; flex-direction: column; padding: clamp(24px, 3vw, 32px); }
.office h2, .office h3 { margin: 12px 0 6px; font-size: var(--fs-24); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); }
.office .desc { font-size: var(--fs-14); color: var(--fg-2); margin-bottom: 14px; }
.office dl { margin: 0 0 6px; }
.office dl > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 10px; padding-block: 12px; border-top: 1px solid var(--line-1); }
.office dt { display: flex; align-items: center; gap: 6px; font-size: var(--fs-12); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-3); }
.office dt .ic { width: 15px; height: 15px; }
.office dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; color: var(--fg-1); }
.office dd a:hover { color: var(--orange-700); text-decoration: underline; text-underline-offset: 3px; }
.office .big { font-size: clamp(22px, 1vw + 18px, 26px); font-weight: var(--fw-bold); letter-spacing: -0.01em; }
.office .dui-btn--block { margin-top: 12px; }
.location { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line-1); }
.loc-addr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: var(--fw-semibold); color: var(--fg-1); }
.loc-addr .ic { width: 18px; height: 18px; color: var(--orange-500); }
.loc-addr .post { color: var(--fg-3); font-weight: var(--fw-regular); }
.map-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
.map-links .dui-btn { width: 100%; padding-inline: 10px; }
@media (min-width: 800px) { .map-links { width: auto; grid-template-columns: repeat(3, auto); } .map-links .dui-btn { padding-inline: 18px; } }

/* ---------- 문의 폼 ---------- */
.composer-wrap { display: grid; gap: 8px; }
@media (min-width: 960px) { .composer-wrap { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; } }
.composer { display: grid; gap: 18px; padding: clamp(22px, 3.4vw, 36px); }
.field-row { display: grid; gap: 18px; }
@media (min-width: 640px) { .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.to-line { font-size: var(--fs-13); color: var(--fg-3); }
.to-line strong { color: var(--fg-1); font-weight: var(--fw-semibold); }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.form-status { min-height: 1.5em; font-size: var(--fs-14); font-weight: var(--fw-semibold); color: var(--orange-700); }
.form-status.err { color: var(--danger); }
.form-note { font-size: var(--fs-13); color: var(--fg-3); }

@keyframes dui-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
@media print {
  .site-header, .subnav, .cta, .site-footer, .composer, .ghost-mark { display: none !important; }
}