/* 주차핑 공통 디자인 시스템 v1 (B64 스테이징)
   - 범위: body.jpux 가 붙은 페이지와 .ux-* 컴포넌트만. 전역 Astra·헤더 규칙은 건드리지 않는다.
   - 토큰은 전역 헤더(--jp-*)·홈 v2(--v2-*) 값과 맞춘다. */
.jpux,.ux-scope{
  --ux-ink:#14213d;--ux-text:#1f2937;--ux-muted:#4b5563;--ux-faint:#6b7280;
  --ux-blue:#2563eb;--ux-blue-strong:#1d4ed8;--ux-blue-soft:#eef4ff;--ux-blue-line:#c7d7fe;
  --ux-pink:#be185d;--ux-pink-soft:#fdf2f8;--ux-green:#15803d;--ux-green-soft:#ecfdf3;
  --ux-amber:#92400e;--ux-amber-soft:#fff7cc;--ux-red:#b91c1c;--ux-red-soft:#fef2f2;
  --ux-line:#e5e7eb;--ux-bg:#f6f8fc;--ux-card:#ffffff;--ux-chip:#f1f5f9;
  --ux-radius:16px;--ux-radius-sm:10px;--ux-shadow:0 8px 26px rgba(21,40,75,.08);
  --ux-font:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;
  --ux-tap:48px;--ux-on-blue:#fff;--ux-field-line:#6b7280;
}
@media (prefers-color-scheme:dark){
  .jpux,.ux-scope{
    --ux-ink:#e8eefc;--ux-text:#e5e7eb;--ux-muted:#c3cad6;--ux-faint:#9aa4b2;
    --ux-blue:#7aa7ff;--ux-blue-strong:#9cc0ff;--ux-blue-soft:#14223f;--ux-blue-line:#2b4370;
    --ux-pink:#f9a8d4;--ux-pink-soft:#3a1730;--ux-green:#86efac;--ux-green-soft:#0f2f1f;
    --ux-amber:#fcd34d;--ux-amber-soft:#3a2f0b;--ux-red:#fca5a5;--ux-red-soft:#3b1414;
    --ux-line:#2a3446;--ux-bg:#0e1420;--ux-card:#151d2c;--ux-chip:#1d2738;
    --ux-shadow:0 8px 26px rgba(0,0,0,.35);--ux-on-blue:#0b1530;--ux-field-line:#9aa4b2;
  }
  body.jpux:not(.jp-parking-detail) .srfm-required{color:#fca5a5!important}
  body.jpux{background:var(--ux-bg)!important;color:var(--ux-text)}
  body.jpux .site-content,body.jpux .ast-container,body.jpux #primary,body.jpux .ast-article-single,body.jpux .ast-separate-container .ast-article-single,body.jpux article{background:transparent!important}
  body.jpux .entry-content,body.jpux .entry-title,body.jpux .entry-content :is(h1,h2,h3,h4,p,li,td,th,strong){color:var(--ux-text)}
  body.jpux .entry-content a:not(.ux-btn):not(.ux-card){color:var(--ux-blue-strong)}
  /* B66: 레거시 상세 CSS 를 유지하는 쪽(신청·행사)은 어두운 모드에도 밝은 카드·검은 글자로 그려진다(.entry-content *{color…!important}).
     토큰만 어두워지면 남색 바탕+검은 글자가 되어 안 읽힌다(360px 실측) → 이 페이지들은 밝은 토큰으로 고정한다. */
  body.jpux.jp-parking-detail{
    --ux-ink:#14213d;--ux-text:#1f2937;--ux-muted:#4b5563;--ux-faint:#6b7280;
    --ux-blue:#2563eb;--ux-blue-strong:#1d4ed8;--ux-blue-soft:#eef4ff;--ux-blue-line:#c7d7fe;
    --ux-pink:#be185d;--ux-pink-soft:#fdf2f8;--ux-green:#15803d;--ux-green-soft:#ecfdf3;
    --ux-amber:#92400e;--ux-amber-soft:#fff7cc;--ux-red:#b91c1c;--ux-red-soft:#fef2f2;
    --ux-line:#e5e7eb;--ux-bg:#f6f8fc;--ux-card:#ffffff;--ux-chip:#f1f5f9;
    --ux-shadow:0 8px 26px rgba(21,40,75,.08);--ux-on-blue:#fff;--ux-field-line:#6b7280;
  }
}
/* 페이지 바탕 — 한글 글꼴·제목 대문자 변환 해제 */
/* 밝은 화면: Astra plain 컨테이너 바탕(전역색 5, 어두운 남색)이 본문 여백으로 드러나지 않게 (B64 QA 발견) */
body.jpux,body.jpux.ast-plain-container,body.jpux .ast-plain-container{background:var(--ux-bg)}
/* 글(post) 카드: Astra separate 컨테이너의 .ast-article-single 바탕도 전역색 5(남색) — 레거시 해제 시 카드 색을 직접 지정 (B64 QA 발견) */
body.jpux:not(.jp-parking-detail) .ast-article-single,body.jpux:not(.jp-parking-detail) .ast-article-post,body.jpux:not(.jp-parking-detail).ast-separate-container .ast-article-single{background:var(--ux-card)!important}
body.jpux:not(.jp-parking-detail) .entry-header .entry-title,body.jpux:not(.jp-parking-detail) .entry-meta,body.jpux:not(.jp-parking-detail) .entry-meta *:not(a){color:var(--ux-ink)!important}body.jpux:not(.jp-parking-detail) .entry-meta a{color:var(--ux-blue-strong)!important}
body.jpux{font-family:var(--ux-font)}
body.jpux .entry-content,body.jpux .entry-title{font-family:var(--ux-font)}
body.jpux :is(h1,h2,h3,h4,.entry-title){text-transform:none!important;letter-spacing:-.01em}
body.jpux .entry-content a:not(.ux-btn):not(.ux-card){color:var(--ux-blue-strong);text-underline-offset:3px}
body.jpux .entry-content :focus-visible,.ux-scope :focus-visible{outline:3px solid #f59e0b;outline-offset:2px;border-radius:6px}

/* B78 AG-04: SureForms 색 변수 — 폼 값이 Astra 전역색 2(#FFFFFF)라 흰 카드 위 라벨·입력 글자·테두리가 안 보였다(문의 폼, 정적 계산 1.0:1).
   신청 쪽은 공용 강제색 덕에 글자만 보였고 테두리는 같은 문제. 폼 ID 없이 변수만 바꾼다(.srfm-form-container-N 특이도 0,1,0 보다 높게). 주 버튼은 사이트 파랑. */
body.jpux .entry-content .srfm-form-container{
  --srfm-color-scheme-text:var(--ux-text);--srfm-color-input-label:var(--ux-text);
  --srfm-color-input-description:var(--ux-muted);--srfm-color-input-placeholder:var(--ux-muted);
  --srfm-color-input-text:var(--ux-text);--srfm-color-input-prefix:var(--ux-muted);
  --srfm-color-input-background:var(--ux-card);--srfm-color-input-background-hover:var(--ux-chip);
  --srfm-color-input-border:var(--ux-field-line);--srfm-color-multi-choice-svg:var(--ux-muted);
  --srfm-color-scheme-primary:#1d4ed8;--srfm-color-scheme-text-on-primary:#fff;--srfm-btn-color-hover:#1e40af;
}
body.jpux .entry-content .srfm-form-container .srfm-submit-button,body.jpux .entry-content .srfm-form-container .srfm-submit-button *{color:#fff!important}
body.jpux .entry-content .srfm-form-container .srfm-submit-button{min-height:48px}

/* 레이아웃 */
.ux-block{margin:0 0 20px}
.ux-lead{font-size:17px;line-height:1.6;color:var(--ux-text);margin:6px 0 14px}
.ux-lead b{color:var(--ux-ink)}
.ux-eyebrow{display:inline-flex;gap:6px;align-items:center;font-size:13px;font-weight:700;color:var(--ux-blue-strong);background:var(--ux-blue-soft);border-radius:999px;padding:5px 11px;margin:0 0 8px}
body.jpux .entry-content p.ux-eyebrow{padding:5px 11px!important;margin:0 0 8px!important;border:0!important;line-height:1.4;min-height:0!important}
.ux-h{font-size:20px;line-height:1.35;font-weight:800;color:var(--ux-ink);margin:24px 0 10px}
.ux-sub{font-size:14px;color:var(--ux-muted);margin:-4px 0 12px}

/* 카드 */
.ux-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 16px;padding:0;list-style:none}
@media (min-width:640px){.ux-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:960px){.ux-cards.ux-cards-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ux-cards>li{margin:0;padding:0}
.ux-card{display:flex;flex-direction:column;gap:6px;height:100%;min-height:var(--ux-tap);box-sizing:border-box;padding:14px;border:1px solid var(--ux-line);border-radius:var(--ux-radius);background:var(--ux-card);color:var(--ux-text)!important;text-decoration:none!important;box-shadow:var(--ux-shadow);transition:transform .12s,border-color .12s}
a.ux-card:hover{transform:translateY(-1px);border-color:var(--ux-blue-line)}
button.ux-card{font:inherit;text-align:left;cursor:pointer}
button.ux-card,button.ux-card:hover,button.ux-card:focus,button.ux-card:active{background:var(--ux-card)!important;color:inherit!important;border-color:var(--ux-line)} /* B72: 테마 버튼 눌림색이 카드 글자를 가리지 않게 */
button.ux-card:hover{border-color:var(--ux-blue-line)}
.ux-card[aria-pressed="true"],.ux-card.is-on{border-color:var(--ux-blue);outline:2px solid var(--ux-blue);outline-offset:-2px}
.ux-card-t{font-size:15px;font-weight:800;color:var(--ux-ink);line-height:1.35}
.ux-card-d{font-size:13px;line-height:1.5;color:var(--ux-muted)}
.ux-ico{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:var(--ux-blue-soft);color:var(--ux-blue-strong);flex:none}
.ux-ico svg{width:20px;height:20px}
.ux-ico.is-pink{background:var(--ux-pink-soft);color:var(--ux-pink)}
.ux-ico.is-green{background:var(--ux-green-soft);color:var(--ux-green)}
.ux-ico.is-amber{background:var(--ux-amber-soft);color:var(--ux-amber)}

/* 숫자 강조 */
.ux-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 16px}
.ux-kpi{background:var(--ux-card);border:1px solid var(--ux-line);border-radius:14px;padding:12px 10px;text-align:center}
.ux-kpi b{display:block;font-size:20px;line-height:1.2;word-break:keep-all;color:var(--ux-ink);font-weight:800;font-variant-numeric:tabular-nums}
.ux-kpi span{display:block;font-size:12px;color:var(--ux-muted);margin-top:3px}

/* 버튼 */
.ux-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--ux-tap);padding:0 18px;border-radius:14px;border:1px solid transparent;font:700 16px/1.2 var(--ux-font);text-decoration:none!important;cursor:pointer;box-sizing:border-box}
.ux-btn-primary{background:linear-gradient(135deg,#2864f0,#3868de);color:#fff!important}
.ux-btn-primary:hover{filter:brightness(1.05)}
.ux-btn-ghost{background:var(--ux-card);color:var(--ux-blue-strong)!important;border-color:var(--ux-blue-line)}
.ux-btn-block{display:flex;width:100%}
.ux-actions{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.ux-actions .ux-btn{flex:1 1 160px}

/* 칩(선택형) */
.ux-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;padding:0;border:0}
.ux-chip{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--ux-line);background:var(--ux-chip);color:var(--ux-text);font:600 14px/1 var(--ux-font);cursor:pointer}
.ux-chip[aria-pressed="true"],.ux-chip.is-on,.ux-chips input:checked+.ux-chip{background:var(--ux-blue);border-color:var(--ux-blue);color:var(--ux-on-blue)}
.ux-chips input{position:absolute;opacity:0;width:1px;height:1px}
.ux-chips input:focus-visible+.ux-chip{outline:3px solid #f59e0b;outline-offset:2px}

/* 접는 상세(원문 보존) */
.ux-acc{border:1px solid var(--ux-line);border-radius:var(--ux-radius);background:var(--ux-card);margin:0 0 10px;overflow:hidden}
.ux-acc>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:14px 16px;min-height:var(--ux-tap);box-sizing:border-box}
.ux-acc>summary::-webkit-details-marker{display:none}
.ux-acc>summary::after{content:"";flex:none;width:10px;height:10px;margin-left:auto;border-right:2px solid var(--ux-faint);border-bottom:2px solid var(--ux-faint);transform:rotate(45deg);transition:transform .15s}
.ux-acc[open]>summary::after{transform:rotate(-135deg)}
.ux-acc>summary :is(h2,h3){margin:0!important;font-size:17px!important;line-height:1.4!important;color:var(--ux-ink)!important;font-weight:800}
.ux-acc-body{padding:0 16px 14px;border-top:1px solid var(--ux-line)}
.ux-acc-body>*:first-child{margin-top:12px}
.ux-acc-tools{display:flex;justify-content:flex-end;margin:0 0 6px}
.ux-linkbtn{background:none;border:0;color:var(--ux-blue-strong);font:600 14px var(--ux-font);cursor:pointer;min-height:44px;padding:0 8px}

/* 계산기 */
.ux-calc{background:var(--ux-card);border:1px solid var(--ux-line);border-radius:var(--ux-radius);padding:16px;margin:0 0 16px;box-shadow:var(--ux-shadow)}
.ux-calc-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 10px}
.ux-calc label{font-size:13px;font-weight:700;color:var(--ux-muted)}
.ux-calc input[type=range]{width:100%;min-height:44px;accent-color:var(--ux-blue)}
.ux-calc output{font-variant-numeric:tabular-nums}
.ux-result{font-size:28px;font-weight:800;color:var(--ux-ink);font-variant-numeric:tabular-nums}
.ux-formula{font-size:13px;color:var(--ux-muted);line-height:1.6;margin:6px 0 0}

