/* AK AI 상담창 공통 스타일 — 전 페이지 공용 akai.css(docs/common/akai.md). @import 는 맨 앞이어야 한다. ?v= 는 asset_stamp 가 찍는다. */
@import "akai.css?v=275048e9";
/* Home/Nation copy: bilingual in the common tree, one language in generated pages. */
.finder-heading-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 18px;}
.finder-favorite-guide{display:flex;align-items:center;gap:8px;margin:0;color:#0A2A5E;font-size:13px;font-weight:800;}
.finder-favorite-guide .favorite-emphasis{color:#1E5BBA;font-weight:900;}
.finder-favorite-guide img{flex:none;object-fit:contain;}
.finder-heading-row .bi-col,#odDocAdd .bi-col{display:inline-flex;flex-direction:column;gap:2px;}
.finder-heading-row .i18n-sub,#odDocAdd .i18n-sub{font-size:.85em;font-weight:600;color:#58749a;}
#odDocAdd{display:inline-flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap;}
#odFinder .ak-pbi{display:block;font-size:.8em;font-weight:600;color:#60789b;line-height:1.3;margin-top:3px;}
.top h1>.bi-sub{display:block;font-size:23px;line-height:1.3;font-weight:700;color:#fff;margin-top:8px;}
.top h1 .accent{font-weight:inherit;}
.top .slogan>.bi-sub{display:block;font-size:.92em;line-height:1.6;color:#fff;margin-top:4px;}
.home-slogan-clause{font-style:normal;}
#odFinder label .ak-pbi,#odHoldLabel .ak-pbi{display:inline-block;white-space:nowrap;margin-inline-start:5px;margin-top:0;}
.finder-heading-row .bi-col{display:inline;}
.finder-heading-row .bi-col>.i18n-sub{margin-inline-start:6px;}
.finder-favorite-guide .bi-col{display:inline-flex;flex-direction:column;gap:2px;}
.finder-favorite-guide .bi-col>.i18n-sub{margin-inline-start:0;}
.odm-item>.bi-sub{margin-inline-start:8px;color:#c1d8f7;font-size:.85em;}
.od-ds-note.is-ready{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap!important;border:0!important;}
/* [T35] 미리보기 실패: 머리 상태줄은 화면에서만 감추고(aria-live 유지) 문구·「다시 시도」는 결과 자리 한 곳에 */
.od-ds-note.is-mirrored{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap!important;border:0!important;}
#odEmpty #odRetry:not([hidden]){display:block;margin-top:12px;}
.od-gcard [data-finder-service-name][hidden],.od-gcard [data-finder-option-name][hidden]{display:none!important;}
@media(min-width:1600px){.home-slogan-clause{white-space:nowrap;}}
/* ═══ [T05 2026-10-01] 홈·국가 페이지 모바일/태블릿 가독성 — 데스크톱(>1024px)은 손대지 않는다 ═══ */
@media(max-width:1024px){
/* 히어로: 데스크톱용 끌어올림(-25px·translateY)이 1열에서는 슬로건 둘째 줄을 카드로 덮는다 */
.top{transform:none;margin-bottom:22px}
.top .slogan{margin-bottom:0}
.finder-rail{margin-top:0}
/* 단계 카드: 보조 글자 12px 이상·대비 4.5 이상·터치 44px */
.panel h3{font-size:15px;line-height:1.45}
.panel h3 small{font-size:12px;color:#4f6688}
#odFinder .ak-pbi{font-size:12px;color:#4f6688}
#odFinder .od-seg button.on .ak-pbi{color:#d6e3f7}
.od-f{font-size:13px}
.od-ds-row input,.od-ds-row button,#odRetry{min-height:44px}
.od-ds-row input{font-size:16px}
#odDocAdd .i18n-sub,.finder-heading-row .i18n-sub{font-size:12px;color:#4a6288}
.od-ds-note{font-size:12px;color:#4d5d80}
.od-seg button{min-height:48px;font-size:14px}
.flood-h{padding:14px 16px}
.flood-h .fh-title{font-size:16px}
.finder-favorite-guide{font-size:14px}
.finder-flood{margin-top:28px}
/* 신뢰 띠: 가로 흐름은 양끝이 잘려 보인다 → 한 항목씩 세로로 넘기는 띠(8개 순환) */
.od-marquee{--odtick:52px;height:calc(var(--odtick) + 2px);margin:0 0 14px;-webkit-mask-image:none;mask-image:none;border:1px solid rgba(255,255,255,.22);border-radius:12px;background:rgba(6,24,60,.32)}
.od-marquee-track{display:flex;flex-direction:column;width:100%;animation:odTickV 30s ease-in-out infinite}
.od-marquee .odm-dot{display:none}
.od-marquee .odm-item{box-sizing:border-box;flex:0 0 var(--odtick);height:var(--odtick);display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0;padding:0 12px;font-size:14px;line-height:1.3;white-space:normal;text-align:center;overflow:hidden;word-break:keep-all;overflow-wrap:break-word}
.od-marquee .odm-item>.bi-sub{display:block;margin:2px 0 0;font-size:12.5px;color:#dbe8fb}
/* 상품 카드: 서류명 ≥15px·용도 칩·가격 강조, 가격은 카드 아래에 맞춘다 */
.od-gcard{display:flex;flex-direction:column;padding:16px 60px 16px 16px;border-radius:14px}
.od-gcard .nm{font-size:16px;font-weight:700;line-height:1.45;color:#16233b}
.od-gcard .nm .od-nm-svc{margin-top:3px;font-size:14px;font-weight:500;line-height:1.45;color:#3f5070}
.od-gcard .nm .od-opt{display:inline-block;min-height:0;margin-top:8px;padding:3px 9px;border-radius:7px;background:#e8f0fb;color:#0A2A5E;font-size:13px;font-weight:800;line-height:1.4}
.od-gcard .pr{margin-top:auto;padding-top:10px;font-size:19px;font-weight:800;line-height:1.3;color:#0A2A5E;font-variant-numeric:tabular-nums}
.od-gcard .star{top:8px;right:8px;min-width:44px;min-height:44px}
html[dir="rtl"] .od-gcard{padding:16px 16px 16px 60px}
html[dir="rtl"] .od-gcard .star{right:auto;left:8px}
/* 펼친 상품 패널(document-finder.js 주입 CSS 보다 우선) */
#odGallery .od-pcard .pc-x{min-width:44px;min-height:44px;margin:-10px -10px 0 0;font-size:17px}
#odGallery .od-pcard .od-phead .nm{font-size:17px}
#odGallery .od-pcard .od-steps{font-size:13px;padding:10px 16px}
#odGallery .od-pcard .od-dayscap b{white-space:nowrap}
#odGallery .od-pcard .od-dayscap em{font-size:12px}
#odGallery .od-pcard .od-dayscap b i{font-size:12px}
#odGallery .od-pcard .od-grow .pr{font-size:17px}
#odGallery .od-pcard .od-cartadd,#odGallery .od-pcard .od-addbtn{min-height:44px;font-size:14px}
#odGallery .od-pcard .od-pfoot .tgo{display:inline-flex;align-items:center;justify-content:center;min-height:44px;font-size:14px}
/* 빈 결과 안내 */
.od-hold-wait{padding:20px 18px}
/* AI 상담창: 마스코트 자리만 남긴다(상자 안 규칙은 akai.css) */
.ai-col{padding-top:66px}
/* 통계 띠 */
.ht-item span{opacity:1;color:#e6edff;font-size:13px;line-height:1.45;word-break:keep-all;overflow-wrap:break-word}
/* 섹션 머리: 이중언어 붙음 간격·「전체 보기」 대비 4.5·터치 44 */
.hr-title .ak-pbi-inl,.hv-sub .ak-pbi-inl,.hn-h2-t .ak-pbi-inl{margin-inline-start:6px}
.hr-badge{color:#3d2600}
.hr-more,.hv-more,.hc-more,.hn-seeall{display:inline-flex;align-items:center;min-height:44px;color:#b0262f!important}
.hr-pmnav{width:44px;height:44px}
.hr-body{font-size:15px;line-height:1.6}
.hr-body-secondary{font-size:13px}
.hr-svc{font-size:12px}
.hr-meta{font-size:12px;color:#4f5f78}
.hv-sub,.hc-sub{font-size:13px;color:#4a5b73;line-height:1.5}
.hv-vtitle{font-size:15px;line-height:1.45;min-height:44px}
.hv-meta{font-size:12px;color:#66758f}
.hv-yt{color:#c40000}
.hn-h2-t{font-size:17px}
.hn-row,.hn-ep-row{min-height:44px;box-sizing:border-box}
.hn-tt{font-size:15px}
.hn-date,.hn-ep-date{font-size:12px;color:#66758f}
.hn-ep-no{font-size:12px;color:#8a7a50}
.hn-ep-tt{font-size:15px}
.hn-ep-date{color:#7a6a44}
.hn-ep--blog .hn-ep-no,.hn-ep--blog .hn-ep-date{color:#5b6e3c}
.hn-ep-empty{color:#7a6a44;font-size:14px}
.hn-c-row,.hn-c-online{font-size:13px}
.hc-chip .cn-en{font-size:12px}
.hc-chip .cn-ko{font-size:12px;color:#5f6c84}
}
@keyframes odTickV{
0%,10%{transform:translateY(0)}12.5%,22.5%{transform:translateY(calc(var(--odtick,52px) * -1))}25%,35%{transform:translateY(calc(var(--odtick,52px) * -2))}
37.5%,47.5%{transform:translateY(calc(var(--odtick,52px) * -3))}50%,60%{transform:translateY(calc(var(--odtick,52px) * -4))}62.5%,72.5%{transform:translateY(calc(var(--odtick,52px) * -5))}
75%,85%{transform:translateY(calc(var(--odtick,52px) * -6))}87.5%,97.5%{transform:translateY(calc(var(--odtick,52px) * -7))}100%{transform:translateY(calc(var(--odtick,52px) * -8))}
}
@media(max-width:1024px) and (prefers-reduced-motion:reduce){
.od-marquee{height:auto;padding:6px 0}
.od-marquee-track{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));animation:none;transform:none}
.od-marquee-track>[aria-hidden="true"],.od-marquee-track>:nth-child(n+17){display:none}
.od-marquee .odm-item{height:auto;min-height:52px;padding:6px 10px}
}
/* 태블릿: 1열을 늘리지 않고 2~3열로 폭을 쓴다 */
@media not all /* 태블릿 전용 규칙 끔 — 태블릿 = 휴대폰과 같은 기준(2026-10-08 사용자) */{
.od-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
.hn-in2{grid-template-columns:repeat(2,minmax(0,1fr))}
.hn-in2 .hn-center{flex-direction:row;align-items:center}
}
@media(min-width:900px) and (max-width:1024px){
.od-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* 휴대폰: 좌우 여백 16px 통일, 긴 제목은 두 줄까지 */
@media(max-width:1024px){
.stage{padding:32px 16px 44px}
.top h1>.bi-sub{font-size:21px}
.top .slogan{font-size:15.5px;line-height:1.6}
.ht-strip,.htm-reviews,.htm-videos,.htm-news{padding-left:16px;padding-right:16px}
.hc-head{padding:0 16px}
.ht-in{row-gap:18px}
.ht-in>.ht-item:last-child:nth-child(odd){grid-column:1/-1}
.hr-head .hr-more{margin-left:auto}
.hv-card{flex-basis:78%}
.hn-ep-row{flex-wrap:wrap;row-gap:2px}
.hn-ep-tt{flex:1 1 calc(100% - 40px);white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.hn-ep-dots{display:none}
.hn-ep-date{margin-inline-start:39px}
.hn-tt{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
#odGallery .od-pcard .od-phead{padding:14px 16px}
#odGallery .od-pcard .od-grow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:12px 16px;gap:8px 12px}
#odGallery .od-pcard .od-grow .gl{flex-direction:column;align-items:flex-start;gap:4px;font-size:15px}
#odGallery .od-pcard .od-grow .gl .g{min-width:0}
#odGallery .od-pcard .od-grow .gr{flex-direction:column;align-items:flex-end;gap:6px}
}
/* ═══ [T13 2026-10-02] 320~400px 좁은 휴대폰 — 단어 단위 줄바꿈·카드 머리·검색칸·신뢰 띠 (데스크톱 불변) ═══ */
@media(max-width:1024px){
/* 한글은 어절 단위로만 줄을 바꾼다(ja/zh 는 띄어쓰기가 없어 제외), 넘치는 긴 낱말만 쪼갠다 */
html:not([lang|="ja"]):not([lang|="zh"]) :is(section.stage,#htmCorridor,#nationDocuments){word-break:keep-all;overflow-wrap:break-word}
.hc-chip{height:auto;min-height:106px}
.hc-chip .cname,.hc-chip .cn-en,.hc-chip .cn-ko{white-space:normal;text-overflow:clip;overflow:visible;text-align:center}
}
@media(max-width:400px){
/* 단계 카드 머리: 제목과 오른쪽 라벨(발급국 등)을 한 줄로(2026-10-12 사용자) — 제목이 길면 제목만 줄바꿈, 라벨은 오른쪽 끝에 붙는다 */
.panel h3{flex-wrap:nowrap}
.panel h3>label{flex:1 1 auto;min-width:0}
.panel h3 small{flex:0 0 auto;margin:0;margin-inline-start:auto;text-align:end;white-space:nowrap}
.top h1{font-size:clamp(26px,8.4vw,32px)}
.top h1>.bi-sub{font-size:clamp(18px,5.8vw,21px)}
.nation-finder-page .stage .top h1{font-size:clamp(23px,7.4vw,26px)}
}
/* [T35] 검색칸은 한 줄 전체, 「직접 추가」는 아래 줄 전체 폭 — 390~430 에서도 안내문(placeholder)이 잘렸다(예전 기준 360) */
@media(max-width:430px){
.od-ds-row{grid-template-columns:minmax(0,1fr)}
.od-ds-row button{width:100%}
}
@media(max-width:360px){
.panel{padding:16px 14px}
.od-seg{gap:5px}
.od-seg button{min-width:0;padding:8px 4px;font-size:13.5px}
.od-marquee:has(.bi-sub){--odtick:60px}
.od-marquee .odm-item{font-size:13px;padding:0 10px}
.od-marquee .odm-item>.bi-sub{font-size:12px}
.od-gcard{padding:14px 56px 14px 14px}
.ht-item b{font-size:27px}
}
@media(max-width:360px){.hn-h2{padding:12px 10px 10px}.hn-h2-t{font-size:16px}}
/* [T35] 빈 검색 상태줄은 자리를 차지하지 않는다 · 홈 공지 분류 칩 10px→12px(notices.js 주입 규칙보다 한 단계 구체적으로) */
@media(max-width:1024px){
#odDocSearchStatus:empty{min-height:0;margin-top:0}
.od-ds-row input{text-overflow:ellipsis} /* 긴 언어판(pt·vi) 안내문은 잘린 자리를 … 로 알린다 */
.hn-list .hn-row .ncat{font-size:12px}
}
/* ═══ [T17 2026-10-02] ≤1024 서류별 묶음(document-finder.js groupNode) — 데스크톱은 묶음 DOM 자체가 없다 ═══ */
@media(max-width:1024px){
#odGallery .od-group{grid-column:1/-1;min-width:0;background:#fff;border:1px solid var(--odline);border-radius:14px;box-shadow:var(--odsh);overflow:hidden}
.od-group-h{padding:14px 16px 12px;border-bottom:1px solid #e3e9f2;background:#f7faff}
.od-group-name{display:block;font-size:16px;font-weight:700;line-height:1.45;color:#16233b}
.od-group-sub{display:block;margin-top:2px;font-size:13px;line-height:1.45;color:#4f6688}
#odGallery .od-gcard.od-grouped{display:grid;grid-template-columns:minmax(0,1fr) auto 44px;align-items:center;gap:4px 10px;min-height:52px;padding:4px 4px 4px 16px;border:0;border-top:1px solid #edf1f6;border-radius:0;box-shadow:none;background:#fff}
#odGallery .od-group-h+.od-gcard.od-grouped,#odGallery .od-group-h+.od-group-toc+.od-gcard.od-grouped{border-top:0}
#odGallery .od-gcard.od-grouped .nm{order:1;min-width:0;min-height:44px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;font-size:15px;font-weight:600;line-height:1.45;color:#16233b;padding:8px 0}
#odGallery .od-gcard.od-grouped .od-variant{display:block;overflow-wrap:break-word}
#odGallery .od-gcard.od-grouped.od-indent .od-variant{padding-inline-start:18px;font-weight:500;color:#33435f}
#odGallery .od-gcard.od-grouped .nm .od-opt{margin-top:4px;font-size:12px;padding:2px 8px}
#odGallery .od-gcard.od-grouped.od-indent .nm .od-opt{margin-inline-start:18px}
#odGallery .od-gcard.od-grouped .pr{order:2;margin:0;padding:0;font-size:16px;font-weight:800;text-align:end;white-space:nowrap}
#odGallery .od-gcard.od-grouped .star{order:3;position:static;width:44px;height:44px;min-width:44px;min-height:44px}
#odGallery .od-gcard.od-grouped.expanded{background:#eef4ff;box-shadow:inset 3px 0 0 #2f80ed;border-color:#edf1f6}
html[dir="rtl"] #odGallery .od-gcard.od-grouped{padding:4px 16px 4px 4px}
html[dir="rtl"] #odGallery .od-gcard.od-grouped.expanded{box-shadow:inset -3px 0 0 #2f80ed}
#odGallery .od-grouped [data-finder-product-link]:focus-visible{outline:3px solid #2f80ed;outline-offset:2px;border-radius:4px}
#odGallery .od-group .od-pcard{margin:0 10px 12px;border-radius:12px}
.od-grouped .od-sr{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
}
@media not all /* 태블릿 전용 규칙 끔 — 태블릿 = 휴대폰과 같은 기준(2026-10-08 사용자) */{
/* 태블릿: 묶음을 2열로 나란히(묶음 안 줄은 1열 — 들여쓰기 위계를 지킨다) */
#odGallery.od-gallery:has(.od-group){grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
#odGallery .od-group{grid-column:auto}
}
/* ═══ [T19 2026-10-02] 검색되는 국가 선택칸(country-picker.mjs) — 닫힌 트리거는 기존 select 와 같은 모양·크기 ═══ */
.ak-cp-wrap{position:relative;display:block}
.odx .ak-cp-wrap>select.ak-cp-native{opacity:0;pointer-events:none}
.odx .ak-cp-trigger{position:absolute;inset:0;display:flex;align-items:center;gap:8px;width:100%;height:100%;margin:0;padding:11px 12px;border:1px solid var(--odline);border-radius:10px;background:#fff;color:var(--odink);font-family:inherit;font-size:14.5px;line-height:normal;text-align:start;cursor:pointer;box-sizing:border-box}
.odx .ak-cp-trigger::after{content:"";flex:none;width:7px;height:7px;margin-inline-start:auto;margin-top:-4px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg)}
.odx .ak-cp-trigger:disabled{cursor:default;opacity:.7}
.odx .ak-cp-trigger:focus-visible{outline:2px solid var(--odblue);outline-offset:2px}
.ak-cp-value{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* [T27 2026-10-02] 목록 창 다듬기 — 시트(≤1024)·드롭다운 같은 톤, 닫힌 트리거는 불변 */
.ak-cp{position:absolute;z-index:10050;display:flex;flex-direction:column;max-height:380px;box-sizing:border-box;background:#fff;border:1px solid #dbe4f1;border-radius:16px;box-shadow:0 20px 48px rgba(10,42,94,.20),0 2px 6px rgba(10,42,94,.08);color:#16233b;font-family:'Segoe UI','Malgun Gothic',sans-serif;overflow:hidden;opacity:0;transform:translateY(8px);transition:opacity .16s ease-in,transform .16s ease-in}
.ak-cp.is-open{opacity:1;transform:none;transition:opacity .22s ease-out,transform .22s ease-out}
.ak-cp.is-up:not(.is-sheet){transform:translateY(-8px);transform-origin:bottom}.ak-cp.is-up.is-open:not(.is-sheet){transform:none}/* 위로 펼칠 때는 위에서 내려오지 않고 칸 쪽(아래)에서 올라오듯(country-picker.mjs place)*/
.ak-cp[hidden],.ak-cp-mask[hidden]{display:none!important}
.ak-cp-top{display:none}
.ak-cp-grip{display:block;width:36px;height:4px;margin:8px auto 2px;border-radius:999px;background:#c9d3e3}
.ak-cp-titlebar{display:flex;align-items:center;gap:10px;padding:4px 12px 4px 20px}
.ak-cp-heading{flex:1 1 auto;min-width:0}
.ak-cp-title{display:block;font-size:17px;font-weight:800;line-height:1.35;color:#0A2A5E;overflow-wrap:break-word}
.ak-cp-subtitle{display:block;margin-top:2px;font-size:13px;line-height:1.4;color:#4f6688}
.ak-cp-subtitle:empty{display:none}
.ak-cp-x{flex:none;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:999px;background:#eef2f8;color:#33435f;font-size:16px;cursor:pointer}
.ak-cp-x:hover{background:#e2e9f4}
.ak-cp-x:focus-visible{outline:2px solid #1E5BBA;outline-offset:2px}
.ak-cp-head{position:relative;padding:10px 12px}
.ak-cp-head::before{content:"";position:absolute;inset-inline-start:26px;top:50%;width:18px;height:18px;margin-top:-9px;pointer-events:none;background:no-repeat center/18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6b88' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E")}
.ak-cp-input{display:block;width:100%;height:46px;box-sizing:border-box;padding:0 14px;padding-inline-start:42px;border:1.5px solid transparent;border-radius:12px;background:#f1f4f9;color:#16233b;font:inherit;font-size:16px;outline:none;transition:border-color .15s,background .15s,box-shadow .15s}
.ak-cp-input::placeholder{color:#58677f}
.ak-cp-input:focus{border-color:#1E5BBA;background:#fff;box-shadow:0 0 0 3px rgba(30,91,186,.14)}
.ak-cp-input::-webkit-search-cancel-button,.ak-cp-input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.ak-cp-list{flex:1 1 auto;min-height:0;margin:0;padding:2px 8px 10px;list-style:none;overflow-y:auto;overscroll-behavior:contain}
.ak-cp-option{position:relative;display:flex;align-items:center;gap:12px;min-height:48px;box-sizing:border-box;margin:2px 0;padding:8px 44px 8px 8px;border-radius:12px;cursor:pointer;-webkit-tap-highlight-color:transparent}
html[dir="rtl"] .ak-cp-option{padding:8px 8px 8px 44px}
.ak-cp-flag{flex:none;display:grid;place-items:center;width:28px;height:20px;border-radius:4px;overflow:hidden;background:#e8edf5;box-shadow:inset 0 0 0 1px rgba(10,42,94,.08)}
.ak-cp-flag img{display:block;width:100%;height:100%;object-fit:cover}
.ak-cp-flag.is-initial{width:28px;height:28px;border-radius:50%;background:#e6eefb;color:#1E5BBA;font-size:12px;font-weight:800;box-shadow:none}
/* 한 줄: 큰 이름 왼쪽, 보조 이름(영문 등) 오른쪽 끝 회색 — 오른쪽이 비어 보였다(2026-10-12 사용자) */
.ak-cp-names{flex:1 1 auto;min-width:0;display:flex;flex-direction:row;align-items:baseline;justify-content:space-between;gap:12px}
.ak-cp-name{flex:0 1 auto;min-width:0;font-size:16px;font-weight:600;line-height:1.35;color:#16233b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ak-cp-sub{flex:0 999 auto;min-width:0;font-size:13px;line-height:1.35;color:#6b7a92;text-align:end;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}/* 좁으면 보조 이름이 먼저 줄어 … */
.ak-cp-option b{font-weight:800;color:#1E5BBA}
.ak-cp-option.is-active{background:#eef3fb}
.ak-cp-option:active{background:#e3ebf8}
.ak-cp-option[aria-selected="true"]{background:#e6f0ff}
.ak-cp-option[aria-selected="true"] .ak-cp-name{color:#0A2A5E;font-weight:700}
.ak-cp-option[aria-selected="true"]::after{content:"";position:absolute;inset-inline-end:18px;top:50%;width:6px;height:12px;margin-top:-8px;border-right:2.4px solid #1E5BBA;border-bottom:2.4px solid #1E5BBA;transform:rotate(45deg)}
.ak-cp-option[aria-disabled="true"]{cursor:default}
/* 나라 줄(2026-10-12 사용자): 줄 사이에만 가는 선(바깥 테두리 없음), 끝에 ✓ — 고르지 않은 줄은 연한 회색 ✓, 고른 줄은 초록 ✓ */
.ak-cp-option{margin:0;border:0;border-radius:0;background:transparent}
.ak-cp-option+.ak-cp-option{border-top:1px solid #e8edf4}
.ak-cp-option[aria-selected="true"]{background:#f1faf4}
.ak-cp-option:not([aria-disabled="true"])::after{content:"";position:absolute;inset-inline-end:20px;top:50%;width:6px;height:12px;margin-top:-8px;box-sizing:content-box;
border:0;border-right:2.4px solid #cfd7e3;border-bottom:2.4px solid #cfd7e3;border-radius:0;background:none;transform:rotate(45deg);transition:border-color .15s}
.ak-cp-option[aria-selected="true"]:not([aria-disabled="true"])::after{border-color:#16a34a}/* 고르면 초록 ✓(칸의 선택 표시와 같은 초록) */
.ak-cp.is-anchored:not(.is-sheet) .ak-cp-option{padding-inline-end:40px!important}
@media (hover:hover){
.ak-cp-option:not([aria-disabled="true"]):not([aria-selected="true"]):hover{background:#f6f8fc}
.ak-cp-option:not([aria-disabled="true"]):not([aria-selected="true"]):hover::after{border-color:#9aa9bf}
.ak-cp-option:not([aria-disabled="true"]):hover .ak-cp-name{color:#0A2A5E}
}
/* 구역 제목 「자주 찾는 국가」·「전체 국가」(country-picker.mjs, 2026-10-12) — 작은 회색 글자, 둘째 제목 위에만 가는 선 */
.ak-cp-group{list-style:none;pointer-events:none;margin:6px 4px 0;padding:4px 0 6px;font-size:12px;font-weight:700;letter-spacing:.02em;color:#6b7a92}
.ak-cp-group~.ak-cp-group{margin-top:14px}
/* PC 마우스 끌어 스크롤(country-picker.mjs .is-dragging) — 끄는 동안 글자 선택·손가락 모양 대신 잡은 손 */
.ak-cp-list{-webkit-user-select:none;user-select:none}
.ak-cp-list img{-webkit-user-drag:none}
.ak-cp-list.is-dragging,.ak-cp-list.is-dragging .ak-cp-option{cursor:grabbing}
.ak-cp-option[aria-disabled="true"] .ak-cp-name{color:#6b7891}
.ak-cp-empty{margin:0;padding:36px 16px 40px;color:#4f6688;font-size:15px;line-height:1.5;text-align:center}
.ak-cp-empty::before{content:"";display:block;width:44px;height:44px;margin:0 auto 10px;border-radius:50%;background:#eef2f8 no-repeat center/22px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6b88' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E")}
.ak-cp-empty[hidden]{display:none}
.ak-cp-list:empty{flex:0 0 auto;padding:0}
.ak-cp-mask{position:fixed;inset:0;z-index:10040;background:rgba(10,27,52,.42);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition:opacity .16s ease-in}
.ak-cp-mask.is-open{opacity:1;transition:opacity .22s ease-out}
html.ak-cp-lock,html.ak-cp-lock body{overflow:hidden}
.ak-cp.is-sheet{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;height:85vh;height:85dvh;max-height:none;border:0;border-radius:20px 20px 0 0;box-shadow:0 -12px 40px rgba(10,42,94,.22);padding-bottom:env(safe-area-inset-bottom);transform:translateY(20px)}
.ak-cp.is-sheet.is-open{transform:none}
.ak-cp.is-sheet.is-dragging{transition:none}
.ak-cp.is-sheet .ak-cp-top{display:block;touch-action:none;cursor:grab}
.ak-cp.is-sheet .ak-cp-head{padding:6px 16px 10px}
.ak-cp.is-sheet .ak-cp-head::before{inset-inline-start:30px}
.ak-cp.is-sheet .ak-cp-list{padding:2px 8px 16px}
@media(min-width:600px) and (max-width:1024px){.ak-cp.is-sheet{left:50%;right:auto;width:min(640px,100%);margin-left:max(-320px,-50%)}}
@media(prefers-reduced-motion:reduce){.ak-cp,.ak-cp.is-open,.ak-cp-mask,.ak-cp-mask.is-open{transition:none!important}.ak-cp,.ak-cp.is-sheet{transform:none}}
/* ═══ [T23 2026-10-02] ≤1024 고객사 로고 띠 — 끊김 없이 흐르는 띠, 양끝은 넓게 흐려 '잘린 끝'으로 보이지 않게 ═══ */
@media(max-width:1024px){
.hc-marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
.hc-chip{width:136px;min-height:96px;padding:10px}
.hc-chip img{max-width:112px;max-height:34px}
}
/* RTL(전 폭): 트랙이 오른쪽에서 시작하므로 반대 방향(오른쪽)으로 흐른다 — 왼쪽으로 밀면 오른쪽 끝이 빈다 */
html[dir="rtl"] .hc-track{animation-name:hcScrollRtl}
@keyframes hcScrollRtl{from{transform:translateX(0)}to{transform:translateX(50%)}}
/* 동작 줄이기: 흐르지 않고 가로 스크롤도 없는 정적 격자(앞 12개, 나머지는 「전체 보기」) */
@media(max-width:1024px) and (prefers-reduced-motion:reduce){
.hc-marquee{overflow:visible;-webkit-mask-image:none;mask-image:none}
.hc-track,html[dir="rtl"] .hc-track{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:auto;padding:4px 16px;animation:none;transform:none}
.hc-track>[aria-hidden="true"],.hc-track>:nth-child(n+13){display:none}
.hc-chip{width:auto;min-width:0}
}
@media not all /* 태블릿 전용 규칙 끔 — 태블릿 = 휴대폰과 같은 기준(2026-10-08 사용자) */ and (prefers-reduced-motion:reduce){
.hc-track{grid-template-columns:repeat(3,minmax(0,1fr));padding:4px 24px}
}
/* ═══ [T39 2026-10-06] 서류 검색 — 기다리는 동안 뼈대 줄(document-finder.js scheduleSearchSkeleton) ═══ */
#odDocResults .od-ds-skel{display:flex;align-items:center;min-height:36px;padding:9px 12px;box-sizing:border-box;border-bottom:1px solid #eef2f8}
#odDocResults .od-ds-skel:last-child{border-bottom:0}
#odDocResults .od-ds-skel span{display:block;width:62%;height:12px;border-radius:5px;background:#e9eef5}
#odDocResults .od-ds-skel:nth-child(2) span{width:44%}
#odDocResults .od-ds-skel:nth-child(3) span{width:53%}
@media(max-width:1024px){#odDocResults .od-ds-skel{min-height:44px}}
/* [T39] ≤430: 「＋ 직접 추가」는 결과 목록 아래로 — 검색칸 바로 밑에 목록이 와서 키보드 위에 보인다(DOM 순서 불변) */
@media(max-width:430px){
.od-docsearch{display:flex;flex-direction:column}
.od-docsearch>.od-ds-row{display:contents}
#odDocSearch{order:1}
#odDocSearchStatus{order:2}
#odDocResults{order:3}
#odDocAdd{order:4;margin-top:8px}
#odDocs{order:5}
}
/* AK AI 상담창 ≤1024 도킹(akai-mobile.mjs) 중 홈 칼럼 자리 — 상자는 body 끝으로 옮겨 가므로 칼럼은 비운다(상자 규칙은 akai.css) */
@media(max-width:1024px){
html.akai-docked .ai-col{position:static;margin:0;padding:0}
}
/* 1024 를 넘는 도킹(가로 터치 태블릿, akai-mobile DOCK_QUERY) — 데스크톱 3칸 중 AI 칸을 접어 1025~1280 배치와 같게 */
@media(min-width:1025px){
html.akai-docked body:not(.nation-finder-page) .finder{grid-template-columns:376px 1fr}
html.akai-docked .ai-col{display:none}
}
/* 홈 고객 후기 — 모바일(≤640) 슬림: 머리 한 줄(배지·제목·개수·전체 보기, 게이지 숨김),
카드 = 1줄 정보(별점·서류·날짜·좋아요, 나라는 서류명에 있어 뺌) + 1줄 본문(…). 홈 head 인라인 스타일을 #htmReviews 로 이긴다. */
@media(max-width:1024px){
#htmReviews .hr-head{flex-wrap:nowrap;gap:8px;margin-bottom:10px}
#htmReviews .hr-title{flex:1;min-width:0;flex-wrap:nowrap;gap:6px;font-size:16px;white-space:nowrap}
#htmReviews .hr-title b{flex:none;white-space:nowrap}
#htmReviews .hr-title .hr-badge{flex:none;padding:2px 7px;font-size:12px}
#htmReviews .hr-title .hr-sub{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:11px}
#htmReviews .hr-gauge{display:none}
#htmReviews .hr-head .hr-more{flex:none;margin-left:auto;font-size:12.5px}
#htmReviews .hr-head .hr-more .ak-pbi{display:none}
#htmReviews .hr-head .hr-more{align-self:center;margin-top:0;line-height:1.2}
#htmReviews .hr-title b .ak-pbi{font-size:11px;font-weight:700}
#htmReviews .hr-grid{gap:8px}
#htmReviews .hr-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"stars svc meta" "body body body";align-items:center;column-gap:8px;row-gap:5px;padding:10px 12px;border-radius:12px;box-shadow:0 2px 8px rgba(20,40,100,.05)}
#htmReviews .hr-card:hover{transform:none}
#htmReviews .hr-stars{grid-area:stars;display:flex;gap:1px;line-height:0}
#htmReviews .hr-stars img{width:11px;height:11px}
/* 별 하나 안에 숫자(data-rating) — 별 5개가 줄을 다 차지해서 */
#htmReviews .hr-stars[data-rating]{position:relative;width:24px;height:23px;background:url(/assets/img/home-optimized/star.webp) center/contain no-repeat}
#htmReviews .hr-stars[data-rating] img{display:none}
#htmReviews .hr-stars[data-rating]::after{content:attr(data-rating);position:absolute;inset:3px 0 0;display:grid;place-items:center;font-size:10px;font-weight:900;line-height:1;color:#7a4b00}
#htmReviews .hr-foot{display:contents}
#htmReviews .hr-svc{grid-area:svc;max-width:none;min-width:0;padding:2px 7px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#htmReviews .hr-svc-secondary{display:none}
#htmReviews .hr-meta{grid-area:meta;font-size:0;white-space:nowrap;color:var(--sub)}
#htmReviews .hr-meta>span{font-size:11px}
#htmReviews .hr-meta>.hr-country{display:none}
#htmReviews .hr-meta>.hr-date[data-short]{font-size:0}
#htmReviews .hr-meta>.hr-date[data-short]::before{content:attr(data-short);font-size:11px}
/* 하트 안에 숫자(data-n) */
#htmReviews .hr-meta>.hr-likes[data-n]{display:inline-block;margin-left:5px;font-size:0;vertical-align:middle}
#htmReviews .hr-meta>.hr-likes[data-n]::before{content:attr(data-n);display:inline-grid;place-items:center;min-width:26px;height:23px;padding:0 3px 3px;box-sizing:border-box;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath fill='%23e0336e' d='M12 21.2 10.3 19.6C4.2 14.1.5 10.8.5 6.6.5 3.3 3.1.7 6.4.7c1.9 0 3.7.9 4.9 2.3h1.4C13.9 1.6 15.7.7 17.6.7c3.3 0 5.9 2.6 5.9 5.9 0 4.2-3.7 7.5-9.8 13L12 21.2z'/%3E%3C/svg%3E") center/100% 100% no-repeat;font-size:9px;font-weight:900;line-height:1;color:#fff}
#htmReviews .hr-body{grid-area:body;min-height:0;font-size:13px;line-height:1.45}
#htmReviews .hr-body-primary{display:block;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:unset}
#htmReviews .hr-body-secondary{display:none}
}
/* 홈 첫 화면 — 모바일·태블릿(≤1024) 미리보기(ak-lee-gemini 2026-09-25) 배치: 슬로건이 큰 주 제목(위),
「어떤 복잡한 서류든 3가지만 고르세요」는 작은 부제(아래). DOM 순서는 유지하고 order 로 화면 순서만 바꾼다.
ko 는 두 줄(
) 안에서 꺾지 않고 폭에 맞춰 글자를 줄인다(약 21.5em). 다른 언어는 한 문장이라 자연 줄바꿈. 국가 페이지 제외.
부제(h1)는 항상 슬로건의 0.82배 — 슬로건이 폭 때문에 작아져도 부제보다 커야 한다(사용자 2026-10-06). */
@media(max-width:1024px){
body:not(.nation-finder-page) .stage .top{display:flex;flex-direction:column;--hero-s:clamp(20px,5.6vw,34px)}
html[lang="ko"] body:not(.nation-finder-page) .stage .top{--hero-s:min(34px,calc((100vw - 40px) / 21.5))}
body:not(.nation-finder-page) .stage .top .slogan{order:1;max-width:none;margin:0 auto 12px;font-size:var(--hero-s);font-weight:800;line-height:1.3;letter-spacing:-.6px;color:#fff;text-shadow:0 4px 24px rgba(0,0,0,.25);text-wrap:balance}
html[lang="ko"] body:not(.nation-finder-page) .stage .top .slogan{white-space:nowrap}
body:not(.nation-finder-page) .stage .top .slogan b{color:#ffe08a;font-weight:800}
body:not(.nation-finder-page) .stage .top .slogan>.bi-sub{font-size:.62em;font-weight:600;letter-spacing:0;margin-top:6px}
body:not(.nation-finder-page) .stage .top h1{order:2;margin:0;font-size:min(22px,calc(var(--hero-s) * .82));font-weight:500;line-height:1.5;letter-spacing:0;color:rgba(255,255,255,.92);text-shadow:none}
body:not(.nation-finder-page) .stage .top h1>.bi-sub{font-size:.85em;font-weight:500;margin-top:2px}
}
/* 홈 숫자 띠(.ht-strip) — 모바일(≤640) 슬림: 5칸 한 줄, 작은 숫자·라벨, 루트는 한글 병기 숨김 */
@media(max-width:1024px){
#htmCorridor .ht-strip{padding:12px 8px}
#htmCorridor .ht-in{grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;row-gap:0}
#htmCorridor .ht-in>.ht-item:last-child:nth-child(odd){grid-column:auto}
#htmCorridor .ht-item b{font-size:15px;letter-spacing:-.3px;line-height:1.2;white-space:nowrap}
#htmCorridor .ht-item b img{height:13px!important;margin-right:2px!important;vertical-align:-1px!important}
#htmCorridor .ht-item span{display:block;margin-top:2px;font-size:10px;line-height:1.25;word-break:keep-all}
#htmCorridor .ht-item span .ak-pbi{display:none}
}
/* 홈 AK TV(.htm-videos) — 모바일(≤640) 슬림: 머리 한 줄(제목·전체 보기, 설명 숨김), 카드 폭 200·제목 2줄·날짜만 */
@media(max-width:1024px){
#htmVideos.htm-videos{padding:18px 16px 20px}
#htmVideos .hv-head{flex-wrap:nowrap;gap:8px;margin-bottom:10px}
#htmVideos .hv-h-title{font-size:16px;gap:6px;white-space:nowrap}
#htmVideos .hv-h-title::before{font-size:11px}
#htmVideos .hv-sub{display:none}
#htmVideos .hv-more{margin-left:auto;font-size:12.5px;white-space:nowrap}
#htmVideos .hv-more .ak-pbi{display:none}
#htmVideos .hv-rail{gap:10px;padding:2px 2px 8px}
#htmVideos .hv-card{flex:0 0 200px;border-radius:12px}
#htmVideos .hv-play{width:32px;height:32px;font-size:11px}
#htmVideos .hv-body{padding:8px 10px 9px}
#htmVideos .hv-vtitle{font-size:12.5px;line-height:1.4;min-height:0}
#htmVideos .hv-meta{margin-top:4px;font-size:10.5px}
#htmVideos .hv-yt{display:none}
}
/* 홈 모바일(≤640) 간격 통일 — 섹션 상하 20 · 좌우 16 · 덩어리 사이 12 · 제목 아래 10 · 카드 안 12~14 · 목록 줄 8.
불필요한 빈칸 제거: 첫 화면 아래 44 + 칸 사이 26 + 관련 서비스 위 28 이 겹쳐 쌓이던 것, 도킹으로 빈 AI 칸의 간격 26,
후기·뉴스 사이 34~44 의 제각각 여백. 「전체 보기」류는 44px 터치 영역을 유지하되 음수 여백으로 제목 줄을 키우지 않는다. */
@media(max-width:1024px){
body:not(.nation-finder-page){--m-sec:20px;--m-side:16px;--m-gap:12px;--m-head:10px}
body:not(.nation-finder-page) .stage{padding-top:var(--m-sec);padding-bottom:var(--m-sec)}
body:not(.nation-finder-page) .stage .top{margin-bottom:14px}
body:not(.nation-finder-page) .finder{gap:var(--m-gap)}
html.akai-docked body:not(.nation-finder-page) .ai-col{display:none}
body:not(.nation-finder-page) #odFinder{gap:var(--m-gap)}
body:not(.nation-finder-page) #odFinder .panel{padding:14px}
body:not(.nation-finder-page) .finder-flood{margin-top:0}
body:not(.nation-finder-page) .flood-h{padding:12px 14px;margin-bottom:var(--m-gap)}
body:not(.nation-finder-page) .od-marquee{margin-bottom:var(--m-gap)}
body:not(.nation-finder-page) #odFavorites.favorite-panel{margin-bottom:var(--m-gap)}
body:not(.nation-finder-page) .favorite-status:empty{display:none}
body:not(.nation-finder-page) #odEmpty.od-hold-wait{padding:14px}
body:not(.nation-finder-page) #odEmpty.od-hold-wait p{margin:0}
#htmCorridor{margin-top:0}
#htmReviews.htm-reviews,#htmVideos.htm-videos,#htmNews.htm-news,#htmClient.htm-client{padding:var(--m-sec) var(--m-side)}
#htmReviews .hr-head,#htmVideos .hv-head{margin-bottom:var(--m-head)}
#htmReviews .hr-pm{margin:0 0 var(--m-gap)}
#htmReviews .hr-head .hr-more,#htmVideos .hv-more,#htmNews .hn-seeall,#htmClient .hc-more{min-height:44px;margin-top:-12px;margin-bottom:-12px}
#htmNews .hn-in2{gap:var(--m-gap)}
#htmNews .hn-card.hn-block{padding:0 0 4px}
#htmNews .hn-h2{padding:12px 14px 10px;margin-bottom:0}
#htmNews .hn-ep-rows,#htmNews .hn-list{padding:0 2px}
#htmNews .hn-ep-row,#htmNews .hn-row{padding-top:8px;padding-bottom:8px}
#htmClient .hc-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:8px;row-gap:2px;margin-bottom:var(--m-head)}
#htmClient .hc-title{grid-column:1;grid-row:1;font-size:16px}
#htmClient .hc-more{grid-column:2;grid-row:1;font-size:12.5px;white-space:nowrap}
#htmClient .hc-sub{grid-column:1/-1;grid-row:2;font-size:11.5px;line-height:1.4}
#htmClient .hc-track{gap:10px}
#htmClient .hc-chip{padding:8px}
}
/* 모바일·태블릿(≤1024) 첫 화면·관련 서비스 정리(2026-10-07 사용자 요청)
① 신뢰 띠: home-motion.mjs mountMarqueeSlot 이 .top 안(슬로건 뒤)으로 옮긴다. .top 은 order 로 슬로건(1)·부제(2)를
바꿔 보이므로 띠는 order:3 — 화면 순서 «슬로건 → 부제(3가지만 고르세요) → 신뢰 띠»(2026-10-07 사용자 요청으로 부제 아래로).
② 「문서를 선택하면 상품이 표시됩니다」(#odEmpty) 를 즐겨찾기 위로: 결과 묶음을 세로 flex 로 두고 order 만 바꾼다
(DOM·읽기 순서는 그대로). 상품이 나오면 #odEmpty 는 숨으므로 즐겨찾기가 상품 목록 바로 위에 온다.
③ 가독성: 분홍 그라데이션·연두 그라데이션 대신 흰 카드 + 진한 남색 글씨, 글씨 15~16px, 아이콘으로 뜻을 붙인다. */
@media(max-width:1024px){
body:not(.nation-finder-page) .stage .top .od-marquee--hero{order:3;box-sizing:border-box;width:100%;max-width:1024px;margin:14px auto 0}
/* 결과 영역 전체를 한 세로 흐름으로 풀어 안내(#odEmpty)를 「관련 서비스 고르기」 머리(.flood-h) 위로(2026-10-07 사용자 요청) */
body:not(.nation-finder-page) .finder-flood{display:flex;flex-direction:column}
body:not(.nation-finder-page) .flood-b,body:not(.nation-finder-page) .flood-b>div{display:contents}
body:not(.nation-finder-page) .flood-h{order:0}
body:not(.nation-finder-page) .flood-b>div>.od-marquee{order:1}
body:not(.nation-finder-page) #odEmpty{order:-1}
body:not(.nation-finder-page) #odFavorites,body:not(.nation-finder-page) #odFavorites+.favorite-status{order:2}
body:not(.nation-finder-page) #odGallery{order:3}
body:not(.nation-finder-page) #odPagination{order:4}
body:not(.nation-finder-page) #odEmpty.od-hold-wait{display:flex;align-items:flex-start;gap:10px;margin:0 0 12px;padding:14px 16px;border:1px solid #cfdcf0;border-radius:14px;background:#fff;box-shadow:0 6px 18px rgba(10,42,94,.10);color:#16305a;font-size:15px;font-weight:600;line-height:1.55;word-break:keep-all}
body:not(.nation-finder-page) #odEmpty.od-hold-wait[hidden]{display:none}
body:not(.nation-finder-page) #odEmpty.od-hold-wait::before{content:'i';flex:none;display:grid;place-items:center;width:22px;height:22px;margin-top:1px;border-radius:50%;background:#1E5BBA;color:#fff;font:800 13px/1 Georgia,serif}
body:not(.nation-finder-page) #odEmpty.od-hold-wait{flex-wrap:wrap}
body:not(.nation-finder-page) #odEmpty.od-hold-wait p{flex:1 1 calc(100% - 32px);min-width:0;margin:0}/* 문단마다 한 줄 전체(두 단으로 갈라져 7줄 되던 것, 2026-10-19 T05 B1) */
body:not(.nation-finder-page) #odEmpty.od-hold-wait p+p{margin-inline-start:32px}
body:not(.nation-finder-page) #odEmpty #odRetry:not([hidden]){flex:0 0 auto;margin:4px 0 0 32px;min-height:44px;padding:0 18px}
body:not(.nation-finder-page) #odFavorites.favorite-panel{border:1px solid #ecd9a6;border-radius:14px;background:#fff;box-shadow:0 6px 18px rgba(10,42,94,.10)}
body:not(.nation-finder-page) #odFavorites .favorite-toggle{min-height:56px;padding:12px 16px;color:#16305a;font-size:16px;font-weight:800}
body:not(.nation-finder-page) #odFavorites .favorite-toggle>span:first-child{display:flex;align-items:center;gap:10px}
body:not(.nation-finder-page) #odFavorites .favorite-toggle>span:first-child::before{content:'';flex:none;width:22px;height:22px;background:url(../img/star.png) center/contain no-repeat}
body:not(.nation-finder-page) #odFavorites .favorite-toggle:hover{background:#fffaf0}
body:not(.nation-finder-page) #odFavorites .favorite-toggle-action{min-height:32px;padding:0 12px;border-radius:999px;background:#fff4d6;color:#7a5200;font-size:13.5px;font-weight:700}
body:not(.nation-finder-page) #odFavorites .favorite-toggle[aria-expanded=true] .favorite-toggle-action{background:#eef3fb;color:#1E3F72}
body:not(.nation-finder-page) .flood-h .fh-title{font-size:17px}
/* 「🔮 관련 서비스 고르기」 머리는 모바일·태블릿에서 숨긴다(2026-10-07 사용자 요청). 제목(#odResultsHeading)은 목록의
aria-labelledby·쪽 넘김 스크롤 기준이라 지우지 않고 화면에서만 감춘다. 상태줄·다시 시도는 머리 상자 안에 그대로 남는다. */
body:not(.nation-finder-page) .flood-h{margin:0;padding:0;border:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
body:not(.nation-finder-page) .flood-h .finder-heading-row{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
body:not(.nation-finder-page) .finder-favorite-guide{font-size:14.5px;font-weight:700;line-height:1.5;word-break:keep-all}
}
/* 첫 화면 배경(.stage, 홈 인라인 overflow:hidden)은 손으로는 안 밀리지만 scrollIntoView(서류 찾기 칸으로 이동 등)가
상자 안을 밀어 올려 아래에 큰 빈칸이 생겼다(2026-10-07, 390px 에서 176px). clip 은 코드 스크롤도 막는다.
휴대폰·태블릿(도킹) 한정 — 데스크톱은 오른쪽 AI 칸 sticky 동작이 달라질 수 있어 그대로 둔다. */
@supports (overflow:clip){
html.akai-docked body .stage{overflow:clip}
}
/* 홈 에피소드·블로그 노트 카드 — 빨간 여백선(2026-10-07 사용자 요청: 폭마다 어긋남)
원래 선은 카드 기준 고정 위치(index.html .hn-ep::before left:56px·top:64px)라 목록 여백·머리 높이가 폭마다 달라지면
제목을 가로지르거나 머리 점선을 넘었다 → 카드 선은 끄고, 줄마다 번호 칸(30px) 바로 오른쪽에 긋는다.
위치 = 줄 안쪽 여백 4px + 번호 30px + 간격 9px 의 절반 ≈ 38px — 줄 기준이라 카드 여백·폭과 무관하게 늘 번호와 제목 사이.
줄 사이 구분선(1px)까지 덮어 끊기지 않게 bottom:-1px. */
#htmNews .hn-ep::before{content:none}
#htmNews .hn-ep-row{position:relative}
#htmNews .hn-ep-row::before{content:'';position:absolute;left:38px;top:0;bottom:-1px;width:1px;background:rgba(224,16,110,.18);pointer-events:none}
#htmNews .hn-ep-row:last-child::before{bottom:0}
/* 제목은 한 줄 + 말줄임(≤640 은 원래 두 줄 clamp 였다). 날짜 줄은 그대로. */
@media(max-width:1024px){
#htmNews .hn-ep-tt{display:block;flex:1 1 calc(100% - 40px);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:unset}
}
/* [P01 2026-10-07] 쪽 이동 «🔮 관련 서비스 고르기 ‹ 6/22 ›» — 결과 제목 줄 오른쪽에 고정해 상품 수가 바뀌어도 버튼 자리가
같다(사용자 요청). 칸(.od-pagebar)은 document-finder.js 가 만들어 기존 #odPagination 을 넣고 .finder-heading-row 끝에 붙인다
(버튼은 한 곳). 쪽 정보가 없으면 칸이 숨어 제목만 남는다. 쪽을 넘겨도 자동 스크롤은 하지 않는다.
주입 CSS(document-finder.js PANEL_CSS)의 옛 아래쪽 쪽 표시 꾸밈(위 여백·구분선·흰 글씨)은 여기서 덮는다. */
.od-pagebar{display:flex;align-items:center;flex:none;margin-inline-start:auto}
.od-pagebar[hidden]{display:none}
.od-pagebar #odPagination:not([hidden]){display:flex;flex-wrap:nowrap;align-items:center;gap:2px;margin:0;padding:0;border:0}
.od-pagebar #odPagination button{display:inline-grid;place-items:center;min-width:44px;min-height:44px;padding:0;border:1px solid #d6e2f5;border-radius:10px;background:#fff;color:#0a2a5e;font-size:22px;font-weight:700;line-height:1}
.od-pagebar #odPageStatus{min-width:4.2em;color:#0a2a5e;font-size:14px;font-weight:600;text-align:center;font-variant-numeric:tabular-nums;direction:ltr}
.od-pagebar #odPageStatus strong{font-weight:800}
/* ≤1024 홈: 위 블록이 sr-only 로 감춘 제목 줄을 다시 보인다(그 블록은 손대지 않고 덮기만). 제목만 — 즐겨찾기 안내는 계속 숨김.
줄 모양은 데스크톱 .flood-h 와 같은 반투명 흰 카드(사용자: «배경색 어디 갔냐»), 결과 목록 바로 위
(머리 .flood-h 를 목록과 같은 order 로 — DOM 상 목록 앞이라 바로 위에 온다). 카드 위 글자는 남색(대비 4.5:1 이상). */
@media(max-width:1024px){
body:not(.nation-finder-page) .flood-h{order:3}
body:not(.nation-finder-page) .flood-h .finder-heading-row{position:static;width:auto;height:auto;margin:0 0 10px;overflow:visible;clip-path:none;white-space:normal;display:flex;flex-wrap:nowrap;align-items:center;gap:10px;min-height:44px;padding:12px 14px;border:1px solid rgba(255,255,255,.5);border-radius:14px;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(13px) saturate(1.2);backdrop-filter:blur(13px) saturate(1.2);box-shadow:0 14px 34px rgba(6,18,45,.28)}
body:not(.nation-finder-page) .flood-h .finder-favorite-guide{display:none}
body:not(.nation-finder-page) .flood-h #odResultsHeading{flex:1 1 auto;min-width:0;color:#0A2A5E;font-size:16px;line-height:1.35}
}
/* PC 머리 줄: 쪽 칸이 줄 끝에 붙으면서 「자주 이용하는 서비스는 ‘즐겨찾기’로」가 제목 쪽으로 밀렸다(2026-10-07 사용자 지적)
→ 안내를 오른쪽으로 밀고 쪽 칸은 그 바로 뒤. 안내가 숨는 경우(≤1024)엔 쪽 칸이 다시 오른쪽 끝. */
.finder-heading-row .finder-favorite-guide{margin-inline-start:auto}
.finder-heading-row .finder-favorite-guide~.od-pagebar{margin-inline-start:16px}
@media(max-width:1024px){
.finder-heading-row .finder-favorite-guide~.od-pagebar{margin-inline-start:auto}
}
/* 머리 줄이 좁을 때(PC 1440 처럼 오른쪽 AI 칸이 있어 가운데 칸이 ~515px) 세 덩어리가 한 줄에 안 들어가 쪽 칸이 둘째 줄 왼쪽으로 떨어졌다
→ 줄 너비 기준(컨테이너 쿼리): 좁으면 「제목 + 쪽 칸」 첫 줄, 즐겨찾기 안내는 둘째 줄 오른쪽. */
.flood-h{container-type:inline-size}
@container (max-width:1024px){
.finder-heading-row .finder-favorite-guide{order:3;flex-basis:100%;justify-content:flex-end;margin-inline-start:0}
.finder-heading-row .finder-favorite-guide~.od-pagebar{margin-inline-start:auto}
}
/* ≤1024 결과 영역은 CSS order 로 화면 순서를 바꿨는데(안내 -1 · 즐겨찾기 2 · 머리 3 · 목록 3), 그림자는 HTML 순서대로 칠해져
HTML 상 뒤에 있는 즐겨찾기 카드의 그림자가 화면상 아래 「관련 서비스 고르기」 카드 윗부분에 회색 띠로 겹쳤다(2026-10-07 사용자 지적)
→ 화면 순서대로 쌓이게: 아래에 있는 카드일수록 위에 칠한다(위 카드 그림자를 덮는다). */
@media(max-width:1024px){
body:not(.nation-finder-page) #odEmpty{position:relative;z-index:1}
body:not(.nation-finder-page) #odFavorites{position:relative;z-index:2}
body:not(.nation-finder-page) .flood-h{position:relative;z-index:3}
body:not(.nation-finder-page) #odGallery,body:not(.nation-finder-page) #odPagination{position:relative;z-index:4}
}
/* ≤1024 「관련 서비스 고르기 ‹ › 」 카드 테두리(흰 1px)가 보였다 안 보였다 했다(2026-10-07 사용자 지적) — backdrop-filter 는 뒤에서 움직이는 것
(카멜레온·띠·자리표시 반짝임)이 있을 때마다 다시 칠해져 가장자리가 깜빡인다 → 휴대폰·태블릿에선 흐림을 끄고 같은 색의 불투명 배경. */
@media(max-width:1024px){
body:not(.nation-finder-page) .flood-h .finder-heading-row{-webkit-backdrop-filter:none;backdrop-filter:none;background:#c0cee8;border-color:rgba(255,255,255,.55);transform:translateZ(0)}
}
/* 첫 화면 화면 밀림(CLS) 줄이기(2026-10-07 사용자: 「데이터 나오기 전 흔들리는 듯한 모션」 — 390px CLS 0.99 측정)
JS 가 나중에 넣거나 숨기는 것의 자리를 처음부터 잡아 둔다. 수치는 렌더 후 실측값과 같다. */
@media(max-width:1024px){
/* ① 신뢰 띠: home-motion.mjs 가 .top 안으로 옮기기 전에도 같은 자리(위 14px + 54px)를 비워 둔다 */
body:not(.nation-finder-page) .stage:has(.od-marquee) .top:not(:has(.od-marquee--hero))::after{content:'';order:3;display:block;height:54px;margin-top:14px}
/* ④ 쪽 칸이 와도 머리 줄 높이가 같게(버튼 44 + 위아래 12 + 테두리) */
body:not(.nation-finder-page) .flood-h .finder-heading-row{min-height:70px}
}
@media(max-width:1024px){
/* ③ 국가 목록 상태줄은 휴대폰에선 처음부터 화면에서만 감춘다(불러오는 중 → 완료로 21px 줄던 것). 화면 낭독기는 그대로 읽는다 */
body:not(.nation-finder-page) #odCountryStatus{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap!important;border:0!important}
}
/* ⑤ 즐겨찾기 상자는 favorites.js 가 hidden 을 풀 때 생겨 아래를 밀었다 → 처음부터 같은 높이로 자리만 잡아 둔다(보이지 않음) */
#odFavorites[hidden]{display:block!important;visibility:hidden;min-height:58px;margin:0 0 20px}
@media(max-width:1024px){body:not(.nation-finder-page) #odFavorites[hidden]{margin:0 0 12px}}
@media(max-width:1024px){
/* ⑥ 신뢰 띠는 휴대폰·태블릿에선 .top 으로 옮겨 가므로 원래 자리(상품 영역 위)에선 처음부터 감춘다 — 잠깐 보였다 빠지며 아래가 66px 올라갔다 */
body:not(.nation-finder-page) .flood-b .od-marquee:not(.od-marquee--hero){display:none}
/* ⑦ 결과 상태줄(「상품이 여기에 표시됩니다」 등)은 휴대폰·태블릿에선 처음부터 화면에서만 감춘다(준비되면 어차피 감춰졌다). 낭독은 그대로 */
body:not(.nation-finder-page) #odFinderStatus{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap!important;border:0!important}
}
/* ⑧ 첫 화면 배경 장식(.glow1, index.html top:-6%)은 첫 화면 높이에 따라 위치가 바뀌어, 상품이 들어와 첫 화면이 길어질 때마다
화면 밀림(CLS)으로 잡혔다 → 고정 px(지금 PC 높이 기준과 거의 같은 -48px). */
.stage .glow1{top:-48px}
/* 불러오는 중 자리표시(≤1024) — 상품 칸을 640px 로 잡았더니 회색 카드 1장이 그만큼 늘어나 너무 길어 보였다(2026-10-07 사용자 지적)
→ 강제 높이는 없애고, 카드 1장을 서류별 묶음 목록과 비슷한 높이(약 300px)로: 첫 줄 안내 + 회색 줄 4개. 늘어나지 않게 위로 붙인다. */
@media(max-width:1024px){
body:not(.nation-finder-page) #odGallery[aria-busy="true"]{align-content:start;align-items:start}
body:not(.nation-finder-page) #odGallery .od-loading-card{min-height:0;height:auto}
body:not(.nation-finder-page) #odGallery .od-loading-card::after{content:'';display:block;height:176px;margin-top:4px;
background:repeating-linear-gradient(to bottom,#e9eef5 0 13px,transparent 13px 44px);border-radius:5px;opacity:.9}
body:not(.nation-finder-page) #odGallery .od-loading-card span:last-child{margin-top:0}
}
/* 홈 소식 가로 카드의 뉴스·공지 줄 — 분류 배지 폭이 글자 길이대로 달라 제목 시작 위치가, 제목이 1·2줄로 꺾여 줄 높이가 제각각이었다(2026-10-07 사용자 지적)
→ 배지 칸 고정 폭·가운데, 제목 한 줄 + …, 날짜 오른쪽 고정, 줄 높이 같게. 에피소드·블로그(번호 칸 고정·제목 한 줄)와 같은 결. */
@media(max-width:1024px){
#htmNews .hn-list .hn-row{display:flex;align-items:center;gap:10px;min-height:46px;padding-top:6px;padding-bottom:6px}
#htmNews .hn-list .hn-row .ncat{flex:0 0 78px;box-sizing:border-box;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px}
#htmNews .hn-list .hn-row .hn-dot{flex:0 0 78px;text-align:center}
#htmNews .hn-list .hn-row .hn-pin{flex:0 0 auto}
#htmNews .hn-list .hn-row .hn-tt{flex:1 1 auto;min-width:0;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:unset}
#htmNews .hn-list .hn-row .hn-date{flex:0 0 auto;margin-inline-start:auto}
}
/* 홈 소식(≤640) — 두 섹션(서류 이야기 = 에피소드·블로그 / 소식 = 뉴스·공지사항), 섹션마다 카드 2장 가로 넘김(home-motion.mjs mountNewsCarousel).
2026-10-07 사용자: 네 칸 세로 쌓기 → (가로 4장 → 탭 2묶음을 거쳐) 섹션으로 구분. */
.hn-dots{display:none}
@media(max-width:1024px){
#htmNews .hn-in2.is-sectioned{display:block}
#htmNews .hn-sec+.hn-sec{margin-top:22px}
#htmNews .hn-sec-title{margin:0 0 10px;font-size:17px;font-weight:800;color:#0A2A5E;letter-spacing:-.2px}
#htmNews .hn-sec-strip{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
margin:0 calc(-1 * var(--m-side,16px));padding:2px var(--m-side,16px) 6px;scroll-padding:0 var(--m-side,16px);scrollbar-width:none}
#htmNews .hn-sec-strip::-webkit-scrollbar{display:none}
#htmNews .hn-sec-strip>.hn-card{flex:0 0 86%;scroll-snap-align:center;scroll-snap-stop:always;min-width:0;box-sizing:border-box}
#htmNews .hn-dots{display:flex;justify-content:center;gap:8px;margin:8px 0 0}
#htmNews .hn-dots button{position:relative;width:8px;height:8px;min-width:0;padding:0;border:0;border-radius:999px;background:#c5d1e3;cursor:pointer;transition:width .2s,background .2s}
#htmNews .hn-dots button::after{content:'';position:absolute;inset:-18px -8px}
#htmNews .hn-dots button[aria-current="true"]{width:22px;background:#0A2A5E}
}
@media(max-width:1024px) and (prefers-reduced-motion:reduce){#htmNews .hn-dots button{transition:none}}
/* 홈 소식 카드(≤640) 글 줄 — 제목이 한 줄에서 너무 일찍 잘렸다(2026-10-07 사용자: 본문이 더 길어도 된다)
→ 제목 두 줄까지(넘치면 …), 날짜는 제목 아래 작은 줄로 내려 제목 폭을 넓힌다. 배지·번호 칸 고정 폭은 그대로(제목 시작 위치 정렬). 카드 폭 86% → 90%. */
@media(max-width:1024px){
#htmNews .hn-sec-strip>.hn-card{flex-basis:90%}
#htmNews .hn-list .hn-row{flex-wrap:wrap;align-items:flex-start;row-gap:2px;min-height:0;padding-top:9px;padding-bottom:9px}
#htmNews .hn-list .hn-row .ncat,#htmNews .hn-list .hn-row .hn-dot{margin-top:1px}
#htmNews .hn-list .hn-row .hn-tt{flex:1 1 calc(100% - 88px);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;overflow:hidden;line-height:1.4}
#htmNews .hn-list .hn-row .hn-date{flex:0 0 100%;margin:0;padding-inline-start:88px;font-size:11.5px;color:#7a879c}
#htmNews .hn-ep-row .hn-ep-tt{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;overflow:hidden;line-height:1.4}
}
/* 국가 선택 버튼(발급국·제출국, country-picker.mjs .ak-cp-trigger) — 눌렀을 때 뜨는 검색칸(.ak-cp-input, 「🔍 국가 검색」)과 같은 모양으로
(2026-10-07 사용자: 돋보기 UI 로 둘을 일치, PC·모바일 전부). 오른쪽 꺾쇠 → 왼쪽 같은 돋보기, 높이 46·모서리 12·테두리 1.5px, 미선택은 회색 안내. */
.odx .ak-cp-trigger,.ak-cp-trigger{min-height:46px;box-sizing:border-box;padding:0 14px;padding-inline-start:42px;border:1.5px solid #cfdcf0;border-radius:12px;background:#fff;color:#16233b;font-size:16px;
transition:border-color .15s,box-shadow .15s}
.odx .ak-cp-trigger::after,.ak-cp-trigger::after{content:none}
.odx .ak-cp-trigger::before,.ak-cp-trigger::before{content:"";position:absolute;inset-inline-start:14px;top:50%;width:18px;height:18px;margin-top:-9px;pointer-events:none;
background:no-repeat center/18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6b88' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E")}
.odx .ak-cp-trigger.is-placeholder,.ak-cp-trigger.is-placeholder{color:#58677f}
.odx .ak-cp-trigger:not(:disabled):hover,.ak-cp-trigger:not(:disabled):hover{border-color:#1E5BBA}
.odx .ak-cp-trigger:focus-visible,.ak-cp-trigger:focus-visible{outline:none;border-color:#1E5BBA;box-shadow:0 0 0 3px rgba(30,91,186,.14)}
/* 홈 소식 뉴스·공지 줄 통일(≤640, 2026-10-07 사용자 지적: 뉴스 왼쪽 점 칸이 공간 낭비, 둘 UI 통일)
→ 1줄째 제목(폭 전체·두 줄까지), 2줄째 왼쪽 라벨(공지 분류 .ncat / 뉴스 언론사 .hn-outlet, 있을 때만) · 오른쪽 날짜. 점(•) 없음.
앞의 「배지 78px 칸 + 날짜 88px 들여쓰기」 규칙을 덮는다. */
@media(max-width:1024px){
#htmNews .hn-list .hn-row{display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;row-gap:5px;min-height:0;padding:10px 12px}
#htmNews .hn-list .hn-row .hn-dot{display:none}
#htmNews .hn-list .hn-row .hn-tt{order:1;flex:0 0 100%;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;overflow:hidden;line-height:1.4}
#htmNews .hn-list .hn-row .hn-pin{order:2;flex:none}
#htmNews .hn-list .hn-row .ncat,#htmNews .hn-list .hn-row .hn-outlet{order:3;flex:0 1 auto;width:auto;min-width:0;max-width:60%;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#htmNews .hn-list .hn-row .hn-outlet{font-size:12px;font-weight:700;color:#4f6688}
#htmNews .hn-list .hn-row .hn-date{order:4;flex:none;margin:0;margin-inline-start:auto;padding:0;font-size:12px;color:#7a879c}
}
/* PC 홈 뉴스 줄: 새로 붙은 언론사·날짜는 오른쪽 작은 글씨 */
.hn-row .hn-outlet{flex:none;font-size:11.5px;font-weight:600;color:#8a97ad;white-space:nowrap}
/* 홈 「주요 고객사」 머리 — 부제를 home-motion.mjs splitClientTags 가 「 · 」 기준 태그(.hc-tag)로 나눈다(2026-10-07 사용자 선택: 작은 태그 줄).
PC 는 태그 사이에 「 · 」 를 다시 그려 예전 한 줄 문장 모양 그대로, 휴대폰(≤640)은 테두리 작은 태그(들어가는 만큼 한 줄). */
.hc-sub .hc-tag+.hc-tag::before{content:" · "}
@media(max-width:1024px){
#htmClient .hc-head{row-gap:10px;margin-bottom:12px}
#htmClient .hc-title{font-size:17px;font-weight:900;color:#0A2A5E;letter-spacing:-.2px}
#htmClient .hc-sub.is-tags{display:flex;flex-wrap:wrap;gap:6px;font-size:0}
#htmClient .hc-sub .hc-tag{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border:1px solid #d9e3f1;border-radius:999px;background:#f6f9fd;color:#3d5277;font-size:12px;font-weight:700;white-space:nowrap}
#htmClient .hc-sub .hc-tag+.hc-tag::before{content:none}
#htmClient .hc-more::after{content:' ›'}
}
/* ── 상품 속도·가격 패널 = 아래 시트(≤1024, document-finder.js placePanel) — 2026-10-07 사용자 요청 ──
「하위로 나오지 말고 모바일은 모달로」 「세로로 너무 길어 가독성이 떨어진다」.
패널은 body 에 붙어 화면 아래에서 올라오고, 뒤는 어둡게 덮는다(누르면 닫힘). 속도 줄은 한 줄(등급·기간 | 가격 | 선택)로 줄였다.
머리(상품명·닫기)와 아래 「상품 정보 보기」는 시트 안에서 고정, 가운데만 스크롤. 하단은 안전 영역(홈 표시줄)만큼 띄운다. */
.od-sheet-mask{position:fixed;inset:0;z-index:10040;background:rgba(6,20,45,.48);opacity:0;transition:opacity .22s ease}
.od-sheet-mask.is-open{opacity:1}
.od-pcard.is-sheet{position:fixed;left:0;right:0;bottom:0;z-index:10045;margin:0!important;width:auto;max-width:1024px;margin-inline:auto!important;
max-height:85vh;max-height:85dvh;display:flex;flex-direction:column;overflow:hidden;background:#fff;border:0;border-radius:18px 18px 0 0;
box-shadow:0 -10px 30px rgba(6,20,45,.22);transform:translateY(100%);transition:transform .28s cubic-bezier(.2,.8,.2,1);
padding-bottom:env(safe-area-inset-bottom,0px)}
.od-pcard.is-sheet.is-open{transform:none}
.od-pcard.is-sheet::before{content:"";display:block;flex:none;width:40px;height:4px;margin:8px auto 0;border-radius:2px;background:#cfd8e6}
.od-pcard.is-sheet .od-phead{flex:none;display:flex;align-items:flex-start;gap:8px;padding:10px 16px 12px;border-bottom:1px solid #e8eef6}
.od-pcard.is-sheet .od-phead .nm{flex:1;min-width:0;font-size:16px;font-weight:800;line-height:1.4;color:#0A2A5E;word-break:keep-all;overflow-wrap:anywhere}
.od-pcard.is-sheet .pc-x{flex:none;min-width:40px;min-height:40px;margin:-6px -8px 0 0;border:0;border-radius:10px;background:#f1f5fb;color:#41546f;font-size:16px;cursor:pointer}
.od-pcard.is-sheet .od-steps{flex:none;padding:8px 16px;font-size:12.5px;gap:6px;flex-wrap:wrap;background:#f7faff;border-bottom:1px solid #e8eef6}
.od-pcard.is-sheet .od-grades{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.od-pcard.is-sheet .od-grow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid #eef2f8}
.od-pcard.is-sheet .od-grow .gl{display:flex;flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:2px 8px;font-size:15px;min-width:0}
.od-pcard.is-sheet .od-grow .gl .g{font-weight:800;white-space:nowrap}
.od-pcard.is-sheet .od-dayscap{display:inline-flex;flex-direction:row;align-items:baseline;gap:3px;white-space:nowrap}
.od-pcard.is-sheet .od-dayscap b{font-size:14px}
.od-pcard.is-sheet .od-dayscap em{font-size:12px;font-style:normal;color:#5d6d86}
.od-pcard.is-sheet .od-grow .gr{display:contents}
.od-pcard.is-sheet .od-grow .pr{font-size:16px;font-weight:900;color:#0A2A5E;white-space:nowrap;font-variant-numeric:tabular-nums}
.od-pcard.is-sheet .od-cartadd,.od-pcard.is-sheet .od-addbtn{min-height:40px;min-width:64px;padding:0 12px;font-size:14px;border-radius:10px}
.od-pcard.is-sheet .od-cart-note{margin:10px 16px}
.od-pcard.is-sheet .od-pfoot{flex:none;padding:10px 16px 12px;border-top:1px solid #e8eef6;background:#fff}
.od-pcard.is-sheet .od-pfoot .tgo{width:100%;margin-left:0;box-sizing:border-box;display:flex;align-items:center;justify-content:center;min-height:46px;border-radius:12px;font-size:15px}
@media (prefers-reduced-motion:reduce){.od-pcard.is-sheet,.od-sheet-mask{transition:none}}
/* PC(≥1025): 같은 패널을 화면 가운데 창으로(아래 시트 대신) — 2026-10-07 사용자 요청 「PC 에서도 모달로」 */
@media (min-width:1025px){
/* 즐겨찾기 창(favorites.css .fav-sheet)과 같은 자리·같은 모양(2026-10-14 사용자 「PC 에서 더 넓게」 → 「즐겨찾기랑 같은 위치에 같은 느낌으로」):
폭 min(900px, 100vw-64px) · 헤더 아래 max(96px,12vh) 에서 시작 · 아래로 넘치지 않게 높이 제한 · 위에서 살짝 내려오며 나타남 */
.od-pcard.is-sheet{left:50%;right:auto;bottom:auto;top:max(96px,12vh);width:min(900px,calc(100vw - 64px));max-width:none;margin:0!important;
max-height:min(76vh,calc(100vh - max(96px,12vh) - 32px),760px);
border-radius:18px;padding-bottom:0;transform:translate(-50%,12px);opacity:0;transition:transform .22s ease,opacity .22s ease;box-shadow:0 24px 60px rgba(6,20,45,.32)}
.od-pcard.is-sheet.is-open{transform:translate(-50%,0);opacity:1}
.od-pcard.is-sheet::before{display:none}
#odProductPanel.od-pcard.is-sheet .od-phead{padding:16px 14px 12px 22px!important;align-items:center}/* 즐겨찾기 창 머리와 같은 여백 — 아래(1423행) !important 를 id 로 넘는다 */
.od-pcard.is-sheet .od-phead .nm{font-size:17px}
.od-pcard.is-sheet .od-pinfo{padding:12px 22px}
.od-pcard.is-sheet .od-grow{padding:16px 22px}
.od-pcard.is-sheet .od-pfoot{padding:14px 22px 18px}
.od-pcard.is-sheet .od-cartadd:hover{filter:brightness(1.05)}
}
/* 모달 다듬기(2026-10-07): ① 즐겨찾기 ☆(카드 별을 거울처럼) ② 속도 줄 — 등급 칸 폭을 고정해 기간(「3일 영업일」)이 세로로 한 줄에 맞게(오와 열)
③ PC 결과 카드 — 오른쪽 위 ★ 자리만큼 이름 칸을 비워 글자가 별 밑으로 들어가지 않게. */
.od-pcard.is-sheet .od-sheet-fav{flex:none;display:grid;place-items:center;min-width:40px;min-height:40px;margin:-6px 0 0;border:0;border-radius:10px;background:#fff8dc;cursor:pointer}
.od-pcard.is-sheet .od-sheet-fav img{width:20px;height:20px;object-fit:contain}
.od-pcard.is-sheet .od-sheet-fav[aria-pressed="false"]{background:#f1f5fb}
.od-pcard.is-sheet .od-grow .gl{display:grid;grid-template-columns:6.6em auto;align-items:baseline;gap:0 8px}
.od-pcard.is-sheet .od-grow .gl .g{white-space:nowrap}
@media (min-width:1025px){
#odGallery .od-gcard:not(.od-grouped){padding-inline-end:46px}
}
/* 모달 아래 「닫기」 + 「상품 정보 보기」 나란히(2026-10-07) — 닫기는 흰 바탕 보조 버튼, 상품 정보는 남은 폭 */
.od-pcard.is-sheet .od-pfoot{display:flex;flex-wrap:nowrap;align-items:stretch;gap:10px}
.od-pcard.is-sheet .od-pfoot .tgo{flex:1;width:auto;min-width:0}
/* 「상품 정보 보기」 : 「닫기」 = 3 : 1 (2026-10-07 사용자 요청) */
.od-pcard.is-sheet .od-pfoot .tgo{flex:3 1 0}
/* 휴대폰 후기 롤링(home-reviews.mjs startRolling) — 카드 2장 높이 창, 넘치는 카드는 가림 */
@media (max-width:1024px){
#htmReviews .hr-grid.is-rolling{display:grid;overflow:hidden;align-content:start}
#htmReviews .hr-grid.is-rolling .hr-card{will-change:transform}
}
/* 홈 「Apostille Korea TV」 영상 모달(home-motion.mjs mountVideoModal) — 2026-10-07 사용자 요청 「유튜브 클릭하면 모달로 재생」.
어두운 막 위 가운데 상자: 제목·✕ / 16:9 영상 / 「YouTube에서 보기」. 휴대폰은 폭 가득, 아래 안전 영역만큼 띄움. */
.hv-modal-mask{position:fixed;inset:0;z-index:10070;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(4,12,28,.78)}
.hv-modal{width:min(880px,100%);max-height:100%;display:flex;flex-direction:column;overflow:hidden;border-radius:16px;background:#0b1424;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.hv-modal-head{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 16px}
.hv-modal-title{flex:1;min-width:0;margin:0;color:#fff;font-size:15px;font-weight:700;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hv-modal-x{flex:none;min-width:40px;min-height:40px;border:0;border-radius:10px;background:rgba(255,255,255,.12);color:#fff;font-size:17px;cursor:pointer}
.hv-modal-x:hover{background:rgba(255,255,255,.22)}
.hv-modal-frame{position:relative;aspect-ratio:16/9;background:#000}
.hv-modal-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.hv-modal-foot{display:flex;justify-content:flex-end;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px))}
.hv-modal-foot a{color:#c9d8f2;font-size:13.5px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
@media (max-width:1024px){.hv-modal-mask{padding:0 0 env(safe-area-inset-bottom,0px)}.hv-modal{border-radius:0}}
/* 휴대폰 홈 소식 묶음(2026-10-07 사용자 「서류 이야기 / 소식 제목은 자리만 차지 — 빼고 섹션 사이 구분선만」):
제목은 화면에서만 감추고(화면낭독용 이름으로 남김), 두 묶음 사이에 가는 선 하나. */
@media (max-width:1024px){
#htmNews .hn-sec-title{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
#htmNews .hn-sec+.hn-sec{margin-top:18px;padding-top:18px;border-top:1px solid #dfe6f0}
}
/* 휴대폰: 「고객 만족 후기」와 「Apostille Korea TV」 사이 구분선(2026-10-07 사용자 요청) — 내용 폭에 맞춘 가는 선 */
@media (max-width:1024px){
#htmVideos .hv-head{border-top:1px solid #d6dfec;padding-top:18px}
}
/* 휴대폰 홈 소식 묶음 카드 간격 고르게(2026-10-07 사용자 「공지사항과 뉴스 간격이 일정하지 않다」): 마지막 카드는 가운데 맞춤이 안 돼
끝에 붙으면서 왼쪽 이웃만 85px 넓게 보였다 → 카드 폭을 화면 기준 고정(양옆 32px)하고 같은 크기 안쪽 여백을 줘서 첫·마지막 카드도 가운데에 선다.
+ 소식 묶음과 「주요 고객사」 사이 구분선. */
@media(max-width:1024px){
#htmNews .hn-sec-strip{padding-inline:32px;scroll-padding-inline:32px;gap:12px}
#htmNews .hn-sec-strip>.hn-card{flex:0 0 calc(100vw - 64px);max-width:calc(100vw - 64px)}
.hc-head{border-top:1px solid #d6dfec;padding-top:18px}
}
/* 주요 고객사 로고 띠 정리(2026-10-07 사용자 「주요 고객사 UI 마음에 안 든다」, ≤1024):
106px 카드(로고+이름)·넓은 흐림(18%) → 로고만 담은 낮은 칸(60px) 한 줄 띠, 이름은 로고 alt 로만(화면낭독), 양끝 흐림 8%.
흐름·멈춤·동작 줄이기 처리는 그대로(home-motion.mjs). 동작 줄이기 격자도 같은 낮은 칸으로. */
@media(max-width:1024px){
#htmClient .hc-marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
#htmClient .hc-track{gap:10px;padding:2px 0}
#htmClient .hc-chip{width:118px;height:60px;min-height:0;padding:8px 12px;gap:0;border:1px solid #edf1f7;border-radius:12px;background:#fff;box-shadow:none}
#htmClient .hc-chip .hc-logo{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
#htmClient .hc-chip img{max-width:94px;max-height:30px;width:auto;height:auto;object-fit:contain}
#htmClient .hc-chip .cname{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#htmClient .hc-head{margin-bottom:12px}
}
@media(max-width:1024px) and (prefers-reduced-motion:reduce){
#htmClient .hc-chip{width:auto;height:56px}
}
@media(max-width:1024px){
#htmClient .hc-chip{padding:6px 10px}
#htmClient .hc-chip img{max-width:100%;max-height:40px}
}
@media(max-width:1024px){
#htmClient .hc-sub.is-tags{gap:4px;flex-wrap:nowrap;overflow:hidden}
#htmClient .hc-sub .hc-tag{min-height:24px;padding:0 8px;font-size:11.5px}
}
/* 태그 → 「·」 로 잇는 회색 한 줄(태그 3개가 390 에서 잘림) */
@media(max-width:1024px){
#htmClient .hc-sub.is-tags{display:block;font-size:12px;line-height:1.5;color:#5d6d86;overflow:visible;white-space:normal}
#htmClient .hc-sub .hc-tag{display:inline;min-height:0;padding:0;border:0;background:none;font-size:12px;font-weight:600;color:#5d6d86;white-space:nowrap}
#htmClient .hc-sub .hc-tag+.hc-tag::before{content:" · ";color:#a3b0c2}
}
@media(max-width:1024px){#htmClient .hc-head{padding-left:0;padding-right:0}#htmClient .hc-sub.is-tags,#htmClient .hc-sub .hc-tag{font-size:11.5px;font-weight:500}}/* 머리를 구분선 폭에 맞추고 부제 한 줄 */
/* 홈 후기 모달(home-reviews.mjs mountReviewModal) — 밝은 상자, 후기 카드는 줄 제한 없이 전체, 사진은 상자 폭 가득. 휴대폰은 아래 시트처럼. */
#htmReviews .hr-card[role="button"]{cursor:pointer}
#htmReviews .hr-card[role="button"]:focus-visible{outline:3px solid #4d8be8;outline-offset:2px}
#htmReviews .hr-pmtrack a{cursor:zoom-in}
.hr-modal-mask{position:fixed;inset:0;z-index:10070;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(6,20,45,.55)}
.hr-modal{width:min(640px,100%);max-height:min(86vh,860px);max-height:min(86dvh,860px);display:flex;flex-direction:column;overflow:hidden;border-radius:18px;background:#f4f7fc;box-shadow:0 24px 60px rgba(6,20,45,.3)}
.hr-modal-head{flex:none;display:flex;align-items:center;gap:10px;padding:12px 12px 12px 18px;background:#fff;border-bottom:1px solid #e3e9f2}
.hr-modal-title{flex:1;margin:0;font-size:16px;font-weight:800;color:#0A2A5E}
.hr-modal-x{flex:none;min-width:40px;min-height:40px;border:0;border-radius:10px;background:#f1f5fb;color:#41546f;font-size:16px;cursor:pointer}
.hr-modal-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:14px}
.hr-modal-photo{display:block;width:100%;height:auto;max-height:52vh;object-fit:contain;border-radius:12px;background:#e9eef6;margin:0 0 12px}
.hr-modal-list{display:flex;flex-direction:column;gap:10px}
.hr-modal .hr-card.is-full{cursor:default;transform:none!important;box-shadow:none;border:1px solid #e3e9f2}
.hr-modal .hr-card.is-full:hover{transform:none;box-shadow:none}
.hr-modal .hr-card.is-full .hr-body{min-height:0;font-size:14.5px;line-height:1.7}
.hr-modal .hr-card.is-full .hr-body-primary,.hr-modal .hr-card.is-full .hr-body-secondary{display:block;-webkit-line-clamp:unset;overflow:visible;white-space:normal}
.hr-modal .hr-card.is-full .hr-svc{max-width:100%;white-space:normal}
.hr-modal .hr-card.is-full .hr-foot{flex-wrap:wrap}
.hr-modal-foot{flex:none;display:flex;justify-content:flex-end;padding:10px 18px calc(12px + env(safe-area-inset-bottom,0px));background:#fff;border-top:1px solid #e3e9f2}
.hr-modal-foot a{color:#b0262f;font-size:14px;font-weight:800;text-decoration:none;min-height:36px;display:inline-flex;align-items:center}
@media (max-width:1024px){
.hr-modal-mask{align-items:flex-end;padding:0}
.hr-modal{width:100%;max-height:88vh;max-height:88dvh;border-radius:18px 18px 0 0}
}
.hr-modal .hr-card.is-full{gap:10px}.hr-modal .hr-card.is-full .hr-body p{margin:0;word-break:keep-all;overflow-wrap:anywhere}/* 별점-본문 사이 빈칸 줄이고 낱말 단위 줄바꿈 */
#odFinder > .panel[tabindex="-1"]:focus{outline:none}/* 단계 이동 시 칸 포커스 테두리 숨김(finder-steps.mjs) */
/* 상품 모달(2026-10-07): 「상품 정보 보기」 = 머리 안 상품명 아래 한 줄, 바닥 「닫기」 = 폭 100% */
.od-pcard.is-sheet .od-phead{flex-wrap:wrap}
.od-pcard.is-sheet .od-phead .od-phead-go{order:9;flex:0 0 100%;display:flex;align-items:center;justify-content:center;min-height:42px;margin:10px 0 0;padding:0 14px;
border-radius:12px;font-size:14px;box-sizing:border-box;text-align:center}
/* 휴대폰·태블릿 「선택한 서비스」 아래 고정 막대(finder-cart.mjs od-cart-toggle·html.od-cartbar-on) — 2026-10-07 사용자 요청.
접힘: 제목·개수 / 합계 / 진행 버튼. ▴ 로 목록 펼침(최대 화면 45%, 안에서 스크롤). 페이지 아래 여백·AI 버튼을 막대만큼 올린다. 모달·시트 아래(z) */
.od-cart-toggle{display:none}
@media (max-width:1024px){
.panel.od-cart.is-bar{position:fixed;left:0;right:0;bottom:0;z-index:10030;margin:0;border-radius:16px 16px 0 0;
padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));box-shadow:0 -8px 24px rgba(10,42,94,.18);
display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title total" "list list" "status status" "cta cta";column-gap:10px;align-items:center}
.panel.od-cart.is-bar h4{grid-area:title;margin:0;align-items:center;justify-content:flex-start}
.panel.od-cart.is-bar .od-ctotal{grid-area:total;padding:0;border:0;white-space:nowrap}
.panel.od-cart.is-bar .od-ctotal>span:first-child{display:none}
.panel.od-cart.is-bar .od-cart-list{grid-area:list;display:none;max-height:45vh;max-height:45dvh;overflow-y:auto;overscroll-behavior:contain;margin:8px 0 0}
.panel.od-cart.is-bar.is-open .od-cart-list{display:block}
.panel.od-cart.is-bar .od-cart-status{grid-area:status;margin:0}
.panel.od-cart.is-bar .od-cart-status:empty{display:none}
.panel.od-cart.is-bar .od-cta{grid-area:cta;margin-top:8px;min-height:46px}
.od-cart-toggle{display:inline-grid;place-items:center;width:32px;height:32px;margin-left:4px;padding:0;border:0;border-radius:8px;background:rgba(10,42,94,.08);color:#0A2A5E;cursor:pointer}
.od-cart-toggle::before{content:"";width:8px;height:8px;border-left:2px solid currentColor;border-top:2px solid currentColor;transform:translateY(2px) rotate(45deg);transition:transform .2s}
.od-cart-toggle[aria-expanded="true"]::before{transform:translateY(-2px) rotate(225deg)}
html.od-cartbar-on body{padding-bottom:calc(var(--od-cartbar-h, calc(132px + env(safe-area-inset-bottom,0px))) + 8px)}
}
/* 머리로 옮긴 「상품 정보 보기」 — 원래 바닥 버튼과 같은 주황 그라디언트 */
.od-pcard.is-sheet .od-phead .od-phead-go{background:linear-gradient(100deg,#ff5a5f,#f4b41a);color:#1a1030;font-weight:900;text-decoration:none;box-shadow:0 0 14px rgba(244,180,26,.35)}
/* 휴대폰 홈 소식 묶음 여백 줄이기(2026-10-07 「패딩 줄여줘」): 카드 양옆 32 → 20px(옆 카드는 그대로 살짝 보임), 묶음 사이·점 위아래 간격 축소 */
@media(max-width:1024px){
#htmNews .hn-sec-strip{padding-inline:20px;scroll-padding-inline:20px;gap:10px}
#htmNews .hn-sec-strip>.hn-card{flex:0 0 calc(100vw - 40px);max-width:calc(100vw - 40px)}
#htmNews .hn-sec+.hn-sec{margin-top:12px;padding-top:12px}
#htmNews .hn-dots{margin-top:6px}
}
/* 소식 카드 폭은 화면 폭(100vw) 대신 띠 안쪽 폭 100% — PC 브라우저를 좁혀 보면 100vw 에 세로 스크롤바(~15px)가 포함돼
카드가 보이는 칸보다 넓어지고 가운데 맞춤이 어긋났다(2026-10-07 「지금도 간격이 안 맞는다」). 양쪽 20px 은 띠 안쪽 여백이 정한다. */
@media(max-width:1024px){
#htmNews .hn-sec-strip>.hn-card{flex:0 0 100%;max-width:100%}
}
/* 「상품 정보 보기」 작게(2026-10-07 「버튼이 너무 크다」) — 상품명 아래 왼쪽 알약, 폭은 글자만큼 */
.od-pcard.is-sheet .od-phead .od-phead-go{flex:0 0 auto;display:inline-flex;min-height:34px;margin:8px 0 0;padding:0 14px;border-radius:999px;font-size:13px;box-shadow:none}
/* body 로 옮긴 막대는 .finder-rail 색을 못 받으므로 같은 색을 직접 */
@media (max-width:1024px){.panel.od-cart.is-bar{background:#f0ebd5;border:1.5px solid #e0a93a;border-bottom:0}}
/* 하단 막대 숨김 모션(finder-cart.mjs is-hidden) — 아래로 내리는 동안 숨고, 올리거나 멈추면 올라온다 */
@media (max-width:1024px){
.panel.od-cart.is-bar{transition:transform .25s ease}
.panel.od-cart.is-bar.is-hidden{transform:translateY(calc(100% + 12px))}
}
@media (max-width:1024px) and (prefers-reduced-motion:reduce){.panel.od-cart.is-bar{transition:none}}
/* 알약을 늘 상품명 아래 새 줄로 — 폭을 줄이자 첫 줄(별·✕ 옆)로 올라가 상품명을 좁혔다. 보이지 않는 줄바꿈(flex-basis 100%)을 버튼 앞에 둔다 */
.od-pcard.is-sheet .od-phead::after{content:"";order:8;flex:0 0 100%;height:0}
/* 「상품 정보 ›」 = 진행 순서 줄 오른쪽 작은 글자 링크 */
.od-pcard.is-sheet .od-steps{align-items:center}
.od-pcard.is-sheet .od-steps .od-steps-go{margin-left:auto;padding:6px 0 6px 10px;background:none;box-shadow:none;border-radius:0;min-width:0;width:auto;
color:#1E5BBA;font-size:13px;font-weight:800;text-decoration:none;white-space:nowrap}
.od-pcard.is-sheet .od-steps .od-steps-go:hover{text-decoration:underline}
/* 모달 머리: [상세보기 ›][★][✕] 한 줄 — 상세보기는 ★·✕ 와 같은 높이 40px 의 작은 글자 버튼 */
.od-pcard.is-sheet .od-phead .od-phead-detail{flex:none;display:inline-flex;align-items:center;min-height:40px;margin:-6px 0 0;padding:0 12px;border-radius:10px;
background:#eef4fd;color:#1E5BBA;font-size:13px;font-weight:800;text-decoration:none;white-space:nowrap;box-shadow:none;width:auto}
.od-pcard.is-sheet .od-phead .od-phead-detail:hover{background:#e2ecfb}
/* 「담기」 버튼 앞 작은 장바구니 그림(글자는 그대로 — 화면낭독은 「담기」) */
.od-pcard.is-sheet .od-cartadd{display:inline-flex;align-items:center;justify-content:center;gap:5px}
.od-pcard.is-sheet .od-cartadd:not(.picked)::before{content:"";width:15px;height:15px;flex:none;background:currentColor;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 11.2a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.5L21 8H6'/%3E%3Ccircle cx='10' cy='20' r='1.4'/%3E%3Ccircle cx='17' cy='20' r='1.4'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 11.2a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.5L21 8H6'/%3E%3Ccircle cx='10' cy='20' r='1.4'/%3E%3Ccircle cx='17' cy='20' r='1.4'/%3E%3C/svg%3E") center/contain no-repeat}
/* 「상세보기 ›」 = 상품명 글 끝에 이어지는 작은 알약(줄을 따로 쓰지 않음) */
.od-pcard.is-sheet .od-phead .nm .od-name-detail{display:inline-flex;align-items:center;vertical-align:2px;min-height:26px;margin:0;padding:0 10px;border-radius:999px;
background:#eef4fd;color:#1E5BBA;font-size:12.5px;font-weight:800;line-height:1;text-decoration:none;white-space:nowrap;box-shadow:none;width:auto}
.od-pcard.is-sheet .od-phead .nm .od-name-detail:hover{background:#e2ecfb}
/* 담기 모션(finder-cart.mjs flyToCart): 날아가는 「+1」 동그라미, 휴대폰 모달 중 막대를 잠깐 시트 위로 */
.od-fly{position:fixed;z-index:10090;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;pointer-events:none;
background:linear-gradient(135deg,#ffb020,#ff7a1a);color:#fff;font-size:13px;font-weight:900;box-shadow:0 6px 16px rgba(255,122,26,.45)}
#odCartTitle .n{display:inline-block}
@media (max-width:1024px){
.panel.od-cart.is-bar.is-peek{z-index:10050;transform:none}
}
/* 서류 보유 형태 버튼: 「상품 n개」를 라벨 아래 작은 줄로(document-finder.js renderHoldCount) — 숫자만 있을 땐 뜻을 몰랐다 */
#odFinder button[data-hold]{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.25}
#odFinder button[data-hold] .od-hold-n{display:block;margin:3px 0 0;font-size:11.5px;font-weight:600;opacity:.75;white-space:nowrap}
/* 담은 서비스 상자 「발급국 → 제출국」 줄(finder-cart.mjs paintRoute) — 고른 나라는 진한 남색 굵게, 미선택은 흐린 회색 점선 칸 */
.od-cart-route{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin:0 0 8px;font-size:12.5px;color:#5b4a1a}
.od-cart-route .od-cart-route-part{display:inline-flex;align-items:baseline;gap:5px;min-width:0}
.od-cart-route .k{font-size:11.5px;font-weight:700;opacity:.8}
.od-cart-route .v{font-weight:900;color:#0A2A5E;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:9.5em}
.od-cart-route .is-empty .v{font-weight:600;color:#9a8f73;padding:0 6px;border:1px dashed #cdbf95;border-radius:6px}
.od-cart-route .is-empty .k{opacity:.55}
.od-cart-route .ar{color:#a08a4c}
@media (max-width:1024px){
.panel.od-cart.is-bar{grid-template-areas:"title total" "route route" "list list" "status status" "cta cta"}
.panel.od-cart.is-bar .od-cart-route{grid-area:route;margin:6px 0 0}
}
/* 하단 막대 좌우 대칭(2026-10-07 「좌우 대칭이 안 좋다」): 윗줄 [🧺 선택한 서비스 n/10 … 합계 ▴], 아랫줄 [발급국 … → … 제출국] 화살표 정가운데 */
@media (max-width:1024px){
.panel.od-cart.is-bar{grid-template-columns:auto auto minmax(0,1fr) auto auto;grid-template-areas:"tt cnt . total tog" "route route route route route" "list list list list list" "status status status status status" "cta cta cta cta cta";column-gap:8px}
.panel.od-cart.is-bar h4{display:contents}
.panel.od-cart.is-bar h4>span:first-child{grid-area:tt;white-space:nowrap}
.panel.od-cart.is-bar h4 .n{grid-area:cnt;justify-self:start}
.panel.od-cart.is-bar .od-cart-toggle{grid-area:tog;margin:0}
.panel.od-cart.is-bar .od-ctotal{grid-area:total;justify-self:end}
.panel.od-cart.is-bar .od-cart-route{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;margin:8px 0 0}
.panel.od-cart.is-bar .od-cart-route .od-cart-route-part:first-child{justify-self:start}
.panel.od-cart.is-bar .od-cart-route .od-cart-route-part:last-child{justify-self:end}
}
/* 발급국→제출국 줄 부각(2026-10-07 「부각이 안 된다」): 막대 안 흰 칸, 라벨은 위 작은 줄·나라는 아래 굵은 14px, 고른 나라엔 초록 ✓, 미선택은 회색 */
@media (max-width:1024px){
.panel.od-cart.is-bar .od-cart-route{padding:7px 12px;background:#fff;border:1px solid #e3cf95;border-radius:12px;box-shadow:0 1px 3px rgba(122,90,8,.08)}
.panel.od-cart.is-bar .od-cart-route .od-cart-route-part{flex-direction:column;align-items:flex-start;gap:1px}
.panel.od-cart.is-bar .od-cart-route .od-cart-route-part:last-child{align-items:flex-end}
.panel.od-cart.is-bar .od-cart-route .k{font-size:11px;font-weight:700;color:#8a7440;opacity:1}
.panel.od-cart.is-bar .od-cart-route .v{font-size:14px;max-width:11em}
.panel.od-cart.is-bar .od-cart-route .od-cart-route-part:not(.is-empty) .v::after{content:" ✓";color:#16a34a;font-weight:900}
.panel.od-cart.is-bar .od-cart-route .is-empty .v{padding:0;border:0;color:#a7a196;font-weight:700}
.panel.od-cart.is-bar .od-cart-route .ar{font-size:18px;font-weight:900;color:#c49a2c}
}
/* 막대 펼치기: ▴ 버튼 44px, 윗줄 전체가 눌리는 자리(커서) */
@media (max-width:1024px){
.panel.od-cart.is-bar .od-cart-toggle{width:44px;height:44px;border-radius:12px;background:rgba(10,42,94,.1)}
.panel.od-cart.is-bar .od-cart-toggle::before{width:10px;height:10px;border-width:2.5px}
.panel.od-cart.is-bar h4>span,.panel.od-cart.is-bar .od-ctotal{cursor:pointer}
}
/* 하단 막대 펼치기 = 머리줄 전체(2026-10-07 사용자 「화살표 버튼 없애고 상단 헤더를 누르면 열리게, 열린다는 느낌은 CSS 로」).
▴ 버튼은 보이지 않는 채로 머리줄 위를 통째로 덮는 투명 버튼이 된다(키보드·화면낭독도 그대로 이 버튼).
열 수 있다는 표시 = 맨 위 가운데 손잡이(━), 누르는 순간 옅은 눌림색, 펼친 동안엔 손잡이·머리줄이 진해지고 그림자가 깊어진다. */
@media (max-width:1024px){
.panel.od-cart.is-bar{padding-top:18px;grid-template-columns:auto auto minmax(0,1fr) auto;grid-template-areas:"tt cnt . total" "route route route route" "list list list list" "status status status status" "cta cta cta cta"}
.panel.od-cart.is-bar::before{content:"";position:absolute;top:7px;left:50%;width:42px;height:5px;margin-left:-21px;border-radius:3px;background:#cdb37a;transition:background .2s,width .2s}
.panel.od-cart.is-bar .od-cart-toggle{position:absolute;left:0;right:0;top:0;width:auto;height:56px;margin:0;padding:0;border-radius:16px 16px 0 0;background:transparent;z-index:1;cursor:pointer}
.panel.od-cart.is-bar .od-cart-toggle::before{content:none}
.panel.od-cart.is-bar .od-cart-toggle:active{background:rgba(10,42,94,.06)}
.panel.od-cart.is-bar .od-cart-toggle:focus-visible{outline:3px solid #4d8be8;outline-offset:-3px}
.panel.od-cart.is-bar.is-open{box-shadow:0 -14px 34px rgba(10,42,94,.28)}
.panel.od-cart.is-bar.is-open::before{background:#0A2A5E;width:52px;margin-left:-26px}
.panel.od-cart.is-bar.is-open .od-cart-toggle{background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0))}
}
@media (max-width:1024px){.panel.od-cart.is-bar.is-open .od-cart-toggle{background:transparent}.panel.od-cart.is-bar.is-open .od-cart-toggle:active{background:rgba(10,42,94,.06)}}/* 펼침 표시는 손잡이·그림자로만 — 버튼 위 흰 그라디언트가 머리줄 글자를 흐리게 덮었다 */
/* 발급국·제출국 칸 = 누르면 바꾸는 버튼, 각 칸 가운데 정렬, PC 상자에도 같은 모양(2026-10-07 사용자) */
.od-cart-route{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;gap:6px;margin:0 0 10px;padding:6px;background:#fff;border:1px solid #e3cf95;border-radius:12px;box-shadow:0 1px 3px rgba(122,90,8,.08)}
.od-cart-route .od-cart-route-part{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:0;min-height:48px;margin:0;padding:4px 6px;
border:0;border-radius:9px;background:transparent;font:inherit;text-align:center;cursor:pointer;color:inherit}
.od-cart-route .od-cart-route-part:hover{background:#fbf6e6}
.od-cart-route .od-cart-route-part:active{background:#f4ebcd}
.od-cart-route .od-cart-route-part:focus-visible{outline:3px solid #4d8be8;outline-offset:1px}
.od-cart-route .k{font-size:11px;font-weight:700;color:#8a7440;opacity:1}
.od-cart-route .v{font-size:14px;font-weight:900;color:#0A2A5E;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.od-cart-route .od-cart-route-part:not(.is-empty) .v::after{content:" ✓";color:#16a34a;font-weight:900}
.od-cart-route .is-empty .v{padding:0;border:0;color:#a7a196;font-weight:700}
.od-cart-route .is-empty .k{opacity:1}
.od-cart-route .ar{align-self:center;font-size:18px;font-weight:900;color:#c49a2c}
@media (max-width:1024px){
.panel.od-cart.is-bar .od-cart-route{display:grid;padding:6px;margin:8px 0 0}
.panel.od-cart.is-bar .od-cart-route .od-cart-route-part,.panel.od-cart.is-bar .od-cart-route .od-cart-route-part:last-child{align-items:center;justify-self:stretch}
}
/* 휴대폰 막대(2026-10-08): 발급국→제출국 한 줄 가운데(라벨·나라 이어 쓰기), 목록 보기 버튼(route 와 진행 버튼 사이). PC 는 목록 보기 버튼 없음 */
.od-cart-listbtn{display:none}
@media (max-width:1024px){
.panel.od-cart.is-bar{grid-template-areas:"tt cnt . total" "route route route route" "list list list list" "status status status status" "lbtn lbtn lbtn lbtn" "cta cta cta cta"}
.panel.od-cart.is-bar .od-cart-route{display:flex;justify-content:center;align-items:center;flex-wrap:nowrap;gap:6px;padding:4px 8px;min-height:0}
.panel.od-cart.is-bar .od-cart-route .od-cart-route-part,.panel.od-cart.is-bar .od-cart-route .od-cart-route-part:last-child{flex-direction:row;align-items:baseline;justify-content:center;gap:5px;min-height:40px;padding:0 8px;flex:0 1 auto;min-width:0}
.panel.od-cart.is-bar .od-cart-route .v{font-size:14px;max-width:none;overflow:hidden;text-overflow:ellipsis}
.panel.od-cart.is-bar .od-cart-route .od-cart-route-part{align-items:center}
.panel.od-cart.is-bar .od-cart-route .ar{font-size:16px;flex:none}
.panel.od-cart.is-bar .od-cart-listbtn{grid-area:lbtn;display:flex;align-items:center;justify-content:center;gap:4px;width:100%;min-height:40px;margin:8px 0 0;
border:1px solid #e3cf95;border-radius:12px;background:#fff;color:#0A2A5E;font:inherit;font-size:14px;font-weight:800;cursor:pointer}
.panel.od-cart.is-bar .od-cart-listbtn:active{background:#f4ebcd}
}
@media (max-width:1024px){.panel.od-cart.is-bar .od-cart-route .od-cart-route-part,.panel.od-cart.is-bar .od-cart-route .od-cart-route-part:first-child,.panel.od-cart.is-bar .od-cart-route .od-cart-route-part:last-child{align-items:center;align-self:center}}/* 두 칸 글자 높이 맞춤 */
/* 휴대폰 막대(2026-10-08): 머리줄 오른쪽 「간략히/자세히」, 목록 보기·진행 버튼 한 줄, 간략 상태 = 머리줄만 */
.od-cart-actions{display:block}
.od-cart-mini{display:none}
@media (max-width:1024px){
.panel.od-cart.is-bar{grid-template-columns:auto auto minmax(0,1fr) auto auto;
grid-template-areas:"tt cnt . total mini" "route route route route route" "list list list list list" "status status status status status" "acts acts acts acts acts"}
.panel.od-cart.is-bar .od-cart-mini{grid-area:mini;position:relative;z-index:2;display:inline-flex;align-items:center;min-height:32px;margin-left:4px;padding:0 10px;
border:1px solid #d9c48c;border-radius:999px;background:#fff;color:#6b5a2a;font:inherit;font-size:12px;font-weight:800;cursor:pointer}
.panel.od-cart.is-bar .od-cart-actions{grid-area:acts;display:flex;gap:8px;margin-top:8px}
.panel.od-cart.is-bar .od-cart-actions .od-cart-listbtn{flex:1 1 0;width:auto;margin:0;min-height:46px;font-size:13.5px;white-space:nowrap}
.panel.od-cart.is-bar .od-cart-actions .od-cta{flex:1.5 1 0;margin:0;min-height:46px;font-size:14px;white-space:nowrap}
.panel.od-cart.is-bar.is-mini{padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
.panel.od-cart.is-bar.is-mini .od-cart-route,.panel.od-cart.is-bar.is-mini .od-cart-list,.panel.od-cart.is-bar.is-mini .od-cart-status,.panel.od-cart.is-bar.is-mini .od-cart-actions{display:none!important}
}
/* 막대 끌기 반응 효과(finder-cart.mjs is-dragging·is-snap) + 목록·내용 나타남 */
@media (max-width:1024px){
.panel.od-cart.is-bar{transition:transform .32s cubic-bezier(.34,1.56,.64,1),box-shadow .2s}
.panel.od-cart.is-bar.is-dragging{transition:none;box-shadow:0 -16px 36px rgba(10,42,94,.3)}
.panel.od-cart.is-bar.is-dragging::before{background:#0A2A5E;width:56px;margin-left:-28px}
.panel.od-cart.is-bar.is-snap::before{animation:odHandleSnap .3s ease-out}
.panel.od-cart.is-bar.is-open .od-cart-list>li{animation:odListIn .28s ease-out both}
.panel.od-cart.is-bar.is-open .od-cart-list>li:nth-child(2){animation-delay:.04s}
.panel.od-cart.is-bar.is-open .od-cart-list>li:nth-child(3){animation-delay:.08s}
.panel.od-cart.is-bar.is-open .od-cart-list>li:nth-child(n+4){animation-delay:.12s}
.panel.od-cart.is-bar:not(.is-mini) .od-cart-route,.panel.od-cart.is-bar:not(.is-mini) .od-cart-actions{animation:odFadeUp .24s ease-out}
}
@keyframes odHandleSnap{0%{transform:scaleX(1)}40%{transform:scaleX(1.35)}100%{transform:scaleX(1)}}
@keyframes odListIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes odFadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (max-width:1024px) and (prefers-reduced-motion:reduce){
.panel.od-cart.is-bar,.panel.od-cart.is-bar *{animation:none!important;transition:none!important}
}
@media (max-width:1024px){.panel.od-cart.is-bar::after{content:"";position:absolute;left:-1.5px;right:-1.5px;top:100%;height:60px;background:#f0ebd5;border-inline:1.5px solid #e0a93a}}/* 끌어 올릴 때 막대 아래 틈을 같은 색으로 메움 */
/* 「비우기」 버튼(finder-cart.mjs): 머리줄의 작은 글자 버튼, 한 번 누르면 빨간 「정말 비울까요?」 */
.od-cart h4 .od-cart-clear{margin-left:auto;padding:2px 8px;border:1px solid #d9c48c;border-radius:999px;background:#fff;color:#8a5a12;font:inherit;font-size:11.5px;font-weight:800;cursor:pointer;white-space:nowrap}
.od-cart h4 .od-cart-clear.is-armed{background:#fdecec;border-color:#e8a1a1;color:#b42318}
.od-cart h4 .od-cart-clear+.od-cart-mini{margin-left:6px}
@media (max-width:1024px){
.panel.od-cart.is-bar{grid-template-columns:auto auto minmax(0,1fr) auto auto auto;
grid-template-areas:"tt cnt . total clr mini" "route route route route route route" "list list list list list list" "status status status status status status" "acts acts acts acts acts acts"}
.panel.od-cart.is-bar h4 .od-cart-clear{grid-area:clr;position:relative;z-index:2;min-height:32px;margin-left:4px;padding:0 10px;font-size:12px}
.panel.od-cart.is-bar.is-mini h4 .od-cart-clear{display:none}
}
/* 휴대폰 머리줄이 넘치던 것 — 글자 줄바꿈 금지, 비우기는 🗑 아이콘 칸(누르면 빨갛게 「비우기?」), 간략 버튼 글자 축소 */
@media (max-width:1024px){
.panel.od-cart.is-bar h4 .n,.panel.od-cart.is-bar .od-ctotal,.panel.od-cart.is-bar .od-cart-mini{white-space:nowrap}
.panel.od-cart.is-bar .od-cart-mini{padding:0 9px;font-size:11.5px}
.panel.od-cart.is-bar h4 .od-cart-clear{width:34px;padding:0;font-size:0;justify-content:center;display:inline-flex;align-items:center}
.panel.od-cart.is-bar h4 .od-cart-clear::before{content:"🗑";font-size:15px;line-height:1}
.panel.od-cart.is-bar h4 .od-cart-clear.is-armed{width:auto;padding:0 8px}
.panel.od-cart.is-bar h4 .od-cart-clear.is-armed::before{content:"🗑 ?";font-size:13px}
}
/* PC 세 열 윗선 맞춤 + AI 상담창 아래 즐겨찾기(favorites.js placeBesideAi, html.fav-in-ai) — 2026-10-08 */
@media (min-width:1281px){
.finder-flood{margin-top:0}
#odAiCol .favorite-panel{margin:16px 0 0}
#odAiCol .favorite-panel .favorite-toggle{padding:14px 16px;min-height:52px}
#odAiCol .favorite-panel .favorite-guide-inline{display:none}
#odAiCol .favorite-panel .favorite-content{padding:0 12px 12px}
#odAiCol .favorite-panel .favorite-grid{display:flex;flex-direction:column;gap:0;border:1px solid #e3e9f2;border-radius:12px;overflow:hidden;background:#fff}
#odAiCol .favorite-panel .favorite-card{display:flex;flex-direction:row;align-items:center;gap:8px;min-height:0!important;padding:10px 10px 10px 12px;border:0;border-radius:0;box-shadow:none;background:#fff}
#odAiCol .favorite-panel .favorite-card+.favorite-card{border-top:1px solid #edf1f7}
#odAiCol .favorite-panel .favorite-card-header{display:contents}
#odAiCol .favorite-panel .favorite-card a,#odAiCol .favorite-panel .favorite-card strong{order:1;flex:1;min-width:0;font-size:13px;font-weight:600;line-height:1.4;color:#0A2A5E;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#odAiCol .favorite-panel .favorite-card>span{order:2;margin:0;flex:none;font-size:13px;font-weight:800;color:#0A2A5E;white-space:nowrap}
#odAiCol .favorite-panel .favorite-card .favorite-button{order:3;flex:none;margin:0}
html.fav-in-ai .finder-favorite-guide{display:flex!important}
}
/* 흔들림 제거(2026-10-08 사용자): 막대 스프링 튐 없이 부드럽게, 목록·내용은 위아래 움직임 없이 옅게 나타남만 */
@media (max-width:1024px){
.panel.od-cart.is-bar{transition:transform .25s ease,box-shadow .2s}
.panel.od-cart.is-bar.is-snap::before{animation:none}
.panel.od-cart.is-bar.is-open .od-cart-list>li{animation-name:odFadeOnly}
.panel.od-cart.is-bar:not(.is-mini) .od-cart-route,.panel.od-cart.is-bar:not(.is-mini) .od-cart-actions{animation-name:odFadeOnly}
}
@keyframes odFadeOnly{from{opacity:0}to{opacity:1}}
/* PC 세 열 윗선: 왼쪽 서류 찾기·오른쪽 AI 창이 -25px 끌어올려져 있어 가운데 열도 같게 */
@media (min-width:1025px){.finder-flood,.finder>.finder-rail,.finder>.ai-col{margin-top:0}}/* 세 열 모두 표어 아래 같은 선에서(가운데를 끌어올리면 표어를 덮었다) */
/* 휴대폰 「간략히」 = 오른쪽 아래 둥근 장바구니 아이콘(🧺+개수), AI 상담 버튼은 그 위(--od-cartbar-h 가 아이콘 높이를 따름). 누르면 막대로 복귀 — 2026-10-08 사용자 */
@media (max-width:1024px){
.panel.od-cart.is-bar.is-mini{left:auto;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:62px;height:62px;padding:0!important;border-radius:50%;
border:1.5px solid #e0a93a;display:grid;place-items:center;grid-template-columns:none;grid-template-areas:none;box-shadow:0 8px 20px rgba(10,42,94,.28)}
.panel.od-cart.is-bar.is-mini::before,.panel.od-cart.is-bar.is-mini::after{display:none}
.panel.od-cart.is-bar.is-mini h4{display:block;margin:0;font-size:0;line-height:0;position:static}
.panel.od-cart.is-bar.is-mini h4>span:first-child{display:block;font-size:26px;line-height:1;width:26px;overflow:hidden;white-space:nowrap}
.panel.od-cart.is-bar.is-mini h4 .n{position:absolute;top:-4px;right:-4px;min-width:22px;padding:2px 5px;font-size:11px;line-height:1.3;background:#e02f3e;color:#fff;border-radius:999px;text-align:center}
.panel.od-cart.is-bar.is-mini .od-ctotal,.panel.od-cart.is-bar.is-mini .od-cart-mini,.panel.od-cart.is-bar.is-mini h4 .od-cart-clear{display:none!important}
.panel.od-cart.is-bar.is-mini .od-cart-toggle{inset:0;width:auto;height:auto;border-radius:50%}
}
/* 간략 아이콘 다듬기: 🧺 정가운데, 개수 배지는 숫자 위주로 작게, 아이콘을 AI 버튼과 같은 세로줄(가운데)로 */
@media (max-width:1024px){
.panel.od-cart.is-bar.is-mini h4{display:grid;place-items:center;width:100%;height:100%}
.panel.od-cart.is-bar.is-mini h4>span:first-child{width:1.1em;font-size:28px;text-align:center;overflow:hidden;white-space:nowrap;text-indent:0}
.panel.od-cart.is-bar.is-mini h4 .n{top:-6px;right:-6px;font-size:10.5px}
.panel.od-cart.is-bar.is-mini{right:calc(16px + (var(--akai-fab-w, 62px) - 62px) / 2)}
}
@media (max-width:1024px){.panel.od-cart.is-bar.is-mini h4>span:first-child,.panel.od-cart.is-bar.is-mini h4 .n{grid-area:auto}.panel.od-cart.is-bar.is-mini{width:56px;height:56px;right:calc(16px + (var(--akai-fab-w, 56px) - 56px) / 2)}}/* 바구니 정가운데(이전 grid-area:tt 가 남아 칸이 밀렸다), AI 버튼과 같은 크기 */
@media (max-width:1024px){.panel.od-cart.is-bar.is-mini{width:var(--akai-fab-w,52px);height:var(--akai-fab-w,52px);right:var(--akai-fab-r,12px)}.panel.od-cart.is-bar.is-mini h4>span:first-child{font-size:calc(var(--akai-fab-w,52px) * .48)}}/* 간략 아이콘 = AI 버튼과 같은 크기·같은 오른쪽 여백 */
/* 담은 서비스 목록 — 스크롤바가 생기고 없어질 때 ✕ 자리가 옆으로 움직여 잘못 누르게 됐다(2026-10-08 사용자) → 스크롤바 자리를 처음부터 비워 둔다.
scrollbar-gutter 를 모르는 브라우저(구형 사파리)는 늘 스크롤 칸을 두는 방식으로. 휴대폰 오버레이 스크롤바는 자리를 차지하지 않아 영향 없음. */
.od-cart .od-cart-list{overflow-y:scroll;scrollbar-gutter:stable}
@supports (scrollbar-gutter:stable){.od-cart .od-cart-list{overflow-y:auto}}
.od-cart .od-cart-list{scrollbar-width:thin}
/* 간략 아이콘: 🧺 글자 대신 정가운데 남색 장바구니 그림(기기마다 그림 글자 크기·기준선이 달라 쏠렸다), 배지는 숫자만 */
@media (max-width:1024px){
.panel.od-cart.is-bar.is-mini h4>span:first-child{width:56%;height:56%;font-size:0;background:#0A2A5E;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 11.2a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.5L21 8H6'/%3E%3Ccircle cx='10' cy='20' r='1.4'/%3E%3Ccircle cx='17' cy='20' r='1.4'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 11.2a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.5L21 8H6'/%3E%3Ccircle cx='10' cy='20' r='1.4'/%3E%3Ccircle cx='17' cy='20' r='1.4'/%3E%3C/svg%3E") center/contain no-repeat}
.panel.od-cart.is-bar.is-mini{background:#fff8e1}
.panel.od-cart.is-bar.is-mini h4 .n{font-size:0;min-width:20px;height:20px;padding:0 5px;top:-5px;right:-5px;display:grid;place-items:center;box-sizing:border-box;line-height:1}
.panel.od-cart.is-bar.is-mini h4 .n::after{content:attr(data-n);font-size:11.5px;font-weight:900}
}
/* 선택 목록 그림 = 클립보드(2026-10-08 사용자 「여긴 장바구니가 아니라 견적 가기 전 — 장바구니는 헤더」): 간략 아이콘은 체크 클립보드, 모달 「담기」는 + 클립보드 */
@media (max-width:1024px){
.panel.od-cart.is-bar.is-mini h4>span:first-child{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='17' rx='2'/%3E%3Cpath d='M9 4V3h6v1'/%3E%3Cpath d='M8.5 12.5l2.2 2.2 4.8-4.8'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='17' rx='2'/%3E%3Cpath d='M9 4V3h6v1'/%3E%3Cpath d='M8.5 12.5l2.2 2.2 4.8-4.8'/%3E%3C/svg%3E")}
}
.od-pcard.is-sheet .od-cartadd:not(.picked)::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='17' rx='2'/%3E%3Cpath d='M9 4V3h6v1'/%3E%3Cpath d='M12 9v7M8.5 12.5h7'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='17' rx='2'/%3E%3Cpath d='M9 4V3h6v1'/%3E%3Cpath d='M12 9v7M8.5 12.5h7'/%3E%3C/svg%3E")}
@media (max-width:1024px){.panel.od-cart.is-bar.is-mini h4>span:first-child{width:calc(var(--akai-fab-w,52px) * .5);height:calc(var(--akai-fab-w,52px) * .5)}}/* 그림 칸 고정 크기(% 는 빈 칸에서 0 이 됐다) */
/* 긴 언어(스페인어 등)에서 막대가 화면 밖으로 넘치던 것(2026-10-08): 제목·나라·버튼 글자는 칸에 맞춰 … 처리, 막대 안에서만 */
@media (max-width:1024px){
.panel.od-cart.is-bar{box-sizing:border-box;max-width:100vw;grid-template-columns:minmax(0,1fr) auto auto auto auto;
grid-template-areas:"tt cnt total clr mini" "route route route route route" "list list list list list" "status status status status status" "acts acts acts acts acts"}
.panel.od-cart.is-bar h4>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
.panel.od-cart.is-bar .od-cart-mini{max-width:7.5em;overflow:hidden;text-overflow:ellipsis}
.panel.od-cart.is-bar .od-cart-route{min-width:0;overflow:hidden}
.panel.od-cart.is-bar .od-cart-route .od-cart-route-part{min-width:0;flex:0 1 auto;overflow:hidden}
.panel.od-cart.is-bar .od-cart-route .k{flex:none}
.panel.od-cart.is-bar .od-cart-route .v{min-width:0}
.panel.od-cart.is-bar .od-cart-actions{min-width:0}
.panel.od-cart.is-bar .od-cart-actions>button{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:8px}
/* 간략 아이콘: 테두리를 크기 안에(AI 버튼과 같은 바깥 크기) */
.panel.od-cart.is-bar.is-mini{box-sizing:border-box}
}
@media (max-width:1024px){.panel.od-cart.is-bar .od-cart-actions>button{display:block;text-align:center;line-height:44px;min-height:46px}}/* 글자 가운데 + 끝만 … (flex 가운데 정렬은 양쪽이 잘렸다) */
@media (max-width:1024px){.panel.od-cart.is-bar.is-mini{left:var(--akai-fab-l,auto);right:auto;border-radius:var(--akai-fab-rad,15px)}}/* 간략 아이콘 = AI 버튼과 같은 왼쪽 위치·폭·모서리(한 세트로 위아래 정렬) */
@media (max-width:1024px){.panel.od-cart.is-bar.is-mini h4>span:first-child{position:absolute;inset:0;margin:auto}}/* 그림을 칸 정가운데에 고정 */
/* 간략 아이콘 숫자 배지가 상자 가장자리에서 잘리던 것(overflow) — 보이게, 흰 테두리 원으로 ★ 배지와 같은 모양 */
@media (max-width:1024px){
.panel.od-cart.is-bar.is-mini{overflow:visible}
.panel.od-cart.is-bar.is-mini h4 .n{top:-8px;right:-8px;min-width:22px;height:22px;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.2)}
}
/* 담기·담김 버튼 같은 폭 — 상태마다 폭이 달라 가격 줄이 어긋났다(2026-10-08). 긴 언어는 글자 줄임 */
.od-pcard.is-sheet .od-cartadd{width:96px;min-width:96px;max-width:96px;padding:0 8px;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#odDocAdd[hidden]{display:none!important}
@media (max-width:1024px){#odCartTitle.od-cart-mini-host .n,.panel.od-cart.is-bar.is-mini #odCartTitle .n{display:block;padding:0 4px;text-align:center;line-height:18px;box-sizing:border-box}.panel.od-cart.is-bar.is-mini #odCartTitle .n::after{display:block;line-height:18px;font-size:11.5px}}/* 배지 숫자 정가운데 — #odCartTitle .n 규칙이 grid 가운데 정렬을 덮었다 */
/* 간략 아이콘 숫자 배지 = 전용 요소 .od-cart-badge (★ 배지와 같은 모양) */
.od-cart-badge{display:none}
@media (max-width:1024px){
.panel.od-cart.is-bar.is-mini #odCartTitle .n{display:none!important}
.panel.od-cart.is-bar.is-mini .od-cart-badge{display:block;position:absolute;top:-8px;right:-8px;z-index:3;min-width:22px;height:22px;padding:0 5px;box-sizing:border-box;
border:2px solid #fff;border-radius:999px;background:#e02f3e;color:#fff;font-size:11.5px;font-weight:900;line-height:18px;text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.2)}
}
/* 「직접 추가」 = 검색 결과 자리의 폭 가득 버튼(모든 폭), 글자 가운데 */
#odDocAdd.od-docadd-result{display:flex;width:100%;box-sizing:border-box;justify-content:center;align-items:center;gap:6px;margin:6px 0 0;min-height:44px;
border:1.5px dashed #9fb7dc;border-radius:12px;background:#f3f7fd;color:#1E5BBA;font:inherit;font-size:14px;font-weight:800;cursor:pointer;order:initial}
#odDocAdd.od-docadd-result:hover{background:#e8f0fc}
#odDocAdd.od-docadd-result[hidden]{display:none!important}
#odDocAdd.od-docadd-result{order:3}/* 순서 배치 화면(≤430)에서도 결과 안내 바로 아래 */
/* 서류 보유 형태 라벨(document-finder.js holdTag, favorites.js) — 미보유=파랑, 사본=보라, 원본=주황 */
.od-hold-tag{display:inline-flex;align-items:center;width:max-content;max-width:100%;margin-top:6px;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:800;line-height:1.5;white-space:nowrap;border:1px solid transparent}
.od-hold-tag.od-hold-not_held{background:#eaf2ff;color:#1E5BBA;border-color:#c9dcf7}
.od-hold-tag.od-hold-copy{background:#f2ecff;color:#6a3fc1;border-color:#dccff7}
.od-hold-tag.od-hold-original{background:#fff3e2;color:#b25c00;border-color:#f6d7a8}
#odGallery .od-gcard [data-finder-product-link] .od-hold-tag{display:inline-flex}
#odGallery .od-gcard.od-grouped [data-finder-product-link] .od-hold-tag{margin-top:3px;font-size:11px}
.favorite-card .od-hold-tag{order:2}
/* 국가 선택 칸의 국기(country-picker.mjs) — 고르면 돋보기 자리에 국기 */
.ak-cp-trigger .ak-cp-tflag{flex:none;width:24px;height:16px;object-fit:cover;border-radius:3px;box-shadow:0 0 0 1px rgba(10,42,94,.12)}
.ak-cp-trigger .ak-cp-tflag[hidden]{display:none}
.ak-cp-trigger:not(.is-placeholder):has(.ak-cp-tflag:not([hidden]))::before{display:none}
.odx .ak-cp-trigger:has(.ak-cp-tflag:not([hidden])),.ak-cp-trigger:has(.ak-cp-tflag:not([hidden])){padding-inline-start:14px}/* 국기가 돋보기 자리를 대신 */
/* 처음 그릴 때 떠 있는 버튼들 고정(전환 없음) — finder-cart.mjs fab-settling */
html.fab-settling .fav-fab,html.fab-settling .panel.od-cart.is-bar{transition:none!important;animation:none!important}
/* 고른 나라 칸(2026-10-08 「너무 밋밋하다」): 고르면 옅은 파랑 바탕·파란 테두리·굵은 남색 이름·오른쪽 「바꾸기」 표시 */
.ak-cp-trigger:not(.is-placeholder){background:linear-gradient(180deg,#f5f9ff,#eaf2ff);border-color:#8fb1e6;box-shadow:0 2px 8px rgba(30,91,186,.12)}
.ak-cp-trigger:not(.is-placeholder) .ak-cp-value{font-weight:800;color:#0A2A5E}
.ak-cp-trigger .ak-cp-tflag{width:28px;height:19px}
.odx .ak-cp-trigger:not(.is-placeholder)::after,.ak-cp-trigger:not(.is-placeholder)::after{content:"✓";flex:none;display:grid;place-items:center;width:22px;height:22px;margin-inline-start:auto;border:0;border-radius:50%;background:#16a34a;color:#fff;font-size:12px;font-weight:900;transform:none;position:static}
/* 보유 형태 라벨 = 금액 앞(2026-10-08) — 가격 줄에 [원본] US$350.00 */
#odGallery .od-gcard .pr .od-hold-tag{margin:0 8px 0 0;vertical-align:2px}
/* 서류 보유 형태(2026-10-08): 서류 고르기 전엔 숨김, 제목+세 버튼 한 줄, 버튼 안 「미보유 · 상품 n개」 한 줄 흐름, 제목 진하게 */
#odFinder #odHold[hidden]{display:none!important}
#odFinder .od-hold-coach{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;margin-top:12px}
#odFinder .od-hold-coach>.od-f{flex:none;margin:0;font-size:12.5px;font-weight:900;color:#0A2A5E;white-space:nowrap}
#odFinder .od-hold-coach .od-seg{flex:1;min-width:0;display:flex;gap:4px}
#odFinder button[data-hold]{flex:1 1 0;min-width:0;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:0 4px;min-height:38px;padding:4px 6px;line-height:1.25}
#odFinder button[data-hold] .od-hold-n{display:inline;margin:0;font-size:11px;opacity:.8}
#odFinder button[data-hold] .od-hold-n::before{content:"· "}
/* 발급국·제출국 칸 국기 */
.od-cart-route .vw{display:inline-flex;align-items:center;gap:5px;min-width:0;max-width:100%}
.od-cart-route .vw .fl{flex:none;width:20px;height:14px;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px rgba(10,42,94,.15)}
.od-cart-route .vw .fl[hidden]{display:none}
@media (max-width:1024px){
#odFinder .od-hold-coach{flex-wrap:wrap;gap:6px}
#odFinder .od-hold-coach>.od-f{flex:0 0 100%}
#odFinder button[data-hold]{font-size:14px}
#odFinder button[data-hold] .od-hold-n{font-size:11px}
}
@media (max-width:1024px){
#odFinder button[data-hold]{flex-direction:column;flex-wrap:nowrap;align-items:center;gap:1px;min-height:48px}
#odFinder button[data-hold] .od-hold-n::before{content:none}
}
/* 서류 검색 상태 문구(#odDocSearchStatus, document-finder.js data-state): 아이콘 + 색 — 검색 중 스피너, 결과 있음 초록 ✓, 없음 주황 !, 오류 빨강. 빈 문구는 자리 없음 */
#odDocSearchStatus{display:flex;align-items:center;gap:7px;margin:8px 2px 0;font-size:13px;font-weight:700;line-height:1.4;color:#41546f}
#odDocSearchStatus:empty{display:none}
#odDocSearchStatus::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;box-sizing:border-box}
#odDocSearchStatus[data-state="loading"]{color:#41546f}
#odDocSearchStatus[data-state="loading"]::before{border:2px solid #c8d6ec;border-top-color:#1E5BBA;animation:odSpin .7s linear infinite}
#odDocSearchStatus[data-state="ready"]{color:#166534}
#odDocSearchStatus[data-state="ready"]::before{content:"✓";display:grid;place-items:center;background:#16a34a;color:#fff;font-size:10px;font-weight:900}
#odDocSearchStatus[data-state="empty"]{color:#9a5b00}
#odDocSearchStatus[data-state="empty"]::before{content:"!";display:grid;place-items:center;background:#f59e0b;color:#fff;font-size:11px;font-weight:900}
#odDocSearchStatus:is([data-state="error"],[data-state="rate-limit"],[data-state="unavailable"],[data-state="corrective"],[data-state="over-limit"]){color:#b42318}
#odDocSearchStatus:is([data-state="error"],[data-state="rate-limit"],[data-state="unavailable"],[data-state="corrective"],[data-state="over-limit"])::before{content:"!";display:grid;place-items:center;background:#e02f3e;color:#fff;font-size:11px;font-weight:900}
@keyframes odSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){#odDocSearchStatus[data-state="loading"]::before{animation:none}}
/* 상태 문구 + 「직접 추가」 한 줄(오른쪽 작은 버튼), PC 보유 형태 = 제목 아래 줄에 버튼(2026-10-08) */
.od-ds-statusrow{display:flex;align-items:center;gap:8px;margin:8px 2px 0;order:2}
.od-ds-statusrow #odDocSearchStatus{flex:1;min-width:0;margin:0}
#odDocAdd.od-docadd-result{flex:none;width:auto;min-height:32px;margin:0;padding:0 12px;border:1.5px solid #9fb7dc;border-style:solid;border-radius:999px;font-size:13px}
@media(max-width:430px){.od-ds-statusrow{order:2}}
/* 2026-10-19 T05 A7·A8: 「검색 결과가 없습니/다」 음절 끊김 → 상태 문구는 한 줄 그대로, 자리가 모자라면 버튼이 다음 줄로.
휴대폰(≤1024) 「＋ 직접 맞춤 견적 요청」은 누름 높이 44px·15px */
.od-ds-statusrow{flex-wrap:wrap;row-gap:8px}
/* 줄바꿈은 허용(긴 영어 안내·서버 안내가 알약 밖으로 넘치지 않게), 한국어는 낱말 단위로만 — 자리가 모자라면 줄이 접히기 전에 버튼이 다음 줄로 간다(flex-wrap, 기본 크기 = 글 전체 폭) */
.od-ds-statusrow #odDocSearchStatus{word-break:keep-all;overflow-wrap:break-word}
@media(max-width:1024px){#odDocAdd.od-docadd-result{min-height:44px;padding:0 16px;font-size:15px}}
/* 2026-10-19 T14: 결과 없음 + 「＋ 맞춤 견적 요청으로 추가」를 한 덩어리 단추로. 상태 알약은 낭독용으로만 남기고 화면에서 감춘다.
PC 는 한 줄(검색어가 길면 앞쪽 안내가 말줄임, 「＋ …추가」는 항상 보임), 휴대폰은 줄바꿈 허용·44px. 병기판은 영어 줄 + 아래 작은 한국어 줄 */
.od-ds-statusrow.od-ds-empty #odDocSearchStatus{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;border:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}
#odDocAdd.od-docadd-result.od-docadd-merged{display:flex;flex:1 1 100%;align-items:center;justify-content:flex-start;gap:8px;width:100%;min-height:38px;margin:0;padding:6px 12px;border:1px solid #f3d38a;border-radius:12px;background:#fff8e6;color:#7a4f00;font-size:13.5px;font-weight:600;line-height:1.35;text-align:start;white-space:normal;cursor:pointer;box-sizing:border-box}
#odDocAdd.od-docadd-merged[hidden]{display:none!important}
#odDocAdd.od-docadd-merged:hover{background:#fff1cc;border-color:#e9b949}
#odDocAdd.od-docadd-merged:focus-visible{outline:3px solid #8db4ef;outline-offset:2px}
#odDocAdd.od-docadd-merged .od-docadd-icon{flex:none;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#f59e0b;color:#fff;font-size:11px;font-weight:900;line-height:1}
#odDocAdd.od-docadd-merged .od-docadd-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
#odDocAdd.od-docadd-merged .od-docadd-line{display:flex;align-items:baseline;gap:6px;min-width:0;white-space:nowrap}
#odDocAdd.od-docadd-merged .od-docadd-msg{min-width:0;overflow:hidden;text-overflow:ellipsis}
#odDocAdd.od-docadd-merged .od-docadd-q{font-weight:800}
#odDocAdd.od-docadd-merged .od-docadd-act{flex:none;color:#1E5BBA;font-weight:800}
#odDocAdd.od-docadd-merged .od-docadd-line.i18n-sub{font-size:12px;font-weight:600;color:#8a6a2a}
#odDocAdd.od-docadd-merged .od-docadd-line.i18n-sub .od-docadd-act{color:#4a6fae;font-weight:700}
/* 2026-10-19 T18: 결과가 있어도 상시 — 결과 있음(is-ready)은 경고색이 아니라 옅은 파랑, 이미 추가됨(is-done)은 초록·누를 수 없음 */
#odDocAdd.od-docadd-merged.is-ready{border-color:#c9daf3;background:#f3f7ff;color:#41546f}
#odDocAdd.od-docadd-merged.is-ready:hover{background:#e8f0fc;border-color:#8fb1e6}
#odDocAdd.od-docadd-merged.is-ready .od-docadd-icon{background:#1E5BBA}
#odDocAdd.od-docadd-merged.is-ready .od-docadd-msg{flex:none;font-weight:700}
#odDocAdd.od-docadd-merged.is-ready .od-docadd-act{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
#odDocAdd.od-docadd-merged.is-ready .od-docadd-line.i18n-sub{color:#58749a}
#odDocAdd.od-docadd-merged.is-done{border-color:#a7e3b9;background:#effaf2;color:#166534;cursor:default}
#odDocAdd.od-docadd-merged.is-done:hover{background:#effaf2;border-color:#a7e3b9}
#odDocAdd.od-docadd-merged.is-done .od-docadd-icon{background:#16a34a}
#odDocAdd.od-docadd-merged.is-done .od-docadd-act{color:#166534;overflow:hidden;text-overflow:ellipsis}
@media(max-width:1024px){
#odDocAdd.od-docadd-result.od-docadd-merged{min-height:44px;padding:8px 14px;font-size:15px}
#odDocAdd.od-docadd-merged .od-docadd-line{flex-wrap:wrap;row-gap:2px;white-space:normal}
#odDocAdd.od-docadd-merged .od-docadd-msg{overflow:visible;word-break:keep-all;overflow-wrap:anywhere}
#odDocAdd.od-docadd-merged .od-docadd-line.i18n-sub{font-size:12.5px}
}
@media(min-width:1025px){
#odFinder .od-hold-coach{flex-wrap:wrap;gap:6px}
#odFinder .od-hold-coach>.od-f{flex:0 0 100%}
#odFinder .od-hold-coach .od-seg{flex:1 1 100%}
#odFinder button[data-hold]{white-space:nowrap}
}
#odFinder button[data-hold]{flex-direction:column;flex-wrap:nowrap;align-items:center;gap:1px;min-height:46px}#odFinder button[data-hold] .od-hold-n::before{content:none}/* 모든 폭: 이름 위·상품 수 아래 같은 높이 */
/* 「맞는 상품 없음」 안내는 「관련 서비스 고르기」 머리 아래 결과 자리(2026-10-08 — 휴대폰에서 머리 위에 떠 있었다, 예전 「문서를 선택하면」 안내용 order:-1 이 남아서) */
@media(max-width:1024px){body:not(.nation-finder-page) #odEmpty{order:3}body:not(.nation-finder-page) #odGallery{order:4}body:not(.nation-finder-page) #odPagination{order:5}}/* 머리(flood-h, order 3) 바로 다음, 같은 order 면 DOM 순서(머리가 먼저) */
/* 머리의 상태 줄은 「없음」일 때 화면에서 감춘다 — 같은 문구가 결과 자리에 크게 있다(읽기용 aria-live 는 유지) */
#odFinderStatus.is-empty-mirrored{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* 서류 검색 결과 = 「고를 수 있는 결과」 모양(2026-10-08 사용자 「검색된 문서 느낌이 안 든다」): 결과 상자 안 줄마다 문서 그림 + 이름 + 오른쪽 「＋ 추가」, 줄 구분선, 누름·키보드 선택 강조 */
#odDocResults:not([hidden]){margin-top:8px;padding:4px;border:1.5px solid #c9d8ef;border-radius:14px;background:#fff;box-shadow:0 10px 24px rgba(10,30,70,.12)}
#odDocResults .od-ds-item{position:relative;display:flex;align-items:center;gap:10px;min-height:48px;padding:8px 10px;border-radius:10px;cursor:pointer;color:#0A2A5E;font-weight:700}
#odDocResults .od-ds-item+.od-ds-item{margin-top:2px}
#odDocResults .od-ds-item+.od-ds-item::after{content:"";position:absolute;left:44px;right:10px;top:-1px;height:1px;background:#eef2f8}
#odDocResults .od-ds-item::before{content:"";flex:none;width:28px;height:28px;border-radius:8px;background:#eaf2ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9 13h6M9 17h4'/%3E%3C/svg%3E") center/16px no-repeat;
filter:none}
#odDocResults .od-ds-item>span{flex:1;min-width:0;line-height:1.35}
#odDocResults .od-ds-item>small{display:block;font-weight:500;color:#6b7a92}
#odDocResults .od-ds-item[aria-selected="true"],#odDocResults .od-ds-item:hover{background:#f1f6ff}
#odDocResults .od-ds-item:active{background:#e3edfd}
#odDocResults .od-ds-item .od-ds-add{flex:none;display:inline-flex;align-items:center;gap:3px;padding:3px 9px;border-radius:999px;background:#1E5BBA;color:#fff;font-size:12px;font-weight:800}
/* 휴대폰 결과 묶음 하나만 + 「전체 보기 (N)」 모달(document-finder.js syncAllView) — 2026-10-08. PC 는 버튼 없음·종전 그대로 */
.od-all-btn,.od-all-sheet,.od-all-mask{display:none}
@media(max-width:1024px){
html.od-one-group:not(.od-groups-all):not(.od-gsheet-mode) #odGallery:not(.od-in-all)>.od-group~.od-group{display:none}/* 서류를 고르면 묶음 전부(2026-10-13 「전체」와 같게) */
.od-all-btn:not([hidden]){display:inline-flex;align-items:center;flex:none;margin-inline-start:auto;min-height:38px;padding:0 14px;border:1.5px solid #9fb7dc;border-radius:999px;background:#fff;color:#1E5BBA;font:inherit;font-size:13.5px;font-weight:800;cursor:pointer;white-space:nowrap}
.od-all-mask:not([hidden]){display:block;position:fixed;inset:0;z-index:10034;background:rgba(6,20,45,.48);opacity:0;transition:opacity .2s}
.od-all-mask.is-open{opacity:1}
.od-all-sheet:not([hidden]){display:flex;flex-direction:column;position:fixed;left:0;right:0;bottom:0;z-index:10036;max-width:1024px;margin:0 auto;height:88vh;height:88dvh;
background:#eef3fb;border-radius:18px 18px 0 0;box-shadow:0 -10px 30px rgba(6,20,45,.22);transform:translateY(100%);transition:transform .26s ease;padding-bottom:env(safe-area-inset-bottom,0px)}
.od-all-sheet.is-open{transform:none}
.od-all-head{flex:none;display:flex;align-items:center;gap:8px;padding:14px 12px 10px 18px;background:#fff;border-radius:18px 18px 0 0;border-bottom:1px solid #e3e9f2}
.od-all-title{flex:1;margin:0;font-size:16px;font-weight:800;color:#0A2A5E}
.od-all-x{min-width:40px;min-height:40px;border:0;border-radius:10px;background:#f1f5fb;color:#41546f;font-size:16px;cursor:pointer}
.od-all-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:12px}
.od-all-body #odGallery{display:flex!important;flex-direction:column;gap:12px}
}
@media (prefers-reduced-motion:reduce){.od-all-sheet,.od-all-mask{transition:none}}
@media(max-width:1024px){.finder-heading-row:has(.od-all-btn:not([hidden])){flex-wrap:wrap;row-gap:8px}.finder-heading-row .od-all-btn:not([hidden]){order:9;flex:1 1 100%;justify-content:center;margin:0}.finder-heading-row .fh-title{flex:1 1 auto;min-width:0;white-space:nowrap}}/* 전체 보기 = 머리줄 아래 둘째 줄 폭 100% */
@media(max-width:1024px){body:not(.nation-finder-page) .flood-h .finder-heading-row:has(.od-all-btn:not([hidden])){flex-wrap:wrap;row-gap:10px}body:not(.nation-finder-page) .flood-h .finder-heading-row .od-all-btn:not([hidden]){order:9;flex:1 1 100%;justify-content:center;margin:0}body:not(.nation-finder-page) .flood-h .finder-heading-row:has(.od-all-btn:not([hidden])) .fh-title{flex:1 1 0;min-width:0}}
/* 고른 서류 칩(.od-chip, 2026-10-08 사용자 「디자인이 마음에 안 든다」): 흰 바탕·파란 테두리·왼쪽 문서 그림·남색 글자, × 는 작은 회색 원 */
#odDocs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
#odDocs .od-chip{display:inline-flex;align-items:center;gap:8px;max-width:100%;min-height:40px;padding:4px 6px 4px 8px;box-sizing:border-box;
border:1.5px solid #9fb7dc;border-radius:12px;background:#fff;color:#0A2A5E;font-size:14px;font-weight:800;line-height:1.3;box-shadow:0 2px 6px rgba(10,42,94,.08)}
#odDocs .od-chip::before{content:"";flex:none;width:24px;height:24px;border-radius:7px;background:#eaf2ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9 13h6M9 17h4'/%3E%3C/svg%3E") center/14px no-repeat}
/* 직접 추가한 서류 칩 = 일반 서류 칩과 같은 모양(2026-10-19 T14: 네온은 칩에서 빼고 결과의 맞춤 견적 카드로, ✎ 단추도 없앰 — 칩은 추가·× 삭제만) */
#odDocs .od-chip.cust{border-style:solid;color:#0A2A5E}
/* 맞춤(등록 안 된) 서류 칩 = 등록 서류 칩과 구분(2026-10-19 T16): 옅은 금빛 바탕·진한 글씨·「✨ 맞춤」 배지. ×만(✎ 없음), 휴대폰 44px */
#odDocs .od-chip.cust{background:linear-gradient(135deg,#fff7e0,#ffffff)!important;border-color:#f0c96a!important;font-weight:800;color:#0A2A5E!important;box-shadow:0 2px 8px rgba(245,158,11,.18)}
#odDocs .od-chip.cust .od-chip-badge{flex:none;display:inline-flex;flex-direction:column;align-items:center;padding:2px 8px;border-radius:999px;background:#f59e0b;color:#fff;font-size:11.5px;font-weight:800;line-height:1.25;white-space:nowrap}
#odDocs .od-chip.cust .od-chip-badge .i18n-sub{font-size:9.5px;font-weight:700;color:#fff6dc}
@media(max-width:1024px){#odDocs .od-chip.cust{min-height:44px}}
@keyframes odNeon{0%,100%{box-shadow:0 0 0 1px rgba(63,182,255,.35),0 0 6px rgba(63,182,255,.45),0 0 14px rgba(63,182,255,.22)}50%{box-shadow:0 0 0 1px rgba(63,182,255,.55),0 0 12px rgba(63,182,255,.75),0 0 26px rgba(63,182,255,.38)}}
#odDocs .od-chip .od-chip-x{flex:none;display:grid;place-items:center;width:26px;height:26px;margin:0;padding:0;border:0;border-radius:50%;background:#eef2f8;color:#5b6b84;font-size:16px;font-weight:700;line-height:1;cursor:pointer}
#odDocs .od-chip .od-chip-x:hover{background:#fde8e8;color:#b42318}
#odDocs .od-chip .od-chip-x:focus-visible{outline:3px solid #4d8be8;outline-offset:1px}
@media(max-width:1024px){#odDocs .od-chip .od-chip-x{width:28px;height:28px;min-width:28px;min-height:28px;position:relative}#odDocs .od-chip .od-chip-x::after{content:"";position:absolute;inset:-8px}}/* × 작게(누르는 자리는 ::after 로 넓게) */
/* 칩 × = 글자 대신 그림(글꼴마다 × 위치·크기가 달라 깨져 보였다, 2026-10-08). 화면낭독은 aria-label 「… 삭제」 그대로 */
#odDocs .od-chip .od-chip-x{font-size:0!important;color:transparent!important;overflow:visible;background:#eef2f8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b84' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center/14px no-repeat}
#odDocs .od-chip .od-chip-x:hover{background:#fde8e8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b42318' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center/14px no-repeat}
/* 국가 목록 상태줄(「국가 목록을 불러오는 중…/불러왔습니다」)은 모든 폭에서 화면에서만 감춘다(2026-10-08 사용자 「처음 로딩 시 국가 불러오는 중 빼줘」) — 화면낭독은 그대로 */
#odCountryStatus{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
/* 묶음 줄: 이름(od-variant) 오른쪽에 보유 형태 라벨, 금액 칸은 금액만(줄마다 같은 자리) */
#odGallery .od-gcard.od-grouped .nm{flex-direction:row!important;flex-wrap:wrap;align-items:center!important;column-gap:8px;row-gap:2px}
#odGallery .od-gcard.od-grouped .nm .od-hold-tag{margin:0;font-size:11px;padding:1px 7px}
#odGallery .od-gcard.od-grouped .nm{justify-content:flex-start!important;text-align:left}html[dir="rtl"] #odGallery .od-gcard.od-grouped .nm{text-align:right}/* 이름·라벨 왼쪽 정렬 유지 */
#odGallery .od-gcard.od-grouped .nm{flex-wrap:nowrap}#odGallery .od-gcard.od-grouped .nm .od-variant{flex:0 1 auto;min-width:0}#odGallery .od-gcard.od-grouped .nm .od-hold-tag{flex:none}/* 긴 이름은 이름 안에서 줄바꿈, 라벨은 늘 오른쪽 */
#odFinder #odHold{padding-inline:0}/* 보유 형태 제목·버튼 왼쪽 끝을 검색칸·칩과 같은 선에(2026-10-08) */
/* 간략 아이콘 = 그림 + 아래 「담은 서비스」(★ 즐겨찾기 버튼과 같은 모양) */
.od-cart-cap{display:none}
@media (max-width:1024px){
.panel.od-cart.is-bar.is-mini h4{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.panel.od-cart.is-bar.is-mini h4>span:first-child{position:static!important;margin:0!important;width:22px!important;height:22px!important}
.panel.od-cart.is-bar.is-mini .od-cart-cap{display:block;font-size:9.5px;font-weight:800;line-height:1.1;color:#0A2A5E;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 3px}
}
@media (max-width:1024px){.panel.od-cart.is-bar.is-mini h4{width:100%;height:100%;overflow:hidden;padding:0 2px;box-sizing:border-box}.panel.od-cart.is-bar.is-mini .od-cart-cap{width:100%;text-align:center;font-size:9px;letter-spacing:-.4px;padding:0}.fav-fab-cap{letter-spacing:-.3px}}
@media (max-width:1024px){.panel.od-cart.is-bar.is-mini h4>span:first-child{width:18px!important;height:18px!important}.panel.od-cart.is-bar.is-mini .od-cart-cap{white-space:normal;word-break:keep-all;overflow:visible;text-overflow:clip;font-size:9px;line-height:1.05;letter-spacing:-.3px}}/* 「담은 / 서비스」 두 줄 */
/* 간략 아이콘 = 즐겨찾기 버튼과 같은 틀(2026-10-08 사용자 「따로 국밥」), 색은 견적 담기 느낌의 파랑 · 글자 한 줄 */
@media (max-width:1024px){
.panel.od-cart.is-bar.is-mini{background:#eef5ff;border:1.5px solid #a9c6ef;box-shadow:0 8px 22px rgba(4,30,76,.32)}
.panel.od-cart.is-bar.is-mini h4{padding:0!important;gap:1px}
.panel.od-cart.is-bar.is-mini h4>span:first-child{width:22px!important;height:22px!important;background:#1E5BBA}
.panel.od-cart.is-bar.is-mini .od-cart-cap{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;font-size:9.5px!important;line-height:1.1!important;letter-spacing:-.6px!important;color:#1E5BBA;padding:0 2px!important;box-sizing:border-box}
}
@media (max-width:1024px){.panel.od-cart.is-bar.is-mini h4{margin:0!important;width:100%!important}.panel.od-cart.is-bar.is-mini .od-cart-cap{width:auto!important;max-width:calc(100% + 2px)!important;padding:0!important;letter-spacing:-.8px!important;overflow:visible!important;text-overflow:clip!important}}/* 「담은 서비스」 한 줄에 다 보이게 */
@media (max-width:1024px){.panel.od-cart.is-bar.is-mini .od-cart-cap{font-size:9px!important;letter-spacing:-.7px!important}}
/* 「선택한 서비스」 두 줄(2026-10-08 사용자 문구 변경·「안 이쁨」): 그림 20px + 9.5px 두 줄, 한 줄로 욱여넣던 자간 줄임 해제 */
@media (max-width:1024px){
.panel.od-cart.is-bar.is-mini h4{gap:2px!important}
.panel.od-cart.is-bar.is-mini h4>span:first-child{width:20px!important;height:20px!important}
.panel.od-cart.is-bar.is-mini .od-cart-cap{white-space:normal!important;word-break:keep-all!important;overflow:hidden!important;text-overflow:clip!important;
width:100%!important;max-width:100%!important;padding:0 3px!important;font-size:9.5px!important;line-height:1.08!important;letter-spacing:-.3px!important;text-align:center;
display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical}
}
/* 간략 아이콘 내용 정가운데(2026-10-08 사용자 「아직도 가운데 정렬 안 맞음」): h4 가 grid 가운데 정렬로 내용 폭만큼 줄어 오른쪽·아래로 4px 밀렸다 → 칸 전체(inset:0)에 고정 */
@media (max-width:1024px){
.panel.od-cart.is-bar.is-mini h4{position:absolute!important;inset:0!important;width:auto!important;height:auto!important;margin:0!important;padding:0 3px!important;box-sizing:border-box;
display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:2px!important;grid-area:auto!important;transform:none!important}
.panel.od-cart.is-bar.is-mini .od-cart-toggle{inset:0!important;width:auto!important;height:auto!important}
.panel.od-cart.is-bar.is-mini .od-cart-toggle::before{display:none!important}
}
@media (max-width:1024px){.panel.od-cart.is-bar.is-mini h4{overflow:visible!important}}/* 숫자 배지가 h4 넘침 숨김에 잘리지 않게 */
/* 휴대폰 막대 머리줄: 비우기(🗑)를 「접기」 옆에서 떼어 「선택한 서비스 n/10」 바로 오른쪽으로(2026-10-08 사용자 「옆에 있으면 잘못 누를 수 있다」).
제목은 글자만큼(길면 … 줄임), 합계는 남는 칸 오른쪽 끝, 접기는 맨 오른쪽 */
@media (max-width:1024px){
.panel.od-cart.is-bar{grid-template-columns:minmax(0,max-content) auto auto minmax(0,1fr) auto;
grid-template-areas:"tt cnt clr total mini" "route route route route route" "list list list list list" "status status status status status" "acts acts acts acts acts"}
.panel.od-cart.is-bar h4 .od-cart-clear{margin-left:2px;margin-right:8px}
.panel.od-cart.is-bar .od-ctotal{justify-self:end}
}
/* 비우기 확인 창(finder-cart.mjs confirmClear, 2026-10-08 사용자 「알럿이 떠야」) — 가운데 작은 창, 기본 포커스 취소, 「모두 비우기」는 빨강 */
.od-confirm-mask{position:fixed;inset:0;z-index:100200;display:flex;align-items:center;justify-content:center;padding:20px;box-sizing:border-box;background:rgba(10,25,48,.5);animation:odConfirmFade .16s ease-out}
.od-confirm{width:min(360px,100%);box-sizing:border-box;padding:24px 22px 18px;border-radius:16px;background:#fff;color:#102d5b;box-shadow:0 18px 60px rgba(10,25,48,.3);text-align:center;word-break:keep-all;overflow-wrap:anywhere;animation:odConfirmPop .18s ease-out}
.od-confirm h3{margin:0 0 8px;font-size:17px;line-height:1.4;font-weight:800;color:#0a2a5e}
.od-confirm p{margin:0 0 20px;font-size:14px;line-height:1.55;color:#4f6280}
.od-confirm-actions{display:flex;gap:8px}
.od-confirm-actions button{flex:1;min-height:46px;padding:0 12px;border-radius:10px;font:inherit;font-size:14.5px;font-weight:800;cursor:pointer}
.od-confirm-cancel{border:1px solid #cbd7e7;background:#fff;color:#102d5b}
.od-confirm-ok{border:1px solid #c62828;background:#d32f2f;color:#fff}
.od-confirm-actions button:focus-visible{outline:3px solid #1e5bba;outline-offset:2px}
@keyframes odConfirmFade{from{opacity:0}to{opacity:1}}
@keyframes odConfirmPop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.od-confirm-mask,.od-confirm{animation:none}}
/* 「전체 보기」 창 = 화면 100% 덮기(2026-10-08 사용자 「공간 확보를 위해 100% 덮어야」) + 이어 받는 중 표시 */
@media (max-width:1024px){
.od-all-sheet:not([hidden]){top:0;bottom:0;height:100vh;height:100dvh;max-width:none;border-radius:0;padding-bottom:env(safe-area-inset-bottom,0px)}
.od-all-head{border-radius:0;padding-top:calc(12px + env(safe-area-inset-top,0px))}
.od-all-more:not([hidden]){flex:none;margin:0;padding:10px 0 calc(10px + env(safe-area-inset-bottom,0px));text-align:center;color:#6b7c95;font-size:18px;letter-spacing:4px;background:#fff;border-top:1px solid #e3e9f2}
.od-all-more[hidden]{display:none}
}
/* 「선택한 서비스 보기」 버튼 안 개수 배지(2026-10-08 사용자 「담은 느낌」) — 빨간 동그라미, 아이콘 배지와 같은 색 */
.od-listbtn-n{display:inline-block;min-width:20px;height:20px;padding:0 6px;margin:0 2px;box-sizing:border-box;border-radius:999px;background:#e02f3e;color:#fff;font-size:11.5px;font-weight:900;line-height:20px;text-align:center;vertical-align:1px}
.od-listbtn-n[hidden]{display:none}
/* 버튼 폭이 좁아 배지가 「…」로 잘렸다 → 배지는 버튼 오른쪽 위 모서리(아이콘 배지와 같은 모양), 글자만 칸 안에서 줄임 */
@media (max-width:1024px){
.panel.od-cart.is-bar .od-cart-actions>button.od-cart-listbtn{position:relative;overflow:visible}
.od-cart-listbtn .od-listbtn-t{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.od-cart-listbtn .od-listbtn-n{position:absolute;top:-9px;right:-6px;z-index:2;margin:0;min-width:22px;height:22px;line-height:18px;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.2)}
}
/* 선택한 서비스 목록 한 줄 = 휴대폰용 카드(2026-10-08 사용자 「모바일 편의성에 맞춰」):
[상품명 최대 2줄 ][✕]
[속도 칩] [가격 ][ ] — ✕ 는 40px 동그라미(손가락 크기), 줄 사이 8px */
@media (max-width:1024px){
.panel.od-cart.is-bar .od-cart-list{display:flex!important;flex-direction:column;gap:8px;padding:2px 0 4px;margin:8px 0 0;list-style:none}
.panel.od-cart.is-bar .od-cart-list .od-citem{display:grid!important;grid-template-columns:minmax(0,1fr) auto 40px;grid-template-areas:"n n x" "s p x";
column-gap:10px;row-gap:6px;align-items:center;margin:0;padding:10px 6px 10px 12px;border:1px solid #e6dcc0!important;border-radius:12px;background:#fff;box-shadow:0 1px 2px rgba(10,42,94,.06)}
.panel.od-cart.is-bar .od-cart-list .od-citem-main{display:contents}
.panel.od-cart.is-bar .od-cart-list .od-citem-n{grid-area:n;min-width:0;margin:0;font-size:13.5px;font-weight:700;line-height:1.35;color:#102d5b;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all;overflow-wrap:anywhere}
.panel.od-cart.is-bar .od-cart-list .od-citem-s{grid-area:s;justify-self:start;display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;
font-size:11.5px;font-weight:800;line-height:1;background:#eef3fb;color:#41546f}
.panel.od-cart.is-bar .od-cart-list .od-citem-s.express{background:#fff1dc;color:#a35a00}
.panel.od-cart.is-bar .od-cart-list .od-citem-s.super_express{background:#fde8e8;color:#b42318}
.panel.od-cart.is-bar .od-cart-list .od-citem-p{grid-area:p;justify-self:end;margin:0;font-size:15px;font-weight:800;color:#0a2a5e;white-space:nowrap;font-variant-numeric:tabular-nums}
.panel.od-cart.is-bar .od-cart-list .od-citem-x{grid-area:x;align-self:center;justify-self:center;display:grid;place-items:center;width:40px;height:40px;min-width:40px;padding:0;margin:0;
border:1px solid #f0d4d4;border-radius:50%;background:#fff7f7;color:#c0392b;font-size:15px;font-weight:700;line-height:1;cursor:pointer}
.panel.od-cart.is-bar .od-cart-list .od-citem-x:active{background:#fdecec}
.panel.od-cart.is-bar .od-cart-list .od-citem-x:disabled{opacity:.45}
}
/* 선택한 서비스 목록: 처리 속도 「일반」은 숨김(2026-10-08 사용자 「라벨에 일반이 왜 있지?」 — 보유 형태 라벨로 오해). 급행·초급행만 칩으로 */
.od-cart .od-citem-s.normal{display:none!important}
/* 제출국 없이 「진행」을 눌렀을 때(2026-10-08 사용자 「멈춘 것 같다 — 알럿이나 색상 강조」): 제출국 칸·국가 선택 칸을 빨갛게 흔들고 안내를 경고색으로 */
.od-cart .od-cart-route-part.is-empty .v{color:#c2410c}
.od-attn{animation:odAttn .55s ease-in-out 2;box-shadow:0 0 0 3px rgba(220,38,38,.35)!important;border-color:#dc2626!important;border-radius:10px}
.od-cart .od-cart-route-part.od-attn{background:#fff1f1}
.od-cart .od-cart-route-part.od-attn .k,.od-cart .od-cart-route-part.od-attn .v{color:#b91c1c!important}
@keyframes odAttn{0%,100%{transform:none}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.od-cart .od-cart-status.is-warn{display:flex;align-items:center;gap:6px;color:#b91c1c!important;font-weight:800;background:#fff1f1;border:1px solid #f5c2c2;border-radius:10px;padding:8px 10px;margin:8px 0 0}
.od-cart .od-cart-status.is-warn::before{content:"!";flex:none;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#dc2626;color:#fff;font-size:12px;font-weight:900}
.od-cart .od-cart-status.is-warn:empty{display:none}
@media(prefers-reduced-motion:reduce){.od-attn{animation:none}}
/* 휴대폰 묶음 줄 오와 열(2026-10-08 사용자 「글자 영역은 고정이고 그 옆에 라벨 — 오와 열이 맞게」):
[이름(남는 폭, 길면 줄바꿈)][라벨 칸 고정 58px][금액 칸 고정 88px][★ 44px] — 줄마다 라벨·금액이 같은 세로 열 */
@media (max-width:1024px){
#odGallery .od-gcard.od-grouped{grid-template-columns:minmax(0,1fr) 88px 44px!important}
#odGallery .od-gcard.od-grouped .nm{display:grid!important;grid-template-columns:minmax(0,1fr) 58px;column-gap:6px;align-items:center!important;justify-items:start}
#odGallery .od-gcard.od-grouped .nm .od-variant{grid-column:1;min-width:0}
#odGallery .od-gcard.od-grouped .nm .od-hold-tag{grid-column:2;grid-row:1;justify-self:stretch;justify-content:center;text-align:center;box-sizing:border-box;margin:0}
#odGallery .od-gcard.od-grouped .nm .od-opt:not([hidden]){grid-column:1 / -1}
#odGallery .od-gcard.od-grouped .pr{justify-self:end;font-variant-numeric:tabular-nums}
}
/* PC 페이지네이션 + 머리줄 배치(2026-10-08 사용자 「즐겨찾기·좌우 이동을 상품목록 상단에, 페이지네이션 도입, 우측 끝에 즐겨찾기」):
[🔮 관련 서비스 고르기] …… [‹ 1 … 5 6 7 … 190 ›] [★ 즐겨찾기] — 휴대폰은 「6/190」 그대로 */
.od-pagenums{display:none}
@media (min-width:1025px){
.od-pagebar #odPagination:not([hidden]){gap:4px}
.od-pagebar .od-pagenums{display:inline-flex;align-items:center;gap:4px}
.od-pagebar .od-pagenums button{min-width:38px!important;min-height:38px!important;padding:0 8px!important;border:1px solid #d6e2f5;border-radius:10px;background:#fff;color:#0a2a5e;font:inherit;font-size:14px;font-weight:700;cursor:pointer;font-variant-numeric:tabular-nums}
.od-pagebar .od-pagenums button:hover{background:#eef4fd}
.od-pagebar .od-pagenums button.is-cur{background:#0a2a5e;border-color:#0a2a5e;color:#fff;cursor:default}
.od-pagebar .od-pagegap{min-width:18px;text-align:center;color:#6b7c95;font-weight:700}
.od-pagebar #odPagination>button{min-width:38px!important;min-height:38px!important}
.od-pagebar #odPageStatus{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;min-width:0}
.finder-heading-row .od-pagebar{order:3;margin-inline-start:auto!important}
.finder-heading-row .fav-fab.is-inline{order:9;margin-inline-start:14px}
}
@media (min-width:1025px){.finder-heading-row:has(.od-pagebar:not([hidden])){flex-wrap:nowrap}.od-pagebar .od-pagenums button{width:42px;padding:0!important}}/* 쪽 번호 칸 폭 고정(세 자리까지) */
@media (min-width:1025px){.od-pagebar .od-pagegap{display:inline-block;width:42px;min-width:42px}}/* … 칸도 번호 칸과 같은 폭 → 쪽을 옮겨도 막대 폭 그대로 */
@media (min-width:1025px){.finder-heading-row .fh-title{flex:none;white-space:nowrap}.od-pagebar .od-pagenums button,.od-pagebar .od-pagegap{width:36px!important;min-width:36px!important;min-height:36px!important;font-size:13.5px!important}.od-pagebar #odPagination>button{min-width:36px!important;min-height:36px!important}}/* 제목 한 줄 · 번호 칸 36px·글자 13.5px */
@media (min-width:1025px){.od-pagebar #odPagination .od-pagenums button.is-cur{background:#0a2a5e;border-color:#0a2a5e;color:#fff;cursor:default}.od-pagebar #odPagination .od-pagenums button:not(.is-cur):hover{background:#eef4fd}}/* 지금 쪽 남색(#odPagination button 흰 바탕 규칙이 덮었다) */
/* 상품 목록 위 띠(.od-listbar, 2026-10-08 사용자 「상품 목록 위에 섹션으로」): PC = [‹ 1 … 4 5 6 … 190 ›] …… [★ 즐겨찾기]. 휴대폰은 숨김(쪽 표시는 머리줄) */
.od-listbar{display:none}
@media (min-width:1025px){
.od-listbar{display:flex;align-items:center;gap:12px;margin:0 0 12px;padding:8px 10px;border-radius:14px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);min-height:56px;box-sizing:border-box}
.od-listbar .od-pagebar{order:1;margin:0!important}
.od-listbar .fav-fab.is-inline{order:9;margin-inline-start:auto!important}
.od-listbar:not(:has(.od-pagebar:not([hidden]))):not(:has(.fav-fab:not([hidden]))){display:none}
}
@media (min-width:1025px){.od-listbar .od-pagegap{color:#dce7fa!important;font-size:16px!important}}
/* 상품 창 발급국 → 제출국 줄(document-finder.js panelNode .od-proute, 2026-10-08) */
.od-proute{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:0 0 10px;padding:8px 12px;border:1px solid #e3e9f2;border-radius:10px;background:#f6f9fd;font-size:13px}
.od-proute .od-proute-part{display:inline-flex;align-items:baseline;gap:6px;min-width:0}
.od-proute .k{color:#6b7c95;font-size:12px;font-weight:700}
.od-proute .v{color:#0a2a5e;font-weight:800;overflow-wrap:anywhere}
.od-proute .ar{color:#b8860b;font-weight:900}
/* 상품 창 머리 간결하게(2026-10-08 사용자 「하단 패딩 때문에 떠 보임, 줄 간격 너무 넓다」) + 발급국·제출국 줄 = 진행 순서 띠와 같은 얇은 띠 */
.od-pcard.is-sheet .od-phead{padding:10px 12px 8px 16px!important;align-items:flex-start;gap:6px}
.od-pcard.is-sheet .od-phead .nm{font-size:15.5px!important;line-height:1.35!important;padding:0!important;margin:0!important}
.od-pcard.is-sheet .od-phead .nm .od-name-detail{font-size:12px!important;min-height:0!important;height:24px;padding:0 9px!important;vertical-align:1px;margin-inline-start:4px}
.od-pcard.is-sheet .od-phead .od-sheet-fav,.od-pcard.is-sheet .od-phead .pc-x{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important}
.od-pcard.is-sheet .od-proute{margin:0!important;padding:7px 16px!important;border:0!important;border-top:1px solid #edf1f7!important;border-radius:0!important;background:#f8fafd;font-size:12.5px;gap:4px 8px}
.od-pcard.is-sheet .od-proute+.od-steps{border-top:0}
.od-pcard.is-sheet .od-steps{padding-top:7px!important;padding-bottom:7px!important}
/* 전체 보기 검색칸(2026-10-08) — 제목 줄 아래 한 줄, 돋보기 + 16px 글자(아이폰 확대 방지) */
.od-all-search{display:none}
@media (max-width:1024px){
.od-all-search{display:block;flex:none;padding:8px 12px 10px;background:#fff;border-bottom:1px solid #e3e9f2}
.od-all-search input{display:block;width:100%;box-sizing:border-box;height:44px;padding:0 14px 0 40px;border:1.5px solid #cbd7e7;border-radius:12px;font:inherit;font-size:16px;color:#102d5b;
background:#f7f9fc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7c95' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 13px 50%/18px 18px no-repeat;-webkit-appearance:none;appearance:none}
.od-all-search input:focus{outline:none;border-color:#1e5bba;background-color:#fff;box-shadow:0 0 0 3px rgba(30,91,186,.15)}
.od-all-nohit:not([hidden]){margin:24px 0;text-align:center;color:#5b6b84;font-size:14.5px;font-weight:700}
}
/* 상품 묶음 카드 폭 100%(2026-10-08 사용자 「모바일에서 100%가 아니네」, 「관련 서비스 고르기 전체에서도」):
① 태블릿(641~1024) 묶음 하나만 보일 때 2칸 격자라 절반 폭이던 것 → 한 칸
② 휴대폰·태블릿: 묶음 카드를 화면 양끝까지(옆 여백·둥근 모서리·옆 테두리 없음) — 페이지와 전체 보기 창 모두 */
@media (max-width:1024px){
html.od-one-group #odGallery:not(.od-in-all).od-gallery:has(.od-group){grid-template-columns:minmax(0,1fr)!important}
html.od-one-group #odGallery:not(.od-in-all) .od-group{grid-column:1/-1!important}
body:not(.nation-finder-page) #odGallery:not(.od-in-all):has(.od-group){margin-inline:calc(-1 * var(--m-side,16px))!important;width:auto!important}
#odGallery .od-group{border-radius:0!important;border-left:0!important;border-right:0!important}
.od-all-body{padding:8px 0!important}
.od-all-body #odGallery{gap:8px!important}
}
/* 2026-10-08 사용자 「태블릿 화면은 모바일과 동일한 베이스로」: 이 파일의 휴대폰 기준(max-width:640px)을 1024px 로 넓히고 태블릿 전용(641~1024) 규칙은 껐다. finder-steps·home-motion·home-reviews 의 기준도 같게. */
/* 서류별 보유 형태(2026-10-08 사용자 「서류마다 미보유·사본 — 1:1」): 칩 한 줄 + 바로 아래 [미보유|사본|원본|전체] 작은 선택 */
#odFinder #odDocs:has(.od-docrow){display:flex!important;flex-direction:column;align-items:stretch;gap:10px}
#odFinder .od-docrow{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
#odFinder .od-docrow>.od-chip{max-width:100%}
#odFinder .od-dochold{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;width:100%;max-width:420px}
#odFinder .od-dochold button{min-height:34px;padding:0 6px;border:1px solid #cfdbec;border-radius:9px;background:#fff;color:#41546f;font:inherit;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#odFinder .od-dochold button.on{background:#0a2a5e;border-color:#0a2a5e;color:#fff}
#odFinder .od-dochold button:focus-visible{outline:3px solid #2f80ed;outline-offset:2px}
/* 서류 검색 상태를 둥근 알림 띠로(2026-10-08 사용자 「검색하는 중입니다가 너무 성의 없다」) — 상태마다 바탕·테두리 색, 검색 중은 스피너 + 글자 깜박임 */
#odDocSearchStatus:not(:empty){display:inline-flex!important;flex:0 1 auto!important;align-items:center;gap:8px;max-width:100%;box-sizing:border-box;padding:7px 14px 7px 10px;border-radius:999px;
border:1px solid #d6e2f5;background:#f3f7fd;font-size:13px;font-weight:800;box-shadow:0 1px 2px rgba(10,42,94,.06)}
#odDocSearchStatus[data-state="loading"]{background:linear-gradient(90deg,#eef4fd,#f7faff,#eef4fd);background-size:200% 100%;animation:odStatusSheen 1.4s linear infinite;border-color:#c9daf3;color:#1E5BBA!important}
#odDocSearchStatus[data-state="loading"]::before{width:15px;height:15px;border-width:2.5px}
#odDocSearchStatus[data-state="ready"]{background:#ecfdf3;border-color:#bbe7cb}
#odDocSearchStatus[data-state="empty"]{background:#fff7e8;border-color:#f6d9a4}
#odDocSearchStatus:is([data-state="error"],[data-state="rate-limit"],[data-state="unavailable"],[data-state="corrective"],[data-state="over-limit"]){background:#fef1f1;border-color:#f5c2c2}
@keyframes odStatusSheen{from{background-position:100% 0}to{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){#odDocSearchStatus[data-state="loading"]{animation:none}}
#odDocResults .od-ds-skel span{background:linear-gradient(90deg,#e9eef5 0,#f6f9fc 50%,#e9eef5 100%);background-size:200% 100%;animation:odStatusSheen 1.2s linear infinite}/* 검색 자리표시 줄도 반짝이게 */
@media (prefers-reduced-motion:reduce){#odDocResults .od-ds-skel span{animation:none}}
/* 휴대폰·태블릿 「관련 서비스 고르기」 머리줄 다듬기(2026-10-08 사용자 「모바일 UI 마음에 안 듦」):
1줄 = 🔮 제목 ……… [‹ 1/166 ›] 작은 알약 / 2줄 = [☰ 전체 보기 (1656) ›] 얇은 버튼 */
@media (max-width:1024px){
.flood-h .finder-heading-row{display:flex!important;flex-wrap:wrap!important;align-items:center;column-gap:8px;row-gap:10px!important}
.flood-h .finder-heading-row .fh-title{order:1;flex:1 1 auto!important;min-width:0;font-size:16px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.flood-h .finder-heading-row .finder-favorite-guide{display:none!important}
.flood-h .finder-heading-row .od-pagebar{order:2;flex:none;margin:0!important}
.flood-h .finder-heading-row .od-pagebar #odPagination:not([hidden]){gap:0;padding:2px;border-radius:999px;background:rgba(255,255,255,.65);border:1px solid rgba(10,42,94,.12)}
.flood-h .finder-heading-row .od-pagebar #odPagination>button{min-width:32px!important;min-height:32px!important;width:32px;height:32px;border:0!important;border-radius:50%!important;background:transparent!important;font-size:18px!important;color:#0a2a5e}
.flood-h .finder-heading-row .od-pagebar #odPagination>button:disabled{opacity:.3}
.flood-h .finder-heading-row .od-pagebar #odPageStatus{min-width:3.6em;font-size:13px}
.flood-h .finder-heading-row .od-all-btn:not([hidden]){order:9;flex:1 1 100%!important;display:flex!important;align-items:center;justify-content:center;gap:8px;min-height:40px!important;margin:0!important;
border:1px solid #c9daf3!important;border-radius:12px!important;background:#fff!important;color:#1E5BBA!important;font-size:14px!important;font-weight:800;box-shadow:0 1px 2px rgba(10,42,94,.08)}
.flood-h .finder-heading-row .od-all-btn:not([hidden])::before{content:"";width:16px;height:16px;flex:none;background:currentColor;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3.5 6h.01M3.5 12h.01M3.5 18h.01'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3.5 6h.01M3.5 12h.01M3.5 18h.01'/%3E%3C/svg%3E") center/contain no-repeat}
.flood-h .finder-heading-row .od-all-btn:not([hidden])::after{content:"›";font-size:18px;line-height:1;opacity:.7}
}
/* 선택한 서비스 줄에 서류 보유 형태 라벨(2026-10-08 사용자): 휴대폰 카드 2줄 = [속도 칩][보유 라벨] …… [금액] */
@media (max-width:1024px){
.panel.od-cart.is-bar .od-cart-list .od-citem{grid-template-columns:auto auto minmax(0,1fr) 40px!important;grid-template-areas:"n n n x" "s h p x"!important}
.panel.od-cart.is-bar .od-cart-list .od-citem .od-hold-tag{grid-area:h;justify-self:start;margin:0;font-size:11.5px}
.panel.od-cart.is-bar .od-cart-list .od-citem-s.normal+.od-hold-tag{grid-area:s}/* 「일반」을 숨긴 줄은 보유 라벨이 그 자리(왼쪽 끝)로 */
}
.od-cart .od-citem-main .od-hold-tag{margin-inline-start:6px;vertical-align:1px}
/* 서류별 보유 형태 = 미보유·사본·원본 3칸, 고른 것을 다시 누르면 해제(=보유 형태로 거르지 않음, 2026-10-08 사용자 「전체 필요 없음」) */
#odFinder .od-dochold{grid-template-columns:repeat(3,minmax(0,1fr));max-width:330px}
/* 서류 칩 폭 100%(2026-10-08 사용자): 이름 왼쪽 · × 오른쪽 끝, 아래 보유 형태 3칸도 같은 폭 */
#odFinder .od-docrow{align-items:stretch}
#odFinder .od-docrow>.od-chip{display:flex!important;width:100%!important;max-width:none!important;box-sizing:border-box;justify-content:flex-start}
#odFinder .od-docrow>.od-chip .od-chip-x{margin-inline-start:auto!important}
#odFinder .od-dochold{max-width:none!important}
/* 서류 칩 줄이 PC 에서 가로 두 칸 + 가로 스크롤로 보이던 것(2026-10-08 사용자 「갑자기 스크롤 — 100%로 줄 다 빼」) → 모든 폭에서 한 줄씩 세로로, 스크롤 없음 */
#odFinder #odDocs:has(.od-docrow){display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;align-items:stretch!important;gap:10px!important;
overflow:visible!important;max-height:none!important;grid-auto-flow:row!important;grid-template-columns:none!important;width:100%!important;padding-bottom:0!important}
#odFinder #odDocs .od-docrow{width:100%!important;flex:none!important;min-width:0}
#odFinderStatus.is-loading{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}/* 「이용 가능한 상품을 불러오는 중…」 화면에서 감춤(2026-10-08 사용자) */
/* 서류 한 건 = 카드 하나(2026-10-08 사용자 「같은 섹션이다 느낌이 없다」): 흰 카드 안에 [📄 서류명 ……×] / 얇은 선 / [미보유|사본|원본] 붙은 세그먼트 */
#odFinder #odDocs .od-docrow{gap:0!important;padding:0;border:1.5px solid #c9d8ee;border-radius:14px;background:#fff;overflow:hidden;box-shadow:0 1px 3px rgba(10,42,94,.08)}
#odFinder #odDocs .od-docrow>.od-chip{border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;padding:8px 8px 8px 10px!important;min-height:44px}
#odFinder #odDocs .od-docrow .od-dochold{gap:0!important;padding:8px 10px 10px;border-top:1px solid #edf1f7;background:#f8fafd}
#odFinder #odDocs .od-docrow .od-dochold button{border-radius:0!important;border-color:#cfdbec!important;margin-inline-start:-1px;min-height:34px}
#odFinder #odDocs .od-docrow .od-dochold button:first-child{border-radius:9px 0 0 9px!important;margin-inline-start:0}
#odFinder #odDocs .od-docrow .od-dochold button:last-child{border-radius:0 9px 9px 0!important}
#odFinder #odDocs .od-docrow .od-dochold button.on{position:relative;z-index:1}
#odFinder #odDocs .od-docrow:has(.od-dochold button.on){border-color:#9db8e0}
/* 목록 다시 불러오는 중 = 목록 위 얇은 진행 막대(왕복), 첫 불러오기 회색 자리표시는 반짝임(2026-10-08 사용자 「로딩바 잘못된 것 다 수정」) */
.od-busybar{position:relative;height:3px;margin:0 0 8px;border-radius:3px;overflow:hidden;background:rgba(255,255,255,.22)}
.od-busybar[hidden]{display:none}
.od-busybar::before{content:"";position:absolute;top:0;bottom:0;left:0;width:35%;border-radius:3px;background:linear-gradient(90deg,#7fb2ff,#ffd166);animation:odBusy 1.1s ease-in-out infinite}
@keyframes odBusy{0%{transform:translateX(-100%)}100%{transform:translateX(290%)}}
@media (max-width:1024px){body:not(.nation-finder-page) .od-busybar{order:4;margin:0 var(--m-side,16px) 8px}}
#odGallery .od-loading-card span,#odGallery .od-loading-card::after{background-image:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 100%);background-size:200% 100%;background-repeat:no-repeat;animation:odStatusSheen 1.3s linear infinite}
#odGallery .od-loading-card::after{background:repeating-linear-gradient(to bottom,#e9eef5 0 13px,transparent 13px 44px)!important;animation:odSkelPulse 1.3s ease-in-out infinite}
@keyframes odSkelPulse{50%{opacity:.5}}
@media (prefers-reduced-motion:reduce){.od-busybar::before,#odGallery .od-loading-card span,#odGallery .od-loading-card::after{animation:none}}
/* 서류명 옆 보유 형태 라벨(2026-10-08): [📄 출생증명서 (보유 형태 · 미보유) ×] — 고르지 않으면 「전체」(회색) */
/* 상품 목록에서는 「미보유」 라벨 감춤(2026-10-08 사용자 「헷갈림」) — 사본·원본만 보임. 서류별 보유 형태는 서류 카드에서 고른다 */
#odGallery .od-hold-tag.od-hold-not_held{display:none!important}
.od-confirm-ok.is-go{border-color:#0a2a5e!important;background:#0a2a5e!important;color:#fff}/* 이동 확인은 남색(비우기는 빨강) */
#odFinder #odDocs .od-docrow .od-dochold[hidden]{display:none!important}
#odFinder #odDocs .od-docrow .od-dochold{grid-template-columns:repeat(var(--n,3),minmax(0,1fr))!important}#odFinder #odDocs .od-docrow .od-dochold button:only-child{border-radius:9px!important}
/* 휴대폰·태블릿: 「관련 서비스 고르기」 머리 상자와 아래 상품 목록을 한 장으로(2026-10-08 사용자 「다른 섹션처럼 느껴짐」):
머리도 화면 폭 가득·위만 둥글게·아래 여백 0 → 바로 이어 붙은 흰 목록 */
@media (max-width:1024px){
body:not(.nation-finder-page) .flood-h .finder-heading-row{margin:0 calc(-1 * var(--m-side,16px))!important;padding:14px var(--m-side,16px) 12px!important;
border-radius:18px 18px 0 0!important;background:#e8eff9!important;border:0!important;border-bottom:1px solid #d5e0f0!important;box-shadow:none!important}
body:not(.nation-finder-page) .od-busybar{margin:0 calc(-1 * var(--m-side,16px))!important;border-radius:0;height:3px;background:#dfe8f5}
body:not(.nation-finder-page) #odGallery:has(.od-group) .od-group:first-child{border-top:0!important}
}
/* 결과가 바뀌면 목록이 살짝 올라오며 나타남 + 화면 밖이면 아래 알림(document-finder.js announceResults, 2026-10-08) */
#odGallery.od-refreshed>*{animation:odListIn .42s cubic-bezier(.2,.8,.2,1) both}
#odGallery.od-refreshed>*:nth-child(2){animation-delay:.05s}#odGallery.od-refreshed>*:nth-child(3){animation-delay:.1s}#odGallery.od-refreshed>*:nth-child(n+4){animation-delay:.14s}
@keyframes odListIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.od-result-toast{position:fixed;left:50%;bottom:calc(var(--stack-b,16px) + 6px);z-index:10038;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 32px - 70px);box-sizing:border-box;
padding:11px 16px;border:0;border-radius:999px;background:#0a2a5e;color:#fff;font:inherit;font-size:14px;font-weight:700;box-shadow:0 10px 26px rgba(4,30,76,.35);cursor:pointer;
transform:translate(-50%,24px);opacity:0;pointer-events:none;transition:transform .28s ease,opacity .28s ease;white-space:nowrap}
.od-result-toast.is-on{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.od-result-toast .m{overflow:hidden;text-overflow:ellipsis}
.od-result-toast b{flex:none;padding:3px 10px;border-radius:999px;background:#ffd166;color:#0a2a5e;font-weight:900;font-size:13px}
/* 휴대폰·태블릿: 아래쪽은 장바구니 막대·AI상담 버튼에 묻혀 잘 안 보였다(2026-10-12 사용자) → 헤더 바로 아래 가운데에서 내려온다 */
@media (max-width:1024px){.od-result-toast{left:50%;top:calc(env(safe-area-inset-top,0px) + 80px);bottom:auto;max-width:calc(100vw - 32px);transform:translate(-50%,-24px)}
.od-result-toast.is-on{transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){#odGallery.od-refreshed>*{animation:none}.od-result-toast{transition:none}}
/* 휴대폰·태블릿 좌우 여백 되살림(2026-10-08 사용자 「모바일에서는 좌우 패딩이 있어야」): 머리+목록 한 장은 유지하되 화면 가장자리에서 띄움.
머리 = 위만 둥글게, 첫 묶음은 머리에 붙고, 묶음 사이는 틈, 마지막 묶음 아래만 둥글게 */
@media (max-width:1024px){
body:not(.nation-finder-page) .flood-h .finder-heading-row{margin:0!important;padding:14px 14px 12px!important}
body:not(.nation-finder-page) .od-busybar{margin:0!important}
body:not(.nation-finder-page) #odGallery:not(.od-in-all):has(.od-group){margin-inline:0!important;gap:10px!important}
#odGallery:not(.od-in-all) .od-group{border-radius:14px!important;border:1px solid var(--odline,#e3e9f2)!important}
#odGallery:not(.od-in-all) .od-group:first-child{border-top:0!important;border-top-left-radius:0!important;border-top-right-radius:0!important}
.od-all-body{padding:8px 12px!important}
.od-all-body #odGallery .od-group{border-radius:14px!important;border:1px solid var(--odline,#e3e9f2)!important}
}
/* 선택한 서비스 줄마다 발급국 → 제출국(2026-10-08) — 휴대폰 카드는 이름 아래 줄, 제출국 미선택은 주황 */
.od-cart .od-citem-r{display:block;margin-top:2px;font-size:12px;font-weight:600;color:#6b7c95}
.od-cart .od-citem-r.is-missing{color:#c2410c}
@media (max-width:1024px){
.panel.od-cart.is-bar .od-cart-list .od-citem{grid-template-areas:"n n n x" "r r r x" "s h p x"!important}
.panel.od-cart.is-bar .od-cart-list .od-citem .od-citem-r{grid-area:r;margin:0}
}
/* 휴대폰 머리줄 한 줄로(2026-10-08 사용자 「전체 보기가 한 줄을 다 쓰니 아깝다 — 제목 줄에 포개」): [🔮 제목…][‹ 1/166 ›][☰ 전체 보기 (n)] */
@media (max-width:1024px){
.flood-h .finder-heading-row{flex-wrap:nowrap!important;column-gap:6px!important}
.flood-h .finder-heading-row .fh-title{order:1;flex:1 1 auto!important;min-width:0;font-size:15px!important}
.flood-h .finder-heading-row .od-pagebar{order:2}
.flood-h .finder-heading-row .od-all-btn:not([hidden]){order:3;flex:0 0 auto!important;width:auto!important;min-height:34px!important;height:34px;padding:0 10px!important;gap:4px!important;font-size:12.5px!important;border-radius:999px!important;white-space:nowrap}
.flood-h .finder-heading-row .od-all-btn:not([hidden])::before{width:13px;height:13px}
.flood-h .finder-heading-row .od-all-btn:not([hidden])::after{display:none}
.flood-h .finder-heading-row .od-pagebar #odPagination>button{width:28px;min-width:28px!important;height:28px;min-height:28px!important;font-size:16px!important}
.flood-h .finder-heading-row .od-pagebar #odPageStatus{min-width:3em;font-size:12.5px}
}
@media (max-width:400px){.flood-h .finder-heading-row .fh-title>span[aria-hidden]{display:none}}
@media (max-width:1024px){.flood-h .finder-heading-row{column-gap:4px!important}.flood-h .finder-heading-row .fh-title{font-size:14.5px!important;letter-spacing:-.3px}.flood-h .finder-heading-row .od-pagebar #odPagination>button{width:24px;min-width:24px!important}.flood-h .finder-heading-row .od-pagebar #odPageStatus{min-width:0!important;padding:0 2px;font-size:12px}.flood-h .finder-heading-row .od-all-btn:not([hidden]){padding:0 9px!important;font-size:12px!important}}/* 제목이 잘리지 않게 줄인다 */
/* PC 「선택한 서비스」 목록 안 스크롤 없앰 — 담은 만큼 아래로 늘어남(2026-10-08 사용자 「스크롤 말고 늘어나는 형태, 길어도 됨」) */
.panel.od-cart:not(.is-bar) .od-cart-list{max-height:none!important;overflow:visible!important;scrollbar-gutter:auto!important}
/* PC 선택한 서비스 한 줄 정리: 이름 / 발급국→제출국 / [속도][보유] 한 줄 */
.panel.od-cart:not(.is-bar) .od-citem-main{display:flex;flex-wrap:wrap;align-items:center;gap:3px 6px}
.panel.od-cart:not(.is-bar) .od-citem-main .od-citem-n{flex:1 1 100%}
.panel.od-cart:not(.is-bar) .od-citem-main .od-citem-r{flex:1 1 100%;order:1;margin:0}
.panel.od-cart:not(.is-bar) .od-citem-main .od-citem-s{order:2;margin:0}
.panel.od-cart:not(.is-bar) .od-citem-main .od-hold-tag{order:3;margin:0!important;font-size:11px}
/* 선택한 서비스 줄마다 작은 「발급국 [국기] 대한민국 ✓ → 제출국 [국기] 미국 ✓」(2026-10-08 사용자 「이 형태가 작은 표현으로 다 들어가야」) */
.od-cart .od-citem-r{display:flex!important;flex-wrap:wrap;align-items:center;gap:4px 6px;margin-top:4px!important;padding:4px 8px;border:1px solid #eadfbf;border-radius:8px;background:#fffdf6;font-size:11.5px;color:#0a2a5e;width:max-content;max-width:100%;box-sizing:border-box}
.od-cart .od-citem-r.is-missing{border-color:#f3c9a8;background:#fff7f0}
.od-cart .od-cr-part{display:inline-flex;align-items:center;gap:4px;min-width:0}
.od-cart .od-cr-part .k{color:#8a6a1f;font-weight:700;font-size:10.5px}
.od-cart .od-cr-part .fl{width:16px;height:11px;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.od-cart .od-cr-part .v{font-weight:800;white-space:nowrap}
.od-cart .od-cr-part .ok{color:#16a34a;font-weight:900}
.od-cart .od-cr-part.is-missing .v{color:#c2410c}
.od-cart .od-citem-r .ar{color:#b8860b;font-weight:900}
/* 줄마다 나라 칸 = 버튼(누르면 국가 선택) — 미선택은 「＋ 선택」처럼 보이게 */
.od-cart button.od-cr-part{margin:0;padding:2px 6px;border:1px solid transparent;border-radius:6px;background:transparent;font:inherit;color:inherit;cursor:pointer}
.od-cart button.od-cr-part:hover{background:#f6efd9;border-color:#e6d6a8}
.od-cart button.od-cr-part.is-missing{border-color:#f3b98c;background:#fff;border-style:dashed}
.od-cart button.od-cr-part.is-missing .v::after{content:" ›";font-weight:900}
.od-cart button.od-cr-part:focus-visible{outline:2px solid #1e5bba;outline-offset:1px}
.od-cart .od-cart-route{display:none!important}/* 위쪽 큰 「발급국 → 제출국」 상자 숨김 — 줄마다 나라 표시·선택으로 대신(2026-10-08 사용자 「이제 불필요」) */
/* 보유 형태 라벨을 가격 바로 위로(2026-10-08 사용자) — 휴대폰 카드: [이름][나라][…라벨 / 속도 … 가격] */
@media (max-width:1024px){
.panel.od-cart.is-bar .od-cart-list .od-citem{grid-template-areas:"n n n x" "r r r x" "s . h x" "s . p x"!important;row-gap:4px!important}
.panel.od-cart.is-bar .od-cart-list .od-citem .od-hold-tag{grid-area:h!important;justify-self:end!important;margin:0!important}
.panel.od-cart.is-bar .od-cart-list .od-citem-s{align-self:end}
.panel.od-cart.is-bar .od-cart-list .od-citem-p{align-self:start}
}
/* 휴대폰 묶음 줄 간결하게(2026-10-08 사용자 「스켈레톤 CSS 이상 — 간결하게」): 빈 라벨 칸(58px) 없앰 → 이름이 폭을 다 씀,
라벨(사본·원본)은 있을 때만 이름 아래 작게, 금액 열 좁게·글자 작게, 줄 높이·여백 줄임 */
@media (max-width:1024px){
#odGallery .od-gcard.od-grouped{grid-template-columns:minmax(0,1fr) auto 36px!important;column-gap:8px!important;min-height:0!important;padding:9px 4px 9px 14px!important}
#odGallery .od-gcard.od-grouped .nm{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:3px!important;min-height:0!important;font-size:14px!important;line-height:1.38!important}
#odGallery .od-gcard.od-grouped .nm .od-hold-tag{grid-column:auto!important;grid-row:auto!important;justify-self:auto!important;font-size:10.5px!important;padding:1px 7px!important}
#odGallery .od-gcard.od-grouped .pr{font-size:14.5px!important}
#odGallery .od-gcard.od-grouped .star{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important}
#odGallery .od-group-h{padding:10px 14px 8px!important}
#odGallery .od-group-h .od-group-name{font-size:15px!important}
#odGallery .od-group-h .od-group-sub{font-size:12px!important}
}
/* 줄 안 나라 칸 = 그 자리 선택 상자(투명