/* 작가 스튜디오(디자인 D-207 2판) — 사이트 1120. 작업 공간: 머리 줄 칸 셋 + 3열 카드. 편집: 위 막대 + 왼쪽 600 · 사이 40 ·
   오른쪽 480(스크롤 따라 붙음), 390 은 한 줄. 글 최소 14. 칩은 D-194 칩(.sf-chip 38). 색은 tokens.css · dokimi.css 그대로. */
.sf .sf-main:has(.st) { max-width: 1160px; }
.st h1 { font-size: 28px; font-weight: 800; margin: 6px 0 0; letter-spacing: -0.01em; }
.st-lead { font-size: 15px; color: var(--tk-ink2); }
.st-hint { font-size: 14px; color: var(--tk-faint); margin: 6px 0 0; line-height: 1.5; }
.st-warn { display: flex; gap: 8px; margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--sf-warn-soft);
  color: var(--sf-warn); font-size: 14px; font-weight: 700; line-height: 1.55; }
.st-warn[hidden], .st-custom-box[hidden], [data-custom][hidden], .st-restart[hidden] { display: none; }
.st-warn::before { content: '!'; flex: 0 0 18px; height: 18px; border-radius: 9px; border: 1.8px solid currentColor;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; margin-top: 1px; }
.st-sm { height: 36px; padding: 0 12px; border-radius: 10px; border: 1.5px solid var(--tk-line); background: var(--tk-card); color: var(--tk-ink);
  font: inherit; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
.st-sm:disabled, .st-mini:disabled { opacity: .4; cursor: default; }
.st-sm.rose { background: var(--tk-rose); color: var(--tk-on-rose); border-color: var(--tk-rose); }
.st-n { min-width: 22px; height: 22px; border-radius: 11px; background: var(--tk-chip); display: inline-flex; align-items: center;
  justify-content: center; font-size: 13px; padding: 0 6px; }
.st-mini { height: 28px; padding: 0 9px; border-radius: 8px; border: 1px solid var(--tk-line); background: transparent; color: var(--tk-ink2);
  font: inherit; font-size: 14px; cursor: pointer; white-space: nowrap; }
.st-link { background: none; border: 0; color: var(--tk-ink2); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.st-pill { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: 13px; background: var(--tk-rose-soft);
  color: var(--tk-rose-ink); font-size: 14px; font-weight: 800; }
.st-pill-sub { margin-left: 4px; font-weight: 600; opacity: .7; }
.st-ph { display: block; background: var(--tk-chip); width: 100%; height: 100%; position: relative; }

/* 작업 공간 */
.st-wshead { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.st-lock { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 14px; background: var(--tk-chip); margin-bottom: 22px; font-size: 14px; }
.st-lock b { font-size: 16px; }
.st-lock span { color: var(--tk-ink2); }
.st-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.st-tile { position: relative; border-radius: 18px; background: var(--tk-card); box-shadow: inset 0 0 0 1.5px var(--tk-line); overflow: hidden; min-height: 300px; }
.st-tile-open { all: unset; display: block; width: 100%; cursor: pointer; }
.st-tile-open img, .st-tile-open .st-ph { display: block; width: 100%; height: 200px; object-fit: cover; object-position: top; }
.st-tile-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.st-tile-body b { font-size: 16px; }
.st-tile-body > span { font-size: 14px; color: var(--tk-faint); }
.st-tile-del { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 17px; border: 0; background: rgba(0,0,0,.45); color: #fff; cursor: pointer; display: grid; place-items: center; }
.st-link[data-trash] { display: inline-flex; align-items: center; gap: 6px; }
.st-tile-act { position: absolute; bottom: 14px; right: 14px; }
.st-tile.trash { opacity: .8; }
.st-new { all: unset; box-sizing: border-box; border-radius: 18px; border: 1.5px dashed var(--tk-line); min-height: 300px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-align: center; }
.st-new i { width: 44px; height: 44px; border-radius: 22px; background: var(--tk-chip); display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 22px; }
.st-new b { font-size: 15px; } .st-new span { font-size: 14px; color: var(--tk-faint); }
.st-empty-slot { border: 1.5px dashed var(--tk-line); background: transparent; box-shadow: none; }
.st-note { margin-top: 14px; font-size: 14px; color: var(--tk-faint); }

/* 편집 — 위 막대 */
.st-top { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--tk-line); margin-bottom: 18px; }
.st-backbtn { width: 40px; height: 40px; border-radius: 20px; border: 1.5px solid var(--tk-line); background: var(--tk-card); color: var(--tk-ink); font-size: 20px; cursor: pointer; }
.st-tt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.st-tt b { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-tt span { font-size: 14px; color: var(--tk-faint); }
.st-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.st-gen { height: 40px; padding: 0 18px; border-radius: 12px; border: 0; background: var(--tk-rose); color: var(--tk-on-rose); font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }
.st-gen:disabled { opacity: .4; cursor: default; }
/* 더 보기 — 화면 오른쪽 위 작은 아이콘(시안 공통 규칙 1, 10/27: 단추 줄 가운데 ⋯ 금지 · 단추 줄은 보조 · 주 둘). 36 · 테두리 없음 · ink2 */
.st-more-ic { flex: 0 0 36px; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--tk-ink2);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.st-more-ic:hover { background: var(--tk-chip); }
.st-cols { display: grid; grid-template-columns: minmax(0, 600px) 480px; gap: 40px; justify-content: center; align-items: start; }

/* 편집 — 왼쪽 묶음 */
.st-grp { border-bottom: 1px solid var(--tk-line); }
.st-grp-h { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 8px; padding: 16px 0; cursor: pointer; }
.st-grp-h h2 { flex: 1; font-size: 17px; font-weight: 800; margin: 0; }
.st-grp-n { font-size: 14px; color: var(--tk-faint); }
.st-caret { width: 9px; height: 9px; border-right: 2px solid var(--tk-ink2); border-bottom: 2px solid var(--tk-ink2); transform: rotate(-135deg); margin: 4px 6px 0; }
.st-grp.shut .st-caret, .st-pc:not(.open) .st-caret { transform: rotate(45deg); margin-top: -4px; }
.st-grp-b { padding: 0 0 18px; }
.st-grp.shut .st-grp-b { display: none; }
.st-fh { display: flex; align-items: center; gap: 8px; margin: 14px 0 8px; }
.st-fh label, .st-fh b { flex: 1; font-size: 14.5px; font-weight: 800; }
.st-badge { height: 24px; padding: 0 9px; border-radius: 8px; font-size: 13px; font-weight: 800; display: inline-flex; align-items: center; }
.st-badge.mine { background: var(--tk-ink); color: var(--tk-bg); }
.st-badge.ai { background: #E6E1FA; color: #4B3C99; }
:root[data-theme='dark'] .st-badge.ai, :root:not([data-theme='light']) .st-badge.ai { background: #2E2850; color: #C9BFFF; }
:root[data-theme='light'] .st-badge.ai { background: #ECE8FB; color: #4B3C99; }
.st-label { font-size: 14.5px; font-weight: 800; margin: 14px 0 8px; }
.st-label span { font-weight: 500; color: var(--tk-faint); margin-left: 4px; }
.st-premise { min-height: 76px; resize: vertical; padding: 12px 14px; line-height: 1.5; font-size: 15px; }
.st-ta { min-height: 64px; resize: vertical; padding: 10px 14px; line-height: 1.5; }
.sf-field.bad { border-color: var(--sf-warn); }
.sf-chip:disabled { opacity: .4; cursor: default; }
.sf-chip.own { font-weight: 800; }
.st-custom { display: inline-flex; align-items: center; gap: 6px; }
.st-custom-b { background: transparent !important; box-shadow: inset 0 0 0 1.5px var(--tk-line) !important; border: 0; border-style: dashed; outline: 1.5px dashed var(--tk-line); outline-offset: -1.5px; }
.st-custom-box { display: inline-flex; gap: 6px; align-items: center; }
.st-custom-box .sf-field { width: 140px; min-height: 38px; padding: 0 12px; }
.st-fillrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.st-suggest { margin-top: 12px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--tk-line); background: var(--tk-card); }
.st-suggest .st-fh { margin-top: 0; }
.st-sg { display: grid; grid-template-columns: 90px 1fr auto auto; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--tk-line); font-size: 14px; }
.st-sg span { color: var(--tk-faint); } .st-sg p { margin: 0; }
.st-cast { display: flex; flex-direction: column; gap: 10px; }
.st-pc { border: 1.5px solid var(--tk-line); border-radius: 16px; background: var(--tk-card); }
.st-pc.open { border-color: var(--tk-ink); }
.st-pc-head { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; }
.st-pc-av { width: 40px; height: 40px; border-radius: 20px; background: var(--tk-chip); display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; color: var(--tk-ink2); flex: 0 0 40px; overflow: hidden; }
.st-pc-av img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.st-pc-name { flex: 1; min-width: 0; }
.st-pc-name b { display: block; font-size: 15px; }
.st-pc-name span { font-size: 14px; color: var(--tk-faint); }
.st-pc-body { padding: 0 14px 16px; }
.st-pc:not(.open) .st-pc-body { display: none; }
.st-row { display: grid; grid-template-columns: 1fr 90px 90px; gap: 8px; }
.st-row2 { display: grid; grid-template-columns: 1fr 90px; gap: 8px; }
.st-row select.sf-field { appearance: none; padding: 0 14px; }
.st-restart { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--sf-warn-soft); color: var(--sf-warn); font-size: 14px; font-weight: 700; }
.st-restart span { flex: 1 1 100%; }
.st-rm { margin-top: 14px; background: none; border: 0; color: var(--tk-faint); font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; padding: 0; }
.st-add { width: 100%; margin-top: 10px; height: 46px; border-radius: 12px; border: 1.5px dashed var(--tk-line); background: transparent; color: var(--tk-ink); font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; }
.st-add:disabled { opacity: .4; cursor: default; }
.st-lines { border: 1.5px solid var(--tk-line); border-radius: 12px; overflow: hidden; }
.st-lines label { display: flex; align-items: center; gap: 10px; padding: 0 12px; border-top: 1px solid var(--tk-line); background: var(--tk-card); }
.st-lines label:first-child { border-top: 0; }
.st-lines label > span { color: var(--tk-faint); font-size: 14px; width: 14px; }
.st-lines input { flex: 1; min-height: 46px; border: 0; background: transparent; color: var(--tk-ink); font: inherit; font-size: 14.5px; outline: none; min-width: 0; }
/* 첫 단톡 줄 — 늘어나는 한 줄 칸(fitRow, QA 11/04 S6). 46 = 위아래 12 + 22 */
.st-lines textarea { flex: 1; min-width: 0; min-height: 46px; padding: 12px 0; border: 0; background: transparent; color: var(--tk-ink); font: inherit; font-size: 14.5px; line-height: 1.5;
  outline: none; resize: none; overflow: hidden; display: block; }
.st-lines select { border: 0; background: transparent; color: var(--tk-ink2); font: inherit; font-size: 14px; max-width: 96px; }
.st-styles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.st-style { border: 0; padding: 0; background: var(--tk-card); border-radius: 12px; overflow: hidden; cursor: pointer; color: inherit; font: inherit;
  box-shadow: inset 0 0 0 1.5px var(--tk-line); text-align: left; }
.st-style img { display: block; width: 100%; height: 84px; object-fit: cover; }
.st-style span { display: block; padding: 7px 10px; font-size: 14px; font-weight: 700; }
.st-style.on { box-shadow: 0 0 0 2.5px var(--tk-rose); }
.st-style.locked { opacity: .5; cursor: default; }

/* 편집 — 오른쪽 카드(차오름) */
.st-out { position: sticky; top: 20px; }
.st-strip { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; margin-bottom: 12px; font-size: 14px; }
.st-strip i { width: 8px; height: 8px; border-radius: 4px; background: var(--tk-rose); }
.st-strip b { color: var(--tk-rose-ink); }
.st-strip span { margin-left: auto; color: var(--tk-ink2); }
.st-strip.run { background: var(--tk-rose-soft); }
.st-strip.run i { animation: st-blink 1.2s infinite; }
.st-strip.ok { background: var(--tk-chip); } .st-strip.ok b { color: var(--tk-ink); } .st-strip.ok i { background: var(--sf-up); }
@keyframes st-blink { 50% { opacity: .3; } }
.st-cardbox { border-radius: 20px; }
.st-cover { position: relative; border-radius: 20px; overflow: hidden; background: var(--tk-chip); aspect-ratio: 480 / 430; }
.st-cover img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.st-cover .st-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.st-cover em { font-style: normal; font-size: 14px; color: var(--tk-faint); }
.st-tag { position: absolute; left: 14px; top: 14px; height: 26px; padding: 0 9px; border-radius: 8px; background: rgba(0,0,0,.45);
  color: #fff; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.st-ring { display: block; animation: st-rot 1s linear infinite; }
@keyframes st-rot { to { transform: rotate(360deg); } }
/* 그림 다시 그리는 중 — 흐린 그림 위에 고리 + '다시 그리는 중'(13/700) */
.st-blur { filter: blur(6px); transform: scale(1.04); }
.st-redraw { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(0,0,0,.28); }
.st-redraw b { font-size: 13px; font-weight: 700; color: #fff; }
.st-facewrap { position: relative; display: block; width: 44px; height: 44px; border-radius: 22px; overflow: hidden; flex: 0 0 44px; }
.st-facewrap .st-blur { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.st-facewrap .st-redraw b { display: none; }   /* 얼굴은 좁아 글 없이 고리만 */
.st-imgbtns { display: flex; gap: 14px; margin: 10px 0 0; flex-wrap: wrap; }
.st-ibtn { display: inline-flex; flex-direction: column; gap: 4px; }
.st-ibtn small { font-size: 12.5px; color: var(--tk-faint); }
@media (prefers-reduced-motion: reduce) { .st-ring { animation: st-blink 1s ease-in-out infinite; } }
.st-ctitle { font-size: 22px; font-weight: 800; line-height: 1.35; margin: 14px 0 4px; white-space: pre-line; }
.st-cq { display: block; font-size: 14.5px; color: var(--tk-ink2); }
.st-people { margin-top: 12px; }
.st-person { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; }
.st-person img, .st-person .st-fx { width: 44px; height: 44px; border-radius: 22px; object-fit: cover; object-position: top; background: var(--tk-chip); flex: 0 0 44px; }
.st-person .st-fx { display: flex; align-items: center; justify-content: center; }
.st-personwrap { padding: 2px 0; }
.st-person > div { flex: 1; font-size: 14px; line-height: 1.5; color: var(--tk-ink2); }
.st-person b { color: var(--tk-ink); }
.st-f { padding: 14px 0; border-top: 1px solid var(--tk-line); margin-top: 10px; }
.st-f h4 { font-size: 14px; font-weight: 700; color: var(--tk-faint); margin: 0 0 8px; }
.st-f p { font-size: 14.5px; line-height: 1.7; margin: 0 0 10px; color: var(--tk-ink2); }
.st-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.st-pills span { height: 32px; padding: 0 12px; border-radius: 16px; background: var(--tk-chip); font-size: 14px; display: inline-flex; align-items: center; }
.st-bones { margin-top: 14px; display: grid; gap: 10px; }
.st-bones i { display: block; height: 14px; border-radius: 7px; background: var(--tk-chip); animation: st-blink 1.6s infinite; }
.st-check { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.st-check li { display: flex; gap: 8px; font-size: 14px; color: var(--tk-ink2); }
.st-check li::before { content: ''; display: inline-block; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat; flex: none; margin-top: 2px; color: var(--tk-ink); }
.st-check li.warn { color: var(--sf-warn); } .st-check li.warn::before { content: '!'; -webkit-mask: none; mask: none; background: none; width: 16px; height: auto; text-align: center; font-weight: 900; color: var(--sf-warn); }

/* 시트 · 카드 상세 */
.st-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: flex-end; justify-content: center; z-index: 50; }
.st-sheet { position: relative; width: 100%; max-width: 520px; max-height: 92vh; overflow: auto; background: var(--tk-card); color: var(--tk-ink); border-radius: 20px 20px 0 0; padding: 22px 20px 26px; }
.st-sheet.wide { max-width: 980px; }
@media (min-width: 900px) { .st-scrim { align-items: center; } .st-sheet { border-radius: 20px; } }
.st-sheet h3 { font-size: 19px; margin: 0 0 6px; }
.st-sheet > p { font-size: 14px; color: var(--tk-ink2); margin: 0 0 14px; line-height: 1.6; }
.st-note-box { padding: 10px 12px; border-radius: 12px; background: var(--tk-chip); font-size: 14px; margin-bottom: 12px; }
.st-submit { display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; margin-top: 12px; border-radius: 14px; border: 0;
  background: var(--tk-rose); color: var(--tk-on-rose); font: inherit; font-weight: 800; font-size: 16px; cursor: pointer; text-decoration: none; }
.st-submit:disabled { opacity: .4; cursor: default; }
.st-acts2 { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; margin-top: 8px; }
.st-acts2 .st-sm { height: 52px; margin-top: 12px; }
.st-x { position: absolute; right: 14px; top: 10px; width: 36px; height: 36px; border-radius: 18px; border: 0; background: var(--tk-chip); color: var(--tk-ink); font-size: 20px; cursor: pointer; }
.st-detail { display: grid; grid-template-columns: 420px 1fr; gap: 28px; }
.st-dcover { width: 420px; height: 560px; border-radius: 18px; object-fit: cover; object-position: top; }
.st-dtag { display: inline-flex; height: 26px; padding: 0 9px; border-radius: 8px; background: var(--tk-chip); font-size: 14px; font-weight: 700; align-items: center; }
.st-dbody h3 { font-size: 28px; margin: 10px 0 6px; }
.st-dmeta { font-size: 14px; color: var(--tk-faint); }
.st-dbody h4 { font-size: 14px; color: var(--tk-faint); margin: 16px 0 6px; }
.st-dbody p, .st-dbody ol { font-size: 15px; line-height: 1.7; margin: 0; color: var(--tk-ink2); }
.st-dbody .st-person img, .st-dbody .st-person .st-fx { width: 56px; height: 56px; border-radius: 28px; flex-basis: 56px; }

@media (max-width: 1100px) {
  .st-cols { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .st-out { position: static; order: -1; }
  .st-detail { grid-template-columns: 1fr; }
  .st-dcover { width: 100%; height: auto; aspect-ratio: 3 / 4; }
}
@media (max-width: 760px) {
  .st-grid { grid-template-columns: 1fr; }
  .st-top { flex-wrap: wrap; }
  .st-acts { width: 100%; justify-content: stretch; }
  .st-acts > * { flex: 1; justify-content: center; }
  .st-top > .st-backbtn { order: 0; } .st-top > .st-tt { order: 1; } .st-top > .st-more-ic { order: 2; } .st-top > .st-acts { order: 3; }   /* ⋯ 는 제목 줄 오른쪽 위, 단추 줄은 아래 */
  .st-acts > .st-gen { flex: 1.6; white-space: nowrap; }
}
@media (max-width: 560px) {
  .st-styles { gap: 6px; }
  .st-style img { height: 72px; }
  .st-row { grid-template-columns: 1fr 72px 72px; }
  .st-sg { grid-template-columns: 1fr auto auto; }
  .st-sg span { grid-column: 1 / -1; }
}

.st-free { min-height: 220px; resize: vertical; padding: 14px; line-height: 1.65; font-size: 15px; }
.st-free { height: 300px; min-height: 160px; resize: vertical; overflow: auto; }
@media (max-width: 560px) { .st-free { height: 240px; } }
.st-freehead { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.st-freehead .st-hint { flex: 1; margin: 0; }
.st-count { font-size: 14px; color: var(--tk-faint); white-space: nowrap; }
.st-freebtns { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.st-sm.ink { background: var(--tk-ink); color: var(--tk-bg); border-color: var(--tk-ink); }
@media (max-width: 1100px) { .st-ed:not(.has-out) .st-out { display: none; } }   /* 폰: 카드가 생기기 전엔 빈 자리로 입력을 밀지 않는다 */

/* 폰 글자(디자인 D-217 정정 — 사이트 폰 3단계 중 ≤480, 재빈 "지금도 작다"). 공통 --tk-fs-* 세트(사이트 디자인 2 · 웹 관리와 같음) —
   웹이 tokens.css 에 올리면 아래 .st 안 값은 지우고 그걸 쓴다.
   카드 미리보기(.st-out 안)는 R1 카드 값 그대로라 손대지 않는다. */
@media (max-width: 480px) {
  .st { --tk-fs-title: 30px; --tk-fs-h: 19px; --tk-fs-body: 18px; --tk-fs-read: 17px; --tk-fs-sec: 16px; --tk-fs-meta: 15px; }
  :root[data-theme='light'] .st { --tk-faint: #6B6F78; }
  .st-fh label, .st-fh b, .st-label, .st-grp-h h2 { font-weight: 800; font-size: var(--tk-fs-sec); }
  .st .sf-field, .st-premise, .st-free, .st-lines input, .st-lines textarea, .st-lines select { font-size: var(--tk-fs-body); }
  .st .sf-chip, .st-style span, .st-hint, .st-lead, .st-note, .st-label span, .st-sheet > p, .st-new span,
  .st .sf-field::placeholder { font-size: var(--tk-fs-sec); }
  .st-count, .st-tile-body > span, .st-tt span, .st-grp-n, .st-dmeta { font-size: var(--tk-fs-meta); }
  .st-tt b { font-size: var(--tk-fs-h); }
  .st-sm, .st-mini, .st-gen, .st .sf-chip { height: 44px; }   /* 조작 44 이상 */
  .st-backbtn, .st-x { width: 44px; height: 44px; border-radius: 22px; }
  .st-link, .st-rm { min-height: 44px; }
  .st .sf-field:not(textarea) { min-height: 44px; }
}

/* Studio 제출하기(재빈 10/6, 디자인 검수 10/6) — 작업 공간 띠 · 잠금 칸 단추 · 확인 창 주 단추 */
.st-sendbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 22px; }   /* [제출하기] 단추 하나(띠 글 뺌, COPY-FIX #12) */
.st-sendbar span { font-size: 14px; color: var(--tk-ink2); }
.st-sendbar .sf-btn { flex: none; width: auto; height: 44px; margin: 0; padding: 0 18px; font-size: 14.5px; }
.st-lock-act { margin-top: 8px; }
.st-lock-act .sf-btn { display: inline-flex; width: auto; height: 40px; margin: 0; padding: 0 16px; font-size: 14px; }
.dk-dialog-row .st-submit-ok { background: var(--tk-rose); color: var(--tk-on-rose); }

/* 그림체 라이브러리 고르기(매니저 10/8 · 디자인 상세화면 시안 style-picker) — 예시 2:3 그대로 · 고른 표시 · 묶음 접기 */
.st-sp-picked { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--tk-rose-soft); margin: 4px 0 14px; }
.st-sp-picked img { width: 40px; height: 60px; border-radius: 8px; object-fit: cover; flex: none; }
.st-sp-k { font-size: 12px; font-weight: 800; color: var(--tk-rose); }
.st-sp-picked b { display: block; font-size: 15px; font-weight: 800; margin-top: 1px; }
.st-sp-picked small { display: block; font-size: 12.5px; color: var(--tk-ink2); margin-top: 1px; }
.st-sp-grp { border-top: 1px solid var(--tk-line); }
.st-sp-grp:last-of-type { border-bottom: 1px solid var(--tk-line); }
.st-sp-h { width: 100%; display: flex; align-items: center; gap: 8px; min-height: 52px; text-align: left; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.st-sp-h b { font-size: 15px; font-weight: 800; }
.st-sp-n { font-size: 13.5px; color: var(--tk-faint); font-weight: 600; }
.st-sp-mine { height: 22px; padding: 0 8px; border-radius: 11px; background: var(--tk-chip); color: var(--tk-ink2); font-size: 11.5px; font-weight: 750; display: inline-flex; align-items: center; }
.st-sp-peek { margin-left: auto; display: flex; }
.st-sp-peek img { width: 24px; height: 36px; border-radius: 5px; object-fit: cover; margin-left: -6px; box-shadow: 0 0 0 2px var(--tk-bg); }
.st-sp-chev { color: var(--tk-faint); flex: none; transition: transform .15s; }
.st-sp-grp.open .st-sp-peek { display: none; }
.st-sp-grp.open .st-sp-chev { transform: rotate(180deg); margin-left: auto; }
.st-sp-b { display: none; padding: 2px 0 18px; }
.st-sp-grp.open .st-sp-b { display: block; }
.st-sp-sub { font-size: 12.5px; font-weight: 750; color: var(--tk-faint); margin: 14px 0 8px; }
.st-libgrid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.st-lib { position: relative; display: flex; flex-direction: column; text-align: left; box-shadow: inset 0 0 0 1.5px var(--tk-line); }
.st-lib img { height: auto; aspect-ratio: 2 / 3; object-fit: cover; }
.st-lib span { display: block; padding: 8px 10px 2px; font-size: 14px; font-weight: 750; }
.st-lib small { margin: 0 10px 10px; font-size: 12px; line-height: 1.4; color: var(--tk-faint); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.st-lib i { font-style: normal; }
.st-sp-mono { position: absolute; left: 8px; top: 8px; height: 20px; padding: 0 7px; border-radius: 10px; background: rgba(18, 18, 20, .62); color: #fff; font-size: 11px; font-weight: 750; display: flex; align-items: center; }
.st-sp-ck { display: none; position: absolute; right: 8px; top: 8px; width: 26px; height: 26px; border-radius: 13px; background: var(--tk-rose); color: var(--tk-on-rose); place-items: center; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.st-lib.on { box-shadow: inset 0 0 0 3px var(--tk-rose); }
.st-lib.on span { color: var(--tk-rose); }
.st-lib.on .st-sp-ck { display: grid; }
.st-lib.on img { outline: 3px solid var(--tk-rose); outline-offset: -3px; }
@media (max-width: 560px) {
  .st-libgrid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .st-lib img { height: auto; }
  .st-lib span { font-size: 13px; padding: 7px 8px 2px; }
  .st-lib small { margin: 0 8px 8px; font-size: 11.5px; }
}
.st-h-ok { display: flex; align-items: center; gap: 8px; }
.st-h-ok .st-ck { flex: none; }
/* 작가 길 조정 — 시안 10/22 (studio.css 끝에 붙임) */
.st-check li > span { flex: 1; min-width: 0; }
.st-check li.wait::before { display: none; }
.st-check li.wait { color: var(--tk-ink2); }
.st-check li.wait .st-mk { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--tk-ink2); font-style: normal; }
.st-check li.wait:not(.run) .st-ring { animation: none; }
.st-check li.wait:not(.run) .st-ring circle + circle { display: none; }
.st-check li.wait small { flex: none; font-size: 13px; color: var(--tk-ink3, var(--tk-ink2)); opacity: .8; }
.st-retry { flex: none; font: inherit; font-size: 13px; font-weight: 700; color: var(--sf-warn); background: none; border: 1px solid currentColor; border-radius: 999px; padding: 1px 10px; cursor: pointer; }
.st-sendbar.wait span { display: inline-flex; align-items: center; gap: 6px; }
.st-sendbar.wait .st-ring { color: var(--tk-ink2); }
.st-tilemk { display: inline-block; vertical-align: -1px; margin-left: 6px; color: var(--tk-ink2); }

/* 장르 칩 여러 개 고르기(시안 studio-v1 SPEC 10/26 · BOARD-5) — 장르 · 배경 · 분위기 · 독자 줄(이름 132 + 칩), 캐릭터 역할 칩, '선택' 꼬리표,
   오른쪽 도전과제 미리보기, 만드는 중 글 단계 작은 줄. 값은 screens.html(.grow · .pill.gp · .opt · .achv) 그대로, 색은 tokens.css */
.st-gbody { display: flex; flex-direction: column; gap: 14px; padding-top: 4px; }
.st-grow { display: flex; gap: 14px; align-items: flex-start; }
.st-glab { width: 132px; flex: none; font-size: 14px; font-weight: 600; color: var(--tk-ink2); padding-top: 7px; }
.st-glab em { font-style: normal; font-weight: 500; color: var(--tk-faint); margin-left: 6px; font-size: 12.5px; }
.st-grow .sf-chips { flex: 1; min-width: 0; gap: 6px; }
.st-opt { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; margin-left: 6px; border-radius: 6px; background: var(--tk-chip);
  color: var(--tk-faint); font-size: 11.5px; font-weight: 600; font-style: normal; vertical-align: 1px; }
.st .sf-chip.st-gchip { height: 34px; padding: 0 14px; gap: 4px; font-size: 13.5px; font-weight: 700; background: var(--tk-chip); box-shadow: none; }
.st .sf-chip.st-gchip.on { background: var(--tk-ink); color: var(--tk-bg); }
.st .sf-chip.st-gchip.on::before { width: 9px; height: 5px; border-width: 0 0 2px 2px; margin-right: 2px; }   /* 체크 12 */
.st .sf-chip.st-gchip.on.ai { background: var(--tk-chip); color: var(--tk-ink); box-shadow: inset 0 0 0 1px var(--tk-line); }   /* 채우기가 고른 칩 — 다른 AI 칸처럼 옅은 면 */
.st-rolelab { display: flex; align-items: center; }
.st-roles { margin-bottom: 4px; gap: 6px; }
.st .sf-chip.st-role { height: 28px; padding: 0 12px; font-size: 12.5px; font-weight: 700; background: var(--tk-chip); box-shadow: none; }
.st .sf-chip.st-role.on { background: var(--tk-ink); color: var(--tk-bg); }
.st .sf-chip.st-role.on::before { display: none; }
.st-strip small { font-size: 13px; color: var(--tk-ink2); }
.st-achv { margin-top: 14px; background: var(--tk-card); border: 1px solid var(--tk-line); border-radius: 18px; padding: 12px 12px 6px; }
.st-achv-h { font-size: 12px; font-weight: 700; margin-bottom: 8px; }
.st-ar { display: flex; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--tk-line); }
.st-achv-h + .st-ar { border-top: 0; }
.st-al { width: 36px; height: 36px; border-radius: 10px; background: var(--tk-chip); color: var(--tk-faint); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.st-at { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.st-at b { font-size: 14px; font-weight: 700; }
.st-sk { display: block; flex: 1; max-width: 160px; height: 12px; border-radius: 6px; background: var(--tk-line); }
.st-atag { height: 22px; padding: 0 8px; margin-left: auto; border-radius: 11px; background: var(--tk-chip); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; }
@media (max-width: 560px) {
  .st-grow { flex-direction: column; gap: 8px; }
  .st-glab { width: auto; padding: 0; }
}
/* 폰: 카드가 생기기 전에도 도전과제 카드는 입력 아래에(시안 '모바일은 미리보기 맨 아래') — 빈 카드 자리 · 띠는 그대로 숨김 */
@media (max-width: 1100px) {
  .st-ed:not(.has-out) .st-out { display: contents; }
  .st-ed:not(.has-out) .st-out > :not(.st-achv):not(.st-warn[data-field="job"]) { display: none; }
  .st-ed:not(.has-out) .st-out > .st-achv { order: 1; }
}
/* 폰: 카드 없을 때도 작업 줄(실패 이유 · 통신 끊김)은 [만들기] 바로 아래 — 만드는 중 띠가 있던 자리(시안 fail-visible A 11/03). 숨김은 [hidden] 그대로 */
@media (max-width: 1100px) {
  .st-ed:not(.has-out) .st-out > .st-warn[data-field="job"] { order: -1; margin: 0 0 4px; }
  .st-ed:not(.has-out) .st-out > .st-warn[data-field="job"][hidden] { display: none; }
}
/* 누르는 자리 44(디자인 판단 10/26, BOARD-5 덧붙임) — 보이는 칩은 그대로, 위아래 5 씩 히트 영역만 넓힌다. ::before 는 고른 칩 체크라 ::after 로 */
.st .sf-chip.st-gchip, .st .sf-chip.st-role { position: relative; }
.st .sf-chip.st-gchip::after { content: ""; position: absolute; inset: -5px 0; }
@media (max-width: 560px), (pointer: coarse) {
  .st-grow .sf-chips, .st-roles { row-gap: 10px; }   /* 넓힌 히트 영역이 윗줄 · 아랫줄과 겹치지 않게(column-gap 6 그대로) */
}
@media (pointer: coarse) {   /* 폰: 역할 칩도 장르 칩과 같은 높이 34 + 같은 히트 영역. PC 는 28 그대로 */
  .st .sf-chip.st-role { height: 34px; padding: 0 14px; font-size: 13.5px; }
  .st .sf-chip.st-role::after { content: ""; position: absolute; inset: -5px 0; }
}

/* 작가 그림 올리기(Studio §7 — 시안 studio-v1 SPEC '작가 그림 올리기 §7' · BOARD-7, 값 정본 screens.html s=art-*).
   운영 웹 자리: 표지 · 프로필 사진은 오른쪽 카드 단추 묶음에 [올리기], CG 3칸 · 보내는 사진 줄은 왼쪽 '그림' 묶음 끝.
   away = --tk-danger, toward = --sf-up, meta = --tk-faint. 폰(≤599)은 칸 1fr 3열 · 단추는 아이콘만 30 원 */
.st-uplim { margin: 0 0 12px; font-size: 13px; color: var(--tk-faint); }
.st-artbox { margin-top: 24px; }
.st-asec { padding: 0 0 28px; }
.st-asec + .st-asec { padding-top: 24px; border-top: 1px solid var(--tk-line); }
.st-ahead { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; }
.st-ahead em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--tk-faint); margin-left: 2px; }
.st-aslot { min-width: 0; }
.st-asv { position: relative; aspect-ratio: 2 / 3; border-radius: 14px; overflow: hidden; background: var(--tk-chip); }
.st-asv > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-asv.empty { background: transparent; border: 1.5px dashed var(--tk-line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 8px; }
.st-ab { height: 30px; padding: 0 10px; border-radius: 999px; border: 0; background: var(--tk-chip); color: var(--tk-ink2); font: inherit; font-size: 12.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; cursor: pointer; }
.st-ab svg { flex: none; }
.st-ab b { font-weight: inherit; }
.st-ab:disabled { opacity: .4; cursor: default; }
.st-asv.empty .st-ab { color: var(--tk-ink); }
.st-asu { display: flex; gap: 6px; margin-top: 8px; }
.st-aov { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 8px;
  font-size: 13px; font-weight: 700; text-align: center; }
.st-aov.dk { background: rgba(18, 18, 20, .55); color: #fff; }
.st-abar { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .28); }
.st-abar i { display: block; height: 100%; border-radius: 2px; background: var(--tk-rose); transition: width .2s; }
.st-ktag { position: absolute; left: 7px; top: 7px; z-index: 1; display: inline-flex; align-items: center; gap: 3px; padding: 3px 7px; border-radius: 7px;
  font-size: 10.5px; font-weight: 700; line-height: 1.3; background: rgba(18, 18, 20, .72); color: #fff; }
.st-cover .st-ktag { left: 14px; top: 14px; }
.st-cover .st-ktag.low { top: 48px; }   /* 카드 꼬리표(장르) 아래 */
.st-ktag.in { position: static; vertical-align: 2px; margin-left: 6px; }   /* 프로필 사진 44 는 좁아 이름 옆에 */
.st-aok { position: absolute; right: 7px; top: 7px; width: 22px; height: 22px; border-radius: 11px; background: var(--sf-up); color: var(--tk-bg); display: grid; place-items: center; }
.st-facewrap .st-aok { right: 0; top: 0; width: 16px; height: 16px; }
.st-facewrap .st-aok svg { width: 10px; height: 10px; }
.st-facewrap > img:not(.st-blur) { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.st-dim { width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: .6; }
.st-hl { box-shadow: 0 0 0 2px var(--tk-bg), 0 0 0 4px var(--tk-ink); }
.st-aundo { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; padding: 0; border: 0; background: none; color: var(--tk-ink2); font: inherit;
  font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* 끌어다 놓기 — 2px 점선 ink + 그림 .22 + '여기에 놓기' */
.st-drop { outline: 2px dashed var(--tk-ink); outline-offset: -2px; }
.st-drop > img { opacity: .22; }
.st-dropov { color: var(--tk-ink); background: none; }
.st-person[data-drop] { position: relative; border-radius: 12px; }
.st-person.st-drop .st-dropov { flex-direction: row; font-size: 13px; background: var(--tk-card); opacity: .92; }
/* 걸림 줄 · retry 줄 */
.st-astrip { display: flex; gap: 12px; align-items: center; margin-top: 14px; padding: 10px 12px; border-radius: 14px; border: 1.5px solid var(--tk-danger); }
.st-astrip-t { position: relative; width: 40px; height: 60px; border-radius: 8px; overflow: hidden; flex: none; background: var(--tk-chip); }
.st-astrip-t img { width: 100%; height: 100%; object-fit: cover; filter: blur(7px); transform: scale(1.2); }
.st-astrip-t i { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(209, 52, 59, .55); }
.st-astrip-b { flex: 1; min-width: 0; }
.st-astrip-b b { display: block; font-size: 14px; font-weight: 700; color: var(--tk-danger); word-break: keep-all; }
.st-alink { padding: 0; border: 0; background: none; color: var(--tk-ink2); font: inherit; font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.st-alink:disabled { opacity: .4; cursor: default; }
.st-astrip-x { margin-left: auto; align-self: flex-start; width: 28px; height: 28px; border: 0; border-radius: 14px; background: none; color: var(--tk-faint); display: grid; place-items: center; cursor: pointer; flex: none; }
.st-astrip.retry { border-color: transparent; background: var(--tk-chip); }
.st-astrip.retry .st-astrip-b b { color: var(--tk-ink2); font-weight: 600; }
.st-imgbtns + .st-astrip { margin-top: 10px; }
/* 보내는 사진 줄 */
.st-prows { margin-top: 14px; display: flex; flex-direction: column; gap: 16px; }
.st-prow { display: grid; grid-template-columns: 120px 1fr; gap: 20px; align-items: start; padding: 16px; border: 1px solid var(--tk-line); border-radius: 18px; background: var(--tk-card); }
.st-prow-f { min-width: 0; }
.st-prow .st-asu .st-ab { width: 30px; padding: 0; }
.st-prow .st-asu .st-ab b { display: none; }
.st-prow .st-asv.empty .st-ab { font-size: 11.5px; padding: 0 8px; height: 28px; }
.st-prows > [data-strips]:empty { display: none; }
.st-prows > [data-strips] .st-astrip { margin-top: -4px; }
.st-alab { font-size: 13px; font-weight: 700; color: var(--tk-ink2); margin: 0 0 6px; }
.st-whos + .st-alab { margin-top: 0; }
.st-whos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.st-who { height: 32px; padding: 0 12px 0 4px; border-radius: 999px; border: 0; background: var(--tk-chip); color: var(--tk-ink); font: inherit; font-size: 12.5px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.st-who img, .st-who-i { width: 24px; height: 24px; border-radius: 12px; object-fit: cover; object-position: top; background: var(--tk-line); flex: none; }
.st-who.any { padding: 0 12px; }
.st-who.on { background: var(--tk-ink); color: var(--tk-bg); }
.st-who:disabled { cursor: default; }
.st-prow .sf-field { width: 100%; }
.st-arow { display: block; resize: none; overflow: hidden; }
.st-alab em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--tk-faint); margin-left: 6px; }
.st-who.dim { opacity: .4; }
.st-prow .sf-field.err { border: 1.5px solid var(--tk-danger); }
.st-need { display: flex; gap: 6px; align-items: center; margin: -8px 0 14px; font-size: 13px; font-weight: 600; color: var(--tk-danger); word-break: keep-all; }
.st-need[hidden] { display: none; }
.st-prow-f .st-arow + .st-need { margin: 6px 0 0; }
.st-prow-f [data-strips] .st-astrip { margin-top: 10px; }
/* 폰 고르기 시트 · 자르기 창(PC 가운데 460 · 폰 아래 시트) */
.st-apick { display: flex; flex-direction: column; }
.st-apick button { display: flex; align-items: center; gap: 14px; height: 56px; padding: 0; border: 0; border-top: 1px solid var(--tk-line); background: none; color: var(--tk-ink);
  font: inherit; font-size: 16px; font-weight: 700; text-align: left; cursor: pointer; }
.st-apick button:first-child { border-top: 0; }
.st-apick svg { color: var(--tk-ink2); width: 20px; height: 20px; }
@media (min-width: 900px) { .st-sheet.st-cropbox { max-width: 460px; padding: 28px; } }
.st-cropbox h3 { font-size: 22px; font-weight: 800; margin: 0 0 4px; }
.st-crop { position: relative; max-width: 100%; margin: 12px auto 20px; border-radius: 12px; overflow: hidden; touch-action: none; cursor: grab; user-select: none; }
.st-crop img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.st-crop-win { position: absolute; box-shadow: 0 0 0 999px rgba(0, 0, 0, .58); border: 2px solid #fff; border-radius: 4px; box-sizing: border-box; }
.st-crop-win::before, .st-crop-win::after { content: ''; position: absolute; top: 50%; width: 6px; height: 36px; margin-top: -18px; border-radius: 3px; background: #fff; }
.st-crop-win::before { left: -4px; } .st-crop-win::after { right: -4px; }
.st-crop.tall .st-crop-win::before, .st-crop.tall .st-crop-win::after { top: auto; left: 50%; width: 36px; height: 6px; margin: 0 0 0 -18px; }
.st-crop.tall .st-crop-win::before { top: -4px; } .st-crop.tall .st-crop-win::after { bottom: -4px; right: auto; }
.st-sheet .st-crop-err { margin: -10px 0 16px; font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--tk-danger); }
.st-sheet .st-crop-err[hidden] { display: none; }
body:has(.st-scrim) .dk-totop { display: none; }   /* 시트가 열리면 위로 단추가 주 단추를 가리지 않게 */
.st-crop-btns { display: flex; gap: 8px; }
.st-crop-btns .st-sm { flex: 1; justify-content: center; height: 48px; border-radius: 999px; font-size: 15px; font-weight: 800; border: 0; background: var(--tk-chip); }
.st-crop-btns .st-sm.ink { background: var(--tk-ink); color: var(--tk-bg); }
@media (max-width: 599px) {
  .st-asu .st-ab { width: 30px; padding: 0; }
  .st-asu .st-ab b { display: none; }
  .st-asv.empty .st-ab { font-size: 11.5px; padding: 0 8px; height: 28px; }
  .st-prow { grid-template-columns: 96px 1fr; gap: 14px; padding: 12px; }
}

/* Studio 회원 화면 넷(로그인하면 Studio PR-C, 시안 ~/ops/cap/design-1025/studio-members SPEC · 디자인 통과 10/26) — 새 꼴은 sm- 만.
   meta.member 가 없으면(지원자 · 스위치 꺼짐) 이 꼴은 하나도 안 쓰인다 */
/* ① 첫 진입 동의 한 장 — 모달 아님, Studio 첫 화면 자리에 카드 한 장. PC 가운데 480, 폰 본문 폭 */
.sm-consent{max-width:480px;margin:40px auto 0;padding:28px 24px 24px;border-radius:20px;background:var(--tk-card);box-shadow:inset 0 0 0 1.5px var(--tk-line)}
.sm-consent h1{margin:0;font-size:22px;font-weight:800;line-height:1.35;letter-spacing:-.01em}
.sm-c-body{margin:8px 0 0;font-size:15px;line-height:1.6;color:var(--tk-ink2)}
.sm-c-items{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.sm-c-items li{display:flex;gap:12px;align-items:flex-start}
.sm-c-i{flex:none;width:36px;height:36px;border-radius:18px;background:var(--tk-chip);color:var(--tk-ink2);display:grid;place-items:center}
.sm-c-items b{display:block;font-size:15px;font-weight:700;line-height:1.45;padding-top:1px}
.sm-c-items small{display:block;margin-top:2px;font-size:14px;line-height:1.5;color:var(--tk-ink2)}
.sm-c-pv{display:inline-block;margin:16px 0 0 48px;font-size:14px;font-weight:700;color:var(--tk-ink2)!important;text-decoration:underline;text-underline-offset:3px}
.sm-c-age{margin-top:20px;padding-top:16px;border-top:1px solid var(--tk-line)}
.sm-c-age + .sm-c-age{margin-top:12px;padding-top:0;border-top:0}   /* 나이 · 약관 두 체크는 한 묶음 — 가름선은 묶음 위에 한 번(디자인 11/04) */
.sm-c-age b{font-size:15px}
.sm-c-age:has(input:disabled){cursor:default;opacity:.6}
.sm-err{margin:8px 0 0;font-size:14px;font-weight:600;line-height:1.5;color:var(--tk-danger)}
.sm-c-age + .sm-err{margin:4px 0 0 32px}
.sm-consent .sf-btn{margin-top:20px}
.sm-consent .sm-err + .sf-btn{margin-top:10px}
.sm-consent .sf-btn[aria-busy="true"]::before{width:15px;height:15px;box-sizing:border-box}
@media (max-width:599px){
  .sm-consent{margin-top:8px;padding:22px 20px 20px}
  .sm-consent h1{font-size:21px}
}

/* ② 회원 한도 줄 — 카드는 뺐다(studio-quota SPEC 추천 B), 멈춤 한 줄만 */
.sm-stop{margin:0 0 22px}
.st-new.sm-off{opacity:.4;cursor:default}

/* ③ 보여 주기 — 편 화면 머리 단추 줄 + 목록 카드 꼬리표 */
.sm-sharebox{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.sm-tag{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:13px;background:var(--tk-chip);color:var(--tk-ink2);font-size:14px;font-weight:700;white-space:nowrap}
.sm-tag svg{flex:none;color:var(--sf-up)}
.sm-tag.warn{background:var(--sf-warn-soft);color:var(--sf-warn)}
.sm-when{font-size:14px;color:var(--tk-faint);white-space:nowrap}
.st-sm.sm-busy:disabled{opacity:1;cursor:progress;color:var(--tk-ink2)}
.st-sm .st-ring{flex:none}
.st-tile-body .sm-tag{margin-top:4px}
.st-tile-body .st-pill + .sm-tag{margin-top:2px}
@media (max-width:760px){
  /* 폰: 단추 줄이 넘치면 … 메뉴로 넣지 않고 둘째 줄로 */
  .st-acts > .sm-sharebox{flex:1 1 100%;order:5;justify-content:flex-start}
  .st-acts > .sm-sharebox > .st-sm.sm-share{flex:1;justify-content:center}
}
/* 토스트 — DS 가운데 캡슐 14/600 · 10·16, 2.5초. 면은 ink(다크에선 밝은 캡슐) */
.sm-toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%);z-index:60;max-width:calc(100% - 40px);padding:10px 16px;border-radius:999px;
  background:var(--tk-ink);color:var(--tk-bg);font-size:14px;font-weight:600;line-height:1.45;box-shadow:0 6px 20px var(--tk-shadow);white-space:nowrap}
.sm-toast.danger{background:var(--tk-danger);color:var(--tk-on-danger)}
.sm-toast button{margin-left:10px;padding:0;border:0;background:none;color:inherit;font:inherit;font-weight:800;text-decoration:underline;text-underline-offset:3px}

/* ④ 제안 카드 — .sf-msgrow 꼴 그대로 + 로즈 점 · 오른쪽 단추 */
.sm-offer{margin:0 0 14px}
.sm-offer .sf-msgrow-tx{text-decoration:none;color:inherit}
.sm-offer .sf-msgrow-tx b{display:flex;align-items:center;gap:6px}
.sm-dot{width:8px;height:8px;border-radius:4px;background:var(--tk-rose);flex:none}
.sm-offer.read .sf-msgrow-tx span{color:var(--tk-faint)}
.sm-offer .st-sm.rose{flex:none;text-decoration:none}
.sf .sf-main a.st-sm.rose{color:var(--tk-on-rose)}
/* 제안 대화(로그인하면 Studio S6, 디자인 답 (나)) — 가장 최근 운영 말풍선 아래 [지원서 쓰기]: 말풍선과 8(.sf-msg gap 4 + 4) · 밑줄 없음 · 글 폭 */
.sf-msg .sf-offer-go{margin-top:4px;text-decoration:none}
@media (max-width:599px){
  .sm-offer{flex-wrap:wrap;row-gap:12px}
  .sm-offer .st-sm.rose{flex:1 1 100%;justify-content:center;height:44px}
}

/* 앱 안 모드(?app=ios|android, 시안 design-1025/app-studio SPEC '웹뷰 ↔ 네이티브 경계' · 디자인 통과 10/27) — 머리 · 닫기 · 메뉴는 앱이 그린다.
   사이트 머리(앱 받기 포함) · 바닥 숨김, 아래 시트 · 토스트 · 본문 끝은 홈 표시줄(safe-area) 만큼 띄움 */
html.st-app .dk-header, html.st-app .dk-footer { display: none !important; }
html.st-app .sf-main { padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px)); }
html.st-app .st-sheet { padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px)); }
html.st-app .sm-toast { bottom: calc(32px + env(safe-area-inset-bottom, 0px)); }

/* 남은 횟수는 모자랄 때만 그 단추 곁에(시안 design-1025/studio-quota SPEC 추천 B 11/04) — 새 토큰 없음.
   마감은 머리 '스토리 만들기' 뒤 로즈 굵게, 'n번 남음'은 로즈, 다 쓴 날 '내일 0시에 다시 열려요'는 faint */
.q-close { margin-left: 8px; color: var(--tk-rose-ink); font-weight: 800; }
.q-note { font-size: 13px; color: var(--tk-faint); }
.q-note.low { color: var(--tk-rose-ink); font-weight: 700; }
.st-acts > .q-note { align-self: center; }
.st-ibtn .q-note { font-size: 12.5px; }
.q-art { margin: 8px 0 0; }
@media (max-width: 760px) {
  .st-acts > .q-note { flex: 0 0 100%; text-align: center; }   /* 폰: [만들기] 아래 가운데 */
}
/* 엿보기 한 줄 — 이름 자리 토큰을 칩으로(QA 11/04 S5 · COPY-FIX #6). 칸은 sf-field 그대로, 글 따라 늘어남 */
.st-tokf { display: block; white-space: pre-wrap; overflow-wrap: anywhere; cursor: text; }
.st-tokf[aria-disabled="true"] { cursor: default; color: var(--tk-ink2); }
.st-tok { display: inline-block; padding: 0 8px; margin: 0 1px; border-radius: 999px; background: var(--tk-chip); color: var(--tk-ink); font-weight: 700;
  line-height: 1.5; white-space: nowrap; user-select: all; }

/* 스토리 전용 도키 한 줄(시안 ~/ops/cap/design-1025/member-doki SPEC ① · 10/27) — 편 타일 맨 아래, 동전 18 · 숫자 15/800 · 막대 56×4(막대 · 표지는 dokimi.css).
   아직 안 올림 = '앱에 올리면' + 받을 몫 total · 꽉 찬 막대를 .4, 조금 남음 = warn, 0 = faint */
.md-lot{display:inline-flex;align-items:center;gap:6px;margin-top:6px;height:24px;white-space:nowrap}
.md-lot img{flex:none;width:18px;height:18px}
.md-lot b{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--tk-ink)}
.md-lot em{font-style:normal;font-size:14px;font-weight:600;color:var(--tk-faint)}
.md-lot.md-low b{color:var(--sf-warn)}
.md-lot.md-low .md-bar i{background:var(--sf-warn)}
.md-lot.md-zero b{color:var(--tk-faint)}
.md-lot.md-zero img{opacity:.45}
.md-pend img,.md-pend b,.md-pend .md-bar{opacity:.4}
.md-lot.md-pend b{color:var(--tk-ink2)}
.st-tile-body .st-pill + .md-lot,.st-tile-body .sm-tag + .md-lot{margin-top:4px}


/* 시안 덧(studio-edit-order) — studio.css 뒤에 붙는다. 색은 tokens.css 변수만. */

/* 묶음 탭 — 머리 아래 붙음, 밑줄 하나로 지금 묶음 */
.ds-tabs { position: sticky; top: 0; z-index: 5; display: flex; gap: 2px; margin: -18px 0 18px; padding: 0; background: var(--tk-bg);
  border-bottom: 1px solid var(--tk-line); overflow-x: auto; scrollbar-width: none; }
.ds-tabs::-webkit-scrollbar { display: none; }
.ds-tabs button { all: unset; box-sizing: border-box; flex: none; height: 46px; padding: 0 14px; font-size: 15px; font-weight: 700; color: var(--tk-faint);
  cursor: pointer; border-bottom: 2.5px solid transparent; margin-bottom: -1px; }
.ds-tabs button[aria-current] { color: var(--tk-ink); border-bottom-color: var(--tk-ink); }
.ds-tabs button:disabled { opacity: .4; cursor: default; }
.ds-tabs button:focus-visible { outline: 2px solid var(--tk-ink); outline-offset: -4px; border-radius: 6px; }

/* 머리 저장 줄 */
.ds-save { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--tk-faint); }
.ds-save svg { flex: none; }
.ds-save.bad { color: var(--sf-warn); font-weight: 700; }
.ds-bang { font-style: normal; width: 16px; height: 16px; border-radius: 8px; border: 1.6px solid currentColor; display: inline-flex; align-items: center;
  justify-content: center; font-size: 11px; font-weight: 900; }
.ds-ver, .ds-retry { all: unset; display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; color: var(--tk-ink2); font-weight: 700; cursor: pointer;
  border-radius: 6px; }
.ds-retry { color: var(--tk-ink); text-decoration: underline; text-underline-offset: 3px; }
.ds-ver:hover { color: var(--tk-ink); }
.ds-ver:focus-visible, .ds-retry:focus-visible { outline: 2px solid var(--tk-ink); outline-offset: 2px; }

/* 이야기 칸 — [붙여 넣기] 는 왼쪽, 글자 수는 오른쪽 그대로 */
.st-freehead { display: flex; align-items: center; justify-content: space-between; }
.ds-paste { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--tk-ink); }
.st-free::placeholder { white-space: pre-wrap; line-height: 1.7; }

/* 프로필 — 표지 왼쪽, 제목 · 한 줄 소개 오른쪽 */
.ds-prof { display: flex; gap: 16px; align-items: flex-start; }
.ds-cover { flex: none; width: 104px; display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.ds-cover img, .ds-cover .st-ph { width: 104px; height: 156px; border-radius: 12px; object-fit: cover; object-position: top; display: block; }
.ds-cover .st-mini { width: 100%; justify-content: center; display: inline-flex; align-items: center; }
.ds-prof-f { flex: 1; min-width: 0; }
.ds-tags { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.ds-sub { font-size: 14px; font-weight: 800; color: var(--tk-ink2); margin: 22px 0 -4px; }

/* 캐릭터 안 '나' — 인물 카드와 같은 꼴, 얼굴 자리는 먹 */
.ds-me .st-pc-av { background: var(--tk-ink); color: var(--tk-bg); font-weight: 800; font-size: 14px; }

/* 공개 */
.ds-pub { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1.5px solid var(--tk-line); border-radius: 16px; }
.ds-pub-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ds-pub-t b { font-size: 15px; }
.ds-pub-t span { font-size: 14px; color: var(--tk-faint); }

/* 버전 기록 시트 */
.ds-hist { list-style: none; margin: 14px 0 0; padding: 0; }
.ds-hist li { display: grid; grid-template-columns: 96px 1fr auto; gap: 4px 12px; align-items: center; padding: 14px 0; border-top: 1px solid var(--tk-line); }
.ds-h-l { display: flex; flex-direction: column; gap: 2px; }
.ds-h-l b { font-size: 15px; }
.ds-h-l span { font-size: 13px; color: var(--tk-faint); }
.ds-h-w { font-size: 14px; color: var(--tk-ink2); line-height: 1.5; }
.ds-h-w em { display: block; font-style: normal; font-size: 13px; color: var(--tk-faint); margin-top: 2px; }
.ds-hist li.now .ds-h-l b { color: var(--tk-ink); }
.ds-hist li.now { padding-right: 4px; }

/* 되돌리기 확인 — 바뀌는 칸: 지금(줄 그음) → 그 버전 */
.ds-chg ul { list-style: none; margin: 12px 0 4px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ds-chg li { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 12px; background: var(--tk-chip); }
.ds-chg li b { font-size: 13px; color: var(--tk-faint); font-weight: 700; }
.ds-was { font-size: 14px; color: var(--tk-faint); text-decoration: line-through; }
.ds-will { font-size: 14.5px; color: var(--tk-ink); font-weight: 600; }
.ds-chg .ds-sub { margin-top: 6px; }

/* 되돌린 뒤 알림 — 디자인 시스템 Toast 꼴 + 글 단추 하나 */
.ds-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 50; display: flex; align-items: center; gap: 14px;
  background: rgba(20,22,26,.92); color: #fff; font-size: 14px; font-weight: 600; padding: 10px 10px 10px 18px; border-radius: 999px; white-space: nowrap; }
.ds-toast button { all: unset; cursor: pointer; padding: 6px 10px; border-radius: 999px; color: #fff; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 760px) {
  .ds-tabs { margin: -6px -16px 12px; padding: 0 8px; }
  .ds-tabs button { padding: 0 11px; height: 44px; }
  .ds-save { flex-wrap: wrap; }
  .ds-hist li { grid-template-columns: 1fr auto; }
  .ds-h-w { grid-column: 1 / -1; grid-row: 2; }
  .ds-cover { width: 88px; } .ds-cover img, .ds-cover .st-ph { width: 88px; height: 132px; }
  .ds-pub { flex-direction: column; align-items: stretch; }
}
@media (max-width: 480px) {
  .ds-save, .ds-hist .ds-h-w { font-size: var(--tk-fs-meta); }
  .ds-tabs button { font-size: var(--tk-fs-sec); }
}
.ds-imgs { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.ds-imgs img { width: 48px; height: 72px; border-radius: 8px; object-fit: cover; text-decoration: none; }
.ds-imgs img.ds-was { opacity: .4; filter: grayscale(1); }
.ds-imgs i { font-style: normal; color: var(--tk-faint); font-size: 18px; }
@media (max-width: 760px) { .ds-tabs { justify-content: space-between; padding: 0 6px; } .ds-tabs button { padding: 0 8px; } }
.ds-toast { background: #2a2a2f; box-shadow: inset 0 0 0 1px #3a3a41, 0 8px 24px rgba(0,0,0,.4); }
:root[data-theme='light'] .ds-toast { background: rgba(20,22,26,.92); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
@media (min-width: 1101px) { .ds-cover .st-mini { display: none; } }
.ds-pub { display: block; padding: 0; border: 0; }
.ds-pub .sm-sharebox { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 16px; border: 1.5px solid var(--tk-line); border-radius: 16px; }
.ds-pub-off { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; }
/* 해 보기 무료 — 단추 안 둘째 글, 같은 색 옅게 */
.st-gen .ds-free { margin-left: 8px; font-weight: 600; opacity: .72; }
.st-count[hidden] { display: none; }
.st-count.over { color: var(--sf-warn); font-weight: 700; }
.st-gen .ds-free { opacity: .9; font-weight: 500; }   /* 대비: 라이트 흰 90% 4.7 · 다크 먹 90% 6.4 (로즈 면 위) */

/* 비회원 Studio(시안 studio-guest 11/06) — studio.css · design.css 뒤에 붙는 덧. 토큰 변수만 씀 */

/* G1 그림체 선반 — 새 스토리 칸 아래 40. 제목 h2 19/800, 타깃 줄 머리 14/700 흐린 색, 견본 2:3(PC 132 · 폰 104) 가로로 흐름 */
.gs-ws .st-new { min-height: 220px; }   /* 빈 칸 하나뿐 — 표지 높이(300)까지 둘 까닭이 없어 선반을 첫 화면 안으로 */
.gs-shelf { margin-top: 40px; }
.gs-shelf h2 { font-size: 19px; font-weight: 800; margin: 0 0 4px; letter-spacing: -.01em; }
.gs-row h3 { font-size: 14px; font-weight: 700; color: var(--tk-ink2); margin: 14px 0 10px; }
.gs-strip { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px; scrollbar-width: none; }
.gs-strip::-webkit-scrollbar { display: none; }
.gs-st { all: unset; box-sizing: border-box; flex: none; width: 132px; cursor: pointer; scroll-snap-align: start; }
.gs-st img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 14px; background: var(--tk-chip); box-shadow: inset 0 0 0 1px var(--tk-line); }
.gs-st b { display: block; font-size: 13.5px; font-weight: 700; margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-st:hover img { outline: 2px solid var(--tk-rose); outline-offset: -2px; }
.gs-st:focus-visible img { outline: 2px solid var(--tk-rose); outline-offset: 2px; }
@media (min-width: 761px) {   /* PC: 타깃마다 열 칸 한 줄에 다 — 마우스로 가로 끌기 없이 */
  .gs-strip { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); overflow: visible; padding: 0; }
  .gs-st { width: auto; }
}
@media (max-width: 760px) {
  .gs-ws .st-new { min-height: 180px; }   /* 폰: 빈 칸 하나라 300 은 선반을 화면 밖으로 민다 */
  .gs-shelf { margin-top: 32px; }
  .gs-strip { margin: 0 -20px; padding: 0 20px 6px; scroll-padding: 0 20px; }
  .gs-st { width: 104px; }
}

/* G3 로그인 시트 — /login 열 그대로(단추 44 알약 · 사이 12 · 각 사 공식 꼴). PC 가운데 400 · 폰 아래 */
.st-sheet.gs-sheet { max-width: 400px; padding: 26px 24px 28px; }
.st-sheet.gs-sheet h3 { font-size: 22px; font-weight: 800; margin: 2px 0 22px; }
.gs-sheet .dk-login.gs-login { max-width: none; margin: 0; padding: 0; box-sizing: border-box; }
@media (max-width: 899px) { .st-sheet.gs-sheet { max-width: none; padding-bottom: calc(28px + env(safe-area-inset-bottom)); } }