/* 홈(portal-home)이 아닌 페이지의 본문 컴포넌트를 홈 디자인 토큰으로 맞춘다.
   마크업은 src/ui.mjs 의 기존 클래스(.hero .section .feature-grid …)를 그대로 쓰고,
   색·간격·버튼·카드·아코디언만 home.css 와 같은 규격으로 재정의한다.
   body.portal-page 아래에서만 적용되며 홈·정비소 찾기 페이지에는 영향이 없다. */
body.portal-page{--pg-primary:var(--color-primary-text);--pg-accent:var(--color-primary);--pg-soft:var(--color-primary-soft);--pg-ink:var(--color-text-heading);--pg-muted:var(--color-text-muted);--pg-canvas:var(--color-bg-canvas);--pg-surface:var(--color-surface);--pg-line:var(--color-border);--pg-navy:var(--color-hero-navy);font-size:15px;line-height:1.75;background:var(--pg-surface);color:var(--pg-ink)}
body.portal-page .wrap{width:min(1232px,calc(100% - 96px));max-width:none;margin-inline:auto;padding:0}
body.portal-page .section{padding:72px 0}
body.portal-page .section+.section{border-top:0}
body.portal-page h1,body.portal-page h2,body.portal-page h3{letter-spacing:-.05em;font-weight:800}
body.portal-page h2{font-size:clamp(26px,3vw,36px);line-height:1.35;margin-bottom:18px}
body.portal-page h3{font-size:19px;font-weight:700}
body.portal-page p{color:inherit}
/* 본문 안 문장 링크만 파랗게. 헤더·푸터·버튼·카드 링크는 홈과 같이 글자색을 상속한다(전역 a 규칙은 메뉴 전체가 활성처럼 보이게 했다). */
body.portal-page main :is(p,li,td,th,dd,.answer,.prose,.faq-answer) a:not(.p-button):not(.btn):not(.p-text-link){color:var(--pg-primary)}

/* ── 페이지 상단(hero) — /workshops 의 p-directory-hero 와 같은 결 ── */
body.portal-page .hero{padding:52px 0 56px;background:linear-gradient(180deg,var(--pg-surface),var(--pg-soft));border:0}
body.portal-page .hero-inner{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,4vw,64px);align-items:center}
body.portal-page .hero h1{font-size:clamp(36px,4.2vw,56px);line-height:1.3;letter-spacing:-.07em;margin:0 0 22px}
body.portal-page .hero h1 span{color:var(--pg-primary)}
body.portal-page .eyebrow{font-size:11px;font-weight:650;letter-spacing:.15em;color:var(--pg-primary);text-transform:uppercase;display:inline-flex;align-items:center;gap:10px;margin:0 0 20px}
body.portal-page .eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--pg-accent);box-shadow:0 0 0 4px var(--color-primary-halo)}
body.portal-page .lead{font-size:16px;line-height:1.85;color:var(--pg-muted);max-width:46ch}
body.portal-page .answer-lede{font-size:14px;line-height:1.8;color:var(--pg-ink);border-left:3px solid var(--pg-accent);padding-left:14px;max-width:56ch}
body.portal-page .hero-aside{background:var(--pg-surface);border:1px solid var(--pg-line);border-radius:14px;padding:24px 26px;box-shadow:0 18px 40px var(--color-shadow-soft)}
body.portal-page .hero-aside h2{font-size:11px;letter-spacing:.15em;color:var(--pg-muted);text-transform:uppercase;font-weight:650;margin-bottom:14px}
body.portal-page .stat-list li{border-bottom:1px solid var(--pg-line);padding:12px 0;gap:14px}
body.portal-page .stat-list .k{font-size:12px;color:var(--pg-muted)}
body.portal-page .stat-list .v{font-size:14px;color:var(--pg-ink);font-weight:700}

/* ── 버튼 — home.css 의 .p-button 과 같은 규격 ── */
body.portal-page .btn{min-height:48px;padding:13px 22px;border-radius:7px;font-size:13px;font-weight:650;gap:12px;border:1px solid transparent;transition:background .15s,border-color .15s,color .15s}
body.portal-page .btn-primary{background:var(--pg-primary);color:var(--color-on-primary)}
body.portal-page .btn-primary:hover{background:var(--pg-navy);color:var(--color-on-primary)}
body.portal-page .btn-ghost{background:var(--pg-surface);border-color:var(--pg-line);color:var(--pg-ink)}
body.portal-page .btn-ghost:hover{border-color:var(--pg-primary);color:var(--pg-primary);background:var(--pg-surface)}
body.portal-page .actions{gap:10px;margin-top:24px}
body.portal-page .p-button{text-decoration:none}

