/* ============================================================
   치코 AI — 레이아웃과 컴포넌트
   색·글꼴·여백을 바꾸려면 tokens.css 를 보세요.
   ============================================================ */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600&display=swap');
@import url('./tokens.css');

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

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--surface-dark);
  font-family: var(--font-text);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;

  /* 한글은 기본값이면 단어 중간에서 끊긴다("않은" → "않"/"은").
     keep-all 은 띄어쓰기에서만 줄을 바꾼다. 좁은 화면에서 특히 중요. */
  word-break: keep-all;
  overflow-wrap: break-word;   /* 긴 URL 등 띄어쓰기 없는 문자열 보호 */
}

p { margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
input, textarea, select { color-scheme: light; }
input::placeholder, textarea::placeholder { color: var(--text-tertiary); opacity: 1; }

/* 스크롤바 숨김 */
.noscrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.noscrollbar::-webkit-scrollbar { display: none; }

/* 키보드 사용자에게만 초점 링 */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- 애니메이션 ---------- */
@keyframes cheekoRise  { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes cheekoFade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes cheekoDrift { 0%, 100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-4%,-3%,0) scale(1.08); } }
@keyframes cheekoBob   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* 등장 애니메이션은 붙이지 않는다.
   opacity:0 에서 시작하는 등장 효과는 애니메이션이 어떤 이유로든 실행되지 않으면
   본문이 영구히 사라진다. 제공 서비스 카드 3개에 그 방식이 걸려 있어 제거했다.
   ponytail: 효과를 되살리려면 opacity 를 건드리지 말고 transform 만 움직인다
   (그러면 실행되지 않아도 글은 읽힌다). */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .scroll { scroll-behavior: auto; }
}

/* ============================================================
   페이지 골격
   ============================================================ */

.page {
  width: 100%;
  max-width: var(--column-max);
  margin: 0 auto;
  position: relative;
  height: 100vh;
  height: 100dvh;          /* 모바일 브라우저 주소창 높이 보정 */
  overflow: hidden;
  background: var(--surface-dark);
}

/* 헤더 글자를 지키는 부드러운 상단 그림자.
   헤더 배경(흰 띠)을 없애자 P6 활동에서 대비가 3.50 으로 떨어졌다(기준 4.5).
   경계선 있는 띠 대신 120px 에 걸쳐 사라지는 그라디언트라 '띠'로 보이지 않는다.
   z-index 55 = 내용 위, 헤더(60) 아래. */
.page::before{
  content:'';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 120px;
  z-index: 55;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.13) 52%, transparent 100%);
}

/* 데스크톱: 칼럼 좌우에 경계선을 얇게 넣어 의도된 레이아웃으로 보이게 */
@media (min-width: 900px) {
  body { background: #0d0f13; }
  .page { box-shadow: 0 0 0 1px rgba(255,255,255,.06); }
}

/* ---------- 헤더 ---------- */
.header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 60;
  height: 58px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 항상 투명. 스크롤해도 흰 띠가 생기지 않는다.
     흐림(backdrop-filter)도 뺐다 — 배경이 투명해도 흐린 띠가 보여 답답했다.
     글자는 항상 흰색으로 두므로 색 전환 규칙도 함께 없앴다. */
  background: transparent;
}

.brand {
  background: none; border: none; padding: 0;
  cursor: pointer;
  /* 누르는 영역 44px 확보. 글자는 가운데 정렬이라 보이는 위치는 그대로. */
  min-height: 44px;
  display: flex; align-items: center; gap: 7px;
  font: inherit;
  font-size: 19px;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  color: var(--on-dark-strong);
}

.header__actions { display: flex; align-items: center; gap: 10px; }

.hamburger {
  width: 44px; height: 44px;   /* 38 → 44. 배경이 없어 커져도 눈에 안 보인다 */
  display: flex; flex-direction: column;
  justify-content: center; align-items: center; gap: 5px;
  background: none; border: none; cursor: pointer;
}
.hamburger span {
  display: block;
  width: 20px; height: 1.5px;
  background: var(--on-dark-strong);
}

