/* 커리어 코칭 서비스 전용 스타일. 연습용 앱(style.css)과 따로 둔다.
   코치의 말은 다이어리에 적힌 질문처럼 명조(Gowun Batang), 큰 제목은 로고 글씨와 같은 마루 부리 Bold,
   나의 말과 화면 글자는 고딕(IBM Plex Sans KR).
   강조는 한 곳에만: 결과지의 '다음 한 걸음'에 긋는 형광펜.
   색은 먹(#262523)과 한지빛 바탕. 다크 모드는 숯색 바탕에 한지빛을 강조색으로 쓴다 (먹은 어두운 바탕에 묻힌다). */
:root {
  --paper: #f4f1ea;
  --surface: #fffdf8;
  --ink: #1d1c1a;
  --muted: #6e6a62;
  --line: #e2ddd2;
  --accent: #262523;
  --accent-ink: #fffdf8;
  --you: #e9e4d9;
  --mark: #f7dc4c; /* 한지빛 바탕에서 레몬색(#f2e46a)은 묻혀서 한 단계 진하게 */
  --mark-ink: #1d1c1a;
  --focus: #6e6a62;
  --serif: "Gowun Batang", "AppleMyungjo", serif;
  --title: "MaruBuri", "Gowun Batang", "AppleMyungjo", serif;
  --sans: "IBM Plex Sans KR", -apple-system, "Apple SD Gothic Neo", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1a1917;
    --surface: #23221f;
    --ink: #ece8df;
    --muted: #a39e94;
    --line: #34322d;
    --accent: #e9e4d9;
    --accent-ink: #1a1917;
    --you: #2e2c28;
    --mark: #e6cc4a;
    --mark-ink: #ffffff;
    --focus: #c9c3b6;
  }
}

/* 큰 제목(.question)만 로고 글씨와 같은 마루 부리 Bold. 고운바탕 Bold는 제목으로 쓰기에 획이 얇았다.
   네이버 CSS는 다섯 굵기를 모두 선언하고 font-display가 없어서, Bold 한 벌만 직접 선언하고 받는 동안은 고운바탕으로 보여 준다 */
@font-face {
  font-family: "MaruBuri";
  font-weight: 700;
  font-display: swap;
  src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Bold.woff2) format("woff2"),
    url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Bold.woff) format("woff");
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.7 var(--sans);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
[hidden] { display: none !important; }
a { color: var(--accent); }
button, textarea, input { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- 공통 페이지 ---------- */
.page {
  max-width: 600px;
  margin: 0 auto;
  padding: 40px 20px calc(48px + env(safe-area-inset-bottom));
}
.wordmark { display: flex; align-items: center; margin: 0 0 48px; font-size: 0.95rem; letter-spacing: -0.01em; }
/* 로고(섬돌 그림 + 마루 부리 '섬돌')는 이미지라서 화면은 이 폰트를 불러오지 않는다 */
.wordmark-logo { height: 1.55em; width: auto; }
.wordmark-sub { margin-left: 1em; font-weight: 400; color: var(--muted); position: relative; top: 0.12em; /* 로고 글씨의 아래쪽 무게에 맞춰 살짝 내린다 */ }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wordmark-logo { content: url(logo-white.png); } }
.question {
  /* 320px 폭에서도 "가장 마음에 걸리는 건"이 한 줄에 들어가게 최소 크기를 낮춘다 */
  font: 700 clamp(1.6rem, 8vw, 2.6rem)/1.38 var(--title);
  letter-spacing: -0.02em;
  word-break: keep-all;
  margin: 0 0 20px;
}
.lede { color: var(--muted); margin: 0 0 40px; max-width: 34em; }
.hint { color: var(--muted); font-size: 0.875rem; margin: 10px 0 0; }
.hint.error { color: var(--ink); font-weight: 600; }

