/* GlyPop - white paper, ink text, one pink and one blue accent. */
:root {
  --bg: #ffffff;
  --soft: #f6f7fb;
  --ink: #15171c;
  --muted: #5d6474;
  --line: #e4e7ef;
  --pink: #ff2d78;
  --blue: #1668ff;
  --radius: 12px;
  --tap: 44px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  overflow-wrap: break-word;
}

body {
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { line-height: 1.3; }
h2 { font-size: 17px; margin: 0 0 2px; }
h3 { font-size: 15px; margin: 0 0 4px; }

a { color: var(--blue); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--blue);
  color: #fff;
  padding: 10px 14px;
  z-index: 20;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

:where(button, textarea, a, [tabindex]):focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ---------- top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(6px);
  z-index: 10;
}

.brand { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; }
/* On the static pages the same brand block is the way back to the tool. */
a.brand { color: inherit; text-decoration: none; }
a.brand:hover .brand__name { color: var(--pink); }
.brand__logo { flex: none; display: block; }
.brand__text { display: flex; flex-direction: column; min-width: 0; }
.brand__name { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; line-height: 1.25; }
.brand__tagline {
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lang-btn {
  flex: none;
  min-height: var(--tap);
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--blue);
  background: #fff;
  border: 1px solid var(--blue);
  border-radius: 999px;
  cursor: pointer;
}
.lang-btn:hover { background: #eef3ff; }

/* ---------- layout ---------- */
.wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 10px 14px 32px;
}

/* ---------- tabs ---------- */
/* Every tool has to be reachable at 390px, so the row wraps onto a second
   line instead of scrolling tools off the right edge where they are easy to
   miss entirely. */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 10px;
}

.tab {
  flex: none;
  min-height: var(--tap);
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--pink); border-bottom-color: var(--pink); }

/* ---------- input ---------- */
.input-panel {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 9px 10px 8px;
  margin-bottom: 8px;
}
.input-panel[hidden] { display: none; }

.input-panel__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}
/* The label gives way first so the undo button never pushes this row wider
   than a 390px screen. */
.input-panel__head label {
  font-size: 14px;
  font-weight: 700;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#inputText {
  width: 100%;
  min-height: 60px;
  padding: 8px 10px;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  resize: vertical;
}
#inputText:focus { border-color: var(--blue); }

/* One short line. The full privacy wording lives in the help disclosure. */
.input-panel__meta {
  margin: 5px 0 0;
  font-size: 12px;
  color: var(--muted);
}
#inputCount {
  flex: none;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--muted);
}
#inputCount.is-limit { color: var(--pink); }

/* ---------- undo ---------- */
/* Present only while there is something to take back, so it costs no room
   the rest of the time. */
.undo-btn {
  flex: none;
  color: var(--blue);
  border-color: #bcd2ff;
  background: #f1f6ff;
  white-space: nowrap;
}
.undo-btn:hover { background: #e4edff; }
.undo-btn[hidden] { display: none; }

/* ---------- sample chips ---------- */
/* Collapsed by default: one 13px line under the box, no block of its own. */
.samples { margin: 4px 0 0; }
.samples > summary {
  display: inline-block;
  padding: 4px 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  cursor: pointer;
}
.samples > summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 8px; }

.samples__row { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; }
.samples__note { margin: 6px 0 2px; font-size: 12px; line-height: 1.45; color: var(--muted); }

.chip-btn {
  min-height: var(--tap);
  max-width: 100%;
  padding: 6px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  background: #fff;
  border: 1px dashed var(--line);
  border-radius: 999px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chip-btn:hover { border-style: solid; border-color: var(--pink); color: var(--pink); background: #fff7fa; }
/* A chip that records a choice (the kit presets) shows it. */
.chip-btn[aria-pressed="true"] {
  border-style: solid;
  border-color: var(--pink);
  color: var(--pink);
  background: #fff1f6;
}

.muted { color: var(--muted); }

/* ---------- status / manual copy ---------- */
.status {
  min-height: 20px;
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--blue);
}
.status.is-error { color: var(--pink); }

.manual-copy {
  border: 1px solid var(--pink);
  border-radius: var(--radius);
  padding: 10px;
  margin-bottom: 12px;
  background: #fff5f8;
}
.manual-copy label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.manual-copy textarea {
  width: 100%;
  font: inherit;
  font-size: 16px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  resize: vertical;
}

/* ---------- panels ---------- */
.panel { animation: fade 0.12s ease-out; }
.panel[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.note { margin: 0 0 8px; font-size: 14px; line-height: 1.4; color: var(--muted); }
.note--soft { font-size: 13px; }

/* Heading + one-line note, kept tight so the first result stays high up. */
.panel__head { margin-bottom: 8px; }
.panel__head .note { margin: 0; }

.example-hint {
  border-left: 3px solid var(--pink);
  background: #fff7fa;
  border-radius: 0 8px 8px 0;
  padding: 6px 9px;
  margin: 0 0 6px;
  color: var(--ink);
  font-size: 13px;
}
.example-hint[hidden] { display: none; }

/* Only shown once something is starred; empty favorites collapse to one line. */
.fav-block {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 8px 10px 10px;
  margin: 0 0 10px;
  background: #fcfcff;
}
.fav-block[hidden] { display: none; }
.fav-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.fav-block__head h3 { margin: 0; }
.fav-block__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.fav-block .cards { margin-top: 8px; }

.fav-hint {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--muted);
}
.fav-hint[hidden] { display: none; }

/* ---------- shape filter (fancy) ---------- */
/* One wrapping row: three chips plus the count. It replaces no existing row,
   so it is kept to a single line height on a 390px screen. */
.group-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0 0 6px;
}
.group-bar__chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.chip-btn--group { border-style: solid; }
.chip-btn--group[aria-pressed="true"] {
  border-color: var(--pink);
  color: var(--pink);
  background: #fff1f6;
}