/* ── 현재 위치(breadcrumb) ── */
body.portal-page .breadcrumb{width:min(1232px,calc(100% - 96px));padding:14px 0 0;font-size:12px}
body.portal-page .breadcrumb a{color:var(--pg-muted)}

/* ── 직답 블록 ── */
body.portal-page .answer{font-size:15px;line-height:1.8;background:var(--pg-canvas);border-left:3px solid var(--pg-primary);border-radius:0 10px 10px 0;padding:16px 20px;max-width:76ch;margin-bottom:24px}

/* ── 카드 그리드 — p-shop-card 와 같은 규격 ── */
body.portal-page .feature-grid{gap:16px;margin-top:24px}
body.portal-page .feature-card{border:1px solid var(--pg-line);border-radius:10px;padding:24px;background:var(--pg-surface);transition:border-color .12s}
body.portal-page .feature-card:hover{border-color:var(--pg-primary)}
body.portal-page .feature-card h3{font-size:17px;margin:12px 0 8px}
body.portal-page .feature-card p{font-size:13px;line-height:1.75;color:var(--pg-muted)}
body.portal-page .tag{border:1px solid var(--pg-line);background:var(--pg-canvas);color:var(--pg-primary);font-size:10px;letter-spacing:0;border-radius:4px;padding:3px 8px;margin:0;font-weight:650}

/* ── 단계 목록 ── */
body.portal-page .steps{gap:12px;margin-top:24px}
body.portal-page .steps li{border:1px solid var(--pg-line);border-radius:12px;padding:20px 22px;background:var(--pg-surface);gap:16px}
body.portal-page .step-no{display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;border-radius:8px;background:var(--pg-primary);color:var(--color-on-primary);font-size:11px;font-weight:700;letter-spacing:0;padding:0}
body.portal-page .steps h3{font-size:16px;margin-bottom:4px}
body.portal-page .steps p{font-size:13.5px;line-height:1.75;color:var(--pg-muted)}

/* ── 링크 카드 ── */
body.portal-page .link-cards{gap:14px;margin-top:22px}
body.portal-page .link-cards a{border:1px solid var(--pg-line);border-radius:10px;padding:22px;background:var(--pg-surface);transition:border-color .12s}
body.portal-page .link-cards a:hover{border-color:var(--pg-primary);box-shadow:none}
body.portal-page .link-cards h3{font-size:17px;margin-bottom:8px}
body.portal-page .link-cards p{font-size:13px;line-height:1.75;color:var(--pg-muted)}
body.portal-page .link-cards .more{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:650;color:var(--pg-primary)}
body.portal-page .link-cards .more .p-icon{width:15px;height:15px}

/* ── 표 ── */
body.portal-page .table-scroll{border:1px solid var(--pg-line);border-radius:12px;margin:20px 0}
body.portal-page table{font-size:13.5px;min-width:520px}
body.portal-page caption{font-size:12px;color:var(--pg-muted);padding:12px 18px;border-bottom:1px solid var(--pg-line)}
body.portal-page th,body.portal-page td{padding:12px 18px;border-bottom:1px solid var(--pg-line);line-height:1.65}
body.portal-page thead th{background:var(--pg-canvas);font-size:12px;color:var(--pg-muted);letter-spacing:0}
body.portal-page tbody th{color:var(--pg-ink)}

/* ── 자주 묻는 질문 — p-faq-list 와 같은 아코디언 ── */
body.portal-page .faq-section{background:var(--pg-canvas);padding:72px 0}
body.portal-page .faq-list{gap:0;margin-top:20px;border-top:1px solid var(--pg-line)}
body.portal-page .faq-list details{background:transparent;border:0;border-bottom:1px solid var(--pg-line);border-radius:0;padding:0}
body.portal-page .faq-list summary{padding:20px 0;gap:18px}
body.portal-page .faq-list summary h3{font-size:14px;font-weight:550;letter-spacing:-.02em}
body.portal-page .faq-list summary::after{font-size:20px;color:var(--pg-muted)}
body.portal-page .faq-answer{border-top:0;padding:0 0 22px;font-size:13.5px;line-height:1.85;color:var(--pg-muted);max-width:76ch}