/* 막대 비교(요금·거리) */
.ux-bars{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:8px}
.ux-bar{display:grid;grid-template-columns:minmax(84px,30%) 1fr auto;gap:8px;align-items:center;font-size:13px;color:var(--ux-text)}
.ux-bar-track{height:14px;background:var(--ux-chip);border-radius:999px;overflow:hidden}
.ux-bar-fill{height:100%;background:var(--ux-blue);border-radius:999px;min-width:4px;transition:width .25s}
.ux-bar.is-best .ux-bar-fill{background:var(--ux-green)}
.ux-bar.is-cap .ux-bar-fill{background:repeating-linear-gradient(45deg,var(--ux-blue),var(--ux-blue) 6px,var(--ux-blue-strong) 6px,var(--ux-blue-strong) 12px)}
.ux-bar b{font-variant-numeric:tabular-nums;color:var(--ux-ink)}

/* 단계 */
.ux-steps{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px;counter-reset:uxs}
.ux-steps>li{display:grid;grid-template-columns:32px 1fr;gap:10px;align-items:start;background:var(--ux-card);border:1px solid var(--ux-line);border-radius:14px;padding:12px;counter-increment:uxs;font-size:14px;line-height:1.55;color:var(--ux-text)}
.ux-steps>li::before{content:counter(uxs);width:32px;height:32px;border-radius:999px;background:var(--ux-blue);color:var(--ux-on-blue);font-weight:800;display:grid;place-items:center}
.ux-steps b{color:var(--ux-ink)}