.cta {
  display: block;
  width: 100%;
  padding: 16px;
  border: 0;
  border-radius: 14px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  font-size: 1.05rem;
}
.cta:disabled { opacity: 0.35; }
.ghost {
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: transparent;
  font-weight: 500;
}

/* ---------- 시작 화면 ---------- */
.name-field { display: block; margin: 0 0 32px; }
.name-field > span:first-child { display: block; font-weight: 600; margin-bottom: 12px; }
.name-row { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; }
.name-row input {
  width: 12em;
  max-width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  font-size: 1.05rem;
}
.name-row input:focus { outline: none; border-color: var(--accent); }
.name-field small { display: block; color: var(--muted); font-size: 0.85rem; margin-top: 6px; }
.code-input { text-transform: uppercase; letter-spacing: 0.04em; }
.code-input::placeholder { text-transform: none; letter-spacing: normal; }
.code-status:empty { display: none; }
.code-status.bad { color: var(--ink); font-weight: 600; }
.programs { border: 0; padding: 0; margin: 0 0 32px; }
.programs legend { font-weight: 600; margin-bottom: 12px; padding: 0; }
.program {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  align-items: start;
  padding: 16px 18px;
  margin-bottom: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
}
.program input { margin: 5px 0 0; accent-color: var(--accent); width: 18px; height: 18px; }
.program strong { font-size: 1.05rem; }
.program small { grid-column: 2; color: var(--muted); font-size: 0.9rem; line-height: 1.6; }
.program:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

.previous {
  margin: 0 0 32px;
  padding: 18px;
  border-left: 3px solid var(--accent);
  background: var(--surface);
  border-radius: 0 14px 14px 0;
}
.previous h2 { font-size: 0.95rem; margin: 0 0 6px; }
.previous p { margin: 0 0 8px; color: var(--muted); }
.previous ul { margin: 0 0 12px; padding-left: 20px; }

.past { margin-top: 56px; border-top: 1px solid var(--line); padding-top: 24px; }
.past h2 { font-size: 1rem; margin: 0; }
.past ul { list-style: none; margin: 14px 0 0; padding: 0; }
.past button {
  display: block; width: 100%; text-align: left; padding: 14px 0; border: 0; border-bottom: 1px solid var(--line); background: none;
}
.past button small { display: block; color: var(--muted); font-size: 0.85rem; }

.consent {
  font-size: 0.9rem;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 20px;
  margin-bottom: 20px;
}
.consent ul { margin: 0 0 16px; padding-left: 18px; }
.consent li { margin-bottom: 6px; }
.agree { display: flex; gap: 10px; align-items: center; color: var(--ink); font-weight: 500; cursor: pointer; }
.agree input { width: 18px; height: 18px; accent-color: var(--accent); }

/* ---------- 세션 ---------- */
/* 세션 화면은 지금 보이는 영역(visualViewport) 크기에 딱 맞춘 한 화면이다. 페이지는 스크롤되지 않고 대화(.chat)만 안에서 스크롤된다.
   키보드가 올라오면 service.js가 --vv-h·--vv-top을 Safari의 보이는 창 높이·위치로 바꿔, 화면이 그 창에 딱 붙고
   맨 아래 칸인 입력창이 키보드 바로 위에 온다. */
