:root{
  --page-gutter:clamp(20px,4.2vw,64px);
  --section-space:clamp(48px,7vw,96px);
  --content-wide:1180px;
  --content-reading:760px;
  --type-display:clamp(34px,5vw,66px);
  --type-section:clamp(24px,3vw,36px);
  --motion-fast:180ms;
  --motion-base:260ms;
  --motion-brand:480ms;
  --motion-ease:cubic-bezier(.2,.72,.2,1);
}

html{min-width:320px}
body{min-width:320px}
img,video,svg{max-width:100%}
:where(main,section,article,aside,div){min-width:0}
:where(.sec,.dark-inner,.promise-inner,.trust-inner,.notes-page,.note-article){width:min(100%,var(--content-wide))}
:where(button,a,input,select,textarea,summary){-webkit-tap-highlight-color:transparent}

/* 버튼은 마우스에서는 가볍게 뜨고, 터치에서는 눌린 감각만 남긴다. */
:where(.btn-p,.btn-s,.submit-btn,.ncta,.ncta-apply,.nav-apply-btn,.mob-apply-btn,.price-cta,.home-action-primary,.home-action-secondary,.cta-status-action){
  transition:transform var(--motion-fast) ease,box-shadow var(--motion-fast) ease,background-color var(--motion-fast) ease,border-color var(--motion-fast) ease;
  transform-origin:center;
}
:where(button,a,[role="button"]):active{transform:scale(.985)}
@media(hover:hover) and (pointer:fine){
  :where(.btn-p,.submit-btn,.ncta,.ncta-apply,.nav-apply-btn,.price-cta,.home-action-primary):hover{transform:translateY(-2px)}
  :where(.note-tile,.cc,.include-card,.promise-card,.safety-card){transition:transform var(--motion-base) var(--motion-ease),box-shadow var(--motion-base) ease,border-color var(--motion-base) ease}
  :where(.note-tile,.cc,.include-card,.promise-card,.safety-card):hover{transform:translateY(-3px)}
}

/* 공통 스크롤 등장. JS가 준비된 경우에만 숨겨 접근성과 무스크립트 표시를 보존한다. */
.motion-ready .motion-reveal{opacity:0;transform:translateY(14px)}
.motion-ready .motion-reveal.is-visible{
  opacity:1;transform:none;
  transition:opacity var(--motion-brand) ease,transform var(--motion-brand) var(--motion-ease);
  transition-delay:min(calc(var(--motion-order,0) * 32ms),96ms);
}
.motion-ready .motion-stagger > *{opacity:0;transform:translateY(10px)}
.motion-ready .motion-stagger.is-visible > *{
  opacity:1;transform:none;
  transition:opacity 520ms ease,transform 520ms var(--motion-ease);
  transition-delay:min(calc(var(--motion-child,0) * 45ms),150ms);
}

/* 핵심 제목과 마지막 행동은 스크롤 관찰을 기다리지 않고 바로 읽히게 한다. */
.motion-ready :is(.hero-full,.price-hero,.safety-hero,.notes-header,.process-head,.cta-sec,.process-closing-cta).motion-reveal{
  opacity:1;
  transform:none;
}

/* 메뉴는 갑자기 나타나지 않고 상단 아래에서 차분하게 열린다. */
@media(max-width:1120px){
  .site-nav{height:60px;padding-inline:clamp(16px,3vw,28px)}
  .site-nav .nav-links{display:none}
  .site-nav .ham{display:flex;width:44px;height:44px;align-items:center;justify-content:center;padding:10px;margin-right:-8px}
  .mob-menu{
    display:flex;visibility:hidden;opacity:0;pointer-events:none;
    transform:translateY(-10px);transition:opacity 220ms ease,transform 280ms var(--motion-ease),visibility 0s linear 280ms;
  }
  .mob-menu.open{visibility:visible;opacity:1;pointer-events:auto;transform:none;transition-delay:0s}
  .mob-menu .mob-nl{opacity:0;transform:translateY(-5px)}
  .mob-menu.open .mob-nl{opacity:1;transform:none;transition:opacity 240ms ease,transform 280ms var(--motion-ease);transition-delay:calc(var(--menu-order,0) * 32ms + 45ms)}
}

