/* ============================================================
   꾸미기 텍스트 생성기 전용 스타일
   - 이 도구의 컨셉: "스티커 시트"
     결과 하나하나가 떼어 붙이는 스티커처럼 보이게 하고,
     판정 뱃지는 스티커에 찍힌 도장처럼 작게 붙인다.
   - 간격·바탕은 common.css 토큰을 그대로 쓰되, 포인트 색만
     이 도구용 로즈 톤(--ft-accent)으로 따로 둔다(도구 자율).
   - 결과 글자는 폰트가 아니라 유니코드 문자라, 브라우저가 글자마다
     다른 폰트를 끌어다 쓴다. 줄 높이를 넉넉히 잡아야 잘리지 않는다.
   ============================================================ */

:root {
  --ft-accent: #b4436e;
  --ft-accent-weak: #f7e4ec;
  --ft-ok: #2f7a55;
  --ft-ok-weak: #e2f1e9;
  --ft-warn: #8a6218;
  --ft-warn-weak: #f7eed8;
  --ft-no: #a53b34;
  --ft-no-weak: #f7e3e1;
  --ft-mute-weak: #ece7dc;
}
:root[data-theme="dark"] {
  --ft-accent: #e88aab;
  --ft-accent-weak: #3c2029;
  --ft-ok: #7fc9a2;
  --ft-ok-weak: #1e3129;
  --ft-warn: #d8b56a;
  --ft-warn-weak: #332a17;
  --ft-no: #ec8f86;
  --ft-no-weak: #38211f;
  --ft-mute-weak: #2a241c;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ft-accent: #e88aab;
    --ft-accent-weak: #3c2029;
    --ft-ok: #7fc9a2;
    --ft-ok-weak: #1e3129;
    --ft-warn: #d8b56a;
    --ft-warn-weak: #332a17;
    --ft-no: #ec8f86;
    --ft-no-weak: #38211f;
    --ft-mute-weak: #2a241c;
  }
}

/* ---- 도입부 (다른 도구와 같은 골격) ---- */
.tool-intro {
  position: relative;
  padding: var(--space-6) 0 var(--space-5);
  margin-bottom: var(--space-5);
  overflow: hidden;
}
/* 이 도구만의 배경 모티프: 스티커 시트의 점 타공 */
.tool-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--color-grid) 1.4px, transparent 1.4px);
  background-size: 22px 22px;
  opacity: .45;
  -webkit-mask-image: linear-gradient(110deg, rgba(0,0,0,.6), transparent 62%);
          mask-image: linear-gradient(110deg, rgba(0,0,0,.6), transparent 62%);
  pointer-events: none;
}
.tool-intro > * { position: relative; }
.tool-intro h1 {
  margin: 0 0 var(--space-3);
  max-width: 16ch;
  font-size: clamp(2.1rem, 5vw, 3.1rem);
  line-height: 1.18;
  letter-spacing: -.02em;
}
.tool-intro h1 .accent {
  color: var(--ft-accent);
  box-shadow: inset 0 -.16em 0 var(--ft-accent-weak);
}
.eyebrow { color: var(--ft-accent); }
.eyebrow::before { background: var(--ft-accent); }
.lead {
  color: var(--color-text-sub);
  margin: var(--space-2) 0;
  max-width: 58ch;
  font-size: 1.02rem;
  line-height: 1.7;
}
.lead strong { color: var(--color-text); }
.lead-note {
  color: var(--color-text-sub);
  font-size: .85rem;
  opacity: .85;
  margin: var(--space-3) 0 0;
}

/* ============================================================
   조작판
   ============================================================ */
.ft-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.ft-inputwrap { display: flex; gap: var(--space-3); align-items: stretch; }
.ft-inputwrap textarea {
  flex: 1;
  font: inherit;
  font-size: 1.25rem;
  line-height: 1.5;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  resize: vertical;
  min-height: 3.4em;
}
.ft-inputwrap textarea:focus {
  outline: 2px solid var(--ft-accent);
  outline-offset: 1px;
}
.ft-clear {
  font: inherit;
  font-size: .88rem;
  cursor: pointer;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text-sub);
  white-space: nowrap;
}
.ft-clear:hover { border-color: var(--ft-accent); color: var(--ft-accent); }

.ft-samples {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.ft-sublabel { font-size: .82rem; color: var(--color-text-sub); }
.ft-samples button {
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
  padding: 3px 12px;
  border: 1px dashed var(--color-border);
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-sub);
}
.ft-samples button:hover { border-style: solid; border-color: var(--ft-accent); color: var(--ft-accent); }

