/* 임계 폰트 서브셋(2026-09-24) — 홈에 실제로 쓰인 488자만 담은 78KB 한 장.
   dynamic-subset 은 구간 단위라 242음절을 쓰면서 13파일 331KB 를 받았다(폰트가 전송의 73%).
   여기 없는 글자는 폴백(아래 메트릭 정합면)으로 간다 — 2026-09-25 부터 dynamic-subset
   92면 안전망은 붙이지 않는다. optional 은 서체가 늦으면 그 면을 실패 처리하고 스택의
   다음 패밀리로 넘어가므로, 안전망이 있으면 임계 서브셋이 늦을 때마다 구간 파일을
   100KB 넘게 더 받는다(화면엔 안 쓰임). 게다가 그 시트를 media=print→all 로 붙이면
   플립 순간 문서 전체 스타일 재계산이 돌면서 이미 받아 둔 optional 서체가 다시 잡혀
   본문이 재배치된다(inhega 실측 CLS 0.2233, 그 시트만 막으면 0.0000).
   새 글로 없는 음절이 생기면 재생성이 정답이다: python3 scripts/build-font-subsets.py
   재생성: python3 scripts/build-font-subsets.py

   font-display 는 optional 이다(2026-09-25). swap 이면 늦게 도착한 서브셋이
   본문을 다시 흘려 줄바꿈 지점이 바뀌고, 그게 PSI mobile CLS 0.276 의 실체였다.
   아래 폴백 메트릭 정합은 local() 이 실제로 잡혀야만 듣는데 PSI 리눅스 컨테이너에서는
   잡히지 않아 09-24 수치 보정만으로는 0.28→0.276 로 거의 그대로였다.
   optional 은 '첫 페인트 뒤에는 절대 교체하지 않는다' 라서 폴백이 무엇이든 CLS 가 0 이다.
   대가: 느린 회선의 첫 방문은 Pretendard 대신 폴백으로 보인다(재방문은 캐시라 정상). */
/* APO-R2(2026-10-09): 'Pretendard Critical' 면은 페이지마다 <head> 인라인으로 선언한다 — 페이지당 1파일 서브셋
   (scripts/build-page-fonts.py). 공용 critical/rest 두 파일 구성은 새 문구 음절 누락·부분 도착으로 글꼴이 섞였다. */
/* 폴백 폰트 메트릭 정합 (2026-09-24, 맥7 지시) — CLS 재현 불가 건의 실체.
   맥 로컬 Lighthouse 에서는 CLS 0.000 인데 PSI(리눅스 컨테이너)에서만 0.28~0.30 이 나왔다.
   원인은 font-display:swap 구간에 쓰이는 '폴백 서체의 줄상자 높이' 차이다.
     Pretendard        asc 1950 / desc -494 / upem 2048 → 줄상자 119.3%
     Noto Sans CJK KR  asc 1160 / desc -288 / upem 1000 → 줄상자 144.8%
   리눅스에는 Apple SD Gothic Neo 가 없어 Noto 로 떨어지고, 웹폰트가 도착하는 순간
   본문 전 줄이 약 25% 만큼 줄어들며 문서 전체가 한 번에 위로 당겨진다.
   아래 두 면은 local() 로만 잡히는 폴백에 Pretendard 메트릭을 덮어씌워
   스왑 전후의 줄상자와 글자폭을 같게 만든다(레이아웃 이동 0).
   수치 산출(fontaine/next-font 방식):
     size-adjust        = Pretendard 평균자폭 / 폴백 평균자폭
                          라틴 소문자 0.5063em / Arial 0.4895em = 103.4%
                          한글 0.8643em / Noto Sans KR 1.0em    = 86.4%
     ascent/descent-override = Pretendard 비율 ÷ size-adjust
                          (1950/2048=95.21%, 494/2048=24.12%)
   재측정은 맥7이 PSI 로 한다. */
@font-face{
  font-family:'Pretendard Fallback Latin';
  font-style:normal;
  font-weight:45 920;
  src:local('Arial'),local('Liberation Sans'),local('Helvetica Neue'),local('Helvetica'),local('Nimbus Sans'),local('DejaVu Sans');
  size-adjust:103.4%;
  ascent-override:92.05%;
  descent-override:23.32%;
  line-gap-override:0%;
}
@font-face{
  font-family:'Pretendard Fallback KR';
  font-style:normal;
  font-weight:45 920;
  src:local('Apple SD Gothic Neo'),local('Noto Sans KR'),local('Noto Sans CJK KR'),local('NotoSansCJKkr-Regular'),local('Malgun Gothic'),local('NanumGothic');
  size-adjust:86.4%;
  ascent-override:110.16%;
  descent-override:27.91%;
  line-gap-override:0%;
}

/*# sourceMappingURL=/sm/49af798104dba87a942919357f383e653ce9152ba9bdc9bbfa8ba846a1b04235.map */
/* 비전 아포코리아 (Vision ApoKorea) — Phase A shared stylesheet
   Mobile-first. Base styles = mobile; min-width media queries scale up. */

