/* 관상 기능. 기존 화면의 색과 글자 위계는 유지하고 관상 전용 UI만 정의합니다. */

/* ---------- 홈·사주 화면 진입 카드 ---------- */
.physiognomy-entry-card {
  position:relative; display:block; width:100%; margin:14px 0; padding:14px 16px;
  appearance:none; -webkit-appearance:none; box-sizing:border-box; border:1px solid rgba(222,218,241,.78);
  border-radius:20px; background:#fff; color:inherit; font:inherit; text-align:left; cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.018),0 4px 12px rgba(0,0,0,.035);
  -webkit-tap-highlight-color:transparent; outline:none;
}
.physiognomy-entry-card:focus-visible { outline:2px solid rgba(94,92,230,.72); outline-offset:2px; }
.physiognomy-entry-card:active { background:#faf9ff; transform:scale(.997); }
.pec-main {
  display:flex; align-items:center; gap:12px; width:min(430px,calc(100% - 28px)); margin:0 auto;
}
.pec-icon {
  flex:0 0 42px; width:42px; height:42px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg,#f0eeff,#fff3f7); border:1px solid rgba(219,213,247,.72);
}
.pec-icon img { width:31px; height:31px; display:block; pointer-events:none; }
.pec-copy { flex:1; min-width:0; }
.pec-title { font-size:13.5px; font-weight:800; color:#1d1d1f; }
.pec-desc { margin-top:3px; font-size:11.5px; color:#85858b; word-break:keep-all; }
/* 사주 인트로 카드의 solo-intro-benefits와 같은 태그 스타일. 관상 버튼이 사주 분석하기 버튼
   아래(박스 밖)로 옮겨지면서, 사주 카드와 같은 톤의 태그를 붙여 "이것도 믿을 만한 기능"이라는
   신뢰를 주는 동시에 시각적 통일감을 줌 */
.pec-tags { display:flex; flex-wrap:wrap; gap:2px; margin-top:7px; }
.pec-tags span { padding:3px 6px; border-radius:999px; background:#f4f2ff; color:#5e5ce6; font-size:9.5px; font-weight:700; white-space:nowrap; }
.pec-chevron {
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  font-size:18px; color:#b5b5bc; font-weight:700;
}

/* 홈의 다른 카드에만 적용되던 모바일 바깥 여백을 관상 진입 카드에도 같은 값으로 맞춥니다. */
@media (max-width:480px) {
  #home-content > .physiognomy-entry-card {
    width:calc(100% - (2 * clamp(10px,3.2vw,14px)));
    margin-left:clamp(10px,3.2vw,14px); margin-right:clamp(10px,3.2vw,14px);
  }
}

/* ---------- 관상 입력 화면 ---------- */
#screen-physiognomy { position:relative; overflow-anchor:none; }
.pgn-back-btn {
  display:inline-flex; align-items:center; margin:0 0 10px; padding:6px 4px; border:0; background:none;
  color:#5e5ce6; font-size:13px; font-weight:700; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.pgn-intro { padding:2px 8px 20px; margin-bottom:16px; }
.pgn-brand-mark {
  position:relative; width:76px; height:76px; margin:0 auto 6px; overflow:visible;
  display:flex; align-items:center; justify-content:center;
}
.pgn-brand-mark::before { content:none; }
.pgn-brand-mark img { position:relative; width:64px; height:64px; display:block; z-index:1; opacity:.76; filter:saturate(.72); }
.pgn-brand-scan {
  position:absolute; left:12px; right:12px; top:13px; height:3px; border-radius:999px; opacity:0; z-index:2;
  background:linear-gradient(90deg,transparent 2%,rgba(255,255,255,.96) 30%,#f4b740 50%,rgba(255,255,255,.96) 70%,transparent 98%);
  box-shadow:0 0 6px rgba(244,183,64,.88),0 0 14px rgba(232,77,126,.28);
  animation:pgnBrandScan 5.2s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes pgnBrandScan {
  0% { transform:translateY(2px); opacity:0; }
  5% { opacity:.92; }
  27% { transform:translateY(48px); opacity:.88; }
  33%,100% { transform:translateY(48px); opacity:0; }
}
@keyframes pgnBrandGlow {
  0%,36%,100% { transform:scale(.92); opacity:.22; }
  16% { transform:scale(1.08); opacity:.56; }
}
.pgn-intro .solo-intro-kicker { margin-bottom:10px; }
.pgn-intro h2 { margin:0; color:#242428; background:none; -webkit-background-clip:border-box; -webkit-text-fill-color:currentColor; text-wrap:balance; }
.pgn-intro > p { max-width:500px; margin:12px auto 0; text-wrap:balance; word-break:keep-all; }
.pgn-upload-area { margin:18px 0 14px; }
.pgn-upload-placeholder {
  display:flex; flex-direction:column; align-items:center; gap:12px; padding:28px 20px;
  border:1px solid #e7e2f8; border-radius:18px; background:linear-gradient(145deg,#fbfaff,#fffafd); text-align:center;
}
.pgn-upload-icon { width:50px; height:50px; }
.pgn-upload-icon img { width:100%; height:100%; display:block; }
.pgn-upload-copy { display:flex; flex-direction:column; align-items:center; gap:4px; word-break:keep-all; }
.pgn-upload-copy strong { color:#2c2c2e; font-size:13.5px; font-weight:800; }
.pgn-upload-copy span { color:#86868b; font-size:11.5px; line-height:1.55; }
.pgn-photo-select-btn {
  min-width:126px; min-height:42px; padding:10px 20px; border:0; border-radius:13px;
  background:linear-gradient(135deg,#6658df,#e73d77); color:#fff; font:inherit; font-size:12.5px; font-weight:800;
  cursor:pointer; box-shadow:0 5px 14px -9px rgba(112,72,192,.68); -webkit-tap-highlight-color:transparent;
}
.pgn-photo-select-btn:active { transform:scale(.98); }
.pgn-preview { display:flex; flex-direction:column; align-items:center; }
.pgn-preview-portrait {
  --pgn-photo-width:clamp(232px,72vw,280px);
  position:relative; isolation:isolate; width:fit-content; padding:11px;
  display:flex; flex-direction:column; align-items:center;
}
.pgn-preview-glow {
  position:absolute; z-index:-2; inset:-15px -15px 34px; border-radius:32px;
  background:rgba(86,82,110,.055); filter:blur(14px);
}
.pgn-preview-frame {
  position:relative; width:var(--pgn-photo-width); aspect-ratio:3 / 4; box-sizing:border-box; overflow:hidden;
  display:flex; padding:6px; border:1px solid rgba(218,218,224,.96); border-radius:25px;
  background:#fff; box-shadow:0 16px 34px rgba(38,38,46,.11),0 3px 9px rgba(38,38,46,.055);
}
.pgn-preview-frame::before {
  content:""; position:absolute; inset:6px; border:1px solid rgba(203,178,246,.72); border-radius:19px; pointer-events:none; z-index:1;
  background:
    radial-gradient(circle at 0 0,rgba(165,137,246,.14),transparent 21%),
    radial-gradient(circle at 100% 0,rgba(242,174,105,.11),transparent 21%),
    radial-gradient(circle at 100% 100%,rgba(236,111,155,.13),transparent 21%),
    radial-gradient(circle at 0 100%,rgba(123,182,242,.1),transparent 21%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),inset 0 0 12px rgba(170,135,235,.08);
}
.pgn-preview-frame::after {
  content:""; position:absolute; z-index:3; left:11px; right:11px; top:9%; height:7px; box-sizing:border-box;
  border:1px solid rgba(239,224,255,.9); border-radius:999px;
  /* 색이 채워진 중심 바를 먼저 읽게 하고, 같은 색의 확산광이 바깥으로 위아래 퍼지게 합니다. */
  background:linear-gradient(90deg,
    rgba(139,111,224,.08) 0%,rgba(161,128,235,.82) 16%,rgba(194,161,247,.98) 34%,
    rgba(255,255,255,1) 47%,rgba(255,225,153,1) 50%,rgba(255,255,255,1) 53%,
    rgba(239,126,168,.96) 68%,rgba(223,91,145,.8) 84%,rgba(223,91,145,.08) 100%);
  background-size:160% 100%;
  box-shadow:
    0 0 3px 1px rgba(255,255,255,.78),
    0 -5px 12px 2px rgba(157,122,231,.3),0 5px 12px 2px rgba(236,111,155,.28),
    0 -13px 25px 5px rgba(157,122,231,.15),0 13px 25px 5px rgba(236,111,155,.14);
  opacity:0; pointer-events:none; transition:opacity .25s ease;
  will-change:transform,opacity,background-position; backface-visibility:hidden; transform:translate3d(0,0,0) scaleX(.97);
}
/* 한 주기 안에서 위에서 아래로 한 번, 아래에서 위로 한 번 이동해 스캔 방향이 분명하게 보입니다. */
.pgn-preview-frame.is-scanning { animation:pgnScanFrameAura 3.3s linear infinite; }
.pgn-preview-frame.is-scanning::before { animation:pgnScanInnerContour 1.45s ease-in-out infinite; }
.pgn-preview-frame.is-scanning::after { animation:pgnPhotoScan 3.3s cubic-bezier(.45,0,.32,1) infinite; }
@keyframes pgnPhotoScan {
  0% { opacity:.82; transform:translate3d(0,0,0) scaleX(.97); background-position:100% 0; }
  6%,44%,56%,94% { opacity:1; }
  48%,52% { opacity:.88; transform:translate3d(0,clamp(242px,75.6vw,294px),0) scaleX(.98); background-position:0 0; }
  100% { opacity:.82; transform:translate3d(0,0,0) scaleX(.97); background-position:100% 0; }
}
@keyframes pgnScanFrameAura {
  0%,100% {
    border-color:rgba(226,190,100,.82);
    box-shadow:0 16px 34px rgba(38,38,46,.11),0 3px 9px rgba(38,38,46,.055),0 0 0 1px rgba(226,190,100,.16),0 0 20px rgba(226,190,100,.14),inset 0 0 15px rgba(255,228,158,.08);
  }
  16%,84% {
    border-color:rgba(180,157,239,.84);
    box-shadow:0 16px 34px rgba(38,38,46,.11),0 3px 9px rgba(38,38,46,.055),0 0 0 2px rgba(170,142,239,.2),0 0 27px rgba(159,122,226,.2),inset 0 0 21px rgba(218,198,255,.13);
  }
  33%,67% {
    border-color:rgba(224,139,183,.82);
    box-shadow:0 16px 34px rgba(38,38,46,.11),0 3px 9px rgba(38,38,46,.055),0 0 0 1px rgba(224,139,183,.18),0 0 24px rgba(207,103,173,.19),inset 0 0 19px rgba(255,210,231,.12);
  }
  50% {
    border-color:rgba(239,202,109,.92);
    box-shadow:0 16px 34px rgba(38,38,46,.11),0 3px 9px rgba(38,38,46,.055),0 0 0 2px rgba(239,202,109,.21),0 0 31px rgba(226,180,81,.23),inset 0 0 24px rgba(255,230,165,.16);
  }
}
@keyframes pgnScanInnerContour {
  0%,100% { opacity:.78; border-color:rgba(190,165,239,.66); box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),inset 0 0 12px rgba(176,145,238,.08),0 0 5px rgba(176,145,238,.08); }
  50% { opacity:1; border-color:rgba(237,170,203,.86); box-shadow:inset 0 0 0 1px rgba(255,255,255,.62),inset 0 0 19px rgba(176,145,238,.15),0 0 14px rgba(236,111,155,.18); }
}
/* 스캔 문구가 1.4초마다 3단계(밝기·방향 확인 → 기준점 찾기 → 균형 살피기)로 바뀌는 것과 맞춰서,
   빛줄기 스캔(위)은 계속 그대로 돌아가는 채로, 그 위에 단계별 장식만 살짝 얹음(js/physiognomy.js의
   setScanStage 참고) */
/* 0단계: 밝기·방향 확인 — 뒤쪽 은은한 글로우가 한 번 부풀었다 가라앉으며 "노출을 살피는" 느낌 */
.pgn-preview-portrait.pgn-scan-stage-0 .pgn-preview-glow { animation:pgnScanGlowPulse 1.4s ease-in-out; }
@keyframes pgnScanGlowPulse {
  0%,100% { opacity:.6; transform:scale(1); }
  50% { opacity:1; transform:scale(1.09); }
}
/* 2단계: 균형 살피기 — 느리고 확신에 찬 느낌으로 테두리가 한 번 은은하게 빛나며 마무리하는 인상 */
.pgn-preview-frame.is-scanning.pgn-scan-stage-2::before { animation:pgnScanInnerContour 1.45s ease-in-out infinite,pgnScanBalancePulse 1.4s ease-in-out; }
@keyframes pgnScanBalancePulse {
  0%,100% { filter:brightness(1); }
  50% { filter:brightness(1.12); }
}
.pgn-preview img {
  width:100%; height:100%; display:block; object-fit:contain; border-radius:19px;
  background:#f2f2f4;
}
.pgn-preview-remove {
  position:static; z-index:4; min-height:36px; margin:10px auto 0; padding:0 14px; border:1px solid rgba(94,92,230,.2);
  border-radius:999px; background:#f7f6fc; color:#5e5ce6; font:inherit; font-size:11.5px; font-weight:750; cursor:pointer;
}
.pgn-privacy-note {
  margin:14px 0; padding:14px 18px; border-radius:14px; background:#f6f6f8; color:#6e6e73; word-break:keep-all;
}
.pgn-privacy-inner {
  width:fit-content; max-width:100%; margin:0 auto; display:grid; grid-template-columns:20px minmax(0,560px);
  align-items:center; gap:12px;
}
.pgn-privacy-inner svg {
  width:20px; height:20px; fill:none; stroke:#77727f; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}
.pgn-privacy-inner > div { min-width:0; display:flex; flex-direction:column; gap:3px; font-size:11.5px; line-height:1.48; text-align:left; }
.pgn-privacy-note strong { color:#3a3a3c; font-weight:750; text-wrap:balance; }
.pgn-privacy-note span { text-wrap:balance; }
.pgn-analyze-btn { margin-top:14px; }
.pgn-analyze-btn[hidden] { display:none !important; }
#pgn-analyze-btn:disabled { opacity:.45; cursor:not-allowed; }
#pgn-status {
  box-sizing:border-box; height:24px; min-height:24px; margin:8px 0 0;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis; line-height:24px;
  text-align:center; word-break:normal;
}

/* ---------- 관상 결과 ---------- */
#pgn-result-card { overflow:hidden; overflow-anchor:none; }
.pgn-result-header { text-align:center; }
.pgn-result-kicker { color:#5e5ce6; font-size:11px; font-weight:800; letter-spacing:.01em; }
.pgn-result-photo-frame {
  position:relative; width:clamp(232px,72vw,280px); aspect-ratio:3/4; margin:12px auto 18px;
  border:1px solid rgba(225,225,231,.92); border-radius:22px; overflow:hidden; background:#f5f5f7;
  box-shadow:0 8px 24px rgba(25,23,36,.09);
}
.pgn-result-photo-frame img { width:100%; height:100%; object-fit:contain; display:block; }
.pgn-photo-feature-marker { position:absolute; inset:0; z-index:2; pointer-events:none; }
.pgn-photo-feature-marker[hidden] { display:none !important; }
.pgn-photo-feature-point {
  position:absolute; left:var(--pgn-marker-x); top:var(--pgn-marker-y); width:11px; height:11px;
  transform:translate(-50%,-50%); border:3px solid rgba(255,255,255,.96); border-radius:50%; background:#6d63e8;
  box-shadow:0 0 0 1px rgba(77,65,173,.7),0 3px 9px rgba(37,30,92,.28);
}
.pgn-photo-feature-line {
  position:absolute; left:var(--pgn-line-left); top:var(--pgn-marker-y); width:var(--pgn-line-width); height:1.5px;
  transform:translateY(-50%); border-radius:999px; background:rgba(255,255,255,.96); box-shadow:0 1px 3px rgba(25,23,36,.32);
}
.pgn-photo-feature-name {
  position:absolute; left:var(--pgn-label-x); top:var(--pgn-marker-y); transform:translate(-50%,-50%); min-width:max-content;
  padding:7px 10px 7px 20px; border:1px solid rgba(228,228,233,.96); border-radius:999px; background:rgba(255,255,255,.94);
  color:#3f3f46; font-size:10px; line-height:1; font-weight:800; box-shadow:0 5px 14px rgba(25,23,36,.14); backdrop-filter:blur(7px);
}
.pgn-photo-feature-name::before { content:""; position:absolute; left:9px; top:50%; width:6px; height:6px; transform:translateY(-50%); border-radius:50%; background:#6d63e8; }
.pgn-photo-feature-marker.is-moving .pgn-photo-feature-point { animation:pgnFeaturePointIn .68s cubic-bezier(.2,.78,.25,1) both; }
.pgn-photo-feature-marker.is-moving .pgn-photo-feature-name { animation:pgnFeatureNameIn .42s ease-out .16s both; }
@keyframes pgnFeaturePointIn { 0% { opacity:0; transform:translate(-50%,-50%) scale(3); box-shadow:0 0 0 9px rgba(109,99,232,.24); } 65% { opacity:1; transform:translate(-50%,-50%) scale(.88); } 100% { opacity:1; transform:translate(-50%,-50%) scale(1); } }
@keyframes pgnFeatureNameIn { from { opacity:0; transform:translate(-50%,-50%) translateY(4px); } to { opacity:1; transform:translate(-50%,-50%) translateY(0); } }
.pgn-free-summary {
  max-width:680px; margin:0 auto; padding:18px 20px; border:1px solid rgba(225,221,243,.8); border-radius:20px;
  background:linear-gradient(145deg,#fbfaff,#fffafb); text-align:left;
  box-shadow:0 10px 28px rgba(43,38,67,.055),0 2px 7px rgba(43,38,67,.025);
}
.pgn-free-summary.is-loading { padding-top:17px; padding-bottom:18px; text-align:center; }
.pgn-free-summary.is-loading .pgn-summary-label,
.pgn-free-summary.is-loading #pgn-headline,
.pgn-free-summary.is-loading #pgn-impression { text-align:center; }
.pgn-free-summary.is-loading #pgn-headline { font-size:clamp(18px,3.6vw,22px); }
.pgn-free-summary.is-loading #pgn-impression { margin-top:8px; }
.pgn-summary-start { display:grid; grid-template-columns:5px minmax(0,1fr); align-items:center; gap:13px; }
.pgn-summary-start > div { min-width:0; }
.pgn-summary-label { margin-bottom:5px; color:#5e5ce6; font-size:11px; font-weight:800; }
.pgn-summary-rail {
  position:relative; width:5px; height:44px; overflow:hidden; border-radius:999px;
  background:linear-gradient(180deg,#665ee8 0%,#bd4fa7 52%,#ed5f82 100%);
  box-shadow:0 4px 12px rgba(111,83,210,.18);
}
.pgn-summary-rail i { position:absolute; inset:0; background:linear-gradient(180deg,transparent 0%,rgba(255,255,255,.9) 50%,transparent 100%); transform:translateY(-110%); animation:pgnRailLight 6.2s ease-in-out 1.2s infinite; }
@keyframes pgnRailLight { 0%,64%,100% { transform:translateY(-110%); } 76% { transform:translateY(110%); } }
#pgn-headline {
  margin:0; color:#1d1d1f; font-size:clamp(19px,4vw,23px); font-weight:850; letter-spacing:-.4px;
  line-height:1.28; word-break:keep-all; text-wrap:balance;
}
#pgn-impression { margin:9px 0 0; color:#55555b; font-size:13px; line-height:1.68; word-break:keep-all; }
.pgn-five-points { margin-top:17px; padding:15px; border-radius:17px; background:rgba(245,243,252,.72); }
.pgn-five-points[hidden] { display:none !important; }
.pgn-five-heading { display:flex; align-items:baseline; justify-content:flex-start; gap:12px; margin-bottom:12px; }
.pgn-five-heading h3 { margin:0; color:#2c2c2e; font-size:12.5px; font-weight:800; }
.pgn-five-heading p { margin:0; color:#929299; font-size:9.5px; line-height:1.4; text-align:left; word-break:keep-all; }
.pgn-feature-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
.pgn-feature-tile {
  position:relative; min-width:0; min-height:68px; padding:8px 5px 7px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; appearance:none; -webkit-appearance:none; border:1px solid transparent; border-radius:13px;
  background:transparent; color:inherit; font:inherit; text-align:center; cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.pgn-feature-tile[hidden] { display:none !important; }
.pgn-feature-tile:hover { background:rgba(255,255,255,.54); }
.pgn-feature-tile:focus-visible { outline:2px solid rgba(94,92,230,.62); outline-offset:2px; }
.pgn-feature-tile[aria-selected="true"] {
  border-color:rgba(211,204,244,.9); background:rgba(255,255,255,.94);
  box-shadow:0 4px 12px rgba(78,62,145,.07); transform:translateY(-1px);
}
.pgn-feature-icon {
  width:34px; height:34px; margin-bottom:5px; display:flex; align-items:center; justify-content:center;
  border:1px solid transparent; border-radius:11px;
  background:linear-gradient(145deg,rgba(240,237,255,.96),rgba(255,240,247,.9));
}
.pgn-feature-tile[aria-selected="true"] .pgn-feature-icon { border-color:rgba(221,214,248,.9); }
.pgn-feature-icon img { width:21px; height:21px; display:block; }
.pgn-feature-tile strong { color:#2c2c2e; font-size:10.5px; line-height:1.3; }
.pgn-feature-copy[hidden] { display:none !important; }
.pgn-feature-focus {
  width:min(100%,560px); min-height:0; margin:10px auto 0; padding:12px 14px; display:flex;
  flex-direction:column; align-items:stretch; gap:5px; border-radius:13px;
  background:rgba(255,255,255,.76); text-align:left;
}
.pgn-feature-focus strong { color:#5e5ce6; font-size:11.5px; line-height:1.42; word-break:keep-all; }
.pgn-feature-focus p { min-width:0; margin:0; color:#5f5f66; font-size:12px; line-height:1.62; word-break:keep-all; }
.pgn-feature-focus.is-changing { animation:pgnFocusIn .2s ease both; }
.pgn-five-points.is-loading .pgn-feature-focus p {
  width:min(82%,260px); height:7px; border-radius:999px; color:transparent;
  background:linear-gradient(90deg,#eceaf3 20%,#faf9fd 50%,#eceaf3 80%); background-size:220% 100%;
  animation:pgnSkeleton 1.8s ease-in-out infinite;
}
@keyframes pgnFocusIn { from { opacity:.35; } to { opacity:1; } }
.pgn-free-conclusion {
  margin-top:14px; padding:16px 17px; border:1px solid rgba(222,216,247,.82); border-radius:17px;
  background:linear-gradient(135deg,rgba(245,242,255,.9),rgba(255,244,249,.82));
}
.pgn-free-conclusion[hidden] { display:none !important; }
.pgn-free-conclusion-label { display:block; margin-bottom:5px; color:#5e5ce6; font-size:10.5px; font-weight:850; }
.pgn-free-conclusion h3 {
  margin:0; color:#26262a; font-size:15px; line-height:1.42; letter-spacing:-.2px; word-break:keep-all; text-wrap:balance;
}
.pgn-free-conclusion p { margin:8px 0 0; color:#57575e; font-size:12.5px; line-height:1.7; word-break:keep-all; }
.pgn-free-conclusion.is-loading h3 { color:#77727f; }
.pgn-free-conclusion.is-loading p {
  width:86%; height:8px; border-radius:999px;
  background:linear-gradient(90deg,#ebe8f5 20%,#faf9fd 50%,#ebe8f5 80%); background-size:220% 100%;
  animation:pgnSkeleton 1.8s ease-in-out infinite;
}
.pgn-impression-points {
  display:flex; flex-direction:column; margin-top:16px; padding:0 14px; border:1px solid rgba(229,225,244,.76);
  border-radius:17px; background:rgba(255,255,255,.7);
}
.pgn-impression-points[hidden] { display:none !important; }
.pgn-impression-point {
  min-width:0; padding:13px 0; display:grid; grid-template-columns:26px minmax(0,1fr);
  align-items:start; gap:10px; border-bottom:1px solid rgba(229,225,244,.7); background:transparent;
}
.pgn-impression-point:last-child { border-bottom:0; }
.pgn-impression-point[hidden] { display:none !important; }
.pgn-insight-index { padding-top:2px; color:#aaa5bc; font-size:9px; font-weight:800; letter-spacing:.05em; }
.pgn-insight-copy { min-width:0; display:block; }
.pgn-insight-heading { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 14px; }
.pgn-impression-point strong {
  display:block; margin:0; color:#2c2c2e; font-size:12px; line-height:1.48;
  text-align:left; word-break:keep-all; text-wrap:balance;
}
.pgn-point-highlight {
  display:block; max-width:100%; margin:0; padding:0; border-radius:0;
  background:transparent; color:#5e5ce6; font-size:11.5px; font-weight:800; line-height:1.42;
  text-align:left; word-break:keep-all;
}
.pgn-point-highlight[hidden] { display:none !important; }
.pgn-impression-point p { margin:6px 0 0; color:#616168; font-size:12.5px; line-height:1.62; word-break:keep-all; }
.pgn-impression-points.is-loading { margin-top:13px; }
.pgn-impression-points.is-loading .pgn-impression-point {
  min-height:80px; padding:12px 0; align-items:center;
}
.pgn-impression-points.is-loading .pgn-impression-point strong { min-height:0; margin:0; text-align:left; }
.pgn-impression-points.is-loading .pgn-point-highlight,
.pgn-impression-points.is-loading .pgn-impression-point p { display:none !important; }
.pgn-impression-points.is-loading .pgn-impression-point::after {
  content:""; grid-column:2; width:min(68%,150px); height:6px; border-radius:999px;
  background:linear-gradient(90deg,#efedf5 20%,#faf9fd 50%,#efedf5 80%); background-size:220% 100%;
  animation:pgnSkeleton 1.8s ease-in-out infinite;
}
@keyframes pgnSkeleton { 0%,100% { background-position:100% 0; opacity:.7; } 50% { background-position:0 0; opacity:1; } }
.pgn-result-note { margin:12px 2px 0; color:#98989e; font-size:10.5px; line-height:1.5; text-align:center; word-break:keep-all; }
.pgn-saju-bridge {
  max-width:680px; margin:10px auto 0; padding:18px 20px; border:1px solid rgba(220,215,247,.86);
  border-radius:20px; background:linear-gradient(145deg,#f7f5ff,#fff7fa); text-align:left;
  box-shadow:0 10px 28px rgba(43,38,67,.05),0 2px 7px rgba(43,38,67,.022);
}
.pgn-saju-bridge[hidden] { display:none !important; }
.pgn-bridge-start { display:grid; grid-template-columns:max-content minmax(0,1fr); align-items:center; gap:16px; }
.pgn-bridge-start > div { min-width:0; }
.pgn-bridge-badge {
  padding:8px 11px; display:inline-flex; align-items:center; gap:5px; border:1px solid rgba(213,205,245,.9);
  border-radius:999px; background:rgba(255,255,255,.78); color:#6258ca; font-size:10px; line-height:1; font-weight:850; letter-spacing:-.01em;
}
.pgn-bridge-badge i { color:#df568a; font-style:normal; }
.pgn-saju-kicker { color:#5e5ce6; font-size:10.5px; font-weight:800; }
.pgn-saju-bridge h3 {
  margin:0; color:#1d1d1f; font-size:18px; line-height:1.35; letter-spacing:-.25px;
  word-break:keep-all; text-wrap:balance;
}
.pgn-saju-intro { margin:7px 0 0; color:#727279; font-size:12.5px; line-height:1.58; word-break:keep-all; }
.pgn-saju-compare { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:14px; }
.pgn-saju-compare[hidden], .pgn-saju-together[hidden] { display:none !important; }
.pgn-saju-compare article {
  min-width:0; padding:13px 14px; border:1px solid rgba(227,223,244,.82); border-radius:15px;
  background:rgba(255,255,255,.82);
}
.pgn-saju-compare strong { display:block; color:#38383d; font-size:12px; line-height:1.45; }
.pgn-saju-compare p { margin:6px 0 0; color:#616168; font-size:12.5px; line-height:1.62; word-break:keep-all; }
.pgn-saju-together {
  margin:10px 0 0; padding:12px 14px; border-radius:13px; background:rgba(102,88,223,.065);
  color:#55555c; font-size:12.5px; line-height:1.62; word-break:keep-all;
}
.pgn-saju-compact { padding:0; }
.pgn-saju-compact[hidden] { display:none !important; }
.pgn-saju-compact > span { display:block; color:#5e5ce6; font-size:10.5px; font-weight:850; }
.pgn-saju-compact p { margin:8px 0 0; color:#55555c; font-size:12.5px; line-height:1.62; word-break:keep-all; }
.pgn-saju-compact button { margin:10px 0 0; padding:0; border:0; background:transparent; color:#7169c9; font:inherit; font-size:10.5px; font-weight:800; cursor:pointer; }
.pgn-saju-bridge:not(.is-collapsed) .pgn-saju-compact { margin-top:14px; }
.pgn-saju-bridge:not(.is-collapsed) .pgn-saju-compact > span,
.pgn-saju-bridge:not(.is-collapsed) .pgn-saju-compact > p { display:none; }
.pgn-saju-bridge:not(.is-collapsed) .pgn-saju-compact button { margin-top:0; }
.pgn-saju-bridge.is-collapsed { padding-top:15px; padding-bottom:15px; }
.pgn-saju-bridge.is-collapsed .pgn-bridge-start,
.pgn-saju-bridge.is-collapsed .pgn-saju-compare,
.pgn-saju-bridge.is-collapsed .pgn-saju-together,
.pgn-saju-bridge.is-collapsed .pgn-saju-helper,
.pgn-saju-bridge.is-collapsed .pgn-saju-unlock-btn { display:none !important; }
#pgn-result-card .pgn-saju-unlock-btn {
  width:100%; min-height:48px; margin:14px 0 0; padding:9px 12px 9px 18px; display:grid;
  grid-template-columns:1fr auto 1fr; align-items:center; column-gap:8px;
  border:1px solid rgba(102,88,223,.2); background:rgba(255,255,255,.76); color:#5e5ce6;
  box-shadow:none;
}
#pgn-result-card .pgn-saju-unlock-btn.is-loading {
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.pgn-saju-unlock-btn .pgn-unlock-cost { background:rgba(94,92,230,.09); color:#5e5ce6; }
.pgn-saju-helper { margin:12px 5px 0; color:#8a8a92; font-size:10.5px; text-align:center; word-break:keep-all; }
.pgn-saju-helper.is-delayed, .pgn-unlock-helper.is-delayed { color:#6e67a5; }
.pgn-saju-bridge.is-loading .pgn-saju-compare { display:none; }
.pgn-saju-bridge.is-unavailable { padding-top:16px; padding-bottom:16px; }
.pgn-unlock-wrap { max-width:680px; margin:10px auto 0; }
.pgn-detail-preview {
  margin-bottom:10px; padding:17px; border:1px solid rgba(225,221,243,.84); border-radius:18px;
  background:#fff; text-align:left;
}
.pgn-detail-preview-heading > span { color:#8b879b; font-size:10px; font-weight:750; }
.pgn-detail-preview-heading h3 {
  margin:4px 0 0; color:#26262a; font-size:15px; line-height:1.42; letter-spacing:-.2px; word-break:keep-all;
}
.pgn-detail-preview-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:13px; }
.pgn-detail-preview-list span {
  position:relative; min-width:0; padding:9px 10px 9px 27px; border-radius:11px; background:#f8f7fc;
  color:#5e5e66; font-size:11px; line-height:1.45; word-break:keep-all;
}
.pgn-detail-preview-list span::before {
  content:""; position:absolute; left:11px; top:14px; width:6px; height:6px; border-radius:2px;
  background:linear-gradient(135deg,#665ee8,#e65b87); transform:rotate(45deg);
}
.pgn-saved-saju-bridge { margin-top:16px; }
.pgn-saved-unlock-wrap {
  padding:13px; border:1px solid rgba(225,221,243,.82); border-radius:17px;
  background:linear-gradient(145deg,#fbfaff,#fffafb);
}
.pgn-saved-unlock-wrap .pgn-unlock-helper { margin:0 5px 10px; }
#pgn-result-card .pgn-unlock-btn {
  width:100%; min-height:50px; margin:0; padding:9px 14px 9px 18px; display:grid;
  grid-template-columns:1fr auto 1fr; align-items:center; column-gap:8px;
}
#pgn-result-card .pgn-unlock-btn.is-loading {
  display:flex; align-items:center; justify-content:center; gap:0; text-align:center;
}
.pgn-unlock-main { grid-column:2; font-size:13.5px; font-weight:800; white-space:nowrap; }
.pgn-unlock-cost {
  grid-column:3; justify-self:end; display:inline-flex; align-items:center; gap:3px; padding:5px 8px; border-radius:999px;
  background:rgba(255,255,255,.17); font-size:10.5px; font-weight:800; white-space:nowrap;
}
.pgn-unlock-cost .credit-icon { width:13px; height:13px; }
.pgn-unlock-helper { margin:7px 8px 0; color:#8a8a92; font-size:10.5px; text-align:center; word-break:keep-all; }
#pgn-result-card .premium-unlock-btn:disabled { opacity:.5; cursor:not-allowed; }
.pgn-save-panel {
  max-width:680px; margin:16px auto 0; padding:13px 14px; display:flex; align-items:center; justify-content:space-between;
  gap:14px; border:1px solid #e8e5f5; border-radius:15px; background:#faf9fd;
}
.pgn-save-copy { min-width:0; display:flex; flex-direction:column; gap:3px; }
.pgn-save-copy strong { color:#2c2c2e; font-size:11.5px; }
.pgn-save-copy span { color:#8e8e93; font-size:10px; line-height:1.4; word-break:keep-all; }
.pgn-save-panel > button {
  flex:0 0 auto; min-height:34px; padding:0 11px; border:1px solid #ded9f7; border-radius:10px; background:#f3f1ff;
  color:#5e5ce6; font:inherit; font-size:10.5px; font-weight:750; cursor:pointer;
}
.pgn-retry-btn {
  display:block; min-width:150px; min-height:38px; margin:14px auto 0; padding:0 16px; border:1px solid #dedee4;
  border-radius:12px; background:#fff; color:#6e6e73; font:inherit; font-size:11.5px; font-weight:750; cursor:pointer;
}
#pgn-result-card .premium-detail {
  max-width:680px; margin-left:auto; margin-right:auto; padding:0; border:0; background:transparent;
}
.pgn-detail-report {
  margin-top:10px; padding:20px; border:1px solid rgba(225,221,243,.82); border-radius:20px;
  background:linear-gradient(145deg,#fbfaff,#fffafb); color:#3a3a3c;
  box-shadow:0 12px 32px rgba(43,38,67,.075),0 2px 8px rgba(43,38,67,.03);
}
.pgn-detail-header { margin-bottom:16px; text-align:center; }
.pgn-report-badge {
  width:max-content; margin:0 auto 12px; padding:7px 11px; display:inline-flex; align-items:center; gap:6px;
  border:1px solid rgba(218,212,244,.88); border-radius:999px; background:rgba(255,255,255,.78);
  color:#645ace; font-size:10px; line-height:1; font-weight:850; letter-spacing:-.01em;
}
.pgn-report-badge--detail i { width:7px; height:7px; border-radius:2px; background:linear-gradient(135deg,#6d63e8,#e65b87); transform:rotate(45deg); }
.pgn-report-badge--saju i { color:#df568a; font-style:normal; }
.pgn-detail-header h3 {
  margin:0; color:#1d1d1f; font-size:clamp(18px,3.7vw,23px); line-height:1.32;
  letter-spacing:-.35px; word-break:keep-all; text-wrap:balance;
}
.pgn-detail-header p {
  max-width:560px; margin:9px auto 0; color:#626269; font-size:12px; line-height:1.65;
  word-break:keep-all; text-wrap:balance;
}
.pgn-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.pgn-detail-section { position:relative; min-width:0; text-align:left; }
.pgn-detail-section[hidden] { display:none !important; }
.pgn-detail-report:not(.pgn-detail-report--saju) .pgn-detail-section:last-child { grid-column:1 / -1; }
.pgn-detail-section b { display:flex; align-items:center; gap:7px; margin:0 0 7px; color:#1d1d1f; font-size:12px; }
.pgn-part-icon { flex:0 0 24px; width:24px; height:24px; display:block; }
.pgn-detail-section > span,
.pgn-context-copy > span {
  display:inline-block; margin:0 0 7px; color:#5e5ce6; font-size:11px; font-weight:800;
  line-height:1.4; word-break:keep-all;
}
.pgn-detail-section p { margin:0; color:#626269; font-size:11.5px; line-height:1.66; word-break:keep-all; }

/* 상세 관상: 부위 심볼은 무료 선택 화면에서만 사용하고 상세는 간결한 텍스트 탭으로 구분합니다. */
.pgn-part-explorer {
  display:grid; grid-template-columns:1fr; gap:10px; padding:12px;
  border:1px solid rgba(229,225,244,.74); border-radius:18px; background:rgba(248,247,252,.72);
}
.pgn-part-tabs {
  --pgn-selected-index:0; position:relative; isolation:isolate; display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; padding:3px; border-radius:14px;
  background:rgba(239,237,247,.78);
}
.pgn-part-tabs::before {
  content:""; position:absolute; z-index:0; top:3px; bottom:3px; left:3px;
  width:calc((100% - 6px) / 5); border:1px solid rgba(209,201,242,.92); border-radius:11px;
  background:linear-gradient(135deg,rgba(237,234,255,.98),rgba(255,240,247,.96));
  box-shadow:0 3px 10px rgba(76,62,144,.06);
  transform:translateX(calc(var(--pgn-selected-index) * 100%)); transition:transform .24s cubic-bezier(.2,.75,.25,1);
}
.pgn-part-tab {
  position:relative; z-index:1; width:100%; min-height:40px; padding:7px 5px; display:flex; align-items:center; justify-content:center; gap:0;
  appearance:none; -webkit-appearance:none; border:0; border-radius:11px; background:transparent;
  color:#55555c; font:inherit; font-size:11px; font-weight:750; text-align:center; cursor:pointer;
  transition:color .2s ease;
}
.pgn-part-tab:hover { color:#34323d; }
.pgn-part-tab:focus-visible { outline:2px solid rgba(94,92,230,.64); outline-offset:1px; }
.pgn-part-tab[aria-selected="true"] {
  color:#4f45c7;
}
.pgn-part-panels { min-width:0; min-height:146px; display:block; }
.pgn-part-panel {
  width:100%; min-height:146px; padding:18px 20px; display:flex; flex-direction:column; justify-content:center;
  border:1px solid rgba(229,225,244,.78); border-radius:15px; background:rgba(255,255,255,.93);
}
.pgn-part-panel.is-changing { animation:pgnPanelIn .2s ease both; }
.pgn-part-panel-heading { width:min(100%,520px); margin:0 auto 10px; display:flex; align-items:baseline; flex-wrap:wrap; gap:5px 14px; }
.pgn-part-panel-heading b { margin:0; font-size:15px; line-height:1.34; }
.pgn-part-panel-heading strong { color:#5e5ce6; font-size:12px; line-height:1.45; word-break:keep-all; }
.pgn-part-panel p { width:min(100%,520px); max-width:none; margin:0 auto; font-size:12.5px; line-height:1.66; }
@keyframes pgnPanelIn { from { opacity:.18; } to { opacity:1; } }

/* 관상×사주: 두 관점의 결합과 네 단계의 흐름을 한 화면에서 읽게 합니다. */
.pgn-perspective-map {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(48px,.42fr) minmax(0,1fr); align-items:center; gap:0;
  margin:0 0 16px; padding:18px 16px 14px; border:1px solid rgba(226,218,244,.88); border-radius:17px;
  background:rgba(255,255,255,.82);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 6px 18px rgba(84,67,146,.04);
}
.pgn-perspective-source { min-width:0; min-height:58px; padding:8px 10px; display:flex; align-items:center; justify-content:center; text-align:center; }
.pgn-perspective-source > span:last-child { min-width:0; display:flex; flex-direction:column; align-items:center; gap:2px; }
.pgn-perspective-source small { color:#7f7b8a; font-size:10px; font-weight:800; letter-spacing:.02em; }
.pgn-perspective-source strong { color:#2c2c2e; font-size:13px; line-height:1.35; word-break:keep-all; }
.pgn-perspective-source--face small { color:#c8497b; }
.pgn-perspective-source--saju small { color:#6258c9; }
.pgn-perspective-link { position:relative; height:1px; align-self:center; background:linear-gradient(90deg,#e96898 0%,#ba78c8 50%,#786ee2 100%); opacity:.82; }
.pgn-perspective-link::after { content:''; position:absolute; left:50%; top:50%; width:5px; height:5px; border-radius:50%; background:#ae72c8; box-shadow:0 0 0 4px rgba(174,114,200,.09); transform:translate(-50%,-50%); }
.pgn-perspective-link span { display:none; }
.pgn-perspective-caption { grid-column:1/-1; margin:10px 0 0; color:#7d7887; font-size:10.5px; line-height:1.45; text-align:center; word-break:keep-all; }
.pgn-context-chapters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.pgn-context-chapter {
  min-width:0; padding:16px; border:1px solid rgba(228,224,244,.86); border-radius:16px;
  background:rgba(255,255,255,.76); text-align:left;
}
.pgn-context-heading { min-width:0; margin:0 0 9px; display:flex; align-items:center; gap:9px; }
.pgn-context-category {
  flex:0 0 auto; display:inline-flex; min-height:22px; padding:0 9px; align-items:center; border-radius:999px;
  background:#f0eeff; color:#655ad2; font-size:9.5px; font-weight:850;
}
.pgn-context-chapter--relation .pgn-context-category { background:#fff0f5; color:#d54f82; }
.pgn-context-chapter--work .pgn-context-category { background:#eef7ff; color:#3e7ec7; }
.pgn-context-chapter--direction .pgn-context-category { background:#f3f4f7; color:#6e6e73; }
.pgn-context-heading h4 { min-width:0; margin:0; color:#1d1d1f; font-size:13px; line-height:1.4; word-break:keep-all; }
.pgn-context-chapter > strong { display:block; margin-bottom:7px; color:#5e5ce6; font-size:11.5px; line-height:1.45; word-break:keep-all; }
.pgn-context-chapter p { margin:0; color:#626269; font-size:12px; line-height:1.66; word-break:keep-all; }

/* 새 상세 관상: 무료 요약과 겹치지 않는 핵심, 네 개의 질문, 부위별 근거 순서로 읽습니다. */
.pgn-detail-insights { margin-bottom:12px; text-align:left; }
.pgn-detail-insights > h4 {
  margin:0 0 8px; color:#74717e; font-size:var(--type-secondary); line-height:1.4; font-weight:800;
}
.pgn-detail-insights > div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.pgn-detail-insight {
  min-width:0; padding:14px; border:1px solid rgba(228,224,244,.86); border-radius:15px;
  background:rgba(255,255,255,.82);
}
.pgn-detail-insight > span { color:#776de0; font-size:var(--type-meta); font-weight:850; letter-spacing:.04em; }
.pgn-detail-insight h4 { margin:5px 0 6px; color:#242428; font-size:var(--type-body); line-height:1.42; word-break:keep-all; }
.pgn-detail-insight p { margin:0; color:#66666d; font-size:var(--type-secondary); line-height:1.62; word-break:keep-all; }
.pgn-detail-chapters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.pgn-detail-chapter {
  min-width:0; padding:16px; border:1px solid rgba(227,223,244,.9); border-radius:16px;
  background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(249,248,253,.9)); text-align:left;
}
.pgn-detail-chapter > div { display:flex; align-items:center; gap:8px; margin-bottom:9px; }
.pgn-detail-chapter > div > span {
  flex:0 0 auto; min-height:22px; padding:0 8px; display:inline-flex; align-items:center; border-radius:999px;
  background:#f0eeff; color:#6258cd; font-size:var(--type-meta); font-weight:850;
}
.pgn-detail-chapter--expression > div > span { background:#fff0f5; color:#cf4f7f; }
.pgn-detail-chapter--use > div > span { background:#eef7ff; color:#3d7bbc; }
.pgn-detail-chapter h4 { min-width:0; margin:0; color:#242428; font-size:var(--type-body); line-height:1.4; word-break:keep-all; }
.pgn-detail-chapter > strong { display:block; margin-bottom:7px; color:#5e5ce6; font-size:var(--type-secondary); line-height:1.45; word-break:keep-all; }
.pgn-detail-chapter p { margin:0; color:#626269; font-size:var(--type-body); line-height:1.66; word-break:keep-all; }
.pgn-evidence-details {
  margin-top:12px; border:1px solid rgba(226,222,243,.9); border-radius:17px; background:rgba(250,249,253,.78); overflow:hidden;
}
.pgn-evidence-details > summary {
  position:relative; min-height:46px; padding:0 44px 0 16px; display:flex; align-items:center;
  color:#55515f; font-size:var(--type-secondary); font-weight:800; cursor:pointer; list-style:none;
}
.pgn-evidence-details > summary::-webkit-details-marker { display:none; }
.pgn-evidence-details > summary::after {
  content:'+'; position:absolute; right:16px; top:50%; color:#786ee2; font-size:18px; font-weight:500; transform:translateY(-50%);
}
.pgn-evidence-details[open] > summary::after { content:'−'; }
.pgn-evidence-details .pgn-part-explorer { margin:0 10px 10px; }
.pgn-closing-card {
  margin-top:12px; padding:17px 18px 19px; border:1px solid rgba(233,203,125,.58); border-radius:17px;
  background:linear-gradient(135deg,rgba(255,249,230,.9),rgba(250,245,255,.92)); text-align:center;
}
.pgn-closing-title { position:relative; width:max-content; max-width:calc(100% - 44px); margin:0 auto; }
.pgn-closing-title span {
  position:absolute; right:calc(100% + 8px); top:50%; width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:#fff; font-size:17px; box-shadow:0 5px 14px rgba(86,65,32,.08); transform:translateY(-50%);
}
.pgn-closing-title b { color:#8a5e0a; font-size:var(--type-body); line-height:1.4; }
.pgn-closing-card > i { width:30px; height:3px; margin:13px auto 12px; display:block; border-radius:999px; background:linear-gradient(90deg,#ddbd69,#b89ae8); }
.pgn-detail-report--saju .pgn-closing-card > i { background:linear-gradient(90deg,#e86998 0%,#b779ce 50%,#7066df 100%); }
.pgn-closing-card > p { max-width:540px; margin:0 auto; color:#4e4c52; font-size:var(--type-body); line-height:1.72; word-break:keep-all; text-wrap:pretty; }
.pgn-detail-advice {
  margin-top:10px; padding:16px; border-radius:16px; background:linear-gradient(135deg,#f0eeff,#fff1f6);
  text-align:left;
}
.pgn-detail-advice b { display:block; margin-bottom:6px; color:#2c2c2e; font-size:12px; }
.pgn-detail-advice p { margin:0; color:#5f5f66; font-size:11.5px; line-height:1.66; word-break:keep-all; }

body.pgn-modal-open { overflow:hidden; }
.pgn-save-overlay { position:fixed; inset:0; z-index:2850; display:flex; align-items:flex-end; justify-content:center; padding:16px 16px calc(16px + env(safe-area-inset-bottom)); }
.pgn-save-backdrop { position:absolute; inset:0; border:0; background:rgba(22,20,32,.32); }
.pgn-save-sheet {
  position:relative; width:min(100%,430px); max-height:min(620px,calc(100vh - 32px)); overflow:auto; padding:20px;
  border-radius:22px; background:rgba(255,255,255,.98); box-shadow:0 22px 60px rgba(31,24,59,.22);
  animation:pgnSaveSheetIn .22s cubic-bezier(.2,.8,.2,1) both;
}
.pgn-save-sheet header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.pgn-save-sheet header span { color:#8e8e93; font-size:9px; font-weight:800; letter-spacing:.08em; }
.pgn-save-sheet h3 { margin:4px 0 0; color:#1d1d1f; font-size:18px; }
.pgn-save-close { width:30px; height:30px; border:0; border-radius:50%; background:#f2f2f7; color:#8e8e93; font:inherit; font-size:17px; cursor:pointer; }
.pgn-save-note { margin:11px 0 14px; color:#7d7d84; font-size:11px; line-height:1.5; word-break:keep-all; }
.pgn-save-people { display:flex; flex-direction:column; gap:8px; }
.pgn-save-person {
  width:100%; min-height:58px; padding:8px 11px; display:grid; grid-template-columns:40px minmax(0,1fr) 22px; align-items:center;
  gap:10px; border:1px solid #e8e5f5; border-radius:15px; background:#fff; color:inherit; font:inherit; text-align:left; cursor:pointer;
}
.pgn-save-person.is-selected { border-color:#bdb7ef; background:#f8f6ff; }
.pgn-save-avatar { width:40px; height:40px; display:flex; align-items:center; justify-content:center; overflow:hidden; border:1px solid #e5e1f7; border-radius:50%; background:#f5f3ff; color:#5e5ce6; font-size:14px; font-weight:800; }
.pgn-save-avatar img { width:100%; height:100%; object-fit:cover; }
.pgn-save-person-copy { min-width:0; display:flex; flex-direction:column; gap:3px; }
.pgn-save-person-copy strong { overflow:hidden; color:#1d1d1f; font-size:12.5px; text-overflow:ellipsis; white-space:nowrap; }
.pgn-save-person-copy small { color:#8e8e93; font-size:10px; }
.pgn-save-check { color:#5e5ce6; opacity:0; font-size:13px; text-align:center; }
.pgn-save-person.is-selected .pgn-save-check { opacity:1; }
@keyframes pgnSaveSheetIn { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }

.pgn-saved-header {
  max-width:680px; margin:0 auto 14px; padding:14px 16px; display:flex; align-items:center; gap:12px;
  border-radius:17px; background:linear-gradient(135deg,#f4f1ff,#fff3f7); text-align:left;
}
.pgn-saved-avatar { flex:0 0 48px; width:48px; height:48px; display:flex; align-items:center; justify-content:center; overflow:hidden; border:1px solid #ded9f7; border-radius:50%; background:#fff; color:#5e5ce6; font-size:16px; font-weight:800; }
.pgn-saved-avatar img { width:100%; height:100%; object-fit:cover; }
.pgn-saved-header > div { min-width:0; }
.pgn-saved-header > div > span { color:#5e5ce6; font-size:9.5px; font-weight:800; }
.pgn-saved-header h2 { margin:4px 0 0; color:#1d1d1f; font-size:16px; }
.pgn-saved-header p { margin:4px 0 0; color:#86868b; font-size:10.5px; word-break:keep-all; }
.pgn-saved-actions { max-width:680px; margin:10px auto 0; display:flex; align-items:center; justify-content:center; gap:10px; }
.pgn-saved-actions button { min-height:38px; padding:0 14px; border-radius:12px; background:#fff; font:inherit; font-size:11px; font-weight:750; cursor:pointer; }
.pgn-saved-new { border:1px solid #ded9f7; color:#5e5ce6; }
.pgn-saved-delete { border:1px solid #e5e5ea; color:#ff3b30; }

/* 휴대폰과 PC 사이 폭에서도 PC용 다단 레이아웃이 눌리지 않도록 별도 규칙을 둡니다. */
@media (max-width:820px) {
  .pgn-feature-focus { width:100%; min-height:0; }
  .pgn-insight-heading { gap:3px 10px; }
  .pgn-part-explorer { gap:9px; padding:10px; }
  .pgn-part-tab { min-height:40px; padding:7px 3px; justify-content:center; border-radius:10px; text-align:center; font-size:10px; }
  .pgn-part-panel { padding:17px 18px; }
}

@media (max-width:640px) {
  .pgn-perspective-map { grid-template-columns:minmax(0,1fr) minmax(34px,.3fr) minmax(0,1fr); gap:0; }
  .pgn-perspective-source { justify-content:center; }
  .pgn-context-chapters { grid-template-columns:1fr; }
  .pgn-detail-insights > div { grid-template-columns:1fr; }
  .pgn-detail-chapters { grid-template-columns:1fr; }
}

@media (max-width:480px) {
  #screen-physiognomy .form-card { padding-left:clamp(16px,4.5vw,20px); padding-right:clamp(16px,4.5vw,20px); }
  .pgn-intro > p { max-width:330px; margin-top:10px; }
  .pgn-upload-placeholder { padding:24px 16px; }
  .pgn-privacy-note { padding-left:14px; padding-right:14px; }
  .pgn-privacy-inner { width:100%; grid-template-columns:19px minmax(0,1fr); gap:10px; }
  .pgn-privacy-inner > div { font-size:clamp(10.5px,2.8vw,11.5px); }
  .pgn-free-summary { padding:17px 16px; box-shadow:0 7px 20px rgba(43,38,67,.045); }
  .pgn-summary-start { gap:10px; }
  .pgn-summary-rail { height:40px; }
  .pgn-five-points { padding:12px 10px 10px; }
  .pgn-five-heading { align-items:center; gap:8px; margin-bottom:11px; }
  .pgn-five-heading p { margin:0; text-align:left; }
  .pgn-feature-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:3px; }
  .pgn-feature-tile { min-height:60px; padding:6px 2px; border-radius:11px; }
  .pgn-feature-icon { width:31px; height:31px; margin-bottom:4px; border-radius:10px; }
  .pgn-feature-icon img { width:19px; height:19px; }
  .pgn-feature-tile strong { font-size:9.5px; }
  .pgn-feature-focus { min-height:0; padding:10px 11px; }
  .pgn-feature-focus strong { font-size:10.5px; }
  .pgn-feature-focus p { font-size:11.5px; }
  .pgn-impression-points { padding-left:12px; padding-right:12px; }
  .pgn-impression-point { grid-template-columns:24px minmax(0,1fr); gap:8px; padding:12px 0; }
  .pgn-insight-heading { display:block; }
  .pgn-impression-point strong { margin-bottom:3px; }
  .pgn-impression-point p { font-size:11.5px; }
  .pgn-impression-points.is-loading .pgn-impression-point::after { grid-column:2; }
  .pgn-impression-points.is-loading .pgn-impression-point { min-height:72px; }
  .pgn-impression-point strong { min-height:0; }
  .pgn-saju-bridge { padding:17px 16px; }
  .pgn-bridge-start { grid-template-columns:1fr; gap:11px; }
  .pgn-bridge-badge { justify-self:start; }
  .pgn-saved-unlock-wrap { padding:11px; }
  .pgn-saju-compare { grid-template-columns:1fr; }
  #pgn-result-card .pgn-unlock-btn { grid-template-columns:1fr auto 1fr; padding-left:12px; padding-right:10px; }
  #pgn-result-card .pgn-saju-unlock-btn { grid-template-columns:1fr auto 1fr; padding-left:12px; padding-right:10px; }
  .pgn-unlock-main { font-size:12.5px; }
  .pgn-saju-bridge,.pgn-detail-report { box-shadow:0 7px 20px rgba(43,38,67,.045); }
  .pgn-detail-report { padding:17px 15px; }
  .pgn-detail-grid { grid-template-columns:1fr; }
  .pgn-detail-report:not(.pgn-detail-report--saju) .pgn-detail-section:last-child { grid-column:auto; }
  .pgn-part-tab { min-height:38px; padding:6px 2px; font-size:9.5px; }
  .pgn-part-panels,.pgn-part-panel { min-height:138px; }
  .pgn-part-panel { padding:15px; }
  .pgn-part-panel-heading { display:block; margin-bottom:8px; }
  .pgn-part-panel-heading b { margin-bottom:4px; font-size:14px; }
  .pgn-part-panel-heading strong { display:block; }
  .pgn-part-panel p { font-size:12px; }
  .pgn-perspective-map { gap:0; padding:14px 8px 12px; }
  .pgn-perspective-source { min-height:50px; padding:7px 5px; }
  .pgn-perspective-source small { font-size:10px; }
  .pgn-perspective-source strong { font-size:12px; }
  .pgn-perspective-caption { margin-top:8px; font-size:10px; }
  .pgn-context-chapter { padding:14px; }
  .pgn-context-heading { gap:8px; }
  .pgn-context-heading h4 { font-size:13px; }
  .pgn-detail-insight,.pgn-detail-chapter { padding:14px; }
  .pgn-detail-chapter > div { align-items:flex-start; }
  .pgn-closing-card { padding:16px 14px 18px; }
  .pgn-closing-card > p { line-height:1.68; }
  .pgn-save-panel { padding:12px; }
  .pgn-save-panel > button { padding-left:9px; padding-right:9px; }
  .pgn-saved-actions { flex-direction:column; }
  .pgn-saved-actions button { width:100%; }
}

@media (max-width:340px) {
  .physiognomy-entry-card { padding-left:13px; padding-right:13px; }
  .pec-chevron { right:13px; }
  .pec-desc { font-size:10.5px; }
  .pgn-privacy-note { padding-left:11px; padding-right:11px; gap:8px; }
  .pgn-unlock-cost { padding-left:6px; padding-right:6px; }
  .pgn-perspective-source { padding-left:6px; padding-right:6px; }
  .pgn-feature-focus { display:grid; grid-template-columns:1fr; gap:3px; }
  .pgn-feature-focus strong { white-space:normal; }
  .pgn-part-tab { font-size:8.8px; }
}

@media (max-width:480px) {
  .pgn-free-conclusion { padding:14px; }
  .pgn-detail-preview { padding:14px; }
  .pgn-detail-preview-list { grid-template-columns:1fr; gap:6px; }
}

@media (prefers-reduced-motion:reduce) {
  .pgn-brand-scan, .pgn-brand-mark::before, .pgn-summary-rail i, .pgn-perspective-link span, .pgn-impression-points.is-loading .pgn-impression-point::after, .pgn-five-points.is-loading .pgn-feature-copy, .pgn-free-conclusion.is-loading p, .pgn-preview-frame.is-scanning, .pgn-preview-frame.is-scanning::before, .pgn-preview-frame.is-scanning::after, .pgn-preview-portrait.pgn-scan-stage-0 .pgn-preview-glow, .pgn-preview-frame.pgn-scan-stage-2::before { animation:none; }
  .pgn-save-sheet { animation:none; }
  .pgn-feature-focus.is-changing, .pgn-part-panel.is-changing { animation:none; }
  .pgn-photo-feature-marker.is-moving .pgn-photo-feature-point,
  .pgn-photo-feature-marker.is-moving .pgn-photo-feature-name { animation:none; }
  .physiognomy-entry-card:active, .pgn-photo-select-btn:active, .pgn-feature-tile[aria-selected="true"], .pgn-part-tab[aria-selected="true"] { transform:none; }
}

/* 관상 화면 타이포 위계 */
.pec-title,
.pgn-back-btn,
.pgn-upload-copy strong, .pgn-photo-select-btn,
#pgn-impression,
.pgn-five-heading h3,
.pgn-feature-focus p,
.pgn-free-conclusion p,
.pgn-impression-point strong, .pgn-impression-point p,
.pgn-saju-intro, .pgn-saju-compare p, .pgn-saju-together, .pgn-saju-compact p,
.pgn-unlock-main, .pgn-retry-btn,
.pgn-detail-section p,
.pgn-part-panel p,
.pgn-perspective-source strong,
.pgn-context-heading h4, .pgn-context-chapter p,
.pgn-detail-advice p,
.pgn-save-person-copy strong, .pgn-save-check,
.pgn-saved-actions button {
  font-size:var(--type-body);
}

.pec-desc,
.pgn-upload-copy span,
.pgn-privacy-inner > div,
.pgn-feature-focus strong,
.pgn-point-highlight,
.pgn-result-note,
.pgn-saju-compare strong, .pgn-saju-helper,
.pgn-detail-preview-list span,
.pgn-unlock-helper,
.pgn-save-copy strong, .pgn-save-copy span,
.pgn-detail-header p,
.pgn-detail-section b,
.pgn-part-panel-heading strong,
.pgn-context-chapter > strong,
.pgn-detail-advice b,
.pgn-save-note {
  font-size:var(--type-secondary);
}

.pec-tags span,
.pgn-preview-remove,
.pgn-result-kicker, .pgn-summary-label,
.pgn-photo-feature-name,
.pgn-five-heading p, .pgn-feature-tile strong,
.pgn-free-conclusion-label, .pgn-insight-index,
.pgn-bridge-badge, .pgn-saju-kicker,
.pgn-saju-compact > span, .pgn-saju-compact button,
.pgn-detail-preview-heading > span,
.pgn-unlock-cost,
.pgn-save-panel > button,
.pgn-report-badge,
.pgn-detail-section > span, .pgn-context-copy > span,
.pgn-part-tab,
.pgn-perspective-source small, .pgn-perspective-caption,
.pgn-context-category,
.pgn-save-sheet header span, .pgn-save-person-copy small,
.pgn-saved-header > div > span, .pgn-saved-header p {
  font-size:var(--type-meta);
}

/* 뒤로가기는 글자보다 터치 여백을 늘리고, 결과 본문 14px은 그대로 유지합니다. */
.pgn-back-btn { min-height:40px; padding-top:8px; padding-bottom:8px; font-size:13px; }

@media (max-width:480px) {
  .pgn-feature-tile strong { font-size:10.5px; }
  .pgn-part-tab { font-size:10.5px; }
  .pgn-retry-btn, .pgn-saved-actions button { min-height:40px; font-size:13px; }

  #pgn-result-card .pgn-unlock-btn,
  #pgn-result-card .pgn-saju-unlock-btn {
    grid-template-columns:minmax(0,1fr) auto; column-gap:8px; padding-left:12px; padding-right:10px;
  }
  #pgn-result-card .pgn-unlock-main {
    grid-column:1; justify-self:center; min-width:0; font-size:13px; line-height:1.35; white-space:normal; text-align:center;
  }
  #pgn-result-card .pgn-unlock-cost { grid-column:2; }
}

@media (max-width:340px) {
  .pgn-part-tab { font-size:10px; }
  #pgn-result-card .pgn-unlock-main { font-size:12.5px; }
}