/*
  비전 콜 화면(/vision/, /vision/start/, /my/). tokens.css의 semantic 토큰만 쓴다.
  무드: Light. 힘을 주는 곳은 하나, 첫 화면의 '아침 전화' 무대다. 나머지는 글 위계로 조용히 둔다.
  글꼴 두 목소리는 사이트와 같다: 회사는 IBM Plex Sans KR, 전화하는 캐릭터의 말은 Gowun Dodum.
  형광펜(노랑)은 캐릭터가 '기억한' 말에만 칠한다.
*/

.vc-hero {
  padding-top: var(--s-6);
}

.vc-hero-grid {
  display: grid;
  gap: var(--s-6);
}

.vc-title {
  font-size: var(--t-h2-size);
  line-height: var(--t-h2-lh);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-display);
  max-width: 18em;
}

.vc-lead {
  max-width: var(--measure);
  font-size: var(--t-lead-size);
  line-height: var(--t-lead-lh);
  color: var(--text-secondary);
}

/* 아침 전화 무대: 정한 시각이 크게, 그 아래 장면 속 사람의 말이 한 줄씩 */
.vc-stage {
  border: 1px solid var(--line);
  border-radius: var(--r-sheet);
  background: var(--bg-sheet);
  padding: var(--s-5);
  min-width: 0;
}

.vc-clock {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-3);
}

.vc-clock-time {
  font-size: var(--t-name-size);
  line-height: var(--t-name-lh);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-brand);
  font-variant-numeric: tabular-nums;
}

.vc-clock-day {
  font-size: var(--t-small-size);
  line-height: var(--t-small-lh);
  color: var(--text-meta);
}

.vc-caller {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}

.vc-ring {
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--text-primary);
}

.vc-caller-text {
  display: grid;
  min-width: 0;
}

.vc-caller-name {
  font-weight: var(--weight-semibold);
}

.vc-caller-role {
  font-size: var(--t-meta-size);
  line-height: var(--t-meta-lh);
  color: var(--text-meta);
}

.vc-lines {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-5);
  align-content: start;
}

.vc-line {
  max-width: 34rem;
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
}

.vc-line.is-off {
  visibility: hidden;
}

.vc-line--them {
  font-family: var(--font-voice);
}

.vc-line--me {
  justify-self: end;
  text-align: right;
  color: var(--text-secondary);
}

.vc-who {
  display: block;
  font-family: var(--font-company);
  font-size: var(--t-meta-size);
  line-height: var(--t-meta-lh);
  font-weight: var(--weight-semibold);
  color: var(--text-meta);
}

.vc-stage-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-5);
  font-size: var(--t-meta-size);
  line-height: var(--t-meta-lh);
  color: var(--text-meta);
}

.vc-toggle {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  padding: 0 var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg-page);
  font-size: var(--t-meta-size);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

@media (prefers-reduced-motion: no-preference) {
  .vc-ring {
    animation: vc-ring 1.6s var(--ease-out) infinite;
  }

  .vc-line.is-new {
    animation: vc-in var(--dur-base) var(--ease-out);
  }
}

.vc-stage.is-paused .vc-ring {
  animation: none;
}

@keyframes vc-ring {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.6); opacity: 0.45; }
}

@keyframes vc-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* 좁은 화면: 제목 → 아침 전화 무대 → 설명·버튼. 넓은 화면: 왼쪽에 제목과 설명, 오른쪽에 무대 */
@media (min-width: 64rem) {
  .vc-hero-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    column-gap: var(--s-6);
    row-gap: var(--s-5);
    align-items: start;
  }

  .vc-title {
    grid-column: 1 / span 6;
    grid-row: 1;
    padding-top: var(--s-4);
  }

  .vc-hero-text {
    grid-column: 1 / span 6;
    grid-row: 2;
  }

  .vc-stage {
    grid-column: 7 / -1;
    grid-row: 1 / span 2;
    padding: var(--s-6);
  }

  .vc-clock-time {
    font-size: var(--t-brand-size);
    line-height: var(--t-brand-lh);
  }
}

.vc-hero-text {
  display: grid;
  gap: var(--s-5);
}