.session {
  position: fixed;
  top: var(--vv-top, 0px);
  left: 0;
  right: 0;
  height: var(--vv-h, 100dvh);
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.session-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px 16px;
  background: var(--paper);
}
.session-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.4; }
.session-meta strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 359px) { .session-bar { gap: 8px; padding-left: 14px; padding-right: 14px; } }
.leave { border: 0; background: none; padding: 8px 4px; color: var(--muted); font-size: 0.875rem; }
.time-left { color: var(--muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.time-left.over { color: var(--ink); font-weight: 600; }
/* 배경 음악 켜기/끄기. 꺼져 있으면 흐린 색에 사선, 켜면 강조색 */
.meta-row { display: flex; align-items: center; gap: 4px; }
/* 제목 자리를 줄이지 않게 남은 시간 옆에 작게 둔다. 누르는 자리는 음수 여백으로 넓힌다 */
.music { display: grid; place-items: center; width: 30px; height: 30px; margin: -6px 0; flex: none; border: 0; border-radius: 50%; background: none; color: var(--muted); padding: 0; }
.music[aria-pressed="true"] { color: var(--accent); }
/* 코치 첫 인사 뒤 음표 아래에 띄우는 말풍선. 꼬리는 service.js가 음표 위치(--tail)에 맞춘다 */
.meta-row { position: relative; }
.music-nudge {
  /* 꼬리가 진행 막대를 지나 음표 가까이 닿게 둔다. 막대는 아래 filter의 바탕색 테두리가 그 자리만 끊는다 */
  position: absolute; top: calc(100% + 18px); left: 0; z-index: 2;
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 6px 6px 6px 14px;
  color: var(--accent-ink); font-size: 0.85rem;
  /* 앞의 셋은 돌과 꼬리 둘레에 바탕색 테두리(진행 막대를 끊는다), 마지막은 그 모양을 따라가는 그림자 */
  filter: drop-shadow(0 -2px 0 var(--paper)) drop-shadow(2px 0 0 var(--paper)) drop-shadow(-2px 0 0 var(--paper))
    drop-shadow(0 3px 7px rgba(0, 0, 0, 0.14));
  animation: nudge-in 0.3s ease-out;
}
.music-nudge[hidden] { display: none; }
/* 바탕은 섬돌 모양: 윗면은 딛기 좋게 평평하고 아래가 조금 넓고 울퉁불퉁하다. 글 길이에 맞춰 늘어난다 */
.music-nudge::after {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20200%2040%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M16%201.5C70%20.5%20135%201%20182%202C190%202.5%20194%207%20196%2014C198%2022%20200%2030%20197%2035C194%2038.5%20185%2039%20170%2039.5C130%2040%20100%2038.5%2070%2039.5C45%2040%2020%2040%207%2038C1.5%2037%200%2032%201%2026C2.5%2016%206%203%2016%201.5Z%22/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20200%2040%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M16%201.5C70%20.5%20135%201%20182%202C190%202.5%20194%207%20196%2014C198%2022%20200%2030%20197%2035C194%2038.5%20185%2039%20170%2039.5C130%2040%20100%2038.5%2070%2039.5C45%2040%2020%2040%207%2038C1.5%2037%200%2032%201%2026C2.5%2016%206%203%2016%201.5Z%22/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
/* 말풍선이 떠 있는 동안은 코치의 첫 말을 가리지 않게 대화를 그만큼 내린다 */
.chat { transition: padding-top 0.3s ease-out; }
.session:has(.music-nudge:not([hidden])) .chat { padding-top: 64px; }
/* 꼬리: 음표 쪽으로 휘어 오르는 짧고 동그란 초승달. 끝(가로 8.8)이 음표 가운데(--tail)에 온다 */
.music-nudge::before {
  content: ""; position: absolute; top: -6px; left: calc(var(--tail, 20px) - 8.8px);
  width: 10.5px; height: 8px; background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2010.5%208%22%3E%3Cpath%20d%3D%22M0%208C0%204%203%201%207.6.6Q10.4.4%209.2%202.4C8.4%203.9%208.6%206%2010%208Z%22/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2010.5%208%22%3E%3Cpath%20d%3D%22M0%208C0%204%203%201%207.6.6Q10.4.4%209.2%202.4C8.4%203.9%208.6%206%2010%208Z%22/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.music-nudge button { border: 0; border-radius: 999px; font: inherit; color: inherit; background: none; padding: 4px 8px; }
/* '틀기'는 섬돌 위에 올린 작은 조약돌 모양.
   먹색 위의 밝은 버튼은 실제보다 커 보여서(광삼) 라이트 모드에서만 1px 줄인다. 말풍선 높이는 ×가 정해서 그대로다 */
#music-yes {
  background: var(--accent-ink); color: var(--accent); font-weight: 600; padding: 3px 12px; border-radius: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2048%2026%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M8%202C20%20.5%2034%201%2041%203C46%204.5%2048%209%2048%2014C48%2020%2046%2024%2040%2025C30%2026.5%2018%2026%209%2025C3%2024.5%200%2020%20.5%2013C1%207%203%202.5%208%202Z%22/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2048%2026%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M8%202C20%20.5%2034%201%2041%203C46%204.5%2048%209%2048%2014C48%2020%2046%2024%2040%2025C30%2026.5%2018%2026%209%2025C3%2024.5%200%2020%20.5%2013C1%207%203%202.5%208%202Z%22/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #music-yes { padding: 4px 13px; } }
@keyframes nudge-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .music-nudge { animation: none; } }
/* 사선 아래에 바탕색 테두리를 깔아 음표와 떨어져 보이게 한다 */
.music-gap { stroke: var(--paper); stroke-width: 5; stroke-linecap: round; }
.music[aria-pressed="true"] .music-off { display: none; }
.end {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
}
/* 15분 중 얼마나 지났는지 */
.progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--line); }
#progress-fill { height: 100%; width: 0; background: var(--accent); transition: width 1s linear; }

.chat {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.msg { margin: 0; white-space: pre-wrap; }
.msg.coach { font: 400 1.18rem/1.75 var(--serif); max-width: 34em; }
.msg.client {
  align-self: flex-end;
  max-width: 82%;
  background: var(--you);
  padding: 10px 14px;
  border-radius: 16px 16px 4px 16px;
}
.msg.error { color: var(--muted); font-size: 0.9rem; }
/* 마무리할 때 코치 답 아래에 나오는 결과지 버튼 */
.end-cta { width: auto; align-self: flex-start; padding: 14px 22px; flex-shrink: 0; }
/* 결과지 버튼 옆의 '15분 더 이어 가기' (연장). 결과지가 먼저 보이도록 테두리만 둔다. */
.end-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; flex-shrink: 0; }
/* 아래 안내 줄(이용권 1회)은 버튼 아래 한 줄을 다 쓴다. */
.end-actions > .msg.note { flex-basis: 100%; }
.extend {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: 14px;
  padding: 13px 21px; /* 테두리 1px만큼 줄여 옆 결과지 버튼(.end-cta)과 크기를 맞춘다 */
  font: inherit;
  font-size: 1.05rem;
  font-weight: 600;
}
.extend:disabled { opacity: 0.5; }
.msg.note { color: var(--muted); font-size: 0.9rem; }
.typing { display: inline-flex; gap: 5px; padding: 10px 0; }
.typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite; }
.typing span:nth-child(2) { animation-delay: 0.2s; }
.typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }

