@charset "utf-8";
/* 원스톱 번역서비스 — 디자인 시스템
   색은 고객 로고에서 실측해 뽑았다 (#002060 · #0070F0 · #0050C0).
   분위기는 고객이 지정한 이룸켐앤텍(erchem.co.kr) 기준 — 정돈된 기업형, 풀와이드 헤더. */

:root{
  --navy:#002060;        /* 로고 진남색 — 제목·푸터 */
  --navy-2:#0a2f78;
  --blue:#0070F0;        /* 로고 밝은 파랑 — 링크·강조 */
  --blue-2:#0050C0;
  --blue-soft:#E8F1FE;
  --line:#dfe5ee;
  --line-2:#eef2f7;
  --ink:#1b2430;         /* 본문 — 순검정 금지 */
  --ink-2:#4a5568;
  --ink-3:#7b8798;
  --bg:#ffffff;
  --bg-2:#F4F7FB;
  --gold:#C9932E;        /* 「신규」 같은 소량 강조 */
  --radius:4px;
  --wrap:1200px;
  --ff:'Pretendard Variable',Pretendard,-apple-system,'Malgun Gothic',sans-serif;
  --fe:'Archivo',var(--ff);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--ff);font-size:16px;line-height:1.75;
  word-break:keep-all;overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.02em;line-height:1.35;color:var(--navy)}