.vc-caption {
  font-size: var(--t-meta-size);
  line-height: var(--t-meta-lh);
  color: var(--text-meta);
  max-width: var(--measure);
}

/* 통화 흐름: 실제 순서라서 시각으로 줄을 세운다 */
.vc-flow {
  display: grid;
  border-top: 1px solid var(--line-strong);
}

.vc-flow li {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--s-4);
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--line);
}

.vc-flow-time {
  font-size: var(--t-h3-size);
  line-height: var(--t-h3-lh);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

.vc-flow-body {
  display: grid;
  gap: var(--s-2);
  min-width: 0;
}

.vc-flow-body strong {
  font-weight: var(--weight-semibold);
}

.vc-say {
  font-family: var(--font-voice);
  color: var(--text-secondary);
}

/* 연구 이야기 */
.vc-note {
  display: grid;
  gap: var(--s-4);
  max-width: 44rem;
}

.vc-note p {
  font-size: var(--t-lead-size);
  line-height: var(--t-lead-lh);
}

.vc-sources {
  display: grid;
  gap: var(--s-2);
  font-size: var(--t-meta-size);
  line-height: var(--t-meta-lh);
  color: var(--text-meta);
}

/* 장면 예시: 전화하는 사람과 첫마디 */
.vc-scenes {
  display: grid;
  border-top: 1px solid var(--line-strong);
}

.vc-scenes li {
  display: grid;
  gap: var(--s-2);
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--line);
}

.vc-scene-who {
  font-size: var(--t-small-size);
  line-height: var(--t-small-lh);
  font-weight: var(--weight-semibold);
}

.vc-scene-goal {
  color: var(--text-meta);
  font-weight: var(--weight-regular);
}

.vc-scene-line {
  font-family: var(--font-voice);
  font-size: var(--t-lead-size);
  line-height: var(--t-lead-lh);
}

@media (min-width: 48rem) {
  .vc-scenes li {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    column-gap: var(--s-6);
    align-items: baseline;
  }
}

/* 멈추는 법·알아 둘 것: 정의 목록 */
.vc-dl {
  display: grid;
  border-top: 1px solid var(--line-strong);
}

.vc-dl > div {
  display: grid;
  gap: var(--s-1);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--line);
}

.vc-dl dt {
  font-weight: var(--weight-semibold);
}

.vc-dl dd {
  color: var(--text-secondary);
  max-width: 44rem;
}

@media (min-width: 48rem) {
  .vc-dl > div {
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    column-gap: var(--s-6);
  }
}

.vc-end {
  display: grid;
  gap: var(--s-5);
  padding-block: var(--s-7) 0;
}

/* ---------- 양식(/vision/start/, /my/) ---------- */
.vc-form-page {
  padding-block: var(--s-6) var(--s-8);   /* 아래 여백: 마지막 버튼이 페이지 끝에 붙지 않게(10-10 출하 점검) */
}

.vc-title + form {
  margin-top: var(--s-5);   /* 다이어리 시작하기처럼 제목 바로 밑에 양식이 오는 화면 */
}

.vc-narrow {
  max-width: 36rem;
}

.vc-progress {
  display: grid;
  gap: var(--s-2);
  margin-block: var(--s-5) var(--s-6);
}

.vc-progress-text {
  font-size: var(--t-small-size);
  line-height: var(--t-small-lh);
  font-weight: var(--weight-semibold);
  color: var(--text-meta);
  font-variant-numeric: tabular-nums;
}

.vc-progress-bar {
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--bg-sunken);
  overflow: hidden;
}

.vc-progress-bar span {
  display: block;
  height: 100%;
  width: 20%;
  background: var(--text-primary);
  transition: width var(--dur-base) var(--ease-out);
}

.vc-step {
  display: grid;
  gap: var(--s-5);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.vc-check[hidden],
.vc-step[hidden],
.vc-field[hidden],
.vc-progress[hidden],
.vc-btn-line[hidden],
.vc-toggle[hidden],
.vc-summary[hidden] {
  display: none;
}

.vc-step-title {
  padding: 0;
  margin-bottom: var(--s-1);
  font-size: var(--t-h3-size);
  line-height: var(--t-h3-lh);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-heading);
}