.composer {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.keyboard-open .composer { padding-bottom: 10px; }
.in-session, .in-session body { height: 100%; overflow: hidden; overscroll-behavior: none; }
.composer textarea {
  flex: 1;
  min-width: 0;
  resize: none;
  /* 글이 길어지면 브라우저가 높이를 직접 늘린다 (크롬 123+). 지원하지 않으면 service.js의 autosize가 맡는다. */
  field-sizing: content;
  min-height: 48px;
  /* 긴 답은 세로로 늘어나되 5줄 정도까지만. 그 이상은 입력창 안에서 스크롤 (키보드가 열린 휴대폰에서 대화가 가려지지 않게). */
  max-height: min(40vh, 9em);
  overflow-y: auto;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  line-height: 1.5;
}
.composer textarea:focus { outline: none; border-color: var(--accent); }
.composer button {
  border: 0;
  border-radius: 14px;
  padding: 12px 16px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}
.composer button:disabled { opacity: 0.35; }

/* ---------- 결과지 ---------- */
.loading { padding-top: 30vh; }
.result-date { color: var(--muted); margin: -36px 0 32px; font-size: 0.9rem; }
.client-summary h2 { font-size: 0.95rem; font-weight: 600; margin: 0 0 10px; }
.client-summary section { padding: 24px 0; border-top: 1px solid var(--line); }
.client-summary ul, .client-summary ol { margin: 0; padding-left: 20px; }
.client-summary li { margin-bottom: 6px; }
.cs-head { border-top: 0 !important; padding-top: 0 !important; }
.cs-topic { font: 700 1.6rem/1.45 var(--serif); margin: 0 0 8px; letter-spacing: -0.01em; }
.cs-goal { color: var(--muted); margin: 0; }
.cs-actions li { font-size: 1.1rem; font-weight: 500; }
.cs-actions mark {
  color: var(--mark-ink);
  background: linear-gradient(transparent 55%, var(--mark) 55%) no-repeat 0 0 / 100% 100%;
  padding: 0 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* 다크 모드: 흰 글씨는 노랑 위에서 안 읽히고, 반투명 노랑은 숯색과 섞여 탁해진다. 글자 아래 굵은 밑줄로 긋는다 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cs-actions mark {
    background-image: linear-gradient(transparent 74%, var(--mark) 74%, var(--mark) 92%, transparent 92%);
  }
}
.cs-when { color: var(--muted); font-size: 0.9rem; font-weight: 400; }
.cs-quotes blockquote { margin: 0 0 12px; font: 400 1.15rem/1.7 var(--serif); }
.cs-quotes blockquote::before { content: "“"; }
.cs-quotes blockquote::after { content: "”"; }
.cs-message p { font: 400 1.05rem/1.85 var(--serif); margin: 0; }
.cs-empty { color: var(--muted); margin: 0; }
/* 안전 안내 세션의 결과지: 도움받을 곳을 맨 위에, 나머지 이야기는 접어 둔다 */
.cs-help ul { margin-bottom: 10px; }
.cs-help strong { font-variant-numeric: tabular-nums; }
.cs-more { border-top: 1px solid var(--line); padding-top: 20px; }
.cs-more > summary { cursor: pointer; color: var(--muted); font-size: 0.95rem; }
.cs-more[open] > summary { margin-bottom: 8px; }
/* 결과지 직후 한 질문: 누르지 않아도 된다. 고른 버튼만 남기고 나머지는 흐리게 */
.feedback { border-top: 1px solid var(--line); padding-top: 24px; margin-top: 8px; }
.feedback h2 { font-size: 0.95rem; font-weight: 600; margin: 0 0 12px; }
.feedback-options { display: flex; flex-wrap: wrap; gap: 8px; }
.feedback-options .ghost { padding: 10px 14px; font-size: 0.95rem; }
.feedback-options .ghost:disabled { opacity: 0.35; }
.feedback-options .ghost.chosen { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.result-actions { display: grid; grid-template-columns: auto 1fr; gap: 10px; margin-top: 32px; }

/* 결과지가 나타날 때 형광펜을 한 번 긋는다 */
.result .cs-actions mark { animation: highlight 0.9s 0.3s ease-out both; }
@media print {
  /* 모바일 Safari는 PDF로 저장할 때 그라데이션의 투명 부분을 검게 칠한다. 인쇄에서는 단색 형광펜으로 바꾸고 애니메이션도 끈다. */
  .result .cs-actions mark, .cs-actions mark { background: var(--mark); animation: none; }
}
@keyframes highlight { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media print {
  :root { --paper: #fff; --surface: #fff; --ink: #000; --muted: #555; --line: #ccc; --mark: #f2e46a; --mark-ink: #000; }
  .no-print { display: none !important; }
  .page { padding: 0; }
  .client-summary section { break-inside: avoid; }
  .cs-actions mark { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}