/* 안내·표식 */
.ux-note{font-size:13px;line-height:1.55;color:var(--ux-muted);background:var(--ux-chip);border-radius:var(--ux-radius-sm);padding:10px 12px;margin:8px 0}
.ux-note.is-warn{background:var(--ux-amber-soft);color:var(--ux-amber)}
.ux-tag{display:inline-block;font-size:12px;font-weight:700;border-radius:999px;padding:3px 9px;background:var(--ux-chip);color:var(--ux-muted)}
.ux-tag.is-example{background:var(--ux-amber-soft);color:var(--ux-amber)}
.ux-tag.is-real{background:var(--ux-green-soft);color:var(--ux-green)}
.ux-tag.is-blue{background:var(--ux-blue-soft);color:var(--ux-blue-strong)}

/* 검색 미니 폼 */
.ux-search{background:var(--ux-blue-soft);border:1px solid var(--ux-blue-line);border-radius:var(--ux-radius);padding:14px;margin:0 0 16px}
.ux-search-row{display:flex;gap:8px}
.ux-search input[type=search],.ux-search input[type=text]{flex:1;min-width:0;min-height:var(--ux-tap);border:1px solid var(--ux-blue-line);border-radius:12px;padding:0 12px;font:16px var(--ux-font);background:var(--ux-card);color:var(--ux-text)}
.ux-search .ux-btn{flex:none}
.ux-search .ux-chips{margin:10px 0 0}