/* ---------- 버튼 ---------- */
.btn {
  font: inherit;
  font-weight: var(--weight-medium);
  border-radius: var(--radius-control);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--duration), color var(--duration), border-color var(--duration);
}
.btn--primary {
  border: none;
  background: var(--accent);
  color: #fff;
}
.btn--primary:hover { background: var(--accent-hover); }

.btn--ghost {
  border: 1px solid var(--on-dark-border);
  background: var(--on-dark-fill-strong);
  color: var(--on-dark-strong);
}
.btn--ghost:hover { background: var(--on-dark-fill-hover); text-decoration: none; color: var(--on-dark-strong); }

.btn--sm    { height: 36px; padding: 0 14px; font-size: 12.5px; position: relative; }
/* 보이는 버튼은 작게 유지하고 누르는 영역만 44px 로 넓힌다(36+4+4). */
.btn--sm::after { content: ''; position: absolute; inset: -4px -2px; }
.btn--block { width: 100%; height: 50px; font-size: 15px; }
.btn--tall  { width: 100%; height: 52px; font-size: 16px; }

/* ---------- 전체화면 메뉴 ---------- */
.menu {
  position: fixed; inset: 0;
  z-index: 90;
  background: var(--surface-dark);
  display: flex; flex-direction: column;
  animation: cheekoRise .3s ease;
}
.menu__bar {
  max-width: var(--column-max); width: 100%; margin: 0 auto;
  height: 58px; padding: 0 20px;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
  font-size: 19px; font-weight: var(--weight-semibold);
  color: var(--on-dark-strong);
}
.menu__nav {
  max-width: var(--column-max); width: 100%; margin: 0 auto;
  padding: 20px;
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.menu__item {
  /* button 은 display:flex 만으로는 폭이 늘어나지 않는다(내용 크기에 맞춰짐).
     이게 없으면 밑줄이 글자 뒤에서 끊기고 › 가 오른쪽 끝으로 가지 않는다. */
  width: 100%;
  text-align: left;
  background: none; border: none;
  border-bottom: 1px solid rgba(255,255,255,.09);
  padding: 17px 0;
  color: var(--on-dark-strong);
  font: inherit; font-size: 21px; font-weight: var(--weight-medium);
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  transition: color var(--duration);
}
.menu__item:hover { color: var(--eyebrow); }
.menu__item .chev { color: rgba(255,255,255,.35); font-size: 15px; }
.menu__cta { margin-top: 24px; }

.iconbtn {
  background: none; border: none;
  cursor: pointer;
  line-height: 1;
  /* × 닫기 버튼이 24x27 이라 누르기 어려웠다 */
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-tertiary);
  transition: color var(--duration);
}
.iconbtn:hover { color: var(--text-heading); }
.iconbtn--onDark { color: var(--on-dark-strong); font-size: 26px; width: 44px; height: 44px; }
.iconbtn--lg { font-size: 24px; }

/* ============================================================
   페이지 스크롤 · 섹션
   ============================================================ */

.scroll {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y proximity;
  scroll-behavior: smooth;
}

.sec {
  scroll-snap-align: start;
  position: relative;
  /* height 를 고정하면 내용이 화면보다 크면 잘린다(P2 제공서비스가 38px 넘쳤다).
     min-height 로 두면 내용 많은 섹션만 늘어나고 나머지는 한 화면에 딱 맞는다. */
  min-height: 100%;
  overflow: hidden;
  background: var(--surface-dark);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 96px var(--page-pad) 40px;
}
.sec--tall { padding-bottom: 0; }   /* 푸터가 자체 여백을 가진 마지막 섹션 */