.vc-field {
  display: grid;
  gap: var(--s-2);
  min-width: 0;
}

.vc-label {
  font-weight: var(--weight-semibold);
}

.vc-optional {
  font-weight: var(--weight-regular);
  color: var(--text-meta);
}

.vc-hint {
  font-size: var(--t-small-size);
  line-height: var(--t-small-lh);
  color: var(--text-meta);
}

.vc-input {
  width: 100%;
  min-height: var(--cta-height);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-action);
  background: var(--bg-page);
  color: var(--text-primary);
  font: inherit;
  font-size: max(16px, var(--t-body-size));
}

textarea.vc-input {
  min-height: 6rem;
  resize: vertical;
}

.vc-input:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
}

.vc-input[aria-invalid="true"] {
  border-color: var(--text-primary);
  border-width: 2px;
}

.vc-fill {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--s-4);
  font-size: var(--t-small-size);
  line-height: var(--t-small-lh);
  color: var(--text-meta);
}

.vc-fill span {
  flex-basis: 100%;
}

.vc-fill button {
  min-height: var(--touch-min);
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  cursor: pointer;
}

/* 고르기: 테두리 있는 줄 하나에 둘(남자·여자 목소리 / 존댓말·반말) */
.vc-choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.vc-choice legend {
  margin-bottom: var(--s-2);
  padding: 0;
  font-weight: var(--weight-semibold);
}

.vc-choice label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--cta-height);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-action);
  text-align: center;
  cursor: pointer;
}

.vc-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.vc-choice input:checked + span {
  font-weight: var(--weight-semibold);
}

.vc-choice label:has(input:checked) {
  border: 2px solid var(--text-primary);
}

.vc-choice label:has(input:focus-visible) {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.vc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-2);
  align-items: end;
}

.vc-btn-line {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--cta-height);
  padding: 0 var(--s-5);
  border: 1px solid var(--text-primary);
  border-radius: var(--r-pill);
  background: var(--bg-page);
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  cursor: pointer;
}

.vc-btn-line:disabled,
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.vc-consent {
  display: grid;
  gap: var(--s-1);
  margin: 0;
  padding: 0;
  border: 0;
}

.vc-consent legend {
  margin-bottom: var(--s-2);
  padding: 0;
  font-weight: var(--weight-semibold);
}

.vc-check {
  display: grid;
  grid-template-columns: 1.375rem minmax(0, 1fr);
  gap: var(--s-3);
  align-items: start;
  padding-block: var(--s-2);
  min-height: var(--touch-min);
  cursor: pointer;
}

.vc-check input {
  width: 1.375rem;
  height: 1.375rem;
  margin: 0.2rem 0 0;
  accent-color: var(--text-primary);
}

.vc-check small {
  display: block;
  font-size: var(--t-meta-size);
  line-height: var(--t-meta-lh);
  color: var(--text-meta);
}

/* 동의 문장 속 링크: 줄 높이는 그대로 두고 누르는 영역만 위아래로 넓힌다(랜딩 .care-note a와 같다) */
.vc-check a {
  padding-block: 0.75em;
  font-weight: var(--weight-semibold);
}

.vc-check--all {
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
  font-weight: var(--weight-semibold);
}

.vc-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  margin-top: var(--s-5);   /* 버튼이 위 입력칸에 붙지 않게(10-10 출하 점검: 8px → 24px) */
}

.vc-error {
  font-weight: var(--weight-semibold);
}

.vc-error:not(:empty) {
  margin-top: var(--s-4);
}

.vc-error:empty {
  display: none;
}

.vc-error::before {
  content: "확인해 주세요: ";
}

.vc-status {
  font-size: var(--t-small-size);
  line-height: var(--t-small-lh);
  color: var(--text-secondary);
}

.vc-status:empty {
  display: none;
}

/* 신청 끝·내 비전: 정한 시각이 크게 */
.vc-my {
  margin-top: var(--s-5);
}

.vc-summary {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-sheet);
  background: var(--bg-sheet);
}

.vc-summary--done {
  margin-top: var(--s-5);
}

