/*
 * Customer visual system
 * Three radii, two shadows, one primary action language.
 * Page-specific layouts stay intact; only their shared visual grammar is aligned.
 */
:root{
  --ds-radius-control:12px;
  --ds-radius-card:18px;
  --ds-radius-feature:28px;
  --ds-line:rgba(83,53,105,.13);
  --ds-line-strong:rgba(105,65,123,.22);
  --ds-surface:rgba(255,255,255,.82);
  --ds-surface-warm:rgba(255,252,246,.88);
  --ds-shadow-soft:0 12px 32px rgba(55,31,68,.055);
  --ds-shadow-raised:0 20px 52px rgba(55,31,68,.105);
  --ds-primary:#6c3e79;
  --ds-primary-hover:#5e316c;
  --ds-primary-gradient:linear-gradient(118deg,#663873 0%,#7c3aed 74%,#9366df 100%);
}

/* Controls and actions */
:where(
  .btn-p,.btn-s,.submit-btn,.ncta,.ncta-apply,.nav-apply-btn,.mob-apply-btn,
  .home-action-primary,.home-action-secondary,.cta-status-action,.process-closing-link,
  .safety-actions a,.event-cta,.faq-more,.product-guide .offer-button,
  .direction-v2-actions a,.direction-v2-actions button,.direction-v2-price button,
  .apply-nav-primary,.apply-nav-secondary,.relationship-test-page .primary,
  .relationship-test-page .secondary
){
  border-radius:var(--ds-radius-control);
}

:where(
  .btn-p,.submit-btn,.ncta,.ncta-apply,.nav-apply-btn,.mob-apply-btn,
  .home-action-primary,.cta-status-action,.process-closing-link,.safety-primary,
  .event-cta-primary,.apply-nav-primary
){
  border-color:transparent;
  background:var(--ds-primary-gradient);
  color:#fff;
  box-shadow:0 9px 22px rgba(91,48,119,.18);
}

:where(
  .btn-s,.home-action-secondary,.event-cta-quiet,.safety-secondary,.apply-nav-secondary
){
  border:1px solid var(--ds-line-strong);
  background:rgba(255,255,255,.74);
  color:#5d4d68;
  box-shadow:none;
}

@media(hover:hover) and (pointer:fine){
  :where(
    .btn-p,.submit-btn,.ncta,.ncta-apply,.nav-apply-btn,.mob-apply-btn,
    .home-action-primary,.cta-status-action,.process-closing-link,.safety-primary,
    .event-cta-primary,.apply-nav-primary
  ):hover{
    background:linear-gradient(118deg,#5e316c 0%,#6f35dc 74%,#895bd4 100%);
    box-shadow:0 12px 28px rgba(91,48,119,.22);
  }
}

/* General cards */
body[data-page='home'] :is(
  .home-couple-card,.kyeol-card,.pp-card,.pp-compare-card,.hnb-card,.home-report-inner
),
body[data-page='about'] :is(.about-image-break-card),
body[data-page='process'] :is(.step-verification),
body[data-page='pricing'] :is(.plan-card,.product-purchase-card),
body[data-page='events'] :is(.event-formula,.event-step,.event-note),
body[data-page='reviews'] :is(.cc,.kakao-review-card),
body[data-page='faq'] :is(.faq-wrap,.faq-empty),
body[data-page='safety'] :is(.safety-promise,.safety-principle,.safety-group,.safety-check-block),
body[data-page='apply'] :is(.apply-mobile-promise-card,.checklist-box,.fsec,.identity-gate,.intro-interview-card),
body[data-page$='.mypage'] :is(.my-card,.my-kyeol-card,.review-entry-card,.review-invite-banner-button){
  border-radius:var(--ds-radius-card);
  box-shadow:var(--ds-shadow-soft);
}

/* Large feature surfaces */
body[data-page='home'] :is(.home-verification-story,.pricing-philosophy,.definition-sec),
body[data-page='process'] :is(.process-factor-story,.match-preview-sec),
body[data-page='events'] :is(.event-hero,.event-how),
body[data-page='profile-direction'] :is(.direction-v2-hero,.direction-v2-editorial,.direction-v2-checkout),
body[data-page$='.apply'] :is(.apply-mobile-welcome),
body[data-page$='.mypage'] :is(.feedback-modal,.meeting-availability-card){
  border-radius:var(--ds-radius-feature);
}

body[data-page='process'] :is(.process-factor-story,.match-preview-sec),
body[data-page='events'] .event-hero,
body[data-page='profile-direction'] :is(.direction-v2-hero,.direction-v2-checkout){
  box-shadow:var(--ds-shadow-raised);
}

/* Pricing keeps product distinction, while sharing one action shape. */
body[data-page='pricing'] .product-guide :is(.plan-card,.plan-card.is-active,.plan-card.is-direction){
  border-radius:var(--ds-radius-card);
}
body[data-page='pricing'] .product-guide .plan-card.is-direction::before{
  border-radius:var(--ds-radius-card) var(--ds-radius-card) 0 0;
}
body[data-page='pricing'] .product-guide :is(.plan-card,.plan-card.is-active){
  box-shadow:var(--ds-shadow-soft);
}
body[data-page='pricing'] .product-guide .plan-card.is-active{
  box-shadow:var(--ds-shadow-raised);
}
body[data-page='pricing'] .product-guide :is(.plan-offer .offer-button,.is-active .plan-offer .offer-button){
  border-radius:var(--ds-radius-control);
  background:var(--ds-primary);
  box-shadow:0 9px 22px rgba(72,39,83,.14);
}
/* The consulting CTA is the only gold premium action. */
body[data-page='pricing'] .product-guide .is-direction .plan-offer .offer-button{
  border-radius:var(--ds-radius-control);
  background:linear-gradient(135deg,#efd57e,#c99e39);
  box-shadow:0 9px 22px rgba(161,119,25,.16);
}
body[data-page='pricing'] .product-guide .is-direction .plan-offer .offer-button.is-secondary-detail{
  border:0;
  background:transparent;
  box-shadow:none;
  color:#725712;
  text-decoration:underline;
  text-underline-offset:4px;
}

/* Matching sample: editorial card rather than a second, heavy app frame. */
body[data-page='process'] .match-phone{
  max-width:430px;
  padding:1px;
  border:1px solid rgba(103,64,120,.18);
  border-radius:var(--ds-radius-card);
  background:rgba(255,255,255,.86);
  box-shadow:0 14px 36px rgba(60,35,72,.08);
}
body[data-page='process'] .match-phone-screen{
  border-radius:calc(var(--ds-radius-card) - 2px);
  background:rgba(255,253,249,.96);
}
body[data-page='process'] .match-phone-top{
  background:rgba(255,255,255,.78);
}
body[data-page='process'] .preview-profile-hero{
  background:linear-gradient(180deg,rgba(246,240,255,.64),rgba(255,253,248,.72));
}
body[data-page='process'] .preview-avatar{
  border-radius:var(--ds-radius-control);
  box-shadow:none;
}
body[data-page='process'] .preview-actions span{
  border-radius:var(--ds-radius-control);
}
body[data-page='process'] .preview-actions .main{
  background:var(--ds-primary-gradient);
  box-shadow:0 8px 18px rgba(91,48,119,.14);
}

/* Image art direction: keep each photograph, apply one quiet plum editorial grade. */
body[data-page='about'] .about-cta{
  background:
    linear-gradient(180deg,rgba(30,9,56,.34),rgba(30,9,56,.76)),
    linear-gradient(90deg,rgba(73,35,88,.34),rgba(30,9,56,.08)),
    url('/static/images/mood_grass_about.webp') center 60%/cover no-repeat;
}
body[data-page='about'] .about-image-break-card::after{
  background:
    linear-gradient(90deg,rgba(45,22,59,.64) 0%,rgba(45,22,59,.24) 52%,rgba(45,22,59,.06) 100%),
    linear-gradient(180deg,rgba(30,9,56,.04),rgba(30,9,56,.2));
}
body[data-page='events'] .event-hero-visual,
body[data-page='profile-direction'] :is(.direction-v2-hero-art,.direction-v2-editorial){
  box-shadow:inset 0 0 0 1px rgba(77,45,91,.08);
}
body[data-page='events'] .event-hero-visual img,
body[data-page='profile-direction'] :is(.direction-v2-hero-art img,.direction-v2-editorial img){
  filter:saturate(.84) contrast(1.01) brightness(1.015);
}

/* Brand page titles use the editorial face; dense task UI stays Pretendard. */
body[data-page='safety'] .safety-hero .sec-title{
  font-family:'Gowun Batang',serif;
  font-weight:700;
  letter-spacing:-.8px;
}

/* Relationship report remains a sub-brand, but carries the main wordmark. */
.relationship-test-page .brand img{
  display:block;
  width:104px;
  height:32px;
  object-fit:contain;
}

/* Mobile notes: one readable editorial lead, followed by the compact shelf. */
@media(max-width:760px){
  body[data-page='notes'] .notes-grid>.note-tile:first-child{
    grid-column:1/-1;
    aspect-ratio:16/10;
    border-radius:var(--ds-radius-card);
  }
  body[data-page='notes'] .notes-grid>.note-tile:first-child .note-tile-copy{
    padding:24px 22px 21px;
  }
  body[data-page='notes'] .notes-grid>.note-tile:first-child strong{
    max-width:300px;
    font-size:20px;
    line-height:1.4;
  }
  body[data-page='notes'] .notes-grid>.note-tile:first-child .note-subtitle{
    display:-webkit-box;
    max-width:300px;
    font-size:11.5px;
  }
  body[data-page='notes'] .notes-grid>.note-tile:not(:first-child){
    border-radius:var(--ds-radius-control);
  }
  body[data-page='process'] .match-phone{
    border-radius:var(--ds-radius-card);
  }
  body[data-page='process'] .match-phone-screen{
    border-radius:calc(var(--ds-radius-card) - 2px);
  }
}

@media(prefers-reduced-motion:reduce){
  :where(.btn-p,.btn-s,.submit-btn,.event-cta,.offer-button){
    transition:none!important;
  }
}