/* ---------- 이번 주 미담노트 ---------- */

.note-root {
  max-width: 560px;
  margin: 0 auto;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 수집 시각 같은 꼬리말은 이 화면에서 군더더기다. */
body:has(#view-note:not(.hidden)) .page-footer { display: none; }

.note-svg {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 그룹마다 색 하나. 아이콘 바탕·완료 표시·복사 버튼이 같은 색을 쓴다. */
.note-group--reply { --g: #a9655a; --g-soft: #f7ece8; }
.note-group--blog { --g: #4f8062; --g-soft: #e8f1eb; }
.note-group--instagram { --g: #9a5f88; --g-soft: #f4e9f1; }
.note-group--contact { --g: #587aa0; --g-soft: #e8eef5; }

/* ---------- 시작 · 진행 ---------- */

.note-start {
  min-height: 56vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.note-eyebrow {
  margin: 0 0 10px;
  color: var(--accent);
  font-size: 14px;
  letter-spacing: .04em;
}

.note-start h1 {
  margin-bottom: 36px;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.45;
}

.note-make {
  width: min(100%, 320px);
  padding: 17px 22px;
  font-size: 18px;
}

.note-error {
  margin: 16px 0 0;
  color: var(--danger);
  font-size: 15px;
}

.note-progress-label {
  margin: 0 0 18px;
  font-family: var(--serif);
  font-size: 22px;
  color: var(--ink);
}

.note-progress {
  width: min(100%, 320px);
  flex: none;
}

.note-progress span { transition: width .4s ease; }

/* ---------- 머리 ---------- */

.note-head { margin-bottom: 22px; }

.note-head-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.note-head h1 {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
}

.note-count {
  color: var(--muted);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.note-count b {
  color: var(--accent-deep);
  font-weight: 600;
}

.note-bar {
  height: 4px;
  margin-top: 12px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

.note-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width .3s ease;
}

/* ---------- 그룹 ---------- */

.note-group {
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.note-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 12px;
}

.note-group-icon {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--g-soft);
  color: var(--g);
  flex: none;
}

.note-group-head h2 {
  flex: 1;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
}

.note-group-count {
  color: var(--muted);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.note-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- 한 줄 ---------- */

.note-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 8px;
  padding: 14px 12px 15px;
  border-top: 1px solid var(--line);
}

.note-tick {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--control-height);
  height: var(--control-height);
  padding: 0;
  color: transparent;
}
.note-tick::before {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  box-sizing: border-box;
}
.note-tick:hover::before { border-color: var(--g); }
.note-row.is-done .note-tick { color: #fff; }
.note-row.is-done .note-tick::before { border-color: var(--g); background: var(--g); }
.note-tick .note-svg { position: relative; }
.note-row.is-done .note-tick .note-svg { stroke-width: 2.4; }

.note-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 24px;
}

.note-row-meta {
  margin: 0;
  min-width: 0;
  color: var(--muted);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.note-row-meta i {
  margin: 0 5px;
  font-style: normal;
  opacity: .6;
}

.note-row-meta b {
  color: var(--g);
  font-weight: 500;
}

.note-copy { flex: none; }

.note-row-source {
  margin: 6px 0 0;
  padding-left: 10px;
  border-left: 2px solid var(--line);
  color: var(--muted);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 손님 후기도 답글처럼 눌러서 펼친다. 한 줄 말줄임이라 풀 때는 줄바꿈부터 살린다. */
.note-row-source.is-clickable { cursor: pointer; }
.note-row-source.is-open {
  white-space: pre-wrap;
  overflow: visible;
  text-overflow: clip;
}

.note-row-heading {
  margin: 6px 0 0;
  color: var(--ink);
  font-size: 15.5px;
  font-weight: 500;
}

.note-row-text {
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.6;
  white-space: pre-line;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.note-row-text.is-clickable { cursor: pointer; }

.note-row-text.is-open {
  display: block;
  -webkit-line-clamp: unset;
  white-space: pre-wrap;
}

/* 접힌 글 아래에 펼칠 수 있다는 걸 말로 적는다. 말줄임표만으로는 모른다. */
.note-more {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: 4px;
  padding: 3px 8px 3px 0;
  color: var(--accent-deep);
  font-size: 14px;
  font-weight: 500;
}

.note-more .note-svg { transition: transform .2s ease; }
.note-more[aria-expanded="true"] .note-svg { transform: rotate(180deg); }

.note-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.note-row.is-done .note-row-text,
.note-row.is-done .note-row-heading { color: var(--muted); }

.note-row.is-done .note-copy {
  background: var(--surface-soft);
  color: var(--muted);
}

/* ---------- 끝 · 연결 ---------- */

.note-finish {
  margin-bottom: 14px;
  padding: 20px 18px;
  border-radius: 18px;
  background: var(--accent-soft);
  text-align: center;
}

.note-finish strong {
  display: block;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  color: var(--accent-deep);
}

.note-finish p {
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-size: 14.5px;
}

.note-finish .btn { margin-top: 14px; }

.note-connect {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 4px;
  padding: 14px 16px;
  border: 1px dashed var(--line-strong);
  border-radius: 18px;
  text-align: left;
  transition: border-color .15s, background .15s;
}

.note-connect:hover {
  border-color: var(--accent);
  background: var(--surface);
}

.note-connect-icons {
  display: flex;
  flex: none;
}

.note-connect-icons .note-group-icon + .note-group-icon { margin-left: -6px; box-shadow: 0 0 0 2px var(--bg); }

.note-connect-copy {
  flex: 1;
  color: var(--muted);
  font-size: 14px;
}

.note-connect-copy strong {
  display: block;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
}

.note-connect-plus { color: var(--muted); }

.note-connect-form {
  display: grid;
  gap: 14px;
  margin-top: 4px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
}

.note-connect-row > span {
  display: block;
  margin-bottom: 6px;
  color: var(--ink-soft);
  font-size: 14px;
}

.note-remake {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 26px auto 0;
  padding: 6px 8px;
  color: var(--muted);
  font-size: 14px;
}

.note-remake:hover { color: var(--accent); }

/* 글 생성이 실패한 카드: 이유를 작게 적고 해당 메뉴로 보낸다. */
.note-row-error { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.note-row.is-failed .note-row-text { color: var(--ink-soft); }

/* 공통 버튼 규칙 위에 그룹 색을 다시 입힌다. 후기·블로그·인스타·연락이 버튼에서도 구분되게. */
.note-group .note-copy { border-color: var(--g); background: var(--g-soft); color: var(--g); font-weight: 600; }
.note-group .note-copy:hover:not(:disabled) { border-color: var(--g); background: var(--g); color: #fff; }
.note-group .note-action:hover:not(:disabled) { border-color: var(--g); background: var(--g-soft); color: var(--g); }
.note-group .note-action.is-strong { border-color: var(--g); background: var(--g); color: #fff; }
.note-group .note-action.is-strong:hover:not(:disabled) { border-color: var(--g); background: var(--g); color: #fff; filter: brightness(.9); }
.note-group .note-row.is-done .note-copy { border-color: var(--line-strong); background: var(--surface-soft); color: var(--muted); }