.pg-main .breadcrumb { color: var(--color-text-sub); font-size: var(--font-size-xs); padding-block: var(--space-2); }
.pg-main .breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.pg-main .breadcrumb li { display: flex; align-items: center; gap: var(--space-2); }
.pg-main .breadcrumb a { display: flex; align-items: center; min-height: var(--control-height); }

.pg-hero { display: grid; gap: var(--space-5); padding-block: var(--space-4) var(--space-6); }
.pg-hero-media { overflow: hidden; border-radius: var(--radius-image); background: var(--image-bg); }
.pg-hero-media img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 0; }
.pg-hero-copy { align-self: center; }
.pg-eyebrow, .pg-kicker { color: var(--color-link); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); letter-spacing: .06em; }
.pg-hero h1 { margin-top: var(--space-2); font-size: var(--hero-font-sp); letter-spacing: -.035em; }
.pg-hero-copy > p:not(.pg-eyebrow) { margin-top: var(--space-3); color: var(--color-text-sub); }
.pg-hero-copy .pg-lead { color: var(--color-text); font-size: var(--font-size-md); }
.pg-hero .pg-date { font-size: var(--font-size-sm); }

.pg-content { padding-bottom: var(--space-9); }
.pg-summary { display: grid; gap: var(--space-4); margin-top: var(--space-5); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--color-surface-warm); }
.pg-summary h2 { display: flex; gap: var(--space-3); align-items: center; font-size: var(--font-size-lg); }
.pg-summary h2 img { width: 40px; height: 40px; object-fit: contain; }
.pg-summary ul { display: grid; gap: var(--space-3); }
.pg-summary li { display: flex; align-items: baseline; gap: var(--space-2); font-size: var(--font-size-sm); }
.pg-summary li::before { content: '✓'; width: 20px; flex-shrink: 0; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-on-accent); line-height: 20px; text-align: center; }

.pg-conclusion { display: grid; gap: var(--space-5); margin-top: var(--space-section-small); padding: var(--space-5); border: var(--border-default); border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--color-bg), var(--color-surface-warm)); }
.pg-conclusion h2, .pg-final h2 { margin-top: var(--space-2); font-size: var(--font-size-xl); }
.pg-conclusion p:not(.pg-kicker), .pg-final > p:not(.pg-kicker) { margin-top: var(--space-3); color: var(--color-text-sub); }
.pg-size-summary { display: grid; gap: var(--space-2); align-content: center; padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-surface); text-align: center; }
.pg-size-summary div { display: grid; gap: var(--space-1); }
.pg-size-summary span, .pg-size-summary small { color: var(--color-text-sub); font-size: var(--font-size-sm); }
.pg-size-summary strong { color: var(--color-link); font-size: var(--font-size-lg); }
.pg-size-arrow { color: var(--color-accent); font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); }

.pg-section { margin-top: var(--space-section-small); }
.pg-section-heading { display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center; margin-bottom: var(--space-4); }
.pg-section-heading h2, .pg-section-heading h3 { position: relative; padding-bottom: var(--space-3); font-size: var(--font-size-xl); }
.pg-section-heading h2::after, .pg-section-heading h3::after { content: ''; position: absolute; left: 0; bottom: 0; width: var(--section-rule-width); height: 3px; background: var(--color-accent); }
.pg-section-heading > p { color: var(--color-text-sub); font-size: var(--font-size-sm); }
.pg-grid-four { display: grid; gap: var(--space-4); }
.pg-card { min-width: 0; padding: var(--space-4); border: var(--border-default); border-radius: var(--radius-md); background: var(--color-bg); }
.pg-card h3, .pg-card h4 { font-size: var(--font-size-md); }
.pg-card p { margin-top: var(--space-2); color: var(--color-text-sub); font-size: var(--font-size-sm); }
.pg-supply { display: grid; grid-template-columns: 76px minmax(0,1fr); gap: var(--space-3); align-items: start; }
.pg-supply > img { width: 76px; height: 88px; border-radius: var(--radius-sm); object-fit: contain; background: var(--color-surface-warm); }

.pg-flow-list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.pg-flow-list li { position: relative; padding: var(--space-4); border: var(--border-default); border-radius: var(--radius-md); background: var(--color-bg); }
.pg-flow-number { color: var(--color-accent); font-weight: var(--font-weight-bold); }
.pg-flow-list h3 { margin-top: var(--space-2); font-size: var(--font-size-md); }
.pg-flow-list p { margin-top: var(--space-2); color: var(--color-text-sub); font-size: var(--font-size-sm); }