/* Only rendered once a group is picked, so the default view stays short. */
.group-note {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}
.group-note[hidden] { display: none; }
#fancyEmpty[hidden] { display: none; }
#decorateEmpty[hidden] { display: none; }

/* ---------- result cards ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 8px;
  margin-top: 0;
}

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 11px 9px;
  background: #fff;
  min-width: 0;
}
.card:hover { border-color: #cfd6e6; }
.card:focus-within { border-color: var(--blue); }
.card.is-example { background: #fffdf5; border-style: dashed; }

/* Quiet label row: the name is a caption for the result, not the headline. */
.card__head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
  min-width: 0;
}
.card__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.badge {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: #fff;
}
.badge--example { color: var(--pink); border-color: var(--pink); background: #fff1f6; }
.badge--good { color: var(--blue); border-color: #bcd2ff; background: #f1f6ff; }
.badge--mixed { color: #8a6a00; border-color: #efdca6; background: #fffaeb; }
.badge--limited { color: var(--pink); border-color: #ffc9dc; background: #fff1f6; }
/* "원문 그대로" vs "글자 바뀜" on the 한글 꾸미기 cards. Quiet grey for the
   wrappers, blue for the transforms - the pair the reader has to tell apart. */
.badge--keep { color: var(--muted); border-color: var(--line); background: #fafbfd; }
.badge--change { color: var(--blue); border-color: #bcd2ff; background: #f1f6ff; }

.star-btn {
  flex: none;
  width: var(--tap); height: var(--tap);
  font-size: 16px;
  line-height: 1;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
  cursor: pointer;
  color: var(--muted);
}
.star-btn[aria-pressed="true"] { color: var(--pink); border-color: var(--pink); background: #fff1f6; }

/* The result is the biggest, darkest thing on the card. */
.card__out {
  display: block;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  margin-bottom: 8px;
  min-height: 27px;
}
.card.is-example .card__out { color: var(--muted); }

/* Truthful per-style caveat: only the styles that change more than the Latin
   letters carry one. */
.card__note {
  margin: -2px 0 8px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}

/* Copy leads, the star sits at the far end of the same row. */
.card__foot { display: flex; align-items: center; gap: 8px; }
.card__foot .star-btn { margin-left: auto; }

.primary-btn {
  min-height: var(--tap);
  padding: 8px 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--pink);
  border: 1px solid var(--pink);
  border-radius: 10px;
  cursor: pointer;
}
.primary-btn:hover { background: #e52168; border-color: #e52168; }

.ghost-btn {
  min-height: var(--tap);
  padding: 7px 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}
.ghost-btn:hover { border-color: var(--blue); color: var(--blue); }
.ghost-btn[aria-pressed="true"] { border-color: var(--blue); color: var(--blue); background: #f1f6ff; }
/* Same 44px touch target, just narrower and quieter. */
.ghost-btn--small { padding: 6px 10px; font-size: 13px; }

/* ---------- text kits ---------- */
/* A kit card holds several lines, so the result is set a little smaller than
   on the one-line tabs and wraps rather than pushing the card wide. The
   pre-wrap / anywhere pair on .card__out is what keeps a long Korean line
   inside the card instead of breaking the layout. */
.card--kit .card__out {
  font-size: 16px;
  line-height: 1.65;
}

.mixer {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fcfcff;
  padding: 10px 10px 4px;
  margin: 0 0 12px;
  min-width: 0;
}
.mixer[hidden] { display: none; }
.mixer > h3 { margin-bottom: 2px; }
.mixer .filter-bar { margin-top: 6px; }
.mixer__actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
#kitMixOut { margin-bottom: 8px; }

/* ---------- search / filter ---------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.field--grow { flex: 1 1 190px; }
.field label { font-size: 14px; font-weight: 600; }
.field input,
.field select {
  width: 100%;
  max-width: 100%;
  min-height: var(--tap);
  padding: 6px 9px;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.field select { min-width: 150px; }
.field input:focus, .field select:focus { border-color: var(--blue); }

/* ---------- symbols ---------- */
.symbol-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.chip-note { font-size: 13px; color: var(--muted); }
.chip-note--count { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

.symbol-cat { margin: 0 0 12px; }
.symbol-cat h3 { margin-bottom: 6px; }

.symbol-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: 6px;
}

.symbol-btn {
  min-height: var(--tap);
  font-size: 20px;
  line-height: 1;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  color: var(--ink);
  padding: 4px;
}
.symbol-btn:hover { border-color: var(--pink); background: #fff7fa; }
.symbol-btn[aria-pressed="true"] { border-color: var(--pink); background: #fff1f6; }

.empty-note { font-size: 13px; color: var(--muted); margin: 4px 0; }

/* ---------- faces ---------- */
.face-preview {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  background: var(--soft);
  text-align: center;
  margin-bottom: 14px;
}
.face-preview__label { display: block; font-size: 13px; color: var(--muted); }
.face-preview__out {
  display: block;
  font-size: 30px;
  line-height: 1.6;
  margin: 6px 0 10px;
  overflow-wrap: anywhere;
}
.face-preview__actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

.part-group {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  margin: 0 0 12px;
  min-width: 0;
}
.part-group legend { font-size: 14px; font-weight: 700; padding: 0 6px; }

.part-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(92px, 100%), 1fr));
  gap: 6px;
}

.part-btn {
  min-height: var(--tap);
  padding: 6px 4px;
  font: inherit;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.part-btn__glyph { font-size: 18px; line-height: 1.2; }
.part-btn__name { font-size: 11px; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.part-btn[aria-pressed="true"] { border-color: var(--blue); background: #f1f6ff; }
.part-btn[aria-pressed="true"] .part-btn__name { color: var(--blue); }

/* ---------- text tools ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
  gap: 8px;
  margin: 10px 0;
}
.stats > div {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  background: #fff;
  min-width: 0;
}
.stats dt { font-size: 13px; color: var(--muted); }
.stats dd {
  margin: 2px 0 0;
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--blue);
}

.tool-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* ---------- in-page FAQ ---------- */
/* Sits below the results, collapsed, so nothing is pushed above the tool. */
.faq {
  margin: 22px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.faq h2 { font-size: 15px; margin: 0 0 2px; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  padding: 11px 2px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.faq__item summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 8px; }
.faq__item p {
  margin: 0 0 12px;
  padding: 0 2px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}
.faq__more { margin: 10px 0 0; font-size: 13px; font-weight: 600; }

/* ---------- help disclosure ---------- */
.help {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--soft);
  margin: 20px 0 0;
  padding: 0 12px;
}
.help summary {
  padding: 13px 0;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.help summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.help p {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

/* ---------- footer ---------- */
.foot {
  border-top: 1px solid var(--line);
  padding: 16px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}
.foot p { margin: 2px 0; }
.foot__links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 18px;
  margin: 0 0 6px;
}
.foot__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-weight: 600;
}

/* ---------- static pages (guide / about / privacy) ---------- */
.doc { max-width: 760px; padding-top: 14px; }

.doc__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
}

.doc__article + .doc__article {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 2px solid var(--line);
}

.doc h1 { font-size: 22px; margin: 0 0 6px; }
.doc h2 { font-size: 17px; margin: 24px 0 6px; }
.doc h3 { font-size: 15px; margin: 16px 0 4px; }
.doc p { margin: 0 0 10px; font-size: 15px; line-height: 1.7; }
.doc ul, .doc ol { margin: 6px 0 12px; padding-left: 22px; }
.doc li { font-size: 15px; line-height: 1.7; margin-bottom: 5px; }
.doc__lead { color: var(--muted); }
.doc__updated { font-size: 13px; color: var(--muted); margin: 0 0 14px; }
.doc__note { font-size: 13px; line-height: 1.6; color: var(--muted); }

/* Real output, shown at reading size so it can be selected and copied. */
.doc__sample {
  border: 1px solid var(--line);
  border-left: 3px solid var(--pink);
  border-radius: 0 10px 10px 0;
  background: var(--soft);
  padding: 8px 11px;
  margin: 6px 0 12px;
}
.doc__sample b {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 2px;
}
.doc__sample span {
  display: block;
  font-size: 17px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
/* A kit sample is several lines; they have to be shown the way they are
   copied, so the line breaks are kept and only over-long lines wrap. */
.doc__sample span.doc__block {
  white-space: pre-wrap;
  font-size: 16px;
}

.doc__back { margin: 26px 0 0; font-size: 14px; font-weight: 600; }

@media (max-width: 420px) {
  .wrap { padding: 10px 10px 28px; }
  /* Six tools on a 390px screen: keep the 14px label and the 44px target,
     and buy the room back from the horizontal padding so the row needs two
     lines rather than three. */
  .tabs { gap: 2px 4px; }
  .tab { padding: 8px 8px; }
  .card__out { font-size: 16px; }
  .card--kit .card__out { font-size: 15px; }
  .face-preview__out { font-size: 26px; }
  .field { flex: 1 1 100%; }
  .field select { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .panel { animation: none; }
}