/* ── 요금 카드 ── */
body.portal-page .plan{border:1px solid var(--pg-primary);border-radius:16px;padding:clamp(24px,3.5vw,34px);box-shadow:0 18px 40px var(--color-shadow-soft);max-width:640px}
body.portal-page .plan .price strong{color:var(--pg-ink);font-size:clamp(34px,5vw,46px);letter-spacing:-.05em}
body.portal-page .plan .price s{font-size:16px;color:var(--pg-muted)}
body.portal-page .plan .daily{color:var(--pg-primary)}
body.portal-page .plan ul li{font-size:13.5px;color:var(--pg-ink)}
body.portal-page .plan ul li::before{border-color:var(--pg-primary)}

/* ── 마지막 행동 띠 ── */
body.portal-page .cta-band{background:var(--pg-navy);padding:72px 0;border-radius:0}
body.portal-page .cta-band h2{color:var(--color-on-primary)}
body.portal-page .cta-band p{color:var(--color-on-primary-muted);font-size:14px}
body.portal-page .cta-band .btn-ghost{background:transparent;color:var(--color-on-primary);border-color:var(--color-divider-dark)}
body.portal-page .cta-band .btn-ghost:hover{border-color:var(--color-on-primary);color:var(--color-on-primary)}

/* ── 본문형(가이드) ── */
body.portal-page .prose{max-width:76ch;font-size:15px}
body.portal-page .prose h2{font-size:24px;margin-top:2em}
body.portal-page .prose h3{font-size:18px}
body.portal-page .meta-line{font-size:12px;color:var(--pg-muted)}
body.portal-page .source-box{background:var(--pg-soft);border:1px solid var(--pg-line);border-radius:12px}
body.portal-page .source-box h2{font-size:14px;color:var(--pg-ink)}
body.portal-page .source-box p,body.portal-page .source-box li{font-size:13px}

/* ── 페이지 전용 위젯(계산기·필터·바로가기) ── */
body.portal-page .pg-widget{border:1px solid var(--pg-line);border-radius:20px;background:var(--pg-canvas);padding:clamp(22px,3.5vw,36px);display:grid;gap:22px}
body.portal-page .pg-widget-head h2{margin-bottom:8px}
body.portal-page .pg-widget-head p{font-size:14px;line-height:1.8;color:var(--pg-muted);max-width:60ch;margin:0}
body.portal-page .pg-widget-head .p-eyebrow{margin-bottom:14px!important}
body.portal-page .pg-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;align-items:end}
body.portal-page .pg-form label{display:grid;gap:8px;font-size:12px;font-weight:650;color:var(--pg-ink)}
body.portal-page .pg-form input,body.portal-page .pg-form select{width:100%;min-height:48px;border:1px solid var(--pg-line);border-radius:7px;padding:10px 14px;font:inherit;font-size:15px;background:var(--pg-surface);color:var(--pg-ink)}
body.portal-page .pg-form input:focus-visible,body.portal-page .pg-form select:focus-visible{outline:3px solid var(--pg-accent);outline-offset:1px}
body.portal-page .pg-form small{font-weight:500;color:var(--pg-muted);font-size:11px}
body.portal-page .pg-form .p-button{width:100%}
body.portal-page .pg-result{border:1px solid var(--pg-line);border-radius:14px;background:var(--pg-surface);padding:22px 24px;display:grid;gap:10px}
body.portal-page .pg-result[hidden]{display:none}
body.portal-page .pg-result-title{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:800;margin:0;letter-spacing:-.04em}
body.portal-page .pg-result-title .p-chip{font-size:11px}
body.portal-page .pg-result ul{margin:0;padding-left:1.1em;font-size:13.5px;line-height:1.8;color:var(--pg-muted)}
body.portal-page .pg-result .p-small{margin-top:4px!important}
body.portal-page .pg-result-actions{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-top:6px}
body.portal-page .pg-note{font-size:12px;line-height:1.75;color:var(--pg-muted);margin:0}
body.portal-page .pg-meter{height:8px;border-radius:999px;background:var(--pg-line);overflow:hidden}
body.portal-page .pg-meter>span{display:block;height:100%;background:var(--pg-primary);width:var(--pg-meter,0%);transition:width .2s}
body.portal-page .pg-result.is-due .pg-meter>span{background:var(--color-warning-border)}
body.portal-page .pg-result.is-due .pg-result-title{color:var(--color-warning-text)}
body.portal-page .pg-chips{display:flex;flex-wrap:wrap;gap:8px}
body.portal-page .pg-chips button{border:1px solid var(--pg-line);background:var(--pg-surface);padding:10px 18px;min-height:44px;border-radius:999px;color:var(--pg-ink);font:inherit;font-size:13px;font-weight:650;cursor:pointer}
body.portal-page .pg-chips button[aria-pressed=true]{background:var(--pg-primary);border-color:var(--pg-primary);color:var(--color-on-primary)}
body.portal-page .pg-search{display:flex;gap:10px;align-items:center;border:1px solid var(--pg-line);border-radius:7px;background:var(--pg-surface);padding:0 14px;min-height:52px}
body.portal-page .pg-search .p-icon{width:18px;height:18px;color:var(--pg-muted);flex:0 0 auto}
body.portal-page .pg-search input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:15px;min-height:50px;color:var(--pg-ink)}
body.portal-page .pg-search input:focus-visible{outline:none}
body.portal-page .pg-search:focus-within{border-color:var(--pg-primary);box-shadow:0 0 0 3px var(--color-primary-halo)}
body.portal-page .pg-count{font-size:12px;color:var(--pg-muted);margin:0}
body.portal-page .pg-tasks{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:22px}
body.portal-page .pg-tasks a{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:14px;border:1px solid var(--pg-line);border-radius:12px;padding:16px 18px;background:var(--pg-surface);color:var(--pg-ink);text-decoration:none;transition:border-color .12s}
body.portal-page .pg-tasks a:hover{border-color:var(--pg-primary)}
body.portal-page .pg-tasks a>span:first-child{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;background:var(--pg-soft);color:var(--pg-primary)}
body.portal-page .pg-tasks strong{display:block;font-size:15px;letter-spacing:-.03em}
body.portal-page .pg-tasks small{display:block;font-size:12px;color:var(--pg-muted);margin-top:2px}
body.portal-page .pg-tasks .p-icon{width:18px;height:18px;color:var(--pg-primary)}
body.portal-page .pg-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:8px}
body.portal-page .pg-section-heading h2{margin-bottom:8px}
body.portal-page .pg-section-heading p{font-size:14px;color:var(--pg-muted);margin:0}
body.portal-page .pg-contact{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;border:1px solid var(--pg-line);border-radius:16px;padding:26px 28px;background:var(--pg-surface)}
body.portal-page .pg-contact h2{font-size:22px;margin-bottom:6px}
body.portal-page .pg-contact p{font-size:13.5px;color:var(--pg-muted);margin:0}
body.portal-page .pg-contact div:last-child{display:flex;flex-wrap:wrap;gap:10px}
body.portal-page .pg-quiet{display:none}
body.portal-page .faq-list details.is-hidden{display:none}

