/* Custom creation only: simplified entry, editable draft, explicit save boundary. */
#screen-custom {
  --cc-bg: #211a13;
  --cc-raised: #2c2219;
  --cc-border: #51412d;
  --cc-gold: #c89b4a;
  --cc-gold-light: #e2bc75;
  --cc-text: #e8dfd4;
  --cc-muted: #b8a995;
  color: var(--cc-text);
  color-scheme: dark;
  background: var(--cc-bg);
  overflow-wrap: anywhere;
}
#screen-custom *, #screen-custom *::before, #screen-custom *::after { box-sizing: border-box; }
#screen-custom [hidden] { display: none !important; }
#screen-custom dialog:not([open]) { display: none !important; }
#screen-custom button, #screen-custom input, #screen-custom textarea, #screen-custom select { font-family: inherit; }
#screen-custom button { min-height: 44px; touch-action: manipulation; }
#screen-custom button:disabled { cursor: not-allowed; }
#screen-custom button:focus-visible, #screen-custom summary:focus-visible,
#screen-custom input:focus-visible, #screen-custom textarea:focus-visible,
#screen-custom select:focus-visible { outline: 2px solid var(--cc-gold-light); outline-offset: 3px; }
#screen-custom button, #screen-custom input, #screen-custom textarea, #screen-custom select,
#screen-custom summary, #screen-custom [tabindex] { scroll-margin-top: 20px; scroll-margin-bottom: 140px; }
#screen-custom p { margin: 0; }
#screen-custom h3[tabindex="-1"]:focus { outline: none; }
#screen-custom img { display: block; max-width: 100%; }
#screen-custom .create-header {
  min-height: 62px;
  padding: 8px 18px;
  gap: 8px;
  background: #261d15;
  border-bottom: 1px solid var(--cc-border);
}
#screen-custom .create-header h2 { color: var(--cc-gold-light); font-size: 1.3rem; }
#screen-custom .cc-back { flex: 0 0 44px; width: 44px; padding: 0; color: var(--cc-muted); font-size: 1.8rem; }
#screen-custom .cc-body {
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  padding: 0 22px max(28px, env(safe-area-inset-bottom));
  min-width: 0;
}
#screen-custom section { gap: 20px; padding: 26px 0 0; min-width: 0; }
#screen-custom #ccStep1 { gap: 18px; padding-top: 34px; }
#screen-custom .cc-q, #screen-custom .cc-section-top h3 {
  margin: 0;
  font-size: clamp(1.3rem, 5.6vw, 1.62rem);
  line-height: 1.45;
  letter-spacing: -.035em;
  color: var(--cc-text);
  word-break: keep-all;
}
#screen-custom #ccStep1 .cc-q { margin-bottom: 7px; }
#screen-custom .cc-sub { color: var(--cc-muted); font-size: .8rem; line-height: 1.7; }
#screen-custom .cc-eyebrow { color: var(--cc-muted); letter-spacing: .025em; font-size: .68rem; font-weight: 500; }
#screen-custom .cc-line {
  min-height: 145px;
  padding: 16px 16px 36px;
  border: 1px solid #6a5538;
  border-radius: 16px;
  color: var(--cc-text);
  background: #251c14;
  box-shadow: none;
  font-size: 1rem;
  line-height: 1.65;
  resize: vertical;
}
#screen-custom .cc-line::placeholder { color: #ad9c85; opacity: 1; }
#screen-custom .cc-line:focus { border-color: var(--cc-gold); box-shadow: none; }
#screen-custom .cc-counter { position: absolute; bottom: 12px; right: 16px; color: var(--cc-muted); font-size: .65rem; pointer-events: none; }
#screen-custom .cc-face-section { gap: 0; }
#screen-custom .cc-face-card {
  width: 100%;
  min-height: 112px;
  padding: 12px 14px;
  gap: 12px;
  border: 1px solid #493b2c;
  border-radius: 14px;
  background: transparent;
  box-shadow: none;
  color: var(--cc-text);
  text-align: left;
}
#screen-custom .cc-face-card::after { display: none; }
#screen-custom .cc-face-card:hover { border-color: #8b6b3e; background: #281f16; }
#screen-custom .cc-face-preview { width: 56px; height: 56px; border-radius: 12px; background: #6d2532; border-color: #85505a; font-size: 1.35rem; }
#screen-custom .cc-face-copy { gap: 4px; }
#screen-custom .cc-face-copy b { color: #e0c79f; font-size: .78rem; }
#screen-custom .cc-face-copy small { color: var(--cc-muted); font-size: .875rem; white-space: normal; line-height: 1.6; }
#screen-custom .cc-optional { color: var(--cc-muted); font-size: .65rem; font-weight: 400; margin-left: 3px; }
#screen-custom .cc-face-arrow { font-size: 1.1rem; }
#screen-custom .cc-photo-remove { padding: 8px 3px 0; min-height: 44px; color: var(--cc-muted); font-size: .7rem; }
#screen-custom .cc-concepts-shell { gap: 0; }
#screen-custom .cc-seed-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  overflow: visible;
  scroll-snap-type: none;
}
#screen-custom .cc-chip { min-height: 44px; padding: 8px 12px; color: #c9bda9; background: #2b2219; border-color: #57432d; box-shadow: none; font-size: .75rem; line-height: 1.45; }
#screen-custom #ccConcepts .cc-chip { padding-inline: 10px; font-size: .7rem; background: transparent; }
/* 예시 여섯 개는 3열 두 줄로 맞춘다(한 줄에 다섯, 다음 줄에 하나가 남던 것). */
#screen-custom #ccConcepts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
#screen-custom #ccConcepts .cc-chip { justify-content: center; text-align: center; }
#screen-custom .cc-chip:hover { border-color: #967544; background: #382b1e; }
#screen-custom .cc-chip.on, #screen-custom .cc-chip[aria-pressed="true"] { color: #efcf96; border-color: var(--cc-gold); background: #43311d; box-shadow: none; font-weight: 600; }
#screen-custom .cc-step1-actions { position: static; margin: 8px 0 0; padding: 0; background: none; display: flex; flex-direction: column; gap: 7px; }
#screen-custom .cc-cta {
  min-height: 48px;
  border: 1px solid var(--cc-gold);
  border-radius: 12px;
  padding: 11px 16px;
  background: var(--cc-gold);
  color: #211a13;
  box-shadow: none;
  font-size: .84rem;
  font-weight: 750;
  line-height: 1.55;
  white-space: normal;
}
#screen-custom .cc-cta:hover:not(:disabled) { background: #dbaf60; border-color: #dbaf60; }
#screen-custom .cc-cta:disabled { background: #5b4931; border-color: #665338; color: #b9a485; opacity: 1; filter: none; box-shadow: none; }
#screen-custom .cc-cta:disabled:active { transform: none; }
#screen-custom .cc-text-action { min-height: 44px; padding: 9px 4px; color: #d2b98f; font-size: .72rem; line-height: 1.5; white-space: normal; }
#screen-custom .cc-text-action:hover { color: #f3d49c; text-decoration: underline; text-underline-offset: 4px; }
#screen-custom .cc-center { align-self: center; }
#screen-custom .cc-status-area { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; }
#screen-custom .cc-status-area:has(> :not([hidden])) { padding-top: 18px; }
#screen-custom .cc-busy {
  position: static;
  transform: none;
  max-width: 100%;
  width: 100%;
  padding: 12px 14px;
  text-align: left;
  font-size: .8rem;
  line-height: 1.6;
  border: 1px solid #695335;
  border-radius: 10px;
  color: #e2c797;
  background: #30261b;
  box-shadow: none;
}
#screen-custom .cc-inline-error { width: 100%; padding: 9px 0 2px; color: #ffc1bd; font-size: .76rem; line-height: 1.65; }
#screen-custom .cc-section-top { align-items: flex-start; gap: 12px; }
#screen-custom .cc-section-top > div { min-width: 0; gap: 4px; }
#screen-custom .cc-section-top > .cc-text-action { flex: 0 0 auto; max-width: 84px; margin-top: 16px; text-align: right; }
#screen-custom .cc-card { padding: 17px 0 0; gap: 15px; border: 0; border-top: 1px solid var(--cc-border); border-radius: 0; background: none; box-shadow: none; overflow: visible; }
#screen-custom .cc-card::before { display: none; }
#screen-custom .cc-idrow { gap: 12px; min-width: 0; }
#screen-custom .cc-avatar { width: 62px; height: 72px; border: 1px solid #80623b; border-radius: 12px; background: #6d2532; color: #ddbb82; box-shadow: none; }
#screen-custom .cc-identity-copy { flex: 1; min-width: 0; }
#screen-custom .cc-nm { font-size: 1.34rem; overflow-wrap: anywhere; }
#screen-custom .cc-agebar { gap: 3px; margin-top: 4px; font-size: .75rem; color: var(--cc-muted); }
#screen-custom .cc-ageval { min-width: auto; font-size: .8rem; font-family: inherit; }
#screen-custom #ccIdentityEdit { flex: 0 0 auto; max-width: 80px; font-size: .65rem; text-align: right; }
#screen-custom .cc-pills { gap: 5px; }
#screen-custom .cc-pill { max-width: 100%; white-space: normal; padding: 4px 9px; font-size: .69rem; color: #d8bd8e; border-color: #665032; background: #32281b; }
/* 호칭 표시는 누르는 버튼이다 — 옆 관계 표시와 높이는 맞추되 테두리와 «바꾸기»로 눌린다는 것을 보인다. */
#screen-custom .cc-pills { align-items: center; }
#screen-custom .cc-pill-action { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 12px; border: 1px solid #8b6b3e; text-align: left; cursor: pointer; line-height: 1.45; }
#screen-custom .cc-pill-action:hover:not(:disabled) { border-color: var(--cc-gold); background: #3b2e1f; }
#screen-custom .cc-pill-cta { flex: 0 0 auto; color: var(--cc-gold-light); font-weight: 600; white-space: nowrap; }
#screen-custom .cc-pill-cta::after { content: ' ›'; }
#screen-custom .cc-preview-head { margin: 1px 0 -4px; color: var(--cc-muted); font-size: .73rem; }
#screen-custom .cc-preview-head .cc-text-action { min-height: 44px; padding: 8px 0; }
#screen-custom .cc-bub { padding: 16px; color: #eee0ca; background: #42232a; border: 0; border-left: 2px solid var(--cc-gold); border-radius: 0 10px 10px 0; font-size: .85rem; line-height: 1.85; word-break: keep-all; overflow-wrap: anywhere; }
#screen-custom .cc-badge { color: var(--cc-muted); font-size: .7rem; line-height: 1.6; }
#screen-custom .cc-badge.ok:empty { display: none; }
#screen-custom .cc-badge.warn { color: #e9c78e; padding: 10px 12px; border: 1px solid #705532; border-radius: 9px; background: #30271c; }
#screen-custom .cc-detail-section { border: 1px solid var(--cc-border); border-radius: 12px; background: #271e16; }
#screen-custom .cc-detail-section summary { min-height: 58px; padding: 11px 13px; }
#screen-custom .cc-detail-section summary b { color: var(--cc-text); }
#screen-custom .cc-detail-section summary small { margin-top: 3px; color: var(--cc-muted); font-size: .67rem; }
#screen-custom .cc-detail-fields { gap: 12px; padding: 2px 13px 14px; min-width: 0; }
#screen-custom #ccVoiceExamples { padding: 0; }
#screen-custom .cc-detail-note { color: var(--cc-muted); font-size: .7rem; line-height: 1.7; }
#screen-custom .cc-changes, #screen-custom .cc-pending { padding: 10px 13px; border: 1px solid #665134; border-radius: 10px; background: #30271c; font-size: .73rem; line-height: 1.7; color: #dbc7a5; }
#screen-custom .cc-changes .cc-rowhead { align-items: center; }
#screen-custom .cc-changes .cc-rowhead b { font-size: .75rem; color: #e0c79f; }
#screen-custom .cc-changes ul { margin: 0; padding-left: 18px; }
#screen-custom .cc-changes li + li { margin-top: 4px; }
#screen-custom .cc-pending .cc-text-action { padding-bottom: 4px; }
#screen-custom .cc-preview-tools { display: flex; flex-direction: column; gap: 2px; }
#screen-custom .cc-ghost { flex: 0 1 auto; min-height: 46px; padding: 10px 14px; border: 1px solid #756044; border-radius: 12px; background: #35291d; color: #e0c79f; font-size: .8rem; line-height: 1.55; }
#screen-custom .cc-ghost:hover:not(:disabled) { background: #413222; border-color: #a48556; }
#screen-custom .cc-sticky-actions { position: sticky; bottom: 0; z-index: 5; display: flex; flex-direction: column; gap: 8px; margin: 3px -22px -28px; padding: 13px 22px max(15px, env(safe-area-inset-bottom)); border-top: 1px solid var(--cc-border); background: #261e17; }
#screen-custom .cc-editor-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--cc-border); border-radius: 12px; background: #1c1610; }
#screen-custom .cc-editor-tabs button { min-width: 0; border: 0; border-radius: 8px; background: transparent; color: var(--cc-muted); font-size: .78rem; font-weight: 600; }
#screen-custom .cc-editor-tabs button[aria-selected="true"] { background: #43311d; color: #efcf96; }
#screen-custom .cc-editor-panel, #screen-custom .cc-category-fields { display: grid; gap: 16px; min-width: 0; }
#screen-custom .cc-request-examples { display: flex; flex-wrap: wrap; gap: 6px; }
#screen-custom .cc-request-examples .cc-chip { font-size: .7rem; }
#screen-custom .cc-field { min-width: 0; gap: 7px; color: #d0c0aa; font-size: .76rem; line-height: 1.5; }
#screen-custom .cc-field input, #screen-custom .cc-field select, #screen-custom .cc-field textarea, #screen-custom .cc-inline-input { min-width: 0; min-height: 46px; border: 1px solid #665236; border-radius: 10px; padding: 11px 12px; background: #281f16; color: var(--cc-text); font-size: 1rem; line-height: 1.65; }
#screen-custom .cc-field textarea { resize: vertical; }
#screen-custom .cc-field input::placeholder, #screen-custom .cc-field textarea::placeholder, #screen-custom .cc-inline-input::placeholder { color: #a89780; opacity: 1; font-size: .83rem; }
#screen-custom .cc-field select { padding-right: 25px; }
#screen-custom .cc-field-grid { gap: 10px; }
#screen-custom .cc-call-contract { padding: 13px; border-color: var(--cc-border); background: #281f16; }
#screen-custom .cc-call-head b { color: #d0c0aa; font-size: .76rem; }
#screen-custom .cc-nickname-forms { border-color: var(--cc-border); background: #231a12; }
#screen-custom .cc-nickname-head { color: var(--cc-muted); font-size: .69rem; gap: 8px; }
#screen-custom .cc-nickname-head b { color: var(--cc-gold-light); }
#screen-custom .cc-call-variants .cc-chip { min-height: 44px; padding: 8px 10px; font-size: .7rem; }
#screen-custom .cc-grp { gap: 10px; padding: 0; border: 0; background: none; }
#screen-custom .cc-grp-title { font-size: .76rem; color: #d0c0aa; font-weight: 500; }
#screen-custom .cc-edit-feedback { font-size: .7rem; line-height: 1.65; color: var(--cc-muted); }
#screen-custom .cc-done { align-items: center; text-align: center; gap: 16px; padding-top: 38px; }
#screen-custom .cc-done-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #3c3820; color: #d8ca83; font-size: 1rem; }
#screen-custom .cc-done-photo { display: grid; place-items: center; overflow: hidden; width: 96px; height: 112px; margin-top: 10px; border: 1px solid #80623b; border-radius: 16px; background: #6d2532; color: #ddbb82; font-size: 2rem; }
#screen-custom .cc-done-photo img { width: 100%; height: 100%; object-fit: cover; }
#screen-custom .cc-done h4 { margin: 0; font-family: var(--font-serif); font-size: 1.5rem; }
#screen-custom #ccChatStart { margin-top: 12px; }
#screen-custom #ccNewCharacter { align-self: stretch; flex: 0 0 auto; }
#screen-custom .cc-dialog .cc-call-contract { padding: 0; border: 0; background: none; }
#screen-custom .cc-dialog { width: min(420px, calc(100vw - 36px)); max-height: calc(100dvh - 48px); overflow-y: auto; margin: auto; padding: 22px; border: 1px solid #8b7048; border-radius: 18px; background: #2b2118; color: var(--cc-text); box-shadow: 0 22px 80px rgba(0,0,0,.45); }
#screen-custom .cc-dialog::backdrop { background: rgba(12,8,6,.76); }
#screen-custom .cc-dialog h3 { margin: 0; font-size: 1.15rem; font-family: var(--font-serif); }
#screen-custom .cc-dialog[open], #screen-custom .cc-dialog form { display: flex; flex-direction: column; gap: 17px; }
#screen-custom .cc-dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 3px; }
#screen-custom .cc-dialog-actions button { min-width: 0; }
@media (max-width: 360px) {
  #screen-custom .cc-body { padding-inline: 16px; }
  #screen-custom .create-header { padding-inline: 12px; }
  #screen-custom .cc-sticky-actions { margin-inline: -16px; padding-inline: 16px; }
  #screen-custom .cc-section-top { gap: 6px; }
  #screen-custom .cc-section-top h3 { font-size: 1.24rem; }
  #screen-custom .cc-section-top > .cc-text-action { max-width: 72px; font-size: .67rem; }
  #screen-custom #ccConcepts .cc-chip { padding-inline: 9px; font-size: .67rem; }
  #screen-custom .cc-field-grid { grid-template-columns: 1fr; }
  #screen-custom .cc-dialog { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  #screen-custom, #screen-custom * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}