/* 영케어러 설문 페이지
   톤: 크림 바탕 위 네이비 글자, 따뜻한 코랄 강조, 돌봄을 뜻하는 틸 보조색.
   글꼴: 원신한(Light 300 본문, Medium 500 라벨, Bold 700 제목). 파일이 없으면 시스템 글꼴로 내려간다. */

@font-face {
  font-family: "OneShinhan";
  src: url("../fonts/OneShinhanLight.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "OneShinhan";
  src: url("../fonts/OneShinhanMedium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "OneShinhan";
  src: url("../fonts/OneShinhanBold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --ink: #1f3a5f;
  --ink-soft: #3e4c5e;
  --muted: #5b6878;
  --coral: #d9573c;          /* 큰 제목 강조(대비 3.6) */
  --coral-strong: #c24e2d;   /* 버튼 바탕(흰 글자 대비 4.7) */
  --coral-press: #a9411f;
  --coral-ink: #b8472d;      /* 작은 글자 오류 안내(대비 4.9) */
  --teal: #2c7a67;
  --teal-ink: #23665a;       /* 연한 틸 바탕 위 작은 글자 */
  --teal-tint: #e6f0ec;
  --cream: #faf6ef;
  --paper: #ffffff;
  --hover: #f5f0e7;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --font: "OneShinhan", "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink-soft);
  font-family: var(--font);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.65;
  word-break: keep-all;          /* 한글 낱말 중간에서 줄이 끊기지 않게 */
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 상단 띠 ---------- */
.topbar {
  background: var(--ink);
  color: #fff;
  animation: fade 0.6s var(--ease-out) both;
}
.topbar__inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 2px 16px;
}
.topbar__brand { font-weight: 500; font-size: 13px; letter-spacing: 0.1em; }
.topbar__notice { font-size: 13px; opacity: 0.92; }

/* ---------- 본문 틀 ---------- */
.page {
  max-width: 720px;
  margin: 0 auto;
  padding: 44px 20px 72px;
  overflow-x: hidden;         /* clip을 모르는 iOS 15 이하용 대체값 */
  overflow-x: clip;           /* 장식 원이 화면 밖으로 나가도 가로 스크롤이 생기지 않게 */
}

/* ---------- 첫 화면 ---------- */
.hero { position: relative; }
.hero__motif {
  position: absolute;
  top: -40px;
  right: -36px;
  width: 132px;               /* 좁은 화면에서는 첫 줄 오른쪽 위에만 걸치게 작게 둔다 */
  z-index: 0;
  pointer-events: none;
}
.motif { transform-box: fill-box; transform-origin: center; animation: bloom 1.2s var(--ease-out) both; }
.motif--warm { fill: var(--coral); opacity: 0.14; animation-delay: 0.2s; }
.motif--ring { fill: none; stroke: var(--ink); stroke-width: 1.6; opacity: 0.2; animation-delay: 0.35s; }
.motif--dot { fill: var(--teal); opacity: 0.45; animation-delay: 0.6s; }

.hero__eyebrow,
.hero__title,
.hero__lead { position: relative; z-index: 1; }

.hero__eyebrow {
  margin: 0 0 12px;
  color: var(--teal-ink);
  font-weight: 500;
  font-size: 17px;
}
.hero__title {
  margin: 0;
  color: var(--ink);
  font-weight: 700;
  font-size: clamp(34px, 9.4vw, 54px);
  line-height: 1.24;
  letter-spacing: -0.02em;
}
.hero__line { display: block; }
.hero__accent { position: relative; color: var(--coral); white-space: nowrap; }
.hero__underline {
  position: absolute;
  left: -2px;
  bottom: -0.1em;
  width: calc(100% + 4px);
  height: 0.3em;
  overflow: visible;
}
.hero__underline path {
  fill: none;
  stroke: var(--coral);
  stroke-opacity: 0.45;
  stroke-width: 4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 0.9s 0.8s var(--ease-out) forwards;
}
.hero__lead {
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.75;
  text-wrap: pretty;          /* 마지막 줄에 낱말 하나만 남는 것을 줄인다 */
}
/* 좁은 화면에서는 두 문장을 이어 흘려야 줄 끝이 들쭉날쭉하지 않다 */
.hero__lead br { display: none; }

/* ---------- 체크 설문 ---------- */
.survey { margin-top: 36px; }

.survey__card {
  margin: 0;
  padding: 26px 12px 14px;
  min-width: 0;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 20px;
  box-shadow: 0 18px 40px -28px rgba(31, 58, 95, 0.45);
}
.survey__title {
  float: left;                   /* legend를 일반 블록처럼 다루는 방법 */
  width: 100%;
  margin: 0 0 14px;
  padding: 0 10px;
  color: var(--ink);
  font-weight: 700;
  font-size: 18px;
}
.checks { clear: both; list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }

.check {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 12px 10px;
  border-radius: 14px;
  cursor: pointer;
  transition: background-color 0.25s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.check:hover { background: var(--hover); }
.check:has(input:checked) { background: var(--teal-tint); }

/* 실제 체크박스는 화면에서만 감추고 키보드,스크린리더는 그대로 쓴다 */
.check input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.check__box {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 2px solid var(--teal);
  border-radius: 8px;
  background: var(--paper);
  transition: background-color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.check__box svg { width: 18px; height: 18px; }
.check__box path {
  fill: none;
  stroke: #fff;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.35s 0.05s var(--ease-out);
}
.check input:checked + .check__box {
  background: var(--teal);
  animation: pop 0.38s var(--ease-out);
}
.check input:checked + .check__box path { stroke-dashoffset: 0; }
/* 키보드 초점은 네모 칸에 불투명 테두리로 보인다(배경 대비 3:1 이상, 고대비 모드에서도 남는다) */
.check input:focus-visible + .check__box { outline: 2px solid var(--ink); outline-offset: 2px; }
.check__label { color: var(--ink-soft); font-size: 16px; line-height: 1.5; text-wrap: pretty; }
.check:has(input:checked) .check__label { color: var(--ink); }

/* ---------- 완료 버튼 ---------- */
.submit {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 58px;
  margin-top: 18px;
  border: 0;
  border-radius: 16px;
  background: var(--coral-strong);
  color: #fff;
  font: 500 18px/1 var(--font);
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 12px 24px -16px rgba(194, 78, 45, 0.9);
  transition: background-color 0.2s var(--ease-out), transform 0.15s var(--ease-out), box-shadow 0.2s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.submit:hover { background: var(--coral-press); box-shadow: 0 16px 28px -16px rgba(169, 65, 31, 0.95); }
.submit:active { transform: scale(0.98); }
.submit:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.submit__label, .submit__spinner { grid-area: 1 / 1; transition: opacity 0.2s; }
.submit__spinner {
  width: 22px;
  height: 22px;
  border: 2.5px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 50%;
  opacity: 0;
}
.submit[aria-busy="true"] { cursor: progress; }
.submit[aria-busy="true"] .submit__label { opacity: 0; }
.submit[aria-busy="true"] .submit__spinner { opacity: 1; animation: spin 0.8s linear infinite; }

.survey__error {
  margin: 12px 0 0;
  color: var(--coral-ink);
  font-weight: 500;
  font-size: 15px;
  text-align: center;
}

.survey__error:empty { margin: 0; }

/* 아무것도 고르지 않고 완료를 누르면 카드를 좌우로 짧게 흔들어 선택을 요청한다 */
.survey__card.is-nudged { animation: nudge 0.42s var(--ease-out); border-color: var(--coral-strong); }

/* ---------- 감사 화면 ---------- */
.survey__form.is-leaving { animation: leave 0.24s var(--ease-out) forwards; }

.thanks {
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: 52px 24px;
  background: var(--paper);
  border: 1.5px solid var(--teal);
  border-radius: 20px;
  text-align: center;
  outline: none;
  box-shadow: 0 18px 40px -28px rgba(44, 122, 103, 0.55);
}
.thanks[hidden] { display: none; }
.thanks.is-in { animation: arrive 0.6s var(--ease-out) both; }
.thanks__icon { width: 72px; height: 72px; }
.thanks__ring, .thanks__mark {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.thanks__ring { stroke: var(--teal); stroke-width: 3; }
.thanks__mark { stroke: var(--coral); stroke-width: 4; }
.thanks.is-in .thanks__ring { animation: draw 0.7s 0.15s var(--ease-out) forwards; }
.thanks.is-in .thanks__mark { animation: draw 0.45s 0.7s var(--ease-out) forwards; }
.thanks__title {
  margin: 0;
  color: var(--ink);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.45;
}

/* ---------- 4주 프로그램 ---------- */
.program { margin-top: 64px; }
.program__title {
  margin: 0 0 16px;
  color: var(--ink);
  font-weight: 700;
  font-size: 19px;
}
.weeks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.week {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 16px 20px;
  background: var(--teal-tint);
  border-radius: 16px;
}
.week__no { color: var(--teal-ink); font-weight: 500; font-size: 14px; }
.week__name { color: var(--ink); font-weight: 700; font-size: 16px; line-height: 1.4; }
.week__desc { color: var(--muted); font-size: 14px; line-height: 1.55; }

/* ---------- 마무리 문구 ---------- */
.closing {
  margin: 64px 0 0;
  color: var(--ink);
  font-weight: 700;
  font-size: clamp(22px, 5.8vw, 30px);
  line-height: 1.4;
  text-align: center;
  letter-spacing: -0.01em;
}
.closing__accent {
  color: var(--coral);
  /* 형광펜 자국. 등장할 때 왼쪽에서 오른쪽으로 칠해진다 */
  background: linear-gradient(transparent 64%, rgba(217, 87, 60, 0.2) 64%) no-repeat left / 0% 100%;
  transition: background-size 0.8s 0.35s var(--ease-out);
}
.closing.is-in .closing__accent,
html:not(.js) .closing__accent { background-size: 100% 100%; }

/* ---------- 반응형 ----------
   기준은 화면 폭이 아니라 .yc 틀의 폭이다(컨테이너 쿼리). 캔버스 아트보드와 실제 화면이 같은 규칙으로 바뀐다.
   640 미만 : 모바일 1단
   640~1023 : 태블릿 1단, 프로그램 4칸
   1024 이상 : 데스크톱 2단(왼쪽 제목, 오른쪽 체크 카드) */
.yc { container: yc / inline-size; }

@container yc (min-width: 640px) {
  .topbar__inner { padding: 16px 32px; }
  .topbar__brand, .topbar__notice { font-size: 14px; }
  .page { padding: 64px 32px 96px; }
  .hero__motif { width: 220px; top: -30px; right: -36px; }
  .hero__lead { font-size: 17px; }
  .hero__lead br { display: inline; }
  .survey { margin-top: 44px; }
  .survey__card { padding: 30px 26px 22px; }
  .weeks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .closing { margin-top: 80px; }
}

@container yc (min-width: 1024px) {
  .topbar__inner, .page { max-width: 1120px; }
  .topbar__inner { padding: 18px 40px; }
  .page { padding: 80px 40px 112px; }
  .intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 440px);
    align-items: center;
    gap: 56px;
  }
  .hero { padding-bottom: 8px; }
  .hero__motif { width: 240px; top: -96px; right: 0; }   /* 제목 위 빈 공간으로 올려 글자와 겹치지 않게 */
  .hero__title { font-size: 50px; }
  .hero__lead { font-size: 18px; }
  .survey { margin-top: 0; }
  .program { margin-top: 96px; }
  .weeks { gap: 16px; }
  .week { padding: 24px 22px 26px; gap: 8px; }
  .week__no { font-size: 15px; }
  .week__name { font-size: 18px; }
  .week__desc { font-size: 15px; }
  .closing { margin-top: 96px; font-size: 32px; }
}

@media (hover: hover) {
  .week { transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out); }
  .week:hover { transform: translateY(-3px); box-shadow: 0 14px 26px -20px rgba(31, 58, 95, 0.5); }
}

/* ---------- 움직임 ---------- */
.anim { animation: rise 0.8s var(--ease-out) both; animation-delay: var(--d, 0ms); }

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js .reveal.is-in { opacity: 1; transform: none; }
/* 마우스 올림 효과와 등장 효과가 transform을 같이 쓰므로, 등장이 끝난 뒤에는 지연 없이 반응하게 한다 */
.js .week.reveal.is-in:hover { transition-delay: 0ms; }

@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bloom { from { opacity: 0; transform: scale(0.6); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { 0% { transform: scale(0.82); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes nudge { 0%, 100% { transform: none; } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }
@keyframes leave { to { opacity: 0; transform: translateY(-8px) scale(0.98); } }
@keyframes arrive { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }

/* 움직임 줄이기를 켠 사용자에게는 효과 없이 최종 상태만 보여준다 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .submit[aria-busy="true"] .submit__spinner { animation: spin 0.8s linear infinite !important; animation-duration: 0.8s !important; animation-iteration-count: infinite !important; }
}