.sec__bg { position: absolute; inset: 0; overflow: hidden; }
.sec__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  animation: cheekoFade 1s ease;
  background: var(--surface-dark);
}
.sec__scrim {
  position: absolute; inset: 0;
  /* 두 번째 정지점을 34%→44% 로 내렸다. 원본 34% 에서는 글자가 놓이는 18% 지점의
     농도가 0.36 밖에 안 돼서, 밝은 영상 위 12px 라벨이 WCAG AA 미달이었다
     (P4 3.94, P6 4.46 / 기준 4.5). 44% 로 내리면 그 지점이 0.41 이 되어 통과한다.
     영상 65프레임 실측 기준. 사진이 가장 선명한 구간이 조금 아래로 내려간다. */
  background: linear-gradient(180deg,
    rgba(23,26,32,.55) 0%,
    rgba(23,26,32,.20) 44%,
    rgba(23,26,32,.52) 70%,
    rgba(23,26,32,.92) 100%);
}
.sec__glow {
  position: absolute;
  width: 75%; height: 65%;
  filter: blur(28px);
  animation: cheekoDrift 16s ease-in-out infinite;
}
.sec__glow--tr { top: -10%; right: -15%; background: radial-gradient(circle at 60% 40%, rgba(62,106,225,.32), transparent 62%); }
.sec__glow--tl { top: -10%; left: -10%; width: 70%; height: 60%; background: radial-gradient(circle at 40% 40%, rgba(62,106,225,.40), transparent 62%); animation-duration: 14s; }

.sec__top, .sec__bottom, .sec__mid { position: relative; z-index: 2; }
.sec__top { animation: cheekoRise .7s ease; }

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.2em;
  font-weight: var(--weight-medium);
  color: var(--eyebrow);
  margin: 0 0 16px;
}
.hero .eyebrow { letter-spacing: 0.22em; margin-bottom: 18px; }

/* 영상이 깔린 섹션은 배경이 밝아서 --eyebrow 로는 12px 글자가 안 읽힌다.
   측정 결과 5개 섹션 전부 WCAG AA(4.5:1) 미달이었다. */
.eyebrow--onPhoto { color: var(--eyebrow-on-photo); }

.h1, .h2 {
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  color: var(--on-dark-strong);
  margin: 0;
  text-wrap: balance;
}
.h1 { font-size: 34px; line-height: 1.28; }
.h2 { font-size: 30px; line-height: 1.32; }
.h2--sm { font-size: 29px; }

.lead {
  font-size: 16px;
  line-height: 1.6;
  color: var(--on-dark-muted);
  margin: 0 0 22px;
  text-align: center;
}
.lead--sm { font-size: 15px; line-height: 1.55; }
.note { font-size: 13px; color: var(--on-dark-dim); margin: 16px 0 0; text-align: center; }

.stack { display: flex; flex-direction: column; gap: 10px; }

.scrollcue {
  display: flex; justify-content: center; margin-top: 20px;
  animation: cheekoBob 2.2s ease-in-out infinite;
  color: rgba(255,255,255,.4); font-size: 20px;
}

/* ---------- 서비스 카드 (P2) ---------- */
.cards { display: flex; flex-direction: column; gap: 10px; }
.card {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--on-dark-fill);
  border: 1px solid var(--on-dark-line);
  border-radius: var(--radius-card);
  padding: 16px;
}
.card__num { flex-shrink: 0; width: 20px; font-size: 13px; font-weight: var(--weight-semibold); color: var(--eyebrow); }
.card__title { font-size: 16px; font-weight: var(--weight-semibold); color: var(--on-dark-strong); margin: 0 0 6px; }
.card__desc { font-size: 13px; line-height: 1.65; color: rgba(255,255,255,.66); margin: 0; }