/* 태블릿: 모바일로 급격히 접히기 전, 카드와 이미지가 숨 쉴 중간 레이아웃. */
@media(min-width:768px) and (max-width:1023px){
  :root{--page-gutter:clamp(28px,5vw,48px);--section-space:clamp(56px,7vw,76px)}
  .home-couple-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .home-couple-card{min-height:300px}
  .promise-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .include-grid{gap:12px}
  .about-hero{grid-template-columns:minmax(0,1fr) minmax(340px,.92fr)}
  .about-hero-copy{padding-inline:clamp(32px,5vw,54px)}
  .hnb-card{grid-template-columns:260px minmax(0,1fr) 60px}
  .hnb-copy{padding-inline:28px}
  .notes-page,.note-article{padding-inline:var(--page-gutter)}
}

/* 작은 노트북: 헤더 잘림을 막고 네 칸 콘텐츠의 밀도만 살짝 낮춘다. */
@media(min-width:1024px) and (max-width:1279px){
  :root{--page-gutter:clamp(32px,4vw,52px)}
  .home-couple-grid{gap:12px}
  .home-couple-card{min-height:285px}
  .site-nav{padding-inline:24px}
}

/* 모바일 공통 */
@media(max-width:767px){
  :root{
    --page-gutter:clamp(16px,5.2vw,24px);
    --section-space:clamp(42px,12vw,64px);
    --type-display:clamp(32px,10vw,48px);
    --type-section:clamp(22px,7vw,29px);
  }
  body{font-size:14px}
  .logo img{width:126px;height:38px}
  :where(.sec,.dark-sec,.promise-banner,.trust-sec){padding-inline:var(--page-gutter)}
  :where(.sec-title,.promise-title,.about-title){font-size:var(--type-section)}
  :where(.btn-p,.btn-s,.submit-btn,.price-cta,.mob-apply-btn,.cta-status-action){min-height:48px}
  #toast-container{left:var(--page-gutter);right:var(--page-gutter);bottom:calc(18px + env(safe-area-inset-bottom))}
  .toast{width:100%;max-width:none}
  .mob-menu{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
  .kyul-moment{top:auto;bottom:calc(24px + env(safe-area-inset-bottom));padding:18px 18px 16px}
  .faq-guide{align-items:flex-start;flex-direction:column;gap:3px}
  .safety-actions{display:grid;grid-template-columns:1fr}
  .safety-actions a{width:100%;min-height:48px}
  .mypage-support-trigger{flex:0 0 auto;white-space:nowrap;padding-inline:12px}
  .note-body{font-size:clamp(15px,4.2vw,17px)}
}

/* 작은 모바일 */
@media(max-width:479px){
  :root{--page-gutter:clamp(16px,4.8vw,20px)}
  .three-col{grid-template-columns:1fr!important}
  .stats-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .faq-cat{min-height:44px}
  .note-related .notes-grid{grid-template-columns:1fr}
}

@media(max-width:359px){
  :root{--page-gutter:14px}
  .logo img{width:116px}
  .site-nav{padding-inline:14px}
  .mob-menu{padding-inline:16px}
  .mob-nl{grid-template-columns:36px minmax(0,1fr) 14px;gap:9px}
}

/* 넓은 화면에서도 콘텐츠가 과하게 벌어지지 않는다. */
@media(min-width:1280px){
  .site-nav{padding-inline:max(28px,calc((100vw - 1440px)/2 + 28px))}
}

@media(prefers-reduced-motion:reduce){
  .motion-ready .motion-reveal,.motion-ready .motion-stagger > *{opacity:1!important;transform:none!important}
  .mob-menu,.mob-menu .mob-nl{transition:none!important}
  :where(button,a,[role="button"]):active{transform:none!important}
}