/* ---- 조건 줄 ---- */
.ft-optrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}
.ft-field {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: .9rem;
  color: var(--color-text-sub);
}
.ft-field select {
  font: inherit;
  font-size: .92rem;
  padding: 5px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
}
.ft-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .9rem;
  color: var(--color-text-sub);
  cursor: pointer;
}
.ft-check input { accent-color: var(--ft-accent); }
.ft-count { margin-left: auto; font-size: .84rem; color: var(--color-text-sub); }
.ft-targetnote {
  margin: var(--space-3) 0 0;
  font-size: .85rem;
  color: var(--color-text-sub);
  line-height: 1.6;
}

/* ---- 분류 탭 ---- */
.ft-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.ft-tab {
  font: inherit;
  font-size: .88rem;
  cursor: pointer;
  padding: 5px 14px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-text-sub);
}
.ft-tab:hover { border-color: var(--ft-accent); color: var(--ft-accent); }
.ft-tab.is-on {
  background: var(--ft-accent);
  border-color: var(--ft-accent);
  color: #fff;
  font-weight: 600;
}

/* ============================================================
   결과 카드(스티커)
   ============================================================ */
/* 스타일이 40장 넘게 나오므로 넓은 화면에서는 두 줄로 흘려 스크롤을 줄인다 */
.ft-list {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
}
.ft-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  padding: var(--space-3) var(--space-4) var(--space-4);
}
.ft-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.ft-fav {
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  border: 0;
  background: transparent;
  color: var(--color-text-sub);
  padding: 2px;
}
.ft-fav.is-on { color: var(--ft-accent); }
.ft-name { font-size: .92rem; font-weight: 600; }
.ft-tags { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.ft-tag {
  font-size: .74rem;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.ft-tag-ok   { background: var(--ft-ok-weak);   color: var(--ft-ok); }
.ft-tag-warn { background: var(--ft-warn-weak); color: var(--ft-warn); }
.ft-tag-no   { background: var(--ft-no-weak);   color: var(--ft-no); }
.ft-tag-part { background: var(--ft-accent-weak); color: var(--ft-accent); }
.ft-tag-none { background: var(--ft-mute-weak); color: var(--color-text-sub); }
.ft-right {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.ft-len { font-size: .76rem; color: var(--color-text-sub); }
.ft-copy {
  font: inherit;
  font-size: .82rem;
  cursor: pointer;
  padding: 4px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
}
.ft-copy:hover { border-color: var(--ft-accent); color: var(--ft-accent); }

/* 결과 글자: 확장 평면 문자가 잘리지 않도록 줄 높이를 넉넉히 */
.ft-out {
  font-size: 1.4rem;
  line-height: 1.85;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  cursor: pointer;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  min-height: 1.85em;
}
.ft-out:hover { outline: 1px solid var(--ft-accent); }
.ft-out.is-flat { color: var(--color-text-sub); }
.ft-note {
  margin: var(--space-2) 0 0;
  font-size: .78rem;
  color: var(--color-text-sub);
  line-height: 1.55;
}
.ft-blank {
  margin: var(--space-5) 0;
  color: var(--color-text-sub);
  text-align: center;
  font-size: .92rem;
}

/* ---- 투명 문자 ---- */
.ft-blankchars h2 { margin: 0 0 var(--space-2); font-size: 1.08rem; }
.ft-blankchars p { margin: 0; color: var(--color-text-sub); font-size: .92rem; line-height: 1.7; }
.ft-blankrow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}
.ft-blankrow button {
  font: inherit;
  font-size: .88rem;
  cursor: pointer;
  padding: 6px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
}
.ft-blankrow button:hover { border-color: var(--ft-accent); color: var(--ft-accent); }
.ft-fineprint { font-size: .8rem !important; opacity: .9; }

/* ---- 복사 알림 ---- */
.ft-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 8px);
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--color-text);
  color: var(--color-bg);
  font-size: .88rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 50;
}
.ft-toast.is-on { opacity: .95; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .ft-toast { transition: none; }
}

/* ============================================================
   본문(사용법·FAQ): 다른 도구와 동일 골격
   ============================================================ */
.prose { margin-top: var(--space-6); }
.prose h2 { margin-bottom: var(--space-3); }
.prose h3 { margin: var(--space-4) 0 var(--space-2); font-size: 1.05rem; }
.prose p, .prose li { color: var(--color-text); line-height: 1.75; }
.prose em { color: var(--ft-accent); font-style: normal; font-weight: 600; }
.prose code {
  font-size: .95em;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--ft-mute-weak);
}
.prose ol, .prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: var(--space-2); }
.prose details {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
}
.prose summary { cursor: pointer; font-weight: 600; }
.prose summary::marker { color: var(--ft-accent); }
.prose details p { margin: var(--space-2) 0 0; }

@media (max-width: 560px) {
  .ft-inputwrap { flex-direction: column; }
  .ft-clear { padding: 8px 0; }
  .ft-count { margin-left: 0; width: 100%; }
  .ft-len { display: none; }
  .ft-out { font-size: 1.25rem; }
}