/* ---------- 신뢰 칩 ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-bottom: 20px; }
.chip {
  font-size: 12px;
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.1);
  border-radius: 20px;
  padding: 7px 13px;
}

/* ---------- 푸터 ---------- */
.footer {
  position: relative; z-index: 2;
  margin-top: 56px;
  /* 알약 버튼이 있던 자리 100px → 안전영역만 남김 */
  padding: 26px 0 calc(44px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--on-dark-line);
}
.footer__brand { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; }
.footer__brand b { font-size: 17px; font-weight: var(--weight-semibold); color: var(--on-dark-strong); }
.footer__brand span { font-size: 10px; letter-spacing: 0.28em; color: rgba(255,255,255,.5); }
.footer__links { display: flex; flex-wrap: wrap; gap: 0 18px; margin-bottom: 14px; }
.footer__links button {
  background: none; border: none; padding: 0;
  /* 48x15 였다. 줄 간격(gap) 을 없애고 버튼 자체 높이로 44px 를 만든다.
     짧은 단어("About")는 폭이 34px 라 min-width 도 함께 준다. 배경이 없어
     넓혀도 보이지 않고, 글자는 왼쪽 정렬이라 위치가 바뀌지 않는다. */
  min-height: 44px; min-width: 44px;
  display: inline-flex; align-items: center;
  color: rgba(255,255,255,.6);
  font: inherit; font-size: 12.5px;
  cursor: pointer;
  transition: color var(--duration);
}
.footer__links button:hover { color: var(--on-dark-strong); }
.footer__fine { font-size: 11.5px; line-height: 1.7; color: var(--on-dark-dim); margin: 0; }

/* ============================================================
   시트 · 모달 공통
   ============================================================ */

.backdrop {
  position: fixed; inset: 0;
  background: var(--color-overlay-modal);
  display: flex; justify-content: center; align-items: flex-end;
}
.backdrop--sheet { z-index: 95; }
.backdrop--form  { z-index: 100; }

.panel {
  width: 100%;
  max-width: var(--column-max);
  background: var(--color-white);
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  display: flex; flex-direction: column;
  animation: cheekoRise .3s ease;
  overflow: hidden;
}
.panel--sheet { height: 92vh; height: 92dvh; }
.panel--form  { max-height: 94vh; max-height: 94dvh; }

.panel__head {
  flex-shrink: 0;
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--border-divider);
  display: flex; justify-content: space-between; align-items: flex-start;
}
.panel__eyebrow { font-size: 11px; letter-spacing: 0.16em; font-weight: var(--weight-medium); color: var(--accent); margin: 0 0 5px; }
.panel__title { font-size: 20px; font-weight: var(--weight-semibold); color: var(--text-heading); margin: 0; }
.panel__body { flex: 1; overflow-y: auto; padding: 22px 20px 28px; }
.panel__intro { font-size: 14.5px; line-height: 1.7; color: var(--text-tertiary); margin: 0 0 22px; }

.blocks { display: flex; flex-direction: column; gap: 12px; }
.block { background: var(--surface-alt); border-radius: var(--radius-card); padding: 20px 18px; }
.block__media {
  border-radius: 8px;
  background: var(--color-white);
  border: 1px dashed var(--border-subtle);
  display: flex; flex-direction: column; gap: 3px;
  align-items: center; justify-content: center;
  margin-bottom: 14px;
  overflow: hidden;
}
.block__media span { font-size: 11px; color: var(--text-placeholder); letter-spacing: 0.1em; }
.block__media span + span { font-size: 10.5px; letter-spacing: 0; }
.block__label { font-size: 11px; font-weight: var(--weight-medium); letter-spacing: 0.08em; color: var(--accent); margin: 0 0 8px; }
.block__title { font-size: 16px; font-weight: var(--weight-semibold); color: var(--text-heading); margin: 0 0 7px; }
.block__desc { font-size: 14px; line-height: 1.6; color: var(--text-tertiary); margin: 0; }

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tags:empty { display: none; }
.tag {
  font-size: 12px;
  color: var(--text-body);
  background: var(--color-white);
  border: 1px solid var(--border-divider);
  border-radius: 6px;
  padding: 4px 9px;
}