:root{
  --ink:#0E1F38; --ink-2:#243A5E; --brand:#2A5BD7; --brand-ink:#1E44A8; --brand-2:#4472E8;
  --gold:#C8912B; --gold-ink:#9A6E17;
  --paper:#F4F6FA; --surface:#FFFFFF; --line:#DCE3EE; --line-strong:#C3CEDE;
  --text:#182335; --muted:#5B6779; --muted-2:#8A94A6;
  --ok:#1F8A5B; --warn:#B5721A; --warn-bg:#FBF1DE; --warn-ink:#8C5710;
  --shadow-sm:0 1px 2px rgba(14,31,56,.05),0 2px 6px rgba(14,31,56,.05);
  --shadow:0 1px 2px rgba(14,31,56,.06),0 8px 24px rgba(14,31,56,.08);
  --shadow-lg:0 4px 10px rgba(14,31,56,.08),0 20px 48px rgba(14,31,56,.14);
  --radius:6px; --radius-sm:6px; --radius-lg:8px; --maxw:1080px;
  --sans:"Pretendard Critical","Pretendard Variable","Pretendard","Pretendard Fallback Latin","Pretendard Fallback KR","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --touch:48px;
  --ease:cubic-bezier(.2,.7,.3,1);
}
@media (prefers-color-scheme: dark){
  :root{
    --brand:#7AA2FF; --brand-ink:#9DBBFF; --gold:#E6B84C; --gold-ink:#F2CE78;
    --paper:#0C1524; --surface:#111C2E; --line:#22314A; --line-strong:#31435F;
    --text:#E6ECF5; --muted:#9DA9BC; --muted-2:#6D7C93;
    --warn:#E0AA55; --warn-bg:#2A2314; --warn-ink:#E0AA55; --ok:#54C08A;
    --shadow-sm:0 1px 2px rgba(0,0,0,.3),0 2px 6px rgba(0,0,0,.3);
    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px rgba(0,0,0,.45);
    --shadow-lg:0 4px 12px rgba(0,0,0,.45),0 24px 56px rgba(0,0,0,.5);
  }
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scrollbar-gutter:stable}
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:var(--sans); line-height:1.6; font-size:16px;
  -webkit-font-smoothing:antialiased;
  word-break:keep-all; overflow-wrap:break-word;
}
a{color:var(--brand-ink); text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2.5px solid var(--brand); outline-offset:2px; border-radius:4px;
}
img{max-width:100%; display:block}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 16px}
h1,h2,h3{color:var(--ink); line-height:1.24; margin:0 0 .5em; letter-spacing:-.01em; font-weight:800}
h1{font-size:1.8rem; letter-spacing:-.02em}
h2{font-size:1.4rem; margin-top:1.8rem; position:relative; padding-inline-start:14px}
.wrap>h2:first-child{margin-top:0}
h2:before{content:""; position:absolute; inset-inline-start:0; top:.15em; bottom:.15em; width:4px; border-radius:3px; background:#0E1F38}
#find-your-path h2{padding-inline-start:0}
#find-your-path h2:before{content:none}
#unsure-path h2{padding-inline-start:0}
#unsure-path h2:before{content:none}
h3{font-size:1.1rem; font-weight:700}
p{margin:0 0 1em}
.lead{font-size:1.08rem; color:var(--muted); line-height:1.7}
@media (min-width:640px){ h1{font-size:2.2rem} h2{font-size:1.6rem} }
@media (min-width:900px){ h1{font-size:2.6rem} }

/* Skip link */
.skip{position:absolute; inset-inline-start:-999px; top:0; background:var(--brand); color:#fff; padding:10px 16px; z-index:200}
.skip:focus{inset-inline-start:8px; top:8px}

/* Header */
header.site{background:color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid transparent; position:sticky; top:0; z-index:100; transition:background-color .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease)}
header.site.is-scrolled{background:var(--surface); border-bottom-color:var(--line-strong); box-shadow:var(--shadow-sm)}
header.site:not(.is-scrolled) + .hero{margin-top:-1px}
section[id]{scroll-margin-top:calc(var(--touch) + 44px)}
header.site .bar{display:flex; align-items:center; justify-content:flex-start; min-height:var(--touch); padding:10px 16px; max-width:var(--maxw); margin:0 auto; gap:8px}
.brand{display:flex; align-items:center; gap:8px; font-weight:800; color:var(--ink); font-size:1.05rem; min-height:var(--touch); margin-inline-end:auto}
.brand-logo{height:26px; width:26px; object-fit:contain; flex-shrink:0}
.brand .en{font-weight:500; color:var(--muted); font-size:.75rem; display:block}
.navtoggle{display:inline-flex; align-items:center; justify-content:center; width:var(--touch); height:var(--touch); border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); font-size:1.3rem}
nav.main{display:none; flex-direction:column; border-top:1px solid var(--line); background:var(--ink)}
nav.main.open{display:flex}
nav.main a{padding:14px 16px; min-height:var(--touch); display:flex; align-items:center; border-bottom:1px solid rgba(255,255,255,.12); color:#fff; font-weight:600}
nav.main a:hover{background:rgba(255,255,255,.08); text-decoration:none}
.navsection-label{
  display:block; padding:10px 16px 4px; font-size:.72rem; font-weight:800; letter-spacing:.04em;
  color:rgba(255,255,255,.45); text-transform:uppercase;
}
nav.main details.navgroup{border-bottom:1px solid rgba(255,255,255,.12)}
nav.main details.navgroup summary{
  padding:14px 16px; min-height:var(--touch); display:flex; align-items:center; gap:6px;
  color:#fff; font-weight:600; cursor:pointer; list-style:none;
}
nav.main details.navgroup summary::-webkit-details-marker{display:none}
nav.main details.navgroup .navgroup-care{font-size:.75em; transition:transform .15s var(--ease)}
nav.main details.navgroup[open] .navgroup-care{transform:rotate(180deg)}
nav.main .navgroup-panel{display:flex; flex-direction:column; background:rgba(0,0,0,.15)}
nav.main .navgroup-panel a{padding-inline-start:32px}
@media (min-width:860px){
  .navsection-label{display:none}
  .navtoggle{display:none}
  nav.main{display:flex !important; flex-direction:row; flex-wrap:wrap; border-top:none; background:var(--ink); justify-content:center; row-gap:2px}
  .wrap > nav.main, header.site nav.main{max-width:none}
  nav.main{max-width:none}
  nav.main a{border-bottom:none; min-height:40px; padding:0 14px; color:#E6ECF5; border-inline-end:1px solid rgba(255,255,255,.12); font-size:.9rem; white-space:nowrap}
  @media (min-width:1100px){ nav.main a{padding:0 18px; font-size:.92rem} }
  nav.main a:last-child{border-inline-end:none}
  nav.main a:last-child{
    margin-inline-start:6px; background:var(--gold); color:var(--ink); font-weight:800;
    border-radius:999px; padding:0 20px; align-self:center; min-height:34px;
    transition:transform .15s var(--ease), box-shadow .15s var(--ease);
  }
  nav.main a:last-child:hover{background:var(--gold-ink); color:#fff; transform:translateY(-1px); box-shadow:var(--shadow-sm)}
  nav.main details.navgroup{position:relative; display:flex; align-items:stretch; border-inline-end:1px solid rgba(255,255,255,.12)}
  nav.main details.navgroup summary{
    display:flex; align-items:center; gap:4px; min-height:44px; padding:0 18px;
    color:#E6ECF5; font-size:.92rem; font-weight:600; cursor:pointer; list-style:none; white-space:nowrap;
  }
  nav.main details.navgroup summary::-webkit-details-marker{display:none}
  nav.main details.navgroup .navgroup-care{font-size:.7em; transition:transform .15s var(--ease)}
  nav.main details.navgroup[open] .navgroup-care{transform:rotate(180deg)}
  nav.main details.navgroup summary:hover{background:rgba(255,255,255,.08)}
  nav.main .navgroup-panel{
    position:absolute; top:100%; inset-inline-start:0; min-width:220px;
    background:var(--ink); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius-sm);
    box-shadow:var(--shadow); padding:6px; margin-top:2px; z-index:150; display:flex; flex-direction:column;
  }
  nav.main .navgroup-panel a{border:none; border-radius:var(--radius-sm); padding:0 12px; min-height:40px; font-size:.9rem}
  nav.main .navgroup-panel a:hover{background:rgba(255,255,255,.1)}
}
nav.main a.nav-findpath{font-weight:800}
nav.main a[aria-current="page"]{color:#fff; position:relative}
nav.main a[aria-current="page"]::after{content:''; position:absolute; inset-inline:14px; bottom:0; height:2px; background:#fff; border-radius:2px}

/* Language switcher */
details.langswitch{position:relative}
details.langswitch summary{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:var(--touch); min-width:var(--touch); padding:0 12px;
  border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--ink); font-weight:700; font-size:.85rem;
  cursor:pointer; list-style:none;
}
details.langswitch summary::-webkit-details-marker{display:none}
details.langswitch[open] summary{border-color:var(--line-strong)}
details.langswitch ul{
  list-style:none; margin:6px 0 0; padding:6px;
  position:absolute; inset-inline-end:0; top:100%;
  min-width:180px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-sm); box-shadow:var(--shadow); z-index:150;
}
details.langswitch li{margin:0}
details.langswitch a{
  display:flex; align-items:center; min-height:var(--touch); padding:8px 12px;
  border-radius:var(--radius-sm); color:var(--text); font-weight:600; font-size:.92rem;
}
details.langswitch a:hover{background:var(--paper); text-decoration:none}
details.langswitch a.current{color:var(--brand-ink); font-weight:800; background:var(--paper)}
@media (min-width:860px){
  header.site .bar{position:relative}
}

/* Hero — centered, viewport-balanced (text-only + bottom quicklink bar) */
.hero{padding:0; position:relative; overflow:hidden; border-bottom:1px solid var(--line)}
.hero-split{
  display:flex; flex-direction:column;
  background:linear-gradient(180deg,var(--surface),var(--paper));
  min-height:calc(min(72vh, 560px));
}
.hero-copy{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:48px 20px; max-width:var(--maxw); margin:0 auto; width:100%;
}
.hero-tag{display:block; letter-spacing:.22em; font-weight:800; font-size:.82rem; color:var(--brand); text-transform:uppercase; margin-bottom:18px}
.hero h1{font-size:clamp(1.9rem, 5.5vw, 4rem); line-height:1.18; letter-spacing:-.02em}
.hero .lead{max-width:60ch; margin-inline:auto; text-align:center; font-size:clamp(1rem, 1.6vw, 1.18rem); color:var(--muted); margin-top:18px; word-break:keep-all; overflow-wrap:normal}
@media (min-width:481px) and (max-width:680px){ .hero .lead{font-size:.86rem} }
.hero .btnrow{justify-content:center; margin-top:28px}
.hero-split{min-height:calc(min(78vh, 640px))}
.hero-copy{padding:64px 20px}
@media (min-width:900px){ .hero-copy{padding:96px 20px} }

/* Minimal Hero: utility/listing pages (country, document, path-finder) */
.hero-minimal .hero-split{min-height:auto; background:var(--paper)}
.hero-minimal .hero-copy{
  align-items:flex-start; text-align:start; padding:36px 20px 28px; max-width:var(--maxw);
}
.hero-minimal .hero-tag{margin-bottom:10px}
.hero-minimal h1{font-size:clamp(1.5rem, 3.6vw, 2.3rem)}
.hero-minimal .lead{margin-inline:0; text-align:start; max-width:60ch}
.hero-minimal .btnrow{justify-content:flex-start; margin-top:18px}
@media (min-width:900px){ .hero-minimal .hero-copy{padding:44px 20px 32px} }


.hero-quicklinks{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  background:transparent; padding:18px 20px 28px; max-width:var(--maxw); margin-inline:auto;
}
.hero-quicklinks a{
  flex:0 1 auto; text-align:center; color:var(--ink-2); font-weight:700; font-size:.86rem;
  padding:10px 18px; border:1px solid var(--line-strong); border-radius:999px; background:var(--surface);
  transition:background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
  min-height:var(--touch); display:flex; align-items:center; justify-content:center;
}
.hero-quicklinks a:hover{background:var(--brand); border-color:var(--brand); color:#fff; text-decoration:none}

.badge{display:block; color:var(--brand); font-size:.94rem; font-weight:800; margin-bottom:10px; animation:pulseBadge 2.4s var(--ease) infinite}
@keyframes pulseBadge{0%,100%{box-shadow:var(--shadow-sm)} 50%{box-shadow:0 0 0 5px rgba(42,91,215,.12)}}

/* Entrance animation on load */
@keyframes fadeInUp{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:translateY(0)}}
.hero h1,.hero .lead,.hero .btnrow{animation:fadeInUp .6s var(--ease) both}
.hero .lead{animation-delay:.08s}
.hero .btnrow{animation-delay:.16s}

/* Hero trust photo layer — reusable across pages via .hero-photo + inline --hero-img (boss-supplied photos) */
.hero-photo::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:var(--hero-img); background-repeat:no-repeat; background-position:right top; background-size:cover;
  opacity:.20;
  animation:heroVisualIn 1.4s var(--ease) both;
}
.hero-photo::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:linear-gradient(90deg, var(--surface) 0%, var(--surface) 30%, color-mix(in srgb, var(--surface) 60%, transparent) 55%, color-mix(in srgb, var(--surface) 22%, transparent) 100%);
}
.hero-photo > .wrap, .hero-photo .hero-split{position:relative; z-index:1}
.hero-photo .hero-split{background:transparent}
@keyframes heroVisualIn{from{opacity:0; transform:scale(1.03)} to{opacity:.20; transform:scale(1)}}
@media (max-width:899px){
  .hero-photo::before{background-position:center 30%; opacity:.12}
  .hero-photo::after{background:linear-gradient(180deg, color-mix(in srgb, var(--surface) 45%, transparent) 0%, var(--surface) 100%)}
}
@media (prefers-reduced-motion: reduce){ .hero-photo::before{animation:none; opacity:.20} }
.hero-photo .hero-quicklinks{position:relative; z-index:1; background:var(--paper)}

