/* thought-compass.css — 생각 나침반 게이트/질문 UI 스타일(Phase 1).
   초등학생용 단순·따뜻함. 한국어 줄바꿈 안전(keep-all), 터치 최소 44px, 태블릿 가로·세로 대응. */

/* ── 질문 흐름 오버레이 ── */
.tc-flow-overlay {
  position: fixed; inset: 0; z-index: 100000;   /* maker 모달(≤10006) 위 — 게이트 우회 방지(HIGH-1) */
  display: flex; align-items: center; justify-content: center;
  background: rgba(40, 32, 20, .55);
  padding: 16px;
  -webkit-tap-highlight-color: transparent;
}
.tc-flow-card {
  width: 100%; max-width: 560px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: #fffdf8;
  border-radius: 20px;
  padding: 24px 22px 20px;
  box-shadow: 0 16px 48px rgba(60, 40, 10, .28);
  word-break: keep-all;
  box-sizing: border-box;
}

/* ── 진행률 ── */
.tc-flow-progress { margin-bottom: 18px; }
.tc-flow-progress-label { font-size: 13px; font-weight: 700; color: #8a7350; margin-bottom: 6px; }
.tc-flow-progress-bar { height: 6px; background: #ece3d2; border-radius: 50px; overflow: hidden; }
.tc-flow-progress-fill { height: 100%; background: #7aa06a; border-radius: 50px; transition: width .25s ease; }

/* ── 질문 ── */
.tc-flow-title { font-size: 21px; font-weight: 800; color: #3a2c14; margin: 0 0 8px; line-height: 1.4; outline: none; }
.tc-flow-help { font-size: 14px; color: #6b5638; margin: 0 0 16px; line-height: 1.55; }
.tc-flow-assist { font-size: 14px; color: #5a7a4c; background: #f0f5ec; border-radius: 12px; padding: 10px 12px; margin: 0 0 14px; line-height: 1.5; }
.tc-flow-defer { font-size: 14px; color: #6b5638; background: #fbf3e4; border: 1px solid #ead8b8; border-radius: 12px; padding: 10px 12px; margin: 0 0 14px; line-height: 1.5; }

/* ── 선택지 ── */
.tc-flow-options { display: flex; flex-direction: column; gap: 10px; }
.tc-flow-choice {
  display: block; width: 100%;
  min-height: 52px; padding: 14px 16px;
  border: 2px solid #e4dbc8; border-radius: 14px;
  background: #fffefb; color: #3a2c14;
  font-size: 16px; font-weight: 600; text-align: left; line-height: 1.45;
  cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s;
  word-break: keep-all;
}
.tc-flow-choice:hover { border-color: #c9d8bd; }
.tc-flow-choice:focus-visible { outline: 3px solid #b6cda6; outline-offset: 2px; }
.tc-flow-choice.is-selected {
  border-color: #7aa06a; background: #eef4e9;
  box-shadow: 0 2px 10px rgba(122, 160, 106, .22);
}
.tc-flow-choice--custom { border-style: dashed; }

.tc-flow-custom { display: flex; flex-direction: column; gap: 8px; }
.tc-flow-custom-input {
  width: 100%; min-height: 84px; resize: vertical;
  border: 2px solid #c9d8bd; border-radius: 12px;
  padding: 12px 14px; font-size: 16px; color: #3a2c14; line-height: 1.5;
  font-family: inherit; box-sizing: border-box; background: #fffefb;
}
.tc-flow-custom-input:focus-visible { outline: 3px solid #b6cda6; outline-offset: 1px; border-color: #7aa06a; }
.tc-flow-counter { font-size: 12px; color: #a3936f; text-align: right; }

/* ── 모르겠어요 ── */
.tc-flow-unsure {
  display: block; margin: 16px auto 0;
  background: none; border: none;
  color: #8a7350; font-size: 14px; text-decoration: underline;
  cursor: pointer; min-height: 44px; padding: 0 8px;
}
.tc-flow-unsure:focus-visible { outline: 2px solid #b6cda6; border-radius: 8px; }

/* ── 오류 / AI 상태 / 후속질문 ── */
.tc-flow-error { color: #b4452f; font-size: 14px; margin: 12px 0 0; text-align: center; }
.tc-flow-aistatus { font-size: 13px; color: #8a7350; text-align: center; margin: 12px 0 0; }
.tc-flow-followup-tag { font-size: 12px; font-weight: 700; color: #6b9159; letter-spacing: .02em; margin-bottom: 6px; }

/* ── 하단 네비 ── */
.tc-flow-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.tc-flow-nav-spacer { flex: 0 0 auto; }
.tc-flow-prev {
  min-height: 48px; padding: 0 22px;
  border: 2px solid #e4dbc8; border-radius: 50px;
  background: #fffefb; color: #6b5638; font-size: 15px; font-weight: 700; cursor: pointer;
}
.tc-flow-prev:hover { border-color: #cfc3a6; }
.tc-flow-next {
  min-height: 48px; padding: 0 30px; margin-left: auto;
  border: none; border-radius: 50px;
  background: #7aa06a; color: #fff; font-size: 16px; font-weight: 700; cursor: pointer;
  transition: background .15s, opacity .15s;
}
.tc-flow-next:hover { background: #6b9159; }
.tc-flow-next:disabled { background: #cdd6c4; color: #fbfdf9; cursor: default; }
.tc-flow-prev:focus-visible, .tc-flow-next:focus-visible { outline: 3px solid #b6cda6; outline-offset: 2px; }

/* ── 최종 검토 화면(Phase I) ── */
.tc-review-card { max-width: 600px; }
/* COMPASS-CTA-STICKY-1(2026-07-14): 검토 화면의 '이 생각으로 시작하기' 버튼이 설계도+질문리스트+
   메모 아래로 밀려 초등학생이 못 찾던 문제 → 스크롤해도 항상 카드 하단에 붙어 보이게(sticky).
   검토 화면(.tc-review-card)에만 적용 — 질문 화면 nav는 그대로. DOM/로직 무변경. */
.tc-review-card .tc-flow-nav {
  position: sticky;
  bottom: 0;
  z-index: 1;
  background: #fffdf8;               /* 카드 배경과 동일 — 아래 내용 비침 방지 */
  margin-top: 14px;
  padding: 12px 0 2px;
  border-top: 1px solid rgba(60, 40, 10, .10);
}
.tc-review-list { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.tc-review-item { position: relative; border: 1px solid #ece3d2; border-radius: 14px; padding: 14px 14px 12px; background: #fffefb; }
.tc-review-q { font-size: 14px; font-weight: 700; color: #6b5638; margin-bottom: 6px; line-height: 1.45; word-break: keep-all; overflow-wrap: anywhere; padding-right: 64px; }
.tc-review-a { font-size: 16px; color: #3a2c14; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; }
.tc-review-a.is-empty { color: #b0a384; font-style: italic; }
.tc-review-followup { margin-top: 8px; padding-left: 10px; border-left: 2px solid #e4dbc8; }
.tc-review-fq { font-size: 13px; color: #8a7350; line-height: 1.45; }
.tc-review-fa { font-size: 14px; color: #4d3f28; line-height: 1.45; }
.tc-review-edit {
  position: absolute; top: 12px; right: 12px;
  min-height: 32px; padding: 4px 12px;
  border: 1px solid #c9d8bd; border-radius: 50px;
  background: #f0f5ec; color: #4d6b3f; font-size: 13px; font-weight: 700; cursor: pointer;
}
.tc-review-edit:hover { background: #e6efde; }
.tc-review-edit:focus-visible { outline: 3px solid #b6cda6; outline-offset: 2px; }

/* ── optional 진입 버튼(기존 작품 상단) ── */
.tc-optional-entry-btn {
  min-height: 36px; padding: 6px 14px;
  border: 1px solid #c9d8bd; border-radius: 50px;
  background: #f0f5ec; color: #4d6b3f; font-size: 13px; font-weight: 700; cursor: pointer;
}
.tc-optional-entry-btn:hover { background: #e6efde; }

/* ── 태블릿/모바일 ── */
@media (max-width: 600px) {
  .tc-flow-card { padding: 20px 16px 16px; border-radius: 16px; }
  .tc-flow-title { font-size: 19px; }
  .tc-flow-choice { font-size: 15px; min-height: 50px; }
}
/* 가로(landscape) 태블릿 — 카드가 화면을 넘지 않게 */
@media (max-height: 540px) {
  .tc-flow-card { max-height: calc(100vh - 24px); padding-top: 16px; padding-bottom: 14px; }
  .tc-flow-title { font-size: 18px; margin-bottom: 6px; }
  .tc-flow-help { margin-bottom: 10px; }
}

/* FREE-NOTE: 참고 자료 안내 + 질문과 분리된 자유 메모(떠오른 생각). 질문 답변과 시각적으로 구분. */
.tc-flow-help--guide {
  font-size: 13px; color: #5a7a4c; background: #f0f5ec;
  border-radius: 10px; padding: 8px 11px; margin: -6px 0 16px; line-height: 1.5;
}
.tc-note-section {
  margin: 18px 0 4px; padding: 14px; border-radius: 14px;
  background: #fbf6ec; border: 1px solid #ead8b8; border-left: 4px solid #cdb98c;
}
.tc-note-title { font-size: 15px; font-weight: 800; color: #5a4a30; margin: 0 0 6px; }
.tc-note-help { font-size: 13px; color: #6b5638; margin: 0 0 10px; line-height: 1.5; }
.tc-note-input {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 88px;
  border: 2px solid #d8c7a6; border-radius: 12px; padding: 10px 12px;
  font-size: 15px; color: #3a2c14; line-height: 1.55; font-family: inherit; background: #fffefb;
}
.tc-note-input:focus-visible { outline: 3px solid #b6cda6; outline-offset: 1px; border-color: #7aa06a; }
.tc-note-view {
  font-size: 15px; color: #3a2c14; line-height: 1.6; white-space: pre-wrap; word-break: break-word;
  background: #fffefb; border: 1px solid #e7d9bd; border-radius: 12px; padding: 10px 12px; margin: 0 0 8px;
}
.tc-note-view.is-empty { color: #a3936f; font-style: italic; }
.tc-note-edit-btn {
  background: none; border: 1.5px solid #cdb98c; color: #6b5638;
  font-size: 13px; font-weight: 700; border-radius: 50px; padding: 6px 16px; cursor: pointer;
}
.tc-note-edit-btn:hover { background: #f2e9d6; }
.tc-note-editor-actions { display: flex; gap: 8px; margin-top: 8px; }
.tc-note-save, .tc-note-cancel {
  font-size: 14px; font-weight: 700; border-radius: 50px; padding: 8px 18px; cursor: pointer; border: 2px solid;
}
.tc-note-save { background: #7aa06a; color: #fff; border-color: #7aa06a; }
.tc-note-save:hover { background: #6b9159; }
.tc-note-save:disabled { opacity: .6; cursor: default; }
.tc-note-cancel { background: #fffefb; color: #6b5638; border-color: #e4dbc8; }
.tc-note-cancel:hover { border-color: #cfc3a6; }

/* ── COMPASS-SHEET-1: 내 이야기 큰줄기 설계도(v2 결과보기/검토) ── */
.tc-sheet {
  border: 2px solid #d9e4cf; border-radius: 16px;
  background: #f7faf3; padding: 14px 14px 12px; margin: 0 0 16px;
}
.tc-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.tc-sheet-head-btns { display: flex; gap: 6px; flex: 0 0 auto; }
.tc-sheet-title { font-size: 16px; font-weight: 800; color: #4a6a3c; }
.tc-sheet-print-btn {
  background: #fffefb; border: 1.5px solid #b6cda6; color: #4a6a3c;
  font-size: 13px; font-weight: 700; border-radius: 50px; padding: 6px 14px; cursor: pointer;
  flex: 0 0 auto; min-height: 32px;
}
.tc-sheet-print-btn:hover { background: #eef4e8; }
.tc-sheet-print-btn:focus-visible { outline: 3px solid #b6cda6; outline-offset: 2px; }
.tc-sheet-summary {
  font-size: 15px; color: #3a2c14; line-height: 1.7; word-break: keep-all; overflow-wrap: anywhere;
  background: #fffefb; border: 1px solid #e2ead8; border-radius: 12px;
  padding: 12px 14px; margin: 0 0 12px;
}
.tc-sheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tc-sheet-card { background: #fffefb; border: 1px solid #e2ead8; border-radius: 12px; padding: 9px 11px; min-width: 0; }
.tc-sheet-card-label { font-size: 12px; font-weight: 700; color: #7a8f6a; margin-bottom: 3px; }
.tc-sheet-card-value { font-size: 14px; color: #3a2c14; line-height: 1.45; word-break: keep-all; overflow-wrap: anywhere; }
.tc-sheet-card.is-deferred .tc-sheet-card-value { color: #a3936f; font-style: italic; }
.tc-sheet-defer-hint { font-size: 12px; color: #8a7350; margin: 8px 0 0; }
@media (max-width: 480px) { .tc-sheet-grid { grid-template-columns: 1fr; } }

/* ── COMPASS-SHEET-1: 인쇄 1장 결과지 ──
   body.tc-print-sheet는 설계도 [🖨 인쇄하기] 버튼이 인쇄 동안에만 부여(afterprint 제거).
   버튼 미경유 인쇄(Cmd+P)에는 클래스가 없어 아래 룰 전체 무효 → 일반 화면/인쇄 영향 0. */
@media print {
  body.tc-print-sheet > *:not(.tc-flow-overlay) { display: none !important; }
  body.tc-print-sheet .tc-flow-overlay {
    position: static !important; padding: 0 !important; background: none !important;
    display: block !important;
  }
  body.tc-print-sheet .tc-flow-card {
    max-width: 100% !important; max-height: none !important; overflow: visible !important;
    box-shadow: none !important; border-radius: 0 !important; padding: 0 !important;
  }
  /* 1장 구성: 제목 + 설계도(줄거리·카드) + 자유 메모. Q&A 목록/버튼/안내는 제외 */
  body.tc-print-sheet .tc-review-list,
  body.tc-print-sheet .tc-flow-nav,
  body.tc-print-sheet .tc-flow-help,
  body.tc-print-sheet .tc-sheet-print-btn,
  body.tc-print-sheet .tc-note-edit-btn,
  body.tc-print-sheet .tc-note-editor,
  body.tc-print-sheet .tc-flow-error,
  body.tc-print-sheet .tc-flow-aistatus { display: none !important; }
  body.tc-print-sheet .tc-sheet { break-inside: avoid; border-color: #bbb; background: #fff; }
  body.tc-print-sheet .tc-sheet-summary,
  body.tc-print-sheet .tc-sheet-card { border-color: #ccc; }
  body.tc-print-sheet .tc-note-section { break-inside: avoid; }
  /* COMPASS-SHEET-POLISH: A4 1장 안정 — 게이트 내부에서만 spacing/폰트 컴팩트 */
  body.tc-print-sheet .tc-flow-title { font-size: 18px; margin-bottom: 4px; }
  body.tc-print-sheet .tc-sheet { padding: 10px 10px 8px; margin-bottom: 10px; }
  body.tc-print-sheet .tc-sheet-summary { font-size: 12.5px; line-height: 1.55; padding: 9px 11px; margin-bottom: 8px; }
  body.tc-print-sheet .tc-sheet-grid { gap: 6px; grid-template-columns: 1fr 1fr; }
  body.tc-print-sheet .tc-sheet-card { padding: 6px 9px; }
  body.tc-print-sheet .tc-sheet-card-label { font-size: 10.5px; margin-bottom: 2px; }
  body.tc-print-sheet .tc-sheet-card-value { font-size: 12px; line-height: 1.4; }
  body.tc-print-sheet .tc-sheet-defer-hint { font-size: 10.5px; margin-top: 5px; }
  body.tc-print-sheet .tc-note-title { font-size: 12px; }
  body.tc-print-sheet .tc-note-view { font-size: 12px; padding: 8px 10px; }
}

/* ── COMPASS-ROSE-1: 나침반형 이야기 설계도(v2 결과보기 전용 선택 보기) ──
   카드형(SHEET-1)이 기본·모바일 정본. 나침반형은 태블릿 가로/인쇄용 오버레이.
   종이 폭 690px = A4 기본 인쇄 여백 안에 무스케일 수납(1페이지 목표). */
.tc-rose-overlay {
  position: fixed; inset: 0; z-index: 100001;   /* 결과보기(100000) 위 */
  background: rgba(40, 32, 20, .6); overflow: auto;
  padding: 18px 12px 30px; -webkit-tap-highlight-color: transparent;
}
.tc-rose-toolbar { position: sticky; top: 0; z-index: 2; width: 690px; max-width: 100%; margin: 0 auto 10px; display: flex; justify-content: flex-end; gap: 8px; }
.tc-rose-print, .tc-rose-close {
  font-size: 13px; font-weight: 700; border-radius: 50px; padding: 8px 16px; cursor: pointer; min-height: 36px;
}
.tc-rose-print { background: #7aa06a; color: #fff; border: 2px solid #7aa06a; }
.tc-rose-print:hover { background: #6b9159; }
.tc-rose-close { background: #fffefb; color: #6b5638; border: 2px solid #e4dbc8; }
.tc-rose-close:hover { border-color: #cfc3a6; }
.tc-rose-paper {
  width: 690px; max-width: 100%; margin: 0 auto; background: #fffdf8; border-radius: 10px;
  box-shadow: 0 12px 40px rgba(60, 40, 10, .3); padding: 26px 28px 20px;
  display: flex; flex-direction: column; gap: 12px; word-break: keep-all; outline: none; box-sizing: border-box;
}
.tc-rose-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; border-bottom: 2px solid #e2ead8; padding-bottom: 9px; }
.tc-rose-title { margin: 0; font-size: 21px; color: #4a6a3c; }
.tc-rose-sub { font-size: 11.5px; color: #8a7350; margin-top: 4px; }
.tc-rose-badge { display: inline-block; background: #f7faf3; border: 1.5px solid #b6cda6; color: #4a6a3c; border-radius: 50px; font-size: 11px; font-weight: 700; padding: 2px 10px; margin-left: 4px; }
.tc-rose-who { font-size: 11.5px; color: #6b5638; text-align: right; line-height: 2; flex: 0 0 auto; }
.tc-rose-line { display: inline-block; width: 96px; border-bottom: 1.5px solid #cdb98c; margin-left: 6px; }
/* 나침반 스테이지 */
.tc-rose-stage { position: relative; height: 420px; }
.tc-rose-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tc-rose-letter { position: absolute; font-size: 10.5px; font-weight: 800; color: #7aa06a; }
.tc-rose-card { position: absolute; width: 170px; background: #fffefb; border: 1.5px solid #e2ead8; border-radius: 13px; padding: 8px 11px; box-shadow: 0 2px 8px rgba(90,70,40,.06); box-sizing: border-box; }
.tc-rose-card.dir-n { top: 0;    left: 50%; transform: translateX(-50%); }
.tc-rose-card.dir-e { top: 50%;  right: 0;  transform: translateY(-50%); }
.tc-rose-card.dir-s { bottom: 0; left: 50%; transform: translateX(-50%); }
.tc-rose-card.dir-w { top: 50%;  left: 0;   transform: translateY(-50%); }
.tc-rose-card-label { font-size: 11px; font-weight: 800; color: #4a6a3c; margin-bottom: 3px; }
.tc-rose-card-value { font-size: 12.5px; line-height: 1.45; color: #3a2c14; overflow-wrap: anywhere; }
.tc-rose-card-value.is-deferred, .tc-rose-stop-text.is-deferred, .tc-rose-center-value.is-deferred { color: #a3936f; font-style: italic; }
.tc-rose-center {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 196px; height: 196px; border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #ffffff 0%, #f7faf3 78%);
  border: 2.5px solid #7aa06a; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 18px; gap: 4px; box-shadow: 0 3px 14px rgba(90,120,70,.15); box-sizing: border-box;
}
.tc-rose-pin { font-size: 16px; }
.tc-rose-center-label { font-size: 10.5px; font-weight: 800; color: #4a6a3c; letter-spacing: .04em; }
.tc-rose-center-value { font-size: 13px; font-weight: 700; line-height: 1.45; color: #3a2c14; overflow-wrap: anywhere; }
/* 시간띠 */
.tc-rose-band { background: #f7faf3; border: 2px solid #e2ead8; border-radius: 14px; padding: 11px 14px 13px; }
.tc-rose-band-title { font-size: 12.5px; font-weight: 800; color: #4a6a3c; margin-bottom: 9px; }
.tc-rose-band-hint { font-weight: 400; font-size: 10.5px; color: #8a7350; }
.tc-rose-flow { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.tc-rose-flow::before { content: ''; position: absolute; top: 12px; left: 4%; right: 4%; height: 3px; background: #b6cda6; border-radius: 2px; }
.tc-rose-stop { position: relative; text-align: center; }
.tc-rose-dot { position: relative; z-index: 1; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 2.5px solid #7aa06a; margin: 0 auto 5px; display: flex; align-items: center; justify-content: center; font-size: 11px; }
.tc-rose-stop.is-final .tc-rose-dot { background: #7aa06a; }
.tc-rose-stop-label { font-size: 10.5px; font-weight: 800; color: #4a6a3c; margin-bottom: 2px; }
.tc-rose-stop-text { font-size: 10.5px; line-height: 1.4; color: #6b5638; overflow-wrap: anywhere; }
.tc-rose-alt { margin-top: 10px; margin-left: 58%; position: relative; max-width: 40%; }
.tc-rose-alt::before { content: ''; position: absolute; left: -13px; top: -12px; width: 11px; height: 23px; border-left: 2.5px dashed #cdb98c; border-bottom: 2.5px dashed #cdb98c; border-radius: 0 0 0 9px; }
.tc-rose-alt-card { background: #fbf7ec; border: 1.5px dashed #cdb98c; border-radius: 11px; padding: 7px 10px; }
.tc-rose-alt-card .tc-rose-card-label { color: #8a6f3c; }
/* 메모/푸터 */
.tc-rose-memo { border: 2px solid #e2ead8; border-radius: 14px; padding: 10px 14px 8px; }
.tc-rose-memo-title { font-size: 11.5px; font-weight: 800; color: #4a6a3c; margin-bottom: 5px; }
.tc-rose-memo-line { height: 24px; border-bottom: 1.5px dashed #ddd2b8; }
.tc-rose-memo-text { font-size: 12px; color: #3a2c14; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.tc-rose-foot { font-size: 10px; color: #8a7350; text-align: center; }
/* 모바일: 기본 결과보기=카드형 유지 — 나침반 진입 버튼 자체를 숨김 */
@media (max-width: 600px) { .tc-sheet-rose-btn { display: none !important; } }

/* ── COMPASS-ROSE-1 인쇄: 기존 gate 패턴(tc-print-rose·버튼 경유만) — 나침반 1장 ── */
@media print {
  body.tc-print-rose > *:not(.tc-rose-overlay) { display: none !important; }
  body.tc-print-rose .tc-rose-overlay { position: static !important; padding: 0 !important; background: none !important; overflow: visible !important; }
  body.tc-print-rose .tc-rose-toolbar { display: none !important; }
  body.tc-print-rose .tc-rose-paper { box-shadow: none !important; border-radius: 0 !important; margin: 0 auto !important; }
  body.tc-print-rose .tc-rose-stage, body.tc-print-rose .tc-rose-band, body.tc-print-rose .tc-rose-memo { break-inside: avoid; }
}