/* 표(비교) */
.ux-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 16px;border:1px solid var(--ux-line);border-radius:var(--ux-radius)}
.ux-table{width:100%;border-collapse:collapse;font-size:14px;background:var(--ux-card)}
.ux-table th,.ux-table td{padding:10px 12px;border-bottom:1px solid var(--ux-line);text-align:left;vertical-align:top;color:var(--ux-text)}
.ux-table thead th{background:var(--ux-chip);font-weight:800;color:var(--ux-ink)}

/* 목차(빠른 이동) */
.ux-toc{display:flex;gap:6px;overflow-x:auto;padding:2px 0 8px;margin:0 0 12px;scrollbar-width:thin;scrollbar-color:var(--ux-line) transparent}
.ux-toc a{flex:none;font-size:13px;font-weight:700;border-radius:999px;padding:8px 12px;background:var(--ux-chip);color:var(--ux-text)!important;text-decoration:none!important;white-space:nowrap}

/* 화면 폭 보호 */
.jpux .entry-content img,.jpux .entry-content svg{max-width:100%;height:auto}
.ux-scope *,.jpux .ux-block *{box-sizing:border-box}
@media (prefers-reduced-motion:reduce){.ux-card,.ux-bar-fill,.ux-acc>summary::after{transition:none}}