p{margin:0}
table{border-collapse:collapse;width:100%}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── 상단 유틸 바 ───────────────────────────────────────────── */
.util{background:var(--navy);color:#cfe0f7;font-size:13px}
.util .wrap{display:flex;align-items:center;justify-content:flex-end;gap:22px;height:38px}
.util a{color:#cfe0f7;transition:color .15s}
.util a:hover{color:#fff}
.util .tel{font-family:var(--fe);font-weight:700;color:#fff;letter-spacing:.02em}

/* ── 헤더 · 내비 ────────────────────────────────────────────── */
.hd{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line)}
/* 가로형 로고(230px) + 메뉴 + 견적문의 버튼이 wrap 안쪽 최대폭 1,152px 에 들어가도록 간격을 줄였다 (2026-09-19).
   그보다 좁은 화면(1,199px 이하)은 버거 메뉴로 바뀐다 — 아래 @media (max-width:1199px) */
.hd .wrap{display:flex;align-items:center;gap:24px;height:100px}
.logo{display:flex;align-items:center;flex:0 0 auto}
.logo img{height:50px;width:auto}  /* 가로형 로고 (2026-09-18 고객 요청) — 옛 세로형은 logo_v.png */
.gnb{display:flex;gap:6px;margin-left:auto}
.gnb>li{position:relative}
.gnb>li>a{
  display:block;padding:0 15px;line-height:99px;font-size:17px;font-weight:600;white-space:nowrap;
  color:var(--ink);border-bottom:3px solid transparent;transition:color .15s,border-color .15s;
}
.gnb>li:hover>a,.gnb>li>a.on{color:var(--blue);border-bottom-color:var(--blue)}
.drop{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);
  min-width:180px;background:#fff;border:1px solid var(--line);border-top:2px solid var(--blue);
  box-shadow:0 12px 28px rgba(0,32,96,.10);
  opacity:0;visibility:hidden;transition:opacity .16s,transform .16s;padding:6px 0;
}
.gnb>li:hover .drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.drop a{display:block;padding:9px 18px;font-size:15px;color:var(--ink-2);white-space:nowrap}
.drop a:hover{background:var(--blue-soft);color:var(--blue-2)}
.hd-cta{
  flex:0 0 auto;display:inline-flex;align-items:center;height:44px;padding:0 22px;
  background:var(--blue);color:#fff;font-weight:700;font-size:15px;border-radius:var(--radius);
  transition:background .15s;
}
.hd-cta:hover{background:var(--blue-2)}
.burger{display:none;width:44px;height:44px;margin-left:auto;background:none;border:0;cursor:pointer}
.burger span{display:block;width:22px;height:2px;margin:5px auto;background:var(--navy);transition:.2s}

/* ── 히어로 ─────────────────────────────────────────────────── */
.hero{
  position:relative;color:#fff;overflow:hidden;
  background:
    radial-gradient(900px 480px at 78% 18%,rgba(0,112,240,.38),transparent 62%),
    linear-gradient(135deg,#00184c 0%,#002060 46%,#053a92 100%);
}
.hero::after{                       /* 지구 경위선 느낌의 옅은 격자 — 로고와 같은 맥락 */
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.22;
  background-image:
    repeating-linear-gradient(90deg,rgba(255,255,255,.09) 0 1px,transparent 1px 84px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 1px,transparent 1px 84px);
}
.hero .wrap{position:relative;z-index:1;padding-top:96px;padding-bottom:104px}
.hero h1{color:#fff;font-size:clamp(30px,4.2vw,52px);line-height:1.28;letter-spacing:-.035em}
.hero h1 em{font-style:normal;color:#7fc0ff}
.hero .lead{margin-top:22px;max-width:640px;font-size:clamp(16px,1.5vw,19px);color:#c7dcf7;line-height:1.85}
.hero .lead em{font-style:normal;font-weight:700;color:#fff}
.hero-btns,.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:56px;padding:0 30px;border-radius:var(--radius);
  font-size:16px;font-weight:700;letter-spacing:-.01em;transition:.16s;border:1px solid transparent;
}
.btn-p{background:var(--blue);color:#fff}
.btn-p:hover{background:#2a8bff}
.btn-g{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.34)}
.btn-g:hover{background:rgba(255,255,255,.16)}
.btn-o{background:#fff;color:var(--blue-2);border-color:var(--blue)}
.btn-o:hover{background:var(--blue-soft)}
.hero-note{margin-top:26px;font-size:14px;color:#8fb6e6}

/* ── 속보 띠 (베트남 아포스티유) ──────────────────────────────── */
.alert{background:var(--gold);color:#2a1c00}
.alert .wrap{display:flex;align-items:center;gap:16px;padding-top:15px;padding-bottom:15px;flex-wrap:wrap}
.alert .tag{
  flex:0 0 auto;padding:4px 11px;background:#2a1c00;color:#ffd97a;
  font-size:12px;font-weight:800;letter-spacing:.08em;border-radius:2px;
}
.alert p{font-size:15.5px;font-weight:600;line-height:1.6}
.alert a{margin-left:auto;font-weight:700;text-decoration:underline;text-underline-offset:4px;white-space:nowrap}

/* ── 섹션 공통 ──────────────────────────────────────────────── */
.sec{padding:96px 0}
.sec.alt{background:var(--bg-2)}
.sec-hd{margin-bottom:46px}
.sec-hd .eyebrow{
  display:block;margin-bottom:12px;font-family:var(--fe);font-size:13px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--blue);
}
.sec-hd h2{font-size:clamp(25px,3vw,36px)}
.sec-hd p{margin-top:16px;max-width:760px;color:var(--ink-2);font-size:17px}
.sec-hd.center{text-align:center}
.sec-hd.center p{margin-left:auto;margin-right:auto}

/* ── 서비스 4카드 ───────────────────────────────────────────── */
.svc{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.svc a{
  display:flex;flex-direction:column;padding:34px 28px 30px;background:#fff;
  border:1px solid var(--line);border-top:3px solid var(--navy);
  transition:box-shadow .18s,transform .18s,border-top-color .18s;
}
.svc a:hover{box-shadow:0 16px 36px rgba(0,32,96,.12);transform:translateY(-4px);border-top-color:var(--blue)}
.svc .ic{width:46px;height:46px;margin-bottom:20px;color:var(--blue)}
.svc .ic svg{width:100%;height:100%;display:block}
.svc h3{font-size:21px}
.svc .en{margin-top:5px;font-family:var(--fe);font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--ink-3);text-transform:uppercase}
.svc .sum{margin-top:16px;font-size:14px;font-weight:600;color:var(--blue-2)}
.svc .txt{margin-top:9px;font-size:15px;color:var(--ink-2);line-height:1.75;flex:1}
.svc .more{margin-top:20px;font-size:14px;font-weight:700;color:var(--navy)}
.svc .more::after{content:'→';margin-left:7px;transition:margin-left .16s;display:inline-block}
.svc a:hover .more::after{margin-left:12px}

/* ── 목적별 ─────────────────────────────────────────────────── */
.purp{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);background:#fff}
.purp a{padding:30px 28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .15s}
.purp a:nth-child(3n){border-right:0}
.purp a:nth-last-child(-n+3){border-bottom:0}
.purp a:hover{background:var(--blue-soft)}
.purp h3{font-size:19px}
.purp p{margin-top:9px;font-size:14.5px;color:var(--ink-2)}

/* ── 절차 4단계 ─────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;counter-reset:s}
.step{position:relative;padding-top:26px;border-top:2px solid var(--navy)}
.step .no{font-family:var(--fe);font-size:13px;font-weight:800;letter-spacing:.14em;color:var(--blue)}
.step h3{margin-top:10px;font-size:20px}
.step p{margin-top:12px;font-size:15px;color:var(--ink-2)}

/* ── 국가 조회 ──────────────────────────────────────────────── */
.finder{background:#fff;border:1px solid var(--line);padding:34px}
.finder-in{position:relative;max-width:560px}
.finder input{
  width:100%;height:60px;padding:0 20px 0 52px;font-size:17px;font-family:var(--ff);
  border:2px solid var(--line);border-radius:var(--radius);color:var(--ink);background:#fff;
  transition:border-color .15s;
}
.finder input:focus{outline:none;border-color:var(--blue)}
.finder input::placeholder{color:var(--ink-3)}
.finder .mag{position:absolute;left:18px;top:19px;width:22px;height:22px;color:var(--ink-3);pointer-events:none}
.finder-out{margin-top:22px}
.f-card{display:flex;gap:18px;align-items:flex-start;padding:22px 24px;border-radius:var(--radius)}
.f-card.apo{background:var(--blue-soft);border-left:4px solid var(--blue)}
.f-card.emb{background:#FFF5E6;border-left:4px solid var(--gold)}
.f-card.none{background:var(--bg-2);border-left:4px solid var(--ink-3)}
.f-card .badge{
  flex:0 0 auto;padding:5px 12px;border-radius:2px;font-size:12.5px;font-weight:800;letter-spacing:.04em;color:#fff;
}
.f-card.apo .badge{background:var(--blue)}
.f-card.emb .badge{background:var(--gold)}
.f-card.none .badge{background:var(--ink-3)}
.f-card strong{display:block;font-size:18px;color:var(--navy)}
.f-card span{display:block;margin-top:7px;font-size:15px;color:var(--ink-2)}
.f-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.f-chips button{
  padding:7px 15px;font-size:14px;font-family:var(--ff);color:var(--ink-2);cursor:pointer;
  background:var(--bg-2);border:1px solid var(--line);border-radius:999px;transition:.14s;
}
.f-chips button:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.f-new{margin-left:6px;font-size:11px;font-weight:800;color:var(--gold)}

/* ── 단가 표 ────────────────────────────────────────────────── */
.tbl{background:#fff;border:1px solid var(--line)}
.tbl table{font-size:15.5px}
.tbl th,.tbl td{padding:15px 20px;text-align:left;border-bottom:1px solid var(--line-2)}
.tbl thead th{background:var(--navy);color:#fff;font-size:14px;font-weight:700;letter-spacing:.02em;border-bottom:0}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:var(--blue-soft)}
.tbl td.num{text-align:right;font-family:var(--fe);font-weight:600;letter-spacing:.01em;color:var(--navy)}
.tbl th[scope=row]{font-weight:700;color:var(--navy)}
.notes{margin-top:18px}
.notes li{position:relative;padding-left:16px;font-size:14.5px;color:var(--ink-2);line-height:1.95}
.notes li::before{content:'';position:absolute;left:0;top:13px;width:5px;height:5px;border-radius:50%;background:var(--blue)}

/* ── 왜 원스톱인가 ──────────────────────────────────────────── */
.why{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.why-list li{display:flex;gap:18px;padding:22px 0;border-bottom:1px solid var(--line)}
.why-list li:last-child{border-bottom:0}
.why-list .n{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;
  font-family:var(--fe);font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;
}
.why-list h3{font-size:18px}
.why-list p{margin-top:7px;font-size:15px;color:var(--ink-2)}
.why-fig{padding:44px;background:var(--navy);color:#fff;
  background-image:radial-gradient(600px 300px at 80% 10%,rgba(0,112,240,.42),transparent 60%)}
.why-fig h3{color:#fff;font-size:23px;line-height:1.5}
.why-fig .flow{margin-top:30px}
.why-fig .flow li{position:relative;padding:14px 0 14px 34px;font-size:16px;color:#cfe0f7}
.why-fig .flow li::before{
  content:'';position:absolute;left:5px;top:22px;width:9px;height:9px;border-radius:50%;
  background:#7fc0ff;box-shadow:0 0 0 4px rgba(127,192,255,.2);
}
.why-fig .flow li:not(:last-child)::after{
  content:'';position:absolute;left:9px;top:33px;width:1px;height:calc(100% - 12px);background:rgba(127,192,255,.3);
}

/* ── 마감 CTA ───────────────────────────────────────────────── */
.cta{background:var(--bg-2);border-top:1px solid var(--line)}
.cta .wrap{display:flex;align-items:center;gap:40px;padding:64px 24px}
.cta h2{font-size:clamp(23px,2.6vw,31px)}
.cta p{margin-top:12px;color:var(--ink-2);font-size:16.5px}
.cta .btns{display:flex;gap:12px;margin-left:auto;flex:0 0 auto}

/* ── 푸터 ───────────────────────────────────────────────────── */
.ft{background:var(--navy);color:#9fbde4;font-size:14.5px}
.ft-top{padding:56px 0 40px;border-bottom:1px solid rgba(255,255,255,.12)}
.ft-top .wrap{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:44px}
.ft h3,.ft h4{color:#fff;font-size:15px;letter-spacing:.02em;margin-bottom:16px}
.ft-links li{margin-bottom:9px}
.ft-links a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ft-brand .mark{font-size:22px;font-weight:800;color:#fff;letter-spacing:-.02em}
.ft-brand .mark-en{margin-top:5px;font-family:var(--fe);font-size:11.5px;font-weight:700;
  letter-spacing:.17em;color:#7fc0ff}
.ft-brand p{margin-top:16px;line-height:1.85;color:#9fbde4}
.ft-tel{margin-top:18px;font-family:var(--fe);font-size:24px;font-weight:700;color:#fff;letter-spacing:.01em}
.ft-bot{padding:22px 0}
.ft-bot .wrap{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.ft-bot .legal{display:flex;gap:18px;margin-left:auto}
.ft-bot a:hover{color:#fff}
/* 푸터 맨 오른쪽 제작·호스팅 표기 (2026-09-30 사장님 지시). 새 창으로 연다.
   고객 정보가 주인공이라 한 톤 낮춰 두었다 — 눈에 먼저 들어오면 안 된다. */
.ft-bot .ft-credit{margin-left:18px;font-size:12.5px}
.ft-bot .ft-credit a{opacity:.72}
.ft-bot .ft-credit a:hover{opacity:1;color:#fff}
@media (max-width:1100px){.ft-bot .ft-credit{margin-left:0;width:100%}}
.tbd{color:#6f90bd;font-style:normal}          /* 미확정 값 표시 */

/* ── 반응형 ─────────────────────────────────────────────────── */
@media (max-width:1100px){
  .svc{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);gap:34px}
  .why{grid-template-columns:1fr;gap:44px}
  .ft-top .wrap{grid-template-columns:1fr 1fr;gap:36px}
}
@media (max-width:1199px){
  /* 헤더 → 버거 메뉴. 예전엔 860px 에서 바뀌었는데, 가로형 로고로 바꾼 뒤 861~1,243px 에서
     헤더가 넘쳐 문서 전체에 가로 스크롤이 생겼다(2026-09-19 실측). 헤더 규칙만 여기로 옮겼다. */
  .hd .wrap{height:68px;gap:16px}
  .logo img{height:34px}
  .burger{display:block}
  .gnb{
    display:none;position:absolute;top:68px;left:0;right:0;background:#fff;
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    flex-direction:column;gap:0;padding:8px 0;box-shadow:0 14px 30px rgba(0,32,96,.10);
    max-height:calc(100vh - 68px);overflow-y:auto;
  }
  .gnb.open{display:flex}
  .gnb>li>a{line-height:1.5;padding:15px 24px;border-bottom:1px solid var(--line-2);border-left:3px solid transparent}
  .gnb>li:hover>a,.gnb>li>a.on{border-bottom-color:var(--line-2);border-left-color:var(--blue)}
  .drop{position:static;transform:none;opacity:1;visibility:visible;border:0;box-shadow:none;
        background:var(--bg-2);padding:4px 0;min-width:0}
  .gnb>li:hover .drop{transform:none}
  .drop a{padding:11px 40px;font-size:14.5px}
  .hd-cta{display:none}
}
@media (max-width:860px){
  /* 상단 바가 한 줄 고정이라 폭이 모자라면 문서 전체가 넓어진다(가로 스크롤의 원인).
     높이를 풀고 줄바꿈을 허용한 뒤, 설명 문구는 모바일에서 뺀다. */
  .util .wrap{justify-content:center;gap:8px 16px;font-size:12.5px;
              height:auto;padding-top:9px;padding-bottom:9px;flex-wrap:wrap}
  .util .wrap>span:first-child{display:none}
  .sec{padding:64px 0}
  .sec-hd{margin-bottom:32px}
  .hero .wrap{padding-top:62px;padding-bottom:66px}
  .purp{grid-template-columns:1fr}
  .purp a{border-right:0}
  .purp a:nth-last-child(-n+3){border-bottom:1px solid var(--line)}   /* 3열용 「마지막 줄 선 없음」을 1열에서 푼다 */
  .purp a:last-child{border-bottom:0}
  .steps{grid-template-columns:1fr;gap:26px}
  .alert .wrap{gap:10px}
  .alert a{margin-left:0}
  .cta .wrap{flex-direction:column;align-items:flex-start;gap:26px;padding:48px 24px}
  .cta .btns{margin-left:0;width:100%}
  .cta .btns .btn{flex:1}
  .ft-top .wrap{grid-template-columns:1fr;gap:34px}
  .ft-bot .legal{margin-left:0}
  .tbl th,.tbl td{padding:12px 14px;font-size:14.5px}
  .finder{padding:22px}
}
@media (max-width:520px){
  .util a[href^="mailto"]{display:none}
  .hero h1{font-size:clamp(25px,7.2vw,32px);letter-spacing:-.04em}
  .hero .lead{font-size:15.5px}
  .alert p{font-size:14.5px}
  .svc{grid-template-columns:1fr}
  .btn{height:52px;padding:0 22px;font-size:15px}
  .hero-btns .btn{flex:1 1 100%}
}

/* ═══════════════════════════════════════════════════════════════
   서브 페이지
   ═══════════════════════════════════════════════════════════════ */

/* 페이지 머리 */
.ph{
  position:relative;color:#fff;overflow:hidden;
  background:
    radial-gradient(700px 360px at 82% 20%,rgba(0,112,240,.34),transparent 62%),
    linear-gradient(135deg,#00184c 0%,#002060 52%,#053a92 100%);
}
.ph::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.2;
  background-image:
    repeating-linear-gradient(90deg,rgba(255,255,255,.09) 0 1px,transparent 1px 84px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 1px,transparent 1px 84px);
}
.ph .wrap{position:relative;z-index:1;padding-top:64px;padding-bottom:66px}
.crumb{display:flex;gap:9px;font-size:13.5px;color:#8fb6e6;margin-bottom:16px;flex-wrap:wrap}
.crumb span::after{content:'›';margin-left:9px;color:#5f86bb}
.crumb b{font-weight:600;color:#cfe0f7}
.ph h1{color:#fff;font-size:clamp(27px,3.4vw,42px);letter-spacing:-.03em}
.ph p{margin-top:15px;max-width:680px;font-size:17px;color:#c7dcf7;line-height:1.8}

/* 본문 블록 */
.cont{padding:80px 0}
.cont .wrap{max-width:1040px}
.blk{margin-bottom:64px}
.blk:last-child{margin-bottom:0}
.blk>h2{font-size:clamp(22px,2.4vw,29px);margin-bottom:8px}
.blk>h2+.dek{margin-bottom:26px;color:var(--ink-2);font-size:16.5px}
.blk h3{font-size:19px;margin:30px 0 12px}
.blk p{color:var(--ink-2);font-size:16px;margin-bottom:14px}
.blk p:last-child{margin-bottom:0}
.rule{height:2px;background:var(--navy);margin-bottom:22px;max-width:52px}

/* 카드 그리드 */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{padding:28px 26px;background:#fff;border:1px solid var(--line);border-top:3px solid var(--navy)}
.card.alt{background:var(--bg-2);border-top-color:var(--blue)}
.card h3{margin:0 0 10px;font-size:18px}
.card p{font-size:15px;margin:0}
.card ul{margin-top:12px}
.card li{position:relative;padding-left:15px;font-size:14.5px;color:var(--ink-2);line-height:1.95}
.card li::before{content:'';position:absolute;left:0;top:13px;width:4px;height:4px;border-radius:50%;background:var(--blue)}

/* 강조 박스 */
.note-box{padding:22px 26px;background:var(--blue-soft);border-left:4px solid var(--blue)}
.note-box.warn{background:#FFF5E6;border-left-color:var(--gold)}
.note-box h3{margin:0 0 8px;font-size:17px}
.note-box p{margin:0;font-size:15.5px;color:var(--ink-2)}
.note-box p+p{margin-top:9px}

/* 표 도구 */
.tbl caption{padding:0 0 12px;text-align:left;font-size:14px;color:var(--ink-note)}   /* --ink-3 은 AA 미달 (2026-09-22 검수) */
.tbl-sticky{max-height:none}
/* 표 안 「근거 한 줄」 — .tbl .rsn(공증 3종)과 같은 색 · 같은 크기로 둔다.
   --ink-3 은 흰 바탕 3.6:1 로 AA 미달이라 --ink-note(5.4:1) 로 바꿨다 (2026-09-21) */
.tbl td small{display:block;font-size:13.5px;color:var(--ink-note);margin-top:3px;line-height:1.7}
.badge-new{display:inline-block;margin-left:7px;padding:2px 8px;border-radius:2px;
  background:var(--gold);color:#fff;font-size:11px;font-weight:800;letter-spacing:.04em;vertical-align:2px}

/* 단가 검색 */
.pfind{display:flex;gap:12px;align-items:center;margin-bottom:18px;flex-wrap:wrap}
.pfind input{
  flex:1 1 280px;height:52px;padding:0 18px;font-size:16px;font-family:var(--ff);
  border:2px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--ink);
}
.pfind input:focus{outline:none;border-color:var(--blue)}
.pfind .cnt{font-size:14.5px;color:var(--ink-3)}
tr.hide{display:none}
.empty{padding:30px;text-align:center;color:var(--ink-3);font-size:15.5px}

/* 문의 폼 */
.form{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.fld{display:flex;flex-direction:column}
.fld.full{grid-column:1/-1}
.fld label{margin-bottom:8px;font-size:14.5px;font-weight:600;color:var(--navy)}
.fld .req{color:#d93025;margin-left:3px}
.fld input,.fld select,.fld textarea{
  height:52px;padding:0 16px;font-size:15.5px;font-family:var(--ff);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;transition:border-color .15s;
}
.fld textarea{height:auto;min-height:150px;padding:14px 16px;line-height:1.75;resize:vertical}
.fld select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5568' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:20px;padding-right:44px}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,112,240,.12)}
.fld .hint{margin-top:7px;font-size:13.5px;color:var(--ink-note)}   /* 흰 바탕 3.65:1 → 5.4:1 (2026-09-22 검수) */
.agree{grid-column:1/-1;padding:24px 26px;background:var(--bg-2);border:1px solid var(--line)}
.agree h3{margin:0 0 14px;font-size:16px}
.agree table{font-size:14.5px}
.agree th,.agree td{padding:9px 12px;border:1px solid var(--line);text-align:left;color:var(--ink-2);background:#fff}
.agree th{width:150px;background:var(--bg-2);color:var(--navy);font-weight:700}
.agree .chk{display:flex;align-items:flex-start;gap:10px;margin-top:16px;font-size:14.5px;color:var(--ink-2)}
.agree .chk input{width:19px;height:19px;flex:0 0 auto;margin-top:2px;accent-color:var(--blue)}
.agree .chk a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.form-foot{grid-column:1/-1;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.form-foot .btn{min-width:200px}
.form-foot .tel-alt{font-size:15px;color:var(--ink-2)}
.form-foot .tel-alt b{color:var(--navy);font-family:var(--fe);font-size:17px}

/* 인사말 */
.greet{display:grid;grid-template-columns:1fr 1.5fr;gap:56px;align-items:start}
.greet-side{padding:38px 34px;background:var(--navy);color:#fff;
  background-image:radial-gradient(520px 260px at 80% 8%,rgba(0,112,240,.42),transparent 60%)}
.greet-side h2{color:#fff;font-size:24px;line-height:1.45}
.greet-side p{margin-top:16px;color:#c7dcf7;font-size:15.5px}
.greet-body p{font-size:16.5px;color:var(--ink-2);line-height:1.95;margin-bottom:20px}
.greet-body p:first-child{font-size:19px;font-weight:700;color:var(--navy)}
.greet-sign{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);font-size:16px;font-weight:700;color:var(--navy)}

@media (max-width:1100px){
  .grid3{grid-template-columns:1fr 1fr}
  .greet{grid-template-columns:1fr;gap:34px}
}
@media (max-width:860px){
  .ph .wrap{padding-top:44px;padding-bottom:46px}
  .cont{padding:56px 0}
  .blk{margin-bottom:46px}
  .grid2,.grid3{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .agree th{width:auto}
  .agree table,.agree tbody,.agree tr,.agree th,.agree td{display:block;width:auto}
  .agree tr{margin-bottom:10px}
  .form-foot .btn{width:100%}
}

.stepno{font-family:var(--fe);font-weight:800;color:var(--blue);font-size:15px}

/* 2026-09-19 인증 페이지 */
/* ═══════════════════════════════════════════════════════════════
   국내 · 해외 아포스티유 / 대사관인증 (태국 · 말레이시아 / 중동 · 기타)
   _pages3.py 가 쓰는 조각들. 위 규칙은 건드리지 않고 여기서만 더한다.
   ═══════════════════════════════════════════════════════════════ */
:root{--gold-ink:#7a4f06}      /* 금색 계열 글자 — 연한 배경에서 대비 확보용 */
:root{--ink-note:#5f6b7c}      /* 작은 근거 문구 — 흰 바탕 5.4:1 · #F4F7FB 5.0:1 (--ink-3 은 3.4~3.7:1 로 AA 미달) */

/* 본문 속 링크 */
.lk{color:var(--blue-2);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.lk:hover{color:var(--blue)}

/* 표 — 「구분 : 내용」형 · 국가 칩 표 */
.tbl.kv th[scope=row]{width:190px;vertical-align:top;white-space:nowrap}
.tbl.ctry th[scope=row]{width:170px;vertical-align:top;padding-top:19px}
.tbl.ctry td{padding-top:14px;padding-bottom:14px}
.tbl.ctry tbody tr:hover{background:transparent}
.tbl.kv caption,.tbl.ctry caption{padding:12px 20px 11px;border-bottom:1px solid var(--line-2);background:var(--bg-2);
  color:var(--ink-note)}

/* 경로 칩 (→ 로 잇는 단계) */
.path{display:flex;flex-wrap:wrap;align-items:center;gap:8px 0;margin:16px 0 0}
.path li{display:inline-flex;align-items:center;padding-left:0;line-height:1.5}
.path li::before{content:none}
.path li span{display:inline-block;padding:5px 11px;font-size:14px;font-weight:700;color:var(--navy);
  background:var(--blue-soft);border-radius:2px;white-space:nowrap}
.path li:not(:last-child)::after{content:'\2192';margin:0 7px;color:var(--blue);font-weight:700}
.card.alt .path li span{background:#fff}
.card .rnote{margin-top:14px;font-size:14px;color:var(--ink-note)}
.card .src{margin:-4px 0 4px;font-size:13px;color:var(--ink-note)}

/* 절차 도해 — 번호 원 + 잇는 선 · 강조 단계(key) */
.proc{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:0}
.proc>li{position:relative;padding-right:22px}
.proc>li:not(:last-child)::before{content:'';position:absolute;top:21px;left:54px;right:12px;height:2px;background:#b9c7dc}
.proc>li:not(:last-child)::after{content:'';position:absolute;top:17px;right:12px;width:9px;height:9px;
  border-top:2px solid #b9c7dc;border-right:2px solid #b9c7dc;transform:rotate(45deg)}
.proc .pn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:50%;border:2px solid var(--navy);background:#fff;color:var(--navy);
  font-family:var(--fe);font-size:14px;font-weight:800;letter-spacing:.02em}
.proc>li.key .pn{background:var(--navy);color:#fff}
.proc h3{margin:16px 0 8px;font-size:18px}
.proc p{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.75}
.proc .who{display:inline-block;margin-top:12px;padding:3px 10px;border-radius:2px;
  background:var(--blue);color:#fff;font-size:12.5px;font-weight:700;white-space:nowrap}

/* 견본 — 원본 크기 이하로만. 여러 장은 같은 높이 · 같은 캡션 위치 */
.fig{margin:0;display:flex;flex-direction:column;gap:12px;padding:14px;background:#fff;border:1px solid var(--line)}
.fig>a{flex:1 1 auto;min-width:0;display:flex;align-items:flex-end;justify-content:center;cursor:zoom-in}
.fig>a:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.fig img{min-width:0;max-width:100%;height:auto}
.fig picture{display:contents}     /* webp 감싸개 — 자리를 차지하지 않아 img 가 그대로 flex 항목이 된다 */
.fig figcaption{padding-top:10px;border-top:1px solid var(--line-2);font-size:14px;font-weight:600;
  color:var(--navy);line-height:1.55}
.fig .tag{display:inline-block;margin-right:7px;padding:0 6px;border:1px solid var(--line);border-radius:2px;
  background:var(--bg-2);color:var(--ink-2);font-size:11.5px;font-weight:800;letter-spacing:.04em;
  line-height:1.75;vertical-align:1px;white-space:nowrap}
.fig figcaption small{display:block;margin-top:4px;font-size:13px;font-weight:400;color:var(--ink-note)}
.fig figcaption small.fix{margin-top:9px;padding:8px 11px;border-left:3px solid var(--gold);
  background:#FFF5E6;color:var(--gold-ink);font-weight:600}
.fig.solo{width:fit-content;max-width:100%;margin:0 auto}
.figs{display:grid;gap:20px;align-items:stretch}
.figs.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.figs.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.figs+.figs{margin-top:20px}      /* 높이가 같은 견본끼리 묶은 두 묶음 사이 (embassy-etc) */
.fig-side{display:grid;grid-template-columns:auto minmax(0,1fr);gap:44px;align-items:start}
.fig-side .fig.solo{margin:0}
.blk h3.fs-h{margin:2px 0 10px;font-size:19px}

/* 견본 짝 — 영사확인 → 대사관 인증 */
.pair{padding:20px;background:var(--bg-2);border:1px solid var(--line)}
.blk .pair h3{margin:0 0 14px;font-size:18px}
.pair-in{display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);gap:0 8px;align-items:stretch}
.pair-ar{align-self:center;justify-self:center;width:24px;height:24px;display:flex;align-items:center;justify-content:center}
.pair-ar::before{content:'';width:10px;height:10px;margin-left:-4px;border-top:2px solid var(--blue);
  border-right:2px solid var(--blue);transform:rotate(45deg)}
.pair .fig{padding:10px}
.pair-in>.fig:first-child{grid-column:1}
.pair-in>.pair-ar{grid-column:2;grid-row:1}
.pair-in>.fig:last-child{grid-column:3}
@supports (grid-template-rows:subgrid){
  .figs .fig,.pair-in .fig{display:grid;grid-template-rows:subgrid;grid-row:span 2;row-gap:12px}
}

/* 아포스티유 10개 칸 · 순서 목록 */
.fields{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;margin-top:18px}
.fields li,.olist li{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-2);
  font-size:15px;color:var(--ink);line-height:1.6}
.card .olist{margin-top:10px}
.card .olist li{padding-left:0;font-size:14.5px;align-items:flex-start}
.card .olist li:last-child{border-bottom:0}
.olist li::before{content:none}
.fn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;
  background:var(--blue-soft);color:var(--blue-2);font-family:var(--fe);font-size:12.5px;font-weight:800}

/* 가입국 — 눈에 띄게 (베트남 · 중국) */
.hl{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.hl-item{padding:26px 28px;background:#fff;border:1px solid var(--line);border-top:4px solid var(--blue)}
.hl-item.new{background:#FFF9EF;border-top-color:var(--gold)}
.hl-item .nm{display:flex;align-items:center;gap:10px;font-size:26px;font-weight:800;letter-spacing:-.02em;
  color:var(--navy);line-height:1.3}
.hl-item .dt{display:block;margin-top:6px;font-family:var(--fe);font-size:18px;font-weight:700;color:var(--blue-2);
  letter-spacing:.01em;white-space:nowrap}
.hl-item.new .dt{color:var(--gold-ink)}
.hl-item p{margin:12px 0 0;font-size:15px;color:var(--ink-2)}
.tag-new{display:inline-block;padding:2px 9px;border-radius:2px;background:var(--gold-ink);color:#fff;
  font-size:12px;font-weight:800;letter-spacing:.04em;line-height:1.6}
.recent{display:flex;align-items:flex-start;gap:8px 14px;margin:20px 0 30px;flex-wrap:wrap}
.recent .rl{flex:0 0 auto;padding-top:5px;font-size:14px;font-weight:700;color:var(--navy)}
.recent .chips{flex:1 1 300px}

/* 국가 칩 */
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chips li{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border:1px solid var(--line);border-radius:999px;
  background:var(--bg-2);color:var(--ink);font-size:14.5px;line-height:1.6;white-space:nowrap}
.chips li::before{content:none}
.chips li .d{font-family:var(--fe);font-size:12px;font-weight:600;color:var(--blue-2)}
.chips li .m{font-size:12px;font-weight:700;color:var(--gold-ink)}
.chips li.hot{border-color:var(--blue);background:var(--blue-soft);color:var(--navy);font-weight:700}
.chips li.new{border-color:var(--gold);background:#FFF5E6;color:var(--navy);font-weight:700}
.chips li.new .d{color:var(--gold-ink)}
.chips li.off{display:none}
.card .chips li{padding:4px 12px;font-size:14px}

/* 박스 안 목록 */
.note-box .notes{margin-top:4px}
.note-box .notes li{font-size:15px;line-height:1.85;padding-top:3px;padding-bottom:3px}
.note-box .notes li::before{top:16px}
.note-box .notes b{color:var(--navy)}
.note-box h2{margin:0 0 8px;font-size:17px}   /* 페이지 첫 제목이 박스일 때 h2 로 둔다(제목 단계 건너뛰기 방지) — 모양은 h3 와 같다 */

/* 자주 묻는 질문 — 눌러서 펼친다 */
.faq{border-top:2px solid var(--navy)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{position:relative;display:block;padding:19px 46px 19px 30px;font-size:16.5px;font-weight:700;
  color:var(--navy);line-height:1.6;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:'Q';position:absolute;left:2px;top:19px;font-family:var(--fe);font-weight:800;color:var(--blue)}
.faq summary::after{content:'';position:absolute;right:12px;top:26px;width:10px;height:10px;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg);transition:transform .18s}
.faq details[open]>summary::after{top:31px;transform:rotate(-135deg)}
.faq summary:hover{color:var(--blue-2)}
.faq summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.faq .a{padding:0 8px 24px 30px}
.faq .a p{margin:0 0 10px;font-size:15.5px;color:var(--ink-2);line-height:1.85}
.faq .a p:last-child{margin-bottom:0}
.faq .a b{color:var(--navy)}

/* 앵커로 들어올 때 sticky 헤더(데스크톱 101px · 버거 69px) 밑에 제목이 가리지 않게 — apostille-kr.html#members 등 */
.blk[id]{scroll-margin-top:116px}

/* 이어서 보실 페이지 */
.rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
/* 사이트 카드는 전부 «윗줄 3px» — 여기만 왼쪽 세로줄이던 것을 맞췄다 (2026-09-22 검수) */
.rel a{display:flex;flex-direction:column;gap:4px;padding:20px 22px;background:#fff;border:1px solid var(--line);
  border-top:3px solid var(--navy);transition:background .15s,border-top-color .2s}
.rel a:hover{background:var(--blue-soft);border-top-color:var(--blue)}
.rel b{font-size:16.5px;color:var(--navy)}
.rel b::after{content:'\2192';margin-left:8px;color:var(--blue)}
.rel span{font-size:14px;color:var(--ink-2)}

@media (max-width:1100px){
  .proc h3{font-size:17px}
}
@media (max-width:1199px){
  .blk[id]{scroll-margin-top:84px}
}
@media (max-width:860px){
  .proc{grid-template-columns:1fr}
  .proc>li{padding:0 0 24px 62px;min-height:44px}
  .proc>li:last-child{padding-bottom:0}
  .proc .pn{position:absolute;left:0;top:0}
  .proc h3{margin:9px 0 6px}
  .proc>li:not(:last-child)::before{top:50px;bottom:6px;left:21px;right:auto;width:2px;height:auto}
  .proc>li:not(:last-child)::after{display:none}
  .hl{grid-template-columns:1fr;gap:14px}
  .hl-item{padding:22px}
  .hl-item .nm{font-size:23px}
  .fig-side{grid-template-columns:1fr;gap:26px}
  .fig-side .fig.solo{margin:0 auto}
  .figs{gap:12px}
  .figs.c3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .figs+.figs{margin-top:12px}
  .figs .fig{padding:8px}
  .pair{padding:14px}
  .pair-in{grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);gap:0 4px}
  .pair .fig{padding:6px}
  .fig figcaption{font-size:13.5px}
  .faq summary{font-size:16px;padding:17px 40px 17px 26px}
  .faq summary::before{top:17px}
  .faq summary::after{top:24px;right:8px}
  .faq details[open]>summary::after{top:29px}
  .faq .a{padding:0 4px 20px 26px}
}
@media (max-width:600px){
  .tbl.kv th,.tbl.kv td,.tbl.ctry th,.tbl.ctry td{display:block;width:auto}
  .tbl.kv th[scope=row],.tbl.ctry th[scope=row]{width:auto;padding-bottom:2px;border-bottom:0;white-space:normal}
  .tbl.kv td,.tbl.ctry td{padding-top:4px}
}
@media (max-width:520px){
  .fields{grid-template-columns:1fr}
  .chips li{font-size:14px;padding:4px 10px}
}

/* 2026-09-21 공증 페이지 */
/* ════════════════════════════════════════════════════════════
   번역공증 / 사실공증 / 원본대조공증  —  _pages4.py 가 쓰는 조각.
   위 규칙은 건드리지 않고 여기서만 더한다. 견본 이미지가 없어 표와 도해만 쓴다.
   ════════════════════════════════════════════════════════════ */

/* 표 안의 근거 · 출처 한 줄 (--ink-3 은 AA 미달이라 --ink-note 로) */
.tbl .rsn{display:block;margin-top:4px;font-size:13.5px;color:var(--ink-note);line-height:1.7}
.blk p.rsn-p{margin-top:10px;font-size:14px;color:var(--ink-note)}

/* 「구분 : 내용」형 표 — 이름이 길어 kv 기본값(190px · nowrap)을 덮어쓴다 */
.tbl.fact th[scope=row],.tbl.fee th[scope=row]{width:215px;white-space:normal}
.tbl.fact td,.tbl.fee td{vertical-align:top}

/* 되는 것 · 안 되는 것 */
.tbl.yn-t th[scope=row]{width:300px;white-space:normal;vertical-align:top}
.tbl.yn-t td{vertical-align:top}
.tbl.yn-t td.j{width:104px}
.tbl.yn-t tbody tr:hover{background:transparent}
.yn{display:inline-block;padding:2px 10px;border-radius:2px;font-size:12.5px;font-weight:800;
  line-height:1.75;white-space:nowrap}
.yn.y{background:var(--blue-soft);border:1px solid var(--blue);color:var(--blue-2)}
.yn.n{background:#FFF5E6;border:1px solid var(--gold);color:var(--gold-ink)}

@media (max-width:600px){
  /* 🔴 위 600px 블록(.tbl.kv)보다 뒤에 있는 규칙이라 특이도가 같으면 여기 것이 이긴다.
     .fact · .fee 의 215px 를 풀지 않으면 폰에서 구분 열이 215px 로 남는다(2026-09-21 실측) */
  .tbl.fact th[scope=row],.tbl.fee th[scope=row]{width:auto}
  .tbl.yn-t th,.tbl.yn-t td{display:block;width:auto}
  .tbl.yn-t th[scope=row]{width:auto;padding-bottom:2px;border-bottom:0}
  .tbl.yn-t td{padding-top:4px}
  .tbl.yn-t td.j{width:auto;padding-bottom:2px}
}