.vc-summary-time {
  font-size: var(--t-name-size);
  line-height: var(--t-name-lh);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-display);
  font-variant-numeric: tabular-nums;
}

.vc-summary-text {
  font-size: var(--t-lead-size);
  line-height: var(--t-lead-lh);
}

.vc-summary-meta {
  font-size: var(--t-small-size);
  line-height: var(--t-small-lh);
  color: var(--text-meta);
}

.vc-actions {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-5);
}

.vc-actions .btn,
.vc-actions .vc-btn-line {
  width: 100%;
}

@media (min-width: 40rem) {
  .vc-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.vc-panel {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}

.vc-panel[hidden] {
  display: none;
}

.vc-calls {
  display: grid;
  border-top: 1px solid var(--line);
  font-size: var(--t-small-size);
  line-height: var(--t-small-lh);
}

.vc-calls li {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}

.vc-calls-empty {
  color: var(--text-meta);
}

.vc-danger {
  justify-self: start;
  min-height: var(--touch-min);
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-secondary);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-underline-offset: 0.3em;
  cursor: pointer;
}

/*
  다이어리 콜(/diary/, /my/의 내 일기). 힘을 주는 곳은 '일기장 한 쪽' 하나다.
  일기는 줄 친 종이 위에 Gowun Dodum으로 쓴다(글 한 줄이 종이 한 줄에 앉는다). 형광펜은 손님이 직접 고른 기분 낱말에만.
*/
.dc-page {
  --dc-line: 2rem;
  display: grid;
  gap: var(--s-3);
  background: var(--bg-page);
}

.dc-date {
  font-size: var(--t-meta-size);
  line-height: var(--t-meta-lh);
  color: var(--text-meta);
  font-variant-numeric: tabular-nums;
}

.dc-entry-title {
  font-family: var(--font-voice);
  font-size: var(--t-h3-size);
  line-height: var(--t-h3-lh);
  font-weight: var(--weight-regular);
}

.dc-one {
  font-family: var(--font-voice);
  color: var(--text-secondary);
}

.dc-body {
  --dc-line: 2rem;
  font-family: var(--font-voice);
  font-size: var(--t-body-size);
  line-height: var(--dc-line);
  background-image: linear-gradient(to bottom, transparent calc(var(--dc-line) - 1px), var(--line) calc(var(--dc-line) - 1px));
  background-size: 100% var(--dc-line);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.dc-tags {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-2);
  font-size: var(--t-small-size);
  line-height: var(--t-small-lh);
}

.dc-tags dt {
  font-size: var(--t-meta-size);
  line-height: var(--t-meta-lh);
  font-weight: var(--weight-semibold);
  color: var(--text-meta);
}

.dc-tags dd {
  font-family: var(--font-voice);
}

/* 내 블랭킷: 다이어리 칸은 비전 칸과 띄우고, 일기 목록은 날짜·제목·한 줄.
   일기는 손님 말이라 글자를 미리 알 수 없어서, 쪽마다 쓰인 글자만 담은 사이트 글꼴 대신 한글 완성형을 다 담은 Gowun Dodum을 쓴다(일기를 열 때만 받음) */
@font-face {
  font-family: "Gowun Dodum KS";
  src: url("/assets/fonts/gowun-ks.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.dc-my {
  --font-voice: "Gowun Dodum KS", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  margin-top: var(--s-7);
}

.dc-list {
  border-top: 1px solid var(--line);
}

.dc-item {
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr);
  column-gap: var(--s-3);
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--s-3) 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.dc-item-date {
  grid-row: span 2;
  font-size: var(--t-small-size);
  line-height: var(--t-small-lh);
  color: var(--text-meta);
  font-variant-numeric: tabular-nums;
}

.dc-item-title {
  font-family: var(--font-voice);
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
}

.dc-item-one {
  overflow: hidden;
  font-family: var(--font-voice);
  font-size: var(--t-small-size);
  line-height: var(--t-small-lh);
  color: var(--text-meta);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dc-item-one:empty {
  display: none;
}

.dc-item:hover .dc-item-title {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.dc-view {
  gap: var(--s-3);
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-sheet);
}

.dc-view .vc-nav {
  margin-top: var(--s-3);
}