/* 상품 상세 — 미리보기(docs/germany/germany-employment-reference.html) 배치(product-detail-steps.mjs, 2026-10-29).
   제목은 카드 없이(태그 알약 · 큰 제목 · 한 줄 안내), 아래 「ORDER · 필요한 단계를 선택하세요」 2열 카드, 오른쪽 위 서류 미리보기, 그 아래 신청 옵션.
   목차(알약 탭)는 미리보기처럼 없앤다. product-detail.css 뒤에 실린다(같은 특이도면 이 파일이 이긴다). 모듈이 붙인 .pd-steps-on 에서만 바뀐다. */
.pd-page.pd-steps-on{--pd-accent:#1E5BBA;--pd-accent-soft:#e8f0ff;--pd-navy:#0A2A5E;--pd-muted:#5b6b84;--pd-line:#e3e9f3}
.pd-page.pd-steps-on .pd-purchase-layout{grid-template-areas:"hero sample" "steps purchase" "process purchase" "error purchase" "toc purchase" "content purchase";grid-template-rows:auto auto auto auto auto 1fr}
/* 머리 — 카드 배경을 걷고 미리보기 제목처럼 */
html .pd-page.pd-steps-on header.pd-hero{background:none;border:0;border-radius:0;padding:4px 48px 0 0;margin:0 0 6px;min-height:0;align-self:start}
html .pd-page.pd-steps-on header.pd-hero .crumb{background:var(--pd-accent-soft);border-color:transparent;color:var(--pd-accent)}
html .pd-page.pd-steps-on .pd-hero h1{font-size:30px;line-height:1.3;margin:12px 0 0}
.pd-page.pd-steps-on .pd-lead{margin:8px 0 0;max-width:620px;font-size:14px;line-height:1.6;color:var(--pd-muted)}
.pd-page.pd-steps-on .pd-lead .pd-secondary,.pd-page.pd-steps-on .pd-steps .pd-secondary{display:block;font-size:.82em;font-weight:500;opacity:.8}
/* 서류 미리보기(오른쪽 위) — 견본 그림이 없어서 서류 이름·국기·도장 모양 종이로 대신한다 */
.pd-page.pd-steps-on .pd-sample{grid-area:sample;align-self:start;margin:0 0 16px;padding:12px 16px;border:1px solid var(--pd-line);border-radius:14px;background:#eef2f9;text-align:center}
.pd-page .pd-sample-paper{position:relative;display:flex;flex-direction:column;gap:6px;height:96px;padding:12px 13px;overflow:hidden;border:1px solid #e6eaf2;border-radius:8px;background:#fff;box-shadow:0 8px 20px rgba(10,42,94,.14);text-align:start}
.pd-page .pd-sample-head{display:flex;align-items:center;gap:7px;padding-bottom:7px;border-bottom:2px solid var(--pd-navy)}
.pd-page .pd-sample-logo{flex:none;width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,#0A2A5E,#1E5BBA)}
.pd-page .pd-sample-title{min-width:0;overflow:hidden;font-size:13px;font-weight:800;color:var(--pd-navy);white-space:nowrap;text-overflow:ellipsis}
.pd-page .pd-sample-lines{display:flex;flex-direction:column;gap:6px;margin-top:3px}
.pd-page .pd-sample-lines span{display:block;height:5px;border-radius:3px;background:#e4e8f1}
.pd-page .pd-sample-lines span:nth-child(2){width:72%}
.pd-page .pd-sample-lines span.is-block{height:18px;border-radius:5px;background:#eef2f8}
.pd-page .pd-sample-lines span:last-child{width:55%}
.pd-page .pd-sample-seal{position:absolute;right:12px;bottom:10px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:2px solid #d9534f;border-radius:50%;color:#d9534f;font-size:9px;font-weight:800;transform:rotate(-12deg);opacity:.7}
.pd-page .pd-sample-cap{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:8px;font-size:13px;font-weight:700;color:var(--pd-muted)}
.pd-page .pd-sample-flag{flex:none;width:22px;height:15px;border-radius:3px;background:var(--pd-flag) center/cover no-repeat;box-shadow:0 0 0 1px rgba(10,42,94,.12)}
/* ORDER · 단계 카드 */
.pd-page .pd-steps{grid-area:steps;min-width:0;margin:6px 0 26px}
.pd-page .pd-steps-head{display:flex;flex-direction:column;gap:2px;margin-bottom:12px}
.pd-page .pd-steps-kicker{font-size:14px;font-weight:800;letter-spacing:2px;color:var(--pd-accent)}
.pd-page .pd-steps-title{margin:0;font-size:20px;font-weight:800;letter-spacing:-.5px;line-height:1.35;color:#192a45}
.pd-page .pd-steps-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pd-page .pd-step{position:relative;display:flex;gap:13px;width:100%;min-width:0;box-sizing:border-box;margin:0;padding:16px;border:1.5px solid var(--pd-line);border-radius:14px;background:#fff;color:inherit;font:inherit;text-align:start;transition:border-color .18s,box-shadow .18s,transform .18s}
.pd-page button.pd-step{cursor:pointer}
.pd-page button.pd-step:hover{border-color:#bcc9e8;transform:translateY(-2px);box-shadow:0 8px 18px rgba(10,42,94,.1)}
.pd-page button.pd-step:focus-visible{outline:3px solid rgba(30,91,186,.35);outline-offset:2px}
.pd-page .pd-step.is-on{border-color:var(--pd-accent);background:#f6faff;box-shadow:0 8px 18px rgba(30,91,186,.14)}
.pd-page .pd-step.is-info{background:#fbfcfe;border-style:dashed}
.pd-page .pd-step[data-action="held"]{opacity:.7;background:#f6f7f9}
.pd-page .pd-step-ck{flex:none;display:flex;align-items:center;justify-content:center;width:24px;height:24px;box-sizing:border-box;border:2px solid #c2cbe0;border-radius:7px;background:#fff;color:#fff;font-size:14px;font-weight:800}
.pd-page .pd-step.is-on .pd-step-ck{border-color:var(--pd-accent);background:var(--pd-accent)}
.pd-page .pd-step.is-info .pd-step-ck{border:0;background:none;font-size:18px}
.pd-page .pd-step-main{flex:1;min-width:0;display:flex;flex-direction:column}
.pd-page .pd-step-t{display:flex;align-items:flex-start;flex-wrap:wrap;gap:4px 7px;font-size:16px;font-weight:800;line-height:1.35;color:#192a45}
.pd-page .pd-step-name{min-width:0}
.pd-page .pd-step-badge{flex:none;padding:2px 7px;border-radius:999px;background:#e0eaff;color:var(--pd-accent);font-size:12px;font-weight:800;line-height:1.5}
.pd-page .pd-step-badge.is-quote{background:#fff4dc;color:#a46a00}
.pd-page .pd-step-d{margin-top:3px;font-size:14px;line-height:1.45;color:var(--pd-muted)}
.pd-page .pd-steps-current{margin:12px 0 0;font-size:14px;font-weight:700;color:var(--pd-navy)}
.pd-page .pd-steps-status{margin:6px 0 0;font-size:13px;font-weight:700;color:#b42318}
.pd-page .pd-steps-status:empty{display:none}
.pd-page .pd-steps.is-busy .pd-steps-status{color:var(--pd-muted)}
.pd-page .pd-steps.is-busy .pd-steps-grid{opacity:.6;pointer-events:none}
/* 공정 선택 목록은 카드가 대신한다 — 읽어 주기(role=status)는 남기고 화면에서만 뺀다. 한 칸씩 켜고 꺼서 닿지 않는 구성이 있으면(.pd-steps-all) 그대로 보인다. */
.pd-page.pd-steps-on:not(.pd-steps-all) .pd-process-options{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pd-page.pd-steps-on .pd-toc{display:none!important}
@media (max-width:980px){
  .pd-page.pd-steps-on .pd-purchase-layout{grid-template-areas:"hero" "steps" "process" "error" "purchase" "toc" "content";grid-template-rows:none}
  .pd-page.pd-steps-on .pd-sample{display:none}
  html .pd-page.pd-steps-on header.pd-hero{padding:0 44px 0 0}
  html .pd-page.pd-steps-on .pd-hero h1{font-size:24px}
}
@media (max-width:640px){
  .pd-page .pd-steps-grid{grid-template-columns:minmax(0,1fr)}
  .pd-page .pd-step{padding:14px}
}
/* ── 2026-10-30 사용자 「상품 상세를 변경」(서류 상세 /doc-service 를 지우고 그 미리보기 모양을 여기로) — germany-employment-reference.html 값 ──
   옅은 회청 배경 · ← 목록으로 알약 · [📂 ○○ 서류] 태그 · 제목 + 둥근 국기 배지 · ORDER 한 줄 머리 · 큰 견본 종이(SVG) ·
   남색 머리 신청 카드(PC) · 처리 속도 칩 한 줄 · 서류 설명 카드. 배송 안내 카드는 뺐다(같은 날 「배송은 빼 줘 불필요해」). */
.pd-page.pd-steps-on{background:linear-gradient(180deg,#f8f9fc 0%,#eef0f6 100%)}
.pd-page.pd-steps-on .pd-hero-top{display:flex;flex-direction:column;align-items:flex-start}
.pd-page.pd-steps-on .pd-back{display:inline-flex;align-items:center;gap:6px;margin:0 0 14px;padding:8px 14px;border:1px solid #e4e8f1;border-radius:10px;background:#fff;font-size:13px;font-weight:700;color:#6b7388;text-decoration:none;transition:all .16s ease}
.pd-page.pd-steps-on .pd-back:hover{color:var(--pd-accent);border-color:#cdd8ef;transform:translateX(-3px);box-shadow:0 6px 14px rgba(10,42,94,.1)}
.pd-page.pd-steps-on .pd-tag{display:inline-flex;align-items:center;gap:7px;max-width:100%;margin:0 0 4px;padding:5px 12px;border-radius:999px;background:#e0eaff;color:var(--pd-accent);font-size:14px;font-weight:800}
.pd-page.pd-steps-on .pd-tag .pd-secondary{display:inline;margin-inline-start:4px}
.pd-page.pd-steps-on .pd-h1row{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
html .pd-page.pd-steps-on .pd-hero .pd-h1row h1{margin:0;font-size:28px;letter-spacing:-1px;color:#1a2238}
html .pd-page.pd-steps-on header.pd-hero .pd-h1row .crumb{flex:none;padding:5px 13px 5px 6px;border:1px solid #e4e8f1;border-radius:999px;background:#fff;box-shadow:0 2px 8px rgba(10,42,94,.06);font-size:14px;font-weight:800;color:#0A2A5E}
html .pd-page.pd-steps-on header.pd-hero .pd-h1row .crumb.pd-has-flag::before{width:22px;height:22px;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.1)}
.pd-page.pd-steps-on .pd-lead{max-width:560px;color:#6b7388}
.pd-page.pd-steps-on .pd-steps-head{flex-direction:row;align-items:baseline;gap:12px;margin-bottom:14px}
.pd-page.pd-steps-on .pd-steps-title{color:#1a2238}
.pd-page .pd-steps-how{margin:12px 0 0;font-size:13px;line-height:1.5;color:#6b7388}
.pd-page .pd-steps-how .pd-secondary{display:block;font-size:.9em;opacity:.8}
.pd-page.pd-steps-on .pd-steps-current{margin-top:6px}
/* 견본 종이 — 미리보기처럼 크게(옅은 파랑 판), 올리면 크게 */
.pd-page.pd-steps-on .pd-sample{padding:16px;border-color:#e4e8f1}
.pd-page .pd-sample .pd-sample-paper{display:block;height:auto;padding:0;transform-origin:50% 0;transition:transform .25s ease,box-shadow .25s ease}
.pd-page .pd-sample-paper svg{display:block;width:100%;height:auto}
@media (hover:hover){.pd-page .pd-sample .pd-sample-paper:hover{position:relative;z-index:30;transform:scale(1.2);box-shadow:0 18px 44px rgba(10,42,94,.28)}}
@media (prefers-reduced-motion:reduce){.pd-page .pd-sample .pd-sample-paper{transition:none}}
.pd-page .pd-sample .pd-sample-cap{margin-top:10px;font-size:14px;color:#6b7388}
/* 서류 설명 = 미리보기 상세 카드(.us-detail) — 📘 머리, 소제목 남색 16px, 본문 14px, 구역 사이 줄 */
.pd-page.pd-steps-on #sec-desc{padding:22px 24px;border:1px solid #e4e8f1;border-radius:16px;box-shadow:0 6px 18px rgba(10,42,94,.05)}
html .pd-page.pd-steps-on #sec-desc>h2.pd-description-title{display:flex!important;align-items:center;gap:9px;padding:0;font-size:18px!important;letter-spacing:-.3px;color:#0A2A5E}  /* product-detail.css 가 !important 로 block·28px 을 건다 */
html .pd-page.pd-steps-on #sec-desc>h2.pd-description-title::before{inset:auto;content:"📘";position:static;display:flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border-radius:8px;background:#e0eaff;font-size:15px}
.pd-page.pd-steps-on #sec-desc .akd-blk+.akd-blk{margin-top:16px;padding-top:16px;border-top:1px solid #e4e8f1}
.pd-page.pd-steps-on #sec-desc .akd-h{margin:0 0 8px;font-size:16px;font-weight:800;color:#0A2A5E}
.pd-page.pd-steps-on #sec-desc .akd-b{font-size:14px;line-height:1.85;color:#3a4660}
/* 신청 칸(PC) = 미리보기 「신청 내역」 카드 — 남색 그라데이션 머리, 둥글기 16, 처리 속도 칩 한 줄. 휴대폰 신청 창(pp-sheet-mode)은 그대로. */
@media (min-width:981px){
  body.pd-purchase-page .pd-page.pd-steps-on .pd-purchase{border-color:#e4e8f1;border-radius:16px;box-shadow:0 10px 26px rgba(10,42,94,.08)}
  body.pd-purchase-page .pd-page.pd-steps-on .pd-purchase #pp-sheet-title{margin:-24px -24px 16px;padding:15px 18px;border-radius:15px 15px 0 0;background:linear-gradient(135deg,#0A2A5E,#1E5BBA);color:#fff;font-size:16px;font-weight:800}  /* 칸이 overflow:visible 이라 머리 모서리를 칸(16 - 테두리 1)에 맞춰 둥글게(2026-10-30 「preview 에서는 라운드인데 여기선 각지네」) */
  body.pd-purchase-page .pd-page.pd-steps-on .pd-purchase #pp-sheet-title::before{content:"🧾 "}
  body.pd-purchase-page .pd-page.pd-steps-on .pd-purchase #pp-sheet-title .pp-ko{color:#dce7ff}
  body.pd-purchase-page .pd-page.pd-steps-on .pd-purchase .pp-chips{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px}
  body.pd-purchase-page .pd-page.pd-steps-on .pd-purchase .pp-chip{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:0;padding:9px 4px;text-align:center}
  body.pd-purchase-page .pd-page.pd-steps-on .pd-purchase .pp-chip .pp-chip-name{font-size:13.5px}
  body.pd-purchase-page .pd-page.pd-steps-on .pd-purchase .pp-chip .pp-days{justify-content:center;font-size:11.5px}
  body.pd-purchase-page .pd-page.pd-steps-on .pd-purchase .pp-chip .pp-days em{font-size:11px}
  body.pd-purchase-page .pd-page.pd-steps-on .pd-purchase .pp-chip .pp-option-price{font-size:13.5px}
  body.pd-purchase-page .pd-page.pd-steps-on .pd-purchase .pp-chip.is-picked .pp-option-price{padding-inline-end:0}
  body.pd-purchase-page .pd-page.pd-steps-on .pd-purchase .pp-chip.is-picked::after{top:5px;margin-top:0;inset-inline-end:5px;width:16px;height:16px;font-size:9px;line-height:16px}  /* 한 줄 칩에선 ✓ 를 모서리로 */
}
@media (max-width:980px){
  .pd-page.pd-steps-on .pd-back{margin-bottom:10px}
  html .pd-page.pd-steps-on .pd-hero .pd-h1row h1{font-size:24px}
}
/* 오른쪽 열(.pd-side = 견본 + 신청 칸) — 모든 줄을 걸쳐 왼쪽과 따로 흐른다. 신청 칸은 그 안에서 따라 내려온다(position:sticky 그대로). */
.pd-page.pd-steps-on .pd-purchase-layout{grid-template-areas:"hero side" "steps side" "process side" "error side" "toc side" "content side"}
.pd-page.pd-steps-on .pd-side{grid-area:side;min-width:0;align-self:stretch}
.pd-page.pd-steps-on .pd-side .pd-sample{margin:0}
.pd-page.pd-steps-on .pd-side .pd-purchase{margin-top:14px}
@media (max-width:980px){
  .pd-page.pd-steps-on .pd-purchase-layout{grid-template-areas:"hero" "steps" "process" "error" "side" "toc" "content"}
  .pd-page.pd-steps-on .pd-side .pd-purchase{margin-top:20px}
}
/* 서류 설명 = 미리보기 두 카드(2026-10-30 사용자 「preview 랑 다른데 맞춰줘」) — 「📘 ○○란?」(개요 + 두 칸 줄) / 상세 카드(「언제 필요한가요?」 번호 타일 · 그 밖 구역).
   원래 #desc-body(.akd — 서버·화면 같은 규칙)는 숨기고 product-detail-steps.mjs paintAbout 이 같은 데이터로 그린다. */
.pd-page.pd-steps-on #sec-desc.pd-about-on #desc-body{display:none}
.pd-page.pd-steps-on .pd-about-p{margin:10px 0 0;font-size:14px;line-height:1.85;color:#3a4660}
.pd-page.pd-steps-on .pd-facts{margin:12px 0 0;padding:0}
.pd-page.pd-steps-on .pd-fact{display:grid;grid-template-columns:120px minmax(0,1fr);gap:0 12px;padding:8px 6px;border-top:1px solid #e4e8f1;font-size:13px;line-height:1.6}
.pd-page.pd-steps-on .pd-fact dt{margin:0;font-weight:700;color:#5b6472}
.pd-page.pd-steps-on .pd-fact dd{margin:0;color:#1a2238;overflow-wrap:anywhere}
.pd-page.pd-steps-on .pd-detail{margin-top:20px;padding:22px 24px;border:1px solid #e4e8f1;border-radius:16px;background:#fff;box-shadow:0 6px 18px rgba(10,42,94,.05)}
.pd-page.pd-steps-on .pd-detail[hidden]{display:none}
.pd-page.pd-steps-on .pd-dsec+.pd-dsec{margin-top:16px;padding-top:16px;border-top:1px solid #e4e8f1}
.pd-page.pd-steps-on .pd-dsec h3{margin:0 0 8px;font-size:16px;font-weight:800;color:#0A2A5E}
.pd-page.pd-steps-on .pd-dsec h3 .pd-secondary{display:inline;margin-inline-start:6px;font-size:.8em;font-weight:600;opacity:.75}
.pd-page.pd-steps-on .pd-dsec p{margin:0;font-size:14px;line-height:1.85;color:#3a4660}
.pd-page.pd-steps-on .pd-uses{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0;padding:0;list-style:none;counter-reset:u}
.pd-page.pd-steps-on .pd-uses li{padding:12px 14px;border:1px solid #e6ebf4;border-radius:12px;background:#f6f8fc;counter-increment:u}
.pd-page.pd-steps-on .pd-uses b{font-size:14px;line-height:1.6;color:#0A2A5E}
.pd-page.pd-steps-on .pd-uses b::before{content:counter(u) ". "}
html[lang="ar"] .pd-page.pd-steps-on :is(.pd-about,.pd-detail){direction:rtl;text-align:right}
@media (max-width:640px){
  .pd-page.pd-steps-on .pd-uses{grid-template-columns:minmax(0,1fr)}
  .pd-page.pd-steps-on .pd-fact{grid-template-columns:96px minmax(0,1fr)}
  .pd-page.pd-steps-on .pd-detail{padding:18px 16px}
}
/* 하단 = 미리보기 #akdc(ak-docs-content.js) 모양 — 2026-10-30 사용자 「하단도 구성에 맞게 변경」:
   상자 없이 [제목 ─── 가는 줄] 머리 · FAQ 흰 카드 + 주황 Q · 후기 옅은 띠 안 2열 카드 · 에피소드 흰 카드(제목 먼저, 경로는 아래 회색 줄) · 블로그·News 「›」 목록(세로로).
   「서비스 구성 안내」는 미리보기에 없어 위 설명 카드와 같은 카드로 둔다. */
html .pd-page.pd-steps-on .pd-content>section:is(#sec-faq,#sec-review,#sec-episode,#sec-articles){margin-top:26px;padding:0;background:none;border:0;border-radius:0;box-shadow:none}
html .pd-page.pd-steps-on .pd-content>section#sec-composition{margin-top:20px;padding:22px 24px;border-color:#e4e8f1;border-radius:16px;box-shadow:0 6px 18px rgba(10,42,94,.05)}
html .pd-page.pd-steps-on .pd-content .sec-h{display:flex;align-items:center;gap:12px;margin:0 0 14px}
html .pd-page.pd-steps-on .pd-content .sec-h .bar{display:block!important;flex:1;height:1px;background:#e3e9f2}
html .pd-page.pd-steps-on .pd-composition .pc-head{display:flex;align-items:center;gap:12px}
html .pd-page.pd-steps-on .pd-composition .pc-head::after{content:"";flex:1;height:1px;background:#e3e9f2}
html .pd-page.pd-steps-on .pd-content .sec-h h2,html .pd-page.pd-steps-on .pd-content .sec-h.small h2,html .pd-page.pd-steps-on .pd-composition .pc-head h2{padding:0;font-size:20px!important;font-weight:800;letter-spacing:-.2px;color:#0d2a5c;white-space:nowrap}
html .pd-page.pd-steps-on .pd-content .sec-h h2::before,html .pd-page.pd-steps-on .pd-composition .pc-head h2::before{display:none}
/* FAQ */
html .pd-page.pd-steps-on .faq .faq-item{margin-bottom:8px;overflow:hidden;border:1px solid #e6ebf4;border-radius:12px;background:#fff;box-shadow:none}
html .pd-page.pd-steps-on .faq .faq-q{display:flex;align-items:flex-start;gap:9px;margin:0;padding:14px 16px;font-size:14px;font-weight:700;line-height:1.5;color:#12234c}
html .pd-page.pd-steps-on .faq .faq-q .qm{flex-shrink:0;font-weight:800;color:#E8A33D}
html .pd-page.pd-steps-on .faq .ans{margin:0;padding:0 16px 15px 41px;font-size:14px;line-height:1.8;color:#3a4660}
html[dir="rtl"] .pd-page.pd-steps-on .faq .ans{padding:0 41px 15px 16px}
/* 만족 후기 */
html .pd-page.pd-steps-on .rev-band{padding:16px;border:1px solid #e6ebf4;border-radius:14px;background:#f4f7fc}
html .pd-page.pd-steps-on .rev-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
html .pd-page.pd-steps-on .rev{padding:14px 16px;border:1px solid #e9eef7;border-radius:12px;background:#fff}
html .pd-page.pd-steps-on .rev.wide{grid-column:1/-1}
html .pd-page.pd-steps-on .rev .body{margin-top:9px;font-size:13px;line-height:1.7;color:#3a4660;word-break:break-word}
html .pd-page.pd-steps-on .rev .svc{margin-top:10px;padding-top:8px;border-top:1px dashed #eef1f6;font-size:13px;color:#8a97b0}
/* 에피소드 — 제목 먼저, 경로는 아래 회색 메타 한 줄 */
html .pd-page.pd-steps-on #episode-list{display:block}  /* 미리보기처럼 한 줄에 하나 */
html .pd-page.pd-steps-on .epi{display:flex;flex-direction:column;margin:0 0 8px;padding:14px 18px;border:1px solid #e6ebf4;border-radius:12px;background:#fff;text-decoration:none;transition:border-color .15s,box-shadow .15s}
html .pd-page.pd-steps-on .epi:hover{border-color:#c7d6ef;box-shadow:0 2px 10px rgba(18,35,76,.06)}
html .pd-page.pd-steps-on .epi .tw{order:1;display:flex;flex-direction:column}
html .pd-page.pd-steps-on .epi .t{font-size:16px;font-weight:700;line-height:1.4;color:#12234c}
html .pd-page.pd-steps-on .epi .sub{margin-top:4px;font-size:14px;line-height:1.55;color:#5b6b8c}
html .pd-page.pd-steps-on .epi .route{order:2;margin:7px 0 0;padding:0;border-radius:0;background:none;font-size:13px;font-weight:500;color:#8a97b0}
html .pd-page.pd-steps-on .epi .route::before{content:"";display:inline-block;width:14px;height:1px;margin-inline-end:7px;vertical-align:middle;background:#c9d3e3}
html .pd-page.pd-steps-on .epi .route b{font-weight:500;color:inherit}
/* 블로그 · News — 위아래로, 「›」 목록 */
html .pd-page.pd-steps-on #sec-articles .two{display:block}
html .pd-page.pd-steps-on #sec-articles #sec-press{margin-top:26px}
html .pd-page.pd-steps-on .linklist{margin:0;padding:0;list-style:none}
html .pd-page.pd-steps-on .linklist li{display:flex;align-items:baseline;gap:9px;padding:10px 2px;border-bottom:1px solid #eef1f6;font-size:14px;line-height:1.6;color:#2c3a55}
html .pd-page.pd-steps-on .linklist li::before{content:"›";flex-shrink:0;color:#b9c6dc}
html .pd-page.pd-steps-on .linklist .card-link{display:flex;align-items:baseline;gap:9px;min-width:0;flex:1;padding:0;border:0;background:none;color:inherit;text-decoration:none}
html .pd-page.pd-steps-on .linklist .card-link:hover .ln-title{color:#1E5BBA;text-decoration:underline}
html .pd-page.pd-steps-on .linklist .ln-meta{flex-shrink:0;font-size:13px;color:#8a97b0;font-variant-numeric:tabular-nums}
html .pd-page.pd-steps-on .linklist .ln-src,html .pd-page.pd-steps-on .linklist .ln-sep{display:none}
html .pd-page.pd-steps-on .linklist .ln-title{flex:1;min-width:0;overflow:hidden;font-weight:500;text-overflow:ellipsis;white-space:nowrap}
html .pd-page.pd-steps-on .linklist li::after{display:none}  /* 오른쪽 꺾쇠는 빼고 왼쪽 「›」 만(미리보기) */
html .pd-page.pd-steps-on .morebtn{display:block;width:100%;margin:14px 0 0;padding:6px;border:0;background:none;font-size:13px;font-weight:800;color:#1E5BBA;text-align:center}
html .pd-page.pd-steps-on .morebtn:hover{color:#0d2a5c}
@media (max-width:560px){html .pd-page.pd-steps-on .rev-grid{grid-template-columns:1fr}}
/* 옵션 버튼(열람용 / 발급용 — 같은 구성·다른 옵션, 2026-10-30 사용자 「열람용과 발급용을 변경할 수 있게」) — 단계 카드 바로 아래, 처리 속도 칩과 같은 결 */
.pd-page .pd-variants{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.pd-page .pd-variants[hidden]{display:none}
.pd-page .pd-variants-l{margin-inline-end:4px;font-size:14px;font-weight:800;color:#0A2A5E}
.pd-page .pd-variants-l .pd-secondary{display:inline;margin-inline-start:4px}
.pd-page .pd-variant{display:inline-flex;align-items:baseline;gap:8px;min-height:40px;padding:8px 16px;border:1.5px solid #d6e1f1;border-radius:999px;background:#fff;color:#16233b;font:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.pd-page .pd-variant:hover{border-color:#8fb1e6}
.pd-page .pd-variant:focus-visible{outline:3px solid rgba(30,91,186,.35);outline-offset:2px}
.pd-page .pd-variant.is-on{border-color:#1E5BBA;background:#f2f7ff;color:#0A2A5E;box-shadow:0 0 0 1px #1E5BBA inset;cursor:default}
.pd-page .pd-variant-p{font-size:13px;font-weight:800;color:#5b6b84}
.pd-page .pd-variant.is-on .pd-variant-p{color:#1E5BBA}
.pd-page .pd-steps.is-busy .pd-variants{opacity:.6;pointer-events:none}
/* 이 서류의 전체 구성(2026-10-30 사용자 「상품 6개가 다 표현되어야」) — 같은 서류 상품 모두, 지금 것은 ✓ 선택됨, 누르면 그 상품으로 */
.pd-page .pd-all{margin:18px 0 0;padding:14px 16px;border:1px solid #e4e8f1;border-radius:14px;background:#fff}
.pd-page .pd-all[hidden]{display:none}
.pd-page .pd-all-h{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:15px;font-weight:800;color:#0A2A5E}
.pd-page .pd-all-h .pd-secondary{display:inline;margin-inline-start:4px}
.pd-page .pd-all-n{padding:1px 8px;border-radius:999px;background:#e0eaff;color:#1E5BBA;font-size:12px;font-weight:800}
.pd-page .pd-all-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pd-page .pd-all-item{display:flex;align-items:center;gap:10px;min-width:0;min-height:46px;margin:0;padding:8px 12px;border:1.5px solid #e4e8f1;border-radius:12px;background:#fff;color:#1a2238;font:inherit;font-size:14px;font-weight:700;text-align:start;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.pd-page .pd-all-item:hover{border-color:#bcc9e8;box-shadow:0 4px 12px rgba(10,42,94,.08)}
.pd-page .pd-all-item:focus-visible{outline:3px solid rgba(30,91,186,.35);outline-offset:2px}
.pd-page .pd-all-item.is-on{border-color:#1E5BBA;background:#f6faff;cursor:default}
.pd-page .pd-all-ck{flex:none;display:flex;align-items:center;justify-content:center;width:20px;height:20px;box-sizing:border-box;border:2px solid #c2cbe0;border-radius:6px;color:#fff;font-size:12px;font-weight:800}
.pd-page .pd-all-item.is-on .pd-all-ck{border-color:#1E5BBA;background:#1E5BBA}
.pd-page .pd-all-name{flex:1;min-width:0;overflow-wrap:anywhere}
.pd-page .pd-all-p{flex:none;font-size:13px;font-weight:800;color:#5b6b84}
.pd-page .pd-all-item.is-on .pd-all-p{color:#1E5BBA}
.pd-page .pd-steps.is-busy .pd-all{opacity:.6;pointer-events:none}
@media (max-width:640px){.pd-page .pd-all-list{grid-template-columns:minmax(0,1fr)}}
.pd-page .pd-all-dst{display:inline-block;margin-inline-start:6px;padding:0 6px;border-radius:999px;background:#fff4dc;color:#a46a00;font-size:12px;font-weight:800}  /* 제출국이 정해진 구성(→ 중국) */
/* 제목 글씨 크기 고정(2026-10-30 사용자 「글씨 크기가 왜 변동되지」) — product-detail.css 가 화면 폭(≤1024 32px · ≤720 26px)과 이름 길이(.long 22px)에 따라
   !important 로 바꿔 상품을 오갈 때마다 크기가 달라졌다. 미리보기 #docH1 처럼 폭 단계별 한 값으로, 이름 길이와 상관없이. */
html .pd-page.pd-steps-on .pd-hero h1,html .pd-page.pd-steps-on .pd-hero h1.long{font-size:28px!important;line-height:1.3}
@media (max-width:980px){html .pd-page.pd-steps-on .pd-hero h1,html .pd-page.pd-steps-on .pd-hero h1.long{font-size:24px!important}}
@media (max-width:640px){html .pd-page.pd-steps-on .pd-hero h1,html .pd-page.pd-steps-on .pd-hero h1.long{font-size:22px!important}}