.pg-step-section { padding-top: var(--space-2); }
.pg-step-section > p { margin-top: var(--space-3); color: var(--color-text-sub); }
.pg-step-heading { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-bottom: var(--space-4); }
.pg-step-heading > span { display: inline-flex; align-items: center; min-height: 30px; padding-inline: var(--space-3); border-radius: var(--radius-label); background: var(--color-accent); color: var(--color-on-accent); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); }
.pg-step-heading h2 { font-size: var(--font-size-xl); }
.pg-source-grid { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
.pg-source-grid figure, .pg-phone-figure, .pg-info-shot, .pg-finished-main { margin: 0; }
.pg-source-grid img { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius-image); object-fit: cover; }
.pg-source-grid figure:nth-child(1) img { object-position: 50% 42%; }
.pg-source-grid figure:nth-child(3) img { object-position: 50% 43%; }
figcaption { margin-top: var(--space-2); color: var(--color-text-sub); font-size: var(--font-size-xs); }
.pg-footnote { margin-top: var(--space-3); color: var(--color-text-sub); font-size: var(--font-size-sm); }

.pg-generation-layout { display: grid; gap: var(--space-5); }
.pg-generation-layout p + p, .pg-master p + p, .pg-upload-layout p + p { margin-top: var(--space-3); }
.pg-generation-layout p, .pg-master p, .pg-upload-layout p { color: var(--color-text-sub); }
.pg-generation-copy { align-self: start; }
.pg-checker-image { display: grid; place-items: center; padding: var(--space-4); border-radius: var(--radius-image); background-color: #f2f2f2; background-image: linear-gradient(45deg,#ddd 25%,transparent 25%),linear-gradient(-45deg,#ddd 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ddd 75%),linear-gradient(-45deg,transparent 75%,#ddd 75%); background-size: 24px 24px; background-position: 0 0,0 12px,12px -12px,-12px 0; }
.pg-checker-image img { width: 100%; max-height: 580px; object-fit: contain; }
.pg-info-shot { width: min(100%, 260px); margin-top: var(--space-4); }
.pg-info-shot img { width: 100%; border: var(--border-default); border-radius: var(--radius-md); }

.pg-key-step { padding: var(--space-5); border-radius: var(--radius-lg); background: var(--color-surface-warm); }
.pg-key-lead { color: var(--color-text); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); }
.pg-edit-layout { display: grid; gap: var(--space-5); margin-top: var(--space-5); }
.pg-phone-figure { text-align: center; }
.pg-phone-figure img { width: min(100%, 320px); border: var(--border-default); border-radius: var(--radius-md); background: var(--color-bg); }
.pg-operation-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.pg-operation-list li { display: grid; grid-template-columns: 32px minmax(0,1fr); gap: var(--space-3); align-items: center; padding: var(--space-3); border-radius: var(--radius-sm); background: var(--color-bg); }
.pg-operation-list li > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-on-accent); font-weight: var(--font-weight-bold); }
.pg-phone-pair { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
.pg-master { display: grid; gap: var(--space-5); margin-top: var(--space-6); padding: var(--space-5); border: var(--border-default); border-radius: var(--radius-lg); background: var(--color-bg); }
.pg-master h3 { margin-top: var(--space-2); font-size: var(--font-size-lg); }
.pg-master-copy { align-self: start; }
.pg-trouble { margin-top: var(--space-6); }
.pg-trouble > p { color: var(--color-text-sub); }
.pg-problem-grid { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.pg-note { margin-top: var(--space-5); padding: var(--space-5); border-left: 5px solid var(--color-accent); border-radius: var(--radius-md); background: var(--color-bg); }
.pg-note h3 { font-size: var(--font-size-lg); }
.pg-note > p { margin-top: var(--space-3); color: var(--color-text-sub); }
code { overflow-wrap: anywhere; color: var(--color-link); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }

.pg-upload-layout { display: grid; gap: var(--space-5); align-items: center; }
.pg-related-cta { display: grid; gap: var(--space-4); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--color-surface-warm); }
.pg-related-cta h3 { font-size: var(--font-size-lg); }
.pg-related-cta p { margin-top: var(--space-2); color: var(--color-text-sub); }
.pg-related-cta a { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); min-height: var(--control-height); padding: var(--space-3) var(--space-4); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-on-accent); font-weight: var(--font-weight-bold); }

.pg-finished-main { margin-top: var(--space-4); }
.pg-finished-main img { width: 100%; border-radius: var(--radius-image); }
.pg-finished-layout { display: grid; gap: var(--space-5); }
.pg-finished-side p { color: var(--color-text-sub); }
.pg-finished-side p + p { margin-top: var(--space-3); }
.pg-finished-summary { margin-top: var(--space-5); padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-warm); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); }
.pg-finished-summary p { color: var(--color-text); }