/* 선택형 패널: JS가 있으면 선택한 하나만 보인다(JS 없으면 전부 보임) */
.ux-js [data-ux-hide]{display:none}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* 모바일 여백 회수: 운영 화면은 좌우 여백 합이 약 100px(412px 폭에서 본문 295px). 본문 폭을 약 340px로 넓힌다 */
@media (max-width:544px){
  body.jpux:not(.jp-lp-page) .site-content>.ast-container{padding-left:12px!important;padding-right:12px!important}
  body.jpux:not(.jp-lp-page) .site-main>article{margin-left:0!important;margin-right:0!important;padding-left:16px!important;padding-right:16px!important}
}
/* 제목 크기: 상세 페이지용 공용 CSS가 본문 h1을 14px로 줄이는 문제 보정(가이드·안내 페이지 한정) */
body.jpux .entry-content>h1,body.jpux .entry-content>.wp-block-heading:is(h1){font-size:26px!important;line-height:1.3!important;border:0!important;margin:4px 0 10px!important;padding:0!important;color:var(--ux-ink)}
body.jpux .entry-title{font-size:24px!important;line-height:1.35!important}
.ux-bar-track,.ux-bar-fill{display:block}
.jpux .entry-content .ux-bars,.jpux .entry-content .ux-cards,.jpux .entry-content .ux-steps{margin-left:0!important;padding-left:0!important;list-style:none!important}
.jpux .entry-content .ux-bars>li,.jpux .entry-content .ux-cards>li,.jpux .entry-content .ux-steps>li{margin-left:0!important}
@media (max-width:480px){
  [data-ux-tabs] .ux-card{padding:10px 12px;gap:4px}
  [data-ux-tabs] .ux-ico{width:30px;height:30px;border-radius:10px}
  [data-ux-tabs] .ux-card-d{font-size:12px}
}
.ux-calc .ux-kpi b{font-size:15px}
.ux-calc .ux-kpi span{font-size:11.5px}