/* 공용 푸터: 링크가 15개라 좁은 화면에서 줄바꿈해야 가로 넘침이 없다(홈 포함 모든 포털 페이지). */
body.portal-home .p-footer-top nav{flex-wrap:wrap;row-gap:6px}

/* 홈 조각을 하위 페이지에 쓸 때 위아래 간격만 페이지 리듬에 맞춘다. */
body.portal-page .p-product{padding:0 0 24px}
body.portal-page .p-start-business{margin-top:0}
body.portal-page .p-shop-showcase{padding:64px 0}
body.portal-page .p-estimate-experience{padding-block:0}
body.portal-page .ex-rider{padding:0}
body.portal-page .p-app-proof{padding:72px 0}
body.portal-page .p-audiences{padding:0 0 72px}
body.portal-page .p-final{padding:72px 0}
body.portal-page .p-proof-details>summary{width:min(1232px,calc(100% - 96px))}

@media(max-width:900px){body.portal-page .hero-inner{grid-template-columns:1fr}body.portal-page .pg-contact{grid-template-columns:1fr}body.portal-page .pg-section-heading{display:block}}
@media(max-width:600px){body.portal-page .wrap,body.portal-page .breadcrumb,body.portal-page .p-proof-details>summary{width:calc(100% - 40px)}body.portal-page .section,body.portal-page .faq-section,body.portal-page .cta-band{padding:52px 0}body.portal-page .hero{padding:28px 0 40px}body.portal-page .hero h1{font-size:clamp(30px,8.5vw,40px);letter-spacing:-.06em}body.portal-page .lead{font-size:14px}body.portal-page h2{font-size:26px}body.portal-page .hero-aside{padding:20px}body.portal-page .pg-widget{padding:20px 16px;border-radius:14px}body.portal-page .pg-form{grid-template-columns:1fr}body.portal-page .pg-tasks{grid-template-columns:1fr}body.portal-page .pg-contact{padding:20px}body.portal-page .steps li{padding:16px}body.portal-page table{min-width:460px}}
@media(prefers-reduced-motion:reduce){body.portal-page .pg-meter>span,body.portal-page .btn,body.portal-page .feature-card,body.portal-page .link-cards a{transition:none}}