.pg-final { margin-block: var(--space-section-small) var(--space-6); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--color-surface-warm); }
.pg-final-actions { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.pg-button { display: flex; justify-content: center; align-items: center; gap: var(--space-3); min-height: 52px; padding: var(--space-3) var(--space-5); border-radius: var(--radius-pill); font-weight: var(--font-weight-bold); text-align: center; }
.pg-button-primary { background: var(--color-accent); color: var(--color-on-accent); }
.pg-button-secondary { border: 1px solid var(--color-accent); color: var(--color-link); background: var(--color-bg); }

@media (min-width: 768px) {
  .pg-main .breadcrumb { padding-block: 0; }
  .pg-hero { grid-template-columns: minmax(0,.9fr) minmax(360px,1.1fr); align-items: stretch; padding-block: var(--space-5) var(--space-7); }
  .pg-hero-media { grid-column: 2; grid-row: 1; min-height: 520px; }
  .pg-hero-media img { aspect-ratio: auto; object-position: 50% 48%; }
  .pg-hero-copy { grid-column: 1; grid-row: 1; }
  .pg-hero h1 { font-size: var(--hero-font-tablet); }
  .pg-summary { grid-template-columns: 260px minmax(0,1fr); align-items: center; }
  .pg-summary ul { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .pg-conclusion { grid-template-columns: minmax(0,1.3fr) minmax(280px,.7fr); align-items: center; }
  .pg-grid-four { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .pg-flow-list { grid-template-columns: repeat(5,minmax(0,1fr)); }
  .pg-flow-list li:not(:last-child)::after { content: '›'; position: absolute; top: 48%; right: calc(var(--space-3) * -1); z-index: 1; color: var(--color-accent); font-size: var(--font-size-xl); }
  .pg-source-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .pg-phone-pair { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .pg-problem-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .pg-final-actions { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (min-width: 1024px) {
  .pg-hero { align-items: center; }
  .pg-hero-media { align-self: center; height: 408px; min-height: 0; }
  .pg-hero-media img { width: 100%; height: auto; aspect-ratio: auto; object-fit: fill; object-position: top; }
  .pg-hero h1 { font-size: var(--hero-font-desktop-small); }
  .pg-section, .pg-conclusion, .pg-final { margin-top: var(--space-section); }
  .pg-grid-four { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .pg-supply { grid-template-columns: 60px minmax(0,1fr); }
  .pg-supply > img { width: 60px; height: 72px; }
  .pg-step-section { padding-top: var(--space-4); }
  .pg-source-grid { width: 80%; margin-inline: auto; }
  .pg-generation-layout, .pg-master { grid-template-columns: minmax(0,3fr) minmax(0,2fr) minmax(0,5fr); align-items: start; }
  .pg-generation-layout .pg-checker-image, .pg-master .pg-checker-image { aspect-ratio: 1; }
  .pg-generation-layout .pg-checker-image img, .pg-master .pg-checker-image img { max-height: none; }
  .pg-generation-layout .pg-info-shot, .pg-master .pg-info-shot { width: 80%; margin-top: 0; justify-self: center; }
  .pg-edit-layout { grid-template-columns: repeat(3,minmax(0,1fr)) minmax(260px,1.5fr); align-items: start; gap: var(--space-4); }
  .pg-edit-layout > .pg-phone-figure-main { grid-column: 1; grid-row: 1; }
  .pg-edit-layout > .pg-operation-list { grid-column: 4; grid-row: 1; }
  .pg-edit-layout > .pg-phone-pair { display: contents; }
  .pg-edit-layout .pg-phone-figure img { width: 100%; max-width: none; }
  .pg-upload-layout { grid-template-columns: minmax(0,42fr) minmax(0,58fr); align-items: start; }
  .pg-upload-layout > .pg-phone-figure { grid-column: 1; grid-row: 1 / span 2; width: 80%; justify-self: center; }
  .pg-upload-layout > .pg-phone-figure img { width: 80%; max-width: 256px; }
  .pg-upload-layout > .pg-upload-copy { grid-column: 2; grid-row: 1; }
  .pg-upload-layout > .pg-related-cta { grid-column: 2; grid-row: 2; }
  .pg-upload-layout > .pg-related-cta { grid-template-columns: 1fr; align-items: start; }
  .pg-finished-layout { grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; }
  .pg-finished-main { margin-top: 0; }
}

@media (min-width: 1280px) {
  .pg-hero h1 { font-size: var(--hero-font-pc); }
}

@media (max-width: 419px) {
  .pg-hero h1 br { display: none; }
  .pg-step-heading { align-items: flex-start; }
  .pg-step-heading h2 { width: 100%; }
  .pg-key-step { margin-inline: calc(-1 * var(--page-padding-sp)); padding-inline: var(--page-padding-sp); border-radius: 0; }
}