/* Confine the photo layer strictly to the hero-split box (home/notarization) so it never
   bleeds under the quicklinks bar — single clean edge instead of two overlapping fade zones */
.hero-photo:has(.hero-split)::before, .hero-photo:has(.hero-split)::after{content:none}
.hero-photo .hero-split{overflow:hidden}
.hero-photo .hero-split::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:var(--hero-img); background-repeat:no-repeat; background-position:right top; background-size:cover;
  opacity:.20;
  animation:heroVisualIn 1.4s var(--ease) both;
}
.hero-photo .hero-split::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:linear-gradient(90deg, var(--surface) 0%, var(--surface) 30%, color-mix(in srgb, var(--surface) 60%, transparent) 55%, color-mix(in srgb, var(--surface) 22%, transparent) 100%);
}
.hero-photo .hero-split > *{position:relative; z-index:1}
@media (max-width:899px){
  .hero-photo .hero-split::before{background-position:center 30%; opacity:.12}
  .hero-photo .hero-split::after{background:linear-gradient(180deg, color-mix(in srgb, var(--surface) 45%, transparent) 0%, var(--surface) 100%)}
}
@media (prefers-reduced-motion: reduce){ .hero-photo .hero-split::before{animation:none; opacity:.20} }

/* Page-specific hero accents */
.hero-about{background:radial-gradient(ellipse 80% 60% at 50% 0%, rgba(42,91,215,.08), transparent 70%)}
.hero-notarization{background:radial-gradient(ellipse 80% 60% at 50% 0%, rgba(200,145,43,.10), transparent 70%)}
.hero-apostille{background:radial-gradient(ellipse 80% 60% at 50% 0%, rgba(42,91,215,.10), transparent 70%)}
.hero-translation{background:radial-gradient(ellipse 80% 60% at 50% 0%, rgba(68,114,232,.09), transparent 70%)}
.hero-consular{background:radial-gradient(ellipse 80% 60% at 50% 0%, rgba(14,31,56,.06), transparent 70%)}
.hero-embassy{background:radial-gradient(ellipse 80% 60% at 50% 0%, rgba(163,29,29,.06), transparent 70%)}
@media (prefers-reduced-motion: reduce){ .hero h1,.hero .lead,.hero .btnrow{animation:none} }

.hero-notarization.hero-photo .hero-split, .hero-apostille.hero-photo .hero-split, .hero-about.hero-photo .hero-split, .hero-translation.hero-photo .hero-split, .hero-consular.hero-photo .hero-split, .hero-home.hero-photo .hero-split{min-height:auto}
.hero-notarization.hero-photo .hero-copy, .hero-apostille.hero-photo .hero-copy, .hero-about.hero-photo .hero-copy, .hero-translation.hero-photo .hero-copy, .hero-consular.hero-photo .hero-copy, .hero-home.hero-photo .hero-copy{padding:20px 20px}
@media (min-width:900px){ .hero-notarization.hero-photo .hero-copy, .hero-apostille.hero-photo .hero-copy, .hero-about.hero-photo .hero-copy, .hero-translation.hero-photo .hero-copy, .hero-consular.hero-photo .hero-copy, .hero-home.hero-photo .hero-copy{padding:26px 20px} }

.hero-home.hero-photo .hero-copy{padding-top:50px}
.hero-notarization.hero-photo .hero-copy, .hero-apostille.hero-photo .hero-copy, .hero-about.hero-photo .hero-copy, .hero-translation.hero-photo .hero-copy, .hero-consular.hero-photo .hero-copy{padding-bottom:15px}
.hero-notarization.hero-photo .tldr, .hero-apostille.hero-photo .tldr, .hero-about.hero-photo .tldr, .hero-translation.hero-photo .tldr, .hero-consular.hero-photo .tldr{margin-bottom:0}
@media (min-width:900px){ .hero-home.hero-photo .hero-copy{padding-top:56px} }

/* Scroll-driven reveal (progressive enhancement; no-op on unsupported browsers) */
@supports (animation-timeline: view()){
  .card,.steps li,details.faq{
    animation:fadeInUp .5s var(--ease) both;
    animation-timeline:view();
    animation-range:entry 0% cover 25%;
  }
}

