* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; color: #222; background: #faf7f6; }
main { max-width: 480px; margin: 0 auto; padding: 24px 20px 48px; }
h1 { font-size: 22px; margin: 0 0 12px; }
.lead { color: #555; margin: 0 0 20px; }
label { display: block; font-weight: 600; margin: 16px 0 6px; }
input, textarea, select { width: 100%; min-height: 48px; padding: 10px 12px; font: inherit; font-size: 16px; border: 1px solid #ccc; border-radius: 10px; background: #fff; }
.btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin-top: 16px; padding: 12px 16px; font: inherit; font-size: 17px; font-weight: 600; color: #fff; background: #d65a6e; border: 0; border-radius: 12px; text-decoration: none; cursor: pointer; }
.btn:disabled { background: #ccc; cursor: not-allowed; }
.btn-light { color: #222; background: #fff; border: 1px solid #ddd; }
.btn-big { min-height: 96px; font-size: 24px; }
.role { margin-left: 8px; font-size: 14px; font-weight: 400; color: #777; }
.link { min-height: 48px; margin-top: 8px; padding: 0; font: inherit; color: #777; background: none; border: 0; text-decoration: underline; cursor: pointer; }
.error { padding: 10px 12px; color: #a1262f; background: #fdecec; border-radius: 10px; }
.quota { font-size: 18px; font-weight: 600; }
.field-error { margin: 6px 0 0; color: #a1262f; font-size: 15px; }
.notice { padding: 10px 12px; color: #1d5b34; background: #e8f5ec; border-radius: 10px; }
.radio { display: flex; align-items: center; gap: 12px; min-height: 48px; margin: 6px 0; padding: 8px 12px; font-weight: 400; background: #fff; border: 1px solid #ccc; border-radius: 10px; }
.radio input { width: 24px; min-height: 24px; height: 24px; flex: none; margin: 0; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid #eee; }
.row form { margin: 0; }
.btn-small { width: auto; min-height: 48px; margin: 0; padding: 8px 16px; font-size: 16px; }
.previews { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.previews figure { margin: 0; }
.previews img { width: 100%; border-radius: 10px; }
.previews figcaption { text-align: center; color: #555; }
.draft-sec { margin-top: 28px; }
.draft-sec h2 { font-size: 19px; margin: 0 0 8px; }
.pre { white-space: pre-wrap; margin: 4px 0 12px; }
.issue, .card { margin: 10px 0; padding: 10px 12px; background: #fff; border: 1px solid #eee; border-radius: 10px; }
.issue p, .card p { margin: 4px 0; }
.tag { display: inline-block; padding: 2px 8px; font-size: 14px; color: #6b4a00; background: #fff3d6; border-radius: 6px; }
.sort-summary { margin: 12px 0 2px; font-weight: 600; }
.sort-note { margin: 0 0 8px; color: #555; font-size: 15px; }
.sort-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 8px 0; padding: 0; list-style: none; }
.sort-tile { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 4px; background: #fff; border: 1px solid #ddd; border-radius: 10px; }
.sort-tile img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; }
.sort-name { display: block; font-size: 13px; color: #555; overflow-wrap: anywhere; }
.sort-video { grid-column: 1 / -1; justify-content: center; min-height: 96px; text-align: center; }
.sort-btns { display: flex; gap: 4px; }
.sort-btns button { flex: 1; min-height: 44px; padding: 0; font: inherit; font-size: 14px; background: #fff; border: 1px solid #ccc; border-radius: 8px; cursor: pointer; }
.sort-btns button[aria-pressed="true"] { color: #fff; background: #d65a6e; border-color: #d65a6e; }
.sort-hero { display: flex; align-items: center; gap: 4px; margin: 0; font-size: 14px; font-weight: 400; }
.sort-hero input { width: 20px; min-height: 20px; height: 20px; }
.hint { margin: 6px 0 0; color: #555; font-size: 15px; }
.sort-head { grid-column: 1 / -1; margin-top: 6px; font-size: 14px; font-weight: 700; color: #555; }
.sort-btns button { white-space: nowrap; font-size: 13px; }
.sort-hero { min-height: 44px; }
.sort-badge { padding: 1px 8px; font-size: 12px; font-weight: 700; color: #fff; background: #d65a6e; border-radius: 10px; }
@media (min-width: 481px) { .sort-grid { grid-template-columns: repeat(3, 1fr); } }
/* 확인 화면: 릴스 첫 화면 미리보기. 비율은 render 의 thumbnail.html(1080x1920 · .panel .title)과 같다 */
.phone { position: relative; width: 100%; max-width: 260px; margin: 0 auto; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 22px; background: #2b221e; container-type: inline-size; }
.phone img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.phone-shade { position: absolute; left: 0; right: 0; bottom: 0; height: 52%; background: linear-gradient(180deg, rgba(30, 22, 18, 0) 0%, rgba(30, 22, 18, 0.6) 50%, rgba(30, 22, 18, 0.88) 100%); }
.phone-panel { position: absolute; left: 6.667%; right: 6.667%; bottom: 15.625%; display: flex; flex-direction: column; gap: 2.593cqw; color: #fff; }
.phone-rule { width: 11.111cqw; height: 0.741cqw; border-radius: 0.37cqw; background: #b5654f; }
.phone-title { max-height: 38.889cqw; overflow: hidden; font-size: 10.37cqw; font-weight: 900; line-height: 1.24; letter-spacing: -0.02em; word-break: keep-all; overflow-wrap: break-word; white-space: pre-line; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3); }
.phone-cap { margin: 8px 0 0; text-align: center; font-size: 15px; }
.hook-opt { align-items: flex-start; padding: 12px; }
.hook-opt input { margin-top: 2px; }
.hook-opt:has(input:checked) { border-color: #d65a6e; background: #fdf0f2; }
.hook-opt:has(input:disabled) { color: #888; }
.hook-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hook-head { display: flex; align-items: center; gap: 6px; }
.hook-text { margin: 0; font-weight: 600; }
.hook-score { font-size: 14px; color: #777; }
.badge { display: inline-block; padding: 1px 8px; font-size: 13px; font-weight: 700; color: #fff; background: #d65a6e; border-radius: 10px; }
.hot { font-size: 14px; font-weight: 700; color: #d65a6e; }
.js .hook-apply { display: none; }
.hook-custom, .tiktok { margin-top: 12px; }
.hook-custom summary, .tiktok summary { display: flex; align-items: center; gap: 6px; min-height: 48px; cursor: pointer; font-weight: 600; }
.track .radio { margin-bottom: 0; }
.listen { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: #555; font-size: 15px; }
.tiktok { padding: 4px 12px 12px; background: #fff; border: 1px solid #eee; border-radius: 10px; }
.tiktok video { margin: 8px 0; border-radius: 10px; background: #000; }
.tt-in { display: none; color: #1d5b34; }
.tt-skip { color: #a1262f; }
.tiktok:has(.tt-consent:checked) .tt-skip, .tiktok.tt-on .tt-skip { display: none; }
.tiktok:has(.tt-consent:checked) .tt-in, .tiktok.tt-on .tt-in { display: inline; }
.tap { display: inline-flex; align-items: center; min-height: 44px; }
.btn[hidden] { display: none; }
.unconnected { margin: 4px 0; color: #555; }
.unconnected a { display: inline-flex; align-items: center; min-height: 44px; color: #d65a6e; }
.summary { padding: 12px; font-size: 17px; font-weight: 600; background: #fff; border: 1px solid #eee; border-radius: 10px; }
/* 홈 · 예정된 게시물 · 복사 페이지 */
.board { margin-top: 20px; }
.line { display: flex; align-items: center; min-height: 48px; margin: 8px 0 0; padding: 10px 12px; font-weight: 600; color: #222; background: #fff; border: 1px solid #eee; border-radius: 10px; text-decoration: none; }
.line-bad { color: #a1262f; border-color: #f3c9cd; }
.line-box { margin-top: 8px; }
.line-box .line { margin-top: 0; }
.line-box .btn-small, .row-btns .btn-small { width: 100%; margin-top: 8px; }
.line-box form, .row-btns form { margin: 0; }
.notice-tap { display: block; width: 100%; min-height: 48px; margin-top: 8px; font: inherit; text-align: left; border: 0; cursor: pointer; }
.list { margin: 0; padding: 0; list-style: none; }
.list-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 8px 0; border-bottom: 1px solid #eee; }
.list-row .tap:first-child, .list-row .when { flex: 1 1 auto; min-width: 0; font-weight: 600; color: #222; overflow-wrap: anywhere; }
.list-row .tap { text-decoration: none; }
.list-row > p, .list-row > form, .list-row > .row-btns, .list-row > .sub { flex: 1 0 100%; margin: 0; }
.state { flex: none; padding: 2px 10px; font-size: 14px; color: #555; background: #f1ecea; border-radius: 10px; }
.sub { color: #d65a6e; font-size: 15px; }
.sched h2 .tap { color: #222; text-decoration: none; }
.copy-text { padding: 12px; background: #fff; border: 1px solid #eee; border-radius: 10px; user-select: text; -webkit-user-select: text; }