/* ============================================================
   진단 신청 폼
   ============================================================ */

.form__head { padding: 18px 20px 0; flex-shrink: 0; }
.form__bar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
  font-size: 16px; font-weight: var(--weight-semibold); color: var(--text-heading);
}
.form__steprow { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 12px; }
.form__stepnum { font-weight: var(--weight-medium); color: var(--accent); }
.form__steplabel { color: var(--text-tertiary); }
.progress { height: 4px; border-radius: 2px; background: var(--border-divider); overflow: hidden; }
.progress__fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width var(--duration) ease; }

.step__title { font-size: 16px; font-weight: var(--weight-semibold); color: var(--text-heading); margin: 0 0 4px; }
.step__hint  { font-size: 13px; color: var(--text-tertiary); margin: 0 0 20px; }
.fields { display: flex; flex-direction: column; gap: 18px; }
.fields--tight { gap: 14px; }

.field { display: block; }
.field__label {
  display: block;
  font-size: 13px; font-weight: var(--weight-medium);
  color: var(--text-heading);
  margin-bottom: 8px;
}
.field__label .opt-note { font-weight: var(--weight-regular); color: var(--text-tertiary); }

.input, .textarea {
  width: 100%;
  padding: 0 14px;
  background: var(--color-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-control);
  font: inherit; font-size: 15px;
  color: var(--text-heading);
  transition: border-color var(--duration);
}
.input { height: 46px; }
.textarea { min-height: 76px; padding: 12px 14px; resize: vertical; }
.input:focus, .textarea:focus { border-color: var(--text-heading); outline: none; }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: #C0392B; }

.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opts--col { flex-direction: column; }
.opts--even > .opt { flex: 1; }

.opt {
  flex: 1 0 auto;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-control);
  background: var(--color-white);
  color: var(--text-body);
  font: inherit; font-size: 13.5px;
  cursor: pointer;
  transition: border-color var(--duration), background-color var(--duration), color var(--duration);
}
.opts--col .opt { width: 100%; text-align: left; min-height: 46px; padding: 0 16px; font-size: 14px; }
.opt:hover { border-color: var(--text-tertiary); }
.opt[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-tint);
  color: var(--accent);
  font-weight: var(--weight-semibold);
}

.consent {
  display: flex; gap: 10px; align-items: flex-start;
  cursor: pointer;
  padding: 14px;
  background: var(--surface-alt);
  border-radius: 10px;
  font-size: 13px; line-height: 1.55; color: var(--text-body);
}
.consent input { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; accent-color: var(--accent); }

.formfoot {
  flex-shrink: 0;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-divider);
  display: flex; gap: 10px;
}
.formfoot .btn--back { flex: 0 0 96px; height: 50px; font-size: 15px; border: 1px solid var(--border-subtle); background: var(--color-white); color: var(--text-heading); }
.formfoot .btn--back:hover { background: var(--surface-alt); }
.formfoot .btn--next { flex: 1; height: 50px; font-size: 15px; font-weight: var(--weight-semibold); }
.btn[disabled] { opacity: .55; cursor: default; }

/* 오류 안내 */
.formerr {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: var(--radius-control);
  background: rgba(192,57,43,.08);
  border: 1px solid rgba(192,57,43,.35);
  color: #A5342A;
  font-size: 13.5px;
  line-height: 1.6;
}

/* 완료 */
.done { text-align: center; padding: 40px 10px; }
.done__mark {
  width: 64px; height: 64px;
  border-radius: var(--radius-round);
  background: rgba(62,106,225,.1);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
  margin: 0 auto 22px;
}
.done__title { font-size: 18px; font-weight: var(--weight-semibold); color: var(--text-heading); margin: 0 0 12px; line-height: 1.4; }
.done__desc { font-size: 14.5px; line-height: 1.7; color: var(--text-tertiary); margin: 0; }

/* 숨김 */
[hidden] { display: none !important; }