/* Buttons / CTA */
.btnrow{display:flex; flex-direction:column; gap:10px; margin:18px 0}
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:var(--touch); padding:12px 22px; border-radius:var(--radius-sm); font-weight:700; text-align:center; border:0; font-size:1rem; cursor:pointer; transition:background-color .16s var(--ease), transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease)}
.btn:hover{text-decoration:none; transform:translateY(-1px) scale(1.015)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-primary{background:linear-gradient(180deg,var(--brand-2),var(--brand)); color:#fff; box-shadow:0 2px 8px rgba(42,91,215,.28)}
.btn:disabled{opacity:.45; cursor:not-allowed; box-shadow:none}
.btn-primary:hover{background:var(--brand-ink); box-shadow:0 6px 16px rgba(42,91,215,.34)}
.btn-ghost{background:var(--surface); color:var(--ink); border:1.5px solid var(--line-strong)}
.btn-ghost:hover{border-color:var(--brand); color:var(--brand-ink); background:var(--paper)}
.steps li{transition:background-color .16s var(--ease), padding-inline-start .16s var(--ease)}
.steps li:hover{background:var(--paper); padding-inline-start:46px}
.steps li:before{transition:transform .16s var(--ease), background-color .16s var(--ease)}
.steps li:hover:before{transform:scale(1.12); background:var(--ink)}
@media (min-width:560px){ .btnrow{flex-direction:row} }

/* Cards / grid */
.grid{display:grid; grid-template-columns:1fr; gap:12px; margin:14px 0}
@media (min-width:640px){ .grid{grid-template-columns:1fr 1fr} }
@media (min-width:900px){ .grid.cols-3{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1100px){ .grid.cols-4{grid-template-columns:repeat(4,1fr)} }
.card{background:var(--surface); border:1px solid var(--line); border-radius:4px; padding:18px 18px; box-shadow:none; transition:border-color .18s var(--ease), background .18s var(--ease)}
.card h3{margin-top:0; margin-bottom:.35em}
.card p{margin:.3em 0}
.card ul{margin:.4em 0; padding-inline-start:1.1em}
.card ul li{margin-bottom:.15em; font-size:.95rem; color:var(--muted)}
.card .post-date{margin:0 0 .5em; font-size:.82rem; font-weight:600; letter-spacing:.01em; color:var(--muted-2)}
.card:hover{border-color:var(--line-strong); border-top-color:var(--brand); background:var(--paper)}
.doclist{list-style:none; margin:14px 0 0; padding:0; border-top:1px solid var(--line)}
.doclist li{border-bottom:1px solid var(--line)}
.doclist li>a{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; padding:12px 4px; color:var(--ink); text-decoration:none; transition:background .15s var(--ease)}
.doclist li>a:hover{background:var(--paper)}
.doclist li>a::before{content:"•"; color:var(--brand); font-weight:800}
.doclist-title{font-weight:700}
.doclist-note{font-size:.88rem; color:var(--muted)}
.doclist-arrow{margin-inline-start:auto; color:var(--brand); font-weight:700; white-space:nowrap}
.doclist-row{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; padding:12px 4px}
.doclist-row::before{content:"•"; color:var(--brand); font-weight:800}
.card h3{margin-top:0}

/* Checklist */
.checklist{list-style:none; margin:14px 0; padding:0; display:grid; gap:10px}
.checklist li label{display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--surface); border:1px solid var(--line); border-radius:4px; cursor:pointer; transition:border-color .15s var(--ease), background .15s var(--ease)}
.checklist li label:hover{border-color:var(--line-strong); background:var(--paper)}
.checklist input[type=checkbox]{width:18px; height:18px; accent-color:var(--brand); flex:none}
.checklist:not(#pf-checklist) li{list-style:none}
.checklist:not(#pf-checklist) li{position:relative; padding-left:0}

/* Flow diagram */
.flowline{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px; margin:24px 0; text-align:center}
.flowline span:not(.flowarrow){display:block; padding:16px 20px; border:1px solid var(--line-strong); border-radius:4px; background:var(--surface); font-weight:800; letter-spacing:.04em; min-width:150px}
.flowline span:not(.flowarrow) small{display:block; font-weight:600; color:var(--muted); letter-spacing:0; margin-top:4px}
.flowarrow{color:var(--brand); font-weight:800; font-size:1.3rem}

/* Homepage finder */
.finder-tabs{display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 0}
.finder-tab{padding:12px 20px; font-weight:800; font-size:.92rem; color:var(--muted); background:var(--paper); border:1px solid var(--line); border-radius:999px; cursor:pointer; transition:all .15s var(--ease)}
.finder-tab:hover{color:var(--ink); border-color:var(--line-strong)}
.finder-tab.active{background:var(--ink); border-color:var(--ink); color:#fff}
.finder-panel{margin-top:18px}
.finder-links{display:flex; flex-wrap:wrap; gap:10px}
.finder-links a{padding:12px 18px; border:1px solid var(--line); border-radius:4px; background:var(--surface); font-weight:700; transition:border-color .15s var(--ease), background .15s var(--ease)}
.finder-links a:hover{border-color:var(--brand); background:var(--paper); text-decoration:none}

/* Floating pill local navigation (page-internal anchor nav, not a full-width strip) */
.quicknav{position:sticky; top:8px; z-index:40; display:flex; justify-content:center; padding:6px 16px 0; pointer-events:none}
.quicknav .wrap{
  display:inline-flex; gap:2px; padding:5px; margin:0 auto; max-width:calc(100% - 0px);
  background:color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line); border-radius:999px; box-shadow:var(--shadow-sm);
  overflow-x:auto; -webkit-overflow-scrolling:touch; pointer-events:auto;
}
.quicknav .wrap::-webkit-scrollbar{height:0}
.quicknav a{flex:none; padding:9px 15px; font-size:.82rem; font-weight:700; color:var(--muted); text-decoration:none; border-radius:999px; transition:color .15s var(--ease), background-color .15s var(--ease)}
.quicknav a:hover{color:var(--ink); text-decoration:none; background:var(--paper)}
.quicknav a:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
.quicknav a.active{color:var(--brand-ink); background:color-mix(in srgb, var(--brand) 12%, transparent)}
.card > a{display:inline-flex; align-items:center; gap:4px; margin-top:8px; font-weight:700; color:var(--brand); text-decoration:none; transition:gap .18s var(--ease), color .18s var(--ease)}
.card:hover > a{gap:9px; color:var(--brand-ink)}
.proc-flow{display:flex; align-items:flex-start; flex-wrap:wrap; gap:16px 8px; margin:24px 0 0; justify-content:center}
.proc-step{flex:1 1 150px; max-width:190px; text-align:center}
.proc-step .proc-icon{display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:50%; background:var(--surface); border:1px solid var(--line)}
.proc-step b{display:block; margin-top:10px; font-size:.95rem}
.proc-step p{margin-top:4px; font-size:.82rem; color:var(--muted)}
.proc-arrow{flex:0 0 auto; align-self:center; margin-top:28px}
.doc-list{list-style:none; margin:8px 0 0; padding:0}
.doc-list li{padding:3px 0 3px 14px; position:relative; font-size:.92rem; line-height:1.5}
.doc-list li::before{content:"·"; position:absolute; left:0; color:var(--muted-2); font-weight:700}
button.doc-link{background:none; border:0; padding:0; margin:0; font:inherit; color:var(--ink); cursor:pointer; text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px}
button.doc-link:hover, button.doc-link:focus-visible{color:var(--brand-ink); text-decoration-color:var(--brand)}
.doc-modal-overlay{position:fixed; inset:0; background:rgba(10,20,35,.55); display:flex; align-items:center; justify-content:center; padding:20px; z-index:200; opacity:0; pointer-events:none; transition:opacity .15s var(--ease)}
.doc-modal-overlay.open{opacity:1; pointer-events:auto}
.doc-modal{background:var(--paper); border-radius:14px; padding:28px; max-width:420px; width:100%; position:relative; box-shadow:0 20px 60px rgba(0,0,0,.3)}
.doc-modal h3{margin:0 0 10px; font-size:1.15rem}
.doc-modal p{color:var(--muted); font-size:.92rem; line-height:1.6; margin:0 0 18px}
.doc-modal-actions{display:flex; gap:10px; flex-wrap:wrap}
.doc-modal-close{position:absolute; top:10px; right:12px; background:none; border:0; font-size:1.5rem; line-height:1; cursor:pointer; color:var(--muted)}
.doc-modal-close:hover{color:var(--ink)}
@media (max-width:759px){.proc-arrow{transform:rotate(90deg); margin:0 auto}}
details.proc-step{cursor:pointer; border-radius:8px; transition:background-color .15s var(--ease,ease)}
details.proc-step summary{list-style:none; cursor:pointer}
details.proc-step summary::-webkit-details-marker{display:none}
details.proc-step summary:focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-radius:8px}
details.proc-step:hover{background:var(--surface)}
details.proc-step .proc-more{display:block; margin-top:6px; font-size:.74rem; color:var(--brand); font-weight:600}
details.proc-step .proc-more:after{content:" ▾"}
details.proc-step[open] .proc-more:after{content:" ▴"}
details.proc-step[open]{max-width:260px; background:var(--surface); border:1px solid var(--line); padding:10px}
details.proc-step p{text-align:left}
.steps{counter-reset:step; list-style:none; margin:16px 0; padding:0}
.steps li{counter-increment:step; position:relative; padding-block:10px; padding-inline:42px 0; border-bottom:1px solid var(--line)}
.steps li:before{content:counter(step); position:absolute; inset-inline-start:0; top:8px; width:28px; height:28px; border-radius:50%; background:#0E1F38; color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; font-size:.85rem}

/* Process board — horizontal stepper on desktop (redtrans-style category process flow) */
@media (min-width:860px){
  .steps.stepper{
    display:grid; grid-template-columns:repeat(5,1fr); gap:0; counter-reset:step;
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;
  }
  .steps.stepper li{
    border-bottom:none; border-inline-end:1px solid var(--line); padding:22px 16px 18px 16px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:4px;
  }
  .steps.stepper li:last-child{border-inline-end:none}
  .steps.stepper li:before{
    position:static; margin-bottom:8px; box-shadow:0 0 0 5px var(--paper);
  }
  .steps.stepper li b{display:block}
  #pf-pipeline.steps.stepper{display:flex; grid-template-columns:none; gap:0}
  #pf-pipeline.steps.stepper li{flex:1 1 0; padding:14px 6px 12px}
}

section{padding:12px 0}
@media (min-width:900px){ section{padding:20px 0} }
section h2{margin-bottom:.5em}
section > .wrap > .lead:first-of-type{margin-bottom:6px}
.section-alt, body>section:not(.hero):nth-of-type(even){background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}

.tagcloud{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.tagcloud a{display:inline-flex; align-items:center; padding:8px 14px; border:1px solid var(--line-strong); border-radius:999px; background:var(--surface); color:var(--ink); font-size:.92rem; font-weight:600; transition:border-color .16s var(--ease), background .16s var(--ease)}
.tagcloud a:hover{border-color:var(--brand); background:var(--paper)}

.cmp-table{width:100%; border-collapse:collapse; min-width:560px; font-size:.92rem}
.cmp-table th, .cmp-table td{border:1px solid var(--line); padding:10px 12px; text-align:left; vertical-align:top}
.cmp-table thead th{background:var(--surface); font-weight:700}
.cmp-table tbody td:first-child{white-space:nowrap; background:var(--surface); font-weight:600}

.country-badges{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:16px}
@media(min-width:640px){.country-badges{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1000px){.country-badges{grid-template-columns:repeat(6,1fr)}}
.country-badge{display:block; text-align:center; padding:16px 8px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); transition:border-color .16s var(--ease), transform .16s var(--ease)}
.country-badge:hover{border-color:var(--brand); transform:translateY(-2px)}
.country-badge .flag-circle{width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 8px; font-size:1.7rem; background:var(--paper); border:1px solid var(--line); overflow:hidden}
.country-badge .flag-circle img{width:100%; height:100%; object-fit:cover; display:block}
.country-badge .cb-name{display:block; font-weight:700; color:var(--ink); font-size:.95rem}
.status-badge{display:inline-block; margin-top:4px; padding:2px 9px; border-radius:999px; font-size:.72rem; font-weight:600}
.status-badge.st-active{background:#E4F3EA; color:var(--ok)}
.status-badge.st-pending{background:var(--warn-bg); color:var(--warn-ink)}
.status-badge.st-none{background:var(--paper); color:var(--muted-2)}
:root[data-theme="dark"] .status-badge.st-active, :root:not([data-theme="light"]) .status-badge.st-active{background:rgba(84,192,138,.16)}

.info-box{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px}
.info-box h4{margin:0 0 10px; font-size:1.02rem}
.info-box ul{list-style:none; margin:0; padding:0}
.info-box ul li{padding:5px 0 5px 22px; position:relative; font-size:.92rem; line-height:1.5}
.info-box ul li::before{content:"✓"; position:absolute; left:0; color:var(--ok); font-weight:700}
.continent-list{list-style:none; margin:0; padding:0}
.continent-list li{display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); font-size:.92rem}
.continent-list li:last-child{border-bottom:none}

.continent-acc{list-style:none; margin:14px 0 0; padding:0; display:grid; grid-template-columns:1fr; gap:10px}
@media(min-width:520px){.continent-acc{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.continent-acc>li{min-width:0}
.continent-acc details{border:1px solid var(--line); border-radius:999px; background:var(--surface); overflow:hidden; min-width:0}
.continent-acc details[open]{border-radius:var(--radius-sm)}
.continent-acc summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; padding:12px 16px; font-weight:600; font-size:.92rem}
.continent-acc summary::-webkit-details-marker{display:none}
.continent-acc summary .ca-icon{font-size:1.05rem}
.continent-acc summary .ca-name{flex:1}
.continent-acc summary .ca-chev{color:var(--muted-2); transition:transform .16s var(--ease)}
.continent-acc details[open] summary .ca-chev{transform:rotate(180deg)}
.continent-acc .ca-body{padding:0 16px 14px 42px; font-size:.86rem; color:var(--muted-2); line-height:1.6}
.continent-acc .ca-body a{color:var(--brand)}
.continent-acc-note{grid-column:1 / -1}
.continent-acc summary .ca-count{color:var(--muted-2); font-weight:600; font-size:.88rem; margin-right:2px}

.oc-split{display:grid; grid-template-columns:1fr; gap:14px; align-items:stretch}
@media(min-width:860px){.oc-split{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}}
.oc-split>.oc-box{min-width:0}
.oc-box{background:#fff; border:1px solid #E4EAF5; border-radius:10px; padding:22px 24px}
:root:not([data-theme="light"]) .oc-box, :root[data-theme="dark"] .oc-box{background:var(--surface); border-color:var(--line)}


.map-deco{position:relative; aspect-ratio:712/368; margin:14px 0 4px; border-radius:var(--radius-sm); overflow:hidden; background:var(--paper)}
.map-deco img{position:absolute; top:0; left:0; width:100%; height:100%; object-fit:fill}
.ca-country-scroll{max-height:190px; overflow-y:auto; display:grid; grid-template-columns:repeat(auto-fill, minmax(64px,1fr)); grid-auto-flow:row dense; gap:3px; padding:6px; margin-top:4px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--paper)}
.ca-country{display:flex; align-items:center; justify-content:center; text-align:center; padding:3px 5px; min-height:30px; border:1px solid var(--line); border-radius:2px; font-size:.74rem; background:var(--surface); cursor:pointer; color:var(--ink); line-height:1.2; white-space:normal; overflow-wrap:anywhere; word-break:normal; text-decoration:none}
.ca-country.ca-wide{grid-column:span 2}
.ca-country.ca-xwide{grid-column:span 3}
.ca-country:hover, .ca-country:focus-visible, .ca-country.is-active{border-color:var(--brand); background:color-mix(in srgb, var(--brand) 10%, var(--surface)); color:var(--brand); outline:none}

/* Path-finder: multi-document diagnostic UI */
.pf-progress{display:flex; align-items:center; gap:8px; margin-bottom:18px}
.pf-progress-bar{flex:1; height:6px; border-radius:999px; background:var(--line); overflow:hidden}
.pf-progress-fill{height:100%; background:var(--brand); border-radius:999px; transition:width .25s var(--ease)}
.pf-progress-label{font-size:.82rem; font-weight:700; color:var(--muted); white-space:nowrap}
.pf-qlabel{font-weight:800; font-size:1.08rem; margin:0 0 12px}

.pf-opt{justify-content:flex-start; text-align:start; height:auto; padding:14px 16px; line-height:1.35}
.pf-opt.is-selected{border-color:var(--brand); background:var(--paper); box-shadow:inset 0 0 0 1px var(--brand)}
.pf-flag{font-size:1.2rem; margin-inline-end:6px}

.pf-search{width:100%; padding:12px 14px; border:1px solid var(--line-strong); border-radius:var(--radius-sm); font-size:1rem; margin-bottom:16px}

.pf-layout{display:grid; grid-template-columns:1fr; gap:20px}
@media (min-width:900px){ .pf-layout{grid-template-columns:1fr 300px; align-items:start} }

.pf-cat{border:1px solid var(--line); border-radius:var(--radius-sm); margin-bottom:10px; overflow:hidden}
.pf-cat-head{display:flex; align-items:center; justify-content:space-between; width:100%; padding:13px 16px; background:var(--surface); border:0; font-weight:700; font-size:.98rem; cursor:pointer; text-align:start}
.pf-cat-head .pf-cat-count{font-weight:600; color:var(--muted); font-size:.85rem; margin-inline-start:8px}
.pf-cat-body{display:grid; grid-template-columns:1fr; gap:2px; padding:6px; background:var(--paper)}
@media (min-width:560px){ .pf-cat-body{grid-template-columns:1fr 1fr} }
.pf-cat[data-open="false"] .pf-cat-body{display:none}
.pf-doc-card{display:flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid transparent; border-radius:var(--radius-sm); background:transparent; cursor:pointer; text-align:start; font-size:.92rem}
.pf-doc-card:hover{background:var(--surface)}
.pf-doc-card.is-selected{background:var(--surface); border-color:var(--brand); font-weight:700}
.pf-doc-card .pf-check{flex:none; width:18px; height:18px; border:1px solid var(--line-strong); border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:.75rem}
.pf-doc-card.is-selected .pf-check{background:var(--brand); border-color:var(--brand); color:#fff}

.pf-summary{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px}
@media (min-width:900px){ .pf-summary{position:sticky; top:calc(var(--touch) + 60px)} }
.pf-summary h4{margin:0 0 8px; font-size:.95rem; letter-spacing:.03em; color:var(--muted); text-transform:uppercase}
.pf-summary-list{list-style:none; margin:0 0 10px; padding:0; display:grid; gap:6px}
.pf-summary-list li{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:.9rem; padding:6px 8px; background:var(--paper); border-radius:4px}
.pf-summary-list .pf-qty-ctl{display:flex; align-items:center; gap:4px}
.pf-summary-list .pf-qty-ctl button{width:22px; height:22px; border:1px solid var(--line-strong); background:var(--surface); border-radius:4px; font-weight:700; line-height:1; cursor:pointer}
.pf-summary-list .pf-remove{color:#B3261E; font-weight:700; cursor:pointer; background:none; border:0; font-size:1rem; line-height:1}
.pf-summary-empty{color:var(--muted); font-size:.9rem}

.pf-mobilebar{position:fixed; inset-inline:0; bottom:0; z-index:180; display:none; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px; background:var(--ink); color:#fff; box-shadow:0 -2px 12px rgba(0,0,0,.18)}
.pf-mobilebar.is-visible{display:flex}
.pf-mobilebar b{font-size:.92rem}
.pf-mobilebar .btn{padding:10px 16px; font-size:.9rem}
@media (min-width:900px){ .pf-mobilebar{display:none !important} }

.pf-doc-result{border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px 16px; margin-bottom:10px}
.pf-doc-result h4{margin:0 0 8px; font-size:1rem}
.pf-doc-result .pf-mini-flow{display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:.88rem}
.pf-doc-result .pf-mini-flow span{background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:4px 10px}
.pf-doc-result .pf-mini-flow .arrow{border:0; background:none; padding:0; color:var(--muted)}

.pf-field-row{display:grid; grid-template-columns:1fr; gap:10px; margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--line)}
@media (min-width:640px){ .pf-field-row{grid-template-columns:repeat(3,1fr); align-items:end} }
.pf-field-row .field label{font-size:.85rem; font-weight:700; margin-bottom:4px; display:block}
.pf-field-row .field input, .pf-field-row .field select{width:100%; padding:9px 10px; border:1px solid var(--line-strong); border-radius:var(--radius-sm)}
.pf-field-row .pf-doc-title{font-weight:800; margin:0 0 4px}

/* FAQ */
details.faq{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); margin-bottom:10px; padding:4px 0; transition:border-color .16s var(--ease), box-shadow .16s var(--ease)}
details.faq:hover{border-color:var(--line-strong)}
details.faq[open]{box-shadow:var(--shadow-sm); border-color:var(--line-strong)}
details.faq summary{padding:10px 16px; min-height:34px; display:flex; align-items:center; justify-content:space-between; gap:10px; font-weight:700; cursor:pointer; color:var(--ink); list-style:none}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+"; flex:0 0 auto; font-weight:400; color:var(--muted); font-size:1.2rem; line-height:1; transition:transform .16s var(--ease)}
details.faq[open] summary::after{content:"–"}
details.faq .a,details.faq>p{padding:0 26px 18px; color:var(--muted)}

/* Table */
.tablewrap{overflow-x:auto; margin:16px 0; border:1px solid var(--line); border-radius:var(--radius-sm)}
table{border-collapse:collapse; width:100%; min-width:520px; background:var(--surface)}
th,td{padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; font-size:.92rem}
th{background:var(--paper); color:var(--ink)}

/* Breadcrumb */
.crumb{font-size:.82rem; color:var(--muted); padding-top:10px; padding-bottom:10px}
.crumb a{color:var(--muted)}
nav.breadcrumb{max-width:var(--maxw); margin:0 auto; padding:10px 16px; font-size:.82rem; color:var(--muted)}
nav.breadcrumb a{color:var(--muted)}

/* Notice / disclaimer */
.notice{background:var(--warn-bg); border-radius:var(--radius-sm); padding:14px 16px; font-size:.88rem; color:var(--ink-2); margin:10px 0}

/* Footer */
footer{background:var(--ink); color:#C9D4E6; padding:40px 0 20px; margin-top:10px}
footer a{color:#C9D4E6}
footer .cols{display:grid; grid-template-columns:1fr; gap:20px}
@media (min-width:640px){ footer .cols{grid-template-columns:repeat(3,1fr)} }
footer h6{color:#fff; font-size:.85rem; margin:0 0 8px}
footer a{display:block; padding:6px 0; font-size:.88rem}
.fineprint{border-top:1px solid #2A3B58; margin-top:20px; padding-top:4px; font-size:.78rem; color:#8FA0BE}

footer .ftr-grid{display:grid; grid-template-columns:1fr; gap:22px 24px}
@media (min-width:640px){ footer .ftr-grid{grid-template-columns:1fr 1fr} }
@media (min-width:980px){ footer .ftr-grid{grid-template-columns:1.5fr 1fr 1fr 1fr; gap:24px} }
footer .ftr-brand{display:flex; flex-direction:column; gap:6px}
footer .ftr-logo{display:flex; flex-direction:column; padding:0; font-weight:800; color:#fff; font-size:1.05rem}
footer .ftr-logo .en{font-weight:600; color:#9DAFCB; font-size:.72rem; letter-spacing:.03em; margin-top:2px}
footer .ftr-desc{font-size:.85rem; color:#9DAFCB; line-height:1.6; margin:2px 0 4px; max-width:34ch}
footer .ftr-contact{display:flex; align-items:center; gap:7px; padding:0; margin:0; font-size:.85rem}
footer .ftr-info{display:flex; align-items:center; gap:7px; padding:0; margin:0; font-size:.85rem; color:#9DAFCB}
footer .ftr-icon{font-size:.85rem; opacity:.85}
footer .ftr-col h6{font-weight:700; letter-spacing:.01em}
footer .ftr-col ul{list-style:none; margin:0; padding:0}
footer .ftr-col li a{padding:5px 0}
footer .ftr-col a:hover, footer .ftr-contact:hover{color:var(--brand-2)}
footer .fineprint{border-top:none; margin-top:16px; margin-bottom:0; padding-top:0}
footer .ftr-legal{display:flex; align-items:center; gap:16px}
footer .ftr-cta{color:var(--brand-2); font-weight:700}
footer .ftr-bottom{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px;
  margin-top:14px; padding-top:6px; border-top:1px solid #22314A;
}
footer .ftr-copy{font-size:.76rem; color:#7C8CA6; margin:0}
footer .ftr-bottom-link{display:inline; padding:0; font-size:.78rem; color:#9DAFCB; font-weight:600}
footer .ftr-bottom-link:hover{color:var(--brand-2)}

/* Tel link */
.tel{white-space:nowrap}

/* Utility */
.mt0{margin-top:0}
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

/* Contact form (FormSubmit) */
.contactform{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:20px; margin:18px 0 8px; box-shadow:var(--shadow);
}
@media (min-width:640px){ .contactform{padding:28px} }
.contactform .cf-grid{display:grid; grid-template-columns:1fr; gap:14px}
@media (min-width:640px){ .contactform .cf-grid{grid-template-columns:1fr 1fr; gap:16px} }
.contactform .field{display:flex; flex-direction:column; gap:6px; min-width:0}
.contactform .field-full{grid-column:1/-1}
.contactform label{font-size:.88rem; font-weight:700; color:var(--ink-2)}
.contactform input,
.contactform select,
.contactform textarea{
  min-height:var(--touch); width:100%; padding:10px 14px; font:inherit; font-size:1rem;
  color:var(--text); background:var(--paper); border:1.5px solid var(--line-strong); border-radius:var(--radius-sm);
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease), background-color .15s var(--ease);
}
.contactform textarea{min-height:calc(var(--touch)*2); resize:vertical; padding-top:12px}
.contactform input:hover,
.contactform select:hover,
.contactform textarea:hover{border-color:var(--muted-2)}
.contactform input:focus,
.contactform select:focus,
.contactform textarea:focus{
  outline:none; border-color:var(--brand); background:var(--surface);
  box-shadow:0 0 0 4px rgba(42,91,215,.14);
}
.contactform .btnrow{margin:20px 0 0}
.contactform .btn{min-width:100%}
@media (min-width:560px){ .contactform .btn{min-width:220px} }
.cl-table{
  margin-top:16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow); overflow:hidden;
}
.cl-row{
  display:flex; align-items:center; gap:20px; padding:16px 20px; border-bottom:1px solid var(--line);
}
.cl-row:last-child{border-bottom:none}
.cl-q{flex:0 0 38%; font-size:.92rem; font-weight:700; color:var(--ink-2)}
.cl-a{flex:1 1 62%; min-width:0}
#cl-form input[type=text],
#cl-form input[type=date]{
  min-height:var(--touch); width:100%; padding:10px 14px; font:inherit; font-size:1rem;
  color:var(--text); background:var(--paper); border:1.5px solid var(--line-strong); border-radius:var(--radius-sm);
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease), background-color .15s var(--ease);
}
#cl-form input[type=text]:focus,
#cl-form input[type=date]:focus{
  outline:none; border-color:var(--brand); background:var(--surface);
  box-shadow:0 0 0 4px rgba(42,91,215,.14);
}
#cl-form input[type=date]:disabled{opacity:.5}
.cl-radiorow{display:flex; flex-wrap:wrap; gap:8px}
.cl-radio{
  display:inline-flex; align-items:center; gap:6px; font-size:.88rem; font-weight:600; color:var(--text);
  background:var(--paper); border:1.5px solid var(--line-strong); border-radius:999px; padding:8px 14px;
  cursor:pointer; user-select:none; transition:border-color .15s var(--ease), background-color .15s var(--ease);
  white-space:nowrap;
}
.cl-radio:has(input:checked){border-color:var(--brand); background:rgba(42,91,215,.08); color:var(--brand-ink)}
.cl-deadlinerow{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.cl-deadlinerow input[type=date]{width:auto; flex:1 1 180px}
@media (max-width:767px){
  .cl-row{flex-direction:column; align-items:stretch; gap:8px}
  .cl-q{flex:none}
  .cl-a{flex:none}
}
#checklist .field{display:flex; flex-direction:column; gap:6px}
#checklist .field label{font-size:.88rem; font-weight:700; color:var(--ink-2)}
#checklist .field textarea{
  width:100%; padding:10px 14px; font:inherit; font-size:1rem; min-height:calc(var(--touch)*1.6); resize:vertical;
  color:var(--text); background:var(--paper); border:1.5px solid var(--line-strong); border-radius:var(--radius-sm);
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease), background-color .15s var(--ease);
}
#checklist .field textarea:focus{
  outline:none; border-color:var(--brand); background:var(--surface);
  box-shadow:0 0 0 4px rgba(42,91,215,.14);
}
#checklist .btnrow .btn{min-width:100%}
@media (min-width:560px){ #checklist .btnrow .btn{min-width:260px} }

.doc-notebox{
  background:var(--paper); border:1px solid var(--line); border-left:3px solid var(--brand);
  border-radius:var(--radius-sm); padding:12px 16px; margin:12px 0 16px;
}
.doc-notebox strong{display:block; color:var(--brand-ink); font-size:.9rem; margin-bottom:4px}
.doc-notebox p{margin:0; font-size:.92rem; color:var(--text)}
.doc-table{width:100%; border-collapse:collapse; margin-top:8px}
.doc-table th, .doc-table td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); font-size:.92rem}
.doc-table th{font-weight:700; color:var(--ink-2); font-size:.82rem}
.doc-table tbody tr:last-child td{border-bottom:none}
.doc-tag{
  display:inline-block; font-size:.8rem; font-weight:700; border-radius:999px; padding:4px 12px; white-space:nowrap;
}
.doc-tag-ok{background:rgba(42,91,215,.1); color:var(--brand-ink)}
.doc-tag-check{background:var(--surface); color:var(--ink-2); border:1px solid var(--line-strong)}
.doc-tag-need{background:var(--brand); color:#fff}
.doc-tag-sm{font-size:.74rem; padding:2px 10px; margin-left:8px; vertical-align:middle}
.doc-list-tagged li{display:flex; align-items:center; flex-wrap:wrap; gap:2px}
.doc-inline-link{display:inline-block; font-size:.82rem; font-weight:600; padding:6px 12px; margin-left:4px}
@media (max-width:639px){
  .doc-table thead{display:none}
  .doc-table, .doc-table tbody, .doc-table tr, .doc-table td{display:block; width:100%}
  .doc-table tr{padding:10px 0; border-bottom:1px solid var(--line)}
  .doc-table td{border-bottom:none; padding:3px 0}
  .doc-table td:first-child{font-weight:700; color:var(--ink)}
  .doc-table td:before{content:attr(data-label); display:block; font-size:.76rem; color:var(--muted-2); margin-bottom:2px}
  .doc-table td:first-child:before{content:none}
}
.contactform .cf-checkgroup{display:flex; flex-wrap:wrap; gap:8px}
.contactform .cf-check{
  display:inline-flex; align-items:center; gap:6px; font-size:.88rem; font-weight:600; color:var(--text);
  background:var(--paper); border:1.5px solid var(--line-strong); border-radius:999px; padding:8px 14px;
  cursor:pointer; user-select:none; transition:border-color .15s var(--ease), background-color .15s var(--ease);
}
.contactform .cf-check:hover{border-color:var(--muted-2)}
.contactform .cf-check input{width:auto; min-height:0; padding:0; margin:0; accent-color:var(--brand)}
.contactform .cf-check:has(input:checked){border-color:var(--brand); background:rgba(42,91,215,.08); color:var(--brand)}
.contactform .cf-checkgroup-title{flex-basis:100%; font-size:.8rem; font-weight:700; color:var(--ink-2); margin:6px 0 -2px}
.contactform .cf-checkgroup-title:first-child{margin-top:0}
.contactform .req{color:#d33; font-weight:700}
.contactform .cf-doctype-trigger{
  min-height:var(--touch); width:100%; padding:10px 14px; font:inherit; font-size:1rem; text-align:left;
  color:var(--text); background:var(--paper); border:1.5px solid var(--line-strong); border-radius:var(--radius-sm);
  cursor:pointer; transition:border-color .15s var(--ease);
}
.contactform .cf-doctype-trigger:hover{border-color:var(--muted-2)}
.contactform .cf-doctype-selected{font-size:.82rem; color:var(--ink-2); margin:6px 0 0; min-height:1em}
.contactform .cf-file-wrap{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.contactform .cf-file-native{position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; pointer-events:none}
.contactform .cf-file-btn{
  min-height:var(--touch); padding:10px 14px; font:inherit; font-size:.92rem; font-weight:600;
  color:var(--text); background:var(--paper); border:1.5px solid var(--line-strong); border-radius:var(--radius-sm);
  cursor:pointer; transition:border-color .15s var(--ease); white-space:nowrap;
}
.contactform .cf-file-btn:hover{border-color:var(--muted-2)}
.contactform .cf-file-status{font-size:.85rem; color:var(--ink-2)}
.contactform .cf-doctype-dialog{
  border:none; border-radius:var(--radius-lg); padding:0; width:min(640px, calc(100vw - 32px));
  max-height:min(80vh, 720px); box-shadow:0 20px 60px rgba(0,0,0,.25);
}
.contactform .cf-doctype-dialog::backdrop{background:rgba(10,20,40,.5)}
.contactform .cf-doctype-dialog-inner{display:flex; flex-direction:column; max-height:min(80vh, 720px)}
.contactform .cf-doctype-dialog-head{
  display:flex; align-items:center; justify-content:space-between; padding:16px 20px;
  border-bottom:1px solid var(--line);
}
.contactform .cf-doctype-dialog-head h3{margin:0; font-size:1.05rem}
.contactform .cf-doctype-close{
  background:none; border:none; font-size:1.1rem; line-height:1; cursor:pointer; color:var(--ink-2);
  padding:6px; min-height:0;
}
.contactform .cf-doctype-dialog-body{padding:16px 20px; overflow-y:auto}
.contactform .cf-doctype-dialog-foot{padding:14px 20px; border-top:1px solid var(--line)}
.contactform .cf-doctype-dialog-foot .btn{min-width:100%}
.cf-altnote{font-size:.85rem; color:var(--muted-2); margin:6px 0 18px}
.cf-altnote a{color:var(--brand-ink); font-weight:500}
.cf-email-copy{font-size:.78rem; font-weight:500; color:var(--brand-ink); background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:2px 8px; cursor:pointer; line-height:1.6}
.cf-email-copy:hover{background:var(--surface)}

/* TL;DR summary box */
.tldr{display:flex; gap:12px; align-items:flex-start; background:var(--paper); border:1px solid var(--line); border-radius:4px; padding:16px 18px; margin:18px 0}
.tldr .tldr-icon{font-size:1.3rem; line-height:1; flex:none}
.tldr b{color:var(--brand-ink)}

/* Document guide page: search + category board + accordion */
.hero-document{background:radial-gradient(ellipse 80% 60% at 50% 0%, rgba(42,91,215,.08), transparent 70%)}
.hero-document.hero-photo .hero-split{min-height:auto}
.hero-document.hero-photo .hero-copy{padding:20px 20px}
@media (min-width:900px){ .hero-document.hero-photo .hero-copy{padding:26px 20px} }

#doc-search-wrap{padding:14px 0}
.doc-search{display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line-strong); border-radius:999px; padding:10px 18px; max-width:560px; margin:0 auto 12px}
.doc-search-icon{flex:none; font-size:1rem}
.doc-search input{flex:1; border:none; background:transparent; font:inherit; color:var(--text); min-height:32px}
.doc-search input:focus{outline:none}

.cat-tabs{display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:4px; margin-bottom:8px}
.cat-tabs::-webkit-scrollbar{display:none}
.cat-tabs a{flex:none; padding:8px 16px; border:1px solid var(--line-strong); border-radius:999px; background:var(--surface); color:var(--ink-2); font-weight:700; font-size:.88rem; white-space:nowrap}
.cat-tabs a:hover{background:var(--brand); border-color:var(--brand); color:#fff; text-decoration:none}

.doc-noresult{text-align:center; color:var(--muted); margin:18px 0; line-height:1.7}
.doc-noresult .btn{margin-top:10px}

.doc-cat{padding:28px 0}
.doc-cat h2{scroll-margin-top:80px}

.doc-board{border:1px solid var(--line-strong); border-radius:var(--radius); overflow:hidden; background:var(--surface)}
.doc-item{border-bottom:1px solid var(--line)}
.doc-item:last-child{border-bottom:none}
.doc-item[open]{background:var(--paper)}
.doc-item-head{list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px; padding:16px 18px; min-height:var(--touch)}
.doc-item-head::-webkit-details-marker{display:none}
.doc-item-icon{flex:none; font-size:1.1rem}
.doc-item-name{flex:none; font-weight:800; color:var(--ink); font-size:1rem}
.doc-item-desc{flex:1; color:var(--muted); font-size:.88rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.doc-item-toggle{flex:none; width:22px; height:22px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line-strong); border-radius:50%; color:var(--brand-ink); font-weight:800}
.doc-item-toggle::before{content:'+'}
.doc-item[open] .doc-item-toggle::before{content:'\2212'}
.doc-item-body{padding:0 18px 22px; border-top:1px solid var(--line)}
.doc-item-body h4{color:var(--ink); margin:18px 0 8px; font-size:.98rem}
.doc-item-body .grid{margin-top:8px}
.doc-item-body .grid .card{padding:14px}
.doc-item-body .grid .card h4{margin:0 0 6px; font-size:.88rem; color:var(--muted)}
.doc-item-body .grid .card p{margin:0; font-size:.92rem}
.doc-item-body .proc-chain{color:var(--brand-ink); font-weight:700; font-size:.92rem; word-break:keep-all; overflow-wrap:normal; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 14px}
.doc-item-body .btnrow{margin-top:20px}

@media (max-width:640px){
  .doc-item-desc{display:none}
  .doc-item-head{padding:14px 14px}
  .doc-item-body{padding:0 14px 18px}
}

/* Document detail CTA row — compact buttons */
.doc-item-body h4{margin:14px 0 6px}
.doc-item-body .btnrow.cta-row{
  display:flex; flex-direction:row; flex-wrap:wrap; align-items:center;
  gap:8px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line);
}
.doc-item-body .btn-sm{
  min-height:38px; padding:0 16px; font-size:.86rem; border-radius:5px;
}
.btn-outline{
  background:transparent; color:var(--brand-ink); border:1.5px solid var(--line-strong);
}
.btn-outline:hover{border-color:var(--brand); background:var(--paper); text-decoration:none}
.doc-issue-note{
  font-size:.82rem; color:var(--muted); line-height:1.5;
}
@media (max-width:480px){
  .doc-item-body .btnrow.cta-row{flex-direction:column; align-items:stretch}
  .doc-item-body .btn-sm{width:100%}
}

/* Non-apostille countries page — board-style country rows + detail cards */
.na-board{display:flex; flex-direction:column; gap:2px}
.na-row{
  display:flex; align-items:center; gap:10px; padding:9px 8px;
  border-radius:6px; color:var(--brand-ink); text-decoration:none;
}
.na-row:hover{background:var(--paper); text-decoration:none}
.na-flag{font-size:1.15rem; line-height:1; flex:0 0 auto}
.na-name{flex:1; font-size:.92rem; display:flex; align-items:baseline; gap:6px; min-width:0}
.na-en{font-size:.76rem; color:var(--muted); font-weight:400}
.na-chev{color:var(--muted); flex:0 0 auto}

.na-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; margin-top:16px}
.na-card{
  background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:16px;
}
.na-card-head{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px}
.na-card-head h3{margin:0; font-size:1.05rem; display:flex; align-items:baseline; gap:6px}
.na-card-head .na-flag{font-size:1.3rem}
.na-card-head .na-flag{display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; overflow:hidden; border:1px solid var(--line); flex:0 0 auto}
.na-card-head .na-flag img{width:100%; height:100%; object-fit:cover; display:block}
.na-badge{
  font-size:.72rem; font-weight:700; color:var(--brand); background:var(--paper);
  border:1px solid var(--line-strong); border-radius:999px; padding:2px 10px; margin-inline-start:auto;
}
.na-facts{margin:10px 0; padding-left:0; list-style:none; font-size:.88rem; line-height:1.6}
.na-facts li{padding:3px 0}
.na-note{font-size:.82rem; color:var(--muted); margin:6px 0}
.na-card .cta-row{margin-top:12px; padding-top:12px; border-top:1px solid var(--line); display:flex; flex-direction:row; align-items:center; gap:8px; flex-wrap:wrap}
.na-card .cta-row .btn-sm{min-height:38px; padding:0 16px; font-size:.86rem; border-radius:5px; flex:0 0 auto}
@media (max-width:360px){
  .na-card .cta-row .btn-sm{flex:1 1 auto}
}

@media (max-width:480px){
  .na-cards{grid-template-columns:1fr}
}

.flagpick-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px 8px}
@media(min-width:480px){.flagpick-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:640px){.flagpick-grid{grid-template-columns:repeat(6,1fr)}}
@media(min-width:1000px){.flagpick-grid{grid-template-columns:repeat(8,1fr)}}
.flagpick{display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 4px; border-radius:var(--radius-sm); text-decoration:none; color:var(--ink); transition:background-color .15s var(--ease), transform .15s var(--ease)}
a.flagpick:hover{background:var(--paper); transform:translateY(-2px); text-decoration:none}
.flagpick .flag-circle{width:52px; height:52px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; background:var(--paper); border:1px solid var(--line)}
.flagpick .flag-circle img{width:100%; height:100%; object-fit:cover; display:block}
.flagpick .cb-name{font-size:.78rem; font-weight:600; text-align:center; line-height:1.25; word-break:keep-all}

[dir="rtl"] .doc-list li{padding:3px 14px 3px 0}
[dir="rtl"] .doc-list li::before{left:auto; right:0}
[dir="rtl"] .info-box ul li{padding:5px 22px 5px 0}
[dir="rtl"] .info-box ul li::before{left:auto; right:0}

/* ===== APO-R1 리뉴얼(2026-10-09) — 메인 첫 화면·간편 접수·접수 완료 =====
   기존 토큰(--ink/--brand/--line/--paper/--radius*)만 사용. 새 색·새 폰트 없음. */
.r1-hero{background:var(--paper); border-bottom:1px solid var(--line)}
.r1-hero .wrap{padding-block:40px 32px}
.r1-hero .hero-tag{margin-bottom:12px}
.r1-hero h1{font-size:clamp(1.75rem, 4.6vw, 2.75rem); line-height:1.22; letter-spacing:-.02em; margin:0; word-break:keep-all}
.r1-hero .lead{max-width:60ch; margin:16px 0 0; color:var(--muted); font-size:1.06rem; line-height:1.7; word-break:keep-all}
.r1-hero .btnrow{margin-top:24px}
.r1-office{display:flex; flex-wrap:wrap; gap:8px 16px; margin:24px 0 0; padding:16px 0 0; border-top:1px solid var(--line); font-size:.9rem; color:var(--ink-2); list-style:none}
.r1-office li{margin:0}
.r1-office b{color:var(--ink)}
.r1-purpose .card h3{font-size:1.06rem}
.r1-purpose .card ul{list-style:none; padding:0; margin:8px 0 0}
.r1-purpose .card li{margin:0; border-top:1px solid var(--line)}
.r1-purpose .card li a{display:flex; min-height:44px; align-items:center; color:var(--ink); font-size:.95rem}
.r1-purpose .card li a:hover{color:var(--brand-ink)}
.r1-products{display:grid; grid-template-columns:1fr; gap:16px; margin:16px 0 0; padding:0; list-style:none}
.r1-product{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:24px}
.r1-product h3{margin:0 0 8px; font-size:1.06rem; line-height:1.4}
.r1-product p{margin:0 0 8px; font-size:.95rem; color:var(--muted)}
.r1-product dl{margin:8px 0 16px; display:grid; grid-template-columns:auto 1fr; gap:8px 16px; font-size:.92rem}
.r1-product dt{color:var(--muted); font-weight:600}
.r1-product dd{margin:0; color:var(--ink)}
.r1-product .btn{margin-top:auto; align-self:flex-start}
.r1-tag{align-self:flex-start; display:inline-block; margin-bottom:8px; padding:2px 8px; border:1px solid var(--line-strong); border-radius:var(--radius-sm); font-size:.8rem; font-weight:600; color:var(--ink-2)}
@media (min-width:640px){ .r1-products{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1024px){ .r1-products{grid-template-columns:repeat(3,1fr)} }
@media (min-width:640px){ .r1-product.is-wide{grid-column:1/-1} }
.r1-flow{counter-reset:flow; list-style:none; margin:16px 0 0; padding:0; display:grid; grid-template-columns:1fr; gap:8px}
.r1-flow li{counter-increment:flow; position:relative; padding:16px 16px 16px 56px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius)}
.r1-flow li::before{content:counter(flow); position:absolute; inset-inline-start:16px; top:16px; width:28px; height:28px; border-radius:50%; background:var(--ink); color:#fff; font-weight:700; font-size:.85rem; display:flex; align-items:center; justify-content:center}
.r1-flow b{display:block; color:var(--ink)}
.r1-flow span{font-size:.92rem; color:var(--muted)}
@media (min-width:900px){ .r1-flow{grid-template-columns:repeat(5,1fr)} .r1-flow li{padding:56px 16px 16px} .r1-flow li::before{top:16px} }
/* 간편 접수 */
.r1-apply .field-full{grid-column:1/-1}
.r1-apply .cf-hint{margin:4px 0 0; font-size:.85rem; color:var(--muted)}
.r1-apply .r1-more{margin:8px 0 0; border:1px dashed var(--line-strong); border-radius:var(--radius); padding:8px 16px}
.r1-apply .r1-more summary{min-height:44px; display:flex; align-items:center; cursor:pointer; font-weight:600; color:var(--ink-2)}
.r1-apply .r1-err{display:block; margin-top:4px; font-size:.85rem; color:#B42318}
.r1-receipt{background:var(--surface); border:1px solid var(--line); border-top:4px solid var(--ok); border-radius:var(--radius-lg); padding:24px; margin:16px 0}
.r1-receipt h2,.r1-receipt h3{margin-top:0}
.r1-receipt .r1-ref{font-size:1.5rem; font-weight:700; letter-spacing:.04em; color:var(--ink); margin:8px 0 16px; word-break:break-all}
.r1-receipt ol{margin:8px 0 0; padding-inline-start:1.2em}
.r1-receipt li{margin-bottom:8px}
.r1-status{display:grid; grid-template-columns:auto 1fr; gap:8px 16px; margin:16px 0; font-size:.95rem}
.r1-status dt{color:var(--muted); font-weight:600}
.r1-status dd{margin:0}
/* 모바일 하단 고정 접수 바(WEBSITE_STANDARD v2 6-10). 데스크톱에서는 숨김 */
.r1-mbar{position:fixed; inset-inline:0; bottom:0; z-index:50; display:flex; gap:8px; padding:8px 16px calc(8px + env(safe-area-inset-bottom)); background:var(--surface); border-top:1px solid var(--line); box-shadow:var(--shadow)}
.r1-mbar .btn{flex:1; min-height:48px}
body.has-r1-mbar{padding-bottom:72px}
@media (min-width:900px){ .r1-mbar{display:none} body.has-r1-mbar{padding-bottom:0} }
/* APO-R2 서류 = 상품 상세 템플릿(2026-10-09). 기존 토큰만 사용 — 새 색·폰트 없음. */
.r2-badges{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px}
.r2-status,.r2-kind{display:inline-block; padding:2px 10px; border-radius:var(--radius-sm); font-size:.82rem; font-weight:600; line-height:1.6; border:1px solid var(--line-strong); color:var(--ink-2); background:var(--surface)}
.r2-status.is-ok{border-color:var(--ok); color:var(--ok)}
.r2-status.is-review{border-color:var(--warn); color:var(--warn-ink); background:var(--warn-bg)}
.r2-status.is-info{border-color:var(--brand); color:var(--brand-ink)}
.r2-list{margin:8px 0 0; padding-inline-start:1.2em}
.r2-list li{margin-bottom:8px}
.r2-dl{display:grid; grid-template-columns:1fr; gap:4px 24px; margin:8px 0 0}
.r2-dl dt{font-weight:600; color:var(--ink); margin-top:8px}
.r2-dl dd{margin:0; color:var(--text)}
@media (min-width:720px){ .r2-dl{grid-template-columns:minmax(9em,auto) 1fr} .r2-dl dt{margin-top:0} .r2-dl dt,.r2-dl dd{padding:8px 0; border-top:1px solid var(--line)} }
.grid.cols-2.r2-split{grid-template-columns:1fr}
@media (min-width:720px){ .grid.cols-2.r2-split{grid-template-columns:repeat(2,1fr)} }
.r2-ol{margin:8px 0 0; padding-inline-start:1.2em}
.r2-ol li{margin-bottom:8px}
.r2-state{white-space:nowrap; font-weight:600; color:var(--ink-2)}
.r2-state.is-ok{color:var(--ok)}
.r2-product{margin-top:8px}
.r2-product dl{grid-template-columns:1fr}
@media (min-width:640px){ .r2-product dl{grid-template-columns:minmax(8em,auto) 1fr} }
.r2-src{border:1px solid var(--line); border-radius:var(--radius); padding:8px 16px; background:var(--surface)}
.r2-src summary{min-height:44px; display:flex; align-items:center; cursor:pointer; font-weight:600; color:var(--ink-2)}
.r2-src ul{margin:8px 0; padding-inline-start:1.2em; font-size:.9rem}
.r2-src li{margin-bottom:6px; overflow-wrap:anywhere}
.cmp-table td{overflow-wrap:anywhere}
@media (max-width:639px){
  .r2-table{min-width:0!important; width:100%}
  .r2-table thead{display:none}
  .r2-table tr{display:block; padding:8px 0; border-top:1px solid var(--line)}
  .r2-table td{display:block; border:0!important; padding:2px 12px!important; white-space:normal}
  .r2-table td:first-child{padding-top:6px!important}
}
/* APO-R2: 버튼·입력칸은 브라우저 기본(시스템 글꼴)을 쓰므로 본문 글꼴을 상속시킨다 — 메인 탭·제출 버튼만 다른 글꼴로 보이던 원인 */
button,input,select,textarea,optgroup{font-family:inherit}

/* APO-R3 메신저 상담 QR — 보스 원본 파일 그대로, 크기는 CSS 로만(파일 변환·리사이즈 금지). 흰 여백은 QR 인식용 여백(이미지 무변경). */
.r3-qr{margin-top:28px; padding:20px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--paper)}
.r3-qr h3{margin:0 0 6px; font-size:1.05rem}
.r3-qr-row{display:flex; flex-wrap:wrap; gap:20px; margin-top:12px}
.r3-qr figure{margin:0; text-align:center}
.r3-qr a{display:inline-block; border-radius:var(--radius-lg)}
.r3-qr img{display:block; width:132px; height:132px; padding:10px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-sizing:content-box}
.r3-qr figcaption{margin-top:6px; font-size:.85rem; color:var(--muted)}

/* APO-R3 일본어·중국어: 전역 word-break:keep-all 은 공백 없는 CJK 문장을 한 덩어리로 묶어 모바일 가로 넘침을 만든다(기존 결함 D6).
   ja·zh-CN 은 글자 단위 줄바꿈(word-break:normal) + 금칙 처리(line-break:strict). 한국어·기타 언어는 그대로. */
html:lang(ja) *, html:lang(zh-CN) *{word-break:normal !important; line-break:strict}