/* 문서형 페이지 기본 타이포(상세 공용 CSS를 뗀 경로) — 한 화면에 읽히는 크기 */
body.jpux:not(.jp-parking-detail) .entry-content{font-size:16px;line-height:1.75;color:var(--ux-text)}
body.jpux:not(.jp-parking-detail) .entry-content h2{font-size:21px;line-height:1.4;margin:28px 0 10px;color:var(--ux-ink);font-weight:800}
body.jpux:not(.jp-parking-detail) .entry-content h3{font-size:18px;line-height:1.45;margin:22px 0 8px;color:var(--ux-ink);font-weight:800}
body.jpux:not(.jp-parking-detail) .entry-content p{margin:0 0 14px}
body.jpux:not(.jp-parking-detail) .entry-content code{font-size:14px;background:var(--ux-chip);color:var(--ux-ink);padding:2px 6px;border-radius:6px;white-space:normal}
body.jpux:not(.jp-parking-detail) .entry-content ul:not([class]),body.jpux:not(.jp-parking-detail) .entry-content ol:not([class]){padding-left:1.2em;margin:0 0 14px}
@media (max-width:544px){body.jpux .ast-separate-container .ast-article-single,body.jpux.ast-separate-container .ast-article-single{padding:20px 16px!important}}

/* B68: 모바일 터치 영역 44px */
@media (max-width:600px){.ux-chip{min-height:44px}.ux-toc a{display:inline-flex;align-items:center;min-height:44px}}

/* B72: 고르는 순서 도식·시간별 비교·운영시간 띠 */
.ux-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 14px;padding:0;list-style:none;counter-reset:none}
.ux-flow>li{display:flex;align-items:center;gap:8px;min-width:0;margin:0;padding:8px 10px;border-radius:var(--ux-radius-sm);background:var(--ux-blue-soft);color:var(--ux-ink);font-size:14px;font-weight:700;line-height:1.3}
.ux-flow .ux-ico{flex:0 0 auto;width:28px;height:28px}
.ux-hours{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ux-hours-col{min-width:0}
.ux-hours-t{display:block;margin:0 0 6px;color:var(--ux-ink)}
.ux-hours .ux-bars{margin:0}
.ux-day{position:relative;height:26px;margin:12px 0 4px;border-radius:8px;background:var(--ux-chip);overflow:hidden}
.ux-day-open{position:absolute;top:0;bottom:0;background:var(--ux-blue-line)}
.ux-day-stay{position:absolute;top:7px;bottom:7px;border-radius:6px;background:var(--ux-pink)}
.ux-day-axis{display:flex;justify-content:space-between;font-size:12px;color:var(--ux-muted)}
@media (max-width:720px){.ux-hours{grid-template-columns:1fr}}
@media (max-width:560px){.ux-flow{grid-template-columns:1fr;gap:4px}.ux-flow>li{padding:5px 10px;font-size:13px}.ux-flow .ux-ico{width:22px;height:22px}}