/* =====================================================================
   PURPLE SAJU — 공통 컴포넌트 레이어 (PHASE 2)
   ---------------------------------------------------------------------
   ★ 불러오는 순서:  tokens.css  →  style.css  →  purple-saju.css

   두 가지 일을 합니다.
     A. 기존 컴포넌트(.btn / .card / .field …)를 PURPLE SAJU 형태로 재정의
        → 24개 페이지가 한 번에 새 디자인을 입습니다.
     B. 디자인 명세에 새로 등장한 컴포넌트를 ps- 접두사로 추가
        (탭 · 뱃지 · 칩 · 스텝 · 토글 · 슬라이더 · 게이지 · 도넛 ·
         천체 장식 · 다크 섹션 · 리포트 읽기 영역 등)

   ⚠ 유지 규칙
     · id / data-속성 / JS 가 잡는 클래스는 건드리지 않습니다.
     · --el-* 변수명은 guide.js 가 JS에서 참조하므로 그대로 둡니다.
   ===================================================================== */


/* =====================================================================
   0. 기본 타이포 — 폰트를 변수로 통일
   ===================================================================== */
body{
  font-family:var(--font-body);
  background:var(--ps-surface);
  color:var(--ps-text);
  line-height:1.7;
  letter-spacing:-.01em;
}
h1,h2,h3,h4,h5,.serif{ font-family:var(--font-title); }
h1,h2,h3,h4{ color:var(--navy); }

h1{ font-size:var(--fs-h1-fluid); font-weight:var(--fw-h1); line-height:1.24; }
h2{ font-size:var(--fs-h2-fluid); font-weight:var(--fw-h2); line-height:1.3; }
h3{ font-size:var(--fs-h3-fluid); font-weight:var(--fw-h3); line-height:1.38; }
h4{ font-size:var(--fs-h4);       font-weight:var(--fw-h4); line-height:1.5; }

input,select,textarea,button{ font-family:var(--font-body); }

/* 원국 한자는 명조로 */
.ps-hanja,.mansae .gan,.mansae .ji{ font-family:var(--font-hanja); }

.tiny{ font-size:var(--fs-caption); }
.ps-body2{ font-size:var(--fs-body2); }

/* eyebrow — 골드 소제목 */
.eyebrow{
  color:var(--ps-gold-deep);
  letter-spacing:.22em;
  font-weight:700;
  font-size:var(--fs-caption);
}
.ps-on-dark .eyebrow,.ps-cosmic .eyebrow{ color:var(--ps-gold-bright); }

/* 접근성 — 키보드 포커스가 항상 보이도록 */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--ps-purple-500);
  outline-offset:2px;
  border-radius:6px;
}


/* =====================================================================
   1. 천체(Cosmic) 표면 — 브랜드 영역
   ---------------------------------------------------------------------
   화면 전체를 이미지 한 장으로 덮지 않습니다.
   배경은 CSS 그라디언트 + 별빛 레이어로 만들고,
   캐릭터·행성 같은 그림 자산만 그 위에 얹습니다.
   ===================================================================== */

/* 깊은 밤 배경 */
.ps-cosmic{
  position:relative;
  background:var(--ps-grad-night);
  color:var(--ps-text-on-dark);
  overflow:hidden;
  isolation:isolate;
}
.ps-cosmic h1,.ps-cosmic h2,.ps-cosmic h3,.ps-cosmic h4{ color:var(--ps-text-on-dark); }
.ps-cosmic .muted{ color:var(--ps-text-on-dark-soft); }
.ps-cosmic .tiny{ color:var(--ps-text-on-dark-mute); }

/* 성운 — 은은한 보라/금빛 번짐 */
.ps-cosmic::before{
  content:'';position:absolute;inset:-20% -10%;z-index:-2;pointer-events:none;
  background:
    var(--ps-nebula-1) 18% 22% / 46% 52% no-repeat,
    var(--ps-nebula-3) 82% 12% / 40% 44% no-repeat,
    var(--ps-nebula-2) 62% 84% / 44% 40% no-repeat;
}

/* 별빛 — 이미지 없이 CSS 만으로 */
.ps-starfield::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, var(--ps-star), transparent),
    radial-gradient(1.4px 1.4px at 78% 12%, var(--ps-star-gold), transparent),
    radial-gradient(1.2px 1.2px at 34% 62%, var(--ps-star), transparent),
    radial-gradient(1.8px 1.8px at 88% 48%, var(--ps-star), transparent),
    radial-gradient(1.2px 1.2px at 58% 32%, var(--ps-star-gold), transparent),
    radial-gradient(1.4px 1.4px at 22% 86%, var(--ps-star), transparent),
    radial-gradient(1.1px 1.1px at 68% 76%, var(--ps-star), transparent),
    radial-gradient(1.5px 1.5px at 46% 8%,  var(--ps-star-gold), transparent),
    radial-gradient(1.2px 1.2px at 92% 82%, var(--ps-star), transparent),
    radial-gradient(1.3px 1.3px at 6% 52%,  var(--ps-star), transparent);
  opacity:.75;
  animation:ps-twinkle 5.5s ease-in-out infinite alternate;
}
@keyframes ps-twinkle{ from{opacity:.45} to{opacity:.9} }

/* 천체 궤도 링 — 히어로 장식 */
.ps-orbit-ring{
  position:absolute;border-radius:50%;pointer-events:none;
  border:1px solid var(--ps-line-on-dark);
  box-shadow:0 0 40px rgba(124,77,255,.16) inset;
}
.ps-orbit-ring.dashed{ border-style:dashed; opacity:.55; }
.ps-orbit-spin{ animation:ps-spin 46s linear infinite; }
@keyframes ps-spin{ to{ transform:rotate(360deg) } }

/* 초승달 */
.ps-moon{
  position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 34% 34%, #FFF6DA, #E7CE86 62%, #B8912F 100%);
  box-shadow:var(--ps-glow-gold);
}

/* 골드 구분 장식 (◆ 좌우 선) */
.ps-ornament{
  display:flex;align-items:center;gap:12px;justify-content:center;
  color:var(--ps-gold);
}
.ps-ornament::before,.ps-ornament::after{
  content:'';height:1px;flex:1;max-width:120px;
  background:linear-gradient(90deg,transparent,var(--ps-gold),transparent);
}

/* 밝은 읽기 영역 — 리포트 본문용 */
.ps-paper{
  background:var(--ps-ivory);
  color:var(--ps-text);
  border-radius:var(--ps-radius-lg);
}
.ps-paper h1,.ps-paper h2,.ps-paper h3,.ps-paper h4{ color:var(--navy); }


/* =====================================================================
   2. 버튼
   ---------------------------------------------------------------------
   디자인의 버튼은 '알약'이 아니라 라운드 12px 사각형입니다.
   ===================================================================== */
.btn{
  border-radius:var(--ps-radius-btn);
  font-weight:600;
  font-size:var(--fs-body1);
  padding:14px 26px;
  min-height:48px;                 /* 모바일 터치 영역 확보 */
  transition:transform .22s var(--ps-ease),box-shadow .22s var(--ps-ease),
             background .22s,border-color .22s,opacity .22s;
}
.btn-lg{ padding:17px 34px; font-size:1.05rem; min-height:56px; }
.btn-sm{ padding:9px 16px;  font-size:var(--fs-body2); min-height:38px; }

/* PRIMARY — 보라 그라디언트 */
.btn-primary{
  background:var(--ps-grad-royal);
  color:#fff;border-color:transparent;
  box-shadow:var(--ps-shadow-purple);
}
.btn-primary:hover{ background:var(--ps-grad-royal); filter:brightness(1.08); transform:translateY(-2px); }

/* GOLD — 구매 전환 CTA */
.btn-gold{
  background:var(--ps-grad-gold);
  color:var(--ps-cosmic-900);border-color:transparent;
  box-shadow:var(--ps-shadow-gold);
  font-weight:700;
}
.btn-gold:hover{ filter:brightness(1.06); transform:translateY(-2px); }

/* SECONDARY — 골드 테두리 */
.btn-ghost{
  background:transparent;
  border:1px solid var(--ps-gold);
  color:var(--ps-gold-deep);
}
.btn-ghost:hover{ background:rgba(212,175,55,.10); color:var(--ps-gold-deep); transform:translateY(-1px); }
.ps-cosmic .btn-ghost,.ps-on-dark .btn-ghost{ color:var(--ps-gold-bright); border-color:var(--ps-gold); }
.ps-cosmic .btn-ghost:hover,.ps-on-dark .btn-ghost:hover{ background:rgba(212,175,55,.14); }

/* SECONDARY 2 — 라벤더 테두리 */
.btn-outline{
  background:transparent;
  border:1px solid var(--ps-purple-300);
  color:var(--ps-purple-600);
}
.btn-outline:hover{ background:var(--ps-purple-50); transform:translateY(-1px); }

/* TERTIARY */
.btn-light{
  background:var(--ps-white);
  border:1px solid var(--ps-line);
  color:var(--ps-purple-600);
  box-shadow:var(--ps-shadow-sm);
}
.btn-light:hover{ border-color:var(--ps-purple-300); }

.btn-soft{
  background:var(--ps-purple-100);
  border-color:transparent;
  color:var(--ps-purple-600);
}
.btn-soft:hover{ background:var(--ps-purple-200); }

.btn[disabled],.btn:disabled,.btn.is-disabled{
  opacity:.45;cursor:not-allowed;transform:none !important;box-shadow:none;
}

/* 아이콘 전용 원형 버튼 */
.ps-icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  border:1px solid var(--ps-line);background:var(--ps-white);
  color:var(--ps-purple-600);cursor:pointer;
  transition:border-color .2s,background .2s,transform .2s var(--ps-ease);
}
.ps-icon-btn:hover{ border-color:var(--ps-purple-300); background:var(--ps-purple-50); transform:translateY(-1px); }
.ps-cosmic .ps-icon-btn,.ps-on-dark .ps-icon-btn{
  background:rgba(255,255,255,.06);border-color:var(--ps-line-on-dark);color:var(--ps-gold-bright);
}

/* 버튼 안 화살표 */
.btn .ps-arrow{ transition:transform .22s var(--ps-ease); }
.btn:hover .ps-arrow{ transform:translateX(3px); }


/* =====================================================================
   3. 입력 요소
   ===================================================================== */
.field label,.ps-label{
  display:block;font-size:var(--fs-body2);font-weight:600;
  color:var(--ps-text);margin-bottom:8px;
}
.ps-req{ color:var(--ps-danger);margin-left:2px; }

input[type=text],input[type=email],input[type=password],input[type=number],
input[type=tel],input[type=date],input[type=time],select,textarea{
  width:100%;
  padding:13px 14px;
  border:1px solid var(--ps-line);
  border-radius:var(--ps-radius-input);
  background:var(--ps-white);
  color:var(--ps-text);
  font-size:16px;                    /* iOS 자동 확대 방지 */
  transition:border-color .2s,box-shadow .2s,background .2s;
}
input::placeholder,textarea::placeholder{ color:#A9A3BA; }
input:hover,select:hover,textarea:hover{ border-color:var(--ps-purple-200); }
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--ps-purple-500);
  box-shadow:0 0 0 3px rgba(124,77,255,.16);
}
input:disabled,select:disabled,textarea:disabled{
  background:var(--ps-surface-2);color:var(--ps-text-mute);cursor:not-allowed;
}
input[aria-invalid=true],.is-error input,.is-error select{
  border-color:var(--ps-danger);
  box-shadow:0 0 0 3px rgba(192,87,74,.14);
}
select{
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236C6C7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;
  background-position:right 13px center;
  padding-right:38px;
}
.hint,.ps-hint{ font-size:var(--fs-caption);color:var(--ps-text-mute);margin-top:6px; }
.ps-error-text{ font-size:var(--fs-caption);color:var(--ps-danger);margin-top:6px; }

/* 라디오 / 체크박스 */
.ps-choice{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font-size:var(--fs-body1);color:var(--ps-text);
  min-height:44px;
}
.ps-choice input[type=radio],.ps-choice input[type=checkbox]{
  appearance:none;width:20px;height:20px;margin:0;flex:none;
  border:1.5px solid var(--ps-line);background:var(--ps-white);
  transition:border-color .18s,background .18s;
  cursor:pointer;
}
.ps-choice input[type=radio]{ border-radius:50%; }
.ps-choice input[type=checkbox]{ border-radius:6px; }
.ps-choice input:hover{ border-color:var(--ps-purple-300); }
.ps-choice input[type=radio]:checked{
  border-color:var(--ps-purple-500);
  background:radial-gradient(circle,var(--ps-purple-500) 0 42%,#fff 46%);
}
.ps-choice input[type=checkbox]:checked{
  border-color:var(--ps-purple-500);background:var(--ps-purple-500);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat:no-repeat;background-position:center;
}

/* 선택형 버튼 그룹 (성별 · 양력/음력 등) */
.ps-segmented{ display:flex;gap:10px;flex-wrap:wrap; }
.ps-segmented > label{
  flex:1 1 0;min-width:110px;position:relative;
}
.ps-segmented input{ position:absolute;opacity:0;width:0;height:0; }
.ps-segmented .ps-seg-face{
  display:flex;align-items:center;justify-content:center;gap:7px;
  min-height:50px;padding:12px 14px;
  border:1px solid var(--ps-line);border-radius:var(--ps-radius-input);
  background:var(--ps-white);color:var(--ps-text-soft);
  font-size:var(--fs-body1);cursor:pointer;
  transition:border-color .18s,background .18s,color .18s;
}
.ps-segmented label:hover .ps-seg-face{ border-color:var(--ps-purple-300); }
.ps-segmented input:checked + .ps-seg-face{
  border-color:var(--ps-purple-500);
  background:var(--ps-purple-50);
  color:var(--ps-purple-600);
  font-weight:600;
}
.ps-segmented input:focus-visible + .ps-seg-face{
  outline:2px solid var(--ps-purple-500);outline-offset:2px;
}

/* 토글 스위치 */
.ps-toggle{ display:inline-flex;align-items:center;gap:10px;cursor:pointer;min-height:44px; }
.ps-toggle input{ position:absolute;opacity:0;width:0;height:0; }
.ps-toggle .ps-track{
  width:50px;height:28px;border-radius:999px;background:var(--ps-line);
  position:relative;transition:background .22s var(--ps-ease);flex:none;
}
.ps-toggle .ps-track::after{
  content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;
  border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(26,16,51,.25);
  transition:transform .22s var(--ps-ease);
}
.ps-toggle input:checked + .ps-track{ background:var(--ps-purple-500); }
.ps-toggle input:checked + .ps-track::after{ transform:translateX(22px); }
.ps-toggle input:focus-visible + .ps-track{ outline:2px solid var(--ps-purple-500);outline-offset:2px; }

/* 슬라이더 */
.ps-slider{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;
  background:linear-gradient(90deg,var(--ps-purple-500) var(--ps-slider-pct,50%),var(--ps-line) var(--ps-slider-pct,50%));
  outline:none;
}
.ps-slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:var(--ps-purple-500);border:3px solid #fff;
  box-shadow:0 2px 8px rgba(91,45,145,.4);cursor:pointer;
}
.ps-slider::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;
  background:var(--ps-purple-500);border:3px solid #fff;
  box-shadow:0 2px 8px rgba(91,45,145,.4);cursor:pointer;
}

/* 어두운 배경 위 입력창 */
.ps-cosmic input,.ps-cosmic select,.ps-cosmic textarea,
.ps-on-dark input,.ps-on-dark select,.ps-on-dark textarea{
  background:rgba(255,255,255,.07);
  border-color:var(--ps-line-on-dark-soft);
  color:var(--ps-text-on-dark);
}
.ps-cosmic input::placeholder,.ps-on-dark input::placeholder{ color:rgba(242,237,250,.45); }


/* =====================================================================
   4. 카드
   ---------------------------------------------------------------------
   디자인 시스템 05번의 4종 (기본 / BEST / 리포트요약 / 알림·안내)
   ===================================================================== */
.card{
  background:var(--ps-white);
  border:1px solid var(--ps-line);
  border-radius:var(--ps-radius);
  box-shadow:var(--ps-shadow-sm);
}
.card-pad{ padding:24px; }

.ps-card-hover{ transition:transform .25s var(--ps-ease),box-shadow .25s var(--ps-ease),border-color .25s; }
.ps-card-hover:hover{ transform:translateY(-4px);box-shadow:var(--ps-shadow);border-color:var(--ps-purple-200); }

/* BEST 카드 — 골드 테두리 + 리본 */
.ps-card-best{
  position:relative;
  border:1.5px solid var(--ps-gold);
  background:linear-gradient(180deg,#FFFDF6,#FFFFFF);
  box-shadow:var(--ps-shadow-gold);
}
.ps-card-best::before{
  content:attr(data-badge);
  position:absolute;top:0;right:0;
  padding:6px 14px;font-size:11px;font-weight:800;letter-spacing:.08em;
  color:var(--ps-cosmic-900);background:var(--ps-grad-gold);
  border-radius:0 var(--ps-radius) 0 var(--ps-radius);
}

/* 리포트 요약 카드 */
.ps-card-summary{
  background:var(--ps-white);
  border:1px solid var(--ps-line);
  border-left:3px solid var(--ps-purple-500);
  border-radius:var(--ps-radius);
  padding:20px 22px;
}
.ps-card-summary .ps-sum-title{
  font-family:var(--font-title);font-weight:600;
  color:var(--navy);margin-bottom:12px;
}
.ps-card-summary ul li{
  position:relative;padding-left:22px;margin-bottom:8px;
  font-size:var(--fs-body2);color:var(--ps-text-soft);
}
.ps-card-summary ul li::before{
  content:'';position:absolute;left:0;top:.55em;width:12px;height:8px;
  border-left:2px solid var(--ps-purple-500);border-bottom:2px solid var(--ps-purple-500);
  transform:rotate(-45deg);
}

/* 알림 / 안내 카드 */
.ps-card-notice,.notice{
  background:var(--ps-purple-50);
  border:1px solid var(--ps-line-soft);
  border-radius:var(--ps-radius);
  padding:16px 18px;
  color:var(--ps-text-soft);
  font-size:var(--fs-body2);
}
.ps-card-notice.is-warn{ background:#FDF6E3;border-color:#EFDFAE;color:#7A5E14; }
.ps-card-notice.is-error{ background:#FBEDEA;border-color:#EFCFC8;color:#8C3B2E; }

/* 어두운 배경 위 카드 (유리 느낌) */
.ps-card-glass{
  background:rgba(255,255,255,.055);
  border:1px solid var(--ps-line-on-dark);
  border-radius:var(--ps-radius);
  box-shadow:0 10px 40px rgba(0,0,0,.28);
  color:var(--ps-text-on-dark);
}


/* =====================================================================
   5. 탭 · 뱃지 · 칩 · 스텝
   ===================================================================== */

/* 탭 */
.ps-tabs{
  display:flex;gap:4px;padding:5px;overflow-x:auto;
  background:var(--ps-purple-50);
  border:1px solid var(--ps-line-soft);
  border-radius:var(--ps-radius-sm);
  scrollbar-width:none;
}
.ps-tabs::-webkit-scrollbar{ display:none; }
.ps-tabs button,.ps-tabs a{
  flex:0 0 auto;padding:11px 18px;border:0;background:transparent;
  border-radius:9px;font-size:var(--fs-body2);font-weight:600;
  color:var(--ps-text-mute);white-space:nowrap;cursor:pointer;
  transition:background .18s,color .18s;min-height:44px;
}
.ps-tabs button:hover,.ps-tabs a:hover{ color:var(--ps-purple-600); }
.ps-tabs [aria-selected=true],.ps-tabs .is-active{
  background:var(--ps-grad-royal);color:#fff;box-shadow:var(--ps-shadow-sm);
}

/* 뱃지 */
.ps-badge{
  display:inline-flex;align-items:center;
  padding:4px 11px;border-radius:999px;
  font-size:11px;font-weight:800;letter-spacing:.04em;line-height:1.6;
}
.ps-badge-best{ background:var(--ps-grad-gold);color:var(--ps-cosmic-900); }
.ps-badge-new{ background:var(--ps-purple-100);color:var(--ps-purple-600); }
.ps-badge-event{ background:var(--ps-purple-500);color:#fff; }
.ps-badge-hot{ background:#E0705F;color:#fff; }

/* 칩 */
.ps-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 16px;border-radius:999px;
  border:1px solid var(--ps-line);background:var(--ps-white);
  font-size:var(--fs-body2);color:var(--ps-text-soft);
  cursor:pointer;white-space:nowrap;min-height:40px;
  transition:border-color .18s,background .18s,color .18s;
}
.ps-chip:hover{ border-color:var(--ps-purple-300);color:var(--ps-purple-600); }
.ps-chip.is-active,.ps-chip[aria-pressed=true]{
  background:var(--ps-purple-500);border-color:var(--ps-purple-500);color:#fff;font-weight:600;
}
.ps-chip-row{ display:flex;gap:9px;flex-wrap:wrap; }

/* 키워드 태그 (# 형태) */
.ps-tag{
  display:inline-flex;padding:6px 12px;border-radius:8px;
  background:var(--ps-purple-50);color:var(--ps-purple-600);
  font-size:var(--fs-caption);font-weight:600;
}

/* 스텝 진행 표시 */
.ps-steps{
  display:flex;align-items:flex-start;gap:0;
  counter-reset:ps-step;overflow-x:auto;scrollbar-width:none;
}
.ps-steps::-webkit-scrollbar{ display:none; }
.ps-step{
  flex:1 1 0;min-width:104px;position:relative;text-align:center;
  padding:0 6px;
}
.ps-step::before{                       /* 연결선 */
  content:'';position:absolute;top:17px;left:-50%;width:100%;height:1px;
  background:repeating-linear-gradient(90deg,var(--ps-line) 0 5px,transparent 5px 10px);
}
.ps-step:first-child::before{ display:none; }
.ps-step .ps-step-dot{
  position:relative;z-index:1;margin:0 auto 10px;
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--ps-white);border:1.5px solid var(--ps-line);
  color:var(--ps-text-mute);font-size:var(--fs-body2);font-weight:700;
}
.ps-step .ps-step-label{ font-size:var(--fs-body2);color:var(--ps-text-mute); }
.ps-step.is-done .ps-step-dot{ background:var(--ps-purple-500);border-color:var(--ps-purple-500);color:#fff; }
.ps-step.is-current .ps-step-dot{
  background:var(--ps-grad-royal);border-color:transparent;color:#fff;
  box-shadow:0 0 0 5px rgba(124,77,255,.18);
}
.ps-step.is-done .ps-step-label,.ps-step.is-current .ps-step-label{
  color:var(--ps-text);font-weight:600;
}
.ps-cosmic .ps-step .ps-step-dot{ background:rgba(255,255,255,.06);border-color:var(--ps-line-on-dark);color:var(--ps-text-on-dark-soft); }
.ps-cosmic .ps-step .ps-step-label{ color:var(--ps-text-on-dark-mute); }
.ps-cosmic .ps-step.is-current .ps-step-label,
.ps-cosmic .ps-step.is-done .ps-step-label{ color:var(--ps-text-on-dark); }


/* =====================================================================
   6. 데이터 표현 (게이지 · 도넛 · 막대 · 진행바)
   ---------------------------------------------------------------------
   차트 라이브러리를 쓰지 않고 CSS 만으로 구현합니다.
   ===================================================================== */

/* 원형 게이지 — style 로 --ps-val(0~100) 지정 */
.ps-gauge{
  --ps-val:0;
  position:relative;width:132px;height:132px;border-radius:50%;
  background:conic-gradient(var(--ps-gold) calc(var(--ps-val)*1%),var(--ps-line-soft) 0);
  display:grid;place-items:center;flex:none;
}
.ps-gauge::before{
  content:'';position:absolute;inset:12px;border-radius:50%;background:var(--ps-white);
}
.ps-gauge .ps-gauge-num{
  position:relative;font-family:var(--font-title);font-weight:700;
  font-size:2rem;color:var(--navy);line-height:1;
}
.ps-gauge .ps-gauge-unit{ position:relative;font-size:var(--fs-caption);color:var(--ps-text-mute); }
.ps-gauge.is-purple{ background:conic-gradient(var(--ps-purple-500) calc(var(--ps-val)*1%),var(--ps-line-soft) 0); }
.ps-cosmic .ps-gauge::before{ background:var(--ps-cosmic-800); }
.ps-cosmic .ps-gauge .ps-gauge-num{ color:var(--ps-gold-bright); }

/* 도넛 — 십성 분포용. style 로 --ps-donut 에 conic-gradient 지정 */
.ps-donut{
  --ps-donut:conic-gradient(var(--ps-purple-500) 0 100%);
  position:relative;width:172px;height:172px;border-radius:50%;
  background:var(--ps-donut);display:grid;place-items:center;flex:none;
}
.ps-donut::before{
  content:'';position:absolute;inset:44px;border-radius:50%;background:var(--ps-white);
}
.ps-donut .ps-donut-label{
  position:relative;text-align:center;font-size:var(--fs-caption);
  color:var(--ps-text-soft);line-height:1.4;
}
.ps-legend{ display:flex;flex-direction:column;gap:7px; }
.ps-legend-item{ display:flex;align-items:center;gap:8px;font-size:var(--fs-body2); }
.ps-legend-dot{ width:10px;height:10px;border-radius:3px;flex:none; }
.ps-legend-val{ margin-left:auto;color:var(--ps-text-mute);font-variant-numeric:tabular-nums; }

/* 가로 막대 */
.ps-bar{ display:flex;align-items:center;gap:12px;margin-bottom:11px; }
.ps-bar-name{ width:76px;flex:none;font-size:var(--fs-body2);color:var(--ps-text-soft); }
.ps-bar-track{ flex:1;height:9px;border-radius:999px;background:var(--ps-line-soft);overflow:hidden; }
.ps-bar-fill{
  height:100%;border-radius:999px;background:var(--ps-grad-royal);
  transition:width .8s var(--ps-ease);
}
.ps-bar-val{ width:44px;text-align:right;font-size:var(--fs-body2);color:var(--ps-text-mute);font-variant-numeric:tabular-nums; }

/* 진행바 */
.ps-progress{ height:8px;border-radius:999px;background:var(--ps-line-soft);overflow:hidden; }
.ps-progress > span{ display:block;height:100%;background:var(--ps-grad-gold);transition:width .5s var(--ps-ease); }
.ps-cosmic .ps-progress{ background:rgba(255,255,255,.12); }

/* 오행 색상 유틸 (--el-* 는 이름 유지 — guide.js 가 JS에서 참조) */
.ps-el-wood{ color:var(--el-wood) }   .ps-el-wood-bg{ background:var(--el-wood) }
.ps-el-fire{ color:var(--el-fire) }   .ps-el-fire-bg{ background:var(--el-fire) }
.ps-el-earth{ color:var(--el-earth) } .ps-el-earth-bg{ background:var(--el-earth) }
.ps-el-metal{ color:var(--el-metal) } .ps-el-metal-bg{ background:var(--el-metal) }
.ps-el-water{ color:var(--el-water) } .ps-el-water-bg{ background:var(--el-water) }


/* =====================================================================
   7. 상태 표시 (빈 화면 · 로딩 · 오류)
   ===================================================================== */
.ps-state{
  text-align:center;padding:56px 24px;
  background:var(--ps-white);border:1px solid var(--ps-line);
  border-radius:var(--ps-radius-lg);
}
.ps-state .ps-state-art{
  width:96px;height:96px;margin:0 auto 20px;border-radius:50%;
  background:var(--ps-purple-50);display:grid;place-items:center;
  color:var(--ps-purple-400);
}
.ps-state h3{ margin-bottom:8px; }
.ps-state p{ color:var(--ps-text-soft);font-size:var(--fs-body2); }
.ps-state .ps-state-actions{ display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px; }

/* 스켈레톤 로딩 */
.ps-skeleton{
  background:linear-gradient(90deg,var(--ps-surface-2) 25%,var(--ps-purple-50) 37%,var(--ps-surface-2) 63%);
  background-size:400% 100%;border-radius:8px;
  animation:ps-shimmer 1.5s ease-in-out infinite;
}
@keyframes ps-shimmer{ from{background-position:100% 0} to{background-position:-100% 0} }

/* 스피너 */
.ps-spinner{
  width:34px;height:34px;border-radius:50%;
  border:3px solid var(--ps-line-soft);border-top-color:var(--ps-purple-500);
  animation:ps-spin .9s linear infinite;
}


/* =====================================================================
   8. 섹션 · 레이아웃 보조
   ===================================================================== */
.ps-section{ padding:88px 0; }
.ps-section-sm{ padding:56px 0; }
.ps-wrap{ max-width:var(--ps-maxw);margin:0 auto;padding:0 24px; }
.ps-wrap-narrow{ max-width:var(--ps-maxw-narrow);margin:0 auto;padding:0 24px; }

.ps-divider{ height:1px;background:var(--ps-line);border:0;margin:24px 0; }
.ps-divider-gold{
  height:1px;border:0;margin:28px 0;
  background:linear-gradient(90deg,transparent,var(--ps-gold),transparent);
  opacity:.6;
}

/* 자주 쓰는 그리드 */
.ps-grid-2{ display:grid;grid-template-columns:repeat(2,1fr);gap:20px; }
.ps-grid-3{ display:grid;grid-template-columns:repeat(3,1fr);gap:20px; }
.ps-grid-4{ display:grid;grid-template-columns:repeat(4,1fr);gap:20px; }
.ps-grid-5{ display:grid;grid-template-columns:repeat(5,1fr);gap:16px; }

/* 가로 스크롤 캐러셀 (모바일 상품카드) */
.ps-scroller{
  display:flex;gap:14px;overflow-x:auto;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  padding-bottom:6px;scrollbar-width:none;
}
.ps-scroller::-webkit-scrollbar{ display:none; }
.ps-scroller > *{ scroll-snap-align:start;flex:0 0 auto; }

/* 표가 좁은 화면에서 가로 스크롤되도록 */
.ps-table-scroll{ overflow-x:auto;-webkit-overflow-scrolling:touch; }


/* =====================================================================
   9. 반응형
   ---------------------------------------------------------------------
   기존 프로젝트 브레이크포인트를 그대로 승계합니다.
   1024 (태블릿) / 768 (모바일 · 하단탭 등장) / 520 / 420
   ===================================================================== */

@media (max-width:1024px){
  .ps-grid-4{ grid-template-columns:repeat(2,1fr); }
  .ps-grid-5{ grid-template-columns:repeat(3,1fr); }
  .ps-section{ padding:72px 0; }
}

@media (max-width:768px){
  :root{
    --fs-h1:32px; --fs-h2:24px; --fs-h3:20px; --fs-h4:17px;
  }
  .ps-grid-2,.ps-grid-3,.ps-grid-4,.ps-grid-5{ grid-template-columns:1fr; }
  .ps-section{ padding:56px 0; }
  .ps-section-sm{ padding:40px 0; }
  .ps-wrap,.ps-wrap-narrow{ padding:0 18px; }
  .card-pad{ padding:20px; }
  .btn{ padding:13px 20px; }
  .btn-lg{ padding:15px 24px;font-size:1rem; }

  /* 모바일에서는 PC 그리드를 그대로 줄이지 않고 세로로 재배치 */
  .ps-grid-5{ display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none; }
  .ps-grid-5::-webkit-scrollbar{ display:none; }
  .ps-grid-5 > *{ scroll-snap-align:start;flex:0 0 78%; }

  /* 하단 내비게이션에 본문이 가리지 않도록 (기존 클래스 승계) */
  body.has-bottom-nav{ padding-bottom:78px; }

  .ps-gauge{ width:112px;height:112px; }
  .ps-donut{ width:148px;height:148px; }
  .ps-donut::before{ inset:38px; }
  .ps-step{ min-width:88px; }
  .ps-step .ps-step-label{ font-size:11px; }
}

@media (max-width:520px){
  .ps-bar-name{ width:58px; }
  .ps-state{ padding:40px 18px; }
  .ps-state .ps-state-art{ width:76px;height:76px; }
  .ps-segmented > label{ min-width:0; }
}

@media (max-width:420px){
  .ps-wrap,.ps-wrap-narrow{ padding:0 14px; }
  .btn{ width:100%; }
  .btn.ps-keep-width{ width:auto; }
  .ps-steps{ gap:2px; }
  .ps-gauge{ width:100px;height:100px; }
  .ps-gauge .ps-gauge-num{ font-size:1.6rem; }
}

/* 인쇄 — 리포트 인쇄 대비 기초 (PHASE 11에서 확장) */
@media print{
  .ps-cosmic,.ps-cosmic::before,.ps-starfield::after{ background:#fff !important;color:#000 !important; }
  .btn,.bottom-nav,.site-header,.ps-icon-btn{ display:none !important; }
  .card{ box-shadow:none;border:1px solid #ddd;break-inside:avoid; }
}


/* =====================================================================
   11. 공통 크롬 — Header / Mobile Menu / Footer / Bottom Nav  (PHASE 3)
   ---------------------------------------------------------------------
   PURPLE_SAJU_MASTER 변형 A 디자인 기준.
   기존 클래스명(.site-header/.brand/.mark/.wordmark/.nav-desktop/
   .header-cta/.hamburger/.mobile-menu/.mm-top/.mm-actions/.x-btn/
   .site-footer/.footer-grid/.footer-bottom/.bottom-nav)은
   JS·CSS 훅이므로 이름을 유지하고 스타일만 재정의합니다.
   ===================================================================== */

.ps-ico{ display:block; flex:none; }

/* ---------- 브랜드 로고 ---------- */
.brand{
  display:flex;align-items:center;gap:12px;
  font-family:var(--font-title);color:var(--ps-text-on-dark);
  text-decoration:none;
}
.brand .mark{ display:flex;align-items:center;flex:none; }
.brand .mark svg{ display:block; }
.brand .wordmark{ display:flex;flex-direction:column;gap:2px;line-height:1.15; }
.brand .wordmark b{
  font-family:var(--font-title);font-weight:600;
  font-size:1.18rem;letter-spacing:.16em;color:#fff;
}
.brand .wordmark i{
  font-style:normal;font-family:var(--font-body);
  font-size:11px;letter-spacing:.01em;color:var(--ps-gold-soft);opacity:.9;
}

/* ---------- 헤더 ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(18,11,38,.92);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--ps-line-on-dark);
}
.site-header .wrap{
  display:flex;align-items:center;gap:24px;
  min-height:72px;padding-top:8px;padding-bottom:8px;
}
.nav-desktop{ display:flex;align-items:center;gap:34px;margin-left:auto; }
.nav-desktop a{
  position:relative;padding:8px 0;
  font-size:var(--fs-body2);font-weight:500;
  color:rgba(242,237,250,.86);white-space:nowrap;
  transition:color .18s;
}
.nav-desktop a:hover{ color:#fff; }
.nav-desktop a.active{ color:var(--ps-gold-bright);font-weight:600; }
.nav-desktop a.active::after{
  content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:linear-gradient(90deg,transparent,var(--ps-gold),transparent);
}
.header-cta{ display:flex;align-items:center;gap:10px;margin-left:auto; }
.nav-desktop + .header-cta{ margin-left:0; }
.header-cta .who{
  font-size:var(--fs-body2);color:var(--ps-text-on-dark-soft);
  margin-right:2px;white-space:nowrap;
}
.ps-hd-util{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;
  background:transparent;border:1px solid var(--ps-line-on-dark-soft);
  color:rgba(242,237,250,.86);cursor:pointer;transition:background .18s,color .18s;
}
.ps-hd-util:hover{ background:rgba(255,255,255,.08);color:var(--ps-gold-bright); }

/* 헤더 안의 버튼은 더 작게 */
.site-header .btn-sm{ min-height:40px;padding:9px 18px;font-size:var(--fs-body2); }

/* 햄버거 */
.hamburger{
  display:none;width:44px;height:44px;
  background:transparent;border:0;padding:10px;cursor:pointer;
  flex-direction:column;justify-content:center;gap:5px;
}
.hamburger span{
  display:block;height:2px;width:100%;border-radius:2px;background:#fff;
  transition:transform .2s var(--ps-ease),opacity .2s;
}

/* 준비중 뱃지 */
.ps-soon{
  display:inline-block;margin-left:6px;padding:2px 7px;border-radius:999px;
  font-family:var(--font-body);font-size:10px;font-weight:700;letter-spacing:.02em;
  background:rgba(212,175,55,.16);color:var(--ps-gold-bright);
  border:1px solid rgba(212,175,55,.32);vertical-align:middle;
}
.site-footer .ps-soon{ background:rgba(212,175,55,.12); }

/* ---------- 모바일 드로어 ---------- */
.mm-backdrop{
  position:fixed;inset:0;z-index:70;background:rgba(10,6,22,.6);
  backdrop-filter:blur(2px);
}
.mobile-menu{
  position:fixed;top:0;right:0;bottom:0;z-index:80;
  width:min(88vw,360px);
  background:var(--ps-grad-night);
  border-left:1px solid var(--ps-line-on-dark);
  box-shadow:-20px 0 60px rgba(0,0,0,.45);
  transform:translateX(102%);
  transition:transform .3s var(--ps-ease);
  display:flex;flex-direction:column;
  padding:18px 22px calc(24px + env(safe-area-inset-bottom));
  overflow-y:auto;overscroll-behavior:contain;
}
.mobile-menu.open{ transform:translateX(0); }
.mm-top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:18px;margin-bottom:6px;
  border-bottom:1px solid var(--ps-line-on-dark-soft);
}
.x-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex:none;
  background:transparent;border:0;color:#fff;cursor:pointer;font-size:0;
}
.mm-nav{ display:flex;flex-direction:column;padding:8px 0; }
.mm-nav a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:16px 2px;min-height:56px;
  font-family:var(--font-title);font-size:1.06rem;
  color:rgba(242,237,250,.9);
  border-bottom:1px solid var(--ps-line-on-dark-soft);
}
.mm-nav a:last-child{ border-bottom:0; }
.mm-nav a.active{ color:var(--ps-gold-bright); }
.mm-nav .mm-arrow{ opacity:.4; }
.mm-upcoming{
  margin-top:10px;padding-top:16px;
  border-top:1px solid var(--ps-line-on-dark-soft);
}
.mm-upcoming h5{
  font-family:var(--font-body);font-size:11px;letter-spacing:.16em;
  color:var(--ps-gold-deep);margin:0 0 8px;text-transform:uppercase;
}
.mm-upcoming a{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 2px;min-height:48px;
  font-size:var(--fs-body2);color:rgba(242,237,250,.55);
}
.mm-actions{ display:flex;flex-direction:column;gap:10px;margin-top:auto;padding-top:22px; }
.mm-actions .btn-ghost{ border-color:rgba(255,255,255,.34);color:#fff; }
.mm-actions .btn-ghost:hover{ background:rgba(255,255,255,.1); }

/* ---------- 푸터 ---------- */
.site-footer{
  background:var(--ps-cosmic-950);
  color:var(--ps-text-on-dark-soft);
  border-top:1px solid var(--ps-line-on-dark);
  padding:56px 0 28px;
  margin-top:0;
}
.site-footer .wrap{ max-width:var(--ps-maxw);margin:0 auto;padding:0 24px; }
.footer-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr;
  gap:32px;
  padding-bottom:32px;
}
/* 컬럼 사이 세로 구분선 (디자인 참조) */
.footer-grid > div + div{
  border-left:1px solid var(--ps-line-on-dark-soft);
  padding-left:32px;
}
.site-footer h5{
  font-family:var(--font-body);
  font-size:var(--fs-body1);font-weight:700;
  color:var(--ps-gold);margin:0 0 16px;
}
.site-footer a{
  display:block;padding:5px 0;
  font-size:var(--fs-body2);color:rgba(242,237,250,.7);
  transition:color .18s;
}
.site-footer a:hover{ color:var(--ps-gold-bright); }
.ps-ft-brand .brand{ margin-bottom:14px; }
.ps-ft-tag{ font-size:var(--fs-body2);color:rgba(242,237,250,.62);margin-bottom:18px; }
.ps-social{ display:flex;gap:10px; }
.ps-social a,.ps-social .is-off{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;padding:0;
  background:rgba(124,77,255,.22);color:var(--ps-purple-200);
  transition:background .18s,color .18s;
}
.ps-social a:hover{ background:var(--ps-purple-500);color:#fff; }
.ps-social .is-off{ opacity:.4;cursor:default; }
.ps-ft-contact a{
  display:flex;align-items:center;gap:9px;padding:6px 0;
  color:var(--ps-text-on-dark);
}
.ps-ft-contact a b{ font-size:1.16rem;font-weight:700;letter-spacing:.01em; }
.ps-ft-contact .ps-ft-hours{
  font-size:var(--fs-body2);color:rgba(242,237,250,.62);
  line-height:1.6;margin:6px 0 10px;
}
.footer-bottom{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding-top:22px;border-top:1px solid var(--ps-line-on-dark-soft);
  text-align:center;font-size:var(--fs-caption);
  color:rgba(242,237,250,.45);
}
.ps-ft-disclaimer{ max-width:62ch;line-height:1.6; }

/* ---------- 모바일 하단 내비 ----------
   디자인상 하단 내비는 '밝은' 배경입니다 (어두운 헤더와 대비). */
.bottom-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:55;
  display:none;
  background:var(--ps-surface);
  border-top:1px solid var(--ps-line);
  box-shadow:0 -4px 20px rgba(26,16,51,.08);
  padding-bottom:env(safe-area-inset-bottom);
}
.bottom-nav ul{ display:flex;align-items:stretch;margin:0;padding:0;list-style:none; }
.bottom-nav li{ flex:1 1 0; }
.bottom-nav a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-height:60px;padding:8px 2px;
  font-size:11px;font-weight:500;color:var(--ps-text-soft);
  transition:color .18s;
}
.bottom-nav .bi{ display:flex;align-items:center;justify-content:center;height:24px; }
.bottom-nav a.active{ color:var(--ps-purple-600);font-weight:700; }
.bottom-nav a:active{ background:var(--ps-purple-50); }

/* ---------- 토스트 ---------- */
.ps-toast{
  position:fixed;left:50%;bottom:calc(88px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(12px);
  z-index:200;max-width:min(90vw,420px);
  padding:13px 20px;border-radius:999px;
  background:rgba(26,16,51,.94);color:#fff;
  font-size:var(--fs-body2);text-align:center;
  box-shadow:var(--ps-shadow);
  opacity:0;pointer-events:none;
  transition:opacity .22s,transform .22s var(--ps-ease);
}
.ps-toast.show{ opacity:1;transform:translateX(-50%) translateY(0); }

/* ---------- 크롬 반응형 ---------- */
@media (max-width:1024px){
  .nav-desktop{ gap:22px; }
  .footer-grid{ grid-template-columns:1.4fr 1fr 1fr;row-gap:28px; }
  .footer-grid > div + div{ border-left:0;padding-left:0; }
  .ps-ft-brand{ grid-column:1 / -1; }
}

@media (max-width:768px){
  .site-header .wrap{ min-height:64px;gap:12px; }
  .nav-desktop{ display:none; }
  .header-cta .btn,
  .header-cta .who,
  .ps-hd-util{ display:none; }
  .hamburger{ display:flex;margin-left:auto; }

  .bottom-nav{ display:block; }
  body.has-bottom-nav{ padding-bottom:78px; }

  .site-footer{ padding:40px 0 24px; }
  .footer-grid{ grid-template-columns:1fr 1fr;gap:24px; }
  .ps-ft-brand,.ps-ft-contact{ grid-column:1 / -1; }
  .footer-bottom{ font-size:11px; }
}

@media (max-width:420px){
  .footer-grid{ grid-template-columns:1fr; }
  .bottom-nav a{ font-size:10px; }
  .site-header .wrap{ padding-left:14px;padding-right:14px; }
}

/* 인쇄 시 크롬 숨김 */
@media print{
  .site-header,.site-footer,.bottom-nav,.mobile-menu,.mm-backdrop,.ps-toast{ display:none !important; }
  body.has-bottom-nav{ padding-bottom:0 !important; }
}


/* =====================================================================
   12. 레거시 잔재 무효화 (PHASE 3)
   ---------------------------------------------------------------------
   style.css 에 남아 있는 구 디자인 규칙 중,
   같은 선택자로 덮이지 않는 속성만 명시적으로 되돌립니다.
   (style.css 를 직접 지우지 않는 이유 — 되돌릴 수 있게 남겨두기 위함)
   ===================================================================== */

/* 구 로고: 골드 원형 + 책 모양 가상요소 → 나침반 SVG 로 교체했으므로 제거 */
.brand .mark{
  width:auto;height:auto;border-radius:0;
  background:none;box-shadow:none;position:static;
}
.brand .mark::before,
.brand .mark::after{ content:none;display:none; }
.brand .wordmark{ letter-spacing:normal; }

/* 헤더 높이 고정 해제 (태그라인 2줄이 들어가므로) */
.site-header .wrap{ height:auto;justify-content:flex-start; }

/* 구 모바일 메뉴는 전체화면(inset:0) — 우측 드로어로 바꿨으므로 left 해제 */
.mobile-menu{ inset:auto;left:auto;top:0;right:0;bottom:0; }

/* 구 하단탭의 가운데 돌출 버튼(.center-cta)은 최종 디자인에 없습니다 */
.bottom-nav a.center-cta .bi{
  background:none;color:inherit;border-radius:0;
  width:auto;height:auto;margin-top:0;box-shadow:none;
}
.bottom-nav{ padding:0 0 env(safe-area-inset-bottom); }

/* 드로어 안의 <a class="btn"> 이 style.css 의 .mobile-menu a 규칙에
   눌려 display:block / 좌측정렬이 되는 문제를 바로잡습니다. */
.mobile-menu .btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 26px;border-bottom:0;
  font-size:var(--fs-body1);font-family:var(--font-body);
}
.mobile-menu .btn-block{ display:flex;width:100%; }
.mobile-menu .btn-lg{ padding:17px 34px; }

/* 모바일 헤더 — 디자인 이미지 기준으로 로고·태그라인을 그대로 노출합니다 */
@media (max-width:768px){
  .brand .wordmark b{ font-size:1.08rem;letter-spacing:.14em; }
  .brand .wordmark i{ display:block;font-size:10.5px; }
  .brand .mark svg{ width:40px;height:40px; }
  .site-header .wrap{ min-height:68px; }
}
@media (max-width:340px){
  .brand .wordmark i{ display:none; }   /* 초소형 기기에서만 숨김 */
  .brand .wordmark b{ font-size:1rem; }
}


/* =====================================================================
   13. COSMIC 보정 (PHASE 2·3 디자인 반영도 개선)
   ---------------------------------------------------------------------
   기준: PURPLE_SAJU_MASTER 실제 PC/MOBILE 화면 이미지 (1순위)
   목표: "깔끔한 퍼플 사이트"가 아니라 "PURPLE SAJU 세계 안"

   구성
     A. 천체 레이어 (.ps-sky) — 성운 / 별밭 / 황도휠 / 궤도 / 달 / 별자리
     B. 골드 장식 (.ps-orn, 골드 헤어라인)
     C. 헤더 / 드로어 / 푸터 / 하단 내비 재작업
   ===================================================================== */


/* =====================================================================
   A. 천체 레이어
   ===================================================================== */
.ps-sky{
  position:absolute;inset:0;z-index:0;
  pointer-events:none;overflow:hidden;
}
.ps-sky > span{ position:absolute;display:block; }
.ps-cel{ display:block;width:100%;height:100%; }

/* 성운 — 보랏빛 번짐 */
.ps-sky-neb{
  border-radius:50%;filter:blur(28px);
}
.ps-sky-neb-l{
  left:-8%;top:-160%;width:46%;height:420%;
  background:radial-gradient(closest-side,rgba(124,77,255,.34),transparent 70%);
}
.ps-sky-neb-r{
  right:-10%;top:-190%;width:52%;height:460%;
  background:radial-gradient(closest-side,rgba(184,124,255,.24),rgba(212,175,55,.07) 55%,transparent 72%);
}
.ps-sky-neb-t{
  left:-30%;top:-14%;width:160%;height:52%;
  background:radial-gradient(closest-side,rgba(124,77,255,.30),transparent 70%);
}

/* 별밭 */
.ps-sky-stars{
  inset:0;width:100%;height:100%;
  opacity:.85;
  animation:ps-sky-twinkle 6.5s ease-in-out infinite alternate;
}
@keyframes ps-sky-twinkle{ from{opacity:.6} to{opacity:1} }

/* 황도 12궁 휠 */
.ps-sky-zodiac{
  right:-70px;top:50%;width:230px;height:230px;
  transform:translateY(-50%);
  opacity:.5;
  animation:ps-sky-rotate 180s linear infinite;
}
.ps-sky-zodiac-lg{
  right:-130px;top:-40px;width:420px;height:420px;transform:none;opacity:.34;
}

/* 궤도 */
.ps-sky-orbit{
  right:-90px;bottom:-70px;width:280px;height:280px;opacity:.5;
  animation:ps-sky-rotate 220s linear infinite reverse;
}
@keyframes ps-sky-rotate{ to{ transform:rotate(360deg) } }
.ps-sky-zodiac{ transform-origin:50% 50%; }

/* 달 */
.ps-sky-moon{ opacity:.9; }
.site-footer .ps-sky-moon{ left:6%;top:26px;width:72px;height:72px; }
.mobile-menu .ps-sky-moon{ right:26px;top:120px;width:54px;height:54px;opacity:.55; }

/* 별자리 */
.ps-sky-const{ left:26%;top:18px;width:230px;height:140px;opacity:.55; }

/* 움직임 최소화 설정 존중 */
@media (prefers-reduced-motion: reduce){
  .ps-sky-zodiac,.ps-sky-orbit,.ps-sky-stars{ animation:none !important; }
}


/* =====================================================================
   B. 골드 장식
   ===================================================================== */

/* 골드 헤어라인 — 단색 선이 아니라 중앙이 밝은 그라디언트 */
.ps-goldline{
  height:1px;border:0;
  background:linear-gradient(90deg,
    transparent 0%, rgba(212,175,55,.15) 15%,
    rgba(240,213,122,.70) 50%,
    rgba(212,175,55,.15) 85%, transparent 100%);
}

/* 장식 구분선 (◆) */
.ps-orn{ display:flex;justify-content:center;pointer-events:none; }
.ps-orn svg{ width:100%;max-width:420px;height:20px; }
.ps-orn-sm svg{ max-width:300px; }
.ps-orn-top{ position:relative;z-index:1;margin:0 0 30px; }

/* 골드 텍스트 그라디언트 (제목 포인트용) */
.ps-gold-text{
  background:linear-gradient(120deg,#FFF8E2 0%,#F0D57A 38%,#D4AF37 62%,#A8842A 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}


/* =====================================================================
   C-1. 헤더
   ===================================================================== */
.site-header{
  position:sticky;top:0;z-index:60;
  overflow:hidden;
  background:
    linear-gradient(180deg,rgba(18,11,38,.97) 0%,rgba(26,16,51,.95) 60%,rgba(36,21,72,.94) 100%);
  backdrop-filter:saturate(150%) blur(12px);
  -webkit-backdrop-filter:saturate(150%) blur(12px);
  border-bottom:0;
  box-shadow:0 10px 34px rgba(10,6,22,.34);
}
/* 하단 골드 헤어라인 */
.site-header::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;z-index:2;
  background:linear-gradient(90deg,
    transparent 0%, rgba(212,175,55,.12) 12%,
    rgba(240,213,122,.62) 50%,
    rgba(212,175,55,.12) 88%, transparent 100%);
}
.site-header .wrap{ position:relative;z-index:1; }

/* 로고 */
.brand .mark svg{ transition:transform .5s var(--ps-ease); }
.brand:hover .mark svg{ transform:rotate(22deg); }
.brand .wordmark b{
  font-family:var(--font-title);font-weight:600;
  font-size:1.2rem;letter-spacing:.2em;
  color:#FDFAF3;
  text-shadow:0 0 18px rgba(240,213,122,.28);
}
.brand .wordmark i{
  font-style:normal;font-family:var(--font-body);
  font-size:11px;font-weight:500;letter-spacing:.02em;
  color:#E3CD8F;opacity:.95;
}

/* 내비게이션 — 프리미엄 타이포 */
.nav-desktop a{
  font-size:.94rem;font-weight:500;letter-spacing:.045em;
  color:rgba(240,235,250,.82);
  text-shadow:0 1px 10px rgba(0,0,0,.3);
}
.nav-desktop a:hover{ color:#FFF;text-shadow:0 0 14px rgba(184,156,255,.6); }
.nav-desktop a.active{
  color:#F5DFA4;font-weight:600;
  text-shadow:0 0 16px rgba(240,213,122,.45);
}
.nav-desktop a.active::after{
  bottom:-6px;height:1.5px;border-radius:2px;
  background:linear-gradient(90deg,transparent,#F0D57A,transparent);
  box-shadow:0 0 10px rgba(240,213,122,.7);
}
/* 메뉴 사이 아주 얇은 골드 점 */
.nav-desktop a + a::before{
  content:'';position:absolute;left:-17px;top:50%;
  width:2px;height:2px;border-radius:50%;
  background:rgba(212,175,55,.4);transform:translateY(-50%);
}

/* 헤더 버튼 */
.site-header .btn-ghost{
  border-color:rgba(212,175,55,.6);color:#F0D57A;
  background:rgba(212,175,55,.05);
}
.site-header .btn-ghost:hover{
  background:rgba(212,175,55,.14);
  box-shadow:0 0 18px rgba(212,175,55,.28);
}
.site-header .btn-primary{
  background:linear-gradient(135deg,#7C4DFF 0%,#9B7BFF 100%);
  box-shadow:0 6px 20px rgba(124,77,255,.44),0 0 0 1px rgba(184,156,255,.35) inset;
}
.site-header .btn-primary:hover{ box-shadow:0 8px 28px rgba(124,77,255,.6); }

/* 햄버거 — 골드 라인 */
.hamburger span{
  background:linear-gradient(90deg,#F0D57A,#D4AF37);
  box-shadow:0 0 8px rgba(240,213,122,.35);
}
.hamburger span:nth-child(2){ width:76%;align-self:flex-end; }


/* =====================================================================
   C-2. 모바일 드로어
   ===================================================================== */
.mobile-menu{
  background:
    linear-gradient(180deg,#160D2E 0%,#1E1240 45%,#2A1550 100%);
  border-left:1px solid rgba(212,175,55,.28);
  box-shadow:-24px 0 70px rgba(0,0,0,.55);
  overflow:hidden;
}
.mobile-menu > *:not(.ps-sky){ position:relative;z-index:1; }
.mobile-menu{ overflow-y:auto; }
.mm-top{ border-bottom:0;padding-bottom:14px; }
.mm-nav a{
  border-bottom:1px solid rgba(240,235,250,.09);
  letter-spacing:.02em;
}
.mm-nav a:hover{ color:#F5DFA4; }
.mm-nav a.active{
  color:#F5DFA4;
  text-shadow:0 0 14px rgba(240,213,122,.4);
}
.mm-nav a.active::before{
  content:'';position:absolute;left:-22px;width:3px;height:22px;border-radius:2px;
  background:linear-gradient(180deg,#F0D57A,#D4AF37);
  box-shadow:0 0 12px rgba(240,213,122,.6);
}
.mm-nav a{ position:relative; }
.mm-upcoming{ border-top:1px solid rgba(212,175,55,.22); }
.mm-upcoming h5{ color:#C9A94A; }


/* =====================================================================
   C-3. 푸터
   ===================================================================== */
.site-footer{
  position:relative;overflow:hidden;
  background:
    linear-gradient(180deg,#1A1033 0%,#150C2A 42%,#0E0720 100%);
  border-top:0;
  padding:0 0 26px;
}
/* 상단 골드 헤어라인 */
.site-footer::before{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;z-index:2;
  background:linear-gradient(90deg,
    transparent 0%, rgba(212,175,55,.1) 12%,
    rgba(240,213,122,.55) 50%,
    rgba(212,175,55,.1) 88%, transparent 100%);
}
.site-footer .wrap{ position:relative;z-index:1;padding-top:44px; }
.site-footer h5{
  position:relative;
  color:#E3C367;letter-spacing:.06em;font-size:.95rem;
  padding-bottom:10px;margin-bottom:14px;
}
.site-footer h5::after{
  content:'';position:absolute;left:0;bottom:0;width:26px;height:1px;
  background:linear-gradient(90deg,rgba(240,213,122,.85),transparent);
}
.site-footer a{ color:rgba(240,235,250,.66);letter-spacing:.01em; }
.site-footer a:hover{ color:#F5DFA4;text-shadow:0 0 12px rgba(240,213,122,.35); }
.footer-grid > div + div{ border-left:1px solid rgba(240,235,250,.08); }

.ps-ft-tag{ color:#D9C79A;font-size:.9rem;letter-spacing:.01em; }
.ps-social a,.ps-social .is-off{
  background:rgba(124,77,255,.16);
  border:1px solid rgba(212,175,55,.24);
  color:#D9C9FF;
}
.ps-social a:hover{
  background:rgba(124,77,255,.4);color:#FFF;
  box-shadow:0 0 16px rgba(124,77,255,.5);
}
.ps-ft-contact a b{ color:#F5DFA4;text-shadow:0 0 14px rgba(240,213,122,.3); }

.footer-bottom{
  position:relative;z-index:1;
  border-top:0;padding-top:26px;margin-top:8px;
  color:rgba(240,235,250,.42);
}
.footer-bottom::before{
  content:'';position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:min(100%,520px);height:1px;
  background:linear-gradient(90deg,transparent,rgba(212,175,55,.35),transparent);
}
.ps-ft-seal{ display:block;margin:0 auto 12px;opacity:.85; }
.ps-ft-seal svg{ margin:0 auto; }


/* =====================================================================
   C-4. 모바일 하단 내비게이션
   ---------------------------------------------------------------------
   ⚠ 최종 디자인 이미지(HOME / ABOUT / FREE_RESULT 모바일 3종 교차 확인)에서
     하단 바는 '밝은' 배경입니다. 디자인 우선 원칙에 따라 밝은 톤을 유지하되,
     골드 헤어라인 · 활성 글로우 · 여백으로 프리미엄 감을 올렸습니다.
     (딥 퍼플 바를 원하시면 아래 .bottom-nav--dark 를 켜면 됩니다)
   ===================================================================== */
.bottom-nav{
  background:linear-gradient(180deg,#FFFFFF 0%,#F6F1FF 100%);
  border-top:0;
  box-shadow:0 -6px 26px rgba(26,16,51,.10);
}
.bottom-nav::before{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,
    transparent 0%, rgba(212,175,55,.18) 14%,
    rgba(212,175,55,.62) 50%,
    rgba(212,175,55,.18) 86%, transparent 100%);
}
.bottom-nav{ position:fixed; }
.bottom-nav a{
  position:relative;min-height:66px;gap:5px;
  font-size:11.5px;letter-spacing:-.01em;color:#5B5470;
}
.bottom-nav .bi{ position:relative;height:26px; }
/* 활성 — 보랏빛 글로우 */
.bottom-nav a.active{ color:var(--ps-purple-600);font-weight:700; }
.bottom-nav a.active .bi::before{
  content:'';position:absolute;left:50%;top:50%;
  width:42px;height:42px;transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(closest-side,rgba(124,77,255,.22),transparent 72%);
}
.bottom-nav a.active .ps-ico{
  filter:drop-shadow(0 3px 8px rgba(124,77,255,.45));
}
.bottom-nav a:active{ background:rgba(124,77,255,.06); }

/* 선택 옵션 — 딥 퍼플 하단바 (원하실 때 body 에 클래스 추가) */
body.nav-dark .bottom-nav{
  background:linear-gradient(180deg,#241548 0%,#1A1033 100%);
  box-shadow:0 -6px 26px rgba(0,0,0,.4);
}
body.nav-dark .bottom-nav a{ color:rgba(240,235,250,.62); }
body.nav-dark .bottom-nav a.active{ color:#F5DFA4; }
body.nav-dark .bottom-nav a.active .bi::before{
  background:radial-gradient(closest-side,rgba(240,213,122,.28),transparent 72%);
}


/* =====================================================================
   C-5. 크롬 반응형 보정
   ===================================================================== */
@media (max-width:768px){
  .site-header .wrap{ min-height:72px; }
  .ps-sky-zodiac{ right:-96px;width:190px;height:190px;opacity:.4; }
  .ps-sky-const{ display:none; }
  .site-footer .ps-sky-moon{ left:auto;right:18px;top:18px;width:54px;height:54px;opacity:.7; }
  .ps-sky-zodiac-lg{ right:-160px;top:-20px;width:320px;height:320px;opacity:.26; }
  .ps-orn-top{ margin-bottom:22px; }
  .ps-orn svg{ max-width:280px; }
  .site-footer .wrap{ padding-top:32px; }
}

@media (max-width:420px){
  .brand .wordmark b{ font-size:1.05rem;letter-spacing:.16em; }
  .bottom-nav a{ min-height:62px;font-size:10.5px; }
}

/* 인쇄 — 장식 전부 숨김 */
@media print{
  .ps-sky,.ps-orn,.ps-ft-seal{ display:none !important; }
}

/* ---------- 크롬 보정 2차 ---------- */
/* 워드마크·태그라인 줄바꿈 방지 */
.brand .wordmark{ white-space:nowrap; }
.brand .wordmark b,.brand .wordmark i{ white-space:nowrap;display:block; }

/* PC 내비는 1024px 초과에서만 노출.
   769~1023px 구간은 6개 메뉴 + 버튼 2개가 물리적으로 들어가지 않아
   햄버거로 전환합니다. (디자인의 PC 레이아웃은 1200px 기준) */
@media (max-width:1023px){
  .nav-desktop{ display:none; }
  .header-cta .btn,.header-cta .who,.ps-hd-util{ display:none; }
  .hamburger{ display:flex;margin-left:auto; }
  .bottom-nav{ display:block; }
  body.has-bottom-nav{ padding-bottom:78px; }
}
@media (min-width:1024px){
  .nav-desktop{ display:flex; }
  .header-cta .btn,.header-cta .who{ display:inline-flex; }
  .hamburger{ display:none; }
  .bottom-nav{ display:none; }
  body.has-bottom-nav{ padding-bottom:0; }
}
/* 1024~1180 구간은 메뉴 간격만 좁혀서 수용 */
@media (min-width:1024px) and (max-width:1180px){
  .nav-desktop{ gap:20px; }
  .nav-desktop a + a::before{ left:-11px; }
  .site-header .wrap{ gap:14px; }
}

/* ---------- 크롬 보정 3차 : 대비 정리 ---------- */
/* 푸터 바탕을 조금 더 깊게 — 성운이 너무 밝아 글자 대비가 떨어졌습니다 */
.site-footer{
  background:
    radial-gradient(120% 80% at 78% 18%, rgba(124,77,255,.16), transparent 62%),
    linear-gradient(180deg,#1B1136 0%,#130A28 46%,#0B0519 100%);
}
.site-footer .ps-sky-neb-r{
  background:radial-gradient(closest-side,rgba(184,124,255,.14),rgba(212,175,55,.05) 55%,transparent 72%);
}
.site-footer .ps-sky-neb-l{
  background:radial-gradient(closest-side,rgba(124,77,255,.20),transparent 70%);
}
/* 링크 가독성 */
.site-footer a{ color:rgba(243,239,252,.76); }
.ps-ft-tag{ color:#E0CFA6; }
.footer-bottom{ color:rgba(243,239,252,.5); }
.ps-ft-contact .ps-ft-hours{ color:rgba(243,239,252,.68); }

/* 푸터 하단 인장(나침반) 살짝 키우고 골드 헤일로 */
.ps-ft-seal{ opacity:.95;filter:drop-shadow(0 0 12px rgba(240,213,122,.35)); }

/* ---------- 크롬 보정 4차 ---------- */
/* 드로어의 달이 메뉴 글자와 겹쳐 가독성을 해쳤습니다.
   달은 여백이 있는 푸터에만 두고, 드로어는 별밭 + 궤도로 정리합니다. */
.mobile-menu .ps-sky-moon{ display:none; }
.mobile-menu .ps-sky-orbit{ right:-110px;bottom:-90px;width:320px;height:320px;opacity:.42; }

/* 골드 CTA — 너무 쨍한 노랑이 되지 않도록 샴페인 쪽으로 */
.btn-gold{
  background:linear-gradient(135deg,#F6E4B4 0%,#E3C367 46%,#C9A34A 100%);
  color:#241548;
  box-shadow:0 10px 26px rgba(201,163,74,.34),0 0 0 1px rgba(255,248,226,.35) inset;
}
.btn-gold:hover{ filter:brightness(1.04); }

/* 드로어 메뉴 항목 사이 여백을 살짝 넓혀 프리미엄 감 */
.mm-nav a{ padding:17px 2px;font-size:1.1rem; }


/* =====================================================================
   14. HOME  (PHASE 4)
   ---------------------------------------------------------------------
   기준: PS_01_01_HOME_PC_V01 / PS_01_01_HOME_MOBILE_V01

   이미지 에셋
     · assets/img/brand/hero-celestial.jpg      메인 히어로 (여성 + 천체구)
     · assets/img/brand/cosmic-nebula-bg.jpg    우주·성운 베이스 배경
     · assets/img/brand/celestial-temple.jpg    천체 신전 · 빛의 계단

   원칙
     · 우주 배경은 브랜드/전환 영역에만. 읽는 영역은 밝은 Surface 유지
     · 이미지가 1차 레이어, SVG 별/궤도는 깊이 보강용으로 은은하게
   ===================================================================== */

/* 공통 섹션 헤드 */
.ps-sec-head{ margin-bottom:40px; }
.ps-sec-head.center{ text-align:center; }
.ps-sec-lead{ color:var(--ps-text-soft);font-size:1.02rem;margin-top:10px; }
.ps-products .ps-sec-lead,.ps-trust .ps-sec-lead{ color:rgba(243,239,252,.72); }
.ps-sec-head.center .ps-orn{ margin-top:18px; }

/* 브랜드 워드 강조 */
.ps-brandword{
  font-style:normal;font-family:var(--font-title);letter-spacing:.06em;
  background:linear-gradient(100deg,#5B2D91,#7C4DFF 55%,#B89CFF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ps-brandword.on-dark{
  background:linear-gradient(100deg,#F0D57A,#E8C877 45%,#FFF6DA);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}


/* =====================================================================
   1. HERO
   ===================================================================== */
.ps-hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(520px,72vh,720px);
  display:flex;align-items:center;
  color:var(--ps-text-on-dark);
}
/* 성운 배경 이미지 (1차 레이어) */
.ps-hero-bg{
  position:absolute;inset:0;z-index:-3;
  background:#120B26 url('../img/brand/cosmic-nebula-bg.jpg') center/cover no-repeat;
}
/* 이미지 위에 좌→우 어둡게 : 좌측 카피 가독성 확보 */
.ps-hero-bg::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(100deg, rgba(12,7,26,.94) 0%, rgba(16,9,34,.86) 34%,
                            rgba(20,12,42,.42) 58%, rgba(20,12,42,.10) 100%),
    linear-gradient(180deg, rgba(12,7,26,.55) 0%, transparent 26%, rgba(12,7,26,.62) 100%);
}
.ps-hero .ps-sky{ z-index:-2; }

/* 인물 — PC 는 우측 */
.ps-hero-figure{
  position:absolute;z-index:-1;
  right:0;top:0;bottom:0;width:58%;
  display:block;pointer-events:none;
}
.ps-hero-figure img{
  width:100%;height:100%;object-fit:cover;object-position:62% 42%;
  /* 좌측 경계를 부드럽게 녹여 배경과 잇습니다 */
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 12%,#000 34%);
          mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 12%,#000 34%);
}

.ps-hero-inner{ position:relative;z-index:1;padding-top:56px;padding-bottom:56px;max-width:var(--ps-maxw); }
.ps-hero-inner > *{ max-width:min(560px,54%); }

.ps-hero-title{
  font-family:var(--font-title);
  font-size:clamp(2.6rem,6.2vw,5rem);
  line-height:1.02;letter-spacing:.06em;font-weight:600;
  color:#FDFAF3;margin:6px 0 14px;
  text-shadow:0 4px 40px rgba(0,0,0,.5),0 0 60px rgba(184,124,255,.24);
}
.ps-hero-tag{
  font-family:var(--font-title);
  font-size:clamp(1.1rem,2.1vw,1.55rem);
  color:#F0D57A;letter-spacing:.01em;margin-bottom:18px;
  text-shadow:0 0 26px rgba(240,213,122,.35);
}
.ps-hero-lead{
  color:rgba(243,239,252,.86);font-size:1.02rem;line-height:1.75;margin-bottom:30px;
}
.ps-hero-cta{ display:flex;gap:12px;flex-wrap:wrap;max-width:none; }
.ps-hero .btn-ghost{
  background:rgba(12,7,26,.55);border-color:rgba(212,175,55,.75);color:#F0D57A;
  backdrop-filter:blur(4px);
}


/* =====================================================================
   2. 골드 퀵링크 바
   ===================================================================== */
.ps-quick{
  position:relative;
  background:linear-gradient(180deg,#170E30 0%,#1C1139 100%);
  border-top:1px solid rgba(212,175,55,.24);
  border-bottom:1px solid rgba(212,175,55,.24);
}
.ps-quick ul{
  display:grid;grid-template-columns:repeat(6,1fr);
  margin:0;padding:0;list-style:none;
}
.ps-quick li + li{ border-left:1px solid rgba(212,175,55,.18); }
.ps-quick a{
  display:flex;align-items:center;gap:12px;justify-content:center;
  padding:20px 12px;min-height:86px;
  color:#E9E2FF;transition:background .2s;
}
.ps-quick a:hover{ background:rgba(124,77,255,.12); }
.ps-quick-ic{ color:#E3C367;flex:none;transition:transform .25s var(--ps-ease); }
.ps-quick a:hover .ps-quick-ic{ transform:translateY(-2px); }
.ps-quick-tx{ display:flex;flex-direction:column;gap:3px;line-height:1.3; }
.ps-quick-tx b{ font-size:.96rem;font-weight:600;color:#FDFAF3; }
.ps-quick-tx i{ font-style:normal;font-size:.78rem;color:rgba(233,226,255,.6); }


/* =====================================================================
   3. 왜 PURPLE SAJU 인가요?  (밝은 영역)
   ===================================================================== */
.ps-why{
  background:linear-gradient(180deg,#FBF9FF 0%,#F5F0FF 100%);
}
.ps-why-grid{
  display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:48px;align-items:start;
}
.ps-why-title{ font-size:clamp(1.6rem,3vw,2.1rem);margin-bottom:14px; }
.ps-why-rule{
  width:180px;height:2px;margin-bottom:38px;
  background:linear-gradient(90deg,var(--ps-purple-500),rgba(212,175,55,.7),transparent);
  border-radius:2px;
}
.ps-why-items{ display:grid;grid-template-columns:repeat(4,1fr);gap:8px; }
.ps-why-item{ text-align:center;padding:0 8px;position:relative; }
.ps-why-item + .ps-why-item::before{
  content:'';position:absolute;left:-4px;top:12px;bottom:12px;width:1px;
  background:linear-gradient(180deg,transparent,var(--ps-line),transparent);
}
.ps-why-ic{
  display:grid;place-items:center;width:64px;height:64px;margin:0 auto 16px;
  border-radius:50%;color:var(--ps-purple-600);
  background:radial-gradient(circle at 34% 28%,#FFFFFF,#EFE9FF 70%);
  border:1px solid rgba(184,156,255,.5);
  box-shadow:0 6px 18px rgba(91,45,145,.12);
}
.ps-why-item h3{ font-size:1.04rem;margin-bottom:8px;color:var(--navy); }
.ps-why-item p{ font-size:.86rem;color:var(--ps-text-soft);line-height:1.6; }

/* 무료사주 프로모 카드 */
.ps-promo{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:var(--ps-radius-lg);
  border:1px solid rgba(212,175,55,.34);
  background:
    radial-gradient(120% 100% at 82% 20%, rgba(124,77,255,.42), transparent 60%),
    linear-gradient(160deg,#2A1550 0%,#1A1033 60%,#150C2A 100%);
  color:var(--ps-text-on-dark);
  padding:34px 32px;
  box-shadow:var(--ps-shadow-lg);
}
.ps-promo .ps-sky{ z-index:-1; }
.ps-promo-orb{
  position:absolute;right:-56px;bottom:-64px;width:230px;height:230px;z-index:-1;opacity:.65;
}
.ps-promo-body h3{
  font-size:1.24rem;line-height:1.5;color:#FDFAF3;margin-bottom:12px;
}
.ps-promo-body p{ font-size:.92rem;color:rgba(243,239,252,.74);line-height:1.7;margin-bottom:24px; }


/* =====================================================================
   4. 분석 리포트 상품 (어두운 영역)
   ===================================================================== */
.ps-products{
  position:relative;isolation:isolate;overflow:hidden;
  color:var(--ps-text-on-dark);
  background:#140B2B url('../img/brand/cosmic-nebula-bg.jpg') center/cover no-repeat;
}
.ps-products::before{
  content:'';position:absolute;inset:0;z-index:-2;
  background:linear-gradient(180deg,rgba(14,8,28,.90) 0%,rgba(18,11,38,.84) 45%,rgba(14,8,28,.92) 100%);
}
.ps-products .ps-sky{ z-index:-1; }
.ps-products h2{ color:#FDFAF3; }

.ps-prod-grid{ display:grid;grid-template-columns:repeat(5,1fr);gap:16px; }
.ps-prod{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:30px 18px 24px;
  border-radius:var(--ps-radius);
  border:1px solid rgba(184,156,255,.26);
  background:linear-gradient(180deg,rgba(42,21,80,.62),rgba(20,12,42,.62));
  backdrop-filter:blur(3px);
  transition:transform .28s var(--ps-ease),border-color .28s,box-shadow .28s;
}
.ps-prod:hover{
  transform:translateY(-6px);
  border-color:rgba(212,175,55,.6);
  box-shadow:0 20px 46px rgba(0,0,0,.42),0 0 32px rgba(124,77,255,.22);
}
.ps-prod-n{
  position:absolute;top:12px;left:50%;transform:translateX(-50%);
  font-family:var(--font-title);font-size:.78rem;letter-spacing:.12em;
  color:rgba(240,213,122,.5);
}
.ps-prod-ic{
  display:grid;place-items:center;width:72px;height:72px;margin:14px 0 16px;
  border-radius:50%;color:#F0D57A;
  border:1px solid rgba(212,175,55,.42);
  background:radial-gradient(circle at 36% 30%,rgba(240,213,122,.18),rgba(124,77,255,.10) 70%);
}
.ps-prod h3{ font-size:1.06rem;color:#FDFAF3;margin-bottom:10px; }
.ps-prod p{ font-size:.85rem;color:rgba(243,239,252,.7);line-height:1.65;margin-bottom:16px;flex:1; }
.ps-prod-pages{
  font-family:var(--font-title);font-size:1.1rem;color:#F0D57A;
  margin-bottom:16px;letter-spacing:.02em;
}
.ps-prod .btn{ width:100%; }

/* BEST 카드 */
.ps-prod.is-best{
  border-color:rgba(212,175,55,.7);
  background:linear-gradient(180deg,rgba(58,30,102,.72),rgba(26,16,51,.72));
  box-shadow:0 16px 40px rgba(0,0,0,.4),0 0 30px rgba(212,175,55,.18);
}
.ps-prod.is-best .ps-prod-ic{
  border-color:rgba(212,175,55,.8);
  box-shadow:0 0 26px rgba(240,213,122,.28);
}
.ps-prod-ribbon{
  position:absolute;top:14px;right:-34px;width:120px;
  transform:rotate(45deg);
  background:var(--ps-grad-gold);color:#241548;
  font-size:11px;font-weight:800;letter-spacing:.1em;text-align:center;
  padding:5px 0;z-index:1;
}


/* =====================================================================
   5. 여정 — 천체 신전
   ===================================================================== */
.ps-journey{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(440px,58vh,600px);
  display:flex;align-items:center;
  color:var(--ps-text-on-dark);
}
.ps-journey-bg{ position:absolute;inset:0;z-index:-2;display:block; }
.ps-journey-bg img{ width:100%;height:100%;object-fit:cover;object-position:center 42%; }
/* 글자를 얹을 좌측만 어둡게 — 신전 이미지는 살립니다 */
.ps-journey-veil{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(95deg, rgba(10,6,22,.92) 0%, rgba(12,7,26,.80) 32%,
                           rgba(14,8,30,.34) 56%, rgba(14,8,30,.06) 100%),
    linear-gradient(180deg, rgba(10,6,22,.5) 0%, transparent 22%, rgba(10,6,22,.55) 100%);
}
.ps-journey-inner{ position:relative;z-index:1;padding:64px 24px; }
.ps-journey-inner > *{ max-width:min(520px,58%); }
.ps-journey-inner h2{
  font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.32;color:#FDFAF3;margin:8px 0 14px;
  text-shadow:0 3px 26px rgba(0,0,0,.55);
}
.ps-journey-lead{ color:rgba(243,239,252,.82);font-size:1rem;margin-bottom:26px; }
.ps-journey-marks{
  display:flex;gap:10px;flex-wrap:wrap;margin:0 0 30px;padding:0;list-style:none;max-width:none;
}
.ps-journey-marks li{
  display:flex;align-items:center;gap:9px;
  padding:10px 16px;border-radius:999px;
  border:1px solid rgba(212,175,55,.42);
  background:rgba(12,7,26,.5);backdrop-filter:blur(4px);
  font-size:.88rem;color:#F3EFFC;
}
.ps-journey-marks b{ font-family:var(--font-title);color:#F0D57A;font-size:.82rem;letter-spacing:.08em; }


/* =====================================================================
   6. 이용 방법 (밝은 영역)
   ===================================================================== */
.ps-howto{ background:linear-gradient(180deg,#FFFFFF 0%,#F8F5FF 100%); }
.ps-howto-steps{
  display:grid;grid-template-columns:repeat(5,1fr);gap:12px;
  margin:0;padding:0;list-style:none;
}
.ps-howto-step{ position:relative;text-align:center;padding:0 6px; }
/* 점선 연결 */
.ps-howto-step + .ps-howto-step::before{
  content:'';position:absolute;left:-50%;top:38px;width:100%;height:1px;
  background:repeating-linear-gradient(90deg,var(--ps-purple-200) 0 4px,transparent 4px 10px);
}
.ps-howto-ic{
  position:relative;z-index:1;
  display:grid;place-items:center;width:76px;height:76px;margin:0 auto 18px;
  border-radius:50%;color:var(--ps-purple-600);
  background:radial-gradient(circle at 34% 28%,#FFFFFF,#EDE6FA 72%);
  border:1px solid rgba(184,156,255,.5);
  box-shadow:0 8px 20px rgba(91,45,145,.12);
}
.ps-howto-ic b{
  position:absolute;top:-4px;right:-2px;
  min-width:24px;height:24px;padding:0 5px;border-radius:999px;
  display:grid;place-items:center;
  background:var(--ps-grad-royal);color:#fff;
  font-family:var(--font-title);font-size:.7rem;letter-spacing:.04em;
  box-shadow:0 4px 12px rgba(124,77,255,.4);
}
.ps-howto-step h3{ font-size:1rem;margin-bottom:8px;color:var(--navy); }
.ps-howto-step p{ font-size:.84rem;color:var(--ps-text-soft);line-height:1.6; }


/* =====================================================================
   7. 신뢰받는 이유 (어두운 영역)
   ===================================================================== */
.ps-trust{
  position:relative;isolation:isolate;overflow:hidden;
  color:var(--ps-text-on-dark);
  padding:72px 0;
}
.ps-trust-bg{
  position:absolute;inset:0;z-index:-3;
  background:#150C2A url('../img/brand/cosmic-nebula-bg.jpg') center 30%/cover no-repeat;
}
.ps-trust-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(120deg,rgba(12,7,26,.93) 0%,rgba(16,9,34,.86) 52%,rgba(20,12,42,.72) 100%);
}
.ps-trust .ps-sky{ z-index:-2; }
.ps-trust .ps-sky-orbit{ right:-60px;top:-40px;bottom:auto;width:300px;height:300px;opacity:.5; }
.ps-trust h2{ color:#FDFAF3;font-size:clamp(1.5rem,2.8vw,2rem);margin-bottom:30px; }

.ps-trust-panel{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-radius:var(--ps-radius-lg);
  border:1px solid rgba(212,175,55,.3);
  background:linear-gradient(180deg,rgba(26,16,51,.6),rgba(12,7,26,.6));
  backdrop-filter:blur(4px);
  overflow:hidden;
}
.ps-trust-item{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:32px 16px;text-align:center;
}
.ps-trust-item + .ps-trust-item{ border-left:1px solid rgba(212,175,55,.2); }
.ps-trust-ic{ color:#E3C367;margin-bottom:6px; }
.ps-trust-n{
  font-family:var(--font-title);font-size:clamp(1.6rem,3vw,2.1rem);
  color:#F0D57A;line-height:1;letter-spacing:.02em;
  text-shadow:0 0 24px rgba(240,213,122,.3);
}
.ps-trust-t{ font-size:.88rem;color:rgba(243,239,252,.72); }


/* =====================================================================
   8. 최종 CTA
   ===================================================================== */
.ps-cta-band{
  position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(100deg,#3B186B 0%,#5B2D91 46%,#7C4DFF 100%);
  color:#fff;
}
.ps-cta-band .ps-sky{ z-index:-1; }
.ps-cta-inner{
  display:flex;align-items:center;justify-content:space-between;gap:26px;
  padding:46px 24px;flex-wrap:wrap;
}
.ps-cta-inner h2{ color:#fff;font-size:clamp(1.4rem,2.6vw,1.9rem);margin-bottom:6px; }
.ps-cta-inner p{ color:rgba(255,255,255,.8);font-size:.96rem; }
.ps-cta-band .btn-primary{
  background:#fff;color:var(--ps-purple-600);
  box-shadow:0 10px 30px rgba(10,6,22,.3);
}
.ps-cta-band .btn-primary:hover{ background:#fff;filter:brightness(.98); }


/* =====================================================================
   HOME 반응형
   ===================================================================== */
@media (max-width:1180px){
  .ps-why-grid{ grid-template-columns:1fr;gap:34px; }
  .ps-prod-grid{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width:1023px){
  .ps-hero-figure{ width:52%; }
  .ps-hero-inner > *{ max-width:min(520px,62%); }
  .ps-quick ul{ grid-template-columns:repeat(3,1fr); }
  .ps-quick li:nth-child(-n+3){ border-bottom:1px solid rgba(212,175,55,.18); }
  .ps-quick li:nth-child(3n+1){ border-left:0; }
}

@media (max-width:768px){
  /* --- HERO : 인물을 위쪽에 세워 두고 카피는 아래로 --- */
  .ps-hero{
    min-height:0;display:block;
    padding-top:clamp(230px,58vw,320px);   /* 인물이 보일 공간 확보 */
  }
  .ps-hero-figure{
    left:0;right:0;top:0;bottom:auto;width:100%;
    height:clamp(300px,74vw,420px);
  }
  .ps-hero-figure img{
    object-position:50% 20%;               /* 얼굴 + 손의 천체구가 보이도록 */
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 54%,rgba(0,0,0,.55) 78%,transparent 100%);
            mask-image:linear-gradient(180deg,#000 0%,#000 54%,rgba(0,0,0,.55) 78%,transparent 100%);
  }
  .ps-hero-bg::after{
    background:
      linear-gradient(180deg, rgba(12,7,26,.30) 0%, rgba(12,7,26,.10) 26%,
                              rgba(14,8,30,.72) 54%, rgba(12,7,26,.96) 74%, #120B26 100%);
  }
  .ps-hero-inner{ padding-top:6px;padding-bottom:44px;text-align:center; }
  .ps-hero-inner > *{ max-width:none; }
  .ps-hero-title{ letter-spacing:.08em; }
  .ps-hero-cta{ justify-content:center; }
  .ps-hero-cta .btn{ width:100%; }

  /* --- 퀵링크 : 2열 --- */
  .ps-quick ul{ grid-template-columns:repeat(2,1fr); }
  .ps-quick li{ border-bottom:1px solid rgba(212,175,55,.18); }
  .ps-quick li:nth-child(2n+1){ border-left:0; }
  .ps-quick li:nth-child(3n+1){ border-left:1px solid rgba(212,175,55,.18); }
  .ps-quick li:nth-child(2n+1){ border-left:0; }
  .ps-quick a{ justify-content:flex-start;padding:16px 14px;min-height:72px;gap:10px; }

  /* --- 왜 PURPLE SAJU : 2×2 --- */
  .ps-why-items{ grid-template-columns:repeat(2,1fr);gap:26px 8px; }
  .ps-why-item:nth-child(odd)::before{ display:none; }
  .ps-why-rule{ width:120px;margin-bottom:28px; }
  .ps-promo{ padding:28px 22px; }

  /* --- 상품 : 가로 스크롤 캐러셀 (모바일 시안 기준) --- */
  .ps-prod-grid{
    display:flex;gap:14px;overflow-x:auto;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding:4px 0 10px;margin:0 -18px;padding-left:18px;padding-right:18px;
    scrollbar-width:none;
  }
  .ps-prod-grid::-webkit-scrollbar{ display:none; }
  .ps-prod{ flex:0 0 78%;scroll-snap-align:start; }

  /* --- 여정 : 이미지를 위, 글자는 아래 --- */
  .ps-journey{ display:block;min-height:0;padding-top:clamp(220px,56vw,300px); }
  .ps-journey-bg{ inset:0 0 auto 0;height:clamp(280px,66vw,380px); }
  .ps-journey-bg img{ object-position:center 30%; }
  .ps-journey-veil{
    background:
      linear-gradient(180deg, rgba(10,6,22,.28) 0%, rgba(10,6,22,.06) 24%,
                              rgba(12,7,26,.78) 52%, rgba(10,6,22,.97) 72%, #0A0616 100%);
  }
  .ps-journey-inner{ padding:8px 18px 48px;text-align:center; }
  .ps-journey-inner > *{ max-width:none; }
  .ps-journey-marks{ justify-content:center;gap:8px; }
  .ps-journey-marks li{ padding:9px 13px;font-size:.82rem; }
  .ps-journey .btn{ width:100%; }

  /* --- 이용 방법 : 세로 나열 --- */
  .ps-howto-steps{ grid-template-columns:1fr;gap:0; }
  .ps-howto-step{
    display:grid;grid-template-columns:76px 1fr;gap:16px;
    text-align:left;padding:16px 0;align-items:start;
  }
  .ps-howto-step + .ps-howto-step::before{
    left:37px;top:-8px;width:1px;height:16px;
    background:repeating-linear-gradient(180deg,var(--ps-purple-200) 0 4px,transparent 4px 10px);
  }
  .ps-howto-ic{ margin:0;width:70px;height:70px; }
  .ps-howto-step h3{ margin-top:10px; }

  /* --- 신뢰 : 2×2 --- */
  .ps-trust{ padding:52px 0; }
  .ps-trust-panel{ grid-template-columns:repeat(2,1fr); }
  .ps-trust-item{ padding:24px 12px; }
  .ps-trust-item:nth-child(odd){ border-left:0; }
  .ps-trust-item:nth-child(-n+2){ border-bottom:1px solid rgba(212,175,55,.2); }
  .ps-trust .ps-sky-orbit{ right:-110px;width:220px;height:220px;opacity:.36; }

  /* --- 최종 CTA --- */
  .ps-cta-inner{ flex-direction:column;align-items:stretch;text-align:center;padding:38px 18px;gap:20px; }
  .ps-cta-band .btn{ width:100%; }
}

@media (max-width:420px){
  .ps-quick ul{ grid-template-columns:1fr; }
  .ps-quick li{ border-left:0 !important; }
  .ps-why-items{ grid-template-columns:1fr;gap:24px; }
  .ps-why-item::before{ display:none !important; }
  .ps-prod{ flex-basis:86%; }
  .ps-trust-panel{ grid-template-columns:1fr; }
  .ps-trust-item{ border-left:0 !important;border-bottom:1px solid rgba(212,175,55,.2); }
}

/* 인쇄 */
@media print{
  .ps-hero-figure,.ps-journey-bg,.ps-hero-bg,.ps-trust-bg{ display:none !important; }
  .ps-hero,.ps-products,.ps-journey,.ps-trust,.ps-cta-band{ background:#fff !important;color:#000 !important; }
}

/* ---------- HOME 보정 1차 : 히어로 가독성 ---------- */
/* 인물과 카피가 겹쳐 글이 읽히지 않던 문제.
   인물을 더 오른쪽으로 밀고, 좌측 어둡기를 넓히고, 글 폭을 고정합니다. */
.ps-hero-figure{ width:min(56%,780px); }
.ps-hero-figure img{ object-position:54% 40%; }
.ps-hero-bg::after{
  background:
    linear-gradient(100deg, rgba(11,6,24,.96) 0%, rgba(14,8,30,.92) 38%,
                            rgba(18,10,38,.62) 54%, rgba(20,12,42,.16) 76%, rgba(20,12,42,.04) 100%),
    linear-gradient(180deg, rgba(12,7,26,.5) 0%, transparent 24%, rgba(12,7,26,.6) 100%);
}
.ps-hero-inner > *{ max-width:min(540px,50%); }
.ps-hero-lead{ max-width:min(420px,46%); }

/* 1024~1280 구간은 제목을 한 단계 줄여 줄바꿈이 어색해지지 않게 */
@media (min-width:1024px) and (max-width:1280px){
  .ps-hero-title{ font-size:clamp(2.3rem,4.4vw,3.4rem); }
  .ps-hero-tag{ font-size:1.14rem; }
  .ps-hero-figure{ width:52%; }
  .ps-hero-inner > *{ max-width:min(470px,52%); }
  .ps-hero-lead{ max-width:min(400px,50%); }
}

/* 퀵링크 — 6열은 1240px 이상에서만. 그 아래는 3열 (글자 깨짐 방지) */
@media (max-width:1239px){
  .ps-quick ul{ grid-template-columns:repeat(3,1fr); }
  .ps-quick li:nth-child(-n+3){ border-bottom:1px solid rgba(212,175,55,.18); }
  .ps-quick li:nth-child(3n+1){ border-left:0; }
  .ps-quick a{ justify-content:flex-start;padding:18px 16px; }
}

/* ---------- HOME 보정 2차 ---------- */
/* .ps-hero 가 flex 컨테이너라 .ps-wrap 의 margin:0 auto 가
   '아이템 자체'를 가운데로 밀어버려 카피가 화면 중앙에서 시작했습니다. */
.ps-hero-inner{ width:100%;flex:1 1 100%; }

/* CTA 두 개는 한 줄로 (max-width 상속을 받지 않도록) */
.ps-hero-inner > .ps-hero-cta{ max-width:none; }
@media (min-width:1024px) and (max-width:1280px){
  .ps-hero-inner > .ps-hero-cta{ max-width:none; }
}

/* 여정 섹션도 같은 이유로 폭을 명시 */
.ps-journey-inner{ width:100%;flex:1 1 100%; }
.ps-journey-inner > .ps-journey-marks{ max-width:none; }

/* ---------- HOME 보정 3차 : 인물 경계 처리 ---------- */
/* CSS mask-image 로 인물 좌측을 녹이려 했으나, 브라우저에 따라
   마스크가 전면 적용되어 이미지가 통째로 사라지는 문제가 있었습니다.
   → 마스크를 버리고, 인물 위에 그라디언트 '베일'을 덮는 방식으로 바꿉니다.
     (모든 브라우저에서 동일하게 동작하고 디버깅도 쉽습니다) */
.ps-hero-figure img,
.ps-journey-bg img{
  -webkit-mask-image:none !important;
          mask-image:none !important;
}
.ps-hero-figure{ position:absolute; }
.ps-hero-figure::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg, #130A28 0%, rgba(19,10,40,.92) 14%,
                           rgba(19,10,40,.55) 30%, rgba(19,10,40,.12) 48%, transparent 62%),
    linear-gradient(180deg, rgba(18,11,38,.55) 0%, transparent 18%,
                            transparent 76%, rgba(18,11,38,.75) 100%);
}

@media (max-width:768px){
  /* 모바일은 인물이 위쪽 전체 폭 → 아래쪽만 녹입니다 */
  .ps-hero-figure::after{
    background:
      linear-gradient(180deg, rgba(18,11,38,.42) 0%, rgba(18,11,38,.06) 22%,
                              rgba(18,11,38,.30) 52%, rgba(18,11,38,.86) 82%, #120B26 100%);
  }
}

/* ---------- HOME 보정 4차 : 인물 좌측 이음매 제거 ---------- */
/* 인물 이미지의 왼쪽 끝과 배경의 밝기가 달라 세로 경계선이 보였습니다.
   ① 배경 오버레이를 인물 시작 지점까지 거의 불투명하게
   ② 인물 위 베일은 '반투명'으로 부드럽게
   → 두 면의 밝기가 같아져 경계가 사라집니다. */
.ps-hero-bg::after{
  background:
    linear-gradient(100deg,
      rgba(17,10,34,.97) 0%,
      rgba(17,10,34,.95) 40%,
      rgba(18,11,38,.80) 52%,
      rgba(20,12,42,.34) 66%,
      rgba(20,12,42,.06) 82%,
      transparent 100%),
    linear-gradient(180deg, rgba(12,7,26,.5) 0%, transparent 24%, rgba(12,7,26,.62) 100%);
}
.ps-hero-figure::after{
  background:
    linear-gradient(90deg,
      rgba(17,10,34,.94) 0%,
      rgba(17,10,34,.72) 16%,
      rgba(18,11,38,.38) 34%,
      rgba(20,12,42,.10) 52%,
      transparent 68%),
    linear-gradient(180deg, rgba(18,11,38,.45) 0%, transparent 16%,
                            transparent 78%, rgba(18,11,38,.7) 100%);
}

/* =====================================================================
   HOME 보정 5차 — 히어로 레이어를 양수 z-index 로 재구성
   ---------------------------------------------------------------------
   음수 z-index(-3/-2/-1)로 쌓다 보니 배경 오버레이가 인물을 덮어
   인물이 통째로 사라지는 문제가 있었습니다.
   아래처럼 위에서 아래로 한 줄로 세워 모호함을 없앱니다.

     0  배경 이미지 (성운)
     1  SVG 별밭
     2  인물 이미지
     3  베일 그라디언트  ← 좌측 어둡게 + 인물 경계 블렌딩을 한 번에
     4  카피 / CTA
   ===================================================================== */
.ps-hero{ position:relative;isolation:isolate;overflow:hidden; }

.ps-hero-bg{ z-index:0; }
.ps-hero-bg::after{ content:none;display:none;background:none; }   /* 오버레이는 베일로 일원화 */

.ps-hero .ps-sky{ z-index:1; }

.ps-hero-figure{ z-index:2; }
.ps-hero-figure::after{ content:none;display:none;background:none; }

.ps-hero-veil{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    linear-gradient(100deg,
      rgba(15,9,31,.97) 0%,
      rgba(15,9,31,.95) 30%,
      rgba(17,10,35,.86) 42%,
      rgba(19,11,39,.55) 52%,
      rgba(20,12,42,.22) 62%,
      rgba(20,12,42,.05) 74%,
      transparent 86%),
    linear-gradient(180deg,
      rgba(14,8,29,.55) 0%, transparent 20%,
      transparent 74%, rgba(14,8,29,.72) 100%);
}

.ps-hero-inner{ z-index:4; }

/* --- 여정 섹션도 같은 방식으로 --- */
.ps-journey{ position:relative;isolation:isolate;overflow:hidden; }
.ps-journey-bg{ z-index:0; }
.ps-journey-veil{ z-index:1; }
.ps-journey-inner{ z-index:2; }

/* --- 상품 / 신뢰 섹션도 명시 --- */
.ps-products{ position:relative;isolation:isolate; }
.ps-products::before{ z-index:0; }
.ps-products .ps-sky{ z-index:1; }
.ps-products > .ps-wrap{ position:relative;z-index:2; }

.ps-trust{ position:relative;isolation:isolate; }
.ps-trust-bg{ z-index:0; }
.ps-trust .ps-sky{ z-index:1; }
.ps-trust > .ps-wrap{ position:relative;z-index:2; }

.ps-cta-band{ position:relative;isolation:isolate; }
.ps-cta-band .ps-sky{ z-index:0; }
.ps-cta-inner{ position:relative;z-index:1; }

.ps-promo{ position:relative;isolation:isolate; }
.ps-promo .ps-sky{ z-index:0; }
.ps-promo-orb{ z-index:1; }
.ps-promo-body{ position:relative;z-index:2; }

@media (max-width:768px){
  /* 모바일 : 인물이 상단 전체 폭 → 아래로 갈수록 어둡게 녹임 */
  .ps-hero-veil{
    background:
      linear-gradient(180deg,
        rgba(16,9,32,.40) 0%,
        rgba(16,9,32,.06) 20%,
        rgba(16,9,32,.10) 42%,
        rgba(17,10,35,.62) 60%,
        rgba(18,11,38,.94) 74%,
        #120B26 84%);
  }
}

/* ---------- HOME 보정 6차 : 히어로 베일 최종 ----------
   그라디언트를 두 겹으로 겹치니 인물이 가려지는 문제가 있어
   방향별로 '한 겹'만 쓰도록 정리했습니다. (PC 가로 / 모바일 세로) */
.ps-hero-veil{
  background:linear-gradient(100deg,
    rgba(15,9,31,.97) 0%,
    rgba(15,9,31,.95) 30%,
    rgba(17,10,35,.86) 42%,
    rgba(19,11,39,.55) 52%,
    rgba(20,12,42,.22) 62%,
    rgba(20,12,42,.05) 74%,
    transparent 86%);
}
@media (max-width:768px){
  .ps-hero-veil{
    background:linear-gradient(180deg,
      rgba(16,9,32,.42) 0%,
      rgba(16,9,32,.06) 20%,
      rgba(16,9,32,.12) 42%,
      rgba(17,10,35,.64) 60%,
      rgba(18,11,38,.95) 75%,
      #120B26 85%);
  }
}

/* =====================================================================
   HOME 보정 7차 — 모바일 히어로 최종
   ---------------------------------------------------------------------
   보정 1차에서 넣은 .ps-hero-figure{width:min(56%,780px)} 가 미디어쿼리 없이
   선언되어 모바일 규칙(width:100%)까지 덮어써 버렸습니다.
   모바일 규칙을 파일 맨 뒤로 옮겨 확실히 이기도록 정리합니다.
   ===================================================================== */
@media (max-width:768px){
  .ps-hero{
    min-height:0;display:block;
    padding-top:clamp(250px,64vw,350px);
  }
  .ps-hero-figure{
    left:0;right:0;top:0;bottom:auto;
    width:100% !important;
    height:clamp(330px,82vw,450px);
  }
  /* 얼굴 + 손의 천체구가 함께 보이도록 세로 위치를 위쪽으로 */
  .ps-hero-figure img{ object-position:50% 16%; }

  .ps-hero-veil{
    background:linear-gradient(180deg,
      rgba(16,9,32,.40) 0%,
      rgba(16,9,32,.05) 18%,
      rgba(16,9,32,.10) 34%,
      rgba(17,10,35,.55) 48%,
      rgba(18,11,38,.90) 60%,
      rgba(18,11,38,.98) 68%,
      #120B26 76%);
  }

  .ps-hero-inner{ padding-top:4px;padding-bottom:42px;text-align:center; }
  .ps-hero-inner > *,
  .ps-hero-lead{ max-width:none; }
  .ps-hero-title{ font-size:clamp(2.1rem,10.5vw,2.9rem);letter-spacing:.07em;margin:4px 0 12px; }
  .ps-hero-tag{ font-size:1.06rem;margin-bottom:14px; }
  .ps-hero-lead{ font-size:.94rem;line-height:1.7;margin-bottom:26px; }
  .ps-hero-cta{ flex-direction:column;gap:10px; }
  .ps-hero-cta .btn{ width:100%; }
}

@media (max-width:420px){
  .ps-hero{ padding-top:clamp(230px,62vw,300px); }
  .ps-hero-figure{ height:clamp(300px,78vw,380px); }
  .ps-hero-title{ font-size:clamp(1.95rem,10vw,2.5rem); }
  .ps-hero-tag{ font-size:1rem; }
}

/* ---------- HOME 보정 8차 : 모바일 히어로 페이드 기준 정리 ----------
   페이드를 '히어로 전체 높이' 기준으로 잡으니 이미지 높이가 바뀔 때마다
   글자가 사진 위에 걸쳤습니다.
   → 페이드를 '이미지 박스' 자체에 붙여 항상 사진 끝에서 끝나도록 합니다. */
@media (max-width:768px){
  .ps-hero{
    --ps-fig-h:clamp(330px,82vw,450px);
    padding-top:calc(var(--ps-fig-h) - 6px);
  }
  .ps-hero-figure{ height:var(--ps-fig-h); }

  /* 이미지 하단 페이드 (이미지 박스에 고정) */
  .ps-hero-figure::after{
    content:'' !important;display:block !important;
    position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,
      rgba(16,9,32,.38) 0%,
      rgba(16,9,32,.02) 20%,
      rgba(16,9,32,.06) 50%,
      rgba(17,10,35,.55) 72%,
      rgba(18,11,38,.92) 89%,
      #120B26 100%);
  }
  /* 베일은 이미지 아래 영역을 단색으로 받쳐 주는 역할만 */
  .ps-hero-veil{
    background:linear-gradient(180deg,
      transparent 0%,
      transparent calc(var(--ps-fig-h) - 2px),
      #120B26 var(--ps-fig-h),
      #120B26 100%);
  }
}
@media (max-width:420px){
  .ps-hero{ --ps-fig-h:clamp(300px,78vw,380px); }
}

/* ---------- HOME 보정 9차 : 모바일 그리드 최종 ----------
   보정 1차의 @media(max-width:1239px) 3열 규칙이 모바일까지 적용돼
   퀵링크 글자가 잘렸습니다. 모바일 규칙을 맨 뒤로 옮겨 확정합니다. */
@media (max-width:768px){
  .ps-quick ul{ grid-template-columns:repeat(2,1fr) !important; }
  .ps-quick li{ border-left:0 !important;border-bottom:1px solid rgba(212,175,55,.18); }
  .ps-quick li:nth-child(2n){ border-left:1px solid rgba(212,175,55,.18) !important; }
  .ps-quick li:nth-last-child(-n+2){ border-bottom:0; }
  .ps-quick a{
    flex-direction:column;align-items:flex-start;justify-content:center;
    gap:8px;padding:16px 14px;min-height:96px;
  }
  .ps-quick-tx b{ font-size:.92rem;white-space:nowrap; }
  .ps-quick-tx i{ font-size:.74rem;line-height:1.45; }

  /* 왜 PURPLE SAJU — 2×2 유지 */
  .ps-why-items{ grid-template-columns:repeat(2,1fr) !important;gap:28px 10px; }
  .ps-why-item:nth-child(odd)::before{ display:none; }
  .ps-why-item:nth-child(even)::before{ display:block; }
  .ps-why-title{ font-size:clamp(1.35rem,6vw,1.8rem); }
}

@media (max-width:359px){
  .ps-quick ul{ grid-template-columns:1fr !important; }
  .ps-quick li{ border-left:0 !important; }
  .ps-why-items{ grid-template-columns:1fr !important; }
  .ps-why-item::before{ display:none !important; }
}

/* ---------- HOME 보정 10차 : 여정 섹션 모바일 ----------
   ① 이미지 아래 영역에 불투명 바탕이 없어 반투명 베일이
      밝은 페이지 배경과 섞이며 '회색'으로 보였습니다. → 바탕색 지정
   ② eyebrow 가 사진 위에 걸쳐 읽히지 않았습니다. → 이미지 높이만큼 여백 확보 */
.ps-hero{ background:#120B26; }
.ps-journey{ background:#0A0616; }

@media (max-width:768px){
  .ps-journey{
    --ps-tmp-h:clamp(300px,70vw,400px);
    padding-top:calc(var(--ps-tmp-h) - 4px);
  }
  .ps-journey-bg{ height:var(--ps-tmp-h); }

  /* 페이드를 이미지 박스에 고정 */
  .ps-journey-bg::after{
    content:'';position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,
      rgba(10,6,22,.34) 0%,
      rgba(10,6,22,.02) 22%,
      rgba(10,6,22,.08) 52%,
      rgba(11,6,24,.58) 74%,
      rgba(10,6,22,.94) 90%,
      #0A0616 100%);
  }
  .ps-journey-veil{
    background:linear-gradient(180deg,
      transparent 0%,
      transparent calc(var(--ps-tmp-h) - 2px),
      #0A0616 var(--ps-tmp-h),
      #0A0616 100%);
  }
  .ps-journey-inner{ padding:6px 18px 46px; }
  .ps-journey-inner h2{ font-size:clamp(1.45rem,7vw,1.9rem); }
  .ps-journey-lead{ font-size:.94rem;margin-bottom:22px; }
}
@media (max-width:420px){
  .ps-journey{ --ps-tmp-h:clamp(270px,66vw,340px); }
}

/* ---------- HOME 보정 11차 : 모바일 배경 경량화 ----------
   성운 배경은 모바일에서 작은 파일(960px, 104KB)로 교체합니다. */
@media (max-width:768px){
  .ps-hero-bg{ background-image:url('../img/brand/cosmic-nebula-bg-sm.jpg'); }
  .ps-products{ background-image:url('../img/brand/cosmic-nebula-bg-sm.jpg'); }
  .ps-trust-bg{ background-image:url('../img/brand/cosmic-nebula-bg-sm.jpg'); }
}

/* =====================================================================
   15. 신뢰 섹션 재구성 + 모바일 하단 내비 Deep Purple  (PHASE 4 보정)
   ===================================================================== */

/* ---------- 신뢰받는 이유 : 수치 없이 신뢰 포인트로 ---------- */
.ps-trust .ps-sec-head{ margin-bottom:34px; }
.ps-trust .ps-sec-lead{ color:rgba(243,239,252,.68); }

.ps-trust-item{
  display:flex;flex-direction:column;align-items:center;gap:0;
  padding:34px 20px;text-align:center;
}
.ps-trust-ic{
  display:grid;place-items:center;width:62px;height:62px;margin-bottom:16px;
  border-radius:50%;color:#F0D57A;
  border:1px solid rgba(212,175,55,.42);
  background:radial-gradient(circle at 36% 30%,rgba(240,213,122,.16),rgba(124,77,255,.10) 72%);
}
.ps-trust-t{
  font-family:var(--font-title);font-size:1.06rem;font-weight:600;
  color:#FDFAF3;margin-bottom:9px;letter-spacing:.01em;
}
.ps-trust-d{
  font-size:.84rem;line-height:1.66;color:rgba(243,239,252,.66);
  max-width:22ch;
}
/* 수치가 있을 때만 쓰이는 스타일 (지금은 미사용) */
.ps-trust-n{
  font-family:var(--font-title);font-size:clamp(1.6rem,3vw,2.1rem);
  color:#F0D57A;line-height:1;margin-bottom:8px;
  text-shadow:0 0 24px rgba(240,213,122,.3);
}


/* ---------- 모바일 하단 내비 : Deep Purple ----------
   최종 디자인 이미지는 밝은 바였으나, 운영 결정에 따라
   PURPLE SAJU 세계관과 이어지도록 딥 퍼플로 전환합니다.
   (되돌리려면 body 에 nav-light 클래스를 붙이면 됩니다) */
.bottom-nav{
  background:linear-gradient(180deg,#241548 0%,#1A1033 62%,#150C2A 100%);
  box-shadow:0 -8px 30px rgba(8,4,18,.55);
}
.bottom-nav::before{
  background:linear-gradient(90deg,
    transparent 0%, rgba(212,175,55,.14) 12%,
    rgba(240,213,122,.72) 50%,
    rgba(212,175,55,.14) 88%, transparent 100%);
  box-shadow:0 0 12px rgba(240,213,122,.28);
}
.bottom-nav a{
  color:rgba(233,226,255,.62);
  font-size:11.5px;font-weight:500;letter-spacing:-.01em;
}
.bottom-nav .ps-ico{ color:#B89CFF; }          /* 비활성 : 라벤더 라인 */
.bottom-nav a:hover{ color:rgba(243,239,252,.9); }

/* 활성 : 골드 아이콘 + 은은한 퍼플 글로우 */
.bottom-nav a.active{ color:#F0D57A;font-weight:700; }
.bottom-nav a.active .ps-ico{
  color:#F0D57A;
  filter:drop-shadow(0 0 10px rgba(240,213,122,.55));
}
.bottom-nav a.active .bi::before{
  content:'';position:absolute;left:50%;top:50%;
  width:46px;height:46px;transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(closest-side,rgba(124,77,255,.42),rgba(124,77,255,.12) 58%,transparent 74%);
}
/* 활성 항목 상단의 가는 골드 표시 */
.bottom-nav a.active::after{
  content:'';position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:28px;height:2px;border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,transparent,#F0D57A,transparent);
  box-shadow:0 0 8px rgba(240,213,122,.6);
}
.bottom-nav a:active{ background:rgba(124,77,255,.16); }

/* 되돌리기용 밝은 버전 */
body.nav-light .bottom-nav{
  background:linear-gradient(180deg,#FFFFFF 0%,#F6F1FF 100%);
  box-shadow:0 -6px 26px rgba(26,16,51,.10);
}
body.nav-light .bottom-nav a{ color:#5B5470; }
body.nav-light .bottom-nav .ps-ico{ color:inherit; }
body.nav-light .bottom-nav a.active{ color:var(--ps-purple-600); }
body.nav-light .bottom-nav a.active .ps-ico{ color:var(--ps-purple-600); }
body.nav-light .bottom-nav a.active::after{ display:none; }

/* 하단 내비가 어두워졌으므로 페이지 하단 여백을 조금 더 */
@media (max-width:768px){
  body.has-bottom-nav{ padding-bottom:80px; }
  .ps-trust-item{ padding:26px 16px; }
  .ps-trust-d{ font-size:.82rem;max-width:26ch; }
  .ps-trust-t{ font-size:1rem; }
}
@media (max-width:420px){
  .ps-trust-item{ padding:22px 14px; }
}

/* ---------- 이용 방법 모바일 배치 수정 ----------
   2열 그리드에 자식이 3개(아이콘·제목·설명)라 설명이 아이콘 아래 칸으로
   흘러 들어가 글이 세로로 찌그러졌습니다. → 영역을 명시적으로 지정합니다. */
@media (max-width:768px){
  .ps-howto-steps{ gap:4px; }
  .ps-howto-step{
    display:grid;
    grid-template-columns:74px 1fr;
    grid-template-areas:
      "ic title"
      "ic desc";
    column-gap:16px;row-gap:4px;
    align-items:start;text-align:left;
    padding:14px 0 20px;
  }
  .ps-howto-ic{ grid-area:ic;margin:0;width:70px;height:70px;align-self:start; }
  .ps-howto-step h3{ grid-area:title;margin:8px 0 4px;font-size:1.02rem; }
  .ps-howto-step p{ grid-area:desc;font-size:.86rem;line-height:1.65; }

  /* 아이콘 사이 세로 점선 연결 */
  .ps-howto-step + .ps-howto-step::before{
    content:'';position:absolute;left:37px;top:-14px;
    width:1px;height:20px;
    background:repeating-linear-gradient(180deg,var(--ps-purple-200) 0 4px,transparent 4px 9px);
  }
  .ps-howto-step{ position:relative; }
}

/* ---------- 크리스탈볼 에셋 슬롯 (①) ----------
   assets/img/brand/crystal-ball.png 를 넣으면 자동으로 나타납니다.
   파일이 없으면 <img> 가 스스로 제거되어 레이아웃에 영향이 없습니다. */
.ps-promo-figure{
  position:absolute;z-index:1;
  right:-14px;bottom:-18px;
  width:min(46%,230px);height:auto;
  pointer-events:none;
  filter:drop-shadow(0 18px 34px rgba(8,4,18,.55))
         drop-shadow(0 0 30px rgba(124,77,255,.30));
  animation:ps-orb-float 7s ease-in-out infinite alternate;
}
@keyframes ps-orb-float{ from{ transform:translateY(0) } to{ transform:translateY(-9px) } }

/* 볼이 들어오면 궤도 SVG 는 뒤로 물러나 헤일로 역할만 */
.ps-promo.has-figure .ps-promo-orb{
  right:-30px;bottom:-46px;width:250px;height:250px;opacity:.42;
}
/* 볼과 글이 겹치지 않도록 본문 폭 제한 */
.ps-promo.has-figure .ps-promo-body{ max-width:64%; }

@media (max-width:1180px){
  .ps-promo.has-figure .ps-promo-body{ max-width:70%; }
}
@media (max-width:768px){
  .ps-promo-figure{ right:-10px;bottom:-10px;width:min(40%,170px); }
  .ps-promo.has-figure .ps-promo-body{ max-width:72%; }
}
@media (max-width:420px){
  .ps-promo-figure{ width:150px;right:-16px;bottom:-6px;opacity:.9; }
  .ps-promo.has-figure .ps-promo-body{ max-width:100%; }
  .ps-promo.has-figure .ps-promo-body .btn{ width:auto; }
}
@media (prefers-reduced-motion: reduce){
  .ps-promo-figure{ animation:none; }
}

/* 에셋이 아직 없을 때 '깨진 이미지'가 잠깐 보이지 않도록,
   로드에 성공한 뒤에만 나타나게 합니다. */
.ps-promo-figure{ opacity:0;transition:opacity .5s var(--ps-ease); }
.ps-promo.has-figure .ps-promo-figure{ opacity:1; }

/* =====================================================================
   16. 추가 브랜드 에셋 반영 (②③④)
   ===================================================================== */

/* ---------- ② 상품 3D 아이콘 5종 ----------
   골드 원형 링은 유지하고 그 안에 3D 오브젝트를 넣습니다.
   비율은 object-fit:contain 으로 절대 찌그러뜨리지 않습니다. */
.ps-prod-ic.is-img{
  width:96px;height:96px;margin:10px 0 14px;
  border:0;background:none;                    /* 3D 에셋은 링 없이 단독으로 */
  display:grid;place-items:center;
  filter:drop-shadow(0 10px 20px rgba(8,4,18,.5))
         drop-shadow(0 0 20px rgba(124,77,255,.28));
  transition:transform .3s var(--ps-ease);
}
.ps-prod-ic.is-img img{
  width:100%;height:100%;
  object-fit:contain;                          /* 원본 비율 유지 */
  object-position:center;
  display:block;
}
.ps-prod:hover .ps-prod-ic.is-img{ transform:translateY(-3px) scale(1.04); }
/* BEST 카드는 살짝 더 크게 + 골드 글로우 */
.ps-prod.is-best .ps-prod-ic.is-img{
  width:104px;height:104px;
  filter:drop-shadow(0 10px 22px rgba(8,4,18,.5))
         drop-shadow(0 0 24px rgba(240,213,122,.34));
}

/* ---------- ③ 신뢰 섹션 : 아치·정원 배경 ---------- */
.ps-trust-bg{
  background-image:url('../img/brand/trust-garden.jpg');
  background-position:center 42%;
  background-size:cover;
}
/* 중앙 아치와 빛은 살리고, 글이 올라가는 위/아래만 가립니다 */
.ps-trust-bg::after{
  background:
    linear-gradient(180deg,
      rgba(10,6,22,.92) 0%,
      rgba(12,7,26,.74) 16%,
      rgba(14,8,30,.30) 34%,
      rgba(14,8,30,.24) 52%,
      rgba(12,7,26,.72) 76%,
      rgba(10,6,22,.94) 100%);
}
.ps-trust{ padding:88px 0 84px; }
.ps-trust h2{ text-shadow:0 3px 24px rgba(8,4,18,.8); }
.ps-trust .ps-sec-lead{ text-shadow:0 2px 16px rgba(8,4,18,.8); }
/* 카드 패널은 배경이 비쳐 보이도록 유리 느낌으로 */
.ps-trust-panel{
  background:linear-gradient(180deg,rgba(20,12,42,.62),rgba(10,6,22,.68));
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-color:rgba(212,175,55,.38);
  box-shadow:0 20px 50px rgba(6,3,14,.5);
}
/* 정원 배경이 이미 화려하므로 SVG 궤도는 약하게 */
.ps-trust .ps-sky-orbit{ opacity:.26; }
.ps-trust .ps-sky-stars{ opacity:.5; }

/* ---------- ④ 최종 CTA : 별빛 배경 ----------
   이미지 = 배경 / 카피 = HTML / 버튼 = 실제 <a> 로 분리합니다. */
.ps-cta-band{
  background:#160C31 url('../img/brand/cta-stars.jpg') center 58%/cover no-repeat;
}
.ps-cta-band::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:linear-gradient(100deg,
    rgba(13,7,28,.90) 0%,
    rgba(16,9,34,.78) 34%,
    rgba(20,12,42,.42) 58%,
    rgba(20,12,42,.16) 100%);
}
.ps-cta-band .ps-sky{ z-index:1;opacity:.55; }
.ps-cta-inner{ z-index:2;padding:74px 24px; }
.ps-cta-inner h2{ text-shadow:0 3px 22px rgba(8,4,18,.75); }
.ps-cta-inner p{ text-shadow:0 2px 14px rgba(8,4,18,.7); }
.ps-cta-band .btn-primary{
  background:var(--ps-grad-gold);color:#241548;
  box-shadow:0 12px 32px rgba(8,4,18,.45),0 0 26px rgba(240,213,122,.28);
  font-weight:700;
}
.ps-cta-band .btn-primary:hover{ background:var(--ps-grad-gold);filter:brightness(1.05); }

/* ---------- 반응형 ---------- */
@media (max-width:1180px){
  .ps-prod-ic.is-img{ width:88px;height:88px; }
  .ps-prod.is-best .ps-prod-ic.is-img{ width:94px;height:94px; }
}
@media (max-width:768px){
  .ps-prod-ic.is-img,
  .ps-prod.is-best .ps-prod-ic.is-img{ width:84px;height:84px;margin:8px 0 12px; }

  /* 배경은 모바일 경량본으로 + 중앙 아치/별빛이 보이도록 위치 조정 */
  .ps-trust-bg{
    background-image:url('../img/brand/trust-garden-sm.jpg');
    background-position:center 38%;
  }
  .ps-trust{ padding:60px 0 56px; }
  .ps-trust-bg::after{
    background:linear-gradient(180deg,
      rgba(10,6,22,.94) 0%,
      rgba(12,7,26,.80) 14%,
      rgba(14,8,30,.42) 30%,
      rgba(12,7,26,.72) 58%,
      rgba(10,6,22,.95) 100%);
  }

  .ps-cta-band{
    background-image:url('../img/brand/cta-stars-sm.jpg');
    background-position:center 46%;            /* 중앙 별빛·천체 플랫폼이 보이게 */
  }
  .ps-cta-band::before{
    background:linear-gradient(180deg,
      rgba(13,7,28,.62) 0%,
      rgba(16,9,34,.52) 30%,
      rgba(16,9,34,.80) 66%,
      rgba(13,7,28,.94) 100%);
  }
  .ps-cta-inner{ padding:52px 18px; }
}
@media (max-width:420px){
  .ps-prod-ic.is-img,
  .ps-prod.is-best .ps-prod-ic.is-img{ width:76px;height:76px; }
}
@media (prefers-reduced-motion: reduce){
  .ps-prod-ic.is-img{ transition:none; }
}

/* 상품 3D 아이콘 시각적 무게 보정 — 오브젝트 주변 글로우 여백이 있어
   같은 px 라도 실제보다 작아 보입니다. 한 단계 키웁니다. */
.ps-prod-ic.is-img{ width:112px;height:112px;margin:6px 0 12px; }
.ps-prod.is-best .ps-prod-ic.is-img{ width:120px;height:120px; }
@media (max-width:1180px){
  .ps-prod-ic.is-img{ width:104px;height:104px; }
  .ps-prod.is-best .ps-prod-ic.is-img{ width:110px;height:110px; }
}
@media (max-width:768px){
  .ps-prod-ic.is-img,
  .ps-prod.is-best .ps-prod-ic.is-img{ width:96px;height:96px;margin:6px 0 10px; }
}
@media (max-width:420px){
  .ps-prod-ic.is-img,
  .ps-prod.is-best .ps-prod-ic.is-img{ width:86px;height:86px; }
}

/* ---------- 신뢰 섹션 모바일 : 2×2 유지 + 제목 줄바꿈 정리 ---------- */
@media (max-width:768px){
  .ps-trust-panel{ grid-template-columns:repeat(2,1fr) !important; }
  .ps-trust-item{ padding:24px 12px; }
  .ps-trust-item:nth-child(odd){ border-left:0 !important; }
  .ps-trust-item:nth-child(even){ border-left:1px solid rgba(212,175,55,.2) !important; }
  .ps-trust-item:nth-child(-n+2){ border-bottom:1px solid rgba(212,175,55,.2); }
  .ps-trust-ic{ width:52px;height:52px;margin-bottom:12px; }
  .ps-trust-t{ font-size:.94rem; }
  .ps-trust-d{ font-size:.78rem;max-width:20ch; }
}
@media (max-width:359px){
  .ps-trust-panel{ grid-template-columns:1fr !important; }
  .ps-trust-item{ border-left:0 !important;border-bottom:1px solid rgba(212,175,55,.2); }
}

/* 한글 제목이 어색하게 끊기지 않도록 */
h1,h2,h3,.ps-hero-title,.ps-sec-head h2{ word-break:keep-all; }

/* 고정 헤더에 제목이 가리지 않도록 (앵커 이동 대비) */
section[id],.ps-section{ scroll-margin-top:84px; }


/* =====================================================================
   17. 무료사주 입력  (PHASE 5)
   기준 : PS_03_01_FREE_INPUT_PC_V01 / MOBILE_V01
   ===================================================================== */

/* ---------- 1. 페이지 히어로 (다른 서브페이지도 재사용) ---------- */
.ps-pagehero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(240px,30vw,330px);
  display:flex;align-items:center;
  color:var(--ps-text-on-dark);
  background:#120B26;
}
.ps-pagehero-bg{
  position:absolute;inset:0;z-index:0;
  background:#120B26 url('../img/brand/cosmic-nebula-bg.jpg') center 30%/cover no-repeat;
}
.ps-pagehero .ps-sky{ z-index:1; }
.ps-pagehero .ps-sky-zodiac-lg{
  right:-40px;top:50%;transform:translateY(-50%);
  width:min(46vw,420px);height:min(46vw,420px);opacity:.4;
}
/* 나침반 브랜드 심볼을 우측 천체로 크게 */
.ps-pagehero-mark{
  position:absolute;z-index:2;pointer-events:none;
  right:6%;top:50%;transform:translateY(-50%);
  width:min(30vw,300px);height:min(30vw,300px);
  display:grid;place-items:center;opacity:.95;
}
.ps-pagehero-mark svg{ width:100%;height:100%; }
.ps-pagehero-veil{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(15,9,31,.96) 0%, rgba(15,9,31,.92) 34%,
    rgba(17,10,35,.70) 48%, rgba(20,12,42,.28) 66%, transparent 86%);
}
.ps-pagehero-inner{
  position:relative;z-index:4;width:100%;flex:1 1 100%;
  padding-top:52px;padding-bottom:52px;
}
.ps-pagehero-inner > *{ max-width:min(620px,58%); }
.ps-pagehero .eyebrow{
  color:var(--ps-purple-300);letter-spacing:.14em;margin-bottom:12px;
}
.ps-pagehero h1{
  font-size:clamp(1.9rem,4.4vw,3rem);line-height:1.22;
  color:#FDFAF3;margin-bottom:16px;
  text-shadow:0 4px 34px rgba(0,0,0,.5);
}
.ps-pagehero h1 em{
  font-style:normal;
  background:linear-gradient(100deg,#FFF8E2,#F0D57A 45%,#D4AF37);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ps-pagehero-lead{ color:rgba(243,239,252,.84);font-size:1rem;line-height:1.75;margin-bottom:16px; }
.ps-pagehero-note{
  display:flex;align-items:center;gap:9px;
  font-size:.9rem;color:var(--ps-purple-200);
}
.ps-pagehero-note .ps-ico{ color:var(--ps-gold-bright);flex:none; }


/* ---------- 2. 폼 영역 ---------- */
.ps-formsec{ background:linear-gradient(180deg,#FBF9FF 0%,#F5F0FF 100%);padding:56px 0 72px; }
.ps-form-grid{
  display:grid;grid-template-columns:minmax(0,1.85fr) minmax(0,1fr);
  gap:26px;align-items:start;
}

.ps-formcard{
  background:var(--ps-white);
  border:1px solid var(--ps-line);
  border-radius:var(--ps-radius-lg);
  box-shadow:0 12px 40px rgba(26,16,51,.07);
  padding:30px 32px 34px;
}
.ps-formcard-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-bottom:18px;margin-bottom:8px;
  border-bottom:1px solid var(--ps-line);
}
.ps-formcard-head h2{
  display:flex;align-items:center;gap:10px;
  font-size:1.24rem;margin:0;color:var(--navy);
}
.ps-fc-ic{ display:flex;color:var(--ps-purple-500); }
.ps-req-note{ font-size:.82rem;color:var(--ps-danger); }
.ps-req{ color:var(--ps-danger);font-style:normal;margin-left:3px; }

/* 행 : 라벨 / 입력 / 힌트 */
.ps-row{
  display:grid;
  grid-template-columns:104px minmax(0,1fr) 210px;
  gap:16px;align-items:center;
  padding:14px 0;
}
.ps-row + .ps-row{ border-top:1px solid #F1ECFB; }
.ps-row-label{
  font-size:.95rem;font-weight:600;color:var(--ps-text);
}
.ps-row-hint{ font-size:.82rem;color:var(--ps-text-mute);line-height:1.6; }

/* 입력 3개 / 2개 나란히 */
.ps-trio{ display:grid;grid-template-columns:repeat(3,1fr);gap:10px; }
.ps-duo{ display:grid;grid-template-columns:repeat(2,1fr);gap:10px; }
.ps-trio.is-unknown select[name=hour],
.ps-trio.is-unknown select[name=minute]{ opacity:.4;pointer-events:none; }

/* 성별 2버튼 */
.ps-gender{ display:grid;grid-template-columns:repeat(2,1fr);gap:12px; }
.ps-gender-opt{ position:relative;display:block; }
.ps-gender-opt input{ position:absolute;opacity:0;width:0;height:0; }
.ps-gender-opt > span{
  display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:52px;padding:12px 14px;
  border:1px solid var(--ps-line);border-radius:var(--ps-radius-input);
  background:var(--ps-white);color:var(--ps-text-soft);
  font-size:1rem;cursor:pointer;
  transition:border-color .18s,background .18s,color .18s,box-shadow .18s;
}
.ps-gender-opt.is-m > span .ps-ico{ color:var(--ps-purple-500); }
.ps-gender-opt.is-f > span .ps-ico{ color:#E8639B; }
.ps-gender-opt:hover > span{ border-color:var(--ps-purple-300); }
.ps-gender-opt.is-m input:checked + span{
  border-color:var(--ps-purple-500);background:var(--ps-purple-50);
  color:var(--ps-purple-600);font-weight:600;
  box-shadow:0 0 0 3px rgba(124,77,255,.12);
}
.ps-gender-opt.is-f input:checked + span{
  border-color:#E8639B;background:#FDF0F6;color:#C04C7C;font-weight:600;
  box-shadow:0 0 0 3px rgba(232,99,155,.12);
}
.ps-gender-opt input:focus-visible + span{ outline:2px solid var(--ps-purple-500);outline-offset:2px; }

/* 양력/음력 + 도움말 칩 */
.ps-cal{ display:flex;align-items:center;gap:18px;flex-wrap:wrap; }
.ps-help-chip{
  display:inline-flex;align-items:center;gap:5px;margin-left:auto;
  padding:8px 14px;border-radius:999px;border:0;
  background:var(--ps-purple-100);color:var(--ps-purple-600);
  font-size:.82rem;font-weight:600;cursor:pointer;
  transition:background .18s;
}
.ps-help-chip:hover{ background:var(--ps-purple-200); }

/* 출생지 안내 박스 */
.ps-place-notice{
  display:flex;gap:12px;align-items:flex-start;
  margin:14px 0 6px;padding:16px 18px;
  border-radius:var(--ps-radius);
  background:var(--ps-purple-50);
  border:1px solid var(--ps-line-soft);
}
.ps-pn-ic{ color:var(--ps-purple-500);flex:none;margin-top:1px; }
.ps-place-notice b{ display:block;font-size:.92rem;color:var(--ps-purple-600);margin-bottom:6px; }
.ps-place-notice span{ display:block;font-size:.84rem;color:var(--ps-text-soft);line-height:1.65; }

/* 약관 동의 */
.ps-agree{
  display:flex;gap:10px;align-items:flex-start;
  margin:18px 0 6px;font-size:.86rem;color:var(--ps-text-soft);
}
.ps-agree input{
  appearance:none;width:20px;height:20px;flex:none;margin:1px 0 0;
  border:1.5px solid var(--ps-line);border-radius:6px;background:#fff;cursor:pointer;
}
.ps-agree input:checked{
  border-color:var(--ps-purple-500);background:var(--ps-purple-500);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat:no-repeat;background-position:center;
}
.ps-agree a{ color:var(--ps-purple-600);text-decoration:underline; }

/* 오류 메시지 */
.ps-form-err{
  display:none;margin:12px 0 0;padding:12px 16px;
  border-radius:var(--ps-radius-sm);
  background:#FBEDEA;border:1px solid #EFCFC8;color:#8C3B2E;
  font-size:.88rem;
}
.ps-form-err.show{ display:block; }

/* 제출 버튼 */
.ps-submit{
  width:100%;margin-top:20px;gap:10px;
  background:linear-gradient(100deg,#4B1E8C 0%,#6B32C4 50%,#7C4DFF 100%);
  box-shadow:0 14px 34px rgba(91,45,145,.36);
  font-size:1.08rem;min-height:60px;
}
.ps-submit .ps-ico:first-child{ color:var(--ps-gold-bright); }
.ps-submit:hover{ filter:brightness(1.07); }
.ps-submit-note{
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin-top:12px;font-size:.8rem;color:var(--ps-text-mute);
}

/* ---------- 우측 안내 카드 ---------- */
.ps-form-side{ display:flex;flex-direction:column;gap:18px;position:sticky;top:96px; }
.ps-tips h3,.ps-privacy h3{
  display:flex;align-items:center;gap:9px;
  font-size:1.06rem;margin-bottom:18px;color:var(--navy);
}
.ps-tips ul,.ps-privacy ul{ display:flex;flex-direction:column;gap:16px; }
.ps-tips li{ display:flex;gap:13px;align-items:flex-start; }
.ps-tip-ic{
  display:grid;place-items:center;width:40px;height:40px;flex:none;
  border-radius:12px;color:var(--ps-purple-500);
  background:var(--ps-purple-50);border:1px solid var(--ps-line-soft);
}
.ps-tips p{ font-size:.86rem;color:var(--ps-text-soft);line-height:1.65; }
.ps-pv-ic{ display:flex;color:var(--ps-purple-500); }
.ps-privacy ul{ gap:11px; }
.ps-privacy li{ display:flex;gap:9px;align-items:flex-start;font-size:.85rem;color:var(--ps-text-soft);line-height:1.6; }
.ps-privacy li .ps-ico{ color:var(--ps-purple-500);flex:none;margin-top:2px; }
.ps-pv-link{
  display:inline-flex;align-items:center;gap:5px;margin-top:18px;
  font-size:.85rem;font-weight:600;color:var(--ps-purple-600);
}
.ps-pv-link:hover{ text-decoration:underline; }


/* ---------- 3. 안심하고 이용하세요 ---------- */
.ps-assure{ background:var(--ps-surface-2);padding:0 0 64px; }
.ps-assure-inner{
  background:linear-gradient(120deg,#F6F1FF 0%,#FBF9FF 100%);
  border:1px solid var(--ps-line-soft);
  border-radius:var(--ps-radius-lg);
  padding:34px 36px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  gap:32px;align-items:center;
}
.ps-assure-head{ display:flex;gap:18px;align-items:flex-start; }
.ps-assure-shield{
  display:grid;place-items:center;width:78px;height:78px;flex:none;
  border-radius:50%;color:var(--ps-purple-500);
  background:radial-gradient(circle at 34% 28%,#FFFFFF,#EDE6FA 72%);
  border:1px solid rgba(184,156,255,.5);
  box-shadow:0 8px 22px rgba(91,45,145,.14);
}
.ps-assure-head h2{ font-size:1.2rem;margin-bottom:9px; }
.ps-assure-head p{ font-size:.88rem;color:var(--ps-text-soft);line-height:1.7; }
.ps-assure-items{ display:grid;grid-template-columns:repeat(4,1fr);gap:10px; }
.ps-assure-item{ text-align:center;padding:0 8px;position:relative; }
.ps-assure-item + .ps-assure-item::before{
  content:'';position:absolute;left:-5px;top:8px;bottom:8px;width:1px;
  background:linear-gradient(180deg,transparent,var(--ps-line),transparent);
}
.ps-assure-ic{
  display:grid;place-items:center;width:48px;height:48px;margin:0 auto 12px;
  border-radius:50%;color:var(--ps-purple-500);
  background:var(--ps-white);border:1px solid var(--ps-line-soft);
  box-shadow:0 4px 12px rgba(91,45,145,.08);
}
.ps-assure-item b{ display:block;font-size:.9rem;color:var(--navy);margin-bottom:6px; }
.ps-assure-item p{ font-size:.79rem;color:var(--ps-text-soft);line-height:1.6; }


/* =====================================================================
   반응형
   ===================================================================== */
@media (max-width:1180px){
  .ps-form-grid{ grid-template-columns:1fr;gap:22px; }
  .ps-form-side{ position:static;flex-direction:row;flex-wrap:wrap; }
  .ps-form-side > *{ flex:1 1 300px; }
  .ps-pagehero-inner > *{ max-width:min(560px,64%); }
}

@media (max-width:1023px){
  .ps-row{ grid-template-columns:92px minmax(0,1fr);row-gap:8px; }
  .ps-row-hint{ grid-column:2;font-size:.8rem; }
  .ps-pagehero-mark{ right:2%;width:min(34vw,240px);height:min(34vw,240px);opacity:.8; }
}

@media (max-width:768px){
  /* 히어로 : 나침반은 배경으로 물러나고 카피 전폭 */
  .ps-pagehero{ min-height:0; }
  .ps-pagehero-inner{ padding-top:38px;padding-bottom:38px; }
  .ps-pagehero-inner > *{ max-width:none; }
  .ps-pagehero-mark{ right:-14%;width:66vw;height:66vw;opacity:.5; }
  .ps-pagehero-veil{
    background:linear-gradient(100deg,
      rgba(15,9,31,.95) 0%, rgba(15,9,31,.88) 44%,
      rgba(17,10,35,.66) 66%, rgba(20,12,42,.42) 100%);
  }
  .ps-pagehero h1{ font-size:clamp(1.7rem,7.2vw,2.2rem); }
  .ps-pagehero-lead{ font-size:.94rem; }
  .ps-pagehero-note{ font-size:.84rem;align-items:flex-start; }

  .ps-formsec{ padding:34px 0 44px; }
  .ps-formcard{ padding:22px 18px 26px;border-radius:var(--ps-radius); }
  .ps-formcard-head h2{ font-size:1.1rem; }
  .ps-req-note{ font-size:.76rem; }

  /* 시안처럼 라벨은 왼쪽에 유지하되 폭을 줄입니다 */
  .ps-row{ grid-template-columns:74px minmax(0,1fr);gap:10px;padding:12px 0; }
  .ps-row-label{ font-size:.88rem;align-self:start;padding-top:14px; }
  .ps-row-hint{ grid-column:2;font-size:.78rem; }
  .ps-trio{ gap:7px; }
  .ps-trio select{ padding:12px 8px;font-size:15px;background-position:right 7px center;padding-right:24px; }
  .ps-duo{ gap:7px; }
  .ps-gender{ gap:8px; }
  .ps-gender-opt > span{ min-height:48px;font-size:.94rem;gap:6px; }
  .ps-cal{ gap:12px; }
  .ps-help-chip{ margin-left:0;flex:1 1 100%;justify-content:center; }

  .ps-place-notice{ padding:14px 15px; }
  .ps-submit{ min-height:56px;font-size:1rem; }

  .ps-form-side{ flex-direction:column; }
  .ps-form-side > *{ flex:1 1 auto; }

  .ps-assure{ padding:0 0 44px; }
  .ps-assure-inner{ grid-template-columns:1fr;padding:24px 20px;gap:22px; }
  .ps-assure-items{ grid-template-columns:repeat(2,1fr);gap:20px 10px; }
  .ps-assure-item:nth-child(odd)::before{ display:none; }
  .ps-assure-shield{ width:62px;height:62px; }
}

@media (max-width:420px){
  .ps-row{ grid-template-columns:1fr;row-gap:6px; }
  .ps-row-label{ padding-top:0; }
  .ps-row-hint{ grid-column:1; }
  .ps-trio select{ font-size:14px;padding:11px 6px;padding-right:20px; }
  .ps-assure-items{ grid-template-columns:1fr; }
  .ps-assure-item::before{ display:none !important; }
  .ps-pagehero-mark{ right:-24%;width:80vw;height:80vw;opacity:.42; }
}

/* ---------- 무료사주 입력 보정 1차 : 태블릿 폭 ---------- */
/* 800~1023px 에서 '안심하고 이용하세요' 4열이 너무 좁아 글자가 깨졌습니다. */
@media (max-width:1023px){
  .ps-assure-inner{ grid-template-columns:1fr;gap:24px; }
  .ps-assure-items{ grid-template-columns:repeat(4,1fr);gap:12px; }
}
@media (max-width:900px){
  .ps-assure-items{ grid-template-columns:repeat(2,1fr);gap:22px 14px; }
  .ps-assure-item:nth-child(odd)::before{ display:none; }
}

/* ---------- 무료사주 입력 보정 2차 : 모바일도 시안처럼 '라벨 왼쪽' 유지 ----------
   375px 에서 라벨 왼쪽 + 셀렉트 3개가 들어가도록 폭을 조입니다.
   (359px 이하 초소형에서만 라벨을 위로 올립니다) */
@media (max-width:768px){
  .ps-row{ grid-template-columns:70px minmax(0,1fr);column-gap:9px; }
  .ps-row-label{ font-size:.85rem;padding-top:15px;line-height:1.35;word-break:keep-all; }
  .ps-trio{ gap:6px; }
  .ps-trio select{ padding:12px 6px;padding-right:20px;font-size:14px;background-position:right 5px center; }
  .ps-duo{ gap:6px; }
  .ps-duo select{ padding:12px 8px;padding-right:22px;font-size:14px;background-position:right 6px center; }
  .ps-gender-opt > span{ font-size:.9rem;gap:5px; }
}
@media (max-width:400px){
  .ps-row{ grid-template-columns:62px minmax(0,1fr);column-gap:8px; }
  .ps-row-label{ font-size:.8rem; }
  .ps-trio select{ font-size:13px;padding:11px 4px;padding-right:18px; }
}
/* 초소형에서만 라벨을 위로 */
@media (max-width:359px){
  .ps-row{ grid-template-columns:1fr;row-gap:6px; }
  .ps-row-label{ padding-top:0; }
  .ps-row-hint{ grid-column:1; }
}

/* ---------- 무료사주 입력 보정 3차 ----------
   앞서 넣은 @media(max-width:420px) 의 .ps-row-hint{grid-column:1} 이
   375px 에서도 걸려 힌트가 라벨 칸으로 들어갔습니다. 입력 칸 아래로 되돌립니다. */
@media (max-width:420px){
  .ps-row{ grid-template-columns:62px minmax(0,1fr);column-gap:8px;row-gap:6px; }
  .ps-row-label{ padding-top:15px; }
  .ps-row-hint{ grid-column:2; }
}
@media (max-width:359px){
  .ps-row{ grid-template-columns:1fr;row-gap:5px; }
  .ps-row-label{ padding-top:0; }
  .ps-row-hint{ grid-column:1; }
}
/* 힌트 줄바꿈이 어색하지 않게 */
.ps-row-hint{ word-break:keep-all; }
/* 양력/음력 도움말 칩이 한 줄을 다 먹지 않도록 */
@media (max-width:768px){
  .ps-help-chip{ flex:0 0 auto;width:auto;padding:8px 12px;font-size:.78rem; }
  .ps-cal{ gap:10px; }
}


/* =====================================================================
   18. 무료사주 분석 로딩  (PHASE 6)
   기준 : PS_03_02_FREE_LOADING_PC_V01 / MOBILE_V01
   ===================================================================== */

/* 스크린리더 전용 (진행 상황 음성 안내) */
.ps-sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* 히어로의 나침반이 천천히 돕니다 (분석 중이라는 신호) */
.ps-mark-spin svg{ animation:ps-spin 26s linear infinite; }
@media (prefers-reduced-motion: reduce){ .ps-mark-spin svg{ animation:none; } }

.ps-loadsec{ background:linear-gradient(180deg,#FBF9FF 0%,#F5F0FF 100%);padding:52px 0 64px; }
.ps-load-grid{
  display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);
  gap:26px;align-items:start;
}

/* ---------- 좌 : 진행 패널 ---------- */
.ps-loadcard{
  background:var(--ps-white);
  border:1px solid var(--ps-line);
  border-radius:var(--ps-radius-lg);
  box-shadow:0 12px 40px rgba(26,16,51,.07);
  padding:36px 34px 32px;
  text-align:center;
}
.ps-loadcard h2{
  font-size:clamp(1.3rem,2.6vw,1.6rem);
  color:var(--ps-purple-600);margin-bottom:8px;
}
.ps-lc-lead{ font-size:.94rem;color:var(--ps-text-soft);margin-bottom:26px; }

/* 원형 게이지 + 궤도 장식 */
.ps-lc-gauge{ position:relative;display:grid;place-items:center;margin:0 auto 30px;width:100%;height:200px; }
.ps-lc-orbit{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:330px;height:330px;opacity:.42;pointer-events:none;
  animation:ps-spin 60s linear infinite;
}
.ps-lc-orbit svg{ width:100%;height:100%; }
@media (prefers-reduced-motion: reduce){ .ps-lc-orbit{ animation:none; } }
.ps-lc-ring{
  position:relative;width:170px;height:170px;
  box-shadow:0 10px 30px rgba(91,45,145,.16);
}
.ps-lc-ring::before{ inset:15px; }
.ps-lc-ring .ps-gauge-num{
  font-size:2.5rem;color:var(--ps-purple-600);
  font-variant-numeric:tabular-nums;
}
.ps-lc-ring .ps-gauge-unit{ font-size:1rem;color:var(--ps-purple-400);margin-left:1px; }

/* ---------- 5단계 ---------- */
.ps-lc-steps{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:0;margin:0 0 22px;padding:0;list-style:none;
  text-align:center;
}
.ps-lc-step{ position:relative;padding:0 6px; }
/* 점 사이 연결선 */
.ps-lc-step + .ps-lc-step::before{
  content:'';position:absolute;left:-50%;top:17px;width:100%;height:2px;
  background:repeating-linear-gradient(90deg,var(--ps-purple-200) 0 4px,transparent 4px 9px);
}
.ps-lc-step.is-done::before,
.ps-lc-step.is-current::before{ background:var(--ps-purple-500); }
.ps-lc-dot{
  position:relative;z-index:1;
  display:grid;place-items:center;width:36px;height:36px;margin:0 auto 12px;
  border-radius:50%;
  background:var(--ps-purple-50);border:2px solid var(--ps-line-soft);
  color:transparent;
  transition:background .3s var(--ps-ease),border-color .3s,color .3s,box-shadow .3s;
}
.ps-lc-step.is-done .ps-lc-dot{
  background:var(--ps-purple-600);border-color:var(--ps-purple-600);color:#fff;
}
.ps-lc-step.is-current .ps-lc-dot{
  background:var(--ps-white);border-color:var(--ps-purple-500);
  box-shadow:0 0 0 5px rgba(124,77,255,.18);
}
.ps-lc-step.is-current .ps-lc-dot::after{
  content:'';width:12px;height:12px;border-radius:50%;
  background:var(--ps-purple-500);
  animation:ps-pulse 1.2s ease-in-out infinite;
}
@keyframes ps-pulse{ 0%,100%{ transform:scale(1);opacity:1 } 50%{ transform:scale(.72);opacity:.6 } }
@media (prefers-reduced-motion: reduce){ .ps-lc-step.is-current .ps-lc-dot::after{ animation:none; } }
.ps-lc-step.is-current .ps-lc-dot .ps-ico{ display:none; }

.ps-lc-n{
  display:block;font-family:var(--font-title);font-size:.9rem;
  color:var(--ps-purple-400);margin-bottom:5px;
}
.ps-lc-step.is-done .ps-lc-n,
.ps-lc-step.is-current .ps-lc-n{ color:var(--ps-purple-600); }
.ps-lc-tx b{ display:block;font-size:.94rem;color:var(--ps-text-mute);margin-bottom:6px;word-break:keep-all; }
.ps-lc-tx p{ font-size:.79rem;color:var(--ps-text-mute);line-height:1.55;opacity:.75;word-break:keep-all; }
.ps-lc-step.is-done .ps-lc-tx b,
.ps-lc-step.is-current .ps-lc-tx b{ color:var(--navy); }
.ps-lc-step.is-done .ps-lc-tx p,
.ps-lc-step.is-current .ps-lc-tx p{ color:var(--ps-text-soft);opacity:1; }
/* PC 에서는 각 단계의 아이콘을 숨깁니다 (모바일 카드에서만 사용) */
.ps-lc-ic{ display:none; }

/* 자동 이동 안내 */
.ps-lc-auto{
  display:inline-flex;align-items:center;gap:9px;
  padding:12px 20px;border-radius:999px;
  background:var(--ps-purple-50);border:1px solid var(--ps-line-soft);
  font-size:.88rem;color:var(--ps-purple-600);font-weight:600;
}
.ps-lc-auto .ps-ico{ color:var(--ps-purple-500); }

/* TIP */
.ps-lc-tip{
  display:flex;gap:12px;align-items:flex-start;text-align:left;
  max-width:520px;margin:18px auto 0;padding:15px 18px;
  border-radius:var(--ps-radius);
  border:1px dashed var(--ps-purple-200);
  background:#FCFAFF;
}
.ps-tip-bulb{ color:var(--ps-gold-deep);flex:none;margin-top:1px; }
.ps-lc-tip b{ display:block;font-size:.8rem;letter-spacing:.08em;color:var(--ps-gold-deep);margin-bottom:5px; }
.ps-lc-tip span{ display:block;font-size:.84rem;color:var(--ps-text-soft);line-height:1.65; }

/* ---------- 우 : 입력하신 정보 ---------- */
.ps-load-side{ display:flex;flex-direction:column;gap:14px;position:sticky;top:96px; }
.ps-inputcard h3{
  display:flex;align-items:center;gap:9px;
  font-size:1.06rem;margin-bottom:6px;color:var(--navy);
}
.ps-ic-head{ display:flex;color:var(--ps-purple-500); }
.ps-kv{ margin:0; }
.ps-kv > div{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 0;border-bottom:1px solid #F1ECFB;
}
.ps-kv > div:last-child{ border-bottom:0; }
.ps-kv dt{ font-size:.86rem;color:var(--ps-text-mute);flex:none; }
.ps-kv dd{ margin:0;font-size:.9rem;color:var(--ps-text);font-weight:500;text-align:right;word-break:keep-all; }

.ps-side-note{
  display:flex;gap:12px;align-items:flex-start;
  padding:16px 18px;border-radius:var(--ps-radius);
  background:var(--ps-purple-50);border:1px solid var(--ps-line-soft);
}
.ps-sn-ic{
  display:grid;place-items:center;width:40px;height:40px;flex:none;
  border-radius:50%;color:var(--ps-purple-500);
  background:var(--ps-white);border:1px solid var(--ps-line-soft);
}
.ps-side-note b{ display:block;font-size:.92rem;color:var(--ps-purple-600);margin-bottom:5px; }
.ps-side-note span{ display:block;font-size:.83rem;color:var(--ps-text-soft);line-height:1.6; }
.ps-edit-btn{ justify-content:space-between;gap:8px; }

/* ---------- 하단 4항목 ---------- */
.ps-facts{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
  background:linear-gradient(120deg,#F6F1FF 0%,#FBF9FF 100%);
  border:1px solid var(--ps-line-soft);
  border-radius:var(--ps-radius-lg);
  padding:26px 24px;
}
.ps-fact{ display:flex;gap:12px;align-items:flex-start;padding:0 10px;position:relative; }
.ps-fact + .ps-fact::before{
  content:'';position:absolute;left:-5px;top:6px;bottom:6px;width:1px;
  background:linear-gradient(180deg,transparent,var(--ps-line),transparent);
}
.ps-fact-ic{
  display:grid;place-items:center;width:44px;height:44px;flex:none;
  border-radius:50%;color:var(--ps-purple-500);
  background:var(--ps-white);border:1px solid var(--ps-line-soft);
  box-shadow:0 4px 12px rgba(91,45,145,.08);
}
.ps-fact b{ display:block;font-size:.9rem;color:var(--navy);margin-bottom:5px;word-break:keep-all; }
.ps-fact p{ font-size:.79rem;color:var(--ps-text-soft);line-height:1.6; }


/* =====================================================================
   반응형
   ===================================================================== */
@media (max-width:1180px){
  .ps-load-grid{ grid-template-columns:1fr;gap:20px; }
  .ps-load-side{ position:static; }
  .ps-facts{ grid-template-columns:repeat(2,1fr);gap:22px 12px; }
  .ps-fact:nth-child(odd)::before{ display:none; }
}

@media (max-width:768px){
  .ps-loadsec{ padding:32px 0 40px; }
  .ps-loadcard{ padding:26px 18px 24px;border-radius:var(--ps-radius); }
  .ps-lc-lead{ font-size:.88rem;margin-bottom:18px; }
  .ps-lc-gauge{ height:172px;margin-bottom:24px; }
  .ps-lc-orbit{ width:270px;height:270px; }
  .ps-lc-ring{ width:148px;height:148px; }
  .ps-lc-ring::before{ inset:13px; }
  .ps-lc-ring .ps-gauge-num{ font-size:2.1rem; }

  /* 모바일 : 시안처럼 세로 카드 + 좌측 점 레일 */
  .ps-lc-steps{ grid-template-columns:1fr;gap:10px;text-align:left; }
  .ps-lc-step{ display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;padding:0;align-items:start; }
  .ps-lc-step + .ps-lc-step::before{
    left:19px;top:-11px;width:2px;height:13px;
    background:repeating-linear-gradient(180deg,var(--ps-purple-200) 0 4px,transparent 4px 9px);
  }
  .ps-lc-dot{ margin:14px 0 0; }
  .ps-lc-body{
    display:grid;grid-template-columns:34px minmax(0,1fr) 44px;
    gap:10px;align-items:center;
    padding:14px 14px;
    border:1px solid var(--ps-line-soft);border-radius:var(--ps-radius);
    background:#FCFAFF;
    transition:border-color .3s,background .3s;
  }
  .ps-lc-step.is-current .ps-lc-body{
    border-color:var(--ps-purple-300);background:var(--ps-white);
    box-shadow:0 6px 18px rgba(91,45,145,.10);
  }
  .ps-lc-step.is-done .ps-lc-body{ background:var(--ps-white); }
  .ps-lc-n{ margin:0;font-size:.95rem; }
  .ps-lc-tx b{ font-size:.95rem;margin-bottom:3px; }
  .ps-lc-tx p{ font-size:.79rem; }
  .ps-lc-ic{
    display:grid;place-items:center;width:44px;height:44px;
    border-radius:12px;color:var(--ps-purple-400);
    background:var(--ps-purple-50);
  }
  .ps-lc-step.is-current .ps-lc-ic,
  .ps-lc-step.is-done .ps-lc-ic{ color:var(--ps-purple-600); }

  .ps-lc-auto{ display:flex;justify-content:center;font-size:.84rem;padding:11px 14px;margin-top:4px; }
  .ps-lc-tip{ margin-top:14px;padding:13px 14px; }

  .ps-facts{ grid-template-columns:1fr;gap:18px;padding:20px 18px; }
  .ps-fact{ padding:0; }
  .ps-fact::before{ display:none !important; }
  .ps-assure{ padding:0 0 40px; }
}

@media (max-width:420px){
  .ps-lc-body{ grid-template-columns:30px minmax(0,1fr);padding:12px; }
  .ps-lc-ic{ display:none; }
  .ps-lc-ring{ width:132px;height:132px; }
  .ps-lc-ring .ps-gauge-num{ font-size:1.9rem; }
  .ps-lc-orbit{ width:230px;height:230px; }
  .ps-kv > div{ flex-direction:column;align-items:flex-start;gap:3px; }
  .ps-kv dd{ text-align:left; }
}

/* ---------- 로딩 게이지 보정 : 숫자와 % 를 한 줄로 ---------- */
.ps-lc-ring{ display:flex;align-items:baseline;justify-content:center;gap:2px; }
.ps-lc-ring .ps-gauge-num,
.ps-lc-ring .ps-gauge-unit{ position:relative;z-index:1;line-height:1; }
.ps-lc-ring .ps-gauge-unit{ font-weight:700; }

/* ---------- 로딩 화면 모바일 보정 ---------- */
@media (max-width:420px){
  /* 시안처럼 단계 아이콘을 유지하되 조금 작게 */
  .ps-lc-body{ grid-template-columns:30px minmax(0,1fr) 38px;gap:9px;padding:13px 12px; }
  .ps-lc-ic{ display:grid;width:38px;height:38px;border-radius:11px; }
  .ps-lc-ic .ps-ico{ width:20px;height:20px; }
  .ps-lc-tx b{ font-size:.92rem; }
  .ps-lc-tx p{ font-size:.76rem; }
}
/* '자동 이동' 안내가 알약 안에서 어색하게 줄바꿈되던 문제 */
@media (max-width:768px){
  .ps-lc-auto{
    border-radius:var(--ps-radius);
    padding:12px 16px;text-align:left;
    align-items:flex-start;line-height:1.55;
  }
  .ps-lc-auto .ps-ico{ margin-top:2px;flex:none; }
}

/* 게이지 숫자 : 한 줄 유지 + 링 정중앙 정렬 */
.ps-lc-ring{
  display:grid;grid-auto-flow:column;
  place-content:center;align-items:baseline;gap:2px;
}


/* =====================================================================
   19. 무료사주 결과  (PHASE 7)
   기준 : PS_03_03_FREE_RESULT_PC_V01 / MOBILE_V01
   ===================================================================== */

.ps-resultsec{ background:linear-gradient(180deg,#FBF9FF 0%,#F5F0FF 100%);padding:44px 0 64px; }

/* 카드 공통 헤더 */
.ps-res-head{ position:relative;margin-bottom:16px; }
.ps-res-head h2{
  display:flex;align-items:center;gap:8px;
  font-size:1.1rem;color:var(--navy);margin:0 0 5px;
}
.ps-res-head p{ font-size:.82rem;color:var(--ps-text-mute);line-height:1.5; }
.ps-res-badge{
  position:absolute;right:0;top:0;
  padding:5px 12px;border-radius:999px;
  background:var(--ps-purple-100);color:var(--ps-purple-600);
  font-size:.72rem;font-weight:700;
}
.ps-muted-line{ font-size:.86rem;color:var(--ps-text-mute); }

/* 오행 색 유틸 — 배경/연한 배경 */
.ps-el-wood-bg{ background:var(--el-wood) }  .ps-el-wood-soft{ background:#E6F4EE;color:#2E7256 }
.ps-el-fire-bg{ background:var(--el-fire) }  .ps-el-fire-soft{ background:#FCEBE7;color:#B04A38 }
.ps-el-earth-bg{ background:var(--el-earth) }.ps-el-earth-soft{ background:#FBF3DC;color:#9A7A22 }
.ps-el-metal-bg{ background:var(--el-metal) }.ps-el-metal-soft{ background:#EDEEF7;color:#5B6088 }
.ps-el-water-bg{ background:var(--el-water) }.ps-el-water-soft{ background:#E9EDFC;color:#3D5FA8 }

/* ---------------- 1행 ---------------- */
.ps-res-row1{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;margin-bottom:16px;align-items:stretch;
}
.ps-res-row1 > *{ min-width:0; }

/* 기본 정보 */
.ps-basic-body{ display:flex;flex-direction:column;gap:14px; }
.ps-basic-avatar{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:10px 0 4px;
}
.ps-basic-avatar svg{ opacity:.9; }
.ps-basic-zodiac{
  padding:4px 12px;border-radius:999px;
  background:var(--ps-purple-50);color:var(--ps-purple-600);
  font-size:.78rem;font-weight:700;
}
.ps-res-basic .ps-kv > div{ padding:9px 0; }
.ps-res-basic .ps-kv dt{ font-size:.8rem; }
.ps-res-basic .ps-kv dd{ font-size:.84rem; }

/* 사주 원국 표 */
.ps-chart-tb{ width:100%;border-collapse:separate;border-spacing:0;font-size:.84rem; }
.ps-chart-tb th{
  padding:8px 6px;font-weight:600;font-size:.76rem;
  color:var(--ps-text-mute);background:var(--ps-surface-2);
  border-bottom:1px solid var(--ps-line);white-space:nowrap;
}
.ps-chart-tb thead th:first-child{ border-radius:10px 0 0 0; }
.ps-chart-tb thead th:last-child{ border-radius:0 10px 0 0; }
.ps-chart-tb tbody th{
  text-align:left;background:#FCFAFF;
  border-right:1px solid var(--ps-line-soft);
}
.ps-chart-tb td{
  padding:9px 6px;text-align:center;vertical-align:middle;
  border-bottom:1px solid var(--ps-line-soft);
}
.ps-chart-tb td.is-empty{ color:var(--ps-text-mute);font-size:.78rem; }
.ps-chart-tb tr:last-child td,.ps-chart-tb tr:last-child th{ border-bottom:0; }

.ps-r-ganji td{ padding:11px 6px; }
.ps-gz{
  display:inline-grid;place-items:center;
  width:32px;height:32px;margin:0 1px 4px;border-radius:9px;
  font-family:var(--font-hanja);font-size:1.05rem;font-weight:700;
  color:#fff;
}
.ps-r-ganji b{ display:block;font-size:.78rem;color:var(--ps-text-soft);font-weight:600; }
.ps-gz-none{ font-size:.76rem; }

.ps-tg-chip{
  display:inline-block;padding:4px 9px;border-radius:8px;
  background:var(--ps-purple-50);color:var(--ps-purple-600);
  font-size:.78rem;font-weight:600;white-space:nowrap;
}
.ps-tg-chip.is-self{ background:var(--ps-grad-royal);color:#fff; }
.ps-hid-main{
  display:block;font-family:var(--font-hanja);font-size:1rem;
  font-weight:700;color:var(--navy);
}
.ps-hid-all{ display:block;font-family:var(--font-hanja);font-size:.72rem;color:var(--ps-text-mute);margin-top:2px; }
.ps-chart-note{
  display:flex;gap:7px;align-items:flex-start;margin-top:12px;
  font-size:.78rem;color:var(--ps-text-mute);line-height:1.55;
}
.ps-chart-note .ps-ico{ color:var(--ps-purple-400);flex:none;margin-top:1px; }

/* 오행 분포 */
.ps-el-bars{ display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:16px; }
.ps-el-col{ display:flex;flex-direction:column;align-items:center;gap:5px; }
.ps-el-track{
  width:26px;height:110px;border-radius:999px;
  background:var(--ps-surface-2);
  display:flex;align-items:flex-end;overflow:hidden;
}
.ps-el-fill{ width:100%;border-radius:999px;transition:height .8s var(--ps-ease); }
.ps-el-name{ font-family:var(--font-hanja);font-size:.95rem;font-weight:700; }
.ps-el-pct{ font-size:.82rem;font-weight:700;color:var(--ps-text); }
.ps-el-cnt{ font-size:.7rem;color:var(--ps-text-mute); }
.ps-el-note{
  display:flex;gap:10px;align-items:flex-start;
  padding:13px 15px;border-radius:var(--ps-radius-sm);
  background:var(--ps-purple-50);border:1px solid var(--ps-line-soft);
}
.ps-el-note .ps-ico{ color:var(--ps-purple-500);flex:none;margin-top:1px; }
.ps-el-note span{ display:block;font-size:.8rem;color:var(--ps-text-soft);line-height:1.6; }
.ps-el-note b{ color:var(--ps-purple-600); }

/* 한 줄 요약 (다크 카드) */
.ps-res-oneline{
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:var(--ps-radius-lg);
  border:1px solid rgba(212,175,55,.34);
  background:
    radial-gradient(120% 100% at 78% 16%, rgba(124,77,255,.44), transparent 62%),
    linear-gradient(160deg,#2A1550 0%,#1A1033 60%,#150C2A 100%);
  color:var(--ps-text-on-dark);
  padding:26px 24px;
  box-shadow:var(--ps-shadow-lg);
  display:flex;
}
.ps-res-oneline .ps-sky{ z-index:0; }
.ps-ol-body{ position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center; }
.ps-ol-mark{ color:var(--ps-gold-bright);margin-bottom:10px; }
.ps-res-oneline h2{
  font-size:1rem;color:var(--ps-gold-bright);margin-bottom:14px;letter-spacing:.02em;
}
.ps-ol-main{
  font-family:var(--font-title);font-size:1.14rem;line-height:1.6;
  color:#FDFAF3;margin-bottom:14px;word-break:keep-all;
}
.ps-ol-sub{ font-size:.83rem;line-height:1.75;color:rgba(243,239,252,.78); }

/* ---------------- 2행 ---------------- */
.ps-res-row2{
  display:grid;grid-template-columns:1.1fr 1.2fr 1fr;gap:16px;margin-bottom:16px;
}
.ps-res-row2 > *{ min-width:0; }

/* 일간 */
.ps-dm-body{ display:flex;gap:18px;align-items:flex-start; }
.ps-dm-circle{
  display:grid;place-items:center;align-content:center;
  width:104px;height:104px;flex:none;border-radius:50%;
  border:2px solid currentColor;
}
.ps-dm-circle b{ font-family:var(--font-title);font-size:1.3rem;line-height:1.1; }
.ps-dm-circle span{ font-family:var(--font-hanja);font-size:.8rem;opacity:.8; }
.ps-dm-tx h3{ font-size:1.02rem;margin-bottom:8px;color:var(--navy); }
.ps-dm-tx p{ font-size:.84rem;color:var(--ps-text-soft);line-height:1.7;margin-bottom:12px; }
.ps-dm-tx b{ color:var(--ps-purple-600); }

/* 십성 구성 */
.ps-tg-list{ display:flex;flex-direction:column;gap:11px; }
.ps-tg-list li{
  display:grid;grid-template-columns:76px 1fr 22px;
  gap:9px;align-items:center;
}
.ps-tg-name{ font-size:.88rem;font-weight:700;color:var(--navy); }
.ps-tg-name i{
  display:block;font-style:normal;font-size:.68rem;
  color:var(--ps-purple-400);font-weight:600;
}
.ps-tg-bar{ height:8px;border-radius:999px;background:var(--ps-surface-2);overflow:hidden; }
.ps-tg-bar i{ display:block;height:100%;border-radius:999px;background:var(--ps-grad-royal); }
.ps-tg-cnt{ font-size:.82rem;font-weight:700;color:var(--ps-purple-600);text-align:right; }
.ps-tg-desc{
  grid-column:1 / -1;font-size:.76rem;color:var(--ps-text-mute);
  line-height:1.5;margin-top:-4px;
}

/* 현재 흐름 */
.ps-flow-body{ position:relative; }
.ps-flow-moon{
  display:block;width:72px;height:72px;margin:0 auto 14px;opacity:.9;
}
.ps-flow-body p{ font-size:.86rem;color:var(--ps-text-soft);line-height:1.8;word-break:keep-all; }

/* ---------------- 3행 : 분야별 기운 ---------------- */
.ps-res-domain{ margin-bottom:16px; }
.ps-domain-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:12px; }
.ps-domain{
  padding:18px 16px;border-radius:var(--ps-radius);
  border:1px solid var(--ps-line-soft);background:#FCFAFF;
  text-align:center;
}
.ps-domain.has{ border-color:var(--ps-purple-200);background:var(--ps-white); }
.ps-domain-ic{
  display:grid;place-items:center;width:48px;height:48px;margin:0 auto 10px;
  border-radius:50%;color:var(--ps-purple-400);background:var(--ps-purple-50);
}
.ps-domain.has .ps-domain-ic{ color:var(--ps-purple-600);background:var(--ps-purple-100); }
.ps-domain b{ display:block;font-size:.95rem;color:var(--navy);margin-bottom:5px; }
.ps-domain-meta{
  display:inline-block;margin-bottom:8px;padding:3px 9px;border-radius:999px;
  background:var(--ps-surface-2);color:var(--ps-text-mute);
  font-size:.72rem;font-weight:700;
}
.ps-domain.has .ps-domain-meta{ background:var(--ps-purple-100);color:var(--ps-purple-600); }
.ps-domain p{ font-size:.79rem;color:var(--ps-text-soft);line-height:1.6;word-break:keep-all; }
.ps-domain .ps-chip-row{ justify-content:center;margin-top:9px; }
.ps-domain-note{
  display:flex;gap:7px;align-items:flex-start;margin-top:14px;
  font-size:.78rem;color:var(--ps-text-mute);line-height:1.6;
}
.ps-domain-note .ps-ico{ color:var(--ps-purple-400);flex:none;margin-top:1px; }

/* ---------------- 4행 : 성향/강점/주의 ---------------- */
.ps-res-row4{ display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px; }
.ps-res-list h3{
  display:flex;align-items:center;gap:8px;
  font-size:1rem;color:var(--navy);margin-bottom:14px;
}
.ps-rl-ic{ display:flex;color:var(--ps-purple-500); }
.ps-res-list.is-good .ps-rl-ic{ color:var(--ps-gold-deep); }
.ps-res-list.is-warn .ps-rl-ic{ color:var(--ps-danger); }
.ps-res-list ul{ display:flex;flex-direction:column;gap:10px; }
.ps-res-list li{
  position:relative;padding-left:16px;
  font-size:.85rem;color:var(--ps-text-soft);line-height:1.7;word-break:keep-all;
}
.ps-res-list li::before{
  content:'';position:absolute;left:0;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--ps-purple-300);
}
.ps-res-list.is-good li::before{ background:var(--ps-gold); }
.ps-res-list.is-warn li::before{ background:var(--ps-danger);opacity:.6; }

/* ---------------- 5행 : 대운 ---------------- */
.ps-res-daeun{ margin-bottom:20px; }
.ps-daeun{
  display:grid;grid-template-columns:repeat(8,1fr);gap:10px;
  margin:0;padding:0;list-style:none;
}
.ps-daeun li{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:14px 6px;border-radius:var(--ps-radius-sm);
  border:1px solid var(--ps-line-soft);background:#FCFAFF;
}
.ps-daeun-n{
  width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--ps-purple-100);color:var(--ps-purple-600);
  font-size:.66rem;font-weight:800;
}
.ps-daeun-gz{
  display:grid;place-items:center;width:46px;height:46px;border-radius:12px;
  font-family:var(--font-hanja);font-size:1.1rem;font-weight:700;
  border:1px solid currentColor;
}
.ps-daeun-ko{ font-size:.76rem;color:var(--ps-text-soft);font-weight:600; }
.ps-daeun-el{ font-family:var(--font-hanja);font-size:.74rem;font-weight:700; }

/* ---------------- 6행 : 유료 전환 ---------------- */
.ps-res-row6{ display:grid;grid-template-columns:2.3fr 1fr;gap:16px;margin-bottom:22px; }
.ps-upsell{
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:var(--ps-radius-lg);
  background:
    radial-gradient(110% 120% at 12% 20%, rgba(124,77,255,.42), transparent 60%),
    linear-gradient(120deg,#1E1240 0%,#2A1550 52%,#150C2A 100%);
  border:1px solid rgba(212,175,55,.3);
  color:var(--ps-text-on-dark);
  padding:28px 30px;
}
.ps-upsell .ps-sky{ z-index:0; }
.ps-upsell-body{ position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center; }
.ps-upsell-tx h2{ font-size:1.24rem;color:#FDFAF3;margin-bottom:12px;word-break:keep-all; }
.ps-upsell-tx p{ font-size:.86rem;color:rgba(243,239,252,.78);line-height:1.75; }
.ps-upsell-rec{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--ps-radius);
  padding:20px 20px 18px;
  backdrop-filter:blur(4px);
}
.ps-upsell-rec > b{
  display:flex;align-items:center;gap:7px;
  font-size:.9rem;color:var(--ps-gold-bright);margin-bottom:12px;
}
.ps-upsell-rec ul{ display:flex;flex-direction:column;gap:8px;margin-bottom:18px; }
.ps-upsell-rec li{
  display:flex;gap:8px;align-items:flex-start;
  font-size:.82rem;color:rgba(243,239,252,.86);line-height:1.55;
}
.ps-upsell-rec li .ps-ico{ color:var(--ps-gold);flex:none;margin-top:2px; }
.ps-upsell-rec .btn{ width:100%; }

.ps-closing{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--ps-radius-lg);
  border:1px solid var(--ps-line-soft);
  background:linear-gradient(160deg,#FBF9FF,#F3EFFF);
  padding:26px 20px;text-align:center;
}
.ps-closing-orn{ display:block;width:100%;max-width:200px; }
.ps-closing p{ font-family:var(--font-title);font-size:1rem;color:var(--navy);line-height:1.6; }
.ps-closing b{ font-family:var(--font-title);letter-spacing:.14em;font-size:.8rem;color:var(--ps-purple-500); }

.ps-res-actions{ display:flex;gap:10px;justify-content:center; }


/* =====================================================================
   반응형
   ===================================================================== */
@media (max-width:1240px){
  .ps-res-row1{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ps-daeun{ grid-template-columns:repeat(4,1fr); }
}
@media (max-width:1023px){
  .ps-res-row2{ grid-template-columns:1fr 1fr; }
  .ps-res-row2 > :last-child{ grid-column:1 / -1; }
  .ps-domain-grid{ grid-template-columns:repeat(2,1fr); }
  .ps-res-row6{ grid-template-columns:1fr; }
  .ps-upsell-body{ grid-template-columns:1fr;gap:20px; }
}
@media (max-width:768px){
  .ps-resultsec{ padding:28px 0 44px; }
  .ps-res-row1,.ps-res-row2,.ps-res-row4{ grid-template-columns:1fr;gap:12px;margin-bottom:12px; }
  .ps-res-row2 > :last-child{ grid-column:auto; }
  .ps-res-domain,.ps-res-daeun{ margin-bottom:12px; }
  .ps-res-head h2{ font-size:1.04rem; }
  .ps-res-badge{ position:static;display:inline-block;margin-top:8px; }

  .ps-basic-body{ flex-direction:row;align-items:flex-start;gap:16px; }
  .ps-basic-avatar{ padding:0;flex:none; }
  .ps-basic-avatar svg{ width:72px;height:72px; }
  .ps-res-basic .ps-kv{ flex:1;min-width:0; }

  .ps-chart-tb{ font-size:.8rem;min-width:420px; }
  .ps-gz{ width:28px;height:28px;font-size:.96rem; }

  .ps-el-track{ height:92px;width:22px; }
  .ps-domain-grid{ grid-template-columns:repeat(2,1fr);gap:10px; }
  .ps-daeun{ grid-template-columns:repeat(4,1fr);gap:8px; }
  .ps-daeun li{ padding:11px 4px; }
  .ps-daeun-gz{ width:40px;height:40px;font-size:1rem; }

  .ps-res-oneline{ padding:22px 20px; }
  .ps-ol-main{ font-size:1.06rem; }
  .ps-upsell{ padding:22px 18px; }
  .ps-upsell-tx h2{ font-size:1.1rem; }
  .ps-res-actions{ flex-direction:column; }
  .ps-res-actions .btn{ width:100%; }

  .ps-dm-body{ gap:14px; }
  .ps-dm-circle{ width:88px;height:88px; }
  .ps-dm-circle b{ font-size:1.14rem; }
}
@media (max-width:420px){
  .ps-domain-grid{ grid-template-columns:1fr; }
  .ps-daeun{ grid-template-columns:repeat(2,1fr); }
  .ps-el-bars{ gap:5px; }
  .ps-el-track{ width:18px; }
  .ps-tg-list li{ grid-template-columns:66px 1fr 20px;gap:7px; }
  .ps-basic-body{ flex-direction:column; }
  .ps-basic-avatar{ align-self:center; }
}

/* ---------- 무료 결과 보정 : 모바일에서 4주가 한 화면에 ---------- */
@media (max-width:768px){
  .ps-res-chart{ padding-left:14px;padding-right:14px; }
  .ps-chart-tb{ min-width:0;width:100%;font-size:.74rem;table-layout:fixed; }
  .ps-chart-tb thead th{ padding:6px 2px;font-size:.7rem; }
  .ps-chart-tb tbody th{ width:52px;padding:6px 4px;font-size:.7rem;word-break:keep-all; }
  .ps-chart-tb td{ padding:7px 2px; }
  .ps-gz{ width:26px;height:26px;margin:0 0 3px;font-size:.9rem;border-radius:7px; }
  .ps-r-ganji b{ font-size:.7rem; }
  .ps-tg-chip{ padding:3px 6px;font-size:.7rem; }
  .ps-hid-main{ font-size:.92rem; }
  .ps-hid-all{ font-size:.62rem;letter-spacing:-.02em; }
  .ps-chart-note{ font-size:.74rem; }
}
@media (max-width:360px){
  .ps-chart-tb{ font-size:.7rem; }
  .ps-chart-tb tbody th{ width:44px;font-size:.66rem; }
  .ps-gz{ width:23px;height:23px;font-size:.82rem; }
  .ps-tg-chip{ padding:3px 4px;font-size:.66rem; }
}

/* =====================================================================
   20. 분석상품 목록 · 상품 상세  (PHASE 8)
   기준 : PS_04_01_PRODUCT_LIST_PC / MOBILE
          PS_05_01~05_PRODUCT_DETAIL_PC / MOBILE
   ---------------------------------------------------------------------
   가격 · 분량 · 분석항목은 전부 data.js 에서 옵니다. CSS 에는 없습니다.
   ===================================================================== */

/* 상품별 강조색 — 시안의 상품 컬러를 그대로 옮겼습니다.
   카드의 틀은 브랜드 퍼플로 통일하고, 강조색만 상품마다 다릅니다. */
.pl-t-money,     .pd-t-money     { --acc:#2E7D5B; --acc-2:#3FA97A; --acc-soft:#E6F4EE; }
.pl-t-love,      .pd-t-love      { --acc:#D2417A; --acc-2:#F2709C; --acc-soft:#FCE9F1; }
.pl-t-gunghap,   .pd-t-gunghap   { --acc:#6633CC; --acc-2:#9469F0; --acc-soft:#EDE6FD; }
.pl-t-newyear,   .pd-t-newyear   { --acc:#2F63BE; --acc-2:#5B93E8; --acc-soft:#E6EFFB; }
.pl-t-signature, .pd-t-signature { --acc:#4B1E8C; --acc-2:#8A5CE0; --acc-soft:#EFE6FB; }


/* =====================================================================
   20-A. 분석상품 목록 (products.html)
   ===================================================================== */

.pl-page{ padding:0; }

/* ---------------- 히어로 ---------------- */
.pl-hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(120% 90% at 78% 22%, rgba(120,64,210,.42) 0%, transparent 62%),
    linear-gradient(170deg, var(--ps-cosmic-950) 0%, var(--ps-cosmic-800) 55%, var(--ps-cosmic-900) 100%);
  padding:64px 0 0;
}
.pl-hero-sky{ position:absolute;inset:0;z-index:0;pointer-events:none; }
.pl-hero-sky svg{ width:100%;height:100%;display:block; }
.pl-hero-mark{
  position:absolute;right:6%;top:26px;z-index:1;
  width:300px;height:300px;pointer-events:none;
  opacity:.9;filter:drop-shadow(0 0 34px rgba(232,200,119,.34));
}
.pl-hero-mark svg{ width:100%;height:100%;display:block; }

.pl-hero-in{ position:relative;z-index:2;padding-bottom:38px; }
.pl-eyebrow{
  display:inline-block;margin-bottom:14px;
  font-size:.76rem;font-weight:700;letter-spacing:.14em;
  color:var(--ps-gold-soft);text-transform:uppercase;
}
.pl-hero-in h1{
  font-family:var(--font-title);
  font-size:clamp(2rem,3.6vw,3rem);line-height:1.24;
  color:#fff;margin:0 0 16px;word-break:keep-all;
}
.pl-hero-in h1 em{
  font-style:normal;
  background:var(--ps-grad-gold);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--ps-gold);
}
.pl-hero-in p{
  font-size:1rem;line-height:1.7;color:var(--ps-text-on-dark-soft);
  max-width:30em;word-break:keep-all;margin:0;
}

/* 서비스 특징 스트립 — 히어로 하단에 겹칩니다 */
.pl-feat{
  position:relative;z-index:2;
  max-width:var(--ps-maxw);margin:0 auto;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  list-style:none;padding:0;
  border:1px solid rgba(232,200,119,.26);
  border-radius:var(--ps-radius-lg) var(--ps-radius-lg) 0 0;
  border-bottom:0;
  background:linear-gradient(180deg, rgba(52,24,104,.62), rgba(20,10,45,.72));
  backdrop-filter:blur(3px);
  overflow:hidden;
}
.pl-feat li{
  display:grid;grid-template-columns:auto 1fr;
  grid-template-areas:"ic t" "ic d";
  align-items:center;gap:2px 14px;
  padding:22px 20px;
  border-left:1px solid rgba(232,200,119,.16);
}
.pl-feat li:first-child{ border-left:0; }
.pl-feat-ic{
  grid-area:ic;
  display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%, rgba(150,96,240,.6), rgba(46,20,96,.9));
  border:1px solid rgba(232,200,119,.3);color:var(--ps-gold-soft);
}
.pl-feat li > b{ grid-area:t;font-size:.92rem;color:#fff;align-self:end; }
/* .pl-feat-ic 도 span 이므로 :not() 으로 제외해야 아이콘이 설명 칸으로 밀려나지 않습니다 */
.pl-feat li > span:not(.pl-feat-ic){ grid-area:d;font-size:.8rem;line-height:1.5;color:var(--ps-text-on-dark-mute);align-self:start; }

/* ---------------- 목록 영역 ---------------- */
.pl-list-sec{
  background:linear-gradient(180deg,#FBF9FF 0%,#F4EFFC 100%);
  padding:52px 0 60px;
}
.pl-head{ text-align:center;margin-bottom:34px; }
.pl-orn{ display:flex;justify-content:center;margin-bottom:6px; }
.pl-orn svg{ max-width:300px; }
.pl-head h2{
  font-family:var(--font-title);font-size:clamp(1.5rem,2.4vw,2rem);
  color:var(--ps-purple-600);margin:0 0 8px;
}
.pl-head p{ font-size:.94rem;color:var(--ps-text-mute);margin:0;word-break:keep-all; }

.pl-grid{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:18px;align-items:stretch;
}

/* ---------------- 상품 카드 ---------------- */
.pl-card{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--ps-line);
  border-radius:var(--ps-radius-lg);
  padding:26px 18px 18px;
  box-shadow:var(--ps-shadow-sm);
  transition:transform .22s var(--ps-ease), box-shadow .22s var(--ps-ease), border-color .22s var(--ps-ease);
}
.pl-card:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb, var(--acc) 42%, transparent);
  box-shadow:0 16px 34px rgba(60,26,120,.14);
}
.pl-card.is-best{
  border-color:rgba(212,175,55,.55);
  background:linear-gradient(180deg,#fff 0%, #FBF6FF 100%);
  box-shadow:0 12px 30px rgba(75,30,140,.14);
}
.pl-n{
  position:absolute;left:16px;top:16px;
  display:grid;place-items:center;min-width:26px;height:26px;padding:0 7px;
  border-radius:999px;background:var(--acc);color:#fff;
  font-size:.72rem;font-weight:800;letter-spacing:.02em;
}
.pl-ribbon{
  position:absolute;right:14px;top:14px;
  display:inline-flex;align-items:center;gap:4px;
  padding:5px 10px;border-radius:999px;
  background:var(--ps-grad-gold);color:#3A2205;
  font-size:.68rem;font-weight:800;white-space:nowrap;
}
.pl-ribbon svg{ width:13px;height:13px; }

.pl-art{
  display:grid;place-items:center;
  width:96px;height:96px;margin:8px auto 14px;
}
.pl-art img{ width:100%;height:100%;object-fit:contain;display:block; }
.pl-art.is-svg{
  border-radius:50%;color:var(--acc);
  background:var(--acc-soft);border:1px solid color-mix(in srgb, var(--acc) 26%, transparent);
}

/* 카드마다 문구 길이가 달라도 분량·구성 줄이 같은 높이에서 만나도록 */
.pl-body{ flex:1 1 auto;text-align:center;display:flex;flex-direction:column; }
.pl-body h3{
  font-family:var(--font-title);font-size:1.06rem;line-height:1.35;
  color:var(--ps-text);margin:0 0 8px;word-break:keep-all;
}
.pl-q{
  font-size:.84rem;line-height:1.6;color:var(--acc);
  margin:0 0 14px;word-break:keep-all;
}
.pl-meta{ margin:auto 0 0;border-top:1px dashed var(--ps-line);padding-top:12px;text-align:left; }
.pl-meta > div{
  display:grid;grid-template-columns:auto 1fr;gap:8px;
  padding:4px 0;font-size:.78rem;
}
.pl-meta dt{ color:var(--ps-text-mute);white-space:nowrap; }
.pl-meta dd{ margin:0;color:var(--ps-text);font-weight:600;text-align:right;word-break:keep-all; }

.pl-foot{ margin-top:14px;text-align:center; }
.pl-price{
  display:block;margin-bottom:10px;
  font-family:var(--font-title);font-size:1.34rem;font-weight:800;color:var(--acc);
}
.pl-btn{ width:100%;justify-content:center; }

.pl-unit{
  margin:26px 0 0;text-align:center;
  font-size:.8rem;line-height:1.7;color:var(--ps-text-mute);word-break:keep-all;
}

/* ---------------- 무료 사주 안내 ---------------- */
.pl-free{
  background:
    radial-gradient(90% 120% at 82% 40%, rgba(120,64,210,.4) 0%, transparent 60%),
    linear-gradient(160deg, var(--ps-cosmic-900), var(--ps-cosmic-800));
  padding:52px 0;
}
.pl-free-in{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:34px;align-items:center;
}
.pl-free-copy h2{
  font-family:var(--font-title);font-size:clamp(1.4rem,2.2vw,1.9rem);
  color:#fff;margin:0 0 12px;
}
.pl-free-copy p{
  font-size:.95rem;line-height:1.75;color:var(--ps-text-on-dark-soft);
  margin:0 0 22px;word-break:keep-all;
}
.pl-free-art{ display:flex;justify-content:center;opacity:.92; }
.pl-free-art svg{ width:100%;max-width:260px;height:auto; }

/* ---------------- 신뢰 스트립 ---------------- */
.pl-trust{
  max-width:var(--ps-maxw);margin:0 auto;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  list-style:none;padding:26px 24px;
}
.pl-trust li{
  display:grid;grid-template-columns:auto 1fr;
  grid-template-areas:"ic t" "ic d";
  gap:2px 12px;align-items:center;
  padding:6px 16px;border-left:1px solid var(--ps-line);
}
.pl-trust li:first-child{ border-left:0; }
.pl-trust li svg{ grid-area:ic;color:var(--ps-purple-500); }
.pl-trust b{ grid-area:t;font-size:.88rem;color:var(--ps-text);align-self:end; }
.pl-trust span{ grid-area:d;font-size:.78rem;color:var(--ps-text-mute);align-self:start; }


/* =====================================================================
   20-B. 상품 상세 (product.html / comprehensive.html)
   ===================================================================== */

.pd-page{
  background:linear-gradient(180deg,#FBF9FF 0%,#F4EFFC 100%);
  padding:18px 0 60px;
}
.pd-empty{ text-align:center;padding:80px 20px;color:var(--ps-text-mute); }
.pd-empty p{ margin-bottom:16px; }

/* ---------------- 경로 ---------------- */
.pd-crumb{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  font-size:.8rem;color:var(--ps-text-mute);margin:0 0 14px;
}
.pd-crumb a{ color:var(--ps-text-mute);text-decoration:none; }
.pd-crumb a:hover{ color:var(--ps-purple-500);text-decoration:underline; }
.pd-crumb b{ color:var(--ps-purple-600); }
.pd-crumb span{ opacity:.5; }

/* ---------------- 히어로 ---------------- */
.pd-hero{
  position:relative;overflow:hidden;
  border-radius:var(--ps-radius-lg);
  border:1px solid rgba(232,200,119,.24);
  background:
    radial-gradient(88% 120% at 22% 34%, rgba(120,64,210,.44) 0%, transparent 62%),
    linear-gradient(155deg, var(--ps-cosmic-950) 0%, var(--ps-cosmic-800) 58%, var(--ps-cosmic-900) 100%);
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:24px;align-items:center;
  padding:38px 40px;
}
.pd-hero-sky{ position:absolute;inset:0;z-index:0;pointer-events:none; }
.pd-hero-sky svg{ width:100%;height:100%;display:block; }

.pd-hero-art{
  position:relative;z-index:2;
  display:grid;place-items:center;min-height:190px;
}
.pd-hero-art img{
  position:relative;z-index:1;
  width:100%;max-width:220px;height:auto;display:block;
  filter:drop-shadow(0 12px 26px rgba(0,0,0,.4));
}
.pd-hero-art.is-svg{ color:var(--ps-gold-soft); }
.pd-hero-glow{
  position:absolute;width:230px;height:230px;border-radius:50%;
  background:radial-gradient(circle, rgba(150,96,240,.55) 0%, transparent 68%);
  filter:blur(14px);
}

.pd-hero-copy{ position:relative;z-index:2; }
.pd-code{
  display:inline-block;margin-bottom:12px;padding:5px 13px;
  border:1px solid rgba(232,200,119,.5);border-radius:999px;
  font-size:.72rem;font-weight:700;letter-spacing:.08em;color:var(--ps-gold-soft);
}
.pd-hero-copy h1{
  font-family:var(--font-title);
  font-size:clamp(1.6rem,3vw,2.5rem);line-height:1.25;
  color:#fff;margin:0 0 12px;word-break:keep-all;
}
.pd-q{
  font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.55;font-weight:700;
  color:var(--ps-gold-soft);margin:0 0 14px;word-break:keep-all;
}
.pd-desc{
  font-size:.92rem;line-height:1.75;color:var(--ps-text-on-dark-soft);
  margin:0;word-break:keep-all;
}

/* ---------------- 스펙 스트립 ---------------- */
.pd-spec{
  position:relative;z-index:3;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  list-style:none;
  margin:-22px 22px 22px;padding:0;
  background:#fff;border:1px solid var(--ps-line);
  border-radius:var(--ps-radius);box-shadow:var(--ps-shadow);
  overflow:hidden;
}
.pd-spec li{
  display:grid;grid-template-columns:auto 1fr;
  grid-template-areas:"ic t" "ic v";
  gap:1px 12px;align-items:center;
  padding:16px 18px;border-left:1px solid var(--ps-line);
}
.pd-spec li:first-child{ border-left:0; }
.pd-spec-ic{
  grid-area:ic;display:grid;place-items:center;
  width:40px;height:40px;border-radius:11px;
  background:var(--acc-soft);color:var(--acc);
}
.pd-spec b{ grid-area:t;font-size:.76rem;color:var(--ps-text-mute);font-weight:600;align-self:end; }
.pd-spec em{ grid-area:v;font-style:normal;font-size:.94rem;font-weight:700;color:var(--ps-text);align-self:start;word-break:keep-all; }

/* ---------------- 본문 레이아웃 ---------------- */
.pd-layout{
  display:grid;grid-template-columns:minmax(0,1fr) 344px;
  gap:22px;align-items:start;
}
.pd-main{ display:grid;gap:18px;min-width:0; }

.pd-card{
  background:#fff;border:1px solid var(--ps-line);
  border-radius:var(--ps-radius);padding:26px 26px 24px;
  box-shadow:var(--ps-shadow-sm);
}
.pd-h2{
  font-family:var(--font-title);font-size:1.22rem;
  color:var(--ps-purple-600);margin:0 0 4px;
  display:flex;align-items:center;gap:9px;
}
.pd-h2::before{
  content:"";width:4px;height:17px;border-radius:2px;
  background:var(--ps-grad-gold);flex:0 0 auto;
}
.pd-h2-sub{ font-size:.84rem;color:var(--ps-text-mute);margin:0 0 16px;padding-left:13px; }
.pd-card > .pd-h2:not(:last-child){ margin-bottom:16px; }
.pd-card > .pd-h2 + .pd-h2-sub{ margin-top:-12px; }

/* 이런 내용을 분석해요 */
/* 분석영역 개수(4 또는 5)에 따라 렌더러가 pd-hl-4 / pd-hl-5 를 붙입니다 */
.pd-hl{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;list-style:none;padding:0;margin:0;
}
.pd-hl-5{ grid-template-columns:repeat(5,minmax(0,1fr)); }
.pd-hl li{
  display:grid;justify-items:center;text-align:center;gap:6px;
  padding:20px 12px;border-radius:var(--ps-radius-sm);
  background:linear-gradient(180deg,#FCFAFF, var(--acc-soft));
  border:1px solid color-mix(in srgb, var(--acc) 18%, transparent);
}
.pd-hl-ic{
  display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
  background:#fff;color:var(--acc);
  border:1px solid color-mix(in srgb, var(--acc) 28%, transparent);
  box-shadow:0 3px 10px rgba(70,30,130,.08);
}
.pd-hl li > b{ font-size:.9rem;color:var(--ps-text);word-break:keep-all; }
.pd-hl li > span:not(.pd-hl-ic){ font-size:.78rem;line-height:1.5;color:var(--ps-text-mute);word-break:keep-all; }

/* 리포트 구성 — 장 목록 */
.pd-chs{ list-style:none;padding:0;margin:0;display:grid;gap:8px; }
.pd-ch{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:14px;align-items:center;
  padding:13px 16px;border-radius:var(--ps-radius-sm);
  background:#FBF9FF;border:1px solid var(--ps-line-soft);
  transition:border-color .18s var(--ps-ease), background .18s var(--ps-ease);
}
.pd-ch:hover{ background:#fff;border-color:color-mix(in srgb, var(--acc) 34%, transparent); }
.pd-ch-n{
  display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:var(--acc);color:#fff;
  font-family:var(--font-title);font-size:.84rem;font-weight:800;
}
.pd-ch-body{ min-width:0; }
.pd-ch-body h4{ font-size:.98rem;color:var(--ps-text);margin:0 0 3px;word-break:keep-all; }
.pd-ch-body p{ font-size:.8rem;line-height:1.5;color:var(--ps-text-mute);margin:0;word-break:keep-all; }
.pd-ch-p{
  font-size:.76rem;font-weight:700;color:var(--acc);
  background:var(--acc-soft);border-radius:999px;padding:4px 10px;white-space:nowrap;
}

/* 인생 종합사주 — 부(部) 묶음 */
.pd-part{ margin-bottom:20px; }
.pd-part:last-of-type{ margin-bottom:8px; }
.pd-part-h{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding-bottom:7px;margin-bottom:3px;
  border-bottom:1px solid var(--ps-line);
}
.pd-part-t{
  font-family:var(--font-title);font-size:1rem;font-weight:800;color:var(--ps-purple-600);
}
.pd-part-m{ font-size:.76rem;color:var(--ps-text-mute); }
.pd-part-d{ font-size:.82rem;color:var(--ps-text-mute);margin:0 0 10px;word-break:keep-all; }

.pd-total{
  margin:14px 0 0;padding:11px 14px;border-radius:var(--ps-radius-sm);
  background:var(--acc-soft);color:var(--acc);
  font-size:.86rem;font-weight:700;text-align:center;
}
.pd-unit{
  margin:10px 0 0;font-size:.76rem;line-height:1.6;
  color:var(--ps-text-mute);word-break:keep-all;
}

/* 무엇이 다른가요 */
.pd-diff{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }
.pd-diff article{
  padding:16px 18px;border-radius:var(--ps-radius-sm);
  background:#FBF9FF;border:1px solid var(--ps-line-soft);
}
.pd-diff-wide{ grid-column:1 / -1; }
.pd-diff-t{
  display:inline-block;margin-bottom:7px;padding:4px 10px;border-radius:999px;
  background:var(--ps-purple-100);color:var(--ps-purple-600);
  font-size:.74rem;font-weight:700;
}
.pd-diff p{ font-size:.86rem;line-height:1.75;color:var(--ps-text-soft);margin:0;word-break:keep-all; }
.pd-note{
  margin-top:12px;padding:14px 16px;border-radius:var(--ps-radius-sm);
  background:#FFFBF0;border:1px solid rgba(212,175,55,.35);
  font-size:.84rem;line-height:1.7;color:#6B5312;word-break:keep-all;
}
.pd-note-sm{ margin:10px 0 0;font-size:.78rem;color:var(--ps-text-mute);text-align:center; }

/* 추천 대상 */
.pd-rec ul{
  list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 20px;
}
.pd-rec li{
  display:grid;grid-template-columns:auto 1fr;gap:9px;align-items:start;
  font-size:.88rem;line-height:1.6;color:var(--ps-text-soft);word-break:keep-all;
}
.pd-rec li svg{ color:var(--acc);margin-top:2px; }
.pd-tick{
  width:16px;height:16px;border-radius:50%;background:var(--acc);
  display:inline-block;margin-top:2px;
}

/* 이용 안내 */
.pd-info{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:0;margin:0;border-top:1px solid var(--ps-line);
}
.pd-info dt{
  padding:12px 18px 12px 0;font-size:.84rem;color:var(--ps-text-mute);
  border-bottom:1px solid var(--ps-line);white-space:nowrap;
}
.pd-info dd{
  padding:12px 0;margin:0;font-size:.88rem;line-height:1.6;
  color:var(--ps-text);border-bottom:1px solid var(--ps-line);word-break:keep-all;
}

/* ---------------- 구매 카드 ---------------- */
.pd-side{ position:sticky;top:88px;display:grid;gap:12px; }
.pd-buy{
  border-radius:var(--ps-radius);overflow:hidden;
  border:1px solid rgba(232,200,119,.4);
  box-shadow:0 14px 34px rgba(60,26,120,.16);
  background:#fff;
}
.pd-buy-h{
  padding:14px 18px;
  background:linear-gradient(120deg, var(--ps-cosmic-800), var(--ps-cosmic-700));
  color:var(--ps-gold-soft);font-size:.88rem;font-weight:700;text-align:center;
  word-break:keep-all;
}
.pd-buy-body{ padding:18px; }
.pd-buy-spec{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  list-style:none;padding:0 0 14px;margin:0 0 14px;
  border-bottom:1px solid var(--ps-line);
}
.pd-buy-spec li{
  display:grid;justify-items:center;gap:2px;text-align:center;
  border-left:1px solid var(--ps-line);
}
.pd-buy-spec li:first-child{ border-left:0; }
.pd-buy-spec li svg{ color:var(--acc); }
.pd-buy-spec b{ font-size:.74rem;color:var(--ps-text-mute);font-weight:600; }
.pd-buy-spec em{ font-style:normal;font-size:.86rem;font-weight:700;color:var(--ps-text); }

.pd-price{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:4px 0 14px;
}
.pd-price-l{ font-size:.84rem;color:var(--ps-text-mute);font-weight:600; }
.pd-price strong{
  font-family:var(--font-title);font-size:1.85rem;font-weight:800;color:var(--acc);
}
.pd-checks{ list-style:none;padding:0;margin:0 0 16px;display:grid;gap:7px; }
.pd-checks li{
  position:relative;padding-left:19px;
  font-size:.82rem;line-height:1.55;color:var(--ps-text-soft);word-break:keep-all;
}
.pd-checks li::before{
  content:"";position:absolute;left:2px;top:.42em;
  width:9px;height:5px;border-left:2px solid var(--acc);border-bottom:2px solid var(--acc);
  transform:rotate(-45deg);
}
.pd-cta{ display:grid;gap:9px; }
.pd-secure{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin:12px 0 0;font-size:.74rem;color:var(--ps-text-mute);text-align:center;
  word-break:keep-all;
}
.pd-secure svg{ flex:0 0 auto;color:var(--ps-purple-400); }

/* 신년운세 — 연도 선택 */
.pd-years{ display:grid;gap:8px; }
.pd-years-h{ font-size:.8rem;color:var(--ps-text-mute);margin:0 0 2px;text-align:center; }
.pd-year{
  display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center;
  padding:12px 14px;border-radius:var(--ps-radius-sm);text-decoration:none;
  background:var(--acc-soft);border:1px solid color-mix(in srgb, var(--acc) 26%, transparent);
  transition:border-color .18s var(--ps-ease), transform .18s var(--ps-ease);
}
.pd-year:hover{ border-color:var(--acc);transform:translateX(2px); }
.pd-year-n{ font-family:var(--font-title);font-size:1.06rem;font-weight:800;color:var(--acc); }
.pd-year-t{ font-size:.84rem;color:var(--ps-text); }
.pd-year .ps-arrow{ color:var(--acc); }

/* 고객센터 안내 */
.pd-help{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px;border-radius:var(--ps-radius);
  background:#fff;border:1px solid var(--ps-line);
}
.pd-help b{ display:block;font-size:.88rem;color:var(--ps-text);margin-bottom:2px; }
.pd-help span{ font-size:.78rem;color:var(--ps-text-mute); }

/* 신뢰 스트립 */
.pd-trust{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  list-style:none;margin:22px 0 0;padding:22px 20px;
  border-radius:var(--ps-radius);
  background:linear-gradient(150deg, var(--ps-cosmic-900), var(--ps-cosmic-800));
  border:1px solid rgba(232,200,119,.2);
}
.pd-trust li{
  display:grid;grid-template-columns:auto 1fr;
  grid-template-areas:"ic t" "ic d";
  gap:2px 12px;align-items:center;
  padding:4px 16px;border-left:1px solid rgba(232,200,119,.16);
}
.pd-trust li:first-child{ border-left:0; }
.pd-trust li svg{ grid-area:ic;color:var(--ps-gold-soft); }
.pd-trust b{ grid-area:t;font-size:.86rem;color:#fff;align-self:end; }
.pd-trust span{ grid-area:d;font-size:.76rem;color:var(--ps-text-on-dark-mute);align-self:start;word-break:keep-all; }


/* =====================================================================
   20-C. 반응형
   ===================================================================== */

/* ---- 5열 → 3열 ---- */
@media (max-width:1240px){
  .pl-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .pd-hl,.pd-hl-5{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .pl-hero-mark{ width:230px;height:230px;right:4%; }
  .pd-layout{ grid-template-columns:minmax(0,1fr) 306px; }
}

/* ---- 사이드바 내려오기 ---- */
@media (max-width:1023px){
  .pl-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pl-feat{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pl-feat li:nth-child(3){ border-left:0; }
  .pl-feat li:nth-child(n+3){ border-top:1px solid rgba(232,200,119,.16); }
  .pl-free-in{ grid-template-columns:1fr;gap:24px; }
  .pl-free-art{ order:-1; }
  .pl-free-art svg{ max-width:200px; }

  .pd-layout{ grid-template-columns:1fr; }
  .pd-side{ position:static; }
  .pd-hero{ padding:32px 28px; }
}

/* ---- 태블릿 이하 ---- */
@media (max-width:900px){
  .pl-trust{ grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 0; }
  .pl-trust li:nth-child(3){ border-left:0; }
  .pd-trust{ grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 0; }
  .pd-trust li:nth-child(3){ border-left:0; }
  .pd-diff{ grid-template-columns:1fr; }
  .pd-rec ul{ grid-template-columns:1fr; }
}

/* ---- 모바일 ---- */
@media (max-width:768px){
  .pl-hero{ padding:34px 0 0; }
  .pl-hero-mark{
    width:170px;height:170px;right:-24px;top:6px;opacity:.5;
  }
  .pl-hero-in{ padding-bottom:26px; }
  .pl-hero-in h1{ font-size:1.72rem; }
  .pl-hero-in p{ font-size:.9rem; }

  .pl-feat{
    margin:0 16px;border-radius:var(--ps-radius);border-bottom:1px solid rgba(232,200,119,.26);
  }
  .pl-feat li{ padding:15px 14px; }
  .pl-feat-ic{ width:38px;height:38px; }
  .pl-feat-ic svg{ width:21px;height:21px; }
  .pl-feat li > b{ font-size:.84rem; }
  .pl-feat li > span:not(.pl-feat-ic){ font-size:.72rem; }

  .pl-list-sec{ padding:34px 0 40px; }
  .pl-head{ margin-bottom:22px; }
  .pl-orn svg{ max-width:220px; }

  /* 목록 카드 — 시안 모바일처럼 가로형 행 카드 */
  .pl-grid{ grid-template-columns:1fr;gap:12px; }
  .pl-card{
    display:grid;
    grid-template-columns:72px minmax(0,1fr) minmax(94px,auto);
    grid-template-areas:"art body foot";
    gap:0 14px;align-items:center;
    padding:16px 16px 16px 14px;
  }
  .pl-card.is-best{ padding-top:30px; }
  .pl-n{ left:auto;right:12px;top:10px;min-width:22px;height:22px;font-size:.66rem; }
  .pl-ribbon{ left:14px;right:auto;top:8px;padding:4px 9px;font-size:.64rem; }
  .pl-art{ grid-area:art;width:66px;height:66px;margin:0; }
  .pl-body{ grid-area:body;text-align:left; }
  .pl-body h3{ font-size:.98rem;margin:0 0 4px;padding-right:26px; }
  .pl-q{ font-size:.78rem;margin:0 0 8px; }
  .pl-body{ display:block; }
  .pl-meta{ margin:0;border-top:0;padding-top:0; }
  .pl-meta > div{ grid-template-columns:auto auto;justify-content:start;gap:6px;padding:1px 0;font-size:.73rem; }
  .pl-meta dd{ text-align:left; }
  .pl-foot{ grid-area:foot;margin:0;text-align:right; }
  .pl-price{ font-size:1.1rem;margin-bottom:7px; }
  .pl-btn{ width:100%;padding:8px 10px;font-size:.78rem; }

  .pl-free{ padding:36px 0; }
  .pl-trust{ padding:22px 16px; }

  /* 상세 */
  .pd-page{ padding:12px 0 40px; }
  .pd-hero{
    grid-template-columns:1fr;gap:16px;padding:26px 20px;text-align:center;
  }
  .pd-hero-art{ min-height:0;order:-1; }
  .pd-hero-art img{ max-width:150px; }
  .pd-hero-glow{ width:160px;height:160px; }
  .pd-hero-copy h1{ font-size:1.5rem; }
  .pd-q{ font-size:1rem; }
  .pd-desc{ font-size:.86rem; }

  .pd-spec{ grid-template-columns:repeat(2,minmax(0,1fr));margin:-18px 12px 18px; }
  .pd-spec li{ padding:13px 14px; }
  .pd-spec li:nth-child(3){ border-left:0; }
  .pd-spec li:nth-child(n+3){ border-top:1px solid var(--ps-line); }
  .pd-spec-ic{ width:34px;height:34px;border-radius:9px; }
  .pd-spec-ic svg{ width:18px;height:18px; }
  .pd-spec em{ font-size:.86rem; }

  .pd-card{ padding:20px 16px 18px; }
  .pd-h2{ font-size:1.08rem; }
  .pd-hl,.pd-hl-5{ grid-template-columns:repeat(2,minmax(0,1fr));gap:9px; }
  .pd-hl li{ padding:15px 9px; }
  .pd-hl-ic{ width:40px;height:40px; }
  .pd-hl-ic svg{ width:22px;height:22px; }
  .pd-hl li > b{ font-size:.84rem; }
  .pd-hl li > span:not(.pd-hl-ic){ font-size:.72rem; }

  .pd-ch{ grid-template-columns:auto minmax(0,1fr);gap:10px;padding:11px 12px; }
  .pd-ch-n{ width:30px;height:30px;font-size:.78rem;border-radius:9px; }
  .pd-ch-body h4{ font-size:.92rem; }
  .pd-ch-body p{ font-size:.75rem; }
  .pd-ch-p{
    grid-column:2;justify-self:start;margin-top:5px;
    font-size:.7rem;padding:3px 8px;
  }

  .pd-info{ grid-template-columns:1fr; }
  .pd-info dt{ padding:11px 0 2px;border-bottom:0;font-size:.78rem; }
  .pd-info dd{ padding:0 0 11px;font-size:.86rem; }

  .pd-trust{ padding:18px 14px; }
  .pd-help{ flex-direction:column;align-items:flex-start;gap:10px; }
}

/* ---- 작은 화면 ---- */
@media (max-width:420px){
  .pl-card{
    grid-template-columns:60px minmax(0,1fr);
    grid-template-areas:"art body" "foot foot";
    gap:0 12px;
  }
  .pl-art{ width:58px;height:58px;align-self:start;margin-top:2px; }
  .pl-foot{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    margin-top:12px;padding-top:11px;border-top:1px dashed var(--ps-line);
  }
  .pl-price{ margin:0;font-size:1.06rem; }
  .pl-btn{ width:auto;flex:0 0 auto; }

  .pl-feat li{ padding:13px 10px;gap:2px 9px; }
  .pl-feat-ic{ width:33px;height:33px; }
  .pl-feat-ic svg{ width:18px;height:18px; }
  .pl-feat li > b{ font-size:.78rem; }
  .pl-feat li > span:not(.pl-feat-ic){ font-size:.67rem;line-height:1.4; }
  .pl-trust li{ padding:6px 10px; }

  .pd-hl,.pd-hl-5{ grid-template-columns:1fr; }
  .pd-hl li{
    grid-template-columns:auto 1fr;justify-items:start;text-align:left;
    grid-template-areas:"ic t" "ic d";gap:2px 12px;padding:13px 14px;
  }
  .pd-hl-ic{ grid-area:ic; }
  .pd-hl li > b{ grid-area:t;align-self:end; }
  .pd-hl li > span:not(.pd-hl-ic){ grid-area:d;align-self:start; }

  .pd-spec li{ padding:11px 12px; }
  .pd-spec b{ font-size:.72rem; }
  .pd-spec em{ font-size:.8rem; }
  .pd-trust li{ padding:4px 10px; }
  .pd-trust b{ font-size:.8rem; }
  .pd-trust span{ font-size:.7rem; }

}

/* 움직임 최소화 설정 존중 */
@media (prefers-reduced-motion:reduce){
  .pl-card,.pd-ch,.pd-year{ transition:none; }
  .pl-card:hover{ transform:none; }
  .pd-year:hover{ transform:none; }
}

/* =====================================================================
   21. 로그인 · 회원가입 · 사주 프로필 등록  (PHASE 9)
   기준 : PS_10_01_LOGIN / PS_10_02_SIGNUP / PS_10_03_PROFILE_SETUP
          PC · MOBILE
   ---------------------------------------------------------------------
   좌측 브랜드 패널 + 우측 폼 카드의 2분할 구조입니다.
   모바일에서는 브랜드 패널이 상단 배너가 되고 폼 카드가 그 위로 올라옵니다.
   ===================================================================== */

.au-page{ min-height:100vh;background:var(--ps-cosmic-950); }
.au-split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  min-height:100vh;
}

/* ---------------- 좌측 : 브랜드 패널 ---------------- */
.au-brand{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:56px 40px;text-align:center;
  background:var(--ps-cosmic-950);
}
.au-brand-bg{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;object-position:center;
}
/* 글자가 읽히도록 위아래로만 살짝 어둡게 덮습니다 (이미지는 그대로 보입니다) */
.au-brand::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(8,5,24,.62) 0%, rgba(8,5,24,.28) 34%,
    rgba(8,5,24,.42) 68%, rgba(8,5,24,.78) 100%);
}
.au-brand-sky{ position:absolute;inset:0;z-index:2;pointer-events:none; }
.au-brand-sky svg{ width:100%;height:100%;display:block; }

.au-brand-in{ position:relative;z-index:3;max-width:440px; }
.au-mark{ display:flex;justify-content:center;margin-bottom:14px; }
.au-mark svg{ filter:drop-shadow(0 0 26px rgba(232,200,119,.5)); }
.au-brand-name{
  font-family:var(--font-title);
  font-size:clamp(2rem,3.4vw,2.9rem);letter-spacing:.09em;
  background:var(--ps-grad-gold);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--ps-gold);
  margin:0 0 8px;
}
.au-brand-tag{
  font-size:.95rem;letter-spacing:.04em;color:var(--ps-text-on-dark-soft);margin:0;
}
.au-brand-orn{ display:flex;justify-content:center;margin:16px 0 20px; }
.au-brand-orn svg{ max-width:260px; }
.au-brand-h{
  font-family:var(--font-title);
  font-size:clamp(1.25rem,2vw,1.7rem);line-height:1.45;
  color:#fff;margin:0 0 12px;word-break:keep-all;
  text-shadow:0 2px 18px rgba(8,5,24,.7);
}
.au-brand-p{
  font-size:.92rem;line-height:1.7;color:var(--ps-text-on-dark-soft);
  margin:0;word-break:keep-all;
}

/* 프로필 등록 화면 하단 3포인트 */
.au-points{
  position:relative;z-index:3;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;width:100%;max-width:520px;margin-top:38px;
  list-style:none;padding:0;
}
.au-points li{ display:grid;justify-items:center;gap:5px;text-align:center; }
.au-points li svg{ color:var(--ps-gold-soft); }
.au-points b{ font-size:.86rem;color:#fff; }
.au-points span{ font-size:.74rem;line-height:1.5;color:var(--ps-text-on-dark-mute);word-break:keep-all; }

/* ---------------- 우측 : 폼 영역 ---------------- */
.au-form{
  position:relative;z-index:1;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:44px 40px;
  background:linear-gradient(180deg,#FBF9FF 0%,#F2ECFB 100%);
}
.au-form-in{ width:100%;max-width:440px; }
.au-form-wide{ max-width:680px; }

.au-logo{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin-bottom:20px;text-decoration:none;
}
.au-logo svg{ flex:0 0 auto; }
.au-logo b{
  font-family:var(--font-title);font-size:1.18rem;letter-spacing:.08em;
  color:var(--ps-purple-600);
}

.au-card{
  background:#fff;border:1px solid var(--ps-line);
  border-radius:var(--ps-radius-lg);
  padding:34px 32px 30px;
  box-shadow:0 18px 44px rgba(60,26,120,.12);
}
.au-h{
  display:flex;align-items:center;justify-content:center;gap:11px;
  font-family:var(--font-title);font-size:1.6rem;
  color:var(--ps-purple-600);margin:0 0 8px;
}
.au-h::before,.au-h::after{
  content:"✦";font-size:.72em;color:var(--ps-gold);line-height:1;
}
.au-lead{
  font-size:.86rem;line-height:1.6;color:var(--ps-text-mute);
  text-align:center;margin:0 0 4px;word-break:keep-all;
}
.au-orn{ display:flex;justify-content:center;margin:14px 0 22px; }
.au-orn svg{ max-width:300px;width:100%; }

/* ---------------- 입력 ---------------- */
.au-field{ margin-bottom:16px; }
.au-label{
  display:flex;align-items:baseline;gap:6px;
  font-size:.86rem;font-weight:700;color:var(--ps-text);margin-bottom:7px;
}
.au-opt{ font-size:.74rem;font-weight:600;color:var(--ps-text-mute); }

.au-input{
  position:relative;display:flex;align-items:center;
  border:1px solid var(--ps-line);border-radius:var(--ps-radius-input);
  background:#fff;transition:border-color .16s var(--ps-ease), box-shadow .16s var(--ps-ease);
}
.au-input:focus-within{
  border-color:var(--ps-purple-400);
  box-shadow:0 0 0 3px rgba(140,92,224,.16);
}
.au-input.is-bad{ border-color:var(--ps-danger); }
.au-input-ic{
  display:grid;place-items:center;width:44px;height:48px;
  color:var(--ps-purple-400);flex:0 0 auto;
}
.au-input input{
  flex:1 1 auto;min-width:0;height:48px;
  border:0;outline:0;background:transparent;
  font-family:inherit;font-size:.95rem;color:var(--ps-text);
  padding:0 14px 0 0;
}
.au-input input::placeholder{ color:#A9A2BD; }
.au-eye{
  display:grid;place-items:center;width:44px;height:48px;flex:0 0 auto;
  border:0;background:transparent;color:var(--ps-text-mute);cursor:pointer;
}
.au-eye:hover{ color:var(--ps-purple-500); }

.au-hint{ font-size:.76rem;line-height:1.5;color:var(--ps-text-mute);margin:6px 0 0; }
.au-err{
  display:block;min-height:1.1em;margin:6px 0 0;
  font-size:.78rem;line-height:1.5;color:var(--ps-danger);
}
.au-formerr{
  margin:0 0 14px;padding:11px 14px;border-radius:var(--ps-radius-sm);
  background:#FDF0EE;border:1px solid rgba(200,80,60,.3);
  font-size:.84rem;line-height:1.55;color:#A3402C;
}
.au-formerr:empty{ display:none; }

/* 체크박스 */
.au-check{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-size:.85rem;color:var(--ps-text-soft);
}
.au-check input{
  appearance:none;-webkit-appearance:none;
  width:18px;height:18px;flex:0 0 auto;margin:0;
  border:1.6px solid var(--ps-line);border-radius:5px;background:#fff;
  cursor:pointer;position:relative;transition:all .14s var(--ps-ease);
}
.au-check input:checked{ background:var(--ps-purple-500);border-color:var(--ps-purple-500); }
.au-check input:checked::after{
  content:"";position:absolute;left:5px;top:1.5px;
  width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;
  transform:rotate(42deg);
}
.au-check input:focus-visible{ box-shadow:0 0 0 3px rgba(140,92,224,.2); }

/* 로그인 상태 유지 + 비밀번호 찾기 */
.au-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin:4px 0 18px;
}
.au-link{
  background:0;border:0;padding:0;cursor:pointer;
  font-family:inherit;font-size:.84rem;font-weight:700;
  color:var(--ps-purple-500);text-decoration:none;
}
.au-link:hover{ text-decoration:underline; }

/* ---------------- 제출 버튼 (시안의 골드 테두리 딥퍼플) ---------------- */
.btn-royal{
  position:relative;display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:15px 20px;border-radius:var(--ps-radius-btn);
  border:1px solid rgba(232,200,119,.55);
  background:linear-gradient(135deg,#2C1052 0%,#4A1E8E 52%,#2A1050 100%);
  color:#fff;font-family:var(--font-title);font-size:1.02rem;font-weight:700;
  letter-spacing:.02em;cursor:pointer;
  box-shadow:0 10px 26px rgba(58,24,120,.32), inset 0 1px 0 rgba(255,255,255,.09);
  transition:transform .16s var(--ps-ease), box-shadow .16s var(--ps-ease), filter .16s var(--ps-ease);
}
.btn-royal::before,.btn-royal::after{
  content:"✦";position:absolute;top:7px;font-size:.66rem;color:var(--ps-gold-soft);opacity:.85;
}
.btn-royal::before{ left:11px; }
.btn-royal::after{ right:11px; }
.btn-royal:hover:not(:disabled){ filter:brightness(1.12);box-shadow:0 12px 30px rgba(58,24,120,.42); }
.btn-royal:active:not(:disabled){ transform:translateY(1px); }
.btn-royal:disabled{ opacity:.6;cursor:progress; }

/* ---------------- 또는 / 대체 링크 ---------------- */
.au-or{
  display:flex;align-items:center;gap:14px;
  margin:22px 0 16px;font-size:.8rem;color:var(--ps-text-mute);
}
.au-or::before,.au-or::after{ content:"";flex:1;height:1px;background:var(--ps-line); }

.au-alt{
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 18px;border-radius:var(--ps-radius-btn);
  border:1px solid var(--ps-line);background:#FBF9FF;
  font-size:.9rem;color:var(--ps-text-soft);text-decoration:none;
  transition:border-color .16s var(--ps-ease), background .16s var(--ps-ease);
}
.au-alt:hover{ border-color:var(--ps-purple-300);background:#F6F0FF; }
.au-alt b{ color:var(--ps-purple-600);font-weight:800; }
.au-alt svg{ color:var(--ps-purple-400);flex:0 0 auto; }

/* ---------------- 하단 안내 ---------------- */
.au-notice{
  display:flex;align-items:flex-start;gap:11px;
  margin-top:20px;padding:0 4px;
}
.au-notice-ic{
  display:grid;place-items:center;width:34px;height:34px;flex:0 0 auto;
  border-radius:10px;background:var(--ps-purple-100);color:var(--ps-purple-500);
}
.au-notice p{ margin:0;font-size:.78rem;line-height:1.65;color:var(--ps-text-mute);word-break:keep-all; }

/* ---------------- 약관 동의 ---------------- */
.au-terms{
  margin:20px 0 18px;border:1px solid var(--ps-line);
  border-radius:var(--ps-radius-sm);overflow:hidden;background:#FBF9FF;
}
.au-terms-h{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 15px;border-bottom:1px solid var(--ps-line);background:#fff;
}
.au-terms-h b{ font-size:.88rem;color:var(--ps-text); }
.au-terms-all{ font-size:.82rem;font-weight:700;color:var(--ps-purple-600); }
.au-terms-list{ list-style:none;margin:0;padding:5px 0; }
.au-terms-list li{
  display:flex;align-items:center;gap:10px;padding:9px 15px;
}
.au-terms-list .au-check{ flex:1 1 auto;font-size:.84rem;align-items:flex-start; }
.au-tag{
  font-size:.74rem;font-weight:800;flex:0 0 auto;
}
.au-tag-req{ color:var(--ps-purple-600); }
.au-tag-opt{ color:var(--ps-text-mute); }
.au-terms-view{
  display:inline-flex;align-items:center;gap:2px;flex:0 0 auto;
  font-size:.78rem;color:var(--ps-text-mute);text-decoration:none;
}
.au-terms-view:hover{ color:var(--ps-purple-500); }

/* ---------------- 프로필 등록 : 단계 표시 ---------------- */
.au-steps{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  list-style:none;padding:0;margin:0 0 26px;
}
.au-steps li{
  position:relative;display:grid;justify-items:center;gap:8px;
  font-size:.8rem;color:var(--ps-text-mute);text-align:center;
}
/* 연결선 — 원 사이만 잇습니다 */
.au-steps li::before{
  content:"";position:absolute;top:17px;left:calc(-50% + 22px);width:calc(100% - 44px);
  border-top:1.6px dashed var(--ps-line);
}
.au-steps li:first-child::before{ display:none; }
.au-step-n{
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:#fff;border:1.6px solid var(--ps-line);
  color:var(--ps-text-mute);font-weight:800;font-size:.86rem;
}
.au-steps li.is-done .au-step-n{
  background:#fff;border-color:var(--ps-purple-400);color:var(--ps-purple-500);
}
.au-steps li.is-now .au-step-n{
  background:var(--ps-purple-600);border-color:var(--ps-purple-600);color:#fff;
  box-shadow:0 0 0 4px rgba(140,92,224,.18);
}
.au-steps li.is-now{ color:var(--ps-purple-600);font-weight:700; }
.au-steps li.is-done{ color:var(--ps-text-soft); }

/* ---------------- 프로필 등록 : 항목 행 ---------------- */
.au-prow{
  display:grid;grid-template-columns:96px minmax(0,1fr);
  gap:10px 16px;align-items:start;margin-bottom:16px;
}
.au-prow > .au-label{ margin:0;padding-top:13px;justify-content:flex-start; }
.au-pbody{ min-width:0; }
.au-pline{ display:flex;flex-wrap:wrap;gap:8px;align-items:center; }
.au-pline > .au-sel{ flex:1 1 88px;min-width:0; }

.au-sel{
  position:relative;display:block;
}
.au-sel select{
  width:100%;height:48px;padding:0 34px 0 14px;
  border:1px solid var(--ps-line);border-radius:var(--ps-radius-input);
  background:#fff;color:var(--ps-text);
  font-family:inherit;font-size:.93rem;
  appearance:none;-webkit-appearance:none;cursor:pointer;
  transition:border-color .16s var(--ps-ease), box-shadow .16s var(--ps-ease);
}
.au-sel select:focus{
  outline:0;border-color:var(--ps-purple-400);box-shadow:0 0 0 3px rgba(140,92,224,.16);
}
.au-sel select:disabled{ background:#F4F2F8;color:#9A93AC;cursor:not-allowed; }
.au-sel::after{
  content:"";position:absolute;right:14px;top:50%;
  width:7px;height:7px;margin-top:-5px;
  border-right:1.6px solid var(--ps-text-mute);border-bottom:1.6px solid var(--ps-text-mute);
  transform:rotate(45deg);pointer-events:none;
}

/* 성별 · 양음력 선택 */
.au-seg{ display:flex;gap:8px;flex:0 0 auto; }
.au-seg label{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-width:86px;height:48px;padding:0 16px;
  border:1px solid var(--ps-line);border-radius:var(--ps-radius-input);
  background:#fff;color:var(--ps-text-soft);
  font-size:.9rem;cursor:pointer;
  transition:all .14s var(--ps-ease);
}
.au-seg input{
  appearance:none;-webkit-appearance:none;
  width:15px;height:15px;margin:0;flex:0 0 auto;
  border:1.6px solid var(--ps-line);border-radius:50%;background:#fff;
  position:relative;cursor:pointer;
}
.au-seg input:checked{ border-color:var(--ps-purple-500);border-width:4.5px; }
.au-seg label:has(input:checked){
  border-color:var(--ps-purple-400);background:#F6F0FF;
  color:var(--ps-purple-600);font-weight:700;
}
/* :has() 미지원 브라우저 대비 — JS 가 is-on 을 붙여 줍니다 */
.au-seg label.is-on{
  border-color:var(--ps-purple-400);background:#F6F0FF;
  color:var(--ps-purple-600);font-weight:700;
}
.au-seg-compact label{ min-width:54px;padding:0 10px;gap:5px;font-size:.86rem; }

.au-inline-check{ display:flex;align-items:center;flex:0 0 auto;padding-left:4px; }
.au-inline-check .au-check{ font-size:.82rem;white-space:nowrap; }

/* 나중에 입력할게요 */
.au-later{
  display:block;margin-top:12px;padding:15px 18px;text-align:center;
  border:1px solid var(--ps-line);border-radius:var(--ps-radius-btn);
  background:#FBF9FF;text-decoration:none;
  transition:border-color .16s var(--ps-ease), background .16s var(--ps-ease);
}
.au-later:hover{ border-color:var(--ps-purple-300);background:#F6F0FF; }
.au-later b{ display:block;font-size:.92rem;color:var(--ps-purple-600);margin-bottom:3px; }
.au-later span{ font-size:.78rem;color:var(--ps-text-mute);word-break:keep-all; }


/* =====================================================================
   21-C. 반응형
   ===================================================================== */

@media (max-width:1023px){
  .au-split{ grid-template-columns:1fr;min-height:0; }
  .au-brand{
    min-height:0;padding:40px 24px 74px;
  }
  .au-brand-orn svg{ max-width:220px; }
  .au-points{ margin-top:26px;gap:12px; }

  /* 폼 카드가 브랜드 배너 위로 올라옵니다 */
  .au-form{ padding:0 20px 44px;background:linear-gradient(180deg,#F7F3FE 0%,#F2ECFB 100%); }
  .au-form-in{ margin-top:-52px; }
  .au-logo{ display:none; }
}

@media (max-width:768px){
  .au-brand{ padding:34px 20px 70px; }
  .au-mark svg{ width:64px;height:64px; }
  .au-brand-name{ font-size:1.9rem; }
  .au-brand-tag{ font-size:.86rem; }
  .au-brand-h{ font-size:1.3rem; }
  .au-brand-p{ font-size:.85rem; }
  .au-brand-orn{ margin:12px 0 16px; }

  .au-card{ padding:26px 18px 24px;border-radius:var(--ps-radius); }
  .au-h{ font-size:1.4rem; }
  .au-orn{ margin:12px 0 18px; }
  .au-orn svg{ max-width:230px; }

  .au-input input,.au-sel select,.au-seg label{ height:46px; }
  /* iOS 확대 방지 — 16px 미만이면 포커스 시 화면이 확대됩니다 */
  .au-input input,.au-sel select{ font-size:16px; }

  .au-steps{ margin-bottom:20px; }
  .au-steps li{ font-size:.72rem; }
  .au-step-n{ width:30px;height:30px;font-size:.8rem; }
  .au-steps li::before{ top:15px;left:calc(-50% + 20px);width:calc(100% - 40px); }

  .au-prow{ grid-template-columns:1fr;gap:7px; }
  .au-prow > .au-label{ padding-top:0; }
  .au-points{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .au-points b{ font-size:.78rem; }
  .au-points span{ font-size:.68rem; }
}

@media (max-width:420px){
  .au-brand-name{ font-size:1.6rem; }
  .au-brand-h{ font-size:1.16rem; }
  .au-card{ padding:22px 15px 20px; }
  .au-h{ font-size:1.26rem; }

  /* 생년월일 3칸 · 시간 3칸이 한 줄에 들어가도록 */
  .au-pline{ gap:6px; }
  .au-pline > .au-sel{ flex:1 1 72px; }
  .au-sel select{ padding:0 30px 0 10px; }
  .au-sel::after{ right:10px; }
  .au-seg{ width:100%; }
  .au-seg label{ flex:1 1 0;min-width:0; }
  .au-inline-check{ width:100%;padding-top:2px; }

  .au-terms-list li{ padding:9px 12px;gap:7px; }
  .au-terms-list .au-check{ font-size:.79rem; }
  .au-terms-view{ font-size:.74rem; }

  .au-points{ grid-template-columns:1fr;gap:10px;max-width:260px; }
  .au-points li{
    grid-template-columns:auto 1fr;justify-items:start;text-align:left;
    align-items:center;gap:2px 10px;
  }
  .au-points li svg{ grid-row:1 / 3; }
}

@media (prefers-reduced-motion:reduce){
  .btn-royal,.au-alt,.au-later,.au-seg label,.au-input,.au-sel select{ transition:none; }
  .btn-royal:active:not(:disabled){ transform:none; }
}

/* =====================================================================
   22. 주문 · 결제 · 분석 · 리포트 완성  (PHASE 10)
   기준 : PS_07_01 ~ PS_07_04  PC / MOBILE
   ---------------------------------------------------------------------
   입력 요소(.au-input / .au-sel / .au-seg / .au-check / .btn-royal)는
   PHASE 9 에서 만든 것을 그대로 씁니다.
   ===================================================================== */

.or-page{
  min-height:100vh;
  background:
    radial-gradient(120% 80% at 78% 8%, rgba(120,64,210,.34) 0%, transparent 58%),
    linear-gradient(180deg, var(--ps-cosmic-950) 0%, var(--ps-cosmic-800) 46%, var(--ps-cosmic-900) 100%);
  padding:0 0 40px;
}
.or-sky{ position:absolute;inset:0;z-index:0;pointer-events:none; }
.or-sky svg{ width:100%;height:100%;display:block; }
.or-wrap{ position:relative;z-index:1;max-width:var(--ps-maxw);margin:0 auto;padding:0 24px; }

/* ---------------- 4단계 진행 표시 ---------------- */
.or-steps{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  list-style:none;margin:0;padding:26px 0 22px;
}
.or-steps li{
  position:relative;display:grid;justify-items:center;gap:9px;text-align:center;
  font-size:.84rem;color:var(--ps-text-on-dark-mute);
}
.or-steps li::before{
  content:"";position:absolute;top:22px;left:calc(-50% + 26px);width:calc(100% - 52px);
  border-top:1px dashed rgba(232,200,119,.36);
}
.or-steps li:first-child::before{ display:none; }
.or-step-ic{
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(232,200,119,.4);
  background:rgba(20,10,45,.7);color:rgba(232,200,119,.6);
}
.or-steps li.is-done .or-step-ic{ color:var(--ps-gold-soft);border-color:rgba(232,200,119,.7); }
.or-steps li.is-done{ color:var(--ps-text-on-dark-soft); }
.or-steps li.is-now .or-step-ic{
  background:var(--ps-grad-gold);color:#3A2205;border-color:var(--ps-gold-bright);
  box-shadow:0 0 0 5px rgba(232,200,119,.16), 0 0 26px rgba(232,200,119,.42);
}
.or-steps li.is-now{ color:var(--ps-gold-soft);font-weight:700; }
.or-lead{
  text-align:center;margin:0 0 22px;
  font-size:.92rem;color:var(--ps-text-on-dark-soft);word-break:keep-all;
}

/* ---------------- 본문 레이아웃 ---------------- */
.or-layout{
  display:grid;grid-template-columns:minmax(0,1fr) 366px;
  gap:20px;align-items:start;
}
.or-card{
  background:#fff;border:1px solid var(--ps-line);
  border-radius:var(--ps-radius-lg);padding:30px 30px 26px;
  box-shadow:0 18px 44px rgba(20,10,45,.3);
}

/* 번호가 붙은 섹션 */
.or-sec{ padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--ps-line); }
.or-sec:last-child{ padding-bottom:0;margin-bottom:0;border-bottom:0; }
.or-sec-h{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-title);font-size:1.08rem;color:var(--ps-purple-600);
  margin:0 0 16px;
}
.or-sec-n{
  display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:var(--ps-purple-600);color:#fff;
  font-size:.76rem;font-weight:800;flex:0 0 auto;
}

/* ---------------- 선택 상품 ---------------- */
.or-prod{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:16px;align-items:center;
  padding:16px;border-radius:var(--ps-radius-sm);
  background:#FBF9FF;border:1px solid var(--ps-line-soft);
}
.or-prod-art{
  display:grid;place-items:center;width:72px;height:72px;flex:0 0 auto;
  border-radius:var(--ps-radius-sm);overflow:hidden;
}
.or-prod-art img{ width:100%;height:100%;object-fit:contain;display:block; }
.or-prod-body h3{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-family:var(--font-title);font-size:1.04rem;color:var(--ps-text);margin:0 0 5px;
}
.or-prod-body p{ font-size:.84rem;line-height:1.55;color:var(--ps-text-mute);margin:0;word-break:keep-all; }
.or-prod-side{ text-align:right;white-space:nowrap; }
.or-prod-side .q{ display:block;font-size:.78rem;color:var(--ps-text-mute);margin-bottom:4px; }
.or-prod-side .p{ font-family:var(--font-title);font-size:1.18rem;font-weight:800;color:var(--ps-purple-600); }
.or-badge{
  padding:3px 9px;border-radius:999px;
  background:var(--ps-purple-100);color:var(--ps-purple-600);
  font-size:.7rem;font-weight:700;
}

/* ---------------- 입력 행 ---------------- */
.or-row{
  display:grid;grid-template-columns:84px minmax(0,1fr);
  gap:10px 14px;align-items:start;margin-bottom:12px;
}
.or-row:last-child{ margin-bottom:0; }
.or-row > .au-label{ margin:0;padding-top:13px; }
.or-row-2{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }
.or-hint{
  display:flex;align-items:flex-start;gap:6px;
  margin:8px 0 0;font-size:.78rem;line-height:1.5;color:var(--ps-text-mute);word-break:keep-all;
}
.or-hint svg{ flex:0 0 auto;margin-top:1px;color:var(--ps-purple-400); }

/* 본인 / 타인 탭 */
.or-tabs{
  display:inline-flex;gap:4px;padding:4px;border-radius:999px;
  background:#F2ECFB;border:1px solid var(--ps-line);
}
.or-tabs button{
  padding:8px 20px;border:0;border-radius:999px;background:transparent;
  font-family:inherit;font-size:.86rem;font-weight:700;color:var(--ps-text-mute);cursor:pointer;
  transition:background .16s var(--ps-ease), color .16s var(--ps-ease);
}
.or-tabs button.is-on{ background:#fff;color:var(--ps-purple-600);box-shadow:var(--ps-shadow-sm); }

/* ---------------- 결제수단 ---------------- */
.or-methods{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;
  list-style:none;padding:0;margin:0 0 12px;
}
.or-method{
  position:relative;display:grid;justify-items:center;gap:6px;
  padding:15px 10px;border-radius:var(--ps-radius-sm);
  border:1px solid var(--ps-line);background:#fff;
  font-size:.86rem;color:var(--ps-text-soft);cursor:pointer;
  transition:all .14s var(--ps-ease);
}
.or-method input{ position:absolute;opacity:0;pointer-events:none; }
.or-method svg{ color:var(--ps-purple-400); }
.or-method b{ font-weight:600; }
.or-method small{ font-size:.7rem;color:var(--ps-text-mute); }
.or-method.is-on{
  border-color:var(--ps-purple-400);background:#F6F0FF;
  color:var(--ps-purple-600);box-shadow:0 0 0 3px rgba(140,92,224,.13);
}
.or-method.is-on b{ font-weight:800; }
.or-method.is-off{ opacity:.5;cursor:not-allowed;background:#F7F6FA; }
.or-method.is-off small{ color:var(--ps-warn); }

/* 계좌 안내 */
.or-bank{
  margin-top:14px;padding:16px 18px;border-radius:var(--ps-radius-sm);
  background:#FBF9FF;border:1px solid var(--ps-line-soft);
}
.or-bank dl{ display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 14px;margin:0 0 12px; }
.or-bank dt{ font-size:.84rem;color:var(--ps-text-mute);white-space:nowrap; }
.or-bank dd{ margin:0;font-size:.9rem;font-weight:700;color:var(--ps-text);text-align:right;word-break:break-all; }
.or-copy{
  margin-left:8px;padding:3px 9px;border-radius:6px;
  border:1px solid var(--ps-line);background:#fff;
  font-family:inherit;font-size:.74rem;color:var(--ps-text-soft);cursor:pointer;
}
.or-copy:hover{ border-color:var(--ps-purple-300);color:var(--ps-purple-600); }

/* ---------------- 동의 ---------------- */
.or-agree{ list-style:none;margin:0;padding:0;display:grid;gap:10px; }
.or-agree li{ display:flex;align-items:flex-start;gap:10px; }
.or-agree .au-check{ flex:1 1 auto;align-items:flex-start;font-size:.86rem; }
.or-agree-all{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;margin-bottom:12px;border-radius:var(--ps-radius-sm);
  background:#F6F0FF;border:1px solid var(--ps-purple-200);
}
.or-agree-all .au-check{ font-weight:700;color:var(--ps-purple-600); }
.or-view{
  flex:0 0 auto;font-size:.78rem;color:var(--ps-text-mute);text-decoration:none;white-space:nowrap;
}
.or-view:hover{ color:var(--ps-purple-500); }

/* ---------------- 주문 요약 (우측 고정) ---------------- */
.or-side{ position:sticky;top:24px;display:grid;gap:14px; }
.or-sum{
  border-radius:var(--ps-radius-lg);overflow:hidden;
  border:1px solid rgba(232,200,119,.4);background:#fff;
  box-shadow:0 18px 44px rgba(20,10,45,.32);
}
.or-sum-h{
  padding:14px 20px;
  background:linear-gradient(120deg, var(--ps-cosmic-800), var(--ps-cosmic-700));
  color:var(--ps-gold-soft);font-size:.94rem;font-weight:700;
}
.or-sum-b{ padding:18px 20px 20px; }
.or-sum-prod{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;
  padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--ps-line);
}
.or-sum-prod img{ width:52px;height:52px;object-fit:contain; }
.or-sum-prod b{ font-size:.9rem;color:var(--ps-text);word-break:keep-all; }
.or-sum-prod span{ font-size:.86rem;font-weight:700;color:var(--ps-text);white-space:nowrap; }
.or-sum-row{
  display:flex;justify-content:space-between;gap:12px;
  padding:6px 0;font-size:.88rem;color:var(--ps-text-soft);
}
.or-sum-total{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:14px 0 4px;margin-top:8px;border-top:1px solid var(--ps-line);
}
.or-sum-total b{ font-size:1rem;color:var(--ps-text); }
.or-sum-total strong{
  font-family:var(--font-title);font-size:1.7rem;font-weight:800;color:var(--ps-purple-600);
}

.or-assure{
  margin:16px 0;padding:14px 16px;border-radius:var(--ps-radius-sm);
  background:#F6F0FF;border:1px solid var(--ps-purple-200);
}
.or-assure-h{
  display:flex;align-items:center;gap:7px;
  font-size:.86rem;font-weight:800;color:var(--ps-purple-600);margin-bottom:8px;
}
.or-assure ul{ list-style:none;margin:0;padding:0;display:grid;gap:6px; }
.or-assure li{
  position:relative;padding-left:18px;
  font-size:.79rem;line-height:1.5;color:var(--ps-text-soft);word-break:keep-all;
}
.or-assure li::before{
  content:"";position:absolute;left:2px;top:.4em;
  width:8px;height:5px;border-left:2px solid var(--ps-purple-500);border-bottom:2px solid var(--ps-purple-500);
  transform:rotate(-45deg);
}
.or-secure{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin:12px 0 0;font-size:.75rem;color:var(--ps-text-mute);text-align:center;word-break:keep-all;
}

/* 안내 사항 카드 */
.or-notice{
  border-radius:var(--ps-radius-lg);padding:18px 20px;
  background:rgba(255,255,255,.06);border:1px solid rgba(232,200,119,.24);
}
.or-notice h3{ font-size:.94rem;color:var(--ps-gold-soft);margin:0 0 10px; }
.or-notice ul{ list-style:none;margin:0 0 14px;padding:0;display:grid;gap:7px; }
.or-notice li{
  position:relative;padding-left:12px;
  font-size:.82rem;line-height:1.6;color:var(--ps-text-on-dark-soft);word-break:keep-all;
}
.or-notice li::before{
  content:"";position:absolute;left:0;top:.62em;width:4px;height:4px;border-radius:50%;
  background:var(--ps-gold-soft);
}

/* ---------------- 02 결제완료 ---------------- */
.oc-layout{ display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:26px; }
.oc-main{ text-align:center; }
.oc-mark{
  display:grid;place-items:center;width:88px;height:88px;margin:0 auto 18px;
  border-radius:50%;background:var(--ps-grad-royal, linear-gradient(135deg,#4A1E8E,#7B3FD4));
  color:var(--ps-gold-soft);
  box-shadow:0 0 0 8px rgba(140,92,224,.12), 0 12px 30px rgba(58,24,120,.3);
}
.oc-title{
  font-family:var(--font-title);font-size:clamp(1.5rem,2.6vw,2rem);
  color:var(--ps-text);margin:0 0 8px;word-break:keep-all;
}
.oc-sub{ font-size:1rem;color:var(--ps-purple-500);font-weight:700;margin:0 0 22px;word-break:keep-all; }
.oc-rows{ display:grid;gap:0;margin:0;text-align:left;border-top:1px solid var(--ps-line); }
.oc-row{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:12px;align-items:center;padding:14px 2px;border-bottom:1px solid var(--ps-line);
}
.oc-row svg{ color:var(--ps-purple-400); }
.oc-row b{ font-size:.88rem;font-weight:600;color:var(--ps-text-mute); }
.oc-row span{ font-size:.95rem;font-weight:700;color:var(--ps-text);text-align:right;word-break:break-all; }
.oc-row.is-amount span{ font-family:var(--font-title);font-size:1.24rem;color:var(--ps-purple-600); }
.oc-guide{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;
  margin-top:20px;padding:16px 18px;text-align:left;
  border-radius:var(--ps-radius-sm);background:#F6F0FF;border:1px solid var(--ps-purple-200);
}
.oc-guide svg{ color:var(--ps-purple-500);margin-top:2px; }
.oc-guide b{ display:block;font-size:.9rem;color:var(--ps-purple-600);margin-bottom:4px; }
.oc-guide p{ margin:0;font-size:.83rem;line-height:1.65;color:var(--ps-text-soft);word-break:keep-all; }

.oc-side{ display:grid;gap:16px;align-content:start; }
.oc-box{ padding:18px 20px;border-radius:var(--ps-radius);background:#FBF9FF;border:1px solid var(--ps-line); }
.oc-box h3{ font-size:.92rem;color:var(--ps-text);margin:0 0 12px; }
.oc-target{ display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center; }
.oc-avatar{
  display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:var(--ps-purple-100);color:var(--ps-purple-500);
}
.oc-target b{ display:flex;align-items:center;gap:7px;font-size:.95rem;color:var(--ps-text);margin-bottom:3px; }
.oc-target p{ margin:0;font-size:.8rem;line-height:1.55;color:var(--ps-text-mute); }
.oc-next{ list-style:none;margin:0;padding:0;display:grid;gap:14px; }
.oc-next li{ display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start; }
.oc-next-ic{
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;flex:0 0 auto;
  background:var(--ps-purple-100);color:var(--ps-purple-500);
}
.oc-next li.is-now .oc-next-ic{ background:var(--ps-purple-600);color:#fff; }
.oc-next b{ display:block;font-size:.88rem;color:var(--ps-text);margin-bottom:2px; }
.oc-next span{ font-size:.78rem;line-height:1.5;color:var(--ps-text-mute);word-break:keep-all; }
.oc-mypage{
  padding:18px 20px;border-radius:var(--ps-radius);
  background:linear-gradient(140deg, var(--ps-cosmic-800), var(--ps-cosmic-700));
  border:1px solid rgba(232,200,119,.3);
}
.oc-mypage b{ display:block;font-size:.98rem;color:var(--ps-gold-soft);margin-bottom:6px; }
.oc-mypage p{ margin:0 0 14px;font-size:.82rem;line-height:1.6;color:var(--ps-text-on-dark-soft);word-break:keep-all; }

/* ---------------- 03 분석중 ---------------- */
.an-layout{ display:grid;grid-template-columns:minmax(0,1fr) 430px;gap:26px;align-items:start; }
.an-head{ text-align:center;margin-bottom:22px; }
.an-head h1{
  font-family:var(--font-title);font-size:clamp(1.35rem,2.4vw,1.85rem);
  color:#fff;margin:0 0 8px;word-break:keep-all;
}
.an-head p{ font-size:.92rem;color:var(--ps-text-on-dark-soft);margin:0;word-break:keep-all; }
.an-art{ position:relative;display:grid;place-items:center;min-height:280px;margin-bottom:20px; }
.an-art svg{ width:100%;max-width:400px;height:auto; }
.an-art-glow{
  position:absolute;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle, rgba(232,200,119,.28) 0%, transparent 66%);
  filter:blur(16px);
}
.an-gauge{
  padding:18px 22px;border-radius:var(--ps-radius);
  background:rgba(255,255,255,.07);border:1px solid rgba(232,200,119,.28);
}
.an-gauge-h{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;margin-bottom:12px;
}
.an-gauge-h svg{ color:var(--ps-gold-soft); }
.an-gauge-h b{ font-size:.98rem;color:#fff; }
.an-pct{
  font-family:var(--font-title);font-size:1.7rem;font-weight:800;color:var(--ps-gold);
  display:grid;grid-auto-flow:column;place-content:center;align-items:baseline;gap:2px;
}
.an-pct em{ font-style:normal;font-size:.9rem; }
.an-bar{ height:9px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden; }
.an-bar span{
  display:block;height:100%;border-radius:999px;
  background:var(--ps-grad-gold);transition:width .5s var(--ps-ease);
}
.an-gauge-note{ margin:10px 0 0;font-size:.8rem;color:var(--ps-text-on-dark-mute);word-break:keep-all; }

.an-steps-box{
  padding:20px 22px;border-radius:var(--ps-radius-lg);
  background:rgba(255,255,255,.06);border:1px solid rgba(232,200,119,.24);
}
.an-steps-box h2{ font-size:1rem;color:var(--ps-gold-soft);margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid rgba(232,200,119,.2); }
.an-steps{ list-style:none;margin:0;padding:0;display:grid;gap:4px; }
.an-step{
  position:relative;display:grid;grid-template-columns:28px auto minmax(0,1fr) auto;
  gap:12px;align-items:center;padding:11px 12px;border-radius:var(--ps-radius-sm);
  border:1px solid transparent;
}
.an-step-n{
  display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  border:1px solid rgba(232,200,119,.34);
  font-size:.76rem;font-weight:800;color:rgba(232,200,119,.62);
}
.an-step-ic{
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(232,200,119,.24);color:rgba(255,255,255,.5);
}
.an-step b{ display:block;font-size:.92rem;color:var(--ps-text-on-dark-soft);margin-bottom:2px; }
.an-step span{ font-size:.76rem;line-height:1.45;color:var(--ps-text-on-dark-mute);word-break:keep-all; }
.an-step-mark{ width:22px;height:22px;display:grid;place-items:center;flex:0 0 auto; }
.an-step-mark svg{ color:var(--ps-gold); }
.an-step.is-done .an-step-n{ color:var(--ps-gold-soft);border-color:rgba(232,200,119,.6); }
.an-step.is-done b{ color:#fff; }
.an-step.is-now{
  background:rgba(232,200,119,.09);border-color:rgba(232,200,119,.5);
}
.an-step.is-now .an-step-n{ background:var(--ps-grad-gold);color:#3A2205;border-color:transparent; }
.an-step.is-now .an-step-ic{ color:var(--ps-gold-soft);border-color:rgba(232,200,119,.55); }
.an-step.is-now b{ color:#fff;font-weight:700; }
/* 진행 중 표시 — 점이 도는 대신 부드럽게 깜빡입니다 */
.an-dot{
  width:9px;height:9px;border-radius:50%;background:var(--ps-gold);
  animation:anPulse 1.4s var(--ps-ease) infinite;
}
@keyframes anPulse{ 0%,100%{opacity:.35;transform:scale(.8)} 50%{opacity:1;transform:scale(1.15)} }

.an-tips{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;
  list-style:none;margin:22px 0 0;padding:20px;
  border-radius:var(--ps-radius-lg);
  background:rgba(255,255,255,.05);border:1px solid rgba(232,200,119,.2);
}
.an-tips li{ display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start; }
.an-tips svg{ color:var(--ps-gold-soft);margin-top:2px; }
.an-tips b{ display:block;font-size:.88rem;color:#fff;margin-bottom:4px;line-height:1.45;word-break:keep-all; }
.an-tips span{ font-size:.76rem;line-height:1.55;color:var(--ps-text-on-dark-mute);word-break:keep-all; }
.an-foot{
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin:18px 0 0;font-size:.78rem;color:var(--ps-text-on-dark-mute);
}
.an-wait{
  margin-bottom:18px;padding:16px 20px;border-radius:var(--ps-radius);
  background:rgba(232,200,119,.1);border:1px solid rgba(232,200,119,.4);
}
.an-wait b{ display:block;font-size:.96rem;color:var(--ps-gold-soft);margin-bottom:5px; }
.an-wait p{ margin:0;font-size:.84rem;line-height:1.6;color:var(--ps-text-on-dark-soft);word-break:keep-all; }

/* ---------------- 04 리포트 확인 ---------------- */
.rd-layout{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:30px;align-items:center; }
.rd-art{ position:relative;display:grid;place-items:center;min-height:320px;text-align:center; }
.rd-art-svg{ position:relative;z-index:1;width:100%;max-width:380px; }
.rd-art-glow{
  position:absolute;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle, rgba(232,200,119,.3) 0%, transparent 66%);filter:blur(18px);
}
.rd-hero{ position:relative;z-index:2;margin-top:20px; }
.rd-hero h1{
  font-family:var(--font-title);font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.35;
  color:#fff;margin:0 0 8px;word-break:keep-all;
}
.rd-hero h1 em{
  font-style:normal;
  background:var(--ps-grad-gold);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--ps-gold);
}
.rd-hero p{ font-size:.9rem;color:var(--ps-text-on-dark-soft);margin:0;word-break:keep-all; }

.rd-head{ display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;margin-bottom:20px; }
.rd-head-ic{
  display:grid;place-items:center;width:64px;height:64px;border-radius:50%;
  background:var(--ps-purple-100);color:var(--ps-purple-600);
}
.rd-head h2{ font-family:var(--font-title);font-size:1.32rem;color:var(--ps-text);margin:0 0 4px;word-break:keep-all; }
.rd-head p{ margin:0;font-size:.88rem;color:var(--ps-text-mute);word-break:keep-all; }
.rd-badges{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
  list-style:none;margin:18px 0;padding:0;
}
.rd-badges li{
  display:grid;justify-items:center;gap:5px;text-align:center;
  padding:14px 10px;border-radius:var(--ps-radius-sm);
  background:#F6F0FF;border:1px solid var(--ps-purple-200);
}
.rd-badges svg{ color:var(--ps-purple-500); }
.rd-badges b{ font-size:.84rem;color:var(--ps-text);word-break:keep-all; }
.rd-badges span{ font-size:.74rem;line-height:1.45;color:var(--ps-text-mute);word-break:keep-all; }
.rd-note{
  display:flex;align-items:flex-start;gap:9px;
  margin-top:14px;padding:12px 15px;border-radius:var(--ps-radius-sm);
  background:#FBF9FF;border:1px solid var(--ps-line-soft);
  font-size:.8rem;line-height:1.6;color:var(--ps-text-mute);word-break:keep-all;
}
.rd-note svg{ flex:0 0 auto;margin-top:1px;color:var(--ps-purple-400); }
.rd-sub{
  display:block;margin-top:9px;padding:13px;text-align:center;
  border:1px solid var(--ps-line);border-radius:var(--ps-radius-btn);
  background:#fff;font-size:.88rem;color:var(--ps-text-soft);text-decoration:none;
}
.rd-sub:hover{ border-color:var(--ps-purple-300);color:var(--ps-purple-600); }

/* ---------------- 공통 하단 스트립 ---------------- */
.or-trust{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  list-style:none;margin:24px 0 0;padding:20px;
  border-radius:var(--ps-radius);
  background:rgba(255,255,255,.05);border:1px solid rgba(232,200,119,.2);
}
.or-trust li{
  display:grid;grid-template-columns:auto 1fr;grid-template-areas:"ic t" "ic d";
  gap:2px 12px;align-items:center;padding:4px 16px;
  border-left:1px solid rgba(232,200,119,.16);
}
.or-trust li:first-child{ border-left:0; }
.or-trust li > svg{ grid-area:ic;color:var(--ps-gold-soft); }
.or-trust li > b{ grid-area:t;font-size:.86rem;color:#fff;align-self:end; }
.or-trust li > span{ grid-area:d;font-size:.76rem;color:var(--ps-text-on-dark-mute);align-self:start;word-break:keep-all; }

.or-empty{
  max-width:460px;margin:60px auto;padding:34px 26px;text-align:center;
  background:#fff;border-radius:var(--ps-radius-lg);
}
.or-empty h2{ font-family:var(--font-title);font-size:1.2rem;color:var(--ps-text);margin:0 0 8px; }
.or-empty p{ font-size:.88rem;color:var(--ps-text-mute);margin:0 0 18px;word-break:keep-all; }


/* =====================================================================
   22-C. 반응형
   ===================================================================== */

@media (max-width:1240px){
  .or-layout{ grid-template-columns:minmax(0,1fr) 320px; }
  .an-layout{ grid-template-columns:minmax(0,1fr) 380px; }
}

@media (max-width:1023px){
  .or-layout,.oc-layout,.an-layout,.rd-layout{ grid-template-columns:1fr; }
  .or-side{ position:static; }
  .an-art{ min-height:220px; }
  .an-art svg{ max-width:300px; }
  .rd-art{ min-height:240px;order:-1; }
  .rd-art-svg{ max-width:280px; }
}

@media (max-width:900px){
  .or-trust{ grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 0; }
  .or-trust li:nth-child(3){ border-left:0; }
  .an-tips{ grid-template-columns:1fr;gap:14px; }
}

@media (max-width:768px){
  .or-wrap{ padding:0 16px; }
  .or-steps{ padding:18px 0 16px; }
  .or-steps li{ font-size:.7rem;gap:6px; }
  .or-step-ic{ width:36px;height:36px; }
  .or-step-ic svg{ width:18px;height:18px; }
  .or-steps li::before{ top:18px;left:calc(-50% + 22px);width:calc(100% - 44px); }
  .or-lead{ font-size:.84rem;margin-bottom:16px; }

  .or-card{ padding:20px 16px 18px;border-radius:var(--ps-radius); }
  .or-sec{ padding-bottom:18px;margin-bottom:18px; }
  .or-sec-h{ font-size:1rem; }

  .or-prod{ grid-template-columns:auto minmax(0,1fr);gap:12px;padding:13px; }
  .or-prod-art{ width:58px;height:58px; }
  .or-prod-side{ grid-column:1 / -1;text-align:left;display:flex;justify-content:space-between;
                 padding-top:10px;border-top:1px dashed var(--ps-line); }
  .or-prod-side .q{ display:inline;margin:0; }

  .or-row{ grid-template-columns:1fr;gap:6px; }
  .or-row > .au-label{ padding-top:0; }
  .or-row-2{ grid-template-columns:1fr; }
  .or-methods{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .or-bank dd{ font-size:.86rem; }

  .oc-mark{ width:70px;height:70px; }
  .oc-title{ font-size:1.32rem; }
  .oc-sub{ font-size:.9rem; }
  .oc-row{ grid-template-columns:auto minmax(0,1fr);gap:9px;padding:12px 2px; }
  .oc-row span{ grid-column:1 / -1;text-align:left;padding-left:32px; }
  .oc-row.is-amount span{ font-size:1.18rem; }

  .an-head h1{ font-size:1.24rem; }
  .an-steps-box{ padding:16px 14px; }
  .an-step{ grid-template-columns:24px minmax(0,1fr) auto;gap:9px;padding:10px; }
  .an-step-ic{ display:none; }
  .an-step b{ font-size:.86rem; }
  .an-step span{ font-size:.72rem; }
  .an-pct{ font-size:1.4rem; }

  .rd-badges{ grid-template-columns:1fr; }
  .rd-head{ grid-template-columns:1fr;justify-items:center;text-align:center;gap:12px; }

  .or-trust{ padding:16px 12px; }
  .or-trust li{ padding:6px 10px; }
}

@media (max-width:420px){
  .or-steps li{ font-size:.64rem; }
  .or-step-ic{ width:32px;height:32px; }
  .or-step-ic svg{ width:16px;height:16px; }
  .or-steps li::before{ top:16px;left:calc(-50% + 19px);width:calc(100% - 38px); }
  .or-methods{ grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
  .or-method{ padding:12px 8px;font-size:.8rem; }
  .or-method small{ font-size:.66rem; }
  .or-trust{ grid-template-columns:1fr;gap:12px; }
  .or-trust li{ border-left:0; }
  .or-sum-b{ padding:16px; }
  .or-sum-total strong{ font-size:1.45rem; }
}

@media (prefers-reduced-motion:reduce){
  .an-dot{ animation:none;opacity:.9; }
  .an-bar span{ transition:none; }
}

/* =====================================================================
   23. 리포트 뷰어  (PHASE 11)
   기준 : PS_08_01 표지 / 02 본문 / 03 목차 / 04 북마크 / 05 메모
   ---------------------------------------------------------------------
   25~50페이지를 PC 와 모바일에서 편하게 읽기 위한 구조입니다.
     PC     좌 목차 · 중앙 본문 · 우 도구  3단
     모바일 본문 1단 + 하단 바 + 서랍(목차 · 도구)
   ===================================================================== */

.rv-body{ background:var(--ps-cosmic-950); }
.rv{
  display:grid;grid-template-columns:246px minmax(0,1fr) 288px;
  min-height:100vh;
}

/* ---------------- 상단 바 ---------------- */
.rv-top{
  position:sticky;top:0;z-index:40;grid-column:1 / -1;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:16px;align-items:center;
  padding:10px 20px;
  background:linear-gradient(120deg, var(--ps-cosmic-950), var(--ps-cosmic-800));
  border-bottom:1px solid rgba(232,200,119,.24);
}
.rv-brand{ display:flex;align-items:center;gap:9px;text-decoration:none; }
.rv-brand b{
  font-family:var(--font-title);font-size:1rem;letter-spacing:.07em;color:var(--ps-gold-soft);
}
.rv-tabs{ display:flex;gap:4px;justify-content:center;flex-wrap:wrap; }
.rv-tab{
  padding:8px 15px;border-radius:999px;border:0;background:transparent;
  font-family:inherit;font-size:.88rem;font-weight:600;
  color:var(--ps-text-on-dark-mute);cursor:pointer;white-space:nowrap;
  transition:color .16s var(--ps-ease), background .16s var(--ps-ease);
}
.rv-tab:hover{ color:#fff; }
.rv-tab.is-on{ background:rgba(232,200,119,.14);color:var(--ps-gold-soft); }
.rv-top-act{ display:flex;gap:8px;align-items:center; }
.rv-iconbtn{
  display:grid;place-items:center;width:38px;height:38px;border-radius:10px;
  border:1px solid rgba(232,200,119,.3);background:transparent;
  color:var(--ps-gold-soft);cursor:pointer;
  transition:background .16s var(--ps-ease);
}
.rv-iconbtn:hover{ background:rgba(232,200,119,.12); }
.rv-iconbtn.is-on{ background:var(--ps-grad-gold);color:#3A2205;border-color:transparent; }

/* ---------------- 좌측 목차 ---------------- */
.rv-side{
  position:sticky;top:59px;align-self:start;max-height:calc(100vh - 59px);
  overflow-y:auto;padding:18px 14px 24px;
  background:linear-gradient(180deg, var(--ps-cosmic-900), var(--ps-cosmic-950));
  border-right:1px solid rgba(232,200,119,.16);
}
.rv-side h2{
  font-size:.9rem;color:var(--ps-gold-soft);margin:0 0 3px;
}
.rv-side-meta{ font-size:.75rem;color:var(--ps-text-on-dark-mute);margin:0 0 14px; }
.rv-toc{ list-style:none;margin:0;padding:0;display:grid;gap:5px; }
.rv-toc button{
  width:100%;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:10px;align-items:center;text-align:left;
  padding:10px 11px;border-radius:var(--ps-radius-sm);
  border:1px solid transparent;background:transparent;cursor:pointer;
  font-family:inherit;color:var(--ps-text-on-dark-soft);
  transition:background .16s var(--ps-ease), border-color .16s var(--ps-ease);
}
.rv-toc button:hover{ background:rgba(255,255,255,.06); }
.rv-toc .n{
  display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  border:1px solid rgba(232,200,119,.35);
  font-size:.74rem;font-weight:800;color:var(--ps-gold-soft);
}
.rv-toc .t{ font-size:.86rem;line-height:1.35;word-break:keep-all; }
.rv-toc .p{ display:block;font-size:.7rem;color:var(--ps-text-on-dark-mute);margin-top:2px; }
.rv-toc li.is-on button{
  background:rgba(232,200,119,.13);border-color:rgba(232,200,119,.45);
}
.rv-toc li.is-on .n{ background:var(--ps-grad-gold);color:#3A2205;border-color:transparent; }
.rv-toc li.is-on .t{ color:#fff;font-weight:700; }

.rv-side-card{
  margin-top:18px;padding:15px 14px;border-radius:var(--ps-radius);
  background:rgba(232,200,119,.08);border:1px solid rgba(232,200,119,.28);
  text-align:center;
}
.rv-side-card b{ display:block;font-size:.86rem;color:var(--ps-gold-soft);margin-bottom:5px; }
.rv-side-card p{ margin:0 0 10px;font-size:.74rem;line-height:1.6;color:var(--ps-text-on-dark-mute); }
.rv-side-card strong{ font-family:var(--font-title);font-size:1.3rem;color:var(--ps-gold); }

/* ---------------- 가운데 본문 ---------------- */
.rv-main{
  min-width:0;padding:0 0 78px;
  background:linear-gradient(180deg,#FBF9FF 0%,#F4EFFC 100%);
}
.rv-wrap{ max-width:920px;margin:0 auto;padding:22px 22px 0; }

/* 챕터 머리 */
.rv-chap{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:18px;align-items:center;
  padding:22px 26px;border-radius:var(--ps-radius-lg);
  background:
    radial-gradient(90% 140% at 18% 40%, rgba(120,64,210,.42) 0%, transparent 62%),
    linear-gradient(140deg, var(--ps-cosmic-950), var(--ps-cosmic-800));
  border:1px solid rgba(232,200,119,.24);
  margin-bottom:18px;
}
.rv-chap-n{
  display:grid;justify-items:center;gap:2px;
  padding:10px 16px;border-radius:var(--ps-radius);
  border:1px solid rgba(232,200,119,.4);
}
.rv-chap-n span{ font-size:.64rem;letter-spacing:.14em;color:var(--ps-gold-soft); }
.rv-chap-n b{ font-family:var(--font-title);font-size:1.8rem;color:var(--ps-gold); }
.rv-chap-t h1{
  font-family:var(--font-title);font-size:clamp(1.2rem,2vw,1.6rem);
  color:#fff;margin:0 0 5px;word-break:keep-all;
}
.rv-chap-t p{ margin:0;font-size:.85rem;color:var(--ps-text-on-dark-soft);word-break:keep-all; }
.rv-chap-meta{
  display:grid;gap:4px;font-size:.75rem;color:var(--ps-text-on-dark-mute);white-space:nowrap;
}
.rv-chap-meta b{ color:var(--ps-gold-soft);font-weight:600; }

/* 페이지 카드 */
.rv-page{
  background:#fff;border:1px solid var(--ps-line);
  border-radius:var(--ps-radius-lg);padding:28px 30px 26px;
  box-shadow:var(--ps-shadow-sm);
}
.rv-page-h{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:12px;align-items:start;
  padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid var(--ps-line);
}
.rv-page-n{
  display:grid;place-items:center;min-width:44px;height:26px;padding:0 9px;border-radius:999px;
  background:var(--ps-purple-100);color:var(--ps-purple-600);
  font-size:.74rem;font-weight:800;
}
.rv-page-h h2{
  font-family:var(--font-title);font-size:1.24rem;color:var(--ps-text);margin:0 0 4px;word-break:keep-all;
}
.rv-page-h p{ margin:0;font-size:.82rem;color:var(--ps-text-mute);word-break:keep-all; }
.rv-mark{
  display:grid;place-items:center;width:36px;height:36px;border-radius:10px;
  border:1px solid var(--ps-line);background:#fff;color:var(--ps-text-mute);cursor:pointer;
  transition:all .16s var(--ps-ease);
}
.rv-mark:hover{ border-color:var(--ps-purple-300);color:var(--ps-purple-500); }
.rv-mark.is-on{ background:var(--ps-grad-gold);border-color:transparent;color:#3A2205; }

/* 본문 블록 */
.rv-blocks{ display:grid;gap:18px; }
.rv-b-body p{
  font-size:.96rem;line-height:1.95;color:var(--ps-text-soft);
  margin:0 0 14px;word-break:keep-all;
}
.rv-b-body p:last-child{ margin-bottom:0; }
.rv-b-body p:first-child::first-letter{ font-weight:700;color:var(--ps-purple-600); }

.rv-b-title{
  display:flex;align-items:center;gap:8px;
  font-size:.94rem;font-weight:800;color:var(--ps-purple-600);margin:0 0 10px;
}
.rv-b-title::before{
  content:"";width:3px;height:15px;border-radius:2px;background:var(--ps-grad-gold);
}

.rv-note{
  padding:13px 16px;border-radius:var(--ps-radius-sm);
  background:#FBF9FF;border:1px solid var(--ps-line-soft);
  font-size:.85rem;line-height:1.7;color:var(--ps-text-mute);word-break:keep-all;
}
.rv-quote{
  padding:18px 22px;border-radius:var(--ps-radius-sm);
  background:linear-gradient(140deg, var(--ps-cosmic-900), var(--ps-cosmic-800));
  border:1px solid rgba(232,200,119,.28);
  font-family:var(--font-title);font-size:1.02rem;line-height:1.7;
  color:var(--ps-gold-soft);text-align:center;word-break:keep-all;
}
.rv-pending{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;
  padding:15px 17px;border-radius:var(--ps-radius-sm);
  background:#FFFBF0;border:1px dashed rgba(212,175,55,.55);
}
.rv-pending svg{ color:#B08A2E;margin-top:2px; }
.rv-pending b{ display:block;font-size:.88rem;color:#6B5312;margin-bottom:4px; }
.rv-pending p{ margin:0;font-size:.8rem;line-height:1.65;color:#7A6533;word-break:keep-all; }

.rv-kv{ display:grid;grid-template-columns:auto minmax(0,1fr);border-top:1px solid var(--ps-line); }
.rv-kv dt{
  padding:11px 16px 11px 0;font-size:.84rem;color:var(--ps-text-mute);
  border-bottom:1px solid var(--ps-line);white-space:nowrap;
}
.rv-kv dd{
  padding:11px 0;margin:0;font-size:.88rem;line-height:1.6;color:var(--ps-text);
  border-bottom:1px solid var(--ps-line);text-align:right;word-break:keep-all;
}
.rv-bars{ display:grid;gap:11px; }
.rv-bar b{ display:flex;justify-content:space-between;font-size:.84rem;color:var(--ps-text);font-weight:600;margin-bottom:5px; }
.rv-bar-t{ height:9px;border-radius:999px;background:#EFEAF8;overflow:hidden; }
.rv-bar-t span{ display:block;height:100%;border-radius:999px;background:var(--ps-grad-royal, linear-gradient(90deg,#7B3FD4,#B38BF0)); }
.rv-bar small{ display:block;font-size:.76rem;color:var(--ps-text-mute);margin-top:4px; }

.rv-cards{ display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:11px; }
.rv-card{
  padding:15px 17px;border-radius:var(--ps-radius-sm);
  background:#FBF9FF;border:1px solid var(--ps-line-soft);
}
.rv-card b{ display:block;font-size:.88rem;color:var(--ps-purple-600);margin-bottom:5px; }
.rv-card p{ margin:0;font-size:.84rem;line-height:1.65;color:var(--ps-text-soft);word-break:keep-all; }

.rv-chips{ display:flex;flex-wrap:wrap;gap:7px; }
.rv-chip{
  padding:6px 13px;border-radius:999px;
  background:var(--ps-purple-100);color:var(--ps-purple-600);
  font-size:.82rem;font-weight:600;
}
.rv-check{ list-style:none;margin:0;padding:0;display:grid;gap:9px; }
.rv-check li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;
  font-size:.88rem;line-height:1.65;color:var(--ps-text-soft);word-break:keep-all;
}
.rv-check li::before{
  content:"";width:17px;height:17px;border-radius:5px;margin-top:2px;
  background:var(--ps-purple-100);
  box-shadow:inset 0 0 0 1px var(--ps-purple-300);
}
.rv-steps{ display:grid;gap:10px; }
.rv-step{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:13px;align-items:start;
  padding:13px 15px;border-radius:var(--ps-radius-sm);
  background:#FBF9FF;border:1px solid var(--ps-line-soft);
}
.rv-step-n{
  display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--ps-purple-500);color:#fff;font-size:.76rem;font-weight:800;
}
.rv-step b{ display:block;font-size:.88rem;color:var(--ps-text);margin-bottom:3px; }
.rv-step span{ font-size:.83rem;line-height:1.6;color:var(--ps-text-mute);word-break:keep-all; }

.rv-summary{
  padding:22px 24px;border-radius:var(--ps-radius);
  background:linear-gradient(150deg, var(--ps-cosmic-900), var(--ps-cosmic-800));
  border:1px solid rgba(232,200,119,.34);
}
.rv-summary h3{
  font-family:var(--font-title);font-size:1.1rem;color:var(--ps-gold-soft);
  margin:0 0 14px;text-align:center;
}
.rv-summary ul{ list-style:none;margin:0;padding:0;display:grid;gap:9px; }
.rv-summary li{
  position:relative;padding-left:16px;
  font-size:.9rem;line-height:1.7;color:var(--ps-text-on-dark-soft);word-break:keep-all;
}
.rv-summary li::before{
  content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;
  background:var(--ps-gold-soft);
}

/* 원국표 · 오행 · 십성 · 대운 */
.rv-pillars{ width:100%;border-collapse:separate;border-spacing:6px; }
.rv-pillars th{
  padding:7px;font-size:.76rem;color:var(--ps-text-mute);font-weight:600;
}
.rv-pillars td{
  padding:11px 6px;text-align:center;border-radius:var(--ps-radius-sm);
  background:#FBF9FF;border:1px solid var(--ps-line-soft);
}
.rv-gz{
  display:grid;place-items:center;width:38px;height:38px;margin:0 auto 4px;
  border-radius:10px;color:#fff;font-family:var(--font-hanja, serif);font-size:1.2rem;
}
.rv-gz-ko{ display:block;font-size:.72rem;color:var(--ps-text-mute); }
.rv-hid{ display:block;margin-top:5px;font-size:.7rem;color:var(--ps-text-mute);letter-spacing:.04em; }
.rv-el{ display:grid;gap:9px; }
.rv-el-row{ display:grid;grid-template-columns:34px minmax(0,1fr) 52px;gap:10px;align-items:center; }
.rv-el-badge{
  display:grid;place-items:center;width:30px;height:30px;border-radius:9px;
  color:#fff;font-size:.84rem;font-weight:700;
}
.rv-el-t{ height:9px;border-radius:999px;background:#EFEAF8;overflow:hidden; }
.rv-el-t span{ display:block;height:100%;border-radius:999px; }
.rv-el-v{ font-size:.82rem;color:var(--ps-text);text-align:right;font-weight:600; }
.rv-daeun{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px; }
.rv-du{
  padding:12px 8px;text-align:center;border-radius:var(--ps-radius-sm);
  background:#FBF9FF;border:1px solid var(--ps-line-soft);
}
.rv-du b{ display:block;font-family:var(--font-hanja, serif);font-size:1.02rem;color:var(--ps-text); }
.rv-du span{ display:block;font-size:.74rem;color:var(--ps-text-mute);margin-top:3px; }
.rv-du-age{
  display:block;margin-top:4px;font-style:normal;
  font-size:.7rem;color:var(--ps-text-mute);letter-spacing:-.01em;
}
.rv-du-age u{ display:block;text-decoration:none;font-size:.66rem;opacity:.8;margin-top:1px; }
.rv-du em{
  display:inline-block;margin-top:6px;padding:2px 8px;border-radius:999px;
  background:var(--ps-purple-100);color:var(--ps-purple-600);
  font-style:normal;font-size:.7rem;font-weight:700;
}

/* ---------------- 우측 도구 ---------------- */
.rv-tools{
  position:sticky;top:59px;align-self:start;max-height:calc(100vh - 59px);
  overflow-y:auto;padding:18px 14px 24px;display:grid;gap:14px;align-content:start;
  background:linear-gradient(180deg,#F7F3FE,#F1EAFB);
  border-left:1px solid var(--ps-line);
}
.rv-tool{
  padding:15px;border-radius:var(--ps-radius);
  background:#fff;border:1px solid var(--ps-line);
}
.rv-tool h3{ font-size:.85rem;color:var(--ps-text);margin:0 0 10px; }
.rv-jump{ display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:9px;align-items:center; }
.rv-jump button{
  display:grid;place-items:center;width:34px;height:34px;border-radius:9px;
  border:1px solid var(--ps-line);background:#fff;color:var(--ps-text-soft);cursor:pointer;
}
.rv-jump button:hover:not(:disabled){ border-color:var(--ps-purple-300);color:var(--ps-purple-600); }
.rv-jump button:disabled{ opacity:.35;cursor:not-allowed; }
.rv-jump-now{ text-align:center; }
.rv-jump-now b{ font-family:var(--font-title);font-size:1.3rem;color:var(--ps-purple-600); }
.rv-jump-now span{ display:block;font-size:.74rem;color:var(--ps-text-mute); }
.rv-secs{ list-style:none;margin:0;padding:0;display:grid;gap:6px; }
.rv-secs li{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;
  font-size:.79rem;color:var(--ps-text-soft);cursor:pointer;
}
.rv-secs .n{
  display:grid;place-items:center;width:19px;height:19px;border-radius:50%;
  background:var(--ps-purple-100);color:var(--ps-purple-600);font-size:.66rem;font-weight:800;
}
.rv-secs li.is-on .n{ background:var(--ps-purple-600);color:#fff; }
.rv-secs li.is-on{ color:var(--ps-purple-600);font-weight:700; }
.rv-secs .t{ overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }

/* ---------------- 하단 바 ---------------- */
.rv-foot{
  position:fixed;left:246px;right:288px;bottom:0;z-index:35;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:12px;align-items:center;
  padding:11px 22px;
  background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
  border-top:1px solid var(--ps-line);
}
.rv-foot button{
  display:flex;align-items:center;gap:7px;
  padding:9px 16px;border-radius:var(--ps-radius-btn);
  border:1px solid var(--ps-line);background:#fff;
  font-family:inherit;font-size:.86rem;color:var(--ps-text-soft);cursor:pointer;
}
.rv-foot button:hover:not(:disabled){ border-color:var(--ps-purple-300);color:var(--ps-purple-600); }
.rv-foot button:disabled{ opacity:.35;cursor:not-allowed; }
.rv-foot-now{ text-align:center;font-size:.86rem;color:var(--ps-text-mute); }
.rv-foot-now b{ font-family:var(--font-title);font-size:1.06rem;color:var(--ps-purple-600); }
.rv-prog{
  position:absolute;left:0;top:-2px;height:2px;background:var(--ps-grad-gold);
  transition:width .3s var(--ps-ease);
}

/* ---------------- 표지 ---------------- */
.rv-cover{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:0;min-height:calc(100vh - 59px);
}
.rv-cover-art{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:44px 34px;text-align:center;
  background:
    radial-gradient(100% 90% at 50% 42%, rgba(140,80,230,.42) 0%, transparent 62%),
    linear-gradient(180deg, var(--ps-cosmic-950), var(--ps-cosmic-800) 60%, var(--ps-cosmic-900));
  border-right:1px solid rgba(232,200,119,.2);
}
.rv-cover-sky{ position:absolute;inset:0;pointer-events:none; }
.rv-cover-sky svg{ width:100%;height:100%; }
.rv-cover-in{ position:relative;z-index:2;max-width:420px; }
.rv-cover-brand{
  font-size:.82rem;letter-spacing:.2em;color:var(--ps-gold-soft);margin:0 0 12px;
}
.rv-cover-in h1{
  font-family:var(--font-title);font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.3;
  color:#fff;margin:0 0 10px;word-break:keep-all;
}
.rv-cover-in h1 em{
  display:block;font-style:normal;
  background:var(--ps-grad-gold);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--ps-gold);
}
.rv-cover-in > p{ font-size:.92rem;color:var(--ps-text-on-dark-soft);margin:0 0 24px; }
.rv-cover-wheel{ margin:0 auto 24px;max-width:280px; }
.rv-cover-meta{
  padding:16px 20px;border-radius:var(--ps-radius);
  background:rgba(20,10,45,.6);border:1px solid rgba(232,200,119,.34);
  display:grid;gap:9px;
}
.rv-cover-meta div{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;
  font-size:.85rem;color:var(--ps-text-on-dark-soft);
}
.rv-cover-meta svg{ color:var(--ps-gold-soft); }
.rv-cover-meta b{ text-align:right;color:#fff; }
.rv-cover-badge{
  margin-top:14px;padding:11px;border-radius:var(--ps-radius-sm);
  background:var(--ps-grad-gold);color:#3A2205;
  font-family:var(--font-title);font-weight:800;letter-spacing:.06em;
}
.rv-cover-q{ margin:20px 0 0;font-size:.85rem;color:var(--ps-text-on-dark-mute);word-break:keep-all; }

.rv-cover-toc{
  padding:34px 30px;overflow-y:auto;
  background:linear-gradient(180deg,#FBF9FF,#F4EFFC);
}
.rv-cover-toc h2{
  display:flex;align-items:center;justify-content:center;gap:11px;
  font-family:var(--font-title);font-size:1.6rem;color:var(--ps-purple-600);margin:0 0 6px;
}
.rv-cover-toc h2::before,.rv-cover-toc h2::after{ content:"✦";font-size:.66em;color:var(--ps-gold); }
.rv-cover-toc > p{ text-align:center;font-size:.86rem;color:var(--ps-text-mute);margin:0 0 22px; }
.rv-toclist{ list-style:none;margin:0;padding:0;display:grid;gap:9px; }
.rv-toclist button{
  width:100%;display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;
  gap:14px;align-items:center;text-align:left;
  padding:14px 17px;border-radius:var(--ps-radius);
  border:1px solid var(--ps-line);background:#fff;cursor:pointer;
  font-family:inherit;
  transition:border-color .16s var(--ps-ease), transform .16s var(--ps-ease);
}
.rv-toclist button:hover{ border-color:var(--ps-purple-300);transform:translateX(3px); }
.rv-toclist .ic{
  display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:var(--ps-purple-100);color:var(--ps-purple-600);
}
.rv-toclist .n{ font-family:var(--font-title);font-size:1.06rem;font-weight:800;color:var(--ps-purple-600); }
.rv-toclist .t b{ display:block;font-size:.98rem;color:var(--ps-text);margin-bottom:3px;word-break:keep-all; }
.rv-toclist .t span{ font-size:.79rem;color:var(--ps-text-mute);word-break:keep-all; }
.rv-toclist .p{ font-size:.82rem;color:var(--ps-purple-500);font-weight:700;white-space:nowrap; }
.rv-toc-total{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:16px;padding:16px 20px;border-radius:var(--ps-radius);
  background:#F6F0FF;border:1px solid var(--ps-purple-200);
}
.rv-toc-total b{ display:block;font-size:.92rem;color:var(--ps-purple-600);margin-bottom:3px; }
.rv-toc-total p{ margin:0;font-size:.8rem;color:var(--ps-text-mute);word-break:keep-all; }
.rv-toc-total strong{ font-family:var(--font-title);font-size:1.5rem;color:var(--ps-purple-600);white-space:nowrap; }

/* ---------------- 북마크 · 메모 ---------------- */
.rv-panel{ max-width:920px;margin:0 auto;padding:22px 22px 0; }
.rv-panel-h{
  position:relative;overflow:hidden;
  padding:24px 26px;border-radius:var(--ps-radius-lg);margin-bottom:18px;
  background:
    radial-gradient(90% 140% at 82% 40%, rgba(120,64,210,.4) 0%, transparent 62%),
    linear-gradient(140deg, var(--ps-cosmic-950), var(--ps-cosmic-800));
  border:1px solid rgba(232,200,119,.24);
}
.rv-panel-h h1{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-title);font-size:1.5rem;color:#fff;margin:0 0 7px;
}
.rv-panel-h h1 svg{ color:var(--ps-gold-soft); }
.rv-panel-h p{ margin:0;font-size:.88rem;color:var(--ps-text-on-dark-soft);word-break:keep-all; }

.rv-list{ display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px; }
.rv-item{
  padding:17px 19px;border-radius:var(--ps-radius);
  background:#fff;border:1px solid var(--ps-line);
}
.rv-item-h{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-size:.76rem;color:var(--ps-text-mute);margin-bottom:8px;
}
.rv-item-h b{ color:var(--ps-purple-600);font-weight:700; }
.rv-item h3{
  font-family:var(--font-title);font-size:1.02rem;color:var(--ps-text);margin:0 0 7px;word-break:keep-all;
}
.rv-item p{ margin:0 0 13px;font-size:.86rem;line-height:1.7;color:var(--ps-text-soft);word-break:keep-all; }
.rv-item-act{ display:flex;gap:8px;flex-wrap:wrap; }
.rv-item-act button, .rv-item-act a{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 13px;border-radius:var(--ps-radius-sm);
  border:1px solid var(--ps-line);background:#FBF9FF;
  font-family:inherit;font-size:.8rem;color:var(--ps-purple-600);cursor:pointer;text-decoration:none;
}
.rv-item-act button:hover{ border-color:var(--ps-purple-300); }
.rv-item-act .del{ color:var(--ps-danger); }
.rv-empty{
  padding:44px 24px;text-align:center;
  background:#fff;border:1px dashed var(--ps-line);border-radius:var(--ps-radius);
}
.rv-empty p{ margin:0;font-size:.9rem;color:var(--ps-text-mute); }

.rv-memo-form{
  padding:20px 22px;border-radius:var(--ps-radius);
  background:#fff;border:1px solid var(--ps-line);margin-bottom:16px;
}
.rv-memo-form h3{ font-size:.94rem;color:var(--ps-purple-600);margin:0 0 14px; }
.rv-memo-row{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:12px;margin-bottom:12px; }
.rv-memo-form textarea{
  width:100%;min-height:110px;padding:13px 15px;
  border:1px solid var(--ps-line);border-radius:var(--ps-radius-input);
  font-family:inherit;font-size:.92rem;line-height:1.7;color:var(--ps-text);resize:vertical;
}
.rv-memo-form textarea:focus{
  outline:0;border-color:var(--ps-purple-400);box-shadow:0 0 0 3px rgba(140,92,224,.16);
}
.rv-memo-foot{ display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:11px; }
.rv-memo-count{ font-size:.78rem;color:var(--ps-text-mute); }

/* ---------------- 모바일 서랍 ---------------- */
.rv-drawer-btn{ display:none; }
.rv-scrim{
  position:fixed;inset:0;z-index:44;background:rgba(8,5,24,.6);
  opacity:0;pointer-events:none;transition:opacity .2s var(--ps-ease);
}
.rv-scrim.is-on{ opacity:1;pointer-events:auto; }

@media print{
  .rv-top,.rv-side,.rv-tools,.rv-foot,.rv-mark{ display:none !important; }
  .rv{ display:block; }
  .rv-main{ background:#fff; }
  .rv-page{ box-shadow:none;page-break-inside:avoid; }
}


/* =====================================================================
   23-C. 반응형
   ===================================================================== */

@media (max-width:1280px){
  .rv{ grid-template-columns:220px minmax(0,1fr) 260px; }
  .rv-foot{ left:220px;right:260px; }
}

@media (max-width:1080px){
  .rv{ grid-template-columns:214px minmax(0,1fr); }
  .rv-tools{ display:none; }
  .rv-foot{ left:214px;right:0; }
  .rv-cover{ grid-template-columns:1fr; }
  .rv-cover-art{ border-right:0;border-bottom:1px solid rgba(232,200,119,.2);min-height:0;padding:34px 24px; }
}

@media (max-width:768px){
  .rv{ grid-template-columns:1fr; }
  .rv-side{
    position:fixed;left:0;top:0;bottom:0;z-index:45;width:min(84vw,300px);max-height:none;
    transform:translateX(-100%);transition:transform .22s var(--ps-ease);
  }
  .rv-side.is-open{ transform:none; }
  .rv-drawer-btn{ display:grid; }
  .rv-top{ grid-template-columns:auto minmax(0,1fr) auto;padding:9px 12px;gap:8px; }
  .rv-brand b{ font-size:.9rem; }
  .rv-brand .ps-ico{ display:none; }
  /* 탭이 여러 줄로 접히면 헤더가 너무 높아집니다. 가로로 넘기게 합니다. */
  .rv-tabs{ gap:2px;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
            -webkit-overflow-scrolling:touch;scrollbar-width:none; }
  .rv-tabs::-webkit-scrollbar{ display:none; }
  .rv-tab{ padding:7px 10px;font-size:.78rem;flex:0 0 auto; }
  .rv-foot{ left:0;right:0;padding:9px 12px; }
  .rv-foot button{ padding:8px 12px;font-size:.8rem; }

  .rv-wrap,.rv-panel{ padding:14px 12px 0; }
  .rv-main{ padding-bottom:76px; }
  .rv-chap{ grid-template-columns:auto minmax(0,1fr);gap:12px;padding:16px 16px; }
  .rv-chap-meta{ grid-column:1 / -1;grid-auto-flow:column;justify-content:start;gap:12px;
                 padding-top:10px;border-top:1px solid rgba(232,200,119,.2); }
  .rv-chap-n{ padding:7px 12px; }
  .rv-chap-n b{ font-size:1.4rem; }
  .rv-page{ padding:20px 16px 18px;border-radius:var(--ps-radius); }
  .rv-page-h h2{ font-size:1.08rem; }
  .rv-b-body p{ font-size:.94rem;line-height:1.9; }

  .rv-kv{ grid-template-columns:1fr; }
  .rv-kv dt{ padding:10px 0 2px;border-bottom:0;font-size:.79rem; }
  .rv-kv dd{ padding:0 0 10px;text-align:left; }
  .rv-daeun{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rv-cards{ grid-template-columns:1fr; }
  .rv-list{ grid-template-columns:1fr; }
  .rv-memo-row{ grid-template-columns:1fr; }
  .rv-cover-toc{ padding:24px 16px; }
  .rv-toclist button{ grid-template-columns:auto minmax(0,1fr) auto;gap:11px;padding:13px 14px; }
  .rv-toclist .ic{ display:none; }
  .rv-pillars{ border-spacing:4px; }
  .rv-pillars th{ font-size:.7rem;padding:4px 2px; }
  .rv-pillars td{ padding:8px 3px; }
  .rv-gz{ width:32px;height:32px;font-size:1rem; }
}

@media (max-width:420px){
  .rv-tab{ padding:6px 8px;font-size:.74rem; }
  .rv-daeun{ grid-template-columns:repeat(2,minmax(0,1fr));gap:7px; }
  .rv-foot-now{ font-size:.78rem; }
  .rv-chap-t h1{ font-size:1.06rem; }
}

@media (prefers-reduced-motion:reduce){
  .rv-side,.rv-scrim,.rv-toclist button,.rv-prog{ transition:none; }
  .rv-toclist button:hover{ transform:none; }
}

/* ---------------------------------------------------------------------
   준비 중 상품 (PHASE 11)
   PHASE 15 에서 계산이 연결·검증되면 data.js 의 comingSoon 만 지우면 됩니다.
   --------------------------------------------------------------------- */
.pl-ribbon.pl-soon{
  background:rgba(255,255,255,.9);color:var(--ps-text-mute);
  border:1px solid var(--ps-line);
}
.pl-card.is-soon{ opacity:.86; }
.pl-card.is-soon .pl-price{ color:var(--ps-text-mute);text-decoration:line-through; }
.pl-card.is-soon:hover{ transform:none; }

.pd-soon{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;
  padding:16px 18px;margin-bottom:10px;border-radius:var(--ps-radius-sm);
  background:#FFFBF0;border:1px dashed rgba(212,175,55,.55);
}
.pd-soon svg{ color:#B08A2E;margin-top:2px; }
.pd-soon b{ display:block;font-size:.92rem;color:#6B5312;margin-bottom:4px; }
.pd-soon p{ margin:0;font-size:.83rem;line-height:1.65;color:#7A6533;word-break:keep-all; }

/* =====================================================================
   24. MY PURPLE  (PHASE 12)
   기준 : PS_09_01 대시보드 / 02 보유 리포트 / 03 분석 진행중
          04 결제 내역 / 05 회원 정보   PC · MOBILE
   ---------------------------------------------------------------------
   좌측 고정 메뉴 + 우측 본문. 모바일에서는 메뉴가 서랍이 됩니다.
   ===================================================================== */

.mp-body-page{ background:var(--ps-cosmic-950); }
.mp{ display:grid;grid-template-columns:224px minmax(0,1fr);min-height:100vh; }

.mp-loading{
  display:grid;place-items:center;gap:10px;min-height:100vh;
  color:var(--ps-text-on-dark-mute);
}
.mp-loading svg{ color:var(--ps-gold-soft); }

/* ---------------- 좌측 메뉴 ---------------- */
.mp-side{
  position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto;
  padding:20px 14px;
  background:linear-gradient(180deg, var(--ps-cosmic-950), var(--ps-cosmic-900));
  border-right:1px solid rgba(232,200,119,.16);
  display:flex;flex-direction:column;gap:16px;
}
.mp-brand{ display:flex;align-items:center;gap:9px;text-decoration:none;padding:4px 6px 10px; }
.mp-brand b{
  font-family:var(--font-title);font-size:1rem;letter-spacing:.06em;color:var(--ps-gold-soft);
}
.mp-brand svg{ color:var(--ps-gold); }
.mp-nav{ display:grid;gap:4px; }
.mp-nav-i{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:11px;align-items:center;
  padding:10px 11px;border-radius:var(--ps-radius-sm);
  border:1px solid transparent;text-decoration:none;
  color:var(--ps-text-on-dark-soft);
  transition:background .16s var(--ps-ease), border-color .16s var(--ps-ease);
}
.mp-nav-i:hover{ background:rgba(255,255,255,.06); }
.mp-nav-i .ic{
  display:grid;place-items:center;width:30px;height:30px;border-radius:9px;
  background:rgba(255,255,255,.06);color:var(--ps-gold-soft);
}
.mp-nav-i .t b{ display:block;font-size:.88rem;line-height:1.3; }
.mp-nav-i .t span{ font-size:.72rem;color:var(--ps-text-on-dark-mute); }
.mp-nav-i .n{
  display:grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;
  background:var(--ps-grad-gold);color:#3A2205;font-size:.7rem;font-weight:800;
}
.mp-nav-i.is-on{
  background:rgba(232,200,119,.13);border-color:rgba(232,200,119,.45);
}
.mp-nav-i.is-on .ic{ background:var(--ps-grad-gold);color:#3A2205; }
.mp-nav-i.is-on .t b{ color:#fff;font-weight:700; }

.mp-side-card{
  margin-top:auto;padding:16px 14px;border-radius:var(--ps-radius);
  background:rgba(232,200,119,.08);border:1px solid rgba(232,200,119,.3);
  text-align:center;
}
.mp-side-card b{ display:block;font-size:.86rem;color:var(--ps-gold-soft);margin-bottom:6px; }
.mp-side-card p{ margin:0 0 12px;font-size:.75rem;line-height:1.6;color:var(--ps-text-on-dark-mute); }

/* ---------------- 본문 ---------------- */
.mp-main{ min-width:0;background:linear-gradient(180deg,#FBF9FF 0%,#F4EFFC 100%); }

.mp-top{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:26px 28px;
  background:
    radial-gradient(90% 160% at 72% 30%, rgba(120,64,210,.45) 0%, transparent 62%),
    linear-gradient(140deg, var(--ps-cosmic-950), var(--ps-cosmic-800));
  border-bottom:1px solid rgba(232,200,119,.2);
}
.mp-top-sky{ position:absolute;inset:0;pointer-events:none; }
.mp-top-sky svg{ width:100%;height:100%; }
.mp-top-in{ position:relative;z-index:1;min-width:0; }
.mp-top-in h1{
  font-family:var(--font-title);font-size:clamp(1.3rem,2.2vw,1.8rem);
  color:#fff;margin:0 0 5px;word-break:keep-all;
}
.mp-top-in h1 em{
  font-style:normal;
  background:var(--ps-grad-gold);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--ps-gold);
}
.mp-top-in p{ margin:0;font-size:.88rem;color:var(--ps-text-on-dark-soft);word-break:keep-all; }
.mp-drawer{
  display:none;place-items:center;width:38px;height:38px;border-radius:10px;
  border:1px solid rgba(232,200,119,.3);background:transparent;color:var(--ps-gold-soft);cursor:pointer;
}
.mp-me{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:10px;text-decoration:none;white-space:nowrap;
}
.mp-ava{
  display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%, rgba(150,96,240,.7), rgba(46,20,96,.9));
  border:1px solid rgba(232,200,119,.35);color:var(--ps-gold-soft);
}
.mp-me b{ display:block;font-size:.88rem;color:#fff; }
.mp-me span span{ font-size:.72rem;color:var(--ps-gold-soft);letter-spacing:.06em; }

.mp-body{ padding:22px 28px 44px; }
.mp-body.has-aside{
  display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start;
}
.mp-col{ display:grid;gap:16px;min-width:0;align-content:start; }
.mp-aside{ display:grid;gap:14px;align-content:start;position:sticky;top:22px; }

/* ---------------- 카드 공통 ---------------- */
.mp-card{
  background:#fff;border:1px solid var(--ps-line);
  border-radius:var(--ps-radius);padding:20px 22px;
  box-shadow:var(--ps-shadow-sm);
}
.mp-card-h{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:14px;
}
.mp-card-h h2{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-title);font-size:1.06rem;color:var(--ps-purple-600);margin:0;
}
.mp-card-h h2::before{
  content:"";width:3px;height:15px;border-radius:2px;background:var(--ps-grad-gold);
}
.mp-more{ font-size:.8rem;color:var(--ps-text-mute);text-decoration:none;white-space:nowrap; }
.mp-more:hover{ color:var(--ps-purple-500); }

/* 요약 숫자 4칸 */
.mp-stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;
  list-style:none;padding:0;margin:0;
}
.mp-stat{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;
  padding:16px 18px;border-radius:var(--ps-radius);
  background:#fff;border:1px solid var(--ps-line);box-shadow:var(--ps-shadow-sm);
}
.mp-stat-ic{
  display:grid;place-items:center;width:44px;height:44px;border-radius:12px;
  background:var(--ps-purple-100);color:var(--ps-purple-600);
}
.mp-stat b{ display:block;font-size:.8rem;color:var(--ps-text-mute);font-weight:600; }
.mp-stat strong{ font-family:var(--font-title);font-size:1.5rem;color:var(--ps-text); }
.mp-stat strong em{ font-style:normal;font-size:.8rem;color:var(--ps-text-mute);margin-left:2px; }
.mp-stat a{ display:block;font-size:.75rem;color:var(--ps-purple-500);text-decoration:none;margin-top:2px; }

/* 리포트 표지 미니 */
.mp-cover{
  position:relative;display:grid;place-items:center;flex:0 0 auto;
  width:var(--s);height:calc(var(--s) * 1.32);border-radius:10px;overflow:hidden;
  background:linear-gradient(160deg, var(--ps-cosmic-900), var(--ps-cosmic-700));
  border:1px solid rgba(232,200,119,.34);
}
.mp-cover img{ width:72%;height:72%;object-fit:contain; }
.mp-cover em{
  position:absolute;left:0;right:0;bottom:0;padding:3px 0;
  background:rgba(8,5,24,.7);color:var(--ps-gold-soft);
  font-style:normal;font-size:.62rem;text-align:center;letter-spacing:.02em;
}

/* 리포트 줄 */
.mp-list{ display:grid;gap:10px; }
.mp-row{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:13px 15px;border-radius:var(--ps-radius-sm);
  background:#FBF9FF;border:1px solid var(--ps-line-soft);
  transition:border-color .16s var(--ps-ease);
}
.mp-row:hover{ border-color:var(--ps-purple-300); }
.mp-row-b b{ display:block;font-size:.94rem;color:var(--ps-text);margin-bottom:3px;word-break:keep-all; }
.mp-row-b span{ font-size:.78rem;color:var(--ps-text-mute); }
.mp-row-a{ display:flex;gap:8px;align-items:center;white-space:nowrap; }

/* 진행 막대 */
.mp-prog{ margin-top:7px; }
.mp-prog-t{ height:7px;border-radius:999px;background:#EFEAF8;overflow:hidden; }
.mp-prog-t span{ display:block;height:100%;border-radius:999px;background:var(--ps-grad-gold); }
.mp-prog-l{
  display:flex;justify-content:space-between;gap:8px;
  font-size:.74rem;color:var(--ps-text-mute);margin-top:4px;
}

/* 상태 배지 */
.mp-badge{
  display:inline-block;padding:3px 10px;border-radius:999px;
  font-size:.72rem;font-weight:700;white-space:nowrap;
}
.mp-b-done{ background:#E6F4EE;color:#2E7D5B; }
.mp-b-work{ background:#FFF3D8;color:#8A6A12; }
.mp-b-wait{ background:#EDEEF7;color:#5B6088; }
.mp-b-stop{ background:#FDECE8;color:#A3402C; }

/* 보유 리포트 그리드 */
.mp-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:14px; }
.mp-rcard{
  display:grid;gap:12px;
  padding:16px;border-radius:var(--ps-radius);
  background:#fff;border:1px solid var(--ps-line);box-shadow:var(--ps-shadow-sm);
}
.mp-rcard-h{ display:grid;grid-template-columns:auto minmax(0,1fr);gap:13px; }
.mp-rcard-h b{ display:block;font-family:var(--font-title);font-size:1rem;color:var(--ps-text);margin-bottom:6px;word-break:keep-all; }
.mp-rmeta{ display:grid;gap:3px;font-size:.76rem;color:var(--ps-text-mute); }
.mp-rmeta span b{ display:inline;font-family:inherit;font-size:.76rem;color:var(--ps-text-soft);font-weight:600; }
.mp-rfoot{
  display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:14px;align-items:center;
  padding-top:12px;border-top:1px solid var(--ps-line);
}
.mp-rfoot .cnt{ display:grid;justify-items:center;gap:2px;font-size:.72rem;color:var(--ps-text-mute); }
.mp-rfoot .cnt b{ font-size:.9rem;color:var(--ps-text); }
.mp-rfoot .btn{ justify-self:end; }

/* 분석 진행 단계 */
.mp-steps{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin-top:12px;
}
.mp-steps li{ display:grid;justify-items:center;gap:5px;text-align:center;font-size:.66rem;color:var(--ps-text-mute); }
.mp-steps .n{
  display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--ps-line);background:#fff;font-size:.7rem;font-weight:800;color:var(--ps-text-mute);
}
.mp-steps li.is-done .n{ background:var(--ps-purple-500);border-color:transparent;color:#fff; }
.mp-steps li.is-now .n{ background:var(--ps-grad-gold);border-color:transparent;color:#3A2205; }
.mp-steps li.is-now{ color:var(--ps-purple-600);font-weight:700; }

/* 표 (결제 내역) */
.mp-table-wrap{ overflow-x:auto; }
.mp-table{ width:100%;border-collapse:collapse;min-width:760px; }
.mp-table th{
  padding:11px 12px;text-align:left;white-space:nowrap;
  background:#F6F0FF;color:var(--ps-purple-600);
  font-size:.8rem;font-weight:700;border-bottom:1px solid var(--ps-line);
}
.mp-table td{
  padding:13px 12px;font-size:.84rem;color:var(--ps-text-soft);
  border-bottom:1px solid var(--ps-line);vertical-align:middle;
}
.mp-table .num{ font-family:var(--font-title);font-weight:700;color:var(--ps-text); }
.mp-table .oid{ font-family:var(--font-title);letter-spacing:.02em;font-size:.8rem; }

/* 필터 탭 */
.mp-tabs{ display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px; }
.mp-tab{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 16px;border-radius:999px;
  border:1px solid var(--ps-line);background:#fff;
  font-family:inherit;font-size:.86rem;color:var(--ps-text-soft);cursor:pointer;
}
.mp-tab .c{
  display:grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  background:var(--ps-purple-100);color:var(--ps-purple-600);font-size:.7rem;font-weight:800;
}
.mp-tab.is-on{ background:var(--ps-purple-600);border-color:transparent;color:#fff; }
.mp-tab.is-on .c{ background:rgba(255,255,255,.25);color:#fff; }

/* 회원 정보 */
.mp-kv{ display:grid;grid-template-columns:auto minmax(0,1fr);gap:0;border-top:1px solid var(--ps-line); }
.mp-kv dt{
  padding:12px 18px 12px 0;font-size:.83rem;color:var(--ps-text-mute);
  border-bottom:1px solid var(--ps-line);white-space:nowrap;
}
.mp-kv dd{
  padding:12px 0;margin:0;font-size:.88rem;color:var(--ps-text);
  border-bottom:1px solid var(--ps-line);text-align:right;word-break:break-all;
}
.mp-profiles{ display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px; }
.mp-prof{
  padding:16px;border-radius:var(--ps-radius-sm);text-align:center;
  background:#FBF9FF;border:1px solid var(--ps-line-soft);
}
.mp-prof.is-me{ background:#F6F0FF;border-color:var(--ps-purple-300); }
.mp-prof-ava{
  display:grid;place-items:center;width:52px;height:52px;margin:0 auto 9px;border-radius:50%;
  background:var(--ps-purple-100);color:var(--ps-purple-500);
}
.mp-prof b{ display:block;font-size:.94rem;color:var(--ps-text);margin-bottom:4px; }
.mp-prof span{ display:block;font-size:.76rem;line-height:1.6;color:var(--ps-text-mute); }
.mp-prof-tag{
  display:inline-block;margin-bottom:7px;padding:2px 9px;border-radius:999px;
  background:var(--ps-purple-600);color:#fff;font-size:.68rem;font-weight:700;
}

/* 빈 상태 */
.mp-empty{
  padding:44px 22px;text-align:center;
  background:#FBF9FF;border:1px dashed var(--ps-line);border-radius:var(--ps-radius);
}
.mp-empty svg{ color:var(--ps-purple-300);margin-bottom:10px; }
.mp-empty p{ margin:0 0 16px;font-size:.9rem;color:var(--ps-text-mute);word-break:keep-all; }

/* 빠른 메뉴 */
.mp-quick{ list-style:none;margin:0;padding:0;display:grid;gap:2px; }
.mp-quick a{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:11px;align-items:center;
  padding:11px 6px;text-decoration:none;font-size:.88rem;color:var(--ps-text-soft);
  border-bottom:1px solid var(--ps-line);
}
.mp-quick a:last-child{ border-bottom:0; }
.mp-quick a:hover{ color:var(--ps-purple-600); }
.mp-quick svg{ color:var(--ps-purple-400); }
.mp-quick .ar{ color:var(--ps-text-mute);font-size:.9rem; }

.mp-sync{
  display:flex;align-items:center;gap:8px;
  padding:11px 14px;border-radius:var(--ps-radius-sm);
  background:#F6F0FF;border:1px solid var(--ps-purple-200);
  font-size:.78rem;color:var(--ps-purple-600);word-break:keep-all;
}
.mp-sync svg{ flex:0 0 auto; }

.mp-scrim{
  position:fixed;inset:0;z-index:44;background:rgba(8,5,24,.6);
  opacity:0;pointer-events:none;transition:opacity .2s var(--ps-ease);
}
.mp-scrim.is-on{ opacity:1;pointer-events:auto; }


/* =====================================================================
   24-C. 반응형
   ===================================================================== */

@media (max-width:1180px){
  .mp-body.has-aside{ grid-template-columns:1fr; }
  .mp-aside{ position:static; }
}

@media (max-width:960px){
  .mp-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mp-steps{ grid-template-columns:repeat(4,minmax(0,1fr));gap:8px; }
}

@media (max-width:768px){
  .mp{ grid-template-columns:1fr; }
  .mp-side{
    position:fixed;left:0;top:0;bottom:0;z-index:45;width:min(82vw,280px);height:100vh;
    transform:translateX(-100%);transition:transform .22s var(--ps-ease);
  }
  .mp-side.is-open{ transform:none; }
  .mp-drawer{ display:grid; }
  .mp-top{ grid-template-columns:auto minmax(0,1fr) auto;padding:16px 14px;gap:10px; }
  .mp-top-in h1{ font-size:1.16rem; }
  .mp-top-in p{ font-size:.79rem; }
  .mp-me span span{ display:none; }
  .mp-me b{ font-size:.8rem; }
  .mp-body{ padding:14px 12px 34px; }
  .mp-card{ padding:16px 14px; }
  .mp-stat{ padding:13px 14px;gap:10px; }
  .mp-stat-ic{ width:38px;height:38px; }
  .mp-stat strong{ font-size:1.3rem; }
  .mp-grid{ grid-template-columns:1fr; }
  .mp-row{ grid-template-columns:auto minmax(0,1fr);gap:11px; }
  .mp-row-a{ grid-column:1 / -1;justify-content:flex-end;padding-top:9px;border-top:1px dashed var(--ps-line); }
  .mp-kv{ grid-template-columns:1fr; }
  .mp-kv dt{ padding:11px 0 2px;border-bottom:0;font-size:.78rem; }
  .mp-kv dd{ padding:0 0 11px;text-align:left; }
  .mp-profiles{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:420px){
  .mp-stats{ grid-template-columns:1fr; }
  .mp-steps{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .mp-profiles{ grid-template-columns:1fr; }
  .mp-tab{ padding:8px 12px;font-size:.8rem; }
}

@media (prefers-reduced-motion:reduce){
  .mp-side,.mp-scrim,.mp-row,.mp-nav-i{ transition:none; }
}

/* =====================================================================
   24-D. MY PURPLE 세부 화면  (PHASE 12)
   ---------------------------------------------------------------------
   분석 진행현황 · 북마크 · 메모 · 결제 내역 · 회원 정보에서 쓰는 조각들입니다.
   ===================================================================== */

/* 요약 숫자 3칸 */
.mp-stats-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }

/* 카드 두 개를 나란히 */
.mp-two{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start; }
.mp-two > .mp-card{ margin-bottom:0; }

/* 카드 제목 옆 개수 */
.mp-c{
  display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;
  margin-left:7px;border-radius:999px;vertical-align:2px;
  background:var(--ps-purple-100);color:var(--ps-purple-600);font-size:.7rem;font-weight:800;
}

/* 작은 버튼 */
.btn-xs{
  padding:6px 11px;border-radius:999px;font-size:.76rem;line-height:1.2;
}
.btn.mp-danger{ color:var(--danger);border-color:rgba(180,71,47,.35); }
.btn.mp-danger:hover{ background:rgba(180,71,47,.08);color:var(--danger); }

/* ---------------- 분석 진행현황 ---------------- */
.mp-steps{ list-style:none;padding:0;margin:16px 0 0; }
.mp-steps .t{ display:grid;gap:2px; }
.mp-steps .t b{ font-size:.7rem;font-weight:700;color:inherit;word-break:keep-all; }
.mp-steps .t > span{ display:none; }
.mp-status .mp-card-h h2{ word-break:keep-all; }

.mp-tips{ list-style:none;margin:0;padding:0;display:grid;gap:13px; }
.mp-tips li{ display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;align-items:start; }
.mp-tips svg{ color:var(--ps-purple-400);margin-top:2px; }
.mp-tips b{ display:block;font-size:.85rem;color:var(--ps-text);margin-bottom:3px;word-break:keep-all; }
.mp-tips span{ font-size:.78rem;line-height:1.65;color:var(--ps-text-mute);word-break:keep-all; }

.mp-notes{ list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px; }
.mp-notes li{
  position:relative;padding-left:13px;
  font-size:.81rem;line-height:1.7;color:var(--ps-text-soft);word-break:keep-all;
}
.mp-notes li::before{
  content:'';position:absolute;left:0;top:.62em;width:4px;height:4px;border-radius:50%;
  background:var(--ps-purple-300);
}

/* ---------------- 북마크 목록 ---------------- */
.mp-marks{ list-style:none;margin:0;padding:0; }
.mp-marks li + li{ border-top:1px solid var(--ps-line); }
.mp-marks a{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:12px;align-items:center;
  padding:12px 4px;text-decoration:none;
}
.mp-marks a:hover{ background:#FBF9FF; }
.mp-marks .pg{
  display:grid;place-items:center;min-width:48px;height:30px;border-radius:999px;
  background:var(--ps-purple-100);color:var(--ps-purple-600);
  font-family:var(--font-title);font-size:.78rem;font-weight:800;
}
.mp-marks .tx b{ display:block;font-size:.88rem;color:var(--ps-text);margin-bottom:2px;word-break:keep-all; }
.mp-marks .tx > span{ font-size:.76rem;color:var(--ps-text-mute); }
.mp-marks .dt{ font-size:.74rem;color:var(--ps-text-mute);white-space:nowrap; }
.mp-marks svg{ color:var(--ps-purple-400); }

/* ---------------- 메모 목록 ---------------- */
.mp-memos{ list-style:none;margin:0;padding:0;display:grid;gap:12px; }
.mp-memo{
  padding:16px;border-radius:var(--ps-radius);
  background:#fff;border:1px solid var(--ps-line);box-shadow:var(--ps-shadow-sm);
}
.mp-memo-h{ display:flex;align-items:center;gap:8px;margin-bottom:7px; }
.mp-memo-h b{ font-family:var(--font-title);font-size:.98rem;color:var(--ps-text);word-break:keep-all; }
.mp-memo-h .st{ color:var(--ps-gold-deep);display:inline-grid; }
.mp-memo-b{
  margin:0 0 12px;font-size:.86rem;line-height:1.8;color:var(--ps-text-soft);
  white-space:pre-wrap;word-break:keep-all;
}
.mp-memo-f{
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  padding-top:11px;border-top:1px solid var(--ps-line);
  font-size:.75rem;color:var(--ps-text-mute);
}
.mp-memo-a{ display:flex;gap:6px;flex-wrap:wrap; }
.mp-memo-edit{ display:grid;gap:8px;margin-top:12px; }

/* 입력칸 */
.mp-in{
  width:100%;padding:10px 13px;border-radius:var(--ps-radius-sm);
  border:1px solid var(--ps-line);background:#fff;
  font-family:inherit;font-size:.87rem;color:var(--ps-text);
}
.mp-in:focus{ outline:none;border-color:var(--ps-purple-400);box-shadow:0 0 0 3px var(--ps-purple-100); }
textarea.mp-in{ line-height:1.7;resize:vertical; }

/* ---------------- 결제 내역 표 ---------------- */
.mp-tablecard{ padding:0;overflow-x:auto; }
.mp-table .c-no b{ display:block;font-family:var(--font-title);font-size:.8rem;color:var(--ps-text);letter-spacing:.02em; }
.mp-table .c-no span{ font-size:.73rem;color:var(--ps-text-mute); }
.mp-table .c-pd b{ display:block;font-size:.87rem;color:var(--ps-text);margin-bottom:2px;word-break:keep-all; }
.mp-table .c-pd span{ font-size:.74rem;color:var(--ps-text-mute); }
.mp-table .c-am b{ font-family:var(--font-title);font-size:.9rem;color:var(--ps-text); }
.mp-table .c-ac{ text-align:right;white-space:nowrap; }
.mp-table .c-ac .btn + .btn{ margin-left:6px; }
.mp-none{ margin:0;padding:30px;text-align:center;font-size:.86rem;color:var(--ps-text-mute); }

/* ---------------- 회원 정보 ---------------- */
.mp-form{ display:grid;gap:16px;max-width:520px; }
.mp-f{ display:grid;gap:6px; }
.mp-f > span{ font-size:.83rem;font-weight:700;color:var(--ps-text); }
.mp-f .opt,.mp-check .opt{
  display:inline-block;margin-left:5px;padding:1px 7px;border-radius:999px;
  background:var(--ps-purple-100);color:var(--ps-purple-600);font-size:.68rem;font-weight:700;
}
.mp-f input{
  width:100%;padding:11px 14px;border-radius:var(--ps-radius-sm);
  border:1px solid var(--ps-line);background:#fff;
  font-family:inherit;font-size:.9rem;color:var(--ps-text);
}
.mp-f input:focus{ outline:none;border-color:var(--ps-purple-400);box-shadow:0 0 0 3px var(--ps-purple-100); }
.mp-f input:disabled{ background:#F5F3FA;color:var(--ps-text-mute); }
.mp-f em{ font-style:normal;font-size:.75rem;color:var(--ps-text-mute); }

.mp-check{ display:flex;align-items:flex-start;gap:9px;font-size:.84rem;color:var(--ps-text-soft);cursor:pointer; }
.mp-check input{ width:17px;height:17px;margin-top:2px;accent-color:var(--ps-purple-500);flex:0 0 auto; }

.mp-err{
  margin:0;padding:10px 13px;border-radius:var(--ps-radius-sm);
  background:rgba(180,71,47,.08);color:var(--danger);font-size:.8rem;
}
.mp-form-a{ display:flex;gap:8px; }
.mp-hint{ font-size:.78rem;font-weight:700;color:var(--ok); }

.mp-quick li{ list-style:none; }
.mp-quick-btn{
  width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:11px;align-items:center;
  padding:11px 6px;border:0;border-bottom:1px solid var(--ps-line);background:none;
  font-family:inherit;font-size:.88rem;color:var(--ps-text-soft);text-align:left;cursor:pointer;
}
.mp-quick-btn:hover{ color:var(--ps-purple-600); }
.mp-quick-btn svg{ color:var(--ps-purple-400); }
.mp-quick-off{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;align-items:center;
  padding:11px 6px;border-bottom:1px solid var(--ps-line);
  font-size:.88rem;color:var(--ps-text-mute);
}
.mp-quick-off svg{ color:var(--ps-line); }
.mp-quick-off em{ display:block;font-style:normal;font-size:.74rem;color:var(--ps-text-mute); }
.mp-b-rel{ background:var(--ps-purple-100);color:var(--ps-purple-600); }

/* ---------------- 반응형 ---------------- */
@media (max-width:1180px){
  .mp-two{ grid-template-columns:1fr; }
}
@media (max-width:960px){
  .mp-stats-3{ grid-template-columns:1fr; }
  .mp-steps{ grid-template-columns:repeat(4,minmax(0,1fr));gap:10px; }
}
@media (max-width:768px){
  .mp-marks a{ grid-template-columns:auto minmax(0,1fr) auto;gap:10px; }
  .mp-marks .dt{ display:none; }
  .mp-memo-f{ font-size:.72rem; }
  .mp-form{ max-width:none; }
}
@media (max-width:420px){
  .mp-steps{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .mp-marks .pg{ min-width:42px;height:27px;font-size:.72rem; }
}

/* 두 칸 배치 안에서는 줄이 좁아지므로 버튼을 아래로 내립니다 */
.mp-two .mp-row{ grid-template-columns:auto minmax(0,1fr); }
.mp-two .mp-row-a{
  grid-column:1 / -1;justify-content:flex-end;
  padding-top:9px;border-top:1px dashed var(--ps-line);
}

/* 결제 내역 — 모바일에서는 표 대신 카드로 읽습니다 */
@media (max-width:768px){
  .mp-tablecard{ overflow:visible;background:none;border:0;box-shadow:none;padding:0; }
  .mp-table{ min-width:0;display:block; }
  .mp-table thead{ display:none; }
  .mp-table tbody{ display:grid;gap:12px; }
  .mp-table tr{
    display:grid;gap:8px;padding:15px 16px;border-radius:var(--ps-radius);
    background:#fff;border:1px solid var(--ps-line);box-shadow:var(--ps-shadow-sm);
  }
  .mp-table td{
    display:grid;grid-template-columns:78px minmax(0,1fr);gap:10px;align-items:center;
    padding:0;border-bottom:0;
  }
  .mp-table td::before{
    content:attr(data-l);font-size:.75rem;font-weight:700;color:var(--ps-text-mute);
  }
  .mp-table td.c-ac{
    grid-template-columns:1fr;justify-items:end;text-align:right;
    padding-top:11px;border-top:1px dashed var(--ps-line);
  }
  .mp-table td.c-ac::before{ content:none; }
}

/* 카드로 바뀐 표 안에서 값은 모두 오른쪽 칸에 정렬합니다 */
@media (max-width:768px){
  .mp-table td > *{ grid-column:2;justify-self:start; }
  .mp-table td.c-ac > *{ grid-column:1; }
}

/* 취소된 주문은 눌러볼 것이 없으므로 빈 칸을 지웁니다 */
.mp-table td.c-ac:not(:has(*)){ display:none; }


/* =====================================================================
   25. 이용안내 · 고객센터 · FAQ · 공지 · 정책  (PHASE 13)
   ---------------------------------------------------------------------
   기준 : PS_02_02_GUIDE / PS_11_03_CONTACT / PS_13_01·02_FAQ /
          PS_12_01·02_NOTICE / PS_12_03·04·05_POLICY
   ===================================================================== */

/* ---------------- 25-A. 공용 히어로 · 뼈대 ---------------- */
.sp-hero{
  position:relative;overflow:hidden;
  padding:56px 0 62px;
  background:
    radial-gradient(120% 150% at 50% -30%, rgba(120,64,210,.5) 0%, rgba(20,10,48,0) 62%),
    linear-gradient(180deg, #150A33 0%, #1D0E45 60%, #241154 100%);
  color:#fff;text-align:center;
}
.sp-hero-sky{ position:absolute;inset:0;opacity:.75;pointer-events:none; }
.sp-hero-sky svg{ width:100%;height:100%;display:block; }
.sp-hero-in{ position:relative;z-index:1; }
.sp-hero h1{
  margin:0 0 10px;font-family:var(--font-title);font-size:2.5rem;line-height:1.25;
  background:var(--ps-grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.sp-hero p{ margin:0;font-size:1rem;line-height:1.75;color:rgba(255,255,255,.82);word-break:keep-all; }
.sp-hero-orn{ margin:16px auto 0;max-width:300px;opacity:.9; }
.sp-hero-orn svg{ width:100%;height:auto;display:block; }

.sp-wrap{ padding:30px 0 60px; }

.sp-crumb{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  margin-bottom:16px;font-size:.8rem;color:var(--ps-text-mute);
}
.sp-crumb svg{ color:var(--ps-purple-400); }
.sp-crumb a{ color:var(--ps-text-mute);text-decoration:none; }
.sp-crumb a:hover{ color:var(--ps-purple-600); }
.sp-crumb b{ color:var(--ps-purple-600);font-weight:700; }
.sp-crumb .sep{ color:var(--ps-line); }

/* 확정 전 값 표시 */
.sp-pending{
  display:inline-block;padding:1px 9px;border-radius:999px;
  background:#FFF3D8;color:#8A6A12;font-size:.76rem;font-weight:700;white-space:nowrap;
}
.sp-chip{
  display:inline-block;margin-left:7px;padding:1px 8px;border-radius:999px;vertical-align:2px;
  background:#FFF3D8;color:#8A6A12;font-size:.66rem;font-weight:700;font-style:normal;
}

/* ---------------- 25-B. 이용안내 (7단계) ---------------- */
.gd-hero{ text-align:left; }
.gd-hero .sp-hero-in{ display:grid;gap:8px; }
.gd-eyebrow{
  display:inline-block;font-size:.86rem;font-weight:700;letter-spacing:.02em;
  color:var(--ps-purple-200);
}
.gd-hero h1{ background:none;color:#fff;-webkit-text-fill-color:#fff;font-size:2.4rem; }
.gd-hero h1 em{
  font-style:normal;
  background:var(--ps-grad-gold);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}

.gd-steps{ list-style:none;margin:0 0 26px;padding:0;display:grid;gap:14px; }
.gd-step{
  display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:16px;align-items:center;
  padding:18px 20px;border-radius:var(--ps-radius);
  background:#fff;border:1px solid var(--ps-line);box-shadow:var(--ps-shadow-sm);
}
.gd-step .n{
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--ps-purple-600);color:#fff;
  font-family:var(--font-title);font-size:.86rem;font-weight:800;
}
.gd-step .ic{
  display:grid;place-items:center;width:52px;height:52px;border-radius:var(--ps-radius-sm);
  background:var(--ps-purple-100);color:var(--ps-purple-500);
}
.gd-step b{ display:block;font-family:var(--font-title);font-size:1.06rem;color:var(--ps-text);margin-bottom:5px; }
.gd-step > div > p{ margin:0 0 6px;font-size:.88rem;line-height:1.7;color:var(--ps-text-soft);word-break:keep-all; }
.gd-step ul{ list-style:none;margin:0;padding:0;display:grid;gap:3px; }
.gd-step li{
  position:relative;padding-left:12px;font-size:.79rem;line-height:1.6;color:var(--ps-text-mute);word-break:keep-all;
}
.gd-step li::before{
  content:'';position:absolute;left:0;top:.6em;width:4px;height:4px;border-radius:50%;
  background:var(--ps-purple-300);
}
.gd-step .go{ justify-self:end;white-space:nowrap; }

.gd-feats{
  list-style:none;margin:0 0 26px;padding:26px;border-radius:var(--ps-radius);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;
  background:linear-gradient(180deg,#1B0C40 0%,#25135A 100%);color:#fff;
}
.gd-feats li{ display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start; }
.gd-feats svg{ color:var(--ps-gold-soft);margin-top:2px; }
.gd-feats b{ display:block;font-size:.92rem;margin-bottom:4px;color:#fff; }
.gd-feats span{ font-size:.79rem;line-height:1.65;color:rgba(255,255,255,.7);word-break:keep-all; }

.gd-cta{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;
  padding:26px 28px;border-radius:var(--ps-radius);
  background:linear-gradient(120deg,#2B1568 0%,#3D1E8C 100%);color:#fff;
}
.gd-cta b{ display:block;font-family:var(--font-title);font-size:1.4rem;margin-bottom:6px; }
.gd-cta b em{ font-style:normal;color:var(--ps-gold-soft); }
.gd-cta p{ margin:0;font-size:.88rem;color:rgba(255,255,255,.75); }
.gd-cta-a{ display:flex;gap:9px;flex-wrap:wrap; }

/* ---------------- 25-C. FAQ ---------------- */
.fq-layout{ display:grid;grid-template-columns:250px minmax(0,1fr);gap:22px;align-items:start; }

.fq-side{
  position:sticky;top:88px;display:grid;gap:14px;
  padding:20px;border-radius:var(--ps-radius);
  background:#fff;border:1px solid var(--ps-line);box-shadow:var(--ps-shadow-sm);
}
.fq-side h2{ margin:0;font-family:var(--font-title);font-size:1rem;color:var(--ps-purple-600); }
.fq-cats{ list-style:none;margin:0;padding:0;display:grid;gap:2px; }
.fq-cats button{
  width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;
  padding:10px 11px;border:0;border-radius:var(--ps-radius-sm);background:none;
  font-family:inherit;font-size:.87rem;color:var(--ps-text-soft);text-align:left;cursor:pointer;
}
.fq-cats button:hover{ background:#FBF9FF; }
.fq-cats button.is-on{ background:var(--ps-purple-600);color:#fff; }
.fq-cats button.is-on svg,.fq-cats button.is-on .c{ color:#fff; }
.fq-cats svg{ color:var(--ps-purple-400); }
.fq-cats .c{ font-size:.78rem;color:var(--ps-text-mute);font-weight:700; }
.fq-cats button.is-on .c{ color:rgba(255,255,255,.8); }

.fq-search{ display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-bottom:18px; }
.fq-search input{
  width:100%;padding:12px 16px;border-radius:999px;
  border:1px solid var(--ps-line);background:#fff;
  font-family:inherit;font-size:.9rem;color:var(--ps-text);
}
.fq-search input:focus{ outline:none;border-color:var(--ps-purple-400);box-shadow:0 0 0 3px var(--ps-purple-100); }

.fq-top{ margin-bottom:22px; }
.fq-top-h{ display:flex;align-items:center;gap:8px;margin-bottom:11px; }
.fq-top-h svg{ color:var(--ps-gold-deep); }
.fq-top-h b{ font-family:var(--font-title);font-size:1.02rem;color:var(--ps-text); }
.fq-top-l{ list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:11px; }
.fq-top-l a{
  display:grid;gap:8px;padding:15px 14px;border-radius:var(--ps-radius);
  background:#fff;border:1px solid var(--ps-line);text-decoration:none;
  box-shadow:var(--ps-shadow-sm);
}
.fq-top-l a:hover{ border-color:var(--ps-purple-300); }
.fq-top-l .n{ font-family:var(--font-title);font-size:1.3rem;color:var(--ps-purple-400); }
.fq-top-l span{ font-size:.82rem;line-height:1.55;color:var(--ps-text-soft);word-break:keep-all; }

.fq-tabs{ display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px; }

.fq-list{ list-style:none;margin:0;padding:0;border-radius:var(--ps-radius);
  background:#fff;border:1px solid var(--ps-line);overflow:hidden; }
.fq-item + .fq-item{ border-top:1px solid var(--ps-line); }
.fq-q{
  width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:12px;align-items:center;
  padding:16px 18px;border:0;background:none;
  font-family:inherit;font-size:.93rem;color:var(--ps-text);text-align:left;cursor:pointer;
}
.fq-q:hover{ background:#FBF9FF; }
.fq-q .qm{ font-family:var(--font-title);font-weight:800;color:var(--ps-purple-500); }
.fq-q .tag{
  padding:2px 9px;border-radius:999px;background:var(--ps-purple-100);
  color:var(--ps-purple-600);font-size:.72rem;font-weight:700;white-space:nowrap;
}
.fq-q .ar{ color:var(--ps-text-mute);transition:transform .18s var(--ps-ease); }
.fq-item.is-open .fq-q .ar{ transform:rotate(180deg); }
.fq-a{
  display:none;padding:0 18px 20px 46px;
  font-size:.87rem;line-height:1.85;color:var(--ps-text-soft);word-break:keep-all;
}
.fq-item.is-open .fq-a{ display:block; }
.fq-a p{ margin:0 0 9px; }
.fq-a ul{ margin:6px 0 9px;padding-left:18px; }
.fq-a li{ margin-bottom:4px; }
.fq-a-more{ margin-top:12px;display:flex;gap:8px;flex-wrap:wrap; }

.fq-none{ padding:40px;text-align:center;font-size:.88rem;color:var(--ps-text-mute); }

/* FAQ 상세 */
.fq-detail{
  padding:28px 30px;border-radius:var(--ps-radius);
  background:#fff;border:1px solid var(--ps-line);box-shadow:var(--ps-shadow-sm);
}
.fq-detail .tag{
  display:inline-block;margin-bottom:12px;padding:3px 11px;border-radius:999px;
  background:var(--ps-purple-100);color:var(--ps-purple-600);font-size:.76rem;font-weight:700;
}
.fq-detail h2{ margin:0 0 20px;font-family:var(--font-title);font-size:1.36rem;line-height:1.5;color:var(--ps-text);word-break:keep-all; }
.fq-detail-a{ display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px; }
.fq-detail-a .av{
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--ps-purple-600);color:#fff;font-family:var(--font-title);font-weight:800;
}
.fq-detail-a > div{ font-size:.92rem;line-height:1.9;color:var(--ps-text-soft);word-break:keep-all; }
.fq-detail-a p{ margin:0 0 10px; }
.fq-detail-f{
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:22px;padding-top:18px;border-top:1px solid var(--ps-line);
  font-size:.85rem;color:var(--ps-text-mute);
}
.fq-near{ list-style:none;margin:0;padding:0;display:grid;gap:2px; }
.fq-near a{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;align-items:center;
  padding:11px 4px;text-decoration:none;border-bottom:1px solid var(--ps-line);
}
.fq-near a:last-child{ border-bottom:0; }
.fq-near .n{ font-family:var(--font-title);font-weight:800;color:var(--ps-purple-400);font-size:.85rem; }
.fq-near span{ font-size:.84rem;line-height:1.5;color:var(--ps-text-soft);word-break:keep-all; }
.fq-near a:hover span{ color:var(--ps-purple-600); }

/* ---------------- 25-D. 1:1 문의 · 고객센터 ---------------- */
.ct-layout{ display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px;align-items:start; }

.ct-card{
  padding:26px 28px;border-radius:var(--ps-radius);
  background:#fff;border:1px solid var(--ps-line);box-shadow:var(--ps-shadow-sm);
}
.ct-card-h{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;
  padding-bottom:16px;margin-bottom:20px;border-bottom:1px solid var(--ps-line);
}
.ct-card-h .ic{
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--ps-purple-100);color:var(--ps-purple-500);
}
.ct-card-h b{ display:block;font-family:var(--font-title);font-size:1.14rem;color:var(--ps-text); }
.ct-card-h span{ font-size:.83rem;color:var(--ps-text-mute); }
.ct-card-h .safe{ display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--ps-text-mute); }

.ct-form{ display:grid;gap:18px; }
.ct-types{ display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px; }
.ct-type{
  display:grid;gap:6px;justify-items:center;padding:13px 8px;border-radius:var(--ps-radius-sm);
  border:1px solid var(--ps-line);background:#fff;cursor:pointer;
  font-family:inherit;font-size:.8rem;color:var(--ps-text-soft);text-align:center;
}
.ct-type svg{ color:var(--ps-purple-400); }
.ct-type.is-on{ border-color:var(--ps-purple-400);background:#F6F0FF;color:var(--ps-purple-600);font-weight:700; }
.ct-type.is-on svg{ color:var(--ps-purple-600); }

.ct-row{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px; }
.ct-f{ display:grid;gap:6px; }
.ct-f > label{ font-size:.83rem;font-weight:700;color:var(--ps-text); }
.ct-f .req{ color:var(--danger);margin-left:3px; }
.ct-f .opt{
  display:inline-block;margin-left:5px;padding:1px 7px;border-radius:999px;
  background:var(--ps-purple-100);color:var(--ps-purple-600);font-size:.68rem;font-weight:700;
}
.ct-f input,.ct-f textarea{
  width:100%;padding:12px 14px;border-radius:var(--ps-radius-sm);
  border:1px solid var(--ps-line);background:#fff;
  font-family:inherit;font-size:.89rem;color:var(--ps-text);
}
.ct-f textarea{ line-height:1.75;resize:vertical;min-height:150px; }
.ct-f input:focus,.ct-f textarea:focus{ outline:none;border-color:var(--ps-purple-400);box-shadow:0 0 0 3px var(--ps-purple-100); }
.ct-f .err{ font-size:.78rem;color:var(--danger);min-height:1em; }
.ct-count{ text-align:right;font-size:.76rem;color:var(--ps-text-mute); }

.ct-agree{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;align-items:start;
  padding:15px 16px;border-radius:var(--ps-radius-sm);background:#FBF9FF;border:1px solid var(--ps-line-soft);
}
.ct-agree input{ width:17px;height:17px;margin-top:2px;accent-color:var(--ps-purple-500); }
.ct-agree b{ display:block;font-size:.85rem;color:var(--ps-text);margin-bottom:4px; }
.ct-agree span{ font-size:.79rem;line-height:1.65;color:var(--ps-text-mute);word-break:keep-all; }

.ct-side{ display:grid;gap:12px; }
.ct-info{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:13px;align-items:start;
  padding:17px 18px;border-radius:var(--ps-radius);
  background:#fff;border:1px solid var(--ps-line);
}
.ct-info svg{ color:var(--ps-purple-400);margin-top:2px; }
.ct-info b{ display:block;font-size:.9rem;color:var(--ps-text);margin-bottom:5px; }
.ct-info span{ display:block;font-size:.81rem;line-height:1.7;color:var(--ps-text-mute);word-break:keep-all; }
.ct-info a{ font-size:.81rem;color:var(--ps-purple-600);text-decoration:none; }

.ct-dark{
  padding:22px;border-radius:var(--ps-radius);text-align:center;
  background:linear-gradient(180deg,#1B0C40 0%,#2A1466 100%);color:#fff;
}
.ct-dark b{ display:block;font-family:var(--font-title);font-size:1.04rem;margin-bottom:7px; }
.ct-dark p{ margin:0 0 14px;font-size:.82rem;line-height:1.7;color:rgba(255,255,255,.72);word-break:keep-all; }

.ct-steps{
  list-style:none;margin:22px 0 0;padding:20px 22px;border-radius:var(--ps-radius);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;
  background:#FBF9FF;border:1px solid var(--ps-line-soft);
}
.ct-steps li{ display:grid;gap:4px;justify-items:center;text-align:center; }
.ct-steps .n{
  display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--ps-purple-600);color:#fff;font-size:.78rem;font-weight:800;
}
.ct-steps b{ font-size:.86rem;color:var(--ps-text); }
.ct-steps span{ font-size:.76rem;color:var(--ps-text-mute);word-break:keep-all; }

.ct-done{
  padding:44px 30px;text-align:center;border-radius:var(--ps-radius);
  background:#fff;border:1px solid var(--ps-line);box-shadow:var(--ps-shadow-sm);
}
.ct-done .ic{
  display:grid;place-items:center;width:64px;height:64px;margin:0 auto 16px;border-radius:50%;
  background:#E6F4EE;color:#2E7D5B;
}
.ct-done b{ display:block;font-family:var(--font-title);font-size:1.3rem;color:var(--ps-text);margin-bottom:9px; }
.ct-done p{ margin:0 0 20px;font-size:.89rem;line-height:1.8;color:var(--ps-text-mute);word-break:keep-all; }
.ct-done-a{ display:flex;gap:9px;justify-content:center;flex-wrap:wrap; }

/* ---------------- 25-E. 공지사항 ---------------- */
.nt-layout{ display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;align-items:start; }
.nt-bar{ display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px; }
.nt-search{ display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;min-width:260px; }
.nt-search input{
  width:100%;padding:10px 15px;border-radius:999px;border:1px solid var(--ps-line);
  background:#fff;font-family:inherit;font-size:.86rem;color:var(--ps-text);
}
.nt-search input:focus{ outline:none;border-color:var(--ps-purple-400);box-shadow:0 0 0 3px var(--ps-purple-100); }

.nt-table{ width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--ps-line);border-radius:var(--ps-radius);overflow:hidden; }
.nt-table th{
  padding:12px 14px;background:#F6F0FF;color:var(--ps-purple-600);
  font-size:.8rem;font-weight:700;text-align:left;border-bottom:1px solid var(--ps-line);
}
.nt-table td{ padding:14px;font-size:.86rem;color:var(--ps-text-soft);border-bottom:1px solid var(--ps-line); }
.nt-table tr:last-child td{ border-bottom:0; }
.nt-table .c-n{ width:70px;text-align:center;color:var(--ps-text-mute);font-size:.8rem; }
.nt-table .c-c{ width:120px; }
.nt-table .c-d{ width:120px;color:var(--ps-text-mute);font-size:.8rem; }
.nt-table .c-v{ width:80px;text-align:right;color:var(--ps-text-mute);font-size:.8rem; }
.nt-table a{ color:var(--ps-text);text-decoration:none;font-weight:600; }
.nt-table a:hover{ color:var(--ps-purple-600); }
.nt-cat{
  display:inline-block;padding:2px 10px;border-radius:999px;
  background:var(--ps-purple-100);color:var(--ps-purple-600);font-size:.73rem;font-weight:700;white-space:nowrap;
}
.nt-cat.is-pin{ background:#FFF3D8;color:#8A6A12; }
.nt-pin{ color:var(--ps-gold-deep); }

.nt-empty{
  padding:56px 24px;text-align:center;border-radius:var(--ps-radius);
  background:#FBF9FF;border:1px dashed var(--ps-line);
}
.nt-empty svg{ color:var(--ps-purple-300);margin-bottom:12px; }
.nt-empty b{ display:block;font-size:1rem;color:var(--ps-text);margin-bottom:8px; }
.nt-empty p{ margin:0;font-size:.86rem;line-height:1.75;color:var(--ps-text-mute);word-break:keep-all; }

.nt-detail{
  padding:26px 28px;border-radius:var(--ps-radius);
  background:#fff;border:1px solid var(--ps-line);box-shadow:var(--ps-shadow-sm);
}
.nt-detail h2{ margin:8px 0 8px;font-family:var(--font-title);font-size:1.42rem;line-height:1.45;color:var(--ps-text);word-break:keep-all; }
.nt-detail-m{
  display:flex;gap:16px;flex-wrap:wrap;align-items:center;
  padding-bottom:16px;margin-bottom:20px;border-bottom:1px solid var(--ps-line);
  font-size:.8rem;color:var(--ps-text-mute);
}
.nt-detail-b{ font-size:.92rem;line-height:1.95;color:var(--ps-text-soft);white-space:pre-wrap;word-break:keep-all; }
.nt-nav{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:22px; }
.nt-nav a,.nt-nav span{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;
  padding:14px 16px;border-radius:var(--ps-radius-sm);
  border:1px solid var(--ps-line);background:#fff;text-decoration:none;
  font-size:.84rem;color:var(--ps-text-soft);
}
.nt-nav span{ color:var(--ps-text-mute);background:#FBF9FF; }
.nt-nav a:hover{ border-color:var(--ps-purple-300);color:var(--ps-purple-600); }
.nt-nav b{ font-size:.78rem;color:var(--ps-text-mute);font-weight:700; }

/* ---------------- 25-F. 정책 (약관 · 방침 · 환불) ---------------- */
.sp-meta{ display:flex;gap:18px;flex-wrap:wrap;justify-content:flex-end;margin-bottom:12px;
  font-size:.8rem;color:var(--ps-text-mute); }
.sp-meta span{ display:inline-flex;align-items:center;gap:6px; }
.sp-meta svg{ color:var(--ps-purple-400); }

.sp-draft{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;align-items:start;
  margin:0 0 18px;padding:15px 17px;border-radius:var(--ps-radius-sm);
  background:#FFF9EC;border:1px solid #F0DCA8;
  font-size:.84rem;line-height:1.75;color:#7A5C10;word-break:keep-all;
}
.sp-draft svg{ color:#B08810;margin-top:2px; }

.sp-layout{ display:grid;grid-template-columns:264px minmax(0,1fr);gap:22px;align-items:start; }
.sp-toc{ position:sticky;top:88px;display:grid;gap:14px; }
.sp-toc-h{
  display:flex;align-items:center;gap:9px;padding:14px 16px;border-radius:var(--ps-radius) var(--ps-radius) 0 0;
  background:var(--ps-purple-600);color:#fff;
}
.sp-toc-h b{ font-family:var(--font-title);font-size:.94rem; }
.sp-toc ol{
  list-style:none;margin:-14px 0 0;padding:8px;border-radius:0 0 var(--ps-radius) var(--ps-radius);
  background:#fff;border:1px solid var(--ps-line);border-top:0;
}
.sp-toc a{
  display:block;padding:9px 11px;border-radius:var(--ps-radius-sm);
  font-size:.84rem;color:var(--ps-text-soft);text-decoration:none;word-break:keep-all;
}
.sp-toc a:hover{ background:#FBF9FF; }
.sp-toc a.is-on{ background:var(--ps-purple-100);color:var(--ps-purple-600);font-weight:700; }

.sp-body{
  padding:28px 32px;border-radius:var(--ps-radius);
  background:#fff;border:1px solid var(--ps-line);box-shadow:var(--ps-shadow-sm);
}
.sp-sec{ padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--ps-line); }
.sp-sec:last-child{ padding-bottom:0;margin-bottom:0;border-bottom:0; }
.sp-sec h2{
  margin:0 0 12px;font-family:var(--font-title);font-size:1.12rem;color:var(--ps-purple-600);
  scroll-margin-top:96px;
}
.sp-sec p{ margin:0 0 10px;font-size:.89rem;line-height:1.9;color:var(--ps-text-soft);word-break:keep-all; }
.sp-sec ul{ margin:8px 0 12px;padding-left:18px; }
.sp-sec li{ margin-bottom:6px;font-size:.88rem;line-height:1.8;color:var(--ps-text-soft);word-break:keep-all; }
.sp-sec a{ color:var(--ps-purple-600); }

.sp-review{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;
  margin:12px 0 0;padding:12px 14px;border-radius:var(--ps-radius-sm);
  background:#FFF9EC;border:1px solid #F0DCA8;
}
.sp-review svg{ color:#B08810;margin-top:2px; }
.sp-review b{ display:block;font-size:.8rem;color:#7A5C10;margin-bottom:3px; }
.sp-review span{ font-size:.8rem;line-height:1.7;color:#7A5C10;word-break:keep-all; }
.sp-datenote{ font-size:.84rem;color:var(--ps-text-mute); }

.sp-table-wrap{ overflow-x:auto;margin:10px 0 12px; }
.sp-table{ width:100%;border-collapse:collapse;min-width:520px; }
.sp-table th{
  padding:10px 12px;background:#F6F0FF;color:var(--ps-purple-600);
  font-size:.8rem;font-weight:700;text-align:left;border:1px solid var(--ps-line);
}
.sp-table td{ padding:10px 12px;font-size:.83rem;color:var(--ps-text-soft);border:1px solid var(--ps-line); }

.sp-princ{
  list-style:none;margin:0 0 22px;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
}
.sp-princ li{
  padding:16px;border-radius:var(--ps-radius-sm);text-align:center;
  background:#FBF9FF;border:1px solid var(--ps-line-soft);
}
.sp-princ svg{ color:var(--ps-purple-500);margin-bottom:7px; }
.sp-princ b{ display:block;font-size:.9rem;color:var(--ps-text);margin-bottom:4px; }
.sp-princ span{ font-size:.78rem;line-height:1.6;color:var(--ps-text-mute);word-break:keep-all; }

.sp-flow{
  list-style:none;margin:0 0 22px;padding:20px;border-radius:var(--ps-radius);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;
  background:#FBF9FF;border:1px solid var(--ps-line-soft);
}
.sp-flow li{ display:grid;gap:5px;justify-items:center;text-align:center; }
.sp-flow .n{
  display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--ps-purple-600);color:#fff;font-size:.74rem;font-weight:800;
}
.sp-flow svg{ color:var(--ps-purple-400); }
.sp-flow b{ font-size:.86rem;color:var(--ps-text); }
.sp-flow span{ font-size:.75rem;line-height:1.55;color:var(--ps-text-mute);word-break:keep-all; }

.sp-contact{
  padding:16px 17px;border-radius:var(--ps-radius);
  background:#fff;border:1px solid var(--ps-line);
}
.sp-contact ul{ list-style:none;margin:0 0 12px;padding:0;display:grid;gap:10px; }
.sp-contact li{ display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start; }
.sp-contact svg{ color:var(--ps-purple-400);margin-top:2px; }
.sp-contact b{ display:block;font-size:.79rem;color:var(--ps-text-mute);margin-bottom:2px;font-weight:700; }
.sp-contact li span{ font-size:.85rem;color:var(--ps-text); }
.sp-note{ margin:10px 0 0;font-size:.76rem;line-height:1.65;color:var(--ps-text-mute);word-break:keep-all; }

.sp-foot{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;
  margin-top:22px;padding:20px 24px;border-radius:var(--ps-radius);
  background:#FBF9FF;border:1px solid var(--ps-line-soft);
}
.sp-foot > div{ display:grid;grid-template-columns:auto minmax(0,1fr);gap:13px;align-items:center; }
.sp-foot svg{ color:var(--ps-purple-500); }
.sp-foot b{ display:block;font-size:.94rem;color:var(--ps-text);margin-bottom:3px; }
.sp-foot span{ font-size:.82rem;line-height:1.65;color:var(--ps-text-mute);word-break:keep-all; }

.sp-help{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:22px;align-items:center;
  margin-top:26px;padding:22px 26px;border-radius:var(--ps-radius);
  background:#fff;border:1px solid var(--ps-line);box-shadow:var(--ps-shadow-sm);
}
.sp-help-t{ display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center; }
.sp-help-t svg{ color:var(--ps-purple-500); }
.sp-help-t b{ display:block;font-family:var(--font-title);font-size:1.06rem;color:var(--ps-text);margin-bottom:3px; }
.sp-help-t span{ font-size:.83rem;color:var(--ps-text-mute);word-break:keep-all; }
.sp-help-l{ list-style:none;margin:0;padding:0;display:grid;gap:8px; }
.sp-help-l li{ display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px;align-items:center; }
.sp-help-l svg{ color:var(--ps-purple-400); }
.sp-help-l b{ display:block;font-size:.74rem;color:var(--ps-text-mute);font-weight:700; }
.sp-help-l span{ font-size:.83rem;color:var(--ps-text); }

/* ---------------- 25-G. 비밀번호 재설정 ---------------- */
.pw-note{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;
  margin-top:14px;padding:13px 15px;border-radius:var(--ps-radius-sm);
  background:#F6F0FF;border:1px solid var(--ps-purple-200);
  font-size:.8rem;line-height:1.7;color:var(--ps-purple-600);word-break:keep-all;
}
.pw-note svg{ margin-top:2px;flex:0 0 auto; }
.pw-ok{
  display:grid;justify-items:center;gap:12px;text-align:center;padding:8px 0 4px;
}
.pw-ok .ic{
  display:grid;place-items:center;width:58px;height:58px;border-radius:50%;
  background:#E6F4EE;color:#2E7D5B;
}
.pw-ok b{ font-family:var(--font-title);font-size:1.14rem;color:var(--ps-text); }
.pw-ok p{ margin:0;font-size:.86rem;line-height:1.8;color:var(--ps-text-mute);word-break:keep-all; }

/* ---------------- 25-H. 반응형 ---------------- */
@media (max-width:1080px){
  .fq-layout,.ct-layout,.nt-layout,.sp-layout{ grid-template-columns:1fr; }
  .fq-side,.sp-toc{ position:static; }
  .fq-top-l{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .sp-help{ grid-template-columns:1fr;gap:16px; }
}
@media (max-width:860px){
  .gd-feats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ct-types{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .sp-princ{ grid-template-columns:1fr; }
  .sp-flow,.ct-steps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:768px){
  .sp-hero{ padding:38px 0 44px; }
  .sp-hero h1{ font-size:1.72rem; }
  .gd-hero h1{ font-size:1.62rem; }
  .sp-hero p{ font-size:.88rem; }
  .sp-wrap{ padding:20px 0 44px; }
  .sp-body{ padding:20px 18px; }
  .gd-step{ grid-template-columns:auto minmax(0,1fr);gap:12px;padding:16px; }
  .gd-step .ic{ display:none; }
  .gd-step .go{ grid-column:1 / -1;justify-self:stretch;text-align:center; }
  .gd-cta{ grid-template-columns:1fr;text-align:center; }
  .gd-cta-a{ justify-content:center; }
  .fq-top-l{ grid-template-columns:1fr; }
  .fq-q{ grid-template-columns:auto minmax(0,1fr) auto;padding:14px; }
  .fq-q .tag{ display:none; }
  .fq-a{ padding:0 14px 16px 34px; }
  .ct-card{ padding:18px 16px; }
  .ct-row{ grid-template-columns:1fr; }
  .ct-card-h{ grid-template-columns:auto minmax(0,1fr); }
  .ct-card-h .safe{ display:none; }
  .nt-table{ display:block;border:0;background:none; }
  .nt-table thead{ display:none; }
  .nt-table tbody{ display:grid;gap:10px; }
  .nt-table tr{
    display:grid;gap:6px;padding:15px 16px;border-radius:var(--ps-radius);
    background:#fff;border:1px solid var(--ps-line);
  }
  .nt-table td{ padding:0;border-bottom:0; }
  .nt-table .c-n{ display:none; }
  .nt-table .c-v{ text-align:left; }
  .nt-nav{ grid-template-columns:1fr; }
  .sp-meta{ justify-content:flex-start; }
  .sp-foot{ grid-template-columns:1fr; }
}
@media (max-width:420px){
  .gd-feats{ grid-template-columns:1fr; }
  .ct-types{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sp-flow,.ct-steps{ grid-template-columns:1fr; }
}

@media print{
  .sp-hero,.sp-toc,.sp-foot,.sp-help,.site-header,.site-footer,.bottom-nav{ display:none !important; }
  .sp-layout{ grid-template-columns:1fr; }
  .sp-body{ border:0;box-shadow:none;padding:0; }
}

/* 모바일에서는 단계 번호를 제목 옆 위쪽에 둡니다 */
@media (max-width:768px){
  .gd-step{ align-items:start; }
  .gd-step .n{ margin-top:2px;width:34px;height:34px;font-size:.8rem; }
}


/* =====================================================================
   26. 관리자 시스템  (PHASE 14)
   ---------------------------------------------------------------------
   · 고객 화면과 분리된 운영자용 화면입니다.
   · 시안이 따로 없어 PURPLE SAJU 토큰을 그대로 쓰되,
     정보 밀도를 우선한 배치로 만들었습니다.
   ===================================================================== */

.ad-body{ background:#F7F5FB; }

/* ---------------- 로그인 ---------------- */
.ad-gate{
  position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:24px;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(120,64,210,.45) 0%, rgba(16,8,40,0) 60%),
    linear-gradient(180deg,#120830 0%,#1D0E45 100%);
}
.ad-gate-card{
  width:100%;max-width:380px;padding:30px 28px;border-radius:var(--ps-radius);
  background:rgba(255,255,255,.06);border:1px solid rgba(232,200,119,.28);
  backdrop-filter:blur(6px);color:#fff;
}
.ad-gate-card h1{
  margin:0 0 4px;font-family:var(--font-title);font-size:1.3rem;letter-spacing:.05em;text-align:center;
  background:var(--ps-grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.ad-gate-card .sub{ text-align:center;font-size:.82rem;color:rgba(255,255,255,.6);margin:0 0 22px; }
.ad-gate-card label{ display:block;margin-bottom:14px; }
.ad-gate-card span{ display:block;font-size:.8rem;color:rgba(255,255,255,.72);margin-bottom:6px; }
.ad-gate-card input{
  width:100%;padding:12px 14px;border-radius:var(--ps-radius-sm);box-sizing:border-box;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.07);
  color:#fff;font-family:inherit;font-size:15px;
}
.ad-gate-card input:focus{ outline:none;border-color:var(--ps-gold);background:rgba(255,255,255,.12); }
.ad-gate-err{ min-height:1.2em;margin:12px 0 0;font-size:.82rem;color:#FFB4A2;text-align:center; }
.ad-gate-note{
  margin:20px 0 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);
  font-size:.75rem;line-height:1.7;color:rgba(255,255,255,.5);text-align:center;word-break:keep-all;
}

/* ---------------- 뼈대 ---------------- */
.ad{ display:grid;grid-template-columns:224px minmax(0,1fr);min-height:100vh; }
.ad-side{
  background:linear-gradient(180deg,#170B39 0%,#221052 100%);
  border-right:1px solid rgba(232,200,119,.16);padding:22px 14px;
  display:flex;flex-direction:column;gap:4px;
}
.ad-brand{
  display:flex;align-items:center;gap:9px;padding:6px 10px 18px;color:#fff;text-decoration:none;
}
.ad-brand b{ font-family:var(--font-title);font-size:.98rem;letter-spacing:.04em; }
.ad-brand em{
  font-style:normal;font-size:.68rem;padding:2px 7px;border-radius:999px;
  background:rgba(232,200,119,.18);color:var(--ps-gold-soft);
}
.ad-nav{ display:grid;gap:2px; }
.ad-nav button{
  width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;
  padding:10px 12px;border:0;border-radius:var(--ps-radius-sm);background:none;
  font-family:inherit;font-size:.87rem;color:rgba(255,255,255,.72);text-align:left;cursor:pointer;
}
.ad-nav button:hover{ background:rgba(255,255,255,.07);color:#fff; }
.ad-nav button.is-on{ background:rgba(232,200,119,.16);color:#fff;font-weight:700; }
.ad-nav svg{ color:var(--ps-gold-soft); }
.ad-nav .n{
  min-width:20px;height:20px;padding:0 6px;border-radius:999px;display:grid;place-items:center;
  background:var(--ps-purple-500);color:#fff;font-size:.68rem;font-weight:800;
}
.ad-side-foot{ margin-top:auto;display:grid;gap:2px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1); }
.ad-side-foot a,.ad-side-foot button{
  display:block;width:100%;padding:9px 12px;border:0;border-radius:var(--ps-radius-sm);background:none;
  font-family:inherit;font-size:.82rem;color:rgba(255,255,255,.6);text-align:left;text-decoration:none;cursor:pointer;
}
.ad-side-foot a:hover{ color:#fff; }
.ad-side-foot button:hover{ color:#FFB4A2; }
.ad-who{ padding:10px 12px;font-size:.74rem;line-height:1.6;color:rgba(255,255,255,.45);word-break:break-all; }

.ad-main{ padding:26px 30px 60px;min-width:0; }
.ad-head{ display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px; }
.ad-head h1{ margin:0 0 4px;font-family:var(--font-title);font-size:1.5rem;color:var(--ps-text); }
.ad-head p{ margin:0;font-size:.84rem;color:var(--ps-text-mute); }
.ad-head-a{ display:flex;gap:8px;flex-wrap:wrap; }

/* ---------------- 카드 · 표 ---------------- */
.ad-card{
  padding:20px 22px;margin-bottom:16px;border-radius:var(--ps-radius);
  background:#fff;border:1px solid var(--ps-line);box-shadow:var(--ps-shadow-sm);
}
.ad-card-h{ display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px; }
.ad-card-h h2{ margin:0;font-family:var(--font-title);font-size:1.04rem;color:var(--ps-text); }
.ad-card-h .sub{ font-size:.78rem;color:var(--ps-text-mute); }

.ad-kpis{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px; }
.ad-kpi{
  padding:16px 18px;border-radius:var(--ps-radius);
  background:#fff;border:1px solid var(--ps-line);box-shadow:var(--ps-shadow-sm);
}
.ad-kpi b{ display:block;font-size:.79rem;color:var(--ps-text-mute);font-weight:600;margin-bottom:6px; }
.ad-kpi strong{ font-family:var(--font-title);font-size:1.5rem;color:var(--ps-text);font-weight:800; }
.ad-kpi strong em{ font-style:normal;font-size:.9rem;color:var(--ps-text-mute);margin-left:3px; }
.ad-kpi .d{ display:block;margin-top:5px;font-size:.75rem;color:var(--ps-text-mute); }
.ad-kpi.is-warn{ border-color:#F0DCA8;background:#FFFCF4; }
.ad-kpi.is-warn strong{ color:#8A6A12; }

.ad-tablewrap{ overflow-x:auto; }
.ad-table{ width:100%;border-collapse:collapse;min-width:720px; }
.ad-table th{
  padding:10px 12px;text-align:left;white-space:nowrap;
  background:#F6F0FF;color:var(--ps-purple-600);font-size:.78rem;font-weight:700;
  border-bottom:1px solid var(--ps-line);position:sticky;top:0;
}
.ad-table td{
  padding:11px 12px;font-size:.83rem;color:var(--ps-text-soft);
  border-bottom:1px solid var(--ps-line);vertical-align:middle;
}
.ad-table tr:last-child td{ border-bottom:0; }
.ad-table tr:hover td{ background:#FBF9FF; }
.ad-table .mono{ font-family:var(--font-title);font-size:.79rem;letter-spacing:.02em;color:var(--ps-text); }
.ad-table .num{ text-align:right;font-family:var(--font-title);font-weight:700;color:var(--ps-text);white-space:nowrap; }
.ad-table .act{ white-space:nowrap;text-align:right; }
.ad-table .act .btn{ margin-left:5px; }

.ad-badge{
  display:inline-block;padding:2px 9px;border-radius:999px;
  font-size:.72rem;font-weight:700;white-space:nowrap;
}
.ad-b-wait{ background:#EDEEF7;color:#5B6088; }
.ad-b-paid{ background:#E6F4EE;color:#2E7D5B; }
.ad-b-work{ background:#FFF3D8;color:#8A6A12; }
.ad-b-off { background:#F1EFF5;color:#6B6880; }
.ad-b-fail{ background:#FDECE8;color:#A3402C; }

.ad-empty{
  padding:40px 20px;text-align:center;border-radius:var(--ps-radius);
  background:#FBF9FF;border:1px dashed var(--ps-line);
  font-size:.87rem;color:var(--ps-text-mute);
}

.ad-tabs{ display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px; }

/* ---------------- 폼 ---------------- */
.ad-form{ display:grid;gap:14px;max-width:640px; }
.ad-f{ display:grid;gap:5px; }
.ad-f > label{ font-size:.82rem;font-weight:700;color:var(--ps-text); }
.ad-f input,.ad-f textarea,.ad-f select{
  width:100%;padding:10px 13px;border-radius:var(--ps-radius-sm);box-sizing:border-box;
  border:1px solid var(--ps-line);background:#fff;
  font-family:inherit;font-size:.87rem;color:var(--ps-text);
}
.ad-f textarea{ line-height:1.75;resize:vertical;min-height:120px; }
.ad-f input:focus,.ad-f textarea:focus,.ad-f select:focus{
  outline:none;border-color:var(--ps-purple-400);box-shadow:0 0 0 3px var(--ps-purple-100);
}
.ad-f em{ font-style:normal;font-size:.75rem;color:var(--ps-text-mute); }
.ad-f2{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px; }
.ad-msg{ font-size:.82rem;color:var(--ok);min-height:1.2em; }
.ad-msg.is-err{ color:var(--danger); }

.ad-note{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;
  padding:13px 15px;margin-bottom:16px;border-radius:var(--ps-radius-sm);
  background:#FFF9EC;border:1px solid #F0DCA8;
  font-size:.82rem;line-height:1.7;color:#7A5C10;word-break:keep-all;
}
.ad-note svg{ color:#B08810;margin-top:2px; }

.ad-sec{
  padding:12px 14px;border-radius:var(--ps-radius-sm);margin-bottom:16px;
  background:#F1FBF6;border:1px solid #BEE3D0;
  font-size:.82rem;line-height:1.7;color:#2E7D5B;word-break:keep-all;
}

/* 감사 기록 */
.ad-audit{ list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--ps-line); }
.ad-audit li{
  display:grid;grid-template-columns:132px 150px 110px minmax(0,1fr);gap:12px;align-items:center;
  padding:10px 12px;background:#fff;font-size:.8rem;color:var(--ps-text-soft);
}
.ad-audit .t{ color:var(--ps-text-mute);font-size:.76rem; }
.ad-audit .who{ color:var(--ps-text);word-break:break-all; }
.ad-audit .what{ font-weight:700;color:var(--ps-purple-600); }

/* ---------------- 반응형 ---------------- */
@media (max-width:1080px){
  .ad-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:860px){
  .ad{ grid-template-columns:1fr; }
  .ad-side{ flex-direction:row;align-items:center;gap:6px;overflow-x:auto;padding:12px; }
  .ad-brand{ padding:0 10px 0 4px;white-space:nowrap; }
  .ad-nav{ display:flex;gap:4px; }
  .ad-nav button{ white-space:nowrap;grid-template-columns:auto auto; }
  .ad-nav button span:not(.n){ display:none; }
  .ad-nav button.is-on span:not(.n){ display:inline; }
  .ad-side-foot{ margin:0;padding:0;border:0;display:flex; }
  .ad-who{ display:none; }
  .ad-main{ padding:18px 14px 50px; }
  .ad-f2{ grid-template-columns:1fr; }
  .ad-audit li{ grid-template-columns:1fr;gap:3px; }
}
@media (max-width:520px){
  .ad-kpis{ grid-template-columns:1fr; }
}

/* =====================================================================
   입력칸 마무리 (2026-09-06)
   ---------------------------------------------------------------------
   ① 회원가입 입력칸 안쪽에 그림자가 겹쳐 그려지던 문제
      .au-input 은 「바깥 상자 + 아이콘 + 안쪽 input」 구조입니다.
      전역 규칙 input:focus 의 box-shadow 가 안쪽 input 에도 걸려,
      아이콘과 입력 영역 사이에 보라색 세로 경계처럼 보였습니다.
      바깥 상자의 포커스 표시(.au-input:focus-within)는 그대로 둡니다.

   ② 브라우저 자동완성이 칠하는 배경
      Chrome·Edge 는 자동완성한 칸에 자체 배경을 칠합니다.
      background 로는 지워지지 않아 inset 그림자로 덮습니다.
      이메일·휴대전화만 색이 달라 보이던 원인입니다.
   ===================================================================== */

/* ① 안쪽 input 의 중복 그림자 제거 */
.au-input input:focus{ box-shadow:none; }

/* ② 자동완성 배경 통일 — 회원가입/로그인 폼 */
.au-input input:-webkit-autofill,
.au-input input:-webkit-autofill:hover,
.au-input input:-webkit-autofill:focus,
.au-input input:-webkit-autofill:active{
  -webkit-text-fill-color:var(--ps-text);
  -webkit-box-shadow:0 0 0 1000px #fff inset;
          box-shadow:0 0 0 1000px #fff inset;
  caret-color:var(--ps-text);
  transition:background-color 9999s ease-out 0s;
}

/* ② 자동완성 배경 통일 — 그 밖의 일반 입력 폼(무료사주 등) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color:var(--ps-text);
  -webkit-box-shadow:0 0 0 1000px var(--ps-white) inset;
          box-shadow:0 0 0 1000px var(--ps-white) inset;
  caret-color:var(--ps-text);
  transition:background-color 9999s ease-out 0s;
}

/* =====================================================================
   내 기본 사주정보 안내 줄 (2026-09-06)
   ---------------------------------------------------------------------
   로그인 회원에게만 폼 위에 얇게 붙습니다. 폼 자체는 건드리지 않습니다.
   ===================================================================== */
.psb-bar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:0 0 14px;padding:11px 14px;
  border:1px solid rgba(124,77,255,.18);
  border-radius:var(--ps-radius-input);
  background:linear-gradient(180deg,rgba(124,77,255,.055),rgba(124,77,255,.02));
  font-size:.86rem;line-height:1.6;color:var(--ps-text);
}
.psb-ic{ color:var(--ps-gold,#B08D3F);font-size:.9rem;flex:0 0 auto; }
.psb-msg{ flex:1 1 220px;min-width:0; }
.psb-act{ flex:0 0 auto; }
.psb-btn{
  border:1px solid rgba(124,77,255,.35);border-radius:999px;
  background:#fff;color:var(--ps-purple-600,#5B32B8);
  font:inherit;font-size:.82rem;padding:6px 14px;cursor:pointer;
  transition:background .16s,border-color .16s;
}
.psb-btn:hover{ background:rgba(124,77,255,.07);border-color:rgba(124,77,255,.55); }
.psb-btn:disabled{ opacity:.55;cursor:default; }
@media (max-width:520px){
  .psb-bar{ font-size:.82rem;padding:10px 12px; }
  .psb-act{ width:100%; }
  .psb-btn{ width:100%; }
}

/* MY PURPLE 상단 가입일 — 보조정보 (2026-09-06)
   값을 받지 못하면 [hidden] 으로 줄 자체가 나오지 않습니다. */
.mp-since{
  margin:8px 0 0;
  font-size:.76rem;letter-spacing:.04em;line-height:1.5;
  color:rgba(255,255,255,.62);
}
.mp-since::before{
  content:'✦';margin-right:6px;
  color:var(--ps-gold,#D9B86C);font-size:.72rem;
}
@media (max-width:640px){ .mp-since{ font-size:.72rem;margin-top:6px; } }

/* MY PURPLE 가입일 — 오른쪽 프로필 이름 아래 (2026-09-07)
   이름보다 작고 MY PURPLE 보다 눈에 덜 띄게 둡니다.
   값을 받지 못하면 [hidden] 이라 줄 자체가 나오지 않습니다. */
.mp-me .mp-since{
  display:block;
  margin:2px 0 1px;
  font-size:.7rem;letter-spacing:.02em;line-height:1.45;
  color:rgba(255,255,255,.56);
}
.mp-me .mp-since::before{
  content:'✦';margin-right:5px;
  color:var(--ps-gold,#D9B86C);font-size:.64rem;opacity:.9;
}
.mp-me .mp-since[hidden]{ display:none; }
@media (max-width:768px){
  .mp-me .mp-since{ font-size:.66rem;margin:1px 0 0; }
  /* 좁은 화면에서는 헤더가 밀리지 않도록 날짜만 남깁니다 */
  .mp-me .mp-since-l{ display:none; }
}