/* Internal page title only. Load after the existing page CSS.
   Shared navigation offset belongs to the existing main, not this component.
   (ChatGPT ph5 package, 2026-09-28 — applied by Claude without design changes) */
.ph5 {
  --ph5-navy: #16244a;
  --ph5-purple: #7c5cf0;
  --ph5-blue: #2f6bff;
  --ph5-gold-start: #ffd84d;
  --ph5-gold-end: #f6b414;
  --ph5-muted: #52617d;
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0 0 16px;
  padding: 0;
  color: var(--ph5-navy);
  background: linear-gradient(180deg, #bfe7ff 0%, #edf8ff 65%, #fff 100%);
  font-family: "Noto Sans KR", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  text-align: start;
  overflow-wrap: anywhere;
  word-break: normal;
  -webkit-text-size-adjust: 100%;
  isolation: isolate;
}
.ph5 *, .ph5 *::before, .ph5 *::after { box-sizing: border-box; }
.ph5 .ph5-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding: 18px 20px 20px;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.ph5 .ph5-copy { min-width: 0; }
.ph5 .ph5-badge {
  display: inline-block;
  max-width: 100%;
  margin: 0 0 8px;
  padding: 3px 9px;
  border: 1px solid #c4e1f6;
  border-radius: 999px;
  background: #e9f6ff;
  color: #245778;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
}
/* Only badge colors differ between the two variants. */
.ph5.ph5-paid .ph5-badge { background: #eee8ff; border-color: #d9cdfb; color: #5c3ba6; }
.ph5 .ph5-title-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ph5 .ph5-icon { display: block; flex: 0 0 44px; width: 44px; height: 44px; margin: 0; object-fit: contain; }
.ph5 .ph5-title {
  min-width: 0;
  margin: 0;
  padding: 0;
  color: var(--ph5-navy);
  font-family: inherit;
  font-size: clamp(26px, 7.2vw, 30px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.035em;
  text-wrap: pretty;
}
.ph5 .ph5-sub {
  max-width: 65ch;
  margin: 8px 0 0;
  padding: 0;
  color: var(--ph5-muted);
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
}
.ph5:lang(ko) .ph5-title, .ph5:lang(ko) .ph5-sub { word-break: keep-all; overflow-wrap: anywhere; }
/* Optional decorative mascot: above the copy on mobile, right on desktop. */
.ph5 .ph5-pig { display: none; }
.ph5.ph5-has-pig .ph5-pig {
  display: block;
  grid-row: 1;
  justify-self: start;
  width: 64px;
  height: 64px;
  margin: 0;
  object-fit: contain;
}
.ph5.ph5-has-pig .ph5-copy { grid-row: 2; }
@media (min-width: 768px) {
  .ph5 .ph5-inner { padding-top: 24px; padding-bottom: 24px; }
  .ph5 .ph5-title { font-size: 34px; }
  .ph5 .ph5-sub { font-size: 15px; }
  .ph5.ph5-has-pig .ph5-inner { grid-template-columns: minmax(0, 1fr) 144px; align-items: center; gap: 32px; }
  .ph5.ph5-has-pig .ph5-copy { grid-row: 1; grid-column: 1; }
  .ph5.ph5-has-pig .ph5-pig { grid-row: 1; grid-column: 2; justify-self: end; width: 144px; height: 144px; }
}
@media (forced-colors: active) {
  .ph5 .ph5-badge { border: 1px solid CanvasText; }
}